/* ============ wallpaper / desktop ============ */
#wallpaper { position:fixed; inset:0; width:100%; height:100%; z-index:0; }
#desktop { position:fixed; inset:25px 0 0 0; z-index:1; }
#windows { position:fixed; inset:0; z-index:100; pointer-events:none; }
#windows > * { pointer-events:auto; }
#panel-layer { position:fixed; inset:0; z-index:900; pointer-events:none; }
#panel-layer > * { pointer-events:auto; }
#overlay-layer { position:fixed; inset:0; z-index:950; pointer-events:none; }
#overlay-layer > * { pointer-events:auto; }

.desk-icon { position:absolute; width:84px; display:flex; flex-direction:column; align-items:center; gap:2px; cursor:default; }
.desk-icon .di-img { width:48px; height:48px; display:flex; align-items:center; justify-content:center; border-radius:6px; position:relative; }
.desk-icon .di-img svg { width:44px; height:44px; filter:drop-shadow(0 1px 2px rgba(0,0,0,.35)); }
.desk-icon .di-label {
  font-size:12px; color:#fff; text-align:center; line-height:1.2; max-width:84px;
  text-shadow:0 1px 3px rgba(0,0,0,.6); padding:1px 5px; border-radius:4px;
  overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  word-break:break-word;
}
.desk-icon.selected .di-img::after { content:""; position:absolute; inset:-4px; background:rgba(255,255,255,.28); border-radius:8px; box-shadow:inset 0 0 0 1px rgba(255,255,255,.3); }
.desk-icon.selected .di-label { background:var(--label-sel); text-shadow:none; }
.desk-icon.renaming .di-label { background:#fff; color:#000; text-shadow:none; outline:none; box-shadow:0 0 0 3px rgba(var(--accent-rgb),.6); }
.rubber-band { position:fixed; z-index:90; border:1px solid rgba(255,255,255,.65); background:rgba(255,255,255,.14); pointer-events:none; }

.hotcorner-tip { position:fixed; z-index:20; width:26px; height:26px; }

/* ============ menu bar ============ */
#menubar {
  position:fixed; top:0; left:0; right:0; height:25px; z-index:800;
  display:flex; align-items:center; padding:0 10px 0 14px; gap:2px;
  background:var(--menubar-bg); color:var(--menubar-text);
  -webkit-backdrop-filter:blur(30px) saturate(1.9); backdrop-filter:blur(30px) saturate(1.9);
  box-shadow:0 .5px 0 rgba(0,0,0,.14);
  transition:transform .3s, background .3s;
}
html[data-theme="dark"] #menubar { box-shadow:0 .5px 0 rgba(0,0,0,.5); }
#menubar.mb-hidden { transform:translateY(-100%); }
.mb-item { display:flex; align-items:center; height:21px; padding:0 9px; border-radius:5px; font-size:13px; white-space:nowrap; }
.mb-item.app-name { font-weight:700; }
.mb-item:hover, .mb-item.open { background:rgba(255,255,255,.28); }
html[data-theme="dark"] .mb-item:hover, html[data-theme="dark"] .mb-item.open { background:rgba(255,255,255,.18); }
.mb-item svg { height:15px; width:auto; display:block; }
.mb-apple svg { height:17px; }
.mb-spacer { flex:1; }
.mb-status { display:flex; align-items:center; gap:2px; }
.mb-status .mb-item { padding:0 7px; }
.mb-clock { font-variant-numeric:tabular-nums; }
.mb-batt { display:flex; align-items:center; gap:3px; font-size:12px; }
@media (max-width:560px) {
  .mb-batt, .mb-item[data-st="wifi"] { display:none; }
  .mb-status .mb-item { padding:0 5px; }
  .mb-item { padding:0 7px; }
  .mb-m-window, .mb-m-help, .mb-m-go { display:none; }
}
@media (max-width:430px) {
  .mb-m-view, .mb-m-format { display:none; }
  .mb-item { padding:0 5px; }
}

/* ============ dock ============ */
#dock-wrap { position:fixed; left:0; right:0; bottom:0; z-index:700; display:flex; justify-content:center; pointer-events:none; }
#dock-wrap.left, #dock-wrap.right { top:25px; right:auto; bottom:0; left:0; flex-direction:column; align-items:flex-start; justify-content:center; }
#dock-wrap.right { left:auto; right:0; align-items:flex-end; }
#dock {
  display:flex; align-items:flex-end; gap:3px; padding:4px 6px; margin-bottom:7px;
  background:var(--dock-bg); border-radius:22px;
  -webkit-backdrop-filter:blur(35px) saturate(1.9); backdrop-filter:blur(35px) saturate(1.9);
  box-shadow:inset 0 0 0 .5px var(--dock-border), 0 8px 30px rgba(0,0,0,.28);
  pointer-events:auto; transition:transform .3s cubic-bezier(.3,.9,.3,1), opacity .3s;
}
#dock-wrap.left #dock, #dock-wrap.right #dock { flex-direction:column; align-items:center; margin-bottom:0; margin-left:7px; }
#dock-wrap.right #dock { margin-left:0; margin-right:7px; }
#dock-wrap.hidden-dock #dock { transform:translateY(110%); opacity:0; }
#dock-wrap.left.hidden-dock #dock { transform:translateX(-115%); }
#dock-wrap.right.hidden-dock #dock { transform:translateX(115%); }
.dock-icon { position:relative; display:flex; align-items:flex-end; justify-content:center; cursor:default; transition:width .08s; }
.dock-icon .ic { display:block; will-change:transform; transform-origin:bottom center; }
.dock-icon svg { display:block; filter:drop-shadow(0 2px 4px rgba(0,0,0,.2)); }
.dock-icon .running-dot { position:absolute; bottom:-4px; left:50%; transform:translateX(-50%); width:4px; height:4px; border-radius:50%; background:rgba(0,0,0,.55); }
html[data-theme="dark"] .dock-icon .running-dot { background:rgba(255,255,255,.7); }
#dock-wrap.left .running-dot { left:auto; right:-5px; bottom:50%; transform:translateY(50%); }
#dock-wrap.right .running-dot { left:-5px; bottom:50%; transform:translateY(50%); }
.dock-sep { width:1px; align-self:stretch; margin:6px 4px; background:var(--border-strong); flex:none; }
#dock-wrap.left .dock-sep, #dock-wrap.right .dock-sep { width:auto; height:1px; margin:4px 6px; }
.dock-icon.bounce .ic { animation:dockBounce .85s cubic-bezier(.3,.9,.4,1) 2; }
@keyframes dockBounce { 0%,100%{transform:translateY(0) scale(var(--mag,1));} 40%{transform:translateY(calc(var(--sz,52px) * -0.55)) scale(var(--mag,1));} }
.dock-icon.attn .ic { animation:dockBounce .8s cubic-bezier(.3,.9,.4,1) infinite; }
.min-win { border-radius:6px; overflow:hidden; box-shadow:0 0 0 .5px var(--border-strong), 0 2px 8px rgba(0,0,0,.25); background:var(--content-bg); }

/* ============ windows ============ */
.window {
  position:absolute; display:flex; flex-direction:column;
  border-radius:11px; box-shadow:var(--win-shadow);
  background:var(--window-bg); overflow:hidden; min-width:180px; min-height:110px;
}
.window.unfocused { box-shadow:var(--win-shadow-bg); }
.window.opening { animation:winIn .2s cubic-bezier(.25,1.1,.4,1); }
@keyframes winIn { from{opacity:0; transform:scale(.93);} }
.window.closing { animation:winOut .13s ease-in forwards; }
@keyframes winOut { to{opacity:0; transform:scale(.96);} }
.window.fullscreen { border-radius:0; }
.titlebar {
  height:29px; flex:none; display:flex; align-items:center; position:relative;
  background:var(--titlebar-bg); -webkit-backdrop-filter:blur(25px); backdrop-filter:blur(25px);
  border-bottom:.5px solid var(--border);
}
.titlebar .wt { position:absolute; left:0; right:0; text-align:center; font-size:13px; font-weight:600; color:var(--text); pointer-events:none; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; padding:0 90px; }
.window.unfocused .titlebar .wt { color:var(--text-3); }
.window.unfocused .titlebar { background:var(--titlebar-bg); }
.traffic { position:absolute; left:9px; top:50%; transform:translateY(-50%); display:flex; gap:8px; z-index:5; }
.tl { width:12px; height:12px; border-radius:50%; display:flex; align-items:center; justify-content:center; position:relative; }
.tl svg { width:8px; height:8px; opacity:0; }
.tl.red { background:#ff5f57; box-shadow:inset 0 0 0 .5px #d94b43; }
.tl.yellow { background:#febc2e; box-shadow:inset 0 0 0 .5px #d89e24; }
.tl.green { background:#28c840; box-shadow:inset 0 0 0 .5px #1dad2b; }
.window.unfocused .tl { background:#d6d6d6; box-shadow:inset 0 0 0 .5px #b5b5b5; }
html[data-theme="dark"] .window.unfocused .tl { background:#58585e; box-shadow:inset 0 0 0 .5px #46464c; }
.traffic:hover .tl svg { opacity:1; }
.tl.tl-disabled { background:#d6d6d6 !important; box-shadow:inset 0 0 0 .5px #b5b5b5 !important; }
.titlebar-toolbar { height:53px; }
.window-body { flex:1; overflow:hidden; display:flex; position:relative; }
/* resize handles live INSIDE the window bounds — .window has overflow:hidden which
   would clip anything outside, so keep all insets >= 0 */
.rs { position:absolute; z-index:400; }
.rs.n { top:0; left:14px; right:14px; height:7px; cursor:n-resize; }
.rs.s { bottom:0; left:14px; right:14px; height:7px; cursor:s-resize; }
.rs.e { right:0; top:14px; bottom:14px; width:7px; cursor:e-resize; }
.rs.w { left:0; top:14px; bottom:14px; width:7px; cursor:w-resize; }
.rs.ne { top:0; right:0; width:22px; height:22px; cursor:ne-resize; }
.rs.nw { top:0; left:0; width:22px; height:22px; cursor:nw-resize; }
.rs.se { bottom:0; right:0; width:22px; height:22px; cursor:se-resize; }
.rs.sw { bottom:0; left:0; width:22px; height:22px; cursor:sw-resize; }
.win-drag-ghost { position:fixed; z-index:850; border-radius:11px; box-shadow:var(--win-shadow); background:var(--window-bg); opacity:.85; pointer-events:none; }

/* ============ boot / login ============ */
body.login-mode #dock-wrap, body.login-mode #desktop, body.login-mode #windows { display:none !important; }
body.login-mode #menubar { visibility:hidden; }
#boot-screen { position:fixed; inset:0; z-index:2000; background:#000; display:flex; flex-direction:column; align-items:center; justify-content:center; transition:opacity .8s; }
#boot-screen.fade { opacity:0; pointer-events:none; }
.boot-apple { width:80px; height:80px; margin-bottom:60px; }
.boot-apple svg { width:100%; height:100%; fill:#e8e8e8; }
.boot-bar { width:210px; height:5px; border-radius:3px; background:rgba(255,255,255,.25); overflow:hidden; }
.boot-bar i { display:block; height:100%; width:0%; border-radius:3px; background:#e8e8e8; transition:width .3s ease; }
.boot-note { position:absolute; bottom:34px; color:rgba(255,255,255,.4); font-size:11px; }
#boot-screen.login { background:transparent; }
.login-wrap { display:flex; flex-direction:column; align-items:center; margin-top:-40px; }
.login-clock { color:#fff; font-size:78px; font-weight:300; letter-spacing:1px; text-shadow:0 2px 20px rgba(0,0,0,.35); margin-bottom:6px; }
.login-date { color:rgba(255,255,255,.9); font-size:20px; font-weight:500; text-shadow:0 1px 10px rgba(0,0,0,.35); margin-bottom:70px; }
.login-avatar { width:96px; height:96px; border-radius:50%; overflow:hidden; margin-bottom:12px; box-shadow:0 4px 20px rgba(0,0,0,.3); }
.login-avatar svg { width:100%; height:100%; }
.login-name { color:#fff; font-size:19px; font-weight:600; text-shadow:0 1px 8px rgba(0,0,0,.4); margin-bottom:14px; }
.login-pw { position:relative; }
.login-pw input {
  width:200px; height:32px; border:none; outline:none; border-radius:16px;
  background:rgba(255,255,255,.32); -webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px);
  color:#fff; font-size:13px; padding:0 34px 0 14px; text-align:left;
}
.login-pw input::placeholder { color:rgba(255,255,255,.75); }
.login-pw .pw-go { position:absolute; right:3px; top:3px; width:26px; height:26px; border-radius:50%; border:none; background:rgba(255,255,255,.35); color:#fff; display:flex; align-items:center; justify-content:center; }
.login-hint { color:rgba(255,255,255,.75); font-size:11.5px; margin-top:10px; text-shadow:0 1px 4px rgba(0,0,0,.4); }
.login-actions { position:fixed; bottom:44px; left:0; right:0; display:flex; gap:60px; justify-content:center; }
@media (max-width:700px) { .login-actions { gap:26px; bottom:30px; } }
.login-actions button { background:none; border:none; color:rgba(255,255,255,.9); font-size:12px; display:flex; flex-direction:column; align-items:center; gap:6px; }
.login-actions .la-ic { width:36px; height:36px; border-radius:50%; background:rgba(255,255,255,.2); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); display:flex; align-items:center; justify-content:center; }
.login-actions .la-ic svg { width:18px; height:18px; }
.login-spinner { width:22px; height:22px; margin-top:12px; }
.login-spinner svg { width:100%; height:100%; animation:spin 1s linear infinite; }
@keyframes spin { to{transform:rotate(360deg);} }

/* ============ Spotlight ============ */
.spotlight { position:fixed; left:50%; top:22%; transform:translateX(-50%); width:680px; z-index:960; }
.spot-box {
  background:var(--panel-bg); -webkit-backdrop-filter:blur(50px) saturate(1.9); backdrop-filter:blur(50px) saturate(1.9);
  border-radius:16px; box-shadow:0 20px 70px rgba(0,0,0,.4), 0 0 0 .5px var(--panel-border); overflow:hidden;
  animation:spotIn .15s cubic-bezier(.2,.9,.3,1.05);
}
@keyframes spotIn { from{opacity:0; transform:scale(.97) translateY(-6px);} }
.spot-input { display:flex; align-items:center; gap:11px; padding:14px 18px; }
.spot-input svg { width:21px; height:21px; color:var(--text-2); flex:none; }
.spot-input input { flex:1; border:none; outline:none; background:transparent; font-size:21px; font-weight:300; color:var(--text); }
.spot-input input::placeholder { color:var(--text-3); }
.spot-results { border-top:.5px solid var(--border-strong); max-height:380px; overflow:auto; display:flex; }
.spot-list { flex:1; min-width:0; padding:6px; }
.spot-cat { font-size:11px; font-weight:600; color:var(--text-3); padding:6px 10px 3px; }
.spot-row { display:flex; align-items:center; gap:9px; padding:5px 10px; border-radius:8px; font-size:13px; }
.spot-row.sel { background:var(--accent); color:#fff; }
.spot-row.sel .spot-sub { color:rgba(255,255,255,.7); }
.spot-row .sr-icon { width:21px; height:21px; flex:none; }
.spot-row .sr-icon svg { width:100%; height:100%; }
.spot-row .spot-sub { margin-left:auto; font-size:11px; color:var(--text-3); }
.spot-preview { width:230px; flex:none; border-left:.5px solid var(--border-strong); padding:18px; text-align:center; }
.spot-preview .sp-icon { width:64px; height:64px; margin:0 auto 10px; }
.spot-preview .sp-icon svg { width:100%; height:100%; }
.spot-preview .sp-name { font-size:13px; font-weight:600; margin-bottom:3px; }
.spot-preview .sp-kind { font-size:11px; color:var(--text-3); margin-bottom:8px; }
.spot-preview .sp-path { font-size:10px; color:var(--text-3); word-break:break-all; }
.spot-calc { padding:14px 18px; font-size:22px; font-weight:300; }

/* ============ Control Center ============ */
.cc-panel {
  position:fixed; top:30px; right:8px; width:330px; z-index:940;
  background:var(--panel-bg); -webkit-backdrop-filter:blur(50px) saturate(1.9); backdrop-filter:blur(50px) saturate(1.9);
  border-radius:16px; box-shadow:0 12px 45px rgba(0,0,0,.35), 0 0 0 .5px var(--panel-border);
  padding:11px; animation:ccIn .16s cubic-bezier(.2,.9,.3,1.02);
}
@keyframes ccIn { from{opacity:0; transform:scale(.96) translateY(-4px);} }
.cc-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.cc-module { background:var(--card-bg); border-radius:13px; padding:9px 11px; box-shadow:0 0 0 .5px var(--border); }
.cc-module.wide { grid-column:span 2; }
.cc-row { display:flex; align-items:center; gap:9px; padding:4px 0; }
.cc-ic { width:30px; height:30px; border-radius:50%; background:rgba(120,120,128,.25); display:flex; align-items:center; justify-content:center; flex:none; transition:background .2s; }
.cc-ic svg { width:16px; height:16px; color:#fff; }
.cc-ic.on { background:var(--accent); }
.cc-ic.on-green { background:#34c759; }
.cc-row .cc-t { font-size:12.5px; font-weight:500; line-height:1.2; }
.cc-row .cc-s { font-size:10.5px; color:var(--text-3); }
.cc-slider-row { display:flex; align-items:center; gap:10px; }
.cc-slider-row .cc-ic { width:26px; height:26px; }
.cc-slider-row .cc-ic svg { width:14px; height:14px; color:var(--text-2); }
.cc-slider-row input { flex:1; }
.cc-label { font-size:12.5px; font-weight:600; margin-bottom:5px; }
.cc-nowplaying { display:flex; align-items:center; gap:10px; }
.cc-album { width:38px; height:38px; border-radius:7px; background:linear-gradient(135deg,#fc5c7d,#6a82fb); flex:none; display:flex; align-items:center; justify-content:center; color:#fff; }

/* ============ Notification Center ============ */
.nc-panel {
  position:fixed; top:30px; right:8px; bottom:8px; width:340px; z-index:935;
  overflow-y:auto; padding:4px 2px 12px; animation:ncIn .25s cubic-bezier(.2,.9,.3,1);
  border-radius:14px;
}
@keyframes ncIn { from{opacity:0; transform:translateX(30px);} }
.nc-date { color:#fff; text-shadow:0 1px 8px rgba(0,0,0,.4); padding:8px 14px 10px; }
.nc-date .dow { font-size:24px; font-weight:300; }
.nc-date .full { font-size:13px; opacity:.85; }
.nc-notif, .nc-widget {
  background:var(--panel-bg); -webkit-backdrop-filter:blur(45px) saturate(1.9); backdrop-filter:blur(45px) saturate(1.9);
  border-radius:14px; box-shadow:0 3px 14px rgba(0,0,0,.22), 0 0 0 .5px var(--panel-border);
  margin:0 8px 9px; padding:11px 12px; position:relative;
}
.nc-notif .n-head { display:flex; align-items:center; gap:6px; margin-bottom:3px; }
.nc-notif .n-icon { width:18px; height:18px; }
.nc-notif .n-icon svg { width:100%; height:100%; border-radius:4px; }
.nc-notif .n-app { font-size:11px; color:var(--text-3); text-transform:uppercase; letter-spacing:.3px; flex:1; }
.nc-notif .n-time { font-size:11px; color:var(--text-3); }
.nc-notif .n-title { font-size:13px; font-weight:600; }
.nc-notif .n-body { font-size:12.5px; color:var(--text-2); line-height:1.35; }
.nc-notif .n-close { position:absolute; top:-6px; left:-6px; width:19px; height:19px; border-radius:50%; background:var(--card-bg); box-shadow:0 1px 4px rgba(0,0,0,.3), 0 0 0 .5px var(--border); display:none; align-items:center; justify-content:center; font-size:11px; color:var(--text-2); }
.nc-notif:hover .n-close { display:flex; }
.nc-widgets { display:grid; grid-template-columns:1fr 1fr; gap:0; }
.nc-widget.w2 { grid-column:span 2; }
.nc-widget .w-title { font-size:11px; font-weight:600; color:var(--text-3); text-transform:uppercase; letter-spacing:.4px; margin-bottom:6px; }

/* banners */
.banner {
  position:fixed; top:34px; right:12px; width:340px; z-index:970;
  background:var(--panel-bg); -webkit-backdrop-filter:blur(45px) saturate(1.9); backdrop-filter:blur(45px) saturate(1.9);
  border-radius:14px; box-shadow:0 8px 30px rgba(0,0,0,.3), 0 0 0 .5px var(--panel-border);
  padding:11px 12px; display:flex; gap:10px; align-items:flex-start;
  transform:translateX(370px); transition:transform .45s cubic-bezier(.25,1,.35,1);
}
.banner.in { transform:translateX(0); }
.banner .b-icon { width:34px; height:34px; flex:none; }
.banner .b-icon svg { width:100%; height:100%; }
.banner .b-app { font-size:11px; color:var(--text-3); text-transform:uppercase; letter-spacing:.3px; }
.banner .b-title { font-size:13px; font-weight:600; }
.banner .b-body { font-size:12.5px; color:var(--text-2); line-height:1.35; }

/* ============ Launchpad ============ */
.launchpad { position:fixed; inset:0; z-index:930; background:rgba(20,20,30,.42); -webkit-backdrop-filter:blur(45px) saturate(1.6); backdrop-filter:blur(45px) saturate(1.6); display:flex; flex-direction:column; align-items:center; animation:lpIn .2s; }
@keyframes lpIn { from{opacity:0;} }
.lp-search { margin-top:56px; width:230px; position:relative; }
.lp-search input { width:100%; text-align:center; background:rgba(255,255,255,.22); border:none; outline:none; border-radius:8px; color:#fff; font-size:14px; padding:6px 10px; box-shadow:inset 0 0 0 .5px rgba(255,255,255,.3); }
.lp-search input::placeholder { color:rgba(255,255,255,.6); }
.lp-grid { margin-top:44px; display:grid; grid-template-columns:repeat(7,110px); gap:26px 10px; justify-content:center; }
.lp-item { display:flex; flex-direction:column; align-items:center; gap:7px; }
.lp-item .lp-ic { width:76px; height:76px; transition:transform .12s; }
.lp-item .lp-ic svg { width:100%; height:100%; }
.lp-item:hover .lp-ic { transform:scale(1.06); }
.lp-item .lp-name { color:#fff; font-size:12.5px; text-shadow:0 1px 4px rgba(0,0,0,.4); text-align:center; }
.lp-dots { position:absolute; bottom:34px; display:flex; gap:8px; }
.lp-dots i { width:7px; height:7px; border-radius:50%; background:rgba(255,255,255,.45); }
.lp-dots i.on { background:#fff; }

/* ============ Mission Control ============ */
.mc { position:fixed; inset:0; z-index:920; background:rgba(0,0,0,.25); -webkit-backdrop-filter:blur(18px) brightness(.85); backdrop-filter:blur(18px) brightness(.85); animation:mcIn .25s; }
@keyframes mcIn { from{opacity:0;} }
.mc-spaces { position:absolute; top:14px; left:50%; transform:translateX(-50%); display:flex; gap:10px; align-items:center; }
.mc-space { width:120px; height:70px; border-radius:7px; border:2px solid rgba(255,255,255,.85); overflow:hidden; box-shadow:0 4px 14px rgba(0,0,0,.3); position:relative; background-size:cover; }
.mc-space .ms-label { position:absolute; bottom:2px; left:0; right:0; text-align:center; color:#fff; font-size:10px; text-shadow:0 1px 3px rgba(0,0,0,.6); }
.mc-win { position:absolute; border-radius:9px; box-shadow:0 10px 40px rgba(0,0,0,.45), 0 0 0 .5px rgba(0,0,0,.3); overflow:hidden; background:var(--window-bg); transition:transform .18s, box-shadow .18s; }
.mc-win:hover { transform:scale(1.035); box-shadow:0 14px 50px rgba(0,0,0,.55), 0 0 0 2px var(--accent); }
.mc-win .mcw-title { position:absolute; left:0; right:0; top:0; height:16px; background:var(--titlebar-bg); font-size:9px; display:flex; align-items:center; padding-left:26px; font-weight:600; color:var(--text-2); }
.mc-label { position:absolute; color:#fff; font-size:12px; text-shadow:0 1px 6px rgba(0,0,0,.6); text-align:center; transform:translateX(-50%); display:flex; align-items:center; gap:5px; }
.mc-label svg { width:18px; height:18px; }

/* ============ app switcher ============ */
.switcher { position:fixed; left:50%; top:42%; transform:translateX(-50%); z-index:980; display:flex; gap:4px; padding:12px 14px; background:var(--panel-bg); -webkit-backdrop-filter:blur(45px) saturate(1.9); backdrop-filter:blur(45px) saturate(1.9); border-radius:20px; box-shadow:0 16px 60px rgba(0,0,0,.4), 0 0 0 .5px var(--panel-border); }
.sw-item { width:76px; padding:8px 0 6px; border-radius:12px; display:flex; flex-direction:column; align-items:center; gap:4px; }
.sw-item.sel { background:rgba(var(--accent-rgb),.28); }
.sw-item .sw-ic { width:52px; height:52px; }
.sw-item .sw-ic svg { width:100%; height:100%; }
.sw-item .sw-name { font-size:10.5px; color:var(--text); max-width:72px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ============ About This Mac / Force Quit ============ */
.about-mac { display:flex; flex-direction:column; align-items:center; padding:26px 30px 20px; width:280px; }
.about-mac .am-logo { width:74px; height:74px; margin-bottom:12px; }
.about-mac .am-logo svg { width:100%; height:100%; }
.about-mac .am-name { font-size:22px; font-weight:700; margin-bottom:2px; }
.about-mac .am-ver { font-size:12px; color:var(--text-2); margin-bottom:14px; }
.about-mac .am-spec { display:grid; grid-template-columns:auto auto; gap:3px 14px; font-size:11.5px; margin-bottom:14px; }
.about-mac .am-spec b { text-align:right; font-weight:600; }
.about-mac .am-spec span { color:var(--text-2); }
.fq-list { border:.5px solid var(--border-strong); border-radius:8px; overflow:hidden; margin-bottom:12px; max-height:220px; overflow-y:auto; }
.fq-row { display:flex; align-items:center; gap:9px; padding:6px 12px; font-size:13px; }
.fq-row.sel { background:var(--accent); color:#fff; }
.fq-row .fq-ic { width:20px; height:20px; }
.fq-row .fq-ic svg { width:100%; height:100%; }
.fq-row .fq-tag { margin-left:auto; font-size:11px; color:#e33; }
.fq-row.sel .fq-tag { color:#ffd7d7; }

/* brightness / wallpaper overlay */
#dimmer { position:fixed; inset:0; z-index:1500; background:#000; pointer-events:none; opacity:0; transition:opacity .3s; }