:root{--bg:#0b0d12;--surface:#171a21;--surface2:#1e222b;--text:#f2f3f5;--muted:#9aa1ac;--border:#2a2e37;--accent:#3b82f6;--warn:#f59e0b;--good:#22c55e;--danger:#ef4444;--radius:16px;--fs-part:48px;--fs-bar:96px;--fs-note:32px;--fs-next:32px;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
@media (prefers-color-scheme: light){:root{--bg:#f2f3f5;--surface:#ffffff;--surface2:#eef0f3;--text:#12141a;--muted:#5b6270;--border:#d8dbe1}}
*{box-sizing:border-box}
html{height:100%;scroll-padding-top:env(safe-area-inset-top,0px)}
body{height:100%;margin:0;background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;display:flex;flex-direction:column}
header{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;padding:14px 16px;background:var(--surface);border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:10px}
header h1{font-size:16px;margin:0;font-weight:700;letter-spacing:.2px}
.header-actions{display:flex;align-items:center;gap:8px}
main{flex:1;overflow-y:auto;padding:16px;max-width:620px;width:100%;margin:0 auto}
.hidden{display:none!important}
button{font:inherit;cursor:pointer;border:none;border-radius:10px;padding:10px 14px;background:var(--surface2);color:var(--text)}
button.primary{background:var(--accent);color:#fff}
button.ghost{background:transparent;border:1px solid var(--border)}
input,select{font:inherit;padding:8px 10px;border-radius:8px;border:1px solid var(--border);background:var(--surface);color:var(--text);width:100%}
select{width:auto}
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:6px 14px}
.row{display:flex;gap:8px;align-items:center}
.song-item{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px 4px;border-bottom:1px solid var(--border)}
.song-item:last-child{border-bottom:none}
.muted{color:var(--muted);font-size:13px}
.part-row{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr auto auto;gap:6px;align-items:center;margin-bottom:6px}
.part-row input{padding:6px 8px;font-size:14px}
.part-card{border-bottom:1px solid var(--border);padding-bottom:8px;margin-bottom:8px}
.part-note-input{width:100%;font-size:13px;padding:6px 8px;margin-top:2px}
.part-head{font-size:11px;color:var(--muted)}
label{font-size:12px;color:var(--muted);display:block;margin-bottom:4px}
.field{margin-bottom:10px}
.top-actions{display:flex;gap:8px;margin-bottom:14px}
.empty{text-align:center;padding:40px 10px;color:var(--muted);white-space:pre-line}
.player-wrap{display:flex;flex-direction:column;align-items:center;gap:14px;padding:10px}
.player-card{width:100%;max-width:400px;border-radius:22px;border:2px solid var(--border);background:var(--surface);padding:26px;text-align:center;transition:border-color .15s,box-shadow .15s}
.player-card.warn{border-color:var(--warn);box-shadow:0 0 0 4px rgba(245,158,11,.18)}
.player-card.danger{border-color:var(--danger);box-shadow:0 0 0 4px rgba(239,68,68,.2)}
.player-card.flash{border-color:var(--good);box-shadow:0 0 0 6px rgba(34,197,94,.28)}
.part-name{font-size:var(--fs-part);font-weight:700}
.bar-count{font-size:var(--fs-bar);font-weight:800;font-variant-numeric:tabular-nums}
.bar-total{font-size:calc(var(--fs-bar) * 0.38);color:var(--muted);font-weight:600;margin-left:4px}
.part-note{font-size:var(--fs-note);font-weight:700;margin-top:2px}
.part-note:empty{display:none}
.beats{display:flex;gap:10px;justify-content:center;margin:10px 0 4px}
.beat-dot{width:20px;height:20px;border-radius:50%;background:var(--surface2);border:2px solid var(--border)}
.beat-dot.active{background:var(--accent);border-color:var(--accent)}
.beat-dot.active.down{background:var(--warn);border-color:var(--warn)}
.next-part{font-size:var(--fs-next);font-weight:400;color:var(--text);margin-top:20px;padding-top:14px;border-top:1px solid var(--border);line-height:1.4}
.controls{display:flex;gap:10px;width:100%;max-width:400px}
.controls button{flex:1;padding:14px;font-size:16px;font-weight:600}
.auth-wrap{max-width:360px;margin:40px auto;display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.auth-wrap .field{width:100%}
.auth-error{color:var(--danger);font-size:13px;min-height:16px}
.auth-switch{background:none;border:none;color:var(--accent);text-decoration:underline;padding:4px 0}