*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden}
body{background:#000;color:#e8fff6;font-family:'Inter','SF Pro Display',system-ui,sans-serif;padding-top:0!important}
#hy-nav{display:none!important}

:root {
  --dur-micro: 0.1s;
  --dur-fast: 0.2s;
  --dur-default: 0.35s;
  --dur-sheet: 0.5s;
  --ease-spring: cubic-bezier(.2,.9,.3,1);
  --ease-bounce: cubic-bezier(.34,1.56,.64,1);
  --ease-out: cubic-bezier(.22,1,.36,1);
  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --shadow-subtle: 0 1px 4px rgba(0,0,0,.06), 0 2px 8px rgba(0,0,0,.04);
  --shadow-medium: 0 4px 16px rgba(0,0,0,.1), 0 8px 24px rgba(0,0,0,.06);
  --shadow-elevated: 0 8px 32px rgba(0,0,0,.15), 0 12px 48px rgba(0,0,0,.1);
  --clean-accent: #007AFF;
}

/* ═══════════════════════════════════════════════════════════════════════
   ICONIFY <iconify-icon> WEB COMPONENT — CSS USAGE GUIDE
   ═══════════════════════════════════════════════════════════════════════
   The <iconify-icon> web component (loaded from cdn.jsdelivr.net) fetches
   SVG data from api.iconify.design at runtime. CSP must allow both:
     script-src  → cdn.jsdelivr.net    (the JS bundle)
     connect-src → api.iconify.design  (SVG data API)

   COMMON CSS PROBLEMS & FIXES:
   ────────────────────────────
   1. INVISIBLE / ZERO-SIZE ICONS
      <iconify-icon> is inline by default — inside flex/grid containers
      it can collapse to 0×0. Fix: display:inline-flex on the element.

   2. VERTICAL MISALIGNMENT
      Inline icons sit on the text baseline, appearing too high/low.
      Fix: vertical-align:middle on the element.

   3. ICON GETS SQUISHED IN FLEX ROWS
      Flex children shrink by default. Fix: flex-shrink:0 on the icon.

   4. EXTRA WHITESPACE / LINE-HEIGHT BLOWOUT
      The web component inherits parent line-height which adds unexpected
      vertical space. Fix: line-height:1 on the <iconify-icon>.

   5. ICON COLOR DOESN'T MATCH TEXT
      Iconify icons inherit `color` from CSS. Set color on the element
      or a parent — don't use fill/stroke directly.

   6. ICONS FLASH / LAYOUT SHIFT ON LOAD
      Set explicit width + height on the element (via width="24" attr or
      CSS) so the browser reserves space before the SVG loads.

   BASE RULES BELOW handle problems 1-4 globally. Override per-context
   as needed (see the context-specific rules further down in this file).
   ═══════════════════════════════════════════════════════════════════════ */
iconify-icon{
  display:inline-flex;       /* 1. Prevents 0×0 collapse in flex/grid       */
  vertical-align:middle;     /* 2. Aligns with adjacent text baseline        */
  flex-shrink:0;             /* 3. Never squish inside flex rows              */
  line-height:1;             /* 4. Kill inherited line-height blowout         */
  width:1em;height:1em;      /* 6. Reserve space at current font-size        */
}

/* ═══ TASKBAR (shared) ═══ */
#os-taskbar{position:fixed;top:0;left:0;right:0;z-index:10000;height:48px;display:flex;align-items:center;padding:0 16px;gap:8px;transition:background .5s,border-color .5s}
.jarvis #os-taskbar{background:rgba(0,8,4,.75);backdrop-filter:blur(24px) saturate(1.4);border-bottom:1px solid rgba(0,255,163,.12);box-shadow:0 2px 20px rgba(0,0,0,.4)}
.clean #os-taskbar{background:rgba(255,255,255,.72);backdrop-filter:blur(24px) saturate(1.8);border-bottom:1px solid rgba(0,0,0,.08);box-shadow:0 1px 4px rgba(0,0,0,.06),0 2px 8px rgba(0,0,0,.04)}
#os-start-btn{width:36px;height:36px;border-radius:10px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all 0.2s cubic-bezier(.2,.9,.3,1);flex-shrink:0;border:none}
.jarvis #os-start-btn{border:1px solid rgba(0,255,163,.25);background:rgba(0,255,163,.08)}
.jarvis #os-start-btn:hover{background:rgba(0,255,163,.16);box-shadow:0 0 16px rgba(0,255,163,.2);transform:scale(1.05)}
.clean #os-start-btn{border:1px solid rgba(0,0,0,.08);background:rgba(0,0,0,.04)}
.clean #os-start-btn:hover{background:rgba(0,0,0,.08);transform:scale(1.05)}
#os-start-btn img{width:24px;height:24px;border-radius:6px;object-fit:cover}
.jarvis #os-start-btn img{filter:drop-shadow(0 0 6px #00ffa3)}
#os-tb-title{font-family:'Orbitron',monospace;font-size:12px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;flex-shrink:0}
.jarvis #os-tb-title{background:linear-gradient(135deg,#00ffa3,#3ac9ff,#b47aff,#00ffa3);background-size:300% auto;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:shimmer 4s linear infinite}
.clean #os-tb-title{color:#1a1a2e;font-weight:700;letter-spacing:.08em;font-size:13px;-webkit-text-fill-color:initial}
@keyframes shimmer{to{background-position:300% center}}
.os-tb-spacer{flex:1}
.os-tray{display:flex;align-items:center;gap:6px}
.os-tray-icon{width:28px;height:28px;display:flex;align-items:center;justify-content:center;border-radius:8px;cursor:default;transition:0.2s cubic-bezier(.2,.9,.3,1);font-size:16px}
.jarvis .os-tray-icon{color:rgba(200,255,240,.4)}.jarvis .os-tray-icon:hover{background:rgba(0,255,163,.08);color:#e8fff6}
.clean .os-tray-icon{color:rgba(0,0,0,.35)}.clean .os-tray-icon:hover{background:rgba(0,0,0,.06);color:#1a1a2e}
.os-tray-icon:active{transform:scale(.95);transition-duration:.08s}
#os-tb-clock{font-size:11px;font-weight:600;letter-spacing:.04em;padding:0 8px;white-space:nowrap}
.jarvis #os-tb-clock{color:#e8fff6}.clean #os-tb-clock{color:#1a1a2e}
#os-mode-btn{width:32px;height:32px;border-radius:8px;cursor:pointer;border:none;display:flex;align-items:center;justify-content:center;font-size:16px;transition:0.2s cubic-bezier(.2,.9,.3,1)}
.jarvis #os-mode-btn{background:rgba(0,255,163,.1);color:#00ffa3;border:1px solid rgba(0,255,163,.2)}
.jarvis #os-mode-btn:hover{background:rgba(0,255,163,.2)}
.clean #os-mode-btn{background:rgba(0,0,0,.05);color:#1a1a2e;border:1px solid rgba(0,0,0,.1)}
.clean #os-mode-btn:hover{background:rgba(0,0,0,.1)}
#os-mode-btn:active{transform:scale(.95);transition-duration:.08s}
/* Add-panel btn (Jarvis only) */
#os-add-panel-btn{display:none}
.jarvis #os-add-panel-btn{display:flex}

/* ═══ JARVIS LAYER ═══ */
#jarvis-layer{position:fixed;inset:0;z-index:1;transition:opacity .5s cubic-bezier(.2,.9,.3,1)}
.clean #jarvis-layer{opacity:0;pointer-events:none}.jarvis #jarvis-layer{opacity:1}
#jarvis-bg{position:absolute;inset:0;z-index:0;overflow:hidden;background:#000}
#jarvis-video{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);min-width:100%;min-height:100%;object-fit:cover;opacity:.3;filter:saturate(1.2) brightness(.6)}
#jarvis-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:1}
#jarvis-hud{position:absolute;inset:0;z-index:2;pointer-events:none}
#jarvis-hud::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,255,163,.012) 2px,rgba(0,255,163,.012) 4px)}
#jarvis-hud::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 40%,rgba(0,255,163,.03),transparent 65%)}
#jarvis-face{position:absolute;top:50%;left:50%;transform:translate(-50%,-55%);z-index:3;pointer-events:none;transition:opacity .6s}
#jarvis-face img{width:160px;height:160px;border-radius:50%;object-fit:cover;border:2px solid rgba(0,255,163,.4);box-shadow:0 0 50px rgba(0,255,163,.2),0 0 100px rgba(0,255,163,.1);animation:jfp 3s ease-in-out infinite alternate}
@keyframes jfp{0%{box-shadow:0 0 40px rgba(0,255,163,.2),0 0 80px rgba(0,255,163,.08)}100%{box-shadow:0 0 70px rgba(0,255,163,.35),0 0 120px rgba(0,255,163,.15)}}
.j-ring{position:absolute;border-radius:50%;border:1px solid rgba(0,255,163,.2)}
.j-ring-1{inset:-18px;animation:jr 10s linear infinite}.j-ring-2{inset:-34px;animation:jr 16s linear infinite reverse;border-color:rgba(58,201,255,.15)}.j-ring-3{inset:-52px;animation:jr 22s linear infinite;border-color:rgba(180,122,255,.1)}
@keyframes jr{to{transform:rotate(360deg)}}
.j-ring::before{content:"";position:absolute;top:-3px;left:50%;width:5px;height:5px;border-radius:50%;transform:translateX(-50%)}
.j-ring-1::before{background:#00ffa3;box-shadow:0 0 8px #00ffa3}.j-ring-2::before{background:#3ac9ff;box-shadow:0 0 8px #3ac9ff}.j-ring-3::before{background:#b47aff;box-shadow:0 0 8px #b47aff}
#jarvis-face-label{text-align:center;margin-top:18px;font-family:'Orbitron',monospace;font-size:10px;font-weight:700;letter-spacing:.25em;text-transform:uppercase;color:#00ffa3;text-shadow:0 0 20px rgba(0,255,163,.4);display:flex;align-items:center;justify-content:center;gap:6px}
#jarvis-face-label iconify-icon{width:14px;height:14px;filter:drop-shadow(0 0 6px #00ffa3)}
/* Holo Panels */
#jarvis-panels{position:absolute;inset:0;z-index:4}
.j-panel{position:absolute;width:220px;min-height:100px;background:linear-gradient(135deg,rgba(0,20,12,.7),rgba(0,40,25,.5));backdrop-filter:blur(16px);border:1px solid rgba(0,255,163,.2);border-radius:14px;padding:12px 14px;cursor:grab;transition:box-shadow .3s,border-color .3s;box-shadow:0 4px 30px rgba(0,0,0,.4),0 0 20px rgba(0,255,163,.04)}
.j-panel:hover{border-color:rgba(0,255,163,.45);box-shadow:0 8px 40px rgba(0,0,0,.5),0 0 30px rgba(0,255,163,.1)}
.j-panel::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(0,255,163,.5),transparent)}
.j-panel::after{content:"";position:absolute;inset:0;border-radius:14px;pointer-events:none;background:repeating-linear-gradient(0deg,transparent,transparent 3px,rgba(0,255,163,.008) 3px,rgba(0,255,163,.008) 6px)}
.j-panel-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.j-panel-title{font-family:'Orbitron',monospace;font-size:9px;font-weight:700;letter-spacing:.12em;color:#00ffa3;text-transform:uppercase}
.j-panel-close{width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,77,109,.3);background:none;color:rgba(255,77,109,.6);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:0.2s cubic-bezier(.2,.9,.3,1);padding:0}
.j-panel-close:hover{background:rgba(255,77,109,.15);color:#ff4d6d;filter:drop-shadow(0 0 4px rgba(255,77,109,.4))}
.j-panel-links{display:flex;flex-direction:column;gap:4px}
.j-link{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:8px;text-decoration:none;color:#e8fff6;font-size:10px;font-weight:600;transition:0.2s cubic-bezier(.2,.9,.3,1);border:1px solid transparent}
.j-link:hover{background:rgba(0,255,163,.08);border-color:rgba(0,255,163,.2)}
.j-link-icon{font-size:16px;color:#00ffa3;flex-shrink:0}
.j-link-rm{margin-left:auto;color:rgba(255,77,109,.4);cursor:pointer;opacity:0;transition:0.2s cubic-bezier(.2,.9,.3,1);display:inline-flex;align-items:center}.j-link:hover .j-link-rm{opacity:1}.j-link-rm:hover{color:#ff4d6d;filter:drop-shadow(0 0 3px rgba(255,77,109,.3))}
.j-panel-add{display:flex;align-items:center;gap:6px;padding:5px 8px;border-radius:8px;border:1px dashed rgba(0,255,163,.2);background:none;color:rgba(0,255,163,.5);font-size:9px;cursor:pointer;font-family:inherit;width:100%;margin-top:4px;transition:0.2s cubic-bezier(.2,.9,.3,1)}
.j-panel-add:hover{border-color:rgba(0,255,163,.4);color:#00ffa3;background:rgba(0,255,163,.04)}
#jarvis-clock{position:absolute;bottom:28px;right:32px;z-index:5;text-align:right;pointer-events:none;transition:opacity .6s}
#jarvis-clock-time{font-family:'Orbitron',monospace;font-size:clamp(36px,5vw,54px);font-weight:300;letter-spacing:.08em;color:#e8fff6;opacity:.6;text-shadow:0 0 30px rgba(0,255,163,.12)}
#jarvis-clock-date{font-size:12px;letter-spacing:.12em;color:rgba(200,255,240,.35);text-transform:uppercase;margin-top:2px}

/* ═══ CLEAN LAYER (iOS) ═══ */
#clean-layer{position:fixed;inset:0;z-index:1;transition:opacity .5s cubic-bezier(.2,.9,.3,1)}
.jarvis #clean-layer{opacity:0;pointer-events:none}.clean #clean-layer{opacity:1}
#clean-bg{position:absolute;inset:0;background:linear-gradient(145deg,#667eea 0%,#764ba2 25%,#f093fb 50%,#f5576c 75%,#fda085 100%);background-size:400% 400%;animation:cgrad 20s ease infinite}
@keyframes cgrad{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
#clean-time-wrap{position:absolute;top:50%;left:50%;transform:translate(-50%,-56%);z-index:3;text-align:center;pointer-events:none}
#clean-time{font-size:clamp(60px,12vw,96px);font-weight:200;letter-spacing:-.02em;color:#fff;text-shadow:0 2px 20px rgba(0,0,0,.15);line-height:1}
#clean-date{font-size:clamp(14px,2.5vw,20px);font-weight:500;color:rgba(255,255,255,.85);margin-top:4px;letter-spacing:.04em}
/* ═══ 3D JARVIS HUD (Clean center piece) ═══ */
#clean-hud{position:absolute;top:50%;left:50%;transform:translate(-50%,6%);z-index:4;pointer-events:none;perspective:600px;width:280px}
.ch-core{position:relative;text-align:center;transform-style:preserve-3d;transition:transform .4s ease}
.ch-hex{width:48px;height:48px;margin:0 auto 6px;border-radius:50%;border:2px solid rgba(255,255,255,.35);background:rgba(255,255,255,.08);backdrop-filter:blur(12px);box-shadow:0 0 30px rgba(255,255,255,.08),inset 0 0 20px rgba(255,255,255,.06);animation:ch-hex-pulse 3s ease-in-out infinite alternate}
@keyframes ch-hex-pulse{0%{box-shadow:0 0 20px rgba(255,255,255,.06),inset 0 0 12px rgba(255,255,255,.04)}100%{box-shadow:0 0 40px rgba(255,255,255,.15),inset 0 0 24px rgba(255,255,255,.1)}}
.ch-label{font-family:'Orbitron',monospace;font-size:11px;font-weight:800;letter-spacing:.3em;color:rgba(255,255,255,.9);text-shadow:0 0 16px rgba(255,255,255,.3)}
.ch-status{display:flex;align-items:center;justify-content:center;gap:5px;font-size:8px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.55);margin-top:3px}
.ch-dot{width:5px;height:5px;border-radius:50%;background:#34d399;box-shadow:0 0 8px #34d399;animation:ch-dot-pulse 2s ease infinite}
@keyframes ch-dot-pulse{0%,100%{opacity:.5;transform:scale(.8)}50%{opacity:1;transform:scale(1.3)}}
/* Rotating rings */
.ch-ring{position:absolute;border-radius:50%;border:1px solid rgba(255,255,255,.12);top:50%;left:50%;pointer-events:none}
.ch-ring::before{content:"";position:absolute;top:-3px;left:50%;width:4px;height:4px;border-radius:50%;transform:translateX(-50%)}
.ch-ring-1{width:120px;height:120px;margin:-60px 0 0 -60px;animation:jr 12s linear infinite}.ch-ring-1::before{background:rgba(255,255,255,.5);box-shadow:0 0 6px rgba(255,255,255,.4)}
.ch-ring-2{width:150px;height:150px;margin:-75px 0 0 -75px;border-color:rgba(167,139,250,.15);animation:jr 18s linear infinite reverse}.ch-ring-2::before{background:rgba(167,139,250,.5);box-shadow:0 0 6px rgba(167,139,250,.4)}
.ch-ring-3{width:180px;height:180px;margin:-90px 0 0 -90px;border-color:rgba(244,114,182,.1);animation:jr 24s linear infinite}.ch-ring-3::before{background:rgba(244,114,182,.4);box-shadow:0 0 6px rgba(244,114,182,.3)}
/* Stat tiles — 3D glass cards */
.ch-stats{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:12px;transform-style:preserve-3d}
.ch-stat{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:10px;background:rgba(255,255,255,.1);backdrop-filter:blur(16px) saturate(1.4);border:1px solid rgba(255,255,255,.18);box-shadow:0 4px 16px rgba(0,0,0,.1);transition:transform .3s,box-shadow .3s;transform:translateZ(0);animation:ch-stat-in .5s cubic-bezier(.34,1.56,.64,1) both}
.ch-stat:nth-child(1){animation-delay:.1s}.ch-stat:nth-child(2){animation-delay:.2s}.ch-stat:nth-child(3){animation-delay:.3s}.ch-stat:nth-child(4){animation-delay:.4s}
@keyframes ch-stat-in{from{opacity:0;transform:translateY(12px) rotateX(15deg) scale(.9)}to{opacity:1;transform:none}}
.ch-stat iconify-icon{width:14px;height:14px;color:rgba(255,255,255,.65);flex-shrink:0}
.ch-stat-info{flex:1;min-width:0}
.ch-stat-lbl{display:block;font-size:7px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.4)}
.ch-stat-val{display:block;font-family:'Roboto Mono','SF Mono',monospace;font-size:12px;font-weight:700;color:#fff;text-shadow:0 0 8px rgba(255,255,255,.15);line-height:1.3}
.ch-stat-bar{position:absolute;bottom:0;left:0;right:0;height:2px;border-radius:0 0 10px 10px;background:rgba(255,255,255,.08);overflow:hidden}
.ch-stat-fill{height:100%;border-radius:2px;transition:width 1.5s cubic-bezier(.22,1,.36,1);width:0}
.ch-stat:nth-child(1) .ch-stat-fill{background:linear-gradient(90deg,#34d399,#6ee7b7)}
.ch-stat:nth-child(2) .ch-stat-fill{background:linear-gradient(90deg,#818cf8,#a5b4fc)}
.ch-stat:nth-child(3) .ch-stat-fill{background:linear-gradient(90deg,#f472b6,#f9a8d4)}
.ch-stat:nth-child(4) .ch-stat-fill{background:linear-gradient(90deg,#38bdf8,#7dd3fc)}
.ch-stat{position:relative;overflow:hidden}
/* Jarvis mode — hide clean HUD */
.jarvis #clean-hud{display:none}
#clean-dock{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);z-index:5;display:flex;gap:12px;padding:10px 16px;background:rgba(255,255,255,.25);backdrop-filter:blur(30px) saturate(1.6);border-radius:22px;border:1px solid rgba(255,255,255,.3);box-shadow:0 4px 30px rgba(0,0,0,.1)}
.clean-dock-icon{width:52px;height:52px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:24px;cursor:pointer;transition:all 0.2s cubic-bezier(.2,.9,.3,1);text-decoration:none;position:relative;border:1px solid rgba(255,255,255,.3);box-shadow:0 2px 10px rgba(0,0,0,.08);color:#fff}
.clean-dock-icon:hover{transform:translateY(-6px) scale(1.08);box-shadow:0 8px 24px rgba(0,0,0,.15)}
.clean-dock-icon:active{transform:scale(.92)}
.clean-dock-label{position:absolute;bottom:-16px;left:50%;transform:translateX(-50%);font-size:8px;font-weight:600;color:rgba(255,255,255,.8);white-space:nowrap;opacity:0;transition:0.2s cubic-bezier(.2,.9,.3,1)}
.clean-dock-icon:hover .clean-dock-label{opacity:1}

/* ═══ APP DRAWER (themed per mode) ═══ */
#os-drawer-backdrop{position:fixed;inset:0;z-index:200;opacity:0;pointer-events:none;transition:opacity .3s}
.jarvis #os-drawer-backdrop{background:rgba(0,0,0,.55);backdrop-filter:blur(16px)}
.clean #os-drawer-backdrop{background:rgba(0,0,0,.3);backdrop-filter:blur(16px)}
#os-drawer-backdrop.open{opacity:1;pointer-events:auto}
#os-drawer{position:fixed;left:50%;bottom:0;z-index:201;width:min(680px,96vw);max-height:calc(100vh - 70px);transform:translate(-50%,100%);transition:transform .4s cubic-bezier(.32,1.28,.54,1),opacity .3s;opacity:0;overflow:hidden;display:flex;flex-direction:column;border-bottom:none}
.jarvis #os-drawer{background:rgba(0,12,6,.92);backdrop-filter:blur(40px);border:1px solid rgba(0,255,163,.15);border-radius:20px 20px 0 0;box-shadow:0 -8px 60px rgba(0,0,0,.5)}
.clean #os-drawer{background:rgba(255,255,255,.88);backdrop-filter:blur(40px) saturate(1.8);border:1px solid rgba(255,255,255,.4);border-radius:24px 24px 0 0;box-shadow:0 8px 32px rgba(0,0,0,.15),0 12px 48px rgba(0,0,0,.1)}
#os-drawer.open{transform:translate(-50%,0);opacity:1}
#os-drawer-handle{width:40px;height:4px;border-radius:2px;margin:10px auto 6px;flex-shrink:0}
.jarvis #os-drawer-handle{background:rgba(200,255,240,.2)}.clean #os-drawer-handle{background:rgba(0,0,0,.15)}
#os-search{width:100%;height:38px;border-radius:10px;font-family:inherit;font-size:13px;padding:0 14px 0 38px;outline:none;transition:0.2s cubic-bezier(.2,.9,.3,1)}
.jarvis #os-search{border:1px solid rgba(0,255,163,.18);background:rgba(0,20,10,.6);color:#e8fff6}
.jarvis #os-search:focus{border-color:rgba(0,255,163,.45);box-shadow:0 0 16px rgba(0,255,163,.1)}
.clean #os-search{border:1px solid rgba(0,0,0,.08);background:rgba(0,0,0,.04);color:#1a1a2e}
.clean #os-search:focus{border-color:rgba(0,0,0,.2);box-shadow:0 0 0 3px rgba(0,0,0,.04)}
#os-search-icon{position:absolute;left:28px;top:50%;transform:translateY(-50%);font-size:16px;pointer-events:none}
.jarvis #os-search-icon{color:rgba(200,255,240,.3)}.clean #os-search-icon{color:rgba(0,0,0,.3)}
.os-cat-pill{flex-shrink:0;width:38px;height:38px;border-radius:50%;cursor:pointer;transition:all 0.2s cubic-bezier(.2,.9,.3,1);font-family:inherit;border:1px solid transparent;background:transparent;display:flex;align-items:center;justify-content:center;padding:0;position:relative}
.jarvis .os-cat-pill{color:rgba(200,255,240,.4);border-color:rgba(0,255,163,.12)}
.jarvis .os-cat-pill:hover{color:#e8fff6;border-color:rgba(0,255,163,.3);background:rgba(0,255,163,.06)}
.jarvis .os-cat-pill.active{background:rgba(0,255,163,.14);border-color:rgba(0,255,163,.5);color:#00ffa3;box-shadow:0 0 10px rgba(0,255,163,.15)}
.clean .os-cat-pill{color:rgba(0,0,0,.4);border-color:rgba(0,0,0,.06)}
.clean .os-cat-pill:hover{color:#1a1a2e;background:rgba(0,0,0,.04)}
.clean .os-cat-pill.active{background:rgba(0,0,0,.08);color:#1a1a2e;border-color:rgba(0,0,0,.12)}
.os-cat-pill:active{transform:scale(.95);transition-duration:.08s}
.os-cat-pill[title]:hover::after{content:attr(title);position:absolute;top:100%;left:50%;transform:translateX(-50%);margin-top:6px;padding:3px 8px;border-radius:4px;font-size:8px;font-weight:600;white-space:nowrap;z-index:20;pointer-events:none;animation:tip-in .2s ease both}
.jarvis .os-cat-pill[title]:hover::after{background:rgba(0,8,4,.9);color:#00ffa3;border:1px solid rgba(0,255,163,.2)}
.clean .os-cat-pill[title]:hover::after{background:rgba(255,255,255,.95);color:#1a1a2e;border:1px solid rgba(0,0,0,.08);box-shadow:0 2px 8px rgba(0,0,0,.1)}
#os-cats{display:flex;gap:8px;padding:8px 16px 10px;overflow-x:auto;scrollbar-width:none;flex-shrink:0;align-items:center;justify-content:center}
#os-cats::-webkit-scrollbar{display:none}
#os-apps{flex:1;overflow-y:auto;padding:4px 16px 24px;scrollbar-width:thin;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.os-app-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px}
.os-app-card{display:flex;flex-direction:column;align-items:center;gap:8px;padding:16px 10px 14px;border-radius:14px;cursor:pointer;text-decoration:none;color:inherit;border:1px solid transparent;transition:all .25s cubic-bezier(.34,1.56,.64,1);position:relative}
.jarvis .os-app-card:hover{background:rgba(0,255,163,.06);border-color:rgba(0,255,163,.2);transform:translateY(-4px) scale(1.02)}
.clean .os-app-card:hover{background:rgba(255,255,255,.15);border-color:rgba(255,255,255,.25);transform:translateY(-4px) scale(1.02);box-shadow:0 8px 24px rgba(0,0,0,.12)}
.os-app-card:active{transform:scale(.93)!important;transition-duration:.1s}
.os-app-icon{width:48px;height:48px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:24px;transition:transform .3s cubic-bezier(.34,1.56,.64,1),box-shadow .3s,border-color .3s}
.jarvis .os-app-icon{background:linear-gradient(135deg,rgba(0,255,163,.12),rgba(0,255,163,.04));border:1px solid rgba(0,255,163,.2);color:#00ffa3}
.clean .os-app-icon{background:linear-gradient(135deg,rgba(255,255,255,.2),rgba(255,255,255,.08));border:1px solid rgba(255,255,255,.2);color:#1a1a2e;box-shadow:0 2px 8px rgba(0,0,0,.06)}
.os-app-card:hover .os-app-icon{transform:scale(1.1) rotate(-3deg)}
/* Icon bounce on hover (Jarvis neon ring, Clean soft lift) */
.jarvis .os-app-card:hover .os-app-icon{box-shadow:0 0 0 3px rgba(0,255,163,.15),0 0 20px rgba(0,255,163,.2),0 4px 16px rgba(0,0,0,.3);border-color:rgba(0,255,163,.5)}
.clean .os-app-card:hover .os-app-icon{box-shadow:0 0 0 3px rgba(255,255,255,.3),0 8px 20px rgba(0,0,0,.12);border-color:rgba(255,255,255,.4);transform:scale(1.1) rotate(3deg)}
.os-app-name{font-size:10px;font-weight:700;text-align:center;letter-spacing:.02em;line-height:1.3}
.jarvis .os-app-name{color:#e8fff6}.clean .os-app-name{color:#1a1a2e}
.os-app-desc{font-size:8px;text-align:center;line-height:1.4;max-width:110px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.jarvis .os-app-desc{color:rgba(200,255,240,.35)}.clean .os-app-desc{color:rgba(0,0,0,.35)}
/* Toast */
#os-toast-area{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);z-index:500;display:flex;flex-direction:column;align-items:center;gap:8px;pointer-events:none}
.os-toast{padding:10px 20px;border-radius:12px;backdrop-filter:blur(20px);font-size:12px;font-weight:600;display:flex;align-items:center;gap:8px;animation:tin .3s cubic-bezier(.34,1.56,.64,1) both;pointer-events:auto}
.jarvis .os-toast{background:rgba(0,8,4,.85);border:1px solid rgba(0,255,163,.2);color:#e8fff6}
.clean .os-toast{background:rgba(255,255,255,.85);backdrop-filter:blur(20px) saturate(1.8);border:1px solid rgba(0,0,0,.06);color:#1a1a2e;box-shadow:0 1px 4px rgba(0,0,0,.06),0 2px 8px rgba(0,0,0,.04)}
.os-toast.out{animation:tout .25s ease forwards}
@keyframes tin{from{opacity:0;transform:translateY(12px) scale(.95)}to{opacity:1;transform:none}}
@keyframes tout{to{opacity:0;transform:translateY(-8px) scale(.95)}}
/* ═══ RESPONSIVE — FULL MOBILE OPTIMIZATION ═══
   Target devices:
     iPhone 16/17 Pro Max  — 440×956 CSS px, env(safe-area-*) for Dynamic Island
     Pixel 9 Pro Fold      — folded ~360×800, unfolded ~841×1080
     iPhone SE / compact   — 375×667
     Landscape phones      — max-height ≤ 500px
   All rules use env(safe-area-inset-*) for notch/home-indicator avoidance. */

/* ── Safe area globals (notch + home indicator + Dynamic Island) ── */
/* iPhone 17 Pro / 16 Pro report ~59px safe-area-inset-top for the
   Dynamic Island + mic cutout. We add a 6px buffer so the taskbar
   content never clips behind the hardware. */
#os-taskbar{padding-top:calc(env(safe-area-inset-top,0px) + 6px);padding-left:max(16px,env(safe-area-inset-left,16px));padding-right:max(16px,env(safe-area-inset-right,16px))}
#clean-dock{padding-bottom:max(10px,env(safe-area-inset-bottom,10px))}
#os-toast-area{bottom:max(20px,calc(env(safe-area-inset-bottom,0px) + 12px))}
#os-drawer{padding-bottom:env(safe-area-inset-bottom,0)}
#clean-island{top:max(16px,calc(env(safe-area-inset-top,0px) + 8px))}
.j-corner.bl,.j-corner.br{bottom:max(20px,calc(env(safe-area-inset-bottom,0px) + 8px))}
#jarvis-clock{bottom:max(28px,calc(env(safe-area-inset-bottom,0px) + 16px));right:max(32px,env(safe-area-inset-right,16px))}

/* ── Tablet / foldable unfolded (≤932px) ── */
@media(max-width:932px){
  .j-panel{width:190px;min-height:80px;padding:10px 12px}
  .j-panel-title{font-size:8px}
  #j-hud-left,#j-hud-right{gap:4px}
  .j-hud-chip{font-size:6px;padding:2px 6px}
}

/* ── Phone landscape + small tablets (≤768px) ── */
@media(max-width:768px){
  #jarvis-face img{width:120px;height:120px}
  .j-ring-1{inset:-14px}.j-ring-2{inset:-26px}.j-ring-3{inset:-40px}
  #jarvis-clock-time{font-size:clamp(28px,6vw,40px)}
  #jarvis-clock-date{font-size:10px}
  #clean-time{font-size:clamp(48px,12vw,72px)}
  #clean-dock{gap:8px;padding:8px 12px}
  .clean-dock-icon{width:46px;height:46px;font-size:21px;border-radius:12px}
  #os-drawer{width:100vw;max-height:85vh;max-height:85dvh;border-radius:20px 20px 0 0}
  .os-app-grid{grid-template-columns:repeat(auto-fill,minmax(105px,1fr));gap:8px}
  .os-app-card{padding:12px 6px 10px}
  .os-app-icon{width:44px;height:44px;font-size:21px;border-radius:10px}
  .os-app-name{font-size:9px}
  .os-app-desc{display:none}
  .os-tray-icon.hide-mobile{display:none}
  .j-panel{width:170px;padding:10px 10px}
  #j-hud-left{left:6px}#j-hud-right{right:6px}
}

/* ── Large phones: iPhone Pro Max, Pixel 9 Pro (≤480px) ── */
@media(max-width:480px){
  #os-taskbar{height:44px;padding:0 10px;padding-top:calc(env(safe-area-inset-top,0px) + 6px);gap:6px}
  #os-start-btn{width:32px;height:32px;border-radius:8px}
  #os-start-btn img{width:20px;height:20px}
  #os-tb-title{font-size:10px;letter-spacing:.1em}
  #os-mode-btn{width:28px;height:28px;border-radius:6px}
  .os-tray{gap:4px}
  .os-tray-icon{width:24px;height:24px;font-size:14px}
  #os-tb-clock{font-size:10px;padding:0 4px}
  #jarvis-face img{width:100px;height:100px}
  .j-ring-1{inset:-10px}.j-ring-2{inset:-20px}.j-ring-3{inset:-32px}
  #jarvis-face::before{width:220px;height:220px}
  #jarvis-clock-time{font-size:clamp(24px,7vw,36px)}
  #jarvis-clock-date{font-size:9px;letter-spacing:.08em}
  #clean-time{font-size:clamp(52px,14vw,72px)}
  #clean-date{font-size:clamp(12px,3vw,16px)}
  #clean-hud{transform:translate(-50%,6%) scale(.85)}
  #clean-dock{gap:6px;padding:8px 10px;padding-bottom:max(8px,env(safe-area-inset-bottom,8px))}
  .clean-dock-icon{width:auto;min-width:0;flex:1 1 0;max-width:48px;aspect-ratio:1;height:auto;font-size:18px;border-radius:11px}
  .clean-dock-label{font-size:7px;bottom:-14px}
  #clean-island{font-size:10px;padding:5px 14px;min-width:100px}
  #os-drawer{max-height:calc(100vh - 50px);max-height:calc(100dvh - 50px)}
  #os-search{height:36px;font-size:12px}
  .os-cat-pill{width:38px;height:38px}
  .os-app-grid{grid-template-columns:repeat(auto-fill,minmax(90px,1fr));gap:6px}
  .os-app-card{padding:10px 4px 8px;border-radius:12px}
  .os-app-icon{width:40px;height:40px;font-size:19px;border-radius:10px}
  .os-app-name{font-size:8.5px}
  .j-panel{width:160px;min-height:70px;padding:8px 10px;border-radius:12px}
  .j-link{font-size:9px;padding:5px 6px;gap:6px}
  .j-panel-add{font-size:8px;padding:4px 6px}
  #j-hud-left,#j-hud-right{display:none}
  .j-corner{width:20px;height:20px}
  .j-corner.tl,.j-corner.tr{top:max(50px,calc(env(safe-area-inset-top,0px) + 8px))}
  .os-toast{font-size:11px;padding:8px 14px;border-radius:10px}
  /* Tour tooltip mobile */
  .tour-tooltip{max-width:calc(100vw - 32px);font-size:11px;padding:14px 16px}
  .tour-title{font-size:12px}
  .tour-btn{padding:6px 12px;font-size:10px}
}

/* ── Small phones / Pixel folded / iPhone SE (≤390px) ── */
@media(max-width:390px){
  #os-tb-title{display:none}
  #clean-dock{gap:2px;padding:5px 6px;padding-bottom:max(5px,env(safe-area-inset-bottom,5px));flex-wrap:nowrap;justify-content:center;border-radius:16px;max-width:calc(100vw - 16px)}
  .clean-dock-icon{width:38px;height:38px;min-width:0!important;min-height:0!important;flex:0 1 auto;font-size:15px;border-radius:9px;aspect-ratio:auto}
  .clean-dock-label{display:none}
  #clean-time{font-size:clamp(44px,13vw,60px)}
  #clean-date{font-size:12px}
  #clean-hud{transform:translate(-50%,6%) scale(.72)}
  .os-app-grid{grid-template-columns:repeat(3,1fr);gap:4px}
  .os-app-card{padding:8px 2px 6px}
  .os-app-icon{width:36px;height:36px;font-size:17px;border-radius:8px}
  .os-app-name{font-size:8px}
  #jarvis-face img{width:80px;height:80px}
  .j-ring-1{inset:-8px}.j-ring-2{inset:-16px}.j-ring-3{inset:-26px}
  #jarvis-face::before{width:180px;height:180px}
  #jarvis-clock-time{font-size:22px}
  .j-panel{width:140px;min-height:60px}
  .j-link{font-size:8px}
}

/* ── Tiny phones (≤320px — iPhone SE 1st gen class) ── */
@media(max-width:320px){
  .os-app-grid{grid-template-columns:repeat(3,1fr);gap:2px}
  .os-app-icon{width:32px;height:32px;font-size:15px}
  .os-app-name{font-size:7px}
  .clean-dock-icon{width:34px;height:34px;font-size:15px}
  #clean-time{font-size:40px}
}

/* ── Landscape phones (short viewport) ── */
@media(max-height:500px){
  #clean-time-wrap{transform:translate(-50%,-52%)}
  #clean-time{font-size:clamp(36px,8vh,52px)}
  #clean-date{font-size:11px}
  #clean-hud{display:none}
  #clean-dock{bottom:8px}
  #jarvis-face{transform:translate(-50%,-52%)}
  #jarvis-face img{width:70px;height:70px}
  .j-ring-1{inset:-6px}.j-ring-2{inset:-14px}.j-ring-3{inset:-22px}
  #jarvis-face::before{width:150px;height:150px}
  #jarvis-clock{bottom:8px;right:12px}
  #jarvis-clock-time{font-size:20px}
  .j-corner.tl,.j-corner.tr{top:52px}
  .j-corner.bl,.j-corner.br{bottom:8px}
  #j-hud-left,#j-hud-right{display:none}
  #os-drawer{max-height:calc(100vh - 50px);max-height:calc(100dvh - 50px)}
  .os-app-grid{grid-template-columns:repeat(auto-fill,minmax(80px,1fr))}
  #clean-island{top:max(4px,calc(env(safe-area-inset-top,0px) + 2px));font-size:9px;padding:3px 10px}
}

/* ── Foldable inner display (large square-ish viewport, ≤1080px tall + ≥600px wide) ── */
@media(min-width:600px) and (max-width:900px) and (min-height:900px){
  /* Pixel Fold Pro unfolded — tablet-like portrait, plenty of space */
  .os-app-grid{grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px}
  .os-app-icon{width:46px;height:46px;font-size:22px}
  #clean-dock{gap:10px}.clean-dock-icon{width:48px;height:48px;font-size:22px}
  .j-panel{width:200px}
  #j-hud-left,#j-hud-right{display:flex}
}

/* ── Touch device: disable hover-only effects, enlarge touch targets ── */
@media(hover:none){
  .os-app-card:hover{transform:none;background:transparent;border-color:transparent;box-shadow:none}
  .os-app-card:hover .os-app-icon{transform:none;box-shadow:none}
  .os-app-card:hover .os-app-name{color:inherit;text-shadow:none}
  .os-app-card:active{transform:scale(.95)!important}
  .os-app-card:active .os-app-icon{transform:scale(.95)}
  .clean-dock-icon:hover{transform:none;box-shadow:0 2px 10px rgba(0,0,0,.08)}
  .clean-dock-icon:active{transform:scale(.9)}
  .j-link:hover{background:transparent;border-color:transparent;box-shadow:none}
  .j-link:active{background:rgba(0,255,163,.12)}
  /* Larger touch targets on phone */
  .os-tray-icon{min-width:44px;min-height:44px}
  #os-mode-btn{min-width:44px;min-height:44px}
  #os-start-btn{min-width:44px;min-height:44px}
  .os-cat-pill{min-width:44px;min-height:44px}
}

/* ═══ PREMIUM UX — JARVIS ENHANCEMENTS ═══ */
/* Radar sweep behind face */
#jarvis-face::before{content:"";position:absolute;top:50%;left:50%;width:300px;height:300px;transform:translate(-50%,-50%);border-radius:50%;background:conic-gradient(from 0deg,transparent 0deg,rgba(0,255,163,.08) 30deg,transparent 60deg);animation:radar 4s linear infinite;z-index:-1;pointer-events:none}
@keyframes radar{to{transform:translate(-50%,-50%) rotate(360deg)}}
/* HUD corner brackets */
.j-corner{position:absolute;width:30px;height:30px;z-index:6;pointer-events:none;opacity:.3}
.j-corner::before,.j-corner::after{content:"";position:absolute;background:#00ffa3}
.j-corner::before{width:100%;height:1px}.j-corner::after{width:1px;height:100%}
.j-corner.tl{top:max(60px,calc(env(safe-area-inset-top,0px) + 14px));left:20px}.j-corner.tr{top:max(60px,calc(env(safe-area-inset-top,0px) + 14px));right:20px}.j-corner.tr::before{right:0}.j-corner.tr::after{right:0}
.j-corner.bl{bottom:20px;left:20px}.j-corner.bl::before{bottom:0}.j-corner.bl::after{bottom:0}
.j-corner.br{bottom:20px;right:20px}.j-corner.br::before{bottom:0;right:0}.j-corner.br::after{bottom:0;right:0}
/* Sound wave visualizer bars */
.j-wave{display:flex;gap:2px;justify-content:center;margin-top:8px;height:16px;align-items:flex-end}
.j-wave-bar{width:3px;border-radius:2px;background:#00ffa3;animation:wave-bar 1.2s ease-in-out infinite alternate}
@keyframes wave-bar{0%{height:3px;opacity:.3}100%{height:14px;opacity:.8}}
/* Data stream text */
.j-datastream{position:absolute;font-family:'Roboto Mono',monospace;font-size:8px;color:rgba(0,255,163,.06);white-space:nowrap;pointer-events:none;animation:stream-scroll 20s linear infinite;z-index:0}
@keyframes stream-scroll{from{transform:translateY(100vh)}to{transform:translateY(-100%)}}
/* Panel proximity glow + cyberpunk entrance */
.j-panel{transition:box-shadow .3s,border-color .3s,transform 0.2s cubic-bezier(.2,.9,.3,1);animation:j-panel-boot .6s ease both}
@keyframes j-panel-boot{from{opacity:0;transform:translateY(12px) scale(.95);border-color:rgba(0,255,163,0);box-shadow:none}to{opacity:1;transform:none}}
.j-panel:hover{transform:scale(1.02);border-color:rgba(0,255,163,.6);box-shadow:0 8px 50px rgba(0,0,0,.5),0 0 40px rgba(0,255,163,.15),0 0 80px rgba(0,255,163,.06),inset 0 0 20px rgba(0,255,163,.03)}
/* Neon border pulse on panels */
.j-panel{animation:j-panel-boot .6s ease both,j-border-breathe 3s ease-in-out infinite alternate}
@keyframes j-border-breathe{0%{border-color:rgba(0,255,163,.15);box-shadow:0 4px 30px rgba(0,0,0,.4),0 0 12px rgba(0,255,163,.03)}100%{border-color:rgba(0,255,163,.3);box-shadow:0 4px 30px rgba(0,0,0,.4),0 0 25px rgba(0,255,163,.08)}}

/* ═══ TERMINAL SCANLINE (full-screen horizontal sweep) ═══ */
#j-scanline{position:absolute;inset:0;z-index:3;pointer-events:none;overflow:hidden}
#j-scanline::before{content:"";position:absolute;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent 0%,rgba(0,255,163,.25) 20%,rgba(0,255,163,.5) 50%,rgba(0,255,163,.25) 80%,transparent 100%);box-shadow:0 0 20px rgba(0,255,163,.3),0 0 60px rgba(0,255,163,.1);animation:j-scan-sweep 4s linear infinite}
@keyframes j-scan-sweep{0%{top:-2px}100%{top:100%}}
/* Vertical scan beam (left to right) */
#j-scanline::after{content:"";position:absolute;top:0;bottom:0;width:1px;background:linear-gradient(180deg,transparent 0%,rgba(58,201,255,.15) 30%,rgba(58,201,255,.3) 50%,rgba(58,201,255,.15) 70%,transparent 100%);box-shadow:0 0 12px rgba(58,201,255,.2);animation:j-vscan 7s linear infinite}
@keyframes j-vscan{0%{left:-1px}100%{left:100%}}

/* ═══ HUD STATUS READOUTS (edge-mounted data strips) ═══ */
#j-hud-left{position:absolute;left:12px;top:50%;transform:translateY(-50%);z-index:5;pointer-events:none;display:flex;flex-direction:column;gap:6px}
#j-hud-right{position:absolute;right:12px;top:50%;transform:translateY(-50%);z-index:5;pointer-events:none;display:flex;flex-direction:column;gap:6px;align-items:flex-end}
.j-hud-chip{font-family:'Roboto Mono',monospace;font-size:7px;letter-spacing:.1em;text-transform:uppercase;padding:3px 8px;border-radius:4px;border:1px solid rgba(0,255,163,.12);background:rgba(0,8,4,.5);backdrop-filter:blur(8px);white-space:nowrap;animation:j-hud-fade 1.5s ease both}
.j-hud-chip .val{color:#00ffa3;font-weight:700}.j-hud-chip .lbl{color:rgba(200,255,240,.3)}
@keyframes j-hud-fade{from{opacity:0;transform:translateX(-8px)}to{opacity:1;transform:none}}
#j-hud-right .j-hud-chip{animation-name:j-hud-fade-r}
@keyframes j-hud-fade-r{from{opacity:0;transform:translateX(8px)}to{opacity:1;transform:none}}

/* ═══ NEON GLOW ENHANCEMENTS ═══ */
/* Taskbar neon underline */
.jarvis #os-taskbar::after{content:"";position:absolute;bottom:-1px;left:10%;right:10%;height:1px;background:linear-gradient(90deg,transparent,#00ffa3,#3ac9ff,#b47aff,#00ffa3,transparent);opacity:.4;animation:tb-neon-shift 6s linear infinite}
@keyframes tb-neon-shift{0%{background-position:0% 0}100%{background-position:200% 0}}
.jarvis #os-taskbar::after{background-size:200% 100%}
/* Clock neon glow pulse */
#jarvis-clock-time{animation:j-clock-glow 3s ease-in-out infinite alternate}
@keyframes j-clock-glow{0%{text-shadow:0 0 20px rgba(0,255,163,.08),0 0 40px rgba(0,255,163,.04)}100%{text-shadow:0 0 30px rgba(0,255,163,.2),0 0 60px rgba(0,255,163,.08),0 0 100px rgba(0,255,163,.04)}}
/* Corner brackets neon pulse */
.j-corner{animation:j-corner-pulse 2.5s ease-in-out infinite alternate}
@keyframes j-corner-pulse{0%{opacity:.2}100%{opacity:.5}}
.j-corner::before,.j-corner::after{box-shadow:0 0 6px rgba(0,255,163,.3)}
/* Panel link hover neon */
.j-link:hover{background:rgba(0,255,163,.08);border-color:rgba(0,255,163,.3);box-shadow:0 0 12px rgba(0,255,163,.06)}
.j-link:hover .j-link-icon{filter:drop-shadow(0 0 4px #00ffa3)}
/* Panel title glow */
.j-panel-title{text-shadow:0 0 10px rgba(0,255,163,.3)}
/* Panel add button glow on hover */
.j-panel-add:hover{box-shadow:0 0 12px rgba(0,255,163,.08)}
/* ═══ ICONIFY CONTEXT OVERRIDES ═══ */
/* These override the global base rules for specific containers.
   When adding new <iconify-icon> usage, the global display:inline-flex +
   flex-shrink:0 + vertical-align:middle usually suffices. Only add rules
   here if you need extra tweaks (sizing, margins, opacity, z-index). */
.j-hud-chip iconify-icon{margin:-1px 3px 0 0;opacity:.5;width:10px;height:10px}
.j-panel-close iconify-icon{width:12px;height:12px}
.j-link-icon iconify-icon{width:16px;height:16px}
.j-panel-title iconify-icon{width:12px;height:12px;margin-right:4px;opacity:.7}
.j-link-rm iconify-icon{width:10px;height:10px}
.os-cat-pill iconify-icon{margin:0;width:20px;height:20px}
.os-app-icon iconify-icon{width:24px;height:24px}
.clean-dock-icon iconify-icon{position:relative;z-index:2;width:24px;height:24px}
.os-tray-icon iconify-icon{width:16px;height:16px}
#os-mode-btn iconify-icon{width:16px;height:16px}
#j-add-modal button iconify-icon{margin:-1px 4px 0 0;width:14px;height:14px}
.j-panel-add iconify-icon{width:14px;height:14px}
#clean-island iconify-icon{width:14px;height:14px;color:#34d399}
#jarvis-clock-icon iconify-icon{width:20px;height:20px}

/* App card shimmer on hover — use ::after to not conflict with content */
.os-app-card{overflow:hidden}
.os-app-card::after{content:"";position:absolute;inset:0;border-radius:14px;background:linear-gradient(135deg,transparent 30%,rgba(255,255,255,.06) 50%,transparent 70%);background-size:300% 300%;opacity:0;transition:opacity .3s;pointer-events:none}
.os-app-card:hover::after{opacity:1;animation:card-shimmer 2s ease infinite}
@keyframes card-shimmer{0%{background-position:200% 0}50%{background-position:-100% 0}100%{background-position:200% 0}}
/* Icon inner glow pulse for Jarvis */
.jarvis .os-app-icon::before{content:"";position:absolute;inset:-1px;border-radius:12px;background:radial-gradient(circle at 50% 50%,rgba(0,255,163,.08),transparent 70%);opacity:0;transition:opacity .3s;pointer-events:none}
.jarvis .os-app-card:hover .os-app-icon::before{opacity:1;animation:icon-pulse 1.5s ease-in-out infinite alternate}
@keyframes icon-pulse{0%{opacity:.5;transform:scale(.95)}100%{opacity:1;transform:scale(1.05)}}
/* Name reveal animation */
.os-app-name{transition:color 0.2s cubic-bezier(.2,.9,.3,1),text-shadow 0.2s cubic-bezier(.2,.9,.3,1)}
.jarvis .os-app-card:hover .os-app-name{color:#00ffa3;text-shadow:0 0 8px rgba(0,255,163,.2)}
.clean .os-app-card:hover .os-app-name{color:#007AFF;text-shadow:none}
/* Clean dock icon reflection — use ::before to avoid conflict with tooltip ::after */
.clean-dock-icon::before{content:"";position:absolute;inset:0;border-radius:14px;background:linear-gradient(180deg,rgba(255,255,255,.25) 0%,transparent 50%);pointer-events:none;z-index:1}
/* HUD chip hover glow */
.j-hud-chip{transition:border-color .3s,box-shadow .3s}
/* Taskbar tray icon tooltips */
.os-tray-icon{position:relative}
.os-tray-icon[title]:hover::after{content:attr(title);position:absolute;top:100%;left:50%;transform:translateX(-50%);margin-top:6px;padding:3px 8px;border-radius:4px;font-size:8px;font-weight:600;white-space:nowrap;z-index:20;pointer-events:none;animation:tip-in .2s ease both}
.jarvis .os-tray-icon[title]:hover::after{background:rgba(0,8,4,.9);color:#00ffa3;border:1px solid rgba(0,255,163,.2)}
.clean .os-tray-icon[title]:hover::after{background:rgba(255,255,255,.95);color:#1a1a2e;border:1px solid rgba(0,0,0,.08);box-shadow:0 2px 8px rgba(0,0,0,.1)}
@keyframes tip-in{from{opacity:0;transform:translateX(-50%) translateY(-4px)}to{opacity:1;transform:translateX(-50%)}}
/* Clock icon decoration */
#jarvis-clock-icon{color:rgba(0,255,163,.2);margin-bottom:4px}

/* ═══ PREMIUM UX — CLEAN MODE ENHANCEMENTS ═══ */
/* Parallax wallpaper */
#clean-bg{transition:background-position .3s ease-out}
/* Dynamic Island */
#clean-island{position:absolute;top:12px;left:50%;transform:translateX(-50%);z-index:6;padding:6px 18px;border-radius:24px;background:rgba(0,0,0,.7);backdrop-filter:blur(20px);color:#fff;font-size:11px;font-weight:600;display:flex;align-items:center;gap:8px;min-width:120px;justify-content:center;transition:all .4s cubic-bezier(.34,1.56,.64,1);pointer-events:none}
#clean-island .ci-dot{width:6px;height:6px;border-radius:50%;background:#34d399;animation:ci-pulse 2s ease infinite}
@keyframes ci-pulse{0%,100%{opacity:.5;transform:scale(.8)}50%{opacity:1;transform:scale(1.2)}}
/* Dock spring bounce */
.clean-dock-icon{transition:transform .3s cubic-bezier(.34,1.56,.64,1),box-shadow .3s}
.clean-dock-icon:hover{transform:translateY(-10px) scale(1.12);box-shadow:0 12px 32px rgba(0,0,0,.2)}

/* ═══ PREMIUM UX — SHARED ENHANCEMENTS ═══ */
/* Start button ripple */
#os-start-btn:active{transform:scale(.95);transition-duration:.08s}
#os-start-btn{position:relative;overflow:hidden}
#os-start-btn::after{content:"";position:absolute;inset:0;border-radius:10px;background:radial-gradient(circle,currentColor,transparent 70%);opacity:0;transform:scale(0);transition:transform .4s,opacity .3s}
#os-start-btn:active::after{opacity:.15;transform:scale(2.5);transition:none}
/* Mode switch crossfade */
#jarvis-layer,#clean-layer{transition:opacity .5s cubic-bezier(.2,.9,.3,1)}
/* Custom wallpaper layers */
#clean-bg.wp-img{background-size:cover;background-position:center;background-repeat:no-repeat;animation:none}
#clean-bg .wp-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
#jarvis-bg .wp-custom-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.35;z-index:0}
/* Wallpaper picker modal */
#os-wp-picker{display:flex;position:fixed;inset:0;z-index:400;background:rgba(0,0,0,.55);backdrop-filter:blur(16px);align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity var(--dur-default) var(--ease-spring)}
#os-wp-picker.open{opacity:1;pointer-events:auto}
.wp-modal{width:360px;max-width:92vw;max-height:80vh;overflow-y:auto;border-radius:16px;padding:20px}
.jarvis .wp-modal{background:rgba(0,12,6,.96);border:1px solid rgba(0,255,163,.2);color:#e8fff6}
.clean .wp-modal{background:rgba(255,255,255,.96);border:1px solid rgba(0,0,0,.1);color:#1a1a2e}
.wp-title{font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;margin-bottom:12px;display:flex;align-items:center;gap:6px}
.jarvis .wp-title{color:#00ffa3}.clean .wp-title{color:#007AFF}
.wp-section{font-size:9px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;margin:12px 0 6px;opacity:.4}
.wp-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:12px}
.wp-swatch{width:100%;aspect-ratio:1;border-radius:10px;cursor:pointer;border:2px solid transparent;transition:0.2s cubic-bezier(.2,.9,.3,1);position:relative;overflow:hidden}
.wp-swatch:hover{transform:scale(1.06);border-color:rgba(255,255,255,.3)}
.wp-swatch:active{transform:scale(.95);transition-duration:.08s}
.wp-swatch.active{border-color:#00ffa3;box-shadow:0 0 12px rgba(0,255,163,.3)}
.clean .wp-swatch.active{border-color:#007AFF;box-shadow:0 0 12px rgba(0,122,255,.3)}
.wp-upload{width:100%;padding:14px;border-radius:10px;border:2px dashed rgba(255,255,255,.15);text-align:center;cursor:pointer;font-size:10px;font-weight:600;transition:0.2s cubic-bezier(.2,.9,.3,1);margin-bottom:10px}
.jarvis .wp-upload{color:rgba(200,255,240,.4);background:rgba(0,20,10,.3)}
.jarvis .wp-upload:hover{border-color:rgba(0,255,163,.3);color:#e8fff6}
.clean .wp-upload{color:rgba(0,0,0,.35);background:rgba(0,0,0,.03);border-color:rgba(0,0,0,.1)}
.clean .wp-upload:hover{border-color:rgba(0,122,255,.3);color:#1a1a2e}
.wp-ai-row{display:flex;gap:6px;margin-bottom:12px}
.wp-ai-input{flex:1;padding:8px 10px;border-radius:8px;font-family:inherit;font-size:11px;outline:none}
.jarvis .wp-ai-input{border:1px solid rgba(0,255,163,.2);background:rgba(0,20,10,.5);color:#e8fff6}
.clean .wp-ai-input{border:1px solid rgba(0,0,0,.1);background:rgba(0,0,0,.03);color:#1a1a2e}
.wp-ai-btn{padding:8px 12px;border-radius:8px;border:none;font-weight:700;font-size:10px;cursor:pointer;font-family:inherit;transition:0.2s cubic-bezier(.2,.9,.3,1)}
.jarvis .wp-ai-btn{background:rgba(0,255,163,.15);color:#00ffa3;border:1px solid rgba(0,255,163,.25)}
.clean .wp-ai-btn{background:rgba(0,122,255,.1);color:#007AFF;border:1px solid rgba(0,122,255,.2)}
.wp-ai-btn:hover{transform:scale(1.03)}
.wp-close{position:absolute;top:12px;right:12px;width:24px;height:24px;border-radius:50%;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:14px;transition:0.2s cubic-bezier(.2,.9,.3,1)}
.jarvis .wp-close{background:rgba(255,255,255,.06);color:rgba(200,255,240,.5)}
.clean .wp-close{background:rgba(0,0,0,.05);color:rgba(0,0,0,.4)}
.wp-close:hover{transform:scale(1.1)}

/* ═══ WINDOWED DESKTOP SYSTEM ═══ */
#os-windows{position:fixed;inset:0;z-index:100;pointer-events:none}
#os-windows .os-win{pointer-events:auto}
.os-win{position:absolute;display:flex;flex-direction:column;border-radius:12px;overflow:hidden;transition:box-shadow 0.2s cubic-bezier(.2,.9,.3,1),opacity .25s,transform .25s;min-width:320px;min-height:240px;opacity:0;transform:scale(.95) translateY(12px);animation:win-open .35s cubic-bezier(.34,1.56,.64,1) forwards}
@keyframes win-open{to{opacity:1;transform:none}}
.os-win.closing{animation:win-close .25s cubic-bezier(.2,.9,.3,1) forwards}
@keyframes win-close{to{opacity:0;transform:scale(.92) translateY(8px)}}
/* Jarvis theme windows */
.jarvis .os-win{background:rgba(0,8,4,.92);border:1px solid rgba(0,255,163,.2);box-shadow:0 8px 40px rgba(0,0,0,.6),0 0 30px rgba(0,255,163,.06)}
.jarvis .os-win:focus-within,.jarvis .os-win.focused{border-color:rgba(0,255,163,.4);box-shadow:0 12px 50px rgba(0,0,0,.7),0 0 40px rgba(0,255,163,.1)}
/* Clean theme windows */
.clean .os-win{background:rgba(255,255,255,.95);border:1px solid rgba(0,0,0,.1);box-shadow:0 4px 16px rgba(0,0,0,.1),0 8px 24px rgba(0,0,0,.06)}
.clean .os-win:focus-within,.clean .os-win.focused{box-shadow:0 8px 32px rgba(0,0,0,.15),0 12px 48px rgba(0,0,0,.1)}
/* Title bar */
.os-win-bar{display:flex;align-items:center;gap:8px;padding:0 12px;height:36px;flex-shrink:0;cursor:grab;user-select:none;-webkit-user-select:none}
.os-win-bar:active{cursor:grabbing}
.jarvis .os-win-bar{background:rgba(0,12,6,.8);border-bottom:1px solid rgba(0,255,163,.1)}
.clean .os-win-bar{background:rgba(240,240,245,.9);border-bottom:1px solid rgba(0,0,0,.06)}
.os-win-bar iconify-icon{width:14px;height:14px;flex-shrink:0}
.jarvis .os-win-bar iconify-icon{color:#00ffa3}
.clean .os-win-bar iconify-icon{color:#007AFF}
.os-win-title{font-size:11px;font-weight:700;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.jarvis .os-win-title{color:#e8fff6;font-family:'Orbitron',monospace;font-size:9px;letter-spacing:.08em}
.clean .os-win-title{color:#1a1a2e}
/* Window controls — managed by inline <style> in os-beta.html with !important.
   DO NOT add .os-win-ctrl rules here — they will conflict. */
/* Window body (iframe) */
.os-win-body{flex:1;position:relative;overflow:auto;-webkit-overflow-scrolling:touch}
.os-win-body iframe{width:100%;height:100%;border:none;background:#fff}
.jarvis .os-win-body iframe{background:#000b06}
/* Maximized state */
.os-win.maximized{top:48px!important;left:0!important;width:100vw!important;height:calc(100vh - 48px)!important;height:calc(100dvh - 48px)!important;border-radius:0;transition:all .3s cubic-bezier(.22,1,.36,1)}
/* Minimized state */
.os-win.minimized{display:none}
.os-win.minimizing{animation:win-minimize .3s cubic-bezier(.2,.9,.3,1) forwards}
@keyframes win-minimize{to{transform:scale(.1);opacity:0}}
/* Resize handle */
.os-win-resize{position:absolute;bottom:0;right:0;width:16px;height:16px;cursor:nwse-resize}
.jarvis .os-win-resize::after{content:'';position:absolute;bottom:3px;right:3px;width:8px;height:8px;border-right:2px solid rgba(0,255,163,.2);border-bottom:2px solid rgba(0,255,163,.2)}
.clean .os-win-resize::after{content:'';position:absolute;bottom:3px;right:3px;width:8px;height:8px;border-right:2px solid rgba(0,0,0,.12);border-bottom:2px solid rgba(0,0,0,.12)}
/* Taskbar window pills */
.os-tb-wins{display:flex;gap:4px;align-items:center;overflow-x:auto;max-width:40vw;scrollbar-width:none}
.os-tb-wins::-webkit-scrollbar{display:none}
.os-tb-win-pill{display:flex;align-items:center;gap:4px;padding:3px 8px;border-radius:6px;font-size:9px;font-weight:600;cursor:pointer;transition:0.2s cubic-bezier(.2,.9,.3,1);white-space:nowrap;max-width:120px;overflow:hidden;text-overflow:ellipsis;border:1px solid transparent;flex-shrink:0}
.jarvis .os-tb-win-pill{color:rgba(200,255,240,.6);background:rgba(0,255,163,.06);border-color:rgba(0,255,163,.12)}
.jarvis .os-tb-win-pill:hover,.jarvis .os-tb-win-pill.active{background:rgba(0,255,163,.12);color:#e8fff6;border-color:rgba(0,255,163,.25)}
.clean .os-tb-win-pill{color:rgba(0,0,0,.5);background:rgba(0,0,0,.04);border-color:rgba(0,0,0,.06)}
.clean .os-tb-win-pill:hover,.clean .os-tb-win-pill.active{background:rgba(0,0,0,.08);color:#1a1a2e;border-color:rgba(0,0,0,.12)}
.os-tb-win-pill iconify-icon{width:12px;height:12px;flex-shrink:0}
/* Per-category window min-sizes — set by os-beta-wm.js via class */
.os-win.os-win-studio{min-width:600px;min-height:400px}
.os-win.os-win-compact{min-width:380px;min-height:300px}
.os-win.os-win-dashboard{min-width:500px;min-height:350px}
.os-win.os-win-default{min-width:420px;min-height:300px}
/* Smooth resize transition for snap/maximize */
.os-win{transition:box-shadow 0.2s cubic-bezier(.2,.9,.3,1),opacity .25s,transform .25s,width .3s ease,height .3s ease,top .3s ease,left .3s ease}
.os-win.maximized{transition:all .3s cubic-bezier(.22,1,.36,1)}
/* Mobile: windows are always maximized — override min-sizes */
@media(max-width:768px){
  .os-win{top:48px!important;left:0!important;width:100vw!important;height:calc(100vh - 48px)!important;height:calc(100dvh - 48px)!important;border-radius:0;min-width:0!important;min-height:0!important}
  .os-win-resize{display:none}
  .os-win-bar{padding:0 8px}
  .os-tb-wins{max-width:50vw}
}

/* ═══ ONBOARDING TOUR ═══ */
#os-tour-overlay{position:fixed;inset:0;z-index:9999;pointer-events:none;opacity:0;transition:opacity .4s}
#os-tour-overlay.active{opacity:1;pointer-events:auto}
#os-tour-overlay .tour-dim{position:absolute;inset:0;background:rgba(0,0,0,.65);backdrop-filter:blur(8px)}
.tour-spotlight{position:absolute;border-radius:12px;box-shadow:0 0 0 4000px rgba(0,0,0,.6);transition:all .5s cubic-bezier(.34,1.56,.64,1);z-index:1}
.jarvis .tour-spotlight{border:2px solid rgba(0,255,163,.6);box-shadow:0 0 0 4000px rgba(0,0,0,.6),0 0 30px rgba(0,255,163,.3)}
.clean .tour-spotlight{border:2px solid rgba(255,255,255,.6);box-shadow:0 0 0 4000px rgba(0,0,0,.5),0 0 20px rgba(255,255,255,.2)}
.tour-tooltip{position:absolute;z-index:2;max-width:300px;padding:16px 20px;border-radius:14px;backdrop-filter:blur(20px);animation:tour-pop .4s cubic-bezier(.34,1.56,.64,1) both;font-size:12px;line-height:1.5}
.jarvis .tour-tooltip{background:rgba(0,12,6,.92);border:1px solid rgba(0,255,163,.25);color:#e8fff6;box-shadow:0 8px 40px rgba(0,0,0,.5),0 0 20px rgba(0,255,163,.08)}
.clean .tour-tooltip{background:rgba(255,255,255,.92);backdrop-filter:blur(20px) saturate(1.8);border:1px solid rgba(0,0,0,.08);color:#1a1a2e;box-shadow:0 8px 40px rgba(0,0,0,.15)}
@keyframes tour-pop{from{opacity:0;transform:scale(.9) translateY(8px)}to{opacity:1;transform:none}}
.tour-title{font-weight:800;font-size:14px;margin-bottom:6px;display:flex;align-items:center;gap:6px}
.jarvis .tour-title{color:#00ffa3}
.clean .tour-title{color:#007AFF}
.tour-step{font-size:10px;opacity:.4;margin-bottom:8px;font-weight:600;letter-spacing:.06em}
.tour-btns{display:flex;gap:8px;margin-top:12px}
.tour-btn{padding:7px 16px;border-radius:8px;font-size:11px;font-weight:700;cursor:pointer;border:none;font-family:inherit;transition:0.2s cubic-bezier(.2,.9,.3,1)}
.tour-btn:hover{transform:scale(1.03)}
.tour-btn.primary{color:#000}
.jarvis .tour-btn.primary{background:#00ffa3}
.clean .tour-btn.primary{background:#007AFF;color:#fff}
.tour-btn.secondary{background:transparent;border:1px solid rgba(255,255,255,.15);color:rgba(255,255,255,.5)}
.clean .tour-btn.secondary{border-color:rgba(0,0,0,.1);color:rgba(0,0,0,.4)}
.tour-arrow{position:absolute;width:12px;height:12px;rotate:45deg}
.jarvis .tour-arrow{background:rgba(0,12,6,.92);border-left:1px solid rgba(0,255,163,.25);border-bottom:1px solid rgba(0,255,163,.25)}
.clean .tour-arrow{background:rgba(255,255,255,.92);border-left:1px solid rgba(0,0,0,.08);border-bottom:1px solid rgba(0,0,0,.08)}
/* Start button pulse during onboarding */
.tour-pulse{animation:tour-ring 1.5s ease infinite!important}
@keyframes tour-ring{0%{box-shadow:0 0 0 0 rgba(0,255,163,.4)}70%{box-shadow:0 0 0 12px rgba(0,255,163,0)}100%{box-shadow:0 0 0 0 rgba(0,255,163,0)}}
.clean .tour-pulse{animation:tour-ring-c 1.5s ease infinite!important}
@keyframes tour-ring-c{0%{box-shadow:0 0 0 0 rgba(0,122,255,.4)}70%{box-shadow:0 0 0 12px rgba(0,122,255,0)}100%{box-shadow:0 0 0 0 rgba(0,122,255,0)}}

/* ═══ WINDOW MANAGER ENHANCEMENTS — v20260601-p3 ═══ */
.os-win-loading{position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:center;pointer-events:none}
.os-win-loading iconify-icon{width:28px;height:28px;animation:spin 1s linear infinite}
.jarvis .os-win-loading{background:radial-gradient(circle at center,rgba(0,255,163,.08),rgba(0,8,4,.72));color:#00ffa3}
.clean .os-win-loading{background:rgba(255,255,255,.65);color:#007AFF;backdrop-filter:blur(12px)}
@keyframes spin{to{transform:rotate(360deg)}}
.clean-dock-icon.dock-open::after{content:"";position:absolute;left:50%;bottom:-7px;width:4px;height:4px;border-radius:50%;transform:translateX(-50%);z-index:3;background:rgba(255,255,255,.95);box-shadow:0 0 6px rgba(255,255,255,.7)}
.jarvis .clean-dock-icon.dock-open::after{background:#00ffa3;box-shadow:0 0 8px rgba(0,255,163,.9)}
#os-snap-indicator{position:fixed;z-index:9998;pointer-events:none;opacity:0;border-radius:18px;transition:opacity .12s,top .12s,left .12s,width .12s,height .12s}
#os-snap-indicator.snap-active{opacity:1}
#os-snap-indicator.snap-left{top:54px;left:8px;width:calc(50vw - 12px);height:calc(100vh - 62px)}
#os-snap-indicator.snap-right{top:54px;left:calc(50vw + 4px);width:calc(50vw - 12px);height:calc(100vh - 62px)}
#os-snap-indicator.snap-max{top:54px;left:8px;width:calc(100vw - 16px);height:calc(100vh - 62px)}
.jarvis #os-snap-indicator{background:rgba(0,255,163,.08);border:1px solid rgba(0,255,163,.45);box-shadow:inset 0 0 40px rgba(0,255,163,.12),0 0 24px rgba(0,255,163,.18)}
.clean #os-snap-indicator{background:rgba(255,255,255,.22);border:1px solid rgba(255,255,255,.65);box-shadow:inset 0 0 35px rgba(255,255,255,.25),0 10px 34px rgba(0,0,0,.16);backdrop-filter:blur(14px)}
#os-spotlight{position:fixed;inset:0;z-index:12000;display:none;align-items:flex-start;justify-content:center;padding-top:14vh}
#os-spotlight.open{display:flex}
#os-spotlight .spot-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.28);backdrop-filter:blur(16px)}
.spot-box{position:relative;width:min(560px,calc(100vw - 32px));border-radius:18px;overflow:hidden;animation:spot-in .18s ease both}
@keyframes spot-in{from{opacity:0;transform:translateY(-10px) scale(.98)}to{opacity:1;transform:none}}
.spot-input{width:100%;height:58px;border:0;outline:0;padding:0 20px;font-family:inherit;font-size:18px;font-weight:650}
.spot-results{max-height:440px;overflow-y:auto;padding:8px;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.spot-item{display:flex;align-items:center;gap:12px;padding:12px;border-radius:12px;cursor:pointer;transition:background .12s,transform .12s}
.spot-item:hover,.spot-item.selected{transform:translateX(2px)}
.spot-item iconify-icon{width:20px;height:20px}
.spot-name{font-size:13px;font-weight:800;flex:1}
.spot-cat{font-size:10px;font-weight:700;opacity:.42;text-transform:uppercase;letter-spacing:.08em}
.spot-empty{padding:18px;text-align:center;font-size:12px;opacity:.45}
.jarvis .spot-box{background:rgba(0,8,4,.9);border:1px solid rgba(0,255,163,.24);box-shadow:0 22px 80px rgba(0,0,0,.65),0 0 44px rgba(0,255,163,.12);backdrop-filter:blur(28px)}
.jarvis .spot-input{background:rgba(0,18,10,.85);color:#e8fff6;border-bottom:1px solid rgba(0,255,163,.14)}
.jarvis .spot-input::placeholder{color:rgba(200,255,240,.35)}
.jarvis .spot-results{background:rgba(0,8,4,.75)}
.jarvis .spot-item{color:#e8fff6;border:1px solid transparent}
.jarvis .spot-item iconify-icon{color:#00ffa3;filter:drop-shadow(0 0 5px rgba(0,255,163,.45))}
.jarvis .spot-item:hover,.jarvis .spot-item.selected{background:rgba(0,255,163,.1);border-color:rgba(0,255,163,.22)}
.clean .spot-box{background:rgba(255,255,255,.82);border:1px solid rgba(255,255,255,.65);box-shadow:0 22px 80px rgba(0,0,0,.22),0 2px 10px rgba(0,0,0,.08);backdrop-filter:blur(34px) saturate(1.8)}
.clean .spot-input{background:rgba(255,255,255,.58);color:#1a1a2e;border-bottom:1px solid rgba(0,0,0,.08)}
.clean .spot-input::placeholder{color:rgba(0,0,0,.34)}
.clean .spot-results{background:rgba(255,255,255,.35)}
.clean .spot-item{color:#1a1a2e}
.clean .spot-item iconify-icon{color:#007AFF}
.clean .spot-item:hover,.clean .spot-item.selected{background:rgba(0,122,255,.1)}
@media(max-width:480px){
  #os-spotlight{padding-top:max(72px,calc(env(safe-area-inset-top,0px) + 54px))}
  .spot-input{height:50px;font-size:15px}
  .spot-results{max-height:60vh}
}

/* ═══════════════════════════════════════════════════════════════════════
   LUXURY UI FEATURES
   ═══════════════════════════════════════════════════════════════════════ */

/* ═══ 1. CLEAN STUDIO STRIP ═══ */
#clean-widgets{position:fixed;bottom:100px;left:50%;transform:translateX(-50%);z-index:150;display:flex;gap:8px;pointer-events:auto}
.cw-widget{display:flex;align-items:center;gap:6px;padding:8px 14px;border-radius:14px;background:rgba(255,255,255,.18);backdrop-filter:blur(24px) saturate(1.6);border:1px solid rgba(255,255,255,.22);font-size:10px;font-weight:700;color:#fff;white-space:nowrap;transition:all .25s;box-shadow:0 2px 12px rgba(0,0,0,.08);cursor:pointer;text-decoration:none;letter-spacing:.02em}
.cw-widget:hover{background:rgba(255,255,255,.32);transform:translateY(-3px) scale(1.03);box-shadow:0 6px 24px rgba(0,0,0,.15);border-color:rgba(255,255,255,.4)}
.cw-widget:active{transform:scale(.95)}
.cw-widget iconify-icon{width:16px;height:16px;flex-shrink:0;color:rgba(255,255,255,.9)}
/* Hide studio strip in Jarvis mode */
.jarvis #clean-widgets{display:none}
/* Mobile: smaller */
@media(max-width:768px){
  #clean-widgets{bottom:90px;gap:6px}
  .cw-widget{padding:6px 10px;font-size:9px;border-radius:10px}
}
@media(max-width:480px){
  #clean-widgets{bottom:82px;gap:4px}
  .cw-widget{padding:5px 8px;font-size:8px;border-radius:8px}
  .cw-widget iconify-icon{width:14px;height:14px}
}
@media(max-width:390px){
  #clean-widgets{display:none}
}

/* ═══ 2. NOTIFICATION CENTER ═══ */
#os-notif-center{position:fixed;top:52px;right:12px;z-index:300;width:320px;max-width:calc(100vw - 24px);max-height:60vh;overflow-y:auto;border-radius:16px;padding:0;opacity:0;transform:translateY(-12px) scale(.97);pointer-events:none;transition:all .3s cubic-bezier(.34,1.56,.64,1);scrollbar-width:thin}
#os-notif-center.open{opacity:1;transform:none;pointer-events:auto}
.jarvis #os-notif-center{background:rgba(0,12,6,.94);backdrop-filter:blur(30px);border:1px solid rgba(0,255,163,.2);box-shadow:0 8px 40px rgba(0,0,0,.5),0 0 20px rgba(0,255,163,.06);color:#e8fff6}
.clean #os-notif-center{background:rgba(255,255,255,.94);backdrop-filter:blur(30px) saturate(1.5);border:1px solid rgba(0,0,0,.08);box-shadow:0 8px 40px rgba(0,0,0,.15);color:#1a1a2e}
.notif-header{display:flex;align-items:center;gap:8px;padding:14px 16px 10px;font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;border-bottom:1px solid rgba(128,128,128,.1)}
.jarvis .notif-header{color:#00ffa3}
.clean .notif-header{color:#007AFF}
.notif-header iconify-icon{width:16px;height:16px}
.notif-close{margin-left:auto;min-width:44px;min-height:44px;border-radius:50%;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:14px;transition:0.2s cubic-bezier(.2,.9,.3,1);background:none}
.jarvis .notif-close{color:rgba(200,255,240,.4)}.jarvis .notif-close:hover{background:rgba(0,255,163,.1);color:#e8fff6}
.clean .notif-close{color:rgba(0,0,0,.3)}.clean .notif-close:hover{background:rgba(0,0,0,.06);color:#1a1a2e}
.notif-item{display:flex;align-items:flex-start;gap:10px;padding:10px 16px;transition:background 0.2s cubic-bezier(.2,.9,.3,1);cursor:default}
.notif-item:hover{background:rgba(128,128,128,.06)}
.notif-item:active{transform:scale(.98);transition-duration:.08s}
.notif-item iconify-icon{width:16px;height:16px;flex-shrink:0;margin-top:2px}
.jarvis .notif-item iconify-icon{color:#00ffa3}
.clean .notif-item iconify-icon{color:#007AFF}
.notif-body{flex:1;min-width:0}
.notif-title{font-size:11px;font-weight:600;line-height:1.4}
.notif-time{font-size:9px;opacity:.4;margin-top:2px}
.notif-empty{padding:30px 16px;text-align:center;font-size:11px;opacity:.4}

/* ═══ 3. RIGHT-CLICK CONTEXT MENU ═══ */
#os-ctx-menu{position:fixed;z-index:500;min-width:170px;border-radius:12px;padding:6px;opacity:0;transform:scale(.95);pointer-events:none;transition:all 0.2s cubic-bezier(.2,.9,.3,1)}
#os-ctx-menu.open{opacity:1;transform:none;pointer-events:auto}
.jarvis #os-ctx-menu{background:rgba(0,12,6,.95);backdrop-filter:blur(24px);border:1px solid rgba(0,255,163,.2);box-shadow:0 8px 40px rgba(0,0,0,.5),0 0 16px rgba(0,255,163,.06)}
.clean #os-ctx-menu{background:rgba(255,255,255,.95);backdrop-filter:blur(24px) saturate(1.8);border:1px solid rgba(0,0,0,.08);box-shadow:0 4px 16px rgba(0,0,0,.1),0 8px 24px rgba(0,0,0,.06)}
.ctx-item{display:flex;align-items:center;gap:8px;padding:12px 16px;border-radius:8px;font-size:11px;font-weight:600;cursor:pointer;transition:background .12s;min-height:44px}
.jarvis .ctx-item{color:#e8fff6}
.jarvis .ctx-item:hover{background:rgba(0,255,163,.1)}
.jarvis .ctx-item iconify-icon{color:#00ffa3}
.clean .ctx-item{color:#1a1a2e}
.clean .ctx-item:hover{background:rgba(0,0,0,.06)}
.ctx-item:active{transform:scale(.95);transition-duration:.08s}
.clean .ctx-item iconify-icon{color:#007AFF}
.ctx-item iconify-icon{width:14px;height:14px;flex-shrink:0}
.ctx-sep{height:1px;margin:4px 8px;background:rgba(128,128,128,.12)}

/* ═══ 5. JARVIS VOICE ACTIVATION RINGS ═══ */
.voice-active .j-ring{border-width:2px}
.voice-active .j-ring-1{border-color:rgba(0,255,163,.6);box-shadow:0 0 20px rgba(0,255,163,.3);animation:jr 10s linear infinite,voice-ring-pulse 1.5s ease-in-out infinite alternate}
.voice-active .j-ring-2{border-color:rgba(58,201,255,.4);box-shadow:0 0 16px rgba(58,201,255,.25);animation:jr 16s linear infinite reverse,voice-ring-pulse 2s ease-in-out infinite alternate}
.voice-active .j-ring-3{border-color:rgba(180,122,255,.35);box-shadow:0 0 14px rgba(180,122,255,.2);animation:jr 22s linear infinite,voice-ring-pulse 2.5s ease-in-out infinite alternate}
@keyframes voice-ring-pulse{0%{filter:brightness(1)}100%{filter:brightness(1.6)}}
.voice-active .j-ring::before{box-shadow:0 0 16px currentColor;width:7px;height:7px}

/* ═══ 7. AMBIENT SOUND TRAY ICON ═══ */
#os-ambient-btn{cursor:pointer!important}
.jarvis #os-ambient-btn:hover{color:#00ffa3;background:rgba(0,255,163,.1)}
.clean #os-ambient-btn:hover{color:#007AFF;background:rgba(0,122,255,.08)}

/* ═══════════════════════════════════════════════════════════════════════
   DESKTOP ITEMS SYSTEM — Shortcuts, Folders & Files on Clean wallpaper
   ═══════════════════════════════════════════════════════════════════════ */

/* ═══ 1. DESKTOP GRID ═══ */
#os-desktop{position:absolute;inset:0;z-index:2;display:grid;grid-template-columns:repeat(auto-fill,90px);grid-template-rows:repeat(auto-fill,100px);gap:4px;align-content:start;padding:56px 20px 110px;pointer-events:none}
#os-desktop>*{pointer-events:auto}
.jarvis #os-desktop{display:none}

/* ═══ 2. DESKTOP ITEMS ═══ */
.desk-item{width:86px;display:flex;flex-direction:column;align-items:center;gap:4px;padding:6px 4px;border-radius:14px;cursor:pointer;transition:background 0.2s cubic-bezier(.2,.9,.3,1),transform .18s cubic-bezier(.34,1.56,.64,1),box-shadow 0.2s cubic-bezier(.2,.9,.3,1);user-select:none;-webkit-user-select:none;pointer-events:auto;position:relative}
.clean .desk-item:hover{background:rgba(255,255,255,.12);transform:translateY(-2px)}
.jarvis .desk-item:hover{background:rgba(0,255,163,.06);transform:translateY(-2px)}
.desk-item:active{transform:scale(.92)!important;transition-duration:.1s}
.desk-item.dragging{opacity:.5;transform:scale(1.1)!important;z-index:50;transition:none}
.desk-icon{width:48px;height:48px;border-radius:12px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:24px;box-shadow:0 2px 10px rgba(0,0,0,.18);transition:transform .3s cubic-bezier(.34,1.56,.64,1),box-shadow .3s ease}
.desk-item:hover .desk-icon{box-shadow:0 6px 18px rgba(0,0,0,.22)}
.desk-icon iconify-icon{width:24px;height:24px}
.desk-label{font-size:10px;font-weight:600;text-align:center;line-height:1.2;max-width:80px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;word-break:break-word}
.clean .desk-label{color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.4)}
.jarvis .desk-label{color:#e8fff6}

/* ═══ 3. FOLDER PREVIEW ═══ */
.desk-folder-preview{width:100%;height:100%;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:2px;padding:6px}
.desk-folder-preview .dfp-mini{width:12px;height:12px;border-radius:3px;background:currentColor}

/* ═══ 4. FOLDER VIEW OVERLAY ═══ */
.desk-folder-view{position:fixed;inset:0;z-index:460;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.4);backdrop-filter:blur(16px);opacity:0;pointer-events:none;transition:opacity .25s ease}
.desk-folder-view.open{opacity:1;pointer-events:auto}
.desk-fv-panel{width:min(400px,92vw);max-height:60vh;overflow-y:auto;border-radius:20px;padding:20px;position:relative;animation:desk-fv-in .3s cubic-bezier(.34,1.56,.64,1) both}
@keyframes desk-fv-in{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:none}}
.jarvis .desk-fv-panel{background:rgba(0,12,6,.94);backdrop-filter:blur(30px);border:1px solid rgba(0,255,163,.2);box-shadow:0 12px 50px rgba(0,0,0,.6),0 0 30px rgba(0,255,163,.08);color:#e8fff6}
.clean .desk-fv-panel{background:rgba(255,255,255,.92);backdrop-filter:blur(30px) saturate(1.5);border:1px solid rgba(255,255,255,.35);box-shadow:0 12px 50px rgba(0,0,0,.2);color:#1a1a2e}
.desk-fv-close{position:absolute;top:12px;right:12px;width:26px;height:26px;border-radius:50%;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:14px;transition:0.2s cubic-bezier(.2,.9,.3,1);background:none}
.jarvis .desk-fv-close{color:rgba(200,255,240,.5)}
.jarvis .desk-fv-close:hover{background:rgba(0,255,163,.1);color:#e8fff6}
.clean .desk-fv-close{color:rgba(0,0,0,.35)}
.clean .desk-fv-close:hover{background:rgba(0,0,0,.06);color:#1a1a2e}
.desk-fv-title{font-size:16px;font-weight:700;margin-bottom:14px;outline:none;border:none;background:none;color:inherit;font-family:inherit;width:calc(100% - 40px);padding:0}
.jarvis .desk-fv-title{color:#00ffa3}
.clean .desk-fv-title{color:#007AFF}
.desk-fv-grid{display:grid;grid-template-columns:repeat(auto-fill,86px);gap:6px;justify-content:center}
.desk-fv-grid .desk-item{width:86px}
.desk-fv-add{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;padding:10px;margin-top:12px;border-radius:10px;font-size:11px;font-weight:600;cursor:pointer;font-family:inherit;transition:0.2s cubic-bezier(.2,.9,.3,1)}
.jarvis .desk-fv-add{border:1px dashed rgba(0,255,163,.25);background:none;color:rgba(0,255,163,.5)}
.jarvis .desk-fv-add:hover{border-color:rgba(0,255,163,.5);color:#00ffa3;background:rgba(0,255,163,.04)}
.clean .desk-fv-add{border:1px dashed rgba(0,122,255,.25);background:none;color:rgba(0,122,255,.5)}
.clean .desk-fv-add:hover{border-color:rgba(0,122,255,.5);color:#007AFF;background:rgba(0,122,255,.04)}
.desk-fv-add iconify-icon{width:14px;height:14px}

/* ═══ 5. ICON PICKER ═══ */
#os-icon-picker{position:fixed;inset:0;z-index:500;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.45);backdrop-filter:blur(16px);opacity:0;pointer-events:none;transition:opacity .25s ease}
#os-icon-picker.open{opacity:1;pointer-events:auto}
.ip-modal{width:min(480px,94vw);max-height:70vh;overflow:hidden;display:flex;flex-direction:column;border-radius:20px;position:relative;animation:desk-fv-in .3s cubic-bezier(.34,1.56,.64,1) both}
.jarvis .ip-modal{background:rgba(0,12,6,.96);backdrop-filter:blur(30px);border:1px solid rgba(0,255,163,.2);box-shadow:0 12px 50px rgba(0,0,0,.6),0 0 30px rgba(0,255,163,.08);color:#e8fff6}
.clean .ip-modal{background:rgba(255,255,255,.96);backdrop-filter:blur(30px) saturate(1.5);border:1px solid rgba(0,0,0,.08);box-shadow:0 12px 50px rgba(0,0,0,.18);color:#1a1a2e}
.ip-header{padding:16px 16px 0;flex-shrink:0}
.ip-title{font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;margin-bottom:10px;display:flex;align-items:center;gap:6px}
.jarvis .ip-title{color:#00ffa3}
.clean .ip-title{color:#007AFF}
.ip-search{width:100%;height:36px;border-radius:10px;font-family:inherit;font-size:12px;padding:0 12px;outline:none;transition:0.2s cubic-bezier(.2,.9,.3,1);box-sizing:border-box}
.jarvis .ip-search{border:1px solid rgba(0,255,163,.18);background:rgba(0,20,10,.6);color:#e8fff6}
.jarvis .ip-search:focus{border-color:rgba(0,255,163,.45);box-shadow:0 0 16px rgba(0,255,163,.1)}
.clean .ip-search{border:1px solid rgba(0,0,0,.08);background:rgba(0,0,0,.04);color:#1a1a2e}
.clean .ip-search:focus{border-color:rgba(0,0,0,.2);box-shadow:0 0 0 3px rgba(0,0,0,.04)}
.ip-tabs{display:flex;gap:4px;padding:10px 16px;overflow-x:auto;scrollbar-width:none;flex-shrink:0}
.ip-tabs::-webkit-scrollbar{display:none}
.ip-tab{flex-shrink:0;padding:5px 12px;border-radius:16px;font-size:10px;font-weight:700;letter-spacing:.03em;cursor:pointer;transition:all 0.2s cubic-bezier(.2,.9,.3,1);white-space:nowrap;font-family:inherit;border:1px solid transparent;background:transparent}
.jarvis .ip-tab{color:rgba(200,255,240,.4);border-color:rgba(0,255,163,.1)}
.jarvis .ip-tab:hover{color:#e8fff6;border-color:rgba(0,255,163,.25);background:rgba(0,255,163,.05)}
.jarvis .ip-tab.active{background:rgba(0,255,163,.14);border-color:rgba(0,255,163,.5);color:#00ffa3}
.clean .ip-tab{color:rgba(0,0,0,.4);border-color:rgba(0,0,0,.06)}
.clean .ip-tab:hover{color:#1a1a2e;background:rgba(0,0,0,.04)}
.clean .ip-tab.active{background:rgba(0,122,255,.1);border-color:rgba(0,122,255,.3);color:#007AFF;font-weight:800}
.ip-grid{display:grid;grid-template-columns:repeat(auto-fill,64px);gap:6px;overflow-y:auto;flex:1;padding:4px 16px 12px;scrollbar-width:thin;justify-content:center}
.ip-icon{width:60px;height:60px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;border-radius:10px;cursor:pointer;transition:background 0.2s cubic-bezier(.2,.9,.3,1),transform 0.2s cubic-bezier(.2,.9,.3,1),border-color 0.2s cubic-bezier(.2,.9,.3,1);border:2px solid transparent;padding:4px}
.jarvis .ip-icon:hover{background:rgba(0,255,163,.08)}
.clean .ip-icon:hover{background:rgba(0,0,0,.05)}
.ip-icon.selected{border-color:#00ffa3;box-shadow:0 0 12px rgba(0,255,163,.2)}
.clean .ip-icon.selected{border-color:#007AFF;box-shadow:0 0 12px rgba(0,122,255,.2)}
.ip-icon iconify-icon{width:24px;height:24px}
.jarvis .ip-icon iconify-icon{color:#e8fff6}
.clean .ip-icon iconify-icon{color:#1a1a2e}
.ip-icon-label{font-size:8px;text-align:center;opacity:.5;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:56px;line-height:1.2}
.ip-footer{padding:10px 16px 14px;border-top:1px solid rgba(128,128,128,.1);flex-shrink:0}
.ip-colors{display:flex;gap:6px;align-items:center;justify-content:center;flex-wrap:wrap}
.ip-swatch{width:24px;height:24px;border-radius:50%;border:2px solid transparent;cursor:pointer;transition:transform 0.2s cubic-bezier(.2,.9,.3,1),border-color 0.2s cubic-bezier(.2,.9,.3,1),box-shadow 0.2s cubic-bezier(.2,.9,.3,1);flex-shrink:0}
.ip-swatch:hover{transform:scale(1.15)}
.ip-swatch.active{border-color:#fff;box-shadow:0 0 10px rgba(255,255,255,.35)}
.clean .ip-swatch.active{border-color:#1a1a2e;box-shadow:0 0 10px rgba(0,0,0,.15)}
.ip-close{position:absolute;top:12px;right:12px;width:26px;height:26px;border-radius:50%;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:14px;transition:0.2s cubic-bezier(.2,.9,.3,1);background:none}
.jarvis .ip-close{color:rgba(200,255,240,.5)}
.jarvis .ip-close:hover{background:rgba(0,255,163,.1);color:#e8fff6}
.clean .ip-close{color:rgba(0,0,0,.35)}
.clean .ip-close:hover{background:rgba(0,0,0,.06);color:#1a1a2e}

/* ═══ 6. ADD/EDIT MODAL ═══ */
#os-desk-editor{position:fixed;inset:0;z-index:450;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.45);backdrop-filter:blur(16px);opacity:0;pointer-events:none;transition:opacity .25s ease}
#os-desk-editor.open{opacity:1;pointer-events:auto}
.de-modal{width:340px;max-width:90vw;border-radius:20px;padding:20px;position:relative;animation:desk-fv-in .3s cubic-bezier(.34,1.56,.64,1) both}
.jarvis .de-modal{background:rgba(0,12,6,.96);backdrop-filter:blur(30px);border:1px solid rgba(0,255,163,.2);box-shadow:0 12px 50px rgba(0,0,0,.6),0 0 30px rgba(0,255,163,.08);color:#e8fff6}
.clean .de-modal{background:rgba(255,255,255,.96);backdrop-filter:blur(30px) saturate(1.5);border:1px solid rgba(0,0,0,.08);box-shadow:0 12px 50px rgba(0,0,0,.18);color:#1a1a2e}
.de-title{font-size:9px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;margin-bottom:12px}
.jarvis .de-title{color:#00ffa3}
.clean .de-title{color:#007AFF}
.de-field{width:100%;height:38px;border-radius:10px;font-family:inherit;font-size:13px;padding:0 14px;outline:none;transition:0.2s cubic-bezier(.2,.9,.3,1);box-sizing:border-box;margin-bottom:10px}
.jarvis .de-field{border:1px solid rgba(0,255,163,.18);background:rgba(0,20,10,.6);color:#e8fff6}
.jarvis .de-field:focus{border-color:rgba(0,255,163,.45);box-shadow:0 0 16px rgba(0,255,163,.1)}
.clean .de-field{border:1px solid rgba(0,0,0,.08);background:rgba(0,0,0,.04);color:#1a1a2e}
.clean .de-field:focus{border-color:rgba(0,0,0,.2);box-shadow:0 0 0 3px rgba(0,0,0,.04)}
select.de-field{cursor:pointer;-webkit-appearance:none;appearance:none;background-repeat:no-repeat;background-position:right 10px center;background-size:12px}
.de-icon-row{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.de-icon-preview{width:48px;height:48px;border-radius:12px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:24px;box-shadow:0 2px 10px rgba(0,0,0,.18);flex-shrink:0;cursor:pointer;transition:transform 0.2s cubic-bezier(.2,.9,.3,1)}
.de-icon-preview:hover{transform:scale(1.08)}
.de-icon-preview iconify-icon{width:24px;height:24px}
.de-icon-btn{padding:6px 14px;border-radius:8px;font-size:10px;font-weight:700;cursor:pointer;font-family:inherit;transition:0.2s cubic-bezier(.2,.9,.3,1);border:none}
.jarvis .de-icon-btn{background:rgba(0,255,163,.1);color:#00ffa3;border:1px solid rgba(0,255,163,.2)}
.jarvis .de-icon-btn:hover{background:rgba(0,255,163,.2)}
.clean .de-icon-btn{background:rgba(0,122,255,.08);color:#007AFF;border:1px solid rgba(0,122,255,.15)}
.clean .de-icon-btn:hover{background:rgba(0,122,255,.15)}
.de-colors{display:flex;gap:6px;align-items:center;margin-bottom:14px;flex-wrap:wrap}
.de-colors .ip-swatch{width:24px;height:24px}
.de-label{font-size:9px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;margin-bottom:6px;opacity:.5}
.de-btns{display:flex;gap:8px;margin-top:16px}
.de-btn{flex:1;padding:10px;border-radius:10px;font-size:11px;font-weight:700;cursor:pointer;font-family:inherit;transition:0.2s cubic-bezier(.2,.9,.3,1);border:none;text-align:center}
.de-btn:hover{transform:scale(1.02)}
.de-btn.primary{color:#000}
.jarvis .de-btn.primary{background:#00ffa3}
.clean .de-btn.primary{background:#007AFF;color:#fff}
.de-btn.danger{background:rgba(255,77,109,.12);color:#ff4d6d;border:1px solid rgba(255,77,109,.2)}
.de-btn.danger:hover{background:rgba(255,77,109,.2)}
.de-btn.secondary{background:transparent}
.jarvis .de-btn.secondary{border:1px solid rgba(0,255,163,.15);color:rgba(200,255,240,.5)}
.jarvis .de-btn.secondary:hover{border-color:rgba(0,255,163,.3);color:#e8fff6}
.clean .de-btn.secondary{border:1px solid rgba(0,0,0,.1);color:rgba(0,0,0,.4)}
.clean .de-btn.secondary:hover{border-color:rgba(0,0,0,.2);color:#1a1a2e}
.de-close{position:absolute;top:12px;right:12px;width:26px;height:26px;border-radius:50%;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:14px;transition:0.2s cubic-bezier(.2,.9,.3,1);background:none}
.jarvis .de-close{color:rgba(200,255,240,.5)}
.jarvis .de-close:hover{background:rgba(0,255,163,.1);color:#e8fff6}
.clean .de-close{color:rgba(0,0,0,.35)}
.clean .de-close:hover{background:rgba(0,0,0,.06);color:#1a1a2e}

/* ═══ 7. FILE BROWSER ═══ */
#os-file-browser{position:fixed;inset:0;z-index:450;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.45);backdrop-filter:blur(16px);opacity:0;pointer-events:none;transition:opacity .25s ease}
#os-file-browser.open{opacity:1;pointer-events:auto}
.fb-modal{width:min(500px,94vw);max-height:70vh;overflow:hidden;display:flex;flex-direction:column;border-radius:20px;position:relative;animation:desk-fv-in .3s cubic-bezier(.34,1.56,.64,1) both}
.jarvis .fb-modal{background:rgba(0,12,6,.96);backdrop-filter:blur(30px);border:1px solid rgba(0,255,163,.2);box-shadow:0 12px 50px rgba(0,0,0,.6),0 0 30px rgba(0,255,163,.08);color:#e8fff6}
.clean .fb-modal{background:rgba(255,255,255,.96);backdrop-filter:blur(30px) saturate(1.5);border:1px solid rgba(0,0,0,.08);box-shadow:0 12px 50px rgba(0,0,0,.18);color:#1a1a2e}
.fb-header{padding:16px 16px 0;flex-shrink:0}
.fb-title{font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;margin-bottom:10px;display:flex;align-items:center;gap:6px}
.jarvis .fb-title{color:#00ffa3}
.clean .fb-title{color:#007AFF}
.fb-search{width:100%;height:36px;border-radius:10px;font-family:inherit;font-size:12px;padding:0 12px;outline:none;transition:0.2s cubic-bezier(.2,.9,.3,1);box-sizing:border-box;margin-bottom:8px}
.jarvis .fb-search{border:1px solid rgba(0,255,163,.18);background:rgba(0,20,10,.6);color:#e8fff6}
.jarvis .fb-search:focus{border-color:rgba(0,255,163,.45);box-shadow:0 0 16px rgba(0,255,163,.1)}
.clean .fb-search{border:1px solid rgba(0,0,0,.08);background:rgba(0,0,0,.04);color:#1a1a2e}
.clean .fb-search:focus{border-color:rgba(0,0,0,.2);box-shadow:0 0 0 3px rgba(0,0,0,.04)}
.fb-list{display:flex;flex-direction:column;gap:4px;overflow-y:auto;flex:1;padding:8px 16px 16px;scrollbar-width:thin}
.fb-file{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:10px;cursor:pointer;transition:background 0.2s cubic-bezier(.2,.9,.3,1)}
.jarvis .fb-file:hover{background:rgba(0,255,163,.06)}
.clean .fb-file:hover{background:rgba(0,0,0,.04)}
.fb-thumb{width:36px;height:36px;border-radius:8px;object-fit:cover;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:18px}
.jarvis .fb-thumb{background:rgba(0,255,163,.08);color:#00ffa3}
.clean .fb-thumb{background:rgba(0,122,255,.08);color:#007AFF}
.fb-thumb iconify-icon{width:18px;height:18px}
.fb-thumb img{width:100%;height:100%;border-radius:8px;object-fit:cover}
.fb-info{flex:1;min-width:0}
.fb-name{font-size:12px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fb-meta{font-size:9px;opacity:.4;margin-top:2px}
.fb-actions{display:flex;gap:4px}
.fb-action{width:28px;height:28px;border-radius:6px;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:0.2s cubic-bezier(.2,.9,.3,1);background:none}
.jarvis .fb-action{color:rgba(200,255,240,.4)}
.jarvis .fb-action:hover{background:rgba(0,255,163,.1);color:#e8fff6}
.clean .fb-action{color:rgba(0,0,0,.3)}
.clean .fb-action:hover{background:rgba(0,0,0,.06);color:#1a1a2e}
.fb-action iconify-icon{width:14px;height:14px}
.fb-close{position:absolute;top:12px;right:12px;width:26px;height:26px;border-radius:50%;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:14px;transition:0.2s cubic-bezier(.2,.9,.3,1);background:none}
.jarvis .fb-close{color:rgba(200,255,240,.5)}
.jarvis .fb-close:hover{background:rgba(0,255,163,.1);color:#e8fff6}
.clean .fb-close{color:rgba(0,0,0,.35)}
.clean .fb-close:hover{background:rgba(0,0,0,.06);color:#1a1a2e}
.fb-empty{padding:30px 16px;text-align:center;font-size:11px;opacity:.4}

/* ═══ 8. DESKTOP ITEMS — RESPONSIVE ═══ */
@media(max-width:768px){
  #os-desktop{grid-template-columns:repeat(auto-fill,80px);grid-template-rows:repeat(auto-fill,90px);padding:56px 12px 100px}
  .desk-icon{width:42px;height:42px;border-radius:10px}
  .desk-icon iconify-icon{width:20px;height:20px}
  .desk-label{font-size:9px;max-width:72px}
  .desk-item{width:76px;padding:5px 3px;border-radius:12px}
  .ip-modal{max-height:80vh}
  .de-modal{width:300px}
  .fb-modal{max-height:80vh}
  .desk-fv-panel{max-height:70vh}
}
@media(max-width:480px){
  #os-desktop{grid-template-columns:repeat(4,1fr);gap:2px;padding:50px 8px 90px}
  .desk-item{width:auto}
  .desk-icon{width:40px;height:40px;border-radius:10px}
  .desk-icon iconify-icon{width:19px;height:19px}
  .desk-label{font-size:9px}
  .ip-modal{width:100vw;max-width:100vw;max-height:85vh;border-radius:20px 20px 0 0}
  .ip-grid{grid-template-columns:repeat(auto-fill,56px);gap:4px}
  .ip-icon{width:52px;height:52px}
  .de-modal{width:calc(100vw - 24px)}
  .fb-modal{width:100vw;max-width:100vw;max-height:85vh;border-radius:20px 20px 0 0}
  .desk-fv-panel{width:calc(100vw - 16px);max-height:75vh;border-radius:16px}
  .desk-fv-grid{grid-template-columns:repeat(auto-fill,76px)}
}
@media(max-height:500px){
  #os-desktop{display:none}
}

/* ═══ REDUCED MOTION ═══ */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:0.01s!important;animation-iteration-count:1!important;transition-duration:0.01s!important}
}