@layer desktop {
  .desktop {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    isolation: isolate;
    background: #050b15;
    user-select: none;
  }

  .wallpaper {
    position: absolute;
    inset: -8%;
    z-index: -4;
    overflow: hidden;
    filter: hue-rotate(var(--wallpaper-hue)) brightness(var(--brightness)) saturate(112%);
    transform: scale(var(--wallpaper-zoom));
    transform-origin: 50% 50%;
    background:
      radial-gradient(100% 85% at 56% 112%, rgba(42, 119, 138, .66), transparent 54%),
      radial-gradient(62% 70% at 6% 8%, rgba(75, 49, 142, .66), transparent 58%),
      radial-gradient(50% 64% at 96% 5%, rgba(10, 108, 139, .64), transparent 62%),
      linear-gradient(145deg, #050914 0%, #071321 42%, #061726 68%, #0b1325 100%);
  }

  .desktop[data-space="create"] { --wallpaper-hue: 46deg; }
  .desktop[data-space="drift"] { --wallpaper-hue: -46deg; }

  .wallpaper::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
      radial-gradient(ellipse 34% 24% at 44% 46%, rgba(94, 223, 255, .14), transparent 70%),
      linear-gradient(112deg, transparent 8%, rgba(112,232,255,.055) 36%, transparent 64%),
      linear-gradient(35deg, rgba(255,255,255,.018), transparent 35%);
    mix-blend-mode: screen;
  }

  .wallpaper-bloom {
    position: absolute;
    width: 64vmax;
    aspect-ratio: 1;
    border-radius: 50%;
    filter: blur(90px);
    opacity: .44;
    mix-blend-mode: screen;
    will-change: transform;
  }

  .bloom-a {
    left: -26vmax;
    top: 20%;
    background: radial-gradient(circle at 62% 50%, rgba(119, 92, 255, .8), rgba(57, 47, 142, .22) 45%, transparent 70%);
  }

  .bloom-b {
    right: -32vmax;
    top: -30%;
    background: radial-gradient(circle at 42% 60%, rgba(80, 229, 255, .72), rgba(7, 112, 173, .2) 48%, transparent 68%);
  }

  .bloom-c {
    width: 45vmax;
    left: 36%;
    bottom: -34vmax;
    background: radial-gradient(circle, rgba(103, 255, 198, .38), transparent 65%);
  }

  .wallpaper-grid {
    position: absolute;
    inset: 0;
    opacity: .1;
    background-image:
      linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: radial-gradient(circle at 54% 55%, black, transparent 72%);
    transform: perspective(600px) rotateX(62deg) translateY(48%);
    transform-origin: bottom center;
  }

  .wallpaper-grain {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: .14;
    mix-blend-mode: soft-light;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.88' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
  }

  #ambientCanvas {
    position: absolute;
    inset: 0;
    z-index: -3;
    width: 100%;
    height: 100%;
    pointer-events: none;
    opacity: .72;
  }

  .cursor-aura {
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 1px solid rgba(var(--accent-rgb), .36);
    background: radial-gradient(circle, rgba(var(--accent-rgb), .16), transparent 65%);
    box-shadow: 0 0 24px rgba(var(--accent-rgb), .12);
    transform: translate3d(-100px, -100px, 0);
    pointer-events: none;
    opacity: 0;
  }

  .desktop.has-cursor-aura .cursor-aura { opacity: 1; }

  .topbar {
    position: absolute;
    z-index: 1000;
    top: 12px;
    left: 14px;
    right: 14px;
    height: var(--topbar-height);
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    padding: 0 9px 0 8px;
    border-radius: 15px;
    background:
      radial-gradient(70% 190% at 8% -80%, rgba(var(--accent-rgb),.16), transparent 70%),
      linear-gradient(180deg, rgba(255,255,255,.075), transparent 62%),
      rgba(7, 14, 25, .48);
    -webkit-backdrop-filter: blur(27px) saturate(158%) contrast(1.04);
    backdrop-filter: blur(27px) saturate(158%) contrast(1.04);
    box-shadow: 0 12px 38px rgba(0,3,10,.28), inset 0 1px 0 rgba(255,255,255,.11), inset 0 -1px 0 rgba(0,0,0,.16);
  }

  .topbar-section { display: flex; align-items: center; min-width: 0; }
  .topbar-start { justify-self: start; }
  .topbar-end { justify-self: end; gap: 4px; }

  .brand-button {
    height: 34px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0 9px 0 5px;
    border-radius: 10px;
    cursor: default;
  }

  .brand-button:hover, .active-app-name:hover, .status-cluster:hover, .clock-button:hover { background: var(--surface-hover); }

  .brand-orb {
    position: relative;
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    color: #dffbff;
    border-radius: 9px;
    background:
      radial-gradient(circle at 32% 20%, rgba(255,255,255,.8), transparent 24%),
      linear-gradient(145deg, rgba(var(--accent-rgb), .95), rgba(103, 95, 255, .8));
    box-shadow: 0 5px 14px rgba(70, 181, 230, .28), inset 0 0 0 1px rgba(255,255,255,.32);
  }

  .brand-orb svg { width: 18px; height: 18px; filter: drop-shadow(0 1px 2px rgba(0,0,0,.25)); }
  .brand-name { font-size: 13px; line-height: 1; font-weight: 720; letter-spacing: -.01em; }
  .brand-edition { color: var(--ink-3); font-size: 8px; font-weight: 750; letter-spacing: .14em; }
  .topbar-divider { width: 1px; height: 18px; margin: 0 4px; background: var(--hairline); }

  .active-app-name {
    height: 32px;
    padding: 0 9px;
    border-radius: 9px;
    color: var(--ink-2);
    font-size: 12.5px;
    font-weight: 620;
  }

  .workspace-switcher {
    display: flex;
    align-items: center;
    gap: 3px;
    padding: 3px;
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 11px;
    background: rgba(0, 5, 14, .18);
  }

  .workspace-pill {
    position: relative;
    height: 29px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0 11px;
    border-radius: 8px;
    color: var(--ink-3);
    font-size: 11.5px;
    font-weight: 620;
    cursor: default;
  }

  .workspace-pill::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.055));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 4px 12px rgba(0,0,0,.14);
    opacity: 0;
  }

  .workspace-pill:hover { color: var(--ink-2); }
  .workspace-pill.is-active { color: var(--ink); }
  .workspace-pill.is-active::before { opacity: 1; }
  .workspace-index { color: rgba(var(--accent-rgb), .88); font-size: 9px; font-variant-numeric: tabular-nums; }

  .privacy-badge {
    height: 30px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 0 9px;
    border: 1px solid rgba(117, 240, 199, .12);
    border-radius: 9px;
    color: rgba(186,255,232,.82);
    background: rgba(65, 198, 154, .07);
    font-size: 10px;
    font-weight: 650;
  }

  .privacy-badge svg { width: 13px; height: 13px; --icon-cut: #103226; }
  .privacy-pulse { width: 5px; height: 5px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 8px rgba(117,240,199,.7); }

  .status-cluster, .clock-button {
    height: 32px;
    display: inline-flex;
    align-items: center;
    border-radius: 9px;
  }

  .status-cluster { gap: 7px; padding: 0 8px; }
  .status-cluster svg { color: var(--ink-2); }
  .status-wifi { width: 15px; }
  .status-volume { width: 15px; }
  .status-battery { width: 25px; }
  .battery-number { margin-left: -6px; color: var(--ink-3); font-size: 9px; font-variant-numeric: tabular-nums; }

  .clock-button { gap: 7px; padding: 0 8px; color: var(--ink-3); font-size: 10px; }
  .clock-button strong { color: var(--ink); font-size: 11.5px; font-weight: 680; font-variant-numeric: tabular-nums; }

  .stage-rail {
    position: absolute;
    z-index: 55;
    left: 16px;
    top: 76px;
    width: 62px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 8px 6px;
    border-radius: 18px;
    background: linear-gradient(145deg, rgba(255,255,255,.04), transparent), rgba(9, 17, 29, .45);
    -webkit-backdrop-filter: blur(28px) saturate(125%);
    backdrop-filter: blur(28px) saturate(125%);
  }

  .stage-item, .stage-add {
    position: relative;
    width: 48px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    color: var(--ink-3);
  }

  .stage-item:hover, .stage-add:hover { background: rgba(255,255,255,.07); color: var(--ink); }
  .stage-item.is-active { background: rgba(var(--accent-rgb), .1); }
  .stage-indicator { position: absolute; left: -7px; width: 3px; height: 15px; border-radius: 4px; background: var(--accent); box-shadow: 0 0 10px rgba(var(--accent-rgb),.6); }
  .stage-preview { position: relative; display: block; width: 37px; height: 27px; overflow: hidden; border: 1px solid rgba(255,255,255,.18); border-radius: 7px; background: rgba(2,8,17,.72); box-shadow: 0 4px 9px rgba(0,0,0,.22); }
  .stage-files { display: flex; gap: 2px; padding: 5px 4px 3px 10px; background: linear-gradient(140deg, #17283a, #0b1320); }
  .stage-files::before { content:""; position:absolute; left:0; top:0; bottom:0; width:8px; background: rgba(112,232,255,.12); }
  .stage-files i { flex: 1; border-radius: 2px; background: rgba(255,255,255,.12); }
  .stage-orbit { display: grid; place-items:center; background: radial-gradient(circle, rgba(113,229,255,.5), rgba(113,87,221,.26) 42%, #0b1423 72%); }
  .stage-orbit b { width: 10px; height: 10px; border: 1px solid rgba(255,255,255,.65); border-radius:50%; box-shadow: 0 0 8px var(--accent); }
  .stage-terminal { display:grid; place-items:center; color:#a4f8da; font-size:10px; font-weight:700; }
  .stage-rule { width: 34px; height: 1px; background: var(--hairline); }
  .stage-add svg { width: 18px; height:18px; }

  .desktop-widgets {
    position: absolute;
    z-index: 8;
    top: 88px;
    right: 26px;
    width: clamp(250px, 19vw, 300px);
    display: grid;
    gap: 10px;
  }

  .widget {
    position: relative;
    overflow: hidden;
    border-radius: 20px;
    border:1px solid rgba(255,255,255,.075);
    background:
      radial-gradient(110% 85% at 94% 2%, rgba(var(--accent-rgb),.11), transparent 58%),
      linear-gradient(145deg, rgba(255,255,255,.075), transparent 38% 78%, rgba(0,0,0,.08)),
      rgba(7, 15, 27, .46);
    -webkit-backdrop-filter: blur(32px) saturate(148%) contrast(1.035);
    backdrop-filter: blur(32px) saturate(148%) contrast(1.035);
    box-shadow: 0 18px 48px rgba(0,3,11,.34), inset 0 1px 0 rgba(255,255,255,.11), inset 0 -1px 0 rgba(0,0,0,.16);
  }
  .widget-moment { background:radial-gradient(100% 95% at 88% 22%,rgba(79,206,232,.2),transparent 60%),linear-gradient(145deg,rgba(255,255,255,.08),transparent 42%),rgba(8,18,29,.43); }
  .widget-focus { background:radial-gradient(95% 90% at 12% 95%,rgba(117,240,199,.09),transparent 60%),linear-gradient(145deg,rgba(255,255,255,.07),transparent 43%),rgba(7,16,28,.52); }
  .widget-music { background:radial-gradient(105% 100% at 14% 55%,rgba(255,103,159,.11),transparent 55%),radial-gradient(90% 90% at 88% 18%,rgba(110,109,255,.12),transparent 55%),rgba(8,15,29,.5); }
  .widget-agenda { background:radial-gradient(100% 90% at 95% 8%,rgba(var(--accent-rgb),.09),transparent 58%),linear-gradient(155deg,rgba(255,255,255,.065),transparent 45%),rgba(7,15,27,.56); }

  .app-window {
    --window-optic-a:var(--accent-rgb);
    --window-optic-b:116, 92, 221;
    position: absolute;
    z-index: 10;
    left: var(--window-x);
    top: var(--window-y);
    width: var(--window-w);
    height: var(--window-h);
    min-width: 440px;
    min-height: 320px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--window-border);
    border-radius: var(--radius-window);
    background:
      radial-gradient(82% 54% at 12% -10%, rgba(var(--window-optic-a),.105), transparent 70%),
      radial-gradient(70% 80% at 102% 105%, rgba(var(--window-optic-b),.045), transparent 68%),
      linear-gradient(135deg, rgba(255,255,255,.04), transparent 18% 78%, rgba(var(--accent-rgb),.018)),
      var(--content-fill);
    box-shadow: var(--shadow-window);
    -webkit-backdrop-filter: blur(var(--blur-window)) saturate(130%);
    backdrop-filter: blur(var(--blur-window)) saturate(130%);
    transform-origin: 50% 100%;
    contain: layout paint;
  }
  .app-window[data-app="gallery"] { --window-optic-a:139, 107, 246; --window-optic-b:241, 102, 158; }
  .app-window[data-app="music"] { --window-optic-a:236, 92, 154; --window-optic-b:92, 190, 231; }
  .app-window[data-app="terminal"] { --window-optic-a:91, 226, 183; --window-optic-b:65, 114, 164; }
  .app-window[data-app="settings"] { --window-optic-a:98, 207, 238; --window-optic-b:139, 112, 232; }

  .app-window::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 20;
    pointer-events: none;
    border-radius: inherit;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.14), inset 1px 0 0 rgba(255,255,255,.035), inset -1px 0 0 rgba(0,0,0,.12), inset 0 -1px 0 rgba(0,0,0,.18);
  }

  .app-window.is-focused { border-color: var(--window-border-focus); }
  .app-window:not(.is-focused) { opacity:.88; filter:saturate(.72) brightness(.82); }
  .app-window.is-dragging { cursor: grabbing; box-shadow: 0 52px 120px rgba(0,4,14,.55), 0 16px 42px rgba(0,4,14,.38), inset 0 1px 0 rgba(255,255,255,.1); }
  .app-window.is-resizing { transition: none !important; }
  .app-window.is-maximized { border-radius: 15px; }
  .desktop.is-window-moving .app-window {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .desktop.is-window-moving .app-window.is-dragging,
  .desktop.is-window-moving .app-window.is-resizing { will-change: transform, width, height; }

  .window-shine {
    position: absolute;
    z-index: 0;
    left: 4%;
    right: 4%;
    top: -1px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.36), transparent);
    opacity: .7;
  }

  .window-titlebar {
    position: relative;
    z-index: 2;
    flex: 0 0 50px;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    padding: 0 12px;
    border-bottom: 1px solid var(--hairline);
    background: linear-gradient(180deg, rgba(255,255,255,.045), transparent), rgba(8, 16, 28, .56);
    cursor: grab;
  }

  .desktop[data-theme="light"] .window-titlebar { background: linear-gradient(180deg, rgba(255,255,255,.5), transparent), rgba(232,241,247,.6); }
  .window-titlebar:active { cursor: grabbing; }

  .window-controls { justify-self: start; display: flex; align-items: center; gap: 2px; padding: 2px; border: 1px solid rgba(255,255,255,.055); border-radius: 8px; background: rgba(0,0,0,.09); }
  .window-control { position: relative; width: 24px; height: 24px; border-radius: 7px; color: var(--ink-4); }
  .window-control:hover { color: var(--ink); background: rgba(255,255,255,.09); }
  .window-control.close:hover { color: #ffb0ba; background: rgba(255,108,126,.14); }
  .window-control.maximize:hover { color: #a9f6d8; background: rgba(76,221,162,.12); }
  .window-control::after { content:""; position:absolute; inset:-2px; }
  .window-control::before { content:""; position:absolute; opacity:.7; }
  .window-control.close::before { inset:7px; background:linear-gradient(45deg,transparent 42%,currentColor 43% 57%,transparent 58%),linear-gradient(-45deg,transparent 42%,currentColor 43% 57%,transparent 58%); }
  .window-control.minimize::before { left:7px; right:7px; top:11px; height:1px; border-radius:1px; background:currentColor; }
  .window-control.maximize::before { inset:7px; border:1px solid currentColor; border-radius:1px; }

  .window-title { justify-self: center; display: flex; align-items: center; gap: 8px; color: var(--ink-2); font-size: 12px; font-weight: 650; pointer-events: none; }
  .mini-app-icon { display: grid; place-items:center; width:22px; height:22px; border-radius:7px; color:white; }
  .mini-app-icon svg { width:14px; height:14px; }
  .files-icon { background: linear-gradient(145deg, #68e7ff, #5f87fa); box-shadow: inset 0 1px 0 rgba(255,255,255,.45); }
  .window-toolbar-actions { justify-self: end; display:flex; gap:4px; }
  .toolbar-button { width:30px; height:30px; display:grid; place-items:center; border-radius:9px; color:var(--ink-3); }
  .toolbar-button:hover { color:var(--ink); background:var(--surface-hover); }
  .toolbar-button svg { width:16px; height:16px; }
  .window-content { position: relative; z-index: 1; min-height: 0; flex: 1; }

  .resize-handle { position:absolute; z-index:25; touch-action:none; }
  .resize-handle.n { top:0; left:18px; right:18px; height:8px; cursor:n-resize; }
  .resize-handle.s { bottom:0; left:18px; right:18px; height:8px; cursor:s-resize; }
  .resize-handle.e { right:0; top:18px; bottom:18px; width:8px; cursor:e-resize; }
  .resize-handle.w { left:0; top:18px; bottom:18px; width:8px; cursor:w-resize; }
  .resize-handle.ne { right:0; top:0; width:20px; height:20px; cursor:ne-resize; }
  .resize-handle.nw { left:0; top:0; width:20px; height:20px; cursor:nw-resize; }
  .resize-handle.se { right:0; bottom:0; width:20px; height:20px; cursor:se-resize; }
  .resize-handle.sw { left:0; bottom:0; width:20px; height:20px; cursor:sw-resize; }

  .snap-preview {
    position: absolute;
    z-index: 6;
    display: none;
    border: 1px solid rgba(var(--accent-rgb), .42);
    border-radius: 18px;
    background: rgba(var(--accent-rgb), .11);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 20px 55px rgba(0,0,0,.2);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    pointer-events: none;
  }

  .snap-preview.is-visible { display: block; }

  .overview-hud {
    position:absolute;
    z-index:980;
    top:68px;
    left:50%;
    display:none;
    align-items:center;
    gap:14px;
    min-width:320px;
    height:40px;
    padding:0 10px 0 13px;
    border:1px solid rgba(255,255,255,.15);
    border-radius:13px;
    color:#f2f7fb;
    background:linear-gradient(145deg,rgba(255,255,255,.07),transparent),rgba(8,16,28,.67);
    box-shadow:0 18px 42px rgba(0,4,14,.28),inset 0 1px 0 rgba(255,255,255,.1);
    transform:translateX(-50%);
  }
  .overview-hud > div { min-width:78px; }
  .overview-hud .eyebrow { color:rgba(205,224,236,.56); }
  .overview-hud strong { display:block; margin-top:2px; font-size:10px; }
  .overview-hud p { flex:1; margin:0; color:rgba(225,238,246,.72); font-size:8.5px; text-align:center; }
  .overview-hud kbd { color:rgba(235,245,250,.82); border-color:rgba(255,255,255,.12); background:rgba(255,255,255,.07); }
  .desktop.overview-mode .overview-hud { display:flex; }
  .overview-caption {
    position:absolute;
    z-index:40;
    left:50%;
    bottom:12px;
    display:flex;
    align-items:center;
    gap:8px;
    min-width:148px;
    padding:7px 9px;
    border:1px solid var(--hairline-strong);
    border-radius:11px;
    color:var(--ink);
    background:var(--glass-fill-strong);
    box-shadow:0 10px 24px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.09);
    -webkit-backdrop-filter:blur(22px) saturate(125%);
    backdrop-filter:blur(22px) saturate(125%);
    transform:translateX(-50%);
    pointer-events:none;
  }
  .overview-caption .mini-app-icon { width:26px; height:26px; flex:0 0 auto; }
  .overview-caption p { margin:0; }
  .overview-caption strong,.overview-caption small { display:block; }
  .overview-caption strong { font-size:9px; }
  .overview-caption small { margin-top:2px; color:var(--ink-3); font-size:7px; }

  .dock {
    position: absolute;
    z-index: 900;
    left: 50%;
    bottom: 13px;
    height: calc(var(--dock-size) * var(--dock-scale));
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 7px 9px;
    border-radius: calc(var(--dock-size) * .29);
    background:
      radial-gradient(80% 130% at 18% -50%, rgba(var(--accent-rgb),.16), transparent 68%),
      linear-gradient(145deg, rgba(255,255,255,.095), transparent 38% 76%, rgba(0,0,0,.09)),
      rgba(7, 14, 25, .55);
    -webkit-backdrop-filter: blur(var(--blur-dock)) saturate(168%) contrast(1.055);
    backdrop-filter: blur(var(--blur-dock)) saturate(168%) contrast(1.055);
    box-shadow: 0 25px 64px rgba(0,3,10,.46), 0 5px 14px rgba(0,3,10,.27), inset 0 1px 0 rgba(255,255,255,.16), inset 0 -1px 0 rgba(0,0,0,.22);
    transform: translateX(-50%);
    transform-origin: 50% 100%;
  }

  .dock::before { content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; background:linear-gradient(110deg,rgba(255,255,255,.055),transparent 24% 72%,rgba(var(--accent-rgb),.035)); box-shadow:inset 0 0 0 1px rgba(0,0,0,.12),inset 1px 0 0 rgba(255,255,255,.045),inset -1px 0 0 rgba(0,0,0,.13); }
  .dock-app { position: relative; width: 49px; height: 49px; display:grid; place-items:center; flex:0 0 auto; transform-origin:50% 100%; will-change:transform; }
  .dock-app::before { content:""; position:absolute; inset:-4px; border-radius:14px; background:rgba(255,255,255,.055); opacity:0; }
  .dock-app:hover::before { opacity:1; }
  .dock-separator { width:1px; height:34px; margin:0 2px; background:var(--hairline-strong); }
  .running-dot { position:absolute; bottom:-4px; width:4px; height:4px; border-radius:50%; background:rgba(255,255,255,.62); opacity:0; box-shadow:0 0 7px rgba(255,255,255,.3); }
  .dock-app.is-running .running-dot { opacity:1; }
  .dock-app.is-active .running-dot { width:12px; border-radius:3px; background:var(--accent); box-shadow:0 0 9px rgba(var(--accent-rgb),.65); }

  .app-icon {
    position: relative;
    width: 45px;
    height: 45px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border-radius: 13px;
    color: white;
    box-shadow: 0 8px 14px rgba(0,0,0,.26), inset 0 1px 0 rgba(255,255,255,.38), inset 0 0 0 1px rgba(255,255,255,.12);
  }

  .app-icon::after { content:""; position:absolute; inset:0; background:linear-gradient(155deg, rgba(255,255,255,.22), transparent 38%, rgba(0,0,0,.07)); pointer-events:none; }
  .app-icon svg { position:relative; z-index:1; width:24px; height:24px; filter:drop-shadow(0 2px 3px rgba(0,0,0,.18)); }
  .icon-launcher { background: linear-gradient(145deg, rgba(225,247,255,.92), rgba(154,188,216,.82)); color:#15354d; }
  .icon-files { background: linear-gradient(145deg, #68e8ff, #5983f6); }
  .icon-browser { background: radial-gradient(circle at 50% 50%, #102840 0 26%, transparent 27%), conic-gradient(from 20deg, #79f5cf, #5ee4ff, #8d8cff, #79f5cf); }
  .icon-browser > i { position:absolute; z-index:2; width:22px; height:22px; border:1.5px solid rgba(255,255,255,.75); border-radius:50%; }
  .icon-orbit { background: radial-gradient(circle at 42% 35%, #d8fdff 0 5%, transparent 6%), radial-gradient(circle at 50% 52%, #84efff, #7780ff 44%, #33247c 75%); }
  .icon-terminal { background: linear-gradient(145deg, #1c2a39, #070d16); color:#9af8d4; }
  .icon-gallery { background: linear-gradient(145deg, #ff92af, #9b6eff 50%, #4dc4ec); }
  .icon-music { background: linear-gradient(145deg, #ff8ea9, #ff557d 54%, #a82b79); }
  .icon-settings { background: linear-gradient(145deg, #b5c4d1, #687989 56%, #3f4c59); --icon-cut:#526473; }
  .icon-command { background: linear-gradient(145deg, #131d2b, #070c14); color:#c5f8ff; }
  .icon-trash { background: linear-gradient(145deg, rgba(228,244,251,.9), rgba(128,154,172,.8)); color:#315267; }
  .icon-notes { background: linear-gradient(145deg, #ffe87f, #f2af4f); --icon-cut:#c17b2b; }

  .desktop[data-dock-position="left"] .dock,
  .desktop[data-dock-position="right"] .dock {
    top: 50%;
    bottom: auto;
    left: 14px;
    width: calc(var(--dock-size) * var(--dock-scale));
    height: auto;
    flex-direction: column;
    transform: translateY(-50%);
    transform-origin: 0 50%;
  }

  .desktop[data-dock-position="right"] .dock { left:auto; right:14px; transform-origin:100% 50%; }
  .desktop[data-dock-position="left"] .dock-separator,
  .desktop[data-dock-position="right"] .dock-separator { width:34px; height:1px; }
  .desktop[data-dock-position="left"] .running-dot { bottom:auto; left:-4px; }
  .desktop[data-dock-position="right"] .running-dot { bottom:auto; right:-4px; }

  .popover {
    position: absolute;
    z-index: 1100;
    border-radius: var(--radius-panel);
    background: linear-gradient(145deg, rgba(255,255,255,.07), transparent 42%), var(--popover-fill);
    -webkit-backdrop-filter: blur(var(--blur-panel)) saturate(140%);
    backdrop-filter: blur(var(--blur-panel)) saturate(140%);
    box-shadow: 0 32px 84px rgba(0,3,12,.52), 0 8px 22px rgba(0,3,12,.3), inset 0 1px 0 rgba(255,255,255,.1);
  }

  .system-menu { top: 63px; left: 16px; width: 286px; padding: 8px; }
  .control-center { top: 63px; right: 126px; width: 358px; padding: 16px; }
  .date-center { top: 63px; right: 16px; width: 346px; padding: 16px; }

  .overlay {
    position: absolute;
    z-index: 1500;
    inset: 0;
    display: grid;
    place-items: center;
  }

  .command-backdrop, .launcher-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(1,5,12,.2);
    -webkit-backdrop-filter: blur(8px) saturate(80%);
    backdrop-filter: blur(8px) saturate(80%);
  }

  .command-center {
    position: relative;
    width: min(720px, calc(100vw - 40px));
    overflow: hidden;
    border-radius: 24px;
    background: linear-gradient(145deg, rgba(255,255,255,.08), transparent 36%), rgba(8, 15, 27, .82);
    -webkit-backdrop-filter: blur(48px) saturate(140%);
    backdrop-filter: blur(48px) saturate(140%);
    box-shadow: 0 52px 130px rgba(0,2,9,.65), 0 12px 36px rgba(0,2,9,.35), inset 0 1px 0 rgba(255,255,255,.12);
  }

  .launcher-shell { position:relative; width:min(880px, calc(100vw - 60px)); transform:translateY(-1vh); }
  .launcher-search { width:min(520px, 75vw); height:48px; margin:0 auto 42px; display:flex; align-items:center; gap:12px; padding:0 15px; border-radius:16px; background:rgba(8,15,27,.64); }
  .launcher-search svg { width:19px; color:var(--ink-3); }
  .launcher-search input { flex:1; min-width:0; border:0; outline:0; background:transparent; color:var(--ink); font-size:15px; }
  .launcher-search input::placeholder { color:var(--ink-3); }
  .launcher-heading { display:flex; align-items:end; justify-content:space-between; margin:0 4px 20px; }
  .launcher-heading h2 { margin:5px 0 0; font-size:25px; line-height:1.1; letter-spacing:-.03em; }
  .launcher-heading > span { color:var(--ink-3); font-size:11px; }
  .launcher-grid { display:grid; grid-template-columns:repeat(4, 1fr); gap:12px; }
  .launcher-grid > button { min-height:132px; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:15px; border:1px solid transparent; border-radius:20px; color:var(--ink-2); }
  .launcher-grid > button:hover { border-color:var(--hairline); background:rgba(255,255,255,.07); box-shadow:0 16px 36px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.06); }
  .launcher-grid .app-icon { width:58px; height:58px; margin-bottom:10px; border-radius:17px; }
  .launcher-grid .app-icon svg { width:30px; height:30px; }
  .launcher-grid strong { font-size:13px; }
  .launcher-grid small { margin-top:3px; color:var(--ink-3); font-size:10px; }

  .desktop-context {
    position: absolute;
    z-index: 1400;
    width: 230px;
    margin: 0;
    padding: 6px;
    border-radius: 14px;
    background: linear-gradient(145deg, rgba(255,255,255,.065), transparent 38%), var(--popover-fill);
    -webkit-backdrop-filter: blur(34px) saturate(140%);
    backdrop-filter: blur(34px) saturate(140%);
    box-shadow: 0 24px 62px rgba(0,3,12,.5), inset 0 1px 0 rgba(255,255,255,.1);
  }

  .desktop-context > button { width:100%; height:34px; display:grid; grid-template-columns:24px 1fr auto; align-items:center; gap:5px; padding:0 8px; border-radius:8px; color:var(--ink-2); text-align:left; font-size:11px; }
  .desktop-context > button:hover { color:var(--ink); background:rgba(var(--accent-rgb),.14); }
  .desktop-context > button svg { width:15px; height:15px; }
  .desktop-context > span { display:block; height:1px; margin:5px 4px; background:var(--hairline); }

  .lock-screen {
    position:absolute;
    z-index:3000;
    inset:0;
    display:grid;
    place-items:center;
    overflow:hidden;
  }

  .lock-backdrop { position:absolute; inset:-8%; background:radial-gradient(circle at 50% 28%, rgba(100,222,255,.22), transparent 42%), linear-gradient(145deg, rgba(14,20,42,.3), rgba(3,9,17,.58)); -webkit-backdrop-filter:blur(28px) saturate(120%); backdrop-filter:blur(28px) saturate(120%); }
  .lock-content { position:relative; display:flex; flex-direction:column; align-items:center; transform:translateY(-4vh); text-shadow:0 2px 20px rgba(0,0,0,.35); }
  .lock-time { font-size:clamp(72px, 9vw, 118px); line-height:.9; font-weight:250; letter-spacing:-.06em; font-variant-numeric:tabular-nums; }
  .lock-date { margin-top:16px; color:var(--ink-2); font-size:17px; font-weight:530; }
  .lock-avatar { position:relative; width:76px; height:76px; display:grid; place-items:center; margin-top:42px; border:1px solid rgba(255,255,255,.2); border-radius:50%; background:linear-gradient(145deg, #8de8ff, #7e74e8); box-shadow:0 15px 40px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.45); font-size:26px; font-weight:650; }
  .lock-avatar i { position:absolute; right:0; bottom:4px; width:16px; height:16px; border:3px solid #172333; border-radius:50%; background:var(--mint); box-shadow:0 0 10px rgba(117,240,199,.5); }
  .lock-content > strong { margin-top:10px; font-size:15px; }
  .lock-content > p { margin:5px 0 18px; color:var(--ink-3); font-size:11px; }
  .lock-content > button { height:36px; display:flex; align-items:center; gap:10px; padding:0 13px; border:1px solid var(--hairline); border-radius:11px; color:var(--ink-2); background:rgba(255,255,255,.055); -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px); }
  .lock-content > button:hover { color:var(--ink); background:rgba(255,255,255,.1); }

  .toast-stack { position:absolute; z-index:2500; left:50%; bottom:102px; display:flex; flex-direction:column; align-items:center; gap:8px; opacity:1; transform:translateX(-50%); transition:opacity 140ms ease,transform 180ms var(--ease-out); pointer-events:none; }
  .desktop.overview-mode .toast-stack { opacity:0; transform:translate(-50%,10px); }
  .desktop.overview-mode .overview-caption { display:none; }
  .toast { min-width:220px; max-width:420px; display:flex; align-items:center; gap:10px; padding:10px 14px 10px 10px; border:1px solid var(--hairline); border-radius:14px; background:rgba(8,16,28,.78); -webkit-backdrop-filter:blur(26px); backdrop-filter:blur(26px); box-shadow:0 16px 45px rgba(0,3,12,.42), inset 0 1px 0 rgba(255,255,255,.08); }
  .toast-icon { width:28px; height:28px; display:grid; place-items:center; border-radius:9px; color:#dffcff; background:linear-gradient(145deg, rgba(var(--accent-rgb),.65), rgba(126,100,245,.5)); }
  .toast-icon svg { width:15px; height:15px; }
  .toast p { min-width:0; margin:0; }
  .toast strong { display:block; font-size:11.5px; }
  .toast small { display:block; margin-top:2px; color:var(--ink-3); font-size:9.5px; }

  .quality-badge { position:absolute; z-index:5; right:24px; bottom:22px; height:24px; display:flex; align-items:center; gap:6px; padding:0 8px; border:1px solid rgba(255,255,255,.08); border-radius:8px; color:rgba(220,236,247,.38); background:rgba(5,12,22,.18); font-size:8.5px; font-weight:650; letter-spacing:.05em; -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); }
  .quality-badge span { width:5px; height:5px; border-radius:50%; background:var(--mint); box-shadow:0 0 8px rgba(117,240,199,.55); }

  .widget::after {
    content:"";
    position:absolute;
    inset:0;
    border-radius:inherit;
    background:linear-gradient(125deg,rgba(255,255,255,.075),transparent 24% 76%,rgba(var(--accent-rgb),.035));
    box-shadow:inset 0 1px 0 rgba(255,255,255,.11),inset 0 -1px 0 rgba(0,0,0,.12);
    pointer-events:none;
  }

  .desktop[data-theme="light"] .wallpaper {
    filter:hue-rotate(var(--wallpaper-hue)) brightness(calc(var(--brightness) + .12)) saturate(92%);
  }

  .desktop[data-theme="light"] .topbar {
    background:linear-gradient(180deg,rgba(255,255,255,.6),rgba(255,255,255,.16)),rgba(229,240,247,.64);
    border-color:rgba(255,255,255,.72);
    box-shadow:0 14px 38px rgba(7,27,45,.22),inset 0 1px 0 rgba(255,255,255,.88),inset 0 -1px 0 rgba(35,66,88,.08);
  }

  .desktop[data-theme="light"] .workspace-switcher,
  .desktop[data-theme="light"] .window-controls { background:rgba(29,54,73,.055); }
  .desktop[data-theme="light"] .privacy-badge { color:#246b56; border-color:rgba(38,145,111,.16); background:rgba(72,190,151,.08); }
  .desktop[data-theme="light"] .stage-rail {
    background:linear-gradient(145deg,rgba(255,255,255,.58),transparent 48%),rgba(231,241,247,.65);
    border-color:rgba(255,255,255,.64);
    box-shadow:0 18px 45px rgba(7,27,45,.22),inset 0 1px 0 rgba(255,255,255,.78);
  }
  .desktop[data-theme="light"] .stage-item:hover,
  .desktop[data-theme="light"] .stage-add:hover { background:rgba(26,55,76,.07); }
  .desktop[data-theme="light"] .widget {
    background:radial-gradient(105% 90% at 95% 0,rgba(var(--accent-rgb),.11),transparent 62%),linear-gradient(145deg,rgba(255,255,255,.68),transparent 44%),rgba(228,240,247,.61);
    border-color:rgba(255,255,255,.7);
    box-shadow:0 18px 46px rgba(7,27,45,.22),inset 0 1px 0 rgba(255,255,255,.86),inset 0 -1px 0 rgba(35,66,88,.07);
  }
  .desktop[data-theme="light"] .widget-moment { background:radial-gradient(100% 100% at 86% 24%,rgba(64,184,218,.22),transparent 62%),linear-gradient(145deg,rgba(255,255,255,.65),transparent 42%),rgba(222,238,246,.58); }
  .desktop[data-theme="light"] .widget-focus { background:radial-gradient(100% 90% at 8% 100%,rgba(72,190,151,.13),transparent 64%),linear-gradient(145deg,rgba(255,255,255,.67),transparent 44%),rgba(230,241,246,.64); }
  .desktop[data-theme="light"] .widget-music { background:radial-gradient(100% 100% at 10% 50%,rgba(239,92,151,.14),transparent 58%),radial-gradient(90% 90% at 92% 15%,rgba(104,99,224,.13),transparent 60%),rgba(229,238,247,.65); }
  .desktop[data-theme="light"] .widget-agenda { background:radial-gradient(100% 90% at 96% 0,rgba(var(--accent-rgb),.12),transparent 62%),linear-gradient(145deg,rgba(255,255,255,.65),transparent 45%),rgba(232,241,246,.68); }
  .desktop[data-theme="light"] .widget::after { background:linear-gradient(125deg,rgba(255,255,255,.45),transparent 30% 75%,rgba(var(--accent-rgb),.05)); box-shadow:inset 0 1px 0 rgba(255,255,255,.85),inset 0 -1px 0 rgba(32,64,85,.08); }
  .desktop[data-theme="light"] .focus-ring::before { background:rgba(238,246,250,.96); }
  .desktop[data-theme="light"] .attendees span { border-color:#dce8ee; }
  .desktop[data-theme="light"] .dock {
    background:radial-gradient(80% 130% at 18% -40%,rgba(var(--accent-rgb),.2),transparent 68%),linear-gradient(145deg,rgba(255,255,255,.76),transparent 44% 78%,rgba(30,67,91,.05)),rgba(224,237,244,.66);
    border-color:rgba(255,255,255,.72);
    box-shadow:0 24px 58px rgba(7,27,45,.26),0 5px 14px rgba(7,27,45,.12),inset 0 1px 0 rgba(255,255,255,.9),inset 0 -1px 0 rgba(30,62,83,.08);
  }
  .desktop[data-theme="light"] .dock-app::before { background:rgba(28,58,78,.065); }
  .desktop[data-theme="light"] .running-dot { background:rgba(21,51,72,.48); }
  .desktop[data-theme="light"] .topbar-divider,
  .desktop[data-theme="light"] .dock-separator { background:rgba(25,55,76,.14); }
  .desktop[data-theme="light"] .system-menu,
  .desktop[data-theme="light"] .control-center,
  .desktop[data-theme="light"] .date-center { background:linear-gradient(145deg,rgba(255,255,255,.62),transparent 42%),rgba(236,244,249,.86); }
  .desktop[data-theme="light"] .app-window:not(.is-focused) { opacity:.82; filter:saturate(.68) brightness(.88); }
  .desktop.overview-mode .app-window { opacity:1; filter:none; }
  .brand-edition,
  .workspace-index,
  .battery-number,
  .overview-hud p { font-size:10px; }
  .overview-caption strong { font-size:10.5px; }
  .overview-caption small,
  .boot-skip { font-size:9.5px; }

  .boot-screen {
    position: fixed;
    z-index: 99999;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    color: #effcff;
    background: radial-gradient(circle at 50% 40%, #112a3a, #050a13 44%, #02060b 100%);
  }

  .boot-aura { position:absolute; width:520px; height:520px; border-radius:50%; background:radial-gradient(circle, rgba(112,232,255,.14), rgba(135,101,255,.08) 32%, transparent 65%); filter:blur(4px); }
  .boot-mark { position:relative; width:76px; height:76px; display:grid; place-items:center; border:1px solid rgba(255,255,255,.18); border-radius:24px; color:white; background:linear-gradient(145deg, rgba(138,242,255,.9), rgba(91,90,223,.82)); box-shadow:0 24px 70px rgba(56,149,205,.32), inset 0 1px 0 rgba(255,255,255,.55); }
  .boot-mark svg { width:48px; height:48px; filter:drop-shadow(0 3px 6px rgba(0,0,0,.22)); }
  .boot-wordmark { position:relative; margin-top:20px; font-size:22px; font-weight:680; letter-spacing:-.03em; }
  .boot-status { position:relative; margin-top:8px; color:rgba(226,244,252,.48); font-size:10px; letter-spacing:.04em; }
  .boot-track { position:relative; width:150px; height:2px; margin-top:18px; overflow:hidden; border-radius:2px; background:rgba(255,255,255,.1); }
  .boot-track span { display:block; width:0; height:100%; border-radius:inherit; background:linear-gradient(90deg, #6de6ff, #ad91ff); box-shadow:0 0 8px rgba(112,232,255,.7); }
  .boot-skip { position:absolute; bottom:30px; color:rgba(231,246,253,.4); font-size:9px; letter-spacing:.07em; opacity:0; }
  .boot-skip:hover { color:rgba(231,246,253,.8); }

  @media (max-width: 1260px) {
    .desktop-widgets { display:none; }
    .app-window#window-files { --window-w: min(880px, calc(100vw - 145px)); }
    .quality-badge { display:none; }
  }

  @media (max-width: 920px) {
    .stage-rail { display:none; }
    .app-window#window-files { --window-x: 22px !important; --window-y: 74px !important; --window-w: calc(100vw - 44px) !important; --window-h: calc(100vh - 166px) !important; }
    .workspace-switcher .workspace-pill span:last-child { display:none; }
    .workspace-pill { padding:0 10px; }
    .privacy-badge span:last-child, .battery-number, .status-volume { display:none; }
  }

  @media (max-width: 780px) {
    .file-sidebar { display:none; }
    .dock { --dock-size:60px; gap:3px; padding:6px 8px; }
    .dock-app { width:43px; height:43px; }
    .dock .app-icon { width:40px; height:40px; border-radius:12px; }
    .dock .app-icon svg { width:22px; height:22px; }
    .dock-app[data-app="gallery"],
    .dock-app[data-app="music"] { display:none; }
  }

  @media (max-width: 680px) {
    .topbar { left:8px; right:8px; top:8px; }
    .brand-edition, .active-app-name, .topbar-divider, .workspace-switcher, .topbarDate { display:none; }
    .topbar { grid-template-columns:1fr auto; }
    .topbar-end { grid-column:2; }
    .privacy-badge { display:none; }
    .app-window, .app-window#window-files { min-width:0; --window-x:8px !important; --window-y:62px !important; --window-w:calc(100vw - 16px) !important; --window-h:calc(100vh - 140px) !important; border-radius:16px; }
    .file-sidebar { display:none; }
    .dock { max-width:calc(100vw - 16px); gap:2px; padding-left:6px; padding-right:6px; overflow:visible; }
    .dock-app { width:42px; }
    .dock .app-icon { width:39px; height:39px; border-radius:11px; }
    .dock .app-icon svg { width:21px; height:21px; }
    .dock-app:nth-of-type(6), .dock-app:nth-of-type(7), .dock-command, .dock-separator:last-of-type { display:none; }
    .control-center, .date-center { top:60px; left:8px; right:8px; width:auto; }
    .launcher-grid { grid-template-columns:repeat(2,1fr); }
    .launcher-shell { width:calc(100vw - 28px); max-height:86vh; overflow:auto; }
    .launcher-search { margin-bottom:22px; }
    .launcher-heading h2 { font-size:20px; }
  }
}