*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --color-bg:              #111;
  --color-surface:         #1c1c1c;
  --color-surface-2:       #252525;
  --color-text:            #fff;
  --color-text-muted:      #888;
  --color-primary:         #e74c3c;
  --color-phase-warmup:    #3498db;
  --color-phase-sprint:    #e74c3c;
  --color-phase-recovery:  #2ecc71;
  --color-danger:          #c0392b;
  --radius:                12px;
  --touch-min:             44px;
}

body {
  background:                var(--color-bg);
  color:                     var(--color-text);
  font-family:               system-ui, -apple-system, sans-serif;
  min-height:                100dvh;
  max-width:                 480px;
  margin:                    0 auto;
  -webkit-tap-highlight-color: transparent;
}

/* ── Screens ─────────────────────────────────────────────────────────────── */

.screen { display: flex; flex-direction: column; min-height: 100dvh; }
.screen[hidden] { display: none; }

/* ── Header ──────────────────────────────────────────────────────────────── */

.app-header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         16px;
  background:      var(--color-surface);
  border-bottom:   1px solid #2a2a2a;
  position:        sticky;
  top:             0;
  z-index:         10;
}

.app-header h1 { font-size: 18px; font-weight: 600; }

/* ── Buttons ─────────────────────────────────────────────────────────────── */

button { cursor: pointer; border: none; background: none; color: inherit; font: inherit; }

.btn-primary {
  background:  var(--color-primary);
  color:       #fff;
  padding:     8px 16px;
  border-radius: 20px;
  font-size:   14px;
  font-weight: 600;
  min-height:  var(--touch-min);
  display:     inline-flex;
  align-items: center;
}

.btn-full { width: 100%; border-radius: var(--radius); font-size: 16px; justify-content: center; margin-top: 8px; }

.btn-icon {
  font-size:   20px;
  min-width:   var(--touch-min);
  min-height:  var(--touch-min);
  display:     flex;
  align-items: center;
  justify-content: center;
}

.btn-danger {
  color:      var(--color-danger);
  font-size:  14px;
  min-height: var(--touch-min);
  padding:    0 8px;
}

.btn-stepper {
  width:        40px;
  height:       40px;
  border-radius: 50%;
  background:   var(--color-surface-2);
  font-size:    20px;
  display:      flex;
  align-items:  center;
  justify-content: center;
}

.btn-control {
  width:        56px;
  height:       56px;
  border-radius: 50%;
  background:   var(--color-surface-2);
  font-size:    22px;
  display:      flex;
  align-items:  center;
  justify-content: center;
}

/* ── Home: Program List ──────────────────────────────────────────────────── */

#program-list { padding: 12px 16px; display: flex; flex-direction: column; gap: 10px; }

.program-row {
  background:      var(--color-surface);
  border-radius:   var(--radius);
  padding:         14px 16px;
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             12px;
}

.program-info    { flex: 1; min-width: 0; }
.program-name    { font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.program-summary { font-size: 12px; color: var(--color-text-muted); margin-top: 3px; }

.program-actions { display: flex; gap: 10px; align-items: center; flex-shrink: 0; }

.btn-edit {
  font-size:   18px;
  min-width:   var(--touch-min);
  min-height:  var(--touch-min);
  display:     flex;
  align-items: center;
  justify-content: center;
  color:       var(--color-text-muted);
}

.btn-play {
  background:   var(--color-primary);
  color:        #fff;
  width:        40px;
  height:       40px;
  border-radius: 50%;
  font-size:    16px;
  display:      flex;
  align-items:  center;
  justify-content: center;
}

.empty-state {
  text-align: center;
  color:      var(--color-text-muted);
  padding:    64px 32px;
  font-size:  15px;
  line-height: 1.5;
}

/* ── Edit Form ───────────────────────────────────────────────────────────── */

.edit-form { padding: 16px; display: flex; flex-direction: column; gap: 12px; }

.field-group { display: flex; flex-direction: column; gap: 6px; }
.field-row   { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.field-label {
  font-size:      11px;
  font-weight:    600;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color:          var(--color-text-muted);
}

.field-input {
  background:    var(--color-surface);
  border:        1px solid #2a2a2a;
  border-radius: 8px;
  color:         var(--color-text);
  font-size:     18px;
  font-weight:   600;
  padding:       10px 12px;
  width:         100%;
  min-height:    var(--touch-min);
}

.field-input:focus { outline: none; border-color: #444; }

.field-input.phase-blue  { color: var(--color-phase-warmup); }
.field-input.phase-red   { color: var(--color-phase-sprint); }
.field-input.phase-green { color: var(--color-phase-recovery); }

.rounds-group {
  background:      var(--color-surface);
  border-radius:   8px;
  padding:         10px 14px;
  display:         flex;
  flex-direction:  row;
  align-items:     center;
  justify-content: space-between;
}

.rounds-control { display: flex; align-items: center; gap: 16px; }
.rounds-display { font-size: 22px; font-weight: 700; min-width: 28px; text-align: center; }

/* ── Active Timer ─────────────────────────────────────────────────────────── */

.timer-screen {
  flex:            1;
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  gap:             24px;
  padding:         32px 16px;
}

.phase-label {
  font-size:      13px;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: 3px;
  color:          var(--color-text-muted);
}

.timer-ring { width: min(280px, 80vw); height: min(280px, 80vw); }

.ring-bg { }  /* SVG circle background, styling via inline attributes */

.timer-controls      { display: flex; gap: 24px; align-items: center; }
.timer-program-name  { font-size: 13px; color: var(--color-text-muted); }

.timer-done {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  gap:             16px;
  text-align:      center;
}

.done-text { font-size: 28px; font-weight: 700; }