/* ═══════════════════════════════════════════════════════════════════
   Sequências Mágicas — app do aluno
   Pensado para quem tem 40, 50 anos ou mais: letra grande, botões
   grandes com texto, alto contraste e uma coisa de cada vez.
   Identidade do Violivre: violeta escuro e dourado.
   ═══════════════════════════════════════════════════════════════════ */
:root{
  --font-display:"Space Grotesk", system-ui, sans-serif;
  --font-body:"Geist", system-ui, -apple-system, "Segoe UI", sans-serif;

  --bg:#0B0911;
  --surface:#17131F;
  --surface-2:#211B2D;
  --surface-3:#2B2340;
  --border:#352C4D;
  --border-strong:#4D4270;
  --text:#F7F4FC;
  --text-muted:#D2CBE3;      /* claro o bastante para leitura confortável */
  --text-faint:#AAA2C6;
  --gold:#F5C04A;
  --gold-fg:#1A1206;
  --gold-soft:#33270F;
  --pink:#F58AC2;
  --danger:#FF8A8A;
  --ok:#5EE6A8;
  --radius:18px;
  --ease:cubic-bezier(.2,.7,.2,1);

  --cd-line:#4A4066;
  --cd-nut:#EDE8F7;
  --cd-dot:#F5C04A;
  --cd-dot-fg:#1A1206;
  --cd-open:#5EE6A8;
  --cd-mute:#FF8A8A;

  --gold-text:#F5C04A;       /* dourado usado em texto e ícones */
  --soft-fg:#FFE3A3;         /* texto sobre fundo dourado suave */
  --active-bg:#2E2415;       /* acorde da vez */
  --top-bg:rgba(11,9,17,.92);
  --overlay-bg:rgba(11,9,17,.88);
  --halo:rgba(167,139,250,.14);
  --now-D:rgba(245,192,74,.2);
  --now-U:rgba(245,138,194,.2);
  --playing-fg:#2A0707;
}

/* Tema claro: fundo branco com detalhes em roxo; o amarelo-laranja
   do tema escuro nos botões e barras, e um laranja mais forte nos textos */
[data-theme="light"]{
  --bg:#F7F4FD;
  --surface:#FFFFFF;
  --surface-2:#F3EEFC;
  --surface-3:#E8DEFB;
  --border:#DDD1F6;
  --border-strong:#A78BFA;
  --text:#15111D;
  --text-muted:#3F3656;
  --text-faint:#6D52B8;
  --gold:#F5B32E;
  --gold-fg:#1A1206;
  --gold-text:#D97A00;
  --gold-soft:#FFF3D6;
  --pink:#DB2777;
  --danger:#DC2626;
  --ok:#15803D;
  --cd-line:#C9B8F0;
  --cd-nut:#2E1F5C;
  --cd-dot:#F5B32E;
  --cd-dot-fg:#1A1206;
  --cd-open:#15803D;
  --cd-mute:#DC2626;
  --soft-fg:#15111D;
  --active-bg:#FFF4D9;
  --top-bg:rgba(247,244,253,.94);
  --overlay-bg:rgba(255,255,255,.95);
  --halo:rgba(139,92,246,.16);
  --now-D:rgba(245,179,46,.22);
  --now-U:rgba(219,39,119,.12);
  --playing-fg:#FFFFFF;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; min-height:100vh;
  font-family:var(--font-body); font-size:18px; line-height:1.55;
  color:var(--text);
  background-color:var(--bg);
  background-image:radial-gradient(1100px 520px at 85% -10%, var(--halo), transparent 60%);
  background-attachment:fixed;
  -webkit-font-smoothing:antialiased;
}
button{font:inherit; color:inherit}
a{color:inherit}
:focus-visible{outline:3px solid var(--gold); outline-offset:3px}
[hidden]{display:none !important}

/* ── Topo ───────────────────────────────────────────────────────── */
.top{
  position:sticky; top:0; z-index:20;
  display:flex; align-items:center; gap:12px;
  padding:12px max(16px, calc((100vw - 880px)/2));
  background:var(--top-bg);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);
}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; margin-right:auto; min-width:0}
.brand img{width:36px; height:36px; flex:none; border-radius:9px}
.brand-name{font-family:var(--font-display); font-weight:700; font-size:1.2rem; white-space:nowrap}
.brand-name b{color:var(--gold-text); font-weight:700}
.conta-btn{
  min-height:44px; padding:0 16px; border-radius:999px; cursor:pointer;
  border:1px solid var(--border-strong); background:var(--surface); color:var(--text-muted); font-size:.95rem;
}
.conta-btn:hover{color:var(--text)}
.tema-btn{display:inline-flex; align-items:center; gap:8px}
.tema-btn svg{width:20px; height:20px; flex:none}

.wrap{max-width:880px; margin:0 auto; padding:0 16px 90px}
.loading{padding:80px 0; text-align:center; color:var(--text-faint)}

/* ── Tela 1: escolher a sequência ───────────────────────────────── */
.intro{padding:36px 0 22px}
.intro h1, .seq-title{
  margin:0 0 8px; font-family:var(--font-display); font-weight:700;
  font-size:clamp(1.9rem, 5.5vw, 2.6rem); line-height:1.12; letter-spacing:-.02em; text-wrap:balance;
}
.intro p{margin:0; color:var(--text-muted); font-size:1.08rem; max-width:52ch}

.seq-list{display:grid; gap:14px}
.seq-card{
  display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:18px;
  padding:22px 22px; border-radius:var(--radius); text-decoration:none;
  background:var(--surface); border:2px solid var(--border);
  transition:border-color .15s var(--ease), background .15s var(--ease);
}
.seq-card:hover, .seq-card:focus-visible{border-color:var(--gold); background:var(--surface-2)}
.seq-n{
  display:grid; place-items:center; width:54px; height:54px; border-radius:50%;
  background:var(--gold-soft); color:var(--gold-text); font-family:var(--font-display); font-weight:700; font-size:1.5rem;
}
.seq-card h2{margin:0; font-family:var(--font-display); font-weight:700; font-size:1.35rem; line-height:1.25; text-wrap:balance}
.seq-card p{margin:4px 0 0; color:var(--text-muted); font-size:1rem}
.seq-go{color:var(--gold-text); font-size:1.8rem; line-height:1}
.seq-main{min-width:0}
.seq-tape{grid-column:1 / -1; display:grid; gap:6px; min-width:0}

/* Fita de acordes: largura de cada bloco = duração; grau embaixo do acorde */
.tape{display:flex; gap:6px; min-width:0}
.tape-cell{
  flex:var(--m,1) 1 0; min-width:0; padding:10px 8px; border-radius:12px;
  background:var(--surface-2); border:1px solid var(--border);
  display:flex; flex-direction:column; align-items:center; gap:2px; text-align:center;
}
.tape-chord{font-family:var(--font-display); font-weight:700; font-size:1.3rem; line-height:1.15; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.tape-deg{font-size:.9rem; color:var(--text-muted); white-space:nowrap}

.empty{padding:26px; text-align:center; color:var(--text-muted); border:2px dashed var(--border-strong); border-radius:var(--radius)}

/* ── Tela 2: músicas da sequência ───────────────────────────────── */
.back{
  display:inline-flex; align-items:center; gap:8px; margin-top:22px; min-height:48px; padding:0 18px 0 12px;
  border-radius:999px; border:1px solid var(--border-strong); background:var(--surface);
  color:var(--text); text-decoration:none; font-size:1rem;
}
.back:hover{border-color:var(--gold)}
.seq-head{padding:20px 0 8px}
.seq-head p{margin:0; color:var(--text-muted); max-width:56ch}
.sec-title{margin:34px 0 0; font-family:var(--font-display); font-weight:700; font-size:1.4rem}
.how{
  margin:12px 0 18px; padding:14px 16px;
  border-radius:14px; background:var(--gold-soft); color:var(--soft-fg); font-size:1rem;
}
.how b{color:var(--gold-text)}

.songs{display:grid; gap:14px}
.song{
  border-radius:var(--radius); background:var(--surface); border:2px solid var(--border);
  transition:border-color .2s var(--ease);
  scroll-margin-top:84px;
}
.song.current{border-color:var(--gold)}
.song-head{display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; gap:16px; padding:16px 18px}
.song-info h3{margin:0; font-family:var(--font-display); font-weight:700; font-size:1.25rem; line-height:1.25}
.song-info p{margin:2px 0 0; color:var(--text-muted); font-size:1rem}

.play{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-width:122px; height:56px; padding:0 20px; border:0; border-radius:999px; cursor:pointer;
  background:var(--gold); color:var(--gold-fg); font-family:var(--font-display); font-weight:700; font-size:1.1rem;
  transition:transform .15s var(--ease), filter .15s;
}
.play:hover{filter:brightness(1.06)}
.play:active{transform:scale(.97)}
.play svg{width:20px; height:20px; flex:none}
.play.playing{background:var(--danger); color:var(--playing-fg)}

.song-mini{padding:0 18px 16px}

/* Grade da batida (gerada pelo teoria.js) */
.rg{width:100%}
.rg-cells,.rg-count{display:grid; grid-template-columns:repeat(var(--n), minmax(0,1fr))}
.rc{position:relative; display:grid; place-items:center; height:40px; border-radius:8px; color:var(--text-faint)}
.rc-beat::before{content:""; position:absolute; left:0; top:20%; bottom:20%; width:2px; border-radius:2px; background:var(--border)}
.rc:first-child::before{display:none}
.rc .ar{width:26px; height:26px; fill:none; stroke:currentColor; stroke-width:3.2; stroke-linecap:round; stroke-linejoin:round}
.rc-D{color:var(--gold-text)}
.rc-U{color:var(--pink)}
.rc-X{color:var(--text-muted)}
.rc-X .ar{width:20px; height:20px}
.rc-rest{width:5px; height:5px; border-radius:50%; background:var(--border-strong)}
.rn{text-align:center; font-size:.8rem; color:var(--text-faint); line-height:1.7}
.rn-beat{color:var(--text-muted); font-weight:700}

/* Palco: acordes com graus e tom; vira o player quando uma música toca */
.stage{
  margin-top:18px; padding:6px 20px 22px; display:grid; gap:18px;
  border-radius:22px; background:var(--surface); border:2px solid var(--border);
  scroll-margin-top:76px;
}
.stage.has-song{border-color:var(--gold)}
.stage-top{display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; padding-top:14px}
.now{display:grid; gap:2px; min-width:0}
.now-lbl{font-size:.9rem; color:var(--text-faint)}
.now strong{font-family:var(--font-display); font-size:1.35rem; line-height:1.25}
.stage:not(.has-song) .now strong{font-family:var(--font-body); font-weight:500; font-size:1.05rem; color:var(--text-muted)}
.now-artist{color:var(--text-muted)}

.keys{display:flex; gap:8px; flex-wrap:wrap}
.key{
  min-width:56px; min-height:48px; padding:0 12px; border-radius:12px; cursor:pointer;
  border:2px solid var(--border-strong); background:var(--surface-2); color:var(--text);
  font-family:var(--font-display); font-weight:700; font-size:1.1rem;
}
.key:hover{border-color:var(--gold)}
.key[aria-checked="true"]{background:var(--gold); border-color:var(--gold); color:var(--gold-fg)}
.key-note{margin:0; color:var(--text-muted); font-size:.98rem; min-height:1.5em}
.block{display:grid; gap:10px; min-width:0}
.block-title{margin:14px 0 0; font-family:var(--font-display); font-weight:700; font-size:1.1rem}
.hint{margin:-4px 0 0; color:var(--text-muted); font-size:.98rem}

.live .rc{height:64px}
.live .rc .ar{width:36px; height:36px}
.live .rc-X .ar{width:26px; height:26px}
.live .rn{font-size:.95rem}
.live .rc.now{background:var(--surface-3)}
.live .rc-D.now{background:var(--now-D)}
.live .rc-U.now{background:var(--now-U)}
.live .rc.hit .ar{animation:hit .24s var(--ease)}
@keyframes hit{0%{transform:scale(1.45)}100%{transform:scale(1)}}
.legend{display:flex; flex-wrap:wrap; gap:6px 18px; margin:0; color:var(--text-muted); font-size:.95rem}
.legend b{font-size:1.1rem}
.legend .d{color:var(--gold-text)} .legend .u{color:var(--pink)}

.chord-row{display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:12px}
.chord-card{
  position:relative; overflow:hidden; border-radius:14px; padding:12px 8px 16px;
  background:var(--surface-2); border:2px solid var(--border); text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:2px;
  transition:border-color .12s, background .12s;
}
.chord-card .name{font-family:var(--font-display); font-weight:700; font-size:1.6rem; line-height:1.15}
.chord-card .deg{font-size:1rem; color:var(--text-muted); margin-top:-2px}
.chord-card.active .deg{color:var(--soft-fg)}
.chord-card .dur{font-size:.85rem; color:var(--text-faint)}
.chord-card .cd{width:100%; max-width:130px; height:auto; margin-top:4px}
/* Diagrama (SVG gerado pelo teoria.js) */
.cd .cd-str,.cd .cd-fret{stroke:var(--cd-line); stroke-width:1.4}
.cd .cd-nut{stroke:var(--cd-nut); stroke-width:5; stroke-linecap:round}
.cd .cd-dot{fill:var(--cd-dot)}
.cd .cd-fg{fill:var(--cd-dot-fg); font:700 10px/1 var(--font-body)}
.cd .cd-open{fill:none; stroke:var(--cd-open); stroke-width:2}
.cd .cd-mute{stroke:var(--cd-mute); stroke-width:2.2; stroke-linecap:round}
.cd .cd-pos{fill:var(--text-muted); font:700 11px/1 var(--font-body)}
.chord-card .nodiag{font-size:.9rem; color:var(--text-faint); padding:30px 4px}
.chord-card .bar{
  position:absolute; left:0; right:0; bottom:0; height:8px; background:var(--gold);
  transform:scaleX(0); transform-origin:left center; will-change:transform;
}
.chord-card.active{border-color:var(--gold); background:var(--active-bg)}
.chord-card.active .name{color:var(--gold-text)}

.speed-top{display:flex; align-items:center; gap:8px 18px; flex-wrap:wrap}
.speed-row{display:flex; align-items:center; gap:12px}
.speed-btn{
  flex:none; width:56px; height:56px; border-radius:50%; cursor:pointer;
  border:2px solid var(--border-strong); background:var(--surface-2); color:var(--text); font-size:1.7rem; font-weight:600; line-height:1;
}
.speed-slider{
  flex:1; min-width:0; height:48px; margin:0; background:transparent; cursor:pointer;
  -webkit-appearance:none; appearance:none;
}
.speed-slider::-webkit-slider-runnable-track{
  height:12px; border-radius:999px;
  background:linear-gradient(to right, var(--gold) 0 var(--pct,50%), var(--surface-3) var(--pct,50%) 100%);
}
.speed-slider::-moz-range-track{height:12px; border-radius:999px; background:var(--surface-3)}
.speed-slider::-moz-range-progress{height:12px; border-radius:999px; background:var(--gold)}
.speed-slider::-webkit-slider-thumb{
  -webkit-appearance:none; width:34px; height:34px; margin-top:-11px; border-radius:50%;
  background:var(--text); border:4px solid var(--gold); box-shadow:0 2px 8px rgba(0,0,0,.5);
}
.speed-slider::-moz-range-thumb{width:28px; height:28px; border-radius:50%; background:var(--text); border:4px solid var(--gold)}
.speed-slider:focus-visible{outline:3px solid var(--gold); outline-offset:4px; border-radius:999px}
.speed-ends{display:flex; justify-content:space-between; padding:0 68px; margin-top:-6px; font-size:.9rem; color:var(--text-faint)}
.speed-btn:hover:not(:disabled){border-color:var(--gold)}
.speed-btn:disabled{opacity:.4; cursor:default}
.speed-val{display:flex; align-items:baseline; gap:8px; line-height:1.1}
.speed-val b{font-family:var(--font-display); font-size:2.2rem; color:var(--gold-text); font-variant-numeric:tabular-nums}
.speed-val span{font-size:.95rem; color:var(--text-muted)}
.link-btn{
  background:none; border:0; padding:8px 0; cursor:pointer;
  color:var(--gold-text); text-decoration:underline; font-size:1rem;
}

.note{margin:0; padding:12px 14px; border-radius:12px; background:var(--surface-2); color:var(--text-muted)}
.listen{color:var(--gold-text); font-weight:600}

/* Vídeo explicativo da sequência (vTurb) */
.video{margin:18px 0 6px; display:grid; gap:10px}
.video-title{margin:0; font-family:var(--font-display); font-weight:700; font-size:1.2rem}
.video-box{position:relative; min-height:200px; border-radius:16px; overflow:hidden; background:#000; border:2px solid var(--border)}
.video-box::before{content:"Carregando o vídeo…"; position:absolute; inset:0; display:grid; place-items:center; color:var(--text-faint); font-size:1rem}
.video-box > *{position:relative; z-index:1}

/* Contagem antes de começar */
.count-in{position:fixed; inset:0; z-index:40; display:grid; place-items:center; pointer-events:none}
.count-in span{
  display:grid; place-items:center; width:170px; height:170px; border-radius:50%;
  background:var(--overlay-bg); border:3px solid var(--gold); color:var(--gold-text);
  font-family:var(--font-display); font-weight:700; font-size:6rem; line-height:1;
  box-shadow:0 20px 60px -10px rgba(0,0,0,.7);
}
.count-in span.pulse{animation:pulse .3s var(--ease)}
@keyframes pulse{0%{transform:scale(1.2)}100%{transform:scale(1)}}

/* Minha conta */
.modal{position:fixed; inset:0; z-index:60; display:grid; place-items:center; padding:16px; background:rgba(5,3,10,.7); overflow-y:auto}
.modal-card{width:100%; max-width:440px; background:var(--surface); border:2px solid var(--border); border-radius:20px; padding:24px; display:grid; gap:16px}
.modal-card h2{margin:0; font-family:var(--font-display); font-size:1.4rem}
.modal-card h3{margin:0; font-size:1.05rem}
.kv{display:grid; grid-template-columns:auto 1fr; gap:6px 14px; margin:0}
.kv dt{color:var(--text-faint)} .kv dd{margin:0; overflow-wrap:anywhere}
.stack{display:grid; gap:12px; padding-top:14px; border-top:1px solid var(--border)}
.field{display:grid; gap:6px}
.field label{font-size:.95rem; color:var(--text-muted)}
.field input{min-height:52px; border-radius:12px; border:2px solid var(--border-strong); background:var(--surface-2); color:var(--text); padding:0 14px; font:inherit}
.field input:focus{outline:none; border-color:var(--gold)}
.btn{min-height:52px; border-radius:999px; border:0; padding:0 22px; cursor:pointer; font-family:var(--font-display); font-weight:700; font-size:1.05rem; background:var(--gold); color:var(--gold-fg)}
.btn.ghost{background:transparent; border:2px solid var(--border-strong); color:var(--text); font-family:var(--font-body); font-weight:600}
.row-end{display:flex; gap:10px; justify-content:flex-end; flex-wrap:wrap}
.form-msg{margin:0; min-height:1.3em; font-size:.98rem}
.form-msg.err{color:var(--danger)} .form-msg.ok{color:var(--ok)}

/* ── Telas estreitas ────────────────────────────────────────────── */
@media (max-width:600px){
  body{font-size:17px}
  .brand-name{font-size:1.05rem}
  .top{gap:8px}
  .brand-name{overflow:hidden; text-overflow:ellipsis}
  .tema-btn .lbl{display:none}
  .tema-btn{padding:0 12px}
  .seq-card{grid-template-columns:auto minmax(0,1fr); padding:18px 16px; gap:14px}
  .seq-go{display:none}
  .seq-n{width:46px; height:46px; font-size:1.3rem}
  .song-head{grid-template-columns:minmax(0,1fr); gap:12px; padding:16px}
  .song-head .play{order:2; width:100%}
  .song-mini{padding:0 16px 16px}
  .stage{padding:4px 14px 18px}
  .keys{flex-wrap:nowrap; overflow-x:auto; padding-bottom:6px; scrollbar-width:thin}
  .key{flex:none}
  .seq-tape{margin-top:2px}
  .tape-chord{font-size:1.1rem}
  .tape-cell{padding:8px 4px}
  .speed-ends{padding:0 4px}
  .chord-row{grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px}
  .chord-card .name{font-size:1.45rem}
  .live .rc{height:54px}
  .live .rc .ar{width:30px; height:30px}
}
@media (prefers-reduced-motion: reduce){
  *{transition:none !important; animation:none !important}
}