/* Shared design tokens + base controls. System fonts only (CSP: no external resources). */
:root{
  color-scheme:light dark;
  --bg:#fbfaf8;--surface:#fff;--side:#f4f2ee;--text:#1c1b19;--muted:#5d5952;--line:#e0ddd6;--line-strong:#8a857c;
  --accent:#2b5fc7;--accent-hover:#234fa6;--accent-ink:#fff;--accent-soft:#e6edfb;--sel:#e2e9f8;
  --danger:#b3261e;--ok:#17743a;--warn-dot:#b86e00;--warn-bg:#fff6e0;--warn-line:#d9b45a;--shadow:0 12px 40px rgba(20,20,15,.18);--scrim:rgba(20,20,15,.45);
  --font:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --font-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  /* type scale */--fs-xs:12px;--fs-sm:13px;--fs-md:15px;--fs-lg:18px;--fs-xl:22px;
  /* spacing */--s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;
  /* radius */--r-sm:6px;--r-md:10px;
  --tap:36px;
}
@media (prefers-color-scheme:dark){:root{
  --bg:#161615;--surface:#1c1c1a;--side:#1f1f1d;--text:#ebe9e4;--muted:#a8a49b;--line:#33322e;--line-strong:#76726a;
  --accent:#8db2ff;--accent-hover:#b0c9ff;--accent-ink:#0d1b36;--accent-soft:#222c44;--sel:#27314a;
  --danger:#ff9a90;--ok:#6fd694;--warn-dot:#f0b04a;--warn-bg:#2b2616;--warn-line:#6b5a22;--shadow:0 12px 40px rgba(0,0,0,.6);--scrim:rgba(0,0,0,.6);
}}
@media (pointer:coarse),(max-width:700px){:root{--tap:44px}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font:var(--fs-md)/1.45 var(--font);color:var(--text);background:var(--bg)}
[hidden]{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:fixed;left:var(--s2);top:-60px;z-index:100;padding:var(--s2) var(--s4);background:var(--accent);color:var(--accent-ink);border-radius:var(--r-sm);text-decoration:none;font-weight:600}
.skip:focus{top:var(--s2)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
button,a.btn{font:inherit;font-size:var(--fs-sm);min-height:var(--tap);padding:0 var(--s3);border:1px solid var(--line-strong);border-radius:var(--r-sm);background:var(--surface);color:var(--text);cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);transition:background-color .15s,border-color .15s}
button:hover,a.btn:hover{background:var(--sel)}
button:active,a.btn:active{background:var(--accent-soft)}
button.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);font-weight:600}
button.primary:hover{background:var(--accent-hover);border-color:var(--accent-hover)}
button.danger{color:var(--danger);border-color:var(--danger)}
button.danger:hover{background:color-mix(in srgb,var(--danger) 12%,var(--surface))}
button:disabled{opacity:.55;cursor:default}
input[type=text],input[type=email],input[type=password],input[type=search],input:not([type]){font:inherit;font-size:var(--fs-md);min-height:var(--tap);padding:0 var(--s3);border:1px solid var(--line-strong);border-radius:var(--r-sm);background:var(--surface);color:var(--text)}
input::placeholder{color:var(--muted);opacity:1}
input[type=checkbox]{width:18px;height:18px;accent-color:var(--accent);flex:none}
label{display:block;font-size:var(--fs-sm);font-weight:500;margin:var(--s3) 0}
label.inline{display:flex;align-items:center;gap:var(--s2);min-height:var(--tap);font-weight:400}
label input:not([type=checkbox]){display:block;width:100%;margin-top:var(--s1);font-weight:400}
dialog{border:1px solid var(--line);border-radius:var(--r-md);padding:var(--s5);min-width:min(340px,calc(100vw - 32px));max-width:calc(100vw - 32px);background:var(--surface);color:var(--text);box-shadow:var(--shadow)}
dialog::backdrop{background:var(--scrim)}
dialog h3{margin:0 0 var(--s2);font-size:var(--fs-lg);line-height:1.3}
dialog p{margin:var(--s2) 0 var(--s3);color:var(--muted)}
.row{display:flex;gap:var(--s2);flex-wrap:wrap;margin-top:var(--s4)}
#loginerr{color:var(--danger);min-height:1.4em;font-size:var(--fs-sm)}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important;scroll-behavior:auto!important}}
img.brand{display:block;height:auto;max-width:100%}
dialog img.brand{margin:0 0 var(--s2)}