/* ============================================================
   COMMAND Z — system.css
   macOS-accurate OS chrome with light/dark theming.
   Tokens flip on html[data-theme]; default = dark.
   ============================================================ */

/* ---- email-capture popup — classic Mac (System 7 / Platinum) dialog ---- */
.mailpop-ov { position: fixed; inset: 0; z-index: 4000; display: grid; place-items: center; padding: 20px;
  background: rgba(0,0,0,.3); opacity: 0; transition: opacity .2s; }
.mailpop-ov.show { opacity: 1; }
.mailpop { width: min(440px, 94vw); color: #000; background: #fff; border: 1px solid #000; border-radius: 7px;
  font-family: 'Helvetica Neue', 'Geneva', system-ui, sans-serif; font-size: 13px; overflow: hidden;
  box-shadow: 0 2px 0 #000, 0 18px 50px -10px rgba(0,0,0,.55);
  transform: scale(.96); transition: transform .16s ease-out; }
.mailpop-ov.show .mailpop { transform: scale(1); }
/* System-7 pinstripe title bar with a centred title plate + left close box */
.mailpop-tb { position: relative; height: 22px; border-bottom: 1px solid #000; display: flex; align-items: center; justify-content: center;
  background: repeating-linear-gradient(#000 0 1px, #fff 1px 3px); }
.mailpop-tt { background: #fff; padding: 0 12px; font-size: 13px; font-weight: 700; position: relative; z-index: 1; }
.mailpop-x { position: absolute; left: 7px; top: 50%; transform: translateY(-50%); width: 13px; height: 13px; padding: 0; z-index: 2;
  background: #fff; border: 1px solid #000; border-radius: 2px; cursor: pointer; font-size: 0; color: transparent; }
.mailpop-x:hover { background: #ddd; }
.mailpop-x:active { background: #777; }
/* body */
.mailpop-body { padding: 20px 22px 18px; }
.mailpop-row { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 18px; }
.mailpop-ico { flex: 0 0 40px; line-height: 0; }
.mailpop-msg { font-size: 13px; line-height: 1.5; }
.mailpop-msg b { display: block; margin-bottom: 6px; font-size: 13.5px; }
/* boxy Mac text field */
.mailpop-in { width: 100%; padding: 6px 9px; margin-bottom: 18px; background: #fff; color: #000; font-family: inherit; font-size: 13px; border: 2px solid #000; border-radius: 0; outline: none; }
.mailpop-in:focus { box-shadow: 0 0 0 1px #000 inset; }
.mailpop-in.err { background: #ffecec; animation: mp-shake .3s; }
@keyframes mp-shake { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
/* rounded Mac push buttons; OK = default with the classic double-ring */
.mailpop-btns { display: flex; gap: 14px; justify-content: flex-end; padding-right: 3px; }
.mailpop-btn { min-width: 84px; padding: 6px 18px; cursor: pointer; background: #fff; color: #000; font-family: inherit; font-size: 13px; font-weight: 500;
  border: 1px solid #000; border-radius: 15px; box-shadow: inset 0 -2px 0 rgba(0,0,0,.12); }
.mailpop-btn:hover { background: #f1f1f1; }
.mailpop-btn:active { background: #000; color: #fff; }
.mailpop-ok { font-weight: 700; box-shadow: 0 0 0 2px #fff, 0 0 0 4px #000, inset 0 -2px 0 rgba(0,0,0,.12); }
@media (max-width: 480px) { .mailpop-btn { min-width: 72px; } }

:root {
  /* ---- brand display + mono (chrome uses SF/system) ---- */
  --ui:     -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', system-ui, sans-serif;
  --display:'Plus Jakarta Sans', var(--ui);
  --mono:   'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* ---- metrics ---- */
  --menubar-h: 26px;
  --dock-h:    58px;
  --radius:    10px;
  --radius-lg: 11px;
  --ease: cubic-bezier(.22,.61,.36,1);
  --spring: cubic-bezier(.34,1.56,.64,1);

  /* ---- accent (brand blue; Settings can override) ---- */
  --accent:   #0a84ff;
  --accent-2: #ff453a;
  --green:    #28c840;
  --yellow:   #febc2e;
  --red:      #ff5f57;
}

/* ===================== DARK (default) — warm bone & charcoal ===== */
:root, html[data-theme="dark"] {
  color-scheme: dark;
  --wall: url("../assets/img/walls/undo-dark.svg") center / cover no-repeat;
  --wall-tint: #100d0a;

  --menubar-bg:  rgba(24,21,18,0.58);
  --menubar-text:#ece7df;
  --menubar-bd:  rgba(236,231,223,.10);

  --pop-bg:    rgba(34,30,26,0.76);   /* menus, spotlight, context, toasts */
  --pop-bd:    rgba(236,231,223,.12);
  --pop-text:  #ece7df;

  --win-bg:      #1b1814;             /* warm charcoal window content */
  --win-bar:     rgba(38,34,29,0.86); /* titlebar / toolbar (vibrancy) */
  --win-text:    #ece7df;             /* bone */
  --win-soft:    #a59d90;
  --win-muted:   #6f675b;
  --win-bd:      rgba(236,231,223,.085);
  --win-bd-strong: rgba(236,231,223,.15);

  --sidebar-bg:  rgba(28,25,21,0.64);
  --card-bg:     #272320;
  --card-bg-2:   #161310;
  --field-bg:    #161310;
  --hover:       rgba(236,231,223,.07);
  --tile:        linear-gradient(160deg,#322d27,#211d18);

  --dock-bg:     rgba(40,35,30,0.44);
  --dock-bd:     rgba(236,231,223,.16);

  --btn-bg:   #ece7df;   /* bone primary pill on dark */
  --btn-text: #18130d;

  --shadow-win:  0 28px 70px -18px rgba(0,0,0,.72), 0 10px 28px -10px rgba(0,0,0,.55);
  --shadow-pop:  0 16px 44px -10px rgba(0,0,0,.62);
  --shadow-dock: 0 14px 40px -8px rgba(0,0,0,.58);
}

/* ===================== LIGHT ============================== */
html[data-theme="light"] {
  color-scheme: light;
  --wall: url("../assets/img/walls/mono-paper.svg") center / cover no-repeat;
  --wall-tint: #e8e6f2;

  --menubar-bg:  rgba(255,255,255,0.55);
  --menubar-text:#1d1d1f;
  --menubar-bd:  rgba(0,0,0,.08);

  --pop-bg:    rgba(250,250,252,0.75);
  --pop-bd:    rgba(0,0,0,.10);
  --pop-text:  #1d1d1f;

  --win-bg:      #ffffff;
  --win-bar:     rgba(246,246,248,0.85);
  --win-text:    #1d1d1f;
  --win-soft:    #62626a;
  --win-muted:   #98989f;
  --win-bd:      rgba(0,0,0,.10);
  --win-bd-strong: rgba(0,0,0,.16);

  --sidebar-bg:  rgba(240,240,243,0.78);
  --card-bg:     #f4f4f6;
  --card-bg-2:   #ececef;
  --field-bg:    #ffffff;
  --hover:       rgba(0,0,0,.05);
  --tile:        linear-gradient(160deg,#f5f5f3,#e7e7e2);

  --dock-bg:     rgba(255,255,255,0.42);
  --dock-bd:     rgba(255,255,255,.7);

  --btn-bg:   #16161a;   /* primary pill: dark on light */
  --btn-text: #ffffff;

  --shadow-win:  0 30px 70px -22px rgba(0,0,0,.35), 0 10px 26px -12px rgba(0,0,0,.22);
  --shadow-pop:  0 16px 44px -12px rgba(0,0,0,.28);
  --shadow-dock: 0 14px 40px -10px rgba(0,0,0,.3);
}

/* ---- backward-compat aliases (auto-flip via semantic tokens) ---- */
:root {
  --text: var(--win-text); --text-soft: var(--win-soft); --muted: var(--win-muted);
  --surface: var(--win-bg); --surface-2: var(--card-bg-2);
  --border: var(--win-bd); --border-2: var(--win-bd-strong);
  --white: var(--win-bg); --chrome: var(--pop-bg); --black: var(--btn-bg);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; }
body {
  font-family: var(--ui);
  color: var(--win-text);
  background: var(--wall-tint);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  user-select: none;
}
/* brand cursor — the red ⌘Z "U" mark (white-outlined so it reads on any bg).
   Set on the major surfaces so it shows over the desktop, windows + canvases;
   buttons/links keep the system hand, inputs keep the I-beam. */
html, body, #desktop, #wall-layer, #boot, .window, .window-body, .springboard,
.desktop, .desk-icon, .desk-folder, canvas {
  cursor: url(../assets/img/brand/cursor-u.png) 4 3, auto;
}
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

/* ============================================================
   DESKTOP + WALLPAPER
   ============================================================ */
#wall-layer {
  position: fixed; inset: 0; z-index: 0;
  background: var(--wall);
  background-size: cover;
  transition: background .5s var(--ease);
}
#desktop {
  position: fixed; inset: 0; z-index: 1;
  background: transparent;
  overflow: hidden;
}
/* (⌘Z watermark now lives in the wallpaper SVG itself — no CSS duplicate) */

.desk-icons {
  position: absolute; top: calc(var(--menubar-h) + 14px); right: 16px;
  display: flex; flex-direction: column; gap: 14px;
}
.desk-icon {
  width: 78px; text-align: center; color: #fff;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  font-size: 11px; text-shadow: 0 1px 4px rgba(0,0,0,.55);
  border-radius: 8px; padding: 5px 4px;
}
html[data-theme="light"] .desk-icon { color: #1d1d1f; text-shadow: 0 1px 3px rgba(255,255,255,.6); }
.desk-icon .glyph { font-size: 36px; line-height: 1; filter: drop-shadow(0 4px 6px rgba(0,0,0,.3)); }
.desk-icon:hover { background: rgba(120,140,255,.28); }

/* ============================================================
   MENU BAR
   ============================================================ */
#menubar {
  position: fixed; top: 0; left: 0; right: 0; height: var(--menubar-h);
  display: flex; align-items: center; gap: 16px; padding: 0 12px;
  background: var(--menubar-bg);
  backdrop-filter: blur(26px) saturate(180%);
  -webkit-backdrop-filter: blur(26px) saturate(180%);
  color: var(--menubar-text); font-size: 13px; z-index: 9000;
  box-shadow: inset 0 -.5px 0 var(--menubar-bd);
}
#menubar .mb-logo { font-family: var(--display); font-weight: 800; font-size: 14px; letter-spacing: -.02em; padding: 0 4px; }
#menubar .mb-app  { font-weight: 700; }
#menubar .mb-item { opacity: .92; font-weight: 400; }
#menubar .mb-logo, #menubar .mb-app, #menubar .mb-item { padding: 2px 7px; border-radius: 5px; }
#menubar .mb-logo:hover, #menubar .mb-app:hover, #menubar .mb-item:hover { background: rgba(125,125,135,.28); }
#menubar .mb-right { margin-left: auto; display: flex; align-items: center; gap: 13px; }
#menubar .mb-right .ic { font-size: 13px; opacity: .92; padding: 2px 4px; border-radius: 5px; }
#menubar .mb-right .ic:hover { background: rgba(125,125,135,.28); }
#mb-clock { font-variant-numeric: tabular-nums; min-width: 134px; text-align: right; font-weight: 400; }

.mb-menu {
  position: fixed; top: calc(var(--menubar-h) + 2px); min-width: 220px;
  background: var(--pop-bg); color: var(--pop-text);
  backdrop-filter: blur(40px) saturate(180%); -webkit-backdrop-filter: blur(40px) saturate(180%);
  border: .5px solid var(--pop-bd); border-radius: 10px;
  box-shadow: var(--shadow-pop); padding: 5px; z-index: 9500;
  font-size: 13px; animation: pop .13s var(--ease);
}
.mb-menu button { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 24px; padding: 5px 10px; border-radius: 5px; text-align: left; white-space: nowrap; }
.mb-menu button:hover { background: var(--accent); color: #fff; }
.mb-menu .mb-sc { color: var(--win-muted); font-size: 12px; }
.mb-menu button:hover .mb-sc { color: rgba(255,255,255,.8); }
.mb-menu hr { border: none; border-top: .5px solid var(--pop-bd); margin: 4px 6px; }
@keyframes pop { from { opacity: 0; transform: translateY(-6px) scale(.97); } to { opacity: 1; transform: none; } }

/* ============================================================
   DOCK
   ============================================================ */
#dock-wrap {
  position: fixed; left: 0; right: 0; bottom: 6px;
  display: flex; justify-content: center; z-index: 8000; pointer-events: none;
}
#dock {
  pointer-events: auto; display: flex; align-items: flex-end; gap: 5px;
  padding: 6px 8px;
  background: var(--dock-bg);
  backdrop-filter: blur(34px) saturate(200%); -webkit-backdrop-filter: blur(34px) saturate(200%);
  border: .5px solid var(--dock-bd); border-radius: 22px; box-shadow: var(--shadow-dock);
}
.dock-item { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  width: 50px; box-sizing: border-box;
  transform: translateY(calc(var(--lift, 0) * -1px)); will-change: transform, width; }
.dock-item .icon {
  width: 50px; height: 50px; border-radius: 13px;
  display: grid; place-items: center; font-size: 27px;
  background: var(--tile); color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 5px 12px rgba(0,0,0,.32);
  transform: scale(var(--scale, 1)); transform-origin: bottom center;
  will-change: transform;
}
html[data-theme="light"] .dock-item .icon { box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 5px 12px rgba(0,0,0,.22); }
.dock-item .icon svg { width: 56%; height: 56%; }
.lp-ic svg { width: 52%; height: 52%; }
.sb-ic svg { width: 56%; height: 56%; }
.desk-icon .glyph svg { width: 40px; height: 40px; }
/* ---- glossy "Aqua" icon palette — one source of truth for every tile ---- */
[data-accent="blue"]    { --tile: linear-gradient(165deg,#5aa9ff,#1f78f2 54%,#0a55d8); }
[data-accent="paper"]   { --tile: linear-gradient(165deg,#ffffff,#e3e3dd); }
[data-accent="green"]   { --tile: linear-gradient(165deg,#67e07a,#16a836); }
[data-accent="dark"]    { --tile: linear-gradient(165deg,#3a3a42,#0d0d10); }
[data-accent="red"]     { --tile: linear-gradient(165deg,#ff6f69,#e01e2b); }
[data-accent="purple"]  { --tile: linear-gradient(165deg,#b173ff,#6a28e0); }
[data-accent="orange"]  { --tile: linear-gradient(165deg,#ffb14c,#ef750e); }
[data-accent="yellow"]  { --tile: linear-gradient(165deg,#ffe077,#f3b300); }
[data-accent="teal"]    { --tile: linear-gradient(165deg,#4fe6d4,#0f9a98); }
[data-accent="graphite"]{ --tile: linear-gradient(165deg,#9aa0a9,#474c54); }

/* every icon tile gets the Aqua treatment: glossy dome sheen + inner bevel + embossed glyph */
/* photoreal illustrated icons — each SVG IS the whole icon (own tile + gloss + shadow).
   Float shadow uses a cheap box-shadow (NOT per-icon filter:drop-shadow — that stacks
   with each SVG's internal feDropShadow + the launchpad backdrop-blur and tanks perf). */
.dock-item .icon, .dock-min .icon, .fp-ic, .sb-ic, .lp-ic { background: none !important; overflow: visible; box-shadow: 0 5px 12px rgba(0,0,0,.34); }
.dock-item .icon::before, .dock-min .icon::before, .fp-ic::before, .sb-ic::before, .lp-ic::before { content: none; }
.dock-item .icon svg, .dock-min .icon svg, .fp-ic svg, .sb-ic svg, .lp-ic svg {
  width: 100% !important; height: 100% !important; position: relative; z-index: 2;
}
.sb-folder-ic i svg, .sb-folder-ic svg { filter: none; }

/* minimized-windows tray (right of the dock) */
.dock-mintray { display: flex; align-items: flex-end; gap: 5px; }
.dock-min { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px;
  background: none; cursor: pointer; transition: transform .14s var(--spring); }
.dock-min:hover { transform: translateY(-5px); }
.dock-min .icon { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; font-size: 21px;
  background: var(--tile); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 4px 10px rgba(0,0,0,.34);
  opacity: .92; }
.dock-min .icon svg { width: 56%; height: 56%; }
/* dock-min tiles inherit the global --tile palette (see [data-accent] above) */
.dock-min .dm-name { font-size: 8px; max-width: 46px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--menubar-text); opacity: .7; font-weight: 600; }
.dock-min::after { content: ""; position: absolute; bottom: -3px; left: 50%; translate: -50% 0;
  width: 4px; height: 4px; border-radius: 50%; background: var(--accent); opacity: .9; }
.dock-item .tip {
  position: absolute; bottom: calc(100% + 14px); left: 50%; translate: -50% 0;
  background: var(--pop-bg); color: var(--pop-text); font-size: 13px; font-weight: 600;
  padding: 5px 13px; border-radius: 9px; white-space: nowrap; z-index: 50;
  border: .5px solid var(--pop-bd); box-shadow: var(--shadow-pop);
  backdrop-filter: blur(30px) saturate(180%); -webkit-backdrop-filter: blur(30px) saturate(180%);
  opacity: 0; transform: translateY(5px) scale(.96); transition: opacity .14s, transform .16s var(--spring);
  pointer-events: none;
}
.dock-item .tip::after { content: ""; position: absolute; top: 100%; left: 50%; translate: -50% -3px;
  border: 6px solid transparent; border-top-color: var(--pop-bg); }
.dock-item:hover .tip, .dock-item.near .tip { opacity: 1; transform: translateY(0) scale(1); }
.dock-item .dot { position: absolute; bottom: -4px; left: 50%; translate: -50% 0;
  width: 4px; height: 4px; border-radius: 50%; background: var(--win-text); opacity: 0; transition: opacity .2s; }
html[data-theme="dark"] .dock-item .dot { background: rgba(255,255,255,.75); }
.dock-item.running .dot { opacity: 1; }
.dock-divider { width: 1px; align-self: center; height: 38px; margin: 0 4px; background: rgba(128,128,135,.35); }

@keyframes dock-bounce {
  0%,100% { transform: translateY(0) scale(var(--scale,1)); }
  22% { transform: translateY(-46%) scale(var(--scale,1)); }
  45% { transform: translateY(0) scale(var(--scale,1)); }
  68% { transform: translateY(-16%) scale(var(--scale,1)); }
}
.dock-item.launching .icon { animation: dock-bounce .62s var(--ease) 1; }
.dock-item.dock-dragging { z-index: 200; cursor: grabbing; filter: drop-shadow(0 12px 18px rgba(0,0,0,.4)); }
.dock-item.dock-dragging .tip { opacity: 0 !important; }

/* ============================================================
   WINDOWS
   ============================================================ */
.window {
  position: absolute; top: 86px; left: 120px;
  width: 720px; height: 480px; min-width: 320px; min-height: 220px;
  display: flex; flex-direction: column;
  background: var(--win-bg); color: var(--win-text);
  border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: var(--shadow-win); border: .5px solid var(--win-bd-strong);
  animation: win-open .26s var(--spring);
}
@keyframes win-open { from { opacity: 0; transform: scale(.92); } to { opacity: 1; transform: none; } }
.window.closing { animation: win-close .17s var(--ease) forwards; }
@keyframes win-close { to { opacity: 0; transform: scale(.93); } }
.window.minimizing { animation: win-min .4s var(--ease) forwards; }
@keyframes win-min { to { opacity: 0; transform: translateY(62vh) scale(.04) rotateX(12deg); } }

.titlebar {
  height: 38px; flex: 0 0 38px; display: flex; align-items: center; gap: 8px;
  padding: 0 14px; background: var(--win-bar);
  backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%);
  box-shadow: inset 0 -.5px 0 var(--win-bd); cursor: grab; position: relative; z-index: 3;
}
.titlebar.dragging { cursor: grabbing; }
.traffic { display: flex; gap: 8px; align-items: center; }
.traffic button { width: 12px; height: 12px; border-radius: 50%; position: relative;
  display: grid; place-items: center; font-size: 9px; line-height: 1; color: rgba(0,0,0,.5); }
.traffic .tl-close { background: var(--red); }
.traffic .tl-min   { background: var(--yellow); }
.traffic .tl-max   { background: var(--green); }
.traffic button::before { opacity: 0; transition: opacity .12s; font-weight: 700; }
.titlebar:hover .traffic .tl-close::before { content: "✕"; opacity: 1; }
.titlebar:hover .traffic .tl-min::before   { content: "−"; opacity: 1; }
.titlebar:hover .traffic .tl-max::before   { content: "+"; opacity: 1; font-size: 11px; }
.window:not(.focused) .traffic button { background: #8d8d92; }
.titlebar .title { font-size: 13px; font-weight: 600; color: var(--win-soft);
  position: absolute; left: 50%; translate: -50% 0; pointer-events: none; }
.window-body { flex: 1; overflow: auto; position: relative; background: var(--win-bg); }
.window.focused { box-shadow: var(--shadow-win); }
.window:not(.focused) { opacity: .97; }

/* resize handles */
.rz { position: absolute; z-index: 12; }
.rz-n { top: 0; left: 10px; right: 10px; height: 5px; cursor: ns-resize; }
.rz-s { bottom: 0; left: 10px; right: 10px; height: 6px; cursor: ns-resize; }
.rz-e { right: 0; top: 10px; bottom: 10px; width: 6px; cursor: ew-resize; }
.rz-w { left: 0; top: 10px; bottom: 10px; width: 6px; cursor: ew-resize; }
.rz-ne { top: 0; right: 0; width: 13px; height: 13px; cursor: nesw-resize; }
.rz-nw { top: 0; left: 0; width: 13px; height: 13px; cursor: nwse-resize; }
.rz-se { bottom: 0; right: 0; width: 15px; height: 15px; cursor: nwse-resize; }
.rz-sw { bottom: 0; left: 0; width: 15px; height: 15px; cursor: nesw-resize; }
.window:not(.focused) .title { opacity: .6; }

/* generic placeholder + app heading */
.app-pad { padding: 28px 32px; }
.app-pad h1 { font-family: var(--display); font-weight: 800; font-size: 26px; letter-spacing: -.02em; color: var(--win-text); }
.app-pad p { color: var(--win-soft); margin-top: 8px; line-height: 1.55; max-width: 52ch; }
.app-tag { display: inline-block; font-family: var(--mono); font-size: 11px; text-transform: uppercase;
  letter-spacing: .12em; color: var(--accent); margin-bottom: 14px; }

/* ============================================================
   BOOT / LOGIN
   ============================================================ */
#boot {
  position: fixed; inset: 0; z-index: 99999; color: #fff;
  background: radial-gradient(120% 90% at 50% 38%, #18130d 0%, #0a0806 55%, #000 100%);
  display: grid; place-items: center;
  transition: opacity .5s ease; overflow: hidden;
}
#boot.hidden { opacity: 0; pointer-events: none; }
/* the content that warp-zooms into the world on enter */
#boot .boot-core { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; will-change: transform, filter, opacity; }
/* big faint ⌘Z watermark — absolute so it never shifts the centered core */
#boot .boot-mark { position: absolute; bottom: 4vh; right: 4vw; font-family: var(--display); font-weight: 800;
  font-size: clamp(160px, 30vw, 420px); color: rgba(236,231,223,.035); letter-spacing: -.05em; pointer-events: none; user-select: none; }
/* depth starfield drifting toward the viewer */
#boot .boot-stars { position: absolute; inset: -20%; pointer-events: none; opacity: .5;
  background-image:
    radial-gradient(1.4px 1.4px at 20% 30%, rgba(236,231,223,.7), transparent),
    radial-gradient(1.2px 1.2px at 70% 60%, rgba(236,231,223,.5), transparent),
    radial-gradient(1.6px 1.6px at 45% 80%, rgba(203,191,166,.6), transparent),
    radial-gradient(1.1px 1.1px at 85% 20%, rgba(236,231,223,.5), transparent),
    radial-gradient(1.3px 1.3px at 12% 70%, rgba(236,231,223,.45), transparent),
    radial-gradient(1.2px 1.2px at 60% 12%, rgba(203,191,166,.5), transparent);
  background-size: 100% 100%; animation: boot-drift 9s linear infinite; }
@keyframes boot-drift { from { transform: scale(1); } to { transform: scale(1.18); } }
/* impact flash on arrival */
#boot .boot-flash { position: absolute; inset: 0; background: radial-gradient(circle, #fff, rgba(255,255,255,.85) 40%, transparent 72%);
  opacity: 0; pointer-events: none; mix-blend-mode: screen; }
#boot .boot-flash.hit { animation: boot-flash .5s ease-out forwards; }
@keyframes boot-flash { 0% { opacity: 0; transform: scale(.6); } 22% { opacity: .9; } 100% { opacity: 0; transform: scale(1.6); } }
/* the warp into the world */
#boot.entering .boot-core { animation: boot-warp 3s cubic-bezier(.55,0,.9,.38) forwards; }
#boot.entering .boot-stars { animation: boot-rush 3s cubic-bezier(.55,0,.9,.38) forwards; }
#boot.entering .boot-mark { animation: boot-warp 3s cubic-bezier(.55,0,.9,.38) forwards; }
/* one seamless, continuously-accelerating zoom INTO the user — no stepped scales;
   the ease-in curve rides the riser sound, peaking blur+fade at the impact (~3s) */
@keyframes boot-warp { 0% { transform: scale(1); filter: blur(0); opacity: 1; } 78% { opacity: 1; } 100% { transform: scale(13); filter: blur(30px); opacity: 0; } }
@keyframes boot-rush { 0% { transform: scale(1); opacity: .5; } 100% { transform: scale(7); opacity: 0; } }
#boot .boot-zstar { width: clamp(92px, 15vw, 140px); aspect-ratio: 256 / 243; margin: 0 auto 20px;
  background: linear-gradient(160deg, #e8631a, #ffc21e);
  -webkit-mask: url(../assets/img/brand/zstar.png) center / contain no-repeat;
          mask: url(../assets/img/brand/zstar.png) center / contain no-repeat;
  filter: drop-shadow(0 12px 34px rgba(232,99,26,.5)); animation: boot-logo 2s var(--ease) both; }
#boot .boot-logo-img { width: clamp(150px, 26vw, 230px); height: auto; animation: boot-logo 2.4s var(--ease) .15s both; }
#boot .boot-sub { font-family: var(--mono); font-size: 11px; letter-spacing: .34em; text-transform: uppercase; color: #8c857a; }
#boot .boot-tag { margin-top: -10px; }
#boot .boot-load { display: flex; flex-direction: column; gap: 9px; width: min(280px, 64vw); margin-top: 6px; }
#boot .boot-bar { width: 100%; height: 3px; border-radius: 4px; background: rgba(236,231,223,.12); overflow: hidden; }
#boot .boot-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg,#cbbfa6,#ece7df); border-radius: 4px; transition: width .14s linear; }
#boot .boot-meta { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: #7a7268; }
#boot .boot-meta .boot-pct { color: #bcae97; font-variant-numeric: tabular-nums; }
#boot .boot-enter { margin-top: 4px; font-size: 13px; opacity: 0; height: 0; overflow: hidden; transition: opacity .4s; }
#boot.ready .boot-load { display: none; }
#boot.ready .boot-enter { opacity: 1; height: auto; animation: pulse 1.8s infinite; }
#boot .boot-enter button { border: 1px solid rgba(236,231,223,.45); padding: 13px 38px; border-radius: 40px;
  color: #ece7df; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; font-size: 13px;
  background: rgba(236,231,223,.04); box-shadow: 0 0 0 0 rgba(236,231,223,.3); transition: all .2s; }
#boot .boot-enter button:hover { background: #ece7df; color: #120e08; border-color: #ece7df; box-shadow: 0 0 34px -4px rgba(236,231,223,.6); transform: scale(1.04); }
@keyframes boot-logo { 0% { opacity: 0; transform: translateY(10px) scale(.96); filter: blur(6px); } 100% { opacity: 1; transform: none; filter: none; } }

/* ============================================================
   SCREENSAVER — 5-min idle ambient mode
   ============================================================ */
#screensaver {
  position: fixed; inset: 0; z-index: 99000; pointer-events: none;
  background: radial-gradient(130% 100% at 50% 45%, #16120d 0%, #080604 70%, #000 100%);
  opacity: 0; transition: opacity .9s ease; overflow: hidden; color: #ece7df;
}
#screensaver.on { opacity: 1; pointer-events: auto; }
#screensaver .ss-stitch {
  position: absolute; inset: -10%; opacity: .5;
  background-image: repeating-linear-gradient(0deg, transparent 0 46px, rgba(203,191,166,.06) 46px 47px);
}
#screensaver .ss-logo {
  position: absolute; top: 0; left: 0;
  width: clamp(96px, 11vw, 158px); aspect-ratio: 256 / 243;
  background-color: #0a84ff;
  -webkit-mask: url(../assets/img/brand/zstar.png) center / contain no-repeat;
          mask: url(../assets/img/brand/zstar.png) center / contain no-repeat;
  filter: drop-shadow(0 8px 40px rgba(0,0,0,.5)); will-change: transform; transition: background-color .25s;
}
#screensaver .ss-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center; }
#screensaver .ss-clock { font-family: 'Krungthep', var(--mono); font-size: clamp(60px, 11vw, 150px); font-weight: 500; letter-spacing: .01em; color: rgba(236,231,223,.92); font-variant-numeric: tabular-nums; }
#screensaver .ss-date { font-family: var(--mono); font-size: 13px; letter-spacing: .3em; text-transform: uppercase; color: rgba(236,231,223,.4); }
#screensaver .ss-mantra { position: absolute; bottom: 13vh; left: 0; right: 0; text-align: center; font-family: var(--mono); font-size: 13px; letter-spacing: .42em; text-transform: uppercase; color: rgba(236,231,223,.55); transition: opacity .5s; }
#screensaver .ss-resume { position: absolute; bottom: 6vh; left: 50%; transform: translateX(-50%);
  font-family: var(--mono); font-size: 12px; letter-spacing: .22em; text-transform: uppercase;
  color: #ece7df; background: rgba(236,231,223,.08); border: 1px solid rgba(236,231,223,.3);
  padding: 13px 30px; border-radius: 30px; cursor: pointer; transition: background .2s, transform .15s; }
#screensaver .ss-resume:hover { background: rgba(236,231,223,.18); }
#screensaver .ss-resume:active { transform: translateX(-50%) scale(.96); }

/* ============================================================
   WELCOME — first-run "Welcome to CMD-Z OS" popup
   ============================================================ */
#welcome { position: fixed; inset: 0; z-index: 98000; display: flex; align-items: center; justify-content: center;
  padding: 20px; opacity: 0; pointer-events: none; transition: opacity .3s ease;
  background: radial-gradient(120% 100% at 50% 30%, rgba(26,20,48,.74), rgba(6,5,12,.86)); backdrop-filter: blur(7px); }
#welcome.on { opacity: 1; pointer-events: auto; }
#welcome .wc-card { position: relative; width: min(440px, 94vw); max-height: 92vh; overflow: auto; text-align: center;
  background: linear-gradient(180deg, #241b3c, #16112a); color: #f3f1ea; border: 1px solid rgba(255,194,30,.22);
  border-radius: 20px; padding: 30px 28px 22px; box-shadow: 0 40px 90px -24px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.06);
  transform: translateY(10px) scale(.98); transition: transform .32s var(--spring, cubic-bezier(.2,.9,.3,1.4)); }
#welcome.on .wc-card { transform: none; }
#welcome .wc-x { position: absolute; top: 12px; right: 14px; width: 28px; height: 28px; border-radius: 50%;
  background: rgba(243,241,234,.08); color: #c9c2dc; font-size: 12px; line-height: 28px; }
#welcome .wc-x:hover { background: rgba(243,241,234,.16); }
#welcome .wc-mark { width: 64px; height: 61px; margin: 2px auto 12px;
  background: linear-gradient(160deg, #e8631a, #ffc21e);
  -webkit-mask: url(../assets/img/brand/zstar.png) center / contain no-repeat;
          mask: url(../assets/img/brand/zstar.png) center / contain no-repeat;
  filter: drop-shadow(0 8px 20px rgba(232,99,26,.45)); }
#welcome .wc-eyebrow { font-family: var(--mono); font-size: 10px; letter-spacing: .26em; text-transform: uppercase; color: #ffc21e; }
#welcome .wc-h { font-family: "Plus Jakarta Sans", var(--display), sans-serif; font-weight: 800; font-size: 27px; letter-spacing: -.02em; margin: 6px 0 10px; }
#welcome .wc-lede { font-size: 13.5px; line-height: 1.62; color: #d6d0e4; margin: 0 auto 16px; max-width: 38ch; }
#welcome .wc-lede b { color: #fff; }
#welcome .wc-rows { display: flex; flex-direction: column; gap: 9px; text-align: left; margin-bottom: 20px; }
#welcome .wc-row { display: flex; gap: 11px; align-items: flex-start; background: rgba(243,241,234,.04);
  border: 1px solid rgba(243,241,234,.07); border-radius: 12px; padding: 11px 13px; }
#welcome .wc-row span { font-size: 17px; line-height: 1.3; flex: 0 0 auto; }
#welcome .wc-row p { font-size: 12.5px; line-height: 1.5; color: #c4bdd6; margin: 0; }
#welcome .wc-row b { color: #f3f1ea; }
#welcome .wc-actions { display: flex; flex-direction: column; gap: 9px; }
#welcome .wc-shop { font-family: "Plus Jakarta Sans", sans-serif; font-weight: 800; font-size: 15px; color: #2a1206;
  background: linear-gradient(160deg, #e8631a, #ffc21e); border-radius: 999px; padding: 13px 24px;
  box-shadow: 0 14px 30px -10px rgba(232,99,26,.6); transition: transform .12s, filter .15s; }
#welcome .wc-shop:hover { filter: brightness(1.07); transform: translateY(-1px); }
#welcome .wc-look { font-family: var(--mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
  color: #c9c2dc; background: rgba(243,241,234,.06); border: 1px solid rgba(243,241,234,.16); border-radius: 999px; padding: 11px 24px; }
#welcome .wc-look:hover { background: rgba(243,241,234,.12); }
#welcome .wc-foot { font-size: 11px; color: #8d86a4; margin-top: 15px; }
#welcome .wc-foot b { color: #c9c2dc; }
body.mobile #welcome .wc-card { width: 94vw; padding: 26px 20px 18px; }
body.mobile #welcome .wc-h { font-size: 23px; }
@keyframes boot-fill { to { width: 100%; } }
@keyframes pulse { 0%,100% { opacity: .5; } 50% { opacity: 1; } }

/* context menu */
#ctx {
  position: fixed; min-width: 200px; background: var(--pop-bg); color: var(--pop-text);
  backdrop-filter: blur(40px) saturate(180%); -webkit-backdrop-filter: blur(40px) saturate(180%);
  border: .5px solid var(--pop-bd); border-radius: 10px; box-shadow: var(--shadow-pop);
  padding: 5px; z-index: 9700; font-size: 13px; display: none; animation: pop .12s var(--ease);
}
#ctx button { display: flex; width: 100%; gap: 10px; padding: 5px 10px; border-radius: 5px; text-align: left; }
#ctx button:hover { background: var(--accent); color: #fff; }
#ctx hr { border: none; border-top: .5px solid var(--pop-bd); margin: 4px 6px; }

/* toasts */
#toasts { position: fixed; top: calc(var(--menubar-h) + 12px); right: 12px; z-index: 9600; display: flex; flex-direction: column; gap: 10px; }
.toast {
  width: min(320px, calc(100vw - 24px)); background: var(--pop-bg); color: var(--pop-text);
  backdrop-filter: blur(40px) saturate(180%); -webkit-backdrop-filter: blur(40px) saturate(180%);
  border: .5px solid var(--pop-bd); border-radius: 15px; padding: 12px 14px;
  box-shadow: var(--shadow-pop); display: flex; gap: 12px; align-items: flex-start;
  animation: toast-in .4s var(--spring);
}
@keyframes toast-in { from { opacity: 0; transform: translateX(30px) scale(.95); } to { opacity: 1; transform: none; } }
.toast .t-icon { font-size: 22px; }
.toast .t-title { font-weight: 700; font-size: 13px; }
.toast .t-body { font-size: 12px; color: var(--win-soft); margin-top: 2px; line-height: 1.4; }

/* control center */
#control-center { position: fixed; top: calc(var(--menubar-h) + 8px); right: 10px; width: 296px; z-index: 9550;
  background: var(--pop-bg); backdrop-filter: blur(40px) saturate(180%); -webkit-backdrop-filter: blur(40px) saturate(180%);
  border: .5px solid var(--pop-bd); border-radius: 18px; box-shadow: var(--shadow-pop); padding: 12px;
  display: flex; flex-direction: column; gap: 10px; color: var(--pop-text); animation: pop .16s var(--ease); }
.cc-row2 { display: flex; gap: 10px; }
.cc-tile { background: rgba(128,128,135,.16); border-radius: 14px; padding: 12px; font-size: 13px; }
.cc-row2 .cc-tile { flex: 1; }
.cc-toggle { cursor: pointer; transition: background .15s; }
.cc-toggle.on { background: var(--accent); color: #fff; }
.cc-ic { font-size: 18px; display: block; margin-bottom: 6px; }
.cc-tile b { display: block; font-weight: 600; }
.cc-tile small { color: var(--win-soft); font-size: 11px; }
.cc-toggle.on small { color: rgba(255,255,255,.85); }
.cc-wide { display: flex; align-items: center; gap: 12px; }
.cc-wide .cc-ic { margin: 0; }
.cc-now .cc-play { margin-left: auto; width: 32px; height: 32px; border-radius: 50%; background: var(--accent); color: #fff; font-size: 13px; }
.cc-drop { flex-direction: column; align-items: stretch; gap: 8px; }
.cc-drop-h { display: flex; align-items: center; gap: 10px; }
.cc-drop-h .cc-ic { margin: 0; }
.cc-count { font-family: var(--mono); font-size: 18px; text-align: center; font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.cc-wall { cursor: pointer; } .cc-wall:hover { background: rgba(128,128,135,.26); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
html.rm *, html.rm *::before, html.rm *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }

/* keyboard focus ring on OS chrome (dock, menubar, desktop icons, buttons) */
:focus-visible { outline: 2px solid var(--accent, #3b8bff); outline-offset: 2px; border-radius: 4px; }
.mb-item:focus-visible, .dock-item:focus-visible, .desk-icon:focus-visible { outline-offset: 3px; }

/* konami party mode — color-cycles ONLY the desktop aesthetics (wallpaper, dock,
   menubar, desktop icons + folders). App windows (Shop, Lookbook, etc.) are left
   fully untouched. Stepped animation (~2 repaints/sec) so it never overheats. */
body.party #wall-layer,
body.party #menubar,
body.party #dock,
body.party .desk-icon,
body.party .desk-folder { animation: party 16s steps(32) infinite; }
@keyframes party { from { filter: hue-rotate(0deg); } to { filter: hue-rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { body.party #wall-layer, body.party #menubar, body.party #dock, body.party .desk-icon, body.party .desk-folder { animation: none; } }

/* ============================================================
   BRAND POLISH — grain, warm light theme, technical type
   ============================================================ */
#grain {
  position: fixed; inset: 0; z-index: 9998; pointer-events: none;
  opacity: .05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 190px 190px;
}
html[data-theme="light"] #grain { opacity: .035; mix-blend-mode: multiply; }
html.rm #grain { opacity: .03; }

/* warm the light theme toward paper/bone */
html[data-theme="light"] {
  --wall-tint: #efece4;
  --menubar-bg: rgba(250,248,243,0.6);
  --menubar-text: #201c17;
  --pop-bg: rgba(250,248,243,0.78);
  --pop-text: #201c17;
  --win-bg: #fbf9f4;
  --win-bar: rgba(244,241,234,0.86);
  --win-text: #211c17;
  --win-soft: #6a6258;
  --card-bg: #f2efe8;
  --card-bg-2: #e9e5dc;
  --field-bg: #fffdf9;
}

/* technical / editorial type treatment */
#menubar .mb-logo { letter-spacing: -.01em; }
#mb-clock { letter-spacing: .02em; font-feature-settings: "tnum"; }
.app-tag { letter-spacing: .16em; }
.dock-item .tip { letter-spacing: .01em; font-weight: 600; }
.titlebar .title { letter-spacing: .01em; text-transform: none; }

/* sashiko stitch divider in the dock */
.dock-divider { background: none; border-left: 1px dashed rgba(140,132,120,.4); width: 0; }

/* boot tagline */
#boot .boot-tag { font-family: var(--mono); font-size: 10px; letter-spacing: .34em; text-transform: uppercase; color: #5a544c; margin-top: -14px; }