/* Match the existing compact header and settings rows. */
.library-brand{gap:6px}
.library-brand strong{white-space:nowrap}
.library-brand #theme-toggle{margin-left:auto}
.library-brand #account-open{margin-left:0}
.library-brand #theme-toggle,.library-brand #account-open,.library-brand #collapse-library{box-sizing:border-box;flex:0 0 32px;width:32px;height:32px;min-width:32px;min-height:32px;max-width:32px;max-height:32px;padding:7px}
:is(#tempo-toggle,#metro-tempo-toggle){width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:6px 0;border:0;border-radius:0;background:transparent;box-shadow:none;color:#555;font-size:12px;text-align:left;min-height:34px}
:is(#tempo-toggle,#metro-tempo-toggle):hover{color:#111;background:transparent;box-shadow:none}
:is(#tempo-toggle,#metro-tempo-toggle):active{transform:none}
:is(#tempo-toggle,#metro-tempo-toggle) .setting-value{display:flex;align-items:center;gap:6px;font-variant-numeric:tabular-nums;color:#333}
:is(#tempo-toggle,#metro-tempo-toggle) .setting-value>span{display:grid;place-items:center;width:14px;height:14px;color:#888}
:is(#tempo-toggle,#metro-tempo-toggle) svg{width:14px;height:14px}
:is(#tempo-toggle,#metro-tempo-toggle)[aria-expanded=true] svg{transform:rotate(180deg)}
:is(#tempo-panel,#metro-tempo-panel){padding-top:8px}
:is(#tempo-panel,#metro-tempo-panel)[hidden]{display:none}
.metronome .setting-label{margin:0 0 8px}
.metronome .setting-select{min-height:40px;margin:0;gap:14px}
.metronome .setting-select+.setting-select{margin-top:10px}
.metronome .custom-select{flex:0 1 120px;min-width:0}
.metronome .metro-volume-row input{width:120px;min-width:0;flex:0 1 120px;margin:0;accent-color:#222}
.topbar .transport #metro-start{flex:0 0 34px;width:34px;height:34px;min-width:34px;min-height:34px;padding:8px;border:0;background:transparent;color:#555;box-shadow:none;position:relative}
.topbar .transport #metro-start.active{background:#e8e8e8;color:#111}
#metro-start::after{content:'';position:absolute;width:3px;height:3px;bottom:3px;left:calc(50% - 1.5px);border-radius:50%;background:currentColor;opacity:0}
#metro-start.active::after{opacity:.45}
#metro-start.metro-beat::after{opacity:1}
#metro-start.metro-beat .metronome-arm{transform:rotate(-12deg);transform-origin:12px 17px}
@media(max-width:760px){
 .library-brand #theme-toggle,.library-brand #account-open,.library-brand #collapse-library{flex-basis:36px;width:36px;height:36px;min-width:36px;min-height:36px;max-width:36px;max-height:36px;padding:8px}
 :is(#tempo-toggle,#metro-tempo-toggle){min-height:40px;font-size:13px}
 .topbar .transport #metro-start{flex:0 0 30px;width:30px;height:30px;min-width:30px;min-height:30px;padding:7px}
 .topbar .transport #volume-button,.topbar .transport #scroll-toggle{flex:0 0 30px;width:30px;height:30px;min-width:30px;min-height:30px}
 .topbar .transport .play-button{flex:0 0 30px}
}
@media(max-width:360px){.topbar .transport #row-position{display:none}.topbar .transport #metro-start{flex-basis:28px;width:28px;height:28px;min-width:28px;min-height:28px;padding:6px}.topbar .transport #volume-button,.topbar .transport #scroll-toggle,.topbar .transport .play-button{flex-basis:28px;width:28px;height:28px;min-width:28px;min-height:28px}}
@media(prefers-reduced-motion:reduce){#metro-start.metro-beat .metronome-arm{transform:none}}
@media print{#theme-toggle,.metronome,#metro-tempo-popover{display:none!important}}
.metronome-control{position:relative;flex:none;display:flex;align-items:center}
#metro-tempo-popover{position:fixed;z-index:95;width:248px;max-width:calc(100vw - 16px);padding:14px 14px 8px;border:1px solid #dedede;border-radius:15px;background:#fff;color:#333;box-shadow:0 8px 32px #00000014,0 2px 6px #00000006}
#metro-tempo-popover .setting-label{margin-bottom:8px}
#metro-tempo-setting{margin-bottom:10px}
.metronome-control #metro-start{touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}