/* NEXUS OS — near-black, one red accent, fast precise motion, phone-first */
:root{
  --bg:#0a0b0d; --bg2:#101216; --card:#14171c; --line:#22262e; --line2:#2c313a;
  --fg:#e8eaee; --dim:#8b939f; --red:#e10600; --ok:#22c55e; --warn:#f59e0b;
  --r:14px; --r2:10px; --ease:cubic-bezier(.22,.61,.36,1);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%;margin:0;background:var(--bg);color:var(--fg);
  font:15px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  overscroll-behavior:none;touch-action:manipulation;overflow:hidden}
.micro{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.mono{font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}
.dim{opacity:.65}.grow{flex:1}.hide{display:none!important}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}

.layer{position:fixed;inset:0;display:flex;flex-direction:column}

/* ---------- boot ---------- */
#boot{align-items:center;justify-content:center;gap:14px;background:var(--bg);z-index:60}
.boot-mark{width:74px;height:74px;border-radius:18px;display:grid;place-items:center;
  background:linear-gradient(145deg,#1a1d23,#0e1013);border:1px solid var(--line2);
  color:var(--red);font:800 30px/1 -apple-system,sans-serif;letter-spacing:-.04em}
.boot-name{font:700 15px/1 -apple-system,sans-serif;letter-spacing:.3em;color:var(--fg)}
.boot-bar{width:170px;height:3px;background:#1b1f26;border-radius:2px;overflow:hidden}
.boot-bar i{display:block;height:100%;width:0;background:var(--red);transition:width .35s var(--ease)}
.boot-log{height:78px;width:78%;margin-top:6px;font:11px/1.5 ui-monospace,SFMono-Regular,monospace;
  color:#6f7a88;overflow:hidden;text-align:left}
.boot-log b{color:var(--ok);font-weight:400}

/* ---------- lock ---------- */
#lock{align-items:center;justify-content:space-between;padding:calc(env(safe-area-inset-top) + 46px) 22px 40px;z-index:50;
  background:radial-gradient(120% 80% at 50% 0%,#15181e 0%,#0a0b0d 65%)}
.lock-clock{text-align:center}
#lock-time{font:200 62px/1 -apple-system,sans-serif;letter-spacing:-.03em}
.lock-brand{text-align:center}
.lock-pin{width:100%;max-width:290px;text-align:center}
#pin-label{text-align:center;margin-bottom:12px}
.pin-dots{display:flex;justify-content:center;gap:12px;margin-bottom:20px}
.pin-dots i{width:11px;height:11px;border-radius:50%;border:1px solid var(--line2);transition:.16s var(--ease)}
.pin-dots i.on{background:var(--red);border-color:var(--red);transform:scale(1.12)}
.keypad{display:grid;grid-template-columns:repeat(3,1fr);gap:11px}
.keypad button{aspect-ratio:1;border-radius:50%;background:#16191f;border:1px solid var(--line);
  font-size:21px;transition:transform .12s var(--ease),background .12s}
.keypad button:active{transform:scale(.94);background:#1d2129}
.keypad button.wide{font-size:12px;letter-spacing:.1em}
#pin-hint{margin-top:14px;text-align:center}
.shake{animation:sh .3s}
@keyframes sh{0%,100%{transform:translateX(0)}25%{transform:translateX(-7px)}75%{transform:translateX(7px)}}

/* ---------- desktop ---------- */
#wallpaper{position:absolute;inset:0;z-index:0;background:
  radial-gradient(90% 60% at 12% 0%,#1b2029 0%,transparent 60%),
  radial-gradient(80% 60% at 100% 100%,#241315 0%,transparent 55%),#0a0b0d}
#statusbar{position:relative;z-index:5;display:flex;align-items:center;gap:9px;
  padding:calc(env(safe-area-inset-top) + 6px) 14px 6px;font-size:12px}
.sb-sep{width:1px;height:11px;background:var(--line2)}
#home{position:relative;z-index:1;flex:1;overflow-y:auto;padding:6px 16px 120px}
.home-clock{padding:14px 2px 20px}
#home-time{font:200 40px/1 -apple-system,sans-serif;letter-spacing:-.03em}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px 10px}
.app{display:flex;flex-direction:column;align-items:center;gap:7px;
  transition:transform .14s var(--ease)}
.app:active{transform:scale(.9)}
.app .ic{width:56px;height:56px;border-radius:15px;display:grid;place-items:center;font-size:23px;
  background:linear-gradient(150deg,#1c2027,#12151a);border:1px solid var(--line2);position:relative;overflow:hidden}
.app .ic:after{content:"";position:absolute;inset:0;background:linear-gradient(160deg,rgba(255,255,255,.07),transparent 55%)}
.app span{font-size:11px;color:#c9ced6;text-align:center;line-height:1.2;max-width:72px}
#dock{position:absolute;left:12px;right:12px;bottom:calc(env(safe-area-inset-bottom) + 10px);z-index:6;
  display:flex;gap:8px;padding:9px 10px;border-radius:18px;background:rgba(16,18,22,.82);
  border:1px solid var(--line);backdrop-filter:blur(14px);overflow-x:auto;scrollbar-width:none}
#dock::-webkit-scrollbar{display:none}
#dock button{min-width:44px;height:38px;border-radius:11px;background:#1b1f26;border:1px solid var(--line2);
  display:grid;place-items:center;font-size:17px;position:relative;transition:transform .12s var(--ease)}
#dock button:active{transform:translateY(2px) scale(.96)}
#dock button.running:after{content:"";position:absolute;bottom:3px;width:4px;height:4px;border-radius:50%;background:var(--red)}

/* ---------- windows ---------- */
#windows{position:absolute;inset:0;z-index:7;pointer-events:none}
.win{position:absolute;left:10px;right:10px;top:calc(env(safe-area-inset-top) + 30px);bottom:calc(env(safe-area-inset-bottom) + 74px);
  pointer-events:auto;display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line2);
  border-radius:var(--r);overflow:hidden;box-shadow:0 22px 60px rgba(0,0,0,.55);
  animation:winin .18s var(--ease)}
@keyframes winin{from{opacity:0;transform:translateY(12px) scale(.985)}to{opacity:1;transform:none}}
.win.max{left:0;right:0;top:env(safe-area-inset-top);bottom:env(safe-area-inset-bottom);border-radius:0;border-width:0 0 1px}
.win .tb{display:flex;align-items:center;gap:9px;padding:10px 12px;background:#171a20;border-bottom:1px solid var(--line);
  touch-action:none;cursor:grab}
.win .tb .t{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:#d5dae1;flex:1;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.win .tb .dot{width:9px;height:9px;border-radius:50%;background:var(--red)}
.win .tb button{width:28px;height:28px;border-radius:8px;background:#20242c;border:1px solid var(--line2);display:grid;place-items:center;font-size:13px}
.win .body{flex:1;overflow:auto;-webkit-overflow-scrolling:touch;padding:12px}

/* ---------- shared UI ---------- */
.row{display:flex;align-items:center;gap:10px;padding:11px 12px;border:1px solid var(--line);border-radius:var(--r2);background:#12151a;margin-bottom:8px}
.row b{font-weight:600}.row .grow{flex:1}
.btn{padding:11px 14px;border-radius:var(--r2);background:#1b1f26;border:1px solid var(--line2);font-size:13px;
  transition:transform .12s var(--ease),background .12s}
.btn:active{transform:scale(.97);background:#232833}
.btn.red{background:var(--red);border-color:var(--red);color:#fff}
.btn.wide{width:100%;text-align:center}
 input,textarea,select{width:100%;background:#0e1114;border:1px solid var(--line2);color:var(--fg);
  border-radius:var(--r2);padding:11px;font:inherit;outline:none}
input[type=file]{position:fixed;left:-9999px;top:0;opacity:0;width:1px;height:1px;pointer-events:none}
.term{font:12px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;white-space:pre-wrap;word-break:break-word}
.term .p{color:var(--red)}.term .o{color:#aeb6c2}.term .e{color:#ff7b6b}
.term-in{display:flex;gap:6px;align-items:center;border-top:1px solid var(--line);padding:8px 10px;background:#101318}
.term-in input{border:0;background:transparent;padding:6px 0;font:12px/1.4 ui-monospace,monospace}
.seg{display:flex;gap:6px;flex-wrap:wrap}
.seg button{padding:8px 11px;border-radius:9px;background:#171b21;border:1px solid var(--line2);font-size:12px}
.seg button.on{background:var(--red);border-color:var(--red);color:#fff}
.hint{font-size:11px;color:var(--dim);line-height:1.5}
.sketch{width:100%;height:100%;background:#0e1114;border-radius:var(--r2);touch-action:none}
.gal{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.gal img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:9px;border:1px solid var(--line)}
.note-item{padding:10px;border:1px solid var(--line);border-radius:9px;margin-bottom:6px;background:#12151a}
#toasts{position:absolute;left:14px;right:14px;bottom:calc(env(safe-area-inset-bottom) + 76px);z-index:30;display:flex;flex-direction:column;gap:7px;pointer-events:none}
.toast{background:rgba(20,23,28,.96);border:1px solid var(--line2);border-left:3px solid var(--red);
  border-radius:10px;padding:10px 12px;font-size:12px;animation:tin .18s var(--ease)}
.toast.ok{border-left-color:var(--ok)}.toast.err{border-left-color:#ff5a4d}
@keyframes tin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}