/* The tuner/metronome switch belongs to the radio, never to a page toolbar. */
#modeBar{display:flex;align-items:stretch;justify-content:center;gap:6px;flex:none;height:44px;padding:3px 0 5px;box-sizing:border-box;z-index:5;border:0;background:none;margin:0!important}
#exactStage #modeBar{position:absolute}
body #modeBar button{flex:1;min-width:0;min-height:0;margin:0;padding:4px 10px;border:1px solid color-mix(in srgb,var(--accent) 60%,#8e9eac)!important;border-radius:var(--radius,12px);font:650 13px/1.1 system-ui;background:#121c2be8!important;color:#eef4ff!important;box-shadow:inset 0 1px 1px #ffffff24,0 2px 4px #0004;touch-action:manipulation}
body #modeBar button[aria-pressed=true]{background:color-mix(in srgb,var(--accent) 40%,#14202d)!important;color:#fff!important;border-color:var(--accent)!important;box-shadow:inset 0 1px 1px #ffffff45,0 0 8px color-mix(in srgb,var(--accent) 25%,transparent)}
#exactStage.light #modeBar button{background:#fff3e2ed!important;color:#26372f!important}
#exactStage.light #modeBar button[aria-pressed=true]{background:color-mix(in srgb,var(--accent) 25%,#fff9e8)!important;color:#182e25!important;border-width:2px!important}
#exactStage[data-theme="11"] #modeBar button{border-radius:10px;border-color:#7368b6!important}
#exactStage[data-theme="11"] #modeBar button[aria-pressed=true]{background:#69319ce8!important;border-color:#e57df4!important}
#exactStage.round #modeBar button{border-radius:999px;border-color:#dc87b2!important}
#exactStage.round #modeBar button[aria-pressed=true]{background:#f9d1e6!important;color:#60354d!important}
#exactStage[data-theme="13"] #modeBar button{border-radius:3px}
#exactStage[data-theme="14"] #modeBar button{border:2px solid #192d3e!important;border-radius:9px;box-shadow:0 2px 0 #192d3e}
#metronomePanel[hidden]{display:none!important}.metronome-mode .exactSlot:not(.exact-gear){visibility:hidden;pointer-events:none}.metronome-mode:not(.exact) .radio{display:none!important}
.metroExact{position:absolute;inset:0;pointer-events:none;color:#fff1dd}.metroExact .metroSlot{position:absolute;box-sizing:border-box;display:flex;align-items:center;justify-content:center;pointer-events:auto;gap:5px}
#exactStage.light .metroExact{color:#173b2a}.metroSlot button,.metroSlot select,.metroSlot input{font-family:inherit;color:inherit;box-sizing:border-box}.metroSlot button{cursor:pointer;box-shadow:none}
.metro-select select{width:48%!important;padding:0 6%!important;color:inherit!important}.metroSlot option{background:#fff;color:#182333}
.metro-strings button{flex:1;min-width:0;min-height:0!important;height:calc(100% - 5px);background:linear-gradient(#333444,#161a27);color:#fff;border:1px solid #bab6a5;border-radius:10px;padding:1px;font-size:calc(22px * var(--scale,1))}
.metro-strings #metroTap{flex:2;font-size:calc(17px * var(--scale,1))}
#exactStage.light .metro-strings button{background:linear-gradient(#fff5df,#e6d7c5);color:#243c31}#exactStage.round .metro-strings button{border-radius:100px;background:linear-gradient(#ffedf6,#efa3cc);color:#623447;height:65%}
.metro-note input{appearance:textfield;-moz-appearance:textfield;border:0!important;background:transparent!important;box-shadow:none!important;outline:none;min-width:0!important;width:100%;height:100%;min-height:0!important;padding:0!important;text-align:center;font:bold calc(68px * var(--scale,1))/1 system-ui;color:inherit}
.metro-note input::-webkit-inner-spin-button{appearance:none}.metro-hz,.metro-status{font-weight:bold;font-size:calc(15px * var(--scale,1))}.metro-hz{font-size:calc(12px * var(--scale,1))}
.metro-note input{cursor:text;border-bottom:1px dashed color-mix(in srgb,currentColor 45%,transparent)!important;border-radius:8px}
.metro-note input:focus{outline:2px solid currentColor;outline-offset:2px;background:#ffffff14!important}
body #metronomePanel #metroEdit{min-height:0;padding:0;margin:0;border:0;border-radius:0;background:transparent;color:inherit;box-shadow:none;cursor:pointer;white-space:nowrap}
#exactStage[data-theme="13"] .metro-note input{font-size:calc(42px * var(--scale,1))}
.metro-meter #metroNeedle{position:absolute;left:var(--swing,50%);top:0;height:100%;width:5px;border-radius:8px;background:#55dc91;box-shadow:0 0 8px #62ffaa;transform:translateX(-50%)}
#exactStage.circular .metro-meter #metroNeedle{left:50%;height:25%;transform-origin:50% 400%;transform:translateX(-50%) rotate(var(--angle,0deg))}
.metro-auto{gap:4px!important}.metro-auto i{display:flex;justify-content:center;align-items:center;max-width:25px;width:22px;height:22px;border-radius:50%;background:#253446;color:#fff;font:600 10px system-ui;box-shadow:0 0 0 1px #aaa9}.metro-auto i.on{background:#72f1ac;color:#153622;box-shadow:0 0 9px #5affa4}
.metro-info{padding:4px;gap:10px!important}.metro-info #metroPlay{width:47%;height:100%;max-height:52px;min-height:30px;background:#b7f5ce;color:#143822;border:1px solid #75b996;border-radius:10px;font-weight:750;font-size:calc(18px * var(--scale,1))}
.metroVolume{display:flex;align-items:center;gap:5px;width:45%;font-size:20px}.metroVolume input{min-width:0;width:100%;accent-color:#66dca0;padding:0;min-height:30px}
.metro-cal{display:flex;gap:10px!important;font:600 11px system-ui;background:#14202ad9!important;color:#fff!important;border-radius:9px;padding:2px 8px}.metro-cal select{width:40%!important;min-height:28px!important;background:transparent!important;border:0;font-size:11px!important;padding:0!important;color:#fff!important}.metro-cal label{display:flex;align-items:center;gap:5px;white-space:nowrap}.metro-cal input{accent-color:#8bebb4;width:14px;height:14px;min-height:0!important}
.metroNeutral{--scale:1;box-sizing:border-box;flex:1;min-height:0;width:min(100%,640px);padding:18px;display:grid;grid-template-columns:1fr;grid-template-rows:44px minmax(58px,1fr) 24px 28px 50px 42px 54px 38px;gap:8px;overflow:auto;background:linear-gradient(#263846,#17232c);color:#eef9f6;border:2px solid #5b7380;border-radius:22px}
.metroNeutral .metroSlot{display:flex;align-items:center;justify-content:center;position:relative;min-height:0}.metroNeutral .metro-note{grid-row:2}.metroNeutral .metro-hz{grid-row:3}.metroNeutral .metro-status{grid-row:4}.metroNeutral .metro-strings{grid-row:5;gap:10px}.metroNeutral .metro-meter{display:none}.metroNeutral .metro-auto{grid-row:6}.metroNeutral .metro-info{grid-row:7}.metroNeutral .metro-cal{grid-row:8}.metroNeutral .metro-select select{height:42px;border:1px solid #829a9b;border-radius:10px;background:#17232c;color:#fff}
body:has(#modeBar) .shell{min-height:0}
.signalCard>.activity #confidence,.signalCard>.meter{display:none!important}

/* Keep mode selection and controls readable in the light illustrated themes too. */
body #metronomePanel .metro-cal select{color:#fff!important;color-scheme:dark}
body #metronomePanel .metro-cal option{background:#17232c!important;color:#fff!important}
body #metronomePanel .metro-select select{color:inherit!important;color-scheme:normal}
#exactStage.round .metro-select select:first-child{padding-left:15%!important}
.metro-auto i{flex:1;min-width:0;max-width:22px;height:20px;font-size:10px}
#exactStage.round .metro-strings{gap:5%!important}
#exactStage.round .metro-strings button{flex:1;height:48%;font-weight:700;border:2px solid #fff9;box-shadow:inset 2px 2px 5px #fffb,0 4px 8px #9d45624d}
#exactStage.round .metro-strings #metroTap{flex:1.6}

/* Neutral also keeps its title, settings and mode switch inside its instrument panel. */
.neutralHeading{display:flex;align-items:center;gap:8px;justify-content:space-between;margin:0 0 6px;min-height:38px!important}
.neutralHeading h1{font-size:22px!important;margin:0}.neutralHeading small{display:none}
.neutralHeading #settingsButton{min-height:36px;padding:5px 10px;font-size:12px}
.radio>#modeBar{margin-bottom:10px!important;width:100%}
.metroNeutral{grid-template-rows:38px 44px 40px minmax(58px,1fr) 20px 24px 44px 30px 48px 34px;gap:6px;padding:12px}
.metroNeutral>.neutralHeading{grid-row:1}.metroNeutral>#modeBar{grid-row:2;width:100%}
.metroNeutral>.metro-select{grid-row:3}.metroNeutral>.metro-note{grid-row:4}.metroNeutral>.metro-hz{grid-row:5}.metroNeutral>.metro-status{grid-row:6}.metroNeutral>.metro-strings{grid-row:7}.metroNeutral>.metro-auto{grid-row:8}.metroNeutral>.metro-info{grid-row:9}.metroNeutral>.metro-cal{grid-row:10}
@media(max-height:650px){.metroNeutral{padding:8px;gap:4px;grid-template-rows:32px 40px 36px minmax(48px,1fr) 16px 20px 38px 26px 40px 30px}.metroNeutral>.neutralHeading h1{font-size:19px!important}.metroNeutral>.metro-select select{height:100%}.metroNeutral>.metro-note input{font-size:48px}}