/* Myrave Set Studio — design system local.
   1) Tokens  2) Base  3) Estrutura  4) Componentes  5) Telas  6) Responsivo
   Documentação: docs/DESIGN_SYSTEM.md */

/* 1. TOKENS ------------------------------------------------------------ */
:root{
  --bg:#0e0f13; --surface:#16181f; --surface-2:#1c1f28; --surface-3:#242833;
  --border:#2b2f3b; --border-strong:#3d4252;
  --text:#f1f2f6; --text-2:#c9cedb; --muted:#8f9ab3; --muted-2:#6f7890;
  --accent:#b7f36e; --accent-ink:#15200b; --accent-soft:#233019; --accent-line:#4c6534;
  --info:#8fa7c8; --info-soft:#1d2533;
  --warn:#e8c874; --warn-soft:#2e2819; --warn-line:#5f5231;
  --danger:#ff9d90; --danger-soft:#33201e;
  --good:var(--accent); --ok:#9db8dd; --weak:#e8b46b;
  --radius-sm:6px; --radius:10px; --radius-lg:14px;
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px;
  --font:Inter,"Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;
  --fs-label:10px; --fs-small:12px; --fs-body:14px; --fs-track:16px; --fs-h2:20px; --fs-h1:34px; --fs-display:60px;
  --tracking-label:.16em;
  font-family:var(--font); color:var(--text); background:var(--bg); color-scheme:dark; font-synthesis:none;
}

/* 2. BASE -------------------------------------------------------------- */
*{box-sizing:border-box} body{margin:0;background:var(--bg);-webkit-font-smoothing:antialiased}
button,input,select{font:inherit}
button{cursor:pointer;border:1px solid var(--border-strong);background:var(--surface-3);color:var(--text);border-radius:var(--radius-sm);padding:9px 14px;font-size:13px;line-height:1.2;transition:border-color .15s,color .15s,background .15s}
button:hover:not(:disabled){border-color:var(--accent);color:var(--accent)}
button:disabled{opacity:.45;cursor:not-allowed}
button.primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);font-weight:700}
button.primary:hover:not(:disabled){background:#c9fb8b;color:var(--accent-ink)}
button.danger:hover:not(:disabled){border-color:var(--danger);color:var(--danger)}
input,select{background:#12141a;border:1px solid var(--border-strong);border-radius:var(--radius-sm);color:var(--text);padding:9px;width:100%;min-width:0}
input[type=checkbox]{width:auto;accent-color:var(--accent)} input[type=range]{accent-color:var(--accent);padding:0} input[type=file]{padding:8px}
h1{font-size:var(--fs-h1);line-height:1.12;margin:0 0 var(--s2);font-weight:700;letter-spacing:-.02em}
h2{font-size:var(--fs-h2);margin:0;font-weight:650;letter-spacing:-.01em} h3{font-size:15px}
p{color:var(--muted);line-height:1.6;margin:5px 0} small,.muted{color:var(--muted)}
.eyebrow{color:var(--accent);font-size:var(--fs-label);letter-spacing:var(--tracking-label);font-weight:600;text-transform:uppercase;margin-bottom:var(--s2)}
.help{font-size:var(--fs-small);color:var(--muted);margin-top:var(--s3)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.filter-field{min-width:0;margin:12px 0}
.filter-heading{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:6px}
.filter-heading label{margin:0;letter-spacing:normal;text-transform:none;flex:1}
.filter-help{display:inline-grid;place-items:center;width:24px;height:24px;min-width:24px;padding:0;border-radius:4px;color:var(--muted);font-size:12px;font-weight:700;vertical-align:middle}
.rules-panel .row{align-items:start}
.rules-panel fieldset{min-width:0;border:1px solid var(--border);border-radius:8px;padding:12px;margin:12px 0}
.rules-panel legend{font-size:12px;color:var(--text-2)}
.curve-points{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.toolbar:has(.filter-field){display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;align-items:end}
.toolbar .filter-field{margin:0}
dialog.context-help,dialog.guided-tour{position:fixed;inset:auto;margin:0;width:370px;max-width:calc(100vw - 24px);max-height:calc(100dvh - 24px);padding:24px;border:1px solid var(--accent-line);border-radius:14px;background:var(--surface);color:var(--text);box-shadow:0 18px 70px #0008;overflow:auto}
.context-help h3{color:var(--accent);font-size:12px;margin:18px 0 4px}
.context-help button.primary{margin-top:20px}
.guided-tour p{margin:16px 0}
.tour-actions{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.tour-actions>div{display:flex;gap:8px}
dialog.guided-tour::backdrop{background:#0007;backdrop-filter:none}
.tour-target{outline:3px solid var(--accent)!important;outline-offset:5px}
.tour-error{color:var(--danger)}
.bulk-toolbar{border:1px solid var(--border-strong);background:var(--surface-2);border-radius:var(--radius);padding:16px;margin-bottom:12px}
.bulk-toolbar>strong{display:block;color:var(--accent);margin-bottom:12px}
.bulk-controls{display:flex;align-items:flex-end;gap:8px;flex-wrap:wrap}
.bulk-controls label{margin:0;min-width:180px;flex:1;max-width:300px}
.bulk-controls select{margin-top:6px}
.bulk-preview{padding-left:20px;max-height:200px;overflow:auto;color:var(--text-2);line-height:1.7}
.selection-cell{width:44px;text-align:center}
.selection-cell input{width:18px;height:18px;cursor:pointer}
tr.is-selected{background:var(--accent-soft)}
.bulk-controls button.danger,#confirm-bulk-delete{color:var(--danger);border-color:var(--danger)}
#bulk-error{color:var(--danger)}
@media(max-width:760px){.bulk-controls label{max-width:none;flex-basis:100%}.bulk-controls button{flex:1 1 auto}}
[hidden]{display:none!important}
hr{border:0;border-top:1px solid var(--border);margin:var(--s5) 0}

/* 3. ESTRUTURA --------------------------------------------------------- */
body>header{display:flex;align-items:center;gap:40px;padding:20px 32px;border-bottom:1px solid var(--border);background:var(--surface)}
.brand{font-size:26px;font-weight:900;letter-spacing:3px;text-decoration:none;color:var(--accent)}
.brand span{display:block;color:var(--muted);font-size:9px;letter-spacing:.3em;font-weight:600}
nav[aria-label=Principal]{display:flex;gap:6px}
nav[aria-label=Principal] button{background:transparent;border:0;color:var(--muted);font-size:12px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;padding:10px 14px}
nav[aria-label=Principal] button.active{background:var(--accent-soft);color:var(--accent)}
.local{margin-left:auto;color:var(--info);font-size:var(--fs-label);letter-spacing:.12em;text-transform:uppercase}
main{max-width:1560px;margin:auto;padding:var(--s6)}
.workspace-bar{display:flex;align-items:center;gap:var(--s3);padding:12px 32px;border-bottom:1px solid var(--border);background:var(--surface-2)}
.workspace-bar label{font-size:9px;letter-spacing:.14em;margin:0;min-width:220px;color:var(--muted)}
.workspace-bar select{font-size:14px;letter-spacing:0;margin-top:5px}
.workspace-bar button{font-size:12px} .workspace-spacer{flex:1}
.layout{display:grid;grid-template-columns:320px minmax(0,1fr);gap:var(--s5);align-items:start}
.results{min-width:0;display:flex;flex-direction:column;gap:var(--s4)}
.results--single{max-width:980px;margin:auto}

/* 4. COMPONENTES ------------------------------------------------------- */
/* PageHeader */
.page-header{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s5);margin-bottom:var(--s6)}
.page-header p{max-width:560px}
.page-header__aside{display:flex;gap:var(--s2);flex-wrap:wrap;justify-content:flex-end}
/* Tag */
.tag{display:inline-block;font-size:var(--fs-label);letter-spacing:.12em;font-weight:700;padding:6px 9px;background:var(--accent-soft);color:var(--accent);border-radius:var(--radius-sm);white-space:nowrap}
.tag--muted{background:var(--info-soft);color:var(--info)}
/* RulesPanel */
.panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:var(--s5)}
.panel h2{margin-bottom:var(--s4)}
.rules-panel{position:sticky;top:var(--s4);max-height:calc(100vh - 2*var(--s4));overflow:auto}
label{display:block;font-size:var(--fs-small);color:var(--text-2);margin:var(--s3) 0}
label input,label select{margin-top:6px}
.row{display:flex;gap:var(--s3)} .row>*{flex:1;min-width:0}
details{border-top:1px solid var(--border);margin-top:var(--s4);padding-top:var(--s3)}
summary{cursor:pointer;font-size:var(--fs-label);letter-spacing:var(--tracking-label);text-transform:uppercase;font-weight:600;color:var(--text-2)}
.check{display:flex;align-items:center;gap:9px} .check input{margin:0}
.wide{width:100%;margin-top:var(--s4)}
.genre-checks{border:1px solid var(--border);border-radius:var(--radius);padding:10px 12px;margin:var(--s4) 0}
.genre-checks legend{font-size:var(--fs-small);color:var(--text-2)}
/* Notice */
.notice{display:flex;gap:var(--s3);align-items:center;justify-content:space-between;padding:var(--s3) var(--s4);border:1px solid;border-radius:var(--radius);font-size:13px;line-height:1.5}
.notice--warn{background:var(--warn-soft);color:var(--warn);border-color:var(--warn-line)}
.notice--error{background:var(--danger-soft);color:var(--danger);border-color:#6a3a35}
.notice--info{background:var(--info-soft);color:var(--info);border-color:#34435a}
/* EmptyState */
.empty{background:var(--surface);border:1px dashed var(--border-strong);border-radius:var(--radius-lg);text-align:center;padding:72px 32px}
.empty__symbol{font-size:46px;color:var(--accent);margin-bottom:var(--s4);line-height:1}
.empty p{max-width:470px;margin:var(--s3) auto}
.empty__actions{display:flex;gap:var(--s2);justify-content:center;flex-wrap:wrap;margin-top:var(--s5)}
.empty--busy .empty__symbol{animation:spin 1.4s linear infinite;display:inline-block}
/* SetNavigator */
.navigator{position:sticky;top:0;z-index:5;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:var(--s3);padding:10px;background:rgba(22,24,31,.92);backdrop-filter:blur(8px);border:1px solid var(--border);border-radius:var(--radius-lg)}
.navigator__btn{display:flex;gap:var(--s2);align-items:center;min-height:42px;padding:0 var(--s4)}
.navigator__center{display:flex;flex-direction:column;align-items:center;gap:6px}
.navigator__label{font-size:15px;color:var(--text-2)} .navigator__label .eyebrow{margin:0 6px 0 0;display:inline}
.navigator__label strong{color:var(--text);font-size:18px}
.navigator__dots{display:flex;gap:2px}
.navigator__dot{width:24px;height:24px;padding:0;border:0;background:transparent;border-radius:50%;display:grid;place-items:center}
.navigator__dot::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--border-strong);transition:all .15s}
.navigator__dot:hover::after{background:var(--muted)}
.navigator__dot.is-active::after{background:var(--accent);width:22px;border-radius:4px}
/* SetCard */
.set-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:var(--s6);min-width:0}
.set-card__head{display:flex;justify-content:space-between;gap:var(--s3);align-items:flex-start}
.set-card__head h2{font-size:26px}
.set-card__stats{display:grid;grid-template-columns:repeat(3,auto) minmax(220px,1fr);gap:var(--s5);margin:var(--s5) 0 var(--s4);padding:var(--s4) 0;border-block:1px solid var(--border)}
.stat strong{display:block;font-size:22px;font-variant-numeric:tabular-nums;white-space:nowrap}
.stat small{display:block;font-size:var(--fs-label);letter-spacing:.12em;margin-top:4px}
.stat .stat__hint{letter-spacing:0;font-size:11px;color:var(--muted-2)}
/* CompatibilityScore */
.score__value strong{font-size:22px;display:inline} .score__value small{font-size:12px}
.score__bar{height:6px;background:var(--surface-3);border-radius:3px;margin:6px 0;overflow:hidden}
.score__bar span{display:block;height:100%;width:0;border-radius:3px;background:var(--good);transition:width .3s}
.score--ok .score__bar span{background:var(--ok)} .score--weak .score__bar span{background:var(--weak)}
.score__label{display:block;font-size:var(--fs-label);letter-spacing:.12em}
.score__hint{display:block;font-size:11px;color:var(--muted-2);margin-top:2px}
/* Timeline: TrackRow + TransitionRow */
.timeline{list-style:none;margin:0;padding:0}
.track{display:grid;grid-template-columns:36px minmax(0,1fr) auto;gap:var(--s3);align-items:center;padding:var(--s3) var(--s3) var(--s3) 0;border-radius:var(--radius)}
.track__number{font-size:12px;color:var(--muted-2);font-variant-numeric:tabular-nums;text-align:right}
.track__name{font-size:var(--fs-track);font-weight:650;color:var(--text);line-height:1.3;overflow-wrap:anywhere}
.track__artist{font-size:13px;margin:2px 0 0;color:var(--muted)}
.track__meta{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:12px;color:var(--info);margin-top:6px;font-variant-numeric:tabular-nums}
.track__meta strong{color:var(--text-2);font-weight:600}
.track__actions{display:flex;gap:6px}
.track__actions button{font-size:12px;padding:7px 10px;min-height:34px}
.icon-btn{min-width:36px}
.icon-btn.is-on{border-color:var(--accent-line);background:var(--accent-soft)}
.track.is-locked{background:linear-gradient(90deg,var(--accent-soft),transparent 60%)}
.track.is-locked .track__number{color:var(--accent)}
.track.is-swapping{outline:1px dashed var(--info);background:var(--info-soft)}
.transition{display:grid;grid-template-columns:36px minmax(0,1fr) auto;gap:var(--s3);align-items:center;margin:0 0 0 0;padding:6px var(--s3) 6px 0;font-size:12.5px}
.transition__arrow{text-align:right;color:var(--muted-2)}
.transition__main{display:flex;flex-wrap:wrap;gap:4px 14px;align-items:center;border-left:2px solid var(--accent-line);padding:6px 12px;background:rgba(183,243,110,.05);border-radius:0 var(--radius-sm) var(--radius-sm) 0}
.transition__bpm{font-weight:700;color:var(--text);font-variant-numeric:tabular-nums}
.transition__pitch{color:var(--accent);font-variant-numeric:tabular-nums;font-weight:600}
.transition__harmony{color:var(--info)}
.transition__scores{display:flex;align-items:center;gap:10px}
.transition__scores small{color:var(--muted-2);font-size:11px;white-space:nowrap}
.transition__score{min-width:38px;text-align:center;font-weight:700;border-radius:20px;padding:3px 8px;font-size:12px;background:var(--accent-soft);color:var(--good)}
.transition--ok .transition__main{border-left-color:#4b5f7d;background:rgba(143,167,200,.05)} .transition--ok .transition__score{background:var(--info-soft);color:var(--ok)}
.transition--weak .transition__main{border-left-color:var(--warn-line);background:rgba(232,180,107,.06)} .transition--weak .transition__score{background:var(--warn-soft);color:var(--weak)}
.track__lock{font-size:14px}
/* ActionBar */
.action-bar{display:flex;gap:var(--s2);flex-wrap:wrap;margin-top:var(--s5);padding-top:var(--s4);border-top:1px solid var(--border)}
dialog .action-bar{border-top:0;padding-top:0}
.foot{display:flex;gap:var(--s2);flex-wrap:wrap;margin-top:var(--s5)}
/* SavedSetCard */
.saved-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:var(--s4)}
.saved-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:var(--s5);display:flex;flex-direction:column}
.saved-card h2{margin-bottom:var(--s3)}
.saved-card__meta{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:12px;color:var(--muted);align-items:center}
.saved-card__meta strong{color:var(--text-2)}
.saved-card__tracks{font-size:12px;color:var(--muted-2);margin-top:var(--s3);flex:1}
.saved-card .action-bar{margin-top:var(--s4)}
.score-pill{font-weight:700;border-radius:20px;padding:3px 9px;background:var(--accent-soft);color:var(--good)}
.score-pill--ok{background:var(--info-soft);color:var(--ok)} .score-pill--weak{background:var(--warn-soft);color:var(--weak)}
/* Tabela da biblioteca */
.toolbar{display:flex;gap:var(--s3);margin-bottom:var(--s4)} .toolbar input{max-width:420px} .toolbar select{max-width:220px}
.tablewrap{overflow:auto;border:1px solid var(--border);border-radius:var(--radius-lg)}
table{border-collapse:collapse;width:100%;background:var(--surface);font-size:13px}
th,td{padding:14px 16px;text-align:left;border-bottom:1px solid var(--border)}
th{color:var(--muted);font-size:var(--fs-label);letter-spacing:.12em;text-transform:uppercase;font-weight:600}
td small{display:block;margin-top:4px} .dim{opacity:.5}
/* Dialog e toast */
dialog{width:min(620px,94vw);max-height:90vh;border:1px solid var(--border-strong);border-radius:var(--radius-lg);padding:var(--s5);background:var(--surface-2);color:var(--text)}
dialog::backdrop{background:#000b;backdrop-filter:blur(3px)}
dialog h2{margin-bottom:var(--s4)}
dialog .options{display:grid;gap:10px;margin-top:var(--s4)} dialog .option{text-align:left;padding:15px}
#toast{position:fixed;bottom:25px;left:50%;transform:translateX(-50%);padding:13px 22px;border-radius:var(--radius);background:var(--accent);color:var(--accent-ink);font-weight:600;display:none;z-index:20;max-width:90vw}
.spinner{display:inline-block;animation:pulse 1s infinite}
@keyframes pulse{50%{opacity:.35}} @keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
/* Importação */
.import-summary{display:flex;gap:var(--s5);margin-top:var(--s4);padding:var(--s3) 0;border-block:1px solid var(--border)}
.import-list{list-style:none;padding:0;margin:var(--s3) 0;font-size:12px;color:var(--muted)} .import-list li{padding:3px 0}
.import-list strong{color:var(--text-2)} .import-help p{font-size:12px}

/* 5. TELAS: autenticação e boas-vindas --------------------------------- */
.auth-layout{display:grid;grid-template-columns:1.2fr 1fr;gap:90px;max-width:1080px;margin:55px auto;align-items:center}
.auth-story h1{font-size:var(--fs-display);line-height:1.05;letter-spacing:-.035em;margin:22px 0}
.auth-story p{max-width:440px} .auth-panel{padding:30px} .auth-panel h2{font-size:25px}
.auth-chips{display:flex;gap:10px;flex-wrap:wrap;margin:30px 0}
.auth-chips span{border:1px solid var(--accent-line);background:var(--accent-soft);border-radius:30px;padding:9px 15px;color:#c6e7a2;font-size:12px}
#auth-error,#code-error{color:var(--danger);font-size:13px}
.welcome{max-width:900px;margin:60px auto} .welcome h1{font-size:40px}
.welcome-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:32px}
.welcome .panel h2{margin-bottom:12px}
.genre-list{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0}
.recovery-panel{max-width:460px;margin:60px auto;padding:30px} .recovery-panel h2{font-size:25px}
.recovery-panel input[name=code]{font-size:25px;letter-spacing:8px;text-align:center}

/* 6. RESPONSIVO -------------------------------------------------------- */
@media(max-width:1180px){
  .set-card__stats{grid-template-columns:repeat(3,auto)} .set-card__stats .score{grid-column:1/-1}
}
@media(max-width:950px){
  body>header{gap:16px;padding:18px} .local{display:none} main{padding:22px}
  .layout{grid-template-columns:280px minmax(0,1fr)}
  .set-card{padding:var(--s5)}
  .track{grid-template-columns:28px minmax(0,1fr)} .track__actions{grid-column:2}
  .transition{grid-template-columns:28px minmax(0,1fr)} .transition__scores{grid-column:2}
  .auth-layout{gap:35px;margin:30px auto} .auth-story h1{font-size:45px}
  .workspace-bar{flex-wrap:wrap;padding:14px 20px} .workspace-spacer{display:none}
}
@media(max-width:760px){
  body>header{align-items:stretch;flex-direction:column;gap:10px;padding:14px 16px} .brand{font-size:21px}
  .workspace-bar{padding:10px 16px;gap:8px} .workspace-bar button{padding:8px 6px;font-size:11px}
  .page-header p{display:none}
  nav[aria-label=Principal]{width:100%;gap:0} nav[aria-label=Principal] button{flex:1;font-size:11px;padding:10px 4px;letter-spacing:.06em}
  main{padding:16px}
  .layout{display:flex;flex-direction:column}
  .layout.has-results .results{order:-1} .rules-panel{position:static;max-height:none;width:100%}
  .page-header{flex-direction:column;align-items:flex-start;margin-bottom:var(--s5)} .page-header__aside{justify-content:flex-start}
  h1{font-size:27px}
  .set-card{padding:var(--s4)} .set-card__head h2{font-size:21px}
  .set-card__stats{grid-template-columns:1fr 1fr;gap:var(--s4)} .stat strong,.score__value strong{font-size:19px}
  .navigator{padding:6px;gap:6px} .navigator__text{display:none} .navigator__btn{min-width:48px;justify-content:center;padding:0 14px}
  .navigator__label{font-size:14px}
  .transition__main{gap:2px 10px}
  .action-bar button{flex:1 1 auto}
  .toolbar{flex-wrap:wrap} .toolbar input,.toolbar select{max-width:none}
  .saved-grid{grid-template-columns:1fr}
  .auth-layout{display:block;margin:10px auto} .auth-story h1{font-size:38px} .auth-story{margin-bottom:30px}
  .auth-panel{padding:22px} .welcome-grid{grid-template-columns:1fr} .welcome{margin:25px auto}
  .workspace-bar label{width:100%} .workspace-bar button{flex:1} .auth-chips{margin:18px 0}
  .import-summary{gap:var(--s4)}
}
.note{color:var(--warn);font-size:11px}
/* Pendências */
.badge{display:inline-block;min-width:18px;margin-left:6px;padding:1px 6px;border-radius:10px;background:var(--warn);color:#241c06;font-size:10px;font-weight:700;letter-spacing:0;text-align:center}
.tag--warn{background:var(--warn-soft);color:var(--warn)}
.chips{display:flex;gap:var(--s2);flex-wrap:wrap;margin-bottom:var(--s2)}
.chip{border-radius:20px;padding:7px 14px;font-size:12px;background:var(--surface-2)} .chip span{color:var(--muted);margin-left:4px}
.chip.is-active{background:var(--accent-soft);border-color:var(--accent-line);color:var(--accent)} .chip.is-active span{color:var(--accent)}
.pending-list{display:grid;gap:var(--s3)}
.pending-row{background:var(--surface);border:1px solid var(--border);border-left:3px solid var(--warn-line);border-radius:var(--radius-lg);padding:var(--s4) var(--s5)}
.pending-row__head{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s3);align-items:center}
.pending-row__tags{display:flex;gap:6px;flex-wrap:wrap} .pending-row__origin{color:var(--muted-2);font-size:11.5px}
.pending-row__fields{display:grid;grid-template-columns:2fr 1.6fr 1.1fr .8fr .8fr 1.4fr;gap:var(--s3)}
.pending-row__fields label{margin:var(--s3) 0 0}
.pending-row__actions{margin-top:var(--s3);padding-top:var(--s3)}
@media(max-width:1100px){.pending-row__fields{grid-template-columns:1fr 1fr 1fr}}
@media(max-width:760px){.pending-row{padding:var(--s4)} .pending-row__fields{grid-template-columns:1fr 1fr} .f-name,.f-artist,.f-remix{grid-column:1/-1}}
@media(max-width:760px){nav[aria-label=Principal]{overflow-x:auto;scrollbar-width:none} nav[aria-label=Principal]::-webkit-scrollbar{display:none} nav[aria-label=Principal] button{flex:0 0 auto;white-space:nowrap;padding:10px 10px}}
/* Explorar ------------------------------------------------------------ */
.explore.is-loading{opacity:.55;pointer-events:none;transition:opacity .15s}
.explore-search{display:flex;gap:var(--s2);max-width:560px;margin-bottom:var(--s5)}
.back-link{background:none;border:0;padding:0;color:var(--muted);font-size:13px;margin-bottom:var(--s4)} .back-link:hover{color:var(--accent)}
.cover{display:block;width:100%;aspect-ratio:1;object-fit:cover;border-radius:var(--radius);background:var(--surface-3)}
.cover--empty{display:grid;place-items:center;color:var(--muted-2);font-size:32px}
.cover--lg{width:240px;flex:0 0 240px;border-radius:var(--radius-lg);box-shadow:0 20px 50px #0008}
.artist-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:var(--s4);margin-bottom:var(--s5)}
.artist-card,.release-card{display:flex;flex-direction:column;gap:6px;text-align:left;padding:var(--s3);background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);color:var(--text)}
.artist-card:hover,.release-card:hover{border-color:var(--accent-line);color:var(--text);transform:translateY(-2px)}
.artist-card{transition:transform .15s} .release-card{transition:transform .15s}
.artist-card__name{font-size:20px;font-weight:700;margin-top:var(--s2)}
.artist-card__meta,.release-card__meta{font-size:12px;color:var(--muted)}
.release-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:var(--s4);margin:var(--s4) 0}
.release-card__title{font-weight:650;font-size:14px;line-height:1.3;margin-top:4px}
.release-card__foot{display:flex;justify-content:space-between;gap:6px;flex-wrap:wrap;align-items:center;margin-top:auto;padding-top:4px}
.release-card:not(.has-owned) .cover{filter:grayscale(.7) brightness(.8)}
.have{font-size:11px;font-weight:600;color:var(--muted)} .have--some{color:var(--info)} .have--full{color:var(--accent)}
.owners{font-size:11px;color:var(--info);white-space:nowrap} .owners--zero{color:var(--muted-2)}
.explore-section{border-top:1px solid var(--border);margin-top:var(--s5);padding-top:var(--s4)}
.explore-section>summary{font-size:12px} .explore-section>summary span{color:var(--muted);margin-left:6px}
.explore-h2{font-size:14px;letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-2);margin:var(--s5) 0 var(--s3)}
.artist-hero{max-width:760px;margin-bottom:var(--s5)} .artist-hero h1{font-size:var(--fs-display);letter-spacing:-.03em;margin:0}
.artist-hero__meta{color:var(--info);font-size:14px}
.artist-hero__origin{color:var(--text-2);font-size:13px;border-left:2px solid var(--accent-line);padding-left:10px;margin:10px 0}.artist-hero__origin a,.lineage a{color:var(--accent)}
.lineage{margin-top:24px}.lineage__list{list-style:none;padding:0;margin:8px 0 0;display:grid;gap:10px}.lineage__item{display:flex;gap:12px;align-items:flex-start;padding:10px 12px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm)}.lineage__n{font-variant-numeric:tabular-nums;color:var(--muted);min-width:28px;font-weight:700}
.source-link{font-size:13px;color:var(--info);text-decoration:none;align-self:center} .source-link:hover{color:var(--accent)}
.release-hero{display:flex;gap:var(--s6);align-items:flex-end;margin-bottom:var(--s5)}
.release-hero__info{min-width:0} .release-hero h1{font-size:40px;margin:0 0 var(--s2);line-height:1.05}
.release-hero__artists{font-size:16px;color:var(--text-2)} .release-hero a,.ctrack a{color:inherit;text-decoration:underline;text-decoration-color:var(--border-strong);text-underline-offset:3px}
.release-hero a:hover,.ctrack a:hover{color:var(--accent)}
.release-hero__stats{display:flex;gap:var(--s5);margin:var(--s4) 0}
.release-hero .action-bar{border-top:0;padding-top:0;margin-top:var(--s3);align-items:center}
.ctrack-list{list-style:none;margin:0;padding:0;border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;background:var(--surface)}
.ctrack{display:grid;grid-template-columns:40px 30px minmax(0,1fr) 64px 64px 56px 92px;gap:var(--s3);align-items:center;padding:10px var(--s4);border-top:1px solid var(--border)}
.ctrack-list:not(:has(.ctrack__n)) .ctrack{grid-template-columns:40px minmax(0,1fr) 64px 64px 56px 92px}
.ctrack--head{border-top:0;font-size:var(--fs-label);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:600;background:var(--surface-2)}
.ctrack:not(.is-owned):not(.ctrack--head){opacity:.45} .ctrack:not(.is-owned):not(.ctrack--head):hover{opacity:.8}
.ctrack.is-owned{background:linear-gradient(90deg,rgba(183,243,110,.06),transparent 50%)}
.ctrack__n{font-size:12px;color:var(--muted-2);font-variant-numeric:tabular-nums}
.ctrack__name{font-weight:650} .ctrack__artists,.ctrack__rel{font-size:12px;color:var(--muted);margin-top:2px}
.ctrack__bpm,.ctrack__key,.ctrack__dur{font-variant-numeric:tabular-nums;font-size:13px} .ctrack__key small{color:var(--muted-2);margin-left:4px}
.own-toggle{width:32px;height:32px;padding:0;border-radius:50%;font-weight:700}
.own-toggle[aria-pressed=true]{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.suspect{color:var(--warn);cursor:help} .suspect sup{font-size:9px;margin-left:1px}
@media(max-width:760px){
  .artist-grid{grid-template-columns:1fr 1fr} .release-grid{grid-template-columns:1fr 1fr;gap:var(--s3)}
  .artist-hero h1{font-size:40px} .release-hero{flex-direction:column;align-items:flex-start;gap:var(--s4)} .cover--lg{width:180px;flex-basis:auto}
  .release-hero h1{font-size:28px}
  .ctrack,.ctrack-list:not(:has(.ctrack__n)) .ctrack{display:flex;flex-wrap:wrap;column-gap:12px;row-gap:4px;padding:10px 12px}
  .ctrack--head,.ctrack__n{display:none}
  .ctrack__body{flex:1 1 calc(100% - 56px);min-width:0}
  .ctrack__bpm{margin-left:44px}
  .ctrack__bpm,.ctrack__key,.ctrack__dur,.ctrack__owners{font-size:12px;color:var(--info)}
  .explore-search{flex-direction:column}
}

/* Próximas (sugestões por linhagem) */
dialog:has(.suggest-dialog){width:min(760px,96vw)}
.suggest-trail{font-size:13px;color:var(--text-2);display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:4px 0 8px}
.link-btn{background:none;border:0;padding:0;color:var(--accent);font-size:13px;text-decoration:underline;min-height:0}
.link-btn:hover:not(:disabled){background:none}
.suggest-list{list-style:none;padding:0;margin:14px 0 0;display:grid;gap:10px}
.suggest{display:flex;gap:12px;padding:12px;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface)}
.suggest__cover{width:64px;height:64px;border-radius:var(--radius-sm);object-fit:cover;flex:none;background:var(--surface-3)}
.suggest__cover--empty{display:grid;place-items:center;color:var(--muted)}
.suggest__body{min-width:0;flex:1}
.suggest__name{font-weight:700}
.suggest__artist{color:var(--text-2);font-size:13px}
.suggest__meta{display:flex;flex-wrap:wrap;gap:6px 12px;font-size:12px;color:var(--muted);margin-top:6px;align-items:center}
.suggest__meta strong{color:var(--text)}
.suggest__why{font-size:12px;color:var(--text-2);border-left:2px solid var(--accent-line);padding-left:8px;margin-top:8px}
.suggest__actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px;align-items:center}
.suggest__actions button{font-size:12px;padding:7px 10px}
.suggest.is-missing .suggest__cover,.suggest.is-missing .suggest__name,.suggest.is-missing .suggest__artist{opacity:.55}
.suggest.is-missing .suggest__cover{filter:grayscale(1)}
.suggest-empty{color:var(--muted);padding:16px 0}
@media (max-width:560px){.suggest__cover{width:48px;height:48px}}