:root{--bg:#03030a;--card-bg:#0a0a18;--text:#e0e0f0;--dim:#4a4a72;--green:#39ff14;--cyan:#00e5ff;--magenta:#ff2d95;--yellow:#ffe600;--orange:#ff9100;--red:#ff3b30;--blue:#4d7fff;--border:rgba(var(--active-rgb),.08);--border-bright:rgba(var(--active-rgb),.18);--surface:rgba(var(--active-rgb),.025);--surface-2:rgba(var(--active-rgb),.05);--surface-3:rgba(var(--active-rgb),.10);--font-pixel:'Press Start 2P',monospace;--font-retro:'VT323',monospace;--font-ui:'Silkscreen',sans-serif;--tab-height:44px;--glow-green:0 0 6px rgba(var(--active-rgb),.5),0 0 20px rgba(var(--active-rgb),.2),0 0 40px rgba(var(--active-rgb),.05);--glow-cyan:0 0 6px rgba(0,229,255,.5),0 0 20px rgba(0,229,255,.2),0 0 40px rgba(0,229,255,.05);--glow-magenta:0 0 6px rgba(255,45,149,.5),0 0 20px rgba(255,45,149,.2),0 0 40px rgba(255,45,149,.05);--glow-yellow:0 0 6px rgba(255,230,0,.5),0 0 20px rgba(255,230,0,.2),0 0 40px rgba(255,230,0,.05);--glow-orange:0 0 6px rgba(255,145,0,.5),0 0 20px rgba(255,145,0,.2),0 0 40px rgba(255,145,0,.05);--glow-red:0 0 6px rgba(255,59,48,.5),0 0 20px rgba(255,59,48,.2),0 0 40px rgba(255,59,48,.05);--glow-blue:0 0 6px rgba(77,127,255,.5),0 0 20px rgba(77,127,255,.2),0 0 40px rgba(77,127,255,.05);--active-rgb:57,255,20;--win-bg:rgba(4,4,14,.92);--win-border:rgba(var(--active-rgb),.2);--chrome-bg:rgba(0,0,0,.55);--depth-1:0 2px 4px rgba(0,0,0,.4);--depth-2:0 4px 12px rgba(0,0,0,.5),0 0 40px rgba(0,0,0,.3);--depth-3:0 8px 24px rgba(0,0,0,.6),0 0 60px rgba(0,0,0,.4),0 0 100px rgba(var(--active-rgb),.04)}*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' shape-rendering='crispEdges'%3E%3Cdefs%3E%3Cfilter id='g'%3E%3CfeGaussianBlur in='SourceGraphic' stdDeviation='.8'/%3E%3C/filter%3E%3C/defs%3E%3Crect x='0' y='0' width='8' height='14' fill='%2339ff14' filter='url(%23g)' opacity='.5'/%3E%3Crect x='0' y='0' width='2' height='12' fill='%2339ff14'/%3E%3Crect x='2' y='2' width='2' height='8' fill='%2339ff14'/%3E%3Crect x='4' y='4' width='2' height='6' fill='%2339ff14'/%3E%3Crect x='6' y='6' width='2' height='2' fill='%2339ff14'/%3E%3Crect x='1' y='1' width='2' height='8' fill='%23fff'/%3E%3Crect x='3' y='3' width='2' height='4' fill='%23fff'/%3E%3C/svg%3E") 1 1, default !important}html{font-size:16px}body{font-family:var(--font-retro);background:var(--bg);color:var(--text);min-height:100vh;overflow:hidden;user-select:none;-webkit-user-select:none}input,textarea,.titlebar-search input,.footer-search input,.sp-search,.tab-rename-input,.login-prompt input,pre,code,.fw-body,.pane-content{user-select:text;-webkit-user-select:text}

/* ═══ BOOT SEQUENCE ═══ */
.boot-screen{position:fixed;inset:0;z-index:99999;background:radial-gradient(ellipse at center,rgba(var(--active-rgb),.02),#020208 70%);display:flex;align-items:center;justify-content:center;transition:opacity .5s ease,visibility .5s ease}.boot-screen.done{opacity:0;visibility:hidden;pointer-events:none}.boot-content{font-family:var(--font-retro);color:var(--green);font-size:1.2rem;line-height:1.7;max-width:640px;padding:40px;text-shadow:0 0 4px rgba(var(--active-rgb),.6),0 0 15px rgba(var(--active-rgb),.3)}.boot-logo{font-family:var(--font-pixel);font-size:.55rem;color:var(--green);margin-bottom:24px;line-height:1.4;text-shadow:0 0 6px rgba(var(--active-rgb),.6),0 0 25px rgba(var(--active-rgb),.3),0 0 50px rgba(var(--active-rgb),.1)}.boot-lines{min-height:180px}.boot-line{opacity:0;animation:bootLineIn .1s forwards}.boot-line .ok{color:var(--cyan)}.boot-line .fail{color:var(--red)}.boot-cursor{animation:cursorBlink .6s step-end infinite}@keyframes bootLineIn{to{opacity:1}}@keyframes cursorBlink{0%,100%{opacity:1}50%{opacity:0}}
.boot-skip{font-family:var(--font-pixel);font-size:.5rem;color:var(--dim);letter-spacing:.15em;margin-top:16px;animation:hintPulse 2s ease infinite}

/* ═══ BOOT PROGRESS BAR ═══ */
.boot-progress{width:100%;height:3px;background:rgba(var(--active-rgb),.06);margin-top:16px;overflow:hidden;border:1px solid rgba(var(--active-rgb),.08)}.boot-progress-fill{height:100%;width:0%;background:linear-gradient(90deg,var(--green),var(--cyan));box-shadow:0 0 6px var(--green),0 0 12px rgba(var(--active-rgb),.4),0 0 24px rgba(var(--active-rgb),.15);transition:width .08s linear}

/* ═══ STARFIELD CANVAS ═══ */
#starfield{position:fixed;inset:0;z-index:0;pointer-events:none}

/* ═══ CURSOR TRAIL CANVAS ═══ */
#cursor-trail{position:fixed;inset:0;z-index:9995;pointer-events:none}

/* ═══ FILM GRAIN OVERLAY ═══ */
.grain-overlay{position:fixed;inset:0;z-index:9994;pointer-events:none;opacity:.07;mix-blend-mode:overlay;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");animation:grainShift 0.5s steps(2) infinite}@keyframes grainShift{0%{transform:translate(0,0)}50%{transform:translate(-3%,-3%)}100%{transform:translate(3%,1%)}}

/* ═══ CRT EFFECTS ═══ */
.crt-overlay{position:fixed;inset:0;pointer-events:none;z-index:9998;background:repeating-linear-gradient(0deg,rgba(0,0,0,.08) 0px,rgba(0,0,0,.08) 1px,transparent 1px,transparent 3px);mix-blend-mode:multiply}.crt-scanline{position:fixed;top:0;left:0;width:100%;height:160px;pointer-events:none;z-index:9997;background:linear-gradient(180deg,rgba(255,255,255,0) 0%,rgba(var(--active-rgb),.02) 40%,rgba(255,255,255,.03) 50%,rgba(0,0,0,.03) 100%);animation:scanlineMove 7s linear infinite;opacity:.7}@keyframes scanlineMove{0%{transform:translateY(-160px)}100%{transform:translateY(100vh)}}.crt-vignette{position:fixed;inset:0;pointer-events:none;z-index:9996;background:radial-gradient(ellipse at center,transparent 55%,rgba(0,0,0,.45) 100%)}

/* ═══ CARD SWITCH FLASH ═══ */
.card-flash{position:fixed;top:0;left:0;right:0;height:2px;z-index:9999;pointer-events:none;opacity:0;background:linear-gradient(90deg,transparent,var(--green),var(--cyan),transparent);transition:none}.card-flash.flash{animation:cardFlashAnim .35s ease-out forwards}@keyframes cardFlashAnim{0%{opacity:1;transform:scaleX(0);transform-origin:left}30%{opacity:1;transform:scaleX(1)}100%{opacity:0;transform:scaleX(1)}}

/* ═══ SCREEN GLITCH ═══ */
.screen-glitch{animation:screenGlitch .12s steps(3) 1!important}@keyframes screenGlitch{0%{opacity:1}20%{opacity:.92;transform:translate(1px,0)}40%{opacity:.88;transform:translate(-1px,0) skewX(0.3deg)}60%{opacity:.94;transform:translate(0,1px)}80%{opacity:.9;transform:translate(1px,-1px) skewX(-0.2deg)}100%{opacity:1;transform:none}}

/* ═══ MODE SWITCH STATIC ═══ */
.mode-static{position:fixed;inset:0;z-index:99998;pointer-events:none;opacity:0;background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(255,255,255,.03) 2px,rgba(255,255,255,.03) 4px);mix-blend-mode:screen}.mode-static.burst{animation:staticBurst .3s ease-out forwards}@keyframes staticBurst{0%{opacity:.7}100%{opacity:0}}

/* ═══ LOGO GLITCH ═══ */
.logo-text{font-family:var(--font-pixel);color:#fff;letter-spacing:.15em;position:relative;text-shadow:0 0 10px rgba(255,255,255,.3)}.glitch-target{animation:glitchIdle 10s step-end infinite}@keyframes glitchIdle{0%,92%,100%{text-shadow:0 0 10px rgba(var(--active-rgb),.3);transform:none}93%{text-shadow:-2px 0 var(--cyan),2px 0 var(--magenta),0 0 10px rgba(var(--active-rgb),.5);transform:skewX(-2deg)}94%{text-shadow:2px 0 var(--magenta),-2px 0 var(--cyan);transform:skewX(1deg)}95%{text-shadow:-1px 0 var(--red),1px 0 var(--cyan);transform:skewX(-0.5deg)}96%{text-shadow:0 0 10px rgba(var(--active-rgb),.3);transform:none}}
.logo-cursor{font-family:var(--font-retro);color:var(--green);animation:cursorBlink .6s step-end infinite;text-shadow:0 0 8px rgba(var(--active-rgb),.5)}

/* ═══════════════════════════════════════
   THE WINDOW
   ═══════════════════════════════════════ */

.card-stack{position:fixed;left:50%;top:36px;transform:translateX(-50%);transform-origin:center top;width:65vw;max-height:calc(100vh - 72px);z-index:10;display:flex;flex-direction:column;background:var(--win-bg);backdrop-filter:blur(12px) saturate(1.2);border:1px solid var(--win-border);border-radius:6px;overflow:hidden;box-shadow:var(--depth-3),inset 0 1px 0 rgba(255,255,255,.04),inset 0 0 0 1px rgba(var(--active-rgb),.06);transition:border-color .5s ease,box-shadow .5s ease,left .4s ease,top .4s ease,width .4s ease,height .4s ease,max-height .4s ease;font-size:1.1em}

/* ═══ WINDOW TITLE BAR ═══ */
.window-titlebar{display:flex;align-items:center;padding:10px 16px;background:var(--chrome-bg);border-bottom:1px solid rgba(var(--active-rgb),.18);flex-shrink:0;gap:12px;user-select:none;box-shadow:0 1px 0 rgba(255,255,255,.03),inset 0 -1px 0 rgba(0,0,0,.3);z-index:15;position:relative}.window-titlebar::after{content:'';position:absolute;bottom:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(var(--active-rgb),.15),transparent)}
.titlebar-left{display:flex;align-items:center;gap:10px;flex:1;min-width:0}
.titlebar-dots{display:flex;gap:5px;flex-shrink:0}
.tb-dot{width:8px;height:8px;border-radius:50%;border:1px solid rgba(255,255,255,.06)}
.tb-dot-red{background:var(--red);box-shadow:0 0 4px rgba(255,59,48,.4)}
.tb-dot-yellow{background:var(--yellow);box-shadow:0 0 4px rgba(255,230,0,.4)}
.tb-dot-green{background:var(--green);box-shadow:0 0 4px rgba(var(--active-rgb),.4)}
.titlebar-title{font-size:.8rem;letter-spacing:.2em}
.titlebar-center{flex-shrink:0}
.titlebar-right{display:flex;align-items:center;gap:10px;flex:1;justify-content:flex-end}
.titlebar-search{display:flex;align-items:center;gap:6px;flex:1;max-width:220px;min-width:0;padding:3px 8px;border:1px solid rgba(var(--active-rgb),.15);background:rgba(0,0,0,.4);transition:border-color .2s,box-shadow .2s}
.titlebar-search:focus-within{border-color:rgba(var(--active-rgb),.3);box-shadow:0 0 10px rgba(var(--active-rgb),.08)}
.titlebar-search .search-prefix{font-family:var(--font-retro);color:var(--green);font-size:.95rem;opacity:.6}
.titlebar-search input{flex:1;background:transparent;border:none;outline:none;font-family:var(--font-retro);font-size:.95rem;color:var(--green);letter-spacing:.03em;min-width:0;text-shadow:0 0 4px rgba(var(--active-rgb),.2);caret-color:var(--green)}
.titlebar-search input::placeholder{color:var(--green);opacity:.25}

/* ═══ SYSTEM READOUT (footer clock) ═══ */
.sys-readout{display:flex;flex-direction:column;gap:1px;padding:2px 6px;border:1px solid rgba(var(--active-rgb),.14);background:rgba(0,0,0,.4)}
.sys-readout-row{display:flex;align-items:center;gap:4px}
.sys-led{width:4px;height:4px;border-radius:50%;background:var(--green);box-shadow:0 0 4px var(--green),0 0 8px rgba(var(--active-rgb),.3);animation:ledPulse 2s ease infinite;flex-shrink:0}
@keyframes ledPulse{0%,100%{opacity:1}50%{opacity:.6}}
.sys-label{font-family:var(--font-pixel);font-size:.3rem;color:rgba(255,255,255,.25);letter-spacing:.12em;flex-shrink:0}
.sys-time{font-family:var(--font-retro);font-size:1.05rem;color:var(--green);letter-spacing:.06em;text-shadow:0 0 4px rgba(var(--active-rgb),.3);line-height:1}
.sys-time .clock-colon{animation:colonBlink 1s step-end infinite;opacity:1}
@keyframes colonBlink{0%,100%{opacity:1}50%{opacity:.15}}
.sys-sub{gap:3px}
.sys-val{font-family:var(--font-retro);font-size:.85rem;color:rgba(var(--active-rgb),.7);letter-spacing:.03em;text-shadow:0 0 3px rgba(var(--active-rgb),.2)}
.sys-uptime{color:rgba(var(--active-rgb),.7);text-shadow:0 0 3px rgba(var(--active-rgb),.2)}
.sys-sep{color:rgba(255,255,255,.12);font-family:var(--font-retro);font-size:.75rem}
.clock-ampm{font-family:var(--font-pixel);font-size:.35rem;color:rgba(255,255,255,.2);letter-spacing:.06em;margin-left:3px;vertical-align:super}

/* ═══ TITLEBAR ACHIEVEMENTS ═══ */
.titlebar-achievements{display:flex;align-items:center;gap:4px;cursor:pointer;padding:2px 6px;border:1px solid rgba(255,230,0,.12);background:rgba(0,0,0,.35);transition:all .2s}
.titlebar-achievements:hover{border-color:rgba(255,230,0,.2);background:rgba(255,230,0,.03)}
.achievement-trophy{font-family:var(--font-pixel);font-size:.5rem;color:var(--yellow);text-shadow:0 0 4px rgba(255,230,0,.3)}
.achievement-count{font-family:var(--font-pixel);font-size:.4rem;color:var(--yellow);letter-spacing:.06em;opacity:.7}

/* ═══ MODE TOGGLE ═══ */
.mode-toggle{display:flex;align-items:center;gap:6px;flex-shrink:0;padding:2px 8px;border:1px solid rgba(var(--active-rgb),.12);background:rgba(0,0,0,.35)}
.mode-status{font-family:var(--font-pixel);font-size:.5rem;letter-spacing:.12em;transition:color .4s,text-shadow .4s}
.mode-status.safe{color:var(--green);text-shadow:0 0 6px rgba(var(--active-rgb),.4)}
.mode-status.power{color:var(--red);text-shadow:0 0 6px rgba(255,59,48,.4);animation:powerPulse 2s ease-in-out infinite}
@keyframes powerPulse{0%,100%{text-shadow:0 0 6px rgba(255,59,48,.4)}50%{text-shadow:0 0 10px rgba(255,59,48,.6)}}
.toggle-switch{position:relative;display:inline-block;cursor:pointer;-webkit-tap-highlight-color:transparent}
.toggle-switch input{position:absolute;opacity:0;width:0;height:0}
.toggle-track{display:block;width:34px;height:18px;background:rgba(0,0,0,.5);border:1px solid var(--border-bright);position:relative;transition:border-color .3s,box-shadow .3s;border-radius:1px}
.toggle-thumb{position:absolute;top:2px;left:2px;width:12px;height:12px;background:var(--red);box-shadow:0 0 4px var(--red);transition:transform .25s cubic-bezier(.4,0,.2,1),background .3s,box-shadow .3s}
.toggle-switch input:checked~.toggle-track{border-color:rgba(var(--active-rgb),.2)}
.toggle-switch input:checked~.toggle-track .toggle-thumb{transform:translateX(16px);background:var(--green);box-shadow:0 0 4px var(--green)}
.toggle-switch input:not(:checked)~.toggle-track{border-color:rgba(255,59,48,.2)}

/* ═══ BROWSER TAB BAR ═══ */
.browser-tab-bar{display:flex;align-items:flex-end;justify-content:flex-start;gap:2px;background:rgba(0,0,0,.4);padding:6px 12px 0;border-bottom:1px solid rgba(var(--active-rgb),.12);flex-shrink:0;overflow-x:auto;scrollbar-width:none}
.browser-tab-bar::-webkit-scrollbar{display:none}
.browser-tab{display:flex;align-items:center;gap:8px;padding:10px 20px;cursor:pointer;border:1px solid transparent;border-bottom:none;border-radius:4px 4px 0 0;font-family:var(--font-pixel);font-size:.65rem;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);transition:all .2s ease;position:relative;white-space:nowrap;flex-shrink:1;min-width:0;user-select:none;background:transparent}
.browser-tab:hover{background:rgba(255,255,255,.03);color:var(--text);border-color:rgba(var(--active-rgb),.06)}
.browser-tab.tab-active{background:rgba(4,4,14,.95);border-color:rgba(var(--active-rgb),.15);border-top:2px solid rgba(var(--c-rgb),.5);margin-bottom:-1px;padding-bottom:10px;box-shadow:0 -2px 8px rgba(var(--c-rgb),.08)}
.browser-tab .tab-icon{width:15px;height:15px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.browser-tab .tab-icon svg{width:15px;height:15px}
.browser-tab .tab-count{font-size:.5rem;padding:2px 5px;border:1px solid var(--border);opacity:.5}
.browser-tab .tab-status{width:5px;height:5px;border-radius:50%;flex-shrink:0;background:var(--dim);transition:background .3s,box-shadow .3s}
.browser-tab .tab-status.all-up{background:var(--green);box-shadow:0 0 4px var(--green)}
.browser-tab .tab-status.some-down{background:var(--orange);box-shadow:0 0 4px var(--orange);animation:statusBlink 1.5s ease infinite}
@keyframes statusBlink{50%{opacity:.4}}

/* ═══ PER-TAB COLOR CUSTOM PROPERTIES ═══ */
[data-card-color="green"]{--c:var(--green);--c-rgb:57,255,20;--c-glow:var(--glow-green)}
[data-card-color="cyan"]{--c:var(--cyan);--c-rgb:0,229,255;--c-glow:var(--glow-cyan)}
[data-card-color="magenta"]{--c:var(--magenta);--c-rgb:255,45,149;--c-glow:var(--glow-magenta)}
[data-card-color="yellow"]{--c:var(--yellow);--c-rgb:255,230,0;--c-glow:var(--glow-yellow)}
[data-card-color="orange"]{--c:var(--orange);--c-rgb:255,145,0;--c-glow:var(--glow-orange)}
[data-card-color="red"]{--c:var(--red);--c-rgb:255,59,48;--c-glow:var(--glow-red)}
[data-card-color="blue"]{--c:var(--blue);--c-rgb:77,127,255;--c-glow:var(--glow-blue)}

/* ═══ ACTIVE TAB STYLING ═══ */
.browser-tab.tab-active{color:var(--c);text-shadow:0 0 4px rgba(var(--c-rgb),.4),0 0 12px rgba(var(--c-rgb),.15);background:rgba(var(--c-rgb),.05)}
.browser-tab.tab-active .tab-icon{color:var(--c);filter:drop-shadow(0 0 5px currentColor) drop-shadow(0 0 10px currentColor)}
.browser-tab.tab-active::after{content:'';position:absolute;bottom:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--c),transparent);box-shadow:0 0 10px var(--c),0 0 20px rgba(var(--c-rgb),.3)}

/* ═══ PANE SYSTEM ═══ */
.pane-container{display:flex;flex-direction:column;flex:1 1 0%;min-height:0;overflow:hidden;position:relative}
.pane-split{display:flex;min-width:0;min-height:0}
.pane-split-v{flex-direction:column}
.pane-split-h{flex-direction:row}
.pane-split-child{display:flex;min-width:0;min-height:0;overflow:hidden}
.pane{display:flex;flex-direction:column;position:relative;border:1px solid transparent;transition:border-color .2s;min-width:0;min-height:0;overflow:hidden}
.pane-content{display:flex;flex-direction:column;flex:0 1 auto;min-height:0;overflow:auto;scrollbar-width:thin;scrollbar-color:rgba(var(--active-rgb),.3) transparent}
.pane-content .card-body{display:block!important}
.pane-content .main-card,.pane-content .sub-card{display:flex!important;flex-direction:column;min-height:0;flex:0 1 auto}
.pane-content .main-card .card-body,.pane-content .sub-card .card-body{overflow:visible;min-height:0;flex:0 1 auto}
.pane .browser-tab-bar{flex-shrink:0}

/* Pane dividers */
.pane-divider{flex-shrink:0;background:rgba(var(--active-rgb),.08);transition:background .2s;position:relative;z-index:2}
.pane-divider:hover{background:rgba(var(--active-rgb),.2)}
.pane-divider-v{height:4px;cursor:row-resize;margin:0}
.pane-divider-h{width:4px;cursor:col-resize;margin:0}
.pane-divider::after{content:'';position:absolute;z-index:3}
.pane-divider-v::after{left:50%;top:-4px;bottom:-4px;width:12px;transform:translateX(-50%)}
.pane-divider-h::after{top:50%;left:-4px;right:-4px;height:12px;transform:translateY(-50%)}
/* Divider drop zone — wider hit area during tab drag + visual feedback */
.pane-divider-v::before{content:'';position:absolute;left:0;right:0;top:-12px;bottom:-12px;z-index:2}
.pane-divider-h::before{content:'';position:absolute;top:0;bottom:0;left:-12px;right:-12px;z-index:2}
.pane-divider.divider-drop-active{background:rgba(var(--active-rgb),.5)!important;box-shadow:0 0 12px rgba(var(--active-rgb),.4)}
.pane-divider-v.divider-drop-active{height:8px;margin:-2px 0}
.pane-divider-h.divider-drop-active{width:8px;margin:0 -2px}

/* Arc-style drop preview (single highlight follows cursor) */
.pane-drop-preview{display:none;position:absolute;z-index:20;pointer-events:none;background:rgba(var(--active-rgb),.08);border:2px solid rgba(var(--active-rgb),.3);transition:all .15s ease}
.pane-drop-preview-top{inset:0 0 50% 0;border-bottom-style:dashed}
.pane-drop-preview-bottom{inset:50% 0 0 0;border-top-style:dashed}
.pane-drop-preview-left{inset:0 50% 0 0;border-right-style:dashed}
.pane-drop-preview-right{inset:0 0 0 50%;border-left-style:dashed}
.pane-drop-preview-center{inset:4px;border-style:dashed;background:rgba(var(--active-rgb),.04)}

/* Outer drop zones — split at root level */
.outer-drop-preview{display:none;position:absolute;z-index:25;pointer-events:none;background:rgba(var(--active-rgb),.12);border:2px solid rgba(var(--active-rgb),.5);transition:all .15s ease}
.outer-drop-preview-top{inset:0 0 75% 0;border-bottom-style:dashed}
.outer-drop-preview-bottom{inset:75% 0 0 0;border-top-style:dashed}
.outer-drop-preview-left{inset:0 75% 0 0;border-right-style:dashed}
.outer-drop-preview-right{inset:0 0 0 75%;border-left-style:dashed}

/* ═══ CARD PANELS ═══ */
.main-card{display:none;position:relative;flex-direction:column}
.main-card.card-active{display:flex;flex-direction:column}
.main-card.hidden{display:none!important}

/* ═══ TAB FADE-IN ANIMATION ═══ */

/* ═══ CARD CHROMA SHIFT ═══ */
.main-card.card-active{animation:cardChroma 5s ease-in-out infinite}
@keyframes cardChroma{0%,100%{filter:brightness(1)}30%{filter:brightness(1.03)}60%{filter:brightness(1.05)}}

/* ═══ PER-COLOR NEON TEXT ═══ */
.main-card .tile-name,.sub-card .tile-name{color:#fff;text-shadow:0 0 8px rgba(255,255,255,.2)}
.main-card .tile-desc,.sub-card .tile-desc{color:var(--dim)}
.main-card .tile-icon,.sub-card .tile-icon{color:var(--c)}

/* ═══ ACTIVE CARD TOP ACCENT GLOW ═══ */
.main-card.card-active .card-body::before{content:'';position:absolute;top:0;left:0;right:0;height:50px;background:linear-gradient(180deg,rgba(var(--c-rgb),.05),transparent);pointer-events:none;z-index:4}

/* ═══ ACTIVE CARD SCANLINE OVERLAY ═══ */
.main-card.card-active .card-body::after{content:'';position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,transparent 0px,transparent 2px,rgba(0,0,0,.03) 2px,rgba(0,0,0,.03) 4px);z-index:5;opacity:.4}

/* ═══ CARD TAB (hidden, content in browser tabs) ═══ */
.card-tab{display:none}

/* ═══ CARD BODY ═══ */
.card-body{padding:4px 0;position:relative;background:rgba(0,0,0,.18)}

/* ═══ SUB CARDS ═══ */
.sub-card{display:none;flex-direction:column}
.sub-card.card-active{display:flex}
.sub-card .card-body{padding:4px 0;position:relative;background:transparent}

/* ═══ SMOOTH RESIZING SITE-WIDE ═══ */
.card-stack{transition:border-color .5s ease,box-shadow .5s ease,left .4s cubic-bezier(.4,0,.2,1),top .4s cubic-bezier(.4,0,.2,1),width .4s cubic-bezier(.4,0,.2,1),height .4s cubic-bezier(.4,0,.2,1),max-height .4s cubic-bezier(.4,0,.2,1)}
.floating-window{transition:left .4s cubic-bezier(.4,0,.2,1),top .4s cubic-bezier(.4,0,.2,1),width .4s cubic-bezier(.4,0,.2,1),height .4s cubic-bezier(.4,0,.2,1),border-color .3s ease,box-shadow .3s ease,max-height .4s ease}
.main-card,.sub-card,.card-body,.card-services,.dashboard-grid,.status-board,.browser-tab-bar,.window-titlebar,.window-footer{transition:height .35s cubic-bezier(.4,0,.2,1),max-height .35s cubic-bezier(.4,0,.2,1),flex .35s cubic-bezier(.4,0,.2,1)}
.pane-split-child{transition:flex .3s ease}

/* ═══ TAB CROSSFADE ═══ */
.card-stack.tab-switching .card-body{opacity:1;transition:none}
.main-card.tab-enter{animation:tabFadeSlide .3s cubic-bezier(.4,0,.2,1) both}
.sub-card.tab-enter{animation:tabFadeIn .3s cubic-bezier(.4,0,.2,1) both}
@keyframes tabFadeSlide{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
@keyframes tabFadeIn{from{opacity:0}to{opacity:1}}
.sub-tab-bar{border-top:1px solid rgba(var(--active-rgb),.12);border-bottom:1px solid rgba(var(--active-rgb),.12);background:rgba(0,0,0,.3)}

/* ═══ STATUS BOARD ═══ */
.status-board{display:flex;flex-wrap:wrap;gap:6px;padding:8px 12px;background:rgba(0,0,0,.15);border-top:1px solid rgba(var(--active-rgb),.08)}
.sb-group{flex:1 1 auto;min-width:80px;overflow:hidden}
.sb-group-title{font-family:var(--font-pixel);font-size:clamp(.35rem,.45vw,.45rem);letter-spacing:.12em;text-transform:uppercase;padding:4px 8px 5px;margin-bottom:2px;color:rgba(var(--active-rgb),.7);text-shadow:0 0 4px rgba(var(--active-rgb),.3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sb-item{display:flex;align-items:center;gap:6px;padding:4px 8px;text-decoration:none;color:var(--text);background:rgba(255,255,255,.008);border:none;border-bottom:none;transition:background .2s;position:relative;padding-left:20px}
.sb-item:hover{background:rgba(var(--c-rgb),.05)}
.sb-item{--sb-line:var(--green)}
.sb-item::before{content:'';position:absolute;left:8px;top:0;bottom:0;width:1px;background:var(--sb-line);box-shadow:0 0 3px var(--sb-line);transition:background .4s,box-shadow .4s}
.sb-item::after{content:'';position:absolute;left:8px;top:50%;width:7px;height:1px;background:var(--sb-line);box-shadow:0 0 3px var(--sb-line);transition:background .4s,box-shadow .4s}
.sb-item:last-child::before{bottom:50%}
.sb-group{position:relative;padding-left:0}
.sb-dot{width:5px;height:5px;border-radius:50%;background:var(--dim);flex-shrink:0;transition:background .3s,box-shadow .3s}
.sb-dot.up{background:var(--green);box-shadow:0 0 4px var(--green)}
.sb-dot.down{background:var(--red);box-shadow:0 0 4px var(--red);animation:statusBlink 1s step-end infinite}
.sb-name{font-family:var(--font-ui);font-size:clamp(.6rem,.8vw,.8rem);color:var(--text);letter-spacing:.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sb-url{font-family:var(--font-retro);font-size:.65rem;color:var(--dim);margin-left:auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:80px}

/* ═══ CARD BODY SCROLL INDICATOR ═══ */
.card-body.has-scroll::after{display:none}

/* ═══ SERVICE TILES (2-column grid) ═══ */
.card-services{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:4px;padding:8px 12px;transition:grid-template-columns .3s ease}

.service-tile{display:flex;align-items:center;gap:14px;padding:14px 34px 14px 14px;text-decoration:none;color:var(--text);border:1px solid rgba(var(--c-rgb),.08);border-left:3px solid rgba(var(--c-rgb),.15);background:linear-gradient(135deg,rgba(var(--c-rgb),.02),transparent 60%);transition:all .25s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden;outline:none}
.service-tile:hover,.service-tile.focused{background:linear-gradient(135deg,rgba(var(--c-rgb),.08),rgba(var(--c-rgb),.02) 60%);border-color:rgba(var(--c-rgb),.25);border-left-color:var(--c);transform:translateX(2px);box-shadow:0 2px 12px rgba(var(--c-rgb),.08),inset 0 0 20px rgba(var(--c-rgb),.03)}
.service-tile .tile-arrow{position:absolute;left:3px;top:50%;transform:translateY(-50%);font-family:var(--font-retro);font-size:1rem;opacity:0;transition:opacity .15s ease,left .15s ease;color:var(--c)}
.service-tile:hover .tile-arrow,.service-tile.focused .tile-arrow{opacity:.6;left:4px}

/* ═══ STAGGERED TILE REVEAL ═══ */
.service-tile.tile-reveal{animation:tileReveal .3s ease both}
@keyframes tileReveal{0%{opacity:0;transform:translateY(6px)}100%{opacity:1;transform:translateY(0)}}

/* ═══ FOCUSED TILE CRT PULSE ═══ */
.service-tile.focused{animation:tilePulse 1.5s ease-in-out infinite}
@keyframes tilePulse{0%,100%{background:var(--surface)}50%{background:rgba(var(--c-rgb),.04)}}

/* ═══ NEON HOVER SWEEP ON TILES ═══ */
.service-tile::before{content:'';position:absolute;left:0;bottom:0;width:0;height:2px;background:linear-gradient(90deg,var(--c),rgba(var(--c-rgb),.3));box-shadow:0 0 8px var(--c),0 0 16px rgba(var(--c-rgb),.2);transition:width .35s cubic-bezier(.4,0,.2,1)}
.service-tile:hover::before,.service-tile.focused::before{width:100%}

/* ═══ KEYBOARD FOCUSED TILE ═══ */
.service-tile.focused{border-color:rgba(var(--c-rgb),.15);border-left-color:var(--c);box-shadow:inset 0 0 20px rgba(var(--c-rgb),.04)}

/* ═══ SERVICE STATUS DOT ═══ */
.service-status{position:absolute;top:6px;right:6px;width:5px;height:5px;border-radius:50%;background:var(--dim);transition:background .3s,box-shadow .3s}
.service-status.status-up{background:var(--green);box-shadow:0 0 4px var(--green)}
.service-status.status-down{background:var(--red);box-shadow:0 0 4px var(--red);animation:statusBlink 1s step-end infinite}

/* ═══ FAVORITE PIN ═══ */
.tile-pin{position:absolute;top:50%;right:8px;transform:translateY(-50%);font-family:var(--font-retro);font-size:1.2rem;color:var(--dim);opacity:.3;transition:opacity .2s,color .2s,text-shadow .2s;cursor:pointer;z-index:2;line-height:1}
.service-tile:hover .tile-pin,.service-tile.focused .tile-pin{opacity:.5}
.tile-pin:hover{opacity:1!important;color:var(--c)}
.tile-pin.pinned{opacity:1!important;color:var(--c);text-shadow:0 0 6px rgba(var(--c-rgb),.4)}
.service-tile.tile-pinned{}
.service-tile.tile-pinned:hover,.service-tile.tile-pinned.focused{}

/* ═══ PIN CONTEXT MENU ═══ */
/* ═══ CONTEXT MENU ═══ */
.ctx-menu{position:fixed;z-index:9999;display:none;flex-direction:column;min-width:170px;padding:4px 0;background:rgba(8,8,20,.96);backdrop-filter:blur(16px) saturate(1.3);border:1px solid rgba(var(--active-rgb),.18);box-shadow:0 8px 24px rgba(0,0,0,.7),0 0 40px rgba(0,0,0,.3),0 0 12px rgba(var(--active-rgb),.05);font-family:var(--font-ui);font-size:.75rem;color:var(--text)}
.ctx-menu.active{display:flex}
.ctx-item{display:flex;align-items:center;gap:8px;padding:6px 14px;cursor:pointer;transition:background .12s;white-space:nowrap;position:relative}
.ctx-item:hover{background:rgba(var(--active-rgb),.08);color:var(--green)}
.ctx-danger:hover{background:rgba(255,59,48,.1);color:var(--red)}
.ctx-icon{width:14px;text-align:center;font-size:.8rem;flex-shrink:0}
.ctx-divider{height:1px;margin:4px 8px;background:rgba(255,255,255,.06)}
.ctx-has-sub{position:relative}
.ctx-arrow{margin-left:auto;opacity:.4;font-size:.6rem}
.ctx-submenu{display:none;position:absolute;left:100%;top:-4px;min-width:140px;padding:4px 0;background:rgba(10,10,20,.95);backdrop-filter:blur(12px);border:1px solid rgba(var(--active-rgb),.12);box-shadow:0 4px 16px rgba(0,0,0,.6)}
.ctx-has-sub:hover .ctx-submenu{display:flex;flex-direction:column}
.ctx-swatch{display:inline-block;width:10px;height:10px;border:1px solid rgba(255,255,255,.15)}
[data-card-color="green"] .ctx-swatch,.ctx-swatch[data-card-color="green"]{background:var(--green)}
[data-card-color="cyan"] .ctx-swatch,.ctx-swatch[data-card-color="cyan"]{background:var(--cyan)}
[data-card-color="magenta"] .ctx-swatch,.ctx-swatch[data-card-color="magenta"]{background:var(--magenta)}
[data-card-color="yellow"] .ctx-swatch,.ctx-swatch[data-card-color="yellow"]{background:var(--yellow)}
[data-card-color="orange"] .ctx-swatch,.ctx-swatch[data-card-color="orange"]{background:var(--orange)}
[data-card-color="red"] .ctx-swatch,.ctx-swatch[data-card-color="red"]{background:var(--red)}
[data-card-color="blue"] .ctx-swatch,.ctx-swatch[data-card-color="blue"]{background:var(--blue)}

/* ═══ TAB RENAME INPUT ═══ */
.tab-rename-input{font-family:var(--font-ui);font-size:.65rem;background:rgba(0,0,0,.6);border:1px solid rgba(var(--active-rgb),.3);color:var(--green);padding:2px 6px;outline:none;max-width:100px}
.tab-rename-input:focus{border-color:rgba(var(--active-rgb),.6);box-shadow:0 0 6px rgba(var(--active-rgb),.2)}

/* ═══ SERVICE PICKER ═══ */
.service-picker-overlay{position:fixed;inset:0;z-index:10000;background:rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center;backdrop-filter:blur(4px)}
.service-picker-panel{background:rgba(10,10,20,.95);border:1px solid rgba(var(--active-rgb),.15);box-shadow:0 4px 30px rgba(0,0,0,.7),0 0 20px rgba(var(--active-rgb),.05);width:380px;max-height:70vh;display:flex;flex-direction:column}
.sp-header{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid rgba(var(--active-rgb),.1);font-family:var(--font-pixel);font-size:.6rem;color:var(--green);letter-spacing:.1em}
.sp-close{background:none;border:none;color:var(--dim);font-family:var(--font-pixel);font-size:.55rem;cursor:pointer}
.sp-close:hover{color:var(--red)}
.sp-search{background:rgba(0,0,0,.4);border:none;border-bottom:1px solid rgba(var(--active-rgb),.08);padding:8px 14px;color:var(--text);font-family:var(--font-retro);font-size:.95rem;outline:none}
.sp-search:focus{border-color:rgba(var(--active-rgb),.2)}
.sp-list{overflow-y:auto;max-height:50vh;padding:4px 0}
.sp-item{display:flex;align-items:center;gap:10px;padding:8px 14px;cursor:pointer;transition:background .12s}
.sp-item:hover{background:rgba(var(--active-rgb),.06)}
.sp-icon{width:18px;height:18px;color:var(--dim);flex-shrink:0}
.sp-icon svg{width:100%;height:100%}
.sp-name{font-family:var(--font-ui);font-size:.75rem;color:var(--text);flex-shrink:0}
.sp-desc{font-family:var(--font-retro);font-size:.8rem;color:var(--dim);margin-left:auto;text-align:right;max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ═══ DRAG DROP INDICATORS ═══ */
.bar-drop-target{outline:1px dashed rgba(var(--active-rgb),.4)!important;outline-offset:-1px;background:rgba(var(--active-rgb),.03)!important}
.grid-drop-target{outline:1px dashed rgba(var(--active-rgb),.3);outline-offset:-2px;background:rgba(var(--active-rgb),.02)}
.dash-stat.dragging,.service-tile.dragging{opacity:.3!important}
.dash-stat.drag-over{outline:1px solid rgba(var(--active-rgb),.3);background:rgba(var(--active-rgb),.04)!important}
.sb-item.dragging{opacity:.4}
.sb-item[draggable]{cursor:grab}
.sb-item.sb-hidden{opacity:.25;text-decoration:line-through}

/* ═══ FLOATING WINDOWS ═══ */
.floating-window{position:fixed;z-index:20;display:flex;flex-direction:column;background:var(--win-bg);backdrop-filter:blur(12px) saturate(1.2);border:1px solid rgba(var(--fw-rgb,57,255,20),.22);box-shadow:0 8px 24px rgba(0,0,0,.6),0 0 40px rgba(0,0,0,.3),0 0 60px rgba(var(--fw-rgb,57,255,20),.04),inset 0 0 0 1px rgba(var(--fw-rgb,57,255,20),.05);overflow:hidden;min-width:300px;min-height:200px;font-size:1em;border-radius:6px}
.fw-titlebar{display:flex;align-items:center;justify-content:space-between;padding:8px 14px;background:var(--chrome-bg);border-bottom:1px solid rgba(var(--fw-rgb,57,255,20),.15);cursor:move;user-select:none;flex-shrink:0;position:relative}.fw-titlebar::after{content:'';position:absolute;bottom:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(var(--fw-rgb,57,255,20),.12),transparent)}
.fw-title{font-family:var(--font-pixel);font-size:.55rem;color:rgba(var(--fw-rgb,57,255,20),1);letter-spacing:.15em;text-shadow:0 0 6px rgba(var(--fw-rgb),.3)}
.fw-btns{display:flex;gap:6px}
.fw-btns button{background:none;border:none;font-family:var(--font-pixel);font-size:.5rem;color:var(--dim);cursor:pointer;padding:2px 4px}
.fw-btns button:hover{color:var(--text)}
.fw-close:hover{color:var(--red)!important}
.fw-body{flex:1;overflow:auto}
.fw-body .card-body{display:block!important;position:relative}
.fw-resize{position:absolute;bottom:0;right:0;width:14px;height:14px;cursor:nwse-resize;background:linear-gradient(135deg,transparent 50%,rgba(var(--fw-rgb),.2) 50%)}
.fw-hidden{display:none!important}
/* Pane-managed floating windows */
.pane-window{display:flex;flex-direction:column}
.pane-window .pane-container{display:flex;flex-direction:column;flex:1 1 0%;min-height:0;overflow:hidden;position:relative}
.pane-window .pane-tab-bar{background:rgba(0,0,0,.3);border-bottom:1px solid rgba(var(--fw-rgb,57,255,20),.1)}
.pane-window .pane-content{flex:1 1 0%;min-height:0;overflow:auto}
.pane-window .pane-drop-preview{z-index:20}
.pane-window .outer-drop-preview{z-index:25}
.pin-ctx-icon{color:var(--c);font-size:.8rem;text-shadow:0 0 4px rgba(var(--c-rgb),.4)}

/* ═══ TILE ICON ═══ */
.tile-icon{width:38px;height:38px;display:flex;align-items:center;justify-content:center;flex-shrink:0;border:1px solid rgba(var(--c-rgb),.2);background:rgba(var(--c-rgb),.04);transition:all .25s cubic-bezier(.4,0,.2,1);position:relative}
.tile-icon::after{content:'';position:absolute;inset:-1px;border:1px solid rgba(var(--c-rgb),.06);opacity:0;transition:opacity .25s}
.tile-icon svg{width:18px;height:18px;filter:drop-shadow(0 0 2px rgba(var(--c-rgb),.2))}
.service-tile:hover .tile-icon,.service-tile.focused .tile-icon{transform:scale(1.1);border-color:rgba(var(--c-rgb),.4);background:rgba(var(--c-rgb),.08);box-shadow:0 0 12px rgba(var(--c-rgb),.15)}
.service-tile:hover .tile-icon::after{opacity:1}
.service-tile:hover .tile-icon svg{filter:drop-shadow(0 0 4px rgba(var(--c-rgb),.4))}

/* ═══ TILE INFO ═══ */
.tile-info{flex:1;min-width:0}
.tile-name{display:block;font-family:var(--font-ui);font-size:clamp(.75rem,.95vw,1rem);letter-spacing:.03em;transition:text-shadow .25s}
.service-tile:hover .tile-name{text-shadow:0 0 6px rgba(255,255,255,.15)}
.tile-desc{display:block;font-family:var(--font-retro);font-size:clamp(.8rem,1.05vw,1.05rem);color:var(--dim);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .25s}
.service-tile:hover .tile-desc{color:rgba(var(--c-rgb),.5)}

/* ═══ DASHBOARD ═══ */
.dashboard-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;padding:10px}.dash-stat{background:linear-gradient(180deg,rgba(var(--active-rgb),.03),transparent);border:1px solid rgba(var(--active-rgb),.1);padding:10px 12px;transition:all .25s;position:relative;overflow:hidden}.dash-stat::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(var(--active-rgb),.15),transparent)}.dash-stat:hover{background:linear-gradient(180deg,rgba(var(--active-rgb),.06),rgba(var(--active-rgb),.02));border-color:rgba(var(--active-rgb),.18)}.dash-label{display:block;font-family:var(--font-pixel);font-size:.45rem;letter-spacing:.18em;color:rgba(var(--active-rgb),.6);margin-bottom:5px;text-transform:uppercase}.dash-value{display:block;font-family:var(--font-retro);font-size:1.6rem;line-height:1;margin-bottom:4px;color:#fff;transition:color .4s,text-shadow .4s;text-shadow:0 0 3px rgba(255,255,255,.15)}
.dash-widgets-row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:4px;padding:0 10px 10px}
.dash-widgets-row>*{background:linear-gradient(180deg,rgba(var(--active-rgb),.03),transparent);border:1px solid rgba(var(--active-rgb),.1);position:relative;overflow:hidden}
.dash-widgets-row>*::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(var(--active-rgb),.12),transparent)}
.dash-widgets-row>.docker-widget{max-height:200px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(var(--active-rgb),.2) transparent}
.dash-widgets-row>.uptime-widget{overflow:hidden}
.dash-widgets-row>.weather-widget{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:8px}
.dash-stat[data-color="green"] .dash-value{color:#fff;text-shadow:none}
.dash-stat[data-color="cyan"] .dash-value{color:#fff;text-shadow:none}
.dash-stat[data-color="magenta"] .dash-value{color:#fff;text-shadow:none}
.dash-stat[data-color="yellow"] .dash-value{color:var(--yellow);text-shadow:0 0 10px rgba(255,230,0,.3)}
.dash-stat[data-color="orange"] .dash-value{color:var(--orange);text-shadow:0 0 10px rgba(255,145,0,.3)}
.dash-stat[data-color="red"] .dash-value{color:var(--red);text-shadow:0 0 10px rgba(255,59,48,.3)}
.dash-stat[data-color="blue"] .dash-value{color:#fff;text-shadow:none}
.dash-bar{height:4px;background:rgba(255,255,255,.06);border-radius:2px;overflow:hidden}.dash-bar-fill{height:100%;width:0%;transition:width .6s cubic-bezier(.4,0,.2,1),background .4s,box-shadow .4s;border-radius:2px;position:relative}
.dash-stat[data-color="green"] .dash-bar-fill{background:var(--green);box-shadow:0 0 6px var(--green)}
.dash-stat[data-color="cyan"] .dash-bar-fill{background:var(--cyan);box-shadow:0 0 6px var(--cyan)}
.dash-stat[data-color="magenta"] .dash-bar-fill{background:var(--magenta);box-shadow:0 0 6px var(--magenta)}
.dash-stat[data-color="yellow"] .dash-bar-fill{background:var(--yellow);box-shadow:0 0 6px var(--yellow)}
.dash-stat[data-color="orange"] .dash-bar-fill{background:var(--orange);box-shadow:0 0 6px var(--orange)}
.dash-stat[data-color="red"] .dash-bar-fill{background:var(--red);box-shadow:0 0 6px var(--red)}
.dash-stat[data-color="blue"] .dash-bar-fill{background:var(--blue);box-shadow:0 0 6px var(--blue)}
.dash-gpu-name{font-family:var(--font-pixel);font-size:.38rem;color:var(--dim);text-align:center;padding:3px 6px 4px;letter-spacing:.08em}

/* ═══ DISKS STAT CARD — side by side layout ═══ */
.dash-disks-stat{display:flex;flex-direction:column;gap:1px}
.dash-disks-stat .disk-rows{display:flex;gap:8px}
.disk-row{flex:1;display:flex;flex-direction:column;gap:1px}
.disk-row .dash-value{font-size:1rem;margin-bottom:1px}
.disk-name{font-family:var(--font-pixel);font-size:.35rem;letter-spacing:.1em;color:var(--dim);margin-top:2px;text-transform:uppercase}

/* ═══ SERVICES STAT CARD ═══ */
.dash-services-stat{display:flex;flex-direction:column;gap:1px}
.svc-header{display:flex;align-items:center;justify-content:space-between}
.svc-count{font-family:var(--font-retro);font-size:1.1rem;color:var(--text);letter-spacing:.04em;line-height:1;transition:color .4s,text-shadow .4s}
.svc-status-line{display:flex;align-items:center;gap:6px;margin:2px 0}
.svc-led{width:6px;height:6px;border-radius:50%;background:var(--dim);flex-shrink:0;transition:background .4s,box-shadow .4s}
.svc-led.led-ok{background:var(--green);box-shadow:0 0 6px var(--green),0 0 12px rgba(var(--active-rgb),.3)}
.svc-led.led-warn{background:var(--orange);box-shadow:0 0 6px var(--orange);animation:statusBlink 1.5s ease infinite}
.svc-led.led-crit{background:var(--red);box-shadow:0 0 6px var(--red);animation:statusBlink 1s ease infinite}
.svc-message{font-family:var(--font-pixel);font-size:.35rem;letter-spacing:.08em;transition:color .4s,text-shadow .4s}
.svc-message.msg-ok{color:var(--green);text-shadow:0 0 8px rgba(var(--active-rgb),.4)}
.svc-message.msg-warn{color:var(--orange);text-shadow:0 0 8px rgba(255,145,0,.4)}
.svc-message.msg-crit{color:var(--red);text-shadow:0 0 8px rgba(255,59,48,.4)}
.svc-down-list{display:flex;flex-wrap:wrap;gap:2px;margin-top:2px}
.svc-down-tag{font-family:var(--font-ui);font-size:.6rem;padding:1px 4px;color:var(--red);background:rgba(255,59,48,.06);border:1px solid rgba(255,59,48,.15);letter-spacing:.02em}

/* ═══ SPARKLINES ═══ */
.dash-spark{display:flex;align-items:flex-end;gap:1px;height:14px;margin-top:3px;opacity:.6}
.dash-spark .spark-bar{width:2px;background:currentColor;min-height:1px;transition:height .3s ease;border-radius:1px 1px 0 0}
.dash-stat[data-color="green"] .spark-bar{color:var(--green)}
.dash-stat[data-color="cyan"] .spark-bar{color:var(--cyan)}
.dash-stat[data-color="magenta"] .spark-bar{color:var(--magenta)}
.dash-stat[data-color="yellow"] .spark-bar{color:var(--yellow)}
.dash-stat[data-color="orange"] .spark-bar{color:var(--orange)}
.dash-stat[data-color="red"] .spark-bar{color:var(--red)}

/* ═══ DASHBOARD EMPTY STATE ═══ */
.dash-offline{font-family:var(--font-retro);font-size:1.05rem;color:var(--dim);text-align:center}
.dash-offline .blink-cursor{animation:cursorBlink .6s step-end infinite}

/* ═══ WINDOW FOOTER ═══ */
.window-footer{display:flex;align-items:center;justify-content:space-between;padding:8px 16px;background:var(--chrome-bg);border-top:1px solid rgba(var(--active-rgb),.15);flex-shrink:0;box-shadow:0 -1px 0 rgba(255,255,255,.02);z-index:15;position:relative}.window-footer::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(var(--active-rgb),.1),transparent)}
.footer-right{display:flex;align-items:center;gap:14px}
.footer-keys{display:flex;gap:12px;font-family:var(--font-pixel);font-size:.45rem;color:var(--dim);letter-spacing:.08em;flex-shrink:0}
.footer-keys span{display:flex;align-items:center;gap:3px}
.footer-keys kbd{font-family:var(--font-pixel);font-size:.45rem;padding:2px 5px;border:1px solid rgba(var(--active-rgb),.2);background:rgba(var(--active-rgb),.04);color:var(--green);line-height:1.2;text-shadow:0 0 4px rgba(var(--active-rgb),.3)}
.footer-search{display:flex;align-items:center;gap:8px;flex:1;min-width:0;padding:4px 10px;border:1px solid var(--border);background:rgba(0,0,0,.2);transition:border-color .2s,box-shadow .2s}
.footer-search:focus-within{border-color:var(--border-bright);box-shadow:0 0 8px rgba(var(--active-rgb),.06)}
.footer-search .search-prefix{font-family:var(--font-retro);color:var(--green);font-size:1.15rem}
.footer-search input{flex:1;background:transparent;border:none;outline:none;font-family:var(--font-retro);font-size:1.15rem;color:var(--green);letter-spacing:.03em;min-width:0;text-shadow:0 0 4px rgba(var(--active-rgb),.2);caret-color:var(--green)}
.footer-search input::placeholder{color:var(--green);opacity:.35}

/* ═══ NAV DOTS ═══ */
.nav-dots{display:flex;gap:6px;flex-shrink:0}.nav-dot{width:5px;height:5px;background:rgba(var(--active-rgb),.04);border:1px solid rgba(var(--active-rgb),.12);cursor:pointer;transition:all .3s ease;transform:rotate(45deg)}.nav-dot.active{background:var(--green);box-shadow:0 0 6px var(--green);border-color:var(--green)}.nav-dot:hover:not(.active){background:rgba(var(--active-rgb),.1);border-color:rgba(var(--active-rgb),.2)}

/* ═══ SEARCH DROPDOWN ═══ */
.search-dropdown{position:fixed;z-index:9999;width:min(400px,calc(100vw - 32px));background:rgba(8,8,20,.96);backdrop-filter:blur(16px) saturate(1.3);border:1px solid rgba(var(--active-rgb),.18);box-shadow:var(--depth-2),0 0 30px rgba(var(--active-rgb),.04);display:none;max-height:320px;overflow-y:auto;padding:4px 0;border-radius:4px}
.search-dropdown.active{display:block}
.search-result-item{display:flex;align-items:center;gap:10px;padding:8px 14px;text-decoration:none;color:var(--text);cursor:pointer;transition:background .12s}.search-result-item:hover,.search-result-item.sr-focused{background:rgba(var(--active-rgb),.06)}.search-result-item.dragging{opacity:.3}.search-result-item .sr-icon{width:18px;height:18px;flex-shrink:0;color:var(--dim)}.search-result-item .sr-icon svg{width:100%;height:100%}.search-result-item .sr-name{font-family:var(--font-ui);font-size:.75rem;color:var(--text);flex-shrink:0}.search-result-item .sr-desc{font-family:var(--font-retro);font-size:.8rem;color:var(--dim);margin-left:auto;text-align:right;max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.search-no-results{padding:14px;text-align:center;color:var(--dim);font-family:var(--font-retro);font-size:.9rem}

/* ═══ FAVORITES BAR (removed — pinned tiles sort to top) ═══ */

/* ═══ ACHIEVEMENT PANEL ═══ */
.achievements-panel{position:fixed;top:60px;right:22px;z-index:200;width:260px;max-height:400px;overflow:hidden;background:rgba(6,6,12,.9);backdrop-filter:blur(12px);border:1px solid rgba(255,230,0,.15);padding:12px;display:none;box-shadow:0 0 20px rgba(255,230,0,.06)}
.achievements-panel.open{display:block}
.achievements-panel h3{font-family:var(--font-pixel);font-size:.5rem;color:var(--yellow);letter-spacing:.15em;margin-bottom:10px;text-shadow:0 0 6px rgba(255,230,0,.4)}
.ach-item{display:flex;align-items:center;gap:8px;padding:6px 4px;border-bottom:1px solid var(--border);font-family:var(--font-retro);font-size:.9rem;color:var(--dim)}
.ach-item.earned{color:var(--text)}
.ach-item .ach-icon{font-size:1rem;width:20px;text-align:center;filter:grayscale(1) opacity(.3)}
.ach-item.earned .ach-icon{filter:none}

/* ═══ ACHIEVEMENT TOAST ═══ */
.achievement-toast{position:fixed;top:60px;left:50%;transform:translateX(-50%) translateY(-20px);z-index:99999;background:rgba(6,6,12,.9);border:1px solid rgba(255,230,0,.3);padding:10px 18px;display:flex;align-items:center;gap:8px;font-family:var(--font-pixel);font-size:.5rem;color:var(--yellow);letter-spacing:.08em;text-shadow:0 0 6px rgba(255,230,0,.4);box-shadow:0 0 20px rgba(255,230,0,.1);opacity:0;pointer-events:none;transition:opacity .3s,transform .3s}
.achievement-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ═══ PARTY MODE (KONAMI) ═══ */
.party-mode{animation:partyBg 1s linear infinite!important}@keyframes partyBg{0%{filter:hue-rotate(0deg)}100%{filter:hue-rotate(360deg)}}

@keyframes hintPulse{0%,100%{opacity:.4}50%{opacity:1}}

/* ═══ STATUS LED ═══ */
.status-led{width:6px;height:6px;background:var(--green);border-radius:50%;box-shadow:0 0 6px var(--green),0 0 12px rgba(var(--active-rgb),.4);animation:ledPulse 2s ease infinite}@keyframes ledPulse{0%,100%{opacity:1;box-shadow:0 0 6px var(--green),0 0 12px rgba(var(--active-rgb),.4)}50%{opacity:.5;box-shadow:0 0 3px var(--green),0 0 6px rgba(var(--active-rgb),.2)}}

/* ═══ LOGIN SCREEN ═══ */
.login-screen{position:fixed;inset:0;z-index:100000;background:radial-gradient(ellipse at center,rgba(var(--active-rgb),.03),var(--bg) 70%);display:flex;align-items:center;justify-content:center;transition:opacity .5s,visibility .5s}
.login-screen.hidden{opacity:0;visibility:hidden;pointer-events:none}
.login-box{width:min(440px,90vw);padding:36px;border:1px solid rgba(var(--active-rgb),.2);background:rgba(8,8,20,.95);backdrop-filter:blur(12px);box-shadow:var(--depth-3),inset 0 0 0 1px rgba(var(--active-rgb),.05),0 0 80px rgba(var(--active-rgb),.06)}
.login-logo{font-family:var(--font-pixel);font-size:.55rem;color:var(--green);margin-bottom:28px;line-height:1.4;text-shadow:0 0 8px rgba(var(--active-rgb),.6),0 0 30px rgba(var(--active-rgb),.3),0 0 60px rgba(var(--active-rgb),.1);text-align:center}
.login-form{display:flex;flex-direction:column;gap:12px}
.login-prompt{display:flex;align-items:center;gap:10px;border:1px solid rgba(var(--active-rgb),.1);padding:10px 14px;background:rgba(0,0,0,.4);transition:all .25s}
.login-prompt:focus-within{border-color:rgba(var(--active-rgb),.3);box-shadow:0 0 15px rgba(var(--active-rgb),.1),inset 0 0 20px rgba(var(--active-rgb),.02)}
.login-label{font-family:var(--font-retro);color:var(--green);font-size:1.2rem;flex-shrink:0;text-shadow:0 0 4px rgba(var(--active-rgb),.5),0 0 12px rgba(var(--active-rgb),.2)}
.login-prompt input{flex:1;background:transparent;border:none;outline:none;font-family:var(--font-retro);font-size:1.2rem;color:var(--green);caret-color:var(--green);text-shadow:0 0 4px rgba(var(--active-rgb),.3)}
.login-actions{display:flex;align-items:center;gap:12px;margin-top:4px}
.login-action-btn{font-family:var(--font-pixel);font-size:.6rem;letter-spacing:.12em;color:var(--green);background:rgba(var(--active-rgb),.06);border:1px solid rgba(var(--active-rgb),.25);padding:10px 20px;cursor:pointer;transition:all .25s;text-shadow:0 0 4px rgba(var(--active-rgb),.4)}
.login-action-btn:hover{background:rgba(var(--active-rgb),.12);border-color:rgba(var(--active-rgb),.5);box-shadow:0 0 20px rgba(var(--active-rgb),.15),0 0 40px rgba(var(--active-rgb),.05);text-shadow:0 0 6px rgba(var(--active-rgb),.6)}
.login-link-btn{font-family:var(--font-pixel);font-size:.45rem;letter-spacing:.08em;color:var(--dim);background:none;border:none;cursor:pointer;transition:color .2s;padding:4px}
.login-link-btn:hover{color:var(--cyan)}
.login-error{font-family:var(--font-pixel);font-size:.45rem;color:var(--red);letter-spacing:.06em;min-height:1.2em;text-shadow:0 0 6px rgba(255,59,48,.3)}
.login-pending{text-align:center;display:flex;flex-direction:column;align-items:center;gap:12px}
.pending-icon{font-size:2rem;color:var(--yellow);animation:pendingSpin 2s linear infinite}
@keyframes pendingSpin{to{transform:rotate(360deg)}}
.pending-text{font-family:var(--font-pixel);font-size:.6rem;color:var(--yellow);letter-spacing:.12em;text-shadow:0 0 8px rgba(255,230,0,.3)}
.pending-sub{font-family:var(--font-retro);font-size:1rem;color:var(--dim);max-width:300px}

/* ═══ USER WIDGET ═══ */
.user-widget{display:flex;align-items:center;gap:8px;flex-shrink:0;padding:4px 10px;border:1px solid rgba(var(--active-rgb),.1);background:rgba(0,0,0,.3);border-radius:2px}
.user-name{font-family:var(--font-ui);font-size:.7rem;letter-spacing:.04em;color:var(--text);opacity:.8}
.logout-btn{font-family:var(--font-pixel);font-size:.35rem;letter-spacing:.06em;color:var(--red);background:rgba(255,59,48,.04);border:1px solid rgba(255,59,48,.15);padding:3px 8px;cursor:pointer;transition:all .2s;opacity:.7}
.logout-btn:hover{opacity:1;background:rgba(255,59,48,.1);border-color:rgba(255,59,48,.3);text-shadow:0 0 6px rgba(255,59,48,.4)}
.logout-btn:hover{color:var(--red);text-shadow:0 0 6px rgba(255,59,48,.4)}

/* ═══ ADMIN PANEL OVERLAY ═══ */
.admin-overlay{position:fixed;inset:0;z-index:99990;background:rgba(6,6,12,.85);backdrop-filter:blur(4px);display:none;align-items:center;justify-content:center}
.admin-overlay.open{display:flex}
.admin-panel{width:min(600px,90vw);max-height:80vh;display:flex;flex-direction:column;border:1px solid rgba(255,145,0,.2);background:rgba(12,12,22,.95);backdrop-filter:blur(12px);box-shadow:0 0 30px rgba(255,145,0,.08)}
.admin-header{display:flex;align-items:center;justify-content:space-between;padding:10px 16px;border-bottom:1px solid rgba(255,145,0,.12);background:rgba(255,145,0,.02)}
.admin-title{font-family:var(--font-pixel);font-size:.6rem;color:var(--orange);letter-spacing:.15em;text-shadow:0 0 8px rgba(255,145,0,.4)}
.admin-close-btn{font-family:var(--font-pixel);font-size:.55rem;color:var(--dim);background:none;border:none;cursor:pointer;transition:color .2s}
.admin-close-btn:hover{color:var(--red)}
.admin-body{padding:12px 16px;overflow-y:auto;flex:1}
.admin-loading{font-family:var(--font-retro);color:var(--dim);text-align:center;padding:20px}
.admin-user-row{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--border)}
.admin-user-row:last-child{border-bottom:none}
.admin-user-name{font-family:var(--font-ui);font-size:.85rem;color:#fff;flex:1;min-width:0}
.admin-user-role{font-family:var(--font-pixel);font-size:.4rem;letter-spacing:.08em;color:var(--cyan);padding:2px 6px;border:1px solid rgba(0,229,255,.15)}
.admin-user-date{font-family:var(--font-retro);font-size:.85rem;color:var(--dim)}
.admin-badge{font-family:var(--font-pixel);font-size:.4rem;letter-spacing:.06em;padding:2px 6px;border:1px solid}
.admin-badge.approved{color:var(--green);border-color:rgba(var(--active-rgb),.2)}
.admin-badge.pending{color:var(--yellow);border-color:rgba(255,230,0,.2);animation:statusBlink 1.5s ease infinite}
.admin-action-btn{font-family:var(--font-pixel);font-size:.4rem;letter-spacing:.06em;padding:4px 8px;cursor:pointer;border:1px solid;background:none;transition:all .2s}
.admin-action-btn.approve{color:var(--green);border-color:rgba(var(--active-rgb),.2)}
.admin-action-btn.approve:hover{background:rgba(var(--active-rgb),.06);border-color:rgba(var(--active-rgb),.4)}
.admin-action-btn.delete{color:var(--red);border-color:rgba(255,59,48,.2)}
.admin-action-btn.delete:hover{background:rgba(255,59,48,.06);border-color:rgba(255,59,48,.4)}

/* ═══ SETTINGS BUTTON ═══ */
.settings-btn{display:flex;align-items:center;justify-content:center;width:24px;height:24px;background:rgba(0,0,0,.4);border:1px solid rgba(var(--active-rgb),.14);color:var(--dim);cursor:pointer;transition:all .2s;flex-shrink:0;padding:0}
.settings-btn svg{width:12px;height:12px}
.settings-btn:hover{color:var(--green);border-color:rgba(var(--active-rgb),.2);background:rgba(var(--active-rgb),.04)}

/* ═══ SETTINGS OVERLAY ═══ */
.settings-overlay{position:fixed;inset:0;z-index:99990;background:rgba(6,6,12,.85);backdrop-filter:blur(4px);display:none;align-items:center;justify-content:center}
.settings-overlay.open{display:flex}
.settings-panel{width:min(500px,90vw);max-height:80vh;display:flex;flex-direction:column;border:1px solid rgba(var(--active-rgb),.2);background:rgba(8,8,20,.96);backdrop-filter:blur(16px) saturate(1.3);box-shadow:var(--depth-3),0 0 60px rgba(var(--active-rgb),.04);border-radius:6px;overflow:hidden}
.settings-header{display:flex;align-items:center;justify-content:space-between;padding:10px 16px;border-bottom:1px solid rgba(var(--active-rgb),.1);background:rgba(var(--active-rgb),.02)}
.settings-title{font-family:var(--font-pixel);font-size:.6rem;color:var(--green);letter-spacing:.15em;text-shadow:0 0 8px rgba(var(--active-rgb),.4)}
.settings-close-btn{font-family:var(--font-pixel);font-size:.55rem;color:var(--dim);background:none;border:none;cursor:pointer;transition:color .2s}
.settings-close-btn:hover{color:var(--red)}
.settings-tab-bar{display:flex;gap:0;border-bottom:1px solid rgba(var(--active-rgb),.08);background:rgba(0,0,0,.2)}
.settings-tab{font-family:var(--font-pixel);font-size:.45rem;letter-spacing:.1em;color:var(--dim);padding:8px 16px;cursor:pointer;border-bottom:2px solid transparent;transition:all .2s}
.settings-tab:hover{color:var(--text)}
.settings-tab.active{color:var(--green);border-bottom-color:var(--green);text-shadow:0 0 6px rgba(var(--active-rgb),.3)}
.settings-body{padding:16px;overflow-y:auto;flex:1}
.settings-section{display:flex;flex-direction:column;gap:16px}
.settings-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px 12px;border:1px solid rgba(var(--active-rgb),.06);background:rgba(0,0,0,.15)}
.settings-row-info{display:flex;flex-direction:column;gap:2px;min-width:0}
.settings-label{font-family:var(--font-pixel);font-size:.45rem;letter-spacing:.1em;color:var(--green);text-shadow:0 0 4px rgba(var(--active-rgb),.2)}
.settings-desc{font-family:var(--font-retro);font-size:.8rem;color:var(--dim)}
.settings-select{font-family:var(--font-retro);font-size:.9rem;color:var(--green);background:rgba(0,0,0,.4);border:1px solid rgba(var(--active-rgb),.15);padding:4px 8px;min-width:140px;cursor:pointer;outline:none;transition:border-color .2s;appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6' fill='%2339ff14' opacity='.5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 6px center;padding-right:22px}
.settings-select:hover,.settings-select:focus{border-color:rgba(var(--active-rgb),.3)}
.settings-select option{background:#0c0c16;color:#39ff14}
.settings-select option:checked{background:#1a1a2e}

/* ═══ FAVS TAB BAR ═══ */
.favs-tab-bar{background:rgba(255,255,255,.015);border-bottom:1px solid rgba(255,255,255,.06);padding:3px 10px 0;min-height:0}
.favs-tab-bar .browser-tab{font-size:.55rem;padding:6px 12px;gap:6px}

/* ═══ FAVS: SIDEBAR STRIP ═══ */
.favs-sidebar{position:absolute;left:0;top:0;bottom:0;width:36px;z-index:20;display:flex;flex-direction:column;align-items:center;gap:4px;padding:6px 3px;background:rgba(0,0,0,.3);border-right:1px solid rgba(var(--active-rgb),.08);overflow-y:auto;scrollbar-width:none}
.favs-sidebar::-webkit-scrollbar{display:none}
.favs-sidebar-item{width:28px;height:28px;display:flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.04);background:rgba(255,255,255,.01);cursor:pointer;transition:all .2s;position:relative;flex-shrink:0}
.favs-sidebar-item:hover{background:rgba(var(--c-rgb),.06);border-color:rgba(var(--c-rgb),.2)}
.favs-sidebar-item svg{width:13px;height:13px}
.favs-sidebar-item .favs-tooltip{position:absolute;left:100%;top:50%;transform:translateY(-50%);margin-left:8px;padding:3px 8px;background:rgba(12,12,22,.95);border:1px solid rgba(var(--active-rgb),.15);font-family:var(--font-ui);font-size:.7rem;color:var(--text);white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .15s;z-index:30}
.favs-sidebar-item:hover .favs-tooltip{opacity:1}
.card-stack.has-sidebar .card-body,.card-stack.has-sidebar .browser-tab-bar:not(.sub-tab-bar),.card-stack.has-sidebar .favs-tab-bar,.card-stack.has-sidebar .status-board{margin-left:36px}

/* ═══ FAVS: FLOATING DOCK ═══ */
.favs-dock{position:fixed;left:50%;bottom:14px;transform:translateX(-50%);z-index:15;display:flex;align-items:center;gap:8px;padding:8px 16px;background:rgba(6,6,14,.88);backdrop-filter:blur(8px);border:1px solid rgba(var(--active-rgb),.15);box-shadow:0 4px 20px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.03)}
.favs-dock-item{width:36px;height:36px;display:flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.06);background:rgba(255,255,255,.02);cursor:pointer;transition:all .2s;position:relative}
.favs-dock-item:hover{transform:scale(1.2) translateY(-4px);background:rgba(var(--c-rgb),.06);border-color:rgba(var(--c-rgb),.2);box-shadow:0 4px 12px rgba(var(--c-rgb),.15)}
.favs-dock-item svg{width:17px;height:17px}
.favs-dock-item .favs-tooltip{position:absolute;bottom:100%;left:50%;transform:translateX(-50%);margin-bottom:8px;padding:3px 8px;background:rgba(12,12,22,.95);border:1px solid rgba(var(--active-rgb),.15);font-family:var(--font-ui);font-size:.7rem;color:var(--text);white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .15s}
.favs-dock-item:hover .favs-tooltip{opacity:1}

/* ═══ FAVS: QUICK ACCESS OVERLAY ═══ */
.favs-access-overlay{position:fixed;inset:0;z-index:200;background:rgba(6,6,12,.8);backdrop-filter:blur(4px);display:none;align-items:center;justify-content:center}
.favs-access-overlay.open{display:flex}
.favs-access-panel{width:min(500px,85vw);border:1px solid rgba(var(--active-rgb),.15);background:rgba(12,12,22,.95);backdrop-filter:blur(12px)}
.favs-access-header{display:flex;align-items:center;justify-content:space-between;padding:8px 14px;border-bottom:1px solid rgba(var(--active-rgb),.08);background:rgba(var(--active-rgb),.02)}
.favs-access-title{font-family:var(--font-pixel);font-size:.5rem;letter-spacing:.12em;color:var(--green);text-shadow:0 0 6px rgba(var(--active-rgb),.3)}
.favs-access-hint{font-family:var(--font-pixel);font-size:.35rem;color:var(--dim);letter-spacing:.06em}
.favs-access-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:3px;padding:8px}
.favs-access-tile{display:flex;align-items:center;gap:8px;padding:8px 10px;text-decoration:none;color:var(--text);border:1px solid rgba(255,255,255,.03);background:rgba(255,255,255,.01);cursor:pointer;transition:all .2s}
.favs-access-tile:hover{background:rgba(var(--c-rgb),.04);border-color:rgba(var(--c-rgb),.12)}
.favs-access-tile .tile-icon{width:26px;height:26px;display:flex;align-items:center;justify-content:center;flex-shrink:0;border:1px solid rgba(var(--c-rgb),.1);background:rgba(0,0,0,.2)}
.favs-access-tile .tile-icon svg{width:13px;height:13px}
.favs-access-tile .tile-name{font-family:var(--font-ui);font-size:.75rem}
.favs-access-trigger{display:flex;align-items:center;justify-content:center;width:24px;height:24px;background:rgba(0,0,0,.3);border:1px solid rgba(var(--active-rgb),.1);color:var(--yellow);cursor:pointer;transition:all .2s;flex-shrink:0;padding:0;font-family:var(--font-retro);font-size:.9rem}
.favs-access-trigger:hover{border-color:rgba(255,230,0,.2);background:rgba(255,230,0,.04);text-shadow:0 0 6px rgba(255,230,0,.4)}

/* ═══ FAVS: TITLEBAR LINKS ═══ */
.favs-titlebar-links{display:flex;align-items:center;gap:4px;flex-shrink:0}
.favs-tl-item{width:20px;height:20px;display:flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.04);background:rgba(0,0,0,.2);cursor:pointer;transition:all .2s;position:relative}
.favs-tl-item:hover{border-color:rgba(var(--c-rgb),.2);background:rgba(var(--c-rgb),.06)}
.favs-tl-item svg{width:10px;height:10px}
.favs-tl-item .favs-tooltip{position:absolute;top:100%;left:50%;transform:translateX(-50%);margin-top:6px;padding:3px 8px;background:rgba(12,12,22,.95);border:1px solid rgba(var(--active-rgb),.15);font-family:var(--font-ui);font-size:.65rem;color:var(--text);white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .15s;z-index:30}
.favs-tl-item:hover .favs-tooltip{opacity:1}

/* ═══ DRAG & DROP ═══ */
.browser-tab.dragging,.service-tile.dragging{opacity:.4;outline:1px dashed var(--green)}
.browser-tab.drag-over{border-color:var(--green)!important;box-shadow:inset 0 0 8px rgba(var(--active-rgb),.1)}
.service-tile.drag-over{border-color:var(--green)!important;background:rgba(var(--active-rgb),.04)}
.browser-tab[draggable="true"],.service-tile[draggable="true"]{cursor:grab}
.browser-tab[draggable="true"]:active,.service-tile[draggable="true"]:active{cursor:grabbing}

/* ═══ TAB OVERFLOW PREVENTION ═══ */
.browser-tab{flex-shrink:1;min-width:0;overflow:hidden;text-overflow:ellipsis;transition:all .2s ease,transform .15s ease}
.browser-tab.dragging{transform:scale(.95);z-index:100}

/* ═══ RESPONSIVE — LARGE DESKTOP ═══ */
@media(min-width:1600px){
    .card-stack{width:74vw}
    .card-services{grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:6px;padding:12px 16px}
    .service-tile{padding:16px 36px 16px 16px;gap:16px}
    .tile-icon{width:44px;height:44px}
    .tile-icon svg{width:22px;height:22px}
    .tile-name{font-size:clamp(.85rem,1vw,1.1rem)}
    .tile-desc{font-size:clamp(.95rem,1.1vw,1.15rem)}
    .sb-group-title{font-size:.5rem}
    .sb-name{font-size:.9rem}
    .sb-url{font-size:.75rem;max-width:140px}
    .dashboard-grid{grid-template-columns:repeat(4,1fr);gap:5px;padding:12px}
    .dash-stat{padding:12px 14px}
    .dash-label{font-size:.5rem}
    .dash-value{font-size:1.8rem}
    .dash-spark{height:16px}
    .dash-bar{height:5px}
    .dash-widgets-row{grid-template-columns:1fr 1fr 1fr;gap:5px}
    .browser-tab{padding:11px 22px;font-size:.7rem}
    .window-titlebar{padding:12px 18px}
    .window-footer{padding:10px 18px}
}

/* ═══ RESPONSIVE — DESKTOP ═══ */
@media(min-width:1200px) and (max-width:1599px){
    .card-services{grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:5px;padding:10px 14px}
    .service-tile{padding:14px 32px 14px 14px;gap:14px}
    .tile-icon{width:38px;height:38px}
    .tile-icon svg{width:19px;height:19px}
    .sb-group-title{font-size:.48rem}
    .sb-name{font-size:.82rem}
}

/* ═══ RESPONSIVE — TABLET ═══ */
@media(max-width:900px){
    .card-stack{width:85vw;max-height:calc(100vh - 72px);top:36px;font-size:1em}
    .dashboard-grid{grid-template-columns:repeat(4,1fr);padding:6px}
    .dash-widgets-row{grid-template-columns:1fr 1fr;padding:0 6px 6px}
    .dash-widgets-row>.weather-widget{grid-column:1/-1}
    .footer-keys{font-size:.4rem}
    .footer-keys kbd{font-size:.4rem;padding:2px 4px}
    .titlebar-center{display:none}
    .titlebar-search{max-width:200px}
}

/* ═══ RESPONSIVE — SMALL TABLET ═══ */
@media(max-width:700px){
    .card-stack{width:90vw;max-height:calc(100vh - 72px);top:36px;font-size:1em}
    .dashboard-grid{grid-template-columns:repeat(2,1fr);padding:4px}
    .dash-stat{padding:5px 8px}
    .dash-widgets-row{grid-template-columns:1fr;padding:0 4px 4px}
    .footer-keys{display:none}
    .titlebar-center{display:none}
    .titlebar-search{max-width:140px}
    .browser-tab{padding:6px 10px;font-size:.55rem;gap:5px}
    .browser-tab .tab-count{display:none}
    .status-board{flex-direction:column;gap:4px}
    .favs-dock{bottom:10px;padding:5px 10px;gap:5px}
    .favs-dock-item{width:28px;height:28px}
}

/* ═══ RESPONSIVE — MOBILE ═══ */
@media(max-width:480px){
    body{overflow:hidden}
    .card-stack{width:96vw;max-height:calc(100vh - 72px);top:36px;font-size:1em}
    .os-topbar{height:30px;padding:0 8px;gap:6px}
    .topbar-logo{font-size:.55rem}
    .topbar-center .titlebar-search{max-width:120px}
    .os-taskbar{height:30px;padding:0 6px}
    body{padding-top:30px;padding-bottom:30px}
    .main-card.card-active{flex:0 0 auto}
    .sub-card.card-active{flex:0 0 auto}
    .window-titlebar{padding:5px 10px;gap:6px}
    .titlebar-title{font-size:.75rem}
    .titlebar-dots{gap:4px}
    .tb-dot{width:9px;height:9px}
    .titlebar-center{display:none}
    .titlebar-search{display:none}
    .mode-status{font-size:.65rem}
    .toggle-track{width:28px;height:14px}
    .toggle-thumb{width:8px;height:8px;top:2px;left:2px}
    .toggle-switch input:checked~.toggle-track .toggle-thumb{transform:translateX(14px)}
    .browser-tab{padding:7px 13px;font-size:.7rem;gap:6px}
    .browser-tab .tab-icon{width:17px;height:17px}
    .browser-tab .tab-icon svg{width:17px;height:17px}
    .browser-tab .tab-count{display:none}
    .browser-tab .tab-status{display:none}
    .browser-tab-bar{padding:3px 8px 0}
    .card-services{gap:2px;padding:4px 8px}
    .service-tile{padding:10px 30px 10px 12px;gap:10px}
    .tile-icon{width:30px;height:30px}
    .tile-icon svg{width:15px;height:15px}
    .tile-name{font-size:.9rem}
    .tile-desc{font-size:1rem}
    .tile-arrow{display:none}
    .tile-pin{font-size:.65rem;right:6px}
    .service-status{width:4px;height:4px;top:5px;right:5px}
    .dashboard-grid{grid-template-columns:repeat(2,1fr);gap:2px;padding:4px}
    .dash-stat{padding:6px 8px}
    .dash-label{font-size:.6rem;margin-bottom:2px;letter-spacing:.08em}
    .dash-value{font-size:1.3rem;margin-bottom:2px}
    .dash-bar{height:4px}
    .dash-spark{height:10px;margin-top:2px}
    .dash-spark .spark-bar{width:2px}
    .disk-row .dash-value{font-size:1.1rem}
    .dash-widgets-row{grid-template-columns:1fr;padding:0 4px 4px;gap:2px}
    .disk-name{font-size:.45rem}
    .dash-disks-stat .disk-rows{gap:6px}
    .svc-count{font-size:1.2rem}
    .svc-message{font-size:.45rem}
    .svc-down-tag{font-size:.7rem;padding:3px 6px}
    .status-board{flex-direction:row;flex-wrap:wrap;gap:3px;padding:3px 8px}
    .sb-group{flex:1 1 45%;min-width:0}
    .sb-group-title{font-size:.45rem;padding:3px 6px 2px}
    .sb-item{padding:3px 6px 3px 17px;gap:4px}
    .sb-item::before{left:5px}
    .sb-item::after{left:5px;width:6px}
    .sb-name{font-size:.7rem}
    .sb-dot{width:5px;height:5px}
    .sb-url{display:none}
    .dash-gpu-name{font-size:.5rem;padding:3px 6px 4px}
    .window-footer{padding:4px 10px}
    .footer-keys{display:none}
    .footer-search{display:none}
    .nav-dots{gap:6px}
    .nav-dot{width:5px;height:5px}
    .sys-readout{padding:3px 8px}
    .sys-time{font-size:.9rem}
    .sys-label{font-size:.3rem}
    .sys-val{font-size:.7rem}
    .sys-led{width:3px;height:3px}
    .sys-readout{padding:2px 5px;gap:0}
    .user-widget{padding:1px 4px}
    .user-name{font-size:.3rem}
    .logout-btn{font-size:.3rem}
    .settings-btn{width:20px;height:20px}
    .settings-btn svg{width:10px;height:10px}
    .favs-dock{padding:4px 8px;gap:4px;bottom:8px}
    .favs-dock-item{width:26px;height:26px}
    .favs-access-grid{grid-template-columns:repeat(2,1fr)}
    .favs-sidebar{width:30px}
    .favs-sidebar-item{width:24px;height:24px}
    .card-stack.has-sidebar .card-body,.card-stack.has-sidebar .browser-tab-bar:not(.sub-tab-bar),.card-stack.has-sidebar .status-board{margin-left:30px}
    .sub-tab-bar .browser-tab-bar{padding:2px 6px 0}
    .boot-content{padding:20px;font-size:1rem}
    .boot-logo{font-size:.4rem}
}

/* ═══ RESPONSIVE — SMALL MOBILE ═══ */
@media(max-width:360px){
    .card-stack{width:96vw;height:calc(100vh - 72px);top:36px}
    .tile-desc{display:none}
    .titlebar-achievements{display:none}
    .service-tile{padding:6px 8px;gap:6px}
    .tile-icon{width:22px;height:22px}
    .tile-icon svg{width:11px;height:11px}
    .tile-name{font-size:.65rem}
    .favs-dock{bottom:6px;padding:3px 6px;gap:3px}
    .favs-dock-item{width:22px;height:22px}
    .favs-dock-item svg{width:11px;height:11px}
}

/* ═══ ANIMATION SPEED CUSTOM PROPERTIES ═══ */
:root{--anim-speed:1}
body.anim-fast{--anim-speed:0.5}
body.anim-slow{--anim-speed:2}
body.anim-none{--anim-speed:0}
body.anim-none *{animation-duration:0s!important;transition-duration:0s!important}

/* ═══ COMPACT MODE ═══ */
body.compact-mode .card-services{gap:1px;padding:2px 4px}
body.compact-mode .service-tile{padding:4px 8px;gap:6px}
body.compact-mode .tile-name{font-size:.7rem}
body.compact-mode .tile-desc{font-size:.8rem}
body.compact-mode .tile-icon{width:22px;height:22px}
body.compact-mode .browser-tab{padding:5px 10px;font-size:.5rem}
body.compact-mode .dashboard-grid{gap:2px;padding:3px}
body.compact-mode .dash-stat{padding:4px 6px}
body.compact-mode .window-titlebar{padding:4px 10px;gap:8px}
body.compact-mode .window-footer{padding:2px 8px}

/* ═══ CRT EFFECTS TOGGLE ═══ */
body.no-crt .crt-overlay,body.no-crt .crt-scanline,body.no-crt .crt-vignette,body.no-crt .grain-overlay{display:none!important}

/* ═══ CUSTOM LINK MODAL ═══ */
.custom-link-overlay{position:fixed;inset:0;z-index:99990;background:rgba(0,0,0,.7);display:flex;align-items:center;justify-content:center;backdrop-filter:blur(4px)}
.custom-link-panel{width:min(420px,90vw);border:1px solid rgba(var(--active-rgb),.2);background:rgba(12,12,22,.96);backdrop-filter:blur(12px);box-shadow:0 0 40px rgba(0,0,0,.5),0 0 20px rgba(var(--active-rgb),.05)}
.cl-header{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid rgba(var(--active-rgb),.1);background:rgba(0,0,0,.3)}
.cl-title{font-family:var(--font-pixel);font-size:.55rem;letter-spacing:.12em;color:var(--green);text-shadow:0 0 6px rgba(var(--active-rgb),.3)}
.cl-close{background:none;border:1px solid rgba(255,59,48,.2);color:var(--red);font-family:var(--font-pixel);font-size:.5rem;padding:3px 8px;cursor:pointer;transition:all .2s}
.cl-close:hover{background:rgba(255,59,48,.1);border-color:rgba(255,59,48,.3)}
.cl-body{padding:12px 14px;display:flex;flex-direction:column;gap:10px}
.cl-row{display:flex;flex-direction:column;gap:4px}
.cl-label{font-family:var(--font-pixel);font-size:.4rem;letter-spacing:.1em;color:var(--dim)}
.cl-input{background:rgba(0,0,0,.5);border:1px solid rgba(var(--active-rgb),.12);padding:6px 10px;font-family:var(--font-retro);font-size:1rem;color:var(--green);outline:none;transition:border-color .2s}
.cl-input:focus{border-color:rgba(var(--active-rgb),.3);box-shadow:0 0 8px rgba(var(--active-rgb),.08)}
.cl-preview{display:flex;align-items:center;gap:10px;padding:8px;border:1px solid rgba(255,255,255,.04);background:rgba(0,0,0,.3)}
.cl-preview-icon{width:32px;height:32px;display:flex;align-items:center;justify-content:center;border:1px solid rgba(var(--active-rgb),.1);background:rgba(0,0,0,.3);flex-shrink:0}
.cl-preview-icon img{width:24px;height:24px;image-rendering:pixelated}
.cl-preview-name{font-family:var(--font-ui);font-size:.8rem;color:var(--text)}
.cl-actions{display:flex;gap:8px;justify-content:flex-end;padding-top:6px}
.cl-btn{background:rgba(var(--active-rgb),.06);border:1px solid rgba(var(--active-rgb),.2);color:var(--green);font-family:var(--font-pixel);font-size:.45rem;padding:6px 14px;cursor:pointer;letter-spacing:.1em;transition:all .2s}
.cl-btn:hover{background:rgba(var(--active-rgb),.12);border-color:rgba(var(--active-rgb),.3)}
.cl-btn.cl-btn-cancel{color:var(--dim);border-color:rgba(255,255,255,.08);background:rgba(255,255,255,.02)}
.cl-btn.cl-btn-cancel:hover{background:rgba(255,255,255,.05)}

/* ═══ SNAP ZONES OVERLAY ═══ */
.snap-zone-overlay{position:fixed;inset:0;z-index:9;pointer-events:none}
.snap-zone{position:absolute;border:2px dashed rgba(var(--active-rgb),.25);background:rgba(var(--active-rgb),.04);transition:opacity .2s;opacity:0}
.snap-zone.active{opacity:1;background:rgba(var(--active-rgb),.08);border-color:rgba(var(--active-rgb),.4)}
.snap-zone-left{left:0;top:36px;width:50%;height:calc(100% - 72px)}
.snap-zone-right{right:0;top:36px;width:50%;height:calc(100% - 72px)}
.snap-zone-top{left:0;top:36px;width:100%;height:calc(50% - 36px)}
.snap-zone-tl{left:0;top:36px;width:50%;height:calc(50% - 36px)}
.snap-zone-tr{right:0;top:36px;width:50%;height:calc(50% - 36px)}
.snap-zone-bl{left:0;bottom:36px;width:50%;height:calc(50% - 36px)}
.snap-zone-br{right:0;bottom:36px;width:50%;height:calc(50% - 36px)}

/* ═══ SNAP LAYOUT PICKER ═══ */
.snap-layout-picker{position:absolute;z-index:99999;background:rgba(12,12,22,.96);border:1px solid rgba(var(--active-rgb),.2);padding:8px;display:grid;grid-template-columns:repeat(3,1fr);gap:4px;box-shadow:0 4px 20px rgba(0,0,0,.5)}
.snap-layout-option{width:48px;height:32px;border:1px solid rgba(var(--active-rgb),.1);background:rgba(0,0,0,.3);cursor:pointer;display:flex;gap:1px;padding:2px;transition:all .2s}
.snap-layout-option:hover{border-color:rgba(var(--active-rgb),.3);background:rgba(var(--active-rgb),.06)}
.snap-layout-option .sl-zone{background:rgba(var(--active-rgb),.15);flex-shrink:0;transition:background .15s}
.snap-layout-option .sl-zone.sl-hover,.snap-layout-option:hover .sl-zone:hover{background:rgba(var(--active-rgb),.4)}

/* ═══ TILING MODE ═══ */
body.tiling-mode .card-stack{position:absolute!important;transform:none!important;border-radius:0!important;will-change:transform,width,height,left,top}
body.tiling-mode .floating-window{will-change:transform,width,height,left,top;border-radius:0!important}
.tiling-gap{--tile-gap:8px}

/* ═══ SETTINGS TABS (new tabs) ═══ */
.settings-tab-bar{display:flex;gap:0;border-bottom:1px solid rgba(var(--active-rgb),.08);background:rgba(0,0,0,.2)}
.settings-tab{padding:8px 14px;font-family:var(--font-pixel);font-size:.45rem;letter-spacing:.1em;color:var(--dim);cursor:pointer;border-bottom:2px solid transparent;transition:all .2s;text-transform:uppercase}
.settings-tab:hover{color:var(--text);background:rgba(255,255,255,.02)}
.settings-tab.active{color:var(--green);border-bottom-color:var(--green);text-shadow:0 0 6px rgba(var(--active-rgb),.3)}
.settings-section{padding:12px 14px}
.settings-section[style*="display: none"]{display:none}

/* ═══ SETTINGS ROWS (enhanced) ═══ */
.settings-row{display:flex;align-items:center;justify-content:space-between;padding:8px 0;border-bottom:1px solid rgba(255,255,255,.03);gap:12px}
.settings-row:last-child{border-bottom:none}
.settings-row-info{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.settings-label{font-family:var(--font-pixel);font-size:.4rem;letter-spacing:.1em;color:var(--text)}
.settings-desc{font-family:var(--font-retro);font-size:.8rem;color:var(--dim)}
.settings-select{background:rgba(0,0,0,.5);border:1px solid rgba(var(--active-rgb),.12);color:var(--green);font-family:var(--font-retro);font-size:.9rem;padding:4px 8px;outline:none;min-width:140px;cursor:pointer}
.settings-select:focus{border-color:rgba(var(--active-rgb),.3)}
.settings-select option{background:#0c0c16;color:#39ff14}
.settings-select option:checked{background:#1a1a2e}
.settings-toggle{position:relative;display:inline-block;width:34px;height:18px}
.settings-toggle input{position:absolute;opacity:0;width:0;height:0}
.settings-toggle-track{display:block;width:34px;height:18px;background:rgba(0,0,0,.5);border:1px solid rgba(var(--active-rgb),.12);position:relative;cursor:pointer;transition:all .2s}
.settings-toggle-thumb{position:absolute;top:2px;left:2px;width:12px;height:12px;background:var(--dim);transition:all .25s}
.settings-toggle input:checked+.settings-toggle-track{border-color:rgba(var(--active-rgb),.3)}
.settings-toggle input:checked+.settings-toggle-track .settings-toggle-thumb{transform:translateX(16px);background:var(--green);box-shadow:0 0 4px var(--green)}
.settings-btn-action{background:rgba(var(--active-rgb),.06);border:1px solid rgba(var(--active-rgb),.15);color:var(--green);font-family:var(--font-pixel);font-size:.4rem;padding:5px 12px;cursor:pointer;letter-spacing:.08em;transition:all .2s}
.settings-btn-action:hover{background:rgba(var(--active-rgb),.12);border-color:rgba(var(--active-rgb),.25)}
.settings-btn-action.danger{color:var(--red);border-color:rgba(255,59,48,.15)}
.settings-btn-action.danger:hover{background:rgba(255,59,48,.08);border-color:rgba(255,59,48,.25)}

/* ═══ PINNED TAB STYLE ═══ */
.browser-tab.tab-pinned{border-top:2px solid rgba(var(--c-rgb),.4);position:relative;padding-right:20px}
.browser-tab.tab-pinned .tab-pin-icon{position:absolute;top:3px;right:4px;color:#fff;opacity:.5;margin-right:0;line-height:1;display:flex;align-items:center}

/* ═══ TAB RENAME INPUT ═══ */
.tab-rename-input{background:rgba(0,0,0,.5);border:1px solid rgba(var(--active-rgb),.3);color:var(--green);font-family:var(--font-pixel);font-size:.6rem;padding:2px 6px;outline:none;max-width:120px}

/* ═══ GRID DROP TARGET ═══ */
.grid-drop-target{outline:2px dashed rgba(var(--active-rgb),.2)!important;background:rgba(var(--active-rgb),.02)!important}
.bar-drop-target{background:rgba(var(--active-rgb),.04)!important}

/* ═══ CUSTOM SERVICE ICON ═══ */
.custom-svc-icon{width:100%;height:100%;display:flex;align-items:center;justify-content:center}
.custom-svc-icon img{width:20px;height:20px;image-rendering:pixelated}
.custom-svc-icon .letter-icon{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-family:var(--font-pixel);font-size:.5rem;color:var(--green);text-shadow:0 0 4px rgba(var(--active-rgb),.3)}

/* ═══ OS TOPBAR ═══ */
.os-topbar{position:fixed;top:0;left:0;right:0;height:36px;z-index:9990;display:flex;align-items:center;padding:0 16px;background:linear-gradient(180deg,rgba(6,6,18,.95),rgba(4,4,14,.92));border-bottom:1px solid rgba(var(--active-rgb),.15);backdrop-filter:blur(12px) saturate(1.2);gap:12px;user-select:none;box-shadow:0 1px 4px rgba(0,0,0,.4),0 0 20px rgba(0,0,0,.2)}
.topbar-left{display:flex;align-items:center;gap:6px;flex:1}
.topbar-logo{font-family:var(--font-pixel);font-size:.7rem;color:#fff;letter-spacing:.15em}
.topbar-version{font-family:var(--font-pixel);font-size:.35rem;color:var(--dim);letter-spacing:.08em;padding:2px 6px;border:1px solid rgba(var(--active-rgb),.12);background:rgba(0,0,0,.3);opacity:.7;transition:opacity .2s}
.topbar-version:hover{opacity:1;color:var(--green);border-color:rgba(var(--active-rgb),.25)}
.topbar-center{flex:1;display:flex;justify-content:center;min-width:0}
.topbar-center .titlebar-search{max-width:300px;flex:1}
.topbar-right{display:flex;align-items:center;gap:10px;flex:1;justify-content:flex-end}

/* ═══ OS TASKBAR ═══ */
.os-taskbar{position:fixed;bottom:0;left:0;right:0;height:36px;z-index:9990;display:flex;align-items:center;padding:0 12px;background:linear-gradient(0deg,rgba(6,6,18,.95),rgba(4,4,14,.92));border-top:1px solid rgba(var(--active-rgb),.15);backdrop-filter:blur(12px) saturate(1.2);gap:4px;box-shadow:0 -1px 4px rgba(0,0,0,.4),0 0 20px rgba(0,0,0,.2)}
.taskbar-windows{display:flex;gap:3px;flex:1;overflow-x:auto;scrollbar-width:none}
.taskbar-windows::-webkit-scrollbar{display:none}
.taskbar-btn{display:flex;align-items:center;gap:5px;padding:4px 10px;background:rgba(255,255,255,.02);border:1px solid rgba(var(--active-rgb),.08);cursor:pointer;transition:all .2s cubic-bezier(.4,0,.2,1);flex-shrink:0;max-width:160px}
.taskbar-btn:hover{background:rgba(var(--active-rgb),.08);border-color:rgba(var(--active-rgb),.2);box-shadow:0 0 8px rgba(var(--active-rgb),.08)}
.taskbar-btn.active{background:rgba(var(--active-rgb),.1);border-color:rgba(var(--active-rgb),.25);border-bottom:2px solid var(--green);box-shadow:0 2px 8px rgba(var(--active-rgb),.12)}
.taskbar-btn.minimized{opacity:.4}
.taskbar-btn-icon{width:14px;height:14px;flex-shrink:0;color:var(--dim)}
.taskbar-btn-icon svg{width:100%;height:100%}
.taskbar-btn-label{font-family:var(--font-ui);font-size:.65rem;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.taskbar-tray{display:flex;align-items:center;gap:8px;padding-left:8px;border-left:1px solid rgba(var(--active-rgb),.1);flex-shrink:0}
.taskbar-led{width:5px;height:5px;border-radius:50%;background:var(--green);box-shadow:0 0 4px var(--green)}
.taskbar-notify{font-family:var(--font-pixel);font-size:.35rem;color:var(--dim);letter-spacing:.06em}

/* ═══ NOTIFICATION TOASTS ═══ */
.notification-container{position:fixed;bottom:44px;right:14px;z-index:99998;display:flex;flex-direction:column-reverse;gap:6px;pointer-events:none;max-width:320px}
.notification-toast{display:flex;align-items:center;gap:10px;padding:10px 16px;background:rgba(8,8,20,.96);backdrop-filter:blur(16px) saturate(1.3);border:1px solid rgba(var(--active-rgb),.18);box-shadow:var(--depth-2),0 0 20px rgba(var(--active-rgb),.04);font-family:var(--font-ui);font-size:.7rem;color:var(--text);pointer-events:auto;transform:translateX(120%);transition:transform .3s cubic-bezier(.4,0,.2,1),opacity .3s ease;opacity:0}
.notification-toast.show{transform:translateX(0);opacity:1}
.notification-toast.hiding{transform:translateX(120%);opacity:0}
.notification-icon{font-size:.9rem;flex-shrink:0}
.notification-text{flex:1;min-width:0}
.notification-close{background:none;border:none;color:var(--dim);cursor:pointer;font-family:var(--font-pixel);font-size:.4rem;padding:2px 4px;transition:color .15s}
.notification-close:hover{color:var(--red)}

/* ═══ WINDOW SWITCHER (Alt+Tab) ═══ */
.window-switcher{position:fixed;inset:0;z-index:99997;background:rgba(3,3,10,.85);backdrop-filter:blur(16px) saturate(1.2);display:none;align-items:center;justify-content:center}
.window-switcher.open{display:flex}
.window-switcher-grid{display:flex;gap:14px;padding:24px}
.window-switcher-item{display:flex;flex-direction:column;align-items:center;gap:8px;padding:14px 20px;border:1px solid rgba(var(--active-rgb),.12);background:rgba(8,8,20,.9);cursor:pointer;transition:all .2s cubic-bezier(.4,0,.2,1);min-width:130px;border-radius:4px}
.window-switcher-item:hover,.window-switcher-item.active{border-color:rgba(var(--active-rgb),.4);background:rgba(var(--active-rgb),.08);box-shadow:0 0 20px rgba(var(--active-rgb),.1),inset 0 0 20px rgba(var(--active-rgb),.03)}
.window-switcher-item .ws-icon{width:32px;height:32px;display:flex;align-items:center;justify-content:center;color:var(--dim)}
.window-switcher-item .ws-icon svg{width:24px;height:24px}
.window-switcher-item .ws-label{font-family:var(--font-pixel);font-size:.45rem;color:var(--text);letter-spacing:.08em;text-align:center}

/* ═══ SHORTCUT LIST (Settings) ═══ */
.shortcut-list{display:flex;flex-direction:column;gap:4px}
.shortcut-row{display:flex;align-items:center;justify-content:space-between;padding:6px 8px;border-bottom:1px solid rgba(255,255,255,.03)}
.shortcut-key{font-family:var(--font-pixel);font-size:.4rem;padding:3px 6px;border:1px solid rgba(var(--active-rgb),.2);background:rgba(var(--active-rgb),.04);color:var(--green);letter-spacing:.06em}
.shortcut-desc{font-family:var(--font-retro);font-size:.85rem;color:var(--dim)}

/* ═══ TITLEBAR FUNCTIONAL DOTS ═══ */
.tb-dot{cursor:pointer;transition:transform .1s,box-shadow .2s}
.tb-dot:hover{transform:scale(1.3)}
.tb-dot-red:hover{box-shadow:0 0 8px rgba(255,59,48,.6)}
.tb-dot-yellow:hover{box-shadow:0 0 8px rgba(255,230,0,.6)}
.tb-dot-green:hover{box-shadow:0 0 8px rgba(var(--active-rgb),.6)}

/* ═══ WINDOW RESIZE HANDLE ═══ */
.card-stack .main-resize{position:absolute;bottom:0;right:0;width:14px;height:14px;cursor:nwse-resize;background:linear-gradient(135deg,transparent 50%,rgba(var(--active-rgb),.2) 50%);z-index:15}

/* ═══ DOCK FAVS (inside taskbar) ═══ */
.dock-favs{display:flex;align-items:center;justify-content:center;gap:6px;flex:1;padding:2px 8px}
.dock-favs-item{width:24px;height:24px;display:flex;align-items:center;justify-content:center;border:1px solid rgba(var(--active-rgb),.08);background:rgba(255,255,255,.02);cursor:pointer;transition:all .2s;position:relative}
.dock-favs-item:hover{transform:scale(1.15) translateY(-2px);background:rgba(var(--c-rgb),.08);border-color:rgba(var(--c-rgb),.2);box-shadow:0 2px 8px rgba(var(--c-rgb),.15)}
.dock-favs-icon{width:14px;height:14px;display:flex;align-items:center;justify-content:center;color:var(--c)}
.dock-favs-icon svg{width:14px;height:14px}

/* ═══ SNAP PREVIEW ═══ */
.snap-preview{position:fixed;z-index:8;background:rgba(var(--active-rgb),.06);border:2px solid rgba(var(--active-rgb),.2);transition:all .2s ease;pointer-events:none;display:none}
.snap-preview.visible{display:block}

/* ═══ DESKTOP SASH DIVIDERS (window tiling) ═══ */
.desktop-sash{transition:background .2s}
.desktop-sash:hover{background:rgba(var(--active-rgb),.25)!important}
.desktop-sash::after{content:'';position:absolute;z-index:9989}
.desktop-sash-v::after{left:0;right:0;top:-4px;bottom:-4px}
.desktop-sash-h::after{top:0;bottom:0;left:-4px;right:-4px}

/* ═══ BODY OFFSET FOR TOPBAR/TASKBAR ═══ */
body{padding-top:36px;padding-bottom:36px}

/* ═══ VERTICAL BAR LAYOUT ═══ */
.bar-vertical{display:flex!important;flex-direction:column!important;padding:8px 2px!important;gap:8px!important;scrollbar-width:none}
.bar-vertical::-webkit-scrollbar{display:none}
.bar-vertical .topbar-left,.bar-vertical .topbar-center,.bar-vertical .topbar-right{flex:0 0 auto!important;flex-direction:column!important;gap:6px!important;width:100%!important;align-items:center!important}
.bar-vertical .topbar-center{order:2}.bar-vertical .topbar-right{order:3}
.bar-vertical .topbar-center .titlebar-search{max-width:none!important;width:30px!important}
.bar-vertical .titlebar-search input{width:0!important;padding:0!important;opacity:0}
.bar-vertical .search-prefix{margin:0}
.bar-vertical .topbar-logo{font-size:.4rem!important;letter-spacing:.05em!important;writing-mode:vertical-lr;text-orientation:mixed}
.bar-vertical .topbar-version{display:none}
.bar-vertical .logo-cursor{display:none}
.bar-vertical .user-widget{flex-direction:column!important;gap:2px!important}
.bar-vertical .user-name{font-size:.5rem!important;writing-mode:vertical-lr}
.bar-vertical .logout-btn{font-size:.3rem!important;padding:2px 3px!important}
.bar-vertical .settings-btn{width:22px!important;height:22px!important}
.bar-vertical .mode-toggle{flex-direction:column!important;gap:2px!important}
.bar-vertical .mode-status{font-size:.3rem!important}
.bar-vertical .taskbar-windows{flex-direction:column!important;flex:0 1 auto!important;overflow-y:auto!important;overflow-x:hidden!important;width:100%!important}
.bar-vertical .taskbar-btn{max-width:none!important;padding:4px!important;justify-content:center}
.bar-vertical .taskbar-btn-label{display:none}
.bar-vertical .taskbar-tray{flex-direction:column!important;gap:4px!important;align-items:center!important}
.bar-vertical .tray-clock{writing-mode:vertical-lr;font-size:.5rem!important}
.bar-vertical .dock-favs{flex-direction:column!important;padding:2px 0!important;gap:4px!important}

/* ═══ COMBINED BAR ═══ */
body.combined-bar{padding-bottom:0!important}

/* ═══════════════════════════════════════════
   STARFIELD-OS v1.8 — ALL NEW FEATURES
   ═══════════════════════════════════════════ */

/* ═══ REDUCED MOTION (47) ═══ */
@media(prefers-reduced-motion:reduce){
body:not(.force-motion) *{animation-duration:0s!important;animation-delay:0s!important;transition-duration:0s!important}
body:not(.force-motion) #starfield,body:not(.force-motion) #cursor-trail,body:not(.force-motion) .grain-overlay{display:none!important}
body:not(.force-motion) .crt-scanline{animation:none!important}
}
body.reduced-motion *{animation-duration:0s!important;animation-delay:0s!important;transition-duration:0s!important}
body.reduced-motion #starfield,body.reduced-motion #cursor-trail,body.reduced-motion .grain-overlay{display:none!important}

/* ═══ FONT SIZE SCALING (48) ═══ */
body.scale-80{font-size:12.8px}
body.scale-90{font-size:14.4px}
body.scale-100{font-size:16px}
body.scale-110{font-size:17.6px}
body.scale-120{font-size:19.2px}
body.scale-130{font-size:20.8px}
body.scale-140{font-size:22.4px}
body.scale-150{font-size:24px}

/* ═══ DENSITY LEVELS (36) ═══ */
body.density-cozy .service-tile{padding:18px 34px 18px 18px;gap:16px}
body.density-cozy .tile-icon{width:44px;height:44px}
body.density-cozy .tile-name{font-size:1.1rem}
body.density-cozy .tile-desc{font-size:1.15rem}
body.density-cozy .card-services{gap:6px;padding:12px 16px}
body.density-cozy .browser-tab{padding:10px 16px;font-size:.7rem}
body.density-cozy .dashboard-grid{gap:6px;padding:12px}
body.density-ultra .service-tile{padding:3px 6px;gap:4px;flex-direction:row}
body.density-ultra .tile-icon{width:18px;height:18px}
body.density-ultra .tile-icon svg{width:10px;height:10px}
body.density-ultra .tile-name{font-size:.7rem}
body.density-ultra .tile-desc{display:none}
body.density-ultra .card-services{gap:1px;padding:2px 4px;grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
body.density-ultra .browser-tab{padding:4px 8px;font-size:.45rem}
body.density-ultra .dashboard-grid{gap:1px;padding:2px}
body.density-ultra .dash-stat{padding:3px 5px}

/* ═══ PHOSPHOR GLOW RENDERING (23) ═══ */
body.phosphor-glow .tile-name,body.phosphor-glow .tab-title,body.phosphor-glow .topbar-logo,body.phosphor-glow .settings-title,body.phosphor-glow .dash-label{text-shadow:0 0 2px currentColor,0 0 8px currentColor,0 0 20px rgba(var(--active-rgb),.3),0 0 40px rgba(var(--active-rgb),.1)}
body.phosphor-glow .browser-tab.active{text-shadow:0 0 2px rgba(var(--c-rgb),1),0 0 6px rgba(var(--c-rgb),.6),0 0 15px rgba(var(--c-rgb),.2)}
body.phosphor-glow .dash-value{text-shadow:0 0 3px currentColor,0 0 10px currentColor,0 0 25px rgba(var(--active-rgb),.2)}

/* ═══ PHOSPHOR MODES (27) ═══ */
body.phosphor-p1{--green:#33ff00;--active-rgb:51,255,0}
body.phosphor-p3{--green:#ffb000;--active-rgb:255,176,0;--cyan:#ffd700;--text:#ffe8b0;--dim:#8a7040}
body.phosphor-p31{--green:#b0d4ff;--active-rgb:176,212,255;--cyan:#d0e8ff;--text:#e0ecff;--dim:#5a6a80}

/* ═══ SCREEN CURVATURE (24) ═══ */
body.crt-curve{perspective:1800px}
body.crt-curve main,body.crt-curve .floating-window{transform-style:preserve-3d}
body.crt-curve::after{content:'';position:fixed;inset:0;z-index:99989;pointer-events:none;background:radial-gradient(ellipse at center,transparent 60%,rgba(0,0,0,.35) 100%);border-radius:12px}

/* ═══ VHS GLITCH TRANSITIONS (25) ═══ */
@keyframes vhsGlitch{0%{clip-path:inset(40% 0 61% 0);transform:translate(-2px,0)}10%{clip-path:inset(92% 0 1% 0);transform:translate(2px,0)}20%{clip-path:inset(43% 0 1% 0);transform:translate(-1px,0)}30%{clip-path:inset(25% 0 58% 0);transform:translate(0)}40%{clip-path:inset(54% 0 7% 0);transform:translate(3px,0)}50%{clip-path:inset(83% 0 5% 0);transform:translate(-2px,0)}60%{clip-path:inset(2% 0 78% 0);transform:translate(1px,0)}70%{clip-path:inset(60% 0 10% 0);transform:translate(0)}80%{clip-path:inset(12% 0 69% 0);transform:translate(-1px,0)}90%{clip-path:inset(70% 0 8% 0);transform:translate(2px,0)}100%{clip-path:inset(0);transform:translate(0)}}
.vhs-glitch{animation:vhsGlitch .15s linear}
@keyframes rgbShift{0%{text-shadow:-2px 0 #ff0000,2px 0 #0000ff}50%{text-shadow:2px 0 #ff0000,-2px 0 #0000ff}100%{text-shadow:0 0 transparent}}
.vhs-rgb-shift{animation:rgbShift .2s linear}

/* ═══ CRT POWER ON/OFF (26) ═══ */
@keyframes crtPowerOn{0%{transform:scaleY(0) scaleX(0);filter:brightness(30);opacity:1}40%{transform:scaleY(.005) scaleX(.8);filter:brightness(10)}70%{transform:scaleY(.8) scaleX(1);filter:brightness(2)}100%{transform:scaleY(1) scaleX(1);filter:brightness(1);opacity:1}}
@keyframes crtPowerOff{0%{transform:scaleY(1) scaleX(1);filter:brightness(1);opacity:1}40%{transform:scaleY(.005) scaleX(.8);filter:brightness(10)}70%{transform:scaleY(.003) scaleX(.2);filter:brightness(30)}100%{transform:scaleY(0) scaleX(0);filter:brightness(0);opacity:0}}
body.crt-power-on{animation:crtPowerOn .5s ease-out forwards}
body.crt-power-off{animation:crtPowerOff .4s ease-in forwards}

/* ═══ GLASSMORPHISM CHROME (45) ═══ */
body.glass-chrome .window-titlebar,body.glass-chrome .fw-titlebar{background:rgba(6,6,14,.4)!important;backdrop-filter:blur(16px) saturate(1.5)!important;border-bottom:1px solid rgba(var(--active-rgb),.12)!important}
body.glass-chrome .os-topbar,body.glass-chrome .os-taskbar{background:rgba(6,6,14,.3)!important;backdrop-filter:blur(20px) saturate(1.8)!important}
body.glass-chrome .browser-tab.active{background:rgba(var(--c-rgb),.08)!important;backdrop-filter:blur(8px)}

/* ═══ STAGGERED TILE ENTRY (29) ═══ */
@keyframes tileSlideIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
.tile-stagger{opacity:0;animation:tileSlideIn .25s ease-out forwards}

/* ═══ HOVER TILT/PARALLAX (30) ═══ */
.service-tile.tilt-enabled{transition:transform .2s ease-out,box-shadow .2s ease-out;transform-style:preserve-3d}
.service-tile.tilt-enabled:hover{box-shadow:0 8px 20px rgba(0,0,0,.3),0 0 12px rgba(var(--c-rgb),.1)}

/* ═══ PIXEL CLICK RIPPLE (31) ═══ */
@keyframes pixelRipple{0%{width:4px;height:4px;opacity:.8}100%{width:40px;height:40px;opacity:0}}
.pixel-ripple{position:fixed;pointer-events:none;z-index:99999;border:2px solid var(--green);background:rgba(var(--active-rgb),.1);animation:pixelRipple .35s ease-out forwards}

/* ═══ WINDOW ANIMATIONS (32) ═══ */
@keyframes windowOpen{from{opacity:0;transform:scale(.85)}to{opacity:1;transform:scale(1)}}
@keyframes windowClose{from{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.85)}}
@keyframes windowMinimize{from{opacity:1;transform:scale(1) translateY(0)}to{opacity:0;transform:scale(.5) translateY(100px)}}
.win-open{animation:windowOpen .2s ease-out forwards}
.win-close{animation:windowClose .15s ease-in forwards}
.win-minimize{animation:windowMinimize .2s ease-in forwards}

/* ═══ CRT SCREENSAVER (33) ═══ */
.screensaver-overlay{position:fixed;inset:0;z-index:99995;background:#000;display:none;cursor:none}
.screensaver-overlay.active{display:block}
.screensaver-canvas{width:100%;height:100%}
.screensaver-label{position:absolute;bottom:20px;right:20px;font-family:var(--font-pixel);font-size:.4rem;color:rgba(var(--active-rgb),.3);letter-spacing:.1em}

/* ═══ VIRTUAL DESKTOPS (1) ═══ */
.vd-indicator{display:flex;gap:3px;align-items:center;padding:0 6px}
.vd-dot{width:8px;height:8px;border:1px solid rgba(var(--active-rgb),.3);background:rgba(var(--active-rgb),.05);cursor:pointer;transition:all .2s;position:relative}
.vd-dot.active{background:rgba(var(--active-rgb),.3);border-color:rgba(var(--active-rgb),.6);box-shadow:0 0 4px rgba(var(--active-rgb),.3)}
.vd-dot:hover{border-color:rgba(var(--active-rgb),.5);background:rgba(var(--active-rgb),.15)}
.vd-dot .vd-label{position:absolute;bottom:100%;left:50%;transform:translateX(-50%);margin-bottom:4px;padding:2px 6px;background:rgba(12,12,22,.95);border:1px solid rgba(var(--active-rgb),.15);font-family:var(--font-pixel);font-size:.35rem;color:var(--text);white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .15s}
.vd-dot:hover .vd-label{opacity:1}

/* ═══ AERO PEEK (4) ═══ */
body.aero-peek .card-stack,body.aero-peek .floating-window{transition:opacity .2s ease}
body.aero-peek .card-stack:not(.peek-target),body.aero-peek .floating-window:not(.peek-target){opacity:.1!important}

/* ═══ APP LAUNCHER (5) ═══ */
.launcher-overlay{position:fixed;inset:0;z-index:99994;background:rgba(3,3,10,.94);backdrop-filter:blur(20px) saturate(1.2);display:none;flex-direction:column;align-items:center;padding:60px 40px 40px}
.launcher-overlay.open{display:flex}
.launcher-search{width:min(500px,80vw);margin-bottom:30px;background:rgba(0,0,0,.5);border:1px solid rgba(var(--active-rgb),.2);padding:12px 16px;font-family:var(--font-retro);font-size:1.2rem;color:var(--green);outline:none;text-align:center}
.launcher-search::placeholder{color:var(--dim)}
.launcher-search:focus{border-color:rgba(var(--active-rgb),.4);box-shadow:0 0 20px rgba(var(--active-rgb),.1)}
.launcher-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:12px;width:min(800px,90vw);overflow-y:auto;max-height:calc(100vh - 200px);padding:10px}
.launcher-tile{display:flex;flex-direction:column;align-items:center;gap:8px;padding:18px 10px;border:1px solid rgba(var(--active-rgb),.08);background:rgba(var(--active-rgb),.02);cursor:pointer;transition:all .25s cubic-bezier(.4,0,.2,1);text-decoration:none;color:var(--text);border-radius:4px}
.launcher-tile:hover{background:rgba(var(--active-rgb),.1);border-color:rgba(var(--active-rgb),.25);transform:translateY(-4px);box-shadow:0 8px 20px rgba(0,0,0,.3),0 0 15px rgba(var(--active-rgb),.08)}
.launcher-tile .launcher-icon{width:48px;height:48px;display:flex;align-items:center;justify-content:center;color:var(--green)}
.launcher-tile .launcher-icon svg{width:32px;height:32px}
.launcher-tile .launcher-name{font-family:var(--font-ui);font-size:.7rem;text-align:center;color:var(--text)}
.launcher-category{width:min(800px,90vw);font-family:var(--font-pixel);font-size:.45rem;color:var(--dim);letter-spacing:.12em;padding:8px 4px 4px;border-bottom:1px solid rgba(var(--active-rgb),.06);margin-bottom:4px}

/* ═══ QUICK ACTIONS (6) ═══ */
.quick-action-result{display:flex;align-items:center;gap:8px;padding:8px 12px;cursor:pointer;border-bottom:1px solid rgba(var(--active-rgb),.04)}
.quick-action-result:hover{background:rgba(var(--active-rgb),.06)}
.qa-prefix{font-family:var(--font-pixel);font-size:.4rem;color:var(--cyan);padding:2px 6px;border:1px solid rgba(0,229,255,.2);background:rgba(0,229,255,.05)}
.qa-label{font-family:var(--font-retro);font-size:.95rem;color:var(--text)}

/* ═══ DOCK MAGNIFICATION (7) ═══ */
body.dock-magnify .dock-favs-item{transition:transform .15s ease-out}

/* ═══ NOTIFICATION BADGES (8) ═══ */
.dock-favs-item[data-badge]::after{content:attr(data-badge);position:absolute;top:-4px;right:-4px;min-width:14px;height:14px;display:flex;align-items:center;justify-content:center;background:var(--red);color:#fff;font-family:var(--font-pixel);font-size:.3rem;border:1px solid rgba(0,0,0,.3);padding:0 3px;z-index:5}
.taskbar-btn[data-badge]::after{content:attr(data-badge);position:absolute;top:-2px;right:-2px;min-width:12px;height:12px;display:flex;align-items:center;justify-content:center;background:var(--red);color:#fff;font-family:var(--font-pixel);font-size:.25rem;padding:0 2px;z-index:5}
.taskbar-btn{position:relative}

/* ═══ DOCK SEPARATORS (9) ═══ */
.dock-separator{width:1px;height:20px;background:rgba(var(--active-rgb),.15);flex-shrink:0;margin:0 4px}
.bar-vertical .dock-separator{width:20px;height:1px;margin:4px 0}

/* ═══ NOTIFICATION CENTER (10) ═══ */
.notif-center{position:fixed;top:36px;right:0;width:min(360px,85vw);height:calc(100vh - 72px);z-index:99993;background:rgba(10,10,20,.96);backdrop-filter:blur(12px);border-left:1px solid rgba(var(--active-rgb),.12);transform:translateX(100%);transition:transform .3s ease;display:flex;flex-direction:column}
.notif-center.open{transform:translateX(0)}
.notif-center-header{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid rgba(var(--active-rgb),.1);background:rgba(var(--active-rgb),.02)}
.notif-center-title{font-family:var(--font-pixel);font-size:.5rem;color:var(--green);letter-spacing:.12em}
.notif-center-clear{font-family:var(--font-pixel);font-size:.35rem;color:var(--dim);background:none;border:1px solid rgba(var(--active-rgb),.1);padding:3px 8px;cursor:pointer;transition:all .2s}
.notif-center-clear:hover{color:var(--red);border-color:rgba(255,59,48,.2)}
.notif-center-body{flex:1;overflow-y:auto;padding:8px;display:flex;flex-direction:column;gap:4px;scrollbar-width:thin;scrollbar-color:rgba(var(--active-rgb),.2) transparent}
.notif-center-item{display:flex;gap:8px;padding:8px 10px;border:1px solid rgba(var(--active-rgb),.06);background:rgba(0,0,0,.2);font-family:var(--font-retro);font-size:.85rem;color:var(--text);position:relative}
.notif-center-item .nc-icon{font-size:1rem;flex-shrink:0}
.notif-center-item .nc-msg{flex:1;min-width:0}
.notif-center-item .nc-time{font-family:var(--font-pixel);font-size:.3rem;color:var(--dim);flex-shrink:0;align-self:flex-start}
.notif-center-empty{font-family:var(--font-pixel);font-size:.4rem;color:var(--dim);text-align:center;padding:40px 20px;letter-spacing:.1em}
.notif-center-item.critical{border-color:rgba(255,59,48,.2);background:rgba(255,59,48,.04)}

/* ═══ SERVICE HEALTH HEARTBEAT (11) ═══ */
.health-dot{position:absolute;top:6px;right:6px;width:6px;height:6px;border-radius:50%;z-index:3}
.health-dot.health-up{background:#39ff14;box-shadow:0 0 4px #39ff14;animation:healthPulse 2s ease-in-out infinite}
.health-dot.health-warn{background:#ffb000;box-shadow:0 0 4px #ffb000;animation:healthPulse 1.2s ease-in-out infinite}
.health-dot.health-down{background:#ff3b30;box-shadow:0 0 6px #ff3b30;animation:healthPulse .6s ease-in-out infinite}
.health-dot.health-unknown{background:var(--dim);box-shadow:none}
@keyframes healthPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.7)}}
.health-response{position:absolute;bottom:4px;right:6px;font-family:var(--font-pixel);font-size:.25rem;color:var(--dim);z-index:3}

/* ═══ RETRO TOAST STYLING (12) ═══ */
.notification-toast{border:2px solid rgba(var(--active-rgb),.25)!important;image-rendering:pixelated;box-shadow:0 0 0 1px rgba(0,0,0,.5),4px 4px 0 rgba(0,0,0,.3),0 0 12px rgba(var(--active-rgb),.08)!important}
.notification-toast.critical{border-color:rgba(255,59,48,.4)!important;background:rgba(20,5,5,.95)!important}
@keyframes screenShake{0%,100%{transform:translate(0)}10%{transform:translate(-2px,1px)}20%{transform:translate(2px,-1px)}30%{transform:translate(-1px,2px)}40%{transform:translate(1px,-1px)}50%{transform:translate(-2px,-1px)}60%{transform:translate(2px,1px)}70%{transform:translate(0,-2px)}80%{transform:translate(-1px,1px)}90%{transform:translate(1px,0)}}
body.screen-shake{animation:screenShake .3s ease}

/* ═══ MINI GAUGES IN TRAY (17) ═══ */
.tray-gauges{display:flex;align-items:center;gap:4px;padding:0 4px}
.tray-gauge{display:flex;flex-direction:column;align-items:center;gap:1px;cursor:default}
.tray-gauge-label{font-family:var(--font-pixel);font-size:.2rem;color:var(--dim);letter-spacing:.05em}
.tray-gauge-bar{width:16px;height:6px;background:rgba(0,0,0,.5);border:1px solid rgba(var(--active-rgb),.12);position:relative;overflow:hidden}
.tray-gauge-fill{height:100%;background:var(--green);transition:width .5s ease;box-shadow:0 0 3px var(--green)}
.tray-gauge-fill.warn{background:var(--orange)}
.tray-gauge-fill.crit{background:var(--red)}
.bar-vertical .tray-gauges{flex-direction:column}

/* ═══ DOCKER WIDGET (18) ═══ */
.docker-widget{display:flex;flex-direction:column;gap:3px;padding:6px;border:1px solid rgba(var(--active-rgb),.06);background:rgba(0,0,0,.15)}
.docker-row{display:flex;align-items:center;gap:6px;padding:3px 6px;font-family:var(--font-retro);font-size:.8rem;color:var(--text);border-bottom:1px solid rgba(var(--active-rgb),.04)}
.docker-row:last-child{border-bottom:none}
.docker-status{width:6px;height:6px;border-radius:50%;flex-shrink:0}
.docker-status.running{background:#39ff14;box-shadow:0 0 3px #39ff14}
.docker-status.stopped{background:#ff3b30}
.docker-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--font-ui);font-size:.65rem}
.docker-cpu,.docker-mem{font-family:var(--font-pixel);font-size:.3rem;color:var(--dim);min-width:30px;text-align:right}
.docker-header{font-family:var(--font-pixel);font-size:.35rem;color:var(--green);letter-spacing:.1em;padding:4px 6px;border-bottom:1px solid rgba(var(--active-rgb),.08)}

/* ═══ UPTIME TIMELINE (19) ═══ */
.uptime-widget{display:flex;flex-direction:column;gap:4px;padding:6px}
.uptime-row{display:flex;align-items:center;gap:6px}
.uptime-label{font-family:var(--font-ui);font-size:.6rem;color:var(--dim);min-width:60px;text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.uptime-bar{flex:1;height:8px;display:flex;gap:1px;background:rgba(0,0,0,.3);border:1px solid rgba(var(--active-rgb),.06)}
.uptime-seg{flex:1;transition:background .2s}
.uptime-seg.up{background:#39ff14}
.uptime-seg.down{background:#ff3b30}
.uptime-seg.partial{background:#ffb000}
.uptime-seg.unknown{background:rgba(var(--active-rgb),.06)}
.uptime-pct{font-family:var(--font-pixel);font-size:.3rem;color:var(--dim);min-width:28px;text-align:right}
.uptime-header{font-family:var(--font-pixel);font-size:.35rem;color:var(--green);letter-spacing:.1em;padding:4px 6px;border-bottom:1px solid rgba(var(--active-rgb),.08)}

/* ═══ WEATHER WIDGET (21) ═══ */
.weather-widget{display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px}
.weather-icon{font-size:2rem;line-height:1}
.weather-temp{font-family:var(--font-pixel);font-size:.6rem;color:var(--green)}
.weather-desc{font-family:var(--font-retro);font-size:.85rem;color:var(--dim)}
.weather-details{display:flex;gap:12px;font-family:var(--font-pixel);font-size:.3rem;color:var(--dim)}

/* ═══ QUICK NOTES (22) ═══ */
.notes-window{position:fixed;z-index:9500;width:280px;height:320px;display:none;flex-direction:column;border:1px solid rgba(var(--active-rgb),.15);background:rgba(12,12,22,.96);box-shadow:0 4px 20px rgba(0,0,0,.5)}
.notes-window.open{display:flex}
.notes-header{display:flex;align-items:center;justify-content:space-between;padding:6px 10px;border-bottom:1px solid rgba(var(--active-rgb),.1);background:rgba(var(--active-rgb),.02);cursor:move}
.notes-title{font-family:var(--font-pixel);font-size:.4rem;color:var(--green);letter-spacing:.1em}
.notes-close{background:none;border:none;color:var(--dim);font-family:var(--font-pixel);font-size:.4rem;cursor:pointer}
.notes-close:hover{color:var(--red)}
.notes-body{flex:1;padding:0}
.notes-textarea{width:100%;height:100%;background:transparent;border:none;color:var(--text);font-family:var(--font-retro);font-size:.95rem;padding:8px 10px;outline:none;resize:none;line-height:1.5}
.notes-textarea::placeholder{color:var(--dim)}

/* ═══ EXPANDABLE TILE DETAIL (34) ═══ */
.tile-detail{overflow:hidden;max-height:0;transition:max-height .3s ease,padding .3s ease;padding:0 12px;background:rgba(0,0,0,.2);border-top:1px solid rgba(var(--active-rgb),.06);font-family:var(--font-retro);font-size:.85rem;color:var(--dim)}
.tile-detail.expanded{max-height:120px;padding:8px 12px}
.tile-detail-row{display:flex;justify-content:space-between;padding:2px 0}
.tile-detail-row span:first-child{color:var(--dim)}
.tile-detail-row span:last-child{color:var(--text)}
.service-tile.expandable{flex-wrap:wrap}
.service-tile.expandable .tile-detail{width:100%;flex-basis:100%}

/* ═══ COLLAPSIBLE SERVICE GROUPS (35) ═══ */
.service-group-header{display:flex;align-items:center;gap:6px;padding:6px 12px;cursor:pointer;user-select:none;border-bottom:1px solid rgba(var(--active-rgb),.06);background:rgba(var(--active-rgb),.02);grid-column:1/-1}
.service-group-header:hover{background:rgba(var(--active-rgb),.04)}
.group-chevron{font-family:var(--font-pixel);font-size:.4rem;color:var(--dim);transition:transform .2s}
.group-chevron.collapsed{transform:rotate(-90deg)}
.group-label{font-family:var(--font-pixel);font-size:.35rem;color:var(--green);letter-spacing:.1em}
.group-count{font-family:var(--font-pixel);font-size:.3rem;color:var(--dim)}
.service-tile.group-hidden{display:none!important}

/* ═══ XP/LEVEL SYSTEM (40) ═══ */
.xp-bar-container{display:flex;align-items:center;gap:4px;padding:0 6px}
.xp-level{font-family:var(--font-pixel);font-size:.35rem;color:var(--yellow);text-shadow:0 0 4px rgba(255,230,0,.3)}
.xp-bar{width:50px;height:5px;background:rgba(0,0,0,.5);border:1px solid rgba(var(--active-rgb),.12);overflow:hidden}
.xp-bar-fill{height:100%;background:var(--yellow);box-shadow:0 0 3px var(--yellow);transition:width .5s ease}
.xp-tooltip{position:absolute;bottom:100%;left:50%;transform:translateX(-50%);margin-bottom:6px;padding:4px 8px;background:rgba(12,12,22,.95);border:1px solid rgba(var(--active-rgb),.15);font-family:var(--font-pixel);font-size:.3rem;color:var(--text);white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .15s;z-index:10}
.xp-bar-container:hover .xp-tooltip{opacity:1}

/* ═══ LAYOUT PROFILES (41) ═══ */
.profile-row{display:flex;gap:4px;flex-wrap:wrap}
.profile-btn{font-family:var(--font-pixel);font-size:.35rem;padding:4px 10px;border:1px solid rgba(var(--active-rgb),.15);background:rgba(var(--active-rgb),.04);color:var(--green);cursor:pointer;transition:all .2s;letter-spacing:.06em}
.profile-btn:hover{background:rgba(var(--active-rgb),.1);border-color:rgba(var(--active-rgb),.25)}
.profile-btn.active{background:rgba(var(--active-rgb),.15);border-color:rgba(var(--active-rgb),.35);box-shadow:0 0 6px rgba(var(--active-rgb),.15)}

/* ═══ RSS FEED TICKER (43) ═══ */
.rss-ticker{overflow:hidden;white-space:nowrap;padding:4px 10px;border-top:1px solid rgba(var(--active-rgb),.06);background:rgba(0,0,0,.2);font-family:var(--font-retro);font-size:.85rem;color:var(--dim)}
.rss-ticker-content{display:inline-block;animation:tickerScroll 30s linear infinite}
@keyframes tickerScroll{from{transform:translateX(100%)}to{transform:translateX(-100%)}}
.rss-ticker-item{margin-right:40px}
.rss-ticker-item a{color:var(--cyan);text-decoration:none}
.rss-ticker-item a:hover{text-decoration:underline}
.rss-ticker-source{color:var(--dim);font-family:var(--font-pixel);font-size:.3rem;margin-right:6px}

/* ═══ ALT ANIMATED BACKGROUNDS (46) ═══ */
.alt-bg-canvas{position:fixed;inset:0;z-index:0;pointer-events:none}

/* ═══ ENHANCED SNAP LAYOUTS (3) ═══ */
.snap-layout-option.wide{width:72px}

/* ═══ SPACE BATTLE EVENTS (38) ═══ */
@keyframes shieldFlash{0%{box-shadow:0 0 0 0 rgba(0,229,255,.5)}50%{box-shadow:0 0 20px 4px rgba(0,229,255,.3)}100%{box-shadow:0 0 0 0 transparent}}
@keyframes hitFlash{0%{box-shadow:0 0 0 0 rgba(255,59,48,.5)}50%{box-shadow:0 0 15px 3px rgba(255,59,48,.3)}100%{box-shadow:0 0 0 0 transparent}}
.shield-restored{animation:shieldFlash .6s ease-out}
.enemy-hit{animation:hitFlash .6s ease-out}

/* ═══ CUSTOM BOOT SEQUENCE (39) ═══ */
.boot-editor{width:100%;min-height:80px;background:rgba(0,0,0,.5);border:1px solid rgba(var(--active-rgb),.12);color:var(--green);font-family:var(--font-retro);font-size:.85rem;padding:6px 8px;outline:none;resize:vertical}

/* ═══ WEBHOOK EVENTS (42) ═══ */
.webhook-log{display:flex;flex-direction:column;gap:2px;max-height:150px;overflow-y:auto;padding:4px;scrollbar-width:thin;scrollbar-color:rgba(var(--active-rgb),.2) transparent}
.webhook-entry{display:flex;gap:6px;padding:4px 8px;font-family:var(--font-retro);font-size:.8rem;color:var(--text);border-bottom:1px solid rgba(var(--active-rgb),.04)}
.webhook-time{font-family:var(--font-pixel);font-size:.3rem;color:var(--dim);flex-shrink:0}
.webhook-source{font-family:var(--font-pixel);font-size:.3rem;color:var(--cyan);flex-shrink:0}
.webhook-msg{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ═══════════════════════════════════════════
   STARFIELD-OS v2.0 — VISUAL OVERHAUL
   ═══════════════════════════════════════════ */

/* ═══ AMBIENT BACKGROUND GLOW ═══ */
body::before{content:'';position:fixed;inset:0;z-index:-1;background:radial-gradient(ellipse 80% 60% at 50% 50%,rgba(var(--active-rgb),.02),transparent 70%);pointer-events:none;transition:background 1s ease}

/* ═══ WINDOW CORNER ACCENTS ═══ */
.card-stack::before,.card-stack::after{content:'';position:absolute;width:12px;height:12px;z-index:20;pointer-events:none;opacity:.3}
.card-stack::before{top:0;left:0;border-top:2px solid rgba(var(--active-rgb),.4);border-left:2px solid rgba(var(--active-rgb),.4)}
.card-stack::after{top:0;right:0;border-top:2px solid rgba(var(--active-rgb),.4);border-right:2px solid rgba(var(--active-rgb),.4)}

/* ═══ TILE CORNER MARKS ═══ */
.service-tile::after{content:'';position:absolute;top:3px;right:3px;width:6px;height:6px;border-top:1px solid rgba(var(--c-rgb),.15);border-right:1px solid rgba(var(--c-rgb),.15);opacity:0;transition:opacity .25s,border-color .25s;pointer-events:none}
.service-tile:hover::after{opacity:1;border-color:rgba(var(--c-rgb),.4)}

/* ═══ TOPBAR LOGO GLOW ═══ */
.topbar-logo{text-shadow:0 0 4px rgba(255,255,255,.3),0 0 12px rgba(var(--active-rgb),.2)}

/* ═══ ENHANCED TITLEBAR DOTS ═══ */
.tb-dot{box-shadow:none;transition:all .15s cubic-bezier(.4,0,.2,1)}
.tb-dot-red{background:#ff5f57;box-shadow:0 0 6px rgba(255,95,87,.3)}
.tb-dot-yellow{background:#febc2e;box-shadow:0 0 6px rgba(254,188,46,.3)}
.tb-dot-green{background:#28c840;box-shadow:0 0 6px rgba(40,200,64,.3)}
.tb-dot:hover{transform:scale(1.4)}

/* ═══ PANE DIVIDER GLOW ═══ */
.pane-divider{background:rgba(var(--active-rgb),.06);transition:all .2s}
.pane-divider:hover{background:rgba(var(--active-rgb),.25);box-shadow:0 0 8px rgba(var(--active-rgb),.15)}

/* ═══ ENHANCED SCROLLBAR ═══ */
.pane-content::-webkit-scrollbar{width:6px}
.pane-content::-webkit-scrollbar-track{background:rgba(0,0,0,.2)}
.pane-content::-webkit-scrollbar-thumb{background:rgba(var(--active-rgb),.2);border-radius:3px}
.pane-content::-webkit-scrollbar-thumb:hover{background:rgba(var(--active-rgb),.35)}

/* ═══ DASHBOARD STAT COLOR GLOW ═══ */
.dash-stat[data-color="green"] .dash-value{text-shadow:0 0 3px rgba(var(--active-rgb),.2)}
.dash-stat[data-color="orange"] .dash-value{text-shadow:0 0 6px rgba(255,145,0,.35),0 0 15px rgba(255,145,0,.15)}
.dash-stat[data-color="red"] .dash-value{text-shadow:0 0 6px rgba(255,59,48,.35),0 0 15px rgba(255,59,48,.15)}

/* ═══ SYSTEM READOUT ENHANCEMENT ═══ */
.sys-readout{border-color:rgba(var(--active-rgb),.12);background:rgba(0,0,0,.45)}
.sys-time{text-shadow:0 0 3px rgba(var(--active-rgb),.4),0 0 10px rgba(var(--active-rgb),.15)}

/* ═══ STATUS LED ENHANCED ═══ */
.status-led{box-shadow:0 0 4px var(--green),0 0 10px rgba(var(--active-rgb),.4),0 0 20px rgba(var(--active-rgb),.15)}

/* ═══ SELECTION COLOR ═══ */
::selection{background:rgba(var(--active-rgb),.25);color:var(--text)}

/* ═══ FOCUS RING FOR ACCESSIBILITY ═══ */
*:focus-visible{outline:2px solid rgba(var(--active-rgb),.4);outline-offset:2px}
input:focus-visible,textarea:focus-visible,select:focus-visible{outline:none}

/* ═══ SMOOTH HOVER FOR ALL INTERACTIVE ═══ */
.settings-btn,.settings-tab,.taskbar-btn,.dock-favs-item,.favs-sidebar-item,.favs-dock-item,.sp-item,.ctx-item,.ach-item,.shortcut-row{transition:all .2s cubic-bezier(.4,0,.2,1)}

/* ═══ USER WIDGET POLISH ═══ */
.user-widget{border-color:rgba(var(--active-rgb),.12);background:rgba(0,0,0,.35);transition:all .2s}
.user-widget:hover{border-color:rgba(var(--active-rgb),.2);background:rgba(0,0,0,.4)}
.logout-btn{transition:all .25s}

/* ═══ TOPBAR VERSION BADGE ENHANCEMENT ═══ */
.topbar-version{border-color:rgba(var(--active-rgb),.1);background:rgba(var(--active-rgb),.03);transition:all .25s}
.topbar-version:hover{border-color:rgba(var(--active-rgb),.3);background:rgba(var(--active-rgb),.06);text-shadow:0 0 4px rgba(var(--active-rgb),.3)}

/* ═══ SERVICE PICKER POLISH ═══ */
.service-picker-panel{border-radius:6px;overflow:hidden;box-shadow:var(--depth-3)}
.sp-item:hover{background:rgba(var(--active-rgb),.08)}

/* ═══ ACHIEVEMENT PANEL POLISH ═══ */
.achievements-panel{border-radius:6px;box-shadow:var(--depth-2)}
.achievement-toast{border-radius:4px}

/* ═══ DOCK SEPARATOR GLOW ═══ */
.dock-separator{background:linear-gradient(180deg,transparent,rgba(var(--active-rgb),.2),transparent)}

/* ═══ ENHANCED CARD ACCENT GLOW ═══ */
.main-card.card-active .card-body::before{height:60px;background:linear-gradient(180deg,rgba(var(--c-rgb),.06),transparent);opacity:.8}

/* ═══ STATUS BOARD ITEM HOVER ═══ */
.sb-item:hover{background:rgba(var(--c-rgb),.06)}
.sb-item:hover .sb-name{color:var(--text);text-shadow:0 0 4px rgba(var(--c-rgb),.2)}

/* ═══ DOCKER WIDGET HEADER GLOW ═══ */
.docker-header,.uptime-header{text-shadow:0 0 4px rgba(var(--active-rgb),.3)}
.docker-row:hover{background:rgba(var(--active-rgb),.03)}

/* ═══ WEATHER WIDGET POLISH ═══ */
.weather-icon{filter:drop-shadow(0 0 8px rgba(var(--active-rgb),.2))}
.weather-temp{text-shadow:0 0 4px rgba(var(--active-rgb),.3)}

/* ═══ NOTES WINDOW POLISH ═══ */
.notes-window{border-radius:6px;box-shadow:var(--depth-2)}

/* ═══ CUSTOM LINK MODAL POLISH ═══ */
.custom-link-panel{border-radius:6px;box-shadow:var(--depth-3)}

/* ═══ ADMIN PANEL POLISH ═══ */
.admin-panel{border-radius:6px;box-shadow:var(--depth-3)}

/* ═══ v2.0 PHASE 2 — DEEPER VISUAL CHANGES ═══ */

/* ═══ MAIN CARD BODY ATMOSPHERE ═══ */
.card-body{background:linear-gradient(180deg,rgba(0,0,0,.2),rgba(0,0,0,.12))}

/* ═══ SUB TAB BAR ENHANCEMENT ═══ */
.sub-tab-bar{border-top:1px solid rgba(var(--active-rgb),.1);border-bottom:1px solid rgba(var(--active-rgb),.1);background:rgba(0,0,0,.35)}

/* ═══ TILE REVEAL ENHANCEMENT ═══ */
.service-tile.tile-reveal{animation:tileRevealV2 .35s ease both}
@keyframes tileRevealV2{0%{opacity:0;transform:translateY(8px) scale(.98)}100%{opacity:1;transform:translateY(0) scale(1)}}
.tile-stagger{opacity:0;animation:tileSlideInV2 .3s ease-out forwards}
@keyframes tileSlideInV2{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}

/* ═══ DASHBOARD STAT HOVER GLOW ═══ */
.dash-stat:hover .dash-value{text-shadow:0 0 6px currentColor,0 0 15px rgba(var(--active-rgb),.2)}
.dash-stat:hover .dash-label{color:rgba(var(--active-rgb),.8)}

/* ═══ PROGRESS BAR GLOW ON HOVER ═══ */
.dash-stat:hover .dash-bar-fill{box-shadow:0 0 8px currentColor}

/* ═══ STATUS BOARD TREE LINES ═══ */
.sb-item::before{box-shadow:0 0 4px var(--sb-line)}
.sb-item::after{box-shadow:0 0 4px var(--sb-line)}

/* ═══ SEARCH INPUT GLOW ═══ */
.titlebar-search{border-color:rgba(var(--active-rgb),.12);background:rgba(0,0,0,.45)}
.titlebar-search:focus-within{border-color:rgba(var(--active-rgb),.35);box-shadow:0 0 12px rgba(var(--active-rgb),.1),inset 0 0 15px rgba(var(--active-rgb),.02)}

/* ═══ MODE TOGGLE ENHANCEMENT ═══ */
.mode-toggle{border-color:rgba(var(--active-rgb),.1);background:rgba(0,0,0,.4)}
.toggle-track{background:rgba(0,0,0,.6);border-color:rgba(var(--active-rgb),.12)}

/* ═══ CARD SERVICES GRID SPACING ═══ */
.card-services{gap:5px;padding:10px 14px}

/* ═══ FLOATING WINDOW FOCUS RING ═══ */
.floating-window:focus-within{border-color:rgba(var(--fw-rgb,57,255,20),.35)}

/* ═══ ACHIEVEMENT TROPHY GLOW ═══ */
.achievement-trophy{text-shadow:0 0 4px rgba(255,230,0,.4),0 0 12px rgba(255,230,0,.15)}

/* ═══ TOPBAR SEARCH PLACEHOLDER ═══ */
.titlebar-search input::placeholder{opacity:.2}

/* ═══ NAV DOT ENHANCEMENT ═══ */
.nav-dot{border-color:rgba(var(--active-rgb),.15)}
.nav-dot.active{box-shadow:0 0 6px var(--green),0 0 12px rgba(var(--active-rgb),.2)}

/* ═══ DOCK FAVS ITEM ENHANCEMENT ═══ */
.dock-favs-item{transition:all .2s cubic-bezier(.4,0,.2,1)}
.dock-favs-item:hover{box-shadow:0 2px 10px rgba(var(--c-rgb),.2),0 0 8px rgba(var(--c-rgb),.1)}

/* ═══ FOOTER KEYS POLISH ═══ */
.footer-keys kbd{border-color:rgba(var(--active-rgb),.15);background:rgba(var(--active-rgb),.03);text-shadow:0 0 3px rgba(var(--active-rgb),.3)}

/* ═══ PANE CONTENT GRADIENT ═══ */
.pane-content{background:linear-gradient(180deg,transparent,rgba(0,0,0,.05))}

/* ═══ WINDOW TITLEBAR DOTS SPACING ═══ */
.titlebar-dots{gap:6px}
.tb-dot{width:9px;height:9px}

/* ═══ TOPBAR LOGO LETTER-SPACING ═══ */
.topbar-logo{letter-spacing:.2em;font-size:.75rem}

/* ═══ CARD CHROMA SHIFT — SUBTLER ═══ */
.main-card.card-active{animation:cardChromaV2 6s ease-in-out infinite}
@keyframes cardChromaV2{0%,100%{filter:brightness(1)}40%{filter:brightness(1.02)}70%{filter:brightness(1.03)}}

/* ═══ v2.0 PHASE 3 — AMBIENT & DEPTH ═══ */

/* ═══ WINDOW INNER GLOW ═══ */
.card-stack::before,.card-stack::after{opacity:.25;transition:opacity .5s}
.card-stack:hover::before,.card-stack:hover::after{opacity:.4}

/* ═══ TOPBAR GRADIENT LINE ═══ */
.os-topbar::after{content:'';position:absolute;bottom:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(var(--active-rgb),.2),rgba(var(--active-rgb),.05),rgba(var(--active-rgb),.2),transparent);z-index:1}

/* ═══ TASKBAR GRADIENT LINE ═══ */
.os-taskbar::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(var(--active-rgb),.2),rgba(var(--active-rgb),.05),rgba(var(--active-rgb),.2),transparent);z-index:1}

/* ═══ TITLE GLOW ON HOVER ═══ */
.topbar-logo:hover{text-shadow:0 0 6px rgba(255,255,255,.4),0 0 16px rgba(var(--active-rgb),.3),0 0 30px rgba(var(--active-rgb),.1)}

/* ═══ SYSTEM CLOCK GLOW ═══ */
.sys-time{letter-spacing:.08em}
.sys-time .clock-colon{color:rgba(var(--active-rgb),.8)}

/* ═══ TRAY GAUGES ENHANCEMENT ═══ */
.tray-gauge-bar{border-color:rgba(var(--active-rgb),.15)}
.tray-gauge-fill{box-shadow:0 0 4px var(--green)}

/* ═══ SETTINGS TOGGLE ENHANCEMENT ═══ */
.settings-toggle-track{background:rgba(0,0,0,.6);border-color:rgba(var(--active-rgb),.1)}
.settings-toggle input:checked+.settings-toggle-track .settings-toggle-thumb{box-shadow:0 0 6px var(--green),0 0 12px rgba(var(--active-rgb),.2)}

/* ═══ SETTINGS BUTTON ACTION ═══ */
.settings-btn-action{transition:all .25s cubic-bezier(.4,0,.2,1)}
.settings-btn-action:hover{box-shadow:0 0 10px rgba(var(--active-rgb),.1)}

/* ═══ SERVICE STATUS DOT UPGRADE ═══ */
.service-status{width:6px;height:6px;transition:all .3s}
.service-status.status-up{box-shadow:0 0 4px var(--green),0 0 8px rgba(var(--active-rgb),.2)}
.service-status.status-down{box-shadow:0 0 4px var(--red),0 0 8px rgba(255,59,48,.2)}

/* ═══ HEALTH DOT UPGRADE ═══ */
.health-dot{width:7px;height:7px}
.health-dot.health-up{box-shadow:0 0 4px #39ff14,0 0 10px rgba(57,255,20,.3)}
.health-dot.health-down{box-shadow:0 0 6px #ff3b30,0 0 12px rgba(255,59,48,.3)}

/* ═══ PIN ICON GLOW ═══ */
.tile-pin.pinned{text-shadow:0 0 4px rgba(var(--c-rgb),.5),0 0 10px rgba(var(--c-rgb),.2)}

/* ═══ NOTIFICATION CENTER POLISH ═══ */
.notif-center{background:rgba(6,6,18,.97);backdrop-filter:blur(16px) saturate(1.3);box-shadow:-4px 0 20px rgba(0,0,0,.5)}
.notif-center-header{background:rgba(var(--active-rgb),.03)}
.notif-center-item{transition:all .2s}
.notif-center-item:hover{background:rgba(var(--active-rgb),.04);border-color:rgba(var(--active-rgb),.12)}

/* ═══ XP BAR GLOW ═══ */
.xp-bar-fill{box-shadow:0 0 4px var(--yellow),0 0 8px rgba(255,230,0,.2)}
.xp-level{text-shadow:0 0 3px rgba(255,230,0,.4),0 0 8px rgba(255,230,0,.15)}

/* ═══ FAVS DOCK POLISH ═══ */
.favs-dock{background:rgba(4,4,14,.92);backdrop-filter:blur(12px) saturate(1.2);border-color:rgba(var(--active-rgb),.18);box-shadow:var(--depth-2)}

/* ═══ FAVS ACCESS OVERLAY POLISH ═══ */
.favs-access-panel{border-radius:6px;box-shadow:var(--depth-3)}

/* ═══ SNAP PREVIEW ENHANCEMENT ═══ */
.snap-preview{background:rgba(var(--active-rgb),.08);border-color:rgba(var(--active-rgb),.25);box-shadow:0 0 20px rgba(var(--active-rgb),.06)}

/* ═══ PANE DROP PREVIEW ENHANCEMENT ═══ */
.pane-drop-preview{background:rgba(var(--active-rgb),.1);border-color:rgba(var(--active-rgb),.35)}

/* ═══ OUTER DROP PREVIEW ENHANCEMENT ═══ */
.outer-drop-preview{background:rgba(var(--active-rgb),.15);border-color:rgba(var(--active-rgb),.6)}

/* ═══ LAUNCHER SEARCH ENHANCEMENT ═══ */
.launcher-search{background:rgba(0,0,0,.55);border-color:rgba(var(--active-rgb),.18)}
.launcher-search:focus{border-color:rgba(var(--active-rgb),.45);box-shadow:0 0 25px rgba(var(--active-rgb),.12),0 0 50px rgba(var(--active-rgb),.04)}

/* ═══ UPTIME BAR SEGMENTS ═══ */
.uptime-seg.up{box-shadow:inset 0 0 2px rgba(57,255,20,.3)}
.uptime-seg.down{box-shadow:inset 0 0 2px rgba(255,59,48,.3)}

/* ═══ DOCKER STATUS DOTS ═══ */
.docker-status.running{box-shadow:0 0 4px #39ff14,0 0 8px rgba(57,255,20,.2)}

/* ═══ RSS TICKER POLISH ═══ */
.rss-ticker{background:rgba(0,0,0,.25);border-color:rgba(var(--active-rgb),.08)}
.rss-ticker-item a{text-shadow:0 0 4px rgba(0,229,255,.2)}

/* ═══ SCREENSAVER POLISH ═══ */
.screensaver-overlay{background:radial-gradient(ellipse at center,#020208,#000)}

/* ═══ QUICK NOTES TEXTAREA ═══ */
.notes-textarea{background:rgba(0,0,0,.15)}
.notes-textarea:focus{background:rgba(0,0,0,.25)}

/* ═══════════════════════════════════════════
   STARFIELD-OS v2.1 — DEEP SPACE COMMAND
   Full visual overhaul: cinematic sci-fi terminal
   ═══════════════════════════════════════════ */

/* ── V2.1 DESIGN TOKENS ── */
:root{
  --v21-void:#010108;
  --v21-abyss:#04041a;
  --v21-surface:rgba(8,8,32,.6);
  --v21-glass:rgba(12,12,40,.45);
  --v21-glow-spread:0 0 30px rgba(var(--active-rgb),.06),0 0 80px rgba(var(--active-rgb),.03);
  --v21-border-glow:0 0 1px rgba(var(--active-rgb),.3),inset 0 0 1px rgba(var(--active-rgb),.15);
  --v21-scan-opacity:.04;
  --v21-grid-line:rgba(var(--active-rgb),.03);
}

/* ── ATMOSPHERIC BODY ── */
body{background:var(--v21-void)}
body::before{background:
  radial-gradient(ellipse 60% 40% at 30% 20%,rgba(var(--active-rgb),.015),transparent 60%),
  radial-gradient(ellipse 50% 50% at 70% 80%,rgba(0,229,255,.008),transparent 50%),
  radial-gradient(ellipse 80% 60% at 50% 50%,rgba(var(--active-rgb),.012),transparent 70%);
  animation:v21ambientDrift 20s ease-in-out infinite alternate}
@keyframes v21ambientDrift{0%{opacity:.8}100%{opacity:1}}

/* ── HEX GRID PATTERN OVERLAY ── */
body::after{content:'';position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.012;
  background-image:
    linear-gradient(30deg,var(--v21-grid-line) 12%,transparent 12.5%,transparent 87%,var(--v21-grid-line) 87.5%,var(--v21-grid-line)),
    linear-gradient(150deg,var(--v21-grid-line) 12%,transparent 12.5%,transparent 87%,var(--v21-grid-line) 87.5%,var(--v21-grid-line)),
    linear-gradient(30deg,var(--v21-grid-line) 12%,transparent 12.5%,transparent 87%,var(--v21-grid-line) 87.5%,var(--v21-grid-line)),
    linear-gradient(150deg,var(--v21-grid-line) 12%,transparent 12.5%,transparent 87%,var(--v21-grid-line) 87.5%,var(--v21-grid-line)),
    linear-gradient(60deg,rgba(var(--active-rgb),.018) 25%,transparent 25.5%,transparent 75%,rgba(var(--active-rgb),.018) 75%,rgba(var(--active-rgb),.018)),
    linear-gradient(60deg,rgba(var(--active-rgb),.018) 25%,transparent 25.5%,transparent 75%,rgba(var(--active-rgb),.018) 75%,rgba(var(--active-rgb),.018));
  background-size:40px 70px;
  background-position:0 0,0 0,20px 35px,20px 35px,0 0,20px 35px}

/* ═══ LOGIN SCREEN — CINEMATIC TERMINAL ═══ */
.login-screen{background:
  radial-gradient(ellipse 50% 50% at 50% 45%,rgba(var(--active-rgb),.04),transparent 60%),
  radial-gradient(circle at 20% 80%,rgba(0,229,255,.02),transparent 40%),
  radial-gradient(circle at 80% 20%,rgba(255,45,149,.015),transparent 40%),
  var(--v21-void)}

.login-box{
  background:rgba(4,4,18,.92);
  border:1px solid rgba(var(--active-rgb),.12);
  box-shadow:
    0 0 0 1px rgba(var(--active-rgb),.06),
    0 20px 60px rgba(0,0,0,.8),
    0 0 120px rgba(var(--active-rgb),.04),
    inset 0 1px 0 rgba(255,255,255,.03),
    inset 0 0 40px rgba(var(--active-rgb),.02);
  position:relative;overflow:hidden;
  border-radius:2px}

/* Animated scan line on login */
.login-box::before{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 0%,rgba(var(--active-rgb),.015) 50%,transparent 100%);
  background-size:100% 4px;
  animation:v21loginScan 3s linear infinite}
@keyframes v21loginScan{0%{background-position:0 0}100%{background-position:0 200px}}

/* Corner brackets on login */
.login-box::after{content:'';position:absolute;inset:8px;z-index:0;pointer-events:none;
  border:1px solid rgba(var(--active-rgb),.06);
  clip-path:polygon(0 0,20px 0,20px 1px,1px 1px,1px 20px,0 20px,0 0,
    100% 0,100% 20px,calc(100% - 1px) 20px,calc(100% - 1px) 1px,calc(100% - 20px) 1px,calc(100% - 20px) 0,100% 0,
    100% 100%,calc(100% - 20px) 100%,calc(100% - 20px) calc(100% - 1px),calc(100% - 1px) calc(100% - 1px),calc(100% - 1px) calc(100% - 20px),100% calc(100% - 20px),100% 100%,
    0 100%,0 calc(100% - 20px),1px calc(100% - 20px),1px calc(100% - 1px),20px calc(100% - 1px),20px 100%,0 100%)}

.login-logo{text-shadow:0 0 8px rgba(var(--active-rgb),.8),0 0 30px rgba(var(--active-rgb),.4),0 0 60px rgba(var(--active-rgb),.15);
  position:relative;z-index:1}

.login-prompt{border:1px solid rgba(var(--active-rgb),.08);
  background:rgba(0,0,0,.5);position:relative;z-index:1;
  box-shadow:inset 0 0 20px rgba(0,0,0,.3)}
.login-prompt:focus-within{border-color:rgba(var(--active-rgb),.35);
  box-shadow:0 0 20px rgba(var(--active-rgb),.08),0 0 40px rgba(var(--active-rgb),.03),inset 0 0 20px rgba(var(--active-rgb),.03);
  background:rgba(0,0,0,.6)}

.login-label{font-family:var(--font-pixel);font-size:.45rem;color:rgba(var(--active-rgb),.6);letter-spacing:.12em;
  text-shadow:0 0 4px rgba(var(--active-rgb),.3);flex-shrink:0}

.login-action-btn{font-family:var(--font-pixel);font-size:.5rem;letter-spacing:.15em;
  color:var(--green);background:rgba(var(--active-rgb),.04);
  border:1px solid rgba(var(--active-rgb),.2);padding:10px 24px;
  cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);
  position:relative;z-index:1;overflow:hidden;text-shadow:0 0 4px rgba(var(--active-rgb),.3)}
.login-action-btn:hover{background:rgba(var(--active-rgb),.12);
  border-color:rgba(var(--active-rgb),.45);
  box-shadow:0 0 20px rgba(var(--active-rgb),.15),0 0 40px rgba(var(--active-rgb),.05);
  text-shadow:0 0 8px rgba(var(--active-rgb),.6)}
.login-action-btn::before{content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,rgba(var(--active-rgb),.06),transparent);
  transform:translateX(-100%);transition:transform .5s}
.login-action-btn:hover::before{transform:translateX(100%)}

.login-link-btn{font-family:var(--font-pixel);font-size:.4rem;color:var(--dim);
  background:none;border:1px solid rgba(var(--active-rgb),.08);padding:8px 16px;
  cursor:pointer;letter-spacing:.1em;transition:all .25s;position:relative;z-index:1}
.login-link-btn:hover{color:var(--cyan);border-color:rgba(0,229,255,.2);
  text-shadow:0 0 4px rgba(0,229,255,.3)}

.login-actions{display:flex;gap:12px;align-items:center;margin-top:4px;position:relative;z-index:1}

.login-pending{position:relative;z-index:1}

/* ═══ TOPBAR — COMMAND BRIDGE ═══ */
.os-topbar{
  background:linear-gradient(180deg,rgba(4,4,20,.96),rgba(2,2,14,.94));
  border-bottom:none;
  box-shadow:0 2px 8px rgba(0,0,0,.5),0 0 30px rgba(0,0,0,.3)}
.os-topbar::after{height:2px;
  background:linear-gradient(90deg,
    transparent 5%,
    rgba(var(--active-rgb),.08) 15%,
    rgba(var(--active-rgb),.25) 30%,
    rgba(var(--active-rgb),.5) 50%,
    rgba(var(--active-rgb),.25) 70%,
    rgba(var(--active-rgb),.08) 85%,
    transparent 95%);
  box-shadow:0 0 8px rgba(var(--active-rgb),.15),0 0 20px rgba(var(--active-rgb),.06)}

.topbar-logo{font-size:.8rem;letter-spacing:.25em;
  background:linear-gradient(180deg,#fff,rgba(var(--active-rgb),.7));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  filter:drop-shadow(0 0 8px rgba(var(--active-rgb),.4)) drop-shadow(0 0 20px rgba(var(--active-rgb),.15))}
.topbar-logo:hover{filter:drop-shadow(0 0 12px rgba(var(--active-rgb),.6)) drop-shadow(0 0 30px rgba(var(--active-rgb),.25))}

.topbar-version{background:rgba(var(--active-rgb),.04);border-color:rgba(var(--active-rgb),.15);
  position:relative;overflow:hidden}
.topbar-version::before{content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,rgba(var(--active-rgb),.06),transparent);
  animation:v21versionShimmer 4s ease-in-out infinite}
@keyframes v21versionShimmer{0%,100%{transform:translateX(-100%)}50%{transform:translateX(100%)}}

/* ═══ TASKBAR — DOCK STATION ═══ */
.os-taskbar{
  background:linear-gradient(0deg,rgba(4,4,20,.96),rgba(2,2,14,.94));
  border-top:none;
  box-shadow:0 -2px 8px rgba(0,0,0,.5),0 0 30px rgba(0,0,0,.3)}
.os-taskbar::before{height:2px;
  background:linear-gradient(90deg,
    transparent 5%,
    rgba(var(--active-rgb),.08) 15%,
    rgba(var(--active-rgb),.25) 30%,
    rgba(var(--active-rgb),.5) 50%,
    rgba(var(--active-rgb),.25) 70%,
    rgba(var(--active-rgb),.08) 85%,
    transparent 95%);
  box-shadow:0 0 8px rgba(var(--active-rgb),.15),0 0 20px rgba(var(--active-rgb),.06)}

.taskbar-btn{border-color:rgba(var(--active-rgb),.06);
  background:rgba(var(--active-rgb),.02);transition:all .2s}
.taskbar-btn:hover{background:rgba(var(--active-rgb),.1);
  border-color:rgba(var(--active-rgb),.25);
  box-shadow:0 0 12px rgba(var(--active-rgb),.1),inset 0 0 12px rgba(var(--active-rgb),.03)}
.taskbar-btn.active{background:rgba(var(--active-rgb),.12);
  border-color:rgba(var(--active-rgb),.3);
  border-bottom:2px solid var(--green);
  box-shadow:0 0 16px rgba(var(--active-rgb),.12),0 -2px 8px rgba(var(--active-rgb),.06)}

/* ═══ WINDOW — COMMAND VIEWPORT ═══ */
.card-stack{
  background:rgba(3,3,16,.94);
  border:1px solid rgba(var(--active-rgb),.12);
  box-shadow:
    0 0 0 1px rgba(var(--active-rgb),.04),
    0 12px 40px rgba(0,0,0,.7),
    0 0 80px rgba(0,0,0,.4),
    0 0 120px rgba(var(--active-rgb),.03),
    inset 0 1px 0 rgba(255,255,255,.03),
    inset 0 0 0 1px rgba(var(--active-rgb),.04);
  backdrop-filter:blur(16px) saturate(1.3)}

/* Animated corner brackets */
.card-stack::before,.card-stack::after{width:16px;height:16px;opacity:.4;
  transition:all .5s cubic-bezier(.4,0,.2,1)}
.card-stack::before{border-top:2px solid rgba(var(--active-rgb),.5);border-left:2px solid rgba(var(--active-rgb),.5);
  box-shadow:-2px -2px 8px rgba(var(--active-rgb),.08)}
.card-stack::after{border-top:2px solid rgba(var(--active-rgb),.5);border-right:2px solid rgba(var(--active-rgb),.5);
  box-shadow:2px -2px 8px rgba(var(--active-rgb),.08)}
.card-stack:hover::before,.card-stack:hover::after{opacity:.7;width:20px;height:20px}

/* ═══ TITLEBAR — ENHANCED CHROME ═══ */
.window-titlebar{
  background:linear-gradient(180deg,rgba(8,8,24,.8),rgba(4,4,16,.7));
  border-bottom:1px solid rgba(var(--active-rgb),.1);
  box-shadow:0 1px 0 rgba(255,255,255,.02),inset 0 -1px 0 rgba(0,0,0,.4)}
.window-titlebar::after{height:1px;
  background:linear-gradient(90deg,transparent,rgba(var(--active-rgb),.2),rgba(0,229,255,.1),rgba(var(--active-rgb),.2),transparent);
  box-shadow:0 0 6px rgba(var(--active-rgb),.1)}

/* ═══ TAB BAR — ENHANCED ═══ */
.browser-tab-bar{background:rgba(0,0,0,.5);border-bottom:1px solid rgba(var(--active-rgb),.08);
  position:relative}
.browser-tab-bar::after{content:'';position:absolute;bottom:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(var(--active-rgb),.08),transparent)}

.browser-tab{border-color:rgba(var(--active-rgb),.04);
  transition:all .25s cubic-bezier(.4,0,.2,1)}
.browser-tab:hover{background:rgba(var(--active-rgb),.06);
  border-color:rgba(var(--active-rgb),.12);
  text-shadow:0 0 4px rgba(var(--active-rgb),.2)}

.browser-tab.tab-active{
  background:linear-gradient(180deg,rgba(var(--c-rgb),.08),rgba(var(--c-rgb),.03));
  border-color:rgba(var(--c-rgb),.2);
  border-top:2px solid rgba(var(--c-rgb),.7);
  box-shadow:0 -2px 12px rgba(var(--c-rgb),.12),inset 0 1px 8px rgba(var(--c-rgb),.04)}
.browser-tab.tab-active::after{height:2px;
  background:linear-gradient(90deg,transparent,var(--c),transparent);
  box-shadow:0 0 12px var(--c),0 0 24px rgba(var(--c-rgb),.25)}

/* ═══ SERVICE TILES — HOLOGRAPHIC CARDS ═══ */
.service-tile{
  border:1px solid rgba(var(--c-rgb),.06);
  border-left:3px solid rgba(var(--c-rgb),.2);
  background:linear-gradient(135deg,rgba(var(--c-rgb),.025),transparent 50%,rgba(var(--c-rgb),.008));
  position:relative;transition:all .3s cubic-bezier(.4,0,.2,1)}

.service-tile:hover,.service-tile.focused{
  background:linear-gradient(135deg,rgba(var(--c-rgb),.1),rgba(var(--c-rgb),.04) 50%,rgba(var(--c-rgb),.02));
  border-color:rgba(var(--c-rgb),.3);
  border-left-color:var(--c);
  transform:translateX(3px);
  box-shadow:
    0 4px 16px rgba(var(--c-rgb),.1),
    0 0 30px rgba(var(--c-rgb),.04),
    inset 0 0 20px rgba(var(--c-rgb),.03),
    inset 0 1px 0 rgba(255,255,255,.03)}

/* Tile scan line on hover */
.service-tile:hover::before{width:100%;
  box-shadow:0 0 10px var(--c),0 0 20px rgba(var(--c-rgb),.25),0 0 40px rgba(var(--c-rgb),.1)}

/* Corner accent on hover */
.service-tile::after{width:8px;height:8px;
  border-top:1px solid rgba(var(--c-rgb),.2);border-right:1px solid rgba(var(--c-rgb),.2)}
.service-tile:hover::after{opacity:1;border-color:rgba(var(--c-rgb),.6);
  box-shadow:2px -2px 6px rgba(var(--c-rgb),.1)}

/* ═══ TILE ICON — GLOWING FRAME ═══ */
.tile-icon{
  border:1px solid rgba(var(--c-rgb),.15);
  background:rgba(var(--c-rgb),.04);
  box-shadow:inset 0 0 8px rgba(var(--c-rgb),.03);
  position:relative}
.tile-icon::before{content:'';position:absolute;inset:-2px;
  border:1px solid rgba(var(--c-rgb),.04);pointer-events:none;opacity:0;transition:opacity .3s}
.service-tile:hover .tile-icon{
  border-color:rgba(var(--c-rgb),.5);
  background:rgba(var(--c-rgb),.1);
  box-shadow:0 0 16px rgba(var(--c-rgb),.2),0 0 30px rgba(var(--c-rgb),.06),inset 0 0 12px rgba(var(--c-rgb),.06)}
.service-tile:hover .tile-icon::before{opacity:1;border-color:rgba(var(--c-rgb),.15)}
.service-tile:hover .tile-icon svg{
  filter:drop-shadow(0 0 4px rgba(var(--c-rgb),.5)) drop-shadow(0 0 10px rgba(var(--c-rgb),.2))}

/* ═══ TILE TYPOGRAPHY ═══ */
.tile-name{letter-spacing:.05em}
.service-tile:hover .tile-name{color:#fff;
  text-shadow:0 0 4px rgba(255,255,255,.2),0 0 10px rgba(var(--c-rgb),.15)}
.service-tile:hover .tile-desc{color:rgba(var(--c-rgb),.6);
  text-shadow:0 0 4px rgba(var(--c-rgb),.1)}

/* ═══ DASHBOARD — TACTICAL DISPLAY ═══ */
.dashboard-grid{gap:5px;padding:10px}

.dash-stat{
  background:linear-gradient(180deg,rgba(var(--active-rgb),.04),rgba(var(--active-rgb),.01));
  border:1px solid rgba(var(--active-rgb),.1);
  position:relative;overflow:hidden;
  transition:all .3s cubic-bezier(.4,0,.2,1)}
.dash-stat::before{
  background:linear-gradient(90deg,transparent 20%,rgba(var(--active-rgb),.12) 50%,transparent 80%);
  height:1px}
.dash-stat:hover{
  background:linear-gradient(180deg,rgba(var(--active-rgb),.08),rgba(var(--active-rgb),.03));
  border-color:rgba(var(--active-rgb),.22);
  box-shadow:0 0 20px rgba(var(--active-rgb),.04),inset 0 0 20px rgba(var(--active-rgb),.02)}

/* Value glow by state */
.dash-value{font-size:1.7rem;
  text-shadow:0 0 4px rgba(255,255,255,.15),0 0 10px rgba(var(--active-rgb),.1)}
.dash-stat:hover .dash-value{
  text-shadow:0 0 8px currentColor,0 0 20px rgba(var(--active-rgb),.25)}
.dash-label{color:rgba(var(--active-rgb),.65);
  text-shadow:0 0 3px rgba(var(--active-rgb),.15)}

/* Animated bar glow */
.dash-bar{height:4px;background:rgba(var(--active-rgb),.04);position:relative}
.dash-bar-fill{position:relative}
.dash-bar-fill::after{content:'';position:absolute;right:0;top:-1px;bottom:-1px;width:4px;
  background:currentColor;filter:blur(3px);opacity:.6}

/* Sparkline enhancement */
.dash-spark{opacity:.7}
.dash-spark .spark-bar{border-radius:1px 1px 0 0;
  box-shadow:0 0 2px currentColor;opacity:.8}
.dash-stat:hover .dash-spark{opacity:1}
.dash-stat:hover .dash-spark .spark-bar{box-shadow:0 0 4px currentColor}

/* ═══ STATUS BOARD — TACTICAL OVERVIEW ═══ */
.status-board{background:rgba(0,0,0,.2);
  border-top:1px solid rgba(var(--active-rgb),.06);
  position:relative}
.status-board::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(var(--active-rgb),.1),transparent)}

/* ═══ SERVICES STAT — ENHANCED ═══ */
.svc-led{transition:all .4s;width:7px;height:7px}
.svc-led.led-ok{box-shadow:0 0 6px var(--green),0 0 14px rgba(var(--active-rgb),.4),0 0 28px rgba(var(--active-rgb),.15)}
.svc-message{text-shadow:0 0 3px currentColor}

/* ═══ WIDGET ROW — ENHANCED ═══ */
.dash-widgets-row>*{
  background:linear-gradient(180deg,rgba(var(--active-rgb),.035),rgba(var(--active-rgb),.01));
  border:1px solid rgba(var(--active-rgb),.08);
  transition:all .3s}
.dash-widgets-row>*:hover{
  border-color:rgba(var(--active-rgb),.18);
  box-shadow:0 0 15px rgba(var(--active-rgb),.04)}

/* Docker rows */
.docker-row{border-bottom-color:rgba(var(--active-rgb),.03);
  transition:all .15s;padding:3px 6px}
.docker-row:hover{background:rgba(var(--active-rgb),.05);
  box-shadow:inset 2px 0 0 rgba(var(--active-rgb),.2)}
.docker-header{text-shadow:0 0 6px rgba(var(--active-rgb),.4);
  border-bottom-color:rgba(var(--active-rgb),.1)}

/* Uptime segments */
.uptime-seg{transition:all .15s}
.uptime-seg.up{background:rgba(var(--active-rgb),.8);
  box-shadow:inset 0 0 2px rgba(var(--active-rgb),.5)}
.uptime-row:hover .uptime-seg.up{background:var(--green);
  box-shadow:0 0 4px rgba(var(--active-rgb),.3)}

/* ═══ WINDOW FOOTER — ENHANCED ═══ */
.window-footer{
  background:linear-gradient(0deg,rgba(8,8,24,.8),rgba(4,4,16,.6));
  border-top:1px solid rgba(var(--active-rgb),.08);
  position:relative}
.window-footer::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(var(--active-rgb),.15),transparent)}

.footer-keys kbd{
  background:rgba(var(--active-rgb),.05);
  border:1px solid rgba(var(--active-rgb),.18);
  color:var(--green);
  box-shadow:0 1px 0 rgba(0,0,0,.3),inset 0 0 4px rgba(var(--active-rgb),.03);
  text-shadow:0 0 4px rgba(var(--active-rgb),.3)}

/* ═══ SEARCH — COMMAND INPUT ═══ */
.titlebar-search{
  background:rgba(0,0,0,.5);
  border:1px solid rgba(var(--active-rgb),.1);
  position:relative;overflow:hidden}
.titlebar-search::before{content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,rgba(var(--active-rgb),.02),transparent);
  transform:translateX(-100%);transition:transform 1s;pointer-events:none}
.titlebar-search:focus-within{
  border-color:rgba(var(--active-rgb),.4);
  box-shadow:0 0 16px rgba(var(--active-rgb),.1),0 0 40px rgba(var(--active-rgb),.03),
    inset 0 0 20px rgba(var(--active-rgb),.03)}
.titlebar-search:focus-within::before{transform:translateX(100%);transition:transform 2s}

/* ═══ SYSTEM READOUT — ENHANCED ═══ */
.sys-readout{
  border:1px solid rgba(var(--active-rgb),.12);
  background:rgba(0,0,0,.5);
  box-shadow:inset 0 0 10px rgba(0,0,0,.3);position:relative}
.sys-readout::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(var(--active-rgb),.15),transparent)}
.sys-time{font-size:1.1rem;letter-spacing:.1em;
  text-shadow:0 0 4px rgba(var(--active-rgb),.5),0 0 12px rgba(var(--active-rgb),.2)}

/* ═══ NOTIFICATION TOASTS — HOLOGRAPHIC ═══ */
.notification-toast{
  background:rgba(6,6,22,.96);
  border:1px solid rgba(var(--active-rgb),.2)!important;
  box-shadow:0 4px 20px rgba(0,0,0,.6),0 0 30px rgba(var(--active-rgb),.04),
    inset 0 1px 0 rgba(255,255,255,.03)!important;
  border-radius:2px!important;position:relative;overflow:hidden}
.notification-toast::before{content:'';position:absolute;left:0;top:0;bottom:0;width:2px;
  background:var(--green);box-shadow:0 0 8px var(--green),0 0 16px rgba(var(--active-rgb),.3)}

/* ═══ SETTINGS — ENHANCED PANEL ═══ */
.settings-panel{
  background:rgba(4,4,18,.97);
  border:1px solid rgba(var(--active-rgb),.15);
  box-shadow:0 20px 60px rgba(0,0,0,.7),0 0 100px rgba(var(--active-rgb),.03)}
.settings-header{
  background:linear-gradient(180deg,rgba(var(--active-rgb),.04),rgba(var(--active-rgb),.01));
  border-bottom:1px solid rgba(var(--active-rgb),.12)}
.settings-title{text-shadow:0 0 10px rgba(var(--active-rgb),.5),0 0 20px rgba(var(--active-rgb),.15)}

.settings-row{border-bottom:1px solid rgba(var(--active-rgb),.04);
  padding:10px 0;transition:all .2s}
.settings-row:hover{background:rgba(var(--active-rgb),.02)}

.settings-tab{transition:all .25s}
.settings-tab.active{text-shadow:0 0 8px rgba(var(--active-rgb),.5);
  border-bottom:2px solid var(--green);
  box-shadow:0 2px 0 rgba(var(--active-rgb),.2)}

/* ═══ CRT EFFECTS — DEEPER ═══ */
.crt-overlay{background:repeating-linear-gradient(0deg,
  rgba(0,0,0,.06) 0px,rgba(0,0,0,.06) 1px,transparent 1px,transparent 2.5px)}
.crt-vignette{background:radial-gradient(ellipse at center,transparent 50%,rgba(0,0,0,.5) 100%)}
.crt-scanline{background:linear-gradient(180deg,
  rgba(255,255,255,0) 0%,
  rgba(var(--active-rgb),.025) 40%,
  rgba(255,255,255,.035) 50%,
  rgba(0,0,0,.04) 100%);
  animation:scanlineMove 6s linear infinite;opacity:.8}

/* ═══ FLOATING WINDOWS — ENHANCED ═══ */
.floating-window{
  box-shadow:0 8px 30px rgba(0,0,0,.6),0 0 60px rgba(0,0,0,.3),
    0 0 80px rgba(var(--active-rgb),.02);
  border:1px solid rgba(var(--active-rgb),.12)}
.floating-window:hover{border-color:rgba(var(--active-rgb),.2)}

/* ═══ APP LAUNCHER — ENHANCED ═══ */
.launcher-overlay{
  background:rgba(2,2,8,.96);
  backdrop-filter:blur(24px) saturate(1.3)}
.launcher-search{
  background:rgba(0,0,0,.6);
  border:1px solid rgba(var(--active-rgb),.15);
  box-shadow:inset 0 0 20px rgba(0,0,0,.3)}
.launcher-search:focus{
  border-color:rgba(var(--active-rgb),.5);
  box-shadow:0 0 30px rgba(var(--active-rgb),.1),0 0 60px rgba(var(--active-rgb),.04),
    inset 0 0 20px rgba(var(--active-rgb),.03)}
.launcher-tile{
  border:1px solid rgba(var(--active-rgb),.06);
  background:rgba(var(--active-rgb),.02)}
.launcher-tile:hover{
  background:rgba(var(--active-rgb),.12);
  border-color:rgba(var(--active-rgb),.3);
  transform:translateY(-6px);
  box-shadow:0 12px 28px rgba(0,0,0,.4),0 0 20px rgba(var(--active-rgb),.08)}

/* ═══ WINDOW SWITCHER — ENHANCED ═══ */
.window-switcher{background:rgba(2,2,8,.9);
  backdrop-filter:blur(20px) saturate(1.3)}
.window-switcher-item{
  border:1px solid rgba(var(--active-rgb),.1);
  background:rgba(6,6,22,.9)}
.window-switcher-item:hover,.window-switcher-item.active{
  border-color:rgba(var(--active-rgb),.5);
  background:rgba(var(--active-rgb),.1);
  box-shadow:0 0 24px rgba(var(--active-rgb),.12),0 0 48px rgba(var(--active-rgb),.04),
    inset 0 0 20px rgba(var(--active-rgb),.04)}

/* ═══ MODE TOGGLE — ENHANCED ═══ */
.mode-toggle{border-color:rgba(var(--active-rgb),.12);
  background:rgba(0,0,0,.45)}
.toggle-track{background:rgba(0,0,0,.7);
  border:1px solid rgba(var(--active-rgb),.15)}
.toggle-switch input:checked~.toggle-track .toggle-thumb{
  box-shadow:0 0 6px var(--green),0 0 12px rgba(var(--active-rgb),.3)}

/* ═══ PANE DIVIDERS — GLOWING ═══ */
.pane-divider{background:rgba(var(--active-rgb),.05)}
.pane-divider:hover{background:rgba(var(--active-rgb),.3);
  box-shadow:0 0 12px rgba(var(--active-rgb),.15),0 0 24px rgba(var(--active-rgb),.05)}

/* ═══ SCROLLBARS — THEMED ═══ */
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-track{background:rgba(0,0,0,.2)}
::-webkit-scrollbar-thumb{background:rgba(var(--active-rgb),.15);border-radius:2px}
::-webkit-scrollbar-thumb:hover{background:rgba(var(--active-rgb),.3)}
*{scrollbar-width:thin;scrollbar-color:rgba(var(--active-rgb),.15) transparent}

/* ═══ BOOT SEQUENCE — CINEMATIC ═══ */
.boot-screen{background:
  radial-gradient(ellipse 60% 50% at 50% 50%,rgba(var(--active-rgb),.025),transparent 60%),
  var(--v21-void)}
.boot-logo{text-shadow:0 0 10px rgba(var(--active-rgb),.9),0 0 30px rgba(var(--active-rgb),.5),
  0 0 60px rgba(var(--active-rgb),.2),0 0 100px rgba(var(--active-rgb),.08)}
.boot-content{text-shadow:0 0 6px rgba(var(--active-rgb),.7),0 0 18px rgba(var(--active-rgb),.3)}
.boot-progress-fill{background:linear-gradient(90deg,var(--green),var(--cyan),var(--green));
  background-size:200% 100%;animation:v21bootGradient 2s linear infinite;
  box-shadow:0 0 8px var(--green),0 0 16px rgba(var(--active-rgb),.5),0 0 32px rgba(var(--active-rgb),.2)}
@keyframes v21bootGradient{0%{background-position:0% 0%}100%{background-position:200% 0%}}

/* ═══ ADMIN PANEL — ENHANCED ═══ */
.admin-panel{background:rgba(4,4,18,.97);
  border:1px solid rgba(var(--active-rgb),.15);
  box-shadow:0 20px 60px rgba(0,0,0,.7),0 0 80px rgba(var(--active-rgb),.03)}

/* ═══ NOTIFICATION CENTER — ENHANCED ═══ */
.notif-center{background:rgba(4,4,18,.97);
  border-left:1px solid rgba(var(--active-rgb),.1);
  box-shadow:-8px 0 30px rgba(0,0,0,.5),-2px 0 40px rgba(var(--active-rgb),.02)}
.notif-center-item:hover{background:rgba(var(--active-rgb),.06);
  border-color:rgba(var(--active-rgb),.15);
  box-shadow:inset 2px 0 0 rgba(var(--active-rgb),.2)}

/* ═══ HEALTH DOTS — VIVID ═══ */
.health-dot.health-up{box-shadow:0 0 5px #39ff14,0 0 12px rgba(57,255,20,.4),0 0 24px rgba(57,255,20,.12)}
.health-dot.health-down{box-shadow:0 0 5px #ff3b30,0 0 12px rgba(255,59,48,.4),0 0 24px rgba(255,59,48,.12)}

/* ═══ CONTEXT MENU — ENHANCED ═══ */
.ctx-menu{background:rgba(6,6,22,.97)!important;
  border:1px solid rgba(var(--active-rgb),.15)!important;
  box-shadow:0 8px 30px rgba(0,0,0,.6),0 0 40px rgba(var(--active-rgb),.03)!important;
  backdrop-filter:blur(16px)!important}

/* ═══ DOCK FAVS — ENHANCED ═══ */
.dock-favs-item{transition:all .25s cubic-bezier(.4,0,.2,1)}
.dock-favs-item:hover{transform:scale(1.2) translateY(-3px);
  box-shadow:0 4px 14px rgba(var(--c-rgb),.25),0 0 12px rgba(var(--c-rgb),.1);
  background:rgba(var(--c-rgb),.1);border-color:rgba(var(--c-rgb),.3)}

/* ═══ TRAY GAUGES — ENHANCED ═══ */
.tray-gauge-bar{border:1px solid rgba(var(--active-rgb),.18);
  background:rgba(0,0,0,.6)}
.tray-gauge-fill{box-shadow:0 0 6px var(--green),inset 0 0 3px rgba(var(--active-rgb),.3)}

/* ═══ DATA STREAM ANIMATION (subtle) ═══ */
@keyframes v21dataStream{0%{background-position:0 0}100%{background-position:0 200px}}
.card-body{position:relative}
.card-body::before{content:'';position:absolute;inset:0;pointer-events:none;z-index:0;
  background:repeating-linear-gradient(180deg,transparent,transparent 4px,rgba(var(--active-rgb),.008) 4px,rgba(var(--active-rgb),.008) 5px);
  animation:v21dataStream 8s linear infinite;opacity:.5}

/* ═══ CARD SERVICES GRID ═══ */
.card-services{position:relative;z-index:1}
.dashboard-grid{position:relative;z-index:1}

/* ═══ CUSTOM LINK MODAL — ENHANCED ═══ */
.custom-link-panel{background:rgba(4,4,18,.97);
  border:1px solid rgba(var(--active-rgb),.15);
  box-shadow:0 20px 60px rgba(0,0,0,.7),0 0 80px rgba(var(--active-rgb),.03)}

/* ═══ QUICK NOTES — ENHANCED ═══ */
.notes-window{background:rgba(6,6,22,.97);
  border:1px solid rgba(var(--active-rgb),.12);
  box-shadow:0 8px 30px rgba(0,0,0,.6),0 0 40px rgba(var(--active-rgb),.03)}

/* ═══ XP BAR — GLOWING ═══ */
.xp-bar{border:1px solid rgba(255,230,0,.15);background:rgba(0,0,0,.5)}
.xp-bar-fill{box-shadow:0 0 6px var(--yellow),0 0 12px rgba(255,230,0,.3)}

/* ═══ VIRTUAL DESKTOP DOTS — ENHANCED ═══ */
.vd-dot{border:1px solid rgba(var(--active-rgb),.25);transition:all .25s}
.vd-dot.active{box-shadow:0 0 6px rgba(var(--active-rgb),.4),0 0 14px rgba(var(--active-rgb),.15);
  background:rgba(var(--active-rgb),.35)}
.vd-dot:hover{box-shadow:0 0 8px rgba(var(--active-rgb),.3)}

/* ═══ RSS TICKER — ENHANCED ═══ */
.rss-ticker{background:rgba(0,0,0,.3);
  border-top:1px solid rgba(var(--active-rgb),.06);
  position:relative}
.rss-ticker::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(0,229,255,.1),transparent)}

/* ═══ SELECTION — THEMED ═══ */
::selection{background:rgba(var(--active-rgb),.2);color:#fff}

/* ═══ FOCUS — ACCESSIBLE BUT THEMED ═══ */
*:focus-visible{outline:1px solid rgba(var(--active-rgb),.5);outline-offset:2px;
  box-shadow:0 0 8px rgba(var(--active-rgb),.15)}

/* ═══ USER WIDGET — ENHANCED ═══ */
.user-widget{background:rgba(0,0,0,.4);border:1px solid rgba(var(--active-rgb),.1);
  transition:all .25s}
.user-widget:hover{border-color:rgba(var(--active-rgb),.25);
  background:rgba(var(--active-rgb),.04)}

/* ═══ ACHIEVEMENTS — ENHANCED ═══ */
.titlebar-achievements{border:1px solid rgba(255,230,0,.1);
  background:rgba(255,230,0,.02);transition:all .25s}
.titlebar-achievements:hover{border-color:rgba(255,230,0,.25);
  background:rgba(255,230,0,.05);box-shadow:0 0 12px rgba(255,230,0,.06)}

/* ═══ SERVICE PICKER — ENHANCED ═══ */
.service-picker-panel{background:rgba(4,4,18,.97)!important;
  border:1px solid rgba(var(--active-rgb),.15)!important;
  box-shadow:0 12px 40px rgba(0,0,0,.7),0 0 60px rgba(var(--active-rgb),.03)!important}

/* ═══ PIN ICON — ENHANCED ═══ */
.tile-pin{transition:all .25s}
.tile-pin:hover{text-shadow:0 0 6px rgba(var(--c-rgb),.6),0 0 14px rgba(var(--c-rgb),.3)}

/* ═══ SCREENSAVER — ENHANCED ═══ */
.screensaver-overlay{background:radial-gradient(ellipse at center,rgba(2,2,8,.98),#000)}

/* ═══ SNAP ZONES — VIVID ═══ */
.snap-zone.active{background:rgba(var(--active-rgb),.1);
  border-color:rgba(var(--active-rgb),.5);
  box-shadow:inset 0 0 30px rgba(var(--active-rgb),.06)}
.snap-preview.visible{
  background:rgba(var(--active-rgb),.1);
  border:2px solid rgba(var(--active-rgb),.35);
  box-shadow:0 0 24px rgba(var(--active-rgb),.08),inset 0 0 20px rgba(var(--active-rgb),.04)}