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

html, body {
  margin: 0;
  height: 100%;
  background: #111;
  color: #fff;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  overscroll-behavior: none;
}

button { font: inherit; cursor: pointer; }

.screen { display: none; min-height: 100%; }
.screen.active { display: flex; }

/* ---------- Setup ---------- */
#setup {
  flex-direction: column;
  align-items: center;
  padding: max(24px, env(safe-area-inset-top)) 20px max(24px, env(safe-area-inset-bottom));
}

h1 {
  margin: 8px 0 24px;
  font-size: 34px;
  letter-spacing: 2px;
  font-weight: 900;
}
h1 span { color: #ffd400; }

form { width: 100%; max-width: 440px; }

.field {
  background: #1d1d1d;
  border-radius: 14px;
  padding: 14px 16px;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
details.field { display: block; }
.field label, summary { font-size: 16px; color: #ddd; }
summary { cursor: pointer; }
.hint { color: #888; font-size: 13px; margin: 10px 0 8px; }

input[type=number], textarea {
  background: #2a2a2a;
  color: #fff;
  border: 1px solid #333;
  border-radius: 10px;
  font-size: 20px;
  font-weight: 700;
  text-align: center;
  padding: 8px 4px;
  -moz-appearance: textfield;
}
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input:focus, textarea:focus { outline: 2px solid #ffd400; outline-offset: 0; }

textarea {
  width: 100%;
  text-align: left;
  font-size: 16px;
  font-weight: 400;
  padding: 10px;
  resize: vertical;
}

.stepper { display: flex; align-items: center; gap: 6px; }
.stepper input { width: 58px; }
.stepper button {
  width: 42px; height: 42px;
  border-radius: 10px;
  border: none;
  background: #333;
  color: #fff;
  font-size: 22px;
  font-weight: 700;
}
.stepper button:active { background: #555; }

.time-input { display: flex; align-items: center; gap: 4px; }
.time-input input { width: 52px; }
.time-input span { color: #888; font-size: 13px; margin-right: 4px; }

.summary {
  color: #aaa;
  text-align: center;
  font-size: 15px;
  margin: 18px 0;
  line-height: 1.5;
}
.summary b { color: #fff; }

.start-btn {
  width: 100%;
  padding: 18px;
  border: none;
  border-radius: 14px;
  background: #ffd400;
  color: #111;
  font-size: 22px;
  font-weight: 900;
  letter-spacing: 3px;
}
.start-btn:active { filter: brightness(.85); }

/* ---------- Timer ---------- */
#timer {
  flex-direction: column;
  justify-content: space-between;
  height: 100vh;
  height: 100dvh;
  padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));
  transition: background-color .25s;
  user-select: none;
  -webkit-user-select: none;
}
#timer.work { background: #12a645; }
#timer.rest { background: #d62828; }
#timer.prep { background: #d62828; }
#timer.paused .clock { opacity: .45; }

.top { text-align: center; }
.phase-label {
  font-size: clamp(28px, 8vw, 56px);
  font-weight: 900;
  letter-spacing: 3px;
}
.progress-label {
  font-size: clamp(16px, 4.5vw, 24px);
  opacity: .9;
  margin-top: 4px;
  font-weight: 600;
}

.middle {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.exercise-name {
  font-size: clamp(22px, 7vw, 48px);
  font-weight: 800;
  min-height: 1.2em;
}
.clock {
  font-size: min(34vw, 40vh);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  letter-spacing: -2px;
}
.next-label {
  font-size: clamp(15px, 4.5vw, 24px);
  opacity: .85;
  margin-top: 8px;
  min-height: 1.2em;
}

.bar {
  height: 8px;
  background: rgba(0,0,0,.25);
  border-radius: 4px;
  overflow: hidden;
}
#bar-fill { height: 100%; width: 0; background: rgba(255,255,255,.9); }
.total-left { text-align: center; margin: 8px 0 12px; opacity: .85; font-variant-numeric: tabular-nums; }

.controls { display: flex; justify-content: center; align-items: center; gap: 28px; }
.ctl {
  width: 64px; height: 64px;
  border-radius: 50%;
  border: 3px solid rgba(255,255,255,.85);
  background: rgba(0,0,0,.2);
  color: #fff;
  font-size: 22px;
}
.ctl.big { width: 84px; height: 84px; font-size: 28px; }
.ctl:active { background: rgba(0,0,0,.4); }

@media (orientation: landscape) and (max-height: 500px) {
  .clock { font-size: 45vh; }
  .ctl { width: 48px; height: 48px; font-size: 18px; }
  .ctl.big { width: 60px; height: 60px; }
}

/* ---------- Done ---------- */
#done { align-items: center; justify-content: center; background: #12a645; height: 100vh; height: 100dvh; }
.done-inner { text-align: center; padding: 24px; width: 100%; max-width: 440px; }
.done-title { font-size: 56px; font-weight: 900; margin-bottom: 16px; }
.done-stats { font-size: 18px; margin-bottom: 32px; opacity: .95; }