swarm-ui: make the shell header sticky and frosted glass

frontend/packages/swarm-ui/src/shell/Shell.css

@@ -19,6 +19,11 @@
    specificity as the media rule, so source order after it wins), then
    `:root[data-motion='allow']` last to re-enable despite an OS-level
    reduce preference. */
+/* Sticky + frosted glass (mara: "sticky header bar ... frosted glass")
+   — same `color-mix` + `backdrop-filter` recipe `.terminal-wrap`/
+   `.ui-badge` (@hive/shared) already use, dark-only same as those (a
+   light bg behind glass washes out). `z-index` keeps it above
+   `.shell-body` once content scrolls underneath. */
 .shell-header {
   display: flex;
   align-items: center;
@@ -26,7 +31,29 @@
   gap: 1.5em;
   padding: 0.75em 1.25em;
   border-bottom: 1px solid var(--border);
+  background: color-mix(in srgb, var(--bg-elev) 80%, transparent);
+  -webkit-backdrop-filter: blur(8px) saturate(120%);
+  backdrop-filter: blur(8px) saturate(120%);
+  position: sticky;
+  top: 0;
+  z-index: 10;
+}
+@media (prefers-color-scheme: light) {
+  .shell-header {
     background: var(--bg-elev);
+    -webkit-backdrop-filter: none;
+    backdrop-filter: none;
+  }
+}
+:root[data-theme="light"] .shell-header {
+  background: var(--bg-elev);
+  -webkit-backdrop-filter: none;
+  backdrop-filter: none;
+}
+:root[data-theme="dark"] .shell-header {
+  background: color-mix(in srgb, var(--bg-elev) 80%, transparent);
+  -webkit-backdrop-filter: blur(8px) saturate(120%);
+  backdrop-filter: blur(8px) saturate(120%);
 }
 .shell-brand {
   font-weight: 600;