/* ─────────────────────────────────────────
   SELECTION CARDS  (sport / goal)
───────────────────────────────────────── */
.card {
  border: 1px solid var(--line2);
  border-radius: 10px;
  padding: 24px 20px;
  cursor: pointer;
  user-select: none;
  transition: border-color .15s, background .15s, transform .1s;
  position: relative;
  -webkit-tap-highlight-color: transparent;
  /* button reset */
  background: var(--bg);
  color: inherit;
  font: inherit;
  text-align: left;
  width: 100%;
}
.card:hover { border-color: var(--sub) }
.card.on {
  border-color: var(--red);
  background: var(--red-a);
}
.card-icon { font-size:28px; margin-bottom:10px; line-height:1 }
.card-title {
  font-family: var(--fd);
  font-size: 21px; letter-spacing:.06em;
  text-transform: uppercase; margin-bottom:4px;
}
.card-sub { font-family:var(--ft),var(--fb); font-size:12px; color:var(--sub); font-weight:300 }

/* ── Intro sport cards (S1) — Maurten-style minimal ── */
.intro-sport-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
}
.intro-sport-card {
  min-height: 320px;
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  border-radius: 6px;
}
.intro-sport-title {
  font-family: var(--fd);
  font-size: clamp(32px, 4.4vw, 60px);
  letter-spacing: .06em;
  line-height: 1;
  text-transform: uppercase;
  color: var(--white);
}
.intro-sport-sub {
  font-family: var(--fm);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 8px;
}

/* Option cards  (distances / weather / sweat) */
.opt {
  border: 1px solid var(--line2);
  border-radius: 8px;
  padding: 14px 16px;
  cursor: pointer; user-select:none;
  transition: border-color .15s, background .15s, transform .1s;
  position: relative;
  -webkit-tap-highlight-color: transparent;
  min-height: 56px;
}
.opt:hover { border-color: var(--sub) }
.opt.on {
  border-color: var(--red);
  background: var(--red-a);
}
.opt-lbl {
  font-family: var(--fd);
  font-size: 16px; letter-spacing:.06em; text-transform:uppercase;
  margin-bottom:2px; color: var(--white);
}
.opt-det {
  font-family:var(--ft),var(--fb); font-size:12px; color:var(--sub); font-weight:300 }

/* Goal cards */
.gcard {
  border: 1px solid var(--line2);
  border-radius: 10px;
  padding: 28px 24px;
  cursor: pointer; user-select:none;
  transition: border-color .15s, background .15s, transform .1s;
  position: relative;
  -webkit-tap-highlight-color: transparent;
}
.gcard:hover { border-color: var(--sub) }
.gcard.on {
  border-color: var(--red);
  background: var(--red-a);
}
.gcard-title {
  font-family: var(--fd);
  font-size: clamp(32px, 4vw, 44px); letter-spacing:.06em; text-transform:uppercase;
  margin-bottom:8px; color: var(--white); line-height:1;
}
.gcard-desc {
  font-family:var(--ft),var(--fb); font-size:13px; color:var(--sub); font-weight:300; line-height:1.7 }

.goal-remark {
  font-family: var(--fm);
  font-size: 11px;
  letter-spacing: .04em;
  color: var(--dim);
  margin-top: 14px;
}

/* ─────────────────────────────────────────
   FIELDS / SLIDERS
───────────────────────────────────────── */
.field { margin-bottom:36px }
.field-lbl {
  font-family: var(--ft),var(--fb); font-size:12px; font-weight:600;
  color: var(--sub); letter-spacing:.06em; text-transform:uppercase;
  display:inline; margin-bottom:14px;
}
.field { display:block; margin-bottom:36px }
.field-val {
  font-family: var(--fd);
  font-size: 56px; letter-spacing:.03em; line-height:1;
  margin-bottom:18px;
}
.field-val em { color:var(--red); font-size:30px; font-style:normal }

input[type=range] {
  -webkit-appearance:none; appearance:none;
  width:100%; height:1px;
  background: var(--line2); border-radius:1px;
  outline:none; cursor:pointer;
  font-size:16px;
}
input[type=number] { font-size:16px }
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance:none;
  width:22px; height:22px; border-radius:50%;
  background: var(--red);
  cursor:pointer;
  border: 3px solid var(--bg);
  transition: transform .12s, box-shadow .12s;
}
input[type=range]::-webkit-slider-thumb:hover {
  transform: scale(1.2);
}
/* Firefox */
input[type=range]::-moz-range-thumb {
  width:22px; height:22px; border-radius:50%;
  background: var(--red);
  cursor:pointer;
  border: 3px solid var(--bg);
  transition: transform .12s;
}
input[type=range]::-moz-range-thumb:hover {
  transform: scale(1.2);
}
input[type=range]::-moz-range-track {
  height:1px; background: var(--line2);
  border:none; border-radius:1px;
}
.range-ends {
  display:flex; justify-content:space-between;
  margin-top:8px;
  font-family:var(--fm); font-size:10px; color:var(--dim);
}

/* Info note */
.note {
  font-family:var(--ft),var(--fb);
  font-size:13px; color:var(--muted);
  line-height:1.7; padding:14px 0;
  border-top:1px solid var(--line);
  margin-top:12px;
}
.note b { color:var(--sub) }

/* Section label */
.sec-lbl {
  font-family:var(--ft),var(--fb); font-size:12px; font-weight:600;
  color:var(--sub); letter-spacing:.06em; text-transform:uppercase;
  display:inline; margin-bottom:0;
}
.sec-lbl-wrap {
  display:block; margin-bottom:12px;
}

/* Hint i button — inline after section label */
.hint-btn {
  background:none; border:none; padding:0 0 0 4px;
  color:var(--muted); font-family:inherit;
  font-size:13px; font-style:normal; font-weight:400;
  cursor:pointer; opacity:.5; transition:opacity .15s, color .15s;
  vertical-align:middle; line-height:1;
}
.hint-btn:hover { opacity:1; color:var(--red); }

/* Inline expand hint panel */
.hint-expand {
  display:none;
  padding:10px 0 4px;
  margin-bottom:12px;
}
.hint-expand.open { display:block; }
.hint-expand-intro {
  font-family:var(--ft),var(--fb); font-size:11px; color:var(--dim);
  margin:0 0 8px; letter-spacing:.02em;
}
.hint-expand-row {
  display:flex; align-items:baseline; gap:10px;
  padding:4px 0;
}
.hint-expand-lbl {
  font-family:var(--ft),var(--fb); font-size:11px; font-weight:400;
  color:var(--acc); min-width:52px; flex-shrink:0; letter-spacing:.02em;
}
.hint-expand-txt {
  font-family:var(--ft),var(--fb); font-size:11px; color:var(--sub); line-height:1.5;
}

/* Inline input */
.inline-inp {
  display:flex; align-items:center; gap:12px;
  border: 1px solid var(--line2);
  border-radius: 8px;
  padding: 14px 16px; margin-top:10px;
  background: var(--bg);
  transition: border-color .14s;
}
.inline-inp:focus-within { border-color: var(--red) }
.inline-inp label {
  font-family:var(--ft),var(--fb); font-size:12px; color:var(--muted);
  font-weight:600; letter-spacing:.06em; white-space:nowrap; text-transform:uppercase;
}
.inline-inp input {
  background:none; border:none; outline:none;
  color:var(--white); font-family:var(--fd);
  font-size:28px; letter-spacing:.04em; width:100%;
}

/* Duration summary row */
.dur-row {
  display:grid; grid-template-columns:1fr 1fr;
  gap:1px; background:var(--line);
  border:1px solid var(--line); border-radius:4px;
  overflow:hidden; margin-top:8px;
}
.dur-cell {
  background:var(--bg);
  padding:18px 20px;
}
.dur-cell-lbl {
  font-family:var(--fm); font-size:10px;
  color:var(--muted); letter-spacing:.12em; text-transform:uppercase;
  margin-bottom:6px;
}
.dur-cell-val {
  font-family:var(--fd); font-size:28px; letter-spacing:.04em;
}

/* ─────────────────────────────────────────
   RESULTS
───────────────────────────────────────── */
.r-banner {
  padding:40px 0 28px;
  border-bottom:1px solid var(--line);
  margin-bottom:32px;
}
.r-banner-inner {
  max-width:960px; margin:0 auto; padding:0 40px;
  display:flex; align-items:flex-end; justify-content:space-between; gap:20px;
}
.r-headline {
  font-family:var(--fd);
  font-size:clamp(44px,6vw,76px);
  letter-spacing:.03em; line-height:.92; text-transform:uppercase;
}
.r-headline em { color:var(--red); font-style:normal }
.r-meta {
  text-align:right;
  font-family:var(--fm); font-size:11px; color:var(--muted);
  letter-spacing:.06em; line-height:2.1;
}
.r-meta b { color:var(--sub) }

/* KPI row */
.kpi-row {
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:1px; background:var(--line);
  border:1px solid var(--red); border-radius:6px;
  overflow:hidden; margin-bottom:24px;
}
.kpi-cell { background:var(--bg); padding:32px 28px; text-align:center; display:flex; flex-direction:column; align-items:center; justify-content:center }
.kpi-lbl {
  font-family:var(--ft),var(--fb); font-size:12px; color:var(--sub);
  letter-spacing:.06em; text-transform:uppercase; margin-bottom:10px;
  font-weight:600;
}
.kpi-val {
  font-family:var(--fd);
  font-size:clamp(64px,7vw,96px);
  color:var(--red); line-height:1; letter-spacing:-.01em;
  margin-bottom:4px;
}
.kpi-unit { font-family:var(--fm); font-size:11px; color:var(--sub); letter-spacing:.06em }

/* Alert */
.r-alert {
  border-left:2px solid var(--red);
  padding:10px 16px; margin-bottom:20px;
  font-size:13px; color:var(--muted); line-height:1.7;
}
.r-alert b { color:var(--white) }
.al-row { padding:3px 0; }
.al-row + .al-row { border-top:1px solid var(--line); margin-top:4px; padding-top:7px; }
.pr-read-more {
  display:inline-block; margin-left:5px;
  font-size:13px; color:var(--muted);
  text-decoration:none; opacity:0.5;
  vertical-align:middle; transition:color .15s, opacity .15s;
}
.pr-read-more:hover { opacity:1; color:var(--red); }

/* Disclaimer footer */
.r-disclaimer {
  margin-top:40px;
  padding:16px 20px;
  border-top:1px solid var(--line);
  font-size:11px; color:var(--dim);
  line-height:1.8; letter-spacing:.02em;
  font-style:italic;
}

/* ── Result Tabs ── */
.r-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--line);
  margin-bottom: 28px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.r-tabs::-webkit-scrollbar { display: none }
.r-tab {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  padding: 12px 22px;
  font-family: var(--fd);
  font-size: 15px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--dim);
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: color .15s, border-color .15s;
  -webkit-tap-highlight-color: transparent;
}
.r-tab:hover { color: var(--white) }
.r-tab.on {
  color: var(--white);
  border-bottom-color: var(--red);
}
.r-tab-panel { animation: appear .2s ease both }

/* Phase grid */
.phase-row {
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:1px; background:var(--line);
  border:1px solid var(--line); border-radius:4px;
  overflow:hidden; margin-bottom:20px;
}
.phase-col { background:var(--bg) }
.phase-head {
  padding:14px 20px;
  border-bottom:1px solid var(--line);
  display:flex; align-items:center; gap:8px;
  background: #141414;
}
.phase-badge {
  font-family:var(--ft); font-size:16px; letter-spacing:.04em;
  text-transform:uppercase; color:#ffffff; font-weight:700;
}
.phase-badge.active { color:#ffffff }
.phase-title {
  font-family:var(--fd); font-size:14px;
  letter-spacing:.08em; text-transform:uppercase;
}
.phase-body { padding:18px 20px }
.prow {
  display:flex; gap:10px;
  padding:8px 0; border-bottom:1px solid var(--line);
}
.prow:last-child { border-bottom:none }
.prow-disclaimer .ptext b { color:var(--muted) !important; }
.prow-disclaimer .ptext { color:var(--muted); }
.pdot {
  width:4px; height:4px; border-radius:50%;
  background:var(--dim); margin-top:8px; flex-shrink:0;
}
.pdot.r { background:var(--red) }
.ptext {
  font-family:var(--ft),var(--fb); font-size:12px; color:var(--sub); line-height:1.6 }
.ptext b { color:var(--white); display:block; margin-bottom:3px; font-size:15px; font-weight:700 }

/* ── VERTICAL TIMELINE ── */
.tl-wrap {
  border:1px solid var(--line); border-radius:8px;
  overflow:hidden; margin-bottom:20px;
}
.tl-head {
  padding:14px 20px; border-bottom:1px solid rgba(255,255,255,0.08);
  display:flex; align-items:center; justify-content:space-between;
  gap: 12px;
  background: #141414;
  color-scheme: dark; /* force child tokens to dark context */
}
.tl-head-actions {
  display: flex; align-items: center; gap: 8px; flex-shrink: 0;
}
.tl-lbl {
  font-family:var(--ft),var(--fb); font-size:12px; font-weight:600;
  color:#ffffff; letter-spacing:.06em; text-transform:uppercase;
}
/* Force white-on-dark inside .tl-head regardless of page theme */
.tl-head .tl-act-btn--primary {
  color: rgba(255,255,255,0.6);
  border-color: rgba(255,255,255,0.18);
}
.tl-head .tl-act-btn--primary:hover {
  color: #ffffff;
  border-color: rgba(255,255,255,0.55);
  background: rgba(255,255,255,0.06);
}
.tl-head .tl-act-sep {
  background: rgba(255,255,255,0.15);
}
/* 3-col grid */
.tl-cols {
  display:grid; grid-template-columns:1fr 2fr 1fr;
  gap:0; background:var(--line);
  align-items: stretch;       /* all rows same height */
}
.tl-col {
  background:var(--bg);
  display: flex;              /* column fills full grid row height */
  flex-direction: column;
}
.tl-col-head {
  padding:12px 16px; border-bottom:1px solid var(--line);
  background: transparent;
  flex-shrink: 0;
}
.tl-col-phase {
  font-family:var(--ft),var(--fb); font-size:13px; font-weight:700;
  color: var(--sub); letter-spacing:.1em; text-transform:uppercase;
}
.tl-col-phase.active { color: var(--white); }

/* Event list */
.tl-col-body {
  flex: 1;                    /* fills remaining col height → equal columns */
  padding:18px 16px 22px;
  position:relative;
  overflow-y: auto;           /* scroll if content exceeds height */
  /* scrollbar: thin, minimal */
  scrollbar-width: thin;
  scrollbar-color: var(--line2) transparent;
}
.tl-col-body::-webkit-scrollbar { width: 3px; }
.tl-col-body::-webkit-scrollbar-thumb { background: var(--line2); border-radius: 2px; }
.tl-col-body::before {
  content:'';
  position:absolute; left:24px; top:0; bottom:0;
  width:1px; background:var(--line);
}
.tl-v-event {
  display:flex; align-items:flex-start; gap:12px;
  margin-bottom:20px; position:relative;
}
.tl-v-event:last-child { margin-bottom:0 }
.tl-v-dot {
  width:8px; height:8px; border-radius:50%;
  flex-shrink:0; margin-top:5px;
  position:relative; z-index:1;
}
.tl-v-right { flex:1; min-width:0 }
.tl-v-time {
  font-family:var(--fm); font-size:13px;
  color:var(--white); letter-spacing:.04em;
  margin-bottom:3px; opacity:1;
  display: flex; align-items: baseline; gap: 6px;
}
.tl-v-km {
  font-size: 13px;
  opacity: 0.45;
  letter-spacing: .03em;
  color: var(--white);
}
.tl-v-name {
  font-family:var(--ft),var(--fb);
  font-size:15px; color:var(--white);
  font-weight:700; line-height:1.3; margin-bottom:3px;
}
.tl-v-note {
  font-family:var(--ft),var(--fb);
  font-size:11.5px; color:var(--white); line-height:1.5; opacity:.6;
}
.tl-v-event.milestone .tl-v-name {
  font-family:var(--fd); font-size:18px;
  letter-spacing:.1em; text-transform:uppercase; color:var(--red);
}
.tl-seg {
  font-family:var(--ft),var(--fb); font-size:13px; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:#ffffff;
  padding:14px 0 8px 12px; margin-bottom:4px; margin-top:8px;
  border-top:1px solid var(--line);
  border-left:3px solid #ffffff;
}
.tl-seg:first-child { border-top:none; margin-top:0; padding-top:0; }

@media(max-width:680px){
  .tl-cols { grid-template-columns:1fr }
}

/* Detail pair */
.detail-row {
  display:grid; grid-template-columns:1fr 1fr;
  gap:1px; background:var(--line);
  border:1px solid var(--line); border-radius:4px;
  overflow:hidden; margin-bottom:20px;
}
.detail-cell { background:var(--bg); padding:0 }
.detail-lbl {
  font-family:var(--ft),var(--fb); font-size:16px; font-weight:700;
  color:#ffffff; background:#141414;
  letter-spacing:.08em; text-transform:uppercase;
  padding:14px 20px;
}
.drow {
  display:flex; justify-content:space-between; align-items:center;
  padding:11px 20px; border-bottom:1px solid var(--line);
}
.drow:last-child { border-bottom:none }
.dl { font-size:14px; font-weight:600; color:var(--fg) }
.dv { font-family:var(--fm); font-size:14px; color:var(--sub) }
.dv.hi { color:var(--red) }
/* ─── Upsell product rows ─── */
.upsell-item {
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 20px; border-bottom:1px solid var(--line);
}
.upsell-item:last-child { border-bottom:none }
.upsell-item-info { display:flex; flex-direction:column; gap:2px }
.upsell-item-name { font-size:13px; font-weight:700; color:var(--fg); letter-spacing:.04em; text-transform:uppercase }
.upsell-item-flavor { font-size:12px; color:var(--muted) }

.drow-sub-hdr { background:rgba(255,255,255,.03) }
.drow-sub-hdr .dl { font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--muted) }
.drow-sub { padding-left:32px }
.drow-sub .dl { font-weight:500; color:var(--sub) }

/* ─────────────────────────────────────────
   PRODUCTS SECTION
───────────────────────────────────────── */
.prod-wrap {
  border:1px solid var(--line); border-radius:4px;
  overflow:hidden; margin-bottom:20px;
}
.prod-top {
  padding:18px 24px;
  border-bottom:1px solid var(--line);
  display:flex; align-items:center; justify-content:space-between;
}
.prod-brand {
  font-family:var(--fd); font-size:20px; letter-spacing:.1em;
}
.prod-brand em { color:var(--red); font-style:normal }
.prod-top-note {
  font-family:var(--fm); font-size:10px; color:var(--muted);
  letter-spacing:.08em; text-align:right; line-height:1.8;
}

/* Category tabs */
.cat-tabs {
  display:flex; border-bottom:1px solid var(--line);
  overflow-x:auto;
}
.cat-tab {
  font-family:var(--fm); font-size:11px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--muted);
  padding:11px 20px; cursor:pointer; white-space:nowrap;
  border-bottom:2px solid transparent;
  transition:color .12s; margin-bottom:-1px;
}
.cat-tab:hover { color:var(--sub) }
.cat-tab.on { color:var(--white); border-bottom-color:var(--red) }

/* Product list */
.prod-list { }
.prod-item {
  display:flex; align-items:center;
  padding:16px 24px;
  border-bottom:1px solid var(--line);
  gap:16px;
  transition:background .1s;
}
.prod-item:last-child { border-bottom:none }
.prod-item:hover { background:rgba(255,255,255,.02) }
.prod-item.rec { border-left:2px solid var(--red); padding-left:22px }

.prod-info { flex:1; min-width:0 }
.prod-name {
  font-family:var(--fd); font-size:17px;
  letter-spacing:.05em; text-transform:uppercase;
}
.prod-flavor { font-size:12px; color:var(--muted); font-weight:300; margin-bottom:6px }
.prod-nutrients {
  display:flex; gap:12px; flex-wrap:wrap;
}
.pnut {
  font-family:var(--fm); font-size:10px; color:var(--dim);
  display:flex; align-items:center; gap:4px;
}
.pnut b { color:var(--muted) }
.pnut-sep { color:var(--line2) }

.prod-tags {
  display:flex; gap:6px; margin-bottom:4px; flex-wrap:wrap;
}
.ptag {
  font-family:var(--fm); font-size:9px; letter-spacing:.1em;
  text-transform:uppercase; padding:2px 6px; border-radius:2px;
}
.ptag-rec  { background:rgba(232,0,26,.12); color:var(--red) }
.ptag-caf  { background:rgba(144,144,255,.1); color:#9090ff }
.ptag-salt { background:rgba(200,180,0,.1); color:#c0a800 }

/* Qty control */
.qty-ctrl { display:flex; align-items:center; gap:0; flex-shrink:0 }
.qty-btn {
  width:44px; height:44px;
  background:none; border:1px solid var(--line2);
  color:var(--sub); cursor:pointer;
  font-family:var(--fd); font-size:20px; line-height:1;
  display:flex; align-items:center; justify-content:center;
  transition:all .1s; border-radius:2px;
  -webkit-tap-highlight-color: transparent;
}
.qty-btn:hover { border-color:var(--white); color:var(--white) }
.qty-btn.plus:hover { background:var(--red); border-color:var(--red); color:#fff }
.qty-num {
  font-family:var(--fd); font-size:22px; letter-spacing:.04em;
  min-width:40px; text-align:center; color:var(--dim);
  transition:color .1s;
}
.qty-num.has { color:var(--white) }
.prod-rec-qty {
  font-family:var(--fm); font-size:9px; color:var(--muted);
  text-align:center; margin-top:3px; letter-spacing:.06em;
}

.prod-note {
  font-size:11px; color:var(--dim);
  line-height:1.5; margin-top:5px;
  font-style:italic;
}
.prod-pack-info {
  font-family:var(--fm); font-size:10px;
  color:var(--muted); letter-spacing:.04em;
  margin-bottom:4px;
}

/* ─────────────────────────────────────────
   CART
───────────────────────────────────────── */
.cart-wrap {
  border:1px solid var(--line); border-radius:4px;
  overflow:hidden; margin-bottom:20px;
}
.cart-head {
  padding:14px 24px; border-bottom:1px solid var(--line);
  display:flex; align-items:center; justify-content:space-between;
}
.cart-title { font-family:var(--fd); font-size:18px; letter-spacing:.08em; text-transform:uppercase }
.cart-badge-n {
  font-family:var(--fm); font-size:11px; color:var(--muted);
}
.cart-empty { padding:20px 24px; font-size:13px; color:var(--dim); text-align:center }
.cart-row {
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 24px; border-bottom:1px solid var(--line);
}
.cart-row:last-child { border-bottom:none }
.cart-row-name { font-size:13px; color:var(--white) }
.cart-row-detail { font-size:11px; color:var(--muted); margin-top:1px }
.cart-row-right { text-align:right; flex-shrink:0 }
.cart-row-qty { font-family:var(--fd); font-size:22px; color:var(--red) }
.cart-row-unit { font-family:var(--fm); font-size:10px; color:var(--muted) }

/* Order row */
.order-row {
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 24px;
  border:1px solid var(--line); border-radius:4px;
  margin-bottom:20px; gap:16px;
}
.order-text { flex:1 }
.order-head-txt { font-size:14px; color:var(--white); margin-bottom:2px }
.order-sub-txt { font-size:12px; color:var(--muted) }
.order-btn {
  background:var(--red); border:none; color:#fff; cursor:pointer;
  font-family:var(--fd); font-size:17px; letter-spacing:.1em; text-transform:uppercase;
  padding:12px 26px; border-radius:3px; white-space:nowrap;
  transition:background .12s;
}
.order-btn:hover { background:#c8001a }
.order-btn:disabled { background:var(--dim); cursor:not-allowed }

/* ─────────────────────────────────────────
   RACE PACK  (new product section)
───────────────────────────────────────── */
.pack-wrap {
  border: 1px solid var(--line);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 24px;
}

.pack-header {
  padding: 14px 20px;
  border-bottom: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: #141414;
}
.pack-title {
  font-family: var(--ft, var(--fd)); font-size: 16px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: #ffffff;
}
.pack-note {
  font-family: var(--fm); font-size: 10px; color: var(--muted);
  letter-spacing: .05em; text-align: right; line-height: 1.8; flex-shrink: 0;
}

/* Pack card grid — 1 row per product */
.pack-grid {
  display: grid;
  grid-template-columns: 1fr;
  border-bottom: 1px solid var(--line);
}
.pack-grid:empty { display: none }

.pack-card {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 14px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  transition: background .1s;
}
.pack-card:hover { background: rgba(255,255,255,.025) }
.pack-card.is-rec { border-left: 2px solid var(--red) }

.pack-card-dot {
  width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; margin-top: 2px;
}
.pack-card-left { display: flex; align-items: flex-start; gap: 10px; flex: 1; min-width: 0 }
.pack-card-info { flex: 1; min-width: 0 }
.pack-card-name {
  font-family: var(--fd); font-size: 16px; letter-spacing: .05em;
  text-transform: uppercase; color: var(--white); line-height: 1.2;
}
.pack-card-flavor {
  display: block;
  font-family: var(--text, sans-serif); font-size: 12px; color: var(--muted);
  text-transform: none; letter-spacing: .02em; font-weight: 400; margin-top: 1px;
}
.pack-card-nut {
  font-size: 10px; color: var(--dim); margin-top: 3px; line-height: 1.4;
}
.pack-card-rec {
  font-family: var(--fm); font-size: 9px; color: var(--red);
  letter-spacing: .06em; margin-top: 3px;
}
.pack-card-note {
  font-size: 10px; color: var(--dim); margin-top: 3px;
  font-style: italic; line-height: 1.4;
}
.pack-card-right {
  display: flex; flex-direction: column; align-items: center; flex-shrink: 0;
}

/* Upsell header — sits above "you may also like" cards */
.pack-more-hdr {
  width: 100%; padding: 11px 20px;
  background: none; border-top: 1px solid var(--line);
  color: var(--muted); font-family: var(--fm); font-size: 11px;
  letter-spacing: .06em; text-transform: uppercase;
}
.pack-more-hdr:empty,
.pack-more-hdr:has(+ .pack-grid:empty) { display: none }
.pack-more-hdr:has(+ .pack-grid:empty) ~ #pack-opt { display: none }

/* Upsell cards — slightly lifted bg so they don't blend with the order row */
#pack-opt .pack-card { background: rgba(255,255,255,.025) }
#pack-opt .pack-card:hover { background: rgba(255,255,255,.05) }

/* Inline Order Row — sits directly under recommended grid */
.pack-order-row {
  display: flex; align-items: center; gap: 16px;
  padding: 14px 20px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: rgba(255,255,255,.02);
}
.pack-order-summary {
  flex: 1; min-width: 0;
  font-family: var(--fm); font-size: 12px; color: var(--muted);
  letter-spacing: .04em; line-height: 1.6;
}
.pack-order-summary b { color: var(--white) }
.pack-order-btn {
  background: var(--red); border: none; color: #fff; cursor: pointer;
  font-family: var(--fd); font-size: 15px; letter-spacing: .1em;
  text-transform: uppercase; padding: 11px 26px; border-radius: 3px;
  white-space: nowrap; transition: background .12s; flex-shrink: 0;
}
.pack-order-btn:hover { background: #c8001a }
.pack-order-btn:disabled { background: var(--dim); cursor: not-allowed }

@media (max-width: 520px) {
  .pack-card { padding: 12px 12px }
  .pack-order-row { flex-direction: column; align-items: stretch }
  .pack-order-btn { text-align: center }
}

/* Restart */
.restart-row {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  padding: 32px 0 48px; border-top: 1px solid var(--line);
}
.restart-btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: none; border: 1px solid var(--line2); color: var(--white); cursor: pointer;
  font-family: var(--fm); font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
  padding: 13px 28px; border-radius: 8px;
  transition: border-color .15s;
}
.restart-btn:hover { border-color: var(--white); }

/* ─────────────────────────────────────────
   MODAL
───────────────────────────────────────── */
.modal-bg {
  position:fixed; inset:0; z-index:500;
  background:rgba(0,0,0,.8); backdrop-filter:blur(12px);
  display:none; align-items:center; justify-content:center;
  padding:20px;
  overflow-y:auto;
}
.modal-bg.show { display:flex }
.modal {
  background:var(--bg); border:1px solid var(--line2);
  border-top:2px solid var(--red);
  border-radius:4px; width:100%; max-width:480px;
  animation:appear .18s ease;
}
.modal-head {
  padding:18px 24px; border-bottom:1px solid var(--line);
  display:flex; align-items:center; justify-content:space-between;
}
.modal-title { font-family:var(--fd); font-size:20px; letter-spacing:.08em; text-transform:uppercase }
.modal-x {
  background:none; border:none; cursor:pointer;
  font-family:var(--fm); font-size:14px; color:var(--muted);
  transition:color .12s; padding:4px;
}
.modal-x:hover { color:var(--white) }
.modal-body {
  padding:24px;
  max-height:calc(80vh - 120px);
  overflow-y:auto;
}
.modal-body p { font-size:13px; color:var(--muted); line-height:1.7; margin-bottom:14px }
.modal-list { margin-bottom:16px }
.modal-item {
  display:flex; justify-content:space-between; align-items:center;
  padding:9px 0; border-bottom:1px solid var(--line);
}
.modal-item:last-child { border-bottom:none }
.modal-item-name { font-size:13px; color:var(--white) }
.modal-item-qty { font-family:var(--fd); font-size:20px; color:var(--red) }
.modal-note-txt { font-size:11px; color:var(--dim) }
.modal-disclaimer { font-size:12px; color:var(--muted); line-height:1.7; padding:12px 20px 0; margin:0 }
.modal-foot {
  padding:14px 24px; border-top:none;
  display:flex; gap:10px;
}
.modal-cancel {
  background:none; border:1px solid var(--line2); color:var(--muted); cursor:pointer;
  font-family:var(--fm); font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  padding:11px 20px; border-radius:3px; transition:all .12s;
}
.modal-cancel:hover { border-color:var(--dim); color:var(--white) }
.modal-confirm {
  flex:1; background:var(--red); border:none; color:#fff; cursor:pointer;
  font-family:var(--fd); font-size:17px; letter-spacing:.1em; text-transform:uppercase;
  padding:11px; border-radius:3px; transition:background .12s;
}
.modal-confirm:hover { background:#c8001a }

/* Discount badge inside Order modal */
.discount-badge {
  margin:14px 0 0;
  padding:12px 0 0;
  border-top:1px solid var(--line);
}
.disc-label {
  font-size:10px; color:var(--muted);
  letter-spacing:.06em; text-transform:uppercase;
  margin-bottom:8px;
}
.disc-code-row {
  display:flex; align-items:center; gap:10px;
}
.disc-code {
  font-family:var(--fm); font-size:15px; font-weight:700;
  letter-spacing:.12em; color:var(--white);
}
.discount-copy {
  padding:4px 10px;
  background:none; color:var(--muted);
  border:1px solid var(--line2);
  border-radius:3px; cursor:pointer;
  font-family:var(--fm); font-size:10px; letter-spacing:.06em;
  transition:border-color .15s, color .15s;
}
.discount-copy:hover { border-color:var(--red); color:var(--red); }
.discount-copy.copied { border-color:#60c060; color:#60c060; }
.discount-hint {
  margin-top:5px; font-size:10.5px; color:var(--muted);
}

/* ── Order modal: single-column layout ── */
.modal-wide { max-width:520px !important; }
.modal-body-single {
  display:flex; flex-direction:column;
  padding:20px 24px; gap:0;
}
.modal-col-label {
  font-size:10px; color:var(--muted);
  letter-spacing:.08em; text-transform:uppercase;
  margin-bottom:12px;
}
.modal-form-section {
  margin-top:20px; padding-top:16px;
  border-top:1px solid var(--line);
  display:flex; flex-direction:column; gap:8px;
}
.modal-form-hint {
  font-size:11px; color:var(--muted); margin:0 0 4px;
}
.modal-note-txt {
  font-size:11px; color:var(--muted);
}
/* keep legacy split classes inert */
.modal-body-split { display:flex; flex-direction:column; padding:20px 24px; }
.modal-col-order, .modal-col-form { padding:0; }

/* Form inputs */
.modal-name-row { display:flex; gap:8px; margin-bottom:8px; }
.modal-input {
  width:100%; padding:9px 12px; border-radius:4px;
  background:transparent; border:1px solid var(--line2);
  color:var(--white); font-size:13px; outline:none;
  box-sizing:border-box; font-family:var(--ft),var(--fb);
  transition:border-color .12s;
}
.modal-input-wide { margin-bottom:16px; }
.modal-input:focus { border-color:var(--white); }
.modal-input::placeholder { color:var(--muted); }
.modal-field-err { font-size:11px; color:var(--red); margin:-12px 0 10px; }

/* Checkboxes */
.modal-check {
  display:flex; align-items:flex-start; gap:10px;
  cursor:pointer; margin-bottom:10px; user-select:none;
}
.modal-check .consent-box {
  width:16px; height:16px; flex-shrink:0; margin-top:2px;
  border-radius:2px;
}
.modal-check span:last-child {
  font-size:12px; color:var(--muted); line-height:1.5;
}
.modal-check:has(input:checked) span:last-child { color:var(--white); }
.modal-sub-hint {
  font-size:11px; color:var(--sub);
  margin:-2px 0 14px 26px; line-height:1.4;
}

/* Slide-in animation when discount unlocks */
@keyframes subUnlock {
  from { opacity:0; transform:translateY(-5px); }
  to   { opacity:1; transform:translateY(0); }
}
.discount-badge.sub-unlock { animation:subUnlock 0.22s ease; }

/* Responsive — stack on mobile */
@media (max-width:600px) {
  .modal-bg { align-items:flex-start; padding:12px; }
  .modal-wide { max-width:100% !important; }
  .modal { margin:0; width:100%; }
  .modal-body {
    max-height:calc(100dvh - 140px);
    padding:16px;
  }
  .modal-body-split { flex-direction:column; }
  .modal-col-order {
    border-right:none;
    border-bottom:1px solid var(--line);
    padding:0 0 16px;
  }
  .modal-col-form { padding:16px 0 0; }
}
[data-theme="light"] .discount-badge {
  background:rgba(232,0,26,0.04);
  border-color:rgba(232,0,26,0.3);
}

/* Confirmed */
.conf-body { padding:36px 24px; text-align:center }
.conf-icon { font-size:40px; margin-bottom:16px }
.conf-msg {
  font-family:var(--fd); font-size:32px;
  letter-spacing:.06em; text-transform:uppercase; margin-bottom:8px;
}
.conf-sub { font-size:13px; color:var(--muted); line-height:1.7 }

/* ─────────────────────────────────────────
   THEME TOGGLE
───────────────────────────────────────── */
.theme-btn {
  background: none; border: none;
  color: var(--muted); cursor: pointer;
  width: 24px; height: 24px; padding:0;
  display:flex; align-items:center; justify-content:center;
  transition: color .15s; flex-shrink:0; opacity:.6;
}
.theme-btn:hover { color: var(--white); opacity:1; }

.theme-row {
  display: flex; gap: 8px; justify-content: center;
  margin-bottom: 28px;
}
.theme-toggle-card {
  background: none; border: 1px solid var(--line2);
  color: var(--muted); cursor: pointer;
  font-family: var(--ft), var(--fb); font-size: 14px;
  padding: 10px 28px; border-radius: 4px;
  transition: all .14s; letter-spacing: .02em;
  -webkit-tap-highlight-color: transparent;
}
.theme-toggle-card.on {
  border-color: var(--white); color: var(--white);
  background: rgba(255,255,255,.06);
}
[data-theme="light"] .theme-toggle-card.on {
  border-color: var(--white); color: var(--white);
  background: rgba(0,0,0,.08);
}

/* ─────────────────────────────────────────
   CONSENT
───────────────────────────────────────── */
.consent-wrap {
  padding: 16px 40px 80px;
  max-width: 720px; margin: 0 auto;
}
.consent-label {
  display: flex; align-items: flex-start; gap: 14px;
  cursor: pointer; user-select: none;
}
.consent-cb-input { display: none }
input[type="checkbox"] {
  display: none;
}
.consent-box {
  width: 20px; height: 20px; flex-shrink: 0;
  border: 1px solid var(--line2); border-radius: 3px;
  margin-top: 2px;
  transition: border-color .12s, background .12s;
  position: relative;
}
input[type="checkbox"]:checked + .consent-box {
  background: var(--red); border-color: var(--red);
}
.consent-text {
  font-family: var(--ft), var(--fb);
  font-size: 13px; color: var(--white);
  line-height: 1.6; opacity: .7;
}
.consent-label:has(input:checked) .consent-text { opacity: 1 }
#calc-btn:disabled {
  opacity: .35; cursor: not-allowed;
}
@media (max-width:768px) {
  .consent-wrap { padding: 16px 16px 80px }
}

/* ─────────────────────────────────────────
   ELEVATION STRIP
───────────────────────────────────────── */
.elev-strip-wrap {
  padding: 8px 0 10px;
  border-top: 1px solid var(--line2); /* thinner — GPX reads as continuation of timeline */
}
.elev-strip-label {
  font-family: var(--fm); font-size: 10px;
  color: var(--white); letter-spacing: .09em; text-transform: uppercase;
  opacity: 0.7;
  margin-top: 8px; margin-bottom: 2px;
  display: flex; align-items: baseline; gap: 8px;
  padding: 0 16px;
}
.elev-strip-label span {
  font-size: 10px;
  letter-spacing: .09em;
}
.elev-strip-scroll {
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
  width: 100%;
  padding: 0 16px 6px;
  box-sizing: border-box;
  scrollbar-width: thin;
  scrollbar-color: var(--line2) transparent;
}
.elev-strip-scroll::-webkit-scrollbar { height: 4px }
.elev-strip-scroll::-webkit-scrollbar-thumb { background: var(--line2); border-radius:2px }
/* SVG never scales down — always its natural computed width, scroll handles overflow */
.elev-strip-svg { display:block; flex-shrink:0; overflow:visible; min-width:min-content; }

/* Legend in elevation strip */
.elev-legend {
  display: flex; flex-wrap:wrap; gap: 10px 18px; margin-top: 10px;
  font-family: var(--fm); font-size: 9px; color: var(--muted);
  padding: 0 16px; letter-spacing:.06em;
}
.elev-legend-dot {
  width: 9px; height: 9px; border-radius: 50%;
  display: inline-block; margin-right: 5px; vertical-align:middle;
}
.elev-legend-diamond {
  width: 8px; height: 8px; background: rgba(255,255,255,0.85);
  display: inline-block; margin-right: 5px; vertical-align:middle;
  transform: rotate(45deg); border-radius: 1px;
}
.elev-legend-sep {
  width: 1px; height: 12px; background: rgba(255,255,255,0.12);
  display: inline-block; vertical-align: middle;
  margin: 0 2px;
}
[data-theme="light"] .elev-legend-diamond { background: rgba(0,0,0,0.55); }
[data-theme="light"] .elev-legend-sep     { background: rgba(0,0,0,0.15); }

/* ─────────────────────────────────────────
   PRINT BUTTON (legacy — kept for other uses)
───────────────────────────────────────── */
.print-btn {
  display: flex; align-items:center; gap:6px;
  background: none; border: 1px solid var(--line2);
  color: var(--muted); cursor: pointer;
  font-family: var(--fm); font-size: 10px;
  letter-spacing: .1em; text-transform: uppercase;
  padding: 6px 12px; border-radius: 3px;
  transition: all .12s;
}
.print-btn:hover { border-color: var(--white); color: var(--white) }

/* ─────────────────────────────────────────
   TIMELINE ACTION BAR — below GPX strip
───────────────────────────────────────── */
.tl-action-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 16px 20px;
  border-top: 1px solid var(--line);
}
.tl-act-btn {
  display: flex; align-items: center; gap: 7px;
  background: none;
  border: 1px solid var(--line2);
  color: var(--sub);
  cursor: pointer;
  font-family: var(--fm);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 9px 16px;
  border-radius: 4px;
  transition: border-color .12s, color .12s, background .12s;
  white-space: nowrap;
}
.tl-act-btn:hover { border-color: var(--white); color: var(--white); }
.tl-act-btn--done { color: var(--red); border-color: var(--red); }
.tl-act-btn--done:hover { background: rgba(232,0,26,0.08); color: var(--red); border-color: var(--red); }

/* Primary variant — used in header for Fuel Card / Fuel Report */
.tl-act-btn--primary {
  color: var(--sub);
  border-color: var(--line);
  font-size: 10px;
  padding: 6px 12px;
  letter-spacing: .12em;
}
.tl-act-btn--primary:hover { border-color: var(--sub); color: var(--white); }

/* Separator between action groups */
.tl-act-sep {
  width: 1px; height: 18px;
  background: var(--line2);
  flex-shrink: 0;
  margin: 0 2px;
}

/* Hide Done/Reset/Add by default; shown via JS in adjust mode */
#tl-adjust-done, #tl-adjust-reset, #tl-adjust-undo, #tl-adjust-add { display: none; }

/* ─────────────────────────────────────────
   ADD EVENT — modal & delete-X button
───────────────────────────────────────── */
/* Delete ✕ on each event slot — only visible inside .tl-edit-mode */
.tl-x-btn {
  display: none;
  position: absolute;
  top: 4px; right: 4px;
  width: 18px; height: 18px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(0,0,0,0.55);
  color: rgba(255,255,255,0.7);
  font-size: 10px; line-height: 1;
  cursor: pointer; padding: 0;
  align-items: center; justify-content: center;
  transition: all .12s;
  z-index: 4;
}
.tl-x-btn:hover {
  background: var(--red); color: #fff;
  border-color: var(--red);
}
.tl-edit-mode .tl-x-btn { display: inline-flex !important; }
[data-theme="light"] .tl-x-btn {
  background: rgba(255,255,255,0.85);
  color: rgba(0,0,0,0.55);
  border-color: rgba(0,0,0,0.18);
}
[data-theme="light"] .tl-x-btn:hover {
  background: var(--red); color: #fff;
}

/* Add Event modal rows */
.ae-row { margin-bottom: 18px; }
.ae-lbl {
  font-family: var(--fm); font-size: 10px; letter-spacing: .12em;
  color: var(--muted); margin-bottom: 8px; text-transform: uppercase;
}
.ae-time-display {
  font-family: var(--fd); font-size: 28px; color: var(--white);
  letter-spacing: .04em; margin-bottom: 6px;
}
.ae-slider { width: 100%; }
.ae-time-meta {
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--fm); font-size: 10px; color: var(--dim);
  margin-top: 4px;
}
#ae-time-phase {
  color: var(--red); font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase;
}
.ae-select {
  width: 100%; padding: 10px 12px;
  background: var(--surface); color: var(--white);
  border: 1px solid var(--line2); border-radius: 4px;
  font-family: var(--fm); font-size: 13px;
}
.ae-qty-row { display: flex; align-items: center; justify-content: space-between; }
.ae-qty-row .ae-lbl { margin-bottom: 0; }
.ae-qty-ctrl {
  display: inline-flex; align-items: center; gap: 4px;
  border: 1px solid var(--line2); border-radius: 4px;
  background: var(--surface);
}
.ae-qty-btn {
  width: 32px; height: 32px;
  background: none; border: none; cursor: pointer;
  color: var(--white); font-size: 18px;
}
.ae-qty-btn:hover { background: rgba(255,255,255,0.06); }
.ae-qty-num {
  min-width: 30px; text-align: center;
  font-family: var(--fd); font-size: 18px; color: var(--white);
}
.ae-preview {
  padding: 10px 12px; border-radius: 4px;
  background: rgba(232,0,26,0.06);
  border: 1px solid rgba(232,0,26,0.18);
  font-size: 12px; color: var(--white); line-height: 1.6;
}
.ae-preview.invalid {
  background: rgba(255,170,0,0.06);
  border-color: rgba(255,170,0,0.3);
  color: #ffaa00;
}

/* ─────────────────────────────────────────
   GPX UPLOAD SCREEN (S1B)
───────────────────────────────────────── */
.gpx-drop {
  border: 1.5px dashed var(--line2); border-radius: 10px;
  padding: 32px 24px; text-align: center; cursor: pointer;
  transition: border-color .14s; background: var(--surface);
}
.gpx-drop:hover { border-color: var(--sub) }
.gpx-drop-icon { color: var(--muted); margin-bottom: 12px }
.gpx-drop-title {
  font-family: var(--ft),var(--fb); font-size: 16px; font-weight: 600;
  color: var(--white); margin-bottom: 6px;
}
.gpx-drop-sub { font-size: 13px; color: var(--muted) }
.gpx-stats {
  display: grid; grid-template-columns: repeat(3,1fr);
  gap: 1px; background: var(--line);
  border: 1px solid var(--line); border-radius: 6px; overflow: hidden;
}
.gpx-stat { background: var(--bg); padding: 14px 16px }
.gpx-stat-lbl { font-family: var(--fm); font-size: 10px; color: var(--muted); letter-spacing:.1em; text-transform:uppercase; margin-bottom:4px }
.gpx-stat-val { font-family: var(--fd); font-size: 28px; color: var(--red) }
.gpx-clear-btn {
  margin-top: 12px; background: none; border: 1px solid var(--line2);
  color: var(--muted); cursor: pointer; font-family: var(--fm);
  font-size: 10px; letter-spacing:.1em; padding: 6px 14px; border-radius: 3px;
}
.gpx-clear-btn:hover { border-color: var(--sub); color: var(--white) }
.gpx-skip-note {
  margin-top: 20px; font-size: 13px; color: var(--dim); text-align: center;
}

/* ─────────────────────────────────────────
   PRODUCT PREFERENCE SELECTOR (S2)
───────────────────────────────────────── */
.prod-pref-wrap {
  margin-top: 32px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
}
.prod-pref-label {
  font-family: var(--ft),var(--fb); font-size: 13px;
  color: var(--white); letter-spacing: .04em;
  font-weight: 600; text-transform: none;
  margin-bottom: 4px;
}
.prod-pref-sub {
  font-size: 13px; color: var(--dim);
  font-weight: 300; margin-bottom: 16px;
}
.prod-pref-grid {
  display: grid; grid-template-columns: repeat(3,1fr); gap: 8px;
}
.pref-card {
  border: 1px solid var(--line2); border-radius: 4px;
  padding: 16px 14px; cursor: pointer; user-select: none;
  position: relative; transition: border-color .12s, background .12s, opacity .12s;
  opacity: .45;
}
.pref-card.on { border-color: var(--white); opacity: 1; }
.pref-card-check {
  position: absolute; top: 9px; right: 10px;
  font-family: var(--fm); font-size: 9px;
  color: var(--white); opacity: 0;
  transition: opacity .12s;
}
.pref-card.on .pref-card-check { opacity: 1 }
.pref-card-icon { font-size: 20px; margin-bottom: 8px; line-height: 1 }
.pref-card-title {
  font-family: var(--fd); font-size: 16px;
  letter-spacing: .05em; text-transform: uppercase;
  margin-bottom: 4px;
}
.pref-card-desc {
  font-size: 11px; color: var(--muted);
  font-weight: 300; line-height: 1.5;
}
.pref-card.on .pref-card-desc { color: var(--sub) }

/* ─────────────────────────────────────────
   PLANS SCREEN (S8)
───────────────────────────────────────── */
.plan-card {
  border: 1px solid var(--line2);
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 12px;
  background: var(--surface);
  position: relative;
}
.plan-card-top {
  display: flex; justify-content: space-between; align-items: flex-start;
  margin-bottom: 16px;
}
.plan-card-label {
  font-family: var(--fd); font-size: 22px; letter-spacing: .06em; text-transform: uppercase;
}
.plan-card-date {
  font-family: var(--fm); font-size: 11px; color: var(--sub);
}
.plan-kpi-row {
  display: flex; gap: 16px; margin-bottom: 16px;
}
.plan-kpi {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  background: var(--red-a); border: 1px solid rgba(232,0,26,.2);
  border-radius: 8px; padding: 12px 8px;
}
.plan-kpi-val {
  font-family: var(--fd); font-size: 28px; color: var(--red); line-height: 1;
}
.plan-kpi-unit {
  font-family: var(--fm); font-size: 10px; color: var(--sub); margin-top: 2px;
}
.plan-kpi-lbl {
  font-family: var(--ft), var(--fb); font-size: 11px; color: var(--muted); margin-top: 4px;
}
.plan-card-actions {
  display: flex; gap: 8px; justify-content: flex-end;
}
.plan-del-btn {
  background: none; border: 1px solid var(--line2);
  color: var(--muted); font-size: 12px; padding: 6px 12px;
  border-radius: 6px; cursor: pointer;
}
.plan-del-btn:hover { border-color: var(--red); color: var(--red); }
.plans-empty {
  text-align: center; padding: 60px 20px;
  font-family: var(--ft), var(--fb); color: var(--sub); font-size: 15px;
}

/* Toast */
#save-toast {
  position: fixed; bottom: 80px; left: 50%; transform: translateX(-50%);
  background: var(--red); color: #fff;
  font-family: var(--fm); font-size: 12px; letter-spacing: .08em;
  padding: 10px 24px; border-radius: 100px;
  opacity: 0; transition: opacity .2s;
  z-index: 500; pointer-events: none;
}
#save-toast.show { opacity: 1; }

/* ─────────────────────────────────────────
   FAQ MODAL
───────────────────────────────────────── */
.faq-modal-bg {
  position: fixed; inset: 0; z-index: 600;
  background: rgba(0,0,0,.85); backdrop-filter: blur(14px);
  display: none; align-items: center; justify-content: center;
  padding: 20px;
}
.faq-modal-bg.show { display: flex }
.faq-modal {
  background: var(--bg); border: 1px solid var(--line2);
  border-top: 2px solid var(--red);
  border-radius: 8px; width: 100%; max-width: 600px;
  max-height: 80vh; overflow-y: auto;
  animation: appear .18s ease;
}
.faq-modal-head {
  padding: 18px 24px; border-bottom: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between;
  position: sticky; top: 0; background: var(--bg); z-index: 1;
}
.faq-modal-title { font-family: var(--fd); font-size: 22px; letter-spacing: .08em; text-transform: uppercase }
.faq-lang-toggle {
  display: flex; gap: 6px; align-items: center;
}
.faq-close-btn {
  background: none; border: none; cursor: pointer;
  font-family: var(--fm); font-size: 14px; color: var(--muted);
  transition: color .12s; padding: 4px;
}
.faq-close-btn:hover { color: var(--white) }
.faq-body { padding: 20px 24px }
.faq-section { margin-bottom: 24px }
.faq-section-title {
  font-family: var(--fm); font-size: 10px; color: var(--red);
  letter-spacing: .18em; text-transform: uppercase;
  margin-bottom: 12px; padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}
.faq-item {
  border: 1px solid var(--line2); border-radius: 8px;
  margin-bottom: 8px; overflow: hidden;
}
.faq-q {
  padding: 14px 16px; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--ft), var(--fb); font-size: 14px; font-weight: 600;
  color: var(--white); transition: background .12s;
  user-select: none;
}
.faq-q:hover { background: rgba(255,255,255,.03) }
.faq-q-arrow {
  font-family: var(--fm); font-size: 12px; color: var(--muted);
  transition: transform .2s; flex-shrink: 0; margin-left: 12px;
}
.faq-item.open .faq-q-arrow { transform: rotate(180deg) }
.faq-a {
  display: none; padding: 0 16px 14px;
  font-family: var(--ft), var(--fb); font-size: 13px;
  color: var(--sub); line-height: 1.7;
  border-top: 1px solid var(--line);
  padding-top: 12px;
}
.faq-item.open .faq-a { display: block }

/* ─────────────────────────────────────────
   RESPONSIVE — MOBILE
───────────────────────────────────────── */
@media (max-width:768px) {
  .wrap, .wrap-w { padding:0 16px }
  #nav  { padding:0 16px; height:44px }
  .bn   { padding:0 16px; height:52px }
  .scr  { padding:64px 0 72px }
  .sh   { padding:28px 0 20px; margin-bottom:24px }
  .step-h { font-size:clamp(36px,10vw,56px) }
  .g3, .g4 { grid-template-columns:1fr 1fr }
  .field { margin-bottom:20px }
  .field-val { font-size:38px }
  .dur-row { grid-template-columns:1fr 1fr }
  .r-banner-inner { flex-direction:column; align-items:flex-start; gap:12px }
  .r-meta { text-align:left; font-size:12px }
  .r-headline { font-size:clamp(36px,8vw,56px) }
  .kpi-row { grid-template-columns:1fr }
  .kpi-cell { padding:20px 16px; display:flex; align-items:center; justify-content:space-between; text-align:left }
  .kpi-val  { font-size:52px; margin-bottom:0 }
  .phase-row { grid-template-columns:1fr }
  .tl-cols { grid-template-columns:1fr }
  .detail-row { grid-template-columns:1fr }
  .prod-grid { grid-template-columns:1fr 1fr }
  .prod-item  { flex-wrap:wrap; gap:12px }
  .prod-pref-grid { grid-template-columns:1fr }
  .intro-defs { grid-template-columns:1fr 1fr; gap:8px }
  .intro-logo-main { font-size:clamp(20px,4vw,32px); letter-spacing:.12em }
  .intro-logo-sub { font-size:clamp(56px,16vw,100px) }
  .order-row { flex-direction:column; align-items:stretch; gap:12px }
  .btn-next.primary { padding:10px 20px; font-size:15px }
  .nsc { display:none }
  .intro { padding:68px 16px 20px }
  .lang-row { gap:6px }
  .lang-card { padding:10px 20px; font-size:17px }
  .intro-start { padding:14px 40px; font-size:18px }
  .card { padding:18px 14px }
  .gcard { padding:22px 16px }
  .pref-card { padding:14px 12px }
  .btn-back { font-size:10px }
  .step-n { font-size:10px }
  .modal { margin:0 8px }
  .tl-col-body::before { left:20px }
  .tl-v-event { gap:8px }
  .tl-v-name { font-size:11px }
  .tl-v-note { font-size:10px }
  .intro-sport-card { padding: 16px 14px; min-height: 180px }
}

@media (max-width:600px) {
  #nav { padding: 0 16px; }
  .wrap, .wrap-w { padding: 0 16px; }
  .sh { padding: 32px 0 24px; }
  .step-h { font-size: clamp(36px, 10vw, 64px); }
  .g3 { grid-template-columns: 1fr 1fr; }
  .g3.goals { grid-template-columns: 1fr; }
  .g4 { grid-template-columns: 1fr 1fr; }
  .kpi-row { grid-template-columns: 1fr; gap: 8px; }
  .kpi-cell { padding: 16px; }
  .kpi-val { font-size: 44px; }
  .phase-row { grid-template-columns: 1fr; }
  .bn { min-height: 48px; font-size: 13px; }
  .card { padding: 18px 16px; }
  .opt { padding: 12px 14px; }
  .gcard { padding: 20px 16px; }
  .field-val { font-size: 44px; }
  .tl-col { min-width: 0; }
  .prod-grid { grid-template-columns: 1fr; }
  .plan-kpi-row { gap: 8px; }
  #cart-pill { bottom: 16px; right: 16px; }
  .intro-sport-grid { grid-template-columns: 1fr }
  .intro-sport-card { padding: 20px 24px; min-height: 100px }
  .intro-sport-title { font-size: clamp(28px, 8vw, 40px) }

  /* ── Timeline mobile ── */
  /* Header: allow wrap so buttons don't overflow title on narrow screens */
  .tl-head { padding: 10px 16px; flex-wrap: wrap; }
  .tl-head-actions { flex-shrink: 1; flex-wrap: wrap; }
  /* Primary buttons (Fuel Card / Fuel Report) — bigger touch target */
  .tl-act-btn--primary { min-height: 36px; padding: 8px 12px; }
  /* Column head padding reduced in 3-col */
  .tl-col-head { padding: 10px 12px; }
  /* Action bar: tighter on mobile */
  .tl-action-bar { padding: 12px 16px; gap: 8px; }
  /* Secondary action buttons — touch-friendly */
  .tl-act-btn { min-height: 40px; padding: 10px 14px; }
  /* Legend: tighter gap */
  .elev-legend { gap: 8px 12px; }
}

@media (max-width:480px) {
  /* Grip handle: wider touch area in adjust mode */
  .tl-grip { width: 26px; font-size: 15px; }
  /* Milestone events: reduce font so they don't overflow narrow columns */
  .tl-v-event.milestone .tl-v-name { font-size: 15px; }
  /* Header: stack title + buttons vertically on very narrow screens */
  .tl-head { flex-direction: column; align-items: flex-start; gap: 8px; }
  .tl-head-actions { width: 100%; justify-content: flex-start; }
  /* Action bar: hide separator, let buttons breathe */
  .tl-act-sep { display: none; }
  .tl-action-bar { gap: 6px; }
  /* Elevation legend: tightest gap */
  .elev-legend { gap: 6px 10px; font-size: 9px; }
  /* Elevation label below graph */
  .elev-strip-label { font-size: 9px; }
}

@media (max-width:400px) {
  .g3, .g4, .g3.goals { grid-template-columns:1fr }
  .dur-row  { grid-template-columns:1fr 1fr }
  .prod-pref-grid { grid-template-columns:1fr }
  .intro-defs { grid-template-columns:1fr }
  .kpi-val  { font-size:44px }
  .intro-logo-main { font-size:clamp(16px,5vw,24px) }
  .intro-logo-sub  { font-size:clamp(48px,16vw,80px) }
  .wrap, .wrap-w { padding:0 12px }
  .phase-body { padding:14px }
  .prow { gap:6px }
  .tl-col-body { padding:12px 10px 14px }
  .prod-item { padding:12px 14px }
}

/* ─────────────────────────────────────────
   SAVE PLAN BUTTON
───────────────────────────────────────── */
.save-plan-btn {
  display: inline-flex; align-items: center; gap: 7px;
  background: none; border: 1px solid var(--line2);
  color: var(--white); cursor: pointer;
  font-family: var(--ft), var(--fb); font-size: 13px;
  padding: 13px 24px; border-radius: 8px;
  font-family: var(--fm); font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
  transition: border-color .15s, color .15s;
}
.save-plan-btn:hover { border-color: var(--white); color: var(--white); }

/* Save toast */
#save-toast {
  position: fixed; bottom: 80px; left: 50%; transform: translateX(-50%);
  background: var(--red); color: #fff;
  font-family: var(--fm); font-size: 12px; letter-spacing: .08em;
  padding: 10px 24px; border-radius: 100px;
  opacity: 0; transition: opacity .2s;
  z-index: 500; pointer-events: none; white-space: nowrap;
}
#save-toast.show { opacity: 1; }

/* ─────────────────────────────────────────
   MY PLANS (S8)
───────────────────────────────────────── */
.plan-card {
  border: 1px solid var(--line2);
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 12px;
  background: var(--surface);
  position: relative;
  transition: border-color .15s;
}
.plan-card:hover { border-color: var(--sub); }
.plan-card-top {
  display: flex; justify-content: space-between; align-items: flex-start;
  margin-bottom: 16px;
}
.plan-card-label {
  font-family: var(--fd); font-size: 22px; letter-spacing: .06em; text-transform: uppercase; line-height: 1.1;
}
.plan-card-date {
  font-family: var(--fm); font-size: 11px; color: var(--sub); flex-shrink: 0; margin-left: 12px;
}
.plan-kpi-row {
  display: flex; gap: 10px; margin-bottom: 16px;
}
.plan-kpi {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  background: var(--red-a); border: 1px solid rgba(232,0,26,.18);
  border-radius: 8px; padding: 12px 6px;
}
.plan-kpi-val {
  font-family: var(--fd); font-size: 28px; color: var(--red); line-height: 1;
}
.plan-kpi-unit {
  font-family: var(--fm); font-size: 10px; color: var(--sub); margin-top: 2px;
}
.plan-kpi-lbl {
  font-family: var(--ft), var(--fb); font-size: 11px; color: var(--muted); margin-top: 4px;
}
.plan-card-actions {
  display: flex; gap: 8px; justify-content: flex-end;
}
.plan-del-btn {
  background: none; border: 1px solid var(--line2);
  color: var(--muted); font-size: 11px; padding: 5px 12px;
  border-radius: 6px; cursor: pointer;
  transition: border-color .12s, color .12s;
}
.plan-del-btn:hover { border-color: var(--red); color: var(--red); }
.plans-empty {
  text-align: center; padding: 60px 20px;
  font-family: var(--ft), var(--fb); color: var(--sub); font-size: 15px;
}

/* ─────────────────────────────────────────
   FAQ MODAL
───────────────────────────────────────── */
.faq-modal {
  max-width: 600px;
}
.faq-body {
  padding: 0 0 8px;
  max-height: 60vh;
  overflow-y: auto;
}
.faq-item {
  border-bottom: 1px solid var(--line);
}
.faq-item:last-child { border-bottom: none; }
.faq-q {
  width: 100%; background: none; border: none;
  display: flex; justify-content: space-between; align-items: center;
  padding: 16px 24px;
  font-family: var(--ft), var(--fb); font-size: 14px; font-weight: 500;
  color: var(--white); cursor: pointer; text-align: left; gap: 12px;
}
.faq-q:hover { color: var(--red); }
.faq-chevron {
  font-size: 20px; color: var(--sub); flex-shrink: 0;
  transition: transform .2s; display: inline-block;
}
.faq-item.open .faq-chevron { transform: rotate(90deg); color: var(--red); }
.faq-a {
  display: none;
  padding: 0 24px 16px;
  font-family: var(--ft), var(--fb); font-size: 13px;
  color: var(--sub); line-height: 1.7;
}
.faq-item.open .faq-a { display: block; }

/* ─────────────────────────────────────────
   TIMELINE ADJUST MODE
───────────────────────────────────────── */

/* Edit mode container */
.tl-edit-mode {
  --tl-adj-border: rgba(232, 0, 26, 0.2);
}

/* Grip handle — hidden by default, shown only in edit mode */
.tl-grip {
  display: none;
  flex-shrink: 0;
  width: 18px;
  align-self: stretch;
  align-items: center;
  justify-content: center;
  cursor: grab;
  color: var(--dim);
  font-size: 13px;
  opacity: 0.4;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  transition: opacity .12s, color .12s;
}
.tl-edit-mode .tl-grip { display: flex; }
.tl-grip:hover { opacity: 0.8; color: var(--white); }
.tl-grip.grabbing { cursor: grabbing; opacity: 1; color: var(--red); }

/* Adjustable event in edit mode */
.tl-edit-mode .tl-adjustable {
  position: relative;
  border-left: 2px solid transparent;
  padding-left: 4px;
  margin-left: -6px;
  transition: border-color .12s, background .12s;
  cursor: grab;
  border-radius: 0 4px 4px 0;
}
.tl-edit-mode .tl-adjustable:hover {
  border-left-color: var(--red);
  background: rgba(232,0,26,0.06);
}
.tl-edit-mode .tl-adjustable:hover .tl-grip {
  opacity: 1;
  color: var(--white);
}

/* Active drag state — subtle lift, no box */
.tl-adjustable.tl-dragging {
  cursor: grabbing;
  background: rgba(255,255,255,0.07) !important;
  border-radius: 4px;
  z-index: 10;
  position: relative;
  box-shadow: 0 4px 20px rgba(0,0,0,0.4) !important;
  touch-action: none;
  user-select: none;
}

/* ── Merged event slot (inline A + B + C layout) ── */
.tl-slot-multi {
  align-items: flex-start;
}

/* Stacked colour dots column for merged slots */
.tl-slot-dots {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 5px;
  flex-shrink: 0;
}

/* Inline product label row */
.tl-inline-prods {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
  margin-top: 1px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.5;
}

/* "+" separator between product names */
.tl-inline-sep {
  color: rgba(255,255,255,0.25);
  margin: 0 3px;
  font-weight: 400;
}

/* Individual draggable product span */
.tl-inline-prod {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  border-radius: 4px;
  padding: 2px 4px;
  transition: background .1s;
}
.tl-edit-mode .tl-inline-prod {
  touch-action: none;   /* prevent scroll hijack on mobile */
  cursor: grab;
}
.tl-edit-mode .tl-inline-prod:hover {
  background: rgba(255,255,255,0.06);
}
.tl-inline-prod.grabbing {
  cursor: grabbing;
}

/* Product name inside inline span */
.tl-inline-name {
  letter-spacing: 0.01em;
  color: var(--white, #c8c8c8);
  font-weight: 700;
}

/* ⠿ mini-grip per product — hidden until edit mode */
.tl-prod-grip {
  display: none;
  font-size: 11px;
  color: rgba(255,255,255,0.25);
  cursor: grab;
  padding: 2px 3px;
  line-height: 1;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}
.tl-edit-mode .tl-prod-grip          { display: inline-block; }
.tl-prod-grip:hover                   { color: rgba(255,255,255,0.7); }
.tl-prod-grip.grabbing                { cursor: grabbing; color: var(--red); }

/* ── Merge target highlight (green glow ring) ── */
.tl-merge-target {
  outline: 2px solid #00dd88;
  outline-offset: 3px;
  background: rgba(0, 221, 136, 0.07) !important;
  border-radius: 6px;
  position: relative;
  transition: outline .08s, background .08s;
}

/* "▼ วางเพื่อรวม" tooltip on highlighted target */
.tl-merge-hint {
  position: absolute;
  top: -22px;
  left: 50%;
  transform: translateX(-50%);
  background: #00dd88;
  color: #000;
  font-size: 10px;
  font-weight: 700;
  font-family: var(--fm);
  letter-spacing: 0.04em;
  padding: 2px 9px;
  border-radius: 4px;
  white-space: nowrap;
  pointer-events: none;
  z-index: 20;
  box-shadow: 0 2px 8px rgba(0,0,0,0.4);
}

/* Time feedback label shown while dragging */
.tl-adjust-fb {
  position: absolute;
  right: 0;
  top: -18px;
  font-family: var(--fm);
  font-size: 9px;
  letter-spacing: .08em;
  color: var(--red);
  background: var(--bg);
  padding: 1px 5px;
  border: 1px solid rgba(232,0,26,0.3);
  border-radius: 3px;
  white-space: nowrap;
  pointer-events: none;
  z-index: 20;
}

/* ── Drag ghost (floating preview following the cursor) ── */
.tl-drag-ghost {
  position: fixed;
  pointer-events: none;
  z-index: 9999;
  background: rgba(20, 20, 24, 0.96);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 6px;
  padding: 6px 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.55), 0 2px 6px rgba(0,0,0,0.4);
  font-family: var(--fm);
  transform: rotate(-1.5deg) scale(1.02);
  transform-origin: top left;
  opacity: 0.95;
  transition: border-color .1s, box-shadow .1s;
}
.tl-drag-ghost.tl-dg-over {
  border-color: #00dd88;
  box-shadow: 0 0 0 2px rgba(0,221,136,0.35), 0 8px 24px rgba(0,0,0,0.55);
}
.tl-drag-ghost .tl-dg-row {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  white-space: nowrap;
}
.tl-drag-ghost .tl-dg-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.6);
  margin-right: 2px;
}
.tl-drag-ghost .tl-dg-sep {
  color: rgba(255,255,255,0.5);
  font-weight: 400;
  margin: 0 2px;
}
.tl-drag-ghost .tl-dg-time {
  margin-top: 3px;
  font-size: 9px;
  letter-spacing: 0.08em;
  color: var(--red);
}
.tl-drag-ghost.tl-dg-over .tl-dg-time { color: #00dd88; }

/* ── Insertion line (standalone drop indicator between events) ── */
.tl-insert-line {
  position: absolute;
  left: 8px;
  right: 8px;
  top: 0;
  height: 2px;
  display: flex;
  align-items: center;
  gap: 0;
  pointer-events: none;
  z-index: 15;
  transform: translateY(-50%);
  animation: tl-insert-pulse 1.2s ease-in-out infinite;
}
.tl-insert-line .tl-insert-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--red);
  box-shadow: 0 0 6px rgba(232,0,26,0.8);
  flex: 0 0 auto;
}
.tl-insert-line .tl-insert-bar {
  flex: 1;
  height: 2px;
  background: linear-gradient(90deg, var(--red), rgba(232,0,26,0.5), var(--red));
  box-shadow: 0 0 8px rgba(232,0,26,0.6);
}
@keyframes tl-insert-pulse {
  0%, 100% { opacity: 0.95; }
  50%      { opacity: 0.55; }
}

/* (duplicate rule removed — handled in tl-action-bar section above) */