<style>
/* Bundled locally — a default install makes zero external requests.
   The Supabase client is lazy-loaded from /vendor only when an account
   provider is actually configured (Settings → Accounts). */
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/inter-400.ttf') format('truetype')}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/inter-700.ttf') format('truetype')}
/* Only 400 and 700 ship; the browser matches 500→400 and 600/800→700 so no
   request ever 404s. Add files under /fonts before re-registering weights. */
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/jbmono-400.ttf') format('truetype')}
*{margin:0;padding:0;box-sizing:border-box}
:root{
  color-scheme:dark;
  /* Dark Liquid Glass — a true-black base with a restrained ambient field
     (see the Dark glass surfaces block at the end of styles-extra.css). The
     old Dark theme was pure #000 everywhere, which made it indistinguishable
     from OLED; now Dark is glass over black, OLED stays minimal flat black. */
  --bg:#050505;--bg2:rgba(255,255,255,.06);--bg3:rgba(255,255,255,.09);--bg4:rgba(255,255,255,.13);
  --text:#f4f4f6;--text2:#9b9ba6;--text3:#63636e;
  --accent:#9ca3af;--accent-strong:#f4f4f5;--accent-deep:#6b7280;
  --grad:#f4f4f5;
  --green:#22c55e;--blue:#3b82f6;--purple:#a855f7;--yellow:#f59e0b;--red:#dc2626;
  --amber:#f59e0b;--orange:#f97316;--violet:#8b5cf6;--cyan:#06b6d4;--teal:#14b8a6;--indigo:#6366f1;--pink:#ec4899;
  /* Tint family — the three alpha stops of every accent, tokenized.
     soft = tinted backgrounds (chips, icon tiles) · border = outline halos ·
     strong = dots, strokes, emphasis. ink = readable text ON a soft tint
     (light-300 on dark; the theme's saturated hue on light). Charts and
     canvas resolve these via _cvar(); never re-inline the rgba literals. */
  --amber-soft:rgba(245,158,11,.1);--amber-border:rgba(245,158,11,.35);--amber-strong:rgba(245,158,11,.7);--amber-ink:#fcd34d;
  --blue-soft:rgba(59,130,246,.12);--blue-border:rgba(59,130,246,.45);--blue-strong:rgba(59,130,246,.75);--blue-ink:#93c5fd;
  --green-soft:rgba(34,197,94,.13);--green-border:rgba(34,197,94,.4);--green-strong:rgba(34,197,94,.7);--green-ink:#86efac;
  --violet-soft:rgba(139,92,246,.08);--violet-border:rgba(139,92,246,.3);--violet-strong:rgba(139,92,246,.5);--violet-ink:#d8b4fe;
  --red-soft:rgba(239,68,68,.12);--red-border:rgba(239,68,68,.45);--red-strong:rgba(239,68,68,.7);--red-ink:#fca5a5;
  --purple-soft:rgba(168,85,247,.12);--purple-ink:#d8b4fe;
  --indigo-soft:rgba(99,102,241,.1);--cyan-soft:rgba(6,182,212,.1);
  --yellow-soft:rgba(251,191,36,.13);--yellow-strong:rgba(251,191,36,.8);--yellow-ink:#fcd34d;
  --slate-soft:rgba(148,163,184,.12);--slate-strong:rgba(148,163,184,.7);--slate-ink:#94a3b8;
  --on-accent:#ffffff;
  --border:rgba(255,255,255,.09);--border2:rgba(255,255,255,.16);
  --ring:rgba(161,161,170,.4);
  --radius:10px;--radius2:16px;
  --shadow:0 18px 48px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.05);
  --glow:0 0 0 1px rgba(161,161,170,.28),0 14px 40px rgba(161,161,170,.12);
  --font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
  --mono:'JetBrains Mono','Fira Code',ui-monospace,SFMono-Regular,monospace;
  /* semantic surfaces — dark glass defaults */
  --field:rgba(255,255,255,.055);--field-hover:rgba(255,255,255,.09);
  --hover:rgba(255,255,255,.06);--hover2:rgba(255,255,255,.11);
  --chip:rgba(255,255,255,.08);--chip2:rgba(255,255,255,.14);
  --shine:rgba(255,255,255,.04);--panel:rgba(255,255,255,.03);
  --scroll:rgba(255,255,255,.14);--scroll-hover:rgba(255,255,255,.24);
  --sel:rgba(161,161,170,.3);--focus:rgba(161,161,170,.08);
  --skel-a:rgba(255,255,255,.05);--skel-b:rgba(255,255,255,.12);
  --active-text:#ffffff;--code:#dcdce2;
  --sidebar-bg:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02));
  --topbar-bg:rgba(255,255,255,.04);
  --modal-bg:linear-gradient(160deg,rgba(255,255,255,.11),rgba(255,255,255,.045));
  --menu-bg:rgba(255,255,255,.09);
  --avatar-bg:linear-gradient(135deg,rgba(255,255,255,.16),rgba(255,255,255,.06));
  --accent-ink:#0a0a0b;
  /* ── Bedrock Glass — the material engine (Levels 0-4) ────────────────
     Glass is a material, not a color. Every surface in the UI is built from
     these tokens; never scatter blur/tint/edge values by hand.
       L0 Environment · L1 Frost · L2 Core · L3 Dense · L4 Crystal         */
  --glass-l1-tint:rgba(255,255,255,.05); --glass-l1-tint2:rgba(255,255,255,.09);
  --glass-l1-blur:blur(14px) saturate(150%) brightness(1.03);
  --glass-l1-edge:inset 0 1px 0 rgba(255,255,255,.1);
  --glass-l1-shadow:0 4px 14px rgba(0,0,0,.18),0 1px 3px rgba(0,0,0,.12);
  --glass-l2-tint:rgba(255,255,255,.075); --glass-l2-tint2:rgba(255,255,255,.13);
  --glass-l2-blur:blur(28px) saturate(180%) brightness(1.04);
  --glass-l2-edge:inset 0 1px 0 rgba(255,255,255,.14);
  --glass-l2-shadow:0 18px 46px rgba(0,0,0,.4),0 2px 8px rgba(0,0,0,.16);
  --glass-l3-tint:rgba(255,255,255,.12); --glass-l3-tint2:rgba(255,255,255,.2);
  --glass-l3-blur:blur(44px) saturate(200%) brightness(1.05);
  --glass-l3-edge:inset 0 1px 0 rgba(255,255,255,.18);
  --glass-l3-shadow:0 28px 80px rgba(0,0,0,.5),0 8px 24px rgba(0,0,0,.22);
  --glass-l4-tint:rgba(255,255,255,.16); --glass-l4-tint2:rgba(255,255,255,.28);
  --glass-l4-blur:blur(60px) saturate(220%) brightness(1.06);
  --glass-l4-edge:inset 0 1px 0 rgba(255,255,255,.24),inset 0 0 0 1px rgba(255,255,255,.03);
  --glass-l4-shadow:0 40px 100px rgba(0,0,0,.55),0 10px 28px rgba(0,0,0,.26);
  /* Micro-texture: near-invisible grain so surfaces never read as flat.
     Applied as a fixed overlay by the surface block (dark + glass only). */
  --glass-noise: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='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.35'/%3E%3C/svg%3E");
  /* Legacy aliases — the rest of the stylesheet still resolves against these. */
  --glass-tint:var(--glass-l2-tint); --glass-tint2:var(--glass-l2-tint2);
  --edge-top:var(--glass-l2-edge); --edge-top-strong:inset 0 1px 0 rgba(255,255,255,.22);
  --blur-surface:var(--glass-l2-blur);
  --blur-elevated:var(--glass-l3-blur);
  --blur-floating:var(--glass-l4-blur);
}
html[data-theme="light"]{
  color-scheme:light;
  --bg:#f6f6f7;--bg2:#ffffff;--bg3:#f0f0f2;--bg4:#e6e6ea;
  --text:#18181b;--text2:#62626a;--text3:#9c9ca4;
  --accent:#52525b;--accent-strong:#71717a;--accent-deep:#3f3f46;
  --grad:#71717a;
  --green:#059669;--blue:#2563eb;--purple:#7c3aed;--yellow:#b45309;--red:#dc2626;--amber:#d97706;--orange:#ea580c;--violet:#7c3aed;--cyan:#0891b2;--teal:#0d9488;--indigo:#4f46e5;--pink:#db2777;
  /* Tint family — light-theme stops use the saturated hues above (a dark hue
     at low alpha stays visible on white where the dark-theme pastels vanish). */
  --amber-soft:rgba(217,119,6,.14);--amber-border:rgba(217,119,6,.4);--amber-strong:rgba(217,119,6,.75);--amber-ink:#b45309;
  --blue-soft:rgba(37,99,235,.12);--blue-border:rgba(37,99,235,.4);--blue-strong:rgba(37,99,235,.75);--blue-ink:#2563eb;
  --green-soft:rgba(5,150,105,.12);--green-border:rgba(5,150,105,.4);--green-strong:rgba(5,150,105,.7);--green-ink:#059669;
  --violet-soft:rgba(124,58,237,.1);--violet-border:rgba(124,58,237,.35);--violet-strong:rgba(124,58,237,.55);--violet-ink:#7c3aed;
  --red-soft:rgba(220,38,38,.1);--red-border:rgba(220,38,38,.4);--red-strong:rgba(220,38,38,.7);--red-ink:#dc2626;
  --purple-soft:rgba(124,58,237,.12);--purple-ink:#7c3aed;
  --indigo-soft:rgba(79,70,229,.12);--cyan-soft:rgba(8,145,178,.12);
  --yellow-soft:rgba(217,119,6,.12);--yellow-strong:rgba(217,119,6,.8);--yellow-ink:#b45309;
  --slate-soft:rgba(100,116,139,.12);--slate-strong:rgba(100,116,139,.7);--slate-ink:#64748b;
  --on-accent:#ffffff;
  --border:rgba(0,0,0,.08);--border2:rgba(0,0,0,.14);
  --ring:rgba(82,82,91,.28);
  --shadow:0 8px 32px rgba(24,24,27,.12);
  --glow:0 0 0 1px rgba(82,82,91,.22),0 10px 32px rgba(82,82,91,.12);
  --field:rgba(0,0,0,.035);--field-hover:rgba(0,0,0,.055);
  --hover:rgba(0,0,0,.045);--hover2:rgba(0,0,0,.08);
  --chip:rgba(0,0,0,.06);--chip2:rgba(0,0,0,.1);
  --shine:rgba(255,255,255,.65);--panel:rgba(0,0,0,.02);
  --scroll:rgba(0,0,0,.15);--scroll-hover:rgba(0,0,0,.25);
  --sel:rgba(82,82,91,.22);--focus:rgba(82,82,91,.09);
  --skel-a:rgba(0,0,0,.04);--skel-b:rgba(0,0,0,.09);
  --active-text:#3f3f46;--code:#3f3f46;
  --sidebar-bg:linear-gradient(180deg,rgba(252,252,253,.98),rgba(245,245,247,.98));
  --topbar-bg:rgba(255,255,255,.8);
  --modal-bg:linear-gradient(180deg,#ffffff,#f7f7f9);
  --menu-bg:#ffffff;
  --avatar-bg:linear-gradient(135deg,#ececef,#dedee3);
  --accent-ink:#fff;
  /* ── Bedrock Glass — Light material levels (frosted white, architectural) ──
     Same engine as dark/glass: L0 environment below, L1-L4 surface levels.
     Light glass is brighter (higher white tint) with softer graphite shadows. */
  --glass-l1-tint:rgba(255,255,255,.5); --glass-l1-tint2:rgba(255,255,255,.72);
  --glass-l1-blur:blur(14px) saturate(160%) brightness(1.02);
  --glass-l1-edge:inset 0 1px 0 rgba(255,255,255,.9);
  --glass-l1-shadow:0 4px 14px rgba(24,24,27,.06),0 1px 3px rgba(24,24,27,.04);
  --glass-l2-tint:rgba(255,255,255,.6); --glass-l2-tint2:rgba(255,255,255,.82);
  --glass-l2-blur:blur(24px) saturate(180%) brightness(1.02);
  --glass-l2-edge:inset 0 1px 0 rgba(255,255,255,.95);
  --glass-l2-shadow:0 18px 46px rgba(24,24,27,.1),0 2px 8px rgba(24,24,27,.05);
  --glass-l3-tint:rgba(255,255,255,.8); --glass-l3-tint2:rgba(255,255,255,.94);
  --glass-l3-blur:blur(36px) saturate(200%) brightness(1.01);
  --glass-l3-edge:inset 0 1px 0 rgba(255,255,255,1);
  --glass-l3-shadow:0 28px 80px rgba(24,24,27,.16),0 8px 24px rgba(24,24,27,.08);
  --glass-l4-tint:rgba(255,255,255,.88); --glass-l4-tint2:rgba(255,255,255,.98);
  --glass-l4-blur:blur(44px) saturate(210%) brightness(1.01);
  --glass-l4-edge:inset 0 1px 0 rgba(255,255,255,1),inset 0 0 0 1px rgba(255,255,255,.6);
  --glass-l4-shadow:0 40px 100px rgba(24,24,27,.2),0 10px 28px rgba(24,24,27,.1);
  /* Legacy aliases resolve to the light levels */
  --glass-tint:var(--glass-l2-tint); --glass-tint2:var(--glass-l2-tint2);
  --edge-top:var(--glass-l2-edge); --edge-top-strong:inset 0 1px 0 rgba(255,255,255,1);
  --blur-surface:var(--glass-l2-blur); --blur-elevated:var(--glass-l3-blur); --blur-floating:var(--glass-l4-blur);
}
html[data-theme="oled"]{
  color-scheme:dark;
  /* True OLED black — pixels literally off. Every surface is pure black;
     borders are the only light. No surface tints, no glows, no shadows. */
  --bg:#000000;--bg2:#000000;--bg3:#000000;--bg4:#000000;
  --text:#f7f7f8;--text2:#a1a1aa;--text3:#6e6e79;
  --border:rgba(255,255,255,.08);--border2:rgba(255,255,255,.16);
  --ring:rgba(255,255,255,.28);
  --shadow:none;
  --glow:0 0 0 1px rgba(255,255,255,.06);
  --field:rgba(255,255,255,.03);--field-hover:rgba(255,255,255,.05);
  --hover:rgba(255,255,255,.04);--hover2:rgba(255,255,255,.08);
  --chip:rgba(255,255,255,.05);--chip2:rgba(255,255,255,.1);
  --shine:transparent;--panel:transparent;
  --scroll:rgba(255,255,255,.14);--scroll-hover:rgba(255,255,255,.24);
  --sel:rgba(255,255,255,.2);--focus:rgba(255,255,255,.05);
  --skel-a:rgba(255,255,255,.03);--skel-b:rgba(255,255,255,.08);
  --code:#e2e2e8;
  --sidebar-bg:#000000;
  --topbar-bg:rgba(0,0,0,.8);
  --modal-bg:#000000;
  --menu-bg:#000000;
  --avatar-bg:#000000;
  --glow-green:none;--glow-blue:none;--glow-proj:none;
}
html[data-theme="oled"] body{background:var(--bg)}
/* OLED: kill component glows — borders stay the only light source */
html[data-theme="oled"] .nav-item.active::before,
html[data-theme="oled"] .local-dot,
html[data-theme="oled"] .btn-primary,
html[data-theme="oled"] .btn-primary:hover,
html[data-theme="oled"] .card:hover,
html[data-theme="oled"] .kb-card:hover,
html[data-theme="oled"] .file-card:hover,
html[data-theme="oled"] .ai-msg.user,
html[data-theme="oled"] .cal-day.today .cal-day-num,
html[data-theme="oled"] .dock-item.active::after,
html[data-theme="oled"] .shell-win.focused,
html[data-theme="oled"] .boot-logo,
html[data-theme="oled"] .block-content:focus,
html[data-theme="oled"] .db-cell-input:focus{box-shadow:none!important}
html[data-theme="glass"]{
  color-scheme:dark;
  /* Bedrock Glass — smoked graphite environment, champagne signature accent,
     material levels 1-4 from the token engine in :root. */
  --bg:#0c0d12;--bg2:rgba(255,255,255,.06);--bg3:rgba(255,255,255,.1);--bg4:rgba(255,255,255,.15);
  --text:#f4f5f7;--text2:#a2a6b1;--text3:#6b707c;
  --border:rgba(255,255,255,.1);--border2:rgba(255,255,255,.19);
  --ring:rgba(216,180,110,.4);
  --radius:12px;--radius2:20px;
  --shadow:0 18px 48px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.08);
  --glow:0 0 0 1px rgba(216,180,110,.22),0 14px 44px rgba(216,180,110,.12);
  --field:rgba(255,255,255,.06);--field-hover:rgba(255,255,255,.1);
  --hover:rgba(255,255,255,.07);--hover2:rgba(255,255,255,.13);
  --chip:rgba(255,255,255,.09);--chip2:rgba(255,255,255,.16);
  --shine:rgba(255,255,255,.05);--panel:rgba(255,255,255,.03);
  --scroll:rgba(255,255,255,.15);--scroll-hover:rgba(255,255,255,.27);
  --skel-a:rgba(255,255,255,.06);--skel-b:rgba(255,255,255,.14);
  --code:#e8e9ee;
  --sidebar-bg:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02));
  --topbar-bg:rgba(255,255,255,.04);
  --modal-bg:linear-gradient(160deg,rgba(255,255,255,.13),rgba(255,255,255,.055));
  --menu-bg:rgba(255,255,255,.1);
  --avatar-bg:linear-gradient(135deg,rgba(255,255,255,.16),rgba(255,255,255,.06));
  /* Signature accent — restrained champagne. Signals focus/AI/active state
     without dominating; users can still pick any accent palette. */
  --accent:#d8b46e;--accent-strong:#e6c886;--accent-deep:#a8893f;
  --grad:#e6c886;--sel:rgba(216,180,110,.24);--focus:rgba(216,180,110,.09);
  --active-text:#f3e3bd;--accent-ink:#1c1506;
}
/* True-black preference — no ambient light, no glows, borders only (any theme) */
html[data-trueblack] body{background:var(--bg)}
html[data-trueblack] .shell-desktop{background:var(--bg)}
html[data-trueblack]{--shadow:none;--glow:0 0 0 1px rgba(255,255,255,.06);--shine:transparent;--panel:transparent;--glow-green:none;--glow-blue:none;--glow-proj:none}
html[data-trueblack] .nav-item.active::before,
html[data-trueblack] .local-dot,
html[data-trueblack] .btn-primary,
html[data-trueblack] .btn-primary:hover,
html[data-trueblack] .card:hover,
html[data-trueblack] .kb-card:hover,
html[data-trueblack] .file-card:hover,
html[data-trueblack] .ai-msg.user,
html[data-trueblack] .cal-day.today .cal-day-num,
html[data-trueblack] .dock-item.active::after,
html[data-trueblack] .shell-win.focused,
html[data-trueblack] .boot-logo,
html[data-trueblack] .block-content:focus,
html[data-trueblack] .db-cell-input:focus{box-shadow:none!important}
/* Glass theme under true-black: drop the frost and the ambient glow */
html[data-theme="glass"][data-trueblack]{
  --bg:#000000;--bg2:#0a0a0f;--bg3:#111118;--bg4:#181820;
  --sidebar-bg:#0a0a0f;--topbar-bg:rgba(5,5,8,.85);
  --modal-bg:linear-gradient(180deg,#101017,#07070c);
  --menu-bg:#0d0d13;--avatar-bg:linear-gradient(135deg,#181820,#0b0b10);
}
html[data-theme="glass"][data-trueblack] .sidebar,
html[data-theme="glass"][data-trueblack] .topbar,
html[data-theme="glass"][data-trueblack] .modal,
html[data-theme="glass"][data-trueblack] .search-box,
html[data-theme="glass"][data-trueblack] .chat-sidebar,
html[data-theme="glass"][data-trueblack] .cal-dh,
html[data-theme="glass"][data-trueblack] .cal-day,
html[data-theme="glass"][data-trueblack] .chat-input-row{backdrop-filter:none;-webkit-backdrop-filter:none}
html[data-theme="glass"][data-trueblack] body::before{display:none}
html[data-theme="glass"][data-trueblack] .bottom-nav,
html[data-theme="glass"][data-trueblack] .seg{backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none}
html[data-theme="glass"][data-trueblack] .sidebar{background:var(--sidebar-bg)}
html[data-theme="glass"][data-trueblack] .topbar{background:var(--topbar-bg)}
html[data-theme="glass"][data-trueblack] .modal,html[data-theme="glass"][data-trueblack] .search-box{background:var(--modal-bg)}
html[data-theme="glass"][data-trueblack] .chat-sidebar,html[data-theme="glass"][data-trueblack] .cal-dh,html[data-theme="glass"][data-trueblack] .cal-day,html[data-theme="glass"][data-trueblack] .chat-input-row{background:var(--bg2)}
html[data-theme="glass"][data-trueblack] .modal .btn-ghost,html[data-theme="glass"][data-trueblack] .search-box .btn-ghost{background:var(--bg4)}
html[data-theme="glass"][data-trueblack] .shell-desktop{background:var(--bg)}
html[data-theme="glass"][data-trueblack] body{background:var(--bg)}
/* ── Accent palettes — user-selectable, theme-aware ────────────────── */
html[data-accent="rosso"]{--accent:rgb(185,28,28);--accent-strong:rgb(198,69,69);--accent-deep:rgb(120,18,18);--grad:rgb(198,69,69);--ring:rgba(185,28,28,0.4);--glow:0 0 0 1px rgba(185,28,28,0.3),0 10px 32px rgba(185,28,28,0.15);--sel:rgba(185,28,28,0.32);--focus:rgba(185,28,28,0.08);--active-text:rgb(227,164,164);--accent-ink:#ffffff}
html[data-theme="light"][data-accent="rosso"]{--accent:rgb(120,18,18);--accent-strong:rgb(185,28,28);--accent-deep:rgb(144,22,22);--grad:rgb(185,28,28);--ring:rgba(120,18,18,0.3);--glow:0 0 0 1px rgba(120,18,18,0.22),0 10px 32px rgba(120,18,18,0.12);--sel:rgba(120,18,18,0.22);--focus:rgba(120,18,18,0.09);--active-text:rgb(144,22,22);--accent-ink:#fff}
html[data-theme="oled"][data-accent="rosso"]{--accent:rgb(193,55,55);--accent-strong:rgb(198,69,69);--accent-deep:rgb(120,18,18);--grad:rgb(198,69,69);--ring:rgba(185,28,28,0.5);--glow:0 0 0 1px rgba(185,28,28,0.4),0 0 20px rgba(185,28,28,0.35);--sel:rgba(185,28,28,0.3);--focus:rgba(185,28,28,0.12);--active-text:rgb(227,164,164);--accent-ink:#ffffff}
html[data-theme="glass"][data-accent="rosso"]{--accent:rgb(193,55,55);--accent-strong:rgb(198,69,69);--accent-deep:rgb(120,18,18);--grad:rgb(198,69,69);--ring:rgba(185,28,28,0.38);--glow:0 0 0 1px rgba(185,28,28,0.28),0 14px 40px rgba(185,28,28,0.22);--sel:rgba(185,28,28,0.26);--focus:rgba(185,28,28,0.1);--active-text:rgb(227,164,164);--accent-ink:#ffffff}
html[data-accent="graphite"]{--accent:rgb(139,143,152);--accent-strong:rgb(160,163,171);--accent-deep:rgb(90,93,99);--grad:rgb(160,163,171);--ring:rgba(139,143,152,0.4);--glow:0 0 0 1px rgba(139,143,152,0.3),0 10px 32px rgba(139,143,152,0.15);--sel:rgba(139,143,152,0.32);--focus:rgba(139,143,152,0.08);--active-text:rgb(209,210,214);--accent-ink:#0a0a0b}
html[data-theme="light"][data-accent="graphite"]{--accent:rgb(90,93,99);--accent-strong:rgb(139,143,152);--accent-deep:rgb(108,112,119);--grad:rgb(139,143,152);--ring:rgba(90,93,99,0.3);--glow:0 0 0 1px rgba(90,93,99,0.22),0 10px 32px rgba(90,93,99,0.12);--sel:rgba(90,93,99,0.22);--focus:rgba(90,93,99,0.09);--active-text:rgb(108,112,119);--accent-ink:#fff}
html[data-theme="oled"][data-accent="graphite"]{--accent:rgb(153,156,164);--accent-strong:rgb(160,163,171);--accent-deep:rgb(90,93,99);--grad:rgb(160,163,171);--ring:rgba(139,143,152,0.5);--glow:0 0 0 1px rgba(139,143,152,0.4),0 0 20px rgba(139,143,152,0.35);--sel:rgba(139,143,152,0.3);--focus:rgba(139,143,152,0.12);--active-text:rgb(209,210,214);--accent-ink:#0a0a0b}
html[data-theme="glass"][data-accent="graphite"]{--accent:rgb(153,156,164);--accent-strong:rgb(160,163,171);--accent-deep:rgb(90,93,99);--grad:rgb(160,163,171);--ring:rgba(139,143,152,0.38);--glow:0 0 0 1px rgba(139,143,152,0.28),0 14px 40px rgba(139,143,152,0.22);--sel:rgba(139,143,152,0.26);--focus:rgba(139,143,152,0.1);--active-text:rgb(209,210,214);--accent-ink:#0a0a0b}
html[data-accent="blue"]{--accent:rgb(51,153,255);--accent-strong:rgb(88,171,255);--accent-deep:rgb(33,99,166);--grad:rgb(88,171,255);--ring:rgba(51,153,255,0.4);--glow:0 0 0 1px rgba(51,153,255,0.3),0 10px 32px rgba(51,153,255,0.15);--sel:rgba(51,153,255,0.32);--focus:rgba(51,153,255,0.08);--active-text:rgb(173,214,255);--accent-ink:#ffffff}
html[data-theme="light"][data-accent="blue"]{--accent:rgb(33,99,166);--accent-strong:rgb(51,153,255);--accent-deep:rgb(40,119,199);--grad:rgb(51,153,255);--ring:rgba(33,99,166,0.3);--glow:0 0 0 1px rgba(33,99,166,0.22),0 10px 32px rgba(33,99,166,0.12);--sel:rgba(33,99,166,0.22);--focus:rgba(33,99,166,0.09);--active-text:rgb(40,119,199);--accent-ink:#fff}
html[data-theme="oled"][data-accent="blue"]{--accent:rgb(75,165,255);--accent-strong:rgb(88,171,255);--accent-deep:rgb(33,99,166);--grad:rgb(88,171,255);--ring:rgba(51,153,255,0.5);--glow:0 0 0 1px rgba(51,153,255,0.4),0 0 20px rgba(51,153,255,0.35);--sel:rgba(51,153,255,0.3);--focus:rgba(51,153,255,0.12);--active-text:rgb(173,214,255);--accent-ink:#ffffff}
html[data-theme="glass"][data-accent="blue"]{--accent:rgb(75,165,255);--accent-strong:rgb(88,171,255);--accent-deep:rgb(33,99,166);--grad:rgb(88,171,255);--ring:rgba(51,153,255,0.38);--glow:0 0 0 1px rgba(51,153,255,0.28),0 14px 40px rgba(51,153,255,0.22);--sel:rgba(51,153,255,0.26);--focus:rgba(51,153,255,0.1);--active-text:rgb(173,214,255);--accent-ink:#ffffff}
html[data-accent="violet"]{--accent:rgb(155,108,255);--accent-strong:rgb(173,134,255);--accent-deep:rgb(101,70,166);--grad:rgb(173,134,255);--ring:rgba(155,108,255,0.4);--glow:0 0 0 1px rgba(155,108,255,0.3),0 10px 32px rgba(155,108,255,0.15);--sel:rgba(155,108,255,0.32);--focus:rgba(155,108,255,0.08);--active-text:rgb(215,196,255);--accent-ink:#ffffff}
html[data-theme="light"][data-accent="violet"]{--accent:rgb(101,70,166);--accent-strong:rgb(155,108,255);--accent-deep:rgb(121,84,199);--grad:rgb(155,108,255);--ring:rgba(101,70,166,0.3);--glow:0 0 0 1px rgba(101,70,166,0.22),0 10px 32px rgba(101,70,166,0.12);--sel:rgba(101,70,166,0.22);--focus:rgba(101,70,166,0.09);--active-text:rgb(121,84,199);--accent-ink:#fff}
html[data-theme="oled"][data-accent="violet"]{--accent:rgb(167,126,255);--accent-strong:rgb(173,134,255);--accent-deep:rgb(101,70,166);--grad:rgb(173,134,255);--ring:rgba(155,108,255,0.5);--glow:0 0 0 1px rgba(155,108,255,0.4),0 0 20px rgba(155,108,255,0.35);--sel:rgba(155,108,255,0.3);--focus:rgba(155,108,255,0.12);--active-text:rgb(215,196,255);--accent-ink:#ffffff}
html[data-theme="glass"][data-accent="violet"]{--accent:rgb(167,126,255);--accent-strong:rgb(173,134,255);--accent-deep:rgb(101,70,166);--grad:rgb(173,134,255);--ring:rgba(155,108,255,0.38);--glow:0 0 0 1px rgba(155,108,255,0.28),0 14px 40px rgba(155,108,255,0.22);--sel:rgba(155,108,255,0.26);--focus:rgba(155,108,255,0.1);--active-text:rgb(215,196,255);--accent-ink:#ffffff}
html[data-accent="cyan"]{--accent:rgb(24,207,255);--accent-strong:rgb(66,216,255);--accent-deep:rgb(16,135,166);--grad:rgb(66,216,255);--ring:rgba(24,207,255,0.4);--glow:0 0 0 1px rgba(24,207,255,0.3),0 10px 32px rgba(24,207,255,0.15);--sel:rgba(24,207,255,0.32);--focus:rgba(24,207,255,0.08);--active-text:rgb(163,236,255);--accent-ink:#0a0a0b}
html[data-theme="light"][data-accent="cyan"]{--accent:rgb(16,135,166);--accent-strong:rgb(24,207,255);--accent-deep:rgb(19,161,199);--grad:rgb(24,207,255);--ring:rgba(16,135,166,0.3);--glow:0 0 0 1px rgba(16,135,166,0.22),0 10px 32px rgba(16,135,166,0.12);--sel:rgba(16,135,166,0.22);--focus:rgba(16,135,166,0.09);--active-text:rgb(19,161,199);--accent-ink:#fff}
html[data-theme="oled"][data-accent="cyan"]{--accent:rgb(52,213,255);--accent-strong:rgb(66,216,255);--accent-deep:rgb(16,135,166);--grad:rgb(66,216,255);--ring:rgba(24,207,255,0.5);--glow:0 0 0 1px rgba(24,207,255,0.4),0 0 20px rgba(24,207,255,0.35);--sel:rgba(24,207,255,0.3);--focus:rgba(24,207,255,0.12);--active-text:rgb(163,236,255);--accent-ink:#0a0a0b}
html[data-theme="glass"][data-accent="cyan"]{--accent:rgb(52,213,255);--accent-strong:rgb(66,216,255);--accent-deep:rgb(16,135,166);--grad:rgb(66,216,255);--ring:rgba(24,207,255,0.38);--glow:0 0 0 1px rgba(24,207,255,0.28),0 14px 40px rgba(24,207,255,0.22);--sel:rgba(24,207,255,0.26);--focus:rgba(24,207,255,0.1);--active-text:rgb(163,236,255);--accent-ink:#0a0a0b}
html[data-accent="emerald"]{--accent:rgb(25,217,138);--accent-strong:rgb(66,224,159);--accent-deep:rgb(16,141,90);--grad:rgb(66,224,159);--ring:rgba(25,217,138,0.4);--glow:0 0 0 1px rgba(25,217,138,0.3),0 10px 32px rgba(25,217,138,0.15);--sel:rgba(25,217,138,0.32);--focus:rgba(25,217,138,0.08);--active-text:rgb(163,240,208);--accent-ink:#0a0a0b}
html[data-theme="light"][data-accent="emerald"]{--accent:rgb(16,141,90);--accent-strong:rgb(25,217,138);--accent-deep:rgb(20,169,108);--grad:rgb(25,217,138);--ring:rgba(16,141,90,0.3);--glow:0 0 0 1px rgba(16,141,90,0.22),0 10px 32px rgba(16,141,90,0.12);--sel:rgba(16,141,90,0.22);--focus:rgba(16,141,90,0.09);--active-text:rgb(20,169,108);--accent-ink:#fff}
html[data-theme="oled"][data-accent="emerald"]{--accent:rgb(53,222,152);--accent-strong:rgb(66,224,159);--accent-deep:rgb(16,141,90);--grad:rgb(66,224,159);--ring:rgba(25,217,138,0.5);--glow:0 0 0 1px rgba(25,217,138,0.4),0 0 20px rgba(25,217,138,0.35);--sel:rgba(25,217,138,0.3);--focus:rgba(25,217,138,0.12);--active-text:rgb(163,240,208);--accent-ink:#0a0a0b}
html[data-theme="glass"][data-accent="emerald"]{--accent:rgb(53,222,152);--accent-strong:rgb(66,224,159);--accent-deep:rgb(16,141,90);--grad:rgb(66,224,159);--ring:rgba(25,217,138,0.38);--glow:0 0 0 1px rgba(25,217,138,0.28),0 14px 40px rgba(25,217,138,0.22);--sel:rgba(25,217,138,0.26);--focus:rgba(25,217,138,0.1);--active-text:rgb(163,240,208);--accent-ink:#0a0a0b}
html[data-accent="orange"]{--accent:rgb(255,149,0);--accent-strong:rgb(255,168,46);--accent-deep:rgb(166,97,0);--grad:rgb(255,168,46);--ring:rgba(255,149,0,0.4);--glow:0 0 0 1px rgba(255,149,0,0.3),0 10px 32px rgba(255,149,0,0.15);--sel:rgba(255,149,0,0.32);--focus:rgba(255,149,0,0.08);--active-text:rgb(255,213,153);--accent-ink:#0a0a0b}
html[data-theme="light"][data-accent="orange"]{--accent:rgb(166,97,0);--accent-strong:rgb(255,149,0);--accent-deep:rgb(199,116,0);--grad:rgb(255,149,0);--ring:rgba(166,97,0,0.3);--glow:0 0 0 1px rgba(166,97,0,0.22),0 10px 32px rgba(166,97,0,0.12);--sel:rgba(166,97,0,0.22);--focus:rgba(166,97,0,0.09);--active-text:rgb(199,116,0);--accent-ink:#fff}
html[data-theme="oled"][data-accent="orange"]{--accent:rgb(255,162,31);--accent-strong:rgb(255,168,46);--accent-deep:rgb(166,97,0);--grad:rgb(255,168,46);--ring:rgba(255,149,0,0.5);--glow:0 0 0 1px rgba(255,149,0,0.4),0 0 20px rgba(255,149,0,0.35);--sel:rgba(255,149,0,0.3);--focus:rgba(255,149,0,0.12);--active-text:rgb(255,213,153);--accent-ink:#0a0a0b}
html[data-theme="glass"][data-accent="orange"]{--accent:rgb(255,162,31);--accent-strong:rgb(255,168,46);--accent-deep:rgb(166,97,0);--grad:rgb(255,168,46);--ring:rgba(255,149,0,0.38);--glow:0 0 0 1px rgba(255,149,0,0.28),0 14px 40px rgba(255,149,0,0.22);--sel:rgba(255,149,0,0.26);--focus:rgba(255,149,0,0.1);--active-text:rgb(255,213,153);--accent-ink:#0a0a0b}
html[data-accent="yellow"]{--accent:rgb(255,208,0);--accent-strong:rgb(255,216,46);--accent-deep:rgb(166,135,0);--grad:rgb(255,216,46);--ring:rgba(255,208,0,0.4);--glow:0 0 0 1px rgba(255,208,0,0.3),0 10px 32px rgba(255,208,0,0.15);--sel:rgba(255,208,0,0.32);--focus:rgba(255,208,0,0.08);--active-text:rgb(255,236,153);--accent-ink:#0a0a0b}
html[data-theme="light"][data-accent="yellow"]{--accent:rgb(166,135,0);--accent-strong:rgb(255,208,0);--accent-deep:rgb(199,162,0);--grad:rgb(255,208,0);--ring:rgba(166,135,0,0.3);--glow:0 0 0 1px rgba(166,135,0,0.22),0 10px 32px rgba(166,135,0,0.12);--sel:rgba(166,135,0,0.22);--focus:rgba(166,135,0,0.09);--active-text:rgb(199,162,0);--accent-ink:#fff}
html[data-theme="oled"][data-accent="yellow"]{--accent:rgb(255,214,31);--accent-strong:rgb(255,216,46);--accent-deep:rgb(166,135,0);--grad:rgb(255,216,46);--ring:rgba(255,208,0,0.5);--glow:0 0 0 1px rgba(255,208,0,0.4),0 0 20px rgba(255,208,0,0.35);--sel:rgba(255,208,0,0.3);--focus:rgba(255,208,0,0.12);--active-text:rgb(255,236,153);--accent-ink:#0a0a0b}
html[data-theme="glass"][data-accent="yellow"]{--accent:rgb(255,214,31);--accent-strong:rgb(255,216,46);--accent-deep:rgb(166,135,0);--grad:rgb(255,216,46);--ring:rgba(255,208,0,0.38);--glow:0 0 0 1px rgba(255,208,0,0.28),0 14px 40px rgba(255,208,0,0.22);--sel:rgba(255,208,0,0.26);--focus:rgba(255,208,0,0.1);--active-text:rgb(255,236,153);--accent-ink:#0a0a0b}
html[data-accent="champagne"]{--accent:rgb(216,180,110);--accent-strong:rgb(230,200,134);--accent-deep:rgb(168,137,63);--grad:rgb(230,200,134);--ring:rgba(216,180,110,0.4);--glow:0 0 0 1px rgba(216,180,110,0.3),0 10px 32px rgba(216,180,110,0.15);--sel:rgba(216,180,110,0.3);--focus:rgba(216,180,110,0.09);--active-text:rgb(243,227,189);--accent-ink:#1c1506}
html[data-theme="light"][data-accent="champagne"]{--accent:rgb(168,137,63);--accent-strong:rgb(216,180,110);--accent-deep:rgb(199,164,85);--grad:rgb(216,180,110);--ring:rgba(168,137,63,0.3);--glow:0 0 0 1px rgba(168,137,63,0.22),0 10px 32px rgba(168,137,63,0.12);--sel:rgba(168,137,63,0.2);--focus:rgba(168,137,63,0.09);--active-text:rgb(168,137,63);--accent-ink:#fff}
html[data-theme="oled"][data-accent="champagne"]{--accent:rgb(222,188,120);--accent-strong:rgb(230,200,134);--accent-deep:rgb(168,137,63);--grad:rgb(230,200,134);--ring:rgba(216,180,110,0.5);--glow:0 0 0 1px rgba(216,180,110,0.4),0 0 20px rgba(216,180,110,0.35);--sel:rgba(216,180,110,0.28);--focus:rgba(216,180,110,0.12);--active-text:rgb(243,227,189);--accent-ink:#1c1506}
html[data-theme="glass"][data-accent="champagne"]{--accent:rgb(222,188,120);--accent-strong:rgb(230,200,134);--accent-deep:rgb(168,137,63);--grad:rgb(230,200,134);--ring:rgba(216,180,110,0.38);--glow:0 0 0 1px rgba(216,180,110,0.28),0 14px 40px rgba(216,180,110,0.22);--sel:rgba(216,180,110,0.24);--focus:rgba(216,180,110,0.1);--active-text:rgb(243,227,189);--accent-ink:#1c1506}
html,body{height:100%;overflow:hidden;background:var(--bg);color:var(--text);font-family:var(--font);font-size:14px;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;transition:background-color .25s ease,color .25s ease}
body{background:var(--bg)}
::selection{background:var(--sel);color:var(--text)}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--scroll);border-radius:8px;border:2px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background:var(--scroll-hover);border:2px solid transparent;background-clip:padding-box}
button{font-family:inherit;color:inherit}
#app{display:flex;height:100vh}

/* ── Sidebar ── */
.sidebar{width:236px;background:var(--sidebar-bg);border-right:1px solid var(--border);display:flex;flex-direction:column;flex-shrink:0;user-select:none;backdrop-filter:blur(14px);transition:width .22s cubic-bezier(.22,1,.36,1),background-color .25s ease}
.sidebar-logo{padding:20px 16px 16px;display:flex;align-items:center;gap:11px;border-bottom:1px solid var(--border);position:relative}
.logo-mark{width:31px;height:31px;border-radius:9px;object-fit:contain;flex-shrink:0;box-shadow:0 0 0 1px rgba(255,255,255,.06),0 4px 14px rgba(0,0,0,.25)}
.logo-text{font-size:15px;font-weight:700;letter-spacing:-.2px;font-feature-settings:'cv11'}
.logo-sub{font-size:9.5px;color:var(--text3);letter-spacing:.9px;text-transform:uppercase;margin-top:1px}
.sidebar-nav{flex:1;padding:10px 8px;overflow-y:auto;overflow-x:hidden}
.nav-section{font-size:10px;color:var(--text3);text-transform:uppercase;letter-spacing:1px;padding:14px 12px 6px;font-weight:600}
.nav-item{display:flex;align-items:center;gap:10px;padding:8.5px 11px;border-radius:var(--radius);cursor:pointer;color:var(--text2);font-size:13px;font-weight:500;transition:all .14s ease;position:relative;margin-bottom:1px}
.nav-item svg{width:16px;height:16px;flex-shrink:0;opacity:.75;transition:opacity .14s}
.nav-item:hover{background:var(--hover);color:var(--text)}
.nav-item:hover svg{opacity:1}
.nav-item.active{background:linear-gradient(90deg,var(--amber-soft),transparent);color:var(--active-text);font-weight:600}
.nav-item.active svg{opacity:1;color:var(--accent)}
.nav-item.active::before{content:'';position:absolute;left:0;top:22%;height:56%;width:2.5px;border-radius:3px;background:var(--grad);box-shadow:0 0 10px var(--amber-strong)}
.pro-tag{font-size:8.5px;font-weight:800;letter-spacing:.8px;padding:2px 5px;border-radius:5px;background:var(--grad);color:var(--accent-ink);opacity:.9;flex-shrink:0}
#aq-tab-pro-tag{display:none}
#diagrams-tab-pro-tag{display:none}
.premium-gate{max-width:440px;margin:40px auto;text-align:center;padding:34px 30px;border:1px solid var(--border2);border-radius:var(--radius2);background:linear-gradient(180deg,var(--shine),transparent),var(--bg2);box-shadow:var(--shadow)}
.premium-icon{width:58px;height:58px;margin:0 auto 16px;border-radius:16px;background:linear-gradient(135deg,var(--amber-soft),var(--violet-soft));border:1px solid var(--border2);display:flex;align-items:center;justify-content:center;color:var(--accent)}
.premium-title{font-size:18px;font-weight:700;margin-bottom:8px}
.premium-sub{font-size:13px;color:var(--text2);line-height:1.6;margin-bottom:18px}
.aq-trial{display:inline-flex;align-items:center;gap:8px;font-size:11.5px;color:var(--text3);border:1px solid var(--border);border-radius:20px;padding:6px 13px;margin:0 0 14px}
.sidebar-footer{padding:12px;border-top:1px solid var(--border);display:flex;flex-direction:column;gap:8px}
.local-chip{display:flex;align-items:center;gap:7px;padding:6px 10px;font-size:11px;color:var(--text3);letter-spacing:.4px}
.local-dot{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 8px var(--green-strong);flex-shrink:0}
.sidebar-user{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:var(--radius);cursor:pointer;color:var(--text2);font-size:13px;transition:all .14s;border:1px solid transparent}
.sidebar-user:hover{background:var(--hover);color:var(--text);border-color:var(--border)}
.user-avatar{width:27px;height:27px;border-radius:50%;background:var(--avatar-bg);border:1px solid var(--border2);display:flex;align-items:center;justify-content:center;font-size:11px;color:var(--accent-strong);font-weight:700;flex-shrink:0;overflow:hidden}
.sb-avatar-img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block}
.u-name{font-size:12.5px;font-weight:600;color:var(--text)}
.u-plan{font-size:10.5px;color:var(--text3)}

/* ── Main ── */
.main{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0}
.topbar{height:52px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:0 22px;background:var(--topbar-bg);backdrop-filter:blur(14px);flex-shrink:0;gap:14px;position:relative;z-index:5;transition:background-color .25s ease}
.search-bar{display:flex;align-items:center;gap:9px;padding:8px 14px;background:var(--field);border:1px solid var(--border);border-radius:10px;cursor:pointer;color:var(--text3);font-size:13px;flex:1;max-width:380px;transition:all .18s ease}
.search-bar:hover{background:var(--field-hover);border-color:var(--border2);color:var(--text2)}
.search-bar svg{width:15px;height:15px;flex-shrink:0}
.search-bar kbd{margin-left:auto;background:var(--bg4);border:1px solid var(--border2);border-radius:5px;padding:2px 6px;font-size:10.5px;color:var(--text3);font-family:var(--mono)}
.topbar-actions{display:flex;gap:4px;align-items:center}
.icon-btn{width:33px;height:33px;display:flex;align-items:center;justify-content:center;border-radius:9px;cursor:pointer;color:var(--text2);font-size:15px;transition:all .14s ease;border:none;background:none;position:relative}
#notif-badge{position:absolute;top:-4px;right:-4px;background:var(--red);color:var(--on-accent);font-size:9px;font-weight:700;min-width:16px;height:16px;border-radius:99px;display:none;align-items:center;justify-content:center;padding:0 4px}
.icon-btn svg{width:16px;height:16px}
.icon-btn:hover{background:var(--hover2);color:var(--text)}
.icon-btn:active{transform:scale(.94)}
.content-scroll{flex:1;overflow-y:auto;overflow-x:hidden}
.content{max-width:1180px;margin:0 auto;width:100%;padding:34px 44px 72px}

/* ── Shared ── */
.page-header{margin-bottom:26px}
.page-title{font-size:27px;font-weight:800;letter-spacing:-.6px;margin-bottom:4px;font-feature-settings:'cv11'}
.page-sub{color:var(--text2);font-size:13px}
.flex-between{display:flex;align-items:center;justify-content:space-between}
.btn{padding:8px 15px;border-radius:10px;border:none;cursor:pointer;font-size:13px;font-weight:600;transition:all .15s ease;display:inline-flex;align-items:center;gap:7px;font-feature-settings:'cv11'}
.btn svg{width:15px;height:15px}
.btn:active{transform:translateY(1px) scale(.985)}
.btn:focus-visible{outline:none;box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--ring)}
.btn-primary{background:var(--accent);color:var(--accent-ink);box-shadow:0 2px 12px var(--ring);box-shadow:0 2px 14px color-mix(in srgb,var(--accent) 45%,transparent)}
.btn-primary:hover{filter:brightness(1.08);box-shadow:0 4px 20px var(--ring);box-shadow:0 4px 22px color-mix(in srgb,var(--accent) 60%,transparent);transform:translateY(-1px)}
.btn-primary:active{transform:translateY(0) scale(.985);filter:brightness(1)}
.btn-ghost{background:transparent;color:var(--text2);border:1px solid var(--border2)}
.btn-ghost:hover{background:var(--hover);color:var(--text);border-color:var(--border2)}
.btn-icon{padding:6.5px;border-radius:8px;border:none;cursor:pointer;background:var(--field);color:var(--text2);font-size:13px;transition:all .14s ease;display:inline-flex;align-items:center;justify-content:center;line-height:1}
.btn-icon svg{width:14px;height:14px}
.btn-icon:hover{background:var(--hover2);color:var(--text)}
input,textarea,select{background:var(--bg3);border:1px solid var(--border2);border-radius:9px;color:var(--text);font-size:13px;padding:9px 13px;outline:none;font-family:var(--font);width:100%;transition:border-color .15s ease,box-shadow .15s ease}
input::placeholder,textarea::placeholder{color:var(--text3)}
input:focus,textarea:focus,select:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--ring)}
select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239b9ba6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 11px center;padding-right:32px;cursor:pointer}
.card{background:linear-gradient(180deg,var(--shine),transparent),var(--bg2);border:1px solid var(--border);border-radius:var(--radius2);padding:16px;transition:all .18s ease}
.card:hover{border-color:rgba(255,255,255,.13);box-shadow:0 6px 24px rgba(0,0,0,.35)}
.grid{display:grid;gap:14px}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
.stat-card{display:flex;align-items:center;gap:14px;padding:18px}
.stat-ic{width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.stat-ic svg{width:18px;height:18px}
.stat-val{font-size:27px;font-weight:800;letter-spacing:-1px;line-height:1.1;font-feature-settings:'cv11'}
.stat-lbl{font-size:12px;color:var(--text2);margin-top:2px}
.empty{text-align:center;padding:56px 24px;color:var(--text3)}
.empty-icon{width:56px;height:56px;margin:0 auto 14px;border-radius:16px;background:var(--field);border:1px solid var(--border);display:flex;align-items:center;justify-content:center}
.empty-icon svg{width:26px;height:26px;opacity:.65}
.empty p{font-size:14px;margin-bottom:18px;color:var(--text2);line-height:1.7}
.error-state{text-align:center;padding:56px 24px;color:var(--text3)}
.error-state p{font-size:14px;margin-bottom:18px;color:var(--text2);line-height:1.7;max-width:460px;margin-left:auto;margin-right:auto}
.error-state p b{color:var(--text)}
.chat-ch-empty{font-size:12px;color:var(--text3);padding:9px 8px;display:flex;align-items:center;gap:6px;line-height:1.5}
.badge{padding:3px 9px;border-radius:20px;font-size:11px;font-weight:600;display:inline-flex;align-items:center;gap:4px;letter-spacing:.1px}
.badge-todo{background:var(--slate-soft);color:var(--slate-ink)}
.badge-in_progress{background:var(--blue-soft);color:var(--blue-ink)}
.badge-review{background:var(--purple-soft);color:var(--purple-ink)}
.badge-done{background:var(--green-soft);color:var(--green-ink)}
.badge-p0{background:var(--slate-soft);color:var(--slate-ink)}
.badge-p1{background:var(--green-soft);color:var(--green-ink)}
.badge-p2{background:var(--yellow-soft);color:var(--yellow-ink)}
.badge-p3{background:var(--red-soft);color:var(--red-ink)}
.divider{border:none;border-top:1px solid var(--border);margin:20px 0}
.tag{display:inline-flex;align-items:center;gap:4px;padding:3px 8px;background:var(--field);border-radius:5px;font-size:12px;color:var(--text2)}
kbd{font-family:var(--mono)}

/* Skeleton loader */
.skel{background:linear-gradient(90deg,var(--skel-a) 25%,var(--skel-b) 37%,var(--skel-a) 63%);background-size:400% 100%;border-radius:8px;animation:shimmer 1.4s ease infinite}
.skel-t{width:280px;height:30px;margin-bottom:10px}
.skel-s{width:220px;height:13px;margin-bottom:30px}
.skel-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:26px}
.skel-c{height:92px}
.skel-l{height:62px;margin-bottom:10px}
@keyframes shimmer{0%{background-position:100% 0}100%{background-position:0 0}}
.page-anim{animation:fadeUp .3s cubic-bezier(.22,1,.36,1)}
@keyframes fadeUp{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
/* Theme icon visibility */
.ic-moon{display:none}
html[data-theme="light"] .ic-sun{display:none}
html[data-theme="light"] .ic-moon{display:block}
/* Sidebar collapse */
.app-collapsed .sidebar{width:64px}
.app-collapsed .sidebar-logo{justify-content:center;padding:20px 8px 16px;gap:0}
.app-collapsed .logo-txt{display:none}
.app-collapsed .nav-section{display:none}
.app-collapsed .nav-item{justify-content:center;padding:10px 0;gap:0}  .app-collapsed .nav-item span{display:none}
  .app-collapsed .pro-tag{display:none}
.app-collapsed .nav-item.active::before{display:none}
.app-collapsed .sidebar-footer{padding:12px 8px;align-items:stretch}
.app-collapsed .local-chip{display:none}
.app-collapsed .u-meta{display:none}
.app-collapsed .sidebar-user{justify-content:center;padding:9px 0}
.app-collapsed .collapse-toggle{justify-content:center;padding:9px 0}
.app-collapsed .ct-label{display:none}
/* Collapse toggle + favorites */
.collapse-toggle{display:flex;align-items:center;gap:8px;width:100%;padding:8px 10px;border:none;background:none;border-radius:8px;cursor:pointer;color:var(--text3);font-size:12px;transition:all .14s}
.collapse-toggle:hover{background:var(--hover);color:var(--text2)}
.collapse-toggle svg{width:15px;height:15px;flex-shrink:0}
.fav-item{font-size:12.5px;padding:7px 10px}
.fav-star{color:var(--accent);display:flex;align-items:center;justify-content:center;width:14px;flex-shrink:0}
.fav-star svg{width:11px;height:11px}
.fav-btn{color:var(--text3)}
.fav-btn:hover{color:var(--accent);background:var(--amber-soft)}
.fav-btn.on{color:var(--accent)}
/* Connector template gallery (Settings → Connectors) */
.cn-tpl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:8px}
.cn-tpl{display:flex;align-items:center;gap:9px;padding:10px 12px;border:1px solid var(--border);border-radius:var(--radius);background:var(--field);cursor:pointer;text-align:left;color:var(--text);font-family:var(--font);transition:background .14s,border-color .14s,transform .14s}
.cn-tpl:hover{background:var(--field-hover);border-color:var(--border2)}
.cn-tpl:active{transform:scale(.985)}
.cn-tpl-ico{display:flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:8px;background:var(--chip);color:var(--accent-strong);flex-shrink:0}
.cn-tpl-body{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.cn-tpl-body b{font-size:12.5px;font-weight:700}
.cn-tpl-body i{font-style:normal;font-size:10.5px;color:var(--text3);line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cn-tpl-tag{font-size:9px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;padding:2px 6px;border-radius:10px;background:var(--chip);color:var(--text2);flex-shrink:0}
/* Agent connector badges — external reach shown on agent cards */
.ag-conn-badge{display:inline-flex;align-items:center;gap:4px;font-size:10px;font-weight:600;padding:2px 8px;border-radius:99px;border:1px solid var(--border);background:var(--chip)}
.ag-conn-badge svg{flex-shrink:0}

/* ── Power features: columns, synced blocks, equations, toggle headings, ──
   page embeds, covers, image resizing, button/rollup columns, linked views */

/* Column groups — side-by-side blocks */
.block-columns{display:flex;gap:10px;align-items:stretch;width:100%;position:relative;flex-wrap:nowrap}
.block-col{flex:1 1 0;min-width:80px;position:relative;display:flex;flex-direction:column}
.block-col .block{margin-bottom:6px}
.block-col-resize{position:absolute;right:-7px;top:0;bottom:0;width:12px;cursor:col-resize;z-index:5}
.block-col-resize::after{content:'';position:absolute;left:5px;top:20%;bottom:20%;width:2px;border-radius:2px;background:var(--border2);opacity:0;transition:opacity .12s}
.block-columns:hover .block-col-resize::after,.block-col-resize:active::after{opacity:1}
.block-columns-bar{display:flex;gap:4px;position:absolute;top:-14px;right:0;opacity:0;transition:opacity .12s}
.block-columns:hover .block-columns-bar{opacity:1}
.block-columns-bar button{font-size:9.5px;font-weight:700;padding:2px 7px;border-radius:7px;border:1px solid var(--border);background:var(--bg3);color:var(--text2);cursor:pointer}
.block-columns-bar button:hover{background:var(--bg4);color:var(--text)}

/* Synced blocks */
.block-synced{border:1px solid var(--border2);border-radius:12px;padding:6px 8px;background:var(--bg2);width:100%}
.block-synced .synced-body{border:none;padding:0}
.block-synced-head{display:flex;align-items:center;gap:6px;font-size:10.5px;color:var(--text3);padding:2px 2px 6px;font-weight:600;letter-spacing:.2px}
.sync-dot{width:7px;height:7px;border-radius:50%;background:var(--blue,#3b82f6);box-shadow:0 0 6px rgba(59,130,246,.6);flex-shrink:0}
.block-synced.synced-ref{border-style:dashed}

/* Equation blocks + inline math */
.block-equation{width:100%}
.block-eq-input{width:100%;min-height:52px;resize:vertical;font-family:ui-monospace,'Cascadia Mono',Consolas,monospace;font-size:12.5px;padding:9px 11px;border:1px solid var(--border);border-radius:10px;background:var(--bg3);color:var(--text);outline:none;box-sizing:border-box}
.block-eq-input:focus{border-color:var(--border2)}
.block-eq-preview{min-height:34px;padding:10px 12px;border:1px dashed var(--border);border-radius:10px;margin-top:6px;font-size:17px;overflow-x:auto;background:var(--bg2)}
.math-block{font-family:Georgia,'Times New Roman',serif;font-style:italic;letter-spacing:.2px}
.math-inline{font-family:Georgia,'Times New Roman',serif;font-style:italic;background:var(--bg3);border:1px solid var(--border);border-radius:6px;padding:0 5px;margin:0 1px;white-space:nowrap}
.frac{display:inline-flex;flex-direction:column;align-items:center;vertical-align:-0.55em;margin:0 2px;font-size:.92em}
.frac-n{border-bottom:1px solid currentColor;padding:0 4px;line-height:1.25}
.frac-d{padding:0 4px;line-height:1.25}

/* Toggle headings */
.block-toggle-h{display:flex;flex-wrap:wrap;align-items:baseline;width:100%;gap:4px}
.toggle-chev{cursor:pointer;user-select:none;color:var(--text3);font-size:13px;width:18px;flex-shrink:0;text-align:center;transition:transform .12s}
.toggle-chev:hover{color:var(--text)}
.toggle-body{width:100%;padding-left:22px;border-left:2px solid var(--border);margin:4px 0 2px}
.block-toggle-h.closed .toggle-body{display:none}

/* Page-as-block embed */
.block-pageembed{width:100%}
.pageembed-card{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--border);border-radius:12px;background:linear-gradient(180deg,var(--bg3),var(--bg2));cursor:pointer;transition:border-color .12s}
.pageembed-card:hover{border-color:var(--border2)}
.pageembed-icon{width:34px;height:34px;border-radius:9px;background:var(--bg4);display:flex;align-items:center;justify-content:center;color:var(--text2);flex-shrink:0}
.pageembed-info{flex:1;min-width:0}
.pageembed-title{font-weight:600;font-size:13.5px;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pageembed-hint{font-size:11px;color:var(--text3);margin-top:1px}
.pageembed-arrow{color:var(--text3);flex-shrink:0}

/* Page covers — with draggable positioning strip */
.doc-cover{position:relative;height:0;border-radius:14px;overflow:hidden;margin:-6px 0 14px;transition:height .18s ease}
.doc-cover.has{height:180px;border:1px solid var(--border);background-size:cover;background-position:var(--cover-pos,50%) center;background-repeat:no-repeat}
.cover-actions{position:absolute;top:8px;right:8px;display:flex;gap:6px;opacity:0;transition:opacity .15s;z-index:3}
.doc-cover.has:hover .cover-actions{opacity:1}
.cover-actions .btn{background:rgba(13,13,16,.72);backdrop-filter:blur(6px)}
.cover-pos-strip{position:absolute;left:0;right:0;bottom:10px;height:14px;cursor:ew-resize;z-index:3}
.cover-pos-strip::after{content:'⇔';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:11px;color:#fff;background:rgba(0,0,0,.45);border-radius:8px;padding:1px 8px;opacity:0;transition:opacity .15s}
.doc-cover.has:hover .cover-pos-strip::after{opacity:.9}

/* Image resize handle */
.block-image{position:relative}
.block-image-resize{position:absolute;right:-6px;top:0;bottom:18px;width:12px;cursor:ew-resize;z-index:5}
.block-image-resize::after{content:'';position:absolute;right:5px;top:15%;bottom:15%;width:3px;border-radius:2px;background:var(--blue,#3b82f6);opacity:0;transition:opacity .12s}
.block-image:hover .block-image-resize::after{opacity:.75}

/* Button property cells + rollup chips (real Databases view) */
.db-btn-cell{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;padding:3px 10px;border-radius:8px;border:1px solid var(--border2);background:var(--bg4);color:var(--text);cursor:pointer;white-space:nowrap}
.db-btn-cell:hover{background:var(--chip)}
.db-btn-cell svg{flex-shrink:0}
.db-rollup-chip{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;color:var(--text2);background:var(--chip);border:1px solid var(--border);border-radius:8px;padding:2px 8px}
.db-templates-bar{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 12px}
.db-templates-bar .db-btn-cell{border-style:dashed}
.db-lv-card{border:1px solid var(--border);border-radius:12px;background:var(--bg2);padding:10px 12px;margin:10px 0}
.db-lv-head{display:flex;align-items:center;gap:8px;margin-bottom:8px;font-size:12px;font-weight:700;color:var(--text2)}
.db-lv-head .tag-x{margin-left:auto}

/* Reminder chip feedback inside the editor */
.reminder-toast-item{display:flex;align-items:center;gap:8px;font-size:12.5px}

/* ── Dashboard-style sub-pages: rich cards, live previews, button blocks ── */

/* Page icon button in the doc header */
.doc-icon-btn{width:42px;height:42px;border-radius:11px;border:1px solid var(--border);background:var(--bg3);display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;transition:border-color .12s}
.doc-icon-btn:hover{border-color:var(--border2)}
.icon-pick:hover{background:var(--bg4)!important}
.icon-pick.on{background:var(--chip)!important}

/* Sub-page cards with identity: icon + cover strip + preview text */
.subpage-card{position:relative;overflow:hidden}
.subpage-icon{overflow:hidden}
.subpage-cover{position:absolute;left:0;top:0;bottom:0;width:5px;background-size:cover;background-repeat:no-repeat}
.subpage-card.has-cover{padding-left:6px}
.subpage-preview{font-size:11px;color:var(--text3);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Page-in-page embed card gets the same identity treatment */
.pageembed-card{position:relative;overflow:hidden}
.pageembed-cover{height:42px;background-size:cover;background-position:center;margin:-12px -14px 8px;border-radius:12px 12px 0 0}

/* Database preview block — live mini table/board */
.block-dbpreview{border:1px solid var(--border);border-radius:12px;background:var(--bg2);padding:10px 12px;width:100%}
.dbpv-head{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.dbpv-ic{color:var(--text2);display:flex}
.dbpv-name{font-weight:700;font-size:13px;color:var(--text)}
.dbpv-table{display:flex;flex-direction:column;cursor:pointer}
.dbpv-tr{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:8px;padding:5px 6px;border-radius:7px;font-size:12px;align-items:center}
.dbpv-tr:not(.dbpv-th):hover{background:var(--bg3)}
.dbpv-tr b{font-weight:600;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dbpv-tr span{color:var(--text2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.dbpv-th{font-size:10px;text-transform:uppercase;letter-spacing:.5px;color:var(--text3);border-bottom:1px solid var(--border);padding-bottom:4px;margin-bottom:2px}
.dbpv-board{display:flex;gap:8px;overflow-x:auto;cursor:default}
.dbpv-col{flex:0 0 150px;background:var(--bg3);border:1px solid var(--border);border-radius:9px;padding:6px}
.dbpv-colh{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--text3);margin-bottom:5px}
.dbpv-card{background:var(--bg2);border:1px solid var(--border);border-radius:7px;padding:6px 7px;margin-bottom:5px;cursor:pointer;font-size:11.5px}
.dbpv-card b{display:block;font-weight:600;color:var(--text);font-size:12px;margin-bottom:2px}
.dbpv-card div{display:flex;gap:4px;flex-wrap:wrap}
.dbpv-chip{font-size:10px;color:var(--text2);background:var(--bg4);border-radius:5px;padding:1px 5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.dbpv-chip b{font-weight:600;color:var(--text3);margin-right:3px}

/* Button block — the dashboard spawn button */
.block-buttonblock{width:100%}
.btnblock-btn{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:700;padding:9px 16px;border-radius:10px;border:1px solid var(--border2);background:linear-gradient(180deg,var(--bg4),var(--bg3));color:var(--text);cursor:pointer;transition:transform .1s,filter .12s}
.btnblock-btn:hover{filter:brightness(1.12)}
.btnblock-btn:active{transform:translateY(1px)}
.btnblock-btn:disabled{cursor:wait}

/* ── Custom HTML/CSS/JS block (sandboxed widget) ───────────────────────── */
.block-custom{position:relative;width:100%;border:1px solid var(--border);border-radius:14px;background:var(--bg2);overflow:hidden;min-height:80px}
.custom-empty{height:100%;min-height:150px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:20px;color:var(--text2)}
.custom-frame-host{position:absolute;inset:0 0 34px 0}
.custom-frame{width:100%;height:100%;border:none;display:block;background:transparent;color-scheme:inherit}
.custom-bar{position:absolute;left:0;right:0;bottom:0;height:34px;display:flex;align-items:center;gap:6px;padding:0 8px;border-top:1px solid var(--border);background:var(--bg3)}
.custom-bar-note{font-size:10.5px;color:var(--text3);margin-left:auto;letter-spacing:.3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.custom-code-ta{flex:1;min-width:0;height:100%;resize:none;font-family:ui-monospace,Consolas,Menlo,monospace;font-size:12.5px;line-height:1.55;padding:12px 14px;background:var(--bg1);color:var(--text);border:1px solid var(--border);border-radius:10px;outline:none}
.custom-code-ta:focus{border-color:var(--accent)}
.custom-preview{width:46%;min-width:240px;border:1px solid var(--border);border-radius:10px;background:var(--bg2)}
.block-custom .btn-icon{color:var(--text2)}

/* ── Capture routing: one-tap destination chips ───────────────────────── */
.cap-routes-h{font-size:11px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:var(--text3);margin-bottom:7px}
.cap-route-chip{display:inline-flex;align-items:center;gap:7px;padding:8px 13px;border-radius:11px;border:1px solid var(--border2);background:var(--bg3);color:var(--text);font-size:12.5px;cursor:pointer;transition:border-color .12s,filter .12s;text-align:left}
.cap-route-chip:hover{border-color:var(--accent);filter:brightness(1.08)}
.cap-route-chip b{font-weight:700}
.cap-route-chip span{font-size:11px;color:var(--text3)}

/* ── Sabbath / downtime mode ───────────────────────────────────────────── */
.sabbath-chip{display:inline-flex;align-items:center;gap:6px;margin-top:10px;padding:5px 11px;border-radius:999px;border:1px solid var(--violet-border,var(--border2));background:var(--violet-soft,rgba(139,92,246,.12));color:var(--text);font-size:11px;font-weight:600;letter-spacing:.3px;width:fit-content}
.sabbath-chip:hover{filter:brightness(1.1)}

/* ── Home: favorite pages widget (rich cards, drag-to-rearrange) ────────── */
.favcards{display:flex;flex-direction:column;gap:7px}
.favcard{position:relative;display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--border);border-radius:12px;background:var(--bg2);cursor:pointer;transition:border-color .12s,transform .12s,box-shadow .12s}
.favcard:hover{border-color:var(--border2);transform:translateY(-1px);box-shadow:0 4px 14px rgba(0,0,0,.18)}
.favcard.dragging{opacity:.45}
.favcard.drag-over{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft,rgba(233,69,96,.25))}
.favcard-cover{height:44px;background-size:cover;background-position:center;border-bottom:1px solid var(--border)}
.favcard-body{padding:8px 10px;display:flex;flex-direction:column;gap:4px;min-width:0}
.favcard-title{display:flex;align-items:center;gap:6px;min-width:0}
.favcard-name{font-size:13px;font-weight:600;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.favcard-meta{display:flex;align-items:center;gap:6px;font-size:10.5px;color:var(--text3)}
.favcard-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}
</style>
<style>
/* ── Modal ── */
.overlay{position:fixed;inset:0;background:rgba(0,0,0,.68);z-index:900;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(8px);animation:fadeIn .16s ease}
.modal{background:var(--modal-bg);border:1px solid var(--border2);border-radius:16px;padding:26px;min-width:430px;max-width:580px;width:90vw;max-height:82vh;overflow-y:auto;box-shadow:0 24px 80px rgba(0,0,0,.7);animation:pop .2s cubic-bezier(.22,1,.36,1)}
@keyframes pop{from{opacity:0;transform:scale(.96) translateY(8px)}to{opacity:1;transform:none}}
.modal-title{font-size:17px;font-weight:700;margin-bottom:20px;letter-spacing:-.2px;font-feature-settings:'cv11'}
.form-row{margin-bottom:15px}
.form-label{font-size:12px;color:var(--text2);margin-bottom:6px;display:block;font-weight:500}
.form-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:22px}
/* Lock screen */
.lock-overlay{position:fixed;inset:0;background:var(--bg);z-index:980;display:flex;align-items:center;justify-content:center;animation:fadeIn .18s ease}
.lock-card{background:var(--modal-bg);border:1px solid var(--border2);border-radius:18px;padding:34px 30px;width:340px;max-width:88vw;box-shadow:0 24px 80px rgba(0,0,0,.5);text-align:center;animation:pop .22s cubic-bezier(.22,1,.36,1)}
.lock-mark{width:52px;height:52px;border-radius:14px;background:linear-gradient(135deg,rgba(245,158,11,.2),rgba(245,158,11,.06));border:1px solid rgba(245,158,11,.3);display:flex;align-items:center;justify-content:center;color:var(--accent);margin:0 auto 16px}
.lock-title{font-size:19px;font-weight:700;letter-spacing:-.3px;margin-bottom:6px}
.lock-sub{font-size:13px;color:var(--text3);margin-bottom:20px}
.lock-err{font-size:12px;color:var(--red);min-height:16px;margin:8px 0 4px}
.lock-card input{width:100%;box-sizing:border-box;text-align:center;letter-spacing:1px}
/* Search overlay */
.search-overlay{position:fixed;inset:0;background:rgba(0,0,0,.7);z-index:950;display:flex;align-items:flex-start;justify-content:center;padding-top:90px;backdrop-filter:blur(10px)}
.search-box{background:var(--modal-bg);border:1px solid var(--border2);border-radius:16px;width:620px;max-width:92vw;max-height:72vh;display:flex;flex-direction:column;box-shadow:0 24px 80px rgba(0,0,0,.7);overflow:hidden;animation:slideDown .22s cubic-bezier(.22,1,.36,1)}
@keyframes slideDown{from{opacity:0;transform:translateY(-12px) scale(.98)}to{opacity:1;transform:none}}
.search-input-row{display:flex;align-items:center;gap:11px;padding:15px 17px;border-bottom:1px solid var(--border)}
.search-input-row svg{width:17px;height:17px;color:var(--text3);flex-shrink:0}
.search-input-row input{background:transparent;border:none;font-size:16px;flex:1;padding:0;box-shadow:none}
.search-input-row input:focus{box-shadow:none}
.search-input-row input::placeholder{color:var(--text3)}
.search-results{flex:1;overflow-y:auto;padding:6px 8px 10px}
.pal-section{font-size:10px;color:var(--text3);text-transform:uppercase;letter-spacing:.9px;padding:12px 14px 6px;font-weight:600}
.pal-item{display:flex;align-items:center;gap:11px;padding:9px 13px;cursor:pointer;color:var(--text2);font-size:13px;border-radius:8px;transition:background .08s;margin:0 2px}
.pal-item .pal-ic{width:28px;height:28px;border-radius:8px;background:var(--field);display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--text2)}
.pal-item .pal-ic svg{width:14px;height:14px}
.pal-item .pal-kbd{margin-left:auto;font-size:10.5px;color:var(--text3);font-family:var(--mono);background:var(--chip);padding:2px 7px;border-radius:5px;flex-shrink:0}
.pal-item:hover{background:var(--hover);color:var(--text)}
.pal-item.sel{background:var(--hover);color:var(--text)}
.pal-item.sel .pal-ic{color:var(--accent)}
/* Doc editor */
.doc-editor{max-width:760px;margin:0 auto}
/* Floating formatting toolbar */
.fmt-toolbar{position:fixed;z-index:9999;display:none;align-items:center;gap:2px;background:var(--menu-bg);border:1px solid var(--border2);border-radius:10px;padding:4px 6px;box-shadow:0 8px 32px rgba(0,0,0,.55);animation:pop .12s cubic-bezier(.22,1,.36,1);pointer-events:auto}
.fmt-toolbar button{width:30px;height:28px;border:none;background:transparent;color:var(--text2);border-radius:6px;cursor:pointer;font-size:13px;display:flex;align-items:center;justify-content:center;transition:all .1s;font-family:inherit}
.fmt-toolbar button:hover{background:rgba(255,255,255,.08);color:var(--text)}
.fmt-toolbar button.active{background:rgba(245,158,11,.18);color:var(--accent)}
.fmt-toolbar button svg{width:14px;height:14px}
/* Block menu search */
.block-menu-search:focus{box-shadow:inset 0 0 0 1px rgba(245,158,11,.3)}
.block-menu-item.selected{background:rgba(255,255,255,.06);color:var(--text)}
.doc-title-input{width:100%;background:transparent;border:none;font-size:34px;font-weight:800;color:var(--text);letter-spacing:-1px;padding:0;margin-bottom:22px;outline:none;font-feature-settings:'cv11'}
.doc-title-input::placeholder{color:var(--text3)}
.doc-title-input:focus{box-shadow:none}
.doc-color-swatch{width:18px;height:18px;border-radius:50%;border:1px solid rgba(255,255,255,.18);cursor:pointer;padding:0;transition:transform .12s ease,box-shadow .12s ease}
.doc-color-swatch:hover{transform:scale(1.18)}
.doc-color-swatch.on{box-shadow:0 0 0 2px var(--bg),0 0 0 3.5px var(--accent)}
.block-editor{min-height:300px}
.block{position:relative;padding:2px 0;border-radius:8px}
.block.dragging{opacity:.35}
.block.drag-over-block{background:rgba(245,158,11,.05)}
.block.drag-above.drag-over-block::before{content:'';position:absolute;left:8px;right:0;top:-3px;height:3px;border-radius:2px;background:var(--accent);box-shadow:0 0 8px var(--accent);z-index:3;pointer-events:none}
.block.drag-below.drag-over-block::after{content:'';position:absolute;left:8px;right:0;bottom:-3px;height:3px;border-radius:2px;background:var(--accent);box-shadow:0 0 8px var(--accent);z-index:3;pointer-events:none}
.block{position:relative}
.block>.block-line>.block-drag{cursor:grab;touch-action:none}
.block>.block-line>.block-drag:active{cursor:grabbing}
.block.xsel{background:rgba(59,130,246,.12);border-radius:6px;outline:2px solid rgba(59,130,246,.35);outline-offset:-2px}
.block.xsel .block-content{user-select:text;-webkit-user-select:text}
/* Keyboard block move (Alt+↑/↓): brief highlight so the moved block stays
   visible when focus is outside the editor (e.g. in the title). */
.block.kb-selected{outline:2px solid var(--accent);outline-offset:-2px;border-radius:6px}

/* Column slots: slim drop zones after each column child. They only light up
   while a block drag is in progress (body.block-drag-active), and glow with
   the same accent line language as the between-blocks indicator. */
.col-slot{height:0;overflow:visible;position:relative;transition:height .12s ease}
.block-drag-active .col-slot{height:14px}
.col-slot.col-drop-over::before{content:'';position:absolute;left:6px;right:6px;top:-3px;height:3px;border-radius:2px;background:var(--accent);box-shadow:0 0 8px var(--accent);pointer-events:none}
.col-slot.col-drop-over{background:rgba(245,158,11,.05);border-radius:4px}
.block-line{display:flex;align-items:flex-start;gap:6px}
.block-drag{color:var(--text3);cursor:grab;padding:4px 3px;opacity:0;font-size:11px;flex-shrink:0;margin-top:5px;transition:opacity .12s;border-radius:4px}
.block:hover .block-drag{opacity:.9}
.block-drag:hover{background:var(--hover2);color:var(--text2)}
.links-sec{display:flex;flex-direction:column;gap:6px;max-width:320px}
.links-h{font-size:10.5px;font-weight:700;letter-spacing:.7px;color:var(--text3);text-transform:uppercase;margin-bottom:2px}
.link-chip{display:inline-flex;align-items:center;gap:5px;max-width:320px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;color:var(--text2);background:var(--chip);border:1px solid var(--border);border-radius:20px;padding:5px 11px;cursor:pointer;transition:all .14s}
.link-chip:hover{color:var(--accent);border-color:var(--ring);background:var(--hover)}
.link-chip.muted{opacity:.55;cursor:default}
.block-content{flex:1;outline:none;min-height:26px;padding:5px 5px;border-radius:6px;line-height:1.65;word-break:break-word;font-size:15px}
.block-content:focus{background:var(--field);box-shadow:inset 0 0 0 1px rgba(245,158,11,.22)}
.block-content:empty::before{content:attr(data-placeholder);color:var(--text3);pointer-events:none}
.block-h1{font-size:27px;font-weight:800;letter-spacing:-.4px;line-height:1.3}
.block-h2{font-size:21px;font-weight:700;letter-spacing:-.2px}
.block-h3{font-size:16.5px;font-weight:600}
.block-h4{font-size:15px;font-weight:700}
.block-h5{font-size:14px;font-weight:600}
.block-h6{font-size:12.5px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--text2)}
.block-quote{border-left:2px solid var(--accent);padding-left:14px;color:var(--text2);font-style:italic}
.block-code{font-family:var(--mono);font-size:13px;background:var(--bg4);border:1px solid var(--border);padding:10px 14px;border-radius:9px;white-space:pre-wrap;line-height:1.55;color:var(--code)}
.block-divider{border:none;border-top:1px solid var(--border2);margin:8px 0;pointer-events:none}
.block-list-item{display:flex;align-items:flex-start;gap:8px;padding-left:2px}
.block-list-item::before{content:'•';color:var(--text3);font-size:16px;line-height:1.65;flex-shrink:0;margin-top:4px}
.block-list-item.l1::before{content:'◦';color:var(--text2)}
.block-list-item.l2::before{content:'▪';color:var(--text2)}
.block-list-item.l3::before{content:'•';color:var(--text3)}
.block-num-item{display:flex;align-items:flex-start;gap:8px;padding-left:2px}
.block-num-item .block-num{color:var(--text3);font-size:13px;line-height:1.65;flex-shrink:0;margin-top:6px;min-width:16px;text-align:right}
.wl-menu .create-item{border-top:1px solid var(--border2);color:var(--accent);font-weight:600}
.wl-menu .create-item .bm-icon{opacity:.9}
.block-image{position:relative;border-radius:10px;overflow:hidden;max-width:640px;border:1px solid var(--border)}
.block-image img{display:block;width:100%;max-height:420px;object-fit:contain;background:var(--bg3)}
.block-image-bar{position:absolute;top:8px;right:8px;display:flex;gap:6px;opacity:0;transition:opacity .15s;background:rgba(0,0,0,.6);border:1px solid var(--border2);border-radius:8px;padding:4px}
.block:hover .block-image-bar{opacity:1}
.block-image-bar button{background:transparent;border:none;color:#fff;font-size:11.5px;cursor:pointer;padding:3px 8px;border-radius:6px}
.block-image-bar button:hover{background:rgba(255,255,255,.15)}
/* Table blocks */
.block-table-wrap{margin:4px 0;border:1px solid var(--border);border-radius:10px;overflow:hidden;background:var(--bg2)}
.block-table{width:100%;border-collapse:collapse;font-size:13px}
.block-table td,.block-table th{border:1px solid var(--border);padding:7px 10px;min-width:80px;text-align:left;font-size:13px}
.block-table td:focus{background:rgba(245,158,11,.08);box-shadow:inset 0 0 0 1px rgba(245,158,11,.3)}
.block-table-cell{outline:none;cursor:text}
.block-table-bar{display:flex;gap:6px;padding:6px 8px;border-top:1px solid var(--border);background:var(--bg3)}
.block-table-bar button{background:transparent;border:1px solid var(--border2);color:var(--text3);font-size:11px;cursor:pointer;padding:3px 8px;border-radius:6px;display:flex;align-items:center;gap:4px;transition:all .12s}
.block-table-bar button:hover{background:rgba(255,255,255,.06);color:var(--text);border-color:var(--accent)}
/* Sub-page blocks */
.block-subpage{margin:4px 0}
.subpage-card{display:flex;align-items:center;gap:12px;padding:12px 16px;border:1px solid var(--border);border-radius:12px;background:var(--bg2);cursor:pointer;transition:all .15s}
.subpage-card:hover{border-color:rgba(245,158,11,.35);background:rgba(255,255,255,.03);transform:translateY(-1px);box-shadow:0 4px 16px rgba(0,0,0,.3)}
.subpage-live{display:inline-flex;align-items:center;gap:4px;margin-top:6px;align-self:flex-start;padding:2px 8px;border-radius:999px;border:1px solid var(--border);background:var(--bg3);font-size:10.5px;font-weight:600;color:var(--text2);white-space:nowrap;max-width:100%;overflow:hidden}
.subpage-live span{overflow:hidden;text-overflow:ellipsis}
.subpage-live svg{flex-shrink:0}
/* Same pill, inline in dashboard block headers (dbpreview head row,
   button blocks). margin-left:auto pushes it to the row's right edge. */
.dbpv-head .db-live,.block-buttonblock .db-live{margin-top:0;margin-left:auto;flex-shrink:0}
.block-buttonblock .db-live{align-self:center}
.subpage-icon{width:36px;height:36px;border-radius:8px;background:rgba(59,130,246,.12);display:flex;align-items:center;justify-content:center;color:var(--blue,#3b82f6);flex-shrink:0}
.subpage-info{flex:1;min-width:0}
.subpage-title{font-weight:600;font-size:13.5px;color:var(--text)}
.subpage-hint{font-size:11px;color:var(--text3);margin-top:1px}
.subpage-arrow{color:var(--text3);flex-shrink:0}
/* Database blocks */
.block-database{margin:4px 0;border:1px solid var(--border);border-radius:12px;overflow:hidden;background:var(--bg2)}
.db-header{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid var(--border);background:var(--bg3)}
.db-title{font-size:13px;font-weight:700;display:flex;align-items:center;gap:8px;color:var(--text)}
.db-actions{display:flex;gap:4px}
.db-actions .btn-icon{width:28px;height:28px;border:1px solid var(--border2);border-radius:7px;background:transparent;color:var(--text3);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .12s}
.db-actions .btn-icon:hover{background:rgba(255,255,255,.06);color:var(--text);border-color:var(--accent)}
.db-table{margin:0}
.db-th{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--text3);background:var(--bg3);padding:8px 10px;position:relative}
.db-th input{background:transparent;border:none;color:var(--text3);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;width:100%;outline:none}
.db-col-del{position:absolute;right:4px;top:50%;transform:translateY(-50%);opacity:0;cursor:pointer;color:var(--red);transition:opacity .12s}
.db-th:hover .db-col-del{opacity:.7}
.db-cell{font-size:13px;padding:7px 10px;border-color:var(--border)}
.db-cell:focus{background:rgba(245,158,11,.06);box-shadow:inset 0 0 0 1px rgba(245,158,11,.25)}
.db-row-del{width:28px;text-align:center;color:var(--text3);cursor:pointer;opacity:0;transition:opacity .12s}
tr:hover .db-row-del{opacity:.6}
.db-row-del:hover{color:var(--red);opacity:1}
/* Callout blocks */
.block-callout{display:flex;gap:10px;padding:12px 14px;border-radius:10px;margin:4px 0;border:1px solid var(--border);background:var(--bg2)}
.block-callout.info{border-left:3px solid var(--blue,#3b82f6);background:rgba(59,130,246,.06)}
.block-callout.tip{border-left:3px solid var(--green);background:rgba(34,197,94,.06)}
.block-callout.warning{border-left:3px solid var(--amber,#f59e0b);background:rgba(245,158,11,.06)}
.block-callout.danger{border-left:3px solid var(--red);background:rgba(239,68,68,.06)}
.callout-icon{flex-shrink:0;margin-top:2px}
.block-callout.info .callout-icon{color:var(--blue,#3b82f6)}
.block-callout.tip .callout-icon{color:var(--green)}
.block-callout.warning .callout-icon{color:var(--amber,#f59e0b)}
.block-callout.danger .callout-icon{color:var(--red)}
.wl-chip{display:inline-block;background:rgba(59,130,246,.14);border:1px solid rgba(59,130,246,.35);color:var(--blue,#3b82f6);border-radius:6px;padding:0 6px;margin:0 1px;font-size:.92em;cursor:pointer;line-height:1.5}
.wl-chip:hover{background:rgba(59,130,246,.24)}
.aq-model-chip{display:inline-flex;align-items:center;gap:5px;font-size:11px;color:var(--green);background:rgba(34,197,94,.1);border:1px solid rgba(34,197,94,.3);border-radius:20px;padding:3px 10px;margin-top:8px}
.aq-model-chip .dot{width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 6px rgba(34,197,94,.8)}
.block-todo{display:flex;align-items:flex-start;gap:9px}
.block-todo input[type=checkbox]{margin-top:5px;accent-color:var(--accent);flex-shrink:0;width:15px;height:15px;cursor:pointer}
.block-menu{position:absolute;left:-8px;top:calc(100% + 6px);z-index:200;background:var(--menu-bg);border:1px solid var(--border2);border-radius:12px;padding:6px;min-width:230px;box-shadow:0 16px 48px rgba(0,0,0,.6);animation:pop .14s cubic-bezier(.22,1,.36,1)}
.block-menu-item{padding:7px 10px;border-radius:8px;cursor:pointer;display:flex;align-items:center;gap:10px;font-size:13px;color:var(--text2);transition:background .1s}
.block-menu-item:hover{background:rgba(255,255,255,.06);color:var(--text)}
.block-menu-item .bm-icon{width:26px;height:26px;background:rgba(255,255,255,.05);border-radius:7px;display:flex;align-items:center;justify-content:center;font-size:12px;flex-shrink:0;font-weight:600;color:var(--text)}
/* Kanban */
.kanban{display:flex;gap:16px;overflow-x:auto;padding-bottom:16px;min-height:420px;align-items:flex-start}
.kb-col{min-width:278px;background:var(--panel);border:1px solid var(--border);border-radius:var(--radius2);padding:13px;flex-shrink:0;transition:border-color .15s}
.kb-col:hover{border-color:rgba(255,255,255,.09)}
.kb-col-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:13px;padding:2px 2px}
.kb-col-title{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.7px;color:var(--text2);display:flex;align-items:center;gap:8px}
.kb-count{background:var(--chip);border-radius:20px;padding:1.5px 8px;font-size:11px;color:var(--text3);font-weight:600}
.kb-cards{min-height:50px;transition:background .15s,border-color .15s;border-radius:9px;padding:2px}
.kb-cards.drag-over{background:rgba(245,158,11,.06);outline:2px dashed rgba(245,158,11,.5);outline-offset:-2px}
.kb-card{background:linear-gradient(180deg,var(--shine),transparent),var(--bg3);border:1px solid var(--border);border-radius:11px;padding:13px;margin-bottom:9px;cursor:grab;transition:all .15s ease}
.kb-card:hover{border-color:rgba(245,158,11,.35);transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.45)}
.kb-card.dragging{opacity:.35;transform:rotate(2deg) scale(.98)}
.kb-card-title{font-size:13.5px;font-weight:500;margin-bottom:7px;line-height:1.45}
.kb-card-meta{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.kb-add{width:100%;padding:8px;background:transparent;border:1px dashed var(--border2);border-radius:9px;color:var(--text3);cursor:pointer;font-size:12px;text-align:center;transition:all .15s ease;margin-top:4px;display:flex;align-items:center;justify-content:center;gap:6px}
.kb-add svg{width:13px;height:13px}
.kb-add:hover{background:rgba(255,255,255,.045);border-color:var(--accent);color:var(--text2)}
/* Calendar */
.cal-nav{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.cal-nav .btn{width:34px;height:34px;padding:0;justify-content:center}
.cal-nav .btn svg{width:16px;height:16px}
.cal-month{font-size:17px;font-weight:700;letter-spacing:-.2px;font-feature-settings:'cv11'}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;border-radius:12px;overflow:hidden}
.cal-dh{background:var(--panel);padding:9px 8px;text-align:center;font-size:11px;font-weight:600;color:var(--text3);text-transform:uppercase;letter-spacing:.8px}
.cal-day{background:var(--panel);padding:7px;min-height:96px;cursor:pointer;transition:background .12s;border-radius:8px;position:relative}
.cal-day:hover{background:rgba(255,255,255,.045)}
.cal-day.today{box-shadow:inset 0 0 0 1px rgba(245,158,11,.55)}
.cal-day.other-month{opacity:.35}
.cal-day-num{font-size:12px;font-weight:600;margin-bottom:5px;width:23px;height:23px;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:all .12s}
.cal-day.today .cal-day-num{background:var(--grad);color:#1a0f00;font-weight:800;box-shadow:0 3px 12px rgba(245,158,11,.45)}
.cal-event{font-size:11px;padding:2.5px 7px;border-radius:5px;margin-bottom:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;transition:filter .12s;font-weight:500}
.cal-event:hover{filter:brightness(1.35)}
.cal-att{margin-left:4px;font-size:9.5px;opacity:.75}
/* Calendar week / day views + drag reschedule */
.cal-week-head{display:flex;gap:2px;margin-bottom:6px}
.cal-hour-gutter{width:52px;flex-shrink:0}
.cal-wday{flex:1;text-align:center;padding:6px 2px;border-radius:8px;cursor:pointer;background:var(--panel);font-size:10.5px;color:var(--text3);font-weight:600;letter-spacing:.3px;transition:background .12s}
.cal-wday:hover{background:rgba(255,255,255,.05)}
.cal-wday.today{color:var(--accent)}
.cal-wday.today .cal-wday-num{background:var(--grad);color:#1a0f00;border-radius:50%;width:24px;height:24px;display:flex;align-items:center;justify-content:center;margin:2px auto 0}
.cal-wday-num{font-size:15px;font-weight:800;color:var(--text);margin-top:2px}
.cal-week-body{display:flex;gap:2px}
.cal-hour-col{width:52px;flex-shrink:0;position:relative}
.cal-hour-label{position:absolute;right:8px;font-size:10px;color:var(--text3);transform:translateY(-7px);letter-spacing:.2px}
.cal-day-col{flex:1;background:var(--panel);border-radius:8px;overflow:hidden;min-width:0;position:relative}
.cal-allday-row{display:flex;gap:4px;flex-wrap:wrap;padding:5px 6px;border-bottom:1px solid var(--border);min-height:34px;align-content:flex-start}
.cal-allday-chip{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;margin-bottom:0}
.cal-timed-wrap{position:relative}
.cal-slot{position:absolute;left:0;right:0;border-top:1px solid rgba(255,255,255,.045);cursor:pointer}
.cal-slot:hover{background:rgba(255,255,255,.05)}
.cal-slot:first-child{border-top:none}
.cal-drop-target{background:color-mix(in srgb,var(--accent) 20%,transparent)!important;box-shadow:inset 0 0 0 1px var(--accent)}
.cal-ev{position:absolute;left:3px;right:3px;font-size:10.5px;padding:2px 5px;border-radius:5px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;cursor:grab;z-index:3;box-sizing:border-box;transition:filter .12s}
.cal-ev:hover{filter:brightness(1.25)}
.cal-day-wrap{max-width:880px;margin:0 auto}
.cal-day-grid{display:flex;gap:2px}
.cal-day-grid .cal-day-col{flex:none;width:100%}
.cal-week{overflow-x:auto;padding-bottom:4px}
@media (max-width:760px){.cal-week-body{min-width:640px}}
/* Chat */
.chat-wrap{display:flex;height:calc(100vh - 150px);border:1px solid var(--border);border-radius:var(--radius2);overflow:hidden;background:var(--bg2)}
.chat-sidebar{width:220px;border-right:1px solid var(--border);padding:14px 10px;flex-shrink:0;overflow-y:auto;background:var(--panel)}
.chat-section{font-size:10px;color:var(--text3);text-transform:uppercase;letter-spacing:1px;padding:10px 8px 5px;font-weight:600}
.chat-ch{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:8px;cursor:pointer;font-size:13px;color:var(--text2);transition:all .12s;margin-bottom:1px}
.chat-ch:hover{background:var(--hover);color:var(--text)}
.chat-ch.active{background:var(--focus);color:var(--active-text);font-weight:500}
.chat-hash{color:var(--text3);font-weight:600;flex-shrink:0}
.chat-main{flex:1;display:flex;flex-direction:column;min-width:0}
.chat-topbar{padding:14px 18px;border-bottom:1px solid var(--border);font-weight:600;font-size:14px;flex-shrink:0;display:flex;align-items:center;gap:8px}
.chat-topbar .chat-hash{font-size:16px}
.chat-messages{flex:1;overflow-y:auto;padding:18px;display:flex;flex-direction:column;gap:2px}
.chat-msg{padding:7px 0}
.chat-msg-head{display:flex;align-items:baseline;gap:9px;margin-bottom:2px}
.chat-msg-author{font-weight:600;font-size:13px;color:var(--text)}
.chat-msg-time{font-size:11px;color:var(--text3)}
.chat-msg-body{font-size:13.5px;line-height:1.55;color:var(--text2)}
.chat-msg{position:relative}
.chat-msg:hover .chat-msg-actions{opacity:1}
.chat-msg-actions{position:absolute;top:4px;right:0;display:flex;gap:2px;opacity:0;transition:opacity .12s;background:linear-gradient(90deg,transparent,var(--bg2) 22%);padding-left:18px}
.chat-msg-actions .btn-icon{width:24px;height:24px}
.chat-msg-actions .btn-icon svg{width:13px;height:13px}
@media(hover:none){.chat-msg-actions{opacity:1}}
.chat-msg-edited{font-size:10.5px;color:var(--text3);font-style:italic}
.chat-msg.deleted .chat-msg-body{color:var(--text3);font-style:italic}
.chat-msg-edit-row{display:flex;gap:8px;margin-top:4px}
.chat-msg-edit-row input{flex:1;padding:7px 11px;font-size:13px}
.chat-react-row{display:flex;gap:6px;margin-top:5px;flex-wrap:wrap}
.chat-react{display:inline-flex;align-items:center;gap:5px;font-size:12px;padding:3px 9px;border:1px solid var(--border2);border-radius:99px;background:var(--chip);color:var(--text2);cursor:pointer;transition:all .14s}
.chat-react:hover{background:var(--hover2);color:var(--text)}
.chat-react.on{background:var(--chip2);border-color:var(--ring);color:var(--text)}
.chat-input-row{padding:13px 16px;border-top:1px solid var(--border);display:flex;gap:9px;flex-shrink:0;background:var(--panel)}
.chat-input-row input{flex:1}
/* Files */
.file-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(138px,1fr));gap:12px}
.file-card{background:linear-gradient(180deg,rgba(255,255,255,.022),transparent),var(--bg2);border:1px solid var(--border);border-radius:var(--radius2);padding:18px 14px 14px;text-align:center;cursor:pointer;transition:all .15s ease}
.file-card:hover{border-color:rgba(245,158,11,.32);transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.4)}
.file-icon{width:44px;height:44px;margin:0 auto 10px;border-radius:12px;background:var(--field);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;color:var(--text2)}
.file-icon svg{width:21px;height:21px}
.file-name{font-size:12px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-bottom:3px;color:var(--text)}
.file-size{font-size:11px;color:var(--text3)}
.drop-zone{border:1.5px dashed var(--border2);border-radius:var(--radius2);padding:30px 20px;margin-bottom:22px;text-align:center;color:var(--text3);font-size:13px;transition:all .15s ease;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:8px;background:var(--panel)}
.drop-zone svg{width:22px;height:22px;opacity:.6}
.drop-zone:hover{border-color:var(--accent);color:var(--text2);background:rgba(245,158,11,.03)}
.drop-zone.dragover{border-color:var(--accent);color:var(--text);background:rgba(245,158,11,.06)}
/* Analytics */
.chart-card{background:linear-gradient(180deg,var(--shine),transparent),var(--bg2);border:1px solid var(--border);border-radius:var(--radius2);padding:20px;transition:border-color .15s}
.chart-card:hover{border-color:rgba(255,255,255,.1)}
.chart-title{font-size:12px;font-weight:600;color:var(--text2);margin-bottom:18px;text-transform:uppercase;letter-spacing:.7px}
/* AI */
.ai-wrap{display:flex;flex-direction:column;height:calc(100vh - 200px);flex:1}
.ai-messages{flex:1;overflow-y:auto;padding:0 0 16px;display:flex;flex-direction:column;gap:12px}
.ai-msg{max-width:78%;padding:13px 17px;border-radius:14px;font-size:14px;line-height:1.65;animation:fadeUp .2s cubic-bezier(.22,1,.36,1)}
.ai-msg.user{background:var(--grad);color:var(--accent-ink);font-weight:500;align-self:flex-end;border-bottom-right-radius:5px;box-shadow:0 4px 16px rgba(245,158,11,.2)}
.ai-msg.assistant{background:var(--bg3);border:1px solid var(--border);color:var(--text);align-self:flex-start;border-bottom-left-radius:5px}
.ai-msg.assistant pre{background:var(--bg4);border:1px solid var(--border);padding:12px;border-radius:9px;overflow-x:auto;font-size:12.5px;margin-top:9px;font-family:var(--mono);line-height:1.55}
.ai-msg.assistant code{font-family:var(--mono);font-size:12.5px}
.md-code{background:var(--chip2);padding:1.5px 6px;border-radius:5px;font-size:12.5px}
.thinking-dots{display:inline-flex;gap:3px;align-items:center}
.thinking-dots span{width:5px;height:5px;border-radius:50%;background:var(--accent);animation:bounce 1s infinite}
.thinking-dots span:nth-child(2){animation-delay:.15s}
.thinking-dots span:nth-child(3){animation-delay:.3s}
@keyframes bounce{0%,60%,100%{transform:translateY(0);opacity:.4}30%{transform:translateY(-4px);opacity:1}}
.ai-input-row{display:flex;gap:9px;padding:15px 0 0;flex-shrink:0;border-top:1px solid var(--border);margin-top:14px}
.ai-input-row textarea{flex:1;resize:none;height:46px;max-height:130px;padding:11px 15px;font-size:13.5px;line-height:1.5}
.ai-input-row .btn{align-self:flex-end}
.ai-sources{margin-top:12px;padding-top:11px;border-top:1px dashed var(--border);display:flex;flex-wrap:wrap;gap:7px;align-items:center}
.ai-src-label{font-size:10.5px;color:var(--text3);text-transform:uppercase;letter-spacing:.7px;font-weight:600;display:flex;align-items:center;gap:4px;margin-right:2px}
.ai-ex{font-size:11.5px;color:var(--text3);background:var(--chip2);border:1px solid var(--border);padding:5px 11px;border-radius:20px;cursor:pointer;transition:all .15s}
.ai-ex:hover{color:var(--text);border-color:var(--accent)}
/* Aquiles — ChatGPT-style chat */
.aq-chat{display:flex;flex-direction:column;height:calc(100vh - 215px);min-height:520px}
.aq-messages{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:14px;padding:4px 2px 18px;scroll-behavior:smooth}
.aq-hero{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:24px 10px}
.aq-hero-icon{width:56px;height:56px;border-radius:18px;background:linear-gradient(135deg,var(--accent),var(--purple,#a855f7));display:flex;align-items:center;justify-content:center;color:#fff;margin-bottom:12px;box-shadow:var(--glow);font-size:24px}
.aq-hero h2{margin:0;font-size:23px;font-weight:800;letter-spacing:-.3px}
.aq-hero p{margin:6px 0 0;font-size:13px;color:var(--text3);max-width:430px;line-height:1.55}
.aq-suggests{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:8px;margin-top:20px;width:100%;max-width:600px}
.aq-suggest{background:var(--bg3);border:1px solid var(--border);border-radius:12px;padding:11px 13px;font-size:12px;color:var(--text2);cursor:pointer;text-align:left;line-height:1.45;transition:all .15s;font-family:inherit}
.aq-suggest:hover{border-color:var(--accent);color:var(--text);transform:translateY(-1px);box-shadow:0 4px 14px rgba(0,0,0,.25)}
.aq-row{display:flex;gap:10px;max-width:82%;align-self:flex-start}
.aq-row.user{align-self:flex-end;max-width:78%}
.aq-avatar{width:30px;height:30px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--accent),var(--purple,#a855f7));color:#fff;font-size:14px;margin-top:3px}
.aq-bubble{background:var(--bg3);border:1px solid var(--border);border-radius:14px;border-bottom-left-radius:5px;padding:12px 15px;font-size:14px;line-height:1.6;min-width:0;animation:fadeUp .2s cubic-bezier(.22,1,.36,1)}
.aq-bubble.user{background:var(--grad);color:var(--accent-ink);font-weight:500;border-bottom-left-radius:14px;border-bottom-right-radius:5px;box-shadow:0 4px 16px rgba(245,158,11,.2)}
.aq-bubble pre{background:var(--bg4);border:1px solid var(--border);padding:12px;border-radius:9px;overflow-x:auto;font-size:12.5px;margin-top:9px;font-family:var(--mono);line-height:1.55}
.aq-bubble code{font-family:var(--mono);font-size:12.5px}
.aq-thinking{display:inline-flex;align-items:center;gap:7px;color:var(--text2);font-size:13px}
.aq-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:10px}
.aq-act{font-size:11px;padding:4px 9px;border-radius:14px;border:1px solid var(--border);background:var(--chip);color:var(--text3);cursor:pointer;transition:all .15s;display:inline-flex;align-items:center;gap:4px}
.aq-act:hover{color:var(--text);border-color:var(--accent)}
.aq-composer-wrap{padding:6px 0 2px;flex-shrink:0}
.aq-composer{max-width:760px;margin:0 auto;background:var(--bg3);border:1px solid var(--border2);border-radius:20px;padding:6px 8px;display:flex;align-items:flex-end;gap:6px;transition:border-color .15s,box-shadow .15s}
.aq-composer:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px rgba(245,158,11,.12)}
.aq-composer textarea{flex:1;border:none;background:transparent;resize:none;height:42px;max-height:150px;padding:10px 8px;font-size:14px;line-height:1.5;outline:none;font-family:inherit}
.aq-send{width:34px;height:34px;border-radius:50%;background:var(--grad);color:var(--accent-ink);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:opacity .15s,transform .1s}
.aq-send:hover{transform:scale(1.06)}
.aq-modes{display:flex;align-items:center;justify-content:center;gap:4px;padding:0 0 8px;flex-wrap:wrap}
.aq-mode{font-size:11.5px;padding:5px 12px;border-radius:20px;border:1px solid var(--border);background:var(--bg2);color:var(--text3);cursor:pointer;transition:all .15s}
.aq-mode svg{vertical-align:-2px;margin-right:4px}
.aq-mode.on{color:var(--accent-ink);background:var(--grad);border-color:transparent;font-weight:600}
.aq-composer-foot{text-align:center;font-size:10.5px;color:var(--text3);margin-top:7px}
.aq-extras{margin-top:12px}
.aq-extras-toggle{font-size:11.5px;color:var(--text3);background:none;border:1px solid var(--border);border-radius:20px;padding:5px 12px;cursor:pointer;display:inline-flex;align-items:center;gap:6px;transition:all .15s}
.aq-extras-toggle:hover{color:var(--text);border-color:var(--accent)}
.aq-extras-body{border-top:1px solid var(--border);margin-top:12px;padding-top:4px}
  .aq-cmd-box{margin-top:8px;padding:9px 11px;background:var(--bg3, rgba(255,255,255,.04));border:1px solid var(--border);border-radius:8px;font-family:ui-monospace,Consolas,monospace;font-size:12px;color:var(--text);white-space:pre-wrap;word-break:break-all;overflow-wrap:anywhere}
.aq-examples{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.aq-ex-chip{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--border);background:var(--bg2);border-radius:22px;padding:5px 6px 5px 11px}
.aq-ex-cat{font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text3)}
.aq-why{font-size:11px;padding:5px 10px;color:var(--text3)}
/* Privacy Center */
.pr-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(185px,1fr));gap:10px}
.pr-card{background:linear-gradient(180deg,var(--shine),transparent),var(--bg2);border:1px solid var(--border);border-radius:var(--radius2);padding:14px 15px;transition:border-color .15s}
.pr-card:hover{border-color:rgba(255,255,255,.12)}
.pr-card.warn{border-color:rgba(239,68,68,.45)}
.pr-card-head{display:flex;align-items:center;gap:8px;margin-bottom:10px;color:var(--green)}
.pr-card.warn .pr-card-head{color:var(--red)}
.pr-val{font-size:13.5px;font-weight:700;letter-spacing:.6px;color:var(--text)}
.pr-label{font-size:11px;color:var(--text3);text-transform:uppercase;letter-spacing:.7px;font-weight:600;margin-bottom:3px}
.pr-sub{font-size:11.5px;color:var(--text3);line-height:1.5}
.pr-leave{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:13px 4px;border-bottom:1px solid var(--border)}
.pr-leave:last-child{border-bottom:none}
.pr-leave-what{font-size:13px;font-weight:600;color:var(--text2)}
.pr-leave-detail{font-size:11.5px;color:var(--text3);margin-top:2px}
.pr-leave-when{font-size:11px;color:var(--text3);background:var(--chip2);border:1px solid var(--border);padding:4px 10px;border-radius:20px;white-space:nowrap;flex-shrink:0}
.pr-principles{background:linear-gradient(180deg,rgba(245,158,11,.04),transparent),var(--bg2);border:1px solid var(--border);border-radius:var(--radius2);padding:20px;margin-top:26px}
/* Settings */
.settings-section{margin-bottom:30px}
.settings-title{font-size:12px;font-weight:700;margin-bottom:14px;padding-bottom:10px;border-bottom:1px solid var(--border);color:var(--text2);text-transform:uppercase;letter-spacing:.9px}
.settings-row{display:flex;align-items:center;justify-content:space-between;padding:14px 4px;border-bottom:1px solid var(--border);gap:16px}
.settings-row:last-child{border-bottom:none}
.settings-label{font-size:13px;font-weight:600}
.settings-desc{font-size:12px;color:var(--text3);margin-top:3px}
.settings-row input,.settings-row select{max-width:270px}
.saved-chip{display:inline-flex;align-items:center;gap:6px;margin-left:14px;font-size:12.5px;font-weight:600;color:var(--green);opacity:0;transition:opacity .2s;transform:translateY(2px)}
.saved-chip svg{width:14px;height:14px}
.saved-chip.show{opacity:1;transform:none}
/* Admin shell */
.admin-tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px}
.admin-tab{background:var(--bg2);border:1px solid var(--border);border-radius:8px;padding:7px 12px;font-size:12.5px;font-weight:600;color:var(--text2);cursor:pointer;transition:background .12s,border-color .12s,color .12s}
.admin-tab:hover{background:var(--bg3);border-color:var(--border2);color:var(--text)}
.admin-tab:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.admin-tab.on{background:linear-gradient(180deg,var(--accent),rgba(139,92,246,.12));border-color:var(--accent);color:#fff}
.admin-tab svg{color:#fff}
.admin-tab .admin-tab-ic{display:inline-block;margin-right:6px;vertical-align:-1px}
.admin-section-card{background:var(--bg2);border:1px solid var(--border);border-radius:12px;padding:14px 16px}
.admin-filter-clear{font-size:11px;color:var(--accent);text-decoration:underline;cursor:pointer;background:none;border:none;padding:0}
.admin-shell-body{margin-top:6px}
.admin-shell-card{border:1px solid var(--border);border-radius:12px;background:var(--bg2);padding:16px 18px;margin-bottom:14px}
.admin-shell-card>.settings-title:first-child{margin-top:0}
/* Database table */
.db-wrap{overflow-x:auto;border:1px solid var(--border);border-radius:var(--radius2);background:var(--bg2)}
.db-table{width:100%;border-collapse:collapse;min-width:520px}
.db-table th{text-align:left;padding:11px 14px;font-size:10.5px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:.8px;border-bottom:1px solid var(--border);background:var(--panel)}
.db-table td{padding:6px 8px;border-bottom:1px solid rgba(255,255,255,.04)}
.db-table tr:last-child td{border-bottom:none}
.db-table tbody tr{transition:background .1s}
.db-table tbody tr:hover{background:var(--hover)}
.db-cell-input{background:transparent;border:none;color:var(--text);font-size:13px;width:100%;padding:7px 10px;border-radius:7px;transition:background .12s}
.db-cell-input:hover{background:var(--field)}
.db-cell-input:focus{background:var(--focus);box-shadow:inset 0 0 0 1px rgba(245,158,11,.3)}
.db-delete{opacity:.35;transition:opacity .12s}
.db-delete:hover{opacity:1;color:var(--red)}
.db-tpl{border:1px solid var(--border);border-radius:12px;padding:12px;cursor:pointer;transition:all .15s;background:var(--bg2)}
.db-tpl:hover{border-color:var(--accent);transform:translateY(-1px)}
.seg-btn{background:none;border:none;color:var(--text3);font-size:11.5px;font-weight:600;padding:5px 12px;border-radius:8px;cursor:pointer;transition:all .12s}
.seg-btn.on{background:var(--bg2);color:var(--text);box-shadow:0 1px 4px rgba(0,0,0,.25)}
.db-board-col{min-width:230px;max-width:280px;flex-shrink:0;background:var(--bg2);border:1px solid var(--border);border-radius:12px;padding:10px}
.db-board-card{background:var(--panel);border:1px solid var(--border);border-radius:10px;padding:11px 12px;transition:border-color .12s}
.db-board-card:hover{border-color:rgba(255,255,255,.14)}
/* ── AI panes (responsive classes) ── */
.ai-panes{display:flex;gap:22px;height:calc(100vh - 210px)}
.conv-panel{width:210px;flex-shrink:0}
/* ── Toast ── */
#toast{position:fixed;left:50%;bottom:76px;transform:translateX(-50%) translateY(12px);background:var(--bg4);color:var(--text);border:1px solid var(--border2);padding:10px 16px;border-radius:10px;font-size:13px;box-shadow:var(--shadow);opacity:0;pointer-events:none;transition:all .25s ease;z-index:1000;max-width:86vw;text-align:center}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
/* ── Adaptive layout (tablet / mobile) ── */
.mobile-menu-btn{display:none}
.sidebar-backdrop{display:none}
.bottom-nav{display:none}
@media (max-width:1180px){
  .content{padding:28px 30px 64px}
  .grid-4{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:900px){
  .sidebar{position:fixed;left:0;top:0;bottom:0;z-index:610;transform:translateX(-100%);box-shadow:0 0 60px rgba(0,0,0,.55);width:250px}
  .sidebar-open .sidebar{transform:translateX(0)}
  /* On mobile the drawer is always fully expanded, regardless of desktop collapse state */
  .app-collapsed .sidebar{width:250px}
  .app-collapsed .sidebar-logo{justify-content:flex-start;padding:20px 16px 16px;gap:11px}
  .app-collapsed .logo-txt{display:block}
  .app-collapsed .nav-section{display:block}
  .app-collapsed .nav-item{justify-content:flex-start;padding:8.5px 11px;gap:10px}
  .app-collapsed .nav-item span{display:inline}
  .app-collapsed .nav-item.active::before{display:block}
  .app-collapsed .sidebar-footer{padding:12px;align-items:stretch}
  .app-collapsed .local-chip{display:flex}
  .app-collapsed .u-meta{display:block}
  .app-collapsed .sidebar-user{justify-content:flex-start;padding:9px 10px}
  .app-collapsed .collapse-toggle{justify-content:flex-start;padding:8px 10px}
  .app-collapsed .ct-label{display:inline}
  .sidebar-backdrop{position:fixed;inset:0;z-index:600;background:rgba(0,0,0,.5);backdrop-filter:blur(2px)}
  .sidebar-open .sidebar-backdrop{display:block}
  .mobile-menu-btn{display:inline-flex}
  .content{max-width:none;padding:22px 20px 64px}
  .search-bar{max-width:none}
}
@media (max-width:640px){
  .topbar{padding:0 10px;height:50px}
  .topbar .search-bar kbd{display:none}
  .topbar .search-bar span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .content{padding:18px 14px 88px}
  .page-title{font-size:23px}
  .grid-2,.grid-3{grid-template-columns:1fr}
  .grid-4{grid-template-columns:repeat(2,1fr);gap:10px}
  .stat-card{padding:14px}
  .kanban .kb-col{min-width:240px}
  .chat-wrap{flex-direction:column;height:calc(100vh - 200px)}
  .chat-sidebar{width:100%;max-height:38%;border-right:none;border-bottom:1px solid var(--border);padding:8px;display:flex;flex-wrap:wrap;gap:4px;align-items:center}
  .chat-section{display:none}
  .chat-ch{font-size:12px;padding:6px 9px}
  .chat-main{flex:1;min-height:0}
  .conv-panel .chat-ch{max-width:170px}
  .ai-panes{flex-direction:column;height:calc(100vh - 250px);gap:10px}
  .conv-panel{width:100%;display:flex;flex-wrap:wrap;gap:4px;align-items:center}
  .conv-panel>div:first-child{display:none}
  .ai-wrap{height:auto;flex:1}
  .cal-day{min-height:62px;padding:4px}
  .cal-day-num{width:20px;height:20px;font-size:11px}
  .cal-event{font-size:10px;padding:1.5px 4px}
  .modal{min-width:0;width:94vw;padding:20px}
  .doc-editor{padding:0 2px}
  .ai-msg{max-width:90%}
  .db-wrap{margin:0 -4px}
  #toast{bottom:70px}
  .bottom-nav{display:flex;position:fixed;left:0;right:0;bottom:0;height:54px;z-index:500;background:var(--topbar-bg);backdrop-filter:blur(14px);border-top:1px solid var(--border);align-items:center;justify-content:space-around;padding:0 4px;padding-bottom:env(safe-area-inset-bottom)}
  .bottom-nav .bn-item{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;flex:1;height:100%;border:none;background:none;cursor:pointer;color:var(--text3);font-size:9.5px;font-weight:500;transition:color .12s}
  .bottom-nav .bn-item svg{width:19px;height:19px}
  .bottom-nav .bn-item.active{color:var(--accent)}
  .bottom-nav .bn-item:active{transform:scale(.92)}
}
/* ── Native-phone polish — Android WebView only (html[data-mobile] set by mobile-bootstrap.js) ── */
html[data-mobile],html[data-mobile] body{overscroll-behavior:none;-webkit-text-size-adjust:100%}
html[data-mobile] button,html[data-mobile] a,html[data-mobile] input,html[data-mobile] select,html[data-mobile] textarea,html[data-mobile] label,html[data-mobile] .bn-item,html[data-mobile] .nav-item,html[data-mobile] .w-row-item,html[data-mobile] .kb-card{touch-action:manipulation}
html[data-mobile] .topbar{height:calc(50px + env(safe-area-inset-top));padding-top:env(safe-area-inset-top)}
html[data-mobile] .content{padding-bottom:calc(88px + env(safe-area-inset-bottom))}
html[data-mobile] .bottom-nav{height:calc(54px + env(safe-area-inset-bottom))}
/* Favorites widget: type badge for non-page favorites (databases, decisions) */
.favcard-badge{font-size:8.5px;font-weight:800;letter-spacing:.6px;color:var(--text3);border:1px solid var(--border);border-radius:4px;padding:1px 5px;background:var(--bg2)}

/* Dialogs become bottom sheets on phones — slide up, rounded top, grab handle */
html[data-mobile] .overlay{align-items:flex-end}
html[data-mobile] .modal{width:100%;max-width:100%;min-width:0;max-height:88dvh;border-radius:20px 20px 0 0;padding:20px 20px calc(20px + env(safe-area-inset-bottom));animation:sheetUp .28s cubic-bezier(.32,.72,.24,1)}
html[data-mobile] .modal::before{content:"";display:block;width:38px;height:4px;border-radius:99px;background:var(--border2);margin:0 auto 14px}
@keyframes sheetUp{from{opacity:.5;transform:translateY(28px)}to{opacity:1;transform:none}}
/* Keyboard open: hide the bottom nav so it never covers inputs */
html[data-mobile].kb-open .bottom-nav{display:none}
html[data-mobile].kb-open .content{padding-bottom:26px}
/* Comfortable touch targets on phone */
html[data-mobile] .btn{min-height:44px}
html[data-mobile] input,html[data-mobile] select,html[data-mobile] textarea{min-height:44px}
html[data-mobile] .btn-icon{width:38px;height:38px}
html[data-mobile] .nav-item,html[data-mobile] .w-row-item,html[data-mobile] .settings-row,html[data-mobile] .t-item{min-height:46px}
html[data-mobile] .bn-item,html[data-mobile] .nav-item,html[data-mobile] .btn,html[data-mobile] .btn-icon,html[data-mobile] .tag-chip{user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}
/* ── Density modes (desktop/tablet; mobile keeps its adaptive presets) ── */
@media (min-width:641px){
  html[data-density="compact"] .topbar{height:46px}
  html[data-density="compact"] .sidebar{width:208px}
  html[data-density="compact"] .sidebar-logo{padding:14px 14px 11px}
  html[data-density="compact"] .logo-mark{width:26px;height:26px;border-radius:7px;font-size:13px}
  html[data-density="compact"] .logo-text{font-size:13.5px}
  html[data-density="compact"] .logo-sub{font-size:9px}
  html[data-density="compact"] .nav-item{padding:6px 9px;font-size:12.5px;margin-bottom:0}
  html[data-density="compact"] .nav-section{padding:10px 10px 4px;font-size:9.5px}
  html[data-density="compact"] .sidebar-footer{padding:10px}
  html[data-density="compact"] .content{padding:22px 26px 48px}
  html[data-density="compact"] .page-header{margin-bottom:18px}
  html[data-density="compact"] .page-title{font-size:22px;margin-bottom:2px}
  html[data-density="compact"] .page-sub{font-size:12px}
  html[data-density="compact"] .card{padding:12px}
  html[data-density="compact"] .stat-card{padding:13px;gap:11px}
  html[data-density="compact"] .stat-ic{width:32px;height:32px;border-radius:8px}
  html[data-density="compact"] .stat-val{font-size:22px}
  html[data-density="compact"] .grid{gap:10px}
  html[data-density="compact"] .btn{padding:6px 12px;font-size:12.5px;border-radius:8px}
  html[data-density="compact"] .btn-icon{padding:5px}
  html[data-density="compact"] input,html[data-density="compact"] textarea,html[data-density="compact"] select{padding:7px 11px;font-size:12.5px}
  html[data-density="compact"] .search-bar{padding:6px 11px}
  html[data-density="compact"] .kb-col{min-width:250px;padding:10px}
  html[data-density="compact"] .kb-card{padding:10px}
  html[data-density="compact"] .empty{padding:36px 20px}
  html[data-density="compact"] .settings-row{padding:10px 4px}
  html[data-density="compact"] .chat-wrap{height:calc(100vh - 140px)}
  html[data-density="compact"] .ai-panes{height:calc(100vh - 190px)}
  html[data-density="compact"] .modal{padding:20px}
  html[data-density="expanded"] .sidebar{width:256px}
  html[data-density="expanded"] .content{padding:44px 56px 84px}
  html[data-density="expanded"] .page-title{font-size:30px}
  html[data-density="expanded"] .page-header{margin-bottom:34px}
  html[data-density="expanded"] .nav-item{padding:10px 12px}
  html[data-density="expanded"] .card{padding:20px}
  html[data-density="expanded"] .grid{gap:18px}
  html[data-density="expanded"] .stat-card{gap:16px}
  html[data-density="expanded"] .stat-val{font-size:32px}
  html[data-density="expanded"] .btn{padding:9px 17px}
  html[data-density="expanded"] .settings-row{padding:16px 4px}
  /* Collapsed icon rail must win over density widths (higher specificity) */
  html[data-density="compact"] .app-collapsed .sidebar{width:64px}
  html[data-density="compact"] .app-collapsed .sidebar-logo{justify-content:center;padding:20px 8px 16px;gap:0}
  html[data-density="compact"] .app-collapsed .logo-txt{display:none}
  html[data-density="compact"] .app-collapsed .nav-section{display:none}
  html[data-density="compact"] .app-collapsed .nav-item{justify-content:center;padding:10px 0;gap:0}
  html[data-density="compact"] .app-collapsed .nav-item span{display:none}
  html[data-density="compact"] .app-collapsed .nav-item.active::before{display:none}
  html[data-density="compact"] .app-collapsed .sidebar-footer{padding:12px 8px;align-items:stretch}
  html[data-density="compact"] .app-collapsed .local-chip{display:none}
  html[data-density="compact"] .app-collapsed .u-meta{display:none}
  html[data-density="expanded"] .app-collapsed .sidebar{width:64px}
  html[data-density="expanded"] .app-collapsed .sidebar-logo{justify-content:center;padding:20px 8px 16px;gap:0}
  html[data-density="expanded"] .app-collapsed .logo-txt{display:none}
  html[data-density="expanded"] .app-collapsed .nav-section{display:none}
  html[data-density="expanded"] .app-collapsed .nav-item{justify-content:center;padding:10px 0;gap:0}
  html[data-density="expanded"] .app-collapsed .nav-item span{display:none}
  html[data-density="expanded"] .app-collapsed .nav-item.active::before{display:none}
  html[data-density="expanded"] .app-collapsed .sidebar-footer{padding:12px 8px;align-items:stretch}
  html[data-density="expanded"] .app-collapsed .local-chip{display:none}
  html[data-density="expanded"] .app-collapsed .u-meta{display:none}
}
/* ── Bedrock Glass — the material system (Dark + Glass share it) ────── */
/* Glass is a material, not a color. The UI is built on five levels (see
   the token engine in :root): L0 environment, L1 frost, L2 core, L3 dense,
   L4 crystal. Every surface below derives from those tokens. */

/* Level 0 — Environment. Graphite base with quiet metallic shapes (a chrome
   torus and a sphere, as in the reference mockup) and a micro-noise overlay.
   The environment stays dark, calm and monochrome — the colored accents live
   in the UI, not behind it. GPU-friendly single fixed layer. */
html[data-theme="dark"] body,html[data-theme="dark"] .shell-desktop{background:#0a0b0e}
html[data-theme="dark"] body::before{
  content:'';position:fixed;inset:-26%;z-index:0;pointer-events:none;will-change:transform;
  background:
    radial-gradient(30% 24% at 82% 12%,rgba(190,198,214,.1),transparent 60%),
    radial-gradient(24% 20% at 10% 88%,rgba(160,168,184,.07),transparent 60%),
    radial-gradient(50% 42% at 50% 50%,rgba(150,158,174,.04),transparent 70%),
    #0a0b0e;
}
html[data-theme="glass"] body{background:#0c0d12}
html[data-theme="glass"] body::before{
  content:'';position:fixed;inset:-32%;z-index:0;pointer-events:none;will-change:transform;
  background:
    /* chrome torus — upper right */
    radial-gradient(26% 20% at 80% 12%,rgba(255,255,255,.09),transparent 55%),
    radial-gradient(24% 18% at 80% 12%,rgba(205,213,228,.07) 55%,transparent 72%),
    /* chrome sphere — lower left */
    radial-gradient(22% 20% at 12% 86%,rgba(255,255,255,.06),transparent 55%),
    radial-gradient(20% 18% at 12% 86%,rgba(195,203,218,.05) 55%,transparent 72%),
    /* soft ambient wash */
    radial-gradient(50% 42% at 50% 48%,rgba(170,178,194,.05),transparent 70%),
    #0c0d12;
}
/* Micro-texture — near-invisible grain over the environment so surfaces
   never read as flat plastic. Static, zero GPU cost when not animating. */
html[data-theme="dark"] body::after,html[data-theme="glass"] body::after{
  content:'';position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:var(--glass-noise);background-size:160px 160px;
  opacity:.03;mix-blend-mode:overlay;
}
@keyframes glassDrift{
  0%{transform:translate3d(-2.2%,-1.6%,0) scale(1.06)}
  55%{transform:translate3d(1.8%,1.2%,0) scale(1.12)}
  100%{transform:translate3d(-1.2%,2.4%,0) scale(1.04)}
}
/* Drift is a Quality-tier effect; Balanced keeps the field frozen (cheap). */
html[data-theme="dark"] body::before,html[data-theme="glass"] body::before{animation:none}
html[data-gfx="quality"] body::before{animation:glassDrift 34s ease-in-out infinite alternate}
html[data-theme="dark"] #app,html[data-theme="dark"] .shell-desktop,html[data-theme="dark"] .shell-win,html[data-theme="dark"] .boot-screen,
html[data-theme="glass"] #app,html[data-theme="glass"] .shell-desktop,html[data-theme="glass"] .shell-win,html[data-theme="glass"] .boot-screen{position:relative;z-index:1}
/* Glass theme strengthens the shared material tokens; Dark keeps the subtle
   defaults from :root. Both stay on the same engine — levels, not colors. */
html[data-theme="glass"]{
  --glass-l1-tint:rgba(255,255,255,.06); --glass-l1-tint2:rgba(255,255,255,.1);
  --glass-l1-blur:blur(18px) saturate(160%) brightness(1.03);
  --glass-l1-edge:inset 0 1px 0 rgba(255,255,255,.12);
  --glass-l2-tint:rgba(255,255,255,.085); --glass-l2-tint2:rgba(255,255,255,.15);
  --glass-l2-blur:blur(32px) saturate(190%) brightness(1.05);
  --glass-l2-edge:inset 0 1px 0 rgba(255,255,255,.16);
  --glass-l2-shadow:0 20px 52px rgba(0,0,0,.44),0 2px 8px rgba(0,0,0,.16);
  --glass-l3-tint:rgba(255,255,255,.14); --glass-l3-tint2:rgba(255,255,255,.22);
  --glass-l3-blur:blur(52px) saturate(210%) brightness(1.06);
  --glass-l3-edge:inset 0 1px 0 rgba(255,255,255,.2);
  --glass-l4-tint:rgba(255,255,255,.18); --glass-l4-tint2:rgba(255,255,255,.3);
  --glass-l4-blur:blur(64px) saturate(225%) brightness(1.07);
  --glass-l4-edge:inset 0 1px 0 rgba(255,255,255,.26),inset 0 0 0 1px rgba(255,255,255,.04);
  /* legacy aliases resolve to the levels */
  --glass-tint:var(--glass-l2-tint); --glass-tint2:var(--glass-l2-tint2);
  --edge-top:var(--glass-l2-edge); --edge-top-strong:inset 0 1px 0 rgba(255,255,255,.24);
  --blur-surface:var(--glass-l2-blur); --blur-elevated:var(--glass-l3-blur); --blur-floating:var(--glass-l4-blur);
}
/* Level 2 — Core Glass. Primary panels, cards, navigation. Medium
   transparency, strong frost, thin optical edge, soft environmental shadow
   (ambient + contact), a whisper of internal reflection from the top-left. */
html[data-theme="dark"] .card,html[data-theme="dark"] .stat-card,html[data-theme="dark"] .kb-card,
html[data-theme="dark"] .file-card,html[data-theme="dark"] .chart-card,html[data-theme="dark"] .chat-wrap,
html[data-theme="dark"] .db-wrap,html[data-theme="dark"] .w-card,
html[data-theme="glass"] .card,html[data-theme="glass"] .stat-card,html[data-theme="glass"] .kb-card,
html[data-theme="glass"] .file-card,html[data-theme="glass"] .chart-card,html[data-theme="glass"] .chat-wrap,
html[data-theme="glass"] .db-wrap,html[data-theme="glass"] .w-card{
  background:
    linear-gradient(115deg,var(--glass-l2-tint2) 0%,var(--glass-l2-tint) 34%,rgba(255,255,255,.015) 60%,rgba(255,255,255,.045) 100%),
    linear-gradient(180deg,var(--glass-l2-tint),rgba(255,255,255,.02));
  backdrop-filter:var(--glass-l2-blur);-webkit-backdrop-filter:var(--glass-l2-blur);
  border-color:rgba(255,255,255,.12);
  box-shadow:
    var(--glass-l2-shadow),
    var(--glass-l2-edge),
    inset 0 -1px 0 rgba(255,255,255,.04),
    inset 0 0 24px rgba(255,255,255,.012);
}
html[data-theme="dark"] .card:hover,html[data-theme="dark"] .stat-card:hover,html[data-theme="dark"] .kb-card:hover,
html[data-theme="dark"] .file-card:hover,html[data-theme="dark"] .chart-card:hover,html[data-theme="dark"] .chat-wrap:hover,
html[data-theme="dark"] .db-wrap:hover,html[data-theme="dark"] .w-card:hover,
html[data-theme="glass"] .card:hover,html[data-theme="glass"] .stat-card:hover,html[data-theme="glass"] .kb-card:hover,
html[data-theme="glass"] .file-card:hover,html[data-theme="glass"] .chart-card:hover,html[data-theme="glass"] .chat-wrap:hover,
html[data-theme="glass"] .db-wrap:hover,html[data-theme="glass"] .w-card:hover{
  border-color:rgba(255,255,255,.2);
  background:
    linear-gradient(115deg,var(--glass-l2-tint2) 0%,rgba(255,255,255,.07) 32%,rgba(255,255,255,.02) 60%,rgba(255,255,255,.06) 100%),
    linear-gradient(180deg,var(--glass-l2-tint),rgba(255,255,255,.03));
  box-shadow:
    0 24px 60px rgba(0,0,0,.5),
    inset 0 1px 0 rgba(255,255,255,.2),
    inset 0 -1px 0 rgba(255,255,255,.05),
    inset 0 0 28px rgba(255,255,255,.02);
  transform:translateY(-1px);
}

/* Cursor spotlight (Quality tier): the glass surface responds to the pointer
   with a soft light that follows it — set from JS as --mx / --my. */
html[data-gfx="quality"] .card,html[data-gfx="quality"] .stat-card,html[data-gfx="quality"] .kb-card,
html[data-gfx="quality"] .file-card,html[data-gfx="quality"] .chart-card,html[data-gfx="quality"] .chat-wrap,
html[data-gfx="quality"] .db-wrap,html[data-gfx="quality"] .w-card{position:relative}
html[data-gfx="quality"] .card::after,html[data-gfx="quality"] .stat-card::after,html[data-gfx="quality"] .kb-card::after,
html[data-gfx="quality"] .file-card::after,html[data-gfx="quality"] .chart-card::after,html[data-gfx="quality"] .chat-wrap::after,
html[data-gfx="quality"] .db-wrap::after,html[data-gfx="quality"] .w-card::after{
  content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(480px circle at var(--mx,130%) var(--my,40%),rgba(255,255,255,.08),transparent 55%);
  opacity:0;transition:opacity .25s ease;
}
html[data-gfx="quality"] .card:hover::after,html[data-gfx="quality"] .stat-card:hover::after,html[data-gfx="quality"] .kb-card:hover::after,
html[data-gfx="quality"] .file-card:hover::after,html[data-gfx="quality"] .chart-card:hover::after,html[data-gfx="quality"] .chat-wrap:hover::after,
html[data-gfx="quality"] .db-wrap:hover::after,html[data-gfx="quality"] .w-card:hover::after{opacity:1}
/* Sidebar + topbar — Level 2 Core Glass (navigation material). */
html[data-theme="dark"] .sidebar,html[data-theme="glass"] .sidebar{
  background:linear-gradient(115deg,var(--glass-l2-tint) 0%,rgba(255,255,255,.02) 60%),linear-gradient(180deg,var(--glass-l2-tint),rgba(255,255,255,.02));
  backdrop-filter:var(--glass-l3-blur);-webkit-backdrop-filter:var(--glass-l3-blur);
  border-right-color:rgba(255,255,255,.11);
  box-shadow:inset 1px 0 0 rgba(255,255,255,.03),var(--glass-l2-edge)}
html[data-theme="dark"] .topbar,html[data-theme="glass"] .topbar{
  background:linear-gradient(180deg,var(--glass-l2-tint),rgba(255,255,255,.02));
  backdrop-filter:var(--glass-l2-blur);-webkit-backdrop-filter:var(--glass-l2-blur);
  border-bottom-color:rgba(255,255,255,.11);
  box-shadow:var(--glass-l2-edge)}
/* Level 3 — Dense Glass. Dialogs, menus, system panels: higher opacity,
   stronger blur, sharper edge definition. Still glass, never flat. */
html[data-theme="dark"] .modal,html[data-theme="glass"] .modal{
  background:linear-gradient(160deg,var(--glass-l3-tint2),var(--glass-l3-tint));
  backdrop-filter:var(--glass-l3-blur);-webkit-backdrop-filter:var(--glass-l3-blur);
  border-color:rgba(255,255,255,.18);
  box-shadow:var(--glass-l3-shadow),var(--glass-l3-edge),inset 0 -1px 0 rgba(255,255,255,.05)}
/* Level 4 — Bedrock Crystal. Command palette (search), AI surface: layered
   translucency, the strongest frost, directional edge light. Used sparingly. */
html[data-theme="dark"] .search-box,html[data-theme="glass"] .search-box{
  background:linear-gradient(160deg,var(--glass-l4-tint2),var(--glass-l4-tint));
  backdrop-filter:var(--glass-l4-blur);-webkit-backdrop-filter:var(--glass-l4-blur);
  border-color:rgba(255,255,255,.24);
  box-shadow:var(--glass-l4-shadow),var(--glass-l4-edge),inset 0 -1px 0 rgba(255,255,255,.06)}
/* Dropdowns / context menus / dock / control center — Level 3 Dense. */
html[data-theme="dark"] .block-menu,html[data-theme="dark"] .shell-cc,html[data-theme="dark"] .shell-dock,
html[data-theme="dark"] .dock-item .d-label,
html[data-theme="glass"] .block-menu,html[data-theme="glass"] .shell-cc,html[data-theme="glass"] .shell-dock,
html[data-theme="glass"] .dock-item .d-label{
  background:var(--menu-bg);
  backdrop-filter:var(--glass-l3-blur);-webkit-backdrop-filter:var(--glass-l3-blur);
  border-color:rgba(255,255,255,.16);
  box-shadow:var(--glass-l3-shadow),var(--glass-l3-edge)}
/* Toast notifications — compact floating glass (Level 3, small form). */
html[data-theme="dark"] #toast,html[data-theme="glass"] #toast{
  background:var(--glass-l3-tint2);
  backdrop-filter:var(--glass-l3-blur);-webkit-backdrop-filter:var(--glass-l3-blur);
  border-color:rgba(255,255,255,.2);
  box-shadow:var(--glass-l2-shadow),var(--glass-l3-edge)}
/* Level 1 — Frost. Lightweight secondary fills. */
html[data-theme="dark"] .chat-sidebar,html[data-theme="dark"] .cal-dh,html[data-theme="dark"] .cal-day,html[data-theme="dark"] .chat-input-row,
html[data-theme="glass"] .chat-sidebar,html[data-theme="glass"] .cal-dh,html[data-theme="glass"] .cal-day,html[data-theme="glass"] .chat-input-row{background:var(--glass-l1-tint)}
html[data-theme="dark"] .modal .btn-ghost,html[data-theme="dark"] .search-box .btn-ghost,
html[data-theme="glass"] .modal .btn-ghost,html[data-theme="glass"] .search-box .btn-ghost{background:var(--glass-l1-tint2)}
/* Control Glass — ghost buttons and inputs: a Level 1 frost fill with an
   optical edge highlight instead of a flat field. */
html[data-theme="dark"] .btn-ghost,html[data-theme="glass"] .btn-ghost{
  background:var(--glass-l1-tint);border-color:rgba(255,255,255,.14);
  backdrop-filter:var(--glass-l1-blur);-webkit-backdrop-filter:var(--glass-l1-blur);
  box-shadow:var(--glass-l1-edge)}
html[data-theme="dark"] .btn-ghost:hover,html[data-theme="glass"] .btn-ghost:hover{
  background:var(--glass-l1-tint2);border-color:rgba(255,255,255,.22)}
html[data-theme="dark"] input,html[data-theme="dark"] textarea,html[data-theme="dark"] select,
html[data-theme="glass"] input,html[data-theme="glass"] textarea,html[data-theme="glass"] select{
  background:var(--glass-l1-tint);border-color:rgba(255,255,255,.12);
  box-shadow:var(--glass-l1-edge)}
html[data-theme="dark"] input:focus,html[data-theme="dark"] textarea:focus,html[data-theme="dark"] select:focus,
html[data-theme="glass"] input:focus,html[data-theme="glass"] textarea:focus,html[data-theme="glass"] select:focus{
  border-color:var(--accent);box-shadow:0 0 0 3px var(--ring),var(--glass-l1-edge)}
/* Mobile bottom nav + segmented controls — capsule treatment for both. */
html[data-theme="dark"] .bottom-nav,html[data-theme="glass"] .bottom-nav{
  background:linear-gradient(180deg,var(--glass-l2-tint),rgba(255,255,255,.03));
  backdrop-filter:var(--glass-l2-blur);-webkit-backdrop-filter:var(--glass-l2-blur);
  border-top-color:rgba(255,255,255,.13);
  box-shadow:var(--glass-l2-edge)}
html[data-theme="dark"] .seg,html[data-theme="glass"] .seg{background:var(--glass-l1-tint)!important;border-color:rgba(255,255,255,.15)!important;box-shadow:var(--glass-l1-edge)}
html[data-theme="dark"] .seg-btn.on,html[data-theme="glass"] .seg-btn.on{
  background:linear-gradient(180deg,var(--glass-l2-tint2),var(--glass-l2-tint));
  box-shadow:var(--glass-l2-edge),0 4px 14px rgba(0,0,0,.22)}
/* True-black pairing (must win the cascade): pure surfaces, borders only. */
html[data-theme="dark"][data-trueblack] .card,
html[data-theme="dark"][data-trueblack] .stat-card,
html[data-theme="dark"][data-trueblack] .kb-card,
html[data-theme="dark"][data-trueblack] .file-card,
html[data-theme="dark"][data-trueblack] .chart-card,
html[data-theme="dark"][data-trueblack] .chat-wrap,
html[data-theme="dark"][data-trueblack] .db-wrap,
html[data-theme="dark"][data-trueblack] .w-card,
html[data-theme="glass"][data-trueblack] .card,
html[data-theme="glass"][data-trueblack] .stat-card,
html[data-theme="glass"][data-trueblack] .kb-card,
html[data-theme="glass"][data-trueblack] .file-card,
html[data-theme="glass"][data-trueblack] .chart-card,
html[data-theme="glass"][data-trueblack] .chat-wrap,
html[data-theme="glass"][data-trueblack] .db-wrap,
html[data-theme="glass"][data-trueblack] .w-card{
  background:var(--bg2);
  backdrop-filter:none;-webkit-backdrop-filter:none;
  border-color:var(--border);box-shadow:none}
html[data-theme="dark"][data-trueblack] body::before,html[data-theme="glass"][data-trueblack] body::before{display:none}
html[data-theme="dark"][data-trueblack]{
  --bg:#000000;--bg2:#0a0a0c;--bg3:#101013;--bg4:#16161a;
  --sidebar-bg:#000000;--topbar-bg:rgba(0,0,0,.85);
  --modal-bg:linear-gradient(180deg,#0c0c0f,#050507);
  --menu-bg:#0a0a0d;
}
html[data-theme="dark"][data-trueblack] .sidebar,html[data-theme="dark"][data-trueblack] .topbar,
html[data-theme="dark"][data-trueblack] .modal,html[data-theme="dark"][data-trueblack] .search-box,
html[data-theme="dark"][data-trueblack] .bottom-nav,html[data-theme="dark"][data-trueblack] .seg,
html[data-theme="glass"][data-trueblack] .sidebar,html[data-theme="glass"][data-trueblack] .topbar,
html[data-theme="glass"][data-trueblack] .modal,html[data-theme="glass"][data-trueblack] .search-box,
html[data-theme="glass"][data-trueblack] .bottom-nav,html[data-theme="glass"][data-trueblack] .seg{
  backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none}
html[data-theme="dark"][data-trueblack] .seg-btn.on,html[data-theme="glass"][data-trueblack] .seg-btn.on{background:var(--bg4);box-shadow:none}
/* ── Light material — frosted white, architectural ───────────────────── */
/* L0 environment: a silver field with soft metallic shapes and a gentle
   graphite wash. Bright, calm, never a wall of white cards. */
html[data-theme="light"] body{background:#eef0f3}
html[data-theme="light"] body::before{
  content:'';position:fixed;inset:-32%;z-index:0;pointer-events:none;
  background:
    /* silver torus — upper right */
    radial-gradient(26% 20% at 80% 12%,rgba(255,255,255,.9),transparent 55%),
    radial-gradient(24% 18% at 80% 12%,rgba(228,232,238,.6) 55%,transparent 72%),
    /* sphere — lower left */
    radial-gradient(22% 20% at 12% 86%,rgba(255,255,255,.75),transparent 55%),
    radial-gradient(20% 18% at 12% 86%,rgba(222,227,234,.5) 55%,transparent 72%),
    /* ambient wash */
    radial-gradient(50% 42% at 50% 48%,rgba(214,219,227,.4),transparent 70%),
    #eef0f3;
}
html[data-theme="light"] body::after{
  content:'';position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:var(--glass-noise);background-size:160px 160px;
  opacity:.025;mix-blend-mode:multiply;
}
html[data-theme="light"] #app,html[data-theme="light"] .shell-desktop,html[data-theme="light"] .shell-win,html[data-theme="light"] .boot-screen{position:relative;z-index:1}
html[data-theme="light"] .shell-desktop{background:radial-gradient(1200px 640px at 82% -12%,rgba(255,255,255,.85),transparent 58%),radial-gradient(1000px 560px at -10% 110%,rgba(228,232,238,.5),transparent 58%),#eef0f3}
/* L2 — Core Glass on light: bright frosted panels, graphite borders, soft
   architectural shadows. */
html[data-theme="light"] .card,html[data-theme="light"] .stat-card,html[data-theme="light"] .kb-card,
html[data-theme="light"] .file-card,html[data-theme="light"] .chart-card,html[data-theme="light"] .chat-wrap,
html[data-theme="light"] .db-wrap,html[data-theme="light"] .w-card{
  background:
    linear-gradient(115deg,var(--glass-l2-tint2) 0%,var(--glass-l2-tint) 34%,rgba(255,255,255,.55) 60%,rgba(255,255,255,.78) 100%),
    linear-gradient(180deg,var(--glass-l2-tint),rgba(255,255,255,.5));
  backdrop-filter:var(--glass-l2-blur);-webkit-backdrop-filter:var(--glass-l2-blur);
  border-color:rgba(0,0,0,.07);
  box-shadow:var(--glass-l2-shadow),var(--glass-l2-edge),inset 0 -1px 0 rgba(255,255,255,.55)}
html[data-theme="light"] .card:hover,html[data-theme="light"] .stat-card:hover,html[data-theme="light"] .kb-card:hover,
html[data-theme="light"] .file-card:hover,html[data-theme="light"] .chart-card:hover,html[data-theme="light"] .chat-wrap:hover,
html[data-theme="light"] .db-wrap:hover,html[data-theme="light"] .w-card:hover{
  border-color:rgba(0,0,0,.13);
  background:
    linear-gradient(115deg,var(--glass-l2-tint2) 0%,rgba(255,255,255,.88) 34%,rgba(255,255,255,.62) 60%,rgba(255,255,255,.85) 100%),
    linear-gradient(180deg,var(--glass-l2-tint),rgba(255,255,255,.6));
  box-shadow:0 22px 54px rgba(24,24,27,.13),var(--glass-l2-edge),inset 0 -1px 0 rgba(255,255,255,.6);
  transform:translateY(-1px)}
/* Sidebar + topbar — frosted white navigation. */
html[data-theme="light"] .sidebar{
  background:linear-gradient(115deg,rgba(255,255,255,.88),rgba(255,255,255,.55) 60%),linear-gradient(180deg,rgba(255,255,255,.82),rgba(255,255,255,.6));
  backdrop-filter:var(--glass-l3-blur);-webkit-backdrop-filter:var(--glass-l3-blur);
  border-right-color:rgba(0,0,0,.08);
  box-shadow:inset 1px 0 0 rgba(255,255,255,.5),var(--glass-l2-edge)}
html[data-theme="light"] .topbar{
  background:linear-gradient(180deg,rgba(255,255,255,.88),rgba(255,255,255,.62));
  backdrop-filter:var(--glass-l2-blur);-webkit-backdrop-filter:var(--glass-l2-blur);
  border-bottom-color:rgba(0,0,0,.08);
  box-shadow:var(--glass-l2-edge)}
/* L3 — Dense Glass (dialogs, menus) and L4 — Crystal (search). */
html[data-theme="light"] .modal{
  background:linear-gradient(160deg,var(--glass-l3-tint2),var(--glass-l3-tint));
  backdrop-filter:var(--glass-l3-blur);-webkit-backdrop-filter:var(--glass-l3-blur);
  border-color:rgba(0,0,0,.1);
  box-shadow:var(--glass-l3-shadow),var(--glass-l3-edge),inset 0 -1px 0 rgba(255,255,255,.65)}
html[data-theme="light"] .search-box{
  background:linear-gradient(160deg,var(--glass-l4-tint2),var(--glass-l4-tint));
  backdrop-filter:var(--glass-l4-blur);-webkit-backdrop-filter:var(--glass-l4-blur);
  border-color:rgba(0,0,0,.12);
  box-shadow:var(--glass-l4-shadow),var(--glass-l4-edge),inset 0 -1px 0 rgba(255,255,255,.7)}
html[data-theme="light"] .block-menu,html[data-theme="light"] .shell-cc,html[data-theme="light"] .shell-dock,
html[data-theme="light"] .dock-item .d-label{
  background:rgba(255,255,255,.93);
  backdrop-filter:var(--glass-l3-blur);-webkit-backdrop-filter:var(--glass-l3-blur);
  border-color:rgba(0,0,0,.09);
  box-shadow:var(--glass-l3-shadow),var(--glass-l3-edge)}
html[data-theme="light"] #toast{
  background:var(--glass-l3-tint2);
  backdrop-filter:var(--glass-l3-blur);-webkit-backdrop-filter:var(--glass-l3-blur);
  border-color:rgba(0,0,0,.1);
  box-shadow:var(--glass-l2-shadow),var(--glass-l3-edge)}
/* L1 — Frost controls on light. */
html[data-theme="light"] .chat-sidebar,html[data-theme="light"] .cal-dh,html[data-theme="light"] .cal-day,html[data-theme="light"] .chat-input-row{background:var(--glass-l1-tint)}
html[data-theme="light"] .modal .btn-ghost,html[data-theme="light"] .search-box .btn-ghost{background:var(--glass-l1-tint2)}
html[data-theme="light"] .btn-ghost{
  background:var(--glass-l1-tint);border-color:rgba(0,0,0,.1);
  backdrop-filter:var(--glass-l1-blur);-webkit-backdrop-filter:var(--glass-l1-blur);
  box-shadow:var(--glass-l1-edge)}
html[data-theme="light"] .btn-ghost:hover{background:var(--glass-l1-tint2);border-color:rgba(0,0,0,.16)}
html[data-theme="light"] input,html[data-theme="light"] textarea,html[data-theme="light"] select{
  background:var(--glass-l1-tint);border-color:rgba(0,0,0,.1);
  box-shadow:var(--glass-l1-edge)}
html[data-theme="light"] input:focus,html[data-theme="light"] textarea:focus,html[data-theme="light"] select:focus{
  border-color:var(--accent);box-shadow:0 0 0 3px var(--ring),var(--glass-l1-edge)}
html[data-theme="light"] .bottom-nav{
  background:linear-gradient(180deg,var(--glass-l2-tint),rgba(255,255,255,.65));
  backdrop-filter:var(--glass-l2-blur);-webkit-backdrop-filter:var(--glass-l2-blur);
  border-top-color:rgba(0,0,0,.08);
  box-shadow:var(--glass-l2-edge)}
html[data-theme="light"] .seg{background:var(--glass-l1-tint)!important;border-color:rgba(0,0,0,.1)!important;box-shadow:var(--glass-l1-edge)}
html[data-theme="light"] .seg-btn.on{
  background:linear-gradient(180deg,var(--glass-l2-tint2),var(--glass-l2-tint));
  box-shadow:var(--glass-l2-edge),0 4px 14px rgba(24,24,27,.08)}
/* Cursor spotlight reads on light too (Quality tier). */
html[data-gfx="quality"] html[data-theme="light"] .card::after,
html[data-gfx="quality"] html[data-theme="light"] .stat-card::after,
html[data-gfx="quality"] html[data-theme="light"] .kb-card::after,
html[data-gfx="quality"] html[data-theme="light"] .file-card::after,
html[data-gfx="quality"] html[data-theme="light"] .chart-card::after,
html[data-gfx="quality"] html[data-theme="light"] .chat-wrap::after,
html[data-gfx="quality"] html[data-theme="light"] .db-wrap::after,
html[data-gfx="quality"] html[data-theme="light"] .w-card::after{background:radial-gradient(480px circle at var(--mx,130%) var(--my,40%),rgba(82,82,91,.05),transparent 55%)}
/* ── Shell surfaces — the system layer uses the material levels too ───── */
html[data-theme="dark"] .shell-win,html[data-theme="glass"] .shell-win{
  background:linear-gradient(160deg,var(--glass-l2-tint2),var(--glass-l2-tint));
  backdrop-filter:var(--glass-l2-blur);-webkit-backdrop-filter:var(--glass-l2-blur);
  border-color:rgba(255,255,255,.16);
  box-shadow:var(--glass-l2-shadow),var(--glass-l2-edge)}
html[data-theme="dark"] .shell-menubar,html[data-theme="glass"] .shell-menubar{
  background:linear-gradient(180deg,var(--glass-l2-tint),rgba(255,255,255,.02));
  backdrop-filter:var(--glass-l2-blur);-webkit-backdrop-filter:var(--glass-l2-blur);
  border-bottom-color:rgba(255,255,255,.1);
  box-shadow:var(--glass-l2-edge)}
html[data-theme="dark"] .dock-item,html[data-theme="glass"] .dock-item{
  background:var(--glass-l2-tint2);
  backdrop-filter:var(--glass-l1-blur);-webkit-backdrop-filter:var(--glass-l1-blur);
  border-color:rgba(255,255,255,.14);
  box-shadow:var(--glass-l1-edge)}
html[data-theme="dark"] .win-title,html[data-theme="glass"] .win-title{
  background:linear-gradient(180deg,var(--glass-l1-tint2),var(--glass-l1-tint));
  border-bottom-color:rgba(255,255,255,.08)}
html[data-theme="light"] .shell-win{
  background:linear-gradient(160deg,var(--glass-l2-tint2),var(--glass-l2-tint));
  backdrop-filter:var(--glass-l2-blur);-webkit-backdrop-filter:var(--glass-l2-blur);
  border-color:rgba(0,0,0,.09);
  box-shadow:var(--glass-l2-shadow),var(--glass-l2-edge),inset 0 -1px 0 rgba(255,255,255,.5)}
html[data-theme="light"] .shell-menubar{
  background:linear-gradient(180deg,rgba(255,255,255,.88),rgba(255,255,255,.62));
  backdrop-filter:var(--glass-l2-blur);-webkit-backdrop-filter:var(--glass-l2-blur);
  border-bottom-color:rgba(0,0,0,.08);
  box-shadow:var(--glass-l2-edge)}
html[data-theme="light"] .dock-item{
  background:var(--glass-l2-tint2);
  backdrop-filter:var(--glass-l1-blur);-webkit-backdrop-filter:var(--glass-l1-blur);
  border-color:rgba(0,0,0,.08);
  box-shadow:var(--glass-l1-edge)}
html[data-theme="light"] .win-title{
  background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(255,255,255,.7));
  border-bottom-color:rgba(0,0,0,.07)}
/* ── Performance mode (data-gfx) ────────────────────────────────────── */
/* perf: drop all frost/blur — flat, fast, still themed. The ambient field is a
   single static gradient layer (no blur, no animation), so it stays: killing it
   made the Glass theme render as a black void behind the surfaces. */
html[data-gfx="perf"] body::before{animation:none}
html[data-gfx="perf"] .sidebar,html[data-gfx="perf"] .topbar,html[data-gfx="perf"] .card,
html[data-gfx="perf"] .stat-card,html[data-gfx="perf"] .kb-card,html[data-gfx="perf"] .file-card,
html[data-gfx="perf"] .chart-card,html[data-gfx="perf"] .chat-wrap,html[data-gfx="perf"] .db-wrap,
html[data-gfx="perf"] .w-card,html[data-gfx="perf"] .modal,html[data-gfx="perf"] .search-box,
html[data-gfx="perf"] .block-menu,html[data-gfx="perf"] .shell-cc,html[data-gfx="perf"] .shell-dock,
html[data-gfx="perf"] .bottom-nav,html[data-gfx="perf"] #toast,html[data-gfx="perf"] .btn-ghost,
html[data-gfx="perf"] input,html[data-gfx="perf"] textarea,html[data-gfx="perf"] select{
  backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
html[data-gfx="perf"] .card::after,html[data-gfx="perf"] .stat-card::after,html[data-gfx="perf"] .kb-card::after,
html[data-gfx="perf"] .file-card::after,html[data-gfx="perf"] .chart-card::after,html[data-gfx="perf"] .chat-wrap::after,
html[data-gfx="perf"] .db-wrap::after,html[data-gfx="perf"] .w-card::after{display:none}
html[data-gfx="perf"]{--shadow:0 10px 26px rgba(0,0,0,.45)}

/* ── Accessibility — the material degrades gracefully ────────────────── */
/* Reduced motion: kill the ambient drift and all decorative animation. */
@media (prefers-reduced-motion:reduce){
  html[data-theme="dark"] body::before,html[data-theme="glass"] body::before{animation:none}
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}
}
/* Reduced transparency: glass becomes near-opaque frosted surfaces with the
   blur dropped — content stays readable on any hardware/driver. */
@media (prefers-reduced-transparency:reduce){
  html[data-theme="dark"] .card,html[data-theme="dark"] .stat-card,html[data-theme="dark"] .kb-card,
  html[data-theme="dark"] .file-card,html[data-theme="dark"] .chart-card,html[data-theme="dark"] .chat-wrap,
  html[data-theme="dark"] .db-wrap,html[data-theme="dark"] .w-card,
  html[data-theme="glass"] .card,html[data-theme="glass"] .stat-card,html[data-theme="glass"] .kb-card,
  html[data-theme="glass"] .file-card,html[data-theme="glass"] .chart-card,html[data-theme="glass"] .chat-wrap,
  html[data-theme="glass"] .db-wrap,html[data-theme="glass"] .w-card,
  html[data-theme="dark"] .sidebar,html[data-theme="dark"] .topbar,html[data-theme="glass"] .sidebar,html[data-theme="glass"] .topbar,
  html[data-theme="dark"] .modal,html[data-theme="dark"] .search-box,html[data-theme="glass"] .modal,html[data-theme="glass"] .search-box,
  html[data-theme="dark"] .block-menu,html[data-theme="dark"] .shell-cc,html[data-theme="dark"] .shell-dock,html[data-theme="glass"] .block-menu,html[data-theme="glass"] .shell-cc,html[data-theme="glass"] .shell-dock,
  html[data-theme="dark"] #toast,html[data-theme="glass"] #toast,
  html[data-theme="dark"] .bottom-nav,html[data-theme="glass"] .bottom-nav,
  html[data-theme="dark"] .btn-ghost,html[data-theme="glass"] .btn-ghost{
    backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
    box-shadow:none;border-color:var(--border);
  }
  html[data-theme="dark"] .card,html[data-theme="dark"] .stat-card,html[data-theme="dark"] .kb-card,
  html[data-theme="dark"] .file-card,html[data-theme="dark"] .chart-card,html[data-theme="dark"] .chat-wrap,
  html[data-theme="dark"] .db-wrap,html[data-theme="dark"] .w-card,
  html[data-theme="glass"] .card,html[data-theme="glass"] .stat-card,html[data-theme="glass"] .kb-card,
  html[data-theme="glass"] .file-card,html[data-theme="glass"] .chart-card,html[data-theme="glass"] .chat-wrap,
  html[data-theme="glass"] .db-wrap,html[data-theme="glass"] .w-card{background:var(--bg2)}
  html[data-theme="dark"] .sidebar,html[data-theme="glass"] .sidebar{background:var(--sidebar-bg)}
  html[data-theme="dark"] .topbar,html[data-theme="glass"] .topbar{background:var(--topbar-bg)}
  html[data-theme="dark"] .modal,html[data-theme="glass"] .modal{background:var(--modal-bg)}
  html[data-theme="dark"] .search-box,html[data-theme="glass"] .search-box{background:var(--bg3)}
  html[data-theme="dark"] body::after,html[data-theme="glass"] body::after{display:none}
}

/* ── Projects & context graph ────────────────────────────────────────── */
.pj-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:16px}
.pj-card{background:linear-gradient(180deg,var(--shine),transparent),var(--bg2);border:1px solid var(--border);border-radius:var(--radius2);padding:0;overflow:hidden;cursor:pointer;transition:all .18s ease}
.pj-card:hover{transform:translateY(-3px);border-color:var(--border2);box-shadow:var(--shadow)}
.pj-strip{height:4px;width:100%}
.pj-body{padding:15px 16px 13px}
.pj-name{font-size:14.5px;font-weight:700;display:flex;align-items:center;gap:8px}
.pj-desc{font-size:12px;color:var(--text3);margin-top:4px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:32px}
.pj-counts{display:flex;gap:6px;flex-wrap:wrap;margin-top:11px}
.pj-count{font-size:10.5px;font-weight:600;color:var(--text2);background:var(--panel);border:1px solid var(--border);border-radius:20px;padding:3px 9px;display:flex;align-items:center;gap:4px}
.pj-summary{background:linear-gradient(180deg,var(--shine),transparent),var(--bg2);border:1px solid var(--border);border-radius:var(--radius2);padding:16px 18px;margin-bottom:20px;position:relative}
.pj-summary .pj-s-body{font-size:13.5px;line-height:1.65;color:var(--text2);white-space:pre-wrap;max-height:240px;overflow-y:auto}
.pj-sec-head{font-size:11px;font-weight:700;color:var(--text2);text-transform:uppercase;letter-spacing:.8px;display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.pj-item{display:flex;align-items:center;gap:10px;padding:9px 11px;border:1px solid var(--border);border-radius:10px;background:var(--panel);margin-bottom:7px;cursor:pointer;transition:all .14s ease}
.pj-item:hover{background:var(--hover);border-color:var(--border2)}
.pj-item .pj-ic{width:26px;height:26px;border-radius:7px;display:flex;align-items:center;justify-content:center;background:var(--bg3);border:1px solid var(--border);color:var(--text2);flex-shrink:0}
.pj-unlink{margin-left:auto;color:var(--text3);padding:4px;border-radius:6px;flex-shrink:0}
.pj-unlink:hover{color:var(--red);background:rgba(239,68,68,.12)}
.pj-color{width:16px;height:16px;border-radius:5px;flex-shrink:0}
/* ── Custom grid (home dashboard) ────────────────────────────────────── */
.dash-grid{display:grid;grid-template-columns:repeat(var(--cols,4),1fr);gap:18px;align-items:start}
.w-card{background:linear-gradient(180deg,var(--shine),transparent),var(--bg2);border:1px solid var(--border);border-radius:var(--radius2);padding:16px;min-width:0}
.w-head{display:flex;align-items:center;gap:8px;margin-bottom:13px}
.w-head .w-ic{width:26px;height:26px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--accent);background:var(--focus)}
.w-title{font-size:12px;font-weight:700;color:var(--text2);text-transform:uppercase;letter-spacing:.8px}
.w-mini{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:11px}
.w-mini .stat-card{padding:13px;margin:0;border-radius:12px}
.w-mini .stat-ic{width:30px;height:30px;border-radius:8px}
.w-mini .stat-val{font-size:21px}
.w-row-item{display:flex;align-items:center;gap:11px;padding:10px 12px;margin-bottom:8px;border:1px solid var(--border);border-radius:11px;background:var(--panel);cursor:pointer;transition:all .15s ease}
.w-row-item:hover{border-color:var(--border2);background:var(--hover)}
.w-note{min-height:120px;outline:none;line-height:1.65;font-size:13.5px;color:var(--text)}
.w-note:focus{border-radius:9px;box-shadow:0 0 0 2px var(--focus)}
.w-ai-in{display:flex;gap:8px;margin-top:10px}
.w-ai-out{margin-top:12px;font-size:13px;line-height:1.6;white-space:pre-wrap;color:var(--text2);max-height:180px;overflow-y:auto}
.w-empty{color:var(--text3);font-size:12.5px;padding:6px 2px}
.w-kb{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.w-kb-col{background:var(--panel);border:1px solid var(--border);border-radius:11px;padding:9px;min-width:0}
.w-kb-head{display:flex;align-items:center;gap:6px;font-size:10.5px;font-weight:700;color:var(--text2);text-transform:uppercase;letter-spacing:.5px;margin-bottom:8px}
.w-kb-count{margin-left:auto;font-size:10px;background:var(--chip);border-radius:9px;padding:1px 7px;color:var(--text3)}
.w-kb-cards{display:flex;flex-direction:column;gap:6px;min-height:30px}
.w-kb-card{font-size:12px;font-weight:500;padding:8px 10px;background:var(--bg2);border:1px solid var(--border);border-radius:8px;cursor:grab;color:var(--text)}
.w-kb-card:hover{border-color:var(--border2)}
.w-kb-card.dragging{opacity:.45}
.w-kb-add{width:100%;margin-top:8px;font-size:11.5px;background:transparent;border:1px dashed var(--border2);border-radius:8px;padding:6px 8px;color:var(--text3)}
.w-kb-add:focus{color:var(--text);border-color:var(--accent)}
.w-db-table{overflow-x:auto}
.w-db-table .db-table{font-size:12px}
.w-db-table .db-cell-input{padding:5px 7px;font-size:12px}
.dash-hint{font-size:12px;color:var(--text3);display:flex;align-items:center;gap:6px}
/* Grid builder modal */
.modal-sub{font-size:12.5px;color:var(--text3);margin-top:4px;margin-bottom:6px}
.gb-row{display:flex;align-items:center;gap:10px;padding:10px 2px;border-bottom:1px solid var(--border)}
.gb-row:last-child{border-bottom:none}
.gb-ic{width:28px;height:28px;border-radius:8px;display:flex;align-items:center;justify-content:center;background:var(--panel);border:1px solid var(--border);color:var(--text2);flex-shrink:0}
.gb-name{font-size:13.5px;font-weight:500;flex:1;min-width:0}
.gb-size{width:70px;flex-shrink:0}
.gb-db{width:132px;flex-shrink:0;font-size:12px;padding:6px 8px}
.gb-move{display:flex;gap:4px;flex-shrink:0}
.gb-move button{width:26px;height:26px;padding:0;display:flex;align-items:center;justify-content:center;border:1px solid var(--border2);background:var(--panel);color:var(--text2);border-radius:7px;cursor:pointer;font-size:13px}
.gb-move button:hover{background:var(--hover2);color:var(--text)}
.gb-move button:disabled{opacity:.3;cursor:default}
.switch{position:relative;width:36px;height:20px;flex-shrink:0;cursor:pointer}
.switch input{opacity:0;width:0;height:0}
.switch .sl{position:absolute;inset:0;background:var(--bg4);border:1px solid var(--border2);border-radius:20px;transition:all .18s ease}
.switch .sl::before{content:'';position:absolute;width:14px;height:14px;left:2px;top:2px;border-radius:50%;background:var(--text3);transition:all .18s ease}
.switch input:checked+.sl{background:var(--accent);border-color:var(--accent)}
.switch input:checked+.sl::before{left:18px;background:var(--accent-ink)}
/* Theme + accent pickers */
.theme-row{display:flex;gap:8px;flex-wrap:wrap}
.theme-swatch{width:46px;height:46px;border-radius:12px;border:1.5px solid var(--border2);cursor:pointer;position:relative;transition:all .15s ease;display:flex;align-items:flex-end;justify-content:center;padding-bottom:5px;overflow:hidden}
.theme-swatch span{font-size:9.5px;font-weight:700;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.7);letter-spacing:.3px}
.theme-swatch:hover{transform:translateY(-2px)}
.theme-swatch.on{border-color:var(--accent);box-shadow:0 0 0 3px var(--focus),0 6px 18px rgba(0,0,0,.35)}
.acc-row{display:flex;gap:9px;flex-wrap:wrap}
.acc-swatch{width:28px;height:28px;border-radius:50%;background:var(--sw);cursor:pointer;border:2px solid transparent;transition:all .15s ease;position:relative}
.acc-swatch:hover{transform:scale(1.12)}
.acc-swatch.on{border-color:var(--bg);box-shadow:0 0 0 2px var(--sw),0 0 0 4px var(--focus)}
.acc-swatch .acc-plus{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:700;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.6);line-height:1}
@media(max-width:640px){
  .dash-grid{grid-template-columns:1fr !important}
  .dash-grid .w-card{grid-column:1 / -1 !important}
  .theme-swatch{width:40px;height:40px}
}
/* ── System layer: Bedrock Shell ─────────────────────────────────────── */
/* App-embedded mode (?app=mod) — module fills the window, chrome hidden */
.app-mode .sidebar,.app-mode .sidebar-backdrop,.app-mode .topbar,.app-mode .bottom-nav,.app-mode #boot-screen{display:none!important}
.app-mode .main{border-radius:0}
.app-mode .content{max-width:none;padding:26px 30px 52px}
/* Shell layout */
#shell{position:fixed;inset:0;display:none;flex-direction:column;z-index:5}
body.shell-on #app{display:none}
body.shell-on #shell{display:flex}
body.focus-on .shell-dock{display:none}
.shell-desktop{position:absolute;inset:0;z-index:0;background:var(--bg)}
html[data-theme="oled"] .shell-desktop{background:var(--bg)}
html[data-theme="glass"] .shell-desktop{background:radial-gradient(1200px 640px at 82% -12%,rgba(255,255,255,.08),transparent 58%),radial-gradient(1000px 560px at -10% 110%,rgba(200,208,224,.06),transparent 58%),radial-gradient(700px 520px at 15% 40%,rgba(180,188,204,.04),transparent 60%),#0c0d12}
/* Menu bar */
.shell-menubar{position:absolute;top:0;left:0;right:0;height:38px;display:flex;align-items:center;gap:14px;padding:0 14px;z-index:20;background:var(--topbar-bg);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-bottom:1px solid var(--border);font-size:12.5px}
.shell-menubar .mb-logo{display:flex;align-items:center;gap:8px;font-weight:700;font-size:13px;color:var(--text)}
.shell-menubar .mb-logo img{width:17px;height:17px;border-radius:5px;object-fit:contain}
.mb-search{flex:1;max-width:360px;margin:0 auto;display:flex;align-items:center;gap:8px;background:var(--field);border:1px solid var(--border);border-radius:8px;padding:5px 11px;color:var(--text3);cursor:pointer;font-size:12.5px;transition:all .15s ease}
.mb-search:hover{background:var(--field-hover);border-color:var(--border2);color:var(--text2)}
.mb-search svg{width:13px;height:13px;flex-shrink:0}
.mb-search kbd{margin-left:auto;background:var(--bg4);border:1px solid var(--border2);border-radius:5px;padding:1px 6px;font-size:10px;color:var(--text3);font-family:var(--mono)}
.mb-right{display:flex;align-items:center;gap:4px}
.mb-clock{font-variant-numeric:tabular-nums;color:var(--text2);font-size:12px;padding:0 8px}
.mb-ccbtn{width:28px;height:28px;border-radius:8px;display:flex;align-items:center;justify-content:center;color:var(--text2);cursor:pointer;border:none;background:transparent}
.mb-ccbtn:hover{background:var(--hover);color:var(--text)}
/* Dock */
.shell-dock{position:absolute;left:50%;transform:translateX(-50%);bottom:14px;display:flex;gap:8px;padding:9px 12px;border-radius:18px;background:var(--bg3);border:1px solid var(--border);z-index:20;box-shadow:0 14px 44px rgba(0,0,0,.45)}
.dock-item{width:46px;height:46px;border-radius:13px;background:var(--bg2);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--text2);position:relative;transition:transform .18s cubic-bezier(.34,1.56,.64,1),border-color .15s ease,color .15s ease}
.dock-item:hover{transform:translateY(-4px) scale(1.06);color:var(--text);border-color:var(--border2)}
.dock-item.active{color:var(--accent);border-color:rgba(245,158,11,.35)}
.dock-item.active::after{content:'';position:absolute;bottom:-5px;left:50%;transform:translateX(-50%);width:4px;height:4px;border-radius:50%;background:var(--accent);box-shadow:0 0 8px var(--accent)}
.dock-item svg{width:20px;height:20px}
.dock-item .d-label{position:absolute;bottom:calc(100% + 9px);left:50%;transform:translateX(-50%) translateY(4px);background:var(--menu-bg);border:1px solid var(--border);padding:3px 9px;border-radius:7px;font-size:11px;color:var(--text);opacity:0;pointer-events:none;transition:all .15s ease;white-space:nowrap;box-shadow:var(--shadow);z-index:50}
.dock-item:hover .d-label{opacity:1;transform:translateX(-50%) translateY(0)}
/* Windows */
.shell-wins{position:absolute;inset:38px 0 0;z-index:10;overflow:hidden}
.shell-win{position:absolute;display:flex;flex-direction:column;background:var(--bg2);border:1px solid var(--border2);border-radius:12px;overflow:hidden;box-shadow:0 24px 70px rgba(0,0,0,.5);min-width:320px;min-height:200px;animation:winIn .22s cubic-bezier(.22,1,.36,1)}
@keyframes winIn{from{opacity:0;transform:scale(.96) translateY(10px)}to{opacity:1;transform:none}}
.shell-win.focused{border-color:rgba(245,158,11,.28);box-shadow:0 28px 80px rgba(0,0,0,.55),0 0 0 1px var(--focus)}
.shell-win.minimized{display:none}
.shell-win.maximized{inset:8px!important;width:auto!important;height:auto!important;border-radius:10px}
.win-title{height:36px;display:flex;align-items:center;gap:8px;padding:0 10px;background:var(--panel);border-bottom:1px solid var(--border);cursor:grab;user-select:none;flex-shrink:0}
.win-title:active{cursor:grabbing}
.win-title .wt-ic{width:15px;height:15px;color:var(--text2);flex-shrink:0}
.win-title .wt-name{font-size:12px;font-weight:600;color:var(--text2);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.win-btn{width:24px;height:24px;border-radius:6px;display:flex;align-items:center;justify-content:center;color:var(--text3);cursor:pointer;background:transparent;border:none;font-size:11px;line-height:1}
.win-btn:hover{background:var(--hover);color:var(--text)}
.win-btn.close:hover{background:rgba(239,68,68,.18);color:var(--red)}
.shell-win iframe{flex:1;border:none;background:var(--bg);width:100%}
/* Control center */
.shell-cc{position:absolute;top:44px;right:14px;width:300px;background:var(--menu-bg);border:1px solid var(--border2);border-radius:16px;box-shadow:var(--shadow);padding:14px;z-index:40;display:none;animation:winIn .18s ease}
.shell-cc.open{display:block}
.cc-row{display:flex;align-items:center;gap:9px;padding:8px 2px}
.cc-label{font-size:12.5px;font-weight:600;flex:1;color:var(--text)}
.cc-desc{font-size:10.5px;color:var(--text3)}
.cc-swatches{display:flex;gap:7px;flex-wrap:wrap}
.cc-swatch{width:22px;height:22px;border-radius:50%;cursor:pointer;border:2px solid transparent;background:var(--sw);flex-shrink:0}
.cc-swatch.on{border-color:var(--bg);box-shadow:0 0 0 2px var(--sw),0 0 0 4px var(--focus)}
.cc-toggle{width:34px;height:19px;border-radius:19px;background:var(--bg4);border:1px solid var(--border2);cursor:pointer;position:relative;transition:all .18s ease;flex-shrink:0}
.cc-toggle.on{background:var(--accent);border-color:var(--accent)}
.cc-toggle::after{content:'';position:absolute;top:2px;left:2px;width:13px;height:13px;border-radius:50%;background:var(--text3);transition:all .18s ease}
.cc-toggle.on::after{left:17px;background:var(--accent-ink)}
.cc-divider{height:1px;background:var(--border);margin:9px 0}
/* Boot screen */
#boot-screen{position:fixed;inset:0;background:var(--bg);z-index:2000;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;transition:opacity .4s ease}
#boot-screen.hide{opacity:0;pointer-events:none}
.boot-logo{width:74px;height:74px;border-radius:20px;overflow:hidden;animation:bootPulse 1.1s ease infinite alternate;box-shadow:0 18px 60px rgba(0,0,0,.5)}
.boot-logo img{width:100%;height:100%;object-fit:contain}
@keyframes bootPulse{from{transform:scale(.96);opacity:.85}to{transform:scale(1);opacity:1}}
.boot-bar{width:150px;height:3px;border-radius:3px;background:var(--bg4);overflow:hidden}
.boot-fill{height:100%;width:0;background:var(--grad);border-radius:3px;animation:bootFill .9s cubic-bezier(.22,1,.36,1) forwards}
@keyframes bootFill{from{width:0}to{width:100%}}
.boot-tag{font-size:10px;color:var(--text3);letter-spacing:2.5px;text-transform:uppercase;font-weight:600}
/* Unified data model UI: subtasks, dependencies, tags, people */
.t-section{margin-top:14px;padding-top:12px;border-top:1px solid var(--border)}
.t-section-title{font-size:11px;font-weight:600;color:var(--text3);letter-spacing:.6px;text-transform:uppercase;display:flex;align-items:center;gap:6px;margin-bottom:8px}
.t-list{display:flex;flex-direction:column;gap:6px;max-height:150px;overflow-y:auto}
.t-row{display:flex;align-items:center;gap:8px;font-size:12.5px;background:var(--bg2);border:1px solid var(--border);border-radius:8px;padding:7px 10px}
.t-empty{font-size:12px;color:var(--text3);padding:4px 2px}
.t-add{display:flex;gap:6px;margin-top:8px}
.t-add input{flex:1;background:var(--bg2);border:1px solid var(--border);border-radius:8px;padding:8px 10px;font-size:12.5px;color:var(--text)}
.t-add input:focus{outline:none;border-color:var(--accent)}
.t-tags{display:flex;flex-wrap:wrap;gap:6px}
.tag-chip{display:inline-flex;align-items:center;gap:5px;background:var(--chip, rgba(255,255,255,.06));border:1px solid var(--border2);border-radius:99px;padding:4px 10px;font-size:11.5px;color:var(--text2)}
.tag-chip .tag-x{background:none;border:none;color:var(--text3);cursor:pointer;font-size:13px;line-height:1;padding:0 2px}
.tag-chip .tag-x:hover{color:var(--red)}
.people-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px}
.person-card{background:var(--bg2);border:1px solid var(--border);border-radius:14px;padding:16px;display:flex;flex-direction:column;gap:10px}
.person-top{display:flex;align-items:center;gap:12px}
.person-av{width:38px;height:38px;border-radius:50%;background:var(--grad);color:var(--accent-ink);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;flex-shrink:0}
.person-name{font-size:14px;font-weight:600}
.team-card{background:var(--bg2);border:1px solid var(--border);border-radius:14px;padding:16px;display:flex;flex-direction:column;gap:11px;cursor:pointer;transition:border-color .15s,transform .15s,box-shadow .15s}
.team-card:hover{border-color:var(--border2);transform:translateY(-1px);box-shadow:0 4px 18px rgba(0,0,0,.22)}
.team-card-top{display:flex;align-items:center;gap:12px}
.team-av{width:44px;height:44px;border-radius:13px;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:15px;flex-shrink:0;box-shadow:0 3px 10px rgba(0,0,0,.28)}
.team-name{font-size:14.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.team-desc{font-size:11.5px;color:var(--text3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.team-copy{padding:5px 8px;flex-shrink:0}
.team-meta{display:flex;align-items:center;gap:12px;font-size:11.5px;color:var(--text3)}
.team-meta span{display:inline-flex;align-items:center;gap:4px}
.team-pending{color:var(--yellow)}
.team-code{display:flex;align-items:center;gap:7px;font-size:11px;color:var(--text3);border-top:1px dashed var(--border);padding-top:9px}
.team-code code{font-size:11.5px;font-weight:600;letter-spacing:.6px;color:var(--text2);background:var(--bg);border:1px solid var(--border);border-radius:6px;padding:2px 7px}
.team-how{display:flex;align-items:stretch;gap:10px;margin-top:20px;flex-wrap:wrap;justify-content:center}
.team-how-step{display:flex;gap:11px;align-items:center;background:var(--bg2);border:1px solid var(--border);border-radius:13px;padding:12px 16px;text-align:left;min-width:200px}
.team-how-n{width:27px;height:27px;border-radius:50%;background:var(--grad);color:var(--accent-ink);font-weight:700;font-size:13px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.team-how-step b{display:block;font-size:12.5px}
.team-how-step span{display:block;font-size:11px;color:var(--text3);margin-top:1px}
.team-how-arrow{display:flex;align-items:center;color:var(--text3)}
.team-mini-av{width:30px;height:30px;border-radius:9px;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:11px;flex-shrink:0}
.team-av-stack{width:26px;height:26px;border-radius:50%;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:9.5px;border:2px solid var(--bg2);margin-left:-8px;box-shadow:0 2px 6px rgba(0,0,0,.25)}
.team-av-stack:first-child{margin-left:0}
.team-code-inline{margin-left:auto}
.team-code-inline code{font-size:10.5px;font-weight:600;letter-spacing:.5px;color:var(--text2);background:var(--bg);border:1px solid var(--border);border-radius:5px;padding:1px 5px}
.team-open{margin-top:auto;display:flex;align-items:center;justify-content:center;gap:6px;font-size:12px;font-weight:600;color:var(--accent);background:var(--bg3);border:1px solid var(--border);border-radius:9px;padding:7px 10px;transition:background .12s ease,border-color .12s ease}
.team-card:hover .team-open{background:color-mix(in srgb,var(--accent) 12%,transparent);border-color:color-mix(in srgb,var(--accent) 35%,transparent)}
.team-role{font-size:9.5px;font-weight:600;color:var(--accent);background:rgba(224,122,117,.14);border:1px solid rgba(224,122,117,.35);border-radius:5px;padding:1px 6px;margin-left:4px;vertical-align:1px}

/* Task assignment: avatar chip on kanban cards and lists */
.assignee-chip{display:inline-flex;align-items:center;gap:5px;margin-left:auto;padding:1px 8px 1px 2px;border-radius:999px;border:1px solid var(--border);background:var(--bg3,#2a2d35);font-size:10.5px;color:var(--text2);max-width:120px;overflow:hidden}
.assignee-chip b{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:50%;background:var(--accent);color:var(--bg,#111);font-size:8.5px;font-weight:700;flex-shrink:0}
.assignee-chip .assignee-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.person-email{font-size:11.5px;color:var(--text3)}
.tags-grid{display:flex;flex-wrap:wrap;gap:10px}
.tag-tile{display:flex;align-items:center;gap:8px;background:var(--bg2);border:1px solid var(--border);border-radius:99px;padding:8px 14px;font-size:13px;cursor:pointer}
.tag-tile:hover{border-color:var(--accent)}
.tag-tile .cnt{font-size:11px;color:var(--text3);background:var(--chip, rgba(255,255,255,.06));border-radius:99px;padding:1px 7px}
/* Reduced motion — respect system preference */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}
/* Shell is a desktop experience; smaller screens keep the touch workspace */
@media(max-width:1023px){
  body.shell-on #shell{display:none}
  body.shell-on #app{display:flex}
}
/* ── Diary (daily daynotes) ── */
.diary-grid{display:grid;grid-template-columns:1fr 280px;gap:16px;align-items:start}
.diary-editor{display:flex;flex-direction:column;gap:10px}
.diary-datebar{display:flex;align-items:center;justify-content:space-between;font-size:15px;font-weight:700;letter-spacing:-.2px}
.diary-save-state{font-size:11.5px;color:var(--text3);font-weight:500;letter-spacing:0;min-height:14px}
.diary-moods{display:flex;gap:7px;flex-wrap:wrap}
.diary-mood{width:42px;height:42px;border-radius:11px;background:var(--field);border:1px solid var(--border2);font-size:20px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .14s ease;padding:0}
.diary-mood:hover{background:var(--field-hover);transform:translateY(-1px)}
.diary-mood.on{background:rgba(245,158,11,.16);border-color:var(--accent);box-shadow:0 0 0 3px var(--ring)}
.diary-title{font-size:17px;font-weight:700;letter-spacing:-.2px;padding:11px 14px}
.diary-content{min-height:340px;resize:vertical;line-height:1.65;font-size:14px;padding:14px}
.diary-words{font-size:12px;color:var(--text3)}
.diary-side{display:flex;flex-direction:column;gap:4px}
.diary-side-title{font-size:12px;font-weight:600;color:var(--text3);text-transform:uppercase;letter-spacing:.7px;margin-bottom:6px}
.diary-recent-item{display:flex;align-items:center;gap:10px;padding:8px 9px;border-radius:10px;cursor:pointer;transition:background .1s ease;border:1px solid transparent}
.diary-recent-item:hover{background:var(--hover)}
.diary-recent-item.on{background:rgba(245,158,11,.09);border-color:rgba(245,158,11,.25)}
.diary-r-mood{font-size:17px;flex-shrink:0}
.diary-r-date{font-size:11px;color:var(--text3);margin-bottom:1px}
.diary-r-txt{font-size:12.5px;color:var(--text2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(max-width:860px){.diary-grid{grid-template-columns:1fr}}

/* ── Drag-reorder favorites ── */
.fav-item[draggable]{transition:transform .12s ease,opacity .12s ease}
.fav-item.drag-over{border-top:2px solid var(--accent)!important;margin-top:-2px}
.fav-item.dragging{opacity:.4;transform:scale(.95)}
.fav-item .fav-grip{opacity:0;transition:opacity .12s ease;font-size:10px;color:var(--text3);margin-right:-4px;cursor:grab}
.fav-item:hover .fav-grip{opacity:.6}

/* ── Sabbath soft-landing banner (pre-window heads-up) ── */
.sb-soft-banner{display:flex;align-items:center;gap:12px;justify-content:space-between;max-width:1120px;margin:0 auto 14px;padding:10px 16px;border:1px solid var(--violet-border,var(--border2));border-radius:14px;background:linear-gradient(135deg,var(--violet-soft),var(--amber-soft,var(--violet-soft)));animation:fadeIn .25s ease}
.sb-soft-msg{font-size:12.5px;line-height:1.55;color:var(--text2)}
.sb-soft-msg b{color:var(--text1)}

/* ── Diagram jump-to-source: targeted row flash on the db table ── */
@keyframes db-row-flash{0%{background:rgba(233,69,96,.22)}100%{background:transparent}}
.db-table tbody tr.row-flash>td{animation:db-row-flash 1.1s ease-out 2;background-color:transparent}

/* ── Activity page ── */
.btn-sm{padding:5px 10px;font-size:12px}
.btn-sm.on{background:rgba(245,158,11,.12);color:var(--accent);font-weight:600}
</style>
