/* ============================================================
   freshlegs.css — unified stylesheet
   Covers: index.html (landing), app.html (dashboard), callback/loading screens
   ============================================================ */

/* ── TOKENS ── */
:root {
  --bg:      #0d0f14;
  --surface: #13161e;
  --surface2:#1b1f2b;
  --border:  #252a38;
  --text:    #e8ecf4;
  --muted:   #6b7490;
  --pink:    #ff2d78;   /* primary accent — also aliased as --accent below */
  --cyan:    #00b8d4;   /* secondary accent — also aliased as --accent2 below */
  --accent:  #ff2d78;   /* alias used by app.html */
  --accent2: #00b8d4;   /* alias used by app.html */
  --ctl:     #00b8d4;
  --atl:     #ff2d78;
  --green:   #2ecc71;
  --amber:   #f39c12;
  --red:     #e74c3c;
}

/* ── RESET ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

/* ── BASE ── */
body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Barlow', sans-serif;
  font-weight: 300;
  overflow-x: hidden;
  min-height: 100vh;
}

/* ── NOISE OVERLAY (landing page) ── */
body.landing::before {
  content: '';
  position: fixed; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
  pointer-events: none; z-index: 0; opacity: 0.4;
}

/* ── KO-FI WIDGET ── */
.floatingchat-container {
  width: auto !important;
  max-width: 100vw !important;
}
.floatingchat-container iframe {
  max-width: 100% !important;
}

/* ── UTILITY ── */
.hidden { display: none !important; }

/* ============================================================
   SHARED COMPONENTS
   (used on both landing and app pages)
   ============================================================ */

/* ── LOGO ── */
/* .logo used by app header; .nav-logo used by landing nav */
.logo,
.nav-logo {
  display: flex; align-items: center; gap: 10px;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700; font-size: 20px;
  letter-spacing: 0.08em; text-transform: uppercase;
  text-decoration: none; color: var(--text);
}
.logo img,
.nav-logo img { height: 28px; width: auto; }
.nav-logo { gap: 14px; font-size: 20px; }
.nav-logo img { height: 32px; }
.logo span,
.nav-logo .accent { color: var(--pink); }

/* ── BUTTONS ── */
.btn-strava {
  display: inline-flex; align-items: center; gap: 10px;
  background: #FC4C02;
  color: #fff; border: none; border-radius: 3px;
  padding: 14px 28px;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700; font-size: 15px;
  letter-spacing: 0.08em; text-transform: uppercase;
  cursor: pointer; text-decoration: none;
  transition: opacity 0.2s, transform 0.2s;
}
.btn-strava:hover { opacity: 0.9; transform: translateY(-2px); }
.btn-strava svg { width: 20px; height: 20px; fill: #fff; flex-shrink: 0; }

.btn-ghost {
  display: inline-flex; align-items: center; gap: 8px;
  background: transparent; color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 3px; padding: 14px 24px;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 500; font-size: 14px;
  letter-spacing: 0.08em; text-transform: uppercase;
  cursor: pointer; text-decoration: none;
  transition: all 0.2s;
}
.btn-ghost:hover { border-color: var(--pink); color: var(--text); }

/* Small button variants used in app header */
.btn-sm {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 600; font-size: 12px;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 7px 16px; border-radius: 3px; cursor: pointer;
  border: none; transition: opacity 0.2s;
}
.btn-primary { background: var(--pink); color: #fff; }
.btn-primary:hover { opacity: 0.85; }

/* Ko-fi */
.kofi-btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: #FF5E5B; color: #fff; border: none; border-radius: 3px;
  padding: 9px 18px;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 600; font-size: 12px;
  letter-spacing: 0.08em; text-transform: uppercase;
  cursor: pointer; text-decoration: none; transition: opacity 0.2s;
}
.kofi-btn:hover { opacity: 0.85; }

/* ── TOOLTIP — unified: works on .tip and on [data-tip] ── */
.tip,
[data-tip] {
  position: relative;
  cursor: help;
}
.tip { border-bottom: 1px dotted var(--muted); }

.tip::after,
[data-tip]::after {
  content: attr(data-tip);
  position: absolute; bottom: calc(100% + 8px); left: 50%;
  transform: translateX(-50%);
  background: var(--surface2); border: 1px solid var(--border);
  color: var(--text); font-size: 11px; font-weight: 300;
  font-family: 'Barlow', sans-serif; letter-spacing: 0;
  text-transform: none; line-height: 1.5;
  padding: 8px 12px; border-radius: 4px;
  white-space: nowrap; pointer-events: none;
  opacity: 0; transition: opacity 0.15s;
  z-index: 10;
  box-shadow: 0 4px 16px rgba(0,0,0,0.4);
}
.tip::before,
[data-tip]::before {
  content: '';
  position: absolute; bottom: calc(100% + 2px); left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--border);
  opacity: 0; transition: opacity 0.15s;
  pointer-events: none; z-index: 10;
}
.tip:hover::after,    .tip:hover::before,
[data-tip]:hover::after, [data-tip]:hover::before { opacity: 1; }

/* ── INFO TIP BADGE ── */
.info-tip {
  display: inline-block; width: 14px; height: 14px; border-radius: 50%;
  border: 1px solid var(--border); color: var(--muted);
  font-size: 9px; text-align: center; line-height: 13px; cursor: help;
  font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
  margin-left: 4px; vertical-align: middle;
}

/* ── PANELS ── */
.panel {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 6px; padding: 20px 24px;
}
.panel-header {
  display: flex; align-items: baseline; gap: 12px;
  margin-bottom: 16px; flex-wrap: wrap;
}
.panel-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 600; font-size: 14px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--text);
}
.panel-desc { font-size: 11px; color: var(--muted); font-family: 'Barlow Condensed', sans-serif; letter-spacing: 0.04em; }
.legend { display: flex; gap: 16px; margin-left: auto; flex-wrap: wrap; }
.legend-item { display: flex; align-items: center; gap: 6px; font-size: 11px; font-family: 'Barlow Condensed', sans-serif; letter-spacing: 0.06em; color: var(--muted); }
.legend-dot  { width: 8px; height: 8px; border-radius: 50%; }
.chart-wrap  { position: relative; }

/* ── SECTION TYPOGRAPHY ── */
.section-label {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.25em; text-transform: uppercase;
  color: var(--pink); margin-bottom: 16px;
}
.section-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800; font-size: clamp(36px, 5vw, 56px);
  line-height: 0.95; text-transform: uppercase;
  margin-bottom: 56px;
}
.section-title em { font-style: normal; color: var(--cyan); }

/* ── FOOTER ── */
footer {
  background: var(--surface);
  border-top: 1px solid var(--border);
  padding: 28px 48px;
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 16px;
}
.footer-logo {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700; font-size: 15px;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--muted);
}
.footer-logo span { color: var(--pink); }
.footer-links { display: flex; gap: 24px; }
.footer-link {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--muted); text-decoration: none; transition: color 0.2s;
}
.footer-link:hover { color: var(--text); }
.footer-copy { font-size: 11px; color: var(--muted); }

/* ── SPINNER — shared animation ── */
@keyframes spin { to { transform: rotate(360deg); } }

/* ── MODAL BACKDROP PATTERN ── */
.modal-backdrop {
  display: none; position: fixed; inset: 0;
  background: rgba(13,15,20,0.92); z-index: 100;
  align-items: center; justify-content: center;
}
.modal-backdrop.active { display: flex; }
.modal-panel {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 8px; padding: 32px;
  max-width: 380px; width: 90%;
  display: flex; flex-direction: column; gap: 16px;
}
.modal-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 18px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
}
.modal-body { font-size: 13px; color: var(--muted); line-height: 1.7; }
.modal-actions { display: flex; gap: 10px; justify-content: flex-end; }

.btn-secondary {
  background: transparent; color: var(--muted);
  border: 1px solid var(--border);
  padding: 8px 16px; border-radius: 4px;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 13px; letter-spacing: 0.04em;
  text-transform: uppercase; cursor: pointer;
}

/* ============================================================
   LANDING PAGE  (index.html)
   ============================================================ */

/* ── NAV ── */
nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 48px;
  background: linear-gradient(to bottom, rgba(13,15,20,0.95) 0%, transparent 100%);
  backdrop-filter: blur(2px);
}
.nav-cta {
  background: var(--pink);
  color: #fff; border: none;
  padding: 10px 24px; border-radius: 3px;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700; font-size: 13px;
  letter-spacing: 0.1em; text-transform: uppercase;
  cursor: pointer; text-decoration: none;
  transition: opacity 0.2s, transform 0.2s;
  display: inline-block;
}
.nav-cta:hover { opacity: 0.85; transform: translateY(-1px); }

/* ── HERO ── */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center;
  padding: 120px 32px 80px;
  overflow: hidden;
}
.hero-waves {
  position: absolute; inset: 0;
  overflow: hidden; pointer-events: none;
}
.hero-waves svg {
  position: absolute;
  width: 120%; left: -10%;
  opacity: 0.07;
  animation: waveDrift 20s ease-in-out infinite alternate;
}
.hero-waves svg:nth-child(2) {
  top: 30%; opacity: 0.05;
  animation-duration: 28s; animation-direction: alternate-reverse;
}
@keyframes waveDrift {
  from { transform: translateX(0) scaleY(1); }
  to   { transform: translateX(4%) scaleY(1.08); }
}
/* grid lines */
.hero::after {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(37,42,56,0.4) 1px, transparent 1px),
    linear-gradient(90deg, rgba(37,42,56,0.4) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 50%, black 0%, transparent 100%);
  pointer-events: none;
}
.hero-content { position: relative; z-index: 2; max-width: 860px; }

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

.hero-eyebrow {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.25em; text-transform: uppercase;
  color: var(--pink); margin-bottom: 24px;
  opacity: 0; animation: fadeUp 0.6s 0.2s forwards;
}
.hero-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 900; font-size: clamp(56px, 10vw, 120px);
  line-height: 0.9; letter-spacing: -0.02em;
  text-transform: uppercase;
  opacity: 0; animation: fadeUp 0.7s 0.35s forwards;
}
.hero-title .line2 { color: var(--pink); }
.hero-sub {
  margin-top: 28px;
  font-size: clamp(15px, 2vw, 19px);
  font-weight: 300; color: var(--muted);
  line-height: 1.6; max-width: 560px; margin-left: auto; margin-right: auto;
  opacity: 0; animation: fadeUp 0.7s 0.5s forwards;
}
.hero-actions {
  margin-top: 44px; display: flex; gap: 16px;
  justify-content: center; flex-wrap: wrap;
  opacity: 0; animation: fadeUp 0.7s 0.65s forwards;
}
.hero-stat-row {
  margin-top: 60px; display: flex; gap: 48px;
  justify-content: center; flex-wrap: wrap;
  opacity: 0; animation: fadeUp 0.7s 0.8s forwards;
}
.hero-stat { text-align: center; }
.hero-stat-num {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 36px; font-weight: 700; line-height: 1; color: var(--text);
}
.hero-stat-num span { color: var(--pink); }
.hero-stat-label {
  font-size: 11px; color: var(--muted); margin-top: 4px;
  letter-spacing: 0.08em; font-family: 'Barlow Condensed', sans-serif;
  text-transform: uppercase;
}

/* ── SCROLL INDICATOR ── */
.scroll-hint {
  position: absolute; bottom: 32px; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 10px; letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--muted); z-index: 2;
  animation: fadeUp 1s 1.2s both;
}
.scroll-hint-line {
  width: 1px; height: 40px;
  background: linear-gradient(to bottom, var(--pink), transparent);
  animation: scrollPulse 2s ease-in-out infinite;
}
@keyframes scrollPulse {
  0%, 100% { transform: scaleY(1); opacity: 0.6; }
  50%       { transform: scaleY(1.2); opacity: 1; }
}

/* ── METRICS STRIP ── */
.metrics-strip {
  background: var(--surface);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 0 48px;
  display: flex; align-items: stretch; justify-content: center; flex-wrap: wrap;
}
.metric-pill {
  display: flex; align-items: center; gap: 14px;
  padding: 24px 32px; border-right: 1px solid var(--border);
  flex: 1 1 200px;
  position: relative; cursor: default;
}
.metric-pill:last-child { border-right: none; }
.metric-icon {
  width: 36px; height: 36px; border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; flex-shrink: 0;
}
.metric-icon.cyan  { background: rgba(0,184,212,0.12);  color: var(--cyan); }
.metric-icon.pink  { background: rgba(255,45,120,0.12); color: var(--pink); }
.metric-icon.green { background: rgba(46,204,113,0.12); color: var(--green); }
.metric-icon.amber { background: rgba(243,156,18,0.12);  color: var(--amber); }
.metric-text-head {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 13px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--text);
}
.metric-text-sub { font-size: 11px; color: var(--muted); margin-top: 1px; }

/* ── FEATURES ── */
.features { padding: 100px 48px; max-width: 1100px; margin: 0 auto; }
.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2px;
}
.feature-card {
  background: var(--surface);
  padding: 36px 32px;
  position: relative; overflow: hidden;
  transition: background 0.2s;
}
.feature-card:hover { background: var(--surface2); }
.feature-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(to right, var(--pink), transparent);
  opacity: 0; transition: opacity 0.3s;
}
.feature-card:hover::before { opacity: 1; }
.feature-num {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.15em; color: var(--muted); margin-bottom: 20px;
}
.feature-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 22px; font-weight: 700;
  letter-spacing: 0.04em; text-transform: uppercase;
  margin-bottom: 10px; color: var(--text);
}
.feature-desc { font-size: 13px; color: var(--muted); line-height: 1.7; }
.feature-metric {
  margin-top: 20px;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 28px; font-weight: 700; color: var(--pink);
}
.feature-metric-label {
  font-size: 10px; color: var(--muted); letter-spacing: 0.08em;
  text-transform: uppercase; margin-top: 2px;
  font-family: 'Barlow Condensed', sans-serif;
}

/* ── PMC PREVIEW (landing) ── */
.preview-section {
  background: var(--surface);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 80px 48px;
  position: relative; overflow: hidden;
}
.preview-inner {
  max-width: 1100px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1.4fr; gap: 60px; align-items: center;
}
@media (max-width: 800px) { .preview-inner { grid-template-columns: 1fr; } }
.preview-fake-chart {
  background: var(--bg); border: 1px solid var(--border);
  border-radius: 6px; padding: 24px; position: relative;
}
.pfc-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 20px;
  display: flex; justify-content: space-between; align-items: center;
}
.pfc-legend { display: flex; gap: 12px; }
.pfc-dot { width: 8px; height: 8px; border-radius: 50%; }
.pfc-svg { width: 100%; height: 160px; }
.preview-kpis { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 20px; }
.preview-kpi {
  background: var(--surface2); border: 1px solid var(--border);
  border-radius: 4px; padding: 10px 14px;
}
.preview-kpi-val {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 24px; font-weight: 700; line-height: 1;
}
.preview-kpi-lbl {
  font-size: 10px; color: var(--muted);
  font-family: 'Barlow Condensed', sans-serif;
  letter-spacing: 0.08em; text-transform: uppercase;
}

/* ── HOW IT WORKS ── */
.how { padding: 100px 48px; max-width: 1100px; margin: 0 auto; }
.steps {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px;
  margin-top: 56px;
}
@media (max-width: 700px) { .steps { grid-template-columns: 1fr; } }
.step { padding: 40px 32px; background: var(--surface); position: relative; }
.step-num-big {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 80px; font-weight: 900; line-height: 1;
  color: var(--border); position: absolute;
  top: 16px; right: 20px; letter-spacing: -0.04em; pointer-events: none;
}
.step-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700; font-size: 18px;
  letter-spacing: 0.06em; text-transform: uppercase;
  margin-bottom: 10px; color: var(--text);
  position: relative; z-index: 1;
}
.step-desc { font-size: 13px; color: var(--muted); line-height: 1.7; position: relative; z-index: 1; }

/* ── PRIVACY BAR ── */
.privacy-bar {
  background: rgba(0,184,212,0.06);
  border-top: 1px solid rgba(0,184,212,0.15);
  border-bottom: 1px solid rgba(0,184,212,0.15);
  padding: 20px 48px;
  display: flex; align-items: center; justify-content: center;
  gap: 32px; flex-wrap: wrap;
}
.privacy-item {
  display: flex; align-items: center; gap: 8px;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 12px; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--cyan);
}
.privacy-item::before { content: '✓'; font-weight: 700; }

/* ── CTA BLOCK ── */
.cta-block { padding: 120px 48px; text-align: center; position: relative; overflow: hidden; }
.cta-block::before {
  content: '';
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 600px; height: 600px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,45,120,0.06) 0%, transparent 70%);
  pointer-events: none;
}
.cta-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 900; font-size: clamp(48px, 8vw, 96px);
  line-height: 0.9; text-transform: uppercase;
  margin-bottom: 20px; position: relative; z-index: 1;
}
.cta-title span { color: var(--pink); }
.cta-sub { font-size: 15px; color: var(--muted); margin-bottom: 40px; position: relative; z-index: 1; }
.cta-actions { position: relative; z-index: 1; display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }

/* ============================================================
   APP DASHBOARD  (app.html)
   ============================================================ */

/* ── APP HEADER ── */
header {
  background: var(--bg);   /* was var(--surface) — matches logo PNG background */
  border-bottom: 1px solid var(--border);
  padding: 16px 32px;
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  position: sticky; top: 0; z-index: 40;
}
.header-athlete {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted);
}
.header-athlete strong { color: var(--text); font-weight: 600; }
.header-right { margin-left: auto; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

/* ── STATUS BAR ── */
#statusBar {
  font-size: 12px; color: var(--muted);
  padding: 8px 32px;
  border-bottom: 1px solid var(--border);
  min-height: 32px;
  font-family: 'Barlow Condensed', sans-serif;
  letter-spacing: 0.05em;
  display: flex; align-items: center; gap: 10px;
}
#statusBar.error   { color: var(--red); }
#statusBar.ok      { color: var(--green); }
#statusBar.loading { color: var(--cyan); }

.status-spinner {
  width: 12px; height: 12px;
  border: 1.5px solid rgba(0,184,212,0.2);
  border-top-color: var(--cyan);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  flex-shrink: 0;
}

/* ── PROGRESS BAR ── */
#progressWrap { height: 2px; background: var(--border); display: none; }
#progressBar {
  height: 100%; width: 0%;
  background: linear-gradient(to right, var(--cyan), var(--pink));
  transition: width 0.3s ease;
}

/* ── MAIN LAYOUT ── */
main { padding: 24px 32px; display: flex; flex-direction: column; gap: 20px; }

/* ── KPIs ── */
.kpi-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.kpi {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 6px; padding: 16px 20px;
  display: flex; flex-direction: column; gap: 4px;
  transition: border-color 0.2s;
}
.kpi:hover { border-color: rgba(255,45,120,0.3); }
.kpi-label {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted);
}
.kpi-value {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 36px; font-weight: 600; line-height: 1; color: var(--text);
}
.kpi-value.positive { color: var(--green); }
.kpi-value.negative { color: var(--red); }
.kpi-value.accent   { color: var(--pink); }
.kpi-value.accent2  { color: var(--cyan); }
.kpi-sub { font-size: 11px; color: var(--muted); margin-top: 2px; }

/* ── RISK BADGE ── */
.risk-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 3px;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 600; font-size: 12px; letter-spacing: 0.08em;
  text-transform: uppercase; margin-top: 4px; width: fit-content;
}
.risk-badge.low    { background: rgba(46,204,113,0.15);  color: var(--green); border: 1px solid rgba(46,204,113,0.3); }
.risk-badge.medium { background: rgba(243,156,18,0.15);  color: var(--amber); border: 1px solid rgba(243,156,18,0.3); }
.risk-badge.high   { background: rgba(231,76,60,0.15);   color: var(--red);   border: 1px solid rgba(231,76,60,0.3); }
.risk-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }

/* ── TWO COLUMN ── */
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 860px) { .two-col { grid-template-columns: 1fr; } }

/* ── ACWR GAUGE ── */
.acwr-gauge-wrap { display: flex; flex-direction: column; align-items: center; padding: 12px 0 0; }
.acwr-number { font-family: 'Barlow Condensed', sans-serif; font-size: 64px; font-weight: 700; line-height: 1; margin-top: 8px; }
.acwr-label  { font-size: 11px; color: var(--muted); margin-top: 4px; font-family: 'Barlow Condensed', sans-serif; letter-spacing: 0.06em; }
.acwr-scale  { width: 100%; margin-top: 20px; display: flex; flex-direction: column; gap: 8px; }
.acwr-scale-bar {
  height: 10px; border-radius: 5px;
  background: linear-gradient(to right, #3498db 0%, #2ecc71 25%, #2ecc71 55%, #f39c12 70%, #e74c3c 85%, #e74c3c 100%);
  position: relative;
}
.acwr-marker {
  position: absolute; top: -4px; width: 18px; height: 18px;
  background: #fff; border-radius: 50%; border: 3px solid var(--bg);
  transform: translateX(-50%);
  transition: left 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 0 8px rgba(255,255,255,0.3);
}
.acwr-scale-labels {
  display: flex; justify-content: space-between;
  font-size: 10px; color: var(--muted);
  font-family: 'Barlow Condensed', sans-serif; letter-spacing: 0.04em;
}

/* ── RAMP ── */
.ramp-item { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--border); }
.ramp-item:last-child { border-bottom: none; }
.ramp-week { font-family: 'Barlow Condensed', sans-serif; font-size: 13px; letter-spacing: 0.04em; }
.ramp-val  { font-family: 'Barlow Condensed', sans-serif; font-size: 13px; font-weight: 500; }
.ramp-delta { font-size: 11px; font-weight: 600; padding: 2px 7px; border-radius: 3px; font-family: 'Barlow Condensed', sans-serif; letter-spacing: 0.04em; }
.ramp-up   { color: var(--red);   background: rgba(231,76,60,0.12); }
.ramp-down { color: var(--green); background: rgba(46,204,113,0.12); }
.ramp-flat { color: var(--muted); background: var(--surface2); }

/* ── SETTINGS BAR ── */
.settings-bar {
  background: var(--surface2); border: 1px solid var(--border);
  border-radius: 6px; padding: 14px 20px;
  display: flex; align-items: center; gap: 24px; flex-wrap: wrap;
}
.settings-label {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted);
}
.settings-field { display: flex; align-items: center; gap: 8px; }
.settings-field input {
  background: var(--bg); border: 1px solid var(--border);
  color: var(--text); border-radius: 3px; padding: 5px 10px;
  font-family: 'Barlow Condensed', sans-serif; font-size: 14px; width: 70px;
  text-align: center;
}
.settings-field input:focus { outline: none; border-color: var(--pink); }
.settings-note { font-size: 11px; color: var(--muted); font-family: 'Barlow Condensed', sans-serif; }

/* ── ACTIVITY TABLE ── */
.activity-table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
thead th {
  font-family: 'Barlow Condensed', sans-serif; font-size: 10px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted);
  padding: 8px 12px; text-align: left; border-bottom: 1px solid var(--border);
}
tbody tr { border-bottom: 1px solid var(--border); transition: background 0.15s; }
tbody tr:hover { background: var(--surface2); }
tbody td { padding: 10px 12px; color: var(--text); }
.sport-tag {
  display: inline-block; font-family: 'Barlow Condensed', sans-serif;
  font-size: 10px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 2px 7px; border-radius: 3px;
  background: var(--surface2); color: var(--muted); border: 1px solid var(--border);
}
.sport-tag.ride { color: var(--pink);  border-color: rgba(255,45,120,0.3);  background: rgba(255,45,120,0.08); }
.sport-tag.run  { color: var(--cyan);  border-color: rgba(0,184,212,0.3);   background: rgba(0,184,212,0.08); }
.tl-bar-wrap { display: flex; align-items: center; gap: 8px; }
.tl-bar { height: 6px; border-radius: 3px; background: var(--pink); }

/* ── AUTH SCREEN ── */
#authScreen {
  min-height: calc(100vh - 60px);
  display: flex; align-items: center; justify-content: center; padding: 40px 20px;
}
.auth-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 8px; padding: 48px 40px;
  max-width: 480px; width: 100%;
  text-align: center; display: flex; flex-direction: column; align-items: center; gap: 20px;
}
.auth-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 28px; font-weight: 800;
  letter-spacing: 0.04em; text-transform: uppercase; line-height: 1;
}
.auth-title span { color: var(--pink); }
.auth-sub { font-size: 14px; color: var(--muted); line-height: 1.7; }
.auth-privacy {
  display: flex; flex-direction: column; gap: 6px;
  border-top: 1px solid var(--border); padding-top: 20px; width: 100%;
}
.auth-privacy-item {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--cyan); display: flex; align-items: center; gap: 6px; justify-content: center;
}
.auth-privacy-item::before { content: '✓'; font-weight: 700; }
.auth-error {
  background: rgba(231,76,60,0.1); border: 1px solid rgba(231,76,60,0.3);
  border-radius: 4px; padding: 10px 16px;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 12px; letter-spacing: 0.06em;
  color: var(--red); width: 100%; display: none;
}

/* ── LOADING SCREEN ── */
#loadingScreen {
  min-height: calc(100vh - 60px);
  display: none; align-items: center; justify-content: center;
  flex-direction: column; gap: 20px;
}
.loading-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 16px; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted);
}
.loading-spinner {
  width: 40px; height: 40px;
  border: 2px solid rgba(255,45,120,0.15);
  border-top-color: var(--pink);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
.loading-detail {
  font-size: 12px; color: var(--muted);
  font-family: 'Barlow Condensed', sans-serif;
  letter-spacing: 0.06em; text-align: center;
}

/* ── CALLBACK / REDIRECT PAGE ── */
/* Minimal centred layout for the OAuth callback screen */
body.callback {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 24px;
  font-family: 'Barlow Condensed', sans-serif;
}
.callback-logo  { font-size: 28px; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; }
.callback-logo span { color: var(--pink); }
.callback-status {
  font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted);
}
.callback-spinner {
  width: 32px; height: 32px;
  border: 2px solid rgba(255,45,120,0.15);
  border-top-color: var(--pink);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

/* ── DROP OVERLAY ── */
#dropOverlay {
  display: none; position: fixed; inset: 0;
  background: rgba(13,15,20,0.92); z-index: 100;
  align-items: center; justify-content: center; flex-direction: column; gap: 16px;
}
#dropOverlay.active { display: flex; }
.drop-box { border: 2px dashed var(--pink); border-radius: 12px; padding: 60px 80px; text-align: center; }
.drop-box-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 28px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--pink); margin-bottom: 8px;
}
.drop-box-sub { font-size: 13px; color: var(--muted); }

/* ── PASTE MODAL ── */
#pasteModal {
  display: none; position: fixed; inset: 0;
  background: rgba(13,15,20,0.92); z-index: 100;
  align-items: center; justify-content: center;
}
#pasteModal.active { display: flex; }
.paste-panel {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 8px; padding: 28px; width: 640px; max-width: 95vw;
  display: flex; flex-direction: column; gap: 14px;
}
.paste-panel-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 16px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
}
#pasteArea {
  background: var(--bg); border: 1px solid var(--border);
  color: var(--text); border-radius: 4px; padding: 12px;
  font-family: 'Barlow', monospace; font-size: 12px;
  height: 240px; resize: vertical; width: 100%;
}
#pasteArea:focus { outline: none; border-color: var(--pink); }
.paste-actions { display: flex; gap: 10px; justify-content: flex-end; }
.btn-primary-sm {
  background: var(--pink); color: #fff; border: none;
  padding: 8px 20px; border-radius: 4px;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 600; font-size: 13px; letter-spacing: 0.06em;
  text-transform: uppercase; cursor: pointer;
}

/* ── IMPORT ZONE (basic_functionality variant) ── */
.import-zone { margin-left: auto; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.import-zone label.btn {
  background: var(--pink); color: #fff; border: none;
  padding: 8px 18px; border-radius: 4px;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 600; font-size: 14px; letter-spacing: 0.06em;
  text-transform: uppercase; cursor: pointer; transition: opacity 0.2s; white-space: nowrap;
}
.import-zone label.btn:hover { opacity: 0.85; }
.paste-btn {
  background: transparent; color: var(--muted); border: 1px solid var(--border);
  padding: 8px 16px; border-radius: 4px;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 500; font-size: 13px; letter-spacing: 0.06em;
  text-transform: uppercase; cursor: pointer; transition: all 0.2s;
}
.paste-btn:hover { border-color: var(--pink); color: var(--text); }

/* ── EMPTY STATE ── */
.empty-state { text-align: center; padding: 60px 20px; color: var(--muted); font-family: 'Barlow Condensed', sans-serif; font-size: 14px; letter-spacing: 0.06em; }
.empty-icon  { font-size: 36px; margin-bottom: 12px; opacity: 0.4; }
.empty-steps { margin: 20px auto 0; max-width: 440px; text-align: left; display: flex; flex-direction: column; gap: 10px; }
.empty-step  { display: flex; gap: 12px; align-items: flex-start; font-size: 12px; color: var(--muted); }
.step-num    { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 16px; color: var(--pink); min-width: 20px; }
.empty-step code { background: var(--surface2); padding: 2px 6px; border-radius: 3px; font-size: 11px; color: var(--text); word-break: break-all; }

/* ── DISCONNECT MODAL ── */
#disconnectModal { display: none; position: fixed; inset: 0; background: rgba(13,15,20,0.92); z-index: 100; align-items: center; justify-content: center; }
#disconnectModal.active { display: flex; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 600px) {
  nav    { padding: 16px 20px; }
  header { padding: 12px 16px; }
  main   { padding: 16px; }
  #statusBar { padding: 8px 16px; }
  .features, .how, .cta-block { padding-left: 20px; padding-right: 20px; }
  .metrics-strip { padding: 0 20px; }
  .preview-section { padding: 60px 20px; }
  .privacy-bar { padding: 20px; gap: 16px; }
  footer { padding: 24px 20px; }
}