@a83/orbiter-admin 0.2.0

package/public/style.css

@@ -0,0 +1,1020 @@
+*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+
+/* ════════════════════════════════════════════════════════════
+   THEME SYSTEM
+   Variables applied in this order:
+   1. :root          → Space Dark (default)
+   2. @media light   → Space Light (system auto)
+   3. [data-scheme]  → manual override
+   4. [data-theme]   → palette swap (Zen / Catppuccin)
+   ════════════════════════════════════════════════════════════ */
+
+/* ── Space Dark (default) — Space Station ─────────── */
+:root {
+  --bg0:       #080e18;
+  --bg1:       #0e1620;
+  --bg2:       #131d2c;
+  --bg3:       #1a2638;
+  --line:      #1c2e46;
+  --line2:     #132030;
+  --muted:     #284060;
+  --mid:       #4a7098;
+  --text:      #7898c0;
+  --heading:   #b8d4f0;
+  --gold:      #00c8a0;
+  --gold-bg:   rgba(0,200,160,.08);
+  --jade:      #00d8b8;
+  --jade-bg:   rgba(0,216,184,.09);
+  --accent:    #1898f8;
+  --accent2:   #8050e8;
+  --accent-bg: rgba(24,152,248,.10);
+  --red:       #e85870;
+  --red-bg:    rgba(232,88,112,.10);
+  --hover-bg:  rgba(24,152,248,.04);
+  --row-hover: rgba(24,152,248,.018);
+  --td-line:   rgba(8,16,40,.85);
+  --sans:      "Inter", system-ui, -apple-system, sans-serif;
+  --mono:      "DM Mono", "Fira Mono", monospace;
+  --serif:     "Noto Serif JP", serif;
+  --display:   "Space Grotesk", system-ui, sans-serif;
+  --radius:    5px;
+}
+
+/* ── Space Light — Solar Command ─────────────────── */
+.space-light {
+  --bg0:       #eef5ff;
+  --bg1:       #e4f0ff;
+  --bg2:       #f8fcff;
+  --bg3:       #d0e8ff;
+  --line:      #b0ccf0;
+  --line2:     #cce0ff;
+  --muted:     #6080a8;
+  --mid:       #204878;
+  --text:      #0a1e3a;
+  --heading:   #030d1e;
+  --gold:      #0088b8;
+  --gold-bg:   rgba(0,136,184,.07);
+  --jade:      #006880;
+  --jade-bg:   rgba(0,104,128,.08);
+  --accent:    #0048d8;
+  --accent2:   #5828c8;
+  --accent-bg: rgba(0,72,216,.09);
+  --red:       #c02040;
+  --red-bg:    rgba(192,32,64,.08);
+  --hover-bg:  rgba(0,72,216,.03);
+  --row-hover: rgba(0,72,216,.015);
+  --td-line:   rgba(10,25,70,.07);
+}
+
+/* ── Zen Dark (Japandi) ───────────────────────────── */
+/* Palette: Slate #566070 · Umber #574838 · Sakura #e8cac8 · Mauve #ad7575 · Moss #6b8c6e */
+.zen-dark {
+  --bg0:       #0f0e10;
+  --bg1:       #151416;
+  --bg2:       #1c1a20;
+  --bg3:       #242228;
+  --line:      #2c2830;
+  --line2:     #221f26;
+  --muted:     #574838;
+  --mid:       #6e7a88;
+  --text:      #98a4b0;
+  --heading:   #e0ccd0;
+  --gold:      #ad7575;
+  --gold-bg:   rgba(173,117,117,.08);
+  --jade:      #6b8c6e;
+  --jade-bg:   rgba(107,140,110,.10);
+  --accent:    #566070;
+  --accent2:   #ad7575;
+  --accent-bg: rgba(86,96,112,.12);
+  --red:       #c07060;
+  --red-bg:    rgba(192,112,96,.10);
+  --hover-bg:  rgba(232,202,200,.06);
+  --row-hover: rgba(232,202,200,.03);
+  --td-line:   rgba(46,40,48,.8);
+}
+
+/* ── Zen Light (Japandi) ──────────────────────────── */
+.zen-light {
+  --bg0:       #f4f5f7;
+  --bg1:       #ecedf2;
+  --bg2:       #ffffff;
+  --bg3:       #e0e2e8;
+  --line:      #cccdd8;
+  --line2:     #d8d9e4;
+  --muted:     #8c8fa0;
+  --mid:       #4a5060;
+  --text:      #282c38;
+  --heading:   #10131e;
+  --gold:      #8c5858;
+  --gold-bg:   rgba(140,88,88,.08);
+  --jade:      #3d6b40;
+  --jade-bg:   rgba(61,107,64,.09);
+  --accent:    #3a4a58;
+  --accent2:   #8c5858;
+  --accent-bg: rgba(58,74,88,.10);
+  --red:       #b04030;
+  --red-bg:    rgba(176,64,48,.08);
+  --hover-bg:  rgba(173,117,117,.07);
+  --row-hover: rgba(173,117,117,.035);
+  --td-line:   rgba(70,75,90,.12);
+}
+
+/* ── Catppuccin Mocha (Dark) ─────────────────────── */
+.catppuccin-dark {
+  --bg0:       #11111b;
+  --bg1:       #181825;
+  --bg2:       #1e1e2e;
+  --bg3:       #313244;
+  --line:      #313244;
+  --line2:     #262637;
+  --muted:     #6c7086;
+  --mid:       #9399b2;
+  --text:      #cdd6f4;
+  --heading:   #cdd6f4;
+  --gold:      #f9e2af;
+  --gold-bg:   rgba(249,226,175,.08);
+  --jade:      #a6e3a1;
+  --jade-bg:   rgba(166,227,161,.09);
+  --accent:    #cba6f7;
+  --accent2:   #b4befe;
+  --accent-bg: rgba(203,166,247,.10);
+  --red:       #f38ba8;
+  --red-bg:    rgba(243,139,168,.10);
+  --hover-bg:  rgba(255,255,255,.04);
+  --row-hover: rgba(255,255,255,.018);
+  --td-line:   rgba(49,50,68,.7);
+}
+
+/* ── Catppuccin Latte (Light) ────────────────────── */
+.catppuccin-light {
+  --bg0:       #eff1f5;
+  --bg1:       #e6e9ef;
+  --bg2:       #ffffff;
+  --bg3:       #ccd0da;
+  --line:      #ccd0da;
+  --line2:     #dce0e8;
+  --muted:     #9ca0b0;
+  --mid:       #7c7f93;
+  --text:      #4c4f69;
+  --heading:   #1e1e2e;
+  --gold:      #df8e1d;
+  --gold-bg:   rgba(223,142,29,.08);
+  --jade:      #40a02b;
+  --jade-bg:   rgba(64,160,43,.09);
+  --accent:    #8839ef;
+  --accent2:   #7287fd;
+  --accent-bg: rgba(136,57,239,.09);
+  --red:       #d20f39;
+  --red-bg:    rgba(210,15,57,.08);
+  --hover-bg:  rgba(0,0,0,.03);
+  --row-hover: rgba(0,0,0,.015);
+  --td-line:   rgba(76,79,105,.12);
+}
+
+/* ── Apply themes via data attributes ───────────────
+   Scheme selector order:
+   html                          → Space Dark
+   html[data-scheme="light"]     → Space Light
+   html[data-theme="zen"]        → Zen Dark
+   html[data-theme="zen"][data-scheme="light"] → Zen Light
+   html[data-theme="catppuccin"] → Catppuccin Dark
+   html[data-theme="catppuccin"][data-scheme="light"] → Catppuccin Light
+   @media prefers light (auto)   → same light variants if no [data-scheme="dark"]
+   ─────────────────────────────────────────────────── */
+
+html[data-scheme="light"]:not([data-theme]),
+html[data-scheme="light"][data-theme="space"]
+{ @apply .space-light; } /* fallback below */
+
+/* Programmatic application (JS sets vars directly via class) */
+/* We use JS to add the right class to html — see theme.js   */
+
+/* ── System auto-light (no manual override) ──────── */
+@media (prefers-color-scheme: light) {
+  html:not([data-scheme="dark"]):not([data-theme]),
+  html:not([data-scheme="dark"])[data-theme="space"] {
+    --bg0:       #eef5ff;
+    --bg1:       #e4f0ff;
+    --bg2:       #f8fcff;
+    --bg3:       #d0e8ff;
+    --line:      #b0ccf0;
+    --line2:     #cce0ff;
+    --muted:     #6080a8;
+    --mid:       #204878;
+    --text:      #0a1e3a;
+    --heading:   #030d1e;
+    --gold:      #0088b8;
+    --gold-bg:   rgba(0,136,184,.07);
+    --jade:      #006880;
+    --jade-bg:   rgba(0,104,128,.08);
+    --accent:    #0048d8;
+    --accent2:   #5828c8;
+    --accent-bg: rgba(0,72,216,.09);
+    --red:       #c02040;
+    --red-bg:    rgba(192,32,64,.08);
+    --hover-bg:  rgba(0,72,216,.03);
+    --row-hover: rgba(0,72,216,.015);
+    --td-line:   rgba(10,25,70,.07);
+  }
+  html:not([data-scheme="dark"])[data-theme="zen"] {
+    --bg0:       #f4f5f7;
+    --bg1:       #ecedf2;
+    --bg2:       #ffffff;
+    --bg3:       #e0e2e8;
+    --line:      #cccdd8;
+    --line2:     #d8d9e4;
+    --muted:     #8c8fa0;
+    --mid:       #4a5060;
+    --text:      #282c38;
+    --heading:   #10131e;
+    --gold:      #8c5858;
+    --gold-bg:   rgba(140,88,88,.08);
+    --jade:      #3d6b40;
+    --jade-bg:   rgba(61,107,64,.09);
+    --accent:    #3a4a58;
+    --accent2:   #8c5858;
+    --accent-bg: rgba(58,74,88,.10);
+    --red:       #b04030;
+    --red-bg:    rgba(176,64,48,.08);
+    --hover-bg:  rgba(173,117,117,.07);
+    --row-hover: rgba(173,117,117,.035);
+    --td-line:   rgba(70,75,90,.12);
+  }
+  html:not([data-scheme="dark"])[data-theme="catppuccin"] {
+    --bg0:       #eff1f5;
+    --bg1:       #e6e9ef;
+    --bg2:       #ffffff;
+    --bg3:       #ccd0da;
+    --line:      #ccd0da;
+    --line2:     #dce0e8;
+    --muted:     #9ca0b0;
+    --mid:       #7c7f93;
+    --text:      #4c4f69;
+    --heading:   #1e1e2e;
+    --gold:      #df8e1d;
+    --gold-bg:   rgba(223,142,29,.08);
+    --jade:      #40a02b;
+    --jade-bg:   rgba(64,160,43,.09);
+    --accent:    #8839ef;
+    --accent2:   #7287fd;
+    --accent-bg: rgba(136,57,239,.09);
+    --red:       #d20f39;
+    --red-bg:    rgba(210,15,57,.08);
+    --hover-bg:  rgba(0,0,0,.03);
+    --row-hover: rgba(0,0,0,.015);
+    --td-line:   rgba(76,79,105,.12);
+  }
+}
+
+/* ── Zen Light explicit override ─────────────────── */
+html[data-scheme="light"][data-theme="zen"] {
+  --bg0:       #f4f5f7;
+  --bg1:       #ecedf2;
+  --bg2:       #ffffff;
+  --bg3:       #e0e2e8;
+  --line:      #cccdd8;
+  --line2:     #d8d9e4;
+  --muted:     #8c8fa0;
+  --mid:       #4a5060;
+  --text:      #282c38;
+  --heading:   #10131e;
+  --gold:      #8c5858;
+  --gold-bg:   rgba(140,88,88,.08);
+  --jade:      #3d6b40;
+  --jade-bg:   rgba(61,107,64,.09);
+  --accent:    #3a4a58;
+  --accent2:   #8c5858;
+  --accent-bg: rgba(58,74,88,.10);
+  --red:       #b04030;
+  --red-bg:    rgba(176,64,48,.08);
+  --hover-bg:  rgba(173,117,117,.07);
+  --row-hover: rgba(173,117,117,.035);
+  --td-line:   rgba(70,75,90,.12);
+}
+
+/* ── Zen Dark ────────────────────────────────────── */
+html[data-theme="zen"],
+html[data-scheme="dark"][data-theme="zen"] {
+  --bg0:       #0f0e10;
+  --bg1:       #151416;
+  --bg2:       #1c1a20;
+  --bg3:       #242228;
+  --line:      #2c2830;
+  --line2:     #221f26;
+  --muted:     #574838;
+  --mid:       #6e7a88;
+  --text:      #98a4b0;
+  --heading:   #e0ccd0;
+  --gold:      #ad7575;
+  --gold-bg:   rgba(173,117,117,.08);
+  --jade:      #6b8c6e;
+  --jade-bg:   rgba(107,140,110,.10);
+  --accent:    #566070;
+  --accent2:   #ad7575;
+  --accent-bg: rgba(86,96,112,.12);
+  --red:       #c07060;
+  --red-bg:    rgba(192,112,96,.10);
+  --hover-bg:  rgba(232,202,200,.06);
+  --row-hover: rgba(232,202,200,.03);
+  --td-line:   rgba(46,40,48,.8);
+}
+html[data-scheme="dark"][data-theme="catppuccin"] {
+  --bg0:       #11111b;
+  --bg1:       #181825;
+  --bg2:       #1e1e2e;
+  --bg3:       #313244;
+  --line:      #313244;
+  --line2:     #262637;
+  --muted:     #6c7086;
+  --mid:       #9399b2;
+  --text:      #cdd6f4;
+  --heading:   #cdd6f4;
+  --gold:      #f9e2af;
+  --gold-bg:   rgba(249,226,175,.08);
+  --jade:      #a6e3a1;
+  --jade-bg:   rgba(166,227,161,.09);
+  --accent:    #cba6f7;
+  --accent2:   #b4befe;
+  --accent-bg: rgba(203,166,247,.10);
+  --red:       #f38ba8;
+  --red-bg:    rgba(243,139,168,.10);
+  --hover-bg:  rgba(255,255,255,.04);
+  --row-hover: rgba(255,255,255,.018);
+  --td-line:   rgba(49,50,68,.7);
+}
+
+/* ── Manual light override per theme ────────────── */
+html[data-scheme="light"][data-theme="zen"] {
+  --bg0:       #f4f5f7;
+  --bg1:       #ecedf2;
+  --bg2:       #ffffff;
+  --bg3:       #e0e2e8;
+  --line:      #cccdd8;
+  --line2:     #d8d9e4;
+  --muted:     #8c8fa0;
+  --mid:       #4a5060;
+  --text:      #282c38;
+  --heading:   #10131e;
+  --gold:      #8c5858;
+  --gold-bg:   rgba(140,88,88,.08);
+  --jade:      #3d6b40;
+  --jade-bg:   rgba(61,107,64,.09);
+  --accent:    #3a4a58;
+  --accent2:   #8c5858;
+  --accent-bg: rgba(58,74,88,.10);
+  --red:       #b04030;
+  --red-bg:    rgba(176,64,48,.08);
+  --hover-bg:  rgba(173,117,117,.07);
+  --row-hover: rgba(173,117,117,.035);
+  --td-line:   rgba(70,75,90,.12);
+}
+html[data-scheme="light"][data-theme="catppuccin"] {
+  --bg0:       #eff1f5;
+  --bg1:       #e6e9ef;
+  --bg2:       #ffffff;
+  --bg3:       #ccd0da;
+  --line:      #ccd0da;
+  --line2:     #dce0e8;
+  --muted:     #9ca0b0;
+  --mid:       #7c7f93;
+  --text:      #4c4f69;
+  --heading:   #1e1e2e;
+  --gold:      #df8e1d;
+  --gold-bg:   rgba(223,142,29,.08);
+  --jade:      #40a02b;
+  --jade-bg:   rgba(64,160,43,.09);
+  --accent:    #8839ef;
+  --accent2:   #7287fd;
+  --accent-bg: rgba(136,57,239,.09);
+  --red:       #d20f39;
+  --red-bg:    rgba(210,15,57,.08);
+  --hover-bg:  rgba(0,0,0,.03);
+  --row-hover: rgba(0,0,0,.015);
+  --td-line:   rgba(76,79,105,.12);
+}
+html[data-scheme="light"]:not([data-theme]),
+html[data-scheme="light"][data-theme="space"] {
+  --bg0:       #eef5ff;
+  --bg1:       #e4f0ff;
+  --bg2:       #f8fcff;
+  --bg3:       #d0e8ff;
+  --line:      #b0ccf0;
+  --line2:     #cce0ff;
+  --muted:     #6080a8;
+  --mid:       #204878;
+  --text:      #0a1e3a;
+  --heading:   #030d1e;
+  --gold:      #0088b8;
+  --gold-bg:   rgba(0,136,184,.07);
+  --jade:      #006880;
+  --jade-bg:   rgba(0,104,128,.08);
+  --accent:    #0048d8;
+  --accent2:   #5828c8;
+  --accent-bg: rgba(0,72,216,.09);
+  --red:       #c02040;
+  --red-bg:    rgba(192,32,64,.08);
+  --hover-bg:  rgba(0,72,216,.03);
+  --row-hover: rgba(0,72,216,.015);
+  --td-line:   rgba(10,25,70,.07);
+}
+
+/* Zen dark base (lower specificity so @media auto-light overrides) */
+[data-theme="zen"] {
+  --bg0:       #0f0e10;
+  --bg1:       #151416;
+  --bg2:       #1c1a20;
+  --bg3:       #242228;
+  --line:      #2c2830;
+  --line2:     #221f26;
+  --muted:     #574838;
+  --mid:       #6e7a88;
+  --text:      #98a4b0;
+  --heading:   #e0ccd0;
+  --gold:      #ad7575;
+  --gold-bg:   rgba(173,117,117,.08);
+  --jade:      #6b8c6e;
+  --jade-bg:   rgba(107,140,110,.10);
+  --accent:    #566070;
+  --accent2:   #ad7575;
+  --accent-bg: rgba(86,96,112,.12);
+  --red:       #c07060;
+  --red-bg:    rgba(192,112,96,.10);
+  --hover-bg:  rgba(232,202,200,.06);
+  --row-hover: rgba(232,202,200,.03);
+  --td-line:   rgba(46,40,48,.8);
+}
+
+/* Catppuccin dark base (lower specificity so @media auto-light overrides) */
+[data-theme="catppuccin"] {
+  --bg0:       #11111b;
+  --bg1:       #181825;
+  --bg2:       #1e1e2e;
+  --bg3:       #313244;
+  --line:      #313244;
+  --line2:     #262637;
+  --muted:     #6c7086;
+  --mid:       #9399b2;
+  --text:      #cdd6f4;
+  --heading:   #cdd6f4;
+  --gold:      #f9e2af;
+  --gold-bg:   rgba(249,226,175,.08);
+  --jade:      #a6e3a1;
+  --jade-bg:   rgba(166,227,161,.09);
+  --accent:    #cba6f7;
+  --accent2:   #b4befe;
+  --accent-bg: rgba(203,166,247,.10);
+  --red:       #f38ba8;
+  --red-bg:    rgba(243,139,168,.10);
+  --hover-bg:  rgba(255,255,255,.04);
+  --row-hover: rgba(255,255,255,.018);
+  --td-line:   rgba(49,50,68,.7);
+}
+
+/* ════════════════════════════════════════════════════════════
+   GLASS MODE  (html[data-style="glass"])
+   Each UI section is its own floating frosted-glass card.
+   ════════════════════════════════════════════════════════════ */
+
+html[data-style="glass"] {
+  --radius: 12px;
+  --glass-blur:    blur(24px) saturate(200%);
+  --glass-blur-sm: blur(16px) saturate(180%);
+  --glass-border:  color-mix(in srgb, var(--accent) 18%, transparent);
+  --glass-bg:      color-mix(in srgb, var(--bg2) 44%, transparent);
+  --glass-bg-side: color-mix(in srgb, var(--bg1) 44%, transparent);
+  --glass-shadow:  0 4px 28px rgba(0,0,0,.16), inset 0 1px 0 rgba(255,255,255,.07);
+}
+
+/* Light mode: softer shadow so cards don't cast dark halos on each other */
+html[data-style="glass"][data-scheme="light"],
+html[data-style="glass"][data-theme="catppuccin"][data-scheme="light"] {
+  --glass-shadow: 0 2px 12px rgba(0,0,0,.06), inset 0 1px 0 rgba(255,255,255,.6);
+}
+@media (prefers-color-scheme: light) {
+  html[data-style="glass"]:not([data-scheme="dark"]) {
+    --glass-shadow: 0 2px 12px rgba(0,0,0,.06), inset 0 1px 0 rgba(255,255,255,.6);
+  }
+}
+
+/* ── Gradient mesh ──────────────────────────────────── */
+html[data-style="glass"] body {
+  background:
+    radial-gradient(ellipse 65% 55% at 12% 52%, color-mix(in srgb, var(--accent) 24%, transparent) 0%, transparent 100%),
+    radial-gradient(ellipse 50% 45% at 88% 14%, color-mix(in srgb, var(--gold)   18%, transparent) 0%, transparent 100%),
+    radial-gradient(ellipse 45% 50% at 58% 90%, color-mix(in srgb, var(--jade)   13%, transparent) 0%, transparent 100%),
+    var(--bg0);
+  background-attachment: fixed;
+}
+
+/* ── App: inset everything so glass cards float inside ── */
+html[data-style="glass"] .app {
+  padding: 10px;
+  gap: 10px;
+  box-sizing: border-box;
+}
+
+/* ── Topbar: floating glass card ────────────────────── */
+html[data-style="glass"] .topbar {
+  background: color-mix(in srgb, var(--bg1) 20%, transparent);
+  backdrop-filter: blur(32px) saturate(260%);
+  -webkit-backdrop-filter: blur(32px) saturate(260%);
+  border: 1px solid var(--glass-border);
+  border-radius: 12px;
+  box-shadow: var(--glass-shadow);
+}
+
+/* ── Sidebar: floating glass card ───────────────────── */
+html[data-style="glass"] .sidebar {
+  background: var(--glass-bg-side);
+  backdrop-filter: var(--glass-blur);
+  -webkit-backdrop-filter: var(--glass-blur);
+  border-right: none;
+  border: 1px solid var(--glass-border);
+  border-radius: 12px;
+  box-shadow: var(--glass-shadow);
+}
+
+html[data-style="glass"] .nav-item:hover {
+  background: color-mix(in srgb, var(--accent) 10%, transparent);
+  box-shadow: 0 0 10px color-mix(in srgb, var(--accent) 16%, transparent);
+  color: var(--accent);
+}
+html[data-style="glass"] .nav-item.active {
+  background: color-mix(in srgb, var(--accent) 18%, transparent);
+  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
+  box-shadow: 0 0 18px color-mix(in srgb, var(--accent) 28%, transparent);
+  color: var(--accent);
+}
+html[data-style="glass"] .nav-children {
+  border-left-color: var(--glass-border);
+}
+
+/* ── Main: transparent flex container ───────────────── */
+html[data-style="glass"] .main {
+  background: transparent !important;
+  backdrop-filter: none !important;
+  -webkit-backdrop-filter: none !important;
+  border: none !important;
+  box-shadow: none !important;
+  margin: 0 !important;
+  border-radius: 0 !important;
+  padding: 0 0 24px;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  overflow-y: auto;
+  min-height: 0;
+}
+html[data-style="glass"] .main > * {
+  flex-shrink: 0;
+}
+
+/* ── Universal glass card ───────────────────────────── */
+html[data-style="glass"] .glass-card {
+  background: var(--glass-bg);
+  backdrop-filter: var(--glass-blur-sm);
+  -webkit-backdrop-filter: var(--glass-blur-sm);
+  border: 1px solid var(--glass-border);
+  border-radius: 12px;
+  box-shadow: var(--glass-shadow);
+  overflow: hidden;
+}
+
+/* ── Settings groups ────────────────────────────────── */
+html[data-style="glass"] .settings-group {
+  background: var(--glass-bg) !important;
+  backdrop-filter: var(--glass-blur-sm) !important;
+  -webkit-backdrop-filter: var(--glass-blur-sm) !important;
+  border: 1px solid var(--glass-border) !important;
+  border-radius: 12px;
+  overflow: hidden;
+  box-shadow: var(--glass-shadow);
+}
+
+/* ── Editor shell ───────────────────────────────────── */
+html[data-style="glass"] .editor-shell {
+  gap: 8px;
+  padding: 8px;
+  background: transparent;
+}
+
+html[data-style="glass"] .editor-main {
+  background: var(--glass-bg);
+  backdrop-filter: var(--glass-blur-sm);
+  -webkit-backdrop-filter: var(--glass-blur-sm);
+  border: 1px solid var(--glass-border);
+  border-radius: 12px;
+  overflow: hidden;
+}
+
+html[data-style="glass"] .preview-panel {
+  background: var(--glass-bg-side);
+  backdrop-filter: var(--glass-blur-sm);
+  -webkit-backdrop-filter: var(--glass-blur-sm);
+  border: 1px solid var(--glass-border) !important;
+  border-radius: 12px;
+  overflow: hidden;
+}
+
+html[data-style="glass"] .meta-panel {
+  background: var(--glass-bg-side);
+  backdrop-filter: var(--glass-blur-sm);
+  -webkit-backdrop-filter: var(--glass-blur-sm);
+  border: 1px solid var(--glass-border) !important;
+  border-radius: 12px;
+  overflow: hidden;
+  box-shadow: var(--glass-shadow);
+}
+
+/* ── Dashboard glass overrides ──────────────────────── */
+html[data-style="glass"] .hero {
+  background: transparent;
+  border-bottom: none;
+}
+html[data-style="glass"] .stats-row {
+  border-bottom: none;
+}
+html[data-style="glass"] .stat-cell {
+  border-right-color: var(--glass-border);
+}
+html[data-style="glass"] .dash-content .content-main {
+  border-right-color: var(--glass-border);
+}
+html[data-style="glass"] .workspace {
+  background: transparent !important;
+  backdrop-filter: none !important;
+  -webkit-backdrop-filter: none !important;
+  border: none !important;
+  box-shadow: none !important;
+  border-radius: 0 !important;
+  display: flex;
+  gap: 14px;
+  padding: 0;
+}
+html[data-style="glass"] .ws-panel {
+  background: var(--glass-bg);
+  backdrop-filter: var(--glass-blur-sm);
+  -webkit-backdrop-filter: var(--glass-blur-sm);
+  border: 1px solid var(--glass-border) !important;
+  border-radius: 12px;
+  box-shadow: var(--glass-shadow);
+  min-height: 320px;
+}
+html[data-style="glass"] .ws-panel:first-child { flex: 2; }
+html[data-style="glass"] .ws-panel:last-child  { flex: 1; }
+html[data-style="glass"] .notes-area {
+  min-height: 240px;
+}
+html[data-style="glass"] .ws-panel + .ws-panel {
+  border-left-color: var(--glass-border);
+}
+
+/* ── Entries glass overrides ────────────────────────── */
+html[data-style="glass"] .page-header {
+  margin-bottom: 0;
+  padding: 20px 24px;
+}
+html[data-style="glass"] .entries-content-card {
+  padding: 16px 20px;
+}
+html[data-style="glass"] .entries-filter-bar {
+  margin-bottom: 12px;
+}
+
+/* ── Auto-glass content sections (non-dashboard pages) ─ */
+html[data-style="glass"] .table-wrap {
+  background: var(--glass-bg);
+  backdrop-filter: var(--glass-blur-sm);
+  -webkit-backdrop-filter: var(--glass-blur-sm);
+  border: 1px solid var(--glass-border);
+  border-radius: 12px;
+  box-shadow: var(--glass-shadow);
+}
+html[data-style="glass"] .glass-card .table-wrap {
+  background: transparent;
+  backdrop-filter: none;
+  -webkit-backdrop-filter: none;
+  border: none;
+  border-radius: 0;
+  box-shadow: none;
+}
+html[data-style="glass"] .build-card {
+  background: var(--glass-bg);
+  backdrop-filter: var(--glass-blur-sm);
+  -webkit-backdrop-filter: var(--glass-blur-sm);
+  border: 1px solid var(--glass-border);
+  border-radius: 12px;
+  box-shadow: var(--glass-shadow);
+}
+html[data-style="glass"] .main:has(.coll-panel) {
+  padding: 8px !important;
+  gap: 8px;
+}
+html[data-style="glass"] .coll-panel,
+html[data-style="glass"] .editor-panel {
+  background: var(--glass-bg);
+  backdrop-filter: var(--glass-blur-sm);
+  -webkit-backdrop-filter: var(--glass-blur-sm);
+  border: 1px solid var(--glass-border) !important;
+  border-right: 1px solid var(--glass-border) !important;
+  border-radius: 12px;
+  box-shadow: var(--glass-shadow);
+  overflow: hidden;
+  height: auto;
+}
+html[data-style="glass"] .upload-area {
+  background: color-mix(in srgb, var(--glass-bg) 80%, transparent);
+  backdrop-filter: var(--glass-blur-sm);
+  -webkit-backdrop-filter: var(--glass-blur-sm);
+  border: 1px dashed var(--glass-border);
+  border-radius: 12px;
+}
+html[data-style="glass"] #media-grid-wrap {
+  background: var(--glass-bg);
+  backdrop-filter: var(--glass-blur-sm);
+  -webkit-backdrop-filter: var(--glass-blur-sm);
+  border: 1px solid var(--glass-border);
+  border-radius: 12px;
+  box-shadow: var(--glass-shadow);
+  padding: 16px;
+}
+
+/* ── Glow accents ───────────────────────────────────── */
+html[data-style="glass"] .btn-publish {
+  box-shadow: 0 0 18px color-mix(in srgb, var(--gold) 40%, transparent);
+}
+
+html[data-style="glass"] .btn-primary {
+  box-shadow: 0 0 14px color-mix(in srgb, var(--accent) 35%, transparent);
+}
+
+/* ════════════════════════════════════════════════════════════
+   BASE STYLES
+   ════════════════════════════════════════════════════════════ */
+
+html, body {
+  background: var(--bg0);
+  color: var(--text);
+  font-family: var(--sans);
+  font-size: 14px;
+  line-height: 1.6;
+  min-height: 100vh;
+  -webkit-font-smoothing: antialiased;
+  transition: background 0.2s, color 0.2s;
+}
+
+a { color: var(--accent); text-decoration: none; }
+a:hover { color: var(--heading); }
+
+/* ── Layout ─────────────────────────────────────── */
+.app { display: grid; grid-template-columns: 232px 1fr; grid-template-rows: 56px 1fr; height: 100vh; }
+.topbar { grid-column: 1/-1; background: var(--bg1); border-bottom: 1px solid var(--line); display: flex; align-items: center; padding: 0 24px; gap: 0; z-index: 10; }
+.sidebar { background: var(--bg1); border-right: 1px solid var(--line); padding: 16px 0; display: flex; flex-direction: column; overflow-y: auto; }
+.main { background: var(--bg0); overflow-y: auto; padding: 32px 40px; min-height: 0; }
+
+/* ── Topbar ─────────────────────────────────────── */
+.logo {
+  font-family: var(--display);
+  font-weight: 500;
+  font-size: 13px;
+  color: var(--heading);
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  letter-spacing: 0.18em;
+  text-transform: uppercase;
+  text-decoration: none;
+  transition: color 0.25s;
+  cursor: pointer;
+}
+.logo:hover { color: var(--gold); }
+.logo-mark {
+  width: 22px;
+  height: 22px;
+  border: 1px solid var(--gold);
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 7px;
+  color: var(--gold);
+  font-family: var(--mono);
+  letter-spacing: 0.02em;
+  position: relative;
+  overflow: visible;
+  flex-shrink: 0;
+  transition: border-color 0.25s;
+}
+.logo:hover .logo-mark { border-color: var(--accent); color: var(--accent); }
+
+/* Orbital ring animation — two elliptical rings like a planet orbit */
+.logo-mark::before {
+  content: '';
+  position: absolute;
+  inset: -5px;
+  border-radius: 50%;
+  border: 1px solid var(--accent);
+  border-top-color: transparent;
+  border-bottom-color: transparent;
+  opacity: 0.65;
+  pointer-events: none;
+  animation: logo-orbit-a 14s linear infinite;
+}
+.logo-mark::after {
+  content: '';
+  position: absolute;
+  inset: -9px;
+  border-radius: 50%;
+  border: 1px solid var(--gold);
+  border-left-color: transparent;
+  border-right-color: transparent;
+  opacity: 0.22;
+  pointer-events: none;
+  animation: logo-orbit-b 36s linear infinite reverse;
+}
+@keyframes logo-orbit-a {
+  from { transform: scaleY(0.38) rotate(0deg); }
+  to   { transform: scaleY(0.38) rotate(360deg); }
+}
+@keyframes logo-orbit-b {
+  from { transform: scaleY(0.25) rotate(-20deg); }
+  to   { transform: scaleY(0.25) rotate(340deg); }
+}
+
+.topbar-right {
+  margin-left: auto;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  font-size: 12px;
+  color: var(--muted);
+}
+.topbar-right .user { color: var(--mid); font-size: 11px; }
+.topbar-right .logout { color: var(--muted); cursor: pointer; transition: color 0.12s; font-size: 11px; }
+.topbar-right .logout:hover { color: var(--red); }
+
+/* Search trigger */
+.search-trigger {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 5px 10px;
+  background: var(--hover-bg);
+  border: 1px solid var(--line);
+  border-radius: var(--radius);
+  font-size: 11px;
+  color: var(--muted);
+  cursor: pointer;
+  transition: border-color 0.15s, color 0.15s;
+  font-family: var(--mono);
+}
+.search-trigger:hover { border-color: var(--accent); color: var(--text); }
+.search-trigger kbd { font-family: var(--mono); font-size: 9px; opacity: 0.6; }
+
+/* Scheme toggle button */
+.scheme-toggle {
+  width: 30px;
+  height: 30px;
+  border: 1px solid var(--line);
+  border-radius: var(--radius);
+  background: var(--hover-bg);
+  color: var(--muted);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 13px;
+  transition: border-color 0.15s, color 0.15s, background 0.15s;
+  flex-shrink: 0;
+}
+.scheme-toggle:hover { border-color: var(--accent); color: var(--heading); }
+
+/* ── Sidebar ─────────────────────────────────────── */
+.nav-section { font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); padding: 0 20px; margin: 20px 0 4px; font-weight: 500; }
+.nav-section:first-child { margin-top: 0; }
+.nav-item { display: flex; align-items: center; gap: 10px; padding: 7px 12px; font-size: 13px; color: var(--mid); cursor: pointer; position: relative; transition: color 0.12s, background 0.15s, box-shadow 0.15s; border: none; background: none; margin: 1px 8px; text-align: left; text-decoration: none; border-radius: 8px; }
+.nav-label { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
+.nav-item:hover { color: var(--heading); background: var(--hover-bg); }
+.nav-item.active { color: var(--accent); background: var(--accent-bg); }
+.nav-item.active::before { display: none; }
+.nav-icon { width: 14px; text-align: center; font-size: 11px; opacity: 0.45; flex-shrink: 0; }
+.nav-badge { margin-left: 4px; flex-shrink: 0; font-size: 10px; color: var(--muted); background: var(--bg3); border: 1px solid var(--line); padding: 1px 7px; border-radius: 3px; }
+.nav-children { border-left: 1px solid var(--line); margin-left: 26px; margin-bottom: 4px; }
+.nav-child { padding-left: 20px; font-size: 12px; }
+.nav-child .nav-icon { font-size: 7px; opacity: 0.3; }
+.sidebar-footer { margin-top: auto; padding: 14px 18px; border-top: 1px solid var(--line); font-size: 11px; color: var(--muted); }
+.pod-name { color: var(--text); font-size: 12px; font-weight: 500; margin-bottom: 3px; display: flex; align-items: center; gap: 5px; }
+.pod-name::before { content: "◆"; font-size: 6px; color: var(--gold); }
+.pod-info { font-size: 10px; color: var(--muted); margin-bottom: 6px; }
+.pod-status { display: flex; align-items: center; margin-top: 8px; }
+.pod-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--jade); margin-right: 5px; flex-shrink: 0; animation: pulse 2.5s ease-in-out infinite; }
+@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.3} }
+
+/* ── Page header ─────────────────────────────────── */
+.page-header { margin-bottom: 28px; padding: 0; }
+.entries-filter-bar { margin-bottom: 16px; }
+.page-title { font-family: var(--display); font-weight: 500; font-size: 20px; color: var(--heading); letter-spacing: 0.04em; }
+.page-sub { font-size: 11px; color: var(--muted); margin-top: 4px; font-family: var(--mono); }
+
+/* ── Cards / Stats ───────────────────────────────── */
+.stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; margin-bottom: 28px; }
+.stat-card { background: var(--bg2); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 20px; }
+.stat-label { font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
+.stat-value { font-size: 26px; font-family: var(--mono); color: var(--heading); line-height: 1; }
+.stat-sub { font-size: 10px; color: var(--muted); margin-top: 6px; }
+
+/* ── Table ───────────────────────────────────────── */
+.table-wrap { background: var(--bg2); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
+.table-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 20px; border-bottom: 1px solid var(--line); }
+.table-title { font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--mid); }
+table { width: 100%; border-collapse: collapse; }
+th { font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); font-weight: 500; padding: 9px 20px; text-align: left; border-bottom: 1px solid var(--line); background: var(--bg2); }
+td { padding: 10px 20px; font-size: 12px; color: var(--text); border-bottom: 1px solid var(--td-line); }
+tr:last-child td { border-bottom: none; }
+tr:hover td { background: var(--row-hover); }
+.badge { display: inline-block; font-size: 10px; font-family: var(--mono); padding: 2px 7px; border-radius: 2px; letter-spacing: 0.04em; }
+.badge-published { background: var(--jade-bg); color: var(--jade); }
+.badge-draft     { background: var(--gold-bg);  color: var(--gold); }
+
+/* ── Buttons ─────────────────────────────────────── */
+.btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; font-size: 12px; font-family: var(--sans); border-radius: var(--radius); cursor: pointer; transition: all 0.12s; border: 1px solid transparent; font-weight: 400; letter-spacing: 0.01em; }
+.btn-primary { background: var(--accent); color: #fff; border-color: var(--accent); }
+.btn-primary:hover { opacity: 0.88; }
+.btn-primary:disabled { opacity: 0.45; cursor: not-allowed; }
+.btn-ghost { background: none; color: var(--mid); border-color: var(--line); }
+.btn-ghost:hover { color: var(--heading); border-color: var(--mid); background: var(--hover-bg); }
+.btn-ghost:disabled { opacity: 0.4; cursor: not-allowed; }
+.btn-ghost.active { color: var(--accent); border-color: var(--accent); background: var(--accent-bg); }
+.btn-danger { background: none; color: var(--red); border-color: var(--red-bg); }
+.btn-danger:hover { background: var(--red-bg); border-color: var(--red); }
+.btn-sm { padding: 3px 10px; font-size: 11px; }
+/* Primary action button — used in settings and other forms */
+.btn-save { padding: 7px 20px; background: var(--gold); border: 1px solid var(--gold); color: var(--bg0); font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; transition: background 0.15s, color 0.15s, border-color 0.15s, box-shadow 0.15s; border-radius: 6px; }
+.btn-save:hover { background: transparent; color: var(--gold); border-color: var(--gold); box-shadow: 0 0 0 2px var(--gold-bg); }
+.btn-save:disabled { opacity: 0.4; cursor: not-allowed; }
+
+/* ── Form fields ─────────────────────────────────── */
+.field { margin-bottom: 16px; }
+.label { display: block; font-size: 11px; color: var(--mid); margin-bottom: 6px; letter-spacing: 0.04em; }
+.input { width: 100%; background: var(--bg0); border: 1px solid var(--line); border-radius: var(--radius); padding: 7px 11px; color: var(--heading); font-family: var(--mono); font-size: 12px; outline: none; transition: border-color 0.15s, box-shadow 0.15s; }
+.input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-bg); }
+
+/* ── Login page ──────────────────────────────────── */
+.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--bg0); }
+.login-box { width: 340px; }
+
+/* Glass mode — let the body gradient show through, glass card */
+html[data-style="glass"] .login-wrap { background: transparent; }
+html[data-style="glass"] .login-card {
+  background: var(--glass-bg);
+  backdrop-filter: var(--glass-blur);
+  border-color: var(--glass-border);
+  box-shadow: var(--glass-shadow);
+}
+.login-logo { text-align: center; margin-bottom: 36px; }
+.login-mark {
+  width: 44px; height: 44px;
+  border: 1px solid var(--gold);
+  border-radius: 50%;
+  display: flex; align-items: center; justify-content: center;
+  position: relative; overflow: visible;
+  margin: 0 auto 20px;
+}
+.login-mark::before {
+  content: '';
+  position: absolute;
+  inset: -10px;
+  border-radius: 50%;
+  border: 1px solid var(--accent);
+  border-top-color: transparent;
+  border-bottom-color: transparent;
+  opacity: 0.65;
+  animation: logo-orbit-a 14s linear infinite;
+}
+.login-mark::after {
+  content: '';
+  position: absolute;
+  inset: -18px;
+  border-radius: 50%;
+  border: 1px solid var(--gold);
+  border-left-color: transparent;
+  border-right-color: transparent;
+  opacity: 0.25;
+  animation: logo-orbit-b 36s linear infinite reverse;
+}
+.login-logo-mark { font-family: var(--display); font-size: 24px; font-weight: 500; color: var(--heading); letter-spacing: 0.2em; }
+.login-logo-sub { font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--muted); margin-top: 6px; font-family: var(--mono); }
+.login-card { background: var(--bg2); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px 32px; }
+.login-card h2 { font-size: 13px; color: var(--heading); margin-bottom: 20px; font-weight: 500; }
+.login-error { background: var(--red-bg); border: 1px solid rgba(224,85,85,0.2); color: var(--red); font-size: 12px; padding: 8px 12px; border-radius: var(--radius); margin-bottom: 16px; display: none; }
+.login-error.visible { display: block; }
+
+/* ── Misc ────────────────────────────────────────── */
+.empty { padding: 48px; text-align: center; color: var(--muted); font-size: 12px; }
+.empty-icon { font-size: 22px; opacity: 0.3; margin-bottom: 10px; }
+.spinner { display: inline-block; width: 14px; height: 14px; border: 2px solid var(--line); border-top-color: var(--accent); border-radius: 50%; animation: spin 0.7s linear infinite; }
+@keyframes spin { to { transform: rotate(360deg); } }
+
+/* Scheme toggle icon labels (set in JS) */
+[data-scheme="dark"]  .scheme-toggle { color: var(--accent); }
+[data-scheme="light"] .scheme-toggle { color: var(--gold); }