:root{
  --aqua-deep:#0f2a4f; --aqua:#2f5fa0; --aqua-lt:#4f86c6; --aqua-glass:#a7d3ff;
  --ink:#0d1b33; --win-face:#dfe6ef; --win-face-2:#c4d0de; --win-line:#7e93ad;
  --win-line-dk:#5a708c; --bezel-hi:#ffffff; --bezel-lo:#8a9bb2;
  --err:#d83a3a; --ok:#3fae6a; --amber:#ffb627; --text:#1a2740;
}
*{ margin:0; padding:0; box-sizing:border-box; }
html,body{ height:100%; }
body{ font-family:'DM Sans',system-ui,sans-serif; background:#000; color:var(--text); overflow:hidden; user-select:none; }
.os-root{ position:fixed; inset:0; }
.scan::after{ content:""; position:absolute; inset:0; pointer-events:none; z-index:9999;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,0) 0,rgba(0,0,0,0) 2px,rgba(0,0,0,.045) 3px,rgba(0,0,0,.045) 3px); mix-blend-mode:multiply; }
.screen{ position:absolute; inset:0; display:none; }
.screen.active{ display:block; }

/* ===== BOOT ===== */
#boot{ background:#06101f; color:#bcd6f5; font-family:'IBM Plex Mono',monospace; }
.boot-inner{ position:absolute; top:7%; left:7%; right:7%; bottom:7%; font-size:15px; line-height:1.7; display:flex; flex-direction:column; }
.boot-brand{ font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:26px; letter-spacing:.02em; color:#dbeaff; margin-bottom:4px; }
.boot-sub{ color:#5d7ba5; font-size:12px; letter-spacing:.28em; text-transform:uppercase; margin-bottom:22px; }
.boot-line{ opacity:0; white-space:pre; }
.boot-line .ok{ color:#5fd58a; } .boot-line .fail{ color:#ff6b6b; font-weight:700; }
.boot-line .dim{ color:#476291; }
.boot-bar{ margin-top:18px; width:46%; height:13px; border:1px solid #355179; background:#0a1830; border-radius:2px; overflow:hidden; }
.boot-bar i{ display:block; height:100%; width:0; background:linear-gradient(90deg,#4f86c6,#a7d3ff); transition:width .2s linear; }
.boot-panic{ opacity:0; margin-top:26px; border:1px solid #6e2530; background:rgba(216,58,58,.08); border-radius:6px; padding:16px 18px; max-width:620px; }
.boot-panic h2{ font-family:'Space Grotesk',sans-serif; color:#ff8b8b; font-size:18px; margin-bottom:8px; }
.boot-panic p{ color:#c6d8f0; font-size:13.5px; line-height:1.6; margin-bottom:8px; }
.boot-panic .meta{ color:#5d7ba5; font-size:12px; font-family:'IBM Plex Mono',monospace; }
.boot-cta{ opacity:0; margin-top:18px; }
.boot-cta button{ cursor:pointer; font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:14px;
  color:#06101f; background:linear-gradient(180deg,#bfe0ff,#5ea4e8); border:1px solid #2f6fb0;
  border-radius:7px; padding:11px 22px; box-shadow:inset 0 1px 0 rgba(255,255,255,.7), 0 4px 14px rgba(0,0,0,.4); }
.boot-cta button:active{ transform:translateY(1px); }
.boot-cta .blink{ display:inline-block; width:8px; height:14px; background:#bcd6f5; margin-left:6px; vertical-align:middle; animation:blink 1s steps(1) infinite; }
@keyframes blink{ 50%{opacity:0;} }
.boot-skip{ position:absolute; bottom:18px; right:24px; font-size:11px; color:#3a567f; cursor:pointer; }

/* ===== LOGIN ===== */
#login{ background:radial-gradient(120% 90% at 50% 0%, #356bb6 0%, #1b3a6b 60%, #0c2348 100%); }
.login-grid{ position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px); background-size:38px 38px; }
.login-clock{ position:absolute; top:18px; right:22px; font-family:'Space Mono',monospace; font-size:13px; color:#ffd2d2; background:rgba(0,0,0,.28); padding:4px 12px; border-radius:20px; border:1px solid rgba(255,255,255,.12); }
.login-card{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:380px; text-align:center; color:#fff; }
.login-logo{ font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:30px; }
.login-os-sub{ font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.3em; text-transform:uppercase; color:#9dc2f0; margin-bottom:24px; }
.login-avatar{ width:92px; height:92px; margin:0 auto 14px; border-radius:14px; background:linear-gradient(135deg,#8cc4ff,#3f7bc4); border:2px solid rgba(255,255,255,.5); box-shadow:0 10px 30px rgba(0,0,0,.45),inset 0 2px 8px rgba(255,255,255,.5); display:flex; align-items:center; justify-content:center; font-size:40px; color:rgba(255,255,255,.7); }
.login-avatar .gl{ animation:avatarGlitch 3.5s infinite; }
@keyframes avatarGlitch{ 0%,92%,100%{transform:none;filter:none;} 94%{transform:translateX(2px);filter:hue-rotate(60deg);} 96%{transform:translateX(-2px);} }
.login-user{ font-weight:700; font-size:20px; margin-bottom:16px; }
.login-field{ width:100%; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.32); border-radius:8px; padding:11px 14px; font-size:14px; color:#eaf3ff; margin-bottom:12px; font-family:'DM Sans',sans-serif; text-align:left; }
.login-btn{ width:100%; cursor:pointer; border:none; border-radius:8px; padding:12px; font-size:15px; font-weight:700; color:#10325f; background:linear-gradient(180deg,#bfe0ff,#5ea4e8); box-shadow:0 5px 16px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.7); font-family:'Space Grotesk',sans-serif; }
.login-btn:active{ transform:translateY(1px); }
.login-hint{ margin-top:14px; font-size:11px; color:#9dc2f0; font-family:'IBM Plex Mono',monospace; }

/* ===== DESKTOP ===== */
#desktop{ background:radial-gradient(130% 100% at 50% -10%, #3a6cb0 0%, #244e8c 45%, #14315e 100%); }
.wallpaper-art{ position:absolute; inset:0; opacity:.5; background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px); background-size:46px 46px; }
.wall-watermark{ position:absolute; bottom:60px; right:30px; font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:74px; color:rgba(255,255,255,.06); letter-spacing:-.02em; }
.wall-glitch{ position:absolute; top:34%; left:12%; font-family:'VT323',monospace; font-size:20px; color:rgba(255,120,120,.25); animation:wg 4s infinite; }
@keyframes wg{ 0%,90%,100%{opacity:0;} 92%,98%{opacity:.4;transform:translateX(3px);} }

/* menubar */
.menubar{ position:absolute; top:0; left:0; right:0; height:30px; z-index:500; display:flex; align-items:center; gap:2px; padding:0 8px; background:linear-gradient(180deg,#eef3f9,#cdd9e7); border-bottom:1px solid #8497ad; box-shadow:0 1px 0 rgba(255,255,255,.6) inset,0 2px 4px rgba(0,0,0,.2); font-size:12.5px; color:#1f3a5c; }
.menubar .mb-logo{ font-weight:700; font-family:'Space Grotesk',sans-serif; padding:0 10px; color:#10325f; }
.menubar .mb-item{ padding:5px 9px; border-radius:4px; cursor:pointer; color:#22344f; position:relative; }
.menubar .mb-item:hover,.menubar .mb-item.open{ background:#2f5fa0; color:#fff; }
.menubar .mb-right{ margin-left:auto; display:flex; align-items:center; gap:12px; padding-right:6px; }
.menubar .mb-stat{ font-family:'IBM Plex Mono',monospace; font-size:11px; color:#b03; font-weight:600; }
.menubar .mb-clock{ font-family:'Space Mono',monospace; font-size:12px; color:#1f3a5c; }
.mb-drop{ position:absolute; top:30px; left:0; min-width:190px; background:var(--win-face); border:1px solid #44607f; border-top:none; border-radius:0 0 7px 7px; box-shadow:0 14px 34px rgba(0,0,0,.45); display:none; z-index:600; overflow:hidden; }
.mb-item.open .mb-drop{ display:block; }
.mb-drop .row{ padding:8px 12px; font-size:12.5px; color:#22344f; display:flex; gap:10px; align-items:center; cursor:pointer; }
.mb-drop .row:hover{ background:#2f5fa0; color:#fff; }
.mb-drop .sep{ height:1px; background:#cdd9e7; }
.mb-drop .row .k{ margin-left:auto; font-family:'IBM Plex Mono',monospace; font-size:10px; opacity:.6; }

/* desktop icons */
.desk-icons{ position:absolute; top:46px; left:14px; z-index:50; display:flex; flex-direction:column; gap:4px; width:96px; }
.dicon{ text-align:center; padding:8px 4px 6px; border-radius:8px; cursor:pointer; position:relative; }
.dicon:hover{ background:rgba(255,255,255,.14); }
.dicon.locked{ opacity:.55; }
.dicon.locked:hover{ background:rgba(216,58,58,.16); }
.dicon .tile{ width:50px; height:50px; margin:0 auto 5px; border-radius:11px; position:relative; background:linear-gradient(135deg,#eaf2fb,#bcd0e6); border:1px solid #fff; box-shadow:0 3px 8px rgba(0,0,0,.3),inset 0 1px 3px rgba(255,255,255,.8); display:flex; align-items:center; justify-content:center; font-size:24px; color:#2f5fa0; }
.dicon .tile .badge{ position:absolute; top:-6px; right:-6px; width:19px; height:19px; border-radius:50%; background:var(--err); color:#fff; font-size:12px; font-weight:700; display:flex; align-items:center; justify-content:center; border:1.5px solid #fff; box-shadow:0 1px 4px rgba(0,0,0,.4); }
.dicon .tile .badge.ok{ background:var(--ok); }
.dicon .tile .lockico{ position:absolute; bottom:-5px; right:-5px; font-size:13px; background:#22344f; color:#fff; border-radius:50%; width:18px; height:18px; display:flex; align-items:center; justify-content:center; border:1.5px solid #fff; }
.dicon .lbl{ font-size:11.5px; color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.6); line-height:1.15; }

/* windows */
.window{ position:absolute; min-width:280px; min-height:140px; z-index:100; background:var(--win-face); border:1px solid #44607f; border-radius:8px 8px 6px 6px; box-shadow:0 16px 44px rgba(0,0,0,.5),0 2px 0 rgba(255,255,255,.4) inset; display:flex; flex-direction:column; overflow:hidden; }
.window.min{ display:none; }
.window.closed{ display:none; }
.window.max{ top:30px!important; left:0!important; width:100%!important; height:calc(100% - 72px)!important; border-radius:0; }
.titlebar{ height:30px; display:flex; align-items:center; gap:8px; padding:0 8px 0 10px; cursor:move; background:linear-gradient(180deg,#3f7bc4,#285a96); border-bottom:1px solid #1d3f6c; color:#fff; box-shadow:inset 0 1px 0 rgba(255,255,255,.35); flex-shrink:0; }
.window.inactive .titlebar{ background:linear-gradient(180deg,#9fb3cc,#7e96b4); }
.titlebar .tb-ic{ font-size:14px; }
.titlebar .tb-title{ font-size:12.5px; font-weight:700; flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tb-controls{ display:flex; gap:6px; }
.tb-btn{ width:15px; height:15px; border-radius:50%; border:1px solid rgba(0,0,0,.25); cursor:pointer; font-size:9px; line-height:13px; text-align:center; color:rgba(0,0,0,.55); }
.tb-min{ background:#ffce4a; } .tb-max{ background:#5fd06a; } .tb-close{ background:#ff5f57; }
.win-body{ padding:14px 16px; overflow:auto; flex:1; font-size:13.5px; line-height:1.6; color:#1c2c45; }
.win-body.term{ background:#06101f; color:#7fe39b; font-family:'IBM Plex Mono',monospace; font-size:13px; line-height:1.55; }
.win-body.term .p{ color:#4f86c6; } .win-body.term .c{ color:#5d7ba5; }
.win-body.term .cur{ display:inline-block;width:7px;height:14px;background:#7fe39b;vertical-align:middle;animation:blink 1s steps(1) infinite; }
.win-body h3{ font-family:'Space Grotesk',sans-serif; font-size:16px; margin-bottom:8px; color:#10325f; }
.win-body .chip{ display:inline-block; font-family:'IBM Plex Mono',monospace; font-size:11px; padding:2px 7px; border-radius:4px; background:#dfe9f5; border:1px solid #b7c9dd; color:#2f5fa0; margin:2px 3px 2px 0; }
.win-body .sys-row{ display:flex; align-items:center; gap:10px; padding:9px 10px; border:1px solid #c2d0e0; border-radius:6px; margin-bottom:8px; background:#eef3f9; }
.win-body .sys-row .led{ width:11px; height:11px; border-radius:50%; box-shadow:0 0 6px currentColor; }
.led.r{ color:var(--err); background:var(--err); } .led.g{ color:var(--ok); background:var(--ok); }
.win-body .sys-row .nm{ font-weight:700; } .win-body .sys-row .st{ margin-left:auto; font-family:'IBM Plex Mono',monospace; font-size:11px; color:#7a8aa0; }
.win-body .note-paper{ background:repeating-linear-gradient(#fffef7,#fffef7 26px,#e9e4cf 27px); border:1px solid #d8d2b6; padding:10px 12px; font-family:'Space Mono',monospace; font-size:12.5px; color:#3a3522; line-height:27px; border-radius:3px; }
.win-body .hint-q{ font-weight:700; color:#10325f; }
.win-body .divider{ height:1px; background:#cdd9e7; margin:12px 0; }
.win-body ul{ margin:6px 0 6px 18px; } .win-body li{ margin:3px 0; }
.win-body code{ background:#eaf0f7; border:1px solid #cdd9e7; border-radius:3px; padding:1px 5px; font-family:'IBM Plex Mono',monospace; font-size:12px; color:#b03a48; }
.win-body .callout{ background:#eaf3ff; border-left:3px solid #3f7bc4; padding:9px 12px; border-radius:0 6px 6px 0; margin:10px 0; font-size:12.5px; }
.win-body .step{ display:flex; gap:10px; margin-bottom:9px; }
.win-body .step .n{ flex-shrink:0; width:22px; height:22px; border-radius:50%; background:#3f7bc4; color:#fff; font-size:12px; font-weight:700; display:flex; align-items:center; justify-content:center; }
.win-body .ans-row{ display:flex; gap:8px; margin-top:10px; }
.win-body .ans-row input{ flex:1; border:1px solid #93a6bd; border-radius:6px; padding:9px 12px; font-family:'IBM Plex Mono',monospace; font-size:13px; color:#1c2c45; background:#fff; user-select:text; }
.win-body .ans-row button{ cursor:pointer; border:none; border-radius:6px; padding:0 16px; font-weight:700; color:#fff; background:linear-gradient(180deg,#3f7bc4,#285a96); white-space:nowrap; }
.prog{ display:flex; gap:6px; margin-top:8px; }
.prog .seg{ flex:1; height:8px; border-radius:3px; background:#cfd9e6; border:1px solid #b3c2d4; }
.prog .seg.done{ background:var(--ok); border-color:#2f9156; }
.resizer{ position:absolute; width:16px; height:16px; right:0; bottom:0; cursor:nwse-resize; z-index:3; }
.resizer::after{ content:""; position:absolute; right:3px; bottom:3px; width:8px; height:8px; border-right:2px solid #7e93ad; border-bottom:2px solid #7e93ad; }

/* ===== E1 DRAG-AND-DROP ===== */
.sort-zone{ display:flex; flex-direction:column; gap:6px; margin:10px 0; padding:10px; background:#eef3f9; border:2px dashed #b7c9dd; border-radius:8px; min-height:60px; }
.sort-zone.drag-over{ border-color:#3f7bc4; background:#dbeeff; }
.sort-card{ display:flex; align-items:stretch; border:1px solid #b7c9dd; border-radius:6px; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.1); cursor:grab; transition:box-shadow .15s; overflow:hidden; }
.sort-card:active{ cursor:grabbing; box-shadow:0 4px 12px rgba(0,0,0,.2); }
.sort-card.dragging{ opacity:.4; }
.sort-card .card-label{ background:linear-gradient(180deg,#3f7bc4,#285a96); color:#fff; font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:15px; width:30px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.sort-card .card-code{ font-family:'IBM Plex Mono',monospace; font-size:11px; padding:8px 10px; color:#1c2c45; line-height:1.5; flex:1; white-space:pre; }
.sort-card .card-code .kw{ color:#285a96; font-weight:600; }
.sort-card .card-code .cm{ color:#7a8aa0; }
.sort-order{ display:flex; gap:8px; align-items:center; margin-top:6px; font-family:'IBM Plex Mono',monospace; font-size:12px; color:#7a8aa0; }
.sort-order .order-display{ letter-spacing:.15em; color:#285a96; font-weight:700; }
.feedback-msg{ margin-top:8px; padding:8px 12px; border-radius:6px; font-size:12.5px; display:none; }
.feedback-msg.show{ display:block; }
.feedback-msg.ok{ background:#dff5e8; border:1px solid #3fae6a; color:#1a5c36; }
.feedback-msg.err{ background:#fde2e2; border:1px solid #d83a3a; color:#7a1010; }
.feedback-msg.info{ background:#eaf3ff; border:1px solid #3f7bc4; color:#1a2f5c; }

/* ===== E2 CIPHER ===== */
.cipher-display{ font-family:'IBM Plex Mono',monospace; font-size:22px; letter-spacing:.25em; color:#bfe0ff; background:#06101f; padding:14px 18px; border-radius:6px; border:1px solid #1d3f6c; margin:10px 0; text-align:center; }
.cipher-hint{ font-family:'IBM Plex Mono',monospace; font-size:12px; color:#5d7ba5; margin-top:6px; }
.shift-display{ display:inline-flex; align-items:center; gap:8px; background:#1d3452; border:1px solid #3f6fa0; border-radius:6px; padding:6px 14px; font-family:'IBM Plex Mono',monospace; font-size:13px; color:#a7d3ff; margin-bottom:10px; }
.shift-display .shift-val{ font-size:22px; font-weight:700; color:#ffce4a; }

/* ===== E3 RECURSION ===== */
.code-block{ font-family:'IBM Plex Mono',monospace; font-size:13px; line-height:1.7; padding:12px 14px; background:#06101f; border-radius:6px; border:1px solid #1d3f6c; margin:10px 0; white-space:pre-wrap; color:#c8d8f0; }
.code-block .ln{ color:#476291; display:inline-block; width:22px; text-align:right; margin-right:10px; user-select:none; }
.code-block .kw{ color:#a7d3ff; } .code-block .fn{ color:#7fe39b; } .code-block .num{ color:#ffce4a; }
.code-block .bug{ background:rgba(216,58,58,.18); border-radius:3px; padding:0 2px; text-decoration:underline; text-decoration-color:#ff6b6b; text-decoration-style:wavy; }
.code-block .fn.fix{ color:#7fe39b; background:rgba(63,174,106,.22); border-radius:3px; padding:0 3px; animation:ioFixPulse .7s ease; }
.code-block.patched{ border-color:#2f9156; box-shadow:0 0 0 1px rgba(63,174,106,.2); transition:border-color .45s ease, box-shadow .45s ease; }
.code-block .err-line{ color:#ff6b6b; margin-top:8px; font-size:12px; transition:opacity .3s ease; }
.code-block .ok-line{ display:none; color:#5fd58a; margin-top:8px; font-size:12px; }
.code-block .ok-line.show{ display:block; animation:ioFadeIn .45s ease; }
.code-block .err-line.hide{ opacity:0; height:0; margin:0; overflow:hidden; }
@keyframes ioFixPulse{ 0%{background:rgba(255,206,74,.45); transform:scale(1.04);} 100%{background:rgba(63,174,106,.22); transform:scale(1);} }
@keyframes ioFadeIn{ from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:none;} }
.io-phase-label{ font-size:12.5px; margin-bottom:6px; }
.io-part-a-actions{ margin-top:10px; }
.io-part-a-actions button{ cursor:pointer; border:none; border-radius:6px; padding:9px 20px; font-weight:700; font-size:13px; color:#fff; background:linear-gradient(180deg,#3f7bc4,#285a96); width:100%; }
.io-part-a-actions button:disabled{ opacity:.45; cursor:default; }
.io-part-a{ transition:opacity .35s ease, transform .35s ease; }
.io-part-a.is-done{ opacity:0; transform:translateY(-8px); pointer-events:none; }
.io-part-b{ display:none; opacity:0; transform:translateY(8px); }
.io-part-b.visible{ display:block; opacity:1; transform:none; animation:ioFadeIn .45s ease; }
.io-calc-hint{ font-size:11px; color:#476291; margin-top:8px; }
.mc-options{ display:flex; flex-direction:column; gap:6px; margin:8px 0; }
.mc-opt{ display:flex; align-items:flex-start; gap:10px; padding:9px 12px; border:1px solid #b7c9dd; border-radius:6px; cursor:pointer; background:#fff; font-size:13px; transition:border-color .15s; user-select:none; }
.mc-opt:hover{ border-color:#3f7bc4; background:#f0f6ff; }
.mc-opt.selected{ border-color:#3f7bc4; background:#dbeeff; }
.mc-opt.correct{ border-color:var(--ok); background:#dff5e8; }
.mc-opt.wrong{ border-color:var(--err); background:#fde2e2; }
.mc-opt .mc-letter{ width:22px; height:22px; border-radius:50%; background:#cdd9e7; color:#22344f; font-weight:700; font-size:12px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.mc-opt.selected .mc-letter{ background:#3f7bc4; color:#fff; }
.mc-opt.correct .mc-letter{ background:var(--ok); color:#fff; }
.mc-opt.wrong .mc-letter{ background:var(--err); color:#fff; }
.seed-display{ font-family:'IBM Plex Mono',monospace; background:#0a1830; border:1px solid #2f4f7f; color:#7fe39b; padding:4px 10px; border-radius:4px; display:inline-block; margin-left:6px; }

/* ===== TERMINAL ===== */
.term-output{ flex:1; overflow:auto; padding:12px 14px; }
.term-input-row{ display:flex; align-items:center; padding:6px 14px 10px; border-top:1px solid #1d3f6c; gap:6px; }
.term-prompt{ font-family:'IBM Plex Mono',monospace; color:#4f86c6; font-size:13px; white-space:nowrap; }
.term-input{ flex:1; background:transparent; border:none; outline:none; font-family:'IBM Plex Mono',monospace; font-size:13px; color:#7fe39b; user-select:text; caret-color:#7fe39b; }
.term-line{ font-family:'IBM Plex Mono',monospace; font-size:13px; line-height:1.55; white-space:pre-wrap; }
.term-line.cmd{ color:#fff; } .term-line.out{ color:#7fe39b; } .term-line.err{ color:#ff6b6b; } .term-line.dim{ color:#5d7ba5; }

/* taskbar */
.taskbar{ position:absolute; bottom:0; left:0; right:0; height:42px; z-index:500; display:flex; align-items:center; gap:6px; padding:0 8px; background:linear-gradient(180deg,#d7e1ee,#aebfd4); border-top:1px solid #fff; box-shadow:0 -2px 6px rgba(0,0,0,.25); }
.start-btn{ display:flex; align-items:center; gap:7px; padding:6px 14px 6px 11px; border-radius:7px; cursor:pointer; background:linear-gradient(180deg,#5fd06a,#2f9e54); color:#fff; font-weight:700; font-size:13px; border:1px solid #1f7a40; box-shadow:inset 0 1px 0 rgba(255,255,255,.5); font-family:'Space Grotesk',sans-serif; }
.start-btn:active{ transform:translateY(1px); }
.tasks{ display:flex; gap:5px; margin-left:4px; flex:1; overflow:hidden; }
.task{ display:flex; align-items:center; gap:6px; padding:6px 12px; border-radius:6px; cursor:pointer; font-size:12px; background:linear-gradient(180deg,#eef3f9,#cdd9e7); border:1px solid #93a6bd; color:#22344f; max-width:170px; box-shadow:inset 0 1px 0 rgba(255,255,255,.6); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.task.active{ background:linear-gradient(180deg,#bcd0e6,#9bb4d0); box-shadow:inset 0 2px 4px rgba(0,0,0,.18); }
.tray{ display:flex; align-items:center; gap:12px; padding:0 8px 0 12px; border-left:1px solid #8497ad; height:100%; }
.tray .leds{ display:flex; gap:4px; }
.tray .leds .l{ width:8px; height:8px; border-radius:50%; background:var(--err); box-shadow:0 0 5px var(--err); }
.tray .leds .l.g{ background:var(--ok); box-shadow:0 0 5px var(--ok); }
.tray .meltdown-timer{ display:flex; flex-direction:column; align-items:center; justify-content:center; padding:2px 14px 1px; border-radius:7px; min-width:78px;
  background:linear-gradient(180deg,rgba(216,58,58,.1),rgba(216,58,58,.22)); border:1px solid rgba(184,51,51,.5);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 1px 4px rgba(184,51,51,.25); }
.tray .meltdown-label{ font-family:'IBM Plex Mono',monospace; font-size:9px; letter-spacing:.14em; text-transform:uppercase; color:#a82424; font-weight:600; line-height:1; margin-bottom:1px; }
.tray .meltdown-val{ font-family:'Space Mono',monospace; font-size:18px; font-weight:700; color:#b03; letter-spacing:.08em; line-height:1.15; }
.tray .meltdown-timer.urgent{ animation:meltdown-pulse 1s ease-in-out infinite; border-color:#d83a3a;
  background:linear-gradient(180deg,rgba(216,58,58,.22),rgba(216,58,58,.38)); }
.tray .meltdown-timer.urgent .meltdown-val{ color:#d83a3a; }
.tray .meltdown-timer.urgent .meltdown-label{ color:#d83a3a; }
@keyframes meltdown-pulse{ 0%,100%{ box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 0 5px rgba(216,58,58,.35); } 50%{ box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 0 12px rgba(216,58,58,.65); } }
.tray .tclock{ font-family:'Space Mono',monospace; font-size:11px; color:#476291; text-align:right; line-height:1.1; opacity:.85; }
.hidden-app{ display:none !important; }
.tray .snd-toggle{ display:flex; align-items:center; justify-content:center; width:24px; height:24px; border-radius:5px; cursor:pointer; font-size:14px; line-height:1; color:#1f3a5c; border:1px solid transparent; user-select:none; transition:background .12s,border-color .12s; }
.tray .snd-toggle:hover{ background:rgba(47,95,160,.16); border-color:#9fb3cc; }
.tray .snd-toggle:active{ transform:translateY(1px); }
.tray .snd-toggle.off{ color:#8497ad; }
.tray .reboot-btn{ display:flex; align-items:center; padding:3px 10px; border-radius:5px; cursor:pointer; font-family:'Space Mono',monospace; font-size:11px; font-weight:700; letter-spacing:.04em; color:#0f1e35; background:linear-gradient(180deg,#5fd06a,#2f9e54); border:1px solid #1f7a40; user-select:none; animation:reboot-pulse 1s ease-in-out infinite; }
.tray .reboot-btn:hover{ filter:brightness(1.1); }
.tray .reboot-btn:active{ transform:translateY(1px); }
@keyframes reboot-pulse{ 0%,100%{ box-shadow:0 0 6px 1px #2f9e54; } 50%{ box-shadow:0 0 14px 4px #5fd06a; } }
.quit-float{ position:absolute; bottom:45px; right:12px; font-size:11px; color:#3a567f; cursor:pointer; user-select:none; z-index:50; }
.quit-float:hover{ color:#f87171; }

/* start menu */
.startmenu{ position:absolute; bottom:46px; left:8px; width:248px; z-index:600; display:none; background:var(--win-face); border:1px solid #44607f; border-radius:8px; overflow:hidden; box-shadow:0 18px 44px rgba(0,0,0,.5); }
.startmenu.open{ display:block; }
.sm-head{ background:linear-gradient(180deg,#3f7bc4,#285a96); color:#fff; padding:12px 14px; font-family:'Space Grotesk',sans-serif; }
.sm-head .u{ font-weight:700; font-size:14px; } .sm-head .r{ font-size:11px; opacity:.85; font-family:'IBM Plex Mono',monospace; }
.sm-list{ padding:6px; max-height:340px; overflow:auto; }
.sm-item{ display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:6px; cursor:pointer; font-size:13px; }
.sm-item:hover{ background:#2f5fa0; color:#fff; }
.sm-item.locked{ opacity:.5; }
.sm-item .i{ width:22px; text-align:center; font-size:16px; }
.sm-item .lk{ margin-left:auto; font-size:12px; }
.sm-sep{ height:1px; background:#cdd9e7; margin:5px 4px; }
.sm-foot{ padding:7px 10px; font-size:11px; color:#7a8aa0; font-family:'IBM Plex Mono',monospace; border-top:1px solid #cdd9e7; }

/* popup */
.errpop{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:800; width:360px; display:none; background:var(--win-face); border:1px solid #44607f; border-radius:8px; box-shadow:0 18px 44px rgba(0,0,0,.5); overflow:hidden; }
.errpop.show{ display:block; }
.errpop .eb{ padding:7px 10px; font-size:12.5px; font-weight:700; color:#fff; }
.errpop.kind-err .eb{ background:linear-gradient(180deg,#d83a3a,#a82424); }
.errpop.kind-ok .eb{ background:linear-gradient(180deg,#3fae6a,#2c8350); }
.errpop .ec{ padding:16px; font-size:13px; display:flex; gap:12px; align-items:flex-start; }
.errpop .ec .x{ width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:700;flex-shrink:0; }
.errpop.kind-err .ec .x{ background:#fde2e2;color:#d83a3a; }
.errpop.kind-ok .ec .x{ background:#dff5e8;color:#2c8350; }
.errpop .ef{ padding:0 16px 16px; text-align:right; }
.errpop .ef button{ background:linear-gradient(180deg,#eef3f9,#cdd9e7); border:1px solid #93a6bd; border-radius:6px; padding:6px 18px; font-size:12px; cursor:pointer; font-weight:700; color:#22344f; }

/* coach */
.coach{ position:absolute; inset:0; z-index:900; display:none; }
.coach.show{ display:block; }
.coach .veil{ position:absolute; inset:0; background:rgba(6,16,31,.55); }
.coach .bubble{ position:absolute; max-width:300px; background:#fff; border-radius:10px; padding:16px 18px; box-shadow:0 18px 50px rgba(0,0,0,.5); }
.coach .bubble h4{ font-family:'Space Grotesk',sans-serif; color:#10325f; font-size:15px; margin-bottom:6px; }
.coach .bubble p{ font-size:13px; line-height:1.55; color:#34465f; }
.coach .bubble .nav{ display:flex; align-items:center; justify-content:space-between; margin-top:14px; }
.coach .bubble .dots{ display:flex; gap:5px; }
.coach .bubble .dots i{ width:7px; height:7px; border-radius:50%; background:#cdd9e7; }
.coach .bubble .dots i.on{ background:#3f7bc4; }
.coach .bubble button{ cursor:pointer; border:none; border-radius:6px; padding:7px 14px; font-size:12.5px; font-weight:700; color:#fff; background:linear-gradient(180deg,#3f7bc4,#285a96); font-family:'Space Grotesk',sans-serif; }
.coach .bubble .skip{ background:none; color:#7a8aa0; font-weight:500; }
.coach .ring{ position:absolute; border:2.5px solid #ffce4a; border-radius:12px; box-shadow:0 0 0 4px rgba(255,206,74,.3); transition:all .3s ease; pointer-events:none; display:none; }

/* ===== CALCULATOR ===== */
.calc-display{ background:#0a1830; border:1px solid #2f4f7f; border-radius:6px; padding:10px 14px; margin-bottom:10px; text-align:right; }
.calc-expr{ font-family:'IBM Plex Mono',monospace; font-size:11px; color:#476291; min-height:16px; }
.calc-val{ font-family:'IBM Plex Mono',monospace; font-size:30px; color:#bfe0ff; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.calc-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:6px; }
.calc-btn{ cursor:pointer; border:none; border-radius:7px; padding:13px 6px; font-size:16px; font-weight:600; font-family:'Space Grotesk',sans-serif; transition:filter .1s,transform .08s; user-select:none; }
.calc-btn:active{ filter:brightness(.85); transform:translateY(1px); }
.calc-btn.num{ background:linear-gradient(180deg,#eef3f9,#d8e4f0); color:#1c2c45; border:1px solid #b7c9dd; }
.calc-btn.op{ background:linear-gradient(180deg,#3f7bc4,#285a96); color:#fff; border:1px solid #1d3f6c; }
.calc-btn.eq{ background:linear-gradient(180deg,#5fd06a,#2f9e54); color:#fff; border:1px solid #1f7a40; }
.calc-btn.clr{ background:linear-gradient(180deg,#e8eef6,#cdd9e7); color:#a82424; border:1px solid #b7c9dd; }
.calc-btn.aux{ background:linear-gradient(180deg,#e8eef6,#cdd9e7); color:#22344f; border:1px solid #b7c9dd; }
.calc-btn.wide{ grid-column:span 2; }

/* ===== VICTORY SCREEN ===== */
#victory{ background:#06101f; }
#victory.active{ display:flex; align-items:center; justify-content:center; }
#gameover{ background:#0f0505; }
#gameover.active{ display:flex; align-items:center; justify-content:center; }
.vic-card{ text-align:center; color:#bcd6f5; font-family:'IBM Plex Mono',monospace; max-width:560px; padding:40px; }
.vic-leds{ display:flex; gap:24px; justify-content:center; margin-bottom:32px; }
.vic-led{ width:28px; height:28px; border-radius:50%; background:var(--err); box-shadow:0 0 20px var(--err); transition:all .5s ease; }
.vic-led.on{ background:var(--ok); box-shadow:0 0 20px var(--ok), 0 0 40px rgba(63,174,106,.5); }
.vic-title{ font-family:'Space Grotesk',sans-serif; font-size:30px; font-weight:700; color:#5fd58a; margin-bottom:8px; letter-spacing:.01em; }
.vic-sub{ font-size:13px; color:#5d7ba5; letter-spacing:.25em; text-transform:uppercase; margin-bottom:24px; }
.vic-log{ text-align:left; background:#0a1830; border:1px solid #1d3f6c; border-radius:6px; padding:14px 16px; margin-bottom:24px; line-height:1.7; font-size:13px; }
.vic-log .ok{ color:#5fd58a; } .vic-log .dim{ color:#476291; }
.vic-btn{ cursor:pointer; font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:14px; color:#06101f; background:linear-gradient(180deg,#bfe0ff,#5ea4e8); border:1px solid #2f6fb0; border-radius:7px; padding:11px 26px; box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 4px 14px rgba(0,0,0,.4); }
.vic-btn:active{ transform:translateY(1px); }