:root {
  --bg:#f7f6f2; --fg:#1b1d1b; --muted:#747874; --surface:#fff; --line:#e4e2db; --soft:#efede7;
  --accent:#2e8b3d; --accent-fg:#fff; --gold:#f2b705; --glow:#ffb800; --danger:#d9534f;
  --radius:16px; --shadow:0 1px 2px rgba(0,0,0,.04), 0 8px 24px -12px rgba(0,0,0,.12);
}
@media (prefers-color-scheme: dark) { :root:not([data-theme=light]) { --bg:#121412; --fg:#eceeec; --muted:#9aa09a; --surface:#1b1e1b; --line:#2c302c; --soft:#232723; --accent:#4cb55f; --shadow:0 1px 2px rgba(0,0,0,.3), 0 10px 30px -14px rgba(0,0,0,.6); } }
:root[data-theme=dark] { --bg:#121412; --fg:#eceeec; --muted:#9aa09a; --surface:#1b1e1b; --line:#2c302c; --soft:#232723; --accent:#4cb55f; --shadow:0 1px 2px rgba(0,0,0,.3), 0 10px 30px -14px rgba(0,0,0,.6); }

* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; font:16px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, system-ui, sans-serif; background:var(--bg); color:var(--fg); -webkit-tap-highlight-color:transparent; }
a { color:var(--accent); text-decoration:none; }
button, .btn { font:inherit; font-weight:500; padding:9px 16px; border:1px solid var(--line); border-radius:999px; background:var(--surface); color:var(--fg); cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:6px; transition:background .15s, border-color .15s, transform .05s; }
button:hover, .btn:hover { border-color:var(--muted); }
button:active { transform:scale(.97); }
button.primary { background:var(--accent); border-color:var(--accent); color:var(--accent-fg); }
button.danger { color:var(--danger); }
.icon { width:40px; height:40px; padding:0; border-radius:50%; font-size:18px; line-height:1; }
.icon.on, .star.on { color:var(--gold); border-color:var(--gold); }
input[type=text], input[type=password], input[type=search], select { font:inherit; padding:9px 14px; border:1px solid var(--line); border-radius:999px; background:var(--surface); color:var(--fg); min-width:0; }
input[type=search] { -webkit-appearance:none; }
input:focus-visible, select:focus-visible, button:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
input[type=range] { accent-color:var(--accent); height:28px; margin:0; }
.muted { color:var(--muted); font-size:.9em; }
.err { color:var(--danger); }
.ok { color:var(--accent); } .bad { color:var(--danger); }
.grow { flex:1; }
.row { display:inline-flex; gap:8px; align-items:center; }
.row.spread { display:flex; justify-content:space-between; }

header#top { display:flex; align-items:center; gap:8px; padding:10px 16px; max-width:1100px; margin:0 auto; }
.brand { font-weight:700; color:inherit; font-size:1.05rem; }
main { max-width:1100px; margin:0 auto; padding:0 16px 32px; }

/* login */
.login { max-width:320px; margin:14vh auto; display:flex; flex-direction:column; gap:12px; text-align:center; }
.login h1 { font-size:56px; margin:0 0 8px; }

/* library */
.libbar { display:flex; gap:8px; align-items:center; padding:6px 0 10px; position:sticky; top:0; background:var(--bg); z-index:3; }
.libbar input { flex:1; }
.count { color:var(--muted); font-size:.85rem; padding:0 4px 8px; }
.songs { list-style:none; margin:0; padding:0; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); }
.songs li { display:flex; align-items:center; gap:4px; border-top:1px solid var(--line); padding:0 6px 0 4px; }
.songs li:first-child { border-top:0; }
.songs li:hover { background:var(--soft); }
.songs a { flex:1; display:flex; flex-direction:column; padding:11px 8px 11px 4px; color:inherit; min-width:0; }
.songs .t { font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.songs .m { color:var(--muted); font-size:.82rem; }
.songs .star { border:0; background:transparent; width:40px; height:40px; padding:0; font-size:20px; color:var(--line); border-radius:50%; }
.songs .star:hover { color:var(--gold); }
.songs li.fav .star { color:var(--gold); }
.songs .empty { padding:24px; color:var(--muted); justify-content:center; }
.dropzone { display:none; position:fixed; inset:12px; border:3px dashed var(--accent); border-radius:24px; background:color-mix(in srgb, var(--bg) 85%, transparent); z-index:20; align-items:center; justify-content:center; font-size:1.3rem; color:var(--accent); pointer-events:none; }
.dropzone.show { display:flex; }
.upmsg { padding:10px 4px; color:var(--muted); font-size:.9rem; }

/* library: filters, groups, levels */
.chips { display:flex; gap:6px; overflow-x:auto; padding:2px 0 8px; scrollbar-width:none; }
.chips::-webkit-scrollbar { display:none; }
.chip { flex:none; padding:6px 12px; font-size:.85rem; border-radius:999px; background:var(--surface); white-space:nowrap; }
.chip span { color:var(--muted); font-size:.8em; margin-left:2px; }
.chip.on { background:var(--fg); color:var(--bg); border-color:var(--fg); }
.chip.on span { color:inherit; opacity:.7; }
.levels .chip { font-size:.8rem; padding:4px 10px; }
h2.group { font-size:.78rem; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); margin:18px 6px 8px; font-weight:600; }
.lvl { flex:none; font-size:.72rem; font-weight:600; padding:3px 8px; border-radius:999px; margin-right:6px; }
.lvl.basic { background:#2e8b3d22; color:#2e8b3d; }
.lvl.beginner { background:#1f78c822; color:#1f78c8; }
.lvl.intermediate { background:#d6247f22; color:#d6247f; }

/* song page */
body.song-view main { padding-bottom:96px; }
.songhead { display:flex; align-items:center; gap:8px; padding:4px 0 10px; }
.songhead h1 small { display:block; font-size:.72rem; font-weight:400; color:var(--muted); }
.songhead h1 { flex:1; font-size:1.2rem; font-weight:600; margin:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.songhead a.icon { font-size:26px; color:inherit; border:1px solid var(--line); }
.stage { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:12px; box-shadow:var(--shadow); display:flex; flex-direction:column; gap:10px; }
.now { text-align:center; font-weight:800; font-size:36px; line-height:60px; min-height:60px; color:#fff; background:var(--soft); border-radius:12px; text-shadow:0 2px 4px rgba(0,0,0,.35); transition:background .06s; letter-spacing:.5px; }
.fstat { display:flex; align-items:center; gap:10px; font-size:.9rem; color:var(--muted); padding:0 4px; }
.meter { width:64px; height:8px; border-radius:4px; background:var(--soft); overflow:hidden; flex:none; }
.meter i { display:block; height:100%; width:0; background:var(--accent); transition:width .05s; }
.keys { display:block; margin:0 auto; width:100%; max-width:760px; height:auto; }
.keys .wk { fill:#fff; stroke:#b9b9b9; stroke-width:1.2; }
.keys .bk { fill:#1a1a1a; }
.keys text { font:600 14px system-ui; text-anchor:middle; fill:#333; pointer-events:none; }
.keys .bkey text { fill:#fff; }
.keys .wkey.on .wk { fill:var(--c); filter:drop-shadow(0 0 10px var(--c)); }
.keys .wkey.on text { fill:#fff; font-size:22px; font-weight:800; }
.keys .bkey.on .bk { fill:var(--gold); filter:drop-shadow(0 0 10px var(--gold)); }
.keys .bkey.on text { fill:#000; font-size:20px; }
.keys .wkey.nx .wk, .keys .bkey.nx .bk { stroke:var(--accent); stroke-width:4; }
.sheet { display:flex; flex-direction:column; gap:6px; touch-action:pan-y; user-select:none; -webkit-user-select:none; }
.sheet svg { width:100%; height:auto; display:block; flex:none; }
.staff { stroke:currentColor; opacity:.28; }
.bar { stroke:currentColor; opacity:.22; stroke-width:1.5; stroke-dasharray:3 4; }
.rest line { stroke:var(--muted); stroke-width:2.5; stroke-linecap:round; opacity:.8; }
.n { cursor:pointer; }
.n circle { stroke:rgba(0,0,0,.2); transform-box:fill-box; transform-origin:center; transition:transform .08s; }
.n.folded circle { stroke:#fff; stroke-width:2; stroke-dasharray:2 3; }
.n.next circle { stroke:var(--accent); stroke-width:3; }
.n.active circle { transform:scale(1.6); stroke:#fff; stroke-width:3; filter:drop-shadow(0 0 8px var(--glow)) drop-shadow(0 0 3px #000); }
.n.done { opacity:.3; }
.n text { font:700 13px system-ui; fill:#fff; text-anchor:middle; dominant-baseline:central; pointer-events:none; }
.n .flag { display:none; pointer-events:none; }
.n text.syl { font:500 12px system-ui; fill:var(--fg); opacity:.8; dominant-baseline:auto; }
.n.active text.syl { opacity:1; font-weight:800; fill:var(--accent); }
.now { display:flex; align-items:center; justify-content:center; gap:16px; }
.now .nsyl { font-size:.7em; font-weight:600; opacity:.95; }
.n.cursor .flag { display:block; }
.flag line { stroke:var(--accent); stroke-width:3; opacity:.9; }
.flag path { fill:var(--accent); }

/* bottom control bar */
.dock { position:fixed; left:0; right:0; bottom:0; z-index:10; display:flex; align-items:center; gap:8px; flex-wrap:wrap; max-width:1100px; margin:0 auto; padding:10px 16px calc(10px + env(safe-area-inset-bottom)); background:color-mix(in srgb, var(--surface) 88%, transparent); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-top:1px solid var(--line); }
.dock .play { width:56px; height:48px; font-size:20px; border-radius:999px; padding:0; }
.dock input[type=range] { flex:1 1 160px; }
.dock .pos { font-variant-numeric:tabular-nums; color:var(--muted); font-size:.85rem; min-width:4.5em; text-align:center; }
.speed { display:inline-flex; align-items:center; border:1px solid var(--line); border-radius:999px; overflow:hidden; }
.speed button { border:0; border-radius:0; height:40px; }
.speed #spv { min-width:4.5em; font-variant-numeric:tabular-nums; }
#micb.listening { background:var(--danger); border-color:var(--danger); color:#fff; animation:pulse 1.2s infinite; }
@keyframes pulse { 50% { box-shadow:0 0 0 6px color-mix(in srgb, var(--danger) 30%, transparent); } }

/* settings dialog */
dialog { border:0; border-radius:20px; padding:0; background:var(--surface); color:inherit; box-shadow:0 20px 60px -20px rgba(0,0,0,.5); width:min(440px, calc(100vw - 32px)); }
dialog::backdrop { background:rgba(0,0,0,.35); backdrop-filter:blur(4px); }
.settings { display:flex; flex-direction:column; gap:14px; padding:20px; }
.settings h2 { margin:0 0 4px; font-size:1.1rem; }
.settings label { display:flex; flex-direction:column; gap:6px; font-size:.85rem; color:var(--muted); }
.settings label > input, .settings label > select, .settings label .row input { font-size:1rem; color:var(--fg); }
.settings .row input { flex:1; }
.settings .row b { min-width:3em; text-align:center; color:var(--fg); font-size:1rem; }

/* fullscreen */
[hidden] { display:none !important; }
body.fs header#top, body.fs .songhead { display:none; }
body.fs main { max-width:none; padding:0; }
body.fs .stage { position:fixed; inset:0 0 70px; z-index:9; border:0; border-radius:0; box-shadow:none; padding:10px 12px; background:var(--bg); }
body.fs .sheet { flex:1; overflow-y:auto; }
body.fs .keys { max-width:min(760px, 100%); }
@media (max-width:640px) {
  .now { font-size:30px; line-height:52px; min-height:52px; }
  .dock .pos { display:none; }
  body.fs .stage { inset:0 0 118px; }
}