/* ===========================================================
   MacKenzieOS — frosted-glass desktop
   Design tokens, themes, glass, windows, dock, icons
   =========================================================== */

:root {
  --font-ui: "Figtree", system-ui, -apple-system, sans-serif;
  --font-serif: "Newsreader", Georgia, serif;
  --font-mono: "Geist Mono", ui-monospace, "SFMono-Regular", monospace;

  --ink: #2b3040;
  --ink-soft: #5b6377;
  --ink-faint: #8a91a3;

  /* glass — driven live by Tweaks */
  --glass-alpha: 0.52;
  --glass-blur: 22px;
  --glass-bg: rgba(255, 255, 255, var(--glass-alpha));
  --glass-strong: rgba(255, 255, 255, calc(var(--glass-alpha) + 0.22));
  --glass-border: rgba(255, 255, 255, 0.6);
  --glass-edge: rgba(255, 255, 255, 0.92);
  --hair: rgba(110, 122, 155, 0.2);

  --shadow-icon: 0 10px 24px -12px rgba(40, 50, 90, 0.5);
  --shadow-win: 0 40px 90px -28px rgba(35, 45, 85, 0.55),
    0 12px 28px -14px rgba(35, 45, 85, 0.32);
  --shadow-dock: 0 18px 50px -16px rgba(35, 45, 85, 0.5);

  --accent: oklch(0.62 0.13 270);
  --accent-ink: oklch(0.42 0.12 270);

  /* folder / app theming — stable across wallpaper themes */
  --c-food: oklch(0.72 0.14 42);
  --c-nature: oklch(0.71 0.1 152);
  --c-travel: oklch(0.69 0.12 244);
  --c-quotes: oklch(0.69 0.12 304);
  --c-notes: oklch(0.84 0.13 96);
  --c-music: oklch(0.64 0.15 350);
  --c-about: oklch(0.71 0.06 280);
  --c-contact: oklch(0.71 0.11 202);

  --radius-win: 18px;
  --menubar-h: 38px;
}

/* ---------- wallpaper themes ---------- */
[data-theme="dawn"] {
  --wall: linear-gradient(165deg, #ffd9c0 0%, #f7c7cf 26%, #d6d2ec 58%, #aec4ea 100%);
  --blob-1: oklch(0.85 0.1 40);
  --blob-2: oklch(0.82 0.09 280);
  --blob-3: oklch(0.84 0.08 210);
}
[data-theme="mist"] {
  --wall: linear-gradient(165deg, #e2edf7 0%, #cdddef 34%, #cfd2ec 66%, #d7d0e6 100%);
  --blob-1: oklch(0.86 0.06 230);
  --blob-2: oklch(0.85 0.05 280);
  --blob-3: oklch(0.87 0.05 200);
  --accent: oklch(0.62 0.1 240);
  --accent-ink: oklch(0.42 0.1 240);
}
[data-theme="blossom"] {
  --wall: linear-gradient(165deg, #ffe0ec 0%, #fbd2e6 32%, #ecd2f1 64%, #d9d8f4 100%);
  --blob-1: oklch(0.85 0.1 350);
  --blob-2: oklch(0.84 0.09 310);
  --blob-3: oklch(0.85 0.08 270);
  --accent: oklch(0.63 0.13 330);
  --accent-ink: oklch(0.43 0.12 330);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  font-family: var(--font-ui);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

#root { height: 100%; }

/* ---------- desktop root ---------- */
.os-root {
  position: relative;
  height: 100vh;
  width: 100vw;
  background: var(--wall);
  overflow: hidden;
  user-select: none;
  isolation: isolate;
}

/* drifting colour blobs for depth behind the glass */
.os-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0.6;
  pointer-events: none;
  z-index: 0;
  animation: drift 26s ease-in-out infinite alternate;
}
.os-blob.b1 { width: 46vw; height: 46vw; left: -8vw; top: -6vw; background: var(--blob-1); }
.os-blob.b2 { width: 40vw; height: 40vw; right: -10vw; top: 18vh; background: var(--blob-2); animation-delay: -8s; }
.os-blob.b3 { width: 38vw; height: 38vw; left: 24vw; bottom: -14vw; background: var(--blob-3); animation-delay: -14s; }
@keyframes drift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to { transform: translate3d(3vw, 3vh, 0) scale(1.12); }
}
@media (prefers-reduced-motion: reduce) {
  .os-blob { animation: none; }
}

/* ---------- glass primitive ---------- */
.glass {
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.4);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.4);
  border: 1px solid var(--glass-border);
  box-shadow: inset 0 1px 0 var(--glass-edge), inset 0 -1px 1px rgba(120,130,160,0.12);
}

/* ===========================================================
   MENU BAR
   =========================================================== */
.menubar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--menubar-h);
  z-index: 5000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 14px;
  font-size: 13px;
  background: rgba(255,255,255,0.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.5);
  backdrop-filter: blur(20px) saturate(1.5);
  border-bottom: 1px solid rgba(255,255,255,0.45);
}
.menubar-left { display: flex; align-items: center; gap: 18px; }
.menubar-brand {
  font-weight: 700;
  letter-spacing: 0.2px;
  display: flex; align-items: center; gap: 8px;
}
.menubar-logo {
  width: 15px; height: 15px; border-radius: 5px;
  background: linear-gradient(135deg, var(--accent), color-mix(in oklab, var(--accent) 40%, white));
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.8);
}
.menubar-app { color: var(--ink-soft); font-weight: 500; }
.menubar-right { display: flex; align-items: center; gap: 16px; font-variant-numeric: tabular-nums; }
.menubar-right .mb-item { display: flex; align-items: center; gap: 6px; color: var(--ink-soft); }
.menubar-clock { font-weight: 600; color: var(--ink); }
.menubar-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }

/* ===========================================================
   DESKTOP ICONS
   =========================================================== */
.icon-field {
  position: absolute;
  top: calc(var(--menubar-h) + 18px);
  left: 18px;
  z-index: 10;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 6px 4px;
  max-height: calc(100vh - var(--menubar-h) - 140px);
}
.desk-icon {
  width: 96px;
  padding: 8px 6px 6px;
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background 0.15s, border-color 0.15s, transform 0.12s;
}
.desk-icon:hover { background: rgba(255,255,255,0.22); }
.desk-icon:active { transform: scale(0.96); }
.desk-icon.drag-over {
  background: rgba(255,255,255,0.4);
  outline: 2px dashed var(--accent); outline-offset: -2px;
}
.desk-icon.drag-over .ic { transform: scale(1.06); }
.desk-icon.selected {
  background: rgba(255,255,255,0.3);
  border-color: rgba(255,255,255,0.6);
}
.desk-icon-label {
  font-size: 12.5px;
  font-weight: 500;
  text-align: center;
  line-height: 1.25;
  color: var(--ink);
  padding: 2px 7px;
  border-radius: 7px;
  background: rgba(255,255,255,0.34);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  text-shadow: 0 1px 1px rgba(255,255,255,0.5);
  max-width: 92px;
}
.desk-icon.selected .desk-icon-label {
  background: var(--accent);
  color: white;
  text-shadow: none;
}

/* ---------- icon ART (CSS-built, simple shapes only) ---------- */
.ic { position: relative; width: 64px; height: 56px; filter: drop-shadow(var(--shadow-icon)); }

/* folder — filled with its own texture */
.ic-folder { width: 66px; height: 54px; }
.ic-folder .tab {
  position: absolute; top: 0; left: 3px;
  width: 30px; height: 14px; border-radius: 7px 8px 0 0;
  clip-path: polygon(0 0, 76% 0, 100% 100%, 0 100%);
  background-image: var(--tex, linear-gradient(180deg, #d9c89f, #cdbb8e));
  background-size: 120% 280%; background-position: center top;
  filter: brightness(0.85) saturate(1.05);
}
.ic-folder--tex .tab { filter: brightness(0.72) saturate(1.05); }
.ic-folder .body {
  position: absolute; top: 9px; left: 0; right: 0; bottom: 0;
  border-radius: 5px 11px 11px 11px;
  background-image: var(--tex, linear-gradient(168deg, #f3ead4 0%, #e7d8b6 70%, #ddcca5 100%));
  background-size: cover; background-position: center;
  overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.45),
    inset 0 -9px 14px rgba(0,0,0,0.16), 0 1px 2px rgba(0,0,0,0.12);
}
.ic-folder .body::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(rgba(255,255,255,0.7), rgba(255,255,255,0));
}
.ic-folder .sheen {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(152deg, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0.08) 28%, rgba(255,255,255,0) 44%);
}

/* notepad — realistic legal pad */
.ic-note { width: 48px; height: 58px; margin: 0 auto; }
.ic-note .pad {
  position: absolute; inset: 3px 5px 0 5px;
  border-radius: 3px 3px 5px 5px;
  background: linear-gradient(168deg, #fffef9 0%, #fdfaed 55%, #f6efd6 100%);
  box-shadow: inset 0 1px 0 #fff, 0 5px 9px -4px rgba(40,50,90,0.4), 0 1px 2px rgba(40,50,90,0.25);
  overflow: hidden;
}
.ic-note .pad::before {
  content: ""; position: absolute; left: 9px; right: 4px; top: 15px; bottom: 5px;
  background-image: repeating-linear-gradient(to bottom, transparent 0 5.5px, rgba(86,116,176,0.34) 5.5px 6.5px);
}
.ic-note .pad::after {
  content: ""; position: absolute; left: 9px; top: 9px; bottom: 5px; width: 1px;
  background: rgba(216,72,72,0.6);
}
.ic-note .spiral {
  position: absolute; top: -1px; left: 5px; right: 5px; height: 9px; z-index: 2;
  display: flex; justify-content: space-around; align-items: center;
}
.ic-note .spiral i {
  width: 4px; height: 12px; border-radius: 3px;
  background: linear-gradient(90deg, #9097a3 0%, #eef1f5 45%, #aeb6c2 100%);
  box-shadow: 0 1px 1px rgba(0,0,0,0.3);
}

/* quotes — embossed paper card */
.ic-quote { width: 54px; height: 50px; margin: 3px auto 0; }
.ic-quote .card {
  position: absolute; inset: 0; border-radius: 11px;
  background: linear-gradient(158deg, #fcfdff 0%, #eef2fa 58%, #e0e8f4 100%);
  box-shadow: 0 6px 13px -5px rgba(40,50,90,0.4), inset 0 1px 0 #fff, inset 0 -3px 5px rgba(40,50,90,0.07);
  display: grid; place-items: center; overflow: hidden;
}
.ic-quote .mark {
  font-family: var(--font-serif); font-size: 46px; font-weight: 600; line-height: 1; margin-top: 16px;
  background: linear-gradient(160deg, #c2cee8, #8ea0c8);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* music — note tile */
.ic-music { width: 56px; height: 56px; margin: 0 auto; }
.ic-music .tile {
  position: absolute; inset: 0; border-radius: 15px;
  background: linear-gradient(155deg, color-mix(in oklab, var(--c-music) 64%, white), var(--c-music));
  display: grid; place-items: center;
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.6);
}
.ic-music .note { font-size: 30px; color: rgba(255,255,255,0.95); line-height: 1; text-shadow: 0 1px 2px rgba(120,30,80,0.3); }

/* about — realistic polaroid */
.ic-about { width: 46px; height: 54px; margin: 0 auto; }
.ic-about .ring {
  position: absolute; inset: 0; border-radius: 3px;
  background: linear-gradient(162deg, #ffffff 0%, #eeeef1 100%);
  box-shadow: 0 6px 13px -5px rgba(40,50,90,0.45), inset 0 1px 0 #fff;
}
.ic-about .face {
  position: absolute; top: 4px; left: 4px; right: 4px; height: 36px;
  border-radius: 2px; overflow: hidden;
  background: linear-gradient(160deg, #ffd0a3 0%, #ef9bb2 48%, #9aa6da 100%);
}
.ic-about .face::before { content: ""; position: absolute; width: 15px; height: 15px; border-radius: 50%; background: rgba(255,255,255,0.9); left: 50%; top: 7px; transform: translateX(-50%); }
.ic-about .face::after { content: ""; position: absolute; width: 26px; height: 16px; border-radius: 13px 13px 0 0; background: rgba(255,255,255,0.9); left: 50%; bottom: 0; transform: translateX(-50%); }

/* contact — realistic paper envelope */
.ic-contact { width: 58px; height: 42px; margin: 8px auto 0; }
.ic-contact .env {
  position: absolute; inset: 0; border-radius: 4px;
  background: linear-gradient(165deg, #fdfbf4 0%, #efe7d7 100%);
  box-shadow: 0 6px 11px -5px rgba(40,50,90,0.42), 0 1px 2px rgba(40,50,90,0.22), inset 0 1px 0 #fff;
  overflow: hidden;
}
.ic-contact .env::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(to bottom right, transparent 48%, rgba(0,0,0,0.05) 49.5% 50.5%, transparent 52%),
    linear-gradient(to bottom left, transparent 48%, rgba(0,0,0,0.05) 49.5% 50.5%, transparent 52%);
}
.ic-contact .env::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 64%;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  background: linear-gradient(168deg, #fffefb 0%, #ece3d2 100%);
  box-shadow: 0 2px 3px rgba(40,50,90,0.2);
}

/* mini icon for dock (scaled wrapper) */
.dock-ic { transform: scale(0.62); transform-origin: center; }

/* ===========================================================
   WINDOWS
   =========================================================== */
.win {
  position: absolute;
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-win);
  background: var(--glass-strong);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.5);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.5);
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-win), inset 0 1px 0 var(--glass-edge);
  overflow: hidden;
  min-width: 280px;
  min-height: 200px;
}
.win.opening { animation: winpop 0.26s cubic-bezier(0.2, 0.9, 0.3, 1.2); }
@keyframes winpop {
  from { transform: scale(0.94) translateY(8px); }
  to { transform: scale(1) translateY(0); }
}
.win-titlebar {
  height: 44px;
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  cursor: grab;
  border-bottom: 1px solid var(--hair);
  background: linear-gradient(180deg, rgba(255,255,255,0.45), rgba(255,255,255,0.12));
}
.win-titlebar:active { cursor: grabbing; }
.win-traffic { display: flex; gap: 8px; align-items: center; }
.tl {
  width: 14px; height: 14px; border-radius: 50%;
  border: none; cursor: pointer; position: relative;
  display: grid; place-items: center;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.08);
}
.tl span { opacity: 0; font-size: 9px; font-weight: 800; line-height: 1; color: rgba(0,0,0,0.5); }
.win-traffic:hover .tl span { opacity: 1; }
.tl.close { background: #ff6b63; }
.tl.min { background: #ffc54e; }
.tl.zoom { background: #41cd6b; }
.win-title {
  font-size: 13.5px; font-weight: 600; color: var(--ink-soft);
  flex: 1; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  display: flex; align-items: center; justify-content: center; gap: 8px;
}
.win-title .wt-emoji { display: inline-grid; }
.win-spacer { width: 52px; flex: none; }
.win-body {
  flex: 1; overflow: auto; position: relative;
  background: rgba(255,255,255,0.32);
}
.win-resize {
  position: absolute; right: 0; bottom: 0; width: 20px; height: 20px;
  cursor: nwse-resize; z-index: 3;
}
.win-resize::after {
  content: ""; position: absolute; right: 4px; bottom: 4px; width: 8px; height: 8px;
  border-right: 2px solid var(--ink-faint); border-bottom: 2px solid var(--ink-faint);
  border-radius: 0 0 3px 0; opacity: 0.6;
}

/* ===========================================================
   PLAYER BAR (compact centred glass pill)
   =========================================================== */
.playbar {
  position: fixed;
  left: 50%; bottom: 18px; transform: translateX(-50%);
  z-index: 4800;
  width: min(480px, calc(100vw - 28px));
  height: 64px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 13px;
  border-radius: 20px;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(255,255,255,0.34), rgba(255,255,255,0.16));
  -webkit-backdrop-filter: blur(34px) saturate(1.9);
  backdrop-filter: blur(34px) saturate(1.9);
  border: 1px solid rgba(255,255,255,0.5);
  box-shadow: 0 18px 50px -16px rgba(35,45,85,0.45), inset 0 1px 0 rgba(255,255,255,0.85), inset 0 -1px 1px rgba(120,130,160,0.1);
}

.pb-left { flex: 1; display: flex; align-items: center; gap: 11px; min-width: 0; }
.pb-art {
  width: 44px; height: 44px; flex: none; border-radius: 11px; overflow: hidden;
  box-shadow: 0 6px 16px -8px rgba(40,50,90,0.5), inset 0 0 0 1px rgba(255,255,255,0.4);
  transition: transform 0.3s;
}
.pb-art.playing { transform: scale(1.03); }
.pb-art image-slot { width: 100%; height: 100%; display: block; }
.pb-meta { min-width: 0; }
.pb-title { font-size: 13.5px; font-weight: 700; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pb-artist { font-size: 11.5px; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }

.pb-controls { display: flex; align-items: center; gap: 5px; flex: none; }
.pb-right { flex: 1; display: flex; justify-content: flex-end; }

/* modern icon buttons */
.playbar .pc-btn {
  position: relative; width: 38px; height: 38px; border-radius: 50%;
  color: var(--ink-soft); background: transparent; border: none; cursor: pointer;
  display: grid; place-items: center; transition: color 0.14s, background 0.14s, transform 0.1s;
}
.playbar .pc-btn svg { width: 21px; height: 21px; display: block; }
.playbar .pc-btn:hover { color: var(--ink); background: rgba(255,255,255,0.45); }
.playbar .pc-btn:active { transform: scale(0.9); }
.playbar .pc-btn.small { width: 32px; height: 32px; }
.playbar .pc-btn.small svg { width: 16px; height: 16px; }
.playbar .pc-btn.small.on { color: var(--accent-ink); background: transparent; }
.playbar .pc-btn.small.on::after {
  content: ""; position: absolute; bottom: 3px; left: 50%; transform: translateX(-50%);
  width: 4px; height: 4px; border-radius: 50%; background: var(--accent);
}
.playbar .pc-btn.play {
  width: 46px; height: 46px; color: var(--accent-ink);
  background: transparent; box-shadow: none;
}
.playbar .pc-btn.play svg { width: 26px; height: 26px; }
.playbar .pc-btn.play:hover { color: var(--accent-ink); background: rgba(255,255,255,0.45); transform: scale(1.06); }

.pb-iconbtn {
  flex: none; width: 36px; height: 36px; border-radius: 11px; cursor: pointer;
  border: 1px solid rgba(255,255,255,0.4); background: rgba(255,255,255,0.32);
  color: var(--ink-soft); display: grid; place-items: center; transition: background 0.15s, color 0.15s;
}
.pb-iconbtn svg { width: 18px; height: 18px; }
.pb-iconbtn:hover { background: rgba(255,255,255,0.6); color: var(--ink); }
.pb-iconbtn.on { background: var(--accent); border-color: transparent; color: #fff; }

/* slim scrubber along the base of the pill */
.pb-progress {
  position: absolute; left: 0; right: 0; bottom: 0; height: 9px;
  display: flex; align-items: flex-end; cursor: pointer;
}
.pb-progress::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: rgba(120,130,160,0.22);
}
.pb-progress-fill { position: relative; height: 3px; background: var(--accent); min-width: 2px; transition: width 0.2s linear; }
.pb-knob {
  position: absolute; right: -4px; bottom: -2.5px; width: 8px; height: 8px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(40,50,90,0.4), inset 0 0 0 2px var(--accent);
  opacity: 0; transition: opacity 0.15s;
}
.pb-progress:hover .pb-knob { opacity: 1; }

/* ---------- ALBUM-TINTED BAR (colours bled from the current art) ---------- */
.playbar.tinted {
  background: linear-gradient(180deg, rgba(var(--pb-bg-rgb), 0.64), rgba(var(--pb-bg-rgb), 0.5));
  border-color: rgba(255, 255, 255, 0.16);
  box-shadow: 0 18px 50px -16px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.2), inset 0 -1px 1px rgba(0, 0, 0, 0.2);
}
.playbar.tinted .pb-title { color: rgba(255, 255, 255, 0.97); }
.playbar.tinted .pb-artist { color: rgba(255, 255, 255, 0.62); }
.playbar.tinted .pb-art { box-shadow: 0 6px 16px -8px rgba(0, 0, 0, 0.6), inset 0 0 0 1px rgba(255, 255, 255, 0.22); }
.playbar.tinted .pc-btn { color: rgba(255, 255, 255, 0.84); }
.playbar.tinted .pc-btn:hover { color: #fff; background: rgba(255, 255, 255, 0.14); }
.playbar.tinted .pc-btn.play { color: var(--pb-accent) !important; }
.playbar.tinted .pc-btn.play:hover { color: var(--pb-accent) !important; background: rgba(255, 255, 255, 0.14); }
.playbar.tinted .pc-btn.small.on { color: var(--pb-accent) !important; }
.playbar.tinted .pc-btn.small.on::after { background: var(--pb-accent); }
.playbar.tinted .pb-progress::before { background: rgba(255, 255, 255, 0.2); }
.playbar.tinted .pb-progress-fill { background: var(--pb-accent); }
.playbar.tinted .pb-knob { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5), inset 0 0 0 2px var(--pb-accent); }
.playbar.tinted .pb-iconbtn { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.18); color: rgba(255, 255, 255, 0.84); }
.playbar.tinted .pb-iconbtn:hover { background: rgba(255, 255, 255, 0.2); color: #fff; }
.playbar.tinted .pb-iconbtn.on { background: var(--pb-accent); border-color: transparent; color: #fff; }

/* ---------- LIBRARY / SONG PICKER ---------- */
.pb-library {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: 94px; z-index: 4900;
  width: min(380px, calc(100vw - 28px));
  max-height: min(440px, 54vh);
  display: flex; flex-direction: column;
  border-radius: 20px; overflow: hidden;
  background: linear-gradient(180deg, rgba(255,255,255,0.62), rgba(255,255,255,0.46));
  -webkit-backdrop-filter: blur(34px) saturate(1.8); backdrop-filter: blur(34px) saturate(1.8);
  border: 1px solid rgba(255,255,255,0.6);
  box-shadow: var(--shadow-win), inset 0 1px 0 var(--glass-edge);
  animation: libin 0.22s cubic-bezier(0.2,0.9,0.3,1.2) both;
}
@keyframes libin {
  from { transform: translateX(-50%) translateY(12px); }
  to { transform: translateX(-50%) translateY(0); }
}
.lib-top { padding: 15px 16px 11px; border-bottom: 1px solid var(--hair); flex: none; }
.lib-title { font-family: var(--font-serif); font-size: 19px; font-weight: 600; margin-bottom: 11px; letter-spacing: -0.2px; }
.lib-search-wrap { position: relative; }
.lib-search {
  width: 100%; box-sizing: border-box; border: 1px solid var(--hair);
  background: rgba(255,255,255,0.6); border-radius: 12px;
  padding: 9px 12px 9px 36px; font-family: var(--font-ui); font-size: 13px; color: var(--ink); outline: none;
  transition: border-color 0.15s, background 0.15s;
}
.lib-search::placeholder { color: var(--ink-faint); }
.lib-search:focus { border-color: var(--accent); background: rgba(255,255,255,0.85); }
.lib-search-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 15px; height: 15px; color: var(--ink-faint); display: grid; place-items: center; }
.lib-search-icon svg { width: 15px; height: 15px; }
.lib-list { overflow: auto; padding: 6px; }
.lib-row { display: flex; align-items: center; gap: 12px; padding: 7px 8px; border-radius: 13px; cursor: pointer; transition: background 0.14s; }
.lib-row:hover { background: rgba(255,255,255,0.6); }
.lib-row.current { background: color-mix(in oklab, var(--accent) 16%, white); }
.lib-art {
  position: relative; width: 44px; height: 44px; flex: none; border-radius: 10px; overflow: hidden;
  display: grid; place-items: center;
  background: linear-gradient(150deg, color-mix(in oklab, var(--accent) 42%, white), color-mix(in oklab, var(--accent) 78%, white));
  box-shadow: 0 4px 10px -6px rgba(40,50,90,0.4), inset 0 0 0 1px rgba(255,255,255,0.4);
}
.lib-note { color: rgba(255,255,255,0.95); font-size: 19px; line-height: 1; }
.lib-play, .lib-eq { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(22,26,42,0.42); color: #fff; }
.lib-play { opacity: 0; transition: opacity 0.14s; }
.lib-play svg { width: 19px; height: 19px; }
.lib-row:hover .lib-play { opacity: 1; }
.lib-main { flex: 1; min-width: 0; }
.lib-song { font-size: 14px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lib-row.current .lib-song { color: var(--accent-ink); }
.lib-artist { font-size: 11.5px; color: var(--ink-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }
.lib-dur { font-family: var(--font-mono); font-size: 11px; color: var(--ink-faint); flex: none; }
.lib-empty { padding: 28px 20px; text-align: center; color: var(--ink-faint); font-size: 13px; }

@media (max-width: 720px) {
  .playbar { gap: 8px; padding: 0 10px; width: calc(100vw - 24px); }
  .pb-controls .pc-btn.small { display: none; }
  .pb-artist { display: none; }
}

/* ===========================================================
   APP CONTENT
   =========================================================== */
.app-pad { padding: 22px 24px 28px; }
.app-head { margin: 0 0 4px; }
.app-title { font-family: var(--font-serif); font-size: 25px; font-weight: 600; margin: 0; letter-spacing: -0.2px; }
.app-sub { font-size: 13px; color: var(--ink-soft); margin: 4px 0 18px; }
.app-sub .mono { font-family: var(--font-mono); font-size: 11.5px; }

/* pictures grid */
.pic-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 14px;
}
.pic-cell { display: flex; flex-direction: column; gap: 6px; }
.pic-cell image-slot { width: 100%; aspect-ratio: 4/3; display: block; box-shadow: 0 8px 20px -12px rgba(40,50,90,0.4); }
.pic-cap { font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-faint); text-align: center; }

.pic-photo {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 4/3;
  border-radius: 12px;
  overflow: hidden;
  background: rgba(40,50,90,0.07);
  box-shadow: 0 8px 20px -12px rgba(40,50,90,0.4);
  text-decoration: none;
  transition: transform 180ms ease, box-shadow 180ms ease;
}
.pic-photo:hover { transform: translateY(-3px); box-shadow: 0 16px 30px -12px rgba(40,50,90,0.55); }
.pic-photo img, .pic-photo video { width: 100%; height: 100%; object-fit: cover; display: block; }
.pic-play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 38px; height: 38px; border-radius: 50%;
  background: rgba(20,24,40,0.5); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; padding-left: 2px;
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); pointer-events: none;
}
.pic-more {
  display: inline-block; margin-top: 16px;
  font-family: var(--font-mono); font-size: 11.5px;
  color: var(--ink-soft); text-decoration: none;
  border-bottom: 1px dashed currentColor; padding-bottom: 1px;
}
.pic-more:hover { color: var(--ink-faint); }

/* quotes */
.quote-list { display: flex; flex-direction: column; gap: 14px; }
.quote-card {
  padding: 20px 22px; border-radius: 14px;
  background: rgba(255,255,255,0.5);
  border: 1px solid var(--hair);
  box-shadow: 0 8px 22px -16px rgba(40,50,90,0.4);
}
.quote-text { font-family: var(--font-serif); font-size: 19px; line-height: 1.45; font-style: italic; color: var(--ink); margin: 0; }
.quote-by { font-size: 12px; font-family: var(--font-mono); color: var(--ink-faint); margin-top: 10px; letter-spacing: 0.3px; }

/* notes */
.notes-wrap { display: flex; height: 100%; }
.notes-list { width: 168px; flex: none; border-right: 1px solid var(--hair); overflow: auto; background: rgba(255,255,255,0.28); }
.notes-list-item {
  padding: 11px 14px; cursor: pointer; border-bottom: 1px solid var(--hair);
  display: flex; flex-direction: column; gap: 2px;
}
.notes-list-item:hover { background: rgba(255,255,255,0.4); }
.notes-list-item.active { background: var(--accent); }
.notes-list-item.active .nli-title, .notes-list-item.active .nli-prev { color: #fff; }
.nli-title { font-size: 13px; font-weight: 600; color: var(--ink); }
.nli-prev { font-size: 11px; color: var(--ink-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.notes-editor { flex: 1; display: flex; flex-direction: column; background: repeating-linear-gradient(rgba(255,255,255,0.5) 0 30px, rgba(180,170,120,0.12) 30px 31px); }
.notes-editor textarea {
  flex: 1; border: none; resize: none; background: transparent; outline: none;
  font-family: var(--font-mono); font-size: 14px; line-height: 31px;
  padding: 10px 22px; color: var(--ink);
}
.notes-titleinput {
  border: none; background: transparent; outline: none; font-family: var(--font-serif);
  font-size: 20px; font-weight: 600; padding: 14px 22px 4px; color: var(--ink);
}

/* about */
.about-wrap { display: flex; gap: 22px; align-items: flex-start; }
.about-avatar { width: 120px; height: 120px; flex: none; border-radius: 50%; overflow: hidden; box-shadow: 0 12px 28px -14px rgba(40,50,90,0.5); border: 3px solid rgba(255,255,255,0.7); }
.about-avatar image-slot { width: 100%; height: 100%; display: block; }
.about-name { font-family: var(--font-serif); font-size: 28px; font-weight: 600; margin: 2px 0 2px; }
.about-role { font-family: var(--font-mono); font-size: 12px; color: var(--accent-ink); letter-spacing: 0.4px; margin-bottom: 14px; }
.about-bio { font-size: 14.5px; line-height: 1.6; color: var(--ink-soft); max-width: 46ch; }
.about-bio[contenteditable]:focus { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 4px; }

/* contact */
.link-list { display: flex; flex-direction: column; gap: 10px; }
.link-row {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px; border-radius: 13px; text-decoration: none; color: var(--ink);
  background: rgba(255,255,255,0.5); border: 1px solid var(--hair);
  transition: transform 0.12s, background 0.15s;
}
.link-row:hover { transform: translateX(4px); background: rgba(255,255,255,0.7); }
.link-glyph { width: 38px; height: 38px; flex: none; border-radius: 11px; display: grid; place-items: center; font-family: var(--font-mono); font-weight: 700; font-size: 15px; color: #fff; }
.link-main { display: flex; flex-direction: column; }
.link-label { font-weight: 600; font-size: 14.5px; }
.link-sub { font-size: 12px; color: var(--ink-faint); font-family: var(--font-mono); }
.link-arrow { margin-left: auto; color: var(--ink-faint); font-size: 18px; }

/* ===========================================================
   MUSIC PLAYER
   =========================================================== */
.player { padding: 20px 20px 16px; display: flex; flex-direction: column; height: 100%; }
.player-art {
  position: relative; width: 100%; aspect-ratio: 1; border-radius: 18px;
  box-shadow: 0 18px 40px -16px rgba(40,50,90,0.5); flex: none;
}
.player-art image-slot { width: 100%; height: 100%; display: block; }
/* a peeking vinyl disc behind the art edge */
.player-disc {
  position: absolute; right: -6px; top: 50%; transform: translateY(-50%);
  width: 64px; height: 64px; border-radius: 50%; z-index: -1;
  background: repeating-radial-gradient(circle, #2a2d36 0 3px, #1c1e25 3px 5px);
  box-shadow: 0 8px 18px -8px rgba(0,0,0,0.5);
}
.player-disc::after { content: ""; position: absolute; inset: 26px; border-radius: 50%; background: var(--accent); }
.player-art.spinning .player-disc { animation: spin 4s linear infinite; }
@keyframes spin { to { transform: translateY(-50%) rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .player-art.spinning .player-disc { animation: none; } }

.player-meta { margin: 16px 2px 12px; }
.player-title { font-size: 19px; font-weight: 700; letter-spacing: -0.2px; color: var(--ink); }
.player-artist { font-size: 13px; color: var(--ink-soft); margin-top: 2px; }

.player-scrub { padding: 6px 0; cursor: pointer; }
.player-track { height: 5px; border-radius: 3px; background: rgba(120,130,160,0.22); position: relative; }
.player-fill { height: 100%; border-radius: 3px; background: var(--accent); position: relative; min-width: 5px; }
.player-knob {
  position: absolute; right: -6px; top: 50%; transform: translateY(-50%);
  width: 13px; height: 13px; border-radius: 50%; background: #fff;
  box-shadow: 0 2px 6px rgba(40,50,90,0.4), inset 0 0 0 3px var(--accent);
}
.player-times { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 11px; color: var(--ink-faint); margin-top: 2px; }

.player-controls { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 14px 0 18px; }
.pc-btn {
  border: none; cursor: pointer; background: transparent; color: var(--ink-soft);
  font-size: 26px; line-height: 1; display: grid; place-items: center;
  width: 44px; height: 44px; border-radius: 50%; transition: color 0.15s, transform 0.12s, background 0.15s;
}
.pc-btn:hover { color: var(--ink); background: rgba(255,255,255,0.4); }
.pc-btn:active { transform: scale(0.92); }
.pc-btn.small { font-size: 17px; }
.pc-btn.small.on { color: var(--accent-ink); background: color-mix(in oklab, var(--accent) 22%, white); }
/* legacy windowed-player button (unused) */
.player .pc-btn.play {
  width: 60px; height: 60px; font-size: 24px; color: #fff;
  background: linear-gradient(160deg, color-mix(in oklab, var(--accent) 82%, white), var(--accent));
  box-shadow: 0 12px 26px -10px var(--accent);
}
.pc-btn.play:hover { color: #fff; transform: scale(1.05); }

.player-queue { flex: 1; overflow: auto; margin: 0 -6px; padding: 0 6px; border-top: 1px solid var(--hair); }
.queue-head { font-family: var(--font-mono); font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--ink-faint); padding: 12px 6px 8px; }
.queue-row { display: flex; align-items: center; gap: 12px; padding: 8px 8px; border-radius: 11px; cursor: pointer; transition: background 0.14s; }
.queue-row:hover { background: rgba(255,255,255,0.45); }
.queue-row.current .queue-title { color: var(--accent-ink); font-weight: 700; }
.queue-idx { width: 18px; text-align: center; flex: none; }
.queue-num { font-family: var(--font-mono); font-size: 12px; color: var(--ink-faint); }
.queue-main { flex: 1; min-width: 0; }
.queue-title { font-size: 14px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.queue-artist { font-size: 11.5px; color: var(--ink-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.queue-dur { font-family: var(--font-mono); font-size: 11px; color: var(--ink-faint); flex: none; }
/* tiny equalizer for the playing track */
.eq { display: inline-flex; gap: 2px; height: 13px; align-items: flex-end; }
.eq i { width: 3px; background: var(--accent); border-radius: 2px; animation: eqbar 0.9s ease-in-out infinite; }
.eq i:nth-child(1) { height: 6px; animation-delay: -0.2s; }
.eq i:nth-child(2) { height: 12px; animation-delay: -0.5s; }
.eq i:nth-child(3) { height: 8px; animation-delay: 0s; }
@keyframes eqbar { 0%, 100% { transform: scaleY(0.4); } 50% { transform: scaleY(1); } }
@media (prefers-reduced-motion: reduce) { .eq i { animation: none; } }

/* ===========================================================
   WELCOME / BOOT OVERLAY
   =========================================================== */
.welcome {
  position: fixed; inset: 0; z-index: 9000;
  display: grid; place-items: center;
  background: var(--wall);
  transition: opacity 0.7s ease, visibility 0.7s;
}
.welcome.gone { opacity: 0; visibility: hidden; }
.welcome-card {
  text-align: center; padding: 46px 54px; border-radius: 26px;
  background: rgba(255,255,255,0.4);
  -webkit-backdrop-filter: blur(26px) saturate(1.5); backdrop-filter: blur(26px) saturate(1.5);
  border: 1px solid rgba(255,255,255,0.55);
  box-shadow: var(--shadow-win);
  animation: cardin 0.5s cubic-bezier(0.2, 0.9, 0.3, 1.2) both;
}
@keyframes cardin {
  from { transform: translateY(12px) scale(0.97); }
  to { transform: translateY(0) scale(1); }
}
.welcome-kicker { font-family: var(--font-mono); font-size: 12px; letter-spacing: 3px; text-transform: uppercase; color: var(--ink-soft); }
.welcome-title { font-family: var(--font-serif); font-size: 46px; font-weight: 600; margin: 8px 0 4px; letter-spacing: -0.5px; }
.welcome-tag { font-size: 14px; color: var(--ink-soft); margin-bottom: 26px; }
.welcome-btn {
  font-family: var(--font-ui); font-size: 15px; font-weight: 600; color: #fff; cursor: pointer;
  padding: 12px 34px; border-radius: 13px; border: none;
  background: linear-gradient(160deg, color-mix(in oklab, var(--accent) 80%, white), var(--accent));
  box-shadow: 0 12px 26px -12px var(--accent);
  transition: transform 0.12s;
}
.welcome-btn:hover { transform: translateY(-2px); }
.welcome-btn:active { transform: translateY(0); }

/* ===========================================================
   MOBILE
   =========================================================== */
@media (max-width: 720px) {
  .icon-field {
    flex-direction: row;
    max-height: none;
    left: 0; right: 0;
    padding: 0 10px;
    gap: 4px;
    justify-content: flex-start;
  }
  .desk-icon { width: 25%; min-width: 84px; }
  .win-resize { display: none; }
  .dock { gap: 5px; padding: 8px 9px; bottom: 10px; }
  .dock-item { width: 46px; height: 46px; }
  .dock-item:hover { transform: none; }
  .notes-list { width: 120px; }
  .about-wrap { flex-direction: column; align-items: center; text-align: center; }
  .about-bio { text-align: left; }
  .welcome-title { font-size: 36px; }
}