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

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: #0f172a;
  color: #e2e8f0;
  min-height: 100vh;
  padding: 2.5rem 1.5rem 4rem;
}

header, main, footer { max-width: 900px; margin-left: auto; margin-right: auto; }

header { margin-bottom: 2rem; }

header h1 {
  font-size: 1.5rem;
  font-weight: 600;
  color: #f8fafc;
  letter-spacing: -0.01em;
}

.subtitle {
  margin-top: 0.5rem;
  color: #94a3b8;
  font-size: 0.95rem;
  line-height: 1.6;
  max-width: 640px;
}

code {
  background: #1e293b;
  border: 1px solid #334155;
  border-radius: 0.3rem;
  padding: 0.05rem 0.35rem;
  font-size: 0.85em;
}

a { color: #818cf8; }
a:hover { color: #a5b4fc; }

.tabs {
  display: flex;
  gap: 0.5rem;
  border-bottom: 1px solid #334155;
  margin-bottom: 1.5rem;
}

.tab-btn {
  background: none;
  border: none;
  color: #94a3b8;
  font-size: 0.95rem;
  padding: 0.75rem 1rem;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color 0.15s, border-color 0.15s;
}

.tab-btn:hover { color: #e2e8f0; }

.tab-btn.active {
  color: #f8fafc;
  border-bottom-color: #6366f1;
}

.tab-panel { display: none; }
.tab-panel.active { display: block; }

.panel-intro p {
  color: #94a3b8;
  font-size: 0.9rem;
  line-height: 1.6;
  margin-bottom: 1rem;
}

.controls-row {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.controls-row label {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-size: 0.8rem;
  color: #94a3b8;
}

input[type="date"], input[type="text"], input[type="number"], select {
  background: #1e293b;
  border: 1px solid #334155;
  border-radius: 0.4rem;
  color: #f1f5f9;
  padding: 0.5rem 0.65rem;
  font-size: 0.9rem;
}

input:focus, select:focus { outline: 1px solid #6366f1; }

.hidden { display: none !important; }

button.primary {
  background: #6366f1;
  border: none;
  border-radius: 0.4rem;
  color: #f8fafc;
  font-size: 0.9rem;
  font-weight: 500;
  padding: 0.6rem 1.1rem;
  cursor: pointer;
  transition: background 0.15s;
}

button.primary:hover { background: #4f46e5; }

button.small {
  background: #1e293b;
  border: 1px solid #334155;
  border-radius: 0.35rem;
  color: #c7d2fe;
  font-size: 0.78rem;
  padding: 0.3rem 0.6rem;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  white-space: nowrap;
}

button.small:hover { border-color: #6366f1; background: #243047; }

.week-block {
  background: #1e293b;
  border: 1px solid #334155;
  border-radius: 0.6rem;
  margin-bottom: 0.9rem;
  overflow: hidden;
}

.week-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.7rem 1rem;
  background: #192336;
  border-bottom: 1px solid #2d3f55;
  font-size: 0.85rem;
  color: #94a3b8;
}

.week-header strong { color: #f1f5f9; font-size: 0.95rem; }

.session-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 0.65rem 1rem;
  border-top: 1px solid #24334a;
  font-size: 0.85rem;
}

.session-row:first-of-type { border-top: none; }

.session-main { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.session-day { color: #818cf8; font-weight: 600; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.03em; }
.session-desc { color: #e2e8f0; }
.session-desc .approx { color: #fbbf24; font-size: 0.78rem; }
.session-note { color: #64748b; font-size: 0.78rem; margin-top: 0.1rem; }
.session-date { color: #64748b; font-size: 0.78rem; white-space: nowrap; }

.session-actions { flex-shrink: 0; }

.custom-form {
  background: #1e293b;
  border: 1px solid #334155;
  border-radius: 0.6rem;
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: 640px;
}

.custom-form > label {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: 0.82rem;
  color: #94a3b8;
}

.goal-fieldset {
  border: 1px solid #334155;
  border-radius: 0.5rem;
  padding: 0.75rem 0.9rem;
}

.goal-fieldset legend {
  font-size: 0.78rem;
  color: #94a3b8;
  padding: 0 0.35rem;
}

.goal-controls {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.goal-controls .goal-value { width: 5.5rem; }
.goal-controls .goal-unit { width: 5rem; }

.alert-controls {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: 0.5rem;
}

.alert-controls .alert-type { width: 8.5rem; }
.alert-controls .alert-hr-zone, .alert-controls .alert-cadence-spm { width: 5.5rem; }

.alert-pace {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.alert-pace .alert-pace-subtype { width: 8.5rem; }

.pace-minsec {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  font-size: 0.82rem;
  color: #94a3b8;
  white-space: nowrap;
}

.pace-minsec .pace-min, .pace-minsec .pace-sec { width: 3.75rem; }

.range-toggle {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.8rem;
  color: #94a3b8;
  white-space: nowrap;
}

.block-card {
  background: #172033;
  border: 1px solid #2d3f55;
  border-radius: 0.5rem;
  padding: 0.75rem 0.9rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.block-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.block-header label {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.82rem;
  color: #94a3b8;
}

.block-header .block-repeat { width: 4rem; }

.block-steps { display: flex; flex-direction: column; gap: 0.5rem; }

.step-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.step-row .step-marker { width: 6.5rem; }

footer {
  margin-top: 3rem;
  color: #475569;
  font-size: 0.78rem;
  line-height: 1.6;
}