/* Polar light + Aurora dark. These tokens cover public, account, API and admin surfaces. */
:root {
  color-scheme: light;
  --bg:#f2f5f9; --surface:#ffffff; --raised:#eaf0f8;
  --ink:#182c45; --muted:#53667d; --line:#d6dfeb;
  --blue:#215cc6; --on-accent:#ffffff; --accent-hover:#174b9d; --accent-soft:#e4edfd;
  --green:#176340; --soft:#e6f3ec; --success-line:#b8dcc8;
  --amber:#845310; --warning-soft:#fff1d8;
  --danger:#a72f36; --danger-soft:#fff0f0; --danger-line:#e8bec1;
  --violet:#6853a0; --violet-soft:#f0ecfc; --violet-line:#dcd3f0;
  --teal:#226b73; --teal-soft:#e5f3f3; --teal-line:#c4e2e3;
  --nav:var(--surface); --nav2:var(--raised); --header-ink:var(--ink); --header-muted:var(--muted);
  --input-line:#a7b8cd; --hover:#edf3fc; --hover-line:#a7c0e3;
  --code-bg:#182c45; --code-ink:#edf3ff; --backdrop:#0d1c3966;
  --radius:12px; --radius-small:7px; --shadow:0 12px 36px #23385a08;
  --font-body:Inter,"Segoe UI",system-ui,sans-serif; --font-heading:Inter,"Segoe UI",system-ui,sans-serif;
}
@media (prefers-color-scheme:dark) {
  :root:not([data-theme="polar"]) {
    color-scheme:dark;
    --bg:#101629; --surface:#19223b; --raised:#242f4c;
    --ink:#f1f4ff; --muted:#b0bbd3; --line:#384865;
    --blue:#8de3db; --on-accent:#102b35; --accent-hover:#b0f2eb; --accent-soft:#223c48;
    --green:#9ae2b6; --soft:#203c37; --success-line:#3d6857;
    --amber:#efcf98; --warning-soft:#3a3026;
    --danger:#ffaaa6; --danger-soft:#3e2638; --danger-line:#76414e;
    --violet:#c3b1f9; --violet-soft:#302b50; --violet-line:#574875;
    --teal:#8de3db; --teal-soft:#223c48; --teal-line:#3c6672;
    --input-line:#536785; --hover:#263752; --hover-line:#6ca9b0;
    --code-bg:#0b1121; --code-ink:#e8efff; --backdrop:#040916b3;
    --radius:20px; --radius-small:10px; --shadow:0 14px 40px #040b1826;
    --font-heading:"Trebuchet MS","Segoe UI",system-ui,sans-serif;
  }
}
:root[data-theme="aurora"] {
  color-scheme:dark;
  --bg:#101629; --surface:#19223b; --raised:#242f4c;
  --ink:#f1f4ff; --muted:#b0bbd3; --line:#384865;
  --blue:#8de3db; --on-accent:#102b35; --accent-hover:#b0f2eb; --accent-soft:#223c48;
  --green:#9ae2b6; --soft:#203c37; --success-line:#3d6857;
  --amber:#efcf98; --warning-soft:#3a3026;
  --danger:#ffaaa6; --danger-soft:#3e2638; --danger-line:#76414e;
  --violet:#c3b1f9; --violet-soft:#302b50; --violet-line:#574875;
  --teal:#8de3db; --teal-soft:#223c48; --teal-line:#3c6672;
  --input-line:#536785; --hover:#263752; --hover-line:#6ca9b0;
  --code-bg:#0b1121; --code-ink:#e8efff; --backdrop:#040916b3;
  --radius:20px; --radius-small:10px; --shadow:0 14px 40px #040b1826;
  --font-heading:"Trebuchet MS","Segoe UI",system-ui,sans-serif;
}
html {background:var(--bg);color:var(--ink)}
body {font-family:var(--font-body);background:var(--bg);color:var(--ink)}
h1,h2,h3 {font-family:var(--font-heading)}
.landing-main #model-picker>h1,.landing-main #model-picker>.page-head h1 {font-size:clamp(32px,4vw,52px);letter-spacing:-1.8px;max-width:900px}
header {background:var(--surface);color:var(--ink);border-bottom:1px solid var(--line)}
.brand {color:var(--ink)}
.brand-light {color:var(--muted)}
.header-link {color:var(--blue);font-weight:600}
.brand-icon {background:var(--blue);color:var(--on-accent);border-radius:var(--radius-small)}
.topbar {flex-wrap:wrap;padding-top:16px;padding-bottom:16px;gap:16px}
.topbar-actions {display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.appearance-control {display:flex;align-items:center;gap:8px;margin:0;font-size:11px;font-weight:600;color:var(--muted);flex-shrink:0}
.appearance-control select {width:auto;max-width:160px;margin:0;padding:8px 26px 8px 10px;background:var(--raised);color:var(--ink);border:1px solid var(--line);border-radius:var(--radius-small);font-size:12px}
.preview-pill {color:var(--muted);border-color:var(--line)}
header nav a {color:var(--muted);border-radius:var(--radius-small) var(--radius-small) 0 0}
header nav a:hover,header nav a[aria-current=page] {color:var(--blue);background:var(--accent-soft)}
header nav a[aria-current=page] {border-bottom-color:var(--blue)}
.panel,.hardware,.compare-bar,dialog,.ticker,.computer-bar {border-radius:var(--radius);box-shadow:var(--shadow)}
.panel,.hardware,dialog,.ticker,.computer-bar {background:var(--surface)}
button,.button,input:not([type=checkbox]),select,textarea,.computer-card,.key-once,.result-filters,.ticker-card,.computer-bar-card {border-radius:var(--radius-small)}
textarea {color:var(--ink);background:var(--surface);border:1px solid var(--input-line);font:inherit;padding:10px}
input::placeholder,textarea::placeholder {color:var(--muted);opacity:1}
.landing-header .button {color:var(--ink);background:var(--raised);border-color:var(--line)}
.landing-header .button:hover {background:var(--accent-soft);border-color:var(--blue)}
.hardware {border:1px solid var(--line);color:var(--ink)}
.hardware p,.hardware label {color:var(--muted)}
.hardware select {background:var(--raised);color:var(--ink);border-color:var(--input-line)}
.primary,.primary:hover,.compare-bar .primary {color:var(--on-accent)}
.primary:hover {background:var(--accent-hover)}
.compare-bar {background:var(--raised);color:var(--ink);border:1px solid var(--line)}
.compare-bar small {color:var(--muted)}
.badge {max-width:100%;white-space:normal}
dialog {background:var(--surface)}
dialog::backdrop {background:var(--backdrop)}
.account-dialog {width:min(460px,94vw)}
.account-form label {display:block;margin:14px 0;font-weight:600}
.account-form input {display:block;width:100%;margin-top:6px;padding:10px;border:1px solid var(--input-line)}
.account-status {min-height:1.5em;color:var(--green)}
.account-links {display:flex;gap:16px;flex-wrap:wrap;margin-top:18px}
.link-button {background:none;border:0;padding:0;color:var(--blue);cursor:pointer;font:inherit;text-decoration:underline}
.code {border-radius:var(--radius-small)}
.table-scroll {border-radius:var(--radius-small)}
progress {accent-color:var(--blue)}
:focus-visible {outline:3px solid var(--blue);outline-offset:3px}
.skip {background:var(--surface);color:var(--blue)}
pre {white-space:pre-wrap;overflow-wrap:anywhere}
.page-head>* {min-width:0}
.picker-layout>*,.two-col>*,.form-grid>*,.cards>*,.filters>* {min-width:0}
.device-pick {flex-wrap:wrap;max-width:100%;min-width:0}
.device-pick .combo {min-width:0;width:min(340px,100%)}
.legal td,.legal th {overflow-wrap:anywhere}
.legal .table-scroll table {min-width:600px}
.brand,.topbar-actions {min-width:0}
.product-links {display:flex;gap:10px;flex-wrap:wrap;margin-bottom:24px}
.available-features ul {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));list-style:none;padding:0;gap:24px;margin:22px 0 0}
.available-features li strong {display:block;margin-bottom:6px}
.available-features li p {font-size:12px;color:var(--muted)}
.admin-page .admin-shell {display:grid;grid-template-columns:236px minmax(0,1fr);gap:28px;max-width:1520px;margin:auto;padding:26px 28px;align-items:start}
.admin-page main {min-width:0;margin:0;padding:0;max-width:none}
.admin-page main h1 {margin:0 0 18px}
.admin-page main h2 {font-size:15px;margin:26px 0 10px}
.admin-page .admin-side {position:sticky;top:16px;max-height:calc(100vh - 32px);overflow:auto;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:14px 10px}
.admin-page nav {display:block;overflow:visible;margin:0}
.admin-page .admin-group+.admin-group {margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
.admin-page .admin-group h2 {font-size:10px;letter-spacing:1.2px;text-transform:uppercase;color:var(--muted);margin:0 0 6px;padding:0 10px}
.admin-page nav a {display:block;color:var(--ink);background:none;border:0;border-left:3px solid transparent;border-radius:var(--radius-small);padding:7px 10px;margin:0;font-size:13px;font-weight:600;white-space:nowrap}
.admin-page nav a:hover {color:var(--blue);background:var(--accent-soft);text-decoration:none}
.admin-page nav a[aria-current=page] {color:var(--blue);background:var(--accent-soft);border-left-color:var(--blue)}
.admin-page header .button {color:var(--ink);background:var(--raised);border-color:var(--line)}
.admin-stats {display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.admin-stat {display:flex;flex-direction:column;gap:2px;padding:12px 14px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-small);color:var(--ink)}
.admin-stat:hover {border-color:var(--blue);text-decoration:none}
.admin-stat strong {font-size:22px;line-height:1.15;font-variant-numeric:tabular-nums}
.admin-stat span {font-size:12px;color:var(--muted)}
.admin-page .panel:has(>table) {padding:0;max-height:72vh;overflow:auto}
.admin-page th {position:sticky;top:0;z-index:1;white-space:nowrap}
/* The key column stays in view while the table scrolls sideways. */
.admin-page .pin {position:sticky;left:0;z-index:1;background:var(--surface);box-shadow:inset -1px 0 0 var(--line);font-weight:600}
.admin-page th.pin {z-index:2;background:var(--raised)}
.admin-page tbody tr:hover td.pin {background:var(--raised)}
/* A column is as wide as its longest value, on one line, up to 128 characters (the pinned key: 40, so it never covers
   the table). A longer value ends in "..." and opens in full under the pointer. Cells with controls keep wrapping. */
.admin-page td {max-width:128ch;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.admin-page td.pin {max-width:40ch}
.admin-page td:hover,.admin-page td:has(form,details,button,input,select,textarea) {white-space:normal;overflow-wrap:anywhere;overflow:visible}
.admin-columns {flex-basis:100%;font-size:12px}
.admin-columns summary {font-weight:600}
.admin-columns .check {display:inline-flex;gap:5px;margin:4px 14px 4px 0;font-weight:400}
.admin-page th a {color:inherit}
.admin-filter {display:flex;flex-wrap:wrap;gap:10px 14px;align-items:end;margin:0 0 6px}
.admin-page .admin-filter label {margin:0;font-size:12px;font-weight:600}
.admin-page .admin-filter input {width:260px}
.admin-pager {display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;margin:10px 0;font-size:13px}
.admin-pager .button {padding:6px 12px}
.admin-page td,.admin-page th {padding:9px 12px}
.admin-page td {font-size:12.5px;vertical-align:top;border-bottom:1px solid var(--line)}
.admin-page tbody tr:last-child td {border-bottom:0}
.admin-page tbody tr:hover td {background:var(--accent-soft)}
.admin-page td.empty {color:var(--muted)}
.admin-page form.panel {display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:2px 18px;align-items:end}
.admin-page form.panel>:not(label),.admin-page form.panel>label:has(textarea) {grid-column:1/-1}
.admin-page form.panel>button {justify-self:start;margin-top:8px}
.admin-page form.panel label>input:not([type=checkbox]),.admin-page form.panel label>select,.admin-page form.panel label>textarea {width:100%}
@media (max-width:900px) {
  .admin-page .admin-shell {grid-template-columns:1fr;gap:18px;padding:18px 16px}
  .admin-page .admin-side {position:static;max-height:none}
  .admin-page .admin-group {display:flex;flex-wrap:wrap;gap:4px}
  .admin-page .admin-group h2 {flex-basis:100%}
  .admin-page nav a {border-left:0}
}
.admin-page .panel {margin:18px 0;overflow:auto}
.admin-page label {display:block;margin:12px 0}
.admin-page label>input:not([type=checkbox]),.admin-page label>textarea,.admin-page label>select {display:block;margin-top:6px}
.admin-page input,.admin-page textarea {width:min(90%,750px)}
.admin-page textarea {height:260px}
.admin-page input,.admin-page select,.admin-page textarea {max-width:100%}
.admin-page td details {white-space:normal;max-width:70ch;overflow-wrap:anywhere}
.admin-page summary {cursor:pointer}
.admin-page form {min-width:0}
.admin-page .appearance-control {display:flex;margin:0}
.admin-page .appearance-control select {width:auto;margin:0}
.admin-page button {background:var(--blue);border-color:var(--blue);color:var(--on-accent)}
.admin-page button:hover {background:var(--accent-hover)}
.admin-page .brand {font-size:20px}
.admin-page .inline-actions {gap:10px}
.admin-page td form {max-width:100%}
@media(max-width:680px) {
  .picker-layout,.two-col,.cards,.form-grid {grid-template-columns:minmax(0,1fr)}
  .filters {grid-template-columns:repeat(2,minmax(0,1fr))}
  .topbar {gap:12px}
  .topbar-actions {gap:8px}
  .appearance-control span {position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
  .appearance-control select {max-width:145px;font-size:11px}
  .available-features ul {grid-template-columns:1fr;gap:14px}
  .admin-page nav a {padding:7px 10px}
}
@media(prefers-reduced-motion:reduce) {*,*::before,*::after {scroll-behavior:auto!important}}
@media print {
  :root,:root[data-theme] {--bg:#fff;--surface:#fff;--raised:#eee;--ink:#182c45;--muted:#53667d;--line:#bbb;--blue:#215cc6;--on-accent:#fff;--green:#176340;--amber:#845310;color-scheme:light!important}
  .appearance-control {display:none}
  .panel {box-shadow:none}
}