/* ClefUp shared styles. Layout: one centered practice column, cards for each block. */
:root{
  --bg:#EEF1F8; --surface:#FFFFFF; --ink:#18203A; --muted:#5B6482; --line:#D6DCEB;
  --accent:#3646C4; --accent-ink:#FFFFFF; --sun:#F2B227; --good:#16955B; --bad:#D2433B;
  --hint:rgba(54,70,196,.09); --key-w:#FFFFFF; --key-b:#1D2238; --key-edge:#B9C0D6;
  --f-display:"Mali","Anuphan",system-ui,sans-serif;
  --f-body:"Anuphan",system-ui,sans-serif;
  --f-music:"Noto Music","Segoe UI Symbol",serif;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --bg:#0F1328; --surface:#191F3D; --ink:#E7EAF7; --muted:#9BA4C6; --line:#2C3460;
  --accent:#8F9DFF; --accent-ink:#0F1328; --sun:#F6C24A; --good:#46C98B; --bad:#FF776D;
  --hint:rgba(143,157,255,.13); --key-w:#E4E8F5; --key-b:#0B0E1E; --key-edge:#3A4372; color-scheme:dark }}
:root[data-theme="dark"]{
  --bg:#0F1328; --surface:#191F3D; --ink:#E7EAF7; --muted:#9BA4C6; --line:#2C3460;
  --accent:#8F9DFF; --accent-ink:#0F1328; --sun:#F6C24A; --good:#46C98B; --bad:#FF776D;
  --hint:rgba(143,157,255,.13); --key-w:#E4E8F5; --key-b:#0B0E1E; --key-edge:#3A4372; color-scheme:dark }

*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0}
body{background:var(--bg);color:var(--ink);font-family:var(--f-body);font-size:16px;line-height:1.55;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));
  padding-block:max(18px,env(safe-area-inset-top,0px)) 40px}
.wrap{max-width:760px;margin:0 auto;display:grid;gap:16px}
h1,h2,h3{font-family:var(--f-display);margin:0;text-wrap:balance;line-height:1.25}
h2{font-size:22px} h3{font-size:18px}
p{margin:0}

.top{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.brand{font-family:var(--f-display);font-weight:700;font-size:28px;letter-spacing:-.01em;display:flex;align-items:center;gap:6px;color:var(--ink);text-decoration:none}
.brand .m{font-family:var(--f-music);font-weight:400;color:var(--accent);font-size:32px;line-height:1}
.brand b{color:var(--accent)}
.brand sup{font-size:15px;color:var(--sun)}
.top .right{margin-left:auto;display:flex;gap:8px;align-items:center}
.muted{color:var(--muted)}
.small{font-size:13px}

.card{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:18px;display:grid;gap:12px;min-width:0}
.row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.chip{border:1.5px solid var(--line);background:var(--surface);color:var(--ink);border-radius:999px;padding:6px 12px;font:inherit;font-size:14px;cursor:pointer;line-height:1.3}
.chip[aria-pressed="true"]{border-color:var(--accent);background:var(--hint)}
.btn{font:inherit;font-size:16px;font-weight:600;border-radius:12px;padding:11px 18px;cursor:pointer;border:1.5px solid var(--line);background:var(--surface);color:var(--ink)}
.btn.pri{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.btn.sm{font-size:14px;padding:7px 12px;border-radius:10px}
.btn.danger{color:var(--bad);border-color:var(--bad)}
.btn:disabled{opacity:.4;cursor:default}
.link{background:none;border:0;color:var(--accent);font:inherit;cursor:pointer;padding:0}
.chip:focus-visible,.tab:focus-visible,.btn:focus-visible,.link:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--sun);outline-offset:2px}
input,select,textarea{font:inherit;color:var(--ink);background:var(--surface);border:1.5px solid var(--line);border-radius:12px;padding:10px 12px;width:100%}
label.f{display:grid;gap:4px;font-size:14px;color:var(--muted)}
.err{color:var(--bad);font-size:14px;min-height:1.2em}

.tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:6px}
.tab{border:0;background:transparent;color:var(--muted);font:inherit;font-size:14px;padding:8px 4px;border-radius:11px;cursor:pointer;line-height:1.25}
.tab b{display:block;font-family:var(--f-display);font-size:18px;color:var(--ink)}
.tab[aria-selected="true"]{background:var(--accent);color:var(--accent-ink)}
.tab[aria-selected="true"] b{color:var(--accent-ink)}

.how{color:var(--muted);font-size:14px}
.prompt{display:flex;align-items:center;gap:10px;flex-wrap:wrap;min-height:46px}
.prompt .pk{font-size:16px;color:var(--muted)}
.prompt .big{font-family:var(--f-display);font-weight:700;font-size:30px;color:var(--accent);line-height:1.1}
.clefchip{font-size:13px;border-radius:8px;padding:3px 9px;background:var(--hint);color:var(--accent)}
.seq{display:flex;gap:6px;flex-wrap:wrap}
.seq span{font-family:var(--f-display);font-weight:600;font-size:18px;border:1.5px solid var(--line);border-radius:10px;padding:2px 10px}
.seq span.cur{border-color:var(--accent);color:var(--accent)}
.seq span.ok{border-color:var(--good);color:var(--good)}
.seq span.no{border-color:var(--bad);color:var(--bad)}

.staff{width:100%;height:auto;display:block;touch-action:none;cursor:pointer;user-select:none;-webkit-user-select:none}
.staff.locked{cursor:default}
.sl{stroke:var(--ink);stroke-width:1.5}
.clef{font-family:var(--f-music);fill:var(--ink)}
.note .head{fill:var(--ink)}
.note .stem,.note .ledger{stroke:var(--ink);stroke-width:2}
.note.ghost{opacity:.25}
.note.good .head{fill:var(--good)} .note.good .stem,.note.good .ledger{stroke:var(--good)}
.note.bad .head{fill:var(--bad)} .note.bad .stem,.note.bad .ledger{stroke:var(--bad)}
.note.pick .head{fill:var(--sun)} .note.pick .stem,.note.pick .ledger{stroke:var(--sun)}
.note.answer .head{fill:none;stroke:var(--good);stroke-width:2.5;stroke-dasharray:4 3}
.note.answer .stem,.note.answer .ledger{stroke:var(--good);stroke-dasharray:4 3}
.slotband{fill:var(--hint)}
.lbl{font-family:var(--f-body);font-size:15px;fill:var(--muted)}
.lbl.cur{fill:var(--accent);font-weight:600}
.lbl.good{fill:var(--good)} .lbl.bad{fill:var(--bad);font-weight:600}
.kbd{width:100%;height:auto;display:block}
.wk{fill:var(--key-w);stroke:var(--key-edge);stroke-width:1}
.wk.lit{fill:var(--sun)}
.bk{fill:var(--key-b)}
.mct{font-family:var(--f-body);font-size:12px;fill:var(--muted)}
.mcd{fill:var(--accent)}

.fb{min-height:48px;padding:10px 12px;border-radius:12px;background:var(--bg);font-size:15px}
.fb.good{color:var(--good)} .fb.bad{color:var(--bad)}
.fb b{font-weight:600}
.actions{display:flex;gap:8px;flex-wrap:wrap}
.foot{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;font-size:13px;color:var(--muted)}
.dots{display:flex;gap:5px}
.dots i{width:12px;height:12px;border-radius:50%;border:1.5px solid var(--line);display:block}
.dots i.ok{background:var(--good);border-color:var(--good)}
.dots i.no{background:var(--bad);border-color:var(--bad)}
.dots i.now{border-color:var(--accent);border-width:3px}
.stars{color:var(--sun);letter-spacing:2px}
.stars .off{color:var(--line)}
.bar{height:10px;border-radius:999px;background:var(--hint);overflow:hidden}
.bar i{display:block;height:100%;background:var(--accent);border-radius:999px;transition:width .4s}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.shake{animation:shake .25s 2}
@media (prefers-reduced-motion: reduce){.shake{animation:none}.bar i{transition:none}}
@media (max-width:480px){ .brand{font-size:24px} .prompt .big{font-size:26px} .tab{font-size:12px} .tab b{font-size:16px} }