/* Dictado melódico — todo acotado a .clv-dictado */

.clv-dictado .dc-wrap{max-width:860px;margin:0 auto}

.clv-dictado .dc-controls{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px 18px;margin-bottom:1.75rem}
.clv-dictado .dc-field{display:flex;flex-direction:column;gap:5px}
.clv-dictado .dc-field label{font-family:var(--clv-mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--clv-ink-faint);margin:0;font-weight:400}
.clv-dictado select,
.clv-dictado input[type="number"]{background:var(--clv-surface);color:var(--clv-ink);border:1px solid var(--clv-line);border-radius:6px;padding:8px 10px;font-size:15px;width:100%;height:auto;max-width:none}
.clv-dictado select:focus,
.clv-dictado input:focus{outline:none;border-color:var(--clv-pink)}
.clv-dictado optgroup{background:var(--clv-surface);color:var(--clv-ink-faint)}
.clv-dictado option{background:var(--clv-surface);color:var(--clv-ink)}

.clv-dictado .dc-range{margin-bottom:1.75rem;gap:6px}
.clv-dictado .dc-range-head{display:flex;justify-content:space-between;align-items:baseline}
.clv-dictado .dc-range-val{font-family:var(--clv-mono);font-size:14px;color:var(--clv-pink)}
.clv-dictado input[type="range"]{width:100%;accent-color:var(--clv-pink);background:transparent;border:0;padding:0}

.clv-dictado .dc-actions{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:1.75rem;align-items:center}
.clv-dictado .dc-ritual{padding:12px 14px;background:var(--clv-surface);border:1px solid var(--clv-line);border-radius:10px}
.clv-dictado .dc-ritual-label{font-family:var(--clv-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--clv-ink-faint);width:100%;margin-bottom:2px}

.clv-dictado .dc-btn{font-size:15px;border-radius:7px;padding:11px 18px;border:1px solid var(--clv-line);background:var(--clv-surface);color:var(--clv-ink);transition:all .15s;display:inline-flex;align-items:center;gap:8px}
.clv-dictado .dc-btn:hover{border-color:var(--clv-pink);background:var(--clv-raised)}
.clv-dictado .dc-btn:active{transform:translateY(1px)}
.clv-dictado .dc-btn.dc-primary{background:var(--clv-pink);border-color:var(--clv-pink);color:var(--clv-pink-deep);font-weight:600}
.clv-dictado .dc-btn.dc-primary:hover{background:var(--clv-pink-hover)}
.clv-dictado .dc-btn:disabled{opacity:.4;cursor:not-allowed}
.clv-dictado .dc-ico{font-size:13px}

.clv-dictado .dc-stage{background:var(--clv-surface);border:1px solid var(--clv-line);border-radius:12px;padding:1.5rem;min-height:180px;margin-bottom:1.25rem}
.clv-dictado .dc-stage-empty{color:var(--clv-ink-faint);font-style:italic;text-align:center;padding:2.5rem 0}

.clv-dictado .dc-tag{display:inline-block;font-family:var(--clv-mono);font-size:11px;color:var(--clv-pink);border:1px solid var(--clv-pink-soft);border-radius:20px;padding:2px 10px;margin-bottom:.75rem}
.clv-dictado .dc-beats{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:1.25rem}
.clv-dictado .dc-measure{display:flex;gap:6px;padding:8px;border:1px solid var(--clv-line);border-radius:8px;background:var(--clv-bg)}
.clv-dictado .dc-measure-label{font-family:var(--clv-mono);font-size:9px;color:var(--clv-ink-faint);align-self:center;padding:0 4px;letter-spacing:.1em}
.clv-dictado .dc-note-chip{min-width:34px;padding:0 4px;height:44px;border-radius:5px;background:var(--clv-raised);border:1px solid var(--clv-line);display:flex;align-items:center;justify-content:center;font-family:var(--clv-mono);font-size:12px;color:var(--clv-ink-soft);transition:all .12s}
.clv-dictado .dc-note-chip.is-rest{opacity:.6}
.clv-dictado .dc-note-chip.dc-measure-blank{min-width:72px;font-size:16px}
.clv-dictado .dc-note-chip.is-revealed{color:var(--clv-ink);border-color:var(--clv-pink-soft)}
.clv-dictado .dc-note-chip.is-playing{background:var(--clv-pink);color:var(--clv-pink-deep);border-color:var(--clv-pink);transform:scale(1.08)}
.clv-dictado .dc-dim{opacity:.35}
.clv-dictado .dc-chip-name{font-size:10px;line-height:1}

.clv-dictado .dc-measure-controls{display:flex;gap:8px;margin-top:.75rem;flex-wrap:wrap}
.clv-dictado .dc-measure-controls .dc-btn{padding:7px 12px;font-size:13px}

.clv-dictado .dc-reveal-area{margin-top:1.25rem;padding-top:1.25rem;border-top:1px dashed var(--clv-line)}
.clv-dictado .dc-meter-reveal{font-size:15px;color:var(--clv-ink);margin-bottom:1rem;padding:8px 12px;background:var(--clv-pink-soft);border-radius:8px;display:inline-block}
.clv-dictado .dc-meter-reveal b{color:var(--clv-pink);font-weight:600}
.clv-dictado .dc-hint{font-size:13px;color:var(--clv-ink-faint);font-style:italic}
.clv-dictado .dc-score{background:var(--clv-paper);border:1px solid var(--clv-line);border-radius:8px;padding:12px;margin:.75rem 0;overflow-x:auto}
.clv-dictado .dc-score svg{display:block;max-width:none}
.clv-dictado .dc-score-msg{color:#6b6390;font-size:13px;padding:1rem;text-align:center}
.clv-dictado .dc-answer-grid{display:flex;flex-wrap:wrap;gap:14px;margin-top:.6rem}
.clv-dictado .dc-rmeasure{display:flex;align-items:flex-end;gap:8px;padding:8px 10px;border:1px solid var(--clv-line);border-radius:8px;background:var(--clv-bg)}
.clv-dictado .dc-rnum{font-family:var(--clv-mono);font-size:9px;color:var(--clv-ink-faint);align-self:center;letter-spacing:.1em}
.clv-dictado .dc-rcell{display:flex;flex-direction:column;align-items:center;gap:2px}
.clv-dictado .dc-rfig{font-size:18px;color:var(--clv-pink);line-height:1}
.clv-dictado .dc-rname{font-family:var(--clv-mono);font-size:12px;color:var(--clv-teal)}

.clv-dictado .dc-status{font-family:var(--clv-mono);font-size:11px;color:var(--clv-ink-faint);letter-spacing:.1em;text-transform:uppercase;margin:1rem 0;text-align:center;min-height:1.2em}

.clv-dictado .dc-answer-zone{background:var(--clv-surface);border:1px solid var(--clv-line);border-radius:12px;padding:1.5rem;margin-bottom:1.25rem}
.clv-dictado .dc-az-head{margin-bottom:1rem}
.clv-dictado .dc-az-title{font-family:var(--clv-serif);font-size:20px;font-weight:600;display:block}
.clv-dictado .dc-az-sub{font-size:13px;color:var(--clv-ink-soft)}

.clv-dictado .dc-fig-picker{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin-bottom:1.25rem}
.clv-dictado .dc-fig-group,
.clv-dictado .dc-fig-toggles{display:flex;flex-wrap:wrap;gap:6px}
.clv-dictado .dc-fig-toggles{border-left:1px solid var(--clv-line);padding-left:16px}
.clv-dictado .dc-fig-btn{font-size:14px;border-radius:7px;padding:9px 13px;border:1px solid var(--clv-line);background:var(--clv-raised);color:var(--clv-ink-soft)}
.clv-dictado .dc-fig-btn:hover{border-color:var(--clv-pink)}
.clv-dictado .dc-fig-btn.is-active{border-color:var(--clv-pink);background:var(--clv-pink-soft);color:var(--clv-ink)}
.clv-dictado .dc-fig-btn.dc-toggle.is-on{border-color:var(--clv-pink);background:var(--clv-pink);color:var(--clv-pink-deep)}
.clv-dictado .dc-fig-preview{font-size:13px;color:var(--clv-ink-soft);width:100%;margin-top:2px}
.clv-dictado .dc-fig-preview b{color:var(--clv-pink)}

.clv-dictado .dc-piano{display:flex;gap:3px;margin-bottom:1.25rem;overflow-x:auto;padding-bottom:6px}
.clv-dictado .dc-key{min-width:46px;height:120px;border-radius:0 0 6px 6px;cursor:pointer;background:var(--clv-paper);border:1px solid #1c1640;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding:0 0 8px;gap:2px;transition:background .08s;flex-shrink:0}
.clv-dictado .dc-key:hover{background:#ddd2ee}
.clv-dictado .dc-key:active,
.clv-dictado .dc-key.is-pressed{background:var(--clv-pink)}
.clv-dictado .dc-key .dc-sol{font-family:var(--clv-mono);font-size:12px;color:#1c1640;font-weight:600}
.clv-dictado .dc-key .dc-sci{font-family:var(--clv-mono);font-size:9px;color:#6a5fa0}
.clv-dictado .dc-key.is-sharp{background:#1c1640;border-color:#000}
.clv-dictado .dc-key.is-sharp .dc-sol{color:var(--clv-paper)}
.clv-dictado .dc-key.is-sharp .dc-sci{color:#b6abd6}
.clv-dictado .dc-key.is-sharp:hover{background:#2a2152}
.clv-dictado .dc-key.is-sharp:active,
.clv-dictado .dc-key.is-sharp.is-pressed{background:var(--clv-pink)}

.clv-dictado .dc-my-answer{min-height:56px;background:var(--clv-bg);border:1px solid var(--clv-line);border-radius:8px;padding:10px;display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:1rem}
.clv-dictado .dc-empty-ans{color:var(--clv-ink-faint);font-style:italic;font-size:13px}
.clv-dictado .dc-ans-cell{display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 8px;border:1px solid var(--clv-line);border-radius:6px;background:var(--clv-raised)}
.clv-dictado .dc-ans-cell .dc-af{font-size:16px;color:var(--clv-pink);line-height:1}
.clv-dictado .dc-ans-cell .dc-an{font-family:var(--clv-mono);font-size:11px;color:var(--clv-ink)}

.clv-dictado .dc-answer-actions{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:1rem}

.clv-dictado .dc-correction{display:flex;flex-direction:column;gap:10px}
.clv-dictado .dc-corr-summary{font-size:16px;font-weight:600;padding:10px 14px;border-radius:8px}
.clv-dictado .dc-corr-summary.is-ok{background:var(--clv-ok-soft);color:var(--clv-teal)}
.clv-dictado .dc-corr-summary.is-partial{background:var(--clv-pink-soft);color:var(--clv-ink)}
.clv-dictado .dc-corr-row{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.clv-dictado .dc-corr-row .dc-lbl{font-size:12px;color:var(--clv-ink-soft);min-width:96px}
.clv-dictado .dc-corr-cell{display:flex;flex-direction:column;align-items:center;gap:2px;padding:5px 8px;border-radius:6px;border:1px solid var(--clv-line);min-width:40px}
.clv-dictado .dc-corr-cell .dc-cf{font-size:15px;line-height:1}
.clv-dictado .dc-corr-cell .dc-cn{font-family:var(--clv-mono);font-size:11px}
.clv-dictado .dc-corr-cell.is-good{border-color:#1f8a7c;background:var(--clv-ok-soft)}
.clv-dictado .dc-corr-cell.is-good .dc-cf,
.clv-dictado .dc-corr-cell.is-good .dc-cn{color:var(--clv-teal)}
.clv-dictado .dc-corr-cell.is-bad{border-color:#8a3a3a;background:var(--clv-bad-soft)}
.clv-dictado .dc-corr-cell.is-bad .dc-cf,
.clv-dictado .dc-corr-cell.is-bad .dc-cn{color:var(--clv-bad)}
.clv-dictado .dc-corr-cell.is-half{border-color:#9a7a2a;background:var(--clv-warn-soft)}
.clv-dictado .dc-corr-cell.is-half .dc-cf,
.clv-dictado .dc-corr-cell.is-half .dc-cn{color:var(--clv-warn)}
.clv-dictado .dc-legend{font-size:11px;color:var(--clv-ink-faint)}