.recording-review{display:grid;grid-template-columns:auto auto minmax(120px,1fr) auto;gap:10px;align-items:center;padding:10px 16px;border-top:1px solid var(--line);background:#fff}
.verdict-badge{display:inline-block;color:#fff;font-weight:700;font-size:16px;border-radius:8px;padding:6px 14px;margin:2px 0 6px}
.verdict-detail{font-size:14px;color:var(--ink)}
.verdict-detail b{font-size:16px}
.verdict-note{color:var(--muted);font-size:13px;margin-top:2px}
.verdict-advice{margin-top:5px;font-size:14px;color:var(--ink)}
.verdict-legend{display:block;margin-top:5px;color:var(--muted)}
.recording-review button,.mic-test-row button{border:1px solid #b9ddd0;background:#fff;color:var(--mint-dark);border-radius:7px;padding:8px 12px;cursor:pointer}
.recording-review input{width:100%;accent-color:var(--mint)}
.device-settings{display:grid;gap:12px}
.device-settings label{display:grid;grid-template-columns:82px 1fr;align-items:center;gap:10px;color:var(--muted);font-size:13px}
.device-settings select{min-width:0;padding:9px;border:1px solid var(--line);border-radius:6px;background:#fff;color:var(--ink)}
.device-settings small{color:var(--muted)}
.mic-test-row{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:center}
.mic-test-row meter{width:100%;height:18px;accent-color:var(--mint)}

/* ===== 认谱跟唱（逐个音）===== */
.step-practice{margin:14px 0;padding:14px 16px;background:#f7faf8;border:1px solid var(--line);border-radius:10px}
.step-practice[hidden]{display:none}
.step-head{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.step-head strong{font-size:15px}
.step-progress{margin-left:auto;font-variant-numeric:tabular-nums;color:var(--muted)}
.step-exit{margin-left:8px;padding:6px 12px;border:1px solid var(--line);background:#fff;border-radius:6px;cursor:pointer;color:var(--muted)}
.step-readout{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:8px}
.step-target,.step-live{display:flex;flex-direction:column;gap:2px;padding:8px 12px;background:#fff;border:1px solid var(--line);border-radius:8px;min-width:128px}
.step-label{font-size:12px;color:var(--muted)}
.step-target strong{font-size:22px}
.step-solfege{font-size:13px;color:var(--mint-dark)}
.step-live strong{font-size:18px}
.step-verdict{font-size:13px;color:var(--mint-dark)}
.step-lane{position:relative;height:14px;background:#eef3f0;border:1px solid var(--line);border-radius:99px;margin:6px 0 10px;overflow:hidden}
.step-lane .step-center{position:absolute;left:50%;top:0;bottom:0;width:2px;background:#c2ccc7;transform:translateX(-50%)}
.step-indicator{position:absolute;top:0;bottom:0;left:50%;width:10px;border-radius:99px;background:#9aa6a1;transform:translateX(-50%);transition:left .08s linear,background .08s linear}
.step-actions{display:flex;gap:8px;flex-wrap:wrap}
.step-actions button{padding:8px 14px;border:1px solid var(--line);background:#fff;border-radius:7px;cursor:pointer}
.step-actions button:first-child{background:var(--mint-dark);color:#fff;border-color:var(--mint-dark)}
.step-hint{color:var(--muted);font-size:12px;margin:8px 0 0}
.note-group.done .note-head{fill:#0ca769}
.note-group.done .scan-note-zone{fill:rgba(12,167,105,.14)}
.note-group.active .note-head{fill:#173d30}
.assessment-marker circle{stroke:#fff;stroke-width:2}
.assessment-marker text{fill:#fff;font-size:9px;font-weight:700;text-anchor:middle}
.note-group.rhythm-warning .note-head{stroke:#e39b16;stroke-width:3}
.note-group.reviewing .note-head{filter:drop-shadow(0 0 7px rgba(49,134,216,.9));stroke:#3186d8;stroke-width:3}
.scan-note-zone{fill:transparent}
.note-group.correct .scan-note-zone{fill:rgba(12,167,105,.18);stroke:#0ca769;stroke-width:2}
.note-group.wrong .scan-note-zone{fill:rgba(240,93,94,.16);stroke:#f05d5e;stroke-width:2}
.note-group.rhythm-warning .scan-note-zone{stroke:#e39b16;stroke-width:3}
.note-group.reviewing .scan-note-zone{fill:rgba(49,134,216,.16);stroke:#3186d8;stroke-width:3}
.karaoke-coach{margin-top:10px}.karaoke-readout{display:grid;grid-template-columns:1fr auto 1fr;gap:8px;align-items:center;font-size:12px;color:var(--muted)}.karaoke-readout strong{text-align:center;color:var(--ink);font-size:15px}.karaoke-readout span:last-child{text-align:right}.pitch-lane{height:32px;margin-top:9px;border-radius:6px;background:linear-gradient(90deg,#f9d8d8 0 30%,#e4f4ed 42% 58%,#f9d8d8 70%);position:relative;overflow:hidden}.pitch-center{position:absolute;left:50%;top:0;bottom:0;width:2px;background:#0ca769}.pitch-indicator{position:absolute;left:50%;top:5px;width:22px;height:22px;border-radius:50%;background:#8a948f;border:3px solid #fff;box-shadow:0 1px 6px rgba(0,0,0,.25);transform:translateX(-50%);transition:left .06s linear,background .12s}.beat-progress{height:5px;margin-top:8px;background:#dce5e1;border-radius:4px;overflow:hidden}.beat-progress span{display:block;width:0;height:100%;background:#3186d8;transition:width .05s linear}
@media(max-width:650px){.recording-review{grid-template-columns:auto 1fr auto}.recording-review button{grid-column:1/-1}.device-settings label{grid-template-columns:1fr}#scoreSvg{height:auto!important}}
/* Reserve the karaoke coach's layout space while hidden so showing it at
   recording start does not reflow the page (the "screen jitter" on phones). */
.karaoke-coach[hidden]{display:block!important;visibility:hidden}
.pitch-help{display:inline-block;width:18px;height:18px;line-height:18px;text-align:center;border-radius:50%;background:#e4f0ec;color:#25785a;font-size:12px;font-weight:700;cursor:help;margin-left:4px;vertical-align:middle}
.pitch-legend{margin:6px 0 0;font-size:12px;color:var(--muted);text-align:center}
/* 认谱跟唱按钮在播放控制区下方单独成行 */
.step-entry-btn{display:flex;align-items:center;gap:8px;margin:10px 0 0;padding:12px 18px;width:100%;justify-content:center;font-size:15px;background:#fff;border:1px solid var(--mint-dark);color:var(--mint-dark);border-radius:9px;cursor:pointer;box-shadow:0 1px 3px rgba(0,0,0,.06)}
.step-entry-btn:hover{background:#f1faf6}
.step-entry-btn .action-icon{font-size:18px}
.step-lowoct{display:flex;align-items:center;gap:7px;margin:10px 0 0;font-size:13px;color:var(--ink);cursor:pointer;user-select:none}
.step-lowoct input{width:16px;height:16px;accent-color:var(--mint-dark)}
.step-measure-target{display:flex;gap:8px;flex-wrap:wrap;margin:4px 0 10px}
.step-measure-target .mt-chip{display:flex;flex-direction:column;align-items:center;min-width:46px;padding:6px 8px;background:#fff;border:1px solid var(--line);border-radius:8px;line-height:1.15}
.step-measure-target .mt-chip b{font-size:15px;color:var(--ink)}
.step-measure-target .mt-chip i{font-style:normal;font-size:12px;color:var(--mint-dark)}
.step-measure-target .mt-chip.rest{color:var(--muted);font-size:13px;justify-content:center}
.step-feedback{margin:10px 0 0;padding:10px 12px;background:#fff;border:1px solid var(--line);border-radius:8px}
.step-feedback .fb-title{font-size:14px;font-weight:600;margin-bottom:6px;color:var(--ink)}
.step-feedback .fb-row{display:flex;align-items:center;gap:10px;padding:4px 0;border-top:1px dashed var(--line);font-size:13px}
.step-feedback .fb-row:first-of-type{border-top:none}
.step-feedback .fb-idx{width:20px;height:20px;flex:none;display:flex;align-items:center;justify-content:center;background:#eef3f0;border-radius:50%;color:var(--muted);font-size:12px}
.step-feedback .fb-note{flex:1}
.step-feedback .fb-note i{font-style:normal;color:var(--mint-dark);margin-left:4px}
.step-feedback .fb-ok{font-size:12px;color:var(--muted);text-align:right}
.step-feedback .fb-row.good .fb-ok{color:#0ca769}
.step-feedback .fb-row.bad .fb-ok{color:#f05d5e}
.step-feedback .fb-ok.na{color:var(--muted)}
.note-group.singing .note-head{fill:#e39b16;stroke:#b9790c;stroke-width:2}
.note-group.singing .scan-note-zone{fill:rgba(227,155,22,.16);stroke:#e39b16;stroke-width:2}
.note-group.step-wrong .note-head{stroke:#f05d5e;stroke-width:3}
.note-group.step-wrong .scan-note-zone{fill:rgba(240,93,94,.16);stroke:#f05d5e;stroke-width:2}