:root{--ink: #1f2430;--muted: #6a7184;--bg: #f5f6fa;--card: #ffffff;--accent: #4451c8;--accent-dark: #353fa0;--green: #1a9641;--yellow: #d99514;--red: #d7191c;--border: #e2e5ee}*{box-sizing:border-box}body{margin:0;font-family:Segoe UI,system-ui,-apple-system,sans-serif;color:var(--ink);background:var(--bg)}h1{font-size:1.5rem;margin:.2em 0}h2{font-size:1.15rem}a{color:var(--accent)}.page{max-width:1100px;margin:0 auto;padding:1.2rem}.page.center{display:flex;min-height:80vh;align-items:center;justify-content:center}.navbar{display:flex;align-items:center;gap:1rem;background:var(--card);border-bottom:1px solid var(--border);padding:.6rem 1.2rem;position:sticky;top:0;z-index:10}.navbar .brand{font-weight:700}.navbar a{text-decoration:none;color:var(--muted);padding:.2rem .4rem;border-radius:6px}.navbar a.active,.navbar a:hover{color:var(--accent);background:#eef0fb}.navbar .who{color:var(--muted);font-size:.9rem}.spacer{flex:1}.card{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:1rem 1.2rem;margin:.8rem 0;box-shadow:0 1px 3px #1418320d}.auth-card{width:360px;display:flex;flex-direction:column;gap:.7rem}.auth-card label{display:flex;flex-direction:column;gap:.25rem;font-size:.9rem}input,select{padding:.5rem .6rem;border:1px solid var(--border);border-radius:8px;font-size:.95rem;background:#fff}input[type=checkbox]{width:auto}input[type=range]{padding:0}input[type=number]{width:4.5rem}button,.btn{padding:.5rem .9rem;border-radius:8px;border:1px solid var(--border);background:#fff;color:var(--ink);cursor:pointer;font-size:.95rem;text-decoration:none;display:inline-block}button:hover,.btn:hover{border-color:var(--accent)}button.primary,.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}button.primary:hover{background:var(--accent-dark)}button.danger{background:var(--red);border-color:var(--red);color:#fff}button.ghost,.btn.ghost{background:transparent}button:disabled{opacity:.6;cursor:default}.link-btn{border:none;background:none;color:var(--accent);cursor:pointer;padding:.2rem}.muted{color:var(--muted)}.small{font-size:.8rem}.error{color:var(--red)}.success{color:var(--green);font-weight:600}.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:.8rem;margin-top:.8rem}.tile{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:1rem;text-decoration:none;color:var(--ink);transition:border-color .15s}.tile:hover{border-color:var(--accent)}.tile h3{margin:0 0 .3rem}.tile p{margin:0;color:var(--muted);font-size:.9rem}table{width:100%;border-collapse:collapse}th{text-align:left;color:var(--muted);font-weight:600;font-size:.85rem}td,th{padding:.45rem .5rem;border-bottom:1px solid var(--border)}tr:last-child td{border-bottom:none}.filter-row{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;margin:.6rem 0}.chip{border-radius:999px;padding:.35rem .9rem;font-size:.9rem}.chip.active{background:var(--accent);color:#fff;border-color:var(--accent)}.chip.big{font-size:1.05rem;padding:.5rem 1.1rem}.inline-form{display:flex;gap:.6rem;align-items:center}.inline-form input,.inline-form select{flex:1}.inline-form.wrap{flex-wrap:wrap}.assignment-form{margin-top:1rem;border-top:1px solid var(--border);padding-top:.7rem}.practice-head{display:flex;justify-content:space-between;align-items:start;gap:1rem}.controls{display:flex;align-items:center;gap:1rem;flex-wrap:wrap}.controls .tempo{display:flex;flex-direction:column;min-width:180px;font-size:.85rem}.controls label{display:flex;align-items:center;gap:.35rem;font-size:.9rem}.loop-controls{display:flex;align-items:center;gap:.35rem}.sheet-music{background:#fff;border:1px solid var(--border);border-radius:12px;padding:.8rem;overflow-x:auto;min-height:200px}.recording-banner{color:var(--red);font-weight:600;animation:pulse 1.2s ease-in-out infinite}@keyframes pulse{50%{opacity:.45}}.score{font-weight:700}.score.s0{color:var(--red)}.score.s1{color:#d96814}.score.s2{color:var(--yellow)}.score.s3,.score.s4{color:var(--green)}.dot{display:inline-block;width:.8em;height:.8em;border-radius:50%;vertical-align:baseline}.dot.green{background:var(--green)}.dot.yellow{background:var(--yellow)}.dot.red{background:var(--red)}.results details{margin-top:.6rem}.note-detail{font-size:.85rem;margin-top:.4rem}.tuner{text-align:center}.tuner-note{font-size:4rem;font-weight:700;min-height:5rem}.tuner-note.in-tune{color:var(--green)}.tuner-scale{position:relative;height:2.2rem;margin:0 auto .6rem;max-width:420px;background:linear-gradient(90deg,#fbe9e9,#e8f5e9 45%,#e8f5e9 55%,#fbe9e9);border-radius:8px;border:1px solid var(--border)}.tuner-needle{position:absolute;top:0;bottom:0;width:3px;background:var(--ink);border-radius:2px;transition:left .08s linear}.tuner-scale .tick{position:absolute;top:.35rem;color:var(--muted)}.tuner-scale .flat{left:.5rem}.tuner-scale .center{left:50%;transform:translate(-50%)}.tuner-scale .sharp{right:.5rem}.sr-bar{padding-bottom:0}audio{vertical-align:middle;height:2rem}.piece-tile{display:flex;flex-direction:column}.piece-tile .tile-link{text-decoration:none;color:inherit;flex:1}.piece-tile .tile-link h3{margin:0 0 .3rem}.piece-tile .tile-link p{margin:0;color:var(--muted);font-size:.9rem}.status-badge{font-size:.85rem;color:var(--yellow);font-weight:600}.danger-link{color:var(--red)}.actions{white-space:nowrap}.scan-card{text-align:center}.scan-card img{max-width:100%;border:1px solid var(--border);border-radius:8px}.scan-frame{width:100%;height:80vh;border:1px solid var(--border);border-radius:12px;background:#fff}