:root {
  --bg:#0f0e20; --surface:#211e43; --surface-2:#2a2752; --text:#f8f6ff; --muted:#aaa3c3;
  --line:rgba(255,255,255,.11); --purple:#a889ff; --purple-strong:#8061f4; --pink:#ff79bd;
  --cyan:#62e6e2; --mint:#68d391; --amber:#ffd479; --danger:#ff6f84; --shadow:0 18px 45px rgba(0,0,0,.28);
  --theme-colour:#17152f; --input-bg:#18162f; --nav-bg:rgba(16,14,33,.94);
  --body-bg:radial-gradient(circle at 15% -5%,#392a72 0,transparent 34%),radial-gradient(circle at 100% 10%,#3e245c 0,transparent 28%),linear-gradient(180deg,#17152f 0%,#0f0e20 100%);
  --panel-bg:linear-gradient(150deg,rgba(45,42,84,.96),rgba(27,25,52,.97));
  --chart-grid:rgba(255,255,255,.09); --drug-tirz:#68d391; --drug-reta:#a889ff; --drug-cagri:#ff79bd;
}
:root[data-theme="vapor"] {
  --bg:#160d27; --surface:#4a2d68; --surface-2:#5d3c80; --text:#fff8ff; --muted:#d9c7e8;
  --line:rgba(255,255,255,.17); --purple:#c9a7ff; --purple-strong:#9870ff; --pink:#ff79d1; --cyan:#78f5f2; --mint:#9bffd4; --amber:#ffe18d;
  --theme-colour:#2a1645; --input-bg:#241638; --nav-bg:rgba(31,17,49,.95);
  --body-bg:radial-gradient(circle at 16% -5%,#7a43a7 0,transparent 36%),radial-gradient(circle at 100% 8%,#c2478e 0,transparent 31%),radial-gradient(circle at 0 85%,#215c7a 0,transparent 32%),linear-gradient(180deg,#2b1747 0%,#140c25 100%);
  --panel-bg:linear-gradient(145deg,rgba(84,49,111,.94),rgba(36,24,63,.97));
  --drug-tirz:#8ff3c7; --drug-reta:#c9a7ff; --drug-cagri:#ff79d1;
}
:root[data-theme="gothic"] {
  --bg:#0b0a0d; --surface:#211d23; --surface-2:#302830; --text:#f1ecef; --muted:#b3a7ad;
  --line:rgba(220,205,214,.13); --purple:#9b849e; --purple-strong:#6e596f; --pink:#a94f65; --cyan:#a8b7b2; --mint:#829b86; --amber:#c9ad78; --danger:#ba5564;
  --theme-colour:#151217; --input-bg:#151217; --nav-bg:rgba(12,10,13,.96);
  --body-bg:radial-gradient(circle at 12% -8%,#352a38 0,transparent 36%),radial-gradient(circle at 100% 10%,#421d29 0,transparent 28%),linear-gradient(180deg,#171318 0%,#09080a 100%);
  --panel-bg:linear-gradient(150deg,rgba(43,37,45,.97),rgba(21,18,23,.98));
  --drug-tirz:#829b86; --drug-reta:#ad95af; --drug-cagri:#a94f65;
}
:root[data-theme="reddead"] {
  --bg:#17100d; --surface:#3a2720; --surface-2:#52352a; --text:#f5ead8; --muted:#c4ad94;
  --line:rgba(239,216,184,.15); --purple:#d0a56a; --purple-strong:#a56a36; --pink:#b63d2e; --cyan:#e1c38f; --mint:#87906d; --amber:#e5b654; --danger:#d5523d;
  --theme-colour:#2b1812; --input-bg:#241713; --nav-bg:rgba(24,14,11,.96);
  --body-bg:radial-gradient(circle at 14% -5%,#6d2b1f 0,transparent 35%),radial-gradient(circle at 100% 10%,#4a2d1b 0,transparent 30%),linear-gradient(180deg,#311b14 0%,#130d0a 100%);
  --panel-bg:linear-gradient(150deg,rgba(67,42,32,.97),rgba(29,19,16,.98));
  --drug-tirz:#d0a56a; --drug-reta:#d87845; --drug-cagri:#b63d2e;
}
:root[data-theme="palia"] {
  --bg:#08172d; --surface:#203b61; --surface-2:#31547d; --text:#fff7e8; --muted:#c9d7e8;
  --line:rgba(191,232,236,.18); --purple:#aa91ff; --purple-strong:#725ed6; --pink:#ff8f8b; --cyan:#69e2de; --mint:#9ce0b6; --amber:#f4cb77; --danger:#f06f7d;
  --theme-colour:#10294e; --input-bg:#122946; --nav-bg:rgba(7,20,42,.96);
  --body-bg:radial-gradient(circle at 12% -6%,#5d50a8 0,transparent 35%),radial-gradient(circle at 100% 8%,#1f8e9c 0,transparent 30%),radial-gradient(circle at 0 88%,#d56f6b 0,transparent 29%),linear-gradient(180deg,#15355d 0%,#08172d 68%,#06101f 100%);
  --panel-bg:linear-gradient(150deg,rgba(40,72,110,.96),rgba(18,42,72,.98));
  --chart-grid:rgba(216,243,244,.12); --drug-tirz:#9ce0b6; --drug-reta:#aa91ff; --drug-cagri:#ff8f8b;
}
:root[data-theme="palia"] .panel,
:root[data-theme="palia"] .metric-card {
  box-shadow:0 18px 45px rgba(0,10,28,.34),0 0 24px rgba(105,226,222,.06);
}
:root[data-theme="palia"] .app-header h1 {
  text-shadow:0 0 22px rgba(105,226,222,.16);
}
* { box-sizing:border-box; }
html { background:var(--bg); }
body {
  margin:0; min-height:100vh; color:var(--text);
  background:var(--body-bg);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  padding-bottom:calc(92px + env(safe-area-inset-bottom));
}
button,input,select { font:inherit; }
button { touch-action:manipulation; }
.aurora { position:fixed; border-radius:50%; filter:blur(80px); opacity:.22; pointer-events:none; }
.aurora-one { width:260px; height:260px; background:var(--pink); right:-90px; top:140px; }
.aurora-two { width:220px; height:220px; background:var(--cyan); left:-100px; bottom:180px; }
.app-header { position:relative; display:flex; align-items:flex-start; justify-content:space-between; gap:16px; padding:28px 20px 18px; max-width:980px; margin:0 auto; }
.app-header h1 { margin:2px 0 4px; font-size:clamp(2rem,8vw,3rem); letter-spacing:-.05em; }
.app-header p { margin:0; color:var(--muted); max-width:620px; line-height:1.45; }
.eyebrow,.section-kicker { color:var(--cyan); font-weight:800; font-size:.72rem; letter-spacing:.16em; }
main { max-width:980px; margin:0 auto; padding:0 14px 28px; }
.view { display:none; animation:appear .22s ease; }
.view.active { display:block; }
@keyframes appear { from{opacity:0;transform:translateY(5px)} to{opacity:1;transform:translateY(0)} }
.section-heading { display:flex; align-items:center; justify-content:space-between; margin:12px 4px 16px; }
.section-heading h2 { margin:3px 0 0; font-size:1.65rem; }
.date-chip { color:var(--muted); background:rgba(255,255,255,.06); border:1px solid var(--line); padding:8px 11px; border-radius:999px; font-size:.78rem; white-space:nowrap; }
.metric-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.metric-card,.panel { background:var(--panel-bg); border:1px solid var(--line); border-radius:22px; box-shadow:var(--shadow); }
.metric-card { position:relative; overflow:hidden; padding:16px; min-height:126px; }
.metric-card::before { content:""; position:absolute; inset:0 auto 0 0; width:4px; background:var(--purple); }
.accent-pink::before{background:var(--pink)} .accent-cyan::before{background:var(--cyan)} .accent-mint::before{background:var(--mint)}
.metric-card span { display:block; color:var(--muted); font-size:.82rem; }
.metric-card strong { display:block; font-size:1.9rem; margin:10px 0 3px; letter-spacing:-.04em; }
.metric-card small { color:var(--muted); }
.panel { margin-top:12px; padding:17px; }
.compact-panel { padding:14px 17px; }
.panel-title-row { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:10px; }
.panel h3 { margin:2px 0; font-size:1.1rem; }
.chart { min-height:250px; width:100%; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.tall-chart { min-height:310px; }
.chart svg { width:100%; height:auto; max-height:350px; overflow:visible; }
.chart-empty { color:var(--muted); text-align:center; padding:48px 12px; }
.chart-key { display:flex; flex-wrap:wrap; justify-content:center; gap:13px; color:var(--muted); font-size:.72rem; margin-top:2px; }
.chart-key span { display:flex; align-items:center; gap:6px; }
.key-line { width:14px; height:3px; display:inline-block; border-radius:3px; }
.key-dot { width:8px; height:8px; display:inline-block; border-radius:50%; }
.weight-line{background:var(--purple)} .official-dot{background:var(--cyan)} .plateau-line{background:var(--pink)} .trend-line{background:var(--mint)}
.segmented { display:flex; align-items:center; gap:3px; padding:3px; border:1px solid var(--line); background:rgba(255,255,255,.035); border-radius:13px; overflow-x:auto; max-width:100%; }
.segment { flex:0 0 auto; border:0; border-radius:10px; background:transparent; color:var(--muted); padding:8px 10px; font-size:.75rem; font-weight:750; cursor:pointer; }
.segment.active { background:var(--surface-2); color:var(--cyan); box-shadow:0 4px 14px rgba(0,0,0,.2); }
.medication-modes { margin:6px 0 2px; }
.chart-description { margin:8px 0 0; }
.compact-date { width:auto; min-width:145px; padding:8px 10px; }
.level-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.level-card { padding:13px 10px; border:1px solid var(--line); border-radius:16px; background:rgba(255,255,255,.035); text-align:center; }
.level-card span { color:var(--muted); font-size:.72rem; display:block; }
.level-card strong { font-size:1.25rem; display:block; margin-top:5px; }
.summary-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; }
.summary-grid-wide { grid-template-columns:repeat(2,1fr); }
.summary-item { background:rgba(255,255,255,.035); border:1px solid var(--line); border-radius:14px; padding:12px; min-width:0; }
.summary-item span { color:var(--muted); font-size:.74rem; display:block; }
.summary-item strong { font-size:1.05rem; display:block; margin-top:4px; overflow-wrap:anywhere; }
.form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.form-grid label { color:var(--muted); font-size:.8rem; display:flex; flex-direction:column; gap:6px; }
.form-grid .wide { grid-column:1/-1; }
input,select { width:100%; border:1px solid var(--line); border-radius:13px; background:var(--input-bg); color:var(--text); padding:12px; outline:none; }
input:focus,select:focus { border-color:var(--purple); box-shadow:0 0 0 3px rgba(168,137,255,.14); }
.check-label { flex-direction:row!important; align-items:center; align-self:end; padding:10px 0; }
.check-label input { width:auto; }
.form-actions { display:flex; flex-wrap:wrap; gap:9px; }
.form-actions button { flex:1 1 140px; }
.primary-button,.secondary-button,.danger-button,.ghost-button,.text-button,.file-button { border:0; border-radius:14px; padding:12px 15px; font-weight:800; cursor:pointer; text-align:center; }
.primary-button { background:linear-gradient(110deg,var(--purple-strong),var(--pink)); color:white; }
.secondary-button,.file-button { background:var(--surface-2); color:var(--text); border:1px solid var(--line); }
.danger-button { background:rgba(255,111,132,.14); color:#ff9aaa; border:1px solid rgba(255,111,132,.35); }
.ghost-button { background:rgba(255,255,255,.08); color:var(--text); border:1px solid var(--line); }
.text-button { padding:6px 0; background:transparent; color:var(--cyan); }
.button-stack { display:grid; gap:10px; }
.file-button input { display:none; }
.record-list { display:grid; gap:9px; }
.record { display:grid; grid-template-columns:1fr auto; gap:10px; align-items:center; border:1px solid var(--line); background:rgba(255,255,255,.035); border-radius:15px; padding:12px; }
.record-title { font-weight:800; }
.record-meta,.record-note { color:var(--muted); font-size:.78rem; margin-top:3px; line-height:1.38; }
.record-note { font-style:italic; }
.record-actions { display:flex; align-items:center; gap:7px; }
.edit-button,.load-button,.delete-button { border:0; border-radius:10px; padding:8px 10px; cursor:pointer; font-size:.76rem; font-weight:750; }
.edit-button,.load-button { background:rgba(98,230,226,.11); color:var(--cyan); }
.delete-button { background:rgba(255,111,132,.12); color:#ff9aaa; }
.badge { font-size:.68rem; font-weight:800; padding:4px 7px; border-radius:999px; color:#17152f; background:var(--cyan); }
.badge-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }
.milestone { position:relative; border:1px solid var(--line); background:rgba(255,255,255,.035); border-radius:16px; padding:13px; min-height:105px; overflow:hidden; }
.milestone.earned { border-color:rgba(98,230,226,.32); background:linear-gradient(145deg,rgba(98,230,226,.09),rgba(168,137,255,.08)); }
.milestone.locked { opacity:.48; filter:saturate(.55); }
.milestone-icon { font-size:1.5rem; display:block; margin-bottom:7px; }
.milestone strong { display:block; font-size:.88rem; }
.milestone small { display:block; color:var(--muted); font-size:.7rem; line-height:1.35; margin-top:4px; }
.safety-banner,.warning-banner { border-radius:16px; padding:13px 14px; line-height:1.45; font-size:.84rem; }
.safety-banner { background:rgba(98,230,226,.09); border:1px solid rgba(98,230,226,.25); color:#c6fbf9; }
.warning-banner { background:rgba(255,212,121,.1); border:1px solid rgba(255,212,121,.28); color:#ffe6ad; }
.subtle-warning { margin-bottom:11px; }
.fine-print { color:var(--muted); font-size:.75rem; line-height:1.45; margin:12px 0 0; }
.drug-legend { display:flex; flex-wrap:wrap; gap:12px; justify-content:center; color:var(--muted); font-size:.76rem; }
.drug-legend span { display:flex; align-items:center; gap:6px; }
.drug-legend i { width:12px; height:3px; border-radius:3px; display:inline-block; }
.tirz{background:#68d391}.reta{background:#a889ff}.cagri{background:#ff79bd}
.debug-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; }
.debug-item { border:1px solid var(--line); background:rgba(255,255,255,.035); border-radius:13px; padding:10px; }
.debug-item span { color:var(--muted); font-size:.7rem; display:block; }
.debug-item strong { font-size:.8rem; display:block; margin-top:4px; overflow-wrap:anywhere; }
.about-panel p { color:var(--muted); line-height:1.5; }
.bottom-nav { position:fixed; z-index:20; left:0; right:0; bottom:0; display:grid; grid-template-columns:repeat(7,1fr); background:var(--nav-bg); border-top:1px solid var(--line); backdrop-filter:blur(18px); padding:8px 6px calc(8px + env(safe-area-inset-bottom)); }
.nav-button { background:transparent; border:0; color:#9992b5; font-size:.66rem; padding:6px 2px; display:flex; flex-direction:column; align-items:center; gap:2px; cursor:pointer; }
.nav-button span { font-size:1.18rem; }
.nav-button.active { color:var(--cyan); font-weight:800; }
.toast { position:fixed; z-index:50; left:50%; bottom:100px; transform:translate(-50%,20px); opacity:0; pointer-events:none; background:#f7f4ff; color:#1a1730; border-radius:999px; padding:10px 15px; font-weight:800; font-size:.82rem; transition:.2s ease; box-shadow:var(--shadow); white-space:nowrap; max-width:90vw; overflow:hidden; text-overflow:ellipsis; }
.toast.show { opacity:1; transform:translate(-50%,0); }

.chart-option-row { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:10px 0 0; }
.control-label { color:var(--muted); font-size:.76rem; font-weight:750; white-space:nowrap; }
.medication-ranges { margin-left:auto; }
.range-description { margin-top:3px; opacity:.86; }
.theme-fieldset { border:0; padding:0; margin:3px 0 0; min-width:0; }
.theme-fieldset legend { color:var(--muted); font-size:.8rem; margin-bottom:8px; }
.theme-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }
.theme-card { position:relative; border:1px solid var(--line); background:rgba(255,255,255,.035); border-radius:16px; padding:12px; cursor:pointer; min-width:0; }
.theme-card:has(input:checked) { border-color:var(--cyan); box-shadow:0 0 0 2px color-mix(in srgb,var(--cyan) 24%,transparent); background:color-mix(in srgb,var(--surface-2) 82%,transparent); }
.theme-card input { position:absolute; opacity:0; pointer-events:none; width:1px; height:1px; }
.theme-card strong,.theme-card small { display:block; }
.theme-card strong { margin-top:9px; font-size:.84rem; }
.theme-card small { color:var(--muted); font-size:.69rem; line-height:1.35; margin-top:3px; }
.theme-swatches { display:grid; grid-template-columns:repeat(4,1fr); height:24px; overflow:hidden; border-radius:999px; border:1px solid rgba(255,255,255,.16); }
.theme-swatches i { display:block; }
.theme-og .theme-swatches i:nth-child(1){background:#8061f4}.theme-og .theme-swatches i:nth-child(2){background:#ff79bd}.theme-og .theme-swatches i:nth-child(3){background:#62e6e2}.theme-og .theme-swatches i:nth-child(4){background:#17152f}
.theme-vapor .theme-swatches i:nth-child(1){background:#c9a7ff}.theme-vapor .theme-swatches i:nth-child(2){background:#ff79d1}.theme-vapor .theme-swatches i:nth-child(3){background:#78f5f2}.theme-vapor .theme-swatches i:nth-child(4){background:#2b1747}
.theme-gothic .theme-swatches i:nth-child(1){background:#9b849e}.theme-gothic .theme-swatches i:nth-child(2){background:#a94f65}.theme-gothic .theme-swatches i:nth-child(3){background:#829b86}.theme-gothic .theme-swatches i:nth-child(4){background:#151217}
.theme-reddead .theme-swatches i:nth-child(1){background:#d0a56a}.theme-reddead .theme-swatches i:nth-child(2){background:#b63d2e}.theme-reddead .theme-swatches i:nth-child(3){background:#87906d}.theme-reddead .theme-swatches i:nth-child(4){background:#2b1812}
.theme-palia .theme-swatches i:nth-child(1){background:#aa91ff}.theme-palia .theme-swatches i:nth-child(2){background:#69e2de}.theme-palia .theme-swatches i:nth-child(3){background:#ff8f8b}.theme-palia .theme-swatches i:nth-child(4){background:#10294e}

@media (max-width:560px) {
  .stack-mobile { align-items:flex-start; flex-direction:column; }
  .stack-mobile .segmented { width:100%; }
  .stack-mobile .segment { flex:1 0 auto; }
  .medication-modes { justify-content:flex-start; }
  .chart-option-row { align-items:flex-start; flex-direction:column; }
  .medication-ranges { width:100%; margin-left:0; }
  .medication-ranges .segment { flex:1; }
  .theme-grid { grid-template-columns:1fr; }
  .record { grid-template-columns:1fr; }
  .record-actions { justify-content:flex-end; }
  .level-grid { grid-template-columns:1fr; }
}
@media (min-width:720px) {
  .metric-grid { grid-template-columns:repeat(4,1fr); }
  .summary-grid { grid-template-columns:repeat(4,1fr); }
  .summary-grid-wide { grid-template-columns:repeat(4,1fr); }
  .form-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .form-grid .wide { grid-column:1/-1; }
  .badge-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .debug-grid { grid-template-columns:repeat(4,1fr); }
  .app-header { padding-top:38px; }
  .bottom-nav { left:50%; width:min(760px,96vw); transform:translateX(-50%); border:1px solid var(--line); border-bottom:0; border-radius:22px 22px 0 0; }
}


/* v1.4 Goals & Checkpoints */
.plan-snapshot { display:grid; grid-template-columns:auto 1fr 1fr; gap:14px; align-items:center; }
.mini-progress-ring,.goal-ring { --progress:0deg; border-radius:50%; background:conic-gradient(var(--cyan) var(--progress),rgba(255,255,255,.09) 0); display:grid; place-items:center; position:relative; flex:0 0 auto; }
.mini-progress-ring { width:82px; height:82px; }
.mini-progress-ring::before,.goal-ring::before { content:""; position:absolute; inset:8px; border-radius:50%; background:var(--surface); border:1px solid var(--line); }
.mini-progress-ring div,.goal-ring div { position:relative; z-index:1; text-align:center; }
.mini-progress-ring strong { display:block; font-size:1.18rem; }
.mini-progress-ring span { display:block; color:var(--muted); font-size:.65rem; }
.plan-snapshot-copy { min-width:0; }
.plan-snapshot-copy>span { display:block; color:var(--muted); font-size:.72rem; }
.plan-snapshot-copy>strong { display:block; margin:4px 0; font-size:1.08rem; overflow-wrap:anywhere; }
.plan-snapshot-copy>small { display:block; color:var(--muted); line-height:1.35; }
.goal-hero { display:grid; grid-template-columns:auto 1fr; gap:20px; align-items:center; }
.goal-ring { width:150px; height:150px; box-shadow:0 0 36px color-mix(in srgb,var(--purple) 28%,transparent); }
.goal-ring::before { inset:12px; }
.goal-ring span,.goal-ring small { display:block; color:var(--muted); font-size:.72rem; }
.goal-ring strong { display:block; font-size:2rem; line-height:1.05; margin:4px 0; }
.goal-hero-copy h3 { font-size:2rem; margin:4px 0 8px; }
.goal-hero-copy p { color:var(--muted); line-height:1.5; margin:0; }
.goal-distance { display:flex; flex-wrap:wrap; gap:8px 16px; margin-top:12px; color:var(--cyan); font-size:.78rem; font-weight:750; }
.pace-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; }
.pace-card { border:1px solid var(--line); background:rgba(255,255,255,.035); border-radius:16px; padding:14px; text-align:center; }
.pace-card span { display:block; color:var(--muted); font-size:.72rem; }
.pace-card strong { display:block; margin-top:6px; font-size:1rem; }
.plan-status { display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:8px; margin-top:10px; }
.plan-status>div { border:1px solid var(--line); background:rgba(255,255,255,.025); border-radius:14px; padding:12px; }
.plan-status span { display:block; color:var(--muted); font-size:.7rem; margin-top:3px; }
.plan-status strong { display:block; font-size:.88rem; }
.checkpoint-roadmap { display:flex; align-items:flex-start; gap:0; overflow-x:auto; padding:12px 4px 18px; scroll-snap-type:x proximity; }
.roadmap-step { position:relative; min-width:128px; flex:1 0 128px; display:flex; flex-direction:column; align-items:center; text-align:center; scroll-snap-align:center; }
.roadmap-node { width:42px; height:42px; border-radius:50%; display:grid; place-items:center; border:2px solid var(--line); background:var(--input-bg); position:relative; z-index:2; font-size:1.05rem; }
.roadmap-step.reached .roadmap-node { background:var(--purple-strong); border-color:var(--cyan); color:white; }
.roadmap-step.current .roadmap-node { background:var(--surface-2); border-color:var(--pink); box-shadow:0 0 0 5px color-mix(in srgb,var(--pink) 14%,transparent); }
.roadmap-step.future { opacity:.55; }
.roadmap-connector { position:absolute; height:3px; top:20px; left:calc(50% + 21px); width:calc(100% - 42px); background:var(--line); z-index:1; }
.roadmap-step.reached .roadmap-connector { background:linear-gradient(90deg,var(--purple),var(--cyan)); }
.roadmap-label { margin-top:8px; }
.roadmap-label strong,.roadmap-label span { display:block; }
.roadmap-label strong { font-size:.82rem; }
.roadmap-label span { color:var(--muted); font-size:.68rem; line-height:1.3; margin-top:2px; }
.checkpoint-list { display:grid; gap:8px; }
.checkpoint-detail { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:10px; border:1px solid var(--line); background:rgba(255,255,255,.025); border-radius:15px; padding:12px; }
.checkpoint-detail.reached { border-color:color-mix(in srgb,var(--cyan) 35%,var(--line)); background:linear-gradient(130deg,color-mix(in srgb,var(--cyan) 8%,transparent),rgba(255,255,255,.02)); }
.checkpoint-detail.current { border-color:color-mix(in srgb,var(--pink) 38%,var(--line)); }
.checkpoint-symbol { width:36px; height:36px; border-radius:50%; display:grid; place-items:center; background:var(--surface-2); }
.checkpoint-detail strong,.checkpoint-detail span,.checkpoint-detail small { display:block; }
.checkpoint-detail>div:nth-child(2)>span { color:var(--cyan); font-size:.76rem; margin-top:2px; }
.checkpoint-detail small { color:var(--muted); font-size:.7rem; margin-top:3px; }
.checkpoint-dates { text-align:right; font-size:.72rem; }
.checkpoint-dates span { color:var(--muted); margin:2px 0; }
.checkpoint-dates strong { color:var(--mint); }
.checkpoint-custom-list { margin-top:12px; }
.field-muted { opacity:.5; }

@media (max-width:560px) {
  .bottom-nav { grid-template-columns:repeat(7,1fr); }
  .nav-button { font-size:.58rem; }
  .nav-button span { font-size:1.05rem; }
  .plan-snapshot { grid-template-columns:auto 1fr; }
  .plan-snapshot-copy:last-child { grid-column:1/-1; border-top:1px solid var(--line); padding-top:10px; }
  .goal-hero { grid-template-columns:1fr; text-align:center; }
  .goal-ring { margin:0 auto; }
  .goal-distance { justify-content:center; }
  .pace-grid { grid-template-columns:1fr; }
  .plan-status { grid-template-columns:1fr; }
  .checkpoint-detail { grid-template-columns:auto 1fr; }
  .checkpoint-dates { grid-column:1/-1; text-align:left; padding-left:46px; display:flex; flex-wrap:wrap; gap:8px; }
}