/* One compact settings control, shared by all BPM skins. */
body .app #bpmCard .v47-timer-nav{grid-template-columns:minmax(0,1fr) 44px!important;min-height:44px!important;gap:8px!important;padding-bottom:6px!important}
body .app #bpmCard .v47-bpm-pill{min-width:0!important;justify-self:start}
body .app #bpmCard .bpm-settings-toggle{display:inline-flex!important;align-items:center;justify-content:center;flex:none;width:44px!important;min-width:44px!important;height:44px!important;min-height:44px!important;padding:10px!important;margin:0!important;border:1px solid #8c9b90!important;border-radius:12px!important;background:#213328!important;color:#edf8ef!important;box-shadow:none!important;cursor:pointer;line-height:1!important}
body .app #bpmCard .bpm-settings-toggle svg{display:block;width:23px;height:23px;flex:none;pointer-events:none}
body .app #bpmCard .bpm-settings-toggle:focus-visible{outline:3px solid #e9d16a!important;outline-offset:3px}
body .app #bpmCard .bpm-settings-toggle[aria-expanded=true]{background:#456044!important}
body .app #bpmCard .classic-toolbar [data-config]{display:none!important}
body .app #bpmCard .classic-toolbar:after{display:none!important}
body .app #bpmCard .classic-toolbar{gap:12px}
body .app #bpmCard .timer-audio-settings{order:0}
body[data-skin=classic] .app #bpmCard .bpm-settings-toggle{background:#292929!important;border-color:#777!important;color:white!important}
body[data-skin=metal] .app #bpmCard .bpm-settings-toggle{background:linear-gradient(#eee2bd,#b0a47f)!important;border-color:#f0dfad!important;color:#282b20!important}




/* Keep the original three-column timer: small step above ten-step on each side. */
body .app :is(#bpmCard#bpmCard,#tabataCard#tabataCard) .timer-ten-step{display:grid!important;grid-template-columns:30px minmax(0,1fr) 30px!important;grid-template-rows:minmax(25px,1fr) minmax(22px,1fr)!important;align-items:center!important;column-gap:4px!important;row-gap:2px!important;width:100%!important;min-width:0!important;margin:8px 0 0!important}
body .app :is(#bpmCard#bpmCard,#tabataCard#tabataCard) .timer-ten-step>:not(button){grid-column:2!important;grid-row:1/span 2!important;width:100%!important;min-width:0!important;box-sizing:border-box!important}
body .app :is(#bpmCard#bpmCard,#tabataCard#tabataCard) .timer-ten-step>button:nth-child(2){grid-column:1!important;grid-row:1!important}
body .app :is(#bpmCard#bpmCard,#tabataCard#tabataCard) .timer-ten-step>button:nth-last-child(2){grid-column:3!important;grid-row:1!important}
body .app :is(#bpmCard#bpmCard,#tabataCard#tabataCard) .timer-ten-step>button:first-child{grid-column:1!important;grid-row:2!important}
body .app :is(#bpmCard#bpmCard,#tabataCard#tabataCard) .timer-ten-step>button:last-child{grid-column:3!important;grid-row:2!important}
body .app :is(#bpmCard#bpmCard,#tabataCard#tabataCard) .timer-ten-step>button{box-sizing:border-box!important;display:flex!important;align-items:center!important;justify-content:center!important;width:100%!important;min-width:0!important;height:25px!important;min-height:25px!important;padding:0!important;margin:0!important;border-radius:5px!important;font:700 17px/1 system-ui!important;letter-spacing:0!important}
body .app :is(#bpmCard#bpmCard,#tabataCard#tabataCard) .timer-ten-step>.timer-step-ten{height:22px!important;min-height:22px!important;font-size:10px!important}
body .app .timer-ten-step button:disabled{opacity:.4!important;cursor:not-allowed}
body .app :is(#bpmCard#bpmCard,#tabataCard#tabataCard) .timer-step-clone{grid-template-columns:22px minmax(0,1fr) 22px!important;column-gap:2px!important;margin:0!important}
body[data-skin=classic] .app .classic-config label:has(.timer-step-clone){flex-wrap:nowrap!important}
body[data-skin=classic] .app .classic-config .timer-step-clone{flex:0 1 155px;width:155px!important}
body[data-skin=classic] .app .classic-config .timer-step-clone input{width:100%!important}

/* Gold controls stay inside the original black window, with one-step restored. */
body[data-skin=metal] .app :is(#bpmCard#bpmCard,#tabataCard#tabataCard) .timer-step-clone{position:relative!important;display:block!important;width:100%!important;margin:0!important}
body[data-skin=metal] .app :is(#bpmCard#bpmCard,#tabataCard#tabataCard) .timer-step-clone>button{position:absolute!important;display:flex!important;left:auto!important;right:4px!important;top:auto!important;bottom:auto!important;width:21px!important;height:13px!important;min-height:13px!important;font-size:12px!important;line-height:1!important;border-radius:3px!important;z-index:3}
body[data-skin=metal] .app :is(#bpmCard#bpmCard,#tabataCard#tabataCard) .timer-step-clone>.timer-step-ten{font-size:8px!important}
body[data-skin=metal] .app .classic-config .timer-step-clone .gold-setting-face{inset:4px 28px 4px 4px!important;gap:0!important}
body[data-skin=metal] .app .classic-config .timer-step-clone input{padding-right:24px!important;appearance:textfield!important;-moz-appearance:textfield!important}
body[data-skin=metal] .app .classic-config .timer-step-clone input::-webkit-inner-spin-button,body[data-skin=metal] .app .classic-config .timer-step-clone input::-webkit-outer-spin-button{-webkit-appearance:none!important;margin:0!important}
body[data-skin=metal] .app .timer-step-clone>button:focus-visible{outline:2px solid #ffe5a1!important;outline-offset:1px}
body[data-skin=classic] .app :is(#bpmCard#bpmCard,#tabataCard#tabataCard) .timer-step-single>button{grid-row:1/span 2!important}
body[data-skin=classic] .app :is(#bpmCard#bpmCard,#tabataCard#tabataCard) .timer-step-single>button:first-child{grid-column:1!important}
body[data-skin=classic] .app :is(#bpmCard#bpmCard,#tabataCard#tabataCard) .timer-step-single>button:last-child{grid-column:3!important}

/* Classic: every numeric window has the same fixed dimensions and alignment. */
body[data-skin=classic] .app .classic-config label:has(input[type=number]){display:grid!important;grid-template-columns:minmax(0,1fr) 155px!important;align-items:center!important;gap:8px!important;min-height:54px!important;box-sizing:border-box!important}
body[data-skin=classic] .app .classic-config label:has(input[type=number])>.gold-setting-input{grid-column:2!important;justify-self:center!important;margin:0!important}
body[data-skin=classic] .app .classic-config .gold-setting-input{width:95px!important;min-width:95px!important;height:38px!important;box-sizing:border-box!important}
body[data-skin=classic] .app .classic-config .gold-setting-input input{width:95px!important;min-width:95px!important;height:38px!important;min-height:38px!important;padding:2px!important;box-sizing:border-box!important}
body[data-skin=classic] .app :is(#bpmCard#bpmCard,#tabataCard#tabataCard) .timer-step-clone{grid-column:2!important;width:155px!important;grid-template-columns:26px 95px 26px!important;grid-template-rows:18px 18px!important;column-gap:4px!important;row-gap:2px!important;margin:0!important}
body[data-skin=classic] .app :is(#bpmCard#bpmCard,#tabataCard#tabataCard) .timer-step-clone>button{height:18px!important;min-height:18px!important;font-size:13px!important;border-radius:3px!important}
body[data-skin=classic] .app :is(#bpmCard#bpmCard,#tabataCard#tabataCard) .timer-step-clone>.timer-step-ten{font-size:9px!important}
body[data-skin=classic] .app .classic-config .gold-setting-face{left:4px!important;right:4px!important;top:0!important;bottom:0!important;height:100%!important;gap:0!important}
body[data-skin=classic] .app .classic-config .gold-setting-face .chrome-digit{width:30px!important;height:30px!important;flex:0 1 auto!important}
/* Reduce the BPM title/settings row and summary strip without shrinking the dial. */
body .app #bpmCard .v47-timer-nav{min-height:28px!important;grid-template-columns:minmax(0,1fr) 28px!important;padding-bottom:3px!important;gap:4px!important}
body .app #bpmCard .v47-bpm-pill{font-size:18px!important;padding:0!important;line-height:1.1!important}
body .app #bpmCard .bpm-settings-toggle{width:28px!important;min-width:28px!important;height:28px!important;min-height:28px!important;padding:5px!important;border-radius:8px!important}
body .app #bpmCard .bpm-settings-toggle svg{width:17px!important;height:17px!important}
body .app #bpmCard .v47-hud-strip{min-height:48px!important;height:48px!important;padding:3px 5px!important;margin:0!important;box-sizing:border-box!important}
body .app #bpmCard .v47-hud-strip>div{min-height:0!important;padding:0 4px!important}
body .app #bpmCard .v47-hud-strip small{font-size:9px!important;line-height:1.1!important;margin:0!important}
body .app #bpmCard .v47-hud-strip strong{font-size:26px!important;line-height:1.1!important}
/* Equal windows across controls, including ones without a ten-step shortcut. */
body .app #bpmCard#bpmCard .v47-stepper,body .app #tabataCard#tabataCard .tabata-time-arrows{grid-template-columns:30px minmax(0,1fr) 30px!important;column-gap:4px!important}
body[data-skin=metal] .app .classic-config label:has(input[type=number]){height:154px!important;min-height:154px!important;box-sizing:border-box!important}

/* Four equal Tabata fields: larger number windows, compact stacked controls. */
body[data-skin=neon] .app #tabataCard#tabataCard>.fields:has(#tabataWork)>.field{display:grid!important;grid-template-rows:20px 76px!important;align-content:start!important;gap:6px!important;height:126px!important;min-height:126px!important;padding:8px 5px!important;box-sizing:border-box!important}
body[data-skin=neon] .app #tabataCard#tabataCard>.fields:has(#tabataWork)>.field>label{display:flex!important;align-items:center!important;justify-content:center!important;min-height:0!important;height:20px!important;margin:0!important;line-height:16px!important}
body[data-skin=neon] .app #tabataCard#tabataCard .tabata-time-arrows.timer-ten-step{grid-template-columns:20px minmax(0,1fr) 20px!important;grid-template-rows:37px 37px!important;column-gap:3px!important;row-gap:2px!important;width:100%!important;height:76px!important;margin:0!important}
body[data-skin=neon] .app #tabataCard#tabataCard .tabata-time-arrows.timer-ten-step>button{width:20px!important;height:22px!important;min-height:22px!important;border-radius:5px!important;font-size:15px!important;box-shadow:inset 0 1px #ffffff18!important}
body[data-skin=neon] .app #tabataCard#tabataCard .tabata-time-arrows.timer-ten-step>.timer-step-ten{height:20px!important;min-height:20px!important;font-size:8px!important;letter-spacing:-.3px!important}
body[data-skin=neon] .app #tabataCard#tabataCard .tabata-time-arrows .tabata-image-input{height:76px!important;width:100%!important;min-width:0!important;border-radius:10px!important}
body[data-skin=neon] .app #tabataCard#tabataCard .tabata-image-input .tabata-setting-digits{inset:4px 2px!important;gap:1px!important}
body[data-skin=neon] .app #tabataCard#tabataCard .tabata-image-input .tabata-setting-digits .photo-font-digit{height:52px!important;max-height:52px!important;min-width:0!important;width:36px!important;max-width:32%!important;flex:0 1 36px!important}

/* Match the larger Tabata windows across all five Neon BPM settings. */
body[data-skin=neon] .app #bpmCard#bpmCard>.fields:has(#bpmValue)>.field{display:grid!important;grid-template-columns:minmax(0,1fr)!important;grid-template-rows:32px 76px!important;align-content:space-between!important;gap:8px!important;height:154px!important;min-height:154px!important;padding:10px 5px!important;box-sizing:border-box!important}
body[data-skin=neon] .app #bpmCard#bpmCard>.fields:has(#bpmValue)>.field>label{display:flex!important;align-items:center!important;justify-content:center!important;min-height:0!important;height:32px!important;margin:0!important;line-height:16px!important}
body[data-skin=neon] .app #bpmCard#bpmCard .v47-stepper{grid-template-columns:20px minmax(0,1fr) 20px!important;column-gap:3px!important;width:100%!important;height:76px!important;margin:0!important}
body[data-skin=neon] .app #bpmCard#bpmCard .v47-stepper.timer-ten-step{grid-template-rows:37px 37px!important;row-gap:2px!important}
body[data-skin=neon] .app #bpmCard#bpmCard .v47-stepper:not(.timer-ten-step){grid-template-rows:76px!important}
body[data-skin=neon] .app #bpmCard#bpmCard .v47-stepper>button{width:20px!important;height:22px!important;min-height:22px!important;padding:0!important;border-radius:5px!important;font-size:15px!important;box-shadow:inset 0 1px #ffffff18!important}
body[data-skin=neon] .app #bpmCard#bpmCard .v47-stepper>.timer-step-ten{height:20px!important;min-height:20px!important;font-size:8px!important;letter-spacing:-.3px!important}
body[data-skin=neon] .app #bpmCard#bpmCard .neon-number-input,body[data-skin=neon] .app #bpmCard#bpmCard .neon-number-input input{height:76px!important;min-height:76px!important;width:100%!important;min-width:0!important;box-sizing:border-box!important;border-radius:10px!important}
body[data-skin=neon] .app #bpmCard#bpmCard .neon-number-face{inset:4px 2px!important;gap:1px!important}
body[data-skin=neon] .app #bpmCard#bpmCard .neon-number-face svg{height:52px!important;max-height:52px!important;width:36px!important;max-width:32%!important;min-width:0!important;flex:0 1 36px!important}

/* Gold returns to a compact black number window, with quiet one-step arrows inside. */
body[data-skin=metal] .app .classic-config label:has(input[type=number]){display:grid!important;grid-template-columns:minmax(0,1fr)!important;grid-template-rows:18px 80px!important;align-content:start!important;align-items:center!important;gap:6px!important;height:126px!important;min-height:126px!important;padding:8px 5px!important;line-height:18px!important;font-size:13px!important;box-sizing:border-box!important}
body[data-skin=metal] .app .classic-config .timer-step-clone .gold-setting-input{width:100%!important;min-width:0!important;height:80px!important;min-height:80px!important;padding:0!important;box-sizing:border-box!important;touch-action:none;user-select:none;cursor:ns-resize}
body[data-skin=metal] .app .classic-config .timer-step-clone input{width:100%!important;min-width:0!important;height:76px!important;min-height:76px!important;padding:6px 26px 6px 4px!important;box-sizing:border-box!important;font-size:32px!important;cursor:inherit}
body[data-skin=metal] .app .classic-config .timer-step-clone .gold-setting-input:focus-within{touch-action:none;user-select:text;cursor:text}
body[data-skin=metal] .app .classic-config .timer-step-clone .gold-setting-face{inset:6px 27px 6px 5px!important;gap:0!important}
body[data-skin=metal] .app .classic-config .timer-step-clone .gold-setting-face .chrome-digit{width:40px!important;height:60px!important;min-width:0!important;flex:0 1 40px!important}
body[data-skin=metal] .app .classic-config .timer-step-clone .gold-setting-face:has(.chrome-digit:nth-child(4)) .chrome-digit{height:46px!important}
body[data-skin=metal] .app .classic-config .timer-step-clone .gold-setting-face:has(.chrome-digit:nth-child(5)) .chrome-digit{height:36px!important}
body[data-skin=metal] .app .classic-config .gold-setting-input.is-scrubbing{border-color:#e9c570!important}
body[data-skin=metal] .app :is(#bpmCard#bpmCard,#tabataCard#tabataCard) .timer-step-clone>.timer-step-ten{display:none!important}
body[data-skin=metal] .app :is(#bpmCard#bpmCard,#tabataCard#tabataCard) .timer-step-clone>.timer-step-one{right:4px!important;width:20px!important;height:28px!important;min-height:28px!important;border:0!important;border-radius:3px!important;background:transparent!important;box-shadow:none!important;color:#969d86!important;text-shadow:none!important;font-size:0!important;touch-action:manipulation}
body[data-skin=metal] .app :is(#bpmCard#bpmCard,#tabataCard#tabataCard) .timer-step-clone>.timer-step-one::after{content:none!important}
body[data-skin=metal] .app :is(#bpmCard#bpmCard,#tabataCard#tabataCard) .timer-step-clone>.timer-step-one::before{position:static!important;display:block!important;font:12px/1 system-ui!important;background:none!important;box-shadow:none!important;color:inherit!important}
body[data-skin=metal] .app :is(#bpmCard#bpmCard,#tabataCard#tabataCard) .timer-step-clone>.timer-step-up{top:11px!important;bottom:auto!important}
body[data-skin=metal] .app :is(#bpmCard#bpmCard,#tabataCard#tabataCard) .timer-step-clone>.timer-step-up::before{content:'▴'!important}
body[data-skin=metal] .app :is(#bpmCard#bpmCard,#tabataCard#tabataCard) .timer-step-clone>.timer-step-down{top:auto!important;bottom:11px!important}
body[data-skin=metal] .app :is(#bpmCard#bpmCard,#tabataCard#tabataCard) .timer-step-clone>.timer-step-down::before{content:'▾'!important}
body[data-skin=metal] .app :is(#bpmCard#bpmCard,#tabataCard#tabataCard) .timer-step-clone>.timer-step-one:is(:hover,:focus-visible){background:#1c271e!important;color:#edcf91!important}
.gold-scroll-hint{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* Keep cumulative counts inside the dial when repetitions exceed 100. */
body .app #bpmCard .bpm-stopwatch-shell .bpm-machined-dial>#bpmCount.seg-display:has(.photo-font-digit:nth-child(3)){width:80%!important;max-width:80%!important;gap:clamp(2px,.8vw,6px)!important}
body .app #bpmCard .bpm-stopwatch-shell .bpm-machined-dial>#bpmCount.seg-display .photo-font-digit{flex:0 1 auto!important;min-width:0!important;max-width:100%!important}
body .app #bpmCard .chrome-count .chrome-digit{flex-shrink:1!important;min-width:0!important}

/* Neon: swipe only the number window; surrounding controls retain page scrolling. */
body[data-skin=neon] .app :is(.tabata-image-input,.neon-number-input){touch-action:none;user-select:none;cursor:ns-resize}
body[data-skin=neon] .app :is(.tabata-image-input,.neon-number-input)>input{cursor:inherit}
body[data-skin=neon] .app :is(.tabata-image-input,.neon-number-input):focus-within{touch-action:none;user-select:text;cursor:text}
body[data-skin=neon] .app .tabata-image-input.is-scrubbing,body[data-skin=neon] .app .neon-number-input.is-scrubbing>input{border-color:#d7ff20!important}

/* Reuse the empty upper corners of the round dial instead of a separate title row. */
body[data-skin=neon] .app #bpmCard#bpmCard{padding-top:10px!important;gap:8px!important}
body[data-skin=neon] .app #bpmCard#bpmCard>.v47-hud-strip{order:0!important;margin:0!important}
body[data-skin=neon] .app #bpmCard#bpmCard>.timer-audio-settings{order:1!important;margin:0!important}
body[data-skin=neon] .app #bpmCard#bpmCard>.bpm-stopwatch-shell{position:relative!important;margin:0 auto!important;padding:0!important;gap:0!important}
body[data-skin=neon] .app #bpmCard#bpmCard .bpm-stopwatch-shell>.bpm-machined-dial{margin:0 auto!important}
body[data-skin=neon] .app #bpmCard#bpmCard .bpm-stopwatch-shell>.v47-timer-nav{position:absolute!important;top:0!important;left:0!important;right:0!important;width:100%!important;height:32px!important;min-height:32px!important;grid-template-columns:minmax(0,1fr) 32px!important;align-items:center!important;padding:0!important;margin:0!important;border:0!important;z-index:5;pointer-events:none}
body[data-skin=neon] .app #bpmCard#bpmCard .bpm-stopwatch-shell>.v47-timer-nav .v47-bpm-pill{font-size:16px!important;line-height:1!important;justify-self:start!important;margin:0!important;padding:0!important}
body[data-skin=neon] .app #bpmCard#bpmCard .bpm-stopwatch-shell>.v47-timer-nav .bpm-settings-toggle{width:32px!important;min-width:32px!important;height:32px!important;min-height:32px!important;pointer-events:auto}

/* Gold BPM keeps the two transport controls together above the settings. */
body[data-skin=metal] .app #bpmCard .classic-bpm>.classic-actions {
  display:grid!important;
  grid-template-columns:minmax(0,2fr) minmax(72px,1fr);
}
body[data-skin=metal] .app #bpmCard .classic-bpm>.classic-actions>button {
  min-width:0;
  margin:0!important;
  padding-inline:6px!important;
}
body[data-skin=metal] .app #bpmCard #classicBpmConfig>.exercise-name-field {
  display:none!important;
}

/* Enlarge the Gold BPM readout. Multiple digits shrink without distorting the sprite. */
body[data-skin=metal] .app #bpmCard>.classic-bpm>.chrome-count {
  box-sizing:border-box;
  min-height:clamp(178px,53vw,238px)!important;
  padding:18px 8px!important;
  gap:clamp(3px,1.3vw,9px)!important;
}
body[data-skin=metal] .app #bpmCard>.classic-bpm>.chrome-count>.chrome-digit {
  flex:0 1 auto;
  width:clamp(94px,31vw,150px)!important;
  height:auto!important;
  aspect-ratio:1;
}