/* ==========================================================================
   Loop design tokens
   Retheme everything from here: colors, radii, spacing, type, motion, layout.
   ========================================================================== */
:root {
  color-scheme: dark;

  --bg: #1a1a1a;
  --bg-sunken: #161616;
  --surface: #262626;
  --surface-2: #2e2e2e;
  --surface-3: #383838;
  --surface-hover: #222222;
  --glass: rgba(38, 38, 38, 0.72);
  --glass-strong: rgba(30, 30, 30, 0.86);
  --text: #ffffff;
  --text-2: #d6d6d6;
  --muted: #8a8a8a;
  --faint: #5a5a5a;
  --line: rgba(255, 255, 255, 0.07);
  --chip-line: rgba(255, 255, 255, 0.14);
  --chip-line-active: #ffffff;
  --focus: rgba(255, 255, 255, 0.55);
  --danger: #ff5a5f;
  --record: #ff3b30;
  --success: #7bd88f;
  --placeholder-a: #b9b0cf;
  --placeholder-b: #d9d4e8;
  --wave: #555555;
  --wave-progress: #ffffff;

  --font: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --fs-xs: 12px;
  --fs-sm: 13.5px;
  --fs-md: 15px;
  --fs-lg: 17px;
  --fs-xl: 21px;
  --fs-2xl: 28px;
  --fs-3xl: 34px;
  --fw-regular: 420;
  --fw-medium: 540;
  --fw-bold: 650;
  --tracking-tight: -0.018em;

  --r-xs: 6px;
  --r-sm: 10px;
  --r-tile: 14px;
  --r-btn: 16px;
  --r-lg: 18px;
  --r-xl: 24px;
  --r-card: 32px;
  --r-pill: 999px;

  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;

  --d-fast: 140ms;
  --d: 240ms;
  --d-slow: 460ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  --shadow-float: 0 18px 48px -12px rgba(0, 0, 0, 0.6), 0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-cover: 0 30px 60px -24px rgba(0, 0, 0, 0.75);
  --blur: saturate(160%) blur(22px);

  --sidebar-w: 288px;
  --topbar-h: 64px;
  --content-max: 1080px;
  --tile: 190px;
  --tile-gap: 60px;
  --row-gap: 44px;
  --player-h: 76px;
  --dock-gap: 16px;
  --gutter: 32px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
}

/* ==========================================================================
   Base
   ========================================================================== */
@font-face {
  font-family: "Geist";
  src: url("/fonts/Geist-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--bg);
  color: var(--text);
  font: var(--fw-regular) var(--fs-md) / 1.4 var(--font);
  letter-spacing: -0.006em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overscroll-behavior-y: none;
  -webkit-tap-highlight-color: transparent;
}
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; color: inherit; letter-spacing: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
button:disabled { cursor: default; opacity: 0.45; }
img { display: block; max-width: 100%; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--r-sm); }
::selection { background: rgba(255, 255, 255, 0.22); }

.icon { width: 20px; height: 20px; flex: none; display: block; }
.icon--sm { width: 16px; height: 16px; }
.icon--xs { width: 13px; height: 13px; }
.icon--lg { width: 24px; height: 24px; }
.icon--xl { width: 56px; height: 56px; }

.muted { color: var(--muted); }
.icon-btn.only-narrow { display: none; }
@media (max-width: 1023px) {
  .icon-btn.only-narrow { display: grid; }
  .icon-btn.only-wide { display: none; }
}
.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* Wordmark: set in CSS so the brackets never appear as raw text anywhere. */
.wordmark { font-weight: var(--fw-medium); letter-spacing: -0.01em; white-space: nowrap; }
.wordmark::before { content: "[loop]"; }

/* ==========================================================================
   Shell
   ========================================================================== */
.app {
  display: grid;
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
  height: 100dvh;
  transition: grid-template-columns var(--d-slow) var(--ease-out);
}
.app[data-state="booting"] { visibility: hidden; }
.app[data-state="auth"] { grid-template-columns: 0 minmax(0, 1fr); }
.app[data-state="auth"] .sidebar,
.app[data-state="auth"] .topbar,
.app[data-state="auth"] .dock { display: none; }
.app.is-collapsed { grid-template-columns: 0 minmax(0, 1fr); }
.app.is-collapsed .sidebar { transform: translateX(-100%); }

.scrim { display: none; }
.main { grid-column: -2 / -1; position: relative; min-width: 0; display: flex; flex-direction: column; height: 100dvh; }
.view {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: var(--s-6) var(--gutter) calc(var(--player-h) + 140px + var(--safe-b));
  outline: none;
  scroll-behavior: smooth;
}
.view > * { animation: view-in var(--d-slow) var(--ease-out); }
@keyframes view-in { from { opacity: 0; transform: translateY(8px); } }

/* ---------- Sidebar ---------- */
.sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  height: 100dvh;
  padding: var(--s-3) var(--s-3) var(--s-4);
  border-right: 1px solid var(--line);
  overflow: hidden;
  background: var(--bg);
  transition: transform var(--d-slow) var(--ease-out);
}
.sidebar__head { display: flex; align-items: center; height: 40px; padding: 0 var(--s-1); }
.sidebar__section { display: flex; flex-direction: column; min-height: 0; flex: 1; margin-top: var(--s-4); }
.sidebar__label { font-size: var(--fs-sm); color: var(--muted); padding: 0 var(--s-3) var(--s-2); }
.sidebar__foot { display: flex; flex-direction: column; gap: 2px; padding-top: var(--s-2); border-top: 1px solid var(--line); }

.nav { display: flex; flex-direction: column; gap: 2px; }
.nav__item {
  display: flex; align-items: center; gap: var(--s-3);
  height: 44px; padding: 0 var(--s-3);
  border-radius: var(--r-sm);
  font-weight: var(--fw-medium);
  font-size: var(--fs-md);
  color: var(--text-2);
  transition: background var(--d-fast), color var(--d-fast);
}
.nav__item:hover { background: var(--surface-hover); color: var(--text); }
.nav__item.is-active { background: var(--surface); color: var(--text); }
.nav__item--quiet { height: 38px; color: var(--muted); font-weight: var(--fw-regular); }
.nav__glyph {
  display: grid; place-items: center;
  width: 24px; height: 24px; border-radius: 7px;
  background: var(--surface-2);
  color: var(--text-2);
}
.nav__glyph .icon { width: 14px; height: 14px; }
.nav__item.is-active .nav__glyph { background: var(--text); color: var(--bg); }
.nav__item--quiet .nav__glyph { background: transparent; }
.nav__item--quiet .nav__glyph .icon { width: 18px; height: 18px; }
.nav__count {
  margin-left: auto; min-width: 22px; height: 20px; padding: 0 7px;
  border-radius: var(--r-pill); background: var(--surface-2);
  font-size: var(--fs-xs); display: grid; place-items: center; color: var(--text-2);
}

.library-list { display: flex; flex-direction: column; gap: 2px; overflow-y: auto; min-height: 0; padding-bottom: var(--s-2); }
.library-item {
  display: flex; align-items: center; gap: var(--s-3);
  height: 44px; padding: 0 var(--s-3);
  border-radius: var(--r-sm);
  font-weight: var(--fw-medium);
  color: var(--text-2);
  transition: background var(--d-fast), color var(--d-fast);
}
.library-item:hover { background: var(--surface-hover); color: var(--text); }
.library-item.is-active { background: var(--surface); color: var(--text); }
.library-item.is-drop-target { background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--chip-line-active); }
.art.library-item__art { width: 24px; height: 24px; border-radius: 6px; flex: none; }
.library-item__title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.library-item__eq { margin-left: auto; }
.library-empty { padding: var(--s-2) var(--s-3); color: var(--faint); font-size: var(--fs-sm); }

/* ---------- Top bar ---------- */
.topbar {
  flex: none;
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  height: calc(var(--topbar-h) + var(--safe-t));
  padding: var(--safe-t) var(--s-5) 0 var(--s-5);
  position: relative; z-index: 5;
}
.topbar__left { display: flex; align-items: center; gap: var(--s-2); min-width: 0; }
.topbar__right { display: flex; align-items: center; gap: var(--s-2); }
.topbar .topbar__menu { display: none; }
.app.is-collapsed .topbar .topbar__menu { display: grid; }

.crumbs { display: flex; align-items: center; gap: var(--s-2); font-size: var(--fs-lg); min-width: 0; }
.crumbs a, .crumbs span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crumbs__root { color: var(--muted); transition: color var(--d-fast); }
.crumbs__root:hover { color: var(--text); }
.crumbs__root:only-child { color: var(--text); font-size: var(--fs-xl); }
.crumbs__sep { color: var(--faint); }
.topbar .topbar__back { display: none; width: 38px; height: 38px; margin-right: var(--s-1); }
.crumbs__here { font-weight: var(--fw-medium); }

/* ==========================================================================
   Buttons, fields, chips
   ========================================================================== */
.icon-btn {
  display: grid; place-items: center;
  width: 40px; height: 40px; flex: none;
  border-radius: 12px;
  background: var(--surface);
  color: var(--text);
  transition: background var(--d-fast), transform var(--d-fast) var(--ease-out);
}
.icon-btn:hover { background: var(--surface-2); }
.icon-btn:active { transform: scale(0.94); }
.icon-btn--ghost { background: transparent; color: var(--text-2); }
.icon-btn--ghost:hover { background: var(--surface-hover); color: var(--text); }
.icon-btn--round { border-radius: var(--r-pill); }
.icon-btn.is-on { background: var(--text); color: var(--bg); }
.icon-btn .badge {
  position: absolute; top: 7px; right: 7px; width: 8px; height: 8px;
  border-radius: 50%; background: var(--record); box-shadow: 0 0 0 2px var(--bg);
}
.icon-btn { position: relative; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  height: 44px; padding: 0 var(--s-5);
  border-radius: var(--r-btn);
  background: var(--surface);
  font-weight: var(--fw-medium);
  white-space: nowrap;
  transition: background var(--d-fast), transform var(--d-fast) var(--ease-out), opacity var(--d-fast);
}
.btn:hover { background: var(--surface-2); }
.btn:active { transform: scale(0.97); }
.btn--primary { background: var(--text); color: var(--bg); }
.btn--primary:hover { background: #e9e9e9; }
.btn--danger { background: rgba(255, 90, 95, 0.14); color: var(--danger); }
.btn--danger:hover { background: rgba(255, 90, 95, 0.22); }
.btn--ghost { background: transparent; color: var(--muted); }
.btn--ghost:hover { background: var(--surface-hover); color: var(--text); }
.btn--block { width: 100%; }
.btn--sm { height: 34px; padding: 0 var(--s-3); border-radius: 11px; font-size: var(--fs-sm); }
.btn.is-busy { pointer-events: none; opacity: 0.6; }

.play-btn {
  display: grid; place-items: center;
  width: 56px; height: 56px; flex: none;
  border-radius: var(--r-btn);
  background: var(--text); color: #000;
  box-shadow: 0 10px 26px -10px rgba(255, 255, 255, 0.35);
  transition: transform var(--d) var(--ease-spring), background var(--d-fast);
}
.play-btn:hover { transform: scale(1.05); }
.play-btn:active { transform: scale(0.95); }
.play-btn .icon { width: 22px; height: 22px; }

.field { display: flex; flex-direction: column; gap: var(--s-2); }
.field__label { font-size: var(--fs-sm); color: var(--muted); }
.input {
  width: 100%; height: 48px; padding: 0 var(--s-4);
  border-radius: var(--r-btn);
  border: 1px solid transparent;
  background: var(--surface);
  outline: none;
  transition: border-color var(--d-fast), background var(--d-fast);
}
.input::placeholder { color: var(--muted); }
.input:focus { border-color: var(--chip-line); background: var(--surface-2); }
.input--error { border-color: rgba(255, 90, 95, 0.6); }
textarea.input { height: auto; min-height: 96px; padding: var(--s-3) var(--s-4); resize: vertical; }
.form-error { color: var(--danger); font-size: var(--fs-sm); min-height: 1.2em; }

.chip {
  height: 46px; padding: 0 var(--s-5);
  border-radius: var(--r-tile);
  border: 1.5px solid var(--chip-line);
  font-weight: var(--fw-medium);
  color: var(--text);
  transition: border-color var(--d-fast), background var(--d-fast), transform var(--d-fast) var(--ease-out);
}
.chip:hover { background: var(--surface-hover); }
.chip:active { transform: scale(0.96); }
.chip.is-active { border-color: var(--chip-line-active); }

.searchbox {
  position: relative; display: flex; align-items: center;
  height: 52px; border-radius: var(--r-btn);
  background: var(--surface);
  transition: background var(--d-fast), box-shadow var(--d-fast);
}
.searchbox:focus-within { background: var(--surface-2); box-shadow: 0 0 0 1px var(--chip-line); }
.searchbox .icon { position: absolute; left: var(--s-4); color: var(--muted); }
.searchbox input {
  width: 100%; height: 100%; padding: 0 var(--s-4) 0 52px;
  background: transparent; border: 0; outline: none; font-size: var(--fs-lg);
}
.searchbox input::placeholder { color: var(--muted); }
.searchbox input::-webkit-search-cancel-button { display: none; }
.searchbox--sm { height: 36px; border-radius: 11px; width: 300px; }
.searchbox--sm .icon { left: var(--s-3); width: 16px; height: 16px; }
.searchbox--sm input { padding-left: 36px; font-size: var(--fs-md); }

/* ==========================================================================
   Artwork: covers, placeholders, discs
   ========================================================================== */
.art {
  position: relative;
  aspect-ratio: 1;
  border-radius: var(--r-tile);
  overflow: hidden;
  background: linear-gradient(145deg, var(--placeholder-a), var(--placeholder-b));
}
.art img { width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity var(--d-slow) var(--ease-out); }
.art img.is-loaded { opacity: 1; }
.art--folder { background: var(--surface); display: grid; place-items: center; color: var(--muted); }
.art--folder .icon { width: 44%; height: 44%; stroke-width: 1.25; }
.art--unsaved { background: var(--surface); display: grid; place-items: center; color: var(--muted); }

/* Disc: cover art cropped to a circle with a dark spindle hole and a thin
   inner ring, used for track results and the player. */
.disc {
  position: relative;
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  background: linear-gradient(145deg, var(--placeholder-a), var(--placeholder-b));
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 14px 30px -14px rgba(0, 0, 0, 0.8);
}
.disc img { width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity var(--d-slow); }
.disc img.is-loaded { opacity: 1; }
.disc::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background:
    radial-gradient(circle, transparent 0 31%, rgba(255, 255, 255, 0.28) 31.5% 32.2%, transparent 32.8%),
    radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.18), transparent 45%);
  pointer-events: none;
}
.disc::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 17%; height: 17%; border-radius: 50%;
  transform: translate(-50%, -50%);
  background: var(--bg);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.08), 0 0 0 5px rgba(0, 0, 0, 0.25);
}
.disc.is-spinning { animation: spin 7s linear infinite; }
.disc.is-paused { animation-play-state: paused; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ==========================================================================
   Home grid and tiles
   ========================================================================== */
.page { max-width: var(--content-max); margin: 0 auto; }
.page--narrow { max-width: 760px; }
.page__head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-4); margin: var(--s-6) 0 var(--s-8); }
.page__title { font-size: var(--fs-2xl); font-weight: var(--fw-bold); letter-spacing: var(--tracking-tight); margin: 0; }
.page__sub { color: var(--muted); margin: var(--s-1) 0 0; }

.grid {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: var(--row-gap) var(--tile-gap);
  padding-top: var(--s-12);
}
.tile {
  position: relative;
  width: calc(var(--tile) + 2 * var(--s-3));
  margin: calc(-1 * var(--s-3));
  padding: var(--s-3);
  border-radius: calc(var(--r-tile) + 8px);
  transition: background var(--d) var(--ease-out), transform var(--d) var(--ease-out);
  cursor: pointer;
}
.tile:hover, .tile:focus-within, .tile.is-menu-open { background: var(--surface-hover); }
.tile:hover .tile__cover, .tile.is-menu-open .tile__cover { transform: translateY(-3px); }
.tile.is-drop-target { background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--chip-line-active); }
.tile__cover { position: relative; transition: transform var(--d) var(--ease-spring); }
.tile__cover .art { box-shadow: 0 16px 32px -20px rgba(0, 0, 0, 0.9); }
.tile__play {
  position: absolute; right: -10px; bottom: -10px;
  display: grid; place-items: center;
  width: 64px; height: 64px;
  border-radius: var(--r-btn);
  background: rgba(36, 36, 36, 0.55);
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
  color: #fff;
  box-shadow: 0 8px 22px -8px rgba(0, 0, 0, 0.6);
  opacity: 0; transform: scale(0.88);
  transition: opacity var(--d) var(--ease-out), transform var(--d) var(--ease-spring), background var(--d-fast);
}
.tile__play .icon { width: 22px; height: 22px; }
.tile:hover .tile__play, .tile:focus-within .tile__play, .tile.is-playing .tile__play, .tile.is-menu-open .tile__play { opacity: 1; transform: none; }
.tile__play:hover { background: rgba(50, 50, 50, 0.7); }
.tile__play:active { transform: scale(0.94); }
.tile__title {
  margin: var(--s-3) 0 0;
  font-size: var(--fs-xl);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-tight);
  line-height: 1.2;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  overflow-wrap: anywhere;
}
.tile__meta {
  display: flex; align-items: center; gap: var(--s-1);
  margin-top: var(--s-1); min-height: 26px;
  color: var(--muted); font-size: var(--fs-md);
}
.tile__meta span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tile__more {
  margin-left: auto; width: 30px; height: 26px; border-radius: 8px;
  display: grid; place-items: center; color: var(--text);
  opacity: 0; transition: opacity var(--d-fast), background var(--d-fast);
}
.tile__more:hover { background: var(--surface-2); }
.tile:hover .tile__more, .tile:focus-within .tile__more, .tile.is-menu-open .tile__more { opacity: 1; }
.tile--disc .tile__play { right: 2px; bottom: 2px; border-radius: var(--r-pill); width: 56px; height: 56px; }

/* ==========================================================================
   Project view
   ========================================================================== */
.project { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: var(--s-10); align-items: start; max-width: 1040px; margin: 0 auto; padding-top: var(--s-8); }
.project__cover { position: sticky; top: 0; }
.project__cover .art { border-radius: var(--r-lg); box-shadow: var(--shadow-cover); }
.project__cover-edit {
  position: absolute; right: var(--s-4); bottom: var(--s-4);
  opacity: 0; transform: translateY(4px);
  transition: opacity var(--d), transform var(--d) var(--ease-out);
  background: var(--glass); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
}
.project__cover:hover .project__cover-edit, .project__cover-edit:focus-visible { opacity: 1; transform: none; }
.project__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-4); }
.project__title {
  margin: 0; font-size: 26px; font-weight: var(--fw-bold); letter-spacing: -0.02em; line-height: 1.15;
  overflow-wrap: anywhere; cursor: text;
}
.project__meta { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; margin-top: 6px; color: var(--muted); font-size: var(--fs-sm); }
.project__actions { display: flex; align-items: center; gap: var(--s-3); }
.add-tracks {
  display: flex; align-items: center; justify-content: center; gap: var(--s-2);
  width: 100%; height: 46px; margin: var(--s-6) 0 var(--s-3);
  border-radius: var(--r-tile);
  background: var(--surface);
  font-size: var(--fs-md); font-weight: var(--fw-medium);
  transition: background var(--d-fast), transform var(--d-fast) var(--ease-out);
}
.add-tracks:hover { background: var(--surface-2); }
.add-tracks:active { transform: scale(0.99); }

.tracks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.track {
  position: relative;
  display: grid; grid-template-columns: 36px minmax(0, 1fr) auto auto; align-items: center; gap: var(--s-2);
  min-height: 54px; padding: 6px var(--s-2) 6px var(--s-1);
  border-radius: 10px;
  cursor: default;
  transition: background var(--d-fast);
  touch-action: pan-y;
  user-select: none;
}
.track:hover, .track.is-menu-open { background: var(--surface-hover); }
.track.is-active { background: var(--surface); }
.track__index { position: relative; display: grid; place-items: center; height: 32px; color: var(--muted); font-variant-numeric: tabular-nums; font-size: var(--fs-md); }
.track__num { transition: opacity var(--d-fast); }
.track__playbtn {
  position: absolute; inset: 0; display: grid; place-items: center; color: var(--text);
  opacity: 0; transition: opacity var(--d-fast);
}
.track:hover .track__num, .track:focus-within .track__num { opacity: 0; }
.track:hover .track__playbtn, .track:focus-within .track__playbtn { opacity: 1; }
.track.is-active .track__num { opacity: 0; }
.track.is-active:not(:hover) .track__playbtn { opacity: 0; }
.track__eq { position: absolute; inset: 0; display: none; place-items: center; }
.track.is-active:not(:hover) .track__eq { display: grid; }
.track__body { min-width: 0; }
.track__title { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: var(--fs-md); font-weight: var(--fw-medium); letter-spacing: -0.01em; }
.track__name { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.track__music { color: var(--text-2); font-variant-numeric: tabular-nums; }
.track__badge--on { background: var(--text); color: var(--bg); }
.track__badge--draft { background: rgba(245, 196, 81, 0.16); color: #f5c451; cursor: pointer; }
.vpill {
  flex: none; height: 20px; padding: 0 7px;
  border-radius: var(--r-pill); border: 1px solid var(--chip-line);
  color: var(--text-2); font-size: 11.5px; font-weight: var(--fw-medium); font-variant-numeric: tabular-nums;
  transition: border-color var(--d-fast), color var(--d-fast);
}
.vpill:hover { border-color: var(--chip-line-active); color: var(--text); }
.track__sub { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: var(--fs-sm); margin-top: 1px; white-space: nowrap; overflow: hidden; }
.track__badge {
  display: inline-flex; align-items: center; height: 20px; padding: 0 7px;
  border-radius: var(--r-pill); background: var(--surface-2); color: var(--text-2);
  font-size: 11.5px; font-weight: var(--fw-medium); letter-spacing: 0.01em;
}
.track__badge--warn { background: rgba(255, 90, 95, 0.14); color: var(--danger); }
.track__dur { color: var(--muted); font-variant-numeric: tabular-nums; padding: 0 var(--s-2); }
.track__more { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; color: var(--text); transition: background var(--d-fast); }
.track__more:hover { background: var(--surface-2); }
.track.is-dragging { z-index: 3; background: var(--surface-2); box-shadow: var(--shadow-float); transition: none; cursor: grabbing; }
.track.is-shifting { transition: transform var(--d) var(--ease-out); }
.tracks.is-sorting .track { transition: transform var(--d) var(--ease-out); }

.eq { display: flex; align-items: flex-end; gap: 2.5px; height: 16px; }
.eq i { width: 3px; height: 100%; border-radius: 2px; background: var(--text); transform-origin: bottom; animation: eq 1s var(--ease-in-out) infinite; }
.eq i:nth-child(2) { animation-delay: -0.35s; animation-duration: 0.8s; }
.eq i:nth-child(3) { animation-delay: -0.6s; animation-duration: 1.15s; }
.eq.is-paused i { animation-play-state: paused; }
@keyframes eq { 0%, 100% { transform: scaleY(0.3); } 50% { transform: scaleY(1); } }

/* ==========================================================================
   Search overlay
   ========================================================================== */
.search { max-width: var(--content-max); margin: 0 auto; }
.search__bar { display: flex; align-items: center; gap: var(--s-3); max-width: 690px; margin: 0 auto; }
.search__bar .searchbox { flex: 1; }
.search__done { display: none; }
.search__chips { display: flex; justify-content: center; flex-wrap: wrap; gap: var(--s-3); margin: var(--s-6) 0 0; }
.search__results { padding-top: var(--s-12); }
.search__section + .search__section { margin-top: var(--s-12); }
.search__section-title { font-size: var(--fs-sm); color: var(--muted); text-align: center; margin: 0 0 var(--s-2); font-weight: var(--fw-medium); }
.search__section .grid { padding-top: var(--s-6); }

.empty {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 18vh var(--s-4) var(--s-8);
}
.empty--inline { padding: var(--s-16) var(--s-4); }
.empty__icon { width: 72px; height: 72px; color: #4a4a4a; margin-bottom: var(--s-6); stroke-width: 1.5; }
.empty__title { font-size: var(--fs-2xl); font-weight: var(--fw-bold); letter-spacing: var(--tracking-tight); margin: 0; }
.empty__text { color: var(--muted); margin: var(--s-2) 0 0; font-size: var(--fs-lg); max-width: 380px; }
.empty .btn { margin-top: var(--s-6); }

/* ==========================================================================
   Profile card and iridescent disc
   ========================================================================== */
.profile { display: grid; place-items: center; padding: var(--s-10) 0; }
.profile-card {
  position: relative;
  width: min(380px, 100%);
  aspect-ratio: 3 / 4.3;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  padding: var(--s-8) var(--s-6) var(--s-8);
  border-radius: var(--r-card);
  background: linear-gradient(170deg, #f4f4f6 0%, #dcdce1 55%, #c9c9cf 100%);
  color: #111;
  box-shadow: 0 50px 90px -40px rgba(0, 0, 0, 0.9);
  perspective: 900px;
  overflow: hidden;
}
.cd {
  --rx: 0deg; --ry: 0deg; --gx: 50%; --gy: 50%;
  position: absolute; top: 9%; left: 50%;
  width: 78%; aspect-ratio: 1; border-radius: 50%;
  translate: -50% 0;
  transform: rotateX(var(--rx)) rotateY(var(--ry));
  transition: transform var(--d-slow) var(--ease-out);
  box-shadow: 0 30px 50px -20px rgba(0, 0, 0, 0.45), inset 0 0 0 1px rgba(255, 255, 255, 0.6);
  background:
    radial-gradient(circle at var(--gx) var(--gy), rgba(255, 255, 255, 0.85), transparent 28%),
    repeating-radial-gradient(circle, rgba(255, 255, 255, 0.0) 0 2px, rgba(255, 255, 255, 0.07) 2.5px 3px),
    conic-gradient(from 0deg, #e8f0ff, #f9d7f0, #d6f5ea, #fff3c9, #d9e4ff, #f2d4ff, #ccf4ff, #ffe0d1, #e8f0ff);
}
.cd::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 90deg, transparent, rgba(255, 255, 255, 0.55), transparent 25%, rgba(120, 140, 255, 0.25), transparent 50%, rgba(255, 255, 255, 0.5), transparent 75%, rgba(255, 120, 200, 0.22), transparent);
  mix-blend-mode: overlay;
  animation: spin 24s linear infinite;
}
.cd::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 30%; height: 30%; border-radius: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, #d9d9de 0 34%, rgba(255, 255, 255, 0.85) 35% 37%, rgba(210, 210, 216, 0.95) 38% 100%);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06);
}
.profile-card__who { display: flex; flex-direction: column; align-items: center; gap: var(--s-2); position: relative; }
.avatar {
  display: grid; place-items: center;
  width: 64px; height: 64px; border-radius: 50%;
  font-size: 24px; font-weight: var(--fw-bold); color: #fff;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.9), 0 10px 20px -8px rgba(0, 0, 0, 0.35);
}
.avatar--sm { width: 32px; height: 32px; font-size: 13px; box-shadow: none; }
.profile-card__name { font-size: var(--fs-xl); font-weight: var(--fw-bold); letter-spacing: var(--tracking-tight); margin-top: var(--s-1); }
.profile-card__joined { color: #6e6e74; font-size: var(--fs-sm); }
.profile__edit { margin-top: var(--s-6); color: var(--muted); font-weight: var(--fw-medium); }
.profile__edit:hover { color: var(--text); }
.profile__stats { display: flex; gap: var(--s-8); margin-top: var(--s-6); color: var(--muted); font-size: var(--fs-sm); }
.profile__stats b { display: block; color: var(--text); font-size: var(--fs-xl); font-weight: var(--fw-bold); }

/* ==========================================================================
   Dock: floating Add button + persistent player
   ========================================================================== */
.dock {
  position: fixed; left: var(--sidebar-w); right: 0; bottom: 0; z-index: 20;
  display: flex; flex-direction: column; align-items: center; gap: var(--dock-gap);
  padding: 0 var(--gutter) calc(var(--s-5) + var(--safe-b));
  pointer-events: none;
  transition: left var(--d-slow) var(--ease-out);
}
.app.is-collapsed .dock { left: 0; }
.dock > * { pointer-events: auto; }

.add { position: relative; display: flex; flex-direction: column; align-items: center; }
.add__btn {
  display: inline-flex; align-items: center; gap: var(--s-2);
  height: 56px; padding: 0 var(--s-6) 0 var(--s-5);
  border-radius: var(--r-pill);
  background: var(--glass);
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  font-size: var(--fs-lg); font-weight: var(--fw-medium);
  box-shadow: var(--shadow-float);
  transition: transform var(--d) var(--ease-spring), background var(--d-fast);
}
.add__btn:hover { background: var(--surface-2); transform: translateY(-1px); }
.add__btn:active { transform: scale(0.96); }
.add__btn .icon { transition: transform var(--d) var(--ease-spring); }
.add__btn[aria-expanded="true"] .icon { transform: rotate(45deg); }

.menu, .add__menu {
  min-width: 240px; padding: var(--s-2);
  border-radius: var(--r-lg);
  background: var(--glass-strong);
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  box-shadow: var(--shadow-float), inset 0 0 0 1px var(--line);
  transform-origin: var(--origin, bottom center);
  animation: pop var(--d) var(--ease-spring);
}
.add__menu { position: absolute; bottom: calc(100% + var(--s-3)); }
@keyframes pop { from { opacity: 0; transform: scale(0.92) translateY(6px); } }
.menu__item {
  display: flex; align-items: center; gap: var(--s-3);
  width: 100%; height: 44px; padding: 0 var(--s-3);
  border-radius: 11px; text-align: left;
  font-size: var(--fs-lg); font-weight: var(--fw-medium);
  transition: background var(--d-fast);
}
.menu__item:hover, .menu__item:focus-visible { background: rgba(255, 255, 255, 0.07); outline: none; }
.menu__item .icon { color: var(--text-2); }
.menu__item--danger, .menu__item--danger .icon { color: var(--danger); }
.menu__item kbd { margin-left: auto; }
.menu__sep { height: 1px; margin: var(--s-2) var(--s-3); background: var(--line); }
.menu__label { padding: var(--s-2) var(--s-3) var(--s-1); color: var(--muted); font-size: var(--fs-xs); }

kbd {
  display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px;
  border-radius: 6px; background: var(--surface-2); color: var(--muted);
  font: var(--fw-medium) 11.5px/1 var(--font);
}

/* ---------- Player ---------- */
.player {
  width: 100%; max-width: var(--content-max);
  display: grid; grid-template-columns: minmax(180px, 1fr) minmax(0, 2.2fr) auto; align-items: center; gap: var(--s-5);
  height: var(--player-h);
  padding: 0 var(--s-4) 0 var(--s-3);
  border-radius: var(--r-lg);
  background: var(--glass);
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  box-shadow: var(--shadow-float), inset 0 0 0 1px var(--line);
  animation: rise var(--d-slow) var(--ease-spring);
}
@keyframes rise { from { opacity: 0; transform: translateY(24px); } }
.player__now { display: flex; align-items: center; gap: var(--s-3); min-width: 0; cursor: pointer; }
.player__now .disc { width: 52px; flex: none; }
.player__text { min-width: 0; }
.player__title { font-weight: var(--fw-medium); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.player__sub { color: var(--muted); font-size: var(--fs-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.player__center { display: flex; align-items: center; gap: var(--s-3); min-width: 0; }
.player__controls { display: flex; align-items: center; gap: 2px; }
.player__controls .icon-btn { width: 36px; height: 36px; background: transparent; }
.player__controls .icon-btn:hover { background: var(--surface-hover); }
.player__toggle { width: 44px !important; height: 44px !important; border-radius: var(--r-pill) !important; background: var(--text) !important; color: #000 !important; }
.player__toggle .icon { width: 18px; height: 18px; }
.player__wave { flex: 1; min-width: 0; height: 36px; position: relative; cursor: pointer; }
.player__wave.is-loading::after {
  content: ""; position: absolute; inset: 14px 0; border-radius: 4px;
  background: linear-gradient(90deg, var(--surface-2), var(--surface-3), var(--surface-2));
  background-size: 200% 100%; animation: shimmer 1.4s linear infinite;
}
.player__fallback { position: absolute; left: 0; right: 0; top: 50%; height: 3px; margin-top: -1.5px; border-radius: 2px; background: var(--wave); overflow: hidden; }
.player__fallback i { display: block; height: 100%; width: 0; background: var(--wave-progress); }
.player__time { color: var(--muted); font-size: var(--fs-sm); font-variant-numeric: tabular-nums; white-space: nowrap; min-width: 84px; text-align: right; }
.player__extra { display: flex; align-items: center; gap: 2px; }
.player__extra .icon-btn { width: 36px; height: 36px; background: transparent; color: var(--text-2); }
.player__extra .icon-btn:hover { background: var(--surface-hover); color: var(--text); }
.player__speed { font-size: var(--fs-sm); font-weight: var(--fw-medium); width: auto !important; padding: 0 var(--s-2); font-variant-numeric: tabular-nums; }
.player__expand { display: none !important; }
.player__mini-progress { display: none; }

.volume { display: flex; align-items: center; gap: var(--s-1); }
.range {
  -webkit-appearance: none; appearance: none;
  width: 84px; height: 4px; border-radius: 2px; outline: none;
  background: linear-gradient(to right, var(--text) var(--pct, 100%), var(--surface-3) var(--pct, 100%));
  cursor: pointer;
}
.range::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 12px; border-radius: 50%; background: var(--text); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5); }
.range::-moz-range-thumb { width: 12px; height: 12px; border: 0; border-radius: 50%; background: var(--text); }

/* Queue panel */
.queue { width: min(380px, calc(100vw - 32px)); max-height: min(520px, 70vh); display: flex; flex-direction: column; }
.queue__head { display: flex; align-items: center; justify-content: space-between; padding: var(--s-2) var(--s-3) var(--s-3); }
.queue__title { font-weight: var(--fw-bold); font-size: var(--fs-lg); }
.queue__list { overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
.queue__item { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-2); border-radius: 11px; cursor: pointer; }
.queue__item:hover { background: rgba(255, 255, 255, 0.06); }
.queue__item.is-current { background: rgba(255, 255, 255, 0.09); }
.queue__item .disc { width: 36px; flex: none; }
.queue__item-title { font-weight: var(--fw-medium); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.queue__item-sub { color: var(--muted); font-size: var(--fs-sm); }

/* Full-screen now playing (mobile) */
.nowplaying {
  position: fixed; inset: 0; z-index: 60;
  display: flex; flex-direction: column;
  padding: calc(var(--s-4) + var(--safe-t)) var(--s-6) calc(var(--s-8) + var(--safe-b));
  background: var(--bg);
  animation: sheet-up var(--d-slow) var(--ease-out);
}
.nowplaying__bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.nowplaying__bg img { width: 100%; height: 100%; object-fit: cover; filter: blur(60px) saturate(140%); opacity: 0.35; transform: scale(1.4); }
.nowplaying__top { display: flex; justify-content: space-between; align-items: center; }
.nowplaying__art { flex: 1; display: grid; place-items: center; min-height: 0; padding: var(--s-8) 0; }
.nowplaying__art .disc { width: min(78vw, 46vh); }
.nowplaying__title { font-size: var(--fs-2xl); font-weight: var(--fw-bold); letter-spacing: var(--tracking-tight); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nowplaying__sub { color: var(--muted); font-size: var(--fs-lg); margin-top: 2px; }
.nowplaying__wave { height: 56px; margin: var(--s-6) 0 var(--s-2); position: relative; }
.nowplaying__times { display: flex; justify-content: space-between; color: var(--muted); font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.nowplaying__controls { display: flex; align-items: center; justify-content: space-between; margin-top: var(--s-6); }
.nowplaying__controls .icon-btn { width: 52px; height: 52px; background: transparent; }
.nowplaying__controls .icon-btn .icon { width: 28px; height: 28px; }
.nowplaying__controls .player__toggle { width: 76px !important; height: 76px !important; }
.nowplaying__controls .player__toggle .icon { width: 30px; height: 30px; }
@keyframes sheet-up { from { transform: translateY(100%); } }

/* ==========================================================================
   Layers: dialogs, sheets, popovers, palette, toasts, upload tray, dropzone
   ========================================================================== */
.layer { position: fixed; inset: 0; z-index: 50; pointer-events: none; }
.layer > * { pointer-events: auto; }
.backdrop {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.5);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  animation: fade var(--d) var(--ease-out);
}
.backdrop.is-leaving { animation: fade-out var(--d-fast) forwards; }
@keyframes fade { from { opacity: 0; } }
@keyframes fade-out { to { opacity: 0; } }
.popover { position: fixed; z-index: 2; }
.popover.is-leaving > * { animation: fade-out var(--d-fast) forwards; }

.dialog {
  position: fixed; left: 50%; top: 50%;
  width: min(440px, calc(100vw - 32px));
  padding: var(--s-6);
  border-radius: var(--r-xl);
  background: var(--surface);
  box-shadow: var(--shadow-float), inset 0 0 0 1px var(--line);
  transform: translate(-50%, -50%);
  animation: dialog-in var(--d) var(--ease-spring);
}
.dialog.is-leaving { animation: dialog-out var(--d-fast) forwards; }
@keyframes dialog-in { from { opacity: 0; transform: translate(-50%, -46%) scale(0.96); } }
@keyframes dialog-out { to { opacity: 0; transform: translate(-50%, -48%) scale(0.97); } }
.dialog__title { margin: 0 0 var(--s-1); font-size: var(--fs-xl); font-weight: var(--fw-bold); letter-spacing: var(--tracking-tight); }
.dialog__text { margin: 0 0 var(--s-5); color: var(--muted); }
.dialog__body { display: flex; flex-direction: column; gap: var(--s-4); margin-top: var(--s-4); }
.dialog__actions { display: flex; justify-content: flex-end; gap: var(--s-2); margin-top: var(--s-6); }
.picker { display: flex; flex-direction: column; gap: 2px; max-height: 50vh; overflow-y: auto; margin: 0 calc(-1 * var(--s-2)); }
.picker__item { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-2); border-radius: 12px; text-align: left; }
.picker__item:hover { background: var(--surface-2); }
.picker__item .art { width: 40px; border-radius: 8px; flex: none; }

.palette {
  position: fixed; left: 50%; top: 14vh;
  width: min(620px, calc(100vw - 32px));
  border-radius: var(--r-xl);
  background: var(--glass-strong);
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  box-shadow: var(--shadow-float), inset 0 0 0 1px var(--line);
  transform: translateX(-50%);
  overflow: hidden;
  animation: palette-in var(--d) var(--ease-spring);
}
@keyframes palette-in { from { opacity: 0; transform: translateX(-50%) scale(0.97) translateY(-8px); } }
.palette__input { width: 100%; height: 60px; padding: 0 var(--s-6); background: transparent; border: 0; outline: none; font-size: var(--fs-xl); border-bottom: 1px solid var(--line); }
.palette__list { max-height: 50vh; overflow-y: auto; padding: var(--s-2); }
.palette__item { display: flex; align-items: center; gap: var(--s-3); width: 100%; height: 48px; padding: 0 var(--s-3); border-radius: 12px; text-align: left; }
.palette__item.is-selected { background: rgba(255, 255, 255, 0.08); }
.palette__item .art { width: 28px; border-radius: 6px; }
.palette__item span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.palette__empty { padding: var(--s-6); text-align: center; color: var(--muted); }

.toasts {
  position: fixed; left: 50%; bottom: calc(var(--player-h) + 120px + var(--safe-b)); z-index: 70;
  display: flex; flex-direction: column-reverse; align-items: center; gap: var(--s-2);
  transform: translateX(-50%);
  pointer-events: none;
}
.toast {
  display: flex; align-items: center; gap: var(--s-3);
  max-width: min(460px, calc(100vw - 32px));
  min-height: 48px; padding: var(--s-2) var(--s-2) var(--s-2) var(--s-4);
  border-radius: var(--r-btn);
  background: var(--glass-strong);
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  box-shadow: var(--shadow-float), inset 0 0 0 1px var(--line);
  pointer-events: auto;
  animation: toast-in var(--d-slow) var(--ease-spring);
}
.toast.is-leaving { animation: toast-out var(--d) var(--ease-out) forwards; }
.toast__text { flex: 1; padding-right: var(--s-2); }
.toast--error .icon { color: var(--danger); }
.toast--success .icon { color: var(--success); }
@keyframes toast-in { from { opacity: 0; transform: translateY(16px) scale(0.96); } }
@keyframes toast-out { to { opacity: 0; transform: translateY(8px) scale(0.98); } }

.uploads {
  position: fixed; right: var(--s-6); bottom: calc(var(--s-6) + var(--safe-b)); z-index: 30;
  width: 340px; max-height: 50vh; display: flex; flex-direction: column;
  border-radius: var(--r-lg);
  background: var(--glass-strong);
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  box-shadow: var(--shadow-float), inset 0 0 0 1px var(--line);
  animation: rise var(--d-slow) var(--ease-spring);
  overflow: hidden;
}
.uploads__head { display: flex; align-items: center; justify-content: space-between; padding: var(--s-3) var(--s-3) var(--s-3) var(--s-4); }
.uploads__title { font-weight: var(--fw-bold); }
.uploads__list { overflow-y: auto; padding: 0 var(--s-2) var(--s-2); }
.uploads.is-collapsed .uploads__list { display: none; }
.upload { padding: var(--s-2) var(--s-2) var(--s-3); border-radius: 12px; }
.upload__row { display: flex; align-items: center; gap: var(--s-2); }
.upload__name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: var(--fw-medium); }
.upload__state { color: var(--muted); font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.upload__bar { height: 3px; margin-top: var(--s-2); border-radius: 2px; background: var(--surface-3); overflow: hidden; }
.upload__bar i { display: block; height: 100%; width: var(--p, 0%); background: var(--text); border-radius: 2px; transition: width var(--d) var(--ease-out); }
.upload.is-done .upload__bar i { background: var(--success); }
.upload.is-error .upload__bar i { background: var(--danger); }
.upload.is-error .upload__state { color: var(--danger); }

.dropzone {
  position: fixed; inset: 0; z-index: 80;
  display: grid; place-items: center;
  padding: var(--s-6);
  background: rgba(16, 16, 16, 0.6);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  animation: fade var(--d) var(--ease-out);
  pointer-events: none;
}
.dropzone__frame {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s-3);
  width: 100%; height: 100%;
  border-radius: var(--r-card);
  border: 2px dashed rgba(255, 255, 255, 0.3);
  animation: breathe 1.6s var(--ease-in-out) infinite;
}
.dropzone__title { font-size: var(--fs-2xl); font-weight: var(--fw-bold); letter-spacing: var(--tracking-tight); }
.dropzone__hint { color: var(--muted); font-size: var(--fs-lg); }
@keyframes breathe { 50% { border-color: rgba(255, 255, 255, 0.6); } }

/* Skeletons */
.skel {
  border-radius: var(--r-tile);
  background: linear-gradient(90deg, var(--surface) 0%, var(--surface-2) 40%, var(--surface) 80%);
  background-size: 220% 100%;
  animation: shimmer 1.5s linear infinite;
}
.skel--line { height: 14px; border-radius: 7px; }
@keyframes shimmer { to { background-position: -220% 0; } }

/* ==========================================================================
   Auth and settings
   ========================================================================== */
.auth { min-height: 100%; display: grid; place-items: center; padding: var(--s-8) var(--s-4); }
.auth__card { width: min(400px, 100%); }
.auth__mark { font-size: 44px; text-align: center; margin-bottom: var(--s-10); }
.auth__title { font-size: var(--fs-2xl); font-weight: var(--fw-bold); letter-spacing: var(--tracking-tight); margin: 0 0 var(--s-1); text-align: center; }
.auth__sub { color: var(--muted); text-align: center; margin: 0 0 var(--s-8); }
.auth__form { display: flex; flex-direction: column; gap: var(--s-3); }
.auth__switch { margin-top: var(--s-6); text-align: center; color: var(--muted); }
.auth__switch button { color: var(--text); font-weight: var(--fw-medium); }

.settings { display: flex; flex-direction: column; gap: var(--s-10); padding-top: var(--s-6); }
.settings__group h2 { font-size: var(--fs-sm); color: var(--muted); font-weight: var(--fw-medium); margin: 0 0 var(--s-3); }
.settings__card { border-radius: var(--r-lg); background: var(--surface); overflow: hidden; }
.settings__row { display: flex; align-items: center; gap: var(--s-4); min-height: 60px; padding: var(--s-3) var(--s-5); }
.settings__row + .settings__row { border-top: 1px solid var(--line); }
.settings__row-main { flex: 1; min-width: 0; }
.settings__row-title { font-weight: var(--fw-medium); }
.settings__row-sub { color: var(--muted); font-size: var(--fs-sm); overflow-wrap: anywhere; }
.code { font: 500 var(--fs-sm) ui-monospace, SFMono-Regular, Menlo, monospace; background: var(--bg-sunken); padding: var(--s-2) var(--s-3); border-radius: var(--r-sm); overflow-wrap: anywhere; user-select: all; }
.shortcuts { display: grid; grid-template-columns: auto 1fr; gap: var(--s-2) var(--s-4); align-items: center; }

/* ==========================================================================
   Versions, editor, recorder
   ========================================================================== */
.dialog--wide { width: min(640px, calc(100vw - 32px)); max-height: min(760px, calc(100dvh - 48px)); display: flex; flex-direction: column; }
.dialog__headrow { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-4); }
.dialog__text--tight { margin-bottom: 0; }
.versions__actions { display: flex; flex-wrap: wrap; gap: var(--s-2); margin: var(--s-5) 0 var(--s-4); }
.versions { list-style: none; margin: 0 calc(-1 * var(--s-2)); padding: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
.version { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: start; gap: var(--s-3); padding: var(--s-3) var(--s-2); border-radius: var(--r-tile); }
.version:hover { background: var(--surface-hover); }
.version.is-current { background: var(--surface-2); }
.version__play { width: 40px; height: 40px; background: var(--surface-3); }
.version__play:disabled { opacity: 0.35; }
.version__body { min-width: 0; }
.version__head { display: flex; align-items: center; gap: var(--s-2); min-width: 0; }
.version__num { flex: none; font-variant-numeric: tabular-nums; font-weight: var(--fw-bold); }
.version__name { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: var(--fw-medium); }
.version__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: 3px; color: var(--muted); font-size: var(--fs-sm); }
.version__notes { margin: var(--s-2) 0 0; color: var(--text-2); font-size: var(--fs-sm); white-space: pre-wrap; overflow-wrap: anywhere; }
.version__error { margin: var(--s-1) 0 0; color: var(--danger); font-size: var(--fs-sm); }

.editor, .rec { max-width: var(--content-max); margin: 0 auto; padding-top: var(--s-6); }
.editor__head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-4); margin-bottom: var(--s-6); }
.editor__title { margin: 0; font-size: var(--fs-3xl); font-weight: var(--fw-bold); letter-spacing: var(--tracking-tight); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.editor__sub { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin-top: var(--s-2); color: var(--muted); }
.editor__actions { display: flex; gap: var(--s-2); flex: none; }
.editor__wave, .rec__wave {
  position: relative; height: 180px;
  border-radius: var(--r-lg); background: var(--bg-sunken);
  box-shadow: inset 0 0 0 1px var(--line);
  touch-action: none; cursor: pointer; outline: none;
  user-select: none; -webkit-user-select: none;
}
.editor__wave:focus-visible, .rec__wave:focus-visible { box-shadow: inset 0 0 0 1px var(--focus); }
.wavecanvas { position: absolute; inset: 0; display: block; }
.trim-handle {
  position: absolute; top: 0; bottom: 0; z-index: 1; width: 22px; margin-left: -11px;
  cursor: ew-resize; touch-action: none;
}
.trim-handle::before { content: ""; position: absolute; top: 10px; bottom: 10px; left: 50%; width: 3px; margin-left: -1.5px; border-radius: 2px; background: var(--text); }
.trim-handle::after { content: ""; position: absolute; top: 50%; left: 50%; width: 12px; height: 28px; margin: -14px 0 0 -6px; border-radius: 6px; background: var(--text); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5); }
.trim-handle:focus-visible::after { outline: 2px solid var(--focus); outline-offset: 2px; }
.editor__transport { display: flex; align-items: center; gap: var(--s-4); margin-top: var(--s-5); flex-wrap: wrap; }
.editor__time { font-variant-numeric: tabular-nums; color: var(--text-2); min-width: 96px; }
.editor__tools { display: flex; gap: var(--s-2); margin-left: auto; flex-wrap: wrap; }
.editor__tools .chip { height: 40px; padding: 0 var(--s-4); display: inline-flex; align-items: center; gap: var(--s-2); font-size: var(--fs-sm); }
.editor__summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-3); margin: var(--s-6) 0 var(--s-4); }
.editor__summary-label { color: var(--muted); font-size: var(--fs-sm); }
.editor__result { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); font-weight: var(--fw-medium); font-variant-numeric: tabular-nums; }
.editor__result .muted { color: var(--muted); font-weight: var(--fw-regular); }
.editor__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--s-3); }
.editor__grid--tight { margin-top: var(--s-4); }

.knob { padding: var(--s-4) var(--s-5) var(--s-5); border-radius: var(--r-lg); background: var(--surface); display: flex; flex-direction: column; gap: var(--s-3); }
.knob__head { display: flex; align-items: baseline; gap: var(--s-2); }
.knob__label { color: var(--muted); font-size: var(--fs-sm); }
.knob__row { display: flex; flex-direction: column; gap: var(--s-1); }
.knob__row + .knob__row { padding-top: var(--s-2); border-top: 1px solid var(--line); }
.knob__value { margin-left: auto; font-size: var(--fs-xl); font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; letter-spacing: var(--tracking-tight); }
.knob__reset { font-size: var(--fs-xs); color: var(--muted); padding: 2px 6px; border-radius: 6px; }
.knob__reset:hover { color: var(--text); background: var(--surface-2); }
.knob__hint { color: var(--muted); font-size: var(--fs-xs); line-height: 1.45; }
.knob__range {
  --fill: 50%;
  -webkit-appearance: none; appearance: none; width: 100%; height: 28px; background: transparent; cursor: pointer;
}
.knob__range::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: linear-gradient(to right, var(--text) var(--fill), var(--surface-3) var(--fill)); }
.knob__range::-moz-range-track { height: 4px; border-radius: 2px; background: linear-gradient(to right, var(--text) var(--fill), var(--surface-3) var(--fill)); }
.knob__range::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; margin-top: -8px; border-radius: 50%; background: var(--text); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5); }
.knob__range::-moz-range-thumb { width: 20px; height: 20px; border: 0; border-radius: 50%; background: var(--text); }
.knob__range:focus-visible { outline: none; }
.knob__range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px var(--focus); }
.seg { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; padding: 3px; border-radius: 12px; background: var(--bg-sunken); }
.seg__btn { height: 34px; border-radius: 9px; color: var(--muted); font-size: var(--fs-sm); font-weight: var(--fw-medium); transition: background var(--d-fast), color var(--d-fast); }
.seg__btn[aria-pressed="true"] { background: var(--surface-3); color: var(--text); }

.rec__wave { height: 160px; cursor: default; }
.rec__deck { display: flex; align-items: center; gap: var(--s-6); margin-top: var(--s-6); }
.rec-btn {
  display: grid; place-items: center; flex: none;
  width: 84px; height: 84px; border-radius: 50%;
  background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--chip-line);
  transition: transform var(--d) var(--ease-spring), background var(--d-fast);
}
.rec-btn .icon { width: 34px; height: 34px; }
.rec-btn:hover { transform: scale(1.04); }
.rec-btn:active { transform: scale(0.95); }
.rec-btn:disabled { opacity: 0.5; }
.rec-btn.is-recording { background: var(--record); color: #fff; box-shadow: 0 0 0 0 rgba(255, 59, 48, 0.5); animation: rec-pulse 1.6s var(--ease-out) infinite; }
@keyframes rec-pulse { 70% { box-shadow: 0 0 0 16px rgba(255, 59, 48, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 59, 48, 0); } }
.rec__info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--s-2); }
.rec__clock { font-size: var(--fs-3xl); font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; letter-spacing: var(--tracking-tight); line-height: 1; }
.rec__status { color: var(--muted); }
.meter { --level: 0%; height: 6px; border-radius: 3px; background: var(--surface-3); overflow: hidden; max-width: 420px; }
.meter i { display: block; height: 100%; width: var(--level); background: var(--success); border-radius: inherit; transition: width 60ms linear; }
.meter.is-hot i { background: var(--danger); }
.rec__hint { color: var(--muted); font-size: var(--fs-sm); margin: var(--s-5) 0 0; max-width: 640px; line-height: 1.5; }
.rec__review { margin-top: var(--s-6); padding: var(--s-5); border-radius: var(--r-xl); background: var(--bg-sunken); box-shadow: inset 0 0 0 1px var(--line); }
.rec__review-head { display: flex; align-items: center; gap: var(--s-4); flex-wrap: wrap; }
.rec__take-len { font-size: var(--fs-xl); font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; }
.rec__review .knob { background: var(--surface); }
.rec__review .dialog__actions { flex-wrap: wrap; }

.editor__presets { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin: calc(-1 * var(--s-2)) 0 var(--s-5); }
.editor__presets .editor__summary-label { margin-right: var(--s-2); }
.editor__draft { align-self: center; color: var(--muted); font-size: var(--fs-sm); white-space: nowrap; }
.chip--sm { height: 34px; padding: 0 var(--s-3); font-size: var(--fs-sm); border-radius: 11px; display: inline-flex; align-items: center; }

.stems { margin-bottom: var(--s-3); padding: var(--s-5); border-radius: var(--r-lg); background: var(--surface); }
.stems__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap; }
.stems__title { margin: 0; font-size: var(--fs-lg); font-weight: var(--fw-bold); }
.stems__sub { margin: 2px 0 0; color: var(--muted); font-size: var(--fs-sm); }
.stems__presets { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.stems__body { display: flex; flex-direction: column; gap: var(--s-2); margin-top: var(--s-4); }
.stems__body:empty { display: none; }
.stem { display: grid; grid-template-columns: 76px 34px 34px minmax(0, 1fr) 64px; align-items: center; gap: var(--s-3); transition: opacity var(--d-fast); }
.stem.is-muted { opacity: 0.45; }
.stem__name { font-weight: var(--fw-medium); }
.stem__btn { width: 34px; height: 30px; border-radius: 8px; background: var(--surface-2); color: var(--muted); font-size: var(--fs-xs); font-weight: var(--fw-bold); transition: background var(--d-fast), color var(--d-fast); }
.stem__btn:hover { color: var(--text); }
.stem__btn.is-on { background: var(--danger); color: #fff; }
.stem__btn--solo.is-on { background: #f5c451; color: #1a1a1a; }
.stem__value { text-align: right; font-variant-numeric: tabular-nums; color: var(--text-2); font-size: var(--fs-sm); }

.app[data-route="editor"] .add, .app[data-route="record"] .add { display: none; }

/* ==========================================================================
   Responsive: tablet and phone get the top bar + drawer + mini player
   ========================================================================== */
@media (max-width: 1180px) {
  :root { --tile-gap: 40px; --tile: 180px; }
  .project { grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: var(--s-8); }
}

@media (max-width: 1023px) {
  /* Tablet and phone: the sidebar becomes a drawer, opened from the top bar on every page. */
  :root { --gutter: 24px; }
  .app, .app.is-collapsed { grid-template-columns: minmax(0, 1fr); }
  .sidebar {
    position: fixed; inset: 0 auto 0 0; z-index: 40;
    width: min(300px, 86vw);
    padding-top: calc(var(--s-3) + var(--safe-t));
    transform: translateX(-104%);
    box-shadow: var(--shadow-float);
  }
  .app.is-drawer-open .sidebar { transform: none; }
  .scrim { display: block; position: fixed; inset: 0; z-index: 39; background: rgba(0, 0, 0, 0.5); opacity: 0; pointer-events: none; transition: opacity var(--d) var(--ease-out); }
  .app.is-drawer-open .scrim { opacity: 1; pointer-events: auto; }
  .topbar__menu { display: grid !important; }
  .topbar { padding-left: var(--s-3); padding-right: var(--s-4); }
  .dock { left: 0 !important; }
  .project { grid-template-columns: minmax(0, 250px) minmax(0, 1fr); gap: var(--s-6); padding-top: var(--s-4); }
  .player { grid-template-columns: minmax(120px, 0.8fr) minmax(0, 2.4fr) auto; gap: var(--s-3); }
  .player__extra .volume .range, .player__speed { display: none; }
  .track__dur { display: none; }
}

@media (max-width: 640px) {
  :root { --gutter: 16px; --topbar-h: 60px; --player-h: 64px; }
  .topbar .topbar__back { display: grid; }
  .topbar__back ~ .crumbs__root, .topbar__back ~ .crumbs__sep { display: none; }
  .topbar { padding-left: var(--s-2); padding-right: var(--s-3); }
  .crumbs__root:only-child { font-size: 24px; }
  .dock { padding: 0 var(--s-3) calc(var(--s-3) + var(--safe-b)); gap: var(--s-3); }
  .player {
    grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-3);
    padding: 0 var(--s-2) 0 var(--s-2);
    position: relative; overflow: hidden;
  }
  .player__now .disc { width: 46px; }
  .player__center { display: contents; }
  .player__center .player__wave, .player__center .player__time, .player__controls [data-action="prev"] { display: none; }
  .player__extra > :not(.player__expand) { display: none; }
  .player__expand { display: grid !important; }
  .player__mini-progress { display: block; position: absolute; left: 12px; right: 12px; bottom: 0; height: 2px; background: var(--surface-3); border-radius: 1px; overflow: hidden; }
  .player__mini-progress i { display: block; height: 100%; width: 0; background: var(--text); }
  .add__btn { height: 52px; }
  .toasts { bottom: calc(var(--player-h) + 100px + var(--safe-b)); }
  .uploads { left: var(--s-3); right: var(--s-3); width: auto; bottom: calc(var(--player-h) + 90px + var(--safe-b)); }
  .searchbox--sm { display: none; }
}

@media (max-width: 640px) {
  :root { --tile-gap: 20px; --row-gap: 28px; }
  .grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); padding-top: var(--s-6); }
  .tile { width: auto; margin: calc(-1 * var(--s-2)); padding: var(--s-2); }
  .tile__play { opacity: 1; transform: none; width: 50px; height: 50px; right: -6px; bottom: -6px; border-radius: 14px; }
  .tile__play .icon { width: 18px; height: 18px; }
  .tile__more { opacity: 1; }
  .tile__title { font-size: var(--fs-lg); }
  .tile__meta { font-size: var(--fs-sm); }
  .project { grid-template-columns: minmax(0, 1fr); gap: var(--s-6); padding-top: var(--s-2); }
  .project__cover { position: relative; max-width: 420px; width: 100%; margin: 0 auto; }
  .project__cover-edit { opacity: 1; transform: none; }
  .project__title { font-size: var(--fs-2xl); }
  .play-btn { width: 52px; height: 52px; }
  .add-tracks { margin-top: var(--s-6); height: 52px; }
  .track { grid-template-columns: 36px minmax(0, 1fr) auto; min-height: 64px; }
  .track__dur { display: none; }
  .search__bar .searchbox { height: 46px; }
  .search__done { display: inline-flex; }
  .search__chips { gap: var(--s-2); margin-top: var(--s-4); }
  .chip { height: 40px; padding: 0 var(--s-4); font-size: var(--fs-sm); }
  .empty { padding-top: 12vh; }
  .empty__title { font-size: var(--fs-xl); }
  .page__head { margin: var(--s-2) 0 var(--s-6); }
  .app[data-route="project"] .add { display: none; }
  .editor, .rec { padding-top: var(--s-2); }
  .editor__head { flex-direction: column; align-items: stretch; }
  .editor__title { font-size: var(--fs-2xl); }
  .editor__actions .btn--primary { flex: 1; }
  .editor__wave { height: 150px; }
  .editor__tools { margin-left: 0; width: 100%; }
  .editor__grid { grid-template-columns: minmax(0, 1fr); }
  .rec__deck { gap: var(--s-4); }
  .rec-btn { width: 72px; height: 72px; }
  .rec__review { padding: var(--s-4); }
  .rec__review .dialog__actions .btn { flex: 1 1 auto; }
  .version { grid-template-columns: 36px minmax(0, 1fr) auto; gap: var(--s-2); }
  .stems { padding: var(--s-4); }
  .stem { grid-template-columns: 58px 30px 30px minmax(0, 1fr); gap: var(--s-2); }
  .stem__value { display: none; }
  .editor__draft { order: -1; flex-basis: 100%; }
  .version__play { width: 36px; height: 36px; }
}

@media (hover: none) {
  .tile__play, .tile__more { opacity: 1; transform: none; }
  .track:not(.is-active) .track__num { opacity: 1 !important; }
  .track.is-active .track__eq { display: grid; }
  .track__playbtn { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important; }
}

/* ==========================================================================
   Public share page (/s/<token>)
   ========================================================================== */
.share-body { overflow-y: auto; }
.share { max-width: 980px; margin: 0 auto; padding: var(--s-6) var(--s-6) calc(var(--s-16) + var(--safe-b)); }
.share__top { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); margin-bottom: var(--s-10); }
.share__mark { font-size: var(--fs-xl); color: var(--text); }
.share__by { color: var(--muted); font-size: var(--fs-sm); }
.share__hero { display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: var(--s-10); align-items: end; }
.share__cover .art { width: 100%; aspect-ratio: 1; border-radius: var(--r-xl); box-shadow: var(--shadow-cover); }
.share__eyebrow { color: var(--muted); font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: 0.08em; }
.share__title { margin: var(--s-2) 0 0; font-size: clamp(32px, 5vw, 52px); line-height: 1.05; font-weight: var(--fw-bold); letter-spacing: var(--tracking-tight); overflow-wrap: anywhere; }
.share__subtitle { margin: var(--s-2) 0 0; color: var(--text-2); font-size: var(--fs-lg); }
.share__meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--s-3); color: var(--muted); }
.share__name { display: flex; flex-direction: column; gap: var(--s-2); margin-top: var(--s-6); max-width: 340px; }
.input--sm { height: 40px; border-radius: 12px; font-size: var(--fs-sm); }
.share__player { margin-top: var(--s-10); padding: var(--s-5); border-radius: var(--r-xl); background: var(--surface); }
.share__now { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); }
.share__now-text { min-width: 0; }
.share__now-title { font-size: var(--fs-lg); font-weight: var(--fw-bold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.share__now-sub { color: var(--muted); font-size: var(--fs-sm); margin-top: 2px; }
.share__version { width: auto; max-width: 240px; }
.share__wave { position: relative; margin-top: var(--s-6); padding-top: 26px; }
.share__markers { position: absolute; inset: 0 0 auto 0; height: 22px; z-index: 2; }
.share__marker {
  position: absolute; top: 0; width: 20px; height: 20px; margin-left: -10px;
  border-radius: 50% 50% 50% 2px; background: var(--surface-3); color: var(--text);
  font-size: 10px; font-weight: var(--fw-bold); display: grid; place-items: center;
  transition: transform var(--d-fast) var(--ease-spring), background var(--d-fast);
}
.share__marker:hover { transform: scale(1.15); background: var(--text); color: var(--bg); }
.share__marker.is-owner { background: var(--text); color: var(--bg); }
.share__controls { display: flex; align-items: center; gap: var(--s-3); margin-top: var(--s-5); }
.share__time { margin-left: auto; color: var(--muted); font-variant-numeric: tabular-nums; }
.share__tracks { margin-top: var(--s-6); }
.share__tracks .track { cursor: pointer; }
.share__comments { margin-top: var(--s-10); }
.share__section-title { display: flex; align-items: center; gap: var(--s-2); margin: 0; font-size: var(--fs-xl); font-weight: var(--fw-bold); }
.share__count { font-size: var(--fs-sm); color: var(--muted); font-weight: var(--fw-regular); }
.share__hint { color: var(--muted); font-size: var(--fs-sm); margin: var(--s-2) 0 var(--s-4); }
.share__foot { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; margin-top: var(--s-16); color: var(--faint); font-size: var(--fs-sm); }
.share__screen { min-height: 80dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: var(--s-2); }
.share__screen .share__mark { margin-bottom: var(--s-8); }
.share__unlock { display: flex; flex-direction: column; gap: var(--s-2); width: min(320px, 100%); margin-top: var(--s-4); }

.comment-form { display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-4); border-radius: var(--r-lg); background: var(--surface); }
.comment-form textarea.input { min-height: 64px; }
.comment-form__row { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }
.comment-form__time { display: inline-flex; align-items: center; gap: var(--s-2); color: var(--muted); font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.comment-form__replying { display: flex; align-items: center; justify-content: space-between; color: var(--text-2); font-size: var(--fs-sm); }
.comments { display: flex; flex-direction: column; gap: 2px; margin-top: var(--s-4); }
.comment { padding: var(--s-3) var(--s-4); border-radius: var(--r-tile); }
.comment:hover { background: var(--surface-hover); }
.comment--reply { margin-left: var(--s-8); border-left: 2px solid var(--line); border-radius: 0 var(--r-tile) var(--r-tile) 0; }
.comment.is-resolved { opacity: 0.55; }
.comment__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); font-size: var(--fs-sm); }
.comment__author { font-weight: var(--fw-bold); }
.comment__time { padding: 1px 7px; border-radius: var(--r-pill); background: var(--surface-2); font-variant-numeric: tabular-nums; color: var(--text); }
.comment__time:hover { background: var(--text); color: var(--bg); }
.comment__version, .comment__ago { color: var(--muted); }
.comment__body { margin: var(--s-1) 0 0; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.5; }
.comment__reply, .comment__action { margin-top: var(--s-1); color: var(--muted); font-size: var(--fs-xs); padding: 2px 0; margin-right: var(--s-3); }
.comment__reply:hover, .comment__action:hover { color: var(--text); }

@media (max-width: 640px) {
  .share { padding: var(--s-4) var(--s-4) calc(var(--s-12) + var(--safe-b)); }
  .share__top { margin-bottom: var(--s-6); }
  .share__hero { grid-template-columns: minmax(0, 1fr); gap: var(--s-6); }
  .share__cover { max-width: 320px; width: 100%; margin: 0 auto; }
  .share__player { padding: var(--s-4); margin-top: var(--s-6); }
  .share__now { flex-direction: column; align-items: stretch; }
  .share__version { max-width: none; width: 100%; }
  .comment--reply { margin-left: var(--s-4); }
}

/* ---------- Share dialog, stats, notifications (app) ---------- */
.share-list { list-style: none; margin: 0 calc(-1 * var(--s-2)); padding: 0; display: flex; flex-direction: column; gap: 2px; overflow-y: auto; }
.share-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; align-items: center; gap: var(--s-2); padding: var(--s-3); border-radius: var(--r-tile); }
.share-row:hover { background: var(--surface-hover); }
.share-row.is-off .share-row__body { opacity: 0.5; }
.share-row--empty { display: block; }
.share-row__title { font-weight: var(--fw-medium); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.share-row__meta { color: var(--muted); font-size: var(--fs-sm); margin-top: 2px; display: flex; flex-wrap: wrap; gap: 4px; }
.share-row__flags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.share-row__flags:empty { display: none; }
.share-row__url { width: 100%; margin-top: 6px; padding: 4px 8px; border-radius: 8px; border: 0; background: var(--bg-sunken); color: var(--muted); font: inherit; font-size: var(--fs-xs); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; outline: none; }
.share-row__url:focus { color: var(--text); }
.check { display: flex; align-items: center; gap: var(--s-3); cursor: pointer; }
.check input { width: 18px; height: 18px; accent-color: var(--text); }
select.input { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 36px; }
.stat-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-2); margin: var(--s-5) 0 var(--s-2); }
.stat-tile { padding: var(--s-4); border-radius: var(--r-lg); background: var(--surface-2); }
.stat-tile__value { font-size: var(--fs-2xl); font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; }
.stat-tile__label { color: var(--muted); font-size: var(--fs-sm); }
.stats-scroll { overflow-y: auto; margin: 0 calc(-1 * var(--s-2)); padding: 0 var(--s-2); }
.stats__heading { margin: var(--s-5) 0 var(--s-2); font-size: var(--fs-md); font-weight: var(--fw-bold); }
.stats-table { display: flex; flex-direction: column; gap: var(--s-2); }
.stats-row { display: grid; grid-template-columns: minmax(0, 1.4fr) auto minmax(60px, 1fr) 64px; align-items: center; gap: var(--s-3); font-size: var(--fs-sm); }
.stats-row--small { grid-template-columns: minmax(0, 1.4fr) minmax(60px, 1fr) 64px; color: var(--text-2); padding-left: var(--s-3); }
.stats-row__title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stats-row__num { color: var(--muted); white-space: nowrap; }
.stats-row__pct { text-align: right; color: var(--text-2); font-variant-numeric: tabular-nums; }
.progress-bar { display: block; height: 6px; border-radius: 3px; background: var(--surface-3); overflow: hidden; }
.progress-bar i { display: block; height: 100%; background: var(--text-2); border-radius: inherit; }
.progress-bar.is-done i { background: var(--success); }
.listener { padding: var(--s-3) 0; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 6px; }
.listener__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; }
.listener__name { font-weight: var(--fw-medium); }
.listener__meta { color: var(--muted); font-size: var(--fs-sm); }
.comments__bar { display: flex; align-items: center; justify-content: space-between; margin-top: var(--s-4); }
.comments__bar .share__hint { margin: 0; }
.dialog--wide .comment-form { margin-top: var(--s-4); }
.track__badge--btn { cursor: pointer; gap: 3px; }
.track__badge--btn:hover { background: var(--text); color: var(--bg); }

[data-badge] { position: relative; }
[data-badge]::after {
  content: attr(data-badge); position: absolute; top: 2px; right: 2px;
  min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px;
  background: var(--record); color: #fff; font-size: 10.5px; font-weight: var(--fw-bold); line-height: 17px; text-align: center;
}
.notes-menu { width: min(380px, calc(100vw - 32px)); }
.notes { max-height: min(460px, 70vh); overflow-y: auto; display: flex; flex-direction: column; gap: 2px; padding: 0 var(--s-1) var(--s-1); }
.note { display: flex; gap: var(--s-3); padding: var(--s-3); border-radius: 12px; text-align: left; }
.note:hover { background: var(--surface-2); }
.note__icon { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); color: var(--text-2); }
.note.is-unread .note__icon { background: var(--text); color: var(--bg); }
.note__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.note__text { font-size: var(--fs-sm); line-height: 1.4; }
.note__quote { color: var(--text-2); font-size: var(--fs-sm); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.note__time { color: var(--muted); font-size: var(--fs-xs); }
@media (max-width: 640px) {
  .share-row { grid-template-columns: minmax(0, 1fr) auto auto; }
  .share-row > .btn--ghost { display: none; }
  .stats-row { grid-template-columns: minmax(0, 1fr) minmax(50px, 0.8fr) 56px; }
  .stats-row__num { display: none; }
}

/* ==========================================================================
   Editor (desktop: DAW workspace; phone: stage + tabbed panel)
   ========================================================================== */
.app[data-route="editor"] { grid-template-columns: 0 minmax(0, 1fr); }
.app[data-route="editor"] .sidebar,
.app[data-route="editor"] .topbar,
.app[data-route="editor"] .dock { display: none; }
.app[data-route="editor"] .view { padding: 0; overflow: hidden; }
.app[data-route="editor"] .view > * { animation: none; }

.daw, .m-ed { --accent: #f5d547; --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace; }
.rec-dot { display: block; width: 13px; height: 13px; border-radius: 50%; background: #ff453a; transition: border-radius var(--d-fast); }
.rec-dot--sm { width: 9px; height: 9px; flex: none; animation: rec-pulse 1s ease-in-out infinite; }
.rec-dot--lg { width: 22px; height: 22px; }
.is-on > .rec-dot { border-radius: 3px; animation: rec-pulse 1s ease-in-out infinite; }
.is-busy > .rec-dot { opacity: 0.4; }
@keyframes rec-pulse { 50% { opacity: 0.45; } }
.spinner { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--surface-3); border-top-color: var(--text); animation: spin 0.9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Desktop ---------- */
.daw { --panel: #1a1a1a; --row: #242424; display: flex; flex-direction: column; height: 100dvh; background: #0b0b0b; }
.daw__bar { flex: none; height: 52px; display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: 0 10px 0 8px; }
.daw__crumbs { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 15px; }
.daw__back { flex: none; width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; color: var(--text-2); }
.daw__back:hover { background: #1f1f1f; color: var(--text); }
.daw__crumb { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 180px; }
.daw__crumb:hover { color: var(--text-2); }
.daw__sep { color: #4a4a4a; }
.daw__title { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.daw__ver { color: var(--muted); font: 12px var(--mono); }
.daw__right { display: flex; align-items: center; gap: 8px; min-width: 0; }
.daw__draft { color: #5a5a5a; font-size: 11.5px; white-space: nowrap; }
.daw__transport { display: flex; gap: 4px; }
.tbtn { width: 48px; height: 32px; border-radius: 8px; background: #1f1f1f; color: #fff; display: grid; place-items: center; transition: background var(--d-fast); }
.tbtn .icon { width: 16px; height: 16px; }
.tbtn:hover { background: #2a2a2a; }
.tbtn.is-on { background: #fff; color: #000; }
.tbtn--rec.is-on { background: #3b1614; }
.tchips { display: flex; gap: 1px; border-radius: 8px; overflow: hidden; }
.tchip { height: 32px; padding: 0 12px; display: inline-flex; align-items: center; gap: 6px; background: #1a1a1a; color: #e8e8e8; font: 12px var(--mono); white-space: nowrap; }
.tchip__dim { color: #8a8a8a; }
.tchip.is-changed, .tchip.is-changed .tchip__dim { color: var(--accent); }
.tchip--time { min-width: 112px; justify-content: center; }
.tchip--btn:hover { background: #242424; }
.tchip--input { font: 13px var(--font); max-width: 160px; }
.tchip__text { overflow: hidden; text-overflow: ellipsis; }
.daw__save { flex: none; height: 32px; padding: 0 14px; border-radius: 8px; background: #1f1f1f; color: #6f6f6f; font-weight: 600; font-size: 13.5px; transition: background var(--d-fast), color var(--d-fast); }
.daw__save.is-ready { background: var(--accent); color: #000; }

.daw__main { flex: 1; min-height: 0; display: grid; grid-template-columns: 290px minmax(0, 1fr) 370px; gap: 8px; padding: 0 8px 8px; }
.daw__tracks, .daw__inspector { min-height: 0; border-radius: 14px; background: var(--panel); overflow: hidden; display: flex; flex-direction: column; }
.daw__inspector { border-radius: 0; }

.lanes__head { flex: none; display: flex; align-items: center; padding: 0 18px; border-bottom: 1px solid #0f0f0f; }
.lanes__head h2 { margin: 0; font-size: 15px; font-weight: 600; }
.lanes__list { flex: none; display: flex; flex-direction: column; }
.lane-card { box-sizing: border-box; padding: 12px 14px 12px 18px; display: flex; flex-direction: column; justify-content: center; gap: 12px; border-bottom: 1px solid #0f0f0f; }
.lane-card.is-muted > * { opacity: 0.45; }
.lane-card.is-recording { background: rgba(255, 69, 58, 0.08); }
.lane-card__top { display: flex; align-items: center; gap: 4px; min-width: 0; }
.lane-card__name { flex: 1; min-width: 0; font-size: 13.5px; color: #d8d8d8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left; }
.lane-card__name--btn:hover { color: #fff; }
.lane-card__note { font-size: 11px; color: var(--muted); white-space: nowrap; }
.lane-card__value { font: 11px var(--mono); color: var(--muted); }
.lane-card--main { flex: none; height: auto; border-top: 1px solid #0f0f0f; border-bottom: 0; background: #1a2440; box-shadow: inset 3px 0 0 #3d6bff; }
.ms { flex: none; width: 26px; height: 24px; border-radius: 6px; background: #2a2a2a; color: #cfcfcf; font: 12px var(--mono); }
.ms:hover { background: #333; }
.ms[aria-pressed="true"] { background: #e6e6e6; color: #000; }
.ms--solo[aria-pressed="true"] { background: var(--accent); }
.lanes__extra { padding: 12px 14px; }
.lanes__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.lanes__status { display: flex; align-items: center; gap: 8px; color: var(--text-2); font-size: 13px; }
.lanes__hint { margin: 8px 0 0; color: var(--muted); font-size: 12px; }
.lanes__spacer { flex: 1; }
.mini { height: 28px; padding: 0 10px; border-radius: 7px; background: #262626; color: #ddd; font-size: 12.5px; display: inline-flex; align-items: center; gap: 6px; }
.mini:hover { background: #2f2f2f; }
.mini:disabled { opacity: 0.6; }
.mini--wide { width: 100%; justify-content: center; }

/* Tick fader */
.level { --pos: 50%; -webkit-appearance: none; appearance: none; width: 100%; height: 24px; margin: 0; border-radius: 6px; cursor: pointer; background:
  repeating-linear-gradient(90deg, #4a4a4a 0 1px, transparent 1px 12px) center / calc(100% - 20px) 9px no-repeat, var(--row); }
.level::-webkit-slider-thumb { -webkit-appearance: none; width: 10px; height: 18px; border-radius: 3px; background: #c4c4c4; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6); }
.level::-moz-range-thumb { width: 10px; height: 18px; border: 0; border-radius: 3px; background: #c4c4c4; }
.level:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* Timeline */
.daw__timeline { position: relative; min-width: 0; overflow: hidden; background: #000; border-radius: 10px; outline: none; touch-action: none; user-select: none; -webkit-user-select: none; }
.daw__timeline:focus-visible { box-shadow: inset 0 0 0 1.5px var(--focus); }
.timeline__canvas { position: absolute; inset: 0; display: block; }
.timeline__handle { position: absolute; top: 34px; width: 16px; height: 20px; margin-left: -8px; opacity: 0; }
.timeline__handle:focus-visible { opacity: 1; outline: 2px solid var(--focus); border-radius: 3px; }

/* Inspector: a stack of cards on the dark column */
.daw__inspector { background: transparent; gap: 4px; }
.inspector__head { flex: none; display: flex; align-items: center; justify-content: space-between; padding: 0 10px 0 16px; border-radius: 14px; background: var(--panel); }
.inspector__preset { display: inline-flex; align-items: center; gap: 4px; padding: 6px 8px; margin-left: -8px; border-radius: 8px; color: #5b8cff; font-weight: 500; font-size: 15px; }
.inspector__preset:hover { background: var(--row); }
.icon-btn--sm { width: 30px; height: 30px; }
.inspector__body { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; scrollbar-width: none; }
.inspector__body::-webkit-scrollbar { display: none; }
.section { flex: none; padding: 12px 14px 14px; border-radius: 14px; background: var(--panel); }
.section__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.section.is-collapsed .section__head { margin-bottom: 0; }
.section.is-collapsed .section__rows { display: none; }
.section__toggle { display: inline-flex; align-items: center; gap: 4px; margin: -4px -6px; padding: 4px 6px; border-radius: 6px; color: #8a8a8a; }
.section__toggle:hover { color: #d0d0d0; }
.section__title { font-size: 13.5px; font-weight: 500; }
.section__chev { opacity: 0; transition: opacity var(--d-fast), transform var(--d-fast); }
.section__toggle:hover .section__chev, .section__toggle:focus-visible .section__chev, .section.is-collapsed .section__chev { opacity: 1; }
.section.is-collapsed .section__chev { transform: rotate(-90deg); }
.section__dot { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; }
.section__dot::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #2e2e2e; transition: background var(--d), box-shadow var(--d); }
.section__dot:hover::after { background: #444; }
.section__dot.is-live::after { background: #3ddc6a; box-shadow: 0 0 6px 1px rgba(61, 220, 106, 0.75), 0 0 14px 3px rgba(61, 220, 106, 0.3); }
.section__dot.is-held::after { background: transparent; box-shadow: inset 0 0 0 1.5px rgba(61, 220, 106, 0.6); }
.section.is-off .section__rows { opacity: 0.45; }
.section__rows { display: flex; flex-direction: column; gap: 1px; border-radius: 8px; overflow: hidden; transition: opacity var(--d-fast); }
.row { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 36px; padding: 0 12px; background: var(--row); overflow: hidden; }
.row__label { position: relative; z-index: 1; font-size: 13.5px; font-weight: 500; color: #f0f0f0; pointer-events: none; }
.row__value { position: relative; z-index: 1; font: 11px var(--mono); color: #7a7a7a; pointer-events: none; }
.row.is-changed .row__value { color: #fff; }
.row__fill { position: absolute; top: 0; bottom: 0; left: 0; background: #333; pointer-events: none; }
.row__range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.row--slider:focus-within { box-shadow: inset 0 0 0 1.5px var(--focus); }
.switch { flex: none; position: relative; width: 42px; height: 24px; border-radius: 12px; background: #3a3a3a; transition: background var(--d-fast); }
.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #9a9a9a; transition: transform var(--d) var(--ease-spring), background var(--d-fast); }
.switch[aria-checked="true"] { background: #6e6e6e; }
.switch[aria-checked="true"]::after { transform: translateX(18px); background: #fff; }
.segs { display: inline-flex; gap: 2px; }
.segs__btn { height: 24px; padding: 0 7px; border-radius: 5px; color: #9a9a9a; font: 12px var(--mono); }
.segs__btn:hover { color: #fff; }
.segs__btn[aria-pressed="true"] { background: #3c3c3c; color: #fff; }
.eq__graph { position: relative; height: 170px; border-radius: 8px; background: var(--row); cursor: grab; touch-action: none; }
.eq__graph:active { cursor: grabbing; }
.eq__canvas { position: absolute; inset: 0; display: block; }
.eq__fields { display: flex; align-items: center; gap: 6px; margin-top: 10px; }
.eq__band { margin-right: auto; padding: 4px 6px 4px 10px; font-weight: 600; font-size: 13.5px; border-radius: 6px; }
.eq__band:hover { background: var(--row); }
.eq__field { display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 6px 0 8px; border-radius: 6px; background: var(--row); color: #7a7a7a; font: 11.5px var(--mono); }
.eq__field.is-disabled { opacity: 0.5; }
.eq__input { width: 42px; border: 0; background: transparent; color: #e8e8e8; font: inherit; text-align: right; outline: none; -moz-appearance: textfield; }
.eq__input::-webkit-inner-spin-button, .eq__input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

@media (max-width: 1360px) {
  .daw__main { grid-template-columns: 250px minmax(0, 1fr) 340px; }
  .daw__draft { display: none; }
  .tchip--input { max-width: 110px; }
}
@media (max-width: 1100px) {
  .daw__main { grid-template-columns: 210px minmax(0, 1fr) 310px; }
  .daw__crumb, .daw__sep { display: none; }
  .tchip--input .tchip__text { display: none; }
  .tbtn { width: 40px; }
}

/* ---------- Phone ---------- */
.m-ed { height: 100dvh; display: flex; flex-direction: column; background: #1c1c1c; overflow: hidden; }
.m-ed__stage { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: calc(10px + var(--safe-t)) 16px 14px; }
.m-ed__top { display: flex; justify-content: space-between; }
.m-pill { height: 38px; padding: 0 18px; border-radius: 19px; background: #2e2e2e; color: #fff; font-size: 16px; font-weight: 500; display: inline-flex; align-items: center; transition: background var(--d-fast), color var(--d-fast); }
button.m-pill:disabled { color: #6a6a6a; }
.m-pill.is-ready { background: var(--accent); color: #000; }
.m-ed__title { margin: 4px 0 0; text-align: center; font-size: 22px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-ed__sub { margin-top: 2px; text-align: center; color: #9a9a9a; font-size: 16px; }
.m-ed__chips { display: flex; justify-content: center; gap: 10px; margin-top: 12px; }
.m-chip { height: 30px; padding: 0 11px; border-radius: 7px; background: #2e2e2e; color: #eee; font: 14px var(--mono); display: inline-flex; align-items: center; }
.m-chip.is-changed { color: var(--accent); }
.m-scrub { position: relative; flex: 1; min-height: 110px; margin: 10px -16px 0; touch-action: none; outline: none; cursor: grab; }
.m-scrub canvas { position: absolute; inset: 0; }
.m-ed__transport { flex: none; display: grid; grid-template-columns: 1fr 2fr 1fr 1fr; gap: 12px; margin-top: 12px; }
.m-tbtn { height: 50px; border-radius: 12px; background: #232323; color: #fff; display: grid; place-items: center; font-size: 16px; font-weight: 500; user-select: none; -webkit-user-select: none; }
.m-tbtn .icon { width: 22px; height: 22px; }
.m-tbtn.is-on { background: #fff; color: #000; }
.m-tbtn.is-on > .rec-dot { background: #ff453a; }
.m-ed__panel { flex: none; height: clamp(300px, 46dvh, 410px); display: flex; flex-direction: column; padding: 16px 16px calc(12px + var(--safe-b)); background: #262626; }
.m-ed__body { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; scrollbar-width: none; }
.m-pane { display: flex; flex-direction: column; gap: 12px; }
.m-pane[hidden], .m-group[hidden] { display: none; }
.m-tabs { flex: none; display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 10px; padding: 4px; border-radius: 16px; background: #1c1c1c; }
.m-tabs__btn { height: 42px; border-radius: 12px; color: #9a9a9a; font-size: 16px; font-weight: 500; }
.m-tabs__btn[aria-selected="true"] { background: #2b2b2b; color: #fff; }
.m-tags { display: flex; gap: 8px; }
.m-tags__gap { flex: 1; }
.m-tag { height: 34px; padding: 0 12px; border-radius: 8px; background: #333; color: #8f8f8f; font: 14px var(--mono); text-transform: uppercase; }
.m-tag[aria-pressed="true"] { background: #474747; color: #fff; }
.m-group { display: flex; flex-direction: column; border-radius: 14px; background: #1e1e1e; overflow: hidden; }
.m-group > * + * { border-top: 1px solid #2c2c2c; }
.m-group .row { min-height: 60px; padding: 0 18px; background: transparent; }
.m-group .row__label { font: 15px var(--mono); color: #9a9a9a; }
.m-group .segs__btn { height: 34px; padding: 0 12px; border-radius: 8px; font-size: 15px; }
.m-group .segs__btn[aria-pressed="true"] { background: #333; }
.m-group .switch { width: 50px; height: 30px; border-radius: 15px; }
.m-group .switch::after { width: 24px; height: 24px; }
.m-group .switch[aria-checked="true"]::after { transform: translateX(20px); }
.dial { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 60px; padding: 0 18px; }
.dial--bare { grid-template-columns: minmax(0, 1fr) auto; }
.dial__label { min-width: 72px; color: #9a9a9a; font: 15px var(--mono); }
.dial__value { min-width: 62px; text-align: right; color: #9a9a9a; font: 15px var(--mono); }
.dial.is-changed .dial__value, .dial.is-active .dial__value { color: #fff; }
.dial__track { position: relative; height: 48px; overflow: hidden; cursor: ew-resize; touch-action: none; outline: none; border-radius: 8px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 24%, #000 76%, transparent); mask-image: linear-gradient(90deg, transparent, #000 24%, #000 76%, transparent); }
.dial__track:focus-visible { -webkit-mask-image: none; mask-image: none; box-shadow: inset 0 0 0 2px var(--focus); }
.dial__ruler { position: absolute; left: 50%; top: 50%; }
.dial__tick { position: absolute; top: 0; width: 2px; height: 20px; border-radius: 1px; background: #5a5a5a; transform: translate(-1px, -50%); }
.dial__tick--major { background: #7c7c7c; }
.dial__thumb { position: absolute; left: 50%; top: 50%; width: 5px; height: 40px; margin: -20px 0 0 -2.5px; border-radius: 3px; background: #fff; }
.m-group--mix { flex-direction: row; align-items: center; padding-left: 10px; }
.m-group--mix > * + * { border-top: 0; }
.m-group--mix .dial { flex: 1; padding-left: 8px; }
.bypass { flex: none; height: 40px; padding: 0 14px; border-radius: 10px; background: #333; color: #8a8a8a; font: 14px var(--mono); text-transform: uppercase; }
.bypass[aria-pressed="true"] { background: var(--accent); color: #000; }
.m-fx { display: flex; flex-direction: column; gap: 12px; }
.m-fx__bar { display: flex; justify-content: flex-end; }
.m-eq .eq__graph { height: 170px; border-radius: 14px; background: #1e1e1e; }
.m-fx .eq__field { background: #1e1e1e; height: 32px; }
.m-fxnav[hidden] { display: none; }
.m-fxnav { flex: none; display: flex; gap: 28px; padding: 14px 0 2px; overflow-x: auto; scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent); mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent); }
.m-fxnav::-webkit-scrollbar, .m-ed__body::-webkit-scrollbar { display: none; }
.m-fxnav__pad { flex: 0 0 35%; }
.m-fxnav__btn { flex: none; color: #777; font-size: 17px; white-space: nowrap; }
.m-fxnav__btn[aria-current="true"] { color: #fff; }
.m-stems__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.m-stems__title { margin: 0; font-size: 19px; font-weight: 500; }
.m-stems__text { margin: 2px 0 0; color: #9a9a9a; font-size: 15px; }
.m-cta { flex: none; height: 40px; padding: 0 20px; border-radius: 20px; background: #fff; color: #000; font-size: 16px; font-weight: 500; display: inline-flex; align-items: center; }
.m-cta:disabled { opacity: 0.6; }
.m-cta--busy { background: #333; }
.m-faders { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.m-faders.is-scroll { display: flex; overflow-x: auto; scrollbar-width: none; }
.m-faders.is-scroll .m-fader { flex: 0 0 calc(25% - 8px); }
.m-fader { display: flex; flex-direction: column; min-height: 196px; padding: 8px 6px 6px; border-radius: 14px; background: #1e1e1e; }
.m-fader.is-disabled { opacity: 0.6; }
.m-fader.is-live { background: rgba(255, 69, 58, 0.12); }
.m-fader__track { position: relative; flex: 1; display: flex; flex-direction: column; justify-content: space-between; align-items: center; padding: 10px 0; touch-action: none; outline: none; cursor: ns-resize; }
.m-fader__track:focus-visible { box-shadow: inset 0 0 0 2px var(--focus); border-radius: 8px; }
.m-fader.is-muted .m-fader__track { opacity: 0.4; }
.m-fader__tick { width: 34px; height: 2px; border-radius: 1px; background: #5a5a5a; }
.m-fader__thumb { position: absolute; left: 50%; width: 46px; height: 6px; margin: 0 0 -3px -23px; border-radius: 3px; background: #fff; }
.m-fader__label { margin-top: 8px; height: 52px; border-radius: 10px; background: #262626; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: #eee; font: 14px var(--mono); user-select: none; -webkit-user-select: none; }
.m-fader__label > span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 4px; }
.m-fader__dot { width: 7px; height: 7px; border-radius: 50%; background: #444; }
.m-fader__dot.is-on { background: #e8e8e8; }
.m-fader__dot.is-solo { background: var(--accent); }
.m-trim { position: relative; flex: none; height: 64px; border-radius: 14px; background: #1e1e1e; touch-action: none; }
.m-trim canvas { position: absolute; inset: 0; }
.m-trim__handle { position: absolute; top: 6px; bottom: 6px; width: 8px; margin-left: -4px; border-radius: 4px; background: #fff; }
.m-trim__handle:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* ==========================================================================
   Track details dialog
   ========================================================================== */
.dialog.details { width: min(860px, calc(100vw - 32px)); height: min(640px, calc(100dvh - 48px)); padding: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); grid-template-rows: minmax(0, 1fr); overflow: hidden; background: #1b1b1b; overscroll-behavior: contain; }
.details__left { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s-2); padding: var(--s-12) var(--s-8); border-right: 1px solid var(--line); min-width: 0; }
.details__close { position: absolute; top: var(--s-5); left: var(--s-5); width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: #3a3a3a; color: #ddd; }
.details__close:hover { background: #4a4a4a; color: #fff; }
.details__disc .disc { width: 164px; }
.details__title { width: 100%; margin-top: var(--s-6); padding: 4px 8px; border: 0; border-radius: 8px; background: transparent; color: var(--text); text-align: center; font-size: var(--fs-xl); font-weight: var(--fw-medium); outline: none; text-overflow: ellipsis; }
.details__title:hover { background: rgba(255, 255, 255, 0.04); }
.details__title:focus { background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--chip-line); }
.details__facts { color: var(--muted); font-size: var(--fs-md); }
.details__wave { width: 100%; height: 40px; margin-top: var(--s-6); }
.details__right { display: flex; flex-direction: column; gap: var(--s-4); padding: var(--s-6) var(--s-5) var(--s-5); overflow-y: auto; overscroll-behavior: contain; min-width: 0; min-height: 0; }
.details__right > * { flex: none; }
.details__heading { margin: 0 0 var(--s-1); font-size: var(--fs-md); font-weight: var(--fw-medium); }
.details__card { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: var(--s-4) var(--s-5); border-radius: var(--r-lg); background: var(--surface-2); text-align: left; }
.details__card:hover { background: var(--surface-3); }
.details__card-text { display: flex; flex-direction: column; gap: 2px; }
.details__card-title { font-size: var(--fs-md); font-weight: var(--fw-medium); }
.details__state { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); font-size: var(--fs-sm); }
.details__chev { transform: rotate(-90deg); color: var(--muted); }
.details__group { display: flex; flex-direction: column; border-radius: var(--r-lg); background: var(--surface-2); overflow: hidden; }
.details__item { display: flex; align-items: center; gap: var(--s-4); min-height: 50px; padding: 0 var(--s-5); text-align: left; font-size: var(--fs-md); font-weight: var(--fw-medium); }
.details__item + .details__item { border-top: 1px solid rgba(0, 0, 0, 0.35); }
.details__item:hover:not(:disabled) { background: var(--surface-3); }
.details__item .icon { color: var(--text-2); }
.details__item.is-danger, .details__item.is-danger .icon { color: var(--danger); }
.details__note { margin-left: auto; color: var(--muted); font-size: var(--fs-sm); font-weight: var(--fw-regular); }
.details__notes { min-height: 140px; resize: vertical; }
@media (max-width: 640px) {
  .dialog.details { top: auto; bottom: 0; left: 0; width: 100vw; height: auto; max-height: 92dvh; grid-template-rows: auto auto; transform: none; border-radius: var(--r-xl) var(--r-xl) 0 0; grid-template-columns: minmax(0, 1fr); overflow-y: auto; animation: details-up var(--d) var(--ease-out); }
  .dialog.details.is-leaving { animation: details-down var(--d-fast) forwards; }
  .details__left { border-right: 0; padding: var(--s-8) var(--s-5) var(--s-2); }
  .details__disc .disc { width: 120px; }
  .details__title { margin-top: var(--s-4); }
  .details__wave { margin-top: var(--s-4); }
  .details__right { overflow: visible; padding-bottom: calc(var(--s-5) + var(--safe-b)); }
}
@keyframes details-up { from { transform: translateY(40px); opacity: 0; } }
@keyframes details-down { to { transform: translateY(40px); opacity: 0; } }

/* Compact project page: smaller play button, no duration column (it is in the details). */
.project .play-btn { width: 46px; height: 46px; border-radius: 13px; }
.project .play-btn .icon { width: 18px; height: 18px; }
.track__dur { display: none; }

/* ==========================================================================
   Export dialog
   ========================================================================== */
.dialog.export { width: min(460px, calc(100vw - 32px)); }
.export__formats { display: flex; flex-direction: column; border-radius: var(--r-lg); background: var(--surface-2); overflow: hidden; }
.export__format { display: grid; grid-template-columns: 22px 64px minmax(0, 1fr); align-items: center; gap: var(--s-3); min-height: 50px; padding: 0 var(--s-4); text-align: left; }
.export__format + .export__format { border-top: 1px solid rgba(0, 0, 0, 0.35); }
.export__format:hover { background: var(--surface-3); }
.export__radio { width: 18px; height: 18px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--faint); transition: box-shadow var(--d-fast); }
.export__format[aria-checked="true"] .export__radio { box-shadow: inset 0 0 0 5.5px var(--text); }
.export__label { font-weight: var(--fw-medium); }
.export__hint { color: var(--muted); font-size: var(--fs-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.export__row { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); min-height: 44px; padding: 0 var(--s-1); }
.export__key { color: var(--text-2); font-size: var(--fs-sm); }
.export__select { width: auto; max-width: 70%; height: 38px; }
.export__status { display: flex; align-items: center; gap: var(--s-2); min-height: 22px; color: var(--text-2); font-size: var(--fs-sm); }
.export__status:empty { display: none; }