:root {
  color-scheme: light;
  --bg: #f4f6f8;
  --panel: #ffffff;
  --panel-2: #f9fbfd;
  --ink: #102033;
  --text: #26364a;
  /* WCAG AA: #66758a vs #f4f6f8 = 4.33:1 (fails 4.5:1). Darkened to clear. */
  --muted: #5b6a80;
  --line: #d8e1ec;
  --line-2: #edf1f6;
  /* Aliases consumed by chart/deal cards (previously undefined → fell back to
     transparent/black). Theme-aware via --panel/--line. */
  --surface: var(--panel);
  --border-soft: var(--line);
  /* Single source of truth for the cheap→pricey tier ramp (legend == bars). */
  --tier-cheap: #2bb39c;
  --tier-medium: #6b9fe6;
  --tier-pricey: #e0a23c;
  --brand: #003b95;
  --brand-2: #0b5bd3;
  --brand-soft: #eaf2ff;
  --go: #00a991;
  --go-dark: #008f7b;
  --go-soft: #e7fbf7;
  --warn: #b45309;
  --danger: #c0263f;
  --info-soft: #eef6ff;
  --warn-soft: #fff8ed;
  --danger-soft: #fef2f2;
  --danger-strong: #b91c1c;
  --surface-raised: #ffffff;
  --track: #e4ebf4;
  --shadow: 0 18px 48px rgba(16, 32, 51, 0.10);
  --shadow-soft: 0 1px 2px rgba(16, 32, 51, 0.07), 0 8px 22px rgba(16, 32, 51, 0.06);
  --radius: 16px;
  --radius-sm: 10px;
  --container: 1232px;
}

:root.dark {
  color-scheme: dark;
  --bg: #111315;
  --panel: #181c21;
  --panel-2: #20252b;
  --ink: #f4f7fb;
  --text: #dce4ee;
  --muted: #a8b4c2;
  --line: #333b45;
  --line-2: #262d35;
  --surface: var(--panel);
  --border-soft: var(--line);
  --tier-cheap: #3fd6bd;
  --tier-medium: #7fb4ff;
  --tier-pricey: #f0bf6e;
  --brand: #82c7ff;
  --brand-2: #4aaef5;
  --brand-soft: rgba(130, 199, 255, 0.15);
  --go: #25c7ae;
  --go-dark: #16a58f;
  --go-soft: rgba(37, 199, 174, 0.14);
  --warn: #f4b15f;
  --danger: #ff7d93;
  --info-soft: rgba(93, 158, 255, 0.16);
  --warn-soft: rgba(244, 177, 95, 0.15);
  --danger-soft: rgba(255, 125, 147, 0.15);
  --danger-strong: #ff9aad;
  --surface-raised: #172438;
  --track: #223044;
  --shadow: 0 22px 60px rgba(0, 0, 0, 0.36);
  --shadow-soft: 0 1px 2px rgba(0, 0, 0, 0.34), 0 14px 36px rgba(0, 0, 0, 0.20);
}

[x-cloak] { display: none !important; }

* { box-sizing: border-box; }

html,
body {
  min-height: 100%;
  margin: 0;
}

body {
  background:
    radial-gradient(circle at 8% -10%, rgba(0, 59, 149, 0.08), transparent 30rem),
    linear-gradient(180deg, #f7f9fc 0, var(--bg) 34rem, #fff 34rem);
  color: var(--text);
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.dark body {
  background:
    radial-gradient(circle at 12% -8%, rgba(99, 160, 255, 0.16), transparent 28rem),
    radial-gradient(circle at 88% 8%, rgba(37, 199, 174, 0.10), transparent 28rem),
    linear-gradient(180deg, #111b2b 0, var(--bg) 34rem, #0a111c 100%);
}

button,
input,
select {
  font: inherit;
}

button,
a,
label,
input,
select {
  -webkit-tap-highlight-color: transparent;
}

button {
  cursor: pointer;
}

button:disabled,
input:disabled {
  cursor: not-allowed;
}

a {
  color: inherit;
  text-decoration: none;
}

input {
  min-width: 0;
}

select {
  min-width: 0;
}

.sr-live {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

input[type="checkbox"],
input[type="range"],
input[type="radio"] {
  accent-color: var(--brand);
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 3px solid rgba(0, 59, 149, 0.18);
  outline-offset: 2px;
}

.app-shell {
  min-height: 100vh;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 60;
  height: 68px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 20px;
  padding: 0 max(24px, calc((100vw - 1440px) / 2));
  background: rgba(255, 255, 255, 0.92);
  border-bottom: 1px solid var(--line-2);
  backdrop-filter: blur(18px) saturate(150%);
}

.dark .topbar {
  background: rgba(17, 19, 21, 0.92);
  border-bottom-color: rgba(168, 180, 194, 0.18);
}

.brand,
.top-actions,
.topnav,
.topnav button,
.ghost-action,
.icon-action {
  display: flex;
  align-items: center;
}

.brand {
  min-width: 0;
  gap: 10px;
  color: var(--ink);
  font-weight: 800;
  font-size: 1.22rem;
}

.topbar > .brand {
  width: fit-content;
  justify-self: start;
}

.brand span:last-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.brand-mark {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  background: var(--brand);
  border-radius: 11px;
  box-shadow: 0 8px 18px rgba(0, 59, 149, 0.22);
}

.brand-logo {
  width: 25px;
  height: 25px;
  display: block;
}

.brand-logo-arc {
  fill: none;
  stroke: #8fd7ff;
  stroke-width: 3;
  stroke-linecap: round;
}

.brand-logo-plane {
  fill: #fff;
}

.brand-logo-dot {
  fill: var(--go);
}

button svg,
a svg {
  width: 18px;
  height: 18px;
}

.topnav {
  min-width: 0;
  overflow: hidden;
  gap: 4px;
  padding: 4px;
  background: #eef3f8;
  border: 1px solid var(--line-2);
  border-radius: 999px;
}

.dark .topnav {
  background: rgba(255, 255, 255, 0.06);
  border-color: var(--line);
}

.topnav button {
  position: relative;
  gap: 7px;
  min-height: 38px;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  color: var(--muted);
  background: transparent;
  font-weight: 700;
  white-space: nowrap;
}

.topnav button.active {
  color: var(--brand);
  background: #fff;
  box-shadow: 0 1px 2px rgba(16, 32, 51, 0.08);
}

.dark .topnav button.active {
  background: rgba(143, 188, 255, 0.16);
  box-shadow: none;
}

.topnav b {
  min-width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--danger);
  color: #fff;
  font-size: 0.68rem;
}

.top-actions {
  min-width: 0;
  justify-content: flex-end;
  gap: 8px;
}

.top-actions > .icon-action {
  flex: 0 0 38px;
}

.ghost-action,
.icon-action,
.language-control,
.section-heading button,
.inline-actions button {
  min-height: 38px;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--text);
  border-radius: 999px;
  font-weight: 700;
}

.ghost-action {
  gap: 7px;
  padding: 0 12px;
}

.language-control {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 10px;
  background: var(--panel);
}

.language-control select {
  min-width: 96px;
  height: 34px;
  padding: 0 22px 0 0;
  border: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-weight: 800;
}

.language-control:focus-within {
  outline: 3px solid rgba(0, 59, 149, 0.18);
  outline-offset: 2px;
}

.icon-action,
.inline-actions button {
  position: relative;
  width: 38px;
  justify-content: center;
  padding: 0;
}

.icon-action.active {
  border-color: rgba(0, 98, 227, 0.24);
  background: var(--brand-soft);
  color: var(--brand);
}

.top-actions b {
  position: absolute;
  top: -5px;
  right: -4px;
  min-width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  padding: 0 5px;
  border: 2px solid var(--panel);
  border-radius: 999px;
  background: var(--danger);
  color: #fff;
  font-size: 0.66rem;
  font-weight: 900;
}

.page {
  width: min(var(--container), calc(100vw - 32px));
  margin: 0 auto;
  padding: 34px 0 72px;
}

.search-page {
  padding-top: 30px;
}

.search-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 24px;
  margin-bottom: 18px;
  padding: 38px 36px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
}

/* Photographic backdrop (decorative). The overlay gradient is built from theme
   tokens so hero copy keeps its contrast in light and dark mode alike. */
.search-hero__media {
  position: absolute;
  inset: 0;
  z-index: -1;
}

.search-hero__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
}

.search-hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    color-mix(in srgb, var(--panel) 94%, transparent) 0%,
    color-mix(in srgb, var(--panel) 78%, transparent) 52%,
    color-mix(in srgb, var(--panel) 38%, transparent) 100%
  );
}

.dark .search-hero__media::after {
  background: linear-gradient(
    100deg,
    color-mix(in srgb, var(--panel) 96%, transparent) 0%,
    color-mix(in srgb, var(--panel) 88%, transparent) 52%,
    color-mix(in srgb, var(--panel) 60%, transparent) 100%
  );
}

@media (max-width: 720px) {
  .search-hero {
    padding: 24px 20px;
  }

  /* On small screens the photo steps back to a faint texture behind the copy. */
  .search-hero__media::after {
    background: linear-gradient(
      180deg,
      color-mix(in srgb, var(--panel) 90%, transparent) 0%,
      color-mix(in srgb, var(--panel) 76%, transparent) 100%
    );
  }
}

@media (prefers-reduced-motion: no-preference) {
  .search-hero__media img {
    animation: ui-fade-in 700ms ease-out both;
  }

  .empty-state__photo {
    animation: ui-fade-in 360ms ease-out both;
  }
}

.eyebrow {
  margin: 0 0 8px;
  color: var(--brand);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1 {
  margin-bottom: 8px;
  color: var(--ink);
  font-size: clamp(2.2rem, 4.6vw, 4.6rem);
  line-height: 0.98;
  font-weight: 800;
  letter-spacing: 0;
}

.search-hero p:not(.eyebrow),
.section-heading p,
.result-status p,
.page-title p {
  color: var(--muted);
}

.hero-metrics {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.hero-metrics span {
  padding: 9px 12px;
  background: color-mix(in srgb, var(--panel) 82%, transparent);
  border: 1px solid var(--line-2);
  border-radius: 999px;
  color: var(--muted);
  box-shadow: 0 1px 2px rgba(16, 32, 51, 0.05);
}

.hero-metrics strong {
  color: var(--ink);
}

.hero-metrics em {
  color: var(--muted);
  font-style: normal;
}

.search-panel,
.calendar-card,
.filters-card,
.flight-card,
.combo-card,
.destination-grid article,
.saved-grid article,
.empty-state,
.detail-modal,
.compare-modal {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
}

.search-panel {
  padding: 18px;
  box-shadow: var(--shadow);
}

.panel-top,
.search-options,
.result-status,
.section-heading,
.flight-main,
.flight-meta,
.detail-times,
.saved-grid article > div,
.combo-card > div {
  display: flex;
  align-items: center;
}

.panel-top {
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.segmented {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  background: var(--panel-2);
  border-radius: 999px;
}

.segmented label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 44px;
  padding: 0 13px;
  border-radius: 999px;
  color: var(--muted);
  font-weight: 800;
  cursor: pointer;
}

.segmented label.active {
  color: var(--brand);
  background: var(--panel);
  box-shadow: 0 1px 2px rgba(16, 32, 51, 0.08);
}

.segmented input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.passenger-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel);
  color: var(--text);
  font-weight: 700;
}

.passenger-control {
  position: relative;
}

.passenger-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 35;
  width: min(360px, calc(100vw - 28px));
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel);
  box-shadow: var(--shadow);
}

.passenger-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 4px;
}

.passenger-row + .passenger-row {
  border-top: 1px solid var(--line-2);
}

.passenger-row div:first-child {
  display: grid;
  gap: 2px;
}

.passenger-row strong {
  color: var(--ink);
  font-size: 0.92rem;
}

.passenger-row span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
}

.stepper {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.stepper button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--brand);
}

.stepper button:disabled {
  color: var(--muted);
  opacity: 0.45;
}

.stepper b {
  min-width: 20px;
  text-align: center;
  color: var(--ink);
}

.cabin-row {
  align-items: flex-start;
}

.cabin-row .mini-segmented {
  flex-wrap: wrap;
  justify-content: flex-end;
}

.passenger-note {
  display: block;
  padding: 10px 4px 2px;
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 700;
  line-height: 1.35;
}

.search-grid {
  display: grid;
  grid-template-columns: minmax(360px, 2fr) minmax(170px, 1fr) minmax(170px, 1fr) minmax(170px, auto);
  gap: 10px;
  align-items: stretch;
}

.route-box {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
}

.airport-field,
.date-field {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 64px;
  padding: 10px 16px;
  border: 1px solid var(--line);
  background: var(--panel);
}

.route-box .airport-field:first-child {
  border-radius: 12px 0 0 12px;
}

.route-box .airport-field:last-child {
  border-left: 0;
  border-radius: 0 12px 12px 0;
}

.dark .route-box .airport-field:last-child {
  border-left: 0;
}

.airport-field:focus-within,
.date-field:focus-within,
.airport-field:hover,
.date-field:hover {
  z-index: 2;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(0, 59, 149, 0.10);
}

.airport-field label,
.date-field span {
  margin-bottom: 4px;
  color: var(--muted);
  font-size: 0.77rem;
  font-weight: 700;
}

.airport-field input,
.date-field input {
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ink);
  font-size: 1.1rem;
  font-weight: 800;
  text-transform: uppercase;
}

.date-field {
  border-radius: 12px;
}

.date-field input {
  text-transform: none;
}

.date-field.muted {
  opacity: 0.48;
}

.swap-button {
  z-index: 3;
  width: 44px;
  border: 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--panel);
  color: var(--brand);
}

.swap-button svg {
  padding: 8px;
  width: 36px;
  height: 36px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel);
  box-shadow: 0 1px 4px rgba(16, 32, 51, 0.10);
}

.primary-cta {
  min-height: 64px;
  padding: 0 24px;
  border: 0;
  border-radius: 12px;
  background: var(--go);
  color: #fff;
  font-size: 1rem;
  font-weight: 800;
  box-shadow: 0 12px 24px rgba(0, 169, 145, 0.24);
}

.primary-cta:hover {
  background: var(--go-dark);
}

.primary-cta:disabled {
  opacity: 0.7;
}

.spin {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.search-options {
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 14px;
  color: var(--text);
}

.search-options label,
.search-options button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 0;
  background: transparent;
  color: var(--text);
  font-weight: 650;
}

.search-options button {
  margin-left: auto;
}

.complexity-tabs {
  display: grid;
  /* Five modes in a fixed 3-column grid left an empty cell on the second row,
     which reads as broken rather than designed — and it is the first thing a
     visitor sees. auto-fit packs as many as fit and stretches them equally, so
     at desktop widths all five sit on one row with no orphan gap. The
     post-search state already proved a single row works (see
     .search-page--active below). */
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 8px;
  margin-top: 12px;
}

.complexity-tabs button {
  min-width: 0;
  display: grid;
  grid-template-columns: 22px 1fr;
  column-gap: 8px;
  row-gap: 2px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
  color: var(--ink);
  text-align: left;
}

.complexity-tabs button.active {
  border-color: rgba(0, 98, 227, 0.38);
  background: rgba(0, 98, 227, 0.08);
}

.complexity-tabs svg {
  width: 18px;
  height: 18px;
}

.complexity-tabs span {
  font-weight: 800;
}

.complexity-tabs em {
  grid-column: 2;
  overflow: hidden;
  color: var(--muted);
  font-size: 0.78rem;
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.flex-settings {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-top: 16px;
  padding: 16px;
  background: var(--panel-2);
  border-radius: 12px;
}

.last-minute-settings {
  margin-top: 16px;
}

.last-minute-card {
  display: grid;
  grid-template-columns: 1.2fr 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(0, 98, 227, 0.16);
  border-radius: var(--radius-sm);
  background: var(--panel-2);
}

.last-minute-card > div:first-child {
  display: grid;
  gap: 3px;
}

.last-minute-card span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
}

.last-minute-card strong {
  color: var(--ink);
}

.dark .mini-segmented button,
.dark .month-presets button,
.dark .month-picker-grid input,
.dark .stopover-settings input[type="text"],
.dark .multi-builder-head button,
.dark .multi-quick button,
.dark .multi-stop-head button,
.dark .insert-stop,
.dark .view-toggle button {
  background: var(--panel);
  color: var(--text);
}

.last-minute-card label {
  display: grid;
  gap: 8px;
  margin: 0;
}

.last-minute-card input {
  width: 100%;
}

.last-minute-card small {
  grid-column: 1 / -1;
  color: var(--muted);
  font-weight: 700;
}

.flex-settings label {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
  color: var(--muted);
  font-size: 0.88rem;
  font-weight: 700;
}

.flex-settings input {
  width: 100%;
}

.flex-date-panel {
  grid-column: 1 / -1;
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--panel);
}

.flex-date-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.flex-date-head > div:first-child {
  display: grid;
  gap: 3px;
}

.flex-date-head span,
.month-picker-grid span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
}

.flex-date-head strong {
  color: var(--ink);
  font-size: 0.98rem;
}

.mini-segmented,
.month-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.mini-segmented button,
.month-presets button {
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  color: var(--text);
  font-size: 0.84rem;
  font-weight: 800;
}

.mini-segmented button.active,
.month-presets button:hover {
  border-color: var(--brand);
  background: var(--brand-soft);
  color: var(--brand);
}

.month-picker-grid {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  align-items: end;
  gap: 10px;
}

.month-picker-grid label {
  display: grid;
  gap: 7px;
  margin: 0;
}

.month-picker-grid input {
  height: 42px;
  padding: 0 11px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  color: var(--ink);
}

.stopover-settings {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: 12px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line-2);
}

.stopover-settings label {
  min-width: 0;
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-size: 0.84rem;
  font-weight: 800;
}

.stopover-settings input[type="text"] {
  width: 100%;
  height: 42px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
  color: var(--ink);
  font: inherit;
}

.stopover-settings input[type="range"] {
  width: 100%;
}

.multi-settings {
  display: grid;
  gap: 14px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line-2);
}

.multi-builder {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--line-2);
  border-radius: 14px;
  background: var(--panel-2);
}

.multi-builder-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.multi-builder-head span,
.multi-range span,
.multi-stop-range-head span,
.multi-stop-head span {
  display: block;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
}

.multi-builder-head b {
  display: block;
  margin-top: 3px;
  color: var(--ink);
}

.multi-builder-head button,
.multi-quick button,
.multi-stop-head button,
.insert-stop,
.view-toggle button {
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--text);
  font-weight: 800;
}

.multi-builder-head button {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 12px;
  border-radius: 999px;
}

.multi-builder-head button svg,
.multi-stop-head button svg,
.insert-stop svg,
.view-toggle svg {
  width: 16px;
  height: 16px;
}

.multi-quick {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 2px;
}

.multi-quick button {
  flex: 0 0 auto;
  min-height: 32px;
  padding: 0 10px;
  border-radius: 999px;
  color: var(--brand);
}

.multi-stops {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px;
  align-items: stretch;
}

.multi-stop-wrap {
  position: relative;
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
}

.multi-stop-card {
  position: relative;
  display: grid;
  gap: 10px;
  min-height: 132px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
  box-shadow: 0 1px 2px rgba(16, 32, 51, 0.04);
}

.multi-stop-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.multi-stop-head div {
  display: inline-flex;
  gap: 4px;
}

.multi-stop-head button,
.insert-stop {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 999px;
}

.multi-stop-head button:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.multi-stop-input {
  position: relative;
}

.multi-stop-input input {
  width: 100%;
  height: 42px;
  padding: 0 11px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
  color: var(--ink);
  font: inherit;
  font-weight: 800;
}

.insert-stop {
  justify-self: start;
  color: var(--brand);
  background: var(--brand-soft);
}

.multi-arrow {
  color: var(--muted);
}

.multi-range {
  display: grid;
  grid-template-columns: minmax(160px, 0.7fr) 1fr 1fr;
  gap: 14px;
  align-items: end;
}

.multi-range.compact {
  grid-template-columns: 1fr;
}

.multi-mode,
.multi-range label {
  display: grid;
  gap: 8px;
}

.multi-range input {
  width: 100%;
}

.multi-stop-ranges {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 12px;
}

.multi-stop-range-card {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line-2);
  border-radius: 12px;
  background: var(--panel);
}

.multi-stop-range-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.multi-stop-range-head b {
  color: var(--ink);
  font-size: 0.9rem;
  white-space: nowrap;
}

.multi-stop-range-card label {
  display: grid;
  gap: 7px;
}

.multi-stop-range-card input {
  width: 100%;
}

.range-hint {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
}

.suggestions {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  z-index: 30;
  max-height: 300px;
  overflow: auto;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
  box-shadow: var(--shadow);
}

.suggestions button {
  width: 100%;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 11px 12px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  text-align: left;
}

.suggestions button:hover {
  background: var(--panel-2);
}

.suggestions span {
  display: flex;
  gap: 8px;
  min-width: 0;
}

.suggestions em {
  color: var(--muted);
  font-style: normal;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.suggestions small {
  color: var(--muted);
  flex: 0 0 auto;
}

.quick-row {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 14px 0 4px;
}

.quick-row button {
  flex: 0 0 auto;
  padding: 8px 13px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel);
  color: var(--text);
  font-weight: 800;
  box-shadow: 0 1px 2px rgba(16, 32, 51, 0.06);
}

.quick-row button:hover {
  border-color: #aabdd3;
  color: var(--brand);
}

.calendar-card,
.date-grid-card,
.results-area,
.map-section {
  margin-top: 28px;
}

.calendar-card,
.date-grid-card {
  padding: 18px;
}

.section-heading {
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 16px;
}

.section-heading.compact {
  margin-bottom: 12px;
}

.section-heading h1,
.section-heading h2,
.result-status h2 {
  margin: 0;
  color: var(--ink);
  font-weight: 800;
  letter-spacing: 0;
}

.section-heading h2,
.result-status h2 {
  font-size: clamp(1.4rem, 2.4vw, 2.2rem);
}

.section-heading p,
.result-status p {
  margin: 5px 0 0;
}

.section-heading button,
.inline-actions {
  display: flex;
  gap: 8px;
}

.section-heading button {
  align-items: center;
  gap: 8px;
  padding: 0 14px;
}

.price-month-card {
  padding: 20px;
}

.calendar-controls {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  margin: 14px 0;
}

.calendar-trip-toggle,
.calendar-month-strip {
  display: flex;
  gap: 4px;
  align-items: center;
  min-width: 0;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel-2);
}

.calendar-month-strip {
  overflow-x: auto;
  scrollbar-width: thin;
}

.calendar-trip-toggle button,
.calendar-month-strip button,
.calendar-refresh {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  font-size: 0.88rem;
  font-weight: 800;
  white-space: nowrap;
}

.calendar-month-strip button {
  flex-direction: column;
  gap: 1px;
  min-width: 94px;
  min-height: 58px;
  line-height: 1.1;
}

.calendar-month-strip button strong {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 850;
}

.calendar-month-strip button em {
  color: var(--muted);
  font-size: 0.62rem;
  font-style: normal;
  font-weight: 750;
}

.calendar-month-strip button.observed strong,
.calendar-month-strip button.active strong {
  color: var(--go-dark);
}

.calendar-month-strip button.stale strong,
.calendar-month-strip button.stale em {
  color: var(--warn);
}

.calendar-trip-toggle button svg,
.calendar-refresh svg {
  width: 16px;
  height: 16px;
}

.calendar-trip-toggle button.active,
.calendar-month-strip button.active {
  border-color: rgba(0, 59, 149, 0.18);
  background: var(--panel);
  color: var(--brand);
  box-shadow: 0 1px 3px rgba(16, 32, 51, 0.08);
}

.calendar-refresh {
  border-color: var(--line);
  background: var(--panel);
  box-shadow: 0 1px 3px rgba(16, 32, 51, 0.06);
}

.calendar-summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 14px;
  border: 1px solid var(--line-2);
  border-radius: 10px;
  background: var(--panel-2);
}

.calendar-summary strong,
.calendar-summary span {
  display: block;
}

.calendar-summary strong {
  color: var(--ink);
  font-size: 0.98rem;
}

.calendar-summary span {
  margin-top: 2px;
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 650;
}

.calendar-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.calendar-legend span {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  margin: 0;
  color: var(--muted);
  font-size: 0.78rem;
}

.calendar-legend i {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
}

.calendar-legend .best i { background: var(--go); border-color: var(--go); }
.calendar-legend .cheap i { background: var(--tier-cheap); border-color: var(--tier-cheap); }
.calendar-legend .medium i { background: var(--tier-medium); border-color: var(--tier-medium); }
.calendar-legend .pricey i { background: var(--tier-pricey); border-color: var(--tier-pricey); }

.calendar-best-days {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 14px 0 12px;
  overflow-x: auto;
  scrollbar-width: thin;
}

.calendar-best-days > span {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 0.84rem;
  font-weight: 850;
}

.calendar-best-days button {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 0 12px;
  border: 1px solid rgba(0, 169, 145, 0.34);
  border-radius: 8px;
  background: var(--go-soft);
  color: var(--go-dark);
  font-size: 0.84rem;
  font-weight: 850;
}

.calendar-best-days button strong {
  color: var(--ink);
}

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 7px;
}

.calendar-grid b {
  padding: 5px;
  color: var(--muted);
  text-align: center;
}

.month-price-grid button {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  min-height: 78px;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  color: var(--text);
  text-align: left;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.month-price-grid button:hover:not(:disabled) {
  transform: translateY(-1px);
  border-color: rgba(0, 59, 149, 0.32);
  box-shadow: 0 8px 18px rgba(16, 32, 51, 0.09);
}

.month-price-grid button.best,
.month-price-grid button.best-day {
  background: linear-gradient(180deg, var(--go-soft) 0%, var(--panel) 100%);
  border-color: rgba(0, 169, 145, 0.48);
  color: var(--go-dark);
}

.month-price-grid button.cheap {
  background: var(--go-soft);
  border-color: rgba(0, 169, 145, 0.32);
  color: var(--go-dark);
}

.month-price-grid button.medium {
  background: var(--brand-soft);
  border-color: rgba(0, 59, 149, 0.20);
  color: var(--brand);
}

.month-price-grid button.pricey {
  background: rgba(244, 177, 95, 0.13);
  border-color: rgba(180, 83, 9, 0.24);
  color: var(--warn);
}

.month-price-grid button.stale-price {
  border-color: rgba(180, 83, 9, 0.32);
  box-shadow: inset 0 0 0 1px rgba(180, 83, 9, 0.10);
}

.month-price-grid button.none {
  color: var(--muted);
  background: var(--panel-2);
  border-style: dashed;
}

.month-price-grid button.selected {
  outline: 2px solid var(--brand-2);
  outline-offset: 1px;
}

.month-price-grid button.disabled {
  opacity: 0.42;
  transform: none;
  box-shadow: none;
}

.month-price-grid .calendar-day-number {
  color: var(--ink);
  font-size: 0.82rem;
  font-weight: 850;
}

.month-price-grid button strong {
  display: block;
  margin-top: 3px;
  color: currentColor;
  font-size: 1rem;
  font-weight: 900;
}

.month-price-grid button em {
  display: block;
  width: 100%;
  min-height: 15px;
  margin-top: 2px;
  overflow: hidden;
  color: var(--muted);
  font-size: 0.68rem;
  font-style: normal;
  font-weight: 750;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.calendar-empty-note {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 700;
}

.calendar-empty-note svg {
  width: 16px;
  height: 16px;
}

.dark .month-price-grid button.best,
.dark .month-price-grid button.best-day {
  background: linear-gradient(180deg, rgba(37, 199, 174, 0.20) 0%, rgba(21, 31, 45, 0.94) 100%);
  color: #6ee7d3;
}

.dark .month-price-grid button.cheap {
  color: #6ee7d3;
}

.dark .month-price-grid button.none {
  background: rgba(255, 255, 255, 0.025);
}

.soft-state,
.empty-state {
  display: grid;
  place-items: center;
  gap: 8px;
  min-height: 160px;
  color: var(--muted);
  text-align: center;
}

/* Small contextual photo above the icon in the main empty states (decorative;
   hides itself via onerror if the remote image is unavailable). */
.empty-state__photo {
  width: min(340px, 78%);
  aspect-ratio: 21 / 9;
  object-fit: cover;
  margin-bottom: 6px;
  border: 1px solid var(--line-2);
  border-radius: 12px;
  box-shadow: var(--shadow-soft);
}

.dark .empty-state__photo {
  border-color: var(--line);
  filter: saturate(0.85) brightness(0.92);
}

/* Recovery action rows for empty/dead-end states (self-styled — .primary-action
   / .secondary-action are scoped under .flight-meta and don't apply here). */
.empty-actions,
.recovery-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 12px;
}
.recovery-actions { justify-content: flex-start; margin: -2px 0 12px; }
.empty-actions button,
.recovery-actions button {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 8px 14px;
  font-weight: 700;
  cursor: pointer;
  background: var(--panel);
  color: inherit;
}
.empty-actions button.primary-action,
.recovery-actions button.primary-action {
  background: var(--go);
  color: #fff;
  border-color: transparent;
}
.empty-actions button.secondary-action,
.recovery-actions button.secondary-action {
  background: var(--brand-soft);
  color: var(--brand);
  border-color: rgba(0, 59, 149, 0.22);
}

.result-status {
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 14px;
}

.result-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.search-progress-card {
  width: min(100%, 1120px);
  display: grid;
  gap: 12px;
  margin: 14px auto 16px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: color-mix(in srgb, var(--panel) 94%, #eef6ff);
  box-shadow: var(--shadow-soft);
}

.search-progress-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.search-progress-head span {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.search-progress-head strong {
  color: var(--ink);
  font-size: 0.98rem;
  font-weight: 850;
}

.search-progress-head small {
  overflow: hidden;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 720;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.search-progress-head b {
  flex: 0 0 auto;
  min-width: 54px;
  padding: 6px 9px;
  border: 1px solid rgba(0, 98, 227, 0.18);
  border-radius: 999px;
  background: var(--panel);
  color: var(--brand);
  font-size: 0.9rem;
  text-align: center;
}

.search-progress-bar {
  position: relative;
  overflow: hidden;
  height: 10px;
  border-radius: 999px;
  background: #e7edf5;
}

.search-progress-bar i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--brand), var(--go));
  transition: width 240ms ease;
}

.search-progress-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.search-progress-steps span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 0 10px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: var(--panel);
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
}

.search-progress-steps svg {
  width: 14px;
  height: 14px;
}

.search-progress-steps b,
.search-progress-steps em {
  display: inline-block;
  font-style: normal;
  white-space: nowrap;
}

.search-progress-steps em {
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 750;
}

.date-grid-card {
  overflow: hidden;
}

.date-grid-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 10px;
  border: 1px solid rgba(0, 98, 227, 0.20);
  border-radius: 999px;
  background: var(--info-soft);
  color: var(--brand);
  font-size: 0.82rem;
  font-weight: 900;
}

.date-grid-badge svg {
  width: 15px;
  height: 15px;
}

.date-grid-matrix {
  display: grid;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 4px;
}

.date-grid-row {
  display: grid;
  grid-template-columns: minmax(92px, 0.9fr) repeat(var(--return-count), minmax(86px, 1fr));
  gap: 6px;
  min-width: calc(92px + var(--return-count) * 86px + var(--return-count) * 6px);
}

.date-grid-row > b,
.date-grid-row > span,
.date-grid-row > button {
  min-height: 58px;
}

.date-grid-header > span,
.date-grid-header > b,
.date-grid-out-date {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  border-radius: 8px;
  background: var(--panel-2);
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 850;
  text-align: center;
}

.date-grid-row > button {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  color: var(--text);
  text-align: center;
}

.date-grid-row > button:hover:not(:disabled) {
  border-color: rgba(0, 59, 149, 0.32);
  box-shadow: 0 8px 18px rgba(16, 32, 51, 0.09);
}

.date-grid-row > button strong {
  color: currentColor;
  font-size: 0.96rem;
  font-weight: 950;
}

.date-grid-row > button small {
  overflow: hidden;
  max-width: 100%;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Price heatmap tiers — declared BEFORE .best/.selected/.partial/.stale-price
   so those keep precedence by source order. Reuses the calendar grid palette. */
.date-grid-row > button.tier-cheap { background: var(--go-soft); }
.date-grid-row > button.tier-medium { background: var(--brand-soft); }
.date-grid-row > button.tier-pricey { background: rgba(244, 177, 95, 0.13); }

.date-grid-row > button.best {
  border-color: rgba(0, 169, 145, 0.48);
  background: linear-gradient(180deg, var(--go-soft) 0%, var(--panel) 100%);
  color: var(--go-dark);
}

.date-grid-row > button.selected {
  outline: 2px solid var(--brand-2);
  outline-offset: 1px;
}

.date-grid-row > button.partial {
  border-style: dashed;
  background: var(--brand-soft);
  color: var(--brand);
}

.date-grid-row > button.stale-price {
  border-color: rgba(180, 83, 9, 0.32);
  color: var(--warn);
}

.date-grid-row > button.missing {
  border-style: dashed;
  background: var(--panel-2);
  color: var(--muted);
}

.date-grid-row > button.invalid {
  opacity: 0.38;
  background: var(--panel-2);
  color: var(--muted);
  cursor: not-allowed;
}

.search-progress-steps span.done {
  border-color: rgba(0, 169, 145, 0.28);
  background: var(--go-soft);
  color: var(--go-dark);
}

.search-progress-steps span.active {
  border-color: rgba(0, 98, 227, 0.32);
  background: var(--brand-soft);
  color: var(--brand);
}

.search-progress-steps span.skipped {
  border-style: dashed;
  background: var(--panel-2);
  color: #8a94a3;
}

.search-progress-steps span.error {
  border-color: rgba(220, 38, 38, 0.26);
  background: rgba(255, 125, 147, 0.12);
  color: var(--danger);
}

.sort-tabs,
.view-toggle {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel);
}

.sort-tabs button,
.view-toggle button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 0 12px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font-weight: 800;
}

.sort-tabs button {
  min-width: 104px;
  justify-content: center;
}

.sort-tabs button em {
  overflow: hidden;
  max-width: 118px;
  color: inherit;
  font-size: 0.72rem;
  font-style: normal;
  font-weight: 700;
  opacity: 0.78;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sort-tabs button.active,
.view-toggle button.active {
  background: var(--brand);
  color: #fff;
}

.alert-card {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  padding: 12px 14px;
  border: 1px solid rgba(192, 38, 63, 0.24);
  border-radius: 12px;
  background: var(--danger-soft);
  color: var(--danger);
  font-weight: 700;
}

.alert-card button {
  margin-left: auto;
  border: 0;
  background: transparent;
  color: inherit;
  font-weight: 800;
}

.dashboard-page {
  display: grid;
  gap: 16px;
}

.dashboard-title {
  margin-bottom: 0;
}

.dashboard-kpi-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}

.dashboard-kpi,
.dashboard-panel,
.dashboard-health,
.dashboard-attention,
.dashboard-next {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: var(--shadow-soft);
}

.dashboard-kpi {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-items: center;
  gap: 6px 10px;
  padding: 14px;
}

.dashboard-kpi svg {
  grid-row: span 2;
  width: 32px;
  height: 32px;
  padding: 7px;
  border-radius: 12px;
  background: var(--brand-soft);
  color: var(--brand);
}

.dashboard-kpi span {
  overflow: hidden;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-kpi strong {
  color: var(--ink);
  font-size: 1.35rem;
  line-height: 1;
}

.dashboard-kpi.good svg {
  background: var(--go-soft);
  color: var(--go-dark);
}

.dashboard-kpi.warn svg {
  background: var(--warn-soft);
  color: var(--warn);
}

.dashboard-health {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(260px, 0.85fr);
  align-items: center;
  gap: 14px;
  padding: 16px;
}

.dashboard-health.good {
  border-color: rgba(0, 169, 145, 0.24);
  background: linear-gradient(135deg, var(--panel) 0%, var(--go-soft) 100%);
}

.dashboard-health.warn {
  border-color: rgba(180, 83, 9, 0.26);
  background: linear-gradient(135deg, var(--panel) 0%, var(--warn-soft) 100%);
}

.dashboard-health-main {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
}

.dashboard-health-main > svg {
  width: 42px;
  height: 42px;
  padding: 9px;
  border-radius: 14px;
  background: var(--brand-soft);
  color: var(--brand);
}

.dashboard-health.good .dashboard-health-main > svg {
  background: var(--go-soft);
  color: var(--go-dark);
}

.dashboard-health.warn .dashboard-health-main > svg {
  background: var(--warn-soft);
  color: var(--warn);
}

.dashboard-health-main span {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.dashboard-health-main small,
.dashboard-health-score small {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 850;
  text-transform: uppercase;
}

.dashboard-health-main strong {
  color: var(--ink);
  font-size: 1.18rem;
  line-height: 1.1;
}

.dashboard-health-main em {
  overflow: hidden;
  color: var(--muted);
  font-size: 0.84rem;
  font-style: normal;
  font-weight: 760;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-health-score {
  min-width: 74px;
  display: grid;
  justify-items: center;
  gap: 2px;
  padding: 10px 12px;
  border: 1px solid var(--line-2);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.72);
}

.dashboard-health-score b {
  color: var(--ink);
  font-size: 1.5rem;
  font-weight: 950;
  line-height: 1;
}

.dashboard-health-drivers {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 7px;
}

.dashboard-health-drivers span {
  min-width: 0;
  max-width: 180px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 9px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: var(--panel);
}

.dashboard-health-drivers span.warn {
  border-color: rgba(180, 83, 9, 0.22);
  background: var(--warn-soft);
}

.dashboard-health-drivers span.good {
  border-color: rgba(0, 169, 145, 0.2);
  background: var(--go-soft);
}

.dashboard-health-drivers b,
.dashboard-health-drivers em {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-health-drivers b {
  color: var(--ink);
  font-size: 0.76rem;
  font-weight: 900;
}

.dashboard-health-drivers em {
  color: var(--muted);
  font-size: 0.74rem;
  font-style: normal;
  font-weight: 760;
}

.dashboard-attention,
.dashboard-next,
.dashboard-panel {
  padding: 16px;
}

.dashboard-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.dashboard-panel-head h2 {
  margin: 0;
  color: var(--ink);
  font-size: 1.22rem;
}

.dashboard-panel-head button {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  padding: 0 11px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel-2);
  color: var(--brand);
  font-size: 0.82rem;
  font-weight: 850;
}

.dashboard-route-filter {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 5px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel-2);
}

.dashboard-route-filter button {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 10px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 850;
}

.dashboard-route-filter button.active {
  background: var(--brand);
  color: #fff;
}

.dashboard-route-filter b {
  min-width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  padding: 0 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  color: var(--brand);
  font-size: 0.68rem;
}

.dashboard-route-filter button:not(.active) b {
  background: var(--panel);
  color: var(--muted);
}

.dashboard-status-pill {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 11px;
  border: 1px solid rgba(0, 98, 227, 0.18);
  border-radius: 999px;
  background: var(--brand-soft);
  color: var(--brand);
  font-size: 0.82rem;
  font-weight: 850;
}

.dashboard-status-pill.good {
  border-color: rgba(0, 169, 145, 0.24);
  background: var(--go-soft);
  color: var(--go-dark);
}

.dashboard-status-pill.warn {
  border-color: rgba(180, 83, 9, 0.26);
  background: var(--warn-soft);
  color: var(--warn);
}

.dashboard-status-pill svg {
  width: 15px;
  height: 15px;
}

.dashboard-attention-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 10px;
}

.dashboard-attention-item {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line-2);
  border-radius: 14px;
  background: var(--panel-2);
  color: inherit;
  text-align: left;
}

.dashboard-attention-item > svg:first-child {
  width: 30px;
  height: 30px;
  padding: 7px;
  border-radius: 11px;
  background: var(--brand-soft);
  color: var(--brand);
}

.dashboard-attention-item.good > svg:first-child {
  background: var(--go-soft);
  color: var(--go-dark);
}

.dashboard-attention-item.warn > svg:first-child {
  background: var(--warn-soft);
  color: var(--warn);
}

.dashboard-attention-item span {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.dashboard-attention-item strong,
.dashboard-attention-item small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-attention-item strong {
  color: var(--ink);
  font-size: 0.92rem;
}

.dashboard-attention-item small {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 750;
}

.dashboard-attention-item > svg:last-child {
  width: 16px;
  height: 16px;
  color: var(--muted);
}

.dashboard-next-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 10px;
}

.dashboard-next-item {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  padding: 12px;
  border: 1px solid var(--line-2);
  border-radius: 14px;
  background: var(--panel-2);
}

.dashboard-next-item.good {
  border-color: rgba(0, 169, 145, 0.28);
  background: var(--go-soft);
}

.dashboard-next-item.warn {
  border-color: rgba(180, 83, 9, 0.24);
  background: var(--warn-soft);
}

.dashboard-next-item > svg {
  width: 31px;
  height: 31px;
  padding: 7px;
  border-radius: 11px;
  background: var(--brand-soft);
  color: var(--brand);
}

.dashboard-next-item.good > svg {
  background: rgba(0, 169, 145, 0.14);
  color: var(--go-dark);
}

.dashboard-next-item.warn > svg {
  background: var(--surface-raised);
  color: var(--warn);
}

.dashboard-next-item span {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.dashboard-next-item strong,
.dashboard-next-item small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-next-item strong {
  color: var(--ink);
  font-size: 0.92rem;
}

.dashboard-next-item small {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 750;
}

.dashboard-next-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
}

.dashboard-next-actions button {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 11px;
  border: 1px solid rgba(0, 98, 227, 0.22);
  border-radius: 999px;
  background: var(--brand-soft);
  color: var(--brand);
  font-size: 0.8rem;
  font-weight: 850;
}

.dashboard-next-actions button:disabled {
  opacity: 0.65;
}

.dashboard-next-actions button svg {
  width: 14px;
  height: 14px;
}

.dashboard-next-dismiss {
  width: 34px;
  padding: 0;
  border-color: var(--line);
  background: var(--panel);
  color: var(--muted);
}

.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
}

.dashboard-wide {
  grid-column: 1 / -1;
}

.dashboard-deal-list,
.dashboard-alert-list,
.dashboard-provider-list,
.dashboard-search-list {
  display: grid;
  gap: 10px;
}

.dashboard-route-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 10px;
}

.dashboard-route-card {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto auto auto;
  align-items: center;
  gap: 5px 12px;
  padding: 13px;
  border: 1px solid var(--line-2);
  border-radius: 14px;
  background: var(--panel-2);
  color: inherit;
  text-align: left;
}

.dashboard-route-card.good {
  border-color: rgba(0, 169, 145, 0.28);
  background: var(--go-soft);
}

.dashboard-route-card.warn {
  border-color: rgba(180, 83, 9, 0.24);
  background: var(--warn-soft);
}

.dashboard-route-card span {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.dashboard-route-card strong,
.dashboard-route-card small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-route-card strong {
  color: var(--ink);
  font-size: 0.98rem;
}

.dashboard-route-card small {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 750;
}

.dashboard-route-card b {
  color: var(--brand);
  font-size: 1.12rem;
  font-weight: 950;
  white-space: nowrap;
}

.dashboard-route-card em,
.dashboard-route-card i {
  font-style: normal;
  font-weight: 850;
}

.dashboard-route-card em {
  grid-column: 1;
  color: var(--ink);
  font-size: 0.82rem;
}

.dashboard-route-card i {
  justify-self: end;
  color: var(--muted);
  font-size: 0.78rem;
}

.dashboard-route-actions {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 5px;
}

.dashboard-route-actions button {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 11px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel);
  color: var(--brand);
  font-size: 0.8rem;
  font-weight: 850;
}

.dashboard-route-actions button:first-child {
  border-color: rgba(0, 98, 227, 0.22);
  background: var(--brand-soft);
}

.dashboard-route-actions button:disabled {
  opacity: 0.65;
}

.dashboard-route-actions svg {
  width: 15px;
  height: 15px;
}

.dashboard-deal-row,
.dashboard-search-list button,
.dashboard-alert-list article,
.dashboard-provider-list article {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--line-2);
  border-radius: 14px;
  background: var(--panel-2);
  color: inherit;
  text-align: left;
}

.dashboard-alert-list article,
.dashboard-provider-list article {
  grid-template-columns: minmax(0, 1fr) auto;
}

.dashboard-alert-list article em {
  grid-column: 1 / -1;
  justify-self: start;
  font-style: normal;
  font-size: 0.78rem;
  font-weight: 850;
}

.dashboard-alert-list article.hit {
  border-color: rgba(0, 169, 145, 0.28);
  background: var(--go-soft);
}

.dashboard-deal-row span,
.dashboard-search-list span,
.dashboard-alert-list span,
.dashboard-provider-list span {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.dashboard-deal-row strong,
.dashboard-search-list strong,
.dashboard-alert-list strong,
.dashboard-provider-list strong {
  overflow: hidden;
  color: var(--ink);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-deal-row small,
.dashboard-search-list small,
.dashboard-alert-list small,
.dashboard-provider-list small {
  overflow: hidden;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 720;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-deal-row b,
.dashboard-search-list b,
.dashboard-alert-list b,
.dashboard-provider-list b {
  color: var(--brand);
  font-weight: 900;
  white-space: nowrap;
}

.dashboard-provider-list article.active b,
.dashboard-provider-list article.available b {
  color: var(--go-dark);
}

.dashboard-provider-list article.needs_key b,
.dashboard-provider-list article.degraded b,
.dashboard-provider-list article.paused b {
  color: var(--warn);
}

.dashboard-search-list svg,
.dashboard-deal-row svg {
  width: 16px;
  height: 16px;
  color: var(--muted);
}

.dashboard-ops-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
}

.dashboard-ops-grid article {
  min-width: 0;
  display: grid;
  gap: 5px;
  padding: 12px;
  border: 1px solid var(--line-2);
  border-radius: 14px;
  background: var(--panel-2);
}

.dashboard-ops-grid span {
  overflow: hidden;
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-ops-grid strong {
  color: var(--ink);
  font-size: 1.18rem;
  line-height: 1;
}

.dashboard-tier-list {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.dashboard-tier-row {
  display: grid;
  grid-template-columns: minmax(120px, 0.65fr) minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
}

.dashboard-tier-row span {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.dashboard-tier-row strong {
  overflow: hidden;
  color: var(--ink);
  font-size: 0.86rem;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.dashboard-tier-row small,
.dashboard-worker-note {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 750;
}

.dashboard-tier-row i {
  overflow: hidden;
  height: 9px;
  border-radius: 999px;
  background: var(--line-2);
}

.dashboard-tier-row i b {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--brand), var(--go));
}

.dashboard-tier-row em {
  color: var(--muted);
  font-size: 0.8rem;
  font-style: normal;
  font-weight: 850;
}

.dashboard-worker-note {
  margin: 10px 0 0;
}

.results-layout {
  display: grid;
  grid-template-columns: minmax(240px, 280px) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.results-commandbar {
  position: sticky;
  top: 72px;
  z-index: 24;
  display: grid;
  gap: 10px;
  margin: 0 0 16px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: color-mix(in srgb, var(--panel) 92%, transparent);
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(14px) saturate(140%);
}

.result-trust-metrics {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}

.result-trust-metrics span {
  min-width: 0;
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  border: 1px solid var(--line-2);
  border-radius: 10px;
  background: var(--panel-2);
  color: var(--muted);
}

.result-trust-metrics svg {
  width: 16px;
  height: 16px;
}

.result-trust-metrics b {
  color: var(--ink);
  font-size: 0.92rem;
}

.result-trust-metrics small {
  overflow: hidden;
  font-size: 0.72rem;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.result-trust-metrics .good {
  border-color: color-mix(in srgb, var(--go) 28%, var(--line));
  color: var(--go-dark);
}

.result-trust-metrics .warn {
  border-color: color-mix(in srgb, var(--warn) 34%, var(--line));
  color: var(--warn);
}

.quick-filter-row {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}

.quick-filter-button {
  min-width: 0;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--line-2);
  border-radius: 10px;
  background: var(--panel-2);
  color: var(--text);
  text-align: left;
  font-weight: 850;
}

.quick-filter-button svg {
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
  color: var(--brand);
}

.quick-filter-button span {
  min-width: 0;
  display: grid;
  gap: 1px;
}

.quick-filter-button b,
.quick-filter-button small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.quick-filter-button b {
  color: var(--ink);
  font-size: 0.82rem;
}

.quick-filter-button small {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
}

.quick-filter-button.active {
  border-color: color-mix(in srgb, var(--brand) 38%, var(--line));
  background: var(--brand-soft);
  color: var(--brand);
}

.quick-filter-button.muted {
  opacity: 0.52;
}

.active-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.active-filter-row button {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 10px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: var(--panel-2);
  color: var(--ink);
  font-size: 0.78rem;
  font-weight: 850;
}

.active-filter-row button:hover {
  border-color: color-mix(in srgb, var(--brand) 32%, var(--line));
}

.active-filter-row svg {
  width: 14px;
  height: 14px;
}

.active-filter-row .clear-filter-action {
  color: var(--brand);
}

.decision-panel {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 10px;
  margin: 0 0 16px;
}

.decision-panel article {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
  box-shadow: var(--shadow-soft);
}

.decision-panel article.good {
  border-color: color-mix(in srgb, var(--go) 28%, var(--line));
}

.decision-panel article.warn {
  border-color: color-mix(in srgb, var(--warn) 34%, var(--line));
}

.decision-panel article > svg {
  width: 20px;
  height: 20px;
  color: var(--brand);
}

.decision-panel article.good > svg {
  color: var(--go-dark);
}

.decision-panel article.warn > svg {
  color: var(--warn);
}

.decision-panel div {
  min-width: 0;
}

.decision-panel span,
.decision-panel p {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
}

.decision-panel span {
  text-transform: uppercase;
}

/* Forecast confidence meter: 3 segments filled by level. */
.confidence-meter {
  display: inline-flex;
  gap: 3px;
  margin-top: 6px;
  vertical-align: middle;
}
.confidence-meter i {
  width: 14px;
  height: 5px;
  border-radius: 3px;
  background: var(--line-2);
}
.confidence-meter.low i:nth-child(1),
.confidence-meter.medium i:nth-child(-n + 2),
.confidence-meter.high i {
  background: var(--brand);
}

.decision-panel strong {
  display: block;
  margin-top: 2px;
  color: var(--ink);
  font-size: 0.98rem;
}

.decision-panel p {
  margin: 3px 0 0;
  font-weight: 650;
}

.decision-panel button {
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel-2);
  color: var(--brand);
  font-size: 0.78rem;
  font-weight: 900;
  white-space: nowrap;
}

.filters-card {
  position: sticky;
  top: 86px;
  min-width: 0;
  overflow: hidden;
  padding: 16px;
}

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

.filters-card h3 {
  color: var(--ink);
}

.filters-head button {
  padding: 6px 8px;
  border: 1px solid var(--line-2);
  border-radius: 8px;
  background: var(--panel-2);
  color: var(--brand);
  font-size: 0.74rem;
  font-weight: 900;
}

.filter-group {
  min-width: 0;
  display: grid;
  gap: 2px;
  padding: 8px 0;
  border-top: 1px solid var(--line-2);
}

.filter-group:first-of-type {
  border-top: 0;
}

.filter-group-label {
  display: block;
  padding: 4px 0 2px;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.filters-card label {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 8px 0;
  font-weight: 700;
}

.filters-card label input {
  flex: 0 0 auto;
}

.filters-card label .filter-name {
  min-width: 0;
  flex: 1;
  overflow: hidden;
  color: var(--ink);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.filters-card label .filter-note {
  margin-left: auto;
  max-width: 92px;
  overflow: hidden;
  color: var(--muted);
  font-size: 0.82rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.filter-pill-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  padding: 4px 0 6px;
}

.filter-pill-grid button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 0;
  min-height: 36px;
  padding: 7px 8px;
  border: 1px solid var(--line-2);
  border-radius: 8px;
  background: var(--panel-2);
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 850;
}

.filter-pill-grid button.active {
  border-color: color-mix(in srgb, var(--brand) 38%, var(--line));
  background: color-mix(in srgb, var(--brand) 11%, var(--panel));
  color: var(--brand);
}

.range-filter {
  padding: 14px 0;
}

.range-filter.compact {
  padding: 10px 0 14px;
  border-top: 1px solid var(--line-2);
}

.range-filter span,
.range-filter strong {
  display: block;
}

.range-filter span {
  color: var(--muted);
  font-size: 0.84rem;
  font-weight: 700;
}

.range-filter strong {
  margin: 3px 0 8px;
  color: var(--ink);
}

.range-filter input {
  width: 100%;
}

.mini-map-card {
  height: 210px;
  overflow: hidden;
  border: 1px solid var(--line-2);
  border-radius: 12px;
  background: var(--panel-2);
}

#map,
#hero-map,
#explore-map,
#live-map,
#detail-map {
  position: relative;
  width: 100%;
  height: 100%;
  background: #eef3f8;
}

/* A temporary tile outage should not turn a useful route/price map into an
   empty gray panel. MapLibre keeps markers and controls on the inline fallback
   style, while this layer supplies a quiet geographic grid behind them. */
#map.map-loading,
#hero-map.map-loading,
#explore-map.map-loading,
#live-map.map-loading,
#detail-map.map-loading,
#map.map-lite,
#hero-map.map-lite,
#explore-map.map-lite,
#live-map.map-lite,
#detail-map.map-lite {
  background:
    radial-gradient(circle at 18% 24%, rgba(56, 163, 220, 0.2), transparent 28%),
    radial-gradient(circle at 78% 72%, rgba(0, 169, 145, 0.14), transparent 31%),
    linear-gradient(135deg, #edf7ff 0%, #f8fbff 48%, #e8f5f3 100%);
}

#map.map-lite::before,
#hero-map.map-lite::before,
#explore-map.map-lite::before,
#live-map.map-lite::before,
#detail-map.map-lite::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.48;
  background-image:
    linear-gradient(rgba(39, 95, 139, 0.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(39, 95, 139, 0.12) 1px, transparent 1px);
  background-size: 52px 52px;
}

#map.map-lite .maplibregl-canvas,
#hero-map.map-lite .maplibregl-canvas,
#explore-map.map-lite .maplibregl-canvas,
#live-map.map-lite .maplibregl-canvas,
#detail-map.map-lite .maplibregl-canvas {
  background: transparent !important;
}

#map.map-lite .maplibregl-canvas-container,
#hero-map.map-lite .maplibregl-canvas-container,
#explore-map.map-lite .maplibregl-canvas-container,
#live-map.map-lite .maplibregl-canvas-container,
#detail-map.map-lite .maplibregl-canvas-container,
#map.map-lite .maplibregl-control-container,
#hero-map.map-lite .maplibregl-control-container,
#explore-map.map-lite .maplibregl-control-container,
#live-map.map-lite .maplibregl-control-container,
#detail-map.map-lite .maplibregl-control-container {
  z-index: 1;
}

#hero-map.wide-map,
#explore-map.wide-map,
#live-map.wide-map {
  height: 390px;
}

#explore-map.wide-map.tall {
  height: 520px;
}

#live-map.wide-map.live {
  min-height: 430px;
  height: min(64vh, 640px);
}

.results-list {
  min-width: 0;
  display: grid;
  gap: 12px;
}

.results-list.cards {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
}

.results-list.cards .flight-main {
  align-items: stretch;
  flex-direction: column;
  gap: 16px;
}

.results-list.cards .timeline {
  grid-template-columns: auto minmax(90px, 1fr) auto;
}

.results-list.cards .price-block {
  min-width: 0;
  text-align: left;
}

.results-list.rows {
  grid-template-columns: 1fr;
}

.flight-card {
  min-width: 0;
  overflow: hidden;
}

.flight-card.best {
  border-color: rgba(0, 59, 149, 0.38);
}

.flight-photo {
  width: 100%;
  height: 132px;
  display: block;
  object-fit: cover;
  background: var(--panel-2);
}

.results-list.rows .flight-card {
  display: grid;
  grid-template-columns: 156px minmax(0, 1fr);
}

.results-list.rows .flight-photo {
  width: 156px;
  height: 100%;
  min-height: 142px;
  grid-row: span 2;
}

.flight-main {
  min-width: 0;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 20px;
  padding: 18px;
}

.results-list.rows .flight-main {
  display: grid;
  grid-template-columns: minmax(132px, 0.72fr) minmax(220px, 1.35fr) minmax(112px, max-content);
  align-items: center;
  gap: 16px;
}

.airline-block {
  min-width: 0;
  max-width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
}

.airline-block > div {
  min-width: 0;
}

.airline-avatar {
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-2);
  border-radius: 10px;
  background: var(--brand-soft);
  color: var(--brand);
}

.airline-avatar svg {
  width: 18px;
  height: 18px;
}

.airline-avatar img {
  width: 26px;
  height: 26px;
  object-fit: contain;
  border-radius: 6px;
}

.airline-initials {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.airline-block strong,
.airline-block span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.airline-block span,
.price-block span,
.price-block small,
.timeline span,
.flight-meta {
  color: var(--muted);
  font-size: 0.86rem;
}

.timeline {
  min-width: 0;
  flex: 1;
  display: grid;
  grid-template-columns: auto minmax(140px, 1fr) auto;
  align-items: center;
  gap: 14px;
}

.timeline strong {
  display: block;
  color: var(--ink);
  font-size: 1.22rem;
}

.timeline .line {
  display: grid;
  gap: 4px;
  text-align: center;
}

.timeline .line i {
  height: 2px;
  display: block;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--line), var(--brand), var(--line));
}

.timeline .line em {
  color: var(--go-dark);
  font-size: 0.78rem;
  font-style: normal;
  font-weight: 800;
}

.price-block {
  min-width: 112px;
  text-align: right;
  overflow-wrap: anywhere;
}

.price-block strong {
  display: block;
  color: var(--ink);
  font-size: 1.7rem;
  line-height: 1;
  white-space: nowrap;
}

.price-block small {
  white-space: normal;
  overflow-wrap: anywhere;
}

.flight-meta {
  min-width: 0;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 12px;
  padding: 12px 18px;
  border-top: 1px solid var(--line-2);
}

.flight-meta > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.flight-meta .deal-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  padding: 5px 9px;
  border: 1px solid rgba(0, 98, 227, 0.18);
  border-radius: 999px;
  background: var(--info-soft);
  color: var(--brand);
  font-size: 0.8rem;
  font-weight: 800;
}

.flight-meta .layover-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  padding: 5px 9px;
  border: 1px solid rgba(180, 83, 9, 0.22);
  border-radius: 999px;
  background: var(--warn-soft);
  color: var(--warn);
  font-size: 0.8rem;
  font-weight: 800;
}

.flight-meta .booking-options-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  padding: 5px 9px;
  border: 1px solid rgba(0, 98, 227, 0.20);
  border-radius: 999px;
  background: var(--info-soft);
  color: var(--brand);
  font-size: 0.8rem;
  font-weight: 850;
}

.flight-meta .risk-chip,
.flight-meta .provider-confidence-chip,
.flight-meta .carbon-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  padding: 5px 9px;
  border: 1px solid rgba(180, 83, 9, 0.22);
  border-radius: 999px;
  background: var(--warn-soft);
  color: var(--warn);
  font-size: 0.8rem;
  font-weight: 850;
}

.flight-meta .provider-confidence-chip.high {
  border-color: rgba(0, 169, 145, 0.24);
  background: var(--go-soft);
  color: var(--go-dark);
}

.flight-meta .provider-confidence-chip.medium {
  border-color: rgba(0, 98, 227, 0.20);
  background: var(--info-soft);
  color: var(--brand);
}

.flight-meta .provider-confidence-chip.watch {
  border-color: rgba(180, 83, 9, 0.26);
  background: var(--warn-soft);
  color: var(--warn);
}

.flight-meta .provider-confidence-chip.low {
  border-color: rgba(220, 38, 38, 0.24);
  background: var(--danger-soft);
  color: var(--danger-strong);
}

.flight-meta .risk-chip.high {
  border-color: rgba(220, 38, 38, 0.24);
  background: var(--danger-soft);
  color: var(--danger-strong);
}

.flight-meta .risk-chip.low {
  border-color: rgba(0, 169, 145, 0.22);
  background: var(--go-soft);
  color: var(--go-dark);
}

.flight-meta .price-tier-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  padding: 5px 9px;
  border-radius: 999px;
  border: 1px solid rgba(0, 169, 145, 0.22);
  background: var(--go-soft);
  color: var(--go-dark);
  font-size: 0.8rem;
  font-weight: 850;
}

.flight-meta .price-tier-chip.warn {
  border-color: rgba(180, 83, 9, 0.26);
  background: var(--warn-soft);
  color: var(--warn);
}

.flight-meta .deal-chip.deal-anomaly {
  border-color: rgba(0, 169, 145, 0.28);
  background: var(--go-soft);
  color: var(--go-dark);
}

.flight-meta .value-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  padding: 5px 9px;
  border-radius: 999px;
  border: 1px solid rgba(0, 169, 145, 0.22);
  background: var(--go-soft);
  color: var(--go-dark);
  font-size: 0.8rem;
  font-weight: 850;
}

.flight-card[data-section-label]:not([data-section-label=""]) {
  position: relative;
  margin-top: 36px;
}

.flight-card[data-section-label]:not([data-section-label=""])::before {
  content: attr(data-section-label);
  position: absolute;
  top: -28px;
  left: 0;
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  color: var(--text);
  white-space: nowrap;
}

.calendar-view-toggle {
  display: inline-flex;
  gap: 4px;
  margin: 8px 0 12px;
  padding: 3px;
  background: var(--panel-2);
  border-radius: 8px;
  align-self: flex-start;
}

.calendar-view-toggle button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 0;
  background: transparent;
  border-radius: 6px;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--muted);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.calendar-view-toggle button.active {
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

.calendar-view-toggle svg {
  width: 14px;
  height: 14px;
}

.price-graph-card {
  width: 100%;
  margin-top: 8px;
  padding: 8px 4px 4px;
  background: var(--surface);
  border-radius: 10px;
  border: 1px solid var(--border-soft, rgba(0, 0, 0, 0.08));
}

.price-graph-svg {
  display: block;
  width: 100%;
  height: auto;
  max-height: 240px;
}

.price-graph-grid {
  stroke: var(--border-soft, rgba(0, 0, 0, 0.08));
  stroke-width: 1;
  stroke-dasharray: 2 4;
}

/* p10–p90 "typical range" band; sits behind gridlines + bars. */
.price-graph-band {
  fill: var(--brand);
  opacity: 0.1;
}
:root.dark .price-graph-band { opacity: 0.18; }

.price-graph-typical {
  stroke: rgba(0, 98, 227, 0.55);
  stroke-width: 1.4;
  stroke-dasharray: 5 3;
}

.price-graph-typical-label {
  font-size: 10px;
  fill: var(--brand);
  font-weight: 700;
}

.price-graph-axis {
  font-size: 10px;
  fill: var(--muted);
  font-weight: 600;
}

.price-graph-day {
  font-size: 10px;
  fill: var(--muted);
}

.price-graph-bar {
  cursor: pointer;
  transition: opacity 0.15s, filter 0.15s;
  fill: var(--tier-medium);
}

.price-graph-bar.tier-best  { fill: var(--go); }
.price-graph-bar.tier-cheap  { fill: var(--tier-cheap); }
.price-graph-bar.tier-medium { fill: var(--tier-medium); }
.price-graph-bar.tier-pricey { fill: var(--tier-pricey); }

.price-graph-bar-group:hover .price-graph-bar { filter: brightness(1.08); }
.price-graph-bar-group.selected .price-graph-bar {
  stroke: var(--text);
  stroke-width: 2.5;
  paint-order: stroke;
}
.price-graph-bar-group.cheapest .price-graph-bar { fill: var(--go); }
.price-graph-bar-group.past .price-graph-bar { opacity: 0.35; cursor: not-allowed; }
/* Cheapest-day value label; --surface halo keeps the green legible over any bar. */
.price-graph-best-label {
  font-size: 10px;
  font-weight: 800;
  fill: var(--go);
  paint-order: stroke;
  stroke: var(--surface);
  stroke-width: 3;
}

/* HTML price graph. Alpine's SVG template cloning can briefly write empty
   geometry attributes while a live calendar swaps datasets; regular elements
   avoid noisy console errors and remain keyboard/touch accessible. */
.price-graph-visual {
  position: relative;
  min-width: 0;
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 8px;
  padding: 8px 4px 2px;
}

.price-graph-scale {
  height: 166px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 18px 0 20px;
  color: var(--muted);
  font-size: 0.66rem;
  font-weight: 750;
  text-align: right;
}

.price-graph-columns {
  min-width: 0;
  max-width: 100%;
  height: 166px;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(20px, 1fr);
  align-items: stretch;
  gap: 3px;
  overflow-x: auto;
  overflow-y: hidden;
  contain: inline-size;
  border-bottom: 1px solid var(--line);
  background: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent calc(33.333% - 1px),
    var(--line-2) calc(33.333% - 1px),
    var(--line-2) 33.333%
  );
  scrollbar-width: thin;
}

.price-graph-column {
  min-width: 20px;
  height: 166px;
  display: grid;
  grid-template-rows: 18px minmax(0, 1fr) 20px;
  align-items: end;
  justify-items: center;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--muted);
}

.price-graph-column b {
  position: relative;
  z-index: 1;
  color: var(--go-dark);
  font-size: 0.62rem;
  line-height: 1;
  white-space: nowrap;
}

.price-graph-column i {
  width: min(18px, 72%);
  min-height: 4px;
  display: block;
  align-self: end;
  border-radius: 5px 5px 2px 2px;
  background: var(--tier-medium);
  transition: filter 150ms ease, opacity 150ms ease;
}

.price-graph-column.tier-best i,
.price-graph-column.cheapest i { background: var(--go); }
.price-graph-column.tier-cheap i { background: var(--tier-cheap); }
.price-graph-column.tier-medium i { background: var(--tier-medium); }
.price-graph-column.tier-pricey i { background: var(--tier-pricey); }
.price-graph-column.selected i { outline: 2px solid var(--ink); outline-offset: 1px; }
.price-graph-column.past { opacity: 0.38; }
.price-graph-column:not(:disabled):hover i { filter: brightness(1.08); }

.price-graph-column small {
  align-self: center;
  color: var(--muted);
  font-size: 0.64rem;
  font-weight: 750;
}

.price-graph-reference {
  position: absolute;
  top: 8px;
  right: 10px;
  padding: 4px 7px;
  border: 1px dashed color-mix(in srgb, var(--brand) 38%, var(--line));
  border-radius: 999px;
  background: color-mix(in srgb, var(--panel) 90%, transparent);
  color: var(--brand);
  font-size: 0.66rem;
  font-weight: 800;
}

.deals-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
  gap: 14px;
  margin-top: 12px;
}

.deal-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border-soft, rgba(0, 0, 0, 0.08));
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  transition: transform 0.18s, box-shadow 0.18s;
}

.deal-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.10);
}

.deal-photo {
  width: 100%;
  height: 132px;
  object-fit: cover;
  background: var(--panel-2);
}

.deal-discount {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--go);
  color: #fff;
  font-weight: 800;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
}

.deal-discount span {
  margin-right: 1px;
}

.deal-body {
  padding: 12px 14px 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}

.deal-body strong {
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: 0.01em;
}

.deal-body > span {
  font-size: 0.85rem;
  color: var(--muted);
}

.deal-body p {
  margin: 6px 0 0;
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.deal-body p b {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--go-dark);
}

.deal-body p em {
  font-size: 0.85rem;
  color: var(--muted);
  text-decoration: line-through;
  font-style: normal;
}

.deal-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 8px;
  font-size: 0.78rem;
  color: var(--muted);
}

.deal-meta span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.deal-meta svg {
  width: 13px;
  height: 13px;
}

.deal-actions {
  display: flex;
  gap: 8px;
  padding: 10px 14px 14px;
}

.radar-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
  gap: 14px;
  margin-top: 12px;
}

.radar-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border-soft, rgba(0, 0, 0, 0.08));
  border-radius: 14px;
  padding: 14px;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  transition: transform 0.18s, box-shadow 0.18s;
}

.radar-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.10);
}

.radar-region {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text2);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.radar-discount {
  margin: 8px 0;
  color: var(--go-dark);
  font-size: 1.6rem;
  font-weight: 900;
  line-height: 1;
}

.radar-discount small {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--muted);
  margin-top: 2px;
}

.radar-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}

.radar-body strong {
  font-size: 1.1rem;
}

.radar-body p {
  margin: 4px 0 0;
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.radar-body p b {
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--go-dark);
}

.radar-body span {
  font-size: 0.82rem;
  color: var(--muted);
}

.radar-actions {
  margin-top: 10px;
}

.radar-actions button {
  width: 100%;
}

.deal-actions button,
.deal-actions a {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.deal-actions button {
  background: transparent;
  border: 1px solid var(--border-soft, rgba(0, 0, 0, 0.12));
  color: var(--text);
}

.deal-actions button:hover {
  background: var(--panel-2);
}

.deal-actions a {
  background: var(--brand);
  color: #fff;
  border: 0;
}

.deal-actions a:hover {
  filter: brightness(1.08);
}

.promo-bucket {
  margin-top: 22px;
}

.promo-bucket-head {
  display: flex;
  align-items: center;
  gap: 10px;
}

.promo-bucket-head h2 {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 800;
}

.promo-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}

.flight-meta .carbon-chip.low {
  border-color: rgba(0, 169, 145, 0.22);
  background: var(--go-soft);
  color: var(--go-dark);
}

.flight-meta .carbon-chip.medium {
  border-color: rgba(0, 98, 227, 0.20);
  background: var(--info-soft);
  color: var(--brand);
}

.flight-meta .carbon-chip.high {
  border-color: rgba(180, 83, 9, 0.26);
  background: var(--warn-soft);
  color: var(--warn);
}

.flight-meta .freshness-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  padding: 5px 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel-2);
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 850;
}

.flight-meta .freshness-chip.live,
.flight-meta .freshness-chip.fresh {
  border-color: rgba(0, 169, 145, 0.28);
  background: var(--go-soft);
  color: var(--go-dark);
}

.flight-meta .freshness-chip.recent {
  border-color: rgba(0, 98, 227, 0.20);
  background: var(--info-soft);
  color: var(--brand);
}

.flight-meta .freshness-chip.stale {
  border-color: rgba(180, 83, 9, 0.26);
  background: var(--warn-soft);
  color: var(--warn);
}

.flight-meta .deal-chip svg,
.flight-meta .risk-chip svg,
.flight-meta .provider-confidence-chip svg,
.flight-meta .carbon-chip svg,
.flight-meta .freshness-chip svg {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
}

.flight-meta .layover-chip svg {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  color: var(--warn);
}

.flight-meta .deal-chip b,
.flight-meta .deal-chip em,
.flight-meta .freshness-chip b,
.flight-meta .risk-chip b,
.flight-meta .carbon-chip b,
.flight-meta .layover-chip b {
  min-width: 0;
  overflow: hidden;
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.flight-meta .deal-chip em {
  color: var(--go-dark);
}

.flight-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
  margin-left: auto;
}

.split-links,
.detail-actions {
  align-items: center;
  display: inline-flex;
  flex-wrap: wrap;
  gap: 8px;
}

.flight-meta .icon-button,
.flight-meta .secondary-action,
.flight-meta .primary-action,
.combo-card a,
.saved-grid a,
.saved-grid button,
.primary-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-raised);
  color: var(--text);
  font-weight: 800;
  text-decoration: none;
}

.flight-meta .icon-button {
  width: 44px;
  padding: 0;
}

.flight-meta .icon-button svg {
  width: 17px;
  height: 17px;
}

.flight-meta .secondary-action {
  color: var(--brand);
  border-color: rgba(0, 59, 149, 0.22);
  background: var(--brand-soft);
}

.flight-meta .secondary-action:hover {
  border-color: rgba(0, 59, 149, 0.36);
  background: var(--brand-soft);
}

.flight-meta .icon-button.active {
  color: var(--danger);
  border-color: rgba(192, 38, 63, 0.26);
  background: var(--danger-soft);
}

/* Tactile feedback: press-in on tap, a pop when wishlist/compare toggle .active
   (re-adding the class restarts the keyframe). Reduced-motion reset at the end
   of this file neutralizes both. */
.flight-meta .icon-button {
  transition: transform 0.12s cubic-bezier(0.2, 0.8, 0.25, 1), background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.flight-meta .icon-button:active { transform: scale(0.9); }
.flight-meta .icon-button.active { animation: icon-pop 0.26s cubic-bezier(0.2, 1.4, 0.4, 1); }
@keyframes icon-pop {
  0% { transform: scale(0.82); }
  55% { transform: scale(1.16); }
  100% { transform: scale(1); }
}

.flight-meta .primary-action,
.primary-link {
  border-color: var(--go);
  background: var(--go);
  color: #fff;
}

.flight-meta .primary-action.verify-action {
  border-color: color-mix(in srgb, var(--go) 86%, #0b6b61);
}

.flight-meta .primary-action:hover,
.primary-link:hover {
  border-color: var(--go-dark);
  background: var(--go-dark);
}

.primary-link.disabled,
.primary-link:disabled {
  cursor: wait;
  opacity: 0.72;
}

.flight-meta .secondary-action svg,
.flight-meta .primary-action svg,
.primary-link svg {
  width: 16px;
  height: 16px;
}

.results-list.cards .flight-meta {
  align-items: flex-start;
  flex-wrap: wrap;
}

.results-list.cards .flight-actions {
  width: 100%;
  justify-content: flex-start;
}

.skeleton-stack {
  display: grid;
  gap: 12px;
}

.skeleton-stack div {
  min-height: 118px;
  border-radius: var(--radius);
  background: linear-gradient(90deg, #e8eef5, #f8fafc, #e8eef5);
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite;
}

.skeleton-stack .skeleton-headline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: auto;
  padding: 4px 0 2px;
  background: none;
  animation: none;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--muted);
}

.skeleton-stack .skeleton-headline svg {
  width: 16px;
  height: 16px;
}

.results-still-searching {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  padding: 8px 14px;
  background: var(--panel-2);
  border-radius: 999px;
  font-size: 0.83rem;
  color: var(--muted);
  font-weight: 600;
  align-self: flex-start;
  width: fit-content;
}

.results-still-searching svg {
  width: 14px;
  height: 14px;
}

@keyframes shimmer {
  to { background-position: -200% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .skeleton-stack div { animation: none; }
}

.combo-grid,
.saved-grid,
.destination-grid,
.compare-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 14px;
}

.combo-card,
.saved-grid article {
  padding: 16px;
}

.combo-card {
  display: grid;
  overflow: hidden;
  padding: 0;
  cursor: pointer;
  transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}

.combo-card:hover {
  transform: translateY(-2px);
  border-color: var(--brand-soft);
  box-shadow: var(--shadow);
}

.combo-photo {
  width: 100%;
  height: 148px;
  object-fit: cover;
  background: #e8eef5;
}

.combo-body {
  display: grid !important;
  gap: 12px;
  padding: 14px;
}

.combo-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.flex-search-summary,
.complex-search-summary {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 7px;
  color: var(--brand);
  font-size: 0.82rem;
  font-weight: 750;
}

.flex-search-summary svg,
.complex-search-summary svg {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
}

.flex-deep-state {
  min-height: 132px;
  margin: 12px 0;
  padding: 20px;
  border: 1px dashed var(--brand-soft);
  border-radius: 16px;
  background: var(--panel-2);
}

.flex-deep-state svg {
  width: 25px;
  height: 25px;
  color: var(--brand);
}

.flex-deep-state strong {
  max-width: 620px;
  color: var(--ink);
  font-size: 0.9rem;
}

.complex-deep-state {
  min-height: 132px;
  margin: 12px 0;
  padding: 20px;
  border: 1px dashed var(--brand-soft);
  border-radius: 16px;
  background: var(--panel-2);
}

.complex-deep-state svg {
  width: 25px;
  height: 25px;
  color: var(--brand);
}

.complex-deep-state strong {
  max-width: 640px;
  color: var(--ink);
  font-size: 0.9rem;
}

.combo-price-block {
  display: grid;
  gap: 2px;
}

.combo-price-block small {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 800;
  text-transform: uppercase;
}

.combo-price-block strong {
  line-height: 1;
}

.combo-head-badges {
  display: flex;
  align-items: flex-end;
  flex-direction: column;
  gap: 7px;
}

.combo-verification-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 28px;
  padding: 4px 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel-2);
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 850;
  line-height: 1.15;
  text-align: left;
}

.combo-verification-badge svg {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
}

.combo-verification-badge.is-verified {
  border-color: rgba(0, 169, 145, 0.28);
  background: var(--go-soft);
  color: var(--go-dark);
}

.combo-verification-badge.is-mismatch {
  border-color: rgba(0, 98, 227, 0.24);
  background: var(--info-soft);
  color: var(--brand);
}

.combo-verification-badge.is-observed {
  border-color: var(--line);
  background: var(--panel-2);
  color: var(--muted);
}

.combo-stay-chip {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 4px 9px;
  border-radius: 999px;
  background: var(--brand-soft);
  color: var(--brand);
  font-size: 0.82rem;
  font-weight: 850;
  white-space: nowrap;
}

.combo-legs {
  display: grid;
  gap: 8px;
}

.combo-leg {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 9px 10px;
  border: 1px solid var(--line-2);
  border-radius: 12px;
  background: var(--panel-2);
}

.combo-leg b {
  color: var(--ink);
  font-size: 0.84rem;
}

.combo-leg span {
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.combo-leg strong {
  font-size: 0.98rem;
  white-space: nowrap;
}

.combo-card > div,
.saved-grid article > div {
  justify-content: space-between;
  gap: 12px;
}

.combo-card strong,
.saved-grid b {
  color: var(--ink);
  font-size: 1.45rem;
}

.combo-price-block strong {
  font-size: 1.45rem;
}

.combo-leg strong {
  font-size: 0.98rem;
  white-space: nowrap;
}

.combo-card em {
  display: inline-flex;
  padding: 4px 8px;
  border-radius: 999px;
  background: var(--brand-soft);
  color: var(--brand);
  font-style: normal;
  font-weight: 800;
}

.price-note {
  display: block;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 700;
}

.combo-actions {
  width: 100%;
  justify-content: space-between;
}

.combo-card .split-links button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel);
  color: var(--text);
  font-weight: 800;
}

.combo-card .combo-segment-actions {
  display: inline-flex;
  align-items: center;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel);
  white-space: nowrap;
}

.combo-card .split-links .combo-segment-actions button {
  min-height: 36px;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.combo-card .split-links .combo-segment-actions button + button {
  border-left: 1px solid var(--line);
}

.combo-card .split-links .combo-segment-actions button:hover {
  background: var(--panel-2);
}

.combo-card .split-links .combo-segment-actions button:disabled {
  cursor: wait;
  opacity: 0.7;
}

.combo-card .split-links .combo-segment-actions button:first-child {
  color: var(--brand);
}

.combo-card .split-links .combo-segment-actions button:last-child {
  color: var(--go-dark);
}

.combo-card .split-links button svg {
  width: 15px;
  height: 15px;
}

.combo-card .split-links .combo-detail-action {
  border-color: transparent;
  background: var(--brand);
  color: #fff;
}

.complex-trip-grid {
  display: grid;
  gap: 14px;
}

.complex-trip-grid.cards,
.combo-grid.cards {
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

.complex-trip-grid.rows,
.combo-grid.rows {
  grid-template-columns: 1fr;
}

.combo-grid.rows .combo-card {
  grid-template-columns: minmax(180px, 260px) 1fr;
}

.combo-grid.rows .combo-photo {
  height: 100%;
  min-height: 180px;
}

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

.complex-trip-grid.cards .complex-trip-head {
  align-items: flex-start;
  flex-direction: column;
}

.complex-trip-card {
  overflow: hidden;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel);
  box-shadow: var(--shadow-soft);
}

.complex-photo-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 3px;
  height: 118px;
  margin: -18px -18px 14px;
  overflow: hidden;
  background: var(--panel-2);
}

.complex-photo-strip span {
  position: relative;
  min-width: 0;
  overflow: hidden;
}

.complex-photo-strip img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.complex-photo-strip b {
  position: absolute;
  left: 8px;
  bottom: 8px;
  padding: 3px 7px;
  border-radius: 999px;
  background: rgba(16, 32, 51, 0.68);
  color: #fff;
  font-size: 0.72rem;
  letter-spacing: 0.02em;
}

.complex-trip-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.complex-trip-head span,
.complex-trip-card p {
  color: var(--muted);
}

.complex-trip-head strong {
  color: var(--ink);
  font-size: 1.8rem;
}

.complex-trip-head em {
  padding: 4px 8px;
  border-radius: 999px;
  background: var(--go-soft);
  color: var(--go-dark);
  font-size: 0.82rem;
  font-style: normal;
  font-weight: 800;
}

.complex-total-stack {
  display: grid;
  justify-items: end;
  gap: 7px;
}

.complex-economics {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 0 0 10px;
}

.complex-economics > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  padding: 4px 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel-2);
  color: var(--muted);
  font-size: 0.74rem;
}

.complex-economics > span.is-saving {
  border-color: rgba(0, 169, 145, 0.28);
  background: var(--go-soft);
  color: var(--go-dark);
}

.complex-economics svg,
.complex-links button svg {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
}

.complex-trip-card h3 {
  margin-bottom: 4px;
  color: var(--ink);
}

.segment-list {
  display: grid;
  gap: 8px;
  margin: 14px 0;
}

.segment-list > div {
  display: grid;
  gap: 2px;
  padding: 10px 12px;
  border: 1px solid var(--line-2);
  border-radius: 10px;
  background: var(--panel-2);
}

.segment-list b {
  color: var(--ink);
}

.segment-list span,
.segment-list em {
  color: var(--muted);
  font-size: 0.85rem;
  font-style: normal;
}

.complex-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.complex-links a,
.complex-links .link-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--brand);
  font-weight: 800;
}

.complex-links .link-button {
  gap: 6px;
}

.complex-links .link-button:disabled {
  cursor: wait;
  opacity: 0.7;
}

/* Booking exits unified to buttons (openSelectedOffer) so every path mints
   the same Pitvuelos short-link and gives feedback on a missing link.
   .link-button resets button chrome to look like the inline links it replaced. */
.link-button {
  appearance: none;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  color: var(--brand);
  font-weight: 800;
  cursor: pointer;
}
.link-button:hover { text-decoration: underline; }

.flyhop-panel {
  margin-top: 18px;
}

.flyhop-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
}

.flyhop-card {
  display: grid;
  gap: 8px;
  overflow: hidden;
  padding: 14px;
  border: 1px solid rgba(0, 98, 227, 0.18);
  border-radius: 12px;
  background: var(--info-soft);
}

.flyhop-photo {
  width: calc(100% + 28px);
  height: 112px;
  margin: -14px -14px 4px;
  display: block;
  object-fit: cover;
  background: var(--panel-2);
}

.flyhop-card > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.flyhop-card .flyhop-warning {
  align-items: center;
  justify-content: flex-start;
  width: fit-content;
  max-width: 100%;
  padding: 6px 9px;
  border: 1px solid rgba(180, 83, 9, 0.22);
  border-radius: 999px;
  background: var(--warn-soft);
  color: var(--warn);
  font-size: 0.78rem;
  font-weight: 850;
}

.flyhop-warning svg {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  color: var(--warn);
}

.flyhop-card .flyhop-warning span {
  min-width: 0;
  color: var(--warn);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.flyhop-card strong {
  color: var(--ink);
  font-size: 1.35rem;
}

.flyhop-card span,
.flyhop-card small {
  color: var(--muted);
}

.flyhop-card a {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  background: var(--brand);
  color: #fff;
  font-weight: 800;
}

.map-section {
  padding-top: 28px;
}

.wide-map {
  height: 390px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #eef3f8;
  box-shadow: var(--shadow-soft);
}

.wide-map.tall {
  height: 520px;
}

#hero-map.wide-map,
#explore-map.wide-map.discover-map {
  width: min(100%, 1120px);
  margin-inline: auto;
}

.wide-map.live {
  height: min(72vh, 680px);
}

.live-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.live-dashboard {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  align-items: start;
}

.live-map-shell {
  position: relative;
  width: min(100%, 1120px);
  margin-inline: auto;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: var(--shadow-soft);
}

.live-map-shell .wide-map {
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.live-map-toolbar {
  position: absolute;
  left: 14px;
  right: 14px;
  top: 14px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 8px 24px rgba(16, 32, 51, 0.14);
  backdrop-filter: blur(10px);
}

.live-map-toolbar span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ink);
}

.live-map-toolbar svg {
  width: 16px;
  height: 16px;
  color: var(--brand);
}

.live-map-toolbar em {
  color: var(--muted);
  font-size: 0.82rem;
  font-style: normal;
  font-weight: 750;
}

.live-map-toolbar em.live-error {
  color: var(--danger, #d33);
}

/* Live-map legend: each colour dot paired with its word (doubles as the
   non-colour text key). Colours match the markers in app.js. */
.live-map-toolbar .live-map-legend {
  display: inline-flex;
  gap: 10px;
  align-items: center;
  font-size: 0.72rem;
  font-weight: 600;
}
.live-map-toolbar .live-map-legend i {
  font-style: normal;
  color: var(--muted);
}
.live-map-legend .dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  display: inline-block;
  margin-right: 3px;
}
.live-map-legend .dot.airborne { background: #0062e3; }
.live-map-legend .dot.ground { background: #68697f; }

.live-deals-panel {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.live-deals-head {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

.live-deals-head h2 {
  margin: 0;
  color: var(--ink);
  font-size: 1.1rem;
}

.live-deals-head p {
  margin-top: 4px;
  color: var(--muted);
  font-size: 0.86rem;
}

.live-deal-section {
  display: grid;
  gap: 9px;
}

.live-deal-section h3 {
  color: var(--ink);
  font-size: 0.86rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.live-deal-card {
  width: 100%;
  display: grid;
  grid-template-columns: 86px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
  color: inherit;
  text-align: left;
  box-shadow: var(--shadow-soft);
  transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}

.live-deal-card:not(.observed) {
  grid-template-columns: 86px minmax(0, 1fr);
}

.live-deal-card:hover {
  border-color: rgba(0, 59, 149, 0.28);
  box-shadow: 0 12px 28px rgba(16, 32, 51, 0.10);
  transform: translateY(-1px);
}

.live-deal-card img {
  width: 86px;
  height: 68px;
  display: block;
  object-fit: cover;
  border-radius: 9px;
  background: var(--panel-2);
}

.live-deal-card span {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.live-deal-card em {
  color: var(--go-dark);
  font-size: 0.72rem;
  font-style: normal;
  font-weight: 850;
  text-transform: uppercase;
}

.live-deal-card strong {
  overflow: hidden;
  color: var(--ink);
  font-size: 0.95rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.live-deal-card small {
  color: var(--muted);
  font-size: 0.78rem;
}

.live-deal-card > b {
  color: var(--brand);
  font-size: 1.02rem;
}

.provider-status-panel {
  display: grid;
  gap: 14px;
  margin-top: 18px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.82);
  box-shadow: var(--shadow-soft);
}

.dark .provider-status-panel {
  background: rgba(21, 31, 45, 0.86);
}

.provider-status-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.provider-status-head h2 {
  margin: 2px 0 4px;
  color: var(--ink);
  font-size: 1.18rem;
}

.provider-status-head span {
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 750;
}

.provider-status-head button {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel);
  color: var(--brand);
  font-weight: 800;
}

.provider-status-head button:disabled {
  opacity: 0.7;
}

.provider-status-head svg {
  width: 16px;
  height: 16px;
}

.provider-status-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.provider-status-card {
  min-height: 138px;
  display: grid;
  align-content: space-between;
  gap: 12px;
  padding: 13px;
  border: 1px solid var(--line-2);
  border-radius: 12px;
  background: var(--panel);
}

.provider-status-card header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.provider-status-card span,
.provider-status-card strong,
.provider-status-card small,
.provider-status-card p,
.provider-status-card em {
  display: block;
  min-width: 0;
}

.provider-status-card strong {
  color: var(--ink);
  font-size: 0.98rem;
}

.provider-status-card small,
.provider-status-card p,
.provider-status-card em {
  color: var(--muted);
  font-size: 0.78rem;
}

.provider-status-card p {
  margin: 0;
  font-weight: 750;
}

.provider-status-card em {
  overflow: hidden;
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.provider-env {
  overflow: hidden;
  color: var(--muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.68rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.provider-action-link {
  width: fit-content;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--brand-soft);
  color: var(--brand);
  font-size: 0.76rem;
  font-weight: 850;
  text-decoration: none;
}

.provider-action-link svg {
  width: 14px;
  height: 14px;
}

.provider-status-card b {
  flex: 0 0 auto;
  padding: 5px 8px;
  border-radius: 999px;
  background: var(--panel-2);
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 850;
}

.provider-status-card.active {
  border-color: rgba(0, 169, 145, 0.28);
  background: var(--go-soft);
}

.provider-status-card.active b {
  background: var(--surface-raised);
  color: var(--go-dark);
}

.dark .provider-status-card.active b,
.dark .provider-status-card.available b,
.dark .provider-status-card.degraded b,
.dark .provider-status-card.paused b,
.dark .integration-card.configured b,
.dark .integration-card.commercial_access b,
.dark .integration-card.compliance_review b {
  background: rgba(255, 255, 255, 0.10);
}

.provider-status-card.available {
  border-color: rgba(0, 59, 149, 0.20);
  background: var(--brand-soft);
}

.provider-status-card.available b {
  background: var(--surface-raised);
  color: var(--brand);
}

.provider-status-card.needs_key {
  background: var(--panel-2);
}

.dark .provider-status-card.needs_key,
.dark .integration-card.api_key {
  background: var(--panel);
}

.provider-status-card.needs_key b {
  color: #6b7280;
}

.provider-status-card.degraded,
.provider-status-card.paused {
  border-color: rgba(180, 83, 9, 0.26);
  background: var(--warn-soft);
}

.dark .provider-status-card.degraded,
.dark .provider-status-card.paused,
.dark .integration-card.compliance_review {
  background: rgba(244, 177, 95, 0.12);
}

.provider-status-card.degraded b,
.provider-status-card.paused b {
  background: var(--surface-raised);
  color: var(--warn);
}

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

.integration-status-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
}

.integration-status-head h3 {
  margin: 2px 0 0;
  color: var(--ink);
  font-size: 1.02rem;
}

.integration-status-actions {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.integration-status-actions span {
  color: var(--muted);
  font-size: 0.84rem;
  font-weight: 800;
}

.integration-status-actions button {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel);
  color: var(--brand);
  font-size: 0.78rem;
  font-weight: 850;
}

.integration-status-actions button svg {
  width: 14px;
  height: 14px;
}

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

.integration-card {
  min-height: 168px;
  align-content: start;
}

.integration-card p {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.integration-card.configured {
  border-color: rgba(0, 169, 145, 0.30);
  background: var(--go-soft);
}

.integration-card.configured b {
  background: var(--surface-raised);
  color: var(--go-dark);
}

.integration-card.api_key {
  background: var(--panel-2);
}

.integration-card.api_key b {
  color: #6b7280;
}

.integration-card.commercial_access {
  border-color: rgba(0, 59, 149, 0.18);
  background: var(--brand-soft);
}

.integration-card.commercial_access b {
  background: var(--surface-raised);
  color: var(--brand);
}

.integration-card.compliance_review {
  border-color: rgba(180, 83, 9, 0.26);
  background: var(--warn-soft);
}

.integration-card.compliance_review b {
  background: var(--surface-raised);
  color: var(--warn);
}

.page-title {
  margin-bottom: 22px;
}

.explore-form {
  display: flex;
  align-items: end;
  gap: 10px;
}

.explore-form label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 700;
}

.explore-form input {
  height: 44px;
  min-width: 110px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
  color: var(--ink);
  font-weight: 800;
  text-transform: uppercase;
}

.explore-form button {
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 16px;
  border: 0;
  border-radius: 10px;
  background: var(--brand);
  color: #fff;
  font-weight: 800;
}

.explore-form button:disabled {
  cursor: wait;
  opacity: 0.72;
}

.explore-summary {
  width: min(100%, 1120px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: -4px auto 14px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel);
  box-shadow: var(--shadow-soft);
}

.explore-summary > div:first-child {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.explore-summary > div:first-child > i {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  color: var(--brand);
}

.explore-summary span {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.explore-summary strong,
.explore-summary small,
.explore-summary-metrics b,
.explore-summary-metrics span {
  display: block;
}

.explore-summary strong {
  color: var(--ink);
  font-weight: 850;
}

.explore-summary small,
.explore-summary-metrics span {
  overflow: hidden;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.explore-summary.error {
  border-color: rgba(220, 38, 38, 0.24);
  background: var(--danger-soft);
}

.explore-summary.error > div:first-child > i {
  color: var(--danger);
}

.explore-summary-metrics {
  display: flex;
  gap: 8px;
  flex: 0 0 auto;
}

.explore-summary-metrics article {
  min-width: 94px;
  padding: 8px 10px;
  border: 1px solid var(--line-2);
  border-radius: 10px;
  background: var(--panel-2);
}

.explore-summary-metrics b {
  color: var(--ink);
  font-size: 0.94rem;
}

.explore-soft,
.explore-empty {
  width: min(100%, 1120px);
  margin: 0 auto 14px;
}

.explore-toolbar,
.explore-filterbar {
  width: min(100%, 1120px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: -2px auto 14px;
}

.explore-filterbar {
  justify-content: flex-start;
  flex-wrap: wrap;
  margin-top: 0;
}

.explore-toolbar small {
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 750;
}

.explore-toolbar .sort-tabs svg {
  width: 15px;
  height: 15px;
}

.explore-filter-tabs {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-raised);
}

.explore-filter-tabs button,
.explore-clear-filters {
  min-height: 34px;
  padding: 0 11px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font-weight: 800;
}

.explore-filter-tabs button.active {
  background: var(--brand);
  color: #fff;
}

.explore-price-filter {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 4px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-raised);
}

.explore-price-filter span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
}

.explore-price-filter input {
  width: 92px;
  height: 30px;
  border: 0;
  border-left: 1px solid var(--line-2);
  padding-left: 9px;
  background: transparent;
  color: var(--ink);
  font-weight: 850;
}

.explore-price-filter input:focus {
  outline: none;
}

.explore-clear-filters {
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--brand);
}

.destination-grid {
  margin-top: 18px;
  max-width: 1120px;
  margin-inline: auto;
}

.destination-grid article {
  overflow: hidden;
  cursor: pointer;
}

.destination-grid article.best {
  border-color: rgba(0, 98, 227, 0.26);
  box-shadow: 0 14px 34px rgba(0, 59, 149, 0.12);
}

.destination-grid article:focus-visible {
  outline: 3px solid rgba(0, 98, 227, 0.28);
  outline-offset: 3px;
}

.destination-photo-wrap {
  position: relative;
  overflow: hidden;
}

.destination-grid img {
  width: 100%;
  height: 142px;
  display: block;
  object-fit: cover;
  background: var(--panel-2);
}

.destination-photo-wrap::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 56px;
  background: linear-gradient(180deg, rgba(3, 20, 44, 0), rgba(3, 20, 44, 0.5));
  pointer-events: none;
}

.destination-price-badge {
  position: absolute;
  right: 12px;
  bottom: 10px;
  z-index: 1;
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.96);
  color: var(--brand);
  font-size: 1.02rem;
  font-weight: 900;
  box-shadow: 0 8px 18px rgba(16, 32, 51, 0.18);
}

.destination-card-body {
  display: grid;
  gap: 8px;
  padding: 12px 14px 14px;
}

.destination-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.destination-card-head strong {
  min-width: 0;
  overflow: hidden;
  color: var(--ink);
  font-size: 1.02rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.destination-card-head span {
  flex: 0 0 auto;
  padding: 3px 7px;
  border-radius: 999px;
  background: var(--panel-2);
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 850;
}

.destination-card-body p,
.destination-card-body small,
.destination-card-foot em {
  display: block;
  overflow: hidden;
  color: var(--muted);
  font-size: 0.82rem;
  font-style: normal;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.destination-card-body p {
  margin: 0;
  color: var(--text);
}

.destination-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-top: 4px;
  border-top: 1px solid var(--line-2);
}

.destination-card-foot b {
  flex: 0 0 auto;
  color: var(--brand);
  font-size: 0.84rem;
}

.saved-grid article p {
  color: var(--muted);
}

.saved-card {
  overflow: hidden;
}

.saved-card .saved-status {
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  display: inline-flex;
  font-size: 0.78rem;
  font-weight: 800;
  gap: 6px;
  justify-content: center;
  min-height: 30px;
  padding: 0 10px;
  width: fit-content;
}

.saved-card .saved-status.booked {
  background: color-mix(in srgb, var(--go) 10%, transparent);
  border-color: color-mix(in srgb, var(--go) 32%, var(--line));
  color: var(--go-dark);
}

.saved-card .saved-status svg {
  width: 14px;
  height: 14px;
}

.saved-photo {
  width: calc(100% + 32px);
  height: 116px;
  display: block;
  object-fit: cover;
  margin: -16px -16px 12px;
  background: var(--panel-2);
}

.saved-grid article > div:last-child {
  margin-top: 12px;
}

.saved-grid button {
  color: var(--danger);
}

.saved-grid .saved-alert-button {
  color: var(--brand);
}

.saved-grid .saved-booked-button {
  color: var(--go-dark);
}

.detail-actions .secondary-action {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 13px;
  border: 1px solid rgba(0, 59, 149, 0.22);
  border-radius: 999px;
  background: var(--brand-soft);
  color: var(--brand);
  font-weight: 850;
}

.user-dashboard {
  display: grid;
  grid-template-columns: minmax(320px, 0.95fr) minmax(420px, 1.35fr);
  gap: 16px;
  align-items: start;
}

.user-profile-card,
.user-alert-card,
.user-auth-card,
.user-list-panel,
.user-command-center,
.user-summary-grid article {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: var(--shadow-soft);
}

.user-profile-card,
.user-alert-card,
.user-auth-card,
.user-list-panel,
.user-command-center {
  padding: 18px;
}

.user-command-center {
  display: grid;
  gap: 14px;
  margin-bottom: 16px;
}

.user-command-main {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
}

.user-command-main h2 {
  margin: 0;
  color: var(--ink);
  font-size: 1.35rem;
  line-height: 1.12;
}

.user-command-main p:not(.eyebrow) {
  margin: 4px 0 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-command-avatar {
  width: 58px;
  height: 58px;
  border-radius: 16px;
}

.user-delivery-pill {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 11px;
  border: 1px solid rgba(180, 83, 9, 0.24);
  border-radius: 999px;
  background: var(--warn-soft);
  color: var(--warn);
  font-size: 0.82rem;
  font-weight: 900;
}

.user-delivery-pill.connected {
  border-color: rgba(0, 169, 145, 0.24);
  background: var(--go-soft);
  color: var(--go-dark);
}

.user-delivery-pill svg {
  width: 15px;
  height: 15px;
}

.user-command-stats {
  margin-top: 0;
}

.user-command-stats article.good svg {
  color: var(--go-dark);
}

.user-command-stats article.warn svg {
  color: var(--warn);
}

.user-command-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.user-command-actions button {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 12px;
  border: 1px solid rgba(0, 98, 227, 0.2);
  border-radius: 999px;
  background: var(--brand-soft);
  color: var(--brand);
  font-size: 0.84rem;
  font-weight: 880;
}

.user-command-actions button svg {
  width: 16px;
  height: 16px;
}

.user-auth-card {
  display: grid;
  grid-template-columns: minmax(260px, 0.8fr) minmax(320px, 1.2fr);
  gap: 16px;
  align-items: center;
  margin-bottom: 16px;
}

.user-auth-status,
.user-auth-signed,
.user-auth-form,
.user-auth-fields {
  min-width: 0;
}

.user-auth-status,
.user-auth-signed {
  display: flex;
  align-items: center;
  gap: 12px;
}

.user-auth-status svg {
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  padding: 7px;
  border-radius: 12px;
  background: var(--brand-soft);
  color: var(--brand);
}

.user-auth-status span,
.user-auth-signed span {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.user-auth-status strong,
.user-auth-signed b {
  overflow: hidden;
  color: var(--ink);
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-auth-status small,
.user-auth-signed small {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 750;
}

.user-auth-signed {
  justify-content: flex-end;
}

.user-auth-signed button {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel-2);
  color: var(--text);
  font-weight: 850;
}

.user-auth-signed button svg {
  width: 16px;
  height: 16px;
}

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

.user-auth-fields {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.user-auth-fields label {
  display: grid;
  gap: 6px;
}

.user-auth-fields span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
}

.user-auth-fields input {
  width: 100%;
  height: 42px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel-2);
  color: var(--ink);
  font-weight: 750;
}

.user-profile-head,
.user-card-head,
.user-summary-grid article,
.user-alert-list article,
.user-search-list button {
  display: flex;
  align-items: center;
}

.user-profile-head {
  gap: 14px;
  margin-bottom: 16px;
}

.user-avatar {
  width: 68px;
  height: 68px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 18px;
  background: linear-gradient(135deg, var(--brand), var(--go));
  color: #fff;
  font-weight: 900;
  font-size: 1.25rem;
}

.user-avatar img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.user-profile-head strong {
  display: block;
  color: var(--ink);
  font-size: 1.12rem;
}

.user-profile-head span {
  color: var(--muted);
  font-size: 0.9rem;
}

.telegram-help {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  padding: 12px;
  border: 1px solid rgba(0, 59, 149, 0.16);
  border-radius: 14px;
  background: var(--brand-soft);
}

.telegram-help.connected {
  border-color: rgba(0, 169, 145, 0.24);
  background: var(--go-soft);
}

.telegram-help svg {
  flex: 0 0 auto;
  color: var(--brand);
}

.telegram-help.connected svg {
  color: var(--go);
}

.telegram-help span {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.telegram-help strong {
  color: var(--ink);
}

.telegram-help small {
  color: var(--muted);
  font-weight: 700;
}

.user-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.user-form-grid label {
  display: grid;
  gap: 6px;
}

.user-form-grid span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
}

.user-form-grid input,
.user-form-grid select {
  width: 100%;
  height: 42px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel-2);
  color: var(--ink);
  font-weight: 700;
}

.user-field-wide {
  grid-column: 1 / -1;
}

.primary-action.wide {
  width: 100%;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 14px;
  border: 1px solid var(--go);
  border-radius: 999px;
  background: var(--go);
  color: #fff;
  font-weight: 900;
}

.primary-action.wide:hover {
  border-color: var(--go-dark);
  background: var(--go-dark);
}

.primary-action.wide:disabled {
  opacity: 0.65;
}

.user-card-head {
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.user-card-head h2 {
  margin: 0;
  color: var(--ink);
  font-size: 1.3rem;
}

.user-card-head button {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel-2);
  color: var(--brand);
  font-weight: 800;
}

.user-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-top: 16px;
}

.user-summary-grid article {
  gap: 11px;
  padding: 14px;
}

.user-summary-grid svg {
  color: var(--brand);
}

.user-summary-grid span {
  min-width: 0;
  flex: 1;
  color: var(--muted);
  font-size: 0.84rem;
  font-weight: 800;
}

.user-summary-grid strong {
  color: var(--ink);
  font-size: 1.05rem;
}

.user-lists {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 16px;
}

.user-alert-list,
.user-search-list {
  display: grid;
  gap: 10px;
}

.user-alert-list article,
.user-search-list button {
  width: 100%;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--line-2);
  border-radius: 14px;
  background: var(--panel-2);
}

.user-alert-list article.hit {
  border-color: rgba(0, 169, 145, 0.28);
  background: var(--go-soft);
}

.user-alert-main,
.user-alert-price,
.user-search-list span {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.user-alert-main {
  flex: 1;
}

.user-alert-price {
  flex: 0 0 122px;
  justify-items: end;
  text-align: right;
}

.user-alert-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 5px;
}

.user-alert-metrics small {
  max-width: 100%;
  display: inline-flex;
  align-items: center;
  min-height: 23px;
  padding: 3px 8px;
  overflow: hidden;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: var(--panel);
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dark .user-alert-metrics small {
  background: var(--panel-2);
}

.user-alert-list strong,
.user-search-list strong {
  color: var(--ink);
}

.user-alert-list span,
.user-alert-list em,
.user-search-list small {
  overflow: hidden;
  color: var(--muted);
  font-size: 0.82rem;
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-alert-list b,
.user-search-list b {
  flex: 0 0 auto;
  color: var(--brand);
}

.user-alert-price b {
  font-size: 1.05rem;
}

.user-alert-price small {
  font-size: 0.72rem;
  font-weight: 850;
}

.user-alert-price small.good {
  color: var(--go-dark);
}

.user-alert-price small.warn {
  color: var(--warn);
}

.user-alert-price small.muted {
  color: var(--muted);
}

.user-alert-list button {
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border: 1px solid rgba(192, 38, 63, 0.18);
  border-radius: 999px;
  background: var(--danger-soft);
  color: var(--danger);
}

.dark .user-alert-list button {
  background: rgba(255, 125, 147, 0.14);
}

.user-search-list button {
  text-align: left;
  cursor: pointer;
}

.user-search-list button:hover {
  border-color: rgba(0, 59, 149, 0.22);
  background: var(--panel);
}

.empty-state.compact {
  min-height: 180px;
  padding: 22px;
}

.compare-tray {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 45;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 46px;
  padding: 0 16px;
  border: 0;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  font-weight: 800;
  box-shadow: var(--shadow);
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(16, 32, 51, 0.54);
  backdrop-filter: blur(6px);
}

body.modal-open {
  overflow: hidden;
}

.detail-modal,
.compare-modal {
  position: relative;
  width: min(920px, 100%);
  max-height: min(860px, 92vh);
  overflow: auto;
}

.detail-map,
#detail-map.detail-map {
  width: 100%;
  height: 260px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #eef3f8;
}

.detail-body {
  padding: 22px;
}

.detail-photo {
  position: relative;
  height: 190px;
  overflow: hidden;
  margin: -4px -4px 18px;
  border-radius: 14px;
  background: var(--panel-2);
}

.detail-photo img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.detail-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 40%, rgba(3, 20, 44, 0.58));
}

.detail-photo span {
  position: absolute;
  left: 14px;
  bottom: 12px;
  z-index: 1;
  color: #fff;
  font-weight: 850;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.28);
}

.detail-body h2 {
  margin-bottom: 8px;
  color: var(--ink);
  font-size: 2.4rem;
}

.detail-times {
  gap: 12px;
  margin: 18px 0;
}

.detail-times div {
  flex: 1;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
}

.detail-times span,
.detail-times em {
  display: block;
  color: var(--muted);
  font-style: normal;
}

.detail-times strong {
  display: block;
  color: var(--ink);
  font-size: 1.4rem;
}

.detail-insights {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 18px 0;
}

.detail-insights article {
  display: grid;
  gap: 5px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel-2);
}

.detail-insights span,
.detail-insights small,
.provider-compare p,
.provider-price-row span,
.provider-price-row small {
  color: var(--muted);
}

.detail-insights span {
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
}

.detail-insights strong {
  color: var(--ink);
}

.detail-insights .baggage-unknown {
  border-color: rgba(180, 83, 9, 0.28);
  background: var(--warn-soft);
}

.detail-insights .layover-insight {
  border-color: rgba(0, 98, 227, 0.2);
  background: var(--info-soft);
}

.detail-insights .carbon-insight.low {
  border-color: rgba(0, 169, 145, 0.22);
  background: var(--go-soft);
}

.detail-insights .carbon-insight.medium {
  border-color: rgba(0, 98, 227, 0.20);
  background: var(--info-soft);
}

.detail-insights .carbon-insight.high {
  border-color: rgba(180, 83, 9, 0.26);
  background: var(--warn-soft);
}

.detail-insights .risk-insight.medium {
  border-color: rgba(180, 83, 9, 0.28);
  background: var(--warn-soft);
}

.detail-insights .risk-insight.high {
  border-color: rgba(220, 38, 38, 0.25);
  background: var(--danger-soft);
}

.detail-insights .risk-insight.low {
  border-color: rgba(0, 169, 145, 0.22);
  background: var(--go-soft);
}

.detail-insights .provider-confidence-insight.high {
  border-color: rgba(0, 169, 145, 0.24);
  background: var(--go-soft);
}

.detail-insights .provider-confidence-insight.medium {
  border-color: rgba(0, 98, 227, 0.20);
  background: var(--info-soft);
}

.detail-insights .provider-confidence-insight.watch {
  border-color: rgba(180, 83, 9, 0.26);
  background: var(--warn-soft);
}

.detail-insights .provider-confidence-insight.low {
  border-color: rgba(220, 38, 38, 0.24);
  background: var(--danger-soft);
}

.score-breakdown {
  display: grid;
  gap: 12px;
  margin: 18px 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--panel);
}

.score-total {
  display: grid;
  flex-shrink: 0;
  justify-items: end;
  gap: 4px;
}

.score-total b {
  color: var(--ink);
  font-size: 2rem;
  font-weight: 900;
  line-height: 1;
}

.score-total .score-total-level {
  padding: 3px 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel-2);
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 850;
  text-transform: uppercase;
}

.score-total.high .score-total-level {
  border-color: rgba(0, 169, 145, 0.24);
  background: var(--go-soft);
  color: var(--go-dark);
}

.score-total.good .score-total-level {
  border-color: rgba(0, 98, 227, 0.20);
  background: var(--info-soft);
  color: var(--brand);
}

.score-total.mid .score-total-level {
  border-color: rgba(180, 83, 9, 0.26);
  background: var(--warn-soft);
  color: var(--warn);
}

.score-total.low .score-total-level {
  border-color: rgba(220, 38, 38, 0.24);
  background: var(--danger-soft);
  color: var(--danger-strong);
}

.score-rows {
  display: grid;
  gap: 8px;
}

.score-row {
  display: grid;
  grid-template-columns: minmax(84px, 120px) 1fr 2.2em;
  align-items: center;
  gap: 10px;
}

.score-row > span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
}

.score-bar {
  height: 8px;
  border-radius: 999px;
  background: var(--track);
  overflow: hidden;
}

.score-bar em {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--brand-2);
}

.score-bar em.high { background: var(--go); }
.score-bar em.good { background: var(--brand-2); }
.score-bar em.mid { background: var(--warn); }
.score-bar em.low { background: var(--danger); }

.score-row > b {
  color: var(--ink);
  font-size: 0.86rem;
  font-weight: 850;
  text-align: right;
}

.provider-compare {
  display: grid;
  gap: 12px;
  margin: 18px 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--panel);
}

.detail-section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

.detail-section-head h3 {
  margin: 0;
  color: var(--ink);
  font-size: 1rem;
}

.detail-section-head p {
  margin: 4px 0 0;
  font-size: 0.86rem;
}

.verify-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  background: var(--panel-2);
  white-space: nowrap;
}

.verify-chip svg {
  width: 15px;
  height: 15px;
}

.verify-chip b {
  color: inherit;
  font-size: 0.78rem;
  font-weight: 800;
}

.verify-chip.checking {
  color: var(--brand);
  border-color: color-mix(in srgb, var(--brand) 28%, var(--line));
}

.verify-chip.ok {
  color: var(--go);
  border-color: color-mix(in srgb, var(--go) 34%, var(--line));
  background: var(--go-soft);
}

.provider-price-chart {
  min-width: 0;
  display: grid;
  gap: 8px;
}

.verification-compare {
  display: grid;
  gap: 8px;
  margin-top: 8px;
}

.verification-compare-head {
  display: grid;
  grid-template-columns: minmax(96px, 1.1fr) repeat(3, minmax(0, 0.8fr)) auto;
  gap: 10px;
  padding: 0 12px;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 900;
  text-transform: uppercase;
}

.verification-compare-head span:not(:first-child) {
  text-align: right;
}

.verification-compare article {
  display: grid;
  grid-template-columns: minmax(96px, 1.1fr) repeat(3, minmax(0, 0.8fr)) auto;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--line-2);
  border-radius: 10px;
  background: var(--panel-2);
}

.verification-compare article.verified {
  border-color: color-mix(in srgb, var(--go) 30%, var(--line));
}

.verification-compare article.mismatch {
  border-color: color-mix(in srgb, var(--warn) 38%, var(--line));
}

.verification-compare span {
  min-width: 0;
}

.verification-compare strong,
.verification-compare b,
.verification-compare em,
.verification-compare small {
  display: block;
}

.verification-compare strong,
.verification-compare b {
  overflow: hidden;
  color: var(--ink);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.verification-compare em,
.verification-compare small {
  color: var(--muted);
  font-size: 0.72rem;
  font-style: normal;
  font-weight: 750;
}

.verification-compare span:not(:first-child) {
  text-align: right;
}

.verification-compare-action {
  display: flex;
  justify-content: flex-end;
}

.verification-compare-action button {
  min-height: 30px;
  padding: 0 11px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel-2);
  color: var(--brand);
  cursor: pointer;
  font-size: 0.72rem;
  font-weight: 850;
}

.verification-compare-action button:hover {
  border-color: var(--brand-2);
}

.price-history-panel {
  display: grid;
  gap: 12px;
  margin: 18px 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--panel);
}

.soft-state.compact {
  min-height: auto;
  padding: 14px;
}

.price-history-chart {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18px, 1fr));
  align-items: end;
  gap: 6px;
  min-height: 132px;
  padding: 10px 8px 6px;
  border: 1px solid var(--line-2);
  border-bottom: 2px solid var(--line);
  border-radius: 12px;
  background: var(--panel-2);
}

.history-bar {
  display: grid;
  grid-template-rows: 1fr auto;
  align-items: end;
  gap: 6px;
  min-width: 0;
  height: 112px;
}

.history-bar i {
  display: block;
  min-height: 16px;
  width: 100%;
  border-radius: 999px 999px 4px 4px;
  background: linear-gradient(180deg, var(--brand) 0%, var(--go) 100%);
}

.history-bar em {
  overflow: hidden;
  color: var(--muted);
  font-size: 0.64rem;
  font-style: normal;
  font-weight: 800;
  text-align: center;
  text-overflow: clip;
  white-space: nowrap;
}

.history-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.history-metrics article {
  display: grid;
  gap: 3px;
  padding: 10px;
  border: 1px solid var(--line-2);
  border-radius: 10px;
  background: var(--panel-2);
}

.history-metrics span,
.history-provider-row em,
.history-provider-row small {
  color: var(--muted);
  font-size: 0.76rem;
  font-style: normal;
  font-weight: 750;
}

.history-metrics b,
.history-provider-row strong,
.history-provider-row b {
  color: var(--ink);
}

.history-provider-list {
  display: grid;
  gap: 8px;
}

.history-provider-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--line-2);
  border-radius: 10px;
  background: var(--panel-2);
}

.history-provider-row span {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.history-provider-row span:last-child {
  text-align: right;
}

.provider-price-row {
  width: 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(64px, 0.65fr) minmax(86px, max-content);
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--line-2);
  border-radius: 12px;
  background: var(--panel-2);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.provider-price-row:hover {
  border-color: rgba(0, 59, 149, 0.24);
}

.provider-price-row:disabled {
  cursor: wait;
  opacity: 0.72;
}

.provider-price-row.best {
  border-color: rgba(0, 169, 145, 0.32);
  background: var(--go-soft);
}

.provider-price-row strong,
.provider-price-row b,
.provider-price-row small,
.provider-price-row em {
  display: block;
}

.provider-price-row strong,
.provider-price-row b {
  color: var(--ink);
}

.provider-price-row b {
  font-size: 1.12rem;
  text-align: right;
  white-space: nowrap;
}

.company-cell {
  min-width: 0;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
}

.company-cell > small {
  grid-column: 1 / -1;
  color: var(--warn);
  font-size: 0.74rem;
}

.company-cell strong,
.company-cell small,
.company-cell em {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.company-cell small,
.company-cell em,
.price-cell small {
  color: var(--muted);
  font-size: 0.76rem;
  font-style: normal;
}

.company-cell .provider-row-confidence.high {
  color: var(--go-dark);
}

.company-cell .provider-row-confidence.medium {
  color: var(--brand);
}

.company-cell .provider-row-confidence.watch {
  color: var(--warn);
}

.company-cell .provider-row-confidence.low {
  color: var(--danger-strong);
}

.company-logo {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
  color: var(--brand);
  font-size: 0.72rem;
  font-weight: 900;
}

.company-logo img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

.company-logo:not(.no-logo) b {
  display: none;
}

.price-cell {
  min-width: 0;
  text-align: right;
  overflow-wrap: anywhere;
}

.price-cell small {
  white-space: normal;
  overflow-wrap: anywhere;
}

.provider-price-row > i {
  min-width: 0;
  height: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--track);
}

.provider-price-row > i em {
  height: 100%;
  display: block;
  border-radius: inherit;
  background: var(--brand);
}

.provider-price-row.best > i em {
  background: var(--go);
}

.provider-offers {
  display: grid;
  gap: 8px;
  padding-top: 4px;
}

.provider-offers-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.provider-offers-head > div {
  min-width: 0;
}

.provider-offers-head button {
  min-height: 32px;
  flex: 0 0 auto;
  padding: 0 11px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel-2);
  color: var(--brand);
  font-weight: 850;
}

.provider-offers-head h4 {
  margin: 0;
  color: var(--ink);
  font-size: 0.92rem;
}

.provider-offers-head span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 750;
}

.provider-offer-row {
  width: 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(86px, max-content);
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--line-2);
  border-radius: 10px;
  background: var(--panel);
  color: inherit;
  font: inherit;
  text-align: left;
}

.provider-offers-list {
  display: grid;
  gap: 8px;
}

.provider-offers-list.expanded {
  max-height: 420px;
  overflow: auto;
  padding-right: 4px;
}

.provider-offer-row:hover {
  border-color: rgba(0, 59, 149, 0.24);
  background: var(--panel-2);
}

.provider-offer-row:disabled {
  cursor: wait;
  opacity: 0.72;
}

.provider-offer-row strong,
.provider-offer-row b,
.provider-offer-row small,
.provider-offer-row em {
  display: block;
}

.provider-offer-row strong,
.provider-offer-row b {
  color: var(--ink);
}

.provider-offer-row small,
.provider-offer-row em {
  overflow: hidden;
  color: var(--muted);
  font-size: 0.76rem;
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.route-disclosure {
  margin: 18px 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--panel-2);
}

.route-toggle {
  width: 100%;
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 14px;
  border: 0;
  background: transparent;
  color: var(--ink);
  text-align: left;
}

.route-toggle > span {
  min-width: 0;
  display: grid;
  grid-template-columns: 22px minmax(0, auto);
  column-gap: 10px;
  align-items: center;
}

.route-toggle svg {
  width: 19px;
  height: 19px;
}

.route-toggle b {
  font-size: 0.96rem;
}

.route-toggle em {
  grid-column: 2;
  overflow: hidden;
  color: var(--muted);
  font-size: 0.82rem;
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.route-disclosure.open .route-toggle > svg:last-child {
  transform: rotate(180deg);
}

.route-panel {
  display: grid;
  gap: 14px;
  padding: 0 14px 14px;
  border-top: 1px solid var(--line-2);
}

.route-steps {
  display: grid;
  gap: 10px;
}

.route-step {
  position: relative;
  display: grid;
  grid-template-columns: 16px 1fr;
  gap: 10px;
}

.route-step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 18px;
  left: 7px;
  width: 2px;
  height: calc(100% + 2px);
  background: var(--line);
}

.step-dot {
  position: relative;
  z-index: 1;
  width: 16px;
  height: 16px;
  margin-top: 2px;
  border: 3px solid #fff;
  border-radius: 999px;
  background: var(--brand);
  box-shadow: 0 0 0 1px var(--line);
}

.step-dot.end {
  background: var(--go);
}

.route-step strong,
.route-step em,
.route-step small {
  display: block;
}

.route-step strong {
  color: var(--ink);
}

.route-step em,
.route-step small {
  color: var(--muted);
  font-size: 0.83rem;
  font-style: normal;
}

.modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 3;
  width: 38px;
  height: 38px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-raised);
  color: var(--ink);
}

.compare-modal {
  padding: 22px;
}

.compare-modal h2 {
  margin-bottom: 16px;
}

.compare-card {
  display: grid;
  gap: 14px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
}

.compare-card.verified {
  border-color: color-mix(in srgb, var(--ok) 34%, var(--line));
}

.compare-card.risky {
  border-color: color-mix(in srgb, var(--danger) 28%, var(--line));
}

.compare-card header {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.compare-card header span,
.compare-card header em {
  overflow: hidden;
  color: var(--muted);
  font-size: 0.82rem;
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.compare-card strong {
  display: block;
  color: var(--ink);
  font-size: 1.6rem;
}

.compare-card dl {
  display: grid;
  gap: 8px;
  margin: 0;
}

.compare-card dl div {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding-top: 8px;
  border-top: 1px solid var(--line-2);
}

.compare-card dt {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.compare-card dd {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
  color: var(--ink);
  font-size: 0.88rem;
  font-weight: 750;
}

.compare-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.compare-card footer {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.toast-stack {
  position: fixed;
  top: 84px;
  right: 20px;
  z-index: 100;
  display: grid;
  gap: 8px;
  width: min(360px, calc(100vw - 40px));
  pointer-events: none;
}

.toast {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--brand);
  border-radius: 12px;
  background: var(--surface-raised);
  color: var(--text);
  box-shadow: var(--shadow);
  pointer-events: auto;
}

.toast span {
  min-width: 0;
  color: inherit;
  font-weight: 780;
}

.toast.success { border-left-color: var(--go); }
.toast.warn { border-left-color: var(--warn); }
.toast.error { border-left-color: var(--danger); }
.toast button {
  margin-left: auto;
  border: 0;
  background: transparent;
  color: var(--muted);
}

.footer {
  width: min(var(--container), calc(100vw - 32px));
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin: 0 auto;
  padding: 28px 0 40px;
  border-top: 1px solid var(--line-2);
  color: var(--muted);
  font-size: 0.88rem;
}

.airport-marker {
  min-width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
  border: 2px solid #fff;
  border-radius: 999px;
  background: var(--brand);
  color: #fff;
  font-size: 0.76rem;
  font-weight: 800;
  box-shadow: 0 8px 18px rgba(0, 59, 149, 0.24);
  cursor: pointer;
}

.airport-marker.origin {
  background: var(--go);
}

.airport-marker.destination {
  background: #f59e0b;
}

.price-map-anchor {
  width: 0;
  height: 0;
}

.price-map-bubble {
  position: absolute;
  left: 0;
  top: 0;
  min-width: 104px;
  height: 48px;
  display: inline-grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
  box-sizing: border-box;
  padding: 7px 9px 8px 11px;
  border: 2px solid rgba(255, 255, 255, 0.96);
  border-radius: 15px;
  background: #fff;
  color: #102033;
  font: inherit;
  text-align: left;
  appearance: none;
  cursor: pointer;
  transform: translate(calc(-50% + var(--bubble-shift-x, 0px)), calc(-50% + var(--bubble-shift-y, 0px)));
  box-shadow: 0 14px 30px rgba(16, 32, 51, 0.22), 0 0 0 1px rgba(0, 59, 149, 0.10);
}

.price-map-bubble::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -7px;
  width: 12px;
  height: 12px;
  border-right: 2px solid rgba(255, 255, 255, 0.96);
  border-bottom: 2px solid rgba(255, 255, 255, 0.96);
  background: #fff;
  transform: translateX(-50%) rotate(45deg);
}

.price-map-bubble strong {
  position: relative;
  z-index: 1;
  color: #003b95;
  font-size: 1rem;
  font-weight: 950;
  line-height: 1;
  white-space: nowrap;
}

.price-map-bubble span {
  position: relative;
  z-index: 1;
  padding: 4px 6px;
  border-radius: 999px;
  background: #f4f7fb;
  color: #102033;
  font-size: 0.62rem;
  font-weight: 900;
  line-height: 1;
}

.price-map-bubble.best {
  min-width: 112px;
  height: 52px;
  border-color: rgba(0, 98, 227, 0.3);
  background: linear-gradient(180deg, #ffffff 0%, #eff6ff 100%);
  box-shadow: 0 18px 38px rgba(0, 59, 149, 0.24), 0 0 0 1px rgba(0, 98, 227, 0.16);
}

.price-map-bubble.best strong {
  font-size: 1.18rem;
}

.price-map-bubble.compact:not(:hover):not(:focus-visible):not(:focus-within) {
  min-width: 74px;
  height: 40px;
  grid-template-columns: 1fr;
  padding: 7px 10px;
  border-radius: 13px;
}

.price-map-bubble.compact:not(:hover):not(:focus-visible):not(:focus-within) span {
  display: none;
}

.price-map-bubble.compact:not(:hover):not(:focus-visible):not(:focus-within) strong {
  font-size: 0.92rem;
  justify-self: center;
  max-width: none;
}

.price-map-bubble:hover,
.price-map-bubble:focus-visible {
  z-index: 2;
  border-color: #fff;
  outline: none;
  transform: translate(calc(-50% + var(--bubble-shift-x, 0px)), calc(-50% + var(--bubble-shift-y, 0px) - 2px));
  box-shadow: 0 20px 42px rgba(16, 32, 51, 0.28), 0 0 0 1px rgba(0, 98, 227, 0.16);
}

.explore-price-anchor {
  width: 0;
  height: 0;
}

.explore-price-marker {
  position: absolute;
  left: 0;
  top: 0;
  width: 132px;
  min-width: 132px;
  max-width: 132px;
  min-height: 68px;
  display: inline-grid;
  box-sizing: border-box;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: 12px 28px 14px;
  align-content: center;
  column-gap: 10px;
  row-gap: 1px;
  padding: 9px 13px 10px;
  border: 3px solid rgba(255, 255, 255, 0.96);
  border-radius: 20px;
  background: #ffffff;
  color: #102033;
  font: inherit;
  text-align: left;
  appearance: none;
  cursor: pointer;
  transform: translate(calc(-50% + var(--bubble-shift-x, 0px)), calc(-50% + var(--bubble-shift-y, 0px)));
  box-shadow: 0 16px 34px rgba(16, 32, 51, 0.22), 0 0 0 1px rgba(0, 59, 149, 0.10);
}

.explore-price-marker::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -9px;
  width: 16px;
  height: 16px;
  border-right: 3px solid rgba(255, 255, 255, 0.96);
  border-bottom: 3px solid rgba(255, 255, 255, 0.96);
  background: #fff;
  transform: translateX(-50%) rotate(45deg);
  box-shadow: 8px 8px 16px rgba(16, 32, 51, 0.08);
}

.explore-price-marker span,
.explore-price-marker em {
  position: relative;
  z-index: 1;
  color: #66758a;
  font-size: 0.62rem;
  font-style: normal;
  font-weight: 850;
  line-height: 1;
}

.explore-price-marker strong {
  position: relative;
  z-index: 1;
  grid-column: 1;
  grid-row: 2;
  align-self: center;
  color: #003b95;
  font-size: 1.42rem;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
}

.explore-price-marker .marker-price-label {
  grid-column: 1;
  grid-row: 1;
  align-self: end;
  text-transform: uppercase;
}

.explore-price-marker .marker-city-label {
  grid-column: 1;
  grid-row: 3;
  max-width: 84px;
  align-self: start;
  overflow: hidden;
  color: #26364a;
  font-size: 0.66rem;
  font-weight: 800;
  line-height: 1.05;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.explore-price-marker em {
  grid-column: 2;
  grid-row: 1 / 4;
  align-self: center;
  justify-self: end;
  padding: 6px 8px;
  border-radius: 999px;
  background: #f4f7fb;
  color: #102033;
  font-size: 0.66rem;
  text-transform: uppercase;
}

.explore-price-marker:hover {
  border-color: #fff;
  transform: translate(calc(-50% + var(--bubble-shift-x, 0px)), calc(-50% + var(--bubble-shift-y, 0px) - 2px));
  box-shadow: 0 20px 38px rgba(16, 32, 51, 0.28), 0 0 0 1px rgba(0, 59, 149, 0.14);
}

.explore-price-marker.best {
  border-color: rgba(0, 98, 227, 0.3);
  background: linear-gradient(180deg, #ffffff 0%, #f2f7ff 100%);
  box-shadow: 0 20px 38px rgba(0, 59, 149, 0.22), 0 0 0 1px rgba(0, 98, 227, 0.18);
}

.explore-price-marker.compact:not(:hover):not(:focus-visible):not(:focus-within) {
  min-width: 86px;
  max-width: 96px;
  min-height: 52px;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: 24px;
  column-gap: 6px;
  padding: 8px 9px;
  border-width: 2px;
  border-radius: 16px;
  transform: translate(calc(-50% + var(--bubble-shift-x, 0px)), calc(-50% + var(--bubble-shift-y, 0px)));
  box-shadow: 0 12px 26px rgba(16, 32, 51, 0.2), 0 0 0 1px rgba(0, 59, 149, 0.08);
}

.explore-price-marker.compact:not(:hover):not(:focus-visible):not(:focus-within)::after {
  bottom: -7px;
  width: 12px;
  height: 12px;
  border-width: 2px;
}

.explore-price-marker.compact:not(:hover):not(:focus-visible):not(:focus-within) .marker-price-label,
.explore-price-marker.compact:not(:hover):not(:focus-visible):not(:focus-within) .marker-city-label {
  display: none;
}

.explore-price-marker.compact:not(:hover):not(:focus-visible):not(:focus-within) strong {
  grid-column: 1;
  grid-row: 1;
  font-size: 1.02rem;
}

.explore-price-marker.compact:not(:hover):not(:focus-visible):not(:focus-within) em {
  grid-column: 2;
  grid-row: 1;
  padding: 4px 5px;
  font-size: 0.56rem;
}

.explore-price-marker:focus-visible {
  outline: 3px solid rgba(0, 98, 227, 0.34);
  outline-offset: 3px;
}

.airport-marker.layover {
  background: var(--warn);
}

.maplibregl-popup-content {
  padding: 10px 12px !important;
  overflow: hidden;
  border-radius: 12px !important;
  box-shadow: 0 18px 44px rgba(16, 32, 51, 0.2) !important;
  color: #102033;
  font-family: Inter, system-ui, sans-serif;
}

.explore-map-popup .maplibregl-popup-content {
  padding: 0 !important;
  border-radius: 16px !important;
}

.price-map-popup .maplibregl-popup-content {
  padding: 0 !important;
  border-radius: 16px !important;
}

.price-map-popup-card {
  min-width: 166px;
  display: grid;
  gap: 6px;
  padding: 12px 13px;
  background: #fff;
  color: #102033;
}

.price-map-popup-card span,
.price-map-popup-card em {
  color: #66758a;
  font-size: 0.72rem;
  font-style: normal;
  font-weight: 800;
}

.price-map-popup-card span {
  text-transform: uppercase;
}

.price-map-popup-card strong {
  color: #003b95;
  font-size: 1.8rem;
  font-weight: 950;
  line-height: 1;
}

.price-map-popup-card p {
  margin: 0;
  color: #102033;
  font-size: 0.92rem;
  font-weight: 850;
}

.price-map-popup-card b {
  display: inline-flex;
  margin-left: 5px;
  padding: 2px 6px;
  border-radius: 999px;
  background: #f4f7fb;
  font-size: 0.7rem;
}

.explore-popup {
  min-width: 190px;
  display: grid;
  gap: 7px;
  padding: 13px 14px 12px;
  background: #fff;
  color: #102033;
}

.explore-popup-price {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
}

.explore-popup small,
.explore-popup span,
.explore-popup em {
  color: #66758a;
  font-size: 0.72rem;
  font-style: normal;
  font-weight: 750;
}

.explore-popup small {
  text-transform: uppercase;
}

.explore-popup strong {
  color: #003b95;
  font-size: 2rem;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
}

.explore-popup p {
  margin: 0;
  color: #102033;
  font-size: 0.94rem;
  font-weight: 800;
}

.explore-popup p b {
  display: inline-flex;
  margin-left: 5px;
  padding: 2px 6px;
  border-radius: 999px;
  background: #f4f7fb;
  font-size: 0.72rem;
}

.plane-marker {
  position: relative;
  width: 24px;
  height: 24px;
  filter: drop-shadow(0 2px 5px rgba(16, 32, 51, 0.34));
}

.plane-marker svg {
  width: 100%;
  height: 100%;
  display: block;
  transform: rotate(var(--plane-heading, 0deg));
  transform-origin: center;
}

@media (max-width: 1180px) {
  .results-layout {
    grid-template-columns: minmax(220px, 260px) minmax(0, 1fr);
  }

  .results-list.rows .flight-main {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .results-list.rows .flight-main .timeline {
    grid-column: 1 / -1;
  }

  .results-list.rows .price-block {
    text-align: right;
  }

  .flight-actions {
    margin-left: 0;
  }

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

/* ── Mobile results workspace ──────────────────────────────────────
   Search editing and the full filter catalogue remain one tap away without
   forcing the result list below a long form/sidebar. The mobile sheet becomes
   a side drawer on tablets and a thumb-friendly bottom sheet on phones. */
.mobile-query-summary,
.mobile-filter-trigger,
.filters-sheet-backdrop,
.filters-sheet-close,
.filters-sheet-actions {
  display: none;
}

.mobile-query-summary,
.mobile-filter-trigger {
  min-height: 44px;
  border: 1px solid var(--line);
  background: var(--surface-raised);
  color: var(--ink);
  font: inherit;
  font-weight: 850;
}

.mobile-query-summary:focus-visible,
.mobile-filter-trigger:focus-visible,
.filters-sheet .filters-head button:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--brand) 30%, transparent);
  outline-offset: 2px;
}

@media (max-width: 980px) {
  body.filters-sheet-open {
    overflow: hidden;
    overscroll-behavior: none;
  }

  .search-page--active .search-panel.search-panel--mobile-collapsed {
    padding: 7px;
  }

  .search-panel--mobile-collapsed > :not(.mobile-query-summary) {
    display: none !important;
  }

  .mobile-query-summary {
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 4px 5px 4px 11px;
    border-color: color-mix(in srgb, var(--brand) 18%, var(--line));
    border-radius: 13px;
    background:
      linear-gradient(135deg, color-mix(in srgb, var(--brand-soft) 58%, var(--panel)), var(--panel));
    text-align: left;
    cursor: pointer;
  }

  .mobile-query-summary > div,
  .mobile-query-summary__route,
  .mobile-query-summary__meta,
  .mobile-query-summary__toggle > span {
    min-width: 0;
  }

  .mobile-query-summary strong,
  .mobile-query-summary span,
  .mobile-query-summary small {
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .mobile-query-summary strong {
    display: block;
    color: var(--ink);
    font-size: 0.98rem;
    line-height: 1.25;
    white-space: nowrap;
  }

  .mobile-query-summary small,
  .mobile-query-summary__meta {
    display: block;
    margin-top: 2px;
    color: var(--muted);
    font-size: 0.76rem;
    font-weight: 750;
    line-height: 1.25;
    white-space: nowrap;
  }

  .mobile-query-summary__toggle {
    min-width: 40px;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 0 10px;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: var(--surface-raised);
    color: var(--brand);
    white-space: nowrap;
    transition:
      transform var(--motion-fast) var(--ease-standard),
      border-color var(--motion-base) ease,
      background-color var(--motion-base) ease;
  }

  .mobile-query-summary__toggle svg,
  .mobile-filter-trigger svg {
    width: 17px;
    height: 17px;
    flex: 0 0 auto;
  }

  .mobile-filter-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 0 13px;
    border-radius: 999px;
    color: var(--brand);
    white-space: nowrap;
    transition:
      transform var(--motion-fast) var(--ease-standard),
      border-color var(--motion-base) ease,
      background-color var(--motion-base) ease,
      box-shadow var(--motion-base) ease;
  }

  .mobile-filter-trigger[aria-expanded="true"],
  .mobile-filter-trigger.has-active-filters {
    border-color: color-mix(in srgb, var(--brand) 36%, var(--line));
    background: var(--brand-soft);
  }

  .mobile-filter-trigger b,
  .mobile-filter-trigger .filter-count,
  .mobile-filter-trigger .mobile-filter-count {
    min-width: 21px;
    height: 21px;
    display: inline-grid;
    place-items: center;
    padding-inline: 5px;
    border-radius: 999px;
    background: var(--brand);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 900;
    line-height: 1;
  }

  .filters-sheet-backdrop {
    position: fixed;
    inset: 0;
    z-index: 78;
    display: block;
    padding: 0;
    border: 0;
    background: rgba(8, 20, 35, 0.52);
    backdrop-filter: blur(5px);
    touch-action: none;
  }

  .results-layout > .filters-card.filters-sheet {
    position: fixed;
    inset: 0 0 0 auto;
    z-index: 79;
    order: initial;
    width: min(430px, 90vw);
    height: 100dvh;
    max-height: none;
    margin: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 0 18px max(22px, env(safe-area-inset-bottom));
    border: 0;
    border-left: 1px solid var(--line);
    border-radius: 24px 0 0 24px;
    background: var(--panel);
    box-shadow: -22px 0 60px rgba(8, 20, 35, 0.22);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate3d(104%, 0, 0);
    transition:
      transform 300ms var(--ease-emphasized),
      opacity 180ms ease,
      visibility 0s linear 300ms;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
  }

  .results-layout > .filters-card.filters-sheet.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate3d(0, 0, 0);
    transition-delay: 0s;
  }

  .filters-sheet .filters-head {
    position: sticky;
    top: 0;
    z-index: 2;
    min-height: 72px;
    margin: 0 -18px 6px;
    padding: max(14px, env(safe-area-inset-top)) 18px 12px;
    border-bottom: 1px solid var(--line-2);
    background: color-mix(in srgb, var(--panel) 94%, transparent);
    box-shadow: 0 8px 18px color-mix(in srgb, var(--ink) 5%, transparent);
    backdrop-filter: blur(18px) saturate(140%);
  }

  .filters-sheet .filters-head h3 {
    font-size: 1.18rem;
  }

  .filters-sheet .filters-head button {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 0 11px;
    border-radius: 10px;
  }

  .filters-sheet .filters-sheet-close {
    width: auto;
    flex: 0 0 auto;
    padding-inline: 10px;
    border-color: var(--line);
    color: var(--ink);
  }

  .filters-sheet .filters-sheet-close svg {
    width: 18px;
    height: 18px;
  }

  .filters-sheet .filter-group {
    padding-block: 10px;
  }

  .filters-sheet label {
    min-height: 44px;
    padding-block: 9px;
  }

  .filters-sheet .filter-pill-grid button {
    min-height: 42px;
  }

  .filters-sheet input[type="checkbox"],
  .filters-sheet input[type="radio"] {
    width: 18px;
    height: 18px;
    accent-color: var(--brand);
  }

  .filters-sheet input[type="range"] {
    min-height: 30px;
    accent-color: var(--brand);
  }

  .filters-sheet-actions {
    position: sticky;
    bottom: calc(-1 * max(22px, env(safe-area-inset-bottom)));
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    margin: 10px -18px calc(-1 * max(22px, env(safe-area-inset-bottom)));
    padding: 12px 18px max(14px, env(safe-area-inset-bottom));
    border-top: 1px solid var(--line-2);
    background: color-mix(in srgb, var(--panel) 95%, transparent);
    box-shadow: 0 -10px 24px color-mix(in srgb, var(--ink) 7%, transparent);
    backdrop-filter: blur(18px) saturate(140%);
  }

  .filters-sheet-actions > button {
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 0 18px;
    border: 1px solid var(--brand);
    border-radius: 13px;
    background: var(--brand);
    color: #fff;
    font: inherit;
    font-weight: 900;
  }

  /* The result list owns the canvas on mobile; the off-canvas filters should
     never reserve a second grid row or create horizontal scroll. */
  .results-layout {
    min-width: 0;
    display: block;
  }

  .results-list {
    width: 100%;
    min-width: 0;
  }

  .search-page--active .results-commandbar {
    overflow: hidden;
    padding: 9px;
  }

  .quick-filter-row,
  .active-filter-row {
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--brand) 30%, transparent) transparent;
  }

  .quick-filter-row {
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
  }

  .quick-filter-button {
    min-height: 46px;
  }

  .flight-card {
    border-radius: 16px;
  }

  .results-layout .flight-meta {
    align-items: center;
    flex-direction: row;
    gap: 7px;
  }

  .flight-meta > span {
    max-width: 100%;
    white-space: normal;
  }

  .flight-meta .deal-chip,
  .flight-meta .layover-chip,
  .flight-meta .booking-options-chip,
  .flight-meta .risk-chip,
  .flight-meta .provider-confidence-chip,
  .flight-meta .carbon-chip,
  .flight-meta .price-tier-chip,
  .flight-meta .value-chip,
  .flight-meta .freshness-chip {
    padding: 5px 8px;
    font-size: 0.76rem;
  }
}

@media (max-width: 680px) {
  .search-page--active .result-actions > .mobile-filter-trigger {
    grid-column: 1 / -1;
    width: 100%;
  }

  .results-layout > .filters-card.filters-sheet {
    inset: auto 0 0;
    width: 100%;
    height: auto;
    max-height: min(82dvh, 760px);
    padding: 0 14px max(18px, env(safe-area-inset-bottom));
    border: 1px solid var(--line);
    border-bottom: 0;
    border-radius: 24px 24px 0 0;
    box-shadow: 0 -24px 60px rgba(8, 20, 35, 0.24);
    transform: translate3d(0, calc(100% + 18px), 0);
  }

  .results-layout > .filters-card.filters-sheet::before {
    content: "";
    position: sticky;
    top: 7px;
    z-index: 4;
    width: 42px;
    height: 4px;
    display: block;
    margin: 7px auto -11px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--muted) 48%, transparent);
    pointer-events: none;
  }

  .results-layout > .filters-card.filters-sheet.is-open {
    transform: translate3d(0, 0, 0);
  }

  .filters-sheet .filters-head {
    min-height: 66px;
    margin: 0 -14px 5px;
    padding: 19px 14px 10px;
  }

  .filters-sheet-actions {
    bottom: calc(-1 * max(18px, env(safe-area-inset-bottom)));
    margin-inline: -14px;
    margin-bottom: calc(-1 * max(18px, env(safe-area-inset-bottom)));
    padding-inline: 14px;
  }

  .mobile-query-summary {
    gap: 6px;
  }

  .result-trust-metrics {
    display: flex;
    overflow-x: auto;
    gap: 7px;
    padding-bottom: 2px;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }

  .result-trust-metrics::-webkit-scrollbar,
  .quick-filter-row::-webkit-scrollbar {
    display: none;
  }

  .result-trust-metrics span,
  .result-trust-metrics span:first-child {
    min-width: 132px;
    grid-column: auto;
    flex: 0 0 auto;
    padding: 7px 9px;
    scroll-snap-align: start;
  }

  .quick-filter-button {
    min-width: 138px;
  }

  .search-page--active .flight-main {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "airline price"
      "timeline timeline";
    align-items: start;
    gap: 13px 10px;
    padding: 14px;
  }

  .search-page--active .airline-block {
    grid-area: airline;
    gap: 9px;
  }

  .search-page--active .airline-avatar {
    width: 34px;
    height: 34px;
    border-radius: 9px;
  }

  .search-page--active .timeline {
    grid-area: timeline;
    grid-template-columns: auto minmax(64px, 1fr) auto;
    gap: 8px;
    width: 100%;
    padding-top: 11px;
    border-top: 1px solid var(--line-2);
  }

  .search-page--active .timeline strong {
    font-size: 1.08rem;
  }

  .search-page--active .timeline .line {
    gap: 3px;
  }

  .search-page--active .timeline .line em,
  .search-page--active .timeline span {
    font-size: 0.72rem;
  }

  .search-page--active .price-block {
    grid-area: price;
    min-width: 0;
    text-align: right;
  }

  .search-page--active .price-block strong {
    font-size: 1.5rem;
  }

  .search-page--active .price-block span,
  .search-page--active .price-block small {
    font-size: 0.72rem;
  }

  .search-page--active .flight-meta {
    padding: 10px 14px 13px;
  }

  .search-page--active .flight-actions {
    display: grid;
    grid-template-columns: repeat(3, 40px) minmax(0, 1fr);
    gap: 7px;
    width: 100%;
    margin: 3px 0 0;
  }

  .search-page--active .flight-actions .icon-button {
    width: 40px;
    min-height: 40px;
  }

  .search-page--active .flight-actions .secondary-action {
    min-width: 0;
    min-height: 40px;
    padding-inline: 9px;
  }

  .search-page--active .flight-actions .primary-action {
    grid-column: 1 / -1;
    width: 100%;
    min-height: 46px;
  }

  .flight-card[data-section-label]:not([data-section-label=""]) {
    margin-top: 31px;
  }

  .flight-card[data-section-label]:not([data-section-label=""])::before {
    top: -24px;
    max-width: 100%;
    overflow: hidden;
    font-size: 0.84rem;
    text-overflow: ellipsis;
  }
}

@media (max-width: 420px) {
  .mobile-query-summary__toggle span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .mobile-filter-trigger {
    padding-inline: 11px;
  }

  .mobile-filter-trigger > span:not(.filter-count):not(.mobile-filter-count) {
    max-width: 86px;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .search-page--active .airline-block strong {
    max-width: 132px;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .filters-sheet-backdrop {
    animation: ui-fade-in 180ms ease both;
  }

  .mobile-query-summary {
    animation: ui-drop-in 220ms var(--ease-emphasized) both;
  }
}

@media (prefers-reduced-motion: reduce) {
  .results-layout > .filters-card.filters-sheet {
    transition: none !important;
  }

  .filters-sheet-backdrop {
    backdrop-filter: none;
  }
}

@media (max-width: 980px) {
  .topbar {
    grid-template-columns: auto 1fr auto;
    gap: 10px;
  }

  .topnav {
    position: static;
    justify-self: center;
    justify-content: space-between;
    max-width: 100%;
    box-shadow: none;
  }

  .topnav button {
    justify-content: center;
    min-width: 40px;
    padding: 0 10px;
  }

  .topnav button span {
    display: none;
  }

  .top-actions .ghost-action {
    display: none;
  }

  .language-control {
    width: 38px;
    justify-content: center;
    padding: 0;
  }

  .language-control select {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    min-width: 100%;
    height: 100%;
    opacity: 0;
  }

  .search-hero,
  .panel-top,
  .result-status,
  .section-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .result-actions {
    justify-content: flex-start;
  }

  .search-progress-head {
    align-items: stretch;
    flex-direction: column;
  }

  .search-progress-head small {
    white-space: normal;
  }

  .search-progress-head b {
    width: max-content;
  }

  .search-progress-steps {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .search-progress-steps span {
    justify-content: flex-start;
    min-width: 0;
  }

  .search-progress-steps b {
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .hero-metrics {
    justify-content: flex-start;
  }

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

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

  .dashboard-health-drivers {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }

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

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

  .dashboard-wide {
    grid-column: auto;
  }

  .user-dashboard,
  .user-lists {
    grid-template-columns: 1fr;
  }

  .search-grid,
  .results-layout {
    grid-template-columns: 1fr;
  }

  .month-picker-grid,
  .calendar-controls,
  .last-minute-card {
    grid-template-columns: 1fr;
  }

  .calendar-trip-toggle,
  .calendar-month-strip,
  .calendar-refresh {
    width: 100%;
  }

  .calendar-month-strip {
    justify-content: flex-start;
  }

  .calendar-summary {
    align-items: flex-start;
    flex-direction: column;
  }

  .calendar-legend {
    justify-content: flex-start;
  }

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

  .live-map-toolbar {
    left: 10px;
    right: 10px;
    top: 10px;
  }

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

  .live-deals-head {
    grid-column: 1 / -1;
  }

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

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

  .multi-builder-head,
  .multi-range {
    grid-template-columns: 1fr;
  }

  .multi-builder-head {
    align-items: stretch;
    flex-direction: column;
  }

  .multi-stops,
  .results-list.cards,
  .complex-trip-grid.cards,
  .combo-grid.cards {
    grid-template-columns: 1fr;
  }

  .results-commandbar {
    top: 72px;
    padding: 8px;
  }

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

  .result-trust-metrics span:first-child {
    grid-column: 1 / -1;
  }

  .quick-filter-row {
    display: flex;
    overflow-x: auto;
    padding-bottom: 2px;
    scroll-snap-type: x proximity;
  }

  .quick-filter-button {
    min-width: 148px;
    scroll-snap-align: start;
  }

  .decision-panel article {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .decision-panel button {
    grid-column: 1 / -1;
    justify-self: start;
  }

  .filters-card {
    position: static;
    order: 2;
  }

  .results-list {
    order: 1;
  }

  .mini-map-card {
    display: none;
  }

  .flight-main,
  .flight-meta {
    align-items: stretch;
    flex-direction: column;
  }

  .results-list.rows .flight-card {
    grid-template-columns: 1fr;
  }

  .results-list.rows .flight-photo {
    width: 100%;
    height: 132px;
    min-height: 0;
    grid-row: auto;
  }

  .combo-grid.rows .combo-card {
    grid-template-columns: 1fr;
  }

  .combo-grid.rows .combo-photo,
  .combo-photo {
    height: 128px;
    min-height: 0;
  }

  .combo-grid.rows .combo-legs {
    grid-template-columns: 1fr;
  }

  .flight-actions {
    width: 100%;
    justify-content: flex-start;
  }

  .flight-meta > span {
    white-space: normal;
  }

  .detail-insights,
  .provider-price-row {
    grid-template-columns: 1fr;
  }

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

  .verification-compare-head {
    display: none;
  }

  .verification-compare article > span:first-child {
    grid-column: 1 / -1;
  }

  .verification-compare article > .verification-compare-action {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }

  .verification-compare span:not(:first-child) {
    text-align: left;
  }

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

  .provider-price-row b {
    text-align: left;
  }

  .timeline {
    grid-template-columns: auto minmax(80px, 1fr) auto;
  }

  .price-block {
    min-width: 0;
    text-align: left;
  }

  .search-options button {
    margin-left: 0;
  }

  .explore-form {
    width: 100%;
    align-items: stretch;
    flex-direction: column;
  }

  .explore-summary {
    align-items: stretch;
    flex-direction: column;
  }

  .explore-summary-metrics {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .explore-summary-metrics article {
    min-width: 0;
  }

  .explore-toolbar,
  .explore-filterbar {
    align-items: stretch;
    flex-direction: column;
  }

  .explore-toolbar .sort-tabs {
    width: 100%;
    justify-content: space-between;
  }

  .explore-toolbar .sort-tabs button {
    flex: 1;
    justify-content: center;
    padding-left: 8px;
    padding-right: 8px;
  }

  .explore-filter-tabs,
  .explore-price-filter,
  .explore-clear-filters {
    width: 100%;
  }

  .explore-filter-tabs button {
    flex: 1;
  }

  .explore-price-filter {
    justify-content: space-between;
  }

  .footer {
    padding-bottom: 40px;
  }
}

@media (max-width: 560px) {
  body {
    background: var(--bg);
  }

  .page {
    width: calc(100vw - 28px);
    padding-top: 26px;
  }

  h1 {
    font-size: 2.55rem;
  }

  .hero-metrics {
    display: none;
  }

  .topbar {
    height: 64px;
    gap: 6px;
    padding-left: 10px;
    padding-right: 10px;
  }

  .brand {
    gap: 8px;
  }

  .brand span:last-child {
    display: none;
  }

  .topnav {
    gap: 2px;
    padding: 3px;
  }

  .topnav button {
    min-width: 36px;
    padding: 0 6px;
  }

  .topnav button span {
    display: none;
  }

  .topnav b {
    position: absolute;
    top: -4px;
    right: -3px;
  }

  .top-actions {
    gap: 4px;
  }

  .icon-action,
  .language-control {
    width: 34px;
    min-height: 34px;
  }

  .search-panel {
    padding: 16px;
  }

  .segmented {
    width: 100%;
  }

  .segmented label {
    flex: 1;
    justify-content: center;
  }

  .passenger-pill {
    width: 100%;
    justify-content: center;
  }

  .passenger-control {
    width: 100%;
  }

  .passenger-menu {
    left: 0;
    right: auto;
    width: 100%;
  }

  .route-box {
    grid-template-columns: 1fr;
  }

  .route-box .airport-field:first-child {
    border-radius: 12px 12px 0 0;
  }

  .route-box .airport-field:last-child {
    border-top: 0;
    border-left: 1px solid var(--line);
    border-radius: 0 0 12px 12px;
  }

  .swap-button {
    position: absolute;
    top: 45px;
    right: calc(50% - 22px);
    height: 44px;
    border: 0;
    background: transparent;
  }

  .flex-settings {
    grid-template-columns: 1fr;
  }

  .flex-date-head {
    align-items: stretch;
    flex-direction: column;
  }

  .mini-segmented button,
  .month-presets button {
    flex: 1 1 auto;
  }

  .price-month-card {
    padding: 14px;
  }

  .calendar-trip-toggle button {
    flex: 1;
  }

  .calendar-best-days {
    align-items: stretch;
  }

  .month-price-grid {
    gap: 4px;
  }

  .month-price-grid button {
    min-height: 64px;
    padding: 7px 5px;
  }

  .month-price-grid button strong {
    font-size: 0.82rem;
  }

  .month-price-grid button em {
    display: none;
  }

  .flight-actions {
    align-items: stretch;
  }

  .history-metrics {
    grid-template-columns: 1fr;
  }

  /* Phones: tighter bars, drop the colliding date labels (the native :title
     tooltip still gives the date on tap-hold). */
  .price-history-chart {
    grid-template-columns: repeat(auto-fit, minmax(10px, 1fr));
    gap: 3px;
  }
  .history-bar { height: 96px; }
  .history-bar em { display: none; }

  .history-provider-row {
    align-items: flex-start;
    flex-direction: column;
  }

  .history-provider-row span:last-child {
    text-align: left;
  }

  .flight-meta .secondary-action,
  .flight-meta .primary-action {
    flex: 1 1 auto;
    min-width: 126px;
  }

  .split-links {
    flex: 1 1 100%;
  }

  .split-links .primary-action {
    flex: 1 1 126px;
  }

  .wide-map {
    height: 330px;
  }

  #hero-map.wide-map,
  #explore-map.wide-map,
  #live-map.wide-map {
    height: 330px;
  }

  /* Match the base rule's specificity (#live-map.wide-map.live) so the
     mobile height actually applies to the live map. */
  #live-map.wide-map.live {
    height: 330px;
    min-height: 330px;
  }

  #hero-map .price-map-bubble {
    min-width: 88px;
    height: 44px;
    padding: 7px 8px 8px 10px;
  }

  #hero-map .price-map-bubble strong {
    font-size: 0.94rem;
  }

  #hero-map .price-map-bubble span {
    padding: 3px 5px;
    font-size: 0.58rem;
  }

  .live-deals-panel {
    grid-template-columns: 1fr;
  }

  .live-map-toolbar {
    position: static;
    align-items: flex-start;
    flex-direction: column;
    margin: 10px;
    border-color: var(--line-2);
    background: var(--panel);
    box-shadow: none;
  }

  .live-deal-card,
  .live-deal-card:not(.observed) {
    grid-template-columns: 74px minmax(0, 1fr);
  }

  .live-deal-card img {
    width: 74px;
    height: 58px;
  }

  .live-deal-card strong {
    white-space: normal;
  }

  .live-deal-card > b {
    grid-column: 2;
    justify-self: start;
  }

  .dashboard-kpi-grid,
  .dashboard-attention-grid,
  .dashboard-next-list {
    grid-template-columns: 1fr;
  }

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

  .dashboard-health-score {
    justify-items: start;
  }

  .dashboard-health-main em {
    white-space: normal;
  }

  .dashboard-next-item {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .dashboard-next-actions {
    grid-column: 1 / -1;
    justify-content: stretch;
  }

  .dashboard-next-action {
    flex: 1 1 auto;
  }

  .dashboard-panel-head {
    align-items: stretch;
    flex-direction: column;
  }

  .dashboard-panel-head button {
    justify-content: center;
  }

  .dashboard-route-filter {
    width: 100%;
    justify-content: space-between;
    border-radius: 14px;
  }

  .dashboard-route-filter button {
    flex: 1 1 auto;
    justify-content: center;
  }

  .dashboard-status-pill {
    justify-content: center;
  }

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

  .dashboard-tier-row {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .dashboard-tier-row i {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .dashboard-route-actions button {
    flex: 1 1 120px;
  }

  .dashboard-deal-row,
  .dashboard-search-list button,
  .dashboard-alert-list article,
  .dashboard-provider-list article {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .dashboard-deal-row > svg,
  .dashboard-search-list button > svg {
    display: none;
  }

  .dashboard-deal-row small,
  .dashboard-search-list small,
  .dashboard-alert-list small,
  .dashboard-provider-list small,
  .dashboard-route-card small,
  .dashboard-attention-item small {
    white-space: normal;
  }

  .provider-status-panel {
    padding: 14px;
  }

  .provider-status-head {
    align-items: stretch;
    flex-direction: column;
  }

  .provider-status-head button {
    justify-content: center;
  }

  .provider-status-grid {
    grid-template-columns: 1fr;
  }

  .integration-status-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .integration-status-actions {
    width: 100%;
    align-items: stretch;
    flex-direction: column;
  }

  .integration-status-actions button {
    justify-content: center;
  }

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

  .user-dashboard,
  .user-lists {
    grid-template-columns: 1fr;
  }

  .user-auth-card {
    grid-template-columns: 1fr;
  }

  .user-auth-signed {
    justify-content: flex-start;
  }

  .user-auth-fields {
    grid-template-columns: 1fr;
  }

  .user-command-main {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .user-command-main p:not(.eyebrow) {
    white-space: normal;
  }

  .user-delivery-pill {
    grid-column: 1 / -1;
    justify-content: center;
  }

  .user-command-actions button {
    flex: 1 1 140px;
  }

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

  .user-form-grid,
  .user-summary-grid {
    grid-template-columns: 1fr;
  }

  .user-card-head {
    align-items: stretch;
    flex-direction: column;
  }

  .user-card-head button {
    justify-content: center;
  }

  .modal-backdrop {
    align-items: end;
    padding: 0;
  }

  .detail-modal,
  .compare-modal {
    width: 100%;
    max-height: 94vh;
    border-radius: 18px 18px 0 0;
  }

  .detail-map {
    height: 220px;
  }

  /* One card per row cost ~340px of scroll before any result. Two columns
     halve that; the labels are short enough to survive the narrower box. */
  .complexity-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .stopover-settings {
    grid-template-columns: 1fr;
  }

  .complex-trip-head {
    display: grid;
    align-items: start;
  }

  .toast-stack {
    top: 76px;
    left: 14px;
    right: 14px;
    width: auto;
  }
}

/* Account settings + traveller preferences */
.user-settings-tabs {
  position: sticky;
  top: 76px;
  z-index: 35;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  margin: 18px 0;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: color-mix(in srgb, var(--panel) 92%, transparent);
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(18px);
}

.user-settings-tabs button {
  min-width: 0;
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 14px;
  border: 1px solid transparent;
  border-radius: 13px;
  background: transparent;
  color: var(--muted);
  font-weight: 850;
}

.user-settings-tabs button:hover {
  background: var(--panel-2);
  color: var(--ink);
}

.user-settings-tabs button.active {
  border-color: rgba(0, 59, 149, 0.18);
  background: var(--brand-soft);
  color: var(--brand);
  box-shadow: 0 1px 2px rgba(16, 32, 51, 0.08);
}

.user-settings-tabs svg {
  width: 18px;
  height: 18px;
}

.user-settings-tabs b {
  min-width: 21px;
  height: 21px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--go);
  color: #fff;
  font-size: 0.72rem;
}

.user-dashboard.single,
.user-section-panels {
  grid-template-columns: minmax(0, 1fr);
}

.traveler-settings-card {
  display: grid;
  gap: 16px;
}

.traveler-settings-intro {
  margin: -4px 0 2px;
  color: var(--muted);
  font-size: 0.92rem;
  font-weight: 650;
}

.traveler-preference-block,
.traveler-advanced-panel {
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--panel-2);
}

.preference-block-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 16px;
}

.preference-block-head > span {
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--brand-soft);
  color: var(--brand);
}

.preference-block-head svg {
  width: 18px;
  height: 18px;
}

.preference-block-head h3,
.preference-block-head p {
  margin: 0;
}

.preference-block-head h3 {
  color: var(--ink);
  font-size: 1rem;
}

.preference-block-head p {
  margin-top: 3px;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 650;
}

.ranking-preset-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.ranking-preset-grid > button {
  min-width: 0;
  min-height: 92px;
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: var(--panel);
  color: var(--text);
  text-align: left;
}

.ranking-preset-grid > button:hover {
  border-color: color-mix(in srgb, var(--brand) 36%, var(--line));
  transform: translateY(-1px);
}

.ranking-preset-grid > button.active {
  border-color: var(--brand);
  background: var(--brand-soft);
  color: var(--brand);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand) 22%, transparent);
}

.ranking-preset-grid > button > svg:first-child {
  width: 20px;
  height: 20px;
  margin-top: 1px;
}

.ranking-preset-grid span {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.ranking-preset-grid b {
  color: var(--ink);
  font-size: 0.88rem;
}

.ranking-preset-grid small {
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 650;
  line-height: 1.35;
}

.ranking-preset-grid .preset-check {
  display: none;
  position: absolute;
  top: 8px;
  right: 8px;
  width: 17px;
  height: 17px;
}

.ranking-preset-grid > button.active .preset-check {
  display: block;
}

.traveler-toggle-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.traveler-toggle {
  min-width: 0;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel);
  cursor: pointer;
}

.traveler-toggle:has(input:checked) {
  border-color: rgba(0, 169, 145, 0.36);
  background: var(--go-soft);
}

.traveler-toggle input {
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
  margin-top: 2px;
  accent-color: var(--go);
}

.traveler-toggle span {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.traveler-toggle b {
  color: var(--ink);
  font-size: 0.82rem;
}

.traveler-toggle small {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 650;
  line-height: 1.35;
}

.traveler-limit-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

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

.traveler-limit-grid label {
  min-width: 0;
  display: grid;
  gap: 6px;
}

.traveler-limit-grid label > span {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 800;
}

.traveler-limit-grid input,
.traveler-limit-grid select,
.airline-picker-control input {
  width: 100%;
  height: 43px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
  color: var(--ink);
  font-weight: 700;
}

.input-with-suffix {
  position: relative;
}

.input-with-suffix input {
  padding-right: 48px;
}

.input-with-suffix small {
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  color: var(--muted);
  font-weight: 800;
}

.airline-preferences-block {
  display: grid;
  gap: 12px;
}

.airline-preferences-block > .preference-block-head {
  margin-bottom: 0;
}

.airline-preference-group {
  display: grid;
  grid-template-columns: minmax(170px, 0.7fr) minmax(270px, 1.3fr);
  align-items: center;
  gap: 12px 16px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: var(--panel);
}

.airline-preference-copy {
  display: grid;
  gap: 3px;
}

.airline-preference-copy b {
  color: var(--ink);
  font-size: 0.86rem;
}

.airline-preference-copy small {
  color: var(--muted);
  font-size: 0.73rem;
  font-weight: 650;
  line-height: 1.35;
}

.airline-picker-control {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}

.airline-picker-control button {
  min-height: 43px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 13px;
  border: 1px solid var(--brand);
  border-radius: 12px;
  background: var(--brand);
  color: #fff;
  font-weight: 850;
}

.airline-picker-control button svg {
  width: 16px;
  height: 16px;
}

.airline-chip-list,
.airline-quick-list {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.airline-choice-chip {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 5px 4px 8px;
  border: 1px solid rgba(0, 169, 145, 0.28);
  border-radius: 999px;
  background: var(--go-soft);
  color: var(--go-dark);
}

.airline-choice-chip.blocked {
  border-color: rgba(192, 38, 63, 0.25);
  background: var(--danger-soft);
  color: var(--danger);
}

.airline-choice-chip.deprioritized {
  border-color: color-mix(in srgb, var(--warn) 30%, transparent);
  background: var(--warn-soft);
  color: var(--warn);
}

.airline-choice-chip img {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  object-fit: contain;
  background: #fff;
}

.airline-choice-chip b {
  color: inherit;
  font-size: 0.78rem;
}

.airline-choice-chip small {
  font-size: 0.68rem;
  font-weight: 900;
  opacity: 0.72;
}

.airline-choice-chip button {
  width: 25px;
  height: 25px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: color-mix(in srgb, currentColor 10%, transparent);
  color: inherit;
}

.airline-choice-chip button svg {
  width: 14px;
  height: 14px;
}

.airline-quick-list::before {
  content: "";
  width: 100%;
}

.airline-quick-list button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 31px;
  padding: 0 9px;
  border: 1px dashed var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font-size: 0.72rem;
}

.airline-quick-list button:hover {
  border-color: var(--brand);
  color: var(--brand);
}

.airline-quick-list span {
  font-weight: 900;
}

.traveler-advanced-panel {
  padding: 0;
  overflow: hidden;
}

.traveler-advanced-toggle {
  width: 100%;
  min-height: 62px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border: 0;
  background: transparent;
  color: var(--text);
  text-align: left;
}

.traveler-advanced-toggle > span {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--ink);
}

.traveler-advanced-toggle small {
  color: var(--muted);
  font-weight: 650;
}

.traveler-advanced-toggle svg {
  width: 18px;
  height: 18px;
}

.traveler-weight-panel {
  padding: 16px;
  border-top: 1px solid var(--line);
  background: var(--panel);
}

.traveler-weight-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  color: var(--ink);
  font-weight: 850;
}

.traveler-weight-head small {
  color: var(--warn);
}

.traveler-weight-head small.valid {
  color: var(--go-dark);
}

.traveler-weight-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 20px;
}

.traveler-weight-grid label,
.traveler-weight-grid label > span {
  display: grid;
  gap: 7px;
}

.traveler-weight-grid label > span {
  grid-template-columns: minmax(0, 1fr) auto;
  color: var(--muted);
  font-size: 0.76rem;
}

.traveler-weight-grid strong {
  min-width: 24px;
  color: var(--brand);
  text-align: right;
}

.traveler-weight-grid input {
  width: 100%;
  accent-color: var(--brand);
}

.profile-applied-bar {
  width: 100%;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 11px 13px;
  border: 1px solid rgba(0, 59, 149, 0.18);
  border-radius: 14px;
  background: var(--brand-soft);
  color: var(--text);
  text-align: left;
}

.profile-applied-bar > span,
.profile-applied-bar em {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.profile-applied-bar > span {
  color: var(--brand);
}

.profile-applied-bar > span svg,
.profile-applied-bar em svg {
  width: 17px;
  height: 17px;
}

.profile-applied-bar small {
  min-width: 0;
  color: var(--muted);
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-applied-bar em {
  color: var(--brand);
  font-style: normal;
  font-weight: 850;
}

@media (max-width: 820px) {
  .user-settings-tabs {
    top: 58px;
    grid-template-columns: repeat(4, minmax(70px, 1fr));
    overflow-x: auto;
  }

  .user-settings-tabs button {
    padding: 0 9px;
    font-size: 0.78rem;
  }

  .ranking-preset-grid,
  .traveler-toggle-grid,
  .traveler-limit-grid,
  .traveler-limit-grid.two,
  .traveler-weight-grid {
    grid-template-columns: 1fr;
  }

  .airline-preference-group {
    grid-template-columns: 1fr;
  }

  .profile-applied-bar {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .profile-applied-bar > small {
    grid-column: 1 / -1;
    grid-row: 2;
    white-space: normal;
  }
}

@media (max-width: 520px) {
  .user-settings-tabs {
    gap: 3px;
    padding: 4px;
    border-radius: 14px;
  }

  .user-settings-tabs button {
    min-height: 54px;
    flex-direction: column;
    gap: 3px;
    border-radius: 10px;
    font-size: 0.68rem;
  }

  .traveler-preference-block {
    padding: 14px;
  }

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

  .ranking-preset-grid > button {
    min-height: 96px;
    padding: 12px;
  }

  .airline-picker-control {
    grid-template-columns: 1fr;
  }

  .airline-picker-control button {
    min-height: 40px;
  }

  .traveler-advanced-toggle {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .traveler-advanced-toggle small {
    grid-column: 1 / -1;
    grid-row: 2;
  }
}

/* Admin ops dashboard */
.admin-page { padding-bottom: 40px; }
.admin-key-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 0 24px 16px;
  padding: 14px 16px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
}
.admin-key-bar label { font-weight: 700; color: var(--text2); }
.admin-key-bar input {
  flex: 1 1 220px;
  min-width: 160px;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg);
  color: var(--text1);
}
.admin-error {
  margin: 0 24px 16px;
  padding: 12px 16px;
  border-radius: 10px;
  background: var(--bad-soft);
  color: var(--bad-dark);
  font-weight: 700;
}
.admin-loading {
  margin: 0 24px 16px;
  color: var(--text2);
}
.admin-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 20px;
  margin: 0 24px;
}
.admin-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 18px;
}
.admin-card-wide { grid-column: 1 / -1; }
.admin-card h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 14px;
  font-size: 1.05rem;
  color: var(--text1);
}
.admin-card h3 svg { width: 18px; height: 18px; }
.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}
.admin-table th,
.admin-table td {
  text-align: left;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
}
.admin-table th { color: var(--text2); font-weight: 700; }
.admin-table tr:last-child td { border-bottom: none; }
.admin-note { margin: 10px 0 0; font-size: 0.82rem; color: var(--text2); }
.admin-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}
.admin-metrics > div {
  padding: 12px;
  border-radius: 10px;
  background: var(--bg);
}
.admin-metrics b { display: block; margin-bottom: 6px; color: var(--text2); }
.admin-metrics span { white-space: pre-wrap; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.82rem; }
.admin-actions { white-space: nowrap; }
.admin-actions button {
  padding: 5px 10px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.admin-actions button:hover { background: var(--surface); border-color: var(--text2); }
.admin-quick-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.admin-quick-actions button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.admin-quick-actions button:disabled { opacity: .6; cursor: not-allowed; }
.admin-quick-actions button:not(:disabled):hover { background: var(--surface); border-color: var(--text2); }
.admin-quick-actions button svg { width: 16px; height: 16px; }
.status-pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
}
.status-pill.good { background: var(--go-soft); color: var(--go-dark); }
.status-pill.bad { background: var(--bad-soft); color: var(--bad-dark); }
.status-pill.warn { background: var(--warn-soft); color: var(--warn-dark); }
.status-pill.neutral { background: var(--bg); color: var(--text2); }

/* ── Account access landing ───────────────────────────────────────────── */
.access-gate {
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(circle at 8% 4%, color-mix(in srgb, var(--brand) 15%, transparent), transparent 29rem),
    radial-gradient(circle at 92% 92%, color-mix(in srgb, var(--go) 18%, transparent), transparent 27rem),
    linear-gradient(145deg, color-mix(in srgb, var(--panel) 92%, var(--brand-soft)), var(--bg));
}

.access-gate::before,
.access-gate::after {
  content: "";
  position: absolute;
  z-index: -1;
  border-radius: 999px;
  pointer-events: none;
}

.access-gate::before {
  width: 34rem;
  height: 34rem;
  left: -18rem;
  top: 22%;
  border: 1px solid color-mix(in srgb, var(--brand) 16%, transparent);
  box-shadow: 0 0 0 5rem color-mix(in srgb, var(--brand) 3%, transparent), 0 0 0 10rem color-mix(in srgb, var(--brand) 2%, transparent);
}

.access-gate::after {
  width: 20rem;
  height: 20rem;
  right: -9rem;
  bottom: -9rem;
  background: color-mix(in srgb, var(--go) 8%, transparent);
  filter: blur(2px);
}

.access-topbar {
  width: min(1240px, calc(100% - 48px));
  min-height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin: 0 auto;
  padding: 12px 0;
}

.access-brand {
  font-size: 1.32rem;
}

.access-brand .brand-mark {
  width: 40px;
  height: 40px;
  border-radius: 13px;
}

.access-top-actions,
.access-language,
.access-theme {
  display: inline-flex;
  align-items: center;
}

.access-top-actions {
  gap: 8px;
}

.access-language,
.access-theme {
  min-height: 42px;
  border: 1px solid color-mix(in srgb, var(--line) 82%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--panel) 82%, transparent);
  color: var(--text);
  box-shadow: 0 8px 24px rgba(16, 32, 51, 0.05);
  backdrop-filter: blur(14px);
}

.access-language {
  position: relative;
  gap: 8px;
  padding: 0 12px;
}

.access-language svg,
.access-theme svg {
  width: 17px;
  height: 17px;
}

.access-language select {
  height: 38px;
  padding: 0 20px 0 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
  font-weight: 800;
}

.access-theme {
  width: 42px;
  justify-content: center;
  padding: 0;
}

.access-checking {
  flex: 1;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 9px;
  padding: 32px;
  color: var(--muted);
  text-align: center;
}

.access-checking strong {
  color: var(--ink);
  font-size: 1.05rem;
}

.access-checking small {
  font-weight: 700;
}

.access-loader {
  position: relative;
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  margin-bottom: 8px;
  border-radius: 20px;
  background: var(--brand);
  color: #fff;
  box-shadow: 0 18px 42px color-mix(in srgb, var(--brand) 28%, transparent);
}

.access-loader::after {
  content: "";
  position: absolute;
  inset: -7px;
  border: 2px solid color-mix(in srgb, var(--brand) 32%, transparent);
  border-top-color: transparent;
  border-radius: 24px;
  animation: spin 1.1s linear infinite;
}

.access-stage {
  width: min(1180px, calc(100% - 48px));
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(380px, 0.82fr);
  align-items: center;
  gap: clamp(42px, 7vw, 100px);
  margin: 0 auto;
  padding: 26px 0 54px;
}

.access-story {
  min-width: 0;
  max-width: 660px;
}

.access-story h1 {
  max-width: 640px;
  margin-bottom: 18px;
  font-size: clamp(3.1rem, 5.8vw, 5.7rem);
  line-height: 0.94;
  letter-spacing: -0.045em;
}

.access-lead {
  max-width: 590px;
  margin-bottom: 26px;
  color: var(--muted);
  font-size: clamp(1rem, 1.45vw, 1.2rem);
  font-weight: 620;
  line-height: 1.55;
}

.access-benefits {
  display: grid;
  gap: 10px;
}

.access-benefits article {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 11px 12px;
  border: 1px solid color-mix(in srgb, var(--line) 76%, transparent);
  border-radius: 14px;
  background: color-mix(in srgb, var(--panel) 68%, transparent);
  backdrop-filter: blur(12px);
}

.access-benefits article > svg {
  width: 38px;
  height: 38px;
  padding: 9px;
  border-radius: 12px;
  background: var(--brand-soft);
  color: var(--brand);
}

.access-benefits article:nth-child(2) > svg {
  background: var(--go-soft);
  color: var(--go-dark);
}

.access-benefits span {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.access-benefits strong {
  color: var(--ink);
  font-size: 0.92rem;
}

.access-benefits small {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 680;
}

.access-proof {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 18px;
}

.access-proof span {
  min-width: 0;
  display: grid;
  gap: 2px;
  padding: 9px 2px;
}

.access-proof b {
  color: var(--ink);
  font-size: 1.18rem;
  font-weight: 950;
}

.access-proof small {
  overflow: hidden;
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 760;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.access-card {
  width: 100%;
  max-width: 500px;
  justify-self: end;
  padding: clamp(22px, 3vw, 32px);
  border: 1px solid color-mix(in srgb, var(--line) 88%, transparent);
  border-radius: 24px;
  background: color-mix(in srgb, var(--panel) 94%, transparent);
  box-shadow: 0 28px 80px rgba(16, 32, 51, 0.16), 0 2px 8px rgba(16, 32, 51, 0.06);
  backdrop-filter: blur(22px) saturate(140%);
}

.access-card-heading {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 13px;
  margin-bottom: 20px;
}

.access-card-icon {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: var(--brand-soft);
  color: var(--brand);
}

.access-card-icon svg {
  width: 20px;
  height: 20px;
}

.access-card-heading .eyebrow {
  margin-bottom: 3px;
  font-size: 0.68rem;
}

.access-card-heading h2 {
  margin: 0;
  color: var(--ink);
  font-size: 1.72rem;
  line-height: 1.1;
}

.access-card-heading p:last-child {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 650;
  line-height: 1.4;
}

.access-auth-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  margin-bottom: 18px;
  padding: 4px;
  border: 1px solid var(--line-2);
  border-radius: 13px;
  background: var(--panel-2);
}

.access-auth-tabs button {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 12px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 850;
}

.access-auth-tabs button.active {
  background: var(--panel);
  color: var(--brand);
  box-shadow: 0 2px 9px rgba(16, 32, 51, 0.09);
}

.access-auth-tabs svg {
  width: 16px;
  height: 16px;
}

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

.access-auth-form > label {
  display: grid;
  gap: 6px;
  color: var(--ink);
  font-size: 0.8rem;
  font-weight: 820;
}

.access-input-wrap {
  min-width: 0;
  min-height: 50px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  padding: 0 13px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
  transition: border-color 150ms ease, box-shadow 150ms ease;
}

.access-input-wrap:focus-within {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 12%, transparent);
}

.access-input-wrap > svg {
  width: 17px;
  height: 17px;
  color: var(--muted);
}

.access-input-wrap input {
  width: 100%;
  height: 48px;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ink);
  font-size: 0.94rem;
  font-weight: 650;
}

.access-input-wrap input::placeholder {
  color: color-mix(in srgb, var(--muted) 72%, transparent);
}

.access-field-hint,
.user-auth-password-hint {
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 650;
  line-height: 1.4;
}

.access-password-wrap {
  grid-template-columns: auto minmax(0, 1fr) auto;
  padding-right: 7px;
}

.access-password-wrap button {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--muted);
}

.access-password-wrap button:hover {
  background: var(--panel-2);
  color: var(--ink);
}

.access-password-wrap button svg {
  width: 17px;
  height: 17px;
}

.access-auth-feedback {
  min-height: 0;
}

.access-auth-feedback p {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  margin: 0;
  padding: 9px 10px;
  border: 1px solid color-mix(in srgb, var(--danger) 25%, var(--line));
  border-radius: 10px;
  background: var(--danger-soft);
  color: var(--danger);
  font-size: 0.78rem;
  font-weight: 760;
  line-height: 1.35;
}

.access-auth-feedback p.success {
  border-color: color-mix(in srgb, var(--go) 28%, var(--line));
  background: var(--go-soft);
  color: var(--go-dark);
}

.access-auth-feedback svg {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
}

.access-submit {
  min-height: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 0 18px;
  border: 0;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  color: #fff;
  font-weight: 880;
  box-shadow: 0 13px 27px color-mix(in srgb, var(--brand) 24%, transparent);
}

.access-submit:hover:not(:disabled) {
  filter: brightness(1.05);
  transform: translateY(-1px);
}

.access-submit:disabled {
  opacity: 0.7;
}

.access-submit svg {
  width: 18px;
  height: 18px;
}

.access-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 16px 0 12px;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
}

.access-divider::before,
.access-divider::after {
  content: "";
  height: 1px;
  flex: 1;
  background: var(--line-2);
}

.access-guest {
  width: 100%;
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 13px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel-2);
  color: var(--text);
}

.access-guest > span {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 9px;
}

.access-guest b {
  overflow: hidden;
  color: var(--ink);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.access-guest svg {
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
  color: var(--brand);
}

.access-guest-note {
  margin: 7px 4px 0;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 650;
  line-height: 1.4;
}

.access-security {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--line-2);
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 720;
  line-height: 1.35;
}

.access-security svg {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  color: var(--go-dark);
}

.user-auth-feedback {
  margin: 0;
  color: var(--danger);
  font-size: 0.8rem;
  font-weight: 750;
}

.user-auth-feedback.success {
  color: var(--go-dark);
}

@media (max-width: 900px) {
  .access-gate {
    overflow: auto;
  }

  .access-stage {
    grid-template-columns: 1fr;
    gap: 28px;
    padding-top: 18px;
  }

  .access-story {
    max-width: none;
    text-align: center;
  }

  .access-story h1,
  .access-lead {
    margin-left: auto;
    margin-right: auto;
  }

  .access-story h1 {
    max-width: 700px;
    font-size: clamp(2.8rem, 8vw, 4.6rem);
  }

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

  .access-benefits article {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }

  .access-card {
    max-width: 580px;
    justify-self: center;
  }
}

@media (max-width: 600px) {
  .access-topbar,
  .access-stage {
    width: calc(100% - 28px);
  }

  .access-topbar {
    min-height: 66px;
  }

  .access-brand .brand-mark {
    width: 36px;
    height: 36px;
  }

  .access-brand > span:last-child {
    display: inline;
  }

  .access-language {
    width: 42px;
    justify-content: center;
    padding: 0;
  }

  .access-language select {
    position: absolute;
    inset: 0;
    width: 100%;
    opacity: 0;
  }

  .access-stage {
    gap: 20px;
    padding: 12px 0 30px;
  }

  .access-story h1 {
    margin-bottom: 12px;
    font-size: clamp(2.45rem, 13vw, 3.4rem);
  }

  .access-lead {
    margin-bottom: 16px;
    font-size: 0.94rem;
  }

  .access-benefits {
    grid-template-columns: 1fr;
    gap: 7px;
  }

  .access-benefits article {
    grid-template-columns: auto minmax(0, 1fr);
    justify-items: initial;
    padding: 9px 10px;
    text-align: left;
  }

  .access-benefits article > svg {
    width: 34px;
    height: 34px;
    padding: 8px;
  }

  .access-proof {
    margin-top: 10px;
  }

  .access-proof span {
    text-align: center;
  }

  .access-proof small {
    white-space: normal;
  }

  .access-card {
    padding: 19px;
    border-radius: 20px;
  }

  .access-card-heading {
    margin-bottom: 15px;
  }

  .access-card-heading h2 {
    font-size: 1.5rem;
  }

  .access-security {
    align-items: flex-start;
  }
}

/* ── Compact search workspace ─────────────────────────────────────────────
   Once a search starts, the discovery landing page becomes a results tool:
   the hero gets out of the way, the query stays close, and results precede
   the optional calendar. This keeps every control available without making
   people scroll through the landing experience again. */
.topbar {
  box-shadow: 0 1px 0 rgba(16, 32, 51, 0.03), 0 10px 30px rgba(16, 32, 51, 0.04);
}

.topnav button {
  transition: color 160ms ease, background 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.topnav button:hover {
  color: var(--ink);
  transform: translateY(-1px);
}

.topnav button.active {
  box-shadow: 0 1px 2px rgba(16, 32, 51, 0.08), 0 5px 16px rgba(16, 32, 51, 0.06);
}

.dashboard-title {
  padding: 22px 24px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background:
    radial-gradient(circle at 92% 0, color-mix(in srgb, var(--go) 14%, transparent), transparent 18rem),
    linear-gradient(135deg, var(--panel), color-mix(in srgb, var(--brand-soft) 48%, var(--panel)));
  box-shadow: var(--shadow-soft);
}

.dashboard-title h1 {
  font-size: clamp(2rem, 3.5vw, 3.4rem);
  line-height: 1;
}

.dashboard-kpi,
.dashboard-panel,
.dashboard-health,
.dashboard-attention,
.dashboard-next {
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.dashboard-kpi:hover,
.dashboard-panel:hover {
  border-color: color-mix(in srgb, var(--brand) 22%, var(--line));
  box-shadow: 0 12px 30px rgba(16, 32, 51, 0.08);
}

.search-page--active {
  display: flex;
  flex-direction: column;
  padding-top: 16px;
}

.search-page--active > .search-hero { order: 0; }
.search-page--active > .search-panel { order: 1; }
.search-page--active > .search-progress-card { order: 2; }
.search-page--active > .quick-row { order: 3; }
.search-page--active > .results-area { order: 4; }
.search-page--active > .calendar-card { order: 6; }
.search-page--active > .date-grid-card { order: 7; }
.search-page--active > .map-section { order: 8; }

.search-page--active .search-hero,
.search-page--active > .quick-row {
  display: none;
}

.search-page--active .search-panel {
  padding: 12px;
  border-color: color-mix(in srgb, var(--brand) 18%, var(--line));
  border-radius: 18px;
  box-shadow: 0 12px 34px rgba(16, 32, 51, 0.10);
}

.search-page--active .panel-top {
  margin-bottom: 8px;
}

.search-page--active .segmented label,
.search-page--active .passenger-pill {
  min-height: 36px;
}

.search-page--active .airport-field,
.search-page--active .date-field,
.search-page--active .primary-cta {
  min-height: 56px;
}

.search-page--active .airport-field input,
.search-page--active .date-field input {
  font-size: 1rem;
}

.search-page--active .search-options {
  margin-top: 8px;
}

.search-page--active .complexity-tabs {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
  margin-top: 8px;
}

.search-page--active .complexity-tabs button {
  min-height: 38px;
  grid-template-columns: 18px minmax(0, 1fr);
  padding: 7px 9px;
  border-radius: 10px;
}

.search-page--active .complexity-tabs em {
  display: none;
}

.search-page--active .search-progress-card {
  width: 100%;
  margin: 10px 0 0;
}

.search-page--active .results-area {
  margin-top: 16px;
}

.search-page--active .result-status {
  margin-bottom: 10px;
  padding: 13px 14px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: var(--panel);
  box-shadow: var(--shadow-soft);
}

.search-page--active .result-status h2 {
  font-size: clamp(1.25rem, 2vw, 1.7rem);
}

.search-page--active .results-commandbar {
  position: static;
}

.search-page--active .results-list.rows .flight-card {
  grid-template-columns: minmax(0, 1fr);
  border-radius: 15px;
}

.search-page--active .results-list.rows .flight-photo {
  display: none !important;
}

.search-page--active .flight-card {
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.search-page--active .flight-card:hover {
  border-color: color-mix(in srgb, var(--brand) 30%, var(--line));
  box-shadow: 0 14px 34px rgba(16, 32, 51, 0.10);
  transform: translateY(-2px);
}

.search-page--active .calendar-card,
.search-page--active .date-grid-card {
  margin-top: 18px;
}

@media (min-width: 981px) {
  .search-page--active:not(.search-page--expanded) .search-panel {
    position: sticky;
    top: 76px;
    z-index: 34;
    background: color-mix(in srgb, var(--panel) 96%, transparent);
    backdrop-filter: blur(18px) saturate(145%);
  }

  .search-page--active .filters-card {
    top: 286px;
    max-height: calc(100vh - 302px);
    overflow: auto;
    scrollbar-width: thin;
  }
}

@media (max-width: 980px) {
  .search-page--active {
    padding-top: 12px;
  }

  .search-page--active .search-panel {
    padding: 11px;
  }

  .search-page--active .panel-top {
    width: 100%;
    align-items: stretch;
    flex-direction: row;
  }

  .search-page--active .complexity-tabs {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x proximity;
  }

  .search-page--active .complexity-tabs button {
    min-width: 132px;
    flex: 1 0 auto;
    scroll-snap-align: start;
  }

  .search-page--active .result-status {
    gap: 10px;
  }
}

@media (max-width: 560px) {
  .dashboard-title {
    padding: 18px;
  }

  .search-page--active {
    width: calc(100vw - 20px);
    padding-top: 10px;
  }

  .search-page--active .search-panel {
    padding: 10px;
    border-radius: 15px;
  }

  .search-page--active .panel-top {
    flex-direction: column;
  }

  .search-page--active .segmented label {
    min-height: 38px;
  }

  .search-page--active .search-options {
    gap: 12px;
    font-size: 0.86rem;
  }

  .search-page--active .result-status,
  .search-page--active .results-commandbar {
    border-radius: 13px;
  }

  .search-page--active .result-actions {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .search-page--active .sort-tabs {
    width: 100%;
    min-width: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .search-page--active .sort-tabs button {
    min-width: 0;
    padding: 0 6px;
  }

  .search-page--active .sort-tabs button em,
  .search-page--active .sort-tabs button svg {
    display: none;
  }

  .search-page--active .view-toggle button {
    min-width: 38px;
    padding: 0 9px;
  }

  .search-page--active .view-toggle button span {
    display: none;
  }

  .search-page--active .flight-main {
    padding: 14px;
  }

  .search-page--active .flight-meta {
    padding: 12px 14px 14px;
  }
}

/* ── Motion and interaction system ──────────────────────────────────────
   Motion is deliberately short and transform/opacity based: it clarifies a
   state change without delaying the next action or moving surrounding layout. */
:root {
  --motion-fast: 140ms;
  --motion-base: 220ms;
  --motion-slow: 420ms;
  --ease-standard: cubic-bezier(0.2, 0.75, 0.25, 1);
  --ease-emphasized: cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes ui-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes ui-rise-in {
  from { opacity: 0; transform: translate3d(0, 14px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes ui-drop-in {
  from { opacity: 0; transform: translate3d(0, -8px, 0) scale(0.985); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes ui-card-in {
  from { opacity: 0; transform: translate3d(18px, 0, 0) scale(0.985); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes ui-backdrop-in {
  from { opacity: 0; backdrop-filter: blur(0); }
  to { opacity: 1; backdrop-filter: blur(6px); }
}

@keyframes ui-modal-in {
  from { opacity: 0; transform: translate3d(0, 18px, 0) scale(0.975); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes ui-sheet-in {
  from { opacity: 0; transform: translate3d(0, 30px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes ui-toast-in {
  from { opacity: 0; transform: translate3d(18px, 0, 0) scale(0.97); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes ui-control-pop {
  0% { transform: scale(0.88); }
  62% { transform: scale(1.08); }
  100% { transform: scale(1); }
}

@keyframes ui-progress-sweep {
  from { transform: translate3d(-130%, 0, 0); }
  to { transform: translate3d(260%, 0, 0); }
}

/* ── Top navigation hierarchy ─────────────────────────────────────────────
   Keep the four daily destinations visible and move lower-frequency tools
   into one labelled menu. This prevents the header becoming an icon strip as
   new product surfaces are added. */
.topnav {
  overflow: visible;
}

.topnav-more {
  position: relative;
  min-width: 0;
  display: flex;
}

.topnav-more-trigger {
  width: 100%;
}

.topnav-more-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 90;
  width: 220px;
  display: grid;
  gap: 3px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: color-mix(in srgb, var(--panel) 96%, transparent);
  box-shadow: 0 18px 46px rgba(16, 32, 51, 0.17);
  backdrop-filter: blur(18px) saturate(145%);
}

.topnav .topnav-more-menu button {
  width: 100%;
  min-width: 0;
  min-height: 42px;
  justify-content: flex-start;
  gap: 10px;
  padding: 0 12px;
  border-radius: 11px;
  color: var(--text);
  background: transparent;
  box-shadow: none;
}

.topnav .topnav-more-menu button:hover,
.topnav .topnav-more-menu button.active {
  color: var(--brand);
  background: var(--brand-soft);
  transform: none;
}

.topnav .topnav-more-menu button span {
  display: inline;
  overflow: hidden;
  text-overflow: ellipsis;
}

.topnav-more-theme {
  display: none !important;
  margin-top: 4px;
  padding-top: 5px !important;
  border-top: 1px solid var(--line) !important;
}

/* The centered three-column header needs more breathing room before its
   compact breakpoint, especially with translated labels. */
@media (max-width: 1500px) {
  .topbar {
    gap: 14px;
    padding-inline: 24px;
  }

  .topnav button {
    gap: 6px;
    padding-inline: 11px;
  }

  .top-actions { gap: 6px; }
  .language-control select { min-width: 82px; }
}

@media (max-width: 1280px) {
  .topbar {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  .topnav {
    max-width: 100%;
    justify-self: center;
  }
}

@media (max-width: 1080px) {
  .topnav > button,
  .topnav-more-trigger {
    min-width: 40px;
    justify-content: center;
    padding-inline: 9px;
  }

  .topnav > button span,
  .topnav-more-trigger span { display: none; }
}

@media (max-width: 980px) {
  .topbar > .top-actions .language-control select {
    width: 100%;
    min-width: 100%;
    max-width: 100%;
  }
}

@media (min-width: 721px) and (max-width: 1080px) {
  .topbar > .topnav > button.active,
  .topbar > .topnav .topnav-more-trigger {
    gap: 6px;
    padding-inline: 11px;
  }

  .topbar > .topnav > button.active span,
  .topbar > .topnav .topnav-more-trigger span {
    display: inline;
  }
}

/* On phones the compact destinations become a labelled five-item bar. */
@media (max-width: 720px) {
  .topbar {
    height: auto;
    min-height: 112px;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "brand actions"
      "navigation navigation";
    gap: 7px 12px;
    padding: 8px 12px 9px;
  }

  .topbar > .brand { grid-area: brand; }
  .topbar > .topnav {
    grid-area: navigation;
    width: 100%;
    min-width: 0;
    justify-self: stretch;
  }
  .topbar > .top-actions { grid-area: actions; }

  .topbar > .brand span:last-child {
    display: inline;
  }

  .topbar > .top-actions .theme-action {
    display: none;
  }

  .topbar > .top-actions .language-control select {
    width: 100%;
    min-width: 100%;
    max-width: 100%;
  }

  .topbar > .top-actions .icon-action,
  .topbar > .top-actions .language-control {
    width: 44px;
    min-height: 44px;
  }

  .topbar > .top-actions .icon-action {
    flex-basis: 44px;
  }

  .topbar > .topnav {
    gap: 4px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
  }

  .topnav > button,
  .topnav > .topnav-more {
    min-width: 0;
    flex: 1 1 0;
  }

  .topbar > .topnav > button,
  .topbar > .topnav .topnav-more-trigger {
    min-width: 0;
    min-height: 51px;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
    padding: 4px 2px;
    border-radius: 13px;
    font-size: 0.68rem;
    line-height: 1;
  }

  .topbar > .topnav > button span,
  .topbar > .topnav .topnav-more-trigger span {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .topbar > .topnav > button svg,
  .topbar > .topnav .topnav-more-trigger svg {
    width: 17px;
    height: 17px;
  }

  .topnav-more-menu {
    top: calc(100% + 8px);
  }

  .topnav .topnav-more-menu button {
    min-height: 44px;
    flex-direction: row;
    justify-content: flex-start;
    gap: 10px;
    padding: 0 12px;
    font-size: 0.86rem;
    line-height: 1.2;
  }

  .topnav-more-theme {
    display: flex !important;
  }

  .results-commandbar,
  .user-settings-tabs { top: 124px; }

  .toast-stack { top: 124px; }
}

/* Controls share one tactile vocabulary. Keeping this list explicit avoids
   surprising movement on passive content or browser-native form controls. */
.primary-cta,
.access-submit,
.access-guest,
.ghost-action,
.icon-action,
.quick-row button,
.quick-filter-button,
.active-filter-row button,
.filter-pill-grid button,
.sort-tabs button,
.view-toggle button,
.complexity-tabs button,
.decision-panel button,
.empty-actions button,
.recovery-actions button,
.modal-close,
.compare-tray,
.stepper button {
  transition:
    transform var(--motion-fast) var(--ease-standard),
    border-color var(--motion-base) ease,
    background-color var(--motion-base) ease,
    color var(--motion-base) ease,
    box-shadow var(--motion-base) ease,
    filter var(--motion-base) ease;
}

.airport-field,
.date-field,
.access-input-wrap {
  transition:
    border-color var(--motion-base) ease,
    box-shadow var(--motion-base) ease,
    background-color var(--motion-base) ease;
}

.segmented label,
.access-auth-tabs button,
.filters-card label,
.search-progress-steps span {
  transition:
    transform var(--motion-fast) var(--ease-standard),
    border-color var(--motion-base) ease,
    background-color var(--motion-base) ease,
    color var(--motion-base) ease,
    box-shadow var(--motion-base) ease;
}

.swap-button svg,
.access-theme svg,
.access-password-wrap button svg,
.icon-action svg,
.quick-filter-button svg,
.modal-close svg {
  transition: transform var(--motion-base) var(--ease-emphasized);
}

.flight-card,
.deal-card,
.combo-card,
.destination-grid article,
.saved-grid article,
.dashboard-kpi,
.dashboard-panel,
.decision-panel article,
.compare-card {
  transition:
    transform var(--motion-base) var(--ease-standard),
    border-color var(--motion-base) ease,
    box-shadow var(--motion-base) ease;
}

.flight-photo,
.deal-photo,
.combo-photo,
.destination-grid img,
.saved-photo {
  transition: transform 480ms var(--ease-emphasized), filter var(--motion-base) ease;
}

@media (hover: hover) and (pointer: fine) {
  .primary-cta:hover:not(:disabled),
  .access-submit:hover:not(:disabled),
  .access-guest:hover:not(:disabled),
  .ghost-action:hover:not(:disabled),
  .quick-row button:hover:not(:disabled),
  .quick-filter-button:hover:not(:disabled),
  .decision-panel button:hover:not(:disabled),
  .empty-actions button:hover:not(:disabled),
  .recovery-actions button:hover:not(:disabled) {
    transform: translate3d(0, -2px, 0);
    box-shadow: 0 10px 24px rgba(16, 32, 51, 0.10);
  }

  .icon-action:hover:not(:disabled) svg,
  .access-password-wrap button:hover svg { transform: scale(1.1); }
  .access-theme:hover svg { transform: rotate(12deg) scale(1.05); }
  .swap-button:hover svg { transform: rotate(180deg); }
  .modal-close:hover svg { transform: rotate(90deg); }

  .flight-card:hover,
  .deal-card:hover,
  .combo-card:hover,
  .destination-grid article:hover,
  .saved-grid article:hover,
  .dashboard-kpi:hover,
  .dashboard-panel:hover,
  .decision-panel article:hover {
    border-color: color-mix(in srgb, var(--brand) 28%, var(--line));
    box-shadow: 0 16px 38px rgba(16, 32, 51, 0.11);
    transform: translate3d(0, -3px, 0);
  }

  .flight-card:hover .flight-photo,
  .deal-card:hover .deal-photo,
  .combo-card:hover .combo-photo,
  .destination-grid article:hover img,
  .saved-grid article:hover .saved-photo {
    filter: saturate(1.04);
    transform: scale(1.025);
  }

  .filters-card label:hover {
    background: color-mix(in srgb, var(--brand-soft) 48%, transparent);
    color: var(--brand);
  }
}

.primary-cta:active:not(:disabled),
.access-submit:active:not(:disabled),
.access-guest:active:not(:disabled),
.ghost-action:active:not(:disabled),
.icon-action:active:not(:disabled),
.quick-row button:active:not(:disabled),
.quick-filter-button:active:not(:disabled),
.filter-pill-grid button:active:not(:disabled),
.sort-tabs button:active:not(:disabled),
.view-toggle button:active:not(:disabled),
.complexity-tabs button:active:not(:disabled),
.decision-panel button:active:not(:disabled),
.empty-actions button:active:not(:disabled),
.recovery-actions button:active:not(:disabled),
.modal-close:active:not(:disabled),
.compare-tray:active:not(:disabled),
.stepper button:active:not(:disabled) {
  transform: translate3d(0, 1px, 0) scale(0.97);
}

.topnav button.active svg,
.access-auth-tabs button.active svg,
.quick-filter-button.active svg,
.filter-pill-grid button.active svg,
.sort-tabs button.active svg,
.view-toggle button.active svg {
  animation: ui-control-pop 260ms var(--ease-emphasized) both;
}

.search-progress-bar i {
  position: relative;
  overflow: hidden;
  transition: width 320ms var(--ease-emphasized);
}

.search-progress-bar i::after {
  content: "";
  position: absolute;
  inset: 0;
  width: 42%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.62), transparent);
  animation: ui-progress-sweep 1.45s ease-in-out infinite;
}

.skeleton-stack div {
  border: 1px solid color-mix(in srgb, var(--line) 62%, transparent);
  box-shadow: 0 8px 24px rgba(16, 32, 51, 0.04);
}

@media (prefers-reduced-motion: no-preference) {
  /* Release the reveal transform after entry so hover elevation remains
     available; backwards still hides cards during their staggered delay. */
  .results-list .flight-card { animation-fill-mode: backwards; }

  .access-gate { animation: ui-fade-in 320ms ease both; }
  .access-topbar { animation: ui-drop-in 460ms var(--ease-emphasized) both; }
  .access-story > .eyebrow { animation: ui-rise-in 420ms 70ms var(--ease-emphasized) both; }
  .access-story > h1 { animation: ui-rise-in 560ms 110ms var(--ease-emphasized) both; }
  .access-story > .access-lead { animation: ui-rise-in 520ms 170ms var(--ease-emphasized) both; }
  .access-benefits article { animation: ui-rise-in 460ms var(--ease-emphasized) both; }
  .access-benefits article:nth-child(1) { animation-delay: 220ms; }
  .access-benefits article:nth-child(2) { animation-delay: 270ms; }
  .access-benefits article:nth-child(3) { animation-delay: 320ms; }
  .access-proof span { animation: ui-rise-in 420ms var(--ease-emphasized) both; }
  .access-proof span:nth-child(1) { animation-delay: 350ms; }
  .access-proof span:nth-child(2) { animation-delay: 390ms; }
  .access-proof span:nth-child(3) { animation-delay: 430ms; }
  .access-card { animation: ui-card-in 580ms 130ms var(--ease-emphasized) both; }
  .access-checking { animation: ui-fade-in 260ms ease both; }
  .access-auth-form > label { animation: ui-rise-in 260ms var(--ease-standard) both; }
  .access-auth-feedback p,
  .alert-card { animation: ui-rise-in 240ms var(--ease-emphasized) both; }

  .app-shell { animation: ui-fade-in 260ms ease both; }
  .search-progress-card,
  .results-commandbar,
  .decision-panel { animation: ui-rise-in 300ms var(--ease-emphasized) both; }
  .passenger-menu,
  .suggestions { animation: ui-drop-in 190ms var(--ease-emphasized) both; transform-origin: top; }
  .compare-tray { animation: ui-sheet-in 300ms var(--ease-emphasized) both; }
  .modal-backdrop { animation: ui-backdrop-in 220ms ease both; }
  .modal-backdrop > .detail-modal,
  .modal-backdrop > .compare-modal { animation: ui-modal-in 330ms var(--ease-emphasized) both; }
  .toast { animation: ui-toast-in 320ms var(--ease-emphasized) both; }
  .empty-state > svg,
  .soft-state > svg { animation: ui-control-pop 360ms var(--ease-emphasized) both; }
}

@media (max-width: 720px) and (prefers-reduced-motion: no-preference) {
  .modal-backdrop > .detail-modal,
  .modal-backdrop > .compare-modal {
    animation-name: ui-sheet-in;
  }

  .toast { animation-name: ui-rise-in; }
  .access-card { animation-name: ui-rise-in; }
}

@media (prefers-reduced-motion: reduce) {
  html:focus-within { scroll-behavior: auto !important; }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .search-progress-bar i::after { display: none; }

  .primary-cta:hover,
  .access-submit:hover,
  .access-guest:hover,
  .flight-card:hover,
  .deal-card:hover,
  .combo-card:hover,
  .destination-grid article:hover,
  .saved-grid article:hover,
  .dashboard-kpi:hover,
  .dashboard-panel:hover,
  .decision-panel article:hover {
    transform: none !important;
  }
}

/* ==========================================================================
   Design system layer
   --------------------------------------------------------------------------
   The palette, shadow and radius tokens at the top of this file were already
   solid. What was missing is everything that makes a data product feel
   engineered rather than assembled: a spacing rhythm, a type scale, motion
   and focus tokens, and numerals that line up in a column of fares.

   This layer is deliberately additive and typography/elevation-only — it does
   not touch layout geometry, so it cannot reflow the existing views.
   ========================================================================== */

:root {
  /* Spacing rhythm — 4px base, so every gap is a multiple of one unit. */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;

  /* Type scale — 1.200 (minor third), rounded to whole pixels at 16px root. */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.375rem;
  --text-2xl: 1.75rem;
  --text-3xl: 2.25rem;

  --leading-tight: 1.15;
  --leading-snug: 1.35;
  --leading-normal: 1.55;

  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* Motion — one duration/easing vocabulary instead of ad-hoc values. */
  --ease-out: cubic-bezier(0.2, 0.8, 0.25, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --duration-slow: 320ms;

  /* Elevation ladder, theme-aware via the existing shadow tokens. */
  --elevation-1: var(--shadow-soft);
  --elevation-2: 0 2px 4px rgba(16, 32, 51, 0.06), 0 12px 28px rgba(16, 32, 51, 0.09);
  --elevation-3: var(--shadow);

  /* Focus ring — one visual language for every interactive element. */
  --focus-ring: 0 0 0 2px var(--panel), 0 0 0 4px var(--brand-2);

  --radius-lg: 22px;
  --radius-pill: 999px;

  /* Layering — replaces scattered magic z-index numbers. */
  --z-sticky: 100;
  --z-overlay: 400;
  --z-modal: 500;
  --z-toast: 600;
}

:root.dark {
  --elevation-2: 0 2px 6px rgba(0, 0, 0, 0.34), 0 16px 40px rgba(0, 0, 0, 0.28);
}

/* --- Numerals -------------------------------------------------------------
   Proportional digits make a fare list ragged: "€1.184" and "€977" never line
   up, and a price that changes on refresh visibly jitters. Tabular figures fix
   both, and slashed zeroes read unambiguously at small sizes. */
.price-block strong,
.price-block small,
.price-month-card,
.flight-meta,
table td,
table th {
  font-variant-numeric: tabular-nums slashed-zero;
  font-feature-settings: "tnum" 1, "zero" 1;
}

/* The headline fare carries the most visual weight in the whole product. */
.price-block strong {
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  /* Large type needs negative tracking to stay optically even. */
  letter-spacing: -0.02em;
}

.price-block small {
  font-size: var(--text-xs);
  line-height: var(--leading-snug);
  color: var(--muted);
}

/* --- Focus -----------------------------------------------------------------
   :focus-visible only, so pointer users never see a ring but keyboard users
   always do. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-sm);
}

/* --- Elevation and hover ---------------------------------------------------
   A card should respond to the pointer, but a fare list is scanned, not
   admired: keep the movement small enough that a long list stays calm. */
@media (prefers-reduced-motion: no-preference) {
  .flight-card,
  .dashboard-panel,
  .alert-card,
  .admin-card,
  .price-month-card {
    transition:
      box-shadow var(--duration-base) var(--ease-out),
      border-color var(--duration-base) var(--ease-out),
      transform var(--duration-base) var(--ease-out);
  }

  .results-list .flight-card:hover {
    box-shadow: var(--elevation-2);
  }
}

.results-list .flight-card:hover {
  border-color: var(--line);
}

/* The best-value card should read as chosen, not merely outlined.
   The original rule hardcoded rgba(0, 59, 149, 0.38) — a dark navy that is
   effectively invisible against the dark theme's #181c21 panel, so the one
   card the product most wants to point at disappeared for half the users.
   --brand is theme-aware (#003b95 light / #82c7ff dark). */
.flight-card.best {
  border-color: var(--brand);
  box-shadow: var(--elevation-2);
}

/* --- Controls --------------------------------------------------------------
   Primary actions get a subtle press affordance; without it a click on a
   flat button gives no physical feedback at all. */
@media (prefers-reduced-motion: no-preference) {
  .primary-action,
  .secondary-action,
  .link-button {
    transition:
      background-color var(--duration-fast) var(--ease-out),
      border-color var(--duration-fast) var(--ease-out),
      box-shadow var(--duration-fast) var(--ease-out),
      transform var(--duration-fast) var(--ease-out);
  }
}

.primary-action:active:not(:disabled),
.secondary-action:active:not(:disabled) {
  transform: translateY(1px);
}

.primary-action:disabled,
.secondary-action:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

/* --- Typographic rhythm ---------------------------------------------------- */
.eyebrow {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.page-title {
  font-size: var(--text-3xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: -0.02em;
}

.section-heading {
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  letter-spacing: -0.01em;
}

.filter-group-label,
.filter-name {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
}

.filter-note,
.soft-state {
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--muted);
}

/* --- Provider progress -----------------------------------------------------
   A provider skipped because the airline doesn't fly the route is neither an
   error nor a loss. The existing dashed treatment is right; it only hardcoded
   its grey, so it ignored the theme. */
.search-progress-steps span.skipped {
  color: var(--muted);
}

/* --- Surface details ------------------------------------------------------- */
::selection {
  background: var(--brand-soft);
  color: var(--ink);
}

/* Keep long scrollable panels from showing a heavy default scrollbar. */
@supports (scrollbar-width: thin) {
  .results-list,
  .dashboard-panel {
    scrollbar-width: thin;
    scrollbar-color: var(--line) transparent;
  }
}


/* Lucide renders at its default 2px stroke everywhere, which is the single
   most recognisable "AI template" texture. One rule quiets all 252 call
   sites; load-bearing icons get replaced by the house set separately. */
svg.lucide {
  stroke-width: 1.5;
}


/* Slim hero for the search view: the form owns the fold. */
.search-hero--slim {
  align-items: center;
  padding: 16px 24px;
  margin-bottom: 12px;
  min-height: 74px;
}

.search-hero--slim h1 {
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  letter-spacing: -0.01em;
  line-height: var(--leading-tight);
  margin: 0;
}

@media (max-width: 720px) {
  .search-hero--slim {
    padding: 12px 16px;
    min-height: 56px;
  }

  .search-hero--slim h1 {
    font-size: var(--text-lg);
  }
}

/* ── Mode honesty batch: deep-search CTA, open-jaw disclosure, empty-state
   notices, stopover scope suggestions (v166) ─────────────────────────── */
.flex-deep-cta {
  display: flex;
  justify-content: center;
  margin: var(--space-3) 0 var(--space-4);
}

.flex-deep-cta .is-suggested {
  border-color: var(--brand, #0062e3);
  color: var(--brand, #0062e3);
  box-shadow: 0 0 0 3px rgba(0, 98, 227, 0.12);
}

.complex-jaw-warning {
  display: flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  max-width: 100%;
  padding: 6px 10px;
  margin: 2px 0;
  border: 1px solid rgba(180, 83, 9, 0.22);
  border-radius: 999px;
  background: var(--warn-soft);
  color: var(--warn);
  font-size: var(--text-xs);
  font-weight: 700;
}

.complex-jaw-warning svg {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  color: var(--warn);
}

.complex-jaw-warning b {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--warn);
}

.empty-state__notice {
  max-width: 42ch;
  margin: 0 auto var(--space-2);
  font-size: var(--text-sm);
  color: var(--ink-soft, var(--muted, #56616e));
}

.stopover-scope-input {
  position: relative;
  display: block;
}