/* Shared control-surface polish for the admin and checker pages. */

html[data-theme="light"] body.admin-page {
  --admin-bg: #f3f7fe;
  --admin-surface: rgba(255, 255, 255, .92);
  --admin-surface-2: #f7faff;
  --admin-ink: #10264b;
  --admin-muted: #5d7396;
  --admin-dim: #7890b2;
  --admin-line: rgba(56, 98, 155, .16);
  --admin-accent: #2879e8;
  background: linear-gradient(180deg, #f6f9ff 0%, #edf4fd 52%, #f8fbff 100%) !important;
  color: var(--admin-ink) !important;
}

html[data-theme="dark"] body.admin-page {
  --admin-bg: #061326;
  --admin-surface: rgba(10, 28, 57, .9);
  --admin-surface-2: #0d2345;
  --admin-ink: #edf5ff;
  --admin-muted: #a8bfdc;
  --admin-dim: #7895bc;
  --admin-line: rgba(148, 190, 248, .18);
  --admin-accent: #65a6f5;
  background: #061326 !important;
  color: var(--admin-ink) !important;
}

/* Checker used to inherit the old warm navigation tokens. */
html[data-theme="light"] body.checker-page {
  background: linear-gradient(180deg, #f7faff 0%, #eef5ff 48%, #f9fbff 100%) !important;
}
html[data-theme="light"] body.checker-page::before {
  background: radial-gradient(820px 500px at 88% -8%, rgba(92, 160, 245, .15), transparent 66%), radial-gradient(680px 440px at 4% 28%, rgba(126, 184, 255, .1), transparent 70%) !important;
}
html[data-theme="light"] body.checker-page .codex-nav {
  background: rgba(248, 251, 255, .94) !important;
  border-bottom-color: rgba(56, 98, 155, .14) !important;
  box-shadow: 0 10px 30px rgba(58, 105, 169, .08) !important;
}

/* Admin shell */
.admin-page .codex-nav {
  background: color-mix(in srgb, var(--admin-surface) 92%, transparent) !important;
  border-bottom-color: var(--admin-line) !important;
  box-shadow: 0 12px 34px rgba(30, 72, 130, .08) !important;
}
.admin-page .nav-inner { max-width: 1320px; height: 68px; padding-inline: 28px; }
.admin-page .nav-brand { color: var(--admin-ink) !important; letter-spacing: -.02em; }
.admin-page .nav-links { display: flex; align-items: center; gap: 14px; }
.admin-page .nav-links a { color: var(--admin-muted) !important; }
.admin-page .nav-links a:hover { color: var(--admin-accent) !important; }
.admin-page .theme-toggle { margin-left: 4px; }
.admin-page .admin-layout {
  position: relative;
  max-width: 1320px !important;
  padding: 52px 28px 100px !important;
}
.admin-page #dashboardPanel { position: relative; isolation: isolate; }
.admin-page #dashboardPanel::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -52px -14vw auto;
  height: 420px;
  pointer-events: none;
  background: radial-gradient(560px 240px at 78% 0%, rgba(75, 150, 255, .15), transparent 72%), radial-gradient(420px 220px at 12% 0%, rgba(125, 191, 255, .1), transparent 72%);
}
html[data-theme="dark"] .admin-page #dashboardPanel::before { background: radial-gradient(560px 240px at 78% 0%, rgba(46, 111, 205, .18), transparent 72%), radial-gradient(420px 220px at 12% 0%, rgba(24, 72, 145, .14), transparent 72%); }
.admin-page #dashboardPanel > * { position: relative; z-index: 1; }
.admin-page .admin-header { align-items: flex-end; padding: 0 2px 30px; }
.admin-page .admin-header h1 { color: var(--admin-ink) !important; font-size: clamp(30px, 4vw, 46px); letter-spacing: -.05em; }
.admin-page .admin-header p, .admin-page .admin-card-copy { color: var(--admin-muted) !important; }

.admin-page .admin-card,
.admin-page .ck-panel,
.admin-page .admin-capacity-card,
.admin-page .admin-models-card {
  border: 1px solid var(--admin-line) !important;
  border-radius: 26px !important;
  background: var(--admin-surface) !important;
  color: var(--admin-ink) !important;
  box-shadow: 0 24px 64px -42px rgba(36, 86, 151, .32), inset 0 1px rgba(255, 255, 255, .74) !important;
}
html[data-theme="dark"] .admin-page .admin-card,
html[data-theme="dark"] .admin-page .ck-panel,
html[data-theme="dark"] .admin-page .admin-capacity-card,
html[data-theme="dark"] .admin-page .admin-models-card { box-shadow: 0 24px 64px -42px rgba(0, 0, 0, .72), inset 0 1px rgba(255, 255, 255, .06) !important; }
.admin-page .section-title h2,
.admin-page .admin-card h2,
.admin-page .admin-card h3 { color: var(--admin-ink) !important; }
.admin-page .section-title .material-symbols-outlined { color: var(--admin-accent) !important; }

/* Metrics become quiet instrument tiles instead of a black terminal strip. */
.admin-page #dashboardPanel > .ck-metric-strip {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
.admin-page #dashboardPanel > .ck-metric-strip .ck-metric {
  min-height: 126px;
  padding: 20px !important;
  border: 1px solid var(--admin-line) !important;
  border-radius: 22px !important;
  background: var(--admin-surface) !important;
  color: var(--admin-ink) !important;
  box-shadow: 0 18px 42px -30px rgba(31, 83, 150, .3) !important;
}
.admin-page #dashboardPanel > .ck-metric-strip .ck-metric::before { content: "" !important; width: 34px; height: 3px; border-radius: 99px; background: var(--admin-accent) !important; opacity: .78; }
.admin-page .metric-label { color: var(--admin-dim) !important; }
.admin-page .metric-value, .admin-page .metric-value strong { color: var(--admin-ink) !important; }

/* Inputs, selects and action buttons */
.admin-page .admin-input,
.admin-page input.admin-input,
.admin-page select.admin-input,
.admin-page textarea.admin-input {
  min-height: 44px;
  border: 1px solid var(--admin-line) !important;
  border-radius: 14px !important;
  background: var(--admin-surface-2) !important;
  color: var(--admin-ink) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.5) !important;
}
.admin-page .admin-input::placeholder { color: var(--admin-dim) !important; }
.admin-page .admin-input:focus { border-color: rgba(40, 121, 232, .62) !important; box-shadow: 0 0 0 4px rgba(40, 121, 232, .11) !important; outline: none; }
.admin-page .btn-primary,
.admin-page .btn-secondary,
.admin-page .icon-button { border-radius: 999px !important; min-height: 42px; }
.admin-page .btn-primary { background: linear-gradient(135deg, #2879e8, #4b99f5) !important; color: #fff !important; border-color: transparent !important; box-shadow: 0 14px 28px -18px rgba(40, 121, 232, .8) !important; }
.admin-page .btn-secondary, .admin-page .icon-button { background: var(--admin-surface-2) !important; color: var(--admin-ink) !important; border: 1px solid var(--admin-line) !important; }
.admin-page .btn-primary:hover, .admin-page .btn-secondary:hover, .admin-page .icon-button:hover { transform: translateY(-1px); }

/* Error log: clean paper-like surface in light theme, readable dark surface otherwise. */
.admin-page .mac-terminal { border: 1px solid var(--admin-line) !important; border-radius: 22px !important; overflow: hidden; background: var(--admin-surface-2) !important; box-shadow: none !important; }
.admin-page .terminal-bar { background: color-mix(in srgb, var(--admin-surface-2) 84%, var(--admin-accent)) !important; border-bottom-color: var(--admin-line) !important; color: var(--admin-muted) !important; }
.admin-page .terminal-log { background: var(--admin-surface-2) !important; color: var(--admin-ink) !important; }
.admin-page .terminal-log > * { border-bottom-color: var(--admin-line) !important; }
.admin-page .terminal-row { color: var(--admin-ink) !important; }
.admin-page .terminal-row strong { color: var(--admin-ink) !important; }
.admin-page .terminal-time,
.admin-page .terminal-row code { color: var(--admin-muted) !important; }
.admin-page .terminal-status { background: rgba(208, 73, 73, .10) !important; color: #bd3030 !important; }
.admin-page .terminal-message { color: var(--admin-ink) !important; }
html[data-theme="dark"] .admin-page .mac-terminal { background: #0a1b38 !important; }
html[data-theme="dark"] .admin-page .terminal-bar { background: #10284f !important; border-bottom-color: rgba(190, 217, 255, .16) !important; color: #b8d0ef !important; }
html[data-theme="dark"] .admin-page .terminal-log { background: #0b1d3a !important; color: #dceaff !important; }
html[data-theme="dark"] .admin-page .terminal-log > * { border-bottom-color: rgba(148, 190, 248, .12) !important; }
html[data-theme="dark"] .admin-page .terminal-row,
html[data-theme="dark"] .admin-page .terminal-row strong,
html[data-theme="dark"] .admin-page .terminal-message { color: #dceaff !important; }
html[data-theme="dark"] .admin-page .terminal-time,
html[data-theme="dark"] .admin-page .terminal-row code { color: #8faaca !important; }
.admin-page #generatedKeys { background: #0b1d3a !important; color: #dceaff !important; border-color: rgba(148, 190, 248, .2) !important; }

/* Tables, model rows and key cards share one material language. */
.admin-page .admin-model-row,
.admin-page .model-row,
.admin-page .key-card,
.admin-page .keys-grid > * {
  border-color: var(--admin-line) !important;
  border-radius: 18px !important;
  background: color-mix(in srgb, var(--admin-surface) 84%, var(--admin-surface-2)) !important;
  color: var(--admin-ink) !important;
}
.admin-page .admin-notice { border-radius: 16px !important; background: color-mix(in srgb, var(--admin-accent) 8%, transparent) !important; border-color: var(--admin-line) !important; color: var(--admin-muted) !important; }

@media (max-width: 980px) {
  .admin-page #dashboardPanel > .ck-metric-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
  .admin-page .nav-inner { padding-inline: 16px; }
  .admin-page .admin-layout { padding: 32px 16px 72px !important; }
  .admin-page .admin-header { align-items: flex-start; flex-direction: column; gap: 18px; }
  .admin-page #dashboardPanel > .ck-metric-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 460px) {
  .admin-page #dashboardPanel > .ck-metric-strip { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .admin-page .btn-primary:hover, .admin-page .btn-secondary:hover, .admin-page .icon-button:hover { transform: none; }
}

/* v2 component normalization: the legacy stylesheet contains several older
   dashboard passes. These rules deliberately reset those components instead
   of layering decorative effects over them. */
.admin-page #dashboardPanel > .ck-metric-strip {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}
.admin-page #dashboardPanel > .ck-metric-strip::before {
  content: none !important;
  display: none !important;
}
.admin-page #dashboardPanel > .ck-metric-strip .ck-metric {
  min-width: 0 !important;
  min-height: 108px !important;
  border-right: 1px solid var(--admin-line) !important;
}
.admin-page #dashboardPanel > .ck-metric-strip .metric-value {
  display: grid !important;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr);
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}
.admin-page #dashboardPanel > .ck-metric-strip .metric-value strong {
  white-space: nowrap;
  word-break: normal !important;
  overflow-wrap: normal !important;
  font-size: clamp(22px, 2vw, 30px) !important;
  line-height: 1 !important;
}
.admin-page #dashboardPanel > .ck-metric-strip .metric-value small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--admin-muted) !important;
}

.admin-page .admin-capacity-card {
  display: grid !important;
  grid-template-columns: minmax(0, 1.35fr) minmax(300px, .65fr) !important;
  grid-template-areas:
    "title title"
    "totals stats"
    "meter stats"
    "advice stats" !important;
  gap: 18px 22px !important;
  align-items: stretch !important;
  padding: 26px !important;
}
.admin-page .admin-capacity-card > .section-title { grid-area: title !important; }
.admin-page .admin-capacity-card > .capacity-hero {
  grid-area: totals !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
  width: 100% !important;
}
.admin-page .capacity-hero > div {
  min-width: 0 !important;
  min-height: 116px !important;
  padding: 18px !important;
  border: 1px solid var(--admin-line) !important;
  border-radius: 18px !important;
  background: var(--admin-surface-2) !important;
  box-shadow: none !important;
}
.admin-page .capacity-hero span, .admin-page .capacity-stats span { color: var(--admin-dim) !important; }
.admin-page .capacity-hero strong, .admin-page .capacity-stats strong { color: var(--admin-ink) !important; }
.admin-page .capacity-hero small { color: var(--admin-muted) !important; }
.admin-page .admin-capacity-card > .capacity-token-meter { grid-area: meter !important; align-self: end; }
.admin-page .capacity-stats {
  grid-area: stats !important;
  display: grid !important;
  gap: 0 !important;
  min-width: 0 !important;
  padding: 8px 16px !important;
  border: 1px solid var(--admin-line) !important;
  border-radius: 18px !important;
  background: var(--admin-surface-2) !important;
  color: var(--admin-ink) !important;
  box-shadow: none !important;
}
.admin-page .capacity-stats::before { display: none !important; }
.admin-page .capacity-stats > div {
  min-height: 50px !important;
  padding: 10px 0 !important;
  border-bottom: 1px solid var(--admin-line) !important;
  background: transparent !important;
}
.admin-page .capacity-stats > div:last-child { border-bottom: 0 !important; }
.admin-page .capacity-stats > div::before { display: none !important; }
.admin-page .admin-capacity-card #capacityAdvice { grid-area: advice !important; margin: 0 !important; }

.admin-page .admin-generate-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 20px !important;
  align-items: start !important;
}
.admin-page .admin-generate-grid > .admin-card { min-width: 0; }
.admin-page .admin-generate-grid > .admin-card:last-child {
  align-self: start !important;
  min-height: 0 !important;
}
.admin-page .admin-inline-panel,
.admin-page .connected-models-panel {
  border: 1px solid var(--admin-line) !important;
  border-radius: 18px !important;
  background: var(--admin-surface-2) !important;
}

.admin-page .connected-model-row {
  grid-template-columns: 44px minmax(180px, 1fr) minmax(180px, .8fr) 88px auto 82px !important;
  border: 1px solid var(--admin-line) !important;
  border-radius: 16px !important;
  background: var(--admin-surface-2) !important;
  color: var(--admin-ink) !important;
}
.admin-page .connected-model-main strong { color: var(--admin-ink) !important; }
.admin-page .connected-model-main small,
.admin-page .connected-save-state { color: var(--admin-muted) !important; }
.admin-page .connected-toggle span { background: color-mix(in srgb, var(--admin-line) 45%, transparent) !important; border-color: var(--admin-line) !important; }
.admin-page .connected-toggle input:checked + span { background: rgba(40, 121, 232, .16) !important; border-color: rgba(40, 121, 232, .42) !important; }

.admin-page .admin-models-card > .form-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 24px !important;
}
.admin-page .admin-models-card > .form-grid > div[style*="border-left"] {
  border-left-color: var(--admin-line) !important;
}
.admin-page .alias-editor-row,
.admin-page .model-option,
.admin-page .pack-list-item,
.admin-page .pack-selected-row {
  border: 1px solid var(--admin-line) !important;
  border-radius: 14px !important;
  background: var(--admin-surface-2) !important;
  color: var(--admin-ink) !important;
  box-shadow: none !important;
}

html[data-theme="light"] .admin-page #generatedKeys {
  background: #f7faff !important;
  color: #18345d !important;
  border-color: var(--admin-line) !important;
}
html[data-theme="dark"] .admin-page #generatedKeys {
  background: #0b1d3a !important;
  color: #dceaff !important;
}

@media (max-width: 1080px) {
  .admin-page .admin-capacity-card,
  .admin-page .admin-generate-grid,
  .admin-page .admin-models-card > .form-grid { grid-template-columns: 1fr !important; }
  .admin-page .admin-capacity-card {
    grid-template-areas: "title" "totals" "meter" "stats" "advice" !important;
  }
  .admin-page .connected-model-row { grid-template-columns: 44px minmax(0, 1fr) minmax(160px, .8fr) 82px !important; }
}
@media (max-width: 760px) {
  .admin-page #dashboardPanel > .ck-metric-strip { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .admin-page .admin-capacity-card > .capacity-hero { grid-template-columns: 1fr !important; }
  .admin-page .connected-model-row { grid-template-columns: 1fr !important; }
}
@media (max-width: 460px) {
  .admin-page #dashboardPanel > .ck-metric-strip { grid-template-columns: 1fr !important; }
}

/* Admin dark theme: restore contrast for every editing surface and action. */
html[data-theme="dark"] .admin-page {
  --admin-bg: #08172d;
  --admin-surface: #102744;
  --admin-surface-2: #142f52;
  --admin-ink: #f2f7ff;
  --admin-muted: #c0d1e8;
  --admin-dim: #92acd0;
  --admin-line: rgba(170, 204, 246, .28);
  --admin-accent: #6faeff;
}
html[data-theme="dark"] .admin-page .admin-card,
html[data-theme="dark"] .admin-page .ck-panel,
html[data-theme="dark"] .admin-page .admin-capacity-card,
html[data-theme="dark"] .admin-page .admin-models-card,
html[data-theme="dark"] .admin-page .key-card,
html[data-theme="dark"] .admin-page .keys-grid > *,
html[data-theme="dark"] .admin-page .admin-model-row,
html[data-theme="dark"] .admin-page .model-row {
  background: var(--admin-surface) !important;
  color: var(--admin-ink) !important;
  border-color: var(--admin-line) !important;
}
html[data-theme="dark"] .admin-page .admin-input,
html[data-theme="dark"] .admin-page input.admin-input,
html[data-theme="dark"] .admin-page select.admin-input,
html[data-theme="dark"] .admin-page textarea.admin-input,
html[data-theme="dark"] .admin-page .admin-inline-panel,
html[data-theme="dark"] .admin-page .connected-models-panel,
html[data-theme="dark"] .admin-page .alias-editor-row,
html[data-theme="dark"] .admin-page .model-option,
html[data-theme="dark"] .admin-page .pack-list-item,
html[data-theme="dark"] .admin-page .pack-selected-row,
html[data-theme="dark"] .admin-page .capacity-hero > div,
html[data-theme="dark"] .admin-page .capacity-stats {
  background: var(--admin-surface-2) !important;
  color: var(--admin-ink) !important;
  border-color: var(--admin-line) !important;
}
html[data-theme="dark"] .admin-page .admin-card *,
html[data-theme="dark"] .admin-page .key-card *,
html[data-theme="dark"] .admin-page .model-option * { border-color: inherit; }
html[data-theme="dark"] .admin-page .admin-card h2,
html[data-theme="dark"] .admin-page .admin-card h3,
html[data-theme="dark"] .admin-page .admin-card strong,
html[data-theme="dark"] .admin-page .key-card strong,
html[data-theme="dark"] .admin-page label { color: var(--admin-ink) !important; }
html[data-theme="dark"] .admin-page .admin-card p,
html[data-theme="dark"] .admin-page .admin-card small,
html[data-theme="dark"] .admin-page .admin-card span,
html[data-theme="dark"] .admin-page .key-card p,
html[data-theme="dark"] .admin-page .key-card small { color: var(--admin-muted) !important; }
html[data-theme="dark"] .admin-page .btn-secondary,
html[data-theme="dark"] .admin-page .icon-button,
html[data-theme="dark"] .admin-page .key-action,
html[data-theme="dark"] .admin-page .key-model-summary {
  background: #e8eef7 !important;
  color: #19345a !important;
  border-color: #e8eef7 !important;
}
html[data-theme="dark"] .admin-page .btn-secondary *,
html[data-theme="dark"] .admin-page .icon-button *,
html[data-theme="dark"] .admin-page .key-action *,
html[data-theme="dark"] .admin-page .key-model-summary * { color: inherit !important; }
html[data-theme="dark"] .admin-page .btn-primary { background: #5798ee !important; color: #fff !important; }
html[data-theme="dark"] .admin-page .key-action.danger { background: #fee9ea !important; color: #c62f3e !important; border-color: #fee9ea !important; }