/* STREET_OS v3.4 | glacier-blue OS redesign with living procedural galaxy */
:root{
 --bg:#041126;--glass:rgba(5,18,36,.91);--glass2:rgba(10,31,56,.91);
 --panel:#102d4d;--line:rgba(141,200,240,.28);--line-strong:rgba(145,213,255,.56);
 --txt:#f0fbff;--soft:#c0dcf0;--muted:#93b9d2;
 --a:#98deff;--a2:#66bfff;--gold:#b6e7ff;--danger:#ff849f;
 --shadow:0 25px 90px rgba(0,5,18,.62),0 0 26px rgba(80,153,231,.07);
}
body[data-theme="cyan"]{--a:#98deff;--a2:#66bfff;--line-strong:rgba(145,213,255,.56)}
body[data-theme="violet"]{--a:#c6a4ff;--a2:#90a6ff;--line-strong:rgba(202,175,255,.50)}
body[data-theme="amber"]{--a:#ffd28c;--a2:#ffae76;--line-strong:rgba(255,207,139,.52)}
body{background:#030b1c;color:var(--txt)}
.wallpaper{background:#031126;z-index:0;position:fixed;inset:0;overflow:hidden}
.wallpaper:before,.wallpaper:after{display:none!important}
#galaxy-wallpaper{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:1}
.galaxy-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(2,11,25,.34) 0%,transparent 30%,rgba(3,11,25,.02) 72%,rgba(1,8,22,.18) 100%);pointer-events:none}
.wallpaper-vignette{position:absolute;inset:0;box-shadow:inset 0 0 150px 24px rgba(1,7,22,.62);pointer-events:none}
.wallpaper-grain{position:absolute;inset:0;background:linear-gradient(90deg,rgba(95,182,255,.025) 1px,transparent 1px),linear-gradient(rgba(95,182,255,.021) 1px,transparent 1px);background-size:75px 75px;opacity:.40;pointer-events:none}
.wallpaper-mark{position:absolute;left:20.8%;bottom:19%;font-size:clamp(70px,12vw,210px);font-weight:950;line-height:1;letter-spacing:-.09em;color:rgba(200,237,255,.055);text-shadow:0 0 35px rgba(62,136,225,.06);white-space:nowrap;pointer-events:none;user-select:none}
.wallpaper-mark span{color:rgba(148,220,255,.09)}
.wallpaper-caption{position:absolute;left:22%;bottom:16%;color:rgba(176,216,249,.33);font:10px ui-monospace,monospace;letter-spacing:.22em;pointer-events:none}
#ambient{opacity:.47;pointer-events:none}
.statusbar{height:51px;background:rgba(7,26,50,.84);border-bottom:1px solid rgba(154,217,255,.28);box-shadow:0 2px 20px rgba(2,11,30,.36);backdrop-filter:blur(22px) saturate(1.2)}
.statusbar .status-brand{font-size:15px;letter-spacing:.06em}
.statusbar button{background:rgba(131,211,255,.08);border-color:rgba(131,211,255,.32);color:var(--a);border-radius:7px}
.statusbar button:hover{background:rgba(131,211,255,.2)}
.signal-dot,.green-pip{background:var(--a);box-shadow:0 0 13px rgba(124,212,255,.8)}
.desktop{top:51px;bottom:65px}
.desktop-icons{top:34px;left:26px;grid-template-columns:repeat(2,94px);gap:13px 13px}
.desktop-icon{width:94px;height:102px;border-radius:13px;transition:background .15s,border-color .15s,transform .15s}
.desktop-icon:hover,.desktop-icon:focus-visible{background:rgba(129,211,255,.18);border-color:rgba(160,228,255,.40);transform:translateY(-2px)}
.app-icon{background:linear-gradient(145deg,rgba(60,126,194,.72),rgba(9,30,63,.94));border:1px solid rgba(158,218,255,.58);color:var(--a);border-radius:14px;box-shadow:0 10px 28px rgba(0,6,28,.48),inset 0 1px 0 rgba(228,247,255,.17)}
.app-icon:before{border-color:rgba(167,218,255,.18)}
.app-icon.purple,.app-icon.gold,.app-icon.blue{color:#d6f0ff;border-color:rgba(165,224,255,.56)}
.app-label{text-shadow:0 2px 9px rgba(0,8,28,1),0 0 3px rgba(0,8,28,.85);font-size:11px}
.desktop-welcome{top:clamp(45px,12%,115px);left:clamp(238px,23%,420px);width:min(600px,48vw);z-index:3;clip-path:none;border:1px solid rgba(154,222,255,.55);background:linear-gradient(128deg,rgba(11,38,69,.88),rgba(5,17,37,.93));box-shadow:0 32px 90px rgba(0,5,22,.68),0 0 75px rgba(103,177,255,.13),inset 0 1px 0 rgba(201,240,255,.16);backdrop-filter:blur(25px) saturate(1.32);border-radius:17px;overflow:hidden}
.wel-top{height:45px;padding:0 21px;color:#c4e7fa;background:linear-gradient(90deg,rgba(60,122,181,.4),rgba(40,83,138,.14));border-bottom:1px solid rgba(146,206,255,.3)}
.wel-body{padding:31px 39px 29px}
.wel-body h1{font-size:clamp(51px,5vw,79px);text-shadow:0 8px 23px rgba(2,11,27,.33)}
.wel-body>p:not(.overline){color:#c9e4f6}
.overline{color:#a5e3ff}
.wel-foot{color:#9bbbd4;background:rgba(4,18,38,.46);border-top:1px solid rgba(141,203,249,.22)}
.bright-btn{border-radius:8px;background:linear-gradient(130deg,#b2e9ff,#69c8ff);border:1px solid #bfeeff;color:#071c35;box-shadow:0 7px 22px rgba(73,164,225,.25)}
.bright-btn:hover{filter:brightness(1.13)}
.ghost-btn{background:rgba(58,123,180,.19);border:1px solid rgba(163,218,255,.36);border-radius:8px}
.ghost-btn:hover{background:rgba(80,154,218,.27)}
.desktop-sidepanel{right:34px;top:37px;border-left:1px solid rgba(157,219,255,.47);padding-left:19px;background:linear-gradient(90deg,rgba(5,25,47,.30),transparent)}
.sidepanel-heading{color:#bbecff}
.desktop-sidepanel>button{color:#d5ebff;border-color:rgba(161,215,248,.23)}
.desktop-sidepanel>button:hover{background:rgba(136,213,255,.14)}
.sidepanel-bottom{color:#a6c6dc}
.taskbar{height:65px;background:rgba(7,24,48,.90);border-top:1px solid rgba(168,222,255,.42);box-shadow:0 -9px 45px rgba(0,4,20,.45),inset 0 1px 0 rgba(189,233,255,.10);backdrop-filter:blur(27px) saturate(1.2)}
.start-btn{height:44px;background:linear-gradient(135deg,#235784,#103859);border:1px solid rgba(147,214,255,.59);border-radius:11px;box-shadow:inset 0 1px 0 rgba(205,241,255,.16)}
.start-btn:hover,.start-btn.active{background:linear-gradient(135deg,#377ab0,#184d76)}
.search-trigger{height:42px;background:rgba(13,42,72,.82);border:1px solid rgba(137,205,247,.32);border-radius:10px;color:#bad7eb}
.task-app{background:rgba(32,69,107,.70);border:1px solid rgba(135,192,236,.28);border-radius:9px}
.task-app.current{background:rgba(60,114,165,.5);border-bottom-color:#b0eaff}
.task-clock{border-color:rgba(143,207,255,.25)}
.start-menu{bottom:76px;left:17px;background:linear-gradient(138deg,rgba(11,34,65,.98),rgba(6,19,43,.98));border:1px solid rgba(159,219,255,.52);border-radius:17px;box-shadow:0 32px 100px rgba(0,6,22,.68),0 0 50px rgba(98,178,255,.13)}
.start-head{background:linear-gradient(100deg,rgba(52,111,172,.54),rgba(11,38,77,.75));border-color:rgba(144,212,255,.28)}
.start-search-row{background:rgba(9,36,65,.70)}
.start-app{border-radius:9px}
.start-app:hover{background:rgba(113,189,250,.18)}
.os-window{border:1px solid rgba(156,212,255,.64);background:rgba(7,21,42,.95);box-shadow:0 33px 90px rgba(0,5,21,.75),0 0 0 1px rgba(175,228,255,.12) inset,0 0 35px rgba(88,165,255,.14);border-radius:13px;backdrop-filter:blur(28px) saturate(1.12)}
.os-window:focus-within{border-color:rgba(181,232,255,.85)}
.window-titlebar{height:46px;background:linear-gradient(90deg,rgba(51,116,177,.74),rgba(17,48,88,.93));border-bottom:1px solid rgba(168,221,255,.33)}
.window-location{background:#0d2541;border-color:rgba(141,200,240,.25);color:#b8d6ea}
.window-status{background:#0b2038;border-color:rgba(141,200,240,.25);color:#8cadc7}
.window-body{scrollbar-color:#3f79a8 #0b2340}
.window-controls button:hover{background:rgba(116,192,255,.18)}
.os-page .reading-card,.os-page .index-card,.os-page .panel,.os-page .media-tile,.os-page .card,.os-page .collection-card{background:linear-gradient(145deg,rgba(23,53,87,.88),rgba(12,35,65,.92));border:1px solid rgba(143,199,240,.3);border-radius:11px}
.os-page .welcome-intro{background:linear-gradient(135deg,rgba(24,67,110,.86),rgba(10,32,62,.85));border-color:rgba(159,216,255,.4);border-radius:11px}
.os-page .book-art{border:1px solid rgba(143,213,255,.32);background:linear-gradient(135deg,#1d578a,#0c2a54);color:#cfedff}
.os-page .quote-console{background:#0c2846}
.os-page .inset,.os-page .notice{background:rgba(76,149,218,.13)}
.os-page .chip,.pill,.flag{background:rgba(24,87,146,.58);color:#b5e6ff}
.os-page .link-grid a{background:rgba(24,67,112,.58)}
.os-page .link-grid a:hover{background:rgba(42,107,164,.64)}
.os-page .milestone,.os-page .step{background:rgba(20,68,112,.7)}
.files-sidebar{background:#102c4a}
.files-sidebar button:hover,.files-sidebar button.sel{background:rgba(64,133,202,.37)}
.files-location{background:#0b2647}
.file-card{background:#143657;border-color:rgba(139,205,246,.26);border-radius:10px}
.file-card:hover{background:#204f80;border-color:var(--a)}
.terminal-app{background:#06152d;color:#c6e8ff}
.arcade-card{background:linear-gradient(135deg,rgba(20,59,106,.92),rgba(11,35,72,.95));border-color:rgba(130,199,248,.32);border-radius:11px}
.arcade-card:hover{background:rgba(45,101,157,.9);border-color:var(--a)}
.settings-page,.about-os{color:#e6f7ff}
.theme-picker{background:#183b60;border:1px solid rgba(147,209,254,.32);border-radius:10px}
.theme-picker[data-theme-choice="cyan"] span{background:linear-gradient(120deg,#276dac,#b4eaff)}
.theme-picker.selected{border-color:#b9eaff;box-shadow:0 0 0 2px rgba(152,222,255,.16)}
.settings-toggle{background:#1c456c;border-color:rgba(136,205,255,.4);color:#d5eeff;border-radius:8px}
.context-menu{background:#0c2548;border-color:var(--line-strong);border-radius:11px}
.context-menu button:hover{background:rgba(122,204,255,.16)}
.toast{background:#123b67;border-color:var(--line-strong);border-radius:9px}
@media(max-width:1000px){.wallpaper-mark{left:13%;bottom:14%}.wallpaper-caption{left:15%;bottom:11%}}
@media(max-width:700px){.wallpaper-mark{left:5%;bottom:13%;font-size:21vw}.wallpaper-caption{left:6%;bottom:10%;letter-spacing:.08em;font-size:8px}.desktop-welcome{border-radius:12px}.desktop-sidepanel{display:none}}
@media(prefers-reduced-motion:reduce){.desktop-icon,.os-window,.desktop-welcome{transition:none!important}}

/* On narrow screens the welcome panel is a readable floating window, not a clipped desktop pane. */
@media(max-width:700px){
 .desktop-welcome{left:12px!important;right:12px!important;top:18px!important;width:calc(100% - 24px)!important;max-height:calc(100% - 34px);overflow-y:auto;overflow-x:hidden;border-radius:13px}
 .wel-body{padding:23px 25px 19px}
 .wel-body h1{font-size:clamp(44px,11vw,61px);letter-spacing:-.055em}
 .wel-body>p:not(.overline){font-size:14px;line-height:1.5}
 .wel-foot{flex-wrap:wrap;font-size:9px;line-height:1.45;gap:5px}
 .desktop-icons{top:27px;left:19px;grid-template-columns:repeat(2,100px)}
 .wallpaper-mark{font-size:22vw;bottom:13%;left:3%}
 .wallpaper-caption{left:4%;bottom:10%}
}