/* Optional softened neo-brutal theme. The original app.css remains the classic theme. */

@view-transition {
  navigation: auto;
}

.admin-surface .sidebar {
  view-transition-name: zhtk-sidebar;
}

.admin-surface .admin-topbar {
  view-transition-name: zhtk-topbar;
}

.admin-surface .admin-main-inner {
  view-transition-name: zhtk-content;
}

::view-transition-old(root),
::view-transition-new(root),
::view-transition-old(zhtk-sidebar),
::view-transition-new(zhtk-sidebar),
::view-transition-old(zhtk-topbar),
::view-transition-new(zhtk-topbar) {
  animation: none;
  mix-blend-mode: normal;
}

::view-transition-group(zhtk-content) {
  animation-duration: 150ms;
  animation-timing-function: ease-out;
}

::view-transition-old(zhtk-content) {
  animation: zhtk-content-out 70ms ease-in both;
}

::view-transition-new(zhtk-content) {
  animation: zhtk-content-in 150ms ease-out both;
}

@keyframes zhtk-content-out {
  to {
    opacity: 0;
    transform: translateY(-2px);
  }
}

@keyframes zhtk-content-in {
  from {
    opacity: 0;
    transform: translateY(3px);
  }
}

html.page-navigation-pending .admin-main-inner {
  opacity: .72;
  transform: translateY(1px);
  transition: opacity 70ms ease, transform 70ms ease;
}

.style-option-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.style-option {
  display: grid;
  min-width: 0;
  min-height: 76px;
  grid-template-columns: 42px minmax(0, 1fr) 24px;
  align-items: center;
  gap: 12px;
  padding: 13px;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  background: var(--surface-subtle);
  color: var(--ink);
  box-shadow: none;
  text-align: left;
  white-space: normal;
}

.style-option:hover {
  border-color: var(--accent);
  background: var(--surface);
  color: var(--ink-strong);
}

.style-option.is-active {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--ink-strong);
  box-shadow: var(--shadow-sm);
}

.style-option-icon {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid var(--line-strong);
  border-radius: 5px;
  background: var(--surface);
  color: var(--muted-strong);
}

.style-option-icon-soft {
  background: var(--accent-soft);
  color: var(--accent);
}

.style-option-copy {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.style-option-copy strong {
  overflow: hidden;
  color: var(--ink-strong);
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.style-option-copy small {
  font-size: 11px;
}

.style-option-check {
  display: grid;
  width: 22px;
  height: 22px;
  place-items: center;
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  background: var(--surface);
  color: transparent;
}

.style-option.is-active .style-option-check {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
}

.style-option-check svg {
  width: 14px;
  height: 14px;
}

:root[data-ui-style="soft-brutal"] {
  color-scheme: light;
  --ink-strong: #222827;
  --ink: #222827;
  --muted: #6d7774;
  --muted-strong: #6d7774;
  --line: #cbd4cf;
  --line-strong: #cbd4cf;
  --canvas: #f2f4ef;
  --surface: #fffef9;
  --surface-subtle: #f2f4ef;
  --surface-strong: #e9eeea;
  --sidebar: #fffef9;
  --sidebar-hover: #e9eeea;
  --sidebar-surface: #fffef9;
  --mint: #4f9b6f;
  --mint-soft: #dcefe2;
  --blue: #557ab4;
  --blue-soft: #e1e9f5;
  --coral: #e87858;
  --coral-soft: #f8e1d8;
  --amber: #b87d26;
  --amber-soft: #f6e9c9;
  --red: #be5862;
  --red-soft: #f5dfe1;
  --accent: var(--mint);
  --accent-hover: var(--mint);
  --accent-soft: var(--mint-soft);
  --accent-line: var(--mint);
  --success: var(--mint);
  --success-soft: var(--mint-soft);
  --warning: var(--amber);
  --warning-soft: var(--amber-soft);
  --danger: var(--red);
  --danger-soft: var(--red-soft);
  --info: var(--blue);
  --info-soft: var(--blue-soft);
  --brutal-line: #2d3634;
  --brutal-shadow: 4px 4px 0 rgba(34, 40, 39, .12);
  --brutal-shadow-small: 3px 3px 0 rgba(34, 40, 39, .09);
  --context-surface: #e9eeea;
  --context-ink: #222827;
  --shadow-sm: 3px 3px 0 rgba(34, 40, 39, .09);
  --shadow-md: 6px 6px 0 rgba(34, 40, 39, .13);
  --radius: 6px;
}

:root[data-ui-style="soft-brutal"][data-theme="dark"] {
  color-scheme: dark;
  --ink-strong: #f3f3f5;
  --ink: #dcdee3;
  --muted: #a5a8b2;
  --muted-strong: #c3c5cc;
  --line: #3b3e48;
  --line-strong: #5f6470;
  --canvas: #181a20;
  --surface: #22242b;
  --surface-subtle: #282b33;
  --surface-strong: #30343d;
  --sidebar: #1d1f25;
  --sidebar-hover: #2d3038;
  --sidebar-surface: #1d1f25;
  --mint: #74c99b;
  --mint-soft: #263d32;
  --blue: #8aaef0;
  --blue-soft: #2d374c;
  --coral: #f08b72;
  --coral-soft: #4b332f;
  --amber: #e1b65d;
  --amber-soft: #433a27;
  --red: #e6848d;
  --red-soft: #493037;
  --accent: #f08b72;
  --accent-hover: #ffa088;
  --accent-soft: #4b332f;
  --accent-line: #8c554a;
  --success: #74c99b;
  --success-soft: #263d32;
  --warning: #e1b65d;
  --warning-soft: #433a27;
  --danger: #e6848d;
  --danger-soft: #493037;
  --info: #8aaef0;
  --info-soft: #2d374c;
  --brutal-line: #747985;
  --brutal-shadow: 4px 4px 0 rgba(0, 0, 0, .34);
  --brutal-shadow-small: 3px 3px 0 rgba(0, 0, 0, .28);
  --context-surface: #292c35;
  --context-ink: #f3f3f5;
  --shadow-sm: 3px 3px 0 rgba(0, 0, 0, .28);
  --shadow-md: 6px 6px 0 rgba(0, 0, 0, .36);
}

:root[data-ui-style="soft-brutal"] body.admin-surface {
  --ink-strong: #222827;
  --ink: #222827;
  --muted: #6d7774;
  --muted-strong: #6d7774;
  --line: #cbd4cf;
  --line-strong: #cbd4cf;
  --canvas: #f2f4ef;
  --sidebar-surface: #fffef9;
}

:root[data-ui-style="soft-brutal"][data-theme="dark"] body.admin-surface {
  --ink-strong: #f3f3f5;
  --ink: #dcdee3;
  --muted: #a5a8b2;
  --muted-strong: #c3c5cc;
  --line: #3b3e48;
  --line-strong: #5f6470;
  --canvas: #181a20;
  --sidebar-surface: #1d1f25;
}

:root[data-ui-style="soft-brutal"] body {
  background: var(--canvas);
}

:root[data-ui-style="soft-brutal"] h1 {
  font-weight: 780;
}

:root[data-ui-style="soft-brutal"] h2,
:root[data-ui-style="soft-brutal"] h3 {
  font-weight: 760;
}

:root[data-ui-style="soft-brutal"] button,
:root[data-ui-style="soft-brutal"] .button {
  border: 1px solid var(--brutal-line);
  border-radius: 5px;
  background: var(--coral);
  color: #fff;
  box-shadow: 3px 3px 0 color-mix(in srgb, var(--brutal-line) 35%, transparent);
}

:root[data-ui-style="soft-brutal"] button:hover:not(:disabled),
:root[data-ui-style="soft-brutal"] .button:hover:not(.disabled) {
  border-color: var(--brutal-line);
  background: var(--coral);
  color: #fff;
  transform: translate(-1px, -1px);
  box-shadow: var(--brutal-shadow-small);
}

:root[data-ui-style="soft-brutal"] button:active,
:root[data-ui-style="soft-brutal"] .button:active {
  transform: none;
  box-shadow: none;
}

:root[data-ui-style="soft-brutal"] button:focus-visible,
:root[data-ui-style="soft-brutal"] .button:focus-visible,
:root[data-ui-style="soft-brutal"] a:focus-visible,
:root[data-ui-style="soft-brutal"] input:focus-visible,
:root[data-ui-style="soft-brutal"] textarea:focus-visible,
:root[data-ui-style="soft-brutal"] select:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--accent) 25%, transparent);
  outline-offset: 2px;
}

:root[data-ui-style="soft-brutal"] button.secondary,
:root[data-ui-style="soft-brutal"] .button.secondary,
:root[data-ui-style="soft-brutal"] .icon-button {
  border-color: var(--brutal-line);
  background: var(--surface);
  color: var(--ink);
  box-shadow: 2px 2px 0 color-mix(in srgb, var(--brutal-line) 16%, transparent);
}

:root[data-ui-style="soft-brutal"] button.secondary:hover,
:root[data-ui-style="soft-brutal"] .button.secondary:hover,
:root[data-ui-style="soft-brutal"] .icon-button:hover {
  border-color: var(--brutal-line);
  background: var(--surface-strong);
  color: var(--ink-strong);
}

:root[data-ui-style="soft-brutal"] button.ghost,
:root[data-ui-style="soft-brutal"] .button.ghost {
  border-color: transparent;
  background: transparent;
  color: var(--muted-strong);
  box-shadow: none;
}

:root[data-ui-style="soft-brutal"] button.danger,
:root[data-ui-style="soft-brutal"] .button.danger {
  border-color: var(--danger);
  background: var(--danger-soft);
  color: var(--danger);
  box-shadow: 2px 2px 0 color-mix(in srgb, var(--danger) 18%, transparent);
}

:root[data-ui-style="soft-brutal"] input,
:root[data-ui-style="soft-brutal"] textarea,
:root[data-ui-style="soft-brutal"] select {
  border: 1px solid var(--line-strong);
  border-radius: 5px;
  background: var(--surface);
}

:root[data-ui-style="soft-brutal"] input:focus,
:root[data-ui-style="soft-brutal"] textarea:focus,
:root[data-ui-style="soft-brutal"] select:focus {
  border-color: var(--brutal-line);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent);
}

:root[data-ui-style="soft-brutal"] .brand-mark {
  border: 1px solid var(--brutal-line);
  border-radius: 5px;
  background: var(--coral);
  color: #fff;
  box-shadow: 3px 3px 0 color-mix(in srgb, var(--brutal-line) 35%, transparent);
}

:root[data-ui-style="soft-brutal"] .status {
  border-radius: 4px;
}

:root[data-ui-style="soft-brutal"] .status.active,
:root[data-ui-style="soft-brutal"] .status.success {
  border-color: color-mix(in srgb, var(--success) 55%, var(--line));
}

:root[data-ui-style="soft-brutal"] .status.disabled,
:root[data-ui-style="soft-brutal"] .status.expired,
:root[data-ui-style="soft-brutal"] .status.exhausted,
:root[data-ui-style="soft-brutal"] .status.warning {
  border-color: color-mix(in srgb, var(--warning) 55%, var(--line));
}

:root[data-ui-style="soft-brutal"] .status.error,
:root[data-ui-style="soft-brutal"] .status.danger {
  border-color: color-mix(in srgb, var(--danger) 55%, var(--line));
}

:root[data-ui-style="soft-brutal"] .status.info {
  border-color: color-mix(in srgb, var(--info) 55%, var(--line));
}

:root[data-ui-style="soft-brutal"] .flash,
:root[data-ui-style="soft-brutal"] .stock-empty-message,
:root[data-ui-style="soft-brutal"] .operation-progress {
  border-width: 1px;
  border-radius: 5px;
}

:root[data-ui-style="soft-brutal"] .flash-close {
  border-color: transparent;
  background: transparent;
  color: currentColor;
  box-shadow: none;
}

/* Public redemption, login, result and error pages */

:root[data-ui-style="soft-brutal"] .public-header {
  position: relative;
  max-width: 1180px;
  height: 72px;
  border-bottom: 1px solid var(--line);
}

:root[data-ui-style="soft-brutal"] .public-main {
  min-height: calc(100vh - 72px);
  padding-top: 32px;
}

:root[data-ui-style="soft-brutal"] .redeem-workspace,
:root[data-ui-style="soft-brutal"] .auth-workspace {
  border: 1.5px solid var(--brutal-line);
  border-radius: 6px;
  background: var(--surface);
  box-shadow: var(--shadow-md);
}

:root[data-ui-style="soft-brutal"] .redeem-context,
:root[data-ui-style="soft-brutal"] .auth-context {
  border-right: 1.5px solid var(--brutal-line);
  background: var(--context-surface);
  color: var(--context-ink);
}

:root[data-ui-style="soft-brutal"] .context-heading .eyebrow {
  color: var(--accent);
}

:root[data-ui-style="soft-brutal"] .context-heading h1,
:root[data-ui-style="soft-brutal"] .context-heading p,
:root[data-ui-style="soft-brutal"] .context-meta dd {
  color: var(--context-ink);
}

:root[data-ui-style="soft-brutal"] .context-heading p,
:root[data-ui-style="soft-brutal"] .context-meta dt {
  opacity: .72;
}

:root[data-ui-style="soft-brutal"] .context-symbol {
  border: 1px solid var(--brutal-line);
  border-radius: 5px;
  background: var(--accent-soft);
  color: var(--accent);
  box-shadow: var(--brutal-shadow-small);
}

:root[data-ui-style="soft-brutal"] .context-meta {
  border-top-color: color-mix(in srgb, var(--brutal-line) 24%, transparent);
}

:root[data-ui-style="soft-brutal"] .context-meta > div {
  border-bottom-color: color-mix(in srgb, var(--brutal-line) 24%, transparent);
}

:root[data-ui-style="soft-brutal"] .redeem-panel,
:root[data-ui-style="soft-brutal"] .login-panel,
:root[data-ui-style="soft-brutal"] .error-panel {
  background: var(--surface);
}

:root[data-ui-style="soft-brutal"] .redeem-form textarea {
  background: var(--canvas);
}

:root[data-ui-style="soft-brutal"] .operation-progress-notice {
  border: 1px solid color-mix(in srgb, var(--info) 50%, var(--line));
  border-left: 4px solid var(--info);
  border-radius: 4px;
  background: var(--info-soft);
}

:root[data-ui-style="soft-brutal"] .operation-progress progress {
  height: 9px;
  border: 1px solid var(--brutal-line);
  border-radius: 3px;
}

:root[data-ui-style="soft-brutal"] .operation-progress progress::-webkit-progress-bar,
:root[data-ui-style="soft-brutal"] .operation-progress progress::-webkit-progress-value,
:root[data-ui-style="soft-brutal"] .operation-progress progress::-moz-progress-bar {
  border-radius: 2px;
}

:root[data-ui-style="soft-brutal"] .error-panel {
  border: 1.5px solid var(--brutal-line);
  border-radius: 6px;
  box-shadow: var(--shadow-md);
}

:root[data-ui-style="soft-brutal"] .delivery-hero {
  padding: 18px;
  border: 1.5px solid var(--brutal-line);
  border-radius: 6px;
  background: var(--surface);
  box-shadow: var(--brutal-shadow-small);
}

:root[data-ui-style="soft-brutal"] .delivery-success-icon,
:root[data-ui-style="soft-brutal"] .format-mark,
:root[data-ui-style="soft-brutal"] .delivery-account-index {
  border: 1px solid var(--brutal-line);
  border-radius: 5px;
}

:root[data-ui-style="soft-brutal"] .delivery-overview {
  overflow: hidden;
  border: 1.5px solid var(--brutal-line);
  border-radius: 6px;
  box-shadow: var(--brutal-shadow-small);
}

:root[data-ui-style="soft-brutal"] .delivery-download-section,
:root[data-ui-style="soft-brutal"] .delivery-accounts {
  padding: 20px;
  border: 1.5px solid var(--brutal-line);
  border-radius: 6px;
  background: var(--surface);
  box-shadow: var(--brutal-shadow-small);
}

:root[data-ui-style="soft-brutal"] .download-button,
:root[data-ui-style="soft-brutal"] .format-action {
  border-color: var(--brutal-line);
  border-radius: 5px;
  background: var(--surface-subtle);
  color: var(--ink);
  box-shadow: 2px 2px 0 color-mix(in srgb, var(--brutal-line) 13%, transparent);
}

:root[data-ui-style="soft-brutal"] .download-button:hover,
:root[data-ui-style="soft-brutal"] .format-action:hover {
  border-color: var(--format-color);
  background: var(--surface-strong);
  color: var(--format-color);
}

:root[data-ui-style="soft-brutal"] .delivery-account {
  border: 1px solid var(--brutal-line);
  border-left: 4px solid var(--success);
  border-radius: 5px;
  background: var(--surface-subtle);
  box-shadow: var(--brutal-shadow-small);
}

:root[data-ui-style="soft-brutal"] .delivery-account.expired {
  border-left-color: var(--warning);
}

/* Admin shell and navigation */

:root[data-ui-style="soft-brutal"] .admin-surface .admin-shell::before {
  border-right: 1.5px solid var(--brutal-line);
  background: var(--sidebar-surface);
}

:root[data-ui-style="soft-brutal"] .admin-surface .sidebar {
  padding: 22px 18px 18px;
  border-right: 1.5px solid var(--brutal-line);
  background: var(--sidebar-surface);
  color: var(--ink);
}

:root[data-ui-style="soft-brutal"] .admin-surface .brand-inverse,
:root[data-ui-style="soft-brutal"] .admin-surface .brand-inverse:hover {
  color: var(--ink-strong);
}

:root[data-ui-style="soft-brutal"] .admin-surface .brand-inverse .brand-copy small {
  color: var(--muted);
}

:root[data-ui-style="soft-brutal"] .admin-surface .sidebar-environment {
  margin-right: 4px;
  margin-left: 4px;
  border: 1px solid var(--line-strong);
  border-radius: 5px;
  background: var(--canvas);
  box-shadow: 2px 2px 0 color-mix(in srgb, var(--brutal-line) 10%, transparent);
}

:root[data-ui-style="soft-brutal"] .admin-surface .sidebar-environment strong {
  color: var(--ink-strong);
}

:root[data-ui-style="soft-brutal"] .admin-surface .sidebar-environment small,
:root[data-ui-style="soft-brutal"] .admin-surface .nav-label {
  color: var(--muted);
}

:root[data-ui-style="soft-brutal"] .admin-surface .sidebar nav a,
:root[data-ui-style="soft-brutal"] .admin-surface .sidebar-bottom a,
:root[data-ui-style="soft-brutal"] .admin-surface .sidebar-action {
  border: 1px solid transparent;
  border-radius: 5px;
  background: transparent;
  color: var(--muted-strong);
  box-shadow: none;
}

:root[data-ui-style="soft-brutal"] .admin-surface .sidebar nav a:hover,
:root[data-ui-style="soft-brutal"] .admin-surface .sidebar-bottom a:hover,
:root[data-ui-style="soft-brutal"] .admin-surface .sidebar-action:hover {
  border-color: var(--line-strong);
  background: var(--surface-strong);
  color: var(--ink-strong);
  transform: none;
  box-shadow: none;
}

:root[data-ui-style="soft-brutal"] .admin-surface .sidebar nav a.active {
  border-color: var(--brutal-line);
  background: var(--success-soft);
  color: var(--ink-strong);
  box-shadow: 3px 3px 0 color-mix(in srgb, var(--success) 24%, transparent);
}

:root[data-ui-style="soft-brutal"] .admin-surface .sidebar nav a.active::before {
  top: 8px;
  bottom: 8px;
  left: -4px;
  width: 4px;
  background: var(--success);
}

:root[data-ui-style="soft-brutal"] .admin-surface .sidebar nav a.active svg {
  color: var(--success);
}

:root[data-ui-style="soft-brutal"] .admin-surface .sidebar-bottom {
  border-color: var(--line);
}

:root[data-ui-style="soft-brutal"] .admin-surface .admin-topbar {
  border-bottom: 1px solid var(--line-strong);
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  backdrop-filter: blur(12px);
}

:root[data-ui-style="soft-brutal"] .admin-surface .admin-main {
  background: var(--canvas);
}

:root[data-ui-style="soft-brutal"] .admin-surface .admin-page-header h1 {
  font-size: 30px;
}

:root[data-ui-style="soft-brutal"] .admin-surface .eyebrow,
:root[data-ui-style="soft-brutal"] .admin-surface .section-kicker {
  color: var(--accent);
}

/* Admin metrics, workbenches, tables and settings */

:root[data-ui-style="soft-brutal"] .admin-surface .executive-strip,
:root[data-ui-style="soft-brutal"] .admin-surface .metric,
:root[data-ui-style="soft-brutal"] .admin-surface .dashboard-chart-panel,
:root[data-ui-style="soft-brutal"] .admin-surface .quality-panel,
:root[data-ui-style="soft-brutal"] .admin-surface .inventory-panel,
:root[data-ui-style="soft-brutal"] .admin-surface .pool-summary-panel,
:root[data-ui-style="soft-brutal"] .admin-surface .chart-section,
:root[data-ui-style="soft-brutal"] .admin-surface .create-section,
:root[data-ui-style="soft-brutal"] .admin-surface .settings-section,
:root[data-ui-style="soft-brutal"] .admin-surface .metadata-disclosure,
:root[data-ui-style="soft-brutal"] .admin-surface .table-wrap {
  border: 1.5px solid var(--brutal-line);
  border-radius: 6px;
  background: var(--surface);
  box-shadow: var(--brutal-shadow-small);
}

:root[data-ui-style="soft-brutal"] .admin-surface .executive-strip {
  overflow: hidden;
}

:root[data-ui-style="soft-brutal"] .admin-surface .executive-metric,
:root[data-ui-style="soft-brutal"] .admin-surface .metric {
  position: relative;
  background: var(--surface);
}

:root[data-ui-style="soft-brutal"] .admin-surface .executive-metric::before,
:root[data-ui-style="soft-brutal"] .admin-surface .metric::before {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 4px;
  background: var(--metric-tone, var(--accent));
  content: "";
}

:root[data-ui-style="soft-brutal"] .admin-surface .executive-metric:nth-child(4n + 1),
:root[data-ui-style="soft-brutal"] .admin-surface .metric:nth-child(4n + 1) { --metric-tone: var(--success); }
:root[data-ui-style="soft-brutal"] .admin-surface .executive-metric:nth-child(4n + 2),
:root[data-ui-style="soft-brutal"] .admin-surface .metric:nth-child(4n + 2) { --metric-tone: var(--info); }
:root[data-ui-style="soft-brutal"] .admin-surface .executive-metric:nth-child(4n + 3),
:root[data-ui-style="soft-brutal"] .admin-surface .metric:nth-child(4n + 3) { --metric-tone: var(--coral); }
:root[data-ui-style="soft-brutal"] .admin-surface .executive-metric:nth-child(4n),
:root[data-ui-style="soft-brutal"] .admin-surface .metric:nth-child(4n) { --metric-tone: var(--warning); }

:root[data-ui-style="soft-brutal"] .admin-surface .executive-metric.primary::before,
:root[data-ui-style="soft-brutal"] .admin-surface .executive-metric.danger::before {
  right: 0;
  left: 0;
}

:root[data-ui-style="soft-brutal"] .admin-surface .metric-icon {
  border: 1px solid var(--line-strong);
  border-radius: 5px;
}

:root[data-ui-style="soft-brutal"] .admin-surface .created-codes {
  border: 1.5px solid var(--success);
  border-radius: 6px;
  background: var(--success-soft);
  box-shadow: var(--brutal-shadow-small);
}

:root[data-ui-style="soft-brutal"] .admin-surface .connection-strip,
:root[data-ui-style="soft-brutal"] .admin-surface .pool-context-bar,
:root[data-ui-style="soft-brutal"] .admin-surface .pool-health-strip {
  overflow: hidden;
  border: 1.5px solid var(--brutal-line);
  border-radius: 6px;
  background: var(--surface);
  box-shadow: var(--brutal-shadow-small);
}

:root[data-ui-style="soft-brutal"] .admin-surface .pool-tabs a,
:root[data-ui-style="soft-brutal"] .admin-surface .pool-state-item,
:root[data-ui-style="soft-brutal"] .admin-surface .pool-summary-list a,
:root[data-ui-style="soft-brutal"] .admin-surface .usage-item {
  border-color: var(--brutal-line);
  border-radius: 5px;
  background: var(--surface-subtle);
  box-shadow: 2px 2px 0 color-mix(in srgb, var(--brutal-line) 11%, transparent);
}

:root[data-ui-style="soft-brutal"] .admin-surface .pool-tabs a.active {
  border-color: var(--brutal-line);
  background: var(--info-soft);
  color: var(--info);
  box-shadow: 3px 3px 0 color-mix(in srgb, var(--info) 22%, transparent);
}

:root[data-ui-style="soft-brutal"] .admin-surface .table-wrap {
  scrollbar-color: var(--line-strong) transparent;
}

:root[data-ui-style="soft-brutal"] .admin-surface th {
  background: var(--surface-strong);
}

:root[data-ui-style="soft-brutal"] .admin-surface th,
:root[data-ui-style="soft-brutal"] .admin-surface td {
  border-color: var(--line);
}

:root[data-ui-style="soft-brutal"] .admin-surface .table-sticky-start,
:root[data-ui-style="soft-brutal"] .admin-surface .table-sticky-end {
  background: var(--surface);
}

:root[data-ui-style="soft-brutal"] .admin-surface thead .table-sticky-start,
:root[data-ui-style="soft-brutal"] .admin-surface thead .table-sticky-end {
  background: var(--surface-strong);
}

:root[data-ui-style="soft-brutal"] .admin-surface .action-menu-panel {
  border: 1px solid var(--brutal-line);
  border-radius: 5px;
  box-shadow: var(--brutal-shadow);
}

:root[data-ui-style="soft-brutal"] .admin-surface .metadata-disclosure > summary {
  background: var(--surface-subtle);
}

:root[data-ui-style="soft-brutal"] .admin-surface .file-field {
  border-color: var(--line-strong);
  border-radius: 5px;
  background: var(--surface-subtle);
}

:root[data-ui-style="soft-brutal"] .admin-surface .tab-button {
  border-color: transparent;
  background: transparent;
  color: var(--muted-strong);
  box-shadow: none;
}

:root[data-ui-style="soft-brutal"] .admin-surface .tab-button:hover,
:root[data-ui-style="soft-brutal"] .admin-surface .tab-button.active {
  border-color: var(--brutal-line);
  background: var(--info-soft);
  color: var(--info);
  box-shadow: 2px 2px 0 color-mix(in srgb, var(--info) 18%, transparent);
}

:root[data-ui-style="soft-brutal"] .admin-surface fieldset,
:root[data-ui-style="soft-brutal"] .admin-surface .choice-row,
:root[data-ui-style="soft-brutal"] .admin-surface .unit-switch,
:root[data-ui-style="soft-brutal"] .admin-surface .tabs {
  border-color: var(--line-strong);
  border-radius: 5px;
}

:root[data-ui-style="soft-brutal"] .admin-surface .settings-index {
  border: 1.5px solid var(--brutal-line);
  border-radius: 6px;
  background: var(--surface);
  box-shadow: var(--brutal-shadow-small);
}

:root[data-ui-style="soft-brutal"] .admin-surface .settings-index nav a {
  border: 1px solid transparent;
  border-radius: 4px;
}

:root[data-ui-style="soft-brutal"] .admin-surface .settings-index nav a:hover {
  border-color: var(--line-strong);
  background: var(--surface-strong);
}

:root[data-ui-style="soft-brutal"] .admin-surface .settings-section-number {
  border: 1px solid var(--brutal-line);
  border-radius: 4px;
  background: var(--accent-soft);
  color: var(--accent);
  box-shadow: 2px 2px 0 color-mix(in srgb, var(--accent) 20%, transparent);
}

:root[data-ui-style="soft-brutal"] .admin-surface .style-option {
  border-color: var(--brutal-line);
  background: var(--surface-subtle);
  color: var(--ink);
  box-shadow: 2px 2px 0 color-mix(in srgb, var(--brutal-line) 11%, transparent);
}

:root[data-ui-style="soft-brutal"] .admin-surface .style-option:hover,
:root[data-ui-style="soft-brutal"] .admin-surface .style-option.is-active {
  border-color: var(--brutal-line);
  background: var(--accent-soft);
  color: var(--ink-strong);
}

:root[data-ui-style="soft-brutal"] .admin-surface .style-option.is-active {
  box-shadow: 3px 3px 0 color-mix(in srgb, var(--accent) 25%, transparent);
}

/* Exact light-palette role mapping from the standalone reference. */
:root[data-ui-style="soft-brutal"][data-theme="light"] .eyebrow,
:root[data-ui-style="soft-brutal"][data-theme="light"] .admin-surface .eyebrow,
:root[data-ui-style="soft-brutal"][data-theme="light"] .admin-surface .section-kicker,
:root[data-ui-style="soft-brutal"][data-theme="light"] .admin-surface .quality-link {
  color: var(--mint);
}

:root[data-ui-style="soft-brutal"][data-theme="light"] .brand-mark,
:root[data-ui-style="soft-brutal"][data-theme="light"] .admin-surface .brand-mark {
  border: 1.5px solid var(--brutal-line);
  background: var(--coral);
  color: #fff;
  box-shadow: 3px 3px 0 color-mix(in srgb, var(--brutal-line) 36%, transparent);
}

:root[data-ui-style="soft-brutal"][data-theme="light"] .live-dot {
  background: var(--mint);
  box-shadow: 0 0 0 3px var(--mint-soft);
}

:root[data-ui-style="soft-brutal"][data-theme="light"] .admin-surface button:not(.secondary):not(.ghost):not(.danger):not(.icon-button):not(.sidebar-action):not(.tab-button):not(.style-option),
:root[data-ui-style="soft-brutal"][data-theme="light"] .admin-surface .button:not(.secondary):not(.ghost):not(.danger) {
  border-color: var(--brutal-line);
  background: var(--coral);
  color: #fff;
  box-shadow: 3px 3px 0 color-mix(in srgb, var(--brutal-line) 34%, transparent);
}

:root[data-ui-style="soft-brutal"][data-theme="light"] .admin-surface button:not(.secondary):not(.ghost):not(.danger):not(.icon-button):not(.sidebar-action):not(.tab-button):not(.style-option):hover,
:root[data-ui-style="soft-brutal"][data-theme="light"] .admin-surface .button:not(.secondary):not(.ghost):not(.danger):hover {
  border-color: var(--brutal-line);
  background: var(--coral);
  color: #fff;
  transform: translate(-1px, -1px);
  box-shadow: var(--brutal-shadow-small);
}

:root[data-ui-style="soft-brutal"][data-theme="light"] .admin-surface button.secondary,
:root[data-ui-style="soft-brutal"][data-theme="light"] .admin-surface .button.secondary {
  border-color: var(--brutal-line);
  background: var(--surface);
  color: var(--ink);
  box-shadow: 2px 2px 0 color-mix(in srgb, var(--brutal-line) 14%, transparent);
}

:root[data-ui-style="soft-brutal"][data-theme="light"] .admin-surface button.secondary:hover,
:root[data-ui-style="soft-brutal"][data-theme="light"] .admin-surface .button.secondary:hover {
  border-color: var(--brutal-line);
  background: var(--surface-strong);
  color: var(--ink-strong);
}

:root[data-ui-style="soft-brutal"][data-theme="light"] .admin-surface .utility-actions .icon-button {
  border-color: var(--line);
  background: var(--surface);
  color: var(--muted);
  box-shadow: none;
}

:root[data-ui-style="soft-brutal"][data-theme="light"] .admin-surface .utility-actions .icon-button:hover {
  border-color: var(--brutal-line);
  background: var(--surface-strong);
  color: var(--ink);
}

:root[data-ui-style="soft-brutal"][data-theme="light"] .admin-surface .sidebar nav a.active {
  border-color: var(--brutal-line);
  background: var(--mint-soft);
  color: var(--ink);
  box-shadow: 3px 3px 0 color-mix(in srgb, var(--mint) 26%, transparent);
}

:root[data-ui-style="soft-brutal"][data-theme="light"] .admin-surface .sidebar nav a.active::before,
:root[data-ui-style="soft-brutal"][data-theme="light"] .admin-surface .creation-workbench::before {
  background: var(--mint);
}

:root[data-ui-style="soft-brutal"][data-theme="light"] .admin-surface .sidebar nav a.active svg {
  color: var(--mint);
}

:root[data-ui-style="soft-brutal"][data-theme="light"] input:hover,
:root[data-ui-style="soft-brutal"][data-theme="light"] textarea:hover,
:root[data-ui-style="soft-brutal"][data-theme="light"] select:hover {
  border-color: var(--brutal-line);
}

:root[data-ui-style="soft-brutal"][data-theme="light"] input::placeholder,
:root[data-ui-style="soft-brutal"][data-theme="light"] textarea::placeholder,
:root[data-ui-style="soft-brutal"][data-theme="light"] .search-field svg,
:root[data-ui-style="soft-brutal"][data-theme="light"] .empty-state svg,
:root[data-ui-style="soft-brutal"][data-theme="light"] .admin-surface .executive-label svg,
:root[data-ui-style="soft-brutal"][data-theme="light"] .admin-surface .inventory-stat-list span svg,
:root[data-ui-style="soft-brutal"][data-theme="light"] .admin-surface .settings-index nav svg,
:root[data-ui-style="soft-brutal"][data-theme="light"] .admin-surface .sidebar nav a svg,
:root[data-ui-style="soft-brutal"][data-theme="light"] .admin-surface .sidebar-bottom a svg,
:root[data-ui-style="soft-brutal"][data-theme="light"] .admin-surface .sidebar-action svg {
  color: var(--muted);
}

:root[data-ui-style="soft-brutal"][data-theme="light"] .admin-surface .executive-metric.primary::before {
  background: var(--metric-tone, var(--mint));
}

:root[data-ui-style="soft-brutal"][data-theme="light"] .admin-surface .executive-metric.danger::before {
  background: var(--red);
}

:root[data-ui-style="soft-brutal"][data-theme="light"] .admin-surface .quality-dot {
  background: var(--muted);
}

:root[data-ui-style="soft-brutal"][data-theme="light"] .admin-surface .quality-dot.warning {
  background: var(--amber);
}

:root[data-ui-style="soft-brutal"][data-theme="light"] .admin-surface .quality-dot.danger {
  background: var(--red);
}

:root[data-ui-style="soft-brutal"][data-theme="light"] .admin-surface .pool-tabs a.active {
  border-color: var(--brutal-line);
  background: var(--mint-soft);
  color: var(--mint);
  box-shadow: 3px 3px 0 color-mix(in srgb, var(--mint) 22%, transparent);
}

:root[data-ui-style="soft-brutal"][data-theme="light"] .admin-surface .pool-tabs a.active strong,
:root[data-ui-style="soft-brutal"][data-theme="light"] .admin-surface .style-option.is-active,
:root[data-ui-style="soft-brutal"][data-theme="light"] .admin-surface .choice-row .radio:has(input:checked) {
  background: var(--mint-soft);
  color: var(--mint);
}

:root[data-ui-style="soft-brutal"][data-theme="light"] .admin-surface .tab-button:hover,
:root[data-ui-style="soft-brutal"][data-theme="light"] .admin-surface .tab-button.active,
:root[data-ui-style="soft-brutal"][data-theme="light"] .admin-surface .health-filters .active,
:root[data-ui-style="soft-brutal"][data-theme="light"] .admin-surface .unit-switch button.active {
  border-color: var(--brutal-line);
  background: var(--surface);
  color: var(--ink);
  box-shadow: 2px 2px 0 color-mix(in srgb, var(--brutal-line) 10%, transparent);
}

:root[data-ui-style="soft-brutal"][data-theme="light"] tbody tr:hover {
  background: color-mix(in srgb, var(--mint-soft) 35%, var(--surface));
}

:root[data-ui-style="soft-brutal"][data-theme="light"] td {
  color: var(--ink);
}

:root[data-ui-style="soft-brutal"][data-theme="light"] .status.active,
:root[data-ui-style="soft-brutal"][data-theme="light"] .status.success,
:root[data-ui-style="soft-brutal"][data-theme="light"] .operation-progress.complete,
:root[data-ui-style="soft-brutal"][data-theme="light"] .flash:not(.error):not(.warning) {
  border-color: color-mix(in srgb, var(--mint) 45%, var(--line));
  background: var(--mint-soft);
  color: var(--mint);
}

:root[data-ui-style="soft-brutal"][data-theme="light"] .status.info {
  border-color: color-mix(in srgb, var(--blue) 45%, var(--line));
  background: var(--blue-soft);
  color: var(--blue);
}

:root[data-ui-style="soft-brutal"][data-theme="light"] .status.disabled,
:root[data-ui-style="soft-brutal"][data-theme="light"] .status.expired,
:root[data-ui-style="soft-brutal"][data-theme="light"] .status.exhausted,
:root[data-ui-style="soft-brutal"][data-theme="light"] .status.warning,
:root[data-ui-style="soft-brutal"][data-theme="light"] .flash.warning,
:root[data-ui-style="soft-brutal"][data-theme="light"] .stock-empty-message {
  border-color: color-mix(in srgb, var(--amber) 45%, var(--line));
  background: var(--amber-soft);
  color: var(--amber);
}

:root[data-ui-style="soft-brutal"][data-theme="light"] .stock-empty-message strong,
:root[data-ui-style="soft-brutal"][data-theme="light"] .stock-empty-message p,
:root[data-ui-style="soft-brutal"][data-theme="light"] .stock-empty-message a {
  color: var(--amber);
}

:root[data-ui-style="soft-brutal"][data-theme="light"] .status.error,
:root[data-ui-style="soft-brutal"][data-theme="light"] .status.danger,
:root[data-ui-style="soft-brutal"][data-theme="light"] .operation-progress.error,
:root[data-ui-style="soft-brutal"][data-theme="light"] .flash.error {
  border-color: color-mix(in srgb, var(--red) 45%, var(--line));
  background: var(--red-soft);
  color: var(--red);
}

:root[data-ui-style="soft-brutal"][data-theme="light"] .admin-surface .file-field:hover {
  border-color: var(--mint);
  background: var(--mint-soft);
}

:root[data-ui-style="soft-brutal"][data-theme="light"] .download-button.sub2api,
:root[data-ui-style="soft-brutal"][data-theme="light"] .format-action.sub2api {
  --format-color: var(--mint);
}

:root[data-ui-style="soft-brutal"][data-theme="light"] .download-button.cpa,
:root[data-ui-style="soft-brutal"][data-theme="light"] .format-action.cpa {
  --format-color: var(--blue);
}

:root[data-ui-style="soft-brutal"][data-theme="light"] .download-button.cockpit,
:root[data-ui-style="soft-brutal"][data-theme="light"] .format-action.cockpit {
  --format-color: var(--amber);
}

:root[data-ui-style="soft-brutal"][data-theme="light"] .delivery-success-icon {
  border-color: var(--brutal-line);
  background: var(--mint-soft);
  color: var(--mint);
}

:root[data-ui-style="soft-brutal"][data-theme="light"] .admin-surface .data-row > .table-sticky-start {
  border-left-color: var(--blue);
}

:root[data-ui-style="soft-brutal"][data-theme="light"] .admin-surface .data-row.state-active > .table-sticky-start,
:root[data-ui-style="soft-brutal"][data-theme="light"] .admin-surface .data-row.health-normal > .table-sticky-start {
  border-left-color: var(--mint);
}

:root[data-ui-style="soft-brutal"][data-theme="light"] .admin-surface .data-row.state-warning > .table-sticky-start,
:root[data-ui-style="soft-brutal"][data-theme="light"] .admin-surface .data-row.state-disabled > .table-sticky-start,
:root[data-ui-style="soft-brutal"][data-theme="light"] .admin-surface .data-row.health-limited > .table-sticky-start {
  border-left-color: var(--amber);
}

:root[data-ui-style="soft-brutal"][data-theme="light"] .admin-surface .data-row.state-error > .table-sticky-start,
:root[data-ui-style="soft-brutal"][data-theme="light"] .admin-surface .data-row.state-danger > .table-sticky-start,
:root[data-ui-style="soft-brutal"][data-theme="light"] .admin-surface .data-row.health-abnormal > .table-sticky-start {
  border-left-color: var(--red);
}

@media (max-width: 900px) {
  .admin-surface .settings-index nav {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  :root[data-ui-style="soft-brutal"] .redeem-workspace,
  :root[data-ui-style="soft-brutal"] .auth-workspace {
    box-shadow: var(--brutal-shadow-small);
  }

  :root[data-ui-style="soft-brutal"] .redeem-context,
  :root[data-ui-style="soft-brutal"] .auth-context {
    border-right: 0;
    border-bottom: 1.5px solid var(--brutal-line);
  }

  :root[data-ui-style="soft-brutal"] .delivery-download-section,
  :root[data-ui-style="soft-brutal"] .delivery-accounts {
    padding: 16px;
  }

  :root[data-ui-style="soft-brutal"] .admin-surface .sidebar {
    border-right: 1.5px solid var(--brutal-line);
  }
}

@media (max-width: 560px) {
  .style-option-grid {
    grid-template-columns: 1fr;
  }

  .admin-surface .settings-index nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  :root[data-ui-style="soft-brutal"] .delivery-hero {
    padding: 15px;
  }
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root),
  ::view-transition-old(zhtk-sidebar),
  ::view-transition-new(zhtk-sidebar),
  ::view-transition-old(zhtk-topbar),
  ::view-transition-new(zhtk-topbar),
  ::view-transition-old(zhtk-content),
  ::view-transition-new(zhtk-content) {
    animation: none;
  }

  html.page-navigation-pending .admin-main-inner {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

:root[data-ui-style="soft-brutal"] .admin-surface .bulk-action-bar {
  border: 1.5px solid var(--brutal-line);
  border-radius: 5px;
  background: var(--surface-subtle);
  box-shadow: 3px 3px 0 color-mix(in srgb, var(--brutal-line) 12%, transparent);
}

:root[data-ui-style="soft-brutal"] .admin-surface .bulk-toggle[aria-pressed="true"] {
  border-color: var(--brutal-line);
  background: var(--info-soft);
  color: var(--info);
  box-shadow: 2px 2px 0 color-mix(in srgb, var(--info) 20%, transparent);
}

:root[data-ui-style="soft-brutal"] .admin-surface tr.bulk-selected > td,
:root[data-ui-style="soft-brutal"] .admin-surface tr.bulk-selected > .table-sticky-start,
:root[data-ui-style="soft-brutal"] .admin-surface tr.bulk-selected > .table-sticky-end,
:root[data-ui-style="soft-brutal"] .admin-surface tr.bulk-selected > .bulk-select-column {
  background: color-mix(in srgb, var(--info-soft) 72%, var(--surface));
}

:root[data-ui-style="soft-brutal"] .aftersales-notice {
  border: 1.5px solid var(--brutal-line);
  border-left: 6px solid var(--coral);
  border-radius: 6px;
  background: var(--coral-soft);
  box-shadow: var(--brutal-shadow-small);
}
:root[data-ui-style="soft-brutal"] .aftersales-notice-icon {
  border: 1px solid var(--brutal-line);
  border-radius: 5px;
  background: var(--surface);
  color: var(--coral);
  box-shadow: 2px 2px 0 color-mix(in srgb, var(--brutal-line) 13%, transparent);
}
:root[data-ui-style="soft-brutal"] .aftersales-notice-copy .eyebrow { color: var(--coral); }
:root[data-ui-style="soft-brutal"] .aftersales-notice-copy h2 a { color: var(--red); }
:root[data-ui-style="soft-brutal"] .aftersales-notice-copy .aftersales-quota-note {
  border-top-color: color-mix(in srgb, var(--brutal-line) 28%, transparent);
}
:root[data-ui-style="soft-brutal"] .admin-surface .settings-toggle-card {
  border: 1.5px solid var(--brutal-line);
  border-radius: 5px;
  box-shadow: 2px 2px 0 color-mix(in srgb, var(--brutal-line) 10%, transparent);
}
:root[data-ui-style="soft-brutal"] .admin-surface .settings-switch-track {
  border-color: var(--brutal-line);
  border-radius: 5px;
}