:root { --accent: #c0392b; --accent-2: #f1948a; }

.timer-card { text-align: center; max-width: 22rem; margin: 0 auto; position: relative; }
.timer-card[data-mode="short"] { --accent: #27ae60; --accent-2: #82e0aa; }
.timer-card[data-mode="long"] { --accent: #2980b9; --accent-2: #74b9ff; }

.timer-ring {
  width: 10rem;
  height: 10rem;
  margin: 0 auto 1rem;
}
.timer-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring-bg { fill: none; stroke: var(--border); stroke-width: 8; }
.ring-fg {
  fill: none;
  stroke: var(--accent);
  stroke-width: 8;
  stroke-linecap: round;
  stroke-dasharray: 339.292;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.3s linear;
}

.timer-display {
  font-family: var(--font-display);
  font-size: 3rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  margin-bottom: 0.25rem;
}

.mode-label { color: var(--muted); font-size: 0.9rem; margin-bottom: 1rem; }

.preset-row { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; margin-bottom: 1rem; }
.preset {
  font: inherit;
  font-size: 0.8rem;
  padding: 0.45rem 0.75rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}
.preset.is-active {
  border-color: var(--accent);
  color: var(--text);
  background: color-mix(in srgb, var(--accent) 18%, transparent);
}

.stats { font-size: 0.85rem; color: var(--muted); margin-bottom: 0.75rem; }
.sound-toggle { font-size: 0.8rem; color: var(--muted); display: block; margin-bottom: 1rem; }