:root {
  --navy-950: #060e24;
  --navy-900: #0a1530;
  --navy-800: #12224a;
  --navy-700: #1c336b;
  --navy-selected: #34549d;

  --text: #eaf0ff;
  --text-dim: #9fb0d8;

  --ring-green: #3ddc57;
  --ring-yellow: #f2d640;
  --ring-orange: #f08a24;
  --ring-red: #e5362e;
  --ring-track: #1a2c5c;
  --ring-width: 14;

  --work-bg: #8b1a1a;
  --work-bg-active: #b32222;
  --break-short-bg: #1f8a3b;
  --break-long-bg: #2fb34f;
  --history-work: #4d0e0e;
  --history-break-short: #0e4a1e;
  --history-break-long: #17592a;
  --finish-bg: #d4a017;
  --finish-text: #2a1d00;
  --button-text: #ffffff;
  --active-outline: #ffffff;

  --clock-tick: #5b73ad;
  --clock-tick-major: #c4d2f5;
  --clock-hand: #eaf0ff;
  --clock-second: #f08a24;
  --clock-meridiem: #9fb0d8;

  --shadow-color: rgba(0, 0, 0, 0.45);
  --shadow-ring: drop-shadow(0 2px 3px var(--shadow-color));
  --shadow-clock: drop-shadow(1px 2px 1.5px var(--shadow-color));

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --radius-pill: 14px;
  --radius-button: 18px;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --dial-size: min(82vw, 42dvh);
  --transition: 0.2s ease;
}

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
}

html {
  background: var(--navy-950);
}

body {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 100dvh;
  height: calc(100dvh + env(safe-area-inset-bottom, 0px));
  font-family: var(--font);
  color: var(--text);
  background: var(--navy-900);
  background-image: linear-gradient(170deg, var(--navy-700) 0%, var(--navy-900) 45%, var(--navy-950) 100%);
  overscroll-behavior: none;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}

.app {
  height: 100%;
  max-width: 520px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: calc(var(--space-4) + env(safe-area-inset-top)) var(--space-4) calc(var(--space-3) + env(safe-area-inset-bottom));
}

.totals {
  width: 100%;
  display: flex;
  gap: var(--space-3);
}

.total {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-pill);
  color: var(--button-text);
}

.total-work { background: var(--work-bg); }
.total-break { background: var(--break-short-bg); }

.total-label {
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.85;
}

.total-value {
  font-size: 1.9rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.dial {
  width: var(--dial-size);
  height: var(--dial-size);
}

.dial-svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}

.ring-track,
.ring-remaining,
.ring-overtime {
  fill: none;
  stroke-width: var(--ring-width);
}

.ring-track {
  stroke: var(--ring-track);
  filter: var(--shadow-ring);
}

.ring-remaining {
  stroke: var(--ring-green);
  stroke-linecap: butt;
}

.ring-overtime {
  stroke: var(--ring-red);
  stroke-linecap: butt;
}

.history-arc {
  fill: none;
  stroke-width: var(--ring-width);
  stroke-linecap: butt;
}

.history-work { stroke: var(--history-work); }
.history-short { stroke: var(--history-break-short); }
.history-long { stroke: var(--history-break-long); }

.clock-numeral {
  fill: var(--clock-tick-major);
  font-size: 14px;
  font-weight: 600;
  text-anchor: middle;
  dominant-baseline: central;
  font-family: var(--font);
}

.tick { stroke: var(--clock-tick); stroke-width: 1; }
.tick-major { stroke: var(--clock-tick-major); stroke-width: 2; }

.clock-shadow { filter: var(--shadow-clock); }

.hand { stroke: var(--clock-hand); stroke-linecap: round; }
.hand-hour { stroke-width: 5; }
.hand-minute { stroke-width: 3.5; }
.hand-second { stroke: var(--clock-second); stroke-width: 1.6; }

.clock-meridiem {
  fill: var(--clock-meridiem);
  stroke: var(--navy-900);
  stroke-width: 4px;
  paint-order: stroke;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-anchor: middle;
  dominant-baseline: central;
  font-family: var(--font);
}

.countdown {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.countdown-value {
  font-size: clamp(2.6rem, 14vw, 4rem);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.countdown-value.overtime { color: var(--ring-red); }

.countdown-caption {
  margin-top: var(--space-1);
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.actions {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-2);
}

.action {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  min-height: 84px;
  padding: var(--space-2) var(--space-1);
  border: 0;
  border-radius: var(--radius-button);
  color: var(--button-text);
  font-family: var(--font);
  cursor: pointer;
  transition: transform var(--transition), box-shadow var(--transition), filter var(--transition);
}

.action:active { transform: scale(0.96); }

.action-emoji { font-size: 1.8rem; line-height: 1; }
.action-label { font-size: 0.78rem; font-weight: 700; text-align: center; line-height: 1.15; }

.action-work { background: var(--work-bg); }
.action-short { background: var(--break-short-bg); }
.action-long { background: var(--break-long-bg); }
.action-finish { background: var(--finish-bg); color: var(--finish-text); }

.action:not([aria-pressed="true"]) { filter: saturate(0.75) brightness(0.85); }

.action[aria-pressed="true"] {
  box-shadow: 0 0 0 3px var(--active-outline);
  filter: none;
}

.action-work[aria-pressed="true"] { background: var(--work-bg-active); }

.utility {
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.utility-btn {
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 50%;
  background: var(--navy-800);
  color: var(--text);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  transition: background var(--transition);
}

.utility-btn[aria-pressed="true"] { background: var(--navy-selected); }

.version {
  margin-left: auto;
  font-size: 0.7rem;
  color: var(--text-dim);
  opacity: 0.7;
  background: none;
  border: 0;
  padding: 0;
  font-family: inherit;
  cursor: pointer;
  transition: opacity var(--transition);
}

.version:hover, .version:active { opacity: 1; }

@media (max-height: 640px) {
  .total-value { font-size: 1.5rem; }
  .action { min-height: 70px; }
  .action-emoji { font-size: 1.5rem; }
}