Restyle the dashboard and login page with one shared design-token system

Spacing scale, 6/10px radii, flat bordered cards, pill badges, accent-tinted navigation,
segmented tabs and a single control height, in light and dark. Class names are unchanged.

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>

web/index.html

@@ -5,84 +5,131 @@
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>Hammerhead</title>
 <style>
-  :root { --bg:#0a0a0a; --side:#0f0f10; --panel:#141415; --line:#262628; --text:#fafafa; --dim:#a1a1aa; --muted:#1c1c1e; --accent:#06b6d4; --accent-fg:#fff; --ok:#22c55e; --bad:#ef4444; --warn:#eab308; --shade:rgba(0,0,0,.65); --radius:10px; }
+  /* Design tokens: the only place raw colors, spacing and sizes are defined (same system as Lightwell). */
-  @media (prefers-color-scheme: light) { :root { --bg:#fafafa; --side:#fff; --panel:#fff; --line:#e4e4e7; --text:#18181b; --dim:#71717a; --muted:#f4f4f5; --accent:#0891b2; --shade:rgba(24,24,27,.5); } }
+  :root {
+    --accent:#0891b2; --accent-contrast:#fff;
+    --bg:#f7f8f9; --surface:#fff; --surface-2:#f0f2f4; --border:#e2e5e9; --border-strong:#c6ccd3;
+    --text:#16191d; --text-muted:#566069; --text-faint:#75808b;
+    --accent-text:color-mix(in srgb, var(--accent) 85%, #000);
+    --accent-soft:color-mix(in srgb, var(--accent) 10%, var(--surface));
+    --accent-hover:color-mix(in srgb, var(--accent) 86%, #000);
+    --focus:color-mix(in srgb, var(--accent) 65%, #fff);
+    --success:#1c6b3a; --success-bg:#e3f1e8; --warning:#85560a; --warning-bg:#f9eed6; --danger:#a3271e; --danger-bg:#f9e6e3;
+    --overlay:rgb(15 18 22 / .5); --shadow:0 8px 24px rgb(15 18 22 / .14);
+    --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px;
+    --radius:6px; --radius-lg:10px;
+    --font:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
+    --font-mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
+    --text-xs:12px; --text-sm:13px; --text-base:14px; --text-lg:16px; --text-xl:20px; --text-2xl:26px;
+    --control-h:36px; --sidebar-w:248px; --content-max:1180px; --ease:140ms ease;
+    color-scheme:light;
+  }
+  @media (prefers-color-scheme: dark) { :root {
+    --accent:#22b8d4; --accent-contrast:#04222a;
+    --bg:#0c0d0f; --surface:#141517; --surface-2:#1d1f22; --border:#2a2d31; --border-strong:#41454b;
+    --text:#eceef0; --text-muted:#aab1b9; --text-faint:#8a929b;
+    --accent-text:color-mix(in srgb, var(--accent) 80%, #fff); --accent-soft:color-mix(in srgb, var(--accent) 18%, var(--surface)); --accent-hover:color-mix(in srgb, var(--accent) 85%, #fff);
+    --success:#86d3a0; --success-bg:#16301f; --warning:#e8bd6b; --warning-bg:#33280f; --danger:#f19a92; --danger-bg:#3a1b18;
+    --overlay:rgb(0 0 0 / .65); --shadow:0 8px 24px rgb(0 0 0 / .5); color-scheme:dark;
+  } }
   * { box-sizing:border-box; }
   html, body { height:100%; }
-  body { margin:0; background:var(--bg); color:var(--text); font:14px/1.5 Inter,system-ui,-apple-system,Segoe UI,sans-serif; -webkit-font-smoothing:antialiased; }
+  body { margin:0; background:var(--bg); color:var(--text); font:var(--text-base)/1.5 var(--font); -webkit-font-smoothing:antialiased; }
-  a { color:var(--accent); }
+  a { color:var(--accent-text); text-underline-offset:2px; }
+  :focus-visible { outline:2px solid var(--focus); outline-offset:2px; border-radius:var(--radius); }
+  h1, h2 { line-height:1.25; letter-spacing:-.01em; }
+
+  /* shell */
   .app { display:flex; min-height:100vh; }
-  .side { width:248px; flex:none; background:var(--side); border-right:1px solid var(--line); display:flex; flex-direction:column; position:sticky; top:0; height:100vh; padding:14px 12px; gap:4px; overflow-y:auto; }
+  .side { width:var(--sidebar-w); flex:none; background:var(--surface); border-right:1px solid var(--border); display:flex; flex-direction:column; position:sticky; top:0; height:100vh; padding:var(--s5) var(--s3); gap:2px; overflow-y:auto; }
-  .brand { display:flex; align-items:center; gap:10px; font-weight:700; font-size:16px; padding:4px 8px 12px; }
+  .brand { display:flex; align-items:center; gap:var(--s2); font-weight:700; font-size:var(--text-lg); letter-spacing:-.02em; padding:0 var(--s3) var(--s4); }
   .brand svg { color:var(--accent); }
-  .orgsel { margin:0 0 10px; }
+  .orgsel { margin:0 0 var(--s2); }
-  .orgsel select { background:var(--muted); font-weight:600; }
+  .navsec { font-size:var(--text-xs); font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--text-faint); padding:var(--s4) var(--s3) var(--s1); }
-  .navsec { font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--dim); padding:14px 10px 4px; }
+  .navitem { display:flex; align-items:center; gap:var(--s3); width:100%; background:none; border:0; color:var(--text-muted); padding:var(--s2) var(--s3); min-height:34px; border-radius:var(--radius); cursor:pointer; font:inherit; font-weight:500; text-align:left; transition:background var(--ease), color var(--ease); }
-  .navitem { display:flex; align-items:center; gap:10px; width:100%; background:none; border:0; color:var(--dim); padding:8px 10px; border-radius:8px; cursor:pointer; font:inherit; font-weight:500; text-align:left; }
+  .navitem:hover { background:var(--surface-2); color:var(--text); }
-  .navitem:hover { background:var(--muted); color:var(--text); }
+  .navitem.on { background:var(--accent-soft); color:var(--accent-text); }
-  .navitem.on { background:color-mix(in srgb, var(--accent) 14%, transparent); color:var(--accent); }
   .navitem svg { flex:none; }
   .grow { flex:1; }
-  .userbox { border-top:1px solid var(--line); padding-top:10px; margin-top:8px; }
+  .userbox { border-top:1px solid var(--border); padding-top:var(--s3); margin-top:var(--s2); }
-  .userbox .who { padding:4px 10px 8px; font-size:12px; color:var(--dim); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
+  .userbox .who { padding:var(--s1) var(--s3) var(--s2); font-size:var(--text-xs); color:var(--text-muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
   .content { flex:1; min-width:0; }
-  main { max-width:1180px; margin:0 auto; padding:28px 32px 80px; }
+  main { max-width:var(--content-max); margin:0 auto; padding:var(--s6) var(--s5) var(--s8); }
-  .page-h { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:22px; flex-wrap:wrap; }
+  .page-h { display:flex; align-items:flex-start; justify-content:space-between; gap:var(--s4); margin-bottom:var(--s5); flex-wrap:wrap; }
-  .page-h h1 { font-size:24px; font-weight:700; margin:0; letter-spacing:-.01em; }
+  .page-h h1 { font-size:var(--text-2xl); font-weight:600; margin:0; }
-  .page-h p { margin:4px 0 0; color:var(--dim); }
+  .page-h p { margin:var(--s1) 0 0; color:var(--text-muted); }
-  .card { background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:18px; margin-bottom:18px; box-shadow:0 1px 2px rgba(0,0,0,.18); }
+
+  /* cards, layout */
+  .card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:var(--s5); margin-bottom:var(--s4); }
   .card.flush { padding:0; overflow:hidden; }
-  .card > h2 { font-size:15px; font-weight:600; margin:0 0 12px; }
+  .card > h2 { font-size:var(--text-lg); font-weight:600; margin:0 0 var(--s3); }
-  .row-h { display:flex; align-items:center; justify-content:flex-end; gap:10px; margin-bottom:12px; flex-wrap:wrap; }
+  .row-h { display:flex; align-items:center; justify-content:flex-end; gap:var(--s3); margin-bottom:var(--s3); flex-wrap:wrap; }
   .row-h h2 { display:none; }
-  .grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:12px; align-items:end; }
+  .grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:var(--s4); align-items:end; }
-  .stack { display:flex; flex-direction:column; gap:12px; }
+  .stack { display:flex; flex-direction:column; gap:var(--s3); }
-  label { display:flex; flex-direction:column; gap:5px; font-size:12.5px; font-weight:500; color:var(--dim); }
+
-  label.chk { flex-direction:row; align-items:center; gap:8px; color:var(--text); font-size:14px; font-weight:400; }
+  /* forms */
-  input, select, textarea { background:var(--bg); color:var(--text); border:1px solid var(--line); border-radius:8px; padding:8px 10px; font:inherit; min-width:0; width:100%; }
+  label { display:flex; flex-direction:column; gap:var(--s1); font-size:var(--text-sm); font-weight:600; color:var(--text); }
-  input[type=checkbox] { width:16px; height:16px; accent-color:var(--accent); }
+  label.chk { flex-direction:row; align-items:center; gap:var(--s2); font-size:var(--text-base); font-weight:400; }
-  input:focus, select:focus, textarea:focus { outline:2px solid color-mix(in srgb, var(--accent) 55%, transparent); outline-offset:0; border-color:var(--accent); }
+  input, select, textarea { background:var(--surface); color:var(--text); border:1px solid var(--border-strong); border-radius:var(--radius); padding:var(--s2) var(--s3); min-height:var(--control-h); font:inherit; font-weight:400; min-width:0; width:100%; }
-  input:disabled { opacity:.6; }
+  textarea { min-height:96px; resize:vertical; }
-  button.btn { background:var(--accent); color:var(--accent-fg); border:0; border-radius:8px; padding:8px 16px; cursor:pointer; font:inherit; font-weight:600; }
+  input[type=checkbox] { width:16px; height:16px; min-height:0; padding:0; accent-color:var(--accent); }
-  button.btn:hover { filter:brightness(1.08); }
+  input:focus, select:focus, textarea:focus { outline:2px solid var(--focus); outline-offset:0; border-color:var(--accent); }
-  button.ghost { background:var(--panel); border:1px solid var(--line); color:var(--text); border-radius:8px; padding:5px 11px; cursor:pointer; font:inherit; font-weight:500; }
+  input:disabled, select:disabled { opacity:.6; }
-  button.ghost:hover { background:var(--muted); }
+  .sub { color:var(--text-muted); font-size:var(--text-sm); font-weight:400; }
-  button.danger:hover { border-color:var(--bad); color:var(--bad); background:transparent; }
+
+  /* buttons: one height, one shape; ghost is the quiet variant */
+  button.btn, button.ghost { display:inline-flex; align-items:center; justify-content:center; gap:var(--s2); min-height:var(--control-h); padding:0 var(--s4); border-radius:var(--radius); font:inherit; font-weight:500; cursor:pointer; white-space:nowrap; transition:background var(--ease), border-color var(--ease); }
+  button.btn { background:var(--accent); color:var(--accent-contrast); border:1px solid var(--accent); }
+  button.btn:hover { background:var(--accent-hover); border-color:var(--accent-hover); }
+  button.ghost { background:var(--surface); border:1px solid var(--border-strong); color:var(--text); }
+  button.ghost:hover { background:var(--surface-2); }
+  button.danger:hover { border-color:var(--danger); color:var(--danger); background:var(--danger-bg); }
+  td button.ghost, .actions button.ghost, .tgt button.ghost { min-height:30px; padding:0 var(--s3); font-size:var(--text-sm); }
+  button:disabled { opacity:.55; cursor:not-allowed; }
+
+  /* tables */
   table { width:100%; border-collapse:collapse; }
-  th { text-align:left; font-size:12px; color:var(--dim); font-weight:600; padding:10px 14px; border-bottom:1px solid var(--line); white-space:nowrap; background:color-mix(in srgb, var(--muted) 55%, transparent); }
+  th { text-align:left; font-size:var(--text-sm); color:var(--text-muted); font-weight:600; padding:var(--s3) var(--s4); border-bottom:1px solid var(--border); white-space:nowrap; background:var(--surface); }
-  td { padding:12px 14px; border-bottom:1px solid var(--line); vertical-align:top; }
+  td { padding:var(--s3) var(--s4); border-bottom:1px solid var(--border); vertical-align:top; }
-  tbody tr:hover td { background:color-mix(in srgb, var(--muted) 45%, transparent); }
+  tbody tr:hover td { background:var(--surface-2); }
   tr:last-child td { border-bottom:0; }
-  .card > table, .card > .scroll > table { margin:-4px 0; }
+  .card > table, .card > .scroll > table { margin:calc(var(--s1) * -1) 0; }
-  .tag { display:inline-flex; align-items:center; padding:1px 8px; border-radius:6px; font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.03em; background:var(--muted); border:1px solid var(--line); color:var(--dim); }
-  .dot { display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--dim); margin-right:7px; flex:none; }
-  .dot.ok { background:var(--ok); box-shadow:0 0 0 3px color-mix(in srgb, var(--ok) 20%, transparent); } .dot.bad { background:var(--bad); } .dot.warn { background:var(--warn); }
-  code, .mono { font-family:ui-monospace,SFMono-Regular,Consolas,monospace; font-size:12.5px; }
-  pre { background:var(--bg); border:1px solid var(--line); border-radius:8px; padding:12px; overflow:auto; margin:8px 0 0; user-select:all; white-space:pre-wrap; word-break:break-all; }
-  .dim { color:var(--dim); } .err { color:var(--bad); } .small { font-size:12px; }
-  .empty { color:var(--dim); padding:28px 12px; text-align:center; }
   .scroll { overflow-x:auto; }
-  .actions { display:flex; gap:6px; flex-wrap:wrap; }
+  .actions { display:flex; gap:var(--s2); flex-wrap:wrap; }
-  .center { max-width:400px; margin:11vh auto; padding:0 16px; }
+
-  .center .brand { justify-content:center; font-size:20px; padding-bottom:18px; }
+  /* badges and status */
-  .banner { background:color-mix(in srgb, var(--warn) 12%, transparent); border:1px solid color-mix(in srgb, var(--warn) 60%, transparent); border-radius:var(--radius); padding:12px 16px; margin-bottom:18px; }
+  .tag { display:inline-flex; align-items:center; gap:var(--s1); padding:2px var(--s2); border-radius:999px; font-size:var(--text-xs); font-weight:600; background:var(--surface-2); color:var(--text-muted); white-space:nowrap; }
-  .shade { position:fixed; inset:0; background:var(--shade); backdrop-filter:blur(2px); display:flex; align-items:flex-start; justify-content:center; padding:4vh 12px; overflow:auto; z-index:10; }
+  .dot { display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--text-faint); margin-right:var(--s2); flex:none; }
-  .modal { background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:22px; width:100%; max-width:780px; box-shadow:0 20px 60px rgba(0,0,0,.45); }
+  .dot.ok { background:var(--success); box-shadow:0 0 0 3px var(--success-bg); } .dot.bad { background:var(--danger); } .dot.warn { background:var(--warning); }
-  .modal h2 { margin:0 0 16px; font-size:18px; }
+  code, .mono { font-family:var(--font-mono); font-size:var(--text-sm); }
-  fieldset { border:1px solid var(--line); border-radius:10px; padding:14px; margin:0; }
+  pre { background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius); padding:var(--s3); overflow:auto; margin:var(--s2) 0 0; user-select:all; white-space:pre-wrap; word-break:break-all; }
-  legend { font-size:12px; font-weight:600; color:var(--dim); padding:0 6px; }
+  .dim { color:var(--text-muted); } .err { color:var(--danger); } .small { font-size:var(--text-sm); }
-  .tgt { display:grid; grid-template-columns:1.2fr 1.4fr .7fr auto auto; gap:8px; align-items:end; }
+  .empty { color:var(--text-muted); padding:var(--s7) var(--s5); text-align:center; border:1px dashed var(--border-strong); border-radius:var(--radius-lg); margin:var(--s3); }
-  .pillrow { display:flex; flex-wrap:wrap; gap:6px 16px; }
+  .center { max-width:400px; margin:11vh auto; padding:0 var(--s4); }
-  .sub { color:var(--dim); font-size:12px; font-weight:400; }
+  .center .brand { justify-content:center; font-size:var(--text-xl); padding-bottom:var(--s5); }
-  .tabs2 { display:flex; gap:4px; margin-bottom:16px; background:var(--muted); padding:4px; border-radius:10px; width:fit-content; max-width:100%; flex-wrap:wrap; }
+  .banner { background:var(--warning-bg); border:1px solid var(--warning); color:var(--warning); border-radius:var(--radius); padding:var(--s3) var(--s4); margin-bottom:var(--s4); }
-  .tabs2 button { background:none; border:0; color:var(--dim); border-radius:7px; padding:5px 14px; cursor:pointer; font:inherit; font-weight:500; }
+
-  .tabs2 button.on { background:var(--panel); color:var(--text); box-shadow:0 1px 2px rgba(0,0,0,.25); }
+  /* dialogs, tabs, toast */
-  #toast { position:fixed; bottom:20px; right:20px; background:var(--panel); border:1px solid var(--line); padding:11px 16px; border-radius:10px; z-index:30; display:none; max-width:min(420px,90vw); box-shadow:0 10px 30px rgba(0,0,0,.4); }
+  .shade { position:fixed; inset:0; background:var(--overlay); display:flex; align-items:flex-start; justify-content:center; padding:4vh var(--s3); overflow:auto; z-index:10; }
-  #toast.bad { border-color:var(--bad); color:var(--bad); }
+  .modal { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:var(--s5); width:100%; max-width:780px; box-shadow:var(--shadow); }
+  .modal h2 { margin:0 0 var(--s4); font-size:var(--text-lg); }
+  fieldset { border:1px solid var(--border); border-radius:var(--radius-lg); padding:var(--s4); margin:0; }
+  legend { font-size:var(--text-sm); font-weight:600; color:var(--text-muted); padding:0 var(--s2); }
+  .tgt { display:grid; grid-template-columns:1.2fr 1.4fr .7fr auto auto; gap:var(--s2); align-items:end; }
+  .pillrow { display:flex; flex-wrap:wrap; gap:var(--s2) var(--s4); }
+  .tabs2 { display:inline-flex; margin-bottom:var(--s4); border:1px solid var(--border-strong); border-radius:var(--radius); overflow:hidden; max-width:100%; flex-wrap:wrap; background:var(--surface); }
+  .tabs2 button { background:var(--surface); border:0; color:var(--text-muted); padding:0 var(--s3); min-height:var(--control-h); cursor:pointer; font:inherit; font-weight:500; }
+  .tabs2 button + button { border-left:1px solid var(--border-strong); }
+  .tabs2 button:hover { background:var(--surface-2); }
+  .tabs2 button.on { background:var(--accent-soft); color:var(--accent-text); }
+  #toast { position:fixed; bottom:var(--s4); right:var(--s4); background:var(--text); color:var(--bg); padding:var(--s3) var(--s4); border-radius:var(--radius); z-index:30; display:none; max-width:min(420px,90vw); box-shadow:var(--shadow); font-size:var(--text-sm); }
+  #toast.bad { background:var(--danger); color:var(--accent-contrast); }
+  @media (prefers-reduced-motion: reduce) { * { transition:none !important; } }
   @media (max-width:860px) {
-    .app { flex-direction:column; } .side { width:100%; height:auto; position:static; flex-direction:row; flex-wrap:wrap; align-items:center; }
+    .app { flex-direction:column; } .side { width:100%; height:auto; position:static; flex-direction:row; flex-wrap:wrap; align-items:center; border-right:0; border-bottom:1px solid var(--border); }
     .navsec, .userbox .who { display:none; } .userbox { border:0; margin:0; padding:0; display:flex; } .orgsel { margin:0; }
-    main { padding:18px 14px 60px; } .tgt { grid-template-columns:1fr 1fr; }
+    main { padding:var(--s5) var(--s4) var(--s7); } .tgt { grid-template-columns:1fr 1fr; }
   }
 
 </style>

web/resource.html

@@ -5,22 +5,50 @@
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>Sign in</title>
 <style>
-  :root { --bg:#0e1621; --panel:#16212f; --line:#25344a; --text:#e6edf5; --dim:#8da2bb; --accent:#06b6d4; --bad:#ef5350; }
+  /* Design tokens: the only place raw colors, spacing and sizes are defined (same system as Lightwell). */
-  @media (prefers-color-scheme: light) { :root { --bg:#f3f6fa; --panel:#fff; --line:#d5dde8; --text:#18222f; --dim:#5b6c80; --accent:#0891b2; } }
+  :root {
+    --accent:#0891b2; --accent-contrast:#fff;
+    --bg:#f7f8f9; --surface:#fff; --surface-2:#f0f2f4; --border:#e2e5e9; --border-strong:#c6ccd3;
+    --text:#16191d; --text-muted:#566069; --text-faint:#75808b;
+    --accent-text:color-mix(in srgb, var(--accent) 85%, #000);
+    --accent-soft:color-mix(in srgb, var(--accent) 10%, var(--surface));
+    --accent-hover:color-mix(in srgb, var(--accent) 86%, #000);
+    --focus:color-mix(in srgb, var(--accent) 65%, #fff);
+    --success:#1c6b3a; --success-bg:#e3f1e8; --warning:#85560a; --warning-bg:#f9eed6; --danger:#a3271e; --danger-bg:#f9e6e3;
+    --overlay:rgb(15 18 22 / .5); --shadow:0 8px 24px rgb(15 18 22 / .14);
+    --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px;
+    --radius:6px; --radius-lg:10px;
+    --font:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
+    --font-mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
+    --text-xs:12px; --text-sm:13px; --text-base:14px; --text-lg:16px; --text-xl:20px; --text-2xl:26px;
+    --control-h:36px; --sidebar-w:248px; --content-max:1180px; --ease:140ms ease;
+    color-scheme:light;
+  }
+  @media (prefers-color-scheme: dark) { :root {
+    --accent:#22b8d4; --accent-contrast:#04222a;
+    --bg:#0c0d0f; --surface:#141517; --surface-2:#1d1f22; --border:#2a2d31; --border-strong:#41454b;
+    --text:#eceef0; --text-muted:#aab1b9; --text-faint:#8a929b;
+    --accent-text:color-mix(in srgb, var(--accent) 80%, #fff); --accent-soft:color-mix(in srgb, var(--accent) 18%, var(--surface)); --accent-hover:color-mix(in srgb, var(--accent) 85%, #fff);
+    --success:#86d3a0; --success-bg:#16301f; --warning:#e8bd6b; --warning-bg:#33280f; --danger:#f19a92; --danger-bg:#3a1b18;
+    --overlay:rgb(0 0 0 / .65); --shadow:0 8px 24px rgb(0 0 0 / .5); color-scheme:dark;
+  } }
   * { box-sizing:border-box; }
-  body { margin:0; background:var(--bg); color:var(--text); font:15px/1.45 system-ui,sans-serif; display:grid; place-items:center; min-height:100vh; padding:16px; }
+  body { margin:0; background:var(--bg); color:var(--text); font:var(--text-base)/1.5 var(--font); display:grid; place-items:center; min-height:100vh; padding:var(--s4); -webkit-font-smoothing:antialiased; }
-  .card { background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:24px; width:100%; max-width:380px; }
+  .card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:var(--s5); width:100%; max-width:400px; }
-  h1 { font-size:18px; margin:0 0 4px; }
+  h1 { font-size:var(--text-xl); font-weight:600; letter-spacing:-.01em; margin:0 0 var(--s1); }
-  .sub { color:var(--dim); margin:0 0 16px; font-size:13px; }
+  .sub { color:var(--text-muted); margin:0 0 var(--s4); font-size:var(--text-sm); }
-  .sec { border-top:1px solid var(--line); padding-top:14px; margin-top:14px; display:flex; flex-direction:column; gap:8px; }
+  .sec { border-top:1px solid var(--border); padding-top:var(--s4); margin-top:var(--s4); display:flex; flex-direction:column; gap:var(--s2); }
   .sec:first-of-type { border-top:0; padding-top:0; margin-top:0; }
-  h2 { font-size:12px; text-transform:uppercase; letter-spacing:.6px; color:var(--dim); margin:0; }
+  h2 { font-size:var(--text-xs); text-transform:uppercase; letter-spacing:.06em; color:var(--text-faint); margin:0; font-weight:600; }
-  input { background:var(--bg); color:var(--text); border:1px solid var(--line); border-radius:6px; padding:9px 10px; font:inherit; width:100%; }
+  input { background:var(--surface); color:var(--text); border:1px solid var(--border-strong); border-radius:var(--radius); padding:var(--s2) var(--s3); min-height:var(--control-h); font:inherit; width:100%; }
-  input:focus { outline:2px solid var(--accent); outline-offset:-1px; }
+  input:focus { outline:2px solid var(--focus); outline-offset:0; border-color:var(--accent); }
-  button, a.btn { background:var(--accent); color:#fff; border:0; border-radius:6px; padding:9px 12px; font:inherit; font-weight:600; cursor:pointer; text-align:center; text-decoration:none; display:block; }
+  :focus-visible { outline:2px solid var(--focus); outline-offset:2px; border-radius:var(--radius); }
-  button.ghost, a.ghost { background:none; border:1px solid var(--line); color:var(--text); }
+  button, a.btn { display:flex; align-items:center; justify-content:center; min-height:var(--control-h); padding:0 var(--s4); background:var(--accent); color:var(--accent-contrast); border:1px solid var(--accent); border-radius:var(--radius); font:inherit; font-weight:500; cursor:pointer; text-decoration:none; transition:background var(--ease); }
-  #err { color:var(--bad); min-height:18px; font-size:13px; margin-top:10px; }
+  button:hover, a.btn:hover { background:var(--accent-hover); border-color:var(--accent-hover); }
-  .ok { color:var(--dim); font-size:13px; }
+  button.ghost, a.ghost { background:var(--surface); border:1px solid var(--border-strong); color:var(--text); }
+  button.ghost:hover, a.ghost:hover { background:var(--surface-2); border-color:var(--border-strong); }
+  #err { color:var(--danger); min-height:18px; font-size:var(--text-sm); margin-top:var(--s3); }
+  .ok { color:var(--text-muted); font-size:var(--text-sm); }
   [hidden] { display:none !important; }
 </style>
 </head>