.countdown-view {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  padding: var(--space-5);
  overflow-y: auto;
  transition: background 200ms ease;
}

.countdown-view.countdown-done {
  background: rgba(192, 57, 43, 0.25);
  animation: countdown-flash 700ms ease-in-out infinite;
}

@keyframes countdown-flash {
  0%, 100% { background: rgba(192, 57, 43, 0.15); }
  50% { background: rgba(192, 57, 43, 0.45); }
}

.countdown-display {
  font-size: clamp(3rem, 14vw, 7rem);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.countdown-progress {
  width: min(90%, 500px);
  height: 14px;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.12);
  overflow: hidden;
}

.countdown-progress-fill {
  height: 100%;
  background: var(--surface-mauve-bg);
  transition: width 200ms linear;
}

.countdown-duration-label {
  color: var(--color-text-dim);
  font-size: 0.95rem;
}

.countdown-presets,
.countdown-steppers,
.countdown-controls {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: center;
}

.countdown-preset,
.countdown-step,
.countdown-btn {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--color-bg-elevated);
  font-weight: 600;
  font-size: 1rem;
}

.countdown-btn--primary {
  background: var(--surface-mauve-bg);
  min-width: 120px;
}