/* ===========================================================
   PNGDF COMBAT READY — MOBILE APP
   Mobile-first. Phone-frame preview on desktop.
   =========================================================== */
:root {
  --olive: #4b5320;
  --olive-light: #6b7a2e;
  --navy: #0a1f44;
  --navy-deep: #061233;
  --navy-soft: #1a3163;
  --gold: #c8a100;
  --gold-soft: #e2bd1f;
  --red: #b91c1c;
  --amber: #d97706;
  --green: #15803d;
  --bg: #0e1116;
  --bg-elev: #161b23;
  --bg-elev-2: #1d242e;
  --border: #2d3744;
  --border-strong: #3a4655;
  --text: #e7ecf2;
  --text-muted: #94a3b3;
  --text-subtle: #64748b;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --header-h: 76px;
  --tab-h: 70px;
}

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  background: #000;
  color: var(--text);
  font-family: 'Barlow', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  min-height: 100vh;
  overscroll-behavior: none;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: 'Oswald', sans-serif;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.15;
  color: #fff;
}
.mono { font-family: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, textarea, select { font-family: inherit; }

/* ===== Phone-frame for desktop preview ===== */
.device-frame {
  width: 100%;
  min-height: 100vh;
  background: var(--bg);
  display: flex;
  flex-direction: column;
}
.device-screen {
  flex: 1;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}
.device-bezel-bottom { display: none; }
.desktop-note { display: none; }

/* On wide screens (desktop preview), show as a phone frame.
   But: skip this when running inside the actual native app or PWA standalone mode. */
@media (min-width: 768px) and (display-mode: browser) {
  body {
    background: radial-gradient(ellipse at top, #1a2332, #050810);
    padding: 30px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 100vh;
  }
  .device-frame {
    width: 390px;
    min-height: auto;
    height: 844px;
    border-radius: 48px;
    background: #000;
    padding: 11px;
    box-shadow:
      0 0 0 2px #1a1a1a,
      0 0 0 4px #2a2a2a,
      0 30px 80px rgba(0,0,0,0.7),
      0 0 100px rgba(200,161,0,0.06);
    position: relative;
  }
  .device-frame::before {
    content: '';
    position: absolute;
    top: 11px; left: 50%;
    transform: translateX(-50%);
    width: 120px; height: 30px;
    background: #000;
    border-radius: 0 0 18px 18px;
    z-index: 100;
  }
  .device-screen {
    height: 100%;
    border-radius: 38px;
    overflow: hidden;
  }
  .desktop-note {
    display: block;
    position: fixed;
    top: 40px;
    left: 40px;
    width: 280px;
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 18px 20px;
    color: var(--text);
  }
  .desktop-note strong { display: block; margin-bottom: 6px; color: #fff; font-family: 'Oswald'; letter-spacing: 0.05em; }
  .desktop-note p { font-size: 13px; color: var(--text-muted); }
}

/* ===== STATUS BAR (faux) ===== */
.status-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 22px 4px;
  font-size: 13px;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
  padding-top: calc(var(--safe-top) + 8px);
}
.status-icons { display: flex; align-items: center; gap: 8px; }
.status-pill {
  font-size: 9px;
  letter-spacing: 0.15em;
  background: rgba(21,128,61,0.2);
  color: #4ade80;
  padding: 2px 6px;
  border-radius: 3px;
}
.status-batt { color: #fff; }

/* ===== APP HEADER ===== */
.app-header {
  background: var(--bg);
  flex-shrink: 0;
  position: relative;
  z-index: 10;
}
.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 18px 14px;
}
.header-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.15em;
  color: var(--gold);
  margin-bottom: 2px;
}
.header-greeting h1 {
  font-size: 26px;
  font-weight: 600;
}
.header-avatar {
  width: 42px; height: 42px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--olive), var(--olive-light));
  border: 2px solid var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  font-size: 14px;
  color: #fff;
  cursor: pointer;
}

/* ===== MAIN SCROLL AREA ===== */
.app-main {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  padding: 0 16px;
}
.app-main::-webkit-scrollbar { display: none; }

.screen { display: none; animation: fadeUp 0.25s ease; }
.screen.active { display: block; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.screen-intro { padding: 8px 0 18px; }
.screen-intro h2 {
  font-size: 26px;
  margin: 8px 0 6px;
}
.screen-intro p { color: var(--text-muted); font-size: 14px; }

/* ===== HOME — ADVISORY ===== */
.advisory {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: linear-gradient(90deg, rgba(217,119,6,0.18), transparent);
  border-left: 3px solid var(--amber);
  border-radius: 6px;
  margin-bottom: 14px;
  font-size: 13px;
}
.advisory svg { color: var(--amber); flex-shrink: 0; }
.advisory strong { color: #fff; display: block; margin-bottom: 2px; }
.advisory div { color: var(--text-muted); line-height: 1.4; }

/* ===== HOME — MISSION CARD ===== */
.mission-card {
  background:
    linear-gradient(135deg, rgba(75,83,32,0.4), rgba(10,31,68,0.6)),
    repeating-linear-gradient(45deg, transparent, transparent 8px, rgba(255,255,255,0.02) 8px, rgba(255,255,255,0.02) 9px);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 18px;
  margin-bottom: 18px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.mission-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.mission-time {
  font-size: 11px;
  color: var(--gold-soft);
  letter-spacing: 0.1em;
}
.mission-card h2 {
  font-size: 22px;
  margin-bottom: 4px;
  line-height: 1.2;
}
.mission-card p {
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 14px;
  line-height: 1.4;
}
.mission-cta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  color: var(--text-muted);
}
.mission-cta .mono { font-size: 11px; }

.btn-pill {
  background: var(--gold);
  color: var(--navy-deep);
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.15em;
  padding: 10px 20px;
  border-radius: 999px;
  cursor: pointer;
  transition: transform 0.1s;
}
.btn-pill:active { transform: scale(0.96); }
.btn-pill-full { width: 100%; padding: 14px; font-size: 13px; margin-top: 12px; }
.btn-pill-lg { padding: 16px; font-size: 14px; }

/* Stat pills row */
.stat-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 22px;
}
.stat-pill {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 8px;
  text-align: center;
}
.stat-pill .lbl {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.1em;
  color: var(--text-subtle);
  margin-bottom: 4px;
}
.stat-pill .val {
  font-family: 'Oswald', sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: #fff;
  line-height: 1;
}
.stat-pill .val.mono { font-family: 'JetBrains Mono', monospace; font-size: 16px; }
.stat-pill .unit { font-size: 12px; color: var(--text-subtle); margin-left: 1px; font-weight: 400; }

/* Section heads */
.section-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 18px 0 10px;
}
.section-head h3 { font-size: 16px; }
.link {
  background: transparent;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--gold);
  text-transform: uppercase;
}
.link.gold { color: var(--gold-soft); }
.link.inline { padding: 0; font-size: inherit; color: var(--gold); text-decoration: underline; }

/* ===== HOME — CHALLENGE SCROLLER (horizontal) ===== */
.ch-scroller {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  margin: 0 -16px;
  padding: 0 16px 4px;
}
.ch-scroller::-webkit-scrollbar { display: none; }
.ch-card-mini {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px;
  flex: 0 0 200px;
  scroll-snap-align: start;
  position: relative;
  overflow: hidden;
}
.ch-card-mini::before {
  content: '';
  position: absolute;
  top: 0; left: 0; height: 3px; width: 100%;
  background: var(--accent, var(--gold));
}
.ch-card-mini[data-type="streak"] { --accent: var(--gold); }
.ch-card-mini[data-type="pr"] { --accent: var(--red); }
.ch-card-mini[data-type="weakness"] { --accent: var(--olive-light); }
.ch-card-mini[data-type="unit"] { --accent: var(--navy-soft); }
.ch-card-mini[data-type="environment"] { --accent: var(--amber); }
.ch-card-mini .tag {
  font-family: 'Oswald', sans-serif;
  font-size: 9px;
  letter-spacing: 0.18em;
  color: var(--accent);
  margin-bottom: 6px;
}
.ch-card-mini h4 {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 8px;
  line-height: 1.25;
}
.ch-card-mini .meta {
  display: flex;
  justify-content: space-between;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--text-subtle);
}
.ch-card-mini .meta strong { color: var(--gold-soft); }

/* ===== HOME — QUICK ACTIONS ===== */
.quick-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.quick-btn {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text);
  transition: transform 0.1s;
}
.quick-btn:active { transform: scale(0.96); background: var(--bg-elev-2); }
.quick-btn svg { width: 22px; height: 22px; color: var(--gold); }

/* ===== HOME — WEEK LIST ===== */
.week-list { display: flex; flex-direction: column; gap: 6px; }
.week-row {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  gap: 12px;
  align-items: center;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 14px;
}
.week-row.today {
  border-color: var(--gold);
  background: linear-gradient(90deg, rgba(200,161,0,0.08), transparent);
}
.week-row.done { opacity: 0.6; }
.week-day {
  text-align: center;
}
.week-day .d { font-size: 9px; letter-spacing: 0.1em; color: var(--text-subtle); }
.week-day .n { font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 16px; color: #fff; }
.week-row.today .week-day .d { color: var(--gold); }
.week-row.today .week-day .n { color: var(--gold-soft); }
.week-row strong { display: block; font-size: 13px; font-weight: 600; }
.week-row small { font-size: 11px; color: var(--text-muted); }
.week-row .badge {
  font-family: 'Oswald', sans-serif;
  font-size: 9px;
  letter-spacing: 0.12em;
  padding: 3px 7px;
  border-radius: 3px;
  text-transform: uppercase;
}

.badge-olive { background: rgba(75,83,32,0.3); color: #a3b072; }
.badge-navy { background: rgba(26,49,99,0.4); color: #93b4ff; }
.badge-gold { background: rgba(200,161,0,0.18); color: var(--gold-soft); }
.badge-red { background: rgba(185,28,28,0.18); color: #fca5a5; }

/* ===== HOME — LB PREVIEW ===== */
.lb-preview { display: flex; flex-direction: column; gap: 4px; }
.lb-row {
  display: grid;
  grid-template-columns: 32px 1fr auto;
  gap: 12px;
  align-items: center;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
}
.lb-row.me { border-color: var(--gold); background: rgba(200,161,0,0.06); }
.lb-rank {
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  font-size: 14px;
  color: var(--text-subtle);
  text-align: center;
}
.lb-row.me .lb-rank { color: var(--gold); }
.lb-name { font-size: 13px; font-weight: 600; color: #fff; }
.lb-name small { font-weight: 400; color: var(--text-muted); }
.lb-score { font-weight: 700; font-size: 14px; color: var(--gold-soft); }

/* ===== PROGRAMS ===== */
.tier-list { display: flex; flex-direction: column; gap: 12px; margin-bottom: 18px; }
.tier-card {
  display: flex;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.1s;
}
.tier-card:active { transform: scale(0.98); }
.tier-card.active { border-color: var(--gold); }
.tier-stripe {
  width: 6px;
  flex-shrink: 0;
}
.tier-card.t1 .tier-stripe { background: linear-gradient(to bottom, var(--olive), var(--olive-light)); }
.tier-card.t2 .tier-stripe { background: linear-gradient(to bottom, var(--navy-soft), var(--navy)); }
.tier-card.t3 .tier-stripe { background: linear-gradient(to bottom, var(--red), #4a0e0e); }
.tier-body { padding: 16px; flex: 1; }
.tier-num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.15em;
  color: var(--text-subtle);
  margin-bottom: 4px;
}
.tier-card h3 { font-size: 18px; margin-bottom: 2px; }
.tier-sub { font-size: 12px; color: var(--text-muted); margin-bottom: 10px; }
.tier-body ul { list-style: none; margin-bottom: 12px; }
.tier-body ul li {
  font-size: 12px;
  padding: 3px 0;
  color: var(--text);
  display: flex;
  gap: 8px;
}
.tier-body ul li::before { content: '▸'; color: var(--gold); font-family: 'JetBrains Mono', monospace; }
.tier-foot { display: flex; justify-content: space-between; align-items: center; }

/* Mini calendar */
.mini-cal {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px;
}
.mini-cal-h {
  font-family: 'Oswald', sans-serif;
  font-size: 9px;
  letter-spacing: 0.15em;
  color: var(--text-subtle);
  text-align: center;
  padding: 4px 0;
}
.mini-cal-d {
  aspect-ratio: 1;
  background: var(--bg-elev-2);
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--text-muted);
  position: relative;
}
.mini-cal-d.done { background: rgba(21,128,61,0.2); color: #4ade80; }
.mini-cal-d.today { background: var(--gold); color: var(--navy-deep); font-weight: 700; box-shadow: 0 0 0 2px var(--gold); }
.mini-cal-d.rest { opacity: 0.3; }
.mini-cal-d::after {
  content: '·';
  font-size: 14px;
  position: absolute;
  bottom: 1px;
}
.mini-cal-d.done::after { content: '✓'; font-size: 9px; bottom: 2px; }

/* Standards card */
.std-card {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 18px;
}
.std-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}
.std-row:last-child { border-bottom: none; }
.std-row .mono { color: var(--gold-soft); font-weight: 700; font-size: 14px; }

/* ===== TRAIN (PLAYER) ===== */
.player-screen { padding: 8px 0; }
.player-program {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.15em;
  color: var(--gold);
  text-align: center;
  margin-bottom: 4px;
}
.player-title { text-align: center; font-size: 22px; margin-bottom: 18px; }

.timer-card {
  background:
    radial-gradient(ellipse at center, rgba(200,161,0,0.08), transparent 70%),
    var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 28px 18px;
  text-align: center;
  margin-bottom: 18px;
}
.timer-state {
  font-family: 'Oswald', sans-serif;
  font-size: 12px;
  letter-spacing: 0.3em;
  color: var(--gold);
  margin-bottom: 8px;
}
.timer-time {
  font-family: 'JetBrains Mono', monospace;
  font-size: 76px;
  font-weight: 700;
  color: #fff;
  line-height: 1;
  margin-bottom: 10px;
  letter-spacing: -0.02em;
}
.timer-exercise {
  font-size: 14px;
  color: var(--text-muted);
  margin-bottom: 16px;
}
.timer-progress {
  height: 4px;
  background: var(--border);
  border-radius: 2px;
  overflow: hidden;
}
.timer-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--olive), var(--gold));
  width: 0%;
  transition: width 1s linear;
}

.player-controls {
  display: flex;
  justify-content: center;
  gap: 18px;
  margin-bottom: 20px;
}
.ctrl-btn {
  width: 52px; height: 52px;
  border-radius: 50%;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text);
  transition: all 0.1s;
}
.ctrl-btn:active { transform: scale(0.92); }
.ctrl-btn svg { width: 22px; height: 22px; }
.ctrl-main {
  width: 72px; height: 72px;
  background: var(--gold);
  color: var(--navy-deep);
  border-color: var(--gold);
  box-shadow: 0 8px 24px rgba(200,161,0,0.3);
}
.ctrl-main svg { width: 30px; height: 30px; }

.ex-list-mobile {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 4px;
  max-height: 280px;
  overflow-y: auto;
}
.ex-row {
  display: grid;
  grid-template-columns: 24px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}
.ex-row:last-child { border-bottom: none; }
.ex-row.current { background: rgba(200,161,0,0.08); border-radius: 6px; }
.ex-row.done { opacity: 0.5; }
.ex-row.done .ex-name { text-decoration: line-through; }
.ex-num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--text-subtle);
  text-align: center;
}
.ex-name { font-weight: 500; }
.ex-detail { font-size: 11px; color: var(--text-muted); }
.ex-meta { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--gold-soft); }

.player-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 16px;
}
.btn-secondary {
  background: var(--bg-elev);
  border: 1px solid var(--border-strong);
  color: var(--text);
  padding: 14px;
  border-radius: 8px;
  font-family: 'Oswald', sans-serif;
  font-weight: 600;
  letter-spacing: 0.1em;
  font-size: 12px;
}
.btn-secondary:active { background: var(--bg-elev-2); }
.btn-danger {
  background: var(--red);
  color: #fff;
  padding: 14px;
  border-radius: 8px;
  font-family: 'Oswald', sans-serif;
  font-weight: 600;
  letter-spacing: 0.1em;
  font-size: 12px;
}

/* ===== TRACK (GPS) ===== */
.track-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 0 10px;
}
.track-mode-pills {
  display: flex;
  gap: 4px;
  background: var(--bg-elev);
  border-radius: 999px;
  padding: 3px;
}
.mode-pill {
  padding: 6px 14px;
  border-radius: 999px;
  font-family: 'Oswald', sans-serif;
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--text-muted);
  text-transform: uppercase;
}
.mode-pill.active { background: var(--gold); color: var(--navy-deep); font-weight: 700; }
.icon-btn {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
}
.icon-btn svg { width: 18px; height: 18px; color: var(--text); }

#map {
  height: 280px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--bg-elev);
  margin-bottom: 14px;
}

.track-readouts-mobile { margin-bottom: 18px; }
.readout-big {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px;
  text-align: center;
  margin-bottom: 8px;
}
.readout-big .lbl { font-size: 10px; letter-spacing: 0.18em; color: var(--text-subtle); margin-bottom: 4px; font-weight: 600; }
.readout-big .val { font-size: 42px; font-weight: 700; color: var(--gold-soft); line-height: 1; }
.readout-big .unit { font-size: 16px; color: var(--text-subtle); margin-left: 4px; font-weight: 400; }

.readout-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.readout {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px;
  text-align: center;
}
.readout .lbl { font-size: 9px; letter-spacing: 0.15em; color: var(--text-subtle); margin-bottom: 2px; font-weight: 600; }
.readout .val { font-size: 18px; font-weight: 700; color: #fff; line-height: 1; }

.track-actions-mobile {
  display: grid;
  grid-template-columns: 1fr 1.4fr 1fr;
  gap: 8px;
  align-items: center;
  margin-top: 14px;
}
.btn-record {
  background: var(--red);
  color: #fff;
  padding: 16px;
  border-radius: 999px;
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  letter-spacing: 0.15em;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: 0 8px 24px rgba(185,28,28,0.3);
  transition: all 0.1s;
}
.btn-record:active { transform: scale(0.96); }
.btn-record.recording { background: #1f2937; }
.rec-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: #fff;
  animation: pulse 1.5s infinite;
}
.btn-record.recording .rec-dot { background: var(--red); }
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

/* ===== PROFILE ===== */
.profile-card {
  text-align: center;
  padding: 8px 0 16px;
  margin-bottom: 6px;
}
.profile-avatar {
  width: 72px; height: 72px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--olive), var(--olive-light));
  border: 3px solid var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  font-size: 24px;
  color: #fff;
  margin: 0 auto 12px;
}
.profile-card h2 { font-size: 22px; margin-bottom: 2px; }
.profile-meta { font-size: 13px; color: var(--text-muted); margin-bottom: 18px; }
.profile-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 8px;
}
.profile-stats > div {
  text-align: center;
}
.profile-stats strong {
  display: block;
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  font-size: 20px;
  color: var(--gold-soft);
  line-height: 1;
}
.profile-stats small {
  font-size: 9px;
  letter-spacing: 0.15em;
  color: var(--text-subtle);
  text-transform: uppercase;
  display: block;
  margin-top: 4px;
}

.pr-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
}
.pr-tile {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.pr-tile span { font-size: 12px; color: var(--text-muted); }
.pr-tile strong { font-weight: 700; font-size: 14px; color: var(--gold-soft); }

.progress-card {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px;
  height: 200px;
}

.lb-full { display: flex; flex-direction: column; gap: 4px; }

.settings-list {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
}
.setting-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  width: 100%;
  text-align: left;
  font-size: 14px;
  color: var(--text);
}
.setting-row:last-child { border-bottom: none; }
.setting-row:active { background: var(--bg-elev-2); }
.setting-meta { font-size: 12px; color: var(--text-subtle); font-family: 'JetBrains Mono', monospace; }
.toggle {
  width: 36px;
  height: 20px;
  background: var(--border-strong);
  border-radius: 999px;
  position: relative;
  transition: background 0.2s;
  flex-shrink: 0;
}
.toggle::after {
  content: '';
  position: absolute;
  top: 2px; left: 2px;
  width: 16px; height: 16px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.2s;
}
.toggle.on { background: var(--gold); }
.toggle.on::after { transform: translateX(16px); }

/* ===== CHALLENGES VIEW ===== */
.ch-xp-bar {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px;
  margin-bottom: 16px;
}
.ch-xp-track {
  height: 8px;
  background: var(--border);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 8px;
}
.ch-xp-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--olive), var(--gold));
  width: 0%;
  transition: width 0.5s;
}
.ch-xp-label {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--text-muted);
  font-family: 'JetBrains Mono', monospace;
}
.ch-xp-label strong { color: var(--gold-soft); font-size: 14px; }

.ch-list { display: flex; flex-direction: column; gap: 12px; margin-bottom: 18px; }
.ch-card {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px;
  position: relative;
  overflow: hidden;
}
.ch-card::before {
  content: '';
  position: absolute;
  left: 0; top: 0; height: 100%; width: 4px;
  background: var(--accent);
}
.ch-card.complete { opacity: 0.6; }
.ch-card.complete h4 { text-decoration: line-through; }
.ch-card[data-type="streak"] { --accent: var(--gold); }
.ch-card[data-type="pr"] { --accent: var(--red); }
.ch-card[data-type="weakness"] { --accent: var(--olive-light); }
.ch-card[data-type="unit"] { --accent: var(--navy-soft); }
.ch-card[data-type="environment"] { --accent: var(--amber); }

.ch-card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 8px;
  gap: 10px;
}
.ch-card-head .tag {
  font-family: 'Oswald', sans-serif;
  font-size: 9px;
  letter-spacing: 0.18em;
  color: var(--accent);
  font-weight: 700;
}
.ch-xp-pill {
  background: rgba(200,161,0,0.15);
  border: 1px solid rgba(200,161,0,0.3);
  color: var(--gold-soft);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 3px;
}
.ch-card h4 { font-size: 18px; margin-bottom: 6px; }
.ch-card .desc { font-size: 13px; color: var(--text-muted); margin-bottom: 10px; line-height: 1.4; }
.ch-card .why {
  background: rgba(0,0,0,0.25);
  border: 1px dashed var(--border-strong);
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: 10px;
  line-height: 1.4;
}
.ch-card .why::before {
  content: 'WHY · ';
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: 0.05em;
}
.ch-meta-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--text-muted);
  letter-spacing: 0.05em;
  margin-bottom: 12px;
}
.ch-meta-row strong { color: var(--gold-soft); }
.ch-actions { display: grid; grid-template-columns: 1fr 80px; gap: 8px; }
.ch-actions .btn-pill { padding: 10px; font-size: 11px; }

.ch-debug {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 12px;
}
.ch-debug summary {
  cursor: pointer;
  font-family: 'Oswald', sans-serif;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}
.ch-debug-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 10px;
}
.ch-debug-grid div {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px;
}
.ch-debug-grid small {
  display: block;
  font-size: 9px;
  letter-spacing: 0.1em;
  color: var(--text-subtle);
  text-transform: uppercase;
  margin-bottom: 2px;
}
.ch-debug-grid strong {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: #fff;
}

/* ===== BOTTOM TAB BAR ===== */
.tab-bar {
  background: var(--bg-elev);
  border-top: 1px solid var(--border);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  padding: 6px 0 calc(var(--safe-bottom) + 6px);
  flex-shrink: 0;
  position: relative;
  z-index: 90;
}
.tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 6px 0;
  color: var(--text-subtle);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.03em;
  transition: color 0.15s;
}
.tab svg { width: 22px; height: 22px; }
.tab.active { color: var(--gold); }
.tab.active span { color: var(--gold); }
.tab-cta { position: relative; }
.tab-cta svg { display: none; }
.tab-cta-circle {
  width: 50px; height: 50px;
  border-radius: 50%;
  background: var(--gold);
  color: var(--navy-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: -16px;
  box-shadow: 0 4px 16px rgba(200,161,0,0.3);
  transition: transform 0.1s;
}
.tab-cta:active .tab-cta-circle { transform: scale(0.9); }
.tab-cta-circle svg { width: 22px; height: 22px; display: block; }

/* ===== MODAL SHEETS ===== */
.sheet-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.6);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s;
  z-index: 200;
}
.sheet-overlay.active { opacity: 1; pointer-events: auto; }
.sheet {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  background: var(--bg-elev);
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  transform: translateY(100%);
  transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
  z-index: 201;
  max-height: 85%;
  display: flex;
  flex-direction: column;
  padding-bottom: var(--safe-bottom);
}
.sheet.active { transform: translateY(0); }
.sheet-handle {
  width: 36px; height: 4px;
  background: var(--border-strong);
  border-radius: 2px;
  margin: 10px auto 0;
  flex-shrink: 0;
}
.sheet-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.sheet-header h3 { font-size: 18px; }
.sheet-close {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--bg-elev-2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: var(--text);
}
.sheet-body {
  padding: 18px;
  overflow-y: auto;
  flex: 1;
}
.sheet-body::-webkit-scrollbar { display: none; }
.sheet-sub { color: var(--text-muted); font-size: 13px; margin-bottom: 16px; }

.form-field { margin-bottom: 14px; }
.form-field label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--text-subtle);
  text-transform: uppercase;
  margin-bottom: 6px;
}
.input {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 14px;
  color: #fff;
  font-family: 'JetBrains Mono', monospace;
  font-size: 16px; /* >=16px to prevent iOS zoom */
  font-weight: 600;
}
textarea.input { font-family: 'Barlow', sans-serif; font-weight: 400; resize: vertical; min-height: 70px; }
.input:focus { outline: 2px solid var(--gold); outline-offset: -1px; }
.input-row { display: flex; gap: 8px; }
.input-row .input { flex: 1; }

.score-bar {
  height: 6px;
  background: var(--border);
  border-radius: 3px;
  overflow: hidden;
  margin-top: 8px;
}
.score-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--red), var(--amber), var(--green));
  width: 0%;
  transition: width 0.4s;
}

.test-result-card {
  background: linear-gradient(135deg, var(--navy-deep), var(--navy-soft));
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  padding: 20px;
  text-align: center;
  margin: 18px 0;
}
.test-result-card .lbl {
  font-family: 'Oswald', sans-serif;
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--gold);
  margin-bottom: 6px;
}
.test-result-card .big {
  font-size: 56px;
  font-weight: 700;
  color: #fff;
  line-height: 1;
}
.test-result-card .verdict { margin-top: 8px; font-size: 13px; color: var(--text-muted); }

.session-meta-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin: 14px 0;
}
.session-meta-grid > div {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px;
}
.session-meta-grid small { display: block; font-size: 9px; letter-spacing: 0.15em; color: var(--text-subtle); margin-bottom: 4px; }
.session-meta-grid strong { font-family: 'Oswald', sans-serif; font-size: 18px; color: #fff; }

.quick-types {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 16px;
}
.quick-type {
  background: var(--bg-elev-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px 8px;
  font-size: 13px;
  color: var(--text);
  font-weight: 600;
}
.quick-type:active { background: var(--gold); color: var(--navy-deep); }

/* Toast */
.toast {
  position: absolute;
  top: calc(var(--safe-top) + 60px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--gold);
  color: var(--navy-deep);
  padding: 12px 20px;
  border-radius: 999px;
  font-family: 'Oswald', sans-serif;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 12px;
  z-index: 999;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
  animation: toastIn 0.3s, toastOut 0.3s 2.4s;
}
@keyframes toastIn {
  from { transform: translate(-50%, -20px); opacity: 0; }
  to { transform: translate(-50%, 0); opacity: 1; }
}
@keyframes toastOut {
  to { transform: translate(-50%, -20px); opacity: 0; }
}

/* ==========================================================
   ONBOARDING OVERLAY
   ========================================================== */
.onboard-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(170deg, var(--navy-deep), var(--bg) 65%);
  z-index: 500;
  overflow-y: auto;
  display: none;
  flex-direction: column;
  padding: calc(var(--safe-top) + 24px) 24px calc(var(--safe-bottom) + 24px);
}
.onboard-overlay.active { display: flex; }

.onboard-step {
  display: none;
  flex-direction: column;
  flex: 1;
  animation: fadeUp 0.3s ease;
}
.onboard-step.active { display: flex; }

.onboard-back {
  align-self: flex-start;
  font-family: 'Oswald', sans-serif;
  letter-spacing: 0.1em;
  font-size: 12px;
  color: var(--text-muted);
  padding: 8px 0;
  margin-bottom: 12px;
}

.onboard-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--gold);
  margin-bottom: 6px;
}
.onboard-step h1 { font-size: 36px; line-height: 1.05; margin-bottom: 10px; }
.onboard-step h2 { font-size: 28px; line-height: 1.1; margin-bottom: 8px; }
.onboard-sub { color: var(--text-muted); font-size: 14px; margin-bottom: 24px; line-height: 1.5; }

.onboard-hero {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  padding: 20px 0;
}
.onboard-crest {
  margin: 0 auto 28px;
  filter: drop-shadow(0 0 24px rgba(200, 161, 0, 0.3));
}
.onboard-hero p { color: var(--text-muted); font-size: 15px; line-height: 1.5; }

.onboard-actions { display: flex; flex-direction: column; gap: 10px; padding-bottom: 12px; }
.onboard-btn {
  width: 100%;
  padding: 16px;
  border-radius: 12px;
  font-family: 'Oswald', sans-serif;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: transform 0.1s;
}
.onboard-btn:active { transform: scale(0.98); }
.onboard-btn svg { width: 18px; height: 18px; }
.onboard-btn-primary {
  background: var(--gold);
  color: var(--navy-deep);
  box-shadow: 0 8px 24px rgba(200, 161, 0, 0.25);
}
.onboard-btn-ghost {
  background: transparent;
  color: var(--text-muted);
  border: 1px solid var(--border-strong);
}

.user-type-grid { display: flex; flex-direction: column; gap: 12px; margin-top: 8px; }
.user-type-card {
  display: flex;
  gap: 14px;
  align-items: center;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 18px;
  text-align: left;
  transition: all 0.15s;
}
.user-type-card:active { background: var(--bg-elev-2); border-color: var(--gold); }
.user-type-icon {
  width: 56px; height: 56px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--olive), var(--olive-light));
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  color: #fff;
}
.user-type-icon svg { width: 28px; height: 28px; }
.user-type-body h3 { font-size: 18px; margin-bottom: 2px; }
.user-type-body p { font-size: 13px; color: var(--text-muted); margin-bottom: 4px; }
.user-type-meta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--text-subtle);
  letter-spacing: 0.05em;
}

.scan-btn {
  display: flex;
  gap: 14px;
  align-items: center;
  background: linear-gradient(135deg, rgba(75, 83, 32, 0.4), rgba(10, 31, 68, 0.5));
  border: 1px solid var(--gold);
  border-radius: 12px;
  padding: 16px;
  width: 100%;
  text-align: left;
  margin-bottom: 18px;
  position: relative;
  overflow: hidden;
}
.scan-btn::before {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(200,161,0,0.15), transparent);
  animation: scanShimmer 3s infinite;
}
@keyframes scanShimmer { 100% { left: 100%; } }
.scan-btn-icon {
  width: 44px; height: 44px;
  background: var(--gold);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--navy-deep);
  flex-shrink: 0;
}
.scan-btn-icon svg { width: 24px; height: 24px; }
.scan-btn strong { display: block; color: #fff; font-size: 15px; }
.scan-btn small { display: block; color: var(--text-muted); font-size: 12px; }

.onboard-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 16px 0;
}
.onboard-divider::before, .onboard-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}
.onboard-divider span {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.15em;
  color: var(--text-subtle);
}

.onboard-form { display: flex; flex-direction: column; gap: 14px; }
.onboard-form .form-field { margin-bottom: 0; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.form-row .form-field { margin-bottom: 0; }
select.input {
  appearance: none;
  background: var(--bg) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' stroke='%2394a3b3' stroke-width='1.5' fill='none'/></svg>") no-repeat right 14px center;
  padding-right: 36px;
}
.optional {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  color: var(--text-subtle);
  font-weight: 400;
  letter-spacing: 0.1em;
  margin-left: 4px;
}

/* ID Scanner modal */
.scanner-modal {
  position: absolute;
  inset: 0;
  background: #000;
  z-index: 600;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.scanner-modal.active { display: flex; }
.scanner-header {
  position: absolute;
  top: 0; left: 0; right: 0;
  padding: calc(var(--safe-top) + 16px) 20px 16px;
  display: flex;
  align-items: center;
  gap: 16px;
  background: linear-gradient(to bottom, rgba(0,0,0,0.7), transparent);
  z-index: 2;
  color: #fff;
  font-family: 'Oswald', sans-serif;
  letter-spacing: 0.1em;
  font-size: 13px;
}
.scanner-close {
  width: 36px; height: 36px;
  background: rgba(255,255,255,0.15);
  color: #fff;
  border-radius: 50%;
  font-size: 18px;
}
#scannerVideo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  inset: 0;
  background: #111;
}
.scanner-frame {
  position: relative;
  width: 84%;
  aspect-ratio: 1.6;
  z-index: 2;
  pointer-events: none;
}
.corner {
  position: absolute;
  width: 28px; height: 28px;
  border: 3px solid var(--gold);
}
.corner.tl { top: 0; left: 0; border-right: none; border-bottom: none; }
.corner.tr { top: 0; right: 0; border-left: none; border-bottom: none; }
.corner.bl { bottom: 0; left: 0; border-right: none; border-top: none; }
.corner.br { bottom: 0; right: 0; border-left: none; border-top: none; }
.scanner-line {
  position: absolute;
  top: 50%;
  left: 5%; right: 5%;
  height: 2px;
  background: var(--gold);
  box-shadow: 0 0 12px rgba(200, 161, 0, 0.8);
  animation: scanLine 2s ease-in-out infinite;
}
@keyframes scanLine {
  0%, 100% { top: 5%; }
  50% { top: 95%; }
}
.scanner-status {
  position: absolute;
  bottom: 130px;
  left: 0; right: 0;
  text-align: center;
  color: #fff;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.1em;
  z-index: 2;
  text-shadow: 0 0 8px rgba(0,0,0,0.8);
}
.scanner-capture {
  position: absolute;
  bottom: calc(var(--safe-bottom) + 32px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  background: transparent;
  padding: 0;
}
.scanner-capture .ring {
  display: block;
  width: 72px; height: 72px;
  border: 4px solid #fff;
  border-radius: 50%;
  padding: 4px;
}
.scanner-capture .dot {
  display: block;
  width: 100%; height: 100%;
  background: #fff;
  border-radius: 50%;
}
.scanner-capture:active .dot { background: var(--gold); }

/* ==========================================================
   BFA HOME CARD + FULL-SCREEN FLOW
   ========================================================== */
.bfa-home {
  display: flex;
  align-items: center;
  gap: 14px;
  background: linear-gradient(135deg, rgba(21, 128, 61, 0.18), rgba(10, 31, 68, 0.5));
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 18px;
  cursor: pointer;
  position: relative;
}
.bfa-home.locked {
  background: linear-gradient(135deg, rgba(60, 70, 85, 0.3), rgba(10, 31, 68, 0.5));
  border-color: var(--border);
}
.bfa-home-icon {
  width: 44px; height: 44px;
  border-radius: 10px;
  background: rgba(200, 161, 0, 0.18);
  border: 1px solid rgba(200, 161, 0, 0.4);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  color: var(--gold);
}
.bfa-home.locked .bfa-home-icon {
  background: rgba(60, 70, 85, 0.4);
  border-color: var(--border);
  color: var(--text-subtle);
}
.bfa-home-icon svg { width: 24px; height: 24px; }
.bfa-home-body { flex: 1; min-width: 0; }
.bfa-home-tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.15em;
  color: var(--gold);
  margin-bottom: 2px;
}
.bfa-home-body h3 { font-size: 16px; margin-bottom: 2px; }
.bfa-home-body p { font-size: 12px; color: var(--text-muted); line-height: 1.4; margin-bottom: 8px; }
.bfa-home-progress { display: flex; align-items: center; gap: 10px; }
.bfa-progress-track {
  flex: 1;
  height: 5px;
  background: var(--border);
  border-radius: 3px;
  overflow: hidden;
}
.bfa-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--olive), var(--gold));
  width: 0%;
  transition: width 0.5s;
}
#bfaProgressLabel { font-size: 10px; color: var(--text-muted); }
.bfa-home-chev { width: 18px; height: 18px; color: var(--text-subtle); flex-shrink: 0; }

/* BFA full-screen flow */
.bfa-screen-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 0 14px;
}
.bfa-back {
  font-family: 'Oswald', sans-serif;
  letter-spacing: 0.1em;
  font-size: 12px;
  color: var(--text-muted);
}
.bfa-step-pill {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.15em;
  color: var(--gold);
  background: rgba(200, 161, 0, 0.12);
  padding: 4px 10px;
  border-radius: 4px;
}
.bfa-title { font-size: 26px; margin-bottom: 4px; }
.bfa-sub { color: var(--text-muted); font-size: 13px; margin-bottom: 18px; }

.bfa-config { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.bfa-event-config {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
}
.bfa-event-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
.bfa-event-head h4 { font-size: 16px; }
.bfa-default-pill {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.12em;
  color: var(--text-subtle);
  background: rgba(255,255,255,0.05);
  padding: 3px 7px;
  border-radius: 3px;
}
.bfa-default-pill.modified {
  color: var(--amber);
  background: rgba(217, 119, 6, 0.12);
}
.bfa-config-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
  border-top: 1px solid var(--border);
}
.bfa-config-row:first-of-type { border-top: none; }
.bfa-config-row label { font-size: 13px; color: var(--text-muted); }
.stepper {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--bg);
  border-radius: 999px;
  padding: 4px;
}
.stepper button {
  width: 30px; height: 30px;
  background: var(--bg-elev-2);
  border-radius: 50%;
  font-size: 18px;
  font-weight: 700;
  color: var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
}
.stepper button:active { background: var(--gold); color: var(--navy-deep); }
.stepper > span { min-width: 70px; text-align: center; font-size: 13px; color: #fff; font-weight: 600; }

#bfaMap {
  height: 220px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--bg-elev);
  margin-bottom: 12px;
}
.bfa-run-readouts { margin-bottom: 14px; }
.bfa-run-status {
  text-align: center;
  font-family: 'Oswald', sans-serif;
  letter-spacing: 0.15em;
  font-size: 13px;
  color: var(--text-muted);
  padding: 10px;
  margin-bottom: 12px;
  background: var(--bg-elev);
  border-radius: 8px;
  border: 1px solid var(--border);
}
.bfa-run-status.passing { color: #4ade80; border-color: rgba(21, 128, 61, 0.4); background: rgba(21, 128, 61, 0.1); }
.bfa-run-status.failing { color: #fca5a5; border-color: rgba(185, 28, 28, 0.4); background: rgba(185, 28, 28, 0.1); }

.bfa-counter-card {
  background: linear-gradient(135deg, rgba(75, 83, 32, 0.2), rgba(10, 31, 68, 0.5));
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 24px;
  text-align: center;
  margin-bottom: 18px;
}
.bfa-counter-time { margin-bottom: 14px; }
.bfa-counter-time .lbl {
  font-family: 'Oswald', sans-serif;
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--gold);
}
.bfa-counter-time .big {
  font-size: 38px;
  font-weight: 700;
  color: #fff;
  line-height: 1;
  margin-top: 4px;
}
.bfa-counter-time .big.warning { color: var(--amber); }
.bfa-counter-time .big.expired { color: var(--red); }
.bfa-counter-display {
  font-family: 'JetBrains Mono', monospace;
  font-size: 88px;
  font-weight: 700;
  color: var(--gold-soft);
  line-height: 1;
  letter-spacing: -0.03em;
}
.bfa-counter-target {
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px;
  color: var(--text-muted);
  margin-bottom: 14px;
}
.bfa-counter-bar {
  height: 8px;
  background: var(--border);
  border-radius: 4px;
  overflow: hidden;
}
.bfa-counter-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--olive), var(--gold));
  width: 0%;
  transition: width 0.3s;
}
.bfa-counter-fill.complete { background: linear-gradient(90deg, var(--green), #4ade80); }

.bfa-tap-btn {
  width: 100%;
  padding: 28px;
  background: linear-gradient(135deg, var(--gold), var(--gold-soft));
  color: var(--navy-deep);
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  font-size: 22px;
  letter-spacing: 0.2em;
  border-radius: 14px;
  margin-bottom: 12px;
  box-shadow: 0 8px 24px rgba(200, 161, 0, 0.3);
  transition: transform 0.05s;
}
.bfa-tap-btn:active {
  transform: scale(0.97);
  background: var(--gold-soft);
}
.bfa-tap-btn:disabled {
  background: var(--bg-elev-2);
  color: var(--text-subtle);
  box-shadow: none;
}
.bfa-counter-actions {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 10px;
}

/* BFA results */
.bfa-result-banner {
  background: linear-gradient(135deg, rgba(21, 128, 61, 0.3), rgba(10, 31, 68, 0.5));
  border: 1px solid rgba(21, 128, 61, 0.5);
  border-radius: 16px;
  padding: 24px;
  text-align: center;
  margin-bottom: 16px;
  position: relative;
  overflow: hidden;
}
.bfa-result-banner.fail {
  background: linear-gradient(135deg, rgba(185, 28, 28, 0.3), rgba(10, 31, 68, 0.5));
  border-color: rgba(185, 28, 28, 0.5);
}
.bfa-result-stamp {
  display: inline-block;
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.3em;
  padding: 6px 16px;
  border-radius: 4px;
  background: rgba(21, 128, 61, 0.4);
  color: #4ade80;
  border: 2px solid #4ade80;
  margin-bottom: 12px;
  transform: rotate(-3deg);
}
.bfa-result-banner.fail .bfa-result-stamp {
  background: rgba(185, 28, 28, 0.4);
  color: #fca5a5;
  border-color: #fca5a5;
}
.bfa-result-banner h2 { font-size: 22px; margin-bottom: 4px; }
.bfa-result-banner p { color: var(--text-muted); font-size: 13px; margin-bottom: 16px; }
.bfa-overall-score { background: rgba(0,0,0,0.3); border-radius: 10px; padding: 12px; }
.bfa-overall-score .lbl {
  font-family: 'Oswald', sans-serif;
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--gold);
}
.bfa-overall-score .big {
  font-size: 48px;
  font-weight: 700;
  color: #fff;
  line-height: 1;
  margin-top: 2px;
}

.bfa-result-events { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.bfa-result-event {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  display: grid;
  grid-template-columns: 28px 1fr auto;
  gap: 12px;
  align-items: center;
}
.bfa-result-event.pass { border-left: 3px solid #4ade80; }
.bfa-result-event.fail { border-left: 3px solid #fca5a5; }
.bfa-result-event-icon {
  width: 28px; height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 14px;
}
.bfa-result-event.pass .bfa-result-event-icon { background: rgba(21, 128, 61, 0.3); color: #4ade80; }
.bfa-result-event.fail .bfa-result-event-icon { background: rgba(185, 28, 28, 0.3); color: #fca5a5; }
.bfa-result-event-body { min-width: 0; }
.bfa-result-event-body strong { display: block; font-size: 14px; }
.bfa-result-event-body small { font-size: 11px; color: var(--text-muted); }
.bfa-result-event-meta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  color: var(--gold-soft);
  font-weight: 700;
}

.bfa-result-actions {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 10px;
}

/* Leaderboard tabs */
.lb-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  background: var(--bg-elev);
  border-radius: 8px;
  padding: 3px;
  margin-bottom: 8px;
}
.lb-tab {
  padding: 8px 4px;
  border-radius: 6px;
  font-family: 'Oswald', sans-serif;
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  text-transform: uppercase;
  transition: all 0.15s;
}
.lb-tab.active { background: var(--gold); color: var(--navy-deep); font-weight: 700; }
.lb-meta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.1em;
  color: var(--text-subtle);
  text-transform: uppercase;
  margin-bottom: 8px;
  padding-left: 4px;
}

/* Lb individual rows (BFA / Fastest leaderboard variant) */
.lb-row.indiv {
  grid-template-columns: 32px 1fr auto auto;
}
.lb-indiv-meta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--text-subtle);
}

/* ==========================================================
   DANGER ZONE + APP FOOTER + PRIVACY SHEET
   ========================================================== */
.danger-head h3 { color: #fca5a5; }
.danger-list {
  border-color: rgba(185, 28, 28, 0.4) !important;
}
.danger-row {
  color: #fca5a5 !important;
}
.danger-row:active {
  background: rgba(185, 28, 28, 0.15) !important;
}
.danger-row span:first-child {
  font-weight: 600;
}

.app-footer {
  text-align: center;
  padding: 28px 16px 12px;
  margin-top: 16px;
  opacity: 0.6;
}
.app-footer-logo {
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.25em;
  color: var(--gold);
  margin-bottom: 4px;
}
.app-footer-meta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--text-subtle);
  letter-spacing: 0.1em;
  margin-bottom: 4px;
}
.app-footer-note {
  font-family: 'Oswald', sans-serif;
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--text-muted);
  font-style: italic;
}

.privacy-banner {
  background: linear-gradient(135deg, rgba(75, 83, 32, 0.3), rgba(10, 31, 68, 0.4));
  border: 1px solid var(--border);
  border-left: 3px solid var(--gold);
  border-radius: 10px;
  padding: 14px;
  margin-bottom: 16px;
}
.privacy-banner strong {
  display: block;
  font-size: 14px;
  color: #fff;
  margin-bottom: 4px;
}
.privacy-banner p {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.5;
}

.privacy-h4 {
  font-family: 'Oswald', sans-serif;
  font-size: 12px;
  letter-spacing: 0.15em;
  color: var(--gold);
  text-transform: uppercase;
  margin: 16px 0 8px;
}

.privacy-list {
  list-style: none;
  padding: 0;
  margin: 0 0 8px;
}
.privacy-list li {
  font-size: 13px;
  color: var(--text);
  padding: 5px 0;
  display: flex;
  gap: 8px;
}
.privacy-list li::before {
  content: '▸';
  color: var(--gold);
  font-family: 'JetBrains Mono', monospace;
  flex-shrink: 0;
}
.privacy-list li strong {
  color: var(--gold-soft);
  font-weight: 600;
}

.privacy-fineprint {
  font-size: 11px;
  color: var(--text-subtle);
  line-height: 1.5;
  background: var(--bg-elev-2);
  border-radius: 8px;
  padding: 12px;
  margin-top: 16px;
}

/* When running as installed PWA or native app, force full-screen */
.pwa-standalone, .native-app {
  background: var(--bg) !important;
  padding: 0 !important;
}
.pwa-standalone .device-frame, .native-app .device-frame {
  width: 100% !important;
  height: 100vh !important;
  min-height: 100vh !important;
  border-radius: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
  background: var(--bg) !important;
}
.pwa-standalone .device-frame::before, .native-app .device-frame::before { display: none !important; }
.pwa-standalone .device-screen, .native-app .device-screen {
  border-radius: 0 !important;
  height: 100vh !important;
}
.pwa-standalone .desktop-note, .native-app .desktop-note { display: none !important; }

/* ==========================================================
   SPLASH SCREEN
   ========================================================== */
.splash {
  position: absolute;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #050810;
  animation: splashFadeOut 0.4s ease 2.0s forwards;
}
.splash-bg {
  position: absolute;
  inset: 0;
  background-image: url('../img/splash-bg.jpg');
  background-size: cover;
  background-position: center;
  filter: blur(2px) brightness(0.45) saturate(1.1);
  transform: scale(1.05);
}
.splash-overlay {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at center, transparent 30%, rgba(5,8,16,0.95) 90%),
    linear-gradient(180deg, rgba(10,31,68,0.6), rgba(5,8,16,0.85));
}
.splash-content {
  position: relative;
  text-align: center;
  padding: 0 30px;
  animation: splashUp 0.7s cubic-bezier(0.2, 0.7, 0.3, 1.4);
  padding-top: var(--safe-top);
}
.splash-crest {
  width: 110px;
  height: auto;
  margin: 0 auto 18px;
  display: block;
  filter: drop-shadow(0 0 30px rgba(200, 161, 0, 0.4));
  animation: crestPulse 2s ease-in-out infinite;
}
.splash-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.3em;
  color: var(--gold);
  margin-bottom: 12px;
  opacity: 0;
  animation: splashFadeIn 0.6s ease 0.3s forwards;
}
.splash-title {
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  font-size: 38px;
  letter-spacing: 0.04em;
  color: #fff;
  line-height: 1;
  margin-bottom: 14px;
  text-shadow: 0 2px 30px rgba(0,0,0,0.8);
  opacity: 0;
  animation: splashFadeIn 0.6s ease 0.5s forwards;
}
.splash-title span {
  display: block;
  color: var(--gold);
  font-weight: 500;
  font-size: 30px;
  letter-spacing: 0.18em;
  margin-top: 4px;
}
.splash-tagline {
  font-family: 'Oswald', sans-serif;
  font-size: 11px;
  letter-spacing: 0.25em;
  color: var(--text-muted);
  text-transform: uppercase;
  margin-bottom: 36px;
  opacity: 0;
  animation: splashFadeIn 0.6s ease 0.7s forwards;
}
.splash-loader {
  width: 140px;
  height: 2px;
  background: rgba(255,255,255,0.1);
  border-radius: 2px;
  margin: 0 auto 18px;
  overflow: hidden;
  opacity: 0;
  animation: splashFadeIn 0.4s ease 0.9s forwards;
}
.splash-loader-bar {
  height: 100%;
  width: 30%;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  animation: splashLoading 1.4s ease-in-out infinite;
}
.splash-version {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  color: var(--text-subtle);
  letter-spacing: 0.15em;
  opacity: 0;
  animation: splashFadeIn 0.6s ease 1.1s forwards;
}

@keyframes splashUp {
  from { opacity: 0; transform: translateY(20px) scale(0.95); }
  to { opacity: 1; transform: none; }
}
@keyframes splashFadeIn { to { opacity: 1; } }
@keyframes splashFadeOut {
  to { opacity: 0; visibility: hidden; pointer-events: none; }
}
@keyframes crestPulse {
  0%, 100% { filter: drop-shadow(0 0 30px rgba(200, 161, 0, 0.3)); }
  50% { filter: drop-shadow(0 0 50px rgba(200, 161, 0, 0.6)); }
}
@keyframes splashLoading {
  0% { transform: translateX(-150%); }
  100% { transform: translateX(450%); }
}

.splash.dismissed { display: none !important; }

/* Replace SVG crest in onboarding with the real PNG */
.onboard-crest-img {
  width: 110px;
  height: auto;
  margin: 0 auto 28px;
  display: block;
  filter: drop-shadow(0 0 24px rgba(200, 161, 0, 0.3));
}

/* In-app crest badge — appears as small mark on Home, Programs, Profile */
.brand-mark {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  background: linear-gradient(90deg, rgba(10,31,68,0.6), transparent);
  border-radius: 10px;
  margin-bottom: 14px;
}
.brand-mark img {
  width: 32px;
  height: auto;
  flex-shrink: 0;
}
.brand-mark-text {
  flex: 1;
  min-width: 0;
}
.brand-mark-name {
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.1em;
  color: #fff;
  line-height: 1;
}
.brand-mark-name span { color: var(--gold); font-weight: 500; }
.brand-mark-meta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.15em;
  color: var(--text-muted);
  margin-top: 3px;
}

/* Crest watermark in profile screen */
.profile-card-crest {
  position: absolute;
  top: 8px; right: 8px;
  width: 36px;
  height: auto;
  opacity: 0.5;
}

/* App footer crest */
.app-footer-crest {
  width: 40px;
  height: auto;
  margin: 0 auto 8px;
  display: block;
  opacity: 0.6;
}