@import url("https://fonts.googleapis.com/css2?family=Sora:wght@400;600;700&family=Space+Grotesk:wght@500;700&display=swap");

:root{
  --bg:#0b0f14;
  --bg-2:#0f1621;
  --bg-accent-1:rgba(229,71,53,0.08);
  --bg-accent-2:rgba(72,118,255,0.08);
  --ink:#f5f7fb;
  --text:var(--ink);
  --muted:#9aa6b2;
  --surface:#141b26;
  --surface-2:#182131;
  --card:var(--surface);
  --border:rgba(255,255,255,0.08);
  --border-strong:rgba(255,255,255,0.14);
  --divider:var(--border);
  --hover:rgba(255,255,255,0.04);
  --line:var(--border);
  --shadow-lg:0 14px 40px rgba(0,0,0,0.35);
  --shadow-nav:0 -8px 30px rgba(0,0,0,0.35);
  --accent:#e54735;
  --accent-strong:#d24132;
  --accent-soft:rgba(229,71,53,0.2);
  --accent-soft-2:rgba(229,71,53,0.12);
  --accent-glow:rgba(229,71,53,0.24);
  --accent-contrast:#fff;
  --accent-2:#1b4aa8;
  --accent-2-contrast:#fff;
  --status-neutral:var(--accent-2);
  --status-good:#33d17a;
  --status-bad:#f87171;
  --status-neutral-soft:rgba(27,74,168,0.2);
  --status-good-soft:rgba(51,209,122,0.12);
  --status-bad-soft:rgba(248,113,113,0.12);
  --status-fill:linear-gradient(90deg,#1b4aa8,#4a78c8);
  --best-accent:var(--status-neutral);
  --btn:var(--accent);
  --btnH:var(--accent-strong);
  --avatarBg:#151b27;
  --avatarText:var(--text);
  --topbar-bg:rgba(11,15,20,0.92);
  --topbar-border:var(--border);
  --topbar-text:var(--text);
  --topbar-muted:var(--muted);
  --ribbon-height:30px;
  --topnav-height:0px;

  /* Nav tokens */
  --tabbar-bg:rgba(11,15,20,0.96);
  --tabbar-border:var(--border);
  --tabbar-shadow:var(--shadow-nav);
  --tab-active:var(--accent);
  --tab-inactive:var(--muted);
}

:root[data-theme="light"]{
  --bg:#eef2f6;
  --bg-2:#f7f9fb;
  --bg-accent-1:rgba(229,71,53,0.14);
  --bg-accent-2:rgba(72,118,255,0.12);
  --ink:#0b1220;
  --text:var(--ink);
  --muted:#5f6b7a;
  --surface:#ffffff;
  --surface-2:#f1f4f8;
  --card:rgba(255,255,255,0.96);
  --border:rgba(15,23,42,0.12);
  --border-strong:rgba(15,23,42,0.2);
  --divider:var(--border);
  --hover:rgba(15,23,42,0.04);
  --line:var(--border);
  --shadow-lg:0 14px 40px rgba(15,23,42,0.12);
  --shadow-nav:0 -8px 30px rgba(15,23,42,0.2);
  --status-good:#15803d;
  --status-bad:#dc2626;
  --status-neutral-soft:rgba(27,74,168,0.12);
  --status-good-soft:rgba(22,163,74,0.12);
  --status-bad-soft:rgba(220,38,38,0.12);
  --avatarBg:#e8efff;
  --avatarText:#0b1220;
  --topbar-bg:rgba(247,249,251,0.92);
  --topbar-border:var(--border);
  --topbar-text:var(--text);
  --topbar-muted:var(--muted);
  --tabbar-bg:rgba(247,249,251,0.96);
  --tabbar-border:var(--border);
  --tabbar-shadow:var(--shadow-nav);
  --tab-inactive:var(--muted);
}

:root[data-accent="orange"]{
  --accent:#e54735;
  --accent-strong:#d24132;
  --accent-soft:rgba(229,71,53,0.2);
  --accent-soft-2:rgba(229,71,53,0.12);
  --accent-glow:rgba(229,71,53,0.24);
}
:root[data-accent="pink"]{
  --accent:#E50867;
  --accent-strong:#cf065d;
  --accent-soft:rgba(229,8,103,0.2);
  --accent-soft-2:rgba(229,8,103,0.12);
  --accent-glow:rgba(229,8,103,0.24);
}
:root[data-accent="green"]{
  --accent:#00963E;
  --accent-strong:#00873a;
  --accent-soft:rgba(0,150,62,0.2);
  --accent-soft-2:rgba(0,150,62,0.12);
  --accent-glow:rgba(0,150,62,0.24);
}
:root[data-accent="yellow"]{
  --accent:#FAB623;
  --accent-strong:#e6a61f;
  --accent-soft:rgba(250,182,35,0.2);
  --accent-soft-2:rgba(250,182,35,0.12);
  --accent-glow:rgba(250,182,35,0.24);
}
:root[data-accent="red"]{
  --accent:#E1241D;
  --accent-strong:#cc211b;
  --accent-soft:rgba(225,36,29,0.2);
  --accent-soft-2:rgba(225,36,29,0.12);
  --accent-glow:rgba(225,36,29,0.24);
}
:root[data-accent="blue"]{
  --accent:#0155A5;
  --accent-strong:#014c94;
  --accent-soft:rgba(1,85,165,0.2);
  --accent-soft-2:rgba(1,85,165,0.12);
  --accent-glow:rgba(1,85,165,0.24);
}
*{box-sizing:border-box}
body,.homeBody{
  margin:0;
  color:var(--ink);
  font-family:"Sora","Space Grotesk","IBM Plex Sans","Segoe UI",sans-serif;
  background:
    radial-gradient(900px 600px at 8% -10%, var(--bg-accent-1), transparent 60%),
    radial-gradient(700px 520px at 92% 12%, var(--bg-accent-2), transparent 55%),
    linear-gradient(180deg, var(--bg), var(--bg-2));
}
.icon{display:block}
.homeShell,
.appShell{min-height:100vh;}
.homeShell--tabbar,
.appShell--tabbar{
  padding-bottom:calc(120px + env(safe-area-inset-bottom));
}
.homeMain,
.appMain{
  max-width:var(--desktop-max);
  margin:0 auto;
  padding:28px 20px 120px;
  display:grid;
  grid-template-columns:1.1fr 0.9fr;
  gap:20px;
  align-items:start;
}
.homeMain--stack,
.appMain--stack{
  display:block;
  grid-template-columns:1fr;
  gap:0;
}
.homeTopBar{
  position:sticky;
  top:calc(var(--ribbon-height) + var(--topnav-height));
  z-index:9999;
  width:100%;
  background:var(--topbar-bg);
  color:var(--topbar-text);
  backdrop-filter:blur(10px);
  margin:0;
}
.homeTopBar__inner{
  max-width:var(--desktop-max);
  margin:0 auto;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:8px;
  padding:14px 24px;
  transition:padding 0.2s ease, gap 0.2s ease;
}
.homeTopBar__row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  width:100%;
}
.settingsHero__chip{
  display:none;
}
.searchHero__form{
  margin-top:12px;
}
.homeTopBar__chipWrap{display:flex;align-items:center;gap:12px;}
.homeTopBar__meta{display:flex;justify-content:flex-end;width:100%;}
.homeTopBar__nav{
  display:none;
  align-items:center;
  gap:8px;
}
.homeTopBar__navItem{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 10px;
  border-radius:999px;
  text-decoration:none;
  color:var(--topbar-muted);
  font-weight:600;
  font-size:12px;
  letter-spacing:.02em;
  white-space:nowrap;
}
.homeTopBar__navItem--active{
  background:var(--accent-soft);
  color:var(--topbar-text);
}
.homeTopBar__navIcon{
  width:16px;
  height:16px;
  flex:0 0 auto;
}
.homeTopBar__chipAvatar{
  width:42px;height:42px;border-radius:50%;
  background:var(--avatarBg);color:var(--avatarText);
  font-weight:700;font-size:14px;
  display:inline-flex;align-items:center;justify-content:center;
  overflow:hidden;
}
.homeTopBar__chipAvatar img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.homeTopBar__chip{display:flex;flex-direction:column;gap:2px;}
.homeTopBar__chipLabel{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.12em;
  color:var(--topbar-muted);
}
.homeTopBar__chipName{
  font-size:16px;
  font-weight:600;
}
.homeTopBar__menu{
  width:40px;
  height:40px;
  border-radius:12px;
  border:1px solid var(--border-strong);
  background:transparent;
  color:var(--topbar-text);
  display:flex;
  flex-direction:column;
  gap:4px;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}
.homeTopBar__menu span{
  display:block;
  width:18px;
  height:2px;
  background:var(--topbar-text);
  border-radius:999px;
}
.pill{
  padding:6px 12px;
  border-radius:999px;
  background:var(--accent-soft);
  border:1px solid var(--accent);
  font-size:12px;
  color:var(--accent-contrast);
}
.pill--ghost{
  background:var(--topbar-bg);
  border:1px solid var(--border-strong);
  color:var(--topbar-text);
}
.pulsePill{
  display:inline-flex;
  margin:0 0 10px;
}
.homeTopBar.is-compact .homeTopBar__inner{
  padding:6px 18px;
  gap:6px;
}
.homeTopBar.is-compact .homeTopBar__chipAvatar{
  width:32px;
  height:32px;
  font-size:12px;
}
.homeTopBar.is-compact .homeTopBar__chipLabel{font-size:10px;}
.homeTopBar.is-compact .homeTopBar__chipName{font-size:14px;}
.homeTopBar.is-compact .pill{
  padding:4px 10px;
  font-size:11px;
}
.homeTopBar.is-compact .homeTopBar__menu{
  width:34px;
  height:34px;
}
.heroCard{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:20px;
  padding:20px;
  margin-bottom:20px;
  box-shadow:var(--shadow-lg);
  backdrop-filter:blur(8px);
}
.heroCard__header{display:flex;flex-direction:column;gap:8px;}
.heroCard__title{margin:0;font-size:22px;font-weight:700;}
.heroCard__subtitle{
  margin:0;
  color:var(--muted);
  font-size:12px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 12px;
  border-radius:999px;
  border:1px solid var(--accent);
  background:var(--accent-soft-2);
  width:fit-content;
}
.heroCard__subtitle--plain{
  display:block;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  width:auto;
  gap:0;
}
.heroCard__metrics{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px;}
.heroMetric{
  flex:1 1 50%;
  background:var(--surface-2);
  border-radius:14px;
  padding:14px;
}
.heroMetric__label{margin:0;color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.08em;}
.heroMetric__value{
  margin:8px 0 0;
  font-size:28px;
  font-weight:700;
  font-family:"Bebas Neue","Barlow Condensed","Oswald",sans-serif;
  letter-spacing:.02em;
}
.heroCard__trend{margin-top:20px;}
.trendline-bars{
  display:flex;
  align-items:flex-end;
  gap:6px;
  height:60px;
  padding:8px;
  border-radius:14px;
  background:var(--surface-2);
}
.trend-bar{
  flex:1 1 auto;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  position:relative;
  background:var(--status-neutral-soft);
  border-radius:8px;
  min-height:8px;
}
.trend-bar--best{background:var(--accent);}
.trend-bar__tooltip{position:absolute;bottom:100%;font-size:10px;color:var(--muted);}
.heroCard__sparklineFallback{font-size:12px;color:var(--muted);margin:0;}
.heroCard__coachList{margin-top:16px;}
.heroCard__coach{margin:0;color:var(--muted);font-size:14px;}
.heroCard__coach + .heroCard__coach{margin-top:8px;}
.heroCard__btn{
  display:block;
  margin-top:18px;
  text-align:center;
  padding:14px;
  border-radius:999px;
  text-decoration:none;
  font-weight:600;
  background:var(--accent);
  color:var(--accent-contrast);
}
.heroCard__btn--disabled{background:var(--surface-2);color:var(--muted);pointer-events:none;}
.heroCard__notice{margin:12px 0 0;color:var(--muted);font-size:14px;}

.heroGrid{display:block;margin-top:10px;}
.card--pulse{position:relative;overflow:hidden;}
.card--pulse:after{
  content:"";
  position:absolute;right:-40px;top:-40px;
  width:160px;height:160px;border-radius:50%;
  background:radial-gradient(circle, var(--accent-glow), transparent 70%);
  pointer-events:none;
}
.pulseGrid{display:grid;grid-template-columns:1fr auto 1fr;gap:12px;align-items:stretch;}
.metricValue{
  font-family:"Bebas Neue","Barlow Condensed","Oswald",sans-serif;
  font-size:36px;
  letter-spacing:.02em;
}
.metricUnit{font-size:12px;color:var(--muted);text-transform:uppercase;}
.speedBars{display:flex;flex-direction:column;gap:10px;}
.speedBar__label{
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--muted);
  margin-bottom:6px;
}
.speedBar__track{
  position:relative;
  height:12px;
  border-radius:999px;
  background:var(--border);
  overflow:hidden;
}
.speedBar__fill{
  position:absolute;
  left:0;
  top:0;
  height:100%;
  border-radius:999px;
  background:var(--status-fill);
  z-index:2;
}
.speedBar__fill--muted{
  background:var(--border);
  z-index:1;
}
.speedBar__marker{
  position:absolute;
  top:-4px;
  width:4px;
  height:20px;
  border-radius:999px;
  background:var(--ink);
  border:2px solid var(--surface);
  box-shadow:0 0 8px rgba(15,23,42,0.25);
  transform:translateX(-50%);
  z-index:3;
}
.speedBar__meta{
  display:flex;
  align-items:baseline;
  gap:8px;
  flex-wrap:wrap;
  margin-top:0;
  justify-content:flex-start;
  width:100%;
}
.speedBar__meter{display:grid;gap:6px;margin-top:6px;}
.pulseHeader{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:10px;
}
.pulseHeader .backfillStatus{
  margin:0;
  font-style:italic;
  text-align:right;
  white-space:nowrap;
}
.speedBar__metaLabel{
  font-size:11px;
  color:var(--muted);
}
.speedBar__meta > .speedBar__metaLabel{
  margin-left:auto;
}
.speedBar__metaLine{
  display:inline-flex;
  align-items:baseline;
  gap:8px;
  white-space:nowrap;
}
.speedBar__metaRow{
  display:inline-flex;
  align-items:baseline;
  gap:4px;
  white-space:nowrap;
}
.delta--up{color:var(--status-good);}
.delta--down{color:var(--status-bad);}
.delta--even{color:var(--status-neutral);}
.metric-pb{color:var(--muted);}
.metric-pill{
  display:none;
}
.metric.is-improved .metric-delta{color:var(--status-good);}
.metric.is-regressed .metric-delta{color:var(--status-bad);}
.metric.is-neutral .metric-delta{color:var(--status-neutral);}
.speedBar__value{
  display:inline-flex;
  align-items:baseline;
  gap:4px;
}
.speedBar__unit{
  margin-left:0;
}
.speedBar__meta .metricValue{font-size:32px;}
.miniStats{display:flex;flex-direction:column;gap:10px;}
.miniStat{padding:0;border-radius:0;background:transparent;}
.miniStat__label{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;}
.miniStat__line{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:10px;
}
.miniStat__metaPb{
  font-size:11px;
  color:var(--muted);
  opacity:0.85;
  white-space:nowrap;
}
.miniStat__deltaRow{
  display:flex;
  justify-content:flex-end;
  margin-top:6px;
}
.miniStat__delta{
  font-size:12px;
  color:var(--accent);
  font-weight:600;
  text-align:right;
}
.fastLaps{margin-top:6px;display:grid;gap:10px;}
.fastLaps__header{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px;}
.fastLaps__title{
  font-size:11px;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.08em;
  font-weight:600;
}
.fastLaps__subtitle{font-size:11px;color:var(--muted);}
.fastLaps__chips{display:flex;flex-wrap:wrap;gap:6px;}
.fastLapChip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 10px;
  border-radius:999px;
  background:rgba(15,23,42,0.06);
  white-space:nowrap;
}
.fastLapChip__dot{
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--status-neutral);
}
.fastLapChip__lap{font-size:11px;color:var(--muted);}
.fastLapChip__time{font-weight:600;font-size:12px;color:var(--ink);}
.fastLaps__empty{font-size:12px;color:var(--muted);}
.metricLap{display:block;font-size:11px;color:var(--muted);margin-top:4px;}
.fastLapChip--empty{background:rgba(15,23,42,0.04);}
.fastLapChip--empty .fastLapChip__dot{background:rgba(15,23,42,0.2);}
.fastLapChip--empty .fastLapChip__time,
.fastLapChip--empty .fastLapChip__lap{color:var(--muted);}
.speedSection{margin-top:6px;display:grid;gap:10px;}
.speedSection__label{
  font-size:11px;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.08em;
  font-weight:600;
}
.otherSplits{margin-top:10px;display:grid;gap:6px;}
.otherSplits__label{
  font-size:10px;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.08em;
  font-weight:600;
}
.otherSplits__chips{display:flex;flex-wrap:wrap;gap:8px;}
.pulseSession{
  margin-top:16px;
  display:grid;
  gap:6px;
}
.pulseSession__label{
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--muted);
}
.pulseSession__value{
  font-size:14px;
  color:var(--ink);
  font-weight:600;
}
.pulseNote{margin-top:14px;font-size:12px;color:var(--muted);}
.pulseNote p{margin:0;}
.pulseNote p + p{margin-top:6px;}

.pulseGrid__divider{
  width:1px;
  background:var(--border);
  align-self:stretch;
  justify-self:center;
}
.pulseBlockDivider{
  height:1px;
  background:var(--border);
  margin:16px 0;
}

.card--latest .dateTag{
  padding:4px 10px;
  border-radius:999px;
  background:var(--surface-2);
  font-size:12px;
  color:var(--muted);
}
.latestMeta{display:grid;gap:14px;}
.timeRange{font-size:18px;font-weight:600;}
.sessionStats{display:flex;gap:20px;flex-wrap:wrap;}
.sessionStats .metricValue{font-size:28px;}
.sessionStat__label{font-size:12px;color:var(--muted);}
.cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:12px 16px;
  border-radius:999px;
  background:var(--accent);
  color:var(--accent-contrast);
  text-decoration:none;
  font-weight:600;
  margin-top:10px;
}
.cta--center{
  display:flex;
  width:fit-content;
  margin:18px auto 0;
}
.cta--disabled{background:var(--surface-2);color:var(--muted);pointer-events:none;}
.ctaSub{font-size:12px;color:var(--muted);margin-top:8px;}
.ctaNotice{margin:10px 0 0;color:var(--muted);font-size:12px;}

.splitCard{margin-top:20px;}
.splitRows{display:grid;gap:10px;}
.splitRow{
  display:grid;
  grid-template-columns:1.1fr 1.4fr 1fr 0.6fr;
  align-items:center;
  gap:12px;
  padding:10px 12px;
  border-radius:12px;
  background:var(--surface-2);
}
.splitRow--focus{
  border:1px solid var(--accent);
  background:var(--accent-soft-2);
}
.splitRow__label{font-weight:600;}
.splitRow__values{
  display:flex;
  gap:8px;
  align-items:baseline;
  justify-content:space-between;
  width:100%;
}
.splitRow .metricValue{font-size:22px;}
.splitRow__bar{
  height:8px;
  background:var(--border);
  border-radius:999px;
  overflow:hidden;
}
.splitRow__bar div{
  height:100%;
  background:var(--status-fill);
}
.splitRow__delta{
  font-size:12px;
  color:var(--accent);
  font-weight:600;
  text-align:right;
}
.splitNote{
  margin-top:10px;
  font-size:12px;
  color:var(--muted);
}
.splitCompare{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}
.splitCompare__col{
  display:grid;
  gap:6px;
  padding:12px;
  border-radius:12px;
  background:var(--surface-2);
}
.splitCompare__col.is-best-split,
.splitCompare__col--focus{
  border:1px solid var(--best-accent);
  background:var(--status-neutral-soft);
}
.splitCompare__label{
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-size:11px;
  color:var(--muted);
}
.splitCompare__values{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:8px;
}
.splitCompare__values .metricValue{font-size:22px;}
.splitCompare__bar{
  height:6px;
  background:var(--border);
  border-radius:999px;
  overflow:hidden;
}
.splitCompare__bar span{
  display:block;
  height:100%;
  background:var(--status-fill);
}
.splitCompare__delta{
  font-size:12px;
  color:var(--accent);
  font-weight:600;
  text-align:right;
}

.gridBottom{display:grid;grid-template-columns:1fr;gap:20px;margin-top:10px;}

.goal{display:grid;gap:4px;}
.goal__title{font-size:12px;color:var(--muted);}
.goal__meta{font-size:12px;color:var(--muted);}
.streak{margin-top:12px;font-size:12px;color:var(--muted);}
.streak__bar{height:8px;background:var(--border);border-radius:999px;overflow:hidden;margin-top:6px;}
.streak__bar div{height:100%;background:var(--status-fill);}

.card--recent{grid-column:span 3;}
.textLink{font-size:12px;color:var(--accent-2);text-decoration:none;}
.sessionList{list-style:none;margin:0;padding:0;display:grid;gap:10px;}
.sessionList li{background:var(--surface-2);border-radius:12px;}
.sessionList__link{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;text-decoration:none;color:inherit;gap:12px;}
.sessionList__link:hover{background:var(--hover);}
.sessionList__date{font-weight:600;}
.sessionList__meta{font-size:12px;color:var(--muted);}
.sessionList__stats{display:flex;gap:6px;align-items:baseline;}
.sessionList__metric{display:inline-flex;align-items:baseline;gap:6px;}
.sessionList__metric .metric-delta,
.sessionList__metric .metric-pb,
.sessionList__metric .metric-pill{display:none;}
.sessionList__value{min-width:48px;text-align:right;}
.sessionList__value.metricValue{font-size:18px;}
.sessionList__unit{
  font-size:11px;
  color:var(--muted);
  margin-left:0;
  margin-right:0;
  text-transform:lowercase;
}
.muted{color:var(--muted);font-size:12px;}

.topNav{
  position:sticky;
  top:var(--ribbon-height);
  z-index:10000;
  background:var(--topbar-bg);
  border-bottom:1px solid var(--divider);
  display:none;
}
.topNav__inner{
  max-width:1100px;
  margin:0 auto;
  display:flex;
  justify-content:space-between;
  gap:16px;
  padding:10px 16px;
}
.topNav__tab{
  display:flex;
  align-items:center;
  gap:8px;
  text-decoration:none;
  color:var(--topbar-muted);
  font-weight:600;
  padding:8px 12px;
  border-radius:999px;
  flex:1 1 25%;
  justify-content:center;
}
.topNav__tab .navIcon{
  width:18px;
  height:18px;
  flex:0 0 auto;
}
.topNav__tab--active{
  background:var(--accent);
  color:var(--accent-contrast);
}

.brandBar{
  position:sticky;
  top:0;
  z-index:10001;
  background:var(--accent);
  border-top:1px solid var(--accent-strong);
  border-bottom:1px solid var(--accent-strong);
  text-decoration:none;
  color:var(--accent-contrast);
  display:block;
}
.brandBar__inner{
  max-width:1100px;
  margin:0 auto;
  height:var(--ribbon-height);
  display:flex;
  align-items:center;
  gap:8px;
  padding:0 24px;
  color:var(--accent-contrast);
  font-weight:600;
  font-size:10px;
  letter-spacing:.2em;
  text-transform:uppercase;
}
.brandBar__icon{
  width:20px;
  height:20px;
  color:var(--accent-contrast);
  display:none;
}
.brandBar__stripe{
  display:none;
}
.brandBar__dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--accent);
  border:1px solid var(--accent-contrast);
  box-shadow:0 0 10px var(--accent-glow);
  display:inline-block;
  animation:pulseDot 1.4s ease-in-out infinite;
}
.brandBar__text{line-height:1;font-weight:600;color:#fff;}
@media (max-width: 1023px){
  .brandBar__text{
    position:relative;
    display:inline-block;
    padding-bottom:4px;
  }
  .brandBar__text::after{
    content:'';
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    height:2px;
    background:var(--accent-contrast);
    opacity:0.7;
    border-radius:2px;
  }
}
.siteTopbar .brand,
.appTopRail .topbar__title,
.home_root .topbar__title{
  color:#fff;
}
.brandBar__status{
  margin-left:auto;
  margin-top:0;
  margin-right:0;
  margin-bottom:0;
  min-height:auto;
  font-style:italic;
  text-transform:none;
  letter-spacing:0;
  font-size:10px;
  font-weight:400;
  white-space:nowrap;
  color:var(--accent-contrast);
  opacity:0.9;
  line-height:1;
}

:root[data-theme="light"][data-accent="blue"] .siteTopbar .brand{
  color:#fff;
}
@keyframes pulseDot{
  0%, 100% { transform: scale(0.85); opacity: 0.6; box-shadow: 0 0 0 rgba(255,59,48,0.15); }
  50% { transform: scale(1.25); opacity: 1; box-shadow: 0 0 12px rgba(255,59,48,1); }
}

.navDrawer{
  position:fixed;
  inset:0;
  z-index:10050;
  pointer-events:none;
}
.navDrawer__scrim{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,0.5);
  opacity:0;
  transition:opacity 0.2s ease;
}
.navDrawer__panel{
  position:absolute;
  top:calc(var(--ribbon-height) + 12px);
  right:16px;
  width:min(320px, 86vw);
  background:var(--surface);
  color:var(--text);
  border:1px solid var(--border);
  border-radius:18px;
  padding:16px;
  box-shadow:var(--shadow-lg);
  opacity:0;
  transform:translateY(-8px) scale(0.98);
  transition:opacity 0.2s ease, transform 0.2s ease;
}
.navDrawer__header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:8px;
}
.navDrawer__title{
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.2em;
  color:var(--muted);
  font-weight:600;
}
.navDrawer__close{
  width:32px;
  height:32px;
  border-radius:10px;
  border:1px solid var(--border-strong);
  background:transparent;
  color:var(--text);
  font-size:18px;
  line-height:1;
  cursor:pointer;
}
.navDrawer__link{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 12px;
  border-radius:12px;
  text-decoration:none;
  color:var(--text);
  font-weight:600;
}
.navDrawer__link:hover{
  background:var(--hover);
}
.navDrawer.is-open{
  pointer-events:auto;
}
.navDrawer.is-open .navDrawer__scrim{
  opacity:1;
}
.navDrawer.is-open .navDrawer__panel{
  opacity:1;
  transform:translateY(0) scale(1);
}

.previousCard{
  margin-top:12px;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:18px;
  padding:18px;
  box-shadow:var(--shadow-lg);
  backdrop-filter:blur(8px);
}
.previousEmpty{margin-top:12px;color:var(--muted);font-size:14px;}
.sessionsPanel{margin-top:16px;}
.sessionsPanel__header h2{margin:0;font-size:18px;}
.sessionsList{
  list-style:none;
  margin:16px 0 0;
  padding:0;
  border:1px solid var(--border);
  border-radius:16px;
  overflow:hidden;
  background:var(--surface-2);
}
.sessionsList__item + .sessionsList__item{border-top:1px solid var(--border);}
.sessionsList__link{
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px 16px;
  text-decoration:none;
  color:inherit;
}
.sessionsList__link:hover{background:var(--hover);}
.sessionsList__date{font-weight:600;}
.sessionsList__time{color:var(--muted);font-size:14px;margin-left:auto;}
.sessionsList__lap{font-size:14px;font-weight:600;min-width:70px;text-align:right;}

.container{max-width:1100px;margin:0 auto;padding:20px}
.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:18px;
  padding:18px;
  box-shadow:var(--shadow-lg);
  backdrop-filter:blur(8px);
}
.card__header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:12px;
}
.card__header--tight{
  margin-bottom:4px;
}
.card__header--inline{
  align-items:center;
}
.sessionHeader__meta{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:2px;
  text-align:right;
}
.card--recent .sessionHeader__meta{
  min-height:32px;
}
.sessionHeader__date{
  font-size:13px;
  font-weight:600;
}
.sessionHeader__time{
  font-size:12px;
  color:var(--muted);
}
.sessionHeader__laps{
  font-size:12px;
  color:var(--muted);
}
.sessionHeader__link{
  color:inherit;
  text-decoration:none;
  cursor:pointer;
}
.sessionHeader__link:hover{
  text-decoration:underline;
}
.card__header--status{gap:8px;}
.card__header--status .backfillStatus{
  margin:0;
  font-style:italic;
  text-align:right;
  white-space:nowrap;
}
.cardTitle{
  font-size:16px;
  text-transform:uppercase;
  letter-spacing:.2em;
  color:var(--ink);
}
.cardSubtitle{
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.2em;
  color:var(--muted);
}
.badge{
  padding:4px 10px;
  border-radius:999px;
  background:var(--status-neutral-soft);
  color:var(--accent-2);
  font-size:12px;
  font-weight:600;
}
.badge--ghost{background:var(--surface-2);color:var(--muted);}
.badge--up{background:var(--status-good-soft);color:var(--status-good);}
.welcomeCard{padding:18px;margin-bottom:12px;}
.personalHeader{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;}
.latestHighlight{margin-top:16px;padding:16px;border:1px solid var(--accent-2);border-radius:10px;display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--accent-2);flex-wrap:wrap;text-decoration:none;color:var(--accent-2-contrast);}
.latestHighlight--link:hover{background:var(--accent-2);}
.latestHighlight__eyebrow{margin:0;color:var(--accent-2-contrast);opacity:0.85;font-size:12px;text-transform:uppercase;letter-spacing:.08em;}
.latestHighlight__title{margin:4px 0 0;font-size:20px;font-weight:700;color:var(--accent-2-contrast);}
.latestHighlight__titleTime{margin-left:8px;}
.latestHighlight__stats{margin:6px 0 0;font-size:14px;color:var(--accent-2-contrast);display:flex;gap:16px;flex-wrap:wrap;}
.latestHighlight__stats span{white-space:nowrap;}
.recentHighlight{margin-top:16px;padding:0;border:1px solid var(--border);border-radius:10px;background:var(--surface-2);overflow:hidden;}
.recentHighlight__rows{display:flex;flex-direction:column;}
.recentHighlight__row{display:flex;align-items:center;gap:12px;padding:12px 16px;text-decoration:none;color:inherit;border-top:1px solid var(--border);}
.recentHighlight__row:first-child{border-top:none;}
.recentHighlight__row:hover{background:var(--hover);}
.recentHighlight__rowPrimary{font-weight:400;display:flex;align-items:baseline;gap:6px;}
.recentHighlight__rowSecondary{color:var(--muted);font-size:14px;margin-left:auto;white-space:nowrap;}
.recentHighlight__rowFastest{color:var(--muted);font-size:13px;text-align:right;min-width:70px;white-space:nowrap;}
.recentHighlight__day{color:var(--muted);font-size:13px;}
.recentHighlight__empty{margin:12px 0 0;}
.othersCard{padding:18px;margin-top:12px;}
.othersCard__header h3{margin:0;font-size:18px;}
.othersCard__table{margin-top:12px;padding:16px;border-radius:12px;background:var(--surface-2);}
.chipManager--compact{
  margin-top:12px;
  margin-bottom:0;
  padding:12px;
}
.chipManager{
  border:1px solid var(--border);
  border-radius:12px;
  background:var(--card);
  padding:16px;
  margin-bottom:16px;
  display:flex;
  flex-wrap:wrap;
  gap:16px;
  align-items:center;
  justify-content:space-between;
}
.chipManager__info{flex:1 1 260px;min-width:200px;}
.chipManager__eyebrow{margin:0 0 4px;color:var(--muted);font-size:12px;letter-spacing:.08em;text-transform:uppercase;}
.chipManager__message{color:var(--muted);font-size:15px;margin:0;}
.chipManager__actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center;}
.chipManager__actions--inline{
  flex-wrap:nowrap;
  gap:8px;
}
.languageSwitch--stack{
  flex-direction:column;
  gap:12px;
  align-items:flex-start;
}
.languageSwitch--stack > *{
  width:100%;
}
.languageSwitch--stack .chipManager__btn{
  width:auto;
  align-self:flex-start;
}
.chipManager__input{
  padding:10px 12px;
  border:1px solid var(--border);
  border-radius:999px;
  min-width:220px;
  font-size:15px;
  flex:1 1 auto;
}
.chipManager__actions--inline .chipManager__input{
  min-width:150px;
  max-width:200px;
  flex:0 0 auto;
}
.chipManager__btn{
  border-radius:999px;
  border:1px solid var(--accent-2);
  background:var(--accent-2);
  color:var(--accent-2-contrast);
  padding:10px 20px;
  font-weight:600;
  cursor:pointer;
}
.chipManager__actions--inline .chipManager__btn{
  flex:0 0 auto;
  white-space:nowrap;
  padding:10px 14px;
}
.chipManager__btn--outline{
  background:var(--surface);
  color:var(--accent-2);
}
.chipManager__btn--outline:hover{
  background:var(--surface-2);
  color:var(--ink);
}
.chipManager__actions + .chipManager__actions{
  margin-top:8px;
}
.cardTitleRow{display:flex;align-items:center;justify-content:space-between;padding:16px 16px 0;gap:10px;flex-wrap:wrap;}
.cardTitleRow h3{margin:0;font-size:18px;}
.prefsRadios{
  display:grid;
  gap:10px;
}
.prefsRadio{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:10px;
  color:var(--ink);
}
.prefsRadio input[type="radio"]{
  width:18px;
  height:18px;
  accent-color:var(--accent);
}
.smallLink{font-size:13px;color:var(--accent-2);text-decoration:none;}
.smallLink:hover{text-decoration:underline;}
#myActivitiesCard{margin-top:14px;padding-bottom:16px;}
.table{width:100%;border-collapse:collapse}
.table th,.table td{padding:12px;border-bottom:1px solid var(--border);text-align:left;vertical-align:middle}
.table th{background:var(--surface-2);font-weight:700}
.table tr:hover{background:var(--hover);cursor:pointer}
.small{font-size:12px;color:var(--muted)}
.backfillStatus{margin:6px 16px 0;min-height:14px}
.backfillStatus[hidden]{display:none}
@media (max-width:640px){
  .table th:nth-child(4), .table td:nth-child(4){text-align:right}
}
.rowlink{cursor:pointer}
.transp{display:flex;flex-direction:column}
.transp span:first-child{font-weight:700}
.transp .code{color:var(--muted);font-size:12px}
.right{text-align:right}

/* Buttons & inputs */
.button{padding:8px 14px;color:var(--accent-contrast);background:var(--btn);border:none;border-radius:6px;text-decoration:none;display:inline-block}
.button:hover{background:var(--btnH)}
.input{padding:8px 10px;border:1px solid var(--border);border-radius:6px;background:var(--surface);min-width:220px}
.formRow{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.chipForm{display:flex;flex-direction:column;gap:10px;margin-bottom:6px;}
.formButton{align-self:flex-start;padding:10px 18px;}

/* NEW: intro line above form */
.intro {
  margin: 0 0 8px;
  color: var(--muted);
  font-size: 14px;
}

/* NEW: Mobile — keep input + button on one row */
@media (max-width: 640px){
  .formRow{
    flex-wrap: nowrap;      /* keep in one row */
    gap: 6px;
  }
  .input{
    min-width: 0;           /* allow shrinking */
    flex: 1 1 160px;        /* can shrink down on small phones */
  }
  .button{
    flex: 0 0 auto;
    white-space: nowrap;
    padding: 10px 12px;     /* comfy tap target */
  }
  .formButton{
    width:100%;
    text-align:center;
  }
  .latestHighlight__titleTime{
    display:block;
    margin-left:0;
  }
  .chipManager__actions--inline{
    flex-wrap:wrap;
    justify-content:space-between;
  }
  .chipManager__actions--inline .chipManager__input{
    flex:1 1 auto;
    max-width:none;
    width:65%;
  }
  .chipManager__actions--inline .chipManager__btn{
    flex:0 0 auto;
    width:auto;
    margin-left:auto;
  }
  .recentHighlight__day{display:none;}
}

@media (min-width: 900px){
  .chipManager__actions--inline .chipManager__input{
    min-width:320px;
    max-width:420px;
  }
}

/* Avatar (fix for oversized images) */
.avatarWrap{display:flex;align-items:center;gap:10px}
.avatar{
  width:36px;height:36px;border-radius:50%;
  background:var(--avatarBg);color:var(--avatarText);
  display:inline-flex;align-items:center;justify-content:center;
  font-weight:700;font-size:13px;flex:0 0 36px;overflow:hidden;
  border:1px solid var(--border);
}
.avatar img{width:100%;height:100%;object-fit:cover;display:block}

/* Defensive clamp in case an image slips outside the avatar wrapper */
.table td:first-child img{
  max-width:36px; max-height:36px; width:36px; height:36px; object-fit:cover; border-radius:50%;
}

/* ---------------- Global Navigation ---------------- */

/* Bottom tab bar (mobile) */
.tabbar{
  position: fixed; inset: auto 0 0 0;
  background: var(--tabbar-bg);
  border-top: 1px solid var(--tabbar-border);
  box-shadow: var(--tabbar-shadow);
  z-index: 9998;
  padding: 6px 12px;
  padding-bottom: calc(8px + env(safe-area-inset-bottom));
}
.tabbar__inner{width:100%;margin:0;display:flex;}
.tab{flex:1 1 50%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;height:58px;border-radius:12px;text-decoration:none;color:var(--tab-inactive);font-weight:700;white-space:nowrap;}
.tab--active{ color:var(--accent-contrast); background: var(--tab-active); }
.tab__icon{ width:22px; height:22px; display:inline-block; flex:0 0 auto; }
.tab__label{font-size:12px;}
.siteTopbar{display:none;}

@media (min-width: 1024px){
  body.homeBody{
    --desktop-max:1240px;
  }
  .homeTopBar--mobileOnly{
    display:none;
  }
  body.searchBody,
  body.settingsBody,
  body.adminBody{
    color:var(--text);
    background:
      radial-gradient(900px 600px at 8% -10%, var(--bg-accent-1), transparent 60%),
      radial-gradient(700px 520px at 92% 12%, var(--bg-accent-2), transparent 55%),
      linear-gradient(180deg, var(--bg), var(--bg-2));
    --desktop-hero-height:168px;
  }
  body.searchBody .homeMain,
  body.settingsBody .homeMain,
  body.adminBody .adminWrap{
    max-width:1240px;
    margin:0 auto;
    padding:28px 24px 48px;
  }
  body.searchBody .heroCard,
  body.searchBody .othersCard,
  body.settingsBody .heroCard,
  body.settingsBody .othersCard,
  body.adminBody .panel,
  body.adminBody .stat,
  body.adminBody .overviewCard,
  body.adminBody .actionCard{
    background:linear-gradient(180deg, var(--surface), var(--surface-2));
    border:1px solid var(--border);
    border-radius:16px;
    color:var(--text);
    box-shadow:none;
  }
  body.searchBody .latestActivitiesCard{
    background:linear-gradient(180deg, var(--surface), var(--surface-2));
    border:1px solid var(--border);
    border-radius:16px;
    color:var(--text);
  }
  body.searchBody .heroCard--performance,
  body.settingsBody .heroCard--performance{
    height:var(--desktop-hero-height);
  }
  body.searchBody .heroCard__title,
  body.settingsBody .heroCard__title{
    color:var(--text);
    letter-spacing:0.22em;
  }
  body.searchBody .heroCard__subtitle,
  body.searchBody .small,
  body.settingsBody .heroCard__subtitle,
  body.settingsBody .small,
  body.adminBody .adminSubtitle,
  body.adminBody .muted,
  body.adminBody .small{
    color:var(--muted);
  }
  body.searchBody .chipManager__btn{
    background:var(--accent);
    color:var(--accent-contrast);
    border:none;
    padding:12px 20px;
    font-size:14px;
    font-weight:700;
    transition:background 0.2s ease;
    display:inline-flex;
    align-items:center;
    justify-content:center;
  }
  body.searchBody .chipManager__btn:hover{
    background:var(--accent-strong);
  }
  body.settingsBody .chipManager__btn{
    background:var(--accent);
    color:var(--accent-contrast);
    border:none;
    padding:12px 20px;
    font-size:14px;
    font-weight:700;
    transition:background 0.2s ease;
    display:inline-flex;
    align-items:center;
    justify-content:center;
  }
  body.settingsBody .chipManager__btn:hover{
    background:var(--accent-strong);
  }
  body.searchBody .othersCard__table,
  body.settingsBody .othersCard__table{
    background:var(--surface-2);
  }
  body.searchBody .table th,
  body.searchBody .table td,
  body.settingsBody .table th,
  body.settingsBody .table td{
    border-bottom:1px solid var(--border);
  }
  body.searchBody .table th,
  body.settingsBody .table th{
    background:var(--surface-2);
    color:var(--muted);
  }
  body.searchBody .table td,
  body.settingsBody .table td{
    background:transparent;
    color:var(--text);
  }
  body.searchBody .table tr:hover,
  body.settingsBody .table tr:hover,
  body.adminBody table tr:hover{
    background:var(--hover);
  }
  body.searchBody .latestActivitiesCard{
    padding:18px;
  }
  body.searchBody .latestActivitiesCard .othersCard__header{
    padding:0;
  }
  body.searchBody .latestActivitiesCard .othersCard__table{
    padding:16px;
    background:var(--surface-2);
  }
  body.searchBody .latestActivitiesCard .table th{
    background:var(--surface-2);
    color:var(--muted);
    border-bottom:1px solid var(--border);
    font-weight:700;
  }
  body.searchBody .latestActivitiesCard .table td{
    background:transparent;
    color:var(--text);
    border-bottom:1px solid var(--border);
  }
  body.searchBody .latestActivitiesCard .table td:first-child{
    font-weight:700;
    white-space:nowrap;
    color:var(--text);
  }
  body.searchBody .latestActivitiesCard .table td:first-child .code{
    color:var(--text);
  }
  body.searchBody .latestActivitiesCard .table tr:hover{
    background:var(--hover);
    cursor:pointer;
  }
  body.searchBody .latestActivitiesCard .transp .code{
    color:var(--muted);
  }
  body.settingsBody .prefsRadio{
    color:var(--text);
  }
  body.settingsBody .prefsRadio span{
    color:var(--text);
  }
  body.adminBody .adminTitle,
  body.adminBody .stat .value,
  body.adminBody .overviewCard .value,
  body.adminBody .actionCard h3{
    color:var(--text);
  }
  body.adminBody .panel h2,
  body.adminBody .stat .label,
  body.adminBody .overviewCard .label,
  body.adminBody label,
  body.adminBody th{
    color:var(--muted);
  }
  body.adminBody input{
    background:var(--surface-2);
    border-color:var(--border-strong);
    color:var(--text);
  }
  body.adminBody button{
    background:var(--accent);
  }
  body.adminBody .btn-danger{
    background:transparent;
    color:var(--status-bad);
    border-color:var(--status-bad);
  }
  body.adminBody .divider{
    background:var(--border);
  }
  body.settingsBody .settingsHero__chip{
    display:flex;
    align-items:center;
    gap:14px;
    margin-bottom:12px;
  }
  body.settingsBody .homeTopBar__chipAvatar{
    background:var(--accent-soft);
    color:var(--text);
    border:1px solid var(--accent);
  }
  .tabbar{ display:none; }
  .homeShell,
  .appShell{ padding-top:0; }
  .homeTopBar__nav{display:none;}
  .brandBar,
  .topNav{
    display:none;
  }
  .siteTopbar{
    display:block;
    position:sticky;
    top:0;
    z-index:50;
    width:100%;
    background:var(--topbar-bg);
    border-bottom:1px solid var(--divider);
    backdrop-filter:blur(10px);
  }
  .siteTopbar .topbar__inner{
    max-width:1240px;
    margin:0 auto;
    padding:18px 24px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
  }
  .siteTopbar .brand{
    font-weight:700;
    letter-spacing:0.14em;
    font-size:14px;
  }
  .siteTopbar .topbar__right{
    display:flex;
    align-items:center;
    gap:18px;
  }
  .siteTopbar .navbar{
    display:flex;
    align-items:center;
    gap:8px;
    position:static;
    height:auto;
    width:auto;
    padding:0;
    border:none;
    background:transparent;
    box-shadow:none;
  }
  .siteTopbar .navbar::before{
    content:none;
    display:none;
  }
  .siteTopbar .navbar__link{
    text-decoration:none;
    font-size:13px;
    font-weight:600;
    color:var(--topbar-muted);
    padding:6px 10px;
    border-radius:999px;
    border:1px solid transparent;
    transition:all 0.2s ease;
    display:inline-flex;
    align-items:center;
    gap:6px;
  }
  .siteTopbar .navbar__icon{
    width:16px;
    height:16px;
    flex:0 0 auto;
  }
  .siteTopbar .navbar__link:hover{
    border-color:var(--divider);
    color:var(--topbar-text);
    background:var(--hover);
  }
  .siteTopbar .navbar__link.is-active{
    color:var(--topbar-text);
    background:var(--accent-soft);
    border-color:var(--accent);
  }
  .siteTopbar .status-dot{
    width:10px;
    height:10px;
    border-radius:50%;
    background:var(--status-good);
    box-shadow:0 0 10px var(--status-good-soft);
    animation:siteTopbarBlink 1.4s infinite;
  }
  @keyframes siteTopbarBlink{
    0%,100%{transform:scale(1);opacity:1;}
    50%{transform:scale(0.6);opacity:0.55;}
  }
}

@media (max-width:640px){
  .homeMain{padding:20px 14px 120px;}
  .heroCard__metrics{
    flex-direction:column;
  }
}

@media (max-width: 960px){
  .homeMain{display:block;}
  .heroGrid{grid-template-columns:1fr;}
  .pulseGrid{grid-template-columns:1fr;}
  .pulseGrid__divider{
    width:100%;
    height:1px;
  }
  .gridBottom{grid-template-columns:1fr;}
  .card--recent{grid-column:span 1;}
  .splitRow{grid-template-columns:1fr;gap:6px;}
  .splitRow__delta{text-align:left;}
  .splitCompare{grid-template-columns:1fr;}
}

@media (min-width: 961px){
  .homeMain{align-items:stretch;}
  .heroGrid, .gridBottom{align-self:stretch;}
  .heroGrid .card, .gridBottom .card--recent{height:100%;}
  .pulseGrid{--metric-lap-offset:15px;}
  .speedSection{margin-top:calc(6px + var(--metric-lap-offset));}
}

@media (pointer: coarse){
  .splitCompare{grid-template-columns:1fr;}
}

@media (max-width: 640px){
  .gridBottom{grid-template-columns:1fr;}
  .card--recent{grid-column:span 1;}
  .sessionStats{flex-direction:column;gap:10px;}
}

/* Home layout (scoped) */
.home_body{
  margin:0;
  font-family:"Sora","Space Grotesk",system-ui,sans-serif;
  background:var(--bg);
  color:var(--text);
  display:flex;
  align-items:center;
  justify-content:center;
  height:100vh;
  height:100dvh;
  overflow:hidden;
}
.home_root{
  --radius:12px;
  --gap:12px;
  --pad:16px;
  --navbar-height:72px;
  width:100%;
}
.home_root *,
.home_root *::before,
.home_root *::after{
  box-sizing:border-box;
}
.home_root a{
  color:inherit;
  text-decoration:none;
}
.home_root .phone-frame{
  width:100%;
  max-width:420px;
  height:100vh;
  height:100dvh;
  padding:var(--pad);
}
.home_root .app{
  height:100%;
  background:var(--bg);
  border:1px solid var(--border);
  border-radius:18px;
  padding:calc(var(--pad) + 36px + 8px + env(safe-area-inset-top)) var(--pad) calc(var(--pad) + var(--navbar-height) + env(safe-area-inset-bottom));
  display:flex;
  flex-direction:column;
  gap:var(--gap);
}
.home_root .topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 12px;
  background:var(--surface-2);
  border:1px solid var(--line);
  border-radius:10px;
  height:36px;
}
.home_root .topbar__title{
  font-family:"Space Grotesk","Sora",system-ui,sans-serif;
  font-size:12px;
  letter-spacing:0.12em;
  font-weight:700;
}
.home_root .topbar__statusdot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--status-good);
  box-shadow:0 0 0 3px var(--status-good-soft);
  animation:statusPulse 1.4s ease-in-out infinite;
}
.home_root .home_skater{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  padding:16px 18px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:10px;
  min-height:96px;
  gap:12px;
  width:100%;
  text-align:left;
  cursor:pointer;
  appearance:none;
  color:var(--text);
}
.home_root .home_skater__left{
  display:flex;
  align-items:flex-start;
  gap:14px;
  min-width:0;
  flex:1;
}
.home_root .home_skater__avatar{
  width:56px;
  height:56px;
  border-radius:999px;
  background:var(--avatarBg);
  border:1px solid var(--accent);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:14px;
  font-weight:800;
  letter-spacing:0.06em;
  color:var(--text);
  flex:0 0 auto;
  overflow:hidden;
  margin-top:auto;
  margin-bottom:auto;
}
.home_root .home_skater__avatar img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.home_root .home_skater__text{
  display:flex;
  flex-direction:column;
  gap:4px;
  min-width:0;
  flex:1;
  padding-top:2px;
}
.home_root .home_skater__name{
  font-size:24px;
  font-weight:800;
  color:var(--text);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.home_root .home_skater__meta{
  font-size:16px;
  font-weight:600;
  color:var(--muted);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  margin-top:14px;
}
.home_root .home_skater__status{
  margin-top:6px;
  font-size:12px;
  color:var(--muted);
  font-weight:600;
  letter-spacing:0.01em;
}
.home_root .home_skater__status:empty{
  display:none;
}
@media (max-width: 1023px){
  .home_root .home_skater__status{
    display:none !important;
  }
}
.home_root .home_skater__chevron{
  font-size:19px;
  color:var(--muted);
  line-height:1;
}
.home_root .home_lap,
.home_root .home_split,
.home_root .home_speed{
  position:relative;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--surface);
  padding:18px 18px 18px 22px;
  color:var(--text);
  display:flex;
  align-items:center;
  gap:12px;
  cursor:pointer;
}
.home_root .home_lap__accent,
.home_root .home_split__accent,
.home_root .home_speed__accent{
  position:absolute;
  left:0;
  top:10px;
  bottom:10px;
  width:4px;
  border-radius:3px;
  background:var(--accent);
}
.home_root .home_lap__body,
.home_root .home_split__body,
.home_root .home_speed__body{
  width:100%;
}
.home_root .home_lap__label,
.home_root .home_split__label,
.home_root .home_speed__label{
  font-size:14px;
  letter-spacing:0.2em;
  font-weight:700;
  color:var(--muted);
  margin-bottom:10px;
}
.home_root .home_lap{
  height:172px;
}
@media (max-width: 1023px){
  .home_root{
    --home-stat-card-min-h:120px;
  }
  .home_root .home_statcard{
    box-sizing:border-box;
    min-height:var(--home-stat-card-min-h);
    height:auto;
  }
  .home_root .home_statcard .home_lap__body,
  .home_root .home_statcard .home_split__body,
  .home_root .home_statcard .home_speed__body{
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    height:100%;
  }
  .home_root .home_skater{
    min-height:80px;
    padding:12px 16px;
  }
  .home_root .home_split__col{
    gap:6px;
  }
  .home_root .home_split__value{
    order:1;
  }
  .home_root .home_split__side{
    order:2;
  }
  .home_root .home_split__delta{
    order:3;
  }
}
.home_root .home_lap__row{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
}
.home_root .home_lap__body{
  display:flex;
  flex-direction:column;
  justify-content:center;
  height:100%;
}
.home_root .home_lap__value{
  font-size:34px;
  font-weight:700;
  letter-spacing:-0.02em;
  white-space:nowrap;
}
.home_root .home_lap__value-number{
  font-size:40px;
  font-weight:800;
}
.home_root .home_lap__value-unit{
  font-size:20px;
  font-weight:600;
  color:var(--muted);
  margin-left:6px;
}
.home_root .home_lap__value-number[data-fastlap-pending] + .home_lap__value-unit,
.home_root .home_lap__value-number[data-empty="1"] + .home_lap__value-unit{
  display:none;
}
.home_root .home_lap__lapnum{
  font-size:20px;
  color:var(--muted);
  font-weight:600;
  white-space:nowrap;
}
.home_root .home_lap__pb{
  margin-top:8px;
  font-size:12px;
  color:var(--muted);
}
.home_root .home_split{
  height:136px;
}
.home_root .home_split__body{
  display:flex;
  flex-direction:column;
  justify-content:center;
  height:100%;
}
.home_root .home_split__grid{
  display:grid;
  grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);
  gap:12px;
  align-items:baseline;
}
.home_root .home_split__col{
  display:flex;
  flex-direction:column;
  gap:8px;
  min-width:0;
}
.home_root .home_split__side{
  font-size:12px;
  font-weight:700;
  letter-spacing:0.08em;
  color:var(--muted);
}
.home_root .home_split__value{
  display:flex;
  align-items:baseline;
  gap:6px;
  flex-wrap:nowrap;
  min-width:0;
  white-space:nowrap;
}
.home_root .home_split__time{
  display:flex;
  align-items:baseline;
  font-size:30px;
  font-weight:800;
  letter-spacing:-0.01em;
  gap:0;
  min-width:0;
  white-space:nowrap;
}
.home_root .home_split__time-unit{
  font-size:inherit;
}
.home_root .home_split__time-number[data-empty="1"] + .home_split__time-unit{
  display:none;
}
.home_root .home_split__delta{
  font-size:16px;
  font-weight:600;
  color:var(--muted);
  white-space:nowrap;
  flex-shrink:0;
}
.home_root .home_speed{
  height:116px;
}
.home_root .home_speed__body{
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.home_root .home_speed__row{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
}
.home_root .home_speed__value{
  font-size:36px;
  font-weight:800;
}
.home_root .home_speed__unit{
  font-size:18px;
  font-weight:600;
  color:var(--muted);
}
.home_root .home_speed__value-number[data-top-speed-pending] + .home_speed__unit,
.home_root .home_speed__value-number[data-empty="1"] + .home_speed__unit{
  display:none;
}
.home_root .home_speed__section{
  font-size:18px;
  color:var(--muted);
  font-weight:600;
}
.home_root .cta{
  height:72px;
  display:flex;
  flex-direction:column;
  gap:10px;
  margin:0;
}
.home_root .btn{
  border-radius:10px;
  border:1px solid var(--line);
  background:var(--surface);
  color:var(--text);
  font-size:20px;
  font-weight:700;
  padding:8px 12px;
  cursor:pointer;
  transition:transform 120ms ease,opacity 120ms ease,border-color 120ms ease;
  text-align:center;
  width:100%;
}
.home_root .btn.primary{
  background:var(--accent);
  border-color:transparent;
  color:var(--accent-contrast);
  font-weight:800;
}
@keyframes statusPulse{
  0%{opacity:0.35;transform:scale(1);}
  50%{opacity:1;transform:scale(1.12);}
  100%{opacity:0.35;transform:scale(1);}
}
.home_root .tap:hover,
.home_root .navbar__item:hover,
.home_root .btn:hover{
  border-color:var(--border-strong);
}
.home_root a:focus-visible,
.home_root button:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
}
.home_root .is-disabled{
  pointer-events:none;
  opacity:0.6;
}

.home_root .home_layout{
  width:100%;
}
.home_root .home_desktop{
  display:none;
}

@media (min-width:900px){
  .home_body{
    overflow:auto;
    align-items:flex-start;
    justify-content:center;
  }
  .home_root .home_layout{
    display:flex;
    justify-content:center;
    max-width:1200px;
    margin:0 auto;
    padding:24px;
    min-height:100dvh;
    width:100%;
    align-items:flex-start;
  }
  .home_root .phone-frame{
    height:100%;
    max-width:420px;
  }
  .home_root .app{
    height:100%;
  }
}
@media (max-width:480px){
  .home_body{
    background:var(--bg);
  }
  .home_root .phone-frame{
    padding:0;
    max-width:none;
  }
  .home_root .app{
    border-radius:0;
  }
}

@media (min-width:1024px){
  .home_body{
    display:block;
    height:auto;
    min-height:100vh;
    overflow:auto;
    background:
      radial-gradient(900px 600px at 8% -10%, var(--bg-accent-1), transparent 60%),
      radial-gradient(700px 520px at 92% 12%, var(--bg-accent-2), transparent 55%),
      linear-gradient(180deg, var(--bg), var(--bg-2));
    color:var(--text);
  }
  .home_root{
    width:100%;
  }
  .home_root .home_layout{
    display:block;
    max-width:none;
    margin:0;
    padding:0;
    min-height:auto;
  }
  .home_root .home_layout .homeShell,
  .home_root .home_layout .appShell{
    display:none;
  }
  .home_root .phone-frame{
    display:none;
  }
  .home_root .home_desktop{
    display:block;
    width:100%;
    --panel:var(--surface);
    --panel-2:var(--surface-2);
    --shadow:var(--shadow-lg);
    --radius:16px;
    --gap:16px;
    color:var(--text);
  }
.home_root .home_desktop .page{
  min-height:100vh;
}
  .home_root .home_desktop .container{
    max-width:1240px;
    margin:0 auto;
    padding:28px 24px 48px;
  }
  .home_root .home_desktop .layout{
    display:grid;
    grid-template-columns:1.5fr 1fr;
    grid-template-rows:auto auto;
    grid-template-areas:
      "left right"
      "cta .";
    gap:24px;
    align-items:stretch;
  }
  .home_root .home_desktop .left{
    grid-area:left;
    display:flex;
    flex-direction:column;
    gap:20px;
  }
  .home_root .home_desktop .card{
    background:linear-gradient(180deg, var(--panel), var(--panel-2));
    border:1px solid var(--border);
    border-radius:var(--radius);
    padding:18px;
    box-shadow:var(--shadow);
    transition:transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  }
  .home_root .home_desktop .card:hover{
    border-color:var(--border-strong);
    box-shadow:0 18px 40px rgba(0,0,0,0.4);
  }
  .home_root .home_desktop .label{
    font-size:11px;
    letter-spacing:0.22em;
    text-transform:uppercase;
    color:var(--muted);
  }
  .home_root .home_desktop .meta{
    color:var(--muted);
    font-size:14px;
    margin-top:6px;
  }
  .home_root .home_desktop .muted{
    color:var(--muted);
  }
  .home_root .home_desktop .home_skater{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    height:auto;
  }
  .home_root .home_desktop .home_skater__left{
    display:flex;
    align-items:center;
    gap:16px;
  }
  .home_root .home_desktop .avatar{
    width:54px;
    height:54px;
    flex:0 0 54px;
    aspect-ratio:1 / 1;
    border-radius:50%;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    background:var(--accent-soft);
    color:var(--text);
    font-weight:700;
    letter-spacing:0.08em;
    border:1px solid var(--accent);
    overflow:hidden;
  }
  .home_root .home_desktop .avatar img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
  }
  .home_root .home_desktop .skater-name{
    font-size:28px;
    font-weight:700;
    margin-top:4px;
  }
  .home_root .home_desktop .link-button{
    background:transparent;
    border:1px solid var(--border);
    color:var(--text);
    padding:8px 12px;
    border-radius:999px;
    font-size:12px;
    font-weight:600;
    cursor:pointer;
    transition:all 0.2s ease;
  }
  .home_root .home_desktop .link-button:hover{
    border-color:var(--accent);
    color:var(--accent-contrast);
  }
  .home_root .home_desktop .stats-grid{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:var(--gap);
  }
  .home_root .home_desktop .stat-main{
    display:flex;
    align-items:baseline;
    gap:10px;
    margin-top:12px;
  }
  .home_root .home_desktop .home_lap .stat-main,
  .home_root .home_desktop .home_metric .stat-main{
    min-height:48px;
  }
  .home_root .home_desktop .stat-value{
    font-size:34px;
    font-weight:700;
  }
  .home_root .home_desktop .stat-sub{
    font-size:14px;
    color:var(--muted);
    font-weight:600;
  }
  .home_root .home_desktop .stat-foot--lap{
    margin-top:8px;
  }
  .home_root .home_desktop .stat-unit{
    font-size:16px;
    color:var(--muted);
    font-weight:600;
  }
  .home_root .home_desktop .stat-foot{
    margin-top:12px;
    color:var(--muted);
    font-size:13px;
  }
  .home_root .home_desktop .home_lap{
    display:block;
    height:auto;
    border-color:var(--accent);
    box-shadow:0 14px 30px var(--accent-glow);
    background:linear-gradient(180deg, var(--accent-soft-2), var(--surface));
  }
  .home_root .home_desktop .home_split,
  .home_root .home_desktop .home_speed{
    display:block;
    height:auto;
  }
  .home_root .home_desktop .home_speed{
    display:flex;
    flex-direction:column;
    align-items:stretch;
  }
  .home_root .home_desktop .home_speed .stat-main{
    align-items:center;
    justify-content:flex-start;
    margin-top:0;
    flex:1;
  }
  .home_root .home_desktop .home_speed .stat-value,
  .home_root .home_desktop .home_speed .stat-unit{
    line-height:1;
  }
  .home_root .home_desktop .home_lap .stat-value{
    font-size:40px;
  }
  .home_root .home_desktop .home_speed .stat-value{
    font-size:40px;
  }
  .home_root .home_desktop .home_metric .stat-value{
    font-size:40px;
  }
  .home_root .home_desktop .home_split .split-grid{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:12px;
    margin-top:12px;
  }
  .home_root .home_desktop .split{
    padding:10px 12px;
    border-radius:12px;
    border:1px solid var(--border);
    background:rgba(255,255,255,0.02);
    display:flex;
    flex-direction:column;
    gap:6px;
  }
  .home_root .home_desktop .split-label{
    font-size:12px;
    color:var(--muted);
    text-transform:uppercase;
    letter-spacing:0.18em;
  }
  .home_root .home_desktop .split-value{
    font-size:22px;
    font-weight:700;
    display:flex;
    align-items:baseline;
    gap:6px;
  }
  .home_root .home_desktop .split-unit{
    font-size:16px;
    color:var(--muted);
    font-weight:600;
  }
  .home_root .home_desktop .split-delta{
    font-size:12px;
    color:var(--muted);
    font-weight:600;
  }
  .home_root .home_desktop .cta-row{
    grid-area:cta;
    display:flex;
    align-items:center;
    gap:18px;
  }
  .home_root .home_desktop .btn-primary{
    background:var(--accent);
    color:var(--accent-contrast);
    border:none;
    padding:12px 20px;
    font-size:14px;
    font-weight:700;
    border-radius:999px;
    cursor:pointer;
    transition:background 0.2s ease;
    text-decoration:none;
    display:inline-flex;
    align-items:center;
    justify-content:center;
  }
  .home_root .home_desktop .btn-primary:hover{
    background:var(--accent-strong);
  }
  .home_root .home_desktop .text-link{
    font-size:13px;
    color:var(--muted);
    text-decoration:none;
    border-bottom:1px solid transparent;
  }
  .home_root .home_desktop .text-link:hover{
    color:var(--text);
    border-color:rgba(255,255,255,0.4);
  }
  .home_root .home_desktop .last_sessions{
    grid-area:right;
    display:flex;
    flex-direction:column;
    gap:16px;
    position:relative;
    height:100%;
  }
  .home_root .home_desktop .last_sessions__header{
    display:flex;
    align-items:baseline;
    justify-content:space-between;
  }
  .home_root .home_desktop .last_sessions__list{
    display:flex;
    flex-direction:column;
    gap:10px;
  }
  .home_root .home_desktop .last_sessions__row{
    border:1px solid var(--border);
    background:rgba(255,255,255,0.02);
    color:inherit;
    border-radius:14px;
    padding:12px 14px;
    display:grid;
    grid-template-columns:minmax(70px, 0.65fr) minmax(150px, 1.2fr) minmax(70px, 0.6fr) auto 16px;
    gap:12px;
    align-items:center;
    cursor:pointer;
    transition:all 0.2s ease;
    text-decoration:none;
    font-size:12px;
  }
  .home_root .home_desktop .last_sessions__row:hover{
    border-color:var(--accent);
    background:var(--accent-soft-2);
    transform:translateY(-1px);
  }
  .home_root .home_desktop .row-date{
    font-weight:600;
  }
  .home_root .home_desktop .row-meta{
    font-size:12px;
    color:var(--muted);
  }
  .home_root .home_desktop .row-best{
    font-weight:700;
    justify-self:end;
    white-space:nowrap;
  }
  .home_root .home_desktop .row-speed{
    font-weight:600;
    color:var(--muted);
    justify-self:end;
    white-space:nowrap;
  }
  .home_root .home_desktop .row-chevron{
    color:var(--muted);
    font-size:18px;
    justify-self:end;
  }
}