/* ===== 练习模式选择器 + 小节通关锁止 ===== */
.mode-selector{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 6px}
.mode-chip{flex:1 1 auto;min-width:92px;padding:10px 10px;border:1px solid #d7ded9;background:#fff;border-radius:12px;cursor:pointer;font-size:14px;color:#3a463f;transition:.15s;text-align:center}
.mode-chip:hover{border-color:#8fb6e6}
.mode-chip.active{background:#2f6fd0;color:#fff;border-color:#2f6fd0;box-shadow:0 2px 8px rgba(47,111,208,.25)}
.mode-hint{font-size:13px;color:#6a766f;margin:2px 0 10px;line-height:1.5}
.lock-bar{display:flex;align-items:center;gap:8px;margin:0 0 12px;padding:8px 12px;background:#f3f7ee;border:1px solid #d9e6cc;border-radius:10px;font-size:13px;color:#4d6b3f}
.lock-bar.locked{background:#fdf3ec;border-color:#f0d4bd;color:#9a5a2b}
.lock-bar .lock-ico{font-size:15px}
.lock-bar .unlock-ico{color:#0ca769;font-weight:600}

/* 模式相关显隐（JS 切换 .mode-hidden） */
.mode-hidden{display:none!important}

/* ===== 音准指针（仅 pitch 模式显示，实时显示偏高/偏低） ===== */
.step-pitch-meter{position:relative;height:48px;margin:8px 0 12px;background:#f3f7f4;border:1px solid #e1e7e3;border-radius:12px;overflow:hidden}
.step-pitch-meter .spm-center{position:absolute;left:50%;top:0;bottom:0;width:2px;background:#2f6fd0;transform:translateX(-50%)}
.step-pitch-meter .spm-indicator{position:absolute;top:7px;bottom:7px;width:12px;border-radius:6px;background:#9aa6a1;transform:translateX(-50%);transition:left .06s linear,background .1s}
.step-pitch-meter .spm-axis{position:absolute;left:0;right:0;bottom:3px;display:flex;justify-content:space-between;font-size:11px;color:#8a948d;padding:0 9px}

/* 逐小节锁止：未过关小节禁用“下一小节” */
#stepNextBtn:disabled{opacity:.45;cursor:not-allowed}
.step-measure-target{display:flex;flex-wrap:wrap;justify-content:center;margin:6px 0}
.step-measure-target .mt-chip{display:inline-flex;flex-direction:column;align-items:center;margin:3px 4px;padding:6px 10px;background:#eef3ee;border-radius:10px;min-width:44px}
.step-measure-target .mt-chip b{font-size:16px}
.step-measure-target .mt-chip i{font-style:normal;font-size:12px;color:#6a766f}

/* ===== 认谱 · 逐音唱名 ===== */
/* 话筒状态提醒 */
.step-mic{font-size:13px;padding:3px 10px;border-radius:20px;background:#eee;color:#888;margin-left:8px;white-space:nowrap;transition:.15s}
.step-mic.on{background:#e7f7ef;color:#0ca769;font-weight:600}
/* 乐谱上的绿色框：画在 SVG 内部的 <rect>，用音符用户坐标定位，自动跟随 SVG 缩放/滚动 */
.score-scroll{position:relative}
/* 当前音竖条框：照抄播放时已验证可见的 .measure-beat-frame 配方（默认 display:none，加 class 才 display:block） */
#scoreSvg .step-frame{display:none;fill:rgba(15,157,106,.14);stroke:#07915f;stroke-width:2.5;pointer-events:none;vector-effect:non-scaling-stroke}
#scoreSvg .step-frame.done{display:block;fill:rgba(15,157,106,.30);stroke:#0ca769;stroke-width:2}
/* 节奏模式：罩住“整小节”的虚线框（当前小节） */
#scoreSvg .step-frame.measure{display:none}
#scoreSvg .step-frame.measure.on{display:block;fill:rgba(15,157,106,.12);stroke:#07915f;stroke-width:3.4;stroke-dasharray:8 5;animation:spFramePulse 1.1s ease-in-out infinite}
#scoreSvg .step-frame.on{display:block;fill:rgba(15,157,106,.20);stroke:#07915f;stroke-width:3.2;animation:spFramePulse 1.1s ease-in-out infinite}
@keyframes spFramePulse{0%,100%{stroke-width:3.2}50%{stroke-width:6}}
/* styles.css 末尾用 !important 关掉了音符头的播放高亮；这里只在“练习模式”作用域内恢复，避免影响播放观感 */
body[data-step-active="1"] #scoreSvg .note-group.active .note-head{fill:#0ca769!important;filter:drop-shadow(0 0 5px rgba(12,167,105,.7))!important}
body[data-step-active="1"] #scoreSvg .note-group.active .scan-note-zone{fill:rgba(15,157,106,.20)!important;stroke:#07915f!important;stroke-width:3!important}
body[data-step-active="1"] #scoreSvg .note-group.correct .note-head{fill:#0a7d4c!important}
.step-readout{display:flex;gap:14px;justify-content:center;margin:6px 0 12px;flex-wrap:wrap}
.step-live{display:flex;flex-direction:column;align-items:center;min-width:120px;padding:10px 14px;background:#fff;border:1px solid #e1e7e3;border-radius:12px}
.step-live strong{font-size:22px;color:#3a463f;line-height:1.2}
.step-label{font-size:12px;color:#8a948d;margin-bottom:2px}
.step-verdict{font-size:13px;margin-top:4px;font-weight:600}
.step-verdict.ok{color:#0ca769}
.step-verdict.wrong{color:#f05d5e}
.step-actions{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:6px 0}
.primary-step{background:#2f6fd0;color:#fff;border:1px solid #2f6fd0}
.primary-step:hover{background:#2a63bb}

/* ===== 乐谱上的绿色框（实时位置提示） =====
   复用「播放时已验证可见」的 .measure-beat-frame 机制：颜色/描边由 styles.css 的
   `.measure-beat-frame{...}` 与下方 .cur/.done 覆盖规则控制，显隐由 .active class 控制
   （styles.css: `.measure-beat-frame{display:none}.measure-beat-frame.active{display:block}`）。
   这条路径与播放范唱完全一致，因此任意浏览器（含微信/X5）都能稳定渲染。 */
body[data-step-active="1"] #scoreSvg .measure-beat-frame.cur{fill:rgba(27,201,130,.34);stroke:#0ca769;stroke-width:4}
body[data-step-active="1"] #scoreSvg .measure-beat-frame.done{fill:rgba(10,125,76,.16);stroke:#0a7d4c;stroke-width:2.5}
/* 练习时不在乐谱上显示唱名提示（唱名由绿框与文字提示承担，避免“直接给答案”） */
body[data-step-active="1"] #scoreSvg .note-label{display:none}
/* m45：练习模式下当前音符头必须亮绿；styles.css 末尾有 .note-group.active .note-head{fill:var(--ink)!important}
   在播放模式下把当前音显示为深色。练习模式用更高特异性的选择器覆盖它，确保音符头变绿。 */
body[data-step-active="1"] #scoreSvg .note-group.active .note-head,
body[data-step-active="1"] #scoreSvg .note-group.active .scan-note-zone{fill:#0ca769!important;stroke:#0ca769!important}
body[data-step-active="1"] #scoreSvg .note-group.correct .note-head,
body[data-step-active="1"] #scoreSvg .note-group.correct .scan-note-zone{fill:#0a7d4c!important;stroke:#0a7d4c!important}
/* m46：当前音指示改为 DOM 竖列（#stepGreenColumn），绝对定位在 #scoreScroll 内，
   纯 background 色块 + 边框 + 顶部箭头，任意浏览器/微信/X5 都稳定渲染；
   位置由 JS 用音符 getBoundingClientRect 实时计算，不存在 SVG 坐标错位问题。 */
#scoreScroll{position:relative}
#stepGreenColumn{position:absolute;z-index:25;pointer-events:none;top:0;left:0;width:30px;height:100%;display:flex;flex-direction:column;align-items:center}
#stepGreenColumn .sgc-arrow{width:0;height:0;border-left:13px solid transparent;border-right:13px solid transparent;border-top:16px solid #0ca769;margin-bottom:2px;flex:0 0 auto}
#stepGreenColumn .sgc-band{flex:1 1 auto;width:100%;background:rgba(12,167,105,.32);border-left:3px solid #0ca769;border-right:3px solid #0ca769;box-sizing:border-box}