/* Cores do tema: fundo escuro, vermelho e dourado do tango; azul = abrindo, laranja = fechando */
:root{
  /* azul-marinho, dourado e branco do logo BanDoly */
  --bg:#071a30; --panel:#0e2847; --panel2:#15365c; --line:#264d78;
  --text:#f7f4ec; --muted:#a9b9cf; --navy:#0e2847; --navy-dark:#061629; --navy-light:#183f6a;
  --gold:#caa247; --gold2:#ddb95e; --cream:#f3e9d2; --soft:#13335a;
  /* vermelho só para erros; azul = abrindo, laranja = fechando */
  --red:#d0524c; --red2:#e8726c; --green:#4fb37f; --open:#4a90d9; --close:#e0884f;
}
*{box-sizing:border-box}
body{margin:0;background:radial-gradient(ellipse at 50% -10%,var(--navy-light),var(--bg) 60%) fixed var(--bg);color:var(--text);font-family:"Segoe UI",system-ui,sans-serif;line-height:1.5}
header{background:linear-gradient(90deg,var(--navy-dark),var(--navy-light));border-bottom:2px solid var(--gold);padding:12px 20px;display:flex;flex-wrap:wrap;align-items:center;gap:16px;position:sticky;top:0;z-index:10}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.brand img{border-radius:10px;display:block}
.brand-text{display:flex;flex-direction:column;line-height:1.1}
.brand-name{font-size:1.45rem;font-weight:800;color:#fff;letter-spacing:.3px}
.brand-name b{color:var(--gold)}
.brand-sub{font-size:.78rem;color:var(--cream);opacity:.85}
.hero-logo{float:right;border-radius:18px;margin:0 0 10px 16px;box-shadow:0 4px 18px #0006}
nav{display:flex;gap:6px;flex-wrap:wrap}
nav button{background:transparent;border:1px solid var(--line);color:var(--text);padding:6px 14px;border-radius:20px;cursor:pointer;font-size:.95rem}
nav button.active{background:var(--gold);border-color:var(--gold);color:var(--navy);font-weight:600}
main{max-width:1150px;margin:0 auto;padding:20px}
section{display:none} section.active{display:block}
h2{color:var(--gold);margin-top:0}
h3{margin-bottom:6px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:18px;margin-bottom:16px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px}
.btn{background:var(--gold);color:var(--navy);font-weight:600;border:none;padding:8px 16px;border-radius:8px;cursor:pointer;font-size:.95rem}
.btn:hover{background:var(--gold2)}
.btn.sec{background:var(--panel2);border:1px solid var(--line);color:var(--text);font-weight:400}
.btn.sec:hover{background:var(--navy-light)}
.btn.sec.on{background:var(--cream);color:var(--navy);border-color:var(--cream)}
.btn:disabled{opacity:.4;cursor:default}
.row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.muted{color:var(--muted)}
.stat{font-size:2rem;font-weight:700;color:var(--gold)}
.bar{height:10px;background:var(--panel2);border-radius:6px;overflow:hidden}
.bar>div{height:100%;background:linear-gradient(90deg,var(--gold),var(--cream));transition:width .3s}
.notice{border-left:4px solid var(--gold);background:var(--soft);padding:10px 14px;border-radius:6px;font-size:.92rem}
select,input[type=range],input[type=checkbox]{accent-color:var(--gold)}
select{background:var(--panel2);color:var(--text);border:1px solid var(--line);padding:6px;border-radius:6px}

/* Teclado */
.instrument{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;padding:10px 0}
.side{display:flex;flex-direction:column;align-items:center;gap:6px}
.side .label{font-size:.85rem;color:var(--muted)}
/* Teclado do bandoneon: os botões são posicionados em absoluto pelo JavaScript */
.kbd{position:relative;background:radial-gradient(circle at 30% 20%,var(--navy-light),var(--navy-dark));border:3px solid #8a6f2e;border-radius:18px;padding:8px;box-shadow:inset 0 0 20px #000}
.key{position:absolute;border-radius:50%;border:2px solid #8b7a66;background:radial-gradient(circle at 35% 30%,#fffaf0,#d8cdb8);color:#2a1a10;font-size:inherit;font-weight:700;cursor:pointer;padding:0;user-select:none;touch-action:none;transition:transform .05s}
.key.down{transform:scale(.9);background:radial-gradient(circle at 35% 30%,#f7e6c2,var(--gold))}
.key.ok{background:var(--green)!important;color:#fff}
.key.bad{background:var(--red)!important;color:#fff}
.key.hint{box-shadow:0 0 0 4px var(--gold)}
.key.dim{opacity:.35}
.key.edit{border-style:dashed;border-color:var(--gold)}
.key.sharp{background:radial-gradient(circle at 35% 30%,#e9e2d4,#b9ad98)}
.bellows-wrap{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:220px}
.bellows{height:150px;transition:width .08s linear;background:repeating-linear-gradient(90deg,var(--navy) 0 8px,var(--gold) 8px 10px,var(--navy) 10px 18px);border-top:4px solid var(--bg);border-bottom:4px solid var(--bg);border-radius:4px;width:120px}
.dirpill{font-weight:700;padding:6px 14px;border-radius:20px}
.dirpill.open{background:var(--open)} .dirpill.close{background:var(--close)}
.warn{color:var(--red2);font-weight:700;min-height:1.5em;text-align:center}
.info{font-size:1.05rem;min-height:1.6em}
a{color:var(--gold)}
/* Melodias: faixa de notas, partitura e explicação das escalas */
.mstrip{display:flex;flex-wrap:nowrap;overflow-x:auto;gap:6px;margin:14px 0;padding:8px 4px;scroll-margin-top:90px}
.mcard{flex:0 0 auto}
.mcard{border-radius:8px;padding:5px 4px;text-align:center;background:var(--panel2);border:2px solid transparent;font-size:.85rem;cursor:pointer;transition:transform .1s}
.mcard .d{display:block;font-size:.68rem;font-weight:700;border-radius:4px;margin-top:2px;color:#fff}
.mcard.open .d{background:var(--open)} .mcard.close .d{background:var(--close)}
.mcard.rest{opacity:.45;cursor:default}
.mcard.cur{border-color:var(--gold);transform:scale(1.1)}
.mcard.ok{background:#1f4a33} .mcard.bad{background:#5a1a1e}
.mcard.err{outline:2px dashed var(--red2)}
textarea{background:var(--panel2);color:var(--text);border:1px solid var(--line);border-radius:8px;padding:10px;font-family:Consolas,monospace;font-size:.9rem;width:100%}
.lesson-list .best{float:right;color:var(--gold);font-size:.85em}
.sgrid{border-collapse:collapse;font-size:.8rem;margin-top:10px;width:100%}
.sgrid th,.sgrid td{border:1px solid var(--line);padding:3px;text-align:center}
.sgrid td{cursor:pointer;background:var(--panel2);min-width:34px}
.sgrid td:hover{outline:2px solid var(--gold)}
.sgrid td.g1{background:#5a3a1a} .sgrid td.g2{background:#6b5a1a} .sgrid td.g3{background:#1f5a3a;color:#fff}
.guide{background:var(--panel2);border-radius:10px;padding:12px 14px;margin-top:12px;border-left:4px solid var(--gold)}
.guide .gstep{font-size:1.1rem;margin-top:6px}
.guide .chg{color:var(--close);font-weight:700}
.settings{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.settings label{display:flex;flex-direction:column;gap:4px;color:var(--muted);font-size:.9rem}
.settings select,.settings input{font-size:1rem}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
@media (prefers-reduced-motion: reduce){*{transition:none!important;animation:none!important}}
button,select,a,input{touch-action:manipulation}
.mapmenu summary{list-style:none;display:inline-block}
.mapmenu summary::-webkit-details-marker{display:none}
.mapmenu[open] .row{margin-top:8px}
.kbd{user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
/* Celular */
@media (max-width:700px){
  header{padding:8px 10px;gap:6px}
  .brand img{width:36px;height:36px}
  .brand-name{font-size:1.2rem}
  .hero-logo{width:84px;height:84px}
  nav{flex-wrap:nowrap;overflow-x:auto;width:100%;scrollbar-width:none;padding-bottom:2px}
  nav::-webkit-scrollbar{display:none}
  nav button{flex:0 0 auto;padding:6px 12px}
  main{padding:10px}
  .card{padding:12px;border-radius:10px;margin-bottom:10px}
  .bellows-wrap{min-width:0;width:100%}
  .bellows{height:36px}
  .stat{font-size:1.5rem}
  .step{height:44px}
  .target{font-size:1.7rem}
  .instrument{gap:6px}
  .btn{padding:7px 12px;font-size:.9rem}
}
.melbar .row{gap:10px}
.melbar label.grow{flex:1 1 260px;min-width:0;display:flex;align-items:center;gap:8px;color:var(--muted)}
.melbar select{flex:1;min-width:0;width:100%;font-size:1rem}
.guide summary{cursor:pointer;color:var(--gold);font-weight:700}
#micStatus{min-height:1.4em;margin-top:6px}
#micStatus .ok{color:var(--green)} #micStatus .bad{color:var(--close)}
.micbar{display:inline-block;width:80px;height:8px;background:var(--panel2);border-radius:4px;vertical-align:middle;overflow:hidden}
.micbar span{display:block;height:100%;background:var(--green)}
.key.chord{background:radial-gradient(circle at 35% 30%,#f7e6c2,var(--gold))!important;box-shadow:0 0 0 3px var(--gold)}
#chVoicings small{opacity:.75}
.staffwrap{overflow-x:auto;background:#f6efe2;border-radius:10px;margin-top:12px}
.staffwrap svg{display:block}
.staffwrap .sl{stroke:#333;stroke-width:1}
.staffwrap .clef,.staffwrap .acc{fill:#222;font-family:"Segoe UI Symbol","Noto Music",serif}
.staffwrap .nh{fill:#111} .staffwrap .nh.hollow{fill:#f6efe2;stroke:#111;stroke-width:1.6}
.staffwrap .stem{stroke:#111;stroke-width:1.4} .staffwrap .nerr{fill:#bbb;stroke:#bbb}
.staffwrap g.cur .nh{fill:#a8792a} .staffwrap g.cur .nh.hollow{fill:#f6efe2;stroke:#a8792a}
.staffwrap g.cur .stem{stroke:#a8792a}
.staffwrap .scur{stroke:var(--gold);stroke-width:3;opacity:.6}
.mcard small{opacity:.7;font-size:.7em}
.mcard .errn{text-decoration:line-through;opacity:.6}
.streak{font-size:1.1rem}
.week{display:flex;align-items:center;gap:6px;margin:10px 0}
.week .day{width:28px;height:28px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:.75rem;background:var(--panel2);color:var(--muted);border:1px solid var(--line)}
.week .day.on{background:var(--gold);color:var(--navy);border-color:var(--gold)}
.week .day.today{outline:2px solid var(--cream)}
.routine{display:flex;flex-direction:column;gap:8px}
.ritem{display:flex;align-items:center;gap:12px;background:var(--panel2);border-radius:10px;padding:10px 12px}
.ritem .rcheck{font-size:1.3rem;width:30px;text-align:center}
.ritem .rtext{flex:1;min-width:0}
.ritem.done{opacity:.7} .ritem.done .rcheck{color:var(--green);font-weight:700}
.langs{display:flex;gap:6px;margin-left:auto}
.langs button{background:none;border:2px solid transparent;border-radius:6px;padding:2px;cursor:pointer;opacity:.6}
.langs button.on{border-color:var(--gold);opacity:1}
.langs button:hover{opacity:1}
.langs img{display:block;width:30px;height:20px;object-fit:cover;border-radius:2px}
kbd{background:var(--panel2);border:1px solid var(--line);border-radius:4px;padding:1px 6px;font-size:.85em}

/* Lições */
.lesson-list button{display:block;width:100%;text-align:left;background:var(--panel2);border:1px solid var(--line);color:var(--text);padding:10px 12px;border-radius:8px;margin-bottom:6px;cursor:pointer}
.lesson-list button.active{border-color:var(--gold)}
.lesson-list button .done{color:var(--green);float:right}
.lesson-layout{display:grid;grid-template-columns:260px 1fr;gap:16px}
@media(max-width:800px){.lesson-layout{grid-template-columns:1fr}}
.q{background:var(--panel2);border-radius:8px;padding:12px;margin:10px 0}
.q .opts button{margin:4px 6px 0 0}
.q .opts button.right{background:var(--green)} .q .opts button.wrong{background:#6b1a1e}

/* Pauta */
.staff svg{background:#f6efe2;border-radius:10px;max-width:100%}
.answers button{min-width:64px;margin:4px}
.feedback{font-size:1.2rem;font-weight:700;min-height:1.8em}
.feedback.ok{color:var(--green)} .feedback.bad{color:var(--red2)}
.target{font-size:2.2rem;font-weight:800;color:var(--gold)}

/* Ritmo */
.steps{display:grid;grid-template-columns:repeat(8,1fr);gap:6px;margin:14px 0}
.step{height:60px;border-radius:8px;background:var(--panel2);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-weight:700;color:var(--muted)}
.step.hit1{background:#2c5684;color:#fff} .step.hit2{background:var(--gold);color:var(--navy)}
.step.now{outline:3px solid var(--gold);transform:scale(1.05)}
.pad{width:100%;height:90px;font-size:1.3rem;border-radius:12px;border:2px dashed var(--gold);background:var(--soft);color:var(--gold);cursor:pointer}
.pad:active{background:var(--gold);color:var(--navy)}