/* Layout: estúdio de prática — pauta no topo, flauta grande no meio, mãos e dica embaixo; abas para dedilhados e editor */
:root{
  --bg:#eef1f5; --surface:#ffffff; --surface-2:#f6f8fb; --ink:#172033; --ink-2:#56607a; --line:#d5dbe6;
  --accent:#1f5fd1; --accent-soft:#dbe7fb; --staff:#2a3346; --hand:#f1e3d6; --hand-line:#c9a98f;
  --silver-1:#fbfcfe; --silver-2:#c9d0dc; --silver-3:#8d97a8; --pad:#e9edf3;
  --f-thumb:#7a52e0; --f-index:#0b9a85; --f-middle:#e2741b; --f-ring:#d42d6b; --f-pinky:#2b78e4;
  --ok:#178a4c; --ok-soft:#cdeedb; --warn:#c35a0c; --warn-soft:#fbe0cc; --star:#e0a100;
  --display:"Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --body:"Atkinson Hyperlegible", "Segoe UI", system-ui, sans-serif;
  --mono:"IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
  --music:"Noto Music", "Segoe UI Symbol", "Apple Symbols", serif;
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --bg:#10141c; --surface:#171c27; --surface-2:#1d2330; --ink:#e8ecf4; --ink-2:#9aa4ba; --line:#2c3445;
  --accent:#6ea0ff; --accent-soft:#1d2d4d; --staff:#c9d1e0; --hand:#3a2f28; --hand-line:#8a6d58;
  --silver-1:#e9edf3; --silver-2:#a9b2c1; --silver-3:#6b7587; --pad:#2a3140;
  --f-thumb:#a487ff; --f-index:#2ec4ab; --f-middle:#ff9a45; --f-ring:#ff5c95; --f-pinky:#5aa0ff;
  --ok:#3fcf7f; --ok-soft:#173d29; --warn:#ff9a45; --warn-soft:#45291a; --star:#ffc531;
  color-scheme:dark; } }
:root[data-theme="dark"]{
  --bg:#10141c; --surface:#171c27; --surface-2:#1d2330; --ink:#e8ecf4; --ink-2:#9aa4ba; --line:#2c3445;
  --accent:#6ea0ff; --accent-soft:#1d2d4d; --staff:#c9d1e0; --hand:#3a2f28; --hand-line:#8a6d58;
  --silver-1:#e9edf3; --silver-2:#a9b2c1; --silver-3:#6b7587; --pad:#2a3140;
  --f-thumb:#a487ff; --f-index:#2ec4ab; --f-middle:#ff9a45; --f-ring:#ff5c95; --f-pinky:#5aa0ff;
  --ok:#3fcf7f; --ok-soft:#173d29; --warn:#ff9a45; --warn-soft:#45291a; --star:#ffc531;
  color-scheme:dark; }
*{box-sizing:border-box}
[hidden]{display:none!important}
body{background:var(--bg); color:var(--ink); font-family:var(--body); font-size:15px; line-height:1.45}
.wrap{max-width:1180px; margin:0 auto; padding-inline:16px; padding-block:14px 40px}
header.top{display:flex; flex-wrap:wrap; align-items:center; gap:12px 20px; margin-bottom:14px}
.brand{display:flex; align-items:baseline; gap:10px}
.brand h1{font-family:var(--display); font-weight:700; font-size:26px; margin:0; letter-spacing:-.01em}
.brand span{color:var(--ink-2); font-size:13px}
.instsw{margin-left:auto}
.themebtn{padding:6px 12px; font-size:13px; border-radius:999px}
.themebtn svg{width:16px; height:16px}
nav.tabs{display:flex; gap:4px; overflow-x:auto; max-width:100%; scrollbar-width:none; background:var(--surface); border:1px solid var(--line); border-radius:999px; padding:4px}
nav.tabs button{white-space:nowrap; flex:none; border:0; background:transparent; color:var(--ink-2); font:600 14px var(--body); padding:7px 14px; border-radius:999px; cursor:pointer}
nav.tabs button[aria-selected="true"]{background:var(--ink); color:var(--bg)}
button, select, input{font-family:var(--body)}
.btn{display:inline-flex; align-items:center; gap:6px; border:1px solid var(--line); background:var(--surface); color:var(--ink); font-weight:700; font-size:14px; padding:8px 12px; border-radius:10px; cursor:pointer}
.btn:hover{border-color:var(--ink-2)}
.btn.primary{background:var(--accent); border-color:var(--accent); color:#fff}
.btn:focus-visible, select:focus-visible, input:focus-visible, nav.tabs button:focus-visible{outline:3px solid var(--accent); outline-offset:2px}
.btn svg{width:16px; height:16px}
select, input[type=text], input[type=number]{border:1px solid var(--line); background:var(--surface); color:var(--ink); padding:8px 10px; border-radius:10px; font-size:14px}
.panel{background:var(--surface); border:1px solid var(--line); border-radius:16px}
.toolbar{display:flex; flex-wrap:wrap; gap:10px; align-items:center; padding:12px 14px}
.toolbar .grow{flex:1 1 180px; min-width:0}
.toolbar label.small{font-size:12px; color:var(--ink-2); display:flex; align-items:center; gap:8px; text-transform:uppercase; letter-spacing:.06em; font-weight:700}
.toolbar input[type=range]{width:120px; accent-color:var(--accent)}
.bpm{font-family:var(--mono); font-size:14px; min-width:3ch; color:var(--ink); text-transform:none; letter-spacing:0}
.sep{width:1px; align-self:stretch; background:var(--line)}
.toggle{display:inline-flex; align-items:center; gap:6px; font-size:13px; color:var(--ink-2); cursor:pointer; user-select:none}
.toggle input{accent-color:var(--accent); width:16px; height:16px}

.staff-wrap{overflow-x:auto; border-top:1px solid var(--line); scroll-behavior:smooth}
.staff-wrap svg{display:block}
.staff-wrap .n{cursor:pointer}
.staff-wrap .n:hover .hl{fill:var(--accent-soft); opacity:.6}

.stage{display:grid; grid-template-columns:minmax(0,1fr); gap:14px; margin-top:14px}
.notecard{padding:18px; display:flex; flex-direction:column; gap:6px}
.notecard .eyebrow{font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-2); font-weight:700}
.notecard .big{font-family:var(--display); font-size:64px; line-height:1; font-weight:700; letter-spacing:-.02em}
.notecard .big sup{font-size:22px; color:var(--ink-2); font-weight:500; margin-left:4px}
.notecard .cifra{font-family:var(--mono); font-size:22px; color:var(--accent)}
.chips{display:flex; flex-wrap:wrap; gap:6px; margin-top:6px}
.chip{font-size:12px; padding:3px 9px; border-radius:999px; background:var(--surface-2); border:1px solid var(--line); color:var(--ink-2)}
.chip.warn{border-color:var(--f-middle); color:var(--f-middle)}
.progress{font-size:13px; color:var(--ink-2); margin-top:auto; font-variant-numeric:tabular-nums}
.flute-panel{padding:10px 12px 8px; min-width:0}
.flute-scroll{overflow-x:auto}
.flute-scroll svg:not(.flc svg){display:block; min-width:780px; width:100%; height:auto}
.flc{display:none} .flc > svg{display:block; width:100%; height:auto}
.flute-scroll.compact{overflow:visible}
.flute-scroll.compact > div > svg.full{position:absolute; width:1px; min-width:0; height:1px; opacity:0; pointer-events:none}
.flute-scroll.compact .flc{display:block}
.flute-scroll.is3d .flc{display:none}
.flc .keylabel{font-size:17px} .flc .keylabel.caps{font-size:14px} .flc .keylabel.muted{display:none} .flc .ov text, .flc .ov title{display:none} .flc .ov{pointer-events:none}
.mob-only{display:none} .opts{display:contents}
.viewbar{display:flex; flex-wrap:wrap; gap:8px 12px; align-items:center; margin:0 0 8px}
.viewbar .v3{display:inline-flex; flex-wrap:wrap; gap:6px; align-items:center}
.viewbar .v3[hidden]{display:none}
.btn.sm{padding:5px 10px; font-size:13px}
.flute-scroll.is3d{overflow:visible}
.keyinfo{margin:4px 6px 2px; font-size:13.5px; color:var(--ink); min-height:1.4em}
.legend{display:flex; flex-wrap:wrap; gap:12px; font-size:12.5px; color:var(--ink-2); padding:4px 6px 0}
.legend i{display:inline-block; width:12px; height:12px; border-radius:50%; margin-right:5px; vertical-align:-1px}

.lower{display:grid; grid-template-columns:220px minmax(0,1.5fr) minmax(0,1fr); gap:14px; margin-top:14px}
@media (max-width:1060px){ .lower{grid-template-columns:220px minmax(0,1fr)} .lower .tip{grid-column:1/-1} }
.hands{padding:14px; display:grid; grid-template-columns:1fr 1fr; gap:10px}
.hand h3, .tip h3{font-family:var(--display); font-size:15px; margin:0 0 4px; font-weight:700}
.hand svg{width:100%; max-width:220px; height:auto; display:block; margin:0 auto}
.hand ul{list-style:none; margin:6px 0 0; padding:0; font-size:13px}
.hand li{display:flex; gap:8px; align-items:center; padding:2px 0}
.hand li i{width:10px; height:10px; border-radius:50%; flex:none}
.hand li.off{color:var(--ink-2)}
.tip{padding:16px 18px}
.tip p{margin:6px 0 0; max-width:60ch}
.tip .alt{font-size:13px; color:var(--ink-2)}

.finger{fill:var(--hand); stroke:var(--hand-line); stroke-width:1.5; transition:fill .15s}
.finger.on{stroke-width:2}
.palm{fill:var(--hand); stroke:var(--hand-line); stroke-width:1.5}

.key{transition:fill .12s, filter .12s}
.key.on{filter:drop-shadow(0 0 5px var(--kc))}
.keylabel{font:600 11px var(--body); fill:var(--ink-2)}
.keylabel.on{fill:var(--ink)}
.keylabel.caps{font-size:10.5px; letter-spacing:.08em}
.keylabel.strong{fill:var(--ink); font-weight:700}
.keylabel.muted{font-weight:400}
.key.mech{opacity:.62}
.pkey{cursor:pointer} .pkey.down{filter:brightness(.82)}
.key.demo{stroke:var(--accent)!important; stroke-width:3!important; opacity:1}
@keyframes pulse{50%{stroke-width:5}} .key.demo{animation:pulse .8s ease-in-out 3}
@media (prefers-reduced-motion: reduce){ .key.demo{animation:none} }
@media (prefers-reduced-motion: reduce){ .key, .finger{transition:none} .staff-wrap{scroll-behavior:auto} }

/* Dedilhados */
.chart-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(104px,1fr)); gap:10px; padding:14px}
.fcard{border:1px solid var(--line); background:var(--surface-2); border-radius:12px; padding:8px 6px 6px; cursor:pointer; text-align:center; color:var(--ink)}
.fcard:hover{border-color:var(--ink-2)}
.fcard[aria-pressed="true"]{border-color:var(--accent); box-shadow:0 0 0 2px var(--accent-soft)}
.fcard b{font-family:var(--display); font-size:17px; display:block}
.fcard small{font-family:var(--mono); color:var(--accent); font-size:12px}
.fcard svg{display:block; margin:4px auto 0; width:46px; height:auto}
.oct-head{grid-column:1/-1; font-family:var(--display); font-weight:700; font-size:15px; margin-top:6px; color:var(--ink-2)}
.oct-head span{font-family:var(--body); font-weight:400; font-size:13px}

/* Editor */
.ed-grid{display:grid; gap:12px; padding:14px}
.row{display:flex; flex-wrap:wrap; gap:8px; align-items:center}
.row .lbl{font-size:12px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-2); font-weight:700; min-width:82px}
.seg{display:inline-flex; border:1px solid var(--line); border-radius:10px; overflow:hidden}
.seg button{border:0; border-right:1px solid var(--line); background:var(--surface); color:var(--ink); padding:7px 11px; font-size:14px; cursor:pointer; font-weight:700}
.seg button:last-child{border-right:0}
.seg button[aria-pressed="true"]{background:var(--ink); color:var(--bg)}
.notepad{display:grid; grid-template-columns:repeat(8, minmax(0,1fr)); gap:6px; max-width:620px}
.notepad button{padding:12px 0; border-radius:10px; border:1px solid var(--line); background:var(--surface-2); color:var(--ink); font:700 16px var(--display); cursor:pointer}
.notepad button small{display:block; font:500 11px var(--mono); color:var(--accent)}
.notepad button:hover{border-color:var(--accent)}
.hint{font-size:13px; color:var(--ink-2); margin:0}
.toast{position:fixed; left:50%; bottom:calc(20px + env(safe-area-inset-bottom, 0px)); transform:translateX(-50%); background:var(--ink); color:var(--bg); padding:10px 16px; border-radius:12px; font-size:14px; max-width:calc(100% - 32px); box-shadow:0 8px 24px rgba(0,0,0,.2)}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0)}

/* Microfone */
.listen{display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:14px; align-items:center; padding:12px 14px; margin-top:14px}
.listen .det{min-width:120px}
.listen .det b{font-family:var(--display); font-size:26px; line-height:1; display:block}
.listen .det span{font-size:12px; color:var(--ink-2)}
.tuner{position:relative; height:46px; min-width:0}
.tuner .scale{position:absolute; left:0; right:0; top:14px; height:10px; border-radius:6px; background:linear-gradient(90deg, var(--warn-soft), var(--ok-soft) 35%, var(--ok-soft) 65%, var(--warn-soft))}
.tuner .mid{position:absolute; left:50%; top:8px; width:2px; height:22px; background:var(--ink); transform:translateX(-1px)}
.tuner .needle{position:absolute; top:5px; width:4px; height:28px; border-radius:2px; background:var(--ink-2); left:50%; transform:translateX(-2px); transition:left .08s linear}
.tuner .needle.ok{background:var(--ok)} .tuner .needle.err{background:var(--warn)}
.tuner .lbls{position:absolute; left:0; right:0; top:32px; display:flex; justify-content:space-between; font-size:11px; color:var(--ink-2)}
.hold{height:6px; border-radius:4px; background:var(--surface-2); overflow:hidden; margin-top:6px}
.hold i{display:block; height:100%; width:0; background:var(--ok)}
.listen .msg{grid-column:1/-1; font-size:14px; margin:0}
.listen .msg.err{color:var(--warn)} .listen .msg.ok{color:var(--ok)}
.level{width:8px; height:40px; border-radius:4px; background:var(--surface-2); position:relative; overflow:hidden}
.level i{position:absolute; left:0; right:0; bottom:0; background:var(--accent); height:0}
.btn.on{background:var(--ok); border-color:var(--ok); color:#fff}
.banner{display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px; padding:12px 14px; margin-bottom:14px; border-color:var(--accent); background:var(--accent-soft)}
.banner b{font-family:var(--display)}
.banner .grow{flex:1 1 220px; min-width:0}
.result{position:fixed; inset:0; background:rgba(10,14,22,.45); display:flex; align-items:center; justify-content:center; padding:16px; z-index:20}
.result .card{background:var(--surface); color:var(--ink); border-radius:18px; padding:24px; max-width:420px; width:100%; text-align:center; border:1px solid var(--line)}
.result h2{font-family:var(--display); margin:4px 0 6px; font-size:26px}
.stars{font-size:40px; letter-spacing:6px; color:var(--star)}
.stars .off{color:var(--line)}
.result .row{justify-content:center; margin-top:16px}
/* Afinador */
.tuner-grid{display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:14px}
.tuner-main{padding:18px; display:flex; flex-direction:column; gap:8px; align-items:stretch}
.gauge svg{width:100%; max-width:440px; display:block; margin:0 auto}
.tnote{text-align:center; font-family:var(--display); line-height:1}
.tnote b{font-size:64px; font-weight:700} .tnote sup{font-size:22px; color:var(--ink-2); margin-left:2px} .tnote span{display:block; font-family:var(--mono); font-size:20px; color:var(--accent); margin-top:4px}
.thz{text-align:center; font-family:var(--mono); font-size:13px; color:var(--ink-2); font-variant-numeric:tabular-nums}
.tlevel{height:6px; background:var(--surface-2); border-radius:4px; overflow:hidden} .tlevel i{display:block; height:100%; width:0; background:var(--accent)}
.trail{width:100%; height:70px; display:block; background:var(--surface-2); border-radius:8px}
.tuner-main .msg{font-size:15px; margin:4px 0; min-height:2.6em} .msg.ok{color:var(--ok)} .msg.err{color:var(--warn)}
.tuner-side{padding:18px}
.tuner-side h3{font-family:var(--display); margin:0 0 4px; font-size:18px}
.tcards{display:grid; gap:8px; margin:10px 0 14px}
.tcard{display:flex; align-items:center; gap:10px; border:1px solid var(--line); border-radius:12px; padding:8px 10px; background:var(--surface-2)}
.tcard.sel{border-color:var(--accent); box-shadow:0 0 0 2px var(--accent-soft)}
.tcard.live{background:var(--accent-soft)}
.tpick{flex:1; min-width:0; text-align:left; background:none; border:0; color:var(--ink); cursor:pointer; padding:0; font:inherit}
.tpick b{font-family:var(--display); font-size:18px; margin-right:8px} .tpick small{font-family:var(--mono); color:var(--accent); font-size:12px} .tpick span{display:block; font-size:12.5px; color:var(--ink-2)}
@media (max-width:820px){ .tuner-grid{grid-template-columns:1fr} }
/* Treinos */
.tracksw{margin-top:14px}
.drill-grid{display:grid; grid-template-columns:minmax(0,1fr); gap:14px}
.drill-main{padding:20px}
.drill-main h2{font-family:var(--display); margin:0 0 4px; font-size:24px}
.drill-main .intro{max-width:70ch; margin:0 0 14px}
.center{text-align:center}
.breath{position:relative; height:260px; display:flex; align-items:center; justify-content:center}
.bcircle{width:240px; height:240px; border-radius:50%; background:radial-gradient(circle at 40% 35%, var(--accent-soft), var(--accent)); opacity:.85; transform:scale(.35)}
.btext{position:absolute; text-align:center; color:var(--ink)}
.btext b{display:block; font-family:var(--display); font-size:22px; background:var(--surface); padding:2px 10px; border-radius:8px}
.btext span{font-family:var(--display); font-size:40px; font-weight:700}
.bigtime{font-family:var(--display); font-size:64px; font-weight:700; text-align:center; font-variant-numeric:tabular-nums; line-height:1.1}
.goalbar{position:relative; height:16px; background:var(--surface-2); border-radius:8px; margin:10px 0 40px}
.goalbar i{display:block; height:100%; width:0; background:var(--ok); border-radius:8px}
.goalbar span{position:absolute; top:20px; transform:translateX(-50%); font-size:12px; color:var(--ink-2); text-align:center; line-height:1.2}
.goalbar span::before{content:""; position:absolute; left:50%; top:-24px; height:20px; border-left:2px dashed var(--ink-2)}
.phases{display:grid; grid-template-columns:repeat(3,1fr); gap:6px; margin-bottom:10px}
.phases div{padding:16px 8px; text-align:center; border-radius:10px; background:var(--surface-2); font-family:var(--display); font-weight:700; color:var(--ink-2)}
.phases div.on{background:var(--accent); color:#fff}
.vol{height:14px; background:var(--surface-2); border-radius:7px; overflow:hidden} .vol i{display:block; height:100%; width:0; background:var(--accent)}
.beats{display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin:10px 0}
.beats i{width:26px; height:26px; border-radius:50%; background:var(--surface-2); border:2px solid var(--line)}
.beats i.on{background:var(--ok); border-color:var(--ok)}
#drTips{margin-top:14px}
/* Teoria */
.th-grid{display:grid; grid-template-columns:270px minmax(0,1fr); gap:14px; align-items:start}
.th-side{padding:16px; position:sticky; top:calc(10px + env(safe-area-inset-top, 0px))}
.th-side h2{font-family:var(--display); margin:0; font-size:20px}
.thitem{display:flex; gap:8px; width:100%; text-align:left; border:0; background:none; color:var(--ink); padding:7px 8px; border-radius:8px; cursor:pointer; font:inherit; font-size:14px}
.thitem:hover{background:var(--surface-2)} .thitem.on{background:var(--accent-soft); font-weight:700}
.thitem .ck{width:16px; flex:none; color:var(--ok); font-weight:700}
.thitem small{display:block; font-size:11.5px; color:var(--ink-2); font-weight:400}
.thsep{font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-2); font-weight:700; margin:12px 8px 4px}
.th-main{padding:22px 24px; min-width:0}
.th-main h2{font-family:var(--display); font-size:28px; margin:2px 0 6px}
.th-main h3{font-family:var(--display); font-size:18px; margin:22px 0 8px}
.th-main p{max-width:68ch}
.th-main .lead{font-size:17px; color:var(--ink)}
.th-main .row{margin:10px 0}
.thbox{border-left:4px solid var(--accent); background:var(--accent-soft); border-radius:10px; padding:12px 14px; margin:12px 0; max-width:68ch}
.thbox > b{display:block; font-family:var(--display); font-size:16px} .thbox span{display:block; font-size:14px; margin-top:2px}
.thgrid2{display:grid; grid-template-columns:1fr 1fr; gap:10px} .thgrid2 .thbox{margin:0}
.thkb{width:100%; max-width:760px; height:auto; display:block; margin:10px 0; touch-action:manipulation}
.thkb rect{cursor:pointer}
.thmap th{width:70px} .thmap td{text-align:center; font-weight:700}
.thhymn{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:6px; margin:10px 0}
.thhymn span{background:var(--surface-2); border-radius:8px; padding:6px 10px; font-style:italic} .thhymn b{color:var(--accent); font-style:normal}
.thoct{display:flex; flex-wrap:wrap; gap:6px; margin:10px 0} .thoct span{padding:8px 12px; border-radius:10px; background:var(--surface-2); font-weight:700}
.thoct span.hi, .thoct span:first-child{background:var(--accent); color:#fff}
.thsteps{display:flex; gap:6px; margin:10px 0} .thsteps span{width:44px; height:44px; display:grid; place-items:center; border-radius:10px; background:var(--accent); color:#fff; font-family:var(--display); font-weight:700; font-size:18px}
.thsteps span.s{background:var(--warn)}
.thfig td:first-child{font-size:16px}
.quiz .qq{border:1px solid var(--line); border-radius:12px; padding:10px 14px; margin:8px 0; background:var(--surface-2)}
.quiz .qq p{margin:4px 0}
.btn.qo.on{background:var(--ok); border-color:var(--ok); color:#fff} .btn.qo.bad{background:var(--warn); border-color:var(--warn); color:#fff}
.thnav2{justify-content:space-between; margin-top:20px!important}
.beats i.strong{border-color:var(--accent)} .beats i.on{background:var(--accent); border-color:var(--accent)}
.btn.big{padding:14px 18px; font-size:16px}
#grStaff svg{width:280px; height:auto; margin:6px 0}
@media (max-width:820px){ .th-grid{grid-template-columns:1fr} .th-side{position:static} .thgrid2{grid-template-columns:1fr} }
/* Lições */
.lhead{display:flex; flex-wrap:wrap; gap:12px 24px; align-items:center; padding:16px 18px}
.lhead h2{font-family:var(--display); margin:0; font-size:22px}
.stat{display:flex; flex-direction:column}
.stat b{font-family:var(--display); font-size:24px; line-height:1.1; font-variant-numeric:tabular-nums}
.stat span{font-size:12px; color:var(--ink-2); text-transform:uppercase; letter-spacing:.06em; font-weight:700}
.lgrid{display:grid; grid-template-columns:repeat(auto-fill, minmax(250px,1fr)); gap:12px; margin-top:14px}
.lcard{padding:14px 16px; display:flex; flex-direction:column; gap:8px; text-align:left; cursor:pointer; color:var(--ink); font:inherit}
.lcard:hover{border-color:var(--ink-2)}
.lcard .num{font-size:12px; color:var(--ink-2); font-weight:700; letter-spacing:.06em; text-transform:uppercase}
.lcard h3{font-family:var(--display); margin:0; font-size:18px}
.lcard p{margin:0; font-size:13.5px; color:var(--ink-2)}
.lcard .stars{font-size:18px; letter-spacing:2px}
.lcard.locked{opacity:.6}
.lcard.done{border-color:var(--ok)}
.ldetail{padding:18px; margin-top:14px}
.lcard.start{border-color:var(--accent); background:var(--accent-soft)}
.guide{margin:4px 0 16px}
.guide h3{font-family:var(--display); font-size:17px; margin:18px 0 8px}
.guide-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:18px; align-items:start}
.guide figure{margin:0; background:var(--surface-2); border:1px solid var(--line); border-radius:12px; padding:10px}
.guide-fig{width:100%; height:auto; display:block}
.guide figcaption{font-size:13px; color:var(--ink-2); margin-top:6px}
.steps{margin:0; padding-left:22px; display:grid; gap:8px; max-width:62ch}
.drills{margin:0; padding-left:20px; display:grid; gap:6px; max-width:75ch}
.probs{border-collapse:collapse; width:100%; font-size:14px}
.probs th, .probs td{text-align:left; padding:8px 10px; border-bottom:1px solid var(--line); vertical-align:top}
.probs th{font-size:12px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-2)}
.probs td:first-child{font-weight:700; width:32%}
@media (max-width:820px){ .guide-grid{grid-template-columns:1fr} }
.ldetail h2{font-family:var(--display); margin:0 0 4px}
.ldetail .intro{max-width:65ch; margin:6px 0 12px}
.newnotes{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px}
.newnotes button{border:1px solid var(--line); background:var(--surface-2); color:var(--ink); border-radius:10px; padding:6px 12px; cursor:pointer; font:700 15px var(--display)}
.newnotes button small{font:500 11px var(--mono); color:var(--accent); margin-left:6px}
.exlist{display:grid; gap:8px}
.ex{display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px; padding:10px 12px; border:1px solid var(--line); border-radius:12px; background:var(--surface-2)}
.ex .grow{flex:1 1 200px; min-width:0}
.ex .stars{font-size:16px; letter-spacing:2px}

@media (max-width:820px){
  .listen{grid-template-columns:1fr auto}
  .listen .tuner{grid-column:1/-1}
  .stage{grid-template-columns:1fr}
  .notecard{flex-direction:row; flex-wrap:wrap; align-items:baseline; gap:4px 14px}
  .notecard .big{font-size:48px}
  .notecard .progress{width:100%}
  .lower{grid-template-columns:1fr}
  nav.tabs{margin-left:0}
}
@media (max-width:480px){ .hands{grid-template-columns:1fr} .notepad{grid-template-columns:repeat(4, minmax(0,1fr))} }
/* ---- celular: cabeçalho enxuto e prática cabendo numa tela ---- */
@media (max-width:600px){
  .wrap{padding-inline:10px; padding-block:10px 32px}
  header.top{gap:8px 6px; margin-bottom:10px}
  header.top{flex-wrap:nowrap; flex-direction:row} header.top nav.tabs{order:9}
  header.top{flex-wrap:wrap}
  .brand{flex:1 1 0; min-width:0} .brand h1{font-size:16px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis} #brandSub{display:none}
  .instsw{margin-left:0} .instsw button{padding:6px 6px; font-size:12px}
  .themebtn{padding:6px} #themeLbl{display:none}
  nav.tabs{width:100%} nav.tabs button{padding:6px 11px; font-size:13.5px}
  .mob-only{display:inline-flex}
  .btn svg.mob-only{display:block}
  #view-pratica .toolbar{gap:6px; padding:8px 10px}
  #view-pratica .toolbar .grow{flex:1 1 0}
  #importBtn .lbl, #restartBtn .lbl, #refBtn .lbl{display:none}
  #importBtn, #restartBtn, #refBtn, #optsBtn, #prevBtn, #nextBtn{padding:8px 10px}
  #playBtn{flex:1; justify-content:center}
  .opts{display:none}
  .toolbar.open .opts{display:flex; flex-wrap:wrap; gap:10px 14px; width:100%; padding-top:4px}
  .opts .sep{display:none}
  .banner{padding:8px 10px; margin-bottom:10px; font-size:13.5px}
  .listen{grid-template-columns:auto minmax(0,1fr) auto; gap:4px 10px; padding:8px 10px; margin-top:10px}
  .listen .det{min-width:0}
  .listen .tuner{grid-column:auto; height:40px}
  .tuner .lbls{font-size:10px}
  #micBtn{padding:8px 10px; font-size:13px}
  .level{height:34px}
  .hold{margin-top:2px}
  .listen .msg{font-size:12.5px; line-height:1.35}
  .stage{margin-top:10px}
  .flute-panel{padding:8px 8px 6px}
  .viewbar{margin-bottom:4px}
  .keyinfo{font-size:12.5px; margin:2px 4px}
  .legend{gap:4px 10px; font-size:11.5px}
  .lower{margin-top:10px; gap:10px}
}

/* ---- conta e perfil ---- */
.appfoot{max-width:1180px; margin:-24px auto 0; padding:0 16px 28px; text-align:center; font-size:13px; color:var(--ink-2)}
.appfoot a, .acct-dlg .hint a{color:var(--accent)}
.acctbtn{padding:5px 10px 5px 6px; border-radius:999px; font-size:13px}
.acctbtn svg{width:18px; height:18px}
.acctbtn .av{width:24px; height:24px; border-radius:50%; object-fit:cover; flex:none}
.av.ini, .pf-av.ini{display:inline-grid; place-items:center; background:var(--accent); color:#fff; font-weight:700}
.acct-dlg{border:1px solid var(--line); border-radius:18px; background:var(--surface); color:var(--ink); padding:20px 20px 16px; width:min(440px, calc(100vw - 24px)); max-height:calc(100dvh - 24px); overflow:auto; position:relative}
.acct-dlg::backdrop{background:rgba(10,14,22,.55)}
.acct-dlg h2{font-family:var(--display); margin:0 0 6px; font-size:21px}
.acct-dlg p{margin:6px 0 10px}
.acct-x{position:absolute; top:12px; right:12px}
.acc-list{margin:4px 0 14px; padding-left:20px} .acc-list li{margin:2px 0}
.gbtn{display:flex; align-items:center; justify-content:center; gap:10px; width:100%; padding:11px 14px; border-radius:999px; border:1px solid #dadce0; background:#fff; color:#1f1f1f; font:600 15px var(--body); cursor:pointer; margin:6px 0 10px}
.gbtn svg{width:20px; height:20px} .gbtn:disabled{opacity:.6; cursor:wait}
.pf-head{display:flex; gap:12px; align-items:center; margin-bottom:12px; padding-right:36px}
.pf-head h2{margin:0}
.pf-av{width:52px; height:52px; border-radius:50%; object-fit:cover; flex:none; font-size:22px}
.pf-stats{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:6px; margin-bottom:6px}
.pf-stats div{background:var(--surface-2); border:1px solid var(--line); border-radius:12px; padding:8px 4px; text-align:center}
.pf-stats b{display:block; font-family:var(--display); font-size:19px}
.pf-stats span{font-size:11.5px; color:var(--ink-2)}
.acct-dlg .sync{font-size:12.5px; color:var(--ink-2); min-height:1.3em; margin:4px 0 10px}
.pf-f{display:flex; flex-direction:column; gap:5px; font-size:13px; font-weight:700; color:var(--ink-2); margin:0 0 12px; border:0; padding:0}
.pf-f legend{padding:0; margin-bottom:6px}
fieldset.pf-f{flex-direction:row; flex-wrap:wrap; gap:8px 16px}
.pf-f input[type=text], .pf-f select{font-weight:400; color:var(--ink)}
.pf-actions{display:flex; flex-wrap:wrap; gap:8px; margin:4px 0 12px}
.pf-danger summary{cursor:pointer; font-size:13px; color:var(--ink-2)}
.pf-danger .btn{margin-top:4px; border-color:var(--warn); color:var(--warn)}
@media (max-width:600px){ .acctbtn{padding:4px} .acctbtn .lbl{display:none} .acctbtn svg{margin:2px} }