/* ============ Soma_play — design system (portado do design visual) ============ */

/* --- Fontes locais (offline) --- */
@font-face { font-family:'Sora'; font-style:normal; font-weight:100 900; font-display:swap;
  src:url("../fonts/sora-latin.woff2") format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD; }
@font-face { font-family:'Sora'; font-style:normal; font-weight:100 900; font-display:swap;
  src:url("../fonts/sora-latin-ext.woff2") format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family:'Inter'; font-style:normal; font-weight:100 900; font-display:swap;
  src:url("../fonts/inter-latin.woff2") format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD; }
@font-face { font-family:'Inter'; font-style:normal; font-weight:100 900; font-display:swap;
  src:url("../fonts/inter-latin-ext.woff2") format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family:'JetBrains Mono'; font-style:normal; font-weight:100 800; font-display:swap;
  src:url("../fonts/jbmono-latin.woff2") format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD; }
@font-face { font-family:'JetBrains Mono'; font-style:normal; font-weight:100 800; font-display:swap;
  src:url("../fonts/jbmono-latin-ext.woff2") format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }

/* --- Tokens --- */
:root {
  --bg:#0E0E11; --deep:#16161b; --surface:#1A1A20; --surface-hover:#1d1d24;
  --surface2:#23232B; --surface2-hover:#2E2E37;
  --border:#2E2E37; --border2:#3a3a45; --knob:#3a3a45;
  --text:#F5F4F2; --muted:#9A9AA5; --muted2:#5f5f6a; --muted3:#6a6a74;
  --accent:#E8A23D; --accent-hover:#F4B860;
  --accent-tint:rgba(232,162,61,.12); --accent-tint2:rgba(232,162,61,.16); --accent-soft:rgba(232,162,61,.4); --accent-soft2:rgba(232,162,61,.5); --accent-soft3:rgba(232,162,61,.3);
  --teal:#2DD4BF; --teal-tint:rgba(45,212,191,.12); --teal-tint2:rgba(45,212,191,.16); --teal-soft:rgba(45,212,191,.4);
  --gold:#F4B860; --gold-tint:rgba(244,184,96,.1); --gold-soft:rgba(244,184,96,.28);
  --green:#34D399; --green-tint:rgba(52,211,153,.12);
  --red:#EF4444; --red-tint:rgba(239,68,68,.15); --red-soft:rgba(239,68,68,.5);
  --scrim:rgba(6,6,8,.6); --shadow:0 12px 32px rgba(0,0,0,.5);
  --f-title:'Sora',system-ui,sans-serif; --f-body:'Inter',system-ui,sans-serif; --f-mono:'JetBrains Mono',ui-monospace,monospace;
}
:root[data-theme="light"] {
  --bg:#F1EFEA; --deep:#E9E6E0; --surface:#FFFFFF; --surface-hover:#FAF8F4;
  --surface2:#F0EDE7; --surface2-hover:#E4E0D8;
  --border:#DDD8CF; --border2:#CCC6BB; --knob:#C4BEB3;
  --text:#1A1A20; --muted:#6B6B75; --muted2:#9a9aa2; --muted3:#8a8a92;
  --accent:#D18A1F; --accent-hover:#B87817;
  --accent-tint:rgba(209,138,31,.12); --accent-tint2:rgba(209,138,31,.16); --accent-soft:rgba(209,138,31,.4); --accent-soft2:rgba(209,138,31,.5); --accent-soft3:rgba(209,138,31,.3);
  --teal:#0D9488; --teal-tint:rgba(13,148,136,.10); --teal-tint2:rgba(13,148,136,.14); --teal-soft:rgba(13,148,136,.4);
  --gold:#B8860B; --gold-tint:rgba(184,134,11,.1); --gold-soft:rgba(184,134,11,.28);
  --green:#059669; --green-tint:rgba(5,150,105,.1);
  --scrim:rgba(40,38,34,.45); --shadow:0 12px 32px rgba(60,55,45,.25);
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;background:var(--bg)}
body{color:var(--text);font-family:var(--f-body);-webkit-font-smoothing:antialiased;overscroll-behavior:none}
#app{height:100dvh;display:flex;flex-direction:column;overflow:hidden;position:relative}
button{font-family:var(--f-body);color:inherit}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:8px}
::-webkit-scrollbar-track{background:transparent}
input[type=text],textarea{font-family:var(--f-body)}
input[type=text]::placeholder,textarea::placeholder{color:var(--muted)}

/* --- Sliders --- */
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:8px;border-radius:6px;outline:none;cursor:pointer;background:var(--border)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;background:var(--text);border:2px solid var(--bg);box-shadow:0 1px 4px rgba(0,0,0,.55);cursor:pointer}
input[type=range]::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:var(--text);border:2px solid var(--bg);box-shadow:0 1px 4px rgba(0,0,0,.55);cursor:pointer}

/* --- Animações --- */
@keyframes eqbar{0%,100%{transform:scaleY(.35)}50%{transform:scaleY(1)}}
@keyframes softpulse{0%,100%{opacity:.55}50%{opacity:1}}
@keyframes sheetUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
@keyframes fadeScrim{from{opacity:0}to{opacity:1}}
@keyframes ctlIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}

/* ============ Componentes ============ */
.screen{height:100%;display:flex;flex-direction:column}
.topbar{display:flex;align-items:center;gap:16px;padding:16px 28px;background:var(--surface);border-bottom:1px solid var(--border);flex-shrink:0}
.logo{font-family:var(--f-title);font-weight:700;font-size:24px;letter-spacing:-.5px;white-space:nowrap}
.logo em{color:var(--accent);font-style:normal}
.page-title{font-family:var(--f-title);font-weight:700;font-size:22px}

.badge-offline{display:inline-flex;align-items:center;gap:6px;padding:6px 11px;border-radius:999px;background:var(--green-tint);color:var(--green);font-size:12px;font-weight:600;white-space:nowrap}

.searchbox{flex:1;display:flex;align-items:center;gap:10px;background:var(--bg);border:1px solid var(--border);border-radius:12px;padding:0 14px;height:48px;max-width:520px}
.searchbox input{flex:1;background:transparent;border:none;outline:none;color:var(--text);font-size:15px;min-width:0}
.searchbox svg{flex-shrink:0}

.btn-icon{width:48px;height:48px;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:var(--surface2);border:1px solid var(--border);border-radius:12px;color:var(--text);cursor:pointer}
.btn-icon:hover{background:var(--surface2-hover)}
.btn-icon.sm{width:44px;height:44px;border-radius:11px}
.btn-icon.xs{width:38px;height:38px;border-radius:10px;color:var(--muted)}
.btn-icon.muted{color:var(--muted)}
.btn-icon.muted:hover{color:var(--text);border-color:var(--border2)}
.btn-icon.accent-on{background:var(--accent);border-color:var(--accent);color:var(--bg)}
.btn-icon.teal-on{background:var(--teal-tint2);border-color:var(--teal-soft);color:var(--teal)}
.btn-icon.fav{background:var(--accent-tint2);border-color:var(--accent-soft2);color:var(--accent)}
.btn-icon.danger-h:hover{color:var(--red);border-color:var(--red-soft)}
.btn-icon.play-tint{background:var(--accent-tint2);border-color:var(--accent-soft3);color:var(--accent)}
.btn-icon.play-tint:hover{background:var(--accent-tint2)}

.btn-primary{height:48px;padding:0 18px;display:inline-flex;align-items:center;justify-content:center;gap:9px;background:var(--accent);color:var(--bg);border:none;border-radius:12px;font-family:var(--f-title);font-weight:600;font-size:15px;cursor:pointer;white-space:nowrap}
.btn-primary:hover{background:var(--accent-hover)}
.btn-primary:disabled{opacity:.4;cursor:default;background:var(--accent)}
.btn-primary.small{height:46px;border-radius:10px;font-family:var(--f-body);font-weight:700;font-size:14px;padding:0 20px}
.btn-ghost{height:46px;padding:0 16px;background:var(--surface2);color:var(--muted);border:1px solid var(--border);border-radius:10px;font-weight:600;font-size:14px;cursor:pointer}
.btn-ghost.lg{height:50px;padding:0 22px;border-radius:12px;color:var(--text);font-size:15px}
.btn-ghost.danger{color:var(--red)}
.btn-ghost:disabled{opacity:.4;cursor:default}

.tabrow{display:flex;align-items:center;gap:14px;padding:13px 28px;background:var(--surface);border-bottom:1px solid var(--border);flex-shrink:0}
.segtab{display:flex;background:var(--bg);border:1px solid var(--border);border-radius:12px;padding:4px;gap:4px}
.segtab button{height:42px;padding:0 20px;border:none;border-radius:9px;font-family:var(--f-title);font-weight:600;font-size:15px;cursor:pointer;display:flex;align-items:center;gap:9px;background:transparent;color:var(--muted);white-space:nowrap}
.segtab button.on{background:var(--accent);color:var(--bg)}
.tabsub{color:var(--muted);font-size:13px}
.lens{display:flex;align-items:center;gap:8px;margin-left:auto}
.lens.off{opacity:.32;pointer-events:none}
.chip{width:44px;height:44px;border-radius:999px;cursor:pointer;display:flex;align-items:center;justify-content:center;border:1px solid transparent;transition:background .12s}
.chip.t2{background:var(--teal-tint);color:var(--teal);border-color:var(--teal-soft)}
.chip.t2.on{background:var(--teal);color:var(--bg);border-color:var(--teal)}
.chip.t3{background:var(--gold-tint);color:var(--gold);border-color:var(--gold-soft)}
.chip.t3.on{background:var(--gold);color:var(--bg);border-color:var(--gold)}
/* --- Faixa de fontes: o filtro sempre visível, na própria linha das abas --- */
.fonte-strip{display:flex;align-items:center;gap:8px;flex:1 1 auto;min-width:0}
.fonte-strip.off{opacity:.32;pointer-events:none}
.fonte-strip .tagico{display:flex;color:var(--muted);flex-shrink:0}
.fonte-scroll{display:flex;align-items:center;gap:6px;min-width:0;overflow-x:auto;scrollbar-width:none}
.fonte-scroll::-webkit-scrollbar{display:none}
.fonte-scroll .sep{width:1px;height:22px;margin:0 2px;background:var(--border);flex-shrink:0}
.fpill{display:flex;align-items:center;gap:7px;height:36px;padding:0 13px;border-radius:999px;flex-shrink:0;cursor:pointer;
  background:var(--surface2);border:1px solid var(--border);color:var(--text);transition:background .12s,color .12s}
.fpill .dot{width:7px;height:7px;border-radius:999px;background:var(--fc);flex-shrink:0}
.fpill .nm{font-family:var(--f-body);font-weight:500;font-size:13px;white-space:nowrap}
.fpill em{font-family:var(--f-mono);font-style:normal;font-size:11px;color:var(--muted)}
.fpill.todas{--fc:var(--accent)}
/* Tinta escura CRAVADA, e não var(--bg): o fundo da pílula ativa é a cor da fonte
   — saturada e clara nos dois temas — e o que contrasta com ela é tinta escura.
   No tema claro, var(--bg) daria bege sobre verde. É a única cor da faixa que
   não passa por token, e é de propósito. */
.fpill[aria-pressed="true"]{background:var(--fc);border-color:var(--fc);color:#0E0E11}
.fpill[aria-pressed="true"] .nm{font-weight:700}
.fpill[aria-pressed="true"] .dot{background:rgba(14,14,17,.5)}
.fpill[aria-pressed="true"] em{color:rgba(14,14,17,.6)}
/* Zero resultados fica apagada, mas continua clicável: "o VJ não tem nada que
   case com o que você digitou" é informação, e a pílula sumindo é a ausência dela.
   :not([aria-pressed="true"]) porque .zero e [aria-pressed="true"] têm a MESMA
   especificidade (0,2,0) — sem a exclusão, quem vier depois na cascata vence, e
   uma pílula marcada que zera (isolar uma fonte, digitar algo que ela não tem)
   perderia a aparência de selecionada, ficando indistinguível de "nenhuma
   marcada" com a biblioteca vazia. */
.fpill.zero:not([aria-pressed="true"]){background:var(--deep);border-color:var(--border);color:var(--muted2)}
.fpill.zero:not([aria-pressed="true"]) .dot{background:var(--muted2);opacity:.55}
.fscroll-next{display:none;width:30px;height:30px;border-radius:999px;flex-shrink:0;align-items:center;justify-content:center;
  background:var(--surface2);border:1px solid var(--border);color:var(--muted);cursor:pointer}
/* Duas afordâncias quando há fonte fora da vista: o fade na borda direita e a
   seta. Ambas presas à mesma classe, que o medirOverflow() liga e desliga. */
.fonte-strip.ov .fonte-scroll{-webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 34px),transparent);mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 34px),transparent)}
.fonte-strip.ov .fscroll-next{display:flex}
@media (pointer:coarse){.fpill{height:44px}.fscroll-next{width:44px;height:44px}}

.content-scroll{flex:1;overflow-y:auto;padding:24px 28px 110px}
.content-scroll.tight{padding:20px 28px 28px}

.empty{text-align:center;padding:60px 20px;color:var(--muted)}
.empty .t{font-family:var(--f-title);font-weight:600;font-size:17px;color:var(--text)}
.empty .s{font-size:14px;margin-top:6px}
.empty .box{display:inline-flex;width:64px;height:64px;border-radius:16px;background:var(--surface);border:1px solid var(--border);align-items:center;justify-content:center;margin-bottom:16px;color:var(--muted)}

/* --- Grade de artistas e estilos --- */
/* O nº de colunas emerge da largura, como no .songs-grid: com 200px de coluna
   um monitor largo dá ~8 e o tablet dá 4-5, sem breakpoint por tamanho de tela.
   O min() evita coluna mais larga que o viewport. O acervo passa de 200
   artistas — cartão alto e coluna fixa gastavam a tela à toa. */
.artist-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(200px,100%),1fr));gap:10px}
.artist-grid .empty{grid-column:1/-1}
.card-artist{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:10px 12px;cursor:pointer;display:flex;flex-direction:row;align-items:center;gap:10px;min-width:0}
.card-artist:hover{border-color:var(--border2);background:var(--surface-hover)}
.avatar{width:60px;height:60px;border-radius:14px;overflow:hidden;display:flex;align-items:center;justify-content:center;font-family:var(--f-title);font-weight:700;font-size:24px;flex-shrink:0}
.avatar.md{width:52px;height:52px;border-radius:13px;font-size:20px}
.avatar.sm{width:38px;height:38px;border-radius:10px;font-size:15px}
.avatar.amber{background:var(--accent-tint2);color:var(--accent)}
.avatar.teal{background:var(--teal-tint2);color:var(--teal)}
/* Coluna estreita + nome de usuário de tamanho imprevisível: os dois truncam
   com reticências, e o nome inteiro fica no title do cartão. */
.card-artist .txt{flex:1;min-width:0}
.card-artist .name{font-family:var(--f-title);font-weight:600;font-size:14px;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card-artist .count{color:var(--muted);font-size:12px;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* --- Linhas de música / lista --- */
.rows{display:flex;flex-direction:column;gap:10px;max-width:880px}
.rows.narrow{max-width:760px}
.song-row{display:flex;align-items:center;gap:18px;background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:14px 20px;cursor:pointer;min-height:64px}
.song-row:hover{border-color:var(--border2);background:var(--surface-hover)}
.song-row .titles{flex:1;min-width:0}
.song-row .t{font-family:var(--f-title);font-weight:600;font-size:18px}
/* Qualificador de colisão: presente só quando duas músicas do mesmo artista
   têm o mesmo título. Secundário de propósito — o título continua sendo o
   protagonista da linha. */
.song-row .titles .t .src-qual,.song-line .src-qual{
  font-style:normal; font-weight:500; font-size:.82em;
  color:var(--muted); white-space:nowrap;
}
.song-row .a{color:var(--muted);font-size:13px;margin-top:2px}
.song-row .now{color:var(--teal);font-size:12px;font-weight:600;margin-top:3px}
.row-actions{display:flex;align-items:center;gap:8px}
.eq{display:flex;align-items:flex-end;gap:3px;height:22px;width:24px;flex-shrink:0}
.eq span{width:4px;height:100%;background:var(--teal);border-radius:2px;transform-origin:bottom;animation:eqbar .9s ease-in-out infinite}
.eq span:nth-child(2){animation-delay:.25s}
.eq span:nth-child(3){animation-delay:.5s}
.play-glyph{width:24px;height:24px;display:flex;align-items:center;justify-content:center;color:var(--muted);flex-shrink:0}
.tag-karaoke{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:9px;background:var(--gold-tint);color:var(--gold);border:1px solid var(--gold-soft);flex-shrink:0}

/* --- Aba Músicas: grade compacta (spec 2026-08-12-lista-compacta) --- */
/* O nº de colunas emerge da largura: auto-fill com min(480px,100%) — o min()
   evita coluna mais larga que o viewport no celular. overflow:hidden clipa o
   hairline ::before fantasma da primeira coluna.

   480px é largura de leitura, não de encaixe. Desconte da coluna o play, o
   badge de fonte, os dois botões e os vãos — 248px fixos — e é o que sobra
   para o título que decide se dá para ler o nome da música ou só duas
   palavras. 340px deixavam ~120px; 480px deixam ~230px, e numa coluna que
   sobra (a grade divide o resto entre as colunas) o título passa disso.

   O efeito é que cada quebra pede uma tela maior: a segunda coluna só entra
   com ~1044px de viewport, a terceira com ~1552px, a quarta com ~2060px.
   Um tablet em retrato fica numa coluna só, de propósito. */
.songs-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(480px,100%),1fr));column-gap:28px;overflow:hidden}
.songs-grid .empty{grid-column:1/-1}
.song-line{position:relative;display:flex;align-items:center;gap:10px;min-height:48px;padding:2px 4px;border-bottom:1px solid var(--border);cursor:pointer}
.song-line:hover{background:var(--surface-hover)}
.song-line::before{content:'';position:absolute;top:0;bottom:0;left:-14px;width:1px;background:var(--border)}
.song-line .pg{width:24px;display:flex;align-items:center;justify-content:center;color:var(--muted2);flex-shrink:0}
/* Título tem prioridade de largura (shrink:0 + max-width) — o artista encolhe
   primeiro; os dois truncam com ellipsis. */
.song-line .tt{flex:1;min-width:0;display:flex;align-items:baseline;gap:8px;white-space:nowrap;overflow:hidden}
.song-line .tt .t{font-family:var(--f-title);font-weight:600;font-size:15px;flex-shrink:0;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.song-line .tt .a{color:var(--muted);font-size:13px;min-width:0;overflow:hidden;text-overflow:ellipsis}
.song-line .mic{width:26px;height:26px;border-radius:7px;background:var(--gold-tint);color:var(--gold);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.song-line .ib{width:40px;height:40px;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:transparent;border:none;border-radius:10px;color:var(--muted2);cursor:pointer;padding:0}
.song-line .ib:hover{color:var(--text);background:var(--surface2)}
.song-line .ib.fav{color:var(--accent)}
.src-badge{flex-shrink:0;max-width:96px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:3px 8px;border-radius:6px;font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
/* Uma cor por fonte, a mesma da pílula do filtro: o badge e a faixa não podem
   discordar sobre de que cor é o VJ. O fundo é a própria cor a 14%, que é o que
   as regras .f0–.f4 faziam com os tints dos tokens. */
.src-badge{color:var(--fc);background:color-mix(in srgb, var(--fc) 14%, transparent)}

.list-row{display:flex;align-items:center;gap:16px;background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:16px 18px;cursor:pointer;min-height:68px}
.list-row:hover{border-color:var(--border2);background:var(--surface-hover)}
.list-row.system{background:var(--accent-tint);border-color:var(--accent-soft3)}
.list-icon{width:46px;height:46px;flex-shrink:0;border-radius:12px;display:flex;align-items:center;justify-content:center}
.list-icon.lg{width:52px;height:52px;border-radius:13px}
.list-icon.fav{background:var(--accent-tint2);color:var(--accent)}
.list-icon.pin{background:var(--teal-tint2);color:var(--teal)}
.list-icon.plain{background:var(--surface2);color:var(--muted)}
.badge-system{font-size:11px;font-weight:600;color:var(--muted);background:var(--surface2);border:1px solid var(--border);padding:2px 8px;border-radius:6px;white-space:nowrap}
.pin-ind{color:var(--accent);display:flex}

.listsong-row{display:flex;align-items:center;gap:14px;background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:12px 16px;min-height:66px;touch-action:pan-y}
.pos-num{width:30px;text-align:center;font-family:var(--f-mono);color:var(--muted);font-size:15px}

/* --- Arraste para reordenar --- */
.drag-handle{width:34px;height:44px;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:transparent;border:none;border-radius:8px;color:var(--knob);cursor:grab;touch-action:none}
.drag-handle:hover,.drag-handle:focus-visible{color:var(--text);background:var(--surface2)}
.drag-handle:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.drag-handle:active{cursor:grabbing}
.listsong-row.shifting{transition:transform 160ms ease}
.listsong-row.settling{transition:transform 180ms ease}
.listsong-row.dragging{position:relative;z-index:5;border-color:var(--accent);box-shadow:var(--shadow);opacity:.97;cursor:grabbing}
.rows.dragging-active{user-select:none}
.rows.dragging-active .listsong-row{cursor:grabbing}

/* --- Menus / popovers / modais --- */
.menu-pop{position:absolute;right:0;top:54px;width:248px;background:var(--surface2);border:1px solid var(--border);border-radius:12px;padding:6px;z-index:40;box-shadow:var(--shadow)}
.menu-pop button{width:100%;text-align:left;height:46px;padding:0 12px;border:none;border-radius:9px;background:transparent;color:var(--text);font-size:14px;font-weight:500;cursor:pointer;display:flex;align-items:center;gap:11px}
.menu-pop button:hover{background:var(--surface2-hover)}
.menu-pop button.danger{color:var(--red)}
.menu-pop button.danger:hover{background:var(--red-tint)}
.menu-pop button:disabled{color:var(--muted2);cursor:not-allowed}
.menu-pop .sep{height:1px;background:var(--border);margin:6px 8px}
.menu-pop .state{margin-left:auto;font-size:12px;font-weight:600;color:var(--muted)}
.menu-pop .state.on{color:var(--accent)}
.menu-wrap{position:relative;flex-shrink:0}

.scrim{position:absolute;inset:0;background:var(--scrim);backdrop-filter:blur(2px);display:flex;align-items:center;justify-content:center;z-index:60;animation:fadeScrim .2s ease}
.popover{width:420px;max-width:calc(100vw - 24px);background:var(--surface);border:1px solid var(--border);border-radius:18px;box-shadow:0 20px 60px rgba(0,0,0,.55);overflow:hidden}
.popover .head{padding:20px 22px 14px;border-bottom:1px solid var(--border)}
.popover .head-row{display:flex;align-items:center;justify-content:space-between}
.popover .title{font-family:var(--f-title);font-weight:700;font-size:18px}
.popover .body{max-height:300px;overflow-y:auto;padding:8px}
.popover .foot{display:flex;align-items:center;gap:10px;padding:14px 16px;border-top:1px solid var(--border)}
.check-row{width:100%;display:flex;align-items:center;gap:13px;height:52px;padding:0 12px;background:transparent;border:none;border-radius:11px;cursor:pointer}
.check-row:hover{background:var(--surface2)}
.checkbox{width:26px;height:26px;flex-shrink:0;border-radius:8px;display:flex;align-items:center;justify-content:center;background:transparent;border:1.5px solid var(--border);color:var(--bg)}
.checkbox.on{background:var(--accent);border-color:var(--accent)}
.check-row .nm{flex:1;text-align:left;font-size:15px;font-weight:500;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.check-row .ct{color:var(--muted);font-size:13px}

/* A linha de fonte em Configurações tem DOIS botões (marcar / excluir), então
   ela é um <div> e não um <button> — botão dentro de botão é HTML inválido.
   .check-main repete o layout que a .check-row tinha como botão, e quem usa a
   .check-row como botão (o popover "Adicionar à lista") não muda. */
.check-row.has-del{padding-right:4px}
.check-main{flex:1;min-width:0;display:flex;align-items:center;gap:13px;height:52px;background:transparent;border:none;padding:0;cursor:pointer}
.check-row .del{width:44px;height:44px;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:transparent;border:none;border-radius:11px;color:var(--muted2);cursor:pointer}
.check-row .del:hover{color:var(--red);background:var(--red-tint)}

.input{background:var(--bg);border:1px solid var(--border);border-radius:10px;height:46px;padding:0 14px;color:var(--text);font-size:15px;outline:none}
.input:focus{border-color:var(--accent)}
.input.grow{flex:1;min-width:0}
.input.lg{height:52px;border-radius:12px;padding:0 16px;background:var(--surface);width:100%}

/* --- Tela Cifra --- */
.play-head{display:flex;align-items:center;gap:16px;padding:14px 24px;background:var(--surface);border-bottom:1px solid var(--border);flex-shrink:0}
.play-title{flex:1;min-width:0}
.play-title .t{font-family:var(--f-title);font-weight:700;font-size:20px;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.play-title .sub{display:flex;align-items:center;gap:8px;margin-top:3px;color:var(--muted);font-size:13px}
.tag-tom{display:inline-flex;align-items:center;gap:4px;padding:2px 9px;border-radius:999px;background:var(--accent-tint);color:var(--accent);font-size:12px;font-weight:600;border:none;cursor:pointer;font-family:inherit}
/* Cifra em imagem: a pílula é um <span> sem popover nenhum atrás dela — desfaz
   o cursor de botão que a regra acima dá para todo .tag-tom. */
.tag-tom.static{cursor:default}
.tom-pop{position:fixed;z-index:60;background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:12px;box-shadow:0 12px 32px rgba(0,0,0,.4);display:flex;flex-direction:column;gap:10px}
.tom-pop .nm{font-size:13px;color:var(--muted)}
.tom-pop .nm b{color:var(--accent);font-size:15px}
.tom-pop .guess{color:var(--muted3);cursor:help}
.tom-steps{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.tom-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:6px}
.tom-cell{height:38px;border-radius:9px;border:1px solid transparent;background:var(--surface2);color:var(--text);font-size:13px;font-weight:600;cursor:pointer;font-family:inherit}
.tom-cell.on{background:var(--text);color:var(--bg)}
.tom-cell.orig{border-color:var(--muted2)}
.tom-reset{display:flex;align-items:center;justify-content:center;gap:6px}
.mode-switch{display:flex;background:var(--bg);border:1px solid var(--border);border-radius:12px;padding:3px;gap:3px;flex-shrink:0}
.mode-switch button{height:42px;padding:0 16px;border:none;border-radius:9px;font-size:14px;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:8px;background:transparent;color:var(--text);white-space:nowrap}
.mode-switch button.on{background:var(--accent);color:var(--bg)}
.mode-switch button:disabled{opacity:.35;color:var(--muted);cursor:default}
.zoom-ctl{display:flex;align-items:center;gap:4px;background:var(--bg);border:1px solid var(--border);border-radius:12px;padding:3px;flex-shrink:0;animation:ctlIn .22s ease}
.zoom-ctl button{width:40px;height:40px;display:flex;align-items:center;justify-content:center;background:var(--surface2);border:1px solid var(--border);border-radius:9px;color:var(--text);cursor:pointer;font-size:19px}
.zoom-ctl .pct{min-width:48px;text-align:center;font-family:var(--f-mono);font-size:13px;color:var(--muted)}
/* In the book reader the percentage is a button ("fit page"); on the chart
   screen it is still a plain div, so this only lands where it should. */
.zoom-ctl button.pct{width:auto;height:auto;padding:0 6px;background:transparent;border:0;cursor:pointer}
.zoom-ctl button.pct:hover{color:var(--text)}

.play-body{flex:1;display:flex;overflow:hidden;position:relative}
.cifra-col{flex:1;position:relative;overflow:hidden;display:flex;flex-direction:column;min-width:0}

.pinnedbar{flex-shrink:0;background:var(--deep);border-bottom:1px solid var(--border)}
.pinnedbar .bar{display:flex;align-items:center;gap:8px;padding:9px 16px}
.pinnedbar .lbl{font-family:var(--f-title);font-weight:700;font-size:13px;letter-spacing:.2px}
.pinnedbar .cnt{min-width:20px;height:20px;padding:0 6px;display:flex;align-items:center;justify-content:center;background:var(--accent-tint2);color:var(--accent);border-radius:999px;font-size:11px;font-weight:700}
.pinnedbar .toggle{display:flex;align-items:center;gap:6px;height:32px;padding:0 11px;background:var(--surface2);border:1px solid var(--border);border-radius:9px;color:var(--muted);cursor:pointer;font-size:12px;font-weight:600;margin-left:auto}
.pinnedbar .toggle:hover{color:var(--text)}
.pinnedbar .strip{display:flex;gap:10px;overflow-x:auto;padding:2px 16px 12px}
.chord-mini{flex:none;width:80px;background:var(--surface2);border:1px solid var(--accent-soft);border-radius:12px;padding:8px 6px 6px;display:flex;flex-direction:column;align-items:center;gap:3px}
.chord-mini .nm,.chord-card .nm{text-align:center;align-self:stretch;white-space:nowrap}
.chord-mini .nm span,.chord-card .nm span{font-family:var(--f-title);font-weight:700;font-size:13px;vertical-align:middle}
.chord-card .nm span{font-size:15px}
.star-btn{vertical-align:middle;margin-left:2px;width:22px;height:22px;display:inline-flex;align-items:center;justify-content:center;background:transparent;border:none;cursor:pointer;color:var(--muted2)}
.star-btn:hover{color:var(--accent)}
.star-btn.on{color:var(--accent)}

.cifra-scroll{flex:1;min-height:0;overflow-y:auto;padding:30px 56px 96px}
/* Sem trava de largura: o wrapBlock quebra pela largura REAL desta caixa
   (play.js mede o clientWidth dela), então um max-width fixo aqui decide quantas
   fileiras cada sistema ocupa. Com 720px cabiam ~52 colunas, e um sistema de
   songbook Chediak tem 124-131 — o livro imprime a frase inteira numa linha de
   página cheia. Davam 3 fileiras, a última quase vazia, e a quebra caía no meio
   da frase ("não creia," partido em duas). Deixando a caixa acompanhar a coluna,
   a frase fica na linha o máximo que a tela permitir, que é como o impresso se
   lê. Cifra estreita não muda de aparência: linha curta continua curta.
   Medido em 1175px: 720px -> 52 colunas -> 23 fileiras; 100% -> 79 -> 15. */
.cifra-text{font-family:var(--f-mono);font-size:20px;line-height:1.5;max-width:100%;margin:16px auto 0;overflow-x:auto;font-variant-ligatures:none;font-feature-settings:"liga" 0,"calt" 0}
.cifra-text .sec{color:var(--accent);font-weight:700;margin:20px 0 6px;font-size:15px;letter-spacing:.5px}
.cifra-text .ch{color:var(--accent);font-weight:700;white-space:pre;min-height:6px}
.cifra-text .ly{color:var(--text);white-space:pre;margin-bottom:5px}

/* Tablatura: grade de largura fixa. Nunca quebra e nunca rola — encolhe.
   --cols é a maior largura do bloco em caracteres, escrita pelo render.
   1em é a fonte do zoom (teto); 100cqi/(cols*.6) é a fonte em que cols colunas
   ocupam a largura do container, dado o avanço .6em da monoespaçada.
   O container-type fica aqui e não no .cifra-text de propósito, mas não por
   conter position:fixed: medido em Chrome headless, container-type:inline-size
   sozinho NÃO cria bloco contentor para fixed (filho continua em 10,10, igual
   sem contenção nenhuma) — só contain:layout prende (filho vai para 59,535).
   Além disso .chord-pop é irmão de .cifra-scroll, não descendente do .tabwrap:
   está duplamente fora do alcance. A razão real é escopo: o .tabwrap é o menor
   elemento que fornece o 100cqi de que a conta precisa. Pôr container-type na
   .cifra-text inteira seria instrumento grosso — criaria contexto de
   empilhamento, mexeria em colapso de margem, e envolveria justamente o
   elemento que measureCifraCols() mede para o reflow. O overflow-x é rede de
   segurança para fallback de fonte com avanço diferente de .6em — vira
   rolagem mínima em vez de voltar a quebrar. */
.cifra-text .tabwrap{container-type:inline-size;overflow-x:auto;margin:6px 0}
.cifra-text .tab{white-space:pre;font-size:min(1em,calc(100cqi/(var(--cols) * .6)))}

/* miniaturas inline ("Miniaturas na música") */
.cifra-text .ch-diag-row{position:relative;height:100px;margin:6px 0 2px}
.ch-diag{position:absolute;top:0;display:flex;flex-direction:column;align-items:flex-start;gap:2px;background:none;border:0;padding:0;cursor:pointer}
.ch-diag .nm{font-family:var(--f-title);font-weight:700;font-size:13px;line-height:1;color:var(--accent);white-space:nowrap}
.ch-diag-row .ch-tok{position:absolute;top:0;font-family:var(--f-mono);font-weight:700;font-size:13px;color:var(--accent);white-space:pre}

/* .blk / .blk-hd — same divider-style header, reused by the notes section
   (and, per the plan, by Task 4's editor). Extended on .chords-block's own
   selectors rather than duplicated: .chords-block IS a .blk, it just also has
   the count badge (.hd .n) that's chords-only. */
.chords-block,.blk{max-width:720px;margin:38px auto 0;border-top:1px solid var(--border);padding-top:24px}
.chords-block .hd,.blk-hd{display:flex;align-items:center;gap:9px;margin-bottom:15px}
.chords-block .hd .t,.blk-hd .t{font-family:var(--f-title);font-weight:700;font-size:16px}
.chords-block .hd .n{min-width:22px;height:22px;padding:0 7px;display:flex;align-items:center;justify-content:center;background:var(--surface2);color:var(--muted);border-radius:999px;font-size:12px;font-weight:700}
.chords-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(90px,1fr));gap:12px}
.chord-card{background:var(--surface2);border:1px solid var(--border);border-radius:14px;padding:11px 8px 9px;display:flex;flex-direction:column;align-items:center;gap:5px}
.chord-card.pinned{border-color:var(--accent-soft2)}
.chords-hint{display:flex;align-items:center;gap:7px;color:var(--muted3);font-size:12px;margin-top:14px}

.cifra-imgwrap{flex:1;min-height:0;overflow:auto;background:var(--bg);touch-action:none;cursor:grab}
.cifra-imgwrap.grabbing{cursor:grabbing}
.cifra-imgwrap .inner{display:flex;flex-direction:column;align-items:center;min-width:100%}
.cifra-imgwrap img{display:block;flex:none;width:100%;height:auto;user-select:none;-webkit-user-drag:none}
.cifra-imgwrap img.inverted{filter:invert(1) hue-rotate(180deg)}
.chords-under-img{width:100%;max-width:720px;padding:6px 20px 44px}

.karaoke{display:flex;flex-direction:column;align-items:center;text-align:center;max-width:820px;margin:0 auto;padding:20px 0 40px}
.karaoke .verse{margin-bottom:30px;color:var(--muted);opacity:.45}
.karaoke .verse.cur{color:var(--text);opacity:1}
.karaoke .verse div{font-family:var(--f-title);font-weight:600;font-size:34px;line-height:1.45}

.scroll-ctl{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:6px;background:var(--surface2);border:1px solid var(--border);border-radius:15px;padding:7px;box-shadow:0 8px 26px rgba(0,0,0,.45);z-index:20;transition:opacity .25s ease}
.scroll-ctl.ctl-hidden,.zoom-ctl.ctl-hidden,.songnav-arrow.ctl-hidden{opacity:0;pointer-events:none}
.zoom-ctl{transition:opacity .25s ease}
.scroll-ctl .pp{width:48px;height:48px;display:flex;align-items:center;justify-content:center;background:var(--accent);color:var(--bg);border:none;border-radius:12px;cursor:pointer}
.scroll-ctl .div{width:1px;height:32px;background:var(--border);margin:0 3px}
.scroll-ctl .pm{width:44px;height:44px;display:flex;align-items:center;justify-content:center;background:var(--surface);border:1px solid var(--border);border-radius:11px;color:var(--text);cursor:pointer;font-size:20px}
.scroll-ctl .mid{text-align:center;min-width:108px}
.scroll-ctl .mid .l1{color:var(--muted);font-size:11px;font-weight:500}
.scroll-ctl .mid .l2{font-family:var(--f-title);font-weight:700;font-size:15px}
/* Setas anterior/próxima: mesma altura e mesmo ciclo de aparecer/sumir do
   controle de rolagem, coladas nas laterais da coluna da cifra. O .ctl-hidden
   que as apaga é o mesmo, declarado junto com .scroll-ctl. */
.songnav-arrow{position:absolute;bottom:18px;z-index:20;width:52px;height:52px;display:flex;align-items:center;justify-content:center;background:var(--surface2);border:1px solid var(--border);border-radius:15px;color:var(--text);cursor:pointer;box-shadow:0 8px 26px rgba(0,0,0,.45);transition:opacity .25s ease}
.songnav-arrow.prev{left:14px}
.songnav-arrow.next{right:14px}
/* Desabilitada se marca por cor, NÃO por opacity: `.ctl-hidden` também usa
   opacity e tem a mesma especificidade que `:disabled`, então quem viesse
   depois no arquivo venceria — uma seta desabilitada e escondida reapareceria
   a 45%. Sem opacity aqui, as duas regras não têm o que disputar. */
.songnav-arrow:disabled{color:var(--muted3);background:var(--surface);cursor:default}
.tom-warn{position:absolute;bottom:90px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;background:var(--surface2);border:1px solid var(--border);color:var(--muted);font-size:11px;white-space:nowrap;pointer-events:none;z-index:5}

/* --- Mixer --- */
.mixer{width:380px;flex-shrink:0;background:var(--surface);border-left:1px solid var(--border);display:flex;flex-direction:column}
.mixer .hd{padding:18px 22px 12px;display:flex;align-items:center;gap:10px;border-bottom:1px solid var(--border)}
.mixer .hd .t{font-family:var(--f-title);font-weight:600;font-size:16px}
.mixer .hd .sub{margin-left:auto;color:var(--muted);font-size:12px}
.mixer .hd .collapse{width:34px;height:34px;display:flex;align-items:center;justify-content:center;background:var(--surface2);border:1px solid var(--border);border-radius:9px;color:var(--muted);cursor:pointer;margin-left:4px}
.mixer .hd .collapse:hover{color:var(--text)}
.mixer .body{flex:1;overflow-y:auto;padding:8px 22px}

/* Gaveta de navegação entre músicas (spec 2026-08-17). Sobrepõe a cifra: um
   painel que empurrasse forçaria o reflow do texto a cada abre/fecha. */
.songnav-scrim{position:absolute;inset:0;background:rgba(6,6,8,.5);z-index:48}
.songnav{position:absolute;top:0;right:0;bottom:0;width:min(380px,88vw);z-index:49;background:var(--surface);border-left:1px solid var(--border);display:flex;flex-direction:column;box-shadow:-16px 0 46px rgba(0,0,0,.5)}
/* O slide-in só roda na transição fechado→aberto (classe aplicada por JS em
   afterRenderPlay, do mesmo jeito que .mixer.sheet-enter) — sem isto, um
   re-render qualquer com a gaveta já aberta (áudio carregando, fim da faixa)
   replicaria a animação toda vez que app.innerHTML for reconstruído. */
.songnav.nav-enter{animation:navIn .24s cubic-bezier(.32,.72,0,1)}
@keyframes navIn{from{transform:translateX(100%)}to{transform:translateX(0)}}
.songnav-head{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--border);flex-shrink:0}
.songnav-head .ic{display:flex;color:var(--accent)}
.songnav-head .tt{flex:1;min-width:0}
.songnav-head .tt .k{color:var(--accent);font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase}
.songnav-head .tt .n{font-family:var(--f-title);font-weight:600;font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.songnav-head .pos{color:var(--muted);font-size:12px;flex-shrink:0}
.songnav-body{flex:1;overflow-y:auto;padding:10px;display:flex;flex-direction:column;gap:7px}
.songnav-row{display:flex;align-items:center;gap:12px;padding:11px 13px;background:var(--surface2);border:1px solid var(--border);border-radius:12px;cursor:pointer}
.songnav-row:hover{border-color:var(--muted3)}
.songnav-row.now{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 9%,var(--surface2))}
.songnav-row .num{width:18px;text-align:center;color:var(--muted);font-family:var(--f-mono);font-size:13px;flex-shrink:0}
.songnav-row.now .num{color:var(--accent)}
.songnav-row .tt{flex:1;min-width:0}
.songnav-row .tt .t{font-weight:600;font-size:14.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.songnav-row.now .tt .t{color:var(--accent)}
.songnav-row .tt .m{color:var(--muted);font-size:11.5px;margin-top:2px}
.songnav-row .go{display:flex;color:var(--muted3);flex-shrink:0}
.songnav-row .now-tag{display:flex;align-items:center;gap:5px;color:var(--accent);font-size:11.5px;font-weight:600;flex-shrink:0}
.songnav-row .now-tag .dot{width:6px;height:6px;border-radius:50%;background:var(--accent)}
.songnav-empty{color:var(--muted);font-size:13px;text-align:center;padding:28px 12px}
.mixer-scrim{display:none}
.sheet-handle{display:none;justify-content:center;padding:10px 0 2px;flex-shrink:0}
.sheet-handle div{width:40px;height:5px;border-radius:999px;background:var(--knob)}
.stems-hd{display:flex;align-items:center;gap:8px;padding:10px 0 4px}
.stems-hd .lbl{font-size:12px;font-weight:700;letter-spacing:.4px;color:var(--muted)}
.stems-hd .lbl.on{color:var(--teal)}
.live-dot{width:7px;height:7px;border-radius:50%;background:var(--teal);animation:softpulse 1.4s ease-in-out infinite;display:inline-block}
.live-lbl{color:var(--teal);font-size:11px;font-weight:600}
.use-stems{margin-left:auto;height:30px;padding:0 12px;background:var(--teal-tint);border:1px solid var(--teal-soft);border-radius:8px;color:var(--teal);font-size:12px;font-weight:600;cursor:pointer}
.stems-list.dim{opacity:.62}
.channel{padding:15px 0;border-bottom:1px solid var(--surface2)}
.channel .row1{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.mute-btn{width:40px;height:40px;flex-shrink:0;display:flex;align-items:center;justify-content:center;border-radius:11px;cursor:pointer;background:var(--surface);border:1px solid var(--border);color:var(--muted)}
.mute-btn.muted{background:var(--red-tint);border-color:var(--red-soft);color:var(--red)}
.channel .nm{font-weight:600;font-size:15px}
.channel .nm.dim{color:var(--muted)}
.channel .st-on{display:flex;align-items:center;gap:5px;margin-top:2px}
.channel .st-mute{color:var(--red);font-size:11px;font-weight:600;margin-top:2px}
.channel .val{font-family:var(--f-mono);font-size:14px;width:42px;text-align:right;color:var(--teal)}
.channel .val.muted{color:var(--red)}
.fullver{padding:16px 0 4px}
.fullver.after-stems{margin-top:6px;border-top:1px solid var(--border)}
.fullver .hd2{display:flex;align-items:center;gap:9px;margin-bottom:12px}
.fullver .hd2 .t{font-family:var(--f-title);font-weight:600;font-size:15px}
.fullver .hd2 .s{margin-left:auto;color:var(--muted);font-size:11px}
.ver-row{display:flex;align-items:center;gap:12px;background:var(--surface2);border:1px solid var(--border);border-radius:12px;padding:11px 13px;cursor:pointer;min-height:56px;margin-bottom:8px}
.ver-row:hover{border-color:var(--border2)}
.ver-row.on{background:var(--accent-tint);border-color:var(--accent-soft2)}
.ver-row .ic{width:38px;height:38px;flex-shrink:0;border-radius:10px;display:flex;align-items:center;justify-content:center;background:var(--accent-tint2);color:var(--accent)}
.ver-row.on .ic{background:var(--accent);color:var(--bg)}
.ver-row .meta{flex:1;min-width:0}
.ver-row .meta .n{font-weight:600;font-size:14px}
.ver-row .meta .m{color:var(--muted);font-size:12px;margin-top:1px}
.amber-live .live-dot{background:var(--accent)}
.amber-live .live-lbl{color:var(--accent)}

/* --- Transporte --- */
.transport{background:var(--deep);border-top:1px solid var(--border);padding:16px 28px;display:flex;align-items:center;gap:20px;flex-shrink:0}
.btn-play-round{width:64px;height:64px;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:var(--accent);color:var(--bg);border:none;border-radius:50%;cursor:pointer;box-shadow:0 4px 16px rgba(232,162,61,.3)}
.btn-play-round:hover{background:var(--accent-hover)}
.t-pos{font-family:var(--f-mono);font-size:15px;color:var(--text);width:46px}
.t-dur{font-family:var(--f-mono);font-size:15px;color:var(--muted);width:46px}
.transport input[type=range]{flex:1;width:auto;min-width:0}
.t-vol input[type=range]{flex:1;width:auto;min-width:0}
.t-vdiv{width:1px;height:38px;background:var(--border)}
.t-vol{display:flex;align-items:center;gap:12px;width:200px}

/* --- Formulário Adicionar/Editar --- */
.form-wrap{max-width:880px;margin:0 auto;display:flex;flex-direction:column;gap:20px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field label{display:block;color:var(--muted);font-size:13px;font-weight:600;margin-bottom:8px}
.select-like{display:flex;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--border);border-radius:12px;height:52px;padding:0 16px;cursor:pointer}
.select-like:hover{border-color:var(--border2)}
.select-like.open{border-color:var(--accent)}
.select-like .val{flex:1;font-size:15px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.select-like .val.placeholder{color:var(--muted)}
.dropdown{position:absolute;left:0;right:0;top:60px;background:var(--surface2);border:1px solid var(--border);border-radius:14px;z-index:40;box-shadow:0 16px 40px rgba(0,0,0,.55);overflow:hidden}
.dropdown .search{padding:10px;border-bottom:1px solid var(--border)}
.dropdown .searchin{display:flex;align-items:center;gap:9px;background:var(--bg);border:1px solid var(--border);border-radius:10px;height:44px;padding:0 12px}
.dropdown .searchin input{flex:1;background:transparent;border:none;outline:none;color:var(--text);font-size:14px;min-width:0}
.dropdown .opts{max-height:236px;overflow-y:auto;padding:6px}
.dd-row{display:flex;align-items:center;gap:12px;padding:9px 10px;border-radius:10px;cursor:pointer}
.dd-row:hover{background:var(--surface2-hover)}
.dd-row.sel{background:var(--accent-tint)}
.dd-row .nm{font-family:var(--f-title);font-weight:600;font-size:15px}
.dd-row .ct{color:var(--muted);font-size:12px;margin-top:2px}
.dd-create{display:flex;align-items:center;gap:11px;padding:13px 14px;border-top:1px solid var(--border);cursor:pointer;color:var(--accent)}
.dd-create:hover{background:var(--surface2-hover)}
.dd-create span{font-size:14px;font-weight:600}
.card-section{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:20px}
.card-section .hd{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.card-section .hd .t{font-family:var(--f-title);font-weight:600;font-size:16px}
.card-section .hd .s{margin-left:auto;color:var(--muted);font-size:12px}
.dropzone{border:1.5px dashed var(--border);border-radius:12px;padding:24px;display:flex;flex-direction:column;align-items:center;gap:8px;color:var(--muted);cursor:pointer;text-align:center}
.dropzone:hover{border-color:var(--border2)}
.dropzone .l1{font-size:14px}
.dropzone .l1 em{color:var(--accent);font-weight:600;font-style:normal}
.dropzone .l2{font-size:12px}
.textarea{width:100%;background:var(--bg);border:1px solid var(--border);border-radius:12px;padding:14px;color:var(--text);font-size:14px;outline:none;resize:vertical;min-height:96px}
.textarea:focus{border-color:var(--accent)}
.textarea.mono{font-family:var(--f-mono);font-size:13px;min-height:180px}
.stem-row,.imgitem-row{display:flex;align-items:center;gap:12px;background:var(--surface2);border:1px solid var(--border);border-radius:12px;padding:12px 14px;margin-bottom:10px;flex-wrap:wrap}
.stem-row input[type=text]{flex:1;background:var(--bg);border:1px solid var(--border);border-radius:9px;height:40px;padding:0 12px;color:var(--text);font-size:14px;outline:none;min-width:120px}
.file-name{font-family:var(--f-mono);color:var(--muted);font-size:13px;max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.btn-del{width:38px;height:38px;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:var(--surface);border:1px solid var(--border);border-radius:9px;color:var(--red);cursor:pointer}
.add-slot{display:flex;align-items:center;gap:8px;background:transparent;border:1.5px dashed var(--border);border-radius:11px;height:46px;width:100%;justify-content:center;color:var(--teal);font-size:14px;font-weight:600;cursor:pointer}
.add-slot.amber{color:var(--accent)}
.seg-mini{display:flex;background:var(--bg);border:1px solid var(--border);border-radius:11px;padding:4px;gap:4px}
.seg-mini button{height:38px;padding:0 18px;border:none;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;background:transparent;color:var(--muted)}
.seg-mini button.on{background:var(--accent);color:var(--bg)}
.foot-actions{border-top:1px solid var(--border);background:var(--deep);padding:16px 28px;display:flex;justify-content:flex-end;gap:12px;flex-shrink:0}
.btn-save{height:50px;padding:0 24px;background:var(--accent);border:none;border-radius:12px;color:var(--bg);font-size:15px;font-weight:700;cursor:pointer;font-family:var(--f-title);display:flex;align-items:center;gap:9px}
.btn-save:hover{background:var(--accent-hover)}
.thumb{width:52px;height:52px;border-radius:8px;object-fit:cover;border:1px solid var(--border);background:var(--bg)}

/* --- Configurações --- */
.settings-wrap{max-width:760px;margin:0 auto;display:flex;flex-direction:column;gap:14px}
.setting-row{display:flex;align-items:center;gap:16px;background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:18px 20px}
.setting-row.link{cursor:pointer;text-align:left;width:100%}
.setting-row.link:hover{border-color:var(--border2);background:var(--surface-hover)}
.setting-row.dim{background:var(--deep);opacity:.6}
.setting-row .info{flex:1;min-width:0}
.setting-row .info .t{font-weight:600;font-size:16px}
.setting-row .info .t.title{font-family:var(--f-title)}
.setting-row .info .s{color:var(--muted);font-size:13px;margin-top:2px}
.setting-block{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:18px 20px}
.setting-block .hd{display:flex;justify-content:space-between;margin-bottom:14px}
.setting-block .hd .t{font-weight:600;font-size:16px}
.setting-block .hd .v{font-family:var(--f-mono);color:var(--accent);font-size:15px}
.setting-block input[type=range]{width:100%}
.toggle-sw{width:56px;height:32px;border-radius:999px;border:none;cursor:pointer;position:relative;background:var(--surface2-hover);flex-shrink:0}
.toggle-sw.on{background:var(--accent)}
.toggle-sw span{position:absolute;top:3px;left:3px;width:26px;height:26px;border-radius:50%;background:#fff;transition:left .18s}
.toggle-sw.on span{left:27px}
.storage-bar{height:12px;border-radius:8px;background:var(--bg);overflow:hidden;margin-bottom:18px}
.storage-bar div{height:100%;background:linear-gradient(90deg,var(--teal),var(--green));border-radius:8px;min-width:2px}

/* --- Ordenar dropdown --- */
.sort-wrap{position:relative}
.sort-btn{height:40px;padding:0 15px;border-radius:10px;font-size:14px;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:9px;background:var(--surface2);border:1px solid var(--border);color:var(--text)}
.sort-menu{position:absolute;right:0;top:48px;width:236px;background:var(--surface2);border:1px solid var(--border);border-radius:12px;padding:6px;z-index:30;box-shadow:var(--shadow)}
.sort-menu button{width:100%;text-align:left;height:44px;padding:0 14px;border:none;border-radius:9px;background:transparent;color:var(--text);font-size:14px;font-weight:500;cursor:pointer;display:flex;align-items:center;justify-content:space-between}
.sort-menu button.on{background:var(--accent-tint);color:var(--accent);font-weight:700}

.creating-bar{display:flex;align-items:center;gap:10px;max-width:760px;background:var(--surface);border:1px solid var(--accent);border-radius:14px;padding:12px 14px;margin-bottom:14px}
.lists-head{display:flex;align-items:center;justify-content:space-between;max-width:760px;margin-bottom:18px}
.lists-head .t{font-family:var(--f-title);font-weight:600;font-size:18px}
.lists-head .s{color:var(--muted);font-size:13px;margin-top:3px}

.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:var(--surface2);color:var(--text);border:1px solid var(--border);border-radius:12px;padding:12px 20px;font-size:14px;font-weight:500;z-index:100;box-shadow:var(--shadow);max-width:calc(100vw - 40px)}

.songs-toolbar{display:flex;align-items:center;gap:10px;margin-bottom:16px}
.count-lbl{color:var(--muted);font-size:13px;margin-bottom:14px}

/* ============ Responsivo (tablet / celular) ============ */
/* O subtítulo "N artistas na biblioteca" some cedo: é o que libera espaço para a
   faixa antes de ela precisar descer de linha. */
@media (max-width:1280px){ .tabsub{display:none} }
/* Abaixo daqui a faixa desce para uma segunda linha da própria .tabrow, em vez
   de espremer as abas. A .lens fica na primeira linha, onde já cabe sem o .tabsub. */
@media (max-width:1180px){
  .tabrow{flex-wrap:wrap}
  .fonte-strip{flex-basis:100%;order:5}
}

@media (max-width:900px){
  .badge-offline{display:none}
  .topbar{padding-left:14px;padding-right:14px}
  .topbar.home{flex-wrap:wrap;padding:12px 14px;gap:10px;row-gap:10px}
  .topbar.home .searchbox{order:5;flex-basis:100%;max-width:none}
  .tabrow{flex-wrap:wrap;padding:11px 14px;row-gap:10px;column-gap:10px}
  .segtab{flex:1 1 100%;overflow-x:auto;scrollbar-width:none}
  .lens{margin-left:0;flex:1 1 100%;justify-content:flex-start;order:6}
  .content-scroll{padding-left:14px;padding-right:14px}
  .play-head{padding-left:14px;padding-right:14px;gap:10px}
  .cifra-scroll{padding:20px 16px 96px}
  .play-body{position:relative}
  .mixer{position:absolute;top:auto;left:0;right:0;bottom:0;width:auto;height:76%;z-index:46;border-left:none;border-top:1px solid var(--border);border-radius:22px 22px 0 0;box-shadow:0 -16px 46px rgba(0,0,0,.6);overflow:hidden}
  .mixer.sheet-enter{animation:sheetUp .3s cubic-bezier(.32,.72,0,1)}
  .mixer-scrim{display:block;position:absolute;inset:0;background:rgba(6,6,8,.45);z-index:45}
  .sheet-handle{display:flex}
  .transport{flex-wrap:wrap;padding:12px 14px;gap:12px 14px}
  .t-vol,.t-vdiv{display:none}
  .form-grid{grid-template-columns:1fr}
  .foot-actions{padding:12px 14px}
}
@media (max-width:480px){
  .topbar.home{padding:11px 12px;gap:8px}
  .tabrow{padding:10px 12px}
  .segtab button{padding:0 12px;font-size:14px;height:40px}
  /* Só no celular a coluna encolhe: com 200px o retrato estreito cairia para
     uma coluna só, que é justamente o que esta grade veio resolver. */
  .artist-grid{grid-template-columns:repeat(auto-fill,minmax(min(150px,100%),1fr));gap:8px}
  .content-scroll{padding-left:12px;padding-right:12px;padding-bottom:90px}
  .play-head{padding:10px 12px;gap:8px}
  .karaoke .verse div{font-size:26px}
}
/* Abaixo de ~423px de coluna a seta encosta no controle de rolagem (291px,
   centralizado, contra 66px de borda que cada seta reivindica) — e a seta ganha
   o toque, porque vem depois no DOM com o mesmo z-index. Encolher o controle
   custaria a legibilidade do rótulo de velocidade na estante, então quem sobe
   é a seta. */
@media (max-width:520px){
  .songnav-arrow{width:44px;height:44px;bottom:80px}
}

/* ---- editor de casas (add/edit) ---- */
.digchips{display:flex;flex-wrap:wrap;gap:10px}
.digchip{display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 8px 6px;background:var(--surface2);border:1px solid var(--border);border-radius:12px;cursor:pointer;color:var(--text)}
.digchip.on{border-color:var(--accent)}
.digchip.set .dnm{color:var(--accent)}
.digchip .dnm{font-family:var(--f-title);font-weight:600;font-size:13px}
.chord-editor{margin-top:14px;padding:14px;background:var(--bg);border:1px solid var(--border);border-radius:14px}
.ce-hd{display:flex;align-items:center;gap:10px;margin-bottom:12px;font-size:14px}
.fgrid{display:flex;flex-direction:column;gap:5px;align-items:flex-start}
.frow{display:flex;align-items:center;gap:8px}
.fcells{position:relative;display:flex;gap:8px}
.fstr{width:34px;text-align:center;font-size:11px;color:var(--muted);font-family:var(--f-mono)}
.fnum{width:24px;text-align:right;font-size:11px;color:var(--muted)}
.fbarre{width:26px;height:26px;border:1px solid var(--border2);border-radius:7px;background:var(--surface);color:var(--muted);cursor:pointer;font-size:14px;line-height:1;padding:0}
.fbarre.on{background:var(--accent);border-color:var(--accent);color:var(--bg)}
.fbarre-pad{width:26px}
.fbar{position:absolute;top:3px;height:24px;border-radius:12px;background:var(--accent);pointer-events:none}
.fcell{width:34px;height:30px;border:1px solid var(--border2);border-radius:7px;background:var(--surface);color:var(--muted);cursor:pointer;font-size:13px}
.fcell.head{background:transparent;border-style:dashed}
.fcell.head.x{color:var(--red)}
.fcell.head.o{color:var(--muted)}
.fcell.on{background:var(--accent);border-color:var(--accent);color:var(--bg)}
.fcell.lock{opacity:.3;cursor:default}
.ce-base{display:flex;align-items:center;gap:6px;color:var(--muted);font-size:12px}
.ce-meta{margin-top:10px;color:var(--muted);font-size:12px}
.ce-foot{display:flex;gap:10px;align-items:center;margin-top:12px;flex-wrap:wrap}
.ce-foot .input{flex:1;min-width:140px}
.btn-save.sm{height:40px;padding:0 16px;font-size:14px}
.shape-strip{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
.btn-ghost.sm{height:32px;padding:0 12px;font-size:12px}

/* ---- seletor de variação (Tela Cifra) ---- */
.chord-diag{background:none;border:none;padding:0;cursor:pointer;display:block}
.pick-opt{display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 6px;background:var(--surface2);border:1px solid var(--border);border-radius:12px;cursor:pointer;color:var(--text)}
.pick-opt.sel{border-color:var(--accent)}
.pick-opt .lbl{font-size:11px;color:var(--muted)}

/* ---- cabeçalho de identidade da música (no corpo, rola junto) ---- */
.song-id{padding:2px 2px 16px}
.song-id .ttl{font-family:var(--f-title);font-weight:700;font-size:26px;line-height:1.12;color:var(--accent);text-wrap:balance}
.song-id .art{font-family:var(--f-title);font-weight:600;font-size:16px;color:var(--accent);opacity:.8;margin-top:3px}
.song-id .meta{display:flex;align-items:center;gap:9px;margin-top:9px;color:var(--muted);font-size:13px}
.song-id .meta .src{color:var(--muted)}
.song-id .meta .mdot{color:var(--muted3)}
.chip-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.chip-row .input{flex:1 1 200px}
.btn-ghost.sm.on{background:var(--accent);border-color:var(--accent);color:var(--bg)}
@media (max-width:640px){
  .song-id .ttl{font-size:22px}
  .song-id .art{font-size:15px}
}

/* ---- dicionário de acordes ---- */
.cb-wrap{max-width:900px;margin:0 auto}
.cb-bar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:14px}
/* .searchin fora do .dropdown (busca de artista) precisa da própria caixa —
   mesmos valores de .dropdown .searchin/input (app.css:345-346), só sem o
   escopo ao ancestral que essa tela não tem */
.cb-bar .searchin{display:flex;align-items:center;gap:9px;flex:1;min-width:180px;background:var(--bg);border:1px solid var(--border);border-radius:10px;height:44px;padding:0 12px}
.cb-bar .searchin input{flex:1;min-width:0;background:transparent;border:none;outline:none;color:var(--text);font-size:14px}
.cb-group{font-family:var(--f-title);font-weight:700;font-size:13px;color:var(--muted);margin:16px 0 6px;letter-spacing:.04em}
.cb-row{display:flex;gap:14px;align-items:flex-start;background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:12px 14px;margin-bottom:8px}
.cb-row.on{border-color:var(--accent)}
.cb-name{font-family:var(--f-title);font-weight:700;font-size:15px;min-width:84px;padding-top:22px}
.cb-body{flex:1;min-width:0}
.cb-vars{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-start}
.cb-var{display:flex;flex-direction:column;align-items:center;gap:3px}
.cb-var.on .pick-opt{border-color:var(--accent)}
.cb-uso{font-size:10px;color:var(--muted3)}
.cb-plus{width:64px;height:80px;border:1px dashed var(--border2);border-radius:12px;background:transparent;color:var(--muted);cursor:pointer;display:flex;align-items:center;justify-content:center}
.cb-plus:hover{border-color:var(--accent);color:var(--accent)}
.cb-actions{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}

/* --- Popover do acorde na cifra (spec 2026-07-29) --- */
.ch-btn{font:inherit;color:inherit;background:none;border:0;padding:0;margin:0;cursor:pointer;white-space:pre}
.chord-pop{position:fixed;z-index:70;display:flex;flex-direction:column;align-items:center;gap:8px;padding:14px 16px;background:var(--surface);border:1px solid var(--border);border-radius:16px;box-shadow:0 16px 48px rgba(0,0,0,.5)}
.chord-pop .nm{font-family:var(--f-title);font-weight:700;font-size:15px;color:var(--accent)}
.chord-pop .dots{display:flex;gap:5px}
.chord-pop .dot{width:7px;height:7px;border-radius:50%;background:var(--muted3)}
.chord-pop .dot.on{background:var(--accent)}
.chord-pop .variar{width:100%}
.chord-pop .variar:disabled{opacity:.45;cursor:default}
.chord-pop .hint{font-size:12px;color:var(--muted);max-width:170px;text-align:center}
.chord-pop.car{align-items:stretch}
.chord-pop.car .strip-wrap{overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
.chord-pop.car .strip-wrap .shape-strip{flex-wrap:nowrap;width:max-content;margin-top:0}
.chord-pop.car .strip-wrap .pick-opt{scroll-snap-align:center}
.chord-pop.car .foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:2px}
.btn-ghost.sm.danger{color:var(--red)}

/* Folha de compartilhar — backdrop + painel ancorado embaixo, que é onde o
   polegar chega num tablet na estante. */
.sheet-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:60;display:flex;align-items:flex-end;justify-content:center}
.sheet{background:var(--surface);border:1px solid var(--border);border-radius:16px 16px 0 0;padding:20px;width:100%;max-width:520px;max-height:80vh;overflow-y:auto}
@media (min-width:560px){.sheet-backdrop{align-items:center}.sheet{border-radius:16px}}
/* A .check-row foi feita para UMA linha: 52px fixos, nowrap e ellipsis. A folha
   põe um rótulo de duas linhas dentro dela, e num telefone de 360px o subtítulo
   era cortado no meio da frase — "Cabe no WhatsApp. O áudio pode ir dep…" —
   justamente na tela onde a frase é a explicação da escolha. Aqui a linha cresce
   e o texto quebra. Escopado na .sheet de propósito: o popover "Adicionar à
   lista" e as linhas de fonte em Configurações dependem da .check-row como está,
   onde truncar um nome comprido em uma linha é o comportamento certo. */
.sheet .check-row{height:auto;min-height:52px;padding:9px 12px}
.sheet .check-row .nm{white-space:normal;overflow:visible;text-overflow:clip}

/* --- Anotações da música --- */
.notas .sp{flex:1}
.notas-vazia{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.notas-vazia .txt{color:var(--muted);font-size:14px;line-height:1.55;max-width:400px}
.notas-saved{display:flex;align-items:center;gap:5px;color:var(--muted2);font-size:12px;font-weight:600}
.notas-body{font-size:16px;line-height:1.7;color:var(--text)}
.notas-body p{margin:0 0 14px}
.notas-body h3{font-family:var(--f-title);font-weight:600;font-size:16px;margin:20px 0 8px}
.notas-body ol,.notas-body ul{margin:0 0 14px;padding-left:22px}
.notas-body li{margin-bottom:5px}
.notas-body mark{background:var(--accent-tint2);color:var(--accent);padding:1px 4px;border-radius:4px}
.notas-body blockquote{border-left:2px solid var(--accent-soft);padding-left:14px;margin:0 0 14px;color:var(--muted)}
.notas-body pre{font-family:var(--f-mono);font-size:14px;line-height:1.65;background:var(--deep);border:1px solid var(--border);border-radius:10px;padding:14px 16px;margin:0 0 14px;overflow-x:auto;white-space:pre;color:var(--text)}
.notas-body a{color:var(--accent);text-decoration:underline;text-underline-offset:2px}
.notas-body > :last-child{margin-bottom:0}

.notas-edit{background:var(--bg);border:1px solid var(--accent-soft3);border-radius:12px;padding:16px 18px;min-height:180px;outline:none}
.notas-edit:focus{border-color:var(--accent-soft2)}
.notas-tb{position:sticky;bottom:0;z-index:15;display:flex;justify-content:center;padding:10px 0 12px;background:linear-gradient(to top,var(--bg) 72%,transparent)}
.notas-tb .tb{display:flex;align-items:center;gap:3px;background:var(--surface2);border:1px solid var(--border);border-radius:12px;padding:5px;box-shadow:var(--shadow)}
.notas-tb .tb button{width:44px;height:44px;display:flex;align-items:center;justify-content:center;background:transparent;border:none;border-radius:9px;color:var(--text);cursor:pointer}
.notas-tb .tb button:hover{background:var(--surface2-hover)}
.notas-tb .tb .sep{width:1px;height:24px;background:var(--border2);margin:0 5px;flex-shrink:0}
.notas-tb .tb .mais{display:none}
@media (max-width:700px){
  .notas-tb .tb .opt{display:none}
  .notas-tb .tb .mais{display:flex}
  /* "mais" alterna esta classe via JS direto no DOM (ligaEditor), sem passar
     por S/update() — reabrir os cinco controles não pode re-renderizar e
     matar o contenteditable. */
  .notas-tb .tb.aberto .opt{display:flex}
}
.notas-toast{position:fixed;left:50%;transform:translateX(-50%);bottom:22px;z-index:70;display:flex;align-items:center;gap:12px;background:var(--surface2);border:1px solid var(--border);border-radius:12px;padding:11px 12px 11px 15px;box-shadow:var(--shadow)}
.notas-toast .msg{color:var(--muted);font-size:13px}
.notas-toast .div{width:1px;height:20px;background:var(--border2)}
.notas-toast button{background:none;border:none;color:var(--accent);font-size:13px;font-weight:600;font-family:inherit;cursor:pointer}
/* ---------- Livros ---------- */
.books-head{display:flex;align-items:center;gap:14px;padding:8px 4px 18px}
.books-head .t{font-size:19px;font-weight:700}
.books-head .s{color:var(--muted);font-size:13px}
.books-head .btn-primary{margin-left:auto}
.book-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:18px}
.book-card{cursor:pointer;display:flex;flex-direction:column;gap:8px}
.book-cover-wrap{aspect-ratio:1/1.414;background:var(--surface);border:1px solid var(--border);
  border-radius:10px;overflow:hidden;display:flex;align-items:center;justify-content:center}
.book-cover{width:100%;height:100%;object-fit:cover;display:block}
.book-cover.ph{color:var(--muted);width:auto;height:auto}
.book-card .nm{font-weight:600;font-size:14px;line-height:1.3}
.book-card .ct{color:var(--muted);font-size:12px}
.book-draft{display:flex;gap:18px;align-items:flex-start}
.book-draft .book-cover{width:130px;height:auto;border-radius:8px;border:1px solid var(--border)}
.book-draft-fields{flex:1;min-width:0;display:flex;flex-direction:column;gap:12px}
.foot-inline{display:flex;gap:10px;justify-content:flex-end}

/* ---------- Tela do livro ---------- */
.book-screen{display:flex;flex-direction:column;height:100%}
.book-rename{display:flex;gap:10px;align-items:center;padding:12px 16px;border-bottom:1px solid var(--border)}
.book-rename .input{flex:1;min-width:0}
/* .book-page-wrap is the NON-scrolling positioning context (mirrors .cifra-col
   for the chart screen's floating controls): .book-page itself scrolls, so an
   absolutely-positioned child of .book-page would scroll away with the page
   the moment the reader pans while zoomed in — exactly where a "render
   failed" message must not be able to hide. */
.book-page-wrap{flex:1;position:relative;overflow:hidden;display:flex;flex-direction:column}
.book-page{flex:1;min-height:0;overflow:auto;touch-action:none;background:var(--bg);cursor:grab}
.book-page.grabbing{cursor:grabbing}
/* margin:auto on the canvas, not justify/align-content on .inner: an auto
   margin centres the page while it fits and collapses to zero when it does
   not, which is what keeps the left and top edges reachable by scrolling once
   the reader zooms past the viewport. Centring the flex line instead put the
   overflow on BOTH sides and made the left edge unreachable. */
.book-page .inner{min-height:100%;display:flex;padding:10px}
.book-page canvas{display:block;margin:auto;background:#fff;border-radius:4px;box-shadow:0 2px 14px rgba(0,0,0,.35)}
.book-status{position:absolute;top:10px;left:50%;transform:translateX(-50%);
  background:var(--surface);border:1px solid var(--border);color:var(--muted);
  font-size:12px;padding:6px 12px;border-radius:20px;pointer-events:none;
  box-shadow:0 2px 10px rgba(0,0,0,.25);z-index:2}
.book-status[hidden]{display:none}
.book-hud{display:flex;align-items:center;gap:14px;justify-content:center;
  padding:10px 16px;border-top:1px solid var(--border);background:var(--surface)}
.book-hud button{background:transparent;border:1px solid var(--border);color:inherit;
  border-radius:8px;min-width:44px;height:40px;font-size:18px}
.book-hud button[disabled]{opacity:.35}
.book-hud .pg{min-width:110px;text-align:center;color:var(--muted);font-size:13px}

.book-grid-overlay{position:fixed;inset:0;z-index:60;background:var(--bg);display:flex;flex-direction:column}
.book-grid-overlay .hd{display:flex;align-items:center;gap:16px;padding:14px 18px;border-bottom:1px solid var(--border)}
.book-grid-overlay .hd .t{font-size:17px;font-weight:700}
.book-grid-overlay .goto{margin-left:auto;display:flex;align-items:center;gap:8px;color:var(--muted);font-size:13px}
.book-grid-overlay .goto input{width:90px;height:38px;border-radius:8px;border:1px solid var(--border);
  background:var(--surface);color:inherit;padding:0 10px;font:inherit}
.book-grid-overlay .minis{flex:1;overflow:auto;padding:18px;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:14px}
.mini{background:transparent;border:0;padding:0;cursor:pointer;display:flex;flex-direction:column;gap:6px;align-items:center}
.mini img,.mini .ph{width:100%;aspect-ratio:1/1.414;object-fit:cover;background:var(--surface);
  border:1px solid var(--border);border-radius:6px;display:block}
.mini.on img,.mini.on .ph{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent)}
.mini .n{color:var(--muted);font-size:12px}

/* --- Tela de boas-vindas (primeira visita) --- */
.wc{padding:34px 40px 48px;display:flex;flex-direction:column;gap:30px}
.wc-hero{display:flex;gap:34px;align-items:flex-start}
.wc-hero-txt{flex:1;min-width:0}
.wc-title{font-family:var(--f-title);font-weight:700;font-size:44px;line-height:1.08;letter-spacing:-1px;margin-bottom:14px}
.wc-sub{color:var(--muted);font-size:17px;line-height:1.5;max-width:620px;margin-bottom:22px}
.wc-actions{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:16px}
.wc-demo{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.wc-demo-lead{color:var(--text);font-size:15px}
.wc-demo-btn{border-color:var(--accent-soft3);color:var(--accent)}
.wc-demo-sub,.wc-demo-dl{color:var(--muted);font-size:13px}
.wc-demo-dl{display:inline-flex;align-items:center;min-height:44px;color:var(--accent);text-decoration:underline}
.wc-offline{margin-top:12px;color:var(--muted);font-size:13px}

.wc-preview{width:390px;flex-shrink:0;background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:16px}
.wc-preview-hd{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--muted);margin-bottom:12px}
.wc-preview-nm{color:var(--text);font-weight:600}
.wc-preview-body{display:flex;gap:14px;align-items:flex-start}
.wc-preview-diag{display:flex;flex-direction:column;align-items:center;gap:4px;width:96px;flex-shrink:0}
.wc-preview-hint{color:var(--muted3);font-size:11px;text-align:center;line-height:1.35}
.wc-chart{font-family:var(--f-mono);font-size:13px;line-height:1.5;white-space:pre;overflow-x:auto;flex:1;min-width:0;font-variant-ligatures:none}
.wc-ch{color:var(--accent)}

.wc-badge{display:inline-flex;align-items:center;justify-content:center;min-width:30px;height:22px;padding:0 7px;border-radius:999px;font-size:11px;font-weight:700}
.wc-badge.t1{background:var(--accent-tint2);color:var(--accent)}
.wc-badge.t2{background:var(--teal-tint2);color:var(--teal)}
.wc-badge.t3{background:var(--gold-tint);color:var(--gold)}

.wc-cards,.wc-modes{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.wc-card{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:18px 20px}
.wc-card-t{display:flex;align-items:center;gap:9px;font-family:var(--f-title);font-weight:600;font-size:17px;color:var(--accent);margin-bottom:8px}
.wc-card-s{color:var(--muted);font-size:14px;line-height:1.55}
.wc-card-later{color:var(--muted3);font-size:13px;margin-top:12px}
.wc-modes-t{font-family:var(--f-title);font-weight:600;font-size:18px}
.wc-mode{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:16px 18px;display:flex;gap:14px;align-items:flex-start}
.wc-mode-txt{flex:1;min-width:0}
.wc-mode-t{display:flex;align-items:center;gap:8px;font-family:var(--f-title);font-weight:600;font-size:15px;margin-bottom:6px}
.wc-mode-s{color:var(--muted);font-size:13px;line-height:1.5}
.wc-mode-chart{flex:1;min-width:0}
.wc-mixer{width:140px;flex-shrink:0;display:flex;flex-direction:column;gap:8px}
.wc-fader{display:flex;flex-direction:column;gap:3px}
.wc-fader-nm{color:var(--muted);font-size:11px}
.wc-fader-track{height:6px;border-radius:6px;background:var(--border);display:block}
.wc-fader-fill{display:block;height:100%;border-radius:6px;background:var(--teal)}
.wc-karaoke{width:170px;flex-shrink:0;font-size:13px;line-height:1.5}
.wc-kline{color:var(--muted3)}
.wc-kline.on{color:var(--gold);font-weight:600}

.wc-trust{display:flex;flex-wrap:wrap;align-items:center;gap:14px;background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:14px 18px}
.wc-trust-txt{display:flex;align-items:center;gap:9px;color:var(--muted);font-size:14px;flex:1;min-width:240px}

.wc-guia{display:flex;flex-wrap:wrap;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--accent-soft3);border-radius:14px;padding:14px 16px;margin-bottom:16px}
.wc-guia-txt{flex:1;min-width:240px}
.wc-guia-t{font-family:var(--f-title);font-weight:600;font-size:16px;margin-bottom:3px}
.wc-guia-s{color:var(--muted);font-size:13px;line-height:1.5}

/* .btn-ghost não separa ícone e rótulo (só .btn-primary faz isso); esta é a
   primeira tela a colocar um ícone dentro de um botão ghost. Escopado à Home
   de primeira visita para não mexer no .btn-ghost compartilhado — cobre também
   o botão de instalar que a Task 6 vai desenhar na faixa de confiança. */
.wc .btn-ghost{display:inline-flex;align-items:center;gap:9px}

/* Retrato e telas estreitas: tudo empilha, e a prévia vai para baixo do texto */
@media (max-width:1100px){
  .wc{padding:24px 20px 40px}
  .wc-title{font-size:34px}
  .wc-hero{flex-direction:column}
  .wc-preview{width:100%}
  .wc-cards,.wc-modes{grid-template-columns:1fr}
}