/* ---------- design tokens ---------- */
:root {
  --bg: #0e0e10;
  --bg-2: #131316;
  --bg-3: #1a1a1f;
  --bg-row-hover: #1c1c22;
  --line: #1f1f25;
  --line-strong: #2a2a32;
  --text: #d9d9de;
  --text-dim: #8a8a93;
  --text-mute: #5e5e67;
  --accent-hue: 206;
  --ah: var(--accent-hue);
  --accent: oklch(0.74 0.14 var(--accent-hue));
  --accent-soft: oklch(0.74 0.14 var(--accent-hue) / 0.14);
  --accent-glow: oklch(0.74 0.14 var(--accent-hue) / 0.45);
  --sidebar-w: 232px;
  --row-h: 56px;
  --topbar-h: 56px;
  --filter-h: 44px;
  --player-h: 98px;
  color-scheme: dark;
  font-family: "Inter", system-ui, sans-serif;
}

:root[data-theme="light"] {
  --bg: #f7f4ee;
  --bg-2: #fffaf2;
  --bg-3: #ede7dc;
  --bg-row-hover: #f0ebe2;
  --line: rgba(34, 27, 18, 0.10);
  --line-strong: rgba(34, 27, 18, 0.18);
  --text: #241f18;
  --text-dim: #6e675d;
  --text-mute: #9a9185;
  --text-muted: #9a9185;
  --muted: #7d756b;
  --surface: #fffaf3;
  --surface-2: #f4eee4;
  --border: rgba(34, 27, 18, 0.12);
  color-scheme: light;
}

* { box-sizing: border-box; }
html, body, #root { height: 100%; margin: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font-size: 13px;
  -webkit-font-smoothing: antialiased;
  letter-spacing: 0.005em;
}
.mono, .cell--mono, input, .topbar__kbd { font-family: "JetBrains Mono", ui-monospace, monospace; }

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input { font: inherit; color: inherit; background: none; border: 0; outline: none; width: 100%; }
input::placeholder,
textarea::placeholder {
  color: color-mix(in srgb, var(--text-mute) 82%, transparent);
  font-style: italic;
  opacity: 0.82;
}
.icon { flex-shrink: 0; }
/* QUEUE-169 replay2: handoff surfaces intentionally use bespoke button/chip/tier CSS. */

/* ---------- layout ---------- */
.app {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  grid-template-rows: 100vh;
  height: 100vh;
  overflow: hidden;
  background: var(--bg);
}
.main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  height: 100%;
  border-left: 1px solid var(--line);
}
.table-wrap { min-height: 0; flex: 1; }

/* ---------- sidebar ---------- */
.sidebar {
  background: #000;
  display: flex;
  flex-direction: column;
  padding: 14px 12px 12px;
  gap: 6px;
  border-right: 1px solid var(--line);
  min-height: 0;
  overflow: hidden;
  /* 2026-05-16 23:34 PT (Tommy "i shouldnt be able to highlight stuff"):
     sidebar is chrome, not content — text selection on nav items is noise
     when dragging across the rail. Inputs still allow selection below. */
  user-select: none;
  -webkit-user-select: none;
}
.sidebar input,
.sidebar textarea,
.sidebar [contenteditable="true"] {
  user-select: text;
  -webkit-user-select: text;
}
.sidebar__nav {
  display: flex; flex-direction: column; gap: 1px;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 4px;
  scrollbar-width: none;
  scrollbar-color: transparent transparent;
}
.sidebar__nav::-webkit-scrollbar { width: 0; height: 0; }
.sidebar__nav::-webkit-scrollbar-thumb { background: transparent; }
.sidebar__nav::-webkit-scrollbar-track { background: transparent; }
.sidebar__foot {
  flex-shrink: 0;
  padding: 10px 12px 12px;
  border-top: 1px solid var(--line);
  background: rgba(0,0,0,0.12);
}
.sidebar__foot {
  display: flex; flex-direction: column; align-items: stretch;
  gap: 8px;
  padding: 8px 10px 10px;
  /* Lift the foot so its vertical center aligns with the player bar's center.
     Player bar visual center sits ~50px above the viewport bottom (76px tall
     + 12px bottom margin). The foot (chev + counts) is ~44px tall, so its
     bottom needs to sit ~28px from viewport bottom. With sidebar's 12px
     bottom padding already in place, that's ~6px of extra margin. */
  margin-bottom: 6px;
}
.sidebar__foot-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px;
}
/* Track-quota bar — only rendered for free + starter tiers. The bar uses
   accent for healthy fill, amber at >=80%, red at full. Click jumps to the
   paywall (free → starter, starter → pro). */
.sidebar__quota {
  appearance: none;
  display: flex; flex-direction: column; gap: 6px;
  padding: 8px 10px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text-mute);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
}
.sidebar__quota:hover { background: rgba(255,255,255,0.05); color: var(--text); }
.sidebar__quota-row {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 8px;
}
.sidebar__quota-label {
  font-size: 10px; letter-spacing: 0.10em; text-transform: uppercase;
  font-weight: 700;
}
.sidebar__quota-count {
  font-size: 11px; font-variant-numeric: tabular-nums;
  display: inline-flex; align-items: baseline; gap: 2px;
}
.sidebar__quota-used { color: var(--text); font-weight: 700; }
.sidebar__quota-sep  { opacity: 0.5; }
.sidebar__quota-cap  { opacity: 0.7; }
.sidebar__quota-track {
  height: 4px; border-radius: 999px;
  background: rgba(255,255,255,0.08);
  overflow: hidden;
}
.sidebar__quota-fill {
  height: 100%; border-radius: inherit;
  background: var(--accent);
  transition: width 320ms cubic-bezier(0.32, 0.72, 0.24, 1), background 160ms ease;
}
.sidebar__quota--warn .sidebar__quota-fill {
  background: #f9a922;
  box-shadow: 0 0 8px rgba(249, 169, 34, 0.55), 0 0 14px rgba(249, 169, 34, 0.35);
}
.sidebar__quota--full .sidebar__quota-fill {
  background: #FA3A05;
  box-shadow: 0 0 10px rgba(250, 58, 5, 0.7), 0 0 18px rgba(250, 58, 5, 0.45), 0 0 2px #FA3A05;
}
.sidebar__quota--warn .sidebar__quota-used { color: #f9a922; }
.sidebar__quota--full .sidebar__quota-used {
  color: #FA3A05;
  text-shadow: 0 0 10px rgba(250, 58, 5, 0.6);
}
.sidebar__quota--full {
  border-color: rgba(250, 58, 5, 0.35) !important;
  background: linear-gradient(180deg, rgba(250, 58, 5, 0.08) 0%, rgba(250, 58, 5, 0.02) 100%) !important;
  box-shadow: 0 0 0 1px rgba(250, 58, 5, 0.18), 0 12px 32px -14px rgba(250, 58, 5, 0.55);
}
.sidebar__quota--full:hover {
  background: linear-gradient(180deg, rgba(250, 58, 5, 0.12) 0%, rgba(250, 58, 5, 0.04) 100%) !important;
  box-shadow: 0 0 0 1px rgba(250, 58, 5, 0.28), 0 14px 36px -14px rgba(250, 58, 5, 0.65);
}
.sidebar__quota-cta {
  font-size: 10px; letter-spacing: 0.04em;
  color: var(--accent); font-weight: 600;
}
.sidebar__quota--warn .sidebar__quota-cta { color: #f9a922; }
.sidebar__quota--full .sidebar__quota-cta {
  color: #FA3A05;
  text-shadow: 0 0 8px rgba(250, 58, 5, 0.45);
}
:root[data-theme="light"] .sidebar__quota { background: rgba(0,0,0,0.03); }
:root[data-theme="light"] .sidebar__quota-track { background: rgba(0,0,0,0.08); }

body.is-sidebar-collapsed .sidebar__quota,
body.is-sidebar-collapsed .sidebar__foot-row { justify-content: center; }
body.is-sidebar-collapsed .sidebar__foot-counts { display: none !important; }
/* Collapsed rail: the quota bar has no room for label/count/CTA copy —
   it overflows and reads as garbled text fragments. Hide it entirely
   in collapsed mode; the user can expand the sidebar to see it. */
body.is-sidebar-collapsed .sidebar__quota { display: none !important; }
/* Collapsed rail: hide the lock indicators on gated nav items — there's
   no room and the row already reads as muted/disabled. */
body.is-sidebar-collapsed .navitem__lock { display: none !important; }
/* Collapsed brand: only the favicon should sit in the rail. The wordmark
   element (which holds the SESSION wordmark + vault SVG) is a sibling of
   the favicon inside .sidebar__logo, so hide the wordmark + tier pill,
   not the whole logo container. */
body.is-sidebar-collapsed .sidebar__brand .sidebar__wordmark,
body.is-sidebar-collapsed .sidebar__brand .sidebar__tier-pill { display: none !important; }
body.is-sidebar-collapsed .sidebar__brand .sidebar__logo {
  display: flex; justify-content: center; width: 100%;
  /* nudge up 2px so the ring sits on the same horizontal axis as the
     topbar's search input (which has its own internal padding). */
  margin-top: -2px;
}
.sidebar__foot-counts { display: flex; gap: 10px; align-items: baseline; flex: 1; min-width: 0; }
.sidebar__collapse-chev--inline { margin: 0; flex-shrink: 0; }
.sidebar__collapse-chev {
  flex-shrink: 0;
  width: 26px; height: 26px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  color: var(--text-mute);
  cursor: pointer;
  transition: color 160ms ease, background 160ms ease, border-color 160ms ease, box-shadow 220ms ease, transform 160ms ease;
  position: relative;
  isolation: isolate;
}
.sidebar__collapse-chev::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  background: transparent;
  opacity: 0;
  transition: opacity 160ms ease;
  z-index: -1;
}
/* Hover is a quiet white wash — no accent tint, no outer glow.
   The chev is just a control, not a beacon; keep the rail calm. */
.sidebar__collapse-chev:hover {
  color: var(--text);
  border-color: transparent;
  background: var(--bg-3);
  box-shadow: none;
}
.sidebar__collapse-chev:hover::before { opacity: 0; }
/* Accent only when actually pressed/active. */
.sidebar__collapse-chev:active {
  color: var(--accent);
  background: color-mix(in oklch, var(--accent) 12%, transparent);
}
.sidebar__collapse-chev:active { transform: scale(0.94); }
.sidebar__collapse-chev:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px color-mix(in oklch, var(--accent) 60%, transparent);
}
body.is-sidebar-collapsed .sidebar__collapse-chev svg { transform: scaleX(-1); }
/* Chev always sits as its own row at the very bottom of the sidebar,
   beneath the counts (or alone, if counts are off). */
.sidebar__collapse-chev--solo { margin: 10px auto 14px; }
.sidebar__foot { position: relative; }
.sidebar__collapse-chev--inset { /* legacy — no longer used, kept harmless */
  position: static;
  right: auto;
  top: 50%;
  transform: translateY(-50%);
  margin: 0;
}
.sidebar__collapse-chev--inset:active { transform: translateY(-50%) scale(0.94); }
/* Always keep the chev reachable, even when counts are hidden in collapsed mode. */
body.is-sidebar-collapsed .sidebar__collapse-chev { margin: 12px auto; position: static; transform: none; }
body.is-sidebar-collapsed .sidebar__collapse-chev:active { transform: scale(0.94); }
/* Sleek, almost-invisible counts: single line, tiny, very dim. */
.sidebar__foot-count {
  display: inline-flex; align-items: baseline; gap: 4px;
  opacity: 0.55;
  transition: opacity 0.15s ease;
}
.sidebar__foot-count:hover { opacity: 0.9; }
.sidebar__foot-num {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 10px; font-weight: 500;
  color: var(--text-mute);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.sidebar__foot-label {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-mute);
  line-height: 1;
}
:root[data-theme="light"] .sidebar__foot { background: rgba(0,0,0,0.03); }
.sidebar__group { display: flex; flex-direction: column; gap: 1px; }
.sidebar__group--divider { padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px solid var(--line); }
.sidebar__group--bottom { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line); }
.sidebar__group--bottom + .sidebar__group--bottom { margin-top: 0; padding-top: 6px; border-top: 0; }
.sidebar__section {
  display: flex; align-items: center; gap: 6px;
  cursor: default;
  user-select: none;
  position: relative;
}
.sidebar__section:active { cursor: default; }
.sidebar__section-grip {
  font-size: 9px; color: var(--text-mute); opacity: 0;
  transition: opacity 120ms;
  letter-spacing: -2px;
  cursor: grab;
}
.sidebar__section:hover .sidebar__section-grip { opacity: 0.7; }
.sidebar__section-grip:hover { opacity: 1; color: var(--text); }
.sidebar__section-grip:active { cursor: grabbing; }
.sidebar__section.is-dragging { opacity: 0.4; }
.sidebar__section.is-dropbefore { box-shadow: 0 -2px 0 var(--accent); }
.navitem { cursor: pointer; }
.navitem:active { cursor: pointer; }
.navitem.is-dragging { opacity: 0.4; }
.navitem.is-dropbefore { box-shadow: 0 -2px 0 var(--accent); }
.navitem.is-dropafter  { box-shadow: 0 2px 0 var(--accent); }
body.is-track-drag-trash-intent .navitem[data-nav-key="trash"] {
  box-shadow: inset 3px 0 0 var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}
body.is-track-drag-trash-intent .navitem[data-nav-key="trash"],
.navitem.navitem--trash-drop,
body.is-track-drag-nested-intent .navitem[data-nav-key="nested"],
.navitem.navitem--nested-drop {
  box-shadow: inset 3px 0 0 var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--text);
}
body.is-track-drag-playlist-intent .navitem[data-nav-key="playlists"] {
  box-shadow: inset 3px 0 0 var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}
.navitem__grip {
  width: 14px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--text-mute);
  opacity: 0;
  cursor: grab;
  transition: opacity 120ms ease, color 120ms ease;
}
.navitem__grip .icon { width: 13px; height: 13px; }
.navitem:hover .navitem__grip,
.navitem:focus-visible .navitem__grip { opacity: 0.62; }
.navitem__grip:hover { opacity: 1; color: var(--text); }
.navitem__grip:active { cursor: grabbing; }
.sidebar__brand { padding: 4px 14px 14px 4px; display: flex; max-width: 100%; min-width: 0; }

/* ---------- sidebar collapse ---------- */
.sidebar { position: relative; }
.sidebar__collapse-toggle {
  flex-shrink: 0;
  display: flex; align-items: center; gap: 8px;
  margin: 4px 12px 8px;
  padding: 4px 6px;
  font: inherit; font-size: 10px;
  letter-spacing: 0.06em;
  border-radius: 4px; border: 1px solid transparent;
  background: transparent; color: var(--text-mute);
  cursor: pointer;
  transition: color 120ms, background 120ms, border-color 120ms;
}
.sidebar__collapse-toggle:hover { color: var(--text); background: var(--bg-3); }
.sidebar__collapse-toggle svg { width: 12px; height: 12px; flex-shrink: 0; opacity: 0.7; }
.sidebar__collapse-toggle:hover svg { opacity: 1; }
.sidebar__collapse-toggle-label { flex: 1; text-align: left; }
body.is-sidebar-collapsed .sidebar__collapse-toggle {
  justify-content: center;
  margin: 0 auto;
  padding: 0;
  gap: 0;
  width: 28px; height: 28px;
  border-radius: 8px;
}
body.is-sidebar-collapsed .sidebar__collapse-toggle-label { display: none; }
body.is-sidebar-collapsed .sidebar__collapse-toggle svg { transform: scaleX(-1); }

/* Sidebar collapse: animate the column width AND the inner sidebar width
   together so content slides instead of jumping. */
.app { transition: grid-template-columns 260ms cubic-bezier(0.32, 0.72, 0.24, 1); }
.sidebar { transition: width 260ms cubic-bezier(0.32, 0.72, 0.24, 1); }
body.is-sidebar-collapsed .app { grid-template-columns: 64px 1fr; }
/* Brand area = topbar height so the favicon centers on the same horizontal
   axis as the search bar to its right. */
.sidebar__brand { height: var(--topbar-h); padding: 0 4px; box-sizing: border-box; align-items: center; }
body.is-sidebar-collapsed .sidebar__brand { padding: 0; justify-content: center; }
/* Favicon mark — collapsed-rail brand. CSS replica of .player__play so
   it reads as a sibling of the transport play button (same conic ring,
   same flat-glass core, same white play glyph). */
.sidebar__favicon { display: none; }
body.is-sidebar-collapsed .sidebar__favicon {
  position: relative;
  display: grid; place-items: center;
  width: 28px; height: 28px;
  border-radius: 999px;
  flex-shrink: 0;
  color: #fff;
  box-shadow:
    inset 0 0 0 0.5px rgba(255, 255, 255, 0.10),
    0 1px 2px rgba(0, 0, 0, 0.40);
  overflow: visible;
}
body.is-sidebar-collapsed .sidebar__favicon::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at center, oklch(0.14 0.005 var(--accent-hue)) 0 60%, oklch(0.10 0.005 var(--accent-hue)) 62%, transparent 64% 100%),
    conic-gradient(
      from -16.36deg,
      #26418f 0 9.09%,
      #a61a64 9.09% 18.18%,
      #216bb0 18.18% 27.27%,
      #e76426 27.27% 36.36%,
      #694695 36.36% 45.45%,
      #297c3f 45.45% 54.54%,
      #ca282c 54.54% 63.63%,
      #3a4b53 63.63% 72.72%,
      #617986 72.72% 81.81%,
      #f3a42c 81.81% 90.90%,
      #111621 90.90% 100%
    );
  z-index: 0;
  pointer-events: none;
}
/* Tinted variant: swap the rainbow conic for an accent-hue luminance ramp
   (matches the expanded wordmark's bar tinting). Cycling Tweaks → accent
   hue re-paints the ring live. */
body.is-sidebar-collapsed .sidebar__favicon.is-tinting::before {
  background:
    radial-gradient(circle at center, oklch(0.14 0.005 var(--accent-hue)) 0 60%, oklch(0.10 0.005 var(--accent-hue)) 62%, transparent 64% 100%),
    conic-gradient(
      from -16.36deg,
      oklch(0.34 0.13 var(--accent-hue)) 0 9.09%,
      oklch(0.42 0.16 var(--accent-hue)) 9.09% 18.18%,
      oklch(0.50 0.18 var(--accent-hue)) 18.18% 27.27%,
      oklch(0.58 0.18 var(--accent-hue)) 27.27% 36.36%,
      oklch(0.66 0.16 var(--accent-hue)) 36.36% 45.45%,
      oklch(0.74 0.14 var(--accent-hue)) 45.45% 54.54%,
      oklch(0.82 0.12 var(--accent-hue)) 54.54% 63.63%,
      oklch(0.74 0.14 var(--accent-hue)) 63.63% 72.72%,
      oklch(0.62 0.16 var(--accent-hue)) 72.72% 81.81%,
      oklch(0.50 0.18 var(--accent-hue)) 81.81% 90.90%,
      oklch(0.36 0.14 var(--accent-hue)) 90.90% 100%
    );
  transition: background 520ms ease;
}
body.is-sidebar-collapsed .sidebar__favicon[role="button"] { cursor: pointer; }
body.is-sidebar-collapsed .sidebar__favicon[role="button"]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
body.is-sidebar-collapsed .sidebar__favicon-glyph {
  position: relative; z-index: 1;
  display: grid; place-items: center;
  transform: translateX(1.25px);
}
body.is-sidebar-collapsed .sidebar__favicon-glyph .icon {
  width: 14px; height: 14px;
  color: #fff;
}
:root[data-theme="light"] body.is-sidebar-collapsed .sidebar__favicon::before {
  background:
    radial-gradient(circle at center, var(--bg) 0 62%, transparent 64% 100%),
    conic-gradient(
      from -16.36deg,
      #26418f 0 9.09%,
      #a61a64 9.09% 18.18%,
      #216bb0 18.18% 27.27%,
      #e76426 27.27% 36.36%,
      #694695 36.36% 45.45%,
      #297c3f 45.45% 54.54%,
      #ca282c 54.54% 63.63%,
      #3a4b53 63.63% 72.72%,
      #617986 72.72% 81.81%,
      #f3a42c 81.81% 90.90%,
      #111621 90.90% 100%
    );
}
:root[data-theme="light"] body.is-sidebar-collapsed .sidebar__favicon-glyph .icon { color: #1a0f06; }

/* =====================================================================
   ConsentModal — forensic-watermark consent + sealing-progress
   ===================================================================== */
.cmodal {
  position: fixed; inset: 0; z-index: 9999;
  display: grid; place-items: center;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  font-family: "Inter", sans-serif;
}
.cmodal__card {
  position: relative;
  width: 480px; max-width: calc(100vw - 32px);
  max-height: calc(100vh - 48px);
  overflow: hidden;
  background: var(--bg-2); color: var(--text);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 28px 28px 22px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.55);
}
.cmodal__verified {
  display: inline-flex; align-items: center; gap: 4px;
  height: 22px; padding: 0 9px;
  margin: 0 0 12px;
  border-radius: 999px;
  background: #FA3A05; color: #fff;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.02em;
  border: 0; cursor: pointer;
  box-shadow: 0 2px 8px rgba(250,58,5,0.35);
}
.cmodal__verified .icon { width: 10px; height: 10px; }
.cmodal__title {
  margin: 0 0 10px;
  font-size: 18px; font-weight: 700; line-height: 1.35;
  letter-spacing: -0.005em;
  text-wrap: pretty;
}
.cmodal__title--center { text-align: center; }
.cmodal__title-name { color: var(--accent); }
.cmodal__p {
  margin: 0 0 10px;
  font-size: 14px; line-height: 1.5;
  color: var(--text-dim);
}
.cmodal__p--label { color: var(--text); font-weight: 600; margin-top: 14px; margin-bottom: 8px; }
.cmodal__bullets {
  list-style: none; margin: 0 0 12px; padding: 0;
  display: flex; flex-direction: column; gap: 7px;
}
.cmodal__bullets li {
  display: grid; grid-template-columns: 16px 1fr; gap: 10px;
  font-size: 13.5px; line-height: 1.45;
  color: var(--text-dim);
}
.cmodal__bullets .icon {
  width: 12px; height: 12px;
  color: #FA3A05;
  margin-top: 4px;
}
.cmodal__close-line {
  margin: 12px 0 18px;
  padding: 12px 14px;
  font-size: 13px; line-height: 1.5;
  color: var(--text);
  background: rgba(250,58,5,0.06);
  border: 1px solid rgba(250,58,5,0.18);
  border-radius: 8px;
}
.cmodal__actions {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  margin: 0 0 12px;
}
.cmodal__btn {
  height: 38px; border-radius: 8px;
  font-size: 13.5px; font-weight: 600;
  cursor: pointer;
  transition: background 120ms, border-color 120ms, transform 80ms;
}
.cmodal__btn:active { transform: scale(0.98); }
.cmodal__btn--ghost {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--text);
}
.cmodal__btn--ghost:hover { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.18); }
.cmodal__btn--primary {
  background: #FA3A05; border: 1px solid #FA3A05;
  color: #fff;
}
.cmodal__btn--primary:hover { filter: brightness(1.06); }
.cmodal__remember {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; color: var(--text-mute);
  cursor: pointer; user-select: none;
}
.cmodal__remember input { width: 14px; height: 14px; accent-color: #FA3A05; }

/* Compute / progress */
.cmodal__ring-wrap {
  position: relative;
  width: 120px; height: 120px;
  margin: 18px auto 14px;
}
.cmodal__ring { transform: rotate(-90deg); }
.cmodal__ring-track {
  fill: none; stroke: rgba(255,255,255,0.08); stroke-width: 4;
}
.cmodal__ring-fill {
  fill: none; stroke: #FA3A05; stroke-width: 4; stroke-linecap: round;
  transition: stroke-dashoffset 600ms cubic-bezier(0.32, 0.72, 0.24, 1);
}
.cmodal__ring-fill.is-done { stroke: oklch(0.74 0.16 145); }
.cmodal__lock {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  color: #FA3A05;
  animation: cmodal-pulse 1800ms ease-in-out infinite;
}
.cmodal__lock.is-done { color: oklch(0.74 0.16 145); animation: none; }
.cmodal__lock .icon { width: 28px; height: 28px; }
@keyframes cmodal-pulse {
  0%, 100% { transform: scale(1); opacity: 0.85; }
  50%      { transform: scale(1.06); opacity: 1; }
}
.cmodal__stage {
  text-align: center;
  font-size: 14px; color: var(--text);
  margin: 0 0 6px;
  font-feature-settings: "tnum";
}
.cmodal__eta {
  text-align: center;
  font-size: 11.5px; color: var(--text-mute);
  font-family: "JetBrains Mono", monospace;
  margin: 0 0 14px;
}
.cmodal__steps {
  display: flex; gap: 6px; justify-content: center;
  margin: 0 0 4px;
}
.cmodal__step {
  width: 28px; height: 3px; border-radius: 2px;
  background: rgba(255,255,255,0.10);
  transition: background 200ms;
}
.cmodal__step.is-active { background: #FA3A05; }
.cmodal__step.is-done   { background: oklch(0.74 0.16 145); }
:root[data-theme="light"] .cmodal__ring-track { stroke: rgba(0,0,0,0.10); }
:root[data-theme="light"] .cmodal__step { background: rgba(0,0,0,0.10); }
:root[data-theme="light"] .cmodal__btn--ghost:hover { background: rgba(0,0,0,0.04); }
body.is-sidebar-collapsed .sidebar__logo { gap: 0; padding: 0; }
body.is-sidebar-collapsed .sidebar__logo-img,
body.is-sidebar-collapsed .sidebar__tier-pill,
body.is-sidebar-collapsed .sidebar__logo-badge,
body.is-sidebar-collapsed .navitem__label,
body.is-sidebar-collapsed .navitem__badge,
body.is-sidebar-collapsed .navitem__kbd,
body.is-sidebar-collapsed .sidebar__section,
body.is-sidebar-collapsed .sidebar__section > *,
.sidebar.sidebar--collapsed .sidebar__section,
.sidebar.sidebar--collapsed .sidebar__section > *,
body.is-sidebar-collapsed .sidebar__foot-counts { display: none !important; }
/* Collapsed: foot becomes a 76px-tall slab matching the player bar so the
/* Collapsed: foot becomes a slab matching the player bar height so the
   chev centers on the same horizontal axis as the play button. */
body.is-sidebar-collapsed .sidebar__foot {
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
  height: var(--player-h);
  flex: 0 0 var(--player-h);
}
body.is-sidebar-collapsed .sidebar { padding-left: 0; padding-right: 0; }
body.is-sidebar-collapsed .sidebar__nav { padding-right: 0; }
body.is-sidebar-collapsed .sidebar__collapse-chev { margin: 0 auto; }
body.is-sidebar-collapsed .sidebar__group { padding: 0; gap: 2px; align-items: center; }
body.is-sidebar-collapsed .sidebar__group--divider { padding-bottom: 8px; margin-bottom: 8px; }
body.is-sidebar-collapsed .sidebar__group--bottom { padding-top: 8px; }
body.is-sidebar-collapsed .navitem {
  justify-content: center; padding: 0; gap: 0;
  width: 40px; height: 40px;
  margin: 0 auto;
  border-radius: 8px;
}
/* Collapsed rail: hover = neutral light-up (white-ish on dark grey),
   active/selected = accent. Don't accent-tint hover; that made the whole
   rail feel teal and made it hard to tell what's actually selected. */
body.is-sidebar-collapsed .navitem { color: var(--text-dim); background: transparent; }
body.is-sidebar-collapsed .navitem .icon { color: var(--text-dim); }
body.is-sidebar-collapsed .navitem:not(.navitem--active):hover {
  color: var(--text); background: var(--bg-3);
}
body.is-sidebar-collapsed .navitem:not(.navitem--active):hover .icon { color: var(--text); }
body.is-sidebar-collapsed .navitem--active {
  background: transparent;
  box-shadow: none;
  color: var(--accent);
}
body.is-sidebar-collapsed .navitem--active .icon { color: var(--accent); }
body.is-sidebar-collapsed .sidebar__group + .sidebar__group {
  position: relative;
  margin-top: 10px;
  padding-top: 10px;
}
body.is-sidebar-collapsed .sidebar__group + .sidebar__group::before {
  content: "";
  position: absolute; top: 0; left: 12px; right: 12px;
  height: 1px; background: var(--line);
}
.sidebar__logo {
  display: inline-flex; align-items: center; gap: 6px;
  background: linear-gradient(180deg, #16161a, #0c0c0f);
  padding: 6px 10px; border-radius: 6px;
  border: 1px solid #20202a;
  font-weight: 800; letter-spacing: 0.06em;
}
.sidebar__logo-text { font-size: 13px; }
.sidebar__logo--img {
  background: none;
  border: none;
  margin-right: auto;
  padding: 4px 0;
  gap: 8px;
  min-width: 0;
  max-width: 100%;
  flex-wrap: nowrap; /* keep wordmark + pill on one line — never stack */
  cursor: pointer;
  --logo-hue-shift: 0deg;
  transform: translateY(-4px); /* nudge whole lockup up to align optical center with search bar */
}
.sidebar__logo--img.is-bar-hidden .sidebar__logo-bar {
  height: 0;
  margin-bottom: -3px; /* offset the column gap so the wordmark doesn't shift */
  opacity: 0;
  pointer-events: none;
}
.sidebar__logo-bar { transition: height 220ms ease, opacity 220ms ease, margin-bottom 220ms ease; }
.sidebar__logo--img:hover .sidebar__logo-img { filter: brightness(1.05); }

/* Wordmark stack: bar above, SESSION text below, in normal flow so toggling
   the bar's height animates the wordmark sliding up/down to re-center.
   width: fit-content keeps the bar tied to the wordmark image's width. */
.sidebar__wordmark {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 3px;
  flex: 0 0 auto;
  width: fit-content;
}
.sidebar__wordmark .sidebar__logo-bar {
  /* 6% narrower than the wordmark, centered, then nudged 2px left. */
  width: 94%;
  align-self: center;
  margin-left: -2px;
}
/* Generated color bar — 7 vertical stripes. Default is the multicolor
   rainbow; on .is-tinting each stripe morphs to the live accent hue,
   tinted across a luminance ramp so it still reads as a bar. */
.sidebar__logo-bar {
  display: flex;
  height: 3px;
  width: 100%;
  gap: 0;
  border-radius: 1px;
  overflow: hidden;
}
.sidebar__logo-bar > i {
  flex: 1 1 0;
  background: var(--c, #888);
  transition: background 520ms cubic-bezier(0.32, 0.72, 0.24, 1);
}
.sidebar__logo-bar > i:nth-child(1)  { --c: #0b3d90; } /* navy */
.sidebar__logo-bar > i:nth-child(2)  { --c: #af015a; } /* magenta */
.sidebar__logo-bar > i:nth-child(3)  { --c: #0165c9; } /* blue */
.sidebar__logo-bar > i:nth-child(4)  { --c: #d55d01; } /* orange */
.sidebar__logo-bar > i:nth-child(5)  { --c: #6a4b93; } /* purple */
.sidebar__logo-bar > i:nth-child(6)  { --c: #2d7d32; } /* green */
.sidebar__logo-bar > i:nth-child(7)  { --c: #c62828; } /* red */
.sidebar__logo-bar > i:nth-child(8)  { --c: #37464f; } /* slate */
.sidebar__logo-bar > i:nth-child(9)  { --c: #6593ad; } /* sky */
.sidebar__logo-bar > i:nth-child(10) { --c: #f9a922; } /* gold */
.sidebar__logo-bar > i:nth-child(11) { --c: #101826; } /* ink */
/* Tinted state: 11 stripes ramped across luminance + chroma at the live
   --accent-hue, so the bar still has rhythm but is single-hue. */
.sidebar__logo--img.is-tinting .sidebar__logo-bar > i:nth-child(1)  { --c: oklch(0.32 0.14 var(--accent-hue, 30)); }
.sidebar__logo--img.is-tinting .sidebar__logo-bar > i:nth-child(2)  { --c: oklch(0.46 0.18 var(--accent-hue, 30)); }
.sidebar__logo--img.is-tinting .sidebar__logo-bar > i:nth-child(3)  { --c: oklch(0.58 0.20 var(--accent-hue, 30)); }
.sidebar__logo--img.is-tinting .sidebar__logo-bar > i:nth-child(4)  { --c: oklch(0.68 0.20 var(--accent-hue, 30)); }
.sidebar__logo--img.is-tinting .sidebar__logo-bar > i:nth-child(5)  { --c: oklch(0.74 0.18 var(--accent-hue, 30)); }
.sidebar__logo--img.is-tinting .sidebar__logo-bar > i:nth-child(6)  { --c: oklch(0.80 0.16 var(--accent-hue, 30)); }
.sidebar__logo--img.is-tinting .sidebar__logo-bar > i:nth-child(7)  { --c: oklch(0.74 0.18 var(--accent-hue, 30)); }
.sidebar__logo--img.is-tinting .sidebar__logo-bar > i:nth-child(8)  { --c: oklch(0.68 0.20 var(--accent-hue, 30)); }
.sidebar__logo--img.is-tinting .sidebar__logo-bar > i:nth-child(9)  { --c: oklch(0.58 0.20 var(--accent-hue, 30)); }
.sidebar__logo--img.is-tinting .sidebar__logo-bar > i:nth-child(10) { --c: oklch(0.46 0.18 var(--accent-hue, 30)); }
.sidebar__logo--img.is-tinting .sidebar__logo-bar > i:nth-child(11) { --c: oklch(0.32 0.14 var(--accent-hue, 30)); }
/* Wordmark is sacred: NEVER skew, stretch, or compress. Lock it to its
   intrinsic aspect at a fixed height — width is whatever the natural ratio
   produces. If the brand row runs out of room, the pill (sized in chars)
   shrinks via flex-shrink first, and ultimately wraps to a new line. */
.sidebar__logo-img {
  height: 22px;
  width: auto;
  display: block;
  flex: 0 0 auto;
  object-fit: contain;
  object-position: left center;
}
/* Plain wordmark PNGs are both black-on-transparent; invert in dark theme
   so the SESSION text reads white on the dark rail. */
:root[data-theme="dark"] .sidebar__logo-img--dark,
:root:not([data-theme="light"]) .sidebar__logo-img--dark { filter: invert(1); }

/* Vault state — 4th cycle position. Hides the SESSION wordmark + bar and
   shows a colored ring + play triangle next to a "Session Vault" wordmark. */
.sidebar__vault-mark { display: none; height: 30px; width: auto; color: #0c0c10; }
.sidebar__vault-text { fill: #0c0c10; font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif; }
:root[data-theme="dark"] .sidebar__vault-mark,
:root:not([data-theme="light"]) .sidebar__vault-mark { color: #ffffff; }
:root[data-theme="dark"] .sidebar__vault-text,
:root:not([data-theme="light"]) .sidebar__vault-text { fill: #ffffff; }
/* Collapsed: hide the vault SVG entirely — the rail already shows the
   .sidebar__favicon mark (a 28px conic ring + play glyph), which is the
   collapsed-rail equivalent of the wordmark's vault ring. Showing both
   stacks two rings at the top of the rail. */
body.is-sidebar-collapsed .sidebar__vault-mark { display: none !important; }
body.is-sidebar-collapsed .sidebar__vault-text { display: none; }
.sidebar__logo--img.is-vault .sidebar__logo-bar,
.sidebar__logo--img.is-vault .sidebar__logo-img { display: none; }
.sidebar__logo--img.is-vault .sidebar__vault-mark { display: block; }
.sidebar__tier-pill {
  flex: 0 1 auto;
  min-width: 0;
  white-space: nowrap;
}
.sidebar__logo-badge {
  font-size: 9px; padding: 2px 6px; border-radius: 4px;
  background: var(--accent); color: #1a0e02; font-weight: 900;
}
.sidebar__section {
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--text-mute);
  padding: 14px 10px 6px;
  text-align: left;
}
.navitem {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 10px;
  border-radius: 6px;
  color: var(--text-dim);
  font-size: 13px;
  position: relative;
  transition: background 120ms ease, color 120ms ease;
  width: 100%;
  border: 0;
  background: transparent;
  font: inherit;
  text-align: left;
  text-decoration: none;
}
.navitem:hover { color: var(--text); background: var(--bg-3); }
.navitem--active {
  background: linear-gradient(90deg, oklch(0.4 0.12 var(--accent-hue) / 0.45), oklch(0.4 0.12 var(--accent-hue) / 0.15));
  color: oklch(0.86 0.05 var(--accent-hue));
  box-shadow: inset 2px 0 0 var(--accent);
}
.navitem__label { flex: 1; text-align: left; }
.navitem__badge {
  font-size: 10px;
  min-width: 18px;
  height: 16px;
  padding: 0 6px;
  border-radius: 999px;
  background: oklch(0.7 0.16 var(--accent-hue));
  color: #1a0e02;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.navitem__badge--accent {
  background: oklch(0.66 0.20 var(--accent-hue));
  color: #0a0a0a;
  min-width: 18px; height: 18px; padding: 0 5px;
  display: inline-grid; place-items: center;
  box-shadow: 0 0 0 1px oklch(0.66 0.20 var(--accent-hue) / 0.4), 0 0 12px oklch(0.7 0.22 var(--accent-hue) / 0.5);
}
.navitem__kbd {
  font-size: 10px; padding: 2px 6px; border-radius: 4px;
  background: var(--bg-3); color: var(--text-mute);
  font-family: "JetBrains Mono", monospace;
}

/* ---- Tier-gated sidebar sections ---- */
.sidebar__group--gated .navitem,
.navitem--gated {
  opacity: 0.4;
  cursor: not-allowed;
}
.sidebar__group--gated .navitem:hover {
  background: transparent;
}
.navitem__lock {
  display: inline-grid; place-items: center;
  width: 14px; height: 14px;
  opacity: 0.7;
  margin-left: auto;
}
.navitem__lock svg { width: 12px; height: 12px; }
.sidebar__section-pill {
  margin-left: 6px;
  padding: 1px 5px;
  font-size: 9px; font-weight: 700; letter-spacing: 0.06em;
  border-radius: 3px;
  vertical-align: middle;
}

/* ---------- topbar ---------- */
.glass {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.015)),
    rgba(20, 20, 24, 0.62);
  backdrop-filter: blur(24px) saturate(1.4);
  -webkit-backdrop-filter: blur(24px) saturate(1.4);
  border: 1px solid rgba(255,255,255,0.06);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.06),
    0 10px 40px rgba(0,0,0,0.35);
}
.topbar {
  height: var(--topbar-h);
  display: flex; align-items: center; gap: 14px;
  padding: 0 18px;
  border-bottom: 1px solid var(--line);
}
.topbar__search {
  flex: 1; max-width: 560px;
  display: flex; align-items: center; gap: 8px;
  background: var(--bg-2);
  border: 1px solid var(--line-strong);
  border-radius: 7px;
  padding: 4px 10px;
  height: 28px;
  color: var(--text-mute);
  font-size: 13px;
}
.topbar__search input { font-size: 13px; height: 20px; line-height: 20px; }
.topbar__search .icon { width: 14px; height: 14px; }
.topbar__search input { color: var(--text); }
.topbar__search input::placeholder { color: var(--text-mute); }
.topbar__kbd {
  font-size: 11px; padding: 2px 6px; border-radius: 4px;
  background: var(--bg-3); color: var(--text-mute);
  border: 1px solid var(--line-strong);
}
.topbar__actions { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.iconbtn {
  width: 32px; height: 32px; border-radius: 8px;
  display: grid; place-items: center;
  color: var(--text-dim);
  transition: background 120ms;
}
.iconbtn:hover { background: var(--bg-3); color: var(--text); }
.iconbtn.is-on {
  color: var(--accent);
  background: transparent;
  box-shadow: none;
}
.iconbtn.is-on:hover {
  background: var(--bg-3);
  color: var(--accent);
}
.iconbtn.is-on .iconbtn__badge {
  background: var(--accent);
  color: #000;
}
.iconbtn { position: relative; }
.iconbtn__badge {
  position: absolute;
  right: -2px;
  bottom: -2px;
  min-width: 12px;
  height: 12px;
  padding: 0 3px;
  border-radius: 6px;
  font-size: 9px;
  font-weight: 600;
  line-height: 12px;
  text-align: center;
  background: var(--bg-3);
  color: var(--text);
}
.avatar {
  width: 28px; height: 28px; border-radius: 50%;
  background: linear-gradient(135deg, #b88d6a, #4a2e1d);
  border: 1px solid var(--line-strong);
}

/* ---------- filter chips ---------- */
.filterbar {
  height: var(--filter-h);
  display: flex; align-items: center; gap: 8px;
  padding: 0 18px;
  border-bottom: 1px solid var(--line);
}
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px;
  border-radius: 6px;
  font-size: 12px;
  color: var(--text-dim);
  background: transparent;
  border: 1px solid transparent;
  position: relative;
}
.chip:hover { background: var(--bg-3); color: var(--text); }
.chip--active {
  background: var(--bg-3);
  color: var(--text);
  border-color: var(--line-strong);
}
.chip--glow {
  border-color: oklch(0.74 0.14 var(--accent-hue) / 0.45);
  background:
    linear-gradient(90deg, oklch(0.74 0.14 var(--accent-hue) / 0.10), oklch(0.74 0.14 var(--accent-hue) / 0.04));
  color: oklch(0.85 0.08 var(--accent-hue));
  box-shadow: 0 0 0 1px oklch(0.74 0.14 var(--accent-hue) / 0.10);
}
.chip__dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent);
  animation: chip-pulse 1.6s ease-in-out infinite;
}
.chip__kbd {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 16px; height: 16px; padding: 0 4px;
  margin-left: 2px;
  border-radius: 3px;
  font-size: 11px; line-height: 1; font-weight: 500;
  font-family: -apple-system, "SF Pro Text", system-ui, sans-serif;
  color: var(--text-dim);
  background: oklch(0.30 0.02 240 / 0.55);
  border: 1px solid var(--line);
  box-shadow: 0 1px 0 oklch(0 0 0 / 0.25);
}
.chip--glow .chip__kbd {
  color: oklch(0.85 0.08 var(--accent-hue));
  border-color: oklch(0.74 0.14 var(--accent-hue) / 0.35);
  background: oklch(0.74 0.14 var(--accent-hue) / 0.12);
}
:root[data-theme="light"] .chip__kbd {
  color: var(--text-dim);
  background: oklch(0.96 0.01 240);
  border-color: oklch(0.84 0.02 240);
  box-shadow: 0 1px 0 oklch(0.88 0.02 240);
}
@keyframes chip-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.4; transform: scale(0.7); }
}
/* Gated chip — feature locked behind a paywall. Muted, lock icon, click → paywall. */
.chip--gated {
  color: var(--muted);
  border-style: dashed;
  border-color: oklch(from var(--line-strong) l c h / 0.7);
  background: transparent;
  cursor: pointer;
}
.chip--gated:hover {
  color: var(--text);
  border-color: oklch(0.74 0.14 var(--accent-hue) / 0.5);
  background: oklch(0.74 0.14 var(--accent-hue) / 0.05);
}
.chip--gated svg { opacity: 0.7; }
.chip--gated:hover svg { opacity: 1; }

/* ---------- table ---------- */
.table-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
.table {
  min-width: 100%;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}
.thead, .row {
  display: flex; align-items: center;
  padding: 0 18px;
  gap: 0;
}
.thead {
  /* Reserve the same scrollbar gutter as .tbody so column right-edges align
     between header and rows. Previous fixed `padding-right: 30px` over-shifted
     headers ~15px left of body content because the body's actual scrollbar
     gutter (with scrollbar-width: thin) is much narrower than 30px. */
  overflow-y: scroll;
  overflow-x: hidden;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
  height: 44px;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-mute);
  border-bottom: 1px solid var(--line);
  background: var(--bg);
  flex-shrink: 0;
  z-index: 6;
}
.th { padding: 0 12px; flex-shrink: 0; }
.th--sortable { cursor: pointer; user-select: none; transition: color 120ms; }
.th--sortable:hover { color: var(--text); }
.th--draggable { cursor: grab; }
.th--draggable:active { cursor: grabbing; }
.th--draggable.is-dragging { opacity: 0.62; }
.th--drop { background: color-mix(in oklch, var(--accent) 8%, transparent); }
.th--dropbefore { box-shadow: inset 2px 0 0 0 var(--accent); }
.th--dropafter { box-shadow: inset -2px 0 0 0 var(--accent); }
.th--sorted { color: var(--text); }
.th__sort { display: inline-flex; flex-direction: column; gap: 0; margin-left: 6px; vertical-align: middle; }
.th__sort-arrow { font-size: 8px; line-height: 1; opacity: 0.35; transition: opacity 120ms, color 120ms; }
.th__sort-arrow.is-on { opacity: 1; color: var(--accent); }
.th--grow { flex: 1; min-width: 280px; }
/* "right" is a historical name — both header label and cell content are
   centered so the column TITLE sits visually above the column CONTENT
   regardless of the sort-arrow chevron sitting to its right. */
/* Chevron is absolutely-positioned to the right edge so the LABEL itself
   sits at true cell-center — matching the centered cell value below it.
   When the chevron participates in flex centering, it shifts the visual
   group right and the label drifts left of the column's true center.
   Sort chevron sits at right: 12px so the column-resize handle (right: 0,
   6px wide) hovers cleanly to its right without overlap. */
.th--left { text-align: left; justify-content: flex-start; display: flex; position: relative; }
.th--left .th__sort { margin-left: 6px; }
.th--right { text-align: left; justify-content: flex-start; display: flex; position: relative; }
.th--right .th__sort { margin-left: 6px; }
.th--num { text-align: left; justify-content: flex-start; display: flex; position: relative; font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }
.th--num .th__sort { margin-left: 6px; }
.th--center { text-align: center; justify-content: center; display: flex; position: relative; }
.th--center .th__sort { margin-left: 6px; }
/* Finder-style column resize handle. Sits flush on the right edge of any
   fixed-width header. Wide-enough hit area (8px) but only the inner 1px
   accent line is visible. Cursor flips to col-resize on hover. */
.th { position: relative; }
.th__resize {
  position: absolute;
  top: 8px;
  bottom: 8px;
  right: -4px;            /* straddle the column boundary so it covers either side */
  width: 8px;
  cursor: col-resize;
  z-index: 7;
  display: flex;
  justify-content: center;
  align-items: stretch;
}
.th__resize::before {
  content: "";
  width: 1px;
  background: var(--border);
  opacity: 0;
  transition: opacity 100ms, background 100ms;
}
.thead:hover .th__resize::before,
.th:hover .th__resize::before { opacity: 0.6; }
.th__resize:hover::before,
.th__resize:active::before { opacity: 1; background: var(--accent); width: 2px; }
.th-menu {
  position: fixed;
  z-index: 12000;
  width: 220px;
  padding: 7px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.12);
  background: color-mix(in oklch, var(--bg-2) 88%, transparent);
  color: var(--text);
  box-shadow: 0 18px 44px rgba(0,0,0,0.38), inset 0 1px 0 rgba(255,255,255,0.05);
  backdrop-filter: blur(22px) saturate(1.3);
  -webkit-backdrop-filter: blur(22px) saturate(1.3);
}
.th-menu__title {
  padding: 5px 7px 7px;
  color: var(--text-mute);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.th-menu__item {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  min-height: 34px;
  padding: 8px 9px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--text);
  text-align: left;
  font: inherit;
  cursor: pointer;
}
.th-menu__item:hover {
  background: color-mix(in oklch, var(--accent) 12%, transparent);
}
.th-menu__item:disabled {
  cursor: not-allowed;
  opacity: 0.42;
}
.th-menu__item:disabled:hover {
  background: transparent;
}
.th-menu__item .icon {
  width: 15px;
  height: 15px;
  color: var(--text-mute);
  flex-shrink: 0;
}
.th-menu__glyph {
  display: inline-grid;
  place-items: center;
  width: 15px;
  height: 15px;
  color: var(--text-mute);
  font-size: 14px;
  line-height: 1;
  flex-shrink: 0;
}
.th-menu__editor {
  display: grid;
  gap: 8px;
  padding: 2px 1px 1px;
}
.th-menu__field {
  display: grid;
  gap: 4px;
  color: var(--text-mute);
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.th-menu__field input,
.th-menu__field select {
  width: 100%;
  min-height: 32px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 6px;
  background: color-mix(in oklch, var(--bg) 82%, transparent);
  color: var(--text);
  font: inherit;
  font-size: 12px;
  letter-spacing: 0;
  text-transform: none;
  padding: 7px 8px;
}
.th-menu__field input:focus,
.th-menu__field select:focus {
  outline: 1px solid color-mix(in oklch, var(--accent) 55%, transparent);
  outline-offset: 1px;
}
.th-menu__actions {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  padding-top: 2px;
}
.th-menu__mini {
  min-height: 30px;
  padding: 6px 10px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 6px;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  font: inherit;
  font-size: 12px;
}
.th-menu__mini--primary {
  border-color: transparent;
  background: var(--accent);
  color: #050505;
}
:root[data-theme="light"] .th-menu {
  border-color: rgba(0,0,0,0.1);
  background: rgba(255,255,255,0.9);
  box-shadow: 0 18px 44px rgba(26,24,20,0.14), inset 0 1px 0 rgba(255,255,255,0.75);
}
:root[data-theme="light"] .th-menu__field input,
:root[data-theme="light"] .th-menu__field select,
:root[data-theme="light"] .th-menu__mini {
  border-color: rgba(0,0,0,0.12);
}
/* End column (placeholder for the per-row pencil button). MUST share width,
   padding AND order with .cell--end so header column boxes align with row
   cell boxes. Without `order: 9999` the th--end sits at its DOM position
   (between Star and Title), shifting every subsequent header column 32px
   right of its corresponding row cell. */
.th--end {
  width: 36px;
  padding: 0 4px;
  background: transparent;
  box-shadow: none;
}
.th__sort { color: var(--text-mute); opacity: 0.6; margin-left: 4px; font-size: 9px; }

.tbody { transition: filter 200ms ease; }
.tbody--dimming .row:not(.row--hover) {
  opacity: 0.72;
  filter: saturate(0.9);
}

.row {
  height: var(--row-h);
  border-bottom: 1px solid var(--line);
  position: relative;
  transition: opacity 200ms ease, filter 200ms ease, background 220ms ease;
  isolation: isolate;
  contain: layout paint style;
  overflow: hidden;
}
/* Cells with explicit widths shouldn't shrink — they push the row wide and
   trigger horizontal scroll only when their summed widths exceed viewport.
   Title (.cell--title.th--grow) stays as flex:1 so it absorbs slack at default
   widths (no scroll possible) and only the LAST grow column gives way. */
.cell:not(.cell--grow):not(.cell--title), .th:not(.th--grow):not(.th--title) {
  flex-shrink: 0;
}
.tbody {
  flex: 1;
  overflow-y: auto;
  overflow-x: auto;
  min-height: 0;
  scroll-behavior: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
  scrollbar-gutter: stable;
  transition: scrollbar-color 220ms ease, filter 200ms ease;
  overscroll-behavior: contain;
}
.tbody::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}
.tbody::-webkit-scrollbar-track {
  background: transparent;
  margin: 4px 0;
}
.tbody::-webkit-scrollbar-thumb {
  background: transparent;
  border: 4px solid transparent;
  background-clip: padding-box;
  border-radius: 999px;
  transition: background 220ms ease;
}
.table-wrap:hover .tbody {
  scrollbar-color: oklch(0.55 0.04 var(--accent-hue) / 0.55) transparent;
}
.table-wrap:hover .tbody::-webkit-scrollbar-thumb {
  background: oklch(0.65 0.05 var(--accent-hue) / 0.45);
  background-clip: padding-box;
  box-shadow: inset 0 0 0 0.5px oklch(1 0 0 / 0.06);
}
.table-wrap:hover .tbody::-webkit-scrollbar-thumb:hover {
  background: oklch(0.74 0.10 var(--accent-hue) / 0.75);
  background-clip: padding-box;
}
.table-wrap:hover .tbody::-webkit-scrollbar-thumb:active {
  background: var(--accent);
  background-clip: padding-box;
}
:root[data-theme="light"] .table-wrap:hover .tbody {
  scrollbar-color: oklch(0.45 0.04 var(--accent-hue) / 0.40) transparent;
}
:root[data-theme="light"] .table-wrap:hover .tbody::-webkit-scrollbar-thumb {
  background: oklch(0.45 0.04 var(--accent-hue) / 0.30);
  background-clip: padding-box;
  box-shadow: inset 0 0 0 0.5px oklch(0 0 0 / 0.04);
}
:root[data-theme="light"] .table-wrap:hover .tbody::-webkit-scrollbar-thumb:hover {
  background: oklch(0.40 0.08 var(--accent-hue) / 0.55);
  background-clip: padding-box;
}
:root[data-theme="light"] .table-wrap:hover .tbody::-webkit-scrollbar-thumb:active {
  background: var(--accent);
  background-clip: padding-box;
}
.cell {
  padding: 0 12px;
  display: flex; align-items: center;
  flex-shrink: 0;
  font-size: 13px;
  color: var(--text-dim);
  position: relative;
  z-index: 1;
}
.cell--title {
  flex: 1; min-width: 280px;
  gap: 12px;
  color: var(--text);
  position: relative;
  /* 2026-05-12 Tommy: keep extra title breathing room so hover-preview
     waveform stays inside the title cell instead of crowding the next column. */
  padding-right: 48px;
}
.cell--right { justify-content: flex-start; text-align: left; }
.cell--num { justify-content: flex-start; text-align: left; font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }
.cell--center { justify-content: center; text-align: center; }
.cell--mono { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }
.tbody .row .cell[data-col]:not([data-col="star"]):not([data-col="num"]) {
  padding-left: 16px;
}
/* Format-group chips on parent rows ("WAV +2") and variant chips on children. */
.fmt-chips { display: inline-flex; align-items: center; gap: 4px; }
.fmt-chip {
  display: inline-flex; align-items: center; justify-content: center;
  height: 18px; padding: 0 6px; border-radius: 4px;
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.04em;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  background: color-mix(in oklab, var(--accent, #FA3A05) 16%, transparent);
  color: color-mix(in oklab, var(--accent, #FA3A05) 90%, white 10%);
  border: 1px solid color-mix(in oklab, var(--accent, #FA3A05) 32%, transparent);
}
.fmt-chip--more {
  background: color-mix(in oklab, currentColor 8%, transparent);
  color: var(--text-muted, #8a8a93);
  border-color: color-mix(in oklab, currentColor 20%, transparent);
  padding: 0 5px;
}
.fmt-chip--variant {
  background: transparent;
  color: var(--text-muted, #8a8a93);
  border-color: color-mix(in oklab, currentColor 22%, transparent);
}
/* End cell (pencil) MUST sit after every column. Without an explicit order
   it defaulted to 0 and sometimes interleaved between title and duration
   when other cells had orderMap-driven non-zero orders — which both broke
   column alignment AND squeezed the waveform space inside cell--title. */
/* Pencil sits inline immediately after Title; no longer sticky-right (which
   was painting a black slab on top of the rightmost data column when columns
   overflowed). Order is set by JS via orderMap.__end so it lands right after
   Title in flex order. */
.cell--end {
  width: 36px;
  padding: 0 4px;
  justify-content: flex-start;
  background: transparent;
  box-shadow: none;
}
.cell__edit {
  width: 22px; height: 22px; border-radius: 4px;
  display: inline-grid; place-items: center;
  color: var(--text-mute);
  margin-left: 8px;
  opacity: 0;
  transition: opacity 120ms;
}
.row:hover .cell__edit, .row--hover .cell__edit { opacity: 1; }
.cell__edit { background: transparent !important; transition: color 120ms ease; }
.cell__edit:hover { background: transparent !important; color: var(--accent); }
.cell__edit:active,
.cell__edit.is-active { color: #ffffff; }
.cell-credit {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
}
.cell-credit.is-expanded {
  overflow: visible;
  z-index: 8;
}
.cell-credit__text,
.cell-credit__chip {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cell-credit__chip {
  flex: 0 1 auto;
  max-width: 100%;
}
.cell-credit__sep {
  color: var(--text-dim);
  flex: 0 0 auto;
  opacity: 0.72;
}
.cell-credit.is-expanded .cell-credit__chip {
  /* v0.2.0.505 (Tommy 2026-05-16 01:45 PT): bump from 140px → 220px so
     full producer/writer names fit on most rows before ellipsis. */
  flex: 0 0 auto;
  max-width: 220px;
}
.cell-credit__more {
  position: relative;
  height: 18px;
  min-width: 24px;
  padding: 0 6px;
  border: 1px solid color-mix(in oklch, var(--accent) 35%, transparent);
  border-radius: 999px;
  background: color-mix(in oklch, var(--accent) 15%, transparent);
  color: var(--accent);
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
}
.cell-credit__more--collapse {
  min-width: 18px;
  padding: 0 5px;
}
.cell-credit__more::after {
  content: attr(data-full);
  position: absolute;
  right: 0;
  bottom: calc(100% + 8px);
  width: max-content;
  max-width: 260px;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(12,12,14,0.96);
  color: var(--text);
  box-shadow: 0 16px 40px rgba(0,0,0,0.35);
  white-space: normal;
  text-align: left;
  opacity: 0;
  transform: translateY(4px);
  pointer-events: none;
  transition: opacity 120ms ease, transform 120ms ease;
  z-index: 30;
}
.cell-credit__more:hover::after,
.cell-credit__more:focus::after {
  opacity: 1;
  transform: translateY(0);
}
.cell-credit__more--collapse::after {
  display: none;
}

.row__lead {
  width: 22px; height: 22px;
  display: inline-grid; place-items: center;
  margin-left: 4px;
  flex: 0 0 22px;
}
.row__nested-btn {
  width: 22px;
  height: 22px;
  display: inline-grid;
  place-items: center;
  flex: 0 0 22px;
  margin-left: 2px;
  margin-right: -4px;
  padding: 0;
  color: var(--text-mute);
  background: transparent;
  border: 0;
  opacity: 0.55;
  transition: color 120ms ease, opacity 120ms ease;
}
.row__nested-btn .icon {
  width: 14px;
  height: 14px;
}
.row__nested-btn:hover {
  color: var(--accent);
  opacity: 1;
}
.row__nested-btn--inline {
  margin-left: 4px;
  margin-right: 0;
}
.cell--star { display: inline-flex; align-items: center; justify-content: center; }
.row__star {
  width: 22px; height: 22px; padding: 0;
  display: inline-grid; place-items: center;
  color: var(--text-mute); opacity: 0.45; transition: opacity 120ms, color 120ms;
  background: transparent; border: 0; cursor: pointer; flex-shrink: 0;
}
.row:hover .row__star { opacity: 1; }
.row__star:hover { color: var(--text); }
.row__star--on { color: var(--accent) !important; opacity: 1 !important; }
.row__star--on .icon { fill: currentColor; }

/* Mobile safety net for the desktop row renderer. If mobile-shell fails before
   applying body.is-mobile, iPhone still sees the desktop table. Keep the star
   and title vertically centered in that fallback state. */
@media (max-width: 767px) {
  body:not(.is-mobile) .tbody .row .cell--star,
  body:not(.is-mobile) .tbody .row .cell--title {
    align-self: stretch;
    min-height: var(--row-h);
    display: flex !important;
    align-items: center !important;
  }
  body:not(.is-mobile) .tbody .row .cell--star {
    justify-content: center !important;
  }
  body:not(.is-mobile) .tbody .row .cell--title {
    justify-content: flex-start !important;
  }
  body:not(.is-mobile) .tbody .row .cell--title .row__title {
    line-height: 1.2;
  }
}

/* Format badges (Atmos / Stereo) — only shown when the user's library
   contains at least one Atmos asset, so stereo-only users don't see noise. */
.fmt-badge {
  display: inline-flex;
  align-items: center;
  height: 18px;
  padding: 0 7px;
  border-radius: 4px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  font-family: 'Geist Mono', ui-monospace, monospace;
  text-transform: uppercase;
  margin-left: 10px;
  flex-shrink: 0;
  vertical-align: middle;
}
.fmt-badge--atmos {
  color: oklch(0.86 0.16 295);
  background: color-mix(in srgb, oklch(0.55 0.22 295) 16%, transparent);
  border: 1px solid color-mix(in srgb, oklch(0.55 0.22 295) 38%, transparent);
  box-shadow: 0 0 14px -4px oklch(0.55 0.22 295 / 0.5);
}
.fmt-badge--stereo {
  color: var(--text-muted);
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  letter-spacing: 0.06em;
}
/* Default starred-row indicator: accent rail down the left edge.
   Renders for any .row that contains a starred .row__star--on. */
.row { position: relative; }
.row:has(.row__star--on)::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  bottom: 6px;
  width: 3px;
  border-radius: 0 2px 2px 0;
  background: var(--accent);
  box-shadow: 0 0 12px -2px color-mix(in srgb, var(--accent) 65%, transparent);
  pointer-events: none;
}
  color: var(--text-mute);
  flex-shrink: 0;
  position: relative;
}
.row__num { color: var(--text-mute); font-family: "JetBrains Mono", monospace; font-size: 12px; }
.row__title {
  color: var(--text);
  font-weight: 500;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 0 1 auto;
}
body:not(.is-mobile) .row__mobile-artist { display: none !important; }
body:not(.is-mobile) .row--previewing .cell--title {
  min-width: clamp(620px, 52vw, 920px);
}
body:not(.is-mobile) .row--previewing .row__title {
  flex: 0 1 clamp(96px, 20%, 280px);
}
.row--previewing .row__chip,
.row--previewing .fmt-badge,
.row--previewing .row__nested-btn {
  flex: 0 0 auto;
}
.row__chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 8px;
  border-radius: 4px;
  background: oklch(0.55 0.18 260 / 0.32);
  border: 1px solid oklch(0.7 0.16 255 / 0.45);
  color: oklch(0.96 0.06 250);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.01em;
  margin-left: 6px;
  margin-right: 4px;
  flex-shrink: 0;
}
.row__chip .icon { color: oklch(0.96 0.06 250); }
:root[data-theme="light"] .row__chip {
  background: oklch(0.92 0.06 255);
  border-color: oklch(0.62 0.14 255 / 0.55);
  color: oklch(0.34 0.14 255);
}
:root[data-theme="light"] .row__chip .icon { color: oklch(0.34 0.14 255); }

.tbody-empty {
  padding: 60px 24px; text-align: center;
  color: var(--text-mute); font-size: 13px;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.tbody-empty .icon { width: 28px; height: 28px; color: var(--text-mute); }

/* v0.2.0.85: empty-library import affordance. Tap on mobile opens audio
   file picker (Files / iCloud Drive / Music app). Desktop click opens the
   upload modal which supports both file picker and drag-drop. */
.tbody-empty--import {
  padding: 80px 24px;
  gap: 14px;
}
.tbody-empty--import .icon { width: 36px; height: 36px; opacity: 0.7; }
.tbody-empty__cta {
  margin-top: 4px;
  padding: 11px 22px;
  background: var(--text);
  color: var(--bg);
  border: 0;
  border-radius: 99px;
  font-family: inherit;
  font-size: 13px; font-weight: 600;
  cursor: pointer;
  transition: opacity 0.18s ease, transform 0.12s ease;
}
.tbody-empty__cta:hover { opacity: 0.88; }
.tbody-empty__cta:active { transform: scale(0.97); }
.tbody-empty__hint {
  font-size: 11.5px;
  color: var(--text-mute);
  opacity: 0.75;
}
.tbody-empty__sub {
  font-size: 12px;
  color: var(--text-mute);
  opacity: 0.82;
}
.tbody-empty__links {
  margin-top: 16px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}
.tbody-empty__migrate {
  font-size: 12.5px;
  color: var(--text-mute);
  text-decoration: none;
  padding: 8px 14px;
  border-radius: 99px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.02);
  transition: color 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}
.tbody-empty__migrate:hover {
  color: var(--text);
  border-color: rgba(255,255,255,0.22);
  background: rgba(255,255,255,0.05);
}
@media (max-width: 767px) {
  .tbody-empty--import { padding: 56px 16px; }
  .tbody-empty__hint { display: none; }
  .tbody-empty__cta { padding: 13px 26px; font-size: 14px; }
  .tbody-empty__links { flex-direction: column; align-items: stretch; width: min(100%, 320px); }
  .tbody-empty__migrate { text-align: center; }
}

/* Cold-start skeletons (hard refresh / first load).
   These make the library feel populated instantly while the E2EE data bridge,
   manifest fetch, and head pre-buffering finish in the background. */
.tbody-skeletons {
  padding-top: 2px;
}
.row--skeleton {
  height: var(--row-h);
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  padding: 0 18px;
  gap: 0;
  opacity: 0.6;
}
.row--skeleton .cell {
  padding: 0 8px;
  height: 100%;
  display: flex;
  align-items: center;
}
.row--skeleton .skel {
  height: 14px;
  border-radius: 3px;
  background: linear-gradient(90deg, #222 25%, #2a2a2e 50%, #222 75%);
  background-size: 200% 100%;
  animation: skel-shimmer 1.4s ease-in-out infinite;
}
.row--skeleton .skel--title { width: 42%; min-width: 120px; }
.row--skeleton .skel--text  { width: 68%; max-width: 160px; }
@keyframes skel-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .row--skeleton .skel { animation: none; background: #242428; }
}

/* Search overlay (⌘K) */
.search-overlay {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(8, 8, 10, 0.62);
  backdrop-filter: blur(6px);
  display: flex; justify-content: center; align-items: flex-start;
  padding-top: 12vh;
  animation: search-fade 140ms ease;
}
@keyframes search-fade { from { opacity: 0; } to { opacity: 1; } }
.search-modal {
  width: min(720px, 92vw);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.015)),
    rgba(20, 20, 24, 0.72);
  backdrop-filter: blur(28px) saturate(1.4);
  -webkit-backdrop-filter: blur(28px) saturate(1.4);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  box-shadow:
    0 24px 60px rgba(0,0,0,0.55),
    inset 0 1px 0 rgba(255,255,255,0.06);
  overflow: hidden;
  display: flex; flex-direction: column;
  max-height: 70vh;
  animation: search-pop 160ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
@keyframes search-pop {
  from { transform: translateY(-8px) scale(0.98); opacity: 0; }
  to   { transform: translateY(0)    scale(1);    opacity: 1; }
}
.search-modal__head {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
}
.search-modal__head .icon { color: var(--text-mute); width: 18px; height: 18px; }
.search-modal__head input {
  flex: 1; background: transparent; border: 0; outline: 0;
  color: var(--text); font-size: 16px; font-family: "Inter", sans-serif;
}
.search-modal__head input::placeholder { color: var(--text-mute); }
.search-modal__esc {
  font-family: "JetBrains Mono", monospace; font-size: 10px;
  padding: 3px 7px; border-radius: 4px;
  background: var(--bg-3); color: var(--text-mute);
  border: 1px solid var(--line-strong);
}
.search-modal__meta {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 16px;
  font-family: "JetBrains Mono", monospace; font-size: 10.5px;
  color: var(--text-mute);
  border-bottom: 1px solid var(--line);
  letter-spacing: 0.04em;
}
.search-modal__hint { opacity: 0.7; }
.search-modal__list {
  overflow-y: auto;
  padding: 4px;
  flex: 1;
}
.search-modal__empty {
  padding: 40px 16px;
  text-align: center;
  color: var(--text-mute);
  font-size: 13px;
}
.search-row {
  display: grid;
  grid-template-columns: 36px 1fr auto 70px 40px 50px;
  gap: 12px; align-items: center;
  width: 100%;
  padding: 8px 12px;
  background: transparent; border: 0; border-radius: 6px;
  text-align: left; cursor: pointer;
  font-size: 13px; color: var(--text);
}
.search-row.is-active { background: var(--bg-3); }
.search-row__num { font-family: "JetBrains Mono", monospace; font-size: 11px; color: var(--text-mute); }
.search-row__title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.search-row__bpm,
.search-row__key,
.search-row__dur {
  font-family: "JetBrains Mono", monospace; font-size: 11px;
  color: var(--text-mute); text-align: right;
}

:root[data-theme="light"] .search-overlay { background: rgba(0,0,0,0.18); }
:root[data-theme="light"] .search-modal {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.65), rgba(255,255,255,0.45)),
    var(--bg-2);
  border-color: var(--line-strong);
}
:root[data-theme="light"] .search-row.is-active { background: var(--bg-3); }

.row--hover { z-index: 3; }
/* Floating batch-action bar for multi-select. */
.batchbar {
  position: fixed; left: 50%; bottom: 96px; transform: translateX(-50%);
  z-index: 80;
  display: flex; align-items: center; gap: 18px;
  padding: 10px 14px 10px 18px;
  background: oklch(0.18 0.01 280 / 0.92);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid color-mix(in oklch, var(--accent) 35%, transparent);
  border-radius: 999px;
  box-shadow: 0 16px 48px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.04) inset;
  color: var(--text);
  animation: batchbar-in 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes batchbar-in {
  from { opacity: 0; transform: translate(-50%, 8px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}
.batchbar__count {
  font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--text-muted);
}
.batchbar__count strong { color: var(--accent); font-weight: 600; }
.batchbar__sep { margin: 0 6px; opacity: 0.5; }
.batchbar__dur { color: var(--text-muted); }
.batchbar__actions { display: flex; gap: 4px; }
.batchbar__btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 11px;
  background: transparent; border: 0; border-radius: 8px;
  color: var(--text); font: inherit; font-size: 12.5px;
  cursor: pointer; transition: background 120ms ease, color 120ms ease;
}
.batchbar__btn:hover { background: var(--bg-3); color: var(--accent); }
.batchbar__btn svg { width: 14px; height: 14px; }
.batchbar__close {
  width: 28px; height: 28px; border-radius: 50%;
  background: transparent; border: 1px solid var(--line);
  color: var(--text-muted); cursor: pointer;
  font-size: 18px; line-height: 1;
}
.batchbar__close:hover { background: var(--bg-3); color: var(--text); }
:root[data-theme="light"] .batchbar {
  background: oklch(0.98 0.01 280 / 0.94);
  color: var(--text);
}
/* Finder-style multi-select highlight. Persistent (not just on hover). */
.row--selected {
  background: color-mix(in oklch, var(--accent) 18%, transparent) !important;
  box-shadow: inset 2px 0 0 var(--accent);
}
.row--selected .row__title { color: oklch(0.96 0.03 var(--ah, 50)); }
.child-row--selected {
  background: color-mix(in oklch, var(--accent) 18%, transparent) !important;
  box-shadow: inset 2px 0 0 var(--accent);
}
.child-row--selected .row__title--child { color: oklch(0.96 0.03 var(--ah, 50)); }
:root[data-theme="light"] .row--selected {
  background: color-mix(in oklch, var(--accent) 14%, transparent) !important;
}
:root[data-theme="light"] .row--selected .row__title {
  color: oklch(0.28 0.14 var(--ah, 50));
}
:root[data-theme="light"] .child-row--selected {
  background: color-mix(in oklch, var(--accent) 14%, transparent) !important;
}
:root[data-theme="light"] .child-row--selected .row__title--child {
  color: oklch(0.28 0.14 var(--ah, 50));
}
/* Subtle hover lift: brighten the row a touch above its zebra base so the
   user can tell which row is hovered, without competing with the playing row. */
.row:hover { background: rgba(255,255,255,0.025); }
.row:nth-child(odd):hover { background: rgba(255,255,255,0.035); }
:root[data-theme="light"] .row:hover { background: rgba(28,26,22,0.025); }
:root[data-theme="light"] .row:nth-child(odd):hover { background: rgba(28,26,22,0.035); }

/* Playing row — distinct, always-on tint that reads as "this is playing"
   regardless of hover-to-preview state. Stronger than hover, with a left
   accent rail so it's unambiguous. */
.row--playing {
  background: linear-gradient(
    90deg,
    oklch(0.30 0.10 var(--ah, 50) / 0.32) 0%,
    oklch(0.22 0.06 var(--ah, 50) / 0.18) 35%,
    transparent 75%
  ) !important;
  box-shadow: inset 2px 0 0 var(--accent);
}
.row--playing .row__title {
  color: oklch(0.95 0.08 var(--ah, 50));
  font-weight: 600;
}
:root[data-theme="light"] .row--playing {
  background: linear-gradient(
    90deg,
    oklch(0.85 0.12 var(--ah, 50) / 0.55) 0%,
    oklch(0.92 0.06 var(--ah, 50) / 0.30) 35%,
    transparent 75%
  ) !important;
}
:root[data-theme="light"] .row--playing .row__title {
  color: oklch(0.32 0.16 var(--ah, 50));
}
.row--tint {
  background: linear-gradient(
    90deg,
    color-mix(in oklch, var(--accent) 13%, transparent) 0%,
    color-mix(in oklch, var(--accent) 6%, transparent) 44%,
    transparent 100%
  );
  box-shadow:
    inset 2px 0 0 color-mix(in srgb, var(--accent) 78%, transparent),
    inset 0 0 0 1px color-mix(in srgb, var(--accent) 16%, transparent);
}
.row--previewing {
  background: linear-gradient(
    90deg,
    color-mix(in oklch, var(--accent) 16%, transparent) 0%,
    color-mix(in oklch, var(--accent) 7%, transparent) 48%,
    transparent 100%
  );
  box-shadow:
    inset 2px 0 0 color-mix(in srgb, var(--accent) 82%, transparent),
    inset 0 0 0 1px color-mix(in srgb, var(--accent) 18%, transparent),
    0 0 18px color-mix(in srgb, var(--accent) 10%, transparent);
}
.row--playing.row--previewing {
  background: linear-gradient(
    90deg,
    color-mix(in oklch, var(--accent) 22%, transparent) 0%,
    color-mix(in oklch, var(--accent) 11%, transparent) 48%,
    transparent 100%
  ) !important;
  box-shadow:
    inset 2px 0 0 var(--accent),
    inset 0 0 0 1px color-mix(in srgb, var(--accent) 24%, transparent),
    0 0 22px color-mix(in srgb, var(--accent) 12%, transparent);
}
.row--previewing .gradient-sweep::before {
  opacity: 1;
}
.row--hover .row__title {
  color: oklch(0.95 0.05 var(--ah, 50));
}
.iconbtn.is-spinning .icon {
  animation: iconbtn-spin 700ms cubic-bezier(0.33, 0, 0.2, 1);
  transform-origin: center;
}
@keyframes iconbtn-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
:root[data-theme="light"] .row--hover .row__title {
  color: oklch(0.28 0.12 var(--ah, 50));
}

/* progress strip at bottom of hovered row — sweeps left→right with the chorus preview */
/* Columns popup */
.cols-wrap { position: relative; }
.cols-pop {
  position: absolute; top: calc(100% + 6px); right: 0;
  z-index: 7000;
  width: 460px; max-width: min(calc(100vw - 320px), 480px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 4px;
  row-gap: 0;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.015)),
    rgba(22, 22, 26, 0.78);
  backdrop-filter: blur(24px) saturate(1.4);
  -webkit-backdrop-filter: blur(24px) saturate(1.4);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  box-shadow: 0 16px 40px -10px rgba(0,0,0,0.6),
              inset 0 1px 0 rgba(255,255,255,0.06);
  padding: 6px;
  user-select: none;
  -webkit-user-select: none;
}
.cols-pop input { user-select: text; -webkit-user-select: text; }
.cols-pop__dragbar {
  grid-column: 1 / -1;
  cursor: grab;
  border-radius: 8px 8px 0 0;
}
.cols-pop__dragbar:active,
body.is-cols-pop-moving .cols-pop__dragbar { cursor: grabbing; }
.cols-pop__title,
.cols-pop__hint,
.cols-pop__reset { grid-column: 1 / -1; }
.cols-pop__title {
  font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-mute);
  padding: 6px 10px 4px;
}
.cols-pop__row {
  display: flex; align-items: center; gap: 6px;
  width: 100%; padding: 0; border-radius: 6px;
  background: transparent; border: 0;
  color: var(--text); cursor: pointer;
  text-align: left;
  transition: background 120ms;
  position: relative;
}
.cols-pop__row--drag { cursor: grab; }
.cols-pop__row--drag.is-dragging { opacity: 0.4; cursor: grabbing; }

/* Column popup search (typo-tolerant filter) */
.cols-pop__search {
  display: flex; align-items: center; gap: 6px;
  margin: 0 10px 8px; padding: 0 4px;
}
.cols-pop__search input {
  flex: 1; min-height: 32px; border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04);
  color: #fff; font-size: 13px; padding: 0 12px;
  outline: none;
}
.cols-pop__search input:focus {
  border-color: rgba(86,178,225,0.5);
  background: rgba(255,255,255,0.06);
}
.cols-pop__search-clear {
  appearance: none; border: 0; background: rgba(255,255,255,0.08);
  color: #fff; width: 22px; height: 22px; border-radius: 999px;
  font-size: 16px; line-height: 1; cursor: pointer;
}
.cols-pop__search-empty {
  padding: 12px 14px; color: var(--text-mute); font-size: 12px;
  opacity: .85;
}
.cols-pop__row--search .cols-pop__search-group {
  margin-left: auto; font-size: 10px; opacity: .5; padding-left: 8px;
}
.cols-pop__group--search .cols-pop__group-head {
  background: rgba(86,178,225,0.08);
}
.cols-pop__row.is-dropbefore::before,
.cols-pop__row.is-dropafter::after {
  content: ""; position: absolute; left: 6px; right: 6px; height: 2px;
  background: var(--accent); border-radius: 1px; pointer-events: none;
}
.cols-pop__row.is-dropbefore::before { top: -1px; }
.cols-pop__row.is-dropafter::after { bottom: -1px; }
.cols-pop__grip {
  display: inline-grid; place-items: center;
  width: 18px; height: 18px; color: var(--text-mute);
  flex-shrink: 0; opacity: 0.55; padding-left: 4px;
}
.cols-pop__row:hover .cols-pop__grip { opacity: 1; }
.cols-pop__toggle {
  display: flex; align-items: center; gap: 10px;
  flex: 1; padding: 7px 10px; border-radius: 6px;
  background: transparent; border: 0; color: inherit;
  font: inherit; cursor: pointer; text-align: left;
}
.cols-pop__hint {
  font-size: 10px; color: var(--text-mute);
  padding: 0 10px 6px; opacity: 0.7;
}
.cols-pop__row:hover { background: rgba(255,255,255,0.06); }
.cols-pop__check {
  width: 16px; height: 16px; border-radius: 4px;
  border: 1.5px solid var(--text-mute);
  display: grid; place-items: center;
  flex-shrink: 0;
  color: #1a0e02;
}
.cols-pop__check.is-on {
  background: var(--accent); border-color: var(--accent);
}
.cols-pop__check .icon { width: 12px; height: 12px; }
:root[data-theme="light"] .cols-pop {
  background: rgba(255,255,255,0.85);
  border-color: rgba(0,0,0,0.08);
}
:root[data-theme="light"] .cols-pop__row:hover { background: rgba(0,0,0,0.05); }

.cols-pop__reset {
  display: block;
  width: calc(100% - 12px);
  margin: 6px 6px 2px;
  padding: 6px 6px 8px;
  background: transparent; border: 0; border-top: 1px solid var(--line, rgba(255,255,255,0.06));
  color: var(--text-mute, rgba(255,255,255,0.55));
  font: inherit; font-size: 11px; text-align: left;
  cursor: pointer; border-radius: 0;
  text-decoration: underline; text-decoration-color: rgba(255,255,255,0.2);
  text-underline-offset: 3px;
}
.cols-pop__reset:hover { color: var(--text); text-decoration-color: currentColor; }
:root[data-theme="light"] .cols-pop__reset { border-top-color: rgba(28,26,22,0.08); }

/* Grouped variant: collapsible sections */
.cols-pop--grouped { padding: 0; max-height: min(72vh, 720px); display: flex; flex-direction: column; }
.cols-pop--grouped .cols-pop__title { padding: 10px 12px 2px; }
.cols-pop--grouped .cols-pop__hint { padding: 0 12px 8px; }
.cols-pop__groups { flex: 1 1 auto; overflow-y: auto; padding: 0 6px 6px; }
.cols-pop__group { border-top: 1px solid rgba(255,255,255,0.04); }
.cols-pop__group:first-child { border-top: 0; }
:root[data-theme="light"] .cols-pop__group { border-top-color: rgba(0,0,0,0.05); }
.cols-pop__group-head {
  width: 100%;
  display: grid;
  grid-template-columns: 18px 1fr auto auto;
  align-items: center;
  gap: 10px;
  padding: 9px 8px;
  background: transparent;
  border: 0;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  border-radius: 6px;
  transition: background 120ms ease;
}
.cols-pop__group-head:hover:not(:disabled) { background: rgba(255,255,255,0.04); }
:root[data-theme="light"] .cols-pop__group-head:hover:not(:disabled) { background: rgba(0,0,0,0.04); }
.cols-pop__group-head:disabled { cursor: default; opacity: 0.85; }
.cols-pop__caret {
  display: inline-grid; place-items: center;
  width: 18px; height: 18px;
  color: var(--text-mute);
  transform: rotate(-90deg);
  transition: transform 160ms ease;
}
.cols-pop__group.is-open .cols-pop__caret { transform: rotate(0deg); }
.cols-pop__group-head:disabled .cols-pop__caret { transform: rotate(0deg); opacity: 0.5; }
.cols-pop__group-label {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--text);
}
.cols-pop__group-sub {
  font-size: 10.5px;
  color: var(--text-mute);
  letter-spacing: 0.02em;
  text-align: right;
  opacity: 0.75;
}
.cols-pop__group-count {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 10.5px;
  color: var(--text-mute);
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 5px;
  padding: 2px 6px;
  min-width: 38px;
  text-align: center;
}
:root[data-theme="light"] .cols-pop__group-count {
  background: rgba(0,0,0,0.04);
  border-color: rgba(0,0,0,0.06);
}
.cols-pop__group-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 6px;
  padding: 2px 0 8px;
  position: relative;
  border-radius: 8px;
  transition: background 120ms, box-shadow 120ms;
}
.cols-pop__group-body.is-drophere {
  background: color-mix(in oklab, var(--accent) 8%, transparent);
  box-shadow: 0 0 0 1.5px var(--accent) inset;
}
.cols-pop__custom-empty {
  grid-column: 1 / -1;
  font-size: 12px;
  color: var(--text-mute);
  padding: 14px 12px;
  border: 1px dashed var(--line);
  border-radius: 8px;
  margin: 4px 6px 6px;
  text-align: center;
  background: rgba(255,255,255,0.015);
}
:root[data-theme="light"] .cols-pop__custom-empty {
  background: rgba(0,0,0,0.02);
}
.cols-pop__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  padding: 2px 6px 6px;
  border-top: 1px solid rgba(255,255,255,0.05);
}
:root[data-theme="light"] .cols-pop__actions { border-top-color: rgba(0,0,0,0.06); }
@media (max-width: 480px) {
  .cols-pop__group-body { grid-template-columns: 1fr; }
  .cols-pop__actions { grid-template-columns: 1fr; }
}

/* ---- Saved-view presets row ------------------------------------------ */
.cols-pop__presets {
  padding: 4px 12px 10px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.cols-pop__presets-label {
  font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-mute); margin-bottom: 6px;
}
.cols-pop__presets-row {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
}
.cols-pop__preset {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 999px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
  color: var(--text); font-size: 11px; font-weight: 500;
  cursor: pointer; white-space: nowrap;
  transition: background 120ms ease, border-color 120ms ease;
}
.cols-pop__preset:hover { background: rgba(255,255,255,0.08); }
.cols-pop__preset.is-active {
  background: color-mix(in oklch, var(--accent) 18%, transparent);
  border-color: color-mix(in oklch, var(--accent) 45%, transparent);
  color: var(--text);
}
.cols-pop__preset--add {
  background: transparent; border-style: dashed;
  color: var(--text-mute);
}
.cols-pop__preset--add:hover { color: var(--text); border-color: rgba(255,255,255,0.18); }
.cols-pop__preset--update {
  background: color-mix(in oklch, var(--accent) 28%, transparent);
  border-color: color-mix(in oklch, var(--accent) 55%, transparent);
  color: #1a0e02;
}
.cols-pop__preset-x {
  display: inline-grid; place-items: center;
  width: 14px; height: 14px; border-radius: 50%;
  font-size: 11px; line-height: 1; color: var(--text-mute);
  cursor: pointer;
}
.cols-pop__preset-x:hover { background: rgba(255,255,255,0.12); color: var(--text); }
.cols-pop__preset-new {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 4px; border-radius: 999px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
}
.cols-pop__preset-input {
  background: transparent; border: 0; outline: none;
  color: var(--text); font: inherit; font-size: 11px;
  padding: 2px 6px; min-width: 110px;
}
.cols-pop__preset-save {
  background: var(--accent); color: #1a0e02;
  border: 0; border-radius: 999px; padding: 2px 10px;
  font-size: 11px; font-weight: 600; cursor: pointer;
}
.cols-pop__preset-cancel {
  background: transparent; border: 0; color: var(--text-mute);
  cursor: pointer; padding: 0 4px; font-size: 14px;
}
:root[data-theme="light"] .cols-pop__presets { border-bottom-color: rgba(0,0,0,0.06); }
:root[data-theme="light"] .cols-pop__preset { background: rgba(0,0,0,0.04); border-color: rgba(0,0,0,0.08); }
:root[data-theme="light"] .cols-pop__preset:hover { background: rgba(0,0,0,0.07); }

/* Demo? cell */
.demo-yes {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 3px;
  background: oklch(0.4 0.10 145 / 0.30);
  color: oklch(0.86 0.10 145);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.demo-no { color: var(--text-mute, rgba(255,255,255,0.35)); }

/* Status pills */
.status-pill {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
}
.status-pill--wip      { background: oklch(0.32 0.06  60 / 0.55); color: oklch(0.85 0.10  70); }
.status-pill--rough    { background: oklch(0.30 0.04  40 / 0.55); color: oklch(0.78 0.05  40); }
.status-pill--mixed    { background: oklch(0.30 0.06 240 / 0.55); color: oklch(0.85 0.10 240); }
.status-pill--mastered { background: oklch(0.30 0.07 280 / 0.55); color: oklch(0.86 0.10 280); }
.status-pill--final    { background: oklch(0.30 0.08 150 / 0.55); color: oklch(0.86 0.12 150); }
.status-pill--released { background: oklch(0.32 0.10 320 / 0.55); color: oklch(0.86 0.12 320); }
:root[data-theme="light"] .status-pill--wip      { background: oklch(0.92 0.06  70); color: oklch(0.40 0.10  60); }
:root[data-theme="light"] .status-pill--rough    { background: oklch(0.92 0.03  40); color: oklch(0.40 0.05  40); }
:root[data-theme="light"] .status-pill--mixed    { background: oklch(0.94 0.04 240); color: oklch(0.40 0.10 240); }
:root[data-theme="light"] .status-pill--mastered { background: oklch(0.94 0.05 280); color: oklch(0.40 0.10 280); }
:root[data-theme="light"] .status-pill--final    { background: oklch(0.94 0.05 150); color: oklch(0.38 0.10 150); }
:root[data-theme="light"] .status-pill--released { background: oklch(0.94 0.06 320); color: oklch(0.40 0.12 320); }

/* ellipsis cell (notes) */
.cell--ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-dim, rgba(255,255,255,0.6));
  font-style: italic;
  font-size: 11px;
}

/* Undo toast */
.undo-toast {
  position: fixed;
  bottom: 96px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px 10px 12px;
  background: var(--surface, #16161a);
  border: 1px solid var(--line, rgba(255,255,255,0.10));
  border-radius: 8px;
  box-shadow: 0 12px 36px rgba(0,0,0,0.4);
  font-size: 13px;
  color: var(--text);
  z-index: 9998;
  animation: undoToastIn 180ms ease-out;
}
:root[data-theme="light"] .undo-toast { background: #fff; box-shadow: 0 12px 36px rgba(28,26,22,0.15); }
.undo-toast svg { width: 14px; height: 14px; opacity: 0.6; }
.undo-toast__msg b { font-weight: 600; }
.undo-toast__btn {
  background: transparent;
  border: 0;
  color: var(--accent, #8b6dff);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 4px 8px;
  margin-left: 6px;
  border-radius: 4px;
  cursor: pointer;
}
.undo-toast__btn:hover { background: rgba(139,109,255,0.12); }
@keyframes undoToastIn {
  from { transform: translate(-50%, 12px); opacity: 0; }
  to   { transform: translateX(-50%); opacity: 1; }
}

/* Track-number cell */
.cell--num {
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  color: var(--text-mute);
  justify-content: flex-start;
  padding-left: 0;
}
.th--num { padding-left: 0; }
.row__progress {
  position: absolute;
  /* big invisible hit area so you can grab the scrub line anywhere along
     the bottom of the row without pixel-perfect aim. The visual bar still
     hugs the bottom; we just extend the click target upward. */
  left: 0; right: 0; bottom: 0; height: 12px;
  z-index: 4;
  cursor: ew-resize;
  display: flex; align-items: flex-end;
  overflow: visible;
  /* prevent the row's native drag (drag-to-playlist) from hijacking a scrub */
  -webkit-user-drag: none;
  touch-action: none;
}
.row__progress-bar {
  position: relative;
  height: 2.5px;
  width: 100%;
  transform: scaleX(var(--p, 0));
  transform-origin: left center;
  background: var(--accent);
  box-shadow: 0 0 8px color-mix(in srgb, var(--accent) 62%, transparent);
  will-change: transform;
  transition: transform 90ms linear;
}
/* leading "playhead" dot at the front of the bar */
.row__progress-bar::after {
  display: none;
}
.row__progress::after {
  content: "";
  display: none;
  position: absolute;
  left: var(--p-pct, 0%);
  bottom: -2px;
  width: 8px; height: 8px;
  border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 0 8px color-mix(in srgb, var(--accent) 72%, transparent);
  transform: translate(-50%, 50%);
  opacity: 0;
  transition: left 90ms linear, opacity 120ms ease;
  pointer-events: none;
}
.row--hover .row__progress:not(.row__progress--playing) .row__progress-bar {
  transition: transform 60ms linear;
}
.row__progress.row__progress--previewing .row__progress-bar {
  height: 2px;
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--accent) 42%, transparent) 0%,
    var(--accent) 100%
  );
  box-shadow: 0 0 9px color-mix(in srgb, var(--accent) 48%, transparent);
  transition: transform 50ms linear;
}

/* BPM */
.bpm { color: var(--text); font-weight: 500; }
.bpm__unit { color: var(--text-mute); margin-left: 2px; font-size: 11px; }
.analysis-wait {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
  max-width: 100%;
  color: var(--text-mute);
  font-size: 10.5px;
  letter-spacing: 0;
  white-space: nowrap;
}
.analysis-wait__dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: oklch(0.78 0.12 var(--accent-hue));
  box-shadow: 0 0 0 0 oklch(0.78 0.12 var(--accent-hue) / 0.35);
  animation: analysis-wait-pulse 1.4s ease-in-out infinite;
}
@keyframes analysis-wait-pulse {
  0%, 100% { opacity: 0.45; transform: scale(0.82); }
  50% { opacity: 1; transform: scale(1); }
}

/* tags */
.tag {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 500;
  border: 1px solid transparent;
  white-space: nowrap;
}

/* Tag popover — opens off the Tags column. Adds custom tag input + suggested grid. */
.tagpop { width: 280px !important; }
.tagpop__head { padding-bottom: 6px; }
.tagpop__label {
  font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-mute);
}
.tagpop__current {
  display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 0 8px;
}
.tagpop__chip { display: inline-flex; align-items: center; gap: 4px; }
.tagpop__chip--current {
  padding: 0; padding-left: 8px;
  background: oklch(0.30 0.05 220 / 0.65);
  border-color: color-mix(in oklch, oklch(0.78 0.04 220) 28%, transparent);
}
.tagpop__chiplabel {
  appearance: none; background: transparent; border: 0; color: inherit;
  font: inherit; padding: 3px 0; cursor: pointer;
}
.tagpop__chipx {
  appearance: none; background: transparent; border: 0;
  color: var(--text-mute); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 22px; padding: 0;
  border-left: 1px solid color-mix(in oklch, oklch(0.78 0.04 220) 22%, transparent);
}
.tagpop__chipx:hover { color: var(--text); background: oklch(0.40 0.06 220 / 0.5); }
.tagpop__chipx svg { width: 10px; height: 10px; }

.tagpop__sectionlabel { padding-top: 4px; }
.tagpop__lockrow { display: inline-flex; align-items: center; gap: 8px; }
.tagpop__lockchip {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 9.5px; letter-spacing: 0.06em; text-transform: uppercase;
  color: oklch(0.74 0.10 290);
  background: oklch(0.32 0.08 290 / 0.5);
  border: 1px solid oklch(0.55 0.10 290 / 0.4);
  padding: 1px 6px; border-radius: 4px;
}
.tagpop__lockchip svg { width: 9px; height: 9px; }

.tagpop__inputrow {
  display: flex; gap: 6px; padding: 4px 0 8px;
  transition: transform 80ms ease;
}
.tagpop__inputrow.is-shake { animation: tagpop-shake 0.4s ease; }
@keyframes tagpop-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-4px); }
  40% { transform: translateX(4px); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(2px); }
}
.tagpop__input {
  flex: 1; min-width: 0;
  appearance: none;
  font: inherit; font-size: 12px; color: var(--text);
  background: oklch(0.20 0.02 220 / 0.6);
  border: 1px solid color-mix(in oklch, oklch(0.6 0.04 220) 22%, transparent);
  border-radius: 6px;
  padding: 5px 8px;
  outline: none;
}
.tagpop__input:focus {
  border-color: oklch(0.65 0.10 var(--accent-hue, 270) / 0.6);
  background: oklch(0.22 0.02 220 / 0.8);
}
.tagpop__add {
  appearance: none;
  font: inherit; font-size: 11px; font-weight: 500;
  color: oklch(0.10 0.02 220);
  background: oklch(0.78 0.10 var(--accent-hue, 270));
  border: 0; border-radius: 6px;
  padding: 0 12px; cursor: pointer;
}
.tagpop__add:hover { filter: brightness(1.08); }
.tagpop__add:disabled {
  opacity: 0.35; cursor: not-allowed;
}
.tagpop__add--locked {
  background: oklch(0.32 0.08 290 / 0.5);
  border: 1px solid oklch(0.55 0.10 290 / 0.4);
  color: oklch(0.78 0.10 290);
}
.tagpop__addlock {
  display: inline-flex; align-items: center; gap: 3px;
}
.tagpop__addlock svg { width: 10px; height: 10px; }

.tagpop__grid {
  display: flex; flex-wrap: wrap; gap: 5px;
  padding-top: 2px;
}
.tagpop__grid .tagpop__chip {
  cursor: pointer;
}
.tagpop__chip.is-active {
  background: oklch(0.42 0.10 var(--accent-hue, 270) / 0.5);
  border-color: oklch(0.65 0.12 var(--accent-hue, 270) / 0.55);
  color: oklch(0.96 0.02 var(--accent-hue, 270));
}

/* Empty-state add affordance and inline + button on filled strips */
.tagstrip__addempty {
  appearance: none;
  font: inherit; font-size: 10.5px;
  color: var(--text-mute);
  background: transparent;
  border: 1px dashed color-mix(in oklch, oklch(0.6 0.04 220) 28%, transparent);
  border-radius: 999px;
  padding: 2px 8px 2px 6px;
  display: inline-flex; align-items: center; gap: 3px;
  cursor: pointer;
  opacity: 0.55;
  transition: opacity 120ms ease, color 120ms ease, border-color 120ms ease;
}
.tagstrip__addempty:hover {
  opacity: 1; color: var(--text);
  border-color: oklch(0.65 0.10 var(--accent-hue, 270) / 0.5);
}
.tagstrip__addempty svg { width: 9px; height: 9px; }
.tagstrip__addmini {
  appearance: none; background: transparent; border: 0;
  color: var(--text-mute);
  width: 16px; height: 16px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px;
  cursor: pointer; opacity: 0;
  transition: opacity 120ms ease, color 120ms ease, background 120ms ease;
}
.row:hover .tagstrip__addmini { opacity: 0.55; }
.tagstrip__addmini:hover { opacity: 1; color: var(--text); background: oklch(0.30 0.05 220 / 0.6); }
.tagstrip__addmini svg { width: 9px; height: 9px; }

.tagstrip__chip--button {
  appearance: none; font: inherit; cursor: pointer;
}

/* Custom tags strip — subtle pill-row in the Tags column. */
.tagstrip {
  display: inline-flex; align-items: center; gap: 4px;
  flex-wrap: nowrap; overflow: hidden;
  max-width: 100%;
}
/* Tag chips — same visual weight as genre/status pills (.tag), with a
   distinct neutral palette so they don't read as a genre. Clickable:
   click filters the library by that tag. */
.tagstrip__chip {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 11px; font-weight: 500;
  letter-spacing: 0;
  color: oklch(0.78 0.04 220);
  background: oklch(0.32 0.04 220 / 0.50);
  border: 1px solid color-mix(in oklch, oklch(0.78 0.04 220) 18%, transparent);
  white-space: nowrap;
  cursor: pointer;
  transition: background 140ms ease, border-color 140ms ease, transform 80ms ease;
}
.tagstrip__chip:hover {
  background: oklch(0.36 0.06 220 / 0.65);
  border-color: color-mix(in oklch, oklch(0.78 0.04 220) 32%, transparent);
}
.tagstrip__chip:active { transform: translateY(1px); }
:root[data-theme="light"] .tagstrip__chip {
  color: oklch(0.32 0.06 220);
  background: oklch(0.92 0.03 220);
  border-color: oklch(0.84 0.04 220);
}
:root[data-theme="light"] .tagstrip__chip:hover {
  background: oklch(0.88 0.05 220);
  border-color: oklch(0.78 0.06 220);
}
.tagstrip__more {
  font-size: 10.5px; color: var(--text-mute);
  font-variant-numeric: tabular-nums;
}
.tag--rb    { background: #1f1f25; color: var(--text); border-color: var(--line-strong); }
.tag--rbpop { background: oklch(0.4 0.12 320 / 0.25); color: oklch(0.85 0.1 320); }
.tag--hh    { background: oklch(0.4 0.12 200 / 0.25); color: oklch(0.85 0.1 200); }
.tag--rap   { background: oklch(0.4 0.13 45 / 0.28); color: oklch(0.88 0.12 45); }
.tag--soul  { background: oklch(0.4 0.12 100 / 0.25); color: oklch(0.85 0.1 100); }
.tag--pop   { background: oklch(0.4 0.14 350 / 0.28); color: oklch(0.86 0.12 350); }
.tag--indie { background: oklch(0.4 0.10 175 / 0.28); color: oklch(0.85 0.10 175); }
.tag--elec  { background: oklch(0.4 0.14 280 / 0.28); color: oklch(0.86 0.13 280); }
.tag--funk  { background: oklch(0.4 0.14  60 / 0.28); color: oklch(0.86 0.12  85); }
.tag--afro  { background: oklch(0.4 0.14 140 / 0.28); color: oklch(0.86 0.13 140); }
.tag--jazz  { background: oklch(0.4 0.14 250 / 0.28); color: oklch(0.86 0.12 250); }
.tag--rock  { background: oklch(0.4 0.14  25 / 0.30); color: oklch(0.86 0.13  25); }
.tag--drill { background: oklch(0.32 0.05 260 / 0.45); color: oklch(0.84 0.05 260); }
.tag--alt   { background: oklch(0.4 0.10 215 / 0.30); color: oklch(0.86 0.10 215); }
.tag--country { background: oklch(0.4 0.12  45 / 0.28); color: oklch(0.86 0.11  45); }
.tag--blues { background: oklch(0.4 0.13 245 / 0.30); color: oklch(0.86 0.12 245); }
.tag--reggae { background: oklch(0.4 0.14 150 / 0.28); color: oklch(0.86 0.13 150); }
.tag--latin { background: oklch(0.4 0.14  35 / 0.30); color: oklch(0.86 0.13  35); }
.tag--metal { background: oklch(0.30 0.04  20 / 0.50); color: oklch(0.84 0.06  20); }
.tag--punk  { background: oklch(0.36 0.16  10 / 0.40); color: oklch(0.86 0.14  10); }
.tag--kpop  { background: oklch(0.4 0.14 340 / 0.30); color: oklch(0.86 0.13 340); }
.tag--lofi  { background: oklch(0.36 0.04 270 / 0.40); color: oklch(0.86 0.05 270); }
.tag--trap  { background: oklch(0.32 0.06 290 / 0.45); color: oklch(0.84 0.06 290); }
.tag--gospel { background: oklch(0.4 0.10  80 / 0.28); color: oklch(0.86 0.10  80); }
.tag--classical { background: oklch(0.40 0.04  85 / 0.30); color: oklch(0.88 0.04  85); }
.tag--folk  { background: oklch(0.4 0.10  55 / 0.28); color: oklch(0.86 0.10  55); }
.tag--house { background: oklch(0.4 0.14 305 / 0.28); color: oklch(0.86 0.13 305); }
.tag--ambient { background: oklch(0.36 0.04 195 / 0.40); color: oklch(0.86 0.05 195); }
.tag--world { background: oklch(0.4 0.13 165 / 0.28); color: oklch(0.86 0.12 165); }
.tag--disco { background: oklch(0.4 0.16 330 / 0.30); color: oklch(0.88 0.14 330); }
.tag--singersongwriter { background: oklch(0.4 0.08  70 / 0.28); color: oklch(0.86 0.09  70); }

/* clickable genre pill in row */
.tag--button {
  cursor: pointer;
  border: 1px solid transparent;
  font: inherit;
  font-size: 11px;
  font-weight: 500;
  transition: filter 120ms;
}
.tag--button:hover { filter: brightness(1.15); }
.genrepill-stack {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  max-width: 100%;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
}
.genrepill-stack .tag {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.genrepill-more {
  flex: 0 0 auto;
  min-width: 22px;
  height: 18px;
  padding: 0 6px;
  border: 1px solid color-mix(in oklch, var(--accent) 35%, transparent);
  border-radius: 999px;
  background: color-mix(in oklch, var(--accent) 14%, transparent);
  color: var(--accent);
  font-size: 10px;
  font-weight: 800;
  line-height: 16px;
}
.genrepill-stack:hover .tag,
.genrepill-stack:hover .genrepill-more {
  filter: brightness(1.12);
}

/* genre popover */
.genrepop {
  position: fixed;
  z-index: 9999;
  width: 260px;
  padding: 10px;
  background: var(--surface, #16161a);
  border: 1px solid var(--line-strong, rgba(255,255,255,0.10));
  border-radius: 10px;
  box-shadow: 0 18px 48px rgba(0,0,0,0.55), 0 2px 8px rgba(0,0,0,0.30);
  color: var(--text);
  font-size: 12px;
}
:root[data-theme="light"] .genrepop {
  background: #fff;
  box-shadow: 0 18px 48px rgba(28,26,22,0.18), 0 2px 8px rgba(28,26,22,0.08);
}
.genrepop__head {
  display: flex; align-items: center; gap: 6px;
  padding: 2px 2px 8px;
}
.genrepop__action {
  display: flex; align-items: center; gap: 8px;
  width: 100%;
  padding: 8px 8px;
  background: transparent;
  border: 0;
  border-radius: 6px;
  color: var(--text);
  font: inherit;
  font-size: 12px;
  text-align: left;
  cursor: pointer;
}
.genrepop__action:hover { background: rgba(255,255,255,0.06); }
:root[data-theme="light"] .genrepop__action:hover { background: rgba(28,26,22,0.06); }
.genrepop__action svg { width: 14px; height: 14px; opacity: 0.7; flex: 0 0 auto; }
.genrepop__div {
  height: 1px;
  background: var(--line, rgba(255,255,255,0.06));
  margin: 6px 0;
}
.genrepop__label {
  padding: 4px 8px 6px;
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-dim, rgba(255,255,255,0.5));
}
.genrepop__grid {
  display: flex; flex-wrap: wrap; gap: 4px;
  padding: 0 4px 4px;
}
.genrepop__chip {
  border: 1px solid transparent;
  cursor: pointer;
  font: inherit;
  font-size: 11px;
  font-weight: 500;
}
.genrepop__chip.is-current {
  outline: 1.5px solid currentColor;
  outline-offset: 1px;
}
.genrepop__more {
  width: 100%;
  margin-top: 4px;
  padding: 6px 8px;
  background: transparent;
  border: 0;
  color: var(--text-dim, rgba(255,255,255,0.5));
  font: inherit;
  font-size: 11px;
  cursor: pointer;
  border-radius: 6px;
}
.genrepop__more:hover { background: rgba(255,255,255,0.05); color: var(--text); }
:root[data-theme="light"] .genrepop__more:hover { background: rgba(28,26,22,0.05); }

/* ====================================================== */
/* INDICATOR 1: EQUALIZER ICON */
/* ====================================================== */
.eq-icon {
  width: 16px; height: 16px;
  display: inline-flex; align-items: flex-end; justify-content: center;
  gap: 1.5px;
  contain: layout paint;
  transform: translateZ(0);
}
.eq-icon span {
  width: 2px;
  height: 100%;
  border-radius: 1px;
  background: var(--accent);
  transform-origin: bottom center;
  transform: translateZ(0) scaleY(0.18);
  will-change: transform;
  box-shadow: 0 0 6px var(--accent-glow);
}

/* ====================================================== */
/* INDICATOR 2: WAVEFORM in row */
/* ====================================================== */
.row__waveform {
  /* Live as a flex child of .cell--title so it occupies only the leftover
     title-cell space — never bleeds over other columns / tags. */
  flex: 1 1 128px;
  min-width: 96px;
  align-self: stretch;
  margin-left: 8px;
  height: 30px;
  pointer-events: none;
  cursor: default;
  display: flex; align-items: center;
  position: relative;
  z-index: 0;
  mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}
.row--previewing .row__waveform {
  flex: 999 1 clamp(320px, 46vw, 780px);
  min-width: min(320px, 38vw);
  margin-left: 12px;
  height: 32px;
}
.waveform-bar {
  display: block;
  width: 100%; height: 100%;
  position: relative;
  contain: layout paint style;
  overflow: hidden;
}
.waveform-bar__lane {
  position: absolute;
  inset: 0;
  display: flex; align-items: center;
  gap: 1px;
  width: 100%; height: 100%;
  justify-content: stretch;
}
/* Fill lane is a REVEAL mask, not a horizontal scale. The fill lane stacks
   identical bars at identical positions over the base lane and a clip-path
   uncovers them left→right. This matches the player waveform: the colored
   bars don't stretch as progress grows, they unveil in place. */
.waveform-bar__fill {
  clip-path: inset(0 calc((1 - var(--wave-progress, 0)) * 100%) 0 0);
  -webkit-clip-path: inset(0 calc((1 - var(--wave-progress, 0)) * 100%) 0 0);
  will-change: clip-path;
}
.row--hover .waveform-bar__fill {
  transition: clip-path 60ms linear, -webkit-clip-path 60ms linear;
}
.waveform-bar__lane span {
  flex: 1;
  border-radius: 0.5px;
  background: rgba(255,255,255,0.18);
  min-height: 2px;
  opacity: 0.62;
}
.waveform-bar__fill span {
  background: var(--wave-accent, var(--accent));
  opacity: 1;
}
.row--previewing .waveform-bar__lane span {
  animation: none;
  transform-origin: center;
  will-change: opacity;
}
.row--previewing .waveform-bar__lane span:nth-child(4n + 1) { animation-delay: -0.12s; }
.row--previewing .waveform-bar__lane span:nth-child(4n + 2) { animation-delay: -0.24s; }
.row--previewing .waveform-bar__lane span:nth-child(4n + 3) { animation-delay: -0.36s; }
.row--previewing .waveform-bar__fill span {
  filter: none;
}
@keyframes preview-waveform-pulse {
  0%, 100% {
    opacity: 0.58;
    transform: scaleY(0.72);
  }
  50% {
    opacity: 1;
    transform: scaleY(1.1);
  }
}
@media (prefers-reduced-motion: reduce) {
  .row--previewing .waveform-bar__lane span {
    animation: none;
    transform: none;
  }
}
/* ====================================================== */
/* INDICATOR 3: EDGE PULSE */
/* ====================================================== */
.edge-pulse {
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 0;
}
.edge-pulse__bar {
  position: absolute;
  left: 0; top: 6px; bottom: 6px; width: 3px;
  background: var(--accent);
  border-radius: 0 2px 2px 0;
  box-shadow: 0 0 12px var(--accent), 0 0 24px var(--accent-glow);
  animation: edge-bar-in 300ms ease forwards;
}
.edge-pulse__halo {
  position: absolute; inset: 0;
  background: radial-gradient(
    600px 80px at 0% 50%,
    color-mix(in oklch, var(--accent) 18%, transparent),
    transparent 60%
  );
  animation: edge-halo-pulse 1.6s ease-in-out infinite;
}
@keyframes edge-bar-in {
  from { transform: scaleY(0); opacity: 0; }
  to   { transform: scaleY(1); opacity: 1; }
}
@keyframes edge-halo-pulse {
  0%, 100% { opacity: 0.6; }
  50%      { opacity: 1; }
}

/* ====================================================== */
/* INDICATOR 4: PLAYHEAD */
/* ====================================================== */
.playhead {
  position: absolute;
  left: 200px; right: 24px;
  top: 0; bottom: 0;
  pointer-events: none;
  z-index: 0;
}
.playhead__line {
  position: absolute;
  top: 8px; bottom: 8px;
  width: 2px;
  background: var(--accent);
  box-shadow: 0 0 12px var(--accent), 0 0 4px var(--accent);
  border-radius: 1px;
  transition: left 60ms linear;
}
.playhead__line::before, .playhead__line::after {
  content: "";
  position: absolute;
  left: 50%;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent);
  transform: translateX(-50%);
  box-shadow: 0 0 10px var(--accent);
}
.playhead__line::before { top: -4px; }
.playhead__line::after  { bottom: -4px; }

/* ====================================================== */
/* INDICATOR 5: RINGS */
/* ====================================================== */
.rings-icon {
  position: relative;
  width: 16px; height: 16px;
  display: inline-grid; place-items: center;
}
.rings-icon svg { position: relative; z-index: 2; filter: drop-shadow(0 0 4px var(--accent-glow)); }
.rings-icon__ring {
  position: absolute;
  inset: 0;
  border: 1.5px solid var(--accent);
  border-radius: 50%;
  opacity: 0;
  animation: ring-pulse var(--ring-dur, 1.4s) ease-out infinite;
}
.rings-icon__ring--2 { animation-delay: calc(var(--ring-dur, 1.4s) / 3); }
.rings-icon__ring--3 { animation-delay: calc(var(--ring-dur, 1.4s) * 2 / 3); }
@keyframes ring-pulse {
  0%   { transform: scale(0.7); opacity: 0.9; }
  100% { transform: scale(2.4); opacity: 0; }
}

/* ====================================================== */
/* INDICATOR 6: GRADIENT SWEEP */
/* ====================================================== */
.gradient-sweep {
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
  border-radius: 2px;
}
.gradient-sweep::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  left: -40%;
  width: 50%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    color-mix(in oklch, var(--accent) 25%, transparent) 50%,
    transparent 100%
  );
  animation: sweep var(--sweep-dur, 2.4s) ease-in-out infinite;
  animation-delay: var(--sweep-delay, 0s);
  opacity: 0.9;
  will-change: transform;
}
@keyframes sweep {
  /* start fully off-screen on the left so the gradient fades IN smoothly,
     just like it fades out on the right. No abrupt teleport on cycle wrap. */
  0%   { transform: translateX(-30%); }
  100% { transform: translateX(280%); }
}

/* ====================================================== */
/* FLOATING TOOLTIP */
/* ====================================================== */
.preview-tooltip {
  position: fixed;
  z-index: 9999;
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px 6px 8px;
  background: rgba(20,20,24,0.92);
  backdrop-filter: blur(10px);
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  font-size: 11px;
  color: var(--text);
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
  pointer-events: none;
  animation: tooltip-in 160ms ease;
}
@keyframes tooltip-in {
  from { opacity: 0; transform: translateY(4px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.preview-tooltip__dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent);
  animation: chip-pulse 1.4s ease-in-out infinite;
}
.preview-tooltip__label {
  font-family: "Inter", sans-serif;
  letter-spacing: 0.02em;
}
.preview-tooltip__bar {
  width: 60px; height: 3px;
  background: rgba(255,255,255,0.12);
  border-radius: 2px;
  overflow: hidden;
  margin-left: 2px;
}
.preview-tooltip__bar > span {
  display: block; height: 100%;
  border-radius: 2px;
  transition: width 80ms linear;
  box-shadow: 0 0 6px var(--accent);
}

/* =====================================================================
   Topbar — large variant (Submit Beta Feedback / Install Session Vault)
   ===================================================================== */
.topbar--lg {
  height: 64px;
  padding: 0 16px;
  border-bottom: 1px solid var(--line);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.025), transparent 40%),
    rgba(14,14,16,0.85);
}
.topbar--lg .topbar__search {
  flex: 1 1 200px; min-width: 140px; max-width: 520px;
  height: 36px;
  border-radius: 999px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.07);
  padding: 0 14px;
  position: relative;
}
.topbar--lg .topbar__search input { color: var(--text); font-family: "Inter", sans-serif; }
.topbar--lg .topbar__kbd {
  display: inline-flex; align-items: center;
  padding: 2px 8px; border-radius: 6px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  color: var(--text-mute); font-size: 10.5px;
  letter-spacing: 0.05em;
  font-family: "JetBrains Mono", monospace;
}
.btn {
  display: inline-flex; align-items: center; gap: 7px;
  height: 32px; padding: 0 14px;
  border-radius: 999px;
  font-size: 12.5px; font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
  transition: filter 120ms, transform 120ms;
}
.btn:hover { filter: brightness(1.08); }
.btn:active { transform: translateY(0.5px); }
.btn--feedback {
  background: linear-gradient(180deg, oklch(0.78 0.16 var(--accent-hue)), oklch(0.66 0.18 var(--accent-hue)));
  color: #1a0e08;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.25),
    0 4px 14px -6px oklch(0.7 0.18 var(--accent-hue) / 0.7);
}
.btn--install {
  background: linear-gradient(180deg, oklch(0.86 0.08 var(--accent-hue)), oklch(0.78 0.10 var(--accent-hue)));
  color: #2a1a0e;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.4),
    0 4px 14px -6px oklch(0.78 0.12 var(--accent-hue) / 0.5);
}
.btn--install sup { font-size: 0.55em; margin-left: 1px; opacity: 0.85; }
.btn--install .icon { width: 14px; height: 14px; }
.avatar--photo {
  background:
    radial-gradient(circle at 30% 30%, oklch(0.7 0.06 var(--accent-hue)), oklch(0.35 0.04 30) 70%),
    linear-gradient(135deg, #c89e7c, #4a2e1d);
  background-size: cover;
  background-position: center;
}
/* Procedural sphere — used when no avatar uploaded. Follows --accent-hue. */
.avatar--sphere {
  background:
    radial-gradient(circle at 30% 22%, oklch(0.96 0.05 var(--accent-hue) / 0.85) 0%, oklch(0.85 0.13 var(--accent-hue) / 0.55) 18%, transparent 36%),
    radial-gradient(circle at 60% 60%, oklch(0.62 0.18 var(--accent-hue)) 0%, oklch(0.42 0.16 var(--accent-hue)) 55%, oklch(0.20 0.10 var(--accent-hue)) 96%);
  box-shadow:
    inset 0 -8px 14px oklch(0 0 0 / 0.45),
    inset 0 4px 8px oklch(1 0 0 / 0.10),
    0 4px 10px oklch(0.62 0.18 var(--accent-hue) / 0.40);
}

/* =====================================================================
   PlayerBar — bottom dock with liquid glass
   ===================================================================== */
.playerbar {
  height: 76px;
  margin: 10px 12px 12px;
  border-radius: 14px;
  display: grid;
  grid-template-columns: 320px 1fr 360px;
  align-items: center;
  padding: 0 16px;
  gap: 18px;
  position: relative;
  z-index: 10;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.015)),
    rgba(20, 20, 24, 0.55);
  backdrop-filter: blur(28px) saturate(1.5);
  -webkit-backdrop-filter: blur(28px) saturate(1.5);
  border: 1px solid rgba(255,255,255,0.07);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.07),
    0 -10px 40px rgba(0,0,0,0.4),
    0 0 60px -10px oklch(0.74 0.14 var(--accent-hue) / 0.08);
}
body.preview-mode .playerbar .player__meta,
body.preview-mode .playerbar .player__right {
  opacity: 0.4;
  transition: opacity 140ms ease;
}
:root[data-theme="light"] .playerbar {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.6), rgba(255,255,255,0.35)),
    rgba(255,255,255,0.4);
  border-color: rgba(0,0,0,0.06);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.6),
    0 -8px 30px rgba(40,30,20,0.12);
}
.iconbtn--sm { width: 26px; height: 26px; border-radius: 6px; }

/* Left: meta */
.player__meta { display: flex; align-items: center; gap: 8px; min-width: 0; }
.player__title-block { min-width: 0; line-height: 1.2; margin-left: 4px; }
.player__title {
  font-family: "JetBrains Mono", monospace;
  font-size: 12px; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.player__subline {
  font-size: 11px; color: var(--text-mute);
  display: flex; align-items: center; gap: 6px; margin-top: 2px;
}
.player__dots { color: var(--accent); letter-spacing: 1px; }
.player__sep { opacity: 0.5; }

/* Center: transport + scrubber */
.player__center {
  display: flex; flex-direction: column; align-items: stretch; gap: 6px;
  min-width: 0;
}
.player__transport {
  display: flex; align-items: center; justify-content: center; gap: 14px;
}
.player__transport .iconbtn { width: 30px; height: 30px; }
.player__play {
  position: relative;
  width: 40px; height: 40px;
  border-radius: 999px;
  border: 0; cursor: pointer;
  background: transparent;
  color: #fff;
  display: grid; place-items: center;
  -webkit-tap-highlight-color: transparent;
  box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.12);
  transition: transform 80ms ease, box-shadow 240ms cubic-bezier(0.2, 0.8, 0.2, 1), filter 200ms ease;
  overflow: visible;
  flex-shrink: 0;
  --np-turn: 0;
}
.player__play::before {
  /* 2026-05-16 23:14 PT (Tommy "this is the correct one" with rainbow ring
     screenshot): restored the 11-stop conic-gradient ring around a dark
     inner disc. Codex's 1e6c82d4 had replaced it with a cyan disc; Tommy
     reversed that call. */
  content: '';
  position: absolute; inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at center, oklch(0.14 0.005 var(--accent-hue)) 0 60%, oklch(0.10 0.005 var(--accent-hue)) 62%, transparent 64% 100%),
    conic-gradient(
      from -16.36deg,
      #26418f 0 9.09%,
      #a61a64 9.09% 18.18%,
      #216bb0 18.18% 27.27%,
      #e76426 27.27% 36.36%,
      #694695 36.36% 45.45%,
      #297c3f 45.45% 54.54%,
      #ca282c 54.54% 63.63%,
      #3a4b53 63.63% 72.72%,
      #617986 72.72% 81.81%,
      #f3a42c 81.81% 90.90%,
      #111621 90.90% 100%
    );
  z-index: 0;
  pointer-events: none;
  transform: rotate(calc(var(--np-turn) * 360deg));
  transition: transform 700ms cubic-bezier(0.33, 0, 0.2, 1);
  transform-origin: center;
}
.player__play::after { content: none; }
.player__play > * { position: relative; z-index: 3; }
.player__play .icon { color: #fff; }
.player__play:hover { filter: brightness(1.06); }
.player__play:active { transform: scale(0.96); }
.player__play.is-disabled,
.player__play.is-disabled:hover { filter: grayscale(0.6) brightness(0.85); cursor: not-allowed; }
:root[data-theme="light"] .player__play { color: #fff; }
:root[data-theme="light"] .player__play .icon { color: #fff; }

/* legacy-ring (deprecated — kept for reference) */ .__legacy_player_play_unused {
  content: '';
  position: absolute; inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at center, oklch(0.14 0.005 var(--accent-hue)) 0 60%, oklch(0.10 0.005 var(--accent-hue)) 62%, transparent 64% 100%),
    conic-gradient(
      from -16.36deg,
      #26418f 0 9.09%,
      #a61a64 9.09% 18.18%,
      #216bb0 18.18% 27.27%,
      #e76426 27.27% 36.36%,
      #694695 36.36% 45.45%,
      #297c3f 45.45% 54.54%,
      #ca282c 54.54% 63.63%,
      #3a4b53 63.63% 72.72%,
      #617986 72.72% 81.81%,
      #f3a42c 81.81% 90.90%,
      #111621 90.90% 100%
    );
  z-index: 0;
  pointer-events: none;
  transform: rotate(calc(var(--np-turn) * 360deg));
  transition: transform 700ms cubic-bezier(0.33, 0, 0.2, 1);
  transform-origin: center;
}
/* Flat glass — no curved specular highlight */
.player__play::after { content: none; }
.player__play > * { position: relative; z-index: 3; }
.player__play:hover {
  box-shadow:
    inset 0 0 0 0.5px rgba(255, 255, 255, 0.18);
}
.player__play:hover::before { filter: brightness(1.08) saturate(1.04); }
.player__play:active { transform: scale(0.94); }
@keyframes player-play-blurpulse {
  0%   { filter: blur(0px); }
  20%  { filter: blur(1.5px); }
  50%  { filter: blur(2px); }
  80%  { filter: blur(1.5px); }
  100% { filter: blur(0px); }
}
.player__play.is-starting::before,
.player__play.is-stopping::before {
  animation: player-play-blurpulse 700ms cubic-bezier(0.33, 0, 0.2, 1);
  will-change: transform, filter;
}
/* The ring spins ONLY during the start/stop transition pulse — not continuously while playing. */
:root[data-theme="light"] .player__play::before {
  /* 2026-05-16 23:14 PT: light-mode mirrors the 11-stop rainbow with a
     lighter inner disc so the white play triangle remains readable on a
     light background. */
  background:
    radial-gradient(circle at center, oklch(0.93 0.005 var(--accent-hue)) 0 60%, oklch(0.86 0.005 var(--accent-hue)) 62%, transparent 64% 100%),
    conic-gradient(
      from -16.36deg,
      #26418f 0 9.09%,
      #a61a64 9.09% 18.18%,
      #216bb0 18.18% 27.27%,
      #e76426 27.27% 36.36%,
      #694695 36.36% 45.45%,
      #297c3f 45.45% 54.54%,
      #ca282c 54.54% 63.63%,
      #3a4b53 63.63% 72.72%,
      #617986 72.72% 81.81%,
      #f3a42c 81.81% 90.90%,
      #111621 90.90% 100%
    );
  border: 0;
}
:root[data-theme="light"] .player__play { color: #1a0f06; }
:root[data-theme="light"] .player__play .icon { color: #1a0f06; }

/* Empty-state — calm, inviting, non-pressable */
.playerbar--empty .player__meta-title--empty {
  color: var(--text);
  font-weight: 500;
  letter-spacing: -0.01em;
}
.playerbar--empty .player__meta-sub { color: var(--text-mute); }
.playerbar--empty .player__star,
.playerbar--empty .player__meta .player__icon-btn { opacity: 0.45; }
.playerbar--empty .player__transport .iconbtn { opacity: 0.4; pointer-events: none; }
.player__play.is-disabled,
.player__play.is-disabled:hover {
  cursor: default;
  opacity: 0.55;
  transform: none;
  filter: none;
}
.player__play.is-disabled::before {
  animation: none;
}
.player__play.is-disabled:active { transform: none; }
.player__play.is-disabled:active { transform: none; }
.playerbar--empty .player__scrub-bar { opacity: 0.35; }
.player__scrub-line {
  flex: 1;
  height: 1px;
  background: rgba(255,255,255,0.16);
  border-radius: 1px;
}
:root[data-theme="light"] .player__scrub-line { background: rgba(0,0,0,0.16); }

.player__play-disc { display: none; }
.player__play-glyph {
  display: grid;
  place-items: center;
  position: relative;
  z-index: 1;
  transform: none;
}
.player__play-glyph.is-glyph-play { transform: translateX(1.5px); }
.player__play-glyph.is-glyph-pause { transform: none; }
.player__play-glyph .icon {
  width: 14px;
  height: 14px;
  color: #fff;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.5));
}

.player__scrubrow {
  display: grid;
  grid-template-columns: 36px 1fr 36px;
  align-items: center;
  gap: 10px;
}
.player__time {
  font-size: 10.5px; color: var(--text-mute);
  text-align: center;
}
.player__scrub {
  position: relative;
  height: 28px;
  cursor: pointer;
}
.player__scrub-bars {
  position: absolute; inset: 0;
  display: flex; align-items: center; gap: 1px;
}
.player__scrub-bar {
  flex: 1;
  min-height: 2px;
  background: rgba(255,255,255,0.24);
  border-radius: 1px;
  /* 2026-05-16 23:11 PT (Tommy "disappearances in between during seek
     still happen"): killed the 80ms background transition. Hundreds of
     bars flip .is-played simultaneously on seek; the cross-fade showed
     them mid-color = looked like a gap. Instant swap is correct UX here. */
}
.player__scrub-bar.is-played { background: var(--accent); }
.player__scrub-head {
  position: absolute; top: -2px; bottom: -2px;
  width: 2px;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent-glow);
  transform: translateX(-1px);
  pointer-events: none;
}

/* Right: speed pills, eq, volume, share */
.player__right {
  display: flex; align-items: center; justify-content: flex-end; gap: 12px;
}
/* Lyrics mic button — faint accent when track has lyrics, brighter when active */
.iconbtn--lyrics.has-lyrics {
  color: color-mix(in oklch, var(--accent) 65%, var(--text-mute));
}
.iconbtn--lyrics.has-lyrics:hover {
  color: var(--accent);
  background: color-mix(in oklch, var(--accent) 10%, transparent);
}
.iconbtn--lyrics.is-on {
  color: var(--accent);
  background: color-mix(in oklch, var(--accent) 16%, transparent);
  box-shadow: 0 0 0 1px color-mix(in oklch, var(--accent) 35%, transparent),
              0 0 12px color-mix(in oklch, var(--accent) 35%, transparent);
}
.iconbtn--lyrics.is-disabled {
  color: var(--text-3); opacity: 0.45; cursor: not-allowed;
}

/* Karaoke bar — sits above the player when active */
.karaoke-bar {
  position: fixed;
  left: 0; right: 0; bottom: 92px;
  z-index: 39;
  pointer-events: none;
  display: flex; justify-content: center;
  padding: 0 24px;
}
.karaoke-bar__inner {
  pointer-events: auto;
  width: min(880px, 100%);
  background: linear-gradient(180deg, color-mix(in oklch, var(--bg-2) 92%, transparent), color-mix(in oklch, var(--bg-2) 96%, transparent));
  border: 1px solid color-mix(in oklch, var(--accent) 22%, var(--line));
  border-radius: 14px;
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  box-shadow: 0 12px 40px rgba(0,0,0,0.45),
              0 0 0 1px rgba(255,255,255,0.04) inset,
              0 0 30px color-mix(in oklch, var(--accent) 12%, transparent);
  padding: 14px 22px 16px;
  position: relative;
  overflow: hidden;
}
.karaoke-bar__head {
  display: flex; align-items: center; justify-content: space-between;
  font: 600 10px/1 ui-sans-serif, system-ui;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-3); margin-bottom: 8px;
}
.karaoke-bar__head-l { display: inline-flex; align-items: center; gap: 8px; }
.karaoke-bar__dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent);
  animation: kbar-pulse 1.6s ease-in-out infinite;
}
@keyframes kbar-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
.karaoke-bar__close {
  appearance: none; border: 0; background: transparent;
  color: var(--text-mute); cursor: pointer;
  width: 22px; height: 22px; border-radius: 6px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px; line-height: 1;
}
.karaoke-bar__close:hover { color: var(--text); background: rgba(255,255,255,0.06); }
.karaoke-bar__lines {
  display: flex; flex-direction: column;
  gap: 4px;
  text-align: center;
  font-family: var(--font-display, ui-sans-serif, system-ui);
}
.karaoke-bar__line {
  font-size: 14px; font-weight: 500;
  color: var(--text-3);
  opacity: 0.55;
  transition: color 220ms ease, opacity 220ms ease, font-size 220ms ease, font-weight 220ms ease;
  line-height: 1.3;
  letter-spacing: -0.005em;
}
.karaoke-bar__line.is-current {
  font-size: 22px; font-weight: 700;
  color: var(--text);
  opacity: 1;
  text-shadow: 0 0 18px color-mix(in oklch, var(--accent) 35%, transparent);
}
.karaoke-bar__line .is-sung {
  color: var(--accent);
  text-shadow: 0 0 14px color-mix(in oklch, var(--accent) 50%, transparent);
}
.karaoke-bar__progress {
  position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: rgba(255,255,255,0.05);
}
.karaoke-bar__progress-fill {
  height: 100%;
  background: linear-gradient(90deg, transparent, var(--accent));
  transition: width 0.1s linear;
}
.speedpills {
  display: inline-flex;
  background: transparent;
  gap: 2px;
  border: 0;
  border-radius: 999px;
  padding: 0;
}
.speedpills__pill {
  height: 22px; padding: 0 8px;
  border: 0;
  background: transparent;
  border-radius: 999px;
  font-size: 11.5px; font-weight: 600;
  color: var(--text-mute);
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: color .12s ease, background .12s ease, transform .08s ease;
}
.speedpills__pill:hover { color: var(--text); background: transparent; }
.speedpills__pill:active { transform: scale(0.96); }
.speedpills__pill.is-active {
  background: transparent;
  color: var(--accent);
  text-shadow: 0 0 12px color-mix(in oklch, var(--accent) 45%, transparent);
}
.speedpills.is-disabled {
  opacity: 0.42;
  filter: grayscale(0.4);
}
.speedpills.is-disabled .speedpills__pill,
.speedpills__pill:disabled {
  cursor: not-allowed;
  color: var(--text-mute);
  text-shadow: none;
}
.speedpills.is-disabled .speedpills__pill.is-active,
.speedpills__pill:disabled.is-active {
  color: color-mix(in oklch, var(--text-mute) 70%, var(--accent));
}
.volume { display: inline-flex; align-items: center; gap: 6px; }
.volume__track {
  position: relative;
  width: 80px; height: 4px;
  background: rgba(255,255,255,0.1);
  border-radius: 2px;
  cursor: pointer;
}
.volume__fill {
  position: absolute; top: 0; left: 0; bottom: 0;
  background: var(--text-dim);
  border-radius: 2px;
}
.volume__knob {
  position: absolute; top: 50%;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.5);
  transform: translate(-50%, -50%);
}
@media (max-width: 1100px) {
  .playerbar { grid-template-columns: 220px 1fr 280px; }
  .speedpills__pill { padding: 0 6px; }
}
@media (max-width: 1180px) {
  .topbar--lg .btn--feedback { display: none; }
}
@media (max-width: 980px) {
  .topbar--lg .btn--install span,
  .topbar--lg .btn--install sup { display: none; }
  .topbar--lg .btn--install { padding: 0 10px; }
}

/* ---------- light mode ---------- */
:root[data-theme="light"] {
  --bg: #f6f4ef;
  --bg-2: #efece4;
  --bg-3: #e7e3d8;
  --bg-row-hover: #ebe7dc;
  --line: #d9d3c4;
  --line-strong: #c5bda8;
  --text: #1c1a16;
  --text-dim: #65605a;
  --text-mute: #8c867d;
  --accent: oklch(0.62 0.16 var(--accent-hue));
  --accent-soft: oklch(0.62 0.16 var(--accent-hue) / 0.14);
  --accent-glow: oklch(0.62 0.16 var(--accent-hue) / 0.45);
}
:root[data-theme="light"] .app {
  background: var(--bg);
}
:root[data-theme="light"] .tag--rb { background: #e7e3d8; color: var(--text); border-color: var(--line-strong); }

/* glass surfaces — paper-cream tint */
:root[data-theme="light"] .glass {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.55), rgba(255,255,255,0.30)),
    rgba(246, 244, 239, 0.72);
  border: 1px solid rgba(28, 26, 22, 0.08);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.7),
    0 10px 40px rgba(48, 40, 28, 0.10);
}
:root[data-theme="light"] .topbar__search {
  background: rgba(255,255,255,0.6);
  border: 1px solid rgba(28, 26, 22, 0.10);
}
:root[data-theme="light"] .topbar__kbd {
  background: rgba(28, 26, 22, 0.05);
  border: 1px solid rgba(28, 26, 22, 0.10);
  color: var(--text-dim);
}

/* preview tooltip */
:root[data-theme="light"] .preview-tooltip {
  background: rgba(255, 252, 246, 0.96);
  border: 1px solid rgba(28, 26, 22, 0.12);
  color: var(--text);
  box-shadow: 0 8px 24px rgba(48, 40, 28, 0.18);
}
:root[data-theme="light"] .preview-tooltip__bar { background: rgba(28, 26, 22, 0.10); }

/* player bar surfaces */
:root[data-theme="light"] .player__scrubrow ~ * .player__bar,
:root[data-theme="light"] .player__bar { background: rgba(28, 26, 22, 0.12); }
:root[data-theme="light"] .speedpills {
  background: transparent;
  border: 0;
  box-shadow: none;
}
:root[data-theme="light"] .speedpills__pill {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  color: rgba(28, 26, 22, 0.62);
}
:root[data-theme="light"] .speedpills__pill:hover {
  background: transparent;
  color: var(--text);
}
:root[data-theme="light"] .speedpills__pill.is-active {
  background: transparent;
  color: var(--accent);
  text-shadow: 0 0 12px color-mix(in oklch, var(--accent) 42%, transparent);
}
:root[data-theme="light"] .volume__track { background: rgba(28, 26, 22, 0.10); }
:root[data-theme="light"] .volume__thumb {
  background: var(--text);
  box-shadow: 0 1px 3px rgba(48, 40, 28, 0.30);
}

/* equalizer/waveform default rail in rows */
:root[data-theme="light"] .eqbars__bar,
:root[data-theme="light"] .wave__bar { background: rgba(28, 26, 22, 0.22); }

/* tag chips: invert dark hardcoded surfaces in light mode */
:root[data-theme="light"] .tag,
:root[data-theme="light"] .chip,
:root[data-theme="light"] .pill { color: var(--text); }
:root[data-theme="light"] .tag--rbpop { background: oklch(0.92 0.04 320); color: oklch(0.30 0.10 320); }
:root[data-theme="light"] .tag--hh    { background: oklch(0.92 0.04 200); color: oklch(0.30 0.10 200); }
:root[data-theme="light"] .tag--soul  { background: oklch(0.92 0.04 100); color: oklch(0.30 0.10 100); }
:root[data-theme="light"] .tag--pop   { background: oklch(0.93 0.05 350); color: oklch(0.32 0.12 350); }
:root[data-theme="light"] .tag--indie { background: oklch(0.93 0.04 175); color: oklch(0.30 0.10 175); }
:root[data-theme="light"] .tag--elec  { background: oklch(0.93 0.05 280); color: oklch(0.34 0.13 280); }
:root[data-theme="light"] .tag--funk  { background: oklch(0.93 0.05  85); color: oklch(0.34 0.13  60); }
:root[data-theme="light"] .tag--afro  { background: oklch(0.93 0.05 140); color: oklch(0.32 0.12 140); }
:root[data-theme="light"] .tag--jazz  { background: oklch(0.93 0.05 250); color: oklch(0.32 0.13 250); }
:root[data-theme="light"] .tag--rock  { background: oklch(0.93 0.06  25); color: oklch(0.34 0.13  25); }
:root[data-theme="light"] .tag--drill { background: oklch(0.90 0.02 260); color: oklch(0.32 0.04 260); }

/* white-on-dark rails inside rows / progress / scrub */
:root[data-theme="light"] .progress__track,
:root[data-theme="light"] .progressbar,
:root[data-theme="light"] .scrub,
:root[data-theme="light"] .row__bar,
:root[data-theme="light"] [class*="__bar"] { background: rgba(28, 26, 22, 0.18); }

/* iconbtn / kbd inside topbar should not be transparent-on-light */
:root[data-theme="light"] .iconbtn:hover { background: rgba(28, 26, 22, 0.06); }

/* badges that used #fff text on accent need to stay readable */
:root[data-theme="light"] .navitem__badge { color: #1a0e02; }

/* light-mode active nav item — ensure label/icon are dark and readable on the peach background */
:root[data-theme="light"] .navitem--active {
  background: linear-gradient(90deg, oklch(0.88 0.08 var(--accent-hue) / 0.85), oklch(0.92 0.05 var(--accent-hue) / 0.55));
  color: oklch(0.32 0.10 var(--accent-hue));
}
:root[data-theme="light"] .navitem--active .icon { color: oklch(0.42 0.14 var(--accent-hue)); }
:root[data-theme="light"] .navitem--active .navitem__kbd {
  background: rgba(28,26,22,0.06);
  color: oklch(0.42 0.10 var(--accent-hue));
  border: 1px solid rgba(28,26,22,0.08);
}

/* sidebar background already uses --bg-2; ensure logo text color flips */
:root[data-theme="dark"]  .sidebar__logo-img--light,
:root:not([data-theme="light"]) .sidebar__logo-img--light { display: none; }
/* Light theme: show the black wordmark (variant tagged --light) and hide the
   white one (--dark). Class names follow the THEME they're shown in, not the
   colour of the file. */
:root[data-theme="light"] .sidebar__logo-img--dark { display: none; }
:root[data-theme="light"] .sidebar__logo--img:not(.is-vault) .sidebar__logo-img--light { display: inline-block; }
:root[data-theme="light"] .sidebar__logo--img.is-vault .sidebar__logo-img { display: none; }
:root[data-theme="light"] .sidebar__vault-disc { display: none; }
:root[data-theme="light"] .sidebar__vault-play { fill: #0d0d12 !important; stroke: #0d0d12 !important; }

/* =====================================================================
   Topbar — make search field clickable trigger
   ===================================================================== */
.topbar__search {
  cursor: pointer;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  transition: background 120ms, border-color 120ms;
}
.topbar__search--input {
  cursor: text;
}
.topbar__search-input {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  height: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
  font-family: "Inter", sans-serif;
  font-size: 13px;
  line-height: 1;
  appearance: none;
}
.topbar__search-input::-webkit-search-cancel-button {
  appearance: none;
}
.topbar__search-clear {
  flex: 0 0 auto;
  border: 0;
  cursor: pointer;
}
.topbar__search-clear {
  width: 24px;
  height: 24px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  background: transparent;
  color: var(--text-mute);
  font-size: 18px;
  line-height: 1;
}
.topbar__search-clear:hover {
  background: rgba(255,255,255,0.07);
  color: var(--text);
}
.topbar__search:hover {
  background: rgba(255,255,255,0.05);
  border-color: oklch(0.74 0.14 var(--accent-hue) / 0.55);
  box-shadow:
    0 0 0 1px oklch(0.74 0.14 var(--accent-hue) / 0.10),
    0 0 18px -4px oklch(0.74 0.14 var(--accent-hue) / 0.30);
}
.topbar__search:hover .icon { color: oklch(0.74 0.14 var(--accent-hue) / 0.85); }
.topbar__search-placeholder {
  flex: 1; text-align: left;
  color: var(--text-mute); font-size: 13px;
  font-family: "Inter", sans-serif;
}
:root[data-theme="light"] .topbar__search:hover {
  background: rgba(255,255,255,0.85);
  border-color: oklch(0.55 0.16 var(--accent-hue) / 0.45);
}

/* =====================================================================
   Sidebar — liquid glass
   ===================================================================== */
.sidebar {
  background: #000;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-right: 1px solid rgba(255,255,255,0.06);
  box-shadow: none;
}
:root[data-theme="light"] .sidebar {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.55), rgba(255,255,255,0.30)),
    rgba(246, 244, 239, 0.55);
  backdrop-filter: blur(20px) saturate(1.3);
  -webkit-backdrop-filter: blur(20px) saturate(1.3);
  border-right: 1px solid rgba(28,26,22,0.08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.55);
}

/* Tweaks: black sidebar override (toggled from Tweaks panel) */
body.is-sidebar-black .sidebar,
:root[data-theme="light"] body.is-sidebar-black .sidebar {
  background: #000;
  border-right: 1px solid rgba(255,255,255,0.06);
  box-shadow: none;
}

/* Expanded sidebar alignment. Keep the rail's text anchored left even when
   other page-level layouts use centered flex/grid defaults. */
body:not(.is-sidebar-collapsed) .sidebar,
body:not(.is-sidebar-collapsed) .sidebar__nav,
body:not(.is-sidebar-collapsed) .sidebar__group {
  align-items: stretch;
  text-align: left;
}
body:not(.is-sidebar-collapsed) .sidebar__section,
body:not(.is-sidebar-collapsed) .navitem,
body:not(.is-sidebar-collapsed) .navitem__label {
  justify-content: flex-start;
  text-align: left;
}
body:not(.is-sidebar-collapsed) .navitem__label {
  min-width: 0;
  flex: 1 1 auto;
}
body.is-mobile.is-mobile-drawer-open .sidebar,
body.is-mobile.is-mobile-drawer-open .sidebar__nav,
body.is-mobile.is-mobile-drawer-open .sidebar__group {
  align-items: stretch !important;
  text-align: left !important;
}
body.is-mobile.is-mobile-drawer-open .sidebar__section,
body.is-mobile.is-mobile-drawer-open .navitem,
body.is-mobile.is-mobile-drawer-open .navitem__label {
  justify-content: flex-start !important;
  text-align: left !important;
}

/* =====================================================================
   PlayerBar — full (rebuild matching reference)
   ===================================================================== */
.playerbar--full {
  display: grid;
  grid-template-columns: minmax(220px, 280px) auto auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 14px;
  height: 64px;
  padding: 0 14px;
  background: var(--bg);
  border-top: 1px solid var(--line);
  margin: 0;
  border-radius: 0;
  box-shadow: none;
}
.playerbar--full > * { min-width: 0; }
.playerbar--full .player__meta {
  display: flex; align-items: center; gap: 10px; min-width: 0;
}
.player__icon-btn {
  width: 34px; height: 34px;
  border-radius: 8px;
  background: var(--bg-3);
  color: var(--text);
  display: grid; place-items: center;
  border: 1px solid transparent;
  transition: background 120ms, color 120ms;
}
.player__icon-btn:hover { background: var(--bg-2); }
.player__icon-btn .icon { width: 16px; height: 16px; }
.player__star { background: transparent; color: var(--text-mute); }
.player__star:hover { color: var(--accent); background: rgba(255,255,255,0.04); }
.player__star.is-on .icon { color: var(--accent); fill: var(--accent); }
.player__art-btn {
  width: 34px;
  height: 34px;
  aspect-ratio: 1 / 1;
  flex: 0 0 34px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 7px;
  overflow: hidden;
  background: var(--bg-3);
  display: grid;
  place-items: center;
}
.player__art-btn img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.player__meta-text { min-width: 0; line-height: 1.15; }
.player__meta-title {
  font-size: 13px; font-weight: 600; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  letter-spacing: 0.02em;
}
.player__meta-sub {
  font-size: 11px; color: var(--text-mute);
  font-family: "JetBrains Mono", monospace;
}

.playerbar--full .player__transport {
  display: inline-flex; align-items: center; gap: 6px;
}
.playerbar--full .player__transport .iconbtn {
  width: 30px; height: 30px; color: var(--text-mute);
}
.playerbar--full .player__transport .iconbtn:hover { color: var(--text); }
.playerbar--full .player__transport .iconbtn.is-on,
.playerbar--full .player__transport .iconbtn.is-on:hover {
  color: var(--accent);
}
.iconbtn.is-flashing,
.iconbtn.is-flashing:hover,
.playerbar--full .player__transport .iconbtn.is-flashing,
.playerbar--full .player__transport .iconbtn.is-flashing:hover {
  color: var(--accent);
  transition: color 80ms ease-out;
}
@keyframes iconbtn-flash {
  0%   { color: var(--accent); }
  100% { color: inherit; }
}
.player__transport .iconbtn:not(.is-on):active {
  color: var(--accent);
}
.playerbar--full .player__transport .iconbtn:not(.is-on):focus-visible {
  color: var(--accent);
  outline: none;
}
/* Restore original play button (multicolor rotating conic disc from base .player__play). */
.playerbar--full .player__play-ring { display: none; }
.playerbar--full .player__play-glyph {
  position: relative; z-index: 1;
  width: auto; height: auto;
  border-radius: 0;
  background: transparent;
  display: grid; place-items: center;
}
.playerbar--full .player__play-glyph.is-glyph-play { transform: translateX(1.5px); }
.playerbar--full .player__play-glyph.is-glyph-pause { transform: none; }
.playerbar--full .player__play-glyph .icon {
  width: 20px; height: 20px;
  color: #fff;
}

.playerbar--full .player__time {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px; color: var(--text-mute);
  min-width: 36px; text-align: center;
}
.player__scrub--full {
  position: relative;
  height: 32px;
  cursor: pointer;
  display: flex; align-items: center;
  min-width: 0;
  overflow: hidden;
}
.player__scrub--full .player__scrub-bars {
  position: absolute; inset: 0;
  display: flex; align-items: center;
  gap: 0;
  opacity: var(--player-waveform-opacity, 1);
  /* gap dropped from 1px so N bars can compress to fit the scrub width
     without (N-1) inter-bar gaps reserving ~(N-1)px of intrinsic width.
     Bars alone can shrink (flex:1 1 0; min-width:0), gaps cannot, so a
     non-zero gap forced bars to overflow + get clipped on narrower viewports,
     producing the "click is 50px to the right" + "waveform truncated" report. */
  pointer-events: none;
}
.player__scrub--full .player__scrub-bars--base {
  opacity: var(--player-waveform-opacity, 1);
}
.player__scrub--full .player__scrub-bars--hi {
  opacity: var(--player-waveform-opacity, 1);
}
/* 2026-05-16 22:55 PT (Tommy "the waveform is completely missing"):
 * Reverted codex's 7545c337 two-lane structure. The `.player__scrub-lane--*`
 * rules are intentionally absent — bars now live as direct flex children of
 * `.player__scrub-bars` (display: flex), each carrying `.is-played` or not
 * based on its index relative to current progress. */

/* Share picker: used when Shared opens a fresh share without a preselected item. */
.sharex__body--picker {
  gap: 12px;
}
.sharex__pick-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}
.sharex__pick-tab {
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--bg-3);
  color: var(--text-mute);
  font: inherit;
  font-size: 12px;
  font-weight: 650;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.sharex__pick-tab span {
  min-width: 20px;
  height: 18px;
  padding: 0 6px;
  border-radius: 999px;
  display: inline-grid;
  place-items: center;
  background: rgba(255,255,255,0.06);
  color: var(--text-mute);
  font-size: 10px;
  font-weight: 700;
}
.sharex__pick-tab.is-active {
  border-color: color-mix(in oklch, var(--accent) 44%, transparent);
  background: var(--accent-soft);
  color: var(--accent);
}
.sharex__track-picker {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: min(48vh, 430px);
  overflow: auto;
  padding-right: 2px;
}
.sharex__track-choice {
  min-height: 58px;
  width: 100%;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg-3);
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.sharex__track-choice:hover {
  border-color: var(--line-strong);
  background: var(--bg-row-hover);
}
.sharex__track-choice-art {
  width: 34px;
  height: 34px;
  border-radius: 7px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, oklch(0.42 0.10 280), oklch(0.36 0.08 320));
  color: rgba(255,255,255,0.9);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
}
.sharex__track-choice-art--playlist {
  background: linear-gradient(135deg, color-mix(in oklch, var(--accent) 50%, #1a1a1a), oklch(0.38 0.10 80));
}
.sharex__track-choice-meta {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.sharex__track-choice-title {
  font-size: 12.5px;
  font-weight: 650;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sharex__track-choice-sub {
  font-size: 11px;
  color: var(--text-mute);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sharex__track-choice-cta {
  color: var(--accent);
  font-size: 11px;
  font-weight: 700;
}
.sharex__empty-picker {
  min-height: 110px;
  border: 1px dashed var(--line);
  border-radius: 10px;
  display: grid;
  place-items: center;
  color: var(--text-mute);
  font-size: 12px;
}
.player__scrub--full .player__scrub-bar {
  flex: 1 1 0;
  min-width: 0;
  background: rgba(255, 255, 255, 0.42);
  background: color-mix(in oklch, var(--accent) 18%, var(--text) 46%);
  opacity: 0.92;
  border-radius: 1px;
  transform: scaleX(var(--player-waveform-stroke, 0.55));
  transform-origin: center;
}
.player__scrub--full .player__scrub-bar.is-played {
  background: var(--accent);
  background: color-mix(in oklch, var(--accent) 86%, white 8%);
  opacity: 1;
  box-shadow: 0 0 8px color-mix(in oklch, var(--accent) 34%, transparent);
}

.playerbar--full .player__right {
  display: inline-flex; align-items: center; gap: 10px;
}
.playerbar--full .speedpills {
  display: inline-flex;
  background: transparent;
  border: 0;
  padding: 0;
  gap: 4px;
}
.playerbar--full .speedpills__pill {
  height: 28px; padding: 0 10px;
  border-radius: 999px;
  background: transparent;
  color: var(--text-mute);
  font-size: 12px; font-weight: 600;
  letter-spacing: 0.01em;
  border: 0;
  cursor: pointer;
  transition: color .12s ease, transform .08s ease;
}
.playerbar--full .speedpills__pill:hover { color: var(--text); background: transparent; }
.playerbar--full .speedpills__pill:active { transform: scale(0.96); }
.playerbar--full .speedpills__pill.is-active {
  background: transparent;
  color: var(--accent);
  text-shadow: 0 0 14px color-mix(in oklch, var(--accent) 50%, transparent);
}
.player__volume {
  position: relative;
  display: inline-flex; align-items: center;
  color: var(--text-mute);
}
.player__volume-btn { color: var(--text-mute); }
.player__volume-btn.is-open { color: var(--text); background: var(--bg-3); }
.player__volume-pop {
  position: absolute;
  bottom: calc(100% + 12px);
  right: 50%;
  transform: translateX(50%);
  padding: 10px 8px;
  border-radius: 12px;
  background: oklch(0.18 0.005 var(--accent-hue) / 0.92);
  border: 1px solid oklch(1 0 0 / 0.08);
  box-shadow:
    0 0 0 0.5px rgba(255,255,255,0.06),
    0 18px 40px -10px rgba(0,0,0,0.55),
    0 4px 10px rgba(0,0,0,0.35);
  -webkit-backdrop-filter: blur(20px) saturate(1.2);
  backdrop-filter: blur(20px) saturate(1.2);
  z-index: 200;
  animation: vol-pop 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
:root[data-theme="light"] .player__volume-pop {
  background: oklch(0.96 0.01 var(--accent-hue) / 0.92);
  border-color: oklch(0 0 0 / 0.10);
  box-shadow:
    0 0 0 0.5px rgba(0,0,0,0.04),
    0 18px 40px -10px rgba(60,40,20,0.22),
    0 4px 10px rgba(60,40,20,0.10);
}
@keyframes vol-pop {
  from { opacity: 0; transform: translate(50%, 4px) scale(0.96); }
  to   { opacity: 1; transform: translate(50%, 0) scale(1); }
}
.player__volume-pop .player__vol-range {
  display: block;
  width: 18px; height: 96px;
  /* vertical fader */
  -webkit-appearance: none;
  appearance: none;
  writing-mode: vertical-lr;
  direction: rtl;
  background: transparent;
  cursor: pointer;
  accent-color: var(--accent);
}
.player__volume .icon { width: 16px; height: 16px; }
.player__vol-range {
  -webkit-appearance: none; appearance: none;
  width: 80px; height: 4px;
  background: linear-gradient(
    to right,
    var(--accent) 0%,
    var(--accent) calc(var(--vol, 0.62) * 100%),
    rgba(255,255,255,0.12) calc(var(--vol, 0.62) * 100%),
    rgba(255,255,255,0.12) 100%
  );
  border-radius: 999px; outline: none;
}
.player__vol-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 12px; height: 12px; border-radius: 999px;
  background: var(--accent);
  border: 2px solid var(--bg);
  cursor: pointer;
}
.player__vol-range::-moz-range-thumb {
  width: 12px; height: 12px; border-radius: 999px;
  background: var(--accent);
  border: 2px solid var(--bg);
  cursor: pointer;
}

:root[data-theme="light"] .playerbar--full { background: var(--bg); }
:root[data-theme="light"] .playerbar--full .speedpills__pill {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  color: rgba(28,26,22,0.62);
}
:root[data-theme="light"] .playerbar--full .speedpills__pill.is-active {
  background: transparent;
  color: var(--accent);
  text-shadow: 0 0 14px color-mix(in oklch, var(--accent) 48%, transparent);
}
:root[data-theme="light"] .player__icon-btn { background: rgba(28,26,22,0.04); }
:root[data-theme="light"] .player__icon-btn:hover { background: rgba(28,26,22,0.08); }

/* Light-mode volume slider: don't leave the unfilled track as near-white
   on a near-white surface, and tone the thumb/border to the paper bg. */
:root[data-theme="light"] .player__vol-range {
  background: linear-gradient(
    to right,
    var(--accent) 0%,
    var(--accent) calc(var(--vol, 0.62) * 100%),
    rgba(28, 26, 22, 0.14) calc(var(--vol, 0.62) * 100%),
    rgba(28, 26, 22, 0.14) 100%
  );
}
:root[data-theme="light"] .player__vol-range::-webkit-slider-thumb {
  background: var(--accent);
  border: 2px solid var(--bg);
  box-shadow: 0 1px 3px rgba(60, 40, 20, 0.25);
}
:root[data-theme="light"] .player__vol-range::-moz-range-thumb {
  background: var(--accent);
  border: 2px solid var(--bg);
  box-shadow: 0 1px 3px rgba(60, 40, 20, 0.25);
}

@media (max-width: 1280px) {
  .playerbar--full { grid-template-columns: minmax(200px, 240px) auto auto 1fr auto auto; gap: 10px; }
}
@media (min-width: 768px) and (max-width: 1279px) {
  .main {
    height: 100dvh;
    min-height: 100dvh;
  }
  .table-wrap {
    min-height: 0;
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .playerbar.playerbar--full {
    position: sticky;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 80;
    flex: 0 0 calc(64px + env(safe-area-inset-bottom, 0px));
    min-height: calc(64px + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    grid-template-columns: minmax(160px, 220px) auto auto minmax(120px, 1fr) auto;
    gap: 10px;
  }
  .playerbar--full .player__volume {
    display: none;
  }
}
@media (max-width: 1080px) {
  .playerbar--full .speedpills__pill:nth-child(2),
  .playerbar--full .speedpills__pill:nth-child(3) { display: none; }
}
.playerbar--minimal {
  height: 56px;
  margin: 0;
  border-radius: 0;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 0 24px;
  background: var(--bg);
  border-top: 1px solid var(--line);
  grid-template-columns: none;
  box-shadow: none;
}
.playerbar--minimal .player__time {
  font-size: 12px; color: var(--text-dim);
  font-family: "JetBrains Mono", monospace;
  flex: 0 0 auto; min-width: 36px;
}
.playerbar--minimal .player__time:last-child { text-align: right; }
.player__scrub--minimal {
  flex: 1;
  position: relative;
  height: 36px;
  cursor: pointer;
}
.player__scrub--minimal .player__scrub-bars {
  height: 100%; width: 100%;
  display: flex; align-items: center; gap: 1px;
}
.player__scrub--minimal .player__scrub-bar {
  flex: 1; min-width: 1px;
  background: var(--text-mute);
  opacity: 0.55;
  border-radius: 1px;
}
.player__scrub--minimal .player__scrub-bar.is-played {
  background: var(--accent);
  opacity: 1;
}

/* =====================================================================
   Avatar menu — popover under avatar button
   ===================================================================== */
.avatar--btn {
  cursor: pointer;
  border: 0;
  padding: 0;
  transition: box-shadow 120ms, transform 120ms;
}
.avatar--btn.is-active {
  box-shadow: 0 0 0 2px var(--accent);
}
.avmenu {
  position: fixed;
  width: 380px;
  border-radius: 14px;
  padding: 14px 0 8px;
  z-index: 9000;
  color: var(--text);
  font-family: "Inter", sans-serif;
  font-size: 13px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.012)),
    rgba(14, 14, 16, 0.96);
  backdrop-filter: blur(24px) saturate(1.4);
  -webkit-backdrop-filter: blur(24px) saturate(1.4);
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 30px 80px rgba(0,0,0,0.55);
}
:root[data-theme="light"] .avmenu {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.85), rgba(255,255,255,0.7)),
    rgba(246,244,239,0.96);
  border-color: rgba(28,26,22,0.10);
  box-shadow: 0 30px 80px rgba(48,40,28,0.20);
}
.avmenu__head { padding: 4px 18px 12px; }
.avmenu__name {
  display: flex; align-items: center; gap: 10px;
  font-weight: 800; font-size: 15px;
  letter-spacing: 0.02em;
}
.avmenu__tier { flex: 0 0 auto; }
.avmenu__email { color: var(--text-mute); font-size: 12px; margin-top: 4px; }
.avmenu__divider { height: 1px; background: var(--line); margin: 4px 18px; }

.avmenu__sessions {
  display: grid;
  grid-template-columns: 24px 1fr 16px;
  align-items: center; gap: 12px;
  width: calc(100% - 16px); margin: 4px 8px;
  padding: 10px 12px;
  border-radius: 8px;
  text-align: left; color: var(--text);
  background: transparent;
}
.avmenu__sessions:hover { background: rgba(255,255,255,0.04); }
.avmenu__sessions-icon { color: var(--text-dim); display: grid; place-items: center; }
.avmenu__sessions-main { min-width: 0; }
.avmenu__sessions-title { font-weight: 600; font-size: 13px; display: block; }
.avmenu__sessions-count { color: var(--text-mute); font-weight: 500; }
.avmenu__sessions-sub {
  display: block; color: var(--text-mute); font-size: 11px;
  font-family: "JetBrains Mono", monospace;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  margin-top: 2px;
}
.avmenu__sessions-caret { color: var(--text-mute); display: grid; place-items: center; }

.avmenu__sesslist {
  list-style: none; padding: 0 8px 6px; margin: 0;
}
.avmenu__sessitem {
  display: grid;
  grid-template-columns: 8px 1fr auto auto;
  align-items: center; gap: 10px;
  padding: 8px 12px;
  border-radius: 6px;
  color: var(--text-dim);
}
.avmenu__sessitem:hover { background: rgba(255,255,255,0.03); }
.avmenu__sessitem-dot {
  width: 6px; height: 6px; border-radius: 999px;
  background: var(--text-mute);
}
.avmenu__sessitem.is-here .avmenu__sessitem-dot {
  background: oklch(0.72 0.18 145);
  box-shadow: 0 0 8px oklch(0.72 0.18 145 / 0.6);
}
.avmenu__sessitem-main { min-width: 0; }
.avmenu__sessitem-device { display: block; color: var(--text); font-size: 12.5px; font-weight: 500; }
.avmenu__sessitem-ip {
  display: block; color: var(--text-mute); font-size: 10.5px;
  font-family: "JetBrains Mono", monospace;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.avmenu__sessitem-when { color: var(--text-mute); font-size: 11px; }
.avmenu__sessitem-confirm {
  display: inline-flex; align-items: center; gap: 6px;
  margin-left: auto;
}
.avmenu__sessitem-confirm-q {
  font-size: 11px; color: var(--text); font-weight: 500;
  white-space: nowrap;
}
.avmenu__sessitem-confirm-yes,
.avmenu__sessitem-confirm-no {
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.04);
  color: var(--text);
  height: 22px; padding: 0 8px;
  border-radius: 6px;
  font-size: 11px; font-weight: 600;
  cursor: pointer;
}
.avmenu__sessitem-confirm-yes {
  background: var(--accent); color: #1a1411;
  border-color: transparent;
}
.avmenu__sessitem-confirm-no:hover { background: rgba(255,255,255,0.08); }
.avmenu__sessitem.is-confirming { background: rgba(255,255,255,0.04); }
.avmenu__sessitem-here {
  font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase;
  color: oklch(0.72 0.18 145);
}
.avmenu__sessitem-rm {
  width: 22px; height: 22px; border-radius: 6px;
  display: grid; place-items: center;
  color: var(--text-mute);
  background: transparent;
}
.avmenu__sessitem-rm:hover { background: rgba(255,255,255,0.06); color: var(--text); }

.avmenu__item {
  display: grid;
  grid-template-columns: 24px 1fr;
  align-items: center; gap: 12px;
  width: calc(100% - 16px); margin: 1px 8px;
  padding: 10px 12px;
  border-radius: 8px;
  text-align: left; color: var(--text);
  background: transparent;
  font-size: 13.5px;
}
.avmenu__item:hover { background: rgba(255,255,255,0.05); }
.avmenu__item .icon { color: var(--text-dim); width: 16px; height: 16px; }
.avmenu__item-sub {
  margin-left: 4px;
  color: color-mix(in oklch, var(--text) 58%, transparent);
  font-size: 12px;
  font-weight: 500;
}
.avmenu__item--upgrade {
  color: #071014;
  background:
    linear-gradient(180deg,
      color-mix(in oklch, var(--accent) 96%, white 12%),
      color-mix(in oklch, var(--accent) 82%, black 14%));
  border: 1px solid color-mix(in oklch, var(--accent) 82%, white 18%);
  box-shadow: 0 12px 30px color-mix(in oklch, var(--accent) 28%, transparent);
  text-decoration: none;
}
.avmenu__item--upgrade:hover {
  background:
    linear-gradient(180deg,
      color-mix(in oklch, var(--accent) 98%, white 16%),
      color-mix(in oklch, var(--accent) 86%, black 12%));
}
.avmenu__item--upgrade .icon,
.avmenu__item--upgrade .avmenu__item-sub {
  color: rgba(7, 16, 20, 0.72);
}
.avmenu__item--admin { color: oklch(0.85 0.16 92); }
.avmenu__item--admin .icon { color: oklch(0.85 0.16 92); }
.avmenu__item--migrator {
  color: oklch(0.82 0.10 var(--accent-hue));
  text-decoration: none;
}
.avmenu__item--migrator .icon { color: oklch(0.82 0.10 var(--accent-hue)); }
.avmenu__item--cards {
  color: oklch(0.86 0.12 74);
  text-decoration: none;
}
.avmenu__item--cards .icon { color: oklch(0.86 0.12 74); }
.avmenu__item--logout { color: oklch(0.66 0.22 var(--accent-hue)); }
.avmenu__item--logout .icon { color: oklch(0.66 0.22 var(--accent-hue)); }

.avmenu__theme { padding: 10px 18px 6px; }
.avmenu__theme-label {
  font-size: 10px; letter-spacing: 0.14em;
  color: var(--text-mute); margin-bottom: 8px;
}
.avmenu__theme-row {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px;
}

.avmenu__hue { padding: 12px 18px 14px; }
.avmenu__hue-reset {
  font-size: 10.5px; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--text-dim);
  background: transparent;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 3px 9px;
  cursor: pointer;
  margin-left: auto; margin-right: 8px;
  transition: color 120ms ease, border-color 120ms ease, background 120ms ease;
}
.avmenu__hue-reset:hover {
  color: var(--text);
  background: var(--bg-3);
  border-color: var(--line-strong);
}
.avmenu__hue-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 8px;
}
.avmenu__hue-swatch {
  width: 18px; height: 18px; border-radius: 999px;
  border: 1px solid oklch(1 0 0 / 0.10);
  box-shadow: 0 0 0 0.5px rgba(255,255,255,0.05), 0 0 8px oklch(0.74 0.14 var(--accent-hue) / 0.45);
}
.avmenu__hue-range {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 10px; border-radius: 999px; outline: none; cursor: pointer;
  background: linear-gradient(to right,
    oklch(0.74 0.14 0),    oklch(0.74 0.14 30),  oklch(0.74 0.14 60),
    oklch(0.74 0.14 90),   oklch(0.74 0.14 120), oklch(0.74 0.14 150),
    oklch(0.74 0.14 180),  oklch(0.74 0.14 210), oklch(0.74 0.14 240),
    oklch(0.74 0.14 270),  oklch(0.74 0.14 300), oklch(0.74 0.14 330),
    oklch(0.74 0.14 360));
  border: 1px solid oklch(1 0 0 / 0.08);
}
/* Thumb stays a neutral white puck so it reads against every hue stop on the rainbow track. */
.avmenu__hue-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px; height: 18px; border-radius: 999px;
  background: #fff;
  border: 2px solid rgba(0,0,0,0.35);
  box-shadow: 0 1px 6px rgba(0,0,0,0.55), 0 0 0 0.5px oklch(1 0 0 / 0.18);
  cursor: pointer;
}
.avmenu__hue-range::-moz-range-thumb {
  width: 18px; height: 18px; border-radius: 999px;
  background: #fff;
  border: 2px solid rgba(0,0,0,0.35);
  box-shadow: 0 1px 6px rgba(0,0,0,0.55);
  cursor: pointer;
}
:root[data-theme="light"] .avmenu__hue-range {
  border-color: oklch(0 0 0 / 0.10);
}
.avmenu__accent-favs {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 20px;
  padding-top: 10px;
}
.avmenu__accent-fav-wrap {
  position: relative;
  display: inline-flex;
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
}
.avmenu__accent-fav {
  width: 18px;
  height: 18px;
  min-width: 18px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.14);
  padding: 0;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 4px 12px rgba(0,0,0,0.22);
  transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease;
}
.avmenu__accent-fav-remove {
  position: absolute;
  right: -5px;
  top: -6px;
  width: 13px;
  height: 13px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.35);
  background: rgba(7,7,11,0.92);
  color: rgba(255,255,255,0.88);
  display: grid;
  place-items: center;
  padding: 0;
  font-size: 10px;
  line-height: 1;
  cursor: pointer;
}
.avmenu__accent-fav-remove:hover {
  color: #fff;
  border-color: rgba(255,255,255,0.65);
}
.avmenu__accent-fav:hover {
  transform: scale(1.08);
  border-color: var(--accent);
}
.avmenu__accent-fav.is-active {
  transform: scale(1.08);
  border-color: #fff;
  box-shadow:
    0 0 0 1.5px var(--accent),
    inset 0 1px 0 rgba(255,255,255,0.24),
    0 6px 16px rgba(0,0,0,0.30);
}
.avmenu__accent-fav--add {
  display: grid;
  place-items: center;
  background: transparent;
  border: 1px dashed rgba(255,255,255,0.28);
  color: var(--text-dim);
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  box-shadow: none;
}
.avmenu__accent-fav--add:hover {
  color: var(--text);
  border-color: var(--accent);
  background: color-mix(in oklch, var(--accent) 10%, transparent);
}
.avmenu__theme-btn {
  padding: 9px 0;
  border-radius: 8px;
  background: transparent;
  border: 1px solid var(--line-strong);
  color: var(--text-dim);
  font-size: 12.5px;
  cursor: pointer;
  transition: background 120ms, color 120ms, border-color 120ms;
}
.avmenu__theme-btn:hover { color: var(--text); border-color: var(--line); }
.avmenu__theme-btn.is-active {
  background: rgba(255,255,255,0.08);
  color: var(--text);
  border-color: rgba(255,255,255,0.2);
}

/* light-mode tweaks for the menu */
:root[data-theme="light"] .avmenu__sessions:hover,
:root[data-theme="light"] .avmenu__item:hover { background: rgba(28,26,22,0.05); }
:root[data-theme="light"] .avmenu__sessitem-rm:hover { background: rgba(28,26,22,0.06); }
:root[data-theme="light"] .avmenu__accent-fav { border-color: rgba(0,0,0,0.18); }
:root[data-theme="light"] .avmenu__accent-fav--add { color: rgba(0,0,0,0.46); border-color: rgba(0,0,0,0.22); }

/* =====================================================================
   Beta feedback modal
   ===================================================================== */
.bfm-backdrop {
  position: fixed; inset: 0; z-index: 9200;
  background: radial-gradient(120% 80% at 50% 20%, rgba(40,30,25,0.55), rgba(0,0,0,0.7));
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  display: grid; place-items: center;
  padding: 32px 16px;
  animation: bfm-fade 180ms ease-out;
}
@keyframes bfm-fade { from { opacity: 0 } to { opacity: 1 } }
.bfm-modal {
  position: relative;
  width: min(640px, 100%);
  max-height: calc(100vh - 64px);
  overflow: auto;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.015)),
    rgba(20, 18, 22, 0.55);
  backdrop-filter: blur(36px) saturate(1.4);
  -webkit-backdrop-filter: blur(36px) saturate(1.4);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 22px;
  padding: 32px;
  color: var(--text, #f4f1ec);
  box-shadow:
    0 32px 80px rgba(0,0,0,0.55),
    0 0 0 1px rgba(255,255,255,0.04) inset,
    0 1px 0 rgba(255,255,255,0.18) inset;
  animation: bfm-rise 220ms cubic-bezier(.2,.8,.2,1);
}
.bfm-modal::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    radial-gradient(80% 50% at 0% 0%, rgba(255,255,255,0.06), transparent 60%),
    radial-gradient(70% 50% at 100% 100%, color-mix(in oklch, var(--accent) 10%, transparent), transparent 60%);
  mix-blend-mode: screen;
}
@keyframes bfm-rise {
  from { opacity: 0; transform: translateY(8px) scale(0.985) }
  to   { opacity: 1; transform: none }
}
.bfm-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
}
.bfm-title {
  margin: 0; font-size: 26px; font-weight: 700; letter-spacing: -0.01em;
}
.bfm-close {
  width: 32px; height: 32px; border-radius: 8px;
  background: transparent; border: 1px solid transparent;
  color: var(--text-mute, #888);
  display: grid; place-items: center; cursor: pointer;
  transition: background 120ms, color 120ms;
}
.bfm-close:hover { background: rgba(255,255,255,0.06); color: var(--text); }
.bfm-prompt {
  margin: 14px 0 18px; color: var(--text-dim, #b9b3a8);
  font-size: 15px; line-height: 1.45;
}
.bfm-textarea {
  width: 100%; min-height: 160px; box-sizing: border-box;
  background: rgba(255,255,255,0.04);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 14px;
  color: var(--text);
  font: inherit; font-size: 15px; line-height: 1.5;
  padding: 14px 16px; resize: vertical;
  field-sizing: content;
  overflow-y: auto;
  outline: none;
  box-shadow: 0 1px 0 rgba(255,255,255,0.06) inset;
  transition: border-color 160ms, box-shadow 160ms, background 160ms;
}
.bfm-textarea::placeholder { color: var(--text-mute, #6e6a62); }
.bfm-textarea:focus {
  border-color: color-mix(in oklch, var(--accent) 60%, transparent);
  background: rgba(255,255,255,0.06);
  box-shadow:
    0 0 0 3px color-mix(in oklch, var(--accent) 22%, transparent),
    0 1px 0 rgba(255,255,255,0.08) inset;
}
.bfm-include {
  margin-top: 18px;
  background: rgba(255,255,255,0.03);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  padding: 14px 18px;
  box-shadow: 0 1px 0 rgba(255,255,255,0.05) inset;
}
.bfm-include-toggle {
  background: transparent; border: 0; color: var(--text);
  font: inherit; font-size: 14px; font-weight: 600;
  display: inline-flex; align-items: center; gap: 6px;
  cursor: pointer; padding: 0;
}
.bfm-include-caret {
  display: inline-block; transition: transform 140ms;
  font-size: 11px; color: var(--text-mute);
}
.bfm-include:not(.is-open) .bfm-include-caret { transform: rotate(-90deg); }
.bfm-include-grid {
  margin-top: 14px;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 14px 24px;
}
@media (max-width: 540px) {
  .bfm-include-grid { grid-template-columns: 1fr; }
}
.bfm-include-item {
  display: grid; grid-template-columns: 18px 1fr; gap: 10px;
  align-items: start; cursor: pointer;
}
.bfm-include-item input[type="checkbox"] {
  width: 18px; height: 18px;
  accent-color: var(--accent);
  margin-top: 1px;
}
.bfm-include-text { display: grid; gap: 2px; }
.bfm-include-label {
  font-size: 14px; font-weight: 500; color: var(--text);
}
.bfm-include-sub {
  font-size: 12px; color: var(--text-mute, #6e6a62);
}
.bfm-foot {
  margin-top: 22px;
  display: flex; align-items: center; justify-content: flex-end;
  gap: 10px;
}
.bfm-btn {
  height: 40px; padding: 0 20px; border-radius: 10px;
  font: inherit; font-size: 14px; font-weight: 600;
  border: 1px solid transparent; cursor: pointer;
  transition: background 120ms, border-color 120ms, transform 120ms, opacity 120ms;
}
.bfm-btn:disabled { opacity: 0.45; cursor: default; }
.bfm-btn--secondary {
  background: rgba(255,255,255,0.05);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: var(--text);
  border-color: rgba(255,255,255,0.14);
  border-radius: 999px;
  box-shadow: 0 1px 0 rgba(255,255,255,0.06) inset;
}
.bfm-btn--secondary:hover { background: rgba(255,255,255,0.10); border-color: rgba(255,255,255,0.22); }
.bfm-btn--primary {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.16), rgba(255,255,255,0)),
    var(--accent, oklch(68% 0.2 var(--accent-hue, 45)));
  color: #1a0e02;
  border-radius: 999px;
  box-shadow: 0 1px 0 rgba(255,255,255,0.4) inset, 0 8px 24px color-mix(in oklch, var(--accent) 30%, transparent);
}
.bfm-btn--primary:not(:disabled):hover { transform: translateY(-1px); filter: brightness(1.05); }
.bfm-sent {
  flex: 1; text-align: right; color: var(--accent); font-weight: 600;
  font-size: 14px;
}

/* light mode */
:root[data-theme="light"] .bfm-modal {
  background: var(--bg-1, #f6f1e8);
  border-color: rgba(28,26,22,0.12);
}
:root[data-theme="light"] .bfm-textarea {
  background: rgba(28,26,22,0.04);
}
:root[data-theme="light"] .bfm-include {
  background: rgba(28,26,22,0.03);
  border-color: rgba(28,26,22,0.1);
}
:root[data-theme="light"] .bfm-btn--secondary {
  border-color: rgba(28,26,22,0.18);
}
:root[data-theme="light"] .bfm-btn--secondary:hover { background: rgba(28,26,22,0.06); }
:root[data-theme="light"] .bfm-close:hover { background: rgba(28,26,22,0.06); }
:root[data-theme="light"] .avmenu__theme-btn.is-active {
  background: rgba(28,26,22,0.06);
  border-color: rgba(28,26,22,0.18);
}

/* =====================================================================
   Light mode — nested tracks readability
   ===================================================================== */
:root[data-theme="light"] .child-row .cell { color: oklch(0.32 0.02 var(--accent-hue)); }
:root[data-theme="light"] .row__title--child {
  color: oklch(0.28 0.02 var(--accent-hue)); font-weight: 500;
}
:root[data-theme="light"] .child-row__kind {
  color: oklch(0.42 0.02 var(--accent-hue));
  background: rgba(28,26,22,0.05);
  border: 1px solid rgba(28,26,22,0.08);
}
:root[data-theme="light"] .child-row--hover .row__title--child {
  color: oklch(0.30 0.16 var(--ah, 50));
}
:root[data-theme="light"] .nest__children {
  background: linear-gradient(180deg, rgba(28,26,22,0.025), rgba(28,26,22,0.01));
}

/* =====================================================================
   Cmd-K search modal
   ===================================================================== */
.cmdk-root {
  position: fixed; inset: 0; z-index: 12000;
  display: flex; align-items: flex-start; justify-content: center;
  padding: min(12vh, 96px) 16px 24px;
}
.cmdk-backdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.40);
  backdrop-filter: blur(8px) saturate(0.9);
  -webkit-backdrop-filter: blur(8px) saturate(0.9);
}
:root[data-theme="light"] .cmdk-backdrop { background: rgba(0,0,0,0.28); }
.cmdk-panel {
  position: relative;
  width: min(600px, calc(100vw - 32px));
  max-height: min(720px, calc(100dvh - 48px));
  background:
    linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02) 40%, rgba(255,255,255,0.04)),
    rgba(18,18,22,0.62);
  backdrop-filter: blur(40px) saturate(1.8);
  -webkit-backdrop-filter: blur(40px) saturate(1.8);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 20px;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.10) inset,
    0 -1px 0 rgba(0,0,0,0.4) inset,
    0 40px 120px rgba(0,0,0,0.65),
    0 0 0 1px rgba(255,255,255,0.04);
  display: flex; flex-direction: column;
  color: var(--text);
  overflow: hidden;
}
:root[data-theme="light"] .cmdk-panel {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.85), rgba(255,255,255,0.55) 40%, rgba(255,255,255,0.70)),
    rgba(246,244,239,0.55);
  border-color: rgba(255,255,255,0.6);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.9) inset,
    0 -1px 0 rgba(28,26,22,0.06) inset,
    0 40px 120px rgba(48,40,28,0.22),
    0 0 0 1px rgba(28,26,22,0.04);
}
.cmdk-head {
  display: flex; flex-direction: column; align-items: stretch; gap: 8px;
  padding: 16px;
  border-bottom: 1px solid var(--line);
}
.cmdk-close {
  width: 32px; height: 32px; border-radius: 999px;
  display: grid; place-items: center;
  color: var(--text-dim); background: transparent;
}
.cmdk-close:hover { background: rgba(255,255,255,0.06); color: var(--text); }
.cmdk-input {
  flex: 1;
  display: flex; align-items: center; gap: 12px;
  min-height: 64px;
  padding: 0 18px;
  border-radius: 14px;
  background: rgba(255,255,255,0.055);
  border: 1px solid oklch(0.74 0.14 var(--accent-hue) / 0.55);
  box-shadow:
    0 0 0 1px oklch(0.74 0.14 var(--accent-hue) / 0.10),
    0 0 18px -4px oklch(0.74 0.14 var(--accent-hue) / 0.30);
  transition: border-color 160ms, box-shadow 160ms;
}
.cmdk-input:focus-within {
  border-color: oklch(0.74 0.14 var(--accent-hue) / 0.85);
  box-shadow:
    0 0 0 1px oklch(0.74 0.14 var(--accent-hue) / 0.30),
    0 0 28px -2px oklch(0.74 0.14 var(--accent-hue) / 0.45);
}
:root[data-theme="light"] .cmdk-input {
  background: rgba(255,255,255,0.6);
  border-color: oklch(0.55 0.16 var(--accent-hue) / 0.45);
}
.cmdk-input .icon { color: oklch(0.74 0.14 var(--accent-hue) / 0.85); width: 20px; height: 20px; }
.cmdk-input input {
  flex: 1;
  font-family: "Inter", sans-serif;
  font-size: 18px;
  line-height: 20px;
  color: var(--text);
  background: transparent; border: 0; outline: none;
}
.cmdk-input input::placeholder { color: color-mix(in srgb, var(--text-mute) 78%, white 22%); }
.cmdk-live {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
.cmdk-clear {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
  color: var(--text-dim);
  font-size: 18px;
  line-height: 1;
}
.cmdk-clear:hover {
  background: rgba(255,255,255,0.10);
  color: var(--text);
}
.cmdk-save {
  height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in oklch, var(--accent) 15%, transparent);
  border: 1px solid color-mix(in oklch, var(--accent) 34%, transparent);
  color: var(--text);
  font-size: 11px;
  font-weight: 600;
}
.cmdk-save:hover {
  background: color-mix(in oklch, var(--accent) 24%, transparent);
}
.cmdk-save-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 28px;
  gap: 8px;
  align-items: center;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--accent) 26%, transparent);
  background: color-mix(in srgb, var(--accent) 7%, rgba(255,255,255,0.02));
}
.cmdk-save-form label {
  grid-column: 1 / -1;
  color: var(--text-mute);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}
.cmdk-save-form input {
  min-width: 0;
  height: 32px;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 8px;
  background: rgba(0,0,0,0.16);
  color: var(--text);
  padding: 0 10px;
  font: inherit;
  font-size: 13px;
  outline: none;
}
.cmdk-save-form input:focus {
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
}
.cmdk-save-form__create,
.cmdk-save-form__cancel {
  height: 32px;
  border-radius: 8px;
  font: inherit;
  cursor: pointer;
}
.cmdk-save-form__create {
  padding: 0 12px;
  border: 1px solid color-mix(in srgb, var(--accent) 44%, transparent);
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  color: var(--text);
  font-size: 12px;
  font-weight: 700;
}
.cmdk-save-form__cancel {
  width: 28px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.04);
  color: var(--text-dim);
  font-size: 17px;
  line-height: 1;
}
.cmdk-save-form__create:hover,
.cmdk-save-form__cancel:hover {
  color: var(--text);
  background: rgba(255,255,255,0.09);
}
.cmdk-mic {
  width: 32px; height: 32px; border-radius: 999px;
  display: grid; place-items: center;
  background: transparent; color: var(--text-dim);
  position: relative;
}
.cmdk-mic:hover { color: var(--text); }
.cmdk-mic.is-listening { color: oklch(0.66 0.22 var(--accent-hue)); }
.cmdk-status {
  min-height: 14px;
  padding: 0 16px;
  color: var(--text-dim);
  font-size: 12px;
  line-height: 1.25;
}
.cmdk-mic__pulse {
  position: absolute; inset: -2px; border-radius: 999px;
  border: 2px solid oklch(0.66 0.22 var(--accent-hue));
  animation: cmdk-pulse 1s ease-out infinite;
}
@keyframes cmdk-pulse {
  0%   { transform: scale(0.85); opacity: 0.9; }
  100% { transform: scale(1.6);  opacity: 0;   }
}
.cmdk-filters {
  position: relative;
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
  gap: 6px 6px;
  padding: 10px 5px 12px;
  overflow: visible;
  scrollbar-width: none;
}
.cmdk-filters::-webkit-scrollbar { display: none; }
.cmdk-pill {
  flex: 0 0 auto;
  white-space: nowrap;
  scroll-snap-align: start;
  padding: 6px 14px; border-radius: 999px;
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.08);
  color: var(--text-dim);
  font-size: 12.5px; font-weight: 500;
  letter-spacing: 0.005em;
  cursor: pointer;
  transition: background 140ms, color 140ms, border-color 140ms, box-shadow 140ms, transform 140ms;
}
.cmdk-pill:hover {
  color: var(--text);
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.16);
}
.cmdk-pill.is-active {
  background: linear-gradient(180deg, oklch(0.74 0.14 var(--accent-hue) / 0.22), oklch(0.74 0.14 var(--accent-hue) / 0.08));
  color: oklch(0.92 0.06 var(--accent-hue));
  border-color: oklch(0.74 0.14 var(--accent-hue) / 0.55);
  box-shadow:
    0 1px 0 oklch(0.74 0.14 var(--accent-hue) / 0.18) inset,
    0 -1px 0 rgba(0,0,0,0.25) inset,
    0 2px 14px -4px oklch(0.74 0.14 var(--accent-hue) / 0.55);
}
:root[data-theme="light"] .cmdk-pill {
  background: rgba(28,26,22,0.02);
  border-color: rgba(28,26,22,0.10);
}
:root[data-theme="light"] .cmdk-pill:hover {
  background: rgba(28,26,22,0.05);
  border-color: rgba(28,26,22,0.16);
}
:root[data-theme="light"] .cmdk-pill.is-active {
  background: linear-gradient(180deg, oklch(0.55 0.16 var(--accent-hue) / 0.18), oklch(0.55 0.16 var(--accent-hue) / 0.06));
  border-color: oklch(0.55 0.16 var(--accent-hue) / 0.45);
  color: oklch(0.36 0.16 var(--accent-hue));
  box-shadow:
    0 1px 0 rgba(255,255,255,0.6) inset,
    0 -1px 0 rgba(28,26,22,0.06) inset,
    0 2px 10px -2px oklch(0.55 0.16 var(--accent-hue) / 0.35);
}

.cmdk-body {
  flex: 1;
  min-height: 120px;
  max-height: min(540px, calc(100dvh - 220px));
  overflow: auto;
  padding: 8px 8px 12px;
}
.cmdk-body--palette {
  padding-top: 10px;
}
.cmdk-group + .cmdk-group {
  margin-top: 8px;
}
.cmdk-empty {
  color: var(--text-mute); font-size: 14px;
  padding: 46px 20px;
  text-align: center;
  line-height: 1.5;
}
.cmdk-empty--suggestions {
  padding: 28px 12px;
}
.cmdk-empty--suggestions p {
  margin: 0 0 14px;
}
.cmdk-empty b { color: var(--text); font-weight: 500; }
.cmdk-section {
  font-size: 10px; letter-spacing: 0.14em;
  color: var(--text-mute);
  text-transform: uppercase;
  padding: 10px 14px 6px;
}
.cmdk-list { list-style: none; padding: 0; margin: 0; }
.cmdk-row {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) max-content;
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 12px;
  row-gap: 3px;
  padding: 10px 14px;
  margin: 1px 4px; border-radius: 8px;
  cursor: pointer;
  color: var(--text);
  min-width: 0;
  overflow: hidden;
}
.cmdk-row.is-active {
  background: oklch(0.74 0.14 var(--accent-hue) / 0.10);
  box-shadow: inset 2px 0 0 oklch(0.74 0.14 var(--accent-hue) / 0.85);
}
.cmdk-row:focus-visible {
  outline: 2px solid oklch(0.74 0.14 var(--accent-hue) / 0.95);
  outline-offset: 2px;
}
.cmdk-row.is-active .cmdk-row__icon { color: oklch(0.82 0.10 var(--accent-hue)); }
:root[data-theme="light"] .cmdk-row.is-active {
  background: oklch(0.55 0.16 var(--accent-hue) / 0.10);
  box-shadow: inset 2px 0 0 oklch(0.55 0.16 var(--accent-hue));
}
.cmdk-row__icon { color: var(--text-mute); display: grid; place-items: center; grid-row: 1 / span 2; }
.cmdk-row__icon--art {
  width: 28px;
  height: 28px;
  overflow: hidden;
  border-radius: 6px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
}
.cmdk-row__art {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.cmdk-row__main { grid-column: 2; font-size: 14px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmdk-row__main mark {
  background: transparent;
  color: var(--accent);
  font-weight: 600;
}
.cmdk-row__meta {
  grid-column: 2;
  color: var(--text-mute); font-size: 12px;
  font-family: inherit; letter-spacing: 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cmdk-row__match {
  appearance: none;
  border: 1px solid rgba(139,111,232,0.34);
  background: rgba(139,111,232,0.13);
  color: oklch(0.82 0.10 var(--accent-hue));
  border-radius: 999px;
  padding: 2px 6px;
  margin-right: 6px;
  font: inherit;
  font-size: 9px;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  vertical-align: 1px;
}
.cmdk-row__match--artist { border-color: rgba(82,211,255,0.38); background: rgba(82,211,255,0.12); color: #8fe5ff; }
.cmdk-row__match--writer { border-color: rgba(255,206,113,0.38); background: rgba(255,206,113,0.12); color: #ffd98a; }
.cmdk-row__match--title { border-color: rgba(255,255,255,0.22); background: rgba(255,255,255,0.07); color: var(--text); }
.cmdk-row__match-value { min-width: 0; }
.cmdk-row__kind {
  grid-column: 3;
  grid-row: 1 / span 2;
  justify-self: end;
  min-width: 0;
  max-width: 84px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 3px 7px;
  border-radius: 999px;
  background: rgba(255,255,255,0.045);
  border: 1px solid rgba(255,255,255,0.08);
  color: var(--text-mute);
  font-size: 10px;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.cmdk-row__remove {
  grid-column: 3;
  grid-row: 1 / span 2;
  justify-self: end;
  align-self: center;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.035);
  color: var(--text-dim);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}
.cmdk-row__remove:hover,
.cmdk-row__remove:focus-visible {
  color: var(--text);
  background: rgba(255,255,255,0.09);
}
.cmdk-row__shortcut {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--text-mute);
  font-size: 11px;
  white-space: nowrap;
}
.cmdk-row__shortcut kbd {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 5px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  color: var(--text);
  font-family: inherit;
  font-size: 11px;
}
.cmdk-row__rm {
  width: 22px; height: 22px; border-radius: 6px;
  display: grid; place-items: center;
  color: var(--text-mute); background: transparent;
  opacity: 0; transition: opacity 120ms;
}
.cmdk-row:hover .cmdk-row__rm { opacity: 1; }
.cmdk-row__rm:hover { background: rgba(255,255,255,0.08); color: var(--text); }

/* Smart-search: clicking a result expands an action sub-row beneath it
   with options to jump-to-track or filter the library. */
.cmdk-row__chev {
  width: 22px; height: 22px; display: grid; place-items: center;
  color: var(--text-mute);
  transition: color 120ms;
}
.cmdk-row.is-expanded {
  background: oklch(0.74 0.14 var(--accent-hue) / 0.10);
  box-shadow: inset 2px 0 0 oklch(0.74 0.14 var(--accent-hue) / 0.85);
}
:root[data-theme="light"] .cmdk-row.is-expanded {
  background: oklch(0.55 0.16 var(--accent-hue) / 0.10);
  box-shadow: inset 2px 0 0 oklch(0.55 0.16 var(--accent-hue));
}
.cmdk-row.is-expanded .cmdk-row__chev { color: oklch(0.82 0.10 var(--accent-hue)); }
.cmdk-actions {
  list-style: none;
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 4px 16px 12px 48px;
  margin: -2px 4px 4px;
}
.cmdk-action {
  display: inline-flex; align-items: center; gap: 6px;
  height: 26px; padding: 0 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  color: var(--text-dim);
  font-size: 12px; font-family: "Inter", sans-serif;
  cursor: pointer;
  transition: background 120ms, color 120ms, border-color 120ms;
}
.cmdk-action:hover {
  background: rgba(255,255,255,0.09);
  color: var(--text);
  border-color: rgba(255,255,255,0.14);
}
.cmdk-action .icon { width: 12px; height: 12px; }
.cmdk-action--primary {
  background: var(--accent);
  border-color: transparent;
  color: #0a0a0c;
}
.cmdk-action--primary:hover {
  background: var(--accent);
  color: #0a0a0c;
  filter: brightness(1.06);
}
:root[data-theme="light"] .cmdk-action {
  background: rgba(28,26,22,0.05);
  border-color: rgba(28,26,22,0.10);
}
:root[data-theme="light"] .cmdk-action:hover {
  background: rgba(28,26,22,0.09);
  border-color: rgba(28,26,22,0.16);
}
.cmdk-foot {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 10px 16px;
  border-top: 1px solid var(--line);
  color: var(--text-mute); font-size: 11.5px;
}
.cmdk-keys { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.cmdk-key { display: inline-flex; align-items: center; gap: 6px; }
.cmdk-key kbd {
  display: inline-grid; place-items: center;
  min-width: 22px; height: 22px; padding: 0 6px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 5px;
  font-family: inherit;
  font-size: 11px; color: var(--text);
}
:root[data-theme="light"] .cmdk-key kbd {
  background: rgba(28,26,22,0.06);
  border-color: rgba(28,26,22,0.12);
}
/* Desktop: keep the new mobile-only Close button hidden, keyboard hints
   remain the primary affordance. The mobile @media block re-shows it. */
.cmdk-close-mobile { display: none; }

@media (max-width: 600px) {
  /* v0.2.0.511 (Tommy 2026-05-16 01:51 PT "on mobile in cant exit the
     smart search. also move the search bar to the bottom for easier
     access on mobile only"): reverse the cmdk panel so the input sits
     at the bottom (thumb reach), expose a close affordance, and let
     the body fill the available space. */
  .cmdk-root {
    padding: 0;
    align-items: flex-end;   /* stick the panel to the bottom of the viewport */
  }
  .cmdk-panel {
    width: 100vw;
    max-height: 92dvh;
    border-radius: 16px 16px 0 0;
    display: flex;
    flex-direction: column-reverse;   /* input + chips at the bottom */
  }
  .cmdk-head {
    padding: 12px;
    /* The head visually sits at the bottom now; add a small grab-handle gap. */
    border-top: 1px solid var(--line);
    border-bottom: 0;
  }
  .cmdk-input {
    min-height: 60px;
    padding: 0 14px;
  }
  .cmdk-input input {
    font-size: 17px;
  }
  .cmdk-body {
    max-height: calc(92dvh - 80px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  /* Surface the existing footer slot as the close affordance on mobile.
     The .cmdk-foot was previously display:none which broke "exit". */
  .cmdk-foot {
    display: flex;
    justify-content: center;
    padding: 10px 16px max(12px, env(safe-area-inset-bottom));
    background: var(--bg-1);
    border-top: 1px solid var(--line);
    position: sticky;
    bottom: 0;
  }
  /* Hide the keyboard hints on mobile (they don't apply to touch), show
     the Close button. */
  .cmdk-foot .cmdk-keys { display: none; }
  .cmdk-foot .cmdk-close-mobile {
    display: block;
    width: 100%;
    padding: 12px;
    border-radius: 12px;
    background: var(--bg-3);
    border: 1px solid var(--line-strong);
    color: var(--text);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
  }
}

/* =====================================================================
   Edit profile modal
   ===================================================================== */
.profmodal__sphere {
  display: inline-block; flex-shrink: 0;
}

/* 2FA sub-modal */
.profmodal-2fa-root {
  position: fixed; inset: 0; z-index: 10000;
  display: grid; place-items: center;
}
.profmodal-2fa-backdrop {
  position: absolute; inset: 0;
  background: oklch(0 0 0 / 0.55);
  backdrop-filter: blur(4px);
}
.profmodal-2fa {
  position: relative;
  width: min(560px, calc(100vw - 32px));
  max-height: calc(100vh - 64px);
  overflow: auto;
  background: oklch(0.13 0.005 var(--accent-hue) / 0.95);
  border: 1px solid oklch(1 0 0 / 0.08);
  border-radius: 16px;
  box-shadow: 0 30px 60px -10px rgba(0,0,0,0.6);
  animation: profmodal-pop 180ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes profmodal-pop {
  from { opacity: 0; transform: translateY(6px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
:root[data-theme="light"] .profmodal-2fa {
  background: oklch(0.98 0.01 var(--accent-hue) / 0.97);
  border-color: oklch(0 0 0 / 0.08);
}
.profmodal-2fa__head {
  display: flex; justify-content: space-between; align-items: flex-start;
  padding: 18px 22px; border-bottom: 1px solid var(--line);
  gap: 10px;
}
.profmodal-2fa__title { font-size: 18px; font-weight: 700; color: var(--text); margin: 0; }
.profmodal-2fa__subtitle { font-size: 13px; color: var(--text-dim); margin: 2px 0 0; }
.profmodal-2fa__body { padding: 20px 22px; display: grid; gap: 16px; }
.profmodal-2fa__qr-wrap { display: grid; place-items: center; padding: 6px; }
.profmodal-2fa__qr { border-radius: 10px; box-shadow: 0 0 0 4px #fff; }
.profmodal-2fa__secret-row { display: flex; gap: 8px; align-items: center; }
.profmodal-2fa__secret {
  flex: 1; font-family: 'JetBrains Mono', ui-monospace, monospace;
  background: var(--bg-3); border: 1px solid var(--line);
  border-radius: 8px; padding: 10px 12px;
  font-size: 12px; letter-spacing: 0.5px; color: var(--text);
  word-break: break-all;
}
.profmodal-2fa__codes {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px;
  list-style: none; padding: 0; margin: 0;
}
.profmodal-2fa__code {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  background: var(--bg-3); border: 1px solid var(--line);
  border-radius: 8px; padding: 10px 12px;
  font-size: 13px; color: var(--text); text-align: center;
  letter-spacing: 0.5px;
}
.profmodal-2fa__foot {
  display: flex; justify-content: flex-end; gap: 10px;
  padding: 16px 22px; border-top: 1px solid var(--line);
}
.profmodal__btn:disabled { opacity: 0.5; cursor: not-allowed; }
  position: fixed; inset: 0; z-index: 9500;
  display: grid; place-items: center;
  animation: profmodal-fade 180ms ease-out;
}
@keyframes profmodal-fade { from { opacity: 0; } to { opacity: 1; } }

.profmodal-root {
  position: fixed; inset: 0; z-index: 9500;
  display: grid; place-items: center;
  animation: profmodal-fade 0.18s ease-out;
}
.profmodal-backdrop {
  position: absolute; inset: 0;
  background: rgba(8, 8, 10, 0.55);
  backdrop-filter: blur(10px) saturate(0.9);
  -webkit-backdrop-filter: blur(10px) saturate(0.9);
}
:root[data-theme="light"] .profmodal-backdrop {
  background: rgba(48, 40, 28, 0.28);
}

/* Confirm-modal container — fixed full-viewport, centers panel + backdrop. */
.confirm-modal {
  position: fixed;
  inset: 0;
  z-index: 9500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  animation: cm-fade 0.16s ease-out;
}
.confirm-modal__backdrop {
  position: absolute; inset: 0;
  background: rgba(8, 8, 10, 0.55);
  backdrop-filter: blur(8px) saturate(0.9);
  -webkit-backdrop-filter: blur(8px) saturate(0.9);
}
:root[data-theme="light"] .confirm-modal__backdrop {
  background: rgba(48, 40, 28, 0.28);
}
.confirm-modal__panel {
  position: relative;
  width: min(520px, calc(100vw - 32px));
  background: var(--surface, oklch(13% 0.005 60));
  border: 1px solid var(--line, oklch(1 0 0 / 0.10));
  border-radius: 18px;
  padding: 26px 28px 22px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
  animation: cm-pop 0.18s cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes cm-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes cm-pop {
  from { transform: translateY(6px) scale(0.98); opacity: 0; }
  to   { transform: translateY(0) scale(1); opacity: 1; }
}
.confirm-modal__title { font-size: 20px; font-weight: 700; color: var(--text); margin-bottom: 10px; letter-spacing: -0.015em; }
.confirm-modal__body { font-size: 14px; color: var(--text-mute); line-height: 1.55; margin-bottom: 22px; }
.confirm-modal__body strong { color: var(--text); font-weight: 600; }
.confirm-modal__actions { display: flex; justify-content: flex-end; gap: 10px; }
.confirm-modal__btn {
  appearance: none;
  border: 1px solid var(--line-strong, oklch(1 0 0 / 0.18));
  background: transparent;
  color: var(--text-dim);
  padding: 9px 18px;
  border-radius: 999px;
  font-size: 13px; font-weight: 500;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s, transform 0.06s;
}
.confirm-modal__btn:hover { color: var(--text); border-color: var(--text-dim); }
.confirm-modal__btn:active { transform: translateY(1px); }
.confirm-modal__btn--danger { background: var(--text); color: #0a0a0a; border-color: var(--text); font-weight: 600; }
.confirm-modal__btn--danger:hover { filter: brightness(1.05); transform: translateY(-1px); }
.confirm-modal__panel--danger { border-color: color-mix(in oklch, oklch(62% 0.21 25) 60%, var(--line)); }

/* Native dialog (window.nd.confirm / window.nd.prompt) — input field uses confirm-modal vocabulary */
.nd-prompt__input {
  width: 100%;
  margin: -8px 0 18px;
  padding: 12px 14px;
  background: var(--surface-2, oklch(15% 0.005 60));
  border: 1px solid var(--line, oklch(1 0 0 / 0.10));
  border-radius: 10px;
  color: var(--text);
  font: 500 15px/1.4 var(--font-ui, system-ui);
  outline: none;
  transition: border-color 0.12s, box-shadow 0.12s;
}
.nd-prompt__input::placeholder { color: var(--text-mute); opacity: 0.55; font-style: italic; }
.nd-prompt__input:focus {
  border-color: color-mix(in oklch, var(--accent, oklch(78% 0.18 200)) 55%, var(--line));
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--accent, oklch(78% 0.18 200)) 18%, transparent);
}
:root[data-theme="light"] .nd-prompt__input {
  background: oklch(99% 0 0);
  border-color: oklch(0 0 0 / 0.12);
}
  position: fixed; inset: 0;
  z-index: 9500;
  display: grid; place-items: center;
  animation: profmodal-fade 0.16s ease-out;
}
.confirm-modal__backdrop {
  position: absolute; inset: 0;
  background: rgba(8, 8, 10, 0.55);
  backdrop-filter: blur(8px) saturate(0.9);
  -webkit-backdrop-filter: blur(8px) saturate(0.9);
}
:root[data-theme="light"] .confirm-modal__backdrop {
  background: rgba(48, 40, 28, 0.28);
}
.confirm-modal__panel {
  position: relative;
  width: min(520px, calc(100vw - 32px));
  background: oklch(0.18 0.005 var(--accent-hue));
  border: 1px solid oklch(1 0 0 / 0.08);
  border-radius: 18px;
  padding: 26px 28px 22px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
  animation: confirm-modal-pop 0.18s cubic-bezier(0.2, 0.8, 0.2, 1);
}
:root[data-theme="light"] .confirm-modal__panel {
  background: var(--surface);
  border-color: oklch(0 0 0 / 0.10);
  box-shadow: 0 30px 80px rgba(40, 28, 12, 0.20);
}
@keyframes confirm-modal-pop {
  from { transform: translateY(6px) scale(0.98); opacity: 0; }
  to   { transform: translateY(0) scale(1); opacity: 1; }
}
.confirm-modal__panel--danger {
  border-color: color-mix(in oklch, oklch(62% 0.21 25) 60%, var(--line));
  box-shadow: 0 16px 64px oklch(0% 0 0 / 0.55), 0 0 0 1px color-mix(in oklch, oklch(62% 0.21 25) 30%, transparent);
}
.confirm-modal__warn {
  display: grid; grid-template-columns: 28px 1fr; gap: 12px;
  padding: 14px 16px;
  background: color-mix(in oklch, oklch(62% 0.21 25) 14%, transparent);
  border: 1px solid color-mix(in oklch, oklch(62% 0.21 25) 35%, transparent);
  border-radius: 12px;
  margin-bottom: 12px;
}
.confirm-modal__warn-icon { font-size: 22px; line-height: 1; color: oklch(72% 0.18 60); }
.confirm-modal__warn-head { font-weight: 600; color: var(--text); margin-bottom: 6px; font-size: 14px; }
.confirm-modal__list {
  list-style: disc; margin: 0; padding-left: 18px;
  color: var(--text-mute); font-size: 13px; line-height: 1.55;
  max-height: 140px; overflow: auto;
}
.confirm-modal__list-more { list-style: none; margin-left: -18px; opacity: 0.7; font-style: italic; }
.confirm-modal__sub { color: var(--text-mute); font-size: 13px; line-height: 1.5; }
.confirm-modal__title {
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 10px;
  letter-spacing: -0.015em;
}
.confirm-modal__body {
  font-size: 14px;
  color: var(--text-mute);
  line-height: 1.55;
  margin-bottom: 22px;
}
.confirm-modal__body strong {
  color: var(--text);
  font-weight: 600;
}
.confirm-modal__actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
.confirm-modal__btn {
  appearance: none;
  border: 1px solid var(--line-strong, oklch(1 0 0 / 0.18));
  background: transparent;
  color: var(--text-dim, oklch(1 0 0 / 0.7));
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  padding: 10px 20px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s, transform 0.06s;
}
.confirm-modal__btn:hover { color: var(--text); border-color: var(--text-dim); background: transparent; }
.confirm-modal__btn:active { transform: translateY(1px); }
.confirm-modal__btn--danger {
  background: var(--accent);
  color: var(--accent-text, #0a0a0a);
  border-color: var(--accent);
  font-weight: 600;
}
.confirm-modal__btn--danger:hover {
  background: color-mix(in oklab, var(--accent) 88%, white 12%);
  color: var(--accent-text, #0a0a0a);
  border-color: color-mix(in oklab, var(--accent) 88%, white 12%);
  filter: none; transform: translateY(-1px);
  box-shadow: 0 8px 22px color-mix(in oklab, var(--accent) 22%, transparent);
}
.confirm-modal__btn--danger:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px oklch(0.78 0.18 var(--accent-hue) / 0.5);
}
:root[data-theme="light"] .confirm-modal__btn {
  border-color: oklch(0 0 0 / 0.18);
  color: oklch(0 0 0 / 0.55);
}
:root[data-theme="light"] .confirm-modal__btn:hover { color: var(--text); border-color: var(--text); }
:root[data-theme="light"] .confirm-modal__btn--danger {
  background: var(--accent); color: var(--accent-text, #0a0a0a); border-color: var(--accent);
}

/* Canonical Session Vault modal shell.
   Native dialogs and simple confirms should use this shape before any
   bespoke modal treatment. Larger surfaces can extend it with their own
   layout tracks while keeping the same dark glass, radius, actions, and
   backdrop vocabulary. */
.modal-backdrop--canonical,
.confirm-modal__backdrop {
  background: rgba(0, 0, 0, 0.62);
  backdrop-filter: blur(16px) saturate(1.15);
  -webkit-backdrop-filter: blur(16px) saturate(1.15);
}
.modal--canonical,
.confirm-modal__panel {
  max-height: calc(100vh - 48px);
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.015)),
    rgba(26, 26, 26, 0.94);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  box-shadow:
    0 40px 120px rgba(0,0,0,0.60),
    0 1px 0 rgba(255,255,255,0.07) inset;
  color: var(--text);
}
.modal--canonical .confirm-modal__title,
.confirm-modal__panel .confirm-modal__title {
  font-size: 20px;
  line-height: 1.18;
  letter-spacing: 0;
}
.modal--canonical .confirm-modal__body,
.confirm-modal__panel .confirm-modal__body {
  color: var(--text-dim);
}
.modal--canonical .confirm-modal__btn,
.confirm-modal__panel .confirm-modal__btn {
  border-radius: 999px;
  border-color: rgba(255,255,255,0.12);
  background: transparent;
  color: rgba(255,255,255,0.72);
}
.modal--canonical .confirm-modal__btn:hover,
.confirm-modal__panel .confirm-modal__btn:hover {
  border-color: rgba(255,255,255,0.22);
  color: #fff;
  background: rgba(255,255,255,0.04);
}
/* 2026-05-16: Tommy "there should be NO RED" + "have it match the Master
   Password Modal" — confirm-modal danger button now uses the canonical
   active accent color
   instead of the brand-red #FA3A05. */
.modal--canonical .confirm-modal__btn--danger,
.confirm-modal__panel .confirm-modal__btn--danger {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-text, #0a0a0a);
}
.modal--canonical .confirm-modal__btn--danger:hover,
.confirm-modal__panel .confirm-modal__btn--danger:hover {
  background: color-mix(in oklab, var(--accent) 88%, white 12%);
  border-color: color-mix(in oklab, var(--accent) 88%, white 12%);
  color: var(--accent-text, #0a0a0a);
}
:root[data-theme="light"] .modal-backdrop--canonical,
:root[data-theme="light"] .confirm-modal__backdrop {
  background: rgba(12, 10, 8, 0.38);
}
:root[data-theme="light"] .modal--canonical,
:root[data-theme="light"] .confirm-modal__panel {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.78), rgba(255,255,255,0.62)),
    rgba(246, 244, 239, 0.96);
  border-color: rgba(28,26,22,0.12);
  box-shadow: 0 40px 120px rgba(28,26,22,0.22);
}
:root[data-theme="light"] .modal--canonical .confirm-modal__btn,
:root[data-theme="light"] .confirm-modal__panel .confirm-modal__btn {
  border-color: rgba(28,26,22,0.16);
  color: rgba(28,26,22,0.76);
}
:root[data-theme="light"] .modal--canonical .confirm-modal__btn:hover,
:root[data-theme="light"] .confirm-modal__panel .confirm-modal__btn:hover {
  border-color: rgba(28,26,22,0.28);
  background: rgba(28,26,22,0.05);
  color: var(--text);
}
:root[data-theme="light"] .modal--canonical .confirm-modal__btn--danger,
:root[data-theme="light"] .confirm-modal__panel .confirm-modal__btn--danger {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-text, #0a0a0a);
}
:root[data-theme="light"] .modal--canonical .confirm-modal__btn--danger:hover,
:root[data-theme="light"] .confirm-modal__panel .confirm-modal__btn--danger:hover {
  background: color-mix(in oklab, var(--accent) 88%, white 12%);
  border-color: color-mix(in oklab, var(--accent) 88%, white 12%);
  color: var(--accent-text, #0a0a0a);
}

.profmodal {
  position: relative;
  width: min(640px, 92vw);
  max-height: min(90vh, 720px);
  max-height: min(86vh, 820px);
  display: flex; flex-direction: column;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.015)),
    rgba(20, 20, 24, 0.72);
  backdrop-filter: blur(28px) saturate(1.4);
  -webkit-backdrop-filter: blur(28px) saturate(1.4);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  box-shadow:
    0 30px 80px rgba(0,0,0,0.55),
    inset 0 1px 0 rgba(255,255,255,0.06);
  color: var(--text);
  animation: profmodal-pop 220ms cubic-bezier(.2,.9,.3,1.2);
}
@keyframes profmodal-pop {
  from { transform: translateY(8px) scale(0.985); opacity: 0; }
  to   { transform: translateY(0)   scale(1);     opacity: 1; }
}
:root[data-theme="light"] .profmodal {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.55), rgba(255,255,255,0.78)),
    var(--bg-2);
  border-color: var(--line-strong);
}

.profmodal__head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px;
  padding: 22px 22px 16px;
  border-bottom: 1px solid var(--line);
}
.profmodal__title {
  font-size: 19px; font-weight: 700; line-height: 1.2;
  margin: 0;
}
.profmodal__subtitle {
  font-size: 13px; color: var(--text-mute);
  margin: 4px 0 0;
}
.profmodal__close {
  background: transparent; border: 0; color: var(--text-mute);
  width: 28px; height: 28px; display: grid; place-items: center;
  border-radius: 6px; cursor: pointer;
}
.profmodal__close:hover { color: var(--text); background: rgba(255,255,255,0.06); }
:root[data-theme="light"] .profmodal__close:hover { background: rgba(28,26,22,0.06); }

.profmodal__body {
  padding: 18px 22px;
  overflow-y: auto;
  display: flex; flex-direction: column; gap: 18px;
  flex: 1 1 auto;
  min-height: 0;
}

.profmodal__id {
  display: flex; align-items: center; gap: 18px;
  padding: 14px;
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.015));
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 14px;
}
:root[data-theme="light"] .profmodal__id {
  background: linear-gradient(180deg, rgba(0,0,0,0.025), rgba(0,0,0,0.01));
  border-color: rgba(0,0,0,0.06);
}
.profmodal__avatar {
  width: 72px; height: 72px; border-radius: 50%;
  flex: 0 0 72px;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.06), 0 8px 22px -8px rgba(0,0,0,0.5);
}
.profmodal__sphere { flex: 0 0 auto; }
.profmodal__id-meta {
  display: flex; flex-direction: column; gap: 4px;
  min-width: 0; flex: 1 1 auto;
}
.profmodal__id-meta .profmodal__label { margin: 0; }
.profmodal__email {
  font-size: 15px; color: var(--text); font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.profmodal__tier {
  font-size: 12px; color: var(--text-mute);
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 4px;
}
.profmodal__tier-label { line-height: 1; }

.profmodal__body--compact { padding: 16px 22px; gap: 14px; display: flex; flex-direction: column; overflow: visible; }
.profmodal__body--compact .profmodal__id { padding: 12px 14px; align-items: center; gap: 14px; }
.profmodal__body--compact .profmodal__avatar-actions--inline { display: flex; gap: 6px; margin-left: auto; }
.profmodal__body--compact .profmodal__avatar-actions--inline .profmodal__btn { padding: 6px 10px; font-size: 12px; }
.profmodal__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; }
.profmodal__field--full { grid-column: 1 / -1; }
.profmodal__opt { color: rgba(245,245,245,0.4); font-weight: 400; text-transform: none; letter-spacing: 0; }
:root[data-theme="light"] .profmodal__opt { color: rgba(20,20,22,0.45); }
.profmodal__body--compact .profmodal__sec-row { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 10px; background: rgba(255,255,255,0.02); }
.profmodal__body--compact .profmodal__sec-row .profmodal__btn { margin-left: auto; }

.profmodal__field { display: flex; flex-direction: column; gap: 8px; }
.profmodal__chips {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 8px;
}
.profmodal__chip {
  appearance: none;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.04);
  color: var(--text);
  border-radius: 999px;
  padding: 7px 11px;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease, transform 120ms ease;
}
.profmodal__chip:hover {
  border-color: rgba(255,255,255,0.20);
  transform: translateY(-1px);
}
.profmodal__chip.is-active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  box-shadow: 0 0 0 1px var(--accent) inset, 0 2px 6px color-mix(in oklab, var(--accent) 28%, transparent);
}
.profmodal__chip.is-active:hover { transform: translateY(-1px); filter: brightness(1.04); }
:root[data-theme="light"] .profmodal__chip {
  background: rgba(28,26,22,0.04);
  border-color: rgba(28,26,22,0.10);
}
:root[data-theme="light"] .profmodal__chip:hover { border-color: rgba(28,26,22,0.20); }
:root[data-theme="light"] .profmodal__chip.is-active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.profmodal__label {
  font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-mute); font-weight: 600;
}

.profmodal__input {
  width: 100%;
  padding: 11px 14px;
  background: rgba(0,0,0,0.30);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 10px;
  color: var(--text);
  font-family: "Inter", sans-serif;
  font-size: 14px;
  outline: 0;
  transition: border-color 120ms ease, box-shadow 120ms ease, background 120ms ease;
}
.profmodal__input:hover { border-color: rgba(255,255,255,0.16); }
.profmodal__input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 22%, transparent);
}
:root[data-theme="light"] .profmodal__input {
  background: rgba(255,255,255,0.7);
  border-color: rgba(0,0,0,0.10);
}
:root[data-theme="light"] .profmodal__input:hover { border-color: rgba(0,0,0,0.18); }

.profmodal__hint {
  font-size: 12px; color: var(--text-mute); margin: 0;
}

.profmodal__avatar-actions { display: flex; gap: 10px; }

.profmodal__btn {
  padding: 8px 14px;
  background: transparent;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  color: var(--text);
  font-family: "Inter", sans-serif;
  font-size: 13px; font-weight: 500;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease;
}
.profmodal__btn:hover { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.18); }
:root[data-theme="light"] .profmodal__btn:hover { background: rgba(28,26,22,0.04); }
.profmodal__btn--primary {
  background: var(--accent);
  border-color: transparent;
  color: #1a0f06;
  font-weight: 600;
}
.profmodal__btn--primary:hover {
  background: color-mix(in oklab, var(--accent) 88%, white 12%);
  border-color: transparent;
}

.profmodal__divider {
  height: 1px; background: var(--line);
  margin: 4px 0;
}

.profmodal__sec { display: flex; flex-direction: column; gap: 8px; padding-top: 4px; }
.profmodal__sec-title {
  font-size: 13px; font-weight: 700; margin: 0;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text-mute);
}
.profmodal__sec-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px; border-radius: 10px;
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.06);
}
:root[data-theme="light"] .profmodal__sec-row {
  background: rgba(0,0,0,0.02);
  border-color: rgba(0,0,0,0.06);
}
.profmodal__sec-name { font-size: 14px; color: var(--text); font-weight: 500; }
.profmodal__sec-status {
  font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 999px;
  background: rgba(255,255,255,0.06); color: var(--text-mute);
  margin: 0;
}
.profmodal__sec-status[data-on="true"] {
  background: oklch(0.62 0.16 145 / 0.18);
  color: oklch(0.82 0.16 145);
}
.profmodal__sec .profmodal__btn { align-self: flex-start; }

.profmodal__foot {
  display: flex; justify-content: flex-end; gap: 10px;
  padding: 16px 22px;
  border-top: 1px solid var(--line);
  flex-shrink: 0;
  background: inherit;
}
.profmodal__head { flex-shrink: 0; }


/* ============== TIER SWAP (Tweaks panel) ============== */
.tier-swap { display: flex; flex-direction: column; gap: 6px; }
.tier-swap__row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: 10px;
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-dim);
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
  text-align: left;
}
.tier-swap__row:hover { background: var(--bg-3); color: var(--text); }
.tier-swap__row.is-active {
  background: var(--accent-soft);
  border-color: oklch(0.74 0.14 var(--accent-hue) / 0.45);
  color: var(--text);
}
.tier-swap__desc {
  font-size: 11px; color: var(--text-mute);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tier-swap__row.is-active .tier-swap__desc { color: var(--text-dim); }

/* ============== ROW REORDER (Starred view drag) ============== */
.row--reorderable { cursor: grab; }
.row--reorderable.is-dragging { opacity: 0.45; cursor: grabbing; }
.row--reorderable.is-dropbefore::before,
.row--reorderable.is-dropafter::after {
  content: "";
  position: absolute;
  left: 8px; right: 8px;
  height: 2px;
  background: var(--accent);
  box-shadow: 0 0 12px 0 var(--accent), 0 0 0 1px oklch(0.85 0.10 var(--accent-hue) / 0.6);
  border-radius: 2px;
  z-index: 4;
  pointer-events: none;
}
.row--reorderable.is-dropbefore::before { top: 0; }
.row--reorderable.is-dropafter::after { bottom: 0; }

/* Nested view: child rows + parent caret */
.row__caret {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px;
  margin-right: 4px;
  border: 0; padding: 0; background: transparent;
  color: var(--muted);
  font-size: 11px; line-height: 1;
  cursor: pointer;
  transition: transform 140ms ease, color 140ms ease;
  vertical-align: middle;
}
.row__caret:hover { color: var(--text); }
.row__caret--open { transform: rotate(90deg); color: var(--accent); }

.row--child {
  background: color-mix(in oklch, var(--accent) 4%, transparent);
}
.row--child::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  background: var(--accent);
  opacity: 0.85;
}
.row--child .row__num { opacity: 0; }
.row--child .cell--title { padding-left: 22px; }
.row--parent.row--expanded {
  background: color-mix(in oklch, var(--accent) 3%, transparent);
}


/* =====================================================================
   Drag-and-drop upload — full-screen overlay + floating progress card
   ===================================================================== */
.dropzone-overlay {
  position: fixed;
  inset: 0;
  z-index: 8500;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(1200px 700px at 50% 50%, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.94) 70%),
    radial-gradient(900px 600px at 12% 8%, color-mix(in srgb, var(--accent) 22%, transparent) 0%, transparent 60%),
    radial-gradient(900px 600px at 92% 8%, color-mix(in srgb, #d04848 28%, transparent) 0%, transparent 60%),
    rgba(8, 8, 10, 0.96);
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  animation: dropzone-fade 0.22s ease-out;
  pointer-events: none;
}
.dropzone-overlay__halo {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(60% 50% at 50% 50%, color-mix(in srgb, var(--accent) 22%, transparent) 0%, transparent 70%),
    radial-gradient(40% 35% at 50% 100%, color-mix(in srgb, var(--accent) 14%, transparent) 0%, transparent 70%);
  filter: blur(40px);
  animation: dropzone-halo 3s ease-in-out infinite alternate;
}
@keyframes dropzone-halo {
  from { opacity: 0.7; transform: scale(1); }
  to   { opacity: 1; transform: scale(1.04); }
}
.dropzone-overlay__card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: min(440px, 86vw);
  padding: 44px 36px 30px;
  border-radius: 22px;
  background: color-mix(in srgb, var(--surface, rgba(18,18,22,0.78)) 88%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border, rgba(255,255,255,0.08)));
  box-shadow:
    0 30px 80px -20px rgba(0,0,0,0.65),
    0 0 0 1px color-mix(in srgb, var(--accent) 12%, transparent),
    0 0 60px -20px color-mix(in srgb, var(--accent) 50%, transparent);
  backdrop-filter: blur(28px) saturate(160%);
  -webkit-backdrop-filter: blur(28px) saturate(160%);
  overflow: hidden;
}
.dropzone-overlay__card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--accent) 8%, transparent) 0%,
    transparent 40%);
}
.dropzone-overlay__thumb {
  width: 56px; height: 56px;
  border-radius: 14px;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  box-shadow: 0 0 24px -6px color-mix(in srgb, var(--accent) 60%, transparent);
}
.upload-prompt__logo-img,
.dropzone-overlay__thumb img.upload-prompt__logo-img,
.upload-row__thumb img.upload-prompt__logo-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.dropzone-overlay__title {
  margin-top: 22px;
  font-size: clamp(24px, 2.4vw, 32px);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text, #fff);
}
.dropzone-overlay__subtitle {
  margin-top: 10px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-muted, rgba(255,255,255,0.55));
  max-width: 320px;
}
.dropzone-overlay__pill {
  margin-top: 22px;
  padding: 8px 16px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--text, #fff);
}
.dropzone-overlay__pill-dot {
  width: 6px; height: 6px;
  border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent);
  animation: dropzone-pulse 1.4s ease-in-out infinite;
}
@keyframes dropzone-pulse {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}
.dropzone-overlay__hint {
  margin-top: 16px;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted, rgba(255,255,255,0.4));
}
@keyframes dropzone-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.upload-prompt {
  position: fixed;
  inset: 0;
  z-index: 10020;
  display: grid;
  place-items: center;
  padding: 20px;
}
.upload-prompt__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.46);
  backdrop-filter: blur(10px) saturate(116%);
  -webkit-backdrop-filter: blur(10px) saturate(116%);
}
.upload-prompt__card {
  position: relative;
  z-index: 1;
  width: min(420px, calc(100vw - 32px));
  display: grid;
  justify-items: center;
  gap: 12px;
  padding: 28px;
  border-radius: 14px;
  text-align: center;
  background: color-mix(in srgb, var(--surface, #18181b) 92%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 34%, rgba(255,255,255,0.1));
  box-shadow:
    0 26px 72px rgba(0,0,0,0.52),
    0 0 0 1px rgba(255,255,255,0.04),
    0 0 42px -20px color-mix(in srgb, var(--accent) 70%, transparent);
}
.upload-prompt__close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 30px;
  height: 30px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 999px;
  background: rgba(255,255,255,0.04);
  color: rgba(255,255,255,0.72);
  cursor: pointer;
  font: 600 18px/1 var(--font-sans, "Geist", system-ui, sans-serif);
}
.upload-prompt__close:hover,
.upload-prompt__close:focus-visible {
  color: #fff;
  border-color: color-mix(in srgb, var(--accent) 42%, rgba(255,255,255,0.16));
}
.upload-prompt__thumb {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 32%, transparent);
}
.upload-prompt__title {
  color: #ffffff;
  font: 650 22px/1.1 var(--font-sans, "Geist", system-ui, sans-serif);
  letter-spacing: 0;
  background-image: linear-gradient(110deg, #3B3F8C 0%, #1E7B8C 14%, #6B8E3F 28%, #A8721C 42%, #A33A1C 55%, #9C2B6B 68%, #6F2E9F 80%, #3B3F8C 100%);
  background-size: 240% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: upload-prompt-title-spectrum 4.8s linear infinite;
}
@keyframes upload-prompt-title-spectrum {
  0% { background-position: 0% 50%; }
  100% { background-position: 240% 50%; }
}
.upload-prompt__subtitle,
.upload-prompt__extension span {
  max-width: 320px;
  color: var(--text-muted, rgba(255,255,255,0.56));
  font: 500 13px/1.45 var(--font-sans, "Geist", system-ui, sans-serif);
}
.upload-prompt__primary,
.upload-prompt__secondary {
  min-height: 44px;
  border-radius: 999px;
  padding: 0 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  background: linear-gradient(180deg,#0E0E0E,#1a1a1a);
  color: #ffffff;
  cursor: pointer;
  text-decoration: none;
  font: 700 12px/1 var(--font-sans, "Geist", system-ui, sans-serif);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.14);
}
.upload-prompt__primary:hover,
.upload-prompt__primary:focus-visible,
.upload-prompt__secondary:hover,
.upload-prompt__secondary:focus-visible {
  background: linear-gradient(180deg,#1a1a1a,#262626);
}
.upload-prompt__secondary:disabled {
  opacity: 0.48;
  cursor: not-allowed;
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.12);
}
.upload-prompt__divider {
  width: 100%;
  height: 1px;
  margin: 4px 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.12), transparent);
}
.upload-prompt__extension {
  display: grid;
  justify-items: center;
  gap: 10px;
}
.upload-analysis-consent__card {
  width: min(460px, calc(100vw - 32px));
}
.upload-analysis-consent__copy {
  max-width: 380px;
}
.upload-analysis-consent__bullets {
  width: min(100%, 370px);
  display: grid;
  gap: 7px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(255,255,255,0.045);
  border: 1px solid rgba(255,255,255,0.09);
  color: var(--text-muted, rgba(255,255,255,0.62));
  text-align: left;
  font: 500 12px/1.35 var(--font-sans, "Geist", system-ui, sans-serif);
}
.upload-analysis-consent__bullets span::before {
  content: "";
  width: 6px;
  height: 6px;
  margin: 0 8px 1px 0;
  display: inline-block;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 70%, #fff);
}
.upload-analysis-consent__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

/* Shared page power menu */
.shr-row {
  position: relative;
  outline: none;
}
.shr-row:focus-visible {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent, #FA3A05) 48%, transparent);
}
/* v0.2.0.506 (Tommy 2026-05-16 00:50 PT "this three dots button on the
   shared page is in a bad spot and also get rid of that box"): drop the
   pill background + border + hover container around the ellipsis. The
   3-dots glyph now sits as a bare icon-button inside the row, right-aligned. */
.shr-row__more {
  opacity: 0;
  transition: opacity 140ms ease;
}
.shr-row:hover .shr-row__more,
.shr-row:focus-within .shr-row__more {
  opacity: 1;
}
.shr-row__more-btn {
  width: 24px;
  height: 24px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: rgba(255,255,255,0.5);
  cursor: pointer;
  font: 700 16px/1 var(--font-sans, "Geist", system-ui, sans-serif);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 1px;
  transition: color 140ms ease, background 140ms ease;
}
.shr-row__more-btn:hover,
.shr-row__more-btn:focus-visible {
  color: #fff;
  background: rgba(255,255,255,0.06);
}
:root[data-theme="light"] .shr-row__more-btn {
  color: rgba(28,26,22,0.54);
}
:root[data-theme="light"] .shr-row__more-btn:hover,
:root[data-theme="light"] .shr-row__more-btn:focus-visible {
  color: var(--text);
  background: rgba(28,26,22,0.06);
}
.share-ctx__scrim {
  position: fixed;
  inset: 0;
  z-index: 9500;
  background: transparent;
}
.share-ctx {
  position: fixed;
  width: 286px;
  max-width: calc(100vw - 16px);
  max-height: calc(100dvh - 16px);
  overflow: auto;
  padding: 8px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface, #161619) 94%, #050506);
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow:
    0 28px 80px rgba(0,0,0,0.58),
    inset 0 1px 0 rgba(255,255,255,0.06);
  backdrop-filter: blur(18px) saturate(132%);
  -webkit-backdrop-filter: blur(18px) saturate(132%);
}
.share-ctx__title {
  padding: 9px 10px 10px;
  color: rgba(255,255,255,0.92);
  font: 700 12px/1.25 var(--font-sans, "Geist", system-ui, sans-serif);
  letter-spacing: 0.01em;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  margin-bottom: 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.share-ctx__item {
  width: 100%;
  min-height: 34px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: rgba(255,255,255,0.78);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 9px;
  cursor: pointer;
  text-align: left;
  font: 600 12px/1.2 var(--font-sans, "Geist", system-ui, sans-serif);
}
.share-ctx__item:hover,
.share-ctx__item:focus-visible {
  background: rgba(255,255,255,0.075);
  color: #fff;
}
.share-ctx__item:disabled {
  opacity: 0.38;
  cursor: not-allowed;
}
.share-ctx__item--danger {
  color: #ff8f83;
}
.share-ctx__item kbd {
  min-width: 20px;
  color: rgba(255,255,255,0.36);
  font: 600 10px/1 var(--font-mono, "Geist Mono", ui-monospace, monospace);
  text-align: right;
  letter-spacing: 0.02em;
}
:root[data-theme="light"] .share-ctx {
  background: color-mix(in srgb, var(--surface, #f6f4ef) 96%, #fff);
  border-color: rgba(28,26,22,0.12);
  box-shadow:
    0 28px 80px rgba(54,44,28,0.18),
    inset 0 1px 0 rgba(255,255,255,0.70);
}
:root[data-theme="light"] .share-ctx__title {
  color: var(--text);
  border-bottom-color: rgba(28,26,22,0.10);
}
:root[data-theme="light"] .share-ctx__item {
  color: rgba(28,26,22,0.78);
}
:root[data-theme="light"] .share-ctx__item:hover,
:root[data-theme="light"] .share-ctx__item:focus-visible {
  background: rgba(28,26,22,0.065);
  color: var(--text);
}
:root[data-theme="light"] .share-ctx__item--danger {
  color: #b83224;
}
:root[data-theme="light"] .share-ctx__item kbd {
  color: rgba(28,26,22,0.42);
}

/* ---- progress card (bottom-right) ---- */
.upload-card {
  position: fixed;
  right: 22px;
  bottom: calc(var(--player-h, 92px) + 22px);
  width: 420px;
  max-width: calc(100vw - 32px);
  z-index: 8400;
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface, #18181b) 92%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 60%, transparent);
  box-shadow: 0 18px 48px -12px rgba(0,0,0,0.55),
              0 0 0 1px rgba(255,255,255,0.03),
              0 0 24px -6px color-mix(in srgb, var(--accent) 28%, transparent);
  overflow: hidden;
  animation: upload-card-slide 0.24s cubic-bezier(0.2, 0.7, 0.2, 1);
  backdrop-filter: blur(10px) saturate(120%);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
}
@keyframes upload-card-slide {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* QUEUE-133 replay: walkthrough upload-start focus target. */
body.is-walkthrough-upload-focus .upload-card {
  left: 50%;
  right: auto;
  bottom: 50%;
  width: min(540px, calc(100vw - 32px));
  z-index: 9800;
  transform: translate(-50%, 50%) scale(1.04);
  animation: upload-card-focus-in 0.24s cubic-bezier(0.2, 0.7, 0.2, 1);
}
@keyframes upload-card-focus-in {
  from { opacity: 0; transform: translate(-50%, calc(50% + 14px)) scale(0.98); }
  to   { opacity: 1; transform: translate(-50%, 50%) scale(1.04); }
}
body.is-walkthrough-upload-focus .upload-card--collapsed {
  width: min(420px, calc(100vw - 32px));
}
.upload-card--closing {
  animation: upload-card-slide-out 0.34s cubic-bezier(0.4, 0, 0.6, 1) forwards;
  pointer-events: none;
}
@keyframes upload-card-slide-out {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to   { opacity: 0; transform: translateY(0) translateX(calc(100% + 32px)) scale(0.98); }
}
.upload-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 14px 14px 18px;
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 25%, var(--border, rgba(255,255,255,0.08)));
}
.upload-card__title {
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--text, #fff);
}
.upload-card__actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
.upload-card__cancel-all {
  appearance: none;
  background: transparent;
  border: 1px solid color-mix(in srgb, #ff4d4d 60%, var(--border));
  color: #ff7a7a;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  padding: 6px 14px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.upload-card__cancel-all:hover {
  background: color-mix(in srgb, #ff4d4d 14%, transparent);
  border-color: color-mix(in srgb, #ff4d4d 80%, transparent);
  color: #ff9a9a;
}
.upload-card__caret {
  appearance: none;
  background: transparent;
  border: 0;
  color: var(--text-muted, rgba(255,255,255,0.55));
  width: 24px; height: 24px;
  display: grid; place-items: center;
  cursor: pointer;
  border-radius: 6px;
  transition: background 0.12s, color 0.12s, transform 0.18s ease;
}
.upload-card__caret:hover {
  background: rgba(255,255,255,0.06);
  color: var(--text);
}
.upload-card__caret.is-collapsed { transform: rotate(-90deg); }

.upload-card__list {
  max-height: 320px;
  overflow-y: auto;
  padding: 6px 6px 8px;
}
.upload-card__list::-webkit-scrollbar { width: 8px; }
.upload-card__list::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.08);
  border-radius: 4px;
}

.upload-row {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  border-radius: 8px;
}
.upload-row + .upload-row { margin-top: 2px; }
.upload-row:hover { background: rgba(255,255,255,0.03); }
.upload-row__thumb {
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border-radius: 6px;
  background: color-mix(in srgb, var(--text, #fff) 8%, transparent);
  color: var(--text-muted, rgba(255,255,255,0.55));
}
.upload-row__body {
  min-width: 0;
}
.upload-row__name {
  font-size: 14px;
  font-weight: 500;
  color: var(--text, #fff);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 4px;
}
.upload-row__status {
  font-size: 12px;
  color: var(--text-muted, rgba(255,255,255,0.5));
  margin-bottom: 6px;
}
.upload-row__bar {
  height: 4px;
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
  overflow: hidden;
  position: relative;
  isolation: isolate;
}
.upload-row__bar::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transform: translateX(-120%);
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.45) 48%, transparent 100%);
}
.upload-row--active .upload-row__bar::after {
  opacity: 1;
  animation: upload-row-glow 1.15s linear infinite;
}
.upload-row__fill {
  height: 100%;
  background: var(--accent);
  border-radius: inherit;
  transition: width 0.28s linear;
  box-shadow: 0 0 8px -1px color-mix(in srgb, var(--accent) 60%, transparent);
  position: relative;
  z-index: 1;
  will-change: width;
}
.upload-row__fill.is-done {
  background: #2dd47a;
  box-shadow: 0 0 8px -1px rgba(45,212,122,0.5);
}
.upload-row--done .upload-row__status { color: #2dd47a; }
@keyframes upload-row-glow {
  0% { transform: translateX(-120%); }
  100% { transform: translateX(120%); }
}
.upload-row__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  min-width: 0;
}
.upload-row__open {
  /* v0.2.0.490 (Tommy 2026-05-16 00:24 PT): looks bad on real upload-complete
     state (just text on 2 rows). Force a real pill: solid dark CTA matching
     /signin, fixed min-width, no shrink, no wrap. */
  appearance: none;
  flex-shrink: 0;
  border: 1px solid #0E0E0E;
  background: linear-gradient(180deg, #0E0E0E, #1a1a1a);
  color: #ffffff;
  border-radius: 999px;
  height: 30px;
  padding: 0 16px;
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.12s ease, transform 0.12s ease;
}
.upload-row__open:hover {
  background: linear-gradient(180deg, #1a1a1a, #2a2a2a);
}
.upload-row__close {
  appearance: none;
  background: transparent;
  border: 0;
  color: var(--text-muted, rgba(255,255,255,0.55));
  width: 24px; height: 24px;
  display: grid; place-items: center;
  cursor: pointer;
  border-radius: 6px;
  transition: background 0.12s, color 0.12s;
}
.upload-row__close:hover {
  background: rgba(255,255,255,0.08);
  color: var(--text, #fff);
}

/* light mode */
[data-theme="light"] .dropzone-overlay {
  background: color-mix(in srgb, #fbf8f1 70%, transparent);
}
[data-theme="light"] .upload-card {
  background: color-mix(in srgb, #ffffff 96%, transparent);
}
[data-theme="light"] .upload-row__bar {
  background: rgba(0,0,0,0.08);
}
[data-theme="light"] .upload-row__open {
  color: color-mix(in srgb, var(--accent) 55%, #151313);
  background: color-mix(in srgb, var(--accent) 10%, #fff);
}
[data-theme="light"] .upload-row__close:hover,
[data-theme="light"] .upload-card__caret:hover {
  background: rgba(0,0,0,0.06);
}


/* row click flash + playing-state progress strip */
.row.row--flashing {
  animation: row-flash 0.5s ease-out;
}
@keyframes row-flash {
  0%   { background: color-mix(in srgb, var(--accent) 22%, transparent); }
  100% { background: transparent; }
}
.row__progress {
  cursor: default;
  pointer-events: none;
}
.row__progress.row__progress--playing {
  cursor: ew-resize;
  pointer-events: auto;
}
.row--previewing {
  cursor: default;
}
.row--previewing .row__progress,
.row--previewing .row__waveform {
  cursor: default;
  pointer-events: none;
  -webkit-user-drag: none;
}
@media (max-width: 1020px) {
  .row--previewing .cell--title {
    min-width: min(520px, 62vw);
    padding-right: 20px;
  }
  .row--previewing .row__waveform {
    flex-basis: clamp(160px, 36vw, 420px);
    min-width: min(160px, 32vw);
  }
}

/* Person filter chip */
.chip--person {
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  border-color: color-mix(in srgb, var(--accent) 35%, transparent);
  color: var(--text);
}
.chip--person .chip__x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px; height: 16px;
  margin-left: 4px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--text) 14%, transparent);
  font-size: 12px;
  line-height: 1;
}
.chip--person:hover .chip__x {
  background: color-mix(in srgb, var(--text) 24%, transparent);
}

/* Playing-row progress underline — the signature "light line that underlines
   the row of the currently playing track." Always visible while playing,
   stronger glow than the hover-preview variant, with a bright leading ball. */
.row__progress.row__progress--playing {
  opacity: 1;
}
.row__progress.row__progress--playing::after {
  opacity: 0;
}
.row__progress.row__progress--playing .row__progress-bar {
  height: 2px;
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--accent) 0%,  transparent) 0%,
    color-mix(in srgb, var(--accent) 80%, transparent) 18%,
    var(--accent) 100%
  );
  box-shadow: 0 0 10px color-mix(in srgb, var(--accent) 55%, transparent);
}
/* the leading "ball" that rides the head of the line */
.row__progress.row__progress--playing .row__progress-bar::after {
  display: none;
}
@keyframes playing-ball-pulse {
  0%, 100% {
    box-shadow:
      0 0 0 1.5px color-mix(in srgb, var(--accent) 80%, transparent),
      0 0 8px  var(--accent),
      0 0 18px var(--accent),
      0 0 32px color-mix(in srgb, var(--accent) 55%, transparent);
  }
  50% {
    box-shadow:
      0 0 0 2px color-mix(in srgb, var(--accent) 90%, transparent),
      0 0 12px var(--accent),
      0 0 26px var(--accent),
      0 0 44px color-mix(in srgb, var(--accent) 70%, transparent);
  }
}

/* =====================================================================
   Collaborator profile tray (slide-in from right)
   ===================================================================== */
.cell__person {
  appearance: none; background: none; border: 0; padding: 0;
  font: inherit; color: inherit; cursor: pointer;
  text-align: inherit;
  border-radius: 4px;
  transition: color 0.12s ease, background 0.12s ease;
}
.cell__person:hover {
  color: oklch(0.86 0.05 var(--accent-hue));
  text-decoration: underline;
  text-decoration-color: oklch(0.74 0.14 var(--accent-hue) / 0.5);
  text-underline-offset: 3px;
}
.cell__person.cell-credit__chip {
  /* v0.2.0.505 (Tommy 2026-05-16 01:45 PT): producer/writer pills were
     unreadable. Smaller font (11px) so longer names fit; tighter
     padding; max-width raised so the ellipsis hides less. */
  height: 18px;
  padding: 0 8px;
  border-radius: 999px;
  background: color-mix(in oklch, var(--accent) 9%, transparent);
  border: 1px solid color-mix(in oklch, var(--accent) 20%, transparent);
  font-size: 11px;
  letter-spacing: 0;
}
.cell__person.cell-credit__chip:hover {
  background: color-mix(in oklch, var(--accent) 16%, transparent);
}
:root[data-theme="light"] .cell__person:hover {
  color: oklch(0.42 0.14 var(--accent-hue));
}

.ptray-backdrop {
  position: fixed; inset: 0; z-index: 9600;
  background: rgba(0,0,0,0.32);
  backdrop-filter: blur(2px);
  animation: ptray-fade 0.16s ease-out;
}
:root[data-theme="light"] .ptray-backdrop {
  background: rgba(28,26,22,0.18);
}
@keyframes ptray-fade { from { opacity: 0; } to { opacity: 1; } }

.ptray {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: min(420px, calc(100vw - 48px));
  z-index: 9601;
  background: oklch(0.13 0.005 var(--accent-hue) / 0.98);
  border-left: 1px solid oklch(1 0 0 / 0.08);
  box-shadow: -20px 0 60px -10px rgba(0,0,0,0.6);
  display: flex; flex-direction: column;
  overflow: hidden;
  animation: ptray-slide 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
  color: var(--text);
}
:root[data-theme="light"] .ptray {
  background: oklch(0.98 0.01 var(--accent-hue) / 0.98);
  border-left-color: oklch(0 0 0 / 0.08);
}
@keyframes ptray-slide {
  from { transform: translateX(24px); opacity: 0; }
  to   { transform: translateX(0); opacity: 1; }
}

/* gradient header tinted by name hue */
.ptray__head {
  position: relative;
  padding: 22px 24px 18px;
  background:
    linear-gradient(160deg,
      oklch(0.62 0.18 var(--p-hue, 30)) 0%,
      oklch(0.42 0.16 var(--p-hue, 30)) 60%,
      transparent 100%);
  color: #fff;
  box-shadow: inset 0 -1px 0 oklch(0 0 0 / 0.18);
}
.ptray__close {
  position: absolute; top: 12px; right: 12px;
  width: 30px; height: 30px;
  display: grid; place-items: center;
  background: rgba(0,0,0,0.18);
  border: 0; color: #fff;
  border-radius: 8px; cursor: pointer;
  transition: background 0.12s ease;
}
.ptray__close:hover { background: rgba(0,0,0,0.32); }
.ptray__avatar {
  width: 64px; height: 64px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 25%, rgba(255,255,255,0.5), transparent 50%),
    oklch(0.32 0.18 var(--p-hue, 30));
  display: grid; place-items: center;
  box-shadow:
    inset 0 -4px 10px rgba(0,0,0,0.4),
    inset 0 2px 4px rgba(255,255,255,0.2),
    0 6px 14px rgba(0,0,0,0.3);
  margin-bottom: 12px;
}
.ptray__avatar-letter {
  font-size: 22px; font-weight: 700;
  color: #fff;
  letter-spacing: 0.5px;
  text-shadow: 0 1px 2px rgba(0,0,0,0.4);
}
.ptray__name {
  font-size: 22px; font-weight: 700;
  margin: 0 0 4px;
  letter-spacing: -0.01em;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.25);
}
.ptray__sub {
  font-size: 12.5px;
  opacity: 0.85;
  margin: 0 0 16px;
  color: rgba(255,255,255,0.92);
}
.ptray__contact {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}
.ptray__cbtn {
  appearance: none;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.18);
  color: #fff;
  border-radius: 8px;
  padding: 8px 4px;
  font-size: 11px;
  font-weight: 500;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  cursor: pointer;
  transition: background 0.12s ease, transform 0.08s ease;
}
.ptray__cbtn:hover { background: rgba(255,255,255,0.20); }
.ptray__cbtn:active { transform: translateY(0.5px); }

.ptray__body {
  flex: 1; overflow-y: auto;
  padding: 18px 20px 28px;
  display: flex; flex-direction: column;
  gap: 18px;
  background: var(--bg-1);
}
:root[data-theme="dark"] .ptray__body { background: oklch(0.15 0.005 var(--accent-hue) / 1); }
:root[data-theme="light"] .ptray__body { background: oklch(0.985 0.005 var(--accent-hue) / 1); }

.ptray__sec { display: flex; flex-direction: column; gap: 10px; }
.ptray__sec-head {
  display: flex; align-items: baseline; justify-content: space-between;
}
.ptray__sec-title {
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin: 0;
}
.ptray__sec-count {
  font-size: 11px; color: var(--text-mute);
  font-variant-numeric: tabular-nums;
}

.ptray__bio {
  width: 100%; box-sizing: border-box;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 12px;
  font: inherit;
  font-size: 13px;
  color: var(--text);
  resize: vertical;
  min-height: 60px;
  font-family: inherit;
}
.ptray__bio:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px oklch(0.74 0.14 var(--accent-hue) / 0.18);
}
.ptray__bio::placeholder { color: var(--text-mute); }

.ptray__stats {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px;
}
.ptray__stat {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px 16px;
}
.ptray__stat-value {
  font-size: 26px; font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  color: var(--text);
  line-height: 1.1;
}
.ptray__stat-label {
  font-size: 11px; font-weight: 500;
  color: var(--text-dim);
  margin-top: 2px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.ptray__most {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  font-size: 12.5px;
  padding: 0 2px;
}
.ptray__most-label { color: var(--text-dim); }
.ptray__most-value {
  color: oklch(0.86 0.05 var(--accent-hue));
  font-weight: 600;
}
:root[data-theme="light"] .ptray__most-value {
  color: oklch(0.42 0.14 var(--accent-hue));
}
.ptray__most-sep { color: var(--text-mute); }
.ptray__most-genres { color: var(--text-dim); }

.ptray__collabs {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.ptray__collab {
  appearance: none;
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 5px 12px 5px 5px;
  font-size: 12.5px;
  color: var(--text);
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease, transform 0.08s ease;
}
.ptray__collab:hover {
  background: var(--bg-3);
  border-color: oklch(0.74 0.14 var(--c-hue, 30) / 0.4);
}
.ptray__collab:active { transform: translateY(0.5px); }
.ptray__collab-dot {
  width: 22px; height: 22px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: oklch(0.42 0.16 var(--c-hue, 30));
  color: #fff;
  font-size: 9.5px; font-weight: 700;
  letter-spacing: 0.3px;
  box-shadow: inset 0 -2px 4px rgba(0,0,0,0.3), inset 0 1px 2px rgba(255,255,255,0.15);
}
.ptray__collab-name { font-weight: 500; }
.ptray__collab-count {
  color: var(--text-mute);
  font-variant-numeric: tabular-nums;
  font-size: 11px;
}

.ptray__tracks {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column;
  gap: 2px;
}
.ptray__track {
  display: grid;
  grid-template-columns: 28px 1fr auto auto;
  align-items: center;
  gap: 10px;
  padding: 8px 8px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.1s ease;
}
.ptray__track:hover { background: var(--bg-2); }
.ptray__track-num {
  font-size: 10.5px;
  font-variant-numeric: tabular-nums;
  color: var(--text-mute);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}
.ptray__track-meta { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ptray__track-title {
  font-size: 13px; font-weight: 500;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ptray__track-sub {
  font-size: 11px;
  color: var(--text-mute);
  display: flex; align-items: center; gap: 6px;
  font-variant-numeric: tabular-nums;
}
.ptray__track-role {
  text-transform: capitalize;
  color: oklch(0.78 0.06 var(--accent-hue));
}
:root[data-theme="light"] .ptray__track-role { color: oklch(0.5 0.10 var(--accent-hue)); }
.ptray__track-dot { opacity: 0.5; }
.ptray__track-dur {
  font-size: 11.5px;
  color: var(--text-mute);
  font-variant-numeric: tabular-nums;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}
.ptray__more {
  text-align: center;
  padding: 8px;
  color: var(--text-mute);
  font-size: 11.5px;
}



/* ===================================================================
 * Accent favorites — Recent swatches under the Accent hue slider
 * =================================================================== */
.accent-favs {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 4px 0 2px;
}
.accent-favs__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.accent-favs__label {
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255,255,255,.55);
  font-weight: 600;
}
.accent-favs__hint {
  font-size: 10.5px;
  color: rgba(255,255,255,.36);
}
.accent-favs__row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.accent-favs__slot {
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  border-radius: 999px;
  border: 1px dashed rgba(255,255,255,.12);
  background: rgba(255,255,255,.02);
}
.accent-favs__item {
  position: relative;
  display: inline-flex;
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
}
.accent-favs__sw {
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  padding: 0;
  cursor: pointer;
  transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease;
  position: relative;
}
.accent-favs__sw:hover {
  transform: translateY(-1px);
  border-color: rgba(255,255,255,.32);
}
.accent-favs__sw.is-active {
  border-color: #fff;
  box-shadow: 0 0 0 2px rgba(255,255,255,.18), 0 4px 12px rgba(0,0,0,.4);
}
.accent-favs__remove {
  position: absolute;
  top: -6px;
  right: -4px;
  width: 14px;
  height: 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.36);
  background: rgba(7,7,11,.92);
  color: rgba(255,255,255,.88);
  display: grid;
  place-items: center;
  padding: 0;
  font-size: 10px;
  line-height: 1;
  cursor: pointer;
}
.accent-favs__remove:hover {
  border-color: rgba(255,255,255,.7);
  color: #fff;
}
:root[data-theme="light"] .accent-favs__label { color: rgba(0,0,0,.6); }
:root[data-theme="light"] .accent-favs__hint  { color: rgba(0,0,0,.42); }
:root[data-theme="light"] .accent-favs__slot  { border-color: rgba(0,0,0,.12); background: rgba(0,0,0,.02); }
:root[data-theme="light"] .accent-favs__sw    { border-color: rgba(0,0,0,.14); }
:root[data-theme="light"] .accent-favs__sw:hover { border-color: rgba(0,0,0,.45); }
:root[data-theme="light"] .accent-favs__sw.is-active { border-color: #111; box-shadow: 0 0 0 2px rgba(0,0,0,.12), 0 4px 12px rgba(0,0,0,.18); }
:root[data-theme="light"] .accent-favs__remove,
:root[data-theme="light"] .avmenu__accent-fav-remove {
  background: rgba(255,255,255,.95);
  color: rgba(0,0,0,.72);
  border-color: rgba(0,0,0,.25);
}

/* =====================================================================
   Display density (Gmail-style row sizing)
   --row-h drives the main library table; cell padding tightens with it.
   ===================================================================== */
body[data-density="compact"]      { --row-h: 40px; }
body[data-density="default"]      { --row-h: 56px; }
body[data-density="comfortable"]  { --row-h: 72px; }

/* Compact: trim cell padding so the visual rhythm tightens too. */
body[data-density="compact"] .thead,
body[data-density="compact"] .row { padding-left: 14px; padding-right: 14px; }
body[data-density="compact"] .cell { padding: 0 8px; }
body[data-density="compact"] .cell--title { gap: 8px; }

/* Comfortable: a touch more breathing room. */
body[data-density="comfortable"] .cell { padding: 0 14px; }

/* =====================================================================
   Density popup (mirrors .cols-pop look + feel)
   ===================================================================== */
.densitypop {
  position: absolute; top: calc(100% + 6px); right: 0;
  z-index: 7000; min-width: 260px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.015)),
    rgba(22, 22, 26, 0.78);
  backdrop-filter: blur(24px) saturate(1.4);
  -webkit-backdrop-filter: blur(24px) saturate(1.4);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  box-shadow: 0 16px 40px -10px rgba(0,0,0,0.6),
              inset 0 1px 0 rgba(255,255,255,0.06);
  padding: 6px;
}
.densitypop__head { padding: 6px 10px 4px; }
.densitypop__title {
  font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-mute);
}
.densitypop__list { display: flex; flex-direction: column; gap: 2px; padding-top: 2px; }
.densitypop__item {
  appearance: none; background: transparent; border: 0;
  display: grid; grid-template-columns: 16px 28px 1fr;
  align-items: center; gap: 12px;
  width: 100%; padding: 8px 10px; border-radius: 6px;
  color: var(--text); font: inherit; text-align: left; cursor: pointer;
  transition: background 0.12s ease;
}
.densitypop__item:hover { background: rgba(255,255,255,0.06); }
.densitypop__item.is-checked { background: rgba(255,255,255,0.04); }
:root[data-theme="light"] .densitypop {
  background: rgba(255,255,255,0.85);
  border-color: rgba(0,0,0,0.08);
}
:root[data-theme="light"] .densitypop__item:hover { background: rgba(0,0,0,0.05); }
:root[data-theme="light"] .densitypop__item.is-checked { background: rgba(0,0,0,0.035); }

.densitypop__radio {
  width: 14px; height: 14px; border-radius: 50%;
  border: 1.5px solid var(--text-mute);
  display: inline-grid; place-items: center;
  flex-shrink: 0;
  transition: border-color 0.12s ease;
}
.densitypop__radio.is-checked { border-color: var(--accent); }
.densitypop__radio-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
}

/* Mini visual preview: 3 horizontal bars whose gap shrinks/grows with density. */
.densitypop__preview {
  display: flex; flex-direction: column; justify-content: center;
  width: 28px; height: 22px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 3px;
  padding: 3px;
  background: rgba(255,255,255,0.02);
}
.densitypop__preview > span {
  display: block; height: 1.5px;
  background: var(--text-mute);
  border-radius: 1px;
}
.densitypop__preview[data-density="compact"]     { gap: 2px; }
.densitypop__preview[data-density="default"]     { gap: 3px; }
.densitypop__preview[data-density="comfortable"] { gap: 5px; }
.densitypop__item.is-checked .densitypop__preview {
  border-color: color-mix(in oklch, var(--accent) 50%, transparent);
}
.densitypop__item.is-checked .densitypop__preview > span { background: var(--accent); }
:root[data-theme="light"] .densitypop__preview {
  border-color: rgba(0,0,0,0.10); background: rgba(0,0,0,0.02);
}

.densitypop__text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.densitypop__label { font-size: 13px; color: var(--text); }
.densitypop__hint  { font-size: 11px; color: var(--text-mute); }

/* =====================================================================
 * Unified Add to Playlist popover
 * ===================================================================== */
.pladd-layer {
  position: fixed;
  inset: 0;
  z-index: var(--z-popover, 12000);
  pointer-events: none;
}
.pladd-panel {
  position: fixed;
  width: min(460px, calc(100vw - 24px));
  max-height: min(560px, calc(100vh - 24px));
  display: flex;
  flex-direction: column;
  pointer-events: auto;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 12px;
  background: color-mix(in oklch, var(--bg-2) 92%, #000 8%);
  box-shadow: 0 24px 70px rgba(0,0,0,0.48), inset 0 1px 0 rgba(255,255,255,0.06);
  overflow: hidden;
}
:root[data-theme="light"] .pladd-panel {
  background: rgba(255,255,255,0.96);
  border-color: rgba(0,0,0,0.10);
  box-shadow: 0 24px 70px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.75);
}
.pladd-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 18px 12px;
  border-bottom: 1px solid var(--line);
}
.pladd-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
}
.pladd-sub {
  margin-top: 3px;
  font-size: 12px;
  color: var(--text-mute);
}
.pladd-iconbtn {
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--text-mute);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.pladd-iconbtn:hover { background: rgba(255,255,255,0.07); color: var(--text); }
:root[data-theme="light"] .pladd-iconbtn:hover { background: rgba(0,0,0,0.06); }
.pladd-create,
.pladd-foot {
  padding: 14px 18px;
}
.pladd-label {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
}
.pladd-label--section {
  padding: 12px 18px 8px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-mute);
}
.pladd-create-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  margin-top: 10px;
}
.pladd-input {
  width: 100%;
  min-width: 0;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 8px;
  background: rgba(255,255,255,0.04);
  color: var(--text);
  font-size: 13px;
  padding: 10px 11px;
  outline: none;
}
.pladd-input:focus {
  border-color: color-mix(in oklch, var(--accent) 72%, transparent);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--accent) 16%, transparent);
}
:root[data-theme="light"] .pladd-input {
  background: rgba(0,0,0,0.03);
  border-color: rgba(0,0,0,0.10);
}
.pladd-sep {
  height: 1px;
  background: var(--line);
  margin: 0 18px;
}
.pladd-list {
  margin: 10px 18px 0;
  min-height: 116px;
  max-height: 230px;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 6px;
  background: rgba(0,0,0,0.12);
}
:root[data-theme="light"] .pladd-list { background: rgba(0,0,0,0.025); }
.pladd-row {
  width: 100%;
  display: grid;
  grid-template-columns: 28px 1fr;
  align-items: center;
  gap: 8px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  padding: 9px 10px;
  text-align: left;
  cursor: pointer;
}
.pladd-row:hover,
.pladd-row.is-active {
  background: color-mix(in oklch, var(--accent) 12%, transparent);
}
.pladd-check {
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
}
.pladd-check input {
  accent-color: var(--accent);
  pointer-events: none;
}
.pladd-row-main {
  min-width: 0;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: center;
}
.pladd-row-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 600;
}
.pladd-row-count {
  font-size: 12px;
  color: var(--text-mute);
  white-space: nowrap;
}
.pladd-empty {
  padding: 28px 12px;
  text-align: center;
  color: var(--text-mute);
  font-size: 13px;
}
.pladd-foot {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  border-top: 1px solid var(--line);
  margin-top: 14px;
}
.pladd-btn {
  appearance: none;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  background: rgba(255,255,255,0.06);
  color: var(--text);
  padding: 9px 14px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
:root[data-theme="light"] .pladd-btn {
  border-color: rgba(0,0,0,0.10);
  background: rgba(0,0,0,0.04);
}
.pladd-btn--primary {
  border-color: transparent;
  background: var(--accent);
  color: #090909;
}
.pladd-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
@media (max-width: 600px) {
  .pladd-layer {
    background: rgba(0,0,0,0.38);
    pointer-events: auto;
  }
  .pladd-panel {
    left: 0 !important;
    right: 0;
    top: auto !important;
    bottom: 0;
    width: 100%;
    max-height: 86vh;
    border-radius: 16px 16px 0 0;
  }
  .pladd-create-row,
  .pladd-row-main {
    grid-template-columns: 1fr;
  }
  .pladd-row-count { margin-top: 2px; }
}

/* =====================================================================
 * Playlist builder tray (right-side)
 * ===================================================================== */
.plb-tray {
  position: fixed;
  top: 12px;
  right: 12px;
  bottom: var(--player-h, 98px);
  width: 380px;
  z-index: 6500;
  border-radius: 18px;
  overflow: hidden;
  /* Liquid glass — translucent so the table fx show through */
  background:
    linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02) 40%, rgba(255,255,255,0) 100%),
    color-mix(in oklch, var(--bg-2) 55%, transparent);
  backdrop-filter: blur(34px) saturate(1.7);
  -webkit-backdrop-filter: blur(34px) saturate(1.7);
  border: 1px solid rgba(255,255,255,0.08);
  display: flex; flex-direction: column;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.07),
    0 24px 60px rgba(0,0,0,0.55),
    0 4px 12px rgba(0,0,0,0.35);
  animation: plb-slide-in 240ms cubic-bezier(.2,.8,.2,1);
}
:root[data-theme="light"] .plb-tray {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.7), rgba(255,255,255,0.55) 40%, rgba(255,255,255,0.45) 100%),
    color-mix(in oklch, var(--bg-2) 50%, transparent);
  border-color: rgba(0,0,0,0.08);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.6),
    0 24px 60px rgba(0,0,0,0.18),
    0 4px 12px rgba(0,0,0,0.10);
}
@keyframes plb-slide-in { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
.plb-tray--over::after {
  content: ""; position: absolute; inset: 8px; border-radius: 12px;
  border: 2px dashed var(--accent);
  background: color-mix(in oklch, var(--accent) 8%, transparent);
  pointer-events: none;
}
.plb-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px;
  /* solid — no glass at the top */
  background: var(--bg-2);
  border-bottom: 1px solid var(--line);
}
:root[data-theme="light"] .plb-head { background: var(--bg-2); border-bottom-color: var(--line); }
.plb-title { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-mute); }
.plb-close {
  background: transparent; border: 0; color: var(--text-mute); cursor: pointer;
  width: 26px; height: 26px; border-radius: 6px;
  display: inline-flex; align-items: center; justify-content: center;
}
.plb-close:hover { background: rgba(255,255,255,0.08); color: var(--text); }
:root[data-theme="light"] .plb-close:hover { background: rgba(0,0,0,0.06); }
.plb-name-row { padding: 14px 16px 10px; }
.plb-name {
  width: 100%; background: transparent; border: 0; outline: 0;
  color: var(--text); font-size: 20px; font-weight: 600; letter-spacing: -0.01em;
  border-bottom: 1px solid rgba(255,255,255,0.10);
  padding: 4px 0 8px;
}
:root[data-theme="light"] .plb-name { border-bottom-color: rgba(0,0,0,0.10); }
.plb-name:focus { border-bottom-color: var(--accent); }
.plb-name::placeholder { color: var(--text-mute); font-weight: 400; }
.plb-list { flex: 1; overflow: auto; padding: 6px 10px 10px; }
.plb-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  height: 100%; gap: 10px; padding: 24px; text-align: center;
  color: var(--text-mute);
}
.plb-empty__icon { width: 44px; height: 44px; border-radius: 50%;
  background: rgba(255,255,255,0.06); display: grid; place-items: center; color: var(--text-dim); }
:root[data-theme="light"] .plb-empty__icon { background: rgba(0,0,0,0.04); }
.plb-empty__title { font-size: 13px; font-weight: 600; color: var(--text); }
.plb-empty__sub { font-size: 12px; max-width: 240px; line-height: 1.45; }
.plb-row {
  display: grid; grid-template-columns: 22px 16px 1fr 22px; align-items: center;
  gap: 8px; padding: 8px 10px; border-radius: 8px; cursor: grab;
  transition: background 120ms;
}
.plb-row:hover { background: rgba(255,255,255,0.05); }
:root[data-theme="light"] .plb-row:hover { background: rgba(0,0,0,0.04); }
.plb-row--dragging { opacity: 0.4; }
.plb-row__num { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 11px; color: var(--text-mute); text-align: right; }
.plb-row__grip { color: var(--text-dim); display: inline-flex; }
.plb-row__main { min-width: 0; }
.plb-row__title { font-size: 13px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.plb-row__meta { font-size: 11px; color: var(--text-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.plb-row__rm {
  background: transparent; border: 0; color: var(--text-dim); cursor: pointer;
  width: 22px; height: 22px; border-radius: 4px; opacity: 0; transition: opacity 120ms;
  display: inline-flex; align-items: center; justify-content: center;
}
.plb-row:hover .plb-row__rm { opacity: 1; }
.plb-row__rm:hover { background: rgba(255,255,255,0.08); color: var(--text); }
.plb-foot {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px;
  border-top: 1px solid rgba(255,255,255,0.06);
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.18) 100%);
}
:root[data-theme="light"] .plb-foot {
  border-top-color: rgba(0,0,0,0.06);
  background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.4) 100%);
}
.plb-foot__count { font-size: 11px; color: var(--text-mute); letter-spacing: 0.04em; }
.plb-foot__actions { display: flex; gap: 8px; }
.plb-btn {
  appearance: none; border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.06); color: var(--text);
  padding: 8px 14px; border-radius: 8px; font-size: 12px; font-weight: 600; cursor: pointer;
  backdrop-filter: blur(8px);
}
:root[data-theme="light"] .plb-btn {
  border-color: rgba(0,0,0,0.10); background: rgba(255,255,255,0.6);
}
.plb-btn--ghost { background: transparent; }
.plb-btn--ghost:hover { background: rgba(255,255,255,0.06); }
:root[data-theme="light"] .plb-btn--ghost:hover { background: rgba(0,0,0,0.05); }
.plb-btn--primary {
  background: var(--accent); color: #0a0a0a; border-color: transparent;
  box-shadow: 0 6px 18px color-mix(in oklch, var(--accent) 35%, transparent);
}
.plb-btn--primary:hover { filter: brightness(1.08); }
.plb-btn:disabled { opacity: 0.4; cursor: not-allowed; box-shadow: none; }

/* Hint strip below the head */
.plb-hint {
  padding: 12px 16px 0;
  font-size: 12px;
  color: var(--text-mute);
  letter-spacing: 0.01em;
}
.plb-hint kbd {
  display: inline-block;
  padding: 1px 6px; margin: 0 1px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 4px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10px; color: var(--text);
}
:root[data-theme="light"] .plb-hint kbd {
  background: rgba(0,0,0,0.04);
  border-color: rgba(0,0,0,0.10);
}

/* Name-this-playlist modal input */
.plb-name-modal-input {
  width: 100%; box-sizing: border-box;
  padding: 14px 16px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 12px;
  color: var(--text);
  font-size: 16px; font-weight: 500; letter-spacing: -0.005em;
  margin-bottom: 22px;
  outline: none;
  transition: border-color 120ms, background 120ms;
}
.plb-name-modal-input::placeholder { color: var(--text-mute); font-weight: 400; }
.plb-name-modal-input:focus {
  border-color: var(--accent);
  background: rgba(255,255,255,0.06);
}
:root[data-theme="light"] .plb-name-modal-input {
  background: rgba(0,0,0,0.03);
  border-color: rgba(0,0,0,0.10);
}
:root[data-theme="light"] .plb-name-modal-input:focus {
  background: rgba(0,0,0,0.04);
  border-color: var(--accent);
}

/* Saved-playlist sublist under the Playlists nav item */
.sidebar__sublist {
  display: flex; flex-direction: column;
  margin: 2px 0 6px 30px;
  border-left: 1px solid var(--line);
  padding-left: 8px;
}
.sidebar__subitem {
  display: grid; grid-template-columns: 8px 1fr auto; align-items: center;
  gap: 8px; padding: 4px 8px; border-radius: 4px;
  font-size: 12px; color: var(--text-mute); text-decoration: none;
  width: 100%;
  border: 0;
  background: transparent;
  font-family: inherit;
  text-align: left;
}
.sidebar__subitem:hover { background: var(--bg-3); color: var(--text); }
.sidebar__subitem--track-drop {
  color: var(--text);
  background:
    linear-gradient(90deg, color-mix(in oklch, var(--accent) 18%, transparent), transparent 72%),
    var(--bg-3);
  box-shadow:
    inset 2px 0 0 var(--accent),
    0 0 0 1px color-mix(in oklch, var(--accent) 32%, transparent);
}
.sidebar__subitem--track-drop .sidebar__subitem-dot,
.sidebar__subitem--drop-busy .sidebar__subitem-dot {
  background: var(--accent);
  box-shadow: 0 0 10px color-mix(in oklch, var(--accent) 72%, transparent);
}
.sidebar__subitem--drop-busy {
  color: var(--text);
}
.sidebar__subitem-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--text-dim); }
.sidebar__subitem-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar__subitem-count { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 10px; color: var(--text-dim); }
body.is-sidebar-collapsed .sidebar__sublist { display: none; }

.row {
  content-visibility: auto;
  contain-intrinsic-size: 42px;
}

.tbody-loadmore {
  width: calc(100% - 16px);
  margin: 8px;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--bg-2);
  color: var(--text-mute);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}
.tbody-loadmore:hover {
  color: var(--text);
  background: var(--bg-3);
}

/* Compact context menu for the playlists sub-section. .ctxmenu is 240px by
   default — way too wide for a single "Show recent playlists" toggle. */
.sidebar__plctx.ctxmenu {
  width: auto;
  min-width: 0;
}
.sidebar__plctx .ctxmenu__item {
  white-space: nowrap;
  padding: 6px 10px;
}

/* Stem-status pill: AI stems pipeline state. */
.stem-pill { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 10.5px; font-weight: 500; letter-spacing: 0.02em; line-height: 1.4; }
.stem-pill--ready      { color: oklch(0.78 0.16 155); background: color-mix(in srgb, oklch(0.78 0.16 155) 14%, transparent); }
.stem-pill--pending    { color: oklch(0.78 0.13 75);  background: color-mix(in srgb, oklch(0.78 0.13 75) 14%, transparent); }
.stem-pill--processing { color: oklch(0.78 0.14 230); background: color-mix(in srgb, oklch(0.78 0.14 230) 14%, transparent); }
.stem-pill--failed     { color: oklch(0.72 0.18 25);  background: color-mix(in srgb, oklch(0.72 0.18 25) 14%, transparent); }
.stem-pill--none       { color: rgba(255,255,255,0.32); background: transparent; }


/* =====================================================================
   TRASH PAGE
   ===================================================================== */
.trash-page {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 28px 32px 96px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  color: var(--text);
}

/* HERO --------------------------------------------------------------- */
/* Match Library: no h1 hero, just a thin toolbar. Hide icon + sub +
   page-dominating title; collapse actions into the toolbar row. */
.trash-hero {
  display: contents;
}
.trash-hero__top {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.trash-hero__icon { display: none; }
.trash-hero__title {
  margin: 0;
  font-size: 28px;
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--text);
}
.trash-hero__count {
  color: var(--text);
  font-weight: 600;
  font-size: 13px;
  margin-left: 6px;
}
.trash-hero__sub { display: none; }
.trash-hero__actions {
  margin-left: auto;
  display: flex;
  gap: 10px;
  align-items: center;
}

/* TOOLBAR ------------------------------------------------------------ */
.trash-toolbar {
  display: flex;
  gap: 14px;
  align-items: center;
  flex-wrap: wrap;
  padding: 10px 0 4px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.trash-search {
  flex: 1;
  min-width: 240px;
  max-width: 420px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--line);
  border-radius: 10px;
  transition: border-color 120ms, background 120ms;
}
.trash-search:focus-within {
  border-color: rgba(255,255,255,0.16);
  background: rgba(255,255,255,0.05);
}
.trash-search svg { width: 16px; height: 16px; opacity: 0.6; flex: 0 0 auto; }
.trash-search input {
  flex: 1;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 14px;
  outline: none;
  padding: 0;
}
.trash-search input::placeholder { color: rgba(245,244,240,0.35); }
.trash-search__clear {
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 2px;
  color: var(--muted);
  display: flex;
}
.trash-search__clear:hover { color: var(--text); }

.trash-filters { display: flex; gap: 6px; }
.trash-chip {
  padding: 7px 12px;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  transition: all 120ms;
}
.trash-chip:hover { color: var(--text); border-color: rgba(255,255,255,0.16); }
.trash-chip.is-on {
  color: var(--text);
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.18);
}

/* SELECTION BAR ------------------------------------------------------ */
.trash-selbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: rgba(250, 58, 5, 0.04);
  border: 1px solid rgba(250, 58, 5, 0.18);
  border-radius: 12px;
  font-size: 13px;
}
.trash-selbar > span:first-child { color: var(--text); }
.trash-selbar > span b { font-weight: 600; }

/* TABLE -------------------------------------------------------------- */
.trash-table {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  background: rgba(255,255,255,0.015);
}
.trash-thead, .trash-row {
  display: grid;
  grid-template-columns: 52px minmax(260px, 2fr) minmax(220px, 260px) 110px 180px auto;
  align-items: center;
  gap: 16px;
  padding: 0 18px;
}
.trash-thead {
  height: 36px;
  background: rgba(255,255,255,0.025);
  border-bottom: 1px solid var(--line);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.trash-row {
  min-height: 76px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  transition: background 140ms ease;
  position: relative;
}
.trash-row:last-child { border-bottom: 0; }
.trash-row:hover { background: rgba(255,255,255,0.025); }
.trash-row.is-sel { background: rgba(250, 58, 5, 0.05); }
.trash-row.is-sel::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
  background: var(--accent, #FA3A05);
}
.trash-row.is-playing .trash-prev__pbtn {
  background: var(--accent, #FA3A05);
  color: #fff;
  border-color: var(--accent, #FA3A05);
}

/* Custom checkboxes — native ones look like printer paper. */
.trash-td--check input,
.trash-th--check input {
  appearance: none;
  -webkit-appearance: none;
  width: 18px; height: 18px;
  border-radius: 5px;
  background: rgba(255,255,255,0.025);
  border: 1.5px solid rgba(255,255,255,0.16);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 120ms ease, border-color 120ms ease, box-shadow 120ms ease, transform 120ms ease;
  position: relative;
  flex: 0 0 auto;
}
.trash-td--check input:hover,
.trash-th--check input:hover {
  border-color: rgba(255,255,255,0.32);
  background: rgba(255,255,255,0.05);
}
.trash-td--check input:checked,
.trash-th--check input:checked {
  background: var(--accent, #FA3A05);
  border-color: var(--accent, #FA3A05);
  box-shadow: 0 0 0 4px rgba(250,58,5,0.14), 0 2px 8px rgba(250,58,5,0.32);
}
.trash-td--check input:checked::after,
.trash-th--check input:checked::after {
  content: "";
  width: 10px; height: 6px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: translateY(-1px) rotate(-45deg);
}
.trash-td--check input:focus-visible,
.trash-th--check input:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(250,58,5,0.32);
}

/* ITEM CELL ---------------------------------------------------------- */
.trash-item__title {
  display: flex; align-items: center; gap: 10px;
  font-size: 14px; font-weight: 500; color: var(--text);
  margin-bottom: 3px;
}
.trash-item__sub {
  font-size: 12px; color: var(--muted); line-height: 1.4;
}
.trash-item__origin { color: rgba(245,244,240,0.32); }

.trash-hot {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px;
  background: rgba(250, 58, 5, 0.12);
  color: var(--accent, #FA3A05);
  border: 1px solid rgba(250, 58, 5, 0.22);
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.trash-hot svg { width: 11px; height: 11px; }

/* PREVIEW CELL ------------------------------------------------------- */
.trash-prev {
  display: inline-flex; align-items: center; gap: 10px;
  background: transparent;
  border: 0;
  padding: 4px;
  cursor: pointer;
  border-radius: 8px;
  transition: background 120ms;
}
.trash-prev:hover { background: rgba(255,255,255,0.04); }
.trash-prev:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.trash-prev__pbtn {
  width: 32px; height: 32px;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--text);
  transition: all 120ms;
  flex: 0 0 auto;
}
.trash-prev__pbtn svg {
  width: 14px;
  height: 14px;
  display: block;
  transform: none;
}
.trash-prev__pbtn--play svg { transform: translateX(1px); }
.trash-prev:hover .trash-prev__pbtn { background: rgba(255,255,255,0.1); }
.trash-prev__label {
  font-size: 11.5px;
  color: var(--muted);
  letter-spacing: 0;
}

.trash-folder {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--muted);
  font-size: 12px;
}
.trash-glyph {
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  flex: 0 0 auto;
}
.trash-glyph svg { width: 14px; height: 14px; }

/* DELETED / REASON --------------------------------------------------- */
.trash-when { font-size: 13px; color: var(--text); }

.trash-reason {
  display: inline-flex;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 500;
  border: 1px solid transparent;
}
.trash-reason--user {
  background: rgba(255,255,255,0.05);
  color: var(--text);
  border-color: var(--line);
}
.trash-reason--auto {
  background: rgba(80, 130, 250, 0.08);
  color: rgb(140, 175, 245);
  border-color: rgba(80, 130, 250, 0.16);
}
.trash-reason--dup {
  background: rgba(250, 200, 60, 0.06);
  color: rgb(220, 180, 80);
  border-color: rgba(250, 200, 60, 0.16);
}

/* ACTIONS CELL ------------------------------------------------------- */
.trash-td--actions {
  display: flex; gap: 6px; justify-content: flex-end;
}

/* BUTTONS ------------------------------------------------------------ */
.trash-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 14px;
  font-size: 13px;
  font-weight: 500;
  border-radius: 9px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.04);
  color: var(--text);
  cursor: pointer;
  transition: all 120ms;
  font-family: inherit;
  white-space: nowrap;
}
.trash-btn:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.16); }
.trash-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.trash-btn svg { width: 14px; height: 14px; }
.trash-btn--sm { padding: 6px 10px; font-size: 12px; }
.trash-btn--sm svg { width: 12px; height: 12px; }
.trash-btn--icon { padding: 8px; }
.trash-btn--icon svg { width: 13px; height: 13px; }
.trash-btn--restore {
  padding: 8px 14px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
}

/* Refined trash table — calmer, more confident.
   Override block intentionally below the originals to win. */
.trash-table {
  background: linear-gradient(180deg, rgba(255,255,255,0.018), rgba(255,255,255,0.005));
  border-color: rgba(255,255,255,0.07);
  box-shadow: 0 1px 0 rgba(255,255,255,0.03) inset, 0 8px 24px rgba(0,0,0,0.18);
}
.trash-thead {
  background: rgba(255,255,255,0.018);
  border-bottom-color: rgba(255,255,255,0.05);
  letter-spacing: 0.12em;
  font-size: 10.5px;
  color: rgba(245,244,240,0.42);
}
.trash-row { border-bottom-color: rgba(255,255,255,0.035); }
.trash-row:hover { background: rgba(255,255,255,0.02); }

/* Row-level Restore: ghost-with-accent-edge.
   The cyan-fill original was loud + clashed with the red trash icon next door. */
.trash-row .trash-btn--primary,
.trash-row .trash-btn--restore {
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.08);
  color: var(--text);
  box-shadow: none;
  font-weight: 500;
}
.trash-row .trash-btn--primary:hover,
.trash-row .trash-btn--restore:hover {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.18);
  color: #fff;
}
.trash-row .trash-btn--primary svg,
.trash-row .trash-btn--restore svg { color: var(--accent, #FA3A05); opacity: 0.95; }

/* Per-row danger button: hide its border at rest, reveal on row hover.
   Stops the noisy red-square-next-to-button look. */
.trash-row .trash-btn--danger.trash-btn--icon {
  width: 44px;
  height: 44px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  background: transparent;
  border: 0;
  color: rgba(245,110,90,0.55);
  opacity: 0;
  line-height: 1;
  transition: opacity 140ms ease, background 120ms, border-color 120ms, color 120ms;
}
.trash-row .trash-btn--danger.trash-btn--icon svg {
  display: block;
  flex: 0 0 auto;
  margin: 0;
}
.trash-row:hover .trash-btn--danger.trash-btn--icon,
.trash-row.is-sel .trash-btn--danger.trash-btn--icon {
  opacity: 1;
}
.trash-row .trash-btn--danger.trash-btn--icon:hover {
  background: transparent;
  border-color: transparent;
  color: rgb(255,130,110);
}

/* Reason chips: more typographic, less pill-y */
.trash-reason {
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.01em;
}
.trash-reason--user {
  background: transparent;
  color: rgba(245,244,240,0.5);
  border-color: rgba(255,255,255,0.07);
}

/* Origin breadcrumb: tighter color hierarchy */
.trash-item__origin { color: rgba(245,244,240,0.28); font-size: 11.5px; }
.trash-item__title { letter-spacing: -0.005em; }
.trash-item__sub { font-size: 11.5px; }

/* Filter chips: refined surface */
.trash-chip {
  padding: 7px 13px;
  font-size: 12px;
  background: rgba(255,255,255,0.02);
  border-color: rgba(255,255,255,0.05);
}
.trash-chip:hover { background: rgba(255,255,255,0.05); }
.trash-chip.is-on {
  background: rgba(255,255,255,0.07);
  border-color: rgba(255,255,255,0.14);
  box-shadow: 0 1px 0 rgba(255,255,255,0.05) inset;
}

/* Hero: tone the trash icon down to a cooler glass tile */
.trash-hero__icon {
  background: rgba(255,255,255,0.025) !important;
  border: 1px solid rgba(255,255,255,0.07) !important;
  color: rgba(245,110,90,0.88) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset !important;
}

/* Top-right "Empty trash" — calmer */
.trash-hero__actions .trash-btn--danger {
  background: transparent;
  border-color: rgba(250,80,60,0.22);
  color: rgba(245,110,90,0.92);
}
.trash-hero__actions .trash-btn--danger:hover {
  background: rgba(250,80,60,0.08);
  border-color: rgba(250,80,60,0.36);
}
.trash-btn--ghost {
  background: transparent;
}
.trash-btn--primary {
  background: var(--accent, #FA3A05);
  border-color: var(--accent, #FA3A05);
  color: #fff;
  box-shadow: 0 1px 0 rgba(255,255,255,0.16) inset, 0 6px 14px rgba(250,58,5,0.28);
}
.trash-btn--primary:hover {
  background: color-mix(in oklab, var(--accent, #FA3A05) 88%, white);
  border-color: color-mix(in oklab, var(--accent, #FA3A05) 88%, white);
}
.trash-btn--danger {
  color: rgb(245, 110, 90);
  border-color: rgba(250, 80, 60, 0.28);
  background: rgba(250, 80, 60, 0.06);
}
.trash-btn--danger:hover {
  background: rgba(250, 80, 60, 0.12);
  border-color: rgba(250, 80, 60, 0.4);
  color: rgb(255, 130, 110);
}
.trash-btn--danger.trash-btn--solid {
  background: rgb(220, 60, 50);
  border-color: rgb(220, 60, 50);
  color: #fff;
}
.trash-btn--danger.trash-btn--solid:hover {
  background: rgb(240, 75, 65);
}
.trash-btn__count {
  margin-left: 4px;
  padding: 1px 7px;
  background: rgba(255,255,255,0.08);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
}

/* EMPTY STATE -------------------------------------------------------- */
.trash-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 80px 24px;
  gap: 14px;
}
.trash-empty__art {
  display: flex;
  margin-bottom: 8px;
}
.trash-empty__h {
  margin: 0;
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.01em;
}
.trash-empty__p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  max-width: 42ch;
  line-height: 1.5;
}
.trash-empty--small { padding: 60px 24px; }

/* CONFIRM MODAL ------------------------------------------------------ */
.trash-modal-scrim {
  position: fixed; inset: 0; z-index: 9000;
  background: rgba(8, 8, 8, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  animation: trashFade 140ms ease;
}
@keyframes trashFade { from { opacity: 0; } to { opacity: 1; } }
.trash-modal {
  width: min(440px, 100%);
  background: #15141A;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 28px 28px 22px;
  text-align: center;
  box-shadow: 0 24px 60px rgba(0,0,0,0.6);
  animation: trashPop 180ms ease;
}
@keyframes trashPop { from { transform: scale(0.96); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.trash-modal__icon {
  width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 14px;
  background: rgba(250, 80, 60, 0.1);
  color: rgb(245, 110, 90);
  border-radius: 50%;
}
.trash-modal__icon svg { width: 22px; height: 22px; }
.trash-modal__title {
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: 600;
}
.trash-modal__body {
  margin: 0 0 6px;
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.55;
}
.trash-modal__warn {
  margin: 0 0 20px;
  color: rgb(245, 110, 90);
  font-size: 12.5px;
  font-weight: 500;
}
.trash-modal__confirm {
  width: 100%;
  box-sizing: border-box;
  margin: 0 0 14px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(245, 110, 90, 0.35);
  background: rgba(255,255,255,0.04);
  color: var(--text);
  text-align: center;
  font: 700 13px/1.2 var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  letter-spacing: 0.16em;
}
.trash-modal__confirm:focus {
  outline: 2px solid rgba(245, 110, 90, 0.45);
  outline-offset: 2px;
}
.trash-modal__progress {
  margin: 0 0 14px;
  text-align: left;
}
.trash-modal__progress-label {
  margin-bottom: 7px;
  color: var(--muted);
  font-size: 12px;
}
.trash-modal__progress-bar {
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
}
.trash-modal__progress-bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: rgb(245, 110, 90);
  transition: width 160ms ease;
}
.trash-modal__error {
  margin: 0 0 14px;
  color: rgb(255, 150, 135);
  font-size: 12px;
  line-height: 1.4;
}
.trash-modal__actions {
  display: flex;
  gap: 10px;
  justify-content: center;
}

/* TOAST -------------------------------------------------------------- */
.trash-toast {
  position: fixed;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 8000;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  background: #15141A;
  border: 1px solid rgba(60, 200, 130, 0.3);
  border-radius: 10px;
  color: rgb(140, 230, 180);
  font-size: 13px;
  font-weight: 500;
  box-shadow: 0 12px 32px rgba(0,0,0,0.6);
  animation: trashToast 180ms ease;
}
.trash-toast svg { width: 16px; height: 16px; }
@keyframes trashToast {
  from { opacity: 0; transform: translateX(-50%) translateY(6px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* LIGHT THEME -------------------------------------------------------- */
:root[data-theme="light"] .trash-table {
  background: rgba(0,0,0,0.015);
}
:root[data-theme="light"] .trash-row:hover { background: rgba(0,0,0,0.025); }
:root[data-theme="light"] .trash-row.is-sel { background: rgba(250, 58, 5, 0.06); }
:root[data-theme="light"] .trash-modal { background: #fafafa; }
:root[data-theme="light"] .trash-toast { background: #fff; }

/* =====================================================================
   DUPLICATES PAGE
   ===================================================================== */
.dup-page {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 28px 32px 96px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* HERO --------------------------------------------------------------- */
.dup-hero { display: flex; flex-direction: column; gap: 18px; }
.dup-hero__top { display: flex; align-items: flex-start; gap: 18px; }
.dup-hero__icon {
  width: 56px; height: 56px; border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(155deg, rgba(170, 130, 255, 0.22), rgba(170, 130, 255, 0.06));
  color: #c8b3ff;
  border: 1px solid rgba(170, 130, 255, 0.22);
  flex: 0 0 auto;
}
.dup-hero__icon svg { width: 26px; height: 26px; }
.dup-hero__title {
  margin: 0 0 4px;
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.dup-hero__count {
  color: var(--muted);
  font-weight: 400;
  font-size: 16px;
  margin-left: 8px;
}
.dup-hero__sub {
  margin: 0;
  color: var(--muted);
  font-size: 13.5px;
  max-width: 720px;
  line-height: 1.55;
}
.dup-hero__never { color: rgba(120, 220, 160, 0.85); font-weight: 500; margin-left: 4px; }
.dup-hero__actions {
  margin-left: auto;
  display: flex; align-items: center; gap: 14px;
}
.dup-hero__stat { text-align: right; line-height: 1.1; padding-right: 4px; }
.dup-hero__stat-num {
  font-size: 22px; font-weight: 600; letter-spacing: -0.01em;
  color: rgba(255,255,255,0.96); font-variant-numeric: tabular-nums;
}
.dup-hero__stat-lbl { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; margin-top: 2px; }

/* SCOREBOARD --------------------------------------------------------- */
.dup-hero__scoreboard {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px;
}
.dup-stat {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.06);
  cursor: pointer;
  text-align: left;
  transition: background 120ms, border-color 120ms;
  color: inherit;
}
.dup-stat:hover { background: rgba(255,255,255,0.045); }
.dup-stat.is-on { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.18); }
.dup-stat svg { width: 18px; height: 18px; opacity: 0.7; flex: 0 0 auto; color: rgba(255,255,255,0.7); }
.dup-stat__num { font-size: 18px; font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; }
.dup-stat__lbl { font-size: 11.5px; color: var(--muted); margin-top: 4px; }

/* TOOLBAR ------------------------------------------------------------ */
.dup-toolbar {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  flex-wrap: wrap;
}
.dup-search {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 12px;
  border-radius: 10px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  flex: 0 1 360px;
  min-width: 220px;
}
.dup-search:focus-within { border-color: rgba(255,255,255,0.16); background: rgba(255,255,255,0.05); }
.dup-search svg { width: 14px; height: 14px; opacity: 0.55; flex: 0 0 auto; }
.dup-search input {
  flex: 1; background: transparent; border: none; outline: none;
  color: inherit; font-size: 13px;
}
.dup-search__clear {
  background: none; border: none; cursor: pointer; color: var(--muted);
  padding: 2px; display: flex; align-items: center;
}
.dup-filters { display: flex; gap: 6px; }
.dup-chip {
  padding: 6px 12px; border-radius: 999px;
  background: transparent; color: var(--muted);
  border: 1px solid rgba(255,255,255,0.08);
  font-size: 12px; cursor: pointer;
  transition: background 120ms, color 120ms, border-color 120ms;
}
.dup-chip:hover { color: rgba(255,255,255,0.85); border-color: rgba(255,255,255,0.18); }
.dup-chip.is-on { background: rgba(255,255,255,0.08); color: #fff; border-color: rgba(255,255,255,0.22); }
.dup-toolbar__spacer { flex: 1; }
.dup-icon-btn {
  width: 32px; height: 32px; border-radius: 8px;
  background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06);
  color: var(--muted); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.dup-icon-btn:hover { background: rgba(255,255,255,0.06); color: #fff; }
.dup-icon-btn svg { width: 14px; height: 14px; }

/* EXPLAIN STRIP — collapsible, low-key */
.dup-explain {
  border-radius: 10px;
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.06);
  font-size: 12.5px; color: rgba(255,255,255,0.78); line-height: 1.5;
}
.dup-explain summary {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 14px; cursor: pointer;
  list-style: none;
  color: rgba(255,255,255,0.82);
  font-weight: 500;
}
.dup-explain summary::-webkit-details-marker { display: none; }
.dup-explain summary::after {
  content: "›"; margin-left: auto; opacity: 0.5;
  transition: transform 140ms;
}
.dup-explain[open] summary::after { transform: rotate(90deg); }
.dup-explain summary svg { width: 13px; height: 13px; opacity: 0.6; }
.dup-explain__body { padding: 0 14px 12px 35px; }
.dup-explain b { color: rgba(255,255,255,0.92); font-weight: 500; }

/* GROUPS ------------------------------------------------------------- */
.dup-groups { display: flex; flex-direction: column; gap: 12px; }
.dup-group {
  border-radius: 14px;
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.06);
  overflow: hidden;
  transition: border-color 140ms;
}
.dup-group.is-open { border-color: rgba(255,255,255,0.10); }
.dup-group__head {
  display: grid;
  grid-template-columns: 24px auto 1fr auto auto;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  cursor: pointer;
}
.dup-group__chev {
  background: none; border: none; padding: 0;
  width: 24px; height: 24px;
  display: flex; align-items: center; justify-content: center;
  color: var(--muted); cursor: pointer;
}
.dup-group__chev svg { width: 14px; height: 14px; }
.dup-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 999px;
  font-size: 11.5px; font-weight: 500;
  border: 1px solid transparent;
  white-space: nowrap;
}
.dup-pill svg { width: 12px; height: 12px; }
.dup-pill--rose   { background: rgba(255, 255, 255, 0.05); color: rgba(255,255,255,0.78); border-color: rgba(255,255,255,0.12); }
.dup-pill--violet { background: rgba(255, 255, 255, 0.05); color: rgba(255,255,255,0.78); border-color: rgba(255,255,255,0.12); }
.dup-pill--amber  { background: rgba(255, 255, 255, 0.05); color: rgba(255,255,255,0.78); border-color: rgba(255,255,255,0.12); }
.dup-pill--slate  { background: rgba(255, 255, 255, 0.05); color: rgba(255,255,255,0.78); border-color: rgba(255,255,255,0.12); }
.dup-group__title { min-width: 0; }
.dup-group__name {
  font-size: 14.5px; font-weight: 500; color: rgba(255,255,255,0.95);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dup-group__artist { color: var(--muted); font-weight: 400; }
.dup-group__sub {
  font-size: 11.5px; color: var(--muted); margin-top: 3px;
  font-variant-numeric: tabular-nums;
}
.dup-group__conf { display: flex; align-items: center; gap: 10px; min-width: 130px; }
.dup-conf {
  width: 86px; height: 6px; border-radius: 3px;
  background: rgba(255,255,255,0.06); overflow: hidden;
}
.dup-conf__bar { height: 100%; border-radius: 3px; }
.dup-conf__bar--exact { background: linear-gradient(90deg, rgba(255,255,255,0.85), rgba(255,255,255,0.95)); }
.dup-conf__bar--high  { background: linear-gradient(90deg, rgba(255,255,255,0.65), rgba(255,255,255,0.78)); }
.dup-conf__bar--mid   { background: linear-gradient(90deg, rgba(255,255,255,0.45), rgba(255,255,255,0.58)); }
.dup-conf__bar--low   { background: linear-gradient(90deg, rgba(255,255,255,0.3), rgba(255,255,255,0.42)); }
.dup-conf__num {
  font-size: 12px; font-weight: 500; font-variant-numeric: tabular-nums;
  color: rgba(255,255,255,0.78); width: 38px; text-align: right;
}
.dup-group__head-actions { display: flex; gap: 6px; }
.dup-group__why {
  margin: 0;
  padding: 0 16px 12px 56px;
  font-size: 12.5px; color: var(--muted); line-height: 1.5;
  border-top: 1px solid rgba(255,255,255,0.04);
  padding-top: 12px;
}

/* FILES (rows within a group) --------------------------------------- */
.dup-files {
  display: flex; flex-direction: column;
  border-top: 1px solid rgba(255,255,255,0.04);
}
.dup-file {
  display: grid;
  grid-template-columns: 28px 32px minmax(220px, 2.2fr) 80px 70px 60px 70px 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  border-top: 1px solid rgba(255,255,255,0.03);
  position: relative;
  transition: background 120ms;
}
.dup-file:first-child { border-top: none; }
.dup-file:hover { background: rgba(255,255,255,0.02); }
.dup-file.is-keeper {
  background: linear-gradient(90deg, rgba(120, 220, 160, 0.08), rgba(120, 220, 160, 0.0) 60%);
}
.dup-file.is-keeper::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0;
  width: 3px; background: rgba(120, 220, 160, 0.7);
}
.dup-file.is-dup .dup-file__title { color: rgba(255,255,255,0.62); }
.dup-file.is-dup { opacity: 0.92; }
.dup-file__radio {
  width: 22px; height: 22px;
  border-radius: 999px;
  border: 1.5px solid rgba(255,255,255,0.18);
  background: transparent; cursor: pointer; padding: 0;
  display: flex; align-items: center; justify-content: center;
  flex: 0 0 auto;
  transition: border-color 120ms, background 120ms;
}
.dup-file__radio:hover { border-color: rgba(255,255,255,0.4); }
.dup-file__radio-dot {
  width: 10px; height: 10px; border-radius: 999px;
  background: transparent;
  transition: background 120ms;
}
.dup-file.is-keeper .dup-file__radio { border-color: rgba(120, 220, 160, 0.85); background: rgba(120, 220, 160, 0.08); }
.dup-file.is-keeper .dup-file__radio-dot { background: rgba(120, 220, 160, 0.95); }
.dup-file__play {
  width: 28px; height: 28px; border-radius: 999px;
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.78); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.dup-file__play:hover { background: rgba(255,255,255,0.10); color: #fff; }
.dup-file__play svg { width: 11px; height: 11px; }
.dup-file__title-col { min-width: 0; }
.dup-file__title {
  font-size: 13.5px; font-weight: 500; color: rgba(255,255,255,0.92);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  display: flex; align-items: center; gap: 8px;
}
.dup-file__keeper-tag {
  font-size: 9.5px; font-weight: 600; letter-spacing: 0.08em;
  padding: 2px 6px; border-radius: 4px;
  background: rgba(120, 220, 160, 0.16); color: #8ce6b3;
  border: 1px solid rgba(120, 220, 160, 0.3);
  flex: 0 0 auto;
}
.dup-file__sub { font-size: 11.5px; color: var(--muted); margin-top: 3px; font-variant-numeric: tabular-nums; }
.dup-file__wave { display: flex; align-items: center; }
.dup-file__meta-col { line-height: 1.05; text-align: left; min-width: 0; }
.dup-file__meta-col--size { text-align: right; }
.dup-file__meta-num {
  font-size: 12.5px; font-weight: 500; color: rgba(255,255,255,0.86);
  font-variant-numeric: tabular-nums;
}
.dup-file__meta-num--sm { font-size: 11.5px; font-weight: 400; }
.dup-file__meta-lbl { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; margin-top: 2px; }
.dup-file__origin {
  display: flex; align-items: center; gap: 6px;
  font-size: 11.5px; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  min-width: 0;
}
.dup-file__origin svg { width: 12px; height: 12px; flex: 0 0 auto; opacity: 0.7; }
.dup-file__device { color: rgba(255,255,255,0.4); }
.dup-file__hash {
  display: flex; align-items: center; gap: 4px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 10.5px; color: rgba(255,255,255,0.4);
  white-space: nowrap;
}
.dup-file__hash svg { width: 10px; height: 10px; opacity: 0.5; }
.dup-file.is-playing { background: rgba(170, 130, 255, 0.06); }
.dup-file.is-playing .dup-file__play { background: rgba(170, 130, 255, 0.2); color: #d3c2ff; border-color: rgba(170, 130, 255, 0.4); }

/* GROUP FOOT --------------------------------------------------------- */
.dup-group__foot {
  padding: 10px 16px 14px;
  border-top: 1px solid rgba(255,255,255,0.04);
}
.dup-group__hint {
  display: flex; align-items: flex-start; gap: 8px;
  font-size: 11.5px; color: var(--muted); line-height: 1.5;
}
.dup-group__hint svg { width: 12px; height: 12px; opacity: 0.6; flex: 0 0 auto; margin-top: 2px; }

/* BUTTONS ------------------------------------------------------------ */
.dup-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px; border-radius: 8px;
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.92); cursor: pointer;
  font-size: 12.5px; font-weight: 500;
  transition: background 120ms, border-color 120ms, transform 80ms;
}
.dup-btn:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.18); }
.dup-btn:active { transform: translateY(1px); }
.dup-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.dup-btn--sm { padding: 5px 10px; font-size: 11.5px; }
.dup-btn--ghost { background: transparent; border-color: rgba(255,255,255,0.08); color: var(--muted); }
.dup-btn--ghost:hover { color: #fff; background: rgba(255,255,255,0.04); }
.dup-btn--primary { background: rgba(120, 220, 160, 0.16); border-color: rgba(120, 220, 160, 0.34); color: #b6e9cc; }
.dup-btn--primary:hover { background: rgba(120, 220, 160, 0.24); border-color: rgba(120, 220, 160, 0.48); }
.dup-btn--danger-solid { background: rgba(255, 128, 149, 0.2); border-color: rgba(255, 128, 149, 0.4); color: #ffc6ce; }
.dup-btn--danger-solid:hover { background: rgba(255, 128, 149, 0.28); }
.dup-btn svg { width: 12px; height: 12px; }

/* EMPTY STATE -------------------------------------------------------- */
.dup-empty {
  display: flex; flex-direction: column; align-items: center;
  padding: 60px 20px; gap: 14px;
  background: rgba(255,255,255,0.015);
  border: 1px dashed rgba(255,255,255,0.08);
  border-radius: 16px;
  text-align: center;
}
.dup-empty--small { padding: 40px 20px; }
.dup-empty__art { opacity: 0.9; }
.dup-empty__h { margin: 0; font-size: 18px; font-weight: 500; }
.dup-empty__p { margin: 0; color: var(--muted); font-size: 13px; max-width: 380px; line-height: 1.5; }

/* MODAL -------------------------------------------------------------- */
.dup-modal-scrim {
  position: fixed; inset: 0; background: rgba(0,0,0,0.5);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center;
  z-index: 100;
}
.dup-modal {
  width: 440px; max-width: calc(100vw - 32px);
  background: #1a1a1c; border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px; padding: 22px; box-shadow: 0 24px 60px rgba(0,0,0,0.5);
}
.dup-modal__title { margin: 0 0 8px; font-size: 16px; font-weight: 500; }
.dup-modal__body { margin: 0 0 18px; color: var(--muted); font-size: 13px; line-height: 1.55; }
.dup-modal__actions { display: flex; gap: 8px; justify-content: flex-end; }

/* TOAST -------------------------------------------------------------- */
.dup-toast {
  position: fixed; bottom: 100px; left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px 10px 16px;
  background: #232326; border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px; box-shadow: 0 18px 50px rgba(0,0,0,0.5);
  z-index: 80;
  animation: dup-toast-in 200ms ease;
}
@keyframes dup-toast-in {
  from { opacity: 0; transform: translate(-50%, 8px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}
.dup-toast--merged svg:first-child { color: #8ce6b3; }
.dup-toast--dismissed svg:first-child { color: rgba(255,255,255,0.6); }
.dup-toast > svg:first-child { width: 16px; height: 16px; flex: 0 0 auto; }
.dup-toast__msg { font-size: 13px; }
.dup-toast__undo {
  background: rgba(170, 130, 255, 0.16); border: 1px solid rgba(170, 130, 255, 0.32);
  color: #d3c2ff; padding: 4px 10px; border-radius: 6px;
  font-size: 11.5px; cursor: pointer;
}
.dup-toast__undo:hover { background: rgba(170, 130, 255, 0.24); }
.dup-toast__close {
  background: none; border: none; color: var(--muted); cursor: pointer;
  width: 22px; height: 22px;
  display: flex; align-items: center; justify-content: center; padding: 0;
  border-radius: 6px;
}
.dup-toast__close:hover { background: rgba(255,255,255,0.06); color: #fff; }
.dup-toast__close svg { width: 12px; height: 12px; }

/* RESPONSIVE -------------------------------------------------------- */
@media (max-width: 1280px) {
  .dup-file {
    grid-template-columns: 28px 32px minmax(220px, 2.2fr) 80px 70px 60px 1fr auto;
  }
  .dup-file__meta-col--added { display: none; }
  .dup-file__hash { display: none; }
}
@media (max-width: 1080px) {
  .dup-file {
    grid-template-columns: 28px 32px 1fr 70px 60px auto;
  }
  .dup-file__wave, .dup-file__origin { display: none; }
}
@media (max-width: 760px) {
  .dup-page {
    overflow-x: hidden;
    box-sizing: border-box;
    padding: 20px 16px calc(var(--m-tabbar-h, 64px) + var(--m-safe-bottom, env(safe-area-inset-bottom, 0px)) + 160px);
  }
  .dup-hero__top {
    flex-wrap: wrap;
  }
  .dup-hero__actions {
    width: 100%;
    min-width: 0;
    margin-left: 0;
    justify-content: space-between;
    flex-wrap: wrap;
  }
  .dup-hero__stat {
    min-width: 0;
    text-align: left;
  }
  .dup-hero__stat-lbl {
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .dup-toolbar,
  .dup-filters {
    min-width: 0;
    width: 100%;
  }
  .dup-filters {
    overflow-x: auto;
    padding-bottom: 2px;
    scrollbar-width: none;
  }
  .dup-filters::-webkit-scrollbar { display: none; }
  .dup-search {
    min-width: 0;
    flex: 1 1 100%;
  }
  .dup-group__head {
    grid-template-columns: 24px minmax(0, 1fr);
    gap: 10px;
  }
  .dup-pill {
    max-width: calc(100vw - 72px);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .dup-group__title,
  .dup-group__conf,
  .dup-group__head-actions {
    grid-column: 2;
  }
  .dup-group__conf {
    min-width: 0;
  }
  .dup-group__head-actions {
    flex-wrap: wrap;
  }
}

/* LIGHT THEME -------------------------------------------------------- */
:root[data-theme="light"] .dup-stat,
:root[data-theme="light"] .dup-search,
:root[data-theme="light"] .dup-icon-btn,
:root[data-theme="light"] .dup-group { background: rgba(0,0,0,0.025); border-color: rgba(0,0,0,0.07); }
:root[data-theme="light"] .dup-file:hover { background: rgba(0,0,0,0.025); }
:root[data-theme="light"] .dup-modal { background: #fafafa; color: #1a1a1c; }
:root[data-theme="light"] .dup-toast { background: #fff; color: #1a1a1c; }

/* Sidebar alignment hard override.
   The expanded rail is a left rail, not centered navigation. This block sits
   at the end of the file so page-specific CSS cannot recenter the labels. */
.sidebar:not(.sidebar--collapsed),
.sidebar:not(.sidebar--collapsed) .sidebar__nav,
.sidebar:not(.sidebar--collapsed) .sidebar__group {
  align-items: stretch !important;
  text-align: left !important;
}
.sidebar:not(.sidebar--collapsed) .sidebar__brand,
.sidebar:not(.sidebar--collapsed) .sidebar__logo,
.sidebar:not(.sidebar--collapsed) .sidebar__section,
.sidebar:not(.sidebar--collapsed) .navitem {
  justify-content: flex-start !important;
  text-align: left !important;
}
.sidebar:not(.sidebar--collapsed) .sidebar__section {
  width: 100% !important;
}
.sidebar:not(.sidebar--collapsed) .navitem {
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  align-self: stretch !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 10px !important;
  padding-right: 10px !important;
}
.sidebar:not(.sidebar--collapsed) .navitem__label {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  margin-right: auto !important;
  text-align: left !important;
}
.sidebar:not(.sidebar--collapsed) .sidebar__section {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
}
.sidebar:not(.sidebar--collapsed) .sidebar__section > span:last-child,
.sidebar:not(.sidebar--collapsed) .sidebar__subitem-label,
.sidebar:not(.sidebar--collapsed) .sidebar__foot-label,
.sidebar:not(.sidebar--collapsed) .sidebar__quota-label {
  text-align: left !important;
}
.sidebar:not(.sidebar--collapsed) .sidebar__subitem {
  justify-content: flex-start !important;
  text-align: left !important;
}

/* Shared empty-state callout — used by Duplicates / Trash / etc when the
   page has zero data for a fresh account. Centered, restrained, no demo
   content masquerading as real. v0.2.0.135 (Tommy 2026-05-11 07:51Z). */
.sv-empty-state {
  margin: 80px auto;
  max-width: 480px;
  padding: 56px 32px;
  text-align: center;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 20px;
  background:
    radial-gradient(ellipse 100% 80% at 50% 0%, rgba(44, 102, 177, 0.06), transparent 60%),
    rgba(255, 255, 255, 0.015);
}
.sv-empty-state__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  margin-bottom: 24px;
  color: rgba(255, 255, 255, 0.6);
}
.sv-empty-state__icon svg { width: 24px; height: 24px; }
.sv-empty-state__h {
  margin: 0 0 12px;
  font-family: 'Geist', -apple-system, system-ui, sans-serif;
  font-weight: 500; font-size: 28px; letter-spacing: -0.02em;
  color: rgba(255, 255, 255, 0.92);
}
.sv-empty-state__p {
  margin: 0 0 16px;
  font-size: 15px; line-height: 1.55;
  color: rgba(255, 255, 255, 0.62);
  max-width: 380px; margin-left: auto; margin-right: auto;
}
.sv-empty-state__hint {
  margin: 0;
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.4);
}
.sv-empty-state__cta {
  display: inline-block;
  margin-top: 18px;
  padding: 12px 24px;
  border-radius: 99px;
  border: 1px solid rgba(255, 255, 255, 0.20);
  background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02));
  color: var(--ink, #f5f5f0);
  text-decoration: none;
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}
.sv-empty-state__cta:hover {
  border-color: rgba(255, 255, 255, 0.32);
  background: linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0.04));
}