/* ---- system pack: snapping, ghosts, control/notification center, screensaver, cinematic, modes ---- */
#snap-preview { position:absolute; display:none; z-index:9999; background:color-mix(in srgb, var(--accent) 22%, transparent); border:2px solid var(--accent); border-radius:12px; pointer-events:none; transition:all .12s; }
.ghost-win { position:absolute; border-radius:12px; background:rgba(140,140,160,.18); border:1.5px dashed rgba(140,140,160,.5); pointer-events:none; z-index:9998; animation:ghostin .4s; }
@keyframes ghostin { from{opacity:0; transform:scale(.96)} }

#dimmer { position:fixed; inset:0; background:#000; opacity:0; pointer-events:none; z-index:980; transition:opacity .3s; }

/* ---- launchpad ---- */
#launchpad { position:fixed; inset:0; z-index:880; display:flex; flex-direction:column; align-items:center; padding-top:7vh; background:rgba(20,20,30,.45); backdrop-filter:blur(28px) saturate(1.4); -webkit-backdrop-filter:blur(28px) saturate(1.4); animation:lpin .25s; }
@keyframes lpin { from{opacity:0; transform:scale(1.06)} }
#launchpad.lp-out { opacity:0; transform:scale(1.05); transition:all .22s; }
#launchpad .lp-search { width:320px; padding:9px 18px; border-radius:11px; border:1px solid rgba(255,255,255,.25); background:rgba(255,255,255,.14); color:#fff; font-size:14px; outline:none; text-align:center; }
#launchpad .lp-search::placeholder { color:rgba(255,255,255,.55); }
#launchpad .lp-grid { margin-top:4vh; display:grid; grid-template-columns:repeat(auto-fill, 110px); justify-content:center; gap:26px 10px; width:min(860px, 92vw); max-height:66vh; overflow:auto; padding:10px; }
#launchpad .lp-app { display:flex; flex-direction:column; align-items:center; gap:7px; cursor:pointer; animation:lpapp .35s backwards; }
@keyframes lpapp { from{opacity:0; transform:translateY(14px) scale(.8)} }
#launchpad .lp-app .lp-ic { width:62px; height:62px; transition:transform .15s; filter:drop-shadow(0 6px 14px rgba(0,0,0,.35)); }
#launchpad .lp-app .lp-ic svg { width:62px; height:62px; }
#launchpad .lp-app:hover .lp-ic { transform:scale(1.14); }
#launchpad .lp-app span { color:#fff; font-size:12.5px; text-shadow:0 1px 6px rgba(0,0,0,.6); }
#launchpad .lp-hint { position:absolute; bottom:22px; color:rgba(255,255,255,.5); font-size:12px; }

#ccpanel { position:fixed; top:36px; right:12px; z-index:870; width:320px; border-radius:16px; padding:14px; display:flex; flex-direction:column; gap:11px; box-shadow:var(--shadow); }
#ccpanel .cc-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
#ccpanel .cc-t { border:1px solid var(--border); background:var(--glass); color:var(--text); border-radius:11px; padding:10px 8px; font-size:12.5px; text-align:left; }
#ccpanel .cc-t.on { background:var(--accent); color:#fff; border-color:transparent; }
#ccpanel label { font-size:12.5px; display:flex; align-items:center; gap:8px; color:var(--text-dim); }
#ccpanel input[type=range] { flex:1; accent-color:var(--accent); }
#ccpanel .cc-row { display:flex; gap:8px; }
#ccpanel .cc-row .tool-btn { flex:1; }

#ncpanel { position:fixed; top:36px; right:12px; bottom:80px; z-index:870; width:320px; border-radius:16px; padding:12px; overflow:auto; box-shadow:var(--shadow); }
#ncpanel .nc-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; }
#ncpanel .nc-item { display:flex; gap:10px; padding:9px 6px; border-bottom:1px solid var(--border); font-size:13px; align-items:flex-start; }
#ncpanel .nc-item small { color:var(--text-dim); }
#ncpanel .nc-empty { color:var(--text-dim); font-size:13px; text-align:center; padding:30px 0; }

#saver { position:fixed; inset:0; z-index:1200; background:#000; cursor:none; }

#cinematic { position:fixed; inset:0; z-index:2000; background:#000; transition:opacity .9s; }
#cinematic canvas { position:absolute; inset:0; }
#cinematic .cine-text { position:absolute; bottom:18%; width:100%; text-align:center; color:#dfe8ff; font-size:22px; letter-spacing:.5px; text-shadow:0 2px 20px rgba(90,140,255,.6); }
#cinematic .cine-skip { position:absolute; bottom:24px; right:28px; background:rgba(255,255,255,.12); color:#fff; border:1px solid rgba(255,255,255,.25); border-radius:9px; padding:7px 16px; }

#credits { position:fixed; inset:0; z-index:1300; background:rgba(0,0,0,.93); overflow:hidden; color:#fff; text-align:center; }
#credits .roll { animation:roll 25s linear; font-size:16px; line-height:1.8; }
#credits h1 { font-size:44px; letter-spacing:6px; } #credits h2 { font-size:24px; }
#credits p { color:#9a9aa5; font-size:13px; }
@keyframes roll { from{transform:translateY(100vh)} to{transform:translateY(-160%)} }

#guest-banner { position:fixed; top:34px; left:50%; transform:translateX(-50%); z-index:890; background:var(--accent); color:#fff; padding:6px 18px; border-radius:0 0 12px 12px; font-size:13px; box-shadow:0 4px 16px rgba(0,0,0,.3); }

/* ---- spaces pills ---- */
.mb-spaces { display:flex; gap:4px; align-items:center; }
.mb-spaces i { font-style:normal; font-size:11px; width:18px; height:18px; display:flex; align-items:center; justify-content:center; border-radius:5px; cursor:pointer; color:var(--text-dim); background:rgba(120,120,128,.15); }
.mb-spaces i.on { background:var(--accent); color:#fff; }

/* ---- multiplayer cursors ---- */
.mp-cursor { position:fixed; z-index:1450; pointer-events:none; transition:left .9s linear, top .9s linear; display:flex; flex-direction:column; align-items:flex-start; }
.mp-cursor span { font-size:18px; transform:rotate(-70deg); text-shadow:0 1px 4px rgba(0,0,0,.4); }
.mp-cursor label { font-size:10.5px; background:currentColor; border-radius:8px; padding:1px 7px; margin:-4px 0 0 10px; }
.mp-cursor label { color:#fff !important; background:color-mix(in srgb, currentColor 100%, transparent); }

/* ---- fused windows ---- */
.fused { display:flex; height:100%; }
.fused .fpane { flex:1; min-width:0; overflow:auto; }
.fused .fpane + .fpane { border-left:2px solid var(--accent); }

/* glitch (haunted / self-destruct) */
body.glitch #desktop, body.glitch #menubar, body.glitch #dock { animation:glitch .18s infinite; }
body.glitch { filter:hue-rotate(140deg) contrast(1.3); }
@keyframes glitch { 0%{transform:translate(0)} 25%{transform:translate(-3px,1px) skewX(1deg)} 50%{transform:translate(2px,-2px)} 75%{transform:translate(-1px,2px) skewX(-1.5deg)} 100%{transform:translate(0)} }

/* villain mode */
body.villain { --accent:#d0021b; }
body.villain #wallpaper { filter:hue-rotate(120deg) saturate(1.6) brightness(.6); }
body.villain #dock .dicon { filter:hue-rotate(180deg) saturate(1.4); }
body.villain .window .titlebar { background:linear-gradient(180deg, rgba(120,0,10,.35), transparent); }

/* low battery + offline */
body.lowbatt #wallpaper { filter:saturate(.35) brightness(.7); }
body.offline #wallpaper { filter:grayscale(.8) brightness(.75); }
body.offline #menubar::after { content:'✈️ offline'; font-size:12px; color:var(--text-dim); }