.playback-control { border-top: 1px solid #343937; background: #171a19; color: #eceee8; font: 11px Inter, system-ui, sans-serif; }
.playback-primary { display: flex; align-items: end; flex-wrap: wrap; gap: 8px; padding: 10px 13px 8px; }
.playback-primary label, .playback-advanced label, .metro-options label { display: grid; gap: 3px; color: #9ca39f; font-size: 9px; }
.playback-primary input[type="number"], .playback-primary select, .playback-advanced select, .metro-options select { min-height: 29px; border: 1px solid #3b413f; border-radius: 6px; background: #232725; color: #f1f2ed; padding: 4px 7px; }
.playback-primary input[type="number"] { width: 66px; }
.playback-primary button, .playback-open, .metro-actions button { min-height: 30px; border: 1px solid #3c4541; border-radius: 7px; background: #262c29; color: #eef1ea; padding: 6px 10px; cursor: pointer; text-decoration: none; }
.playback-primary .playback-play, .metro-actions .metro-start { border-color: #b8ef64; background: #b8ef64; color: #12150f; font-weight: 750; }
.playback-check { display: flex !important; align-items: center; gap: 5px !important; min-height: 29px; color: #c2c7c2 !important; font-size: 10px !important; }
.playback-progress { height: 2px; background: #292e2c; }
.playback-progress span { display: block; width: 0; height: 100%; background: #b8ef64; transition: width 60ms linear; }
.playback-advanced { display: flex; flex-wrap: wrap; gap: 10px; padding: 9px 13px; border-top: 1px solid #2d3230; }
.playback-advanced[hidden] { display: none; }
.playback-advanced label { min-width: 130px; }
.playback-advanced input[type="range"] { width: 140px; }
.playback-status { min-height: 20px; padding: 0 13px 8px; color: #858d89; font-size: 9px; }
.playback-event-control { display: flex; align-items: center; justify-content: center; gap: 7px; margin-top: 7px; }
.playback-event-control button { min-height: 28px; border: 1px solid #b8ef64; border-radius: 7px; background: #b8ef64; color: #12150f; padding: 5px 9px; font: 700 10px Inter, system-ui, sans-serif; cursor: pointer; }
.playback-event-control span { color: #858d89; font: 9px Inter, system-ui, sans-serif; }
.standalone-metronome { max-width: 720px; margin: 0 auto; color: #ecf0ea; font-family: Inter, system-ui, sans-serif; }
.metro-readout { display: grid; justify-items: center; padding: 30px 0 18px; }
.metro-readout strong { font-size: clamp(68px, 16vw, 132px); line-height: .88; letter-spacing: -.06em; }
.metro-readout > span { color: #aab1ad; font-size: 11px; letter-spacing: .18em; }
.metro-beat { margin-top: 20px; color: #b8ef64; font-size: 16px; font-weight: 700; }
.metro-tempo { width: 100%; accent-color: #b8ef64; }
.metro-actions { display: flex; justify-content: center; gap: 10px; margin: 26px 0; }
.metro-actions button { min-width: 120px; }
.metro-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; padding: 20px; border: 1px solid #333a37; border-radius: 14px; background: #1a1e1c; }
.metro-options input[type="range"] { width: 100%; }
@media (max-width: 650px) {
  .playback-open { margin-left: 0; }
  .metro-options { grid-template-columns: 1fr; }
}