/* ── runyo Design System — Mint Stride ────────────────────────────────────── */
:root {
  /* ── Light palette (default) ── */
  --bg:          #F1EEE6;
  --bg-alt:      #EBE7DC;
  --surface:     #FFFFFF;
  --surface2:    #F7F4EC;
  --border:      #DEDACA;
  --border2:     #E8E4D9;
  --text:        #0E1F1A;
  --text2:       #2D3F39;
  --muted:       #5E6F69;
  --faint:       #86968F;
  --accent:      #00B98E;
  --accent-dim:  #009977;
  --accent-glow: rgba(0,185,142,0.10);
  --accent-ink:  #062019;

  /* ── Category colors ── */
  --cat-run:      #00B98E;
  --cat-strength: #D2632B;
  --cat-mobility: #B5912B;
  --cat-rest:     #86968F;
  --cat-race:     #C8336B;
  --cat-recovery: #7A8A85;
  --cat-work:     #7A8A85;
  --cat-swim:     #1565C0;
  --cat-bike:     #FF6F00;
  --cat-gym:      #5D4037;
  --swim-text:    #1565C0;
  --swim-bg:      rgba(21,101,192,0.08);
  --bike-text:    #FF6F00;
  --bike-bg:      rgba(255,111,0,0.08);
  --gym-text:     #5D4037;
  --gym-bg:       rgba(93,64,55,0.08);

  /* ── Backward-compat aliases (used by app.js inline styles) ── */
  --run-text:     #00B98E;
  --run-bg:       rgba(0,185,142,0.08);
  --str-text:     #D2632B;
  --str-bg:       rgba(210,99,43,0.08);
  --mob-text:     #B5912B;
  --mob-bg:       rgba(181,145,43,0.08);
  --race-text:    #C8336B;
  --race-bg:      rgba(200,51,107,0.08);
  --herstel-text: #7A8A85;
  --herstel-bg:   rgba(122,138,133,0.08);
  --rest-text:    #86968F;
  --work-text:    #7A8A85;

  /* ── Typography ── */
  --font-d: 'Sora', system-ui, sans-serif;
  --font-m: 'JetBrains Mono', monospace;

  /* ── Radius ── */
  --r:     8px;
  --r2:    10px;
  --r-lg:  12px;
  --r-pill:999px;

  /* ── Safe areas ── */
  --st: env(safe-area-inset-top,0px);
  --sb: env(safe-area-inset-bottom,0px);

  /* ── Desktop ── */
  --sidebar-w: 220px;
}

/* ── Dark mode ────────────────────────────────────────────────────────────── */
[data-theme="dark"] {
  --bg:          #0B1714;
  --bg-alt:      #0E1B18;
  --surface:     #152521;
  --surface2:    #1B2D28;
  --border:      #1F302B;
  --border2:     #243B35;
  --text:        #EAEFEC;
  --text2:       #B7C4BD;
  --muted:       #86968F;
  --faint:       #3A4A45;
  --accent:      #3DDFB1;
  --accent-dim:  #2BC99C;
  --accent-glow: rgba(61,223,177,0.10);
  --accent-ink:  #062019;

  --cat-run:      #3DDFB1;
  --cat-strength: #E07A4A;
  --cat-mobility: #D4A84A;
  --cat-rest:     #5E6F69;
  --cat-race:     #E54B6A;
  --cat-recovery: #86968F;
  --cat-work:     #86968F;
  --cat-swim:     #4D9FE0;
  --cat-bike:     #FFB74D;
  --cat-gym:      #A1887F;
  --swim-text:    #4D9FE0;
  --swim-bg:      rgba(77,159,224,0.08);
  --bike-text:    #FFB74D;
  --bike-bg:      rgba(255,183,77,0.08);
  --gym-text:     #A1887F;
  --gym-bg:       rgba(161,136,127,0.08);

  --run-text:     #3DDFB1;
  --run-bg:       rgba(61,223,177,0.08);
  --str-text:     #E07A4A;
  --str-bg:       rgba(224,122,74,0.08);
  --mob-text:     #D4A84A;
  --mob-bg:       rgba(212,168,74,0.08);
  --race-text:    #E54B6A;
  --race-bg:      rgba(229,75,106,0.08);
  --herstel-text: #86968F;
  --herstel-bg:   rgba(134,150,143,0.08);
  --rest-text:    #5E6F69;
  --work-text:    #86968F;
}

/* ── Base ─────────────────────────────────────────────────────────────────── */
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{
  background:var(--bg);color:var(--text);
  font-family:var(--font-d);font-size:14px;
  line-height:1.5;height:100%;overscroll-behavior:none;overflow-x:hidden;
}
button{cursor:pointer}
a{color:inherit;text-decoration:none}

/* ── Loading ──────────────────────────────────────────────────────────────── */
.loading-overlay{
  position:fixed;inset:0;z-index:9000;
  background:rgba(241,238,230,0.40);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:18px;transition:opacity 0.35s;
}
[data-theme="dark"] .loading-overlay{
  background:rgba(11,23,20,0.40);
}
.loading-overlay.hidden{opacity:0;pointer-events:none}
.loading-logo{
  font-family:var(--font-d);font-weight:700;font-size:64px;
  letter-spacing:-0.035em;color:var(--text);line-height:1;
  opacity:0;animation:loadLogoIn 0.4s ease-out 0.05s forwards;
}
.loading-bar{width:180px;height:4px;background:var(--border);border-radius:999px;overflow:hidden}
.loading-bar-fill{
  height:100%;background:var(--accent);border-radius:999px;
  transform:scaleX(0);transform-origin:left center;
  animation:loadBarFill 1.5s ease-out infinite;
}
@keyframes loadLogoIn{from{opacity:0}to{opacity:1}}
@keyframes loadBarFill{
  0%  {transform:scaleX(0);}
  65% {transform:scaleX(0.88);}
  82% {transform:scaleX(0.9);}
  83% {transform:scaleX(0);}
  100%{transform:scaleX(0);}
}

/* ── Toast ────────────────────────────────────────────────────────────────── */
.toast{
  position:fixed;bottom:calc(var(--sb) + 72px);left:50%;
  transform:translateX(-50%) translateY(16px);
  background:var(--text);color:var(--bg);
  font-family:var(--font-m);font-size:11px;font-weight:600;letter-spacing:0.5px;
  padding:9px 18px;border-radius:var(--r-pill);
  opacity:0;transition:opacity 0.2s,transform 0.2s;
  pointer-events:all;z-index:4000;white-space:nowrap;
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ── App shell ────────────────────────────────────────────────────────────── */
.app{display:flex;flex-direction:column;height:100dvh;max-width:480px;margin:0 auto}

/* ── Topbar ───────────────────────────────────────────────────────────────── */
.topbar{
  display:flex;align-items:center;justify-content:space-between;
  padding:calc(var(--st) + 14px) 20px 12px;
  background:var(--bg);flex-shrink:0;z-index:10;gap:12px;
  border-bottom:1px solid var(--border);
}
.topbar-logo{
  font-family:var(--font-d);font-weight:700;font-size:20px;
  letter-spacing:-0.035em;line-height:1;color:var(--text);
}
.topbar-logo .logo-x{color:var(--accent)}
.topbar-sub{font-family:var(--font-m);font-size:9px;color:var(--muted);letter-spacing:1px;margin-top:2px}
.topbar-gear{background:none;border:none;color:var(--muted);padding:4px;transition:color 0.15s;line-height:1}
.topbar-gear:hover{color:var(--text)}
.topbar-gear svg{display:block}

/* ── Race chip header ─────────────────────────────────────────────────────── */
.races-bar{
  padding:8px 16px 0;background:var(--bg);flex-shrink:0;
}
.race-chip{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-lg);overflow:hidden;margin-bottom:12px;
  cursor:pointer;transition:border-color 0.15s;
}
.race-chip:hover{border-color:var(--cat-race)}
.race-chip{display:flex;align-items:stretch}
.race-chip-main{
  padding:12px 14px;display:flex;align-items:center;gap:10px;flex:1;min-width:0;cursor:pointer;
}
.race-chip-main:hover .race-chip-name{color:var(--accent)}
.race-dot{
  width:8px;height:8px;border-radius:50%;
  background:var(--cat-race);flex-shrink:0;
  box-shadow:0 0 0 3px rgba(200,51,107,0.15);
}
.race-chip-body{flex:1;min-width:0}
.race-chip-name{
  font-family:var(--font-d);font-weight:600;font-size:13px;
  color:var(--text);letter-spacing:-0.01em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.race-chip-meta{
  font-family:var(--font-d);font-size:12px;color:var(--muted);
  margin-top:1px;letter-spacing:-0.005em;
}
.race-chip-countdown{
  font-family:var(--font-d);font-weight:800;font-size:22px;
  color:var(--cat-race);letter-spacing:-0.03em;line-height:1;flex-shrink:0;
}
.race-chip-countdown span{
  font-family:var(--font-m);font-size:9px;color:var(--cat-race);
  font-weight:400;margin-left:2px;
}
.race-chip-chevron{
  font-family:var(--font-d);font-size:16px;color:var(--muted);
  margin-left:4px;transition:transform 0.2s;flex-shrink:0;
}
.race-chip.open .race-chip-chevron{transform:rotate(90deg)}
.race-chip-timeline{
  border-top:1px solid var(--border);
  padding:8px 14px 12px;
}
.race-chip-timeline-label{
  font-family:var(--font-d);font-weight:600;font-size:12px;
  color:var(--muted);letter-spacing:-0.005em;
  margin:8px 0 10px;
}
.race-chip-timeline-items{position:relative;padding-left:14px}
.race-chip-timeline-line{
  position:absolute;left:3px;top:4px;bottom:4px;
  width:1px;background:var(--border);
}
.race-chip-timeline-item{
  position:relative;padding:5px 0;
  display:flex;align-items:center;gap:10px;
}
.race-chip-timeline-dot{
  position:absolute;left:-14px;top:12px;
  width:6px;height:6px;border-radius:50%;
  border:2px solid var(--surface);
}
.race-chip-timeline-item-body{flex:1;min-width:0}
.race-chip-timeline-item-name{
  font-family:var(--font-d);font-weight:500;font-size:13px;
  color:var(--text2);letter-spacing:-0.01em;
}
.race-chip-timeline-item-meta{
  font-family:var(--font-d);font-size:11px;color:var(--muted);margin-top:1px;
}
.race-chip-timeline-item-days{
  font-family:var(--font-d);font-weight:600;font-size:13px;color:var(--muted);
}
.race-chip-add{
  margin-top:8px;padding:8px;text-align:center;
  font-family:var(--font-d);font-size:13px;font-weight:600;
  color:var(--accent);letter-spacing:-0.005em;
  border:1px solid var(--border);border-radius:var(--r);
  transition:border-color 0.12s,background 0.12s;
}
.race-chip-add:hover{border-color:var(--accent);background:var(--accent-glow)}
.race-chip-empty{
  padding:10px 14px 12px;
  display:flex;align-items:center;gap:10px;
}
.race-chip-empty-label{
  font-family:var(--font-d);font-size:13px;color:var(--muted);
  letter-spacing:-0.005em;flex:1;
}
.race-chip-empty-add{
  font-family:var(--font-d);font-size:13px;font-weight:600;
  color:var(--accent);letter-spacing:-0.005em;
}

/* ── Update banner ────────────────────────────────────────────────────────── */
.update-banner{
  background:var(--accent);color:var(--accent-ink);
  font-family:var(--font-m);font-size:11px;font-weight:600;
  padding:10px 16px;display:flex;align-items:center;
  justify-content:space-between;flex-shrink:0;cursor:pointer;letter-spacing:0.5px;
}
.update-banner button{
  background:none;border:1px solid rgba(6,32,25,0.3);border-radius:4px;
  padding:4px 10px;font-family:var(--font-m);font-size:10px;
  font-weight:700;color:var(--accent-ink);letter-spacing:0.5px;
}

/* ── Scroll + views ───────────────────────────────────────────────────────── */
.scroll-area{
  flex:1;overflow-y:auto;overscroll-behavior:contain;
  padding-bottom:calc(var(--sb) + 100px);-webkit-overflow-scrolling:touch;
}
.view{display:none;padding:16px;animation:fadeIn 0.18s ease;position:relative}
.view.active{display:block}
@keyframes fadeIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}

/* ── Page title ───────────────────────────────────────────────────────────── */
.page-title{padding:14px 20px 4px;display:flex;align-items:flex-end;justify-content:space-between}
.pt-kicker{font-family:var(--font-m);font-size:11px;color:var(--muted);letter-spacing:1px;font-weight:500}
.pt-h{font-family:var(--font-d);font-weight:800;font-size:30px;letter-spacing:-0.04em;line-height:1;margin-top:4px}

/* ── Weather Widget ──────────────────────────────────────────────────────── */
.weather-widget{display:flex;align-items:center;gap:6px;padding:6px 20px 0;font-family:var(--font-m);font-size:13px;color:var(--muted)}
.weather-widget span{color:var(--text)}
.weather-city{color:var(--muted)!important;margin-left:2px}

/* ── Avatar dropdown ─────────────────────────────────────────────────────── */
.av-header{padding:12px 16px 10px;border-bottom:1px solid var(--border);}
.av-email{font-family:var(--font-d);font-size:13px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.av-item{width:100%;background:none;border:none;padding:11px 16px;text-align:left;font-family:var(--font-d);font-size:14px;font-weight:500;color:var(--text);cursor:pointer;display:flex;align-items:center;gap:10px;letter-spacing:-0.01em;-webkit-tap-highlight-color:transparent;transition:background 0.1s;}
.av-item:hover{background:var(--surface2);}
.av-item svg{flex-shrink:0;color:var(--muted);}
.av-item-danger{color:var(--cat-race);}
.av-item-danger svg{color:var(--cat-race);}
.av-divider{height:1px;background:var(--border);margin:2px 0;}

/* ── Today v2 — day strip ─────────────────────────────────────────────────── */
.today-day-strip{display:flex;align-items:center;gap:4px;padding:0 16px;}
.tds-nav{width:26px;height:56px;flex-shrink:0;background:none;border:none;cursor:pointer;font-family:var(--font-d);font-size:18px;color:var(--muted);display:flex;align-items:center;justify-content:center;-webkit-tap-highlight-color:transparent;}
.tds-days{flex:1;display:flex;gap:4px;}
.today-day-block{flex:1;padding:8px 0;text-align:center;background:var(--surface);border:1px solid var(--border);border-radius:8px;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background 0.12s,border-color 0.12s;}
.today-day-block.active{background:var(--accent);border-color:var(--accent);}
.tdb-day{font-family:var(--font-m);font-size:10px;color:var(--muted);}
.today-day-block.active .tdb-day{color:var(--accent-ink);opacity:0.7;}
.tdb-num{font-family:var(--font-d);font-weight:700;font-size:15px;color:var(--text);letter-spacing:-0.02em;margin-top:2px;}
.today-day-block.active .tdb-num{color:var(--accent-ink);}
.tdb-dot{width:4px;height:4px;border-radius:999px;margin:4px auto 0;}
.tdb-weather{font-size:12px;line-height:1;margin-top:3px;text-align:center;}
.today-day-block.has-weather{padding-bottom:6px;}

/* ── Today kicker row ─────────────────────────────────────────────────────── */
.today-kicker{display:flex;align-items:center;justify-content:space-between;padding:14px 20px 0;}
.today-kicker>span{font-family:var(--font-d);font-weight:800;font-size:22px;color:var(--text);letter-spacing:-0.03em;line-height:1;}
.today-kicker-fase{font-weight:400;font-size:18px;color:var(--muted);}
.today-add-btn{width:28px;height:28px;border-radius:8px;background:var(--surface);border:1px solid var(--border);color:var(--text2);cursor:pointer;font-family:var(--font-d);font-size:18px;font-weight:300;line-height:1;display:flex;align-items:center;justify-content:center;flex-shrink:0;-webkit-tap-highlight-color:transparent;}

/* ── Today hero card (v2) ─────────────────────────────────────────────────── */
.today-hero-card{background:var(--surface);border:1px solid var(--border);padding:18px 18px 16px;border-radius:12px;margin-bottom:8px;cursor:pointer;}
.cat-tag{display:flex;align-items:center;gap:6px;}
.cat-dot{width:8px;height:8px;border-radius:999px;flex-shrink:0;}
.cat-label{font-family:var(--font-d);font-size:14px;font-weight:600;color:var(--text2);letter-spacing:-0.01em;}
.today-hero-km{font-family:var(--font-d);font-weight:800;font-size:52px;line-height:1;color:var(--text);letter-spacing:-0.04em;margin-top:8px;}
.today-hero-km-unit{font-size:26px;font-weight:700;letter-spacing:-0.02em;}
.today-hero-stats{display:flex;gap:22px;margin-top:14px;}
.ths-label{font-family:var(--font-d);font-size:12px;color:var(--muted);letter-spacing:-0.005em;}
.ths-val{font-family:var(--font-d);font-weight:700;font-size:18px;color:var(--text);letter-spacing:-0.02em;margin-top:2px;}
.today-hero-detail{font-family:var(--font-m);font-size:12px;color:var(--muted);margin-top:12px;line-height:1.5;padding-top:12px;border-top:1px solid var(--border);}
.today-hero-cta{width:100%;margin-top:14px;padding:13px 16px;background:var(--accent);color:var(--accent-ink);border:none;border-radius:8px;cursor:pointer;font-family:var(--font-d);font-weight:700;font-size:15px;letter-spacing:-0.01em;display:flex;justify-content:space-between;align-items:center;-webkit-tap-highlight-color:transparent;}
.today-hero-cta.secondary{background:var(--surface);border:1px solid var(--border);color:var(--muted);}

/* ── Tomorrow card (v2) ───────────────────────────────────────────────────── */
.today-tmr-card{display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--border);padding:14px;border-radius:10px;margin-bottom:8px;}
.today-tmr-bar{width:4px;height:32px;border-radius:2px;flex-shrink:0;}
.today-tmr-label{font-family:var(--font-d);font-size:12px;color:var(--muted);}
.today-tmr-title{font-family:var(--font-d);font-weight:600;font-size:14px;color:var(--text);letter-spacing:-0.01em;margin-top:2px;}
.today-tmr-chevron{font-family:var(--font-d);font-size:16px;color:var(--muted);flex-shrink:0;}

/* ── Cards ────────────────────────────────────────────────────────────────── */
.card{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-lg);margin-bottom:10px;
}
.card.race-border{border-color:rgba(200,51,107,0.35)}
.badge{
  font-family:var(--font-d);font-size:11px;font-weight:600;
  letter-spacing:-0.005em;padding:2px 8px;border-radius:999px;display:inline-block;
}
.no-data{text-align:center;padding:32px;color:var(--faint);font-family:var(--font-m);font-size:11px;letter-spacing:0.5px}

/* ── Training tab (v2) ────────────────────────────────────────────────────── */
.plan-schema-header{padding:16px 20px 0;}
.psh-kicker{font-family:var(--font-d);font-size:13px;font-weight:600;color:var(--muted);letter-spacing:-0.01em;}
.psh-title{font-family:var(--font-d);font-weight:800;font-size:28px;letter-spacing:-0.04em;color:var(--text);line-height:1;margin-top:4px;}
.psh-sub{font-family:var(--font-d);font-size:13px;color:var(--muted);margin-top:4px;letter-spacing:-0.01em;}
.psh-bar{height:6px;background:var(--border);border-radius:3px;margin-top:12px;overflow:hidden;}
.psh-dates{display:flex;justify-content:space-between;margin-top:6px;font-family:var(--font-d);font-size:12px;color:var(--muted);}
#phaseTabs:has(.plan-fase-row){display:block;overflow-x:visible;}
.plan-fase-row{display:flex;align-items:center;gap:12px;padding:12px 14px;background:var(--surface);border:1px solid var(--border);border-radius:10px;margin-bottom:6px;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:border-color 0.12s;}
.plan-fase-row.is-current{background:var(--accent);border-color:var(--accent);}
.plan-fase-row.is-active:not(.is-current){border-color:var(--text);}
.pfr-num{font-family:var(--font-m);font-size:11px;color:var(--muted);min-width:22px;}
.plan-fase-row.is-current .pfr-num{color:var(--accent-ink);opacity:0.75;}
.pfr-name{font-family:var(--font-d);font-weight:600;font-size:14px;color:var(--text);letter-spacing:-0.01em;}
.plan-fase-row.is-current .pfr-name{color:var(--accent-ink);}
.plan-fase-row.is-done .pfr-name{text-decoration:line-through;opacity:0.55;}
.pfr-weeks{font-family:var(--font-d);font-size:12px;color:var(--muted);}
.plan-fase-row.is-current .pfr-weeks{color:var(--accent-ink);opacity:0.75;}
.pfr-status{font-family:var(--font-d);font-size:13px;font-weight:700;color:var(--muted);min-width:14px;text-align:right;}
.plan-fase-row.is-current .pfr-status{color:var(--accent-ink);}
.pfr-chevron{font-family:var(--font-d);color:var(--muted);margin-left:4px;}
.pfr-chevron.open{transform:rotate(90deg);}
.plan-fase-block{margin-bottom:6px;}
.plan-fase-rows{border-left:2px solid var(--border);margin-left:8px;padding-left:8px;}

/* ── Week tab (v2) ────────────────────────────────────────────────────────── */
.week-header{padding:16px 20px 0;display:flex;justify-content:space-between;align-items:center;}
.week-nav-btn{width:30px;height:30px;background:var(--surface);border:1px solid var(--border);border-radius:8px;cursor:pointer;font-family:var(--font-d);font-size:16px;color:var(--text);display:flex;align-items:center;justify-content:center;-webkit-tap-highlight-color:transparent;}
.week-header-num{font-family:var(--font-d);font-weight:800;font-size:22px;color:var(--text);letter-spacing:-0.03em;line-height:1;}
.week-header-dates{font-family:var(--font-d);font-size:12px;color:var(--muted);margin-top:2px;}
.week-now-btn{background:none;border:none;color:var(--accent);cursor:pointer;font-family:var(--font-d);font-size:12px;padding:0;font-weight:600;}
.week-km-total{font-family:var(--font-d);font-weight:800;font-size:22px;color:var(--text);letter-spacing:-0.03em;line-height:1;}
.week-km-slash{font-size:13px;font-weight:500;color:var(--muted);}
.week-km-pct{font-family:var(--font-d);font-size:12px;font-weight:600;color:var(--accent);margin-top:2px;}
.week-progress-bar{height:4px;background:var(--border);margin:12px 20px 0;border-radius:2px;overflow:hidden;}
.week-day-row{display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--border);padding:13px 14px;border-radius:10px;margin-bottom:6px;cursor:pointer;}
.week-day-row.today{border-color:var(--accent);}
.week-day-row.past{opacity:0.45;}
.wdr-bar{width:4px;height:34px;border-radius:2px;flex-shrink:0;}
.wdr-label{font-family:var(--font-d);font-size:13px;color:var(--muted);letter-spacing:-0.005em;}
.wdr-title{font-family:var(--font-d);font-weight:600;font-size:16px;color:var(--text);letter-spacing:-0.01em;margin-top:2px;}
.wdr-km{font-family:var(--font-d);font-weight:700;font-size:15px;color:var(--text2);letter-spacing:-0.02em;flex-shrink:0;}
.wdr-handle{color:var(--border);font-size:16px;margin-left:6px;flex-shrink:0;cursor:grab;user-select:none;}
.week-day-row:hover .wdr-handle{color:var(--muted);}
.today-day-block.wdr-drop-target{background:var(--accent-glow);border-color:var(--accent);transform:scale(1.08);transition:transform 0.1s;}
.today-day-block.wdr-droppable{border-color:var(--accent);opacity:0.8;}
.wdr-ghost{background:var(--surface);border:1px solid var(--border);}

/* ── Buttons ──────────────────────────────────────────────────────────────── */
.btn-primary{
  width:100%;background:var(--accent);color:var(--accent-ink);border:none;
  border-radius:var(--r);padding:14px;
  font-family:var(--font-d);font-size:14px;letter-spacing:-0.01em;
  font-weight:700;transition:background 0.12s,transform 0.1s;
  display:flex;align-items:center;justify-content:space-between;
}
.btn-primary:hover{background:var(--accent-dim)}
.btn-primary:active{transform:scale(0.98)}
.btn-primary:disabled{opacity:0.5;cursor:not-allowed}
.btn-secondary{
  width:100%;margin-top:8px;background:none;
  border:1px solid var(--border);border-radius:var(--r);
  padding:10px;color:var(--muted);
  font-family:var(--font-m);font-size:11px;letter-spacing:0.5px;
  transition:border-color 0.12s,color 0.12s;
}
.btn-secondary:hover{border-color:var(--muted);color:var(--text)}
.btn-save{
  background:var(--accent);color:var(--accent-ink);border:none;
  border-radius:var(--r);padding:10px 18px;
  font-family:var(--font-d);font-size:14px;font-weight:700;letter-spacing:-0.01em;
  transition:background 0.12s;cursor:pointer;display:inline-flex;align-items:center;gap:6px;
  -webkit-tap-highlight-color:transparent;
}
.btn-save:hover{background:var(--accent-dim)}
.btn-cta{
  display:block;width:100%;margin-top:12px;
  background:none;border:1px solid var(--border);
  border-radius:var(--r);padding:10px;
  color:var(--accent);font-family:var(--font-m);font-size:11px;
  letter-spacing:0.5px;font-weight:600;
  transition:border-color 0.12s,background 0.12s;
}
.btn-cta:hover{border-color:var(--accent);background:var(--accent-glow)}

/* ── Today ────────────────────────────────────────────────────────────────── */
.run-metric-row{display:flex;gap:22px;margin-top:14px}
.run-metric-label{font-family:var(--font-d);font-size:12px;color:var(--muted);letter-spacing:-0.005em}
.run-metric-val{font-family:var(--font-d);font-weight:700;font-size:19px;margin-top:2px;letter-spacing:-0.02em}
.run-metric-unit{color:var(--muted);font-size:13px}
.rest-card-inner{padding:20px;display:flex;gap:16px;align-items:center}
.rest-emoji{font-size:32px;flex-shrink:0}
.rest-title{font-family:var(--font-d);font-size:22px;letter-spacing:-0.02em;margin-bottom:4px;font-weight:700}
.rest-sub{font-size:13px;color:var(--muted);line-height:1.5}
.mob-reminder{
  background:rgba(181,145,43,0.06);border:1px solid rgba(181,145,43,0.2);
  border-radius:var(--r);padding:12px 14px;margin-top:4px;
}
.mob-title{font-family:var(--font-m);font-size:10px;letter-spacing:1px;color:var(--cat-mobility);text-transform:uppercase;margin-bottom:4px}
.mob-text{font-size:12px;color:var(--muted)}
.no-connection-hint{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r);padding:14px 16px;
  display:flex;align-items:center;gap:12px;cursor:pointer;margin-bottom:10px;
}
.nch-icon{font-size:20px;flex-shrink:0;opacity:0.4}
.nch-text{font-size:13px;color:var(--muted);line-height:1.45}
.nch-link{font-family:var(--font-m);font-size:10px;color:var(--accent);letter-spacing:0.5px;margin-top:3px}

/* ── Feedback ─────────────────────────────────────────────────────────────── */
.feedback-section{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-lg);padding:16px;margin-bottom:10px;
}
.feedback-title{font-family:var(--font-d);font-size:14px;font-weight:600;letter-spacing:-0.01em;color:var(--text);margin-bottom:12px}
.feedback-stars{display:flex;gap:8px;margin-bottom:12px}
.star-btn{
  width:44px;height:44px;border:1px solid var(--border);
  background:var(--bg);border-radius:var(--r);font-size:20px;
  display:flex;align-items:center;justify-content:center;
  transition:transform 0.12s,background 0.12s,border-color 0.12s;
}
.star-btn.active{background:rgba(0,185,142,0.12);border-color:var(--accent);transform:scale(1.08)}
.star-btn:active{transform:scale(0.94)}
.feedback-textarea{
  width:100%;background:var(--bg);border:1px solid var(--border);
  border-radius:var(--r);color:var(--text);
  font-family:var(--font-m);font-size:12px;padding:10px 12px;
  resize:none;height:72px;margin-bottom:10px;outline:none;
  transition:border-color 0.15s;
}
.feedback-textarea:focus{border-color:var(--accent)}
.feedback-textarea::placeholder{color:var(--faint)}
.prev-feedback{
  background:rgba(0,185,142,0.05);border:1px solid rgba(0,185,142,0.2);
  border-radius:var(--r);padding:10px 14px;margin-bottom:10px;
}
.prev-feedback-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px}
.prev-feedback-label{font-family:var(--font-d);font-size:12px;font-weight:600;letter-spacing:-0.005em;color:var(--cat-run);}
.prev-feedback-text{font-family:var(--font-d);font-size:13px;color:var(--muted);line-height:1.5}
.edit-link{background:none;border:none;color:var(--accent);font-family:var(--font-d);font-size:13px;font-weight:600;letter-spacing:-0.005em;cursor:pointer;}

/* ── Week ─────────────────────────────────────────────────────────────────── */
.section-label{font-family:var(--font-m);font-size:10px;color:var(--faint);letter-spacing:1px;margin-bottom:8px}
.wt-selected{border-color:var(--accent) !important}

/* ── Training / Plan ──────────────────────────────────────────────────────── */
.plan-content-wrap{max-width:480px;margin:0 auto}
.plan-table{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden}
.plan-row{
  display:flex;align-items:center;gap:10px;padding:11px 14px;
  border-bottom:1px solid var(--border);cursor:pointer;
  transition:background 0.1s;position:relative;border-left:3px solid transparent;
}
.plan-row:hover{background:rgba(0,0,0,0.02)}
.plan-row:last-child{border-bottom:none}
.plan-row.is-today{background:var(--surface);border-left-color:var(--accent)}
.plan-row.is-past .plan-row-date,.plan-row.is-past .plan-row-title,.plan-row.is-past .plan-row-km{opacity:0.4}
.plan-row.is-work{background:rgba(122,138,133,0.04)}
.plan-row-date{font-family:var(--font-d);font-size:11px;color:var(--muted);flex-shrink:0;width:44px;line-height:1.4}
.plan-row-date strong{display:block;color:var(--text2);font-size:12px;font-weight:600;}
.plan-row.is-today .plan-row-date strong{color:var(--accent)}
.plan-row-emoji{font-size:16px;flex-shrink:0;width:20px;text-align:center}
.plan-row-body{flex:1;min-width:0}
.plan-row-title{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:-0.01em}
.plan-row-km{font-family:var(--font-d);font-size:14px;color:var(--accent);flex-shrink:0;font-weight:700;letter-spacing:-0.02em}
.plan-row-feedback{width:6px;height:6px;border-radius:50%;background:var(--cat-run);flex-shrink:0;opacity:0.7}
.plan-row-detail{display:none;padding:0 14px 12px;font-size:12px;color:var(--muted);line-height:1.5;border-top:1px solid rgba(0,0,0,0.04)}
.plan-row-detail.open{display:block}
.plan-feedback-text{font-family:var(--font-d);font-size:11px;font-weight:600;background:rgba(0,185,142,0.1);color:var(--cat-run);padding:3px 8px;border-radius:999px;margin-top:6px;display:inline-block}
.plan-edit-field{
  width:100%;background:var(--bg);border:1px solid var(--border);
  border-radius:var(--r);color:var(--text);
  font-family:var(--font-d);font-size:14px;padding:10px 12px;outline:none;margin-top:4px;
  letter-spacing:-0.01em;transition:border-color 0.15s;
}
.plan-edit-field:focus{border-color:var(--accent)}
.plan-swipe-wrapper{position:relative;overflow:hidden;touch-action:pan-y}
.plan-swipe-inner{transition:transform 0.28s cubic-bezier(0.4,0,0.2,1);will-change:transform}
.fase-badge{
  position:sticky;top:8px;float:right;z-index:10;
  background:var(--accent);color:var(--accent-ink);
  font-family:var(--font-d);font-size:11px;font-weight:700;
  letter-spacing:-0.01em;padding:4px 10px;
  pointer-events:none;margin-right:16px;margin-bottom:-28px;border-radius:999px;
}
.fase-float{
  position:sticky;top:0;z-index:5;padding:6px 14px;
  font-family:var(--font-m);font-size:10px;letter-spacing:1px;
  text-transform:uppercase;color:var(--accent);
  background:rgba(241,238,230,0.95);backdrop-filter:blur(8px);
  border-bottom:1px solid rgba(0,185,142,0.12);opacity:0.95;
}
[data-theme="dark"] .fase-float{background:rgba(11,23,20,0.95)}
.fase-next-nudge{
  display:flex;align-items:center;justify-content:center;gap:8px;
  padding:16px;color:var(--faint);font-family:var(--font-m);font-size:10px;
  letter-spacing:1px;border-top:1px solid var(--border);cursor:pointer;
  transition:color 0.15s;
}
.fase-next-nudge:hover{color:var(--accent)}
.fase-next-nudge:hover svg{transform:translateX(3px)}
.fase-next-nudge svg{transition:transform 0.15s}

/* ── Phase strip ──────────────────────────────────────────────────────────── */
.phase-strip{display:flex;gap:4px;padding:0 16px;margin-top:10px;overflow-x:auto;scrollbar-width:none}
.phase-strip::-webkit-scrollbar{display:none}
.phase-tile{
  flex:1;min-width:60px;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r);padding:8px 10px;cursor:pointer;text-align:center;
  transition:border-color 0.15s,background 0.15s;
}
.phase-tile.active{background:var(--accent-glow);border-color:var(--accent)}
.phase-tile-name{font-family:var(--font-d);font-weight:700;font-size:14px;color:var(--muted);line-height:1;letter-spacing:-0.01em}
.phase-tile.active .phase-tile-name{color:var(--accent)}
.phase-tile-sub{font-family:var(--font-m);font-size:9px;color:var(--faint);letter-spacing:0.5px;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.phase-tile.active .phase-tile-sub{color:var(--muted)}

/* ── Calendar ─────────────────────────────────────────────────────────────── */
.cal-header{padding:16px 20px 10px;display:flex;justify-content:space-between;align-items:center;}
.cal-month-title{font-family:var(--font-d);font-weight:800;font-size:24px;color:var(--text);letter-spacing:-0.03em;}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-bottom:4px;}
.cal-dow{font-family:var(--font-d);font-size:12px;color:var(--muted);text-align:center;padding:4px 0;font-weight:500;}
.cal-cell2{aspect-ratio:1/1.1;background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:5px;display:flex;flex-direction:column;justify-content:space-between;cursor:pointer;-webkit-tap-highlight-color:transparent;}
.cal-cell2.c2-today{background:var(--accent);border-color:var(--accent);}
.cal-cell2.c2-other{opacity:0.3;cursor:default;}
.cal-cell2.c2-sel{border-color:var(--text);}
.c2-num{font-family:var(--font-d);font-weight:600;font-size:12px;color:var(--text);letter-spacing:-0.01em;}
.cal-cell2.c2-today .c2-num{color:var(--accent-ink);}
.c2-dot{width:6px;height:6px;border-radius:999px;align-self:flex-end;}
.cal-legend{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:10px 0 12px;padding:12px 14px;background:var(--surface);border:1px solid var(--border);border-radius:10px;}
.cal-legend-item{display:flex;align-items:center;gap:5px;font-family:var(--font-d);font-size:12px;color:var(--text2);}
.cal-race-row{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r);padding:11px 14px;margin-bottom:6px;
  display:flex;align-items:center;gap:12px;cursor:pointer;
  transition:border-color 0.12s;
}
.cal-race-row:hover{border-color:rgba(200,51,107,0.3)}
.cal-dot-legend{display:flex;align-items:center;gap:14px;margin-bottom:12px;padding-bottom:8px;border-bottom:1px solid var(--border);font-family:var(--font-d);font-size:12px;color:var(--muted)}

/* ── Stats ────────────────────────────────────────────────────────────────── */
.stats-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:12px}
.stat-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:16px}
.stat-label{font-family:var(--font-m);font-size:10px;letter-spacing:1px;text-transform:uppercase;color:var(--faint);margin-bottom:6px}
.stat-val{font-family:var(--font-d);font-size:38px;line-height:1;color:var(--accent);font-weight:800;letter-spacing:-0.04em}
.stat-sub{font-size:12px;color:var(--muted);margin-top:2px}
.feedback-history{display:flex;flex-direction:column;gap:6px}
.fh-row{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:11px 14px;display:flex;gap:12px;align-items:flex-start}
.fh-date{font-family:var(--font-m);font-size:10px;color:var(--faint);flex-shrink:0;width:36px}
.fh-body{flex:1}
.fh-title{font-size:13px;font-weight:600;margin-bottom:2px;letter-spacing:-0.01em}
.fh-text{font-size:12px;color:var(--muted);line-height:1.45}
.fh-km{font-family:var(--font-d);font-size:14px;color:var(--accent);flex-shrink:0;font-weight:700;letter-spacing:-0.02em}

/* ── Stats overlay ────────────────────────────────────────────────────────── */
.stats-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.4);z-index:500;display:flex;flex-direction:column;justify-content:flex-end;animation:fadeIn 0.18s ease}
.stats-sheet{background:var(--bg);border-top:1px solid var(--border);padding:16px 18px calc(var(--sb) + 24px);max-height:82dvh;overflow-y:auto;animation:slideUp 0.28s cubic-bezier(0.34,1.12,0.64,1)}
.stats-grabber{width:40px;height:4px;background:var(--border);border-radius:2px;margin:0 auto 14px}
@keyframes slideUp{from{transform:translateY(100%)}to{transform:translateY(0)}}

/* ── Modal ────────────────────────────────────────────────────────────────── */
.modal-backdrop{
  position:fixed;inset:0;background:rgba(0,0,0,0.4);
  z-index:800;display:none;align-items:flex-end;justify-content:center;
  animation:fadeIn 0.18s ease;
}
.modal-backdrop.open{display:flex}
.modal-sheet{
  background:var(--surface);border:1px solid var(--border);
  border-radius:16px 16px 0 0;
  width:100%;max-width:480px;
  padding:20px 20px calc(var(--sb) + 24px);
  max-height:88dvh;overflow-y:auto;
  animation:slideUp 0.28s cubic-bezier(0.34,1.12,0.64,1);
}
.modal-handle{width:36px;height:4px;background:var(--border);border-radius:2px;margin:0 auto 18px}
.modal-close{
  position:absolute;top:14px;right:14px;
  background:var(--bg);border:1px solid var(--border);color:var(--muted);
  font-size:15px;line-height:1;border-radius:8px;
  width:32px;height:32px;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;-webkit-tap-highlight-color:transparent;
}
.modal-close:hover{color:var(--text);border-color:var(--muted);}
.modal-title{font-family:var(--font-d);font-weight:800;font-size:22px;letter-spacing:-0.04em;margin-bottom:18px;padding-right:40px;}

/* ── Settings ─────────────────────────────────────────────────────────────── */
.settings-group{margin-bottom:24px;padding:0 16px}
.settings-group-title{font-family:var(--font-d);font-size:13px;font-weight:600;color:var(--muted);letter-spacing:-0.01em;margin-bottom:10px;padding-left:2px}
.settings-section{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:16px;margin-bottom:8px}
.settings-title{font-family:var(--font-d);font-size:13px;font-weight:600;color:var(--accent);margin-bottom:10px;letter-spacing:-0.01em}
.settings-field{margin-bottom:14px}
.settings-field:last-child{margin-bottom:0}
.settings-label{font-family:var(--font-d);font-size:14px;color:var(--text2);margin-bottom:6px;display:block;font-weight:500;letter-spacing:-0.01em}
.settings-input{
  width:100%;background:var(--bg);border:1px solid var(--border);
  border-radius:var(--r);color:var(--text);
  font-family:var(--font-m);font-size:11px;padding:9px 12px;outline:none;
  transition:border-color 0.15s;
}
.settings-input:focus{border-color:var(--accent)}
.settings-hint{font-family:var(--font-d);font-size:12px;color:var(--muted);margin-top:6px;line-height:1.6}
.connection-status{display:flex;align-items:center;gap:6px;font-family:var(--font-m);font-size:10px;color:var(--muted);margin-top:10px}
.status-dot{width:6px;height:6px;border-radius:50%;background:var(--faint)}
.status-dot.ok{background:var(--cat-run)}
.status-dot.err{background:var(--cat-race)}
.pr-row{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.pr-dist-lbl{font-family:var(--font-m);font-size:10px;color:var(--muted);width:72px;flex-shrink:0}
.account-row{display:flex;align-items:center;gap:10px}
.account-avatar{width:36px;height:36px;border-radius:50%;background:var(--accent-glow);border:1px solid rgba(0,185,142,0.3);display:flex;align-items:center;justify-content:center;font-size:15px;flex-shrink:0;font-weight:700;font-family:var(--font-d);color:var(--accent)}
.account-info{flex:1;min-width:0}
.account-email{font-size:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;letter-spacing:-0.01em}
.account-status{font-family:var(--font-m);font-size:9px;color:var(--faint);margin-top:1px}
.account-logout{background:none;border:1px solid var(--border);border-radius:4px;padding:5px 10px;color:var(--muted);font-family:var(--font-m);font-size:9px;flex-shrink:0;transition:border-color 0.12s,color 0.12s}
.account-logout:hover{border-color:var(--cat-race);color:var(--cat-race)}
.telegram-status{display:flex;align-items:center;gap:6px;margin-top:8px;font-family:var(--font-m);font-size:10px;color:var(--muted)}
.tg-dot{width:6px;height:6px;border-radius:50%;background:var(--faint);flex-shrink:0}
.tg-dot.linked{background:var(--cat-run)}
.connect-btn{width:100%;padding:12px 16px;border-radius:var(--r);border:1px solid var(--border);background:var(--bg);color:var(--muted);font-family:var(--font-m);font-size:11px;letter-spacing:0.5px;cursor:pointer;text-align:left;display:flex;align-items:center;gap:10px;transition:border-color 0.15s,color 0.15s}
.connect-btn.connected{border-color:var(--cat-run);background:rgba(0,185,142,0.05);color:var(--text)}
.connect-btn.connected .cb-dot{background:var(--cat-run)}
.cb-dot{width:8px;height:8px;border-radius:50%;background:var(--faint);flex-shrink:0}
.cb-label{flex:1;min-width:0}
.cb-name{font-size:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;letter-spacing:-0.01em}
.cb-status{font-size:9px;color:var(--muted);letter-spacing:0.5px;margin-top:1px}
.disconnect-btn{background:none;border:1px solid var(--border);border-radius:var(--r);padding:7px 14px;color:var(--faint);font-family:var(--font-m);font-size:9px;letter-spacing:1px;margin-top:8px;transition:border-color 0.12s,color 0.12s}
.disconnect-btn:hover{border-color:var(--cat-race);color:var(--cat-race)}

/* ── Glass tab bar ────────────────────────────────────────────────────────── */
.bottom-nav{
  position:fixed;bottom:0;left:0;right:0;
  background:transparent;display:flex;align-items:center;justify-content:center;
  padding:0 12px calc(var(--sb) + 12px);z-index:100;pointer-events:none;
}
.sb-section-label{display:none}
.sb-logo{display:none}
.day-nav-btn{display:none;background:none;border:1px solid var(--border);color:var(--muted);cursor:pointer;padding:6px 10px;font-family:var(--font-d);font-size:18px;border-radius:var(--r);line-height:1;transition:color 0.1s,border-color 0.1s}
.day-nav-btn:hover{color:var(--text);border-color:var(--text)}
.bn-pill{
  background:rgba(14,31,26,0.88);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-radius:var(--r-pill);
  padding:5px;
  display:flex;align-items:center;gap:2px;
  pointer-events:all;
  box-shadow:0 6px 24px rgba(14,31,26,0.22);
  width:100%;max-width:400px;
}
[data-theme="dark"] .bn-pill{
  background:rgba(21,37,33,0.88);
}
.bn-item{
  flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;
  background:none;border:none;color:rgba(255,255,255,0.5);
  border-radius:var(--r-pill);padding:10px 6px 8px;
  font-family:var(--font-d);font-size:12px;letter-spacing:-0.01em;
  font-weight:500;transition:background 0.12s,color 0.12s,transform 0.08s;
  user-select:none;-webkit-tap-highlight-color:transparent;
}
.bn-item.active{
  background:var(--accent);color:var(--accent-ink);font-weight:700;
}
.bn-item:active{transform:scale(0.91)}
.bn-icon{display:flex;align-items:center;justify-content:center;line-height:1}
.bn-label{font-family:var(--font-d);font-size:11px;letter-spacing:-0.01em;font-weight:inherit;text-transform:lowercase}

/* ── Google login button ──────────────────────────────────────────────────── */
.btn-google{
  width:100%;background:#fff;color:#1F2120;
  border:1px solid var(--border);border-radius:var(--r-lg);
  padding:14px 18px;font-family:var(--font-d);font-weight:500;
  font-size:15px;letter-spacing:-0.01em;
  display:flex;align-items:center;justify-content:center;gap:12px;
  cursor:pointer;transition:background 0.12s;
}
.btn-google:hover{background:#f5f5f5}
[data-theme="dark"] .btn-google{background:var(--surface);color:var(--text);border-color:var(--border)}
[data-theme="dark"] .btn-google:hover{background:var(--surface2)}

/* ── Connect tiles (schema import options) ────────────────────────────────── */
.connect-tile{
  width:100%;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-lg);padding:16px 18px;
  display:flex;align-items:center;gap:14px;
  cursor:pointer;text-align:left;font-family:var(--font-d);
  transition:border-color 0.15s,background 0.15s;
}
.connect-tile:hover{border-color:var(--muted)}
.connect-tile.primary{background:var(--text);border-color:var(--text);color:#fff}
.connect-tile.primary:hover{border-color:var(--text2)}
[data-theme="dark"] .connect-tile.primary{background:var(--surface2);border-color:var(--border);color:var(--text)}
.connect-tile-icon{
  width:44px;height:44px;border-radius:var(--r);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.connect-tile.primary .connect-tile-icon{background:var(--accent);color:var(--accent-ink)}
.connect-tile:not(.primary) .connect-tile-icon{background:var(--bg);color:var(--text)}
.connect-tile-body{flex:1;min-width:0}
.connect-tile-title{font-size:15px;font-weight:600;letter-spacing:-0.01em}
.connect-tile-sub{font-size:12px;margin-top:2px}
.connect-tile.primary .connect-tile-sub{color:rgba(255,255,255,0.65)}
[data-theme="dark"] .connect-tile.primary .connect-tile-sub{color:var(--muted)}
.connect-tile:not(.primary) .connect-tile-sub{color:var(--muted)}

/* ── Onboarding ───────────────────────────────────────────────────────────── */
.onboarding-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.35);z-index:300;display:flex;align-items:flex-end;justify-content:center;animation:fadeIn 0.2s ease}
.onboarding-sheet{background:var(--surface);border:1px solid var(--border);border-radius:14px 14px 0 0;width:100%;max-width:480px;max-height:85dvh;overflow-y:auto;padding:20px 20px calc(var(--sb) + 20px);animation:slideUp 0.28s cubic-bezier(0.34,1.12,0.64,1)}
.ob-header{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:6px}
.ob-logo{font-family:var(--font-d);font-size:18px;letter-spacing:-0.035em;font-weight:700}
.ob-logo span{color:var(--accent)}
.ob-skip{background:none;border:none;color:var(--muted);font-family:var(--font-m);font-size:12px;letter-spacing:0.3px;text-decoration:underline;text-underline-offset:2px;transition:color 0.12s;min-height:36px;padding:0 4px;cursor:pointer}
.ob-skip:hover{color:var(--text)}
.ob-title{font-family:var(--font-d);font-size:22px;font-weight:800;margin-bottom:8px;line-height:1.2;letter-spacing:-0.03em;color:var(--text)}
.ob-subtitle{font-family:var(--font-d);font-size:14px;color:var(--muted);margin-bottom:24px;line-height:1.5}
.ob-skip-inline{display:block;width:100%;background:none;border:none;color:var(--muted);font-family:var(--font-d);font-size:13px;padding:14px 0 0;cursor:pointer;text-align:center;-webkit-tap-highlight-color:transparent}
.ob-step{font-family:var(--font-m);font-size:10px;color:var(--accent);letter-spacing:1px;margin-bottom:6px}

/* ── Desktop ≥768px ───────────────────────────────────────────────────────── */
@media(min-width:480px){
  .bottom-nav{left:0;right:0;transform:none}
}

@media(min-width:768px){
  html,body{height:100dvh;overflow:hidden}
  body{display:flex;flex-direction:row;align-items:stretch}

  /* Sidebar */
  .bottom-nav{
    position:relative !important;
    left:auto !important;bottom:auto !important;top:auto !important;
    transform:none !important;
    width:var(--sidebar-w);min-width:var(--sidebar-w);max-width:var(--sidebar-w);
    height:100dvh;display:flex !important;flex-direction:column;
    padding:0;background:var(--surface);
    border:none;border-right:1px solid var(--border);
    z-index:10;pointer-events:all;box-shadow:none;flex-shrink:0;
  }
  .bn-pill{
    flex-direction:column;border-radius:0;
    background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;
    border:none;box-shadow:none;padding:8px 12px 10px;gap:2px;flex:1;
  }
  .bn-item{
    flex:none;flex-direction:row;justify-content:flex-start;gap:10px;
    padding:10px 12px;border-radius:var(--r);
    font-size:14px;font-weight:500;letter-spacing:-0.01em;
    color:var(--text2);width:100%;min-height:auto;
    position:relative;border:1px solid transparent;
  }
  .bn-item.active{
    background:var(--surface);border-color:var(--border);
    color:var(--text);font-weight:600;
  }
  .bn-item.active::before{
    content:'';position:absolute;left:-1px;top:8px;bottom:8px;
    width:3px;background:var(--accent);border-radius:2px;
  }
  .bn-item.active .bn-icon{color:var(--accent);}
  .bn-item:hover:not(.active){background:rgba(0,0,0,0.03);color:var(--text)}
  [data-theme="dark"] .bn-item:hover:not(.active){background:rgba(255,255,255,0.04)}
  .bn-icon{color:var(--muted);flex-shrink:0;display:flex;align-items:center;}
  .bn-label{display:block !important;font-size:14px;letter-spacing:-0.01em;font-weight:inherit;}
  .sb-section-label{display:none;}

  /* Sidebar logo */
  .sb-logo{
    display:flex;flex-direction:column;flex-shrink:0;
    padding:20px 18px 16px;
    border-bottom:1px solid var(--border);
  }
  .sb-logo-wordmark{
    font-family:var(--font-d);font-weight:700;font-size:22px;
    letter-spacing:-0.035em;color:var(--text);line-height:1;
  }
  .sb-logo-wordmark span{color:var(--accent);}
  .sb-logo-bar{height:2px;background:var(--border);margin-top:8px;border-radius:1px;overflow:hidden;}
  .sb-logo-bar-fill{height:100%;width:60%;background:var(--accent);border-radius:1px;}
  .sb-logo-dot{display:none}
  .sb-logo-text{display:none}

  /* Sidebar plan card + user row */
  #sidebarPlanInfo{display:block !important;padding:0 12px 16px;}
  .sb-plan-card{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:14px;margin-bottom:10px;}
  .sb-plan-top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px;}
  .sb-plan-kicker{font-family:var(--font-m);font-size:9px;color:var(--accent);letter-spacing:0.12em;text-transform:uppercase;font-weight:600;}
  .sb-plan-count{font-family:var(--font-m);font-size:9px;color:var(--muted);letter-spacing:0.04em;}
  .sb-plan-fase{font-family:var(--font-d);font-weight:600;font-size:14px;color:var(--text);letter-spacing:-0.01em;}
  .sb-plan-sub{font-family:var(--font-d);font-size:12px;color:var(--muted);margin-top:2px;}
  .sb-plan-bar-wrap{height:3px;background:var(--border);border-radius:2px;overflow:hidden;margin-top:12px;}
  .sb-plan-bar-fill{height:100%;background:var(--accent);width:0%;transition:width 0.4s ease;border-radius:2px;}
  .sb-plan-km-row{display:flex;justify-content:space-between;margin-top:6px;font-family:var(--font-d);font-size:11px;color:var(--muted);}
  .sb-plan-pct{color:var(--accent);font-weight:600;}
  .sb-user-row{display:flex;align-items:center;gap:10px;padding:6px 4px;cursor:pointer;-webkit-tap-highlight-color:transparent;}
  .sb-user-avatar{width:28px;height:28px;border-radius:999px;background:var(--text);color:var(--bg);border:none;font-family:var(--font-d);font-weight:700;font-size:12px;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
  .sb-user-name{font-family:var(--font-d);font-weight:500;font-size:12px;color:var(--text);letter-spacing:-0.005em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .sb-user-sub{font-family:var(--font-d);font-size:11px;color:var(--muted);}
  .sb-user-chevron{font-family:var(--font-d);font-size:14px;color:var(--muted);flex-shrink:0;}

  /* Hide avatar from desktop topbar (moved to sidebar) */
  #topbarAuthDesktop{display:none !important;}
  .weather-widget{font-size:15px;}
  .sb-user-row{cursor:pointer;user-select:none;-webkit-user-select:none;}

  #sidebarPlanInfo{display:block !important}
  .bottom-nav::after{display:none !important}

  /* Day nav */
  .day-nav-btn{display:flex;}

  /* App area */
  .app{
    flex:1;min-width:0;max-width:calc(100vw - var(--sidebar-w));
    height:100dvh;margin:0;display:flex;flex-direction:column;
    overflow:hidden;
  }

  /* Desktop topbar */
  .desktop-topbar{
    display:flex !important;
    align-items:center;justify-content:space-between;
    padding:0 24px;height:48px;
    background:var(--surface);border-bottom:1px solid var(--border);flex-shrink:0;
    width:100%;box-sizing:border-box;
  }
  .dt-breadcrumb{
    font-family:var(--font-d);font-size:13px;
    color:var(--muted);letter-spacing:-0.01em;
    display:flex;align-items:center;gap:6px;
  }
  .dt-breadcrumb span{color:var(--muted);font-weight:500;}
  .dt-breadcrumb .dt-sep{color:var(--border);}
  .dt-breadcrumb strong{color:var(--text);font-weight:700;letter-spacing:-0.02em;}
  .dt-actions{display:flex;align-items:center;gap:10px}
  .topbar{display:none}

  /* Races bar */
  .races-bar{padding:12px 28px 0}
  .race-chip{margin-bottom:16px}

  /* Scroll area */
  .scroll-area{flex:1;overflow-y:auto;padding-bottom:24px}

  /* Views */
  .view{padding:28px 36px;animation:none;display:none}
  .view.active{display:block !important}

  /* Page title */
  .pt-h{font-size:42px}
  .page-title{padding:28px 0 8px}

  /* Cards */
  .card{border-radius:var(--r-lg);margin-bottom:12px}

  /* Stats */
  .stats-grid{grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:16px}
  .stat-card{padding:20px;border-radius:var(--r-lg)}
  .stat-val{font-size:44px}

  /* Plan */
  .plan-row{padding:13px 16px}
  .plan-row-title{font-size:14px}
  .plan-table{border-radius:var(--r-lg)}

  /* Settings */
  .settings-section{padding:20px;border-radius:var(--r2)}

  /* Modal — centered */
  .modal-backdrop{left:var(--sidebar-w)}
  .stats-overlay{left:var(--sidebar-w)}
  .modal-sheet{
    max-width:540px;margin:auto;
    border-radius:var(--r-lg);
    animation:none;
    box-shadow:0 20px 60px rgba(14,31,26,0.15);
  }
  .modal-backdrop.open{align-items:center}

  /* Toast */
  .toast{
    left:calc(var(--sidebar-w) + 50%);
    transform:translateX(-50%) translateY(16px);
    bottom:28px;
  }
  .toast.show{transform:translateX(-50%) translateY(0)}

  /* Update banner */
  .update-banner{padding:10px 28px}

  /* Phase strip */
  .phase-strip{padding:0 !important}

  /* Alle tabs: gecentreerd op desktop */
  #todayContent,#weekContent,#planPageTitle,#phaseTabs,#planContent,#calContent{
    max-width:760px;margin-left:auto;margin-right:auto;
  }

  /* Stats overlay sheet */
  .stats-sheet{border-radius:var(--r-lg) var(--r-lg) 0 0;padding:20px 24px calc(var(--sb) + 28px)}
}