/* ---- Karan OS system tokens ---- */
:root {
  --accent: #0a84ff;
  --bg: #f2f2f7;
  --text: #1d1d1f;
  --text-dim: rgba(29,29,31,.55);
  --glass: rgba(255,255,255,.55);
  --glass-strong: rgba(255,255,255,.72);
  --border: rgba(0,0,0,.12);
  --shadow: 0 18px 50px rgba(0,0,0,.28);
  --radius: 12px;
  --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  /* top/bottom system chrome the desktop must clear; mobile overrides in mobile.css */
  --chrome-t: 30px;
  --chrome-b: 0px;
}
body.dark {
  --bg: #1c1c1e;
  --text: #f5f5f7;
  --text-dim: rgba(245,245,247,.55);
  --glass: rgba(30,30,32,.55);
  --glass-strong: rgba(38,38,40,.78);
  --border: rgba(255,255,255,.14);
}
* { margin:0; padding:0; box-sizing:border-box; }
html,body { height:100%; overflow:hidden; }
body { font-family:var(--font); color:var(--text); background:#000; user-select:none; }
button { font-family:inherit; cursor:pointer; }
input,textarea,select { font-family:inherit; color:inherit; }
.glass { background:var(--glass); backdrop-filter:blur(24px) saturate(1.6); -webkit-backdrop-filter:blur(24px) saturate(1.6); border:1px solid var(--border); }

/* ---- wallpaper canvas ---- */
#wallpaper { position:fixed; inset:0; z-index:0; }

/* ---- boot screen ---- */
#boot { position:fixed; inset:0; z-index:1000; background:#000; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:40px; transition:opacity .8s; }
#boot .klogo { font-size:84px; font-weight:700; color:#fff; letter-spacing:-4px; }
#boot .bar { width:220px; height:5px; border-radius:3px; background:rgba(255,255,255,.2); overflow:hidden; }
#boot .bar i { display:block; height:100%; width:0; background:#fff; border-radius:3px; transition:width .3s; }

/* ---- lock screen ---- */
#lock { position:fixed; inset:0; z-index:900; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; backdrop-filter:blur(30px); -webkit-backdrop-filter:blur(30px); background:rgba(0,0,0,.25); color:#fff; transition:opacity .6s, transform .6s; }
#lock .lk-time { font-size:96px; font-weight:600; letter-spacing:-3px; text-shadow:0 4px 30px rgba(0,0,0,.4); }
#lock .lk-date { font-size:20px; opacity:.85; margin-top:-10px; }
#lock .lk-avatar { margin-top:60px; width:74px; height:74px; border-radius:50%; background:linear-gradient(135deg,#0a84ff,#bf5af2); display:flex; align-items:center; justify-content:center; font-size:32px; font-weight:700; box-shadow:0 6px 24px rgba(0,0,0,.4); }
#lock .lk-name { font-size:17px; font-weight:600; }
#lock .lk-hint { font-size:13px; opacity:.7; animation:pulse 2.2s infinite; }
@keyframes pulse { 0%,100%{opacity:.4} 50%{opacity:.9} }
#lock.unlocking { opacity:0; transform:translateY(-40px); pointer-events:none; }

/* ---- dynamic island notifications ---- */
#island { position:fixed; top:34px; left:50%; transform:translateX(-50%) scale(.6); z-index:800; background:rgba(0,0,0,.85); color:#fff; padding:10px 22px; border-radius:22px; font-size:13.5px; display:flex; align-items:center; gap:9px; opacity:0; pointer-events:none; transition:transform .45s cubic-bezier(.34,1.56,.64,1), opacity .3s; box-shadow:0 8px 28px rgba(0,0,0,.35); }
#island.show { opacity:1; transform:translateX(-50%) scale(1); }

/* ---- spotlight ---- */
#spotlight { position:fixed; inset:0; z-index:850; display:none; align-items:flex-start; justify-content:center; padding-top:18vh; background:rgba(0,0,0,.18); }
#spotlight.open { display:flex; }
#spotlight .sp-box { width:540px; border-radius:14px; overflow:hidden; box-shadow:var(--shadow); }
#spotlight input { width:100%; border:none; outline:none; background:transparent; font-size:22px; padding:16px 20px; }
#spotlight .sp-list { max-height:300px; overflow:auto; }
#spotlight .sp-item { padding:11px 20px; display:flex; gap:12px; align-items:center; font-size:15px; cursor:pointer; }
#spotlight .sp-item.sel, #spotlight .sp-item:hover { background:var(--accent); color:#fff; }

/* ---- KIRA ---- */
#kira { position:fixed; bottom:110px; right:26px; z-index:860; width:280px; border-radius:18px; padding:18px; display:none; flex-direction:column; gap:12px; box-shadow:var(--shadow); }
#kira.open { display:flex; }
#kira .orb { width:56px; height:56px; align-self:center; border-radius:50%; background:radial-gradient(circle at 32% 30%, #7dd3fc, var(--accent) 60%, #bf5af2); box-shadow:0 0 24px var(--accent); transition:transform .2s; }
#kira.listening .orb { animation:orb 1s infinite; }
@keyframes orb { 0%,100%{transform:scale(1)} 50%{transform:scale(1.18); box-shadow:0 0 40px var(--accent)} }
#kira .kira-text { text-align:center; font-size:13.5px; min-height:34px; color:var(--text-dim); }
#kira input { border:1px solid var(--border); background:var(--glass-strong); border-radius:9px; padding:8px 12px; font-size:13.5px; outline:none; }
#kira .kbtns { display:flex; gap:8px; justify-content:center; }
#kira .kbtns button { border:none; border-radius:9px; padding:7px 14px; font-size:12.5px; background:var(--accent); color:#fff; }

/* ---- mission control ---- */
body.mission #dock, body.mission #menubar { opacity:0; pointer-events:none; }
#mc-hint { position:fixed; top:20px; left:50%; transform:translateX(-50%); z-index:700; color:#fff; font-size:14px; opacity:0; transition:opacity .3s; pointer-events:none; text-shadow:0 2px 8px rgba(0,0,0,.6); }
body.mission #mc-hint { opacity:.9; }

/* ---- matrix rain canvas ---- */
#matrix { position:fixed; inset:0; z-index:950; background:rgba(0,0,0,.92); display:none; }
#matrix.on { display:block; }