/* ============================================================
   Base: tokens, reset, wallpaper, desktop, boot / lock screen
   ============================================================ */
:root{
  --accent:#0078d7;
  --accent-2:#0a84ff;
  --accent-dark:#005a9e;
  --taskbar-h:40px;
  --tb-bg:rgba(20,20,20,.82);
  --tb-fg:#eaeaea;
  --panel-bg:rgba(31,31,31,.92);
  --panel-fg:#f0f0f0;
  --menu-bg:#f2f2f2;
  --menu-fg:#1b1b1b;
  --win-bg:#ffffff;
  --win-fg:#1b1b1b;
  --win-bg-alt:#f5f5f5;
  --win-border:rgba(0,0,0,.22);
  --title-fg:#1b1b1b;
  --title-bg:#ffffff;
  --hover:rgba(0,0,0,.06);
  --press:rgba(0,0,0,.11);
  --line:rgba(0,0,0,.09);
  --muted:#6b6b6b;
  --shadow-win:0 22px 50px rgba(0,0,0,.35), 0 4px 12px rgba(0,0,0,.22);
  --font:"Segoe UI","Segoe UI Variable Text",system-ui,-apple-system,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
}
body.dark{
  --menu-bg:#2b2b2b;
  --menu-fg:#f2f2f2;
  --win-bg:#202020;
  --win-bg-alt:#2b2b2b;
  --win-fg:#f2f2f2;
  --title-fg:#f2f2f2;
  --title-bg:#202020;
  --win-border:rgba(255,255,255,.16);
  --hover:rgba(255,255,255,.08);
  --press:rgba(255,255,255,.14);
  --line:rgba(255,255,255,.1);
  --muted:#a8a8a8;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%;margin:0;overflow:hidden;background:#000}
body{
  font-family:var(--font);font-size:13px;color:#fff;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  user-select:none;cursor:default;
}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:default}
input,textarea,select{font:inherit;color:inherit}
svg{display:block}
[hidden]{display:none !important}
::-webkit-scrollbar{width:12px;height:12px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(128,128,128,.45);border:3px solid transparent;background-clip:content-box;border-radius:8px}
::-webkit-scrollbar-thumb:hover{background:rgba(128,128,128,.7);background-clip:content-box}
body.dark ::-webkit-scrollbar-thumb{background:rgba(200,200,200,.35);background-clip:content-box}

#screen{position:fixed;inset:0;overflow:hidden;background:#000}
#screen.shake{animation:screenShake .4s}
@keyframes screenShake{10%,90%{transform:translate(-1px,0)}30%,70%{transform:translate(2px,-1px)}50%{transform:translate(-2px,1px)}}

/* ---------------- wallpaper ---------------- */
#wallpaper{position:absolute;inset:0;z-index:0;background:#04121f}
.wp-layer{
  position:absolute;inset:0;background-size:cover;background-position:center;
  opacity:1;transition:opacity .55s ease;
}
.wp-layer.fading{opacity:0}
.wp-hero{
  background:#04121f url("../assets/hero.svg") center/cover no-repeat;
}
.wp-spooky{
  background:#07040f url("../assets/orb.svg") center/cover no-repeat;
}
.wp-horizon{
  background:
    radial-gradient(70% 60% at 78% 22%, rgba(255,168,84,.55), transparent 62%),
    radial-gradient(80% 50% at 20% 100%, rgba(255,64,129,.30), transparent 60%),
    linear-gradient(180deg,#101a3a 0%,#31326b 38%,#a3506f 66%,#f0a25c 84%,#ffd7a0 100%);
}
.wp-mono{
  background:
    radial-gradient(60% 60% at 30% 20%, rgba(255,255,255,.10), transparent 60%),
    linear-gradient(140deg,#16181c,#0b0c0f 60%,#1b1e24);
}
.wp-accent{
  background:
    radial-gradient(80% 70% at 25% 18%, color-mix(in srgb, var(--accent) 80%, white 10%), transparent 62%),
    linear-gradient(140deg,var(--accent-dark),var(--accent) 55%,#04121f 100%);
}

/* ---------------- desktop ---------------- */
#desktop{position:absolute;inset:0 0 var(--taskbar-h) 0;z-index:1;outline:none}
#desktop-icons{position:absolute;inset:0;padding:8px;display:grid;grid-auto-flow:column;grid-template-rows:repeat(auto-fill, 92px);grid-auto-columns:88px;align-content:start;justify-content:start;gap:2px}
.d-icon{
  width:84px;height:88px;border-radius:2px;display:flex;flex-direction:column;align-items:center;
  padding:8px 2px 4px;gap:5px;position:relative;overflow:hidden;
}
.d-icon .ico{width:38px;height:38px;filter:drop-shadow(0 2px 3px rgba(0,0,0,.5));pointer-events:none}
.d-icon .ico svg{width:38px;height:38px}
.d-icon .lbl{
  font-size:11.5px;line-height:1.25;text-align:center;max-width:84px;color:#fff;
  text-shadow:0 1px 2px rgba(0,0,0,.85),0 0 6px rgba(0,0,0,.5);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;word-break:break-word;
}
.d-icon:hover{background:rgba(255,255,255,.12);outline:1px solid rgba(255,255,255,.18)}
.d-icon.selected{background:rgba(0,120,215,.34);outline:1px solid rgba(120,200,255,.65)}
.d-icon.dragging{opacity:.5}
#desktop-marquee{position:absolute;border:1px solid rgba(0,160,255,.9);background:rgba(0,120,215,.25);pointer-events:none;display:none;z-index:3}

/* ---------------- boot / lock / shutdown ---------------- */
.overlay-screen{position:absolute;inset:0;z-index:9000}
#lockscreen{background:#000;overflow:hidden}
#lockscreen .lock-bg{position:absolute;inset:-20px;background-size:cover;background-position:center;filter:brightness(.72)}
#lockscreen::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.1),rgba(0,0,0,.45))}
#lockscreen .lock-content{position:absolute;left:11vh;top:16vh;z-index:2;transition:opacity .35s, transform .35s}
#lockscreen.signing .lock-content{opacity:0;transform:translateY(-18px)}
#lock-clock{font-size:clamp(64px,10vw,120px);font-weight:400;letter-spacing:-2px;line-height:1;text-shadow:0 2px 20px rgba(0,0,0,.55)}
#lock-date{font-size:clamp(20px,2.4vw,30px);font-weight:300;margin-top:10px;text-shadow:0 2px 12px rgba(0,0,0,.6)}
#lock-hint{position:fixed;left:11vh;bottom:7vh;font-size:12.5px;opacity:.6;letter-spacing:.3px}
#lockscreen.signin-open .lock-content{opacity:0;transform:translateY(-14px)}
#lockscreen.signin-open #lock-hint{opacity:0}
#lockscreen.done{opacity:0;transition:opacity .45s ease}
#lockscreen:hover #lock-hint{opacity:1}
.signin{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;z-index:3;
  background:rgba(0,0,0,.38);backdrop-filter:blur(26px) saturate(1.2);animation:fadeIn .3s;
}
.avatar{
  width:104px;height:104px;border-radius:50%;display:grid;place-items:center;
  font-size:42px;font-weight:300;color:#fff;background:linear-gradient(160deg,#4ea6e6,#0b5a9c 70%);
  box-shadow:0 8px 30px rgba(0,0,0,.4);border:2px solid rgba(255,255,255,.35);margin-bottom:4px;
}
.signin-name{font-size:26px;font-weight:300;letter-spacing:.2px;text-shadow:0 2px 10px rgba(0,0,0,.5)}
.signin-box{display:flex;align-items:center;gap:0;margin-top:8px;background:rgba(255,255,255,.94);border-radius:2px;padding:0 0 0 12px;width:300px;box-shadow:0 6px 24px rgba(0,0,0,.35)}
.signin-box input{flex:1;height:38px;border:0;outline:none;background:transparent;color:#111;font-size:13.5px}
.signin-box button{width:42px;height:38px;color:#111;font-size:17px;border-left:1px solid rgba(0,0,0,.12)}
.signin-box button:hover{background:rgba(0,0,0,.07)}
.signin-sub{font-size:11.5px;opacity:.68;margin-top:10px}
#shutdown-screen{position:absolute;inset:0;z-index:9500;background:#000;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px}
.sd-text{color:#ddd;font-size:15px;font-weight:300;letter-spacing:.4px}
.win-spinner{display:flex;gap:6px}
.win-spinner span{width:6px;height:6px;border-radius:50%;background:#fff;animation:winSpin 1.8s infinite ease-in-out}
.win-spinner span:nth-child(1){animation-delay:-1.6s}
.win-spinner span:nth-child(2){animation-delay:-1.44s}
.win-spinner span:nth-child(3){animation-delay:-1.28s}
.win-spinner span:nth-child(4){animation-delay:-1.12s}
.win-spinner span:nth-child(5){animation-delay:-.96s}
@keyframes winSpin{0%,80%,100%{transform:scale(.35);opacity:.35}40%{transform:scale(1);opacity:1}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes fadeInUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* boot splash */
#boot-screen{position:absolute;inset:0;background:#000;z-index:9600;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:34px;transition:opacity .5s}
#boot-screen.done{opacity:0;pointer-events:none}
.boot-logo{color:#fff;opacity:.95;filter:drop-shadow(0 0 24px rgba(0,150,255,.4))}

/* ---------------- generic helpers ---------------- */
.row{display:flex;align-items:center}
.col{display:flex;flex-direction:column}
.grow{flex:1}
.muted{color:var(--muted)}
.hr{height:1px;background:var(--line);margin:8px 0}
.badge{background:var(--accent);color:#fff;border-radius:10px;padding:0 6px;font-size:10.5px;font-weight:600;height:16px;display:inline-flex;align-items:center}
.acrylic{backdrop-filter:blur(30px) saturate(1.25);-webkit-backdrop-filter:blur(30px) saturate(1.25)}