/* 101 Studios HQ: themes built from the reference designs in 08 Attachments/New themes.
   Each theme sets the full token list the app uses (same names as the skins block in app.html), and may also pick:
   - a layout:  html[data-layout]  classic (original) | panels (header row in the content column) | rail (icon rail) | top (no sidebar, top navigation with menus)
   - a frame:   html[data-frame]   float (the app sits inside rounded panels with gaps) | flush
   - effects:   html[data-fx~=""]  hatch, stripes, sweep, swing, tilt, drift, boot
   Colours were sampled from the reference screenshots and video frames.
   Performance: blur only on the sidebar, header row and pop-ups; animations only use transform and opacity;
   everything decorative switches off under prefers-reduced-motion. */

:root{--frame:var(--bg);--frame-pad:0px;--shell:transparent;--shell-line:transparent;--shell-r:0px;--shell-pad:0px;--shell-sh:none;--nav-r:0px;--col-bg:transparent;--col-line:transparent;--top-bg:transparent;--grad-a:var(--ch-made);--grad-b:var(--ch-made);--glass:none;--kpi-r:var(--radius)}

/* =====================================================================
   TOKENS
   ===================================================================== */

/* Grove: light, deep green, soft rounded panels (Donezo) */
html[data-skin="grove"],.tp[data-skin="grove"]{--bg:#f6f7f6;--panel:#ffffff;--panel2:#f2f4f2;--line:#eaedeb;--line2:#dce1dd;--text:#0e110f;--muted:#767d78;--faint:#a5aca7;--hover:rgba(14,17,15,.04);--primary:#23533a;--on-primary:#ffffff;--lime:#3f7b56;--on-lime:#1f5133;--lime-soft:#e4f0e8;--bar-fill:#3f7b56;--ch-made:#2c6a45;--ch-spent:#7fa18b;--gold:#2c6a45;--green:#2c7d4f;--red:#d2463c;--amber:#b7791f;--ok-bg:#e1f1e6;--ok-fg:#20653d;--info-bg:#e6eefb;--info-fg:#3456a2;--warn-bg:#fcf1d9;--warn-fg:#8a5a00;--bad-bg:#fde5e2;--bad-fg:#c03a30;--hero-bg:#1f4d33;--hero-text:#ffffff;--hero-muted:rgba(255,255,255,.74);--hero-track:rgba(255,255,255,.18);--hero-fill:#b9e5c7;--hero-warn:#ffb8ad;--hero-good:#c9f3d5;--toast-bg:#15291d;--toast-fg:#ffffff;--ring:rgba(44,106,69,.22);--shadow:0 1px 2px rgba(16,30,22,.03);--shadow-lg:0 30px 80px -24px rgba(16,40,26,.28);--backdrop:rgba(14,24,18,.32);--radius:24px;--hover-shadow:0 0 0 1px rgba(35,83,58,.22),0 14px 34px -14px rgba(16,40,26,.22);--rk:1.1;--r-pill:999px;--r-dot:50%;--font-ui:"DM Sans",Inter,-apple-system,sans-serif;--font-head:"DM Sans",Inter,-apple-system,sans-serif;--font-num:"DM Sans",Inter,-apple-system,sans-serif;--font-mono:ui-monospace,Menlo,monospace;--font-title:"DM Sans",Inter,-apple-system,sans-serif;--title-weight:500;--title-track:-.04em;--head-track:-.02em;--num-track:-.04em;--on-accent:#ffffff;--env:#b08a4f;--env-bg:#f4ead8;--env-fg:#7a5a26;--bg-img:none;--panel-img:none;--hero-img:radial-gradient(120% 120% at 100% 0%,rgba(119,187,149,.38),transparent 55%),linear-gradient(135deg,#173d28 0%,#245a3b 55%,#3a7552 100%);--scope-bg:transparent;--nav-bg:#f6f7f6;--nav-line:transparent;--nav-on-bg:transparent;--nav-on-fg:#0e110f;--nav-on-bar:#2c6a45;--nav-on-sh:none;--frame:#e3e5e7;--frame-pad:14px;--shell:#ffffff;--shell-line:transparent;--shell-r:32px;--shell-pad:12px;--shell-sh:0 30px 80px -40px rgba(20,30,24,.25);--nav-r:24px;--col-bg:#f6f7f6;--top-bg:#f6f7f6;--grad-a:#2c6a45;--grad-b:#3f7b56}

/* Linen: light, white and cream, black controls, kanban calm (BizLink) */
html[data-skin="linen"],.tp[data-skin="linen"]{--bg:#ffffff;--panel:#ffffff;--panel2:#f5f5f3;--line:#e8e8e4;--line2:#d9d9d4;--text:#111111;--muted:#6c6c66;--faint:#a3a39d;--hover:#f6f6f4;--primary:#111111;--on-primary:#ffffff;--lime:#111111;--on-lime:#111111;--lime-soft:#f2f2ef;--bar-fill:#1a1a1a;--ch-made:#1a1a1a;--ch-spent:#b9b9b3;--gold:#111111;--green:#2f7a45;--red:#c4322a;--amber:#8a5d00;--ok-bg:#e6f1e4;--ok-fg:#2a6638;--info-bg:#ebeef4;--info-fg:#334a73;--warn-bg:#f6efdc;--warn-fg:#7a5400;--bad-bg:#f8e4e1;--bad-fg:#b0291f;--hero-bg:#1f1f1f;--hero-text:#ffffff;--hero-muted:rgba(255,255,255,.66);--hero-track:rgba(255,255,255,.16);--hero-fill:#f6f7ef;--hero-warn:#ff9a8f;--hero-good:#d8eccb;--toast-bg:#111111;--toast-fg:#ffffff;--ring:rgba(17,17,17,.12);--shadow:none;--shadow-lg:0 0 0 1px rgba(17,17,17,.06),0 30px 70px -26px rgba(17,17,17,.24);--backdrop:rgba(17,17,17,.28);--radius:16px;--hover-shadow:0 0 0 1px #111111;--rk:.75;--r-pill:12px;--r-dot:50%;--font-ui:Inter,-apple-system,"Helvetica Neue",sans-serif;--font-head:Inter,-apple-system,"Helvetica Neue",sans-serif;--font-num:Inter,-apple-system,"Helvetica Neue",sans-serif;--font-mono:ui-monospace,Menlo,monospace;--font-title:Inter,-apple-system,"Helvetica Neue",sans-serif;--title-weight:500;--title-track:-.03em;--head-track:-.02em;--num-track:-.03em;--on-accent:#ffffff;--env:#a6834d;--env-bg:#f1e8d8;--env-fg:#6c5226;--bg-img:none;--panel-img:none;--hero-img:none;--scope-bg:transparent;--nav-bg:#ffffff;--nav-line:transparent;--nav-on-bg:#f3f3f1;--nav-on-fg:#111111;--nav-on-bar:transparent;--nav-on-sh:none;--band:#f6f7ef;--top-bg:#f6f7ef;--grad-a:#1a1a1a;--grad-b:#1a1a1a}

/* Ember: dark warm glass, orange to yellow glow */
html[data-skin="ember"],.tp[data-skin="ember"]{--bg:#141211;--panel:#1a1716;--panel2:#221f1d;--line:rgba(255,255,255,.07);--line2:rgba(255,255,255,.13);--text:#f5f2ef;--muted:#958c88;--faint:#625a57;--hover:rgba(255,255,255,.045);--primary:#f15a2b;--on-primary:#ffffff;--lime:#f39a3c;--on-lime:#ffb26b;--lime-soft:rgba(241,90,43,.13);--bar-fill:#f15a2b;--ch-made:#f15a2b;--ch-spent:#3a3533;--gold:#f5b743;--green:#7fd59a;--red:#ff6a55;--amber:#f5b743;--ok-bg:rgba(127,213,154,.12);--ok-fg:#99e2b0;--info-bg:rgba(150,170,255,.12);--info-fg:#b4c2ff;--warn-bg:rgba(245,183,67,.13);--warn-fg:#f7c76b;--bad-bg:rgba(255,106,85,.13);--bad-fg:#ff8b7a;--hero-bg:#1b1715;--hero-text:#ffffff;--hero-muted:rgba(255,255,255,.62);--hero-track:rgba(255,255,255,.12);--hero-fill:#f39a3c;--hero-warn:#ffb09f;--hero-good:#b9f0c9;--toast-bg:#262220;--toast-fg:#f5f2ef;--ring:rgba(241,90,43,.32);--shadow:inset 0 1px 0 rgba(255,255,255,.05);--shadow-lg:inset 0 1px 0 rgba(255,255,255,.06),0 40px 90px -30px rgba(0,0,0,.85);--backdrop:rgba(8,6,5,.6);--radius:20px;--hover-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 0 0 1px rgba(255,255,255,.14);--rk:.9;--r-pill:12px;--r-dot:50%;--font-ui:Inter,-apple-system,sans-serif;--font-head:Inter,-apple-system,sans-serif;--font-num:Inter,-apple-system,sans-serif;--font-mono:ui-monospace,Menlo,monospace;--font-title:Inter,-apple-system,sans-serif;--title-weight:500;--title-track:-.03em;--head-track:-.02em;--num-track:-.03em;--on-accent:#ffffff;--env:#e2b97f;--env-bg:rgba(226,185,127,.13);--env-fg:#ecc99a;--bg-img:radial-gradient(900px 520px at 6% -6%,rgba(120,84,22,.32),transparent 62%) no-repeat;--panel-img:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,0) 46%);--hero-img:radial-gradient(110% 90% at 0% 110%,rgba(241,90,43,.42),transparent 58%),radial-gradient(80% 70% at 100% 110%,rgba(245,183,67,.22),transparent 60%),linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,0));--scope-bg:transparent;--nav-bg:#181615;--nav-line:rgba(255,255,255,.06);--nav-on-bg:linear-gradient(90deg,rgba(255,255,255,.16),rgba(255,255,255,.05));--nav-on-fg:#ffffff;--nav-on-bar:transparent;--nav-on-sh:inset 0 1px 0 rgba(255,255,255,.12),0 8px 20px -10px rgba(0,0,0,.6);--frame:#0e0c0b;--frame-pad:14px;--shell:#141211;--shell-line:rgba(255,255,255,.07);--shell-r:30px;--shell-pad:14px;--shell-sh:inset 0 1px 0 rgba(255,255,255,.05);--nav-r:24px;--top-bg:#141211;--grad-a:#f04b26;--grad-b:#f6c045}

/* Ultraviolet: deep indigo, violet signal, square edges, joined stat strip (Dealstack) */
html[data-skin="ultraviolet"],.tp[data-skin="ultraviolet"]{--bg:#100a2b;--panel:#0d0825;--panel2:#171039;--line:#211849;--line2:#33276a;--text:#f2effd;--muted:#9a90c6;--faint:#5e568f;--hover:rgba(139,92,246,.07);--primary:#6d1ff3;--on-primary:#ffffff;--lime:#8b5cf6;--on-lime:#c4a9ff;--lime-soft:rgba(124,58,237,.16);--bar-fill:#7c3aed;--ch-made:#7c3aed;--ch-spent:#3a2b78;--gold:#a78bfa;--green:#4ade80;--red:#f0607d;--amber:#fbbf24;--ok-bg:rgba(74,222,128,.12);--ok-fg:#86efac;--info-bg:rgba(139,92,246,.18);--info-fg:#c4b5fd;--warn-bg:rgba(251,191,36,.12);--warn-fg:#fcd34d;--bad-bg:rgba(240,96,125,.14);--bad-fg:#ff8fa6;--hero-bg:#0d0825;--hero-text:#f2effd;--hero-muted:#9a90c6;--hero-track:#1d1546;--hero-fill:#7c3aed;--hero-warn:#ff8fa6;--hero-good:#86efac;--toast-bg:#1b1342;--toast-fg:#f2effd;--ring:rgba(124,58,237,.42);--shadow:none;--shadow-lg:0 0 0 1px #33276a,0 40px 90px -30px rgba(5,2,20,.9);--backdrop:rgba(6,3,20,.62);--radius:3px;--hover-shadow:0 0 0 1px #7c3aed;--rk:.18;--r-pill:3px;--r-dot:1px;--font-ui:"Avenir Next","DM Sans",-apple-system,sans-serif;--font-head:"Avenir Next","DM Sans",-apple-system,sans-serif;--font-num:"Avenir Next","DM Sans",-apple-system,sans-serif;--font-mono:ui-monospace,Menlo,monospace;--font-title:"Avenir Next","DM Sans",-apple-system,sans-serif;--title-weight:500;--title-track:-.01em;--head-track:0;--num-track:-.02em;--on-accent:#ffffff;--env:#d9b77e;--env-bg:rgba(217,183,126,.14);--env-fg:#e6c896;--bg-img:radial-gradient(1400px 700px at 50% 130%,rgba(124,58,237,.38),transparent 60%) no-repeat,radial-gradient(900px 500px at 50% -20%,rgba(76,29,149,.35),transparent 60%) no-repeat;--panel-img:none;--hero-img:none;--scope-bg:transparent;--nav-bg:#070618;--nav-line:#1a1440;--nav-on-bg:rgba(109,31,243,.16);--nav-on-fg:#ffffff;--nav-on-bar:#7c3aed;--nav-on-sh:none;--top-bg:#0e0828;--grad-a:#8b5cf6;--grad-b:#5b21b6}

/* Nebula: navy black, lavender light, raised dark controls (Stakent) */
html[data-skin="nebula"],.tp[data-skin="nebula"]{--bg:#0f1017;--panel:#12131b;--panel2:#1a1b25;--line:#22232f;--line2:#30313f;--text:#f2f1f8;--muted:#8c8b9e;--faint:#5b5a6d;--hover:rgba(255,255,255,.035);--primary:#bbb0fb;--on-primary:#15112e;--lime:#b4a7ff;--on-lime:#c9bfff;--lime-soft:rgba(180,167,255,.13);--bar-fill:#b4a7ff;--ch-made:#b4a7ff;--ch-spent:#363749;--gold:#b4a7ff;--green:#71c161;--red:#e5484d;--amber:#f0b44c;--ok-bg:rgba(113,193,97,.13);--ok-fg:#8fd47f;--info-bg:rgba(180,167,255,.14);--info-fg:#c9bfff;--warn-bg:rgba(240,180,76,.12);--warn-fg:#f3c675;--bad-bg:rgba(229,72,77,.14);--bad-fg:#ff7b7f;--hero-bg:#191539;--hero-text:#ffffff;--hero-muted:rgba(240,236,255,.7);--hero-track:rgba(255,255,255,.14);--hero-fill:#d7d0ff;--hero-warn:#ffa3a6;--hero-good:#bff0b5;--toast-bg:#1d1e2a;--toast-fg:#f2f1f8;--ring:rgba(180,167,255,.3);--shadow:inset 0 1px 0 rgba(255,255,255,.04);--shadow-lg:0 0 0 1px #30313f,0 40px 90px -30px rgba(0,0,0,.85);--backdrop:rgba(5,6,12,.6);--radius:18px;--hover-shadow:0 0 0 1px rgba(180,167,255,.4);--rk:.85;--r-pill:10px;--r-dot:50%;--font-ui:"DM Sans",Inter,-apple-system,sans-serif;--font-head:"DM Sans",Inter,-apple-system,sans-serif;--font-num:"DM Sans",Inter,-apple-system,sans-serif;--font-mono:ui-monospace,Menlo,monospace;--font-title:"DM Sans",Inter,-apple-system,sans-serif;--title-weight:400;--title-track:-.035em;--head-track:-.02em;--num-track:-.045em;--on-accent:#15112e;--env:#d8b57c;--env-bg:rgba(216,181,124,.13);--env-fg:#e6c896;--bg-img:radial-gradient(rgba(255,255,255,.055) 1px,transparent 1.4px) 0 0/22px 22px,radial-gradient(1000px 600px at 90% -10%,rgba(147,128,255,.14),transparent 60%) no-repeat;--panel-img:linear-gradient(180deg,rgba(255,255,255,.025),rgba(255,255,255,0) 40%);--hero-img:radial-gradient(130% 110% at 50% 120%,rgba(180,167,255,.62),transparent 60%),radial-gradient(60% 50% at 85% 10%,rgba(255,255,255,.12),transparent 70%),linear-gradient(180deg,#141230,#2a2163);--scope-bg:transparent;--nav-bg:#07080e;--nav-line:#1a1b25;--nav-on-bg:#171822;--nav-on-fg:#ffffff;--nav-on-bar:transparent;--nav-on-sh:inset 0 1px 0 rgba(255,255,255,.06),0 0 0 1px #2a2b38;--top-bg:#0f1017;--grad-a:#c9bfff;--grad-b:#8f7ff0}

/* Signal: black, red orange hero, white pill selection, top navigation (FinPoint) */
html[data-skin="signal"],.tp[data-skin="signal"]{--bg:#0b0b0b;--panel:#141313;--panel2:#1e1c1d;--line:#211f20;--line2:#2e2b2c;--text:#f6f4f4;--muted:#8e8a8a;--faint:#5f5b5b;--hover:rgba(255,255,255,.04);--primary:#ffffff;--on-primary:#0b0b0b;--lime:#e2502c;--on-lime:#ff8a6c;--lime-soft:rgba(226,80,44,.14);--bar-fill:#e2502c;--ch-made:#e2502c;--ch-spent:#5a5455;--gold:#f7d150;--green:#94e3a8;--red:#ff5d4a;--amber:#f7d150;--ok-bg:rgba(148,227,168,.16);--ok-fg:#94e3a8;--info-bg:rgba(160,180,255,.13);--info-fg:#b8c6ff;--warn-bg:rgba(247,209,80,.14);--warn-fg:#f7d150;--bad-bg:rgba(255,93,74,.15);--bad-fg:#ff8270;--hero-bg:#dd4e2c;--hero-text:#ffffff;--hero-muted:rgba(255,255,255,.78);--hero-track:rgba(0,0,0,.2);--hero-fill:#ffffff;--hero-warn:#3a0a00;--hero-good:#ffffff;--toast-bg:#1e1c1d;--toast-fg:#f6f4f4;--ring:rgba(255,255,255,.2);--shadow:none;--shadow-lg:0 0 0 1px #2e2b2c,0 40px 90px -30px rgba(0,0,0,.9);--backdrop:rgba(0,0,0,.66);--radius:28px;--hover-shadow:0 0 0 1px #3a3637;--rk:1.2;--r-pill:999px;--r-dot:50%;--font-ui:Inter,-apple-system,sans-serif;--font-head:Inter,-apple-system,sans-serif;--font-num:Inter,-apple-system,sans-serif;--font-mono:ui-monospace,Menlo,monospace;--font-title:Inter,-apple-system,sans-serif;--title-weight:500;--title-track:-.03em;--head-track:-.015em;--num-track:-.035em;--on-accent:#ffffff;--env:#f7d150;--env-bg:rgba(247,209,80,.13);--env-fg:#f7d150;--bg-img:none;--panel-img:none;--hero-img:repeating-linear-gradient(135deg,rgba(255,255,255,.05) 0 2px,transparent 2px 9px),linear-gradient(180deg,#e45531,#d84a28);--scope-bg:transparent;--nav-bg:#0b0b0b;--nav-line:#1a1919;--nav-on-bg:#ffffff;--nav-on-fg:#0b0b0b;--nav-on-bar:transparent;--nav-on-sh:none;--top-bg:#0b0b0b;--grad-a:#ff6a45;--grad-b:#d84a28}

/* Fleet: near black operations, floating icon rail, pale lime action (Haulix) */
html[data-skin="fleet"],.tp[data-skin="fleet"]{--bg:#141414;--panel:#1c1c1c;--panel2:#242424;--line:#292929;--line2:#363636;--text:#f3f3f3;--muted:#8d8d8d;--faint:#5d5d5d;--hover:rgba(255,255,255,.04);--primary:#d9e39b;--on-primary:#1a1c0e;--lime:#d9e39b;--on-lime:#dfe8a8;--lime-soft:rgba(217,227,155,.11);--bar-fill:#e5b84b;--ch-made:#d9e39b;--ch-spent:#474747;--gold:#d9e39b;--green:#7fd66f;--red:#f0656e;--amber:#e5b84b;--ok-bg:rgba(127,214,111,.12);--ok-fg:#98e08b;--info-bg:rgba(120,190,230,.13);--info-fg:#9fd4f0;--warn-bg:rgba(229,184,75,.13);--warn-fg:#ecc56c;--bad-bg:rgba(240,101,110,.14);--bad-fg:#ff8a91;--hero-bg:#1e1f19;--hero-text:#f3f3f3;--hero-muted:#9a9b8c;--hero-track:#2c2d25;--hero-fill:#d9e39b;--hero-warn:#ff8a91;--hero-good:#d9e39b;--toast-bg:#262626;--toast-fg:#f3f3f3;--ring:rgba(217,227,155,.3);--shadow:inset 0 1px 0 rgba(255,255,255,.03);--shadow-lg:0 0 0 1px #363636,0 40px 90px -30px rgba(0,0,0,.85);--backdrop:rgba(0,0,0,.6);--radius:16px;--hover-shadow:0 0 0 1px #4a4a4a;--rk:.7;--r-pill:999px;--r-dot:50%;--font-ui:"Inter Tight",Inter,-apple-system,sans-serif;--font-head:"Inter Tight",Inter,-apple-system,sans-serif;--font-num:"Inter Tight",Inter,-apple-system,sans-serif;--font-mono:ui-monospace,Menlo,monospace;--font-title:"Inter Tight",Inter,-apple-system,sans-serif;--title-weight:600;--title-track:-.025em;--head-track:-.015em;--num-track:-.03em;--on-accent:#1a1c0e;--env:#d8b57c;--env-bg:rgba(216,181,124,.12);--env-fg:#e6c896;--bg-img:radial-gradient(1200px 700px at 70% -20%,rgba(217,227,155,.05),transparent 60%) no-repeat;--panel-img:none;--hero-img:radial-gradient(90% 120% at 100% 0%,rgba(217,227,155,.13),transparent 60%);--scope-bg:transparent;--nav-bg:#1a1a1a;--nav-line:#262626;--nav-on-bg:#f3f3f3;--nav-on-fg:#141414;--nav-on-bar:transparent;--nav-on-sh:none;--frame:#101010;--frame-pad:12px;--nav-r:22px;--top-bg:#141414;--grad-a:#e3eca8;--grad-b:#b9c46c}

/* Aurora: teal glass over a drifting dark glow (Fuselab) */
html[data-skin="aurora"],.tp[data-skin="aurora"]{--bg:#050909;--panel:rgba(17,36,35,.72);--panel2:rgba(30,58,55,.55);--line:rgba(140,255,235,.085);--line2:rgba(140,255,235,.17);--text:#e8f5f2;--muted:#8db1a9;--faint:#56766f;--hover:rgba(47,216,196,.06);--primary:#2fd8c4;--on-primary:#032220;--lime:#2fd8c4;--on-lime:#6cf0df;--lime-soft:rgba(47,216,196,.13);--bar-fill:#2fd8c4;--ch-made:#2fd8c4;--ch-spent:#2a4a46;--gold:#dccb9b;--green:#5be3a0;--red:#ff6b7a;--amber:#f2c46b;--ok-bg:rgba(91,227,160,.12);--ok-fg:#86ecbb;--info-bg:rgba(47,216,196,.13);--info-fg:#7ff0e1;--warn-bg:rgba(242,196,107,.12);--warn-fg:#f5d08a;--bad-bg:rgba(255,107,122,.13);--bad-fg:#ff93a0;--hero-bg:#0f2a28;--hero-text:#ffffff;--hero-muted:rgba(220,255,248,.7);--hero-track:rgba(255,255,255,.12);--hero-fill:#6cf0df;--hero-warn:#ffadb6;--hero-good:#b6f7d6;--toast-bg:rgba(16,36,34,.94);--toast-fg:#e8f5f2;--ring:rgba(47,216,196,.32);--shadow:inset 0 1px 0 rgba(180,255,240,.06),0 20px 40px -24px rgba(0,0,0,.8);--shadow-lg:inset 0 1px 0 rgba(180,255,240,.08),0 0 0 1px rgba(140,255,235,.14),0 40px 100px -30px rgba(0,0,0,.9);--backdrop:rgba(2,8,8,.55);--radius:18px;--hover-shadow:0 0 0 1px rgba(47,216,196,.38),0 0 26px -6px rgba(47,216,196,.35);--rk:.85;--r-pill:12px;--r-dot:50%;--font-ui:-apple-system,BlinkMacSystemFont,Inter,sans-serif;--font-head:-apple-system,BlinkMacSystemFont,Inter,sans-serif;--font-num:-apple-system,BlinkMacSystemFont,Inter,sans-serif;--font-mono:ui-monospace,Menlo,monospace;--font-title:-apple-system,BlinkMacSystemFont,Inter,sans-serif;--title-weight:600;--title-track:-.025em;--head-track:-.015em;--num-track:-.025em;--on-accent:#032220;--env:#dccb9b;--env-bg:rgba(220,203,155,.12);--env-fg:#e6d6aa;--bg-img:radial-gradient(1100px 760px at 32% 28%,#123532 0%,#0a1919 45%,#040707 100%) no-repeat;--panel-img:linear-gradient(180deg,rgba(180,255,240,.04),rgba(180,255,240,0) 50%);--hero-img:linear-gradient(105deg,rgba(45,246,228,.0) 0%,rgba(45,246,228,.24) 48%,rgba(45,246,228,.04) 100%),linear-gradient(180deg,#123a37,#0c2321);--scope-bg:transparent;--nav-bg:rgba(9,22,21,.62);--nav-line:rgba(140,255,235,.09);--nav-on-bg:linear-gradient(90deg,rgba(47,216,196,.22),rgba(47,216,196,.05));--nav-on-fg:#e8fffb;--nav-on-bar:#2fd8c4;--nav-on-sh:inset 0 0 0 1px rgba(47,216,196,.28),0 0 22px -8px rgba(47,216,196,.5);--frame:#040707;--frame-pad:12px;--nav-r:22px;--top-bg:rgba(6,14,14,.55);--grad-a:#6cf0df;--grad-b:#159c8e}

/* Reactor: frosted amber glass on deep teal, rounded type, cards that tilt (glass card) */
html[data-skin="reactor"],.tp[data-skin="reactor"]{--bg:#142025;--panel:rgba(36,46,50,.78);--panel2:rgba(255,255,255,.05);--line:rgba(255,255,255,.08);--line2:rgba(255,255,255,.15);--text:#f4ede5;--muted:#a69b93;--faint:#6d665f;--hover:rgba(255,190,120,.06);--primary:#ff9a3f;--on-primary:#2a1405;--lime:#ffb547;--on-lime:#ffc879;--lime-soft:rgba(255,154,63,.13);--bar-fill:#ffb547;--ch-made:#ff9a3f;--ch-spent:#3d4d53;--gold:#ffc970;--green:#9fe3a0;--red:#ff6b5a;--amber:#ffc970;--ok-bg:rgba(159,227,160,.12);--ok-fg:#b5ebb6;--info-bg:rgba(140,200,230,.12);--info-fg:#a9dcf2;--warn-bg:rgba(255,201,112,.13);--warn-fg:#ffd48e;--bad-bg:rgba(255,107,90,.14);--bad-fg:#ff9184;--hero-bg:#2a2c2e;--hero-text:#fff6ec;--hero-muted:rgba(255,240,225,.7);--hero-track:rgba(255,255,255,.14);--hero-fill:#ffc879;--hero-warn:#ffb1a6;--hero-good:#cdf3c4;--toast-bg:rgba(32,42,46,.96);--toast-fg:#f4ede5;--ring:rgba(255,154,63,.32);--shadow:inset 0 1px 0 rgba(255,255,255,.07),0 24px 50px -30px rgba(0,0,0,.8);--shadow-lg:inset 0 1px 0 rgba(255,255,255,.08),0 0 0 1px rgba(255,255,255,.1),0 40px 100px -30px rgba(0,0,0,.9);--backdrop:rgba(6,12,14,.5);--radius:20px;--hover-shadow:0 0 0 1px rgba(255,180,100,.35),0 0 30px -8px rgba(255,140,50,.35);--rk:1;--r-pill:999px;--r-dot:50%;--font-ui:Quicksand,Nunito,ui-rounded,-apple-system,sans-serif;--font-head:Quicksand,Nunito,ui-rounded,-apple-system,sans-serif;--font-num:Quicksand,Nunito,ui-rounded,-apple-system,sans-serif;--font-mono:ui-monospace,Menlo,monospace;--font-title:Quicksand,Nunito,ui-rounded,-apple-system,sans-serif;--title-weight:300;--title-track:-.01em;--head-track:0;--num-track:-.02em;--on-accent:#2a1405;--env:#e8c79a;--env-bg:rgba(232,199,154,.12);--env-fg:#f0d6b0;--bg-img:radial-gradient(900px 600px at 20% 10%,rgba(255,150,70,.10),transparent 60%) no-repeat,radial-gradient(1300px 900px at 60% 40%,#1d2c33 0%,#14212672 55%,#0d171b 100%) no-repeat;--panel-img:linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,.015) 45%,rgba(255,140,60,.09) 100%);--hero-img:radial-gradient(120% 120% at 100% 105%,rgba(255,128,48,.6),transparent 56%),radial-gradient(60% 50% at 25% 0%,rgba(255,240,220,.12),transparent 70%),linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,.01));--scope-bg:transparent;--nav-bg:rgba(20,32,37,.6);--nav-line:rgba(255,255,255,.07);--nav-on-bg:linear-gradient(90deg,rgba(255,154,63,.2),rgba(255,154,63,.04));--nav-on-fg:#fff6ec;--nav-on-bar:#ffb547;--nav-on-sh:inset 0 0 0 1px rgba(255,180,100,.22);--frame:#0d171b;--frame-pad:12px;--nav-r:22px;--top-bg:rgba(15,25,29,.6);--grad-a:#ffd06b;--grad-b:#ff6a3d}

/* =====================================================================
   LAYOUT INFRASTRUCTURE
   ===================================================================== */
#topbar{display:none}
.navsec,.navsec-m{display:contents}
.navsec-h{display:none}

/* Header row: business switcher on the left, save state and quick icons on the right */
html:is([data-layout="panels"],[data-layout="rail"],[data-layout="top"]) #scopebar{display:none}
html:is([data-layout="panels"],[data-layout="rail"],[data-layout="top"]) #topbar{display:flex;align-items:center;justify-content:space-between;gap:14px;position:sticky;top:0;z-index:30;padding:16px 38px 12px;background:var(--top-bg)}
#topbar .tb-l,#topbar .tb-r{display:flex;align-items:center;gap:10px;min-width:0}
#topbar .tb-r .row{display:flex;gap:8px}
#topbar .tb-r .btn b{font-weight:700}
html:is([data-layout="panels"],[data-layout="rail"]) #nav .foot{display:none}

/* Floating frame: the app sits inside a rounded shell, sidebar and content are separate rounded panels */
@media (min-width:821px){
  html[data-frame="float"]{background:var(--frame)}
  html[data-frame="float"] body{background:transparent}
  html[data-frame="float"] #app{margin:var(--frame-pad);min-height:calc(100vh - var(--frame-pad)*2);background:var(--shell);border:1px solid var(--shell-line);border-radius:var(--shell-r);padding:var(--shell-pad);gap:var(--shell-pad);box-shadow:var(--shell-sh)}
  html[data-frame="float"] #nav{top:calc(var(--frame-pad) + var(--shell-pad));height:calc(100vh - (var(--frame-pad) + var(--shell-pad))*2);border:1px solid var(--nav-line);border-radius:var(--nav-r)}
  html[data-frame="float"] #col{background:var(--col-bg);border:1px solid var(--col-line);border-radius:var(--nav-r);min-height:calc(100vh - (var(--frame-pad) + var(--shell-pad))*2)}
  html[data-frame="float"] #topbar{top:0;border-radius:var(--nav-r) var(--nav-r) 0 0}
}

/* Rail: icons only, labels as fast tooltips (all skins in rail mode) */
.rail-tip{position:fixed;z-index:300;pointer-events:none;padding:6px 10px;border-radius:calc(9px*var(--rk));background:var(--toast-bg);color:var(--toast-fg);font-size:12.5px;font-weight:600;white-space:nowrap;box-shadow:var(--shadow-lg);opacity:0;transform:translateX(-4px);transition:opacity .12s,transform .12s var(--ease)}
.rail-tip.in{opacity:1;transform:none}
html[data-layout="rail"] #nav .rail-btn{display:none}

/* Top navigation: no sidebar; each nav group becomes a menu */
@media (min-width:821px){
  html[data-layout="top"] #app,html[data-layout="top"].rail #app{grid-template-columns:1fr;grid-template-rows:auto 1fr}
  html[data-layout="top"] #nav{position:sticky;top:0;z-index:40;height:auto;flex-direction:row;align-items:center;gap:12px;padding:16px 28px;overflow:visible;border-right:0;border-bottom:1px solid var(--nav-line);background:var(--nav-bg)}
  html[data-layout="top"] #nav .brand{padding:0 18px 0 16px;min-height:50px;border:1px solid var(--line2);border-radius:var(--r-pill);background:var(--panel);flex:none}
  html[data-layout="top"] #nav .brand .rail-btn,html[data-layout="top"] #nav .quick{display:none}
  html[data-layout="top"] #nav .brand img,html[data-layout="top"] #nav .brand .lpill{display:block}
  html[data-layout="top"] #nav .navlist{flex-direction:row;align-items:center;gap:2px;padding:5px;border:1px solid var(--line2);border-radius:var(--r-pill);background:var(--panel);min-width:0;overflow-x:auto;scrollbar-width:none}
  html[data-layout="top"] #nav .navlist::-webkit-scrollbar{display:none}
  html[data-layout="top"] #nav .navind{display:none}
  html[data-layout="top"] #nav .navlist > a.nav{height:40px;padding:0 18px;margin:0;border-radius:var(--r-pill);flex:none}
  html[data-layout="top"] #nav .navlist > a.nav svg{display:none}
  html[data-layout="top"] #nav .navlist > a.nav .nl{display:block}
  html[data-layout="top"] #nav .navlist > a.nav.on,html[data-layout="top"] #nav .navlist > a.nav.on:hover{background:var(--nav-on-bg);color:var(--nav-on-fg)}
  html[data-layout="top"] .navsec{display:block;flex:none}
  html[data-layout="top"] .navsec .navgroup{display:none}
  html[data-layout="top"] .navsec-h{display:inline-flex;align-items:center;gap:7px;height:40px;padding:0 16px 0 18px;border:0;border-radius:var(--r-pill);background:none;color:var(--muted);font:inherit;font-size:13.5px;font-weight:500;cursor:pointer;white-space:nowrap;transition:background .15s,color .15s}
  html[data-layout="top"] .navsec-h:hover,html[data-layout="top"] .navsec.open > .navsec-h{color:var(--text);background:var(--hover)}
  html[data-layout="top"] .navsec.on > .navsec-h,html[data-layout="top"] .navsec.on > .navsec-h:hover{background:var(--nav-on-bg);color:var(--nav-on-fg)}
  html[data-layout="top"] .navsec-h svg{width:13px;height:13px;transition:transform .2s var(--ease)}
  html[data-layout="top"] .navsec.open > .navsec-h svg{transform:rotate(180deg)}
  html[data-layout="top"] .navsec-m{display:block;position:fixed;z-index:60;min-width:230px;padding:6px;background:var(--panel-img),var(--panel2);border:1px solid var(--line2);border-radius:calc(18px*var(--rk));box-shadow:var(--shadow-lg);opacity:0;visibility:hidden;transform:translateY(-6px) scale(.98);transform-origin:top left;transition:opacity .16s var(--ease),transform .16s var(--ease),visibility 0s .16s}
  html[data-layout="top"] .navsec.open > .navsec-m{opacity:1;visibility:visible;transform:none;transition:opacity .16s var(--ease),transform .16s var(--ease),visibility 0s}
  html[data-layout="top"] .navsec-m a.nav{height:40px;margin:0 0 2px;border-radius:calc(12px*var(--rk));color:var(--muted)}
  html[data-layout="top"] .navsec-m a.nav.on{background:var(--hover);color:var(--text)}
  html[data-layout="top"] #nav .foot{margin:0 0 0 auto;padding:0;border:0;flex:none;gap:10px}
  html[data-layout="top"] #nav .foot .ib{width:46px;height:46px;background:var(--panel);border-color:var(--line2)}
  html[data-layout="top"] #topbar{position:static;padding-top:22px}
}

/* =====================================================================
   SHARED SIGNATURE PIECES
   ===================================================================== */
/* Hatched second series (spent) in bar charts, as in Donezo, BizLink and FinPoint */
html[data-fx~="hatch"] .ch-bar.spent{fill:url(#hq-hatch)}
html[data-fx~="hatch"] .ch-legend i.spent{background:repeating-linear-gradient(135deg,var(--ch-spent) 0 2px,transparent 2px 5px)}
html[data-fx~="hatch"] .bar{background:repeating-linear-gradient(135deg,var(--line2) 0 2px,transparent 2px 7px),var(--panel2)}
/* Gradient bars where the reference uses a glow gradient */
html:is([data-skin="ember"],[data-skin="reactor"],[data-skin="aurora"],[data-skin="ultraviolet"],[data-skin="nebula"],[data-skin="fleet"]) .ch-bar.made{fill:url(#hq-grad)}
/* Striped meters with an end marker (Dealstack) */
html[data-fx~="stripes"] .bar{height:12px;border-radius:0;background:var(--panel2)}
html[data-fx~="stripes"] .bar i{position:relative;border-radius:0;background:repeating-linear-gradient(115deg,var(--bar-fill) 0 3px,transparent 3px 6px)}
html[data-fx~="stripes"] .bar i::after{content:"";position:absolute;right:-1px;top:-3px;bottom:-3px;width:2px;background:#fff}

/* =====================================================================
   GROVE
   ===================================================================== */
html[data-skin="grove"] #nav{padding:26px 16px 18px}
html[data-skin="grove"] #nav .navgroup{font-size:12px;font-weight:500;letter-spacing:.04em;color:var(--faint);padding:18px 14px 8px}
html[data-skin="grove"] #nav a.nav{height:42px;font-size:15px;color:var(--muted);font-weight:500}
html[data-skin="grove"] #nav a.nav svg{width:19px;height:19px}
html[data-skin="grove"] #nav a.nav.on{color:var(--text);font-weight:600}
html[data-skin="grove"] #nav a.nav.on svg{color:var(--primary)}
html[data-skin="grove"] #nav .navind::before{left:-16px;top:6px;bottom:6px;width:5px;border-radius:0 6px 6px 0}
html[data-skin="grove"] #nav a.nav .count{background:var(--primary);color:#fff}
html[data-skin="grove"] #topbar{margin:0 0 4px;padding:14px 22px;background:var(--col-bg)}
html[data-skin="grove"] #topbar .tb-l .scope{background:#fff;border-color:transparent;box-shadow:none;padding:5px}
html[data-skin="grove"] .scope button{padding:9px 18px}
html[data-skin="grove"] #topbar .ib{width:44px;height:44px;background:#fff;border-color:transparent}
html[data-skin="grove"] main{padding:6px 28px 40px}
html[data-skin="grove"] .head h1{font-size:44px}
html[data-skin="grove"] .head .sub{font-size:16px}
html[data-skin="grove"] .btn{padding:11px 22px;border-width:1.5px;border-color:var(--primary);color:var(--primary);font-weight:500}
html[data-skin="grove"] .btn.gold{background:linear-gradient(180deg,#2b6243,#1d4b31);color:#fff;box-shadow:0 8px 18px -8px rgba(29,75,49,.6)}
html[data-skin="grove"] .btn.ghost{border-color:var(--primary)}
html[data-skin="grove"] .btn.sm{padding:7px 14px}
html[data-skin="grove"] .card,html[data-skin="grove"] .kpi{border-color:transparent}
html[data-skin="grove"] .kpi{position:relative;padding:22px 24px 20px}
html[data-skin="grove"] .kpi .l{font-size:17px;font-weight:500;color:var(--text);padding-right:46px}
html[data-skin="grove"] .kpi .v{font-size:clamp(30px,2.9vw,48px);font-weight:500;margin-top:18px}
html[data-skin="grove"] .kpi::after{content:"";position:absolute;top:18px;right:18px;width:40px;height:40px;border-radius:50%;border:1.5px solid var(--text);background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230e110f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7M9 7h8v8'/%3E%3C/svg%3E") center/17px no-repeat;pointer-events:none;transition:transform .3s var(--ease)}
html[data-skin="grove"] .grid > div.kpi:first-child::after{background-color:#fff;border-color:#fff}
html[data-skin="grove"] .grid > div.kpi:first-child .l{color:#fff}
html[data-skin="grove"] a.kpi:hover::after{transform:rotate(45deg)}
html[data-skin="grove"] .tabs{background:#fff;border-color:transparent;box-shadow:none}
html[data-skin="grove"] input,html[data-skin="grove"] select,html[data-skin="grove"] textarea{background-color:#fff;border-color:var(--line)}
html[data-skin="grove"] .filters input,html[data-skin="grove"] .filters select{border-radius:var(--r-pill)}

/* =====================================================================
   LINEN
   ===================================================================== */
html[data-skin="linen"] #nav{padding:30px 18px 18px;border-right:1px solid var(--line)}
html[data-skin="linen"] #nav .navgroup{text-transform:none;letter-spacing:0;font-size:13px;font-weight:500;color:var(--faint);padding:22px 12px 8px}
html[data-skin="linen"] #nav a.nav{height:42px;font-size:15px;color:var(--text);font-weight:400}
html[data-skin="linen"] #nav a.nav svg{width:19px;height:19px;stroke-width:1.6}
html[data-skin="linen"] #nav a.nav.on{font-weight:500}
html[data-skin="linen"] #nav a.nav .count{background:var(--panel2);color:var(--text);font-weight:500;border-radius:50%;min-width:24px;line-height:24px;padding:0}
html[data-skin="linen"] #col{background:linear-gradient(var(--band) 0,var(--band) 380px,var(--bg) 380px)}
html[data-skin="linen"] #topbar{padding:22px 40px 18px}
html[data-skin="linen"] .scope{background:transparent;border-color:transparent;box-shadow:none;padding:0;gap:4px}
html[data-skin="linen"] .scope button{color:var(--muted);font-weight:500}
html[data-skin="linen"] .scope button.on,html[data-skin="linen"] .scope button.on:hover{background:#111;color:#fff}
html[data-skin="linen"] #topbar .ib{border:0;width:38px;height:38px}
html[data-skin="linen"] main{padding:10px 40px 56px}
html[data-skin="linen"] .head h1{font-size:34px}
html[data-skin="linen"] .btn{border-color:var(--line2);font-weight:500;padding:10px 18px}
html[data-skin="linen"] .btn.gold{background:#0f0f0f;border-color:#0f0f0f;padding:12px 22px}
html[data-skin="linen"] .btn.gold:hover{opacity:1;background:#2a2a2a}
html[data-skin="linen"] .btn.ghost{border-color:transparent}
html[data-skin="linen"] .btn.ghost:hover{background:var(--hover)}
html[data-skin="linen"] .card,html[data-skin="linen"] .kpi{border:1.5px solid var(--line)}
html[data-skin="linen"] .kpi{background:#fff}
html[data-skin="linen"] .kpi .v{font-size:40px;font-weight:500}
html[data-skin="linen"] .kpi .l{color:var(--text);font-size:15px}
html[data-skin="linen"] .grid > div.kpi:first-child{background:#1f1f1f}
html[data-skin="linen"] .tabs{background:transparent;border:0;box-shadow:none;padding:0;gap:6px}
html[data-skin="linen"] .tabs a{border:1.5px solid var(--line)}
html[data-skin="linen"] .tabs a.on{border-color:#111}
html[data-skin="linen"] input,html[data-skin="linen"] select,html[data-skin="linen"] textarea{background-color:#fff;border-color:var(--line2)}
html[data-skin="linen"] .chip{background:transparent;border:1.5px solid var(--line);color:var(--text)}
html[data-skin="linen"] .chip.paid,html[data-skin="linen"] .chip.accepted,html[data-skin="linen"] .chip.matched{border-color:#cfe3cb}
html[data-skin="linen"] .chip.overdue,html[data-skin="linen"] .chip.declined{border-color:#f0c9c4;color:var(--bad-fg)}

/* =====================================================================
   EMBER
   ===================================================================== */
html[data-skin="ember"] #nav{padding:26px 16px 18px;background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.01)),var(--nav-bg);box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
html[data-skin="ember"] #nav .navgroup{font-size:11.5px;font-weight:500;letter-spacing:.02em;color:var(--muted);padding:18px 12px 8px}
html[data-skin="ember"] #nav a.nav{height:40px;font-size:14.5px;color:#cfc8c4}
html[data-skin="ember"] #nav .navind{border-radius:12px}
html[data-skin="ember"] #app::before{content:"";position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;background:linear-gradient(90deg,transparent 15%,rgba(255,255,255,.22) 50%,transparent 85%) top/100% 1px no-repeat}
html[data-skin="ember"] #app{position:relative}
html[data-skin="ember"] .head h1{font-size:30px}
html[data-skin="ember"] .btn{background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.02));border-color:var(--line2);color:var(--text);border-radius:12px;box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
html[data-skin="ember"] .btn:hover{border-color:rgba(255,255,255,.3)}
html[data-skin="ember"] .btn.gold{background:linear-gradient(180deg,#f46a35,#e2461f);border-color:#f46a35;color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 10px 24px -10px rgba(241,90,43,.7)}
html[data-skin="ember"] .kpi .v{font-size:32px;font-weight:600}
html[data-skin="ember"] .tabs{background:transparent;border-color:var(--line);box-shadow:none}
html[data-skin="ember"] .tabs a.on,html[data-skin="ember"] .tabs a.on:hover,html[data-skin="ember"] .scope button.on,html[data-skin="ember"] .scope button.on:hover{background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,.05));color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.22)}
html[data-skin="ember"] .scope{background:transparent;border-color:var(--line2);box-shadow:none}
html[data-skin="ember"] input,html[data-skin="ember"] select,html[data-skin="ember"] textarea{background-color:rgba(0,0,0,.18);border-color:var(--line2)}
html[data-skin="ember"] .chip{background:rgba(255,255,255,.06);border:1px solid var(--line2)}
html[data-skin="ember"] #topbar .ib{background:rgba(255,255,255,.03)}

/* =====================================================================
   ULTRAVIOLET
   ===================================================================== */
html[data-skin="ultraviolet"] #nav{padding:26px 0 16px;border-right:1px solid var(--nav-line)}
html[data-skin="ultraviolet"] #nav .brand,html[data-skin="ultraviolet"] #nav .quick{margin-left:16px;margin-right:16px}
html[data-skin="ultraviolet"] #nav .brand{padding-left:10px}
html[data-skin="ultraviolet"] #nav .navgroup{padding:22px 26px 8px;font-size:10.5px;letter-spacing:.1em;color:var(--faint)}
html[data-skin="ultraviolet"] #nav a.nav{height:44px;padding:0 26px;border-radius:0;font-size:14.5px;color:#b5acdc}
html[data-skin="ultraviolet"] #nav .navind{border-radius:0}
html[data-skin="ultraviolet"] #nav .navind::before{left:0;top:0;bottom:0;width:3px;border-radius:0}
html[data-skin="ultraviolet"] #nav a.nav .count{background:#6d1ff3;color:#fff;border-radius:2px;min-width:20px;line-height:20px}
html[data-skin="ultraviolet"] #topbar{border-bottom:1px solid var(--line);padding:14px 32px}
html[data-skin="ultraviolet"] main{padding:28px 32px 56px}
html[data-skin="ultraviolet"] .head h1{font-size:30px;font-weight:500}
html[data-skin="ultraviolet"] .grid:has(> .kpi){gap:0;border:1px solid var(--line);background:var(--panel)}
html[data-skin="ultraviolet"] .grid > .kpi{border:0;border-right:1px solid var(--line);border-radius:0;box-shadow:0 1px 0 var(--line);background:transparent;padding:22px 24px}
html[data-skin="ultraviolet"] .grid > .kpi:last-child{border-right:0}
html[data-skin="ultraviolet"] .grid > div.kpi:first-child{background:transparent;color:var(--text)}
html[data-skin="ultraviolet"] .kpi .l{font-size:14px;color:#cfc8f0}
html[data-skin="ultraviolet"] .kpi .v{font-size:40px;font-weight:300;letter-spacing:-.02em}
html[data-skin="ultraviolet"] .kpi .s{text-transform:uppercase;letter-spacing:.08em;font-size:10.5px}
html[data-skin="ultraviolet"] .btn{border-radius:3px;font-weight:500}
html[data-skin="ultraviolet"] .btn.gold{box-shadow:0 0 0 1px #8b5cf6,0 10px 30px -12px rgba(109,31,243,.8)}
html[data-skin="ultraviolet"] .tabs,html[data-skin="ultraviolet"] .scope{background:var(--panel2);border-color:var(--line2);box-shadow:none;padding:3px;gap:2px}
html[data-skin="ultraviolet"] .tabs a,html[data-skin="ultraviolet"] .scope button{border-radius:2px;padding:5px 12px;font-size:12px;text-transform:uppercase;letter-spacing:.06em}
html[data-skin="ultraviolet"] .tabs a.on,html[data-skin="ultraviolet"] .scope button.on{background:#6d1ff3;color:#fff}
html[data-skin="ultraviolet"] .chip{text-transform:uppercase;letter-spacing:.06em;font-size:10.5px}
html[data-skin="ultraviolet"] .chip::before{border-radius:1px}
html[data-skin="ultraviolet"] table.list th{text-transform:uppercase;letter-spacing:.08em;font-size:10.5px}

/* =====================================================================
   NEBULA
   ===================================================================== */
html[data-skin="nebula"] #nav{padding:24px 16px 18px;border-right:1px solid var(--nav-line)}
html[data-skin="nebula"] #nav .scope{display:flex;width:100%;margin:0 0 18px;padding:4px;background:#12131b;border-color:#22232f;box-shadow:none;border-radius:12px}
html[data-skin="nebula"] #nav .scope button{flex:1 1 auto;justify-content:center;padding:9px 6px;gap:5px;border-radius:9px;font-size:12px;white-space:nowrap}
html[data-skin="nebula"] #nav .scope .sd{width:6px;height:6px}
html[data-skin="nebula"] #topbar .quick{display:flex;gap:8px;margin:0}
html[data-skin="nebula"] #topbar .quick .btn{padding:9px 16px}
html[data-skin="nebula"] #nav .scope button.on{background:#20212c;color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 0 0 1px #30313f}
html[data-skin="nebula"] #nav .navgroup{text-transform:none;letter-spacing:0;font-size:12.5px;color:var(--faint);padding:16px 12px 6px}
html[data-skin="nebula"] #nav a.nav{height:40px;font-size:14.5px;color:#a3a2b5}
html[data-skin="nebula"] #nav .navind{border-radius:10px}
html[data-skin="nebula"] #nav a.nav .count{background:rgba(180,167,255,.16);color:#c9bfff;border-radius:6px}
html[data-skin="nebula"] #topbar{border-bottom:1px solid var(--line);padding:16px 34px}
html[data-skin="nebula"] main{padding:28px 34px 56px}
html[data-skin="nebula"] .head h1{font-size:38px}
html[data-skin="nebula"] .kpi .v{font-size:44px;font-weight:400}
html[data-skin="nebula"] .btn{border-radius:10px;background:#171822;border-color:#2c2d3b}
html[data-skin="nebula"] .btn.gold{background:linear-gradient(180deg,#c8befe,#a99bf8);border-color:#c8befe;color:#15112e;box-shadow:0 0 0 4px rgba(180,167,255,.08)}
html[data-skin="nebula"] .tabs{background:#12131b;border-color:#22232f;box-shadow:none;border-radius:12px}
html[data-skin="nebula"] .tabs a{border-radius:9px}
html[data-skin="nebula"] .tabs a.on,html[data-skin="nebula"] .tabs a.on:hover{background:#20212c;color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 0 0 1px #30313f}
html[data-skin="nebula"] input,html[data-skin="nebula"] select,html[data-skin="nebula"] textarea{background-color:#0c0d13;border-color:#22232f}
html[data-skin="nebula"] .chip{border-radius:7px}

/* =====================================================================
   SIGNAL
   ===================================================================== */
html[data-skin="signal"] #nav .brand .lpill{background:#e2502c;color:#fff}
html[data-skin="signal"] main{padding:6px 28px 56px}
html[data-skin="signal"] #topbar{padding:20px 28px 6px}
html[data-skin="signal"] .head h1{font-size:30px}
html[data-skin="signal"] .card,html[data-skin="signal"] .kpi{border-color:#1d1b1c}
html[data-skin="signal"] .kpi{background:#141313;padding:24px 26px}
html[data-skin="signal"] .kpi .v{font-size:40px;font-weight:500}
html[data-skin="signal"] .kpi .l{font-size:14.5px;color:#cfcaca}
html[data-skin="signal"] .grid > div.kpi:first-child{border-color:transparent}
html[data-skin="signal"] .grid > div.kpi:first-child .l{color:#fff}
html[data-skin="signal"] .btn{background:#141313;border-color:#2e2b2c;font-weight:500;padding:10px 20px}
html[data-skin="signal"] .btn.gold{background:#fff;border-color:#fff;color:#0b0b0b}
html[data-skin="signal"] .tabs,html[data-skin="signal"] .scope{background:#111010;border-color:#2e2b2c;box-shadow:none;padding:5px}
html[data-skin="signal"] .tabs a,html[data-skin="signal"] .scope button{padding:9px 18px;font-weight:500}
html[data-skin="signal"] input,html[data-skin="signal"] select,html[data-skin="signal"] textarea{background-color:#1a1919;border-color:#262425;border-radius:14px}
html[data-skin="signal"] .filters input,html[data-skin="signal"] .filters select{border-radius:var(--r-pill);background-color:#141313}
html[data-skin="signal"] .chip.paid,html[data-skin="signal"] .chip.accepted{background:#94e3a8;color:#0b2a14}
html[data-skin="signal"] .chip.paid::before,html[data-skin="signal"] .chip.accepted::before{background:#0b2a14}
html[data-skin="signal"] .bar{background:repeating-linear-gradient(135deg,#2a2728 0 2px,transparent 2px 7px),#1a1818}

/* =====================================================================
   FLEET
   ===================================================================== */
@media (min-width:821px){
  html[data-skin="fleet"]{background:var(--frame)}
  html[data-skin="fleet"] body{background:transparent}
  html[data-skin="fleet"] #app,html[data-skin="fleet"].rail #app{grid-template-columns:88px 1fr}
  html[data-skin="fleet"] #nav,html[data-skin="fleet"].rail #nav{margin:var(--frame-pad);top:var(--frame-pad);height:calc(100vh - var(--frame-pad)*2);padding:18px 10px 14px;border:1px solid var(--nav-line);border-radius:var(--nav-r);box-shadow:inset 0 1px 0 rgba(255,255,255,.03)}
  html[data-skin="fleet"] #nav .brand{padding:0 0 10px}
  html[data-skin="fleet"] #nav a.nav{width:42px;height:42px;margin:2px auto;border-radius:50%}
  html[data-skin="fleet"] #nav .navind{left:50%;right:auto;width:42px;margin-left:-21px;border-radius:50%}
  html[data-skin="fleet"] #nav a.nav.on svg{color:#141414}
  html[data-skin="fleet"] #nav .navgroup{margin:8px 14px}
  html[data-skin="fleet"] #nav .quick .btn{border-radius:50%;width:42px;height:42px;margin:0 auto;padding:0}
}
html[data-skin="fleet"] #topbar{padding:20px 32px 8px}
html[data-skin="fleet"] main{padding:14px 32px 56px}
html[data-skin="fleet"] .head h1{font-size:30px}
html[data-skin="fleet"] .scope{background:transparent;border:0;box-shadow:none;padding:0;gap:6px}
html[data-skin="fleet"] .scope button{background:#202020;border:1px solid #2c2c2c;padding:7px 14px;font-size:12.5px;color:#a8a8a8}
html[data-skin="fleet"] .scope button.on,html[data-skin="fleet"] .scope button.on:hover{background:#f3f3f3;border-color:#f3f3f3;color:#141414}
html[data-skin="fleet"] .btn{background:#202020;border-color:#2e2e2e;font-weight:500}
html[data-skin="fleet"] .btn.gold{background:#d9e39b;border-color:#d9e39b;color:#1a1c0e;box-shadow:0 0 0 4px rgba(217,227,155,.08)}
html[data-skin="fleet"] .tabs{background:transparent;border:0;border-bottom:1px solid var(--line);border-radius:0;box-shadow:none;padding:0;gap:22px;width:100%}
html[data-skin="fleet"] .tabs a{padding:10px 2px;border-radius:0;font-weight:500;position:relative}
html[data-skin="fleet"] .tabs a.on,html[data-skin="fleet"] .tabs a.on:hover{background:transparent;color:var(--text)}
html[data-skin="fleet"] .tabs a.on::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--text)}
html[data-skin="fleet"] .kpi .v{font-size:30px}
html[data-skin="fleet"] input,html[data-skin="fleet"] select,html[data-skin="fleet"] textarea{background-color:#181818;border-color:#2a2a2a}
html[data-skin="fleet"] .chip{border:1px solid currentColor;background:transparent}
html[data-skin="fleet"] .chip::before{display:none}
html[data-skin="fleet"] .card,html[data-skin="fleet"] .kpi{border-color:#262626}

/* =====================================================================
   AURORA
   ===================================================================== */
html[data-skin="aurora"] #nav,html[data-skin="aurora"] #topbar{-webkit-backdrop-filter:blur(18px) saturate(140%);backdrop-filter:blur(18px) saturate(140%)}
@media (min-width:821px){
  html[data-skin="aurora"] #nav{margin:var(--frame-pad);top:var(--frame-pad);height:calc(100vh - var(--frame-pad)*2);border:1px solid var(--nav-line);border-radius:var(--nav-r);box-shadow:inset 0 1px 0 rgba(180,255,240,.06)}
  html[data-skin="aurora"] #app{grid-template-columns:272px 1fr}
  html[data-skin="aurora"].rail #app{grid-template-columns:96px 1fr}
  html[data-skin="aurora"] #topbar{margin:12px 14px 0 0;border:1px solid var(--nav-line);border-radius:18px;top:0}
}
html[data-skin="aurora"] #nav a.nav{color:#a5c6be}
html[data-skin="aurora"] #nav .navgroup{color:#4f6f69}
html[data-skin="aurora"] main{padding:20px 30px 56px 16px}
html[data-skin="aurora"] .head h1{font-size:30px}
html[data-skin="aurora"] .card,html[data-skin="aurora"] .kpi{border-color:var(--line)}
html[data-skin="aurora"] .kpi{position:relative;overflow:hidden}
html[data-skin="aurora"] .grid > div.kpi:first-child{border-color:rgba(45,246,228,.35);box-shadow:0 0 0 1px rgba(45,246,228,.12),0 0 40px -14px rgba(45,246,228,.55)}
html[data-skin="aurora"] .btn{background:rgba(20,44,42,.6);border-color:var(--line2)}
html[data-skin="aurora"] .btn:hover{border-color:rgba(47,216,196,.55);box-shadow:0 0 18px -6px rgba(47,216,196,.5)}
html[data-skin="aurora"] .btn.gold{background:linear-gradient(180deg,#5ff0de,#22c3b0);border-color:#5ff0de;color:#032220;box-shadow:0 0 24px -6px rgba(47,216,196,.7)}
html[data-skin="aurora"] .tabs,html[data-skin="aurora"] .scope{background:rgba(10,26,25,.6);border-color:var(--line2);box-shadow:none}
html[data-skin="aurora"] .tabs a.on,html[data-skin="aurora"] .tabs a.on:hover,html[data-skin="aurora"] .scope button.on,html[data-skin="aurora"] .scope button.on:hover{background:linear-gradient(180deg,rgba(47,216,196,.3),rgba(47,216,196,.12));color:#e8fffb;box-shadow:inset 0 0 0 1px rgba(47,216,196,.45)}
html[data-skin="aurora"] input,html[data-skin="aurora"] select,html[data-skin="aurora"] textarea{background-color:rgba(4,14,14,.55);border-color:var(--line2)}
html[data-skin="aurora"] input:focus,html[data-skin="aurora"] select:focus,html[data-skin="aurora"] textarea:focus{border-color:#2fd8c4}
html[data-skin="aurora"] a.kpi[style*="border-color"],html[data-skin="aurora"] .sel,html[data-skin="aurora"] tr.on td{box-shadow:0 0 0 1px var(--gold)}
html[data-skin="aurora"] #modal-root .modal,html[data-skin="aurora"] .pop{-webkit-backdrop-filter:blur(22px) saturate(150%);backdrop-filter:blur(22px) saturate(150%);background:linear-gradient(180deg,rgba(24,52,50,.86),rgba(10,26,25,.9))}

/* =====================================================================
   REACTOR
   ===================================================================== */
html[data-skin="reactor"] #nav,html[data-skin="reactor"] #topbar,html[data-skin="reactor"] #modal-root .modal,html[data-skin="reactor"] .pop{-webkit-backdrop-filter:blur(20px) saturate(130%);backdrop-filter:blur(20px) saturate(130%)}
@media (min-width:821px){
  html[data-skin="reactor"] #nav{margin:var(--frame-pad);top:var(--frame-pad);height:calc(100vh - var(--frame-pad)*2);border:1px solid var(--nav-line);border-radius:var(--nav-r);box-shadow:inset 0 1px 0 rgba(255,255,255,.07)}
  html[data-skin="reactor"] #app{grid-template-columns:272px 1fr}
  html[data-skin="reactor"].rail #app{grid-template-columns:96px 1fr}
  html[data-skin="reactor"] #topbar{margin:12px 14px 0 0;border:1px solid var(--nav-line);border-radius:22px;top:0}
}
html[data-skin="reactor"] body{letter-spacing:.005em}
html[data-skin="reactor"] #nav a.nav{color:#c7bcb3;font-weight:500}
html[data-skin="reactor"] main{padding:20px 30px 56px 16px}
html[data-skin="reactor"] .head h1{font-size:36px}
html[data-skin="reactor"] .card h2{font-weight:500}
html[data-skin="reactor"] .kpi .v{font-size:36px;font-weight:500}
html[data-skin="reactor"] .card,html[data-skin="reactor"] .kpi{border-color:var(--line)}
html[data-skin="reactor"] .bar{height:4px;background:rgba(255,255,255,.08)}
html[data-skin="reactor"] .bar i{background:linear-gradient(90deg,#e7d27a,#ff8a3d 70%,#ff5a3d)}
html[data-skin="reactor"] .btn{background:rgba(255,255,255,.05);border-color:var(--line2);font-weight:500}
html[data-skin="reactor"] .btn.gold{background:linear-gradient(180deg,#ffb15a,#ff8237);border-color:#ffb15a;color:#2a1405;box-shadow:0 0 26px -8px rgba(255,140,50,.75)}
html[data-skin="reactor"] .tabs,html[data-skin="reactor"] .scope{background:rgba(255,255,255,.04);border-color:var(--line2);box-shadow:none}
html[data-skin="reactor"] .tabs a.on,html[data-skin="reactor"] .tabs a.on:hover,html[data-skin="reactor"] .scope button.on,html[data-skin="reactor"] .scope button.on:hover{background:linear-gradient(180deg,rgba(255,170,90,.32),rgba(255,140,60,.14));color:#fff6ec;box-shadow:inset 0 0 0 1px rgba(255,180,100,.4)}
html[data-skin="reactor"] input,html[data-skin="reactor"] select,html[data-skin="reactor"] textarea{background-color:rgba(0,0,0,.18);border-color:var(--line2)}

/* =====================================================================
   EFFECTS
   ===================================================================== */
/* Aurora: two soft glows drift behind everything (one composited layer, transform only) */
html[data-fx~="drift"] body::after{content:"";position:fixed;inset:-20%;z-index:-1;pointer-events:none;background:radial-gradient(28% 32% at 30% 35%,rgba(47,216,196,.14),transparent 70%),radial-gradient(24% 28% at 72% 68%,rgba(120,110,255,.08),transparent 70%);animation:fx-drift 38s ease-in-out infinite alternate;will-change:transform}
@keyframes fx-drift{0%{transform:translate3d(-3%,-2%,0) scale(1)}50%{transform:translate3d(4%,3%,0) scale(1.08)}100%{transform:translate3d(-1%,5%,0) scale(.98)}}

/* Light sweep across stat cards as they arrive (Aurora teal, Reactor amber, Ember warm) */
html[data-fx~="sweep"] .kpi{position:relative;overflow:hidden}
html[data-fx~="sweep"] .kpi.m-enter::before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(100deg,transparent 30%,var(--sweep,rgba(255,255,255,.14)) 50%,transparent 70%);transform:translateX(-120%);animation:fx-sweep 1.1s var(--ease) forwards;animation-delay:calc(var(--i,0) * 70ms + .35s)}
html[data-skin="aurora"]{--sweep:rgba(45,246,228,.22)}
html[data-skin="reactor"]{--sweep:rgba(255,190,120,.18)}
html[data-skin="ember"]{--sweep:rgba(255,170,110,.12)}
@keyframes fx-sweep{to{transform:translateX(120%)}}

/* Panels swing in from the right in 3D (Aurora, Nebula) */
html[data-fx~="swing"] #modal-root .back{perspective:1600px}
html[data-fx~="swing"] #modal-root .modal{animation:fx-swing .52s var(--ease);transform-origin:100% 50%}
@keyframes fx-swing{from{opacity:0;transform:translateX(60px) rotateY(-16deg) scale(.97)}to{opacity:1;transform:none}}

/* Boot: the page comes up out of the dark, piece by piece (Fleet) */
html[data-fx~="boot"] .m-enter{animation:fx-boot .7s var(--ease) backwards;animation-delay:calc(var(--i,0) * 75ms + 60ms)}
@keyframes fx-boot{from{opacity:0;transform:translateY(10px);filter:blur(6px)}60%{filter:blur(0)}to{opacity:1;transform:none;filter:none}}

/* Tilt: cards lean toward the pointer with a moving glare (Reactor). JS sets --rx --ry --gx --gy on hover only. */
html[data-fx~="tilt"] .kpi{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .5s var(--ease),box-shadow .3s var(--ease)}
html[data-fx~="tilt"] .kpi.tilting{transition:transform .08s linear,box-shadow .3s var(--ease);box-shadow:var(--hover-shadow)}
html[data-fx~="tilt"] .kpi::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;background:radial-gradient(260px circle at var(--gx,50%) var(--gy,50%),rgba(255,230,200,.16),transparent 60%);transition:opacity .3s}
html[data-fx~="tilt"] .kpi.tilting::after{opacity:1}
html[data-fx~="tilt"] .kpi{position:relative}

/* =====================================================================
   SMALL SCREENS AND REDUCED MOTION
   ===================================================================== */
@media (max-width:820px){
  html[data-skin="linen"] #col{background:var(--bg)}
  html:is([data-layout="panels"],[data-layout="rail"],[data-layout="top"]) #topbar{padding:12px 18px;flex-wrap:wrap}
  html[data-layout="top"] #nav .navsec .navgroup{display:block}
}
@media (prefers-reduced-motion:reduce){
  html[data-fx~="drift"] body::after,html[data-fx~="sweep"] .kpi.m-enter::before{animation:none;display:none}
  html[data-fx~="swing"] #modal-root .modal,html[data-fx~="boot"] .m-enter{animation:none}
  html[data-fx~="tilt"] .kpi{transform:none !important}
  html[data-layout="top"] .navsec-m{transition:none}
}

/* Save status keeps its words in the header row, even when the sidebar is collapsed to a rail */
#topbar #savestate,html.rail #topbar #savestate{font-size:12.5px;gap:8px}
/* Fleet: the HQ badge stands in for the logo at the top of the rail */
@media (min-width:821px){html[data-skin="fleet"] #nav .brand .lpill{display:block;padding:5px 9px;font-size:11px}}

/* Theme picker: the new groups are wider, and each new theme says what it changes */
.skingrid > div:has(.tp-desc){grid-column:span 2}
.skingrid > div:has(.tp-desc) .skinpair{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.tprev .tp-desc{font-size:11.5px;line-height:1.35;color:var(--faint);padding:0 2px;margin-top:-3px}
@media (max-width:820px){.skingrid > div:has(.tp-desc){grid-column:auto}}