:root{
  --bg:#12151c; --bg2:#1a1f2b; --card:#1e2430; --card2:#252c3a;
  --ink:#eef2f8; --muted:#9aa6b8; --line:#313a4b;
  --accent:#40c8aa; --got:#40c8aa; --learning:#e8b14b; --warn:#e06c75;
  --r:18px; --tap:48px;
  font-size:18px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%}
body{
  background:radial-gradient(1200px 600px at 70% -10%, #1c2433 0%, var(--bg) 60%);
  color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased; line-height:1.45;
  padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
a{color:inherit;text-decoration:none}
h1{font-size:1.9rem;margin:.2em 0 .1em;letter-spacing:-.01em}
h2{font-size:1.15rem;margin:1.3em 0 .5em;color:var(--ink);border-bottom:1px solid var(--line);padding-bottom:.3em}
.muted{color:var(--muted)} .small{font-size:.82rem}

/* top bar */
.topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:.6rem;
  padding:.7rem 1.1rem;background:rgba(18,21,28,.82);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line)}
.topbar .brand{font-weight:700;letter-spacing:.02em}
.topbar .brand .pick{color:var(--accent)}
.topbar .home-link{margin-left:auto;color:var(--muted);font-size:.85rem;padding:.5rem .8rem;border:1px solid var(--line);border-radius:999px}

#app{max-width:1180px;margin:0 auto;padding:1.2rem 1.4rem 4rem}

/* hero / progress */
.hero h1{font-size:2.3rem}
.progress-bar{height:12px;background:var(--card2);border-radius:999px;overflow:hidden;margin:.8rem 0 .3rem}
.progress-fill{height:100%;background:linear-gradient(90deg,var(--accent),#6fe0c6);border-radius:999px;transition:width .4s}

/* tier grid */
.tier-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:1rem;margin-top:1.2rem}
.tier-card{background:linear-gradient(180deg,var(--card),var(--bg2));border:1px solid var(--line);
  border-left:5px solid var(--accent);border-radius:var(--r);padding:1.1rem 1.2rem;
  transition:transform .12s,border-color .12s;display:block}
.tier-card:active{transform:scale(.985)}
.tier-num{color:var(--accent);font-weight:700;font-size:.8rem;text-transform:uppercase;letter-spacing:.08em}
.tier-name{font-size:1.2rem;font-weight:650;margin:.15rem 0 .35rem}
.tier-blurb{color:var(--muted);font-size:.92rem}
.tier-foot{margin-top:.8rem;font-size:.82rem;color:var(--muted);display:flex;align-items:center;gap:.35rem;flex-wrap:wrap}
.dot{width:9px;height:9px;border-radius:50%;display:inline-block;background:var(--line)}
.dot.got{background:var(--got)} .dot.learning{background:var(--learning)}

.quick-row{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:1.4rem}
.quick{flex:1 1 220px;text-align:center;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r);padding:1rem;font-weight:600}
.quick:active{background:var(--card2)}

/* crumb */
.crumb{margin:-.2rem 0 .6rem}
.crumb a{color:var(--muted);font-size:.9rem;padding:.5rem .2rem}

/* tier head + song list */
.tier-head,.song-head{border-left:5px solid var(--accent);padding-left:1rem;margin-bottom:.6rem}
.song-list{display:flex;flex-direction:column;gap:.6rem;margin-top:.8rem}
.song-card{display:flex;align-items:center;gap:.9rem;background:var(--card);border:1px solid var(--line);
  border-radius:14px;padding:.85rem 1rem;min-height:var(--tap)}
.song-card:active{background:var(--card2)}
.song-status{width:14px;height:14px;border-radius:50%;flex:none;background:var(--line);border:2px solid var(--line)}
.song-status.st-learning{background:var(--learning);border-color:var(--learning)}
.song-status.st-got{background:var(--got);border-color:var(--got)}
.song-main{flex:1;min-width:0}
.song-title{font-weight:620}
.song-sub{color:var(--muted);font-size:.86rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.song-tempo{color:var(--muted);font-size:.82rem;font-variant-numeric:tabular-nums;flex:none}
.tag{font-size:.66rem;text-transform:uppercase;letter-spacing:.05em;padding:.12em .5em;border-radius:999px;vertical-align:middle}
.tag.riff{background:#3a2a22;color:#e8915b;border:1px solid #5a3f30}

/* song head badges */
.badges{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.6rem}
.badge{background:var(--card2);border:1px solid var(--line);border-radius:999px;padding:.3rem .8rem;font-size:.82rem;color:var(--muted)}
.badge.groove{color:#cda8f5;border-color:#43345e}
.badge.warn{color:var(--warn);border-color:#5a2f33}

/* progress buttons */
.prog-buttons{display:flex;gap:.6rem;margin:1rem 0 .4rem;flex-wrap:wrap}
.pb{flex:1 1 120px;min-height:var(--tap);border:1px solid var(--line);background:var(--card);color:var(--ink);
  border-radius:12px;font-size:.95rem;font-weight:600}
.pb:active{transform:scale(.98)}
.pb.active{outline:2px solid var(--accent);background:var(--card2)}
.pb.learning.active{outline-color:var(--learning)}
.pb.got.active{outline-color:var(--got)}

/* chords */
.chord-row{display:flex;gap:.7rem;flex-wrap:wrap;align-items:flex-start}
.chord-svg{width:108px;height:140px;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:4px}
.chord-name{fill:var(--ink);font-size:13px;font-weight:700;font-family:inherit}
.chord-fretlabel{fill:var(--muted);font-size:9px;font-family:inherit}
.chord-grid{stroke:#56627a;stroke-width:1}
.chord-nut{fill:var(--ink)}
.chord-dot{fill:var(--accent)} .chord-dot.root{fill:#6fe0c6}
.chord-barre{fill:var(--accent);opacity:.92}
.chord-open{fill:none;stroke:var(--ink);stroke-width:1.6}
.chord-x{fill:var(--muted);font-size:12px;font-family:inherit}

/* transport / metronome */
.transport{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:1rem;margin-top:1rem}
.metro{display:flex;align-items:center;gap:.9rem;flex-wrap:wrap}
.play{width:64px;height:64px;border-radius:50%;border:none;background:var(--accent);color:#06231d;
  font-size:1.5rem;font-weight:700;flex:none;box-shadow:0 6px 18px rgba(64,200,170,.3)}
.play.on{background:var(--warn);color:#2a0d0f;box-shadow:0 6px 18px rgba(224,108,117,.3)}
.play:active{transform:scale(.95)}
.bpm-box{display:flex;align-items:center;gap:.5rem}
.bpm-step{width:var(--tap);height:var(--tap);border-radius:12px;border:1px solid var(--line);background:var(--card2);color:var(--ink);font-size:1.5rem;line-height:1}
.bpm{min-width:96px;text-align:center}
.bpm #bpmVal{font-size:2rem;font-weight:700;font-variant-numeric:tabular-nums}
.bpm-unit{display:block;font-size:.7rem;color:var(--muted);margin-top:-4px}
.beats{display:flex;gap:.5rem;margin-left:.2rem}
.beat-dot{width:16px;height:16px;border-radius:50%;background:var(--card2);border:1px solid var(--line);transition:transform .05s,background .05s}
.beat-dot.on{background:var(--accent);transform:scale(1.25);box-shadow:0 0 12px var(--accent)}
.tap{min-width:var(--tap);height:var(--tap);padding:0 1rem;border-radius:12px;border:1px solid var(--line);background:var(--card2);color:var(--ink);font-weight:700;letter-spacing:.05em}
.sub-toggle{display:flex;align-items:center;gap:.4rem;color:var(--muted);font-size:.85rem}
.sub-toggle input{width:22px;height:22px}
.tempo-chips{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.8rem}
.tempo-chip{min-height:40px;padding:0 1rem;border-radius:999px;border:1px solid var(--line);background:var(--card2);color:var(--ink);font-size:.85rem}
.tempo-chip:active{background:var(--accent);color:#06231d}

/* strum viz */
.strum{margin-top:1rem}
.strum-label{font-weight:700;color:var(--accent);font-size:.9rem;margin-bottom:.4rem}
.strum-row{display:flex;gap:.4rem}
.strum-slot{flex:1;min-width:0;aspect-ratio:1/1.25;max-width:64px;border:1px solid var(--line);border-radius:10px;
  background:var(--card2);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.1rem;transition:background .04s,transform .04s}
.strum-slot.rest{opacity:.4}
.strum-slot .arrow{font-size:1.4rem;font-weight:700;line-height:1}
.strum-slot .arrow.down{color:var(--accent)} .strum-slot .arrow.up{color:#cda8f5}
.strum-slot .count{font-size:.72rem;color:var(--muted)} .count.amp{opacity:.7}
.strum-slot.playhead{background:var(--accent);transform:translateY(-3px)}
.strum-slot.playhead .arrow,.strum-slot.playhead .count{color:#06231d}

/* sections / chips */
.section{margin:.5rem 0}
.section-name{font-size:.8rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-bottom:.3rem}
.chip-row{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center}
.chip{background:var(--card2);border:1px solid var(--line);border-radius:10px;padding:.35rem .7rem;font-weight:700;font-variant-numeric:tabular-nums}
.chip-power{color:#e8915b;border-color:#5a3f30}
.bar{color:var(--muted);opacity:.5;margin:0 .1rem}

/* callouts / drills / verify */
.callout{background:#16241f;border:1px solid #2c5247;border-radius:14px;padding:.9rem 1rem;margin:1rem 0;color:#cfe;}
.drills{margin:.4rem 0 0;padding-left:1.4rem} .drills li{margin:.3rem 0}
.verify{margin-top:1rem;background:#2a2620;border:1px solid #4a3f2c;border-radius:12px;padding:.8rem 1rem;color:#e8d6a8;font-size:.92rem}

/* reference tables */
.ref-table{width:100%;border-collapse:collapse;margin:.6rem 0}
.ref-table th,.ref-table td{border:1px solid var(--line);padding:.55rem .7rem;text-align:left;font-size:.92rem;vertical-align:top}
.ref-table th{background:var(--card2)}
.ref-table.playlist td{font-variant-numeric:tabular-nums}
.bullets{padding-left:1.3rem} .bullets li{margin:.3rem 0}
.ref-strums .strum{max-width:560px}
.chord-row.wrap{gap:.7rem}

/* tablet portrait tweak */
@media (max-width:840px){
  .tier-grid{grid-template-columns:1fr}
  .bpm{min-width:80px}
}
/* large iPad / desktop: roomier */
@media (min-width:1000px){
  :root{font-size:19px}
  .strum-slot{max-width:72px}
}