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/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; }
-  @media (prefers-color-scheme: light) { :root { --bg:#f3f6fa; --panel:#fff; --line:#d5dde8; --text:#18222f; --dim:#5b6c80; --accent:#0891b2; } }
+  /* Design tokens: the only place raw colors, spacing and sizes are defined (same system as Lightwell). */
+  :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; }
-  .card { background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:24px; width:100%; max-width:380px; }
-  h1 { font-size:18px; margin:0 0 4px; }
-  .sub { color:var(--dim); margin:0 0 16px; font-size:13px; }
-  .sec { border-top:1px solid var(--line); padding-top:14px; margin-top:14px; display:flex; flex-direction:column; gap:8px; }
+  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(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:var(--s5); width:100%; max-width:400px; }
+  h1 { font-size:var(--text-xl); font-weight:600; letter-spacing:-.01em; margin:0 0 var(--s1); }
+  .sub { color:var(--text-muted); margin:0 0 var(--s4); font-size:var(--text-sm); }
+  .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; }
-  input { background:var(--bg); color:var(--text); border:1px solid var(--line); border-radius:6px; padding:9px 10px; font:inherit; width:100%; }
-  input:focus { outline:2px solid var(--accent); outline-offset:-1px; }
-  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; }
-  button.ghost, a.ghost { background:none; border:1px solid var(--line); color:var(--text); }
-  #err { color:var(--bad); min-height:18px; font-size:13px; margin-top:10px; }
-  .ok { color:var(--dim); font-size:13px; }
+  h2 { font-size:var(--text-xs); text-transform:uppercase; letter-spacing:.06em; color:var(--text-faint); margin:0; font-weight:600; }
+  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(--focus); outline-offset:0; border-color:var(--accent); }
+  :focus-visible { outline:2px solid var(--focus); outline-offset:2px; border-radius:var(--radius); }
+  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); }
+  button:hover, a.btn:hover { background:var(--accent-hover); border-color:var(--accent-hover); }
+  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>