ui: design polish — themed scrollbar, focus-ring glow, card depth

Themed thin scrollbar (cyan→magenta thumb, Firefox + WebKit), an on-brand glow
halo on the keyboard focus ring (solid outline keeps WCAG visibility), and a 1px
inner top highlight so cards read raised at rest. CSS-only, token-pure.

src/styles/global.css

@@ -68,6 +68,10 @@ a:hover {
   outline: 2px solid var(--accent-strong);
   outline-offset: 3px;
   border-radius: 4px;
+  /* Board-glow halo around the focus ring. The solid outline carries WCAG
+     visibility; the halo is on-brand polish (focusable els have no resting
+     box-shadow here, so nothing is clobbered). */
+  box-shadow: 0 0 0 4px var(--accent-glow);
 }
 
 ::selection {
@@ -75,6 +79,30 @@ a:hover {
   color: var(--accent-ink);
 }
 
+/* Themed scrollbar — thin, board-tinted. The track dissolves into the page; the
+   thumb carries a cyan→magenta accent (padding-boxed so it reads slim with
+   breathing room) and brightens on hover. Firefox + WebKit. */
+html {
+  scrollbar-width: thin;
+  scrollbar-color: var(--accent-strong) transparent;
+}
+::-webkit-scrollbar {
+  width: 11px;
+  height: 11px;
+}
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+::-webkit-scrollbar-thumb {
+  border-radius: 8px;
+  border: 3px solid transparent;
+  background-clip: padding-box;
+  background-color: color-mix(in srgb, var(--accent) 55%, var(--accent-2));
+}
+::-webkit-scrollbar-thumb:hover {
+  background-color: color-mix(in srgb, var(--accent) 72%, var(--accent-2));
+}
+
 img,
 svg {
   max-width: 100%;
@@ -160,6 +188,9 @@ svg {
   -webkit-backdrop-filter: blur(14px) saturate(1.1);
   border: 1px solid var(--border);
   border-radius: var(--radius);
+  /* A 1px inner top highlight — light catching the glass edge — so cards read as
+     raised even at rest (depth layering). The lift+glow stack lands on hover. */
+  box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.05);
   transition: border-color 0.25s var(--ease), transform 0.25s var(--ease),
     box-shadow 0.25s var(--ease);
 }
@@ -186,7 +217,8 @@ svg {
 .card:hover {
   border-color: var(--accent-line);
   transform: translateY(-2px);
-  box-shadow: var(--shadow), 0 0 22px var(--accent-glow);
+  box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.08), var(--shadow),
+    0 0 22px var(--accent-glow);
 }
 .card:hover::before {
   opacity: 0.9;