/* Shared visual system for every surface. Audio and scoring modules are unchanged. */
body.redesign,:is(body[data-surface],.embedded-metro){--bg:#101110;--panel:#191b19;--lime:#32c85b;--accent:#32c85b;--ink:#f5f5f7;--muted:#979c98;--line:#2c302d;color:var(--ink);background:var(--bg);font-family:Manrope,Arial,sans-serif;-webkit-font-smoothing:antialiased}
.new-dialog{background:#151715;border-color:#303431;border-radius:26px 26px 0 0;overscroll-behavior:contain;padding-bottom:env(safe-area-inset-bottom)}
.new-dialog>header{padding:18px 20px;background:#151715;border-bottom:0}.new-dialog>header h2{font-size:20px;letter-spacing:-.3px}.new-dialog>header button{width:34px;height:34px;min-height:34px;background:#252825;font-size:16px}.new-dialog .dialog-content{padding:0 20px 22px}.new-dialog .panel{padding:0;border:0;background:none}.new-dialog .topline,.new-dialog .eyebrow{display:none}
.new-dialog p,.new-dialog .help,.new-dialog small{font:400 12px/1.5 Manrope,Arial,sans-serif;color:var(--muted);letter-spacing:0}.new-dialog label,:is(body[data-surface],.embedded-metro) label{display:block;font-size:12px;color:#aeb3af;line-height:1.4}.new-dialog button,.new-dialog a,:is(body[data-surface],.embedded-metro) button{font-family:Manrope,Arial,sans-serif;letter-spacing:0;text-transform:none;touch-action:manipulation}
.new-dialog button:not([hidden]),:is(body[data-surface],.embedded-metro) button{border-radius:13px;border:1px solid transparent;background:#242724;color:#e5e8e5;font-size:13px;min-height:44px;padding:10px 12px;box-shadow:none}
.new-dialog button.primary,:is(body[data-surface],.embedded-metro) button.primary{background:#32c85b;color:#092b13;font-weight:750}.new-dialog button[aria-pressed=true],:is(body[data-surface],.embedded-metro) button[aria-pressed=true]{background:#193c24;color:#64e187;border-color:#338c49}.new-dialog button:disabled{opacity:.4}.new-dialog .lesson-choices{gap:5px}.new-dialog .lesson-choices button{padding:10px 7px;font-size:12px}.new-dialog .lesson-picker{margin:0 0 20px}.new-dialog .lesson-picker>p{margin:10px 0}.new-dialog select,:is(body[data-surface],.embedded-metro) select{appearance:none;background:#242724 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='m4 6 4 4 4-4' fill='none' stroke='%23979c98' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 12px center;color:#ecefec;border:1px solid #353a35;border-radius:12px;padding:13px 36px 13px 12px;font:14px Manrope,Arial,sans-serif;width:100%;margin-top:7px;min-height:46px}
.new-dialog input[type=number]{border:1px solid #343a35;background:#232723;color:#fff;border-radius:12px;font-size:20px;padding:10px}.new-dialog input[type=range],:is(body[data-surface],.embedded-metro) input[type=range]{accent-color:#32c85b}.new-dialog input[type=checkbox]{accent-color:#32c85b;width:19px;height:19px;flex-shrink:0}.new-dialog label.check{display:flex;align-items:center;gap:10px;padding:12px 0;font-size:13px;color:#e1e5e1}
.new-dialog details,:is(body[data-surface],.embedded-metro) details{padding:0;border:0;margin:12px 0}.new-dialog summary,:is(body[data-surface],.embedded-metro) summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;padding:15px 0;border-bottom:1px solid #2a302a;color:#b6bdb7;font:500 12px/1.4 Manrope,Arial,sans-serif}.new-dialog summary::-webkit-details-marker,:is(body[data-surface],.embedded-metro) summary::-webkit-details-marker{display:none}.new-dialog summary:after,:is(body[data-surface],.embedded-metro) summary:after{content:'+';font-size:19px;margin-left:12px;color:#707a72}.new-dialog details[open]>summary:after,:is(body[data-surface],.embedded-metro) details[open]>summary:after{content:'−'}.new-dialog details[open]>summary{margin-bottom:12px}
.new-dialog .segment-control{display:flex;gap:5px;margin:8px 0 16px}.new-dialog .segment-control button{flex:1;min-width:0;padding:9px 4px;font-size:13px}.new-dialog .training-pickers{grid-template-columns:1fr;margin-top:12px;gap:4px}.new-dialog .inline-help{display:none}.new-dialog .rare-options{border-top:1px solid #2c302d;padding-top:16px;margin-top:8px;gap:6px}.new-dialog .anchor-beats{margin:8px 0}.new-dialog .anchor-beats button{flex:1}.new-dialog .setup-tempo{display:flex;justify-content:space-between;padding-top:15px;border-top:1px solid #2c302d;color:#c6cdc7}.new-dialog .switch-editor{border:0;border-radius:0;padding:0;margin:0}.new-dialog .switch-sequence button{background:#173322;color:#6dd88a;border:0}.new-dialog .switch-palette button small{font-size:10px}.new-dialog .mode-card{border:1px solid #333a34;background:#1d241e;margin:12px 0 0;text-align:left;color:#dce5de}.new-dialog .calibration-link{margin:0 0 20px;background:#1b271e;color:#67dc89}
.new-dialog .settings-group{padding:0 0 18px;margin:0 0 18px;border-bottom:1px solid #292f2a}.new-dialog .settings-group h3{font:650 13px Manrope,Arial,sans-serif;margin:3px 0 14px;color:#f1f4f1}.new-dialog .sound-deck{border:0;margin:0;padding:0}.new-dialog .sound-modes{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:0 0 12px}.new-dialog .sound-modes button{padding:16px 8px;min-height:64px}.new-dialog .sound-modes button strong{font:650 16px Manrope,Arial,sans-serif}.new-dialog .sound-modes button span{display:none}.new-dialog .accent-toggle{border:0;min-height:48px;padding:10px;background:#202520;font-size:12px}.new-dialog .accent-toggle b{display:none}.new-dialog .accent-toggle .switch-mark{background:#444b44}.new-dialog .accent-toggle[aria-pressed=true] .switch-mark{background:#32c85b}.new-dialog .accent-toggle .switch-mark:after{background:#fff}.new-dialog .sound-extra:has(#volume)>summary{display:none}.new-dialog .sound-extra:has(#volume){margin:16px 0 0}.new-dialog .output-hint{font-size:11px;margin:8px 0 0}.new-dialog .settings-advanced>.technical-tools{margin:8px 0}.new-dialog .settings-advanced label{margin-top:16px}.new-dialog .settings-advanced p{font-size:11px}.new-dialog .settings-advanced .stats{display:grid;grid-template-columns:1fr 1fr}.new-dialog .settings-advanced .stats strong{font-size:24px}
/* Calibration remains the original three-stage process, with a compact status rail. */
.new-dialog .listen-picker{margin:0 0 20px}.new-dialog .listen-picker .help{font-size:12px;margin:10px 0}.new-dialog .calibration-steps{display:flex;gap:5px;margin:20px 0}.new-dialog .calibration-steps span{flex:1;border-top:3px solid #333a34;padding-top:9px;font-size:11px;color:#717b73}.new-dialog .calibration-steps .current{border-color:#32c85b;color:#6ee88f}.new-dialog .calibration-steps .complete{border-color:#25703b;color:#a4b5a8}.new-dialog #calibrationTitle{font:700 23px/1.2 Manrope,Arial,sans-serif;letter-spacing:-.4px;margin:12px 0}.new-dialog #calibrationText{font-size:14px;line-height:1.5}.new-dialog #calibrationFeedback{color:#68dc89;background:#1b2920;border-radius:12px;padding:12px}.new-dialog .calibration-panel .transport{gap:8px}.new-dialog #trainingGate{font-size:11px}.new-dialog #calibrationDone{width:100%;margin:12px 0}.new-dialog #beginTraining:disabled{display:none}.new-dialog #calibrationCancel{margin-top:8px}
/* Embedded screens receive the same controls, typography and green palette. */
:is(body[data-surface],.embedded-metro) main,:is(body[data-surface],.embedded-metro).compact-metro main.metro-main{max-width:600px;padding:0 20px 20px!important}:is(body[data-surface],.embedded-metro) .panel{background:none;border:0;padding:0!important;border-radius:0}:is(body[data-surface],.embedded-metro) .topline{display:none}:is(body[data-surface],.embedded-metro) h2{font:700 23px Manrope,Arial,sans-serif}:is(body[data-surface],.embedded-metro) p{color:var(--muted)}:is(body[data-surface],.embedded-metro) .rhythm-controls{border:0;margin:8px 0 14px;gap:12px;padding:0}:is(body[data-surface],.embedded-metro) .rhythm-row{grid-template-columns:1fr;gap:5px}:is(body[data-surface],.embedded-metro) .rhythm-row>span{font-size:11px;color:#a0a9a1}:is(body[data-surface],.embedded-metro) .choice-strip{gap:5px}:is(body[data-surface],.embedded-metro) .choice-strip button{border-radius:11px;min-height:38px;background:#242724;color:#aeb6b0;border:1px solid transparent}:is(body[data-surface],.embedded-metro) .choice-strip button[aria-pressed=true]{background:#193c24;color:#64e187;border-color:#338c49}:is(body[data-surface],.embedded-metro) .tempo-dial{background:radial-gradient(circle,#171e18 0 56%,#131714 57% 66%,transparent 67%);box-shadow:none}:is(body[data-surface],.embedded-metro) .dial-track{stroke:#303a32}:is(body[data-surface],.embedded-metro) .dial-arc{stroke:#32c85b}:is(body[data-surface],.embedded-metro) .dial-arm i{background:#f2f5f2;border:0;box-shadow:none;width:18px;height:18px}:is(body[data-surface],.embedded-metro) .dial-center span{color:#8e9990}:is(body[data-surface],.embedded-metro) .tempo-nudge{background:#202520;color:#d9e2db;border:0;border-radius:14px}:is(body[data-surface],.embedded-metro) .tempo-nudge.held{background:#32c85b;color:#08260e;box-shadow:none}:is(body[data-surface],.embedded-metro) #metroTap{background:#202520;color:#a9b5ad;border-radius:12px}:is(body[data-surface],.embedded-metro) .metro-beats button{border-radius:14px;background:#202520;border:1px solid transparent;color:#8e9a92;box-shadow:none}:is(body[data-surface],.embedded-metro) .metro-beats button.accent{border-color:#748a79;color:#ebf0ec}:is(body[data-surface],.embedded-metro) .metro-beats button.active{background:#32c85b;color:#08260e;border-color:#32c85b;box-shadow:none}:is(body[data-surface],.embedded-metro) .metro-parts i.on{background:#32c85b}:is(body[data-surface],.embedded-metro) #metroStart{background:#eeeef3;color:#101510;border-radius:15px}
:is(body[data-surface=stats],#statsDialog) .progress-dashboard>h2{display:none}:is(body[data-surface=stats],#statsDialog) .practice-totals{margin:8px 0 16px;gap:8px}:is(body[data-surface=stats],#statsDialog) .practice-totals>div,:is(body[data-surface=stats],#statsDialog) .progress-metrics>div{background:#1e251f;border:0;border-radius:16px;padding:18px 5px}:is(body[data-surface=stats],#statsDialog) .practice-totals strong{font-size:28px;color:#f0f5f1}:is(body[data-surface=stats],#statsDialog) .practice-totals span{font-size:10px;color:#91a094}:is(body[data-surface=stats],#statsDialog) .progress-metrics strong{color:#5ed67e;font-size:25px}:is(body[data-surface=stats],#statsDialog) .progress-dashboard h3{font-weight:600;font-size:13px;margin:26px 0 14px}:is(body[data-surface=stats],#statsDialog) .tempo-bar-track{background:#253428;height:10px}:is(body[data-surface=stats],#statsDialog) .tempo-bar-track i{background:#32c85b}:is(body[data-surface=stats],#statsDialog) .activity-day{border-radius:8px}:is(body[data-surface=stats],#statsDialog) .activity-legend i{background:#32c85b}:is(body[data-surface=stats],#statsDialog) .comparison-caption{font-size:11px}:is(body[data-surface=stats],#statsDialog) .progress-chart{background:#161e18;border-radius:16px;padding:8px}#statsDialog .records{padding:18px 20px;border-top:1px solid #303730;margin:0}#statsDialog .records .record-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}#statsDialog .records .record-grid>div{background:#1e251f;border-radius:14px;padding:14px}#statsDialog .records span{font-size:10px;color:#8f9c92}#statsDialog .records strong{font:600 22px Manrope,Arial,sans-serif;color:#e7efe9}.new-dialog .lesson-progress{background:#1e251f;border:0;border-radius:14px;padding:14px}.new-dialog .lesson-track{background:#2b3a2e}.new-dialog .lesson-track i{background:#32c85b}
@media(max-height:740px){:is(body[data-surface],.embedded-metro) .rhythm-controls{gap:7px;margin-bottom:8px}:is(body[data-surface],.embedded-metro) .rhythm-row{grid-template-columns:46px 1fr;gap:5px}:is(body[data-surface],.embedded-metro) .choice-strip button{min-height:34px}}

:is(body[data-surface=stats],#statsDialog) .progress-chart polyline{stroke:#32c85b}:is(body[data-surface=stats],#statsDialog) .progress-chart circle{fill:#32c85b}:is(body[data-surface=stats],#statsDialog) .activity-day{filter:hue-rotate(48deg)}.new-dialog .settings-group .sound-extra:empty{display:none}.new-dialog .settings-group .sound-extra:not(:has(label)){display:none}