:root {
  --ink: #1f2933;
  --muted: #667586;
  --line: #d9e0e4;
  --paper: #f7f4ef;
  --white: #ffffff;
  --teal: #0f766e;
  --blue: #2f6f9f;
  --amber: #b65f1d;
  --green: #247a4a;
  --rose: #b83258;
  --sand: #efe4d3;
  --coral: #d9654f;
  --sky: #dbeaf0;
  --card: #fffdf9;
  --shadow-soft: 0 12px 28px rgba(36, 44, 52, 0.08);
  --shadow-lift: 0 18px 44px rgba(36, 44, 52, 0.14);
  --motion-fast: 140ms;
  --motion-mid: 220ms;
  --motion-slow: 360ms;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-spring: cubic-bezier(.2, .9, .2, 1.15);
  font-family: Inter, "Noto Sans TC", "Microsoft JhengHei", Arial, sans-serif;
  color: var(--ink);
}

/* BondMate 3.0 policy desktop compact pass. */
@media (min-width: 721px) {
  body:not(:has(.marketPulse)) .panel > section:first-child:has(.policyGrid) {
    max-height: 1280px !important;
    overflow: auto !important;
    scrollbar-width: thin;
  }

  body:not(:has(.marketPulse)) .panel > section:first-child:has(.policyGrid) > .sectionHead {
    min-height: 0 !important;
    padding: 24px !important;
  }

  body:not(:has(.marketPulse)) .panel > section:first-child:has(.policyGrid) .policyItem {
    min-height: 252px !important;
    padding: 18px !important;
  }

  body:not(:has(.marketPulse)) .panel > section:first-child:has(.policyGrid) .policyItem p,
  body:not(:has(.marketPulse)) .panel > section:first-child:has(.policyGrid) .policyItem small {
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }

  body:not(:has(.marketPulse)):not(:has(.appShell.view-policy)) .selfServiceGuide {
    max-height: 480px;
    overflow: auto;
  }

  body:not(:has(.marketPulse)):not(:has(.appShell.view-policy)) .policyQaView {
    height: auto;
    max-height: 560px;
    overflow: auto !important;
  }

  body:not(:has(.marketPulse)) .policyQaView .policyQaColumns {
    display: none !important;
  }

  body:not(:has(.marketPulse)) .policyQaView .policyFaqItem:nth-of-type(n+5) {
    display: none !important;
  }

  body:not(:has(.marketPulse)) .policyQaView .policyFaqItem p {
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }
}

/* BondMate 3.0 homepage IA cleanup: avoid duplicate Trending labels. */
body:has(.marketPulse) .featuredWishStrip > .sectionHead h2 {
  font-size: 0 !important;
}

body:has(.marketPulse) .featuredWishStrip > .sectionHead h2::after {
  content: "Featured Requests";
  display: inline !important;
  font-size: clamp(1.5rem, 2.4vw, 2.7rem) !important;
}

/* Homepage polish pass: compact hero scale + reliable CSS flags on desktop. */
.heroSearchFirst {
  min-height: min(680px, calc(100dvh - 80px));
  padding: clamp(40px, 5vw, 72px) clamp(28px, 5vw, 72px);
  align-items: center;
}

.heroSearchFirst h1,
.heroSearchFirst h2 {
  max-width: 720px;
  font-size: clamp(2.9rem, 5vw, 4.9rem);
  line-height: .98;
}

.heroSearchFirst p {
  max-width: 680px;
}

.heroSearchPanel,
.marketplaceHeroPanel,
.quickStartPanel {
  box-shadow: 0 22px 60px rgba(15, 23, 42, .14);
}

.quickStartPanel {
  gap: 14px;
}

.quickStartCard {
  min-height: 74px;
  padding: 12px 14px;
}

.quickIcon {
  width: 52px;
  height: 52px;
  flex: 0 0 52px;
}

.heroStats.compact {
  gap: 10px;
}

.heroStats.compact .stat {
  min-height: 90px;
  padding: 14px;
}

.countryFlag[class*="flag-"] {
  position: relative;
  display: inline-grid !important;
  place-items: center;
  width: 26px !important;
  height: 26px !important;
  min-width: 26px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(15, 23, 42, .14) !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, .12) !important;
  color: transparent !important;
  overflow: hidden !important;
  text-indent: -999px !important;
  vertical-align: middle;
}

.countryFlag[class*="flag-"]::before,
.countryFlag[class*="flag-"]::after {
  content: "" !important;
  display: none !important;
}

.countryFlag.flag-jp { background: radial-gradient(circle at 50% 50%, #bc002d 0 30%, transparent 31%), #fff !important; }
.countryFlag.flag-tw { background: linear-gradient(180deg, transparent 0 100%), linear-gradient(90deg, #002b7f 0 48%, transparent 48%), linear-gradient(180deg, #fe0000 0 100%) !important; }
.countryFlag.flag-kr { background: radial-gradient(circle at 44% 46%, #c60c30 0 19%, transparent 20%), radial-gradient(circle at 56% 54%, #003478 0 19%, transparent 20%), #fff !important; }
.countryFlag.flag-us { background: linear-gradient(180deg, #b22234 0 8%, #fff 8% 16%, #b22234 16% 24%, #fff 24% 32%, #b22234 32% 40%, #fff 40% 48%, #b22234 48% 56%, #fff 56% 64%, #b22234 64% 72%, #fff 72% 80%, #b22234 80% 88%, #fff 88% 100%) !important; }
.countryFlag.flag-fr { background: linear-gradient(90deg, #0055a4 0 33%, #fff 33% 66%, #ef4135 66% 100%) !important; }
.countryFlag.flag-th { background: linear-gradient(180deg, #a51931 0 16%, #fff 16% 30%, #2d2a4a 30% 70%, #fff 70% 84%, #a51931 84% 100%) !important; }
.countryFlag.flag-ca { background: linear-gradient(90deg, #d52b1e 0 26%, #fff 26% 74%, #d52b1e 74% 100%) !important; }
.countryFlag.flag-sg { background: linear-gradient(180deg, #ef3340 0 50%, #fff 50% 100%) !important; }
.countryFlag.flag-id { background: linear-gradient(180deg, #ce1126 0 50%, #fff 50% 100%) !important; }
.countryFlag.flag-de { background: linear-gradient(180deg, #000 0 33%, #dd0000 33% 66%, #ffce00 66% 100%) !important; }
.countryFlag.flag-it { background: linear-gradient(90deg, #009246 0 33%, #fff 33% 66%, #ce2b37 66% 100%) !important; }
.countryFlag.flag-gb { background: linear-gradient(90deg, #012169 0 100%) !important; }
.countryFlag.flag-es { background: linear-gradient(180deg, #aa151b 0 25%, #f1bf00 25% 75%, #aa151b 75% 100%) !important; }
.countryFlag.flag-pt { background: linear-gradient(90deg, #006600 0 42%, #ff0000 42% 100%) !important; }
.countryFlag.flag-nl { background: linear-gradient(180deg, #ae1c28 0 33%, #fff 33% 66%, #21468b 66% 100%) !important; }
.countryFlag.flag-ch { background: linear-gradient(90deg, #d52b1e 0 100%) !important; }
.countryFlag.flag-au { background: linear-gradient(135deg, #012169, #173a7a) !important; }
.countryFlag.flag-nz { background: linear-gradient(135deg, #00247d, #103a8c) !important; }
.countryFlag.flag-ae { background: linear-gradient(90deg, #ff0000 0 28%, transparent 28%), linear-gradient(180deg, #00732f 0 33%, #fff 33% 66%, #000 66% 100%) !important; }
.countryFlag.flag-my { background: linear-gradient(180deg, #cc0001 0 14%, #fff 14% 28%, #cc0001 28% 42%, #fff 42% 56%, #cc0001 56% 70%, #fff 70% 84%, #cc0001 84% 100%) !important; }
.countryFlag.flag-ph { background: linear-gradient(180deg, #0038a8 0 50%, #ce1126 50% 100%) !important; }
.countryFlag.flag-vn { background: #da251d !important; }
.countryFlag.flag-hk { background: #de2910 !important; }
.countryFlag.flag-mo { background: #067662 !important; }
.countryFlag.flag-cn { background: #de2910 !important; }
.countryFlag.flag-in { background: linear-gradient(180deg, #ff9933 0 33%, #fff 33% 66%, #138808 66% 100%) !important; }
.countryFlag.flag-tr { background: #e30a17 !important; }
.countryFlag.flag-br { background: radial-gradient(circle at 50% 50%, #002776 0 22%, transparent 23%), #009c3b !important; }
.countryFlag.flag-mx { background: linear-gradient(90deg, #006847 0 33%, #fff 33% 66%, #ce1126 66% 100%) !important; }
.countryFlag.flag-za { background: linear-gradient(90deg, #007a4d 0 50%, #de3831 50% 100%) !important; }

@media (max-width: 760px) {
  .heroSearchFirst {
    min-height: auto;
    padding: 26px 14px 20px;
  }

  .heroSearchFirst h1,
  .heroSearchFirst h2 {
    font-size: 2.2rem;
    line-height: 1.05;
  }

  .quickStartCard {
    min-height: 66px;
  }

  .quickIcon {
    width: 46px;
    height: 46px;
    flex-basis: 46px;
  }
}



/* 2026-07-22: keep account/admin controls readable and non-overlapping. */
.accountSectionTabs {
  position: relative !important;
  top: auto !important;
  z-index: 3 !important;
  margin-bottom: 20px !important;
  overflow-x: auto;
  scrollbar-width: thin;
}

.tripInlineStatus {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin: 12px 0;
  padding: 14px 16px;
  border: 1px solid rgba(20, 184, 166, 0.35);
  border-radius: 16px;
  background: rgba(236, 253, 245, 0.96);
  color: #064e3b;
  font-weight: 800;
  box-shadow: 0 12px 30px rgba(15, 118, 110, 0.12);
}

.tripInlineStatus.loading {
  border-color: rgba(37, 99, 235, 0.35);
  background: rgba(239, 246, 255, 0.98);
  color: #1e3a8a;
}

.tripInlineStatus.error {
  border-color: rgba(220, 38, 38, 0.36);
  background: rgba(254, 242, 242, 0.98);
  color: #7f1d1d;
}

.adminMemberList article {
  align-items: stretch;
}

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

.adminMemberActions .tinyButton,
.dangerTiny {
  min-height: 36px;
  border-radius: 999px;
  font-weight: 900;
}

.dangerTiny {
  border-color: rgba(220, 38, 38, 0.32) !important;
  background: #fff1f2 !important;
  color: #9f1239 !important;
}

[data-theme="dark"] .tripInlineStatus,
html[data-theme="dark"] .tripInlineStatus {
  border-color: rgba(94, 234, 212, 0.46);
  background: rgba(19, 78, 74, 0.92);
  color: #ecfeff;
}

[data-theme="dark"] .tripInlineStatus.loading,
html[data-theme="dark"] .tripInlineStatus.loading {
  border-color: rgba(125, 211, 252, 0.46);
  background: rgba(30, 58, 138, 0.86);
  color: #f0f9ff;
}

[data-theme="dark"] .tripInlineStatus.error,
html[data-theme="dark"] .tripInlineStatus.error {
  border-color: rgba(252, 165, 165, 0.48);
  background: rgba(127, 29, 29, 0.86);
  color: #fff1f2;
}

[data-theme="dark"] .dangerTiny,
html[data-theme="dark"] .dangerTiny {
  border-color: rgba(251, 113, 133, 0.55) !important;
  background: rgba(127, 29, 29, 0.94) !important;
  color: #fff1f2 !important;
}

/* Member center polish: calm tabbed account settings with theme parity. */
.accountView.hasUser {
  display: grid;
  gap: 28px;
}

.accountSectionTabs {
  position: sticky;
  top: 78px;
  z-index: 24;
  display: flex;
  gap: 10px;
  align-items: stretch;
  margin: 0 0 20px;
  padding: 10px;
  overflow-x: auto;
  border: 1px solid rgba(20, 184, 166, .20);
  border-radius: 24px;
  background: rgba(245, 253, 250, .92);
  box-shadow: 0 18px 42px rgba(15, 23, 42, .08);
  backdrop-filter: blur(18px);
  scrollbar-width: thin;
}

.accountSectionTabs button {
  flex: 0 0 156px;
  min-height: 54px;
  display: grid;
  gap: 4px;
  align-content: center;
  padding: 10px 16px;
  text-align: left;
  color: #435467;
  border: 1px solid rgba(148, 163, 184, .28);
  border-radius: 18px;
  background: rgba(255, 255, 255, .78);
  box-shadow: none;
}

.accountSectionTabs button.active,
.accountSectionTabs button[aria-selected="true"] {
  color: #062f2b;
  border-color: rgba(20, 184, 166, .46);
  background: linear-gradient(135deg, #dffcf4, #fff2bd);
  box-shadow: 0 12px 24px rgba(20, 184, 166, .18);
}

.accountSectionTabs strong,
.accountSectionTabs button.active strong {
  color: inherit;
  font-size: .98rem;
  font-weight: 900;
}

.accountSectionTabs small {
  color: #66788d;
  font-size: .78rem;
  font-weight: 750;
}

.accountProfileHero,
.accountPanel,
.accountNextStepPanel,
.accountTrustSummary,
.accountCard,
.accountQuickPassword,
.accountSessionList,
.selfPublicProfileCard,
.securityPanel,
.recentReviewsCard {
  border: 1px solid rgba(20, 184, 166, .18);
  border-radius: 26px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .96), rgba(239, 253, 249, .86));
  box-shadow: 0 22px 48px rgba(15, 23, 42, .08);
}

.accountProfileHero {
  padding: 24px;
  border-left: 5px solid #0f8a7b;
}

.accountProfileHero h2,
.accountPanel h2,
.accountNextStepPanel h2,
.accountTrustSummary h2,
.accountCard h3,
.accountQuickPassword h3,
.accountSessionList h3,
.selfPublicProfileCard h3 {
  color: #102033;
  letter-spacing: 0;
}

.accountProfileHero p,
.accountPanel p,
.accountNextStepPanel p,
.accountTrustSummary p,
.accountCard p,
.accountQuickPassword p,
.accountSessionList p,
.selfPublicProfileCard p,
.accountProfileHero small,
.accountPanel small,
.accountNextStepPanel small,
.accountTrustSummary small {
  color: #526274;
}

.profileQuickForm {
  grid-template-columns: minmax(180px, 1fr) minmax(180px, 1fr) auto auto;
  gap: 14px;
  align-items: end;
}

.profileQuickForm label,
.profileColorField,
.accountQuickPassword label,
.accountPanel label,
.accountSessionList label {
  color: #34465a;
  font-weight: 850;
}

.profileQuickForm input,
.accountQuickPassword input,
.accountPanel input:not([type="checkbox"]):not([type="radio"]),
.accountPanel select,
.accountPanel textarea {
  min-height: 50px;
  color: #102033;
  font-weight: 850;
  border: 1px solid rgba(148, 163, 184, .38);
  border-radius: 16px;
  background: rgba(255, 255, 255, .96);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .85);
}

.accountQuickStats,
.accountSetupStrip,
.accountShortcutGrid,
.accountStatusStrip,
.selfPublicProfileStats {
  gap: 12px;
}

.accountQuickStats article,
.accountSetupStrip span,
.accountShortcutGrid a,
.accountStatusStrip span,
.accountSessionList article,
.selfPublicProfileStats span {
  color: #102033;
  border: 1px solid rgba(148, 163, 184, .28);
  border-radius: 18px;
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 10px 24px rgba(15, 23, 42, .06);
}

.accountQuickStats strong,
.accountSetupStrip b,
.accountShortcutGrid strong,
.accountStatusStrip b,
.selfPublicProfileStats b {
  color: #0f766e;
  font-weight: 950;
}

.accountNextStepList button,
.accountQuickNextList button {
  min-height: 104px;
  display: grid;
  grid-template-columns: 60px minmax(0, 1fr);
  gap: 16px;
  align-items: center;
  text-align: left;
  color: #102033;
  border: 1px solid rgba(20, 184, 166, .24);
  border-radius: 22px;
  background: rgba(255, 255, 255, .94);
}

.accountNextStepList i,
.accountQuickNextList i,
.accountQuickIcon {
  width: 60px;
  height: 60px;
  display: grid;
  place-items: center;
  color: #065f56;
  border-radius: 20px;
  background: linear-gradient(135deg, #ccfbf1, #fde68a);
  box-shadow: 0 12px 26px rgba(20, 184, 166, .18);
}

.accountNextStepList strong,
.accountQuickNextList strong {
  color: #102033;
  font-size: 1rem;
}

.accountNextStepList small,
.accountQuickNextList small,
.accountSessionList small,
.selfPublicProfileStats small {
  color: #64748b;
}

[data-theme="dark"] .accountSectionTabs,
html[data-theme="dark"] .accountSectionTabs {
  border-color: rgba(148, 163, 184, .24);
  background: rgba(15, 23, 42, .94);
  box-shadow: 0 20px 48px rgba(0, 0, 0, .28);
}

[data-theme="dark"] .accountSectionTabs button,
html[data-theme="dark"] .accountSectionTabs button {
  color: #dbe7f3;
  border-color: rgba(148, 163, 184, .28);
  background: rgba(30, 41, 59, .78);
}

[data-theme="dark"] .accountSectionTabs button.active,
[data-theme="dark"] .accountSectionTabs button[aria-selected="true"],
html[data-theme="dark"] .accountSectionTabs button.active,
html[data-theme="dark"] .accountSectionTabs button[aria-selected="true"] {
  color: #06131a;
  border-color: rgba(94, 234, 212, .72);
  background: linear-gradient(135deg, #99f6e4, #fde68a);
}

[data-theme="dark"] .accountSectionTabs small,
html[data-theme="dark"] .accountSectionTabs small {
  color: #cbd5e1;
}

/* Keep marketplace section title ornaments out of the text flow. */
.pulseFeed h3,
.pulseTrips h3 {
  display: grid !important;
  grid-template-columns: 38px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 12px !important;
  position: relative !important;
  min-height: 44px !important;
  padding: 0 !important;
  overflow: visible !important;
}

.pulseFeed h3::before,
.pulseTrips h3::before {
  content: "" !important;
  position: static !important;
  display: block !important;
  grid-column: 1 !important;
  width: 38px !important;
  height: 38px !important;
  border-radius: 14px !important;
  background: linear-gradient(135deg, rgba(80, 227, 194, .22), rgba(247, 215, 94, .6)) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.45), 0 10px 22px rgba(15, 118, 110, .08) !important;
  transform: none !important;
}

.pulseFeed h3::after,
.pulseTrips h3::after {
  content: none !important;
  display: none !important;
}

/* Product-detail modal polish for marketplace wish preview. */
.sheetBackdrop.wishPreviewBackdrop,
.wishPreviewBackdrop {
  align-items: center !important;
  justify-content: center !important;
  padding: clamp(16px, 4vw, 42px) !important;
  background: rgba(15, 23, 42, .58) !important;
}

.wishPreviewSheet.detailed,
.wishPreviewSheet {
  width: min(980px, calc(100vw - 48px)) !important;
  max-width: min(980px, calc(100vw - 48px)) !important;
  max-height: min(860px, calc(100dvh - 56px)) !important;
  overflow: auto !important;
  display: grid !important;
  gap: 20px !important;
  padding: clamp(22px, 3vw, 34px) !important;
  border-radius: 30px !important;
  background:
    linear-gradient(135deg, rgba(255,255,255,.98), rgba(241,253,249,.96)),
    radial-gradient(circle at 96% 0%, rgba(80, 227, 194, .16), transparent 32%) !important;
  border: 1px solid rgba(15, 118, 110, .2) !important;
  box-shadow: 0 40px 120px rgba(15, 23, 42, .32) !important;
  scrollbar-gutter: stable !important;
}

.wishPreviewSheet.detailed .sheetClose {
  top: 16px !important;
  right: 16px !important;
  z-index: 2 !important;
}

.wishPreviewTop {
  grid-template-columns: minmax(260px, 360px) minmax(0, 1fr) !important;
  gap: clamp(20px, 4vw, 34px) !important;
  align-items: center !important;
  padding-right: 48px !important;
}

.wishPreviewMedia {
  min-height: 280px !important;
  border-radius: 28px !important;
  background:
    linear-gradient(135deg, rgba(236,253,245,.92), rgba(239,246,255,.92)) !important;
}

.wishPreviewMedia img {
  min-height: 280px !important;
  object-fit: contain !important;
  padding: 16px !important;
  background: #fff !important;
}

.wishPreviewIntro .eyebrow {
  color: #b45309 !important;
  font-weight: 950 !important;
  letter-spacing: .02em !important;
}

.wishPreviewIntro h2 {
  margin: 10px 0 14px !important;
  font-size: clamp(30px, 4vw, 46px) !important;
  line-height: 1.08 !important;
  letter-spacing: 0 !important;
  color: #102033 !important;
}

.wishPreviewIntro p {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 0 !important;
  color: #526274 !important;
  font-size: 1.02rem !important;
}

.wishPreviewFacts {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

.wishPreviewFacts div {
  min-height: 92px !important;
  display: grid !important;
  align-content: center !important;
  padding: 18px !important;
  border-radius: 22px !important;
  background: rgba(255, 255, 255, .9) !important;
  box-shadow: 0 14px 32px rgba(15, 23, 42, .06) !important;
}

.wishPreviewFacts dd {
  font-size: 1.08rem !important;
}

.wishPreviewDetails {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 14px !important;
}

.wishPreviewDetails div,
.wishPreviewLongNote {
  min-height: 88px !important;
  display: grid !important;
  align-content: center !important;
  padding: 18px 20px !important;
  border-radius: 22px !important;
  background: rgba(255, 255, 255, .88) !important;
  box-shadow: 0 14px 34px rgba(15, 23, 42, .05) !important;
}

.wishPreviewLongNote {
  align-content: start !important;
}

.wishPreviewSheet.detailed .buttonRow {
  position: sticky !important;
  bottom: -34px !important;
  margin: 0 -34px -34px !important;
  padding: 18px 34px 22px !important;
  display: grid !important;
  grid-template-columns: minmax(220px, 1fr) minmax(160px, auto) !important;
  gap: 14px !important;
  background: linear-gradient(180deg, rgba(255,255,255,.72), rgba(255,255,255,.98) 34%) !important;
  border-top: 1px solid rgba(15, 118, 110, .14) !important;
}

[data-theme="dark"] .wishPreviewSheet.detailed,
html[data-theme="dark"] .wishPreviewSheet.detailed,
[data-theme="dark"] .wishPreviewSheet,
html[data-theme="dark"] .wishPreviewSheet {
  background:
    linear-gradient(135deg, rgba(15,23,42,.98), rgba(17,47,54,.96)),
    radial-gradient(circle at 92% 0%, rgba(94,234,212,.14), transparent 34%) !important;
  border-color: rgba(94,234,212,.28) !important;
}

[data-theme="dark"] .wishPreviewIntro h2,
html[data-theme="dark"] .wishPreviewIntro h2,
[data-theme="dark"] .wishPreviewFacts dd,
html[data-theme="dark"] .wishPreviewFacts dd,
[data-theme="dark"] .wishPreviewDetails dd,
html[data-theme="dark"] .wishPreviewDetails dd {
  color: #f8fafc !important;
}

[data-theme="dark"] .wishPreviewIntro p,
html[data-theme="dark"] .wishPreviewIntro p {
  color: #cbd5e1 !important;
}

[data-theme="dark"] .wishPreviewFacts div,
html[data-theme="dark"] .wishPreviewFacts div,
[data-theme="dark"] .wishPreviewDetails div,
html[data-theme="dark"] .wishPreviewDetails div,
[data-theme="dark"] .wishPreviewLongNote,
html[data-theme="dark"] .wishPreviewLongNote {
  background: rgba(15, 23, 42, .72) !important;
  border-color: rgba(148, 163, 184, .26) !important;
  box-shadow: none !important;
}

[data-theme="dark"] .wishPreviewSheet.detailed .buttonRow,
html[data-theme="dark"] .wishPreviewSheet.detailed .buttonRow {
  background: linear-gradient(180deg, rgba(15,23,42,.62), rgba(15,23,42,.98) 34%) !important;
  border-top-color: rgba(148, 163, 184, .22) !important;
}

@media (max-width: 720px) {
  .sheetBackdrop.wishPreviewBackdrop,
  .wishPreviewBackdrop {
    align-items: end !important;
    padding: 10px !important;
  }

  .wishPreviewSheet.detailed,
  .wishPreviewSheet {
    width: 100% !important;
    max-width: 100% !important;
    max-height: calc(100dvh - 20px) !important;
    padding: 18px !important;
    border-radius: 28px !important;
  }

  .wishPreviewTop {
    grid-template-columns: 1fr !important;
    padding-right: 44px !important;
  }

  .wishPreviewMedia,
  .wishPreviewMedia img,
  .wishPreviewMediaEmpty {
    min-height: 210px !important;
  }

  .wishPreviewIntro h2 {
    font-size: clamp(25px, 8vw, 34px) !important;
  }

  .wishPreviewFacts,
  .wishPreviewDetails {
    grid-template-columns: 1fr !important;
  }

  .wishPreviewSheet.detailed .buttonRow {
    bottom: -18px !important;
    margin: 0 -18px -18px !important;
    padding: 14px 18px 18px !important;
    grid-template-columns: 1fr !important;
  }
}

/* Admin system guide: concise operations handbook inside the dashboard. */
.systemGuidePanel {
  display: grid;
  gap: 18px;
}

.systemGuideHero {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(15, 118, 110, 0.24);
  border-radius: 22px;
  padding: 24px;
  background:
    radial-gradient(circle at top right, rgba(45, 212, 191, 0.18), transparent 34%),
    linear-gradient(135deg, rgba(240, 253, 250, 0.96), rgba(255, 251, 235, 0.88));
  box-shadow: 0 22px 55px rgba(15, 23, 42, 0.08);
}

.systemGuideHero span {
  color: var(--teal);
  font-weight: 900;
  letter-spacing: 0;
}

.systemGuideHero h2 {
  margin: 8px 0;
  font-size: clamp(26px, 3vw, 42px);
  line-height: 1.05;
}

.systemGuideHero p {
  max-width: 760px;
  margin: 0;
  color: var(--muted);
  line-height: 1.8;
}

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

.systemGuideGrid article {
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 18px;
  background: var(--panel);
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.06);
}

.systemGuideGrid b {
  display: block;
  margin-bottom: 10px;
  color: var(--text);
  font-size: 18px;
}

.systemGuideGrid p,
.systemGuideGrid li {
  color: var(--muted);
  line-height: 1.75;
}

.systemGuideGrid ul {
  margin: 0;
  padding-left: 20px;
}

.systemGuideGrid pre {
  overflow-x: auto;
  margin: 10px 0 0;
  border: 1px solid rgba(15, 118, 110, 0.16);
  border-radius: 14px;
  padding: 14px;
  background: #0f172a;
  color: #e5f7f4;
  white-space: pre;
}

.systemGuideGrid code {
  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
  font-size: 13px;
}

[data-theme="dark"] .systemGuideHero,
html[data-theme="dark"] .systemGuideHero {
  border-color: rgba(94, 234, 212, 0.34);
  background:
    radial-gradient(circle at top right, rgba(45, 212, 191, 0.2), transparent 36%),
    linear-gradient(135deg, rgba(15, 23, 42, 0.98), rgba(30, 41, 59, 0.92));
  box-shadow: none;
}

[data-theme="dark"] .systemGuideHero h2,
html[data-theme="dark"] .systemGuideHero h2,
[data-theme="dark"] .systemGuideGrid b,
html[data-theme="dark"] .systemGuideGrid b {
  color: #f8fafc;
}

[data-theme="dark"] .systemGuideHero p,
html[data-theme="dark"] .systemGuideHero p,
[data-theme="dark"] .systemGuideGrid p,
html[data-theme="dark"] .systemGuideGrid p,
[data-theme="dark"] .systemGuideGrid li,
html[data-theme="dark"] .systemGuideGrid li {
  color: #cbd5e1;
}

[data-theme="dark"] .systemGuideGrid article,
html[data-theme="dark"] .systemGuideGrid article {
  border-color: rgba(148, 163, 184, 0.26);
  background: rgba(15, 23, 42, 0.88);
  box-shadow: none;
}

[data-theme="dark"] .systemGuideGrid pre,
html[data-theme="dark"] .systemGuideGrid pre {
  border-color: rgba(94, 234, 212, 0.24);
  background: #020617;
  color: #dffcf8;
}

@media (max-width: 760px) {
  .systemGuideHero {
    border-radius: 18px;
    padding: 18px;
  }

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

.countryFlag,
.countryLabel .countryFlag,
.pulseIcon .countryFlag,
.wishPreviewHero .countryFlag,
.miniCountryPills .countryFlag {
  color: #111827 !important;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Twemoji Mozilla", sans-serif !important;
  font-variant-emoji: emoji;
  letter-spacing: 0;
  line-height: 1;
  text-shadow: none !important;
}

[data-theme="dark"] .countryFlag,
html[data-theme="dark"] .countryFlag,
[data-theme="dark"] .countryLabel .countryFlag,
html[data-theme="dark"] .countryLabel .countryFlag,
[data-theme="dark"] .pulseIcon .countryFlag,
html[data-theme="dark"] .pulseIcon .countryFlag {
  color: #f8fafc !important;
}

.countryFlag[class*="flag-"]::before,
.countryFlag[class*="flag-"]::after {
  content: none !important;
  display: none !important;
}

.countryFlag.flag-fallback {
  font-family: inherit !important;
  font-size: 12px;
  font-weight: 900;
}

.wishPreviewSheet.detailed {
  max-width: min(92vw, 720px);
  display: grid;
  gap: 18px;
}

.wishPreviewTop {
  display: grid;
  grid-template-columns: minmax(180px, 260px) minmax(0, 1fr);
  gap: 18px;
  align-items: stretch;
}

.wishPreviewMedia {
  min-height: 190px;
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid rgba(15, 118, 110, .18);
  background: linear-gradient(135deg, rgba(236, 253, 245, .96), rgba(239, 246, 255, .82));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .42);
}

.wishPreviewMedia img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 190px;
  object-fit: cover;
}

.wishPreviewMediaEmpty {
  min-height: 190px;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 12px;
  padding: 18px;
  color: #475569;
  text-align: center;
  font-weight: 850;
}

.wishPreviewMediaEmpty .countryFlag {
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  border-radius: 20px;
  background: rgba(255, 255, 255, .82);
  border: 1px solid rgba(15, 118, 110, .2);
  font-size: 30px;
}

.wishPreviewIntro {
  min-width: 0;
  align-self: center;
}

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

.wishPreviewDetails div,
.wishPreviewLongNote {
  padding: 13px 14px;
  border: 1px solid rgba(15, 118, 110, .18);
  border-radius: 16px;
  background: rgba(255, 255, 255, .72);
}

.wishPreviewDetails dt {
  margin-bottom: 5px;
  color: #64748b;
  font-size: .78rem;
  font-weight: 850;
}

.wishPreviewDetails dd {
  margin: 0;
  color: #0f172a;
  font-weight: 850;
  overflow-wrap: anywhere;
}

.wishPreviewDetails a {
  color: #0f766e;
  text-decoration: none;
  border-bottom: 1px solid rgba(15, 118, 110, .24);
}

.wishPreviewLongNote {
  display: grid;
  gap: 6px;
}

.wishPreviewLongNote strong {
  color: #0f766e;
}

.wishPreviewLongNote p {
  margin: 0;
  color: #334155;
  line-height: 1.65;
}

.wishPreviewLongNote.warning {
  border-color: rgba(180, 83, 9, .28);
  background: rgba(255, 251, 235, .78);
}

html[data-theme="dark"] .wishPreviewMedia,
[data-theme="dark"] .wishPreviewMedia {
  background: linear-gradient(135deg, rgba(15, 23, 42, .92), rgba(30, 41, 59, .72));
  border-color: rgba(94, 234, 212, .24);
}

html[data-theme="dark"] .wishPreviewMediaEmpty,
[data-theme="dark"] .wishPreviewMediaEmpty {
  color: #cbd5e1;
}

html[data-theme="dark"] .wishPreviewDetails div,
[data-theme="dark"] .wishPreviewDetails div,
html[data-theme="dark"] .wishPreviewLongNote,
[data-theme="dark"] .wishPreviewLongNote {
  background: rgba(15, 23, 42, .72);
  border-color: rgba(148, 163, 184, .24);
}

html[data-theme="dark"] .wishPreviewDetails dt,
[data-theme="dark"] .wishPreviewDetails dt {
  color: #cbd5e1;
}

html[data-theme="dark"] .wishPreviewDetails dd,
[data-theme="dark"] .wishPreviewDetails dd,
html[data-theme="dark"] .wishPreviewLongNote p,
[data-theme="dark"] .wishPreviewLongNote p {
  color: #f8fafc;
}

@media (max-width: 640px) {
  .wishPreviewSheet.detailed {
    max-width: calc(100vw - 18px);
    gap: 14px;
  }

  .wishPreviewTop,
  .wishPreviewDetails {
    grid-template-columns: 1fr;
  }

  .wishPreviewMedia,
  .wishPreviewMedia img,
  .wishPreviewMediaEmpty {
    min-height: 180px;
  }
}

[data-theme="dark"] .accountSectionTabs button.active small,
html[data-theme="dark"] .accountSectionTabs button.active small {
  color: #164e63;
}

[data-theme="dark"] .accountProfileHero,
[data-theme="dark"] .accountPanel,
[data-theme="dark"] .accountNextStepPanel,
[data-theme="dark"] .accountTrustSummary,
[data-theme="dark"] .accountCard,
[data-theme="dark"] .accountQuickPassword,
[data-theme="dark"] .accountSessionList,
[data-theme="dark"] .selfPublicProfileCard,
[data-theme="dark"] .securityPanel,
[data-theme="dark"] .recentReviewsCard,
html[data-theme="dark"] .accountProfileHero,
html[data-theme="dark"] .accountPanel,
html[data-theme="dark"] .accountNextStepPanel,
html[data-theme="dark"] .accountTrustSummary,
html[data-theme="dark"] .accountCard,
html[data-theme="dark"] .accountQuickPassword,
html[data-theme="dark"] .accountSessionList,
html[data-theme="dark"] .selfPublicProfileCard,
html[data-theme="dark"] .securityPanel,
html[data-theme="dark"] .recentReviewsCard {
  color: #f8fafc;
  border-color: rgba(148, 163, 184, .26);
  background:
    linear-gradient(135deg, rgba(30, 41, 59, .98), rgba(15, 23, 42, .96));
  box-shadow: 0 24px 54px rgba(0, 0, 0, .28);
}

[data-theme="dark"] .accountProfileHero h2,
[data-theme="dark"] .accountPanel h2,
[data-theme="dark"] .accountNextStepPanel h2,
[data-theme="dark"] .accountTrustSummary h2,
[data-theme="dark"] .accountCard h3,
[data-theme="dark"] .accountQuickPassword h3,
[data-theme="dark"] .accountSessionList h3,
[data-theme="dark"] .selfPublicProfileCard h3,
html[data-theme="dark"] .accountProfileHero h2,
html[data-theme="dark"] .accountPanel h2,
html[data-theme="dark"] .accountNextStepPanel h2,
html[data-theme="dark"] .accountTrustSummary h2,
html[data-theme="dark"] .accountCard h3,
html[data-theme="dark"] .accountQuickPassword h3,
html[data-theme="dark"] .accountSessionList h3,
html[data-theme="dark"] .selfPublicProfileCard h3 {
  color: #ffffff;
}

[data-theme="dark"] .accountProfileHero p,
[data-theme="dark"] .accountPanel p,
[data-theme="dark"] .accountNextStepPanel p,
[data-theme="dark"] .accountTrustSummary p,
[data-theme="dark"] .accountCard p,
[data-theme="dark"] .accountQuickPassword p,
[data-theme="dark"] .accountSessionList p,
[data-theme="dark"] .selfPublicProfileCard p,
[data-theme="dark"] .accountProfileHero small,
[data-theme="dark"] .accountPanel small,
[data-theme="dark"] .accountNextStepPanel small,
[data-theme="dark"] .accountTrustSummary small,
html[data-theme="dark"] .accountProfileHero p,
html[data-theme="dark"] .accountPanel p,
html[data-theme="dark"] .accountNextStepPanel p,
html[data-theme="dark"] .accountTrustSummary p,
html[data-theme="dark"] .accountCard p,
html[data-theme="dark"] .accountQuickPassword p,
html[data-theme="dark"] .accountSessionList p,
html[data-theme="dark"] .selfPublicProfileCard p,
html[data-theme="dark"] .accountProfileHero small,
html[data-theme="dark"] .accountPanel small,
html[data-theme="dark"] .accountNextStepPanel small,
html[data-theme="dark"] .accountTrustSummary small {
  color: #dbe7f3;
}

[data-theme="dark"] .profileQuickForm label,
[data-theme="dark"] .profileColorField,
[data-theme="dark"] .accountQuickPassword label,
[data-theme="dark"] .accountPanel label,
[data-theme="dark"] .accountSessionList label,
html[data-theme="dark"] .profileQuickForm label,
html[data-theme="dark"] .profileColorField,
html[data-theme="dark"] .accountQuickPassword label,
html[data-theme="dark"] .accountPanel label,
html[data-theme="dark"] .accountSessionList label {
  color: #e2e8f0;
}

[data-theme="dark"] .profileQuickForm input,
[data-theme="dark"] .accountQuickPassword input,
[data-theme="dark"] .accountPanel input:not([type="checkbox"]):not([type="radio"]),
[data-theme="dark"] .accountPanel select,
[data-theme="dark"] .accountPanel textarea,
html[data-theme="dark"] .profileQuickForm input,
html[data-theme="dark"] .accountQuickPassword input,
html[data-theme="dark"] .accountPanel input:not([type="checkbox"]):not([type="radio"]),
html[data-theme="dark"] .accountPanel select,
html[data-theme="dark"] .accountPanel textarea {
  color: #0f172a;
  background: #ffffff;
  border-color: rgba(226, 232, 240, .74);
}

[data-theme="dark"] .accountQuickStats article,
[data-theme="dark"] .accountSetupStrip span,
[data-theme="dark"] .accountShortcutGrid a,
[data-theme="dark"] .accountStatusStrip span,
[data-theme="dark"] .accountSessionList article,
[data-theme="dark"] .selfPublicProfileStats span,
html[data-theme="dark"] .accountQuickStats article,
html[data-theme="dark"] .accountSetupStrip span,
html[data-theme="dark"] .accountShortcutGrid a,
html[data-theme="dark"] .accountStatusStrip span,
html[data-theme="dark"] .accountSessionList article,
html[data-theme="dark"] .selfPublicProfileStats span {
  color: #f8fafc;
  border-color: rgba(148, 163, 184, .28);
  background: rgba(15, 23, 42, .76);
}

[data-theme="dark"] .accountNextStepList button,
[data-theme="dark"] .accountQuickNextList button,
html[data-theme="dark"] .accountNextStepList button,
html[data-theme="dark"] .accountQuickNextList button {
  color: #f8fafc;
  border-color: rgba(94, 234, 212, .28);
  background: rgba(15, 23, 42, .82);
}

[data-theme="dark"] .accountNextStepList strong,
[data-theme="dark"] .accountQuickNextList strong,
html[data-theme="dark"] .accountNextStepList strong,
html[data-theme="dark"] .accountQuickNextList strong {
  color: #ffffff;
}

[data-theme="dark"] .accountNextStepList small,
[data-theme="dark"] .accountQuickNextList small,
[data-theme="dark"] .accountSessionList small,
[data-theme="dark"] .selfPublicProfileStats small,
html[data-theme="dark"] .accountNextStepList small,
html[data-theme="dark"] .accountQuickNextList small,
html[data-theme="dark"] .accountSessionList small,
html[data-theme="dark"] .selfPublicProfileStats small {
  color: #cbd5e1;
}

@media (max-width: 900px) {
  .accountView.hasUser {
    gap: 22px;
  }

  .accountSectionTabs {
    top: 64px;
    margin: 0 -2px 16px;
    border-radius: 20px;
  }

  .accountSectionTabs button {
    flex-basis: 128px;
    min-height: 50px;
    padding: 9px 12px;
  }

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

  .accountQuickStats,
  .accountSetupStrip,
  .accountShortcutGrid,
  .accountStatusStrip,
  .selfPublicProfileStats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* 2026-07-27 mobile app polish: softer app surfaces, clearer CTAs, and safer theme contrast. */
:root {
  --app-radius-lg: 24px;
  --app-radius-md: 18px;
  --app-accent: #12b8a6;
  --app-accent-2: #f4d06f;
  --app-ink-strong: #101827;
  --app-soft-bg: #f6fbf9;
  --app-glass: rgba(255, 255, 255, .82);
}

body {
  background:
    radial-gradient(circle at 10% 0%, rgba(18, 184, 166, .10), transparent 34%),
    radial-gradient(circle at 92% 8%, rgba(244, 208, 111, .13), transparent 32%),
    linear-gradient(180deg, #fffdf8 0%, #f6fbf9 48%, #fffaf3 100%);
}

.primaryButton,
.button.primary,
.buttonRow .primaryButton,
button.primaryButton,
.ctaButton {
  color: #062a25;
  background: linear-gradient(135deg, #5eead4 0%, #f4d06f 100%);
  border-color: rgba(15, 118, 110, .28);
  box-shadow: 0 14px 34px rgba(18, 184, 166, .18);
}

.primaryButton:hover,
button.primaryButton:hover,
.ctaButton:hover {
  transform: translateY(-1px);
  box-shadow: 0 18px 42px rgba(18, 184, 166, .24);
}

.softButton,
.tinyButton,
.ghostButton,
.secondaryAction {
  border-radius: 999px;
}

.quickStartPanel,
.marketPulse,
.accountView.hasUser,
.accountProfileHero,
.accountPanel,
.accountCard,
.trustedMemberCard,
.recentReviewsCard,
.tripHero,
.travelerDeskHero,
.tripCard,
.matchCard,
.orderCard,
.adminTile,
.adminSubPanel,
.policyCard,
.supportDesk,
.paymentAgreementPanel {
  border-radius: var(--app-radius-lg);
}

.quickStartPanel,
.accountPanel,
.accountCard,
.recentReviewsCard,
.tripCard,
.matchCard,
.orderCard,
.adminSubPanel,
.policyCard,
.paymentAgreementPanel {
  box-shadow: 0 18px 48px rgba(15, 23, 42, .07);
}

.quickStartCard,
.mobileQuickTasks button,
.accountSectionTabs button,
.pulseItem,
.pulseCountryRail button,
.countryCard,
.areaList article,
.readinessPanel article,
.notificationCard,
.settingsGrid article {
  border-radius: var(--app-radius-md);
}

.quickIcon,
.quickStartCard .glyph,
.mobileQuickTasks .glyph,
.pulseFeed h3::before,
.pulseTrips h3::before {
  color: #063b36;
  background:
    linear-gradient(135deg, rgba(94, 234, 212, .95), rgba(244, 208, 111, .82));
  border-color: rgba(15, 118, 110, .18);
}

.pulseFeed h3::before,
.pulseTrips h3::before {
  content: "";
  position: relative;
  flex: 0 0 auto;
}

.pulseFeed h3::after,
.pulseTrips h3::after {
  content: "";
  width: 6px;
  height: 6px;
  margin-left: -32px;
  border-radius: 999px;
  background: #0f766e;
  box-shadow:
    10px 0 0 rgba(15, 118, 110, .76),
    20px 0 0 rgba(244, 208, 111, .90);
}

.marketPulse {
  background:
    linear-gradient(120deg, rgba(255, 253, 249, .96) 0%, rgba(236, 253, 245, .86) 56%, rgba(255, 247, 230, .86) 100%),
    url("./images/bondmai-hero-handoff.webp") right center / min(42%, 620px) auto no-repeat;
}

.marketPulse::before {
  background:
    radial-gradient(circle at 15% 10%, rgba(94, 234, 212, .16), transparent 34%),
    linear-gradient(90deg, rgba(255, 253, 249, .99) 0%, rgba(255, 253, 249, .88) 50%, rgba(255, 253, 249, .44) 100%);
}

.accountSectionTabs {
  position: relative;
  z-index: 2;
  gap: 8px;
  padding: 8px;
  border-radius: 24px;
  background: rgba(255, 255, 255, .86);
  box-shadow: 0 14px 38px rgba(15, 23, 42, .08);
  backdrop-filter: blur(14px);
}

.accountSectionTabs button {
  min-height: 54px;
  border-color: rgba(15, 118, 110, .18);
}

.accountSectionTabs button.active {
  color: #062f2b;
  background: linear-gradient(135deg, rgba(204, 251, 241, .98), rgba(254, 243, 199, .92));
  box-shadow: inset 0 0 0 1px rgba(15, 118, 110, .34), 0 10px 24px rgba(15, 118, 110, .12);
}

.mobileActionBar {
  border-radius: 24px;
  background: rgba(255, 255, 255, .92);
  border-color: rgba(15, 118, 110, .18);
  box-shadow: 0 20px 54px rgba(15, 23, 42, .18);
}

.mobileActionBar button {
  border-radius: 18px;
}

.mobileActionBar span {
  color: #063b36;
  background: linear-gradient(135deg, #ccfbf1, #fef3c7);
  box-shadow: inset 0 0 0 1px rgba(15, 118, 110, .10);
}

.mobileActionBar button.active {
  color: #062f2b;
  background: linear-gradient(135deg, rgba(204, 251, 241, .96), rgba(254, 243, 199, .94));
  box-shadow: 0 12px 26px rgba(15, 118, 110, .18);
}

:where(.quickStartCard, .pulseItem, .accountCard, .tripCard, .matchCard, .orderCard, .adminTile, .policyCard) {
  transition:
    transform .18s ease,
    box-shadow .18s ease,
    border-color .18s ease,
    background .18s ease;
}

:where(.quickStartCard, .pulseItem, .accountCard, .tripCard, .matchCard, .orderCard, .adminTile, .policyCard):hover {
  transform: translateY(-2px);
  box-shadow: 0 22px 54px rgba(15, 23, 42, .10);
}

@media (prefers-reduced-motion: reduce) {
  :where(.quickStartCard, .pulseItem, .accountCard, .tripCard, .matchCard, .orderCard, .adminTile, .policyCard),
  .primaryButton,
  button.primaryButton {
    transition: none;
  }

  :where(.quickStartCard, .pulseItem, .accountCard, .tripCard, .matchCard, .orderCard, .adminTile, .policyCard):hover,
  .primaryButton:hover,
  button.primaryButton:hover {
    transform: none;
  }
}

[data-theme="dark"],
html[data-theme="dark"] {
  --app-glass: rgba(15, 23, 42, .82);
}

[data-theme="dark"] body,
html[data-theme="dark"] body {
  background:
    radial-gradient(circle at 18% 0%, rgba(20, 184, 166, .16), transparent 34%),
    radial-gradient(circle at 88% 8%, rgba(244, 208, 111, .11), transparent 32%),
    linear-gradient(180deg, #07111d 0%, #0d1724 52%, #09131f 100%);
  color: #f8fafc;
}

[data-theme="dark"] .topbar,
html[data-theme="dark"] .topbar {
  background: rgba(7, 17, 29, .94);
  border-color: rgba(148, 163, 184, .18);
}

[data-theme="dark"] .accountSectionTabs,
html[data-theme="dark"] .accountSectionTabs,
[data-theme="dark"] .mobileActionBar,
html[data-theme="dark"] .mobileActionBar {
  background: rgba(15, 23, 42, .90);
  border-color: rgba(148, 163, 184, .24);
}

[data-theme="dark"] .accountSectionTabs button,
html[data-theme="dark"] .accountSectionTabs button,
[data-theme="dark"] .mobileActionBar button,
html[data-theme="dark"] .mobileActionBar button {
  color: #dbe7f3;
  background: rgba(15, 23, 42, .70);
  border-color: rgba(148, 163, 184, .20);
}

[data-theme="dark"] .accountSectionTabs button.active,
html[data-theme="dark"] .accountSectionTabs button.active,
[data-theme="dark"] .mobileActionBar button.active,
html[data-theme="dark"] .mobileActionBar button.active {
  color: #05131f;
  background: linear-gradient(135deg, #99f6e4, #fde68a);
  border-color: rgba(255, 255, 255, .26);
}

[data-theme="dark"] .quickStartPanel,
html[data-theme="dark"] .quickStartPanel,
[data-theme="dark"] .accountView.hasUser,
html[data-theme="dark"] .accountView.hasUser,
[data-theme="dark"] .accountPanel,
html[data-theme="dark"] .accountPanel,
[data-theme="dark"] .accountCard,
html[data-theme="dark"] .accountCard,
[data-theme="dark"] .recentReviewsCard,
html[data-theme="dark"] .recentReviewsCard,
[data-theme="dark"] .tripCard,
html[data-theme="dark"] .tripCard,
[data-theme="dark"] .matchCard,
html[data-theme="dark"] .matchCard,
[data-theme="dark"] .orderCard,
html[data-theme="dark"] .orderCard,
[data-theme="dark"] .adminSubPanel,
html[data-theme="dark"] .adminSubPanel,
[data-theme="dark"] .policyCard,
html[data-theme="dark"] .policyCard,
[data-theme="dark"] .paymentAgreementPanel,
html[data-theme="dark"] .paymentAgreementPanel {
  color: #f8fafc;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .02)),
    rgba(15, 23, 42, .88);
  border-color: rgba(148, 163, 184, .24);
}

[data-theme="dark"] .quickStartCard,
html[data-theme="dark"] .quickStartCard,
[data-theme="dark"] .mobileQuickTasks button,
html[data-theme="dark"] .mobileQuickTasks button,
[data-theme="dark"] .pulseItem,
html[data-theme="dark"] .pulseItem,
[data-theme="dark"] .pulseCountryRail button,
html[data-theme="dark"] .pulseCountryRail button,
[data-theme="dark"] .countryCard,
html[data-theme="dark"] .countryCard,
[data-theme="dark"] .areaList article,
html[data-theme="dark"] .areaList article,
[data-theme="dark"] .readinessPanel article,
html[data-theme="dark"] .readinessPanel article,
[data-theme="dark"] .notificationCard,
html[data-theme="dark"] .notificationCard,
[data-theme="dark"] .settingsGrid article,
html[data-theme="dark"] .settingsGrid article {
  color: #f8fafc;
  background: rgba(15, 23, 42, .86);
  border-color: rgba(148, 163, 184, .24);
}

[data-theme="dark"] :where(.quickStartCard, .mobileQuickTasks button, .pulseItem, .pulseCountryRail button, .countryCard, .areaList article, .notificationCard) small,
html[data-theme="dark"] :where(.quickStartCard, .mobileQuickTasks button, .pulseItem, .pulseCountryRail button, .countryCard, .areaList article, .notificationCard) small,
[data-theme="dark"] :where(.quickStartCard, .mobileQuickTasks button, .pulseItem, .pulseCountryRail button, .countryCard, .areaList article, .notificationCard) p,
html[data-theme="dark"] :where(.quickStartCard, .mobileQuickTasks button, .pulseItem, .pulseCountryRail button, .countryCard, .areaList article, .notificationCard) p {
  color: #cbd5e1;
}

[data-theme="dark"] .quickIcon,
html[data-theme="dark"] .quickIcon,
[data-theme="dark"] .quickStartCard .glyph,
html[data-theme="dark"] .quickStartCard .glyph,
[data-theme="dark"] .mobileQuickTasks .glyph,
html[data-theme="dark"] .mobileQuickTasks .glyph,
[data-theme="dark"] .pulseFeed h3::before,
html[data-theme="dark"] .pulseFeed h3::before,
[data-theme="dark"] .pulseTrips h3::before,
html[data-theme="dark"] .pulseTrips h3::before {
  color: #062a25;
  background: linear-gradient(135deg, #99f6e4, #fde68a);
  border-color: rgba(255, 255, 255, .22);
}

[data-theme="dark"] .primaryButton,
html[data-theme="dark"] .primaryButton,
[data-theme="dark"] button.primaryButton,
html[data-theme="dark"] button.primaryButton,
[data-theme="dark"] .ctaButton,
html[data-theme="dark"] .ctaButton {
  color: #05131f;
  background: linear-gradient(135deg, #5eead4, #fde68a);
  border-color: rgba(255, 255, 255, .22);
}

[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]),
[data-theme="dark"] select,
[data-theme="dark"] textarea,
html[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]),
html[data-theme="dark"] select,
html[data-theme="dark"] textarea {
  color: #f8fafc;
  background: rgba(15, 23, 42, .92);
  border-color: rgba(148, 163, 184, .34);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
}

[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder,
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder {
  color: #94a3b8;
}

@media (max-width: 700px) {
  .heroProduct,
  .marketPulse,
  .accountView.hasUser,
  .tripHero,
  .travelerDeskHero {
    border-radius: 0 0 28px 28px;
  }

  .quickStartPanel,
  .marketPulse,
  .accountPanel,
  .accountCard,
  .recentReviewsCard,
  .tripCard,
  .matchCard,
  .orderCard,
  .paymentAgreementPanel {
    border-radius: 24px;
  }

  .quickStartCard,
  .mobileQuickTasks button,
  .pulseItem {
    min-height: 92px;
    padding: 14px;
  }

  .quickIcon,
  .quickStartCard .glyph,
  .mobileQuickTasks .glyph {
    width: 46px;
    height: 46px;
    border-radius: 16px;
  }

  .mobileActionBar {
    left: 12px;
    right: 12px;
    bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    padding: 8px;
  }
}

@media (max-width: 640px) {
  .accountProfileHero,
  .accountPanel,
  .accountNextStepPanel,
  .accountTrustSummary,
  .accountCard,
  .accountQuickPassword,
  .accountSessionList,
  .selfPublicProfileCard {
    border-radius: 22px;
    padding: 18px;
  }

  .accountSectionTabs {
    top: 58px;
    gap: 8px;
    padding: 8px;
  }

  .accountSectionTabs button {
    flex-basis: 116px;
  }

  .accountQuickStats,
  .accountSetupStrip,
  .accountShortcutGrid,
  .accountStatusStrip,
  .selfPublicProfileStats {
    grid-template-columns: 1fr;
  }

  .accountNextStepList button,
  .accountQuickNextList button {
    min-height: 92px;
    grid-template-columns: 52px minmax(0, 1fr);
    gap: 12px;
  }

  .accountNextStepList i,
  .accountQuickNextList i,
  .accountQuickIcon {
    width: 52px;
    height: 52px;
    border-radius: 18px;
  }
}

[data-theme="dark"] {
  --ink: #f6f1e8;
  --muted: #b8c0c7;
  --line: #2d3746;
  --paper: #0d1118;
  --white: #151b24;
  --card: #171f2a;
  --teal: #5eead4;
  --blue: #93c5fd;
  --amber: #f7c873;
  --green: #86efac;
  --rose: #fda4af;
  --sand: #27251e;
  --coral: #f59e8b;
  --sky: #1d2836;
  --shadow-soft: 0 14px 36px rgba(0, 0, 0, 0.36);
  --shadow-lift: 0 22px 58px rgba(0, 0, 0, 0.48);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background:
    linear-gradient(180deg, rgba(255, 253, 249, .88), rgba(247, 244, 239, .96)),
    repeating-linear-gradient(90deg, rgba(31, 41, 51, .018) 0 1px, transparent 1px 24px);
}

[data-theme="dark"] body {
  background:
    radial-gradient(circle at 18% 8%, rgba(247, 200, 115, .13), transparent 30%),
    radial-gradient(circle at 84% 18%, rgba(94, 234, 212, .10), transparent 34%),
    linear-gradient(180deg, #0d1118 0%, #111827 46%, #0b1017 100%);
}
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: 1; }
input:disabled, select:disabled, textarea:disabled { cursor: not-allowed; opacity: 1; }
a { color: inherit; }
h1, h2, h3, p { margin-top: 0; }

/* Product-grade form controls: keep stray native HTML fields from leaking through. */
:where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]),
select,
textarea) {
  box-sizing: border-box;
  width: 100%;
  min-height: 46px;
  padding: 12px 14px;
  border: 1px solid rgba(100, 116, 139, .28);
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(248, 250, 252, .94));
  color: #142033;
  font-weight: 700;
  line-height: 1.45;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .86), 0 10px 24px rgba(15, 23, 42, .04);
  transition: border-color var(--motion-fast) var(--ease-out),
    box-shadow var(--motion-fast) var(--ease-out),
    background var(--motion-fast) var(--ease-out);
}

:where(textarea) {
  min-height: 118px;
  resize: vertical;
}

:where(select) {
  padding-right: 42px;
  appearance: none;
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(248, 250, 252, .94)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%230f766e' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat, no-repeat;
  background-position: 0 0, right 14px center;
  background-size: auto, 18px 18px;
}

:where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]),
select,
textarea)::placeholder {
  color: #718096;
  opacity: 1;
  font-weight: 650;
}

:where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]),
select,
textarea):focus {
  outline: none;
  border-color: rgba(15, 118, 110, .62);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(241, 253, 249, .96));
  box-shadow: 0 0 0 4px rgba(20, 184, 166, .16), 0 14px 30px rgba(15, 23, 42, .08);
}

:where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]),
select,
textarea):disabled {
  color: #64748b;
  background: #eef2f7;
  border-color: rgba(148, 163, 184, .34);
}

@keyframes bondmai-fade-up {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes bondmai-soft-pop {
  0% { opacity: 0; transform: scale(.985); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes bondmai-glow-sweep {
  from { transform: translateX(-115%) rotate(7deg); }
  to { transform: translateX(115%) rotate(7deg); }
}

:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--teal) 42%, transparent);
  outline-offset: 3px;
}

.glyph {
  display: inline-grid;
  place-items: center;
  width: var(--icon-size, 18px);
  min-width: var(--icon-size, 18px);
  height: var(--icon-size, 18px);
  font-weight: 850;
  line-height: 1;
}

.glyph svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 18px;
  min-height: 72px;
  padding: 12px clamp(18px, 4vw, 56px);
  background: rgba(255, 253, 249, 0.94);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(14px);
}

[data-theme="dark"] .topbar {
  background: rgba(17, 26, 35, 0.94);
}

.themeToggle {
  position: fixed;
  right: 14px;
  bottom: 14px;
  z-index: 20;
  min-height: 40px;
  padding: 0 13px;
  color: var(--white);
  background: var(--ink);
  border: 1px solid var(--line);
  border-radius: 999px;
  box-shadow: var(--shadow-lift);
}

.languageToggle {
  position: fixed;
  right: 14px;
  bottom: 62px;
  z-index: 20;
  display: flex;
  gap: 4px;
  padding: 4px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 999px;
  box-shadow: var(--shadow-lift);
}

.languageToggle button {
  min-width: 34px;
  min-height: 32px;
  color: var(--muted);
  background: transparent;
  border: 0;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
}

.languageToggle button.active {
  color: var(--white);
  background: var(--ink);
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0;
  color: inherit;
  background: transparent;
  border: 0;
}

.brand strong, .brand small { display: block; text-align: left; }
.brand small { color: var(--muted); font-size: 12px; }

.brandName {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  line-height: 1.05;
}

.brandName em {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 2px 8px;
  border-radius: 999px;
  color: #0f766e;
  background: color-mix(in srgb, var(--mint) 76%, white);
  border: 1px solid color-mix(in srgb, var(--brand) 22%, transparent);
  font-size: 13px;
  font-style: normal;
  font-weight: 850;
  letter-spacing: 0;
}

[data-theme="dark"] .brandName em {
  color: #dffcf7;
  background: rgba(45, 212, 191, .14);
  border-color: rgba(94, 234, 212, .34);
}

.logoMark {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  color: white;
  font-weight: 850;
  background:
    linear-gradient(145deg, rgba(15, 118, 110, .96), rgba(47, 111, 159, .98));
  border-radius: 12px 12px 12px 4px;
  box-shadow: inset 0 -10px 18px rgba(0, 0, 0, .12);
}

.tabs {
  display: flex;
  gap: 6px;
  margin-left: auto;
  padding: 4px;
  background: color-mix(in srgb, var(--sky) 66%, white);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.tabs button, .rail button {
  border: 0;
  background: transparent;
}

.tabs button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 38px;
  padding: 0 14px;
  color: var(--muted);
  border-radius: 6px;
  transition:
    color var(--motion-fast) ease,
    background var(--motion-fast) ease,
    box-shadow var(--motion-mid) ease,
    transform var(--motion-fast) var(--ease-out);
}

.tabs button.active {
  color: var(--ink);
  background: var(--card);
  box-shadow: 0 4px 16px rgba(36, 44, 52, 0.08);
}

.tabs button:hover,
.rail button:hover,
.filters button:hover,
.softButton:hover,
.primaryButton:hover {
  transform: translateY(-1px);
}

.tabs button:active,
.rail button:active,
.filters button:active,
.softButton:active,
.primaryButton:active {
  transform: translateY(0) scale(.985);
}

.loginStatusChip {
  display: flex;
  align-items: center;
  gap: 9px;
  max-width: 320px;
  margin-left: auto;
  padding: 6px 7px 6px 8px;
  background: #f8fafc;
  border: 1px solid var(--line);
  border-radius: 999px;
}

.loginStatusChip span {
  display: grid;
  min-width: 0;
  line-height: 1.1;
}

.loginStatusChip strong {
  font-size: 12px;
}

.loginStatusChip small {
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.loginStatusChip .tinyButton {
  min-height: 30px;
  padding: 0 10px;
  color: var(--teal);
  background: #ecfdf5;
  border-color: rgba(15, 118, 110, 0.22);
}

.memberAvatar.mini {
  width: 28px;
  height: 28px;
  font-size: 11px;
}

.mobileActionBar {
  display: none;
}

.mobileOrderNextStep {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 12px 0;
  padding: 12px;
  background: #eef8f6;
  border: 1px solid rgba(15, 118, 110, 0.22);
  border-radius: 8px;
}

.mobileOrderNextStep div {
  min-width: 0;
}

.mobileOrderNextStep span,
.mobileOrderNextStep small {
  display: block;
  color: var(--muted);
  font-size: 12px;
}

.mobileOrderNextStep strong {
  display: block;
  margin: 2px 0;
  color: var(--ink);
}

.mobileOrderNextStep b {
  flex: 0 0 auto;
  padding: 7px 10px;
  color: var(--white);
  background: var(--teal);
  border-radius: 6px;
  font-size: 12px;
}

.mobileOrderNextStep.warning {
  background: #fff7ed;
  border-color: rgba(194, 65, 12, 0.24);
}

.mobileOrderNextStep.warning b {
  background: var(--amber);
}

.mobileOrderNextStep.danger {
  background: #fff1f2;
  border-color: rgba(190, 18, 60, 0.24);
}

.mobileOrderNextStep.danger b {
  background: var(--rose);
}

.mobileOrderNextStep.done {
  background: #f0fdf4;
  border-color: rgba(21, 128, 61, 0.22);
}

.mobileOrderNextStep.done b {
  background: var(--green);
}

.mobileOrderNextStep.waiting b {
  color: var(--ink);
  background: #e6edf3;
}

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(380px, 0.98fr);
  gap: 28px;
  padding: 46px clamp(18px, 4vw, 56px) 34px;
  background:
    linear-gradient(180deg, rgba(255, 253, 249, .98), rgba(247, 244, 239, .92)),
    repeating-linear-gradient(0deg, rgba(182, 95, 29, .035) 0 1px, transparent 1px 30px);
  border-bottom: 1px solid var(--line);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  color: var(--amber);
  font-weight: 800;
}

h1 {
  max-width: 840px;
  margin-bottom: 16px;
  font-size: clamp(34px, 4.8vw, 60px);
  line-height: 1.08;
  letter-spacing: 0;
}

.hero p, .sectionHead p, .note {
  color: var(--muted);
  line-height: 1.7;
}

.heroStats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  align-self: end;
}

.stat, .adminTile, .tripCard, .matchCard, .estimate, .orderTable, .orderCard, .empty, .notice, .adminColumns > div {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 10px;
  transition:
    border-color var(--motion-mid) ease,
    box-shadow var(--motion-mid) ease,
    transform var(--motion-mid) var(--ease-out);
}

.stat:hover,
.adminTile:hover,
.tripCard:hover,
.matchCard:hover,
.orderCard:hover,
.empty:hover,
.productPreviewCard:hover,
.areaHumanCard:hover,
.recentReviewsCard:hover {
  border-color: color-mix(in srgb, var(--teal) 28%, var(--line));
  box-shadow: var(--shadow-soft);
  transform: translateY(-2px);
}

.stat {
  min-height: 116px;
  padding: 16px;
  position: relative;
  overflow: hidden;
}

.stat::before {
  content: "";
  position: absolute;
  inset: 0 auto auto 0;
  width: 5px;
  height: 100%;
  background: var(--coral);
}

.stat .glyph, .adminTile .glyph { color: var(--teal); }

.stat span, .adminTile span, .miniMeta, .tagRow, .tableHead, .tableRow small, .compactList small {
  color: var(--muted);
  font-size: 13px;
}

.stat strong {
  display: block;
  margin-top: 20px;
  font-size: 24px;
}

.heroProduct {
  align-items: stretch;
  min-height: 620px;
  background:
    linear-gradient(90deg, rgba(255, 253, 249, 0.96) 0%, rgba(255, 253, 249, 0.82) 46%, rgba(255, 253, 249, 0.30) 100%),
    url('./images/bondmai-hero-handoff.webp') center right / cover no-repeat;
  border-bottom: 1px solid color-mix(in srgb, var(--amber) 18%, var(--line));
}

.heroCopy {
  display: grid;
  align-content: center;
  max-width: 760px;
}

.heroActions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 22px 0 14px;
}

.primaryAction,
.secondaryAction {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 18px;
  border-radius: 8px;
  font-weight: 850;
}

.primaryAction {
  color: white;
  background: linear-gradient(135deg, #0f766e, #13b8a6);
  border: 1px solid rgba(45, 212, 191, .5);
  box-shadow: 0 14px 34px rgba(15, 118, 110, 0.30);
}

.secondaryAction {
  color: var(--ink);
  background: color-mix(in srgb, var(--card) 92%, var(--sand));
  border: 1px solid var(--line);
}

.trustRow {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 2px;
}

.trustRow span {
  padding: 6px 9px;
  color: var(--teal);
  background: #e7f5f3;
  border: 1px solid #b7ded8;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 850;
}

.quickStartPanel {
  display: grid;
  gap: 12px;
  padding: 16px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 18px 48px rgba(23, 33, 43, 0.08);
}

.heroVisual {
  position: relative;
  height: 292px;
  min-height: 292px;
  margin: 0;
  overflow: hidden;
  background: #eaf3f1;
  border-radius: 8px;
}

.heroVisual img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 52% 56%;
}

.matchPreview {
  position: absolute;
  right: 12px;
  bottom: 12px;
  display: grid;
  gap: 3px;
  width: min(260px, calc(100% - 24px));
  padding: 12px;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(217, 225, 232, 0.88);
  border-radius: 8px;
  box-shadow: 0 14px 34px rgba(23, 33, 43, 0.16);
  backdrop-filter: blur(12px);
}

.matchPreview span {
  color: var(--teal);
  font-size: 12px;
  font-weight: 900;
}

.matchPreview strong {
  font-size: 16px;
}

.matchPreview small {
  color: var(--muted);
}

.quickStartHead {
  display: grid;
  gap: 3px;
}

.quickStartHead span {
  color: var(--teal);
  font-size: 12px;
  font-weight: 900;
}

.quickStartHead strong {
  font-size: 22px;
}

.quickStartGrid {
  display: grid;
  gap: 10px;
}

.quickStartCard {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  width: 100%;
  min-height: 88px;
  padding: 12px;
  color: inherit;
  text-align: left;
  background: #f8fbfd;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.quickStartCard:hover,
.quickStartCard:focus-visible,
.stepGrid button:hover,
.stepGrid button:focus-visible {
  border-color: var(--teal);
  box-shadow: 0 12px 26px rgba(20, 184, 166, 0.12);
}

.quickIcon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  color: var(--teal);
  background: color-mix(in srgb, var(--teal) 12%, var(--card));
  border: 1px solid color-mix(in srgb, var(--teal) 22%, var(--line));
  border-radius: 8px;
  font-size: 18px;
  font-weight: 900;
}

.quickIcon .glyph {
  width: 22px;
  height: 22px;
  background: transparent;
}

.quickStartCard strong,
.quickStartCard small {
  grid-column: 2;
}

.quickStartCard strong {
  margin-bottom: 2px;
}

.quickStartCard small {
  color: var(--muted);
  line-height: 1.45;
}

.quickStartCard b {
  grid-column: 3;
  grid-row: 1 / span 2;
  color: var(--teal);
  white-space: nowrap;
}

.heroStats.compact {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.heroStats.compact .stat {
  min-height: 88px;
  padding: 12px;
}

.heroStats.compact .stat strong {
  margin-top: 10px;
  font-size: 18px;
}

.heroSearchFirst {
  gap: 28px;
}

.heroSearchPanel {
  margin-top: 18px;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--line) 72%, var(--teal));
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 18px 50px rgba(15, 23, 42, 0.08);
}

.heroSearchGrid {
  display: grid;
  grid-template-columns: 1.25fr .9fr .82fr;
  gap: 10px;
}

.heroSearchField {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.heroSearchField span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.heroSearchField input,
.heroSearchField select {
  width: 100%;
  min-height: 48px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--ink);
  background: var(--white);
  font-weight: 800;
}

.heroSearchSubmit {
  width: 100%;
  min-height: 50px;
  margin-top: 10px;
  border: 0;
  border-radius: 14px;
  color: #082f2c;
  background: linear-gradient(135deg, #5eead4, #f7c873);
  font-weight: 950;
  box-shadow: 0 14px 34px rgba(20, 184, 166, 0.22);
}

.compactActions {
  margin-top: 14px;
}

.miniCountryPills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.miniCountryPills button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 6px 10px;
  border: 1px solid color-mix(in srgb, var(--line) 70%, var(--teal));
  border-radius: 999px;
  color: var(--ink);
  background: color-mix(in srgb, var(--white) 88%, var(--teal));
  font-weight: 850;
}

.marketplaceHeroPanel .quickStartHead {
  padding-top: 2px;
}

.marketIntentGrid .quickStartCard {
  align-items: start;
}

.marketPulse {
  display: grid;
  gap: 18px;
  margin: 0 0 28px;
  padding: 22px;
  border: 1px solid color-mix(in srgb, var(--line) 72%, var(--teal));
  border-radius: 22px;
  background:
    linear-gradient(135deg, rgba(20, 184, 166, 0.10), rgba(247, 200, 115, 0.08)),
    var(--white);
  box-shadow: var(--shadow);
}

.marketPulseHead {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
}

.marketPulseHead h2 {
  margin: 4px 0 6px;
  font-size: clamp(24px, 3vw, 38px);
}

.marketPulseHead p {
  max-width: 720px;
  margin: 0;
  color: var(--muted);
  line-height: 1.7;
}

.marketPulseActions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.marketPulseGrid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  gap: 14px;
}

.pulseFeed,
.pulseTrips {
  display: grid;
  align-content: start;
  gap: 10px;
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.72);
}

.pulseFeed h3,
.pulseTrips h3 {
  margin: 0 0 4px;
}

.pulseItem {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--line) 84%, var(--teal));
  border-radius: 16px;
  background: var(--white);
}

.pulseItem strong {
  display: block;
  color: var(--ink);
  font-size: 16px;
}

.pulseItem small {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  color: var(--muted);
  font-weight: 700;
}

.pulseItem p {
  margin: 4px 0 0;
  color: var(--muted);
  line-height: 1.45;
}

.pulseIcon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--teal) 14%, var(--white));
}

.pulseIcon.trip {
  color: #082f2c;
  background: linear-gradient(135deg, #ccfbf1, #fde68a);
}

.pulseCountryRail {
  display: flex;
  align-items: stretch;
  gap: 10px;
  overflow-x: auto;
  padding: 2px 0 4px;
}

.pulseCountryRail > span {
  flex: 0 0 auto;
  align-self: center;
  color: var(--muted);
  font-weight: 900;
}

.pulseCountryRail button {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 4px 8px;
  min-width: 168px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 16px;
  color: var(--ink);
  background: var(--white);
  text-align: left;
}

.pulseCountryRail button small {
  grid-column: 2;
  color: var(--muted);
  font-weight: 700;
}

.howItWorks {
  margin-bottom: 22px;
  padding: 16px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.earlyMarketNudge,
.wishPatienceNudge {
  display: grid;
  gap: 14px;
  margin-bottom: 18px;
  padding: 16px;
  background: color-mix(in srgb, var(--card) 88%, var(--sand));
  border: 1px solid rgba(13, 128, 116, .22);
  border-left: 4px solid var(--teal);
  border-radius: 14px;
  box-shadow: var(--shadow-soft);
}

.earlyMarketNudge {
  position: relative;
  grid-template-columns: minmax(0, 1.05fr) minmax(280px, .95fr) auto;
  align-items: center;
  overflow: hidden;
}

.earlyMarketNudge::after {
  content: "";
  position: absolute;
  inset: 0 0 0 auto;
  width: min(38%, 420px);
  background:
    linear-gradient(90deg, rgba(255, 253, 249, 0), color-mix(in srgb, var(--card) 84%, transparent)),
    url('./images/bondmai-hero-handoff.webp') center / cover no-repeat;
  opacity: .18;
  pointer-events: none;
}

.earlyMarketNudge > *,
.wishPatienceNudge > * {
  position: relative;
  z-index: 1;
}

.earlyMarketCopy,
.wishPatienceNudge > div {
  display: grid;
  gap: 6px;
}

.earlyMarketNudge span,
.wishPatienceNudge span {
  color: var(--teal);
  font-size: 12px;
  font-weight: 950;
}

.earlyMarketNudge h2,
.wishPatienceNudge strong {
  margin: 0;
  color: var(--ink);
  font-size: 22px;
  line-height: 1.25;
}

.earlyMarketNudge p,
.wishPatienceNudge p,
.wishPatienceNudge li {
  margin: 0;
  color: var(--muted);
  line-height: 1.58;
}

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

.earlyMarketSteps article {
  display: grid;
  gap: 6px;
  min-height: 112px;
  padding: 12px;
  background: color-mix(in srgb, var(--card) 88%, white);
  border: 1px solid var(--line);
  border-radius: 12px;
}

.earlyMarketSteps b {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  color: var(--teal);
  background: color-mix(in srgb, var(--teal) 12%, var(--card));
  border: 1px solid color-mix(in srgb, var(--teal) 26%, var(--line));
  border-radius: 999px;
  font-size: 12px;
}

.earlyMarketSteps strong {
  color: var(--ink);
  font-size: 14px;
}

.earlyMarketSteps small {
  color: var(--muted);
  line-height: 1.45;
}

.wishPatienceNudge {
  grid-template-columns: minmax(0, 1fr) minmax(220px, .55fr) auto;
  align-items: center;
}

.wishPatienceNudge ul {
  display: grid;
  gap: 6px;
  margin: 0;
  padding-left: 18px;
  font-size: 13px;
  font-weight: 750;
}

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

.stepGrid button {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 8px 10px;
  align-items: start;
  min-height: 112px;
  padding: 12px;
  color: inherit;
  text-align: left;
  background: #f8fbfd;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.stepGrid span {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  color: white;
  background: var(--ink);
  border-radius: 999px;
  font-weight: 900;
}

.stepGrid strong,
.stepGrid small {
  grid-column: 2;
}

.stepGrid small {
  color: var(--muted);
  line-height: 1.5;
}

.trendBoard {
  margin-bottom: 22px;
}

.featuredWishStrip {
  display: grid;
  gap: 12px;
  margin-bottom: 22px;
}

.featuredWishScroller {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(220px, 280px);
  gap: 12px;
  overflow-x: auto;
  padding: 2px 2px 12px;
  scroll-snap-type: x proximity;
}

.featuredWishCard {
  display: grid;
  grid-template-rows: 170px minmax(0, 1fr);
  overflow: hidden;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow-soft);
  scroll-snap-align: start;
}

.featuredWishCard .wishVisual {
  min-height: 170px;
  border: 0;
  border-radius: 0;
}

.featuredWishCard > div:last-child {
  display: grid;
  gap: 5px;
  padding: 12px;
}

.featuredWishCard strong {
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.featuredWishCard small {
  color: var(--muted);
  line-height: 1.45;
}

.featuredWishCard span {
  color: var(--teal);
  font-size: 13px;
  font-weight: 850;
}

.departureBoard {
  margin-bottom: 22px;
}

.boardSummary {
  display: grid;
  justify-items: end;
  gap: 4px;
  color: var(--muted);
}

.boardSummary strong {
  color: var(--ink);
  font-size: 22px;
}

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

.departureCard {
  display: grid;
  gap: 12px;
  width: 100%;
  min-height: 142px;
  padding: 14px;
  color: inherit;
  text-align: left;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.departureCard:hover,
.departureCard:focus-visible,
.departureCard.active {
  border-color: var(--teal);
  box-shadow: 0 12px 26px rgba(20, 184, 166, 0.14);
  transform: translateY(-1px);
}

.departureCard:focus-visible {
  outline: 3px solid rgba(20, 184, 166, 0.24);
  outline-offset: 2px;
}

.departureCard strong {
  display: block;
  margin: 8px 0 4px;
  overflow-wrap: anywhere;
  font-size: 18px;
}

.departureCard p {
  margin: 0;
  color: var(--muted);
}

.globalLaunchRadar {
  padding: 16px;
  background: color-mix(in srgb, var(--white) 88%, var(--teal));
  border: 1px solid var(--line);
  border-radius: 8px;
}

.globalLaunchRadar .decisionStrip {
  margin-bottom: 14px;
}

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

.launchHowTo article {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 8px;
  align-items: start;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--card) 92%, var(--sand));
}

.launchHowTo .glyph {
  grid-row: span 2;
  width: 28px;
  height: 28px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  background: color-mix(in srgb, var(--teal) 12%, var(--card));
  color: var(--teal);
}

.launchHowTo strong,
.launchHowTo span {
  min-width: 0;
}

.launchHowTo span {
  color: var(--muted);
  line-height: 1.55;
}

.departureCard.launch-ready {
  border-left: 4px solid var(--green);
}

.departureCard.launch-discovery {
  border-left: 4px solid var(--amber);
}

.departureCard.launch-watchlist {
  border-left: 4px solid var(--rose);
}

.globalLaunchRadar .departBadge {
  text-transform: uppercase;
  letter-spacing: 0;
}

.routeFollowPanel {
  display: grid;
  align-content: center;
  gap: 10px;
  min-height: 142px;
  padding: 14px;
  border: 1px dashed rgba(20, 184, 166, 0.42);
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(236, 253, 245, 0.94), rgba(239, 246, 255, 0.92));
}

.routeFollowPanel span,
.routeFollowInline span {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.routeFollowPanel strong {
  display: inline;
  color: var(--ink);
  font-size: inherit;
}

.routeFollowInline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  background: #f6fbfb;
  border: 1px solid var(--line);
}

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

.followRadar span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 8px;
  background: #f8fafc;
  border: 1px solid var(--line);
  color: var(--muted);
  font-size: 13px;
}

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

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

.followSuggestions .tinyButton {
  min-height: 32px;
  white-space: normal;
  text-align: left;
  line-height: 1.35;
}

.departBadge {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 2px 8px;
  color: #063b32;
  background: #d9fff6;
  border: 1px solid rgba(15, 118, 110, .28);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
}

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

.trustedMembersPanel {
  display: grid;
  gap: 14px;
  margin-bottom: 18px;
}

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

.trustedMemberCard {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 12px;
  padding: 14px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow-soft);
}

.memberAvatar {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  color: white;
  background:
    radial-gradient(circle at 24% 20%, rgba(255, 255, 255, 0.32), transparent 28%),
    linear-gradient(135deg, var(--avatar-color, var(--teal)), color-mix(in srgb, var(--avatar-color, var(--blue)) 74%, #111827));
  border-radius: 8px;
  font-weight: 900;
  letter-spacing: 0;
  box-shadow: inset 0 -14px 28px rgba(15, 23, 42, 0.18);
}

.memberAvatar.profileHero {
  width: 72px;
  height: 72px;
  font-size: 24px;
}

.memberAvatar.preview {
  width: 54px;
  height: 54px;
  flex: 0 0 auto;
}

.trustedMemberCard strong,
.trustedMemberCard small {
  display: block;
}

.trustedMemberCard small {
  color: var(--muted);
  line-height: 1.45;
}

.memberTrustStats {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}

.memberTrustStats span {
  display: grid;
  gap: 2px;
  padding: 7px;
  color: var(--muted);
  background: #f8fbfd;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 12px;
}

[data-theme="dark"] .memberTrustStats span {
  background: #0f1821;
}

.memberTrustStats b {
  color: var(--ink);
  font-size: 15px;
}

.profileLinkButton {
  grid-column: 1 / -1;
  width: 100%;
  border: 1px solid #b7ded8;
  border-radius: 8px;
  background: #f4fbfa;
  color: var(--teal);
  font-weight: 900;
  padding: 9px 10px;
  cursor: pointer;
}

.profileLinkButton.compact {
  grid-column: auto;
  width: auto;
  padding: 7px 9px;
  font-size: 12px;
  white-space: nowrap;
}

.travelerTrustBadge {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  align-items: center;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fafc;
}

.travelerTrustBadge.verified {
  border-color: #b7ded8;
  background: #f2fbf9;
}

.travelerTrustBadge span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 26px;
  padding: 4px 7px;
  border-radius: 999px;
  background: #fff;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

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

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

.profileSheetOverlay {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(11, 18, 32, 0.48);
  backdrop-filter: blur(6px);
}

.profileSheet {
  position: relative;
  width: min(620px, 100%);
  max-height: min(760px, calc(100vh - 40px));
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--card);
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.24);
  padding: 18px;
}

.profileSheetHead {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  margin-bottom: 14px;
  padding-right: 42px;
}

.profileSheetClose {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 999px;
  box-shadow: 0 8px 20px rgba(15, 23, 42, .12);
  cursor: pointer;
  font-size: 22px;
  line-height: 1;
}

.profileSheetClose:hover,
.profileSheetClose:focus-visible {
  color: var(--teal);
  border-color: color-mix(in srgb, var(--teal) 42%, var(--line));
}

.memberAvatar.large {
  width: 64px;
  height: 64px;
  font-size: 24px;
}

.profileSheetHead h2,
.profileSheetHead p {
  margin: 0;
}

.profileSheetHead p {
  color: var(--muted);
}

.profileTrustGrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 12px 0 16px;
}

.profileTrustGrid span {
  display: grid;
  gap: 4px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fafc;
  color: var(--muted);
  font-size: 12px;
}

.profileTrustGrid b {
  color: var(--ink);
  font-size: 20px;
}

.profileSheetError {
  border-color: #fecaca;
  background: #fff7f7;
  color: var(--ink);
}

.profileSheetError strong {
  display: block;
  margin-bottom: 6px;
  color: #991b1b;
}

.profileReviewList {
  display: grid;
  gap: 10px;
}

.profileReviewList article {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.profileReviewList article div {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  color: var(--muted);
}

.profileReviewList article p {
  margin: 0;
  line-height: 1.55;
}

[data-theme="dark"] .profileLinkButton {
  background: #102421;
}

[data-theme="dark"] .travelerTrustBadge,
[data-theme="dark"] .profileTrustGrid span,
[data-theme="dark"] .profileReviewList article {
  background: #0f1821;
}

[data-theme="dark"] .travelerTrustBadge span {
  background: #121f2b;
}

.trendCard {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  min-height: 126px;
  padding: 14px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.trendCard strong {
  display: block;
  overflow-wrap: anywhere;
  margin-bottom: 6px;
}

.trendCard p {
  margin: 0 0 10px;
  color: var(--muted);
}

.rankBadge {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  color: var(--white);
  background: var(--ink);
  border-radius: 50%;
  font-weight: 900;
}

.notice {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 16px clamp(18px, 4vw, 56px) 0;
  padding: 12px 14px;
  color: var(--green);
  font-weight: 800;
}

.sessionNotice {
  color: var(--ink);
  border-left: 4px solid var(--amber);
  flex-wrap: wrap;
}

.sessionNotice span {
  flex: 1 1 260px;
}

.toastNotice {
  position: fixed;
  top: max(18px, env(safe-area-inset-top));
  right: max(18px, env(safe-area-inset-right));
  z-index: 1200;
  width: min(420px, calc(100vw - 32px));
  margin: 0;
  padding: 14px 16px;
  color: #064e3b;
  background: rgba(240, 253, 250, 0.96);
  border: 1px solid rgba(20, 184, 166, 0.36);
  border-left: 5px solid #14b8a6;
  border-radius: 18px;
  box-shadow: 0 18px 46px rgba(15, 23, 42, 0.18);
  backdrop-filter: blur(16px);
  animation: toastSlideIn 220ms ease-out both;
}

.toastNotice span {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
}

.toastClose {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  color: #115e59;
  background: rgba(20, 184, 166, 0.14);
  cursor: pointer;
  font-size: 18px;
  font-weight: 900;
  line-height: 1;
}

.toastClose:hover {
  color: #042f2e;
  background: rgba(20, 184, 166, 0.24);
}

.sessionToast {
  top: max(86px, calc(env(safe-area-inset-top) + 86px));
  color: #1f2937;
  background: rgba(255, 251, 235, 0.96);
  border-color: rgba(245, 158, 11, 0.36);
  border-left-color: #f59e0b;
}

@keyframes toastSlideIn {
  from {
    opacity: 0;
    transform: translate3d(18px, -8px, 0) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

[data-theme="dark"] .toastNotice,
html[data-theme="dark"] .toastNotice {
  color: #ecfeff;
  background: rgba(15, 23, 42, 0.94);
  border-color: rgba(94, 234, 212, 0.42);
  border-left-color: #5eead4;
  box-shadow: 0 20px 54px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .toastClose,
html[data-theme="dark"] .toastClose {
  color: #ecfeff;
  background: rgba(94, 234, 212, 0.16);
}

[data-theme="dark"] .sessionToast,
html[data-theme="dark"] .sessionToast {
  color: #fffbeb;
  background: rgba(69, 26, 3, 0.94);
  border-color: rgba(251, 191, 36, 0.46);
  border-left-color: #fbbf24;
}

@media (max-width: 720px) {
  .toastNotice {
    top: max(12px, env(safe-area-inset-top));
    right: 12px;
    left: 12px;
    width: auto;
    padding: 13px 14px;
  }

  .sessionToast {
    top: max(82px, calc(env(safe-area-inset-top) + 82px));
  }
}

.pwaPrompt {
  display: none;
  align-items: start;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 12px;
  margin: 12px clamp(18px, 4vw, 56px) 0;
  padding: 12px 14px;
  background: var(--white);
  border: 1px solid var(--line);
  border-left: 4px solid var(--teal);
  border-radius: 8px;
  box-shadow: var(--shadow-soft);
}

.pwaPrompt div {
  display: grid;
  gap: 2px;
}

.pwaPrompt span {
  color: var(--teal);
  font-size: 12px;
  font-weight: 900;
}

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

.pwaPrompt small {
  color: var(--muted);
  line-height: 1.45;
}

.pwaPrompt.offline {
  border-left-color: var(--amber);
}

.pwaPrompt.offline span {
  color: var(--amber);
}

.sensitiveOverlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(23, 33, 43, 0.48);
}

.sensitiveDialog {
  display: grid;
  gap: 12px;
  width: min(520px, 100%);
  padding: 18px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 24px 80px rgba(23, 33, 43, 0.24);
}

.sensitiveDialog label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.sensitiveDialog input,
.sensitiveDialog textarea {
  width: 100%;
  color: var(--ink);
}

.sensitiveDialog small {
  color: var(--muted);
  line-height: 1.5;
}

.workspace {
  display: grid;
  grid-template-columns: 228px minmax(0, 1fr);
  gap: 22px;
  padding: 24px clamp(18px, 4vw, 56px) 56px;
}

.rail {
  position: sticky;
  top: 96px;
  align-self: start;
  display: grid;
  gap: 8px;
}

.rail button {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  padding: 0 14px;
  color: var(--muted);
  border-radius: 8px;
  transition:
    color var(--motion-fast) ease,
    background var(--motion-fast) ease,
    box-shadow var(--motion-mid) ease,
    transform var(--motion-fast) var(--ease-out);
}

.rail button .badge {
  margin-left: auto;
}

.rail button.active {
  color: var(--teal);
  background: #e7f5f3;
  box-shadow: inset 3px 0 0 var(--teal);
}

.panel {
  min-width: 0;
  animation: bondmai-fade-up var(--motion-slow) var(--ease-out) both;
}

.panel > section,
.panel > .viewGrid,
.panel > .accountView,
.panel > .mapReadableView {
  animation: bondmai-fade-up var(--motion-slow) var(--ease-out) both;
}

.viewGrid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 0.86fr);
  gap: 22px;
}

.sectionHead {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}

.sectionHead h2 { margin-bottom: 6px; font-size: 24px; }

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
  isolation: isolate;
}

.filters button {
  min-height: 36px;
  padding: 0 12px;
  color: var(--muted);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 8px;
  transition:
    color var(--motion-fast) ease,
    border-color var(--motion-fast) ease,
    background var(--motion-fast) ease,
    transform var(--motion-fast) var(--ease-out),
    box-shadow var(--motion-mid) ease;
}

.filters button.active {
  color: var(--teal);
  background: #e7f5f3;
  border-color: #b7ded8;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--teal) 24%, transparent);
}

.searchInput {
  width: 100%;
  min-height: 42px;
  margin-bottom: 12px;
  padding: 0 12px;
  background: white;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.globalSearchBar {
  position: sticky;
  top: 0;
  z-index: 45;
  display: grid;
  gap: 8px;
  max-width: 980px;
  margin: -4px auto 16px;
  padding: 10px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 12px 30px rgba(23, 33, 43, 0.08);
  backdrop-filter: blur(12px);
}

.globalSearchBar form {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.globalSearchBar input {
  min-width: 0;
  min-height: 38px;
  color: var(--ink);
  background: transparent;
  border: 0;
  outline: 0;
}

.globalSearchResults {
  display: grid;
  gap: 7px;
  max-height: 260px;
  overflow: auto;
}

.globalSearchResults button,
.globalSearchResults span {
  display: grid;
  gap: 3px;
  padding: 10px;
  color: var(--ink);
  text-align: left;
  background: #f8fafc;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.globalSearchResults small {
  color: var(--muted);
}

.orderSummary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}

.orderSummary button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 62px;
  padding: 10px 12px;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.orderSummary button.active {
  border-color: #b7ded8;
  background: #e7f5f3;
}

.orderSummary small {
  color: var(--teal);
  font-size: 20px;
  font-weight: 850;
}

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

.orderFocusItem {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 86px;
  padding: 11px;
  color: var(--ink);
  text-align: left;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 8px 20px rgba(23, 33, 43, 0.05);
}

.orderFocusItem b {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  color: var(--teal);
  background: #e6fffb;
  border-radius: 8px;
  font-size: 12px;
}

.orderFocusItem span,
.orderFocusItem strong,
.orderFocusItem small {
  display: block;
}

.orderFocusItem strong {
  color: var(--ink);
  font-size: .95rem;
}

.orderFocusItem small {
  margin-top: 3px;
  color: var(--muted);
  line-height: 1.42;
}

.orderFocusItem em {
  color: var(--teal);
  font-style: normal;
  font-size: .78rem;
  font-weight: 950;
  white-space: nowrap;
}

.orderFocusItem.warning b {
  color: #92400e;
  background: #fff7ed;
}

.orderFocusItem.danger b {
  color: var(--rose);
  background: #fff1f2;
}

.tripSummary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}

.tripSummary button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 62px;
  padding: 10px 12px;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.tripSummary button.active {
  border-color: #b7ded8;
  background: #e7f5f3;
}

.tripSummary small {
  color: var(--teal);
  font-size: 20px;
  font-weight: 850;
}

.orderFilters {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) 180px 180px 180px;
  gap: 10px;
  margin-bottom: 10px;
}

.tripFilters {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) 180px 180px;
  gap: 10px;
  margin-bottom: 10px;
}

.orderFilters .searchInput,
.tripFilters .searchInput {
  margin-bottom: 0;
}

.orderFilters select,
.tripFilters select {
  min-height: 42px;
  padding: 0 10px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.resultSummary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  color: var(--muted);
  font-size: 13px;
}

.softButton, .primaryButton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 16px;
  border-radius: 8px;
  position: relative;
  overflow: hidden;
  transition:
    background var(--motion-fast) ease,
    border-color var(--motion-fast) ease,
    box-shadow var(--motion-mid) ease,
    transform var(--motion-fast) var(--ease-out);
}

.softButton {
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--line);
}

.dangerButton {
  color: #b42318;
  background: #fff1f0;
  border-color: #ffccc7;
}

.primaryButton {
  color: white;
  background: linear-gradient(135deg, #0f766e, #13b8a6);
  border: 1px solid rgba(45, 212, 191, .48);
  box-shadow: 0 10px 24px rgba(15, 118, 110, .22);
}

.primaryButton::after {
  content: "";
  position: absolute;
  inset: -45% auto -45% -60%;
  width: 44%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .22), transparent);
  opacity: 0;
  pointer-events: none;
  transform: translateX(-115%) rotate(7deg);
}

.primaryButton:hover::after {
  opacity: 1;
  animation: bondmai-glow-sweep 760ms var(--ease-out);
}

.softButton:hover {
  border-color: color-mix(in srgb, var(--teal) 28%, var(--line));
  box-shadow: 0 8px 18px rgba(15, 31, 45, .08);
}

.primaryButton:hover {
  box-shadow: 0 12px 26px rgba(15, 118, 110, .24);
}

.softButton:disabled,
.primaryButton:disabled {
  cursor: not-allowed;
  color: #e5edf4;
  background: #52606f;
  border-color: #6b7a8a;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
}

.softButton:disabled:hover,
.primaryButton:disabled:hover {
  box-shadow: none;
  transform: none;
}

.tripList, .matchList, .orderCards, .compactList {
  display: grid;
  gap: 12px;
}

.tripCard {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 14px;
  padding: 16px;
}

.avatar {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  color: white;
  font-weight: 850;
  background: #263241;
  border-radius: 8px;
}

.cardTop {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.cardTop h3, .matchCard h3 { margin-bottom: 6px; }
.cardTop p, .miniMeta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}

.status {
  align-self: flex-start;
  padding: 5px 8px;
  font-size: 12px;
  font-weight: 800;
  color: var(--blue);
  background: #eaf0ff;
  border-radius: 999px;
}

.status.open { color: var(--green); background: #eaf8ef; }
.status.review { color: var(--amber); background: #fff2e8; }
.status.matching, .status.new { color: var(--rose); background: #fff0f4; }
.status.ordered { color: var(--teal); background: #e7f5f3; }

.meter {
  height: 8px;
  overflow: hidden;
  background: #e8eef3;
  border-radius: 999px;
}

.meter span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--teal), var(--amber));
}

.tagRow {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 12px;
}

.tagRow span {
  padding: 5px 8px;
  background: #f1f5f8;
  border-radius: 999px;
}

.note {
  margin: 10px 0 0;
  font-size: 13px;
}

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

.tripEditForm {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  padding: 14px;
  background: #f8fafc;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.tripEditForm input,
.tripEditForm textarea {
  width: 100%;
  min-height: 40px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.tripEditForm textarea,
.tripEditForm .buttonRow {
  grid-column: 1 / -1;
}

.tripEditForm textarea {
  min-height: 76px;
  padding-top: 10px;
  resize: vertical;
}

.matchCard, .orderCard {
  display: grid;
  gap: 12px;
  padding: 16px;
}

.wishVisual {
  position: relative;
  display: grid;
  align-content: end;
  min-height: 190px;
  overflow: hidden;
  color: white;
  background:
    linear-gradient(145deg, rgba(15, 118, 110, 0.94), rgba(37, 99, 235, 0.72)),
    linear-gradient(45deg, rgba(194, 65, 12, 0.18), transparent 54%),
    #0f766e;
  border-radius: 8px;
  box-shadow: inset 0 -80px 90px rgba(0, 0, 0, 0.18);
}

.wishVisual img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.01);
}

.wishVisual::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 64%;
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.68));
}

.wishVisual small {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  max-width: calc(100% - 20px);
  margin: 0 10px 10px;
  padding: 7px 10px;
  color: white;
  background: rgba(23, 33, 43, 0.62);
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 999px;
  font-weight: 850;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(10px);
}

.wishVisualClues {
  position: absolute;
  z-index: 2;
  inset: 10px 10px auto;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.wishVisualClues span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: 100%;
  padding: 6px 8px;
  color: white;
  background: rgba(23, 33, 43, 0.64);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(10px);
}

.wishVisualClues b {
  color: #c7f9f1;
  font-size: 11px;
}

.wishVisualGallery {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 6px;
  align-self: end;
  padding: 0 12px 2px;
}

.wishVisualGallery img {
  position: static;
  width: 42px;
  height: 42px;
  object-fit: cover;
  border: 2px solid rgba(255, 255, 255, 0.82);
  border-radius: 8px;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.25);
}

.wishVisualPlaceholder {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  gap: 8px;
  min-height: 148px;
  padding: 18px;
  text-align: center;
}

.wishVisualPlaceholder strong {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  color: var(--teal);
  background: white;
  border-radius: 18px;
  font-size: 26px;
  box-shadow: 0 16px 30px rgba(23, 33, 43, 0.16);
}

.wishVisualPlaceholder span {
  font-weight: 850;
}

.matchCard .wishVisual {
  min-height: 210px;
}

.matchCard p { color: var(--muted); line-height: 1.6; }

.matchInsight {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  border: 1px solid #cfe7e3;
  border-radius: 8px;
  background: #f5fbfa;
}

.matchInsight div,
.alternativeTrips span {
  display: grid;
  gap: 3px;
}

.matchInsight span,
.alternativeTrips small {
  color: var(--muted);
  font-size: 12px;
}

.reasonPills,
.alternativeTrips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.reasonPills span {
  padding: 5px 9px;
  border: 1px solid #ffd2df;
  border-radius: 999px;
  color: #914254;
  background: #fff6f8;
  font-size: 12px;
}

.alternativeTrips span {
  flex: 1 1 150px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.aiBox {
  display: flex;
  gap: 10px;
  padding: 12px;
  color: #23443f;
  background: #e7f5f3;
  border-radius: 8px;
}

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

.formView { max-width: 1320px; }

.wishForm {
  display: grid;
  grid-template-columns: minmax(360px, .95fr) minmax(360px, 1.05fr);
  gap: 14px;
  align-items: start;
  grid-auto-flow: row dense;
}

.wishForm > .wide,
.wishForm > .wishLivePreview,
.wishForm > .wishCostBreakdown,
.wishForm > .empty,
.wishForm > .restrictionInlineNotice,
.wishForm > .wishPhotoUpload,
.wishForm > .productPreviewCard,
.wishForm > .riskBox,
.wishForm > .estimate,
.wishForm > .splitAction {
  grid-column: 1 / -1;
}

.wishForm > label:not(.wide):not(.wishPhotoUpload),
.wishForm > .field,
.wishForm > .inputField {
  min-width: 0;
}

.wishLivePreview {
  display: grid;
  grid-template-columns: minmax(240px, .9fr) minmax(0, 1.1fr);
  gap: 14px;
  align-items: stretch;
  padding: 12px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow-soft);
}

@media (min-width: 1020px) {
  .formView:has(.wishForm) {
    max-width: 1480px;
  }

  .formView:has(.wishForm) .sectionHead {
    margin-bottom: 18px;
  }

  .wishForm {
    grid-template-columns: minmax(440px, .82fr) minmax(420px, .78fr);
    gap: 18px 24px;
  }

  .wishForm > .wishLivePreview {
    grid-column: 2;
    grid-row: 2 / span 5;
    position: sticky;
    top: 96px;
    align-self: start;
  }

  .wishForm > .wishCostBreakdown,
  .wishForm > .estimate,
  .wishForm > .riskBox,
  .wishForm > .restrictionInlineNotice,
  .wishForm > .productPreviewCard {
    grid-column: 2;
  }

  .wishForm > .wishPhotoUpload,
  .wishForm > .empty,
  .wishForm > .wide:not(.wishModePanel):not(.wishLivePreview):not(.splitAction):not(.wishCostBreakdown):not(.estimate):not(.restrictionInlineNotice):not(.productPreviewCard):not(.riskBox) {
    grid-column: 1;
  }

  .wishForm > .splitAction,
  .wishForm > .wishActionStatus {
    grid-column: 1 / -1;
  }
}

.wishLivePreview .wishVisual {
  min-height: 230px;
}

.wishLivePreviewBody {
  display: grid;
  align-content: center;
  gap: 10px;
  min-width: 0;
}

.wishLivePreviewBody h3,
.wishLivePreviewBody p {
  margin: 0;
}

.wishLivePreviewBody p {
  color: var(--muted);
  line-height: 1.55;
}

.wishActionStatus {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 54px;
  padding: 13px 15px;
  border: 1px solid rgba(20, 184, 166, .32);
  border-radius: 14px;
  color: #064e3b;
  background: linear-gradient(135deg, #ecfdf5, #f0fdfa);
  font-weight: 900;
  box-shadow: var(--shadow-soft);
}

.wishActionStatus.error {
  color: #7f1d1d;
  background: #fff1f2;
  border-color: #fecdd3;
}

.wishActionStatus.loading {
  color: #713f12;
  background: #fffbeb;
  border-color: #fde68a;
}

.wishModePanel {
  display: grid;
  gap: 14px;
  padding: 18px;
  background: linear-gradient(135deg, rgba(20, 184, 166, .12), rgba(245, 158, 11, .10)), var(--white);
  border: 1px solid rgba(20, 184, 166, .34);
  border-radius: 10px;
  box-shadow: var(--shadow-soft);
}

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

.wishModeCard {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  min-height: 104px;
  padding: 16px;
  text-align: left;
  color: var(--ink);
  background: rgba(255, 255, 255, .92);
  border: 1px solid var(--line);
  border-radius: 10px;
  cursor: pointer;
}

.wishModeCard .glyph {
  grid-row: 1 / span 2;
  grid-column: 1;
  width: 52px;
  height: 52px;
  display: inline-grid;
  place-items: center;
  color: #0f766e;
  background: linear-gradient(135deg, #ccfbf1, #fde68a);
  border-radius: 14px;
}

.wishModeCard strong,
.wishModeCard small {
  grid-column: 2;
  min-width: 0;
  display: block;
}

.wishModeCard strong {
  align-self: end;
}

.wishModeCard small {
  align-self: start;
  margin-top: 4px;
  color: var(--muted);
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.wishModeCard.active {
  color: #062923;
  border-color: #0f766e;
  background: linear-gradient(135deg, #ccfbf1, #fef3c7);
  box-shadow: 0 14px 30px rgba(15, 118, 110, .16);
}

.relayRoutePreview {
  display: grid;
  gap: 10px;
  padding: 14px;
  color: #12312d;
  background: rgba(255, 255, 255, .78);
  border: 1px solid rgba(20, 184, 166, .32);
  border-radius: 10px;
}

.relayRoutePreview p {
  margin: 0;
  color: #385650;
  line-height: 1.6;
}

.relayFields {
  display: grid;
  grid-template-columns: .8fr 1.2fr .8fr;
  gap: 10px;
}

.travelerRelayHero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 18px 0 20px;
  padding: 18px;
  color: var(--ink);
  background: linear-gradient(135deg, rgba(20, 184, 166, .12), rgba(245, 158, 11, .10)), var(--white);
  border: 1px solid rgba(20, 184, 166, .32);
  border-radius: 10px;
  box-shadow: var(--shadow-soft);
}

.travelerRelayHero span {
  display: block;
  color: #0f766e;
  font-size: 12px;
  font-weight: 900;
}

.travelerRelayHero strong {
  display: block;
  margin-top: 4px;
  font-size: clamp(18px, 2vw, 24px);
}

.travelerRelayHero p {
  max-width: 760px;
  margin: 6px 0 0;
  color: var(--muted);
  line-height: 1.6;
}

[data-theme="dark"] .wishModePanel,
[data-theme="dark"] .travelerRelayHero {
  color: #f8fafc;
  background: linear-gradient(135deg, rgba(20, 184, 166, .18), rgba(234, 179, 8, .13)), #111827;
  border-color: rgba(94, 234, 212, .42);
}

[data-theme="dark"] .wishModeCard,
[data-theme="dark"] .relayRoutePreview {
  color: #f8fafc;
  background: #16202d;
  border-color: rgba(148, 163, 184, .34);
}

[data-theme="dark"] .wishModeCard.active {
  color: #f8fafc;
  border-color: #5eead4;
  background: linear-gradient(135deg, #123c35, #3a3114);
}

[data-theme="dark"] .wishModeCard small,
[data-theme="dark"] .relayRoutePreview p,
[data-theme="dark"] .travelerRelayHero p {
  color: #cbd5e1;
}

[data-theme="dark"] .wishActionStatus {
  color: #ccfbf1;
  background: linear-gradient(135deg, rgba(20, 83, 45, .72), rgba(15, 118, 110, .42));
  border-color: rgba(94, 234, 212, .42);
}

[data-theme="dark"] .wishActionStatus.error {
  color: #fecdd3;
  background: rgba(127, 29, 29, .42);
  border-color: rgba(251, 113, 133, .42);
}

[data-theme="dark"] .wishActionStatus.loading {
  color: #fde68a;
  background: rgba(113, 63, 18, .44);
  border-color: rgba(251, 191, 36, .42);
}

[data-theme="dark"] .travelerRelayHero span {
  color: #5eead4;
}

@media (max-width: 720px) {
  .wishModePanel,
  .travelerRelayHero {
    padding: 14px;
    border-radius: 12px;
  }

  .wishModeGrid,
  .relayFields {
    grid-template-columns: 1fr;
  }

  .wishModeCard {
    min-height: auto;
    grid-template-columns: 48px minmax(0, 1fr);
    padding: 14px;
  }

  .wishModeCard .glyph {
    width: 48px;
    height: 48px;
  }

  .travelerRelayHero {
    align-items: stretch;
    flex-direction: column;
  }

  .travelerRelayHero .primaryButton {
    width: 100%;
  }
}

.wishInspirationStrip {
  display: grid;
  grid-template-columns: minmax(220px, .9fr) minmax(0, 1.1fr);
  gap: 12px;
  align-items: stretch;
  margin: 14px 0;
}

.wishInspirationPhoto {
  position: relative;
  min-height: 180px;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(15, 23, 42, .08), rgba(15, 118, 110, .68)),
    url('./images/bondmai-hero-handoff.webp') center / cover no-repeat;
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow-soft);
}

.wishInspirationPhoto span {
  position: absolute;
  left: 14px;
  bottom: 14px;
  padding: 7px 10px;
  color: white;
  background: rgba(15, 23, 42, .72);
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: 999px;
  font-weight: 900;
}

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

.wishInspirationCards article {
  display: grid;
  align-content: start;
  gap: 7px;
  min-width: 0;
  padding: 13px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: var(--shadow-soft);
}

.wishInspirationCards strong {
  color: var(--ink);
  overflow-wrap: anywhere;
}

.wishInspirationCards small {
  color: var(--muted);
  line-height: 1.5;
}

.wishCostBreakdown {
  display: grid;
  gap: 12px;
  padding: 14px;
  background: color-mix(in srgb, var(--white) 92%, var(--teal));
  border: 1px solid var(--line);
  border-left: 4px solid var(--teal);
  border-radius: 8px;
  box-shadow: var(--shadow-soft);
}

.wishCostHead {
  display: grid;
  gap: 4px;
}

.wishCostHead span,
.wishCostHead small,
.wishCostGrid small,
.wishCostNotice small {
  color: var(--muted);
  line-height: 1.45;
}

.wishCostHead strong {
  font-size: clamp(24px, 4vw, 34px);
}

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

.wishCostGrid span {
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 10px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.wishCostGrid b,
.wishCostGrid strong {
  overflow-wrap: anywhere;
}

.wishCostNotice {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 10px;
  background: rgba(245, 158, 11, 0.1);
  border: 1px solid color-mix(in srgb, var(--amber) 36%, var(--line));
  border-radius: 8px;
}

.draftPanel,
.duplicateBox {
  display: grid;
  gap: 10px;
  padding: 14px;
  margin-bottom: 14px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.wishReadiness {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-auto-flow: row;
  align-items: start;
  gap: 12px;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  padding: 14px;
  margin-bottom: 14px;
  background: #f8fbfd;
  border: 1px solid var(--line);
  border-left: 4px solid var(--amber);
  border-radius: 8px;
  box-shadow: var(--shadow-soft);
}

.wishReadiness.state-progress,
.wishReadiness.progress {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  border-radius: 8px;
}

.wishReadiness > * {
  min-width: 0;
  max-width: 100%;
}

.wishReadiness.state-ready,
.wishReadiness.ready {
  background: #f1fbf8;
  border-left-color: var(--teal);
}

.wishReadiness strong {
  color: var(--ink);
  overflow-wrap: anywhere;
}

.wishReadiness small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.wishReadinessPills {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  align-items: flex-start;
  gap: 8px;
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

.wishReadinessPills span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-width: 0;
  min-height: 34px;
  max-width: 100%;
  padding: 6px 9px;
  color: #7a4b00;
  background: #fff7ed;
  border: 1px solid #fed7aa;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 850;
  line-height: 1.35;
  white-space: normal;
  overflow-wrap: normal;
  word-wrap: normal;
  word-break: keep-all;
  text-align: center;
  writing-mode: horizontal-tb;
}

.wishReadinessPills span.done {
  color: #0f766e;
  background: #ecfdf5;
  border-color: #99f6e4;
}

.quickHintRow {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  align-items: flex-start;
  gap: 8px;
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

.quickHintRow button {
  appearance: none;
  -webkit-appearance: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  width: 100%;
  min-width: 0;
  min-height: 34px;
  max-width: 100%;
  padding: 7px 10px;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 850;
  line-height: 1.35;
  white-space: normal;
  overflow-wrap: normal;
  word-wrap: normal;
  word-break: keep-all;
  text-align: center;
  writing-mode: horizontal-tb;
  cursor: pointer;
}

.quickHintRow button:hover,
.quickHintRow button:focus-visible {
  border-color: var(--teal);
  box-shadow: 0 0 0 3px #d9f1ed;
}

.wishClueCoach {
  display: grid;
  gap: 12px;
  padding: 14px;
  background: linear-gradient(135deg, rgba(255, 255, 255, .98), rgba(240, 253, 250, .9));
  border: 1px solid rgba(20, 184, 166, .22);
  border-radius: 12px;
  box-shadow: var(--shadow-soft);
}

.wishClueCoachHead span {
  color: var(--teal);
  font-size: .78rem;
  font-weight: 950;
}

.wishClueCoachHead strong,
.wishClueCoachHead small {
  display: block;
}

.wishClueCoachHead strong {
  margin-top: 3px;
  color: var(--ink);
  font-size: 1.02rem;
}

.wishClueCoachHead small {
  margin-top: 3px;
  color: var(--muted);
  line-height: 1.5;
}

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

.wishClueGrid article {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 9px;
  align-items: start;
  min-height: 118px;
  padding: 11px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 10px;
}

.wishClueGrid b {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  color: var(--teal);
  background: #e6fffb;
  border-radius: 8px;
  font-size: 11px;
}

.wishClueGrid strong,
.wishClueGrid small,
.wishClueGrid em {
  display: block;
}

.wishClueGrid strong {
  color: var(--ink);
  font-size: .92rem;
}

.wishClueGrid small {
  margin-top: 3px;
  color: var(--muted);
  line-height: 1.42;
}

.wishClueGrid em {
  grid-column: 2;
  color: var(--teal);
  font-style: normal;
  font-size: .78rem;
  font-weight: 950;
}

.wishClueGrid article.todo em {
  color: #92400e;
}

.wishClueGrid article.todo b {
  color: #92400e;
  background: #fff7ed;
}

.draftList {
  display: grid;
  gap: 8px;
}

.draftList button,
.draftList span,
.duplicateBox span {
  display: grid;
  gap: 4px;
  padding: 10px;
  color: var(--ink);
  text-align: left;
  background: #f8fafc;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.draftList button.active {
  border-color: #b7ded8;
  background: #e7f5f3;
}

.draftList small,
.duplicateBox small {
  color: var(--muted);
  line-height: 1.45;
}

.duplicateBox {
  background: #fff9ed;
  border-color: #efd8a4;
}

.wishForm label {
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-weight: 800;
}

.wishForm input, .wishForm select, .wishForm textarea {
  width: 100%;
  min-height: 46px;
  padding: 0 12px;
  color: var(--ink);
  background: white;
  border: 1px solid var(--line);
  border-radius: 8px;
  transition:
    border-color var(--motion-fast) ease,
    box-shadow var(--motion-mid) ease,
    background var(--motion-fast) ease,
    transform var(--motion-fast) var(--ease-out);
}

.wishForm input:focus,
.wishForm select:focus,
.wishForm textarea:focus,
.profileQuickForm input:focus {
  border-color: var(--teal);
  outline: 0;
  box-shadow: 0 0 0 3px rgba(15, 118, 110, .16);
}

.wishForm textarea {
  min-height: 96px;
  padding-top: 12px;
  resize: vertical;
}

.wishForm input:focus,
.wishForm select:focus,
.wishForm textarea:focus {
  transform: translateY(-1px);
}

.wishPhotoUpload {
  padding: 14px;
  background: #f5fbfa;
  border: 1px dashed #9ed5cc;
  border-radius: 8px;
}

.wishPhotoUpload span {
  color: var(--ink);
}

.wishPhotoUpload input {
  padding: 10px;
  background: white;
}

.wishPhotoUpload small {
  color: var(--muted);
  line-height: 1.45;
}

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

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

.estimate {
  display: flex;
  gap: 12px;
  padding: 16px;
}

.estimate p { margin-bottom: 0; color: var(--muted); }

.riskBox {
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: white;
}

.riskBox p { margin: 6px 0; color: var(--muted); }
.riskBox small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  overflow-wrap: anywhere;
}
.riskBox.safe { border-color: #b7ded8; background: #edf9f7; }
.riskBox.review { border-color: #ffd5a8; background: #fff8ed; }
.riskBox.block { border-color: #fecdd3; background: #fff1f2; }

.restrictionInlineNotice,
.wishActionStatus {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  background: #fff8ed;
  border: 1px solid #f4c68d;
  border-left: 4px solid #b45309;
  border-radius: 8px;
}

.restrictionInlineNotice strong,
.wishActionStatus span {
  display: block;
  color: var(--ink);
  font-weight: 850;
}

.restrictionInlineNotice small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  line-height: 1.5;
}

.wishActionStatus.success {
  background: #edf9f7;
  border-color: #b7ded8;
  border-left-color: var(--teal);
}

.wishActionStatus.loading {
  background: #f8fafc;
  border-color: var(--line);
  border-left-color: #64748b;
}

.wishActionStatus.error {
  background: #fff1f2;
  border-color: #fecdd3;
  border-left-color: #be123c;
}

.policyBanner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  margin-bottom: 14px;
  padding: 12px 14px;
  background: #f8fafc;
  border: 1px solid var(--line);
  border-left: 4px solid var(--teal);
  border-radius: 8px;
}

.policyBanner.compact {
  margin: 14px 0 0;
}

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

.policyBanner button {
  margin-left: auto;
}

.progress {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
}

.progress span {
  height: 8px;
  background: #e5edf3;
  border-radius: 999px;
}

.progress span.done { background: var(--teal); }

.wishReadiness.progress {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-auto-flow: row;
  gap: 12px;
}

.wishReadiness.progress .wishReadinessPills,
.wishReadiness.progress .quickHintRow {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
}

.wishReadiness.progress .wishReadinessPills span,
.wishReadiness.progress .quickHintRow button {
  width: 100%;
  height: auto;
  min-height: 34px;
  padding: 6px 9px;
  line-height: 1.35;
  white-space: normal;
  word-break: keep-all;
  writing-mode: horizontal-tb;
  text-orientation: mixed;
}

.wishReadiness.state-progress .wishReadinessPills span.done,
.wishReadiness.state-ready .wishReadinessPills span.done,
.wishReadiness.progress .wishReadinessPills span.done,
.wishReadiness.ready .wishReadinessPills span.done {
  color: #0f766e;
  background: #ecfdf5;
  border-color: #99f6e4;
}

.nextActions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 12px 0;
}

.nextActions span {
  display: grid;
  gap: 4px;
  min-height: 76px;
  padding: 10px 12px;
  background: #f8fbfd;
  border: 1px solid var(--line);
  border-left: 4px solid var(--blue);
  border-radius: 8px;
}

.nextActions strong {
  font-size: 14px;
}

.nextActions small {
  color: var(--muted);
  line-height: 1.45;
}

.nextActions .next-primary { border-left-color: var(--teal); }
.nextActions .next-warning { border-left-color: var(--amber); }
.nextActions .next-info { border-left-color: var(--blue); }
.nextActions .next-done { border-left-color: var(--green); }

.internalRiskSummary {
  display: grid;
  gap: 4px;
  margin: 12px 0;
  padding: 10px 12px;
  background: #f8fafc;
  border: 1px solid var(--line);
  border-left: 4px solid var(--blue);
  border-radius: 8px;
}

.internalRiskSummary.high {
  background: #fff7ed;
  border-color: #fdba74;
  border-left-color: #ea580c;
}

.internalRiskSummary strong {
  font-size: 14px;
}

.internalRiskSummary span,
.internalRiskSummary small {
  color: var(--muted);
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.disputeSummary {
  display: grid;
  gap: 4px;
  margin: 12px 0;
  padding: 12px;
  background: #fff8ed;
  border: 1px solid #ffd5a8;
  border-left: 4px solid var(--amber);
  border-radius: 8px;
}

.disputeSummary.resolved {
  background: #edf9f2;
  border-color: #bbebca;
  border-left-color: var(--green);
}

.disputeSummary strong {
  font-size: 14px;
}

.disputeSummary span,
.disputeSummary small {
  color: var(--muted);
  line-height: 1.45;
}

.slaSummary {
  display: grid;
  gap: 6px;
  margin: 12px 0;
  padding: 12px;
  background: #fff8ed;
  border: 1px solid #ffd5a8;
  border-left: 4px solid var(--amber);
  border-radius: 8px;
}

.slaSummary.critical {
  background: #fff1f2;
  border-color: #fecdd3;
  border-left-color: #e11d48;
}

.slaSummary strong {
  font-size: 14px;
}

.slaSummary span {
  display: grid;
  gap: 2px;
  min-width: 0;
  font-weight: 850;
}

.slaSummary small {
  color: var(--muted);
  font-weight: 650;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.buttonRow {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 8px;
}

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

.subHead h3 {
  margin: 0;
}

.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  color: #ffffff;
  background: #b42318;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
}

.tinyButton .badge {
  margin-left: 6px;
  background: var(--teal);
}

.tinyButton {
  min-height: 30px;
  padding: 0 10px;
  color: var(--teal);
  background: #e7f5f3;
  border: 1px solid #b7ded8;
  border-radius: 7px;
}

.tinyButton:disabled {
  color: var(--muted);
  background: #f4f6f8;
  border-color: var(--line);
  cursor: not-allowed;
}

.tinyButton.dangerTiny {
  color: #9f1239;
  background: #fff1f2;
  border-color: #fecdd3;
}

.mutedButton {
  color: var(--muted);
  background: #f8fafc;
  border-color: var(--line);
}

.inlineCheck {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.inlineCheck input {
  width: 16px;
  height: 16px;
  accent-color: var(--teal);
  flex: 0 0 auto;
}

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

.miniLedger {
  display: grid;
  gap: 8px;
}

.miniLedger span {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  border-top: 1px solid var(--line);
}

.miniLedger span:first-child {
  border-top: 0;
}

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

.thread h4 { margin: 0; }

.supportTimelineBox {
  display: grid;
  gap: 10px;
  padding: 12px;
  background: #f8fafc;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.supportTimelineBox h4 {
  margin: 0;
}

.supportTimelineList {
  display: grid;
  gap: 8px;
  max-height: 320px;
  overflow: auto;
}

.supportTimelineItem {
  display: grid;
  gap: 4px;
  padding: 10px;
  background: var(--white);
  border: 1px solid var(--line);
  border-left: 4px solid var(--teal);
  border-radius: 8px;
}

.supportTimelineItem.critical {
  border-left-color: #b42318;
}

.supportTimelineItem.warning {
  border-left-color: #b7791f;
}

.supportTimelineItem span,
.supportTimelineItem small {
  color: var(--muted);
  font-size: 12px;
}

.supportTimelineItem em {
  overflow-wrap: anywhere;
  color: var(--ink);
  font-style: normal;
}

.messages {
  display: grid;
  gap: 8px;
  max-height: 240px;
  overflow: auto;
  padding: 10px;
  background: #f8fafc;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.messages p {
  display: grid;
  gap: 3px;
  margin: 0;
}

.messages span,
.muted { color: var(--muted); }

.messageDigest {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  padding: 10px 12px;
  background: #f8fafc;
  border: 1px solid var(--line);
  border-left: 4px solid #94a3b8;
  border-radius: 8px;
}

.messageDigest.hasUnread {
  background: #eff6ff;
  border-left-color: var(--blue);
}

.messageDigest strong {
  color: var(--ink);
  font-size: .84rem;
  white-space: nowrap;
}

.messageDigest span {
  min-width: 0;
  color: var(--muted);
  font-size: .86rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.messageDigest small {
  color: var(--muted);
  font-size: .76rem;
  white-space: nowrap;
}

.fileLink {
  width: fit-content;
  color: var(--teal);
  font-weight: 800;
  text-decoration: none;
}

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

.internalNoteForm {
  display: grid;
  grid-template-columns: 120px 120px auto minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.inlineForm input,
.internalNoteForm input,
.internalNoteForm select,
.twoTools input,
.twoTools select,
.settingsGrid input,
.settingsGrid select {
  min-height: 40px;
  padding: 0 12px;
  background: white;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.checkLine {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-weight: 800;
  white-space: nowrap;
}

.checkLine input {
  min-height: auto;
  width: 16px;
  height: 16px;
  padding: 0;
}

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

.uploadLine {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  color: var(--teal);
  font-weight: 800;
  background: #e7f5f3;
  border: 1px dashed #8bc9bf;
  border-radius: 8px;
}

.uploadLine input {
  max-width: 240px;
}

.evidenceUploadControls {
  display: grid;
  grid-template-columns: minmax(180px, 260px) minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  padding: 10px 12px;
  background: #f8fafc;
  border: 1px solid #dbe3ea;
  border-radius: 8px;
}

.evidenceUploadControls select {
  min-width: 0;
}

.evidenceUploadControls small {
  min-width: 0;
  color: #475569;
  font-weight: 750;
  overflow-wrap: anywhere;
}

.timelineBox {
  display: grid;
  gap: 10px;
  padding: 12px;
  background: #f8fafc;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.timelineList {
  display: grid;
  gap: 8px;
}

.timelineItem {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 10px;
  background: white;
  border: 1px solid var(--line);
  border-left: 4px solid #94a3b8;
  border-radius: 8px;
}

.timelineItem.payment { border-left-color: var(--teal); }
.timelineItem.system { border-left-color: #f59e0b; }
.timelineItem.message { border-left-color: #64748b; }
.timelineItem.stage { border-left-color: #6366f1; }

.timelineItem span {
  color: var(--muted);
  font-size: .82rem;
  font-weight: 850;
}

.timelineItem strong {
  min-width: 0;
  overflow-wrap: anywhere;
}

.timelineItem small {
  color: var(--muted);
  white-space: nowrap;
}

.stageAuditSummary {
  display: grid;
  gap: 4px;
  padding: 10px 12px;
  color: #3730a3;
  background: #eef2ff;
  border: 1px solid #c7d2fe;
  border-radius: 8px;
}

.stageAuditSummary strong,
.stageAuditSummary span,
.stageAuditSummary small {
  min-width: 0;
}

.stageAuditSummary strong {
  font-size: .86rem;
}

.stageAuditSummary span {
  overflow-wrap: anywhere;
  font-weight: 850;
}

.stageAuditSummary small {
  color: #4338ca;
  font-weight: 750;
}

.handoffBox {
  display: grid;
  gap: 8px;
  padding: 12px;
  background: #eef6ff;
  border: 1px solid #bfdbfe;
  border-radius: 8px;
}

.handoffBox p {
  margin: 0;
}

.handoffCode {
  width: fit-content;
  padding: 8px 14px;
  color: #1d4ed8;
  font-size: 1.4rem;
  font-weight: 950;
  letter-spacing: 2px;
  background: white;
  border: 1px solid #bfdbfe;
  border-radius: 8px;
}

.deliveryChecklistPanel {
  display: grid;
  gap: 10px;
  padding: 12px;
  color: #0f172a;
  background: #f8fafc;
  border: 1px solid #dbe3ea;
  border-radius: 8px;
}

.deliveryChecklistPanel.confirmed {
  background: #f0fdfa;
  border-color: #99f6e4;
}

.deliveryChecklistHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.deliveryChecklistHead strong {
  font-size: .95rem;
}

.deliveryChecklistHead span {
  padding: 4px 8px;
  color: #1d4ed8;
  font-size: .78rem;
  font-weight: 850;
  background: #dbeafe;
  border-radius: 999px;
}

.deliveryChecklistPanel.confirmed .deliveryChecklistHead span {
  color: #0f766e;
  background: #ccfbf1;
}

.deliveryChecklistPanel form {
  display: grid;
  gap: 10px;
}

.deliveryChecklistItems {
  display: grid;
  gap: 8px;
}

.deliveryChecklistItems label {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  padding: 9px 10px;
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
}

.deliveryChecklistItems input {
  width: 16px;
  height: 16px;
  min-height: auto;
  margin-top: 2px;
}

.deliveryChecklistItems span,
.deliveryChecklistPanel p,
.deliveryChecklistPanel small {
  min-width: 0;
  overflow-wrap: anywhere;
}

.deliveryChecklistPanel p {
  margin: 0;
  color: #0f766e;
  font-weight: 800;
}

.handoffFlowGuide {
  display: grid;
  gap: 10px;
  padding: 12px;
  background: #f8fafc;
  border: 1px solid #dbe3ea;
  border-radius: 8px;
}

.handoffFlowHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.handoffFlowHeader strong {
  font-size: .95rem;
}

.handoffFlowHeader span {
  padding: 4px 8px;
  color: #0f766e;
  font-size: .78rem;
  font-weight: 850;
  background: #ccfbf1;
  border-radius: 999px;
}

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

.handoffStep {
  display: grid;
  grid-template-rows: auto auto 1fr;
  gap: 5px;
  min-width: 0;
  min-height: 104px;
  padding: 10px;
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
}

.handoffStep span {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  color: #64748b;
  font-weight: 900;
  background: #f1f5f9;
  border-radius: 999px;
}

.handoffStep strong,
.handoffStep small {
  min-width: 0;
  overflow-wrap: anywhere;
}

.handoffStep strong {
  color: #0f172a;
  font-size: .86rem;
}

.handoffStep small {
  color: #64748b;
  line-height: 1.35;
}

.handoffStep.done {
  border-color: #99f6e4;
  background: #f0fdfa;
}

.handoffStep.done span {
  color: white;
  background: #0f766e;
}

.handoffStep.active {
  border-color: #fbbf24;
  box-shadow: inset 0 0 0 1px #fbbf24;
}

.handoffStep.active span {
  color: #92400e;
  background: #fef3c7;
}

.logisticsScamNotice {
  display: grid;
  gap: 5px;
  padding: 11px 12px;
  color: #7c2d12;
  background: #fff7ed;
  border: 1px solid #fed7aa;
  border-radius: 8px;
}

.logisticsScamNotice strong {
  color: #9a3412;
  font-size: .9rem;
}

.logisticsScamNotice span,
.logisticsScamNotice small {
  min-width: 0;
  overflow-wrap: anywhere;
}

.logisticsScamNotice span {
  font-weight: 800;
}

.logisticsScamNotice small {
  color: #9a3412;
  line-height: 1.45;
}

.logisticsScamNotice.compact {
  grid-template-columns: auto 1fr;
  align-items: start;
}

.logisticsScamNotice.compact small {
  grid-column: 1 / -1;
}

.riskSignalPanel {
  display: grid;
  gap: 8px;
  padding: 12px;
  color: #7f1d1d;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 8px;
}

.riskSignalPanel div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.riskSignalPanel strong {
  font-size: .92rem;
}

.riskSignalPanel span {
  flex: 0 0 auto;
  padding: 4px 8px;
  color: #991b1b;
  font-size: .78rem;
  font-weight: 850;
  background: #fee2e2;
  border-radius: 999px;
}

.riskSignalPanel small {
  color: #991b1b;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.shippingPanel {
  display: grid;
  gap: 10px;
  padding: 12px;
  background: #f8fafc;
  border: 1px solid #dbe3ea;
  border-radius: 8px;
}

.shippingPanelHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.shippingPanelHead strong {
  font-size: .95rem;
}

.shippingPanelHead span {
  padding: 4px 8px;
  color: #1d4ed8;
  font-size: .78rem;
  font-weight: 850;
  background: #dbeafe;
  border-radius: 999px;
}

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

.shippingSnapshot span {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 9px 10px;
  color: #475569;
  font-size: .78rem;
  font-weight: 800;
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
}

.shippingSnapshot small {
  min-width: 0;
  color: #0f172a;
  font-size: .86rem;
  font-weight: 850;
  overflow-wrap: anywhere;
}

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

.shippingForm input,
.shippingForm select {
  min-width: 0;
}

.shippingForm input:nth-of-type(2),
.shippingForm button {
  grid-column: span 3;
}

.payoutPreflightPanel,
.evidenceGapPanel {
  display: grid;
  gap: 10px;
  padding: 12px;
  background: #f8fafc;
  border: 1px solid #dbe3ea;
  border-radius: 8px;
}

.payoutPreflightPanel.ready,
.evidenceGapPanel.complete {
  background: #f0fdfa;
  border-color: #99f6e4;
}

.payoutPreflightPanel.blocked,
.evidenceGapPanel.missing {
  background: #fff7ed;
  border-color: #fed7aa;
}

.payoutPreflightHead,
.evidenceGapHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.payoutPreflightHead strong,
.evidenceGapHead strong {
  font-size: .92rem;
}

.payoutPreflightHead span,
.evidenceGapHead span {
  padding: 4px 8px;
  color: #7c2d12;
  font-size: .78rem;
  font-weight: 850;
  background: #ffedd5;
  border-radius: 999px;
}

.payoutPreflightPanel.ready .payoutPreflightHead span,
.evidenceGapPanel.complete .evidenceGapHead span {
  color: #0f766e;
  background: #ccfbf1;
}

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

.payoutPreflightList span,
.evidenceGapList span {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 7px;
  align-items: center;
  min-width: 0;
  padding: 8px;
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
}

.payoutPreflightList b,
.evidenceGapList b {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  color: #7c2d12;
  background: #fed7aa;
  border-radius: 999px;
}

.payoutPreflightList .ok b,
.evidenceGapList .ok b {
  color: white;
  background: #0f766e;
}

.payoutPreflightList small,
.evidenceGapList small {
  min-width: 0;
  color: #334155;
  font-weight: 800;
  overflow-wrap: anywhere;
}

@media (max-width: 760px) {
  .handoffSteps {
    grid-template-columns: 1fr;
  }

  .handoffStep {
    grid-template-columns: 24px 1fr;
    grid-template-rows: auto auto;
    min-height: 0;
  }

  .handoffStep span {
    grid-row: 1 / span 2;
  }

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

  .shippingSnapshot,
  .shippingForm {
    grid-template-columns: 1fr;
  }

  .payoutPreflightList,
  .evidenceGapList {
    grid-template-columns: 1fr;
  }

  .shippingForm input:nth-of-type(2),
  .shippingForm button {
    grid-column: auto;
  }
}

.internalNoteBox {
  display: grid;
  gap: 10px;
  padding: 12px;
  background: #fefce8;
  border: 1px solid #fde68a;
  border-radius: 8px;
}

.internalNoteList {
  display: grid;
  gap: 8px;
}

.internalNoteList span {
  display: grid;
  gap: 4px;
  padding: 10px;
  background: white;
  border: 1px solid #f5d56b;
  border-radius: 8px;
}

.internalNoteList span.pinned {
  border-color: #d97706;
  box-shadow: inset 3px 0 0 #d97706;
}

.internalNoteList span.severity-high {
  background: #fff7ed;
  border-color: #fdba74;
}

.internalNoteList span.severity-low {
  background: #f8fafc;
}

.internalNoteList small {
  color: var(--muted);
}

.internalNoteList em {
  font-style: normal;
  overflow-wrap: anywhere;
}

.evidenceBox {
  display: grid;
  gap: 10px;
  padding: 12px;
  background: #fffaf0;
  border: 1px solid #f3d28b;
  border-radius: 8px;
}

.evidenceList {
  display: grid;
  gap: 8px;
}

.evidenceList a {
  display: grid;
  gap: 3px;
  padding: 10px;
  color: var(--ink);
  text-decoration: none;
  background: white;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.evidenceList a span {
  color: var(--muted);
  font-size: .82rem;
}

@media (max-width: 760px) {
  .evidenceUploadControls {
    grid-template-columns: 1fr;
  }

  .uploadLine {
    display: grid;
  }

  .uploadLine input {
    max-width: 100%;
  }
}

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

.settingsPanel {
  display: grid;
  gap: 16px;
}

.settingGroup {
  display: grid;
  gap: 10px;
  padding-top: 2px;
  border-top: 1px solid var(--line);
}

.settingGroup:first-child {
  border-top: 0;
  padding-top: 0;
}

.compactForm {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 10px;
}

.compactForm input {
  grid-column: span 3;
}

.compactForm .buttonRow {
  grid-column: span 3;
}

.settingsGrid label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-weight: 800;
}

.settingsGrid .checkLine {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  color: var(--ink);
}

.checkLine input {
  width: 16px;
  height: 16px;
}

.preferenceGrid {
  display: grid;
  gap: 10px;
}

.preferenceGroup {
  display: grid;
  gap: 8px;
  padding: 10px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 8px;
}

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

.preferenceItem {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 10px;
  align-items: flex-start;
  padding: 10px;
  background: #f8fafc;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.preferenceItem input {
  width: 16px;
  height: 16px;
  margin-top: 3px;
}

.preferenceItem span {
  display: grid;
  gap: 3px;
}

.accountPanel-notifications .preferenceGrid:has(> label) {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: end;
  gap: 12px;
  padding: 14px;
  margin-top: 10px;
  border: 1px solid color-mix(in srgb, var(--teal) 18%, var(--line));
  border-radius: 14px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--teal) 7%, transparent), color-mix(in srgb, var(--sand) 20%, transparent)),
    var(--card);
}

.accountPanel-notifications .preferenceGrid:has(> label) label {
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-size: .82rem;
  font-weight: 900;
}

.accountPanel-notifications .preferenceGrid:has(> label) input:not([type="checkbox"]),
.accountPanel-notifications .preferenceGrid:has(> label) select {
  width: 100%;
  min-height: 42px;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--white);
  color: var(--ink);
  font: inherit;
  font-weight: 800;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7);
}

.accountPanel-notifications .preferenceGrid:has(> label) input:not([type="checkbox"]):focus,
.accountPanel-notifications .preferenceGrid:has(> label) select:focus {
  outline: 0;
  border-color: color-mix(in srgb, var(--teal) 62%, var(--line));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--teal) 14%, transparent);
}

.accountPanel-notifications .preferenceGrid:has(> label) .checkLine {
  min-height: 42px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--white);
  color: var(--ink);
}

.accountPanel-notifications .preferenceGrid:has(> label) .checkLine input {
  accent-color: var(--teal);
}

.accountPanel-notifications .preferenceGrid:has(> label) .primaryButton {
  min-height: 42px;
  margin: 0;
}

.preferenceItem small {
  color: var(--muted);
  line-height: 1.45;
}

.preferenceItem.locked {
  background: #eef6f5;
}

[data-theme="dark"] .preferenceItem {
  background: #162230;
}

[data-theme="dark"] .preferenceItem.locked {
  background: #132b2a;
}

.compactSelect {
  min-height: 40px;
  max-width: 220px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.twoTools > div {
  display: grid;
  gap: 8px;
  padding: 12px;
  background: #f8fafc;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.adminGrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}

.countryGrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}

.countryLabel {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.countryLabel.compact {
  gap: 6px;
}

.countryFlag {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  flex: 0 0 auto;
  background: rgba(255, 255, 255, .78);
  border: 1px solid rgba(15, 118, 110, .16);
  border-radius: 999px;
  font-size: 17px;
  line-height: 1;
  box-shadow: 0 6px 16px rgba(15, 31, 45, .08);
  overflow: hidden;
  position: relative;
}

.countryFlag span {
  display: block;
}

.countryFlag.flag-jp,
.countryFlag.flag-tw,
.countryFlag.flag-kr,
.countryFlag.flag-hk,
.countryFlag.flag-sg,
.countryFlag.flag-th,
.countryFlag.flag-vn,
.countryFlag.flag-my,
.countryFlag.flag-id,
.countryFlag.flag-ph,
.countryFlag.flag-cn,
.countryFlag.flag-ae,
.countryFlag.flag-au,
.countryFlag.flag-nz,
.countryFlag.flag-us,
.countryFlag.flag-ca,
.countryFlag.flag-mx,
.countryFlag.flag-uk,
.countryFlag.flag-fr,
.countryFlag.flag-de,
.countryFlag.flag-it,
.countryFlag.flag-es,
.countryFlag.flag-nl,
.countryFlag.flag-ch,
.countryFlag.flag-se,
.countryFlag.flag-tr,
.countryFlag.flag-br,
.countryFlag.flag-ar,
.countryFlag.flag-cl {
  border-radius: 50%;
  background: #fff;
  color: transparent;
}

.countryFlag.flag-jp::before {
  content: "";
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #bc002d;
}

.countryFlag.flag-tw {
  background: linear-gradient(#fe0000, #fe0000);
}

.countryFlag.flag-tw::before {
  content: "";
  position: absolute;
  inset: 0 auto auto 0;
  width: 14px;
  height: 14px;
  background: #000095;
}

.countryFlag.flag-tw::after {
  content: "";
  position: absolute;
  left: 3px;
  top: 3px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .75);
}

.countryFlag.flag-kr::before {
  content: "";
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 28%, #c60c30 0 45%, transparent 46%),
    radial-gradient(circle at 50% 72%, #003478 0 45%, transparent 46%),
    linear-gradient(90deg, #c60c30 0 50%, #003478 50% 100%);
  transform: rotate(-25deg);
}

.countryFlag.flag-kr::after {
  content: "";
  position: absolute;
  inset: 4px;
  background:
    linear-gradient(#111 0 0) 0 0 / 6px 1.5px no-repeat,
    linear-gradient(#111 0 0) 0 4px / 6px 1.5px no-repeat,
    linear-gradient(#111 0 0) 20px 0 / 6px 1.5px no-repeat,
    linear-gradient(#111 0 0) 20px 4px / 6px 1.5px no-repeat,
    linear-gradient(#111 0 0) 0 16px / 6px 1.5px no-repeat,
    linear-gradient(#111 0 0) 20px 16px / 6px 1.5px no-repeat;
  opacity: .8;
}

.countryFlag.flag-ca {
  background: linear-gradient(90deg, #d52b1e 0 26%, #fff 26% 74%, #d52b1e 74% 100%);
}

.countryFlag.flag-ca::before {
  content: "";
  width: 9px;
  height: 11px;
  background: #d52b1e;
  clip-path: polygon(50% 0, 58% 25%, 82% 14%, 70% 38%, 100% 42%, 72% 55%, 84% 82%, 56% 66%, 50% 100%, 44% 66%, 16% 82%, 28% 55%, 0 42%, 30% 38%, 18% 14%, 42% 25%);
}

.countryFlag.flag-hk,
.countryFlag.flag-vn,
.countryFlag.flag-cn,
.countryFlag.flag-tr {
  background: #de2910;
}

.countryFlag.flag-hk::before,
.countryFlag.flag-vn::before,
.countryFlag.flag-cn::before {
  content: "★";
  color: #ffde00;
  font-size: 12px;
  line-height: 1;
}

.countryFlag.flag-hk::before {
  content: "✦";
  color: #fff;
  font-size: 15px;
}

.countryFlag.flag-sg {
  background: linear-gradient(#ef3340 0 50%, #fff 50% 100%);
}

.countryFlag.flag-sg::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 5px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  box-shadow: -3px 0 0 0 #fff;
}

.countryFlag.flag-sg::after {
  content: "★";
  position: absolute;
  left: 13px;
  top: 5px;
  color: #fff;
  font-size: 5px;
}

.countryFlag.flag-th {
  background: linear-gradient(#a51931 0 17%, #fff 17% 29%, #2d2a4a 29% 71%, #fff 71% 83%, #a51931 83% 100%);
}

.countryFlag.flag-my {
  background:
    linear-gradient(#010066 0 0) 0 0 / 13px 14px no-repeat,
    repeating-linear-gradient(#cc0001 0 2px, #fff 2px 4px);
}

.countryFlag.flag-my::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 5px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  box-shadow: -2px 0 0 #ffcc00;
}

.countryFlag.flag-my::after {
  content: "★";
  position: absolute;
  left: 10px;
  top: 4px;
  color: #ffcc00;
  font-size: 5px;
}

.countryFlag.flag-id {
  background: linear-gradient(#ce1126 0 50%, #fff 50% 100%);
}

.countryFlag.flag-ph {
  background:
    linear-gradient(146deg, #fff 0 38%, transparent 39%),
    linear-gradient(#0038a8 0 50%, #ce1126 50% 100%);
}

.countryFlag.flag-ph::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 11px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #fcd116;
}

.countryFlag.flag-ae {
  background:
    linear-gradient(90deg, #ff0000 0 28%, transparent 28%),
    linear-gradient(#00732f 0 33%, #fff 33% 66%, #000 66% 100%);
}

.countryFlag.flag-au,
.countryFlag.flag-nz {
  background: #012169;
}

.countryFlag.flag-au::before,
.countryFlag.flag-nz::before {
  content: "";
  position: absolute;
  inset: 0 auto auto 0;
  width: 13px;
  height: 12px;
  background:
    linear-gradient(90deg, transparent 0 41%, #fff 41% 59%, transparent 59%),
    linear-gradient(transparent 0 41%, #fff 41% 59%, transparent 59%),
    linear-gradient(90deg, transparent 0 46%, #c8102e 46% 54%, transparent 54%),
    linear-gradient(transparent 0 46%, #c8102e 46% 54%, transparent 54%);
}

.countryFlag.flag-au::after,
.countryFlag.flag-nz::after {
  content: "✦";
  position: absolute;
  right: 5px;
  bottom: 4px;
  color: #fff;
  font-size: 10px;
}

.countryFlag.flag-nz::after {
  color: #cc142b;
  text-shadow: 0 0 0 #fff, 0 0 1px #fff;
}

.countryFlag.flag-us {
  background:
    linear-gradient(#3c3b6e 0 0) 0 0 / 12px 14px no-repeat,
    repeating-linear-gradient(#b22234 0 2px, #fff 2px 4px);
}

.countryFlag.flag-us::before {
  content: "✦";
  position: absolute;
  left: 4px;
  top: 4px;
  color: #fff;
  font-size: 5px;
}

.countryFlag.flag-mx,
.countryFlag.flag-fr,
.countryFlag.flag-it {
  background: linear-gradient(90deg, #006847 0 33%, #fff 33% 66%, #ce1126 66% 100%);
}

.countryFlag.flag-fr {
  background: linear-gradient(90deg, #0055a4 0 33%, #fff 33% 66%, #ef4135 66% 100%);
}

.countryFlag.flag-it {
  background: linear-gradient(90deg, #009246 0 33%, #fff 33% 66%, #ce2b37 66% 100%);
}

.countryFlag.flag-mx::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #8c5a2b;
}

.countryFlag.flag-uk {
  background:
    linear-gradient(90deg, transparent 0 42%, #fff 42% 58%, transparent 58%),
    linear-gradient(transparent 0 42%, #fff 42% 58%, transparent 58%),
    linear-gradient(90deg, transparent 0 46%, #c8102e 46% 54%, transparent 54%),
    linear-gradient(transparent 0 46%, #c8102e 46% 54%, transparent 54%),
    #012169;
}

.countryFlag.flag-de {
  background: linear-gradient(#000 0 33%, #dd0000 33% 66%, #ffce00 66% 100%);
}

.countryFlag.flag-es {
  background: linear-gradient(#aa151b 0 25%, #f1bf00 25% 75%, #aa151b 75% 100%);
}

.countryFlag.flag-es::before {
  content: "";
  position: absolute;
  left: 7px;
  top: 10px;
  width: 5px;
  height: 6px;
  border-radius: 1px;
  background: #aa151b;
}

.countryFlag.flag-nl {
  background: linear-gradient(#ae1c28 0 33%, #fff 33% 66%, #21468b 66% 100%);
}

.countryFlag.flag-ch {
  background: #d52b1e;
}

.countryFlag.flag-ch::before {
  content: "";
  width: 13px;
  height: 13px;
  background:
    linear-gradient(90deg, transparent 0 36%, #fff 36% 64%, transparent 64%),
    linear-gradient(transparent 0 36%, #fff 36% 64%, transparent 64%);
}

.countryFlag.flag-se {
  background:
    linear-gradient(90deg, transparent 0 30%, #fecc00 30% 43%, transparent 43%),
    linear-gradient(transparent 0 41%, #fecc00 41% 59%, transparent 59%),
    #006aa7;
}

.countryFlag.flag-tr::before {
  content: "";
  position: absolute;
  left: 7px;
  top: 8px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  box-shadow: -3px 0 0 0 #fff;
}

.countryFlag.flag-tr::after {
  content: "★";
  position: absolute;
  right: 6px;
  top: 8px;
  color: #fff;
  font-size: 7px;
}

.countryFlag.flag-br {
  background: #009b3a;
}

.countryFlag.flag-br::before {
  content: "";
  width: 17px;
  height: 12px;
  background: #ffdf00;
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}

.countryFlag.flag-br::after {
  content: "";
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #002776;
}

.countryFlag.flag-ar {
  background: linear-gradient(#75aadb 0 33%, #fff 33% 66%, #75aadb 66% 100%);
}

.countryFlag.flag-ar::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #f6b40e;
}

.countryFlag.flag-cl {
  background:
    linear-gradient(#0039a6 0 0) 0 0 / 11px 13px no-repeat,
    linear-gradient(#fff 0 50%, #d52b1e 50% 100%);
}

.countryFlag.flag-cl::before {
  content: "★";
  position: absolute;
  left: 4px;
  top: 4px;
  color: #fff;
  font-size: 5px;
}

.countryFlag.flag-fallback {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0;
  color: var(--teal);
}

.accountHero,
.accountPanel,
.accountNextStepPanel,
.accountTrustSummary,
.readinessPanel,
.wishForm,
.wishLivePreview,
.productPreviewCard,
.mapGuidePanel,
.areaSpotlight,
.areaDirectory,
.adminDashboardHero,
.mobileTrustProfileCard,
.publicProfileCard,
.profileSheetCard {
  animation: bondmai-soft-pop var(--motion-slow) var(--ease-out) both;
  transition:
    border-color var(--motion-mid) ease,
    box-shadow var(--motion-mid) ease,
    transform var(--motion-mid) var(--ease-out);
}

.accountPanel:hover,
.accountNextStepPanel:hover,
.readinessPanel:hover,
.wishLivePreview:hover,
.productPreviewCard:hover,
.areaSpotlight:hover,
.areaDirectory:hover,
.publicProfileCard:hover {
  border-color: color-mix(in srgb, var(--teal) 22%, var(--line));
  box-shadow: var(--shadow-soft);
}

.countryFlag,
.memberAvatar,
.logoMark {
  transition:
    transform var(--motion-mid) var(--ease-spring),
    box-shadow var(--motion-mid) ease;
}

.countryLabel:hover .countryFlag,
.brand:hover .logoMark,
.loginStatusChip:hover .memberAvatar {
  transform: translateY(-1px) scale(1.04);
}

.mapBoard {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(280px, 0.75fr);
  gap: 14px;
}

.mapLegend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: -4px 0 14px;
}

.mapLegend span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 10px;
  color: var(--muted);
  background: rgba(255, 255, 255, .82);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 12px;
  line-height: 1.35;
}

.mapLegend b {
  width: 10px;
  height: 10px;
  flex: 0 0 auto;
  background: var(--teal);
  border-radius: 999px;
}

.mapLegend b.need_travelers { background: #b42318; }
.mapLegend b.high_demand { background: #b45309; }
.mapLegend b.need_wishes { background: #1d4ed8; }
.mapLegend b.balanced { background: var(--teal); }

.mapCanvas {
  position: relative;
  min-height: 460px;
  overflow: hidden;
  background:
    linear-gradient(120deg, rgba(15, 118, 110, 0.12), transparent 45%),
    linear-gradient(310deg, rgba(37, 99, 235, 0.10), transparent 42%),
    #ffffff;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.mapCanvas::before {
  content: "";
  position: absolute;
  inset: 32px;
  background:
    radial-gradient(circle at 28% 38%, rgba(15, 118, 110, 0.16), transparent 18%),
    radial-gradient(circle at 62% 36%, rgba(194, 65, 12, 0.14), transparent 18%),
    radial-gradient(circle at 54% 68%, rgba(37, 99, 235, 0.12), transparent 20%);
  border: 1px dashed #cbd8e4;
  border-radius: 999px;
}

.mapBubble {
  position: absolute;
  display: grid;
  place-items: center;
  transform: translate(-50%, -50%);
  color: white;
  background: var(--teal);
  border: 3px solid white;
  border-radius: 999px;
  box-shadow: 0 14px 28px rgba(15, 31, 45, 0.18);
}

.mapBubble small {
  font-size: 11px;
  opacity: 0.9;
}

.mapBubble.need_travelers,
.areaInsight.need_travelers {
  background: #b42318;
}

.mapBubble.high_demand,
.areaInsight.high_demand {
  background: #b45309;
}

.mapBubble.need_wishes,
.areaInsight.need_wishes {
  background: #1d4ed8;
}

.areaInsightGrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}

.areaInsight {
  min-height: 132px;
  padding: 14px;
  color: white;
  background: var(--teal);
  border-radius: 8px;
  box-shadow: 0 10px 24px rgba(15, 31, 45, 0.12);
}

.areaInsight span,
.areaInsight small,
.areaInsight p {
  display: block;
  color: rgba(255, 255, 255, 0.86);
}

.areaInsight strong {
  display: block;
  margin: 8px 0;
  font-size: 18px;
}

.areaInsight p {
  margin: 10px 0 0;
  line-height: 1.45;
}

.areaList {
  padding: 16px;
  background: white;
  border: 1px solid var(--line);
  border-radius: 8px;
}

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

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

.areaRow small {
  color: var(--muted);
}

.areaRow span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.areaRow b {
  flex: 0 0 auto;
  padding: 3px 8px;
  color: var(--teal);
  background: #e7f5f3;
  border-radius: 999px;
  font-size: 12px;
}

.mapReadableView {
  display: grid;
  gap: 22px;
}

.mapGuidePanel {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  min-height: 230px;
  padding: clamp(22px, 3.2vw, 42px);
  background:
    linear-gradient(90deg, rgba(255, 255, 255, .98) 0%, rgba(255, 255, 255, .92) 48%, rgba(255, 255, 255, .32) 100%),
    url('./images/traveler-hero.jpg') center right / cover no-repeat,
    var(--white);
  border: 1px solid rgba(15, 118, 110, .22);
  border-left: 5px solid var(--teal);
  border-radius: 22px;
  box-shadow: var(--shadow);
}

.mapGuidePanel::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(247, 250, 249, .34));
}

.mapGuidePanel > * {
  position: relative;
  z-index: 1;
}

.mapGuidePanel span {
  display: block;
  margin-bottom: 6px;
  color: var(--teal);
  font-size: 12px;
  font-weight: 800;
}

.mapGuidePanel h3 {
  margin: 0 0 8px;
  max-width: 760px;
  font-size: clamp(28px, 4vw, 46px);
  line-height: 1.12;
}

.mapGuidePanel p {
  max-width: 860px;
  margin: 0;
  color: var(--muted);
  line-height: 1.7;
}

.mapGuideActions {
  display: flex;
  gap: 10px;
  white-space: nowrap;
}

.mapDecision.readable {
  margin-bottom: 0;
}

.mapFilters {
  margin-bottom: 0;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: color-mix(in srgb, var(--white) 84%, var(--teal));
}

.readableCountries .adminTile {
  min-height: 148px;
  border-radius: 18px;
  transition:
    transform var(--motion-mid) var(--ease-out),
    box-shadow var(--motion-mid) ease,
    border-color var(--motion-fast) ease;
}

.readableCountries .adminTile:hover {
  transform: translateY(-2px);
  border-color: rgba(15, 118, 110, .34);
  box-shadow: 0 18px 38px rgba(15, 31, 45, .10);
}

.readableCountries .countryLabel {
  font-weight: 800;
}

.areaHumanBoard {
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(380px, .96fr);
  gap: 20px;
  align-items: start;
}

.areaSpotlight,
.areaDirectory {
  min-width: 0;
  padding: 18px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: 0 14px 34px rgba(15, 31, 45, .08);
}

.areaSpotlight {
  display: grid;
  gap: 14px;
}

.areaHumanCard {
  display: grid;
  gap: 12px;
  padding: 16px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .98), rgba(238, 247, 246, .92)),
    var(--white);
  border: 1px solid rgba(15, 118, 110, .18);
  border-left: 5px solid var(--teal);
  border-radius: 18px;
  transition:
    transform var(--motion-mid) var(--ease-out),
    box-shadow var(--motion-mid) ease;
}

.areaHumanCard:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 36px rgba(15, 31, 45, .10);
}

.areaHumanCard.need_travelers {
  border-left-color: #b42318;
}

.areaHumanCard.high_demand {
  border-left-color: #b45309;
}

.areaHumanCard.need_wishes {
  border-left-color: #1d4ed8;
}

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

.areaHumanCard p {
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
}

.areaHumanCard dl {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
}

.areaHumanCard dl div {
  padding: 12px;
  background: rgba(255, 255, 255, .78);
  border: 1px solid var(--line);
  border-radius: 14px;
}

.areaHumanCard dt {
  color: var(--muted);
  font-size: 12px;
}

.areaHumanCard dd {
  margin: 2px 0 0;
  font-weight: 900;
}

.areaHumanCard small {
  color: var(--muted);
}

.areaState {
  flex: 0 0 auto;
  padding: 6px 11px;
  color: #064e3b;
  background: linear-gradient(135deg, #ccfbf1, #fef3c7);
  border: 1px solid rgba(15, 118, 110, .18);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 950;
}

.areaDirectory .areaRow {
  display: grid;
  gap: 6px;
  padding: 14px;
  margin-bottom: 10px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: color-mix(in srgb, var(--white) 92%, var(--teal));
}

.areaDirectory .countryLabel {
  font-weight: 800;
}

.policyGrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}

.policyItem {
  min-height: 220px;
  padding: 18px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.policyItem .glyph {
  color: var(--teal);
}

.policyItem h3 {
  margin: 14px 0 8px;
}

.policyItem p {
  line-height: 1.65;
  color: var(--ink);
}

.policyItem small {
  color: var(--muted);
  line-height: 1.5;
}

.policyQaView {
  display: grid;
  gap: 14px;
  margin-top: 18px;
}

.onboardingPanel {
  width: min(1180px, calc(100% - 32px));
  margin: 18px auto 0;
  padding: 16px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow-soft);
}

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

.mobileQuickTasks {
  display: none;
}

.onboardingCard {
  display: grid;
  gap: 8px;
  align-content: start;
  min-height: 190px;
  padding: 14px;
  background: #f8fbfd;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.onboardingCard .glyph {
  color: var(--teal);
}

.onboardingCard h3 {
  margin-bottom: 0;
  font-size: 16px;
}

.onboardingCard p {
  min-height: 66px;
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}

[data-theme="dark"] .onboardingCard {
  background: #0f1821;
}

.faqSearchBox {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.faqSearchBox input {
  flex: 1;
  min-width: 0;
  color: var(--ink);
  background: transparent;
  border: 0;
  outline: 0;
}

.faqSearchBox small {
  color: var(--muted);
  font-weight: 800;
}

.selfServiceGuide {
  display: grid;
  gap: 14px;
  margin-top: 18px;
  padding: 16px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow-soft);
}

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

.selfServiceTabs button {
  min-height: 38px;
  padding: 0 12px;
  color: var(--muted);
  background: #f8fbfd;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-weight: 800;
}

.selfServiceTabs button.active {
  color: var(--white);
  background: var(--teal);
  border-color: var(--teal);
}

.selfServiceCard {
  display: grid;
  gap: 10px;
  padding: 14px;
  background: #f8fbfd;
  border: 1px solid var(--line);
  border-radius: 8px;
}

[data-theme="dark"] .selfServiceTabs button,
[data-theme="dark"] .selfServiceCard {
  background: #0f1821;
}

.selfServiceCard h3 {
  margin-bottom: 0;
}

.selfServiceCard ol {
  display: grid;
  gap: 7px;
  margin: 0;
  padding-left: 22px;
  color: var(--muted);
  line-height: 1.55;
}

.supportRequestForm {
  display: grid;
  gap: 9px;
}

.supportRequestForm textarea,
.supportRequestForm select {
  width: 100%;
  padding: 12px;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.supportRequestForm textarea {
  min-height: 94px;
  resize: vertical;
}

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

.policyFaqItem,
.policyQaColumns > div,
.policyFinanceNote {
  padding: 16px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.policyFaqItem h3,
.policyQaColumns h3 {
  margin-bottom: 8px;
  font-size: 17px;
}

.policyFaqItem p {
  margin: 0;
  color: var(--muted);
  line-height: 1.65;
}

.policyQaColumns {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: 14px;
}

.policyMatrix {
  display: grid;
  gap: 8px;
}

.policyMatrix span {
  display: grid;
  gap: 4px;
  padding: 10px 12px;
  background: #f8fbfd;
  border: 1px solid var(--line);
  border-left: 4px solid var(--teal);
  border-radius: 8px;
}

.policyMatrix small {
  color: var(--muted);
  line-height: 1.45;
}

.policyFinanceNote {
  display: flex;
  align-items: center;
  gap: 12px;
  border-color: #b7ded8;
  background: #eefaf7;
}

.policyFinanceNote strong {
  color: var(--teal);
  white-space: nowrap;
}

.policyFinanceNote span {
  color: var(--muted);
  line-height: 1.55;
}

.adminTile { padding: 16px; }
.adminTile strong { display: block; margin: 16px 0 6px; font-size: 24px; }
.adminTile p { margin-bottom: 0; color: var(--muted); line-height: 1.5; }

.adminTools {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: -4px 0 18px;
}

.supportDesk {
  display: grid;
  gap: 14px;
  margin-bottom: 18px;
  padding: 16px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.supportDesk .miniLedger {
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
}

.supportDesk .miniLedger span {
  display: grid;
  gap: 4px;
  padding: 10px;
  background: #f8fafc;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.supportDesk .miniLedger small {
  color: var(--ink);
  font-weight: 800;
}

.supportDesk .adminColumns {
  margin-bottom: 0;
}

.riskCommandPanel {
  display: grid;
  gap: 14px;
  margin-bottom: 18px;
  padding: 16px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow-soft);
}

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

.riskCommandTile {
  display: grid;
  gap: 4px;
  padding: 14px;
  background: #f8fbfd;
  border: 1px solid var(--line);
  border-left: 4px solid var(--teal);
  border-radius: 8px;
}

.riskCommandTile.hot {
  border-left-color: var(--rose);
  background: #fff1f2;
}

.riskCommandTile.warm {
  border-left-color: var(--amber);
  background: #fff8ed;
}

[data-theme="dark"] .riskCommandTile,
[data-theme="dark"] .riskCommandList span {
  background: #0f1821;
}

[data-theme="dark"] .riskCommandTile.hot {
  background: #2a1219;
}

[data-theme="dark"] .riskCommandTile.warm {
  background: #261b0d;
}

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

.riskCommandTile strong {
  font-size: clamp(24px, 4vw, 38px);
  line-height: 1;
}

.riskCommandTile small {
  color: var(--muted);
}

.riskCommandTypeStrip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: #f8fbfd;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.riskCommandTypeStrip > strong {
  margin-right: 4px;
}

.riskCommandTypeStrip > small {
  flex: 1 1 220px;
  color: var(--muted);
  line-height: 1.45;
}

.riskCommandTypeStrip span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  padding: 3px 9px;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
}

.riskCommandTypeStrip b {
  color: var(--teal);
}

[data-theme="dark"] .riskCommandTypeStrip {
  background: #0f1821;
}

.riskCommandList {
  display: grid;
  gap: 8px;
}

.riskCommandList span {
  display: grid;
  gap: 4px;
  padding: 11px 12px;
  background: #f8fbfd;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.riskCommandList small,
.riskCommandList em {
  color: var(--muted);
  font-style: normal;
  line-height: 1.45;
}

.adminColumns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}

.adminColumns > div { padding: 16px; }

.adminSummaryStrip {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: color-mix(in srgb, var(--card) 86%, var(--teal) 14%);
}

.adminSummaryStrip span {
  display: grid;
  gap: 3px;
  min-width: 0;
}

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

.adminSummaryStrip small {
  color: var(--muted);
  line-height: 1.35;
}

.compactList span {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid var(--line);
}

.compactList span:first-child { border-top: 0; }

.compactList .quickActions {
  width: 100%;
  padding: 4px 0 0;
  border-top: 0;
  justify-content: flex-start;
}

.compactList .quickActions .tinyButton {
  min-height: 30px;
  padding: 6px 9px;
}

.adminRevenuePanel {
  display: grid;
  gap: 16px;
}

.adminRevenuePanel > .sectionHeader {
  margin-bottom: 0;
}

.adminRevenuePanel .adminSummaryStrip {
  margin-bottom: 0;
}

.softMetric {
  min-width: 0;
}

.adminRevenuePanel .compactPanel {
  display: grid;
  gap: 12px;
  margin-bottom: 0;
}

.compactRow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
  padding: 12px 0;
  border-top: 1px solid var(--line);
}

.compactRow:first-child {
  border-top: 0;
  padding-top: 0;
}

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

.compactRow p,
.compactRow small {
  display: block;
  margin: 4px 0 0;
  color: var(--muted);
  line-height: 1.45;
}

.supportRequestQueue span {
  display: grid;
  justify-content: stretch;
}

.supportRequestFilters {
  margin: 8px 0 10px;
}

.supportRequestSummary {
  margin: 8px 0;
}

.supportRequestQueue small {
  overflow-wrap: anywhere;
}

.supportStatusList span {
  display: grid;
  justify-content: stretch;
}

.supportStatusList small {
  overflow-wrap: anywhere;
}

.slaStrip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 10px;
}

.slaStrip span {
  display: grid;
  gap: 4px;
  padding: 10px;
  color: var(--muted);
  background: #f8fafc;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.slaStrip strong {
  color: var(--ink);
  font-size: 20px;
}

.healthList span {
  border-left: 4px solid var(--line);
  padding-left: 10px;
}

.healthList .health-critical {
  border-left-color: #b42318;
}

.healthList .health-warning {
  border-left-color: #b7791f;
}

.healthList .health-info {
  border-left-color: var(--teal);
}

.orderTable { overflow: hidden; }

.tableHead, .tableRow {
  display: grid;
  grid-template-columns: 1.6fr 0.8fr 0.8fr 1fr 0.8fr;
  gap: 12px;
  align-items: center;
  padding: 14px 16px;
}

.tableHead {
  font-weight: 850;
  background: #eef3f7;
}

.tableRow { border-top: 1px solid var(--line); }
.tableRow small { display: block; margin-top: 4px; }

.empty {
  display: grid;
  gap: 8px;
  padding: 18px;
  color: var(--muted);
}

.empty strong {
  color: var(--ink);
  font-size: 18px;
}

.empty p {
  max-width: 560px;
  margin: 0;
  line-height: 1.6;
}

.loadingStatePanel {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(15, 118, 110, 0.1), rgba(255, 255, 255, 0.92));
  box-shadow: var(--shadow-soft);
}

.loadingStatePanel span {
  color: var(--accent);
  font-weight: 850;
  font-size: 13px;
}

.loadingStatePanel h2 {
  margin: 4px 0 6px;
  font-size: 24px;
}

.loadingStatePanel p {
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
}

.loadingPulse {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  color: #fff;
  background: var(--accent);
  animation: loadingPulse 1.2s ease-in-out infinite;
}

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

.loadingStepGrid span {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 10px;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 10px;
}

.loadingStepGrid b {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  color: #fff;
  background: var(--accent);
  font-size: 12px;
}

.loadingStatePanel .softButton {
  grid-column: 1 / -1;
  justify-self: start;
}

@keyframes loadingPulse {
  0%, 100% { transform: scale(1); opacity: 0.86; }
  50% { transform: scale(1.06); opacity: 1; }
}

.emptyActionState {
  display: grid;
  gap: 12px;
  justify-items: center;
  text-align: center;
}

.emptyActionState strong {
  color: var(--ink);
  font-size: 22px;
}

.emptyActionState p {
  max-width: 560px;
  margin: 0;
  line-height: 1.65;
}

.guestFlowNudge {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(180px, .45fr) auto;
  gap: 14px;
  align-items: center;
  padding: 16px;
  background: linear-gradient(135deg, rgba(20, 184, 166, .12), rgba(37, 99, 235, .07));
  border: 1px solid rgba(20, 184, 166, .22);
  border-left: 4px solid var(--teal);
  border-radius: 14px;
  box-shadow: var(--shadow-soft);
}

.guestFlowNudge > div:first-child {
  display: grid;
  gap: 4px;
}

.guestFlowNudge span {
  color: var(--teal);
  font-size: 12px;
  font-weight: 950;
}

.guestFlowNudge strong {
  color: var(--ink);
  font-size: 20px;
}

.guestFlowNudge p {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}

.guestFlowNudge ol {
  display: grid;
  gap: 6px;
  margin: 0;
  padding-left: 20px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.guestFlowNudge .buttonRow {
  justify-content: flex-end;
}

.decisionStrip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 12px 0 16px;
  max-width: 100%;
}

.decisionStrip article {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 4px 10px;
  align-items: start;
  min-width: 0;
  min-height: 104px;
  padding: 14px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow-soft);
}

.decisionStrip svg {
  grid-row: 1 / span 3;
  width: 20px;
  height: 20px;
  color: var(--accent);
}

.decisionStrip .glyph {
  grid-row: 1 / span 3;
  display: inline-grid;
  place-items: center;
  min-width: 32px;
  height: 24px;
  color: var(--accent);
  font-size: 11px !important;
  line-height: 1;
  white-space: nowrap;
}

.decisionStrip span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
  min-width: 0;
  overflow-wrap: anywhere;
}

.decisionStrip strong {
  color: var(--ink);
  font-size: 17px;
  min-width: 0;
  overflow-wrap: anywhere;
}

.decisionStrip small {
  color: var(--muted);
  line-height: 1.45;
  min-width: 0;
  overflow-wrap: anywhere;
}

.decisionStrip .decisionPrimary {
  border-color: rgba(13, 128, 116, .28);
  background: linear-gradient(135deg, var(--card), rgba(236, 253, 245, .78));
}

.adminMigrationPanel {
  display: grid;
  gap: 12px;
  padding: 16px;
  background: linear-gradient(135deg, var(--card), rgba(236, 253, 245, .64));
  border: 1px solid var(--line);
  border-left: 4px solid var(--teal);
  border-radius: 14px;
  box-shadow: var(--shadow-soft);
}

.adminMigrationPanel.blocked {
  border-left-color: var(--amber);
}

.adminMigrationPanel .sectionHead > strong {
  align-self: start;
  padding: 8px 10px;
  color: var(--ink);
  background: rgba(255, 255, 255, .7);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: .86rem;
}

.adminMigrationSteps article.done {
  border-color: rgba(13, 128, 116, .28);
}

.adminMigrationSteps article.pending {
  border-color: rgba(245, 158, 11, .34);
}

.adminMigrationActions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
}

.adminMigrationActions > span {
  display: grid;
  gap: 3px;
  color: var(--ink);
  font-weight: 900;
}

.adminMigrationActions small {
  color: var(--muted);
  line-height: 1.45;
}

.adminMigrationPromote {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto;
  gap: 10px;
  align-items: end;
  padding: 12px;
  background: rgba(255, 255, 255, .72);
  border: 1px solid var(--line);
  border-radius: 12px;
}

.adminMigrationPromote label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: .82rem;
  font-weight: 800;
}

.adminMigrationPromote input {
  min-height: 42px;
}

.adminMigrationPromote small {
  grid-column: 1 / -1;
  color: var(--muted);
  line-height: 1.45;
}

.accountGrid {
  display: grid;
  grid-template-columns: 360px minmax(0, 1fr);
  gap: 14px;
  margin-bottom: 18px;
}

.accountProfileHero {
  display: grid;
  gap: 14px;
  margin-bottom: 18px;
  padding: 18px;
  background: linear-gradient(135deg, rgba(20, 184, 166, .12), rgba(37, 99, 235, .08));
  border: 1px solid rgba(20, 184, 166, .22);
  border-left: 4px solid var(--teal);
  border-radius: 14px;
  box-shadow: var(--shadow-soft);
}

.accountProfileIntro {
  display: flex;
  gap: 14px;
  align-items: center;
}

.accountProfileIntro span,
.profileColorField > span {
  display: block;
  color: var(--teal);
  font-size: .78rem;
  font-weight: 950;
}

.accountProfileIntro h3,
.accountProfileIntro p {
  margin: 0;
}

.accountProfileIntro h3 {
  color: var(--ink);
  font-size: 1.35rem;
}

.accountProfileIntro p {
  color: var(--muted);
  line-height: 1.6;
}

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

.profileIdentityRow span {
  padding: 7px 10px;
  background: rgba(255, 255, 255, .72);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  font-size: .86rem;
  font-weight: 800;
}

.profileIdentityRow .ok {
  color: #047857;
  border-color: rgba(4, 120, 87, .24);
}

.profileIdentityRow .todo {
  color: #92400e;
  border-color: rgba(146, 64, 14, .22);
}

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

.profileQuickForm label,
.profileColorField {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-weight: 850;
}

.profileQuickForm input {
  min-width: 0;
  width: 100%;
  min-height: 44px;
  padding: 0 12px;
  color: var(--ink);
  background: rgba(255, 255, 255, .9);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7);
}

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

.accountQuickStats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.accountQuickStats article {
  min-height: 86px;
  padding: 10px;
  background: rgba(255, 255, 255, .72);
  border: 1px solid var(--line);
  border-radius: 12px;
}

.accountQuickStats span,
.accountQuickStats small {
  display: block;
  color: var(--muted);
  font-size: 12px;
}

.accountQuickStats strong {
  display: block;
  margin: 4px 0;
  color: var(--ink);
  font-size: 22px;
}

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

.accountSetupStrip span {
  display: grid;
  gap: 3px;
  padding: 10px;
  color: var(--muted);
  font-size: 13px;
  background: rgba(255, 255, 255, .65);
  border: 1px solid var(--line);
  border-radius: 12px;
}

.accountSetupStrip span.ready {
  background: rgba(236, 253, 245, .72);
  border-color: rgba(13, 128, 116, .26);
}

.accountSetupStrip span.todo {
  background: rgba(255, 251, 235, .74);
  border-color: rgba(217, 119, 6, .28);
}

.accountSetupStrip strong {
  color: var(--ink);
  font-size: 12px;
}

.accountSetupStrip small {
  color: var(--muted);
  font-size: 12px;
}

.accountQuickPassword {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)) auto;
  gap: 10px;
  align-items: end;
  margin: 12px 0;
  padding: 12px;
  background: rgba(255, 255, 255, .68);
  border: 1px solid var(--line);
  border-radius: 12px;
}

.accountQuickPassword .sectionHead,
.accountQuickPassword .passwordStrength {
  grid-column: 1 / -1;
}

.accountQuickPassword label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.oauthPasswordNotice {
  display: grid;
  gap: 4px;
  padding: 11px 12px;
  color: var(--ink);
  background: color-mix(in srgb, var(--teal) 8%, var(--white));
  border: 1px solid color-mix(in srgb, var(--teal) 28%, var(--line));
  border-radius: 8px;
}

.oauthPasswordNotice small {
  color: var(--muted);
  line-height: 1.45;
}

.accountQuickPassword input {
  min-width: 0;
}

.accountQuickNext {
  display: grid;
  gap: 12px;
  padding: 13px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--sand) 34%, white), rgba(255, 253, 249, .86));
  border: 1px solid color-mix(in srgb, var(--amber) 20%, var(--line));
  border-radius: 14px;
}

.accountQuickNextHead span,
.accountQuickNextHead strong,
.accountQuickNextHead small {
  display: block;
}

.accountQuickNextHead span {
  color: var(--teal);
  font-size: .78rem;
  font-weight: 950;
}

.accountQuickNextHead strong {
  margin: 3px 0;
  color: var(--ink);
  font-size: 1.02rem;
}

.accountQuickNextHead small {
  color: var(--muted);
  line-height: 1.45;
}

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

.accountQuickNextList button {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  min-height: 108px;
  padding: 13px;
  color: var(--ink);
  text-align: left;
  background: linear-gradient(180deg, rgba(255, 253, 249, .98), rgba(255, 249, 240, .86));
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 10px 24px rgba(15, 23, 42, .06);
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}

.accountQuickNextList b {
  display: none;
}

.accountQuickNextList button:hover,
.accountQuickNextList button:focus-visible {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--teal) 42%, var(--line));
  box-shadow: 0 14px 30px rgba(15, 118, 110, .12);
}

.accountQuickNextList button:nth-child(2) .accountQuickIcon {
  color: #2f6f9f;
  background: linear-gradient(135deg, #eef7fb, #e8f1f6);
  border-color: #c4dbe8;
}

.accountQuickNextList button:nth-child(3) .accountQuickIcon {
  color: var(--rose);
  background: linear-gradient(135deg, #fff4f1, #fff8ed);
  border-color: #f5c7bd;
}

.accountQuickIcon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  color: var(--teal);
  background: linear-gradient(135deg, color-mix(in srgb, var(--teal) 14%, white), color-mix(in srgb, var(--sand) 48%, white));
  border: 1px solid color-mix(in srgb, var(--teal) 18%, var(--line));
  border-radius: 12px;
}

.accountQuickNextList .accountQuickIcon {
  width: 38px;
  height: 38px;
}

.accountQuickNextList .accountQuickIcon svg {
  width: 20px;
  height: 20px;
}

.accountQuickIcon svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.accountQuickNextList strong,
.accountQuickNextList small,
.accountQuickNextList em {
  display: block;
}

.accountQuickNextList strong {
  color: var(--ink);
  font-size: .9rem;
}

.accountQuickNextList small {
  margin-top: 2px;
  color: var(--muted);
  line-height: 1.38;
}

.accountQuickNextList em {
  grid-column: 2;
  color: var(--teal);
  font-style: normal;
  font-size: .76rem;
  font-weight: 950;
}

.travelerStartPanel {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(260px, .85fr) auto;
  gap: 14px;
  align-items: center;
  margin-bottom: 18px;
  padding: 16px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--teal) 12%, white), color-mix(in srgb, var(--sand) 40%, white));
  border: 1px solid color-mix(in srgb, var(--teal) 32%, var(--line));
  border-left: 4px solid var(--teal);
  border-radius: 14px;
  box-shadow: var(--shadow-soft);
}

.travelerStartCopy {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.travelerStartCopy .glyph {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  color: var(--teal);
  background: color-mix(in srgb, var(--teal) 12%, white);
  border: 1px solid color-mix(in srgb, var(--teal) 24%, var(--line));
  border-radius: 12px;
}

.travelerStartCopy span {
  color: var(--teal);
  font-size: .78rem;
  font-weight: 950;
}

.travelerStartCopy h3 {
  margin: 2px 0 4px;
  color: var(--ink);
}

.travelerStartCopy p {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}

.travelerStartSteps {
  display: grid;
  gap: 8px;
}

.travelerStartSteps span {
  display: flex;
  gap: 8px;
  align-items: center;
  color: var(--ink);
  font-size: .86rem;
  font-weight: 850;
}

.travelerStartSteps span::first-letter {
  color: var(--teal);
}

.travelerStartActions {
  display: grid;
  gap: 8px;
  min-width: 150px;
}

.accountSessionList {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
  padding: 12px;
  background: rgba(255, 255, 255, .64);
  border: 1px solid var(--line);
  border-radius: 12px;
}

.accountSessionList .sectionHead {
  grid-column: 1 / -1;
  margin: 0;
}

.accountSessionList article {
  display: grid;
  gap: 4px;
  padding: 12px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 10px;
}

.accountSessionList article.current {
  border-color: color-mix(in srgb, var(--teal) 42%, var(--line));
  background: color-mix(in srgb, var(--teal) 7%, var(--white));
}

.accountSessionList strong {
  color: var(--ink);
  font-size: .92rem;
}

.accountSessionList span,
.accountSessionList small {
  min-width: 0;
  color: var(--muted);
  overflow-wrap: anywhere;
}

.forgotPasswordPanel {
  display: grid;
  gap: 8px;
  padding: 16px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--teal) 10%, var(--white)), color-mix(in srgb, var(--gold) 9%, var(--white)));
  border: 1px solid color-mix(in srgb, var(--teal) 28%, var(--line));
  border-left: 5px solid var(--teal);
  border-radius: 16px;
  box-shadow: 0 14px 34px rgba(15, 23, 42, .06);
}

.forgotPasswordPanel strong,
.forgotPasswordPanel p {
  margin: 0;
}

.forgotPasswordPanel strong {
  color: var(--ink);
  font-size: 1.05rem;
}

.forgotPasswordPanel p {
  color: var(--muted);
  line-height: 1.55;
}

.forgotPasswordInline {
  appearance: none;
  justify-self: end;
  width: fit-content;
  margin: -2px 0 2px;
  padding: 6px 0;
  color: var(--teal-strong);
  background: transparent;
  border: 0;
  cursor: pointer;
  font-weight: 900;
}

.forgotPasswordInline:hover,
.forgotPasswordInline:focus-visible {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 4px;
}

[data-theme="dark"] .forgotPasswordPanel {
  background:
    linear-gradient(135deg, rgba(20, 184, 166, .16), rgba(245, 158, 11, .12)),
    var(--surface);
  border-color: rgba(94, 234, 212, .38);
  box-shadow: 0 18px 42px rgba(0, 0, 0, .26);
}

[data-theme="dark"] .forgotPasswordPanel strong {
  color: var(--ink);
}

[data-theme="dark"] .forgotPasswordPanel p {
  color: var(--muted);
}

[data-theme="dark"] .forgotPasswordInline {
  color: var(--teal-bright);
}

[data-theme="dark"] .forgotPasswordInline:hover,
[data-theme="dark"] .forgotPasswordInline:focus-visible {
  color: var(--ink);
}

.linkButton {
  appearance: none;
  width: fit-content;
  padding: 0;
  color: var(--teal);
  background: transparent;
  border: 0;
  cursor: pointer;
  font-weight: 900;
}

.linkButton:hover,
.linkButton:focus-visible {
  text-decoration: underline;
}

.accountNextStepPanel {
  display: grid;
  gap: 12px;
  margin-bottom: 18px;
  padding: 16px;
  background: linear-gradient(135deg, rgba(255, 255, 255, .98), rgba(239, 246, 255, .86));
  border: 1px solid rgba(37, 99, 235, .16);
  border-left: 4px solid var(--blue);
  border-radius: 14px;
  box-shadow: var(--shadow-soft);
}

.accountNextStepHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.accountNextStepHead span {
  color: var(--teal);
  font-size: .78rem;
  font-weight: 950;
}

.accountNextStepHead strong,
.accountNextStepHead small {
  display: block;
}

.accountNextStepHead strong {
  margin: 3px 0;
  color: var(--ink);
  font-size: 1.05rem;
}

.accountNextStepHead small {
  color: var(--muted);
  line-height: 1.5;
}

.accountNextStepHead b {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 64px;
  height: 64px;
  color: var(--teal);
  background: #ecfeff;
  border: 8px solid #d9f1ed;
  border-radius: 999px;
  font-size: 18px;
}

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

.accountNextStepList button {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  min-height: 104px;
  padding: 12px;
  color: var(--ink);
  text-align: left;
  background: rgba(255, 255, 255, .78);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 8px 20px rgba(23, 33, 43, .05);
}

.accountNextStepList i {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  color: var(--teal);
  background: #e6fffb;
  border-radius: 10px;
  font-style: normal;
  font-size: 11px;
  font-weight: 950;
}

.accountNextStepList strong,
.accountNextStepList small,
.accountNextStepList em {
  display: block;
}

.accountNextStepList strong {
  color: var(--ink);
  font-size: .94rem;
}

.accountNextStepList small {
  margin-top: 3px;
  color: var(--muted);
  line-height: 1.42;
}

.accountNextStepList em {
  grid-column: 2;
  color: var(--teal);
  font-style: normal;
  font-size: .78rem;
  font-weight: 950;
}

.accountQuickActions button {
  display: grid;
  gap: 5px;
  min-height: 88px;
  padding: 12px;
  color: var(--ink);
  text-align: left;
  background: rgba(255, 255, 255, .78);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 8px 20px rgba(23, 33, 43, .06);
}

.accountQuickActions strong {
  font-size: .95rem;
}

.accountQuickActions small {
  color: var(--muted);
  line-height: 1.45;
}

.accountTrustSummary,
.recentReviewsCard {
  display: grid;
  gap: 12px;
  margin-bottom: 18px;
  padding: 18px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow-soft);
}

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

.trustSummaryCard {
  display: grid;
  gap: 8px;
  min-height: 132px;
  padding: 14px;
  background: #f8fafc;
  border: 1px solid var(--line);
  border-radius: 12px;
}

.trustSummaryCard span {
  color: var(--muted);
  font-size: .82rem;
  font-weight: 900;
}

.trustSummaryCard strong {
  color: var(--ink);
  font-size: 1.7rem;
  line-height: 1;
}

.trustSummaryCard small {
  color: var(--muted);
  line-height: 1.45;
}

.reviewListV2 {
  display: grid;
  gap: 10px;
}

.reviewListV2 article {
  display: grid;
  grid-template-columns: 68px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding: 12px;
  background: #f8fafc;
  border: 1px solid var(--line);
  border-radius: 12px;
}

.reviewListV2 article.mine {
  border-color: rgba(20, 184, 166, .38);
  background: #f0fdfa;
}

.reviewScore {
  display: grid;
  place-items: center;
  min-height: 56px;
  color: #92400e;
  background: #fffbeb;
  border: 1px solid rgba(245, 158, 11, .28);
  border-radius: 10px;
}

.reviewScore strong {
  color: #78350f;
  font-size: 1.25rem;
  line-height: 1;
}

.reviewScore span {
  font-size: .78rem;
  font-weight: 900;
}

.reviewListV2 h4,
.reviewListV2 p {
  margin: 0;
}

.reviewListV2 h4 {
  color: var(--ink);
  font-size: 1rem;
}

.reviewListV2 p {
  margin-top: 4px;
  color: var(--ink);
  line-height: 1.55;
}

.reviewListV2 small {
  display: block;
  margin-top: 6px;
  color: var(--muted);
}

.reviewEmptyState {
  gap: 10px;
}

.emptySignalGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  width: 100%;
  margin-top: 2px;
}

.emptySignalGrid span {
  display: grid;
  gap: 4px;
  justify-items: center;
  padding: 10px 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--white) 92%, var(--teal));
  color: var(--muted);
  text-align: center;
}

.emptySignalGrid b {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: var(--teal);
  color: white;
}

.viewFallback {
  display: grid;
  gap: 8px;
  margin: 16px 0;
  padding: 16px;
  background: #fff7ed;
  border: 1px solid rgba(245, 158, 11, .32);
  border-left: 4px solid #f59e0b;
  border-radius: 12px;
  color: #92400e;
}

.viewFallback strong {
  color: #7c2d12;
  font-size: 1.05rem;
}

.viewFallback p {
  margin: 0;
  line-height: 1.6;
}

.viewFallback code {
  white-space: pre-wrap;
  word-break: break-word;
}

.adminShell {
  display: grid;
  gap: 16px;
}

.adminShellHero {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 18px;
  background: linear-gradient(135deg, rgba(15, 23, 42, .04), rgba(20, 184, 166, .12));
  border: 1px solid var(--line);
  border-left: 4px solid var(--teal);
  border-radius: 14px;
  box-shadow: var(--shadow-soft);
}

.adminShellHero span {
  color: var(--teal);
  font-size: .8rem;
  font-weight: 950;
}

.adminShellHero h2,
.adminShellHero p {
  margin: 0;
}

.adminShellHero h2 {
  margin-top: 4px;
  color: var(--ink);
}

.adminShellHero p,
.adminShellStatus small {
  color: var(--muted);
  line-height: 1.55;
}

.adminShellStatus {
  display: grid;
  gap: 4px;
  min-width: 180px;
  align-content: center;
  text-align: right;
}

.adminShellStatus strong {
  color: var(--ink);
  font-size: 1.15rem;
}

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

.adminShellTile {
  display: grid;
  gap: 8px;
  padding: 14px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow-soft);
}

.adminShellTile span {
  color: var(--muted);
  font-size: .82rem;
  font-weight: 900;
}

.adminShellTile strong {
  color: var(--ink);
  font-size: 1.6rem;
}

.adminShellTile small {
  color: var(--muted);
  line-height: 1.45;
}

.adminPriorityQueue {
  display: grid;
  gap: 12px;
  padding: 16px;
  background: linear-gradient(135deg, rgba(255, 255, 255, .98), rgba(240, 253, 250, .92));
  border: 1px solid rgba(20, 184, 166, .2);
  border-radius: 14px;
  box-shadow: var(--shadow-soft);
}

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

.adminPriorityHead span {
  color: var(--teal);
  font-size: .78rem;
  font-weight: 950;
}

.adminPriorityHead strong {
  display: block;
  margin: 3px 0;
  color: var(--ink);
  font-size: 1.08rem;
}

.adminPriorityHead small {
  color: var(--muted);
  line-height: 1.5;
}

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

.adminPriorityItem {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 96px;
  padding: 12px;
  color: var(--ink);
  text-align: left;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 10px 22px rgba(15, 23, 42, .06);
}

.adminPriorityItem b {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  color: var(--teal);
  background: #e6fffb;
  border-radius: 10px;
  font-size: 12px;
}

.adminPriorityItem strong,
.adminPriorityItem small {
  display: block;
}

.adminPriorityItem strong {
  color: var(--ink);
  font-size: .96rem;
}

.adminPriorityItem small {
  margin-top: 3px;
  color: var(--muted);
  line-height: 1.42;
}

.adminPriorityItem em {
  color: var(--teal);
  font-style: normal;
  font-size: .78rem;
  font-weight: 950;
  white-space: nowrap;
}

.adminPriorityItem.warning b {
  color: #92400e;
  background: #fff7ed;
}

.adminPriorityItem.danger b {
  color: var(--rose);
  background: #fff1f2;
}

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

.adminWorkstreamCard {
  display: grid;
  gap: 12px;
  padding: 14px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow-soft);
}

.adminWorkstreamHead {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
}

.adminWorkstreamHead b {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  color: var(--teal);
  background: #e6fffb;
  border-radius: 10px;
  font-size: 12px;
}

.adminWorkstreamHead strong,
.adminWorkstreamHead small {
  display: block;
}

.adminWorkstreamHead strong {
  color: var(--ink);
  font-size: 1rem;
}

.adminWorkstreamHead small {
  margin-top: 4px;
  color: var(--muted);
  line-height: 1.48;
}

.adminWorkstreamActions {
  display: grid;
  gap: 8px;
}

.adminWorkstreamActions button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 42px;
  padding: 9px 10px;
  color: var(--ink);
  background: var(--soft);
  border: 1px solid var(--line);
  border-radius: 10px;
  text-align: left;
}

.adminWorkstreamActions button span {
  color: var(--muted);
  font-weight: 850;
}

.adminWorkstreamActions button strong {
  color: var(--ink);
  font-size: 1rem;
}

.adminSectionTabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px;
  background: #edf5f4;
  border: 1px solid var(--line);
  border-radius: 12px;
}

.adminSectionTabs button {
  min-height: 36px;
  padding: 0 13px;
  color: var(--muted);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 9px;
  font-weight: 850;
}

.adminSectionTabs button.active {
  color: var(--teal);
  background: #fff;
  border-color: rgba(20, 184, 166, .26);
  box-shadow: 0 8px 20px rgba(15, 23, 42, .07);
}

.adminFocusPanel {
  display: grid;
  gap: 12px;
  padding: 16px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow-soft);
}

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

.adminFocusList article {
  display: grid;
  gap: 6px;
  min-height: 102px;
  padding: 13px;
  background: #f8fafc;
  border: 1px solid var(--line);
  border-radius: 10px;
}

.adminFocusList span {
  color: var(--muted);
  font-size: .82rem;
  font-weight: 900;
}

.adminFocusList strong {
  color: var(--ink);
  font-size: 1.05rem;
  overflow-wrap: anywhere;
}

.adminFocusList small {
  color: var(--muted);
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.guestAccountEntry {
  display: grid;
  gap: 12px;
  max-width: 760px;
  margin-bottom: 18px;
  padding: 18px;
  background: linear-gradient(135deg, rgba(20, 184, 166, .12), rgba(245, 158, 11, .10));
  border: 1px solid rgba(20, 184, 166, .24);
  border-left: 4px solid var(--teal);
  border-radius: 12px;
  box-shadow: var(--shadow-soft);
}

.guestAccountEntry > span {
  color: var(--teal);
  font-size: .8rem;
  font-weight: 950;
}

.guestAccountEntry h3,
.guestAccountEntry p {
  margin: 0;
}

.guestAccountEntry h3 {
  color: var(--ink);
  font-size: 1.35rem;
}

.guestAccountEntry p {
  color: var(--muted);
  line-height: 1.65;
}

.guestAccountOauth,
.guestAccountEntryActions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.guestAccountOauth .oauthButton {
  min-width: min(100%, 260px);
}

.standaloneGuestAccount {
  max-width: 820px;
}

.standaloneLoginForm {
  max-width: 520px;
  padding: 16px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow-soft);
}

.readinessPanel {
  margin-bottom: 18px;
  padding: 16px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.securityUpgradeMount {
  margin-bottom: 18px;
}

.selfPublicProfileCard {
  display: grid;
  grid-template-columns: 72px minmax(0, 1.4fr) minmax(220px, .9fr) auto;
  gap: 14px;
  align-items: center;
  margin-bottom: 18px;
  padding: 16px;
  border: 1px solid #b7ded8;
  border-radius: 12px;
  background: linear-gradient(135deg, #f2fbf9, #f8fafc);
}

.avatarPicker {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fafc;
}

.avatarPicker span {
  display: block;
  margin-bottom: 8px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.avatarSwatches {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.avatarSwatches button {
  width: 26px;
  height: 26px;
  padding: 0;
  border: 2px solid rgba(255, 255, 255, 0.85);
  border-radius: 50%;
  box-shadow: 0 0 0 1px var(--line);
}

.avatarSwatches button.selected {
  box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.22), 0 0 0 1px var(--teal);
}

.selfPublicProfileCard h3,
.selfPublicProfileCard p {
  margin: 0;
}

.selfPublicProfileCard p {
  color: var(--muted);
  line-height: 1.55;
}

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

.selfPublicProfileStats span {
  display: grid;
  gap: 4px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.selfPublicProfileStats b {
  color: var(--ink);
  font-size: 18px;
}

[data-theme="dark"] .selfPublicProfileCard {
  background: #0f1821;
}

[data-theme="dark"] .avatarPicker {
  background: rgba(15, 23, 42, 0.78);
  border-color: rgba(148, 163, 184, 0.24);
}

[data-theme="dark"] .selfPublicProfileStats span {
  background: #121f2b;
}

.securityUpgradePanel {
  padding: 16px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 8px;
}

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

.securityMiniCard {
  display: grid;
  align-content: start;
  gap: 9px;
  min-height: 180px;
  padding: 12px;
  background: #f8fafc;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.securityMiniCard strong {
  color: var(--ink);
  font-size: .95rem;
}

.securityMiniCard small {
  color: var(--muted);
  line-height: 1.45;
}

.securityMiniCard input,
.securityMiniCard select {
  min-height: 40px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.searchResults {
  display: grid;
  gap: 7px;
  max-height: 170px;
  overflow: auto;
}

.searchResults span {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 3px 8px;
  align-items: center;
  padding: 8px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.searchResults strong,
.searchResults small {
  min-width: 0;
  overflow-wrap: anywhere;
}

.searchResults small {
  grid-column: 1 / 2;
}

.searchResults button {
  grid-row: 1 / span 2;
  grid-column: 2;
}

.searchResults .searchResultMeta {
  background: #f8fafc;
  border-style: dashed;
}

.productPreviewCard {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 12px;
  background: #f8fafc;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.productPreviewCard img {
  width: 88px;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 8px;
  background: #fff;
}

.productPreviewCard strong,
.productPreviewCard small,
.productPreviewCard p {
  display: block;
  margin: 0;
}

.productPreviewCard small,
.productPreviewCard p {
  color: var(--muted);
  line-height: 1.45;
}

.warningText {
  color: var(--amber) !important;
  font-weight: 800;
}

.unreadNotice {
  padding: 9px 11px;
  color: #075985;
  background: #e0f2fe;
  border: 1px solid #bae6fd;
  border-radius: 8px;
  font-weight: 850;
}

.messages p.unreadMessage {
  border-left: 4px solid var(--blue);
  background: #eff6ff;
}

[data-theme="dark"] .messages p.unreadMessage {
  background: #12243a;
}

.orderTimelineWrap {
  display: grid;
  gap: 8px;
  margin: 12px 0;
}

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

.orderTimelineSummary span {
  display: grid;
  gap: 3px;
  padding: 10px;
  color: var(--muted);
  background: #f8fafc;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: .78rem;
  font-weight: 800;
}

.orderTimelineSummary strong {
  color: var(--ink);
  font-size: .95rem;
  overflow-wrap: anywhere;
}

.orderTimelineRail {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
  padding: 12px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.orderTimelineNode {
  position: relative;
  display: grid;
  gap: 5px;
  min-height: 78px;
  padding: 6px 4px 6px 20px;
  color: var(--muted);
}

.orderTimelineNode i {
  position: absolute;
  left: 3px;
  top: 10px;
  width: 11px;
  height: 11px;
  background: #cbd5e1;
  border-radius: 999px;
}

.orderTimelineNode::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 24px;
  bottom: -8px;
  width: 1px;
  background: var(--line);
}

.orderTimelineNode.done,
.orderTimelineNode.active {
  color: var(--ink);
}

.orderTimelineNode.done i {
  background: var(--green);
}

.orderTimelineNode.active i {
  background: var(--blue);
  box-shadow: 0 0 0 4px rgba(37, 99, 235, .16);
}

.orderTimelineNode strong,
.orderTimelineNode small {
  display: block;
  line-height: 1.35;
}

.orderTimelineNode strong {
  font-size: .82rem;
}

.orderTimelineNode small {
  font-size: .75rem;
  color: var(--muted);
}

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

.readinessHead h3 {
  margin-bottom: 4px;
}

.readinessHead p {
  margin-bottom: 0;
  color: var(--muted);
  line-height: 1.5;
}

.readinessHead strong {
  display: grid;
  place-items: center;
  min-width: 62px;
  min-height: 62px;
  color: var(--teal);
  font-size: 20px;
  border: 8px solid #d9f1ed;
  border-radius: 999px;
}

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

.readinessGrid span {
  display: grid;
  gap: 4px;
  min-height: 82px;
  padding: 10px 12px;
  background: #f8fbfd;
  border: 1px solid var(--line);
  border-left: 4px solid var(--blue);
  border-radius: 8px;
}

.readinessGrid .ready-done { border-left-color: var(--green); }
.readinessGrid .ready-warn { border-left-color: var(--amber); }
.readinessGrid .ready-todo { border-left-color: var(--blue); }

.readinessGrid small {
  color: var(--muted);
  line-height: 1.45;
}

.founderOsPanel {
  margin-bottom: 18px;
  padding: 16px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.launchReadinessPanel {
  margin-bottom: 18px;
  padding: 16px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.launchReadinessGrid {
  margin-top: 12px;
}

.adminOpsPanel {
  margin-bottom: 18px;
  padding: 16px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.maintenanceDecisionPanel {
  display: grid;
  gap: 14px;
  margin-bottom: 18px;
  padding: 16px;
  background: var(--white);
  border: 1px solid var(--line);
  border-left: 4px solid var(--teal);
  border-radius: 8px;
}

.maintenanceDecisionPanel.needsAction {
  border-left-color: var(--amber);
}

.maintenanceDecisionHero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.maintenanceDecisionHero span {
  color: var(--teal);
  font-size: 12px;
  font-weight: 900;
}

.maintenanceDecisionHero h3 {
  margin: 3px 0;
  font-size: 22px;
}

.maintenanceDecisionHero p {
  max-width: 820px;
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}

.maintenanceDecisionHero strong {
  display: grid;
  place-items: center;
  min-width: 72px;
  min-height: 72px;
  color: var(--teal);
  background: #eefaf7;
  border: 1px solid #cfe7e3;
  border-radius: 999px;
  font-size: 20px;
}

.maintenanceDecisionPanel.needsAction .maintenanceDecisionHero strong {
  color: #92400e;
  background: #fff7ed;
  border-color: #fed7aa;
}

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

.maintenanceDecisionGrid article {
  display: grid;
  align-content: start;
  gap: 6px;
  min-height: 128px;
  padding: 12px;
  background: #f8fbfd;
  border: 1px solid var(--line);
  border-left: 4px solid var(--teal);
  border-radius: 8px;
}

.maintenanceDecisionGrid article.needsAction {
  border-left-color: var(--amber);
  background: #fffaf4;
}

.maintenanceDecisionGrid span {
  width: max-content;
  padding: 3px 7px;
  color: var(--teal);
  background: #e7f5f3;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
}

.maintenanceDecisionGrid .needsAction span {
  color: #92400e;
  background: #ffedd5;
}

.maintenanceDecisionGrid h4 {
  margin: 0;
  font-size: 14px;
}

.maintenanceDecisionGrid p,
.maintenanceDecisionGrid small {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.founderMetricGrid,
.founderColumns {
  display: grid;
  gap: 10px;
}

.founderMetricGrid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: 14px;
}

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

.founderMetricGrid span,
.founderColumns > div {
  padding: 12px;
  background: #f8fbfd;
  border: 1px solid var(--line);
  border-left: 4px solid var(--blue);
  border-radius: 8px;
}

.founderMetricGrid span {
  display: grid;
  gap: 5px;
  min-height: 88px;
  font-weight: 850;
}

.founderMetricGrid small {
  color: var(--muted);
  font-weight: 650;
  line-height: 1.45;
}

.founderMetric.healthy { border-left-color: var(--green); }
.founderMetric.watch { border-left-color: var(--amber); }
.founderMetric.risk { border-left-color: #b42318; }

.founderColumns h3 {
  margin-bottom: 8px;
  font-size: 17px;
}

.accountCard {
  padding: 18px;
  background: white;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.mobileAccountHome {
  display: none;
}

.mobileDetailPanel {
  display: none;
}

.sessionPanel {
  margin-bottom: 14px;
}

.sessionPanel .compactList span {
  align-items: start;
}

.securityPanel {
  padding: 16px;
  margin-bottom: 18px;
  background: white;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.sectionHead.tight {
  margin-bottom: 12px;
}

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

.securityItem {
  display: grid;
  gap: 5px;
  min-height: 116px;
  padding: 12px;
  background: #f8fafc;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.securityItem span {
  color: var(--muted);
  font-size: .82rem;
  font-weight: 850;
}

.securityItem strong {
  color: var(--ink);
  font-size: 1.05rem;
}

.securityItem small {
  color: var(--muted);
  line-height: 1.45;
}

.mobilePushCard {
  display: grid;
  gap: 8px;
  padding: 12px;
  background: linear-gradient(135deg, #ecfeff, #f8fafc);
  border: 1px solid #bae6fd;
  border-radius: 8px;
}

.mobilePushCard span {
  color: var(--teal);
  font-size: .8rem;
  font-weight: 900;
  text-transform: uppercase;
}

.mobilePushCard strong {
  color: var(--ink);
  font-size: 1.05rem;
}

.mobilePushCard small {
  color: var(--muted);
  line-height: 1.45;
}

.loginForm {
  display: grid;
  gap: 12px;
}

.mobileGuestLoginCard {
  display: none;
}

.oauthGrid {
  display: grid;
  gap: 9px;
}

.oauthButton {
  display: grid;
  grid-template-columns: 34px 1fr;
  align-items: center;
  min-height: 46px;
  padding: 7px 12px 7px 7px;
  color: var(--ink);
  text-decoration: none;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 10px 22px rgba(15, 23, 42, .06);
  transition: transform var(--motion-fast), border-color var(--motion-fast), box-shadow var(--motion-fast), background var(--motion-fast);
}

.oauthButton span {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  color: #fff;
  font-weight: 950;
  border-radius: 8px;
}

.oauthButton strong {
  font-size: .92rem;
  text-align: center;
}

.oauthButton:hover {
  border-color: rgba(15, 118, 110, .28);
  box-shadow: 0 14px 30px rgba(15, 23, 42, .1);
  transform: translateY(-1px);
}

.oauth-google {
  color: #1f2937;
  background: #fff;
  border-color: #d7dde5;
  box-shadow: 0 1px 2px rgba(60, 64, 67, .12);
}

.oauth-google:hover {
  background: #f8fbff;
  border-color: #c6d4e6;
  box-shadow: 0 3px 10px rgba(60, 64, 67, .16);
}

.oauth-google span {
  color: transparent;
  font-size: 0;
  background: #fff;
  border: 1px solid #dadce0;
  box-shadow: 0 1px 2px rgba(60, 64, 67, .08);
}

.oauth-google span::before {
  width: 20px;
  height: 20px;
  content: "";
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath fill='%23FFC107' d='M43.6 20.5H42V20H24v8h11.3C33.7 32.7 29.3 36 24 36c-6.6 0-12-5.4-12-12s5.4-12 12-12c3.1 0 5.9 1.2 8 3.1l5.7-5.7C34.1 6.1 29.3 4 24 4 12.9 4 4 12.9 4 24s8.9 20 20 20c10 0 19-7.3 19-20 0-1.3-.1-2.4-.4-3.5z'/%3E%3Cpath fill='%23FF3D00' d='M6.3 14.7l6.6 4.8C14.7 15.1 19 12 24 12c3.1 0 5.9 1.2 8 3.1l5.7-5.7C34.1 6.1 29.3 4 24 4 16.2 4 9.5 8.5 6.3 14.7z'/%3E%3Cpath fill='%234CAF50' d='M24 44c5.2 0 9.9-2 13.4-5.2l-6.2-5.2C29.2 35.1 26.7 36 24 36c-5.2 0-9.6-3.3-11.3-7.8l-6.5 5C9.4 39.5 16.1 44 24 44z'/%3E%3Cpath fill='%231976D2' d='M43.6 20.5H42V20H24v8h11.3c-.8 2.3-2.3 4.2-4.1 5.6l6.2 5.2C36.9 39.3 44 34 44 24c0-1.3-.1-2.4-.4-3.5z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.oauth-google strong {
  color: #1f2937;
  font-weight: 800;
}

.oauth-line span { background: #06c755; }
.oauth-facebook span { background: #1877f2; }
.oauth-apple span { background: #111827; }

.loginForm label {
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-weight: 800;
}

.loginForm input,
.loginForm select {
  min-height: 42px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.passwordMeter {
  display: grid;
  gap: 6px;
  padding: 10px 12px;
  background: #f8fafc;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.passwordMeterBar {
  height: 7px;
  overflow: hidden;
  background: #e7edf2;
  border-radius: 999px;
}

.passwordMeterBar span {
  display: block;
  height: 100%;
  background: var(--red);
  border-radius: inherit;
}

.passwordMeter.strength-medium .passwordMeterBar span { background: var(--amber); }
.passwordMeter.strength-strong .passwordMeterBar span { background: var(--green); }

.passwordMeter strong {
  color: var(--ink);
  font-size: .9rem;
}

.passwordMeter small {
  color: var(--muted);
  line-height: 1.45;
}

.scoreRing {
  display: grid;
  place-items: center;
  width: 96px;
  height: 96px;
  margin: 16px 0;
  color: var(--teal);
  font-size: 34px;
  font-weight: 900;
  border: 10px solid #d9f1ed;
  border-radius: 999px;
}

@media (max-width: 1060px) {
  .hero, .workspace, .viewGrid { grid-template-columns: 1fr; }
  .rail {
    position: static;
    display: flex;
    overflow-x: auto;
  }
  .rail button { min-width: 128px; justify-content: center; }
  .adminGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .policyGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .countryGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .areaInsightGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .departureGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .heroStats.compact { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .trustedMemberGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stepGrid { grid-template-columns: 1fr; }
  .mapBoard { grid-template-columns: 1fr; }
  .accountGrid { grid-template-columns: 1fr; }
  .readinessGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .maintenanceDecisionGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .securityUpgradeGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .securityGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .orderTimelineSummary { grid-template-columns: 1fr; }
  .orderTimelineRail { grid-template-columns: 1fr; }
  .orderTimelineNode { min-height: 54px; }
  .supportDesk .miniLedger { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .riskCommandGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
  .launchHowTo {
    grid-template-columns: 1fr;
  }

  .launchHowTo article {
    grid-template-columns: 30px minmax(0, 1fr);
  }

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

  .languageToggle {
    top: 18px;
    right: 12px;
    bottom: auto;
    z-index: 31;
    box-shadow: 0 12px 28px rgba(23, 33, 43, 0.18);
  }

  .themeToggle {
    top: 19px;
    right: 142px;
    bottom: auto;
    z-index: 31;
    min-height: 38px;
    box-shadow: 0 12px 28px rgba(23, 33, 43, 0.18);
  }

  [data-theme="dark"] .languageToggle {
    background: rgba(15, 23, 42, 0.94);
    border-color: #334155;
  }

  [data-theme="dark"] .languageToggle button {
    color: #cbd5e1;
  }

  [data-theme="dark"] .languageToggle button.active {
    color: #0f172a;
    background: #f8fafc;
  }

  [data-theme="dark"] .themeToggle {
    color: #0f172a;
    background: #f8fafc;
    border-color: #334155;
  }

  .onboardingPanel {
    width: calc(100% - 20px);
    margin-top: 12px;
    padding: 12px;
  }

  .mobileQuickTasks {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(132px, 42vw);
    gap: 10px;
    overflow-x: auto;
    padding: 2px 2px 10px;
    scroll-snap-type: x proximity;
  }

  .mobileQuickTasks button {
    display: grid;
    gap: 5px;
    min-height: 104px;
    padding: 12px;
    text-align: left;
    background: #f8fbfd;
    border: 1px solid var(--line);
    border-left: 4px solid var(--teal);
    border-radius: 8px;
    scroll-snap-align: start;
  }

  .mobileQuickTasks .glyph {
    color: var(--teal);
  }

  .mobileQuickTasks span {
    color: var(--ink);
    font-weight: 900;
  }

  .mobileQuickTasks small {
    color: var(--muted);
    line-height: 1.35;
  }

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

  .onboardingCard {
    min-height: 0;
  }

  .onboardingCard p {
    min-height: 0;
  }

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

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

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

  body {
    background:
      linear-gradient(180deg, #eef7f4 0, #f6f8fb 180px),
      var(--paper);
    padding-bottom: calc(118px + env(safe-area-inset-bottom, 0px));
  }
  .topbar {
    gap: 10px;
    min-height: auto;
    padding: 10px 14px 9px;
    background: rgba(255, 255, 255, 0.88);
    box-shadow: 0 8px 28px rgba(23, 33, 43, 0.08);
  }
  .brand {
    min-width: 0;
  }
  .brand strong {
    font-size: 15px;
    letter-spacing: .2px;
  }
  .brand small { display: none; }
  .brand .logoMark {
    width: 36px;
    height: 36px;
    box-shadow: 0 8px 20px rgba(15, 118, 110, 0.24);
  }
  .loginStatusChip {
    flex: 1 1 auto;
    max-width: none;
    margin-left: auto;
    padding: 5px 6px;
  }
  .loginStatusChip span {
    min-width: 0;
  }
  .loginStatusChip small {
    max-width: 130px;
  }
  .loginStatusChip .tinyButton {
    min-width: 52px;
  }
  .tabs {
    display: none;
  }
  .tabs::-webkit-scrollbar { display: none; }
  .tabs button {
    flex: 0 0 auto;
    min-width: 82px;
    padding: 0 12px;
  }
  .hero {
    gap: 14px;
    padding: 20px 14px 16px;
    min-height: auto;
  }
  .heroProduct {
    overflow: hidden;
    border-bottom: 0;
    border-radius: 0 0 18px 18px;
    box-shadow: 0 18px 48px rgba(23, 33, 43, 0.08);
    background:
      linear-gradient(180deg, rgba(255, 253, 249, 0.98) 0%, rgba(255, 253, 249, 0.90) 42%, rgba(255, 253, 249, 0.34) 100%),
      url('./images/bondmai-hero-handoff.webp') 58% 78% / cover no-repeat;
  }
  .heroProduct h1 {
    max-width: 11.5em;
    font-size: 28px;
    line-height: 1.18;
  }
  .heroProduct p {
    font-size: 14px;
    line-height: 1.58;
  }

  [data-theme="dark"] .heroProduct {
    background:
      radial-gradient(circle at 20% 12%, rgba(247, 200, 115, 0.20), transparent 30%),
      radial-gradient(circle at 82% 24%, rgba(94, 234, 212, 0.14), transparent 32%),
      linear-gradient(180deg, rgba(13, 17, 24, 0.96) 0%, rgba(16, 24, 34, 0.92) 48%, rgba(13, 17, 24, 0.82) 100%),
      url('./images/bondmai-hero-handoff.webp') 58% 78% / cover no-repeat;
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.34);
  }

  [data-theme="dark"] .heroProduct h1 {
    color: #f8fafc;
    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.42);
  }

  [data-theme="dark"] .heroProduct p {
    color: #cbd5e1;
  }

  [data-theme="dark"] .heroProduct .eyebrow {
    color: var(--amber);
  }

  [data-theme="dark"] .heroProduct .secondaryAction {
    color: #f8fafc;
    background: rgba(15, 23, 42, 0.84);
    border-color: rgba(148, 163, 184, 0.28);
  }

  [data-theme="dark"] .heroProduct .trustRow span {
    color: #f8e0a1;
    background: rgba(247, 200, 115, 0.10);
    border-color: rgba(247, 200, 115, 0.28);
  }

  [data-theme="dark"] .quickStartPanel,
  [data-theme="dark"] .onboardingPanel,
  [data-theme="dark"] .howItWorks,
  [data-theme="dark"] .earlyMarketNudge,
  [data-theme="dark"] .globalLaunchRadar,
  [data-theme="dark"] .featuredWishCard,
  [data-theme="dark"] .trustedMemberGrid article,
  [data-theme="dark"] .tripCard,
  [data-theme="dark"] .matchCard,
  [data-theme="dark"] .orderCard,
  [data-theme="dark"] .empty {
    background:
      linear-gradient(145deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.018)),
      rgba(19, 27, 38, 0.88);
    border-color: rgba(148, 163, 184, 0.18);
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.24);
  }

  [data-theme="dark"] .quickStartCard,
  [data-theme="dark"] .stepGrid button,
  [data-theme="dark"] .earlyMarketSteps article,
  [data-theme="dark"] .departureCard,
  [data-theme="dark"] .launchHowTo article,
  [data-theme="dark"] .decisionStrip article,
  [data-theme="dark"] .compactList span,
  [data-theme="dark"] .recentReviewsCard,
  [data-theme="dark"] .reviewListV2 article {
    background: rgba(15, 23, 42, 0.72);
    border-color: rgba(148, 163, 184, 0.17);
  }

  [data-theme="dark"] .quickStartCard span,
  [data-theme="dark"] .earlyMarketNudge span,
  [data-theme="dark"] .featuredWishCard span,
  [data-theme="dark"] .globalLaunchRadar .departBadge,
  [data-theme="dark"] .mobileQuickTasks .glyph {
    color: var(--amber);
  }

  [data-theme="dark"] .quickStartCard .quickIcon,
  [data-theme="dark"] .stepGrid span,
  [data-theme="dark"] .earlyMarketSteps b {
    color: #101820;
    background: linear-gradient(135deg, #f7c873, #5eead4);
    border-color: rgba(255, 255, 255, 0.18);
  }

  [data-theme="dark"] .primaryAction,
  [data-theme="dark"] .primaryButton {
    color: #08111a;
    background: linear-gradient(135deg, #5eead4, #f7c873);
    border-color: rgba(255, 255, 255, 0.22);
    box-shadow: 0 14px 34px rgba(94, 234, 212, 0.18);
  }

  [data-theme="dark"] .softButton,
  [data-theme="dark"] .secondaryAction {
    color: #f6f1e8;
    background: rgba(15, 23, 42, 0.76);
    border-color: rgba(148, 163, 184, 0.24);
  }

  [data-theme="dark"] .mobileActionBar {
    background: rgba(13, 17, 24, 0.90);
    border-color: rgba(247, 200, 115, 0.20);
    box-shadow: 0 18px 58px rgba(0, 0, 0, 0.46);
  }

  [data-theme="dark"] .mobileActionBar button {
    color: #aeb8c4;
  }

  [data-theme="dark"] .mobileActionBar span {
    color: var(--amber);
    background: rgba(247, 200, 115, 0.12);
  }

  [data-theme="dark"] .mobileActionBar button.active {
    color: #f6f1e8;
    background: rgba(247, 200, 115, 0.12);
    box-shadow: inset 0 0 0 1px rgba(247, 200, 115, 0.24), 0 10px 24px rgba(0, 0, 0, 0.24);
  }

  [data-theme="dark"] .mobileActionBar button.active span {
    color: #111827;
    background: linear-gradient(135deg, #f7c873, #5eead4);
  }
  .heroActions {
    display: grid;
    grid-template-columns: 1fr;
    margin-top: 14px;
  }
  .primaryAction,
  .secondaryAction {
    width: 100%;
    min-height: 50px;
    box-shadow: 0 10px 24px rgba(23, 33, 43, 0.08);
  }
  .primaryAction {
    background: color-mix(in srgb, var(--teal) 92%, var(--ink));
    border-color: color-mix(in srgb, var(--teal) 78%, var(--ink));
  }
  .quickStartPanel {
    padding: 12px;
  }
  .heroVisual {
    order: 3;
    height: 220px;
    min-height: 230px;
  }
  .heroVisual img {
    object-position: 55% 58%;
  }
  .quickStartHead { order: 1; }
  .quickStartGrid { order: 2; }
  .heroStats.compact { order: 4; }
  .matchPreview {
    right: 10px;
    bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    width: min(250px, calc(100% - 20px));
    padding: 10px;
  }
  .quickStartCard {
    grid-template-columns: 36px minmax(0, 1fr);
    min-height: 96px;
  }
  .quickIcon {
    width: 36px;
    height: 36px;
  }
  .quickStartCard b {
    grid-column: 2;
    grid-row: auto;
    margin-top: 4px;
  }
  .trustRow span {
    flex: 1 1 120px;
    text-align: center;
  }
  .workspace {
    padding: 14px 14px 112px;
  }
  .rail {
    display: none;
  }
  .howItWorks {
    padding: 12px;
  }
  .earlyMarketNudge,
  .wishPatienceNudge {
    grid-template-columns: 1fr;
    padding: 14px;
    border-radius: 12px;
  }
  .earlyMarketNudge::after {
    inset: auto 0 0 auto;
    width: 100%;
    height: 42%;
    opacity: .10;
  }
  .earlyMarketNudge h2,
  .wishPatienceNudge strong {
    font-size: 18px;
  }
  .earlyMarketSteps {
    grid-template-columns: 1fr;
  }
  .earlyMarketSteps article {
    min-height: auto;
  }
  .earlyMarketNudge .buttonRow,
  .wishPatienceNudge .buttonRow {
    justify-content: stretch;
  }
  .earlyMarketNudge .buttonRow button,
  .wishPatienceNudge > button {
    width: 100%;
  }
  h1 { font-size: 34px; }
  .heroStats, .heroStats.compact, .wishForm, .wishCostGrid, .adminGrid, .policyGrid, .policyFaqGrid, .policyQaColumns, .countryGrid, .areaInsightGrid, .departureGrid, .trendGrid, .adminColumns, .founderMetricGrid, .founderColumns, .tableHead, .tableRow, .splitAction, .inlineForm, .internalNoteForm, .twoTools, .securityGrid, .readinessGrid, .nextActions, .orderFilters, .orderSummary, .tripFilters, .tripSummary, .slaStrip, .settingsGrid, .tripEditForm {
    grid-template-columns: 1fr;
  }
  .wishLivePreview {
    grid-template-columns: 1fr;
    padding: 10px;
    border-radius: 14px;
  }
  .wishLivePreview .wishVisual {
    min-height: 240px;
    border-radius: 12px;
  }
  .wishInspirationStrip {
    grid-template-columns: 1fr;
  }
  .wishInspirationPhoto {
    min-height: 170px;
  }
  .wishInspirationCards {
    grid-template-columns: 1fr;
  }
  .wishClueCoach {
    padding: 12px;
  }
  .wishReadiness {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 12px;
    border-radius: 12px;
  }
  .wishReadiness.state-start,
  .wishReadiness.state-progress,
  .wishReadiness.state-ready,
  .wishReadiness.progress,
  .wishReadiness.ready {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    border-radius: 12px;
  }
  .wishReadinessPills,
  .quickHintRow {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
    gap: 8px;
  }
  .wishReadinessPills span,
  .quickHintRow button {
    justify-content: center;
    width: 100%;
    max-width: 100%;
    min-height: 36px;
    padding-inline: 10px;
    text-align: center;
    overflow-wrap: normal;
    word-break: keep-all;
    writing-mode: horizontal-tb;
    text-orientation: mixed;
  }
  .quickHintRow button {
    -webkit-tap-highlight-color: transparent;
  }
  .wishClueGrid {
    grid-template-columns: 1fr;
  }
  .wishClueGrid article {
    min-height: 92px;
  }
  .globalSearchBar {
    top: 6px;
    margin: 0 0 12px;
    border-radius: 14px;
  }
  .globalSearchResults {
    max-height: 220px;
  }
  .featuredWishStrip {
    margin-right: -14px;
  }
  .featuredWishScroller {
    grid-auto-columns: minmax(210px, 76vw);
    padding-right: 14px;
  }
  .featuredWishCard {
    grid-template-rows: 150px minmax(0, 1fr);
  }
  .featuredWishCard .wishVisual {
    min-height: 150px;
  }
  .trustedMemberGrid { grid-template-columns: 1fr; }
  .profileSheetOverlay {
    align-items: end;
    padding: 0;
  }
  .profileSheet {
    width: 100%;
    max-height: 88vh;
    border-radius: 18px 18px 0 0;
    padding: 16px;
  }
  .profileSheetHead {
    grid-template-columns: 52px minmax(0, 1fr) auto;
    gap: 10px;
  }
  .memberAvatar.large {
    width: 52px;
    height: 52px;
    font-size: 20px;
  }
  .profileTrustGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .profileReviewList article div {
    display: grid;
  }
  .cardActions {
    justify-content: flex-start;
  }
  .policyFinanceNote {
    display: grid;
  }
  .ordersView .orderSummary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .ordersView .orderSummary button {
    min-height: 54px;
    padding: 8px 10px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 8px 22px rgba(23, 33, 43, 0.06);
  }
  .ordersView .orderSummary small {
    font-size: 18px;
  }
  .ordersView .orderFocusRail {
    grid-template-columns: 1fr;
  }
  .ordersView .orderFocusItem {
    grid-template-columns: 34px minmax(0, 1fr);
    min-height: 78px;
    padding: 10px;
  }
  .ordersView .orderFocusItem b {
    width: 34px;
    height: 34px;
  }
  .ordersView .orderFocusItem em {
    grid-column: 2;
    white-space: normal;
  }
  .ordersView.isEmpty .orderSummary button:nth-child(n+5),
  .ordersView.isEmpty .orderFilters,
  .ordersView.isEmpty .resultSummary {
    display: none;
  }
  .ordersView.isEmpty .emptyActionState {
    margin-top: 8px;
    margin-bottom: 96px;
  }
  .loadingStatePanel {
    grid-template-columns: 1fr;
    padding: 18px;
  }
  .loadingStepGrid {
    grid-template-columns: 1fr;
  }
  .decisionStrip {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .decisionStrip.tripDecision {
    gap: 12px;
    margin: 18px 0;
  }

  .decisionStrip article {
    grid-template-columns: 36px minmax(0, 1fr);
    min-height: auto;
    padding: 12px;
    border-radius: 12px;
  }

  .decisionStrip.tripDecision article {
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 6px 14px;
    align-items: center;
    min-height: 108px;
    padding: 16px;
    border-radius: 18px;
    background:
      linear-gradient(135deg, rgba(255, 255, 255, .92), rgba(240, 253, 250, .78)),
      var(--card);
    border: 1px solid color-mix(in srgb, var(--teal) 18%, var(--line));
    box-shadow: 0 14px 30px rgba(15, 23, 42, .08);
  }

  .decisionStrip.tripDecision .decisionPrimary {
    background:
      linear-gradient(135deg, rgba(204, 251, 241, .9), rgba(255, 248, 220, .88)),
      var(--card);
    border-color: color-mix(in srgb, var(--teal) 42%, var(--line));
  }

  .decisionStrip svg,
  .decisionStrip .glyph {
    grid-row: 1 / span 3;
    align-self: start;
    justify-self: center;
    width: 32px;
    min-width: 32px;
  }

  .decisionStrip.tripDecision svg,
  .decisionStrip.tripDecision .glyph {
    align-self: center;
    justify-self: center;
    width: 58px;
    min-width: 58px;
    height: 58px;
    color: #063b32;
    background: linear-gradient(135deg, #5eead4, #f7c873);
    border: 1px solid rgba(255, 255, 255, .72);
    border-radius: 18px;
    box-shadow: 0 12px 22px rgba(13, 128, 116, .22);
  }

  .decisionStrip.tripDecision .glyph svg {
    width: 28px;
    height: 28px;
    background: transparent;
    border: 0;
    box-shadow: none;
  }

  .decisionStrip span,
  .decisionStrip strong,
  .decisionStrip small {
    grid-column: 2;
    writing-mode: horizontal-tb;
    text-orientation: mixed;
    white-space: normal;
    word-break: keep-all;
    overflow-wrap: anywhere;
  }
  .decisionStrip strong {
    font-size: 16px;
    line-height: 1.35;
  }

  .decisionStrip.tripDecision span {
    color: var(--teal);
    font-size: 12px;
    letter-spacing: 0;
  }

  .decisionStrip.tripDecision strong {
    font-size: 18px;
    line-height: 1.25;
  }

  .decisionStrip small {
    font-size: 13px;
  }

  .decisionStrip.tripDecision small {
    color: var(--muted);
    font-size: 13px;
    line-height: 1.45;
  }
  .guestFlowNudge {
    grid-template-columns: 1fr;
    align-items: stretch;
    padding: 14px;
  }
  .guestFlowNudge strong {
    font-size: 18px;
  }
  .guestFlowNudge .buttonRow {
    justify-content: stretch;
  }
  .guestFlowNudge .buttonRow button {
    flex: 1 1 140px;
  }
  .supportDesk .miniLedger { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .riskCommandGrid { grid-template-columns: 1fr; }
  .timelineItem { grid-template-columns: 1fr; }
  .messageDigest { grid-template-columns: 1fr; }
  .messageDigest span,
  .messageDigest small { white-space: normal; }
  .mapCanvas { min-height: 360px; }
  .sectionHead, .matchFooter, .matchInsight, .cardTop { flex-direction: column; }
  .policyBanner { align-items: stretch; }
  .policyBanner button { margin-left: 0; }
  .tripCard { grid-template-columns: 1fr; }
  .routeFollowPanel {
    min-height: auto;
  }
  .routeFollowInline {
    display: grid;
    align-items: stretch;
  }
  .compactList span {
    display: grid;
    grid-template-columns: 1fr;
  }
  .compactForm input,
  .compactForm .buttonRow {
    grid-column: auto;
  }
  .buttonRow {
    width: 100%;
  }
  .buttonRow > * {
    flex: 1 1 120px;
  }
  .mobileActionBar {
    position: fixed;
    left: 10px;
    right: 10px;
    bottom: 10px;
    z-index: 30;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 7px;
    padding: 8px;
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid var(--line);
    border-radius: 18px;
    box-shadow: 0 18px 52px rgba(23, 33, 43, 0.22);
    backdrop-filter: blur(14px);
    animation: bondmai-fade-up var(--motion-slow) var(--ease-out) both;
  }
  .mobileActionBar button {
    display: grid;
    justify-items: center;
    gap: 3px;
    min-height: 52px;
    color: var(--muted);
    background: transparent;
    border: 0;
    border-radius: 14px;
    transition:
      transform var(--motion-fast) var(--ease-out),
      background var(--motion-fast) ease,
      color var(--motion-fast) ease,
      box-shadow var(--motion-mid) ease;
  }
  .mobileActionBar span {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    color: var(--teal);
    background: #e7f5f3;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 900;
  }
  .mobileActionBar strong {
    font-size: 12px;
  }
  .mobileActionBar button.active {
    color: var(--ink);
    background: color-mix(in srgb, var(--card) 88%, var(--sand));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--teal) 28%, var(--line)), 0 8px 18px rgba(15, 118, 110, 0.12);
    transform: translateY(-1px);
  }
  .mobileActionBar button.active span {
    color: white;
    background: color-mix(in srgb, var(--teal) 90%, var(--ink));
  }
  .mobileActionBar button:active {
    transform: translateY(0) scale(.96);
  }
  .mobileAccountHome {
    display: grid;
    gap: 12px;
    margin-bottom: 14px;
  }
  .accountHeroCard {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 72px;
    gap: 12px;
    align-items: center;
    padding: 16px;
    background:
      linear-gradient(135deg, rgba(15, 118, 110, 0.09), rgba(37, 99, 235, 0.05)),
      var(--white);
    border: 1px solid #c8e4df;
    border-radius: 16px;
    box-shadow: var(--shadow-soft);
  }
  .accountHeroCard span {
    color: var(--teal);
    font-size: 12px;
    font-weight: 900;
  }
  .accountHeroCard h3 {
    margin: 4px 0;
    font-size: 24px;
  }
  .accountHeroCard p {
    margin: 0;
    color: var(--muted);
    overflow-wrap: anywhere;
  }
  .accountHeroCard > strong {
    display: grid;
    place-items: center;
    width: 72px;
    height: 72px;
    color: var(--teal);
    font-size: 24px;
    border: 8px solid #d9f1ed;
    border-radius: 999px;
    background: white;
    box-shadow: inset 0 0 0 1px #b7ded8;
  }
  .accountHeroCard > small {
    grid-column: 2;
    margin-top: -18px;
    color: var(--muted);
    text-align: center;
    font-size: 11px;
  }
  .accountStatusStrip,
  .accountShortcutGrid {
    display: grid;
    gap: 8px;
  }
  .accountStatusStrip {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .accountStatusStrip span,
  .accountShortcutGrid button {
    padding: 10px;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: 14px;
    box-shadow: 0 8px 20px rgba(23, 33, 43, 0.05);
  }
  .accountStatusStrip span {
    color: var(--teal);
    text-align: center;
    font-size: 13px;
    font-weight: 850;
  }
  .mobileTrustProfileCard {
    display: grid;
    gap: 6px;
    width: 100%;
    padding: 13px 14px;
    color: inherit;
    text-align: left;
    background:
      linear-gradient(135deg, rgba(250, 204, 21, 0.12), rgba(20, 184, 166, 0.08)),
      var(--white);
    border: 1px solid #d7eadb;
    border-radius: 14px;
    box-shadow: 0 10px 24px rgba(23, 33, 43, 0.07);
  }
  .mobileTrustProfileCard span {
    color: var(--teal);
    font-size: 12px;
    font-weight: 900;
  }
  .mobileTrustProfileCard strong {
    font-size: 17px;
  }
  .mobileTrustProfileCard small {
    color: var(--muted);
    line-height: 1.45;
  }
  .mobileTrustProfileCard:focus-visible {
    outline: 3px solid #d9f1ed;
    outline-offset: 2px;
  }
  .accountShortcutGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .accountShortcutGrid button {
    display: grid;
    gap: 5px;
    min-height: 104px;
    color: inherit;
    text-align: left;
    cursor: pointer;
  }
  .accountShortcutGrid button.active {
    border-color: var(--teal);
    box-shadow: 0 0 0 3px #d9f1ed;
  }
  .accountShortcutGrid span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 850;
  }
  .accountShortcutGrid strong {
    font-size: 22px;
  }
  .accountShortcutGrid small {
    color: var(--muted);
    line-height: 1.45;
  }
  .accountLogout {
    width: 100%;
  }
  .mobileDetailPanel {
    display: grid;
    gap: 10px;
    margin-bottom: 14px;
  }
  .mobileDetailTabs {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .mobileDetailTabs::-webkit-scrollbar {
    display: none;
  }
  .mobileDetailTabs button {
    flex: 0 0 92px;
    min-height: 38px;
    padding: 0 8px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 850;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: 999px;
    box-shadow: 0 6px 14px rgba(23, 33, 43, 0.04);
  }
  .mobileDetailTabs button.active {
    color: white;
    border-color: transparent;
    background: linear-gradient(135deg, var(--teal), var(--blue));
    box-shadow: 0 10px 20px rgba(15, 118, 110, 0.18);
  }
  .mobileDetailCard {
    display: grid;
    gap: 12px;
    padding: 14px;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: 16px;
    box-shadow: var(--shadow-soft);
  }
  .mobileDetailCard .compactList {
    gap: 8px;
  }
  .mobileDetailCard .compactList span {
    min-height: 58px;
  }
  .mobileDetailCard .settingsGrid,
  .mobileDetailCard .compactForm {
    grid-template-columns: 1fr;
  }
  .mobileProgress {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px;
    background: #f3faf8;
    border: 1px solid #d9f1ed;
    border-radius: 14px;
  }
  .mobileProgress strong {
    color: var(--teal);
    font-size: 24px;
  }
  .mobileProgress span {
    color: var(--muted);
    font-weight: 850;
  }
  .orderCard.isClosed .stageAuditSummary,
  .orderCard.isClosed .slaSummary,
  .orderCard.isClosed .internalRiskSummary,
  .orderCard.isClosed .disputeSummary {
    display: none;
  }
  .orderCard.isClosed .nextActions span:nth-child(n+2) {
    display: none;
  }
  .orderCard.isClosed .nextActions {
    margin-bottom: 4px;
  }
  .orderCard.isClosed .nextActions span:first-child {
    min-height: 64px;
    background: #f1fbf8;
    border-left-color: var(--teal);
  }
  .orderCard.isClosed .nextActions strong {
    font-size: 15px;
  }
  .tripCard,
  .matchCard,
  .orderCard,
  .estimate,
  .notice,
  .pwaPrompt,
  .empty,
  .adminTile,
  .accountCard,
  .orderTable {
    border-radius: 16px;
    box-shadow: var(--shadow-soft);
  }
  .pwaPrompt {
    display: grid;
    grid-template-columns: 1fr;
    align-items: stretch;
    margin: 10px 14px 0;
  }
  .pwaPrompt button {
    width: 100%;
  }
  .tripCard,
  .matchCard,
  .orderCard {
    position: relative;
    overflow: hidden;
  }
  .tripCard::before,
  .matchCard::before,
  .orderCard::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 4px;
    background: linear-gradient(90deg, var(--teal), var(--blue));
  }
  .orderCard {
    padding-top: 18px;
  }
  .orderCard.isClosed::before {
    background: linear-gradient(90deg, var(--green), #7cc7a0);
  }
  .orderCard.hasRisk::before,
  .orderCard.hasDispute::before {
    background: linear-gradient(90deg, var(--amber), var(--rose));
  }
  .progress {
    gap: 5px;
    padding: 4px;
    background: #edf3f7;
    border-radius: 999px;
  }
  .progress span {
    height: 7px;
  }
  .nextActions {
    gap: 10px;
  }
  .nextActions span {
    min-height: 82px;
    padding: 12px 13px;
    background: linear-gradient(180deg, #ffffff, #f8fbfd);
    border-left-width: 5px;
    border-radius: 14px;
    box-shadow: 0 8px 20px rgba(23, 33, 43, 0.05);
  }
  .nextActions span:first-child {
    background: linear-gradient(135deg, #edf9f7, #ffffff);
    border-color: #b7ded8;
    border-left-color: var(--teal);
  }
  .nextActions strong {
    font-size: 15px;
  }
  .status {
    border-radius: 999px;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.42);
  }
  input,
  select,
  textarea {
    min-height: 44px;
    border-radius: 12px;
  }
  textarea {
    min-height: 96px;
  }
  .compactList span,
  .evidenceList a,
  .internalNoteList span {
    border-radius: 14px;
  }
  .orderCard .matchFooter .buttonRow {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .orderCard .matchFooter .buttonRow > * {
    min-width: 0;
  }
  .matchCard {
    padding: 12px;
    gap: 12px;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 251, 253, 0.96)),
      var(--white);
  }
  .matchCard .wishVisual {
    min-height: 235px;
    margin: -2px -2px 0;
    border-radius: 14px;
  }
  .wishVisual small {
    max-width: calc(100% - 18px);
    margin: 0 9px 9px;
    font-size: 12px;
  }
  .wishVisualGallery {
    padding-inline: 9px;
  }
  .wishVisualGallery img {
    width: 38px;
    height: 38px;
  }
  .matchMain h3 {
    margin-bottom: 6px;
    font-size: 20px;
    line-height: 1.25;
  }
  .matchMain > p {
    margin-bottom: 8px;
  }
  .matchInsight {
    display: grid;
    padding: 12px;
    background: linear-gradient(180deg, #f5fbfa, #ffffff);
    border-radius: 14px;
  }
  .reasonPills {
    gap: 7px;
  }
  .reasonPills span,
  .tagRow span {
    border-radius: 999px;
  }
  .orderTimelineRail {
    padding: 10px;
    background: linear-gradient(180deg, #ffffff, #f8fbfd);
    border-radius: 14px;
  }
  .orderTimelineNode {
    grid-template-columns: 18px minmax(0, 1fr);
    gap: 2px 8px;
    min-height: 48px;
    padding: 5px 2px;
  }
  .orderTimelineNode i {
    position: static;
    grid-row: 1 / span 2;
    align-self: start;
    width: 12px;
    height: 12px;
    margin-top: 3px;
  }
  .orderTimelineNode::before {
    left: 7px;
    top: 20px;
    bottom: -16px;
  }
  .orderTimelineNode strong,
  .orderTimelineNode small {
    grid-column: 2;
  }
  .messageDigest,
  .stageAuditSummary,
  .slaSummary,
  .internalRiskSummary,
  .disputeSummary {
    border-radius: 14px;
  }
  .accountView.hasUser > .accountGrid,
  .accountView.hasUser > .readinessPanel,
  .accountView.hasUser > .adminColumns {
    display: none;
  }
  .accountNextStepPanel {
    gap: 10px;
    margin-bottom: 14px;
    padding: 14px;
    border-radius: 16px;
  }
  .accountNextStepHead {
    align-items: start;
  }
  .accountNextStepHead b {
    width: 58px;
    height: 58px;
    border-width: 7px;
    font-size: 16px;
  }
  .accountNextStepList {
    grid-template-columns: 1fr;
  }
  .accountNextStepList button {
    min-height: 82px;
  }
  .accountQuickNext {
    padding: 12px;
  }
  .accountQuickNextList {
    grid-template-columns: 1fr;
  }
  .accountQuickNextList button {
    min-height: 76px;
  }
  .adminWorkstreamMap {
    grid-template-columns: 1fr;
  }
  .adminWorkstreamCard {
    padding: 12px;
  }
  .adminWorkstreamActions button {
    min-height: 46px;
  }
  .accountProfileHero {
    margin-bottom: 14px;
    padding: 14px;
    border-radius: 16px;
  }
  .accountProfileIntro {
    align-items: flex-start;
  }
  .accountProfileIntro h3 {
    font-size: 1.18rem;
  }
  .profileIdentityRow {
    display: grid;
    grid-template-columns: 1fr;
  }
  .profileQuickForm {
    grid-template-columns: 1fr;
  }
  .profileQuickForm .primaryButton {
    width: 100%;
    min-height: 44px;
    margin: 0;
  }
  .accountQuickActions {
    grid-template-columns: 1fr 1fr;
  }
  .accountQuickStats {
    grid-template-columns: 1fr 1fr;
  }
  .accountSetupStrip {
    grid-template-columns: 1fr;
  }
  .accountQuickPassword {
    grid-template-columns: 1fr;
  }
  .accountQuickPassword .primaryButton {
    width: 100%;
  }
  .accountQuickActions button {
    min-height: 96px;
    padding: 11px;
  }
  .accountTrustSummary,
  .recentReviewsCard {
    padding: 14px;
    border-radius: 16px;
  }
  .trustSummaryGrid {
    grid-template-columns: 1fr 1fr;
  }
  .trustSummaryCard {
    min-height: 118px;
    padding: 12px;
  }
  .trustSummaryCard strong {
    font-size: 1.35rem;
  }
  .reviewListV2 article {
    grid-template-columns: 56px minmax(0, 1fr);
    padding: 10px;
  }
  .reviewScore {
    min-height: 52px;
  }
  .adminShellHero {
    display: grid;
    padding: 14px;
    border-radius: 16px;
  }
  .adminShellStatus {
    min-width: 0;
    text-align: left;
  }
  .adminShellGrid {
    grid-template-columns: 1fr;
  }
  .maintenanceDecisionHero {
    display: grid;
  }
  .maintenanceDecisionHero strong {
    min-width: 58px;
    min-height: 58px;
    font-size: 17px;
  }
  .maintenanceDecisionGrid {
    grid-template-columns: 1fr;
  }
  .adminSectionTabs {
    overflow-x: auto;
    flex-wrap: nowrap;
    padding: 7px;
  }
  .adminSectionTabs button {
    flex: 0 0 auto;
  }
  .adminFocusPanel {
    padding: 14px;
    border-radius: 16px;
  }
  .adminFocusList {
    grid-template-columns: 1fr;
  }
  .adminMigrationPromote {
    grid-template-columns: 1fr;
  }
  .adminMigrationPromote .primaryButton {
    width: 100%;
  }
  .accountView.guestAccount .accountGrid {
    grid-template-columns: 1fr;
  }
  .guestAccountEntry {
    gap: 10px;
    margin-bottom: 14px;
    padding: 16px 14px;
    border-radius: 16px;
  }
  .guestAccountEntry h3 {
    font-size: 1.18rem;
  }
  .guestAccountOauth,
  .guestAccountEntryActions {
    display: grid;
    grid-template-columns: 1fr;
  }
  .guestAccountEntryActions .primaryButton,
  .guestAccountEntryActions .softButton {
    width: 100%;
    margin: 0;
  }
  .accountView.guestAccount .loginForm .mobileGuestLoginCard {
    display: none;
  }
  .accountView.guestAccount .accountCard {
    padding: 14px;
  }
  .accountView.guestAccount .loginForm {
    gap: 14px;
  }
  .mobileGuestLoginCard {
    display: grid;
    gap: 10px;
    padding: 14px;
    background: linear-gradient(135deg, rgba(20, 184, 166, .12), rgba(245, 158, 11, .12));
    border: 1px solid rgba(20, 184, 166, .22);
    border-radius: 14px;
    box-shadow: 0 16px 34px rgba(15, 23, 42, .08);
  }
  .mobileGuestLoginCard > span {
    color: var(--teal);
    font-size: .78rem;
    font-weight: 950;
  }
  .mobileGuestLoginCard > strong {
    color: var(--ink);
    font-size: 1.2rem;
    line-height: 1.2;
  }
  .mobileGuestLoginCard > small {
    color: var(--muted);
    line-height: 1.45;
  }
  .mobileGuestLoginActions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 9px;
  }
  .mobileGuestLoginActions.buttonRow {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .mobileGuestLoginActions .primaryButton,
  .mobileGuestLoginActions .softButton {
    width: 100%;
    min-height: 42px;
    margin: 0;
  }
  .accountView.guestAccount .accountGrid > .accountCard:nth-child(2) {
    display: none;
  }
  .accountView.guestAccount > .adminColumns,
  .accountView.guestAccount > .securityPanel,
  .accountView.guestAccount > .readinessPanel {
    display: none;
  }
.ordersView .sectionHead,
  .accountView .sectionHead {
    margin-top: 4px;
  }
}

.appCrashShell {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  background: var(--bg);
}

.appCrashCard {
  width: min(520px, 100%);
  display: grid;
  gap: 14px;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--card);
  box-shadow: 0 24px 70px rgba(15, 23, 42, .14);
}

.appCrashCard > span {
  color: var(--teal);
  font-weight: 950;
}

.appCrashCard h1 {
  margin: 0;
  color: var(--ink);
  font-size: 1.5rem;
}

.appCrashCard p,
.appCrashCard small {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}

.directPaymentNotice {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 12px 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--teal);
  border-radius: 8px;
  background: color-mix(in srgb, var(--teal) 8%, var(--card));
  color: var(--ink);
  font-size: .92rem;
  line-height: 1.55;
}

.directPaymentNotice svg {
  flex: 0 0 auto;
  margin-top: 2px;
  color: var(--teal);
}

.paymentAgreementPanel {
  display: grid;
  gap: 10px;
  margin: 12px 0;
  padding: 16px;
  border: 1px solid rgba(20, 184, 166, .20);
  border-radius: 20px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .98), rgba(240, 253, 250, .78));
  box-shadow: 0 16px 34px rgba(15, 23, 42, .06);
}

.paymentAgreementHead {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(132px, 180px);
  gap: 10px;
  align-items: start;
}

.paymentAgreementHead span {
  display: block;
  color: var(--teal);
  font-weight: 900;
  font-size: .82rem;
}

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

.paymentAgreementHead small {
  display: block;
  color: var(--muted);
  line-height: 1.45;
}

.paymentAgreementPanel textarea {
  width: 100%;
  min-height: 104px;
  resize: vertical;
}

.paymentAgreementPanel select {
  justify-self: end;
  max-width: 220px;
}

.accountSectionTabs {
  position: relative;
  z-index: 12;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  margin: 12px 0 16px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: color-mix(in srgb, var(--card) 88%, transparent);
  box-shadow: 0 18px 42px rgba(15, 23, 42, .08);
  backdrop-filter: blur(16px);
}

.accountView.hasUser > .mobileAccountHome,
.accountView.hasUser > .mobileDetailPanel {
  display: none !important;
}

.accountAccountAccessPanel {
  align-items: stretch;
}

.accountAccountAccessPanel > div {
  background: color-mix(in srgb, var(--card) 92%, var(--teal));
}

.accountSectionTabs button {
  display: grid;
  gap: 2px;
  min-height: 58px;
  padding: 10px 12px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: transparent;
  color: var(--muted);
  text-align: left;
  cursor: pointer;
}

.accountSectionTabs button:hover {
  border-color: var(--line);
  background: color-mix(in srgb, var(--teal) 7%, var(--card));
  color: var(--ink);
}

.accountSectionTabs button.active {
  border-color: color-mix(in srgb, var(--teal) 42%, var(--line));
  background: color-mix(in srgb, var(--teal) 13%, var(--card));
  color: var(--ink);
  box-shadow: inset 0 -3px 0 var(--teal);
}

.accountSectionTabs strong {
  font-size: .98rem;
  line-height: 1.2;
}

.accountSectionTabs small {
  color: inherit;
  font-size: .75rem;
  line-height: 1.2;
  opacity: .82;
}

.accountView.hasUser:not(.accountTab-overview) > .accountNextStepPanel,
.accountView.hasUser:not(.accountTab-overview) > .accountTrustSummary,
.accountView.hasUser:not(.accountTab-overview) > .accountGrid,
.accountView.hasUser:not(.accountTab-overview) > .readinessPanel,
.accountView.hasUser:not(.accountTab-profile) > .accountProfileHero,
.accountView.hasUser:not(.accountTab-profile) > .accountPanel-profile,
.accountView.hasUser:not(.accountTab-security) > .securityUpgradeMount,
.accountView.hasUser:not(.accountTab-security) > .securityPanel,
.accountView.hasUser:not(.accountTab-security) > .accountPanel-security,
.accountView.hasUser:not(.accountTab-notifications) > .accountPanel-notifications,
.accountView.hasUser:not(.accountTab-activity) > .accountPanel-activity,
.accountView.hasUser:not(.accountTab-activity) > .recentReviewsCard,
.accountView.hasUser:not(.accountTab-activity) > .selfPublicProfileCard {
  display: none !important;
}

.accountView.hasUser.accountTab-overview > .accountGrid,
.accountView.hasUser.accountTab-overview > .readinessPanel,
.accountView.hasUser.accountTab-profile > .accountPanel-profile,
.accountView.hasUser.accountTab-security > .accountPanel-security,
.accountView.hasUser.accountTab-notifications > .accountPanel-notifications,
.accountView.hasUser.accountTab-activity > .accountPanel-activity {
  display: grid;
}

.accountView.hasUser.accountTab-security > .securityPanel,
.accountView.hasUser.accountTab-activity > .selfPublicProfileCard,
.accountView.hasUser.accountTab-activity > .recentReviewsCard,
.accountView.hasUser.accountTab-profile > .accountProfileHero {
  display: grid;
}

@media (max-width: 560px) {
  .paymentAgreementHead {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .adminSummaryStrip {
    grid-template-columns: 1fr;
  }

  .accountPanel-notifications .preferenceGrid:has(> label) {
    grid-template-columns: 1fr;
    padding: 12px;
  }

  .accountSectionTabs {
    display: flex;
    overflow-x: auto;
    gap: 7px;
    margin: 8px -2px 14px;
    padding: 7px;
    border-radius: 14px;
    scroll-snap-type: x proximity;
  }

  .accountSectionTabs button {
    flex: 0 0 104px;
    min-height: 48px;
    padding: 9px 10px;
    text-align: center;
    scroll-snap-align: start;
  }

  .accountSectionTabs small {
    display: none;
  }
}

@media (max-width: 380px) {
  .wishReadinessPills,
  .quickHintRow {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 900px) {
  .areaHumanBoard,
  .mapGuidePanel {
    grid-template-columns: 1fr;
  }

  .mapGuideActions {
    flex-wrap: wrap;
  }

  .mapGuideActions .primaryButton,
  .mapGuideActions .softButton {
    flex: 1 1 160px;
  }

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

@media (max-width: 560px) {
  .areaHumanCard > div:first-child {
    align-items: flex-start;
    flex-direction: column;
  }

  .areaHumanCard dl {
    grid-template-columns: 1fr;
  }
}

[data-theme="dark"] .heroProduct {
  background:
    linear-gradient(90deg, rgba(13, 17, 24, .98) 0%, rgba(13, 17, 24, .92) 44%, rgba(13, 17, 24, .68) 100%),
    url('./images/bondmai-hero-handoff.webp') center right / cover no-repeat;
}

[data-theme="dark"] .heroProduct h1,
[data-theme="dark"] .heroProduct h2,
[data-theme="dark"] .heroProduct h3,
[data-theme="dark"] .heroProduct strong {
  color: #f8fafc;
}

[data-theme="dark"] .heroProduct p,
[data-theme="dark"] .heroProduct small {
  color: #cbd5e1;
}

[data-theme="dark"] .heroProduct .matchPreview {
  color: #f8fafc;
  background: rgba(15, 23, 42, .84);
  border-color: rgba(148, 163, 184, .28);
}

[data-theme="dark"] .heroProduct .matchPreview span {
  color: #5eead4;
}

[data-theme="dark"] .heroProduct .matchPreview strong {
  color: #f8fafc;
}

[data-theme="dark"] .heroProduct .matchPreview small {
  color: #cbd5e1;
}

[data-theme="dark"] .heroSearchPanel,
[data-theme="dark"] .marketPulse {
  color: #f8fafc;
  background:
    linear-gradient(145deg, rgba(94, 234, 212, .10), rgba(247, 200, 115, .06)),
    rgba(15, 23, 42, .88);
  border-color: rgba(148, 163, 184, .26);
}

[data-theme="dark"] .heroSearchField span,
[data-theme="dark"] .marketPulseHead p,
[data-theme="dark"] .pulseItem small,
[data-theme="dark"] .pulseItem p,
[data-theme="dark"] .pulseCountryRail > span,
[data-theme="dark"] .pulseCountryRail button small {
  color: #cbd5e1;
}

[data-theme="dark"] .heroSearchField input,
[data-theme="dark"] .heroSearchField select {
  color: #0f172a;
  background: #f8fafc;
  border-color: rgba(226, 232, 240, .88);
}

[data-theme="dark"] .miniCountryPills button,
[data-theme="dark"] .pulseFeed,
[data-theme="dark"] .pulseTrips,
[data-theme="dark"] .pulseItem,
[data-theme="dark"] .pulseCountryRail button {
  color: #f8fafc;
  background: rgba(15, 23, 42, .78);
  border-color: rgba(148, 163, 184, .24);
}

[data-theme="dark"] .pulseItem strong,
[data-theme="dark"] .pulseCountryRail button strong {
  color: #ffffff;
}

[data-theme="dark"] .pulseIcon {
  background: rgba(94, 234, 212, .16);
}

[data-theme="dark"] .tabs {
  background: rgba(148, 163, 184, .16);
  border-color: rgba(148, 163, 184, .26);
}

[data-theme="dark"] .tabs button {
  color: #cbd5e1;
}

[data-theme="dark"] .tabs button.active {
  color: #f8fafc;
  background: #0d1420;
  box-shadow: inset 0 0 0 2px rgba(248, 250, 252, .18), 0 10px 26px rgba(0, 0, 0, .28);
}

[data-theme="dark"] .rail button {
  color: #cbd5e1;
}

[data-theme="dark"] .rail button.active {
  color: #f8fafc;
  background: rgba(94, 234, 212, .12);
  box-shadow: inset 3px 0 0 #5eead4;
}

[data-theme="dark"] .filters button,
[data-theme="dark"] .accountSectionTabs button,
[data-theme="dark"] .mobileDetailTabs button {
  color: #cbd5e1;
  background: rgba(15, 23, 42, .72);
  border-color: rgba(148, 163, 184, .24);
}

[data-theme="dark"] .filters button.active,
[data-theme="dark"] .accountSectionTabs button.active,
[data-theme="dark"] .mobileDetailTabs button.active {
  color: #08111a;
  background: linear-gradient(135deg, #5eead4, #f7c873);
  border-color: rgba(255, 255, 255, .22);
  box-shadow: 0 10px 22px rgba(94, 234, 212, .18);
}

[data-theme="dark"] .status,
[data-theme="dark"] .badge,
[data-theme="dark"] .departBadge {
  color: #08111a;
  background: #dffcf7;
  border-color: rgba(94, 234, 212, .36);
}

[data-theme="dark"] .status.review {
  color: #3f2500;
  background: #fdecc8;
}

[data-theme="dark"] .status.matching,
[data-theme="dark"] .status.new {
  color: #4a0718;
  background: #ffe4ec;
}

[data-theme="dark"] .status.open,
[data-theme="dark"] .status.ordered {
  color: #063b32;
  background: #d9fff6;
}

[data-theme="dark"] .tripSummary button,
[data-theme="dark"] .tripFilters,
[data-theme="dark"] .tripEditForm {
  color: #f8fafc;
  background: rgba(15, 23, 42, .82);
  border-color: rgba(148, 163, 184, .24);
}

[data-theme="dark"] .tripSummary button.active {
  color: #08111a;
  background: linear-gradient(135deg, #5eead4, #f7c873);
  border-color: rgba(255, 255, 255, .22);
  box-shadow: 0 10px 24px rgba(94, 234, 212, .18);
}

[data-theme="dark"] .tripSummary button.active small {
  color: #063b32;
}

[data-theme="dark"] .tripSummary small {
  color: #5eead4;
}

[data-theme="dark"] .tripCard h3,
[data-theme="dark"] .tripCard strong,
[data-theme="dark"] .tripCard .miniMeta {
  color: #f8fafc;
}

[data-theme="dark"] .tripCard p,
[data-theme="dark"] .tripCard .note,
[data-theme="dark"] .tripCard .tagRow span {
  color: #cbd5e1;
}

[data-theme="dark"] .tripCard .tagRow span {
  background: rgba(30, 41, 59, .82);
  border: 1px solid rgba(148, 163, 184, .20);
}

[data-theme="dark"] .quickStartCard,
[data-theme="dark"] .stepGrid button,
[data-theme="dark"] .matchInsight,
[data-theme="dark"] .nextActions span,
[data-theme="dark"] .orderTimelineRail,
[data-theme="dark"] .orderSummary button,
[data-theme="dark"] .mapGuidePanel,
[data-theme="dark"] .areaSpotlight,
[data-theme="dark"] .areaDirectory,
[data-theme="dark"] .areaList,
[data-theme="dark"] .areaRow,
[data-theme="dark"] .areaHumanCard,
[data-theme="dark"] .areaHumanCard dl div,
[data-theme="dark"] .policyItem,
[data-theme="dark"] .policyFaqItem,
[data-theme="dark"] .policyQaColumns > div,
[data-theme="dark"] .policyFinanceNote,
[data-theme="dark"] .wishInspirationCards article,
[data-theme="dark"] .wishLivePreview,
[data-theme="dark"] .wishClueCoach,
[data-theme="dark"] .wishClueGrid article,
[data-theme="dark"] .wishCostGrid span,
[data-theme="dark"] .draftPanel,
[data-theme="dark"] .duplicateBox,
[data-theme="dark"] .accountCard,
[data-theme="dark"] .adminColumns > div {
  color: #f6f1e8;
  background: rgba(15, 23, 42, .78);
  border-color: rgba(148, 163, 184, .22);
}

[data-theme="dark"] .mapGuidePanel {
  background:
    linear-gradient(90deg, rgba(8, 13, 21, .98) 0%, rgba(8, 13, 21, .90) 55%, rgba(8, 13, 21, .58) 100%),
    url('./images/traveler-hero.jpg') center right / cover no-repeat,
    rgba(15, 23, 42, .92);
  border-color: rgba(94, 234, 212, .34);
  box-shadow: 0 18px 48px rgba(0, 0, 0, .28);
}

[data-theme="dark"] .mapGuidePanel::after {
  background: linear-gradient(180deg, rgba(8, 13, 21, 0), rgba(8, 13, 21, .42));
}

[data-theme="dark"] .mapGuidePanel span {
  color: #5eead4;
}

[data-theme="dark"] .mapGuidePanel h3,
[data-theme="dark"] .areaSpotlight h2,
[data-theme="dark"] .areaDirectory h2,
[data-theme="dark"] .areaList strong,
[data-theme="dark"] .areaRow span {
  color: #f8fafc;
}

[data-theme="dark"] .mapGuidePanel p,
[data-theme="dark"] .areaSpotlight p,
[data-theme="dark"] .areaDirectory p,
[data-theme="dark"] .areaRow small {
  color: #cbd5e1;
}

[data-theme="dark"] .areaList {
  background: rgba(15, 23, 42, .86);
}

[data-theme="dark"] .areaRow {
  border-top-color: rgba(148, 163, 184, .22);
}

[data-theme="dark"] .areaRow b {
  color: #063b32;
  background: #d9fff6;
  border: 1px solid rgba(94, 234, 212, .55);
  font-weight: 950;
}

[data-theme="dark"] .areaHumanCard {
  background: linear-gradient(135deg, rgba(15, 23, 42, .92), rgba(20, 31, 44, .86));
  border-color: rgba(94, 234, 212, .28);
}

[data-theme="dark"] .areaHumanCard.need_travelers {
  border-left-color: #f87171;
}

[data-theme="dark"] .areaHumanCard.high_demand {
  border-left-color: #fbbf24;
}

[data-theme="dark"] .areaHumanCard.need_wishes {
  border-left-color: #60a5fa;
}

[data-theme="dark"] .areaHumanCard p,
[data-theme="dark"] .areaHumanCard small,
[data-theme="dark"] .areaHumanCard dt {
  color: #cbd5e1;
}

[data-theme="dark"] .areaHumanCard dd,
[data-theme="dark"] .areaHumanCard strong {
  color: #f8fafc;
}

[data-theme="dark"] .areaState {
  color: #063b32;
  background: #d9fff6;
  border-color: rgba(94, 234, 212, .65);
  font-weight: 950;
}

[data-theme="dark"] .mapFilters {
  background: rgba(15, 23, 42, .72);
  border-color: rgba(148, 163, 184, .24);
}

[data-theme="dark"] .areaDirectory .areaRow {
  color: #f8fafc;
  background: rgba(15, 23, 42, .70);
  border-color: rgba(148, 163, 184, .22);
}

[data-theme="dark"] .orderSummary button.active {
  color: #08111a;
  background: linear-gradient(135deg, #5eead4, #f7c873);
  border-color: rgba(255, 255, 255, .22);
}

[data-theme="dark"] .orderSummary button.active small {
  color: #063b32;
}

[data-theme="dark"] .quickStartCard strong,
[data-theme="dark"] .stepGrid strong,
[data-theme="dark"] .matchInsight strong,
[data-theme="dark"] .nextActions strong,
[data-theme="dark"] .orderSummary button strong,
[data-theme="dark"] .policyItem h3,
[data-theme="dark"] .policyFaqItem h3,
[data-theme="dark"] .wishInspirationCards strong,
[data-theme="dark"] .wishClueGrid strong,
[data-theme="dark"] .wishLivePreviewBody h3,
[data-theme="dark"] .accountCard strong {
  color: #f8fafc;
}

[data-theme="dark"] .quickStartCard small,
[data-theme="dark"] .stepGrid small,
[data-theme="dark"] .matchInsight small,
[data-theme="dark"] .nextActions small,
[data-theme="dark"] .orderSummary button:not(.active) small,
[data-theme="dark"] .policyItem p,
[data-theme="dark"] .policyItem small,
[data-theme="dark"] .policyFaqItem p,
[data-theme="dark"] .wishInspirationCards small,
[data-theme="dark"] .wishClueGrid small,
[data-theme="dark"] .wishLivePreviewBody p,
[data-theme="dark"] .accountCard small {
  color: #cbd5e1;
}

[data-theme="dark"] input,
[data-theme="dark"] select,
[data-theme="dark"] textarea,
[data-theme="dark"] .searchInput {
  color: #111827;
  background: #f8fafc;
  border-color: #cbd5e1;
}

[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
  color: #6b7280;
  opacity: 1;
}

[data-theme="dark"] input:disabled,
[data-theme="dark"] select:disabled,
[data-theme="dark"] textarea:disabled {
  color: #dbe4ee;
  background: #293343;
  border-color: #465366;
  opacity: 1;
}

[data-theme="dark"] :where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]),
select,
textarea),
html[data-theme="dark"] :where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]),
select,
textarea) {
  color: #f8fafc;
  border-color: rgba(148, 163, 184, .34);
  background:
    linear-gradient(180deg, rgba(15, 23, 42, .98), rgba(17, 24, 39, .94));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 12px 28px rgba(0, 0, 0, .18);
}

[data-theme="dark"] :where(select),
html[data-theme="dark"] :where(select) {
  background-image:
    linear-gradient(180deg, rgba(15, 23, 42, .98), rgba(17, 24, 39, .94)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%235eead4' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}

[data-theme="dark"] :where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]),
select,
textarea)::placeholder,
html[data-theme="dark"] :where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]),
select,
textarea)::placeholder {
  color: #94a3b8;
}

[data-theme="dark"] :where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]),
select,
textarea):focus,
html[data-theme="dark"] :where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]),
select,
textarea):focus {
  border-color: rgba(94, 234, 212, .68);
  background:
    linear-gradient(180deg, rgba(15, 23, 42, 1), rgba(20, 35, 49, .98));
  box-shadow: 0 0 0 4px rgba(45, 212, 191, .18), 0 16px 34px rgba(0, 0, 0, .24);
}

[data-theme="dark"] .primaryButton:disabled,
[data-theme="dark"] .softButton:disabled,
[data-theme="dark"] .tinyButton:disabled {
  color: #e5edf4;
  background: #52606f;
  border-color: #6b7a8a;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
}

[data-theme="dark"] .tinyButton.dangerTiny {
  color: #fecdd3;
  background: rgba(159, 18, 57, .28);
  border-color: rgba(251, 113, 133, .58);
}

[data-theme="dark"] .primaryAction,
[data-theme="dark"] .primaryButton,
[data-theme="dark"] .guestAccountEntryActions .primaryButton,
[data-theme="dark"] .mobileGuestLoginActions .primaryButton {
  color: #041016;
  background: linear-gradient(135deg, #5eead4 0%, #2dd4bf 52%, #f7c873 100%);
  border-color: rgba(255, 255, 255, .24);
  box-shadow: 0 16px 38px rgba(94, 234, 212, .26);
  font-weight: 950;
}

[data-theme="dark"] .secondaryAction {
  color: #f8fafc;
  background: rgba(15, 23, 42, .88);
  border-color: rgba(248, 250, 252, .24);
  box-shadow: inset 0 0 0 1px rgba(248, 250, 252, .08);
  font-weight: 950;
}

[data-theme="dark"] .trustRow span {
  color: #063b32;
  background: #d9fff6;
  border-color: rgba(94, 234, 212, .65);
  box-shadow: 0 8px 18px rgba(94, 234, 212, .12);
}

[data-theme="dark"] .wishReadiness,
[data-theme="dark"] .wishReadiness.state-ready,
[data-theme="dark"] .wishReadiness.ready,
[data-theme="dark"] .wishPhotoUpload,
[data-theme="dark"] .policyBanner,
[data-theme="dark"] .directPaymentNotice,
[data-theme="dark"] .paymentAgreementPanel {
  color: #f6f1e8;
  background: rgba(15, 23, 42, .78);
  border-color: rgba(148, 163, 184, .24);
}

[data-theme="dark"] .wishReadinessPills span,
[data-theme="dark"] .quickHintRow button {
  color: #3f2500;
  background: #fdecc8;
  border-color: rgba(247, 200, 115, .6);
}

[data-theme="dark"] .wishReadinessPills span.done {
  color: #063b32;
  background: #d9fff6;
  border-color: rgba(94, 234, 212, .65);
}

[data-theme="dark"] .languageToggle,
[data-theme="dark"] .themeToggle {
  background: #111827;
  border-color: rgba(148, 163, 184, .28);
}

[data-theme="dark"] .themeToggle {
  color: #f8fafc;
}

[data-theme="dark"] .languageToggle button {
  color: #cbd5e1;
}

[data-theme="dark"] .languageToggle button.active {
  color: #08111a;
  background: #f8fafc;
}

[data-theme="dark"] .loginStatusChip {
  color: #f8fafc;
  background: rgba(15, 23, 42, .94);
  border-color: rgba(94, 234, 212, .34);
  box-shadow: inset 0 0 0 1px rgba(248, 250, 252, .06), 0 14px 32px rgba(0, 0, 0, .28);
}

[data-theme="dark"] .loginStatusChip strong {
  color: #f8fafc;
}

[data-theme="dark"] .loginStatusChip small {
  color: #cbd5e1;
}

[data-theme="dark"] .loginStatusChip .tinyButton {
  color: #052e2b;
  background: #ccfbf1;
  border-color: rgba(94, 234, 212, .65);
  font-weight: 950;
}

[data-theme="dark"] .globalSearchBar {
  color: #f8fafc;
  background: rgba(15, 23, 42, .92);
  border-color: rgba(148, 163, 184, .28);
  box-shadow: 0 14px 34px rgba(0, 0, 0, .3);
}

[data-theme="dark"] .globalSearchBar .glyph {
  color: #f7c873;
}

[data-theme="dark"] .globalSearchBar input {
  color: #f8fafc;
  background: rgba(30, 41, 59, .72);
  border: 1px solid rgba(148, 163, 184, .28);
  border-radius: 10px;
}

[data-theme="dark"] .globalSearchBar input::placeholder {
  color: #cbd5e1;
}

[data-theme="dark"] .globalSearchBar .tinyButton,
[data-theme="dark"] .pwaPrompt .softButton,
[data-theme="dark"] .pwaPrompt .tinyButton {
  color: #052e2b;
  background: #ccfbf1;
  border-color: rgba(94, 234, 212, .7);
  font-weight: 950;
}

[data-theme="dark"] .pwaPrompt {
  color: #f8fafc;
  background: linear-gradient(135deg, rgba(15, 23, 42, .96), rgba(17, 24, 39, .92));
  border-color: rgba(94, 234, 212, .3);
  border-left-color: #5eead4;
}

[data-theme="dark"] .pwaPrompt span {
  color: #5eead4;
}

[data-theme="dark"] .pwaPrompt strong {
  color: #f8fafc;
}

[data-theme="dark"] .pwaPrompt small {
  color: #cbd5e1;
}

[data-theme="dark"] .travelerStartPanel,
[data-theme="dark"] .accountNextStepPanel,
[data-theme="dark"] .accountQuickNext,
[data-theme="dark"] .accountTrustSummary,
[data-theme="dark"] .recentReviewsCard,
[data-theme="dark"] .readinessPanel,
[data-theme="dark"] .mobileDetailCard {
  color: #f8fafc;
  background: linear-gradient(135deg, rgba(17, 24, 39, .96), rgba(15, 23, 42, .9));
  border-color: rgba(94, 234, 212, .32);
  box-shadow: 0 18px 42px rgba(0, 0, 0, .34);
}

[data-theme="dark"] .travelerStartCopy h3,
[data-theme="dark"] .travelerStartSteps span,
[data-theme="dark"] .accountNextStepHead strong,
[data-theme="dark"] .accountQuickNextHead strong,
[data-theme="dark"] .accountNextStepList strong,
[data-theme="dark"] .accountQuickNextList strong,
[data-theme="dark"] .accountTrustSummary h3,
[data-theme="dark"] .trustSummaryCard strong,
[data-theme="dark"] .readinessPanel h3,
[data-theme="dark"] .readinessGrid strong,
[data-theme="dark"] .mobileDetailCard h3,
[data-theme="dark"] .mobileDetailCard strong {
  color: #f8fafc;
}

[data-theme="dark"] .travelerStartCopy p,
[data-theme="dark"] .accountNextStepHead small,
[data-theme="dark"] .accountQuickNextHead small,
[data-theme="dark"] .accountNextStepList small,
[data-theme="dark"] .accountQuickNextList small,
[data-theme="dark"] .trustSummaryCard span,
[data-theme="dark"] .trustSummaryCard small,
[data-theme="dark"] .readinessHead p,
[data-theme="dark"] .readinessGrid small,
[data-theme="dark"] .mobileDetailCard small,
[data-theme="dark"] .mobileDetailCard p {
  color: #cbd5e1;
}

[data-theme="dark"] .accountNextStepList button,
[data-theme="dark"] .accountQuickNextList button,
[data-theme="dark"] .trustSummaryCard,
[data-theme="dark"] .readinessGrid span,
[data-theme="dark"] .mobileDetailCard .compactList span,
[data-theme="dark"] .accountQuickStats article,
[data-theme="dark"] .accountSessionList article,
[data-theme="dark"] .reviewListV2 article {
  color: #f8fafc;
  background: rgba(30, 41, 59, .86);
  border-color: rgba(148, 163, 184, .26);
  box-shadow: none;
}

[data-theme="dark"] .accountNextStepList i,
[data-theme="dark"] .accountQuickIcon,
[data-theme="dark"] .travelerStartCopy .glyph {
  color: #08111a;
  background: linear-gradient(135deg, #5eead4, #f7c873);
  border-color: transparent;
}

[data-theme="dark"] .accountNextStepHead b,
[data-theme="dark"] .readinessHead strong {
  color: #5eead4;
  background: rgba(8, 13, 21, .82);
  border-color: rgba(94, 234, 212, .34);
}

[data-theme="dark"] .draftList button,
[data-theme="dark"] .draftList span,
[data-theme="dark"] .mobileProgress {
  color: #f8fafc;
  background: rgba(30, 41, 59, .9);
  border-color: rgba(148, 163, 184, .26);
}

[data-theme="dark"] .draftList small,
[data-theme="dark"] .mobileProgress span {
  color: #cbd5e1;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 1ms !important;
  }

  .tabs button:hover,
  .rail button:hover,
  .filters button:hover,
  .softButton:hover,
  .primaryButton:hover,
  .stat:hover,
  .adminTile:hover,
  .tripCard:hover,
  .matchCard:hover,
  .orderCard:hover,
  .empty:hover,
  .productPreviewCard:hover,
  .areaHumanCard:hover,
  .recentReviewsCard:hover,
  .wishForm input:focus,
  .wishForm select:focus,
  .wishForm textarea:focus {
    transform: none !important;
  }
}

@media (max-width: 700px) {
  [data-theme="dark"] .mobileActionBar {
    background: rgba(13, 17, 24, 0.92);
    border-color: rgba(247, 200, 115, 0.22);
  }

  [data-theme="dark"] .mobileActionBar button {
    color: #b8c0c7;
  }

  [data-theme="dark"] .mobileActionBar span {
    color: #f7c873;
    background: rgba(247, 200, 115, 0.12);
  }

  [data-theme="dark"] .mobileActionBar button.active {
    color: #f6f1e8;
    background: rgba(247, 200, 115, 0.12);
    box-shadow: inset 0 0 0 1px rgba(247, 200, 115, 0.24), 0 10px 24px rgba(0, 0, 0, 0.28);
  }

  [data-theme="dark"] .mobileActionBar button.active span {
    color: #111827;
    background: linear-gradient(135deg, #f7c873, #5eead4);
  }

  [data-theme="dark"] .topbar {
    background: rgba(13, 17, 24, .96);
    border-color: rgba(148, 163, 184, .22);
  }

  [data-theme="dark"] .topbar .brand strong {
    color: #f8fafc;
  }

  [data-theme="dark"] .topbar .brand small {
    color: #cbd5e1;
  }

  [data-theme="dark"] .loginStatusChip {
    background: rgba(248, 250, 252, .96);
    border-color: rgba(94, 234, 212, .52);
  }

  [data-theme="dark"] .loginStatusChip strong {
    color: #0f172a;
  }

  [data-theme="dark"] .loginStatusChip small {
    color: #475569;
  }

  [data-theme="dark"] .globalSearchBar {
    margin-top: 8px;
    background: rgba(15, 23, 42, .96);
    border-color: rgba(94, 234, 212, .28);
  }

  [data-theme="dark"] .globalSearchBar input {
    color: #0f172a;
    background: #f8fafc;
    border-color: #dbeafe;
  }

  [data-theme="dark"] .globalSearchBar input::placeholder {
    color: #64748b;
  }

  [data-theme="dark"] .globalSearchBar .tinyButton {
    color: #063b32;
    background: #ccfbf1;
    border-color: rgba(94, 234, 212, .72);
  }

  [data-theme="dark"] .pwaPrompt {
    background: rgba(15, 23, 42, .94);
    border-color: rgba(94, 234, 212, .32);
    border-left-color: #5eead4;
  }

  [data-theme="dark"] .pwaPrompt .primaryButton,
  [data-theme="dark"] .pwaPrompt .softButton,
  [data-theme="dark"] .pwaPrompt .tinyButton {
    min-height: 42px;
    color: #052e2b;
    background: #ccfbf1;
    border-color: rgba(94, 234, 212, .74);
    font-weight: 950;
  }

  [data-theme="dark"] .pwaPrompt .primaryButton {
    color: #041016;
    background: linear-gradient(135deg, #5eead4, #f7c873);
  }

  [data-theme="dark"] .tableRow,
  [data-theme="dark"] .compactList span,
  [data-theme="dark"] .miniLedger span,
  [data-theme="dark"] .reviewScore {
    border-color: rgba(148, 163, 184, 0.16);
  }

  [data-theme="dark"] .badge,
  [data-theme="dark"] .status,
  [data-theme="dark"] .departBadge {
    box-shadow: none;
  }

  .travelerStartPanel {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 14px;
    border-radius: 16px;
  }

  .travelerStartCopy {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
  }

  .travelerStartCopy .glyph {
    width: 54px;
    height: 54px;
    border-radius: 16px;
  }

  .travelerStartCopy span {
    display: inline-flex;
    margin-bottom: 2px;
  }

  .travelerStartCopy h3 {
    margin: 0 0 3px;
    font-size: 17px;
    line-height: 1.25;
  }

  .travelerStartCopy p {
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    font-size: 13px;
    line-height: 1.45;
  }

  .travelerStartSteps {
    grid-template-columns: 1fr;
    padding: 10px;
    background: color-mix(in srgb, var(--teal) 7%, var(--white));
    border: 1px solid color-mix(in srgb, var(--teal) 18%, var(--line));
    border-radius: 12px;
  }

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

  .travelerStartActions button {
    min-height: 44px;
  }

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

  .tripSummary button {
    min-height: 54px;
    padding: 10px;
    align-items: flex-start;
    flex-direction: column;
    justify-content: center;
  }

  .tripSummary button:nth-child(n+4).active {
    color: inherit;
    background: var(--white);
    border-color: var(--line);
    box-shadow: none;
  }

  .tripSummary small {
    font-size: 18px;
    line-height: 1;
  }

  .tripFilters {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 10px;
    background: color-mix(in srgb, var(--sky) 34%, var(--white));
    border: 1px solid var(--line);
    border-radius: 14px;
  }

  .tripFilters select,
  .tripFilters .searchInput {
    min-height: 44px;
    border-radius: 12px;
  }

  .tripCard {
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 10px;
    padding: 14px;
  }

  .tripCard .avatar {
    width: 44px;
    height: 44px;
    border-radius: 12px;
  }

  .tripCard .cardTop {
    display: grid;
    gap: 8px;
  }

  .tripCard .cardTop h3 {
    margin-bottom: 3px;
    font-size: 17px;
  }

  .tripCard .cardTop p,
  .tripCard .miniMeta {
    gap: 5px 8px;
    margin-bottom: 6px;
    font-size: 12px;
  }

  .tripCard .status {
    justify-self: start;
  }

  .tripCard .note {
    display: -webkit-box;
    margin-top: 8px;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  .tripCard .tagRow {
    gap: 6px;
    margin-top: 8px;
  }

  .tripCard .tagRow span:nth-child(n+4) {
    display: none;
  }

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

  .tripActions button {
    min-width: 0;
    min-height: 42px;
  }

  .tripEditForm {
    grid-template-columns: 1fr;
    gap: 9px;
    padding: 12px;
    border-radius: 14px;
  }

  .tripEditForm input,
  .tripEditForm textarea {
    min-height: 44px;
    border-radius: 12px;
  }

  [data-theme="dark"] .tripFilters,
  [data-theme="dark"] .tripEditForm {
    background: rgba(15, 23, 42, .82);
    border-color: rgba(148, 163, 184, .24);
  }

  [data-theme="dark"] .tripSummary button:not(.active),
  [data-theme="dark"] .tripFilters select,
  [data-theme="dark"] .tripFilters .searchInput,
  [data-theme="dark"] .tripEditForm input,
  [data-theme="dark"] .tripEditForm textarea {
    color: #f8fafc;
    background: rgba(30, 41, 59, .88);
    border-color: rgba(148, 163, 184, .28);
  }

  [data-theme="dark"] .tripFilters select,
  [data-theme="dark"] .tripFilters .searchInput,
  [data-theme="dark"] .tripEditForm input,
  [data-theme="dark"] .tripEditForm textarea {
    color: #0f172a;
    background: #f8fafc;
    border-color: #dbeafe;
  }

  [data-theme="dark"] .tripFilters input::placeholder,
  [data-theme="dark"] .tripEditForm input::placeholder,
  [data-theme="dark"] .tripEditForm textarea::placeholder {
    color: #64748b;
  }

  [data-theme="dark"] .tripSummary button:not(.active) {
    color: #f8fafc;
  }

  [data-theme="dark"] .tripSummary button:nth-child(n+4).active {
    color: #f8fafc;
    background: rgba(30, 41, 59, .88);
    border-color: rgba(148, 163, 184, .28);
  }

  [data-theme="dark"] .tripSummary button:not(.active) small {
    color: #5eead4;
  }

  [data-theme="dark"] .tripSummary button:nth-child(n+4).active small {
    color: #5eead4;
  }

  .filters {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding: 6px 2px 8px;
    scrollbar-width: none;
  }

  .filters::-webkit-scrollbar {
    display: none;
  }

  .filters button {
    flex: 0 0 auto;
    min-height: 38px;
    white-space: nowrap;
  }

  .filters button:not(.active) {
    opacity: .82;
  }

  .filters button.active {
    position: relative;
    opacity: 1;
    box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--teal) 48%, transparent), 0 8px 18px rgba(15, 118, 110, .12);
  }

  [data-theme="dark"] .filters button:not(.active) {
    color: #cbd5e1;
    background: rgba(15, 23, 42, .66);
    border-color: rgba(148, 163, 184, .22);
    opacity: .78;
  }

  [data-theme="dark"] .filters button.active {
    opacity: 1;
    color: #08111a;
    background: linear-gradient(135deg, #5eead4, #f7c873);
    border-color: rgba(255, 255, 255, .24);
  }

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

  .mobileActionBar button {
    padding-inline: 4px;
  }

  [data-theme="dark"] .travelerStartSteps {
    background: rgba(8, 13, 21, .66);
    border-color: rgba(148, 163, 184, .22);
  }

  [data-theme="dark"] .decisionStrip.tripDecision article {
    color: #f8fafc;
    background:
      linear-gradient(135deg, rgba(20, 31, 44, .98), rgba(11, 18, 32, .92));
    border-color: rgba(94, 234, 212, .22);
    box-shadow: 0 16px 32px rgba(0, 0, 0, .28);
  }

  [data-theme="dark"] .decisionStrip.tripDecision .decisionPrimary {
    background:
      linear-gradient(135deg, rgba(19, 78, 74, .96), rgba(72, 49, 16, .92));
    border-color: rgba(94, 234, 212, .44);
  }

  [data-theme="dark"] .decisionStrip.tripDecision span {
    color: #67e8f9;
  }

  [data-theme="dark"] .decisionStrip.tripDecision strong {
    color: #f8fafc;
  }

  [data-theme="dark"] .decisionStrip.tripDecision small {
    color: #cbd5e1;
  }

  [data-theme="dark"] input:disabled,
  [data-theme="dark"] select:disabled,
  [data-theme="dark"] textarea:disabled,
  [data-theme="dark"] button:disabled,
  [data-theme="dark"] .primaryButton:disabled {
    color: #dbeafe;
    background: rgba(51, 65, 85, .78);
    border-color: rgba(148, 163, 184, .28);
    opacity: 1;
  }
}

/* Traveler workspace polish: image-backed entry and stable left-icon decision cards. */
.travelerStartPanel {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.formView:has(.tripDecision) {
  position: relative;
  overflow: hidden;
}

.formView:has(.tripDecision)::before {
  content: "";
  display: block;
  height: clamp(150px, 22vw, 240px);
  margin: 0 0 18px;
  background:
    linear-gradient(90deg, rgba(255, 253, 249, .94), rgba(255, 253, 249, .5) 42%, rgba(255, 253, 249, .08)),
    url("./images/traveler-hero.jpg") center 45% / cover no-repeat;
  border: 1px solid color-mix(in srgb, var(--teal) 24%, var(--line));
  border-radius: 20px;
  box-shadow: var(--shadow-soft);
}

.travelerStartPanel::after {
  content: "";
  position: absolute;
  inset: 0 0 0 auto;
  width: min(38%, 420px);
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0), var(--card) 88%),
    url("./images/traveler-hero.jpg") center / cover no-repeat;
  opacity: .28;
  pointer-events: none;
  z-index: -1;
}

.decisionStrip.tripDecision article {
  grid-template-columns: 76px minmax(0, 1fr);
  grid-template-rows: auto auto auto;
  column-gap: 18px;
  align-items: center;
}

.decisionStrip.tripDecision svg,
.decisionStrip.tripDecision .glyph {
  grid-column: 1;
  grid-row: 1 / span 3;
  place-self: center;
  width: 64px;
  min-width: 64px;
  height: 64px;
  margin: 0;
}

.decisionStrip.tripDecision span,
.decisionStrip.tripDecision strong,
.decisionStrip.tripDecision small {
  grid-column: 2;
}

.decisionStrip.tripDecision span {
  align-self: end;
  margin: 0 0 2px;
}

.decisionStrip.tripDecision strong {
  align-self: center;
}

.decisionStrip.tripDecision small {
  align-self: start;
}

[data-theme="dark"] .travelerStartPanel::after {
  background:
    linear-gradient(90deg, rgba(8, 13, 21, 0), rgba(8, 13, 21, .94) 88%),
    url("./images/traveler-hero.jpg") center / cover no-repeat;
  opacity: .36;
}

[data-theme="dark"] .formView:has(.tripDecision)::before {
  background:
    linear-gradient(90deg, rgba(8, 13, 21, .92), rgba(8, 13, 21, .5) 42%, rgba(8, 13, 21, .12)),
    url("./images/traveler-hero.jpg") center 45% / cover no-repeat;
  border-color: rgba(94, 234, 212, .28);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .3);
}

@media (max-width: 900px) {
  .formView:has(.tripDecision)::before {
    height: 132px;
    margin-bottom: 14px;
    background:
      linear-gradient(180deg, rgba(255, 253, 249, .12), rgba(255, 253, 249, .88) 92%),
      url("./images/traveler-hero.jpg") center 48% / cover no-repeat;
    border-radius: 18px;
  }

  .travelerStartPanel {
    min-height: 180px;
    padding-top: 118px;
  }

  .travelerStartPanel::after {
    inset: 0 0 auto;
    width: 100%;
    height: 108px;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0), var(--card) 96%),
      url("./images/traveler-hero.jpg") center 44% / cover no-repeat;
    opacity: .34;
  }

  .decisionStrip.tripDecision article {
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 2px 16px;
    min-height: 120px;
    padding: 18px 16px;
  }

  .decisionStrip.tripDecision svg,
  .decisionStrip.tripDecision .glyph {
    grid-column: 1;
    grid-row: 1 / span 3;
    place-self: center;
    width: 62px;
    min-width: 62px;
    height: 62px;
  }

  .decisionStrip.tripDecision .glyph svg {
    width: 30px;
    height: 30px;
  }

  [data-theme="dark"] .travelerStartPanel::after {
    background:
      linear-gradient(180deg, rgba(8, 13, 21, 0), rgba(8, 13, 21, .96) 96%),
      url("./images/traveler-hero.jpg") center 44% / cover no-repeat;
    opacity: .42;
  }

  [data-theme="dark"] .formView:has(.tripDecision)::before {
    background:
      linear-gradient(180deg, rgba(8, 13, 21, .12), rgba(8, 13, 21, .94) 94%),
      url("./images/traveler-hero.jpg") center 48% / cover no-repeat;
  }
}

/* Dark contrast sweep: keep action cards, icons, and availability badges readable. */
[data-theme="dark"] .heroProduct .matchPreview,
[data-theme="dark"] .stepGrid button,
[data-theme="dark"] .nextActions span {
  color: #f8fafc;
  background: rgba(15, 23, 42, .94);
  border-color: rgba(94, 234, 212, .32);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 12px 28px rgba(0, 0, 0, .24);
}

[data-theme="dark"] .heroProduct .matchPreview span,
[data-theme="dark"] .stepGrid span,
[data-theme="dark"] .nextActions span > span {
  color: #67e8f9;
}

[data-theme="dark"] .heroProduct .matchPreview strong,
[data-theme="dark"] .stepGrid strong,
[data-theme="dark"] .nextActions strong {
  color: #ffffff;
}

[data-theme="dark"] .heroProduct .matchPreview small,
[data-theme="dark"] .heroProduct .matchPreview p,
[data-theme="dark"] .stepGrid small,
[data-theme="dark"] .stepGrid p,
[data-theme="dark"] .nextActions small,
[data-theme="dark"] .nextActions p {
  color: #dbe7f3;
}

[data-theme="dark"] .heroProduct .matchPreview .glyph,
[data-theme="dark"] .stepGrid .glyph,
[data-theme="dark"] .nextActions .glyph {
  color: #062f2d;
  background: linear-gradient(135deg, #67e8f9, #f7c873);
  border: 1px solid rgba(255, 255, 255, .42);
  box-shadow: 0 10px 22px rgba(0, 0, 0, .30);
}

[data-theme="dark"] .heroProduct .matchPreview .glyph svg,
[data-theme="dark"] .stepGrid .glyph svg,
[data-theme="dark"] .nextActions .glyph svg {
  stroke: #062f2d;
  stroke-width: 2.4;
}

[data-theme="dark"] .countryCard,
[data-theme="dark"] .areaHumanCard {
  color: #f8fafc;
  background: rgba(15, 23, 42, .88);
  border-color: rgba(94, 234, 212, .26);
}

[data-theme="dark"] .countryCard h3,
[data-theme="dark"] .countryCard strong,
[data-theme="dark"] .areaHumanCard h3,
[data-theme="dark"] .areaHumanCard strong {
  color: #ffffff;
}

[data-theme="dark"] .countryCard p,
[data-theme="dark"] .countryCard small,
[data-theme="dark"] .areaHumanCard p,
[data-theme="dark"] .areaHumanCard small,
[data-theme="dark"] .areaHumanCard dt {
  color: #dbe7f3;
}

[data-theme="dark"] .countryCard .status,
[data-theme="dark"] .countryCard .departBadge,
[data-theme="dark"] .areaHumanCard .status,
[data-theme="dark"] .areaHumanCard .departBadge,
[data-theme="dark"] .globalLaunchRadar .departBadge {
  color: #042f2e;
  background: linear-gradient(135deg, #ccfbf1, #fde68a);
  border: 1px solid rgba(255, 255, 255, .62);
  box-shadow: 0 8px 18px rgba(0, 0, 0, .30);
  font-weight: 950;
  text-shadow: none;
}

[data-theme="dark"] button:disabled,
[data-theme="dark"] .button:disabled,
[data-theme="dark"] .stepGrid button:disabled {
  color: #94a3b8;
  background: rgba(30, 41, 59, .82);
  border-color: rgba(148, 163, 184, .26);
  opacity: 1;
}

/* High-specificity mobile dark contrast patch for nested action cards. */
html[data-theme="dark"] .heroProduct .matchPreview,
html[data-theme="dark"] .heroProduct .matchPreview *,
html[data-theme="dark"] .stepGrid > button,
html[data-theme="dark"] .stepGrid > button *,
html[data-theme="dark"] .nextActions > span,
html[data-theme="dark"] .nextActions > span *,
html[data-theme="dark"] .countryCard,
html[data-theme="dark"] .countryCard *,
html[data-theme="dark"] .areaHumanCard,
html[data-theme="dark"] .areaHumanCard * {
  text-shadow: none !important;
}

html[data-theme="dark"] .stepGrid > button,
html[data-theme="dark"] .nextActions > span {
  color: #f8fafc !important;
  background: linear-gradient(145deg, rgba(15, 23, 42, .98), rgba(12, 20, 32, .96)) !important;
  border-color: rgba(94, 234, 212, .44) !important;
  box-shadow: inset 4px 0 0 #5eead4, 0 12px 26px rgba(0, 0, 0, .30) !important;
}

html[data-theme="dark"] .stepGrid > button > span,
html[data-theme="dark"] .nextActions > span > span {
  color: #062f2d !important;
  background: linear-gradient(135deg, #67e8f9, #facc15) !important;
  border: 1px solid rgba(255, 255, 255, .56) !important;
  box-shadow: 0 8px 18px rgba(0, 0, 0, .32) !important;
}

html[data-theme="dark"] .stepGrid > button strong,
html[data-theme="dark"] .nextActions > span strong,
html[data-theme="dark"] .heroProduct .matchPreview strong {
  color: #ffffff !important;
}

html[data-theme="dark"] .stepGrid > button small,
html[data-theme="dark"] .stepGrid > button p,
html[data-theme="dark"] .nextActions > span small,
html[data-theme="dark"] .nextActions > span p,
html[data-theme="dark"] .heroProduct .matchPreview small,
html[data-theme="dark"] .heroProduct .matchPreview p {
  color: #e2e8f0 !important;
}

html[data-theme="dark"] .heroProduct .matchPreview .glyph,
html[data-theme="dark"] .quickStartCard .quickIcon,
html[data-theme="dark"] .mobileQuickTasks .glyph {
  color: #062f2d !important;
  background: linear-gradient(135deg, #67e8f9, #facc15) !important;
  border: 1px solid rgba(255, 255, 255, .56) !important;
  box-shadow: 0 10px 22px rgba(0, 0, 0, .34) !important;
}

html[data-theme="dark"] .heroProduct .matchPreview .glyph svg,
html[data-theme="dark"] .quickStartCard .quickIcon svg,
html[data-theme="dark"] .mobileQuickTasks .glyph svg {
  stroke: #062f2d !important;
  stroke-width: 2.6 !important;
}

html[data-theme="dark"] .countryCard .status,
html[data-theme="dark"] .countryCard .badge,
html[data-theme="dark"] .countryCard .departBadge,
html[data-theme="dark"] .areaHumanCard .status,
html[data-theme="dark"] .areaHumanCard .badge,
html[data-theme="dark"] .areaHumanCard .departBadge,
html[data-theme="dark"] .globalLaunchRadar .departBadge {
  color: #052e2b !important;
  background: linear-gradient(135deg, #ffffff, #99f6e4 52%, #fde68a) !important;
  border-color: rgba(255, 255, 255, .72) !important;
  box-shadow: 0 8px 18px rgba(0, 0, 0, .32) !important;
  font-weight: 950 !important;
}

html[data-theme="dark"] .mobileQuickTasks button,
[data-theme="dark"] .mobileQuickTasks button {
  color: #f8fafc !important;
  background: linear-gradient(145deg, rgba(15, 23, 42, .98), rgba(9, 16, 28, .98)) !important;
  border: 1px solid rgba(94, 234, 212, .42) !important;
  border-left: 4px solid #5eead4 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 12px 28px rgba(0, 0, 0, .32) !important;
}

html[data-theme="dark"] .mobileQuickTasks button span,
[data-theme="dark"] .mobileQuickTasks button span {
  color: #ffffff !important;
  font-weight: 950 !important;
}

html[data-theme="dark"] .mobileQuickTasks button small,
[data-theme="dark"] .mobileQuickTasks button small {
  color: #dbeafe !important;
  font-weight: 750 !important;
}

html[data-theme="dark"] .mobileQuickTasks button .glyph,
[data-theme="dark"] .mobileQuickTasks button .glyph {
  display: inline-grid !important;
  place-items: center !important;
  width: 34px !important;
  height: 34px !important;
  color: #052e2b !important;
  background: linear-gradient(135deg, #67e8f9, #facc15) !important;
  border: 1px solid rgba(255, 255, 255, .60) !important;
  border-radius: 8px !important;
}

@media (max-width: 900px) {
  html[data-theme="dark"] .stepGrid > button,
  html[data-theme="dark"] .nextActions > span,
  html[data-theme="dark"] .mobileQuickTasks button,
  [data-theme="dark"] .mobileQuickTasks button {
    min-height: 104px;
  }
}

/* Traveler page section rhythm: make each workstation area feel intentional. */
.formView:has(.tripDecision) > h2 {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  width: fit-content;
  max-width: 100%;
  margin: 28px 0 8px;
  padding: 10px 16px 10px 14px;
  color: var(--ink);
  font-size: clamp(22px, 2.1vw, 30px);
  line-height: 1.18;
  letter-spacing: 0;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--teal) 14%, var(--card)), color-mix(in srgb, var(--sand) 28%, var(--card)));
  border: 1px solid color-mix(in srgb, var(--teal) 28%, var(--line));
  border-left: 6px solid var(--teal);
  border-radius: 16px;
  box-shadow: 0 16px 34px rgba(23, 33, 43, .10);
}

.formView:has(.tripDecision) > h2::before {
  content: "";
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 13px;
  height: 13px;
  background: linear-gradient(135deg, var(--teal), var(--amber));
  border: 3px solid color-mix(in srgb, var(--teal) 12%, var(--card));
  border-radius: 999px;
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--teal) 10%, transparent);
}

.formView:has(.tripDecision) > h2 + p {
  max-width: 760px;
  margin: 0 0 22px;
  padding-left: 18px;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.72;
  border-left: 2px solid color-mix(in srgb, var(--teal) 28%, transparent);
}

.formView:has(.tripDecision) .decisionStrip.tripDecision,
.formView:has(.tripDecision) .tripSummary,
.formView:has(.tripDecision) .tripFilters {
  margin-top: 16px;
}

.formView:has(.tripDecision) .empty {
  margin: 14px 0 4px;
  padding: 18px 20px;
  color: var(--muted);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--sky) 22%, var(--card)), var(--card));
  border: 1px solid color-mix(in srgb, var(--line) 78%, var(--teal));
  border-radius: 14px;
}

[data-theme="dark"] .formView:has(.tripDecision) > h2 {
  color: #ffffff;
  background:
    linear-gradient(135deg, rgba(94, 234, 212, .18), rgba(247, 200, 115, .12)),
    rgba(15, 23, 42, .92);
  border-color: rgba(94, 234, 212, .36);
  border-left-color: #5eead4;
  box-shadow: 0 16px 40px rgba(0, 0, 0, .30);
}

[data-theme="dark"] .formView:has(.tripDecision) > h2::before {
  background: linear-gradient(135deg, #67e8f9, #facc15);
  border-color: rgba(15, 23, 42, .95);
  box-shadow: 0 0 0 5px rgba(94, 234, 212, .16);
}

[data-theme="dark"] .formView:has(.tripDecision) > h2 + p {
  color: #dbe7f3;
  border-left-color: rgba(94, 234, 212, .34);
}

[data-theme="dark"] .formView:has(.tripDecision) .empty {
  color: #dbe7f3;
  background:
    linear-gradient(135deg, rgba(30, 41, 59, .96), rgba(15, 23, 42, .92));
  border-color: rgba(148, 163, 184, .26);
}

@media (max-width: 900px) {
  .formView:has(.tripDecision) > h2 {
    width: 100%;
    margin: 22px 0 8px;
    padding: 12px 14px;
    font-size: 23px;
    border-radius: 14px;
  }

  .formView:has(.tripDecision) > h2 + p {
    margin-bottom: 16px;
    padding-left: 14px;
    font-size: .94rem;
  }
}

/* Traveler page fallback: headings are nested in render groups, not always direct children. */
.formView:has(.tripDecision) h2 {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  width: fit-content;
  max-width: 100%;
  margin: 44px 0 10px !important;
  padding: 10px 16px 10px 14px;
  color: var(--ink);
  font-size: clamp(22px, 2.1vw, 30px);
  line-height: 1.18;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--teal) 14%, var(--card)), color-mix(in srgb, var(--sand) 28%, var(--card)));
  border: 1px solid color-mix(in srgb, var(--teal) 28%, var(--line));
  border-left: 6px solid var(--teal);
  border-radius: 16px;
  box-shadow: 0 16px 34px rgba(23, 33, 43, .10);
}

.formView:has(.tripDecision) h2:first-of-type {
  margin-top: 28px !important;
}

.formView:has(.tripDecision) h2::before {
  content: "";
  flex: 0 0 auto;
  width: 13px;
  height: 13px;
  background: linear-gradient(135deg, var(--teal), var(--amber));
  border: 3px solid color-mix(in srgb, var(--teal) 12%, var(--card));
  border-radius: 999px;
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--teal) 10%, transparent);
}

.formView:has(.tripDecision) h2 + p {
  max-width: 760px;
  margin: 0 0 24px !important;
  padding-left: 18px;
  color: var(--muted);
  line-height: 1.72;
  border-left: 2px solid color-mix(in srgb, var(--teal) 28%, transparent);
}

.formView:has(.tripDecision) .empty + h2,
.formView:has(.tripDecision) .empty + * h2 {
  margin-top: 54px !important;
}

.formView:has(.tripDecision) .empty {
  margin-bottom: 28px !important;
}

[data-theme="dark"] .formView:has(.tripDecision) h2 {
  color: #ffffff;
  background:
    linear-gradient(135deg, rgba(94, 234, 212, .18), rgba(247, 200, 115, .12)),
    rgba(15, 23, 42, .92);
  border-color: rgba(94, 234, 212, .36);
  border-left-color: #5eead4;
  box-shadow: 0 16px 40px rgba(0, 0, 0, .30);
}

[data-theme="dark"] .formView:has(.tripDecision) h2::before {
  background: linear-gradient(135deg, #67e8f9, #facc15);
  border-color: rgba(15, 23, 42, .95);
  box-shadow: 0 0 0 5px rgba(94, 234, 212, .16);
}

@media (max-width: 900px) {
  .formView:has(.tripDecision) h2 {
    width: 100%;
    margin-top: 34px !important;
    padding: 12px 14px;
    font-size: 23px;
    border-radius: 14px;
  }

  .formView:has(.tripDecision) h2:first-of-type {
    margin-top: 22px !important;
  }

  .formView:has(.tripDecision) .empty {
    margin-bottom: 24px !important;
  }
}

/* Cross-page section headers: give non-trip pages the same product-level hierarchy. */
.panel > section > .sectionHead,
.formView > .sectionHead,
.mapReadableView > .sectionHead,
.policyQaView > .sectionHead {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  align-items: center;
  min-height: 132px;
  margin: 12px 0 22px;
  padding: 20px 22px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--teal) 12%, var(--card)), color-mix(in srgb, var(--sand) 24%, var(--card)));
  border: 1px solid color-mix(in srgb, var(--teal) 24%, var(--line));
  border-left: 6px solid var(--teal);
  border-radius: 20px;
  box-shadow: var(--shadow-soft);
}

.panel > section > .sectionHead::after,
.formView > .sectionHead::after,
.mapReadableView > .sectionHead::after,
.policyQaView > .sectionHead::after {
  content: "";
  position: absolute;
  inset: 0 0 0 auto;
  width: min(38%, 460px);
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0), var(--card) 88%),
    url("./images/bondmai-hero-handoff.webp") center / cover no-repeat;
  opacity: .18;
  pointer-events: none;
  z-index: -1;
}

.panel > section > .sectionHead h2,
.formView > .sectionHead h2,
.mapReadableView > .sectionHead h2,
.policyQaView > .sectionHead h2 {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 8px;
  color: var(--ink);
  font-size: clamp(26px, 2.5vw, 38px);
  line-height: 1.16;
}

.panel > section > .sectionHead h2::before,
.formView > .sectionHead h2::before,
.mapReadableView > .sectionHead h2::before,
.policyQaView > .sectionHead h2::before {
  content: "";
  flex: 0 0 auto;
  width: 13px;
  height: 13px;
  background: linear-gradient(135deg, var(--teal), var(--amber));
  border: 3px solid color-mix(in srgb, var(--teal) 12%, var(--card));
  border-radius: 999px;
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--teal) 10%, transparent);
}

.panel > section > .sectionHead p,
.formView > .sectionHead p,
.mapReadableView > .sectionHead p,
.policyQaView > .sectionHead p {
  max-width: 780px;
  margin: 0;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.72;
}

.panel > section > .sectionHead .buttonRow,
.formView > .sectionHead .buttonRow,
.mapReadableView > .sectionHead .buttonRow,
.policyQaView > .sectionHead .buttonRow {
  position: relative;
  z-index: 1;
}

.formView:not(:has(.tripDecision)) > .sectionHead::after,
.mapReadableView > .sectionHead::after {
  opacity: .24;
}

[data-theme="dark"] .panel > section > .sectionHead,
[data-theme="dark"] .formView > .sectionHead,
[data-theme="dark"] .mapReadableView > .sectionHead,
[data-theme="dark"] .policyQaView > .sectionHead {
  background:
    linear-gradient(135deg, rgba(94, 234, 212, .16), rgba(247, 200, 115, .10)),
    rgba(15, 23, 42, .92);
  border-color: rgba(94, 234, 212, .34);
  border-left-color: #5eead4;
  box-shadow: 0 16px 40px rgba(0, 0, 0, .30);
}

[data-theme="dark"] .panel > section > .sectionHead::after,
[data-theme="dark"] .formView > .sectionHead::after,
[data-theme="dark"] .mapReadableView > .sectionHead::after,
[data-theme="dark"] .policyQaView > .sectionHead::after {
  background:
    linear-gradient(90deg, rgba(8, 13, 21, 0), rgba(15, 23, 42, .98) 88%),
    url("./images/bondmai-hero-handoff.webp") center / cover no-repeat;
  opacity: .24;
}

[data-theme="dark"] .panel > section > .sectionHead h2,
[data-theme="dark"] .formView > .sectionHead h2,
[data-theme="dark"] .mapReadableView > .sectionHead h2,
[data-theme="dark"] .policyQaView > .sectionHead h2 {
  color: #ffffff;
}

[data-theme="dark"] .panel > section > .sectionHead p,
[data-theme="dark"] .formView > .sectionHead p,
[data-theme="dark"] .mapReadableView > .sectionHead p,
[data-theme="dark"] .policyQaView > .sectionHead p {
  color: #dbe7f3;
}

@media (max-width: 900px) {
  .panel > section > .sectionHead,
  .formView > .sectionHead,
  .mapReadableView > .sectionHead,
  .policyQaView > .sectionHead {
    min-height: 124px;
    margin: 14px 0 18px;
    padding: 18px 16px;
    border-radius: 16px;
  }

  .panel > section > .sectionHead::after,
  .formView > .sectionHead::after,
  .mapReadableView > .sectionHead::after,
  .policyQaView > .sectionHead::after {
    inset: auto 0 0 auto;
    width: 100%;
    height: 58%;
    opacity: .10;
  }

  .panel > section > .sectionHead h2,
  .formView > .sectionHead h2,
  .mapReadableView > .sectionHead h2,
  .policyQaView > .sectionHead h2 {
    font-size: 25px;
  }
}

/* Dark policy matrix: prevent light cards with low-contrast text in rules/dispute pages. */
[data-theme="dark"] .policyMatrix span,
html[data-theme="dark"] .policyMatrix span {
  color: #f8fafc;
  background:
    linear-gradient(135deg, rgba(94, 234, 212, .10), rgba(247, 200, 115, .07)),
    rgba(15, 23, 42, .92);
  border-color: rgba(148, 163, 184, .28);
  border-left-color: #5eead4;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
}

[data-theme="dark"] .policyMatrix span strong,
html[data-theme="dark"] .policyMatrix span strong,
[data-theme="dark"] .policyMatrix span b,
html[data-theme="dark"] .policyMatrix span b {
  color: #ffffff;
}

[data-theme="dark"] .policyMatrix small,
html[data-theme="dark"] .policyMatrix small {
  color: #cbd5e1;
}

/* Section hero image blend: use a full-width soft wash instead of a hard right-side cut. */
.panel > section > .sectionHead::after,
.formView > .sectionHead::after,
.mapReadableView > .sectionHead::after,
.policyQaView > .sectionHead::after {
  inset: 0;
  width: 100%;
  background:
    linear-gradient(90deg, var(--card) 0%, color-mix(in srgb, var(--card) 92%, transparent) 46%, color-mix(in srgb, var(--card) 62%, transparent) 100%),
    linear-gradient(180deg, color-mix(in srgb, var(--card) 96%, transparent), color-mix(in srgb, var(--card) 70%, transparent)),
    url("./images/traveler-hero.jpg") right center / cover no-repeat;
  opacity: .30;
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .38) 36%, #000 100%);
}

[data-theme="dark"] .panel > section > .sectionHead::after,
[data-theme="dark"] .formView > .sectionHead::after,
[data-theme="dark"] .mapReadableView > .sectionHead::after,
[data-theme="dark"] .policyQaView > .sectionHead::after,
html[data-theme="dark"] .panel > section > .sectionHead::after,
html[data-theme="dark"] .formView > .sectionHead::after,
html[data-theme="dark"] .mapReadableView > .sectionHead::after,
html[data-theme="dark"] .policyQaView > .sectionHead::after {
  background:
    linear-gradient(90deg, rgba(15, 23, 42, .98) 0%, rgba(15, 23, 42, .86) 46%, rgba(15, 23, 42, .55) 100%),
    linear-gradient(180deg, rgba(15, 23, 42, .92), rgba(15, 23, 42, .68)),
    url("./images/traveler-hero.jpg") right center / cover no-repeat;
  opacity: .38;
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .34) 30%, #000 100%);
}

/* Self-service flow tabs: stronger contrast for dark mode and active states. */
[data-theme="dark"] .selfServiceTabs button,
html[data-theme="dark"] .selfServiceTabs button {
  color: #dbeafe;
  background: rgba(15, 23, 42, .88);
  border-color: rgba(148, 163, 184, .34);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .03);
}

[data-theme="dark"] .selfServiceTabs button:hover,
html[data-theme="dark"] .selfServiceTabs button:hover {
  color: #ffffff;
  border-color: rgba(94, 234, 212, .55);
  background: rgba(30, 41, 59, .92);
}

[data-theme="dark"] .selfServiceTabs button.active,
html[data-theme="dark"] .selfServiceTabs button.active {
  color: #051b1b;
  background: linear-gradient(135deg, #ccfbf1 0%, #5eead4 58%, #f7c873 100%);
  border-color: rgba(94, 234, 212, .82);
  box-shadow: 0 12px 26px rgba(94, 234, 212, .20);
}

/* Theme parity guard: keep interactive surfaces readable in light, dark, and mobile views. */
.loginStatusChip,
.pwaPrompt,
.filters button,
.selfServiceTabs button,
.accountSectionTabs button,
.mobileDetailTabs button,
.tripSummary button,
.orderSummary button,
.stepGrid button,
.nextActions span,
.heroProduct .matchPreview,
.countryCard .status,
.countryCard .badge,
.countryCard .departBadge,
.status,
.badge,
.departBadge {
  font-weight: 800;
}

.loginStatusChip small,
.loginStatusChip span,
.pwaPrompt p,
.pwaPrompt small {
  color: var(--ink);
}

.softButton,
.tinyButton,
.filters button,
.selfServiceTabs button,
.accountSectionTabs button,
.mobileDetailTabs button {
  color: var(--teal-strong);
  background: color-mix(in srgb, var(--card) 92%, var(--teal) 8%);
  border-color: color-mix(in srgb, var(--line) 72%, var(--teal) 28%);
}

.softButton:hover,
.tinyButton:hover,
.filters button:hover,
.selfServiceTabs button:hover,
.accountSectionTabs button:hover,
.mobileDetailTabs button:hover {
  color: var(--ink);
  border-color: color-mix(in srgb, var(--teal) 64%, var(--line));
  box-shadow: 0 10px 24px color-mix(in srgb, var(--teal) 16%, transparent);
}

.primaryButton,
.primaryCta,
.heroProduct .primaryButton,
.guestAccountEntryActions .primaryButton,
.mobileGuestLoginActions .primaryButton {
  color: #ffffff;
  background: linear-gradient(135deg, #0f8f83 0%, #12b8a6 58%, #1678a7 100%);
  border-color: rgba(255, 255, 255, .22);
  text-shadow: 0 1px 1px rgba(0, 0, 0, .18);
}

.primaryButton:disabled,
.softButton:disabled,
.tinyButton:disabled {
  color: #475569;
  background: #e2e8f0;
  border-color: #cbd5e1;
  text-shadow: none;
  opacity: 1;
}

[data-theme="dark"] .topbar,
html[data-theme="dark"] .topbar {
  background: rgba(8, 13, 21, .96);
  border-bottom-color: rgba(148, 163, 184, .22);
}

[data-theme="dark"] .loginStatusChip,
html[data-theme="dark"] .loginStatusChip,
[data-theme="dark"] .pwaPrompt,
html[data-theme="dark"] .pwaPrompt {
  color: #f8fafc;
  background: rgba(15, 23, 42, .94);
  border-color: rgba(94, 234, 212, .32);
  box-shadow: 0 14px 34px rgba(0, 0, 0, .28);
}

[data-theme="dark"] .loginStatusChip small,
html[data-theme="dark"] .loginStatusChip small,
[data-theme="dark"] .loginStatusChip span,
html[data-theme="dark"] .loginStatusChip span,
[data-theme="dark"] .pwaPrompt p,
html[data-theme="dark"] .pwaPrompt p,
[data-theme="dark"] .pwaPrompt small,
html[data-theme="dark"] .pwaPrompt small {
  color: #dbe7f3;
}

[data-theme="dark"] .loginStatusChip strong,
html[data-theme="dark"] .loginStatusChip strong,
[data-theme="dark"] .pwaPrompt strong,
html[data-theme="dark"] .pwaPrompt strong {
  color: #ffffff;
}

[data-theme="dark"] .softButton,
html[data-theme="dark"] .softButton,
[data-theme="dark"] .tinyButton,
html[data-theme="dark"] .tinyButton,
[data-theme="dark"] .filters button,
html[data-theme="dark"] .filters button,
[data-theme="dark"] .selfServiceTabs button,
html[data-theme="dark"] .selfServiceTabs button,
[data-theme="dark"] .accountSectionTabs button,
html[data-theme="dark"] .accountSectionTabs button,
[data-theme="dark"] .mobileDetailTabs button,
html[data-theme="dark"] .mobileDetailTabs button {
  color: #e2e8f0;
  background: rgba(15, 23, 42, .92);
  border-color: rgba(148, 163, 184, .34);
}

[data-theme="dark"] .softButton:hover,
html[data-theme="dark"] .softButton:hover,
[data-theme="dark"] .tinyButton:hover,
html[data-theme="dark"] .tinyButton:hover,
[data-theme="dark"] .filters button:hover,
html[data-theme="dark"] .filters button:hover,
[data-theme="dark"] .selfServiceTabs button:hover,
html[data-theme="dark"] .selfServiceTabs button:hover,
[data-theme="dark"] .accountSectionTabs button:hover,
html[data-theme="dark"] .accountSectionTabs button:hover,
[data-theme="dark"] .mobileDetailTabs button:hover,
html[data-theme="dark"] .mobileDetailTabs button:hover {
  color: #ffffff;
  background: rgba(30, 41, 59, .96);
  border-color: rgba(94, 234, 212, .62);
}

[data-theme="dark"] .filters button.active,
html[data-theme="dark"] .filters button.active,
[data-theme="dark"] .accountSectionTabs button.active,
html[data-theme="dark"] .accountSectionTabs button.active,
[data-theme="dark"] .mobileDetailTabs button.active,
html[data-theme="dark"] .mobileDetailTabs button.active,
[data-theme="dark"] .tripSummary button.active,
html[data-theme="dark"] .tripSummary button.active {
  color: #06131a;
  background: linear-gradient(135deg, #67e8f9 0%, #5eead4 48%, #f7c873 100%);
  border-color: rgba(255, 255, 255, .36);
  box-shadow: 0 14px 30px rgba(94, 234, 212, .22);
}

[data-theme="dark"] .primaryButton,
html[data-theme="dark"] .primaryButton,
[data-theme="dark"] .primaryCta,
html[data-theme="dark"] .primaryCta,
[data-theme="dark"] .guestAccountEntryActions .primaryButton,
html[data-theme="dark"] .guestAccountEntryActions .primaryButton,
[data-theme="dark"] .mobileGuestLoginActions .primaryButton,
html[data-theme="dark"] .mobileGuestLoginActions .primaryButton {
  color: #04111a;
  background: linear-gradient(135deg, #67e8f9 0%, #5eead4 58%, #f7c873 100%);
  border-color: rgba(255, 255, 255, .32);
  text-shadow: none;
}

[data-theme="dark"] .primaryButton:disabled,
html[data-theme="dark"] .primaryButton:disabled,
[data-theme="dark"] .softButton:disabled,
html[data-theme="dark"] .softButton:disabled,
[data-theme="dark"] .tinyButton:disabled,
html[data-theme="dark"] .tinyButton:disabled {
  color: #cbd5e1;
  background: rgba(51, 65, 85, .92);
  border-color: rgba(100, 116, 139, .62);
  opacity: 1;
}

[data-theme="dark"] input,
html[data-theme="dark"] input,
[data-theme="dark"] select,
html[data-theme="dark"] select,
[data-theme="dark"] textarea,
html[data-theme="dark"] textarea {
  color: #0f172a;
  background: #f8fafc;
  border-color: rgba(226, 232, 240, .88);
}

[data-theme="dark"] input::placeholder,
html[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder,
html[data-theme="dark"] textarea::placeholder {
  color: #64748b;
}

[data-theme="dark"] .status,
html[data-theme="dark"] .status,
[data-theme="dark"] .badge,
html[data-theme="dark"] .badge,
[data-theme="dark"] .departBadge,
html[data-theme="dark"] .departBadge,
[data-theme="dark"] .countryCard .status,
html[data-theme="dark"] .countryCard .status,
[data-theme="dark"] .countryCard .badge,
html[data-theme="dark"] .countryCard .badge,
[data-theme="dark"] .countryCard .departBadge,
html[data-theme="dark"] .countryCard .departBadge {
  color: #08333a;
  background: #dffcf7;
  border-color: rgba(94, 234, 212, .52);
}

@media (max-width: 700px) {
  .loginStatusChip {
    min-width: 0;
  }

  .loginStatusChip small {
    display: block;
    max-width: 122px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .pwaPrompt .buttonRow,
  .filters,
  .selfServiceTabs,
  .accountSectionTabs,
  .mobileDetailTabs {
    gap: 10px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
  }

  .pwaPrompt .buttonRow > *,
  .filters button,
  .selfServiceTabs button,
  .accountSectionTabs button,
  .mobileDetailTabs button {
    flex: 0 0 auto;
    min-height: 42px;
    scroll-snap-align: start;
  }

  .panel > section > .sectionHead,
  .formView > .sectionHead,
  .mapReadableView > .sectionHead,
  .policyQaView > .sectionHead {
    margin: 18px 0 22px;
  }

  .panel > section > .sectionHead h2,
  .formView > .sectionHead h2,
  .mapReadableView > .sectionHead h2,
  .policyQaView > .sectionHead h2 {
    font-size: clamp(24px, 7vw, 30px);
    line-height: 1.12;
  }
}

.rail button:focus,
.tabs button:focus,
.mobileActionBar button:focus {
  outline: none;
}

.rail button:focus-visible,
.tabs button:focus-visible,
.mobileActionBar button:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--teal) 55%, transparent);
  outline-offset: 3px;
}

.rail button:not(.active):focus,
.tabs button:not(.active):focus,
.mobileActionBar button:not(.active):focus {
  background: transparent;
  box-shadow: none;
}

[data-theme="dark"] .rail button:not(.active):focus,
html[data-theme="dark"] .rail button:not(.active):focus,
[data-theme="dark"] .tabs button:not(.active):focus,
html[data-theme="dark"] .tabs button:not(.active):focus,
[data-theme="dark"] .mobileActionBar button:not(.active):focus,
html[data-theme="dark"] .mobileActionBar button:not(.active):focus {
  color: #cbd5e1;
  background: transparent;
  box-shadow: none;
}

/* Wish type cards: keep copy readable instead of squeezed into narrow columns. */
.wishModePanel .wishModeGrid {
  align-items: stretch;
}

.wishModePanel .wishModeCard {
  grid-template-columns: 72px minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-items: center;
  min-height: 132px;
  padding: 22px;
  gap: 8px 18px;
  border-radius: 18px;
}

.wishModePanel .wishModeCard .glyph {
  grid-column: 1;
  grid-row: 1 / span 2;
  width: 64px;
  height: 64px;
  border-radius: 18px;
}

.wishModePanel .wishModeCard .glyph svg {
  width: 34px;
  height: 34px;
}

.wishModePanel .wishModeCard strong,
.wishModePanel .wishModeCard small {
  grid-column: 2;
  max-width: 56ch;
  word-break: normal;
  overflow-wrap: break-word;
  white-space: normal;
}

.wishModePanel .wishModeCard strong {
  font-size: 18px;
  line-height: 1.35;
}

.wishModePanel .wishModeCard small {
  font-size: 14px;
  line-height: 1.72;
}

[data-theme="dark"] .wishModePanel .wishModeCard,
html[data-theme="dark"] .wishModePanel .wishModeCard {
  color: #f8fafc;
  background: rgba(15, 23, 42, .90);
  border-color: rgba(148, 163, 184, .30);
}

[data-theme="dark"] .wishModePanel .wishModeCard strong,
html[data-theme="dark"] .wishModePanel .wishModeCard strong {
  color: #ffffff;
}

[data-theme="dark"] .wishModePanel .wishModeCard small,
html[data-theme="dark"] .wishModePanel .wishModeCard small {
  color: #dbe7f3;
}

[data-theme="dark"] .wishModePanel .wishModeCard.active,
html[data-theme="dark"] .wishModePanel .wishModeCard.active {
  color: #06131a;
  background:
    linear-gradient(135deg, rgba(103, 232, 249, .94), rgba(94, 234, 212, .88) 52%, rgba(247, 200, 115, .82)),
    #ccfbf1;
  border-color: rgba(247, 200, 115, .72);
}

[data-theme="dark"] .wishModePanel .wishModeCard.active strong,
html[data-theme="dark"] .wishModePanel .wishModeCard.active strong,
[data-theme="dark"] .wishModePanel .wishModeCard.active small,
html[data-theme="dark"] .wishModePanel .wishModeCard.active small {
  color: #06131a;
}

@media (max-width: 720px) {
  .wishModePanel .wishModeGrid {
    grid-template-columns: 1fr;
  }

  .wishModePanel .wishModeCard {
    grid-template-columns: 62px minmax(0, 1fr);
    min-height: 116px;
    padding: 18px;
    gap: 6px 14px;
  }

  .wishModePanel .wishModeCard .glyph {
    width: 54px;
    height: 54px;
    border-radius: 16px;
  }

  .wishModePanel .wishModeCard .glyph svg {
    width: 28px;
    height: 28px;
  }

  .wishModePanel .wishModeCard strong {
    font-size: 17px;
  }

  .wishModePanel .wishModeCard small {
    font-size: 13px;
    line-height: 1.65;
  }
}

/* Admin dark parity: mixed admin panels need explicit contrast on every nested card. */
[data-theme="dark"] .adminSectionTabs,
html[data-theme="dark"] .adminSectionTabs {
  background: rgba(15, 23, 42, .92);
  border-color: rgba(148, 163, 184, .34);
}

[data-theme="dark"] .adminSectionTabs button,
html[data-theme="dark"] .adminSectionTabs button {
  color: #dbe7f3;
  background: transparent;
  border-color: transparent;
}

[data-theme="dark"] .adminSectionTabs button:hover,
html[data-theme="dark"] .adminSectionTabs button:hover {
  color: #ffffff;
  background: rgba(30, 41, 59, .96);
  border-color: rgba(94, 234, 212, .42);
}

[data-theme="dark"] .adminSectionTabs button.active,
html[data-theme="dark"] .adminSectionTabs button.active {
  color: #06131a;
  background: linear-gradient(135deg, #ccfbf1 0%, #67e8f9 48%, #f7c873 100%);
  border-color: rgba(255, 255, 255, .38);
  box-shadow: 0 12px 26px rgba(94, 234, 212, .18);
}

[data-theme="dark"] .adminMigrationPanel,
html[data-theme="dark"] .adminMigrationPanel,
[data-theme="dark"] .adminFocusPanel,
html[data-theme="dark"] .adminFocusPanel {
  color: #f8fafc;
  background:
    linear-gradient(135deg, rgba(94, 234, 212, .10), rgba(247, 200, 115, .07)),
    rgba(15, 23, 42, .88);
  border-color: rgba(94, 234, 212, .34);
}

[data-theme="dark"] .adminMigrationPanel h2,
html[data-theme="dark"] .adminMigrationPanel h2,
[data-theme="dark"] .adminMigrationPanel h3,
html[data-theme="dark"] .adminMigrationPanel h3,
[data-theme="dark"] .adminMigrationPanel strong,
html[data-theme="dark"] .adminMigrationPanel strong,
[data-theme="dark"] .adminFocusPanel h2,
html[data-theme="dark"] .adminFocusPanel h2,
[data-theme="dark"] .adminFocusPanel h3,
html[data-theme="dark"] .adminFocusPanel h3,
[data-theme="dark"] .adminFocusPanel strong,
html[data-theme="dark"] .adminFocusPanel strong {
  color: #ffffff;
}

[data-theme="dark"] .adminMigrationPanel p,
html[data-theme="dark"] .adminMigrationPanel p,
[data-theme="dark"] .adminMigrationPanel small,
html[data-theme="dark"] .adminMigrationPanel small,
[data-theme="dark"] .adminFocusPanel p,
html[data-theme="dark"] .adminFocusPanel p,
[data-theme="dark"] .adminFocusPanel small,
html[data-theme="dark"] .adminFocusPanel small {
  color: #dbe7f3;
}

[data-theme="dark"] .adminMigrationSteps article,
html[data-theme="dark"] .adminMigrationSteps article,
[data-theme="dark"] .adminFocusList article,
html[data-theme="dark"] .adminFocusList article,
[data-theme="dark"] .adminWorkstreamActions button,
html[data-theme="dark"] .adminWorkstreamActions button {
  color: #f8fafc;
  background: rgba(15, 23, 42, .94);
  border-color: rgba(148, 163, 184, .30);
}

[data-theme="dark"] .adminMigrationSteps article.done,
html[data-theme="dark"] .adminMigrationSteps article.done {
  background:
    linear-gradient(135deg, rgba(94, 234, 212, .12), rgba(15, 23, 42, .94)),
    rgba(15, 23, 42, .94);
  border-color: rgba(94, 234, 212, .38);
}

[data-theme="dark"] .adminMigrationSteps article.pending,
html[data-theme="dark"] .adminMigrationSteps article.pending {
  background:
    linear-gradient(135deg, rgba(247, 200, 115, .12), rgba(15, 23, 42, .94)),
    rgba(15, 23, 42, .94);
  border-color: rgba(247, 200, 115, .42);
}

[data-theme="dark"] .adminMigrationSteps article span,
html[data-theme="dark"] .adminMigrationSteps article span,
[data-theme="dark"] .adminFocusList span,
html[data-theme="dark"] .adminFocusList span,
[data-theme="dark"] .adminWorkstreamActions button span,
html[data-theme="dark"] .adminWorkstreamActions button span {
  color: #a7f3d0;
}

[data-theme="dark"] .adminMigrationSteps article strong,
html[data-theme="dark"] .adminMigrationSteps article strong,
[data-theme="dark"] .adminFocusList strong,
html[data-theme="dark"] .adminFocusList strong,
[data-theme="dark"] .adminWorkstreamActions button strong,
html[data-theme="dark"] .adminWorkstreamActions button strong {
  color: #ffffff;
}

[data-theme="dark"] .adminMigrationSteps article small,
html[data-theme="dark"] .adminMigrationSteps article small,
[data-theme="dark"] .adminFocusList small,
html[data-theme="dark"] .adminFocusList small {
  color: #dbe7f3;
}

[data-theme="dark"] .adminMigrationPromote,
html[data-theme="dark"] .adminMigrationPromote {
  color: #0f172a;
  background: #f8fafc;
  border-color: rgba(226, 232, 240, .88);
}

[data-theme="dark"] .adminMigrationPromote label,
html[data-theme="dark"] .adminMigrationPromote label,
[data-theme="dark"] .adminMigrationPromote small,
html[data-theme="dark"] .adminMigrationPromote small {
  color: #475569;
}

[data-theme="dark"] .adminMigrationPromote input,
html[data-theme="dark"] .adminMigrationPromote input {
  color: #0f172a;
  background: #ffffff;
  border-color: #cbd5e1;
}

.sensitiveStepHint {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 8px 10px;
  color: var(--teal-strong);
  background: color-mix(in srgb, var(--teal) 10%, var(--card));
  border: 1px solid color-mix(in srgb, var(--teal) 28%, var(--line));
  border-radius: 10px;
  font-weight: 850;
}

.sensitiveStepHint.needsAction {
  color: #7a3d00;
  background: #fff7df;
  border-color: #f6c76a;
}

.sensitiveStepHint.pending {
  color: #0f4c5c;
  background: #e6fbff;
  border-color: #7dd3fc;
}

.sensitiveStepHint.ok {
  color: #064e3b;
  background: #dcfce7;
  border-color: #86efac;
}

.sensitiveStepHint.error {
  color: #7f1d1d;
  background: #fee2e2;
  border-color: #fca5a5;
}

[data-theme="dark"] .sensitiveDialog,
html[data-theme="dark"] .sensitiveDialog {
  color: #f8fafc;
  background: #111827;
  border-color: rgba(148, 163, 184, .36);
}

[data-theme="dark"] .sensitiveDialog h3,
html[data-theme="dark"] .sensitiveDialog h3,
[data-theme="dark"] .sensitiveDialog label,
html[data-theme="dark"] .sensitiveDialog label {
  color: #ffffff;
}

[data-theme="dark"] .sensitiveDialog p,
html[data-theme="dark"] .sensitiveDialog p,
[data-theme="dark"] .sensitiveDialog small,
html[data-theme="dark"] .sensitiveDialog small {
  color: #dbe7f3;
}

[data-theme="dark"] .sensitiveStepHint,
html[data-theme="dark"] .sensitiveStepHint {
  color: #06131a;
  background: linear-gradient(135deg, #ccfbf1, #67e8f9);
  border-color: rgba(255, 255, 255, .32);
}

[data-theme="dark"] .sensitiveStepHint.needsAction,
html[data-theme="dark"] .sensitiveStepHint.needsAction {
  color: #271700;
  background: linear-gradient(135deg, #fde68a, #f7c873);
  border-color: rgba(247, 200, 115, .72);
}

[data-theme="dark"] .sensitiveStepHint.pending,
html[data-theme="dark"] .sensitiveStepHint.pending {
  color: #082f49;
  background: linear-gradient(135deg, #bae6fd, #67e8f9);
  border-color: rgba(125, 211, 252, .82);
}

[data-theme="dark"] .sensitiveStepHint.ok,
html[data-theme="dark"] .sensitiveStepHint.ok {
  color: #052e16;
  background: linear-gradient(135deg, #bbf7d0, #86efac);
  border-color: rgba(134, 239, 172, .82);
}

[data-theme="dark"] .sensitiveStepHint.error,
html[data-theme="dark"] .sensitiveStepHint.error {
  color: #450a0a;
  background: linear-gradient(135deg, #fecaca, #fca5a5);
  border-color: rgba(252, 165, 165, .86);
}

.adminAdvancedIntro {
  display: grid;
  gap: 10px;
  padding: 20px;
  color: var(--ink);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--teal) 12%, transparent), color-mix(in srgb, var(--amber) 10%, transparent)),
    var(--card);
  border: 1px solid color-mix(in srgb, var(--teal) 32%, var(--line));
  border-left: 5px solid var(--teal);
  border-radius: 18px;
  box-shadow: var(--shadow-soft);
}

.adminAdvancedIntro span {
  color: var(--teal-strong);
  font-size: .82rem;
  font-weight: 950;
}

.adminAdvancedIntro h3 {
  margin: 0;
  color: var(--ink);
  font-size: clamp(22px, 3vw, 34px);
}

.adminAdvancedIntro p {
  max-width: 820px;
  margin: 0;
  color: var(--muted);
  line-height: 1.7;
}

[data-theme="dark"] .adminAdvancedIntro,
html[data-theme="dark"] .adminAdvancedIntro {
  color: #f8fafc;
  background:
    linear-gradient(135deg, rgba(94, 234, 212, .14), rgba(247, 200, 115, .08)),
    rgba(15, 23, 42, .92);
  border-color: rgba(94, 234, 212, .34);
  border-left-color: #5eead4;
}

[data-theme="dark"] .adminAdvancedIntro span,
html[data-theme="dark"] .adminAdvancedIntro span {
  color: #67e8f9;
}

[data-theme="dark"] .adminAdvancedIntro h3,
html[data-theme="dark"] .adminAdvancedIntro h3 {
  color: #ffffff;
}

[data-theme="dark"] .adminAdvancedIntro p,
html[data-theme="dark"] .adminAdvancedIntro p {
  color: #dbe7f3;
}

/* Broad dark-mode readability pass for cards that mix light and dark component styles. */
[data-theme="dark"] .panelCard,
html[data-theme="dark"] .panelCard,
[data-theme="dark"] .compactPanel,
html[data-theme="dark"] .compactPanel,
[data-theme="dark"] .adminShellTile,
html[data-theme="dark"] .adminShellTile,
[data-theme="dark"] .adminPriorityQueue,
html[data-theme="dark"] .adminPriorityQueue,
[data-theme="dark"] .adminWorkstreamCard,
html[data-theme="dark"] .adminWorkstreamCard,
[data-theme="dark"] .supportDesk,
html[data-theme="dark"] .supportDesk,
[data-theme="dark"] .riskCommandPanel,
html[data-theme="dark"] .riskCommandPanel,
[data-theme="dark"] .maintenanceDecisionPanel,
html[data-theme="dark"] .maintenanceDecisionPanel,
[data-theme="dark"] .founderOsPanel,
html[data-theme="dark"] .founderOsPanel,
[data-theme="dark"] .adminOpsPanel,
html[data-theme="dark"] .adminOpsPanel {
  color: #f8fafc;
  background: rgba(15, 23, 42, .88);
  border-color: rgba(148, 163, 184, .26);
}

[data-theme="dark"] .panelCard h2,
html[data-theme="dark"] .panelCard h2,
[data-theme="dark"] .panelCard h3,
html[data-theme="dark"] .panelCard h3,
[data-theme="dark"] .panelCard h4,
html[data-theme="dark"] .panelCard h4,
[data-theme="dark"] .panelCard strong,
html[data-theme="dark"] .panelCard strong,
[data-theme="dark"] .compactPanel h3,
html[data-theme="dark"] .compactPanel h3,
[data-theme="dark"] .compactPanel strong,
html[data-theme="dark"] .compactPanel strong,
[data-theme="dark"] .adminShellTile strong,
html[data-theme="dark"] .adminShellTile strong,
[data-theme="dark"] .adminWorkstreamHead strong,
html[data-theme="dark"] .adminWorkstreamHead strong,
[data-theme="dark"] .adminPriorityItem strong,
html[data-theme="dark"] .adminPriorityItem strong {
  color: #ffffff;
}

[data-theme="dark"] .panelCard p,
html[data-theme="dark"] .panelCard p,
[data-theme="dark"] .panelCard small,
html[data-theme="dark"] .panelCard small,
[data-theme="dark"] .panelCard .muted,
html[data-theme="dark"] .panelCard .muted,
[data-theme="dark"] .compactPanel p,
html[data-theme="dark"] .compactPanel p,
[data-theme="dark"] .compactPanel small,
html[data-theme="dark"] .compactPanel small,
[data-theme="dark"] .adminShellTile small,
html[data-theme="dark"] .adminShellTile small,
[data-theme="dark"] .adminWorkstreamHead small,
html[data-theme="dark"] .adminWorkstreamHead small,
[data-theme="dark"] .adminPriorityItem small,
html[data-theme="dark"] .adminPriorityItem small {
  color: #dbe7f3;
}

[data-theme="dark"] .panelCard span,
html[data-theme="dark"] .panelCard span,
[data-theme="dark"] .compactPanel span,
html[data-theme="dark"] .compactPanel span,
[data-theme="dark"] .adminShellTile span,
html[data-theme="dark"] .adminShellTile span {
  color: #a7f3d0;
}

[data-theme="dark"] .miniLedger span,
html[data-theme="dark"] .miniLedger span,
[data-theme="dark"] .supportDesk .miniLedger span,
html[data-theme="dark"] .supportDesk .miniLedger span,
[data-theme="dark"] .adminSummaryStrip > div,
html[data-theme="dark"] .adminSummaryStrip > div,
[data-theme="dark"] .softMetric,
html[data-theme="dark"] .softMetric,
[data-theme="dark"] .adminRevenuePanel .compactPanel,
html[data-theme="dark"] .adminRevenuePanel .compactPanel {
  color: #f8fafc;
  background: rgba(15, 23, 42, .96);
  border: 1px solid rgba(148, 163, 184, .34);
}

[data-theme="dark"] .miniLedger span *,
html[data-theme="dark"] .miniLedger span *,
[data-theme="dark"] .supportDesk .miniLedger span *,
html[data-theme="dark"] .supportDesk .miniLedger span *,
[data-theme="dark"] .adminSummaryStrip > div *,
html[data-theme="dark"] .adminSummaryStrip > div *,
[data-theme="dark"] .softMetric *,
html[data-theme="dark"] .softMetric * {
  color: inherit;
}

[data-theme="dark"] .miniLedger strong,
html[data-theme="dark"] .miniLedger strong,
[data-theme="dark"] .adminSummaryStrip strong,
html[data-theme="dark"] .adminSummaryStrip strong,
[data-theme="dark"] .softMetric strong,
html[data-theme="dark"] .softMetric strong {
  color: #ffffff;
}

[data-theme="dark"] .miniLedger small,
html[data-theme="dark"] .miniLedger small,
[data-theme="dark"] .adminSummaryStrip small,
html[data-theme="dark"] .adminSummaryStrip small,
[data-theme="dark"] .softMetric small,
html[data-theme="dark"] .softMetric small {
  color: #dbe7f3;
}

@media (max-width: 720px) {
  .adminAdvancedIntro {
    padding: 16px;
    border-radius: 16px;
  }
}

/* Admin dark-mode contrast hardening pass. */
[data-theme="dark"] .adminSectionTabs,
html[data-theme="dark"] .adminSectionTabs {
  background: rgba(15, 23, 42, .96);
  border-color: rgba(148, 163, 184, .34);
}

[data-theme="dark"] .adminSectionTabs button,
html[data-theme="dark"] .adminSectionTabs button {
  color: #dbe7f3;
  background: transparent;
}

[data-theme="dark"] .adminSectionTabs button.active,
html[data-theme="dark"] .adminSectionTabs button.active {
  color: #06131a;
  background: linear-gradient(135deg, #ccfbf1, #67e8f9);
  border-color: rgba(255, 255, 255, .36);
  box-shadow: 0 12px 28px rgba(45, 212, 191, .22);
}

[data-theme="dark"] .supportDesk .miniLedger span,
html[data-theme="dark"] .supportDesk .miniLedger span,
[data-theme="dark"] .adminFocusList article,
html[data-theme="dark"] .adminFocusList article,
[data-theme="dark"] .adminPriorityItem,
html[data-theme="dark"] .adminPriorityItem,
[data-theme="dark"] .adminWorkstreamActions button,
html[data-theme="dark"] .adminWorkstreamActions button,
[data-theme="dark"] .adminMigrationPromote,
html[data-theme="dark"] .adminMigrationPromote {
  color: #f8fafc;
  background: rgba(15, 23, 42, .96);
  border-color: rgba(148, 163, 184, .34);
}

[data-theme="dark"] .supportDesk .miniLedger span *,
html[data-theme="dark"] .supportDesk .miniLedger span *,
[data-theme="dark"] .adminFocusList article *,
html[data-theme="dark"] .adminFocusList article *,
[data-theme="dark"] .adminPriorityItem *,
html[data-theme="dark"] .adminPriorityItem *,
[data-theme="dark"] .adminWorkstreamActions button *,
html[data-theme="dark"] .adminWorkstreamActions button *,
[data-theme="dark"] .adminMigrationPromote *,
html[data-theme="dark"] .adminMigrationPromote * {
  color: inherit;
}

[data-theme="dark"] .supportDesk .miniLedger strong,
html[data-theme="dark"] .supportDesk .miniLedger strong,
[data-theme="dark"] .adminFocusList strong,
html[data-theme="dark"] .adminFocusList strong,
[data-theme="dark"] .adminPriorityItem strong,
html[data-theme="dark"] .adminPriorityItem strong,
[data-theme="dark"] .adminWorkstreamActions button strong,
html[data-theme="dark"] .adminWorkstreamActions button strong,
[data-theme="dark"] .adminMigrationPromote strong,
html[data-theme="dark"] .adminMigrationPromote strong,
[data-theme="dark"] .adminMigrationPromote label,
html[data-theme="dark"] .adminMigrationPromote label {
  color: #ffffff;
}

[data-theme="dark"] .supportDesk .miniLedger small,
html[data-theme="dark"] .supportDesk .miniLedger small,
[data-theme="dark"] .adminFocusList small,
html[data-theme="dark"] .adminFocusList small,
[data-theme="dark"] .adminPriorityItem small,
html[data-theme="dark"] .adminPriorityItem small,
[data-theme="dark"] .adminWorkstreamActions button small,
html[data-theme="dark"] .adminWorkstreamActions button small,
[data-theme="dark"] .adminMigrationPromote small,
html[data-theme="dark"] .adminMigrationPromote small,
[data-theme="dark"] .adminMigrationPromote p,
html[data-theme="dark"] .adminMigrationPromote p {
  color: #dbe7f3;
}

[data-theme="dark"] .adminMigrationPromote input,
html[data-theme="dark"] .adminMigrationPromote input,
[data-theme="dark"] .sensitiveDialog input,
html[data-theme="dark"] .sensitiveDialog input,
[data-theme="dark"] .sensitiveDialog textarea,
html[data-theme="dark"] .sensitiveDialog textarea {
  color: #0f172a;
  background: #f8fafc;
  border-color: #94a3b8;
}

[data-theme="dark"] .adminMigrationPromote .tinyButton,
html[data-theme="dark"] .adminMigrationPromote .tinyButton,
[data-theme="dark"] .sensitiveDialog .softButton,
html[data-theme="dark"] .sensitiveDialog .softButton {
  color: #f8fafc;
  background: #334155;
  border-color: rgba(148, 163, 184, .5);
}

[data-theme="dark"] .adminMigrationPromote .tinyButton:disabled,
html[data-theme="dark"] .adminMigrationPromote .tinyButton:disabled,
[data-theme="dark"] .sensitiveDialog button:disabled,
html[data-theme="dark"] .sensitiveDialog button:disabled {
  color: #94a3b8;
  background: #1f2937;
  opacity: 1;
}

/* Founder OS dark-mode readability. */
[data-theme="dark"] .founderMetricGrid span,
html[data-theme="dark"] .founderMetricGrid span,
[data-theme="dark"] .founderColumns > div,
html[data-theme="dark"] .founderColumns > div {
  color: #f8fafc;
  background:
    linear-gradient(135deg, rgba(94, 234, 212, .05), rgba(96, 165, 250, .04)),
    rgba(15, 23, 42, .96);
  border-color: rgba(148, 163, 184, .34);
  border-left-color: #60a5fa;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
}

[data-theme="dark"] .founderMetricGrid span *,
html[data-theme="dark"] .founderMetricGrid span *,
[data-theme="dark"] .founderColumns > div *,
html[data-theme="dark"] .founderColumns > div * {
  color: inherit;
}

[data-theme="dark"] .founderMetricGrid span,
html[data-theme="dark"] .founderMetricGrid span,
[data-theme="dark"] .founderColumns h3,
html[data-theme="dark"] .founderColumns h3,
[data-theme="dark"] .founderColumns strong,
html[data-theme="dark"] .founderColumns strong {
  color: #ffffff;
}

[data-theme="dark"] .founderMetricGrid small,
html[data-theme="dark"] .founderMetricGrid small,
[data-theme="dark"] .founderColumns small,
html[data-theme="dark"] .founderColumns small,
[data-theme="dark"] .founderColumns p,
html[data-theme="dark"] .founderColumns p,
[data-theme="dark"] .founderColumns li,
html[data-theme="dark"] .founderColumns li {
  color: #dbe7f3;
}

[data-theme="dark"] .founderColumns hr,
html[data-theme="dark"] .founderColumns hr {
  border-color: rgba(148, 163, 184, .32);
}

[data-theme="dark"] .founderMetric.healthy,
html[data-theme="dark"] .founderMetric.healthy {
  border-left-color: #34d399;
}

[data-theme="dark"] .founderMetric.watch,
html[data-theme="dark"] .founderMetric.watch {
  border-left-color: #fbbf24;
}

[data-theme="dark"] .founderMetric.risk,
html[data-theme="dark"] .founderMetric.risk {
  border-left-color: #fb7185;
}

/* Admin nested-card dark-mode sweep: readiness, ops, maintenance and generic admin grids. */
[data-theme="dark"] .readinessGrid span,
html[data-theme="dark"] .readinessGrid span,
[data-theme="dark"] .maintenanceDecisionGrid article,
html[data-theme="dark"] .maintenanceDecisionGrid article,
[data-theme="dark"] .maintenanceDecisionGrid article.needsAction,
html[data-theme="dark"] .maintenanceDecisionGrid article.needsAction,
[data-theme="dark"] .launchReadinessPanel,
html[data-theme="dark"] .launchReadinessPanel,
[data-theme="dark"] .launchReadinessGrid span,
html[data-theme="dark"] .launchReadinessGrid span,
[data-theme="dark"] .adminOpsPanel .readinessGrid span,
html[data-theme="dark"] .adminOpsPanel .readinessGrid span,
[data-theme="dark"] .adminOpsPanel .adminColumns > div,
html[data-theme="dark"] .adminOpsPanel .adminColumns > div {
  color: #f8fafc;
  background:
    linear-gradient(135deg, rgba(94, 234, 212, .045), rgba(251, 191, 36, .035)),
    rgba(15, 23, 42, .96);
  border-color: rgba(148, 163, 184, .34);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
}

[data-theme="dark"] .readinessGrid span *,
html[data-theme="dark"] .readinessGrid span *,
[data-theme="dark"] .maintenanceDecisionGrid article *,
html[data-theme="dark"] .maintenanceDecisionGrid article *,
[data-theme="dark"] .launchReadinessGrid span *,
html[data-theme="dark"] .launchReadinessGrid span *,
[data-theme="dark"] .adminOpsPanel .adminColumns > div *,
html[data-theme="dark"] .adminOpsPanel .adminColumns > div * {
  color: inherit;
}

[data-theme="dark"] .readinessGrid strong,
html[data-theme="dark"] .readinessGrid strong,
[data-theme="dark"] .maintenanceDecisionGrid h4,
html[data-theme="dark"] .maintenanceDecisionGrid h4,
[data-theme="dark"] .maintenanceDecisionGrid strong,
html[data-theme="dark"] .maintenanceDecisionGrid strong,
[data-theme="dark"] .launchReadinessGrid strong,
html[data-theme="dark"] .launchReadinessGrid strong,
[data-theme="dark"] .adminOpsPanel .adminColumns h3,
html[data-theme="dark"] .adminOpsPanel .adminColumns h3,
[data-theme="dark"] .adminOpsPanel .adminColumns strong,
html[data-theme="dark"] .adminOpsPanel .adminColumns strong {
  color: #ffffff;
}

[data-theme="dark"] .readinessGrid small,
html[data-theme="dark"] .readinessGrid small,
[data-theme="dark"] .maintenanceDecisionGrid p,
html[data-theme="dark"] .maintenanceDecisionGrid p,
[data-theme="dark"] .maintenanceDecisionGrid small,
html[data-theme="dark"] .maintenanceDecisionGrid small,
[data-theme="dark"] .launchReadinessGrid small,
html[data-theme="dark"] .launchReadinessGrid small,
[data-theme="dark"] .adminOpsPanel .adminColumns p,
html[data-theme="dark"] .adminOpsPanel .adminColumns p,
[data-theme="dark"] .adminOpsPanel .adminColumns small,
html[data-theme="dark"] .adminOpsPanel .adminColumns small {
  color: #dbe7f3;
}

[data-theme="dark"] .readinessGrid .ready-done,
html[data-theme="dark"] .readinessGrid .ready-done,
[data-theme="dark"] .maintenanceDecisionGrid article:not(.needsAction),
html[data-theme="dark"] .maintenanceDecisionGrid article:not(.needsAction) {
  border-left-color: #34d399;
}

[data-theme="dark"] .readinessGrid .ready-warn,
html[data-theme="dark"] .readinessGrid .ready-warn,
[data-theme="dark"] .maintenanceDecisionGrid article.needsAction,
html[data-theme="dark"] .maintenanceDecisionGrid article.needsAction {
  border-left-color: #fbbf24;
}

[data-theme="dark"] .readinessGrid .ready-todo,
html[data-theme="dark"] .readinessGrid .ready-todo {
  border-left-color: #60a5fa;
}

[data-theme="dark"] .maintenanceDecisionGrid span,
html[data-theme="dark"] .maintenanceDecisionGrid span {
  color: #06131a;
  background: #ccfbf1;
}

[data-theme="dark"] .maintenanceDecisionGrid .needsAction span,
html[data-theme="dark"] .maintenanceDecisionGrid .needsAction span {
  color: #271700;
  background: #fde68a;
}

/* Admin overview icons should read as semantic signals, not internal abbreviations. */
.adminPriorityItem b,
.adminWorkstreamHead b {
  display: grid;
  place-items: center;
  width: 42px;
  min-width: 42px;
  height: 42px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--teal) 14%, var(--card));
  border: 1px solid color-mix(in srgb, var(--teal) 32%, var(--line));
  color: var(--teal-strong);
  font-family: "Segoe UI Symbol", "Apple Color Emoji", "Segoe UI Emoji", system-ui, sans-serif;
  font-size: 22px;
  font-weight: 900;
  line-height: 1;
  box-shadow: 0 10px 24px rgba(15, 118, 110, .08);
}

.adminPriorityItem.warning b {
  background: color-mix(in srgb, var(--warning) 20%, var(--card));
  border-color: color-mix(in srgb, var(--warning) 45%, var(--line));
  color: #7c2d12;
}

.adminPriorityItem.danger b {
  background: color-mix(in srgb, var(--danger) 18%, var(--card));
  border-color: color-mix(in srgb, var(--danger) 45%, var(--line));
  color: #991b1b;
}

[data-theme="dark"] .adminPriorityItem b,
html[data-theme="dark"] .adminPriorityItem b,
[data-theme="dark"] .adminWorkstreamHead b,
html[data-theme="dark"] .adminWorkstreamHead b {
  background: linear-gradient(135deg, #ccfbf1 0%, #67e8f9 100%);
  border-color: rgba(255, 255, 255, .28);
  color: #06131a;
  box-shadow: 0 14px 28px rgba(45, 212, 191, .18);
}

[data-theme="dark"] .adminPriorityItem.warning b,
html[data-theme="dark"] .adminPriorityItem.warning b {
  background: linear-gradient(135deg, #fde68a 0%, #f59e0b 100%);
  color: #241000;
}

[data-theme="dark"] .adminPriorityItem.danger b,
html[data-theme="dark"] .adminPriorityItem.danger b {
  background: linear-gradient(135deg, #fecaca 0%, #ef4444 100%);
  color: #fff;
}

/* Wish composer refresh: turn the purchase request flow into a cleaner marketplace-style workspace. */
.formView:has(.wishForm) {
  max-width: 1500px;
}

.formView:has(.wishForm) .sectionHead {
  margin-bottom: 26px;
}

.wishForm {
  gap: 18px 26px;
}

.wishForm > label:not(.wide):not(.wishPhotoUpload),
.wishForm > .field,
.wishForm > .inputField,
.wishPhotoUpload,
.draftPanel,
.duplicateBox,
.wishClueCoach,
.wishCostBreakdown,
.wishLivePreview,
.productPreviewCard,
.restrictionInlineNotice,
.riskBox,
.estimate {
  border-radius: 20px;
}

.wishForm > label:not(.wide):not(.wishPhotoUpload),
.wishForm > .field,
.wishForm > .inputField {
  padding: 14px;
  background: rgba(255, 255, 255, .80);
  border: 1px solid color-mix(in srgb, var(--line) 78%, var(--teal) 22%);
  box-shadow: 0 12px 30px rgba(15, 23, 42, .045);
}

.wishForm label {
  color: color-mix(in srgb, var(--ink) 76%, var(--muted));
}

.wishForm input,
.wishForm select,
.wishForm textarea {
  min-height: 52px;
  border-radius: 14px;
  border-color: color-mix(in srgb, var(--line) 78%, var(--teal) 22%);
  font-weight: 800;
}

.wishForm textarea {
  min-height: 118px;
}

.wishLivePreview {
  grid-template-columns: 1fr;
  gap: 16px;
  padding: 16px;
  border-radius: 24px;
  border-color: color-mix(in srgb, var(--teal) 24%, var(--line));
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .94), rgba(237, 253, 249, .88));
  box-shadow: 0 22px 58px rgba(15, 23, 42, .10);
}

.wishLivePreview .wishVisual {
  min-height: 280px;
  border-radius: 20px;
}

.wishLivePreviewBody {
  align-content: start;
  padding: 2px 4px 4px;
}

.wishLivePreviewBody h3 {
  font-size: clamp(22px, 2vw, 30px);
  line-height: 1.18;
}

.wishPhotoUpload {
  padding: 18px;
  background:
    linear-gradient(135deg, rgba(236, 253, 245, .92), rgba(255, 251, 235, .70));
  border: 1px dashed color-mix(in srgb, var(--teal) 48%, var(--line));
}

.wishClueCoach {
  padding: 18px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .96), rgba(236, 253, 245, .88));
}

.wishClueCoachHead strong {
  font-size: clamp(18px, 1.8vw, 24px);
}

.wishClueGrid article {
  min-height: 132px;
  border-radius: 16px;
  box-shadow: 0 10px 26px rgba(15, 23, 42, .045);
}

.wishReadiness {
  padding: 18px;
  border-radius: 20px;
  background:
    linear-gradient(135deg, rgba(255, 251, 235, .78), rgba(255, 255, 255, .94));
}

.wishReadiness.ready,
.wishReadiness.state-ready {
  background:
    linear-gradient(135deg, rgba(236, 253, 245, .90), rgba(255, 255, 255, .96));
}

.wishReadinessPills span,
.quickHintRow button {
  min-height: 38px;
  border-radius: 999px;
}

.wishCostBreakdown {
  padding: 18px;
  border-radius: 24px;
  border-color: color-mix(in srgb, var(--teal) 28%, var(--line));
  background:
    linear-gradient(135deg, rgba(236, 253, 245, .92), rgba(255, 251, 235, .72));
}

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

.wishCostGrid span,
.wishCostNotice {
  border-radius: 16px;
}

.wishCostNotice {
  background: rgba(255, 251, 235, .82);
}

.wishInspirationStrip {
  gap: 16px;
  margin: 20px 0;
}

.wishInspirationPhoto {
  min-height: 220px;
  border-radius: 22px;
}

.wishInspirationCards article {
  border-radius: 18px;
  padding: 16px;
}

.splitAction {
  position: sticky;
  bottom: 18px;
  z-index: 10;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--teal) 24%, var(--line));
  border-radius: 20px;
  background: rgba(255, 255, 255, .90);
  box-shadow: 0 18px 48px rgba(15, 23, 42, .12);
  backdrop-filter: blur(12px);
}

.wishActionStatus {
  border-radius: 18px;
}

@media (min-width: 1020px) {
  .wishForm > .wishLivePreview {
    top: 112px;
  }
}

[data-theme="dark"] .wishForm > label:not(.wide):not(.wishPhotoUpload),
html[data-theme="dark"] .wishForm > label:not(.wide):not(.wishPhotoUpload),
[data-theme="dark"] .wishForm > .field,
html[data-theme="dark"] .wishForm > .field,
[data-theme="dark"] .wishForm > .inputField,
html[data-theme="dark"] .wishForm > .inputField,
[data-theme="dark"] .wishLivePreview,
html[data-theme="dark"] .wishLivePreview,
[data-theme="dark"] .wishPhotoUpload,
html[data-theme="dark"] .wishPhotoUpload,
[data-theme="dark"] .wishClueCoach,
html[data-theme="dark"] .wishClueCoach,
[data-theme="dark"] .wishCostBreakdown,
html[data-theme="dark"] .wishCostBreakdown,
[data-theme="dark"] .splitAction,
html[data-theme="dark"] .splitAction {
  color: #f8fafc;
  background:
    linear-gradient(135deg, rgba(94, 234, 212, .08), rgba(247, 200, 115, .05)),
    rgba(15, 23, 42, .90);
  border-color: rgba(148, 163, 184, .30);
}

[data-theme="dark"] .wishForm label,
html[data-theme="dark"] .wishForm label,
[data-theme="dark"] .wishLivePreviewBody h3,
html[data-theme="dark"] .wishLivePreviewBody h3,
[data-theme="dark"] .wishClueCoachHead strong,
html[data-theme="dark"] .wishClueCoachHead strong,
[data-theme="dark"] .wishCostHead strong,
html[data-theme="dark"] .wishCostHead strong,
[data-theme="dark"] .wishCostGrid b,
html[data-theme="dark"] .wishCostGrid b,
[data-theme="dark"] .wishCostGrid strong,
html[data-theme="dark"] .wishCostGrid strong {
  color: #ffffff;
}

[data-theme="dark"] .wishLivePreviewBody p,
html[data-theme="dark"] .wishLivePreviewBody p,
[data-theme="dark"] .wishClueCoachHead small,
html[data-theme="dark"] .wishClueCoachHead small,
[data-theme="dark"] .wishCostHead span,
html[data-theme="dark"] .wishCostHead span,
[data-theme="dark"] .wishCostHead small,
html[data-theme="dark"] .wishCostHead small,
[data-theme="dark"] .wishCostGrid small,
html[data-theme="dark"] .wishCostGrid small,
[data-theme="dark"] .wishCostNotice small,
html[data-theme="dark"] .wishCostNotice small {
  color: #dbe7f3;
}

[data-theme="dark"] .wishCostGrid span,
html[data-theme="dark"] .wishCostGrid span,
[data-theme="dark"] .wishCostNotice,
html[data-theme="dark"] .wishCostNotice,
[data-theme="dark"] .wishClueGrid article,
html[data-theme="dark"] .wishClueGrid article {
  color: #f8fafc;
  background: rgba(15, 23, 42, .92);
  border-color: rgba(148, 163, 184, .30);
}

[data-theme="dark"] .wishReadiness,
html[data-theme="dark"] .wishReadiness {
  color: #f8fafc;
  background: rgba(15, 23, 42, .90);
  border-color: rgba(148, 163, 184, .30);
  border-left-color: #fbbf24;
}

[data-theme="dark"] .wishReadiness.ready,
html[data-theme="dark"] .wishReadiness.ready,
[data-theme="dark"] .wishReadiness.state-ready,
html[data-theme="dark"] .wishReadiness.state-ready {
  border-left-color: #5eead4;
}

@media (max-width: 900px) {
  .wishForm {
    gap: 14px;
  }

  .wishForm > label:not(.wide):not(.wishPhotoUpload),
  .wishForm > .field,
  .wishForm > .inputField,
  .wishPhotoUpload,
  .wishClueCoach,
  .wishCostBreakdown,
  .wishLivePreview {
    padding: 14px;
    border-radius: 18px;
  }

  .wishLivePreview .wishVisual {
    min-height: 220px;
  }

  .wishClueGrid,
  .wishCostGrid,
  .wishInspirationStrip,
  .wishInspirationCards {
    grid-template-columns: 1fr;
  }

  .splitAction {
    position: relative;
    bottom: auto;
    grid-template-columns: 1fr;
    margin-top: 4px;
  }
}

/* Wish composer usability guard: previews and submit actions must never float over inputs. */
.wishForm > .wishLivePreview,
.wishForm > .splitAction {
  position: static !important;
  top: auto !important;
  bottom: auto !important;
  z-index: auto;
}

.wishForm > .splitAction {
  margin-top: 18px;
}

@media (min-width: 1020px) {
  .wishForm > .wishLivePreview {
    align-self: start;
  }
}

/* Order tracking refresh: make status, next actions, and timeline scan like a workflow board. */
.ordersView .orderSummary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  padding: 12px;
  margin: 10px 0 16px;
  background: rgba(236, 253, 245, .54);
  border: 1px solid rgba(20, 184, 166, .18);
  border-radius: 24px;
}

.ordersView .orderSummary button {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 8px;
  min-height: 92px;
  padding: 16px;
  color: #17212b;
  background: rgba(255, 255, 255, .96);
  border: 1px solid rgba(148, 163, 184, .32);
  border-radius: 20px;
  box-shadow: 0 14px 34px rgba(15, 23, 42, .06);
}

.ordersView .orderSummary button:hover {
  transform: translateY(-1px);
  border-color: rgba(20, 184, 166, .42);
  box-shadow: 0 18px 42px rgba(15, 23, 42, .10);
}

.ordersView .orderSummary button.active {
  color: #062f2b;
  background: linear-gradient(135deg, #dffcf4 0%, #fff2bd 100%);
  border-color: rgba(20, 184, 166, .54);
  box-shadow: 0 18px 44px rgba(20, 184, 166, .14);
}

.ordersView .orderSummary button strong {
  color: inherit;
  font-size: .94rem;
  line-height: 1.2;
}

.ordersView .orderSummary small {
  color: #08756b;
  font-size: clamp(1.35rem, 2.5vw, 2.1rem);
  line-height: 1;
  font-weight: 950;
}

.ordersView .orderFilters {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) repeat(2, minmax(150px, 210px));
  gap: 12px;
  align-items: center;
  padding: 14px;
  margin: 0 0 18px;
  background: rgba(255, 255, 255, .90);
  border: 1px solid rgba(148, 163, 184, .28);
  border-radius: 22px;
  box-shadow: 0 16px 44px rgba(15, 23, 42, .06);
}

.ordersView .orderFilters .searchInput,
.ordersView .orderFilters select {
  min-height: 48px;
  border-radius: 16px;
  font-weight: 760;
}

.ordersView .orderFocusRail {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: 4px 0 20px;
}

.ordersView .orderFocusItem {
  grid-template-columns: 58px minmax(0, 1fr) auto;
  min-height: 108px;
  gap: 14px;
  padding: 16px;
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .98), rgba(240, 253, 250, .76));
  border: 1px solid rgba(148, 163, 184, .28);
  border-radius: 24px;
  box-shadow: 0 16px 40px rgba(15, 23, 42, .06);
}

.ordersView .orderFocusItem b {
  width: 58px;
  height: 58px;
  color: #063b32;
  background: linear-gradient(135deg, #c8fff4, #fff0a8);
  border: 1px solid rgba(20, 184, 166, .32);
  border-radius: 18px;
  font-size: 22px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .65);
}

.ordersView .orderFocusItem strong {
  margin-top: 2px;
  color: #132333;
  font-size: 1.02rem;
}

.ordersView .orderFocusItem small {
  color: #526274;
  font-size: .88rem;
}

.ordersView .orderFocusItem em {
  align-self: start;
  padding: 6px 9px;
  color: #075e55;
  background: #dffcf4;
  border: 1px solid rgba(20, 184, 166, .26);
  border-radius: 999px;
  font-size: .76rem;
  font-weight: 950;
}

.ordersView .orderCard {
  position: relative;
  padding: 18px;
  overflow: hidden;
  background: rgba(255, 255, 255, .96);
  border: 1px solid rgba(148, 163, 184, .30);
  border-radius: 24px;
  box-shadow: 0 18px 46px rgba(15, 23, 42, .07);
}

.ordersView .orderCard::before {
  width: 6px;
  border-radius: 999px;
}

.ordersView .orderCard h3,
.ordersView .orderCard strong {
  color: #102033;
}

.ordersView .orderCard p,
.ordersView .orderCard small,
.ordersView .orderCard .note {
  color: #526274;
}

.ordersView .orderTimelineWrap {
  gap: 12px;
  padding: 14px;
  margin: 16px 0;
  background: linear-gradient(135deg, rgba(240, 253, 250, .84), rgba(255, 255, 255, .92));
  border: 1px solid rgba(20, 184, 166, .20);
  border-radius: 22px;
}

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

.ordersView .orderTimelineSummary span {
  min-height: 70px;
  padding: 13px;
  color: #526274;
  background: rgba(255, 255, 255, .94);
  border-color: rgba(148, 163, 184, .30);
  border-radius: 18px;
}

.ordersView .orderTimelineSummary strong {
  color: #102033;
  font-size: 1rem;
}

.ordersView .orderTimelineRail {
  gap: 10px;
  padding: 14px;
  background: rgba(255, 255, 255, .95);
  border-color: rgba(148, 163, 184, .28);
  border-radius: 20px;
}

.ordersView .orderTimelineNode {
  min-height: 86px;
  padding: 10px 8px 10px 24px;
  color: #526274;
  background: rgba(248, 250, 252, .82);
  border: 1px solid rgba(148, 163, 184, .22);
  border-radius: 16px;
}

.ordersView .orderTimelineNode::before {
  left: 12px;
  top: 30px;
  bottom: -10px;
  background: rgba(148, 163, 184, .34);
}

.ordersView .orderTimelineNode i {
  left: 7px;
  top: 15px;
  width: 12px;
  height: 12px;
}

.ordersView .orderTimelineNode strong {
  color: #102033;
  font-size: .86rem;
}

.ordersView .orderTimelineNode small {
  color: #526274;
}

.ordersView .timelineBox {
  padding: 16px;
  background: rgba(255, 255, 255, .94);
  border: 1px solid rgba(148, 163, 184, .28);
  border-radius: 22px;
}

.ordersView .timelineItem {
  background: rgba(248, 250, 252, .92);
  border-radius: 16px;
}

[data-theme="dark"] .ordersView .orderSummary,
[data-theme="dark"] .ordersView .orderFilters,
[data-theme="dark"] .ordersView .orderTimelineWrap,
[data-theme="dark"] .ordersView .timelineBox {
  color: #f8fafc;
  background: rgba(15, 23, 42, .86);
  border-color: rgba(148, 163, 184, .24);
  box-shadow: 0 20px 52px rgba(0, 0, 0, .22);
}

[data-theme="dark"] .ordersView .orderSummary button,
[data-theme="dark"] .ordersView .orderFocusItem,
[data-theme="dark"] .ordersView .orderCard,
[data-theme="dark"] .ordersView .orderTimelineSummary span,
[data-theme="dark"] .ordersView .orderTimelineRail,
[data-theme="dark"] .ordersView .orderTimelineNode,
[data-theme="dark"] .ordersView .timelineItem {
  color: #f8fafc;
  background: rgba(15, 23, 42, .92);
  border-color: rgba(148, 163, 184, .26);
}

[data-theme="dark"] .ordersView .orderSummary button.active {
  color: #08111a;
  background: linear-gradient(135deg, #5eead4, #f7c873);
  border-color: rgba(255, 255, 255, .18);
}

[data-theme="dark"] .ordersView .orderSummary button.active small {
  color: #063b32;
}

[data-theme="dark"] .ordersView .orderSummary button:not(.active) small,
[data-theme="dark"] .ordersView .orderFocusItem em {
  color: #5eead4;
}

[data-theme="dark"] .ordersView .orderFocusItem b {
  color: #07111b;
  background: linear-gradient(135deg, #5eead4, #f7c873);
}

[data-theme="dark"] .ordersView .orderFocusItem strong,
[data-theme="dark"] .ordersView .orderCard h3,
[data-theme="dark"] .ordersView .orderCard strong,
[data-theme="dark"] .ordersView .orderTimelineSummary strong,
[data-theme="dark"] .ordersView .orderTimelineNode strong,
[data-theme="dark"] .ordersView .timelineItem strong {
  color: #f8fafc;
}

[data-theme="dark"] .ordersView .orderFocusItem small,
[data-theme="dark"] .ordersView .orderCard p,
[data-theme="dark"] .ordersView .orderCard small,
[data-theme="dark"] .ordersView .orderCard .note,
[data-theme="dark"] .ordersView .orderTimelineSummary span,
[data-theme="dark"] .ordersView .orderTimelineNode,
[data-theme="dark"] .ordersView .orderTimelineNode small,
[data-theme="dark"] .ordersView .timelineItem small,
[data-theme="dark"] .ordersView .timelineItem span {
  color: #cbd5e1;
}

@media (max-width: 900px) {
  .ordersView .orderSummary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 10px;
    border-radius: 20px;
  }

  .ordersView .orderSummary button {
    min-height: 78px;
    padding: 13px;
    border-radius: 16px;
  }

  .ordersView .orderFilters,
  .ordersView .orderFocusRail,
  .ordersView .orderTimelineSummary {
    grid-template-columns: 1fr;
  }

  .ordersView .orderFocusItem {
    grid-template-columns: 52px minmax(0, 1fr);
    min-height: 96px;
    border-radius: 20px;
  }

  .ordersView .orderFocusItem b {
    width: 52px;
    height: 52px;
  }

  .ordersView .orderFocusItem em {
    grid-column: 2;
    justify-self: start;
  }

  .ordersView .orderTimelineRail {
    grid-template-columns: 1fr;
  }
}

/* Admin dashboard consolidation: keep operations dense but readable across light, dark, and mobile. */
.adminShell {
  gap: 22px;
}

.adminShellHero,
.adminPriorityQueue,
.adminFocusPanel,
.adminMigrationPanel,
.adminAdvancedIntro,
.founderOsPanel,
.adminOpsPanel,
.maintenanceDecisionPanel,
.readinessPanel,
.adminRevenuePanel {
  border-radius: 26px;
}

.adminShellHero {
  padding: clamp(18px, 2.5vw, 28px);
  background:
    linear-gradient(135deg, rgba(236, 253, 245, .92), rgba(255, 251, 235, .72)),
    var(--card);
  border-color: rgba(20, 184, 166, .24);
  border-left-width: 6px;
}

.adminShellGrid {
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px;
}

.adminShellTile,
.adminTile,
.adminColumns > div,
.adminSummaryStrip > div,
.readinessGrid span,
.maintenanceDecisionGrid article,
.founderMetricGrid span,
.founderColumns > div,
.launchReadinessGrid span,
.softMetric,
.miniLedger span {
  border-radius: 20px;
}

.adminShellTile,
.adminTile {
  min-height: 118px;
  padding: 18px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .98), rgba(248, 250, 252, .92));
  border-color: rgba(148, 163, 184, .28);
  box-shadow: 0 16px 42px rgba(15, 23, 42, .06);
}

.adminShellTile span,
.adminTile span,
.adminFocusList span,
.readinessGrid span > span,
.maintenanceDecisionGrid article > span {
  color: #08756b;
}

.adminShellTile strong,
.adminTile strong,
.adminColumns h3,
.adminColumns strong,
.readinessGrid strong,
.maintenanceDecisionGrid h4,
.maintenanceDecisionGrid strong,
.founderColumns h3,
.founderColumns strong {
  color: #102033;
}

.adminShellTile small,
.adminTile p,
.adminColumns p,
.adminColumns small,
.readinessGrid small,
.maintenanceDecisionGrid p,
.maintenanceDecisionGrid small,
.founderColumns p,
.founderColumns small,
.founderColumns li {
  color: #526274;
}

.adminSectionTabs {
  position: sticky;
  top: 78px;
  z-index: 26;
  gap: 10px;
  padding: 10px;
  overflow-x: auto;
  flex-wrap: nowrap;
  background: rgba(236, 253, 245, .86);
  border-color: rgba(20, 184, 166, .20);
  border-radius: 22px;
  box-shadow: 0 14px 34px rgba(15, 23, 42, .06);
  scrollbar-width: thin;
}

.adminSectionTabs button {
  flex: 0 0 auto;
  min-height: 42px;
  padding: 0 16px;
  color: #526274;
  background: rgba(255, 255, 255, .54);
  border: 1px solid rgba(148, 163, 184, .24);
  border-radius: 16px;
  font-weight: 900;
}

.adminSectionTabs button:hover {
  color: #075e55;
  background: #ffffff;
  border-color: rgba(20, 184, 166, .34);
}

.adminSectionTabs button.active {
  color: #062f2b;
  background: linear-gradient(135deg, #dffcf4 0%, #fff2bd 100%);
  border-color: rgba(20, 184, 166, .52);
  box-shadow: 0 12px 28px rgba(20, 184, 166, .14);
}

.adminPriorityList,
.adminWorkstreamMap,
.adminFocusList,
.readinessGrid,
.maintenanceDecisionGrid,
.founderMetricGrid,
.founderColumns,
.adminSummaryStrip {
  gap: 14px;
}

.adminPriorityItem,
.adminWorkstreamCard,
.adminFocusList article,
.readinessGrid span,
.maintenanceDecisionGrid article,
.founderMetricGrid span,
.founderColumns > div,
.launchReadinessGrid span,
.adminOpsPanel .adminColumns > div {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .98), rgba(248, 250, 252, .92));
  border: 1px solid rgba(148, 163, 184, .28);
  box-shadow: 0 14px 34px rgba(15, 23, 42, .055);
}

.adminPriorityItem,
.adminWorkstreamHead {
  align-items: center;
}

.adminPriorityItem {
  grid-template-columns: 56px minmax(0, 1fr) auto;
  column-gap: 16px;
}

.adminPriorityItem > :not(b):not(em),
.adminWorkstreamHead > div {
  min-width: 0;
}

.adminPriorityItem b,
.adminWorkstreamHead b {
  width: 56px;
  min-width: 56px;
  height: 56px;
  border-radius: 18px;
  flex: 0 0 56px;
  justify-self: center;
  align-self: center;
}

/* Admin cleanup: make legacy two-letter badges read as icons instead of internal codes. */
.adminPriorityItem b,
.adminWorkstreamHead b,
.adminFocusList b,
.adminDashboard b:first-child {
  position: relative;
  display: inline-grid;
  place-items: center;
  overflow: hidden;
  color: transparent;
  text-indent: -999px;
  border: 1px solid rgba(20, 184, 166, .24);
  background: linear-gradient(135deg, #dffcf4, #e0f2fe);
  line-height: 1;
}

.adminPriorityItem b::before,
.adminWorkstreamHead b::before,
.adminFocusList b::before,
.adminDashboard b:first-child::before {
  content: "";
  width: 26px;
  height: 26px;
  display: block;
  margin: auto;
  color: #0f766e;
  text-indent: 0;
  background: currentColor;
  -webkit-mask: radial-gradient(circle at 50% 50%, #000 0 34%, transparent 35%) center / 100% 100% no-repeat;
  mask: radial-gradient(circle at 50% 50%, #000 0 34%, transparent 35%) center / 100% 100% no-repeat;
}

.adminPriorityItem:nth-child(1) b::before,
.adminWorkstreamCard:nth-child(1) .adminWorkstreamHead b::before {
  -webkit-mask:
    radial-gradient(circle at 36% 38%, #000 0 16%, transparent 17%) 0 0 / 100% 100% no-repeat,
    radial-gradient(circle at 64% 38%, #000 0 16%, transparent 17%) 0 0 / 100% 100% no-repeat,
    linear-gradient(#000 0 0) 50% 62% / 46% 16% no-repeat;
  mask:
    radial-gradient(circle at 36% 38%, #000 0 16%, transparent 17%) 0 0 / 100% 100% no-repeat,
    radial-gradient(circle at 64% 38%, #000 0 16%, transparent 17%) 0 0 / 100% 100% no-repeat,
    linear-gradient(#000 0 0) 50% 62% / 46% 16% no-repeat;
}

.adminPriorityItem:nth-child(2) b::before,
.adminWorkstreamCard:nth-child(2) .adminWorkstreamHead b::before {
  -webkit-mask:
    linear-gradient(#000 0 0) 26% 20% / 58% 10% no-repeat,
    linear-gradient(#000 0 0) 26% 48% / 58% 10% no-repeat,
    linear-gradient(#000 0 0) 26% 76% / 42% 10% no-repeat,
    linear-gradient(#000 0 0) 14% 12% / 10% 76% no-repeat;
  mask:
    linear-gradient(#000 0 0) 26% 20% / 58% 10% no-repeat,
    linear-gradient(#000 0 0) 26% 48% / 58% 10% no-repeat,
    linear-gradient(#000 0 0) 26% 76% / 42% 10% no-repeat,
    linear-gradient(#000 0 0) 14% 12% / 10% 76% no-repeat;
}

.adminPriorityItem:nth-child(3) b::before,
.adminWorkstreamCard:nth-child(3) .adminWorkstreamHead b::before {
  -webkit-mask:
    radial-gradient(circle at 50% 50%, transparent 0 35%, #000 36% 52%, transparent 53%),
    linear-gradient(#000 0 0) 45% 0 / 10% 100% no-repeat,
    linear-gradient(#000 0 0) 0 45% / 100% 10% no-repeat;
  mask:
    radial-gradient(circle at 50% 50%, transparent 0 35%, #000 36% 52%, transparent 53%),
    linear-gradient(#000 0 0) 45% 0 / 10% 100% no-repeat,
    linear-gradient(#000 0 0) 0 45% / 100% 10% no-repeat;
}

.adminShell [class*="Card"],
.adminShell [class*="Panel"],
.adminShell [class*="Grid"] > *,
.adminShell .founderColumns > div,
.adminShell .readinessGrid span,
.adminShell .maintenanceDecisionGrid article,
.adminShell .adminSummaryStrip span {
  color: #102033;
}

.adminShell [class*="Card"] p,
.adminShell [class*="Panel"] p,
.adminShell [class*="Grid"] > * p,
.adminShell [class*="Card"] small,
.adminShell [class*="Panel"] small,
.adminShell [class*="Grid"] > * small {
  color: #526274;
}

[data-theme="dark"] .adminPriorityItem b,
[data-theme="dark"] .adminWorkstreamHead b,
[data-theme="dark"] .adminFocusList b,
[data-theme="dark"] .adminDashboard b:first-child,
html[data-theme="dark"] .adminPriorityItem b,
html[data-theme="dark"] .adminWorkstreamHead b,
html[data-theme="dark"] .adminFocusList b,
html[data-theme="dark"] .adminDashboard b:first-child {
  border-color: rgba(94, 234, 212, .34);
  background: linear-gradient(135deg, rgba(94, 234, 212, .18), rgba(253, 230, 138, .16));
}

[data-theme="dark"] .adminPriorityItem b::before,
[data-theme="dark"] .adminWorkstreamHead b::before,
[data-theme="dark"] .adminFocusList b::before,
[data-theme="dark"] .adminDashboard b:first-child::before,
html[data-theme="dark"] .adminPriorityItem b::before,
html[data-theme="dark"] .adminWorkstreamHead b::before,
html[data-theme="dark"] .adminFocusList b::before,
html[data-theme="dark"] .adminDashboard b:first-child::before {
  color: #99f6e4;
}

[data-theme="dark"] .adminShell [class*="Card"],
[data-theme="dark"] .adminShell [class*="Panel"],
[data-theme="dark"] .adminShell [class*="Grid"] > *,
[data-theme="dark"] .adminShell .founderColumns > div,
[data-theme="dark"] .adminShell .readinessGrid span,
[data-theme="dark"] .adminShell .maintenanceDecisionGrid article,
[data-theme="dark"] .adminShell .adminSummaryStrip span,
html[data-theme="dark"] .adminShell [class*="Card"],
html[data-theme="dark"] .adminShell [class*="Panel"],
html[data-theme="dark"] .adminShell [class*="Grid"] > *,
html[data-theme="dark"] .adminShell .founderColumns > div,
html[data-theme="dark"] .adminShell .readinessGrid span,
html[data-theme="dark"] .adminShell .maintenanceDecisionGrid article,
html[data-theme="dark"] .adminShell .adminSummaryStrip span {
  color: #f8fafc;
  border-color: rgba(148, 163, 184, .28);
  background-color: rgba(15, 23, 42, .72);
}

[data-theme="dark"] .adminShell [class*="Card"] p,
[data-theme="dark"] .adminShell [class*="Panel"] p,
[data-theme="dark"] .adminShell [class*="Grid"] > * p,
[data-theme="dark"] .adminShell [class*="Card"] small,
[data-theme="dark"] .adminShell [class*="Panel"] small,
[data-theme="dark"] .adminShell [class*="Grid"] > * small,
html[data-theme="dark"] .adminShell [class*="Card"] p,
html[data-theme="dark"] .adminShell [class*="Panel"] p,
html[data-theme="dark"] .adminShell [class*="Grid"] > * p,
html[data-theme="dark"] .adminShell [class*="Card"] small,
html[data-theme="dark"] .adminShell [class*="Panel"] small,
html[data-theme="dark"] .adminShell [class*="Grid"] > * small {
  color: #dbe7f3;
}

.adminPriorityItem strong,
.adminWorkstreamHead strong,
.adminFocusList strong {
  color: #102033;
}

.adminPriorityItem small,
.adminWorkstreamHead small,
.adminFocusList small {
  color: #526274;
}

.adminPriorityItem em {
  color: #075e55;
  background: #dffcf4;
  border: 1px solid rgba(20, 184, 166, .28);
  border-radius: 999px;
  padding: 6px 9px;
}

.adminMigrationPromote,
.sensitiveDialog {
  border-radius: 22px;
}

.adminMigrationPromote input,
.adminMigrationPromote textarea,
.sensitiveDialog input,
.sensitiveDialog textarea {
  min-height: 48px;
  border-radius: 14px;
  font-weight: 780;
}

.adminFocusPanel > h2,
.adminFocusPanel > h3,
.adminOpsPanel > h2,
.adminOpsPanel > h3,
.founderOsPanel > h2,
.founderOsPanel > h3,
.maintenanceDecisionPanel > h2,
.maintenanceDecisionPanel > h3 {
  margin-top: 0;
  letter-spacing: 0;
}

[data-theme="dark"] .adminShellHero,
html[data-theme="dark"] .adminShellHero,
[data-theme="dark"] .adminPriorityQueue,
html[data-theme="dark"] .adminPriorityQueue,
[data-theme="dark"] .adminFocusPanel,
html[data-theme="dark"] .adminFocusPanel,
[data-theme="dark"] .adminMigrationPanel,
html[data-theme="dark"] .adminMigrationPanel,
[data-theme="dark"] .adminAdvancedIntro,
html[data-theme="dark"] .adminAdvancedIntro,
[data-theme="dark"] .founderOsPanel,
html[data-theme="dark"] .founderOsPanel,
[data-theme="dark"] .adminOpsPanel,
html[data-theme="dark"] .adminOpsPanel,
[data-theme="dark"] .maintenanceDecisionPanel,
html[data-theme="dark"] .maintenanceDecisionPanel,
[data-theme="dark"] .readinessPanel,
html[data-theme="dark"] .readinessPanel,
[data-theme="dark"] .adminRevenuePanel,
html[data-theme="dark"] .adminRevenuePanel {
  color: #f8fafc;
  background:
    linear-gradient(135deg, rgba(94, 234, 212, .08), rgba(247, 200, 115, .04)),
    rgba(15, 23, 42, .92);
  border-color: rgba(148, 163, 184, .28);
}

[data-theme="dark"] .adminShellTile,
html[data-theme="dark"] .adminShellTile,
[data-theme="dark"] .adminTile,
html[data-theme="dark"] .adminTile,
[data-theme="dark"] .adminColumns > div,
html[data-theme="dark"] .adminColumns > div,
[data-theme="dark"] .adminSummaryStrip > div,
html[data-theme="dark"] .adminSummaryStrip > div,
[data-theme="dark"] .adminPriorityItem,
html[data-theme="dark"] .adminPriorityItem,
[data-theme="dark"] .adminWorkstreamCard,
html[data-theme="dark"] .adminWorkstreamCard,
[data-theme="dark"] .adminWorkstreamActions button,
html[data-theme="dark"] .adminWorkstreamActions button,
[data-theme="dark"] .adminFocusList article,
html[data-theme="dark"] .adminFocusList article,
[data-theme="dark"] .readinessGrid span,
html[data-theme="dark"] .readinessGrid span,
[data-theme="dark"] .maintenanceDecisionGrid article,
html[data-theme="dark"] .maintenanceDecisionGrid article,
[data-theme="dark"] .founderMetricGrid span,
html[data-theme="dark"] .founderMetricGrid span,
[data-theme="dark"] .founderColumns > div,
html[data-theme="dark"] .founderColumns > div,
[data-theme="dark"] .launchReadinessGrid span,
html[data-theme="dark"] .launchReadinessGrid span,
[data-theme="dark"] .softMetric,
html[data-theme="dark"] .softMetric,
[data-theme="dark"] .miniLedger span,
html[data-theme="dark"] .miniLedger span {
  color: #f8fafc;
  background:
    linear-gradient(135deg, rgba(30, 41, 59, .98), rgba(15, 23, 42, .96));
  border-color: rgba(148, 163, 184, .34);
  box-shadow: 0 16px 42px rgba(0, 0, 0, .20);
}

[data-theme="dark"] .adminSectionTabs,
html[data-theme="dark"] .adminSectionTabs {
  background: rgba(15, 23, 42, .96);
  border-color: rgba(148, 163, 184, .36);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .26);
}

[data-theme="dark"] .adminSectionTabs button,
html[data-theme="dark"] .adminSectionTabs button {
  color: #dbe7f3;
  background: rgba(30, 41, 59, .72);
  border-color: rgba(148, 163, 184, .30);
}

[data-theme="dark"] .adminSectionTabs button:hover,
html[data-theme="dark"] .adminSectionTabs button:hover {
  color: #ffffff;
  background: rgba(51, 65, 85, .88);
  border-color: rgba(94, 234, 212, .46);
}

[data-theme="dark"] .adminSectionTabs button.active,
html[data-theme="dark"] .adminSectionTabs button.active {
  color: #06131a;
  background: linear-gradient(135deg, #ccfbf1 0%, #67e8f9 50%, #f7c873 100%);
  border-color: rgba(255, 255, 255, .36);
}

[data-theme="dark"] .adminShellHero h2,
html[data-theme="dark"] .adminShellHero h2,
[data-theme="dark"] .adminShellHero strong,
html[data-theme="dark"] .adminShellHero strong,
[data-theme="dark"] .adminShellTile strong,
html[data-theme="dark"] .adminShellTile strong,
[data-theme="dark"] .adminTile strong,
html[data-theme="dark"] .adminTile strong,
[data-theme="dark"] .adminColumns h2,
html[data-theme="dark"] .adminColumns h2,
[data-theme="dark"] .adminColumns h3,
html[data-theme="dark"] .adminColumns h3,
[data-theme="dark"] .adminColumns strong,
html[data-theme="dark"] .adminColumns strong,
[data-theme="dark"] .adminPriorityItem strong,
html[data-theme="dark"] .adminPriorityItem strong,
[data-theme="dark"] .adminWorkstreamHead strong,
html[data-theme="dark"] .adminWorkstreamHead strong,
[data-theme="dark"] .adminFocusList strong,
html[data-theme="dark"] .adminFocusList strong,
[data-theme="dark"] .readinessGrid strong,
html[data-theme="dark"] .readinessGrid strong,
[data-theme="dark"] .maintenanceDecisionGrid h4,
html[data-theme="dark"] .maintenanceDecisionGrid h4,
[data-theme="dark"] .maintenanceDecisionGrid strong,
html[data-theme="dark"] .maintenanceDecisionGrid strong,
[data-theme="dark"] .founderColumns h3,
html[data-theme="dark"] .founderColumns h3,
[data-theme="dark"] .founderColumns strong,
html[data-theme="dark"] .founderColumns strong {
  color: #ffffff;
}

[data-theme="dark"] .adminShellHero p,
html[data-theme="dark"] .adminShellHero p,
[data-theme="dark"] .adminShellHero small,
html[data-theme="dark"] .adminShellHero small,
[data-theme="dark"] .adminShellTile small,
html[data-theme="dark"] .adminShellTile small,
[data-theme="dark"] .adminTile p,
html[data-theme="dark"] .adminTile p,
[data-theme="dark"] .adminColumns p,
html[data-theme="dark"] .adminColumns p,
[data-theme="dark"] .adminColumns small,
html[data-theme="dark"] .adminColumns small,
[data-theme="dark"] .adminPriorityItem small,
html[data-theme="dark"] .adminPriorityItem small,
[data-theme="dark"] .adminWorkstreamHead small,
html[data-theme="dark"] .adminWorkstreamHead small,
[data-theme="dark"] .adminFocusList small,
html[data-theme="dark"] .adminFocusList small,
[data-theme="dark"] .readinessGrid small,
html[data-theme="dark"] .readinessGrid small,
[data-theme="dark"] .maintenanceDecisionGrid p,
html[data-theme="dark"] .maintenanceDecisionGrid p,
[data-theme="dark"] .maintenanceDecisionGrid small,
html[data-theme="dark"] .maintenanceDecisionGrid small,
[data-theme="dark"] .founderColumns p,
html[data-theme="dark"] .founderColumns p,
[data-theme="dark"] .founderColumns small,
html[data-theme="dark"] .founderColumns small,
[data-theme="dark"] .founderColumns li,
html[data-theme="dark"] .founderColumns li {
  color: #dbe7f3;
}

[data-theme="dark"] .adminShellHero span,
html[data-theme="dark"] .adminShellHero span,
[data-theme="dark"] .adminShellTile span,
html[data-theme="dark"] .adminShellTile span,
[data-theme="dark"] .adminTile span,
html[data-theme="dark"] .adminTile span,
[data-theme="dark"] .adminFocusList span,
html[data-theme="dark"] .adminFocusList span {
  color: #a7f3d0;
}

[data-theme="dark"] .adminPriorityItem em,
html[data-theme="dark"] .adminPriorityItem em {
  color: #06131a;
  background: #ccfbf1;
  border-color: rgba(94, 234, 212, .45);
}

[data-theme="dark"] .adminMigrationPromote,
html[data-theme="dark"] .adminMigrationPromote,
[data-theme="dark"] .sensitiveDialog,
html[data-theme="dark"] .sensitiveDialog {
  color: #f8fafc;
  background: rgba(15, 23, 42, .98);
  border-color: rgba(148, 163, 184, .40);
}

[data-theme="dark"] .adminMigrationPromote input,
html[data-theme="dark"] .adminMigrationPromote input,
[data-theme="dark"] .adminMigrationPromote textarea,
html[data-theme="dark"] .adminMigrationPromote textarea,
[data-theme="dark"] .sensitiveDialog input,
html[data-theme="dark"] .sensitiveDialog input,
[data-theme="dark"] .sensitiveDialog textarea,
html[data-theme="dark"] .sensitiveDialog textarea {
  color: #0f172a;
  background: #ffffff;
  border-color: #cbd5e1;
}

@media (max-width: 980px) {
  .adminShellHero,
  .adminPriorityHead {
    grid-template-columns: 1fr;
    flex-direction: column;
    align-items: stretch;
    text-align: left;
  }

  .adminShellStatus {
    min-width: 0;
    text-align: left;
  }

  .adminPriorityList,
  .adminWorkstreamMap,
  .adminFocusList,
  .founderColumns {
    grid-template-columns: 1fr;
  }

  .adminSectionTabs {
    top: 62px;
    margin-inline: -2px;
    border-radius: 18px;
  }
}

@media (max-width: 640px) {
  .adminShell {
    gap: 18px;
  }

  .adminShellHero,
  .adminPriorityQueue,
  .adminFocusPanel,
  .adminMigrationPanel,
  .adminAdvancedIntro,
  .founderOsPanel,
  .adminOpsPanel,
  .maintenanceDecisionPanel,
  .readinessPanel,
  .adminRevenuePanel {
    border-radius: 20px;
  }

  .adminShellGrid,
  .readinessGrid,
  .maintenanceDecisionGrid,
  .founderMetricGrid,
  .adminSummaryStrip {
    grid-template-columns: 1fr;
  }

  .adminPriorityItem {
    grid-template-columns: 52px minmax(0, 1fr);
  }

  .adminPriorityItem em {
    grid-column: 2;
    justify-self: start;
  }
}

/* Policy and self-service refresh: make rules readable, actionable, and theme-safe. */
.policyQaView {
  display: grid;
  gap: 24px;
}

.policyQaView > .sectionHead {
  padding: clamp(22px, 3vw, 34px);
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, .96) 0%, rgba(255, 255, 255, .86) 54%, rgba(255, 255, 255, .28) 100%),
    url('./images/traveler-hero.jpg') center right / cover no-repeat,
    var(--card);
  border: 1px solid rgba(20, 184, 166, .24);
  border-left: 6px solid var(--teal);
  border-radius: 28px;
  box-shadow: 0 20px 54px rgba(15, 23, 42, .08);
}

.policyQaView > .sectionHead h2 {
  max-width: 760px;
  color: #102033;
  font-size: clamp(30px, 5vw, 58px);
  line-height: 1.02;
  letter-spacing: 0;
}

.policyQaView > .sectionHead p {
  max-width: 720px;
  color: #526274;
  font-size: clamp(15px, 1.4vw, 18px);
  line-height: 1.7;
}

.policyGrid,
.policyFaqGrid,
.policyQaColumns {
  gap: 18px;
}

.policyItem,
.policyFaqItem,
.policyQaColumns > div,
.policyFinanceNote,
.selfServiceGuide,
.selfServiceCard,
.faqSearchBox,
.policyMatrix,
.disputeSummary {
  border-radius: 24px;
}

.policyItem,
.policyFaqItem,
.policyQaColumns > div,
.policyFinanceNote,
.selfServiceCard,
.faqSearchBox {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .98), rgba(248, 250, 252, .92));
  border: 1px solid rgba(148, 163, 184, .28);
  box-shadow: 0 16px 42px rgba(15, 23, 42, .06);
}

.policyItem {
  padding: 22px;
}

.policyItem .glyph {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  color: #063b32;
  background: linear-gradient(135deg, #dffcf4, #fff2bd);
  border: 1px solid rgba(20, 184, 166, .28);
  border-radius: 18px;
}

.policyItem h3,
.policyFaqItem h3,
.policyQaColumns h3,
.selfServiceCard h3,
.policyFinanceNote strong,
.disputeSummary strong {
  color: #102033;
}

.policyItem p,
.policyItem small,
.policyFaqItem p,
.policyQaColumns p,
.policyQaColumns small,
.selfServiceCard p,
.selfServiceCard li,
.policyFinanceNote span,
.policyMatrix small,
.disputeSummary span,
.disputeSummary small {
  color: #526274;
  line-height: 1.68;
}

.faqSearchBox {
  display: grid;
  gap: 10px;
  padding: 16px;
}

.faqSearchBox input {
  min-height: 52px;
  border-radius: 16px;
  font-weight: 780;
}

.selfServiceGuide {
  padding: 20px;
  background:
    linear-gradient(135deg, rgba(236, 253, 245, .88), rgba(255, 251, 235, .68));
  border: 1px solid rgba(20, 184, 166, .24);
}

.selfServiceTabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 8px;
  margin: 14px 0;
  background: rgba(255, 255, 255, .64);
  border: 1px solid rgba(148, 163, 184, .24);
  border-radius: 22px;
}

.selfServiceTabs button {
  min-height: 42px;
  padding: 0 16px;
  color: #526274;
  background: rgba(255, 255, 255, .72);
  border: 1px solid rgba(148, 163, 184, .28);
  border-radius: 999px;
  font-weight: 900;
}

.selfServiceTabs button:hover {
  color: #075e55;
  background: #ffffff;
  border-color: rgba(20, 184, 166, .42);
}

.selfServiceTabs button.active {
  color: #062f2b;
  background: linear-gradient(135deg, #dffcf4 0%, #fff2bd 100%);
  border-color: rgba(20, 184, 166, .54);
  box-shadow: 0 12px 28px rgba(20, 184, 166, .14);
}

.selfServiceCard {
  padding: 20px;
  border-left: 5px solid var(--teal);
}

.selfServiceCard ol {
  display: grid;
  gap: 10px;
  margin: 14px 0;
  padding-left: 1.25rem;
}

.selfServiceCard .primaryButton,
.policyQaView .primaryButton {
  min-height: 46px;
  border-radius: 16px;
  font-weight: 950;
}

.policyMatrix {
  display: grid;
  gap: 12px;
  padding: 14px;
  background: rgba(236, 253, 245, .54);
  border: 1px solid rgba(20, 184, 166, .18);
}

.policyMatrix span {
  display: grid;
  gap: 6px;
  min-height: 82px;
  padding: 15px 16px;
  color: #17212b;
  background: rgba(255, 255, 255, .96);
  border: 1px solid rgba(148, 163, 184, .28);
  border-left: 5px solid var(--teal);
  border-radius: 18px;
}

.policyMatrix span strong,
.policyMatrix span b {
  color: #102033;
}

.policyFinanceNote {
  padding: 18px;
  background: linear-gradient(135deg, #fff8e7, #f8fafc);
  border-left: 5px solid #f59e0b;
}

.disputeSummary {
  padding: 14px;
  background: rgba(248, 250, 252, .92);
  border: 1px solid rgba(148, 163, 184, .28);
}

[data-theme="dark"] .policyQaView > .sectionHead,
html[data-theme="dark"] .policyQaView > .sectionHead {
  background:
    linear-gradient(90deg, rgba(8, 13, 21, .98) 0%, rgba(8, 13, 21, .90) 56%, rgba(8, 13, 21, .52) 100%),
    url('./images/traveler-hero.jpg') center right / cover no-repeat,
    rgba(15, 23, 42, .94);
  border-color: rgba(94, 234, 212, .34);
  border-left-color: #5eead4;
  box-shadow: 0 24px 64px rgba(0, 0, 0, .30);
}

[data-theme="dark"] .policyQaView > .sectionHead h2,
html[data-theme="dark"] .policyQaView > .sectionHead h2,
[data-theme="dark"] .policyItem h3,
html[data-theme="dark"] .policyItem h3,
[data-theme="dark"] .policyFaqItem h3,
html[data-theme="dark"] .policyFaqItem h3,
[data-theme="dark"] .policyQaColumns h3,
html[data-theme="dark"] .policyQaColumns h3,
[data-theme="dark"] .selfServiceCard h3,
html[data-theme="dark"] .selfServiceCard h3,
[data-theme="dark"] .policyMatrix span strong,
html[data-theme="dark"] .policyMatrix span strong,
[data-theme="dark"] .policyMatrix span b,
html[data-theme="dark"] .policyMatrix span b,
[data-theme="dark"] .policyFinanceNote strong,
html[data-theme="dark"] .policyFinanceNote strong,
[data-theme="dark"] .disputeSummary strong,
html[data-theme="dark"] .disputeSummary strong {
  color: #ffffff;
}

[data-theme="dark"] .policyQaView > .sectionHead p,
html[data-theme="dark"] .policyQaView > .sectionHead p,
[data-theme="dark"] .policyItem p,
html[data-theme="dark"] .policyItem p,
[data-theme="dark"] .policyItem small,
html[data-theme="dark"] .policyItem small,
[data-theme="dark"] .policyFaqItem p,
html[data-theme="dark"] .policyFaqItem p,
[data-theme="dark"] .policyQaColumns p,
html[data-theme="dark"] .policyQaColumns p,
[data-theme="dark"] .policyQaColumns small,
html[data-theme="dark"] .policyQaColumns small,
[data-theme="dark"] .selfServiceCard p,
html[data-theme="dark"] .selfServiceCard p,
[data-theme="dark"] .selfServiceCard li,
html[data-theme="dark"] .selfServiceCard li,
[data-theme="dark"] .policyMatrix small,
html[data-theme="dark"] .policyMatrix small,
[data-theme="dark"] .policyFinanceNote span,
html[data-theme="dark"] .policyFinanceNote span,
[data-theme="dark"] .disputeSummary span,
html[data-theme="dark"] .disputeSummary span,
[data-theme="dark"] .disputeSummary small,
html[data-theme="dark"] .disputeSummary small {
  color: #dbe7f3;
}

[data-theme="dark"] .policyItem,
html[data-theme="dark"] .policyItem,
[data-theme="dark"] .policyFaqItem,
html[data-theme="dark"] .policyFaqItem,
[data-theme="dark"] .policyQaColumns > div,
html[data-theme="dark"] .policyQaColumns > div,
[data-theme="dark"] .policyFinanceNote,
html[data-theme="dark"] .policyFinanceNote,
[data-theme="dark"] .selfServiceGuide,
html[data-theme="dark"] .selfServiceGuide,
[data-theme="dark"] .selfServiceCard,
html[data-theme="dark"] .selfServiceCard,
[data-theme="dark"] .faqSearchBox,
html[data-theme="dark"] .faqSearchBox,
[data-theme="dark"] .policyMatrix,
html[data-theme="dark"] .policyMatrix,
[data-theme="dark"] .disputeSummary,
html[data-theme="dark"] .disputeSummary {
  color: #f8fafc;
  background:
    linear-gradient(135deg, rgba(30, 41, 59, .98), rgba(15, 23, 42, .96));
  border-color: rgba(148, 163, 184, .34);
  box-shadow: 0 16px 42px rgba(0, 0, 0, .20);
}

[data-theme="dark"] .policyItem .glyph,
html[data-theme="dark"] .policyItem .glyph {
  color: #06131a;
  background: linear-gradient(135deg, #ccfbf1 0%, #67e8f9 48%, #f7c873 100%);
  border-color: rgba(255, 255, 255, .28);
}

[data-theme="dark"] .selfServiceTabs,
html[data-theme="dark"] .selfServiceTabs {
  background: rgba(15, 23, 42, .94);
  border-color: rgba(148, 163, 184, .34);
}

[data-theme="dark"] .selfServiceTabs button,
html[data-theme="dark"] .selfServiceTabs button {
  color: #dbe7f3;
  background: rgba(30, 41, 59, .88);
  border-color: rgba(148, 163, 184, .32);
}

[data-theme="dark"] .selfServiceTabs button:hover,
html[data-theme="dark"] .selfServiceTabs button:hover {
  color: #ffffff;
  border-color: rgba(94, 234, 212, .46);
}

[data-theme="dark"] .selfServiceTabs button.active,
html[data-theme="dark"] .selfServiceTabs button.active {
  color: #06131a;
  background: linear-gradient(135deg, #ccfbf1 0%, #67e8f9 50%, #f7c873 100%);
  border-color: rgba(255, 255, 255, .36);
}

[data-theme="dark"] .policyMatrix span,
html[data-theme="dark"] .policyMatrix span {
  color: #f8fafc;
  background: rgba(15, 23, 42, .96);
  border-color: rgba(148, 163, 184, .34);
  border-left-color: #5eead4;
}

@media (max-width: 760px) {
  .policyQaView {
    gap: 18px;
  }

  .policyQaView > .sectionHead {
    min-height: 360px;
    padding: 22px;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, .94) 0%, rgba(255, 255, 255, .88) 58%, rgba(255, 255, 255, .72) 100%),
      url('./images/traveler-hero.jpg') center bottom / cover no-repeat,
      var(--card);
  }

  .policyQaView > .sectionHead h2 {
    font-size: clamp(30px, 10vw, 44px);
  }

  .policyGrid,
  .policyFaqGrid,
  .policyQaColumns {
    grid-template-columns: 1fr;
  }

  .selfServiceTabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: thin;
  }

  .selfServiceTabs button {
    flex: 0 0 auto;
  }

  [data-theme="dark"] .policyQaView > .sectionHead,
  html[data-theme="dark"] .policyQaView > .sectionHead {
    background:
      linear-gradient(180deg, rgba(8, 13, 21, .96) 0%, rgba(8, 13, 21, .86) 58%, rgba(8, 13, 21, .72) 100%),
      url('./images/traveler-hero.jpg') center bottom / cover no-repeat,
      rgba(15, 23, 42, .94);
  }
}

/* Marketplace refresh: make the first market screen feel browsable, visual, and less like an admin table. */
.marketPulse {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  gap: 22px;
  padding: clamp(20px, 3vw, 34px);
  border-radius: 24px;
  background:
    linear-gradient(120deg, rgba(255, 253, 249, .96) 0%, rgba(235, 252, 248, .88) 54%, rgba(255, 247, 230, .84) 100%),
    url("./images/bondmai-hero-handoff.webp") right 28% / min(44%, 620px) auto no-repeat;
  border-color: color-mix(in srgb, var(--teal) 28%, var(--line));
  box-shadow: 0 24px 70px rgba(15, 23, 42, .10);
}

.marketPulse::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 18% 12%, rgba(94, 234, 212, .20), transparent 32%),
    linear-gradient(90deg, rgba(255, 253, 249, .98) 0%, rgba(255, 253, 249, .84) 48%, rgba(255, 253, 249, .40) 100%);
  z-index: -1;
}

.marketPulseHead {
  align-items: center;
  min-height: 116px;
}

.marketPulseHead h2 {
  max-width: 680px;
  letter-spacing: 0;
}

.marketPulseHead p {
  max-width: 640px;
  color: color-mix(in srgb, var(--muted) 86%, var(--ink));
  font-size: 1.02rem;
}

.marketPulseActions .primaryButton,
.marketPulseActions .softButton {
  min-height: 48px;
  padding-inline: 20px;
  border-radius: 999px;
}

.marketPulseGrid {
  grid-template-columns: minmax(0, 1.12fr) minmax(340px, .88fr);
  gap: 16px;
}

.pulseFeed,
.pulseTrips {
  gap: 12px;
  padding: 16px;
  border-radius: 22px;
  background: rgba(255, 255, 255, .82);
  border-color: rgba(15, 118, 110, .16);
  backdrop-filter: blur(12px);
}

.pulseFeed h3,
.pulseTrips h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  font-size: 20px;
}

.pulseFeed h3::before,
.pulseTrips h3::before {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 12px;
  color: #063b36;
  background: linear-gradient(135deg, #ccfbf1, #fde68a);
  box-shadow: 0 10px 22px rgba(20, 184, 166, .15);
}

.pulseFeed h3::before {
  content: "＋";
}

.pulseTrips h3::before {
  content: "✈";
}

.pulseItem {
  grid-template-columns: 58px minmax(0, 1fr) auto;
  gap: 14px;
  padding: 14px;
  border-radius: 20px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .96), rgba(245, 250, 255, .90));
  border-color: color-mix(in srgb, var(--line) 72%, var(--teal) 28%);
  box-shadow: 0 14px 32px rgba(15, 23, 42, .07);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.pulseItem:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--teal) 58%, var(--line));
  box-shadow: 0 20px 42px rgba(15, 23, 42, .10);
}

.pulseIcon {
  width: 58px;
  height: 58px;
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(204, 251, 241, .96), rgba(255, 247, 219, .88));
  border: 1px solid rgba(15, 118, 110, .18);
}

.pulseIcon .countryFlag {
  width: 34px;
  height: 34px;
  box-shadow: 0 0 0 2px #fff;
}

.pulseIcon.trip .glyph {
  width: 30px;
  height: 30px;
  background: transparent;
}

.pulseItem .tinyButton {
  min-width: 74px;
  border-radius: 999px;
  color: #064e46;
  background: #ecfffb;
}

.pulseCountryRail {
  padding: 4px 2px 6px;
}

.pulseCountryRail > span {
  color: var(--ink);
}

.pulseCountryRail button {
  min-width: 184px;
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .98), rgba(237, 253, 249, .92));
  box-shadow: 0 12px 28px rgba(15, 23, 42, .06);
  transition: transform .18s ease, border-color .18s ease;
}

.pulseCountryRail button:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--teal) 58%, var(--line));
}

[data-theme="dark"] .marketPulse,
html[data-theme="dark"] .marketPulse {
  color: #f8fafc;
  background:
    linear-gradient(120deg, rgba(9, 14, 24, .98) 0%, rgba(12, 31, 39, .92) 58%, rgba(34, 26, 17, .88) 100%),
    url("./images/bondmai-hero-handoff.webp") right 28% / min(44%, 620px) auto no-repeat;
  border-color: rgba(94, 234, 212, .34);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .36);
}

[data-theme="dark"] .marketPulse::before,
html[data-theme="dark"] .marketPulse::before {
  background:
    radial-gradient(circle at 18% 12%, rgba(94, 234, 212, .18), transparent 34%),
    linear-gradient(90deg, rgba(9, 14, 24, .98) 0%, rgba(9, 14, 24, .86) 52%, rgba(9, 14, 24, .48) 100%);
}

[data-theme="dark"] .marketPulseHead h2,
html[data-theme="dark"] .marketPulseHead h2,
[data-theme="dark"] .pulseFeed h3,
html[data-theme="dark"] .pulseFeed h3,
[data-theme="dark"] .pulseTrips h3,
html[data-theme="dark"] .pulseTrips h3,
[data-theme="dark"] .pulseItem strong,
html[data-theme="dark"] .pulseItem strong,
[data-theme="dark"] .pulseCountryRail > span,
html[data-theme="dark"] .pulseCountryRail > span,
[data-theme="dark"] .pulseCountryRail button strong,
html[data-theme="dark"] .pulseCountryRail button strong {
  color: #ffffff;
}

[data-theme="dark"] .marketPulseHead p,
html[data-theme="dark"] .marketPulseHead p,
[data-theme="dark"] .pulseItem p,
html[data-theme="dark"] .pulseItem p,
[data-theme="dark"] .pulseItem small,
html[data-theme="dark"] .pulseItem small,
[data-theme="dark"] .pulseCountryRail button small,
html[data-theme="dark"] .pulseCountryRail button small {
  color: #dbe7f3;
}

[data-theme="dark"] .pulseFeed,
html[data-theme="dark"] .pulseFeed,
[data-theme="dark"] .pulseTrips,
html[data-theme="dark"] .pulseTrips {
  background: rgba(15, 23, 42, .82);
  border-color: rgba(148, 163, 184, .30);
}

[data-theme="dark"] .pulseItem,
html[data-theme="dark"] .pulseItem,
[data-theme="dark"] .pulseCountryRail button,
html[data-theme="dark"] .pulseCountryRail button {
  background:
    linear-gradient(135deg, rgba(15, 23, 42, .98), rgba(30, 41, 59, .92));
  border-color: rgba(148, 163, 184, .30);
  box-shadow: 0 16px 34px rgba(0, 0, 0, .22);
}

[data-theme="dark"] .pulseItem .tinyButton,
html[data-theme="dark"] .pulseItem .tinyButton {
  color: #04111a;
  background: linear-gradient(135deg, #ccfbf1, #67e8f9);
  border-color: rgba(255, 255, 255, .32);
}

@media (max-width: 900px) {
  .marketPulse {
    padding: 18px;
    border-radius: 20px;
    background:
      linear-gradient(180deg, rgba(255, 253, 249, .98), rgba(235, 252, 248, .92)),
      url("./images/bondmai-hero-handoff.webp") center top / cover no-repeat;
  }

  .marketPulse::before {
    background:
      linear-gradient(180deg, rgba(255, 253, 249, .86) 0%, rgba(255, 253, 249, .98) 42%, rgba(235, 252, 248, .96) 100%);
  }

  .marketPulseHead {
    display: grid;
    min-height: 0;
    gap: 14px;
  }

  .marketPulseActions {
    width: 100%;
  }

  .marketPulseActions .primaryButton,
  .marketPulseActions .softButton {
    flex: 1 1 150px;
  }

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

  .pulseItem {
    grid-template-columns: 52px minmax(0, 1fr);
  }

  .pulseItem .tinyButton {
    grid-column: 2;
    justify-self: start;
  }

  .pulseIcon {
    width: 52px;
    height: 52px;
    border-radius: 16px;
  }

  [data-theme="dark"] .marketPulse,
  html[data-theme="dark"] .marketPulse {
    background:
      linear-gradient(180deg, rgba(9, 14, 24, .94), rgba(15, 23, 42, .98)),
      url("./images/bondmai-hero-handoff.webp") center top / cover no-repeat;
  }

  [data-theme="dark"] .marketPulse::before,
html[data-theme="dark"] .marketPulse::before {
  background:
    linear-gradient(180deg, rgba(9, 14, 24, .72) 0%, rgba(9, 14, 24, .96) 38%, rgba(15, 23, 42, .98) 100%);
}

/* 2026-07-27 Noise reduction: keep install prompt, latest wishes, and creation paths focused. */
.marketIntentGrid .quickStartCard:first-child {
  display: none;
}

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

.pulseItem {
  align-items: center;
  overflow: hidden;
}

.pulseItem > div:nth-child(2) {
  min-width: 0;
}

.pulseItem strong,
.pulseItem small,
.pulseItem p {
  overflow-wrap: anywhere;
}

.pulseIcon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  overflow: hidden;
}

.pulseIcon .countryFlag {
  display: block;
  max-width: 78%;
  max-height: 78%;
}

.wishPreviewBackdrop {
  align-items: center;
  justify-content: center;
}

.wishPreviewSheet {
  position: relative;
  display: grid;
  gap: 18px;
  width: min(560px, calc(100vw - 28px));
  padding: clamp(20px, 4vw, 30px);
  color: var(--ink);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .98), rgba(236, 253, 245, .94));
  border: 1px solid color-mix(in srgb, var(--line) 64%, var(--teal) 36%);
  border-radius: 28px;
  box-shadow: 0 32px 96px rgba(15, 23, 42, .24);
}

.wishPreviewHero {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 16px;
  align-items: center;
}

.wishPreviewHero h2 {
  margin: 4px 0;
  font-size: clamp(24px, 5vw, 34px);
  line-height: 1.08;
}

.wishPreviewHero p,
.wishPreviewNote {
  margin: 0;
  color: var(--muted);
  line-height: 1.65;
}

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

.wishPreviewFacts div {
  padding: 14px;
  background: rgba(255, 255, 255, .82);
  border: 1px solid color-mix(in srgb, var(--line) 78%, var(--teal) 22%);
  border-radius: 18px;
}

.wishPreviewFacts dt {
  margin-bottom: 4px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.wishPreviewFacts dd {
  margin: 0;
  color: var(--ink);
  font-weight: 950;
}

[data-theme="dark"] .wishPreviewSheet,
html[data-theme="dark"] .wishPreviewSheet {
  color: #f8fafc;
  background:
    linear-gradient(135deg, rgba(15, 23, 42, .98), rgba(19, 78, 74, .88));
  border-color: rgba(94, 234, 212, .34);
  box-shadow: 0 36px 100px rgba(0, 0, 0, .52);
}

[data-theme="dark"] .wishPreviewHero p,
html[data-theme="dark"] .wishPreviewHero p,
[data-theme="dark"] .wishPreviewNote,
html[data-theme="dark"] .wishPreviewNote {
  color: #cbd5e1;
}

[data-theme="dark"] .wishPreviewFacts div,
html[data-theme="dark"] .wishPreviewFacts div {
  background: rgba(15, 23, 42, .82);
  border-color: rgba(148, 163, 184, .30);
}

[data-theme="dark"] .wishPreviewFacts dt,
html[data-theme="dark"] .wishPreviewFacts dt {
  color: #a7f3d0;
}

[data-theme="dark"] .wishPreviewFacts dd,
html[data-theme="dark"] .wishPreviewFacts dd {
  color: #ffffff;
}

/* Final mobile marketplace cleanup: remove duplicate create-entry card and keep icons/text inside their cards. */
.marketIntentGrid .quickStartCard:first-child {
  display: none !important;
}

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

.pulseFeed h3::after,
.pulseTrips h3::after {
  display: none !important;
  content: none !important;
}

.pulseFeed h3,
.pulseTrips h3 {
  display: flex;
  align-items: center;
  gap: 12px;
}

.pulseFeed h3::before,
.pulseTrips h3::before {
  flex: 0 0 34px;
  margin: 0 !important;
}

.pulseItem,
.featuredWishCard {
  overflow: hidden;
}

.pulseIcon,
.wishVisual,
.featuredWishCard .wishVisual {
  overflow: hidden;
  contain: paint;
}

.pulseIcon .countryFlag,
.wishVisual .countryFlag,
.featuredWishCard .countryFlag {
  max-width: 72%;
  max-height: 72%;
}

.quickStartCard strong,
.quickStartCard small,
.quickStartCard b {
  writing-mode: horizontal-tb !important;
  text-orientation: mixed !important;
  word-break: normal;
  overflow-wrap: anywhere;
}

@media (max-width: 720px) {
  .marketIntentGrid {
    grid-template-columns: 1fr !important;
  }

  .marketIntentGrid .quickStartCard {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr);
    align-items: center;
    min-width: 0;
    width: 100%;
  }

  .pulseItem {
    grid-template-columns: 48px minmax(0, 1fr);
  }

  .pulseIcon {
    width: 48px;
    height: 48px;
    border-radius: 16px;
  }

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

/* 2026-07-27 Mobile onboarding cleanup: avoid showing the same goal twice. */
.onboardingPanel .mobileQuickTasks {
  display: none !important;
}

.onboardingPanel .onboardingGrid {
  margin-top: 12px;
}

@media (max-width: 760px) {
  .onboardingPanel .sectionHead.tight {
    margin-bottom: 14px;
  }

  .onboardingPanel .onboardingGrid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    overflow: visible;
  }

  .onboardingPanel .onboardingCard {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr);
    gap: 14px;
    align-items: center;
    min-height: 0;
    padding: 16px;
  }

  .onboardingPanel .onboardingCard > svg {
    grid-row: 1 / span 3;
    align-self: center;
    width: 34px;
    height: 34px;
    padding: 10px;
    color: #064e46;
    background: linear-gradient(135deg, #ccfbf1, #fde68a);
    border: 1px solid rgba(15, 118, 110, .18);
    border-radius: 18px;
    box-sizing: content-box;
  }

  .onboardingPanel .onboardingCard h3,
  .onboardingPanel .onboardingCard p,
  .onboardingPanel .onboardingCard .softButton {
    grid-column: 2;
    margin: 0;
  }

  .onboardingPanel .onboardingCard h3 {
    font-size: 1.05rem;
    line-height: 1.25;
  }

  .onboardingPanel .onboardingCard p {
    color: #475569;
    line-height: 1.55;
  }

  .onboardingPanel .onboardingCard .softButton {
    width: 100%;
    margin-top: 6px;
  }
}

[data-theme="dark"] .onboardingPanel .onboardingCard p,
html[data-theme="dark"] .onboardingPanel .onboardingCard p {
  color: #cbd5e1;
}
}

/* Final form-control normalization pass.
   This intentionally sits at the end so older page-specific rules cannot fall back to native controls. */
:where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]),
select,
textarea),
.paymentAgreementPanel :where(select, textarea),
.supportRequestForm :where(select, textarea),
.inlineForm :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea),
.internalNoteForm :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea),
.compactForm :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea),
.settingsGrid :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea),
.adminMigrationPromote :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea),
.sensitiveDialog :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
  box-sizing: border-box;
  width: 100%;
  min-height: 46px;
  padding: 12px 14px;
  border: 1px solid rgba(100, 116, 139, .28);
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .99), rgba(248, 250, 252, .94));
  color: #142033;
  font-weight: 750;
  line-height: 1.45;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .88), 0 10px 24px rgba(15, 23, 42, .04);
}

:where(textarea),
.paymentAgreementPanel textarea,
.supportRequestForm textarea,
.inlineForm textarea,
.internalNoteForm textarea,
.compactForm textarea,
.settingsGrid textarea,
.adminMigrationPromote textarea,
.sensitiveDialog textarea {
  min-height: 118px;
  resize: vertical;
}

:where(select),
.paymentAgreementPanel select,
.supportRequestForm select,
.inlineForm select,
.internalNoteForm select,
.compactForm select,
.settingsGrid select,
.adminMigrationPromote select,
.sensitiveDialog select {
  padding-right: 42px;
  appearance: none;
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, .99), rgba(248, 250, 252, .94)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%230f766e' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat, no-repeat;
  background-position: 0 0, right 14px center;
  background-size: auto, 18px 18px;
}

:where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]),
select,
textarea):focus,
.paymentAgreementPanel :where(select, textarea):focus,
.supportRequestForm :where(select, textarea):focus,
.inlineForm :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea):focus,
.internalNoteForm :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea):focus,
.compactForm :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea):focus,
.settingsGrid :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea):focus,
.adminMigrationPromote :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea):focus,
.sensitiveDialog :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea):focus {
  outline: none;
  border-color: rgba(15, 118, 110, .62);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(241, 253, 249, .96));
  box-shadow: 0 0 0 4px rgba(20, 184, 166, .16), 0 14px 30px rgba(15, 23, 42, .08);
}

input[type="file"]::file-selector-button {
  margin-right: 12px;
  padding: 9px 13px;
  border: 1px solid rgba(15, 118, 110, .28);
  border-radius: 12px;
  color: #075e55;
  background: linear-gradient(135deg, #ecfeff, #e7fff8);
  font-weight: 850;
  cursor: pointer;
}

[data-theme="dark"] :where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]),
select,
textarea),
html[data-theme="dark"] :where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]),
select,
textarea),
[data-theme="dark"] .paymentAgreementPanel :where(select, textarea),
html[data-theme="dark"] .paymentAgreementPanel :where(select, textarea),
[data-theme="dark"] .supportRequestForm :where(select, textarea),
html[data-theme="dark"] .supportRequestForm :where(select, textarea),
[data-theme="dark"] .inlineForm :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea),
html[data-theme="dark"] .inlineForm :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea),
[data-theme="dark"] .internalNoteForm :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea),
html[data-theme="dark"] .internalNoteForm :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea),
[data-theme="dark"] .compactForm :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea),
html[data-theme="dark"] .compactForm :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea),
[data-theme="dark"] .settingsGrid :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea),
html[data-theme="dark"] .settingsGrid :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea),
[data-theme="dark"] .adminMigrationPromote :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea),
html[data-theme="dark"] .adminMigrationPromote :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea),
[data-theme="dark"] .sensitiveDialog :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea),
html[data-theme="dark"] .sensitiveDialog :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
  color: #f8fafc;
  border-color: rgba(148, 163, 184, .34);
  background:
    linear-gradient(180deg, rgba(15, 23, 42, .98), rgba(17, 24, 39, .94));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 12px 28px rgba(0, 0, 0, .18);
}

[data-theme="dark"] :where(select),
html[data-theme="dark"] :where(select) {
  background-image:
    linear-gradient(180deg, rgba(15, 23, 42, .98), rgba(17, 24, 39, .94)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%235eead4' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}

[data-theme="dark"] :where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]),
select,
textarea)::placeholder,
html[data-theme="dark"] :where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]),
select,
textarea)::placeholder {
  color: #94a3b8;
  opacity: 1;
}

[data-theme="dark"] input[type="file"]::file-selector-button,
html[data-theme="dark"] input[type="file"]::file-selector-button {
  color: #ecfeff;
  background: linear-gradient(135deg, rgba(15, 118, 110, .88), rgba(30, 41, 59, .96));
  border-color: rgba(94, 234, 212, .42);
}

/* Page form polish pass.
   Older page modules use stronger selectors than the global reset, so keep this late and scoped. */
:is(
  .wishForm,
  .tripEditForm,
  .tripFilters,
  .orderFilters,
  .shippingForm,
  .evidenceUploadControls,
  .accountPanel,
  .loginForm,
  .securityMiniCard,
  .heroSearchField,
  .twoTools,
  .paymentAgreementPanel,
  .supportRequestForm,
  .internalNoteForm,
  .compactForm,
  .settingsGrid,
  .adminMigrationPromote,
  .sensitiveDialog
) :where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]), select, textarea) {
  box-sizing: border-box;
  min-height: 46px;
  padding: 12px 14px;
  border: 1px solid rgba(100, 116, 139, .28);
  border-radius: 14px;
  background: linear-gradient(180deg, #ffffff, #f8fafc);
  color: #142033;
  font-weight: 750;
  line-height: 1.45;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .88), 0 10px 24px rgba(15, 23, 42, .04);
}

:is(
  .wishForm,
  .tripEditForm,
  .tripFilters,
  .orderFilters,
  .shippingForm,
  .evidenceUploadControls,
  .accountPanel,
  .loginForm,
  .securityMiniCard,
  .heroSearchField,
  .twoTools,
  .paymentAgreementPanel,
  .supportRequestForm,
  .internalNoteForm,
  .compactForm,
  .settingsGrid,
  .adminMigrationPromote,
  .sensitiveDialog
) :where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]), select, textarea):focus {
  outline: none;
  border-color: rgba(15, 118, 110, .68);
  background: linear-gradient(180deg, #ffffff, #f1fdfa);
  box-shadow: 0 0 0 4px rgba(20, 184, 166, .16), 0 14px 30px rgba(15, 23, 42, .08);
}

:is(
  .wishForm,
  .tripEditForm,
  .tripFilters,
  .orderFilters,
  .shippingForm,
  .evidenceUploadControls,
  .accountPanel,
  .loginForm,
  .securityMiniCard,
  .heroSearchField,
  .twoTools,
  .paymentAgreementPanel,
  .supportRequestForm,
  .internalNoteForm,
  .compactForm,
  .settingsGrid,
  .adminMigrationPromote,
  .sensitiveDialog
) :where(select) {
  padding-right: 42px;
  appearance: none;
  background-image:
    linear-gradient(180deg, #ffffff, #f8fafc),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%230f766e' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat, no-repeat;
  background-position: 0 0, right 14px center;
  background-size: auto, 18px 18px;
}

:is(
  .wishForm,
  .tripEditForm,
  .shippingForm,
  .accountPanel,
  .paymentAgreementPanel,
  .supportRequestForm,
  .internalNoteForm,
  .compactForm,
  .settingsGrid,
  .adminMigrationPromote,
  .sensitiveDialog
) textarea {
  min-height: 118px;
  resize: vertical;
}

[data-theme="dark"] :is(
  .wishForm,
  .tripEditForm,
  .tripFilters,
  .orderFilters,
  .shippingForm,
  .evidenceUploadControls,
  .accountPanel,
  .loginForm,
  .securityMiniCard,
  .heroSearchField,
  .twoTools,
  .paymentAgreementPanel,
  .supportRequestForm,
  .internalNoteForm,
  .compactForm,
  .settingsGrid,
  .adminMigrationPromote,
  .sensitiveDialog
) :where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]), select, textarea),
html[data-theme="dark"] :is(
  .wishForm,
  .tripEditForm,
  .tripFilters,
  .orderFilters,
  .shippingForm,
  .evidenceUploadControls,
  .accountPanel,
  .loginForm,
  .securityMiniCard,
  .heroSearchField,
  .twoTools,
  .paymentAgreementPanel,
  .supportRequestForm,
  .internalNoteForm,
  .compactForm,
  .settingsGrid,
  .adminMigrationPromote,
  .sensitiveDialog
) :where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]), select, textarea) {
  color: #f8fafc;
  border-color: rgba(148, 163, 184, .38);
  background: linear-gradient(180deg, rgba(15, 23, 42, .98), rgba(17, 24, 39, .94));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 12px 28px rgba(0, 0, 0, .18);
}

[data-theme="dark"] :is(
  .wishForm,
  .tripEditForm,
  .tripFilters,
  .orderFilters,
  .shippingForm,
  .evidenceUploadControls,
  .accountPanel,
  .loginForm,
  .securityMiniCard,
  .heroSearchField,
  .twoTools,
  .paymentAgreementPanel,
  .supportRequestForm,
  .internalNoteForm,
  .compactForm,
  .settingsGrid,
  .adminMigrationPromote,
  .sensitiveDialog
) :where(select),
html[data-theme="dark"] :is(
  .wishForm,
  .tripEditForm,
  .tripFilters,
  .orderFilters,
  .shippingForm,
  .evidenceUploadControls,
  .accountPanel,
  .loginForm,
  .securityMiniCard,
  .heroSearchField,
  .twoTools,
  .paymentAgreementPanel,
  .supportRequestForm,
  .internalNoteForm,
  .compactForm,
  .settingsGrid,
  .adminMigrationPromote,
  .sensitiveDialog
) :where(select) {
  background-image:
    linear-gradient(180deg, rgba(15, 23, 42, .98), rgba(17, 24, 39, .94)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%235eead4' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}

@media (max-width: 760px) {
  .adminPriorityItem {
    grid-template-columns: 52px minmax(0, 1fr);
    align-items: center;
  }

  .adminPriorityItem em {
    grid-column: 2;
    justify-self: start;
    margin-top: 8px;
  }

  .adminWorkstreamHead {
    grid-template-columns: 52px minmax(0, 1fr);
  }

  .adminPriorityItem b,
  .adminWorkstreamHead b {
    width: 52px;
    min-width: 52px;
    height: 52px;
    border-radius: 16px;
  }

  .adminPriorityItem b::before,
  .adminWorkstreamHead b::before {
    width: 25px;
    height: 25px;
  }
}

/* Account notifications refresh: split inbox, preferences, and trip alerts into calmer panels. */
.accountPanel-notifications {
  align-items: start;
  gap: 22px;
}

.accountPanel-notifications > div {
  min-width: 0;
  padding: 20px;
  border: 1px solid rgba(20, 184, 166, .18);
  border-radius: 24px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .98), rgba(247, 252, 250, .90));
  box-shadow: 0 18px 42px rgba(15, 23, 42, .07);
}

.accountPanel-notifications > div:nth-child(1) {
  border-left: 4px solid #0f766e;
}

.accountPanel-notifications > div:nth-child(2) {
  border-left: 4px solid #2563eb;
}

.accountPanel-notifications > div:nth-child(3) {
  grid-column: 1 / -1;
  border-left: 4px solid #b45309;
}

.accountPanel-notifications h3 {
  margin: 0;
  color: #102033;
  font-size: 1.18rem;
  font-weight: 950;
}

.accountPanel-notifications .subHead {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(148, 163, 184, .20);
}

.accountPanel-notifications .subHead .tinyButton,
.accountPanel-notifications .compactList .tinyButton {
  min-height: 38px;
  padding: 8px 12px;
  border-radius: 14px;
  color: #075e55;
  background: linear-gradient(135deg, #ecfeff, #f0fdfa);
  border-color: rgba(20, 184, 166, .28);
  font-weight: 900;
}

.accountPanel-notifications .compactList {
  display: grid;
  gap: 10px;
}

.accountPanel-notifications .compactList > span {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px 14px;
  align-items: center;
  padding: 14px 14px 14px 18px;
  border: 1px solid rgba(148, 163, 184, .24);
  border-radius: 18px;
  background: rgba(255, 255, 255, .92);
  color: #102033;
  font-weight: 900;
}

.accountPanel-notifications .compactList > span::before {
  content: "";
  position: absolute;
  left: 0;
  top: 14px;
  bottom: 14px;
  width: 4px;
  border-radius: 999px;
  background: linear-gradient(180deg, #14b8a6, #f59e0b);
}

.accountPanel-notifications .compactList small {
  grid-column: 1;
  color: #526274;
  font-weight: 650;
  line-height: 1.55;
}

.accountPanel-notifications .compactList .tinyButton {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
}

.accountPanel-notifications .preferenceGrid {
  display: grid;
  gap: 14px;
}

.accountPanel-notifications .preferenceGroup {
  padding: 14px;
  border-radius: 20px;
  border-color: rgba(148, 163, 184, .24);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .96), rgba(248, 250, 252, .92));
}

.accountPanel-notifications .preferenceGroup > strong {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  color: #102033;
  font-size: 1rem;
  font-weight: 950;
}

.accountPanel-notifications .preferenceGroup > strong::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(135deg, #14b8a6, #fde68a);
  box-shadow: 0 0 0 5px rgba(20, 184, 166, .10);
}

.accountPanel-notifications .preferenceItem {
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding: 14px;
  border-radius: 18px;
  border-color: rgba(148, 163, 184, .24);
  background: rgba(255, 255, 255, .92);
}

.accountPanel-notifications .preferenceItem input {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: #0f766e;
}

.accountPanel-notifications .preferenceItem strong {
  color: #102033;
  font-weight: 950;
}

.accountPanel-notifications .preferenceItem small {
  color: #526274;
  font-weight: 650;
}

.accountPanel-notifications .preferenceItem.locked {
  background: linear-gradient(135deg, rgba(236, 253, 245, .96), rgba(240, 249, 255, .92));
}

.accountPanel-notifications .preferenceGrid > .primaryButton {
  justify-self: end;
  min-width: 180px;
  margin-top: 2px;
}

@media (max-width: 980px) {
  .accountPanel-notifications {
    grid-template-columns: 1fr;
  }

  .accountPanel-notifications > div,
  .accountPanel-notifications > div:nth-child(3) {
    grid-column: auto;
  }
}

@media (max-width: 640px) {
  .accountPanel-notifications > div {
    padding: 16px;
    border-radius: 22px;
  }

  .accountPanel-notifications .compactList > span {
    grid-template-columns: 1fr;
  }

  .accountPanel-notifications .compactList .tinyButton {
    grid-column: 1;
    grid-row: auto;
    justify-self: start;
  }

  .accountPanel-notifications .preferenceGrid > .primaryButton {
    justify-self: stretch;
    width: 100%;
  }
}

[data-theme="dark"] .accountPanel-notifications > div,
html[data-theme="dark"] .accountPanel-notifications > div {
  border-color: rgba(94, 234, 212, .18);
  background:
    linear-gradient(145deg, rgba(15, 23, 42, .98), rgba(17, 24, 39, .92));
  box-shadow: 0 22px 52px rgba(0, 0, 0, .28);
}

[data-theme="dark"] .accountPanel-notifications h3,
[data-theme="dark"] .accountPanel-notifications .compactList > span,
[data-theme="dark"] .accountPanel-notifications .preferenceGroup > strong,
[data-theme="dark"] .accountPanel-notifications .preferenceItem strong,
html[data-theme="dark"] .accountPanel-notifications h3,
html[data-theme="dark"] .accountPanel-notifications .compactList > span,
html[data-theme="dark"] .accountPanel-notifications .preferenceGroup > strong,
html[data-theme="dark"] .accountPanel-notifications .preferenceItem strong {
  color: #f8fafc;
}

[data-theme="dark"] .accountPanel-notifications .compactList > span,
[data-theme="dark"] .accountPanel-notifications .preferenceGroup,
[data-theme="dark"] .accountPanel-notifications .preferenceItem,
html[data-theme="dark"] .accountPanel-notifications .compactList > span,
html[data-theme="dark"] .accountPanel-notifications .preferenceGroup,
html[data-theme="dark"] .accountPanel-notifications .preferenceItem {
  border-color: rgba(148, 163, 184, .24);
  background: rgba(15, 23, 42, .72);
}

[data-theme="dark"] .accountPanel-notifications .compactList small,
[data-theme="dark"] .accountPanel-notifications .preferenceItem small,
html[data-theme="dark"] .accountPanel-notifications .compactList small,
html[data-theme="dark"] .accountPanel-notifications .preferenceItem small {
  color: #cbd5e1;
}

/* Account center polish: make overview, profile, security, and activity tabs feel like designed subpages. */
.accountView.hasUser {
  --account-panel-bg: linear-gradient(145deg, rgba(255, 255, 255, .98), rgba(248, 252, 250, .9));
  --account-panel-border: rgba(20, 184, 166, .18);
  --account-panel-shadow: 0 18px 42px rgba(15, 23, 42, .07);
}

.accountView.hasUser .accountSectionTabs {
  margin: 18px 0 28px;
  border-radius: 24px;
}

.accountView.hasUser.accountTab-profile > .accountProfileHero,
.accountView.hasUser.accountTab-profile > .accountPanel-profile,
.accountView.hasUser.accountTab-security > .securityUpgradeMount,
.accountView.hasUser.accountTab-security > .securityPanel,
.accountView.hasUser.accountTab-security > .accountPanel-security,
.accountView.hasUser.accountTab-activity > .accountPanel-activity,
.accountView.hasUser.accountTab-activity > .selfPublicProfileCard,
.accountView.hasUser.accountTab-activity > .recentReviewsCard,
.accountView.hasUser.accountTab-overview > .accountNextStepPanel,
.accountView.hasUser.accountTab-overview > .accountTrustSummary,
.accountView.hasUser.accountTab-overview > .accountGrid,
.accountView.hasUser.accountTab-overview > .readinessPanel {
  margin-top: 0;
  margin-bottom: 24px;
}

.accountView.hasUser.accountTab-profile > .accountPanel-profile,
.accountView.hasUser.accountTab-security > .accountPanel-security,
.accountView.hasUser.accountTab-activity > .accountPanel-activity {
  gap: 22px;
  align-items: start;
}

.accountView.hasUser.accountTab-profile > .accountPanel-profile > div,
.accountView.hasUser.accountTab-security > .accountPanel-security > div,
.accountView.hasUser.accountTab-activity > .accountPanel-activity > div,
.accountView.hasUser.accountTab-overview > .accountGrid > .accountCard,
.accountView.hasUser .securityUpgradeMount > div {
  min-width: 0;
  padding: 20px;
  color: #102033;
  border: 1px solid var(--account-panel-border);
  border-radius: 24px;
  background: var(--account-panel-bg);
  box-shadow: var(--account-panel-shadow);
}

.accountView.hasUser.accountTab-profile > .accountPanel-profile > div:first-child,
.accountView.hasUser.accountTab-security > .accountPanel-security > div:first-child,
.accountView.hasUser.accountTab-activity > .accountPanel-activity > div:first-child,
.accountView.hasUser.accountTab-overview > .accountTrustSummary,
.accountView.hasUser.accountTab-overview > .accountNextStepPanel {
  border-left: 4px solid #0f766e;
}

.accountView.hasUser.accountTab-profile > .accountPanel-profile > div:nth-child(2),
.accountView.hasUser.accountTab-security > .accountPanel-security > div:nth-child(2),
.accountView.hasUser.accountTab-activity > .accountPanel-activity > div:nth-child(2) {
  border-left: 4px solid #2563eb;
}

.accountView.hasUser.accountTab-profile > .accountPanel-profile > div:nth-child(3),
.accountView.hasUser.accountTab-security > .accountPanel-security > div:nth-child(3),
.accountView.hasUser.accountTab-activity > .accountPanel-activity > div:nth-child(3) {
  border-left: 4px solid #b45309;
}

.accountView.hasUser.accountTab-profile h3,
.accountView.hasUser.accountTab-security h3,
.accountView.hasUser.accountTab-activity h3,
.accountView.hasUser.accountTab-overview h3,
.accountView.hasUser.accountTab-profile h2,
.accountView.hasUser.accountTab-security h2,
.accountView.hasUser.accountTab-activity h2,
.accountView.hasUser.accountTab-overview h2 {
  color: #102033;
  font-weight: 950;
  letter-spacing: 0;
}

.accountView.hasUser.accountTab-profile p,
.accountView.hasUser.accountTab-security p,
.accountView.hasUser.accountTab-activity p,
.accountView.hasUser.accountTab-overview p,
.accountView.hasUser.accountTab-profile small,
.accountView.hasUser.accountTab-security small,
.accountView.hasUser.accountTab-activity small,
.accountView.hasUser.accountTab-overview small {
  color: #526274;
  line-height: 1.55;
}

.accountView.hasUser .accountQuickStats,
.accountView.hasUser .accountSetupStrip,
.accountView.hasUser .accountStatusStrip,
.accountView.hasUser .selfPublicProfileStats,
.accountView.hasUser .accountShortcutGrid {
  gap: 14px;
}

.accountView.hasUser .accountQuickStats article,
.accountView.hasUser .accountSetupStrip span,
.accountView.hasUser .accountStatusStrip span,
.accountView.hasUser .selfPublicProfileStats span,
.accountView.hasUser .accountShortcutGrid a,
.accountView.hasUser .accountSessionList article {
  min-height: 86px;
  padding: 14px;
  color: #102033;
  border: 1px solid rgba(148, 163, 184, .24);
  border-radius: 20px;
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 12px 28px rgba(15, 23, 42, .055);
}

.accountView.hasUser .accountQuickStats strong,
.accountView.hasUser .accountSetupStrip b,
.accountView.hasUser .accountStatusStrip b,
.accountView.hasUser .selfPublicProfileStats b,
.accountView.hasUser .accountShortcutGrid strong {
  color: #0f766e;
  font-weight: 950;
}

.accountView.hasUser .profileQuickForm,
.accountView.hasUser .accountQuickPassword {
  padding: 16px;
  border: 1px solid rgba(148, 163, 184, .24);
  border-radius: 22px;
  background: rgba(255, 255, 255, .72);
}

.accountView.hasUser .profileQuickForm input,
.accountView.hasUser .accountQuickPassword input,
.accountView.hasUser .accountPanel input:not([type="checkbox"]):not([type="radio"]),
.accountView.hasUser .accountPanel select,
.accountView.hasUser .accountPanel textarea {
  min-height: 50px;
  padding: 0 14px;
  color: #102033;
  border: 1px solid rgba(148, 163, 184, .34);
  border-radius: 16px;
  background: #ffffff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .86);
}

.accountView.hasUser .accountPanel textarea {
  padding-top: 12px;
  padding-bottom: 12px;
}

.accountView.hasUser .accountQuickNextList button,
.accountView.hasUser .accountNextStepList button {
  border-radius: 22px;
}

.accountView.hasUser .accountQuickNextList button:focus-visible,
.accountView.hasUser .accountNextStepList button:focus-visible,
.accountView.hasUser .accountShortcutGrid a:focus-visible {
  outline: 3px solid rgba(20, 184, 166, .32);
  outline-offset: 3px;
}

[data-theme="dark"] .accountView.hasUser,
html[data-theme="dark"] .accountView.hasUser {
  --account-panel-bg: linear-gradient(145deg, rgba(15, 23, 42, .98), rgba(17, 24, 39, .92));
  --account-panel-border: rgba(94, 234, 212, .18);
  --account-panel-shadow: 0 22px 52px rgba(0, 0, 0, .28);
}

[data-theme="dark"] .accountView.hasUser.accountTab-profile > .accountPanel-profile > div,
[data-theme="dark"] .accountView.hasUser.accountTab-security > .accountPanel-security > div,
[data-theme="dark"] .accountView.hasUser.accountTab-activity > .accountPanel-activity > div,
[data-theme="dark"] .accountView.hasUser.accountTab-overview > .accountGrid > .accountCard,
[data-theme="dark"] .accountView.hasUser .securityUpgradeMount > div,
html[data-theme="dark"] .accountView.hasUser.accountTab-profile > .accountPanel-profile > div,
html[data-theme="dark"] .accountView.hasUser.accountTab-security > .accountPanel-security > div,
html[data-theme="dark"] .accountView.hasUser.accountTab-activity > .accountPanel-activity > div,
html[data-theme="dark"] .accountView.hasUser.accountTab-overview > .accountGrid > .accountCard,
html[data-theme="dark"] .accountView.hasUser .securityUpgradeMount > div {
  color: #f8fafc;
  border-color: var(--account-panel-border);
  background: var(--account-panel-bg);
  box-shadow: var(--account-panel-shadow);
}

[data-theme="dark"] .accountView.hasUser.accountTab-profile h3,
[data-theme="dark"] .accountView.hasUser.accountTab-security h3,
[data-theme="dark"] .accountView.hasUser.accountTab-activity h3,
[data-theme="dark"] .accountView.hasUser.accountTab-overview h3,
[data-theme="dark"] .accountView.hasUser.accountTab-profile h2,
[data-theme="dark"] .accountView.hasUser.accountTab-security h2,
[data-theme="dark"] .accountView.hasUser.accountTab-activity h2,
[data-theme="dark"] .accountView.hasUser.accountTab-overview h2,
html[data-theme="dark"] .accountView.hasUser.accountTab-profile h3,
html[data-theme="dark"] .accountView.hasUser.accountTab-security h3,
html[data-theme="dark"] .accountView.hasUser.accountTab-activity h3,
html[data-theme="dark"] .accountView.hasUser.accountTab-overview h3,
html[data-theme="dark"] .accountView.hasUser.accountTab-profile h2,
html[data-theme="dark"] .accountView.hasUser.accountTab-security h2,
html[data-theme="dark"] .accountView.hasUser.accountTab-activity h2,
html[data-theme="dark"] .accountView.hasUser.accountTab-overview h2 {
  color: #f8fafc;
}

[data-theme="dark"] .accountView.hasUser.accountTab-profile p,
[data-theme="dark"] .accountView.hasUser.accountTab-security p,
[data-theme="dark"] .accountView.hasUser.accountTab-activity p,
[data-theme="dark"] .accountView.hasUser.accountTab-overview p,
[data-theme="dark"] .accountView.hasUser.accountTab-profile small,
[data-theme="dark"] .accountView.hasUser.accountTab-security small,
[data-theme="dark"] .accountView.hasUser.accountTab-activity small,
[data-theme="dark"] .accountView.hasUser.accountTab-overview small,
html[data-theme="dark"] .accountView.hasUser.accountTab-profile p,
html[data-theme="dark"] .accountView.hasUser.accountTab-security p,
html[data-theme="dark"] .accountView.hasUser.accountTab-activity p,
html[data-theme="dark"] .accountView.hasUser.accountTab-overview p,
html[data-theme="dark"] .accountView.hasUser.accountTab-profile small,
html[data-theme="dark"] .accountView.hasUser.accountTab-security small,
html[data-theme="dark"] .accountView.hasUser.accountTab-activity small,
html[data-theme="dark"] .accountView.hasUser.accountTab-overview small {
  color: #cbd5e1;
}

[data-theme="dark"] .accountView.hasUser .accountQuickStats article,
[data-theme="dark"] .accountView.hasUser .accountSetupStrip span,
[data-theme="dark"] .accountView.hasUser .accountStatusStrip span,
[data-theme="dark"] .accountView.hasUser .selfPublicProfileStats span,
[data-theme="dark"] .accountView.hasUser .accountShortcutGrid a,
[data-theme="dark"] .accountView.hasUser .accountSessionList article,
html[data-theme="dark"] .accountView.hasUser .accountQuickStats article,
html[data-theme="dark"] .accountView.hasUser .accountSetupStrip span,
html[data-theme="dark"] .accountView.hasUser .accountStatusStrip span,
html[data-theme="dark"] .accountView.hasUser .selfPublicProfileStats span,
html[data-theme="dark"] .accountView.hasUser .accountShortcutGrid a,
html[data-theme="dark"] .accountView.hasUser .accountSessionList article {
  color: #f8fafc;
  border-color: rgba(148, 163, 184, .24);
  background: rgba(15, 23, 42, .72);
}

[data-theme="dark"] .accountView.hasUser .profileQuickForm,
[data-theme="dark"] .accountView.hasUser .accountQuickPassword,
html[data-theme="dark"] .accountView.hasUser .profileQuickForm,
html[data-theme="dark"] .accountView.hasUser .accountQuickPassword {
  border-color: rgba(148, 163, 184, .24);
  background: rgba(15, 23, 42, .52);
}

[data-theme="dark"] .accountView.hasUser .profileQuickForm input,
[data-theme="dark"] .accountView.hasUser .accountQuickPassword input,
[data-theme="dark"] .accountView.hasUser .accountPanel input:not([type="checkbox"]):not([type="radio"]),
[data-theme="dark"] .accountView.hasUser .accountPanel select,
[data-theme="dark"] .accountView.hasUser .accountPanel textarea,
html[data-theme="dark"] .accountView.hasUser .profileQuickForm input,
html[data-theme="dark"] .accountView.hasUser .accountQuickPassword input,
html[data-theme="dark"] .accountView.hasUser .accountPanel input:not([type="checkbox"]):not([type="radio"]),
html[data-theme="dark"] .accountView.hasUser .accountPanel select,
html[data-theme="dark"] .accountView.hasUser .accountPanel textarea {
  color: #0f172a;
  border-color: rgba(226, 232, 240, .72);
  background: #ffffff;
}

@media (max-width: 980px) {
  .accountView.hasUser.accountTab-profile > .accountPanel-profile,
  .accountView.hasUser.accountTab-security > .accountPanel-security,
  .accountView.hasUser.accountTab-activity > .accountPanel-activity {
    grid-template-columns: 1fr;
  }

  .accountView.hasUser .accountSectionTabs {
    margin-bottom: 22px;
  }
}

@media (max-width: 640px) {
  .accountView.hasUser .accountSectionTabs {
    margin: 12px 0 20px;
    border-radius: 20px;
  }

  .accountView.hasUser.accountTab-profile > .accountPanel-profile > div,
  .accountView.hasUser.accountTab-security > .accountPanel-security > div,
  .accountView.hasUser.accountTab-activity > .accountPanel-activity > div,
  .accountView.hasUser.accountTab-overview > .accountGrid > .accountCard,
  .accountView.hasUser .securityUpgradeMount > div {
    padding: 16px;
    border-radius: 22px;
  }

  .accountView.hasUser.accountTab-profile > .accountProfileHero,
  .accountView.hasUser.accountTab-profile > .accountPanel-profile,
  .accountView.hasUser.accountTab-security > .securityUpgradeMount,
  .accountView.hasUser.accountTab-security > .securityPanel,
  .accountView.hasUser.accountTab-security > .accountPanel-security,
  .accountView.hasUser.accountTab-activity > .accountPanel-activity,
  .accountView.hasUser.accountTab-activity > .selfPublicProfileCard,
  .accountView.hasUser.accountTab-activity > .recentReviewsCard,
  .accountView.hasUser.accountTab-overview > .accountNextStepPanel,
  .accountView.hasUser.accountTab-overview > .accountTrustSummary,
  .accountView.hasUser.accountTab-overview > .accountGrid,
  .accountView.hasUser.accountTab-overview > .readinessPanel {
    margin-bottom: 18px;
  }
}

/* 2026-07-27 final app-quality pass.
   Keep this at the very end so old page-specific rules cannot reintroduce weak contrast. */
:root {
  --bm-app-surface: rgba(255, 255, 255, .90);
  --bm-app-surface-strong: #ffffff;
  --bm-app-line: rgba(15, 118, 110, .18);
  --bm-app-shadow: 0 20px 60px rgba(15, 23, 42, .08);
  --bm-app-radius: 24px;
  --bm-app-radius-sm: 18px;
  --bm-app-action: #10b8a6;
  --bm-app-action-ink: #052f2a;
}

body {
  background:
    radial-gradient(circle at 12% 0%, rgba(16, 184, 166, .12), transparent 30%),
    radial-gradient(circle at 92% 6%, rgba(245, 191, 74, .13), transparent 28%),
    linear-gradient(180deg, #fffdf8 0%, #f6fbf9 52%, #fffaf1 100%);
}

.panel > section,
.viewGrid > section,
.accountView.hasUser,
.adminSubPanel,
.supportDesk,
.policyQaView > section,
.mapReadableView > section,
.formView > section,
.quickStartPanel,
.marketPulse,
.tripHero,
.travelerDeskHero {
  border-radius: var(--bm-app-radius);
}

.card,
.stat,
.adminTile,
.countryCard,
.areaHumanCard,
.areaList article,
.tripCard,
.matchCard,
.orderCard,
.accountCard,
.accountPanel,
.accountProfileHero,
.recentReviewsCard,
.notificationCard,
.settingsGrid article,
.readinessPanel article,
.compactList span,
.paymentAgreementPanel,
.supportRequestForm,
.riskCommandGrid article {
  border-radius: var(--bm-app-radius-sm);
  box-shadow: var(--bm-app-shadow);
}

.primaryButton,
button.primaryButton,
.button.primary,
.ctaButton,
.submitButton,
.mobileOrderNextStep .primaryButton {
  min-height: 46px;
  color: var(--bm-app-action-ink);
  background: linear-gradient(135deg, #5eead4 0%, #f4d06f 100%);
  border: 1px solid rgba(15, 118, 110, .26);
  border-radius: 999px;
  box-shadow: 0 14px 34px rgba(16, 184, 166, .18);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

.primaryButton:hover,
button.primaryButton:hover,
.button.primary:hover,
.ctaButton:hover,
.submitButton:hover {
  transform: translateY(-1px);
  filter: saturate(1.05);
  box-shadow: 0 20px 48px rgba(16, 184, 166, .23);
}

button:disabled,
.primaryButton:disabled,
.submitButton:disabled {
  color: #475569;
  background: #e2e8f0;
  border-color: #cbd5e1;
  box-shadow: none;
  opacity: 1;
}

.softButton,
.tinyButton,
.ghostButton,
.secondaryAction,
.tabs button,
.rail button,
.accountSectionTabs button,
.selfServiceTabs button {
  border-radius: 999px;
}

.status,
.badge,
.countryCard .status,
.countryCard .badge,
.areaHumanCard .status,
.areaHumanCard .badge {
  color: #064e46;
  background: #ecfdf5;
  border: 1px solid rgba(15, 118, 110, .22);
  border-radius: 999px;
  font-weight: 900;
}

.status.review,
.status.matching,
.status.new,
.badge.warning {
  color: #78350f;
  background: #fffbeb;
  border-color: rgba(245, 158, 11, .34);
}

.status.danger,
.badge.danger {
  color: #7f1d1d;
  background: #fef2f2;
  border-color: rgba(239, 68, 68, .32);
}

.adminTile {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  min-height: 96px;
  padding: 18px;
}

.adminTile .glyph,
.stat .glyph,
.quickStartCard .glyph,
.mobileQuickTasks .glyph {
  display: grid;
  position: relative;
  place-items: center;
  width: 48px;
  height: 48px;
  min-width: 48px;
  color: #063b36;
  background: linear-gradient(135deg, #ccfbf1 0%, #fde68a 100%);
  border: 1px solid rgba(15, 118, 110, .18);
  border-radius: 18px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .40), 0 10px 22px rgba(15, 118, 110, .12);
}

.adminTile .glyph {
  font-size: 0;
}

.adminTile .glyph::before {
  content: "";
  width: 18px;
  height: 18px;
  border: 3px solid currentColor;
  border-radius: 7px;
}

.adminTile .glyph::after {
  content: "";
  position: absolute;
  width: 12px;
  height: 3px;
  background: currentColor;
  border-radius: 999px;
  transform: translate(8px, -9px);
}

.quickStartCard,
.mobileQuickTasks button {
  grid-template-columns: 56px minmax(0, 1fr) auto;
  gap: 14px;
  min-height: 104px;
  padding: 16px;
  background: linear-gradient(135deg, rgba(255,255,255,.96), rgba(236,253,245,.82));
  border-color: var(--bm-app-line);
}

.quickStartCard strong,
.mobileQuickTasks span {
  color: #132033;
  font-size: 1rem;
}

.quickStartCard small,
.mobileQuickTasks small {
  color: #475569;
}

.quickStartCard b {
  color: #04786d;
}

.accountSectionTabs {
  position: relative;
  z-index: 4;
  gap: 10px;
  padding: 10px;
  margin-bottom: 28px;
  background: rgba(255, 255, 255, .88);
  border: 1px solid rgba(15, 118, 110, .18);
  border-radius: 28px;
  box-shadow: 0 18px 54px rgba(15, 23, 42, .09);
  backdrop-filter: blur(16px);
}

.accountSectionTabs button {
  min-height: 58px;
  padding: 10px 18px;
  background: #f8fafc;
  border: 1px solid rgba(15, 118, 110, .16);
}

.accountSectionTabs button.active {
  color: #062f2b;
  background: linear-gradient(135deg, #ccfbf1, #fde68a);
  border-color: rgba(15, 118, 110, .32);
}

.toastClose {
  position: relative;
  width: 36px;
  height: 36px;
  min-width: 36px;
  padding: 0;
  overflow: hidden;
  color: transparent;
  font-size: 0;
}

.toastClose::before,
.toastClose::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 2px;
  background: #0f766e;
  border-radius: 999px;
}

.toastClose::before { transform: translate(-50%, -50%) rotate(45deg); }
.toastClose::after { transform: translate(-50%, -50%) rotate(-45deg); }

:where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]),
select,
textarea) {
  border-radius: 16px;
  border: 1px solid rgba(100, 116, 139, .30);
  background: linear-gradient(180deg, #ffffff, #f8fafc);
  color: #132033;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.86), 0 10px 26px rgba(15,23,42,.04);
}

textarea {
  min-height: 124px;
  line-height: 1.55;
}

.marketPulse {
  box-shadow: 0 28px 80px rgba(15, 23, 42, .10);
}

.pulseFeed h3::before,
.pulseTrips h3::before {
  content: "";
}

.pulseFeed h3::after,
.pulseTrips h3::after {
  content: "";
  display: inline-block;
  width: 34px;
  height: 10px;
  margin-left: -44px;
  border-radius: 999px;
  background:
    radial-gradient(circle at 6px 5px, #0f766e 0 4px, transparent 5px),
    radial-gradient(circle at 18px 5px, #14b8a6 0 4px, transparent 5px),
    radial-gradient(circle at 30px 5px, #f4d06f 0 4px, transparent 5px);
}

@media (max-width: 760px) {
  body {
    background:
      radial-gradient(circle at 12% 0%, rgba(16, 184, 166, .16), transparent 32%),
      linear-gradient(180deg, #f8fffc 0%, #f6fbf9 58%, #fffaf1 100%);
  }

  .topbar {
    border-radius: 0 0 22px 22px;
  }

  .quickStartPanel,
  .marketPulse,
  .accountView.hasUser,
  .adminSubPanel,
  .policyQaView > section,
  .mapReadableView > section,
  .formView > section {
    border-radius: 26px;
  }

  .adminTile {
    grid-template-columns: 54px minmax(0, 1fr);
    min-height: 96px;
  }

  .adminTile .buttonRow,
  .adminTile .tinyButton,
  .adminTile > button {
    grid-column: 2;
    justify-self: start;
  }

  .quickStartCard,
  .mobileQuickTasks button {
    grid-template-columns: 54px minmax(0, 1fr);
  }

  .quickStartCard b {
    grid-column: 2;
    justify-self: start;
  }

  .mobileActionBar {
    left: 12px;
    right: 12px;
    bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    padding: 8px;
    background: rgba(255, 255, 255, .94);
    border: 1px solid rgba(15, 118, 110, .20);
    border-radius: 26px;
    box-shadow: 0 24px 60px rgba(15, 23, 42, .18);
  }

  .mobileActionBar button {
    min-height: 58px;
    border-radius: 20px;
  }

  .mobileActionBar button.active {
    background: linear-gradient(135deg, #ccfbf1, #fde68a);
    box-shadow: 0 12px 30px rgba(15, 118, 110, .18);
  }

  .accountSectionTabs {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(138px, 42vw);
    overflow-x: auto;
    margin: 14px 0 28px;
    scroll-snap-type: x proximity;
  }

  .accountSectionTabs button {
    scroll-snap-align: start;
  }
}

[data-theme="dark"] body,
html[data-theme="dark"] body {
  background:
    radial-gradient(circle at 14% 0%, rgba(20, 184, 166, .18), transparent 32%),
    radial-gradient(circle at 90% 6%, rgba(244, 208, 111, .12), transparent 28%),
    linear-gradient(180deg, #07111d 0%, #0d1724 56%, #09131f 100%);
  color: #f8fafc;
}

[data-theme="dark"] .panel > section,
html[data-theme="dark"] .panel > section,
[data-theme="dark"] .viewGrid > section,
html[data-theme="dark"] .viewGrid > section,
[data-theme="dark"] .card,
html[data-theme="dark"] .card,
[data-theme="dark"] .stat,
html[data-theme="dark"] .stat,
[data-theme="dark"] .adminTile,
html[data-theme="dark"] .adminTile,
[data-theme="dark"] .countryCard,
html[data-theme="dark"] .countryCard,
[data-theme="dark"] .areaHumanCard,
html[data-theme="dark"] .areaHumanCard,
[data-theme="dark"] .areaList article,
html[data-theme="dark"] .areaList article,
[data-theme="dark"] .tripCard,
html[data-theme="dark"] .tripCard,
[data-theme="dark"] .matchCard,
html[data-theme="dark"] .matchCard,
[data-theme="dark"] .orderCard,
html[data-theme="dark"] .orderCard,
[data-theme="dark"] .accountCard,
html[data-theme="dark"] .accountCard,
[data-theme="dark"] .accountPanel,
html[data-theme="dark"] .accountPanel,
[data-theme="dark"] .accountProfileHero,
html[data-theme="dark"] .accountProfileHero,
[data-theme="dark"] .recentReviewsCard,
html[data-theme="dark"] .recentReviewsCard,
[data-theme="dark"] .notificationCard,
html[data-theme="dark"] .notificationCard,
[data-theme="dark"] .settingsGrid article,
html[data-theme="dark"] .settingsGrid article,
[data-theme="dark"] .readinessPanel article,
html[data-theme="dark"] .readinessPanel article,
[data-theme="dark"] .compactList span,
html[data-theme="dark"] .compactList span,
[data-theme="dark"] .paymentAgreementPanel,
html[data-theme="dark"] .paymentAgreementPanel,
[data-theme="dark"] .supportRequestForm,
html[data-theme="dark"] .supportRequestForm,
[data-theme="dark"] .riskCommandGrid article,
html[data-theme="dark"] .riskCommandGrid article {
  color: #f8fafc;
  background:
    linear-gradient(145deg, rgba(255,255,255,.065), rgba(255,255,255,.018)),
    rgba(15, 23, 42, .88);
  border-color: rgba(148, 163, 184, .24);
  box-shadow: 0 22px 58px rgba(0, 0, 0, .22);
}

[data-theme="dark"] :where(.panel, .viewGrid, .card, .stat, .adminTile, .countryCard, .areaList article, .tripCard, .matchCard, .orderCard, .accountCard, .accountPanel, .notificationCard) p,
html[data-theme="dark"] :where(.panel, .viewGrid, .card, .stat, .adminTile, .countryCard, .areaList article, .tripCard, .matchCard, .orderCard, .accountCard, .accountPanel, .notificationCard) p,
[data-theme="dark"] :where(.panel, .viewGrid, .card, .stat, .adminTile, .countryCard, .areaList article, .tripCard, .matchCard, .orderCard, .accountCard, .accountPanel, .notificationCard) small,
html[data-theme="dark"] :where(.panel, .viewGrid, .card, .stat, .adminTile, .countryCard, .areaList article, .tripCard, .matchCard, .orderCard, .accountCard, .accountPanel, .notificationCard) small {
  color: #cbd5e1;
}

[data-theme="dark"] :where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]), select, textarea),
html[data-theme="dark"] :where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]), select, textarea) {
  color: #f8fafc;
  background: rgba(15, 23, 42, .94);
  border-color: rgba(148, 163, 184, .36);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}

[data-theme="dark"] :where(input, textarea)::placeholder,
html[data-theme="dark"] :where(input, textarea)::placeholder {
  color: #94a3b8;
}

[data-theme="dark"] .adminTile .glyph,
html[data-theme="dark"] .adminTile .glyph,
[data-theme="dark"] .stat .glyph,
html[data-theme="dark"] .stat .glyph,
[data-theme="dark"] .quickStartCard .glyph,
html[data-theme="dark"] .quickStartCard .glyph,
[data-theme="dark"] .mobileQuickTasks .glyph,
html[data-theme="dark"] .mobileQuickTasks .glyph {
  color: #052f2a;
  background: linear-gradient(135deg, #99f6e4, #fde68a);
  border-color: rgba(255, 255, 255, .22);
}

[data-theme="dark"] .accountSectionTabs,
html[data-theme="dark"] .accountSectionTabs,
[data-theme="dark"] .mobileActionBar,
html[data-theme="dark"] .mobileActionBar,
[data-theme="dark"] .tabs,
html[data-theme="dark"] .tabs {
  background: rgba(15, 23, 42, .92);
  border-color: rgba(148, 163, 184, .24);
}

[data-theme="dark"] .accountSectionTabs button,
html[data-theme="dark"] .accountSectionTabs button,
[data-theme="dark"] .mobileActionBar button,
html[data-theme="dark"] .mobileActionBar button,
[data-theme="dark"] .tabs button,
html[data-theme="dark"] .tabs button {
  color: #dbe7f3;
  background: rgba(15, 23, 42, .72);
  border-color: rgba(148, 163, 184, .22);
}

[data-theme="dark"] .accountSectionTabs button.active,
html[data-theme="dark"] .accountSectionTabs button.active,
[data-theme="dark"] .mobileActionBar button.active,
html[data-theme="dark"] .mobileActionBar button.active,
[data-theme="dark"] .tabs button.active,
html[data-theme="dark"] .tabs button.active {
  color: #05131f;
  background: linear-gradient(135deg, #99f6e4, #fde68a);
  border-color: rgba(255, 255, 255, .26);
}

/* 2026-07-27 IA polish: make high-traffic pages feel like intentional app screens. */
.heroSearchFirst,
.marketPulse,
.accountView.hasUser,
.adminShellHero,
.adminFocusPanel,
.travelerDeskHero,
.tripHero,
.formView > .sectionHead,
.panel > section > .sectionHead {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.heroSearchFirst::before,
.marketPulse::before,
.accountView.hasUser::before,
.adminShellHero::before,
.adminFocusPanel::before,
.travelerDeskHero::before,
.tripHero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(circle at 12% 8%, rgba(94, 234, 212, .20), transparent 26%),
    radial-gradient(circle at 88% 16%, rgba(245, 191, 74, .16), transparent 30%),
    linear-gradient(135deg, rgba(255, 255, 255, .86), rgba(236, 253, 245, .60));
}

.heroSearchFirst,
.marketPulse,
.adminShellHero,
.travelerDeskHero,
.tripHero {
  border: 1px solid rgba(15, 118, 110, .18);
  box-shadow: 0 30px 90px rgba(15, 23, 42, .10);
}

.quickStartHead,
.marketPulseHead,
.sectionHead.tight,
.formView > .sectionHead,
.panel > section > .sectionHead {
  gap: 10px;
}

.quickStartHead span,
.marketPulseHead .eyebrow,
.sectionHead.tight span,
.formView > .sectionHead span,
.panel > section > .sectionHead span {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: 28px;
  padding: 5px 10px;
  color: #075e55;
  background: rgba(204, 251, 241, .80);
  border: 1px solid rgba(15, 118, 110, .16);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 950;
}

.quickStartHead strong,
.marketPulseHead h2,
.sectionHead h2,
.sectionHead h3,
.formView > .sectionHead h2,
.panel > section > .sectionHead h2 {
  letter-spacing: 0;
}

.marketPulseGrid {
  align-items: stretch;
}

.pulseFeed,
.pulseTrips {
  display: grid;
  align-content: start;
  gap: 14px;
  min-height: 100%;
  border-radius: 26px;
}

.pulseItem {
  min-height: 104px;
}

.pulseItem strong {
  display: block;
  margin-bottom: 5px;
  color: #102033;
  font-size: 1.02rem;
}

.pulseItem small,
.pulseItem p {
  color: #526274;
}

.pulseIcon,
.countryFlag,
.memberAvatar {
  flex: 0 0 auto;
}

.adminShell {
  max-width: 1540px;
}

.adminSectionTabs {
  top: 70px;
  margin: 8px 0 22px;
}

.adminShell .adminTile > span:first-child:not(.countryLabel),
.adminPriorityItem b,
.adminWorkstreamHead b {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  min-width: 56px;
  color: transparent;
  font-size: 0;
  border-radius: 18px;
  background: linear-gradient(135deg, #ccfbf1, #fde68a);
  border: 1px solid rgba(15, 118, 110, .18);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.46), 0 12px 28px rgba(15, 118, 110, .12);
}

/* 2026-07-27 Market preview hardening: keep flags visible and wish preview usable on mobile. */
.countryFlag[class*="flag-"] {
  color: inherit !important;
  background: rgba(255, 255, 255, .94) !important;
}

.countryFlag[class*="flag-"]::before,
.countryFlag[class*="flag-"]::after {
  content: none !important;
  display: none !important;
}

.pulseIcon .countryFlag,
.wishVisual .countryFlag,
.featuredWishCard .countryFlag {
  display: inline-grid !important;
  place-items: center;
  width: 42px;
  height: 42px;
  max-width: none;
  max-height: none;
  font-size: 24px;
  line-height: 1;
}

.pulseItem {
  grid-template-columns: 58px minmax(0, 1fr) auto;
  gap: 14px;
  padding: 16px;
}

.pulseIcon {
  width: 58px;
  height: 58px;
  border-radius: 20px;
  background: linear-gradient(135deg, #dcfce7, #fef3c7);
  border: 1px solid rgba(15, 118, 110, .18);
}

.pulseItem .tinyButton {
  min-width: 82px;
  min-height: 38px;
  justify-self: end;
  font-weight: 900;
}

.sheetBackdrop.wishPreviewBackdrop,
.wishPreviewBackdrop {
  position: fixed;
  inset: 0;
  z-index: 12000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(15, 23, 42, .48);
  backdrop-filter: blur(10px);
}

.wishPreviewSheet {
  max-height: calc(100dvh - 36px);
  overflow: auto;
}

.wishPreviewSheet .sheetClose {
  position: absolute;
  top: 14px;
  right: 14px;
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  color: #0f172a;
  background: rgba(255, 255, 255, .92);
  border: 1px solid rgba(15, 118, 110, .18);
  box-shadow: 0 10px 24px rgba(15, 23, 42, .14);
}

[data-theme="dark"] .countryFlag[class*="flag-"],
html[data-theme="dark"] .countryFlag[class*="flag-"] {
  color: inherit !important;
  background: rgba(248, 250, 252, .96) !important;
}

[data-theme="dark"] .pulseIcon,
html[data-theme="dark"] .pulseIcon {
  background: linear-gradient(135deg, #99f6e4, #fde68a);
  border-color: rgba(255, 255, 255, .22);
}

@media (max-width: 720px) {
  .pulseFeed,
  .pulseTrips {
    padding: 18px;
    border-radius: 28px;
  }

  .pulseItem {
    grid-template-columns: 58px minmax(0, 1fr);
    min-height: 132px;
    border-radius: 24px;
  }

  .pulseItem .tinyButton {
    grid-column: 2;
    justify-self: start;
    min-width: 104px;
  }

  .sheetBackdrop.wishPreviewBackdrop,
  .wishPreviewBackdrop {
    align-items: end;
    padding: 12px;
  }

  .wishPreviewSheet {
    width: 100%;
    max-height: calc(100dvh - 24px);
    border-radius: 26px;
  }
}

.adminShell .adminTile > span:first-child:not(.countryLabel)::before {
  content: "";
  width: 24px;
  height: 24px;
  background: #0f766e;
  -webkit-mask:
    linear-gradient(#000 0 0) 12% 15% / 76% 14% no-repeat,
    linear-gradient(#000 0 0) 12% 43% / 76% 14% no-repeat,
    linear-gradient(#000 0 0) 12% 71% / 54% 14% no-repeat;
  mask:
    linear-gradient(#000 0 0) 12% 15% / 76% 14% no-repeat,
    linear-gradient(#000 0 0) 12% 43% / 76% 14% no-repeat,
    linear-gradient(#000 0 0) 12% 71% / 54% 14% no-repeat;
}

.adminShell .adminTile {
  grid-template-columns: 56px minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
}

.adminShell .adminTile strong {
  margin: 0 0 4px;
  font-size: 1.05rem;
}

.adminShell .adminTile p,
.adminShell .adminTile small {
  margin: 0;
}

.adminFocusPanel {
  padding: clamp(20px, 2.5vw, 30px);
  background:
    linear-gradient(135deg, rgba(255,255,255,.95), rgba(236,253,245,.80));
  border: 1px solid rgba(15, 118, 110, .18);
}

.adminFocusList {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
}

.adminFocusList article {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "label value"
    "detail detail"
    "actions actions";
  align-content: start;
  gap: 8px 14px;
  min-height: 132px;
  padding: 18px;
  border-radius: 22px;
  background: rgba(255,255,255,.92);
}

.adminFocusList span {
  grid-area: label;
  color: #0f766e;
  font-weight: 950;
}

.adminFocusList strong {
  grid-area: value;
  justify-self: end;
  color: #102033;
  font-size: 1.15rem;
}

.adminFocusList small {
  grid-area: detail;
  color: #526274;
  line-height: 1.55;
}

.adminMemberActions {
  grid-area: actions;
  justify-content: flex-start;
  width: auto;
}

.accountView.hasUser {
  padding-top: clamp(18px, 2vw, 26px);
}

.accountSectionTabs {
  align-items: stretch;
}

.accountSectionTabs button {
  display: grid;
  align-content: center;
  justify-items: start;
  min-width: 164px;
  text-align: left;
}

.accountSectionTabs strong {
  font-size: .98rem;
}

.accountSectionTabs small {
  color: #64748b;
  font-weight: 760;
}

.accountSectionTabs button.active small {
  color: #075e55;
}

.readinessPanel,
.accountNextStepPanel,
.accountTrustSummary,
.accountGrid,
.accountPanel,
.accountProfileHero,
.securityPanel,
.recentReviewsCard {
  margin-top: 20px;
}

.formView:has(.wishForm) {
  gap: 26px;
}

.formView:has(.wishForm) > .sectionHead {
  padding: clamp(20px, 3vw, 32px);
  border-radius: 28px;
  background:
    linear-gradient(90deg, rgba(255,255,255,.95), rgba(236,253,245,.78)),
    url("./images/bondmai-hero-handoff.webp") right center / min(38%, 520px) auto no-repeat;
  border: 1px solid rgba(15, 118, 110, .18);
  box-shadow: 0 24px 70px rgba(15,23,42,.08);
}

@media (max-width: 900px) {
  .heroSearchFirst,
  .marketPulse,
  .adminShellHero,
  .adminFocusPanel,
  .travelerDeskHero,
  .tripHero,
  .formView:has(.wishForm) > .sectionHead {
    border-radius: 26px;
  }

  .marketPulseGrid,
  .adminFocusList {
    grid-template-columns: 1fr;
  }

  .adminShell .adminTile,
  .adminPriorityItem {
    grid-template-columns: 54px minmax(0, 1fr);
  }

  .adminShell .adminTile > .tinyButton,
  .adminShell .adminTile > button,
  .adminPriorityItem em {
    grid-column: 2;
    justify-self: start;
  }

  .accountSectionTabs {
    grid-auto-columns: minmax(150px, 48vw);
  }

  .formView:has(.wishForm) > .sectionHead {
    background:
      linear-gradient(180deg, rgba(255,255,255,.92), rgba(236,253,245,.94)),
      url("./images/bondmai-hero-handoff.webp") center top / cover no-repeat;
  }
}

@media (max-width: 640px) {
  .heroSearchFirst,
  .marketPulse,
  .adminShellHero,
  .adminFocusPanel,
  .travelerDeskHero,
  .tripHero {
    margin-inline: 0;
  }

  .quickStartHead strong,
  .marketPulseHead h2,
  .sectionHead h2,
  .sectionHead h3 {
    font-size: clamp(22px, 7vw, 30px);
    line-height: 1.12;
  }

  .adminFocusPanel,
  .pulseFeed,
  .pulseTrips {
    padding: 16px;
  }

  .adminFocusList article {
    min-height: 116px;
  }

  .accountSectionTabs {
    margin-bottom: 30px;
  }
}

[data-theme="dark"] .heroSearchFirst::before,
html[data-theme="dark"] .heroSearchFirst::before,
[data-theme="dark"] .marketPulse::before,
html[data-theme="dark"] .marketPulse::before,
[data-theme="dark"] .accountView.hasUser::before,
html[data-theme="dark"] .accountView.hasUser::before,
[data-theme="dark"] .adminShellHero::before,
html[data-theme="dark"] .adminShellHero::before,
[data-theme="dark"] .adminFocusPanel::before,
html[data-theme="dark"] .adminFocusPanel::before,
[data-theme="dark"] .travelerDeskHero::before,
html[data-theme="dark"] .travelerDeskHero::before,
[data-theme="dark"] .tripHero::before,
html[data-theme="dark"] .tripHero::before {
  background:
    radial-gradient(circle at 12% 8%, rgba(94, 234, 212, .16), transparent 28%),
    radial-gradient(circle at 88% 16%, rgba(245, 191, 74, .12), transparent 30%),
    linear-gradient(135deg, rgba(15, 23, 42, .92), rgba(15, 23, 42, .68));
}

[data-theme="dark"] .adminFocusPanel,
html[data-theme="dark"] .adminFocusPanel,
[data-theme="dark"] .formView:has(.wishForm) > .sectionHead,
html[data-theme="dark"] .formView:has(.wishForm) > .sectionHead {
  color: #f8fafc;
  background:
    linear-gradient(135deg, rgba(15,23,42,.94), rgba(15,23,42,.78));
  border-color: rgba(148, 163, 184, .24);
}

[data-theme="dark"] .adminFocusList article,
html[data-theme="dark"] .adminFocusList article {
  background:
    linear-gradient(145deg, rgba(255,255,255,.06), rgba(255,255,255,.018)),
    rgba(15, 23, 42, .88);
  border-color: rgba(148, 163, 184, .24);
}

[data-theme="dark"] .adminFocusList span,
html[data-theme="dark"] .adminFocusList span {
  color: #99f6e4;
}

[data-theme="dark"] .adminFocusList strong,
html[data-theme="dark"] .adminFocusList strong {
  color: #f8fafc;
}

[data-theme="dark"] .adminFocusList small,
html[data-theme="dark"] .adminFocusList small,
[data-theme="dark"] .accountSectionTabs small,
html[data-theme="dark"] .accountSectionTabs small {
  color: #cbd5e1;
}

/* Design system convergence layer: 8pt spacing, 12-column rhythm, shared components. */
:root {
  --ds-space-0: 0;
  --ds-space-1: 8px;
  --ds-space-2: 16px;
  --ds-space-3: 24px;
  --ds-space-4: 32px;
  --ds-space-5: 40px;
  --ds-space-6: 48px;
  --ds-space-8: 64px;
  --ds-page-max: 1536px;
  --ds-panel-max: 1320px;
  --ds-radius-xs: 10px;
  --ds-radius-sm: 14px;
  --ds-radius-md: 18px;
  --ds-radius-lg: 24px;
  --ds-radius-xl: 32px;
  --ds-radius-pill: 999px;
  --ds-surface: rgba(255, 255, 255, .94);
  --ds-surface-soft: rgba(247, 250, 252, .9);
  --ds-surface-warm: rgba(255, 253, 247, .96);
  --ds-line: rgba(17, 94, 89, .18);
  --ds-line-strong: rgba(15, 118, 110, .36);
  --ds-ink: #17212f;
  --ds-text: #243447;
  --ds-muted: #627386;
  --ds-brand: #0f8f83;
  --ds-brand-strong: #0b6f65;
  --ds-accent: #f2c95d;
  --ds-danger: #b42318;
  --ds-success: #067647;
  --ds-focus: 0 0 0 4px rgba(45, 212, 191, .24);
  --ds-shadow-sm: 0 8px 24px rgba(15, 23, 42, .07);
  --ds-shadow-md: 0 18px 48px rgba(15, 23, 42, .1);
  --ds-shadow-lg: 0 28px 80px rgba(15, 23, 42, .14);
  --ds-type-xs: .78rem;
  --ds-type-sm: .9rem;
  --ds-type-base: 1rem;
  --ds-type-md: 1.12rem;
  --ds-type-lg: 1.38rem;
  --ds-type-xl: 1.8rem;
  --ds-type-2xl: 2.35rem;
}

[data-theme="dark"],
html[data-theme="dark"] {
  --ds-surface: rgba(15, 23, 42, .92);
  --ds-surface-soft: rgba(30, 41, 59, .86);
  --ds-surface-warm: rgba(24, 31, 44, .92);
  --ds-line: rgba(148, 163, 184, .26);
  --ds-line-strong: rgba(94, 234, 212, .48);
  --ds-ink: #f8fafc;
  --ds-text: #e2e8f0;
  --ds-muted: #b8c4d4;
  --ds-brand: #5eead4;
  --ds-brand-strong: #99f6e4;
  --ds-accent: #f7d774;
  --ds-danger: #fca5a5;
  --ds-success: #86efac;
  --ds-focus: 0 0 0 4px rgba(94, 234, 212, .28);
  --ds-shadow-sm: 0 8px 24px rgba(0, 0, 0, .24);
  --ds-shadow-md: 0 18px 48px rgba(0, 0, 0, .3);
  --ds-shadow-lg: 0 28px 80px rgba(0, 0, 0, .38);
}

body {
  color: var(--ds-text);
  text-rendering: optimizeLegibility;
}

:where(.view, .viewShell, .marketView, .tripView, .formView, .accountView, .adminShell, .ordersView, .policyView) {
  max-width: var(--ds-page-max);
  margin-inline: auto;
}

:where(.marketPulse, .tripHero, .travelerDeskHero, .adminShellHero, .adminFocusPanel, .accountView.hasUser, .formView:has(.wishForm) > .sectionHead, .systemGuidePanel) {
  border-radius: var(--ds-radius-xl);
  border: 1px solid var(--ds-line-strong);
  box-shadow: var(--ds-shadow-lg);
}

:where(.panelCard, .panel, .card, .stat, .countryCard, .areaList article, .tripCard, .matchCard, .orderCard, .accountCard, .accountPanel, .notificationCard, .supportCard, .policyCard, .adminTile, .adminPriorityItem, .readinessPanel, .securityPanel, .recentReviewsCard, .systemGuideGrid article, .pulseFeed, .pulseTrips, .pulseItem) {
  border-radius: var(--ds-radius-lg);
  border: 1px solid var(--ds-line);
  background: var(--ds-surface);
  box-shadow: var(--ds-shadow-sm);
}

:where(.panelCard, .panel, .card, .countryCard, .areaList article, .tripCard, .matchCard, .orderCard, .accountCard, .accountPanel, .notificationCard, .supportCard, .policyCard, .adminTile, .adminPriorityItem, .readinessPanel, .securityPanel, .recentReviewsCard, .systemGuideGrid article, .pulseFeed, .pulseTrips, .pulseItem):hover {
  border-color: var(--ds-line-strong);
  box-shadow: var(--ds-shadow-md);
}

:where(.sectionHead, .marketPulseHead, .adminShellHero, .travelerDeskHero, .tripHero, .systemGuideHero, .panelHeader) {
  margin-bottom: var(--ds-space-3);
}

:where(.marketPulse, .adminFocusPanel, .accountPanel, .panelCard, .tripHero, .travelerDeskHero, .systemGuidePanel, .policyCard, .supportCard) + :where(.marketPulse, .adminFocusPanel, .accountPanel, .panelCard, .tripHero, .travelerDeskHero, .systemGuidePanel, .policyCard, .supportCard) {
  margin-top: var(--ds-space-4);
}

:where(.marketPulseGrid, .adminFocusList, .systemGuideGrid, .accountGrid, .dashboardGrid, .cardsGrid, .compactGrid) {
  gap: var(--ds-space-3);
}

:where(.marketPulseGrid, .adminFocusList, .systemGuideGrid) {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
}

:where(.marketPulseGrid, .adminFocusList, .systemGuideGrid) > * {
  grid-column: span 4;
}

:where(h1, h2, h3, h4, strong) {
  color: var(--ds-ink);
  letter-spacing: 0;
}

:where(h1) {
  font-size: var(--ds-type-2xl);
  line-height: 1.08;
}

:where(h2) {
  font-size: var(--ds-type-xl);
  line-height: 1.16;
}

:where(h3) {
  font-size: var(--ds-type-lg);
  line-height: 1.22;
}

:where(p, li, small, .muted) {
  color: var(--ds-muted);
  line-height: 1.68;
}

:where(button, .primaryButton, .softButton, .tinyButton, .ghostButton, .dangerButton, .dangerTiny) {
  min-height: 40px;
  border-radius: var(--ds-radius-pill);
  padding: 10px 18px;
  font-weight: 800;
  letter-spacing: 0;
  transition:
    transform var(--motion-fast, 140ms) var(--ease-out, ease),
    box-shadow var(--motion-fast, 140ms) var(--ease-out, ease),
    border-color var(--motion-fast, 140ms) var(--ease-out, ease),
    background var(--motion-fast, 140ms) var(--ease-out, ease);
}

:where(.primaryButton, button.primaryButton) {
  background: linear-gradient(135deg, #21c7b7, #0f8f83 72%);
  border: 1px solid rgba(255, 255, 255, .38);
  color: #ffffff;
  box-shadow: 0 14px 32px rgba(15, 143, 131, .28);
}

:where(.softButton, .tinyButton, .ghostButton) {
  background: rgba(255, 255, 255, .86);
  border: 1px solid var(--ds-line-strong);
  color: var(--ds-brand-strong);
}

:where(.dangerButton, .dangerTiny) {
  background: rgba(254, 242, 242, .96);
  border: 1px solid rgba(220, 38, 38, .38);
  color: var(--ds-danger);
}

:where(button, .primaryButton, .softButton, .tinyButton, .ghostButton, .dangerButton, .dangerTiny):hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: var(--ds-shadow-sm);
}

:where(button, .primaryButton, .softButton, .tinyButton, .ghostButton, .dangerButton, .dangerTiny):focus-visible,
:where(input, select, textarea, a):focus-visible {
  outline: none;
  box-shadow: var(--ds-focus);
}

:where(button, .primaryButton, .softButton, .tinyButton, .ghostButton, .dangerButton, .dangerTiny):disabled {
  cursor: not-allowed;
  opacity: .62;
  filter: grayscale(.12);
  transform: none;
  box-shadow: none;
}

:where(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
  min-height: 48px;
  width: 100%;
  border-radius: var(--ds-radius-sm);
  border: 1px solid var(--ds-line);
  background: rgba(255, 255, 255, .96);
  color: var(--ds-ink);
  padding: 12px 14px;
  font: inherit;
  line-height: 1.45;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .72);
}

:where(textarea) {
  min-height: 128px;
  resize: vertical;
}

:where(input:not([type="checkbox"]):not([type="radio"]), select, textarea)::placeholder {
  color: #8796a8;
}

:where(input:not([type="checkbox"]):not([type="radio"]), select, textarea):focus {
  border-color: var(--ds-line-strong);
  box-shadow: var(--ds-focus);
}

:where(svg) {
  flex: 0 0 auto;
}

:where(.sideNav svg, .bottomNav svg, .topNav svg, .navItem svg) {
  width: 20px;
  height: 20px;
  stroke-width: 2;
}

:where(.adminTile svg, .adminPriorityItem svg, .quickIcon svg, .pulseIcon svg, .statusIcon svg) {
  width: 28px;
  height: 28px;
  stroke-width: 2.2;
}

:where(.quickIcon, .pulseIcon, .statusIcon, .adminIcon, .featureIcon) {
  width: 56px;
  height: 56px;
  min-width: 56px;
  border-radius: 18px;
  display: inline-grid;
  place-items: center;
  background: linear-gradient(135deg, rgba(211, 250, 229, .96), rgba(250, 224, 123, .82));
  color: var(--ds-brand-strong);
  border: 1px solid rgba(15, 118, 110, .18);
}

:where(.adminFocusList article, .adminTile, .adminPriorityItem) {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--ds-space-2);
  padding: var(--ds-space-3);
}

:where(.adminFocusList article > span, .adminTile > span:first-child, .adminPriorityItem > span:first-child) {
  width: 56px;
  height: 56px;
  min-width: 56px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  background: rgba(236, 253, 245, .96);
  color: var(--ds-brand-strong);
  font-size: 0;
  line-height: 0;
}

:where(.adminFocusList article > span) svg,
:where(.adminTile > span:first-child) svg,
:where(.adminPriorityItem > span:first-child) svg {
  width: 28px;
  height: 28px;
}

:where(.topNav, .sideNav, .bottomNav, .accountSectionTabs, .adminSectionTabs) {
  gap: var(--ds-space-1);
}

:where(.accountSectionTabs, .adminSectionTabs) {
  border-radius: var(--ds-radius-lg);
  padding: var(--ds-space-1);
  background: rgba(236, 253, 245, .72);
  border: 1px solid var(--ds-line);
}

:where(.accountSectionTabs button, .adminSectionTabs button) {
  min-height: 48px;
  border-radius: var(--ds-radius-md);
}

[data-theme="dark"] :where(.panelCard, .panel, .card, .stat, .countryCard, .areaList article, .tripCard, .matchCard, .orderCard, .accountCard, .accountPanel, .notificationCard, .supportCard, .policyCard, .adminTile, .adminPriorityItem, .readinessPanel, .securityPanel, .recentReviewsCard, .systemGuideGrid article, .pulseFeed, .pulseTrips, .pulseItem),
html[data-theme="dark"] :where(.panelCard, .panel, .card, .stat, .countryCard, .areaList article, .tripCard, .matchCard, .orderCard, .accountCard, .accountPanel, .notificationCard, .supportCard, .policyCard, .adminTile, .adminPriorityItem, .readinessPanel, .securityPanel, .recentReviewsCard, .systemGuideGrid article, .pulseFeed, .pulseTrips, .pulseItem) {
  background: linear-gradient(145deg, rgba(30, 41, 59, .92), rgba(15, 23, 42, .9));
  border-color: var(--ds-line);
  color: var(--ds-text);
}

[data-theme="dark"] :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea),
html[data-theme="dark"] :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
  background: rgba(248, 250, 252, .98);
  border-color: rgba(148, 163, 184, .46);
  color: #111827;
}

[data-theme="dark"] :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea)::placeholder,
html[data-theme="dark"] :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea)::placeholder {
  color: #64748b;
}

[data-theme="dark"] :where(.softButton, .tinyButton, .ghostButton),
html[data-theme="dark"] :where(.softButton, .tinyButton, .ghostButton) {
  background: rgba(15, 23, 42, .92);
  border-color: rgba(94, 234, 212, .52);
  color: #ccfbf1;
}

[data-theme="dark"] :where(.accountSectionTabs, .adminSectionTabs),
html[data-theme="dark"] :where(.accountSectionTabs, .adminSectionTabs) {
  background: rgba(15, 23, 42, .82);
  border-color: rgba(148, 163, 184, .26);
}

@media (max-width: 1180px) {
  :where(.marketPulseGrid, .adminFocusList, .systemGuideGrid) > * {
    grid-column: span 6;
  }
}

@media (max-width: 760px) {
  :root {
    --ds-radius-lg: 20px;
    --ds-radius-xl: 24px;
  }

  :where(.marketPulse, .tripHero, .travelerDeskHero, .adminShellHero, .adminFocusPanel, .accountPanel, .panelCard, .systemGuidePanel) {
    padding: var(--ds-space-2);
    border-radius: var(--ds-radius-lg);
  }

  :where(.marketPulseGrid, .adminFocusList, .systemGuideGrid) {
    grid-template-columns: 1fr;
    gap: var(--ds-space-2);
  }

  :where(.marketPulseGrid, .adminFocusList, .systemGuideGrid) > * {
    grid-column: 1;
  }

  :where(.adminFocusList article, .adminTile, .adminPriorityItem) {
    grid-template-columns: 56px minmax(0, 1fr);
    gap: var(--ds-space-2);
    padding: var(--ds-space-2);
  }

  :where(.adminFocusList article > .tinyButton, .adminFocusList article > button, .adminTile > .tinyButton, .adminTile > button, .adminPriorityItem > .tinyButton, .adminPriorityItem > button) {
    grid-column: 1 / -1;
    width: 100%;
  }

  :where(h1) {
    font-size: 2rem;
  }

  :where(h2) {
    font-size: 1.55rem;
  }

  :where(h3) {
    font-size: 1.22rem;
  }

  :where(button, .primaryButton, .softButton, .tinyButton, .ghostButton, .dangerButton, .dangerTiny) {
    min-height: 44px;
  }
}

/* Homepage redesign target: airy travel marketplace hero, durable icons, CSS-drawn flags. */
.heroSearchFirst {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(360px, .82fr);
  gap: clamp(28px, 4vw, 64px);
  min-height: min(720px, calc(100dvh - 86px));
  padding: clamp(48px, 7vw, 96px) clamp(28px, 5vw, 76px);
  overflow: hidden;
  border-radius: 0 0 36px 36px;
  background:
    linear-gradient(90deg, rgba(255, 253, 247, .96) 0%, rgba(255, 253, 247, .82) 48%, rgba(255, 253, 247, .28) 100%),
    url("./images/bondmai-hero-handoff.webp") center right / cover no-repeat;
  box-shadow: 0 28px 90px rgba(15, 23, 42, .10);
}

.heroSearchFirst::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(circle at 12% 14%, rgba(94, 234, 212, .22), transparent 28%),
    radial-gradient(circle at 48% 72%, rgba(247, 200, 115, .18), transparent 30%);
}

.heroSearchFirst .heroCopy,
.heroSearchFirst > div:first-child {
  align-self: center;
  max-width: 760px;
}

.heroSearchFirst h1,
.heroSearchFirst h2 {
  max-width: 760px;
  margin-bottom: 18px;
  color: #102033;
  font-size: clamp(44px, 5.4vw, 76px);
  line-height: 1.04;
  font-weight: 950;
}

.heroSearchFirst h1 em,
.heroSearchFirst h2 em,
.heroSearchFirst h1 strong,
.heroSearchFirst h2 strong {
  color: #0f8f83;
  font-style: normal;
}

.heroSearchFirst p {
  max-width: 620px;
  color: #475569;
  font-size: 1.08rem;
}

.heroSearchPanel {
  display: grid;
  gap: 12px;
  max-width: 720px;
  padding: 12px;
  border: 1px solid rgba(15, 118, 110, .18);
  border-radius: 24px;
  background: rgba(255, 255, 255, .9);
  box-shadow: 0 22px 60px rgba(15, 23, 42, .12);
  backdrop-filter: blur(18px);
}

.heroSearchGrid {
  grid-template-columns: minmax(0, 1.25fr) minmax(160px, .62fr) minmax(140px, .58fr);
  gap: 10px;
}

.heroSearchField span {
  color: #526274;
}

.heroSearchField input,
.heroSearchField select {
  min-height: 56px;
  border-radius: 18px;
  border-color: rgba(15, 118, 110, .18);
  background: rgba(248, 250, 252, .94);
  font-size: 1rem;
}

.heroSearchSubmit {
  min-height: 56px;
  border-radius: 18px;
  background: linear-gradient(135deg, #21c7b7, #0f8f83);
  color: #fff;
}

.compactActions,
.marketPulseActions {
  gap: 12px;
}

.miniCountryPills button {
  min-height: 38px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .9);
  box-shadow: 0 8px 20px rgba(15, 23, 42, .08);
}

.marketplaceHeroPanel,
.quickStartPanel {
  align-self: center;
  padding: clamp(18px, 2vw, 28px);
  border: 1px solid rgba(15, 118, 110, .16);
  border-radius: 32px;
  background: rgba(255, 255, 255, .88);
  box-shadow: 0 30px 90px rgba(15, 23, 42, .14);
  backdrop-filter: blur(18px);
}

.quickStartHead {
  gap: 6px;
  margin-bottom: 18px;
}

.quickStartHead span {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  min-height: 32px;
  padding: 6px 12px;
  border-radius: 999px;
  color: #0b6f65;
  background: rgba(204, 251, 241, .82);
}

.quickStartHead strong {
  color: #102033;
  font-size: clamp(22px, 2vw, 30px);
}

.quickStartGrid {
  gap: 14px;
}

.quickStartCard {
  grid-template-columns: 58px minmax(0, 1fr) 20px;
  min-height: 94px;
  padding: 16px;
  border-radius: 22px;
  border-color: rgba(15, 118, 110, .14);
  background: rgba(255, 255, 255, .9);
  box-shadow: 0 14px 34px rgba(15, 23, 42, .06);
}

.quickStartCard b {
  width: 20px;
  height: 20px;
  overflow: hidden;
  color: transparent;
}

.quickStartCard b::before {
  content: "";
  display: block;
  width: 10px;
  height: 10px;
  border-top: 2px solid #0f766e;
  border-right: 2px solid #0f766e;
  transform: rotate(45deg);
}

.quickIcon {
  width: 58px;
  height: 58px;
  border-radius: 20px;
  color: #0f766e;
  background: linear-gradient(135deg, #ccfbf1, #fde68a);
}

.heroStats.compact {
  gap: 14px;
}

.heroStats.compact .stat {
  min-height: 116px;
  padding: 18px;
  border-radius: 24px;
  background: rgba(255, 255, 255, .82);
  backdrop-filter: blur(14px);
}

.marketPulse {
  grid-template-columns: 220px minmax(0, 1fr) minmax(300px, .46fr);
  align-items: start;
  padding: clamp(24px, 3.4vw, 44px);
  border-radius: 34px;
  background:
    linear-gradient(115deg, rgba(255, 255, 255, .94), rgba(236, 253, 245, .82)),
    url("./images/bondmai-hero-handoff.webp") right bottom / 44% auto no-repeat;
}

.marketPulseHead {
  grid-column: 2 / 4;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  min-height: auto;
}

.marketPulseHead h2 {
  margin: 0 0 8px;
  font-size: clamp(32px, 3.6vw, 52px);
}

.marketPulseActions {
  justify-content: end;
}

.marketPulseGrid {
  grid-column: 2;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.marketPulse .pulseCountryRail,
.marketPulse > aside,
.marketPulse > .marketSideRail {
  grid-column: 3;
}

.pulseFeed,
.pulseTrips {
  padding: clamp(18px, 2vw, 26px);
  border-radius: 30px;
  background: rgba(255, 255, 255, .86);
}

.pulseFeed h3,
.pulseTrips h3 {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
  font-size: 1.45rem;
}

.pulseFeed h3::before,
.pulseTrips h3::before {
  content: "";
  width: 54px;
  height: 54px;
  border-radius: 18px;
  background: linear-gradient(135deg, #d9f99d, #fde68a);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .6), 0 14px 32px rgba(15, 118, 110, .13);
}

.pulseFeed h3::after,
.pulseTrips h3::after {
  display: none !important;
}

.pulseItem {
  grid-template-columns: 70px minmax(0, 1fr) auto;
  gap: 18px;
  padding: 18px;
  border-radius: 26px;
}

.pulseIcon {
  width: 70px;
  height: 70px;
  border-radius: 24px;
}

.pulseIcon .glyph {
  width: 34px;
  height: 34px;
}

.pulseItem strong {
  font-size: 1.12rem;
}

.pulseItem .tinyButton {
  min-width: 88px;
}

.pulseCountryRail {
  display: grid;
  gap: 12px;
  align-content: start;
}

.pulseCountryRail button {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 14px;
  text-align: left;
}

.countryFlag[class*="flag-"] {
  color: transparent !important;
  background: #fff !important;
}

.countryFlag[class*="flag-"]::before,
.countryFlag[class*="flag-"]::after {
  content: "" !important;
  display: block !important;
}

.countryFlag.flag-jp::before {
  width: 46%;
  height: 46%;
  border-radius: 50%;
  background: #bc002d;
}

.countryFlag.flag-tw {
  background: #fe0000 !important;
}

.countryFlag.flag-tw::before {
  position: absolute;
  inset: 0 auto auto 0;
  width: 56%;
  height: 56%;
  background: #000095;
}

.countryFlag.flag-tw::after {
  position: absolute;
  left: 12%;
  top: 12%;
  width: 28%;
  height: 28%;
  border-radius: 50%;
  background: #fff;
}

.countryFlag.flag-kr::before {
  width: 56%;
  height: 56%;
  border-radius: 50%;
  background: linear-gradient(#c60c30 0 50%, #003478 50% 100%);
  transform: rotate(-25deg);
}

.countryFlag.flag-kr::after {
  position: absolute;
  inset: 18%;
  background:
    linear-gradient(#111 0 0) 0 0 / 22% 7% no-repeat,
    linear-gradient(#111 0 0) 0 17% / 22% 7% no-repeat,
    linear-gradient(#111 0 0) 100% 0 / 22% 7% no-repeat,
    linear-gradient(#111 0 0) 100% 17% / 22% 7% no-repeat,
    linear-gradient(#111 0 0) 0 86% / 22% 7% no-repeat,
    linear-gradient(#111 0 0) 100% 86% / 22% 7% no-repeat;
  opacity: .72;
}

.countryFlag.flag-ca {
  background: linear-gradient(90deg, #d52b1e 0 27%, #fff 27% 73%, #d52b1e 73% 100%) !important;
}

.countryFlag.flag-ca::before {
  width: 32%;
  height: 42%;
  background: #d52b1e;
  clip-path: polygon(50% 0, 58% 25%, 82% 14%, 70% 38%, 100% 42%, 72% 55%, 84% 82%, 56% 66%, 50% 100%, 44% 66%, 16% 82%, 28% 55%, 0 42%, 30% 38%, 18% 14%, 42% 25%);
}

.countryFlag.flag-us {
  background:
    linear-gradient(#3c3b6e 0 0) 0 0 / 48% 54% no-repeat,
    repeating-linear-gradient(#b22234 0 7.7%, #fff 7.7% 15.4%) !important;
}

.countryFlag.flag-fr,
.countryFlag.flag-it,
.countryFlag.flag-mx {
  background: linear-gradient(90deg, #0055a4 0 33%, #fff 33% 66%, #ef4135 66% 100%) !important;
}

.countryFlag.flag-it {
  background: linear-gradient(90deg, #009246 0 33%, #fff 33% 66%, #ce2b37 66% 100%) !important;
}

.countryFlag.flag-mx {
  background: linear-gradient(90deg, #006847 0 33%, #fff 33% 66%, #ce1126 66% 100%) !important;
}

.countryFlag.flag-de {
  background: linear-gradient(#000 0 33%, #dd0000 33% 66%, #ffce00 66% 100%) !important;
}

.countryFlag.flag-uk {
  background:
    linear-gradient(90deg, transparent 42%, #fff 42% 58%, transparent 58%),
    linear-gradient(transparent 38%, #fff 38% 62%, transparent 62%),
    linear-gradient(90deg, transparent 46%, #c8102e 46% 54%, transparent 54%),
    linear-gradient(transparent 44%, #c8102e 44% 56%, transparent 56%),
    #012169 !important;
}

.countryFlag.flag-sg {
  background: linear-gradient(#ef3340 0 50%, #fff 50% 100%) !important;
}

.countryFlag.flag-sg::before {
  position: absolute;
  left: 18%;
  top: 17%;
  width: 25%;
  height: 25%;
  border-radius: 50%;
  box-shadow: -4px 0 0 #fff;
}

.countryFlag.flag-th {
  background: linear-gradient(#a51931 0 17%, #fff 17% 29%, #2d2a4a 29% 71%, #fff 71% 83%, #a51931 83% 100%) !important;
}

.countryFlag.flag-hk,
.countryFlag.flag-vn,
.countryFlag.flag-cn,
.countryFlag.flag-tr {
  background: #de2910 !important;
}

.countryFlag.flag-vn::before,
.countryFlag.flag-cn::before,
.countryFlag.flag-tr::before,
.countryFlag.flag-hk::before {
  width: 38%;
  height: 38%;
  background: #ffde00;
  clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 56%, 79% 91%, 50% 70%, 21% 91%, 32% 56%, 2% 35%, 39% 35%);
}

.countryFlag.flag-hk::before {
  background: #fff;
}

.countryFlag.flag-my {
  background:
    linear-gradient(#010066 0 0) 0 0 / 52% 54% no-repeat,
    repeating-linear-gradient(#cc0001 0 7.7%, #fff 7.7% 15.4%) !important;
}

.countryFlag.flag-id {
  background: linear-gradient(#ce1126 0 50%, #fff 50% 100%) !important;
}

.countryFlag.flag-ph {
  background:
    linear-gradient(146deg, #fff 0 38%, transparent 39%),
    linear-gradient(#0038a8 0 50%, #ce1126 50% 100%) !important;
}

.countryFlag.flag-ae {
  background:
    linear-gradient(90deg, #ff0000 0 28%, transparent 28%),
    linear-gradient(#00732f 0 33%, #fff 33% 66%, #000 66% 100%) !important;
}

.countryFlag.flag-au,
.countryFlag.flag-nz {
  background: #012169 !important;
}

.countryFlag.flag-au::before,
.countryFlag.flag-nz::before {
  position: absolute;
  left: 12%;
  top: 16%;
  width: 22%;
  height: 22%;
  background: #fff;
  clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 56%, 79% 91%, 50% 70%, 21% 91%, 32% 56%, 2% 35%, 39% 35%);
}

.countryFlag.flag-es {
  background: linear-gradient(#aa151b 0 25%, #f1bf00 25% 75%, #aa151b 75% 100%) !important;
}

.countryFlag.flag-nl {
  background: linear-gradient(#ae1c28 0 33%, #fff 33% 66%, #21468b 66% 100%) !important;
}

.countryFlag.flag-ch {
  background: #d52b1e !important;
}

.countryFlag.flag-ch::before {
  width: 46%;
  height: 46%;
  background: #fff;
  clip-path: polygon(36% 0, 64% 0, 64% 36%, 100% 36%, 100% 64%, 64% 64%, 64% 100%, 36% 100%, 36% 64%, 0 64%, 0 36%, 36% 36%);
}

.countryFlag.flag-se {
  background:
    linear-gradient(90deg, transparent 28%, #fecc00 28% 40%, transparent 40%),
    linear-gradient(transparent 42%, #fecc00 42% 58%, transparent 58%),
    #006aa7 !important;
}

.countryFlag.flag-br {
  background: #009b3a !important;
}

.countryFlag.flag-br::before {
  width: 62%;
  height: 62%;
  background: #ffdf00;
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}

.countryFlag.flag-br::after {
  position: absolute;
  width: 28%;
  height: 28%;
  border-radius: 50%;
  background: #002776;
}

.countryFlag.flag-ar {
  background: linear-gradient(#74acdf 0 33%, #fff 33% 66%, #74acdf 66% 100%) !important;
}

.countryFlag.flag-ar::before {
  width: 18%;
  height: 18%;
  border-radius: 50%;
  background: #f6b40e;
}

.countryFlag.flag-cl {
  background:
    linear-gradient(#0039a6 0 0) 0 0 / 42% 50% no-repeat,
    linear-gradient(#fff 0 50%, #d52b1e 50% 100%) !important;
}

@media (max-width: 1180px) {
  .heroSearchFirst,
  .marketPulse {
    grid-template-columns: 1fr;
  }

  .marketPulseHead,
  .marketPulseGrid,
  .marketPulse .pulseCountryRail,
  .marketPulse > aside,
  .marketPulse > .marketSideRail {
    grid-column: 1;
  }
}

@media (max-width: 760px) {
  .heroSearchFirst {
    min-height: auto;
    padding: 28px 14px 22px;
    border-radius: 0 0 28px 28px;
    background:
      linear-gradient(180deg, rgba(8, 13, 21, .78), rgba(8, 13, 21, .90)),
      url("./images/bondmai-hero-handoff.webp") center / cover no-repeat;
  }

  .heroSearchFirst h1,
  .heroSearchFirst h2 {
    color: #fff;
    font-size: 2.15rem;
  }

  .heroSearchFirst p {
    color: #e2e8f0;
  }

  .heroSearchPanel,
  .marketplaceHeroPanel,
  .quickStartPanel {
    border-radius: 24px;
  }

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

  .marketPulse {
    padding: 18px;
    border-radius: 28px;
  }

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

  .marketPulseActions {
    justify-content: stretch;
  }

  .marketPulseActions .primaryButton,
  .marketPulseActions .softButton {
    flex: 1 1 140px;
  }

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

  .pulseFeed h3,
  .pulseTrips h3 {
    grid-template-columns: 46px minmax(0, 1fr);
    gap: 12px;
    font-size: 1.25rem;
  }

  .pulseFeed h3::before,
  .pulseTrips h3::before {
    width: 46px;
    height: 46px;
  }

  .pulseItem {
    grid-template-columns: 64px minmax(0, 1fr);
    padding: 16px;
  }

  .pulseIcon {
    width: 64px;
    height: 64px;
  }

  .pulseItem .tinyButton {
    grid-column: 2;
    justify-self: start;
  }
}

/* Final homepage design overrides: keep this at EOF so legacy flag and hero rules cannot override it. */
body .heroSearchFirst {
  min-height: min(680px, calc(100dvh - 80px)) !important;
  padding: clamp(40px, 5vw, 72px) clamp(28px, 5vw, 72px) !important;
  align-items: center !important;
}

body .heroSearchFirst h1,
body .heroSearchFirst h2 {
  max-width: 720px !important;
  font-size: clamp(2.9rem, 5vw, 4.9rem) !important;
  line-height: .98 !important;
}

body .quickStartCard {
  min-height: 74px !important;
  padding: 12px 14px !important;
}

body .quickIcon {
  width: 52px !important;
  height: 52px !important;
  flex: 0 0 52px !important;
}

body .heroStats.compact .stat {
  min-height: 90px !important;
}

body .countryFlag[class*="flag-"] {
  position: relative !important;
  display: inline-grid !important;
  place-items: center !important;
  width: 26px !important;
  height: 26px !important;
  min-width: 26px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(15, 23, 42, .14) !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, .12) !important;
  color: transparent !important;
  overflow: hidden !important;
  text-indent: -999px !important;
  vertical-align: middle !important;
}

body .countryFlag[class*="flag-"]::before,
body .countryFlag[class*="flag-"]::after {
  content: "" !important;
  display: none !important;
}

body .countryFlag.flag-jp { background: radial-gradient(circle at 50% 50%, #bc002d 0 30%, transparent 31%), #fff !important; }
body .countryFlag.flag-tw { background: linear-gradient(90deg, #002b7f 0 46%, transparent 46%), linear-gradient(#fe0000 0 100%) !important; }
body .countryFlag.flag-kr { background: radial-gradient(circle at 45% 45%, #c60c30 0 18%, transparent 19%), radial-gradient(circle at 55% 55%, #003478 0 18%, transparent 19%), #fff !important; }
body .countryFlag.flag-us { background: linear-gradient(#3c3b6e 0 0) 0 0 / 54% 54% no-repeat, repeating-linear-gradient(#b22234 0 7.7%, #fff 7.7% 15.4%) !important; }
body .countryFlag.flag-fr { background: linear-gradient(90deg, #0055a4 0 33%, #fff 33% 66%, #ef4135 66% 100%) !important; }
body .countryFlag.flag-th { background: linear-gradient(#a51931 0 16%, #fff 16% 30%, #2d2a4a 30% 70%, #fff 70% 84%, #a51931 84% 100%) !important; }
body .countryFlag.flag-ca { background: linear-gradient(90deg, #d52b1e 0 26%, #fff 26% 74%, #d52b1e 74% 100%) !important; }
body .countryFlag.flag-sg { background: linear-gradient(#ef3340 0 50%, #fff 50% 100%) !important; }
body .countryFlag.flag-id { background: linear-gradient(#ce1126 0 50%, #fff 50% 100%) !important; }
body .countryFlag.flag-de { background: linear-gradient(#000 0 33%, #dd0000 33% 66%, #ffce00 66% 100%) !important; }
body .countryFlag.flag-it { background: linear-gradient(90deg, #009246 0 33%, #fff 33% 66%, #ce2b37 66% 100%) !important; }
body .countryFlag.flag-gb { background: #012169 !important; }
body .countryFlag.flag-es { background: linear-gradient(#aa151b 0 25%, #f1bf00 25% 75%, #aa151b 75% 100%) !important; }
body .countryFlag.flag-pt { background: linear-gradient(90deg, #006600 0 42%, #f00 42% 100%) !important; }
body .countryFlag.flag-nl { background: linear-gradient(#ae1c28 0 33%, #fff 33% 66%, #21468b 66% 100%) !important; }
body .countryFlag.flag-ch { background: #d52b1e !important; }
body .countryFlag.flag-au,
body .countryFlag.flag-nz { background: linear-gradient(135deg, #012169, #173a7a) !important; }
body .countryFlag.flag-ae { background: linear-gradient(90deg, #f00 0 28%, transparent 28%), linear-gradient(#00732f 0 33%, #fff 33% 66%, #000 66% 100%) !important; }
body .countryFlag.flag-my { background: linear-gradient(#010066 0 0) 0 0 / 52% 54% no-repeat, repeating-linear-gradient(#cc0001 0 7.7%, #fff 7.7% 15.4%) !important; }
body .countryFlag.flag-ph { background: linear-gradient(#0038a8 0 50%, #ce1126 50% 100%) !important; }
body .countryFlag.flag-vn,
body .countryFlag.flag-hk,
body .countryFlag.flag-cn,
body .countryFlag.flag-tr { background: #de2910 !important; }
body .countryFlag.flag-in { background: linear-gradient(#ff9933 0 33%, #fff 33% 66%, #138808 66% 100%) !important; }
body .countryFlag.flag-br { background: radial-gradient(circle at 50% 50%, #002776 0 22%, transparent 23%), #009c3b !important; }
body .countryFlag.flag-mx { background: linear-gradient(90deg, #006847 0 33%, #fff 33% 66%, #ce1126 66% 100%) !important; }
body .countryFlag.flag-za { background: linear-gradient(90deg, #007a4d 0 50%, #de3831 50% 100%) !important; }

@media (max-width: 760px) {
  body .heroSearchFirst {
    min-height: auto !important;
    padding: 26px 14px 20px !important;
  }

  body .heroSearchFirst h1,
  body .heroSearchFirst h2 {
    font-size: 2.2rem !important;
    line-height: 1.05 !important;
  }

  body .quickIcon {
    width: 46px !important;
    height: 46px !important;
    flex-basis: 46px !important;
  }
}

/* Homepage lower-marketplace refinement: one coherent card system below the hero. */
body .trustedMembersPanel,
body .trendBoard,
body .departureBoard,
body .panel > .viewGrid {
  width: 100% !important;
  max-width: 1180px !important;
  margin-inline: auto !important;
}

body .trustedMembersPanel,
body .panel > .viewGrid {
  margin-top: 28px !important;
}

body .trustedMembersPanel {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 18px !important;
  padding: 26px !important;
  border: 1px solid rgba(15, 118, 110, .16) !important;
  border-radius: 32px !important;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .95), rgba(240, 253, 250, .74)),
    radial-gradient(circle at 90% 0%, rgba(253, 230, 138, .28), transparent 34%) !important;
  box-shadow: 0 24px 70px rgba(15, 23, 42, .08) !important;
}

body .trustedMembersPanel > h2,
body .trustedMembersPanel > p {
  grid-column: 1 / -1 !important;
}

body .trustedMembersPanel > .sectionHead {
  grid-column: 1 / -1 !important;
  min-height: auto !important;
  padding: 0 0 4px !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body .trustedMembersPanel > .sectionHead h2 {
  position: relative !important;
  margin: 0 !important;
  padding-left: 18px !important;
  color: #102033 !important;
  font-size: clamp(1.65rem, 2.4vw, 2.15rem) !important;
  line-height: 1.12 !important;
}

body .trustedMembersPanel > .sectionHead h2::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: .22em !important;
  width: 8px !important;
  height: 8px !important;
  border-radius: 999px !important;
  background: #0f766e !important;
  box-shadow: 0 0 0 7px rgba(20, 184, 166, .14) !important;
}

body .trustedMembersPanel > .sectionHead p {
  max-width: 680px !important;
  margin: 8px 0 0 !important;
  color: #526274 !important;
  font-size: 1rem !important;
  line-height: 1.7 !important;
}

body .trustedMemberGrid {
  grid-column: 1 / -1 !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 18px !important;
}

body .trustedMembersPanel > h2,
body .panel > .viewGrid > section > h2 {
  position: relative !important;
  margin: 0 !important;
  padding-left: 18px !important;
  color: #102033 !important;
  font-size: clamp(1.65rem, 2.4vw, 2.15rem) !important;
  line-height: 1.12 !important;
}

body .trustedMembersPanel > h2::before,
body .panel > .viewGrid > section > h2::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: .22em !important;
  width: 8px !important;
  height: 8px !important;
  border-radius: 999px !important;
  background: #0f766e !important;
  box-shadow: 0 0 0 7px rgba(20, 184, 166, .14) !important;
}

body .trustedMembersPanel > p,
body .panel > .viewGrid > section > p {
  max-width: 680px !important;
  margin: 8px 0 8px !important;
  color: #526274 !important;
  font-size: 1rem !important;
  line-height: 1.7 !important;
}

body .trustedMemberCard {
  display: grid !important;
  grid-template-columns: 64px minmax(0, 1fr) !important;
  gap: 16px !important;
  align-items: start !important;
  min-height: 210px !important;
  padding: 20px !important;
  border: 1px solid rgba(15, 118, 110, .16) !important;
  border-radius: 26px !important;
  background: rgba(255, 255, 255, .9) !important;
  box-shadow: 0 18px 50px rgba(15, 23, 42, .07) !important;
}

body .trustedMemberCard .memberAvatar,
body .trustedMemberCard .avatar {
  width: 64px !important;
  height: 64px !important;
  border-radius: 20px !important;
  box-shadow: 0 14px 28px rgba(15, 23, 42, .13) !important;
}

body .trustedMemberCard strong {
  color: #102033 !important;
  font-size: 1.16rem !important;
}

body .trustedMemberCard small {
  color: #64748b !important;
}

body .trustedMemberCard .miniStats,
body .trustedMemberCard .metricGrid,
body .trustedMemberCard > div:has(.stat) {
  grid-column: 1 / -1 !important;
}

body .trustedMemberCard .softButton,
body .trustedMemberCard button {
  grid-column: 1 / -1 !important;
  min-height: 46px !important;
  border-radius: 16px !important;
  font-weight: 850 !important;
}

body .panel > .viewGrid {
  display: grid !important;
  grid-template-columns: minmax(0, 1.08fr) minmax(340px, .82fr) !important;
  gap: 28px !important;
  align-items: start !important;
}

body .panel > .viewGrid > section {
  min-width: 0 !important;
  padding: 24px !important;
  border: 1px solid rgba(15, 118, 110, .16) !important;
  border-radius: 32px !important;
  background: rgba(255, 255, 255, .86) !important;
  box-shadow: 0 22px 60px rgba(15, 23, 42, .07) !important;
}

body .panel > .viewGrid > section:nth-child(2) {
  position: sticky !important;
  top: 92px !important;
  min-height: 320px !important;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .94), rgba(236, 253, 245, .86)),
    radial-gradient(circle at 100% 0%, rgba(253, 230, 138, .28), transparent 34%) !important;
}

body .panel > .viewGrid > section:nth-child(2):has(> p:last-child:first-of-type),
body .panel > .viewGrid > section:nth-child(2) {
  overflow: hidden !important;
}

body .panel > .viewGrid > section:nth-child(2) > p:last-child {
  display: grid !important;
  place-items: center !important;
  min-height: 190px !important;
  margin-top: 22px !important;
  padding: 28px !important;
  border: 1px dashed rgba(15, 118, 110, .28) !important;
  border-radius: 24px !important;
  color: #475569 !important;
  background: rgba(255, 255, 255, .72) !important;
  text-align: center !important;
}

body .tripCard {
  display: grid !important;
  grid-template-columns: 72px minmax(0, 1fr) auto !important;
  gap: 18px !important;
  align-items: start !important;
  margin-top: 18px !important;
  padding: 20px !important;
  border: 1px solid rgba(15, 118, 110, .18) !important;
  border-radius: 28px !important;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .96), rgba(248, 250, 252, .88)),
    radial-gradient(circle at 100% 0%, rgba(204, 251, 241, .34), transparent 34%) !important;
  box-shadow: 0 20px 54px rgba(15, 23, 42, .08) !important;
}

body .tripCard .avatar,
body .tripCard .memberAvatar {
  width: 72px !important;
  height: 72px !important;
  border-radius: 22px !important;
}

body .tripCard .cardTop {
  grid-column: 2 / 4 !important;
  align-items: flex-start !important;
  margin-left: 0 !important;
}

body .tripCard .cardTop h3 {
  margin: 0 0 6px !important;
  color: #102033 !important;
  font-size: 1.45rem !important;
}

body .tripCard .cardTop p,
body .tripCard .miniMeta {
  color: #526274 !important;
  gap: 12px !important;
  line-height: 1.55 !important;
}

body .tripCard .status {
  min-height: 32px !important;
  padding: 7px 12px !important;
  border-radius: 999px !important;
  font-weight: 850 !important;
}

body .tripCard .meter {
  grid-column: 1 / -1 !important;
  height: 10px !important;
  margin-top: 8px !important;
  background: rgba(15, 118, 110, .12) !important;
}

body .tripCard .tagRow,
body .tripCard .tripActions,
body .tripCard .note {
  grid-column: 1 / -1 !important;
}

body .tripCard .tagRow span {
  padding: 7px 11px !important;
  color: #475569 !important;
  background: #f1f5f9 !important;
  border: 1px solid rgba(15, 23, 42, .06) !important;
}

body .tripCard .tripActions {
  padding: 12px !important;
  border: 1px solid rgba(15, 118, 110, .14) !important;
  border-radius: 18px !important;
  background: rgba(248, 250, 252, .78) !important;
}

body .tripCard .note {
  margin: 2px 0 0 !important;
  color: #64748b !important;
  font-size: .95rem !important;
}

[data-theme="dark"] body .trustedMembersPanel,
html[data-theme="dark"] body .trustedMembersPanel,
[data-theme="dark"] body .panel > .viewGrid > section,
html[data-theme="dark"] body .panel > .viewGrid > section,
[data-theme="dark"] body .tripCard,
html[data-theme="dark"] body .tripCard {
  border-color: rgba(94, 234, 212, .22) !important;
  background:
    linear-gradient(135deg, rgba(15, 23, 42, .96), rgba(17, 34, 39, .92)),
    radial-gradient(circle at 100% 0%, rgba(94, 234, 212, .10), transparent 34%) !important;
  box-shadow: 0 22px 60px rgba(0, 0, 0, .34) !important;
}

[data-theme="dark"] body .trustedMembersPanel > h2,
[data-theme="dark"] body .trustedMembersPanel > .sectionHead h2,
[data-theme="dark"] body .panel > .viewGrid > section > h2,
[data-theme="dark"] body .trustedMemberCard strong,
[data-theme="dark"] body .tripCard .cardTop h3,
html[data-theme="dark"] body .trustedMembersPanel > h2,
html[data-theme="dark"] body .trustedMembersPanel > .sectionHead h2,
html[data-theme="dark"] body .panel > .viewGrid > section > h2,
html[data-theme="dark"] body .trustedMemberCard strong,
html[data-theme="dark"] body .tripCard .cardTop h3 {
  color: #f8fafc !important;
}

[data-theme="dark"] body .trustedMembersPanel > p,
[data-theme="dark"] body .trustedMembersPanel > .sectionHead p,
[data-theme="dark"] body .panel > .viewGrid > section > p,
[data-theme="dark"] body .trustedMemberCard small,
[data-theme="dark"] body .tripCard .cardTop p,
[data-theme="dark"] body .tripCard .miniMeta,
[data-theme="dark"] body .tripCard .note,
html[data-theme="dark"] body .trustedMembersPanel > p,
html[data-theme="dark"] body .trustedMembersPanel > .sectionHead p,
html[data-theme="dark"] body .panel > .viewGrid > section > p,
html[data-theme="dark"] body .trustedMemberCard small,
html[data-theme="dark"] body .tripCard .cardTop p,
html[data-theme="dark"] body .tripCard .miniMeta,
html[data-theme="dark"] body .tripCard .note {
  color: #cbd5e1 !important;
}

[data-theme="dark"] body .trustedMemberCard,
[data-theme="dark"] body .tripCard .tripActions,
[data-theme="dark"] body .panel > .viewGrid > section:nth-child(2) > p:last-child,
html[data-theme="dark"] body .trustedMemberCard,
html[data-theme="dark"] body .tripCard .tripActions,
html[data-theme="dark"] body .panel > .viewGrid > section:nth-child(2) > p:last-child {
  border-color: rgba(148, 163, 184, .22) !important;
  background: rgba(15, 23, 42, .72) !important;
}

[data-theme="dark"] body .tripCard .tagRow span,
html[data-theme="dark"] body .tripCard .tagRow span {
  color: #e2e8f0 !important;
  background: rgba(30, 41, 59, .86) !important;
}

@media (max-width: 900px) {
  body .trustedMembersPanel,
  body .panel > .viewGrid {
    width: 100% !important;
    max-width: 100% !important;
  }

  body .trustedMembersPanel,
  body .panel > .viewGrid {
    grid-template-columns: 1fr !important;
  }

  body .trustedMemberGrid {
    grid-template-columns: 1fr !important;
  }

  body .panel > .viewGrid > section:nth-child(2) {
    position: static !important;
  }

  body .tripCard {
    grid-template-columns: 58px minmax(0, 1fr) !important;
    padding: 16px !important;
  }

  body .tripCard .avatar,
  body .tripCard .memberAvatar {
    width: 58px !important;
    height: 58px !important;
    border-radius: 18px !important;
  }

  body .tripCard .cardTop {
    grid-column: 2 !important;
    display: grid !important;
  }

body .tripCard .status {
    justify-self: start !important;
  }
}

/* Edge-spacing correction: recover breathing room after the global alignment pass. */
body :where(.policyQaColumns, .policyMatrix, .policyFaqGrid, .evidenceGapList, .disputeResolutionGrid) {
  gap: 24px !important;
}

body :where(.policyQaColumns > div, .policyMatrix) {
  padding: 24px !important;
}

body :where(.policyMatrix) {
  display: grid !important;
  grid-template-columns: 1fr !important;
  align-content: start !important;
  row-gap: 14px !important;
}

body :where(.policyMatrix span, .evidenceGapList span, .disputeSummary, .policyFinanceNote) {
  padding: 18px 22px !important;
  border-radius: 18px !important;
  margin: 0 !important;
}

body :where(.policyMatrix span) {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  column-gap: 24px !important;
  min-height: 72px !important;
}

body :where(.policyMatrix span strong, .policyMatrix span b) {
  line-height: 1.35 !important;
}

body :where(.policyMatrix small) {
  line-height: 1.55 !important;
  text-align: right !important;
}

body :where(.policyFinanceNote) {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  min-height: 64px !important;
}

body :where(.sideNav) {
  align-items: stretch !important;
}

body :where(.sideNav button, .sideNav a, .sideNav .navItem) {
  justify-content: flex-start !important;
  text-align: left !important;
  padding-left: 18px !important;
  padding-right: 18px !important;
  gap: 14px !important;
}

body :where(.sideNav svg) {
  margin-inline: 0 !important;
}

body :where(.rail) {
  align-items: stretch !important;
}

body :where(.rail button, .rail a, .rail .navItem) {
  justify-content: flex-start !important;
  text-align: left !important;
  padding-left: 18px !important;
  padding-right: 18px !important;
  gap: 14px !important;
}

body :where(.rail button svg, .rail a svg, .rail .navItem svg, .rail .glyph) {
  margin-inline: 0 !important;
  flex: 0 0 20px !important;
}

.rail button,
.rail a,
.rail .navItem {
  justify-content: flex-start !important;
  text-align: left !important;
  padding-left: 18px !important;
  padding-right: 18px !important;
  gap: 14px !important;
}

.rail button > span:not(.badge),
.rail a > span:not(.badge),
.rail .navItem > span:not(.badge) {
  flex: 0 1 auto !important;
  text-align: left !important;
}

.rail button .glyph,
.rail a .glyph,
.rail .navItem .glyph,
.rail button svg,
.rail a svg,
.rail .navItem svg {
  flex: 0 0 20px !important;
  margin-inline: 0 !important;
}

body :where(.policyQaColumns > div, .policyMatrix) {
  border-radius: 24px !important;
}

body :where(.policyQaColumns > div > .policyMatrix, .policyQaColumns > div > .evidenceGapList) {
  margin-top: 16px !important;
}

@media (min-width: 960px) {
  body :where(.appShell main, .mainContent, .viewHost) {
    padding-inline: clamp(24px, 3vw, 48px) !important;
  }
}

@media (max-width: 760px) {
  body :where(.policyQaColumns, .policyMatrix, .policyFaqGrid, .evidenceGapList, .disputeResolutionGrid) {
    gap: 16px !important;
  }

  body :where(.policyQaColumns > div, .policyMatrix) {
    padding: 16px !important;
  }

  body :where(.policyMatrix span) {
    grid-template-columns: 1fr !important;
    row-gap: 8px !important;
    padding: 16px !important;
  }

  body :where(.policyMatrix small) {
    text-align: left !important;
  }
}

/* Design-system alignment sweep: center icons/text and normalize spacing across pages. */
body :where(.glyph) {
  display: inline-grid !important;
  place-items: center !important;
  line-height: 0 !important;
  vertical-align: middle !important;
}

body :where(.glyph svg) {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
}

body :where(
  .quickIcon,
  .pulseIcon,
  .statusIcon,
  .adminIcon,
  .featureIcon,
  .loadingPulse,
  .mobileQuickTasks .glyph,
  .quickStartCard .glyph,
  .adminTile .glyph,
  .stat .glyph,
  .policyItem .glyph,
  .selfServiceCard .glyph,
  .wishModeCard .glyph,
  .decisionStrip .glyph
) {
  display: inline-grid !important;
  place-items: center !important;
  align-items: center !important;
  justify-items: center !important;
  line-height: 0 !important;
  text-align: center !important;
}

body :where(
  .quickIcon svg,
  .pulseIcon svg,
  .statusIcon svg,
  .adminIcon svg,
  .featureIcon svg,
  .loadingPulse svg,
  .mobileQuickTasks .glyph svg,
  .quickStartCard .glyph svg,
  .adminTile .glyph svg,
  .stat .glyph svg,
  .policyItem .glyph svg,
  .selfServiceCard .glyph svg,
  .wishModeCard .glyph svg,
  .decisionStrip .glyph svg
) {
  display: block !important;
  margin: auto !important;
  transform: none !important;
}

body :where(button, .primaryButton, .softButton, .tinyButton, .ghostButton, .dangerButton, .dangerTiny) {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  text-align: center !important;
  line-height: 1.2 !important;
  white-space: normal !important;
}

body :where(
  button[aria-label*="?謚?"],
  button[aria-label*="Close"],
  button[title*="?謚?"],
  button[title*="Close"],
  .modalClose,
  .dialogClose,
  .closeButton,
  .toastClose,
  .sheetClose
) {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  padding: 0 !important;
  border-radius: 999px !important;
  display: inline-grid !important;
  place-items: center !important;
  line-height: 1 !important;
}

body :where(
  button[aria-label*="?謚?"] *,
  button[aria-label*="Close"] *,
  button[title*="?謚?"] *,
  button[title*="Close"] *,
  .modalClose *,
  .dialogClose *,
  .closeButton *,
  .toastClose *,
  .sheetClose *
) {
  margin: auto !important;
}

body :where(.stat, .adminMetric, .summaryStat, .metricCard, .orderSummary > *, .tripSummary > *, .slaStrip > *) {
  align-items: center !important;
  min-height: 72px !important;
}

body :where(.stat) {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 10px !important;
}

body :where(.stat span, .stat small, .stat p) {
  margin: 0 !important;
}

body :where(.stat strong) {
  align-self: center !important;
  justify-self: end !important;
  line-height: 1 !important;
}

body :where(.filters, .accountSectionTabs, .adminSectionTabs, .marketPulseActions, .buttonRow, .quickActions) {
  gap: 12px !important;
}

body :where(.filters button, .accountSectionTabs button, .adminSectionTabs button) {
  min-height: 48px !important;
  padding: 12px 18px !important;
}

body :where(.panel, .panelCard, .accountPanel, .adminShell, .orderWorkbench, .tripWorkbench, .supportCard) {
  margin-block: 24px !important;
}

body :where(.card, .panelCard, .accountCard, .orderCard, .tripCard, .matchCard, .adminTile, .notificationCard, .policyCard, .supportCard) {
  overflow: hidden !important;
}

body :where(.workspace, .panel, .marketPulse, .trustedMembersPanel, .departureBoard, .trendBoard) {
  min-width: 0 !important;
}

@media (min-width: 1100px) {
  body :where(.panel, .marketPulse, .trustedMembersPanel, .departureBoard, .trendBoard, .accountPanel, .adminShell > section) {
    max-width: min(1280px, calc(100vw - 96px)) !important;
  }
}

@media (max-width: 760px) {
  body :where(.panel, .panelCard, .accountPanel, .adminShell, .orderWorkbench, .tripWorkbench, .supportCard) {
    margin-block: 18px !important;
  }

  body :where(.filters button, .accountSectionTabs button, .adminSectionTabs button) {
    min-width: max-content !important;
  }

  body :where(.stat) {
    min-height: 64px !important;
  }
}

/* Icon-card alignment: keep semantic icons centered beside copy on every tab. */
body :where(
  .nextActions > *,
  .quickStartCard,
  .mobileQuickTasks button,
  .adminFocusList article,
  .adminPriorityItem,
  .supportCard,
  .policyItem
) {
  align-items: center !important;
}

body :where(.nextActions > *, .quickStartCard, .mobileQuickTasks button) {
  display: grid !important;
  grid-template-columns: 56px minmax(0, 1fr) auto !important;
  column-gap: 16px !important;
  row-gap: 6px !important;
}

body :where(.nextActions > * > .glyph:first-child, .quickStartCard > .glyph:first-child, .mobileQuickTasks button > .glyph:first-child) {
  grid-row: 1 / span 2 !important;
  align-self: center !important;
  justify-self: center !important;
  width: 56px !important;
  height: 56px !important;
  min-width: 56px !important;
  border-radius: 18px !important;
  background: linear-gradient(135deg, #d9fff2, #f6dc77) !important;
  border: 1px solid rgba(15, 118, 110, .18) !important;
  color: #0f766e !important;
}

body :where(.nextActions > * > strong, .quickStartCard > strong, .mobileQuickTasks button > strong) {
  align-self: end !important;
  margin: 0 !important;
  line-height: 1.25 !important;
}

body :where(.nextActions > * > small, .quickStartCard > small, .mobileQuickTasks button > small) {
  align-self: start !important;
  margin: 0 !important;
  line-height: 1.55 !important;
}

body :where(.orderSummary, .tripSummary, .slaStrip, .adminMetricGrid, .statusFilterGrid) {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)) !important;
  gap: 16px !important;
}

body :where(.orderSummary .stat, .tripSummary .stat, .slaStrip .stat, .statusFilterGrid .stat) {
  min-width: 0 !important;
  min-height: 78px !important;
  padding: 16px 20px !important;
  border-radius: 20px !important;
}

[data-theme="dark"] body :where(.nextActions > * > .glyph:first-child, .quickStartCard > .glyph:first-child, .mobileQuickTasks button > .glyph:first-child),
html[data-theme="dark"] body :where(.nextActions > * > .glyph:first-child, .quickStartCard > .glyph:first-child, .mobileQuickTasks button > .glyph:first-child) {
  color: #5eead4 !important;
  background: linear-gradient(135deg, rgba(20, 184, 166, .22), rgba(250, 204, 21, .18)) !important;
  border-color: rgba(94, 234, 212, .28) !important;
}

@media (max-width: 760px) {
  body :where(.nextActions > *, .quickStartCard, .mobileQuickTasks button) {
    grid-template-columns: 52px minmax(0, 1fr) !important;
    padding: 16px !important;
  }

  body :where(.nextActions > * > .glyph:first-child, .quickStartCard > .glyph:first-child, .mobileQuickTasks button > .glyph:first-child) {
    width: 52px !important;
    height: 52px !important;
    min-width: 52px !important;
  }
}

/* Homepage marketplace section pass: tighter hierarchy and card rhythm. */
body .trustedMembersPanel,
body .panel > .viewGrid {
  margin-top: 32px !important;
  margin-bottom: 32px !important;
}

body .trustedMembersPanel > .sectionHead h2,
body .panel > .viewGrid > section > h2 {
  position: relative !important;
  padding-left: 30px !important;
}

body .trustedMembersPanel > .sectionHead h2::before,
body .panel > .viewGrid > section > h2::before {
  left: 0 !important;
  top: .2em !important;
  width: 12px !important;
  height: 12px !important;
}

body .trustedMemberGrid {
  align-items: stretch !important;
}

body .trustedMemberCard {
  min-height: 236px !important;
  padding: 22px !important;
  align-content: start !important;
}

body .trustedMemberCard > div:first-child {
  display: grid !important;
  grid-template-columns: 64px minmax(0, 1fr) !important;
  gap: 16px !important;
  align-items: center !important;
  margin-bottom: 18px !important;
}

body .trustedMemberCard .metricGrid {
  gap: 10px !important;
}

body .trustedMemberCard .metricGrid > * {
  min-height: 58px !important;
  border-radius: 14px !important;
  background: rgba(248, 250, 252, .9) !important;
}

body .panel > .viewGrid {
  padding-top: 6px !important;
}

body .panel > .viewGrid > section {
  align-self: start !important;
}

body .panel > .viewGrid > section > h2 {
  margin-bottom: 8px !important;
}

body .panel > .viewGrid > section > p {
  max-width: 58ch !important;
  margin-bottom: 22px !important;
}

body .tripCard {
  grid-template-columns: 72px minmax(0, 1fr) auto !important;
  padding: 22px !important;
}

body .tripCard .cardTop {
  grid-column: 2 / 3 !important;
  display: grid !important;
  gap: 6px !important;
}

body .tripCard .status {
  grid-column: 3 !important;
  grid-row: 1 !important;
  align-self: start !important;
  justify-self: end !important;
}

body .tripCard .miniMeta {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  row-gap: 8px !important;
}

body .tripCard .miniMeta svg,
body .tripCard .miniMeta .glyph {
  width: 16px !important;
  height: 16px !important;
  flex: 0 0 16px !important;
  color: #0f766e !important;
}

body .tripCard .meter {
  border-radius: 999px !important;
  overflow: hidden !important;
}

body .tripCard .meter > span,
body .tripCard .meter i {
  border-radius: inherit !important;
}

body .tripCard .tripActions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  align-items: center !important;
}

body .tripCard .tripActions .softButton,
body .tripCard .tripActions button,
body .tripCard .tripActions a {
  min-height: 38px !important;
  border-radius: 14px !important;
}

body .tripCard .note {
  padding: 12px 14px !important;
  border: 1px solid rgba(15, 118, 110, .12) !important;
  border-radius: 16px !important;
  background: rgba(236, 253, 245, .42) !important;
}

body .panel > .viewGrid > section:nth-child(2) > p:last-child {
  min-height: 142px !important;
  align-content: center !important;
}

body .panel > .viewGrid > section:nth-child(2) > p:last-child::before {
  content: "+";
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  margin: 0 auto 12px;
  border-radius: 16px;
  color: #0f766e;
  background: linear-gradient(135deg, #ccfbf1, #fef3c7);
  font-size: 1.45rem;
  font-weight: 900;
}

[data-theme="dark"] body .trustedMemberCard .metricGrid > *,
html[data-theme="dark"] body .trustedMemberCard .metricGrid > * {
  color: #e5eef6 !important;
  background: rgba(15, 23, 42, .86) !important;
}

[data-theme="dark"] body .tripCard .note,
html[data-theme="dark"] body .tripCard .note {
  border-color: rgba(94, 234, 212, .18) !important;
  background: rgba(20, 83, 75, .16) !important;
}

@media (max-width: 900px) {
  body .trustedMembersPanel,
  body .panel > .viewGrid {
    margin-top: 24px !important;
    margin-bottom: 24px !important;
  }

  body .trustedMemberCard {
    min-height: 0 !important;
  }

  body .tripCard {
    grid-template-columns: 58px minmax(0, 1fr) !important;
  }

  body .tripCard .cardTop {
    grid-column: 2 !important;
  }

  body .tripCard .status {
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
    justify-self: start !important;
  }
}

/* Marketplace homepage premium redesign: Airbnb + Notion + TripIt language. */
:root {
  --bm-airbnb: #ff385c;
  --bm-teal: #00a699;
  --bm-page: #f7f7f7;
  --bm-card: #ffffff;
  --bm-text: #111827;
  --bm-muted: #6b7280;
  --bm-border: #e5e7eb;
  --bm-soft-shadow: 0 18px 50px rgba(17, 24, 39, .08);
  --bm-card-shadow: 0 10px 30px rgba(17, 24, 39, .06);
}

body:has(.marketPulse) {
  background:
    radial-gradient(circle at 18% 8%, rgba(0, 166, 153, .10), transparent 30%),
    radial-gradient(circle at 88% 24%, rgba(255, 56, 92, .08), transparent 28%),
    var(--bm-page) !important;
  color: var(--bm-text) !important;
  font-family: Inter, "Noto Sans TC", "Segoe UI", system-ui, sans-serif !important;
}

body:has(.marketPulse) .workspace {
  max-width: 1440px !important;
  margin-inline: auto !important;
  gap: 32px !important;
  padding: 28px 40px 64px !important;
}

body:has(.marketPulse) main,
body:has(.marketPulse) .mainContent {
  min-width: 0 !important;
}

body:has(.marketPulse) .rail {
  width: 232px !important;
  padding: 14px !important;
  border: 0 !important;
  border-radius: 24px !important;
  background: rgba(255, 255, 255, .78) !important;
  box-shadow: 0 12px 36px rgba(17, 24, 39, .06) !important;
  backdrop-filter: blur(18px) !important;
}

body:has(.marketPulse) .rail button,
body:has(.marketPulse) .rail a,
body:has(.marketPulse) .rail .navItem {
  justify-content: flex-start !important;
  min-height: 48px !important;
  padding: 0 16px !important;
  gap: 12px !important;
  border-radius: 16px !important;
  border: 0 !important;
  color: #374151 !important;
  background: transparent !important;
  transition: transform .18s ease, background .18s ease, color .18s ease, box-shadow .18s ease !important;
}

body:has(.marketPulse) .rail button:hover,
body:has(.marketPulse) .rail a:hover,
body:has(.marketPulse) .rail .navItem:hover {
  transform: translateX(2px) !important;
  background: rgba(0, 166, 153, .08) !important;
  color: #04756d !important;
}

body:has(.marketPulse) .rail button.active,
body:has(.marketPulse) .rail a.active,
body:has(.marketPulse) .rail .navItem.active {
  color: #063f3c !important;
  background: #ffffff !important;
  box-shadow: 0 8px 24px rgba(0, 166, 153, .14) !important;
}

body:has(.marketPulse) :where(.heroSearchFirst, .heroProduct) {
  position: relative !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 520px) !important;
  align-items: center !important;
  min-height: 620px !important;
  padding: 64px !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 32px !important;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, .96) 0%, rgba(255, 255, 255, .86) 44%, rgba(255, 255, 255, .20) 72%),
    url("./images/bondmai-hero-handoff.webp") center right / cover no-repeat !important;
  box-shadow: var(--bm-soft-shadow) !important;
}

body:has(.marketPulse) :where(.heroSearchFirst, .heroProduct)::after {
  content: "" !important;
  position: absolute !important;
  inset: auto 32px 32px auto !important;
  width: min(38vw, 520px) !important;
  height: min(38vw, 520px) !important;
  border-radius: 40px !important;
  background: linear-gradient(135deg, rgba(255, 255, 255, .28), rgba(255, 255, 255, .06)) !important;
  pointer-events: none !important;
}

body:has(.marketPulse) :where(.heroSearchFirst .heroCopy, .heroProduct .heroCopy, .heroSearchFirst > div:first-child, .heroProduct > div:first-child) {
  position: relative !important;
  z-index: 1 !important;
  max-width: 700px !important;
}

body:has(.marketPulse) :where(.heroSearchFirst h1, .heroSearchFirst h2, .heroProduct h1, .heroProduct h2) {
  max-width: 760px !important;
  margin: 0 0 24px !important;
  color: var(--bm-text) !important;
  font-size: clamp(48px, 5.2vw, 78px) !important;
  line-height: 1.02 !important;
  letter-spacing: 0 !important;
  font-weight: 850 !important;
}

body:has(.marketPulse) .heroSearchFirst h1 {
  font-size: 0 !important;
}

body:has(.marketPulse) .heroSearchFirst h1::before {
  content: "旅人下一站，也是你的購物天堂";
  display: block;
  max-width: 760px;
  color: var(--bm-text);
  font-size: clamp(48px, 5.2vw, 78px);
  line-height: 1.02;
  letter-spacing: 0;
  font-weight: 850;
}

body:has(.marketPulse) :where(.heroSearchFirst h1 strong, .heroSearchFirst h2 strong, .heroProduct h1 strong, .heroProduct h2 strong, .heroSearchFirst h1 em, .heroSearchFirst h2 em) {
  color: var(--bm-teal) !important;
  font-style: normal !important;
}

body:has(.marketPulse) :where(.heroSearchFirst p, .heroProduct p) {
  max-width: 62ch !important;
  color: #4b5563 !important;
  font-size: 18px !important;
  line-height: 1.8 !important;
}

body:has(.marketPulse) .heroSearchPanel {
  position: relative !important;
  z-index: 3 !important;
  max-width: 920px !important;
  margin-top: 36px !important;
  padding: 10px !important;
  border: 1px solid rgba(229, 231, 235, .92) !important;
  border-radius: 30px !important;
  background: rgba(255, 255, 255, .94) !important;
  box-shadow: 0 18px 45px rgba(17, 24, 39, .12) !important;
  backdrop-filter: blur(16px) !important;
}

body:has(.marketPulse) .heroSearchGrid {
  display: grid !important;
  grid-template-columns: 1.05fr 1.45fr 1fr auto !important;
  gap: 8px !important;
  align-items: stretch !important;
}

body:has(.marketPulse) .heroSearchField {
  display: grid !important;
  gap: 5px !important;
  min-height: 64px !important;
  padding: 11px 18px !important;
  border: 0 !important;
  border-radius: 22px !important;
  background: #fff !important;
  box-shadow: inset 0 0 0 1px rgba(229, 231, 235, .9) !important;
}

body:has(.marketPulse) .heroSearchField span {
  color: #6b7280 !important;
  font-size: 12px !important;
  font-weight: 800 !important;
}

body:has(.marketPulse) .heroSearchField input,
body:has(.marketPulse) .heroSearchField select {
  height: auto !important;
  min-height: 24px !important;
  padding: 0 !important;
  border: 0 !important;
  color: var(--bm-text) !important;
  background: transparent !important;
  font-size: 15px !important;
  font-weight: 750 !important;
  outline: none !important;
}

body:has(.marketPulse) .heroSearchSubmit,
body:has(.marketPulse) .heroSearchPanel .primaryButton {
  min-width: 112px !important;
  min-height: 64px !important;
  border: 0 !important;
  border-radius: 22px !important;
  color: #fff !important;
  background: linear-gradient(135deg, var(--bm-airbnb), #f97375) !important;
  box-shadow: 0 14px 28px rgba(255, 56, 92, .24) !important;
  font-weight: 850 !important;
}

body:has(.marketPulse) :where(.heroSearchSubmit, .primaryButton, .softButton, button) {
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease !important;
}

body:has(.marketPulse) :where(.heroSearchSubmit, .primaryButton, .softButton):hover {
  transform: translateY(-1px) !important;
}

body:has(.marketPulse) .heroStats.compact,
body:has(.marketPulse) .dashboardGrid,
body:has(.marketPulse) .statsGrid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 16px !important;
  margin-top: 32px !important;
}

body:has(.marketPulse) :where(.heroStats.compact > *, .dashboardGrid > *, .statsGrid > *, .stat) {
  min-height: 112px !important;
  padding: 20px !important;
  border: 0 !important;
  border-radius: 22px !important;
  background: rgba(255, 255, 255, .90) !important;
  box-shadow: var(--bm-card-shadow) !important;
  color: var(--bm-text) !important;
}

body:has(.marketPulse) .marketPulse {
  margin-top: 48px !important;
  padding: 36px !important;
  border: 0 !important;
  border-radius: 32px !important;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .96), rgba(255, 255, 255, .86)),
    radial-gradient(circle at 76% 8%, rgba(0, 166, 153, .10), transparent 34%) !important;
  box-shadow: var(--bm-soft-shadow) !important;
}

body:has(.marketPulse) .marketPulseHead {
  display: flex !important;
  align-items: end !important;
  justify-content: space-between !important;
  gap: 24px !important;
  margin-bottom: 28px !important;
}

body:has(.marketPulse) .marketPulseHead h2 {
  color: var(--bm-text) !important;
  font-size: clamp(30px, 3.2vw, 48px) !important;
  line-height: 1.1 !important;
  font-weight: 850 !important;
}

body:has(.marketPulse) .marketPulseHead p {
  max-width: 62ch !important;
  color: var(--bm-muted) !important;
  font-size: 16px !important;
  line-height: 1.75 !important;
}

body:has(.marketPulse) .marketPulseActions {
  display: flex !important;
  gap: 12px !important;
}

body:has(.marketPulse) .marketPulseActions .primaryButton,
body:has(.marketPulse) .marketPulseActions .softButton {
  min-height: 48px !important;
  padding-inline: 22px !important;
  border-radius: 999px !important;
}

body:has(.marketPulse) .marketPulseActions .primaryButton {
  color: #fff !important;
  background: var(--bm-airbnb) !important;
  box-shadow: 0 12px 24px rgba(255, 56, 92, .22) !important;
}

body:has(.marketPulse) .marketPulseActions .softButton {
  color: #0f766e !important;
  background: #fff !important;
  border: 1px solid rgba(0, 166, 153, .18) !important;
}

body:has(.marketPulse) .marketPulseGrid {
  display: grid !important;
  grid-template-columns: minmax(0, 1.35fr) minmax(320px, .65fr) !important;
  gap: 24px !important;
  align-items: start !important;
}

body:has(.marketPulse) :where(.pulseFeed, .pulseTrips, .pulseItem, .featuredWishStrip, .trustedMembersPanel, .departureBoard, .trendBoard) {
  border: 0 !important;
  border-radius: 26px !important;
  background: #fff !important;
  box-shadow: var(--bm-card-shadow) !important;
}

body:has(.marketPulse) :where(.pulseItem, .countryCard, .areaList article, .tripCard, .trustedMemberCard) {
  border: 1px solid rgba(229, 231, 235, .95) !important;
  border-radius: 22px !important;
  background: #fff !important;
  box-shadow: 0 8px 24px rgba(17, 24, 39, .05) !important;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease !important;
}

body:has(.marketPulse) :where(.pulseItem, .countryCard, .areaList article, .tripCard, .trustedMemberCard):hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 18px 44px rgba(17, 24, 39, .11) !important;
  border-color: rgba(0, 166, 153, .28) !important;
}

body:has(.marketPulse) .pulseIcon,
body:has(.marketPulse) .countryFlag,
body:has(.marketPulse) .memberAvatar,
body:has(.marketPulse) .avatar {
  display: inline-grid !important;
  place-items: center !important;
  flex: 0 0 auto !important;
  box-shadow: 0 8px 22px rgba(17, 24, 39, .08) !important;
}

body:has(.marketPulse) .pulseIcon {
  width: 56px !important;
  height: 56px !important;
  border-radius: 18px !important;
  color: #0f766e !important;
  background: linear-gradient(135deg, #dffcf5, #fff2b8) !important;
}

body:has(.marketPulse) .countryCard {
  min-height: 208px !important;
  padding: 24px !important;
}

body:has(.marketPulse) .countryCard .status,
body:has(.marketPulse) .countryCard .badge,
body:has(.marketPulse) .countryCard .departBadge {
  min-height: 28px !important;
  padding: 5px 10px !important;
  border-radius: 999px !important;
  color: #075e59 !important;
  background: rgba(0, 166, 153, .12) !important;
  font-size: 12px !important;
  font-weight: 850 !important;
}

body:has(.marketPulse) .areaList {
  gap: 14px !important;
}

body:has(.marketPulse) .areaList article {
  min-height: 92px !important;
  padding: 18px 20px !important;
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 14px !important;
}

body:has(.marketPulse) .tripCard {
  grid-template-columns: 72px minmax(0, 1fr) auto !important;
  gap: 18px !important;
  padding: 24px !important;
}

body:has(.marketPulse) .tripCard::before,
body:has(.marketPulse) .timelineItem::before {
  background: var(--bm-teal) !important;
}

body:has(.marketPulse) .timelineBox {
  position: relative !important;
  padding: 28px !important;
  border: 0 !important;
  border-radius: 26px !important;
  background: #fff !important;
  box-shadow: var(--bm-card-shadow) !important;
}

body:has(.marketPulse) .timelineList {
  position: relative !important;
  display: grid !important;
  gap: 18px !important;
  padding-left: 28px !important;
}

body:has(.marketPulse) .timelineList::before {
  content: "" !important;
  position: absolute !important;
  left: 8px !important;
  top: 8px !important;
  bottom: 8px !important;
  width: 2px !important;
  border-radius: 999px !important;
  background: linear-gradient(var(--bm-teal), rgba(255, 56, 92, .4)) !important;
}

body:has(.marketPulse) .timelineItem {
  position: relative !important;
  padding: 16px 18px !important;
  border: 1px solid var(--bm-border) !important;
  border-radius: 18px !important;
  background: #fff !important;
}

body:has(.marketPulse) .timelineItem::before {
  content: "" !important;
  position: absolute !important;
  left: -26px !important;
  top: 22px !important;
  width: 12px !important;
  height: 12px !important;
  border: 3px solid #fff !important;
  border-radius: 999px !important;
  box-shadow: 0 0 0 2px rgba(0, 166, 153, .18) !important;
}

html[data-theme="dark"] body:has(.marketPulse),
[data-theme="dark"] body:has(.marketPulse) {
  background:
    radial-gradient(circle at 18% 8%, rgba(0, 166, 153, .16), transparent 30%),
    radial-gradient(circle at 88% 24%, rgba(255, 56, 92, .10), transparent 28%),
    #0b1220 !important;
  color: #f8fafc !important;
}

html[data-theme="dark"] body:has(.marketPulse) :where(.heroSearchFirst, .heroProduct) {
  background:
    linear-gradient(90deg, rgba(11, 18, 32, .92) 0%, rgba(11, 18, 32, .80) 48%, rgba(11, 18, 32, .25) 78%),
    url("./images/bondmai-hero-handoff.webp") center right / cover no-repeat !important;
}

html[data-theme="dark"] body:has(.marketPulse) :where(.heroSearchFirst h1, .heroSearchFirst h2, .heroProduct h1, .heroProduct h2),
html[data-theme="dark"] body:has(.marketPulse) :where(.marketPulseHead h2, .countryCard h3, .tripCard h3, .trustedMemberCard h3) {
  color: #f8fafc !important;
}

html[data-theme="dark"] body:has(.marketPulse) :where(.heroSearchFirst p, .heroProduct p, .marketPulseHead p) {
  color: #cbd5e1 !important;
}

html[data-theme="dark"] body:has(.marketPulse) :where(.rail, .marketPulse, .pulseFeed, .pulseTrips, .pulseItem, .countryCard, .areaList article, .tripCard, .trustedMemberCard, .timelineBox, .timelineItem) {
  border-color: rgba(148, 163, 184, .18) !important;
  background: rgba(15, 23, 42, .86) !important;
  box-shadow: 0 18px 46px rgba(0, 0, 0, .28) !important;
}

html[data-theme="dark"] body:has(.marketPulse) .heroSearchPanel,
html[data-theme="dark"] body:has(.marketPulse) .heroSearchField {
  border-color: rgba(148, 163, 184, .18) !important;
  background: rgba(15, 23, 42, .92) !important;
}

html[data-theme="dark"] body:has(.marketPulse) .heroSearchField input,
html[data-theme="dark"] body:has(.marketPulse) .heroSearchField select {
  color: #f8fafc !important;
}

html[data-theme="dark"] body:has(.marketPulse) .rail button,
html[data-theme="dark"] body:has(.marketPulse) .rail a,
html[data-theme="dark"] body:has(.marketPulse) .rail .navItem {
  color: #cbd5e1 !important;
}

html[data-theme="dark"] body:has(.marketPulse) .rail button.active,
html[data-theme="dark"] body:has(.marketPulse) .rail a.active,
html[data-theme="dark"] body:has(.marketPulse) .rail .navItem.active {
  color: #ccfbf1 !important;
  background: rgba(0, 166, 153, .16) !important;
}

@media (max-width: 1100px) {
  body:has(.marketPulse) .workspace {
    padding: 20px 20px 96px !important;
  }

  body:has(.marketPulse) :where(.heroSearchFirst, .heroProduct) {
    grid-template-columns: 1fr !important;
    min-height: 560px !important;
    padding: 48px !important;
  }

  body:has(.marketPulse) .heroSearchGrid,
  body:has(.marketPulse) .marketPulseGrid {
    grid-template-columns: 1fr !important;
  }

  body:has(.marketPulse) .heroStats.compact,
  body:has(.marketPulse) .dashboardGrid,
  body:has(.marketPulse) .statsGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 720px) {
  body:has(.marketPulse) .workspace {
    padding: 12px 12px 104px !important;
    gap: 20px !important;
  }

  body:has(.marketPulse) .rail {
    width: auto !important;
    border-radius: 22px !important;
  }

  body:has(.marketPulse) :where(.heroSearchFirst, .heroProduct) {
    min-height: 0 !important;
    padding: 34px 22px 26px !important;
    border-radius: 28px !important;
    background:
      linear-gradient(180deg, rgba(11, 18, 32, .22), rgba(11, 18, 32, .76)),
      url("./images/bondmai-hero-handoff.webp") center / cover no-repeat !important;
  }

  body:has(.marketPulse) :where(.heroSearchFirst h1, .heroSearchFirst h2, .heroProduct h1, .heroProduct h2) {
    color: #fff !important;
    font-size: clamp(34px, 10vw, 48px) !important;
  }

  body:has(.marketPulse) .heroSearchFirst h1::before {
    color: #fff !important;
    font-size: clamp(34px, 10vw, 48px) !important;
  }

  body:has(.marketPulse) :where(.heroSearchFirst p, .heroProduct p) {
    color: rgba(255, 255, 255, .90) !important;
    font-size: 15px !important;
  }

  body:has(.marketPulse) .heroSearchPanel {
    padding: 8px !important;
    border-radius: 24px !important;
  }

  body:has(.marketPulse) .heroStats.compact,
  body:has(.marketPulse) .dashboardGrid,
  body:has(.marketPulse) .statsGrid {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }

  body:has(.marketPulse) .marketPulse {
    margin-top: 24px !important;
    padding: 22px 16px !important;
    border-radius: 28px !important;
  }

  body:has(.marketPulse) .marketPulseHead {
    display: grid !important;
    gap: 14px !important;
  }

  body:has(.marketPulse) .marketPulseActions {
    width: 100% !important;
  }

  body:has(.marketPulse) .marketPulseActions > * {
    flex: 1 1 0 !important;
  }

  body:has(.marketPulse) :where(.pulseFeed, .pulseTrips, .pulseItem, .countryCard, .tripCard) {
    border-radius: 22px !important;
  }
}

/* Marketplace utility controls: keep language/theme toggles away from mobile CTAs and bottom nav. */
body:has(.marketPulse) .languageToggle,
body:has(.marketPulse) .themeToggle {
  position: fixed !important;
  top: 88px !important;
  bottom: auto !important;
  z-index: 22 !important;
}

body:has(.marketPulse) .languageToggle {
  right: 18px !important;
}

body:has(.marketPulse) .themeToggle {
  right: 196px !important;
}

@media (max-width: 720px) {
  body:has(.marketPulse) .languageToggle,
  body:has(.marketPulse) .themeToggle {
    top: 72px !important;
    box-shadow: 0 10px 24px rgba(15, 23, 42, .18) !important;
  }

  body:has(.marketPulse) .languageToggle {
    right: 12px !important;
    gap: 2px !important;
    padding: 3px !important;
  }

  body:has(.marketPulse) .languageToggle button {
    min-width: 30px !important;
    min-height: 30px !important;
    font-size: 11px !important;
  }

  body:has(.marketPulse) .themeToggle {
    right: 178px !important;
    min-height: 36px !important;
    padding: 0 11px !important;
    font-size: 12px !important;
  }
}

/* BondMate 3.0 global traveler marketplace redesign. */
:root {
  --bm3-bg: #f8fafc;
  --bm3-card: #ffffff;
  --bm3-primary: #ff385c;
  --bm3-secondary: #00a699;
  --bm3-text: #111827;
  --bm3-muted: #6b7280;
  --bm3-line: #e5e7eb;
  --bm3-soft: #f1f5f9;
  --bm3-shadow: 0 10px 30px rgba(15, 23, 42, .08);
  --bm3-shadow-lift: 0 18px 46px rgba(15, 23, 42, .12);
  --bm3-radius-card: 20px;
  --bm3-radius-button: 14px;
  --bm3-radius-input: 16px;
}

body {
  background: var(--bm3-bg) !important;
  color: var(--bm3-text) !important;
  font-family: Inter, "Noto Sans TC", "Microsoft JhengHei", "Segoe UI", system-ui, sans-serif !important;
  letter-spacing: 0 !important;
}

body::selection {
  color: #fff;
  background: var(--bm3-primary);
}

body :where(h1, h2, h3, h4, strong, .brandName) {
  color: var(--bm3-text) !important;
  letter-spacing: 0 !important;
}

body :where(p, small, .note, .miniMeta, .muted) {
  color: var(--bm3-muted) !important;
}

body :where(.primaryButton, .heroSearchSubmit, button[type="submit"]) {
  border: 0 !important;
  border-radius: var(--bm3-radius-button) !important;
  color: #fff !important;
  background: linear-gradient(135deg, var(--bm3-primary), #ff6b7f) !important;
  box-shadow: 0 12px 26px rgba(255, 56, 92, .24) !important;
  font-weight: 800 !important;
}

body :where(.softButton, .tinyButton, .ghostButton, .secondaryButton) {
  border: 1px solid rgba(148, 163, 184, .28) !important;
  border-radius: var(--bm3-radius-button) !important;
  color: var(--bm3-text) !important;
  background: rgba(255, 255, 255, .92) !important;
  box-shadow: 0 6px 18px rgba(15, 23, 42, .04) !important;
  font-weight: 760 !important;
}

body :where(button, a, .card, .panel, .countryCard, .tripCard, .pulseItem, .trustedMemberCard, .policyItem, .adminTile, .orderCard, .matchCard) {
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease, color .18s ease !important;
}

body :where(.primaryButton, .softButton, .tinyButton, .heroSearchSubmit, .countryCard, .tripCard, .pulseItem, .trustedMemberCard, .trendCard, .policyItem, .adminTile):hover {
  transform: translateY(-4px) scale(1.01) !important;
  box-shadow: var(--bm3-shadow-lift) !important;
}

body :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
  min-height: 48px !important;
  border: 1px solid rgba(148, 163, 184, .28) !important;
  border-radius: var(--bm3-radius-input) !important;
  color: var(--bm3-text) !important;
  background: rgba(255, 255, 255, .94) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .72) !important;
}

body :where(.topbar) {
  position: sticky !important;
  top: 0 !important;
  z-index: 30 !important;
  min-height: 72px !important;
  padding: 12px clamp(18px, 4vw, 56px) !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(229, 231, 235, .72) !important;
  background: rgba(248, 250, 252, .78) !important;
  backdrop-filter: blur(22px) saturate(1.25) !important;
  box-shadow: 0 8px 26px rgba(15, 23, 42, .05) !important;
}

body .logoMark {
  width: 46px !important;
  height: 46px !important;
  border-radius: 16px !important;
  background: linear-gradient(135deg, #111827, #00a699) !important;
  box-shadow: 0 10px 24px rgba(0, 166, 153, .18) !important;
}

body .brandName {
  gap: 10px !important;
  font-size: 1.14rem !important;
  font-weight: 820 !important;
}

body .brandName em {
  color: #007f76 !important;
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
}

body .tabs {
  gap: 8px !important;
  padding: 6px !important;
  border: 1px solid rgba(148, 163, 184, .22) !important;
  border-radius: 18px !important;
  background: rgba(255, 255, 255, .72) !important;
  box-shadow: 0 8px 24px rgba(15, 23, 42, .05) !important;
}

body .tabs button {
  min-height: 42px !important;
  padding: 0 16px !important;
  border-radius: 14px !important;
  color: #64748b !important;
  font-weight: 760 !important;
}

body .tabs button:hover {
  color: var(--bm3-text) !important;
  background: rgba(241, 245, 249, .96) !important;
}

body .tabs button.active {
  color: var(--bm3-text) !important;
  background: #fff !important;
  box-shadow: 0 8px 22px rgba(15, 23, 42, .08) !important;
}

body:not(:has(.appShell.view-wish)) :where(.workspace) {
  width: min(100%, 1480px);
  margin-inline: auto;
  padding: 28px clamp(18px, 3vw, 44px) 72px;
  gap: 28px;
}

body:has(.appShell:is(.view-map, .view-trip, .view-orders, .view-account, .view-policy)) :where(.workspace) {
  width: min(calc(100% - clamp(24px, 4.5vw, 64px)), 1280px) !important;
  grid-template-columns: minmax(0, 1fr) !important;
  padding: 28px clamp(12px, 4vw, 56px) 72px !important;
}

body :where(.rail) {
  position: sticky !important;
  top: 92px !important;
  width: 252px !important;
  align-self: start !important;
  padding: 14px 10px !important;
  border: 1px solid rgba(229, 231, 235, .76) !important;
  border-radius: 22px !important;
  background: rgba(255, 255, 255, .76) !important;
  backdrop-filter: blur(18px) saturate(1.15) !important;
  box-shadow: var(--bm3-shadow) !important;
}

body:has(.appShell:is(.view-map, .view-trip, .view-orders, .view-account, .view-policy)) .workspace > .rail {
  display: none !important;
}

body .rail::before {
  content: "Marketplace";
  display: block;
  padding: 8px 14px 12px;
  color: #94a3b8;
  font-size: 11px;
  font-weight: 820;
  text-transform: uppercase;
  letter-spacing: .08em;
}

body :where(.rail button, .rail a, .rail .navItem) {
  min-height: 46px !important;
  padding: 0 14px !important;
  justify-content: flex-start !important;
  gap: 12px !important;
  border-radius: 14px !important;
  color: #475569 !important;
  background: transparent !important;
  box-shadow: none !important;
  font-weight: 740 !important;
}

body :where(.rail button:hover, .rail a:hover, .rail .navItem:hover) {
  transform: none !important;
  color: var(--bm3-text) !important;
  background: rgba(241, 245, 249, .96) !important;
  box-shadow: none !important;
}

body :where(.rail button.active, .rail a.active, .rail .navItem.active) {
  color: var(--bm3-text) !important;
  background: #fff !important;
  box-shadow: 0 8px 20px rgba(15, 23, 42, .07) !important;
}

body :where(.panel, .panelCard, .viewGrid > section, .trustedMembersPanel, .departureBoard, .trendBoard, .accountPanel, .adminShell > section, .policyItem, .policyBanner, .mapGuidePanel, .paymentAgreementPanel, .supportCard) {
  border: 1px solid rgba(229, 231, 235, .82) !important;
  border-radius: var(--bm3-radius-card) !important;
  background: rgba(255, 255, 255, .92) !important;
  box-shadow: var(--bm3-shadow) !important;
}

body :where(.sectionHead, .marketPulseHead, .panelHeader) {
  align-items: end !important;
  gap: 18px !important;
}

body :where(.sectionHead h2, .marketPulseHead h2, .panelHeader h2) {
  font-size: clamp(1.7rem, 3vw, 2.9rem) !important;
  line-height: 1.08 !important;
  font-weight: 820 !important;
}

body :where(.sectionHead p, .marketPulseHead p, .panelHeader p) {
  max-width: 64ch !important;
  line-height: 1.75 !important;
}

body :where(.stat, .adminShellTile, .trustSummaryCard, .securityMiniCard, .policyBanner span, .policyBanner strong) {
  border: 0 !important;
  border-radius: 18px !important;
  background: transparent !important;
  box-shadow: none !important;
}

body :where(.heroSearchFirst, .heroProduct) {
  isolation: isolate !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1.03fr) minmax(330px, .72fr) !important;
  gap: clamp(28px, 4vw, 56px) !important;
  min-height: min(740px, calc(100dvh - 104px)) !important;
  padding: clamp(44px, 6vw, 80px) !important;
  border: 0 !important;
  border-radius: 34px !important;
  overflow: hidden !important;
  background:
    linear-gradient(90deg, rgba(248, 250, 252, .94) 0%, rgba(248, 250, 252, .86) 46%, rgba(248, 250, 252, .24) 100%),
    url("./images/bondmai-hero-handoff.webp") center right / cover no-repeat !important;
  box-shadow: 0 28px 70px rgba(15, 23, 42, .12) !important;
}

body :where(.heroSearchFirst, .heroProduct)::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: -1 !important;
  background:
    linear-gradient(120deg, rgba(0, 166, 153, .12), transparent 36%),
    linear-gradient(300deg, rgba(255, 56, 92, .11), transparent 42%) !important;
  pointer-events: none !important;
}

body :where(.heroSearchFirst, .heroProduct)::after {
  content: "Tokyo  Seoul  Paris  New York  Sydney" !important;
  position: absolute !important;
  right: clamp(24px, 4vw, 52px) !important;
  bottom: clamp(20px, 3vw, 44px) !important;
  z-index: 0 !important;
  max-width: min(40vw, 520px) !important;
  color: rgba(17, 24, 39, .12) !important;
  font-size: clamp(2.8rem, 7vw, 6rem) !important;
  line-height: .92 !important;
  font-weight: 900 !important;
  text-align: right !important;
  pointer-events: none !important;
}

body :where(.heroSearchFirst .heroCopy, .heroProduct .heroCopy, .heroSearchFirst > div:first-child, .heroProduct > div:first-child) {
  z-index: 2 !important;
  max-width: 760px !important;
}

body .heroSearchFirst .eyebrow::before {
  content: "🌏";
  margin-right: 8px;
}

body .heroSearchFirst h1 {
  font-size: 0 !important;
}

body .heroSearchFirst h1::before {
  content: "Travel with Purpose.\A旅人下一站，也是你的購物天堂。" !important;
  display: block !important;
  max-width: 760px !important;
  color: var(--bm3-text) !important;
  font-size: clamp(2.85rem, 4.25vw, 4.25rem) !important;
  line-height: .96 !important;
  font-weight: 820 !important;
  letter-spacing: 0 !important;
  white-space: pre-line !important;
}

body .heroSearchFirst p {
  max-width: 720px !important;
  margin-top: 16px !important;
  color: #334155 !important;
  font-size: clamp(1.05rem, 1.4vw, 1.25rem) !important;
  line-height: 1.82 !important;
}

body .heroSearchPanel {
  width: min(100%, 920px) !important;
  margin-top: 24px !important;
  padding: 10px !important;
  border: 1px solid rgba(229, 231, 235, .88) !important;
  border-radius: 28px !important;
  background: rgba(255, 255, 255, .92) !important;
  backdrop-filter: blur(18px) !important;
  box-shadow: 0 20px 50px rgba(15, 23, 42, .14) !important;
}

body .heroSearchGrid {
  grid-template-columns: minmax(200px, 1.3fr) minmax(160px, .85fr) minmax(130px, .7fr) auto !important;
  gap: 8px !important;
}

body .heroSearchField {
  min-height: 66px !important;
  padding: 12px 18px !important;
  border-radius: 20px !important;
  background: #fff !important;
  box-shadow: inset 0 0 0 1px rgba(226, 232, 240, .92) !important;
}

body .heroSearchField span {
  color: #64748b !important;
  font-size: 12px !important;
  font-weight: 820 !important;
}

body .heroSearchSubmit {
  min-width: 116px !important;
  min-height: 66px !important;
  border-radius: 20px !important;
}

body .heroSearchFirst .marketplaceHeroPanel {
  align-self: center !important;
  max-height: 720px !important;
  padding: 28px !important;
  overflow: hidden !important;
}

body .marketplaceHeroPanel .heroVisual {
  max-height: 310px !important;
  margin: 0 0 18px !important;
  overflow: hidden !important;
  border-radius: 18px !important;
}

body .marketplaceHeroPanel .heroVisual img {
  width: 100% !important;
  height: 100% !important;
  min-height: 260px !important;
  object-fit: cover !important;
}

body .marketplaceHeroPanel .quickStartHead {
  display: none !important;
}

body .marketplaceHeroPanel .quickStartGrid {
  display: none !important;
}

body .marketplaceHeroPanel .quickStartCard {
  min-height: 78px !important;
  padding: 12px 16px !important;
}

body .marketplaceHeroPanel .quickStartCard small {
  display: none !important;
}

body .marketplaceHeroPanel .heroStats.compact {
  display: none !important;
}

body .marketplaceHeroPanel::after {
  content: "AI Recommendation\A 找到 8 位符合旅人\A 最快明天返台 · 成功率 91%";
  display: block;
  white-space: pre-line;
  margin-top: 18px;
  padding: 18px 20px;
  border: 1px solid rgba(0, 166, 153, .22);
  border-radius: 20px;
  color: #111827;
  background: linear-gradient(135deg, rgba(255, 255, 255, .96), rgba(236, 253, 245, .9));
  box-shadow: 0 14px 34px rgba(15, 23, 42, .08);
  font-size: 15px;
  font-weight: 760;
  line-height: 1.7;
}

body > main > .quickStartPanel {
  display: none !important;
}

body:has(.marketPulse) .onboardingPanel {
  display: none !important;
}

body .marketPulse {
  margin-top: clamp(18px, 3vw, 42px) !important;
}

body .heroStats.compact,
body :where(.dashboardGrid, .statsGrid, .orderSummary, .tripSummary, .adminSummaryStrip, .founderMetricGrid) {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 0 !important;
  margin-top: 36px !important;
  border-top: 1px solid rgba(226, 232, 240, .9) !important;
  border-bottom: 1px solid rgba(226, 232, 240, .9) !important;
}

body .heroStats.compact .stat,
body :where(.dashboardGrid > *, .statsGrid > *, .orderSummary .stat, .tripSummary .stat, .adminSummaryStrip > *, .founderMetricGrid > *) {
  min-height: 116px !important;
  padding: 22px 24px !important;
  border-radius: 0 !important;
  border-right: 1px solid rgba(226, 232, 240, .9) !important;
  background: transparent !important;
  box-shadow: none !important;
}

body .heroStats.compact .stat:last-child,
body :where(.dashboardGrid > *:last-child, .statsGrid > *:last-child, .orderSummary .stat:last-child, .tripSummary .stat:last-child) {
  border-right: 0 !important;
}

body :where(.marketPulse, .trustedMembersPanel, .departureBoard, .trendBoard) {
  width: 100% !important;
  max-width: 100% !important;
  margin-top: clamp(42px, 6vw, 72px) !important;
  padding: clamp(28px, 4vw, 48px) !important;
  border-radius: 28px !important;
}

body .marketPulse {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .96), rgba(255, 255, 255, .90)),
    url("./images/traveler-hero.jpg") center / cover no-repeat !important;
}

body .marketPulseHead .eyebrow::before {
  content: "✈";
  margin-right: 8px;
}

body .marketPulseHead h2::after {
  content: " AI sorted";
  display: inline-flex;
  margin-left: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  color: #007f76;
  background: rgba(0, 166, 153, .10);
  font-size: .72rem;
  vertical-align: middle;
}

body .marketPulseGrid {
  grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr) !important;
  gap: 24px !important;
}

body :where(.pulseFeed, .pulseTrips) {
  display: grid !important;
  gap: 14px !important;
  padding: 20px !important;
  border-radius: 24px !important;
  background: rgba(255, 255, 255, .94) !important;
  box-shadow: var(--bm3-shadow) !important;
}

body :where(.pulseFeed h3, .pulseTrips h3) {
  font-size: 1.05rem !important;
  font-weight: 820 !important;
}

body .pulseFeed h3::before {
  content: "🛍 ";
}

body .pulseTrips h3::before {
  content: "👨‍✈ ";
}

body .pulseItem {
  display: grid !important;
  grid-template-columns: 54px minmax(0, 1fr) auto !important;
  gap: 14px !important;
  align-items: center !important;
  min-height: 102px !important;
  padding: 16px !important;
  border: 1px solid rgba(226, 232, 240, .86) !important;
  border-radius: 20px !important;
  background: #fff !important;
}

body .pulseIcon {
  width: 54px !important;
  height: 54px !important;
  border-radius: 18px !important;
  color: #007f76 !important;
  background: rgba(0, 166, 153, .10) !important;
  box-shadow: none !important;
}

body .pulseItem strong {
  font-size: 1.02rem !important;
}

body .pulseItem p {
  margin-top: 4px !important;
  line-height: 1.5 !important;
}

body :where(.countryGrid, .readableCountries, .trustedMemberGrid, .departureGrid, .trendGrid, .featuredWishScroller) {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)) !important;
  gap: 18px !important;
}

body :where(.countryCard, .trustedMemberCard, .tripCard, .trendCard, .featuredWishCard, .areaList article) {
  border: 1px solid rgba(226, 232, 240, .9) !important;
  border-radius: var(--bm3-radius-card) !important;
  background: #fff !important;
  box-shadow: var(--bm3-shadow) !important;
}

body .countryCard {
  min-height: 188px !important;
  padding: 24px !important;
  overflow: hidden !important;
}

body .countryCard .countryFlag {
  width: 42px !important;
  height: 42px !important;
}

body .countryCard h3,
body .countryCard strong {
  font-size: 1.35rem !important;
  font-weight: 820 !important;
}

body .countryCard::after {
  content: "Explore";
  display: inline-flex;
  margin-top: 16px;
  padding: 7px 11px;
  border-radius: 999px;
  color: #64748b;
  background: #f8fafc;
  font-size: 12px;
  font-weight: 820;
}

body .trustedMemberCard {
  position: relative !important;
  min-height: 244px !important;
  padding: 24px !important;
}

body .trustedMemberCard::after {
  content: "★★★★★";
  position: absolute;
  top: 24px;
  right: 24px;
  color: #f59e0b;
  font-size: 13px;
  letter-spacing: 0;
}

body .memberAvatar {
  width: 60px !important;
  height: 60px !important;
  border-radius: 20px !important;
  box-shadow: 0 10px 24px rgba(15, 23, 42, .10) !important;
}

body .tripCard {
  padding: 22px !important;
}

body .tripCard .cardTop h3::before {
  content: "🙂 ";
}

body .tripCard .miniMeta {
  color: #64748b !important;
}

body .tripCard .meter {
  height: 8px !important;
  background: #e2e8f0 !important;
}

body .tripCard .meter > span,
body .tripCard .meter i {
  background: linear-gradient(90deg, var(--bm3-secondary), #7dd3fc) !important;
}

body .departureBoard {
  position: relative !important;
  overflow: hidden !important;
}

body .departureBoard::before {
  content: "🌏";
  position: absolute;
  right: 34px;
  top: 24px;
  color: rgba(15, 23, 42, .06);
  font-size: clamp(5rem, 12vw, 12rem);
  line-height: 1;
}

body .departureBoard::after {
  content: "";
  position: absolute;
  inset: 90px 38px 38px auto;
  width: min(44%, 520px);
  border-radius: 32px;
  background:
    radial-gradient(circle at 24% 32%, rgba(255, 56, 92, .82) 0 6px, transparent 7px),
    radial-gradient(circle at 48% 44%, rgba(0, 166, 153, .9) 0 5px, transparent 6px),
    radial-gradient(circle at 72% 38%, rgba(17, 24, 39, .72) 0 5px, transparent 6px),
    radial-gradient(circle at 64% 70%, rgba(255, 56, 92, .72) 0 4px, transparent 5px),
    linear-gradient(135deg, rgba(248, 250, 252, .88), rgba(226, 232, 240, .55));
  opacity: .72;
  pointer-events: none;
}

body .departureBoard :where(.sectionHead, .departureGrid, .boardSummary) {
  position: relative !important;
  z-index: 1 !important;
}

body .trendBoard {
  background: linear-gradient(135deg, #111827, #1f2937) !important;
}

body .trendBoard :where(h2, h3, strong) {
  color: #fff !important;
}

body .trendBoard :where(p, small, span) {
  color: #cbd5e1 !important;
}

body .trendBoard .sectionHead h2::before {
  content: "🔥 ";
}

body .trendCard {
  background: rgba(255, 255, 255, .08) !important;
  border-color: rgba(255, 255, 255, .12) !important;
  box-shadow: none !important;
}

body:has(.marketPulse)::after {
  content: "🤖 AI  找到 8 位符合旅人  成功率 91%";
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 40;
  max-width: min(360px, calc(100vw - 44px));
  padding: 14px 18px;
  border: 1px solid rgba(226, 232, 240, .9);
  border-radius: 20px;
  color: var(--bm3-text);
  background: rgba(255, 255, 255, .92);
  box-shadow: var(--bm3-shadow-lift);
  backdrop-filter: blur(18px);
  font-size: 14px;
  font-weight: 780;
  pointer-events: none;
}

body .languageToggle,
body .themeToggle {
  border: 1px solid rgba(226, 232, 240, .86) !important;
  background: rgba(255, 255, 255, .86) !important;
  backdrop-filter: blur(18px) !important;
  box-shadow: var(--bm3-shadow) !important;
}

body .languageToggle button.active,
body .themeToggle {
  color: #fff !important;
  background: var(--bm3-text) !important;
}

html[data-theme="dark"],
html[data-theme="dark"] body {
  --bm3-bg: #0b1220;
  --bm3-card: #111827;
  --bm3-text: #f8fafc;
  --bm3-muted: #cbd5e1;
  --bm3-line: rgba(148, 163, 184, .22);
  --bm3-soft: #172033;
  background: #0b1220 !important;
  color: #f8fafc !important;
}

html[data-theme="dark"] body :where(.topbar, .rail, .panel, .panelCard, .viewGrid > section, .marketPulse, .trustedMembersPanel, .departureBoard, .accountPanel, .policyItem, .policyBanner, .mapGuidePanel, .pulseFeed, .pulseTrips, .pulseItem, .countryCard, .trustedMemberCard, .tripCard, .trendCard, .areaList article) {
  border-color: rgba(148, 163, 184, .18) !important;
  background: rgba(17, 24, 39, .86) !important;
  box-shadow: 0 18px 46px rgba(0, 0, 0, .28) !important;
}

html[data-theme="dark"] body :where(.heroSearchFirst, .heroProduct) {
  background:
    linear-gradient(90deg, rgba(11, 18, 32, .94) 0%, rgba(11, 18, 32, .84) 48%, rgba(11, 18, 32, .32) 100%),
    url("./images/bondmai-hero-handoff.webp") center right / cover no-repeat !important;
}

html[data-theme="dark"] body :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea, .heroSearchField) {
  border-color: rgba(148, 163, 184, .20) !important;
  color: #f8fafc !important;
  background: rgba(15, 23, 42, .92) !important;
}

html[data-theme="dark"] body :where(.softButton, .tinyButton, .ghostButton) {
  color: #f8fafc !important;
  background: rgba(15, 23, 42, .88) !important;
  border-color: rgba(148, 163, 184, .22) !important;
}

html[data-theme="dark"] body .trendBoard {
  background: linear-gradient(135deg, #020617, #111827) !important;
}

html[data-theme="dark"] body .languageToggle,
html[data-theme="dark"] body .themeToggle,
html[data-theme="dark"] body:has(.marketPulse)::after {
  color: #f8fafc !important;
  background: rgba(15, 23, 42, .92) !important;
  border-color: rgba(148, 163, 184, .24) !important;
}

@media (max-width: 1100px) {
  body :where(.workspace) {
    padding: 18px 18px 112px !important;
  }

  body :where(.heroSearchFirst, .heroProduct) {
    grid-template-columns: 1fr !important;
    min-height: 0 !important;
    padding: 48px !important;
  }

  body .heroSearchFirst .marketplaceHeroPanel {
    display: none !important;
  }

  body .heroSearchGrid,
  body .marketPulseGrid {
    grid-template-columns: 1fr !important;
  }

  body .heroStats.compact,
  body :where(.dashboardGrid, .statsGrid, .orderSummary, .tripSummary, .adminSummaryStrip, .founderMetricGrid) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body .rail {
    display: none !important;
  }
}

@media (max-width: 720px) {
  body :where(.topbar) {
    min-height: 62px !important;
    padding: 10px 14px !important;
    border-radius: 0 0 28px 28px !important;
  }

  body .brand small,
  body .tabs {
    display: none !important;
  }

  body .logoMark {
    width: 38px !important;
    height: 38px !important;
    border-radius: 13px !important;
  }

  body .brandName {
    font-size: 1rem !important;
  }

  body :where(.workspace) {
    padding: 14px 12px 118px !important;
    gap: 22px !important;
  }

  body :where(.heroSearchFirst, .heroProduct) {
    padding: 34px 22px 24px !important;
    border-radius: 28px !important;
    background:
      linear-gradient(180deg, rgba(15, 23, 42, .28), rgba(15, 23, 42, .78)),
      url("./images/bondmai-hero-handoff.webp") center / cover no-repeat !important;
  }

  body :where(.heroSearchFirst, .heroProduct)::after {
    display: none !important;
  }

  body .heroSearchFirst .eyebrow {
    color: rgba(255, 255, 255, .92) !important;
  }

  body .heroSearchFirst h1::before {
    color: #fff !important;
    font-size: clamp(2.65rem, 12vw, 3.8rem) !important;
    line-height: .98 !important;
  }

  body .heroSearchFirst p {
    color: rgba(255, 255, 255, .90) !important;
    font-size: 1rem !important;
    line-height: 1.75 !important;
  }

  body .heroSearchPanel {
    margin-top: 26px !important;
    border-radius: 24px !important;
  }

  body .heroSearchField,
  body .heroSearchSubmit {
    min-height: 60px !important;
  }

  body .heroStats.compact,
  body :where(.dashboardGrid, .statsGrid, .orderSummary, .tripSummary, .adminSummaryStrip, .founderMetricGrid) {
    grid-template-columns: 1fr 1fr !important;
    gap: 0 !important;
  }

  body .heroStats.compact .stat,
  body :where(.dashboardGrid > *, .statsGrid > *, .orderSummary .stat, .tripSummary .stat, .adminSummaryStrip > *, .founderMetricGrid > *) {
    min-height: 92px !important;
    padding: 16px !important;
  }

  body :where(.marketPulse, .trustedMembersPanel, .departureBoard, .trendBoard) {
    margin-top: 30px !important;
    padding: 22px 16px !important;
    border-radius: 24px !important;
  }

  body .marketPulseHead,
  body .sectionHead {
    display: grid !important;
    gap: 14px !important;
  }

  body .marketPulseActions {
    width: 100% !important;
  }

  body .marketPulseActions > * {
    flex: 1 1 0 !important;
  }

  body .pulseItem {
    grid-template-columns: 48px minmax(0, 1fr) !important;
  }

  body .pulseItem .tinyButton {
    grid-column: 2 !important;
    justify-self: start !important;
  }

  body .departureBoard::after {
    position: relative;
    display: block;
    inset: auto;
    width: 100%;
    height: 160px;
    margin-top: 18px;
  }

  body:has(.marketPulse)::after {
    display: none;
  }

  body:has(.marketPulse) .heroSearchPanel::after {
    content: "🤖 AI 找到 8 位符合旅人，成功率 91%";
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    margin: 10px 4px 0;
    padding: 9px 12px;
    border: 1px solid rgba(226, 232, 240, .9);
    border-radius: 16px;
    color: #111827;
    background: #fff;
    box-shadow: 0 8px 20px rgba(15, 23, 42, .08);
    font-size: 12px;
    font-weight: 820;
  }

  body:has(.marketPulse) .languageToggle,
  body:has(.marketPulse) .themeToggle {
    top: 18px !important;
  }

  body:has(.marketPulse) .languageToggle {
    right: 12px !important;
  }

  body:has(.marketPulse) .themeToggle {
    top: 19px !important;
    right: 142px !important;
  }
}

/* BondMate 3.0 mobile navigation polish. */
body .mobileActionBar {
  position: fixed !important;
  left: 12px !important;
  right: 12px !important;
  bottom: calc(10px + env(safe-area-inset-bottom, 0px)) !important;
  z-index: 36 !important;
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 4px !important;
  min-height: 74px !important;
  padding: 8px !important;
  border: 1px solid rgba(226, 232, 240, .9) !important;
  border-radius: 24px !important;
  background: rgba(255, 255, 255, .92) !important;
  box-shadow: 0 18px 42px rgba(15, 23, 42, .16) !important;
  backdrop-filter: blur(20px) saturate(1.2) !important;
}

@media (min-width: 721px) {
  body .mobileActionBar {
    display: none !important;
  }
}

body .mobileActionBar button {
  display: grid !important;
  grid-template-rows: 26px 1fr !important;
  place-items: center !important;
  gap: 3px !important;
  min-width: 0 !important;
  min-height: 58px !important;
  padding: 5px 3px !important;
  border: 0 !important;
  border-radius: 18px !important;
  color: #334155 !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 11px !important;
  line-height: 1.1 !important;
}

body .mobileActionBar button span {
  display: grid !important;
  place-items: center !important;
  width: 26px !important;
  height: 26px !important;
  min-width: 26px !important;
  border-radius: 999px !important;
  color: #007f76 !important;
  background: rgba(0, 166, 153, .12) !important;
  font-size: 12px !important;
  font-weight: 900 !important;
}

body .mobileActionBar button strong {
  display: block !important;
  max-width: 100% !important;
  overflow: hidden !important;
  color: inherit !important;
  font-size: 11px !important;
  font-weight: 780 !important;
  line-height: 1.1 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body .mobileActionBar button.active {
  color: #111827 !important;
  background: linear-gradient(135deg, rgba(255, 56, 92, .14), rgba(0, 166, 153, .13)) !important;
}

body .mobileActionBar button.active span {
  color: #fff !important;
  background: #111827 !important;
}

html[data-theme="dark"] body .mobileActionBar {
  border-color: rgba(148, 163, 184, .24) !important;
  background: rgba(15, 23, 42, .92) !important;
}

html[data-theme="dark"] body .mobileActionBar button {
  color: #cbd5e1 !important;
}

html[data-theme="dark"] body .mobileActionBar button.active {
  color: #f8fafc !important;
  background: rgba(255, 255, 255, .08) !important;
}

body .mobileActionBar .mobileNavIcon {
  position: relative !important;
}

body .mobileActionBar .mobileNavIcon .glyph {
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  color: currentColor !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

body .mobileActionBar .mobileNavIcon .glyph svg {
  width: 18px !important;
  height: 18px !important;
  stroke-width: 2.4 !important;
}

body .mobileActionBar .mobileNavIcon em {
  position: absolute !important;
  top: -6px !important;
  right: -8px !important;
  display: grid !important;
  place-items: center !important;
  min-width: 16px !important;
  height: 16px !important;
  padding: 0 4px !important;
  color: #fff !important;
  background: #ff385c !important;
  border: 2px solid #fff !important;
  border-radius: 999px !important;
  font-size: 10px !important;
  font-style: normal !important;
  font-weight: 950 !important;
  line-height: 1 !important;
}

html[data-theme="dark"] body .mobileActionBar .mobileNavIcon em {
  border-color: #0f172a !important;
}

/* BondMate 3.0 guest account premium pass */
body:not(:has(.marketPulse)) .accountView.guestAccount {
  position: relative !important;
  display: grid !important;
  grid-template-columns: minmax(280px, 1fr) minmax(360px, 520px) !important;
  gap: 18px 24px !important;
  align-items: start !important;
}

body:not(:has(.marketPulse)) .accountView.guestAccount > .sectionHead {
  display: none !important;
}

body:not(:has(.marketPulse)) .accountView.guestAccount .guestAccountEntry {
  grid-column: 1 / -1 !important;
  min-height: 220px !important;
  padding: clamp(28px, 4vw, 44px) !important;
  border-radius: 32px !important;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, .96) 0%, rgba(236, 253, 245, .72) 50%, rgba(255, 241, 242, .62) 100%),
    url("./images/bondmai-hero-handoff.webp") right center / min(42%, 560px) auto no-repeat !important;
  border: 1px solid rgba(45, 212, 191, .28) !important;
  box-shadow: 0 22px 60px rgba(15, 23, 42, .08) !important;
}

body:not(:has(.marketPulse)) .accountView.guestAccount .guestAccountEntry span {
  color: #008489 !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
}

body:not(:has(.marketPulse)) .accountView.guestAccount .guestAccountEntry h3 {
  max-width: 640px !important;
  margin: 12px 0 10px !important;
  color: #111827 !important;
  font-size: clamp(2.1rem, 4vw, 4rem) !important;
  line-height: 1.02 !important;
  letter-spacing: 0 !important;
}

body:not(:has(.marketPulse)) .accountView.guestAccount .guestAccountEntry p {
  max-width: 620px !important;
  color: #475569 !important;
  font-size: 1.05rem !important;
  line-height: 1.8 !important;
}

body:not(:has(.marketPulse)) .accountView.guestAccount .guestAccountEntryActions,
body:not(:has(.marketPulse)) .accountView.guestAccount .guestAccountOauth {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  max-width: 680px !important;
}

body:not(:has(.marketPulse)) .accountView.guestAccount .guestFormAnchor {
  display: none !important;
}

body:not(:has(.marketPulse)) .accountView.guestAccount .accountGrid {
  grid-column: 1 / -1 !important;
  display: grid !important;
  grid-template-columns: minmax(360px, 520px) minmax(300px, 1fr) !important;
  gap: 20px !important;
  align-items: stretch !important;
}

body:not(:has(.marketPulse)) .accountView.guestAccount .accountCard {
  position: relative !important;
  min-height: 468px !important;
  padding: 18px !important;
  border: 1px solid rgba(226, 232, 240, .96) !important;
  border-radius: 28px !important;
  background: rgba(255, 255, 255, .94) !important;
  box-shadow: 0 20px 52px rgba(15, 23, 42, .08) !important;
}

body:not(:has(.marketPulse)) .accountView.guestAccount .accountCard::after {
  content: "AI Match Preview\\A 找到 8 位適合旅人\A 最快 18 小時返台，成功率 91%";
  position: absolute !important;
  left: calc(100% + 20px) !important;
  top: 0 !important;
  display: grid !important;
  place-content: end start !important;
  width: min(100%, 540px) !important;
  height: 100% !important;
  padding: 28px !important;
  white-space: pre-line !important;
  color: #111827 !important;
  font-size: clamp(1.12rem, 2vw, 1.48rem) !important;
  font-weight: 820 !important;
  line-height: 1.85 !important;
  border: 1px solid rgba(226, 232, 240, .92) !important;
  border-radius: 28px !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .92)),
    radial-gradient(circle at 82% 18%, rgba(255, 56, 92, .22), transparent 32%),
    radial-gradient(circle at 14% 22%, rgba(0, 166, 153, .22), transparent 28%),
    url("./images/traveler-hero.jpg") center / cover no-repeat !important;
  box-shadow: 0 20px 52px rgba(15, 23, 42, .08) !important;
  pointer-events: none !important;
}

body:not(:has(.marketPulse)) .accountView.guestAccount .loginForm {
  display: grid !important;
  gap: 14px !important;
  padding: 18px !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body:not(:has(.marketPulse)) .accountView.guestAccount .mobileGuestLoginCard {
  display: none !important;
}

body:not(:has(.marketPulse)) .accountView.guestAccount .filters {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 10px !important;
  padding: 0 !important;
  overflow: visible !important;
}

body:not(:has(.marketPulse)) .accountView.guestAccount .filters button {
  min-height: 48px !important;
  border-radius: 14px !important;
  font-weight: 850 !important;
}

body:not(:has(.marketPulse)) .accountView.guestAccount label {
  gap: 8px !important;
  color: #64748b !important;
  font-size: .95rem !important;
  font-weight: 780 !important;
}

body:not(:has(.marketPulse)) .accountView.guestAccount input,
body:not(:has(.marketPulse)) .accountView.guestAccount select {
  min-height: 54px !important;
  border-radius: 16px !important;
  background: #fff !important;
}

body:not(:has(.marketPulse)) .accountView.guestAccount .primaryButton {
  min-height: 52px !important;
  border-radius: 15px !important;
  box-shadow: 0 14px 28px rgba(255, 56, 92, .22) !important;
}

body .accountView.guestAccount.standaloneGuestAccount {
  display: grid !important;
  grid-template-columns: minmax(360px, 1fr) minmax(360px, 500px) !important;
  gap: 20px 24px !important;
  align-items: stretch !important;
}

body .accountView.guestAccount.standaloneGuestAccount .guestAccountEntry {
  position: relative !important;
  grid-column: auto !important;
  min-height: 520px !important;
  padding: clamp(30px, 4vw, 52px) !important;
  border: 1px solid rgba(45, 212, 191, .28) !important;
  border-radius: 32px !important;
  overflow: hidden !important;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .98) 0%, rgba(240, 253, 250, .86) 48%, rgba(255, 241, 242, .72) 100%),
    url("./images/bondmai-hero-handoff.webp") right bottom / min(72%, 620px) auto no-repeat !important;
  box-shadow: 0 22px 60px rgba(15, 23, 42, .08) !important;
}

body .accountView.guestAccount.standaloneGuestAccount .guestAccountEntry::after {
  content: "8 位符合旅人\a 91% 平均媒合成功率\a 18 hr 最快返台";
  position: absolute !important;
  left: 32px !important;
  right: 32px !important;
  bottom: 32px !important;
  display: grid !important;
  gap: 6px !important;
  max-width: 380px !important;
  padding: 20px !important;
  white-space: pre-line !important;
  color: #111827 !important;
  font-size: 1.08rem !important;
  font-weight: 850 !important;
  line-height: 1.8 !important;
  border: 1px solid rgba(255, 255, 255, .82) !important;
  border-radius: 24px !important;
  background: rgba(255, 255, 255, .78) !important;
  box-shadow: 0 18px 44px rgba(15, 23, 42, .1) !important;
  backdrop-filter: blur(16px) !important;
}

body .accountView.guestAccount.standaloneGuestAccount .guestAccountEntry span {
  color: #008489 !important;
  font-size: 12px !important;
  font-weight: 950 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
}

body .accountView.guestAccount.standaloneGuestAccount .guestAccountEntry h3 {
  max-width: 620px !important;
  margin: 14px 0 12px !important;
  color: #111827 !important;
  font-size: clamp(2.1rem, 3.4vw, 3.55rem) !important;
  line-height: 1.02 !important;
}

body .accountView.guestAccount.standaloneGuestAccount .guestAccountEntry p {
  max-width: 560px !important;
  color: #475569 !important;
  font-size: 1.08rem !important;
  line-height: 1.8 !important;
}

body .accountView.guestAccount.standaloneGuestAccount .guestAccountOauth {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  margin-top: 22px !important;
}

body .accountView.guestAccount.standaloneGuestAccount .standaloneLoginForm {
  position: relative !important;
  grid-column: auto !important;
  align-self: stretch !important;
  display: grid !important;
  align-content: center !important;
  gap: 15px !important;
  min-height: 520px !important;
  padding: clamp(24px, 3vw, 34px) !important;
  border: 1px solid rgba(226, 232, 240, .94) !important;
  border-radius: 32px !important;
  background: rgba(255, 255, 255, .94) !important;
  box-shadow: 0 22px 60px rgba(15, 23, 42, .08) !important;
}

body .accountView.guestAccount.standaloneGuestAccount .authModeTabs {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 10px !important;
  padding: 0 !important;
  margin: 0 0 10px !important;
  overflow: visible !important;
}

body .accountView.guestAccount.standaloneGuestAccount .authModeTabs button {
  min-height: 48px !important;
  border-radius: 14px !important;
  font-weight: 850 !important;
}

body .accountView.guestAccount.standaloneGuestAccount .standaloneLoginForm label {
  gap: 8px !important;
  color: #64748b !important;
  font-size: .94rem !important;
  font-weight: 780 !important;
}

body .accountView.guestAccount.standaloneGuestAccount .standaloneLoginForm input,
body .accountView.guestAccount.standaloneGuestAccount .standaloneLoginForm select {
  min-height: 54px !important;
  border-radius: 16px !important;
  background: #fff !important;
}

body .accountView.guestAccount.standaloneGuestAccount .forgotPasswordInline {
  justify-self: end !important;
  min-height: 44px !important;
  padding: 0 !important;
  color: #111827 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  font-weight: 850 !important;
}

body .accountView.guestAccount.standaloneGuestAccount .standaloneLoginForm .primaryButton {
  min-height: 54px !important;
  border-radius: 15px !important;
}

html[data-theme="dark"] body .accountView.guestAccount.standaloneGuestAccount .guestAccountEntry {
  background:
    linear-gradient(135deg, rgba(15, 23, 42, .98) 0%, rgba(20, 83, 76, .72) 48%, rgba(88, 28, 45, .58) 100%),
    url("./images/bondmai-hero-handoff.webp") right bottom / min(72%, 620px) auto no-repeat !important;
  border-color: rgba(45, 212, 191, .22) !important;
}

html[data-theme="dark"] body .accountView.guestAccount.standaloneGuestAccount .guestAccountEntry h3,
html[data-theme="dark"] body .accountView.guestAccount.standaloneGuestAccount .guestAccountEntry::after {
  color: #f8fafc !important;
}

html[data-theme="dark"] body .accountView.guestAccount.standaloneGuestAccount .guestAccountEntry p {
  color: rgba(226, 232, 240, .8) !important;
}

html[data-theme="dark"] body .accountView.guestAccount.standaloneGuestAccount .guestAccountEntry::after,
html[data-theme="dark"] body .accountView.guestAccount.standaloneGuestAccount .standaloneLoginForm {
  border-color: rgba(148, 163, 184, .18) !important;
  background: rgba(15, 23, 42, .82) !important;
}

html[data-theme="dark"] body .accountView.guestAccount.standaloneGuestAccount .guestAccountEntry::after {
  border-color: rgba(94, 234, 212, .18) !important;
  background:
    linear-gradient(135deg, rgba(15, 23, 42, .92), rgba(30, 41, 59, .82)),
    radial-gradient(circle at 0% 100%, rgba(45, 212, 191, .18), transparent 34%) !important;
  box-shadow: 0 18px 44px rgba(0, 0, 0, .28) !important;
}

html[data-theme="dark"] body .accountView.guestAccount.standaloneGuestAccount .standaloneLoginForm input,
html[data-theme="dark"] body .accountView.guestAccount.standaloneGuestAccount .standaloneLoginForm select {
  color: #f8fafc !important;
  background: rgba(15, 23, 42, .72) !important;
  border-color: rgba(148, 163, 184, .24) !important;
}

html[data-theme="dark"] body .accountView.guestAccount.standaloneGuestAccount .forgotPasswordInline {
  color: #f8fafc !important;
}

html[data-theme="dark"] body:not(:has(.marketPulse)) .accountView.guestAccount .guestAccountEntry {
  background:
    linear-gradient(90deg, rgba(15, 23, 42, .96) 0%, rgba(20, 83, 76, .62) 52%, rgba(88, 28, 45, .5) 100%),
    url("./images/bondmai-hero-handoff.webp") right center / min(42%, 560px) auto no-repeat !important;
  border-color: rgba(45, 212, 191, .22) !important;
}

html[data-theme="dark"] body:not(:has(.marketPulse)) .accountView.guestAccount .guestAccountEntry h3,
html[data-theme="dark"] body:not(:has(.marketPulse)) .accountView.guestAccount .accountCard::after {
  color: #f8fafc !important;
}

html[data-theme="dark"] body:not(:has(.marketPulse)) .accountView.guestAccount .guestAccountEntry p {
  color: rgba(226, 232, 240, .78) !important;
}

html[data-theme="dark"] body:not(:has(.marketPulse)) .accountView.guestAccount .accountCard,
html[data-theme="dark"] body:not(:has(.marketPulse)) .accountView.guestAccount .accountCard::after {
  border-color: rgba(148, 163, 184, .18) !important;
  background-color: rgba(15, 23, 42, .84) !important;
}

html[data-theme="dark"] body:not(:has(.marketPulse)) .accountView.guestAccount input,
html[data-theme="dark"] body:not(:has(.marketPulse)) .accountView.guestAccount select {
  color: #f8fafc !important;
  background: rgba(15, 23, 42, .72) !important;
  border-color: rgba(148, 163, 184, .24) !important;
}

@media (max-width: 1100px) {
  body:not(:has(.marketPulse)) .accountView.guestAccount {
    grid-template-columns: 1fr !important;
  }

  body .accountView.guestAccount.standaloneGuestAccount {
    grid-template-columns: 1fr !important;
  }

  body:not(:has(.marketPulse)) .accountView.guestAccount .accountGrid {
    grid-template-columns: 1fr !important;
  }

  body:not(:has(.marketPulse)) .accountView.guestAccount .accountCard::after {
    position: static !important;
    width: auto !important;
    min-height: 220px !important;
    margin-top: 16px !important;
  }
}

@media (max-width: 720px) {
  body:not(:has(.marketPulse)) .accountView.guestAccount {
    gap: 14px !important;
  }

  body .accountView.guestAccount.standaloneGuestAccount {
    gap: 14px !important;
  }

  body .accountView.guestAccount.standaloneGuestAccount .guestAccountEntry,
  body .accountView.guestAccount.standaloneGuestAccount .standaloneLoginForm {
    min-height: 0 !important;
    border-radius: 24px !important;
  }

  body .accountView.guestAccount.standaloneGuestAccount .guestAccountEntry {
    padding: 18px !important;
    background: linear-gradient(135deg, rgba(255, 255, 255, .98), rgba(240, 253, 250, .9), rgba(255, 241, 242, .76)) !important;
  }

  body .accountView.guestAccount.standaloneGuestAccount .guestAccountEntry::after {
    position: static !important;
    margin-top: 12px !important;
    padding: 14px 16px !important;
    border-radius: 18px !important;
    font-size: .92rem !important;
    line-height: 1.45 !important;
  }

  body .accountView.guestAccount.standaloneGuestAccount .guestAccountEntry h3 {
    margin-block: 8px !important;
    font-size: clamp(1.52rem, 7.2vw, 2rem) !important;
  }

  body .accountView.guestAccount.standaloneGuestAccount .guestAccountEntry p {
    display: -webkit-box !important;
    margin: 0 !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    font-size: .94rem !important;
    line-height: 1.55 !important;
  }

  body .accountView.guestAccount.standaloneGuestAccount .guestAccountOauth {
    display: none !important;
  }

  body .accountView.guestAccount.standaloneGuestAccount .standaloneLoginForm {
    gap: 10px !important;
    padding: 14px 16px 92px !important;
  }

  body .accountView.guestAccount.standaloneGuestAccount .authModeTabs {
    gap: 8px !important;
    margin-bottom: 4px !important;
  }

  body .accountView.guestAccount.standaloneGuestAccount .authModeTabs button,
  body .accountView.guestAccount.standaloneGuestAccount .standaloneLoginForm .primaryButton {
    min-height: 46px !important;
  }

  body .accountView.guestAccount.standaloneGuestAccount .standaloneLoginForm input,
  body .accountView.guestAccount.standaloneGuestAccount .standaloneLoginForm select {
    min-height: 52px !important;
  }

  body:not(:has(.marketPulse)) .accountView.guestAccount .guestAccountEntry {
    min-height: 0 !important;
    padding: 22px !important;
    border-radius: 24px !important;
    background:
      linear-gradient(135deg, rgba(255, 255, 255, .96), rgba(236, 253, 245, .82), rgba(255, 241, 242, .7)) !important;
  }

  body:not(:has(.marketPulse)) .accountView.guestAccount .guestAccountEntry h3 {
    font-size: clamp(1.65rem, 8vw, 2.15rem) !important;
  }

  body:not(:has(.marketPulse)) .accountView.guestAccount .guestAccountEntry p {
    font-size: .98rem !important;
    line-height: 1.65 !important;
  }

  body:not(:has(.marketPulse)) .accountView.guestAccount .guestAccountEntryActions,
  body:not(:has(.marketPulse)) .accountView.guestAccount .guestAccountOauth {
    display: none !important;
  }

  body:not(:has(.marketPulse)) .accountView.guestAccount .accountCard {
    min-height: 0 !important;
    padding: 16px !important;
    border-radius: 24px !important;
  }

  body:not(:has(.marketPulse)) .accountView.guestAccount .mobileGuestLoginCard {
    display: grid !important;
    gap: 8px !important;
    padding: 18px !important;
    border: 1px solid rgba(45, 212, 191, .2) !important;
    border-radius: 22px !important;
    background: linear-gradient(135deg, rgba(240, 253, 250, .92), rgba(255, 255, 255, .96)) !important;
  }

  body:not(:has(.marketPulse)) .accountView.guestAccount .accountCard::after {
    min-height: 154px !important;
    padding: 18px !important;
    border-radius: 22px !important;
    font-size: 1rem !important;
    line-height: 1.65 !important;
  }

  html[data-theme="dark"] body:not(:has(.marketPulse)) .accountView.guestAccount .guestAccountEntry,
  html[data-theme="dark"] body:not(:has(.marketPulse)) .accountView.guestAccount .mobileGuestLoginCard {
    background: linear-gradient(135deg, rgba(15, 23, 42, .96), rgba(20, 83, 76, .5), rgba(88, 28, 45, .42)) !important;
  }
}

/* BondMate 3.0 marketplace polish pass */
body:has(.marketPulse) .marketPulse {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 300px) !important;
  gap: 22px 24px !important;
  align-items: start !important;
}

body:has(.marketPulse) .marketPulseHead {
  grid-column: 1 / -1 !important;
  margin-bottom: 0 !important;
}

body:has(.marketPulse) .marketPulseHead::after {
  content: none !important;
}

body:has(.marketPulse) .liveStatsStrip {
  grid-column: 1 / -1 !important;
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  margin: 0 !important;
  border-top: 1px solid rgba(226, 232, 240, .95) !important;
  border-bottom: 1px solid rgba(226, 232, 240, .95) !important;
}

body:has(.marketPulse) .liveStatsStrip span {
  display: grid !important;
  gap: 4px !important;
  min-height: 92px !important;
  padding: 20px 22px !important;
  border-right: 1px solid rgba(226, 232, 240, .95) !important;
}

body:has(.marketPulse) .liveStatsStrip span:last-child {
  border-right: 0 !important;
}

body:has(.marketPulse) .liveStatsStrip small {
  color: #64748b !important;
  font-size: 12px !important;
  font-weight: 780 !important;
  text-transform: uppercase !important;
  letter-spacing: .08em !important;
}

body:has(.marketPulse) .liveStatsStrip strong {
  color: #111827 !important;
  font-size: clamp(1.35rem, 2vw, 2rem) !important;
  font-weight: 860 !important;
  letter-spacing: 0 !important;
}

body:has(.marketPulse) .marketPulseGrid {
  grid-column: 1 !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 18px !important;
}

body:has(.marketPulse) .pulseCountryRail {
  grid-column: 2 !important;
  align-self: stretch !important;
  display: grid !important;
  gap: 12px !important;
  padding: 20px !important;
  border: 1px solid rgba(226, 232, 240, .9) !important;
  border-radius: 24px !important;
  background:
    radial-gradient(circle at 70% 20%, rgba(0, 166, 153, .16), transparent 38%),
    rgba(255, 255, 255, .92) !important;
  box-shadow: var(--bm3-shadow) !important;
}

body:has(.marketPulse) .pulseCountryRail > span:first-child {
  color: #111827 !important;
  font-size: 1rem !important;
  font-weight: 860 !important;
}

body:has(.marketPulse) .pulseCountryRail button {
  display: grid !important;
  grid-template-columns: 42px minmax(0, 1fr) !important;
  gap: 8px 12px !important;
  align-items: center !important;
  min-height: 72px !important;
  padding: 12px 14px !important;
  border: 1px solid rgba(226, 232, 240, .9) !important;
  border-radius: 18px !important;
  background: rgba(255, 255, 255, .9) !important;
  box-shadow: none !important;
}

body:has(.marketPulse) .pulseCountryRail button small {
  grid-column: 2 !important;
  color: #64748b !important;
}

body:has(.marketPulse) :where(.pulseFeed, .pulseTrips) {
  min-height: 0 !important;
}

body:has(.marketPulse) .viewGrid {
  align-items: start !important;
  gap: 22px !important;
}

body:has(.marketPulse) .viewGrid > section {
  max-height: 620px !important;
  overflow: auto !important;
  padding: 20px !important;
  border: 1px solid rgba(226, 232, 240, .92) !important;
  border-radius: 28px !important;
  background: rgba(255, 255, 255, .94) !important;
  box-shadow: 0 18px 48px rgba(15, 23, 42, .07) !important;
  scrollbar-width: thin;
  scrollbar-color: rgba(148, 163, 184, .52) transparent;
}

body:has(.marketPulse) .viewGrid > section::-webkit-scrollbar {
  width: 8px;
}

body:has(.marketPulse) .viewGrid > section::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, .52);
  border-radius: 999px;
}

body:has(.marketPulse) .viewGrid > section > .sectionHead {
  position: sticky !important;
  top: 0 !important;
  z-index: 2 !important;
  min-height: 0 !important;
  margin: -20px -20px 14px !important;
  padding: 18px 20px !important;
  border-radius: 28px 28px 18px 18px !important;
  background: rgba(255, 255, 255, .92) !important;
  backdrop-filter: blur(14px) !important;
}

body:has(.marketPulse) .viewGrid > section > .sectionHead h2 {
  margin: 0 0 4px !important;
  font-size: 1.65rem !important;
}

body:has(.marketPulse) .viewGrid > section > .sectionHead p {
  display: -webkit-box !important;
  margin: 0 !important;
  -webkit-line-clamp: 1 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  font-size: .92rem !important;
}

body:has(.marketPulse) .viewGrid .filters {
  position: sticky !important;
  top: 84px !important;
  z-index: 2 !important;
  padding: 4px 0 12px !important;
  background: rgba(255, 255, 255, .9) !important;
  backdrop-filter: blur(12px) !important;
}

body:has(.marketPulse) .viewGrid .tripList,
body:has(.marketPulse) .viewGrid .matchList {
  gap: 12px !important;
}

body:has(.marketPulse) .viewGrid .tripCard,
body:has(.marketPulse) .viewGrid .matchCard {
  padding: 16px !important;
  border-radius: 22px !important;
  box-shadow: none !important;
}

body:has(.marketPulse) .viewGrid .tripCard {
  grid-template-columns: 58px minmax(0, 1fr) !important;
  gap: 12px !important;
}

body:has(.marketPulse) .viewGrid .tripCard .tripActions,
body:has(.marketPulse) .viewGrid .tripCard .travelerTrustBadge {
  grid-column: 1 / -1 !important;
}

body:has(.marketPulse) .viewGrid .tripCard .timeline {
  margin-block: 8px !important;
}

html[data-theme="dark"] body:has(.marketPulse) .viewGrid > section,
html[data-theme="dark"] body:has(.marketPulse) .viewGrid > section > .sectionHead,
html[data-theme="dark"] body:has(.marketPulse) .viewGrid .filters {
  border-color: rgba(148, 163, 184, .18) !important;
  background: rgba(15, 23, 42, .86) !important;
}

/* BondMate 3.0 order empty-state polish */
body .ordersView {
  container-type: inline-size;
}

body .ordersView .decisionStrip.orderDecision {
  align-items: stretch !important;
}

body .ordersView .decisionStrip.orderDecision article {
  min-height: 122px !important;
  border-radius: 24px !important;
}

body .ordersView .orderSummary {
  max-width: 860px !important;
  margin-inline: auto !important;
  padding: 12px !important;
  border: 1px solid rgba(45, 212, 191, .22) !important;
  border-radius: 28px !important;
  background:
    linear-gradient(135deg, rgba(240, 253, 250, .78), rgba(255, 255, 255, .92), rgba(255, 241, 242, .4)) !important;
}

body .ordersView .orderSummary button {
  min-height: 72px !important;
  border-radius: 20px !important;
  background: rgba(255, 255, 255, .9) !important;
  box-shadow: none !important;
}

body .ordersView .orderSummary button.active {
  background: linear-gradient(135deg, rgba(236, 253, 245, .95), rgba(255, 249, 196, .78)) !important;
  border-color: rgba(0, 166, 153, .48) !important;
}

body .ordersView .guestFlowNudge {
  max-width: 900px !important;
  margin-inline: auto !important;
  border-radius: 24px !important;
  background:
    linear-gradient(135deg, rgba(236, 254, 255, .94), rgba(255, 255, 255, .92), rgba(255, 241, 242, .45)) !important;
}

body .ordersView .guestFlowNudge .buttonRow {
  justify-content: flex-end !important;
}

html[data-theme="dark"] body .ordersView .orderSummary,
html[data-theme="dark"] body .ordersView .guestFlowNudge {
  border-color: rgba(148, 163, 184, .18) !important;
  background: linear-gradient(135deg, rgba(15, 23, 42, .88), rgba(20, 83, 76, .34), rgba(88, 28, 45, .28)) !important;
}

html[data-theme="dark"] body .ordersView .orderSummary button {
  color: #f8fafc !important;
  background: rgba(15, 23, 42, .72) !important;
  border-color: rgba(148, 163, 184, .2) !important;
}

@media (max-width: 720px) {
  body .ordersView .decisionStrip.orderDecision {
    gap: 12px !important;
  }

  body .ordersView .decisionStrip.orderDecision article {
    min-height: 112px !important;
    padding: 18px !important;
  }

  body .ordersView .orderSummary {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0 !important;
    padding: 10px !important;
    border-radius: 24px !important;
  }

  body .ordersView .orderSummary button {
    min-height: 72px !important;
    border-radius: 18px !important;
  }

  body .ordersView .guestFlowNudge {
    display: grid !important;
    gap: 14px !important;
    padding: 18px 18px 104px !important;
    border-radius: 22px !important;
  }

  body .ordersView .guestFlowNudge p {
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }

  body .ordersView .guestFlowNudge ol {
    display: grid !important;
    gap: 6px !important;
    margin: 0 !important;
    padding-left: 18px !important;
    font-size: .9rem !important;
  }

  body .ordersView .guestFlowNudge .buttonRow {
    position: sticky !important;
    bottom: 86px !important;
    z-index: 2 !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    justify-content: stretch !important;
    margin-top: 2px !important;
  }

  body .ordersView .guestFlowNudge .buttonRow button {
    width: 100% !important;
    min-height: 48px !important;
  }

  body:not(:has(.appShell.view-wish)) .formView:has(.wishPatienceNudge) .wishForm {
    max-height: 1680px !important;
    overflow: auto !important;
    padding: 14px 14px 98px !important;
    border: 1px solid rgba(226, 232, 240, .92) !important;
    border-radius: 24px !important;
    background: rgba(255, 255, 255, .72) !important;
    scrollbar-width: thin;
  }

  body .formView:has(.wishPatienceNudge) .wishForm > :where(label, .splitAction, .estimate, .empty) {
    min-height: 0 !important;
  }

  body .formView:has(.wishPatienceNudge) .wishForm > label {
    gap: 7px !important;
    height: auto !important;
  }

  body .formView:has(.wishPatienceNudge) .wishForm input,
  body .formView:has(.wishPatienceNudge) .wishForm select,
  body .formView:has(.wishPatienceNudge) .wishForm textarea {
    min-height: 46px !important;
    border-radius: 14px !important;
  }

  body .formView:has(.wishPatienceNudge) .wishCostBreakdown.wide {
    max-height: 270px !important;
    overflow: auto !important;
  }

  body .formView:has(.wishPatienceNudge) .wishPhotoUpload.wide {
    max-height: 126px !important;
    overflow: hidden !important;
  }

  body:not(:has(.appShell.view-wish)) .formView:has(.wishPatienceNudge) .wishForm > .splitAction:last-child,
  body .formView:has(.tripDecision) .wishForm > .primaryButton.wide {
    position: sticky !important;
    bottom: 0 !important;
    z-index: 3 !important;
    margin: 0 -14px -98px !important;
    padding: 12px 14px 16px !important;
    border-top: 1px solid rgba(226, 232, 240, .9) !important;
    background: rgba(255, 255, 255, .92) !important;
    backdrop-filter: blur(14px) !important;
  }

  body .formView:has(.tripDecision) .tripList {
    max-height: 520px !important;
    overflow: auto !important;
    padding-right: 2px !important;
  }

  body .formView:has(.tripDecision) .wishForm {
    max-height: 760px !important;
    overflow: auto !important;
    padding: 14px 14px 86px !important;
    border: 1px solid rgba(226, 232, 240, .92) !important;
    border-radius: 24px !important;
    background: rgba(255, 255, 255, .72) !important;
    scrollbar-width: thin;
  }

  body .formView:has(.tripDecision) .wishForm label {
    gap: 7px !important;
    min-height: 0 !important;
  }

  body .formView:has(.tripDecision) .wishForm input,
  body .formView:has(.tripDecision) .wishForm select,
  body .formView:has(.tripDecision) .wishForm textarea {
    min-height: 46px !important;
    border-radius: 14px !important;
  }

  body .formView:has(.tripDecision) .wishForm > .primaryButton.wide {
    display: flex !important;
    width: auto !important;
    margin: 0 -14px -86px !important;
  }

html[data-theme="dark"] body .formView:has(.wishPatienceNudge) .wishForm,
html[data-theme="dark"] body .formView:has(.tripDecision) .wishForm,
html[data-theme="dark"] body:not(:has(.appShell.view-wish)) .formView:has(.wishPatienceNudge) .wishForm > .splitAction:last-child,
html[data-theme="dark"] body .formView:has(.tripDecision) .wishForm > .primaryButton.wide {
  border-color: rgba(148, 163, 184, .18) !important;
  background: rgba(15, 23, 42, .82) !important;
}
}

/* BondMate 3.0 rhythm pass: keep marketplace/workflow pages from becoming long forms. */
@media (max-width: 720px) {
  body:has(.marketPulse) .marketPulse {
    max-height: 1100px !important;
    overflow: auto !important;
    padding: 16px !important;
    scrollbar-width: thin;
  }

  body:has(.marketPulse) .marketPulseHead {
    position: sticky !important;
    top: 0 !important;
    z-index: 3 !important;
    margin: -16px -16px 12px !important;
    padding: 16px !important;
    border-radius: 24px 24px 18px 18px !important;
    background: rgba(255, 255, 255, .94) !important;
    backdrop-filter: blur(14px) !important;
  }

  body:has(.marketPulse) .marketPulseGrid {
    gap: 12px !important;
  }

  body:has(.marketPulse) .pulseFeed {
    max-height: 440px !important;
    overflow: auto !important;
    padding-right: 2px !important;
  }

  body:has(.marketPulse) .departureBoard {
    max-height: 430px !important;
    overflow: auto !important;
  }

  body:has(.marketPulse) .featuredWishStrip,
  body:has(.marketPulse) .trustedMembersPanel {
    max-height: 360px !important;
    overflow: auto !important;
  }

  body:has(.marketPulse) .featuredWishStrip {
    max-height: 288px !important;
    padding-top: 14px !important;
  }

  body:has(.marketPulse) .featuredWishStrip > .sectionHead {
    display: none !important;
  }

  body:has(.marketPulse) .viewGrid {
    gap: 14px !important;
  }

  body:has(.marketPulse) .viewGrid > section {
    max-height: 430px !important;
  }

  body:has(.marketPulse) .viewGrid .tripList,
  body:has(.marketPulse) .viewGrid .matchList {
    max-height: 292px !important;
    overflow: auto !important;
  }

  body:has(.marketPulse) .trendBoard {
    max-height: 360px !important;
    overflow: hidden !important;
  }

  body:has(.marketPulse) .trendBoard .trendGrid {
    display: flex !important;
    gap: 12px !important;
    margin-inline: -2px !important;
    padding: 2px 2px 14px !important;
    overflow-x: auto !important;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  body:has(.marketPulse) .trendBoard .trendGrid::-webkit-scrollbar {
    display: none;
  }

  body:has(.marketPulse) .trendBoard .trendCard {
    flex: 0 0 min(82%, 286px) !important;
    min-height: 150px !important;
    max-height: 150px !important;
    padding: 18px !important;
    scroll-snap-align: start;
  }

  body:has(.marketPulse) .trendBoard .trendCard p {
    display: -webkit-box !important;
    -webkit-line-clamp: 1 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }

  body:has(.marketPulse) .siteFooter {
    margin-top: -82px !important;
    margin-bottom: 104px !important;
  }

  html[data-theme="dark"] body:has(.marketPulse) .marketPulseHead {
    background: rgba(15, 23, 42, .92) !important;
  }
}

@media (min-width: 1101px) {
  body .formView:has(.tripDecision) .tripList {
    max-height: 760px !important;
    overflow: auto !important;
    padding-right: 6px !important;
    scrollbar-width: thin;
  }

  body .formView:has(.tripDecision) .wishForm {
    max-height: 620px !important;
    overflow: auto !important;
    padding: 22px !important;
    border: 1px solid rgba(226, 232, 240, .92) !important;
    border-radius: 26px !important;
    background: rgba(255, 255, 255, .78) !important;
    scrollbar-width: thin;
  }

  body:not(:has(.appShell.view-wish)) .formView:has(.wishPatienceNudge) .wishForm {
    max-height: 1720px !important;
    overflow: auto !important;
    padding: 22px !important;
    border: 1px solid rgba(226, 232, 240, .92) !important;
    border-radius: 26px !important;
    background: rgba(255, 255, 255, .78) !important;
    scrollbar-width: thin;
  }

  body:not(:has(.appShell.view-wish)) .formView:has(.wishPatienceNudge) .wishForm > .splitAction:last-child,
  body .formView:has(.tripDecision) .wishForm > .primaryButton.wide {
    position: sticky !important;
    bottom: 0 !important;
    z-index: 3 !important;
    margin: 6px -22px -22px !important;
    padding: 16px 22px 18px !important;
    border-top: 1px solid rgba(226, 232, 240, .9) !important;
    background: rgba(255, 255, 255, .94) !important;
    backdrop-filter: blur(14px) !important;
  }

  html[data-theme="dark"] body .formView:has(.tripDecision) .wishForm,
  html[data-theme="dark"] body:not(:has(.appShell.view-wish)) .formView:has(.wishPatienceNudge) .wishForm,
  html[data-theme="dark"] body:not(:has(.appShell.view-wish)) .formView:has(.wishPatienceNudge) .wishForm > .splitAction:last-child,
  html[data-theme="dark"] body .formView:has(.tripDecision) .wishForm > .primaryButton.wide {
    border-color: rgba(148, 163, 184, .18) !important;
    background: rgba(15, 23, 42, .86) !important;
  }

  body:not(:has(.marketPulse)) .panel > section .adminColumns {
    max-height: 430px !important;
    overflow: auto !important;
    padding: 18px !important;
    border: 1px solid rgba(226, 232, 240, .9) !important;
    border-radius: 26px !important;
    background: rgba(255, 255, 255, .76) !important;
    scrollbar-width: thin;
  }

  body:not(:has(.marketPulse)) .panel > section .adminColumns h3 {
    position: sticky !important;
    top: 0 !important;
    z-index: 2 !important;
    margin: -18px -18px 12px !important;
    padding: 16px 18px !important;
    background: rgba(255, 255, 255, .94) !important;
    backdrop-filter: blur(14px) !important;
  }

  body:not(:has(.marketPulse)) .panel > section .adminColumns .compactList {
    gap: 8px !important;
  }

  body:not(:has(.marketPulse)) .panel > section .adminColumns .compactList span {
    min-height: 0 !important;
    padding: 12px 14px !important;
    border-radius: 16px !important;
  }

  body:not(:has(.marketPulse)):not(:has(.appShell.view-policy)) .selfServiceGuide {
    max-height: 560px !important;
    overflow: auto !important;
  }

  body:not(:has(.marketPulse)):not(:has(.appShell.view-policy)) .policyQaView {
    max-height: 720px !important;
    overflow: auto !important;
  }

  body:not(:has(.marketPulse)) .panel > .policyQaView,
  body:not(:has(.marketPulse)) .workspace .policyQaView {
    max-height: 720px !important;
    overflow: auto !important;
  }

  html[data-theme="dark"] body:not(:has(.marketPulse)) .panel > section .adminColumns,
  html[data-theme="dark"] body:not(:has(.marketPulse)) .panel > section .adminColumns h3 {
    border-color: rgba(148, 163, 184, .18) !important;
    background: rgba(15, 23, 42, .86) !important;
  }
}

/* BondMate 3.0 countries mobile rail pass */
html[data-theme="dark"] body .mapReadableView .countryGrid.readableCountries .adminTile {
  border-color: rgba(148, 163, 184, .2) !important;
  background: rgba(15, 23, 42, .82) !important;
}

html[data-theme="dark"] body .mapReadableView .countryGrid.readableCountries .adminTile .countryLabel {
  color: #ccfbf1 !important;
  background: rgba(20, 83, 76, .32) !important;
  border-color: rgba(94, 234, 212, .22) !important;
}

@media (max-width: 720px) {
  body .mapReadableView .countryGrid.readableCountries {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    width: 100% !important;
    margin-inline: 0 !important;
    padding: 0 !important;
    overflow-x: visible !important;
    scroll-snap-type: none;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  body .mapReadableView .countryGrid.readableCountries::-webkit-scrollbar {
    display: none;
  }

  body .mapReadableView .countryGrid.readableCountries .adminTile {
    flex: 0 1 auto !important;
    width: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 16px !important;
    scroll-snap-align: start;
  }

  body .mapReadableView .countryGrid.readableCountries .adminTile .countryLabel {
    min-height: 54px !important;
    padding: 12px 14px !important;
    border-radius: 18px !important;
  }

  body .mapReadableView .countryGrid.readableCountries .adminTile p {
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }

  body .mapReadableView .mapGuidePanel {
    box-sizing: border-box !important;
    overflow: visible !important;
  }

  body .mapReadableView .mapGuidePanel > * {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  body .mapReadableView .mapGuidePanel .mapGuideActions {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }

  body .mapReadableView .areaSpotlight {
    max-height: 780px !important;
  }

  body .mapReadableView .areaDirectory {
    max-height: 560px !important;
  }
}

@media (max-width: 720px) {
  body .mapReadableView .areaHumanBoard .areaSpotlight {
    max-height: 760px !important;
  }

  body .mapReadableView .areaHumanBoard .areaDirectory {
    max-height: 540px !important;
  }
}

/* BondMate 3.0 dark-mode readability polish */
html[data-theme="dark"] body .wishVisualPlaceholder strong {
  color: #111827 !important;
  background: rgba(255, 255, 255, .96) !important;
  box-shadow: 0 18px 36px rgba(0, 0, 0, .2) !important;
}

html[data-theme="dark"] body .wishVisual small,
html[data-theme="dark"] body .wishVisualPlaceholder small {
  color: #e2e8f0 !important;
  background: rgba(15, 23, 42, .68) !important;
  border-color: rgba(148, 163, 184, .28) !important;
}

@media (max-width: 720px) {
  body .formView:has(.tripDecision) .tripList {
    margin-bottom: 18px !important;
  }

  body .formView:has(.tripDecision) .sectionHead:has(+ .wishReadiness.tripReadiness),
  body .formView:has(.tripDecision) .sectionHead:has(+ .wishForm) {
    margin-top: 18px !important;
  }

  body .formView:has(.tripDecision) {
    padding-bottom: 132px !important;
  }
}

body:has(.marketPulse) .pulseItem {
  min-height: 92px !important;
}

body:has(.marketPulse) .trendBoard .sectionHead {
  background: transparent !important;
  border-color: rgba(255, 255, 255, .16) !important;
  box-shadow: none !important;
}

body:has(.marketPulse) .trendBoard .sectionHead :where(h2, p) {
  color: #fff !important;
}

body:has(.marketPulse) .featuredWishCard {
  overflow: hidden !important;
  background: #fff !important;
}

body:has(.marketPulse) .featuredWishCard > div:first-child {
  min-height: 150px !important;
  background:
    linear-gradient(135deg, rgba(255, 56, 92, .12), rgba(0, 166, 153, .14)),
    #f8fafc !important;
}

body:has(.marketPulse) .featuredWishCard strong,
body:has(.marketPulse) .featuredWishCard span {
  color: #111827 !important;
}

body:has(.marketPulse)::after {
  content: "AI Match 91%" !important;
  max-width: 150px !important;
  padding: 12px 15px !important;
  border-radius: 999px !important;
  font-size: 13px !important;
}

@media (max-width: 1100px) {
  body:has(.marketPulse) .marketPulse {
    grid-template-columns: 1fr !important;
  }

  body:has(.marketPulse) .marketPulseGrid,
  body:has(.marketPulse) .pulseCountryRail {
    grid-column: 1 !important;
  }
}

@media (max-width: 720px) {
  body:has(.marketPulse) .marketPulseHead::after {
    content: none !important;
  }

  body:has(.marketPulse) .liveStatsStrip {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body:has(.marketPulse) .liveStatsStrip span {
    min-height: 76px !important;
    padding: 14px !important;
  }

  body:has(.marketPulse) .liveStatsStrip span:nth-child(even) {
    border-right: 0 !important;
  }

  body:has(.marketPulse) .marketPulseGrid {
    grid-template-columns: 1fr !important;
  }

  body:has(.marketPulse) .pulseFeed .pulseItem:nth-of-type(n+3),
  body:has(.marketPulse) .pulseTrips .pulseItem:nth-of-type(n+3) {
    display: none !important;
  }

  body:has(.marketPulse) .pulseCountryRail {
    display: none !important;
  }
}

/* BondMate 3.0 lower marketplace sections */
body:has(.marketPulse) .departureBoard {
  display: grid !important;
  grid-template-columns: minmax(0, .9fr) minmax(360px, 1.1fr) !important;
  gap: 22px !important;
  align-items: stretch !important;
  padding: clamp(28px, 4vw, 48px) !important;
  background:
    radial-gradient(circle at 86% 16%, rgba(0, 166, 153, .14), transparent 30%),
    linear-gradient(135deg, rgba(255, 255, 255, .98), rgba(248, 250, 252, .94)) !important;
}

body:has(.marketPulse) .departureBoard .sectionHead {
  align-content: center !important;
  min-height: 220px !important;
  margin: 0 !important;
  padding: 28px !important;
  border: 1px solid rgba(0, 166, 153, .2) !important;
  border-left: 5px solid #008a83 !important;
  border-radius: 24px !important;
  background: rgba(255, 255, 255, .78) !important;
}

body:has(.marketPulse) .departureBoard .sectionHead h2 {
  font-size: clamp(2rem, 4vw, 3.2rem) !important;
  line-height: 1.02 !important;
}

body:has(.marketPulse) .departureBoard .boardSummary {
  justify-self: start !important;
  margin-top: 18px !important;
}

body:has(.marketPulse) .departureGrid {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 14px !important;
}

body:has(.marketPulse) .departureCard {
  min-height: 154px !important;
  padding: 22px !important;
  border-radius: 22px !important;
  background: #fff !important;
}

body:has(.marketPulse) .routeFollowPanel {
  min-height: 130px !important;
  padding: 22px !important;
  border-radius: 22px !important;
  background:
    linear-gradient(135deg, rgba(236, 253, 245, .78), rgba(239, 246, 255, .7)) !important;
}

body:has(.marketPulse) .trendBoard {
  display: grid !important;
  gap: 22px !important;
  padding: clamp(30px, 4vw, 48px) !important;
}

body:has(.marketPulse) .trendBoard .sectionHead {
  min-height: auto !important;
  padding: 0 !important;
}

body:has(.marketPulse) .trendGrid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

body:has(.marketPulse) .trendCard {
  min-height: 142px !important;
  padding: 20px !important;
  border-radius: 20px !important;
}

body:has(.marketPulse) .featuredWishStrip,
body:has(.marketPulse) .trustedMembersPanel {
  padding: clamp(28px, 4vw, 44px) !important;
  background: rgba(255, 255, 255, .84) !important;
}

body:has(.marketPulse) .featuredWishScroller {
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) !important;
}

body:has(.marketPulse) .featuredWishCard {
  min-height: 0 !important;
  border-radius: 22px !important;
}

body:has(.marketPulse) .featuredWishCard .wishVisual {
  min-height: 120px !important;
  border-radius: 18px 18px 0 0 !important;
}

body:has(.marketPulse) .trustedMemberGrid {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important;
}

body:has(.marketPulse) .trustedMemberCard {
  min-height: 230px !important;
  padding: 22px !important;
}

body:has(.marketPulse) .viewGrid {
  display: grid !important;
  grid-template-columns: minmax(0, .9fr) minmax(360px, 1.1fr) !important;
  gap: 28px !important;
  align-items: start !important;
}

body:has(.marketPulse) .viewGrid > section {
  min-width: 0 !important;
  padding: clamp(24px, 3vw, 34px) !important;
  border-radius: 28px !important;
  background: rgba(255, 255, 255, .9) !important;
}

body:has(.marketPulse) .viewGrid > section .sectionHead {
  margin-bottom: 18px !important;
}

body:has(.marketPulse) .viewGrid > section .sectionHead h2 {
  font-size: clamp(1.8rem, 3vw, 2.5rem) !important;
}

body:has(.marketPulse) .tripList,
body:has(.marketPulse) .matchList {
  display: grid !important;
  gap: 14px !important;
}

body:has(.marketPulse) .tripCard {
  grid-template-columns: 54px minmax(0, 1fr) !important;
  gap: 14px !important;
  min-height: 0 !important;
  padding: 16px !important;
  border-radius: 22px !important;
}

body:has(.marketPulse) .tripCard .avatar,
body:has(.marketPulse) .tripCard .memberAvatar {
  width: 54px !important;
  height: 54px !important;
  border-radius: 18px !important;
}

body:has(.marketPulse) .tripCard .cardTop {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 8px 12px !important;
  align-items: start !important;
}

body:has(.marketPulse) .tripCard .cardTop h3 {
  margin: 0 !important;
  font-size: 1.1rem !important;
}

body:has(.marketPulse) .tripCard .note {
  display: none !important;
}

body:has(.marketPulse) .tripCard .miniMeta {
  gap: 5px 10px !important;
  margin-top: 8px !important;
  font-size: 12px !important;
}

body:has(.marketPulse) .tripCard .miniMeta span:nth-child(n+4) {
  display: none !important;
}

body:has(.marketPulse) .tripCard .meter {
  margin-top: 10px !important;
}

body:has(.marketPulse) .tripCard .tagRow {
  margin-top: 10px !important;
  gap: 6px !important;
}

body:has(.marketPulse) .tripCard .tagRow span:nth-child(n+4) {
  display: none !important;
}

body:has(.marketPulse) .tripCard .tripActions {
  margin-top: 12px !important;
}

body:has(.marketPulse) .tripCard .travelerTrustBadge {
  display: flex !important;
  gap: 6px !important;
  min-height: 0 !important;
  height: auto !important;
  margin-top: 10px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

body:has(.marketPulse) .tripCard .travelerTrustBadge span:nth-child(n+3),
body:has(.marketPulse) .tripCard .travelerTrustBadge button {
  display: none !important;
}

body:has(.marketPulse) .tripCard .travelerTrustBadge span {
  min-height: 28px !important;
  height: 28px !important;
  padding: 0 10px !important;
  border: 1px solid rgba(0, 166, 153, .18) !important;
  border-radius: 999px !important;
  background: rgba(0, 166, 153, .08) !important;
  color: #007f76 !important;
  font-size: 12px !important;
}

body:has(.marketPulse) .tripCard .routeFollowInline {
  justify-content: end !important;
  min-height: 0 !important;
  height: auto !important;
  margin-top: 10px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

body:has(.marketPulse) .tripCard .routeFollowInline span {
  display: none !important;
}

body:has(.marketPulse) .tripCard .routeFollowInline button {
  min-height: 36px !important;
  padding: 0 14px !important;
}

body:has(.marketPulse) .matchCard {
  position: relative !important;
  display: grid !important;
  grid-template-columns: 88px minmax(0, 1fr) !important;
  gap: 16px !important;
  min-height: 0 !important;
  padding: 18px !important;
  overflow: hidden !important;
  border-radius: 22px !important;
  background: #fff !important;
}

body:has(.marketPulse) .matchCard .wishVisual {
  width: 88px !important;
  min-height: 88px !important;
  height: 88px !important;
  border-radius: 20px !important;
  overflow: hidden !important;
  align-self: start !important;
}

body:has(.marketPulse) .matchCard .wishVisualPlaceholder {
  min-height: 88px !important;
  height: 88px !important;
  padding: 0 !important;
}

body:has(.marketPulse) .matchCard .wishVisualPlaceholder strong {
  width: 48px !important;
  height: 48px !important;
  min-height: 48px !important;
  font-size: 1.15rem !important;
}

body:has(.marketPulse) .matchCard .wishVisualClues,
body:has(.marketPulse) .matchCard .wishVisual > small {
  display: none !important;
}

body:has(.marketPulse) .matchCard h3 {
  font-size: 1.08rem !important;
}

body:has(.marketPulse) .matchCard p {
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

body:has(.marketPulse) .matchCard .matchReasons,
body:has(.marketPulse) .matchCard .routeInsightGrid,
body:has(.marketPulse) .matchCard .matchActions,
body:has(.marketPulse) .matchCard .buttonRow,
body:has(.marketPulse) .matchCard .recommendationDetails,
body:has(.marketPulse) .matchCard .timelineBox,
body:has(.marketPulse) .matchCard .aiBox,
body:has(.marketPulse) .matchCard .reasonPills,
body:has(.marketPulse) .matchCard .alternativeTrips,
body:has(.marketPulse) .matchCard .travelerTrustBadge,
body:has(.marketPulse) .matchCard .matchFooter {
  display: none !important;
}

body:has(.marketPulse) .matchCard .matchMain {
  min-width: 0 !important;
  padding-right: 82px !important;
}

body:has(.marketPulse) .matchCard .matchMain .status {
  display: inline-flex !important;
  margin-bottom: 6px !important;
}

body:has(.marketPulse) .matchCard .matchInsight {
  grid-column: 2 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  min-height: 0 !important;
  height: auto !important;
  margin-top: 2px !important;
  padding: 12px 14px !important;
  border-radius: 16px !important;
  background: rgba(0, 166, 153, .08) !important;
}

body:has(.marketPulse) .matchCard .matchInsight > div,
body:has(.marketPulse) .matchCard .matchInsight > strong {
  min-height: 0 !important;
}

body:has(.marketPulse) .matchCard::after {
  content: "AI sorted";
  position: absolute;
  top: 18px;
  right: 18px;
  padding: 6px 10px;
  border-radius: 999px;
  color: #007f76;
  background: rgba(0, 166, 153, .1);
  font-size: 12px;
  font-weight: 820;
}

@media (max-width: 1100px) {
  body:has(.marketPulse) .departureBoard,
  body:has(.marketPulse) .viewGrid {
    grid-template-columns: 1fr !important;
  }

  body:has(.marketPulse) .trendGrid {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 720px) {
  body:has(.marketPulse) .departureBoard,
  body:has(.marketPulse) .trendBoard,
  body:has(.marketPulse) .featuredWishStrip,
  body:has(.marketPulse) .trustedMembersPanel,
  body:has(.marketPulse) .viewGrid > section {
    padding: 22px !important;
    border-radius: 24px !important;
  }

  body:has(.marketPulse) .departureBoard .sectionHead {
    min-height: 0 !important;
    padding: 22px !important;
  }

  body:has(.marketPulse) .tripCard,
  body:has(.marketPulse) .matchCard {
    grid-template-columns: 1fr !important;
  }

  body:has(.marketPulse) .matchCard .wishVisual {
    width: 100% !important;
    min-height: 116px !important;
  }
}

body .siteFooter {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 22px;
  align-items: center;
  width: min(100%, 1100px);
  margin: clamp(44px, 6vw, 72px) auto 36px;
  padding: 28px 32px;
  border: 1px solid rgba(226, 232, 240, .92);
  border-radius: 28px;
  color: #64748b;
  background: rgba(255, 255, 255, .88);
  box-shadow: var(--bm3-shadow);
}

body .siteFooter > div {
  display: grid;
  gap: 4px;
}

body .siteFooter strong {
  color: #111827;
  font-size: 1.2rem;
  font-weight: 860;
}

body .siteFooter span,
body .siteFooter small {
  color: #64748b;
  font-size: 13px;
}

body .siteFooter nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

body .siteFooter button {
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid transparent;
  border-radius: 999px;
  color: #475569;
  background: transparent;
  font-weight: 760;
}

body .siteFooter button:hover,
body .siteFooter button:focus-visible {
  color: #111827;
  background: #f8fafc;
}

html[data-theme="dark"] body:has(.marketPulse) .departureBoard,
html[data-theme="dark"] body:has(.marketPulse) .featuredWishStrip,
html[data-theme="dark"] body:has(.marketPulse) .trustedMembersPanel,
html[data-theme="dark"] body:has(.marketPulse) .viewGrid > section,
html[data-theme="dark"] body .siteFooter {
  border-color: rgba(148, 163, 184, .22) !important;
  background: rgba(15, 23, 42, .86) !important;
}

html[data-theme="dark"] body:has(.marketPulse) :where(.departureBoard .sectionHead, .routeFollowPanel, .departureCard, .featuredWishCard, .trustedMemberCard, .tripCard, .matchCard) {
  border-color: rgba(148, 163, 184, .22) !important;
  background: rgba(17, 24, 39, .86) !important;
}

html[data-theme="dark"] body:has(.marketPulse) :where(.liveStatsStrip strong, .departureBoard h2, .featuredWishStrip h2, .trustedMembersPanel h2, .viewGrid h2, .tripCard h3, .matchCard h3, .siteFooter strong) {
  color: #f8fafc !important;
}

html[data-theme="dark"] body:has(.marketPulse) :where(.liveStatsStrip small, .departureBoard p, .featuredWishStrip p, .trustedMembersPanel p, .viewGrid p, .tripCard .miniMeta, .matchCard p, .siteFooter span, .siteFooter small) {
  color: #cbd5e1 !important;
}

html[data-theme="dark"] body .siteFooter button {
  color: #cbd5e1;
}

html[data-theme="dark"] body .siteFooter button:hover,
html[data-theme="dark"] body .siteFooter button:focus-visible {
  color: #f8fafc;
  background: rgba(255, 255, 255, .08);
}

@media (max-width: 720px) {
  body .siteFooter {
    grid-template-columns: 1fr;
    margin-bottom: 104px;
    padding: 24px;
  }

  body .siteFooter nav {
    justify-content: flex-start;
  }
}

body:has(.marketPulse) .topbar {
  z-index: 80 !important;
}

body:has(.marketPulse) .languageToggle,
body:has(.marketPulse) .themeToggle {
  z-index: 140 !important;
  pointer-events: auto !important;
}

body:not(:has(.marketPulse)) .languageToggle {
  position: fixed !important;
  top: 88px !important;
  right: 16px !important;
  bottom: auto !important;
  z-index: 140 !important;
}

body:not(:has(.marketPulse)) .themeToggle {
  position: fixed !important;
  top: 88px !important;
  right: 226px !important;
  bottom: auto !important;
  z-index: 140 !important;
}

@media (max-width: 720px) {
  body:not(:has(.marketPulse)) .languageToggle,
  body:not(:has(.marketPulse)) .themeToggle {
    top: 14px !important;
    bottom: auto !important;
    z-index: 140 !important;
  }

  body:not(:has(.marketPulse)) .languageToggle {
    right: 12px !important;
  }

  body:not(:has(.marketPulse)) .themeToggle {
    right: 184px !important;
  }
}

/* Countries page world-map treatment */
body .mapReadableView .mapGuidePanel {
  position: relative !important;
  overflow: hidden !important;
  min-height: 300px !important;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .96), rgba(248, 250, 252, .92)) !important;
}

body .mapReadableView .mapGuidePanel::before {
  content: "";
  position: absolute;
  right: 40px;
  top: 36px;
  width: min(44%, 520px);
  height: calc(100% - 72px);
  border-radius: 28px;
  background:
    radial-gradient(circle at 28% 38%, rgba(255, 56, 92, .9) 0 6px, transparent 7px),
    radial-gradient(circle at 46% 30%, rgba(0, 166, 153, .9) 0 5px, transparent 6px),
    radial-gradient(circle at 66% 48%, rgba(17, 24, 39, .7) 0 5px, transparent 6px),
    radial-gradient(circle at 76% 66%, rgba(255, 56, 92, .65) 0 4px, transparent 5px),
    linear-gradient(135deg, rgba(236, 253, 245, .74), rgba(239, 246, 255, .64));
  box-shadow: inset 0 0 0 1px rgba(226, 232, 240, .86);
  opacity: .86;
}

body .mapReadableView .mapGuidePanel::after {
  content: "Tokyo  Seoul  New York  London";
  position: absolute;
  right: 68px;
  bottom: 56px;
  width: min(38%, 430px);
  color: rgba(15, 23, 42, .58);
  font-size: 12px;
  font-weight: 820;
  letter-spacing: .08em;
  text-transform: uppercase;
  word-spacing: 16px;
}

body .mapReadableView .mapGuidePanel > * {
  position: relative !important;
  z-index: 1 !important;
}

body .mapReadableView .areaHumanBoard {
  display: grid !important;
  grid-template-columns: minmax(0, .9fr) minmax(360px, 1.1fr) !important;
  gap: 24px !important;
  align-items: start !important;
}

body .mapReadableView .areaSpotlight,
body .mapReadableView .areaDirectory {
  min-width: 0 !important;
  padding: clamp(24px, 3vw, 34px) !important;
  border: 1px solid rgba(226, 232, 240, .9) !important;
  border-radius: 28px !important;
  background: rgba(255, 255, 255, .9) !important;
  box-shadow: var(--bm3-shadow) !important;
}

body .mapReadableView .areaSpotlight {
  display: grid !important;
  gap: 14px !important;
  max-height: 860px !important;
  overflow: auto !important;
  scrollbar-width: thin;
}

body .mapReadableView .areaDirectory {
  max-height: 860px !important;
  overflow: auto !important;
  scrollbar-width: thin;
}

body .mapReadableView .areaHumanCard {
  min-height: 0 !important;
  padding: 18px !important;
  border-radius: 22px !important;
}

body .mapReadableView .areaRow {
  min-height: 86px !important;
  padding: 16px 18px !important;
  border-radius: 18px !important;
}

body .mapReadableView .countryGrid.readableCountries {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 18px !important;
}

body .mapReadableView .countryGrid.readableCountries .adminTile {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  align-items: flex-start !important;
  min-height: 214px !important;
  padding: 20px !important;
  border-radius: 24px !important;
}

body .mapReadableView .countryGrid.readableCountries .adminTile > :first-child {
  grid-row: auto !important;
}

body .mapReadableView .countryGrid.readableCountries .adminTile .countryLabel {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  min-width: 0 !important;
  width: 100% !important;
  color: var(--ink) !important;
  font-weight: 950 !important;
  white-space: normal !important;
  word-break: keep-all !important;
}

body .mapReadableView .countryGrid.readableCountries .adminTile .countryLabel > span:last-child {
  writing-mode: horizontal-tb !important;
  white-space: nowrap !important;
}

body .mapReadableView .countryGrid.readableCountries .adminTile strong {
  display: block !important;
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  font-size: clamp(1.15rem, 2.2vw, 1.65rem) !important;
  line-height: 1.2 !important;
  white-space: normal !important;
  word-break: keep-all !important;
  overflow-wrap: normal !important;
}

body .mapReadableView .countryGrid.readableCountries .adminTile small,
body .mapReadableView .countryGrid.readableCountries .adminTile span,
body .mapReadableView .countryGrid.readableCountries .adminTile p {
  min-width: 0 !important;
  line-height: 1.55 !important;
  word-break: normal !important;
  overflow-wrap: anywhere !important;
}

body .mapReadableView .countryGrid.readableCountries .adminTile small {
  padding: 8px 10px !important;
  border-radius: 999px !important;
  background: rgba(236, 253, 245, .92) !important;
  color: #0f766e !important;
  font-size: 12px !important;
  font-weight: 850 !important;
}

html[data-theme="dark"] body .mapReadableView .mapGuidePanel,
html[data-theme="dark"] body .mapReadableView .areaSpotlight,
html[data-theme="dark"] body .mapReadableView .areaDirectory {
  border-color: rgba(148, 163, 184, .22) !important;
  background: rgba(15, 23, 42, .86) !important;
}

@media (max-width: 1100px) {
  body .mapReadableView .mapGuidePanel::before,
  body .mapReadableView .mapGuidePanel::after {
    opacity: .22;
  }

  body .mapReadableView .areaHumanBoard {
    grid-template-columns: 1fr !important;
  }

  body .mapReadableView .countryGrid.readableCountries {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 720px) {
  body .mapReadableView .mapGuidePanel {
    min-height: 0 !important;
  }

  body .mapReadableView .mapGuidePanel::before,
  body .mapReadableView .mapGuidePanel::after {
    display: none !important;
  }

  body .mapReadableView .areaSpotlight,
  body .mapReadableView .areaDirectory {
    padding: 22px !important;
    border-radius: 24px !important;
  }

  body .mapReadableView .areaSpotlight {
    max-height: 980px !important;
  }

  body .mapReadableView .areaDirectory {
    max-height: 680px !important;
  }

  body .mapReadableView .countryGrid.readableCountries {
    grid-template-columns: 1fr !important;
  }

  body .mapReadableView .countryGrid.readableCountries .adminTile {
    min-height: 0 !important;
  }
}

@media (min-width: 1101px) {
  body:has(.marketPulse) .marketPulseGrid {
    display: contents !important;
  }

  body:has(.marketPulse) .pulseFeed {
    grid-column: 1 !important;
    grid-row: 3 / span 2 !important;
  }

  body:has(.marketPulse) .pulseCountryRail {
    grid-column: 2 !important;
    grid-row: 3 !important;
    align-self: start !important;
  }

  body:has(.marketPulse) .pulseTrips {
    grid-column: 2 !important;
    grid-row: 4 !important;
    gap: 10px !important;
    padding: 16px !important;
  }

  body:has(.marketPulse) .pulseTrips .pulseItem {
    min-height: 72px !important;
    grid-template-columns: 40px minmax(0, 1fr) !important;
    gap: 10px !important;
    padding: 10px !important;
  }

  body:has(.marketPulse) .pulseTrips .pulseItem:nth-of-type(n+3) {
    display: none !important;
  }

  body:has(.marketPulse) .pulseTrips .pulseIcon {
    width: 40px !important;
    height: 40px !important;
    border-radius: 14px !important;
  }

  body:has(.marketPulse) .pulseTrips .pulseItem p,
  body:has(.marketPulse) .pulseTrips .pulseItem button {
    display: none !important;
  }

  body:has(.marketPulse) .pulseTrips .pulseItem strong {
    font-size: .95rem !important;
  }

  body:has(.marketPulse) .pulseTrips .pulseItem small {
    display: block !important;
    margin-top: 2px !important;
    overflow: hidden !important;
    color: #64748b !important;
    font-size: 12px !important;
    text-overflow: ellipsis !important;
  }
}

/* BondMate 3.0 workflow pages polish */
body:not(:has(.marketPulse)) .panel > :where(.formView, .ordersView, .accountView, .mapReadableView, section) {
  padding-bottom: 28px;
}

body:not(:has(.marketPulse)) .formView > .sectionHead,
body:not(:has(.marketPulse)) .ordersView > .sectionHead,
body:not(:has(.marketPulse)) .accountView.guestAccount .guestAccountEntry,
body:not(:has(.marketPulse)) .panel > section > .sectionHead {
  min-height: 132px !important;
  padding: clamp(22px, 3vw, 30px) !important;
  border-radius: 28px !important;
  overflow: hidden !important;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, .94) 0%, rgba(240, 253, 250, .78) 56%, rgba(255, 247, 237, .72) 100%),
    url("./images/bondmai-hero-handoff.webp") right center / min(38%, 480px) auto no-repeat !important;
  border: 1px solid rgba(20, 184, 166, .22) !important;
  box-shadow: 0 16px 46px rgba(15, 23, 42, .06) !important;
}

body:not(:has(.marketPulse)) .formView > .sectionHead h2,
body:not(:has(.marketPulse)) .ordersView > .sectionHead h2,
body:not(:has(.marketPulse)) .panel > section > .sectionHead h2 {
  max-width: 680px;
  margin: 0 0 10px !important;
  font-size: clamp(2rem, 4vw, 3.35rem) !important;
  line-height: 1.05 !important;
}

body:not(:has(.marketPulse)) .formView > .sectionHead p,
body:not(:has(.marketPulse)) .ordersView > .sectionHead p,
body:not(:has(.marketPulse)) .panel > section > .sectionHead p {
  max-width: 680px !important;
  font-size: 1rem !important;
  line-height: 1.75 !important;
}

body:not(:has(.marketPulse)) .decisionStrip {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 12px !important;
  margin: 18px 0 !important;
}

body:not(:has(.marketPulse)) .decisionStrip article {
  min-height: 104px !important;
  padding: 16px 18px !important;
  border-radius: 20px !important;
  background: rgba(255, 255, 255, .9) !important;
  box-shadow: 0 10px 30px rgba(15, 23, 42, .06) !important;
}

body:not(:has(.marketPulse)) .decisionStrip .decisionPrimary {
  background: linear-gradient(135deg, rgba(236, 253, 245, .96), rgba(255, 251, 235, .86)) !important;
  border-color: rgba(20, 184, 166, .3) !important;
}

body:not(:has(.marketPulse)) .wishInspirationStrip {
  grid-template-columns: minmax(280px, .85fr) minmax(0, 1.15fr) !important;
  gap: 14px !important;
  min-height: 176px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body:not(:has(.marketPulse)) .wishInspirationStrip .wishInspirationPhoto,
body:not(:has(.marketPulse)) .wishInspirationStrip article {
  min-height: 176px !important;
  border-radius: 22px !important;
  box-shadow: 0 10px 30px rgba(15, 23, 42, .06) !important;
}

body:not(:has(.marketPulse)) .wishInspirationStrip .wishInspirationCards {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 14px !important;
}

body:not(:has(.marketPulse)):not(:has(.appShell.view-wish)) .wishForm {
  gap: 16px !important;
}

body:not(:has(.marketPulse)):not(:has(.appShell.view-wish)) .wishForm > label:not(.wide):not(.wishPhotoUpload),
body:not(:has(.marketPulse)):not(:has(.appShell.view-wish)) .wishForm > .field,
body:not(:has(.marketPulse)):not(:has(.appShell.view-wish)) .wishForm > .inputField,
body:not(:has(.marketPulse)):not(:has(.appShell.view-wish)) .wishForm > .wide,
body:not(:has(.marketPulse)):not(:has(.appShell.view-wish)) .wishForm > .wishPhotoUpload,
body:not(:has(.marketPulse)):not(:has(.appShell.view-wish)) .wishForm > .productPreviewCard,
body:not(:has(.marketPulse)):not(:has(.appShell.view-wish)) .wishForm > .riskBox,
body:not(:has(.marketPulse)):not(:has(.appShell.view-wish)) .wishForm > .estimate,
body:not(:has(.marketPulse)):not(:has(.appShell.view-wish)) .wishForm > .wishCostBreakdown,
body:not(:has(.marketPulse)):not(:has(.appShell.view-wish)) .wishForm > .wishLivePreview {
  border-radius: 22px !important;
  box-shadow: 0 10px 28px rgba(15, 23, 42, .055) !important;
}

body:not(:has(.marketPulse)):not(:has(.appShell.view-wish)) .wishForm input,
body:not(:has(.marketPulse)):not(:has(.appShell.view-wish)) .wishForm select,
body:not(:has(.marketPulse)):not(:has(.appShell.view-wish)) .wishForm textarea,
body:not(:has(.marketPulse)) .loginForm input,
body:not(:has(.marketPulse)) .loginForm select {
  border-radius: 16px !important;
}

body:not(:has(.marketPulse)) .tripCard {
  grid-template-columns: 58px minmax(0, 1fr) auto !important;
  min-height: 0 !important;
  padding: 16px !important;
  border-radius: 24px !important;
}

body:not(:has(.marketPulse)) .tripCard .note {
  max-height: 48px;
  overflow: hidden;
}

body:not(:has(.marketPulse)) .tripCard .tagRow span:nth-child(n+4),
body:not(:has(.marketPulse)) .tripCard .miniMeta span:nth-child(n+5) {
  display: none !important;
}

body:not(:has(.marketPulse)) .ordersView.isEmpty .orderSummary {
  max-width: 860px;
  margin-inline: auto;
}

body:not(:has(.marketPulse)) .ordersView.isEmpty .orderSummary button:nth-child(n+5),
body:not(:has(.marketPulse)) .ordersView.isEmpty .orderFocusRail,
body:not(:has(.marketPulse)) .ordersView.isEmpty .orderFilters,
body:not(:has(.marketPulse)) .ordersView.isEmpty .resultSummary {
  display: none !important;
}

body:not(:has(.marketPulse)) .ordersView.isEmpty .guestFlowNudge {
  max-width: 900px;
  margin: 18px auto 0 !important;
}

body:not(:has(.marketPulse)) .policyGrid {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 16px !important;
}

body:not(:has(.marketPulse)) .policyItem {
  min-height: 300px !important;
  padding: 22px !important;
  border-radius: 24px !important;
}

body:not(:has(.marketPulse)) .policyItem p {
  line-height: 1.72 !important;
}

body:not(:has(.marketPulse)) .selfServiceGuide,
body:not(:has(.marketPulse)) .policyQaView {
  border-radius: 28px !important;
  box-shadow: 0 10px 30px rgba(15, 23, 42, .055) !important;
}

body:not(:has(.marketPulse)) .policyQaView {
  max-height: 980px !important;
  overflow: auto !important;
  scrollbar-width: thin;
}

body:not(:has(.marketPulse)) .accountView.guestAccount {
  max-width: 920px !important;
  margin-inline: auto !important;
}

body:not(:has(.marketPulse)) .accountView.guestAccount .guestAccountEntry {
  max-width: none !important;
  margin-bottom: 18px !important;
  background:
    linear-gradient(135deg, rgba(240, 253, 250, .94), rgba(255, 251, 235, .82)) !important;
}

body:not(:has(.marketPulse)) .accountView.guestAccount .loginForm {
  border-radius: 24px !important;
  box-shadow: 0 20px 50px rgba(15, 23, 42, .1) !important;
}

html[data-theme="dark"] body:not(:has(.marketPulse)) .formView > .sectionHead,
html[data-theme="dark"] body:not(:has(.marketPulse)) .ordersView > .sectionHead,
html[data-theme="dark"] body:not(:has(.marketPulse)) .accountView.guestAccount .guestAccountEntry,
html[data-theme="dark"] body:not(:has(.marketPulse)) .panel > section > .sectionHead,
html[data-theme="dark"] body:not(:has(.marketPulse)) .decisionStrip article,
html[data-theme="dark"] body:not(:has(.marketPulse)) .wishInspirationStrip article {
  background: rgba(15, 23, 42, .86) !important;
  border-color: rgba(148, 163, 184, .24) !important;
}

@media (max-width: 1100px) {
  body:not(:has(.marketPulse)) .decisionStrip,
  body:not(:has(.marketPulse)) .policyGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body:not(:has(.marketPulse)) .wishInspirationStrip {
    grid-template-columns: 1fr !important;
  }

  body:not(:has(.marketPulse)) .wishInspirationStrip .wishInspirationCards {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  body:not(:has(.marketPulse)) .tripCard {
    grid-template-columns: 54px minmax(0, 1fr) !important;
  }
}

@media (max-width: 720px) {
  body .brand small,
  body .brandVersion,
  body .brandName em {
    display: none !important;
  }

  body .brand strong {
    max-width: 116px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  body:not(:has(.marketPulse)) .topbar {
    padding-right: 210px !important;
  }

  body:not(:has(.marketPulse)) .brand small,
  body:not(:has(.marketPulse)) .brandVersion,
  body:not(:has(.marketPulse)) .brandName em {
    display: none !important;
  }

  body:not(:has(.marketPulse)) .brand strong {
    max-width: 108px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  body:not(:has(.marketPulse)) .workspace {
    padding-top: 18px !important;
    padding-bottom: 122px !important;
  }

  body:not(:has(.marketPulse)) .formView > .sectionHead,
  body:not(:has(.marketPulse)) .ordersView > .sectionHead,
  body:not(:has(.marketPulse)) .accountView.guestAccount .guestAccountEntry,
  body:not(:has(.marketPulse)) .panel > section > .sectionHead {
    min-height: 0 !important;
    padding: 24px 20px !important;
    background:
      linear-gradient(110deg, rgba(255, 255, 255, .94), rgba(240, 253, 250, .82)) !important;
  }

  body:not(:has(.marketPulse)) .formView > .sectionHead h2,
  body:not(:has(.marketPulse)) .ordersView > .sectionHead h2,
  body:not(:has(.marketPulse)) .panel > section > .sectionHead h2 {
    font-size: 2rem !important;
  }

  body:not(:has(.marketPulse)) .decisionStrip,
  body:not(:has(.marketPulse)) .policyGrid,
  body:not(:has(.marketPulse)) .wishInspirationStrip {
    grid-template-columns: 1fr !important;
  }

  body:not(:has(.marketPulse)) .decisionStrip article,
  body:not(:has(.marketPulse)) .wishInspirationStrip .wishInspirationPhoto,
  body:not(:has(.marketPulse)) .wishInspirationStrip article {
    min-height: 0 !important;
  }

  body:not(:has(.marketPulse)) .wishInspirationStrip .wishInspirationCards {
    grid-template-columns: 1fr !important;
  }

  body:not(:has(.marketPulse)) .wishInspirationStrip article {
    padding: 18px !important;
  }

  body:not(:has(.marketPulse)) .tripCard {
    grid-template-columns: 48px minmax(0, 1fr) !important;
    padding: 14px !important;
  }

  body:not(:has(.marketPulse)) .tripCard .tripActions,
  body:not(:has(.marketPulse)) .tripCard .travelerTrustBadge {
    grid-column: 1 / -1 !important;
  }

  body:not(:has(.marketPulse)) .ordersView .orderSummary {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body:not(:has(.marketPulse)) .policyItem {
    min-height: 0 !important;
  }

  body:not(:has(.marketPulse)) .selfServiceGuide,
  body:not(:has(.marketPulse)) .policyQaView {
    max-height: 760px;
    overflow: auto;
  }

  body:not(:has(.marketPulse)) .panel > section .adminColumns {
    max-height: 560px !important;
    overflow: auto !important;
    padding: 16px !important;
    border: 1px solid rgba(226, 232, 240, .9) !important;
    border-radius: 24px !important;
    background: rgba(255, 255, 255, .72) !important;
    scrollbar-width: thin;
  }

  body:not(:has(.marketPulse)) .panel > section .adminColumns + .adminColumns {
    margin-top: 14px !important;
  }

  body:not(:has(.marketPulse)) .panel > section .adminColumns h3 {
    position: sticky !important;
    top: 0 !important;
    z-index: 1 !important;
    margin: -16px -16px 12px !important;
    padding: 16px !important;
    background: rgba(255, 255, 255, .9) !important;
    backdrop-filter: blur(12px) !important;
  }

  html[data-theme="dark"] body:not(:has(.marketPulse)) .panel > section .adminColumns,
  html[data-theme="dark"] body:not(:has(.marketPulse)) .panel > section .adminColumns h3 {
    border-color: rgba(148, 163, 184, .18) !important;
    background: rgba(15, 23, 42, .82) !important;
  }

  body:not(:has(.marketPulse)) .accountView.guestAccount .loginForm {
    padding: 16px !important;
  }
}

html[data-theme="dark"] body .topbar {
  background: rgba(15, 23, 42, .82) !important;
  border-color: rgba(148, 163, 184, .22) !important;
  box-shadow: 0 16px 42px rgba(0, 0, 0, .32) !important;
}

html[data-theme="dark"] body .topbar button {
  color: rgba(226, 232, 240, .84) !important;
  background: rgba(30, 41, 59, .72) !important;
  border-color: rgba(148, 163, 184, .18) !important;
}

html[data-theme="dark"] body .topbar button:hover,
html[data-theme="dark"] body .topbar button.active {
  color: #f8fafc !important;
  background: rgba(255, 255, 255, .12) !important;
}

html[data-theme="dark"] body .rail {
  background: rgba(15, 23, 42, .72) !important;
  border-color: rgba(148, 163, 184, .18) !important;
}

html[data-theme="dark"] body .rail button {
  color: rgba(226, 232, 240, .72) !important;
}

html[data-theme="dark"] body .rail button.active {
  color: #f8fafc !important;
  background: rgba(255, 255, 255, .1) !important;
  box-shadow: none !important;
}

body .filters.mapFilters,
body .selfServiceTabs {
  scrollbar-width: none;
}

body .filters.mapFilters::-webkit-scrollbar,
body .selfServiceTabs::-webkit-scrollbar {
  display: none;
}

body .filters.mapFilters button,
body .selfServiceTabs button {
  flex: 0 0 auto;
  white-space: nowrap;
}

@media (max-width: 720px) {
  body .filters.mapFilters,
  body .selfServiceTabs {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 10px !important;
    width: calc(100% + 28px) !important;
    margin-inline: -14px !important;
    padding: 6px 14px 12px !important;
    overflow-x: auto !important;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 26px), transparent 100%);
  }

  body .filters.mapFilters button,
  body .selfServiceTabs button {
    min-width: max-content !important;
    scroll-snap-align: start;
    border-radius: 14px !important;
  }

  body .siteFooter {
    margin-top: 34px !important;
  }

  body:has(.marketPulse) .siteFooter {
    margin-top: 22px !important;
  }

  body:has(.marketPulse) .heroProduct.heroSearchFirst {
    min-height: calc(100vh - 24px) !important;
    height: auto !important;
    padding: 34px 22px 108px !important;
    align-content: start !important;
    gap: 18px !important;
  }

  body:has(.marketPulse) .heroProduct.heroSearchFirst h1 {
    font-size: clamp(2.35rem, 11vw, 3.2rem) !important;
    line-height: .98 !important;
  }

  body:has(.marketPulse) .heroProduct.heroSearchFirst h1::before,
  body:has(.marketPulse) .heroProduct.heroSearchFirst h2::before {
    content: none !important;
    display: none !important;
  }

  body:has(.marketPulse) .heroProduct.heroSearchFirst p {
    font-size: .98rem !important;
    line-height: 1.7 !important;
  }

  body:has(.marketPulse) .heroProduct.heroSearchFirst .heroSearchPanel {
    gap: 8px !important;
    margin-top: 8px !important;
    padding: 12px !important;
    border-radius: 22px !important;
  }

  body:has(.marketPulse) .heroProduct.heroSearchFirst .heroSearchField {
    min-height: 58px !important;
    padding: 10px 14px !important;
    border-radius: 18px !important;
  }

  body:has(.marketPulse) .heroProduct.heroSearchFirst .heroSearchField:nth-of-type(n+3) {
    display: none !important;
  }

  body:has(.marketPulse) .heroProduct.heroSearchFirst .heroSearchSubmit {
    min-height: 56px !important;
    margin-top: 6px !important;
  }

  body:has(.marketPulse) .heroProduct.heroSearchFirst .heroActions,
  body:has(.marketPulse) .heroProduct.heroSearchFirst .miniCountryPills {
    display: none !important;
  }

  body:has(.marketPulse) .workspace {
    margin-top: -74px !important;
    position: relative;
    z-index: 2;
  }

  body .mapReadableView .areaHumanCard {
    gap: 10px !important;
    padding: 16px !important;
    border-radius: 22px !important;
  }

  body .mapReadableView .areaHumanCard p {
    margin: 0 !important;
    font-size: .92rem !important;
    line-height: 1.55 !important;
  }

  body .mapReadableView .areaHumanCard > div:first-child {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
  }

  body .mapReadableView .areaHumanCard > dl {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
    margin: 0 !important;
  }

  body .mapReadableView .areaHumanCard > dl > div {
    min-height: 64px !important;
    padding: 10px !important;
    border-radius: 14px !important;
  }

  body .mapReadableView .areaHumanCard small {
    font-size: 12px !important;
    line-height: 1.35 !important;
  }

  body:has(.marketPulse) .viewGrid > section:first-child .tripCard:nth-of-type(n+3) {
    display: none !important;
  }

  body:has(.marketPulse) .viewGrid > section:first-child .tripCard {
    min-height: 0 !important;
    padding: 16px !important;
  }

  body:has(.marketPulse) .viewGrid > section:first-child .tripCard .avatar,
  body:has(.marketPulse) .viewGrid > section:first-child .tripCard .memberAvatar {
    width: 54px !important;
    height: 54px !important;
  }

  body:has(.marketPulse) .viewGrid > section:first-child .tripCard .tagRow span:nth-child(n+4),
  body:has(.marketPulse) .viewGrid > section:first-child .tripCard .travelerTrustBadge,
  body:has(.marketPulse) .viewGrid > section:first-child .tripCard .note {
    display: none !important;
  }

  body:has(.marketPulse) .matchList .matchCard:nth-child(n+3),
  body:has(.marketPulse) .matchGrid .matchCard:nth-child(n+3) {
    display: none !important;
  }

  body:has(.marketPulse) .matchCard {
    padding: 16px !important;
  }

  body:has(.marketPulse) :where(.departureBoard, .trendBoard, .featuredWishStrip, .trustedMembersPanel) .sectionHead {
    min-height: 0 !important;
    padding: 18px !important;
    border-radius: 22px !important;
  }

  body:has(.marketPulse) :where(.departureBoard, .trendBoard, .featuredWishStrip, .trustedMembersPanel) .sectionHead h2 {
    font-size: 1.55rem !important;
  }

  body:has(.marketPulse) :where(.departureBoard, .trendBoard, .featuredWishStrip, .trustedMembersPanel) .sectionHead p {
    display: -webkit-box !important;
    -webkit-line-clamp: 1 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    font-size: .92rem !important;
  }

  body:has(.marketPulse) :where(.departureBoard, .trendBoard, .featuredWishStrip, .trustedMembersPanel) .sectionHead .buttonRow,
  body:has(.marketPulse) :where(.departureBoard, .trendBoard, .featuredWishStrip, .trustedMembersPanel) .sectionHead > div:nth-child(n+2) {
    display: none !important;
  }

  body:has(.marketPulse) .trendGrid .trendCard:nth-child(n+3) {
    display: none !important;
  }

  body:has(.marketPulse) .departureBoard,
  body:has(.marketPulse) .trendBoard {
    padding: 18px !important;
  }

  body:not(:has(.marketPulse)) .policyGrid {
    gap: 12px !important;
  }

  body:not(:has(.marketPulse)) .policyItem {
    display: grid !important;
    grid-template-columns: 48px minmax(0, 1fr) !important;
    gap: 8px 14px !important;
    align-items: start !important;
    padding: 16px !important;
  }

  body:not(:has(.marketPulse)) .policyItem .glyph {
    grid-row: 1 / span 3 !important;
    width: 48px !important;
    height: 48px !important;
  }

  body:not(:has(.marketPulse)) .policyItem h3 {
    margin: 0 !important;
    font-size: 1.08rem !important;
  }

  body:not(:has(.marketPulse)) .policyItem p {
    margin: 0 !important;
    font-size: .92rem !important;
    line-height: 1.55 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }

  body:not(:has(.marketPulse)) .policyItem small {
    grid-column: 2 !important;
    font-size: 12px !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }

  body:not(:has(.marketPulse)) .wishInspirationStrip {
    gap: 10px !important;
  }

  body:not(:has(.marketPulse)) .wishInspirationStrip .wishInspirationPhoto {
    min-height: 120px !important;
  }

  body:not(:has(.marketPulse)) .wishInspirationStrip .wishInspirationCards {
    gap: 10px !important;
  }

  body:not(:has(.marketPulse)) .wishInspirationStrip article {
    min-height: 62px !important;
    padding: 14px 16px !important;
  }

  body:not(:has(.marketPulse)) .wishInspirationStrip article small {
    display: -webkit-box !important;
    margin-top: 4px !important;
    -webkit-line-clamp: 1 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    font-size: 12px !important;
  }

  body:not(:has(.marketPulse)):not(:has(.appShell.view-wish)) .formView:has(.wishForm) > .sectionHead + * {
    max-height: 260px !important;
    overflow: hidden !important;
  }

  body:not(:has(.marketPulse)):not(:has(.appShell.view-wish)) .formView:has(.wishForm) > .sectionHead + * p {
    display: -webkit-box !important;
    -webkit-line-clamp: 4 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }

  body:not(:has(.marketPulse)):not(:has(.appShell.view-wish)) .formView:has(.wishForm) > .sectionHead + * li:nth-child(n+3) {
    display: none !important;
  }

  body:not(:has(.marketPulse)) .decisionStrip.wishDecision {
    grid-template-columns: 1fr !important;
  }

  body:not(:has(.marketPulse)) .decisionStrip.wishDecision article:not(.decisionPrimary) {
    display: none !important;
  }

  body:not(:has(.marketPulse)) .decisionStrip.mapDecision {
    grid-template-columns: 1fr !important;
  }

  body:not(:has(.marketPulse)) .decisionStrip.mapDecision article:not(.decisionPrimary) {
    display: none !important;
  }

  body:not(:has(.marketPulse)) .decisionStrip.orderDecision {
    grid-template-columns: 1fr !important;
  }

  body:not(:has(.marketPulse)) .decisionStrip.orderDecision article:not(.decisionPrimary) {
    display: none !important;
  }

  body:not(:has(.marketPulse)) .wishModePanel .sectionHead p {
    display: none !important;
  }

  body:not(:has(.marketPulse)) .wishModeGrid {
    gap: 10px !important;
  }

  body:not(:has(.marketPulse)) .wishModeCard {
    min-height: 106px !important;
    padding: 14px !important;
  }

  body:not(:has(.marketPulse)) .guestFlowNudge.wish {
    gap: 12px !important;
    padding: 18px !important;
  }

  body:not(:has(.marketPulse)) .guestFlowNudge.wish p,
  body:not(:has(.marketPulse)) .guestFlowNudge.wish ol {
    display: none !important;
  }

  body:not(:has(.marketPulse)) .wishLivePreview {
    gap: 12px !important;
    padding: 14px !important;
  }

  body:not(:has(.marketPulse)) .wishLivePreview .wishVisual {
    min-height: 172px !important;
  }

  body:not(:has(.marketPulse)) .wishLivePreview .miniLedger {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body .formView:has(.tripDecision) .decisionStrip.tripDecision article:not(.decisionPrimary) {
    display: none !important;
  }

  body .formView:has(.tripDecision) .decisionStrip.tripDecision {
    grid-template-columns: 1fr !important;
  }

  body .formView:has(.tripDecision) > .sectionHead:not(:first-child) {
    min-height: 0 !important;
    padding: 18px !important;
    border-radius: 22px !important;
    background-image: none !important;
  }

  body .formView:has(.tripDecision) > .sectionHead:not(:first-child) h2 {
    font-size: 1.45rem !important;
  }

  body .formView:has(.tripDecision) > .sectionHead:not(:first-child) p {
    font-size: .92rem !important;
    line-height: 1.55 !important;
  }

  body .formView:has(.tripDecision) .tripCard:nth-of-type(n+3) {
    display: none !important;
  }

  body .formView:has(.tripDecision) .tripCard {
    min-height: 0 !important;
    padding: 16px !important;
  }

  body .formView:has(.tripDecision) .tripCard .note,
  body .formView:has(.tripDecision) .tripCard .travelerTrustBadge,
  body .formView:has(.tripDecision) .tripCard .tagRow span:nth-child(n+4) {
    display: none !important;
  }

  body .formView:has(.tripDecision) .wishReadiness.tripReadiness {
    max-height: 164px !important;
    overflow: hidden !important;
  }

  body .formView:has(.tripDecision) .wishForm input,
  body .formView:has(.tripDecision) .wishForm select,
  body .formView:has(.tripDecision) .wishForm textarea {
    min-height: 46px !important;
  }

body:not(:has(.marketPulse)) .policyQaView {
  max-height: 760px !important;
}
}

/* BondMate 3.0 mobile density pass: keep policy and traveler workspaces app-like. */
@media (max-width: 720px) {
  body:not(:has(.marketPulse)) .policyGrid {
    display: grid !important;
    grid-auto-flow: row !important;
    grid-auto-columns: auto !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    overflow-x: visible !important;
    overscroll-behavior-inline: contain;
    scroll-snap-type: x proximity;
    padding: 2px 2px 12px !important;
    margin-inline: -2px !important;
    scrollbar-width: none;
  }

  body:not(:has(.marketPulse)) .policyGrid::-webkit-scrollbar {
    display: none;
  }

  body:not(:has(.marketPulse)) .policyItem {
    min-height: 228px !important;
    scroll-snap-align: start;
    align-content: start !important;
    box-shadow: 0 12px 30px rgba(15, 23, 42, .07) !important;
  }

  body:not(:has(.marketPulse)) .policyItem p {
    -webkit-line-clamp: 3 !important;
  }

  body:not(:has(.marketPulse)):not(:has(.appShell.view-policy)) .selfServiceGuide {
    max-height: 760px !important;
    overflow: auto !important;
    scrollbar-width: thin;
  }

  body:not(:has(.marketPulse)):not(:has(.appShell.view-policy)) .policyQaView {
    max-height: 640px !important;
    padding-bottom: 18px !important;
  }

  body:not(:has(.marketPulse)):not(:has(.appShell.view-policy)) .policyQaColumns {
    gap: 12px !important;
  }

  body:not(:has(.marketPulse)):not(:has(.appShell.view-policy)) .policyQaColumns article {
    padding: 16px !important;
    border-radius: 18px !important;
  }

  body .formView:has(.tripDecision) .tripList {
    max-height: 820px !important;
    overflow: auto !important;
    padding-right: 2px !important;
    scrollbar-width: thin;
  }

  body .formView:has(.tripDecision) .wishForm {
    max-height: min(620px, 72vh) !important;
    overflow: auto !important;
    padding-bottom: 18px !important;
    scrollbar-width: thin;
  }

  body .formView:has(.tripDecision) .tripCard {
    border-radius: 20px !important;
  }

  body .formView:has(.tripDecision) .tripCard:nth-of-type(n+3) {
    display: none !important;
  }

  body .formView:has(.tripDecision) .wishForm label {
    gap: 7px !important;
  }

  body .formView:has(.tripDecision) .wishForm label > span:first-child {
    font-size: .82rem !important;
  }

  body .formView:has(.tripDecision) .wishForm textarea {
    min-height: 94px !important;
  }

  body .formView:has(.tripDecision) .wishForm > .primaryButton.wide {
    position: static !important;
    bottom: auto !important;
    width: 100% !important;
    margin: 10px 0 0 !important;
    padding: 14px 18px !important;
    border: 0 !important;
    border-radius: 16px !important;
    color: #fff !important;
    background: linear-gradient(135deg, #ff385c, #ff6b7f) !important;
    box-shadow: 0 18px 34px rgba(255, 56, 92, .26) !important;
  }

  html[data-theme="dark"] body .formView:has(.tripDecision) .wishForm > .primaryButton.wide {
    color: #fff !important;
    background: linear-gradient(135deg, #ff385c, #ff6b7f) !important;
    box-shadow: 0 18px 34px rgba(255, 56, 92, .3) !important;
  }
}

/* BondMate 3.0 mobile hero finishing pass. */
@media (max-width: 720px) {
  html,
  body {
    max-width: 100% !important;
    overflow-x: clip !important;
  }

  body:has(.marketPulse) .heroProduct.heroSearchFirst {
    min-height: min(700px, calc(100svh - 72px)) !important;
    padding: 30px 20px 88px !important;
    gap: 14px !important;
  }

  body:has(.marketPulse) .heroProduct.heroSearchFirst h1 {
    font-size: clamp(2.08rem, 10vw, 2.82rem) !important;
    line-height: 1.02 !important;
  }

  body:has(.marketPulse) .heroProduct.heroSearchFirst p {
    font-size: .93rem !important;
    line-height: 1.58 !important;
    max-width: 31rem !important;
  }

  body:has(.marketPulse) .heroProduct.heroSearchFirst .heroSearchPanel {
    padding: 10px !important;
    gap: 7px !important;
  }

  body:has(.marketPulse) .heroProduct.heroSearchFirst .heroSearchField {
    min-height: 52px !important;
    padding: 9px 13px !important;
  }

  body:has(.marketPulse) .heroProduct.heroSearchFirst .heroSearchSubmit {
    min-height: 52px !important;
  }

  body:has(.marketPulse) .workspace {
    margin-top: -58px !important;
  }

  html[data-theme="dark"] body:has(.marketPulse) :where(.departureBoard, .trustedMembersPanel, .featuredWishStrip, .trendBoard) > .sectionHead {
    color: #f8fafc !important;
    background:
      linear-gradient(135deg, rgba(15, 23, 42, .94), rgba(17, 24, 39, .88)) !important;
    border-color: rgba(148, 163, 184, .22) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05) !important;
  }

  html[data-theme="dark"] body:has(.marketPulse) :where(.departureBoard, .trustedMembersPanel, .featuredWishStrip, .trendBoard) > .sectionHead :where(h2, h3, strong) {
    color: #f8fafc !important;
  }

  html[data-theme="dark"] body:has(.marketPulse) :where(.departureBoard, .trustedMembersPanel, .featuredWishStrip, .trendBoard) > .sectionHead :where(p, small, span) {
    color: #cbd5e1 !important;
  }

  body:not(:has(.marketPulse)) .ordersView.isEmpty .orderCards {
    min-height: 0 !important;
    display: block !important;
  }

  body:not(:has(.marketPulse)) .ordersView.isEmpty .guestFlowNudge.orders {
    min-height: 0 !important;
    gap: 14px !important;
    padding: 20px !important;
    border-radius: 24px !important;
  }

  body:not(:has(.marketPulse)) .ordersView.isEmpty .guestFlowNudge.orders p {
    margin: 0 !important;
    font-size: .95rem !important;
    line-height: 1.58 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }

  body:not(:has(.marketPulse)) .ordersView.isEmpty .guestFlowNudge.orders ol {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
    margin: 0 !important;
  }

  body:not(:has(.marketPulse)) .ordersView.isEmpty .guestFlowNudge.orders li {
    min-height: 48px !important;
    padding: 10px !important;
    border-radius: 14px !important;
    font-size: .78rem !important;
    line-height: 1.3 !important;
  }

  body:not(:has(.marketPulse)) .ordersView.isEmpty .guestFlowNudge.orders .buttonRow {
    position: static !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    margin: 0 !important;
  }

  body:not(:has(.appShell.view-wish)) .formView:has(.wishPatienceNudge) .wishForm {
    max-height: min(980px, 88vh) !important;
    overflow: auto !important;
    padding-bottom: 18px !important;
    scrollbar-width: thin;
  }

  body:not(:has(.appShell.view-wish)) .formView:has(.wishPatienceNudge) .wishForm > .splitAction:last-child {
    position: sticky !important;
    bottom: 8px !important;
    z-index: 4 !important;
    width: 100% !important;
    margin: 10px 0 0 !important;
    padding: 12px !important;
    border: 1px solid rgba(226, 232, 240, .9) !important;
    border-radius: 18px !important;
    background: rgba(255, 255, 255, .92) !important;
    box-shadow: 0 18px 36px rgba(15, 23, 42, .12) !important;
    backdrop-filter: blur(14px) !important;
  }

  html[data-theme="dark"] body:not(:has(.appShell.view-wish)) .formView:has(.wishPatienceNudge) .wishForm > .splitAction:last-child {
    border-color: rgba(148, 163, 184, .24) !important;
    background: rgba(15, 23, 42, .9) !important;
  }

  body .mapReadableView .decisionStrip.mapDecision {
    display: none !important;
  }

  body .mapReadableView .decisionStrip.mapDecision article,
  body .mapReadableView .decisionStrip.mapDecision .decisionPrimary {
    display: grid !important;
    grid-template-columns: 38px minmax(0, 1fr) !important;
    grid-template-rows: auto auto auto !important;
    align-items: center !important;
    gap: 2px 12px !important;
    min-height: 86px !important;
    padding: 14px 16px !important;
  }

  body .mapReadableView .decisionStrip.mapDecision .glyph {
    grid-row: 1 / span 3 !important;
    width: 38px !important;
    height: 38px !important;
  }

  body .mapReadableView .decisionStrip.mapDecision p {
    display: -webkit-box !important;
    -webkit-line-clamp: 1 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    font-size: .9rem !important;
  }

  body .mapReadableView .decisionStrip.mapDecision :where(span:not(.glyph), strong, small) {
    grid-column: 2 !important;
  }

  body .mapReadableView .mapFilters:first-of-type {
    margin-top: 4px !important;
  }

  body .mapReadableView .mapFilters + .mapFilters {
    display: none !important;
  }

  body .mapReadableView > .sectionHead:first-child {
    min-height: 0 !important;
    padding: 22px 18px !important;
  }

  body .mapReadableView > .sectionHead:first-child h2 {
    font-size: 2rem !important;
  }

  body .mapReadableView > .sectionHead:first-child p {
    font-size: .95rem !important;
    line-height: 1.56 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }

  body .mapReadableView .mapGuidePanel {
    min-height: 0 !important;
    gap: 12px !important;
    padding: 18px !important;
  }

  body .mapReadableView .mapGuidePanel p {
    margin: 0 !important;
    font-size: .95rem !important;
    line-height: 1.56 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }

  body .mapReadableView .mapGuidePanel .buttonRow {
    gap: 10px !important;
  }

  body .mapReadableView .mapGuidePanel :where(.primaryButton, .softButton) {
    min-height: 46px !important;
  }

  body:has(.marketPulse) .featuredWishStrip > .sectionHead h2 {
    font-size: 0 !important;
  }

  body:has(.marketPulse) .featuredWishStrip > .sectionHead h2::after {
    content: "Featured Requests";
    display: inline !important;
    font-size: 1.85rem !important;
  }

  body:has(.marketPulse) .featuredWishStrip > .sectionHead p {
    display: -webkit-box !important;
    -webkit-line-clamp: 1 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }

  body .formView:has(.tripDecision) > .sectionHead:first-of-type {
    min-height: 0 !important;
    padding: 18px !important;
  }

  body .formView:has(.tripDecision) > .sectionHead:first-of-type h2 {
    font-size: 1.82rem !important;
  }

  body .formView:has(.tripDecision) > .sectionHead:first-of-type p {
    -webkit-line-clamp: 2 !important;
  }

  body .formView:has(.tripDecision) .travelerRelayHero {
    height: 154px !important;
    max-height: 154px !important;
    min-height: 0 !important;
    padding: 16px !important;
    overflow: hidden !important;
  }

  body .formView:has(.tripDecision) .travelerRelayHero p {
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }

  body .formView:has(.tripDecision) .matchList.workbench {
    max-height: 86px !important;
    overflow: hidden !important;
  }

  body .formView:has(.tripDecision) .matchList.workbench + .sectionHead,
  body .formView:has(.tripDecision) .matchList.workbench + .sectionHead + .matchList.workbench {
    display: none !important;
  }

  body .formView:has(.tripDecision) .tripSummary {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 0 !important;
    max-height: 146px !important;
    overflow: hidden !important;
  }

  body .formView:has(.tripDecision) .tripSummary button,
  body .formView:has(.tripDecision) .tripSummary article,
  body .formView:has(.tripDecision) .tripSummary > * {
    min-height: 62px !important;
    padding: 10px !important;
  }

  body .formView:has(.tripDecision) .tripFilters {
    display: flex !important;
    gap: 8px !important;
    max-height: 54px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding: 2px 2px 8px !important;
    scrollbar-width: none;
  }

  body .formView:has(.tripDecision) .tripFilters::-webkit-scrollbar {
    display: none;
  }

  body .formView:has(.tripDecision) .tripFilters button,
  body .formView:has(.tripDecision) .tripFilters select,
  body .formView:has(.tripDecision) .tripFilters input {
    flex: 0 0 auto !important;
    min-height: 42px !important;
    min-width: max-content !important;
  }

  body .formView:has(.tripDecision) .tripList {
    max-height: 520px !important;
  }

  body .formView:has(.tripDecision) .wishReadiness.tripReadiness {
    display: none !important;
  }

  body .formView:has(.tripDecision) .wishForm {
    max-height: min(540px, 64vh) !important;
  }

  body:has(.marketPulse) .marketPulse {
    max-height: 980px !important;
  }

  body:has(.marketPulse) .departureBoard {
    max-height: 360px !important;
  }

  body:has(.marketPulse) .trustedMembersPanel {
    max-height: 310px !important;
  }

  body:has(.marketPulse) .viewGrid > section {
    max-height: 360px !important;
  }

  body:has(.marketPulse) .viewGrid .tripList,
  body:has(.marketPulse) .viewGrid .matchList {
    max-height: 224px !important;
  }

  body:not(:has(.marketPulse)) .selfServiceGuide {
    max-height: 560px !important;
    gap: 12px !important;
    padding: 18px !important;
  }

  body:not(:has(.marketPulse)):not(:has(.appShell.view-policy)) .selfServiceGuide .sectionHead,
  body:not(:has(.marketPulse)):not(:has(.appShell.view-policy)) .policyQaView .sectionHead {
    min-height: 0 !important;
    padding: 16px !important;
    border-radius: 20px !important;
  }

  body:not(:has(.marketPulse)) .selfServiceGuide .sectionHead h2,
  body:not(:has(.marketPulse)) .policyQaView .sectionHead h2 {
    font-size: 1.7rem !important;
  }

  body:not(:has(.marketPulse)):not(:has(.appShell.view-policy)) .selfServiceGuide .sectionHead p,
  body:not(:has(.marketPulse)):not(:has(.appShell.view-policy)) .policyQaView .sectionHead p {
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }

  body:not(:has(.marketPulse)) .selfServiceTabs {
    display: flex !important;
    gap: 8px !important;
    overflow-x: auto !important;
    padding-bottom: 8px !important;
    scrollbar-width: none;
  }

  body:not(:has(.marketPulse)) .selfServiceTabs::-webkit-scrollbar {
    display: none;
  }

  body:not(:has(.marketPulse)) .selfServiceTabs button {
    flex: 0 0 auto !important;
    min-height: 40px !important;
    padding: 9px 12px !important;
  }

  body:not(:has(.marketPulse)):not(:has(.appShell.view-policy)) .selfServiceGuide .supportCard {
    padding: 16px !important;
    border-radius: 20px !important;
  }

  body:not(:has(.marketPulse)) .selfServiceGuide .supportCard p,
  body:not(:has(.marketPulse)) .selfServiceGuide .supportCard ol {
    font-size: .92rem !important;
    line-height: 1.55 !important;
  }

  body:not(:has(.marketPulse)) .selfServiceGuide .supportCard li:nth-child(n+4) {
    display: none !important;
  }

  body:not(:has(.marketPulse)) .policyQaView {
    max-height: 520px !important;
    gap: 12px !important;
    overflow: auto !important;
  }

  body:not(:has(.marketPulse)) .policyQaList {
    display: grid !important;
    gap: 10px !important;
  }

  body:not(:has(.marketPulse)) .policyQaList article,
  body:not(:has(.marketPulse)) .policyQaView article {
    padding: 16px !important;
    border-radius: 18px !important;
  }

  body:not(:has(.marketPulse)) .policyQaList article:nth-child(n+4),
  body:not(:has(.marketPulse)) .policyQaView article:nth-of-type(n+4) {
    display: none !important;
  }

  body:not(:has(.marketPulse)) .policyQaView article p {
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }

  body:not(:has(.marketPulse)) .policyQaView .policyQaColumns {
    display: none !important;
  }

  body .accountView.guestAccount.standaloneGuestAccount {
    gap: 14px !important;
  }

  body .accountView.guestAccount.standaloneGuestAccount .guestAccountEntry {
    min-height: 276px !important;
    padding: 22px !important;
  }

  body .accountView.guestAccount.standaloneGuestAccount .guestAccountEntry::after {
    content: "AI Match Assistant\A 8 \4f4d\7b26\5408\65c5\4eba\A 91% \5e73\5747\5a92\5408\6210\529f\7387\A 18 hr \6700\5feb\8fd4\53f0" !important;
    left: 20px !important;
    right: 20px !important;
    bottom: 20px !important;
    max-width: none !important;
    padding: 14px !important;
    font-size: .94rem !important;
    line-height: 1.45 !important;
  }

  body .accountView.guestAccount.standaloneGuestAccount .guestAccountEntry h3 {
    margin-block: 10px !important;
    font-size: 1.82rem !important;
  }

  body .accountView.guestAccount.standaloneGuestAccount .guestAccountEntry p {
    font-size: .98rem !important;
    line-height: 1.6 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }

  body .accountView.guestAccount.standaloneGuestAccount .standaloneLoginForm {
    min-height: 292px !important;
    gap: 10px !important;
    padding: 18px !important;
  }

  body .accountView.guestAccount.standaloneGuestAccount .authModeTabs {
    gap: 8px !important;
    margin-bottom: 4px !important;
  }

  body .accountView.guestAccount.standaloneGuestAccount .authModeTabs button,
  body .accountView.guestAccount.standaloneGuestAccount .standaloneLoginForm .primaryButton {
    min-height: 44px !important;
  }

  body .accountView.guestAccount.standaloneGuestAccount .standaloneLoginForm label {
    gap: 5px !important;
  }

  body .accountView.guestAccount.standaloneGuestAccount .standaloneLoginForm input,
  body .accountView.guestAccount.standaloneGuestAccount .standaloneLoginForm select {
    min-height: 48px !important;
  }

  body .accountView.guestAccount.standaloneGuestAccount .forgotPasswordInline {
    min-height: 24px !important;
  }
}

/* BondMate 3.0 final policy desktop tightening overrides. */
@media (min-width: 721px) {
  body:not(:has(.marketPulse)) .selfServiceGuide {
    max-height: 480px !important;
    overflow: auto !important;
  }

  body:not(:has(.marketPulse)) .policyQaView {
    height: auto !important;
    max-height: 560px !important;
    overflow: auto !important;
  }

  body:not(:has(.marketPulse)) .panel > .policyQaView,
  body:not(:has(.marketPulse)) .workspace .policyQaView {
    height: auto !important;
    max-height: 560px !important;
    overflow: auto !important;
  }

  body:not(:has(.marketPulse)) .policyQaView .policyQaColumns {
    display: none !important;
  }
}

/* BondMate 3.0 final mobile policy rhythm and overflow pass. */
@media (max-width: 720px) {
  html,
  body {
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  body:not(:has(.marketPulse)) .panel > section .adminColumns {
    max-height: 340px !important;
    gap: 12px !important;
    overflow: auto !important;
    overscroll-behavior: contain;
  }

  body:not(:has(.marketPulse)) .panel > section .adminColumns > div {
    padding: 14px !important;
    border-radius: 18px !important;
  }

  body:not(:has(.marketPulse)) .panel > section .adminColumns h3 {
    margin: -14px -14px 10px !important;
    padding: 14px !important;
  }

  body:not(:has(.marketPulse)) .panel > section .adminColumns p,
  body:not(:has(.marketPulse)) .panel > section .adminColumns small,
  body:not(:has(.marketPulse)) .panel > section .adminColumns .compactList span {
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }

  body .featuredWishStrip,
  body .filters.mapFilters,
  body .countryGrid.readableCountries,
  body .selfServiceTabs {
    width: 100% !important;
    max-width: 100% !important;
    margin-inline: 0 !important;
  }
}

/* BondMate 3.0 desktop marketplace and traveler workbench rhythm pass. */
@media (min-width: 1100px) {
  body:has(.marketPulse) :where(.heroProduct.heroSearchFirst, .heroSearchFirst) {
    min-height: 720px !important;
    padding-block: 72px 58px !important;
  }

  body:has(.marketPulse) .marketPulse {
    max-height: 820px !important;
    overflow: auto !important;
  }

  body:has(.marketPulse) .marketPulseGrid {
    align-items: start !important;
  }

  body:has(.marketPulse) .pulseFeed,
  body:has(.marketPulse) .pulseTrips {
    max-height: 560px !important;
    overflow: auto !important;
    scrollbar-width: thin;
  }

  body:has(.marketPulse) .pulseCountryRail {
    max-height: 280px !important;
    overflow: auto !important;
  }

  body:has(.marketPulse) :where(.departureBoard, .trendBoard, .featuredWishStrip, .trustedMembersPanel, .viewGrid > section) {
    max-height: 430px !important;
    overflow: auto !important;
    scrollbar-width: thin;
  }

  body:has(.marketPulse) :where(.departureBoard, .trendBoard, .featuredWishStrip, .trustedMembersPanel, .viewGrid > section) > .sectionHead {
    min-height: 0 !important;
    margin-bottom: 14px !important;
    padding: 18px 20px !important;
  }

  body:has(.marketPulse) :where(.departureBoard, .trendBoard, .featuredWishStrip, .trustedMembersPanel, .viewGrid > section) > .sectionHead h2 {
    font-size: 1.65rem !important;
  }

  body:has(.marketPulse) :where(.departureBoard, .trendBoard, .featuredWishStrip, .trustedMembersPanel, .viewGrid > section) > .sectionHead p {
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }

  body:has(.marketPulse) .viewGrid .tripList,
  body:has(.marketPulse) .viewGrid .matchList {
    max-height: 300px !important;
    overflow: auto !important;
    scrollbar-width: thin;
  }

  body .formView:has(.tripDecision) {
    gap: 16px !important;
  }

  body .formView:has(.tripDecision) > .sectionHead {
    min-height: 0 !important;
    margin: 8px 0 8px !important;
    padding: 16px 18px !important;
  }

  body .formView:has(.tripDecision) > .sectionHead h2 {
    font-size: 1.58rem !important;
  }

  body .formView:has(.tripDecision) > .sectionHead p {
    display: -webkit-box !important;
    -webkit-line-clamp: 1 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }

  body .formView:has(.tripDecision) .travelerRelayHero {
    height: 116px !important;
    min-height: 0 !important;
    max-height: 116px !important;
    padding: 14px 18px !important;
    overflow: hidden !important;
  }

  body .formView:has(.tripDecision) .decisionStrip.tripDecision {
    max-height: 96px !important;
    overflow: hidden !important;
  }

  body .formView:has(.tripDecision) .matchList.workbench {
    max-height: 78px !important;
    overflow: hidden !important;
  }

  body .formView:has(.tripDecision) .tripSummary {
    max-height: 112px !important;
    overflow: hidden !important;
  }

  body .formView:has(.tripDecision) .tripList {
    max-height: 520px !important;
    overflow: auto !important;
    scrollbar-width: thin;
  }

  body .formView:has(.tripDecision) .wishReadiness.tripReadiness {
    display: none !important;
  }

  body .formView:has(.tripDecision) .wishForm {
    max-height: 520px !important;
    overflow: auto !important;
    scrollbar-width: thin;
  }
}

/* BondMate 3.0 compact hero refinement for desktop marketplace. */
@media (min-width: 1100px) {
  body:not(:has(.marketPulse)) .panel > .formView:has(.tripDecision) > .sectionHead {
    min-height: 0 !important;
    height: auto !important;
    max-height: 126px !important;
    margin: 6px 0 8px !important;
    padding: 16px 20px !important;
    overflow: hidden !important;
  }

  body:not(:has(.marketPulse)) .panel > .formView:has(.tripDecision) > .sectionHead h2 {
    font-size: 1.7rem !important;
    line-height: 1.08 !important;
  }

  body:not(:has(.marketPulse)) .panel > .formView:has(.tripDecision) > .sectionHead p {
    display: -webkit-box !important;
    -webkit-line-clamp: 1 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }

  body:not(:has(.marketPulse)) .panel > .formView:has(.tripDecision) > .matchList.workbench + .sectionHead,
  body:not(:has(.marketPulse)) .panel > .formView:has(.tripDecision) > .matchList.workbench + .sectionHead + .matchList.workbench {
    display: none !important;
  }

  body:not(:has(.marketPulse)) .panel > .formView:has(.tripDecision) > .sectionHead:nth-child(7) {
    display: flex !important;
  }

  body:not(:has(.marketPulse)) .panel > .formView:has(.tripDecision) > .matchList.workbench:nth-child(6) + .sectionHead {
    display: flex !important;
  }

  body:not(:has(.marketPulse)) .panel > .formView:has(.tripDecision) > .travelerRelayHero {
    max-height: 104px !important;
  }

  body:not(:has(.marketPulse)) .panel > .formView:has(.tripDecision) > .wishForm {
    max-height: 560px !important;
    padding-bottom: 72px !important;
  }

  body:has(.marketPulse) .heroProduct.heroSearchFirst {
    min-height: 660px !important;
    padding: 56px !important;
  }

  body:has(.marketPulse) .heroProduct.heroSearchFirst .heroCopy {
    gap: 10px !important;
  }

  body:has(.marketPulse) .heroProduct.heroSearchFirst h1 {
    margin-bottom: 14px !important;
    font-size: 0 !important;
    line-height: 0 !important;
  }

  body:has(.marketPulse) .heroProduct.heroSearchFirst h1::before {
    display: block !important;
    font-size: clamp(2.7rem, 3.7vw, 3.9rem) !important;
    line-height: 1 !important;
  }

  body:has(.marketPulse) .heroProduct.heroSearchFirst p {
    max-width: 56ch !important;
    margin-block: 8px 10px !important;
    font-size: 1.02rem !important;
    line-height: 1.62 !important;
  }

  body:has(.marketPulse) .heroProduct.heroSearchFirst .heroSearchPanel {
    margin-top: 18px !important;
    padding: 10px !important;
    gap: 8px !important;
  }

  body:has(.marketPulse) .heroProduct.heroSearchFirst .heroSearchField {
    min-height: 56px !important;
    padding: 10px 12px !important;
  }

  body:has(.marketPulse) .heroProduct.heroSearchFirst .heroSearchSubmit {
    min-height: 56px !important;
  }

  body:has(.marketPulse) .heroProduct.heroSearchFirst .heroActions,
  body:has(.marketPulse) .heroProduct.heroSearchFirst .miniCountryPills {
    margin-block: 8px 0 !important;
  }

  body:has(.marketPulse) .heroProduct.heroSearchFirst .marketplaceHeroPanel {
    max-height: 460px !important;
    padding: 22px !important;
  }
}

/* BondMate 3.0 mobile marketplace polish pass. */
@media (max-width: 720px) {
  body:has(.marketPulse) .heroProduct.heroSearchFirst {
    min-height: 620px !important;
    padding: 26px 18px 58px !important;
  }

  body:has(.marketPulse) .heroProduct.heroSearchFirst h1::before {
    font-size: clamp(2rem, 9vw, 2.46rem) !important;
    line-height: 1.03 !important;
  }

  body:has(.marketPulse) .heroProduct.heroSearchFirst p {
    -webkit-line-clamp: 2 !important;
    font-size: .92rem !important;
    line-height: 1.55 !important;
  }

  body:has(.marketPulse) .heroProduct.heroSearchFirst .heroSearchPanel {
    margin-top: 12px !important;
    padding: 9px !important;
    gap: 7px !important;
  }

  body:has(.marketPulse) .heroProduct.heroSearchFirst .heroSearchField,
  body:has(.marketPulse) .heroProduct.heroSearchFirst .heroSearchSubmit {
    min-height: 50px !important;
  }

  body:has(.marketPulse) .heroProduct.heroSearchFirst .heroActions,
  body:has(.marketPulse) .heroProduct.heroSearchFirst .miniCountryPills {
    display: none !important;
  }

  body:has(.marketPulse) .marketPulse {
    max-height: 700px !important;
    padding: 18px !important;
  }

  body:has(.marketPulse) .marketPulseHead {
    min-height: 0 !important;
    height: auto !important;
    max-height: 210px !important;
    gap: 12px !important;
    padding: 18px !important;
    overflow: hidden !important;
  }

  body:has(.marketPulse) .marketPulseHead h2 {
    font-size: clamp(2.05rem, 10vw, 2.7rem) !important;
    line-height: 1.02 !important;
  }

  body:has(.marketPulse) .marketPulseHead p {
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }

  body:has(.marketPulse) .liveStatsStrip {
    max-height: 132px !important;
    overflow: hidden !important;
  }

  body:has(.marketPulse) .marketPulseGrid {
    gap: 12px !important;
  }

  body:has(.marketPulse) .pulseFeed,
  body:has(.marketPulse) .pulseTrips {
    max-height: 220px !important;
    overflow: auto !important;
    scrollbar-width: none;
  }

  body:has(.marketPulse) .pulseTrips {
    display: none !important;
  }

  body:has(.marketPulse) .pulseFeed .pulseItem:nth-of-type(n+3),
  body:has(.marketPulse) .pulseTrips .pulseItem:nth-of-type(n+3) {
    display: none !important;
  }

  body:has(.marketPulse) .pulseFeed .pulseItem:nth-of-type(n+2) {
    display: none !important;
  }

  body:has(.marketPulse) .pulseFeed .pulseItem {
    min-height: 0 !important;
    height: auto !important;
    padding: 12px !important;
  }

  body:has(.marketPulse) .pulseCountryRail {
    display: grid !important;
    max-height: 150px !important;
    overflow: auto !important;
    scrollbar-width: none;
  }

  body:has(.marketPulse) .featuredWishStrip {
    max-height: 320px !important;
    padding: 18px !important;
  }

  body:has(.marketPulse) .featuredWishScroller {
    height: auto !important;
    max-height: 270px !important;
    overflow: hidden !important;
  }

  body:has(.marketPulse) .featuredWishCard {
    min-height: 0 !important;
    height: 252px !important;
    grid-template-rows: 138px auto !important;
    overflow: hidden !important;
  }

  body:has(.marketPulse) .featuredWishCard .wishVisual {
    height: 138px !important;
    min-height: 0 !important;
  }

  body:has(.marketPulse) .featuredWishCard .wishVisualPlaceholder {
    transform: none !important;
    height: 100% !important;
    min-height: 0 !important;
    align-content: center !important;
  }

  body:has(.marketPulse) .featuredWishCard > div:last-child {
    gap: 4px !important;
    padding: 10px 12px !important;
  }

  body:has(.marketPulse) .featuredWishCard > div:last-child strong {
    display: -webkit-box !important;
    -webkit-line-clamp: 1 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }
}

@media (min-width: 721px) {
  body:has(.marketPulse) .featuredWishCard .wishVisualPlaceholder {
    transform: none !important;
    height: 100% !important;
    min-height: 0 !important;
    align-content: center !important;
  }
}

/* BondMate 3.0 dark-mode contrast and mobile nav polish pass. */
html[data-theme="dark"] body {
  background:
    radial-gradient(circle at 16% 0%, rgba(20, 184, 166, .13), transparent 30%),
    linear-gradient(180deg, #07101f 0%, #0b1220 54%, #08111d 100%) !important;
}

html[data-theme="dark"] body :where(.heroSearchPanel, .marketPulseHead, .liveStatsStrip, .pulseFeed, .pulseTrips, .pulseCountryRail, .featuredWishStrip, .trustedMembersPanel, .departureBoard, .trendBoard, .viewGrid > section) {
  border-color: rgba(148, 163, 184, .2) !important;
  background: rgba(15, 23, 42, .78) !important;
  box-shadow: 0 18px 44px rgba(0, 0, 0, .22) !important;
}

html[data-theme="dark"] body :where(.heroSearchField, .heroSearchPanel input, .heroSearchPanel select, .formView input, .formView select, .formView textarea, .loginForm input, .loginForm select, .standaloneLoginForm input, .standaloneLoginForm select) {
  color: #f8fafc !important;
  border-color: rgba(148, 163, 184, .3) !important;
  background: rgba(2, 6, 23, .48) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04) !important;
}

html[data-theme="dark"] body :where(.heroSearchField span, .heroSearchField small, .miniMeta, .featuredWishCard small, .pulseItem small, .tripCard small, .matchCard small, .sectionHead p) {
  color: rgba(226, 232, 240, .78) !important;
}

html[data-theme="dark"] body:has(.marketPulse) .featuredWishCard .wishVisual {
  border-color: rgba(94, 234, 212, .18) !important;
  background:
    linear-gradient(180deg, rgba(15, 23, 42, .18), rgba(15, 23, 42, .72)),
    linear-gradient(135deg, rgba(20, 184, 166, .18), rgba(255, 56, 92, .10)) !important;
}

html[data-theme="dark"] body:has(.marketPulse) .featuredWishCard .wishVisualPlaceholder {
  color: #f8fafc !important;
}

html[data-theme="dark"] body:has(.marketPulse) .featuredWishCard .wishVisualPlaceholder strong {
  color: #0f172a !important;
  background: rgba(248, 250, 252, .96) !important;
  box-shadow: 0 12px 28px rgba(0, 0, 0, .28) !important;
}

html[data-theme="dark"] body:has(.marketPulse) .featuredWishCard > div:last-child {
  background: rgba(15, 23, 42, .94) !important;
}

html[data-theme="dark"] body .mobileActionBar {
  border-color: rgba(148, 163, 184, .22) !important;
  background: rgba(15, 23, 42, .88) !important;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .42) !important;
  backdrop-filter: blur(22px) saturate(1.18) !important;
}

html[data-theme="dark"] body .mobileActionBar button {
  color: rgba(226, 232, 240, .74) !important;
}

html[data-theme="dark"] body .mobileActionBar button.active,
html[data-theme="dark"] body .mobileActionBar button[aria-current="page"] {
  color: #f8fafc !important;
  background: rgba(255, 56, 92, .18) !important;
}

@media (max-width: 720px) {
  body:not(:has(.marketPulse)) .workspace,
  body:has(.marketPulse) .workspace {
    padding-bottom: 126px !important;
  }

  body .mobileActionBar {
    min-height: 64px !important;
    height: 64px !important;
    padding: 7px 10px !important;
    border-radius: 22px !important;
  }

  body .mobileActionBar button {
    min-height: 48px !important;
    gap: 3px !important;
    padding: 5px 6px !important;
    border-radius: 16px !important;
    font-size: .68rem !important;
  }

  body .mobileActionBar svg,
  body .mobileActionBar .navIcon {
    width: 19px !important;
    height: 19px !important;
  }

  html[data-theme="dark"] body .mobileActionBar {
    left: 12px !important;
    right: 12px !important;
    bottom: max(8px, env(safe-area-inset-bottom)) !important;
  }
}

/* BondMate 3.0 map and wish density pass. */
@media (max-width: 720px) {
  body .mapReadableView > .sectionHead:first-child {
    min-height: 0 !important;
    max-height: 146px !important;
    padding: 18px !important;
  }

  body .mapReadableView .mapGuidePanel {
    max-height: 230px !important;
    padding: 18px !important;
    overflow: hidden !important;
  }

  body .mapReadableView .mapGuidePanel p {
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }

  body .mapReadableView .countryGrid.readableCountries .adminTile {
    min-height: 158px !important;
    max-height: 158px !important;
  }

  body .mapReadableView .areaHumanBoard {
    gap: 16px !important;
  }

  body .mapReadableView .areaSpotlight {
    max-height: 430px !important;
    overflow: auto !important;
  }

  body .mapReadableView .areaSpotlight > .sectionHead.tight {
    min-height: 0 !important;
    max-height: 78px !important;
    padding: 14px !important;
    overflow: hidden !important;
  }

  body .mapReadableView .areaSpotlight > .sectionHead.tight p {
    display: none !important;
  }

  body .mapReadableView .areaHumanCard {
    min-height: 0 !important;
    max-height: 154px !important;
    padding: 14px !important;
    border-radius: 20px !important;
    overflow: hidden !important;
  }

  body .mapReadableView .areaHumanCard p {
    display: -webkit-box !important;
    -webkit-line-clamp: 1 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }

  body .mapReadableView .areaHumanCard .buttonRow,
  body .mapReadableView .areaHumanCard small {
    display: none !important;
  }

  body .mapReadableView .areaSpotlight article:nth-of-type(n+3),
  body .mapReadableView .areaSpotlight .areaCard:nth-of-type(n+3) {
    display: none !important;
  }

  body .mapReadableView .areaDirectory {
    max-height: 420px !important;
    overflow: auto !important;
  }

  body .mapReadableView .areaDirectory .areaRow,
  body .mapReadableView .areaDirectory article {
    padding: 14px !important;
    border-radius: 18px !important;
  }

  body .formView:has(.wishPatienceNudge) > .sectionHead:first-child {
    min-height: 0 !important;
    max-height: 128px !important;
    padding: 18px !important;
  }

  body .formView:has(.wishPatienceNudge) .wishPatienceNudge {
    height: auto !important;
    max-height: 176px !important;
    padding: 18px !important;
    overflow: hidden !important;
  }

  body:not(:has(.marketPulse)):not(:has(.appShell.view-wish)) .formView:has(.wishPatienceNudge) > .wishPatienceNudge,
  body:not(:has(.marketPulse)):not(:has(.appShell.view-wish)) .formView:has(.wishForm) > .sectionHead + .wishPatienceNudge {
    height: auto !important;
    max-height: 176px !important;
    overflow: hidden !important;
  }

  body .formView:has(.wishPatienceNudge) .wishPatienceNudge strong {
    font-size: 1.28rem !important;
    line-height: 1.12 !important;
  }

  body .formView:has(.wishPatienceNudge) .wishPatienceNudge p {
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }

  body .formView:has(.wishPatienceNudge) .wishPatienceNudge li:nth-child(n+3) {
    display: none !important;
  }

  body .formView:has(.wishPatienceNudge) .wishPatienceNudge .softButton,
  body .formView:has(.wishPatienceNudge) .wishPatienceNudge > button {
    display: none !important;
  }

  body .formView:has(.wishPatienceNudge) .wishInspirationStrip {
    max-height: 260px !important;
    overflow: hidden !important;
  }

  body .formView:has(.wishPatienceNudge) .wishInspirationStrip .wishInspirationPhoto {
    height: 106px !important;
    min-height: 106px !important;
  }

  body .formView:has(.wishPatienceNudge) .wishInspirationStrip article:nth-child(n+3) {
    display: none !important;
  }

  body .formView:has(.wishPatienceNudge) .wishModePanel {
    max-height: 240px !important;
    padding: 16px !important;
    overflow: hidden !important;
  }

  body .formView:has(.wishPatienceNudge) .wishModePanel .sectionHead {
    display: none !important;
  }

  body .formView:has(.wishPatienceNudge) .wishModeGrid {
    gap: 10px !important;
  }

  body .formView:has(.wishPatienceNudge) .wishModeCard {
    min-height: 76px !important;
    padding: 12px !important;
  }

  body .formView:has(.wishPatienceNudge) .wishModeCard small {
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }
}

@media (min-width: 1100px) {
  body .mapReadableView .areaSpotlight,
  body .mapReadableView .areaDirectory {
    max-height: 680px !important;
    overflow: auto !important;
  }

  body .mapReadableView .mapGuidePanel {
    max-height: 260px !important;
    overflow: hidden !important;
  }

  body:not(:has(.appShell.view-wish)) .formView:has(.wishPatienceNudge) .wishForm {
    max-height: 1500px !important;
  }

  body:not(:has(.appShell.view-wish)) .formView:has(.wishPatienceNudge) .wishLivePreview.wide {
    max-height: 520px !important;
    overflow: auto !important;
  }

  body:not(:has(.appShell.view-wish)) .formView:has(.wishPatienceNudge) .wishCostBreakdown.wide {
    max-height: 340px !important;
    overflow: auto !important;
  }
}

/* BondMate 3.0 secondary trust pages polish pass. */
@media (max-width: 720px) {
  body:not(:has(.marketPulse)) .ordersView.isEmpty {
    padding-bottom: 34px !important;
  }

  body:not(:has(.marketPulse)) .ordersView.isEmpty > .sectionHead {
    min-height: 0 !important;
    max-height: 110px !important;
    padding: 18px !important;
  }

  body:not(:has(.marketPulse)) .ordersView.isEmpty .decisionStrip.orderDecision {
    max-height: 112px !important;
    overflow: hidden !important;
  }

  body:not(:has(.marketPulse)) .ordersView.isEmpty .orderSummary {
    max-height: 146px !important;
    overflow: hidden !important;
  }

  body:not(:has(.marketPulse)) .ordersView.isEmpty .guestFlowNudge.orders {
    min-height: 0 !important;
    max-height: 236px !important;
    padding: 18px 18px 88px !important;
    overflow: hidden !important;
  }

  body:not(:has(.marketPulse)) .ordersView.isEmpty .guestFlowNudge.orders p {
    -webkit-line-clamp: 2 !important;
  }

  body:not(:has(.marketPulse)) .ordersView.isEmpty .guestFlowNudge.orders ol,
  body:not(:has(.marketPulse)) .ordersView.isEmpty .guestFlowNudge.orders li:nth-child(n+3) {
    display: none !important;
  }

  body .accountView.guestAccount.standaloneGuestAccount {
    gap: 12px !important;
    padding-bottom: 18px !important;
  }

  body .accountView.guestAccount.standaloneGuestAccount .guestAccountEntry {
    min-height: 270px !important;
    padding: 18px !important;
  }

  body .accountView.guestAccount.standaloneGuestAccount .guestAccountEntry h3 {
    font-size: 1.58rem !important;
    line-height: 1.08 !important;
  }

  body .accountView.guestAccount.standaloneGuestAccount .guestAccountEntry::after {
    padding: 12px !important;
    font-size: .86rem !important;
    line-height: 1.34 !important;
  }

  body .accountView.guestAccount.standaloneGuestAccount .standaloneLoginForm {
    min-height: 330px !important;
    gap: 8px !important;
    padding: 16px !important;
    padding-bottom: 18px !important;
  }

  body .accountView.guestAccount.standaloneGuestAccount .standaloneLoginForm input,
  body .accountView.guestAccount.standaloneGuestAccount .standaloneLoginForm select {
    min-height: 44px !important;
  }

  body .accountView.guestAccount.standaloneGuestAccount .standaloneLoginForm .primaryButton {
    margin-top: 2px !important;
  }

  body:not(:has(.marketPulse)):not(:has(.appShell.view-policy)) .selfServiceGuide {
    max-height: 500px !important;
  }

  body:not(:has(.marketPulse)):not(:has(.appShell.view-policy)) .policyQaView {
    max-height: 470px !important;
  }

  body:not(:has(.marketPulse)):not(:has(.appShell.view-policy)) .selfServiceGuide .sectionHead,
  body:not(:has(.marketPulse)):not(:has(.appShell.view-policy)) .policyQaView .sectionHead {
    min-height: 0 !important;
    max-height: 118px !important;
    padding: 18px !important;
  }

  body:not(:has(.marketPulse)) .selfServiceGuide .sectionHead p,
  body:not(:has(.marketPulse)) .policyQaView .sectionHead p {
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }

  body:not(:has(.marketPulse)) .selfServiceGuide .supportCard {
    max-height: 250px !important;
    overflow: auto !important;
  }

  body:not(:has(.marketPulse)):not(:has(.appShell.view-policy)) .policyQaView .faqSearchBox {
    max-height: 112px !important;
    overflow: hidden !important;
  }

  body:not(:has(.marketPulse)) .policyFaqGrid article p {
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }
}

@media (min-width: 1100px) {
  body:not(:has(.marketPulse)) .ordersView.isEmpty .guestFlowNudge.orders {
    max-height: 124px !important;
    overflow: hidden !important;
  }

  body:not(:has(.marketPulse)) .ordersView.isEmpty .guestFlowNudge.orders ol {
    display: none !important;
  }

  body .accountView.guestAccount.standaloneGuestAccount .standaloneLoginForm {
    max-height: 480px !important;
    overflow: hidden !important;
  }

  body:not(:has(.marketPulse)):not(:has(.appShell.view-policy)) .selfServiceGuide {
    max-height: 440px !important;
  }

  body:not(:has(.marketPulse)):not(:has(.appShell.view-policy)) .policyQaView,
  body:not(:has(.marketPulse)):not(:has(.appShell.view-policy)) .panel > .policyQaView,
  body:not(:has(.marketPulse)):not(:has(.appShell.view-policy)) .workspace .policyQaView {
    max-height: 520px !important;
  }
}

/* BondMate 3.0 interaction state system pass. */
:root {
  --bm-focus-ring: rgba(255, 56, 92, .34);
  --bm-focus-core: rgba(255, 255, 255, .92);
  --bm-press-shadow: 0 8px 22px rgba(15, 23, 42, .10);
  --bm-disabled-bg: rgba(148, 163, 184, .16);
  --bm-disabled-text: rgba(100, 116, 139, .72);
  --bm-skeleton-a: rgba(226, 232, 240, .62);
  --bm-skeleton-b: rgba(248, 250, 252, .94);
}

html[data-theme="dark"] {
  --bm-focus-ring: rgba(255, 56, 92, .42);
  --bm-focus-core: rgba(15, 23, 42, .92);
  --bm-press-shadow: 0 8px 26px rgba(0, 0, 0, .32);
  --bm-disabled-bg: rgba(51, 65, 85, .34);
  --bm-disabled-text: rgba(148, 163, 184, .66);
  --bm-skeleton-a: rgba(30, 41, 59, .72);
  --bm-skeleton-b: rgba(51, 65, 85, .52);
}

body :where(button, a, input, select, textarea, [tabindex]):focus {
  outline: none !important;
}

body :where(button, a, input, select, textarea, [tabindex]):focus-visible {
  outline: none !important;
  box-shadow:
    0 0 0 2px var(--bm-focus-core),
    0 0 0 6px var(--bm-focus-ring),
    var(--bm-press-shadow) !important;
  border-color: rgba(255, 56, 92, .72) !important;
}

body :where(.rail button, .tabs button, .filters button, .selfServiceTabs button, .accountSectionTabs button, .mobileDetailTabs button, .tripSummary button, .orderSummary button, .mobileActionBar button):focus-visible {
  transform: translateY(-1px) !important;
}

body :where(.primaryButton, .heroSearchSubmit, button[type="submit"], .softButton, .tinyButton, .ghostButton, .wishModeCard, .countryCard, .tripCard, .matchCard, .pulseItem, .trustedMemberCard, .areaHumanCard, .adminTile, .policyItem) {
  transition:
    transform .18s ease,
    box-shadow .18s ease,
    border-color .18s ease,
    background-color .18s ease,
    color .18s ease,
    opacity .18s ease !important;
}

body :where(.primaryButton, .heroSearchSubmit, button[type="submit"], .softButton, .tinyButton, .ghostButton):active:not(:disabled),
body :where(.wishModeCard, .countryCard, .tripCard, .matchCard, .pulseItem, .trustedMemberCard, .areaHumanCard, .adminTile, .policyItem):active {
  transform: translateY(0) scale(.985) !important;
  box-shadow: var(--bm-press-shadow) !important;
}

body :where(.primaryButton, .heroSearchSubmit, button[type="submit"]):hover:not(:disabled) {
  filter: saturate(1.04) brightness(1.02) !important;
}

body :where(.softButton, .tinyButton, .ghostButton, .filters button, .selfServiceTabs button, .accountSectionTabs button, .mobileDetailTabs button):hover:not(:disabled) {
  border-color: rgba(20, 184, 166, .34) !important;
  background: rgba(20, 184, 166, .08) !important;
}

body :where(.filters button.active, .selfServiceTabs button.active, .accountSectionTabs button.active, .mobileDetailTabs button.active, .tripSummary button.active, .orderSummary button.active, .wishModeCard.active) {
  border-color: rgba(255, 56, 92, .44) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .24),
    0 12px 28px rgba(255, 56, 92, .13) !important;
}

body :where(button, .primaryButton, .softButton, .tinyButton, .ghostButton, input, select, textarea):disabled,
body :where(button, .primaryButton, .softButton, .tinyButton, .ghostButton)[aria-disabled="true"] {
  cursor: not-allowed !important;
  color: var(--bm-disabled-text) !important;
  border-color: rgba(148, 163, 184, .24) !important;
  background: var(--bm-disabled-bg) !important;
  box-shadow: none !important;
  filter: grayscale(.18) !important;
  transform: none !important;
}

body :where(.loadingStatePanel, .loadingPulse, .tripInlineStatus.loading, .wishActionStatus.loading),
body :where(.skeleton, .skeletonLine, .skeletonCard, [data-loading="true"]) {
  position: relative;
  overflow: hidden;
  background: linear-gradient(110deg, var(--bm-skeleton-a), var(--bm-skeleton-b), var(--bm-skeleton-a)) !important;
  background-size: 220% 100% !important;
  animation: bmSkeletonSweep 1.45s ease-in-out infinite !important;
}

body :where(.loadingStatePanel h2, .loadingStatePanel p, .loadingStepGrid span, .loadingStepGrid b) {
  color: color-mix(in srgb, var(--bm3-text, #111827) 74%, transparent) !important;
}

html[data-theme="dark"] body :where(.softButton, .tinyButton, .ghostButton, .filters button, .selfServiceTabs button, .accountSectionTabs button, .mobileDetailTabs button):hover:not(:disabled) {
  border-color: rgba(94, 234, 212, .28) !important;
  background: rgba(20, 184, 166, .13) !important;
}

html[data-theme="dark"] body :where(.filters button.active, .selfServiceTabs button.active, .accountSectionTabs button.active, .mobileDetailTabs button.active, .tripSummary button.active, .orderSummary button.active, .wishModeCard.active) {
  background: rgba(255, 56, 92, .17) !important;
  color: #f8fafc !important;
}

@keyframes bmSkeletonSweep {
  0% { background-position: 160% 0; }
  100% { background-position: -60% 0; }
}

@media (prefers-reduced-motion: reduce) {
  body *,
  body *::before,
  body *::after {
    scroll-behavior: auto !important;
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }

  body :where(.loadingStatePanel, .loadingPulse, .tripInlineStatus.loading, .wishActionStatus.loading, .skeleton, .skeletonLine, .skeletonCard, [data-loading="true"]) {
    animation: none !important;
  }
}

/* BondMate 3.0 hardened keyboard focus pass. */
html body button:focus-visible,
html body a:focus-visible,
html body input:focus-visible,
html body select:focus-visible,
html body textarea:focus-visible,
html body [tabindex]:focus-visible,
html body .themeToggle:focus-visible,
html body .navIconButton:focus-visible,
html body .mobileActionBar button:focus-visible,
html body .rail button:focus-visible,
html body .tabs button:focus-visible,
html body .filters button:focus-visible,
html body .selfServiceTabs button:focus-visible,
html body .accountSectionTabs button:focus-visible,
html body .mobileDetailTabs button:focus-visible {
  outline: none !important;
  border-color: rgba(255, 56, 92, .72) !important;
  box-shadow:
    0 0 0 2px var(--bm-focus-core),
    0 0 0 6px var(--bm-focus-ring),
    var(--bm-press-shadow) !important;
}

html body .rail button:focus-visible,
html body .tabs button:focus-visible,
html body .filters button:focus-visible,
html body .selfServiceTabs button:focus-visible,
html body .accountSectionTabs button:focus-visible,
html body .mobileDetailTabs button:focus-visible,
html body .mobileActionBar button:focus-visible {
  transform: translateY(-1px) !important;
}

/* BondMate 3.0 mobile utility bar refinement. */
@media (max-width: 720px) {
  html body .themeToggle {
    width: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    padding: 0 !important;
    display: grid !important;
    place-items: center !important;
    font-size: 0 !important;
    line-height: 0 !important;
  }

  html body .themeToggle::before {
    content: "";
    width: 15px;
    height: 15px;
    display: block;
    border-radius: 999px;
    background: transparent;
    box-shadow: inset -5px -4px 0 #f8fafc;
  }

  html[data-theme="dark"] body .themeToggle::before {
    background: #f8fafc;
    box-shadow:
      0 0 0 3px rgba(248, 250, 252, .18),
      0 0 16px rgba(248, 250, 252, .42);
  }

  html body .languageToggle {
    gap: 2px !important;
    padding: 3px !important;
    min-height: 40px !important;
  }

  html body .languageToggle button {
    min-width: 36px !important;
    min-height: 32px !important;
    padding: 0 8px !important;
    font-size: 11px !important;
  }

  body:has(.marketPulse) .languageToggle,
  body:not(:has(.marketPulse)) .languageToggle {
    right: 12px !important;
  }

  body:has(.marketPulse) .themeToggle,
  body:not(:has(.marketPulse)) .themeToggle {
    right: 142px !important;
  }

  html body:has(.marketPulse) .themeToggle,
  html body:not(:has(.marketPulse)) .themeToggle {
    width: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    height: 40px !important;
    padding: 0 !important;
    font-size: 0 !important;
    line-height: 0 !important;
  }
}

/* BondMate 3.0 selected-state refinement: coral owns selection, teal stays assistive. */
html body :where(.filters button.active, .selfServiceTabs button.active, .accountSectionTabs button.active, .mobileDetailTabs button.active, .tripSummary button.active, .orderSummary button.active, .wishModeCard.active),
html body :where(.filters button.active, .selfServiceTabs button.active, .accountSectionTabs button.active, .mobileDetailTabs button.active, .tripSummary button.active, .orderSummary button.active, .wishModeCard.active):hover {
  color: var(--bm3-text, #111827) !important;
  border-color: rgba(255, 56, 92, .48) !important;
  background:
    linear-gradient(135deg, rgba(255, 56, 92, .13), rgba(255, 255, 255, .72)) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .42),
    0 14px 30px rgba(255, 56, 92, .15) !important;
}

html[data-theme="dark"] body :where(.filters button.active, .selfServiceTabs button.active, .accountSectionTabs button.active, .mobileDetailTabs button.active, .tripSummary button.active, .orderSummary button.active, .wishModeCard.active),
html[data-theme="dark"] body :where(.filters button.active, .selfServiceTabs button.active, .accountSectionTabs button.active, .mobileDetailTabs button.active, .tripSummary button.active, .orderSummary button.active, .wishModeCard.active):hover {
  color: #f8fafc !important;
  border-color: rgba(255, 56, 92, .58) !important;
  background:
    linear-gradient(135deg, rgba(255, 56, 92, .26), rgba(15, 23, 42, .82)) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .08),
    0 16px 34px rgba(255, 56, 92, .18) !important;
}

html body .mobileActionBar button.active,
html body .mobileActionBar button[aria-current="page"],
html body .mobileActionBar button.active:hover,
html body .mobileActionBar button[aria-current="page"]:hover {
  color: #111827 !important;
  border-color: rgba(255, 56, 92, .32) !important;
  background: transparent !important;
}

html body .mobileActionBar button.active .mobileNavIcon,
html body .mobileActionBar button[aria-current="page"] .mobileNavIcon,
html body .mobileActionBar button.active span:first-child,
html body .mobileActionBar button[aria-current="page"] span:first-child {
  color: #fff !important;
  background: linear-gradient(135deg, #ff385c, #ff6b7e) !important;
  border-color: rgba(255, 56, 92, .46) !important;
  box-shadow: 0 10px 24px rgba(255, 56, 92, .25) !important;
}

html[data-theme="dark"] body .mobileActionBar button.active,
html[data-theme="dark"] body .mobileActionBar button[aria-current="page"] {
  color: #f8fafc !important;
  border-color: rgba(255, 56, 92, .38) !important;
}

html body .filters button.active,
html body .selfServiceTabs button.active,
html body .accountSectionTabs button.active,
html body .mobileDetailTabs button.active,
html body .tripSummary button.active,
html body .orderSummary button.active {
  color: var(--bm3-text, #111827) !important;
  border-color: rgba(255, 56, 92, .48) !important;
  background:
    linear-gradient(135deg, rgba(255, 56, 92, .13), rgba(255, 255, 255, .72)) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .42),
    0 14px 30px rgba(255, 56, 92, .15) !important;
}

html body .filters button.active:hover,
html body .selfServiceTabs button.active:hover,
html body .accountSectionTabs button.active:hover,
html body .mobileDetailTabs button.active:hover,
html body .tripSummary button.active:hover,
html body .orderSummary button.active:hover {
  border-color: rgba(255, 56, 92, .54) !important;
  background:
    linear-gradient(135deg, rgba(255, 56, 92, .16), rgba(255, 255, 255, .78)) !important;
}

html[data-theme="dark"] body .filters button.active,
html[data-theme="dark"] body .selfServiceTabs button.active,
html[data-theme="dark"] body .accountSectionTabs button.active,
html[data-theme="dark"] body .mobileDetailTabs button.active,
html[data-theme="dark"] body .tripSummary button.active,
html[data-theme="dark"] body .orderSummary button.active {
  color: #f8fafc !important;
  border-color: rgba(255, 56, 92, .58) !important;
  background:
    linear-gradient(135deg, rgba(255, 56, 92, .26), rgba(15, 23, 42, .82)) !important;
}

/* BondMate 3.0 feedback-state refinement: neutral global notices, clear form states. */
html body .toastNotice,
html body .notice {
  color: #111827 !important;
  border-color: rgba(148, 163, 184, .24) !important;
  border-left-color: #ff385c !important;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .96), rgba(248, 250, 252, .92)) !important;
  box-shadow:
    0 18px 50px rgba(15, 23, 42, .12),
    inset 0 1px 0 rgba(255, 255, 255, .82) !important;
}

html body .toastNotice::before,
html body .notice::before {
  content: "AI";
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  color: #fff;
  border-radius: 999px;
  background: linear-gradient(135deg, #ff385c, #ff6b7e);
  box-shadow: 0 10px 22px rgba(255, 56, 92, .24);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .03em;
}

html body .sessionToast,
html body .sessionNotice {
  border-left-color: #f59e0b !important;
  background:
    linear-gradient(135deg, rgba(255, 251, 235, .96), rgba(255, 255, 255, .9)) !important;
}

html body .sessionToast::before,
html body .sessionNotice::before {
  content: "!";
  background: linear-gradient(135deg, #f59e0b, #f97316);
  box-shadow: 0 10px 22px rgba(245, 158, 11, .24);
}

html body .toastClose {
  position: relative !important;
  flex: 0 0 auto !important;
  color: transparent !important;
  background: rgba(15, 23, 42, .06) !important;
  border: 1px solid rgba(15, 23, 42, .06) !important;
}

html body .toastClose::before,
html body .toastClose::after {
  background: #111827 !important;
}

html body :where(.wishActionStatus, .tripInlineStatus, .sensitiveStepHint) {
  position: relative;
  overflow: hidden;
  border-radius: 16px !important;
  border-color: rgba(20, 184, 166, .26) !important;
  background:
    linear-gradient(135deg, rgba(240, 253, 250, .96), rgba(255, 255, 255, .88)) !important;
  box-shadow: 0 14px 34px rgba(15, 23, 42, .08) !important;
}

html body :where(.wishActionStatus.success, .sensitiveStepHint.ok) {
  color: #065f46 !important;
  border-color: rgba(16, 185, 129, .32) !important;
  background:
    linear-gradient(135deg, rgba(236, 253, 245, .98), rgba(255, 255, 255, .9)) !important;
}

html body :where(.wishActionStatus.error, .tripInlineStatus.error, .sensitiveStepHint.error) {
  color: #7f1d1d !important;
  border-color: rgba(255, 56, 92, .38) !important;
  border-left: 4px solid #ff385c !important;
  background:
    linear-gradient(135deg, rgba(255, 241, 242, .98), rgba(255, 255, 255, .9)) !important;
}

html body :where(.wishActionStatus.loading, .tripInlineStatus.loading, .sensitiveStepHint.pending, .sensitiveStepHint.needsAction) {
  color: #713f12 !important;
  border-color: rgba(245, 158, 11, .34) !important;
  border-left: 4px solid #f59e0b !important;
  background:
    linear-gradient(135deg, rgba(255, 251, 235, .98), rgba(255, 255, 255, .9)) !important;
}

html body :where(input, select, textarea):user-invalid {
  border-color: rgba(255, 56, 92, .72) !important;
  background:
    linear-gradient(135deg, rgba(255, 241, 242, .76), rgba(255, 255, 255, .96)) !important;
  box-shadow:
    0 0 0 2px rgba(255, 255, 255, .94),
    0 0 0 6px rgba(255, 56, 92, .16) !important;
}

html body label:has(:user-invalid) {
  color: #be123c !important;
}

html body :where(.empty, .emptyActionState, .guestFlowNudge) {
  border-radius: 18px !important;
}

html body .empty {
  border: 1px solid rgba(148, 163, 184, .18) !important;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .88), rgba(248, 250, 252, .78)) !important;
}

html[data-theme="dark"] body .toastNotice,
html[data-theme="dark"] body .notice {
  color: #f8fafc !important;
  border-color: rgba(148, 163, 184, .20) !important;
  border-left-color: #ff385c !important;
  background:
    linear-gradient(135deg, rgba(17, 24, 39, .96), rgba(15, 23, 42, .90)) !important;
  box-shadow:
    0 18px 52px rgba(0, 0, 0, .34),
    inset 0 1px 0 rgba(255, 255, 255, .05) !important;
}

html[data-theme="dark"] body .toastClose {
  background: rgba(248, 250, 252, .08) !important;
  border-color: rgba(248, 250, 252, .08) !important;
}

html[data-theme="dark"] body .toastClose::before,
html[data-theme="dark"] body .toastClose::after {
  background: #f8fafc !important;
}

html[data-theme="dark"] body :where(.wishActionStatus, .tripInlineStatus, .sensitiveStepHint, .empty) {
  color: #e5e7eb !important;
  border-color: rgba(148, 163, 184, .20) !important;
  background:
    linear-gradient(135deg, rgba(17, 24, 39, .92), rgba(15, 23, 42, .84)) !important;
}

html[data-theme="dark"] body :where(.wishActionStatus.error, .tripInlineStatus.error, .sensitiveStepHint.error) {
  color: #fecdd3 !important;
  border-color: rgba(255, 56, 92, .42) !important;
  background:
    linear-gradient(135deg, rgba(127, 29, 29, .30), rgba(15, 23, 42, .88)) !important;
}

@media (max-width: 720px) {
  html body .toastNotice {
    top: max(74px, calc(env(safe-area-inset-top) + 74px)) !important;
    right: 12px !important;
    left: 12px !important;
    width: auto !important;
    min-height: 64px !important;
    padding: 12px 12px !important;
  }
}

/* BondMate 3.0 form-flow refinement: calmer fields, clearer guidance, stronger CTAs. */
html body :where(.wishForm, .loginForm, .standaloneLoginForm) {
  --bm-field-bg: rgba(255, 255, 255, .86);
  --bm-field-line: rgba(148, 163, 184, .22);
  --bm-field-focus: rgba(255, 56, 92, .46);
}

html body :where(.wishForm > label:not(.wide):not(.wishPhotoUpload), .wishForm > .field, .wishForm > .inputField, .standaloneLoginForm label, .loginForm label) {
  position: relative !important;
  display: grid !important;
  gap: 9px !important;
  padding: 14px !important;
  color: var(--bm3-text, #111827) !important;
  border: 1px solid var(--bm-field-line) !important;
  border-radius: 18px !important;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .92), rgba(248, 250, 252, .76)) !important;
  box-shadow: 0 10px 28px rgba(15, 23, 42, .045) !important;
  transition:
    transform .18s ease,
    border-color .18s ease,
    box-shadow .18s ease,
    background-color .18s ease !important;
}

html body :where(.wishForm > label:not(.wide):not(.wishPhotoUpload), .wishForm > .field, .wishForm > .inputField, .standaloneLoginForm label, .loginForm label):focus-within {
  transform: translateY(-2px) !important;
  border-color: var(--bm-field-focus) !important;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .98), rgba(255, 241, 242, .50)) !important;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, .86),
    0 16px 38px rgba(255, 56, 92, .12) !important;
}

html body :where(.wishForm label, .loginForm label, .standaloneLoginForm label) {
  font-size: 12px !important;
  font-weight: 900 !important;
  letter-spacing: .02em !important;
}

html body :where(.wishForm input, .wishForm select, .wishForm textarea, .loginForm input, .loginForm select, .standaloneLoginForm input, .standaloneLoginForm select) {
  min-height: 46px !important;
  width: 100% !important;
  color: var(--bm3-text, #111827) !important;
  border: 1px solid rgba(148, 163, 184, .24) !important;
  border-radius: 14px !important;
  background: rgba(255, 255, 255, .94) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .86) !important;
  font-size: 14px !important;
}

html body :where(.wishForm input::placeholder, .wishForm textarea::placeholder, .loginForm input::placeholder, .standaloneLoginForm input::placeholder) {
  color: rgba(100, 116, 139, .72) !important;
}

html body :where(.wishForm textarea) {
  min-height: 104px !important;
  resize: vertical !important;
}

html body :where(.wishPhotoUpload, .wishForm > .wide:not(.wishModePanel):not(.wishLivePreview):not(.splitAction), .estimate, .wishCostBreakdown, .productPreviewCard, .riskBox, .restrictionInlineNotice) {
  border-radius: 20px !important;
  border-color: rgba(148, 163, 184, .20) !important;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .90), rgba(248, 250, 252, .72)) !important;
  box-shadow: 0 12px 32px rgba(15, 23, 42, .055) !important;
}

html body .estimate {
  position: relative !important;
  overflow: hidden !important;
  padding-left: 64px !important;
  border-left: 4px solid #00a699 !important;
}

html body .estimate::before {
  content: "AI";
  position: absolute;
  left: 18px;
  top: 18px;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  color: #fff;
  border-radius: 999px;
  background: linear-gradient(135deg, #00a699, #14b8a6);
  box-shadow: 0 10px 22px rgba(20, 184, 166, .22);
  font-size: 10px;
  font-weight: 950;
}

html body :where(.splitAction, .standaloneLoginForm .buttonRow, .loginForm .buttonRow) {
  align-items: center !important;
  gap: 12px !important;
  padding: 12px !important;
  border: 1px solid rgba(148, 163, 184, .16) !important;
  border-radius: 18px !important;
  background: rgba(255, 255, 255, .72) !important;
}

html body :where(.splitAction .primaryButton, .standaloneLoginForm .primaryButton, .loginForm .primaryButton, .formView:has(.tripDecision) .wishForm > .primaryButton.wide) {
  min-height: 48px !important;
  border-radius: 15px !important;
  box-shadow: 0 16px 34px rgba(255, 56, 92, .24) !important;
}

html body :where(.standaloneLoginForm > div:first-child, .loginForm > div:first-child) button,
html body :where(.standaloneLoginForm .tabs button, .loginForm .tabs button) {
  min-height: 42px !important;
  border-radius: 14px !important;
  font-weight: 900 !important;
}

html body :where(.standaloneLoginForm > div:first-child, .loginForm > div:first-child) button.active,
html body :where(.standaloneLoginForm .tabs button.active, .loginForm .tabs button.active) {
  color: var(--bm3-text, #111827) !important;
  border-color: rgba(255, 56, 92, .48) !important;
  background:
    linear-gradient(135deg, rgba(255, 56, 92, .13), rgba(255, 255, 255, .78)) !important;
  box-shadow: 0 12px 28px rgba(255, 56, 92, .13) !important;
}

html body .forgotPasswordInline {
  justify-self: end !important;
  color: var(--bm3-text, #111827) !important;
  border-radius: 999px !important;
  opacity: .84 !important;
}

html body .forgotPasswordInline:hover {
  opacity: 1 !important;
  color: #ff385c !important;
  background: rgba(255, 56, 92, .08) !important;
}

html[data-theme="dark"] body :where(.wishForm, .loginForm, .standaloneLoginForm) {
  --bm-field-bg: rgba(15, 23, 42, .82);
  --bm-field-line: rgba(148, 163, 184, .18);
  --bm-field-focus: rgba(255, 56, 92, .54);
}

html[data-theme="dark"] body :where(.wishForm > label:not(.wide):not(.wishPhotoUpload), .wishForm > .field, .wishForm > .inputField, .standaloneLoginForm label, .loginForm label, .wishPhotoUpload, .wishForm > .wide:not(.wishModePanel):not(.wishLivePreview):not(.splitAction), .estimate, .wishCostBreakdown, .productPreviewCard, .riskBox, .restrictionInlineNotice) {
  color: #f8fafc !important;
  border-color: rgba(148, 163, 184, .18) !important;
  background:
    linear-gradient(135deg, rgba(17, 24, 39, .88), rgba(15, 23, 42, .78)) !important;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .24) !important;
}

html[data-theme="dark"] body :where(.wishForm > label:not(.wide):not(.wishPhotoUpload), .wishForm > .field, .wishForm > .inputField, .standaloneLoginForm label, .loginForm label):focus-within {
  border-color: rgba(255, 56, 92, .56) !important;
  background:
    linear-gradient(135deg, rgba(31, 41, 55, .92), rgba(127, 29, 29, .18)) !important;
}

html[data-theme="dark"] body :where(.wishForm input, .wishForm select, .wishForm textarea, .loginForm input, .loginForm select, .standaloneLoginForm input, .standaloneLoginForm select) {
  color: #f8fafc !important;
  border-color: rgba(148, 163, 184, .20) !important;
  background: rgba(15, 23, 42, .94) !important;
}

html[data-theme="dark"] body :where(.splitAction, .standaloneLoginForm .buttonRow, .loginForm .buttonRow) {
  border-color: rgba(148, 163, 184, .16) !important;
  background: rgba(15, 23, 42, .58) !important;
}

html[data-theme="dark"] body :where(.standaloneLoginForm > div:first-child, .loginForm > div:first-child) button.active,
html[data-theme="dark"] body :where(.standaloneLoginForm .tabs button.active, .loginForm .tabs button.active) {
  color: #f8fafc !important;
  border-color: rgba(255, 56, 92, .56) !important;
  background:
    linear-gradient(135deg, rgba(255, 56, 92, .24), rgba(15, 23, 42, .84)) !important;
}

html body .wishForm > label:not(.wide):not(.wishPhotoUpload):focus-within,
html body .wishForm > .field:focus-within,
html body .wishForm > .inputField:focus-within {
  border-color: rgba(255, 56, 92, .56) !important;
}

@media (max-width: 720px) {
  html body :where(.wishForm > label:not(.wide):not(.wishPhotoUpload), .wishForm > .field, .wishForm > .inputField, .standaloneLoginForm label, .loginForm label) {
    gap: 7px !important;
    padding: 12px !important;
    border-radius: 16px !important;
  }

  html body :where(.wishForm input, .wishForm select, .wishForm textarea, .loginForm input, .loginForm select, .standaloneLoginForm input, .standaloneLoginForm select) {
    min-height: 44px !important;
  }

  html body .estimate {
    padding: 14px 14px 14px 58px !important;
  }

  html body .estimate::before {
    left: 16px;
    top: 16px;
  }

  html body :where(.splitAction, .standaloneLoginForm .buttonRow, .loginForm .buttonRow) {
    padding: 10px !important;
    gap: 10px !important;
  }

  html body .accountView.guestAccount.standaloneGuestAccount .standaloneLoginForm {
    gap: 6px !important;
    min-height: 0 !important;
    max-height: 456px !important;
    padding: 12px !important;
    padding-bottom: 14px !important;
    overflow: auto !important;
    scrollbar-width: thin;
  }

  html body .accountView.guestAccount.standaloneGuestAccount .standaloneLoginForm label {
    gap: 5px !important;
    min-height: 0 !important;
    padding: 8px !important;
    border-radius: 14px !important;
  }

  html body .accountView.guestAccount.standaloneGuestAccount .standaloneLoginForm input,
  html body .accountView.guestAccount.standaloneGuestAccount .standaloneLoginForm select {
    min-height: 44px !important;
  }

  html body .accountView.guestAccount.standaloneGuestAccount .standaloneLoginForm > div:first-child button,
  html body .accountView.guestAccount.standaloneGuestAccount .standaloneLoginForm .tabs button {
    min-height: 44px !important;
    padding: 0 10px !important;
  }

  html body .accountView.guestAccount.standaloneGuestAccount .standaloneLoginForm .primaryButton {
    min-height: 44px !important;
    margin-top: 0 !important;
  }

  html body .accountView.guestAccount.standaloneGuestAccount .forgotPasswordInline {
    min-height: 44px !important;
    padding: 0 6px !important;
  }

  html body .accountView.guestAccount.standaloneGuestAccount .guestAccountEntry {
    min-height: 0 !important;
    max-height: 188px !important;
    padding: 14px !important;
    overflow: hidden !important;
  }

  html body .accountView.guestAccount.standaloneGuestAccount .guestAccountEntry h3 {
    margin: 5px 0 6px !important;
    font-size: clamp(1.35rem, 6.2vw, 1.72rem) !important;
    line-height: 1.06 !important;
  }

  html body .accountView.guestAccount.standaloneGuestAccount .guestAccountEntry p {
    -webkit-line-clamp: 1 !important;
    font-size: .86rem !important;
    line-height: 1.35 !important;
  }

  html body .accountView.guestAccount.standaloneGuestAccount .guestAccountEntry::after {
    max-height: 68px !important;
    margin-top: 8px !important;
    padding: 10px !important;
    overflow: hidden !important;
    font-size: .78rem !important;
    line-height: 1.3 !important;
  }

  html body .accountView.guestAccount.standaloneGuestAccount {
    gap: 10px !important;
    padding-bottom: 82px !important;
  }

  html,
  body {
    scroll-padding-top: 86px !important;
  }

  html body :where(.wishForm label, .loginForm label, .standaloneLoginForm label, .wishForm input, .loginForm input, .standaloneLoginForm input) {
    scroll-margin-top: 92px !important;
  }
}

/* BondMate 3.0 mobile tap target refinement. */
@media (max-width: 720px) {
  html body .languageToggle {
    min-height: 40px !important;
    padding: 3px !important;
  }

  html body .languageToggle button {
    min-width: 34px !important;
    height: 34px !important;
    min-height: 34px !important;
    padding: 0 8px !important;
  }

  html body .accountView.guestAccount.standaloneGuestAccount .forgotPasswordInline,
  html body .forgotPasswordInline {
    min-height: 44px !important;
    padding: 0 10px !important;
  }
}

/* BondMate 3.0 card scanning refinement: marketplace lists, trips, orders. */
html body .ordersView .orderSummary button.active,
html body .ordersView .orderSummary button.active:hover {
  color: var(--bm3-text, #111827) !important;
  border-color: rgba(255, 56, 92, .54) !important;
  background:
    linear-gradient(135deg, rgba(255, 56, 92, .15), rgba(255, 255, 255, .88)) !important;
  box-shadow:
    0 16px 34px rgba(255, 56, 92, .16),
    inset 0 0 0 1px rgba(255, 255, 255, .72) !important;
}

html body .ordersView .orderSummary button.active small {
  color: rgba(255, 56, 92, .86) !important;
}

html body .formView:has(.tripDecision) .tripCard,
html body:not(:has(.marketPulse)) .tripCard,
html body:has(.marketPulse) .pulseFeed .pulseItem,
html body:has(.marketPulse) .trustedMemberCard,
html body .mapReadableView .areaHumanCard,
html body .mapReadableView .areaRow {
  border-color: rgba(226, 232, 240, .94) !important;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .98), rgba(248, 250, 252, .86)) !important;
  box-shadow:
    0 14px 34px rgba(15, 23, 42, .075),
    inset 0 1px 0 rgba(255, 255, 255, .8) !important;
}

html body .formView:has(.tripDecision) .tripCard,
html body:not(:has(.marketPulse)) .tripCard {
  position: relative !important;
  border-left: 4px solid rgba(0, 166, 153, .60) !important;
  padding: 20px !important;
}

html body .formView:has(.tripDecision) .tripCard .cardTop h3,
html body:not(:has(.marketPulse)) .tripCard .cardTop h3 {
  color: var(--bm3-text, #111827) !important;
  font-size: clamp(1.05rem, 1vw, 1.2rem) !important;
  letter-spacing: 0 !important;
}

html body .formView:has(.tripDecision) .tripCard .miniMeta,
html body:not(:has(.marketPulse)) .tripCard .miniMeta {
  gap: 8px !important;
}

html body .formView:has(.tripDecision) .tripCard .miniMeta span,
html body:not(:has(.marketPulse)) .tripCard .miniMeta span {
  border-radius: 999px !important;
  background: rgba(248, 250, 252, .92) !important;
  border: 1px solid rgba(226, 232, 240, .9) !important;
  padding: 5px 9px !important;
}

html body .formView:has(.tripDecision) .tripCard .tripActions,
html body:not(:has(.marketPulse)) .tripCard .tripActions {
  margin-top: 14px !important;
  padding-top: 14px !important;
  border-top: 1px solid rgba(226, 232, 240, .86) !important;
  background: transparent !important;
}

html body .formView:has(.tripDecision) .tripCard .tripActions button,
html body:not(:has(.marketPulse)) .tripCard .tripActions button,
html body .formView:has(.tripDecision) .tripCard .tripActions a,
html body:not(:has(.marketPulse)) .tripCard .tripActions a {
  min-height: 38px !important;
  border-radius: 13px !important;
}

html body:has(.marketPulse) .pulseFeed .pulseItem {
  grid-template-columns: 50px minmax(0, 1fr) auto !important;
  border-left: 3px solid rgba(255, 56, 92, .72) !important;
}

html body:has(.marketPulse) .pulseFeed .pulseItem strong {
  color: var(--bm3-text, #111827) !important;
  font-size: 1rem !important;
}

html body:has(.marketPulse) .pulseFeed .pulseItem .tinyButton {
  min-width: 54px !important;
  height: 34px !important;
  color: transparent !important;
  border-color: rgba(255, 56, 92, .32) !important;
  background: rgba(255, 56, 92, .08) !important;
  box-shadow: none !important;
  font-size: 0 !important;
}

html body:has(.marketPulse) .pulseFeed .pulseItem .tinyButton::after {
  content: "\67e5\770b";
  color: #ff385c;
  font-size: 12px;
  font-weight: 900;
}

html body:has(.marketPulse) .pulseFeed .pulseItem .tinyButton:hover {
  border-color: rgba(255, 56, 92, .54) !important;
  background: rgba(255, 56, 92, .13) !important;
  transform: translateY(-2px) !important;
}

html body .mapReadableView .areaHumanCard {
  border-left: 4px solid rgba(0, 166, 153, .54) !important;
}

html body .mapReadableView .areaHumanCard.need_travelers {
  border-left-color: rgba(255, 56, 92, .72) !important;
}

html body .mapReadableView .areaHumanCard.high_demand {
  border-left-color: rgba(245, 158, 11, .72) !important;
}

html[data-theme="dark"] body .ordersView .orderSummary button.active,
html[data-theme="dark"] body .ordersView .orderSummary button.active:hover {
  color: #f8fafc !important;
  border-color: rgba(255, 56, 92, .58) !important;
  background:
    linear-gradient(135deg, rgba(255, 56, 92, .24), rgba(15, 23, 42, .86)) !important;
  box-shadow:
    0 16px 34px rgba(0, 0, 0, .30),
    0 0 0 1px rgba(255, 56, 92, .10) !important;
}

html[data-theme="dark"] body .formView:has(.tripDecision) .tripCard,
html[data-theme="dark"] body:not(:has(.marketPulse)) .tripCard,
html[data-theme="dark"] body:has(.marketPulse) .pulseFeed .pulseItem,
html[data-theme="dark"] body:has(.marketPulse) .trustedMemberCard,
html[data-theme="dark"] body .mapReadableView .areaHumanCard,
html[data-theme="dark"] body .mapReadableView .areaRow {
  color: #f8fafc !important;
  border-color: rgba(148, 163, 184, .20) !important;
  background:
    linear-gradient(145deg, rgba(17, 24, 39, .92), rgba(15, 23, 42, .82)) !important;
  box-shadow:
    0 16px 38px rgba(0, 0, 0, .28),
    inset 0 1px 0 rgba(255, 255, 255, .05) !important;
}

html[data-theme="dark"] body .formView:has(.tripDecision) .tripCard .miniMeta span,
html[data-theme="dark"] body:not(:has(.marketPulse)) .tripCard .miniMeta span {
  color: rgba(248, 250, 252, .82) !important;
  border-color: rgba(148, 163, 184, .20) !important;
  background: rgba(15, 23, 42, .72) !important;
}

html[data-theme="dark"] body .formView:has(.tripDecision) .tripCard .tripActions,
html[data-theme="dark"] body:not(:has(.marketPulse)) .tripCard .tripActions {
  border-top-color: rgba(148, 163, 184, .18) !important;
}

html[data-theme="dark"] body:has(.marketPulse) .pulseFeed .pulseItem strong {
  color: #f8fafc !important;
}

html[data-theme="dark"] body:has(.marketPulse) .pulseFeed .pulseItem .tinyButton {
  border-color: rgba(255, 56, 92, .42) !important;
  background: rgba(255, 56, 92, .16) !important;
}

/* BondMate 3.0 dark readability refinement for secondary labels. */
html[data-theme="dark"] body :where(.heroSearchField span, .wishForm label, .loginForm label, .standaloneLoginForm label) {
  color: rgba(203, 213, 225, .94) !important;
}

html[data-theme="dark"] body :where(.heroSearchField small, .wishForm label > span, .loginForm label > span, .standaloneLoginForm label > span) {
  color: rgba(226, 232, 240, .84) !important;
}

html[data-theme="dark"] body .accountView.guestAccount.standaloneGuestAccount .guestAccountEntry span,
html[data-theme="dark"] body .accountView .guestAccountEntry span {
  color: #5eead4 !important;
}

@media (max-width: 720px) {
  html body .formView:has(.tripDecision) .tripCard,
  html body:not(:has(.marketPulse)) .tripCard {
    min-height: 0 !important;
    padding: 16px !important;
    border-radius: 20px !important;
  }

  html body .formView:has(.tripDecision) .tripCard .note,
  html body:not(:has(.marketPulse)) .tripCard .note {
    display: -webkit-box !important;
    overflow: hidden !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
  }

  html body .formView:has(.tripDecision) .tripCard .tripActions,
  html body:not(:has(.marketPulse)) .tripCard .tripActions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  html body:has(.marketPulse) .pulseFeed .pulseItem {
    grid-template-columns: 42px minmax(0, 1fr) 50px !important;
    gap: 10px !important;
    padding: 12px !important;
  }

  html body:has(.marketPulse) .pulseFeed .pulseItem p {
    display: -webkit-box !important;
    overflow: hidden !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 1 !important;
  }

  html body:not(:has(.marketPulse)) .ordersView.isEmpty .guestFlowNudge.orders,
  html body .ordersView .guestFlowNudge.orders {
    max-height: 202px !important;
    padding: 15px !important;
    padding-bottom: 15px !important;
    overflow: hidden !important;
  }

  html body:not(:has(.marketPulse)) .ordersView.isEmpty .guestFlowNudge.orders p,
  html body .ordersView .guestFlowNudge.orders p {
    display: -webkit-box !important;
    overflow: hidden !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
  }

  html body:not(:has(.marketPulse)) .ordersView.isEmpty .guestFlowNudge.orders ol,
  html body .ordersView .guestFlowNudge.orders ol {
    display: none !important;
  }

  html body:not(:has(.marketPulse)) .ordersView.isEmpty .guestFlowNudge.orders .buttonRow,
  html body .ordersView .guestFlowNudge.orders .buttonRow {
    right: 14px !important;
    bottom: 78px !important;
    left: 14px !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* BondMate 3.0 final dark-label override: keep form and hero helper text readable. */
html[data-theme="dark"] body:has(.marketPulse) .marketHero .heroSearchField span,
html[data-theme="dark"] body:has(.marketPulse) .heroSearchPanel .heroSearchField span,
html[data-theme="dark"] body .accountView.guestAccount.standaloneGuestAccount .standaloneLoginForm label,
html[data-theme="dark"] body .accountView .standaloneLoginForm label,
html[data-theme="dark"] body .loginForm label {
  color: rgba(203, 213, 225, .96) !important;
}

html[data-theme="dark"] body .accountView.guestAccount.standaloneGuestAccount .standaloneLoginForm label > span,
html[data-theme="dark"] body .accountView .standaloneLoginForm label > span,
html[data-theme="dark"] body .loginForm label > span {
  color: rgba(226, 232, 240, .88) !important;
}

/* BondMate 3.0 global footer rollout: align page endings with the content column. */
@media (min-width: 1000px) {
  html body .siteFooter {
    width: min(calc(100% - 340px), 1100px) !important;
    margin-inline: 300px auto !important;
  }
}

@media (max-width: 720px) {
  html body .siteFooter {
    width: calc(100% - 26px) !important;
    margin-inline: 13px !important;
    margin-bottom: 118px !important;
    border-radius: 24px !important;
  }
}

/* BondMate 3.0 mobile first-viewport rhythm: reveal the next marketplace section. */
@media (max-width: 720px) {
  html body:has(.marketPulse) .heroProduct.heroSearchFirst {
    min-height: 0 !important;
    height: 640px !important;
    padding: 24px 18px 36px !important;
    gap: 12px !important;
  }

  html body:has(.marketPulse) .heroProduct.heroSearchFirst .heroCopy,
  html body:has(.marketPulse) .heroProduct.heroSearchFirst > div:first-child {
    gap: 8px !important;
  }

  html body:has(.marketPulse) .heroProduct.heroSearchFirst h1 {
    font-size: clamp(1.92rem, 8.7vw, 2.44rem) !important;
    line-height: 1.04 !important;
  }

  html body:has(.marketPulse) .heroProduct.heroSearchFirst p {
    display: -webkit-box !important;
    overflow: hidden !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    margin-block: 6px 4px !important;
    font-size: .9rem !important;
    line-height: 1.55 !important;
  }

  html body:has(.marketPulse) .heroProduct.heroSearchFirst .heroSearchPanel {
    display: grid !important;
    grid-auto-rows: auto !important;
    grid-template-rows: none !important;
    gap: 8px !important;
    margin-top: 6px !important;
    padding: 10px !important;
  }

  html body:has(.marketPulse) .heroProduct.heroSearchFirst .heroSearchPanel::before,
  html body:has(.marketPulse) .heroProduct.heroSearchFirst .heroSearchPanel::after {
    content: none !important;
    display: none !important;
  }

  html body:has(.marketPulse) .heroProduct.heroSearchFirst .heroSearchGrid {
    gap: 8px !important;
  }

  html body:has(.marketPulse) .heroProduct.heroSearchFirst .heroSearchField,
  html body:has(.marketPulse) .heroProduct.heroSearchFirst .heroSearchSubmit {
    min-height: 48px !important;
  }

  html body:has(.marketPulse) .heroProduct.heroSearchFirst .heroSearchSubmit {
    margin-top: 0 !important;
  }

  html body:has(.marketPulse) .marketPulse {
    margin-top: 0 !important;
  }

  html body:not(:has(.marketPulse)) .policyGrid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    width: 100% !important;
    margin-inline: 0 !important;
    padding: 0 !important;
    overflow-x: visible !important;
    scroll-snap-type: none;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 38px), transparent 100%);
  }

  html body:not(:has(.marketPulse)) .policyGrid::-webkit-scrollbar {
    display: none;
  }

html body:not(:has(.marketPulse)) .policyGrid .policyItem {
    flex: 0 1 auto !important;
    width: 100% !important;
    scroll-snap-align: start;
  }
}

/* BondMate 3.0 AI-native assistant dock. */
html body .aiAssistDock {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 86;
  display: grid;
  gap: 8px;
  width: min(336px, calc(100vw - 48px));
  pointer-events: none;
}

@media (min-width: 721px) {
  html body .aiAssistDock.footerVisible {
    opacity: 0;
    pointer-events: none;
    transform: translateY(18px) scale(.98);
  }
}

html body .aiAssistButton,
html body .aiAssistPreview {
  pointer-events: auto;
  border: 1px solid rgba(226, 232, 240, .92);
  box-shadow: 0 18px 42px rgba(15, 23, 42, .14);
  backdrop-filter: blur(18px);
}

html body .aiAssistButton {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  min-height: 68px;
  padding: 11px 14px;
  border-radius: 22px;
  color: #111827;
  background: rgba(255, 255, 255, .92);
  text-align: left;
}

html body .aiAssistButton:hover {
  transform: translateY(-3px);
  border-color: rgba(255, 56, 92, .34);
  box-shadow: 0 22px 50px rgba(255, 56, 92, .16);
}

html body .aiAssistOrb {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 16px;
  color: #fff;
  background: linear-gradient(135deg, #111827, #ff385c);
  font-size: 12px;
  font-weight: 950;
  letter-spacing: 0;
}

html body .aiAssistButton strong,
html body .aiAssistPreview strong {
  display: block;
  color: #111827;
  font-weight: 900;
  letter-spacing: 0;
}

html body .aiAssistButton small,
html body .aiAssistPreview span {
  display: block;
  overflow: hidden;
  color: #64748b;
  font-size: 12px;
  line-height: 1.45;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html body .aiAssistPreview {
  justify-self: end;
  width: calc(100% - 42px);
  padding: 10px 12px;
  border-radius: 18px;
  color: #475569;
  background: rgba(248, 250, 252, .86);
}

html body .aiAssistPreview strong {
  margin-top: 3px;
  color: #ff385c;
  font-size: 12px;
}

html[data-theme="dark"] body .aiAssistButton,
html[data-theme="dark"] body .aiAssistPreview {
  border-color: rgba(148, 163, 184, .22);
  background: rgba(15, 23, 42, .88);
  box-shadow: 0 18px 42px rgba(0, 0, 0, .32);
}

html[data-theme="dark"] body .aiAssistButton strong,
html[data-theme="dark"] body .aiAssistPreview strong {
  color: #f8fafc;
}

html[data-theme="dark"] body .aiAssistButton small,
html[data-theme="dark"] body .aiAssistPreview span {
  color: rgba(203, 213, 225, .86);
}

html[data-theme="dark"] body .aiAssistPreview strong {
  color: #fb7185;
}

@media (max-width: 720px) {
  html body .aiAssistDock {
    right: 13px;
    bottom: calc(86px + env(safe-area-inset-bottom, 0px));
    width: min(292px, calc(100vw - 26px));
  }

  html body .aiAssistButton {
    grid-template-columns: 34px minmax(0, 1fr);
    min-height: 54px;
    padding: 8px 10px;
    border-radius: 19px;
  }

  html body .aiAssistOrb {
    width: 34px;
    height: 34px;
    border-radius: 13px;
    font-size: 11px;
  }

  html body .aiAssistButton strong {
    font-size: .92rem;
  }

  html body .aiAssistButton small {
    max-width: 100%;
    font-size: 11px;
  }

  html body .aiAssistPreview {
    display: none;
  }

  html body:has(.ordersView) .aiAssistDock,
  html body:has(.accountView.guestAccount) .aiAssistDock {
    bottom: calc(132px + env(safe-area-inset-bottom, 0px));
  }

  html body:has(.ordersView) .aiAssistDock {
    display: none;
  }

  html body:has(.ordersView) .aiAssistDock .aiAssistButton {
    display: none !important;
  }
}

/* BondMate 3.0 copy cleanup: remove legacy AI pill duplication and repair pseudo-copy encoding. */
html body:has(.marketPulse)::after {
  content: none !important;
  display: none !important;
}

html body .marketplaceHeroPanel::after {
  content: "AI Recommendation\A \627e\5230  8 \4f4d\7b26\5408\65c5\4eba\A \6700\5feb\660e\5929\8fd4\53f0  蝜?\6210\529f\7387  91%" !important;
}

html body:not(:has(.marketPulse)) .accountView.guestAccount .accountCard::after {
  content: "AI Match Preview\A \627e\5230 8 \4f4d\8fd1\671f\8fd4\53f0\65c5\4eba\A \6700\5feb 18 \5c0f\6642\5f8c\62b5\53f0\A \5e73\5747\6210\529f\7387 91%" !important;
}

html body .accountView.guestAccount.standaloneGuestAccount .guestAccountEntry::after {
  content: "AI Match Assistant\A 8 \4f4d\7b26\5408\65c5\4eba\A 91% \5e73\5747\5a92\5408\6210\529f\7387\A 18 hr \6700\5feb\8fd4\53f0" !important;
}

html body .trendBoard .sectionHead h2::before {
  content: "\1F525  " !important;
}

/* BondMate 3.0 mobile workflow focus: keep AI available without covering forms. */
@media (max-width: 720px) {
  html body:has(.wishForm) .aiAssistDock,
  html body:has(.tripDecision) .aiAssistDock,
  html body:has(.mapReadableView) .aiAssistDock,
  html body:has(.accountView) .aiAssistDock,
  html body:has(.policyQaView) .aiAssistDock {
    right: 17px !important;
    bottom: calc(90px + env(safe-area-inset-bottom, 0px)) !important;
    width: 54px !important;
  }

  html body:has(.wishForm) .aiAssistButton,
  html body:has(.tripDecision) .aiAssistButton,
  html body:has(.mapReadableView) .aiAssistButton,
  html body:has(.accountView) .aiAssistButton,
  html body:has(.policyQaView) .aiAssistButton {
    grid-template-columns: 34px !important;
    width: 54px !important;
    min-height: 54px !important;
    padding: 10px !important;
    border-radius: 18px !important;
    box-shadow: 0 12px 28px rgba(15, 23, 42, .16) !important;
  }

  html body:has(.wishForm) .aiAssistButton > span:not(.aiAssistOrb),
  html body:has(.tripDecision) .aiAssistButton > span:not(.aiAssistOrb),
  html body:has(.mapReadableView) .aiAssistButton > span:not(.aiAssistOrb),
  html body:has(.accountView) .aiAssistButton > span:not(.aiAssistOrb),
  html body:has(.policyQaView) .aiAssistButton > span:not(.aiAssistOrb) {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    white-space: nowrap !important;
  }

  html body:has(.wishForm) .aiAssistOrb,
  html body:has(.tripDecision) .aiAssistOrb,
  html body:has(.mapReadableView) .aiAssistOrb,
  html body:has(.accountView) .aiAssistOrb,
  html body:has(.policyQaView) .aiAssistOrb {
    width: 34px !important;
    height: 34px !important;
  }

  html body:has(.ordersView) .aiAssistDock {
    display: none !important;
  }
}

/* BondMate 3.0 mobile utility clarity: make theme/language controls read as controls. */
@media (max-width: 720px) {
  html body .themeToggle {
    border: 1px solid rgba(226, 232, 240, .9) !important;
    background: rgba(255, 255, 255, .9) !important;
    box-shadow: 0 10px 24px rgba(15, 23, 42, .16) !important;
    backdrop-filter: blur(16px) !important;
  }

  html body .themeToggle::before {
    width: 17px !important;
    height: 17px !important;
    border-radius: 999px !important;
    background: #0f172a !important;
    box-shadow: inset -6px -4px 0 #ffffff !important;
  }

  html[data-theme="dark"] body .themeToggle {
    border-color: rgba(148, 163, 184, .28) !important;
    background: rgba(15, 23, 42, .88) !important;
    box-shadow: 0 10px 24px rgba(0, 0, 0, .28) !important;
  }

  html[data-theme="dark"] body .themeToggle::before {
    width: 16px !important;
    height: 16px !important;
    background: #facc15 !important;
    box-shadow:
      0 -8px 0 -6px #facc15,
      0 8px 0 -6px #facc15,
      8px 0 0 -6px #facc15,
      -8px 0 0 -6px #facc15,
      6px 6px 0 -6px #facc15,
      -6px -6px 0 -6px #facc15,
      6px -6px 0 -6px #facc15,
      -6px 6px 0 -6px #facc15 !important;
  }

  html[data-theme="dark"] body .languageToggle {
    border-color: rgba(148, 163, 184, .28) !important;
    background: rgba(15, 23, 42, .86) !important;
    box-shadow: 0 10px 24px rgba(0, 0, 0, .28) !important;
  }

  html[data-theme="dark"] body .languageToggle button {
    color: rgba(226, 232, 240, .88) !important;
  }

  html[data-theme="dark"] body .languageToggle button.active {
    color: #0f172a !important;
    background: #f8fafc !important;
  }
}

/* BondMate 3.0 desktop secondary-page focus: compact AI dock away from dense content. */
@media (min-width: 721px) {
  html body:not(:has(.marketPulse)) .aiAssistDock {
    right: 28px !important;
    bottom: 28px !important;
    width: 64px !important;
  }

  html body:not(:has(.marketPulse)) .aiAssistButton {
    grid-template-columns: 40px !important;
    width: 64px !important;
    min-height: 64px !important;
    padding: 12px !important;
    border-radius: 22px !important;
  }

  html body:not(:has(.marketPulse)) .aiAssistButton > span:not(.aiAssistOrb),
  html body:not(:has(.marketPulse)) .aiAssistPreview {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    white-space: nowrap !important;
  }

  html body:not(:has(.marketPulse)) .aiAssistOrb {
    width: 40px !important;
    height: 40px !important;
    border-radius: 15px !important;
  }

  html body .aiAssistDock.footerVisible,
  html body:not(:has(.marketPulse)) .aiAssistDock.footerVisible {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translateY(18px) scale(.96) !important;
  }
}

/* BondMate 3.0 traveler first-screen compression: surface real trips sooner. */
html body .formView:has(.tripDecision)::before {
  height: clamp(72px, 8vw, 96px) !important;
  margin-bottom: 12px !important;
  border-radius: 18px !important;
  background-position: center 48% !important;
}

html body .formView:has(.tripDecision) > .sectionHead:first-of-type {
  max-height: 108px !important;
  min-height: 0 !important;
  height: auto !important;
  padding: 14px 18px !important;
}

html body .formView:has(.tripDecision) > .sectionHead:first-of-type h2 {
  font-size: clamp(1.42rem, 1.55vw, 1.64rem) !important;
  line-height: 1.08 !important;
}

html body .formView:has(.tripDecision) > .sectionHead:first-of-type p {
  -webkit-line-clamp: 1 !important;
}

html body .formView:has(.tripDecision) .travelerRelayHero {
  height: 86px !important;
  max-height: 86px !important;
  padding: 12px 16px !important;
}

html body .formView:has(.tripDecision) .travelerRelayHero strong {
  font-size: 1rem !important;
}

html body .formView:has(.tripDecision) .travelerRelayHero p {
  -webkit-line-clamp: 1 !important;
}

html body .formView:has(.tripDecision) .decisionStrip.tripDecision {
  max-height: 84px !important;
}

html body .formView:has(.tripDecision) .decisionStrip.tripDecision article {
  min-height: 74px !important;
  padding: 12px 14px !important;
}

html body .formView:has(.tripDecision) .decisionStrip.tripDecision svg,
html body .formView:has(.tripDecision) .decisionStrip.tripDecision .glyph {
  width: 44px !important;
  min-width: 44px !important;
  height: 44px !important;
}

html body .formView:has(.tripDecision) .decisionStrip.tripDecision small {
  -webkit-line-clamp: 1 !important;
}

html body:not(:has(.marketPulse)) .panel > .formView:has(.tripDecision) > .matchList.workbench {
  max-height: 56px !important;
}

html body:not(:has(.marketPulse)) .panel > .formView:has(.tripDecision) > .sectionHead:nth-child(7) {
  display: none !important;
}

html body .panel > .formView:has(.tripDecision) > .sectionHead:nth-child(7) {
  display: none !important;
}

html body .formView:has(.tripDecision) > .sectionHead:nth-child(7) {
  display: none !important;
}

html[data-theme] body:not(:has(.marketPulse)) .panel > .formView:has(.tripDecision) > .sectionHead:nth-child(7) {
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

html body .formView:has(.tripDecision) .tripSummary {
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  max-height: 92px !important;
  margin-top: 10px !important;
}

html body .formView:has(.tripDecision) .tripSummary button,
html body .formView:has(.tripDecision) .tripSummary article,
html body .formView:has(.tripDecision) .tripSummary > * {
  min-height: 58px !important;
  padding: 9px 10px !important;
}

html body .formView:has(.tripDecision) .tripFilters {
  margin-top: 8px !important;
}

html body .formView:has(.tripDecision) .tripCard {
  min-height: 0 !important;
  padding: 17px !important;
}

html body .formView:has(.tripDecision) .tripCard .note {
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
  overflow: hidden !important;
}

html body .formView:has(.tripDecision) .tripCard .travelerTrustBadge,
html body .formView:has(.tripDecision) .tripCard .tagRow span:nth-child(n+5) {
  display: none !important;
}

@media (max-width: 720px) {
  html body .formView:has(.tripDecision)::before {
    height: 74px !important;
    margin-bottom: 10px !important;
    border-radius: 16px !important;
  }

  html body .formView:has(.tripDecision) > .sectionHead:first-of-type {
    max-height: 126px !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 14px !important;
  }

  html body .formView:has(.tripDecision) > .sectionHead:first-of-type h2 {
    font-size: 1.46rem !important;
  }

  html body .formView:has(.tripDecision) .travelerRelayHero {
    height: 104px !important;
    max-height: 104px !important;
  }

  html body .formView:has(.tripDecision) .decisionStrip.tripDecision {
    max-height: 88px !important;
  }

  html body:not(:has(.marketPulse)) .panel > .formView:has(.tripDecision) > .matchList.workbench {
    max-height: 58px !important;
  }

  html body .formView:has(.tripDecision) .tripSummary {
    max-height: 104px !important;
    display: flex !important;
    gap: 8px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding-bottom: 4px !important;
    scrollbar-width: none;
  }

  html body .formView:has(.tripDecision) .tripSummary::-webkit-scrollbar {
    display: none;
  }

  html body .formView:has(.tripDecision) .tripSummary button,
  html body .formView:has(.tripDecision) .tripSummary article,
  html body .formView:has(.tripDecision) .tripSummary > * {
    flex: 0 0 calc(50% - 4px) !important;
    min-height: 50px !important;
    padding: 8px 9px !important;
  }
}

/* BondMate 3.0 requests workflow: put creation before explanatory side panels. */
html body:not(:has(.marketPulse)):not(:has(.appShell.view-wish)) .formView:has(.wishForm) > .sectionHead:first-child {
  min-height: 0 !important;
  max-height: 116px !important;
  padding: 16px 20px !important;
}

html body:not(:has(.marketPulse)):not(:has(.appShell.view-wish)) .formView:has(.wishForm) > .sectionHead:first-child h2 {
  font-size: clamp(1.7rem, 2vw, 2.35rem) !important;
  line-height: 1.05 !important;
}

html body:not(:has(.marketPulse)):not(:has(.appShell.view-wish)) .formView:has(.wishPatienceNudge) > .wishPatienceNudge {
  max-height: 86px !important;
  padding: 14px 16px !important;
}

html body:not(:has(.marketPulse)):not(:has(.appShell.view-wish)) .formView:has(.wishPatienceNudge) > .wishPatienceNudge p {
  display: none !important;
}

html body:not(:has(.marketPulse)):not(:has(.appShell.view-wish)) .formView:has(.wishPatienceNudge) > .wishPatienceNudge ol,
html body:not(:has(.marketPulse)):not(:has(.appShell.view-wish)) .formView:has(.wishPatienceNudge) > .wishPatienceNudge li:nth-child(n+2),
html body:not(:has(.marketPulse)):not(:has(.appShell.view-wish)) .formView:has(.wishPatienceNudge) > .wishPatienceNudge .softButton {
  display: none !important;
}

html body:not(:has(.marketPulse)):not(:has(.appShell.view-wish)) .formView:has(.wishPatienceNudge) .wishInspirationStrip {
  display: none !important;
}

html body:not(:has(.marketPulse)):not(:has(.appShell.view-wish)) .formView:has(.wishPatienceNudge) .wishInspirationStrip .wishInspirationPhoto {
  height: 96px !important;
  min-height: 96px !important;
}

html body:not(:has(.marketPulse)):not(:has(.appShell.view-wish)) .formView:has(.wishPatienceNudge) .wishInspirationStrip article:nth-child(n+2) {
  display: none !important;
}

html body:not(:has(.marketPulse)):not(:has(.appShell.view-wish)) .formView:has(.wishPatienceNudge) .decisionStrip.wishDecision {
  grid-template-columns: 1fr !important;
  max-height: 76px !important;
  overflow: hidden !important;
}

html body:not(:has(.marketPulse)):not(:has(.appShell.view-wish)) .formView:has(.wishPatienceNudge) .decisionStrip.wishDecision article:not(.decisionPrimary) {
  display: none !important;
}

html body:not(:has(.marketPulse)):not(:has(.appShell.view-wish)) .formView:has(.wishPatienceNudge) .decisionStrip.wishDecision article {
  min-height: 66px !important;
  padding: 10px 12px !important;
}

html body:not(:has(.marketPulse)):not(:has(.appShell.view-wish)) .wishForm > .wishModePanel {
  order: 0 !important;
  max-height: 168px !important;
  padding: 14px !important;
  overflow: hidden !important;
}

html body:not(:has(.marketPulse)):not(:has(.appShell.view-wish)) .wishForm > .wishModePanel .sectionHead {
  display: none !important;
}

html body:not(:has(.marketPulse)):not(:has(.appShell.view-wish)) .wishForm > .wishModePanel .wishModeGrid {
  gap: 10px !important;
}

html body:not(:has(.marketPulse)):not(:has(.appShell.view-wish)) .wishForm > .wishModePanel .wishModeCard {
  min-height: 76px !important;
  padding: 12px !important;
}

html body:not(:has(.marketPulse)):not(:has(.appShell.view-wish)) .wishForm > .wishModePanel .wishModeCard small {
  -webkit-line-clamp: 2 !important;
}

html body:not(:has(.marketPulse)):not(:has(.appShell.view-wish)) .wishForm > .guestFlowNudge,
html body:not(:has(.marketPulse)):not(:has(.appShell.view-wish)) .wishForm > .empty {
  order: 1 !important;
}

html body:not(:has(.marketPulse)):not(:has(.appShell.view-wish)) .wishForm > .guestFlowNudge.wish {
  display: none !important;
}

html body:not(:has(.marketPulse)):not(:has(.appShell.view-wish)) .wishForm > label:not(.wide):not(.wishPhotoUpload),
html body:not(:has(.marketPulse)):not(:has(.appShell.view-wish)) .wishForm > label.wide:not(.wishPhotoUpload),
html body:not(:has(.marketPulse)):not(:has(.appShell.view-wish)) .wishForm > .field,
html body:not(:has(.marketPulse)):not(:has(.appShell.view-wish)) .wishForm > .inputField,
html body:not(:has(.marketPulse)):not(:has(.appShell.view-wish)) .wishForm > .wishPhotoUpload,
html body:not(:has(.marketPulse)):not(:has(.appShell.view-wish)) .wishForm > .estimate,
html body:not(:has(.marketPulse)):not(:has(.appShell.view-wish)) .wishForm > .splitAction:not(:last-child) {
  order: 2 !important;
}

html body:not(:has(.marketPulse)):not(:has(.appShell.view-wish)) .wishForm > .splitAction:last-child {
  order: 3 !important;
}

html body:not(:has(.marketPulse)):not(:has(.appShell.view-wish)) .wishForm > .wishLivePreview {
  order: 4 !important;
  grid-row: auto !important;
}

html body:not(:has(.marketPulse)):not(:has(.appShell.view-wish)) .wishForm > .wishCostBreakdown {
  order: 5 !important;
  grid-row: auto !important;
}

@media (max-width: 720px) {
  html body:not(:has(.marketPulse)):not(:has(.appShell.view-wish)) .formView:has(.wishForm) > .sectionHead:first-child {
    max-height: 112px !important;
    padding: 16px !important;
  }

  html body:not(:has(.marketPulse)):not(:has(.appShell.view-wish)) .formView:has(.wishForm) > .sectionHead:first-child h2 {
    font-size: 2.1rem !important;
  }

  html body:not(:has(.marketPulse)):not(:has(.appShell.view-wish)) .formView:has(.wishPatienceNudge) > .wishPatienceNudge {
    max-height: 88px !important;
  }

  html body:not(:has(.marketPulse)):not(:has(.appShell.view-wish)) .formView:has(.wishPatienceNudge) .wishInspirationStrip {
    display: none !important;
  }

  html body:not(:has(.marketPulse)):not(:has(.appShell.view-wish)) .formView:has(.wishPatienceNudge) .decisionStrip.wishDecision {
    display: none !important;
  }

  html body:not(:has(.marketPulse)):not(:has(.appShell.view-wish)) .wishForm > .wishLivePreview,
  html body:not(:has(.marketPulse)):not(:has(.appShell.view-wish)) .wishForm > .wishCostBreakdown {
    max-height: 260px !important;
    overflow: hidden !important;
  }

  html body:not(:has(.marketPulse)):not(:has(.appShell.view-wish)) .wishForm > .wishModePanel {
    max-height: 132px !important;
  }

  html body:has(.wishForm) .aiAssistDock {
    top: 108px !important;
    right: 18px !important;
    bottom: auto !important;
  }
}

/* BondMate 3.0 orders mobile rhythm: keep empty-state actions above the fold. */
@media (max-width: 720px) {
  html body .ordersView .orderSummary {
    display: flex !important;
    gap: 8px !important;
    max-height: 76px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding: 2px 2px 6px !important;
    scrollbar-width: none;
  }

  html body .ordersView .orderSummary::-webkit-scrollbar {
    display: none;
  }

  html body .ordersView .orderSummary button,
  html body .ordersView .orderSummary article,
  html body .ordersView .orderSummary > * {
    flex: 0 0 124px !important;
    min-height: 58px !important;
    padding: 8px 10px !important;
  }

  html body .ordersView .orderCards {
    margin-top: 12px !important;
  }
}

/* BondMate 3.0 marketplace reveal pass: hero should invite, not monopolize. */
@media (min-width: 1100px) {
  html body:has(.marketPulse) .heroProduct.heroSearchFirst {
    min-height: 0 !important;
    height: min(620px, calc(100vh - 92px)) !important;
    padding: 46px 56px 42px !important;
  }

  html body:has(.marketPulse) .heroProduct.heroSearchFirst h1::before {
    font-size: clamp(2.55rem, 3.4vw, 3.55rem) !important;
  }

  html body:has(.marketPulse) .heroProduct.heroSearchFirst p {
    max-width: 52ch !important;
    margin-block: 6px 8px !important;
    line-height: 1.55 !important;
  }

  html body:has(.marketPulse) .heroProduct.heroSearchFirst .heroSearchPanel {
    max-width: 700px !important;
    margin-top: 12px !important;
  }

  html body:has(.marketPulse) .heroProduct.heroSearchFirst .marketplaceHeroPanel {
    max-height: 380px !important;
    align-self: center !important;
  }

  html body:has(.marketPulse) .marketPulse {
    margin-top: 44px !important;
  }

  html body:has(.marketPulse) .aiAssistDock {
    top: 720px !important;
    right: 28px !important;
    bottom: auto !important;
    width: 64px !important;
  }

  html body:has(.marketPulse) .aiAssistButton {
    grid-template-columns: 40px !important;
    width: 64px !important;
    min-height: 64px !important;
    padding: 12px !important;
    border-radius: 22px !important;
  }

  html body:has(.marketPulse) .aiAssistButton > span:not(.aiAssistOrb),
  html body:has(.marketPulse) .aiAssistPreview {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    white-space: nowrap !important;
  }

  html body:has(.marketPulse) .aiAssistOrb {
    width: 40px !important;
    height: 40px !important;
    border-radius: 15px !important;
  }
}

@media (max-width: 720px) {
  html body:has(.marketPulse) .heroProduct.heroSearchFirst {
    height: 560px !important;
    min-height: 0 !important;
    padding: 22px 18px 28px !important;
  }

  html body:has(.marketPulse) .heroProduct.heroSearchFirst h1::before {
    font-size: clamp(1.78rem, 8vw, 2.18rem) !important;
    line-height: 1.02 !important;
  }

  html body:has(.marketPulse) .heroProduct.heroSearchFirst p {
    -webkit-line-clamp: 2 !important;
    margin-block: 4px !important;
    font-size: .86rem !important;
    line-height: 1.45 !important;
  }

  html body:has(.marketPulse) .heroProduct.heroSearchFirst .heroSearchPanel {
    margin-top: 8px !important;
    padding: 9px !important;
  }

  html body:has(.marketPulse) .heroProduct.heroSearchFirst .heroSearchField:nth-of-type(n+3) {
    display: none !important;
  }

  html body:has(.marketPulse) .heroProduct.heroSearchFirst .heroSearchField,
  html body:has(.marketPulse) .heroProduct.heroSearchFirst .heroSearchSubmit {
    min-height: 46px !important;
  }

  html body:has(.marketPulse) .marketPulse {
    margin-top: 18px !important;
  }

  html body:has(.marketPulse) .aiAssistDock {
    top: 574px !important;
    right: 16px !important;
    bottom: auto !important;
    width: 54px !important;
  }

  html body:has(.marketPulse) .aiAssistButton {
    grid-template-columns: 34px !important;
    width: 54px !important;
    min-height: 54px !important;
    padding: 10px !important;
    border-radius: 18px !important;
  }

  html body:has(.marketPulse) .aiAssistButton > span:not(.aiAssistOrb),
  html body:has(.marketPulse) .aiAssistPreview {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    white-space: nowrap !important;
  }

  html body:has(.marketPulse) .aiAssistOrb {
    width: 34px !important;
    height: 34px !important;
    border-radius: 13px !important;
  }
}

/* BondMate 3.0 Explore polish pass: tighter marketplace browsing rhythm. */
@media (min-width: 1101px) {
  html body .mapReadableView .mapGuidePanel {
    min-height: 232px !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    column-gap: 28px !important;
    padding: 32px 42px !important;
  }

  html body .mapReadableView .mapGuidePanel h3 {
    max-width: 780px !important;
    font-size: clamp(2.2rem, 2.8vw, 2.55rem) !important;
    line-height: 1.12 !important;
  }

  html body .mapReadableView .mapGuidePanel p {
    max-width: 760px !important;
    -webkit-line-clamp: 2 !important;
  }

  html body .mapReadableView .mapGuidePanel .mapGuideActions {
    align-self: center !important;
    margin-right: 0 !important;
  }

  html body .mapReadableView .mapGuidePanel::before {
    right: 34px !important;
    top: 28px !important;
    width: min(30%, 360px) !important;
    height: calc(100% - 56px) !important;
    opacity: .62 !important;
  }

  html body .mapReadableView .mapGuidePanel::after {
    right: 54px !important;
    bottom: 38px !important;
    width: min(26%, 330px) !important;
    opacity: .72 !important;
  }

  html body .mapReadableView .decisionStrip.mapDecision {
    min-height: 92px !important;
  }
}

@media (max-width: 720px) {
  html body .mapReadableView .mapGuidePanel {
    max-height: none !important;
    overflow: visible !important;
  }

  html body .mapReadableView .mapGuidePanel h3 {
    font-size: 1.75rem !important;
    line-height: 1.16 !important;
  }

  html body .mapReadableView .mapGuidePanel p {
    -webkit-line-clamp: 2 !important;
  }

  html body:not(:has(.marketPulse)) .policyGrid {
    gap: 12px !important;
    padding-right: 0 !important;
    mask-image: none !important;
  }

  html body:not(:has(.marketPulse)) .policyGrid .policyItem {
    flex-basis: auto !important;
    min-height: 0 !important;
  }

  html body .accountView.guestAccount.standaloneGuestAccount .guestAccountEntry::after {
    content: "AI Match Assistant\A 8 位符合旅人，91% 成功率" !important;
    max-height: 52px !important;
    padding: 10px 12px !important;
    line-height: 1.25 !important;
  }
}

/* Keep country swatches recognizable after dark-mode surface overrides. */
html body .countryFlag.flag-jp,
html[data-theme="dark"] body .countryFlag.flag-jp {
  background: radial-gradient(circle at 50% 50%, #bc002d 0 30%, transparent 31%), #fff !important;
}

html body .countryFlag.flag-kr,
html[data-theme="dark"] body .countryFlag.flag-kr {
  background: radial-gradient(circle at 45% 45%, #c60c30 0 18%, transparent 19%), radial-gradient(circle at 55% 55%, #003478 0 18%, transparent 19%), #fff !important;
}

html body .countryFlag.flag-us,
html[data-theme="dark"] body .countryFlag.flag-us {
  background: linear-gradient(#3c3b6e 0 0) 0 0 / 54% 54% no-repeat, repeating-linear-gradient(#b22234 0 7.7%, #fff 7.7% 15.4%) !important;
}

html body .countryFlag.flag-tw,
html[data-theme="dark"] body .countryFlag.flag-tw {
  background: linear-gradient(90deg, #002b7f 0 46%, transparent 46%), linear-gradient(#fe0000 0 100%) !important;
}

html body .countryFlag.flag-fr,
html[data-theme="dark"] body .countryFlag.flag-fr {
  background: linear-gradient(90deg, #0055a4 0 33%, #fff 33% 66%, #ef4135 66% 100%) !important;
}

html body .countryFlag.flag-de,
html[data-theme="dark"] body .countryFlag.flag-de {
  background: linear-gradient(#000 0 33%, #dd0000 33% 66%, #ffce00 66% 100%) !important;
}

/* Emergency local visual repair: keep the traveler workbench from stacking hero treatments. */
@media (min-width: 1100px) {
  html body:not(:has(.marketPulse)) .panel > .formView:has(.tripDecision)::before {
    display: none !important;
    content: none !important;
  }

  html body:not(:has(.marketPulse)) .panel > .formView:has(.tripDecision) {
    display: grid !important;
    gap: 16px !important;
    overflow: visible !important;
  }

  html body:not(:has(.marketPulse)) .panel > .formView:has(.tripDecision) > .sectionHead:first-of-type {
    min-height: 0 !important;
    max-height: none !important;
    height: auto !important;
    margin: 0 !important;
    padding: 28px 32px !important;
    border-radius: 24px !important;
    background: linear-gradient(135deg, rgba(255, 255, 255, .96), rgba(240, 253, 250, .74)) !important;
  }

  html body:not(:has(.marketPulse)) .panel > .formView:has(.tripDecision) > .sectionHead:first-of-type::after {
    display: none !important;
    content: none !important;
  }

  html body:not(:has(.marketPulse)) .panel > .formView:has(.tripDecision) > .sectionHead:first-of-type h2 {
    font-size: clamp(2rem, 2.4vw, 2.65rem) !important;
    line-height: 1.08 !important;
    max-width: 720px !important;
    gap: 12px !important;
    padding: 0 !important;
    border: 0 !important;
    background: none !important;
    box-shadow: none !important;
  }

  html body:not(:has(.marketPulse)) .panel > .formView:has(.tripDecision) > .sectionHead:first-of-type h2::before {
    width: 14px !important;
    height: 14px !important;
    min-width: 14px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: #00a699 !important;
    box-shadow: 0 0 0 8px rgba(0, 166, 153, .12) !important;
  }

  html body:not(:has(.marketPulse)) .panel > .formView:has(.tripDecision) > .sectionHead:first-of-type p {
    max-width: 760px !important;
    -webkit-line-clamp: 2 !important;
  }

  html body:not(:has(.marketPulse)) .panel > .formView:has(.tripDecision) .travelerRelayHero,
  html body:not(:has(.marketPulse)) .panel > .formView:has(.tripDecision) .decisionStrip.tripDecision,
  html body:not(:has(.marketPulse)) .panel > .formView:has(.tripDecision) .matchList.workbench,
  html body:not(:has(.marketPulse)) .panel > .formView:has(.tripDecision) .tripSummary,
  html body:not(:has(.marketPulse)) .panel > .formView:has(.tripDecision) .tripFilters,
  html body:not(:has(.marketPulse)) .panel > .formView:has(.tripDecision) .tripList {
    margin-top: 0 !important;
  }
}

@media (max-width: 720px) {
  html body:not(:has(.marketPulse)):has(.wishForm) .aiAssistDock,
  html body:not(:has(.marketPulse)):has(.tripDecision) .aiAssistDock {
    top: auto !important;
    right: 17px !important;
    bottom: calc(90px + env(safe-area-inset-bottom, 0px)) !important;
    width: 54px !important;
  }
}

/* Emergency local visual repair: desktop pages should scroll as pages, not nested panes. */
@media (min-width: 1100px) {
  html body:has(.marketPulse) .marketPulse,
  html body:not(:has(.marketPulse)):not(:has(.appShell.view-wish)) .formView:has(.wishPatienceNudge) .wishForm,
  html body:not(:has(.marketPulse)) .panel > .policyQaView,
  html body:not(:has(.marketPulse)) .workspace .policyQaView,
  html body:not(:has(.marketPulse)) .policyQaView {
    max-height: none !important;
    height: auto !important;
    overflow: visible !important;
  }

  html body .marketPulse,
  html body .mapReadableView,
  html body .formView,
  html body .ordersView,
  html body .accountView,
  html body .policyQaView,
  html body .panel > section,
  html body .wishForm,
  html body .tripList,
  html body .orderCards,
  html body .policyGrid,
  html body .policyQaColumns,
  html body .areaSpotlight,
  html body .areaDirectory {
    max-height: none !important;
    overflow: visible !important;
  }

  html body .marketPulse {
    height: auto !important;
  }

  html body .accountView.guestAccount.standaloneGuestAccount {
    width: min(1120px, calc(100vw - 420px)) !important;
    max-width: 1120px !important;
    grid-template-columns: minmax(440px, .95fr) minmax(460px, 1.05fr) !important;
  }

  html body .accountView.guestAccount.standaloneGuestAccount .guestAccountEntry h3 {
    font-size: clamp(2.4rem, 3vw, 3.6rem) !important;
    line-height: 1.04 !important;
    word-break: keep-all !important;
  }

  html body .accountView.guestAccount.standaloneGuestAccount .guestAccountEntry {
    min-height: 520px !important;
  }
}

/* Emergency local visual repair v2: remove remaining iframe-like inner scroll panels and loosen desktop spacing. */
@media (min-width: 1100px) {
  html body:has(.marketPulse) :where(.pulseFeed, .pulseTrips, .tripList),
  html body .mapReadableView :where(.areaSpotlight, .areaDirectory),
  html body:not(:has(.marketPulse)) .formView:has(.tripDecision) :where(.tripList, .wishForm),
  html body:not(:has(.marketPulse)) .panel > section:has(.policyGrid),
  html body:not(:has(.marketPulse)) .selfServiceGuide {
    max-height: none !important;
    height: auto !important;
    overflow: visible !important;
  }

  html body:has(.marketPulse) :where(.pulseFeed, .pulseTrips),
  html body .mapReadableView :where(.areaSpotlight, .areaDirectory),
  html body:not(:has(.marketPulse)) .panel > section:has(.policyGrid),
  html body:not(:has(.marketPulse)) .selfServiceGuide {
    padding: clamp(26px, 2vw, 38px) !important;
  }

  html body:not(:has(.marketPulse)) :where(.formView, .mapReadableView, .ordersView, .policyQaView) {
    gap: 22px !important;
  }

  html body:not(:has(.marketPulse)) :where(.mapGuidePanel, .travelerRelayHero, .decisionStrip, .wishPatienceNudge, .selfServiceGuide) {
    padding: clamp(24px, 1.8vw, 34px) !important;
  }

  html body:not(:has(.marketPulse)):not(:has(.appShell.view-wish)) .formView:has(.wishPatienceNudge) .wishForm,
  html body:not(:has(.marketPulse)) .formView:has(.tripDecision) .wishForm {
    padding: 30px 34px 38px !important;
  }

  html body:not(:has(.marketPulse)) :where(.sectionHead, .mapGuidePanel, .travelerRelayHero, .decisionStrip, .wishPatienceNudge, .selfServiceGuide, .policyQaView, .ordersView, .formView, .mapReadableView) {
    border-radius: 28px !important;
  }
}

/* Emergency local visual repair v3: explicit overrides for old capped desktop panes. */
@media (min-width: 1100px) {
  html body:has(.marketPulse) .pulseFeed,
  html body:has(.marketPulse) .pulseTrips,
  html body:has(.marketPulse) .viewGrid .tripList,
  html body:has(.marketPulse) .viewGrid .matchList,
  html body .mapReadableView .areaSpotlight,
  html body .mapReadableView .areaDirectory,
  html body .formView:has(.tripDecision) .tripList,
  html body .formView:has(.tripDecision) .wishForm,
  html body:not(:has(.marketPulse)) .panel > section:first-child:has(.policyGrid),
  html body:not(:has(.marketPulse)) .panel > section:has(.policyGrid),
  html body:not(:has(.marketPulse)) .selfServiceGuide,
  html body:not(:has(.marketPulse)) .selfServiceGuide .supportCard {
    min-height: 0 !important;
    max-height: none !important;
    height: auto !important;
    overflow: visible !important;
    scrollbar-width: auto !important;
  }

  html body:has(.marketPulse) .pulseFeed,
  html body:has(.marketPulse) .pulseTrips,
  html body .mapReadableView .areaSpotlight,
  html body .mapReadableView .areaDirectory,
  html body:not(:has(.marketPulse)) .panel > section:first-child:has(.policyGrid),
  html body:not(:has(.marketPulse)) .selfServiceGuide {
    padding: clamp(30px, 2.25vw, 42px) !important;
  }

  html body .formView:has(.tripDecision) .wishForm {
    padding: 34px 38px 44px !important;
  }

  html body:not(:has(.marketPulse)) .panel > section:first-child:has(.policyGrid) .policyItem,
  html body:not(:has(.marketPulse)) .selfServiceGuide .supportCard,
  html body .mapReadableView .areaDirectory .areaRow,
  html body .mapReadableView .areaHumanCard,
  html body:has(.marketPulse) .pulseItem,
  html body .tripList .tripCard {
    padding: clamp(18px, 1.45vw, 26px) !important;
  }
}

/* Emergency local visual repair v4: beat the exact trip form cap that was still winning by specificity. */
@media (min-width: 1100px) {
  html body:not(:has(.marketPulse)) .panel > .formView:has(.tripDecision) > .wishForm {
    min-height: 0 !important;
    max-height: none !important;
    height: auto !important;
    overflow: visible !important;
    padding: 34px 38px 44px !important;
  }
}

/* Emergency local visual repair v5: remove deeper clipped desktop sections discovered in Chrome. */
@media (min-width: 1100px) {
  html body:has(.marketPulse) .pulseCountryRail,
  html body:has(.marketPulse) .featuredWishScroller,
  html body:has(.marketPulse) .marketPulse .viewGrid > section,
  html body:not(:has(.marketPulse)) .policyQaView .adminColumns,
  html body:not(:has(.marketPulse)) .formView:has(.tripDecision) .travelerRelayHero,
  html body:not(:has(.marketPulse)) .formView:has(.tripDecision) .decisionStrip.tripDecision,
  html body:not(:has(.marketPulse)) .formView:has(.tripDecision) .matchList.workbench {
    min-height: 0 !important;
    max-height: none !important;
    height: auto !important;
    overflow: visible !important;
    scrollbar-width: auto !important;
  }

  html body:has(.marketPulse) .pulseCountryRail,
  html body:has(.marketPulse) .marketPulse .viewGrid > section,
  html body:not(:has(.marketPulse)) .policyQaView .adminColumns,
  html body:not(:has(.marketPulse)) .formView:has(.tripDecision) .travelerRelayHero,
  html body:not(:has(.marketPulse)) .formView:has(.tripDecision) .decisionStrip.tripDecision {
    padding: clamp(26px, 2vw, 38px) !important;
  }

  html body:not(:has(.marketPulse)) .formView:has(.tripDecision) .matchList.workbench {
    padding: 24px !important;
  }

  html body:not(:has(.marketPulse)) .formView:has(.tripDecision) .decisionStrip.tripDecision article {
    min-height: 0 !important;
    height: auto !important;
    overflow: visible !important;
    padding: 18px 20px !important;
  }
}

/* Emergency local visual repair v6: exact desktop caps from wish, trip and trust detail panes. */
@media (min-width: 1100px) {
  html body:not(:has(.marketPulse)):not(:has(.appShell.view-wish)) .panel > .formView:has(.wishPatienceNudge) > .decisionStrip.wishDecision,
  html body:not(:has(.marketPulse)):not(:has(.appShell.view-wish)) .panel > .formView:has(.wishPatienceNudge) .wishLivePreview.wide,
  html body:not(:has(.marketPulse)):not(:has(.appShell.view-wish)) .panel > .formView:has(.wishPatienceNudge) .wishCostBreakdown.wide,
  html body:not(:has(.marketPulse)) .panel > .formView:has(.tripDecision) > .matchList.workbench,
  html body:not(:has(.marketPulse)) .panel > section:first-child:has(.policyGrid) .adminColumns,
  html body:not(:has(.marketPulse)) .panel .policyQaView .adminColumns,
  html body:not(:has(.marketPulse)) .panel .adminColumns {
    min-height: 0 !important;
    max-height: none !important;
    height: auto !important;
    overflow: visible !important;
    scrollbar-width: auto !important;
  }

  html body:not(:has(.marketPulse)):not(:has(.appShell.view-wish)) .panel > .formView:has(.wishPatienceNudge) > .decisionStrip.wishDecision,
  html body:not(:has(.marketPulse)) .panel > .formView:has(.tripDecision) > .matchList.workbench,
  html body:not(:has(.marketPulse)) .panel .adminColumns {
    padding: clamp(24px, 1.8vw, 34px) !important;
  }

  html body:not(:has(.marketPulse)):not(:has(.appShell.view-wish)) .panel > .formView:has(.wishPatienceNudge) .wishLivePreview.wide,
  html body:not(:has(.marketPulse)):not(:has(.appShell.view-wish)) .panel > .formView:has(.wishPatienceNudge) .wishCostBreakdown.wide {
    padding: clamp(22px, 1.6vw, 30px) !important;
  }
}

/* Emergency local visual repair v7: marketplace view grid sits outside .marketPulse. */
@media (min-width: 1100px) {
  html body:has(.marketPulse) .panel > .viewGrid > section,
  html body:has(.marketPulse) .viewGrid > section {
    min-height: 0 !important;
    max-height: none !important;
    height: auto !important;
    overflow: visible !important;
    padding: clamp(30px, 2.15vw, 42px) !important;
  }
}

/* BondMate 3.0 desktop canvas: use wide screens instead of leaving large empty gutters. */
@media (min-width: 1280px) {
  html body:has(.marketPulse) .workspace {
    width: min(100%, 1880px) !important;
    max-width: none !important;
    grid-template-columns: 236px minmax(0, 1fr) !important;
    gap: clamp(22px, 2vw, 38px) !important;
    margin-inline: auto !important;
    padding-inline: clamp(24px, 2.8vw, 56px) !important;
  }

  html body:has(.marketPulse) .panel {
    width: 100% !important;
    max-width: none !important;
  }

  html body:has(.marketPulse) .marketPulse {
    width: 100% !important;
    max-width: none !important;
    grid-template-columns: minmax(0, 1.9fr) minmax(300px, .85fr) !important;
  }

  html body:has(.marketPulse) .marketPulseGrid {
    grid-template-columns: minmax(0, 1.15fr) minmax(300px, .85fr) !important;
  }

  html body:has(.marketPulse) .viewGrid,
  html body:has(.marketPulse) .trustedMembersPanel,
  html body:has(.marketPulse) .featuredWishStrip,
  html body:has(.marketPulse) .departureBoard,
  html body:has(.marketPulse) .trendBoard {
    width: 100% !important;
    max-width: none !important;
  }

  html body:has(.marketPulse) .viewGrid {
    grid-template-columns: minmax(420px, .95fr) minmax(560px, 1.25fr) !important;
    gap: clamp(18px, 1.8vw, 32px) !important;
  }

  html body:has(.marketPulse) .trustedMembersPanel {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  }
}

/* Keep the market loading style marker invisible while it stabilizes body:has(.marketPulse) on refresh. */
html body .marketPulse[data-style-marker="market"] {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

/* BondMate 3.0 stability layer: make the active view drive layout before data finishes loading. */
html body:has(.appShell.view-market),
html body:has(.appShell.view-market) .appShell {
  background:
    radial-gradient(circle at 8% 0%, rgba(0, 166, 153, .14), transparent 28rem),
    radial-gradient(circle at 96% 10%, rgba(255, 56, 92, .13), transparent 32rem),
    #f8fafc !important;
}

html[data-theme="dark"] body:has(.appShell.view-market),
html[data-theme="dark"] body:has(.appShell.view-market) .appShell {
  background:
    radial-gradient(circle at 8% 0%, rgba(0, 166, 153, .18), transparent 30rem),
    radial-gradient(circle at 96% 10%, rgba(255, 56, 92, .16), transparent 34rem),
    #07111f !important;
}

html body:has(.appShell.view-market) .topBarV2 {
  background: rgba(7, 17, 31, .82) !important;
  border-bottom: 1px solid rgba(148, 163, 184, .18) !important;
  backdrop-filter: blur(22px) saturate(1.25) !important;
}

html body:has(.appShell.view-market) .topBarNav {
  gap: 8px !important;
  padding: 7px !important;
  border-radius: 22px !important;
  background: rgba(248, 250, 252, .18) !important;
}

html body:has(.appShell.view-market) .topBarNav button {
  min-height: 42px !important;
  padding: 0 16px !important;
  border-radius: 15px !important;
  background: rgba(255, 255, 255, .12) !important;
  color: rgba(255, 255, 255, .88) !important;
  box-shadow: none !important;
}

html body:has(.appShell.view-market) .topBarNav button:hover,
html body:has(.appShell.view-market) .topBarNav button.active {
  background: rgba(255, 255, 255, .26) !important;
  transform: translateY(-1px) !important;
}

@media (min-width: 1180px) {
  html body:has(.appShell.view-market) .heroProduct.heroSearchFirst {
    width: min(100%, 1904px) !important;
    min-height: 0 !important;
    height: min(760px, calc(100svh - 96px)) !important;
    margin: 0 auto !important;
    padding: clamp(44px, 4vw, 76px) clamp(56px, 4.6vw, 88px) !important;
    grid-template-columns: minmax(0, 1.05fr) minmax(420px, .78fr) !important;
    gap: clamp(34px, 4vw, 72px) !important;
    overflow: hidden !important;
    border-radius: 0 0 28px 28px !important;
  }

  html body:has(.appShell.view-market) .heroProduct.heroSearchFirst .heroCopy {
    max-width: 900px !important;
  }

  html body:has(.appShell.view-market) .heroProduct.heroSearchFirst h1 {
    max-width: 760px !important;
    font-size: clamp(3.35rem, 4.55vw, 5.35rem) !important;
    line-height: .97 !important;
    letter-spacing: 0 !important;
  }

  html body:has(.appShell.view-market) .heroProduct.heroSearchFirst p {
    max-width: 670px !important;
    margin-top: 22px !important;
    font-size: clamp(1rem, 1.02vw, 1.18rem) !important;
    line-height: 1.75 !important;
  }

  html body:has(.appShell.view-market) .heroProduct.heroSearchFirst .heroSearchPanel {
    width: min(100%, 700px) !important;
    margin-top: 30px !important;
    padding: 10px !important;
    border-radius: 26px !important;
    background: rgba(15, 23, 42, .76) !important;
    box-shadow: 0 22px 54px rgba(255, 56, 92, .16) !important;
  }

  html body:has(.appShell.view-market) .heroProduct.heroSearchFirst .heroSearchGrid {
    grid-template-columns: minmax(220px, 1.25fr) minmax(180px, .8fr) minmax(150px, .65fr) !important;
    gap: 10px !important;
  }

  html body:has(.appShell.view-market) .heroProduct.heroSearchFirst .heroSearchField,
  html body:has(.appShell.view-market) .heroProduct.heroSearchFirst .heroSearchSubmit {
    min-height: 66px !important;
    border-radius: 18px !important;
  }

  html body:has(.appShell.view-market) .heroProduct.heroSearchFirst .marketplaceHeroPanel {
    align-self: center !important;
    width: 100% !important;
    max-width: 560px !important;
    height: clamp(410px, 31vw, 450px) !important;
    min-height: 410px !important;
    padding: clamp(22px, 1.8vw, 28px) !important;
    border-radius: 30px !important;
    overflow: hidden !important;
    background: rgba(15, 23, 42, .82) !important;
    box-shadow: 0 24px 70px rgba(15, 23, 42, .28) !important;
  }

  html body:has(.appShell.view-market) .marketplaceHeroPanel .heroVisual {
    height: clamp(238px, 17vw, 270px) !important;
    aspect-ratio: 16 / 9 !important;
    margin: 0 !important;
    overflow: hidden !important;
    border-radius: 20px !important;
  }

  html body:has(.appShell.view-market) .marketplaceHeroPanel .heroVisual img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    transform: scale(1.01) !important;
  }

  html body:has(.appShell.view-market) .marketplaceHeroPanel::after {
    left: clamp(22px, 1.8vw, 28px) !important;
    right: clamp(22px, 1.8vw, 28px) !important;
    bottom: clamp(22px, 1.8vw, 28px) !important;
    min-height: 92px !important;
    border-radius: 18px !important;
  }

  html body:has(.appShell.view-market) .marketplaceHeroPanel .quickStartHead,
  html body:has(.appShell.view-market) .marketplaceHeroPanel .quickStartGrid {
    display: none !important;
  }

  html body:has(.appShell.view-market) .workspace {
    width: min(100%, 1904px) !important;
    max-width: none !important;
    grid-template-columns: 224px minmax(0, 1fr) !important;
    gap: clamp(20px, 1.7vw, 34px) !important;
    margin: 0 auto !important;
    padding: 32px clamp(28px, 2.4vw, 46px) 70px !important;
  }

  html body:has(.appShell.view-market) .panel {
    max-width: none !important;
    width: 100% !important;
  }

  html body:has(.appShell.view-market) .rail {
    top: 108px !important;
    border-radius: 22px !important;
    padding: 20px 12px !important;
  }

  html body:has(.appShell.view-market) .marketPulse,
  html body:has(.appShell.view-market) .marketPulseGrid,
  html body:has(.appShell.view-market) .viewGrid {
    width: 100% !important;
    max-width: none !important;
  }

  html body:has(.appShell.view-market) .marketPulse {
    grid-template-columns: minmax(0, 1.55fr) minmax(320px, .82fr) !important;
    gap: clamp(22px, 2vw, 36px) !important;
  }

  html body:has(.appShell.view-market) .marketPulseGrid,
  html body:has(.appShell.view-market) .viewGrid {
    grid-template-columns: minmax(0, 1.05fr) minmax(360px, .95fr) !important;
    gap: clamp(22px, 2vw, 34px) !important;
  }
}

@media (max-width: 1179px) {
  html body:has(.appShell.view-market) .heroProduct.heroSearchFirst {
    min-height: auto !important;
    height: auto !important;
    padding: 34px 20px 42px !important;
    border-radius: 0 0 24px 24px !important;
  }

  html body:has(.appShell.view-market) .workspace {
    padding-inline: 16px !important;
  }
}

/* BondMate 3.0 hero correction: remove legacy generated headline and keep first viewport composed. */
html body:has(.appShell.view-market) .heroProduct.heroSearchFirst h1::before,
html body:has(.appShell.view-market) .heroProduct.heroSearchFirst h2::before {
  content: none !important;
  display: none !important;
}

@media (min-width: 1180px) {
  html body:has(.appShell.view-market) .heroProduct.heroSearchFirst {
    align-items: center !important;
  }

  html body:has(.appShell.view-market) .heroProduct.heroSearchFirst h1 {
    font-size: clamp(2.9rem, 3.35vw, 4.05rem) !important;
    max-width: 900px !important;
    margin: 0 !important;
  }

  html body:has(.appShell.view-market) .heroProduct.heroSearchFirst .heroTitleEn,
  html body:has(.appShell.view-market) .heroProduct.heroSearchFirst .heroTitleZh {
    display: block !important;
    letter-spacing: 0 !important;
  }

  html body:has(.appShell.view-market) .heroProduct.heroSearchFirst .heroTitleEn {
    font-size: clamp(3.05rem, 3.65vw, 4.35rem) !important;
    line-height: .94 !important;
  }

  html body:has(.appShell.view-market) .heroProduct.heroSearchFirst .heroTitleZh {
    max-width: 900px !important;
    margin-top: 6px !important;
    font-size: clamp(2.55rem, 2.92vw, 3.5rem) !important;
    line-height: 1.03 !important;
  }

  html body:has(.appShell.view-market) .heroProduct.heroSearchFirst .marketplaceHeroPanel {
    margin: clamp(46px, 5.8vw, 86px) 0 0 !important;
    transform: none !important;
    align-self: start !important;
    justify-self: end !important;
    overflow: visible !important;
  }
}

@media (min-width: 1600px) {
  html body:has(.appShell.view-market) .heroProduct.heroSearchFirst {
    grid-template-columns: minmax(0, .98fr) minmax(420px, .82fr) !important;
  }
}

/* BondMate 3.0 wide app canvas: stop non-home views from floating in a narrow center column. */
@media (min-width: 1280px) {
  html body:has(.appShell.view-admin) .workspace {
    width: min(100%, 1780px) !important;
    max-width: none !important;
    grid-template-columns: 224px minmax(0, 1fr) !important;
    gap: clamp(22px, 2vw, 36px) !important;
    margin-inline: auto !important;
    padding-inline: clamp(28px, 2.8vw, 52px) !important;
  }

  html body:has(.appShell.view-admin) .panel,
  html body:has(.appShell.view-admin) .formView,
  html body:has(.appShell.view-admin) .mapReadableView,
  html body:has(.appShell.view-admin) .ordersView,
  html body:has(.appShell.view-admin) .accountView,
  html body:has(.appShell.view-admin) .policyQaView {
    width: 100% !important;
    max-width: none !important;
  }

  html body:has(.appShell.view-admin) .formView,
  html body:has(.appShell.view-admin) .mapReadableView,
  html body:has(.appShell.view-admin) .ordersView,
  html body:has(.appShell.view-admin) .policyQaView {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* BondMate Material 3 redesign layer. */
:root {
  --m3-primary: #0f766e;
  --m3-on-primary: #ffffff;
  --m3-primary-container: #dff4ef;
  --m3-on-primary-container: #123f3c;
  --m3-secondary: #223b5d;
  --m3-secondary-container: #e8eef6;
  --m3-on-secondary-container: #223b5d;
  --m3-tertiary: #8a654b;
  --m3-tertiary-container: #f7efe5;
  --m3-error: #ba1a1a;
  --m3-surface: #f7f7f4;
  --m3-surface-dim: #e8ede9;
  --m3-surface-bright: #ffffff;
  --m3-surface-container-lowest: #ffffff;
  --m3-surface-container-low: #f4f6f3;
  --m3-surface-container: #eef2ef;
  --m3-surface-container-high: #e8ede9;
  --m3-surface-container-highest: #dfe6e2;
  --m3-on-surface: #18211e;
  --m3-on-surface-variant: #56635e;
  --m3-outline: #75827c;
  --m3-outline-variant: #d4dcd7;
  --m3-inverse-surface: #123f3c;
  --m3-inverse-on-surface: #eef9f7;
  --m3-shadow: 0 1px 2px rgba(16, 23, 20, .05), 0 6px 18px rgba(16, 23, 20, .04);
  --m3-shadow-2: 0 10px 30px rgba(16, 23, 20, .08), 0 2px 8px rgba(16, 23, 20, .04);
  --m3-shadow-3: 0 22px 60px rgba(16, 23, 20, .13), 0 6px 18px rgba(16, 23, 20, .06);
  --m3-radius-xs: 8px;
  --m3-radius-sm: 12px;
  --m3-radius-md: 16px;
  --m3-radius-lg: 24px;
  --m3-radius-xl: 28px;
  --m3-radius-full: 999px;
}

html[data-theme="dark"] {
  --m3-primary: #d0bcff;
  --m3-on-primary: #381e72;
  --m3-primary-container: #4f378b;
  --m3-on-primary-container: #eaddff;
  --m3-secondary: #ccc2dc;
  --m3-secondary-container: #4a4458;
  --m3-tertiary: #efb8c8;
  --m3-tertiary-container: #633b48;
  --m3-error: #ffb4ab;
  --m3-surface: #141218;
  --m3-surface-dim: #141218;
  --m3-surface-bright: #3b383e;
  --m3-surface-container-lowest: #0f0d13;
  --m3-surface-container-low: #1d1b20;
  --m3-surface-container: #211f26;
  --m3-surface-container-high: #2b2930;
  --m3-surface-container-highest: #36343b;
  --m3-on-surface: #e6e0e9;
  --m3-on-surface-variant: #cac4d0;
  --m3-outline: #938f99;
  --m3-outline-variant: #49454f;
  --m3-inverse-surface: #e6e0e9;
  --m3-inverse-on-surface: #322f35;
  --m3-shadow: 0 1px 2px rgba(0, 0, 0, .38), 0 2px 8px rgba(0, 0, 0, .24);
  --m3-shadow-2: 0 2px 6px rgba(0, 0, 0, .32), 0 10px 28px rgba(0, 0, 0, .26);
  --m3-shadow-3: 0 4px 12px rgba(0, 0, 0, .38), 0 18px 42px rgba(0, 0, 0, .30);
}

html body,
html body .appShell {
  background: var(--m3-surface) !important;
  color: var(--m3-on-surface) !important;
}

html body:has(.appShell.view-market),
html body:has(.appShell.view-market) .appShell,
html body:has(.appShell:not(.view-market):not(.view-wish)),
html body:has(.appShell:not(.view-market):not(.view-wish)) .appShell {
  background:
    radial-gradient(circle at 10% 0%, color-mix(in srgb, var(--m3-primary-container) 42%, transparent), transparent 31rem),
    radial-gradient(circle at 96% 8%, color-mix(in srgb, var(--m3-tertiary-container) 36%, transparent), transparent 34rem),
    var(--m3-surface) !important;
}

html body :where(.topBarV2, .topbar) {
  background: color-mix(in srgb, var(--m3-surface-container-low) 88%, transparent) !important;
  border-bottom: 1px solid var(--m3-outline-variant) !important;
  box-shadow: none !important;
  backdrop-filter: blur(18px) saturate(1.08) !important;
}

html body :where(.brandLogo, .brandMark) {
  background: var(--m3-primary-container) !important;
  color: var(--m3-on-primary-container) !important;
  border-radius: var(--m3-radius-md) !important;
  box-shadow: none !important;
}

html body :where(.brandLockup strong, .brandText strong, h1, h2, h3, h4, .sectionHead h2, .marketPulseHead h2) {
  color: var(--m3-on-surface) !important;
  letter-spacing: 0 !important;
}

html body :where(.brandLockup small, .brandText small, p, small, .sectionHead p, .miniMeta, .note) {
  color: var(--m3-on-surface-variant) !important;
}

html body :where(.topBarNav, .tabs, .languageToggle) {
  background: var(--m3-surface-container-high) !important;
  border: 1px solid var(--m3-outline-variant) !important;
  border-radius: var(--m3-radius-full) !important;
  box-shadow: none !important;
}

html body :where(.topBarNav button, .tabs button, .languageToggle button) {
  min-height: 40px !important;
  border: 0 !important;
  border-radius: var(--m3-radius-full) !important;
  background: transparent !important;
  color: var(--m3-on-surface-variant) !important;
  box-shadow: none !important;
  transition: background .18s ease, color .18s ease, box-shadow .18s ease !important;
}

html body :where(.topBarNav button:hover, .tabs button:hover, .languageToggle button:hover) {
  background: color-mix(in srgb, var(--m3-on-surface) 8%, transparent) !important;
  transform: none !important;
}

html body :where(.topBarNav button.active, .tabs button.active, .languageToggle button.active) {
  background: var(--m3-secondary-container) !important;
  color: var(--m3-on-primary-container) !important;
  box-shadow: none !important;
}

html body :where(.themeToggle, .aiAssistButton) {
  background: var(--m3-primary-container) !important;
  color: var(--m3-on-primary-container) !important;
  border: 1px solid transparent !important;
  border-radius: var(--m3-radius-full) !important;
  box-shadow: var(--m3-shadow-2) !important;
}

html body .themeToggle::before {
  background: var(--m3-primary) !important;
}

html body .rail {
  background: var(--m3-surface-container-low) !important;
  border: 1px solid var(--m3-outline-variant) !important;
  border-radius: var(--m3-radius-xl) !important;
  box-shadow: var(--m3-shadow) !important;
}

html body .rail::before,
html body .rail::after {
  display: none !important;
}

html body .rail button {
  min-height: 48px !important;
  border-radius: var(--m3-radius-full) !important;
  background: transparent !important;
  color: var(--m3-on-surface-variant) !important;
  box-shadow: none !important;
  border: 0 !important;
}

html body .rail button:hover {
  background: color-mix(in srgb, var(--m3-on-surface) 8%, transparent) !important;
  color: var(--m3-on-surface) !important;
  transform: none !important;
}

html body .rail button.active {
  background: var(--m3-secondary-container) !important;
  color: var(--m3-on-primary-container) !important;
  box-shadow: none !important;
}

html body :where(.panel, .panelCard, .heroSearchPanel, .quickStartPanel, .marketplaceHeroPanel, .marketPulse, .marketPulseHead, .liveStatsStrip, .pulseFeed, .pulseTrips, .pulseCountryRail, .featuredWishStrip, .trustedMembersPanel, .departureBoard, .trendBoard, .viewGrid > section, .sectionHead, .mapGuidePanel, .travelerRelayHero, .decisionStrip, .wishPatienceNudge, .selfServiceGuide, .policyQaView, .ordersView, .formView, .mapReadableView, .wishForm, .accountPanel, .accountCard, .policyItem, .policyFaqItem, .policyQaColumns > div, .policyFinanceNote, .tripCard, .matchCard, .orderCard, .countryCard, .areaHumanCard, .areaList article, .adminTile, .supportCard, .notificationCard, .estimate, .empty) {
  background: var(--m3-surface-container-low) !important;
  border: 1px solid var(--m3-outline-variant) !important;
  border-radius: var(--m3-radius-lg) !important;
  box-shadow: var(--m3-shadow) !important;
  color: var(--m3-on-surface) !important;
}

html body :where(.panel, .formView, .mapReadableView, .ordersView, .accountView, .policyQaView) {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

html body :where(.pulseItem, .featuredWishCard, .trustedMemberCard, .departureCard, .trendCard, .quickStartCard, .wishModeCard, .areaRow, .compactList li, .tableRow, .orderEventItem, .timelineItem, .matchInsight, .policyCard) {
  background: var(--m3-surface-container) !important;
  border: 1px solid var(--m3-outline-variant) !important;
  border-radius: var(--m3-radius-md) !important;
  box-shadow: none !important;
  color: var(--m3-on-surface) !important;
}

html body :where(.pulseItem:hover, .featuredWishCard:hover, .trustedMemberCard:hover, .departureCard:hover, .trendCard:hover, .quickStartCard:hover, .wishModeCard:hover, .countryCard:hover, .tripCard:hover, .matchCard:hover, .orderCard:hover) {
  background: var(--m3-surface-container-high) !important;
  box-shadow: var(--m3-shadow-2) !important;
  transform: translateY(-2px) !important;
}

html body :where(.primaryButton, button.primaryButton, .heroSearchSubmit, button[type="submit"]) {
  min-height: 44px !important;
  border-radius: var(--m3-radius-full) !important;
  border: 0 !important;
  background: var(--m3-primary) !important;
  color: var(--m3-on-primary) !important;
  box-shadow: var(--m3-shadow) !important;
}

html body :where(.primaryButton:hover, button.primaryButton:hover, .heroSearchSubmit:hover, button[type="submit"]:hover) {
  background: color-mix(in srgb, var(--m3-primary) 92%, var(--m3-on-primary)) !important;
  box-shadow: var(--m3-shadow-2) !important;
  transform: none !important;
}

html body :where(.softButton, .tinyButton, .ghostButton, .secondaryAction, .policyBanner button) {
  min-height: 40px !important;
  border-radius: var(--m3-radius-full) !important;
  border: 1px solid var(--m3-outline) !important;
  background: transparent !important;
  color: var(--m3-primary) !important;
  box-shadow: none !important;
}

html body :where(.softButton:hover, .tinyButton:hover, .ghostButton:hover, .secondaryAction:hover, .policyBanner button:hover) {
  background: color-mix(in srgb, var(--m3-primary) 8%, transparent) !important;
  transform: none !important;
}

html body :where(input, select, textarea, .heroSearchField, .inputField, .field) {
  border-radius: var(--m3-radius-xs) !important;
  border: 1px solid var(--m3-outline) !important;
  background: var(--m3-surface-container-highest) !important;
  color: var(--m3-on-surface) !important;
  box-shadow: none !important;
}

html body :where(input:focus, select:focus, textarea:focus, .heroSearchField:focus-within, .inputField:focus-within, .field:focus-within) {
  border-color: var(--m3-primary) !important;
  outline: 2px solid color-mix(in srgb, var(--m3-primary) 28%, transparent) !important;
  outline-offset: 1px !important;
  box-shadow: none !important;
}

html body :where(.tagRow span, .status, .badge, .departBadge, .trustBadge, .miniCountryPills button, .liveStatsStrip span, .chip, .travelerTrustBadge) {
  border-radius: var(--m3-radius-sm) !important;
  background: var(--m3-secondary-container) !important;
  color: var(--m3-on-primary-container) !important;
  border: 0 !important;
  box-shadow: none !important;
}

html body :where(.glyph, .countryFlag, .policyItem .glyph, .wishVisualPlaceholder) {
  color: var(--m3-primary) !important;
}

html body:has(.appShell.view-market) .heroProduct.heroSearchFirst {
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--m3-surface) 92%, transparent) 0%, color-mix(in srgb, var(--m3-surface) 78%, transparent) 46%, color-mix(in srgb, var(--m3-surface) 38%, transparent) 100%),
    url("./images/bondmai-hero-handoff.webp") center / cover no-repeat !important;
  border-bottom: 1px solid var(--m3-outline-variant) !important;
  border-radius: 0 0 var(--m3-radius-xl) var(--m3-radius-xl) !important;
}

html body:has(.appShell.view-market) .heroProduct.heroSearchFirst::before,
html body:has(.appShell.view-market) .heroProduct.heroSearchFirst::after {
  display: none !important;
}

html body:has(.appShell.view-market) .heroProduct.heroSearchFirst .heroSearchPanel {
  background: var(--m3-surface-container-low) !important;
  border: 1px solid var(--m3-outline-variant) !important;
  border-radius: var(--m3-radius-xl) !important;
  box-shadow: var(--m3-shadow-3) !important;
}

html body:has(.appShell.view-market) .heroProduct.heroSearchFirst .marketplaceHeroPanel {
  background: var(--m3-surface-container) !important;
  border: 1px solid var(--m3-outline-variant) !important;
  border-radius: var(--m3-radius-xl) !important;
  box-shadow: var(--m3-shadow-3) !important;
}

html body .marketplaceHeroPanel::after {
  background: var(--m3-primary-container) !important;
  color: var(--m3-on-primary-container) !important;
  border: 1px solid color-mix(in srgb, var(--m3-primary) 20%, transparent) !important;
  border-radius: var(--m3-radius-lg) !important;
  box-shadow: var(--m3-shadow) !important;
}

html body :where(.policyBanner, .notice, .pwaPrompt, .loadingStatePanel) {
  background: var(--m3-tertiary-container) !important;
  color: #31111d !important;
  border: 1px solid color-mix(in srgb, var(--m3-tertiary) 24%, transparent) !important;
  border-radius: var(--m3-radius-lg) !important;
  box-shadow: var(--m3-shadow) !important;
}

html[data-theme="dark"] body :where(.policyBanner, .notice, .pwaPrompt, .loadingStatePanel) {
  color: var(--m3-on-surface) !important;
}

html[data-theme="dark"] body:has(.appShell.view-market) .heroProduct.heroSearchFirst {
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--m3-surface) 96%, transparent) 0%, color-mix(in srgb, var(--m3-surface) 86%, transparent) 48%, color-mix(in srgb, var(--m3-surface) 52%, transparent) 100%),
    url("./images/bondmai-hero-handoff.webp") center / cover no-repeat !important;
}

html[data-theme="dark"] body :where(.topBarV2, .topbar) {
  background: color-mix(in srgb, var(--m3-surface-container-low) 88%, transparent) !important;
}

html[data-theme="dark"] body :where(input, select, textarea, .heroSearchField, .inputField, .field) {
  background: var(--m3-surface-container-high) !important;
  color: var(--m3-on-surface) !important;
}

/* Material 3 cleanup: override legacy high-specificity coral/teal treatments. */
html body .heroSearchSubmit,
html body:has(.appShell.view-market) .heroProduct.heroSearchFirst .heroSearchSubmit,
html body:has(.marketPulse) .heroProduct.heroSearchFirst .heroSearchSubmit,
html body button.primaryButton,
html body .primaryButton,
html body button[type="submit"] {
  background: var(--m3-primary) !important;
  background-image: none !important;
  color: var(--m3-on-primary) !important;
  border: 0 !important;
  border-radius: var(--m3-radius-full) !important;
  box-shadow: var(--m3-shadow) !important;
}

html body .heroSearchSubmit:hover,
html body:has(.appShell.view-market) .heroProduct.heroSearchFirst .heroSearchSubmit:hover,
html body button.primaryButton:hover,
html body .primaryButton:hover,
html body button[type="submit"]:hover {
  background: color-mix(in srgb, var(--m3-primary) 90%, white) !important;
  background-image: none !important;
  transform: none !important;
  box-shadow: var(--m3-shadow-2) !important;
}

html body .topBarNav button.active,
html body:has(.appShell.view-market) .topBarNav button.active,
html body:has(.appShell.view-market) .topBarNav button:hover,
html body .tabs button.active,
html body .languageToggle button.active {
  background: var(--m3-secondary-container) !important;
  background-image: none !important;
  color: var(--m3-on-primary-container) !important;
  border-color: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}

html body .topBarNav button,
html body:has(.appShell.view-market) .topBarNav button {
  background: transparent !important;
  color: var(--m3-on-surface-variant) !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

html body .rail,
html body:has(.appShell.view-market) .rail,
html body:has(.appShell:not(.view-market):not(.view-wish)) .rail {
  background: var(--m3-surface-container-low) !important;
  background-image: none !important;
  border-color: var(--m3-outline-variant) !important;
  box-shadow: var(--m3-shadow) !important;
}

html body .rail button,
html body:has(.appShell.view-market) .rail button,
html body:has(.appShell:not(.view-market):not(.view-wish)) .rail button {
  border: 0 !important;
  border-radius: var(--m3-radius-full) !important;
  background: transparent !important;
  background-image: none !important;
  color: var(--m3-on-surface-variant) !important;
  box-shadow: none !important;
}

html body .rail button.active,
html body:has(.appShell.view-market) .rail button.active,
html body:has(.appShell:not(.view-market):not(.view-wish)) .rail button.active {
  background: var(--m3-secondary-container) !important;
  background-image: none !important;
  color: var(--m3-on-primary-container) !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

html body .pulseItem,
html body:has(.appShell.view-market) .pulseItem,
html body .tripCard,
html body .matchCard,
html body .orderCard,
html body .countryCard,
html body .featuredWishCard,
html body .trustedMemberCard,
html body .departureCard,
html body .trendCard,
html body .quickStartCard,
html body .wishModeCard,
html body .policyItem,
html body .supportCard,
html body .accountCard,
html body .adminTile {
  background: var(--m3-surface-container) !important;
  background-image: none !important;
  border: 1px solid var(--m3-outline-variant) !important;
  border-radius: var(--m3-radius-md) !important;
  box-shadow: none !important;
  color: var(--m3-on-surface) !important;
}

html body .pulseItem:hover,
html body .tripCard:hover,
html body .matchCard:hover,
html body .orderCard:hover,
html body .countryCard:hover,
html body .featuredWishCard:hover,
html body .trustedMemberCard:hover,
html body .departureCard:hover,
html body .trendCard:hover,
html body .quickStartCard:hover,
html body .wishModeCard:hover {
  background: var(--m3-surface-container-high) !important;
  box-shadow: var(--m3-shadow-2) !important;
  transform: translateY(-2px) !important;
}

html body :where(.accent, .eyebrow, .marketPulseHead .badge, .sectionHead .badge, .matchPreview span),
html body .heroProduct.heroSearchFirst .eyebrow {
  color: var(--m3-primary) !important;
}

html body .miniCountryPills button,
html body:has(.appShell.view-market) .miniCountryPills button,
html body .tagRow span,
html body .status,
html body .badge,
html body .departBadge {
  background: var(--m3-secondary-container) !important;
  background-image: none !important;
  color: var(--m3-on-primary-container) !important;
  border: 0 !important;
  box-shadow: none !important;
}

html body .logoMark,
html body :where(.brandLogo, .brandMark) .logoMark {
  background: var(--m3-primary-container) !important;
  background-image: none !important;
  color: var(--m3-on-primary-container) !important;
  border: 0 !important;
  border-radius: var(--m3-radius-md) !important;
  box-shadow: none !important;
}

html body .aiAssistButton,
html body:has(.appShell.view-market) .aiAssistButton,
html body:not(:has(.marketPulse)) .aiAssistButton {
  background: var(--m3-primary-container) !important;
  background-image: none !important;
  border: 1px solid var(--m3-outline-variant) !important;
  color: var(--m3-on-primary-container) !important;
  border-radius: var(--m3-radius-lg) !important;
  box-shadow: var(--m3-shadow-3) !important;
}

html body .aiAssistOrb,
html body:has(.appShell.view-market) .aiAssistOrb,
html body:not(:has(.marketPulse)) .aiAssistOrb {
  background: var(--m3-primary) !important;
  background-image: none !important;
  color: var(--m3-on-primary) !important;
  border-radius: var(--m3-radius-md) !important;
  box-shadow: none !important;
}

html body:not(:has(.appShell.view-wish)) .sectionHead,
html body:has(.appShell:not(.view-market):not(.view-wish)) .sectionHead,
html body:not(:has(.marketPulse)):not(:has(.appShell.view-wish)) .formView:has(.wishForm) > .sectionHead:first-child,
html body .mapGuidePanel,
html body .travelerRelayHero,
html body .decisionStrip,
html body:not(:has(.appShell.view-wish)) .wishPatienceNudge,
html body .selfServiceGuide,
html body .policyBanner {
  background: var(--m3-surface-container-low) !important;
  background-image: none !important;
  border: 1px solid var(--m3-outline-variant) !important;
  border-radius: var(--m3-radius-lg) !important;
  box-shadow: var(--m3-shadow) !important;
  color: var(--m3-on-surface) !important;
}

html body:not(:has(.appShell.view-wish)) .wishForm,
html body:not(:has(.marketPulse)):not(:has(.appShell.view-wish)) .formView:has(.wishPatienceNudge) .wishForm,
html body:not(:has(.marketPulse)) .formView:has(.tripDecision) .wishForm,
html body .accountPanel,
html body .ordersView,
html body .policyQaView > section,
html body .mapReadableView > section {
  background: var(--m3-surface-container-lowest) !important;
  background-image: none !important;
  border: 1px solid var(--m3-outline-variant) !important;
  border-radius: var(--m3-radius-xl) !important;
  box-shadow: var(--m3-shadow) !important;
}

html body:not(:has(.appShell.view-wish)) .decisionStrip article,
html body:not(:has(.appShell.view-wish)) .wishModeCard,
html body:not(:has(.marketPulse)):not(:has(.appShell.view-wish)) .wishForm > .guestFlowNudge,
html body:not(:has(.marketPulse)):not(:has(.appShell.view-wish)) .wishForm > .empty,
html body:not(:has(.appShell.view-wish)) .wishLivePreview,
html body:not(:has(.appShell.view-wish)) .wishCostBreakdown,
html body:not(:has(.appShell.view-wish)) .estimate,
html body:not(:has(.appShell.view-wish)) .riskBox,
html body:not(:has(.appShell.view-wish)) .productPreviewCard {
  background: var(--m3-surface-container) !important;
  background-image: none !important;
  border: 1px solid var(--m3-outline-variant) !important;
  border-radius: var(--m3-radius-md) !important;
  box-shadow: none !important;
}

html body:not(:has(.appShell.view-wish)) .wishForm input,
html body:not(:has(.appShell.view-wish)) .wishForm select,
html body:not(:has(.appShell.view-wish)) .wishForm textarea,
html body .accountPanel input:not([type="checkbox"]):not([type="radio"]),
html body .accountPanel select,
html body .accountPanel textarea,
html body .loginForm input,
html body .standaloneLoginForm input,
html body .heroSearchPanel input,
html body .heroSearchPanel select {
  background: var(--m3-surface-container-highest) !important;
  background-image: none !important;
  border: 1px solid transparent !important;
  border-bottom-color: var(--m3-outline) !important;
  border-radius: var(--m3-radius-xs) var(--m3-radius-xs) 4px 4px !important;
  box-shadow: none !important;
  color: var(--m3-on-surface) !important;
}

html body .wishForm input:focus,
html body .wishForm select:focus,
html body .wishForm textarea:focus,
html body .accountPanel input:not([type="checkbox"]):not([type="radio"]):focus,
html body .accountPanel select:focus,
html body .accountPanel textarea:focus,
html body .heroSearchPanel input:focus,
html body .heroSearchPanel select:focus {
  border-bottom-color: var(--m3-primary) !important;
  outline: 2px solid color-mix(in srgb, var(--m3-primary) 24%, transparent) !important;
  outline-offset: 1px !important;
}

html body .wishForm label,
html body .accountPanel label,
html body .heroSearchField span {
  color: var(--m3-on-surface-variant) !important;
}

html body .formView:has(.tripDecision)::before,
html body:not(:has(.marketPulse)) .panel > .formView:has(.tripDecision)::before,
html body .formView:has(.wishPatienceNudge)::before {
  opacity: .16 !important;
  filter: saturate(.7) !important;
}

html[data-theme="dark"] body,
html[data-theme="dark"] body .appShell,
html[data-theme="dark"] body:has(.appShell.view-market),
html[data-theme="dark"] body:has(.appShell.view-market) .appShell,
html[data-theme="dark"] body:has(.appShell:not(.view-market)),
html[data-theme="dark"] body:has(.appShell:not(.view-market)) .appShell {
  background:
    radial-gradient(circle at 10% 0%, color-mix(in srgb, var(--m3-primary-container) 34%, transparent), transparent 31rem),
    radial-gradient(circle at 96% 8%, color-mix(in srgb, var(--m3-tertiary-container) 22%, transparent), transparent 34rem),
    var(--m3-surface) !important;
}

html[data-theme="dark"] body .topBarV2,
html[data-theme="dark"] body .topbar,
html[data-theme="dark"] body:has(.appShell.view-market) .topBarV2 {
  background: color-mix(in srgb, var(--m3-surface-container-low) 90%, transparent) !important;
  background-image: none !important;
  border-bottom: 1px solid var(--m3-outline-variant) !important;
  box-shadow: none !important;
}

html[data-theme="dark"] body .topBarNav,
html[data-theme="dark"] body:has(.appShell.view-market) .topBarNav,
html[data-theme="dark"] body .languageToggle {
  background: var(--m3-surface-container-high) !important;
  border: 1px solid var(--m3-outline-variant) !important;
  box-shadow: none !important;
}

html[data-theme="dark"] body .topBarNav button,
html[data-theme="dark"] body:has(.appShell.view-market) .topBarNav button {
  background: transparent !important;
  color: var(--m3-on-surface-variant) !important;
  border: 0 !important;
  box-shadow: none !important;
}

html[data-theme="dark"] body .topBarNav button.active,
html[data-theme="dark"] body:has(.appShell.view-market) .topBarNav button.active,
html[data-theme="dark"] body .languageToggle button.active {
  background: var(--m3-secondary-container) !important;
  color: var(--m3-on-primary-container) !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* BondMate Material 3 palette v2: ocean trust, no purple. */
:root {
  --m3-primary: #006a6a;
  --m3-on-primary: #ffffff;
  --m3-primary-container: #9cf1ef;
  --m3-on-primary-container: #002020;
  --m3-secondary: #4a6363;
  --m3-secondary-container: #cce8e7;
  --m3-on-secondary-container: #051f1f;
  --m3-tertiary: #8b4f00;
  --m3-tertiary-container: #ffdcc2;
  --m3-on-tertiary-container: #2d1600;
  --m3-surface: #f7fbfa;
  --m3-surface-dim: #d7dbda;
  --m3-surface-bright: #f7fbfa;
  --m3-surface-container-lowest: #ffffff;
  --m3-surface-container-low: #f1f5f4;
  --m3-surface-container: #ebefee;
  --m3-surface-container-high: #e5e9e8;
  --m3-surface-container-highest: #dfe3e2;
  --m3-on-surface: #171d1c;
  --m3-on-surface-variant: #3f4948;
  --m3-outline: #6f7978;
  --m3-outline-variant: #bec9c7;
}

html[data-theme="dark"] {
  --m3-primary: #80d5d3;
  --m3-on-primary: #003737;
  --m3-primary-container: #005050;
  --m3-on-primary-container: #9cf1ef;
  --m3-secondary: #b0ccca;
  --m3-secondary-container: #334b4b;
  --m3-on-secondary-container: #cce8e7;
  --m3-tertiary: #ffb86f;
  --m3-tertiary-container: #633a00;
  --m3-on-tertiary-container: #ffdcc2;
  --m3-surface: #0e1514;
  --m3-surface-dim: #0e1514;
  --m3-surface-bright: #343b3a;
  --m3-surface-container-lowest: #09100f;
  --m3-surface-container-low: #161d1c;
  --m3-surface-container: #1a2120;
  --m3-surface-container-high: #242b2a;
  --m3-surface-container-highest: #2f3635;
  --m3-on-surface: #dee4e2;
  --m3-on-surface-variant: #bec9c7;
  --m3-outline: #889391;
  --m3-outline-variant: #3f4948;
}

html body:has(.appShell.view-market),
html body:has(.appShell.view-market) .appShell,
html body:has(.appShell:not(.view-market):not(.view-wish)),
html body:has(.appShell:not(.view-market):not(.view-wish)) .appShell {
  background:
    radial-gradient(circle at 8% 0%, color-mix(in srgb, var(--m3-primary-container) 34%, transparent), transparent 30rem),
    radial-gradient(circle at 94% 4%, color-mix(in srgb, var(--m3-tertiary-container) 26%, transparent), transparent 32rem),
    var(--m3-surface) !important;
}

@media (min-width: 1180px) {
  html body:has(.appShell.view-market) .heroProduct.heroSearchFirst {
    height: min(720px, calc(100svh - 96px)) !important;
    padding: clamp(42px, 3.6vw, 68px) clamp(56px, 4.8vw, 92px) !important;
    grid-template-columns: minmax(720px, 1.04fr) minmax(420px, .74fr) !important;
    gap: clamp(36px, 5vw, 92px) !important;
  }

  html body:has(.appShell.view-market) .heroProduct.heroSearchFirst h1 {
    max-width: 900px !important;
  }

  html body:has(.appShell.view-market) .heroProduct.heroSearchFirst .heroTitleEn {
    font-size: clamp(3rem, 3.45vw, 4.2rem) !important;
    line-height: .95 !important;
  }

  html body:has(.appShell.view-market) .heroProduct.heroSearchFirst .heroTitleZh {
    max-width: 900px !important;
    font-size: clamp(2.35rem, 2.62vw, 3.24rem) !important;
    line-height: 1.08 !important;
  }

  html body:has(.appShell.view-market) .heroProduct.heroSearchFirst p {
    max-width: 660px !important;
    margin-top: 18px !important;
  }

  html body:has(.appShell.view-market) .heroProduct.heroSearchFirst .heroSearchPanel {
    width: min(100%, 720px) !important;
    margin-top: 26px !important;
  }

  html body:has(.appShell.view-market) .heroProduct.heroSearchFirst .heroActions {
    margin-top: 18px !important;
  }

  html body:has(.appShell.view-market) .heroProduct.heroSearchFirst .miniCountryPills {
    margin-top: 16px !important;
  }

  html body:has(.appShell.view-market) .heroProduct.heroSearchFirst .marketplaceHeroPanel {
    max-width: 520px !important;
    height: 392px !important;
    min-height: 392px !important;
    margin-top: clamp(40px, 5vw, 72px) !important;
  }

  html body:has(.appShell.view-market) .marketplaceHeroPanel .heroVisual {
    height: 242px !important;
  }

  html body:has(.appShell.view-market) .workspace {
    padding-top: 28px !important;
  }
}

html body .topBarNav button.active,
html body:has(.appShell.view-market) .topBarNav button.active,
html body .languageToggle button.active,
html body .rail button.active,
html body:has(.appShell.view-market) .rail button.active,
html body:has(.appShell:not(.view-market):not(.view-wish)) .rail button.active,
html body .miniCountryPills button,
html body:has(.appShell.view-market) .miniCountryPills button,
html body .tagRow span,
html body .status,
html body .badge,
html body .departBadge {
  background: var(--m3-secondary-container) !important;
  color: var(--m3-on-secondary-container) !important;
}

html body .heroSearchSubmit,
html body:has(.appShell.view-market) .heroProduct.heroSearchFirst .heroSearchSubmit,
html body:has(.marketPulse) .heroProduct.heroSearchFirst .heroSearchSubmit,
html body button.primaryButton,
html body .primaryButton,
html body button[type="submit"],
html body .aiAssistOrb,
html body:has(.appShell.view-market) .aiAssistOrb,
html body:not(:has(.marketPulse)) .aiAssistOrb {
  background: var(--m3-primary) !important;
  color: var(--m3-on-primary) !important;
}

html body .logoMark,
html body :where(.brandLogo, .brandMark) .logoMark,
html body .themeToggle,
html body .aiAssistButton,
html body:has(.appShell.view-market) .aiAssistButton,
html body:not(:has(.marketPulse)) .aiAssistButton,
html body .marketplaceHeroPanel::after {
  background: var(--m3-primary-container) !important;
  color: var(--m3-on-primary-container) !important;
}

html body .sectionHead,
html body:has(.appShell:not(.view-market):not(.view-wish)) .sectionHead,
html body .wishForm,
html body .accountPanel,
html body .ordersView,
html body .policyQaView > section,
html body .mapReadableView > section {
  border-radius: var(--m3-radius-lg) !important;
}

html body .wishForm {
  padding: clamp(24px, 2vw, 34px) !important;
}

html body .wishModeCard,
html body .decisionStrip article {
  min-height: 86px !important;
  align-items: center !important;
}

html body .pulseItem,
html body .tripCard,
html body .matchCard,
html body .orderCard,
html body .countryCard,
html body .featuredWishCard,
html body .trustedMemberCard {
  border-radius: 18px !important;
}

html[data-theme="dark"] body .topBarNav button.active,
html[data-theme="dark"] body:has(.appShell.view-market) .topBarNav button.active,
html[data-theme="dark"] body .languageToggle button.active,
html[data-theme="dark"] body .rail button.active {
  background: var(--m3-secondary-container) !important;
  color: var(--m3-on-secondary-container) !important;
}

/* BondMate layout polish v2: calmer ocean palette and clearer section rhythm. */
:root {
  --m3-primary: #006d75;
  --m3-on-primary: #ffffff;
  --m3-primary-container: #b7ebee;
  --m3-on-primary-container: #001f23;
  --m3-secondary-container: #d5e7e8;
  --m3-on-secondary-container: #0c1f21;
  --m3-tertiary-container: #ffdfbd;
  --m3-surface: #f8fbfb;
  --m3-surface-container-low: #f2f6f6;
  --m3-surface-container: #edf2f2;
  --m3-surface-container-high: #e6eeee;
  --m3-surface-container-highest: #dfe8e8;
  --m3-outline-variant: #c1cccd;
}

html[data-theme="dark"] {
  --m3-primary: #8ad8df;
  --m3-on-primary: #00363b;
  --m3-primary-container: #005158;
  --m3-on-primary-container: #b7ebee;
  --m3-secondary-container: #344b4e;
  --m3-on-secondary-container: #d5e7e8;
  --m3-tertiary-container: #674100;
  --m3-surface: #0d1516;
  --m3-surface-container-low: #151d1e;
  --m3-surface-container: #1a2223;
  --m3-surface-container-high: #242d2e;
  --m3-surface-container-highest: #2f3839;
  --m3-outline-variant: #404b4d;
}

html body .topBarV2,
html body .topbar {
  min-height: 76px !important;
}

html body:has(.appShell.view-market) .heroProduct.heroSearchFirst {
  border-radius: 0 0 24px 24px !important;
  box-shadow: inset 0 -1px 0 var(--m3-outline-variant) !important;
}

html body:has(.appShell.view-market) .workspace {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--m3-surface-container-low) 66%, transparent), transparent 260px) !important;
  border-radius: 28px 28px 0 0 !important;
}

html body .rail {
  padding: 18px 12px !important;
}

html body .rail button {
  font-weight: 700 !important;
}

html body .sectionHead,
html body:has(.appShell:not(.view-market):not(.view-wish)) .sectionHead {
  min-height: auto !important;
  padding: clamp(22px, 1.8vw, 30px) !important;
  border-radius: 24px !important;
}

html body .sectionHead h2,
html body .sectionHead h3 {
  font-size: clamp(1.55rem, 1.7vw, 2.1rem) !important;
  line-height: 1.12 !important;
}

html body .wishForm,
html body .accountPanel,
html body .ordersView,
html body .policyQaView > section,
html body .mapReadableView > section {
  box-shadow: var(--m3-shadow-2) !important;
}

html body .decisionStrip article,
html body .wishModeCard {
  background: var(--m3-surface-container-low) !important;
  border-color: color-mix(in srgb, var(--m3-outline-variant) 82%, var(--m3-primary)) !important;
}

html body .decisionStrip article:hover,
html body .wishModeCard:hover {
  background: var(--m3-surface-container-high) !important;
  border-color: color-mix(in srgb, var(--m3-primary) 38%, var(--m3-outline-variant)) !important;
}

html body .wishForm input,
html body .wishForm select,
html body .wishForm textarea,
html body .heroSearchPanel input,
html body .heroSearchPanel select {
  min-height: 50px !important;
}

html body .splitAction {
  background: var(--m3-surface-container-low) !important;
  border: 1px solid var(--m3-outline-variant) !important;
  border-radius: 22px !important;
  box-shadow: var(--m3-shadow) !important;
}

html body .splitAction .primaryButton,
html body .splitAction button[type="submit"] {
  min-width: 156px !important;
}

html body .marketPulse,
html body .marketPulseGrid,
html body .viewGrid {
  gap: clamp(20px, 1.7vw, 32px) !important;
}

html body .marketPulseHead,
html body .liveStatsStrip,
html body .pulseFeed,
html body .pulseTrips,
html body .featuredWishStrip,
html body .trustedMembersPanel,
html body .departureBoard,
html body .trendBoard,
html body .viewGrid > section {
  border-radius: 24px !important;
}

html body .pulseItem,
html body .tripCard,
html body .matchCard,
html body .orderCard,
html body .countryCard {
  padding: clamp(18px, 1.3vw, 24px) !important;
}

/* BondMate palette v2 dark-mode final override. */
html[data-theme="dark"] body,
html[data-theme="dark"] body .appShell {
  background: var(--m3-surface) !important;
  color: var(--m3-on-surface) !important;
}

html[data-theme="dark"] body .topBarV2,
html[data-theme="dark"] body .topbar,
html[data-theme="dark"] body:has(.appShell.view-market) .topBarV2 {
  background: color-mix(in srgb, var(--m3-surface-container-low) 92%, transparent) !important;
  border-bottom-color: var(--m3-outline-variant) !important;
}

html[data-theme="dark"] body:has(.appShell.view-market) .heroProduct.heroSearchFirst {
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--m3-surface) 97%, transparent) 0%, color-mix(in srgb, var(--m3-surface) 88%, transparent) 50%, color-mix(in srgb, var(--m3-surface) 58%, transparent) 100%),
    url("./images/bondmai-hero-handoff.webp") center / cover no-repeat !important;
  color: var(--m3-on-surface) !important;
}

html[data-theme="dark"] body:has(.appShell.view-market) .workspace {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--m3-surface-container-low) 76%, transparent), transparent 260px) !important;
}

html[data-theme="dark"] body .heroProduct.heroSearchFirst h1,
html[data-theme="dark"] body .heroProduct.heroSearchFirst p,
html[data-theme="dark"] body .heroProduct.heroSearchFirst .eyebrow {
  color: var(--m3-on-surface) !important;
}

html[data-theme="dark"] body .topBarNav,
html[data-theme="dark"] body .languageToggle {
  background: var(--m3-surface-container-high) !important;
  border-color: var(--m3-outline-variant) !important;
}

html[data-theme="dark"] body .topBarNav button.active,
html[data-theme="dark"] body .languageToggle button.active,
html[data-theme="dark"] body .rail button.active,
html[data-theme="dark"] body .miniCountryPills button,
html[data-theme="dark"] body .tagRow span,
html[data-theme="dark"] body .status,
html[data-theme="dark"] body .badge,
html[data-theme="dark"] body .departBadge {
  background: var(--m3-secondary-container) !important;
  color: var(--m3-on-secondary-container) !important;
}

html[data-theme="dark"] body .heroSearchSubmit,
html[data-theme="dark"] body button.primaryButton,
html[data-theme="dark"] body .primaryButton,
html[data-theme="dark"] body button[type="submit"] {
  background: var(--m3-primary) !important;
  color: var(--m3-on-primary) !important;
}

html[data-theme="dark"] body .logoMark,
html[data-theme="dark"] body .aiAssistButton,
html[data-theme="dark"] body .marketplaceHeroPanel::after {
  background: var(--m3-primary-container) !important;
  color: var(--m3-on-primary-container) !important;
}

/* BondMate typography system: deliberate hierarchy for Chinese marketplace UI. */
html body {
  font-family: Inter, "Noto Sans TC", "Noto Sans", "PingFang TC", "Microsoft JhengHei", system-ui, -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: 16px !important;
  line-height: 1.55 !important;
  letter-spacing: 0 !important;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

html body :where(h1, h2, h3, h4, strong, button, input, select, textarea, label) {
  letter-spacing: 0 !important;
}

html body :where(h1, h2, h3, h4) {
  text-wrap: balance;
  word-break: keep-all;
  overflow-wrap: normal;
}

html body :where(p, small, span, li, td, th, label, input, select, textarea) {
  overflow-wrap: anywhere;
}

html body :where(.topBarNav button, .rail button, .tabs button, .languageToggle button, .primaryButton, .softButton, .tinyButton, .ghostButton, .secondaryAction, .heroSearchSubmit) {
  font-size: .95rem !important;
  font-weight: 750 !important;
  line-height: 1.1 !important;
  white-space: nowrap !important;
}

html body :where(.brandLockup strong, .brandText strong) {
  font-size: 1.15rem !important;
  line-height: 1.05 !important;
  font-weight: 800 !important;
}

html body :where(.brandLockup small, .brandText small) {
  font-size: .76rem !important;
  line-height: 1.25 !important;
  font-weight: 600 !important;
}

@media (min-width: 1180px) {
  html body:has(.appShell.view-market) .heroProduct.heroSearchFirst .heroTitleEn {
    font-size: clamp(3.1rem, 3.25vw, 4rem) !important;
    line-height: .96 !important;
  }

  html body:has(.appShell.view-market) .heroProduct.heroSearchFirst .heroTitleZh {
    font-size: clamp(2.35rem, 2.45vw, 3.05rem) !important;
    line-height: 1.08 !important;
    max-width: 860px !important;
  }

  html body:has(.appShell.view-market) .heroProduct.heroSearchFirst p {
    font-size: 1.02rem !important;
    line-height: 1.68 !important;
    max-width: 640px !important;
  }
}

html body :where(.sectionHead h2, .marketPulseHead h2, .departureBoard h2, .featuredWishStrip h2, .trustedMembersPanel h2, .trendBoard h2, .viewGrid h2) {
  font-size: clamp(1.6rem, 1.8vw, 2.25rem) !important;
  line-height: 1.12 !important;
  font-weight: 820 !important;
  margin: 0 0 8px !important;
}

html body :where(.sectionHead h3, .pulseFeed h3, .pulseTrips h3, .policyQaColumns h3, .policyFaqItem h3, .subHead h3) {
  font-size: clamp(1.08rem, 1.15vw, 1.32rem) !important;
  line-height: 1.22 !important;
  font-weight: 780 !important;
  margin: 0 0 10px !important;
}

html body :where(.sectionHead p, .marketPulseHead p, .departureBoard p, .featuredWishStrip p, .trustedMembersPanel p, .trendBoard p, .viewGrid p, .policyItem p, .policyFaqItem p, .tripCard p, .matchCard p, .orderCard p, .pulseItem p, .note) {
  font-size: .95rem !important;
  line-height: 1.62 !important;
  font-weight: 450 !important;
}

html body :where(.pulseItem strong, .tripCard h3, .matchCard h3, .orderCard h3, .countryCard h3, .featuredWishCard strong, .trustedMemberCard strong, .departureCard strong, .trendCard strong, .wishModeCard strong, .policyItem h3, .accountCard h3) {
  font-size: clamp(1rem, 1.04vw, 1.18rem) !important;
  line-height: 1.28 !important;
  font-weight: 780 !important;
  text-wrap: balance;
}

html body :where(.miniMeta, .tagRow span, .status, .badge, .departBadge, .travelerTrustBadge, .liveStatsStrip small, .pulseItem small, .tripCard small, .matchCard small, .orderCard small, .policyItem small) {
  font-size: .78rem !important;
  line-height: 1.22 !important;
  font-weight: 650 !important;
}

html body .wishForm label,
html body .accountPanel label,
html body .loginForm label,
html body .standaloneLoginForm label,
html body .heroSearchField span {
  font-size: .78rem !important;
  line-height: 1.22 !important;
  font-weight: 760 !important;
}

html body :where(.wishForm input, .wishForm select, .wishForm textarea, .accountPanel input, .accountPanel select, .accountPanel textarea, .heroSearchPanel input, .heroSearchPanel select) {
  font-size: .96rem !important;
  line-height: 1.35 !important;
  font-weight: 620 !important;
}

html body :where(.heroSearchField, .wishForm > label:not(.wide):not(.wishPhotoUpload), .wishForm > .field, .wishForm > .inputField) {
  gap: 5px !important;
}

html body :where(.pulseItem, .tripCard, .matchCard, .orderCard, .countryCard, .featuredWishCard, .trustedMemberCard, .departureCard, .trendCard, .policyItem, .accountCard) {
  display: grid;
  align-content: start;
  gap: 10px !important;
}

html body .liveStatsStrip strong {
  font-size: clamp(1.45rem, 1.55vw, 1.9rem) !important;
  line-height: 1 !important;
  font-weight: 820 !important;
}

html body .marketplaceHeroPanel::after {
  font-size: .94rem !important;
  line-height: 1.45 !important;
  font-weight: 720 !important;
}

@media (max-width: 760px) {
  html body {
    font-size: 15px !important;
  }

  html body:has(.appShell.view-market) .heroProduct.heroSearchFirst .heroTitleEn {
    font-size: clamp(2.2rem, 11vw, 3.1rem) !important;
  }

  html body:has(.appShell.view-market) .heroProduct.heroSearchFirst .heroTitleZh {
    font-size: clamp(1.85rem, 8.6vw, 2.45rem) !important;
    line-height: 1.1 !important;
  }

  html body :where(.sectionHead h2, .marketPulseHead h2, .departureBoard h2, .featuredWishStrip h2, .trustedMembersPanel h2, .trendBoard h2, .viewGrid h2) {
    font-size: clamp(1.45rem, 7vw, 1.9rem) !important;
  }

  html body :where(.topBarNav button, .rail button, .tabs button, .languageToggle button, .primaryButton, .softButton, .tinyButton, .ghostButton, .secondaryAction, .heroSearchSubmit) {
    font-size: .9rem !important;
  }
}

/* Mobile should feel like one native page, not stacked scroll panes. */
@media (max-width: 760px) {
  html body:has(.appShell.view-market) :where(
    .marketPulse,
    .marketPulseHead,
    .pulseFeed,
    .pulseTrips,
    .pulseCountryRail,
    .departureBoard,
    .trustedMembersPanel,
    .featuredWishStrip,
    .trendBoard,
    .viewGrid > section,
    .tripList,
    .matchList
  ) {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }

  html body:has(.appShell.view-market) :where(.trendGrid, .filters, .tagRow, .miniCountryPills) {
    display: flex !important;
    flex-wrap: wrap !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: visible !important;
  }

  html body:has(.appShell.view-market) .trendGrid > *,
  html body:has(.appShell.view-market) .filters > * {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  html body:has(.appShell.view-market) :where(.marketPulse p, .departureBoard p, .trustedMembersPanel p, .featuredWishStrip p, .trendBoard p, .viewGrid p) {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }
}

/* Typography refinements after visual QA: keep dense nav stable, let content CTAs breathe. */
html body :where(.primaryButton, button.primaryButton, .heroSearchSubmit, button[type="submit"]) {
  min-inline-size: max-content;
  max-inline-size: 100%;
  text-align: center !important;
}

html body :where(.splitAction .primaryButton, .splitAction button[type="submit"], .wishForm > .primaryButton.wide, .formView:has(.tripDecision) .wishForm > .primaryButton.wide) {
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  min-inline-size: min(100%, 176px) !important;
  line-height: 1.18 !important;
  min-height: 48px !important;
}

html body .splitAction {
  align-items: center !important;
  box-sizing: border-box !important;
  gap: 12px !important;
  overflow: clip !important;
}

html body .splitAction > * {
  min-width: 0 !important;
}

html body .wishForm > .splitAction {
  grid-template-columns: minmax(0, 1fr) minmax(156px, max-content) !important;
}

html body:has(.appShell.view-market) .heroProduct.heroSearchFirst .marketplaceHeroPanel {
  box-sizing: border-box !important;
  min-width: 0 !important;
  width: min(100%, 560px) !important;
  max-width: min(100%, 560px) !important;
  min-height: 500px !important;
  height: auto !important;
  overflow: visible !important;
}

html body:has(.appShell.view-market) .marketplaceHeroPanel :where(.quickStartHead, .quickStartGrid, .quickStartCard, .heroStats.compact) {
  min-width: 0 !important;
}

html body:has(.appShell.view-market) .marketplaceHeroPanel .heroVisual {
  max-height: 290px !important;
}

html body:has(.appShell.view-market) .marketplaceHeroPanel .heroVisual img {
  max-height: 290px !important;
  object-fit: cover !important;
}

html body:has(.appShell.view-market) .marketplaceHeroPanel::after {
  bottom: 24px !important;
  left: 28px !important;
  right: 28px !important;
  width: auto !important;
}

html body:has(.appShell.view-market) .marketplaceHeroPanel :where(h2, h3, p, small, span, strong) {
  max-width: 100% !important;
  overflow-wrap: anywhere !important;
}

html body .aiAssistPreview {
  box-sizing: border-box !important;
  min-width: min(280px, calc(100vw - 32px)) !important;
  max-width: min(360px, calc(100vw - 32px)) !important;
  white-space: normal !important;
  overflow: hidden !important;
}

html body .aiAssistPreview :where(strong, span) {
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}

html body :where(.topBarNav button, .rail button, .tabs button, .languageToggle button) {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Final mobile page-flow override. Keep marketplace lists in the document flow. */
@media (max-width: 760px) {
  html body:has(.appShell.view-market) :where(.tripList, .matchList, .pulseFeed, .pulseTrips, .pulseCountryRail) {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }

  html body .aiAssistPanel:not(.open) :where(.aiAssistPreview, .aiAssistPreview *) {
    max-width: 0 !important;
    max-height: 0 !important;
    overflow: hidden !important;
  }
}

@media (max-width: 760px) {
  html body .appShell.view-market .workspace .panel .viewGrid .tripList,
  html body .appShell.view-market .workspace .panel .viewGrid .matchList,
  html body .appShell.view-market .workspace .panel .marketPulse .pulseFeed,
  html body .appShell.view-market .workspace .panel .marketPulse .pulseTrips,
  html body .appShell.view-market .workspace .panel .marketPulse .pulseCountryRail {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }
}

/* Marketplace content rescue: replace the oversized dashboard slab with a calmer marketplace rhythm. */
html body .appShell.view-market .workspace {
  background: #f7faf9 !important;
}

html body .appShell.view-market .panel {
  display: grid !important;
  gap: 28px !important;
}

html body .appShell.view-market .marketPulse {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 18px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body .appShell.view-market .marketPulse::before,
html body .appShell.view-market .marketPulse::after {
  content: none !important;
  display: none !important;
}

html body .appShell.view-market .marketPulseHead {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: end !important;
  gap: 20px !important;
  min-height: 0 !important;
  padding: 24px 26px !important;
  border: 1px solid rgba(15, 23, 42, .08) !important;
  border-radius: 24px !important;
  background:
    linear-gradient(135deg, rgba(255,255,255,.98), rgba(242,248,247,.94)) !important;
  box-shadow: 0 12px 32px rgba(15, 23, 42, .06) !important;
  overflow: hidden !important;
}

html body .appShell.view-market .marketPulseHead .eyebrow {
  width: fit-content !important;
  margin: 0 0 12px !important;
  padding: 6px 11px !important;
  border-radius: 999px !important;
  background: #d9f0ee !important;
  color: #006d75 !important;
  font-size: .76rem !important;
  font-weight: 780 !important;
}

html body .appShell.view-market .marketPulseHead h2 {
  max-width: 620px !important;
  margin: 0 !important;
  color: #101828 !important;
  font-size: clamp(2rem, 2.4vw, 2.8rem) !important;
  line-height: 1.02 !important;
  font-weight: 820 !important;
  text-wrap: balance !important;
}

html body .appShell.view-market .marketPulseHead h2 + .badge,
html body .appShell.view-market .marketPulseHead .badge {
  transform: translateY(-5px) !important;
  background: #e6f4f1 !important;
  color: #00727a !important;
}

html body .appShell.view-market .marketPulseHead p {
  max-width: 660px !important;
  margin: 12px 0 0 !important;
  color: #667085 !important;
  font-size: .98rem !important;
  line-height: 1.65 !important;
}

html body .appShell.view-market .marketPulseActions {
  align-self: center !important;
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: flex-end !important;
  gap: 10px !important;
  min-width: 260px !important;
}

html body .appShell.view-market .marketPulseActions :where(.primaryButton, .softButton) {
  min-height: 46px !important;
  padding: 0 18px !important;
  border-radius: 999px !important;
  font-size: .93rem !important;
  box-shadow: none !important;
}

html body .appShell.view-market .liveStatsStrip {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 12px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body .appShell.view-market .liveStatsStrip > * {
  min-height: 92px !important;
  padding: 18px 20px !important;
  border: 1px solid rgba(15, 23, 42, .08) !important;
  border-radius: 20px !important;
  background: rgba(255,255,255,.92) !important;
  box-shadow: 0 10px 24px rgba(15, 23, 42, .045) !important;
}

html body .appShell.view-market .liveStatsStrip small {
  color: #667085 !important;
  font-size: .78rem !important;
  font-weight: 720 !important;
}

html body .appShell.view-market .liveStatsStrip strong {
  margin-top: 7px !important;
  color: #101828 !important;
  font-size: clamp(1.55rem, 1.75vw, 2rem) !important;
  line-height: 1 !important;
  font-weight: 820 !important;
}

html body .appShell.view-market .marketPulseGrid {
  display: grid !important;
  grid-template-columns: minmax(0, 1.08fr) minmax(320px, .92fr) !important;
  gap: 18px !important;
}

html body .appShell.view-market :where(.pulseFeed, .pulseTrips, .pulseCountryRail) {
  border: 1px solid rgba(15, 23, 42, .08) !important;
  border-radius: 22px !important;
  background: rgba(255,255,255,.94) !important;
  box-shadow: 0 10px 26px rgba(15, 23, 42, .045) !important;
}

html body .appShell.view-market :where(.pulseFeed, .pulseTrips) {
  padding: 22px !important;
}

html body .appShell.view-market :where(.pulseFeed h3, .pulseTrips h3) {
  margin: 0 0 16px !important;
  color: #101828 !important;
  font-size: 1.18rem !important;
  line-height: 1.25 !important;
}

html body .appShell.view-market .pulseItem {
  min-height: 0 !important;
  padding: 16px !important;
  border-radius: 18px !important;
  background: #ffffff !important;
  border: 1px solid rgba(15, 23, 42, .075) !important;
  box-shadow: none !important;
}

html body .appShell.view-market .pulseCountryRail {
  align-content: start !important;
  padding: 18px !important;
  gap: 10px !important;
}

html body .appShell.view-market .pulseCountryRail button {
  min-height: 58px !important;
  padding: 12px 14px !important;
  border-radius: 16px !important;
  background: #f7faf9 !important;
  box-shadow: none !important;
}

@media (max-width: 980px) {
  html body .appShell.view-market .marketPulseHead {
    grid-template-columns: 1fr !important;
    align-items: start !important;
  }

  html body .appShell.view-market .marketPulseActions {
    justify-content: flex-start !important;
    min-width: 0 !important;
  }

  html body .appShell.view-market .liveStatsStrip,
  html body .appShell.view-market .marketPulseGrid {
    grid-template-columns: 1fr !important;
  }
}

/* Marketplace section pass 2: make it browseable, not a dashboard hero card. */
html body .appShell.view-market .marketPulse {
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 16px !important;
}

html body .appShell.view-market .marketPulseHead {
  grid-template-columns: minmax(0, 1fr) auto !important;
  padding: 6px 2px 4px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body .appShell.view-market .marketPulseHead .eyebrow {
  margin-bottom: 10px !important;
  background: #dff3ef !important;
}

html body .appShell.view-market .marketPulseHead h2 {
  max-width: 520px !important;
  font-size: clamp(1.9rem, 2vw, 2.35rem) !important;
  line-height: 1.08 !important;
}

html body .appShell.view-market .marketPulseHead p {
  max-width: 620px !important;
  margin-top: 8px !important;
  font-size: .95rem !important;
  line-height: 1.55 !important;
}

html body .appShell.view-market .marketPulseActions {
  align-self: end !important;
}

html body .appShell.view-market .pulseCountryRail {
  order: 2 !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  width: 100% !important;
  padding: 14px !important;
  border-radius: 22px !important;
}

html body .appShell.view-market .pulseCountryRail > span {
  grid-column: 1 / -1 !important;
  padding: 0 4px 2px !important;
  color: #344054 !important;
  font-size: .9rem !important;
}

html body .appShell.view-market .pulseCountryRail button {
  justify-content: start !important;
  min-height: 62px !important;
  background: #ffffff !important;
}

html body .appShell.view-market .liveStatsStrip {
  order: 3 !important;
}

html body .appShell.view-market .liveStatsStrip > * {
  min-height: 78px !important;
  padding: 14px 18px !important;
  border-radius: 18px !important;
}

html body .appShell.view-market .liveStatsStrip strong {
  font-size: clamp(1.35rem, 1.45vw, 1.75rem) !important;
}

html body .appShell.view-market .marketPulseGrid {
  order: 4 !important;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr) !important;
}

html body .appShell.view-market :where(.pulseFeed, .pulseTrips) {
  min-height: 0 !important;
}

@media (max-width: 1180px) {
  html body .appShell.view-market .pulseCountryRail,
  html body .appShell.view-market .liveStatsStrip,
  html body .appShell.view-market .marketPulseGrid {
    grid-template-columns: 1fr !important;
  }
}

/* Marketplace section pass 3: override legacy two-column auto-placement with a predictable reading order. */
html body:has(.appShell.view-market) .marketPulse {
  grid-template-columns: minmax(0, 1fr) !important;
  align-items: start !important;
}

html body:has(.appShell.view-market) .marketPulseHead,
html body:has(.appShell.view-market) .pulseCountryRail,
html body:has(.appShell.view-market) .liveStatsStrip,
html body:has(.appShell.view-market) .marketPulseGrid {
  grid-column: 1 / -1 !important;
  width: 100% !important;
}

html body:has(.appShell.view-market) .marketPulseHead {
  order: 1 !important;
}

html body:has(.appShell.view-market) .pulseCountryRail {
  order: 2 !important;
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  grid-template-columns: none !important;
  width: fit-content !important;
  max-width: 100% !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body:has(.appShell.view-market) .pulseCountryRail > span {
  flex: 0 0 auto !important;
  width: auto !important;
  padding-right: 8px !important;
}

html body:has(.appShell.view-market) .pulseCountryRail button {
  flex: 0 0 168px !important;
  width: auto !important;
  min-width: 168px !important;
  max-width: 168px !important;
  min-height: 56px !important;
  padding: 10px 12px !important;
  background: rgba(255,255,255,.94) !important;
  box-shadow: 0 8px 22px rgba(15, 23, 42, .045) !important;
}

html body:has(.appShell.view-market) .liveStatsStrip {
  order: 3 !important;
}

html body:has(.appShell.view-market) .marketPulseGrid {
  order: 4 !important;
}

html body:has(.appShell.view-policy) :where(.selfServiceGuide, .policyQaView) {
  max-height: none !important;
  height: auto !important;
  overflow: visible !important;
  scrollbar-width: auto !important;
}

/* BondMai visual reference pass: full-bleed travel hero, closer to the launch mockup. */
html body:has(.appShell.view-market),
html body:has(.appShell.view-market) .appShell {
  background: #f7fbfa !important;
}

html body:has(.appShell.view-market) .topbar {
  min-height: 96px !important;
  padding: 0 clamp(28px, 4.8vw, 76px) !important;
  background: rgba(255, 255, 255, .82) !important;
  border-bottom: 1px solid rgba(15, 23, 42, .06) !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .8) inset !important;
  backdrop-filter: blur(20px) saturate(1.12) !important;
}

html body:has(.appShell.view-market) .topbar .brand {
  gap: 12px !important;
}

html body:has(.appShell.view-market) .topbar .logoMark {
  width: 38px !important;
  height: 38px !important;
  border-radius: 15px !important;
  background: #e5f7f4 !important;
  color: #007d77 !important;
  box-shadow: none !important;
}

html body:has(.appShell.view-market) .topbar .brandName {
  font-size: 1.28rem !important;
  font-weight: 820 !important;
}

html body:has(.appShell.view-market) .topbar .brand small {
  display: none !important;
}

html body:has(.appShell.view-market) .topbar .tabs,
html body:has(.appShell.view-market) .topbar .topBarNav {
  gap: clamp(18px, 2.2vw, 36px) !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
}

html body:has(.appShell.view-market) .topbar .tabs button,
html body:has(.appShell.view-market) .topbar .topBarNav button {
  min-height: 44px !important;
  padding: 0 !important;
  border-radius: 0 !important;
  color: #25302e !important;
  background: transparent !important;
  font-size: .98rem !important;
  font-weight: 720 !important;
}

html body:has(.appShell.view-market) .topbar .tabs button.active,
html body:has(.appShell.view-market) .topbar .topBarNav button.active,
html body:has(.appShell.view-market) .topbar .tabs button:hover,
html body:has(.appShell.view-market) .topbar .topBarNav button:hover {
  color: #007d77 !important;
  background: transparent !important;
  box-shadow: inset 0 -2px 0 #007d77 !important;
}

html body:has(.appShell.view-market) .heroProduct.heroSearchFirst {
  width: 100vw !important;
  max-width: none !important;
  min-height: clamp(660px, 72vh, 790px) !important;
  height: auto !important;
  margin: 0 0 0 calc(50% - 50vw) !important;
  padding: clamp(82px, 8vw, 128px) clamp(44px, 7vw, 112px) clamp(82px, 8vw, 118px) !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(310px, .72fr) !important;
  gap: clamp(20px, 4vw, 72px) !important;
  align-items: center !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: hidden !important;
  background:
    linear-gradient(90deg, rgba(247, 251, 250, .98) 0%, rgba(247, 251, 250, .91) 30%, rgba(247, 251, 250, .50) 57%, rgba(247, 251, 250, .10) 100%),
    linear-gradient(180deg, rgba(255, 255, 255, .45), rgba(247, 251, 250, .2) 58%, rgba(247, 251, 250, .96) 100%),
    url("./images/bondmai-airport-travelers-hero.png") right center / cover no-repeat !important;
}

html body:has(.appShell.view-market) .heroProduct.heroSearchFirst .heroLuxuryGlow,
html body:has(.appShell.view-market) .heroProduct.heroSearchFirst::before,
html body:has(.appShell.view-market) .heroProduct.heroSearchFirst::after {
  display: none !important;
}

html body:has(.appShell.view-market) .heroProduct.heroSearchFirst .heroCopy {
  max-width: 760px !important;
  padding-left: 0 !important;
}

html body:has(.appShell.view-market) .heroProduct.heroSearchFirst .eyebrow {
  display: none !important;
}

html body:has(.appShell.view-market) .heroProduct.heroSearchFirst h1 {
  max-width: 700px !important;
  margin: 0 !important;
  color: #14201e !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .55) !important;
}

html body:has(.appShell.view-market) .heroProduct.heroSearchFirst .heroTitleEn {
  display: block !important;
  color: #14201e !important;
  font-size: clamp(3.65rem, 5.2vw, 6.15rem) !important;
  line-height: .98 !important;
  font-weight: 860 !important;
  letter-spacing: 0 !important;
}

html body:has(.appShell.view-market) .heroProduct.heroSearchFirst .heroTitleEnSecond {
  color: #007d77 !important;
}

html body:has(.appShell.view-market) .heroProduct.heroSearchFirst .heroTitleZh {
  display: none !important;
}

html body:has(.appShell.view-market) .heroProduct.heroSearchFirst .heroLead {
  max-width: 520px !important;
  margin: 28px 0 0 !important;
  color: #52615e !important;
  font-size: clamp(1.08rem, 1.25vw, 1.24rem) !important;
  line-height: 1.75 !important;
  font-weight: 560 !important;
}

html body:has(.appShell.view-market) .heroProduct.heroSearchFirst .heroSearchPanel {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 168px !important;
  align-items: stretch !important;
  width: min(100%, 930px) !important;
  margin-top: 44px !important;
  padding: 10px !important;
  border: 1px solid rgba(15, 23, 42, .08) !important;
  border-radius: 16px !important;
  background: rgba(255, 255, 255, .94) !important;
  box-shadow: 0 20px 48px rgba(16, 24, 40, .10), 0 2px 8px rgba(16, 24, 40, .04) !important;
  backdrop-filter: blur(18px) saturate(1.08) !important;
}

html body:has(.appShell.view-market) .heroProduct.heroSearchFirst .heroSearchGrid {
  display: grid !important;
  grid-template-columns: minmax(180px, 1fr) minmax(190px, .95fr) minmax(180px, .85fr) !important;
  gap: 0 !important;
}

html body:has(.appShell.view-market) .heroProduct.heroSearchFirst .heroSearchField {
  min-height: 82px !important;
  padding: 16px 22px !important;
  border: 0 !important;
  border-right: 1px solid rgba(15, 23, 42, .10) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body:has(.appShell.view-market) .heroProduct.heroSearchFirst .heroSearchField span {
  color: #25302e !important;
  font-size: .9rem !important;
  font-weight: 820 !important;
}

html body:has(.appShell.view-market) .heroProduct.heroSearchFirst .heroSearchField input,
html body:has(.appShell.view-market) .heroProduct.heroSearchFirst .heroSearchField select {
  min-height: 30px !important;
  padding: 0 !important;
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  color: #66736f !important;
  font-size: .98rem !important;
  box-shadow: none !important;
}

html body:has(.appShell.view-market) .heroProduct.heroSearchFirst .heroSearchSubmit {
  min-height: 82px !important;
  height: 100% !important;
  border-radius: 14px !important;
  background: #007d77 !important;
  color: #fff !important;
  font-size: 1rem !important;
  font-weight: 820 !important;
  box-shadow: 0 14px 30px rgba(0, 125, 119, .20) !important;
}

html body:has(.appShell.view-market) .heroProduct.heroSearchFirst .heroPopularRow {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin-top: 28px !important;
  color: #52615e !important;
  font-weight: 720 !important;
}

html body:has(.appShell.view-market) .heroProduct.heroSearchFirst .heroPopularRow button {
  min-height: 32px !important;
  padding: 0 18px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, .70) !important;
  color: #3f4c49 !important;
  box-shadow: 0 6px 18px rgba(15, 23, 42, .045) !important;
}

html body:has(.appShell.view-market) .heroProduct.heroSearchFirst .heroCountryPills {
  display: none !important;
}

html body:has(.appShell.view-market) .heroProduct.heroSearchFirst .heroLuxuryVisual {
  position: relative !important;
  align-self: stretch !important;
  min-height: 440px !important;
  pointer-events: none !important;
}

html body:has(.appShell.view-market) .heroProduct.heroSearchFirst .heroImageCard {
  display: none !important;
}

html body:has(.appShell.view-market) .heroProduct.heroSearchFirst .heroGlassMatch {
  position: absolute !important;
  right: clamp(4px, 2vw, 32px) !important;
  bottom: clamp(8px, 7vw, 84px) !important;
  width: min(390px, 100%) !important;
  padding: 20px !important;
  border: 1px solid rgba(15, 23, 42, .08) !important;
  border-radius: 20px !important;
  background: rgba(255, 255, 255, .92) !important;
  color: #25302e !important;
  box-shadow: 0 22px 54px rgba(16, 24, 40, .14) !important;
  backdrop-filter: blur(16px) saturate(1.06) !important;
  pointer-events: auto !important;
}

html body:has(.appShell.view-market) .heroProduct.heroSearchFirst .heroGlassMatch * {
  color: inherit !important;
}

html body:has(.appShell.view-market) .heroProduct.heroSearchFirst .heroMatchOrb {
  background: #007d77 !important;
  color: #fff !important;
}

html body:has(.appShell.view-market) .workspace {
  width: min(100%, 1600px) !important;
  max-width: none !important;
  margin: -34px auto 0 !important;
  padding: 0 clamp(28px, 4.2vw, 64px) 76px !important;
  grid-template-columns: minmax(0, 1fr) !important;
}

html body:has(.appShell.view-market) .panel {
  width: 100% !important;
  max-width: none !important;
}

html body:has(.appShell.view-market) .rail {
  display: none !important;
}

html body:has(.appShell.view-market) .marketPulse {
  margin-top: 0 !important;
  padding: clamp(34px, 4.2vw, 56px) !important;
  border: 1px solid rgba(15, 23, 42, .07) !important;
  border-radius: 20px !important;
  background: rgba(255, 255, 255, .94) !important;
  box-shadow: 0 24px 70px rgba(16, 24, 40, .08) !important;
}

@media (max-width: 900px) {
  html body:has(.appShell.view-market) .topbar {
    min-height: 76px !important;
    padding-inline: 16px !important;
  }

  html body:has(.appShell.view-market) .topbar .tabs {
    display: none !important;
  }

  html body:has(.appShell.view-market) .heroProduct.heroSearchFirst {
    min-height: 680px !important;
    padding: 78px 24px 70px !important;
    grid-template-columns: 1fr !important;
    background:
      linear-gradient(180deg, rgba(247, 251, 250, .98) 0%, rgba(247, 251, 250, .88) 42%, rgba(247, 251, 250, .96) 100%),
      url("./images/bondmai-airport-travelers-hero.png") center top / cover no-repeat !important;
  }

  html body:has(.appShell.view-market) .heroProduct.heroSearchFirst .heroTitleEn {
    font-size: clamp(3rem, 14vw, 4.6rem) !important;
  }

  html body:has(.appShell.view-market) .heroProduct.heroSearchFirst .heroSearchPanel {
    grid-template-columns: 1fr !important;
    margin-top: 30px !important;
  }

  html body:has(.appShell.view-market) .heroProduct.heroSearchFirst .heroSearchGrid {
    grid-template-columns: 1fr !important;
  }

  html body:has(.appShell.view-market) .heroProduct.heroSearchFirst .heroSearchField {
    min-height: 68px !important;
    border-right: 0 !important;
    border-bottom: 1px solid rgba(15, 23, 42, .08) !important;
  }

  html body:has(.appShell.view-market) .heroProduct.heroSearchFirst .heroSearchSubmit {
    min-height: 58px !important;
  }

  html body:has(.appShell.view-market) .heroProduct.heroSearchFirst .heroLuxuryVisual {
    display: none !important;
  }

  html body:has(.appShell.view-market) .workspace {
    margin-top: -24px !important;
    padding-inline: 16px !important;
  }
}
/* Quiet app-loading skeleton used after removing the verbose progress panel. */
body :where(.themeToggle, .languageToggle) {
  display: none !important;
}

body .loadingSkeleton {
  position: relative;
  display: grid;
  gap: 14px;
  width: min(100%, 720px);
  margin: 36px auto;
  padding: 0;
}

body .loadingSkeleton i {
  display: block;
  height: 16px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(12, 109, 104, .08), rgba(12, 109, 104, .15), rgba(12, 109, 104, .08));
  background-size: 220% 100%;
  animation: bondmaiSkeleton 1.2s ease-in-out infinite;
}

body .loadingSkeleton i:nth-of-type(2) {
  width: 82%;
}

body .loadingSkeleton i:nth-of-type(3) {
  width: 64%;
}

body .loadingSkeletonStatus {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

@keyframes bondmaiSkeleton {
  from { background-position: 100% 0; }
  to { background-position: -100% 0; }
}

/* AI presentation has been retired from the product interface. */
html body .marketplaceHeroPanel::after,
html body:has(.marketPulse)::after,
html body:has(.marketPulse) .heroSearchPanel::after,
html body:not(:has(.marketPulse)) .accountView.guestAccount .accountCard::after,
html body .accountView.guestAccount.standaloneGuestAccount .guestAccountEntry::after,
html body .marketPulseHead h2::after,
html body:has(.marketPulse) .matchCard::after {
  content: none !important;
  display: none !important;
}

html body .toastNotice::before,
html body .notice::before {
  content: "✓" !important;
}

html body .estimate::before {
  content: "估" !important;
}