/* ARGUS foundations — shared shell layer (tokens · themes · typography · primitives · animations · shell component classes)
   Extracted from the monolith. Referenced by index.dc.html (parent) and every extracted surface DC via <link rel="stylesheet" href="./foundations.css">. */

:root{
      --right-rail-width: clamp(56px, 3.5vw, 90px);
      --topbar-height: clamp(56px, 5.9vh, 85px);
      --rail-icon-size: clamp(34px, 2.1vw, 54px);
      --topbar-icon-button: var(--topbar-height);
      --topbar-main-font-size: clamp(18px, 0.95vw, 24px);
      --topbar-tab-font-size: clamp(16px, 0.85vw, 22px);
      --glass-blur: 14px;
    }
    /* typography exception rule:
         • Topbar tabs (.tb-tab) → Orbitron (the ONLY Orbitron surface)
         • All other display headers (inline 'Orbitron' or 'Electrolize') → Electrolize
         • UI body → Oxanium (via .argus-root)
         • Mono (inline 'Victor Mono' / 'Spline Sans Mono') → Roboto Mono */
    [style*="Orbitron"]:not(.tb-tab), [style*="Electrolize"]:not(.tb-tab){ font-family:'Electrolize','Segoe UI',sans-serif !important; }
    [style*="Spline Sans Mono"], [style*="Victor Mono"]{ font-family:'Roboto Mono',ui-monospace,SFMono-Regular,Menlo,monospace !important; font-feature-settings:normal !important; }
    /* toast/status primitive · entrance/dismiss variants + auto-dismiss fill drain */
    @keyframes toastIn{0%{opacity:0;transform:translateY(10px) scale(.97);}100%{opacity:1;transform:translateY(0) scale(1);}}
    @keyframes toastInSlide{0%{opacity:0;transform:translateY(12px);}100%{opacity:1;transform:translateY(0);}}
    @keyframes toastInFade{0%{opacity:0;}100%{opacity:1;}}
    @keyframes toastInScale{0%{opacity:0;transform:scale(.88);}100%{opacity:1;transform:scale(1);}}
    @keyframes toastOutSlide{0%{opacity:1;transform:translateY(0);}100%{opacity:0;transform:translateY(12px);}}
    @keyframes toastOutFade{0%{opacity:1;}100%{opacity:0;}}
    @keyframes toastOutScale{0%{opacity:1;transform:scale(1);}100%{opacity:0;transform:scale(.88);}}
    @keyframes toastBar{from{width:100%;}to{width:0%;}}
    .argus-root{ font-family:'Oxanium',system-ui,sans-serif; }
    /* right sidebar drawer · pixel-burst open/close */
    @keyframes qScanline{0%{opacity:0;transform:translateX(-20%);}16%{opacity:1;}100%{opacity:0;transform:translateX(380%);}}
    @keyframes qEdgeBeam{0%{opacity:0;transform:scaleY(.08);}18%{opacity:1;transform:scaleY(1);}100%{opacity:0;transform:scaleY(.86);}}
    @keyframes qPixelBurst{0%{opacity:0;transform:translate(0,0) scale(1);}12%{opacity:1;}42%{opacity:.92;transform:translate(var(--mx,0),var(--my,0)) scale(1);}72%{opacity:.58;}100%{opacity:0;transform:translate(var(--dx,0),var(--dy,0)) scale(0);}}
  

    *{box-sizing:border-box;}
    body{margin:0;}
    .argus-root{
      /* --line: separator/break-line token — text-derived so it stays visible on every theme + glass surface (bd2/bd3 vanish on dark) */
      --line: color-mix(in srgb, var(--tx) 14%, transparent);
      --bg:#080B12;--bg2:#0A0E15;--bg3:#0C111A;--glass:rgba(14,20,30,.62);--glass2:rgba(11,16,24,.5);
      --bd:#1b2536;--bd2:#141d29;--bd3:#101722;--tx:#E6EBF2;--tx2:#9aa7b8;--tx3:#7b8a9d;--tx4:#636f7f;
      --acc:#4FCBE0;--acc2:#7fdcec;--accsoft:rgba(79,203,224,.10);--accbd:rgba(79,203,224,.30);--accink:#06222A;--logo-neon:#00e5ff;--logo-neon-2:#6a4cff;
      --good:#54C08A;--bad:#E86A57;--sec:#C792EA;--warn:#E3B341;--info:#5BA8FF;--chatScrim:linear-gradient(to bottom,rgba(8,11,18,.5) 0%,rgba(8,11,18,.68) 35%,rgba(8,11,18,.68) 65%,rgba(8,11,18,.5) 100%);--g1:rgba(79,203,224,.07);--g2:rgba(79,203,224,.04);
      --code-bg:#0d2630;--code-tx:#7fdcec;--code-bd:#163844;--sel:rgba(79,203,224,.10);--shadow:rgba(0,0,0,.5);
      --chrome-base:#131c2e;--chrome-cell:#0c1420;--chrome-hi:#162030;--chrome-rim:#0e1828;--chrome-mid:#1a2840;--chrome-light:#1e3050;--chrome-shadow:#060c14;--chrome-border:#0a1422;--chrome-deep:#0e1525;--chrome-darker:#090f1c;
    }
    .thm-phantom{
      --bg:#0A0912;--bg2:#0C0B16;--bg3:#100E1C;--glass:rgba(18,16,30,.62);--glass2:rgba(14,12,24,.5);
      --bd:#241f38;--bd2:#1b1729;--bd3:#161222;--tx:#ECE9F6;--tx2:#A39DBE;--tx3:#867ea1;--tx4:#665f7d;
      --acc:#A78BFA;--acc2:#C4B5FD;--accsoft:rgba(167,139,250,.12);--accbd:rgba(167,139,250,.32);--accink:#1c1238;--logo-neon:#b58cff;--logo-neon-2:#4322a8;
      --good:#5BD0A0;--bad:#F0728A;--sec:#5BD3E0;--warn:#F2B441;--info:#6BB6FF;--chatScrim:linear-gradient(to bottom,rgba(12,10,22,.5) 0%,rgba(12,10,22,.68) 35%,rgba(12,10,22,.68) 65%,rgba(12,10,22,.5) 100%);--g1:rgba(167,139,250,.08);--g2:rgba(120,90,220,.05);
      --code-bg:#1c1633;--code-tx:#c4b5fd;--code-bd:#2c2347;--sel:rgba(167,139,250,.12);--shadow:rgba(0,0,0,.55);
      --chrome-base:#201232;--chrome-cell:#130b22;--chrome-hi:#2a173f;--chrome-rim:#180d27;--chrome-mid:#351c50;--chrome-light:#4d2870;--chrome-shadow:#06030c;--chrome-border:#12091d;--chrome-deep:#130a20;--chrome-darker:#090510;
    }
    .thm-nova{
      --bg:#0E0B07;--bg2:#120E09;--bg3:#17120B;--glass:rgba(26,20,12,.6);--glass2:rgba(20,15,9,.5);
      --bd:#2c2316;--bd2:#211a10;--bd3:#1a140c;--tx:#F2ECE0;--tx2:#B7AC97;--tx3:#988c6f;--tx4:#746a53;
      --acc:#EBB04A;--acc2:#F5C972;--accsoft:rgba(235,176,74,.10);--accbd:rgba(235,176,74,.30);--accink:#2a1e08;--logo-neon:#ffc24a;--logo-neon-2:#b5471a;
      --good:#8FB860;--bad:#E8765A;--sec:#5FC6DE;--warn:#E8743A;--info:#6BB6FF;--chatScrim:linear-gradient(to bottom,rgba(18,13,7,.5) 0%,rgba(18,13,7,.68) 35%,rgba(18,13,7,.68) 65%,rgba(18,13,7,.5) 100%);--g1:rgba(235,176,74,.07);--g2:rgba(200,120,40,.05);
      --code-bg:#2a1f0c;--code-tx:#f5c972;--code-bd:#3c2e12;--sel:rgba(235,176,74,.10);--shadow:rgba(0,0,0,.55);
      --chrome-base:#1d140d;--chrome-cell:#100c08;--chrome-hi:#27180e;--chrome-rim:#1c1008;--chrome-mid:#321a0c;--chrome-light:#5a2b10;--chrome-shadow:#030201;--chrome-border:#1a0d05;--chrome-deep:#120a06;--chrome-darker:#070504;
    }
    /* prism: magenta/cyan cyberpunk dark — shares phantom's deep-violet base surfaces */
    .thm-prism{
      --bg:#0A0912;--bg2:#0C0B16;--bg3:#100E1C;--glass:rgba(18,16,30,.62);--glass2:rgba(14,12,24,.5);
      --bd:#241f38;--bd2:#1b1729;--bd3:#100B20;--tx:#D8ECF7;--tx2:#B8CDE4;--tx3:#9fb4cd;--tx4:#6d8099;
      --acc:#FF3EDB;--acc2:#FF7AEA;--accsoft:rgba(255,62,219,.10);--accbd:rgba(255,62,219,.30);--accink:#20081A;--logo-neon:#ff5ce4;--logo-neon-2:#7d1a9c;
      --good:#39FF14;--bad:#FF3B8F;--sec:#00F0FF;--warn:#FFE600;--info:#00F0FF;--chatScrim:linear-gradient(to bottom,rgba(10,9,18,.55) 0%,rgba(10,9,18,.7) 35%,rgba(10,9,18,.7) 65%,rgba(10,9,18,.55) 100%);--g1:rgba(255,62,219,.07);--g2:rgba(0,240,255,.04);
      --code-bg:#1c1633;--code-tx:#FF7AEA;--code-bd:#2c2347;--sel:rgba(255,62,219,.12);--shadow:rgba(0,0,0,.6);
      --chrome-base:#201232;--chrome-cell:#130b22;--chrome-hi:#2a173f;--chrome-rim:#180d27;--chrome-mid:#351c50;--chrome-light:#4d2870;--chrome-shadow:#06030c;--chrome-border:#12091d;--chrome-deep:#130a20;--chrome-darker:#090510;
    }
    /* diesel: industrial orange dark — shares nova's warm base surfaces */
    .thm-diesel{
      --bg:#0E0B07;--bg2:#120E09;--bg3:#17120B;--glass:rgba(26,20,12,.6);--glass2:rgba(20,15,9,.5);
      --bd:#2c2316;--bd2:#211a10;--bd3:#15110D;--tx:#E8DED2;--tx2:#C9B9A7;--tx3:#b0a89e;--tx4:#877b70;
      --acc:#FF6A00;--acc2:#FF9A3D;--accsoft:rgba(255,106,0,.10);--accbd:rgba(255,106,0,.30);--accink:#2E1100;--logo-neon:#ff9138;--logo-neon-2:#8f2f0c;
      --good:#39FF14;--bad:#FF4D4D;--sec:#00E5FF;--warn:#FFE600;--info:#00E5FF;--chatScrim:linear-gradient(to bottom,rgba(14,11,7,.5) 0%,rgba(14,11,7,.7) 35%,rgba(14,11,7,.7) 65%,rgba(14,11,7,.5) 100%);--g1:rgba(255,106,0,.08);--g2:rgba(255,154,61,.04);
      --code-bg:#2a1f0c;--code-tx:#FF9A3D;--code-bd:#3c2e12;--sel:rgba(255,106,0,.10);--shadow:rgba(0,0,0,.6);
      --chrome-base:#1d140d;--chrome-cell:#100c08;--chrome-hi:#27180e;--chrome-rim:#1c1008;--chrome-mid:#321a0c;--chrome-light:#5a2b10;--chrome-shadow:#030201;--chrome-border:#1a0d05;--chrome-deep:#120a06;--chrome-darker:#070504;
    }
    /* harbor-mist: light variant — same surface stack as white, slightly cooler glass tint */
    .thm-harbor-mist{
      --bg:#E8ECF2;--bg2:#FFFFFF;--bg3:#F2F5F9;--glass:rgba(240,244,248,.52);--glass2:rgba(255,255,255,.50);
      --bd:#D5DCE6;--bd2:#E1E7EE;--bd3:#E9EEF3;--tx:#16202E;--tx2:#566273;--tx3:#6E7B8C;--tx4:#7E8896;
      --acc:#0C8AA6;--acc2:#0A7C95;--accsoft:rgba(12,138,166,.10);--accbd:rgba(12,138,166,.30);--accink:#FFFFFF;--logo-neon:#0C8AA6;--logo-neon-2:#6D4DCC;
      --good:#1F9D63;--bad:#D2563D;--sec:#6D4DCC;--warn:#B86E1D;--info:#1B6FC2;--chatScrim:linear-gradient(to bottom,rgba(240,244,248,.32) 0%,rgba(240,244,248,.5) 35%,rgba(240,244,248,.5) 65%,rgba(240,244,248,.32) 100%);--g1:rgba(12,138,166,.05);--g2:rgba(124,183,199,.04);
      --code-bg:#E6EEF1;--code-tx:#0A6E85;--code-bd:#CFE0E5;--sel:rgba(12,138,166,.08);--shadow:rgba(22,32,46,.16);
      --chrome-base:#F2F5F9;--chrome-cell:#E1E7EE;--chrome-hi:#FFFFFF;--chrome-rim:#D5DCE6;--chrome-mid:#FFFFFF;--chrome-light:#FFFFFF;--chrome-shadow:#C4CDD9;--chrome-border:#D5DCE6;--chrome-deep:#E1E7EE;--chrome-darker:#D5DCE6;
    }
    /* cloudline: light variant — light sky blue cool light */
    .thm-cloudline{
      --bg:#fdfdfd;--bg2:#f1f5f9;--bg3:#e2e8f0;--glass:rgba(253,253,253,.52);--glass2:rgba(255,255,255,.55);
      --bd:#cbd5e1;--bd2:#dde5ee;--bd3:#e6ecf3;--tx:#0f172a;--tx2:#64748b;--tx3:#7C8A9B;--tx4:#828E9D;
      --acc:#6ECBF5;--acc2:#46B4E6;--accsoft:rgba(110,203,245,.12);--accbd:rgba(110,203,245,.36);--accink:#062633;--logo-neon:#6ECBF5;--logo-neon-2:#8E7CF0;
      --good:#15803d;--bad:#dc2626;--sec:#8E7CF0;--warn:#d97706;--info:#0e6ea1;--chatScrim:linear-gradient(to bottom,rgba(253,253,253,.32) 0%,rgba(253,253,253,.5) 35%,rgba(253,253,253,.5) 65%,rgba(253,253,253,.32) 100%);--g1:rgba(110,203,245,.06);--g2:rgba(142,124,240,.03);
      --code-bg:#e8f6fd;--code-tx:#0e6ea1;--code-bd:#cfe6f2;--sel:rgba(110,203,245,.08);--shadow:rgba(20,30,45,.16);
      --chrome-base:#F1F5F9;--chrome-cell:#E2E8F0;--chrome-hi:#FFFFFF;--chrome-rim:#CBD5E1;--chrome-mid:#FFFFFF;--chrome-light:#FFFFFF;--chrome-shadow:#B4C0D0;--chrome-border:#CBD5E1;--chrome-deep:#E2E8F0;--chrome-darker:#CBD5E1;
    }
    /* cerberus: light variant — warm gold/amber light (user-specified accent + secondary) */
    .thm-cerberus{
      --bg:#F4F5F7;--bg2:#FFFFFF;--bg3:#F8F9FA;--glass:rgba(244,245,247,.52);--glass2:rgba(255,255,255,.55);
      --bd:#D5D9E0;--bd2:#E1E4EA;--bd3:#E9ECF1;--tx:#0A0A0C;--tx2:#5B6472;--tx3:#727B89;--tx4:#828A97;
      --acc:#F8B840;--acc2:#E8A430;--accsoft:rgba(248,184,64,.10);--accbd:rgba(248,184,64,.30);--accink:#241605;--logo-neon:#F8B840;--logo-neon-2:#F08020;
      --good:#1F9D63;--bad:#D2563D;--sec:#F08020;--warn:#B86A1D;--info:#1B6FC2;--chatScrim:linear-gradient(to bottom,rgba(244,245,247,.32) 0%,rgba(244,245,247,.5) 35%,rgba(244,245,247,.5) 65%,rgba(244,245,247,.32) 100%);--g1:rgba(248,184,64,.06);--g2:rgba(240,128,32,.03);
      --code-bg:#FBF1DE;--code-tx:#8A5A00;--code-bd:#F0E0BE;--sel:rgba(248,184,64,.08);--shadow:rgba(20,20,15,.16);
      --chrome-base:#F8F9FA;--chrome-cell:#E1E4EA;--chrome-hi:#FFFFFF;--chrome-rim:#D5D9E0;--chrome-mid:#FFFFFF;--chrome-light:#FFFFFF;--chrome-shadow:#C7CAD1;--chrome-border:#D5D9E0;--chrome-deep:#E1E4EA;--chrome-darker:#D5D9E0;
    }
    /* adaptive neutral: neutral graphite dark base. Its accent tokens (--acc/--acc2/--accsoft/--accbd/--sec/
       --logo-neon*) are OVERRIDDEN at runtime from the current Photo 4K / Video background by
       _updateAdaptive(); with no art background it stays on this neutral steel accent. */
    .thm-adaptive-neutral,
    .thm-adaptive{
      --bg:#0B0D10;--bg2:#101317;--bg3:#14171C;--glass:rgba(20,23,28,.62);--glass2:rgba(16,19,23,.5);
      --bd:#262B33;--bd2:#1C2027;--bd3:#171B21;--tx:#E9ECF1;--tx2:#A2AAB6;--tx3:#828B98;--tx4:#69717D;
      --acc:#8FA6B8;--acc2:#B3C4D2;--accsoft:rgba(143,166,184,.12);--accbd:rgba(143,166,184,.32);--accink:#0C1116;--logo-neon:var(--acc);--logo-neon-2:var(--sec);
      --good:#54C08A;--bad:#E86A57;--sec:#B3C4D2;--warn:#E3B341;--info:#5BA8FF;--chatScrim:linear-gradient(to bottom,rgba(11,13,16,.5) 0%,rgba(11,13,16,.68) 35%,rgba(11,13,16,.68) 65%,rgba(11,13,16,.5) 100%);--g1:rgba(143,166,184,.07);--g2:rgba(143,166,184,.04);
      --code-bg:#171B22;--code-tx:#B3C4D2;--code-bd:#242A33;--sel:rgba(143,166,184,.12);--shadow:rgba(0,0,0,.5);
      --chrome-base:#171C24;--chrome-cell:#0f141b;--chrome-hi:#1b2230;--chrome-rim:#121820;--chrome-mid:#1e2634;--chrome-light:#222b3a;--chrome-shadow:#080c12;--chrome-border:#0c1219;--chrome-deep:#111722;--chrome-darker:#0b1017;
    }
    /* adaptive-cool: adaptive family, cool steel-blue neutral base (samples art like adaptive; falls back to this cool tint) */
    .thm-adaptive-cool{
      --bg:#090C11;--bg2:#0E1219;--bg3:#12171F;--glass:rgba(18,24,32,.62);--glass2:rgba(14,19,26,.5);
      --bd:#232C38;--bd2:#1A212C;--bd3:#151C25;--tx:#E7ECF3;--tx2:#9EAAB9;--tx3:#7E8A9B;--tx4:#66707F;
      --acc:#6FA8C7;--acc2:#96C6DE;--accsoft:rgba(111,168,199,.12);--accbd:rgba(111,168,199,.32);--accink:#07131B;--logo-neon:var(--acc);--logo-neon-2:var(--sec);
      --good:#54C08A;--bad:#E86A57;--sec:#8FB8D8;--warn:#E3B341;--info:#5BA8FF;--chatScrim:linear-gradient(to bottom,rgba(9,12,17,.5) 0%,rgba(9,12,17,.68) 35%,rgba(9,12,17,.68) 65%,rgba(9,12,17,.5) 100%);--g1:rgba(111,168,199,.07);--g2:rgba(111,168,199,.04);
      --code-bg:#141B24;--code-tx:#96C6DE;--code-bd:#213042;--sel:rgba(111,168,199,.12);--shadow:rgba(0,0,0,.5);
      --chrome-base:#151D28;--chrome-cell:#0e151f;--chrome-hi:#1a2536;--chrome-rim:#111a25;--chrome-mid:#1d2a3c;--chrome-light:#213043;--chrome-shadow:#070c13;--chrome-border:#0b131c;--chrome-deep:#101a26;--chrome-darker:#0a121b;
    }
    /* adaptive-warm: adaptive family, warm sand/amber neutral base (samples art like adaptive; falls back to this warm tint) */
    .thm-adaptive-warm{
      --bg:#0E0C08;--bg2:#13100B;--bg3:#18140D;--glass:rgba(30,24,15,.6);--glass2:rgba(22,17,10,.5);
      --bd:#332A1B;--bd2:#241D12;--bd3:#1C160E;--tx:#F2ECE1;--tx2:#B8AC96;--tx3:#988C74;--tx4:#746A54;
      --acc:#C79A6F;--acc2:#DCB78C;--accsoft:rgba(199,154,111,.12);--accbd:rgba(199,154,111,.32);--accink:#241706;--logo-neon:var(--acc);--logo-neon-2:var(--sec);
      --good:#54C08A;--bad:#E86A57;--sec:#D8B27F;--warn:#E3B341;--info:#5BA8FF;--chatScrim:linear-gradient(to bottom,rgba(14,12,8,.5) 0%,rgba(14,12,8,.68) 35%,rgba(14,12,8,.68) 65%,rgba(14,12,8,.5) 100%);--g1:rgba(199,154,111,.07);--g2:rgba(199,154,111,.04);
      --code-bg:#1B1610;--code-tx:#DCB78C;--code-bd:#2E2416;--sel:rgba(199,154,111,.12);--shadow:rgba(0,0,0,.5);
      --chrome-base:#1C1710;--chrome-cell:#120e08;--chrome-hi:#241d12;--chrome-rim:#17110a;--chrome-mid:#28200f;--chrome-light:#2e2512;--chrome-shadow:#0b0805;--chrome-border:#130f08;--chrome-deep:#1a140b;--chrome-darker:#0f0b06;
    }
    .msym{font-family:'Material Symbols Outlined';font-weight:400;font-style:normal;line-height:1;letter-spacing:normal;text-transform:none;white-space:nowrap;direction:ltr;font-feature-settings:'liga';-webkit-font-smoothing:antialiased;font-variation-settings:'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 24;}
    [data-noscroll]::-webkit-scrollbar{display:none;width:0;height:0;}
    textarea::placeholder{color:var(--tx3);}
    @keyframes caBlink{50%{opacity:0}}
    @keyframes caBob{0%,100%{transform:translateY(0);opacity:.4}50%{transform:translateY(-5px);opacity:1}}
    @keyframes caPulse{0%,100%{opacity:1}50%{opacity:.3}}
    @keyframes caGlow{0%,100%{box-shadow:0 0 0 0 var(--accbd)}50%{box-shadow:0 0 0 6px transparent}}
    @keyframes caFloat{0%,100%{transform:rotate(45deg) translateY(0)}50%{transform:rotate(45deg) translateY(-3px)}}
    @keyframes traceFlow{0%{opacity:.9}50%{opacity:.3}100%{opacity:.9}}
    @keyframes execFill{from{width:0}to{width:100%}}
    /* status-bar meter popovers */
    .meter-slot{position:relative;cursor:default;}
    .meter-pop{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);z-index:40;padding:8px 12px;border-radius:9px;background:rgba(0,0,0,.86);border:1px solid rgba(255,255,255,.08);color:var(--tx);font-family:'Oxanium',sans-serif;font-size:12px;line-height:1.35;white-space:nowrap;text-align:center;opacity:0;pointer-events:none;transition:opacity .15s ease;box-shadow:0 12px 28px rgba(0,0,0,.55);}
    .meter-pop::after{content:"";position:absolute;left:50%;top:100%;transform:translateX(-50%);border:5px solid transparent;border-top-color:rgba(0,0,0,.86);}
    .meter-slot:hover .meter-pop{opacity:1;}
    @keyframes laneFade{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:translateY(0)}}
    @keyframes argusPulse{0%,100%{opacity:.6}18%{opacity:1}45%{opacity:.6}}
    @keyframes qNeonPulse{0%,100%{opacity:1}50%{opacity:.85}}
    /* Phase-in: soft blur+lift+fade when a streamed message finalizes into its formatted body.
       Runs once on the freshly-committed assistant message; other messages stay static. */
    @keyframes msgPhaseIn{
      0%   { opacity: 0; filter: blur(4px); transform: translateY(4px); }
      60%  { opacity: 1; filter: blur(0); }
      100% { opacity: 1; filter: blur(0); transform: translateY(0); }
    }
    /* Floating Lights bg (theme-aware) */
    @keyframes floatUp{0%{top:100vh;opacity:0}25%{opacity:1}50%{top:0;opacity:.8}75%{opacity:1}100%{top:-100vh;opacity:0}}
    .fl-light{position:absolute;width:24px;height:24px;border-radius:50%;background:var(--acc);box-shadow:0 0 22px 4px var(--acc);opacity:0;top:100vh;bottom:0;left:0;right:0;margin:auto;pointer-events:none;}
    .fl-x1{animation:floatUp 4s infinite linear;transform:scale(1)}
    .fl-x2{animation:floatUp 7s infinite linear;transform:scale(1.6);left:15%}
    .fl-x3{animation:floatUp 2.5s infinite linear;transform:scale(.5);left:-15%}
    .fl-x4{animation:floatUp 4.5s infinite linear;transform:scale(1.2);left:-34%}
    .fl-x5{animation:floatUp 8s infinite linear;transform:scale(2.2);left:-57%}
    .fl-x6{animation:floatUp 3s infinite linear;transform:scale(.8);left:-81%}
    .fl-x7{animation:floatUp 5.3s infinite linear;transform:scale(3.2);left:37%}
    .fl-x8{animation:floatUp 4.7s infinite linear;transform:scale(1.7);left:62%}
    .fl-x9{animation:floatUp 4.1s infinite linear;transform:scale(.9);left:85%}
    /* ===== rail buttons — production chrome-cell parity ===== */
    .rail-btn{position:relative;display:grid;place-items:center;width:var(--rail-icon-size);height:var(--rail-icon-size);flex:0 0 auto;cursor:pointer;border:1px solid var(--chrome-border);border-radius:10px;background:linear-gradient(180deg, var(--chrome-hi), var(--chrome-cell));box-shadow:0 3px 5px rgba(0,0,0,.42), 0 1px 2px rgba(0,0,0,.34), inset 0 1px 0 color-mix(in srgb,#fff 12%,transparent), inset 0 -2px 3px rgba(0,0,0,.36);transition:transform .1s ease-out, box-shadow .12s ease-out, background .12s ease-out;}
    .rail-bar{position:absolute;pointer-events:none;transition:opacity .1s ease-out;}
    .rail-bar-l{left:-1px;}
    .rail-bar-r{right:-1px;left:auto;}
    .rail-ico{transition:none;color:var(--tx3);}
    /* active icon/bar color — literal hex per theme (bypasses framework var() substitution) */
    .thm-vector .rail-btn.rail-on .rail-ico{color:#4FCBE0 !important;filter:drop-shadow(0 0 6px rgba(79,203,224,.86)) drop-shadow(0 0 12px rgba(79,203,224,.3)) !important;}
    .thm-phantom  .rail-btn.rail-on .rail-ico{color:#A78BFA !important;filter:drop-shadow(0 0 6px rgba(167,139,250,.86)) drop-shadow(0 0 12px rgba(167,139,250,.3)) !important;}
    .thm-nova .rail-btn.rail-on .rail-ico{color:#EBB04A !important;filter:drop-shadow(0 0 6px rgba(235,176,74,.86)) drop-shadow(0 0 12px rgba(235,176,74,.3)) !important;}
    .thm-vector .rail-btn.rail-on .rail-bar{background:#4FCBE0 !important;box-shadow:0 0 8px rgba(79,203,224,.72),0 0 14px rgba(79,203,224,.32) !important;}
    .thm-phantom  .rail-btn.rail-on .rail-bar{background:#A78BFA !important;box-shadow:0 0 8px rgba(167,139,250,.72),0 0 14px rgba(167,139,250,.32) !important;}
    .thm-nova .rail-btn.rail-on .rail-bar{background:#EBB04A !important;box-shadow:0 0 8px rgba(235,176,74,.72),0 0 14px rgba(235,176,74,.32) !important;}
    .thm-prism .rail-btn.rail-on .rail-ico{color:#FF3EDB !important;filter:drop-shadow(0 0 6px rgba(255,62,219,.86)) drop-shadow(0 0 12px rgba(255,62,219,.3)) !important;}
    .thm-diesel .rail-btn.rail-on .rail-ico{color:#FF6A00 !important;filter:drop-shadow(0 0 6px rgba(255,106,0,.86)) drop-shadow(0 0 12px rgba(255,106,0,.3)) !important;}
    .thm-harbor-mist .rail-btn.rail-on .rail-ico{color:#0C8AA6 !important;filter:drop-shadow(0 0 6px rgba(12,138,166,.7)) !important;}
    .thm-prism .rail-btn.rail-on .rail-bar{background:#FF3EDB !important;box-shadow:0 0 8px rgba(255,62,219,.72),0 0 14px rgba(255,62,219,.32) !important;}
    .thm-diesel .rail-btn.rail-on .rail-bar{background:#FF6A00 !important;box-shadow:0 0 8px rgba(255,106,0,.72),0 0 14px rgba(255,106,0,.32) !important;}
    .thm-harbor-mist .rail-btn.rail-on .rail-bar{background:#0C8AA6 !important;box-shadow:0 0 8px rgba(12,138,166,.5) !important;}
    .thm-cloudline .rail-btn.rail-on .rail-ico{color:#6ECBF5 !important;filter:drop-shadow(0 0 6px rgba(110,203,245,.7)) !important;}
    .thm-cloudline .rail-btn.rail-on .rail-bar{background:#6ECBF5 !important;box-shadow:0 0 8px rgba(110,203,245,.5) !important;}
    .thm-cerberus .rail-btn.rail-on .rail-ico{color:#F8B840 !important;filter:drop-shadow(0 0 6px rgba(248,184,64,.7)) !important;}
    .thm-cerberus .rail-btn.rail-on .rail-bar{background:#F8B840 !important;box-shadow:0 0 8px rgba(248,184,64,.5) !important;}
    /* light themes: flatten the beveled chrome (drop inset highlights, drop shadows) — parity with dark rendering */
    .thm-harbor-mist .rail-btn,.thm-cloudline .rail-btn,.thm-cerberus .rail-btn{background:var(--bg2) !important;border:1px solid var(--bd2) !important;box-shadow:none !important;}
    /* light themes: hover is an ICON HIGHLIGHT ONLY (icon color shifts; the cell stays flat — no fill block, no lift/shadow). !important beats the dark & glass elevate rules regardless of source order. */
    .thm-harbor-mist .rail-btn:not(.rail-on):hover,.thm-cloudline .rail-btn:not(.rail-on):hover,.thm-cerberus .rail-btn:not(.rail-on):hover{background:var(--bg2) !important;box-shadow:none !important;transform:none !important;}
    .thm-harbor-mist .rail-btn.rail-on,.thm-cloudline .rail-btn.rail-on,.thm-cerberus .rail-btn.rail-on{background:var(--accsoft) !important;box-shadow:none !important;transform:none !important;}
    /* flush profile cell is the ONE exception — the light-theme :not(.rail-on):hover rule above outranks
       the generic flush neutralizer and repaints it with an opaque --bg2 square. Re-exclude it here at
       higher specificity (adds :not(.rail-on)) so the profile glyph stays truly flush on hover. */
    .thm-harbor-mist .rail-btn.rail-btn-flush:not(.rail-on):hover,.thm-cloudline .rail-btn.rail-btn-flush:not(.rail-on):hover,.thm-cerberus .rail-btn.rail-btn-flush:not(.rail-on):hover{background:transparent !important;border:0 !important;box-shadow:none !important;transform:none !important;}
    /* hover (inactive) — lifts up, secondary/violet glow */
    /* kill focus ring on rail buttons (elevated chrome cells) */
    .rail-btn,.rail-btn:focus,.rail-btn:focus-visible,.rail-btn:focus-within{outline:none !important;}
    .rail-btn:not(.rail-on):hover{transform:translateY(-2px);background:linear-gradient(180deg, var(--chrome-light), var(--chrome-base));box-shadow:0 7px 14px rgba(0,0,0,.5), 0 3px 6px rgba(0,0,0,.4), inset 0 1px 0 color-mix(in srgb,#fff 18%,transparent), inset 0 -2px 3px rgba(0,0,0,.3);}
    .rail-btn:not(.rail-on):active{transform:translateY(0);box-shadow:inset 0 2px 5px rgba(0,0,0,.5), inset 0 -1px 0 color-mix(in srgb,#fff 6%,transparent);}
    .rail-btn.rail-btn-flush:hover .rail-ico{color:var(--tx3) !important;filter:none !important;}
    .rail-btn:not(.rail-on):hover .rail-ico{color:var(--sec) !important;filter:drop-shadow(0 0 6px color-mix(in srgb, var(--sec) 86%, transparent)) drop-shadow(0 0 12px color-mix(in srgb, var(--sec) 28%, transparent)) !important;}
    /* active — accent state PLUS a light elevation (raised cell, not pressed-in) */
    .rail-btn.rail-on{transform:translateY(-2px);background:linear-gradient(180deg, var(--chrome-light), var(--chrome-base));box-shadow:0 7px 14px rgba(0,0,0,.5), 0 3px 6px rgba(0,0,0,.4), inset 0 1px 0 color-mix(in srgb,#fff 18%,transparent);}
    /* ===== glass mode — frosted translucent cells with radial color glow ===== */
    .argus-root[data-glass="on"] .rail-btn{
      border:1px solid color-mix(in srgb, var(--tx) 16%, transparent);
      border-radius:10px;
      background:linear-gradient(180deg, color-mix(in srgb, var(--glass) 72%, #fff 8%), color-mix(in srgb, var(--glass) 90%, var(--bg) 10%));
      box-shadow:0 4px 12px color-mix(in srgb, var(--bg) 40%, transparent), inset 0 1px 0 color-mix(in srgb, #fff 18%, transparent), inset 0 -2px 3px color-mix(in srgb, #000 24%, transparent);
      backdrop-filter:blur(var(--glass-blur)) saturate(1.4);-webkit-backdrop-filter:blur(var(--glass-blur)) saturate(1.4);
    }
    .argus-root[data-glass="on"] .rail-btn:not(.rail-on):hover{
      transform:translateY(-2px);
      background:radial-gradient(circle at 50% 38%, color-mix(in srgb, var(--sec) 22%, transparent), transparent 66%), linear-gradient(180deg, color-mix(in srgb, var(--glass) 64%, #fff 12%), color-mix(in srgb, var(--glass) 86%, var(--bg) 14%));
      box-shadow:0 9px 20px color-mix(in srgb, var(--bg) 48%, transparent), inset 0 1px 0 color-mix(in srgb, #fff 26%, transparent);
    }
    .argus-root[data-glass="on"] .rail-btn.rail-on{
      transform:translateY(-2px);
      background:radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--acc) 26%, transparent), transparent 64%), linear-gradient(180deg, color-mix(in srgb, var(--glass) 64%, #fff 12%), color-mix(in srgb, var(--glass) 86%, var(--bg) 14%));
      box-shadow:0 9px 20px color-mix(in srgb, var(--bg) 48%, transparent), inset 0 1px 0 color-mix(in srgb, #fff 26%, transparent);
    }
    /* light themes: drop blur on buttons (production parity — keeps text legible) */
    .argus-root.thm-harbor-mist[data-glass="on"] .rail-btn{backdrop-filter:none;-webkit-backdrop-filter:none;}
    .argus-root.thm-cloudline[data-glass="on"] .rail-btn{backdrop-filter:none;-webkit-backdrop-filter:none;}
    .argus-root.thm-cerberus[data-glass="on"] .rail-btn{backdrop-filter:none;-webkit-backdrop-filter:none;}
    /* topbar tabs (HOME · COMMAND · STUDIO) — hover glow, matches topbar icons */
    .tb-tab{pointer-events:auto;height:34px;padding:0 14px;display:inline-flex;align-items:center;border:0;background:transparent;font-family:'Orbitron','Segoe UI',sans-serif;font-size:var(--topbar-tab-font-size);font-weight:600;letter-spacing:.04em;text-transform:uppercase;text-decoration:none;white-space:nowrap;cursor:pointer;color:var(--tx3);outline:none;}
    .tb-tab:focus,.tb-tab:focus-visible{outline:none !important;}
    .tb-tab:hover{color:var(--sec) !important;}
    /* topbar icon buttons (settings · glass · theme · wallpaper · profile slot) — secondary hover glow */
    .tb-icon{position:relative;width:var(--topbar-icon-button);height:var(--topbar-icon-button);display:grid;place-items:center;border:0;background:transparent;cursor:pointer;color:var(--tx3);outline:none;}
    .tb-icon:focus,.tb-icon:focus-visible,.tb-icon:focus-within{outline:none !important;}
    .tb-icon .msym{font-size:var(--topbar-main-font-size);transition:none;}
    .tb-icon:hover .msym{color:var(--sec) !important;filter:drop-shadow(0 0 6px color-mix(in srgb, var(--sec) 82%, transparent)) drop-shadow(0 0 12px color-mix(in srgb, var(--sec) 30%, transparent));}
    .tb-icon.tb-icon-on .msym{color:var(--acc) !important;filter:drop-shadow(0 0 6px color-mix(in srgb, var(--acc) 82%, transparent)) drop-shadow(0 0 12px color-mix(in srgb, var(--acc) 30%, transparent));}
    /* Right rail: profile cell is a topbar-slot exception (repo parity) — flush, no chrome */
    .rail-btn.rail-btn-flush{width:var(--topbar-icon-button);height:var(--topbar-icon-button);border:0 !important;background:transparent !important;box-shadow:none !important;border-radius:0 !important;backdrop-filter:none !important;-webkit-backdrop-filter:none !important;}
    .rail-btn.rail-btn-flush:hover,.rail-btn.rail-btn-flush.rail-on{transform:none !important;background:transparent !important;box-shadow:none !important;border:0 !important;}
    /* GLASS-MODE flush exception — the glass hover/active rules ([data-glass] .rail-btn:not(.rail-on):hover
       = spec 0,5,0) outrank the plain flush neutralizer (0,3,1) and repaint the profile cell with the glass
       container. Re-assert transparency at higher specificity so ONLY the glyph reacts, never the container. */
    .argus-root[data-glass="on"] .rail-btn.rail-btn-flush,
    .argus-root[data-glass="on"] .rail-btn.rail-btn-flush:not(.rail-on):hover,
    .argus-root[data-glass="on"] .rail-btn.rail-btn-flush.rail-on,
    .argus-root[data-glass="on"] .rail-btn.rail-btn-flush:hover{background:transparent !important;border:0 !important;box-shadow:none !important;transform:none !important;backdrop-filter:none !important;-webkit-backdrop-filter:none !important;}
    /* toggled-on (active) rail cell in glass: drop the 1px --tx border that reads as an ugly white box outline;
       the accent radial glow + inset highlight already signal the active state. */
    .argus-root[data-glass="on"] .rail-btn.rail-on{border-color:transparent !important;}
    .rail-btn.rail-btn-flush .rail-bar{display:none !important;}
    ::-webkit-scrollbar{width:8px;height:8px}
    ::-webkit-scrollbar-thumb{background:var(--bd);border-radius:6px;border:2px solid transparent;background-clip:content-box}
    ::-webkit-scrollbar-track{background:transparent}

    /* ---- icon glyphs follow their button's own hover color ----
       This runtime already compiles each button's `style-hover` into a real generated
       `:hover` class/rule when the value is a static string (confirmed by inspecting the
       live stylesheet) — so button-level hover was mostly already working. What wasn't:
       a `.msym` icon glyph with its OWN hardcoded inline `color` (e.g. a dropdown row's
       leading icon bound to an active/inactive color) doesn't inherit its parent's hover
       color the way plain text does, because an explicit inline color on the child always
       wins over the parent's. `color:inherit` on hover makes the icon pick up whatever
       color the button/row resolves to at that moment — matching its text counterpart —
       without hardcoding a specific hover color here. Excluded via `.msym-indicator`:
       persistent status glyphs (dropdown "active" checkmarks) that must keep their own
       color regardless of hover. */
    button:not(.tb-icon):hover .msym:not(.msym-indicator){ color:inherit !important; }
    /* ---- panel/overlay header action buttons (left-panel lock + close, right-panel close,
       settings close). These set their base color AND background as INLINE styles, and this
       runtime compiles `style-hover` into a generated `:hover` rule WITHOUT `!important`, so an
       inline base style always beats it and the hover reads as dead. Real classed :hover rules
       (same approach as .tb-icon / .rail-btn) with !important are the only thing that wins over
       the inline base. Glyphs inherit via the generic icon rule above. ---- */
    .pnl-act:hover{ background:var(--sel) !important; color:var(--tx) !important; }
    .pnl-act-acc:hover{ background:var(--sel) !important; color:var(--acc) !important; }
    /* Icon-button glyph centering — THE REAL ROOT CAUSE (supersedes the earlier translateX nudge):
       `display:grid; place-items:center` MIS-centers Material Symbols glyphs. Grid sizes the single
       item to the glyph's advance box, whose left/right side bearings are asymmetric, so the ink
       lands 1–2.5px right of the button center (varies per glyph: lock 1px, close 1.5px, add 2.5px
       — which is why a single fixed nudge could never fix them all). `display:flex; align-items:
       center; justify-content:center` centers by the actual rendered content instead → dx:0 for
       every glyph, no nudge. The left-panel icon buttons now use flex (in their inline/computed
       styles). NOTE: the same grid-centering mis-alignment exists on `.tb-icon`, `.rail-btn`, and
       every other `place-items:center` icon button app-wide — sweep grid→flex there too in the port. */
    /* ==== UNIVERSAL HOVER CLASSES (sh-*) ====================================================
       ROOT CAUSE this solves: this project's pinned runtime consumes the `style-hover` template
       attribute and compiles it into a generated `.scpN:hover` rule that has NO `!important`.
       Nearly every interactive element in this app sets its resting `background` (often
       `transparent`) and/or `color` as an INLINE style — and an inline style always beats a
       non-important stylesheet rule. Net effect: `style-hover` was DEAD on every dropdown-menu
       row, panel row, and icon button that set those properties inline (i.e. almost all of them).
       That is why "no dropdown menu has a hover effect" — it was never a per-menu miss, it was
       systemic. These authored classes carry real `!important`, so they win over the inline base.
       Every `style-hover="…"` in the template was replaced by the matching class below.
       Glyph icons follow their row's hover color via the `button:not(.tb-icon)…` rule above.
       PORT NOTE: none of this exists in the Vue/vanilla target — there, resting colors live in
       component CSS classes (not inline), so plain `:hover` cascades normally and no `!important`
       is needed. This block is a prototype-runtime bridge; port to normal `:hover` rules. ==== */
    .sh-sel:hover{ background:var(--sel) !important; }
    .sh-sel-tx:hover{ background:var(--sel) !important; color:var(--tx) !important; }
    .sh-sel-tx2:hover{ background:var(--sel) !important; color:var(--tx2) !important; }
    .sh-sel-acc:hover{ background:var(--sel) !important; color:var(--acc) !important; }
    .sh-acc:hover{ background:var(--acc) !important; color:var(--accink) !important; }
    .sh-acc18:hover{ background:color-mix(in srgb, var(--acc) 18%, transparent) !important; }
    .sh-acc82:hover{ background:color-mix(in srgb, var(--acc) 82%, black 18%) !important; color:var(--accink) !important; }
    .sh-bad82:hover{ background:color-mix(in srgb, var(--bad) 82%, black 18%) !important; color:#fff !important; }
    .sh-accbd:hover{ background:var(--accbd) !important; }
    .sh-accbd-acc2:hover{ background:var(--accbd) !important; color:var(--acc2) !important; }
    .sh-accsoft:hover{ background:var(--accsoft) !important; }
    .sh-example:hover{ background:var(--accsoft) !important; border-color:var(--accbd) !important; color:var(--acc) !important; }
    .sh-danger:hover{ background:var(--sel) !important; border-color:var(--bad) !important; color:var(--bad) !important; }
    .sh-tx:hover{ color:var(--tx) !important; }
    .sh-dark2:hover{ background:rgba(0,0,0,.2) !important; color:#fff !important; }
    .sh-dark35:hover{ background:rgba(0,0,0,.35) !important; color:#fff !important; }
    .sh-dark42:hover{ background:rgba(0,0,0,.42) !important; color:#fff !important; border-color:rgba(255,255,255,.3) !important; }
    .argus-root button:focus-visible,
    .argus-root input:focus-visible,
    .argus-root textarea:focus-visible{
      outline:2px solid var(--acc) !important;
      outline-offset:2px !important;
      box-shadow:0 0 0 4px var(--accsoft) !important;
    }
    /* Reduced-motion release gate: suppress every non-boot shell/workspace
       animation for both the saved preference and the OS preference. The
       forced boot Q is an intentional source-contract exception, so each
       selector starts at a direct root child and excludes its splash branch.
       `animation:none` is deliberate: pausing can strand an entrance at its
       first keyframe. Stateful base styles then render the final open/closed
       geometry immediately while disabled transitions keep Vue state changes
       deterministic across engines. */
    .app-shell-container.argus-root[data-reduced-motion="on"] > :not(.boot-loader-splash),
    .app-shell-container.argus-root[data-reduced-motion="on"] > :not(.boot-loader-splash)::before,
    .app-shell-container.argus-root[data-reduced-motion="on"] > :not(.boot-loader-splash)::after,
    .app-shell-container.argus-root[data-reduced-motion="on"] > :not(.boot-loader-splash) *,
    .app-shell-container.argus-root[data-reduced-motion="on"] > :not(.boot-loader-splash) *::before,
    .app-shell-container.argus-root[data-reduced-motion="on"] > :not(.boot-loader-splash) *::after{
      animation:none !important;
      transition:none !important;
      scroll-behavior:auto !important;
    }
    .app-shell-container.argus-root[data-reduced-motion="on"] [class*="-enter-from"]{
      opacity:1 !important;
      transform:none !important;
    }
    @media (prefers-reduced-motion: reduce){
      .app-shell-container.argus-root > :not(.boot-loader-splash),
      .app-shell-container.argus-root > :not(.boot-loader-splash)::before,
      .app-shell-container.argus-root > :not(.boot-loader-splash)::after,
      .app-shell-container.argus-root > :not(.boot-loader-splash) *,
      .app-shell-container.argus-root > :not(.boot-loader-splash) *::before,
      .app-shell-container.argus-root > :not(.boot-loader-splash) *::after{
        animation:none !important;
        transition:none !important;
        scroll-behavior:auto !important;
      }
      .app-shell-container.argus-root [class*="-enter-from"]{
        opacity:1 !important;
        transform:none !important;
      }
    }
    /* Toggle switches (settings) — the track bg is a live on/off value set inline, so a bg-swap
       hover would fight it. Use filter+ring instead (separate properties), so hover feedback works
       in BOTH states without touching the track color. PORT: normal :hover on the .switch class. */
    .sw-toggle{ transition:background .2s ease, filter .15s ease, box-shadow .15s ease !important; }
    .sw-toggle:hover{ filter:brightness(1.12) !important; box-shadow:0 0 0 3px var(--accsoft) !important; }