/* Metronome v5 — gọn, vừa trên tab bar (393×660, 360×640). Nạp sau rebellion-v3.css */
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;padding:0;margin:0}
#view-metro header h1{font-size:22px}
#view-metro header p{font-size:12px;margin-top:2px}
#view-metro .badge{margin-top:8px;padding:5px 10px}
.hrow{display:flex;align-items:center;justify-content:space-between;gap:8px}
.modesw{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:650;color:var(--muted);cursor:pointer;flex:none;position:relative}
.modesw input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.modesw i{width:38px;height:22px;border-radius:11px;background:#232a35;border:1px solid var(--line);position:relative;transition:background .2s}
.modesw i::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#9aa3b2;transition:transform .2s,background .2s}
.modesw input:checked~i{background:#2a2412;border-color:#a16207}
.modesw input:checked~i::after{transform:translateX(16px);background:var(--amber)}
.modesw:has(input:checked) span{color:#fde68a}
.modesw input:focus-visible~i{outline:2px solid var(--wood);outline-offset:2px}
/* Stage lấp đầy */
#view-metro .app-inner{display:flex;flex-direction:column;min-height:100%;padding-bottom:4px}
#view-metro .stage{flex:1 1 auto;justify-content:space-evenly;gap:clamp(6px,1.4vh,12px);padding:clamp(6px,1.4vh,12px) 0 8px}
/* BPM to + chạm để nhập (input phủ trong suốt lên số) */
#view-metro .bpm-row{position:relative;cursor:text}
#view-metro .bpm{font-size:clamp(72px,12vh,92px);display:inline-block;overflow:visible;letter-spacing:0;line-height:1.1;padding:0 .1em .06em .04em;margin-right:-.06em}
#view-metro .bpm-input{position:absolute;inset:0;width:100%;height:100%;opacity:0;padding:0;border:0;font-size:16px;-moz-appearance:textfield;appearance:textfield}
#view-metro .bpm-input:focus{opacity:1;background:var(--card);border:1px solid var(--amber);font-size:56px;font-weight:750;color:var(--text);text-align:center}
#view-metro .bpm-row:hover .bpm{text-decoration:underline dotted rgba(217,160,102,.5);text-underline-offset:8px;text-decoration-thickness:2px}
#view-metro .bpm-controls input[type=range]{accent-color:var(--amber)}
#view-metro .step{width:44px;height:44px}
#view-metro .lights{min-height:24px;gap:12px}
.crow{width:100%;display:flex;align-items:center;gap:10px}
.crow .row-label{width:auto;flex:none;min-width:40px}
.crow .chips{flex:1;flex-wrap:nowrap;gap:6px}
.crow .chip{flex:1;padding:9px 0;text-align:center;min-height:40px}
#view-metro .actions{grid-template-columns:1fr;margin-top:0}
#m-btnStart{min-height:56px;font-size:17px;font-weight:750;border-radius:16px}
#view-metro .hint{margin:0;font-size:11px}
@media (prefers-reduced-motion:reduce){.modesw i,.modesw i::after,.light{transition:none!important}}