:root {
  color-scheme: dark;
  --bg: #05070b;
  --surface: rgba(20, 24, 32, 0.88);
  --surface-strong: rgba(31, 36, 47, 0.94);
  --text: #f5f7fb;
  --muted: #9aa4b5;
  --line: rgba(255, 255, 255, 0.12);
  --border: var(--line);
  --accent: #0a84ff;
  --accent-strong: #64b5ff;
  --accent-soft: rgba(10, 132, 255, 0.16);
  --warn: #ffd166;
  --warn-soft: rgba(255, 209, 102, 0.13);
  --danger: #ff5a64;
  --danger-soft: rgba(255, 90, 100, 0.14);
  --good: #36d67d;
  --good-soft: rgba(54, 214, 125, 0.12);
  --good-rail: rgba(54, 214, 125, 0.6);
  --warn-rail: rgba(255, 209, 102, 0.6);
  --danger-rail: rgba(255, 90, 100, 0.64);
  --blue: #0a84ff;
  --orange: #ff9f0a;
  --radius: 8px;
  --tap: 48px;
  --safe-top: env(safe-area-inset-top);
  --safe-right: env(safe-area-inset-right);
  --safe-bottom: env(safe-area-inset-bottom);
  --safe-left: env(safe-area-inset-left);
  --chrome-safe-top: var(--safe-top);
  --chrome-safe-bottom: var(--safe-bottom);
  --chrome-safe-left: var(--safe-left);
  --chrome-safe-right: var(--safe-right);
  --app-width: 100%;
  --app-height: 100dvh;
  --visible-width: 100%;
  --visible-height: 100dvh;
  --shadow: 0 18px 50px rgba(0, 0, 0, 0.34);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif;
}

* {
  box-sizing: border-box;
  min-width: 0;
}

html {
  min-height: 100%;
  min-height: -webkit-fill-available;
  width: 100%;
  max-width: 100%;
  background: var(--bg);
  overflow-x: hidden;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  min-height: 100%;
  min-height: -webkit-fill-available;
  width: 100%;
  max-width: 100%;
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-size: 16px;
  letter-spacing: 0;
  overflow-x: hidden;
}

html.auth-standalone {
  position: fixed;
  inset: 0;
  left: 0;
  right: auto;
  width: var(--app-width);
  min-width: var(--app-width);
  max-width: var(--app-width);
  height: var(--app-height);
  max-height: var(--app-height);
  overflow: hidden !important;
  overscroll-behavior: none;
  overscroll-behavior-x: none;
}

body.auth-standalone {
  position: fixed;
  inset: 0;
  left: 0;
  right: auto;
  width: var(--app-width);
  min-width: var(--app-width);
  max-width: var(--app-width);
  height: var(--app-height);
  max-height: var(--app-height);
  overflow: hidden !important;
  overscroll-behavior: none;
  overscroll-behavior-x: none;
  touch-action: pan-y;
}

html.pwa-standalone,
body.pwa-standalone {
  min-height: 100%;
  min-height: 100dvh;
  width: var(--app-width);
  max-width: var(--app-width);
  background: var(--bg);
  overflow-x: hidden;
  overscroll-behavior-x: none;
  touch-action: pan-y;
}

html.pwa-standalone:not(.auth-standalone),
body.pwa-standalone:not(.auth-standalone) {
  position: fixed;
  inset: 0;
  left: 0;
  right: auto;
  height: var(--app-height);
  max-height: var(--app-height);
  overflow: hidden !important;
  overscroll-behavior: none;
}

button,
input,
select,
textarea {
  font: inherit;
  min-width: 0;
  max-width: 100%;
}

button {
  -webkit-tap-highlight-color: transparent;
}

.secure-entry {
  -webkit-text-security: disc;
}

.skip-link {
  position: absolute;
  left: 12px;
  top: 12px;
  z-index: 10;
  transform: translateY(-140%);
  background: var(--text);
  color: var(--bg);
  padding: 10px 12px;
  border-radius: var(--radius);
}

.skip-link:focus {
  transform: translateY(0);
}

.app-shell {
  min-height: 100vh;
  min-height: 100dvh;
  width: 100%;
  max-width: 100vw;
  overflow-x: clip;
  padding-bottom: calc(72px + env(safe-area-inset-bottom));
}

.app-shell.auth-shell {
  padding-bottom: 0;
  min-height: 100svh;
}

.app-shell.standalone-shell:not(.auth-shell) {
  min-height: 100svh;
  width: var(--app-width);
  min-width: 0;
  max-width: var(--app-width);
  overflow-x: clip;
}

html.pwa-standalone .app-shell.standalone-shell:not(.auth-shell) {
  position: fixed;
  inset: 0;
  left: 0;
  right: auto;
  width: var(--app-width);
  height: var(--app-height);
  min-height: var(--app-height);
  max-height: var(--app-height);
  overflow: hidden;
  transform: translateX(0);
}

.topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
  background: rgba(5, 7, 11, 0.88);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: saturate(180%) blur(18px);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  overflow: hidden;
}

.topbar-inner {
  width: 100%;
  max-width: min(980px, var(--app-width));
  margin: 0 auto;
  padding: calc(10px + var(--chrome-safe-top)) 16px 10px;
  overflow-x: clip;
}

.app-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.app-title-main {
  display: grid;
  gap: 2px;
  flex: 1 1 auto;
  min-width: 0;
}

.app-title h1 {
  margin: 0;
  font-size: 24px;
  line-height: 1.15;
  letter-spacing: 0;
}

.topbar-mode-title {
  font-size: 22px;
}

.topbar-subtitle {
  color: var(--muted);
  font-size: 12px;
  font-weight: 400;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mode-subtitle {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
  margin-bottom: 4px;
}

/* Bottom nav — fixed app shell bar */
.bottom-nav {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 20;
  padding: 6px 4px calc(6px + var(--chrome-safe-bottom));
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(5, 7, 11, 0.88);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  max-width: 600px;
  margin: 0 auto;
  border-radius: 0;
}

html.pwa-standalone .topbar {
  right: auto;
  width: var(--app-width);
  max-width: var(--app-width);
}

html.pwa-standalone .topbar-inner {
  max-width: var(--app-width);
  padding-top: calc(8px + var(--chrome-safe-top));
  padding-right: max(14px, var(--chrome-safe-right));
  padding-bottom: 8px;
  padding-left: max(14px, var(--chrome-safe-left));
}

html.pwa-standalone .app-title {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 8px;
}

html.pwa-standalone .app-title-main {
  max-width: 100%;
}

html.pwa-standalone .topbar-actions {
  flex: 0 0 auto;
  max-width: min(86px, 32vw);
  flex-wrap: nowrap;
}

html.pwa-standalone .topbar-lock {
  min-width: 0;
  min-height: 36px;
  max-width: 100%;
  padding: 0 10px;
}

html.pwa-standalone .main-flow {
  width: var(--app-width);
  height: var(--app-height);
  max-width: var(--app-width);
  max-height: var(--app-height);
  padding-top: calc(90px + var(--chrome-safe-top));
  padding-right: max(14px, var(--chrome-safe-right));
  padding-bottom: calc(84px + var(--chrome-safe-bottom));
  padding-left: max(14px, var(--chrome-safe-left));
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

html.pwa-standalone .bottom-nav {
  right: auto;
  width: var(--app-width);
  max-width: var(--app-width);
  padding-bottom: calc(8px + var(--chrome-safe-bottom));
}

@media (min-width: 760px) {
  .bottom-nav {
    max-width: 400px;
    left: 50%;
    transform: translateX(-50%);
    right: auto;
    bottom: 12px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    padding: 8px 4px;
  }
}

.nav-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 6px 4px 2px;
  min-height: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  color: var(--muted);
  font-size: 10px;
  letter-spacing: 0;
  cursor: pointer;
  transition: color 0.1s;
  -webkit-tap-highlight-color: transparent;
}

.nav-tab.active {
  color: var(--accent);
}

.nav-tab svg {
  flex-shrink: 0;
}


.save-state {
  color: var(--muted);
  font-size: 13px;
  white-space: nowrap;
}

.topbar-lock {
  min-height: 36px;
  padding: 0 10px;
}

.topbar-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  flex-shrink: 0;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
}

.topbar-link {
  min-height: 36px;
  padding: 0 8px;
}

.event-switcher {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
}

.event-actions {
  display: grid;
  grid-template-columns: auto;
  gap: 8px;
}

.event-switcher select,
.event-switcher button {
  min-height: var(--tap);
}

.event-switcher select {
  min-width: 0;
}


.main-flow {
  display: grid;
  gap: 18px;
  width: 100%;
  max-width: min(980px, var(--app-width));
  margin: 0 auto;
  padding: 90px 16px 80px;
  overflow-x: clip;
}

.app-shell.mode-race .main-flow {
  padding-top: 136px;
}

.section {
  min-width: 0;
  max-width: 100%;
  background: transparent;
  scroll-margin-top: 140px;
}

.section-header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
  margin: 0 2px 8px;
}

.section-header h2 {
  margin: 0;
  font-size: 21px;
  line-height: 1.2;
  letter-spacing: 0;
  overflow-wrap: anywhere;
}

.section-header p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 14px;
  overflow-wrap: anywhere;
}

.group {
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.group + .group {
  margin-top: 10px;
}

.row,
.input-row,
.metric-row,
.task-row,
.stop-row,
.test-row {
  display: grid;
  min-height: 54px;
  padding: 12px;
  border-top: 1px solid var(--line);
}

.row:first-child,
.input-row:first-child,
.metric-row:first-child,
.task-row:first-child,
.stop-row:first-child,
.test-row:first-child {
  border-top: 0;
}

.input-row {
  grid-template-columns: 1fr;
  gap: 8px;
}

.input-row.compact {
  min-height: 0;
  padding: 0;
  border-top: 0;
}

label,
.label {
  color: var(--text);
  font-weight: 600;
  font-size: 15px;
}

.hint {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

input,
select,
textarea,
.auth-edit-field {
  width: 100%;
  min-width: 0;
  min-height: var(--tap);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius);
  background: var(--surface-strong);
  color: var(--text);
  padding: 10px 12px;
  outline: none;
  overflow: hidden;
  text-overflow: ellipsis;
}

.auth-edit-field {
  display: block;
  height: var(--tap);
  max-height: var(--tap);
  line-height: 1.2;
  appearance: none;
  -webkit-appearance: none;
}

textarea {
  min-height: 86px;
  overflow: auto;
  resize: vertical;
}

input[type="range"] {
  min-height: 36px;
  padding: 0;
  accent-color: var(--accent);
}

input[type="file"] {
  padding: 12px;
}

input:focus,
select:focus,
textarea:focus,
.auth-edit-field:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.14);
}

.two-up {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.three-up {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 12px;
}

.button-row.tight {
  padding: 0;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--tap);
  min-width: var(--tap);
  padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.06);
  color: var(--accent);
  cursor: pointer;
  text-decoration: none;
  font-weight: 600;
  overflow-wrap: anywhere;
  text-align: center;
}

.btn.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: white;
}

.btn.danger {
  background: var(--surface);
  color: var(--danger);
}

.btn.ghost {
  background: transparent;
}

.btn:hover,
.tab-link:hover {
  border-color: rgba(255, 255, 255, 0.22);
}

.btn.icon {
  padding: 0;
}

.btn:active {
  transform: translateY(1px);
}

.btn:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.segmented {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-strong);
}

.segmented button {
  min-height: var(--tap);
  border: 0;
  border-left: 1px solid var(--line);
  background: transparent;
  color: var(--text);
  font-weight: 650;
}

.segmented button:first-child {
  border-left: 0;
}

.segmented button.active {
  background: var(--accent);
  color: white;
}

.metric-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.metric {
  min-height: 92px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.metric strong {
  display: block;
  margin-top: 6px;
  font-size: 22px;
  line-height: 1.1;
  letter-spacing: 0;
  overflow-wrap: anywhere;
}

.metric span {
  color: var(--muted);
  font-size: 13px;
  overflow-wrap: anywhere;
}

.dashboard-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

.dashboard-card {
  min-height: 96px;
  padding: 12px;
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.dashboard-card span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
}

.dashboard-card h3 {
  margin: 6px 0 4px;
  font-size: 20px;
  line-height: 1.1;
  letter-spacing: 0;
  overflow-wrap: anywhere;
}

.dashboard-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.dashboard-card.good,
.dashboard-card.warn,
.dashboard-card.danger {
  box-shadow: inset 3px 0 0 var(--good-rail);
}

.dashboard-card.warn {
  box-shadow: inset 3px 0 0 var(--warn-rail);
}

.dashboard-card.danger {
  box-shadow: inset 3px 0 0 var(--danger-rail);
}

.hero-card {
  grid-column: 1 / -1;
  min-height: 104px;
}

.home-dashboard-grid {
  gap: 10px;
}

.home-hero {
  min-height: 134px;
  display: grid;
  align-content: center;
  gap: 8px;
}

.home-hero h3 {
  margin-top: 2px;
  font-size: 27px;
  line-height: 1.08;
}

.home-hero .setup-bar {
  margin-top: 4px;
}

.home-next {
  min-height: 132px;
}

.home-next h3 {
  font-size: 23px;
}

.home-summary-card {
  min-height: 92px;
}

.dashboard-weather-note {
  margin-top: 10px;
}

.setup-status {
  display: grid;
  gap: 10px;
  padding: 14px;
  border-radius: var(--radius);
  background: var(--surface);
}

.setup-status div:first-child {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.setup-status span {
  color: var(--muted);
  font-size: 13px;
}

.setup-bar {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--surface-strong);
}

.setup-bar i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--accent);
}

.dashboard-actions {
  padding-left: 0;
  padding-right: 0;
}

.dashboard-primary-action {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.dashboard-tool-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 4px;
}

.tool-tile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  padding: 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  text-align: left;
  cursor: pointer;
}

.tool-tile:hover {
  background: var(--surface-strong);
}

.tool-tile:active {
  opacity: 0.8;
}

.tool-tile strong {
  font-size: 15px;
  font-weight: 600;
}

.tool-tile span {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.3;
}

.setup-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin-bottom: 4px;
}

.setup-banner-text {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.setup-banner-text strong {
  font-size: 14px;
}

.setup-banner-text span {
  font-size: 13px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.setup-banner-btn {
  flex-shrink: 0;
  min-height: 34px;
  padding: 0 10px;
  font-size: 13px;
}

.start-screen {
  display: grid;
  min-height: calc(100vh - 128px);
  min-height: calc(100dvh - 128px);
  align-items: end;
}

.start-card {
  display: grid;
  gap: 14px;
  padding: 22px 16px;
  border-radius: var(--radius);
  background: var(--surface);
}

.toolkit-landing {
  position: relative;
  gap: 18px;
  align-items: stretch;
  min-height: calc(100vh - 128px);
  min-height: calc(100dvh - 128px);
}

.toolkit-landing::before {
  content: "";
  position: absolute;
  inset: -14px -16px auto;
  height: min(680px, calc(100vh - 20px));
  height: min(680px, calc(100dvh - 20px));
  background:
    linear-gradient(90deg, rgba(5, 7, 11, 0.96) 0%, rgba(5, 7, 11, 0.78) 42%, rgba(5, 7, 11, 0.22) 78%),
    linear-gradient(0deg, var(--bg) 0%, rgba(5, 7, 11, 0.12) 46%, rgba(5, 7, 11, 0.04) 100%),
    url("assets/cycle-race-hero.png") center / cover;
  pointer-events: none;
}

.landing-hero,
.library-section {
  position: relative;
}

.landing-hero {
  display: grid;
  align-items: end;
  min-height: min(560px, calc(100vh - 158px));
  min-height: min(560px, calc(100dvh - 158px));
  padding: 42px 0 30px;
}

.landing-copy {
  display: grid;
  gap: 16px;
  max-width: 640px;
}

.landing-copy h2 {
  margin: 0;
  max-width: 620px;
  font-size: clamp(46px, 7.2vw, 82px);
  line-height: 0.96;
  letter-spacing: 0;
}

.landing-copy p {
  max-width: 520px;
  margin: 0;
  color: rgba(245, 247, 251, 0.78);
  font-size: 18px;
  line-height: 1.45;
}

.landing-feature-explorer {
  display: grid;
  gap: 12px;
  max-width: 760px;
  margin-top: 4px;
}

.landing-feature-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.landing-feature-tab {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 78px;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(245, 247, 251, 0.72);
  cursor: pointer;
  font-size: 14px;
  line-height: 1.35;
  text-align: left;
}

.landing-feature-copy {
  display: grid;
  gap: 4px;
}

.landing-feature-icon {
  display: grid;
  place-items: center;
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  border: 1px solid rgba(245, 247, 251, 0.18);
  border-radius: 999px;
  color: var(--accent-strong);
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
}

.landing-feature-tab.active {
  border-color: rgba(100, 181, 255, 0.78);
  background: rgba(10, 132, 255, 0.18);
}

.landing-feature-tab strong,
.landing-detail-head strong {
  color: var(--text);
}

.landing-feature-tab strong {
  font-size: 15px;
}

.landing-feature-detail {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius);
  background: rgba(5, 7, 11, 0.42);
  backdrop-filter: saturate(140%) blur(16px);
}

.landing-detail-head {
  display: grid;
  gap: 5px;
}

.landing-detail-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.landing-detail-head span {
  color: var(--accent-strong);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.landing-detail-close {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  min-height: 32px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--muted);
  cursor: pointer;
  font-size: 22px;
  line-height: 1;
}

.landing-detail-head strong {
  max-width: 650px;
  font-size: 20px;
  line-height: 1.15;
}

.landing-detail-head p {
  max-width: 680px;
  font-size: 15px;
}

.landing-capability-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 14px;
}

.landing-capability-grid span {
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(245, 247, 251, 0.76);
  font-size: 13px;
  line-height: 1.35;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 8px;
}

.hero-cta {
  min-height: 54px;
  padding: 0 18px;
}


.shell-panel {
  display: grid;
  gap: 12px;
  padding: 16px;
  border-radius: var(--radius);
}

.panel-head {
  display: grid;
  gap: 4px;
}

.panel-head span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}

.panel-head strong {
  color: var(--text);
  font-size: 18px;
}

.start-kicker {
  color: var(--accent-strong);
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.start-card h2 {
  margin: 0;
  font-size: 30px;
  line-height: 1.08;
  letter-spacing: 0;
}

.start-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.4;
}

.start-picker {
  display: grid;
  gap: 7px;
}

.start-picker span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
}

.start-actions {
  display: grid;
  gap: 10px;
}

.start-actions.single {
  grid-template-columns: 1fr;
}

.start-actions .btn {
  min-height: 54px;
}

.start-transfer-actions .btn {
  min-height: 46px;
}

.file-btn {
  position: relative;
  overflow: hidden;
}

.file-btn input {
  position: absolute;
  inset: 0;
  cursor: pointer;
  opacity: 0;
}

.auth-flow {
  min-height: 100vh;
  min-height: 100dvh;
  max-width: 1180px;
  padding-top: 0;
}

.password-screen {
  display: grid;
  min-height: calc(100vh - 72px);
  min-height: calc(100dvh - 72px);
  align-items: center;
}

.password-card {
  display: grid;
  gap: 14px;
  padding: 22px 16px;
  border-radius: var(--radius);
  background: var(--surface);
}

.password-landing {
  align-items: start;
}

.password-landing .password-card {
  position: relative;
  width: 100%;
  margin-top: -10px;
  padding: 18px;
}

.password-landing .landing-hero {
  min-height: auto;
  padding-bottom: 28px;
}

.auth-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.05);
}

.auth-tabs button {
  min-height: 44px;
  border: 0;
  border-left: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-weight: 700;
}

.auth-tabs button:first-child {
  border-left: 0;
}

.auth-tabs button.active {
  background: var(--accent);
  color: white;
}

.auth-form {
  display: grid;
  gap: 12px;
}

.auth-email-review {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 8px 8px 8px 11px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.05);
}

.auth-email-review span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.auth-email-review .btn {
  min-height: 32px;
  padding: 0 10px;
}

.auth-entry-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.auth-entry-actions .btn {
  min-height: 48px;
}

.auth-form[data-action="unlock-app"] {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  align-items: end;
}

.auth-form[data-action="unlock-app"] .btn {
  min-width: 176px;
}

.auth-form[data-action="create-local-account"] {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.auth-form[data-action="create-local-account"] .btn,
.auth-form .password-error {
  grid-column: 1 / -1;
}

.password-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: end;
}

.password-card h2 {
  margin: 0;
  font-size: 30px;
  line-height: 1.08;
  letter-spacing: 0;
}

.password-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.4;
}

.password-card .btn {
  min-height: 54px;
}

.password-error {
  padding: 12px;
  border-radius: var(--radius);
  background: var(--danger-soft);
  color: var(--danger);
  font-weight: 650;
}

.onboarding-card {
  display: grid;
  gap: 14px;
  padding: 22px 16px;
  border-radius: var(--radius);
  background: var(--surface);
}

.onboarding-card h2 {
  margin: 0;
  font-size: 30px;
  line-height: 1.08;
  letter-spacing: 0;
}

.onboarding-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.4;
}

.onboarding-actions {
  display: grid;
  gap: 10px;
}

.onboarding-actions .btn {
  min-height: 54px;
}

.library-section {
  display: grid;
  gap: 12px;
  margin-top: 24px;
}

.library-heading {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
}

.library-subhead {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.4;
}

.library-card {
  display: grid;
  gap: 12px;
  padding: 16px;
  border-radius: var(--radius);
  background: rgba(17, 21, 30, 0.76);
  border: 1px solid var(--border);
}

.library-card-info {
  display: grid;
  gap: 4px;
}

.library-card-name {
  font-weight: 700;
  font-size: 16px;
}

.library-card-meta {
  font-size: 13px;
  color: var(--accent);
  font-weight: 600;
}

.library-card-desc {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.4;
}

@media (min-width: 480px) {
  .library-card {
    grid-template-columns: 1fr auto;
    align-items: center;
  }
}

.wizard-card {
  display: grid;
  gap: 12px;
}

.wizard-progress {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding: 0 2px 8px;
  scrollbar-width: none;
}

.wizard-progress::-webkit-scrollbar {
  display: none;
}

.step-pill {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  min-width: max-content;
  padding: 0 11px;
  border: 0;
  border-radius: 999px;
  background: var(--surface);
  color: var(--muted);
  font-weight: 650;
  white-space: nowrap;
  scroll-snap-align: start;
}

.step-pill.complete {
  color: var(--good);
}

.step-pill.active {
  background: var(--accent);
  color: white;
}

.step-pill.skipped {
  opacity: 0.35;
}

.wizard-fields,
.wizard-block {
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--surface);
}

.wizard-block {
  padding: 12px;
}

.wizard-block h3 {
  margin: 0 0 10px;
  font-size: 16px;
}

.choice-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.choice-grid.compact {
  margin-top: 10px;
}

.choice-card {
  display: grid;
  gap: 5px;
  min-height: 64px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  text-align: left;
  cursor: pointer;
  overflow-wrap: anywhere;
}

.choice-card span {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.35;
}

.choice-card.active {
  border-color: rgba(0, 122, 255, 0.45);
  background: var(--accent-soft);
  box-shadow: inset 3px 0 0 var(--accent);
}

.two-choice {
  grid-template-columns: 1fr 1fr;
}

.wizard-summary {
  margin-top: 0;
}

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

.fuel-card-preview .fuel-card-grid {
  max-height: 430px;
  overflow: auto;
}

.advanced-panel {
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--surface);
}

.advanced-panel + .advanced-panel {
  margin-top: 10px;
}

.advanced-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: var(--tap);
  padding: 13px 12px;
  border: 0;
  background: var(--surface);
  color: var(--text);
  font-weight: 700;
  text-align: left;
}

.advanced-toggle strong {
  color: var(--accent);
  font-size: 14px;
}

.advanced-body {
  display: grid;
  gap: 10px;
  padding: 0 0 12px;
  border-top: 1px solid var(--line);
}

.quick-start-panel {
  padding: 12px;
  border-radius: var(--radius);
  background: var(--surface);
}

.quick-start-panel summary {
  cursor: pointer;
  font-weight: 700;
}

.callout {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  line-height: 1.45;
  box-shadow: var(--shadow);
  overflow-wrap: anywhere;
}

.callout.good {
  background: var(--surface);
  box-shadow: inset 3px 0 0 var(--good-rail);
}

.callout.warn {
  background: var(--surface);
  box-shadow: inset 3px 0 0 var(--warn-rail);
}

.callout.danger {
  background: var(--surface);
  box-shadow: inset 3px 0 0 var(--danger-rail);
}

.callout.good h3 {
  color: var(--good);
}

.callout.warn h3 {
  color: var(--warn);
}

.callout.danger h3 {
  color: var(--danger);
}

.callout h3,
.fuel-card h3 {
  margin: 0 0 6px;
  font-size: 16px;
  line-height: 1.25;
  letter-spacing: 0;
}

.callout p,
.fuel-card p {
  margin: 0;
}

.callout p + p,
.fuel-card p + p {
  margin-top: 8px;
}

.route-figure {
  position: relative;
  min-height: 210px;
  padding: 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.route-figure svg {
  display: block;
  width: 100%;
  height: 190px;
  overflow: hidden;
}

.route-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding-top: 8px;
  color: var(--muted);
  font-size: 13px;
}

.route-legend span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.legend-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--accent);
}

.legend-dot.bottle {
  background: var(--orange);
}

.legend-dot.eat {
  background: #ff9f0a;
}

.legend-dot.caffeine {
  background: #af52de;
}

.legend-dot.check {
  background: var(--accent);
}

.empty-route {
  display: grid;
  min-height: 190px;
  place-items: center;
  color: var(--muted);
  text-align: center;
}

.stop-row {
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 10px;
}

.stop-meta,
.task-meta {
  color: var(--muted);
  font-size: 13px;
}

.task-row {
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 10px;
}

.task-row.compact {
  min-height: 0;
  padding: 0;
  border-top: 0;
}

.task-row input[type="checkbox"] {
  width: 24px;
  min-height: 24px;
  margin-top: 1px;
  accent-color: var(--accent);
}

.task-row.done .task-title {
  color: var(--muted);
  text-decoration: line-through;
}

.check-block + .check-block,
.readiness-card + .check-block {
  margin-top: 10px;
}

.readiness-card {
  margin-bottom: 2px;
}

.answer-list {
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--surface);
}

.answer-row {
  display: grid;
  gap: 6px;
  padding: 12px;
  border-top: 1px solid var(--line);
  background: var(--surface);
}

.answer-row:first-child {
  border-top: 0;
}

.answer-row.warn {
  box-shadow: inset 3px 0 0 var(--warn-rail);
}

.answer-row.danger {
  box-shadow: inset 3px 0 0 var(--danger-rail);
}

.answer-row.good {
  box-shadow: inset 3px 0 0 var(--good-rail);
}

.answer-head {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: start;
}

.answer-row p {
  margin: 0;
  line-height: 1.4;
}

.fuel-window {
  grid-template-columns: 96px 1fr;
}

.window-priority {
  align-self: start;
  display: inline-flex;
  justify-content: center;
  min-height: 28px;
  padding: 5px 8px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-strong);
  font-size: 12px;
  font-weight: 600;
}

.fuel-window.bottle_stop .window-priority {
  background: rgba(255, 159, 10, 0.14);
  color: var(--orange);
}

.fuel-window.caffeine .window-priority {
  background: rgba(191, 90, 242, 0.16);
  color: #d9a7ff;
}

.fuel-window.eat .window-priority {
  background: rgba(255, 159, 10, 0.14);
  color: #ffd28a;
}

.fuel-window.time-based .window-priority {
  background: var(--accent-soft);
  color: var(--accent-strong);
}

.segment-card {
  display: grid;
  gap: 8px;
  padding: 12px;
  border-top: 1px solid var(--line);
  background: var(--surface);
}

.segment-card:first-child {
  border-top: 0;
}

.segment-card.warn {
  background: var(--surface);
  box-shadow: inset 3px 0 0 var(--warn-rail);
}

.segment-card.danger {
  background: var(--surface);
  box-shadow: inset 3px 0 0 var(--danger-rail);
}

.segment-head {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: start;
}

.segment-card p {
  margin: 0;
  line-height: 1.4;
}

.status-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 4px 9px;
  border-radius: 999px;
  background: var(--good-soft);
  color: var(--good);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.status-pill.warn {
  background: var(--warn-soft);
  color: var(--warn);
}

.status-pill.danger {
  background: var(--danger-soft);
  color: var(--danger);
}

.pack-list {
  display: grid;
  gap: 0;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--surface);
}

.pack-list .callout {
  border-top: 1px solid var(--line);
  border-radius: 0;
}

.pack-list .callout:first-child {
  border-top: 0;
}

.head-unit-card {
  margin-top: 0;
}

.feature-module {
  min-height: calc(100vh - 190px);
}

.feature-frame-wrap {
  overflow: hidden;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: #050812;
}

.feature-frame {
  display: block;
  width: 100%;
  min-height: calc(100vh - 218px);
  border: 0;
  background: #050812;
}

.gear-feature-frame {
  min-height: 1180px;
}

.gear-editor {
  margin-top: 10px;
}

.gear-form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}

.target-gears {
  margin-top: 10px;
}

.target-gears .metric-row {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
}

.gear-table-wrap {
  overflow-x: auto;
  border-radius: var(--radius);
  background: var(--surface);
  -webkit-overflow-scrolling: touch;
}

.gear-table {
  width: 100%;
  min-width: 660px;
  border-collapse: collapse;
  font-size: 14px;
}

.gear-table th,
.gear-table td {
  padding: 11px 12px;
  border-top: 1px solid var(--line);
  text-align: left;
  white-space: nowrap;
}

.gear-table th {
  border-top: 0;
  color: var(--muted);
  font-size: 12px;
  text-transform: uppercase;
}

.gear-table tr.target {
  background: var(--accent-soft);
}

.stack-item {
  display: grid;
  gap: 12px;
  padding: 14px 12px;
  border-top: 1px solid var(--line);
}

.stack-item:first-child {
  border-top: 0;
}

.stack-item.inactive {
  background: rgba(255, 255, 255, 0.04);
}

.stack-head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: start;
  gap: 10px;
}

.stack-head input[type="checkbox"] {
  width: 24px;
  min-height: 24px;
  margin-top: 1px;
  accent-color: var(--accent);
}

.stack-fields {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.stack-notes {
  grid-column: 1 / -1;
}

.fuel-card {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
  overflow-wrap: anywhere;
}

.fuel-card-head {
  display: grid;
  gap: 8px;
}

.fuel-card-grid {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

.fuel-row h3 {
  font-size: 15px;
}

.fuel-card-details {
  margin-top: 10px;
  border-top: 1px solid var(--line);
}

.fuel-card-details summary {
  min-height: var(--tap);
  padding: 12px 0 0;
  color: var(--accent);
  cursor: pointer;
  font-weight: 700;
}

.fuel-warning {
  margin-top: 10px;
}

.export-status {
  margin: 0 12px 12px;
}

.export-actions {
  margin: 10px 0;
}

.export-preview {
  min-height: 220px;
  margin-top: 10px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
  line-height: 1.45;
}

.export-hub {
  display: grid;
  gap: 10px;
}

.export-preview-card {
  display: grid;
  gap: 12px;
  padding: 12px;
  border-radius: var(--radius);
  background: var(--surface);
}

.export-preview-head h3 {
  margin: 0;
  font-size: 18px;
}

.export-preview-head p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 14px;
}

.print-preview {
  max-height: 560px;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  -webkit-overflow-scrolling: touch;
}

.print-preview .print-card {
  min-width: 0;
  padding: 16px;
  color: #111;
  font-family: Arial, sans-serif;
}

.print-card section {
  margin-top: 12px;
}

.print-card h1 {
  margin: 0 0 8px;
  font-size: 24px;
  line-height: 1.15;
}

.print-card h2 {
  margin: 0 0 6px;
  font-size: 15px;
}

.print-card p,
.print-card li {
  font-size: 12px;
  line-height: 1.35;
}

.print-card ul {
  margin: 6px 0 0;
  padding-left: 18px;
}

.print-metrics {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin: 10px 0;
}

.print-metrics strong,
.print-row,
.print-label {
  display: block;
  min-width: 0;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 6px;
  overflow-wrap: anywhere;
}

.print-row + .print-row {
  margin-top: 6px;
}

.print-row p {
  margin: 3px 0 0;
}

.label-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

.print-label {
  min-height: 82px;
}

.print-label span {
  display: block;
  margin-top: 4px;
  font-size: 12px;
}

.print-write-line {
  height: 30px;
  border-bottom: 1px solid #333;
}

.pill-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.pill {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  max-width: 100%;
  padding: 0 10px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-strong);
  font-size: 13px;
  font-weight: 650;
  white-space: normal;
  overflow-wrap: anywhere;
}

.small-list {
  margin: 8px 0 0;
  padding-left: 0;
  color: var(--muted);
  line-height: 1.4;
  list-style: none;
}

.small-list li + li {
  margin-top: 6px;
}

.test-row {
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 10px;
}

.test-pass {
  color: var(--good);
  font-weight: 700;
}

.test-fail {
  color: var(--danger);
  font-weight: 700;
}

.footer-note {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
  padding: 0 2px;
  max-width: 100%;
  overflow-wrap: anywhere;
}

.print-only {
  display: none;
}

@media (min-width: 760px) {
  .main-flow {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
  }

  .section.full {
    grid-column: 1 / -1;
  }

  .dashboard-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .hero-card {
    grid-column: span 2;
  }

  .choice-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .start-card {
    max-width: 560px;
    justify-self: center;
    padding: 30px;
  }

  .onboarding-card {
    max-width: 560px;
    justify-self: center;
    padding: 30px;
  }

  .start-actions {
    grid-template-columns: 1fr 1fr;
  }

  .stack-fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .gear-form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .gear-form-grid .input-row:nth-child(odd) {
    border-right: 1px solid var(--line);
  }

  .gear-form-grid .input-row:nth-child(2) {
    border-top: 0;
  }
}

@media (min-width: 600px) {
  .metric-grid,
  .print-metrics,
  .label-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dashboard-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 760px) {
  .dashboard-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .hero-card {
    grid-column: span 2;
  }

  .print-metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 759px) {
  body {
    min-width: 0;
  }

  .topbar {
    border-bottom-color: rgba(255, 255, 255, 0.1);
  }

  .topbar-inner {
    padding-top: calc(6px + env(safe-area-inset-top));
    padding-bottom: 8px;
  }

  .app-title {
    margin-bottom: 6px;
  }

  .app-title h1 {
    font-size: 20px;
    overflow-wrap: anywhere;
  }

  .save-state {
    font-size: 12px;
  }

  .topbar-lock {
    min-height: 34px;
  }

  .event-switcher {
    gap: 8px;
    grid-template-columns: 1fr;
  }

  .event-actions {
    gap: 6px;
    grid-template-columns: 1fr;
  }

  .event-switcher select,
  .event-switcher button {
    min-height: 40px;
    font-size: 16px;
  }

  .bottom-nav {
    max-width: 100%;
    border-radius: 0;
    border-left: none;
    border-right: none;
    padding: 8px 4px calc(10px + env(safe-area-inset-bottom));
  }

  .topbar-mode-title {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.3px;
  }

  .app-title h1.topbar-mode-title {
    font-size: 22px;
  }

  .topbar-link {
    display: none;
  }

  .main-flow {
    gap: 12px;
    padding-top: calc(72px + env(safe-area-inset-top));
    padding-bottom: calc(90px + env(safe-area-inset-bottom));
  }

  html.pwa-standalone .topbar {
    right: auto;
    width: var(--app-width);
    max-width: var(--app-width);
  }

  html.pwa-standalone .topbar-inner {
    max-width: var(--app-width);
    padding-top: calc(8px + var(--chrome-safe-top));
    padding-right: max(14px, var(--chrome-safe-right));
    padding-bottom: 8px;
    padding-left: max(14px, var(--chrome-safe-left));
  }

  html.pwa-standalone .app-title {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 8px;
  }

  html.pwa-standalone .app-title-main {
    max-width: 100%;
  }

  html.pwa-standalone .topbar-actions {
    flex: 0 0 auto;
    max-width: min(86px, 32vw);
    flex-wrap: nowrap;
  }

  html.pwa-standalone .topbar-lock {
    min-width: 0;
    min-height: 36px;
    padding: 0 10px;
    font-size: 14px;
  }

  html.pwa-standalone .main-flow {
    width: var(--app-width);
    height: var(--app-height);
    max-width: var(--app-width);
    max-height: var(--app-height);
    padding-top: calc(78px + var(--chrome-safe-top));
    padding-right: max(14px, var(--chrome-safe-right));
    padding-bottom: calc(84px + var(--chrome-safe-bottom));
    padding-left: max(14px, var(--chrome-safe-left));
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }

  html.pwa-standalone .bottom-nav {
    right: auto;
    width: var(--app-width);
    max-width: var(--app-width);
    padding-bottom: calc(8px + var(--chrome-safe-bottom));
  }

  .app-shell.mode-race .main-flow {
    padding-top: calc(136px + env(safe-area-inset-top));
  }

  html.pwa-standalone .app-shell.mode-race .main-flow {
    padding-top: calc(136px + var(--chrome-safe-top));
  }

  .auth-flow {
    gap: 10px;
    padding-top: 0;
    padding-bottom: calc(18px + env(safe-area-inset-bottom));
  }

  .toolkit-landing {
    gap: 14px;
  }

  .toolkit-landing::before {
    inset: -10px -16px auto;
    height: min(620px, calc(100vh - 18px));
    background:
      linear-gradient(90deg, rgba(5, 7, 11, 0.96) 0%, rgba(5, 7, 11, 0.66) 60%, rgba(5, 7, 11, 0.26) 100%),
      linear-gradient(0deg, var(--bg) 0%, rgba(5, 7, 11, 0.1) 48%),
      url("assets/cycle-race-hero.png") center / cover;
  }

  .landing-hero {
    min-height: min(500px, calc(100vh - 170px));
    padding: 28px 0 18px;
  }

  .landing-copy {
    gap: 12px;
  }

  .landing-copy h2 {
    font-size: clamp(40px, 13vw, 60px);
    line-height: 0.98;
  }

  .landing-copy p {
    font-size: 16px;
  }

  .password-landing {
    gap: 10px;
    min-height: auto;
  }

  .password-landing .landing-hero {
    padding: 12px 0 6px;
  }

  .password-landing .landing-copy {
    gap: 8px;
  }

  .password-landing .landing-copy h2 {
    max-width: 340px;
    font-size: clamp(34px, 10.5vw, 44px);
    line-height: 1;
  }

  .password-landing .landing-copy p {
    max-width: 340px;
    font-size: 14px;
    line-height: 1.35;
  }

  .password-landing .landing-feature-explorer {
    gap: 8px;
  }

  .password-landing .landing-feature-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .password-landing .landing-feature-tab {
    min-height: 48px;
    align-content: center;
    padding: 8px;
  }

  .password-landing .landing-feature-tab .landing-feature-copy > span {
    display: none;
  }

  .password-landing .password-card {
    padding: 12px;
    gap: 10px;
  }

  .password-card .panel-head {
    gap: 2px;
  }

  .password-card .panel-head strong {
    font-size: 17px;
  }

  .auth-tabs button {
    min-height: 40px;
  }

  .auth-form {
    gap: 9px;
  }

  .auth-form input,
  .auth-edit-field,
  .auth-form .btn {
    min-height: 44px;
  }

  .auth-form .start-picker {
    gap: 5px;
  }

  .landing-capability-grid {
    grid-template-columns: 1fr;
  }

  .landing-capability-grid {
    gap: 0;
  }

  .landing-feature-detail {
    padding: 12px;
  }

  .landing-detail-head strong {
    font-size: 18px;
  }

  .landing-detail-head p {
    font-size: 14px;
  }

  .landing-feature-tabs {
    grid-template-columns: 1fr;
  }

  .hero-actions,
  .start-actions {
    display: grid;
    grid-template-columns: 1fr;
  }


  .password-landing .password-card {
    width: 100%;
    margin-top: 0;
  }

  .auth-form[data-action="unlock-app"],
  .auth-form[data-action="create-local-account"] {
    grid-template-columns: 1fr;
  }

  .auth-form[data-action="unlock-app"] .btn {
    min-width: 0;
  }

  .app-shell.auth-shell.standalone-shell {
    position: fixed;
    inset: 0;
    width: 100%;
    max-width: 100%;
    min-height: var(--app-height);
    height: var(--app-height);
    overflow: hidden !important;
    overscroll-behavior: none;
    overscroll-behavior-x: none;
    touch-action: pan-y;
    background:
      linear-gradient(90deg, rgba(5, 7, 11, 0.96) 0%, rgba(5, 7, 11, 0.66) 60%, rgba(5, 7, 11, 0.26) 100%),
      linear-gradient(0deg, var(--bg) 0%, rgba(5, 7, 11, 0.1) 48%),
      url("assets/cycle-race-hero.png") center / cover;
  }

  .app-shell.auth-shell.standalone-shell .auth-flow {
    height: 100%;
    width: 100%;
    max-width: 430px;
    margin: 0 auto;
    gap: 0;
    overflow: hidden !important;
    padding-top: max(14px, var(--chrome-safe-top));
    padding-right: max(22px, var(--chrome-safe-right));
    padding-bottom: max(18px, var(--chrome-safe-bottom));
    padding-left: max(22px, var(--chrome-safe-left));
  }

  .app-shell.auth-shell.standalone-shell .toolkit-landing {
    grid-template-rows: minmax(0, 1fr) auto minmax(14px, 0.24fr);
    align-content: stretch;
    align-items: stretch;
    gap: clamp(10px, 2svh, 20px);
    height: 100%;
    width: 100%;
    max-width: 100%;
    min-height: 0;
    overflow: hidden !important;
  }

  .app-shell.auth-shell.standalone-shell .toolkit-landing.has-feature-detail {
    grid-template-rows: minmax(0, 1fr) auto minmax(0, 0.04fr);
    gap: clamp(8px, 1.4svh, 14px);
  }

  .app-shell.auth-shell.standalone-shell .toolkit-landing::before {
    display: none;
  }

  .app-shell.auth-shell.standalone-shell .password-landing .landing-hero {
    min-height: 0;
    max-height: none;
    height: 100%;
    align-items: center;
    overflow: hidden;
    padding: clamp(8px, 2.4svh, 24px) 0 clamp(6px, 1.6svh, 16px);
  }

  .app-shell.auth-shell.standalone-shell .password-landing.has-feature-detail .landing-hero {
    align-items: start;
    padding-top: clamp(4px, 1svh, 10px);
    padding-bottom: 0;
  }

  .app-shell.auth-shell.standalone-shell .password-landing .landing-copy {
    gap: 5px;
    max-width: 100%;
  }

  .app-shell.auth-shell.standalone-shell .landing-feature-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .app-shell.auth-shell.standalone-shell .password-landing.has-feature-detail .landing-copy {
    align-content: start;
  }

  .app-shell.auth-shell.standalone-shell .password-landing .start-kicker {
    font-size: 12px;
    letter-spacing: 0.06em;
  }

  .app-shell.auth-shell.standalone-shell .password-landing .landing-copy h2 {
    max-width: min(330px, 100%);
    font-size: clamp(30px, 9.2vw, 42px);
    line-height: 1.02;
  }

  .app-shell.auth-shell.standalone-shell .password-landing .landing-copy p {
    max-width: min(330px, 100%);
    font-size: 13px;
    line-height: 1.3;
  }

  .app-shell.auth-shell.standalone-shell .password-landing .landing-feature-explorer {
    gap: 5px;
  }

  .app-shell.auth-shell.standalone-shell .password-landing .landing-feature-tab {
    min-height: 40px;
    padding: 6px;
  }

  .app-shell.auth-shell.standalone-shell .password-landing .landing-feature-tab strong {
    font-size: 14px;
  }

  .app-shell.auth-shell.standalone-shell .password-landing .password-card {
    min-height: 0;
    max-height: 100%;
    overflow: auto;
    padding: 13px;
    gap: 9px;
    -webkit-overflow-scrolling: touch;
  }

  .app-shell.auth-shell.standalone-shell .password-card .panel-head span {
    font-size: 11px;
  }

  .app-shell.auth-shell.standalone-shell .password-card .panel-head strong {
    font-size: 16px;
  }

  .app-shell.auth-shell.standalone-shell .auth-tabs button,
  .app-shell.auth-shell.standalone-shell .auth-form input,
  .app-shell.auth-shell.standalone-shell .auth-edit-field,
  .app-shell.auth-shell.standalone-shell .auth-form .btn {
    min-height: 40px;
  }

  .app-shell.auth-shell.standalone-shell .auth-tabs button {
    font-size: 15px;
  }

  .secure-entry {
    -webkit-text-security: disc;
  }

  .app-shell.auth-shell.standalone-shell input,
  .app-shell.auth-shell.standalone-shell select,
  .app-shell.auth-shell.standalone-shell textarea,
  .app-shell.auth-shell.standalone-shell .auth-edit-field {
    padding: 7px 9px;
  }

  .app-shell.auth-shell.standalone-shell .hint,
  .app-shell.auth-shell.standalone-shell .start-picker span {
    font-size: 12px;
  }

  .app-shell.auth-shell.standalone-shell .auth-form {
    gap: 7px;
  }

  .app-shell.auth-shell.standalone-shell .start-picker {
    gap: 4px;
  }

  .app-shell.auth-shell.standalone-shell .landing-feature-detail {
    max-height: 30svh;
    overflow: auto;
    padding: 9px;
  }

  .password-row {
    grid-template-columns: 1fr;
  }

  .section-header {
    align-items: start;
    margin-bottom: 6px;
  }

  .section-header h2 {
    font-size: 22px;
  }

  .section-header p {
    display: none;
  }

  .button-row {
    gap: 8px;
    padding: 10px;
  }

  .button-row .btn {
    flex: 1 1 100%;
  }

  .dashboard-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .wizard-progress {
    flex-wrap: wrap;
    overflow: visible;
    margin-left: 0;
    margin-right: 0;
    padding: 0 0 8px;
  }

  .step-pill {
    flex: 1 1 auto;
  }

  .callout,
  .wizard-block,
  .metric,
  .setup-status,
  .fuel-card,
  .dashboard-card {
    padding: 11px;
  }

  .choice-card {
    min-height: 58px;
  }

  .fuel-card-preview .fuel-card-grid {
    max-height: none;
  }

  .feature-frame-wrap {
    margin-left: -12px;
    margin-right: -12px;
    border-radius: 0;
  }

  .gear-feature-frame {
    min-height: 1320px;
  }
}

@media (max-width: 360px) {
  .tab-link {
    font-size: 11px;
    padding: 0 4px;
  }
}

@media (max-width: 420px) {
  .topbar-inner,
  .main-flow {
    padding-left: 12px;
    padding-right: 12px;
  }

  .two-up,
  .three-up,
  .two-choice,
  .wizard-actions {
    grid-template-columns: 1fr;
  }

  .event-actions {
    grid-template-columns: 1fr;
  }

  .segmented {
    grid-template-columns: 1fr;
  }

  .segmented button {
    border-left: 0;
    border-top: 1px solid var(--line);
  }

  .segmented button:first-child {
    border-top: 0;
  }
}

html.viewport-compact,
body.viewport-compact {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

html.viewport-compact .topbar-inner,
html.viewport-compact .main-flow {
  padding-left: 12px;
  padding-right: 12px;
}

html.viewport-compact .topbar-inner {
  padding-top: calc(6px + var(--safe-top));
  padding-bottom: 8px;
}

html.pwa-standalone.viewport-compact .topbar {
  right: auto;
  width: var(--app-width);
  max-width: var(--app-width);
}

html.pwa-standalone.viewport-compact .topbar-inner {
  max-width: var(--app-width);
  padding-top: calc(8px + var(--chrome-safe-top));
  padding-right: max(14px, var(--chrome-safe-right));
  padding-bottom: 8px;
  padding-left: max(14px, var(--chrome-safe-left));
}

html.pwa-standalone.viewport-compact .app-title {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 8px;
}

html.pwa-standalone.viewport-compact .app-title-main {
  max-width: 100%;
}

html.pwa-standalone.viewport-compact .topbar-actions {
  flex: 0 0 auto;
  max-width: min(86px, 32vw);
  flex-wrap: nowrap;
}

html.pwa-standalone.viewport-compact .topbar-lock {
  min-width: 0;
  min-height: 36px;
  padding: 0 10px;
  font-size: 14px;
}

html.viewport-compact .app-title {
  margin-bottom: 6px;
}

html.viewport-compact .app-title h1 {
  font-size: 20px;
  overflow-wrap: anywhere;
}

html.viewport-compact .topbar-mode-title,
html.viewport-compact .app-title h1.topbar-mode-title {
  font-size: 22px;
}

html.viewport-compact .topbar-link {
  display: none;
}

html.viewport-compact .bottom-nav {
  max-width: 100%;
  border-radius: 0;
  border-left: none;
  border-right: none;
  padding: 8px 4px calc(10px + var(--safe-bottom));
}

html.pwa-standalone.viewport-compact .bottom-nav {
  right: auto;
  width: var(--app-width);
  max-width: var(--app-width);
  padding-bottom: calc(8px + var(--chrome-safe-bottom));
}

html.viewport-compact .main-flow {
  gap: 12px;
  padding-top: calc(72px + var(--safe-top));
  padding-bottom: calc(90px + var(--safe-bottom));
}

html.pwa-standalone.viewport-compact .main-flow {
  width: var(--app-width);
  height: var(--app-height);
  max-width: var(--app-width);
  max-height: var(--app-height);
  padding-top: calc(78px + var(--chrome-safe-top));
  padding-right: max(14px, var(--chrome-safe-right));
  padding-bottom: calc(84px + var(--chrome-safe-bottom));
  padding-left: max(14px, var(--chrome-safe-left));
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

html.viewport-compact .app-shell.mode-race .main-flow {
  padding-top: calc(136px + var(--safe-top));
}

html.pwa-standalone.viewport-compact .app-shell.mode-race .main-flow {
  padding-top: calc(136px + var(--chrome-safe-top));
}

html.viewport-compact .auth-flow {
  gap: 10px;
  padding-top: 0;
  padding-bottom: calc(18px + var(--safe-bottom));
}

html.viewport-compact .toolkit-landing {
  gap: 14px;
}

html.viewport-compact .landing-hero {
  min-height: min(500px, calc(var(--app-height) - 170px));
  padding: 28px 0 18px;
}

html.viewport-compact .landing-copy {
  gap: 12px;
}

html.viewport-compact .landing-copy h2 {
  font-size: clamp(40px, 13vw, 60px);
  line-height: 0.98;
}

html.viewport-compact .landing-copy p {
  font-size: 16px;
}

html.viewport-compact .password-landing {
  gap: 10px;
  min-height: auto;
}

html.viewport-compact .password-landing .landing-hero {
  padding: 12px 0 6px;
}

html.viewport-compact .password-landing .landing-copy {
  gap: 8px;
}

html.viewport-compact .password-landing .landing-copy h2 {
  max-width: 340px;
  font-size: clamp(34px, 10.5vw, 44px);
  line-height: 1;
}

html.viewport-compact .password-landing .landing-copy p {
  max-width: 340px;
  font-size: 14px;
  line-height: 1.35;
}

html.viewport-compact .password-landing .landing-feature-explorer {
  gap: 8px;
}

html.viewport-compact .password-landing .landing-feature-tabs {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

html.viewport-compact .password-landing .landing-feature-tab {
  min-height: 48px;
  align-content: center;
  padding: 8px;
}

html.viewport-compact .password-landing .landing-feature-tab .landing-feature-copy > span {
  display: none;
}

html.viewport-compact .password-landing .password-card {
  width: 100%;
  margin-top: 0;
  padding: 12px;
  gap: 10px;
}

html.viewport-compact .password-card .panel-head {
  gap: 2px;
}

html.viewport-compact .password-card .panel-head strong {
  font-size: 17px;
}

html.viewport-compact .auth-form[data-action="unlock-app"],
html.viewport-compact .auth-form[data-action="create-local-account"],
html.viewport-compact .two-up,
html.viewport-compact .three-up,
html.viewport-compact .two-choice,
html.viewport-compact .wizard-actions,
html.viewport-compact .event-actions {
  grid-template-columns: 1fr;
}

html.viewport-compact .app-shell.auth-shell.standalone-shell {
  position: fixed;
  inset: 0;
  width: 100%;
  max-width: 100%;
  min-height: var(--app-height);
  height: var(--app-height);
  overflow: hidden !important;
  overscroll-behavior: none;
  overscroll-behavior-x: none;
  touch-action: pan-y;
  background:
    linear-gradient(90deg, rgba(5, 7, 11, 0.96) 0%, rgba(5, 7, 11, 0.66) 60%, rgba(5, 7, 11, 0.26) 100%),
    linear-gradient(0deg, var(--bg) 0%, rgba(5, 7, 11, 0.1) 48%),
    url("assets/cycle-race-hero.png") center / cover;
}

html.viewport-compact .app-shell.auth-shell.standalone-shell .auth-flow {
  height: 100%;
  width: 100%;
  max-width: 430px;
  margin: 0 auto;
  gap: 0;
  overflow: hidden !important;
  padding-top: max(14px, var(--chrome-safe-top));
  padding-right: max(22px, var(--chrome-safe-right));
  padding-bottom: max(18px, var(--chrome-safe-bottom));
  padding-left: max(22px, var(--chrome-safe-left));
}

html.viewport-compact .app-shell.auth-shell.standalone-shell .toolkit-landing {
  grid-template-rows: minmax(0, 1fr) auto minmax(14px, 0.24fr);
  align-content: stretch;
  align-items: stretch;
  gap: clamp(10px, 2svh, 20px);
  height: 100%;
  width: 100%;
  max-width: 100%;
  min-height: 0;
  overflow: hidden !important;
}

html.viewport-compact .app-shell.auth-shell.standalone-shell .toolkit-landing.has-feature-detail {
  grid-template-rows: minmax(0, 1fr) auto minmax(0, 0.04fr);
  gap: clamp(8px, 1.4svh, 14px);
}

html.viewport-compact .app-shell.auth-shell.standalone-shell .toolkit-landing::before {
  display: none;
}

html.viewport-compact .app-shell.auth-shell.standalone-shell .password-landing .landing-hero {
  min-height: 0;
  max-height: none;
  height: 100%;
  align-items: center;
  overflow: hidden;
  padding: clamp(8px, 2.4svh, 24px) 0 clamp(6px, 1.6svh, 16px);
}

html.viewport-compact .app-shell.auth-shell.standalone-shell .password-landing.has-feature-detail .landing-hero {
  align-items: start;
  padding-top: clamp(4px, 1svh, 10px);
  padding-bottom: 0;
}

html.viewport-compact .app-shell.auth-shell.standalone-shell .password-landing .landing-copy {
  gap: 5px;
  max-width: 100%;
}

html.viewport-compact .app-shell.auth-shell.standalone-shell .landing-feature-tabs {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

html.viewport-compact .app-shell.auth-shell.standalone-shell .password-landing.has-feature-detail .landing-copy {
  align-content: start;
}

html.viewport-compact .app-shell.auth-shell.standalone-shell .password-landing .start-kicker {
  font-size: 12px;
  letter-spacing: 0.06em;
}

html.viewport-compact .app-shell.auth-shell.standalone-shell .password-landing .landing-copy h2 {
  max-width: min(330px, 100%);
  font-size: clamp(30px, 9.2vw, 42px);
  line-height: 1.02;
}

html.viewport-compact .app-shell.auth-shell.standalone-shell .password-landing .landing-copy p {
  max-width: min(330px, 100%);
  font-size: 13px;
  line-height: 1.3;
}

html.viewport-compact .app-shell.auth-shell.standalone-shell .password-landing .landing-feature-explorer {
  gap: 5px;
}

html.viewport-compact .app-shell.auth-shell.standalone-shell .password-landing .landing-feature-tab {
  min-height: 40px;
  padding: 6px;
}

html.viewport-compact .app-shell.auth-shell.standalone-shell .password-landing .landing-feature-tab strong {
  font-size: 14px;
}

html.viewport-compact .app-shell.auth-shell.standalone-shell .password-landing .password-card {
  min-height: 0;
  max-height: 100%;
  overflow: auto;
  padding: 13px;
  gap: 9px;
  -webkit-overflow-scrolling: touch;
}

html.viewport-compact .app-shell.auth-shell.standalone-shell .password-card .panel-head span {
  font-size: 11px;
}

html.viewport-compact .app-shell.auth-shell.standalone-shell .password-card .panel-head strong {
  font-size: 16px;
}

html.viewport-compact .app-shell.auth-shell.standalone-shell .auth-tabs button,
html.viewport-compact .app-shell.auth-shell.standalone-shell .auth-form input,
html.viewport-compact .app-shell.auth-shell.standalone-shell .auth-edit-field,
html.viewport-compact .app-shell.auth-shell.standalone-shell .auth-form .btn {
  min-height: 40px;
}

html.viewport-compact .app-shell.auth-shell.standalone-shell .auth-tabs button {
  font-size: 15px;
}

html.viewport-compact .app-shell.auth-shell.standalone-shell input,
html.viewport-compact .app-shell.auth-shell.standalone-shell select,
html.viewport-compact .app-shell.auth-shell.standalone-shell textarea,
html.viewport-compact .app-shell.auth-shell.standalone-shell .auth-edit-field {
  padding: 7px 9px;
}

html.viewport-compact .app-shell.auth-shell.standalone-shell .hint,
html.viewport-compact .app-shell.auth-shell.standalone-shell .start-picker span {
  font-size: 12px;
}

html.viewport-compact .app-shell.auth-shell.standalone-shell .auth-form {
  gap: 7px;
}

html.viewport-compact .app-shell.auth-shell.standalone-shell .start-picker {
  gap: 4px;
}

html.viewport-compact .app-shell.auth-shell.standalone-shell .landing-feature-detail {
  max-height: 30svh;
  overflow: auto;
  padding: 9px;
}

html.viewport-phone .topbar-inner,
html.viewport-phone .main-flow {
  padding-left: 12px;
  padding-right: 12px;
}

html.auth-standalone .app-shell.auth-shell.standalone-shell,
body.auth-standalone .app-shell.auth-shell.standalone-shell {
  left: 0;
  right: auto;
  width: var(--app-width);
  min-width: var(--app-width);
  max-width: var(--app-width);
  height: var(--app-height);
  max-height: var(--app-height);
  overflow: hidden !important;
  transform: translateX(0);
  contain: layout paint;
}

html.auth-standalone .app-shell.auth-shell.standalone-shell .auth-flow {
  width: var(--app-width);
  max-width: min(430px, var(--app-width));
  overflow-x: clip;
}

html.auth-keyboard-focus,
body.auth-keyboard-focus,
html.auth-standalone:has([data-auth-field]:focus) {
  overflow: hidden !important;
}

html.auth-keyboard-focus .app-shell.auth-shell.standalone-shell .auth-flow,
html.auth-standalone:has([data-auth-field]:focus) .app-shell.auth-shell.standalone-shell .auth-flow {
  padding-top: calc(var(--chrome-safe-top) + 12px);
  padding-bottom: max(10px, var(--chrome-safe-bottom));
}

html.auth-keyboard-focus .app-shell.auth-shell.standalone-shell .toolkit-landing,
html.auth-standalone:has([data-auth-field]:focus) .app-shell.auth-shell.standalone-shell .toolkit-landing {
  grid-template-rows: minmax(0, 1fr);
  align-content: start;
  gap: 0;
  overflow: hidden !important;
}

html.auth-keyboard-focus .app-shell.auth-shell.standalone-shell .landing-hero,
html.auth-standalone:has([data-auth-field]:focus) .app-shell.auth-shell.standalone-shell .landing-hero {
  display: none;
}

html.auth-keyboard-focus .app-shell.auth-shell.standalone-shell .password-card,
html.auth-standalone:has([data-auth-field]:focus) .app-shell.auth-shell.standalone-shell .password-card {
  align-self: start;
  max-height: calc(var(--visible-height) - var(--chrome-safe-top) - max(10px, var(--chrome-safe-bottom)) - 18px);
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

html.auth-keyboard-focus .app-shell.auth-shell.standalone-shell .auth-edit-field,
html.auth-standalone:has([data-auth-field]:focus) .app-shell.auth-shell.standalone-shell .auth-edit-field {
  height: 44px;
  max-height: 44px;
  min-height: 44px;
}

@media print {
  body {
    background: white;
  }

  .topbar,
  .bottom-nav,
  .main-flow {
    display: none;
  }

  .print-only {
    display: block;
    padding: 18mm;
  }

  .print-card {
    color: #111;
    font-family: Arial, sans-serif;
  }

  .print-card h1 {
    margin: 0 0 8px;
    font-size: 24px;
  }

  .print-card h2 {
    margin: 14px 0 6px;
    font-size: 15px;
  }

  .print-card p,
  .print-card li {
    font-size: 12px;
    line-height: 1.35;
  }
}

.race-sub-nav {
  display: flex;
  gap: 4px;
  padding: 0 var(--pad);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  margin-bottom: 16px;
}

.race-sub-nav::-webkit-scrollbar { display: none; }

.race-sub-tab {
  flex-shrink: 0;
  padding: 8px 16px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text-dim);
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}

.race-sub-tab:hover { color: var(--text); border-color: var(--text-muted); }

.race-sub-tab.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

/* ── Home screen ─────────────────────────────────────── */

.home-screen {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.home-hero-section {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.home-question {
  text-align: center;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.5px;
  margin: 0;
  color: var(--text);
}

.home-choice-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.home-choice-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 28px 16px 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(17, 21, 30, 0.76);
  backdrop-filter: saturate(160%) blur(22px);
  -webkit-backdrop-filter: saturate(160%) blur(22px);
  cursor: pointer;
  transition: border-color 0.15s, transform 0.1s;
  text-align: center;
  color: var(--text);
}

.home-choice-card:hover { border-color: var(--accent-strong); }
.home-choice-card:active { transform: scale(0.97); }

.home-choice-card .choice-icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
}

.home-choice-card .choice-icon svg {
  width: 28px;
  height: 28px;
  stroke: var(--accent-strong);
}

.home-choice-card strong { font-size: 17px; font-weight: 700; }
.home-choice-card span { font-size: 12px; color: var(--muted); line-height: 1.3; }

/* Plan card strip */
.home-plans-strip { margin-top: 0; }

.strip-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.strip-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.plan-card-scroll {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 4px;
}

.plan-card-scroll::-webkit-scrollbar { display: none; }

.plan-card {
  flex-shrink: 0;
  display: grid;
  gap: 4px;
  width: 200px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(17, 21, 30, 0.76);
  backdrop-filter: saturate(160%) blur(22px);
  -webkit-backdrop-filter: saturate(160%) blur(22px);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s;
  color: var(--text);
}

.plan-card:hover { border-color: var(--accent-strong); }

.plan-card strong {
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.plan-card span { font-size: 11px; color: var(--muted); }

.plan-card-bar {
  height: 3px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.08);
  margin-top: 4px;
  overflow: hidden;
}

.plan-card-bar i {
  display: block;
  height: 100%;
  background: var(--accent-strong);
  border-radius: 2px;
  transition: width 0.3s;
}

/* Secondary actions */
.home-secondary {
  display: flex;
  gap: 8px;
  justify-content: center;
}

/* ── Tools mode ──────────────────────────────────────── */

.tools-home { display: flex; flex-direction: column; }

.tools-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.tool-card {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 14px;
  row-gap: 2px;
  align-items: center;
  padding: 18px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(17, 21, 30, 0.76);
  backdrop-filter: saturate(160%) blur(22px);
  -webkit-backdrop-filter: saturate(160%) blur(22px);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s;
  color: var(--text);
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}

.tool-card:hover { border-color: var(--accent-strong); }

.tool-card svg {
  grid-row: 1 / -1;
  width: 28px;
  height: 28px;
  stroke: var(--accent-strong);
}

.tool-card strong {
  font-size: 15px;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.tool-card span {
  font-size: 12px;
  color: var(--muted);
  overflow-wrap: anywhere;
}

.tool-back {
  margin-bottom: 12px;
  align-self: flex-start;
}

/* Responsive tweaks */
@media (max-width: 759px) {
  .home-choice-card { padding: 22px 12px 18px; }
  .plan-card { width: 170px; }
}