:root {
  /* === Hero Blush Blue (default) === */
  --bg: #fce8f1;
  --bg-2: #f8e0eb;
  --panel: #fff4f9;
  --panel-2: #fde8f2;
  --text: #303539;
  --muted: #7a6870;
  --accent: #00bcf0;
  --accent-2: #ffe556;
  --ok: #22c55e;
  --err: #ef4444;
  --border: #e8cad8;
  --btn-text: #fff;
  --bar-bg: rgba(0,188,240,.12);
  --chip-bg: rgba(48,53,57,.06);
  --accent-soft: rgba(0,188,240,.1);
  --glass-bg: rgba(252,232,241,0.96);
  --race-color: #ffe556;
  --brand-ring: 0 0 0 2.5px #ffe556;
  --radius: 14px;
  --tab-h: 64px;
  --top-h: 56px;
  --safe-bottom: env(safe-area-inset-bottom);
  --safe-top: env(safe-area-inset-top);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  padding-top: calc(var(--top-h) + var(--safe-top));
  padding-bottom: calc(var(--tab-h) + var(--safe-bottom) + 12px);
}

/* Top bar */
.topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: calc(var(--top-h) + var(--safe-top));
  padding-top: var(--safe-top);
  background: var(--glass-bg);
  backdrop-filter: saturate(180%) blur(14px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-left: 16px;
  padding-right: 16px;
  border-bottom: 1px solid var(--border);
  z-index: 10;
}
.brand { display: flex; align-items: center; gap: 10px; }
.brand-mark {
  background: var(--accent);
  color: var(--btn-text);
  font-weight: 800;
  padding: 4px 8px;
  border-radius: 8px;
  font-size: 14px;
  letter-spacing: 0.5px;
  box-shadow: var(--brand-ring);
}
.brand-title { font-weight: 700; letter-spacing: 0.3px; }
.header-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}
.header-controls select {
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 7px 10px;
  font-size: 13px;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}
/* keep legacy .who select working if referenced */
.who select {
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 14px;
  appearance: none;
  -webkit-appearance: none;
}

/* Main area */
main {
  flex: 1;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 720px;
  margin: 0 auto;
  width: 100%;
}

/* Hero (current week summary) */
.hero {
  background: linear-gradient(135deg, var(--panel) 0%, var(--panel-2) 100%);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
}
.hero-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}
.hero h1 {
  margin: 4px 0 0;
  font-size: 44px;
  font-weight: 800;
  letter-spacing: -0.5px;
}
.hero h1 .unit, .race .unit {
  font-size: 16px;
  color: var(--muted);
  font-weight: 500;
  margin-left: 4px;
}
.race { text-align: right; }
.race .big { font-size: 28px; font-weight: 700; color: var(--race-color); }
.long-run {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed var(--border);
  color: var(--muted);
}
.long-run strong { color: var(--text); }

/* Cards */
.card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
}
.card.no-pad { padding: 0; overflow: hidden; }
.card.center { text-align: center; padding: 32px 16px; }
.card.error { border-color: rgba(239,68,68,.4); }
.card-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}
.card-header h2 {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
}
.badge {
  display: inline-block;
  background: var(--accent);
  color: var(--btn-text);
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  vertical-align: middle;
  margin-left: 6px;
  letter-spacing: 0.5px;
}

.muted { color: var(--muted); }
.small { font-size: 12px; }
.big { font-size: 22px; font-weight: 700; }
.unit { color: var(--muted); font-weight: 500; }

/* Progress bar */
.bar {
  position: relative;
  height: 14px;
  background: var(--bar-bg);
  border-radius: 999px;
  overflow: hidden;
  margin: 6px 0 12px;
}
.bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  border-radius: 999px;
  transition: width 300ms ease;
}
.bar-label {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 10px;
  font-weight: 700;
  color: var(--btn-text);
  text-shadow: 0 1px 2px rgba(0,0,0,0.35);
}

/* Grid */
.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 8px 0 12px;
}

/* Run chips */
.runs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 8px 0;
}
.chip {
  background: var(--chip-bg);
  border: 1px solid var(--border);
  color: var(--muted);
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  font-weight: 600;
}
.chip-on {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
}

.notes {
  margin: 10px 0 0;
  padding: 8px 10px;
  background: rgba(148,163,184,.08);
  border-radius: 8px;
  font-size: 13px;
  color: var(--muted);
}

/* Actions / buttons */
.actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  flex-wrap: wrap;
}
.btn {
  border: 1px solid var(--border);
  background: var(--panel-2);
  color: var(--text);
  padding: 11px 16px;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  flex: 1;
  min-height: 44px;
  transition: transform 80ms ease, background 120ms ease;
}
.btn:active { transform: scale(0.98); }
.btn.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--btn-text);
}
.btn.ghost {
  background: transparent;
}
.btn:disabled { opacity: 0.6; cursor: not-allowed; }

/* Form */
.form { display: flex; flex-direction: column; gap: 12px; }
.form label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  color: var(--muted);
  font-weight: 600;
}
.form input, .form select {
  background: var(--bg-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px;
  font-size: 16px;
  appearance: none;
  -webkit-appearance: none;
}
.form input:focus, .form select:focus {
  outline: none;
  border-color: var(--accent);
}

/* Week navigator (home hero) */
.weeknav {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}
.weeknav-btn {
  background: rgba(148,163,184,.12);
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 22px;
  line-height: 1;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.weeknav-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.weeknav-label {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.2px;
}
.weeknav-tag {
  margin-left: 6px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.weeknav-today {
  margin-top: 6px;
  background: transparent;
  border: 1px solid var(--accent);
  color: var(--accent);
  border-radius: 8px;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  cursor: pointer;
  letter-spacing: 0.4px;
}

/* Strides / Plyos checkbox rows */
.checks {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 12px 0 4px;
  padding: 10px 12px;
  background: rgba(148,163,184,.06);
  border-radius: 10px;
  border: 1px solid var(--border);
}
.chk-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 4px;
  font-size: 14px;
  color: var(--text);
  font-weight: 500;
  cursor: pointer;
  user-select: none;
  min-height: 36px;
}
.chk-row.is-readonly {
  cursor: default;
  opacity: 0.85;
}
.chk-row.is-locked {
  opacity: 0.55;
  cursor: not-allowed;
}
.chk-row input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 22px;
  height: 22px;
  border: 2px solid var(--border);
  border-radius: 6px;
  background: var(--bg-2);
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
  margin: 0;
  transition: border-color 120ms ease, background 120ms ease;
}
.chk-row input[type="checkbox"]:checked {
  background: var(--accent);
  border-color: var(--accent);
}
.chk-row input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  left: 5px;
  top: 1px;
  width: 6px;
  height: 12px;
  border: solid var(--btn-text);
  border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg);
}
.chk-row input[type="checkbox"]:disabled {
  cursor: not-allowed;
  background: var(--bg-2);
}
.chk-row.is-readonly input[type="checkbox"] {
  cursor: default;
}
.chk-label { flex: 1; }
.chk-hint {
  margin-left: auto;
  font-size: 11px;
  font-weight: 500;
}

/* Aux (auxiliary training) view */
.aux-hero h1 {
  margin: 0 0 6px;
  font-size: 28px;
}
.aux-hero p { margin: 0; }
.aux-h3 {
  margin: 14px 0 6px;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--muted);
  font-weight: 700;
}
.aux-list {
  margin: 0 0 4px;
  padding-left: 20px;
  line-height: 1.55;
}
.aux-list li { margin: 4px 0; }
.aux-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.aux-grid li {
  background: rgba(148,163,184,.06);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 14px;
  line-height: 1.5;
}
.aux-grid li strong { color: var(--accent-2); }
.aux-status {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 999px;
  margin-left: 8px;
  vertical-align: middle;
}
.aux-status.on  { background: rgba(34,197,94,.15);  color: #4ade80; border: 1px solid rgba(34,197,94,.4); }
.aux-status.off { background: rgba(148,163,184,.15); color: var(--muted); border: 1px solid var(--border); }
.aux-note { background: rgba(148,163,184,.04); }

/* Plan view check cells */
.check-cell {
  text-align: center;
  color: var(--muted);
}
.check-yes {
  color: var(--accent);
  font-weight: 700;
}
.plan-foot {
  padding: 10px 12px;
  margin: 0;
  border-top: 1px solid var(--border);
}

/* Secondary action row inside cards */
.actions.secondary {
  margin-top: 8px;
}

/* Suggest list */
.suggest {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.suggest-line {
  background: var(--accent-soft);
  border: 1px solid var(--border);
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 14px;
}
.suggest-line strong { color: var(--accent); }

/* Plan table */
.plan {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.plan th, .plan td {
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid var(--border);
}
.plan th {
  background: var(--panel-2);
  color: var(--muted);
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.plan tr.is-current {
  background: var(--accent-soft);
}
.plan tr.is-current td:first-child { font-weight: 700; }

/* Tab bar */
.tabbar {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: calc(var(--tab-h) + var(--safe-bottom));
  padding-bottom: var(--safe-bottom);
  background: var(--glass-bg);
  backdrop-filter: saturate(180%) blur(14px);
  border-top: 1px solid var(--border);
  display: flex;
  z-index: 10;
}
.tab {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  cursor: pointer;
  letter-spacing: 0.3px;
}
.tab .tab-icon {
  font-size: 20px;
  line-height: 1;
}
.tab.is-active { color: var(--accent); }

/* Spinner */
.spinner {
  width: 24px;
  height: 24px;
  border: 3px solid rgba(148,163,184,0.3);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin: 0 auto 8px;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Toast */
#toast {
  position: fixed;
  left: 50%;
  bottom: calc(var(--tab-h) + 16px + var(--safe-bottom));
  transform: translate(-50%, 12px);
  background: var(--panel-2);
  color: var(--text);
  border: 1px solid var(--border);
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 14px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease, transform 200ms ease;
  z-index: 20;
}
#toast.show { opacity: 1; transform: translate(-50%, 0); }
#toast.error { border-color: rgba(239,68,68,.6); color: #fecaca; }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  border: 0;
}

code {
  background: rgba(148,163,184,.12);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 12px;
}

/* =====================================================
   THEMES — override :root vars via data-theme on <html>
   ===================================================== */

[data-theme="hero-blush"] {
  --bg: #fce8f1; --bg-2: #f8e0eb;
  --panel: #fff4f9; --panel-2: #fde8f2;
  --text: #0a1230; --muted: #8a4a6a;
  --accent: #d6006a; --accent-2: #e8a000;
  --border: #f0c4d8;
  --btn-text: #fff;
  --bar-bg: rgba(214,0,106,.1); --chip-bg: rgba(138,74,106,.07); --accent-soft: rgba(214,0,106,.07);
  --glass-bg: rgba(252,232,241,0.96);
  --race-color: #e8a000; --brand-ring: 0 0 0 2.5px #e8a000;
}

[data-theme="atom-eve"] {
  --bg: #0d0e2e; --bg-2: #13143a;
  --panel: #1a1b40; --panel-2: #21225a;
  --text: #ffe4ee; --muted: #b8a7c5;
  --accent: #ec4899; --accent-2: #f472b6;
  --border: #2d2e5a;
  --btn-text: #fff;
  --bar-bg: rgba(236,72,153,.15); --chip-bg: rgba(184,167,197,.1); --accent-soft: rgba(236,72,153,.12);
  --glass-bg: rgba(13,14,46,0.97);
  --race-color: #ec4899; --brand-ring: none;
}

[data-theme="notebook"] {
  --bg: #fafaf7; --bg-2: #f0f0ec;
  --panel: #ffffff; --panel-2: #f5f5f0;
  --text: #1a1a2e; --muted: #5a5a6b;
  --accent: #1e3a8a; --accent-2: #2563eb;
  --border: #e0ddd5;
  --btn-text: #fff;
  --bar-bg: rgba(30,58,138,.12); --chip-bg: rgba(90,90,107,.07); --accent-soft: rgba(30,58,138,.07);
  --glass-bg: rgba(250,250,247,0.96);
  --race-color: #1e3a8a; --brand-ring: none;
}

[data-theme="sage"] {
  --bg: #faf6f1; --bg-2: #f0ece5;
  --panel: #ffffff; --panel-2: #f5f1ea;
  --text: #2d2a26; --muted: #6b6359;
  --accent: #87a96b; --accent-2: #9dba80;
  --border: #e5dfd5;
  --btn-text: #1a1a12;
  --bar-bg: rgba(135,169,107,.15); --chip-bg: rgba(107,99,89,.07); --accent-soft: rgba(135,169,107,.1);
  --glass-bg: rgba(250,246,241,0.96);
  --race-color: #87a96b; --brand-ring: none;
}

[data-theme="marathon-red"] {
  --bg: #1a1a1a; --bg-2: #212121;
  --panel: #262626; --panel-2: #2e2e2e;
  --text: #f5f5f5; --muted: #999999;
  --accent: #e74c3c; --accent-2: #ff6b6b;
  --border: #3a3a3a;
  --btn-text: #fff;
  --bar-bg: rgba(231,76,60,.15); --chip-bg: rgba(153,153,153,.1); --accent-soft: rgba(231,76,60,.1);
  --glass-bg: rgba(26,26,26,0.97);
  --race-color: #e74c3c; --brand-ring: none;
}

[data-theme="mountain-mist"] {
  --bg: #1c2833; --bg-2: #212e3d;
  --panel: #2c3e50; --panel-2: #34495e;
  --text: #ecf0f1; --muted: #95a5a6;
  --accent: #1abc9c; --accent-2: #2edcb8;
  --border: #34495e;
  --btn-text: #0d2022;
  --bar-bg: rgba(26,188,156,.15); --chip-bg: rgba(149,165,166,.1); --accent-soft: rgba(26,188,156,.1);
  --glass-bg: rgba(28,40,51,0.97);
  --race-color: #1abc9c; --brand-ring: none;
}

[data-theme="slate-orange"] {
  --bg: #0f172a; --bg-2: #111827;
  --panel: #1e293b; --panel-2: #273449;
  --text: #e2e8f0; --muted: #94a3b8;
  --accent: #f97316; --accent-2: #fb923c;
  --border: #334155;
  --btn-text: #0f172a;
  --bar-bg: rgba(148,163,184,.18); --chip-bg: rgba(148,163,184,.15); --accent-soft: rgba(249,115,22,.12);
  --glass-bg: rgba(15,23,42,0.97);
  --race-color: #f97316; --brand-ring: none;
}