/*
 * Shared web theme
 *
 * These values mirror the neutral React Navigation theme in ghd-expo:
 * white / near-black canvases, quiet grouped surfaces, system typography,
 * restrained separators, and grayscale interaction states.
 */
html:root {
  color-scheme: light;
  --theme-bg: #ffffff;
  --theme-bg-grouped: #f5f5f6;
  --theme-surface: #ffffff;
  --theme-surface-2: #f4f4f5;
  --theme-surface-3: #e9e9eb;
  --theme-text: #1c1c1e;
  --theme-muted: #55555a;
  --theme-quiet: #6e6e73;
  --theme-border: #d1d1d6;
  --theme-border-strong: #b8b8bd;
  --theme-accent: #5c5c61;
  --theme-accent-strong: #2c2c2e;
  --theme-accent-soft: rgb(60 60 64 / 8%);
  --theme-accent-softer: rgb(60 60 64 / 4%);
  --theme-link: #555559;
  --theme-primary-bg: #2c2c2e;
  --theme-primary-fg: #ffffff;
  --theme-danger: #ff3b30;
  --theme-danger-soft: rgb(255 59 48 / 10%);
  --theme-warning: #c76a00;
  --theme-warning-soft: rgb(255 149 0 / 11%);
  --theme-violet: #77777c;
  --theme-success: #248a3d;
  --theme-success-soft: rgb(52 199 89 / 11%);
  --theme-shadow: 0 18px 55px rgb(28 28 30 / 10%);
  --theme-header: rgb(255 255 255 / 88%);
  --chart-1: #555559;
  --chart-2: #737378;
  --chart-3: #919196;
  --chart-4: #adadb1;
  --chart-5: #c2c2c5;
  --chart-6: #d3d3d6;
  --chart-grid: #d9d9dc;
  --chart-tick: #747479;
  --chart-cursor: #a0a0a4;
  --chart-dot-border: #ffffff;

  /* Aliases used by the home, share, and admin surfaces. */
  --bg: var(--theme-bg);
  --bg-deep: var(--theme-bg-grouped);
  --canvas: var(--theme-bg);
  --canvas-deep: var(--theme-bg-grouped);
  --surface: var(--theme-surface);
  --surface-2: var(--theme-surface-2);
  --surface-3: var(--theme-surface-3);
  --panel: var(--theme-surface);
  --panel-2: var(--theme-surface-2);
  --panel-raised: var(--theme-surface-2);
  --ink: var(--theme-text);
  --text: var(--theme-text);
  --muted: var(--theme-muted);
  --muted-2: var(--theme-quiet);
  --quiet: var(--theme-quiet);
  --line: var(--theme-border);
  --line-soft: rgb(60 60 67 / 18%);
  --line-bright: var(--theme-border-strong);
  --line-strong: var(--theme-border-strong);
  --mint: var(--theme-accent);
  --mint-bright: var(--theme-accent);
  --mint-strong: var(--theme-accent);
  --mint-dark: var(--theme-accent-soft);
  --mint-soft: var(--theme-accent-soft);
  --acid: var(--theme-accent);
  --acid-soft: var(--theme-accent-soft);
  --accent: var(--theme-accent);
  --accent-ink: #ffffff;
  --cyan: var(--theme-accent);
  --amber: var(--theme-warning);
  --orange: var(--theme-warning);
  --violet: var(--theme-violet);
  --red: var(--theme-danger);
  --danger: var(--theme-danger);
  --shadow: var(--theme-shadow);
}

html[data-theme="dark"] {
  color-scheme: dark;
  --theme-bg: #0b0b0c;
  --theme-bg-grouped: #111113;
  --theme-surface: #18181a;
  --theme-surface-2: #212124;
  --theme-surface-3: #2b2b2e;
  --theme-text: #f2f2f4;
  --theme-muted: #b0b0b5;
  --theme-quiet: #929297;
  --theme-border: #343437;
  --theme-border-strong: #505054;
  --theme-accent: #c2c2c6;
  --theme-accent-strong: #dedee1;
  --theme-accent-soft: rgb(220 220 224 / 11%);
  --theme-accent-softer: rgb(220 220 224 / 6%);
  --theme-link: #c1c1c5;
  --theme-primary-bg: #f2f2f4;
  --theme-primary-fg: #1c1c1e;
  --theme-danger: #ff453a;
  --theme-danger-soft: rgb(255 69 58 / 13%);
  --theme-warning: #ff9f0a;
  --theme-warning-soft: rgb(255 159 10 / 14%);
  --theme-violet: #9b9ba0;
  --theme-success: #30d158;
  --theme-success-soft: rgb(48 209 88 / 14%);
  --theme-shadow: 0 24px 70px rgb(0 0 0 / 32%);
  --theme-header: rgb(11 11 12 / 90%);
  --chart-1: #dedee2;
  --chart-2: #bebec3;
  --chart-3: #9d9da2;
  --chart-4: #7f7f84;
  --chart-5: #68686d;
  --chart-6: #55555a;
  --chart-grid: #353539;
  --chart-tick: #94949a;
  --chart-cursor: #66666b;
  --chart-dot-border: #18181a;
  --line-soft: rgb(255 255 255 / 12%);
}

html,
body {
  background: var(--theme-bg);
  color: var(--theme-text);
  font-family:
    -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif;
}

body {
  background: var(--theme-bg);
}

::selection {
  background: var(--theme-accent-soft);
}

::-webkit-scrollbar-thumb {
  background: var(--theme-border-strong);
  background-clip: padding-box;
}

:focus-visible {
  outline-color: var(--theme-link);
}

/* Shared light/dark switch. */
.theme-toggle {
  display: inline-flex;
  min-width: 78px;
  min-height: 38px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 5px 10px 5px 7px;
  border: 1px solid var(--theme-border);
  border-radius: 999px;
  background: var(--theme-surface-2);
  color: var(--theme-muted);
  font: 650 12px/1 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif;
  box-shadow: none;
  cursor: pointer;
  transition:
    background 160ms ease,
    border-color 160ms ease,
    color 160ms ease;
}

.theme-toggle:hover {
  border-color: var(--theme-border-strong);
  background: var(--theme-surface-3);
  color: var(--theme-text);
}

.theme-toggle-track {
  position: relative;
  width: 28px;
  height: 18px;
  flex: 0 0 auto;
  border-radius: 999px;
  background: var(--theme-border-strong);
  transition: background 160ms ease;
}

.theme-toggle-track::after {
  position: absolute;
  width: 14px;
  height: 14px;
  top: 2px;
  left: 2px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 1px 3px rgb(0 0 0 / 22%);
  content: "";
  transition: transform 160ms ease;
}

html[data-theme="dark"] .theme-toggle-track {
  background: var(--theme-quiet);
}

html[data-theme="dark"] .theme-toggle-track::after {
  transform: translateX(10px);
}

.theme-toggle--floating {
  position: fixed;
  z-index: 210;
  top: 18px;
  right: 18px;
}

/* Public home. */
.site-header.is-scrolled,
.workspace-header {
  border-color: var(--theme-border);
  background: var(--theme-header);
  box-shadow: 0 12px 36px rgb(28 28 30 / 10%);
}

.site-nav a,
.hero-lede,
.hero-trust p,
.compatibility-strip > p,
.compatibility-strip span,
.stage-copy > p,
.mini-feature p,
.data-copy > p,
.data-stats span,
.atlas-bottom,
.diagnostic-demo > header small,
.health-rows span,
.diagnostic-trace header,
.diagnostic-trace > div,
.diagnostic-points p,
.controller-card > div > span,
.controller-card p,
.compatibility-note,
.safety-copy,
.footer-top > p,
.footer-top > div a,
.footer-bottom {
  color: var(--theme-muted);
}

.site-nav a:hover,
.hero h1::first-line,
.hero-trust strong,
.stage-copy li,
.data-stats strong,
.atlas-bottom strong,
.health-rows strong,
.controller-monogram,
.store-button:not(.store-button-primary, .store-button-light) {
  color: var(--theme-text);
}

.eyebrow,
.eyebrow-label,
.feature-kicker,
.diagnostic-points article > span {
  color: var(--theme-accent-strong);
}

.feature-number,
.tune-ui > header > div span,
.tune-row em,
.profile-row span,
.trip-chip span,
.diagnostic-trace time,
.scroll-cue {
  color: var(--theme-quiet);
}

.compatibility-strip > p,
.controller-card > div > span,
.safety-copy,
.footer-bottom {
  font-size: 10px;
}

.safety-copy {
  font-size: 12px;
}

.data-stats span,
.footer-top > p {
  font-weight: 500;
}

.site-nav .nav-cta,
.saved-state,
.profile-row span.is-active,
.healthy {
  border-color: var(--theme-accent-soft);
  background: var(--theme-accent-soft);
  color: var(--theme-accent);
}

.menu-button,
.store-button:not(.store-button-primary, .store-button-light),
.store-button-light,
.stage-card,
.mini-feature,
.controller-card {
  border-color: var(--theme-border);
  background: var(--theme-surface);
}

.compatibility-strip i,
.route-art i,
.route-art i:nth-child(2),
.health-rows span i,
.diagnostic-trace > div i {
  background: var(--theme-accent);
  box-shadow: none;
}

.store-button-light {
  color: var(--theme-text);
}

.feature-number,
.mini-gauges span,
.health-rows > div,
.diagnostic-trace,
.controller-monogram {
  border-color: var(--theme-border);
  background: var(--theme-surface-2);
  color: var(--theme-muted);
}

.diagnostic-bolt,
.healthy {
  border-color: var(--theme-border);
  background: var(--theme-accent-soft);
  color: var(--theme-accent-strong);
}

.data-panel,
.diagnostic-demo,
.controllers-section,
.download-section {
  border-color: var(--theme-border);
  background: var(--theme-bg-grouped);
}

.store-button-primary,
.primary-action,
.button-primary {
  border-color: var(--theme-primary-bg);
  background: var(--theme-primary-bg);
  color: var(--theme-primary-fg);
  box-shadow: 0 10px 28px rgb(28 28 30 / 10%);
}

.store-button-primary:hover,
.primary-action:hover,
.button-primary:hover {
  filter: brightness(1.06);
}

html[data-theme="light"] .hero-grid,
html[data-theme="light"] .download-grid {
  opacity: 0.32;
}

html[data-theme="light"] .hero-glow-one,
html[data-theme="light"] .download-glow {
  background: radial-gradient(circle, rgb(28 28 30 / 6%), transparent 68%);
}

html[data-theme="light"] .hero-glow-two {
  background: radial-gradient(circle, rgb(99 99 102 / 5%), transparent 68%);
}

html[data-theme="light"] .tune-ui,
html[data-theme="light"] .atlas-visual {
  border-color: var(--theme-border-strong);
  background: var(--theme-surface-2);
  box-shadow: var(--theme-shadow);
}

html[data-theme="light"] .tune-group,
html[data-theme="light"] .mini-gauges span,
html[data-theme="light"] .health-rows > div,
html[data-theme="light"] .diagnostic-trace {
  border-color: var(--theme-border);
  background: var(--theme-surface);
}

html[data-theme="light"] .stage-card,
html[data-theme="light"] .mini-feature,
html[data-theme="light"] .controller-card {
  border-color: var(--theme-border-strong);
  box-shadow: 0 18px 48px rgb(28 28 30 / 9%);
}

html[data-theme="light"] .route-map,
html[data-theme="light"] .atlas-map {
  filter: grayscale(1) contrast(0.9) brightness(1.08);
}

html[data-theme="light"] .download-section {
  background: var(--theme-bg);
}

/* Keep the homepage product mockups in the same neutral theme. */
.hero-product::before {
  background: radial-gradient(
    circle at 45% 40%,
    var(--theme-surface-3),
    var(--theme-surface-2) 62%,
    transparent 63%
  );
  filter: drop-shadow(0 24px 55px rgb(0 0 0 / 14%));
}

.product-orbit,
.brand img,
.download-content > img,
.floating-card,
.live-pill,
.connection-row,
.telemetry-grid > div,
.energy-card,
.tune-ui,
.tune-ui > header button,
.tune-group,
.profile-row span,
.mini-gauges span,
.atlas-visual,
.atlas-distance,
.diagnostic-demo,
.diagnostic-bolt,
.health-rows > div,
.diagnostic-trace,
.controller-card.featured,
.controller-card.featured .controller-monogram,
.controller-card > i {
  border-color: var(--theme-border);
}

.avatar-stack i,
.avatar-stack i:first-child,
.avatar-stack i:nth-child(2) {
  border-color: var(--theme-bg);
  background: var(--theme-surface-3);
  color: var(--theme-muted);
}

.phone {
  border-color: var(--theme-border-strong);
  background: linear-gradient(
    150deg,
    var(--theme-surface-3),
    var(--theme-surface-2) 28%,
    var(--theme-bg-grouped) 78%,
    var(--theme-surface-3)
  );
  box-shadow:
    0 30px 70px rgb(0 0 0 / 18%),
    0 0 0 3px var(--theme-border-strong),
    inset 0 0 0 1px rgb(255 255 255 / 12%);
}

.phone-screen {
  background:
    radial-gradient(
      circle at 50% 15%,
      var(--theme-accent-softer),
      transparent 14rem
    ),
    var(--theme-surface);
  color: var(--theme-text);
}

.phone-top,
.connection-row small,
.battery-pill,
.speed-block > span,
.speed-block > strong span,
.telemetry-grid span,
.telemetry-grid strong small,
.energy-card header span,
.energy-card header strong,
.phone-nav span,
.floating-card small,
.floating-card div > span,
.tune-ui > header > div span,
.tune-row em,
.profile-row span,
.mini-feature p,
.trip-chip span,
.atlas-bottom {
  color: var(--theme-muted);
}

.atlas-distance {
  color: var(--theme-accent);
}

.connection-row,
.telemetry-grid > div,
.energy-card,
.floating-card,
.tune-ui > header button,
.tune-group,
.mini-gauges span,
.trip-chip,
.health-rows > div,
.diagnostic-trace {
  background: var(--theme-surface-2);
}

.battery-pill,
.float-icon,
.live-pill,
.saved-state,
.tune-row i,
.profile-row span.is-active,
.controller-card.featured .controller-monogram {
  background: var(--theme-accent-soft);
  color: var(--theme-accent);
}

.energy-chart i,
.slider i {
  background: var(--theme-accent);
}

.floating-card {
  box-shadow: var(--theme-shadow);
}

.route-art {
  background: var(--theme-surface-3);
}

.route-map {
  background:
    linear-gradient(
      24deg,
      transparent 47%,
      var(--theme-border) 48% 50%,
      transparent 51%
    ),
    linear-gradient(
      -18deg,
      transparent 47%,
      var(--theme-border) 48% 50%,
      transparent 51%
    ),
    linear-gradient(
      70deg,
      transparent 47%,
      var(--theme-border) 48% 50%,
      transparent 51%
    ),
    var(--theme-surface-2);
}

.atlas-map {
  background:
    linear-gradient(
      27deg,
      transparent 47%,
      var(--theme-border) 48% 49%,
      transparent 50%
    ),
    linear-gradient(
      -37deg,
      transparent 47%,
      var(--theme-border) 48% 49%,
      transparent 50%
    ),
    linear-gradient(
      72deg,
      transparent 47%,
      var(--theme-border) 48% 49%,
      transparent 50%
    ),
    var(--theme-surface-2);
}

.road,
.street {
  background: var(--theme-border-strong);
}

.controller-card:hover {
  border-color: var(--theme-border-strong);
  background: var(--theme-surface-2);
}

html[data-theme="light"] .phone::before {
  background: #3a3a3d;
}

html[data-theme="light"] .phone-home {
  background: var(--theme-accent-strong);
}

html[data-theme="dark"] .phone::before {
  background: #050506;
}

html[data-theme="dark"] .phone-home {
  background: var(--theme-muted);
}

/* Parameter sharing. */
.site-header {
  border-color: var(--theme-border);
  background: var(--theme-header);
}

.account-button,
.secondary-action,
.share-summary-meta > div,
.trust-strip,
.area-tabs button,
.number-control button,
.comment-bubble {
  border-color: var(--theme-border);
  background: var(--theme-surface-2);
  color: var(--theme-muted);
}

.account-button:hover,
.area-tabs button:hover,
.secondary-action:hover {
  border-color: var(--theme-border-strong);
  background: var(--theme-surface-3);
}

.share-summary,
.parameter-browser,
.community-revisions {
  color: var(--theme-text);
}

.trust-strip > div,
.area-intro h2,
.revision-note-copy,
.comment p {
  color: var(--theme-muted);
}

.parameter-section,
.download-card,
.revision-card,
.comment,
.success-toast,
.state-icon {
  border-color: var(--theme-border);
  background: var(--theme-surface);
  box-shadow: none;
}

.parameter-section > header,
.parameter-row.is-changed,
.comment-thread,
.revision-dock {
  border-color: var(--theme-border);
  background: var(--theme-surface-2);
}

.option-grid button,
.number-control,
.comment-form textarea,
.revision-note textarea {
  border-color: var(--theme-border-strong);
  background: var(--theme-bg-grouped);
  color: var(--theme-text);
}

.area-tabs button.is-selected,
.option-grid button.is-selected,
.comment-bubble:hover,
.revision-card.is-expanded .comment-bubble {
  border-color: var(--theme-accent);
  background: var(--theme-accent-soft);
  color: var(--theme-accent);
}

footer {
  border-color: var(--theme-border);
  background: var(--theme-bg-grouped);
}

/* Standalone legal and utility pages. */
.simple-page {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
  background: var(--theme-bg);
}

.simple-header {
  position: sticky;
  z-index: 20;
  top: 0;
  display: flex;
  min-height: 72px;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 12px max(20px, calc((100vw - 1040px) / 2));
  border-bottom: 1px solid var(--theme-border);
  background: var(--theme-header);
  backdrop-filter: blur(20px);
}

.simple-brand,
.simple-header-actions {
  display: flex;
  align-items: center;
}

.simple-brand {
  gap: 10px;
  color: var(--theme-text);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-decoration: none;
}

.simple-brand img {
  width: 34px;
  height: 34px;
  border: 1px solid var(--theme-border);
  border-radius: 10px;
}

.simple-header-actions {
  gap: 10px;
}

.simple-back {
  min-height: 38px;
  padding: 0 13px;
  border: 1px solid var(--theme-border);
  border-radius: 999px;
  color: var(--theme-link);
  font-size: 12px;
  font-weight: 700;
  line-height: 36px;
  text-decoration: none;
}

.simple-back:hover {
  border-color: var(--theme-border-strong);
  background: var(--theme-surface-2);
}

.simple-main {
  width: min(800px, calc(100% - 40px));
  margin: 0 auto;
  padding: clamp(62px, 9vw, 104px) 0 80px;
  flex: 1;
}

.simple-article {
  padding: clamp(25px, 5vw, 52px);
  border: 1px solid var(--theme-border);
  border-radius: 26px;
  background: var(--theme-surface);
  box-shadow: var(--theme-shadow);
}

.simple-kicker {
  margin: 0 0 13px;
  color: var(--theme-accent);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.simple-article h1 {
  margin: 0;
  color: var(--theme-text);
  font-size: clamp(36px, 7vw, 60px);
  font-weight: 620;
  letter-spacing: -0.055em;
  line-height: 1;
}

.simple-intro,
.simple-article p {
  color: var(--theme-muted);
  font-size: 15px;
  line-height: 1.75;
}

.simple-intro {
  margin: 22px 0 0;
}

.simple-article section {
  padding-top: 29px;
  margin-top: 29px;
  border-top: 1px solid var(--theme-border);
}

.simple-article h2 {
  margin: 0 0 12px;
  color: var(--theme-text);
  font-size: 20px;
  letter-spacing: -0.025em;
}

.simple-article p {
  margin: 0;
}

.simple-article p + p {
  margin-top: 13px;
}

.simple-article a {
  color: var(--theme-link);
}

.simple-callout {
  margin-top: 28px;
  padding: 17px 18px;
  border: 1px solid var(--theme-accent-soft);
  border-radius: 16px;
  background: var(--theme-accent-soft);
}

.simple-callout > strong {
  display: block;
  margin-bottom: 5px;
  color: var(--theme-text);
}

.simple-footer {
  padding: 26px 20px;
  border-top: 1px solid var(--theme-border);
  background: var(--theme-bg-grouped);
  color: var(--theme-muted);
  font-size: 12px;
  text-align: center;
}

.not-found-main {
  display: grid;
  width: min(560px, calc(100% - 40px));
  margin: auto;
  padding: 70px 0;
  place-items: center;
}

.not-found-code {
  color: var(--theme-accent);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.16em;
}

.not-found-main .simple-article {
  text-align: center;
}

.not-found-main .simple-article p {
  margin: 18px 0 0;
}

.not-found-action {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  margin-top: 26px;
  padding: 0 18px;
  border-radius: 12px;
  background: var(--theme-primary-bg);
  color: var(--theme-primary-fg) !important;
  font-size: 13px;
  font-weight: 750;
  text-decoration: none;
}

/* Admin. */
.boot-screen,
.auth-action,
.workspace,
.workspace-scroll,
.support-view {
  background: var(--theme-bg);
}

.boot-orbit {
  border-color: var(--theme-accent-soft);
  background: var(--theme-accent-soft);
  color: var(--theme-accent-strong);
  box-shadow: none;
}

.boot-progress {
  background: var(--theme-surface-3);
}

.auth-story,
.sidebar {
  border-color: var(--theme-border);
  background: var(--theme-bg-grouped);
}

.auth-story::after {
  border-color: var(--theme-accent-soft);
  box-shadow:
    0 0 0 50px var(--theme-accent-softer),
    0 0 0 110px var(--theme-accent-softer);
}

.auth-bars {
  background: repeating-linear-gradient(
    to bottom,
    transparent 0 29px,
    var(--theme-accent-softer) 30px
  );
}

.auth-bars span {
  background: var(--theme-accent);
}

.auth-visual,
.auth-stat-grid div,
.system-state,
.account-menu,
.panel,
.metric-card,
.chart-tooltip,
.activation-stage,
.thread-panel,
.thread-context,
.message > div,
.diagnostic-card,
.reply-form,
.rider-profile,
.controller-card,
.rider-context-card,
.subscription-card,
.support-safety-card,
.ride-timeline-main,
.modal-card,
.toast {
  border-color: var(--theme-border);
  background: var(--theme-surface);
  color: var(--theme-text);
  box-shadow: none;
}

.button-secondary,
.icon-button,
.range-switcher,
.segment-control,
.input-shell,
.conversation-row:hover,
.conversation-row.is-active,
.thread-header,
.thread-context dl > div,
.diagnostic-summary > div,
.diagnostic-json,
.reply-form textarea,
.rider-profile > dl > div,
.permission-note,
.controller-card,
.context-facts > div,
.subscription-state-list > div,
.support-history-preview,
.safety-summary > div,
.report-list > div,
.ride-timeline-main,
.modal-card {
  border-color: var(--theme-border);
  background: var(--theme-surface-2);
  color: var(--theme-text);
}

.conversation-row {
  border-color: var(--theme-border);
}

.button-secondary:hover,
.icon-button:hover,
.support-history-preview:hover {
  border-color: var(--theme-border-strong);
  background: var(--theme-surface-3);
}

.button-primary:not(:disabled):hover {
  background: var(--theme-primary-bg);
  filter: brightness(1.06);
}

.button-secondary:not(:disabled):hover {
  border-color: var(--theme-border-strong);
  background: var(--theme-surface-3);
  color: var(--theme-text);
}

.nav-item {
  color: var(--theme-muted);
}

.nav-item:hover {
  background: var(--theme-surface-2);
  color: var(--theme-text);
}

.nav-item.is-active,
.range-switcher button.is-active,
.segment-control button.is-active {
  background: var(--theme-accent-soft);
  color: var(--theme-accent);
  box-shadow: none;
}

.platform-breakdown-button {
  border-color: var(--theme-border);
  background: var(--theme-surface-2);
  color: var(--theme-muted);
}

.platform-breakdown-button:hover {
  border-color: var(--theme-border-strong);
  background: var(--theme-surface-3);
  color: var(--theme-text);
}

.platform-breakdown-button.is-active {
  border-color: var(--theme-accent);
  background: var(--theme-accent-soft);
  color: var(--theme-accent-strong);
  box-shadow: none;
}

.range-switcher button,
.segment-control button {
  color: var(--theme-muted);
}

.range-switcher button:hover,
.segment-control button:hover {
  background: var(--theme-accent-softer);
  color: var(--theme-text);
}

.segment-control button b {
  background: var(--theme-surface-3);
  color: var(--theme-quiet);
}

.segment-control button.is-active {
  color: var(--theme-accent-strong);
}

.segment-control button.is-active b {
  background: var(--theme-accent-soft);
  color: var(--theme-accent-strong);
}

.support-view .section-heading {
  border-color: var(--theme-border);
  background: var(--theme-bg-grouped);
}

.inbox-panel,
.thread-panel {
  background: var(--theme-surface);
}

.input-shell:focus-within,
.reply-form textarea:focus {
  border-color: var(--theme-accent);
  box-shadow: 0 0 0 3px var(--theme-accent-softer);
}

.input-shell input,
.reply-form textarea {
  color: var(--theme-text);
}

.input-shell input::placeholder,
.reply-form textarea::placeholder {
  color: var(--theme-quiet);
}

.conversation-row {
  border-color: var(--theme-border);
  color: var(--theme-text);
}

.conversation-row:hover {
  background: var(--theme-surface-2);
}

.conversation-row.is-active {
  background: var(--theme-accent-soft);
}

.conversation-rider > strong,
.conversation-issue {
  color: var(--theme-text);
}

.conversation-action,
.conversation-copy time,
.conversation-footer {
  color: var(--theme-muted);
}

.conversation-footer > i,
.conversation-row.state-resolved .conversation-action {
  color: var(--theme-quiet);
}

.conversation-row.needs-reply .conversation-action {
  color: var(--theme-accent-strong);
}

.conversation-row.state-waiting_on_user .conversation-action {
  color: var(--theme-warning);
}

.thread-header .button.is-active {
  border-color: var(--theme-accent);
  background: var(--theme-accent-soft);
  color: var(--theme-accent-strong);
}

.thread-shares {
  border-color: var(--theme-border);
  background:
    linear-gradient(135deg, var(--theme-warning-soft), transparent 55%),
    var(--theme-surface);
}

.thread-shares > header strong,
.thread-share strong {
  color: var(--theme-text);
}

.thread-shares > header p,
.thread-share,
.thread-share small {
  color: var(--theme-muted);
}

.thread-shares > header > span,
.thread-share-icon {
  border-color: var(--theme-warning-soft);
  background: var(--theme-warning-soft);
  color: var(--theme-warning);
}

.thread-share {
  border-color: var(--theme-border);
  background: var(--theme-surface-2);
}

.thread-share:hover {
  border-color: var(--theme-border-strong);
  background: var(--theme-surface-3);
}

.message > div {
  border-color: var(--theme-border);
  background: var(--theme-surface-2);
}

.message-support > div {
  border-color: var(--theme-accent-soft);
  background: var(--theme-accent-soft);
}

.support-media {
  border-color: var(--theme-border);
  background: var(--theme-surface-3);
}

.support-media-link:hover {
  box-shadow: 0 0 0 2px var(--theme-accent-soft);
}

.support-media-state {
  border-color: var(--theme-border-strong);
  background: var(--theme-surface-2);
  color: var(--theme-muted);
}

.diagnostic-json {
  border-color: var(--theme-border);
  background: var(--theme-bg-grouped);
  color: var(--theme-text);
}

.reply-form {
  border-color: var(--theme-border);
  background: var(--theme-surface);
}

.empty-state > span {
  border-color: var(--theme-border);
  background: var(--theme-surface-2);
  color: var(--theme-muted);
}

.pro-badge,
.subtle-count,
.controller-main > header small,
.signal-pill,
.ride-timeline-main > header > span {
  border-color: var(--theme-border);
  background: var(--theme-surface-2);
  color: var(--theme-muted);
}

.rider-hero-stats,
.rider-hero-stats > div,
.subscription-history {
  border-color: var(--theme-border);
}

.support-history-preview > svg,
.report-list i {
  color: var(--theme-muted);
}

.upload-visibility-note {
  border-color: var(--theme-accent-soft);
  background: var(--theme-accent-soft);
  color: var(--theme-accent-strong);
}

.upload-visibility-note strong {
  color: var(--theme-text);
}

.upload-visibility-note p {
  color: var(--theme-muted);
}

.ride-timeline-row:not(:last-child)::before,
.queue-meter,
.protocol-list > div > div {
  background: var(--theme-border);
}

.queue-resolved {
  background: var(--theme-muted);
}

.dashboard-shell .status {
  display: inline-flex;
  min-height: 25px;
  flex: 0 0 auto;
  align-items: center;
  padding: 4px 7px;
  border: 1px solid var(--theme-border);
  border-radius: 7px;
  background: var(--theme-surface-2);
  color: var(--theme-muted);
  font-weight: 780;
  line-height: 1;
  white-space: nowrap;
}

.dashboard-shell .status-open {
  border-color: var(--theme-accent-soft);
  background: var(--theme-accent-soft);
  color: var(--theme-accent-strong);
}

.dashboard-shell .status-waiting_on_user {
  border-color: var(--theme-warning-soft);
  background: var(--theme-warning-soft);
  color: var(--theme-warning);
}

.dashboard-shell .status-resolved {
  border-color: var(--theme-border);
  background: var(--theme-surface-2);
  color: var(--theme-quiet);
}

.button-danger {
  background: var(--theme-danger);
  color: #ffffff;
}

.auth-error {
  color: var(--theme-danger) !important;
}

.account-button:hover,
.account-menu button:hover {
  background: var(--theme-surface-2);
}

.account-menu button,
.live-badge,
.sidebar footer > p,
.toast > button {
  color: var(--theme-muted);
}

.account-menu button:hover {
  color: var(--theme-text);
}

.account-button > img {
  border-color: var(--theme-accent-soft);
  background: var(--theme-accent-soft);
}

.cohort-chart-block,
.cohort-definition {
  border-color: var(--theme-border);
}

.activation-arrow,
.data-note {
  color: var(--theme-quiet);
}

.modal-card > span {
  border-color: var(--theme-danger-soft);
  background: var(--theme-danger-soft);
  color: var(--theme-danger);
}

.dot-teal {
  background: var(--chart-1);
}

.dot-violet {
  background: var(--chart-3);
}

.dot-amber {
  background: var(--chart-5);
}

.brand-mark,
.brand-admin,
.metric-label > span,
.metric-accent .metric-label > span,
.account-avatar,
.avatar,
.profile-avatar,
.controller-icon,
.context-card-icon,
.ride-state,
.toast > span {
  border-color: var(--theme-accent-soft);
  background: var(--theme-accent-soft);
  color: var(--theme-accent);
  box-shadow: none;
}

.live-badge span,
.system-state > span {
  background: var(--theme-success);
  box-shadow: 0 0 0 3px var(--theme-success-soft);
}

.auth-story-copy p,
.auth-private,
.auth-stat-grid small,
.security-note p,
.system-state small,
.header-title span,
.account-copy small,
.metric-label,
.metric-card > p,
.chart-legend,
.cohort-header p,
.activation-stage small,
.activation-stage p,
.cohort-definition,
.chart-tooltip > span,
.legend-list span,
.queue-rows span,
.protocol-list header,
.data-note,
.input-shell,
.conversation-copy time,
.conversation-issue,
.conversation-footer,
.thread-header > div small,
.thread-context > header p,
.thread-context dt,
.message-sender,
.message footer,
.diagnostic-header p,
.diagnostic-summary dt,
.diagnostic-actions > span,
.empty-state p,
.loading-state p,
.inline-empty,
.rider-profile header p,
.rider-profile dt,
.controller-main > header span,
.controller-main dt,
.controller-updated,
.rider-hero-identity p,
.rider-hero-stats span,
.context-facts dt,
.subscription-current small,
.context-footnote,
.empty-context-copy,
.subscription-state-list small,
.subscription-history,
.support-history-preview small,
.support-history-preview p,
.safety-summary span,
.report-list small,
.ride-timeline-main > header small,
.ride-metrics span,
.modal-card p,
.toast p {
  color: var(--theme-muted);
}

.auth-visual header,
.auth-stat-grid strong,
.auth-card > p strong,
.system-state strong,
.account-copy strong,
.activation-stage strong,
.activation-stage > b,
.cohort-chart-heading strong,
.chart-tooltip p,
.chart-tooltip p strong,
.legend-list strong,
.protocol-list header strong,
.conversation-copy strong,
.thread-context > header strong,
.thread-context dd,
.message p,
.diagnostic-header strong,
.diagnostic-summary dd,
.empty-state strong,
.loading-state strong,
.inline-empty strong,
.rider-profile dd,
.controller-main > header strong,
.controller-main dd,
.rider-hero-stats strong,
.context-facts dd,
.subscription-current strong,
.subscription-state-list strong,
.support-history-preview strong,
.safety-summary strong,
.report-list strong,
.ride-timeline-main > header strong,
.ride-metrics b,
.toast strong {
  color: var(--theme-text);
}

.google-button {
  border-color: var(--theme-border-strong);
  background: var(--theme-surface);
  color: var(--theme-text);
  box-shadow: var(--theme-shadow);
}

.metric-accent,
.status-open,
.pro-badge.is-pro,
.signal-pill.is-good {
  border-color: var(--theme-accent-soft);
  background: var(--theme-accent-soft);
  color: var(--theme-accent);
}

.button-danger-soft,
.toast-error > span {
  border-color: var(--theme-danger-soft);
  background: var(--theme-danger-soft);
  color: var(--theme-danger);
}

.access-icon,
.diagnostic-icon,
.diagnostic-source,
.signal-pill.is-gold,
.ride-state.has-fault,
.ride-faults span {
  border-color: var(--theme-warning-soft);
  background: var(--theme-warning-soft);
  color: var(--theme-warning);
}

.modal-scrim,
.sidebar-scrim {
  background: rgb(0 0 0 / 48%);
}

@media (max-width: 900px) {
  .site-header,
  .site-header.is-scrolled {
    background: var(--theme-surface);
  }

  .site-nav {
    background: var(--theme-surface);
    box-shadow: var(--theme-shadow);
  }
}

@media (max-width: 680px) {
  .theme-toggle {
    min-width: 62px;
  }

  .theme-toggle--floating {
    top: 12px;
    right: 12px;
  }

  .simple-header {
    padding-inline: 14px;
  }

  .simple-back {
    width: 38px;
    overflow: hidden;
    padding: 0;
    font-size: 0;
    text-align: center;
  }

  .simple-back::after {
    font-size: 18px;
    content: "←";
  }

  .simple-main {
    width: min(100% - 24px, 800px);
    padding-top: 36px;
  }

  .simple-article {
    border-radius: 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .theme-toggle,
  .theme-toggle-track,
  .theme-toggle-track::after {
    transition: none;
  }
}