@tekki-forge/runtime-admin 0.1.0

package/styles.css

@@ -0,0 +1,778 @@
+/*
+ * Forge UI styles. Import after Tailwind in the app's globals.css:
+ *   @import "tailwindcss";
+ *   @import "@tekki-forge/runtime-admin/styles.css";
+ *   @import "@app/generated/theme.css";   (brand colours from forge.config.ts)
+ *
+ * <html data-forge-style data-forge-mode data-forge-radius data-forge-layout data-forge-density data-forge-font> selects the look.
+ * Components carry `forge-*` hooks for everything visual (surface, border, shadow, radius);
+ * Tailwind utilities only handle layout and typography, so a style can restyle anything.
+ */
+
+/* ── Tokens exposed to Tailwind: bg-surface, text-ink, border-line, text-primary, … ───────────── */
+@theme inline {
+  --color-primary: var(--forge-primary);
+  --color-primary-foreground: var(--forge-primary-fg);
+  --color-accent: var(--forge-accent);
+  --color-accent-foreground: var(--forge-accent-fg);
+  --color-danger: var(--forge-danger);
+  --color-canvas: var(--forge-canvas);
+  --color-surface: var(--forge-surface);
+  --color-surface-muted: var(--forge-surface-muted);
+  --color-line: var(--forge-line);
+  --color-ink: var(--forge-ink);
+  --color-ink-muted: var(--forge-ink-muted);
+  --color-ink-subtle: var(--forge-ink-subtle);
+  --color-hover: var(--forge-hover);
+  --color-selected: var(--forge-selected);
+  --color-link: var(--forge-link);
+}
+
+/* ── Base palette (brand defaults are overridden by the generated theme.css) ──────────────────── */
+/* In @layer base so each style (in @layer components) can override tokens; the generated theme.css is unlayered and wins for brand colours. */
+@layer base {
+  :root {
+    --forge-primary: #4f46e5;
+    --forge-primary-fg: #ffffff;
+    --forge-accent: #f59e0b;
+    --forge-accent-fg: #111827;
+    --forge-danger: #dc2626;
+    --forge-danger-fg: #ffffff;
+    --forge-success: light-dark(#059669, #34d399);
+    --forge-info: light-dark(#0284c7, #38bdf8);
+
+    color-scheme: light;
+    --forge-canvas: light-dark(color-mix(in oklab, var(--forge-primary) 2%, #f7f7f9), color-mix(in oklab, var(--forge-primary) 4%, #0c0c10));
+    --forge-surface: light-dark(#ffffff, #16161c);
+    --forge-surface-muted: light-dark(color-mix(in oklab, var(--forge-primary) 2%, #f3f3f6), color-mix(in oklab, var(--forge-primary) 3%, #111116));
+    --forge-line: light-dark(#e5e5ea, rgb(255 255 255 / 0.09));
+    --forge-line-strong: light-dark(#d4d4dc, rgb(255 255 255 / 0.16));
+    --forge-ink: light-dark(#18181b, #f4f4f5);
+    --forge-ink-muted: light-dark(#52525b, #a1a1aa);
+    --forge-ink-subtle: light-dark(#a1a1aa, #71717a);
+    --forge-hover: light-dark(rgb(24 24 27 / 0.05), rgb(255 255 255 / 0.06));
+    --forge-selected: color-mix(in oklab, var(--forge-primary) 13%, transparent);
+    --forge-link: light-dark(var(--forge-primary), color-mix(in oklab, var(--forge-primary) 60%, white));
+    --forge-overlay: rgb(9 9 11 / 0.45);
+    --forge-focus: color-mix(in oklab, var(--forge-primary) 35%, transparent);
+
+    --forge-card-shadow: 0 1px 2px rgb(0 0 0 / 0.04);
+    --forge-card-shadow-hover: 0 2px 4px rgb(0 0 0 / 0.04), 0 12px 28px -12px rgb(0 0 0 / 0.22);
+    --forge-radius: 10px;
+    --forge-radius-control: 7px;
+    /* Focus ring: each style may restyle it. */
+    --forge-ring: 2px solid var(--forge-primary);
+    --forge-ring-offset: 2px;
+
+    /* Typography: the generated theme.css sets both when theme.font isn't "system". */
+    --forge-font-body: var(--font-sans, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif);
+    --forge-font-display: var(--forge-font-body);
+
+    /* Density (comfortable). */
+    --forge-control-h: 2.25rem;
+    --forge-control-y: 0.5rem;
+    --forge-cell-y: 0.625rem;
+    --forge-cell-x: 1rem;
+    --forge-pad-card: 1.25rem;
+    --forge-pad-card-lg: 1.5rem;
+    --forge-gap-form: 1.25rem;
+    --forge-main-y: 2rem;
+
+    --forge-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
+  }
+  :root[data-forge-density="compact"] {
+    --forge-control-h: 2rem;
+    --forge-control-y: 0.3125rem;
+    --forge-cell-y: 0.375rem;
+    --forge-cell-x: 0.75rem;
+    --forge-pad-card: 0.875rem;
+    --forge-pad-card-lg: 1rem;
+    --forge-gap-form: 0.875rem;
+    --forge-main-y: 1.25rem;
+  }
+  body { font-family: var(--forge-font-body); }
+  :root[data-forge-style="terminal"] { color-scheme: dark; }
+  :root[data-forge-style="terminal"][data-forge-mode="light"] { color-scheme: light; }
+  :root[data-forge-style="terminal"][data-forge-mode="system"] { color-scheme: light dark; }
+  :root[data-forge-mode="dark"] { color-scheme: dark; }
+  :root[data-forge-mode="system"] { color-scheme: light dark; }
+
+  :root[data-forge-radius="none"] { --forge-radius: 0px; --forge-radius-control: 0px; }
+  :root[data-forge-radius="small"] { --forge-radius: 6px; --forge-radius-control: 4px; }
+  :root[data-forge-radius="medium"] { --forge-radius: 10px; --forge-radius-control: 7px; }
+  :root[data-forge-radius="large"] { --forge-radius: 18px; --forge-radius-control: 12px; }
+  :root[data-forge-radius="full"] { --forge-radius: 24px; --forge-radius-control: 999px; }
+}
+
+/* ── Structural component styles (the "simple" look) ──────────────────────────────────────────── */
+@layer components {
+  .forge-app-bg { background: var(--forge-canvas); color: var(--forge-ink); min-height: 100dvh; }
+  .forge-sidebar { background: var(--forge-surface-muted); border-right: 1px solid var(--forge-line); color: var(--forge-ink); }
+  .forge-topbar { background: var(--forge-surface); border-bottom: 1px solid var(--forge-line); }
+  .forge-card { background: var(--forge-surface); border: 1px solid var(--forge-line); border-radius: var(--forge-radius); box-shadow: var(--forge-card-shadow); }
+  .forge-card-flat { background: var(--forge-surface-muted); border-radius: calc(var(--forge-radius) - 2px); }
+  .forge-popover { background: var(--forge-surface); border: 1px solid var(--forge-line); border-radius: var(--forge-radius-control); box-shadow: 0 12px 32px -8px rgb(0 0 0 / 0.18); }
+  .forge-dialog { background: var(--forge-surface); border: 1px solid var(--forge-line); border-radius: calc(var(--forge-radius) + 2px); box-shadow: 0 24px 64px -12px rgb(0 0 0 / 0.3); }
+  .forge-overlay { background: var(--forge-overlay); }
+  .forge-logo { background: var(--forge-primary); color: var(--forge-primary-fg); border-radius: calc(var(--forge-radius-control) + 1px); }
+
+  .forge-btn {
+    border-radius: var(--forge-radius-control);
+    border: 1px solid transparent;
+    transition: background-color 120ms, box-shadow 120ms, color 120ms, transform 80ms;
+  }
+  .forge-btn:focus-visible, .forge-input:focus-visible, .forge-switch:focus-visible,
+  .forge-nav-item:focus-visible, .forge-focusable:focus-visible { outline: var(--forge-ring); outline-offset: var(--forge-ring-offset); }
+  .forge-btn:disabled { opacity: 0.55; cursor: not-allowed; }
+  .forge-btn-primary { background: var(--forge-primary); color: var(--forge-primary-fg); }
+  .forge-btn-primary:hover:not(:disabled) { background: color-mix(in oklab, var(--forge-primary) 88%, black); }
+  .forge-btn-secondary { background: var(--forge-surface); color: var(--forge-ink); border-color: var(--forge-line-strong); }
+  .forge-btn-secondary:hover:not(:disabled) { background: color-mix(in oklab, var(--forge-surface) 92%, var(--forge-ink)); }
+  .forge-btn-ghost { background: transparent; color: var(--forge-ink-muted); }
+  .forge-btn-ghost:hover:not(:disabled) { background: var(--forge-hover); color: var(--forge-ink); }
+  .forge-btn-ghost[aria-current="page"] { background: var(--forge-surface); color: var(--forge-ink); border-color: var(--forge-line-strong); }
+  .forge-btn-danger { background: var(--forge-danger); color: var(--forge-danger-fg); }
+  .forge-btn-danger:hover:not(:disabled) { background: color-mix(in oklab, var(--forge-danger) 88%, black); }
+  .forge-btn-danger-ghost { background: transparent; color: var(--forge-danger); }
+  .forge-btn-danger-ghost:hover:not(:disabled) { background: color-mix(in oklab, var(--forge-danger) 10%, transparent); }
+
+  .forge-input {
+    background: var(--forge-surface);
+    color: var(--forge-ink);
+    border: 1px solid var(--forge-line-strong);
+    border-radius: var(--forge-radius-control);
+    transition: border-color 120ms, box-shadow 120ms;
+  }
+  .forge-input::placeholder { color: var(--forge-ink-subtle); }
+  .forge-input:focus { outline: none; border-color: var(--forge-primary); box-shadow: 0 0 0 3px var(--forge-focus); }
+  .forge-input[aria-invalid="true"] { border-color: var(--forge-danger); }
+  .forge-input:disabled { opacity: 0.6; }
+  select.forge-input option { background: var(--forge-surface); color: var(--forge-ink); }
+  .forge-check { accent-color: var(--forge-primary); }
+
+  .forge-switch { background: var(--forge-line-strong); border-radius: 999px; transition: background-color 150ms; }
+  .forge-switch[aria-checked="true"] { background: var(--forge-primary); }
+  .forge-switch-thumb { background: #fff; border-radius: 999px; box-shadow: 0 1px 2px rgb(0 0 0 / 0.25); }
+
+  .forge-nav-item { color: var(--forge-ink-muted); border-radius: var(--forge-radius-control); transition: background-color 120ms, color 120ms; }
+  .forge-nav-item:hover { background: var(--forge-hover); color: var(--forge-ink); }
+  .forge-nav-item[aria-current="page"] { background: var(--forge-selected); color: var(--forge-ink); font-weight: 500; }
+  .forge-nav-item[aria-current="page"] svg { color: var(--forge-primary); }
+
+  .forge-table thead tr { color: var(--forge-ink-muted); border-bottom: 1px solid var(--forge-line); }
+  .forge-table tbody tr { border-top: 1px solid var(--forge-line); }
+  .forge-table tbody tr:first-child { border-top: 0; }
+  .forge-table tbody tr:hover { background: var(--forge-hover); }
+
+  .forge-badge {
+    --tone: var(--forge-ink-muted);
+    background: color-mix(in oklab, var(--tone) 13%, transparent);
+    color: color-mix(in oklab, var(--tone) 72%, var(--forge-ink));
+    box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--tone) 28%, transparent);
+    border-radius: min(var(--forge-radius-control), 999px);
+  }
+  .forge-alert {
+    --tone: var(--forge-info);
+    background: color-mix(in oklab, var(--tone) 10%, var(--forge-surface));
+    color: color-mix(in oklab, var(--tone) 65%, var(--forge-ink));
+    border: 1px solid color-mix(in oklab, var(--tone) 30%, transparent);
+    border-radius: var(--forge-radius-control);
+  }
+  .forge-alert[data-forge-alert="error"] { --tone: var(--forge-danger); }
+  .forge-alert[data-forge-alert="success"] { --tone: var(--forge-success); }
+
+  .forge-banner { background: color-mix(in oklab, var(--forge-accent) 22%, var(--forge-surface)); color: var(--forge-ink); }
+
+  /* Views: board, calendar, map; inline editing; command palette */
+  .forge-board-column { border-radius: var(--forge-radius); }
+  .forge-calendar-item { background: color-mix(in oklab, var(--forge-primary) 14%, var(--forge-surface)); color: color-mix(in oklab, var(--forge-primary) 70%, var(--forge-ink)); }
+  .forge-calendar-item:hover { background: color-mix(in oklab, var(--forge-primary) 24%, var(--forge-surface)); }
+  .forge-map { background: light-dark(#e8eef2, #1b1f24); border-radius: 0 0 var(--forge-radius) var(--forge-radius); }
+  :root[data-forge-mode="dark"] .forge-map-tiles { filter: brightness(0.72) contrast(1.1) saturate(0.8); }
+  @media (prefers-color-scheme: dark) { :root[data-forge-mode="system"] .forge-map-tiles { filter: brightness(0.72) contrast(1.1) saturate(0.8); } }
+  .forge-map-pin { color: var(--forge-primary); filter: drop-shadow(0 1px 1px rgb(0 0 0 / 0.35)); }
+  .forge-map-cluster { background: var(--forge-primary); color: var(--forge-primary-fg); box-shadow: 0 0 0 4px color-mix(in oklab, var(--forge-primary) 30%, transparent); }
+  .forge-map-control { background: var(--forge-surface); color: var(--forge-ink); border: 1px solid var(--forge-line); }
+  .forge-map-control:hover { background: var(--forge-hover); }
+  .forge-cell-editable { border-radius: var(--forge-radius-control); cursor: text; }
+  .forge-cell-editable:hover { box-shadow: inset 0 0 0 1px var(--forge-line-strong); }
+  .forge-cell-editable:focus-visible { outline: 2px solid var(--forge-primary); outline-offset: -2px; }
+  .forge-cell-error { box-shadow: inset 0 0 0 1px var(--forge-danger); }
+  .forge-palette-item[aria-selected="true"] { background: var(--forge-selected); color: var(--forge-ink); }
+}
+
+/* ── shadow: borderless cards on soft layered shadows ─────────────────────────────────────────── */
+@layer components {
+  [data-forge-style="shadow"] {
+    --forge-canvas: light-dark(color-mix(in oklab, var(--forge-primary) 3%, #f2f3f6), #0a0a0d);
+    --forge-card-shadow: 0 1px 2px light-dark(rgb(16 24 40 / 0.04), rgb(0 0 0 / 0.4)), 0 12px 32px -12px light-dark(rgb(16 24 40 / 0.16), rgb(0 0 0 / 0.7));
+  }
+  [data-forge-style="shadow"] .forge-card { border-color: transparent; }
+  [data-forge-style="shadow"] .forge-sidebar { background: var(--forge-surface); border-right-color: transparent; box-shadow: 1px 0 0 var(--forge-line), 8px 0 32px -16px rgb(0 0 0 / 0.12); }
+  [data-forge-style="shadow"] .forge-input { border-color: transparent; background: var(--forge-surface-muted); box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.06); }
+  [data-forge-style="shadow"] .forge-input:focus { background: var(--forge-surface); box-shadow: 0 0 0 3px var(--forge-focus), 0 4px 12px -4px rgb(0 0 0 / 0.15); }
+  [data-forge-style="shadow"] .forge-btn-primary { box-shadow: 0 8px 20px -8px color-mix(in oklab, var(--forge-primary) 70%, transparent); }
+  [data-forge-style="shadow"] .forge-btn-primary:hover:not(:disabled) { transform: translateY(-1px); }
+  [data-forge-style="shadow"] .forge-btn-secondary { border-color: transparent; box-shadow: 0 1px 2px rgb(0 0 0 / 0.06), 0 4px 12px -6px rgb(0 0 0 / 0.2); }
+  [data-forge-style="shadow"] .forge-nav-item[aria-current="page"] { background: var(--forge-surface); box-shadow: 0 4px 14px -6px rgb(0 0 0 / 0.2); }
+  [data-forge-style="shadow"] .forge-table thead tr { border-bottom-color: transparent; }
+}
+
+/* ── neumorphism: soft extruded surfaces the same colour as the page ──────────────────────────── */
+@layer components {
+  [data-forge-style="neumorphism"] {
+    --neu-base: light-dark(color-mix(in oklab, var(--forge-primary) 4%, #e6e9ef), color-mix(in oklab, var(--forge-primary) 5%, #262a31));
+    --neu-light: light-dark(rgb(255 255 255 / 0.9), rgb(255 255 255 / 0.05));
+    --neu-dark: light-dark(rgb(150 162 184 / 0.55), rgb(0 0 0 / 0.5));
+    --forge-canvas: var(--neu-base);
+    --forge-surface: var(--neu-base);
+    --forge-surface-muted: var(--neu-base);
+    --forge-line: light-dark(rgb(150 162 184 / 0.25), rgb(255 255 255 / 0.05));
+    --forge-ink-muted: light-dark(#4a5361, #aab1bd);
+    --forge-hover: light-dark(rgb(150 162 184 / 0.15), rgb(255 255 255 / 0.04));
+    --forge-card-shadow: 9px 9px 18px var(--neu-dark), -9px -9px 18px var(--neu-light);
+  }
+  [data-forge-style="neumorphism"] .forge-card { border-color: transparent; }
+  [data-forge-style="neumorphism"] .forge-sidebar { border-right-color: transparent; box-shadow: 6px 0 16px -6px var(--neu-dark); }
+  [data-forge-style="neumorphism"] .forge-topbar { background: var(--neu-base); border-bottom-color: transparent; box-shadow: 0 6px 16px -8px var(--neu-dark); }
+  [data-forge-style="neumorphism"] .forge-input,
+  [data-forge-style="neumorphism"] .forge-switch {
+    background: var(--neu-base);
+    border-color: transparent;
+    box-shadow: inset 4px 4px 8px var(--neu-dark), inset -4px -4px 8px var(--neu-light);
+  }
+  [data-forge-style="neumorphism"] .forge-input:focus { box-shadow: inset 4px 4px 8px var(--neu-dark), inset -4px -4px 8px var(--neu-light), 0 0 0 2px var(--forge-focus); }
+  [data-forge-style="neumorphism"] .forge-switch[aria-checked="true"] { background: var(--forge-primary); }
+  [data-forge-style="neumorphism"] .forge-btn-secondary,
+  [data-forge-style="neumorphism"] .forge-btn-ghost[aria-current="page"],
+  [data-forge-style="neumorphism"] .forge-nav-item[aria-current="page"] {
+    background: var(--neu-base);
+    border-color: transparent;
+    box-shadow: 5px 5px 10px var(--neu-dark), -5px -5px 10px var(--neu-light);
+  }
+  [data-forge-style="neumorphism"] .forge-btn-primary,
+  [data-forge-style="neumorphism"] .forge-btn-danger,
+  [data-forge-style="neumorphism"] .forge-logo { box-shadow: 5px 5px 10px var(--neu-dark), -5px -5px 10px var(--neu-light); }
+  [data-forge-style="neumorphism"] .forge-btn:active:not(:disabled) { box-shadow: inset 4px 4px 8px var(--neu-dark), inset -4px -4px 8px var(--neu-light); }
+  [data-forge-style="neumorphism"] .forge-nav-item[aria-current="page"] { color: var(--forge-primary); }
+  [data-forge-style="neumorphism"] .forge-popover,
+  [data-forge-style="neumorphism"] .forge-dialog { background: var(--neu-base); border-color: transparent; box-shadow: 12px 12px 28px var(--neu-dark), -12px -12px 28px var(--neu-light); }
+  [data-forge-style="neumorphism"] .forge-badge { box-shadow: 2px 2px 4px var(--neu-dark), -2px -2px 4px var(--neu-light); }
+}
+
+/* ── glassmorphism: frosted panels over a colourful backdrop ──────────────────────────────────── */
+@layer components {
+  [data-forge-style="glassmorphism"] {
+    --glass: light-dark(rgb(255 255 255 / 0.52), rgb(22 22 32 / 0.55));
+    --glass-strong: light-dark(rgb(255 255 255 / 0.72), rgb(22 22 32 / 0.78));
+    --glass-edge: light-dark(rgb(255 255 255 / 0.7), rgb(255 255 255 / 0.12));
+    --forge-surface: var(--glass);
+    --forge-surface-muted: var(--glass);
+    --forge-line: light-dark(rgb(255 255 255 / 0.55), rgb(255 255 255 / 0.1));
+    --forge-line-strong: light-dark(rgb(255 255 255 / 0.8), rgb(255 255 255 / 0.18));
+    --forge-hover: light-dark(rgb(255 255 255 / 0.4), rgb(255 255 255 / 0.07));
+    --forge-selected: light-dark(rgb(255 255 255 / 0.6), rgb(255 255 255 / 0.12));
+    --forge-ink-muted: light-dark(#3f3f46, #c4c4cc);
+    --forge-card-shadow: 0 8px 32px -8px light-dark(rgb(31 38 135 / 0.18), rgb(0 0 0 / 0.6));
+  }
+  [data-forge-style="glassmorphism"] .forge-app-bg,
+  :root[data-forge-style="glassmorphism"] body {
+    background:
+      radial-gradient(40rem 30rem at 12% 8%, color-mix(in oklab, var(--forge-primary) 55%, transparent), transparent 70%),
+      radial-gradient(36rem 28rem at 88% 18%, color-mix(in oklab, var(--forge-accent) 50%, transparent), transparent 70%),
+      radial-gradient(44rem 34rem at 55% 100%, color-mix(in oklab, var(--forge-primary) 35%, var(--forge-accent) 25%), transparent 70%),
+      light-dark(#eef0f8, #0b0b14);
+    background-attachment: fixed;
+  }
+  [data-forge-style="glassmorphism"] .forge-card,
+  [data-forge-style="glassmorphism"] .forge-sidebar,
+  [data-forge-style="glassmorphism"] .forge-topbar,
+  [data-forge-style="glassmorphism"] .forge-popover,
+  [data-forge-style="glassmorphism"] .forge-dialog {
+    background: var(--glass);
+    -webkit-backdrop-filter: blur(20px) saturate(170%);
+    backdrop-filter: blur(20px) saturate(170%);
+    border-color: var(--glass-edge);
+  }
+  [data-forge-style="glassmorphism"] .forge-sidebar { border-right: 1px solid var(--glass-edge); }
+  [data-forge-style="glassmorphism"] .forge-popover,
+  [data-forge-style="glassmorphism"] .forge-dialog { background: var(--glass-strong); }
+  [data-forge-style="glassmorphism"] .forge-input { background: light-dark(rgb(255 255 255 / 0.6), rgb(255 255 255 / 0.06)); border-color: var(--glass-edge); }
+  [data-forge-style="glassmorphism"] .forge-btn-secondary { background: light-dark(rgb(255 255 255 / 0.55), rgb(255 255 255 / 0.08)); border-color: var(--glass-edge); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
+  [data-forge-style="glassmorphism"] .forge-btn-primary { box-shadow: 0 8px 24px -8px color-mix(in oklab, var(--forge-primary) 80%, transparent), inset 0 1px 0 rgb(255 255 255 / 0.3); }
+  [data-forge-style="glassmorphism"] .forge-overlay { background: rgb(9 9 11 / 0.25); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
+}
+
+/* ── skeuomorphism: tactile gradients, bevels, paper and leather ──────────────────────────────── */
+@layer components {
+  [data-forge-style="skeuomorphism"] {
+    --skeu-paper-top: light-dark(#fffdf8, #2d2a26);
+    --skeu-paper-bottom: light-dark(#f6f2ea, #25221f);
+    --skeu-edge: light-dark(#d5cdbd, #45403a);
+    --skeu-highlight: light-dark(rgb(255 255 255 / 0.9), rgb(255 255 255 / 0.07));
+    --forge-canvas: light-dark(#ebe6dc, #1b1916);
+    --forge-surface: var(--skeu-paper-top);
+    --forge-line: light-dark(#e2dbcd, #3a3631);
+    --forge-line-strong: var(--skeu-edge);
+    --forge-ink: light-dark(#2b2620, #efe9df);
+    --forge-ink-muted: light-dark(#5e554a, #bfb6a8);
+    --forge-card-shadow: inset 0 1px 0 var(--skeu-highlight), 0 1px 1px rgb(0 0 0 / 0.12), 0 4px 10px -2px rgb(60 40 20 / 0.18);
+  }
+  [data-forge-style="skeuomorphism"] .forge-app-bg,
+  :root[data-forge-style="skeuomorphism"] body {
+    background-color: var(--forge-canvas);
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .06 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
+  }
+  [data-forge-style="skeuomorphism"] .forge-card,
+  [data-forge-style="skeuomorphism"] .forge-dialog,
+  [data-forge-style="skeuomorphism"] .forge-popover { background: linear-gradient(var(--skeu-paper-top), var(--skeu-paper-bottom)); border-color: var(--skeu-edge); }
+  /* Leather sidebar with stitching. */
+  [data-forge-style="skeuomorphism"] .forge-sidebar {
+    --forge-ink: #f3ede3;
+    --forge-ink-muted: #cfc4b3;
+    --forge-ink-subtle: #a2968a;
+    --forge-hover: rgb(255 255 255 / 0.08);
+    --forge-selected: rgb(255 255 255 / 0.14);
+    --forge-line: rgb(255 255 255 / 0.12);
+    background: linear-gradient(90deg, #4a3526, #3b2a1f);
+    border-right: 1px solid #22170f;
+    box-shadow: inset -1px 0 0 rgb(255 255 255 / 0.08), inset 0 0 0 5px transparent, inset -8px 0 0 -7px rgb(255 235 205 / 0.35);
+  }
+  [data-forge-style="skeuomorphism"] .forge-sidebar .forge-input { background: linear-gradient(#5a4231, #4a3526); color: #f3ede3; border-color: #22170f; box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.4); }
+  [data-forge-style="skeuomorphism"] .forge-sidebar .forge-nav-item[aria-current="page"] { box-shadow: inset 0 1px 3px rgb(0 0 0 / 0.45); background: rgb(0 0 0 / 0.22); }
+  [data-forge-style="skeuomorphism"] .forge-sidebar .forge-nav-item[aria-current="page"] svg { color: color-mix(in oklab, var(--forge-accent) 80%, white); }
+  [data-forge-style="skeuomorphism"] .forge-btn { text-shadow: 0 1px 0 rgb(255 255 255 / 0.4); }
+  [data-forge-style="skeuomorphism"] .forge-btn-primary,
+  [data-forge-style="skeuomorphism"] .forge-btn-danger,
+  [data-forge-style="skeuomorphism"] .forge-logo {
+    --b: var(--forge-primary);
+    background: linear-gradient(color-mix(in oklab, var(--b) 72%, white), var(--b) 55%, color-mix(in oklab, var(--b) 82%, black));
+    border-color: color-mix(in oklab, var(--b) 65%, black);
+    box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.35), 0 1px 2px rgb(0 0 0 / 0.3);
+    text-shadow: 0 -1px 0 rgb(0 0 0 / 0.3);
+  }
+  [data-forge-style="skeuomorphism"] .forge-btn-danger { --b: var(--forge-danger); }
+  [data-forge-style="skeuomorphism"] .forge-btn-secondary { background: linear-gradient(light-dark(#ffffff, #3a3631), light-dark(#e9e3d8, #2c2925)); border-color: var(--skeu-edge); box-shadow: inset 0 1px 0 var(--skeu-highlight), 0 1px 2px rgb(0 0 0 / 0.15); }
+  [data-forge-style="skeuomorphism"] .forge-btn:active:not(:disabled) { box-shadow: inset 0 2px 4px rgb(0 0 0 / 0.3); transform: translateY(1px); }
+  [data-forge-style="skeuomorphism"] .forge-input { background: light-dark(#fffefb, #221f1c); border-color: var(--skeu-edge); box-shadow: inset 0 2px 3px rgb(0 0 0 / 0.1), 0 1px 0 var(--skeu-highlight); }
+  [data-forge-style="skeuomorphism"] .forge-switch { box-shadow: inset 0 2px 4px rgb(0 0 0 / 0.3); }
+  [data-forge-style="skeuomorphism"] .forge-switch-thumb { background: linear-gradient(#fff, #ddd6ca); box-shadow: 0 1px 3px rgb(0 0 0 / 0.4); }
+  [data-forge-style="skeuomorphism"] .forge-table thead tr { background: linear-gradient(light-dark(#f7f3ec, #2f2b27), light-dark(#ece6db, #292622)); }
+}
+
+/* ── material: Material Design 3 — tonal surfaces, elevation, pill buttons ────────────────────── */
+@layer components {
+  [data-forge-style="material"] {
+    --md-container: light-dark(color-mix(in oklab, var(--forge-primary) 16%, #ffffff), color-mix(in oklab, var(--forge-primary) 32%, #1c1b20));
+    --forge-canvas: light-dark(color-mix(in oklab, var(--forge-primary) 5%, #fdfbff), color-mix(in oklab, var(--forge-primary) 8%, #121116));
+    --forge-surface: light-dark(color-mix(in oklab, var(--forge-primary) 3%, #fffbfe), color-mix(in oklab, var(--forge-primary) 10%, #1c1b20));
+    --forge-surface-muted: light-dark(color-mix(in oklab, var(--forge-primary) 8%, #f7f2fa), color-mix(in oklab, var(--forge-primary) 12%, #1d1b22));
+    --forge-selected: var(--md-container);
+    --forge-card-shadow: 0 1px 2px light-dark(rgb(0 0 0 / 0.12), rgb(0 0 0 / 0.5)), 0 2px 6px 2px light-dark(rgb(0 0 0 / 0.06), rgb(0 0 0 / 0.3));
+  }
+  [data-forge-style="material"] .forge-card { border-color: transparent; border-radius: max(var(--forge-radius), 12px); }
+  [data-forge-style="material"] .forge-sidebar { border-right-color: transparent; }
+  [data-forge-style="material"] .forge-topbar { background: var(--forge-surface-muted); border-bottom-color: transparent; }
+  [data-forge-style="material"] .forge-btn { border-radius: 999px; font-weight: 500; letter-spacing: 0.01em; }
+  [data-forge-style="material"] .forge-btn-primary:hover:not(:disabled) { background: var(--forge-primary); box-shadow: 0 1px 2px rgb(0 0 0 / 0.3), 0 1px 3px 1px rgb(0 0 0 / 0.15); }
+  [data-forge-style="material"] .forge-btn-secondary { background: transparent; color: var(--forge-link); border-color: color-mix(in oklab, var(--forge-ink) 35%, transparent); }
+  [data-forge-style="material"] .forge-btn-secondary:hover:not(:disabled) { background: color-mix(in oklab, var(--forge-primary) 8%, transparent); }
+  [data-forge-style="material"] .forge-btn-ghost { color: var(--forge-link); }
+  [data-forge-style="material"] .forge-nav-item { border-radius: 999px; }
+  [data-forge-style="material"] .forge-nav-item[aria-current="page"] { background: var(--md-container); font-weight: 600; }
+  /* Filled text fields. */
+  [data-forge-style="material"] .forge-input {
+    background: light-dark(color-mix(in oklab, var(--forge-primary) 6%, #ece6f0), color-mix(in oklab, var(--forge-primary) 10%, #2a2830));
+    border: 0;
+    border-bottom: 1px solid var(--forge-ink-muted);
+    border-radius: 6px 6px 0 0;
+  }
+  [data-forge-style="material"] .forge-input:focus { box-shadow: inset 0 -2px 0 var(--forge-primary); border-bottom-color: var(--forge-primary); }
+  [data-forge-style="material"] .forge-dialog { border-radius: 28px; border-color: transparent; background: var(--forge-surface-muted); }
+  [data-forge-style="material"] .forge-popover { border-color: transparent; border-radius: 4px; box-shadow: 0 2px 6px 2px rgb(0 0 0 / 0.15), 0 1px 2px rgb(0 0 0 / 0.3); }
+  [data-forge-style="material"] .forge-badge { border-radius: 8px; box-shadow: none; }
+  [data-forge-style="material"] .forge-switch { height: 1.75rem; }
+}
+
+/* ── Shared polish: headings, forms, cards, chips, skeletons, toasts, brand panel ─────────────── */
+@layer components {
+  .forge-heading { font-family: var(--forge-font-display); }
+  .forge-form { background: var(--forge-surface); padding: var(--forge-pad-card-lg); display: flex; flex-direction: column; gap: var(--forge-gap-form); }
+  .forge-card-interactive { transition: transform 180ms var(--forge-ease), box-shadow 180ms var(--forge-ease); }
+  .forge-card-interactive:hover, .forge-focusable:focus-visible .forge-card-interactive { transform: translateY(-2px); box-shadow: var(--forge-card-shadow-hover); }
+  .forge-chip {
+    color: var(--forge-link);
+    background: color-mix(in oklab, var(--forge-primary) 13%, transparent);
+    box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--forge-primary) 22%, transparent);
+    border-radius: calc(var(--forge-radius-control) + 2px);
+  }
+  .forge-metric { position: relative; overflow: hidden; }
+  .forge-metric::after {
+    content: "";
+    position: absolute;
+    inset: auto -30% -60% auto;
+    width: 60%;
+    aspect-ratio: 1;
+    border-radius: 999px;
+    background: radial-gradient(closest-side, color-mix(in oklab, var(--forge-accent) 16%, transparent), transparent);
+    pointer-events: none;
+  }
+  .forge-avatar { background: color-mix(in oklab, var(--forge-primary) 16%, var(--forge-surface)); color: var(--forge-ink); border-radius: 999px; }
+  .forge-logo-image { border-radius: calc(var(--forge-radius-control) + 1px); }
+  .forge-illustration { width: 7.5rem; height: auto; }
+
+  .forge-skeleton {
+    background: color-mix(in oklab, var(--forge-ink) 9%, transparent);
+    border-radius: calc(var(--forge-radius-control) - 2px);
+    animation: forge-pulse 1.6s ease-in-out infinite;
+  }
+  .forge-toast {
+    background: var(--forge-surface);
+    color: var(--forge-ink);
+    border: 1px solid var(--forge-line);
+    border-radius: var(--forge-radius-control);
+    box-shadow: 0 16px 40px -12px rgb(0 0 0 / 0.3);
+    animation: forge-toast-in 220ms var(--forge-ease);
+  }
+  .forge-toast[data-forge-toast="success"] .forge-toast-icon { color: var(--forge-success); }
+  .forge-toast[data-forge-toast="error"] { border-color: color-mix(in oklab, var(--forge-danger) 45%, var(--forge-line)); }
+  .forge-toast[data-forge-toast="error"] .forge-toast-icon { color: var(--forge-danger); }
+  .forge-toast[data-forge-toast="info"] .forge-toast-icon { color: var(--forge-info); }
+
+  .forge-enter { animation: forge-enter 320ms var(--forge-ease) both; }
+  .forge-pop { animation: forge-enter 160ms var(--forge-ease) both; }
+  .forge-stagger > * { animation: forge-enter 360ms var(--forge-ease) both; }
+  .forge-stagger > :nth-child(2) { animation-delay: 40ms; }
+  .forge-stagger > :nth-child(3) { animation-delay: 80ms; }
+  .forge-stagger > :nth-child(4) { animation-delay: 120ms; }
+  .forge-stagger > :nth-child(n + 5) { animation-delay: 160ms; }
+  .forge-drawer { animation: forge-drawer-in 200ms var(--forge-ease); }
+
+  .forge-skip-link {
+    position: fixed; top: 0.5rem; left: 0.5rem; z-index: 70;
+    padding: 0.5rem 0.875rem; border-radius: var(--forge-radius-control);
+    background: var(--forge-primary); color: var(--forge-primary-fg); font-size: 0.875rem; font-weight: 500;
+    transform: translateY(-200%);
+  }
+  .forge-skip-link:focus { transform: none; outline: var(--forge-ring); outline-offset: 2px; }
+
+  .forge-topnav-links { scrollbar-width: none; }
+  .forge-topnav-links::-webkit-scrollbar { display: none; }
+
+  /* Compact icon rail: icons with tooltips while collapsed; its toggle expands it into a full sidebar. */
+  .forge-rail { transition: width 180ms var(--forge-ease); }
+  .forge-rail-offset { transition: padding-left 180ms var(--forge-ease); }
+  .forge-rail .forge-nav-label, .forge-rail .forge-rail-extra { transition: opacity 140ms; }
+  /* Labels stay in the accessibility tree (they name the links); only their pixels are hidden. */
+  .forge-rail:not([data-expanded="true"]) .forge-nav-label { opacity: 0; }
+  .forge-rail:not([data-expanded="true"]) .forge-rail-extra { opacity: 0; visibility: hidden; }
+
+  /* Tooltip beside the rail. The anchor's left padding bridges the gap so the pointer can move onto it. */
+  .forge-tooltip-anchor { position: fixed; z-index: 60; transform: translateY(-50%); padding-left: 0.5rem; display: flex; }
+  .forge-tooltip {
+    background: var(--forge-ink);
+    color: var(--forge-surface);
+    border-radius: var(--forge-radius-control);
+    box-shadow: 0 8px 24px -8px rgb(0 0 0 / 0.3);
+    font-size: 0.75rem;
+    line-height: 1rem;
+    font-weight: 500;
+    padding: 0.375rem 0.625rem;
+    max-width: 16rem;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    animation: forge-tooltip-in 120ms var(--forge-ease);
+  }
+
+  /* Auth brand panel: gradient mesh from the brand colours, kept dark enough for white text (AA). */
+  .forge-auth-brand {
+    color: #ffffff;
+    background:
+      linear-gradient(to top, rgb(0 0 0 / 0.5), transparent 55%),
+      radial-gradient(38rem 30rem at var(--mesh-a-x, 15%) var(--mesh-a-y, 10%), color-mix(in oklab, var(--forge-primary) 70%, transparent), transparent 70%),
+      radial-gradient(30rem 26rem at var(--mesh-b-x, 85%) var(--mesh-b-y, 30%), color-mix(in oklab, var(--forge-accent) 45%, transparent), transparent 70%),
+      radial-gradient(40rem 30rem at var(--mesh-c-x, 40%) 110%, color-mix(in oklab, var(--forge-primary) 55%, var(--forge-accent) 20%), transparent 70%),
+      color-mix(in oklab, var(--forge-primary) 38%, #0b0b12);
+  }
+  .forge-auth-copy { text-shadow: 0 1px 12px rgb(0 0 0 / 0.35); }
+  .forge-auth-mark.forge-logo { background: rgb(255 255 255 / 0.16); color: #fff; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.3); }
+  .forge-auth-brand .forge-heading { font-family: var(--forge-font-display); }
+}
+
+@keyframes forge-pulse { 50% { opacity: 0.5; } }
+@keyframes forge-tooltip-in { from { opacity: 0; transform: translateX(-4px); } }
+@keyframes forge-enter { from { opacity: 0; transform: translateY(6px); } }
+@keyframes forge-toast-in { from { opacity: 0; transform: translateY(-8px) scale(0.98); } }
+@keyframes forge-drawer-in { from { transform: translateX(-100%); } }
+@keyframes forge-aurora {
+  0% { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
+  50% { transform: translate3d(-4%, 3%, 0) rotate(8deg) scale(1.08); }
+  100% { transform: translate3d(3%, -2%, 0) rotate(-6deg) scale(1.02); }
+}
+
+/* ── brutalist: thick borders, hard offset shadows, bold type ─────────────────────────────────── */
+@layer components {
+  [data-forge-style="brutalist"] {
+    --brut-ink: light-dark(#0a0a0a, #f5f5f4);
+    --forge-canvas: light-dark(color-mix(in oklab, var(--forge-accent) 10%, #fffbeb), #121212);
+    --forge-surface: light-dark(#ffffff, #1c1c1c);
+    --forge-surface-muted: light-dark(color-mix(in oklab, var(--forge-accent) 16%, #fffdf5), #171717);
+    --forge-line: var(--brut-ink);
+    --forge-line-strong: var(--brut-ink);
+    --forge-ink: light-dark(#0a0a0a, #fafaf9);
+    --forge-ink-muted: light-dark(#262626, #d6d3d1);
+    --forge-ink-subtle: light-dark(#525252, #a8a29e);
+    --forge-hover: color-mix(in oklab, var(--forge-accent) 30%, transparent);
+    --forge-selected: var(--forge-accent);
+    --forge-card-shadow: 5px 5px 0 var(--brut-ink);
+    --forge-card-shadow-hover: 8px 8px 0 var(--brut-ink);
+    --forge-ring: 3px solid var(--brut-ink);
+    --forge-ring-offset: 3px;
+  }
+  [data-forge-style="brutalist"] .forge-card,
+  [data-forge-style="brutalist"] .forge-dialog,
+  [data-forge-style="brutalist"] .forge-popover,
+  [data-forge-style="brutalist"] .forge-toast { border: 2px solid var(--brut-ink); box-shadow: var(--forge-card-shadow); }
+  [data-forge-style="brutalist"] .forge-card-interactive:hover { transform: translate(-3px, -3px); }
+  [data-forge-style="brutalist"] .forge-sidebar { background: var(--forge-surface); border-right: 2px solid var(--brut-ink); }
+  [data-forge-style="brutalist"] .forge-topbar { border-bottom: 2px solid var(--brut-ink); }
+  [data-forge-style="brutalist"] .forge-heading { font-weight: 800; letter-spacing: -0.03em; }
+  [data-forge-style="brutalist"] .forge-btn { border: 2px solid var(--brut-ink); font-weight: 700; box-shadow: 3px 3px 0 var(--brut-ink); transition: transform 80ms, box-shadow 80ms, background-color 120ms; }
+  [data-forge-style="brutalist"] .forge-btn-ghost { border-color: transparent; box-shadow: none; }
+  [data-forge-style="brutalist"] .forge-btn:hover:not(:disabled) { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--brut-ink); }
+  [data-forge-style="brutalist"] .forge-btn-ghost:hover:not(:disabled) { box-shadow: none; transform: none; }
+  [data-forge-style="brutalist"] .forge-btn:active:not(:disabled) { transform: translate(3px, 3px); box-shadow: none; }
+  [data-forge-style="brutalist"] .forge-btn-primary:hover:not(:disabled) { background: var(--forge-primary); }
+  [data-forge-style="brutalist"] .forge-input { border: 2px solid var(--brut-ink); }
+  [data-forge-style="brutalist"] .forge-input:focus { box-shadow: 3px 3px 0 var(--forge-primary); border-color: var(--brut-ink); }
+  [data-forge-style="brutalist"] .forge-nav-item { font-weight: 600; border: 2px solid transparent; }
+  [data-forge-style="brutalist"] .forge-nav-item[aria-current="page"] { background: var(--forge-accent); color: var(--forge-accent-fg); border-color: var(--brut-ink); box-shadow: 3px 3px 0 var(--brut-ink); }
+  [data-forge-style="brutalist"] .forge-nav-item[aria-current="page"] svg { color: currentColor; }
+  [data-forge-style="brutalist"] .forge-table thead tr { background: var(--forge-accent); color: var(--forge-accent-fg); border-bottom: 2px solid var(--brut-ink); }
+  [data-forge-style="brutalist"] .forge-table tbody tr { border-top-width: 2px; }
+  [data-forge-style="brutalist"] .forge-badge { box-shadow: none; border: 1.5px solid var(--brut-ink); color: var(--forge-ink); background: color-mix(in oklab, var(--tone) 22%, var(--forge-surface)); }
+  [data-forge-style="brutalist"] .forge-chip { background: var(--forge-accent); color: var(--forge-accent-fg); box-shadow: 2px 2px 0 var(--brut-ink); border: 2px solid var(--brut-ink); }
+  [data-forge-style="brutalist"] .forge-logo { border: 2px solid var(--brut-ink); box-shadow: 2px 2px 0 var(--brut-ink); }
+  [data-forge-style="brutalist"] .forge-skeleton { background: color-mix(in oklab, var(--brut-ink) 14%, transparent); }
+  [data-forge-style="brutalist"] .forge-metric::after { display: none; }
+}
+
+/* ── editorial: paper tones, serif display, hairlines, generous whitespace ────────────────────── */
+@layer components {
+  [data-forge-style="editorial"] {
+    --forge-canvas: light-dark(#f7f4ee, #151412);
+    --forge-surface: light-dark(#fffdf9, #1c1a17);
+    --forge-surface-muted: light-dark(#f1ede4, #191714);
+    --forge-line: light-dark(#e4ddd0, rgb(255 255 255 / 0.1));
+    --forge-line-strong: light-dark(#cfc6b6, rgb(255 255 255 / 0.2));
+    --forge-ink: light-dark(#1f1b16, #ede7dd);
+    --forge-ink-muted: light-dark(#5b5347, #b3aa9c);
+    --forge-ink-subtle: light-dark(#736b5e, #9a9184);
+    --forge-hover: light-dark(rgb(31 27 22 / 0.045), rgb(255 255 255 / 0.05));
+    --forge-selected: transparent;
+    --forge-card-shadow: none;
+    --forge-card-shadow-hover: 0 1px 0 var(--forge-ink);
+    --forge-pad-card: 1.5rem;
+    --forge-pad-card-lg: 2rem;
+    --forge-main-y: 3rem;
+    --forge-ring: 1.5px solid var(--forge-ink);
+    --forge-ring-offset: 3px;
+  }
+  :root[data-forge-style="editorial"][data-forge-density="compact"] { --forge-pad-card: 1rem; --forge-pad-card-lg: 1.25rem; --forge-main-y: 1.75rem; }
+  [data-forge-style="editorial"] .forge-card { border-radius: min(var(--forge-radius), 6px); }
+  [data-forge-style="editorial"] .forge-sidebar { background: var(--forge-canvas); }
+  [data-forge-style="editorial"] .forge-topbar { background: var(--forge-canvas); border-bottom-color: var(--forge-ink); }
+  [data-forge-style="editorial"] .forge-heading { font-weight: 600; letter-spacing: -0.015em; }
+  [data-forge-style="editorial"] .forge-nav-item[aria-current="page"] { background: transparent; color: var(--forge-ink); font-weight: 600; box-shadow: inset 2px 0 0 var(--forge-primary); border-radius: 0; }
+  [data-forge-style="editorial"] .forge-topnav .forge-nav-item[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--forge-primary); }
+  [data-forge-style="editorial"] .forge-nav-item[aria-current="page"] svg { color: var(--forge-ink); }
+  [data-forge-style="editorial"] .forge-btn { letter-spacing: 0.01em; }
+  [data-forge-style="editorial"] .forge-btn-secondary { background: transparent; border-color: var(--forge-ink); }
+  [data-forge-style="editorial"] .forge-input { background: transparent; }
+  [data-forge-style="editorial"] .forge-table thead tr { border-bottom: 1px solid var(--forge-ink); letter-spacing: 0.08em; }
+  [data-forge-style="editorial"] .forge-chip { background: transparent; box-shadow: inset 0 0 0 1px var(--forge-line-strong); color: var(--forge-ink); border-radius: 999px; }
+  [data-forge-style="editorial"] .forge-metric::after { display: none; }
+  [data-forge-style="editorial"] .forge-metric-value { font-weight: 500; }
+  [data-forge-style="editorial"] .forge-badge { box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--tone) 40%, transparent); background: transparent; }
+}
+
+/* ── aurora: slowly drifting gradient mesh from the brand colours, glassy cards ───────────────── */
+@layer components {
+  [data-forge-style="aurora"] {
+    --aurora-glass: light-dark(rgb(255 255 255 / 0.66), rgb(18 18 30 / 0.62));
+    --aurora-edge: light-dark(rgb(255 255 255 / 0.75), rgb(255 255 255 / 0.1));
+    --forge-canvas: light-dark(#f3f3fb, #07070d);
+    --forge-surface: var(--aurora-glass);
+    --forge-surface-muted: light-dark(rgb(255 255 255 / 0.45), rgb(255 255 255 / 0.04));
+    --forge-line: light-dark(rgb(24 24 27 / 0.08), rgb(255 255 255 / 0.09));
+    --forge-line-strong: light-dark(rgb(24 24 27 / 0.16), rgb(255 255 255 / 0.18));
+    --forge-ink-muted: light-dark(#3f3f46, #c4c4d0);
+    --forge-ink-subtle: light-dark(#5b5b66, #9a9aac);
+    --forge-hover: light-dark(rgb(255 255 255 / 0.5), rgb(255 255 255 / 0.06));
+    --forge-selected: light-dark(rgb(255 255 255 / 0.75), rgb(255 255 255 / 0.1));
+    --forge-card-shadow: 0 10px 40px -16px light-dark(color-mix(in oklab, var(--forge-primary) 45%, transparent), rgb(0 0 0 / 0.7));
+    --forge-card-shadow-hover: 0 18px 50px -16px light-dark(color-mix(in oklab, var(--forge-primary) 55%, transparent), rgb(0 0 0 / 0.8));
+  }
+  [data-forge-style="aurora"] .forge-app-bg { position: relative; isolation: isolate; background: var(--forge-canvas); }
+  [data-forge-style="aurora"] .forge-app-bg::before {
+    content: "";
+    position: fixed;
+    inset: -20%;
+    z-index: -1;
+    pointer-events: none;
+    background:
+      radial-gradient(34% 40% at 20% 20%, color-mix(in oklab, var(--forge-primary) 55%, transparent), transparent 70%),
+      radial-gradient(30% 36% at 80% 25%, color-mix(in oklab, var(--forge-accent) 45%, transparent), transparent 70%),
+      radial-gradient(40% 40% at 60% 85%, color-mix(in oklab, var(--forge-primary) 35%, var(--forge-accent) 30%), transparent 70%);
+    filter: blur(40px) saturate(120%);
+    opacity: 0.6;
+    animation: forge-aurora 28s ease-in-out infinite alternate;
+    will-change: transform;
+  }
+  [data-forge-style="aurora"] .forge-card,
+  [data-forge-style="aurora"] .forge-sidebar,
+  [data-forge-style="aurora"] .forge-topbar,
+  [data-forge-style="aurora"] .forge-popover,
+  [data-forge-style="aurora"] .forge-dialog,
+  [data-forge-style="aurora"] .forge-toast {
+    background: var(--aurora-glass);
+    -webkit-backdrop-filter: blur(18px) saturate(160%);
+    backdrop-filter: blur(18px) saturate(160%);
+    border-color: var(--aurora-edge);
+  }
+  [data-forge-style="aurora"] .forge-popover,
+  [data-forge-style="aurora"] .forge-dialog { background: light-dark(rgb(255 255 255 / 0.86), rgb(18 18 30 / 0.88)); }
+  [data-forge-style="aurora"] .forge-sidebar { border-right-color: var(--aurora-edge); }
+  [data-forge-style="aurora"] .forge-btn-primary {
+    background: linear-gradient(135deg, var(--forge-primary), color-mix(in oklab, var(--forge-primary) 70%, var(--forge-accent)));
+    box-shadow: 0 8px 24px -10px var(--forge-primary), inset 0 1px 0 rgb(255 255 255 / 0.25);
+  }
+  [data-forge-style="aurora"] .forge-input { background: light-dark(rgb(255 255 255 / 0.7), rgb(255 255 255 / 0.05)); }
+  [data-forge-style="aurora"] .forge-chip { background: linear-gradient(135deg, color-mix(in oklab, var(--forge-primary) 22%, transparent), color-mix(in oklab, var(--forge-accent) 22%, transparent)); }
+}
+
+/* ── terminal: dark-first, monospace, phosphor accents (no scanlines, no flicker) ─────────────── */
+@layer components {
+  [data-forge-style="terminal"] {
+    --forge-canvas: light-dark(#f4f7f2, #070b08);
+    --forge-surface: light-dark(#ffffff, #0d140e);
+    --forge-surface-muted: light-dark(#eef3ec, #0a100b);
+    --forge-line: light-dark(#cfdccb, #1d3522);
+    --forge-line-strong: light-dark(#a9bfa4, #2c5233);
+    --forge-ink: light-dark(#0f2413, #d7f5dc);
+    --forge-ink-muted: light-dark(#35573b, #8fcf9a);
+    --forge-ink-subtle: light-dark(#4f7355, #6fae7a);
+    --forge-hover: light-dark(rgb(22 101 52 / 0.07), rgb(134 239 172 / 0.06));
+    --forge-selected: color-mix(in oklab, var(--forge-primary) 18%, transparent);
+    --forge-link: light-dark(color-mix(in oklab, var(--forge-primary) 80%, black), color-mix(in oklab, var(--forge-primary) 55%, white));
+    --forge-card-shadow: none;
+    --forge-card-shadow-hover: 0 0 0 1px var(--forge-primary), 0 0 24px -8px var(--forge-primary);
+    --forge-ring: 2px dashed var(--forge-link);
+    font-variant-ligatures: none;
+  }
+  [data-forge-style="terminal"] .forge-card { border-radius: 4px; }
+  [data-forge-style="terminal"] .forge-heading { letter-spacing: -0.02em; }
+  [data-forge-style="terminal"] h1.forge-heading::before { content: "> " / ""; color: var(--forge-link); }
+  [data-forge-style="terminal"] .forge-btn { text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.75rem; }
+  [data-forge-style="terminal"] .forge-btn-primary { box-shadow: 0 0 0 1px var(--forge-primary), 0 0 16px -6px var(--forge-primary); }
+  [data-forge-style="terminal"] .forge-btn-secondary { background: transparent; border-color: var(--forge-line-strong); }
+  [data-forge-style="terminal"] .forge-nav-item[aria-current="page"] { color: var(--forge-link); background: var(--forge-selected); box-shadow: inset 2px 0 0 var(--forge-link); }
+  [data-forge-style="terminal"] .forge-nav-item[aria-current="page"] svg { color: var(--forge-link); }
+  [data-forge-style="terminal"] .forge-input { background: var(--forge-surface-muted); caret-color: var(--forge-link); }
+  [data-forge-style="terminal"] .forge-table thead tr { color: var(--forge-link); }
+  [data-forge-style="terminal"] .forge-chip { background: transparent; box-shadow: inset 0 0 0 1px var(--forge-line-strong); border-radius: 3px; }
+  [data-forge-style="terminal"] .forge-metric::after { display: none; }
+  [data-forge-style="terminal"] .forge-metric-value { color: var(--forge-link); }
+  [data-forge-style="terminal"] .forge-logo { border-radius: 3px; }
+  [data-forge-style="terminal"] .forge-badge { border-radius: 3px; }
+}
+
+/* ── clay: claymorphism — puffy rounded surfaces, inner highlights ─────────────────────────────── */
+@layer components {
+  [data-forge-style="clay"] {
+    --clay-hi: light-dark(rgb(255 255 255 / 0.95), rgb(255 255 255 / 0.07));
+    --clay-lo: light-dark(color-mix(in oklab, var(--forge-primary) 12%, rgb(0 0 0 / 0.06)), rgb(0 0 0 / 0.45));
+    --forge-canvas: light-dark(color-mix(in oklab, var(--forge-primary) 6%, #f6f3fb), color-mix(in oklab, var(--forge-primary) 8%, #17151f));
+    --forge-surface: light-dark(#ffffff, color-mix(in oklab, var(--forge-primary) 6%, #24212e));
+    --forge-surface-muted: light-dark(color-mix(in oklab, var(--forge-primary) 5%, #f3eff9), color-mix(in oklab, var(--forge-primary) 7%, #1d1a26));
+    --forge-line: light-dark(color-mix(in oklab, var(--forge-primary) 10%, #ece7f3), rgb(255 255 255 / 0.07));
+    --forge-ink-muted: light-dark(#4b4658, #bbb5c9);
+    --forge-card-shadow: 0 18px 36px -14px light-dark(color-mix(in oklab, var(--forge-primary) 32%, transparent), rgb(0 0 0 / 0.65)), inset 0 -6px 12px var(--clay-lo), inset 0 4px 8px var(--clay-hi);
+    --forge-card-shadow-hover: 0 26px 44px -16px light-dark(color-mix(in oklab, var(--forge-primary) 40%, transparent), rgb(0 0 0 / 0.75)), inset 0 -6px 12px var(--clay-lo), inset 0 4px 8px var(--clay-hi);
+  }
+  [data-forge-style="clay"] .forge-card { border-color: transparent; border-radius: max(var(--forge-radius), 22px); }
+  [data-forge-style="clay"] .forge-dialog,
+  [data-forge-style="clay"] .forge-popover,
+  [data-forge-style="clay"] .forge-toast { border-color: transparent; border-radius: max(var(--forge-radius), 20px); box-shadow: var(--forge-card-shadow); }
+  [data-forge-style="clay"] .forge-sidebar { border-right-color: transparent; background: var(--forge-surface-muted); }
+  [data-forge-style="clay"] .forge-topbar { border-bottom-color: transparent; box-shadow: 0 10px 24px -18px var(--clay-lo); }
+  [data-forge-style="clay"] .forge-btn { border-radius: max(var(--forge-radius-control), 14px); font-weight: 600; }
+  [data-forge-style="clay"] .forge-btn-primary,
+  [data-forge-style="clay"] .forge-btn-danger { box-shadow: 0 10px 18px -8px color-mix(in oklab, var(--forge-primary) 70%, transparent), inset 0 -3px 6px rgb(0 0 0 / 0.18), inset 0 3px 6px rgb(255 255 255 / 0.35); }
+  [data-forge-style="clay"] .forge-btn-secondary { border-color: transparent; box-shadow: 0 6px 14px -8px var(--clay-lo), inset 0 -3px 6px var(--clay-lo), inset 0 3px 6px var(--clay-hi); }
+  [data-forge-style="clay"] .forge-btn:active:not(:disabled) { transform: scale(0.97); }
+  [data-forge-style="clay"] .forge-input { border-color: transparent; background: var(--forge-surface-muted); border-radius: max(var(--forge-radius-control), 12px); box-shadow: inset 0 3px 6px var(--clay-lo), inset 0 -2px 4px var(--clay-hi); }
+  [data-forge-style="clay"] .forge-input:focus { box-shadow: inset 0 3px 6px var(--clay-lo), 0 0 0 3px var(--forge-focus); }
+  [data-forge-style="clay"] .forge-nav-item { border-radius: max(var(--forge-radius-control), 12px); }
+  [data-forge-style="clay"] .forge-nav-item[aria-current="page"] { background: var(--forge-surface); box-shadow: 0 8px 16px -10px var(--clay-lo), inset 0 -3px 6px var(--clay-lo), inset 0 3px 6px var(--clay-hi); }
+  [data-forge-style="clay"] .forge-chip { border-radius: 14px; box-shadow: inset 0 -3px 6px color-mix(in oklab, var(--forge-primary) 20%, transparent), inset 0 3px 6px var(--clay-hi); }
+  [data-forge-style="clay"] .forge-logo { border-radius: 12px; box-shadow: inset 0 -3px 6px rgb(0 0 0 / 0.2), inset 0 3px 6px rgb(255 255 255 / 0.35); }
+  [data-forge-style="clay"] .forge-badge { border-radius: 999px; }
+}
+
+/* ── Overrides that must beat Tailwind utilities (same layer, higher specificity) ─────────────── */
+@layer utilities {
+  .forge-table :is(th, td).px-4 { padding-block: var(--forge-cell-y); }
+  :root[data-forge-density="compact"] .forge-table :is(th, td).px-4 { padding-inline: var(--forge-cell-x); }
+  :root[data-forge-density="compact"] .forge-nav-item { padding-block: 0.25rem; }
+  .forge-rail .forge-nav-item { padding-inline: 0.75rem; }
+  .forge-rail .forge-brand-row { padding-inline: 1.125rem; }
+  [data-forge-style="editorial"] h1.forge-heading { font-size: 1.875rem; line-height: 2.25rem; font-weight: 600; }
+  [data-forge-style="brutalist"] h1.forge-heading { font-size: 1.625rem; line-height: 2rem; }
+  [data-forge-style="terminal"] h1.forge-heading { font-size: 1.125rem; }
+}
+
+/* ── Motion: everything decorative stops for people who ask for less motion ───────────────────── */
+@media (prefers-reduced-motion: reduce) {
+  .forge-skeleton, .forge-toast, .forge-enter, .forge-pop, .forge-stagger > *, .forge-drawer, .forge-tooltip,
+  [data-forge-style="aurora"] .forge-app-bg::before { animation: none !important; }
+  .forge-card-interactive, .forge-rail, .forge-rail-offset, .forge-rail .forge-nav-label, .forge-rail .forge-rail-extra, .forge-btn, .forge-nav-item { transition: none !important; }
+  .forge-card-interactive:hover, .forge-focusable:focus-visible .forge-card-interactive,
+  [data-forge-style="brutalist"] .forge-btn:hover:not(:disabled), [data-forge-style="brutalist"] .forge-card-interactive:hover { transform: none; }
+}
+
+/* Top navigation: items keep their full label and the row scrolls when it overflows. */
+@layer components {
+  .forge-topnav-links { scrollbar-width: none; mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent); }
+  .forge-topnav-links::-webkit-scrollbar { display: none; }
+  .forge-topnav-links > * { flex-shrink: 0; white-space: nowrap; }
+  .forge-topnav-links > * * { overflow: visible; text-overflow: clip; }
+}
+
+/* Dashboard trends: good/bad tones mixed towards the ink colour so they stay readable (AA) on every style's surface. */
+@layer components {
+  .forge-trend { color: var(--forge-ink-muted); background: color-mix(in oklab, currentColor 10%, transparent); }
+  .forge-trend[data-forge-trend="good"] { color: color-mix(in oklab, light-dark(#059669, #34d399) 72%, var(--forge-ink)); }
+  .forge-trend[data-forge-trend="bad"] { color: color-mix(in oklab, light-dark(#dc2626, #f87171) 78%, var(--forge-ink)); }
+  [data-forge-style="terminal"] .forge-trend, [data-forge-style="brutalist"] .forge-trend { border-radius: 0; }
+}
+
+/* Landing page: the hero reuses the sign-in brand panel's mesh (.forge-auth-brand: white text on a dark mix, AA). */
+@layer components {
+  .forge-landing-hero { border-radius: calc(var(--forge-radius) * 1.5); isolation: isolate; }
+  .forge-landing-hero :focus-visible { outline: 2px solid #ffffff; outline-offset: 3px; }
+  .forge-landing-cta { background: #ffffff; color: color-mix(in oklab, var(--forge-primary) 35%, #0b0b12); box-shadow: 0 10px 30px -10px rgb(0 0 0 / 0.45); }
+  .forge-landing-cta:hover { background: rgb(255 255 255 / 0.9); }
+  .forge-landing-cta-secondary { background: rgb(255 255 255 / 0.08); color: #ffffff; border-color: rgb(255 255 255 / 0.45); }
+  .forge-landing-cta-secondary:hover { background: rgb(255 255 255 / 0.16); }
+  .forge-landing-window {
+    border-radius: var(--forge-radius);
+    background: rgb(255 255 255 / 0.1);
+    box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.22), 0 30px 60px -20px rgb(0 0 0 / 0.5);
+    backdrop-filter: blur(12px);
+  }
+  .forge-landing-window-row { border-radius: var(--forge-radius-control); background: rgb(255 255 255 / 0.08); }
+  [data-forge-style="brutalist"] .forge-landing-hero { border: 3px solid var(--brut-ink); box-shadow: 8px 8px 0 var(--brut-ink); }
+  [data-forge-style="terminal"] .forge-landing-hero { border: 1px solid var(--forge-line-strong); }
+}