/* =========================================================
   VALVAMP — tweed laqueado, grille oxblood, painel cromado.
   Tipografia: Fraunces (display), Karla (texto), Yellowtail (placa).
   ========================================================= */
:root {
  --bg: #f3ead8;
  --surface: #faf5ea;
  --surface-2: #ece1ca;
  --ink: #2a1c14;
  --ink-2: #6a5444;
  --ink-3: #a08a73;
  --line: #dccdb0;
  --accent: #9c2f22;
  --accent-ink: #fff6e8;
  --gold: #b3863c;
  --focus: #b3863c;
  --chrome-a: #f2efe8;
  --chrome-b: #c3bdb1;
  --chrome-ink: #2a1f17;
  --chrome-line: #9d968a;
  --shadow: 0 1px 2px rgba(60, 35, 15, .08), 0 10px 28px rgba(60, 35, 15, .12);
  --shadow-lg: 0 2px 4px rgba(40, 20, 8, .12), 0 24px 60px rgba(40, 20, 8, .28);

  --tweed:
    linear-gradient(180deg, rgba(255, 214, 140, .16), rgba(96, 54, 12, .26)),
    repeating-linear-gradient(45deg, #e6c888 0 1.6px, #7b5828 1.6px 2.6px, #d2aa62 2.6px 4.2px, #4b3417 4.2px 5.2px);
  --grille:
    repeating-linear-gradient(0deg, transparent 0 5px, rgba(214, 172, 102, .55) 5px 6px, transparent 6px 7px),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, .16) 0 1px, transparent 1px 3px),
    radial-gradient(ellipse at 50% 40%, #5a3224, #3a1f17 80%);

  --f-display: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --f-body: 'Karla', 'Helvetica Neue', Arial, sans-serif;
  --f-script: 'Yellowtail', 'Brush Script MT', cursive;

  --top-h: 52px;
  --panel-h: 66px;
  --nav-h: 58px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #1d1411; --surface: #261a15; --surface-2: #33241d; --ink: #f2e7d3; --ink-2: #c7b195; --ink-3: #8c7662;
    --line: #402e25; --accent: #de5c42; --accent-ink: #1d1411; --gold: #d5aa5a; --focus: #d5aa5a;
    --chrome-a: #cfc9be; --chrome-b: #928b80; --chrome-line: #6f685e;
    --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 10px 28px rgba(0, 0, 0, .35);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #1d1411; --surface: #261a15; --surface-2: #33241d; --ink: #f2e7d3; --ink-2: #c7b195; --ink-3: #8c7662;
  --line: #402e25; --accent: #de5c42; --accent-ink: #1d1411; --gold: #d5aa5a; --focus: #d5aa5a;
  --chrome-a: #cfc9be; --chrome-b: #928b80; --chrome-line: #6f685e;
  --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 10px 28px rgba(0, 0, 0, .35);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--bg);
  color: var(--ink);
  font: 15px/1.45 var(--f-body);
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
  -webkit-tap-highlight-color: transparent;
}
button { font: inherit; color: inherit; cursor: pointer; background: none; border: 0; padding: 0; }
img { display: block; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 6px; }
.muted { color: var(--ink-2); }
.small { font-size: 13px; }
.serif { font-family: var(--f-display); font-style: italic; font-size: 22px; font-weight: 400; margin: 0 0 4px; }
.pad { padding: 4px 20px; margin: 0; }
.pad-x { padding: 0 20px; margin: 6px 0; }
.eyebrow { font: 600 11px var(--f-body); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); }

.ic { display: inline-grid; place-items: center; width: 20px; height: 20px; flex-shrink: 0; }
.ic svg { width: 100%; height: 100%; }

/* ---------- placa (nameplate) ---------- */
.plate {
  display: inline-flex; flex-direction: column; align-items: center;
  padding: 4px 16px 5px;
  background: linear-gradient(180deg, #3a2a20, #1c130e);
  border-radius: 7px;
  box-shadow: inset 0 0 0 1px rgba(255, 240, 210, .25), 0 0 0 2px #cfc7b8, 0 0 0 3px #7c7468, 0 3px 6px rgba(0, 0, 0, .45);
  color: #f3e6c9;
  line-height: 1;
}
.plate-script { font: 30px/1 var(--f-script); letter-spacing: .01em; }
.plate-sub { font: 700 7px var(--f-body); letter-spacing: .28em; margin-top: 3px; opacity: .8; }
.plate.small .plate-script { font-size: 24px; }
.plate.tiny { padding: 2px 12px 4px; }
.plate.tiny .plate-script { font-size: 21px; }

/* ---------- gabinete tweed + grille ---------- */
.cab {
  padding: 14px;
  border-radius: 16px;
  background: var(--tweed);
  box-shadow: inset 0 1px 0 rgba(255, 240, 200, .5), inset 0 -2px 0 rgba(60, 30, 5, .35), var(--shadow-lg);
}
.grille {
  position: relative;
  border-radius: 8px;
  background: var(--grille);
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, .55), 0 0 0 1px rgba(40, 20, 5, .6);
}
.grille > .plate { position: absolute; left: 50%; top: -3px; transform: translate(-50%, -50%); z-index: 2; }

/* ---------- lâmpada piloto (jewel) ---------- */
.jewel, .lamp {
  display: inline-block; width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0;
  background:
    conic-gradient(from 20deg, rgba(255, 255, 255, .0), rgba(255, 255, 255, .22), rgba(255, 255, 255, 0), rgba(255, 255, 255, .18), rgba(255, 255, 255, 0), rgba(255, 255, 255, .22), rgba(255, 255, 255, 0)),
    radial-gradient(circle at 36% 30%, #b98a80, #5c1c14 55%, #2f0c07);
  box-shadow: 0 0 0 2px #bdb6a9, 0 0 0 3px #6d665b;
  transition: box-shadow .4s, background .4s;
}
.jewel.on, .lamp.on, .warming .lamp {
  background:
    conic-gradient(from 20deg, rgba(255, 255, 255, .0), rgba(255, 255, 255, .35), rgba(255, 255, 255, 0), rgba(255, 255, 255, .25), rgba(255, 255, 255, 0), rgba(255, 255, 255, .35), rgba(255, 255, 255, 0)),
    radial-gradient(circle at 36% 30%, #ffe0d2, #ff4a2a 42%, #9a1a0b 80%);
  box-shadow: 0 0 0 2px #bdb6a9, 0 0 0 3px #6d665b, 0 0 12px 3px rgba(255, 70, 35, .55);
  animation: flicker 4s infinite;
}
@keyframes flicker { 0%, 100% { filter: brightness(1); } 47% { filter: brightness(1); } 48% { filter: brightness(.9); } 50% { filter: brightness(1.05); } }

/* =========================================================
   LAYOUT
   ========================================================= */
.shell {
  height: 100dvh;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: calc(var(--top-h) + var(--safe-t)) 1fr var(--panel-h) calc(var(--nav-h) + var(--safe-b));
  grid-template-areas: "top" "main" "panel" "nav";
}
.sidebar { display: none; grid-area: side; }
.topbar {
  grid-area: top;
  display: flex; align-items: center; justify-content: center;
  padding-top: var(--safe-t);
  background: var(--tweed);
  box-shadow: inset 0 -2px 0 rgba(60, 30, 5, .35), 0 2px 8px rgba(40, 20, 5, .2);
  z-index: 3;
}
.main {
  grid-area: main;
  overflow-y: auto; overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 32px;
  outline: none;
}
.panel { grid-area: panel; }
.bottomnav { grid-area: nav; }

@media (min-width: 1024px) {
  :root { --panel-h: 92px; }
  .shell {
    grid-template-columns: 264px 1fr;
    grid-template-rows: 1fr var(--panel-h);
    grid-template-areas: "side main" "panel panel";
  }
  .topbar, .bottomnav { display: none !important; }
  .sidebar { display: flex; }
  .main { padding: 0 12px 40px; }
}

/* ---------- barra lateral ---------- */
.sidebar {
  flex-direction: column; min-height: 0;
  background: var(--surface);
  border-right: 1px solid var(--line);
}
.side-brand {
  display: grid; place-items: center;
  height: 104px; flex-shrink: 0;
  background: var(--tweed);
  box-shadow: inset 0 -2px 0 rgba(60, 30, 5, .35);
}
.side-nav { display: flex; flex-direction: column; gap: 2px; padding: 16px 12px 8px; }
.side-nav button {
  display: flex; align-items: center; gap: 12px;
  height: 42px; padding: 0 12px; border-radius: 10px;
  font-weight: 600; color: var(--ink-2); text-align: left;
}
.side-nav button:hover { background: var(--surface-2); color: var(--ink); }
.side-nav button.on { background: var(--bg); color: var(--ink); box-shadow: inset 3px 0 0 var(--accent); }
.side-nav button.on .ic { color: var(--accent); }
.side-sec { padding: 18px 24px 6px; font: 600 11px var(--f-body); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); }
.side-pls { flex: 1; overflow-y: auto; padding: 0 12px 16px; }
.side-pl {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 8px 12px; border-radius: 8px; text-align: left; color: var(--ink-2);
}
.side-pl:hover { background: var(--surface-2); color: var(--ink); }
.spl-n { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--f-display); font-size: 15px; }
.spl-c { font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.side-pl.add { color: var(--ink-3); font-size: 14px; margin-top: 4px; }

/* ---------- navegação inferior (mobile) ---------- */
.bottomnav {
  display: flex;
  padding-bottom: var(--safe-b);
  background: var(--surface);
  border-top: 1px solid var(--line);
  z-index: 3;
}
.bottomnav button {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  font-size: 11px; font-weight: 600; color: var(--ink-3);
}
.bottomnav button .ic { width: 22px; height: 22px; }
.bottomnav button.on { color: var(--accent); }

/* =========================================================
   PAINEL (player) — placa cromada
   ========================================================= */
.panel {
  position: relative;
  display: flex; align-items: center; gap: 12px;
  padding: 8px 12px;
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .12) 0 1px, rgba(0, 0, 0, .03) 1px 2px, transparent 2px 3px),
    linear-gradient(180deg, var(--chrome-a), var(--chrome-b));
  color: var(--chrome-ink);
  border-top: 1px solid var(--chrome-line);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 -4px 14px rgba(40, 20, 5, .12);
  z-index: 4;
}
.panel-progress {
  position: absolute; left: 0; right: 0; top: -1px; height: 2px;
  background: var(--accent); transform-origin: left; transform: scaleX(0);
}
.panel .ibtn { color: #3b2d22; }
.panel .ibtn:hover { background: rgba(0, 0, 0, .07); }
.panel .ibtn.on { color: #9c2f22; }
.pn-now { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; }
.pn-cover img { width: 46px; height: 46px; object-fit: cover; border-radius: 4px; box-shadow: 0 1px 3px rgba(0, 0, 0, .35); background: #3a2a20; }
.pn-txt { display: flex; flex-direction: column; min-width: 0; text-align: left; }
.pn-txt b { font: 500 16px/1.2 var(--f-display); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pn-txt span { font-size: 13px; color: #5d4c3f; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.panel.empty .pn-txt b { font-style: italic; font-weight: 400; }
.pn-center { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.pn-right { display: none; }
.panel .desk { display: none; }

.transport { display: flex; align-items: center; gap: 4px; }
.play {
  display: grid; place-items: center;
  width: 44px; height: 44px; border-radius: 50%;
  background: radial-gradient(circle at 40% 30%, #4a372b, #1c130e 70%);
  color: #f3e6c9;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 255, 255, .15);
  transition: transform .1s;
}
.play:active { transform: scale(.94); }
.play .ic { width: 22px; height: 22px; }
.play.busy { animation: pulse 1s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .6; } }

.ibtn {
  display: inline-grid; place-items: center;
  width: 40px; height: 40px; border-radius: 50%;
  color: var(--ink-2);
  transition: background .15s, color .15s;
}
.ibtn:hover { background: var(--surface-2); color: var(--ink); }
.ibtn.on { color: var(--accent); }
.ibtn .ic { width: 21px; height: 21px; }
.ibtn.js-shuffle.on, .ibtn.js-repeat.on { position: relative; }
.ibtn.js-shuffle.on::after, .ibtn.js-repeat.on::after { content: ''; position: absolute; bottom: 4px; width: 4px; height: 4px; border-radius: 50%; background: currentColor; }

.seekrow { display: flex; align-items: center; gap: 10px; width: 100%; }
.seekrow .t { font-size: 12px; font-variant-numeric: tabular-nums; min-width: 38px; color: inherit; opacity: .75; }
.seekrow .t:first-child { text-align: right; }
.seek {
  --p: 0%;
  -webkit-appearance: none; appearance: none;
  flex: 1; height: 18px; margin: 0; background: transparent; cursor: pointer;
}
.seek::-webkit-slider-runnable-track {
  height: 4px; border-radius: 2px;
  background: linear-gradient(90deg, var(--accent) var(--p), rgba(60, 40, 25, .22) var(--p));
}
.seek::-moz-range-track { height: 4px; border-radius: 2px; background: rgba(60, 40, 25, .22); }
.seek::-moz-range-progress { height: 4px; border-radius: 2px; background: var(--accent); }
.seek::-webkit-slider-thumb {
  -webkit-appearance: none; width: 14px; height: 14px; margin-top: -5px; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #fff, #cfc8bc); border: 1px solid #6d665b; box-shadow: 0 1px 3px rgba(0, 0, 0, .35);
}
.seek::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: #efe9df; border: 1px solid #6d665b; }

@media (min-width: 1024px) {
  .panel { padding: 10px 24px; gap: 24px; }
  .panel .desk { display: revert; }
  .panel .ibtn.desk { display: inline-grid; }
  .panel-progress { display: none; }
  .pn-now { flex: 0 1 30%; }
  .pn-cover img { width: 60px; height: 60px; }
  .pn-center { flex: 1 1 40%; max-width: 620px; }
  .panel .pn-right { display: flex; align-items: center; justify-content: flex-end; gap: 18px; flex: 0 1 30%; }
  .panel .seekrow.desk { display: flex; }
}

/* ---------- switch estilo chave de baquelite ---------- */
.toggle { display: inline-flex; align-items: center; gap: 8px; }
.t-lbl { font: 700 11px var(--f-body); letter-spacing: .12em; color: var(--ink-3); transition: color .2s; }
.panel .t-lbl, .np-panel .t-lbl, .eq-board .t-lbl { color: #8a7f72; }
.t-track {
  position: relative; width: 44px; height: 24px; border-radius: 12px;
  background: linear-gradient(180deg, #1c130e, #3a2a20);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, .6), 0 1px 0 rgba(255, 255, 255, .5);
  transition: background .2s;
}
.t-lever {
  position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, #ffffff, #d7d1c6 45%, #8e877c);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .5);
  transition: transform .2s cubic-bezier(.3, 1.4, .6, 1);
}
.toggle[aria-checked="true"] .t-lever { transform: translateX(20px); }
.toggle[aria-checked="true"] .t-track { background: linear-gradient(180deg, #7a5a1c, #c8973e); }
.toggle[aria-checked="false"] .on-off, .toggle[aria-checked="true"] .on-on { color: var(--ink); }
.panel .toggle[aria-checked="false"] .on-off, .panel .toggle[aria-checked="true"] .on-on,
.np-panel .toggle[aria-checked="false"] .on-off, .np-panel .toggle[aria-checked="true"] .on-on,
.eq-board .toggle[aria-checked="false"] .on-off, .eq-board .toggle[aria-checked="true"] .on-on { color: #2a1f17; }

/* ---------- knob Fender (1–10) ---------- */
.knob {
  --rot: 90deg; --size: 64px; --cap: 36px;
  position: relative; width: var(--size); height: var(--size); flex-shrink: 0;
  touch-action: none; cursor: ns-resize; border-radius: 50%;
}
.k-num {
  position: absolute; left: 50%; top: 50%;
  font: 700 8px var(--f-body); color: #3b2d22;
  transform: translate(-50%, -50%) rotate(var(--a)) translateY(calc(var(--size) / -2 + 5px)) rotate(calc(var(--a) * -1));
}
.k-cap {
  position: absolute; left: 50%; top: 50%; width: var(--cap); height: var(--cap); margin: calc(var(--cap) / -2);
  border-radius: 50%;
  background:
    repeating-conic-gradient(rgba(255, 255, 255, .05) 0 6deg, transparent 6deg 12deg),
    radial-gradient(circle at 40% 32%, #5a4536, #1e150f 70%);
  box-shadow: 0 3px 5px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .18);
  transform: rotate(var(--rot));
}
.k-ptr { position: absolute; left: 50%; top: 3px; width: 2px; height: 42%; margin-left: -1px; border-radius: 1px; background: #f3e6c9; }
.knob.big { --size: 76px; --cap: 44px; }
.no-vol .knob, .no-vol .np-vol { display: none !important; }

/* =========================================================
   PÁGINAS
   ========================================================= */
.page-head { display: flex; align-items: center; gap: 6px; padding: 22px 20px 6px; min-height: 64px; }
.page-head h1 { margin: 0; font: 600 34px/1.05 var(--f-display); letter-spacing: -.01em; font-variation-settings: 'opsz' 96, 'SOFT' 50; }
.page-crumb { font: 600 11px var(--f-body); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); }
.back { margin-left: -10px; }
@media (min-width: 1024px) { .page-head { padding: 32px 24px 8px; } .page-head h1 { font-size: 44px; } }

.loading, .empty { padding: 56px 24px; text-align: center; color: var(--ink-2); }
.loading { display: flex; align-items: center; justify-content: center; gap: 10px; font-family: var(--f-display); font-style: italic; }
.loading.small, .empty.small { padding: 28px 20px; }
.empty .btn { margin-top: 12px; }

/* botões */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 42px; padding: 0 20px; border-radius: 999px;
  font: 600 14px var(--f-body); letter-spacing: .01em;
  border: 1px solid transparent; white-space: nowrap;
  transition: background .15s, border-color .15s, transform .1s;
}
.btn:active { transform: scale(.97); }
.btn .ic { width: 18px; height: 18px; }
.btn.primary { background: var(--accent); color: var(--accent-ink); box-shadow: 0 2px 8px rgba(156, 47, 34, .3); }
.btn.primary:hover { filter: brightness(1.07); }
.btn.ghost { border-color: var(--line); color: var(--ink); background: var(--surface); }
.btn.ghost:hover { border-color: var(--ink-3); }
.btn.ghost.lit { border-color: var(--accent); color: var(--accent); }
.btn.text { color: var(--ink-2); padding: 0 12px; }
.btn.text:hover { color: var(--ink); background: var(--surface-2); }
.btn.danger { color: var(--accent); }
.btn.danger:not(.text) { background: var(--accent); color: var(--accent-ink); }
.btn.small { height: 34px; padding: 0 14px; font-size: 13px; }
.btn.wide { width: 100%; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 14px 20px; }
@media (min-width: 1024px) { .actions { padding: 16px 24px; } }

.input {
  width: 100%; height: 44px; padding: 0 14px;
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--line); border-radius: 10px;
  font: 15px var(--f-body);
  outline: none; transition: border-color .15s, box-shadow .15s;
}
.input:focus { border-color: var(--gold); box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 25%, transparent); }
.input::placeholder { color: var(--ink-3); }
select.input { appearance: none; -webkit-appearance: none; padding-right: 34px; background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a08a73' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center / 16px; }
.field { display: flex; flex-direction: column; gap: 6px; font: 600 11px var(--f-body); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.field.inline { flex-direction: row; align-items: center; gap: 10px; }
.field.inline .input { width: auto; min-width: 160px; }

.search {
  display: flex; align-items: center; gap: 10px;
  height: 46px; padding: 0 16px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 999px;
  color: var(--ink-3);
  transition: border-color .15s, box-shadow .15s;
}
.search:focus-within { border-color: var(--gold); box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 25%, transparent); }
.search.small { height: 38px; flex: 1 1 200px; max-width: 320px; }
.input.bare { border: 0; background: none; height: 100%; padding: 0; box-shadow: none; }

/* ---------- biblioteca ---------- */
.lib-controls {
  position: sticky; top: 0; z-index: 2;
  display: flex; flex-direction: column; gap: 12px;
  padding: 8px 20px 12px;
  background: linear-gradient(180deg, var(--bg) 85%, transparent);
}
@media (min-width: 1024px) { .lib-controls { padding: 8px 24px 14px; } }
.chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 -20px; padding: 0 20px; }
.chips::-webkit-scrollbar { display: none; }
.chip {
  flex-shrink: 0; height: 34px; padding: 0 16px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--surface);
  font-weight: 600; font-size: 14px; color: var(--ink-2);
}
.chip:hover { border-color: var(--ink-3); color: var(--ink); }
.chip.on { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.fb-row { display: flex; align-items: center; gap: 10px; }
.count { margin-left: auto; font-size: 13px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 16px; padding: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; }
.filters .field { flex: 1 1 170px; }
.years { display: flex; align-items: center; gap: 6px; color: var(--ink-3); }
.year { width: 6.5em; }
.sentinel { height: 60px; }
h2.sec { display: flex; align-items: baseline; gap: 10px; margin: 26px 20px 4px; font: 600 22px var(--f-display); }
h2.sec small { font: 500 13px var(--f-body); color: var(--ink-3); }
@media (min-width: 1024px) { h2.sec { margin: 30px 24px 6px; } }

.grid {
  display: grid; gap: 22px 16px; padding: 8px 20px 12px;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
}
@media (min-width: 1024px) { .grid { padding: 8px 24px 16px; gap: 28px 22px; grid-template-columns: repeat(auto-fill, minmax(172px, 1fr)); } }
.card { display: flex; flex-direction: column; gap: 3px; min-width: 0; text-align: left; }
.sleeve {
  display: block; margin-bottom: 8px; border-radius: 4px; overflow: hidden;
  background: var(--surface-2);
  box-shadow: 0 1px 2px rgba(40, 20, 5, .15), 0 8px 18px rgba(40, 20, 5, .16);
  transition: transform .2s, box-shadow .2s;
}
.card:hover .sleeve { transform: translateY(-3px); box-shadow: 0 2px 4px rgba(40, 20, 5, .15), 0 14px 26px rgba(40, 20, 5, .22); }
.cover { width: 100%; aspect-ratio: 1; object-fit: cover; background: var(--surface-2); }
.cover.round, .sleeve .round { border-radius: 50%; }
.ct { font: 500 16px/1.25 var(--f-display); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.ca { font-size: 13px; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.rows { display: flex; flex-direction: column; padding: 4px 8px; }
.row { display: flex; align-items: center; gap: 14px; padding: 8px 12px; border-radius: 10px; text-align: left; min-height: 60px; }
.row:hover { background: var(--surface-2); }
.rt { flex: 1; min-width: 0; font: 500 17px var(--f-display); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rc { font-size: 13px; color: var(--ink-3); white-space: nowrap; }
.thumb { width: 48px; height: 48px; object-fit: cover; border-radius: 4px; background: var(--surface-2); flex-shrink: 0; }
.thumb.round { border-radius: 50%; }

.genres { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; padding: 8px 20px; }
.genre {
  --g: #b3863c;
  display: flex; flex-direction: column; justify-content: space-between; gap: 18px;
  min-height: 96px; padding: 14px 16px; border-radius: 12px; text-align: left;
  background: linear-gradient(135deg, var(--g), color-mix(in srgb, var(--g) 70%, #1c130e));
  color: #fbf1dc; box-shadow: var(--shadow);
}
.genre:nth-child(5n+2) { --g: #9c2f22; }
.genre:nth-child(5n+3) { --g: #5f6b3a; }
.genre:nth-child(5n+4) { --g: #b5562c; }
.genre:nth-child(5n+5) { --g: #3e5a63; }
.gt { font: italic 500 21px/1.1 var(--f-display); }
.gc { font-size: 12px; opacity: .85; }

/* ---------- faixas ---------- */
.tracks { padding: 4px 8px 8px; }
@media (min-width: 1024px) { .tracks { padding: 4px 12px 8px; } }
.disc { padding: 18px 12px 6px; font: 600 11px var(--f-body); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); }
.track {
  display: flex; align-items: center; gap: 12px;
  min-height: 58px; padding: 6px 4px 6px 12px; border-radius: 10px;
  cursor: pointer; user-select: none;
}
.track:hover, .track:focus-visible { background: var(--surface-2); outline: none; }
.track .num { width: 24px; flex-shrink: 0; text-align: right; font-size: 14px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.track .eqbars { display: none; }
.tcover { width: 42px; height: 42px; object-fit: cover; border-radius: 3px; background: var(--surface-2); flex-shrink: 0; }
.track .meta { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.track .t { font-size: 15px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.track .a { font-size: 13px; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.track .dur { font-size: 13px; color: var(--ink-3); font-variant-numeric: tabular-nums; padding-left: 6px; }
.track .heart { opacity: 0; }
.track .heart.on, .track:hover .heart, .track:focus-within .heart { opacity: 1; }
@media (hover: none) { .track .heart:not(.on) { display: none; } }
.track.playing .t { color: var(--accent); }
.track.playing .num .n { display: none; }
.track.playing .eqbars { display: inline-flex; align-items: flex-end; gap: 2px; height: 14px; }
.eqbars i { width: 3px; background: var(--accent); border-radius: 1px; animation: bar 1s ease-in-out infinite; }
.eqbars i:nth-child(2) { animation-delay: -.4s; }
.eqbars i:nth-child(3) { animation-delay: -.7s; }
@keyframes bar { 0%, 100% { height: 30%; } 50% { height: 100%; } }
body:not(.is-playing) .eqbars i { animation-play-state: paused; }

/* ---------- detalhe ---------- */
.hero { display: flex; align-items: flex-end; gap: 20px; padding: 8px 20px 6px; }
.hero .sleeve.big { width: 150px; flex-shrink: 0; margin: 0; box-shadow: var(--shadow-lg); }
.hero-txt { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding-bottom: 4px; }
.hero-title { margin: 0; font: 600 30px/1.05 var(--f-display); letter-spacing: -.01em; font-variation-settings: 'opsz' 96, 'SOFT' 50; overflow-wrap: anywhere; }
.hero.plain { padding-top: 4px; }
.badge {
  align-self: flex-start;
  padding: 3px 10px; border-radius: 999px;
  border: 1px solid var(--gold); color: var(--gold);
  font: 700 11px var(--f-body); letter-spacing: .1em; text-transform: uppercase;
}
.linkish { text-align: left; color: var(--ink-2); font-size: 15px; }
.linkish:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.linkish.strong { color: var(--ink); font-weight: 600; font-size: 16px; }
@media (max-width: 560px) {
  .hero { flex-direction: column; align-items: flex-start; }
  .hero .sleeve.big { width: min(62vw, 240px); align-self: center; margin-bottom: 8px; }
}
@media (min-width: 1024px) {
  .hero { padding: 12px 24px 8px; gap: 28px; }
  .hero .sleeve.big { width: 220px; }
  .hero-title { font-size: 48px; }
}

/* ---------- EQ ---------- */
.eq { padding: 8px 20px 20px; max-width: 760px; }
.eq-top { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px; margin-bottom: 16px; }
.eq-board {
  padding: 18px 16px 14px; border-radius: 14px;
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .12) 0 1px, rgba(0, 0, 0, .03) 1px 2px, transparent 2px 3px),
    linear-gradient(180deg, var(--chrome-a), var(--chrome-b));
  color: #2a1f17;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), var(--shadow);
}
.eq-graph { border-radius: 8px; background: #f7f0e1; box-shadow: inset 0 1px 3px rgba(0, 0, 0, .25); margin-bottom: 16px; overflow: hidden; }
.eq-curve { display: block; width: 100%; height: 64px; }
.faders { display: flex; justify-content: space-between; align-items: stretch; gap: 2px; }
.f-sep { width: 1px; background: rgba(0, 0, 0, .2); margin: 18px 2px 20px; }
.f-wrap { display: flex; flex-direction: column; align-items: center; gap: 6px; flex: 1; min-width: 0; }
.f-val { font-size: 11px; font-variant-numeric: tabular-nums; color: #5d4c3f; height: 14px; }
.fader { --p: .5; position: relative; width: 28px; height: 150px; touch-action: none; cursor: ns-resize; }
.f-slot { position: absolute; left: 50%; top: 4px; bottom: 4px; width: 4px; margin-left: -2px; border-radius: 2px; background: #1c130e; box-shadow: 0 1px 0 rgba(255, 255, 255, .6); }
.f-slot::after { content: ''; position: absolute; left: -6px; right: -6px; top: 50%; height: 1px; background: rgba(0, 0, 0, .35); }
.f-thumb {
  position: absolute; left: 50%; width: 26px; height: 16px; margin-left: -13px;
  top: calc(var(--p) * (100% - 16px));
  border-radius: 3px;
  background: linear-gradient(180deg, #4a372b, #1c130e);
  box-shadow: 0 2px 4px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .15);
}
.f-thumb::after { content: ''; position: absolute; left: 4px; right: 4px; top: 7px; height: 2px; background: #f3e6c9; border-radius: 1px; }
.f-lbl { font: 700 10px var(--f-body); letter-spacing: .06em; color: #3b2d22; }
.notice { padding: 14px 16px; margin-bottom: 16px; border-radius: 12px; border: 1px solid var(--gold); background: color-mix(in srgb, var(--gold) 10%, var(--surface)); }
.notice p { margin: 0 0 10px; }

/* ---------- ajustes ---------- */
.settings { max-width: 720px; padding-bottom: 20px; }
.set { border-bottom: 1px solid var(--line); padding-bottom: 14px; }
.set .field { padding: 6px 20px 0; }
.set-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 6px 20px; }
.set-row p { margin: 2px 0 0; }
.radios { display: flex; flex-direction: column; gap: 2px; padding: 6px 12px; transition: opacity .2s; }
.radios.dim { opacity: .45; }
.radio { display: flex; align-items: center; gap: 12px; padding: 10px 10px; border-radius: 10px; cursor: pointer; }
.radio:hover { background: var(--surface-2); }
.radio small { margin-left: auto; }
.radio input { accent-color: var(--accent); width: 18px; height: 18px; margin: 0; }
.colophon { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 32px 20px 8px; }
.colophon .plate-script { color: var(--accent); font-size: 34px; }

/* =========================================================
   TOCANDO AGORA
   ========================================================= */
.np {
  position: fixed; inset: 0; z-index: 30;
  background: var(--bg);
  overflow-y: auto; overscroll-behavior: contain;
  transform: translateY(100%); transition: transform .24s cubic-bezier(.2, .8, .2, 1);
}
.np.open { transform: none; }
.np-inner {
  max-width: 540px; margin: 0 auto;
  padding: calc(8px + var(--safe-t)) 20px calc(24px + var(--safe-b));
  display: flex; flex-direction: column; gap: 18px;
  min-height: 100%;
}
.np-head { display: flex; align-items: center; gap: 8px; }
.np-from { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; text-align: center; }
.np-from .linkish { font-weight: 600; color: var(--ink); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center; }
.np-cab { padding: 16px; }
.np-cab .grille { padding: 34px 26px 26px; }
.np-cover {
  width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 3px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .3), 0 14px 30px rgba(0, 0, 0, .55);
  background: #2a1a14;
}
.np-meta { display: flex; align-items: center; gap: 12px; }
.np-titles { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.np-titles h2 { margin: 0; font: 600 28px/1.1 var(--f-display); font-variation-settings: 'opsz' 72, 'SOFT' 50; overflow-wrap: anywhere; }
.np-titles .linkish { font-size: 17px; }
.np .seekrow .t { color: var(--ink-2); opacity: 1; }
.np .seek::-webkit-slider-runnable-track { background: linear-gradient(90deg, var(--accent) var(--p), var(--line) var(--p)); }
.transport.big { justify-content: space-between; padding: 0 6px; }
.transport.big .ibtn { width: 50px; height: 50px; color: var(--ink); }
.transport.big .ibtn .ic { width: 26px; height: 26px; }
.transport.big .play { width: 72px; height: 72px; background: var(--accent); color: var(--accent-ink); box-shadow: 0 6px 18px rgba(156, 47, 34, .35); }
.transport.big .play .ic { width: 30px; height: 30px; }

.np-panel {
  display: grid; grid-template-columns: 1fr auto; gap: 14px 18px; align-items: center;
  padding: 16px 18px; border-radius: 14px;
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .12) 0 1px, rgba(0, 0, 0, .03) 1px 2px, transparent 2px 3px),
    linear-gradient(180deg, var(--chrome-a), var(--chrome-b));
  color: #2a1f17;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), var(--shadow);
}
.np-cell { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.np-vol { align-items: center; }
.np-vus { grid-column: 1 / -1; flex-direction: row; gap: 12px; align-items: stretch; }
.np-links { grid-column: 1 / -1; flex-direction: row; gap: 8px; }
.np-links .btn.ghost { background: rgba(255, 255, 255, .35); border-color: rgba(0, 0, 0, .18); color: #2a1f17; }
.engrave { font: 700 10px var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: #4d3f33; text-shadow: 0 1px 0 rgba(255, 255, 255, .55); }
.np-panel .knob { --size: 72px; --cap: 42px; }

.vu {
  flex: 1; border-radius: 8px; overflow: hidden;
  background: radial-gradient(ellipse 90% 90% at 50% 100%, #fff4d2, #f1d99c 60%, #d8b672);
  box-shadow: 0 0 0 3px #2a1c14, inset 0 0 10px rgba(80, 40, 0, .35);
}
.vu-svg { display: block; width: 100%; height: auto; }
.vu-arc { fill: none; stroke: #3b2a1d; stroke-width: 1.2; }
.vu-arc.red { stroke: #a7281a; }
.vu-arc.thick { stroke-width: 4.5; }
.vu-tick { stroke: #3b2a1d; stroke-width: 1.3; }
.vu-tick.red { stroke: #a7281a; }
.vu-num { fill: #3b2a1d; font: 700 10px var(--f-body); }
.vu-num.red { fill: #a7281a; }
.vu-label { fill: #3b2a1d; font: italic 600 18px var(--f-display); }
.vu-ch { fill: #3b2a1d; font: 700 9px var(--f-body); }
.vu-needle { stroke: #1c130e; stroke-width: 1.5; stroke-linecap: round; }
.vu-cover { fill: #2a1c14; }

@media (min-width: 1024px) {
  .np-inner { max-width: 980px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); grid-template-rows: auto auto auto auto 1fr; column-gap: 48px; row-gap: 20px; align-content: start; padding-top: 24px; }
  .np-head { grid-column: 1 / -1; }
  .np-cab { grid-column: 1; grid-row: 2 / 6; align-self: start; }
  .np-meta, .np .seekrow, .transport.big, .np-panel { grid-column: 2; }
  .np-meta { align-self: end; padding-top: 24px; }
  .np-titles h2 { font-size: 36px; }
}

/* =========================================================
   SHEET / TOAST
   ========================================================= */
.sheet {
  position: fixed; inset: 0; z-index: 50;
  display: flex; align-items: flex-end; justify-content: center;
  background: rgba(30, 18, 10, .45);
  backdrop-filter: blur(2px);
}
@media (min-width: 700px) { .sheet { align-items: center; padding: 20px; } }
.sheet-panel {
  width: 100%; max-width: 440px; max-height: 84dvh;
  display: flex; flex-direction: column;
  background: var(--surface);
  border-radius: 18px 18px 0 0;
  box-shadow: var(--shadow-lg);
  padding-bottom: var(--safe-b);
  animation: rise .2s cubic-bezier(.2, .8, .2, 1);
}
@media (min-width: 700px) { .sheet-panel { border-radius: 18px; } }
@keyframes rise { from { transform: translateY(24px); opacity: 0; } }
.sheet-head { display: flex; align-items: center; gap: 10px; padding: 14px 10px 8px 20px; border-bottom: 1px solid var(--line); }
.sheet-head b { flex: 1; min-width: 0; font: 600 19px var(--f-display); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sheet-body { overflow-y: auto; }
.menu { display: flex; flex-direction: column; padding: 6px; }
.menu .item {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  min-height: 48px; padding: 0 14px; border-radius: 10px; text-align: left; font-size: 15px;
}
.menu .item small { color: var(--ink-3); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 55%; }
.menu .item:hover, .menu .item:focus-visible { background: var(--surface-2); outline: none; }
.menu .item.danger { color: var(--accent); }
.menu hr { border: 0; border-top: 1px solid var(--line); margin: 6px 8px; }
.dialog { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 16px; }
.dialog p { margin: 0; }
.row-btns { display: flex; justify-content: flex-end; gap: 8px; }
.info { display: grid; grid-template-columns: auto 1fr; gap: 8px 18px; margin: 0; }
.info dt { font: 600 11px var(--f-body); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); align-self: center; }
.info dd { margin: 0; overflow-wrap: anywhere; }

.toast {
  position: fixed; left: 50%; z-index: 60;
  bottom: calc(var(--panel-h) + var(--nav-h) + var(--safe-b) + 12px);
  transform: translate(-50%, 16px); opacity: 0;
  max-width: calc(100% - 32px);
  padding: 10px 18px; border-radius: 999px;
  background: var(--ink); color: var(--bg);
  font-size: 14px; font-weight: 500;
  box-shadow: var(--shadow-lg);
  transition: transform .2s, opacity .2s;
  pointer-events: none;
}
.toast.show { transform: translate(-50%, 0); opacity: 1; }
@media (min-width: 1024px) { .toast { bottom: calc(var(--panel-h) + 16px); } }

/* =========================================================
   LOGIN
   ========================================================= */
.login { min-height: 100dvh; display: grid; place-items: center; padding: 24px 16px; }
.login-cab { width: 100%; max-width: 420px; }
.login-cab .grille { padding: 44px 22px 22px; }
.login-card {
  display: flex; flex-direction: column; gap: 14px;
  padding: 24px 22px 22px; border-radius: 12px;
  background: var(--surface); box-shadow: var(--shadow-lg);
}
.login-card h1 { margin: 0; font: italic 500 32px var(--f-display); }
.login-card p { margin: 0; }
.login-err { min-height: 1.2em; color: var(--accent); font-size: 14px; }
.login-card .lamp { width: 11px; height: 11px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}