refactor(ui): modern-2026 button feel, neutral scrollbar, sticky token

Friendly/warm direction, modernised:
- Buttons: drop the translateY lift on every variant (it read jittery and
  dated). They now rest on a soft neutral elevation, bloom their warm brand
  glow in on hover, and scale-down 0.98 for a tactile press. Motion uses the
  --motion-base / --ease-standard tokens.
- Scrollbar: neutral padded pill at rest that warms to the accent on hover,
  instead of an always-orange thumb that competed with content.
- page-sticky-header: replace the magic top: -20px (coupled to the content
  gutter) with calc(-1 * var(--space-5)); tokenise its z-index to --z-sticky.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_013J5koaCrHDMvS7uwpawLBN

frontend/src/lib/styles/ported/buttons.css

@@ -9,27 +9,32 @@
     font-size: var(--text-base);
     font-weight: var(--weight-medium);
     gap: var(--space-2);
-    transition: all 0.2s ease;
+    transition: all var(--motion-base) var(--ease-standard);
 }
 
 .btn i {
     font-size: 15px;
 }
 
+/* Filled buttons rest on a soft, neutral elevation; their warm brand glow
+   blooms in on hover (rather than glowing at rest), and a gentle scale-down
+   gives a tactile press. The old "translateY lift on every button" is gone —
+   vertical lift is reserved for cards now, so buttons feel calm, not jittery. */
 .btn-primary {
     background: var(--color-accent-gradient);
     color: var(--color-on-accent);
-    box-shadow: 0 4px 15px var(--color-accent-shadow);
+    box-shadow: var(--shadow-sm);
 }
 
 .btn-primary:hover {
-    transform: translateY(-2px);
+    box-shadow: 0 4px 14px var(--color-accent-shadow);
-    box-shadow: 0 6px 20px var(--color-accent-shadow-lg);
+    filter: brightness(1.05);
 }
 
 .btn-primary:active {
-    transform: translateY(0);
+    transform: scale(0.98);
-    box-shadow: 0 2px 10px var(--color-accent-shadow);
+    box-shadow: var(--shadow-xs);
+    filter: brightness(0.97);
 }
 
 .btn-secondary {
@@ -41,29 +46,28 @@
 .btn-secondary:hover {
     background-color: var(--color-bg-input-alt);
     border-color: var(--color-border-medium);
-    transform: translateY(-2px);
-    box-shadow: 0 4px 12px var(--color-shadow-sm);
 }
 
 .btn-secondary:active {
-    transform: translateY(0);
+    transform: scale(0.98);
     background-color: var(--color-border);
 }
 
 .btn-danger {
     background: var(--color-danger-gradient);
     color: var(--color-danger-text);
-    box-shadow: 0 4px 15px var(--color-danger-ring);
+    box-shadow: var(--shadow-sm);
 }
 
 .btn-danger:hover {
-    transform: translateY(-2px);
+    box-shadow: 0 4px 14px var(--color-danger-ring);
-    box-shadow: 0 6px 20px var(--color-danger-ring-lg);
+    filter: brightness(1.05);
 }
 
 .btn-danger:active {
-    transform: translateY(0);
+    transform: scale(0.98);
-    box-shadow: 0 2px 10px var(--color-danger-ring);
+    box-shadow: var(--shadow-xs);
+    filter: brightness(0.97);
 }
 
 /* ── State matrix: focus / disabled / loading ───────────────── */

frontend/src/lib/styles/ported/content.css

@@ -1,18 +1,27 @@
 /* ── Scrollbar ── */
 
 ::-webkit-scrollbar {
-    width: 6px;
+    width: 10px;
+    height: 10px;
 }
 ::-webkit-scrollbar-track {
-    background: var(--color-bg-surface);
+    background: transparent;
 }
+/* Neutral, padded pill that blends in at rest and warms to the brand accent
+   only on hover — the bar no longer competes with content for attention. */
 ::-webkit-scrollbar-thumb {
+    background: var(--color-border-medium);
+    border: 2px solid transparent;
+    border-radius: var(--radius-full);
+    background-clip: padding-box;
+}
+::-webkit-scrollbar-thumb:hover {
     background: var(--color-accent);
-    border-radius: 3px;
+    background-clip: padding-box;
 }
 * {
     scrollbar-width: thin;
-    scrollbar-color: var(--color-accent) var(--color-bg-surface);
+    scrollbar-color: var(--color-border-medium) transparent;
 }
 
 /* Content area */
@@ -50,11 +59,13 @@
 
 .page-sticky-header {
     position: sticky;
-    margin: 0px;
+    margin: 0;
-    padding: var(--space-2-5) 0px;
+    padding: var(--space-2-5) 0;
-    top: -20px; /* due to padding top of content-area */
+    /* Cancel .content-area's --space-5 top padding so the header sticks flush;
+       stays correct if the gutter token ever changes. */
+    top: calc(-1 * var(--space-5));
     background-color: var(--color-bg-page);
-    z-index: 100; /* ensure header is above image preview */
+    z-index: var(--z-sticky); /* ensure header is above image preview */
 }
 
 .actions-bar {