#countdownform { max-width: 580px; margin: 0 auto 28px; padding: 24px; border: 1px solid #ddd; border-radius: 14px; box-sizing: border-box; }
#countdownform [hidden] { display: none; }
.countdown-modes { display: flex; gap: 8px; margin-bottom: 24px; flex-wrap: wrap; }
.countdown-modes button { flex: 1; }
#countdownform .countdown-modes [aria-pressed="false"] { background: transparent; color: inherit; border-color: #aaa; box-shadow: none; }
.countdown-submit-row { display: flex; justify-content: center; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
#countdownform #q-input { width: 180px; max-width: 100%; box-sizing: border-box; }
.countdown-steppers { display: flex; justify-content: center; gap: 16px; }
.countdown-stepper { display: flex; flex-direction: column; gap: 6px; flex: 1; max-width: 110px; min-width: 0; }
.countdown-stepper label { margin-bottom: 5px; }
.countdown-stepper button { min-height: 44px; border: 1px solid #bbb; border-radius: 6px; background: #f4f4f4; color: inherit; cursor: pointer; font: inherit; }
.countdown-stepper button:hover { background: #e8e8e8; }
.countdown-stepper input { width: 100%; min-height: 44px; text-align: center; box-sizing: border-box; margin: 0; appearance: textfield; }
.countdown-stepper input::-webkit-inner-spin-button, .countdown-stepper input::-webkit-outer-spin-button { appearance: none; margin: 0; }
.countdown-presets { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 20px 0; }
#duration-error:empty { display: none; }
#countdown-sound.alarm-ringing { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: 10000; }
body.fullscreen-mode:has(#countdown-sound.alarm-ringing) .extra,
body.fullscreen-mode:has(#countdown-sound.alarm-ringing) #clock-actions { display: block !important; }
body.fullscreen-mode:has(#countdown-sound.alarm-ringing) .extra > :not(#clock-actions),
body.fullscreen-mode:has(#countdown-sound.alarm-ringing) #clock-actions > :not(#countdown-sound) { display: none !important; }
.dark #countdownform { border-color: #444; }
.dark .countdown-stepper button { background: #292929; border-color: #555; }
.dark .countdown-stepper button:hover { background: #383838; }
@media (max-width: 480px) {
  #countdownform { padding: 16px 12px; }
  .countdown-steppers { gap: 10px; }
}