Refine header emphasis, field-on-layer treatment, and narrow-pane control collapse

styles/tokens.css

@@ -102,6 +102,17 @@
   --accent-hover: #0c5f77;
   --accent-contrast: #ffffff;
 }
+
+/*
+ * Soft accent — a low-emphasis accent wash for a tinted-but-quiet surface (e.g.
+ * the header's Donate button: noticeable without competing with a primary action).
+ * Derived from the swappable accent + the theme background, so it follows any
+ * accent/theme automatically rather than being a hardcoded per-accent value.
+ */
+:root {
+  --accent-soft: color-mix(in srgb, var(--accent) 12%, var(--bg));
+  --accent-soft-hover: color-mix(in srgb, var(--accent) 20%, var(--bg));
+}
 [data-theme='dark'] {
   --accent: #2dd4bf;
   --accent-hover: #5eead4;