:root {
  color-scheme: dark;
  --f7-theme-color: #ff6a2b;
  --f7-theme-color-rgb: 255, 106, 43;
  --f7-theme-color-shade: #f0561a;
  --f7-theme-color-tint: #ff824e;
  --brand-green: #30d17a;
  --brand-red: #ff6b5c;
  --brand-amber: #ffb020;
  --txt2: #9a9aa2;
  --bar-idle: #48484a;
  --tint-green: rgba(48, 209, 122, 0.14);
  --tint-accent: rgba(255, 106, 43, 0.18);
}
[hidden] { display: none !important; }
html, body { margin: 0; background: #000; }
.button { text-transform: none; font-weight: 600; letter-spacing: 0; }
.media-list .item-text { -webkit-line-clamp: unset; max-height: none; }

/* keep navbar glyphs at iOS size */
.navbar .link .icon.f7-icons { font-size: 22px; }
.navbar .title .subtitle { font-variant-numeric: tabular-nums; letter-spacing: 0.5px; }
.leave-link { color: var(--brand-red) !important; font-weight: 600; }
.btn-icon { font-size: 20px; margin-right: 8px; }

/* ---------- motion helpers ---------- */
.revealed {
  animation: rise 0.65s cubic-bezier(0.2, 0.8, 0.2, 1) both;
  animation-delay: var(--reveal-delay, 0ms);
}
@keyframes rise {
  from { opacity: 0; transform: translateY(18px) scale(0.98); filter: blur(4px); }
  to { opacity: 1; transform: none; filter: none; }
}
@keyframes spin { to { transform: rotate(360deg); } }
.is-busy { pointer-events: none; position: relative; }
.is-busy > * { visibility: hidden; }
.is-busy::before {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%;
  border: 2.5px solid currentColor; border-right-color: transparent;
  animation: spin 0.7s linear infinite;
}

/* ---------- login ---------- */
.page-login { background: #000; }
.slipstream-bg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; display: block; }
.page-login .page-content { background: transparent; position: relative; z-index: 1; }
.login-inner {
  min-height: 100%; box-sizing: border-box;
  display: flex; flex-direction: column; justify-content: space-between; gap: 32px;
  padding: calc(var(--f7-safe-area-top) + 40px) 24px calc(var(--f7-safe-area-bottom) + 28px);
}
.login-hero { text-align: center; margin-top: 7vh; }
.brand-mark {
  position: relative; width: 88px; height: 88px; margin: 0 auto 24px; border-radius: 26px;
  background: linear-gradient(145deg, #ff8a4c, #ff5a1f 55%, #ff3c6e);
  display: grid; place-items: center; color: #fff;
  box-shadow: 0 18px 50px -12px rgba(255, 90, 31, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
.brand-mark i { font-size: 44px; position: relative; z-index: 2; }
.brand-mark .ring {
  position: absolute; inset: 0; border-radius: 26px; border: 2px solid rgba(255, 106, 43, 0.6);
  animation: ring-out 3s cubic-bezier(0.2, 0.6, 0.3, 1) infinite;
}
.brand-mark .r2 { animation-delay: 1s; }
.brand-mark .r3 { animation-delay: 2s; }
@keyframes ring-out { from { transform: scale(1); opacity: 0.9; } to { transform: scale(2.2); opacity: 0; } }
.brand-name {
  font-size: 46px; font-weight: 800; letter-spacing: -1.6px; margin: 0; line-height: 1.05;
  background: linear-gradient(90deg, #fff 30%, #ffc8ae 50%, #fff 70%); background-size: 250% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: shimmer 6s linear infinite;
}
.brand-name.revealed { animation: rise 0.65s cubic-bezier(0.2, 0.8, 0.2, 1) both var(--reveal-delay, 0ms), shimmer 6s linear infinite 1s; }
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: -150% 0; } }
.brand-tag { color: rgba(255, 255, 255, 0.72); font-size: 18px; margin: 12px 0 0; }

.login-actions { display: flex; flex-direction: column; gap: 12px; }
.auth-btn {
  position: relative; overflow: hidden; height: 54px; border-radius: 15px; border: none;
  font: 600 17px -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  display: flex; align-items: center; justify-content: center; gap: 10px; cursor: pointer;
  transition: transform 0.12s ease, filter 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}
.auth-btn:active { transform: scale(0.97); filter: brightness(0.92); }
.auth-btn svg { width: 20px; height: 20px; flex: none; }
.auth-btn i { font-size: 22px; }
.auth-btn.apple { background: #fff; color: #000; }
.auth-btn.google {
  background: rgba(255, 255, 255, 0.09); color: #fff; border: 1px solid rgba(255, 255, 255, 0.14);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.auth-btn.faceid {
  background: linear-gradient(135deg, #ff7a3c, #ff4f6e); color: #fff;
  box-shadow: 0 12px 32px -12px rgba(255, 90, 60, 0.9);
}
.auth-btn.faceid::after {
  content: ""; position: absolute; top: 0; left: -60%; width: 40%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.38), transparent);
  transform: skewX(-20deg); animation: sweep 3.8s ease-in-out 1.4s infinite;
}
@keyframes sweep { 0% { left: -60%; } 45%, 100% { left: 130%; } }
.auth-btn.email { background: rgba(0, 0, 0, 0.35); color: #fff; border: 1px solid rgba(255, 255, 255, 0.28); }
.login-new { text-align: center; color: rgba(255, 255, 255, 0.62); margin: 8px 0 0; font-size: 15px; }
.login-link { color: var(--f7-theme-color); font-weight: 600; }

/* ---------- auth steps (create / email) ---------- */
.page-auth .page-content {
  background: radial-gradient(130% 55% at 50% -12%, rgba(255, 106, 43, 0.2), transparent 60%), #000;
}
.auth-step { display: none; padding: 8px 24px 40px; }
.auth-step.active { display: block; }
.auth-icon {
  width: 64px; height: 64px; border-radius: 18px; margin: 16px 0 20px;
  background: var(--tint-accent); color: var(--f7-theme-color); display: grid; place-items: center;
}
.auth-icon i { font-size: 32px; }
.page-auth h2 { font-size: 30px; font-weight: 800; letter-spacing: -0.6px; margin: 0 0 8px; line-height: 1.15; }
.auth-lede { color: var(--txt2); font-size: 16px; line-height: 1.45; margin: 0 0 24px; }
.page-auth input.auth-input {
  display: block; width: 100%; box-sizing: border-box; height: 56px; margin: 0 0 16px; padding: 0 16px;
  border-radius: 14px; border: 1.5px solid transparent; background: #1c1c1e; color: #fff;
  font-size: 18px; outline: none; transition: border-color 0.2s, box-shadow 0.2s;
}
.page-auth input.auth-input:focus { border-color: var(--f7-theme-color); box-shadow: 0 0 0 4px rgba(255, 106, 43, 0.18); }
.auth-alt { text-align: center; color: var(--txt2); margin-top: 20px; }

.code-cells { position: relative; display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; margin: 0 0 16px; }
.code-cells input {
  position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; font-size: 16px;
  border: none; background: none; color: transparent; caret-color: transparent;
}
.code-cells span {
  height: 60px; border-radius: 14px; background: #1c1c1e; border: 1.5px solid transparent;
  display: grid; place-items: center; font-size: 28px; font-weight: 700; font-variant-numeric: tabular-nums;
  transition: border-color 0.15s, background-color 0.15s;
}
.code-cells span.filled { background: #2a2a2d; }
.code-cells input:focus ~ span.caret { border-color: var(--f7-theme-color); }
.code-cells span.pop { animation: pop 0.28s cubic-bezier(0.3, 1.6, 0.5, 1); }
@keyframes pop { from { transform: scale(0.72); } to { transform: scale(1); } }
.dev-code {
  background: rgba(255, 176, 32, 0.12); color: var(--brand-amber); border-radius: 12px;
  padding: 10px 12px; font-size: 14px; line-height: 1.4; margin: 0 0 16px;
}

.success-check svg { width: 84px; height: 84px; margin: 20px 0 18px; display: block; }
.success-check circle {
  fill: none; stroke: var(--brand-green); stroke-width: 3;
  stroke-dasharray: 151; stroke-dashoffset: 151; animation: draw 0.6s ease-out 0.15s forwards;
}
.success-check path {
  fill: none; stroke: var(--brand-green); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 36; stroke-dashoffset: 36; animation: draw 0.4s ease-out 0.65s forwards;
}
@keyframes draw { to { stroke-dashoffset: 0; } }

.acct-action { margin-left: 10px; font-weight: 600; }

/* ---------- home ---------- */
.hs-ico, .em {
  width: 38px; height: 38px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
}
.hs-ico { background: var(--tint-green); color: var(--brand-green); }
.hs-ico i { font-size: 20px; }
.em { width: 34px; height: 34px; border-radius: 8px; background: var(--tint-accent); color: var(--f7-theme-color); }
.em i { font-size: 18px; }
.code-input { font-size: 22px !important; font-weight: 700; letter-spacing: 10px; font-variant-numeric: tabular-nums; }
.code-after { font-variant-numeric: tabular-nums; letter-spacing: 1px; }

/* ---------- ride room ---------- */
.livebar-block { margin-top: 12px; }
.livebar { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--txt2); }
.livebar .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--txt2); flex: none; }
.livebar.on .dot { background: var(--brand-green); }
.livebar.warn .dot { background: var(--brand-amber); }
.livebar.off .dot { background: var(--brand-red); }
.warn-block { color: var(--brand-amber); font-size: 14px; line-height: 1.4; }
.ride-footer { margin-bottom: 24px; }

.item-media .av-wrap { width: 38px; height: 38px; position: relative; }
.av {
  width: 100%; height: 100%; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: 15px; color: #fff; letter-spacing: 0.3px;
}
.av-wrap.talk::after {
  content: ""; position: absolute; inset: -3px; border-radius: 50%;
  border: 2px solid var(--brand-green);
}
.talk-hl { background: var(--tint-green); }
.you {
  font-size: 11px; font-weight: 600; color: var(--txt2);
  border: 1px solid var(--bar-idle); border-radius: 5px; padding: 0 5px; margin-left: 4px;
  vertical-align: 2px;
}
.status-on { color: var(--brand-green) !important; }
.status-off { color: var(--txt2) !important; }
.status-warn { color: var(--brand-amber) !important; }
.status-bad { color: var(--brand-red) !important; }

.sig { display: flex; align-items: flex-end; gap: 2px; height: 15px; flex: none; }
.sig i { width: 3px; border-radius: 1px; background: var(--bar-idle); display: block; }
.sig i:nth-child(1) { height: 5px; } .sig i:nth-child(2) { height: 8px; }
.sig i:nth-child(3) { height: 11px; } .sig i:nth-child(4) { height: 15px; }
.sig.s4 i, .sig.s3 i:nth-child(-n+3) { background: var(--brand-green); }
.sig.s1 i:nth-child(1) { background: var(--brand-red); }

/* push-to-talk dock: a tall bottom toolbar; F7 pads the page content to match */
.page-ride { --f7-toolbar-height: 158px; }
.ptt-dock .toolbar-inner {
  display: flex; align-items: center; justify-content: space-evenly;
  padding: 0 12px;
}
.dock-btn {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  width: 64px; color: var(--txt2); font-size: 11px; font-weight: 500;
}
.dock-btn i { font-size: 26px; }
.dock-btn.active { color: var(--brand-amber); }
.ptt-col { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.ptt-btn {
  width: 112px; height: 112px; border-radius: 50%; border: none;
  background: var(--f7-theme-color); color: #fff;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  cursor: pointer; touch-action: none;
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.08s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}
.ptt-btn i { font-size: 34px; pointer-events: none; }
.ptt-btn span { font-size: 12px; font-weight: 700; letter-spacing: 0.4px; pointer-events: none; }
.ptt-btn.held { background: var(--brand-green); transform: scale(0.95); }
.ptt-btn.locked { background: var(--brand-green); box-shadow: 0 0 0 5px rgba(48, 209, 122, 0.3); }
.ptt-btn:disabled { opacity: 0.4; }
.ptt-hint { font-size: 12px; color: var(--txt2); min-height: 15px; }

/* ---------- map ---------- */
.map-content { overflow: hidden; }
#map { height: 100%; width: 100%; background: #0b0b0d; }
/* standard OSM tiles, turned into a dark map to match the app */
#map .leaflet-tile-pane { filter: invert(1) hue-rotate(180deg) brightness(0.9) contrast(0.9) saturate(0.6); }
.map-note {
  position: absolute; left: 16px; right: 16px;
  bottom: calc(16px + var(--f7-safe-area-bottom));
  background: rgba(28, 28, 30, 0.94); color: #f5f5f7;
  border-radius: 12px; padding: 12px 14px; font-size: 14px; z-index: 500;
}
.pin-wrap { background: none; border: none; }
.pin {
  width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 700; font-size: 13px;
  border: 2px solid #000; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
}
.pin.talk { border-color: var(--brand-green); }
.pin.stopped { border-color: var(--brand-amber); }
.leaflet-tooltip {
  background: #1c1c1e; color: #f5f5f7; border: none; border-radius: 8px;
  font: 600 12px -apple-system, system-ui, sans-serif; box-shadow: none;
}
.leaflet-tooltip-top::before { border-top-color: #1c1c1e; }
.leaflet-control-attribution { background: rgba(0, 0, 0, 0.6) !important; color: #8e8e93 !important; }
.leaflet-control-attribution a { color: #aeaeb2 !important; }

/* ---------- settings ---------- */
.swatches { display: flex; gap: 8px; }
.swatch {
  width: 26px; height: 26px; border-radius: 50%; border: 2px solid transparent;
  padding: 0; cursor: pointer;
}
.swatch.on { border-color: #fff; box-shadow: 0 0 0 2px #000 inset; }

/* ---------- plans ---------- */
.plans-intro { color: var(--txt2); }
.card-header .pn { font-weight: 600; font-size: 17px; }
.price { font-weight: 600; font-size: 17px; }
.price.free { color: var(--brand-green); }
.price small { font-size: 13px; color: var(--txt2); font-weight: 400; }
.plan-card.pop { border: 1.5px solid var(--f7-theme-color); }
.pop-tag {
  display: inline-block; background: var(--f7-theme-color); color: #fff;
  font-size: 11px; font-weight: 600; letter-spacing: 0.4px;
  padding: 2px 8px; border-radius: 6px; margin-left: 8px; vertical-align: middle;
}
.feat { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.feat li { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; color: var(--txt2); }
.feat li i { color: var(--brand-green); font-size: 16px; margin-top: 1px; }
.center { text-align: center; }

@media (prefers-reduced-motion: reduce) {
  .ptt-btn, .auth-btn { transition: none; }
  .revealed, .brand-name, .brand-name.revealed, .brand-mark .ring, .auth-btn.faceid::after,
  .code-cells span.pop { animation: none; }
  .brand-mark .ring { display: none; }
  .success-check circle, .success-check path { animation: none; stroke-dashoffset: 0; }
}

/* Face ID glyph (drawn, F7 icons has none) + consistent big buttons on auth screens */
.faceid-svg { width: 22px; height: 22px; }
.auth-icon .faceid-svg { width: 34px; height: 34px; }
.btn-icon .faceid-svg { width: 20px; height: 20px; vertical-align: -4px; }
.page-auth .button-large, .page-onboard .button-large { height: 54px; border-radius: 15px; font-size: 17px; }

/* ================= phase 2: talk modes, captain, crash, catch-up ================= */

/* segmented control (ride + settings) */
.seg {
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 2px;
  background: #2c2c2e; border-radius: 10px; padding: 2px; margin-top: 10px;
}
.seg button {
  border: none; background: transparent; color: var(--txt2); font: 600 13px -apple-system, system-ui, sans-serif;
  height: 32px; border-radius: 8px; cursor: pointer; transition: background-color 0.2s, color 0.2s, transform 0.12s;
  -webkit-tap-highlight-color: transparent;
}
.seg button:active { transform: scale(0.96); }
.seg button.active { background: #636366; color: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35); }
.mode-switch button.active { background: var(--f7-theme-color); }
.item-inner-stack { flex-direction: column; align-items: stretch !important; padding-bottom: 12px !important; }
.item-inner-stack .seg { width: 100%; }

/* talk button halo that follows your voice */
.ptt-wrap { position: relative; --lvl: 0; }
.ptt-halo {
  position: absolute; inset: -6px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(48, 209, 122, 0.45), rgba(48, 209, 122, 0) 70%);
  transform: scale(calc(1 + var(--lvl) * 0.55)); opacity: calc(var(--lvl) * 1.6);
  transition: transform 0.08s linear, opacity 0.12s linear;
}
.ptt-halo.h2 {
  inset: -2px; background: none; border: 2px solid rgba(48, 209, 122, 0.55);
  transform: scale(calc(1 + var(--lvl) * 0.3)); opacity: calc(var(--lvl) * 2);
}
.ptt-btn { position: relative; z-index: 1; }
.ptt-btn.gate { background: var(--brand-green); box-shadow: 0 0 0 5px rgba(48, 209, 122, 0.3); }
.ptt-btn.listening { background: linear-gradient(145deg, #ff7a3c, #ff4f6e); }
.ptt-btn.recording { background: var(--brand-red) !important; animation: rec-pulse 1s ease-in-out infinite; }
@keyframes rec-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 107, 92, 0.55); }
  50% { box-shadow: 0 0 0 10px rgba(255, 107, 92, 0); }
}

/* rider avatars glow with their voice */
.av-wrap { --lvl: 0; }
.av-wrap::before {
  content: ""; position: absolute; inset: -4px; border-radius: 50%; pointer-events: none;
  box-shadow: 0 0 0 calc(2px + var(--lvl) * 5px) rgba(48, 209, 122, calc(var(--lvl) * 0.7));
  transition: box-shadow 0.12s linear;
}
.role-badge {
  display: inline-flex; align-items: center; gap: 3px; margin-left: 6px; vertical-align: 2px;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.3px; text-transform: uppercase;
  border-radius: 6px; padding: 1px 6px;
}
.role-badge i { font-size: 10px; }
.role-badge.captain { color: #1a1204; background: linear-gradient(135deg, #ffd166, #ffb020); }
.role-badge.sweep { color: #d9e7ff; background: rgba(59, 116, 208, 0.45); }

/* catch-up bar */
.catchup-bar {
  display: flex; align-items: center; gap: 12px; margin: 12px 16px 0; padding: 12px 14px;
  border-radius: 14px; background: linear-gradient(135deg, rgba(91, 141, 239, 0.28), rgba(155, 89, 199, 0.28));
  border: 1px solid rgba(155, 140, 255, 0.35); animation: rise 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.cb-wave { display: flex; align-items: center; gap: 3px; height: 24px; }
.cb-wave i { width: 3px; border-radius: 2px; background: #cdd8ff; animation: bars 0.9s ease-in-out infinite; }
.cb-wave i:nth-child(2) { animation-delay: 0.15s; }
.cb-wave i:nth-child(3) { animation-delay: 0.3s; }
.cb-wave i:nth-child(4) { animation-delay: 0.45s; }
.cb-wave i:nth-child(5) { animation-delay: 0.6s; }
@keyframes bars { 0%, 100% { height: 5px; } 50% { height: 22px; } }
.cb-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cb-text b { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cb-text span { font-size: 12.5px; color: #c3c8e6; }
.cb-wave { flex: none; }
.cb-wave i { display: block; }
.cb-skip {
  flex: none; width: auto; border: none; background: rgba(255, 255, 255, 0.14); color: #fff;
  font: 600 14px -apple-system, system-ui, sans-serif; border-radius: 9px; padding: 7px 12px;
}

/* ride actions: captain commands + SOS */
.ride-actions { margin: 14px 16px 0; display: flex; flex-direction: column; gap: 10px; }
.captain-cmds { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.captain-cmds::-webkit-scrollbar { display: none; }
.cmd-chip {
  flex: none; display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 14px;
  border-radius: 19px; border: 1px solid rgba(255, 176, 32, 0.45); background: rgba(255, 176, 32, 0.12);
  color: #ffd27a; font: 600 14px -apple-system, system-ui, sans-serif; cursor: pointer;
  transition: transform 0.12s ease; -webkit-tap-highlight-color: transparent;
}
.cmd-chip i { font-size: 16px; }
.cmd-chip { width: auto; }
/* frosted, so the background streaks don't run through buttons */
.cmd-chip, .act-btn, .sos-btn { -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.hazard-btn { background: rgba(60, 42, 8, 0.72); }
.sos-btn { background: rgba(60, 16, 14, 0.72); }
.cmd-chip { background: rgba(60, 42, 8, 0.72); }
.cmd-chip:active { transform: scale(0.94); }
.cmd-chip.sent { animation: chip-sent 0.6s ease; }
@keyframes chip-sent { from { background: rgba(255, 176, 32, 0.6); } to { background: rgba(255, 176, 32, 0.12); } }
.sos-btn {
  position: relative; overflow: hidden; height: 46px; border-radius: 13px; border: 1px solid rgba(255, 107, 92, 0.5);
  background: rgba(255, 107, 92, 0.1); color: var(--brand-red); font: 700 15px -apple-system, system-ui, sans-serif;
  display: flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer;
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; touch-action: none;
}
.sos-btn i, .sos-label { position: relative; z-index: 1; }
.sos-fill { position: absolute; inset: 0; width: 0; background: rgba(255, 107, 92, 0.45); }
.sos-btn.holding .sos-fill { width: 100%; transition: width 2s linear; }
.sos-btn.holding { color: #fff; }

/* captain command banner (drops in from the top on any screen) */
.cmd-banner {
  position: fixed; z-index: 13000; left: 12px; right: 12px; top: calc(var(--f7-safe-area-top, 0px) + 10px);
  display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 18px;
  background: linear-gradient(135deg, rgba(255, 176, 32, 0.96), rgba(255, 106, 43, 0.96)); color: #1a0d00;
  box-shadow: 0 16px 40px -10px rgba(255, 106, 43, 0.7);
  transform: translateY(-140%); transition: transform 0.45s cubic-bezier(0.2, 0.9, 0.2, 1.15);
}
.cmd-banner.show { transform: translateY(0); }
.cmd-icon { width: 44px; height: 44px; border-radius: 12px; background: rgba(0, 0, 0, 0.15); display: grid; place-items: center; flex: none; }
.cmd-icon i { font-size: 24px; }
.cmd-from { font-size: 12.5px; font-weight: 600; opacity: 0.75; }
.cmd-text { font-size: 18px; font-weight: 800; letter-spacing: -0.2px; }

/* full-screen overlays: own crash countdown + incoming crash alerts */
.ov {
  position: fixed; inset: 0; z-index: 14000; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(120% 80% at 50% 40%, #7a0f0f, #2a0404 60%, #0d0000);
  animation: ov-in 0.35s ease both; color: #fff; text-align: center;
}
.ov[hidden] { display: none !important; }
@keyframes ov-in { from { opacity: 0; transform: scale(1.04); } to { opacity: 1; transform: none; } }
.ov-pulse {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle at 50% 42%, rgba(255, 60, 60, 0.55), transparent 55%);
  animation: ov-pulse 1.1s ease-in-out infinite;
}
@keyframes ov-pulse { 0%, 100% { opacity: 0.35; transform: scale(0.9); } 50% { opacity: 1; transform: scale(1.12); } }
.ov.sent .ov-pulse, .ov.acked .ov-pulse { animation-duration: 3s; opacity: 0.4; }
.ov-inner {
  position: relative; width: 100%; max-width: 420px; box-sizing: border-box;
  padding: calc(var(--f7-safe-area-top, 0px) + 24px) 24px calc(var(--f7-safe-area-bottom, 0px) + 24px);
  display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.ov-kicker { font-size: 13px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: #ffb3a8; }
.ov-title { font-size: 34px; font-weight: 800; letter-spacing: -0.8px; margin: 4px 0 0; }
.ov-text { color: #ffd8d2; font-size: 16px; line-height: 1.45; margin: 0 0 10px; max-width: 320px; }
.count-ring { position: relative; width: 150px; height: 150px; margin: 8px 0; }
.count-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.count-ring circle { fill: none; stroke-width: 8; }
.count-ring .track { stroke: rgba(255, 255, 255, 0.15); }
.count-ring .prog { stroke: #fff; stroke-linecap: round; transition: stroke-dashoffset 0.25s linear; }
.count-num { position: absolute; inset: 0; display: grid; place-items: center; font-size: 60px; font-weight: 800; font-variant-numeric: tabular-nums; }
.ov-btn {
  width: 100%; height: 56px; border-radius: 16px; border: none; font: 700 18px -apple-system, system-ui, sans-serif;
  display: flex; align-items: center; justify-content: center; text-decoration: none; cursor: pointer;
}
.ov-btn.ok { background: #fff; color: #4a0707; }
.ov-btn.danger { background: rgba(255, 255, 255, 0.14); color: #fff; border: 1.5px solid rgba(255, 255, 255, 0.4); }
.ov-btn.ghost { background: none; color: #ffb3a8; height: 44px; font-size: 16px; }
.ov-btn:disabled { opacity: 0.6; }
.ov-btn[hidden] { display: none; }
.ov-acks { display: flex; flex-direction: column; gap: 6px; }
.ov-acks .ack { display: flex; align-items: center; gap: 8px; font-weight: 600; color: #b6ffd3; }
.al-avatar {
  width: 92px; height: 92px; border-radius: 50%; display: grid; place-items: center; margin: 6px 0;
  font-size: 34px; font-weight: 800; background: rgba(255, 255, 255, 0.14); box-shadow: 0 0 0 6px rgba(255, 90, 90, 0.35);
  animation: ov-pulse 1.1s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .ptt-halo, .av-wrap::before { transition: none; }
  .cb-wave i, .ov-pulse, .al-avatar, .ptt-btn.recording, .catchup-bar { animation: none; }
  .cmd-banner { transition: none; }
}

/* ================= Tevra brand: logo glyph + wordmark ================= */
.mark-glyph { position: relative; z-index: 2; width: 62%; height: auto; display: block; filter: drop-shadow(0 2px 6px rgba(120, 20, 20, 0.35)); }
.brand-mark .mark-glyph { transform: translateX(2%); }

/* the wordmark image replaces the text title; a light sweeps across only the letters */
.brand-name, .brand-name.revealed { background: none; color: inherit; -webkit-background-clip: border-box; background-clip: border-box; }
.brand-name { animation: none; line-height: 0; margin-top: 4px; }
.brand-name.revealed { animation: rise 0.65s cubic-bezier(0.2, 0.8, 0.2, 1) both var(--reveal-delay, 0ms); }
.wordmark { position: relative; display: inline-block; }
.wordmark img { height: 58px; width: auto; display: block; }
.wordmark::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg, transparent 35%, rgba(255, 255, 255, 0.85) 50%, transparent 65%);
  background-size: 250% 100%; background-position: 130% 0;
  -webkit-mask: url(/brand/tevra-wordmark.png) center / contain no-repeat; mask: url(/brand/tevra-wordmark.png) center / contain no-repeat;
  mix-blend-mode: overlay; animation: wm-sheen 5.5s ease-in-out 1.6s infinite;
}
@keyframes wm-sheen { 0% { background-position: 130% 0; } 45%, 100% { background-position: -30% 0; } }

/* intro: the T pops in, then the wordmark rides in from the left */
.sp-mark .mark-glyph { animation: sp-dot 0.5s cubic-bezier(0.2, 1.5, 0.4, 1) 0.35s both; transform-origin: 50% 55%; }
.sp-word { line-height: 0; }
.sp-word img {
  height: 56px; width: auto; display: block;
  clip-path: inset(0 100% 0 0); transform: translateX(-24px); filter: blur(4px);
  animation: sp-ride 0.75s cubic-bezier(0.2, 0.8, 0.2, 1) 0.6s forwards;
}
@keyframes sp-ride { to { clip-path: inset(0 0 0 0); transform: none; filter: none; } }
@media (prefers-reduced-motion: reduce) {
  .wordmark::after { animation: none; display: none; }
  .sp-mark .mark-glyph, .sp-word img { animation: none !important; clip-path: none; transform: none; filter: none; }
}

/* ================= first-start walkthrough ================= */
.ob-wrap { min-height: 100%; box-sizing: border-box; display: flex; flex-direction: column; padding: calc(var(--f7-safe-area-top) + 22px) 0 calc(var(--f7-safe-area-bottom) + 24px); }
.ob-dots { display: flex; justify-content: center; gap: 8px; margin-bottom: 8px; }
.ob-dots i { width: 8px; height: 8px; border-radius: 4px; background: rgba(255, 255, 255, 0.18); transition: width 0.3s ease, background-color 0.3s ease; }
.ob-dots i.on { width: 22px; background: var(--f7-theme-color); }
.ob-step { text-align: center; margin: auto 0; }
.ob-step .auth-lede { max-width: 340px; margin-left: auto; margin-right: auto; }
.ob-icon {
  position: relative; width: 116px; height: 116px; margin: 8px auto 26px; border-radius: 50%; display: grid; place-items: center;
  background: linear-gradient(145deg, #ff8a4c, #ff5a1f 55%, #ff3c6e); color: #fff;
  box-shadow: 0 20px 50px -14px rgba(255, 90, 31, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
.ob-icon i { font-size: 50px; position: relative; z-index: 2; }
.ob-icon img { width: 62%; position: relative; z-index: 2; }
.ob-icon.brandish { border-radius: 34px; }
.ob-icon .ring { position: absolute; inset: 0; border-radius: inherit; border: 2px solid rgba(255, 106, 43, 0.55); animation: ring-out 2.6s cubic-bezier(0.2, 0.6, 0.3, 1) infinite; }
.ob-icon .r2 { animation-delay: 1.3s; }
.ob-status { min-height: 20px; margin: -8px 0 14px; font-size: 14px; font-weight: 600; }
.ob-status.ok { color: var(--brand-green); }
.ob-status.ok::before { content: "✓ "; }
.ob-status.bad { color: var(--brand-amber); }

/* privacy */
.policy { padding: 16px; }
.policy h3 { margin: 0 0 6px; font-size: 17px; font-weight: 800; }
.policy p { margin: 0; color: #cfcfd6; font-size: 14.5px; line-height: 1.5; }
.policy-note { color: var(--txt2); font-size: 13px; text-align: center; margin: 4px 0 0; }
.login-privacy { display: block; text-align: center; color: rgba(255, 255, 255, 0.45); font-size: 13px; margin-top: 2px; }
@media (prefers-reduced-motion: reduce) { .ob-icon .ring { animation: none; display: none; } }

/* ================= layout fixes ================= */
/* Framework7 already pads screens without a navbar by the status bar height;
   our own layouts add it themselves, so drop F7's to avoid a double gap on iPhone */
.page.no-navbar > .page-content, .page.no-navbar .tabs > .page-content { padding-top: 0 !important; }

/* ================= home tabs: Rides / Nearby ================= */
.page-alive .tabs-animated-wrap { position: relative; z-index: 1; }
.page-alive .tabs > .page-content { background: transparent; }
.page-home .tabs > .page-content { padding-bottom: calc(92px + var(--f7-safe-area-bottom)) !important; }
.home-tabbar .tab-link { position: relative; color: rgba(255, 255, 255, 0.5); }
.home-tabbar .tab-link.tab-link-active { color: var(--f7-theme-color); }
.home-tabbar .tab-link .icon { font-size: 25px; }
.tab-live {
  position: absolute; top: 6px; left: calc(50% + 10px); width: 9px; height: 9px; border-radius: 50%;
  background: var(--brand-green); box-shadow: 0 0 0 2px #0c0c0e;
}
.tab-live::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--brand-green); animation: ring-out 1.6s ease-out infinite; }

/* ================= nearby (proximity chat) ================= */
.prox-state {
  align-self: center; padding: 5px 12px; border-radius: 999px; font-size: 13px; font-weight: 800; letter-spacing: 0.4px;
  background: rgba(255, 255, 255, 0.08); color: var(--txt2); border: 1px solid var(--glass-line);
}
.prox-state.on { background: rgba(48, 209, 122, 0.18); color: var(--brand-green); border-color: rgba(48, 209, 122, 0.45); }
.radar-card { position: relative; padding: 10px; }
.radar-card canvas { display: block; width: 100%; aspect-ratio: 1; max-width: 100%; }
.radar-note {
  position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); white-space: nowrap;
  padding: 6px 12px; border-radius: 999px; background: rgba(0, 0, 0, 0.55); color: rgba(255, 255, 255, 0.8); font-size: 13px; font-weight: 600;
}
#prox-toggle.is-live .hero-streaks, #prox-toggle.is-live::after { display: none; }
#prox-toggle.is-live { background: linear-gradient(135deg, #2b2b30, #1c1c20); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12); }
#prox-toggle.is-live .hero-icon { background: rgba(255, 107, 92, 0.22); color: var(--brand-red); }
.prox-ptt { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 6px 0 2px; animation: rise 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.prox-ptt .ptt-btn { width: 128px; height: 128px; }
.prox-ptt .ptt-btn.held { background: var(--brand-green); transform: scale(0.95); }
.vol-bars { display: flex; align-items: flex-end; gap: 2px; height: 16px; margin-right: 4px; }
.vol-bars i { width: 3px; border-radius: 1px; background: var(--bar-idle); display: block; }
.vol-bars i:nth-child(1) { height: 4px; } .vol-bars i:nth-child(2) { height: 7px; } .vol-bars i:nth-child(3) { height: 10px; }
.vol-bars i:nth-child(4) { height: 13px; } .vol-bars i:nth-child(5) { height: 16px; }
.vol-bars i.on { background: var(--f7-theme-color); }
.block-btn {
  flex: none; width: 36px; height: 36px; border-radius: 50%; border: none; cursor: pointer;
  background: rgba(255, 255, 255, 0.08); color: var(--txt2); display: grid; place-items: center;
}
.block-btn i { font-size: 16px; }
.hint-row.privacy { background: rgba(100, 210, 255, 0.07); border-color: rgba(100, 210, 255, 0.2); color: #cfe9f5; }
.hint-row.privacy i { color: #64d2ff; }
@media (prefers-reduced-motion: reduce) { .tab-live::after, .prox-ptt { animation: none; } }
/* snap crew cards inside the side margin, not against the screen edge */
.crew-rail { scroll-padding-inline: 16px; }
/* settings: in tall rows the icon sits next to the title, not floating mid-row */
.list .item-content:has(.item-inner-stack) > .item-media { align-self: flex-start; padding-top: 12px; }

/* ================= start-up intro ================= */
#splash {
  position: fixed; inset: 0; z-index: 20000; background: #000; display: grid; place-items: center; overflow: hidden;
  /* the intro shows before any other stylesheet has loaded: bring its own font */
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", system-ui, sans-serif;
  transition: opacity 0.45s ease 0.18s;
}
/* exit: the logo zooms away first, then the dark fades, so it never ghosts over the first screen */
#splash.out { opacity: 0; pointer-events: none; }
.sp-center { transition: transform 0.4s cubic-bezier(0.5, 0, 0.75, 0), opacity 0.3s ease, filter 0.4s ease; }
#splash.out .sp-center { transform: scale(1.35); opacity: 0; filter: blur(6px); }
.splash-bg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.sp-center { position: relative; display: flex; flex-direction: column; align-items: center; gap: 18px; }
.sp-mark {
  position: relative; width: 108px; height: 108px; border-radius: 32px; display: grid; place-items: center;
  background: linear-gradient(145deg, #ff8a4c, #ff5a1f 55%, #ff3c6e);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
  animation: sp-pop 0.9s cubic-bezier(0.2, 1.4, 0.3, 1) both, sp-glow 2.4s ease-in-out 0.7s infinite;
}
.sp-mark svg { width: 64px; height: 64px; position: relative; z-index: 2; }
.sp-mark path { stroke-dasharray: 30; stroke-dashoffset: 30; animation: sp-draw 0.5s ease-out forwards; }
.sp-mark .arc1 { animation-delay: 0.45s; }
.sp-mark .arc2 { animation-delay: 0.62s; }
.sp-mark circle { transform-origin: 24px 30px; transform-box: view-box; animation: sp-dot 0.45s cubic-bezier(0.2, 1.6, 0.4, 1) 0.3s both; }
.sp-mark .ring {
  position: absolute; inset: 0; border-radius: 32px; border: 2px solid rgba(255, 106, 43, 0.6);
  animation: ring-out 2.4s cubic-bezier(0.2, 0.6, 0.3, 1) 0.8s infinite; opacity: 0;
}
.sp-mark .r2 { animation-delay: 1.6s; }
.sp-mark .r3 { animation-delay: 2.4s; }
.sp-name { display: flex; font-size: 46px; font-weight: 800; letter-spacing: -1.6px; color: #fff; perspective: 400px; }
.sp-name span {
  display: inline-block; opacity: 0; transform: translateY(26px) rotateX(-75deg); filter: blur(6px);
  animation: sp-letter 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; animation-delay: calc(0.55s + var(--i) * 45ms);
}
.sp-tag { color: rgba(255, 255, 255, 0.62); font-size: 17px; opacity: 0; animation: sp-fade 0.6s ease 1.15s forwards; }
@keyframes sp-pop { from { transform: scale(0.4) rotate(-14deg); opacity: 0; filter: blur(8px); } to { transform: none; opacity: 1; filter: none; } }
@keyframes sp-glow { 0%, 100% { box-shadow: 0 0 30px -4px rgba(255, 90, 31, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.35); } 50% { box-shadow: 0 0 70px 8px rgba(255, 90, 31, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.35); } }
@keyframes sp-draw { to { stroke-dashoffset: 0; } }
@keyframes sp-dot { from { transform: scale(0); } to { transform: scale(1); } }
@keyframes sp-letter { to { opacity: 1; transform: none; filter: none; } }
@keyframes sp-fade { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .sp-mark, .sp-mark path, .sp-mark circle, .sp-mark .ring, .sp-name span, .sp-tag { animation: none !important; }
  .sp-mark path { stroke-dashoffset: 0; }
  .sp-name span, .sp-tag { opacity: 1; transform: none; filter: none; }
  #splash { transition: opacity 0.2s; }
}

/* ================= the "alive" app: glass, motion, depth ================= */
:root {
  --glass: rgba(28, 28, 32, 0.62);
  --glass-strong: rgba(28, 28, 32, 0.82);
  --glass-line: rgba(255, 255, 255, 0.09);
  --hot: linear-gradient(135deg, #ff7a3c, #ff4f6e);
}

/* pages with the living slipstream behind them */
.page-alive { background: #000; }
.page-alive > .page-content { background: transparent; position: relative; z-index: 1; }
.alive-bg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; display: block; pointer-events: none; opacity: 0.9; }
.screen-wrap { padding: 12px 16px calc(28px + var(--f7-safe-area-bottom)); display: flex; flex-direction: column; gap: 14px; }
.page-home .screen-wrap { padding-top: calc(var(--f7-safe-area-top) + 18px); }

.glass-card {
  background: var(--glass); border: 1px solid var(--glass-line); border-radius: 20px;
  -webkit-backdrop-filter: blur(18px) saturate(1.3); backdrop-filter: blur(18px) saturate(1.3);
}
.navbar-glass .navbar-bg { background: rgba(10, 10, 12, 0.55) !important; -webkit-backdrop-filter: blur(20px) saturate(1.4); backdrop-filter: blur(20px) saturate(1.4); }
.glass-dock { background: rgba(12, 12, 14, 0.7) !important; -webkit-backdrop-filter: blur(22px) saturate(1.4); backdrop-filter: blur(22px) saturate(1.4); }
.glass-dock::before { display: none; }
.glass-list ul { background: var(--glass) !important; -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.page-alive .block-title { color: rgba(255, 255, 255, 0.85); }

/* everything you can press gives way under your thumb */
.hero-card, .recent-item, .crew-card, .live-card, .rider-card, .plan-card .rsvp button, .act-btn, .join-go, .ghost-btn, .me-btn {
  transition: transform 0.14s ease, filter 0.14s ease, box-shadow 0.2s ease, background-color 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}
.hero-card:active, .recent-item:active, .crew-card:active, .live-card:active, .rider-card:active, .act-btn:active, .join-go:active, .ghost-btn:active, .me-btn:active {
  transform: scale(0.97); filter: brightness(0.92);
}

.section-head { display: flex; align-items: center; gap: 14px; font-size: 20px; font-weight: 800; letter-spacing: -0.3px; margin: 6px 2px -2px; }
.section-head > span:first-child { flex: 1; }
.section-action { font-size: 15px; font-weight: 600; color: var(--f7-theme-color); }
.home-section { display: flex; flex-direction: column; gap: 12px; }
.empty-card { padding: 16px; border-radius: 18px; background: var(--glass); border: 1px dashed rgba(255, 255, 255, 0.16); color: var(--txt2); font-size: 14px; line-height: 1.45; }
.ghost-btn {
  height: 50px; border-radius: 15px; border: 1px solid rgba(255, 255, 255, 0.16); background: rgba(0, 0, 0, 0.3);
  color: #fff; font: 600 16px -apple-system, system-ui, sans-serif; cursor: pointer;
}
.ghost-btn.danger { color: var(--brand-red); border-color: rgba(255, 107, 92, 0.35); }

/* ---- home ---- */
.home-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 4px; }
.home-kicker { color: rgba(255, 255, 255, 0.6); font-size: 15px; font-weight: 600; }
.home-hello {
  margin: 2px 0 0; font-size: 38px; font-weight: 800; letter-spacing: -1.2px; line-height: 1.05;
  background: linear-gradient(90deg, #fff 30%, #ffc8ae 50%, #fff 70%); background-size: 250% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; animation: shimmer 7s linear infinite;
}
.home-hello.revealed { animation: rise 0.65s cubic-bezier(0.2, 0.8, 0.2, 1) both var(--reveal-delay, 0ms), shimmer 7s linear infinite 1s; }
.me-btn { display: block; border-radius: 50%; padding: 3px; background: var(--hot); box-shadow: 0 8px 24px -8px rgba(255, 90, 60, 0.8); }
.me-av { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; color: #fff; border: 2px solid #000; }

.hero-card {
  position: relative; overflow: hidden; display: flex; align-items: center; gap: 14px; width: 100%;
  padding: 18px; border: none; border-radius: 22px; text-align: left; color: #fff; cursor: pointer;
  background: linear-gradient(135deg, #ff7a3c 0%, #ff4f6e 60%, #c2378f 100%);
  box-shadow: 0 18px 40px -16px rgba(255, 80, 70, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.hero-card.compact { padding: 14px 16px; }
.hero-card::after {
  content: ""; position: absolute; top: 0; left: -60%; width: 40%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.28), transparent);
  transform: skewX(-20deg); animation: sweep 4.5s ease-in-out 1.2s infinite;
}
.hero-streaks { position: absolute; inset: 0; pointer-events: none; opacity: 0.55; }
.hero-streaks i {
  position: absolute; right: -50%; height: 2px; width: 45%; border-radius: 2px; /* fully off-card until it animates */
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.9), transparent); animation: streak 2.6s linear infinite;
}
.hero-streaks i:nth-child(1) { top: 22%; animation-delay: 0s; }
.hero-streaks i:nth-child(2) { top: 48%; width: 30%; animation-delay: 0.9s; animation-duration: 2s; }
.hero-streaks i:nth-child(3) { top: 70%; animation-delay: 1.6s; }
.hero-streaks i:nth-child(4) { top: 86%; width: 25%; animation-delay: 0.4s; animation-duration: 3.2s; }
@keyframes streak { from { transform: translateX(0); } to { transform: translateX(-340%); } }
.hero-icon {
  position: relative; flex: none; width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center;
  background: rgba(255, 255, 255, 0.22); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
.hero-icon i { font-size: 28px; }
.hero-text { position: relative; flex: 1; display: flex; flex-direction: column; }
.hero-text b { font-size: 20px; font-weight: 800; letter-spacing: -0.3px; }
.hero-text small { font-size: 14px; opacity: 0.85; margin-top: 2px; }
.hero-go { position: relative; font-size: 30px; opacity: 0.9; }

.join-card { padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.card-label { font-size: 13px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase; color: rgba(255, 255, 255, 0.55); }
.join-cells { margin: 0; }
.join-cells span { height: 54px; background: rgba(255, 255, 255, 0.07); font-size: 26px; }
.join-cells.complete span { border-color: rgba(48, 209, 122, 0.55); background: rgba(48, 209, 122, 0.12); }
.join-go {
  display: flex; align-items: center; justify-content: center; gap: 8px; height: 48px; border-radius: 14px; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.16); background: rgba(255, 255, 255, 0.06); color: rgba(255, 255, 255, 0.55);
  font: 700 16px -apple-system, system-ui, sans-serif;
}
.join-go i { font-size: 18px; }
.join-go.ready { background: var(--brand-green); border-color: transparent; color: #04210f; box-shadow: 0 10px 26px -10px rgba(48, 209, 122, 0.9); }

.live-card {
  position: relative; display: flex; align-items: center; gap: 14px; width: 100%; padding: 14px 16px; margin-bottom: 2px;
  border-radius: 20px; border: 1px solid rgba(48, 209, 122, 0.45); color: #fff; text-align: left; cursor: pointer;
  background: linear-gradient(135deg, rgba(48, 209, 122, 0.26), rgba(20, 90, 60, 0.3));
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  animation: rise 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.live-dot { position: relative; flex: none; width: 14px; height: 14px; border-radius: 50%; background: var(--brand-green); }
.live-dot::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid var(--brand-green); animation: ring-out 1.8s ease-out infinite; }
.lc-main { flex: 1; display: flex; flex-direction: column; }
.lc-main b { font-size: 17px; }
.lc-main small { font-size: 13px; color: #b8f5d2; }
.lc-join { padding: 8px 16px; border-radius: 12px; background: var(--brand-green); color: #04210f; font-weight: 800; }

.crew-rail { display: flex; gap: 12px; overflow-x: auto; margin: 0 -16px; padding: 4px 16px 8px; scroll-snap-type: x mandatory; scrollbar-width: none; }
.crew-rail::-webkit-scrollbar { display: none; }
.crew-card {
  --cc: #ff6a2b; position: relative; flex: none; width: 168px; min-height: 150px; padding: 14px; border-radius: 22px; cursor: pointer;
  scroll-snap-align: start; display: flex; flex-direction: column; gap: 8px; overflow: hidden;
  background: linear-gradient(160deg, color-mix(in srgb, var(--cc) 38%, transparent), rgba(28, 28, 32, 0.75) 70%);
  border: 1px solid color-mix(in srgb, var(--cc) 45%, transparent);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
}
.cc-top { display: flex; align-items: center; justify-content: space-between; }
.cc-badge { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; font-weight: 800; background: var(--cc); color: #fff; box-shadow: 0 8px 20px -8px var(--cc); }
.cc-live { font-size: 11px; font-weight: 800; letter-spacing: 0.6px; color: #04210f; background: var(--brand-green); border-radius: 6px; padding: 2px 7px; animation: live-blink 1.6s ease-in-out infinite; }
@keyframes live-blink { 50% { opacity: 0.55; } }
.cc-name { font-size: 17px; font-weight: 800; letter-spacing: -0.2px; line-height: 1.2; }
.cc-stack { display: flex; }
.cc-stack .mini-av { margin-left: -8px; border: 2px solid #1c1c20; }
.cc-stack .mini-av:first-child { margin-left: 0; }
.cc-next { font-size: 12.5px; color: rgba(255, 255, 255, 0.65); margin-top: auto; }
.crew-card.add { align-items: flex-start; justify-content: center; background: var(--glass); border: 1px dashed rgba(255, 255, 255, 0.2); }
.crew-card.add i { font-size: 26px; color: var(--f7-theme-color); }
.crew-card.add small { color: var(--txt2); font-size: 12.5px; }
.mini-av {
  width: 28px; height: 28px; border-radius: 50%; display: inline-grid; place-items: center; flex: none;
  font-size: 11px; font-weight: 800; color: #fff;
}
.mini-av.more { background: #3a3a3e; }

.plan-card {
  --cc: #ff6a2b; display: flex; gap: 14px; padding: 14px; border-radius: 20px; background: var(--glass); border: 1px solid var(--glass-line);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
}
.plan-date {
  flex: none; width: 54px; height: 60px; border-radius: 14px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: linear-gradient(180deg, var(--cc), color-mix(in srgb, var(--cc) 55%, #000));
}
.plan-date b { font-size: 12px; letter-spacing: 1px; text-transform: uppercase; opacity: 0.85; }
.plan-date span { font-size: 24px; font-weight: 800; line-height: 1; }
.plan-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.plan-title { font-size: 17px; font-weight: 800; }
.plan-meta { font-size: 13.5px; color: var(--txt2); }
.plan-going { font-size: 13px; color: #b8f5d2; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.plan-maps { display: inline-flex; align-items: center; gap: 3px; color: var(--f7-theme-color); font-weight: 600; }
.plan-maps i { font-size: 14px; }
.rsvp { display: flex; gap: 6px; margin-top: 8px; }
.rsvp button {
  flex: 1; height: 32px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.14); background: rgba(255, 255, 255, 0.05);
  color: var(--txt2); font: 600 13px -apple-system, system-ui, sans-serif; cursor: pointer; width: auto;
}
.rsvp button.on { background: var(--f7-theme-color); border-color: transparent; color: #fff; }
.rsvp button[data-rsvp="going"].on { background: var(--brand-green); color: #04210f; }

.recent-list { display: flex; flex-direction: column; gap: 8px; }
.recent-item {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; border-radius: 18px; cursor: pointer;
  background: var(--glass); border: 1px solid var(--glass-line); color: #fff; text-align: left;
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
}
.ri-icon { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--tint-accent); color: var(--f7-theme-color); flex: none; }
.ri-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ri-main b { font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ri-main small { font-size: 12.5px; color: var(--txt2); }
.ri-code { font-variant-numeric: tabular-nums; font-size: 13px; color: var(--txt2); letter-spacing: 1px; }
.hint-row { display: flex; gap: 12px; align-items: flex-start; padding: 14px; border-radius: 18px; background: rgba(48, 209, 122, 0.08); border: 1px solid rgba(48, 209, 122, 0.2); color: #cfeedd; font-size: 13.5px; line-height: 1.45; }
.hint-row i { color: var(--brand-green); font-size: 22px; }
.plans-link { text-align: center; font-weight: 600; color: var(--txt2); padding: 6px; }

/* ---- ride ---- */
.ride-wrap { gap: 12px; }
.ride-hero { padding: 14px; }
.ride-hero .livebar { font-size: 15px; }
.livebar .dot { position: relative; }
.livebar.on .dot::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid var(--brand-green); animation: ring-out 1.8s ease-out infinite; }
.screen-wrap .catchup-bar, .screen-wrap .ride-actions { margin: 0; }
.big-alert-btn { width: 100%; height: 54px; border: none; border-radius: 16px; background: var(--hot); color: #fff; font: 700 17px -apple-system, system-ui, sans-serif; animation: ov-pulse 1.6s ease-in-out infinite; }
.warn-block { padding: 14px; }
.action-row { display: grid; grid-template-columns: 1fr 1.4fr; gap: 10px; }
.act-btn {
  height: 46px; border-radius: 13px; display: flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer;
  font: 700 15px -apple-system, system-ui, sans-serif;
}
.hazard-btn { background: rgba(255, 176, 32, 0.12); border: 1px solid rgba(255, 176, 32, 0.45); color: #ffd27a; }
.e2ee-pill { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; color: #9fe3ff; background: rgba(100, 210, 255, 0.12); border: 1px solid rgba(100, 210, 255, 0.3); border-radius: 999px; padding: 3px 9px; letter-spacing: 0; }
.e2ee-pill i { font-size: 11px; }

.rider-cards { display: flex; flex-direction: column; gap: 8px; }
.rider-card {
  position: relative; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 18px; cursor: pointer;
  background: var(--glass); border: 1px solid var(--glass-line);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
}
.rider-card.talk {
  border-color: rgba(48, 209, 122, 0.7);
  background: linear-gradient(120deg, rgba(48, 209, 122, 0.22), rgba(28, 28, 32, 0.7) 70%);
  box-shadow: 0 10px 30px -14px rgba(48, 209, 122, 0.9);
}
.rider-card.side { border-color: rgba(191, 90, 242, 0.55); }
.rider-card .av-wrap { width: 44px; height: 44px; position: relative; flex: none; }
.rider-card .av { font-size: 16px; }
.rc-main { flex: 1; min-width: 0; }
.rc-name { font-size: 16px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rc-status { font-size: 13.5px; margin-top: 2px; }
.status-side { color: #d7a6ff !important; }
.role-badge.private { color: #f1dcff; background: rgba(191, 90, 242, 0.45); }
.role-badge.pax { color: #ffe0e8; background: rgba(255, 45, 85, 0.45); }

/* passenger guide */
.guide-popup .page-content { background: radial-gradient(130% 55% at 50% -12%, rgba(255, 45, 85, 0.22), transparent 60%), #000; }
.guide-popup .screen-wrap { padding-top: calc(var(--f7-safe-area-top) + 28px); }
.guide-kicker { font-size: 13px; font-weight: 800; letter-spacing: 1.4px; text-transform: uppercase; color: #ff6b8b; }
.guide-title { margin: -6px 0 0; font-size: 32px; font-weight: 800; letter-spacing: -0.8px; }
.guide-lede { margin: 0; color: var(--txt2); font-size: 16px; line-height: 1.45; }
.guide-steps { margin: 4px 0 0; padding: 0; list-style: none; counter-reset: step; display: flex; flex-direction: column; gap: 10px; }
.guide-steps li {
  counter-increment: step; position: relative; padding: 14px 14px 14px 56px; border-radius: 18px;
  background: var(--glass); border: 1px solid var(--glass-line); font-size: 14.5px; line-height: 1.45; color: #d6d6dc;
}
.guide-steps li::before {
  content: counter(step); position: absolute; left: 14px; top: 14px; width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center; font-weight: 800; background: var(--hot); color: #fff;
}
.guide-steps b { color: #fff; }
.guide-note { margin: 0; padding: 12px 14px; border-radius: 14px; background: rgba(255, 176, 32, 0.1); color: #ffd98a; font-size: 13.5px; line-height: 1.45; }
.guide-close { display: flex; align-items: center; justify-content: center; text-decoration: none; }
.ride-footer { color: var(--txt2); font-size: 13px; line-height: 1.45; text-align: center; padding: 4px 8px; }

/* talk button: a spinning ring of light while you're on air */
.ptt-spin {
  position: absolute; inset: -5px; border-radius: 50%; opacity: 0; pointer-events: none;
  background: conic-gradient(from 0deg, transparent, rgba(255, 255, 255, 0.9), transparent 40%);
  -webkit-mask: radial-gradient(circle, transparent 61%, #000 62%); mask: radial-gradient(circle, transparent 61%, #000 62%);
  transition: opacity 0.2s;
}
.ptt-wrap.on-air .ptt-spin { opacity: 1; animation: spin 1.4s linear infinite; }
.ptt-btn:not(.held):not(.gate):not(.locked):not(.recording):not(:disabled) { animation: breathe 3.2s ease-in-out infinite; }
@keyframes breathe { 50% { box-shadow: 0 0 0 8px rgba(255, 106, 43, 0.12), 0 12px 36px -10px rgba(255, 90, 60, 0.9); } }
.ptt-btn { background: var(--hot); box-shadow: 0 12px 30px -12px rgba(255, 90, 60, 0.9); }

/* private channel bar */
.side-bar {
  display: flex; align-items: center; gap: 10px; padding: 12px 12px 12px 14px; border-radius: 18px;
  background: linear-gradient(135deg, rgba(191, 90, 242, 0.3), rgba(94, 92, 230, 0.25)); border: 1px solid rgba(191, 90, 242, 0.45);
  animation: rise 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.side-bar > i { font-size: 22px; color: #e3c2ff; }
.sb-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sb-text b { font-size: 15px; }
.sb-text span { font-size: 12.5px; color: #dcc8f5; }
.sb-btn {
  flex: none; width: auto; height: 38px; padding: 0 14px; border-radius: 12px; border: none; cursor: pointer;
  background: #bf5af2; color: #fff; font: 700 14px -apple-system, system-ui, sans-serif; touch-action: none; user-select: none; -webkit-user-select: none;
}
.sb-btn.held { background: var(--brand-green); color: #04210f; transform: scale(0.96); }
.sb-end { flex: none; width: 34px; height: 34px; border-radius: 50%; border: none; background: rgba(255, 255, 255, 0.14); color: #fff; display: grid; place-items: center; }
.sb-end i { font-size: 16px; }

/* hazard banner + hazard sheet + map pins */
.cmd-banner.hazard { background: linear-gradient(135deg, rgba(255, 90, 60, 0.97), rgba(214, 42, 90, 0.97)); color: #fff; box-shadow: 0 16px 40px -10px rgba(255, 60, 60, 0.7); }
.hazard-sheet .actions-button { color: #ffd27a !important; }
.hz-icon { font-size: 30px; color: #ffb020; }
.hz-pin {
  width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; transform: rotate(45deg);
  background: #ffb020; border: 2px solid #1a0d00; box-shadow: 0 4px 14px rgba(255, 176, 32, 0.6);
}
.hz-pin i { transform: rotate(-45deg); font-size: 17px; color: #1a0d00; }
.meet-pin { width: 38px; height: 38px; border-radius: 50% 50% 50% 4px; transform: rotate(-45deg); display: grid; place-items: center; background: var(--hot); border: 2px solid #fff; box-shadow: 0 6px 18px rgba(255, 90, 60, 0.7); }
.meet-pin i { transform: rotate(45deg); color: #fff; font-size: 16px; }
.pin { position: relative; width: 38px; height: 38px; }
.pin-ring { position: absolute; inset: -2px; border-radius: 50%; border: 2px solid currentColor; color: rgba(255, 255, 255, 0.5); animation: ring-out 2.4s ease-out infinite; pointer-events: none; }
.pin.talk .pin-ring { color: var(--brand-green); animation-duration: 1s; }
.pin.me { box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.25), 0 2px 8px rgba(0, 0, 0, 0.6); }

/* ---- crew ---- */
.crew-hero { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 8px 0 4px; }
.crew-badge {
  --cc: #ff6a2b; width: 84px; height: 84px; border-radius: 26px; display: grid; place-items: center; font-size: 32px; font-weight: 800;
  background: linear-gradient(145deg, color-mix(in srgb, var(--cc) 80%, #fff), var(--cc)); box-shadow: 0 18px 40px -14px var(--cc);
}
.crew-name { margin: 8px 0 0; font-size: 32px; font-weight: 800; letter-spacing: -0.8px; }
.crew-sub { color: var(--txt2); font-size: 14px; }
.member-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 10px; }
.member { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 6px; border-radius: 18px; background: var(--glass); border: 1px solid var(--glass-line); font-size: 13px; text-align: center; }
.member-av { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 16px; color: #fff; }

/* ---- plan a ride ---- */
.field { display: flex; flex-direction: column; gap: 8px; }
.field > span { font-size: 13px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase; color: rgba(255, 255, 255, 0.6); }
.field > span em { font-style: normal; text-transform: none; letter-spacing: 0; color: var(--txt2); font-weight: 500; }
.page input.field-input {
  display: block; width: 100%; box-sizing: border-box; height: 54px; padding: 0 16px; border-radius: 15px;
  border: 1.5px solid var(--glass-line); background: var(--glass-strong); color: #fff; font-size: 17px; outline: none;
  color-scheme: dark; transition: border-color 0.2s, box-shadow 0.2s;
}
.page input.field-input:focus { border-color: var(--f7-theme-color); box-shadow: 0 0 0 4px rgba(255, 106, 43, 0.18); }
.pick-map { height: 240px; overflow: hidden; }
#plan-map, #recap-map { width: 100%; height: 100%; background: #0b0b0d; }
#plan-map .leaflet-tile-pane, #recap-map .leaflet-tile-pane { filter: invert(1) hue-rotate(180deg) brightness(0.9) contrast(0.9) saturate(0.6); }

/* ---- recap ---- */
.page-recap .screen-wrap { padding-top: calc(var(--f7-safe-area-top) + 22px); }
.recap-kicker { font-size: 13px; font-weight: 800; letter-spacing: 1.6px; text-transform: uppercase; color: var(--brand-green); }
.recap-title { margin: -6px 0 0; font-size: 40px; font-weight: 800; letter-spacing: -1.3px; line-height: 1.05; }
.recap-date { color: var(--txt2); font-size: 15px; margin-top: -8px; }
.recap-map { position: relative; height: 260px; overflow: hidden; }
.recap-noroute { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: var(--txt2); }
.recap-noroute i { font-size: 30px; }
.route-glow { filter: blur(3px); }
.stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.stat { padding: 16px; border-radius: 20px; background: var(--glass); border: 1px solid var(--glass-line); display: flex; flex-direction: column; }
.stat b { font-size: 36px; font-weight: 800; letter-spacing: -1px; font-variant-numeric: tabular-nums; line-height: 1.1; }
.stat span { font-size: 13px; color: var(--txt2); font-weight: 600; }
.stat:first-child b { background: var(--hot); -webkit-background-clip: text; background-clip: text; color: transparent; }
.recap-riders { display: flex; flex-wrap: wrap; gap: 8px; }
.rider-chip { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px 5px 5px; border-radius: 999px; background: var(--glass); border: 1px solid var(--glass-line); font-weight: 600; font-size: 14px; }
.share-popup .page-content { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: calc(var(--f7-safe-area-top) + 16px) 16px 24px; background: #000; }
.share-popup img { width: 100%; max-width: 420px; border-radius: 18px; }
.share-popup p { color: var(--txt2); margin: 0; }

/* ---- settings ---- */
.profile-card { display: flex; align-items: center; gap: 14px; margin: 14px 16px 0; padding: 16px; }
.pc-av { width: 62px; height: 62px; border-radius: 50%; display: grid; place-items: center; font-size: 22px; font-weight: 800; color: #fff; box-shadow: 0 0 0 3px #000, 0 0 0 5px rgba(255, 255, 255, 0.25); }
.pc-name { font-size: 22px; font-weight: 800; letter-spacing: -0.3px; }
.pc-sub { color: var(--txt2); font-size: 14px; margin-top: 2px; }
.tile { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; background: var(--c); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25); }
.tile i { font-size: 17px; }

/* ---- plans ---- */
.plans-head { margin: 6px 0 0; font-size: 40px; font-weight: 800; letter-spacing: -1.3px; }
.plans-intro { margin: -8px 0 4px; color: var(--txt2); font-size: 17px; }
.price-card { position: relative; padding: 18px; border-radius: 22px; background: var(--glass); border: 1px solid var(--glass-line); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.price-card.pop { border: 1.5px solid transparent; background: linear-gradient(var(--glass-strong), var(--glass-strong)) padding-box, var(--hot) border-box; box-shadow: 0 18px 40px -18px rgba(255, 80, 70, 0.8); }
.price-card .pop-tag { position: absolute; top: -11px; right: 16px; margin: 0; }
.pc-top { display: flex; justify-content: space-between; align-items: baseline; }
.pc-top .pn { font-size: 20px; font-weight: 800; }

@media (prefers-reduced-motion: reduce) {
  .home-hello, .home-hello.revealed, .hero-card::after, .hero-streaks i, .live-dot::after, .cc-live, .live-card,
  .ptt-wrap.on-air .ptt-spin, .ptt-btn, .side-bar, .pin-ring, .livebar.on .dot::after, .big-alert-btn { animation: none !important; }
}

/* second row: voice commands + (captain) route */
.action-row2 { grid-template-columns: 1fr; }
.action-row2.has-route { grid-template-columns: 1.4fr 1fr; }
.ask-btn { background: rgba(10, 132, 255, 0.14); border: 1px solid rgba(10, 132, 255, 0.45); color: #9cc8ff; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.ask-btn.listening { background: rgba(10, 132, 255, 0.35); color: #fff; animation: askPulse 1.1s ease-in-out infinite; }
@keyframes askPulse { 50% { box-shadow: 0 0 0 6px rgba(10, 132, 255, 0.18); } }
.route-btn { background: rgba(48, 209, 88, 0.12); border: 1px solid rgba(48, 209, 88, 0.45); color: #8ff0a8; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.ride-hint { font-size: 13px; color: rgba(235, 235, 245, 0.7); text-align: center; line-height: 1.35; padding: 0 6px; }
.tank-input { width: 84px; text-align: right; background: transparent; border: 0; color: inherit; font: inherit; }

/* crew messages */
.crew-msg-card { padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.crew-msgs { display: flex; flex-direction: column; gap: 6px; max-height: 220px; overflow-y: auto; }
.crew-msgs:empty { display: none; }
.crew-msg { font-size: 14px; line-height: 1.35; }
.crew-msg b { font-weight: 700; margin-right: 6px; }
.crew-msg time { font-size: 12px; opacity: 0.55; margin-left: 6px; }
.crew-msg-form { display: flex; gap: 8px; }
.crew-msg-form input { flex: 1; min-width: 0; height: 40px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.14); background: rgba(255,255,255,0.06); color: inherit; padding: 0 12px; font: inherit; }
.crew-msg-form button { width: 44px; height: 40px; border-radius: 12px; border: 0; background: #ff6a2b; color: #fff; display: flex; align-items: center; justify-content: center; }
.crew-msg-note { font-size: 12px; opacity: 0.6; }

/* ================= QR invites, moments, crew season, reports ================= */
/* second row: ask + moment (+ route for the captain) */
.action-row2 { grid-template-columns: 1.3fr 1fr; }
.action-row2.has-route { grid-template-columns: 1.3fr 1fr; }
.action-row2.has-route .route-btn { grid-column: 1 / -1; } /* captain: the route gets its own line */
.action-row2 .act-btn { min-width: 0; padding: 0 12px; }
.action-row2 .act-btn span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.moment-btn { background: rgba(191, 90, 242, 0.13); border: 1px solid rgba(191, 90, 242, 0.45); color: #e2b8ff; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.mo-icon { font-size: 30px; }
.mo-pin {
  width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  background: var(--mc, #64d2ff); border: 2px solid #fff; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.55);
}
.mo-pin i { font-size: 17px; color: #0b0b0d; }
.recap-moments { display: flex; flex-wrap: wrap; gap: 8px; }
.moment-chip { padding: 6px 12px; }
.moment-chip i { font-size: 16px; color: var(--mc); }
.moment-chip small { color: var(--txt2); font-weight: 500; font-size: 12.5px; }

/* invite popup: the QR code stays black on white with a quiet zone, whatever the theme */
.invite-popup .page-content { background: radial-gradient(130% 55% at 50% -12%, rgba(255, 106, 43, 0.24), transparent 60%), #000; }
.invite-kicker { color: #ff9a6b; }
.qr-card {
  align-self: center; display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 16px 16px 14px; border-radius: 24px; background: #fff; color: #000; box-shadow: 0 24px 60px -24px rgba(255, 106, 43, 0.8);
}
.qr-box { display: grid; place-items: center; min-width: 200px; min-height: 200px; }
.qr-canvas { display: block; max-width: calc(100vw - 96px); height: auto !important; image-rendering: pixelated; }
.qr-fail { max-width: 220px; text-align: center; font-size: 14px; color: #333; }
.qr-code-label { margin-top: 6px; font-size: 12px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: #6b6b72; }
.qr-code { font-size: 28px; font-weight: 800; letter-spacing: 3px; font-variant-numeric: tabular-nums; color: #000; }
.invite-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.invite-btn { width: 100%; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.16); color: #fff; }

/* crew: this season */
.season-year { font-size: 15px; font-weight: 700; color: var(--txt2); }
.season-card { padding: 14px; display: flex; flex-direction: column; gap: 12px; }
.season-totals { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.season-totals > div { display: flex; flex-direction: column; padding: 12px 14px; border-radius: 16px; background: rgba(255, 255, 255, 0.05); }
.season-totals b { font-size: 30px; font-weight: 800; letter-spacing: -0.8px; font-variant-numeric: tabular-nums; line-height: 1.1; }
.season-totals > div:first-child b { background: var(--hot); -webkit-background-clip: text; background-clip: text; color: transparent; }
.season-totals span { font-size: 13px; color: var(--txt2); font-weight: 600; }
.season-board { display: flex; flex-direction: column; gap: 4px; }
.season-row { display: flex; align-items: center; gap: 10px; padding: 7px 6px; border-radius: 12px; font-size: 15px; }
.season-row.me { background: rgba(255, 106, 43, 0.12); }
.season-rank { width: 20px; text-align: center; font-weight: 800; color: var(--txt2); font-variant-numeric: tabular-nums; }
.season-row:first-child .season-rank { color: #ffb020; }
.season-name { flex: 1; min-width: 0; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.season-km { font-weight: 700; font-variant-numeric: tabular-nums; }
.season-most { display: flex; align-items: center; gap: 8px; font-size: 14px; color: #d6d6dc; padding: 2px 4px; }
.season-most i { font-size: 18px; color: #ffb020; }

/* Nearby: report sits next to block */
.prox-card .report-btn { margin-right: -4px; }

/* ---------- ride mode: huge buttons for gloves, high contrast for sunlight ---------- */
.page-ridemode .page-content.rm {
  background: #000; color: #fff; display: flex; flex-direction: column; gap: 12px;
  padding: calc(env(safe-area-inset-top) + 10px) 12px calc(env(safe-area-inset-bottom) + 12px);
  box-sizing: border-box; min-height: 100%;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
.rm-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.rm-title { font-size: 20px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rm-title span { color: #9a9aa2; font-weight: 700; }
.rm-clock { font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; }
.rm-now { display: flex; align-items: center; gap: 8px; font-size: 16px; color: #b3f5c8; overflow: hidden; }
.rm-now span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rm-btn {
  position: relative; overflow: hidden; width: 100%; border: 3px solid transparent; border-radius: 22px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  font: 800 20px -apple-system, system-ui, sans-serif; color: #fff; cursor: pointer;
  -webkit-tap-highlight-color: transparent; touch-action: none; transition: transform 0.08s ease;
}
.rm-btn:active { transform: scale(0.97); }
.rm-btn i { font-size: 38px; }
.rm-btn span { position: relative; text-align: center; line-height: 1.15; }
.rm-btn i { position: relative; }
.rm-ptt { min-height: 30vh; flex: none; background: #1c1c1e; border-color: #ff6a2b; font-size: 26px; letter-spacing: 0.5px; }
.rm-ptt i { font-size: 64px; color: #ff6a2b; }
.rm-ptt.on { background: #ff6a2b; }
.rm-ptt.on i { color: #fff; }
.rm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.rm-grid .rm-btn { min-height: 17vh; }
.rm-captain { grid-template-columns: repeat(3, 1fr); }
.rm-captain .rm-btn { min-height: 12vh; font-size: 17px; }
.rm-hazard { background: #3a2800; border-color: #ffb020; color: #ffd27a; }
.rm-ask { background: #002a55; border-color: #0a84ff; color: #cfe5ff; }
.rm-ask.listening { background: #0a84ff; color: #fff; }
.rm-music { background: #06301a; border-color: #30d158; color: #b3f5c8; }
.rm-cmd { background: #2a2000; border-color: #ffb020; color: #ffd27a; }
.rm-bottom { display: grid; grid-template-columns: 1.6fr 1fr; gap: 12px; margin-top: auto; }
.rm-bottom .rm-btn { min-height: 11vh; flex-direction: row; font-size: 18px; }
.rm-bottom .rm-btn i { font-size: 28px; }
.rm-sos { background: #3a0a08; border-color: #ff3b30; color: #ff9a92; }
.rm-exit { background: #1c1c1e; border-color: #48484a; color: #d1d1d6; }
.rm-fill { position: absolute; inset: 0; transform: scaleX(0); transform-origin: left; background: rgba(255, 255, 255, 0.22); }
.rm-sos .rm-fill { background: rgba(255, 59, 48, 0.55); }
.rm-btn.holding .rm-fill { transform: scaleX(1); transition: transform var(--hold, 2000ms) linear; }
.rm-btn.flash { animation: rmFlash 0.5s ease; }
@keyframes rmFlash { 0% { filter: brightness(2.2); } 100% { filter: none; } }
.rm-toast {
  position: fixed; left: 12px; right: 12px; bottom: calc(env(safe-area-inset-bottom) + 14vh); z-index: 20;
  background: #fff; color: #000; border-radius: 18px; padding: 16px 18px; font: 700 19px -apple-system, system-ui, sans-serif; text-align: center;
}
.rm-sheet {
  position: fixed; inset: 0; z-index: 30; background: rgba(0, 0, 0, 0.94); display: flex; flex-direction: column; gap: 12px;
  padding: calc(env(safe-area-inset-top) + 14px) 12px calc(env(safe-area-inset-bottom) + 12px);
}
.rm-sheet[hidden] { display: none; }
.rm-sheet-grid { flex: 1; display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 1fr; gap: 12px; }
.rm-hz { background: #3a2800; border-color: #ffb020; color: #ffd27a; }
.rm-cancel { min-height: 10vh; background: #1c1c1e; border-color: #48484a; }

/* link code dialog + ride mode entry */
.link-code { font: 800 34px -apple-system, system-ui, sans-serif; letter-spacing: 4px; text-align: center; margin: 6px 0 10px; font-variant-numeric: tabular-nums; }
.link-code-note { font-size: 14px; line-height: 1.35; }
.ridemode-btn {
  display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 10px; align-items: center; justify-items: start;
  height: auto; padding: 12px 16px; text-decoration: none; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.18); color: #fff;
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.ridemode-btn i { grid-row: 1 / 3; font-size: 26px; }
.ridemode-btn small { font-size: 12px; font-weight: 600; opacity: 0.65; }