:root {
  color-scheme: light;
  --ink: #10202f;
  --muted: #607280;
  --line: #d8e7ea;
  --paper: #f4fbff;
  --panel: #ffffff;
  --sand: #fff4df;
  --sky: #e9f7ff;
  --aqua: #12c7d8;
  --sea: #0077b6;
  --reef: #ff6b4a;
  --sun: #ffd166;
  --mint: #38c98d;
  --palm: #1fa971;
  --violet: #7c5cff;
  --pink: #ff5fa2;
  --navy: #081b2d;
  --gold: #f6c85f;
  --shadow: 0 18px 50px rgba(16, 32, 47, 0.12);
  --shadow-bright: 0 18px 46px rgba(0, 119, 182, 0.16);
  --travel-gradient: linear-gradient(135deg, var(--sea), var(--aqua));
  --sunset-gradient: linear-gradient(135deg, var(--reef), var(--pink));
  --ai-gradient: linear-gradient(135deg, var(--violet), #2f7cf6 58%, var(--pink));
  --tropical-gradient: linear-gradient(135deg, var(--aqua), var(--palm));
}

/* Corporate booking operations */
.corporate-operations-section {
  display: grid;
  gap: 18px;
  min-width: 0;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.corporate-operations-heading {
  align-items: end;
  padding: 4px 2px 0;
}

.corporate-operations-heading h3,
.corporate-operation-card h4 {
  width: 100%;
  margin: 0;
  color: #102737;
  writing-mode: horizontal-tb;
  word-break: normal;
  overflow-wrap: break-word;
}

.corporate-operations-heading h3 {
  font-size: clamp(1.35rem, 2vw, 1.85rem);
  line-height: 1.2;
}

.corporate-operations-heading p:last-child {
  max-width: 760px;
  margin: 6px 0 0;
  color: #5d7180;
}

.corporate-ops-heading-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.corporate-ops-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  min-width: 0;
}

.corporate-ops-metrics article {
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 17px 18px;
  background: #fff;
  border: 1px solid #d8e8ec;
  border-radius: 8px;
  box-shadow: 0 8px 22px rgba(16, 39, 55, 0.06);
}

.corporate-ops-metrics span,
.corporate-ops-metrics small {
  color: #617583;
}

.corporate-ops-metrics strong {
  color: #102737;
  font-size: 1.55rem;
  line-height: 1.05;
}

.corporate-operations-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
  min-width: 0;
}

.corporate-operation-card {
  grid-column: span 6;
  display: grid;
  gap: 15px;
  min-width: 0;
  height: auto;
  padding: 20px;
  overflow: hidden;
  background: #fff;
  border: 1px solid #d8e8ec;
  border-radius: 8px;
  box-shadow: 0 10px 26px rgba(16, 39, 55, 0.07);
}

.corporate-booking-queue-card,
.corporate-service-card {
  grid-column: span 7;
}

.corporate-approval-card,
.corporate-duty-card {
  grid-column: span 5;
}

.corporate-operation-card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  min-width: 0;
}

.corporate-operation-card__header > div {
  min-width: 0;
}

.corporate-operation-card h4 {
  font-size: 1.15rem;
  line-height: 1.25;
}

.corporate-operation-kicker {
  display: block;
  margin-bottom: 4px;
  color: #078bab;
  font-size: 0.73rem;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

.corporate-booking-form,
.corporate-service-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  min-width: 0;
}

.corporate-booking-form label,
.corporate-service-form label {
  display: grid;
  gap: 6px;
  min-width: 0;
  color: #334f5e;
  font-size: 0.82rem;
  font-weight: 700;
}

.corporate-booking-form input,
.corporate-booking-form select,
.corporate-service-form input,
.corporate-service-form select,
.corporate-service-form textarea {
  width: 100%;
  min-width: 0;
  min-height: 42px;
  padding: 9px 11px;
  color: #102737;
  background: #f9fcfc;
  border: 1px solid #cadde2;
  border-radius: 7px;
  box-sizing: border-box;
  font: inherit;
}

.corporate-booking-form textarea,
.corporate-service-form textarea {
  resize: vertical;
}

.corporate-booking-confirmation,
.corporate-service-subject,
.corporate-service-description,
.corporate-booking-form .primary-button,
.corporate-service-form .primary-button {
  grid-column: 1 / -1;
}

.corporate-booking-confirmation {
  grid-template-columns: auto minmax(0, 1fr) !important;
  align-items: center;
}

.corporate-booking-confirmation input {
  width: 18px;
  min-height: 18px;
}

.corporate-operation-message {
  margin: 0;
  padding: 10px 12px;
  color: #3f5e6b;
  background: #eef9fa;
  border-left: 3px solid #18a8bb;
}

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

.corporate-policy-facts div,
.corporate-readiness-list div {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 12px;
  background: #f7fafb;
  border: 1px solid #e0eaed;
  border-radius: 7px;
}

.corporate-policy-facts dt,
.corporate-readiness-list span {
  color: #627783;
  font-size: 0.8rem;
}

.corporate-policy-facts dd,
.corporate-readiness-list strong {
  margin: 0;
  color: #173847;
  font-weight: 800;
}

.corporate-policy-notes {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.corporate-policy-notes span {
  padding: 7px 9px;
  color: #2d5865;
  background: #edf6f5;
  border-radius: 6px;
  font-size: 0.78rem;
  font-weight: 700;
}

.corporate-policy-editor {
  min-width: 0;
  border-top: 1px solid #e0eaed;
  padding-top: 12px;
}

.corporate-policy-editor summary {
  cursor: pointer;
  color: #185064;
  font-weight: 800;
}

.corporate-policy-editor[open] summary {
  margin-bottom: 12px;
}

.corporate-booking-list,
.corporate-approval-list,
.corporate-service-list {
  display: grid;
  gap: 9px;
  min-width: 0;
}

.corporate-booking-row,
.corporate-approval-row,
.corporate-service-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 12px;
  background: #f9fbfc;
  border: 1px solid #dfebee;
  border-radius: 7px;
}

.corporate-booking-row > div,
.corporate-approval-row > div,
.corporate-service-row > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.corporate-booking-row strong,
.corporate-approval-row strong {
  color: #102737;
  overflow-wrap: break-word;
}

.corporate-booking-row span,
.corporate-approval-row span,
.corporate-service-row span {
  color: #617583;
  font-size: 0.82rem;
  overflow-wrap: break-word;
}

.corporate-booking-row__actions {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) auto auto;
  gap: 7px;
  min-width: 340px;
}

.corporate-booking-row__actions input,
.corporate-booking-row__actions select {
  width: 100%;
  min-width: 0;
  min-height: 40px;
  padding: 8px 9px;
  color: #173847;
  background: #fff;
  border: 1px solid #cadde2;
  border-radius: 7px;
}

.corporate-service-row {
  grid-template-columns: minmax(0, 1fr) auto;
}

.corporate-policy-result {
  display: inline-flex;
  width: fit-content;
  padding: 4px 7px;
  border-radius: 5px;
  font-size: 0.7rem !important;
  font-weight: 800;
  text-transform: uppercase;
}

.corporate-policy-result.is-compliant {
  color: #14673e;
  background: #ddf5e8;
}

.corporate-policy-result.is-review,
.document-status.is-warning {
  color: #825a00;
  background: #fff1c8;
}

.document-status.is-success {
  color: #14673e;
  background: #ddf5e8;
}

.corporate-approval-actions {
  grid-auto-flow: column;
  align-items: center;
  gap: 7px !important;
}

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

.corporate-operation-card button {
  min-height: 40px;
}

@media (max-width: 1100px) {
  .corporate-ops-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .corporate-operation-card,
  .corporate-booking-queue-card,
  .corporate-service-card,
  .corporate-approval-card,
  .corporate-duty-card {
    grid-column: span 12;
  }
}

@media (max-width: 640px) {
  .corporate-operations-heading,
  .corporate-operation-card__header {
    align-items: stretch;
    flex-direction: column;
  }

  .corporate-ops-heading-actions {
    justify-content: flex-start;
  }

  .corporate-ops-metrics,
  .corporate-booking-form,
  .corporate-service-form,
  .corporate-policy-facts,
  .corporate-readiness-list {
    grid-template-columns: 1fr;
  }

  .corporate-booking-row,
  .corporate-approval-row,
  .corporate-service-row {
    grid-template-columns: 1fr;
  }

  .corporate-booking-row__actions {
    grid-template-columns: 1fr;
    min-width: 0;
  }

  .corporate-approval-actions {
    grid-auto-flow: row;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

* {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background:
    radial-gradient(circle at top left, rgba(18, 199, 216, 0.18), transparent 32%),
    radial-gradient(circle at 82% 4%, rgba(255, 107, 74, 0.14), transparent 28%),
    linear-gradient(180deg, #f8fdff 0%, var(--paper) 46%, #fff8ea 100%);
  color: var(--ink);
}

button,
input,
textarea {
  font: inherit;
}

button {
  cursor: pointer;
}

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

img {
  max-width: 100%;
}

[hidden] {
  display: none !important;
}

.loader {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(circle at 24% 20%, rgba(255, 209, 102, 0.24), transparent 26%),
    radial-gradient(circle at 74% 18%, rgba(255, 95, 162, 0.22), transparent 28%),
    linear-gradient(135deg, #071726, #073d55 48%, #0b706d);
  color: #fff;
  transition: opacity 320ms ease, visibility 320ms ease;
}

.loader.done {
  opacity: 0;
  visibility: hidden;
}

.loader-card {
  width: min(330px, 100%);
  display: grid;
  justify-items: center;
  gap: 10px;
  text-align: center;
}

.loader-card h1,
.loader-card p {
  margin: 0;
}

.loader-card p {
  color: rgba(255, 255, 255, 0.72);
}

.loader-bar {
  width: 100%;
  height: 8px;
  margin-top: 12px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
}

.loader-bar span {
  display: block;
  width: 45%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--reef), var(--sun), var(--sea));
  animation: load-slide 1.1s ease-in-out infinite;
}

@keyframes load-slide {
  0% { transform: translateX(-110%); }
  100% { transform: translateX(245%); }
}

.pulse {
  animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}

.shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 286px minmax(0, 1fr);
}

.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  padding: 18px 14px;
  background:
    radial-gradient(circle at 20% 0%, rgba(255, 209, 102, 0.22), transparent 30%),
    linear-gradient(180deg, rgba(255, 107, 74, 0.18), transparent 30%),
    linear-gradient(180deg, #08233a 0%, #071726 72%, #0d2e31 100%);
  color: #fff;
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow-y: auto;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.brand-logo-wrap {
  display: block;
  width: min(210px, 100%);
  flex: 0 1 auto;
}

.brand-logo,
.auth-brand-logo,
.loader-logo {
  display: block;
  height: auto;
}

.brand-logo {
  width: 100%;
}

.sidebar .brand {
  min-height: 52px;
  align-items: flex-start;
}

.sidebar .brand-copy {
  display: none;
}

.loader-logo {
  width: 116px;
  margin: 0 auto 10px;
  filter: drop-shadow(0 18px 28px rgba(0, 150, 199, 0.22));
}

.brand strong {
  display: block;
  font-size: 24px;
}

.brand small {
  display: block;
  color: rgba(255, 255, 255, 0.62);
  font-size: 12px;
}

.brand-mark {
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  border-radius: 8px;
  background: transparent url("icons/icon.svg") center / contain no-repeat;
  box-shadow: 0 10px 24px rgba(0, 150, 199, 0.22);
}

.nav {
  display: grid;
  gap: 9px;
}

.nav-group {
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  padding: 7px;
  background: rgba(255, 255, 255, 0.065);
}

.nav-group summary {
  min-height: 34px;
  display: flex;
  align-items: center;
  padding: 0 8px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
}

.nav-group[open] summary {
  color: #fff;
}

.nav button,
.nav a,
.primary-button,
.ghost-button,
.light-button,
.icon-button,
.chip,
.tab {
  border-radius: 8px;
}

.nav button,
.nav a {
  min-height: 38px;
  border: 0;
  color: rgba(255, 255, 255, 0.76);
  background: transparent;
  display: flex;
  align-items: center;
  width: 100%;
  padding: 0 10px;
  font-size: 13px;
  font-weight: 800;
}

.nav .active,
.nav a:hover,
.nav button:hover {
  color: #fff;
  background: linear-gradient(135deg, rgba(18, 199, 216, 0.28), rgba(255, 107, 74, 0.18));
  box-shadow: inset 3px 0 0 var(--sun);
  transform: translateX(2px) scale(1.01);
}

.nav [data-admin-only]::after,
.nav [data-requires-trip-type]::after {
  content: "Role";
  margin-left: auto;
  border-radius: 999px;
  padding: 2px 6px;
  background: rgba(246, 200, 95, 0.18);
  color: #ffe5a6;
  font-size: 10px;
}

.install-card,
.status-card {
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.1);
}

.install-card {
  display: grid;
  gap: 10px;
}

.install-card span,
.status-card span {
  color: rgba(255, 255, 255, 0.66);
  font-size: 13px;
  line-height: 1.4;
}

.status-card {
  margin-top: auto;
}

.status-card strong {
  display: block;
  margin-top: 6px;
  font-size: 21px;
}

.menu-button {
  display: none;
}

main {
  min-width: 0;
  padding: 22px 26px 34px;
}

.topbar {
  display: grid;
  grid-template-columns: auto minmax(150px, auto) minmax(220px, 1fr) auto;
  align-items: center;
  gap: 16px;
  margin-bottom: 18px;
}

.topbar-page-title {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}

.brand-mark.mini {
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
}

.topbar-page-title small,
.topbar-page-title strong {
  display: block;
}

.topbar-page-title small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.topbar-page-title strong {
  max-width: 180px;
  overflow: hidden;
  color: var(--ink);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.search {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  max-width: 620px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: 0 10px 28px rgba(0, 119, 182, 0.08);
}

.search span {
  flex: 0 0 auto;
  min-width: max-content;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

.search input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ink);
}

.global-destination-header {
  position: relative;
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  min-height: 104px;
  margin: -4px 0 18px;
  padding: 12px;
  overflow: hidden;
  border: 1px solid rgba(230, 235, 232, 0.96);
  border-radius: 22px;
  background:
    linear-gradient(135deg, rgba(0, 188, 212, 0.12), rgba(255, 111, 89, 0.12)),
    #fff;
  box-shadow: var(--soft-shadow);
  transition: opacity 260ms ease, transform 260ms ease;
}

.global-destination-header[hidden] {
  display: none;
}

.global-destination-header.is-transitioning {
  opacity: 0.72;
  transform: translateY(2px);
}

.global-destination-header img {
  width: 150px;
  height: 80px;
  border-radius: 16px;
  object-fit: cover;
}

.global-destination-header.image-fallback img {
  background: linear-gradient(135deg, var(--aqua), var(--sun), var(--coral));
  opacity: 0;
}

.global-destination-copy {
  min-width: 0;
}

.global-destination-copy span,
.global-destination-copy strong,
.global-destination-copy p {
  display: block;
  margin: 0;
}

.global-destination-copy span {
  color: var(--sea);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.global-destination-copy strong {
  margin-top: 3px;
  color: var(--ink);
  font-size: 20px;
}

.global-destination-copy p {
  margin-top: 4px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.35;
}

.global-destination-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.top-actions,
.hero-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.primary-button,
.ghost-button,
.light-button,
.icon-button {
  min-height: 44px;
  border: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 0 14px;
  white-space: nowrap;
}

.primary-button {
  background: var(--travel-gradient);
  color: #fff;
  box-shadow: 0 12px 24px rgba(0, 119, 182, 0.22);
}

.ghost-button,
.icon-button {
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
}

.primary-button:hover,
.ghost-button:hover,
.light-button:hover,
.icon-button:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-bright);
}

.light-button {
  background: #fff;
  color: #11222b;
}

.wide {
  width: 100%;
}

.glass {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(16px);
}

.auth-panel,
.pwa-panel,
.hero,
.panel,
.destination-card,
.metrics article {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}

.panel,
.destination-card,
.metrics article {
  box-shadow: 0 14px 38px rgba(16, 32, 47, 0.08);
}

.panel:nth-of-type(4n + 1) {
  background: linear-gradient(180deg, #ffffff, var(--sky));
}

.panel:nth-of-type(4n + 2) {
  background: linear-gradient(180deg, #ffffff, #fff7e8);
}

.panel:nth-of-type(4n + 3) {
  background: linear-gradient(180deg, #ffffff, #f5f1ff);
}

.auth-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 420px);
  gap: 18px;
  align-items: center;
  padding: 18px;
  margin-bottom: 18px;
  box-shadow: var(--shadow);
}

body.app-routed main > section.route-screen[hidden] {
  display: none !important;
}

body.app-routed main > section.route-screen:not([hidden]) {
  display: block;
}

body.app-routed main > section#dashboardHome.route-screen:not([hidden]) {
  display: grid;
}

.pwa-panel {
  display: none;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 16px;
  margin-bottom: 18px;
}

.pwa-panel h2,
.pwa-panel p {
  margin: 0;
}

.pwa-panel p:not(.eyebrow) {
  color: var(--muted);
  line-height: 1.45;
}

.auth-panel h1,
.auth-panel h2,
.auth-panel p {
  margin: 0;
}

.auth-panel p {
  color: var(--muted);
  line-height: 1.5;
}

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

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

.pwa-install-mini {
  display: grid;
  gap: 8px;
  padding: 14px;
  border: 1px solid rgba(8, 127, 140, 0.2);
  border-radius: 18px;
  background: rgba(8, 189, 184, 0.08);
  color: #112b35;
}

.pwa-install-mini strong {
  color: #102c35;
  font-weight: 900;
}

.pwa-install-mini span {
  color: #4f6570;
  line-height: 1.5;
}

.pwa-install-mini div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.pwa-install-mini button {
  min-height: 40px;
  border: 1px solid rgba(8, 127, 140, 0.18);
  background: #ffffff;
  color: #0b5f67;
  font-weight: 850;
}

body.auth-screen {
  background: #071116;
}

body.auth-screen .shell {
  display: block;
}

body.auth-screen .sidebar,
body.auth-screen .topbar,
body.auth-screen .mobile-nav,
body.auth-screen .pwa-panel,
body.auth-screen main > section:not(.auth-panel) {
  display: none !important;
}

body.auth-screen main {
  min-height: 100vh;
  padding: 0;
  overflow: hidden;
}

body.auth-screen .shell {
  min-height: 100vh;
}

body.auth-screen .auth-panel {
  display: block;
}

body.auth-screen .auth-panel[hidden] {
  display: none !important;
}

.auth-landing {
  min-height: 100vh;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  display: block;
  color: #edf8fb;
  background: #071116;
  box-shadow: none;
}

.auth-landing-nav {
  min-height: 132px;
  padding: 36px 42px;
  border-bottom: 1px solid rgba(202, 225, 231, 0.16);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
}

.auth-brand {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  color: #edf8fb;
  text-decoration: none;
  font-size: 38px;
  line-height: 1;
}

.auth-brand-logo {
  width: clamp(188px, 22vw, 292px);
  max-height: 84px;
  object-fit: contain;
  object-position: left center;
}

.auth-brand .brand-mark {
  width: 38px;
  height: 38px;
}

.auth-nav-actions,
.auth-landing-actions {
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
}

.auth-link-button,
.auth-start-button {
  min-height: 58px;
  border: 0;
  border-radius: 23px;
  padding: 0 24px;
  font-size: 28px;
  line-height: 1;
}

.auth-link-button {
  background: transparent;
  color: #edf8fb;
}

.auth-link-button.muted {
  color: #9fb0b9;
  font-size: 24px;
}

.auth-start-button {
  background: #08bdb8;
  color: #031015;
}

.auth-landing-grid {
  min-height: calc(100vh - 132px);
  padding: 34px 42px 42px;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(420px, 0.62fr);
  gap: 28px;
  align-items: stretch;
}

.auth-carousel {
  position: relative;
  min-height: calc(100vh - 210px);
  overflow: hidden;
  border-radius: 26px;
  background: #18303a;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.35);
}

.auth-carousel img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.04);
  transition: opacity 720ms ease, transform 1400ms ease;
}

.auth-carousel.is-fading img {
  opacity: 0.42;
  transform: scale(1.09) translateX(10px);
}

.auth-carousel::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(7, 17, 22, 0.76), rgba(7, 17, 22, 0.34) 58%, rgba(7, 17, 22, 0.14));
}

.auth-carousel-overlay {
  position: relative;
  z-index: 1;
  min-height: inherit;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 42px;
  color: #f7fbfc;
}

.auth-pill {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: 42px;
  margin: 0 0 22px;
  padding: 0 16px;
  border-radius: 999px;
  color: #f7fbfc;
  background: rgba(11, 31, 38, 0.58);
  backdrop-filter: blur(14px);
  font-size: 15px;
  font-weight: 900;
}

.auth-landing h1 {
  margin: 0;
  color: #f7fbfc;
  font-size: clamp(44px, 5.3vw, 82px);
  line-height: 1.02;
  font-weight: 800;
  letter-spacing: 0;
}

.auth-carousel-overlay > p:not(.auth-pill) {
  max-width: 700px;
  margin: 22px 0 0;
  color: rgba(247, 251, 252, 0.82);
  font-size: clamp(18px, 1.7vw, 27px);
  line-height: 1.45;
}

.auth-carousel blockquote {
  width: fit-content;
  max-width: min(620px, 100%);
  margin: 28px 0 0;
  border-radius: 18px;
  padding: 15px 18px;
  background: rgba(7, 17, 22, 0.44);
  backdrop-filter: blur(16px);
  color: #fff3de;
  font-size: clamp(20px, 2vw, 32px);
  font-weight: 900;
}

.auth-travel-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 22px;
}

.auth-travel-tags span {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 0 10px;
  background: rgba(255, 244, 226, 0.18);
  color: #fff7eb;
  font-size: 12px;
  font-weight: 900;
}

.auth-landing .auth-card {
  display: grid;
  align-self: center;
  width: 100%;
  max-height: calc(100vh - 210px);
  overflow: auto;
  padding: 26px;
  border: 1px solid rgba(13, 40, 49, 0.12);
  border-radius: 22px;
  background: #fffaf2;
  color: #132b34;
  box-shadow: 0 26px 80px rgba(0, 0, 0, 0.28);
}

.auth-landing .auth-card h2 {
  color: #132b34;
}

.auth-landing .auth-card p,
.auth-landing .auth-form label,
.auth-landing .small {
  color: #66777d;
}

.auth-card-copy {
  margin-top: 8px;
  font-size: 14px;
}

.auth-sync-note {
  margin: 9px 0 0;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(8, 189, 184, 0.08);
  color: #506971;
  font-size: 12px;
  line-height: 1.42;
}

.auth-switch {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f3f7f5;
}

.auth-switch button {
  min-height: 38px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  font-weight: 800;
}

.auth-switch button.active {
  background: #fff;
  color: var(--ink);
  box-shadow: 0 8px 22px rgba(25, 47, 56, 0.1);
}

.guest-access-heading,
.guest-portal-panel {
  display: grid;
  gap: 8px;
}

.guest-access-heading {
  padding: 12px;
  border: 1px solid rgba(0, 172, 176, 0.24);
  border-radius: 8px;
  background: #eefbfa;
}

.guest-access-heading span,
.guest-portal-panel span {
  color: var(--sea);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.guest-access-heading strong,
.guest-portal-panel strong {
  color: var(--ink);
}

.guest-access-heading small,
.guest-portal-panel small {
  color: var(--muted);
  line-height: 1.45;
}

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

.guest-access-actions button {
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 10px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-weight: 850;
  cursor: pointer;
}

.guest-portal-panel {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfb;
}

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

.guest-portal-grid article {
  min-height: 98px;
  display: grid;
  align-content: start;
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  background: #fff;
}

.guest-portal-grid strong {
  font-size: 13px;
  line-height: 1.35;
}

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

.auth-support-actions button {
  min-height: 38px;
  border: 1px solid #d9e2df;
  border-radius: 8px;
  background: #fff;
  color: #27545d;
  font-size: 12px;
  font-weight: 800;
}

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

.auth-form input,
.admin-form input,
.admin-form textarea {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  outline: 0;
  background: #fff;
}

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

.password-field button,
.text-button,
.auth-check button,
.auth-bottom-link button {
  border: 0;
  background: transparent;
  color: var(--sea);
  font-weight: 900;
  cursor: pointer;
}

.password-field button {
  min-width: 62px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #eef7f4;
}

.auth-inline-row,
.auth-check {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.auth-check {
  justify-content: flex-start;
}

.auth-check input {
  width: auto;
}

.social-signin,
.verification-panel,
.onboarding-panel {
  display: grid;
  gap: 8px;
}

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

.social-signin button,
.onboarding-panel button {
  min-height: 40px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: #27545d;
  font-weight: 900;
}

.verification-panel,
.onboarding-panel {
  border: 1px solid #cde7df;
  border-radius: 10px;
  padding: 12px;
  background: #eefaf6;
}

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

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

.grouped-nav .nav-group:not([open]) {
  padding-bottom: 0;
}

.grouped-nav .nav-group summary {
  cursor: pointer;
}

.auth-bottom-link {
  text-align: center;
  font-size: 13px;
}

.admin-form textarea {
  min-height: 112px;
  resize: vertical;
}

.small {
  font-size: 13px;
  color: var(--muted);
}

.eyebrow {
  margin: 0 0 9px;
  color: var(--sea);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 800;
}

.hero {
  position: relative;
  min-height: 360px;
  overflow: hidden;
  box-shadow: var(--shadow);
}

.destination-banner {
  isolation: isolate;
  border: 1px solid rgba(0, 150, 199, 0.16);
  background: #07171f;
  touch-action: pan-y;
}

.hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  position: absolute;
  inset: 0;
  transform: scale(1.02);
  transition: opacity 520ms ease, filter 520ms ease, transform 900ms ease;
}

.hero.is-transitioning img,
.hero.is-flashing img {
  opacity: 0.36;
  filter: saturate(1.22) brightness(1.08);
  transform: scale(1.075);
}

.hero.is-transitioning .hero-copy,
.hero.is-flashing .hero-copy {
  animation: destinationFlash 620ms ease;
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(8, 27, 45, 0.84), rgba(0, 119, 182, 0.24) 54%, rgba(255, 107, 74, 0.18)),
    radial-gradient(circle at 78% 16%, rgba(255, 209, 102, 0.28), transparent 30%);
}

.hero-copy {
  position: absolute;
  z-index: 1;
  inset: auto auto 0 0;
  width: min(560px, 100%);
  padding: 30px;
  color: #fff;
}

.hero-copy .eyebrow {
  color: rgba(255, 255, 255, 0.78);
}

.hero h1 {
  margin: 0;
  font-size: clamp(34px, 5vw, 64px);
  line-height: 0.95;
}

.hero p {
  max-width: 460px;
  color: rgba(255, 255, 255, 0.86);
  line-height: 1.55;
}

.hero .auth-confirmation-banner {
  max-width: 520px;
  margin: 14px 0 0;
  padding: 10px 12px;
  border: 1px solid rgba(170, 255, 220, 0.5);
  border-radius: 10px;
  background: rgba(7, 35, 31, 0.66);
  color: #e7fff5;
  font-size: 13px;
  font-weight: 750;
  line-height: 1.4;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.14);
}

.destination-banner-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  max-width: 620px;
  margin: 18px 0 20px;
  border-left: 4px solid var(--sun);
  padding: 2px 0 2px 16px;
  background: linear-gradient(90deg, rgba(7, 23, 31, 0.42), rgba(7, 23, 31, 0));
  backdrop-filter: blur(3px);
}

.destination-banner-meta span {
  min-width: 0;
  padding: 8px 14px 8px 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: rgba(255, 255, 255, 0.9);
  font-size: 12px;
  font-weight: 750;
  line-height: 1.45;
  backdrop-filter: none;
}

.destination-banner-meta span:nth-child(odd) {
  border-right: 1px solid rgba(255, 255, 255, 0.18);
}

.destination-banner-meta span:nth-child(even) {
  padding-left: 14px;
}

.destination-banner-controls {
  position: absolute;
  z-index: 2;
  right: 18px;
  bottom: 18px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.destination-banner-controls .icon-button {
  min-width: 44px;
  color: #fff;
}

#destinationPauseButton {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 4;
  width: 36px;
  min-width: 36px;
  height: 36px;
  min-height: 36px;
  padding: 0;
  border-radius: 50%;
  border-color: rgba(255, 255, 255, 0.42);
  background: rgba(7, 23, 31, 0.48);
  color: #fff;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.22);
  backdrop-filter: blur(12px);
  font-size: 15px;
  line-height: 1;
}

#destinationPauseButton:hover,
#destinationPauseButton:focus-visible {
  background: rgba(7, 23, 31, 0.72);
  transform: translateY(-1px);
}

.destination-banner-dots {
  position: absolute;
  z-index: 2;
  left: 30px;
  bottom: 18px;
  display: flex;
  gap: 7px;
}

.destination-banner-dots button {
  width: 28px;
  height: 7px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.42);
  cursor: pointer;
}

.destination-banner-dots button.active,
.destination-banner-dots button[aria-current="true"] {
  background: var(--sun);
}

@keyframes destinationFlash {
  0% {
    opacity: 0.42;
    transform: translateY(8px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero img {
    transition: opacity 220ms ease;
    transform: none;
  }

  .hero.is-transitioning img,
  .hero.is-flashing img {
    opacity: 0.82;
    filter: none;
    transform: none;
  }

  .hero.is-transitioning .hero-copy,
  .hero.is-flashing .hero-copy {
    animation: none;
  }
}

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

.destination-insights {
  margin-top: 18px;
}

.destination-chooser {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.destination-chooser button {
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0 12px;
  background: #fbfcfb;
  color: var(--muted);
  font-weight: 900;
  cursor: pointer;
}

.destination-chooser button.active {
  border-color: rgba(23, 177, 169, 0.55);
  background: #e7fbf8;
  color: #0f6f6b;
}

.destination-fact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(280px, 1.15fr);
  gap: 10px;
}

.destination-fact-grid article {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
  background: #fbfcfb;
}

.destination-fact-grid span {
  display: block;
  color: var(--sea);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.destination-fact-grid p {
  margin: 8px 0 0;
  color: var(--muted);
  line-height: 1.45;
}

.adventure-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.adventure-tags span {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 0 10px;
  background: #eef4f2;
  color: #27545d;
  font-size: 12px;
  letter-spacing: 0;
  text-transform: none;
}

.metrics article {
  min-height: 96px;
  padding: 16px;
}

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

.metrics strong {
  display: block;
  margin-top: 8px;
  font-size: 25px;
}

.metrics small {
  display: block;
  margin-top: 4px;
  color: var(--sea);
  font-weight: 700;
}

.dashboard-widgets {
  margin: 18px 0;
  display: grid;
  gap: 12px;
}

.dashboard-controls {
  display: flex;
  align-items: end;
  gap: 10px;
  flex-wrap: wrap;
}

.dashboard-controls label {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.dashboard-controls select {
  min-height: 40px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 10px;
  background: #fff;
  color: var(--ink);
}

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

.travel-widget {
  min-height: 190px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  border: 1px solid rgba(216, 231, 234, 0.9);
  border-radius: 18px;
  padding: 16px;
  background: linear-gradient(180deg, #fff, #effbff);
  box-shadow: 0 14px 34px rgba(16, 32, 47, 0.08);
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.travel-widget:hover {
  transform: translateY(-2px);
  border-color: rgba(0, 119, 182, 0.26);
  box-shadow: var(--shadow-bright);
}

.travel-widget.is-large {
  grid-column: span 2;
}

.travel-widget.is-pinned {
  order: -1;
  border-color: rgba(18, 199, 216, 0.44);
  background: linear-gradient(135deg, #ffffff, #e6fbff);
  box-shadow: 0 18px 42px rgba(0, 119, 182, 0.15);
}

.travel-widget[data-widget-scope*="solo"]:nth-of-type(2n),
.travel-widget[data-widget-scope*="group"]:nth-of-type(3n) {
  background: linear-gradient(135deg, #ffffff, #fff4e0);
  border-color: rgba(255, 209, 102, 0.34);
}

.travel-widget[data-widget-scope*="corporate"] {
  background: linear-gradient(135deg, #ffffff, #eaf5ff);
  border-color: rgba(0, 119, 182, 0.22);
}

.travel-widget h3,
.travel-widget p {
  margin: 0;
}

.widget-toolbar {
  display: flex;
  align-items: center;
  gap: 7px;
}

.widget-toolbar span {
  margin-right: auto;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.widget-toolbar button {
  min-height: 28px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0 8px;
  background: #fff;
  color: #0b6170;
  font-size: 11px;
  font-weight: 900;
}

.travel-widget.is-pinned .widget-toolbar button {
  border-color: transparent;
  background: var(--sunset-gradient);
  color: #fff;
}

.widget-meta,
.notification-mini-list,
.ai-reminder-list {
  display: grid;
  gap: 7px;
}

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

.widget-meta span,
.notification-mini-list span,
.ai-reminder-list div {
  border-radius: 10px;
  padding: 8px;
  background: #eef4f2;
  color: #27545d;
  font-size: 12px;
  font-weight: 800;
}

.ai-reminder-list div strong,
.ai-reminder-list div span {
  display: block;
}

.ai-reminder-list div span {
  margin-top: 3px;
  color: var(--muted);
  font-weight: 700;
}

.progress-bar {
  height: 11px;
  overflow: hidden;
  border-radius: 999px;
  background: #e7ecec;
}

.progress-bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--sea), var(--sun));
}

.status-pill {
  width: fit-content;
  border-radius: 999px;
  padding: 5px 9px;
  background: #e8fbf8;
  color: #0f6f6b;
  font-size: 12px;
  font-weight: 900;
}

.mini-collage {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  grid-template-rows: repeat(2, 74px);
  gap: 6px;
}

.mini-collage img {
  width: 100%;
  height: 100%;
  border-radius: 10px;
  object-fit: cover;
}

.mini-collage img:first-child {
  grid-row: span 2;
}

.travel-widget[hidden] {
  display: none;
}

.bank-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr);
  gap: 18px;
  margin-bottom: 18px;
}

.content-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(340px, 0.65fr);
  gap: 18px;
  align-items: start;
}

.main-stack,
.right-stack {
  display: grid;
  gap: 14px;
}

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

.section-heading h1,
.section-heading h2 {
  margin: 0;
}

.compact {
  margin-bottom: 12px;
}

.ledger-stats,
.bank-overview,
.wallet-breakdown,
.navigation-status-grid,
.security-status-grid,
.backend-summary-grid,
.go-live-summary-grid,
.policy-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 12px 0;
}

.wallet-breakdown,
.navigation-status-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ledger-stats article,
.bank-overview article,
.wallet-breakdown div,
.navigation-status-grid div,
.security-status-grid article,
.backend-summary-grid article,
.go-live-summary-grid article,
.policy-summary-grid article {
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfb;
}

.ledger-stats span,
.bank-overview span,
.wallet-breakdown span,
.navigation-status-grid span,
.security-status-grid span,
.security-status-grid small,
.backend-summary-grid span,
.backend-summary-grid small,
.go-live-summary-grid span,
.go-live-summary-grid small,
.policy-summary-grid span,
.policy-summary-grid small {
  display: block;
  color: var(--muted);
  font-size: 12px;
}

.ledger-stats strong,
.bank-overview strong,
.wallet-breakdown strong,
.navigation-status-grid strong,
.security-status-grid strong,
.backend-summary-grid strong,
.go-live-summary-grid strong,
.policy-summary-grid strong {
  display: block;
  margin-top: 6px;
  font-size: 20px;
}

.ledger-list,
.rule-list,
.audit-list,
.security-list,
.navigation-audit-list,
.backend-checklist,
.go-live-checklist,
.security-control-grid,
.fraud-signal-list,
.copyright-columns,
.copyright-process {
  display: grid;
  gap: 8px;
}

.ledger-list div,
.rule-list div,
.audit-list div,
.security-list div,
.navigation-audit-list div,
.backend-checklist div,
.go-live-checklist div,
.security-control-grid div,
.fraud-signal-list div,
.copyright-columns div,
.copyright-process div {
  padding: 10px 0;
  border-top: 1px solid var(--line);
}

.ledger-list time,
.audit-list time {
  display: block;
  color: var(--muted);
  font-size: 12px;
}

.ledger-list strong,
.ledger-list span,
.rule-list strong,
.rule-list span,
.audit-list strong,
.audit-list span,
.security-list strong,
.security-list span,
.navigation-audit-list strong,
.navigation-audit-list span,
.backend-checklist strong,
.backend-checklist span,
.go-live-checklist strong,
.go-live-checklist span,
.security-control-grid strong,
.security-control-grid span,
.fraud-signal-list strong,
.fraud-signal-list span,
.copyright-process strong,
.copyright-process span {
  display: block;
}

.ledger-list span,
.rule-list span,
.audit-list span,
.security-list span,
.navigation-audit-list span,
.backend-checklist span,
.go-live-checklist span,
.security-control-grid span,
.fraud-signal-list span,
.copyright-process span,
.copyright-columns p {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
}

.navigation-audit-list .is-warning strong {
  color: #9a3412;
}

.backend-readiness-panel {
  border-color: rgba(0, 119, 182, 0.22);
  background: linear-gradient(135deg, #fff, #eefaff);
}

.backend-checklist div {
  position: relative;
  padding-left: 36px;
}

.backend-checklist div::before {
  position: absolute;
  left: 0;
  top: 12px;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  font-size: 12px;
  font-weight: 950;
}

.backend-checklist [data-backend-status="pass"]::before {
  content: "✓";
  background: var(--palm);
}

.backend-checklist [data-backend-status="review"]::before {
  content: "?";
  background: var(--sun);
  color: #5d3d00;
}

.backend-checklist [data-backend-status="blocked"]::before {
  content: "!";
  background: var(--reef);
}

.backend-checklist [data-backend-status="blocked"] strong {
  color: #9f2f19;
}

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

.go-live-panel {
  border-color: rgba(255, 107, 74, 0.24);
}

.go-live-checklist div {
  position: relative;
  padding-left: 36px;
}

.go-live-checklist div::before {
  position: absolute;
  left: 0;
  top: 12px;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  font-size: 12px;
  font-weight: 950;
}

.go-live-checklist [data-go-live-status="pass"]::before {
  content: "✓";
  background: var(--palm);
}

.go-live-checklist [data-go-live-status="blocked"]::before {
  content: "!";
  background: var(--reef);
}

.go-live-checklist [data-go-live-status="review"]::before {
  content: "?";
  background: var(--sun);
  color: #5d3d00;
}

.go-live-checklist [data-go-live-status="blocked"] strong {
  color: #9f2f19;
}

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

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

.copyright-columns {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 8px;
}

.copyright-columns h3 {
  margin: 0 0 6px;
}

.copyright-columns p {
  margin: 0;
}

.copyright-process {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 12px;
}

.copyright-process div {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: #f8faf8;
}

.fraud-signal-list div {
  display: grid;
  grid-template-columns: minmax(120px, 0.8fr) minmax(180px, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.fraud-signal-list em {
  border-radius: 999px;
  padding: 5px 8px;
  background: #e9f7f3;
  color: var(--sea);
  font-style: normal;
  font-size: 12px;
  font-weight: 900;
}

.button-row,
.admin-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.privacy-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.member-table {
  display: grid;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.member-table > div {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) repeat(3, minmax(80px, 0.7fr));
  gap: 10px;
  align-items: center;
  min-height: 42px;
  padding: 8px 12px;
  border-top: 1px solid var(--line);
  font-size: 13px;
}

.member-table > div:first-child {
  border-top: 0;
  background: #eef4f2;
}

.member-table.is-private [data-private] {
  color: transparent;
  text-shadow: 0 0 9px rgba(23, 32, 42, 0.45);
}

.admin-bank-panel {
  display: grid;
  gap: 12px;
}

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

.notification-list span,
.compliance-badge {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 10px;
  border-radius: 999px;
  background: #eef4f2;
  color: #27545d;
  font-size: 12px;
  font-weight: 800;
}

.compliance-badge {
  background: #fff4e2;
  color: #86540b;
}

.virtual-card-panel {
  display: grid;
  gap: 14px;
}

.card-status {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 10px;
  border-radius: 999px;
  background: #11222b;
  color: #fff;
  font-size: 12px;
  font-weight: 900;
}

.virtual-card {
  min-height: 214px;
  display: grid;
  align-content: space-between;
  gap: 26px;
  padding: 18px;
  border-radius: 14px;
  color: #fff;
  background:
    linear-gradient(135deg, rgba(255, 111, 89, 0.88), rgba(246, 200, 95, 0.64) 32%, rgba(17, 34, 43, 0.96) 72%),
    #11222b;
  box-shadow: 0 22px 48px rgba(17, 34, 43, 0.24);
}

.card-top,
.card-meta {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.card-top span,
.card-meta small {
  display: block;
  color: rgba(255, 255, 255, 0.72);
  font-size: 11px;
  text-transform: uppercase;
  font-weight: 800;
}

.card-top strong,
.card-meta strong {
  display: block;
}

.card-number {
  font-size: 21px;
  font-weight: 900;
  letter-spacing: 0.06em;
  word-spacing: 0.2em;
}

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

.card-balance-grid div,
.card-rules div,
.card-ledger div {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  background: #fff;
}

.card-balance-grid span,
.card-rules span,
.card-ledger span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

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

.wallet-provisioning button {
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  font-weight: 900;
}

.spending-controls {
  display: grid;
  gap: 10px;
}

.spending-controls label,
.control-grid label {
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

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

.control-grid label {
  display: flex;
  align-items: center;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.card-rules,
.card-ledger {
  display: grid;
  gap: 8px;
}

.card-ledger time {
  display: block;
  margin-bottom: 4px;
  color: var(--muted);
  font-size: 11px;
}

.split-bill-panel {
  display: grid;
  gap: 14px;
}

.bill-entry-grid,
.bill-total-grid,
.bill-tools-grid,
.payment-method-grid,
.corporate-meal-rules,
.receipt-intake,
.receipt-summary,
.receipt-workspace,
.receipt-status-list,
.receipt-history-list {
  display: grid;
  gap: 8px;
}

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

.receipt-intake button {
  min-height: 46px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  font-weight: 900;
}

.receipt-summary {
  grid-template-columns: minmax(0, 1fr) minmax(180px, 0.35fr);
  align-items: stretch;
}

.receipt-summary > div,
.receipt-items-panel,
.payment-status-panel,
.receipt-history-panel {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
  background: #fff;
}

.receipt-summary h3,
.receipt-history-panel h3 {
  margin: 0;
}

.receipt-summary span,
.receipt-history-list span,
.receipt-status-list span,
.receipt-item-list span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.receipt-summary strong {
  display: block;
  color: var(--ink);
  font-size: 24px;
}

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

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

.bill-entry-grid input {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 11px;
  outline: 0;
  background: #fff;
  color: var(--ink);
}

.split-mode-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f3f7f5;
}

.split-mode-tabs button {
  min-height: 38px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  font-weight: 900;
}

.split-mode-tabs button.active {
  background: #fff;
  color: var(--ink);
  box-shadow: 0 8px 22px rgba(25, 47, 56, 0.1);
}

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

.bill-total-grid div,
.bill-tools-grid > div,
.corporate-meal-rules div,
.split-preview div {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  background: #fff;
}

.bill-total-grid span,
.corporate-meal-rules span,
.split-preview span,
.split-preview small,
.bill-tools-grid p {
  display: block;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.bill-total-grid strong,
.split-preview b {
  display: block;
  color: var(--ink);
  font-size: 20px;
}

.split-preview {
  display: grid;
  gap: 8px;
}

.split-preview div {
  display: grid;
  grid-template-columns: minmax(80px, 1fr) minmax(105px, 1fr) minmax(130px, 1.2fr) auto;
  align-items: center;
  gap: 8px;
}

.split-preview b {
  text-align: right;
}

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

.receipt-workspace {
  grid-template-columns: minmax(0, 1.2fr) minmax(320px, 0.8fr);
  align-items: start;
}

.receipt-items-panel,
.payment-status-panel,
.receipt-history-panel {
  display: grid;
  gap: 12px;
}

.receipt-item-list {
  display: grid;
  gap: 8px;
}

.receipt-item-list article {
  display: grid;
  grid-template-columns: minmax(150px, 0.55fr) minmax(260px, 1fr);
  gap: 10px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  background: #f8fbfa;
}

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

.receipt-claim-grid label {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 6px 8px;
  background: #fff;
  color: var(--ink);
  font-size: 12px;
  font-weight: 800;
}

.receipt-status-list div,
.receipt-history-list div {
  display: grid;
  grid-template-columns: minmax(80px, 0.65fr) minmax(140px, 1fr) auto auto;
  gap: 8px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  background: #f8fbfa;
}

.receipt-status-list b,
.receipt-history-list b {
  color: var(--ink);
}

.receipt-status-list em {
  border-radius: 999px;
  padding: 5px 8px;
  background: #e9f7f3;
  color: var(--sea-dark);
  font-style: normal;
  font-size: 12px;
  font-weight: 900;
}

.bill-tools-grid h3,
.bill-tools-grid p {
  margin: 0 0 10px;
}

.payment-method-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.payment-method-grid button {
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  font-weight: 900;
}

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

.ride-share-panel {
  display: grid;
  gap: 14px;
}

.transport-confirmation-hub {
  display: grid;
  gap: 16px;
  border: 1px solid rgba(8, 127, 140, 0.12);
  border-radius: 16px;
  padding: 16px;
  background: #f8fcfb;
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.06);
}

.transport-hub-header,
.transport-summary-strip,
.transport-search-row,
.transport-dashboard-grid,
.transport-security-grid,
.transport-detail-header,
.transport-pass-card,
.transport-actions,
.wallet-pass-row {
  display: grid;
  gap: 12px;
}

.transport-hub-header {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  padding: 2px 0 10px;
  border: 0;
  border-bottom: 1px solid rgba(8, 127, 140, 0.12);
  border-radius: 0;
  background: transparent;
}

.transport-hub-header h3,
.transport-list-panel h3,
.transport-detail-header h3,
.transport-timeline-panel h3 {
  margin: 0;
}

.transport-hub-header p:not(.eyebrow),
.transport-route-chip,
.transport-summary-strip small,
.transport-detail-empty span,
.transport-record-card small,
.transport-security-grid span,
.transport-detail-header span,
.transport-document-list span,
.wallet-pass-row span,
.transport-detail-notes span,
.transport-timeline small {
  color: var(--muted);
  line-height: 1.4;
}

.transport-hub-actions,
.transport-actions,
.wallet-pass-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.transport-hub-actions {
  align-items: center;
  justify-content: flex-end;
}

.transport-route-chip {
  display: inline-flex;
  width: fit-content;
  margin: 0 0 5px;
  border: 1px solid rgba(8, 127, 140, 0.12);
  border-radius: 8px;
  padding: 3px 7px;
  background: #fff;
  color: var(--sea-dark);
  font-size: 11px;
  font-weight: 900;
  line-height: 1.2;
}

.transport-hub-header h3 {
  font-size: 20px;
  line-height: 1.18;
}

.transport-hub-header p:not(.transport-route-chip) {
  max-width: 760px;
  margin: 5px 0 0;
  font-size: 13px;
}

.transport-hub-actions .primary-button,
.transport-hub-actions .ghost-button {
  min-height: 36px;
  border-radius: 10px;
  padding-inline: 12px;
}

.transport-summary-strip {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.transport-summary-strip button {
  display: grid;
  gap: 5px;
  min-height: 92px;
  border: 1px solid rgba(8, 127, 140, 0.12);
  border-radius: 12px;
  padding: 12px;
  background: #fff;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.transport-summary-strip button:hover,
.transport-summary-strip button:focus-visible {
  border-color: rgba(0, 150, 199, 0.32);
  box-shadow: 0 12px 24px rgba(15, 23, 42, 0.08);
  transform: translateY(-1px);
}

.transport-summary-strip span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.transport-summary-strip strong {
  font-size: 20px;
  letter-spacing: 0;
}

.transport-search-row {
  grid-template-columns: minmax(0, 1.35fr) minmax(170px, 0.55fr) minmax(160px, 0.45fr);
  padding: 12px;
  border: 1px solid rgba(8, 127, 140, 0.1);
  border-radius: 12px;
  background: #fff;
}

.transport-search-row label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.transport-search-row input,
.transport-search-row select {
  min-width: 0;
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 0 11px;
  background: #fff;
  color: var(--ink);
}

.transport-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 4px;
  border: 1px solid rgba(8, 127, 140, 0.1);
  border-radius: 12px;
  background: #fff;
}

.transport-tabs button {
  min-height: 38px;
  border: 1px solid transparent;
  border-radius: 10px;
  padding: 0 13px;
  background: transparent;
  color: #24555d;
  font-weight: 900;
}

.transport-tabs button.active {
  border-color: rgba(0, 150, 199, 0.45);
  background: var(--sea);
  color: #fff;
}

.transport-dashboard-grid {
  grid-template-columns: minmax(0, 0.95fr) minmax(320px, 1.05fr);
  align-items: start;
}

.transport-confirmation-hub,
.transport-dashboard-grid,
.transport-list-panel,
.transport-detail-panel,
.transport-record-card,
.transport-detail-header,
.transport-pass-card,
.transport-detail-grid,
.transport-document-area,
.transport-document-list,
.transport-timeline-panel {
  min-width: 0;
}

.transport-list-panel *,
.transport-detail-panel * {
  min-width: 0;
}

.transport-record-card strong,
.transport-record-card small,
.transport-record-card b,
.transport-detail-panel h3,
.transport-detail-panel h4,
.transport-detail-panel strong,
.transport-detail-panel small,
.transport-detail-panel span,
.transport-document-list button,
.transport-actions button,
.wallet-pass-row button {
  overflow-wrap: anywhere;
  word-break: normal;
}

.transport-list-panel,
.transport-detail-panel,
.transport-timeline-panel,
.transport-security-grid button {
  border: 1px solid rgba(8, 127, 140, 0.12);
  border-radius: 12px;
  background: #fff;
}

.transport-list-panel,
.transport-detail-panel,
.transport-timeline-panel {
  display: grid;
  gap: 12px;
  padding: 14px;
}

.transport-record-list,
.transport-document-list,
.transport-timeline,
.transport-detail-notes {
  display: grid;
  gap: 10px;
}

.transport-record-card,
.transport-empty-state,
.transport-timeline button,
.transport-document-list button {
  display: grid;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px;
  background: #fff;
  text-align: left;
}

.transport-timeline button {
  min-height: 104px;
  border-radius: 12px;
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.transport-timeline button:hover,
.transport-security-grid button:hover {
  border-color: rgba(0, 150, 199, 0.32);
  box-shadow: 0 14px 28px rgba(15, 23, 42, 0.08);
  transform: translateY(-1px);
}

.transport-record-card {
  grid-template-columns: minmax(0, 1fr) minmax(160px, 0.65fr) auto;
  align-items: center;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.transport-record-card:hover {
  border-color: rgba(0, 150, 199, 0.28);
  box-shadow: 0 12px 26px rgba(15, 23, 42, 0.06);
}

.transport-record-card span {
  display: inline-flex;
  width: fit-content;
  border-radius: 8px;
  padding: 4px 8px;
  background: #eef9f7;
  color: var(--sea-dark);
  font-size: 11px;
  font-weight: 900;
}

.transport-record-card button,
.transport-document-area button,
.transport-actions button,
.wallet-pass-row button {
  min-height: 36px;
  border: 1px solid rgba(8, 127, 140, 0.18);
  border-radius: 10px;
  padding: 0 12px;
  background: #fff;
  color: #24555d;
  font-weight: 850;
}

.transport-record-card button {
  background: var(--reef);
  color: #071116;
}

.transport-detail-empty {
  min-height: 260px;
  display: grid;
  place-content: center;
  gap: 8px;
  text-align: center;
}

.transport-detail-header,
.transport-pass-card {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
}

.transport-pass-card {
  border-radius: 12px;
  padding: 16px;
  background:
    linear-gradient(90deg, rgba(0, 150, 199, 0.16), transparent 34%),
    #071116;
  color: #effaff;
}

.transport-pass-card span,
.transport-pass-card small {
  display: block;
  color: rgba(239, 250, 255, 0.72);
}

.transport-pass-card strong {
  display: block;
  margin: 6px 0;
  font-size: clamp(18px, 2.4vw, 24px);
  line-height: 1.08;
}

.mock-qr {
  width: 86px;
  aspect-ratio: 1;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  padding: 10px;
  border-radius: 10px;
  background: #effaff;
}

.mock-qr span {
  border-radius: 6px;
  background: #071116;
}

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

.transport-detail-grid div,
.transport-document-area,
.transport-detail-notes span {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px;
  background: #fff;
}

.transport-detail-grid span,
.transport-detail-grid small {
  display: block;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.transport-document-area {
  display: grid;
  gap: 10px;
}

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

.transport-document-list button strong,
.transport-document-list button span {
  display: block;
}

.wallet-pass-row {
  align-items: center;
}

.wallet-pass-row button:disabled {
  opacity: 0.48;
  cursor: not-allowed;
}

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

.transport-security-grid button {
  display: grid;
  gap: 6px;
  padding: 12px;
  min-height: 118px;
  text-align: left;
  color: var(--ink);
  cursor: pointer;
}

.transport-security-grid button strong,
.transport-security-grid button span {
  display: block;
}

.transport-security-grid button strong {
  font-size: 14px;
}

.transport-security-grid button span {
  font-size: 12px;
}

.transport-timeline-panel {
  grid-template-columns: minmax(180px, 0.28fr) minmax(0, 1fr);
  align-items: start;
}

.transport-timeline-panel > div:first-child {
  padding: 4px 0;
}

.transport-timeline {
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

.transport-timeline button span,
.transport-timeline button small {
  display: block;
}

.transport-timeline button span {
  width: fit-content;
  border-radius: 8px;
  padding: 3px 7px;
  background: #eef9f7;
  color: var(--sea-dark);
  font-size: 11px;
  font-weight: 900;
}

.ride-destination-row,
.ride-location-grid,
.ride-entry-grid,
.ride-estimate-grid,
.ride-account-panel,
.shared-ride-panel,
.shared-ride-members,
.ride-assistant-panel {
  display: grid;
  gap: 8px;
}

.ride-destination-row {
  grid-template-columns: minmax(180px, 0.8fr) minmax(0, 1.2fr);
  align-items: end;
}

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

.ride-entry-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.ride-destination-row label,
.ride-location-grid label,
.ride-entry-grid label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.ride-destination-row select,
.ride-location-grid input,
.ride-entry-grid input {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 11px;
  outline: 0;
  background: #fff;
  color: var(--ink);
}

.ride-provider-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ride-provider-list button {
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 12px;
  background: #fff;
  color: var(--ink);
  font-weight: 900;
}

.ride-provider-list button.active {
  border-color: rgba(15, 167, 145, 0.45);
  background: #e9f7f3;
  color: var(--sea-dark);
}

.ride-provider-list button span {
  display: block;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.ride-account-panel,
.shared-ride-panel {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
  background: #fff;
}

.ride-account-panel h3,
.shared-ride-panel h3 {
  margin: 0;
}

.ride-account-panel span,
.shared-ride-panel span,
.ride-assistant-panel span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.ride-account-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.shared-ride-members {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.shared-ride-members label,
.ride-assistant-panel > div {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  background: #f8fbfa;
}

.shared-ride-members label {
  display: grid;
  gap: 4px;
}

.shared-ride-members input {
  justify-self: start;
}

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

.private-driver-panel {
  display: grid;
  gap: 12px;
  border: 1px solid rgba(8, 127, 140, 0.16);
  border-radius: 22px;
  padding: 16px;
  background:
    linear-gradient(135deg, rgba(223, 247, 245, 0.72), rgba(255, 255, 255, 0.96)),
    #fff;
  box-shadow: var(--soft-shadow);
}

.private-driver-panel h3 {
  margin: 0;
}

.private-driver-search,
.private-driver-list {
  display: grid;
  gap: 10px;
}

.private-driver-search {
  grid-template-columns: minmax(0, 1fr) minmax(150px, 0.45fr) minmax(170px, 0.55fr);
}

.private-driver-search label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.private-driver-search input,
.private-driver-search select {
  min-width: 0;
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 0 11px;
  background: #fff;
  color: var(--ink);
}

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

.private-driver-list article,
.private-driver-empty {
  display: grid;
  gap: 10px;
  align-content: start;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 14px;
  background: #fff;
}

.private-driver-list article span,
.private-driver-list article small,
.private-driver-empty span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.private-driver-list article > b {
  color: var(--ink);
  font-size: 20px;
}

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

.private-driver-actions button {
  min-height: 34px;
  border: 1px solid rgba(8, 127, 140, 0.16);
  border-radius: 999px;
  padding: 0 10px;
  background: #fff;
  color: #24555d;
  font-size: 12px;
  font-weight: 850;
}

.private-driver-actions button:first-child {
  background: var(--sea);
  color: #fff;
}

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

.ride-estimate-grid div {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  background: #fff;
}

.ride-estimate-grid span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.ride-estimate-grid strong {
  display: block;
  color: var(--ink);
  font-size: 20px;
}

.itinerary-alerts-panel {
  display: grid;
  gap: 14px;
}

.alert-category-grid,
.delivery-preferences,
.alert-preview-list {
  display: grid;
  gap: 8px;
}

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

.alert-category-grid label,
.delivery-preferences label,
.alert-preview-list div {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.alert-category-grid label,
.delivery-preferences label {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  min-height: 54px;
  padding: 10px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.35;
}

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

.delivery-preferences label {
  align-items: center;
  min-height: 42px;
}

.alert-preview-list div {
  padding: 10px;
}

.alert-preview-list span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

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

.chip {
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid transparent;
  background: #eef4f2;
  color: #27545d;
}

.chip.active {
  border-color: #8ec8b2;
  background: var(--mint);
  color: #102f30;
  font-weight: 700;
}

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

.explore-panel {
  display: grid;
  gap: 14px;
}

.explore-context-grid,
.explore-filter-row,
.explore-results-grid,
.explore-skeleton-grid {
  display: grid;
  gap: 10px;
}

.explore-context-grid {
  grid-template-columns: minmax(0, 1fr) minmax(160px, 0.75fr) minmax(140px, 0.62fr) minmax(160px, 0.72fr);
}

.explore-context-grid label,
.explore-search,
.explore-filter-row label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.explore-context-grid input,
.explore-context-grid select,
.explore-search input,
.explore-filter-row select {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 11px;
  background: #fff;
  color: var(--ink);
  font: inherit;
}

.explore-search-row {
  display: grid;
  grid-template-columns: minmax(260px, 0.9fr) minmax(0, 1.1fr);
  gap: 10px;
  align-items: end;
}

.explore-filter-row {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: end;
}

.explore-filter-row label:has(input[type="checkbox"]) {
  min-height: 43px;
  display: flex;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 10px;
  background: #fff;
}

.explore-tabs,
.explore-subfilters {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 3px;
}

.explore-tabs button,
.explore-subfilters button {
  min-height: 38px;
  flex: 0 0 auto;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0 12px;
  background: #fff;
  color: #27545d;
  font-weight: 900;
}

.explore-tabs button.active,
.explore-subfilters button.active {
  border-color: rgba(23, 177, 169, 0.55);
  background: #e7fbf8;
  color: #0f6f6b;
}

.explore-results-toolbar {
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: var(--muted);
  font-weight: 900;
}

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

.explore-card {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.explore-card-main {
  width: 100%;
  display: grid;
  gap: 8px;
  border: 0;
  padding: 0;
  background: transparent;
  color: inherit;
  text-align: left;
}

.explore-card-main img {
  width: 100%;
  height: 178px;
  object-fit: cover;
}

.explore-card-main > span,
.explore-card-main h3,
.explore-card-main p,
.explore-card-meta,
.explore-card-actions {
  margin-left: 12px;
  margin-right: 12px;
}

.explore-card-main > span {
  width: fit-content;
  border-radius: 999px;
  padding: 5px 8px;
  background: #fff4e2;
  color: #86540b;
  font-size: 12px;
  font-weight: 900;
}

.explore-card-main h3 {
  margin-top: 0;
  margin-bottom: 0;
}

.explore-card-main p {
  color: var(--muted);
  line-height: 1.45;
}

.explore-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.explore-card-meta strong,
.explore-card-meta small,
.explore-detail-list span {
  border-radius: 999px;
  padding: 5px 8px;
  background: #eef4f2;
  color: #27545d;
  font-size: 12px;
  font-weight: 900;
}

.explore-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  padding: 12px 0;
}

.explore-card-actions button {
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0 10px;
  background: #fbfcfb;
  color: var(--ink);
  font-size: 12px;
  font-weight: 900;
}

.explore-skeleton-grid div {
  min-height: 340px;
  border-radius: 8px;
  background: linear-gradient(90deg, #eef4f2, #f8faf8, #eef4f2);
  background-size: 220% 100%;
  animation: skeletonPulse 1.2s ease-in-out infinite;
}

.explore-empty-state {
  border: 1px dashed #c6d7d2;
  border-radius: 8px;
  padding: 18px;
  background: #fbfcfb;
}

.explore-detail-panel {
  display: grid;
  grid-template-columns: minmax(240px, 0.8fr) minmax(0, 1.2fr);
  gap: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
  background: #fff;
}

.explore-detail-panel img {
  width: 100%;
  height: 100%;
  min-height: 320px;
  border-radius: 8px;
  object-fit: cover;
}

.ai-travel-planner-panel {
  display: grid;
  gap: 14px;
}

.ai-planner-shell {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.65fr);
  gap: 12px;
}

.ai-planner-chat,
.ai-planner-summary,
.ai-generated-trip {
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.ai-planner-message {
  padding: 14px;
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(0, 188, 212, 0.12), rgba(255, 111, 89, 0.1));
}

.ai-planner-message strong,
.ai-planner-message p,
.ai-planner-summary h3,
.ai-generated-trip h3 {
  margin: 0;
}

.ai-planner-message p {
  margin-top: 6px;
  color: var(--ink);
  font-size: 18px;
  font-weight: 850;
}

.ai-planner-replies {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0;
}

.ai-planner-replies button,
.ai-planner-actions button {
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  font-weight: 900;
}

.ai-planner-replies button:hover,
.ai-planner-actions button:hover {
  border-color: var(--sea);
  color: var(--sea);
}

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

.ai-planner-input-row input {
  min-width: 0;
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 12px;
  font: inherit;
}

.ai-planner-transcript,
.ai-planner-memory,
.ai-itinerary-preview {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.ai-planner-transcript div,
.ai-planner-memory div,
.ai-trip-output-grid article,
.ai-itinerary-preview div {
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfb;
}

.ai-planner-transcript .assistant {
  border-color: rgba(0, 119, 182, 0.18);
  background: #eefaff;
}

.ai-planner-transcript strong,
.ai-planner-transcript span,
.ai-planner-memory span,
.ai-planner-memory strong,
.ai-trip-output-grid span,
.ai-trip-output-grid strong,
.ai-trip-output-grid small,
.ai-itinerary-preview span,
.ai-itinerary-preview strong,
.ai-itinerary-preview small {
  display: block;
}

.ai-planner-transcript span,
.ai-planner-memory span,
.ai-trip-output-grid span,
.ai-trip-output-grid small,
.ai-itinerary-preview span,
.ai-itinerary-preview small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.ai-planner-memory strong,
.ai-trip-output-grid strong,
.ai-itinerary-preview strong {
  margin-top: 4px;
}

.ai-trip-output-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 12px 0;
}

.ai-planner-actions {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
}

.explore-detail-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0;
}

@keyframes skeletonPulse {
  0% {
    background-position: 0% 50%;
  }

  100% {
    background-position: -200% 50%;
  }
}

.destination-card {
  overflow: hidden;
}

.destination-card img {
  width: 100%;
  height: 154px;
  object-fit: cover;
  display: block;
}

.destination-card div,
.panel {
  padding: 16px;
}

.destination-card h3,
.destination-card p,
.panel h2,
.panel h3,
.panel p {
  margin-top: 0;
}

.destination-card p,
.panel p {
  color: var(--muted);
  line-height: 1.45;
}

.destination-card span {
  display: inline-block;
  border-radius: 999px;
  padding: 5px 8px;
  background: #fff4e2;
  color: #86540b;
  font-size: 13px;
  font-weight: 800;
}

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

.memory-grid img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 8px;
}

.trip-type-selector,
.guided-trip-flow,
.trip-creation-form,
.feature-toggle-grid,
.invitation-builder-grid,
.invitation-options-grid,
.invitation-form-grid,
.invite-checkbox-grid,
.rsvp-status-grid,
.solo-dashboard-grid,
.solo-workspace {
  display: grid;
  gap: 10px;
}

.no-margin {
  margin-top: 0;
}

.guided-trip-flow {
  max-height: 0;
  overflow: hidden;
  transition: max-height 360ms ease, margin 360ms ease;
}

.guided-trip-flow.is-open {
  max-height: 1200px;
  margin: 12px 0;
}

.guided-step,
.feature-toggle-grid section {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
  background: #fbfcfb;
}

.guided-step[hidden] {
  display: none;
}

.guided-step > span {
  color: var(--sea);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.guided-step h3,
.feature-toggle-grid h3 {
  margin: 5px 0 7px;
}

.guided-step p {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}

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

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

.trip-creation-form input,
.trip-creation-form select {
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 10px;
  background: #fff;
  color: var(--ink);
  font: inherit;
}

.trip-creation-form button {
  align-self: end;
}

.feature-toggle-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 12px 0;
}

.hidden-feature-list span {
  background: #f7ebe9;
  color: #8a392e;
}

.invitation-step .section-heading {
  align-items: start;
}

.invitation-builder-grid {
  grid-template-columns: minmax(260px, 0.8fr) minmax(0, 1.2fr);
}

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

.invite-card,
.invitation-options-grid section {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
  background: #fff;
}

.invitation-preview-card {
  min-height: 260px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background:
    linear-gradient(180deg, rgba(11, 31, 38, 0.08), rgba(11, 31, 38, 0.88)),
    url("https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?q=80&w=800&auto=format&fit=crop") center/cover;
  color: #fff;
}

.invite-template-badge {
  width: fit-content;
  border-radius: 999px;
  padding: 5px 9px;
  background: rgba(255, 244, 226, 0.22);
  color: #fff7eb;
  font-size: 12px;
  font-weight: 900;
}

.invitation-preview-card h3,
.invitation-preview-card p {
  color: #fff;
}

.invite-preview-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.invite-preview-meta span {
  border-radius: 999px;
  padding: 5px 8px;
  background: rgba(255, 255, 255, 0.16);
  font-size: 12px;
  font-weight: 900;
}

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

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

.invitation-form-grid label,
.invite-checkbox-grid label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.invitation-form-grid input,
.invitation-form-grid select,
.invitation-form-grid textarea {
  min-height: 40px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  background: #fff;
  color: var(--ink);
  font: inherit;
}

.invitation-form-grid textarea {
  min-height: 82px;
  resize: vertical;
}

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

.invite-checkbox-grid label {
  min-height: 38px;
  display: flex;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px;
  background: #fbfcfb;
}

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

.rsvp-status-grid div {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  background: #fbfcfb;
}

.rsvp-status-grid span,
.rsvp-status-grid strong {
  display: block;
}

.rsvp-status-grid span {
  color: var(--muted);
  font-size: 12px;
}

.rsvp-status-grid strong {
  margin-top: 4px;
  font-size: 22px;
}

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

.trip-type-selector button {
  min-height: 112px;
  display: grid;
  gap: 6px;
  align-content: start;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
  background: #fbfcfb;
  color: var(--muted);
  text-align: left;
  cursor: pointer;
}

.trip-type-selector button.active {
  border-color: rgba(23, 177, 169, 0.58);
  background: #e8fbf8;
  color: #1a5554;
}

.trip-type-selector strong {
  color: var(--ink);
  font-size: 16px;
}

.trip-type-selector span,
.solo-dashboard-grid small,
.solo-card p,
.solo-document-list span {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
}

.solo-dashboard-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 14px 0;
}

.solo-dashboard-grid article,
.solo-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfb;
}

.solo-dashboard-grid article {
  padding: 12px;
}

.solo-dashboard-grid span {
  color: var(--muted);
  font-size: 12px;
}

.solo-dashboard-grid strong {
  display: block;
  margin-top: 6px;
  color: var(--ink);
  font-size: 20px;
}

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

.solo-card {
  min-width: 0;
  padding: 14px;
}

.solo-card h3 {
  margin: 0 0 8px;
}

.solo-budget-list,
.solo-document-list,
.solo-tag-list {
  display: grid;
  gap: 8px;
}

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

.solo-budget-list div,
.solo-document-list div {
  border-top: 1px solid var(--line);
  padding-top: 8px;
}

.solo-budget-list span,
.solo-budget-list strong,
.solo-document-list strong,
.solo-document-list span {
  display: block;
}

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

.solo-tag-list span {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 0 10px;
  background: #eef4f2;
  color: #27545d;
  font-size: 12px;
  font-weight: 900;
}

.ai-solo-manager {
  background: linear-gradient(135deg, #f0fffb, #fbfcfb);
}

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

.trip-row {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}

.trip-row:last-child {
  border-bottom: 0;
}

.trip-row img {
  width: 72px;
  height: 58px;
  object-fit: cover;
  border-radius: 8px;
}

.trip-row strong,
.trip-row small {
  display: block;
}

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

.tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  padding: 5px;
  border-radius: 8px;
  background: #eef2f0;
}

.tab {
  min-height: 34px;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.tab.active {
  background: #fff;
  color: var(--ink);
  box-shadow: 0 6px 14px rgba(23, 32, 42, 0.09);
}

.itinerary,
.poll,
.messages {
  display: grid;
  gap: 8px;
}

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

.stop time {
  color: var(--sea);
  font-size: 12px;
  font-weight: 800;
}

.stop strong,
.stop span {
  display: block;
}

.stop span {
  margin-top: 3px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.35;
}

.wallet-total {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 10px;
  margin: 12px 0;
}

.wallet-total strong {
  font-size: 34px;
  line-height: 1;
}

.wallet-total span {
  color: var(--sea);
  font-size: 13px;
  font-weight: 800;
}

.trip-wallet-card {
  display: grid;
  grid-template-columns: 92px 1fr 1fr;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border: 1px solid rgba(0, 119, 182, 0.18);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(0, 188, 212, 0.14), rgba(255, 111, 89, 0.12)),
    #fff;
}

.trip-wallet-card img {
  width: 92px;
  height: 68px;
  border-radius: 8px;
  object-fit: cover;
}

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

.trip-wallet-card strong {
  display: block;
  margin: 4px 0;
  color: var(--ink);
  font-size: 18px;
}

.shared-wallet-ledger {
  display: grid;
  gap: 8px;
  margin: 12px 0;
}

.shared-wallet-ledger div {
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.shared-wallet-ledger time,
.shared-wallet-ledger span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.shared-wallet-ledger strong {
  display: block;
  margin: 3px 0;
}

.security-note {
  padding: 10px 12px;
  border: 1px solid #c9e8df;
  border-radius: 8px;
  background: #eefaf6;
  color: #24565a !important;
  font-size: 13px;
}

.range-wrap {
  display: grid;
  gap: 8px;
}

.funds-form {
  display: grid;
  gap: 10px;
  margin: 14px 0;
}

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

.funds-form input {
  width: 100%;
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 11px;
  outline: 0;
}

input[type="range"] {
  width: 100%;
  accent-color: var(--reef);
}

.budget-line {
  display: flex;
  justify-content: space-between;
  margin-top: 13px;
  color: var(--muted);
  font-size: 13px;
}

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

.bar i {
  display: block;
  width: var(--w);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--sea), var(--reef));
}

.poll button {
  min-height: 38px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  text-align: left;
}

.poll button.selected {
  border-color: var(--sea);
  box-shadow: inset 0 0 0 1px var(--sea);
}

.messages {
  max-height: 142px;
  overflow: auto;
}

.msg {
  padding: 9px 10px;
  border-radius: 8px;
  background: #f5f7f6;
  font-size: 13px;
  line-height: 1.35;
}

.msg strong {
  color: var(--sea);
}

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

.chat-form input {
  min-width: 0;
  min-height: 42px;
  padding: 0 11px;
  border: 1px solid var(--line);
  border-radius: 8px;
  outline: 0;
}

.chat-form button {
  border: 0;
  border-radius: 8px;
  background: var(--sea);
  color: #fff;
}

.map-panel {
  overflow: hidden;
  padding: 0;
}

.map-panel h2,
.map-panel p {
  padding: 0 16px;
}

.map-panel p {
  padding-bottom: 16px;
}

.map {
  height: 235px;
  position: relative;
  background:
    radial-gradient(circle at 22% 28%, rgba(255, 111, 89, 0.35) 0 3%, transparent 3.2%),
    radial-gradient(circle at 64% 34%, rgba(8, 126, 139, 0.35) 0 4%, transparent 4.2%),
    radial-gradient(circle at 52% 75%, rgba(246, 200, 95, 0.45) 0 3.4%, transparent 3.6%),
    linear-gradient(135deg, #e2f2ee 0 22%, #f6edcf 22% 23%, #e8f7fa 23% 48%, #d9eee7 48% 70%, #f8e8df 70%);
}

.pin {
  position: absolute;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: var(--reef);
  box-shadow: 0 8px 18px rgba(23, 32, 42, 0.22);
  font-weight: 900;
}

.pin.one { left: 24%; top: 32%; background: var(--sea); }
.pin.two { left: 64%; top: 38%; }
.pin.three { left: 50%; top: 74%; background: var(--violet); }

.mobile-nav {
  display: none;
}

.pin-dialog {
  width: min(440px, calc(100% - 28px));
  border: 0;
  border-radius: 8px;
  padding: 0;
  box-shadow: var(--shadow);
}

.pin-dialog::backdrop {
  background: rgba(17, 34, 43, 0.62);
  backdrop-filter: blur(4px);
}

.install-help-dialog {
  max-width: 480px;
}

.install-steps {
  display: grid;
  gap: 10px;
  margin: 0;
  padding-left: 22px;
  color: var(--muted);
  line-height: 1.5;
}

.update-available-banner {
  position: fixed;
  left: 50%;
  bottom: calc(18px + env(safe-area-inset-bottom));
  z-index: 90;
  width: min(480px, calc(100% - 28px));
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 14px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 18px;
  background: rgba(7, 17, 22, 0.92);
  color: #effaff;
  box-shadow: 0 18px 54px rgba(0, 0, 0, 0.26);
  backdrop-filter: blur(16px);
}

.update-available-banner[hidden] {
  display: none !important;
}

.update-available-banner div {
  display: grid;
  gap: 2px;
}

.update-available-banner span {
  color: rgba(239, 250, 255, 0.72);
  font-size: 13px;
}

.update-available-banner button {
  min-height: 38px;
  border: 0;
  border-radius: 999px;
  padding: 0 14px;
  background: var(--reef);
  color: #071116;
  font-weight: 850;
}

.offline-status-banner {
  position: fixed;
  left: 50%;
  top: calc(14px + env(safe-area-inset-top));
  z-index: 91;
  width: min(620px, calc(100% - 28px));
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid rgba(255, 178, 74, 0.36);
  border-radius: 18px;
  background: rgba(31, 28, 21, 0.94);
  color: #fff8e8;
  box-shadow: 0 18px 54px rgba(0, 0, 0, 0.22);
  backdrop-filter: blur(16px);
}

.offline-status-banner[hidden] {
  display: none !important;
}

.offline-status-banner span {
  color: rgba(255, 248, 232, 0.76);
  line-height: 1.4;
}

@media (max-width: 640px) {
  .offline-status-banner {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }
}

/* Section 74: final overlap guard after all legacy dashboard layers */
body.app-routed main > section.panel:not([hidden]),
body.app-routed main > section.route-screen:not([hidden]):not(#dashboardHome) {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: clamp(14px, 1.8vw, 20px) !important;
  align-items: start !important;
  width: 100% !important;
  max-width: none !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}

body.app-routed main > section.panel:not([hidden]) > .section-heading,
body.app-routed main > section.route-screen:not([hidden]):not(#dashboardHome) > .section-heading {
  grid-column: 1 / -1 !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
}

/* Only actual route-level widgets receive a card; parent shells stay transparent. */
body.app-routed main > section.panel:not([hidden]) > :where(section, article, div, form):not(.section-heading):not([hidden]) {
  min-width: 0 !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  overflow: visible !important;
}

body.app-routed main > section.panel:not([hidden]) > :where(.travel-settings-shell, .wallet-redesign-shell, .settings-shell, .admin-settings-shell, .memories-gallery-shell) {
  display: contents !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.app-routed main > section.panel:not([hidden]) :where(.travel-settings-main, .wallet-home-grid, .wallet-dashboard-sections, .settings-main-panel) {
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: visible !important;
}

body.app-routed main > section.panel:not([hidden]) :where(.travel-dashboard-sections, .travel-booking-summary, .travel-transport-summary, .travel-focus-grid, .travel-provider-cards, .wallet-dashboard-header, .wallet-home-grid, .wallet-trip-card-grid, .wallet-dashboard-sections, .wallet-section-card-grid, .wallet-action-grid, .info-status-grid, .important-info-grid, .security-status-grid, .security-control-grid, .backend-summary-grid, .backend-readiness-grid, .audit-grid, .memory-gallery-grid, .memory-album-grid, .platform-grid, .messages-layout, .message-support-grid) {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: clamp(14px, 1.8vw, 20px) !important;
  align-items: start !important;
  min-width: 0 !important;
  overflow: visible !important;
}

body.app-routed main > section.panel:not([hidden]) :where(.travel-dashboard-sections > *, .travel-booking-summary > *, .travel-transport-summary > *, .travel-focus-grid > *, .travel-provider-cards > *, .wallet-dashboard-header > *, .wallet-home-grid > *, .wallet-trip-card-grid > *, .wallet-dashboard-sections > *, .wallet-section-card-grid > *, .wallet-action-grid > *, .info-status-grid > *, .important-info-grid > *, .security-status-grid > *, .security-control-grid > *, .backend-summary-grid > *, .backend-readiness-grid > *, .audit-grid > *, .memory-gallery-grid > *, .memory-album-grid > *, .platform-grid > *, .messages-layout > *, .message-support-grid > *) {
  grid-column: auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow-wrap: anywhere;
}

body.app-routed main :where(.trip-tab-bar, .tabs, .message-tabs, .split-mode-tabs, .transport-tabs, .explore-tabs, .event-dashboard-tabs, .travel-section-nav, .pass-filter-row, .travel-pass-filters, .travel-search-suggestions) {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center;
  max-width: 100%;
  overflow-x: auto !important;
  overflow-y: hidden !important;
}

body.app-routed main :where(.trip-tab-bar button, .tabs .tab, .message-tabs button, .split-mode-tabs button, .transport-tabs button, .explore-tabs button, .event-dashboard-tabs button, .travel-section-nav button, .pass-filter-row button, .travel-pass-filters button, .travel-search-suggestions button) {
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: max-content !important;
  white-space: nowrap !important;
}

@media (max-width: 1100px) {
  body.app-routed main > section.panel:not([hidden]),
  body.app-routed main > section.route-screen:not([hidden]):not(#dashboardHome),
  body.app-routed main > section.panel:not([hidden]) :where(.travel-dashboard-sections, .travel-booking-summary, .travel-transport-summary, .travel-focus-grid, .travel-provider-cards, .wallet-dashboard-header, .wallet-home-grid, .wallet-trip-card-grid, .wallet-dashboard-sections, .wallet-section-card-grid, .wallet-action-grid, .info-status-grid, .important-info-grid, .security-status-grid, .security-control-grid, .backend-summary-grid, .backend-readiness-grid, .audit-grid, .memory-gallery-grid, .memory-album-grid, .platform-grid, .messages-layout, .message-support-grid) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 680px) {
  body.app-routed main > section.panel:not([hidden]),
  body.app-routed main > section.route-screen:not([hidden]):not(#dashboardHome),
  body.app-routed main > section.panel:not([hidden]) :where(.travel-dashboard-sections, .travel-booking-summary, .travel-transport-summary, .travel-focus-grid, .travel-provider-cards, .wallet-dashboard-header, .wallet-home-grid, .wallet-trip-card-grid, .wallet-dashboard-sections, .wallet-section-card-grid, .wallet-action-grid, .info-status-grid, .important-info-grid, .security-status-grid, .security-control-grid, .backend-summary-grid, .backend-readiness-grid, .audit-grid, .memory-gallery-grid, .memory-album-grid, .platform-grid, .messages-layout, .message-support-grid) {
    grid-template-columns: 1fr !important;
  }
}

/* Keep the operations desk as a full-width set of independent widgets. */
body.app-routed #enterpriseRbac > .corporate-operations-section {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}

body.app-routed #enterpriseRbac > .corporate-operations-section {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}

body.app-routed #enterpriseRbac .corporate-operations-grid,
body.app-routed #enterpriseRbac .corporate-ops-metrics {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.wallet-access-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 14px 0 18px;
  padding: 14px 16px;
  border: 1px solid rgba(16, 73, 92, 0.16);
  border-left: 4px solid #13a5ba;
  border-radius: 14px;
  background: rgba(231, 248, 250, 0.76);
}

.wallet-access-banner > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.wallet-access-banner .eyebrow {
  margin: 0;
}

.wallet-access-banner strong,
.wallet-access-banner span {
  overflow-wrap: anywhere;
}

.wallet-access-banner > div > span {
  color: #496777;
  font-size: 0.9rem;
  line-height: 1.35;
}

.access-badge {
  flex: 0 0 auto;
  padding: 7px 10px;
  border-radius: 999px;
  background: #d9f6e5;
  color: #166534;
  font-size: 0.78rem;
  font-weight: 800;
  white-space: nowrap;
}

.access-badge[data-state="admin"] {
  background: #fff0c7;
  color: #7a4b00;
}

#walletCardAdminControls {
  display: grid;
  gap: 14px;
  margin-top: 14px;
}

#walletCardAdminControls[hidden] {
  display: none;
}

#walletCardAdminControls #tapToPayButton {
  justify-self: start;
}

#walletCardAdminControls #tapToPayButton:disabled {
  cursor: not-allowed;
  opacity: 0.68;
}

#fundsForm button:disabled,
#fundsForm input:disabled {
  cursor: not-allowed;
  opacity: 0.58;
}

.ownership-transfer-panel {
  grid-column: 1 / -1 !important;
  display: grid;
  gap: 12px;
  padding: 16px;
  border: 1px solid rgba(16, 73, 92, 0.14);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 8px 20px rgba(15, 35, 45, 0.06);
}

.ownership-transfer-panel .section-heading {
  align-items: flex-start;
}

.ownership-transfer-panel .section-heading p:not(.eyebrow) {
  max-width: 680px;
  margin: 5px 0 0;
  color: var(--muted);
  line-height: 1.4;
}

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

.ownership-transfer-grid label,
.ownership-transfer-check {
  display: grid;
  gap: 6px;
  min-width: 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.ownership-transfer-grid select {
  min-width: 0;
  min-height: 42px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  color: var(--ink);
  font: inherit;
}

.ownership-transfer-grid select:disabled {
  cursor: not-allowed;
  opacity: 0.62;
}

.ownership-transfer-check {
  display: flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  padding: 9px 11px;
  border: 1px solid rgba(16, 73, 92, 0.12);
  border-radius: 10px;
  background: rgba(231, 248, 250, 0.46);
}

.ownership-transfer-check input {
  flex: 0 0 auto;
}

#transferOwnershipButton:disabled,
#loadOwnershipMembersButton:disabled {
  cursor: not-allowed;
  opacity: 0.58;
}

#ownershipTransferMessage[data-tone="success"] {
  color: #17633d;
}

#ownershipTransferMessage[data-tone="error"] {
  color: #a23a32;
}

@media (max-width: 640px) {
  .wallet-access-banner {
    align-items: flex-start;
    flex-direction: column;
  }

  .access-badge {
    white-space: normal;
  }

  .ownership-transfer-grid {
    grid-template-columns: 1fr;
  }
}

/* Live provider search surfaces stay compact and clearly separate from local estimates. */
.provider-status {
  min-height: 20px;
  margin: 0;
  color: #5f7185;
}

.provider-status[data-tone="loading"] {
  color: #0f7890;
}

.provider-status[data-tone="success"] {
  color: #19734b;
}

.provider-status[data-tone="error"] {
  color: #a63c3c;
}

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

.live-source-card,
.private-driver-live-card,
.travel-live-result-card,
.ai-external-research {
  min-width: 0;
  border: 1px solid rgba(8, 127, 140, 0.2);
  background: linear-gradient(145deg, #ffffff, #f0fbf9);
}

.live-source-card__body,
.private-driver-live-card,
.travel-live-result-card {
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 14px;
}

.live-source-card__body .discovery-title,
.live-source-card__body .discovery-description,
.live-source-card__body .discovery-location {
  white-space: normal;
  overflow-wrap: anywhere;
}

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

.travel-live-result-card {
  border-radius: 12px;
}

.travel-live-result-card > div:first-child,
.private-driver-live-card {
  align-content: start;
}

.travel-live-result-card strong,
.travel-live-result-card small,
.private-driver-live-card strong,
.private-driver-live-card small {
  display: block;
  min-width: 0;
  overflow-wrap: anywhere;
}

.ai-external-research {
  display: grid;
  gap: 12px;
  padding: 16px;
  border-radius: 14px;
}

.ai-external-research .section-heading {
  margin: 0;
}

.ai-research-input {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.ai-research-input input {
  min-width: 0;
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 0 12px;
  background: #fff;
  color: var(--ink);
  font: inherit;
}

.ai-external-research__results {
  display: grid;
  gap: 8px;
  min-width: 0;
  color: #294d59;
}

.ai-external-research__results p {
  margin: 0;
  line-height: 1.55;
  white-space: pre-line;
  overflow-wrap: anywhere;
}

.ai-external-research__header,
.ai-research-sources {
  display: grid;
  gap: 6px;
}

.ai-research-sources a {
  color: #0b7182;
  font-weight: 800;
  overflow-wrap: anywhere;
}

@media (max-width: 760px) {
  .live-results-grid,
  .travel-live-results {
    grid-template-columns: 1fr !important;
  }

  .travel-smart-search-row {
    grid-template-columns: 34px minmax(0, 1fr) repeat(3, auto);
  }
}

@media (max-width: 560px) {
  .travel-smart-search-row {
    grid-template-columns: 34px minmax(0, 1fr);
  }

  .travel-smart-search-row button {
    grid-column: span 1;
  }
}

/* Beta account data: compact, readable trusted-contact controls. */
.trusted-contacts-panel {
  display: grid;
  gap: 1rem;
  margin-top: 1rem;
  padding: 1rem;
  border: 1px solid rgba(15, 23, 42, 0.09);
  border-radius: 16px;
  background: rgba(248, 252, 255, 0.82);
}

.trusted-contact-form {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.75rem;
  align-items: end;
}

.trusted-contact-form label {
  display: grid;
  min-width: 0;
  gap: 0.35rem;
}

.trusted-contact-form input[type="text"],
.trusted-contact-form input[type="tel"],
.trusted-contact-form input[type="email"] {
  min-width: 0;
  width: 100%;
}

.trusted-contact-primary {
  display: flex !important;
  align-items: center;
  min-height: 42px;
  gap: 0.5rem !important;
}

.trusted-contact-primary input {
  width: auto;
  flex: 0 0 auto;
}

.trusted-contact-list {
  display: grid;
  min-width: 0;
}

.trusted-contact-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-width: 0;
  gap: 1rem;
  padding: 0.75rem 0;
  border-top: 1px solid rgba(15, 23, 42, 0.09);
}

.trusted-contact-row > div {
  display: grid;
  min-width: 0;
  gap: 0.2rem;
}

.trusted-contact-row span {
  min-width: 0;
  color: #617286;
  overflow-wrap: anywhere;
}

.trusted-contact-row button {
  flex: 0 0 auto;
}

.trusted-contact-status {
  min-height: 1.25rem;
  margin: 0;
}

.profile-details-actions {
  display: flex;
  grid-column: 1 / -1;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 1rem;
}

.profile-details-actions .small {
  margin: 0;
}

@media (max-width: 900px) {
  .trusted-contact-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .trusted-contact-form {
    grid-template-columns: 1fr;
  }

  .trusted-contact-row {
    align-items: flex-start;
    flex-direction: column;
  }

  .trusted-contact-row button {
    width: 100%;
  }

  .profile-details-actions {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* Section 81: lock authenticated navigation and protect the smart dashboard layout */
body.signed-in-shell {
  --td-topbar-offset: 78px;
}

body.signed-in-shell main {
  scroll-padding-top: 190px;
}

body.signed-in-shell .topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  margin: -22px -26px 18px;
  padding: 14px 26px;
  border: 0;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 0 !important;
  background: rgba(248, 253, 255, 0.92);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
  backdrop-filter: blur(18px);
}

body.signed-in-shell .global-destination-header:not([hidden]) {
  top: var(--td-topbar-offset);
  z-index: 35;
}

body.signed-in-shell main > .trip-tab-bar {
  position: sticky;
  top: calc(var(--td-topbar-offset) + 96px);
  z-index: 20;
  scroll-margin-top: 190px;
}

body.signed-in-shell main > #dashboardHome {
  min-height: clamp(360px, 42vw, 540px);
  height: clamp(360px, 42vw, 540px);
  contain: layout paint;
}

body.signed-in-shell main > #dashboardHome .hero-copy {
  max-width: min(680px, 100%);
}

html body.app-routed main > .dashboard-widgets > .widget-grid {
  grid-template-columns: repeat(3, minmax(240px, 1fr)) !important;
  align-items: stretch;
}

html body.app-routed main > .dashboard-widgets .widget-grid > .travel-widget {
  min-width: 0;
  min-height: 174px;
  overflow-wrap: normal;
  word-break: normal;
}

html body.app-routed main > .dashboard-widgets .widget-grid > .travel-widget.is-large {
  grid-column: span 2 !important;
}

.travel-widget h3,
.travel-widget p,
.travel-widget strong,
.travel-widget span {
  overflow-wrap: normal;
  word-break: normal;
}

@media (max-width: 1100px) {
  body.signed-in-shell .topbar {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  html body.app-routed main > .dashboard-widgets > .widget-grid {
    grid-template-columns: repeat(2, minmax(220px, 1fr)) !important;
  }

  html body.app-routed main > .dashboard-widgets .widget-grid > .travel-widget.is-large {
    grid-column: span 2 !important;
  }
}

@media (max-width: 760px) {
  body.signed-in-shell {
    --td-topbar-offset: 70px;
  }

  body.signed-in-shell .topbar {
    grid-template-columns: auto minmax(0, 1fr);
    margin: -22px -12px 14px;
    padding: 12px;
  }

  body.signed-in-shell main > .trip-tab-bar {
    top: calc(var(--td-topbar-offset) + 116px);
  }

  body.signed-in-shell main > #dashboardHome {
    min-height: 520px;
    height: 520px;
  }

  html body.app-routed main > .dashboard-widgets > .widget-grid {
    grid-template-columns: 1fr !important;
  }

  html body.app-routed main > .dashboard-widgets .widget-grid > .travel-widget.is-large {
    grid-column: auto !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.signed-in-shell main > #dashboardHome {
    contain: layout;
  }
}

/* Section 79: restore the approved smart Home dashboard composition */
body.app-routed main > #dashboardHome {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0;
  margin: 0 0 16px;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 28px !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}

body.app-routed main > .trip-tab-bar {
  display: flex !important;
  width: 100%;
  margin: 0 0 16px;
  padding: 8px;
  min-width: 0;
  border-radius: 16px !important;
  overflow-x: auto !important;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
}

body.app-routed main > :where(.destination-insights, .metrics, .travel-social-strip, .dashboard-widgets) {
  width: 100%;
  min-width: 0;
  margin: 0 0 16px;
}

body.app-routed main > .destination-insights,
body.app-routed main > .dashboard-widgets {
  display: block !important;
  padding: 16px !important;
  border: 1px solid var(--td-approved-border) !important;
  border-radius: var(--td-approved-radius) !important;
  background: rgba(255, 255, 255, 0.9) !important;
  box-shadow: var(--td-approved-shadow) !important;
}

body.app-routed main > .metrics,
body.app-routed main > .travel-social-strip {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: var(--td-approved-gap) !important;
  align-items: stretch;
}

body.app-routed main > .metrics > *,
body.app-routed main > .travel-social-strip > * {
  grid-column: auto !important;
  min-width: 0;
  min-height: 0;
  width: 100%;
  margin: 0;
  border: 1px solid var(--td-approved-border);
  border-radius: var(--td-approved-radius);
  background: var(--td-approved-card);
  box-shadow: var(--td-approved-shadow);
}

body.app-routed main > .dashboard-widgets > .section-heading {
  margin: 0 0 14px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.app-routed main > .dashboard-widgets > .widget-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: var(--td-approved-gap) !important;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0;
}

body.app-routed main > .dashboard-widgets .widget-grid > .travel-widget {
  grid-column: auto !important;
  min-width: 0;
  min-height: 174px;
  width: 100%;
  margin: 0;
  border: 1px solid var(--td-approved-border);
  border-radius: var(--td-approved-radius);
  background: var(--td-approved-card);
  box-shadow: var(--td-approved-shadow);
}

body.app-routed main > .dashboard-widgets > #widgetStatusMessage {
  margin: 12px 0 0;
}

@media (max-width: 1100px) {
  body.app-routed main > .metrics,
  body.app-routed main > .travel-social-strip,
  body.app-routed main > .dashboard-widgets > .widget-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 680px) {
  body.app-routed main > .metrics,
  body.app-routed main > .travel-social-strip,
  body.app-routed main > .dashboard-widgets > .widget-grid {
    grid-template-columns: 1fr !important;
  }

  body.app-routed main > .destination-insights,
  body.app-routed main > .dashboard-widgets {
    padding: 12px !important;
  }
}

/* Section 77: approved Trending Discovery media and card grid */
body.app-routed main > section.panel:not([hidden]) .explore-results-grid,
body.app-routed main > section.route-screen:not([hidden]) .explore-results-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: clamp(14px, 1.8vw, 20px) !important;
  align-items: start !important;
  min-width: 0;
  width: 100%;
}

.explore-results-grid .explore-card {
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-width: 0;
  width: 100%;
  height: auto;
  overflow: hidden;
  border: 1px solid rgba(15, 23, 42, 0.09);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.075);
}

.explore-results-grid .explore-card-main {
  display: block;
  width: 100%;
  min-width: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  text-align: left;
}

.trending-media {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: 16px 16px 0 0;
  background: #eef4f7;
}

.trending-media img,
.trending-media video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.animated-discovery-media img {
  animation: discovery-photo-drift 10s ease-in-out infinite alternate;
}

@keyframes discovery-photo-drift {
  from { transform: scale(1); }
  to { transform: scale(1.035); }
}

.discovery-content {
  display: grid;
  gap: 8px;
  padding: 16px;
  min-width: 0;
}

.discovery-content > * {
  min-width: 0;
  overflow-wrap: anywhere;
}

.discovery-title,
.discovery-location,
.discovery-description,
.discovery-tags,
.discovery-content .explore-card-meta {
  display: block;
}

.discovery-title {
  color: var(--ink);
  font-size: 18px;
  line-height: 1.18;
}

.discovery-location {
  color: #087f8c;
  font-size: 12px;
  font-weight: 800;
}

.discovery-description {
  color: var(--muted);
  line-height: 1.45;
}

.discovery-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.discovery-tags span {
  display: inline-flex;
  max-width: 100%;
  padding: 5px 8px;
  border-radius: 999px;
  background: #eef9fb;
  color: #126477;
  font-size: 11px;
  line-height: 1.25;
}

.explore-results-grid .explore-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0 16px 16px;
}

.explore-results-grid .explore-card-actions button {
  flex: 1 1 120px;
  min-width: 0;
}

@media (prefers-reduced-motion: reduce) {
  .animated-discovery-media img {
    animation: none;
  }
}

@media (max-width: 1100px) {
  body.app-routed main > section.panel:not([hidden]) .explore-results-grid,
  body.app-routed main > section.route-screen:not([hidden]) .explore-results-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 680px) {
  body.app-routed main > section.panel:not([hidden]) .explore-results-grid,
  body.app-routed main > section.route-screen:not([hidden]) .explore-results-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Section 73: independent widgets without an oversized tab wrapper */
body.app-routed main > section.panel:not([hidden]),
body.app-routed main > section.route-screen:not([hidden]):not(#dashboardHome) {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
  gap: var(--td-dashboard-card-gap);
  width: 100%;
  max-width: none;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.app-routed main > section.panel:not([hidden]) > .section-heading,
body.app-routed main > section.route-screen:not([hidden]):not(#dashboardHome) > .section-heading {
  grid-column: 1 / -1;
  margin: 0;
}

body.app-routed main > section.panel:not([hidden]) > :where(section, article, div, form):not(.section-heading):not(.trip-tab-bar):not(.button-row):not(.mini-action-row):not(.hero-actions):not([hidden]),
body.app-routed main > section.route-screen:not([hidden]):not(#dashboardHome) > :where(section, article, div, form):not(.section-heading):not(.trip-tab-bar):not(.button-row):not(.mini-action-row):not(.hero-actions):not([hidden]) {
  min-width: 0;
  height: auto;
  border: 1px solid var(--td-dashboard-card-border);
  border-radius: var(--td-dashboard-card-radius) !important;
  background: var(--td-dashboard-card-bg);
  box-shadow: var(--td-dashboard-card-shadow);
}

/* Layout shells distribute their real widgets while leaving the page background visible. */
body.app-routed main > section.panel:not([hidden]) :where(.travel-settings-shell, .wallet-redesign-shell, .settings-shell, .admin-settings-shell, .memories-gallery-shell) {
  display: contents;
}

body.app-routed main > section.panel:not([hidden]) :where(.travel-settings-sidebar, .travel-settings-main, .wallet-section-nav, .wallet-home-grid, .wallet-dashboard-sections, .settings-nav-panel, .settings-main-panel) {
  min-width: 0;
}

body.app-routed main > section.panel:not([hidden]) :where(.travel-settings-sidebar, .wallet-section-nav, .settings-nav-panel) {
  align-self: start;
  padding: 16px;
  border: 1px solid var(--td-dashboard-card-border);
  border-radius: var(--td-dashboard-card-radius);
  background: rgba(255, 255, 255, 0.9);
  box-shadow: var(--td-dashboard-card-shadow);
}

body.app-routed main > section.panel:not([hidden]) :where(.travel-settings-main, .wallet-home-grid, .wallet-dashboard-sections, .settings-main-panel) {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--td-dashboard-card-gap);
  align-items: start;
}

body.app-routed main > section.panel:not([hidden]) :where(.travel-settings-main, .wallet-home-grid, .wallet-dashboard-sections, .settings-main-panel) > * {
  min-width: 0;
}

.trip-tab-bar button {
  flex: 0 0 auto;
  border: 1px solid transparent;
  background: transparent;
  color: var(--muted);
  box-shadow: none;
}

.trip-tab-bar button.active {
  background: var(--sunset-gradient);
  color: #fff;
  border-color: rgba(255, 95, 162, 0.22);
  box-shadow: 0 8px 16px rgba(255, 95, 162, 0.18);
}

.trip-tab-bar button:not(.active) {
  background: transparent;
  color: var(--muted);
}

@media (max-width: 1100px) {
  body.app-routed main > section.panel:not([hidden]),
  body.app-routed main > section.route-screen:not([hidden]):not(#dashboardHome),
  body.app-routed main > section.panel:not([hidden]) :where(.travel-settings-main, .wallet-home-grid, .wallet-dashboard-sections, .settings-main-panel) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 680px) {
  body.app-routed main > section.panel:not([hidden]),
  body.app-routed main > section.route-screen:not([hidden]):not(#dashboardHome),
  body.app-routed main > section.panel:not([hidden]) :where(.travel-settings-main, .wallet-home-grid, .wallet-dashboard-sections, .settings-main-panel) {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  body.app-routed main > section.panel:not([hidden]) > .section-heading,
  body.app-routed main > section.route-screen:not([hidden]):not(#dashboardHome) > .section-heading {
    padding: 14px;
  }
}

.corporate-access-dialog::backdrop {
  background: rgba(7, 17, 22, 0.86);
  backdrop-filter: blur(8px);
}

.corporate-access-dialog {
  width: min(560px, calc(100% - 28px));
}

.pin-card {
  display: grid;
  gap: 12px;
  padding: 20px;
}

.pin-card h2,
.pin-card p {
  margin: 0;
}

.pin-card label {
  color: var(--muted);
  font-weight: 800;
}

.pin-card input {
  width: 100%;
  min-height: 48px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 12px;
  font-size: 20px;
  letter-spacing: 0.2em;
  text-align: center;
  outline: 0;
}

.corporate-access-card input {
  letter-spacing: 0;
  text-align: left;
  font-size: 16px;
}

.corporate-code-field input {
  min-height: 48px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 88px 0 12px;
}

.corporate-code-field {
  position: relative;
}

.corporate-code-field button {
  position: absolute;
  top: 6px;
  right: 6px;
  min-height: 36px;
  padding: 0 13px;
}

.corporate-access-rules {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid rgba(0, 119, 182, 0.18);
  border-radius: 8px;
  background: #eefaff;
}

.corporate-access-rules span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

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

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

.admin-page {
  max-width: 880px;
  margin: 0 auto;
}

.social-hub {
  display: grid;
  gap: 14px;
}

.social-media-hub {
  display: grid;
  gap: 14px;
}

.social-hub-layout {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 14px;
  align-items: start;
}

.connected-accounts-panel,
.ai-caption-panel,
.share-preview-panel {
  grid-column: span 2;
}

.social-grid,
.story-grid,
.creator-grid,
.caption-studio {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.social-card {
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fffdfa;
  box-shadow: 0 14px 34px rgba(20, 42, 56, .07);
}

.social-card h3,
.social-card p {
  margin-top: 0;
}

.social-card p {
  color: var(--muted);
  line-height: 1.45;
}

.social-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.social-card-header h3 {
  margin: 2px 0 0;
}

.social-pill,
.connection-status {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  background: #eef8f6;
  color: #14535a;
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

.social-empty-state {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 1.5fr;
  gap: 16px;
  align-items: center;
  padding: 18px;
  border: 1px dashed #9fcfc8;
  border-radius: 8px;
  background: #f4fbf8;
}

.empty-connect-grid,
.quick-share-grid,
.platform-grid {
  display: grid;
  gap: 10px;
}

.empty-connect-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

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

.platform-card {
  min-width: 0;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 42px;
  gap: 10px;
  align-items: center;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
}

.platform-card.connected {
  border-color: #9ed8c9;
  background: #f7fffc;
}

.platform-card.reconnect {
  border-color: #f1cc7d;
  background: #fffaf0;
}

.platform-card strong,
.platform-card small {
  display: block;
}

.platform-card small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 12px;
}

.platform-card img,
.profile-initials,
.social-media-hub .brand-mark {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  object-fit: cover;
  font-weight: 950;
}

.social-media-hub .brand-mark {
  color: #fff;
  font-size: 14px;
  letter-spacing: 0;
}

.social-media-hub .brand-mark.instagram { background: linear-gradient(135deg, #833ab4, #fd1d1d, #fcb045); }
.social-media-hub .brand-mark.facebook { background: #1877f2; font-family: Arial, sans-serif; font-size: 22px; }
.social-media-hub .brand-mark.tiktok { background: #0a0a0a; color: #69c9d0; font-size: 22px; }
.social-media-hub .brand-mark.threads { background: #111; font-size: 20px; }
.social-media-hub .brand-mark.snapchat { background: #fffc00; color: #111; }
.social-media-hub .brand-mark.x { background: #111; }
.social-media-hub .brand-mark.linkedin { background: #0a66c2; font-family: Arial, sans-serif; }
.social-media-hub .brand-mark.pinterest { background: #e60023; font-family: Georgia, serif; font-size: 22px; }
.social-media-hub .brand-mark.youtube { background: #ff0033; font-size: 18px; }

.profile-initials {
  background: #e9f0ef;
  color: #27545d;
  font-size: 13px;
}

.connection-status {
  grid-column: 1 / -1;
  justify-self: start;
  background: #f3f5f4;
  color: #5d6871;
}

.connection-status.connected {
  background: #e8f9f3;
  color: #106146;
}

.connection-status.reconnect {
  background: #fff1c8;
  color: #835400;
}

.platform-actions {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.platform-actions button,
.quick-share-grid button,
.empty-connect-grid button {
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  font-weight: 900;
}

.platform-actions button {
  min-height: 34px;
  padding: 0 12px;
  font-size: 12px;
}

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

.quick-share-grid button,
.empty-connect-grid button {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  padding: 8px 10px;
  text-align: left;
}

.quick-share-grid button.active {
  border-color: var(--reef);
  background: #ecfbf9;
  color: #083d43;
  box-shadow: inset 0 0 0 2px rgba(0, 184, 178, .14);
}

.caption-label {
  display: block;
  margin-bottom: 6px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 900;
}

.connection-list,
.story-feed {
  display: grid;
  gap: 8px;
}

.connection-list > div {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-height: 52px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.connection-list strong,
.connection-list small,
.story-feed strong,
.story-feed span {
  display: block;
}

.connection-list small,
.story-feed span {
  color: var(--muted);
  font-size: 12px;
}

.connection-list button {
  min-height: 32px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  padding: 0 10px;
  font-size: 12px;
  font-weight: 800;
}

.avatar {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--reef), var(--sun), var(--sea));
  color: #fff;
  font-size: 12px;
  font-weight: 900;
}

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

.share-options label,
.profile-controls label {
  min-height: 36px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.share-options .share-all {
  border-color: #8ec8b2;
  background: #eefaf6;
  color: #24565a;
}

.caption-studio textarea {
  width: 100%;
  min-height: 108px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  resize: vertical;
  outline: 0;
}

.ai-caption-panel textarea {
  width: 100%;
  min-height: 124px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  resize: vertical;
  outline: 0;
  font: inherit;
  color: var(--ink);
  background: #fff;
}

.hashtag-list,
.reel-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.hashtag-list {
  margin-top: 10px;
}

.hashtag-list span {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 10px;
  border-radius: 999px;
  background: #eef4f2;
  color: #27545d;
  font-size: 13px;
  font-weight: 800;
}

.hashtag-list.compact span {
  min-height: 28px;
  font-size: 12px;
}

.social-action-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.privacy-options {
  display: grid;
  gap: 8px;
  margin: 0 0 12px;
  padding: 0;
  border: 0;
}

.privacy-options legend {
  margin-bottom: 8px;
  color: var(--ink);
  font-weight: 950;
}

.privacy-options label {
  min-height: 40px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.share-preview {
  display: grid;
  grid-template-columns: minmax(180px, .55fr) minmax(0, 1fr);
  gap: 14px;
  align-items: stretch;
}

.share-preview img {
  width: 100%;
  height: 100%;
  min-height: 220px;
  border-radius: 8px;
  object-fit: cover;
}

.share-preview p {
  margin: 0;
  color: var(--ink);
  font-size: 18px;
  font-weight: 850;
}

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

.selected-platforms span {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 10px;
  border-radius: 999px;
  background: #0d232a;
  color: #fff;
  font-size: 12px;
  font-weight: 900;
}

/* Vibrant Travel-Drip theme accents */
.ai-solo-manager,
.ai-caption-panel,
.memory-ai-card,
.pinned-message,
.ai-msg {
  border-color: rgba(124, 92, 255, 0.26);
  background: linear-gradient(135deg, rgba(124, 92, 255, 0.12), rgba(47, 124, 246, 0.1), rgba(255, 95, 162, 0.1));
}

.ai-solo-manager .primary-button,
.memory-ai-card .primary-button,
#generateCaptionButton,
#continueShareButton {
  background: var(--ai-gradient);
}

.memory-grid img,
.mini-collage img,
.share-preview img {
  box-shadow: 0 12px 28px rgba(124, 92, 255, 0.14);
}

.daily-memory-panel,
.memories-widget,
.memory-upload-card,
.memory-settings-card {
  background: linear-gradient(135deg, #ffffff, #f7f0ff);
  border-color: rgba(124, 92, 255, 0.2);
}

#walletPanel,
.virtual-card,
.wallet-total,
.wallet-breakdown div {
  border-color: rgba(246, 200, 95, 0.26);
  background:
    radial-gradient(circle at top right, rgba(246, 200, 95, 0.2), transparent 32%),
    linear-gradient(135deg, #081b2d, #0f3246 58%, #10202f);
  color: #fff;
}

#walletPanel .eyebrow,
#walletPanel .small,
#walletPanel span,
#walletPanel p,
.wallet-total span,
.wallet-breakdown span,
.virtual-card span,
.virtual-card small {
  color: rgba(255, 255, 255, 0.78);
}

#walletPanel .ghost-button,
#walletPanel input,
#walletPanel select {
  border-color: rgba(255, 255, 255, 0.24);
}

.bank-overview article,
.ledger-stats article {
  background: linear-gradient(135deg, #ffffff, #ecfff6);
  border-color: rgba(31, 169, 113, 0.22);
}

.explore-panel {
  background:
    linear-gradient(180deg, rgba(233, 247, 255, 0.78), rgba(255, 244, 223, 0.76)),
    #fff;
}

.explore-tabs button.active,
.explore-subfilters button.active {
  border-color: transparent;
  background: var(--sunset-gradient);
  color: #fff;
  box-shadow: 0 12px 26px rgba(255, 107, 74, 0.22);
}

.explore-card {
  border-color: rgba(18, 199, 216, 0.24);
  background: linear-gradient(180deg, #ffffff, #f1fcff);
  box-shadow: 0 14px 34px rgba(0, 119, 182, 0.1);
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.explore-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 42px rgba(0, 119, 182, 0.18);
}

.explore-card-actions button:first-child,
.explore-card-actions button:nth-child(2) {
  background: var(--travel-gradient);
  color: #fff;
  border-color: transparent;
}

.messages,
.modern-messages {
  background: linear-gradient(180deg, #f8fdff, #fff7ee);
}

.msg {
  border-color: rgba(18, 199, 216, 0.18);
  background: #ffffff;
}

.modern-messages .msg:nth-child(2n) {
  background: #fff3ec;
  border-color: rgba(255, 107, 74, 0.18);
}

.chat-form button {
  background: var(--tropical-gradient);
}

.notification-mini-list span,
.ai-reminder-list div,
.widget-meta span {
  background: #ecfbff;
  color: #0d6374;
}

.notification-mini-list span:nth-child(2n),
.ai-reminder-list div:nth-child(2n),
.widget-meta span:nth-child(2n) {
  background: #fff3d7;
  color: #705015;
}

.corporate-section,
.enterprise-rbac,
.guest-portal-panel {
  background: linear-gradient(135deg, #ffffff, #edf7ff);
  border-color: rgba(0, 119, 182, 0.2);
}

.cruise-panel,
.cruise-hero-card,
.transport-panel {
  background: linear-gradient(135deg, #ffffff, #e9fbff);
  border-color: rgba(18, 199, 216, 0.22);
}

.primary-button,
.ghost-button,
.light-button,
.icon-button,
.nav button,
.nav a,
.explore-card,
.travel-widget,
.platform-card {
  transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease, border-color 180ms ease;
}
.story-feed > div {
  padding: 10px;
  border-left: 3px solid var(--sea);
  border-radius: 8px;
  background: #fff;
}

.story-grid select {
  min-height: 36px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 0 10px;
}

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

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

.analytics-grid span,
.analytics-grid strong {
  display: block;
}

.analytics-grid span {
  color: var(--muted);
  font-size: 12px;
}

.analytics-grid strong {
  margin-top: 5px;
  font-size: 20px;
}

.enterprise-rbac {
  display: grid;
  gap: 14px;
}

.corporate-mode .trip-tab-bar {
  display: none;
}

.corporate-mode-home {
  margin-bottom: 18px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(235, 249, 255, 0.94)),
    radial-gradient(circle at 88% 18%, rgba(255, 209, 102, 0.18), transparent 28%);
  border-color: rgba(0, 119, 182, 0.22);
}

.corporate-home-grid,
.corporate-policy-grid,
.corporate-feature-grid,
.corporate-acceptance-list {
  display: grid;
  gap: 10px;
}

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

.corporate-home-grid article,
.corporate-policy-grid div,
.corporate-acceptance-list div {
  min-width: 0;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.corporate-home-grid span,
.corporate-home-grid small,
.corporate-policy-grid span,
.corporate-acceptance-list span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

.corporate-home-grid strong,
.corporate-policy-grid strong,
.corporate-acceptance-list strong {
  display: block;
  margin: 5px 0;
}

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

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

.role-picker select,
.workspace-toggle select,
.retreat-type-grid span {
  min-height: 36px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.role-picker select,
.workspace-toggle select {
  padding: 0 10px;
}

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

.retreat-type-grid,
.permission-grid,
.employee-dashboard,
.approval-comm-grid,
.enterprise-security-grid,
.corporate-feature-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

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

.retreat-type-grid span {
  display: flex;
  align-items: center;
  padding: 0 12px;
  color: #27545d;
  background: #eef4f2;
  font-size: 13px;
  font-weight: 800;
}

.permission-card {
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.permission-card h3,
.permission-card p {
  margin-top: 0;
}

.permission-card p {
  color: var(--muted);
  line-height: 1.45;
}

.role-owner { border-left: 4px solid var(--ink); }
.role-finance { border-left: 4px solid var(--sea); }
.role-organizer { border-left: 4px solid var(--reef); }
.role-manager { border-left: 4px solid var(--violet); }
.role-employee { border-left: 4px solid var(--sun); }
.role-contractor { border-left: 4px solid var(--palm); }

.permission-card.is-muted {
  opacity: 0.42;
}

.travel-info-list,
.approval-flow,
.vote-option-grid,
.corporate-card-actions {
  display: grid;
  gap: 8px;
}

.travel-info-list div,
.approval-flow div,
.vote-option-grid label {
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.vote-option-grid label {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  column-gap: 8px;
  color: var(--ink);
  font-weight: 900;
}

.vote-option-grid label span {
  grid-column: 2;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.vote-option-grid label.is-disabled {
  opacity: 0.55;
}

.travel-info-list strong,
.travel-info-list span,
.approval-flow strong,
.approval-flow span {
  display: block;
}

.travel-info-list span,
.approval-flow span {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
}

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

.finance-metrics article {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.finance-metrics span,
.finance-metrics strong {
  display: block;
}

.finance-metrics span {
  color: var(--muted);
  font-size: 12px;
}

.finance-metrics strong {
  margin-top: 5px;
  font-size: 20px;
}

.expense-bars {
  display: grid;
  gap: 9px;
  margin-top: 12px;
}

.expense-bars div {
  display: grid;
  gap: 5px;
}

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

.expense-bars i {
  display: block;
  width: var(--w);
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--sea), var(--reef));
}

.restricted-panel {
  border-color: #f0c5bb;
  background: #fff8f6;
}

.restricted-panel[hidden],
.financial-privacy-panel[hidden] {
  display: none;
}

.ai-denial {
  padding: 10px;
  border-radius: 8px;
  background: #fff;
  color: #8c2f20 !important;
  font-weight: 800;
}

.corporate-mode-controls,
.corporate-acceptance-card {
  border-color: rgba(0, 119, 182, 0.24);
}

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

.corporate-policy-grid.compact-list {
  grid-template-columns: 1fr;
}

.corporate-card-preview {
  display: grid;
  gap: 8px;
  min-height: 156px;
  margin-bottom: 10px;
  padding: 18px;
  border-radius: 14px;
  color: #fff;
  background:
    radial-gradient(circle at 84% 18%, rgba(255, 209, 102, 0.34), transparent 28%),
    linear-gradient(135deg, #07171f, #0077b6 55%, #17b1a9);
  box-shadow: 0 18px 34px rgba(0, 119, 182, 0.24);
}

.corporate-card-preview span,
.corporate-card-preview small {
  color: rgba(255, 255, 255, 0.78);
}

.corporate-card-preview strong {
  margin-top: auto;
  font-size: 20px;
}

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

.corporate-card-actions button {
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  font-weight: 900;
  cursor: pointer;
}

.corporate-access-admin-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 10px;
}

.corporate-access-admin-grid div {
  min-width: 0;
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

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

.corporate-access-admin-grid strong {
  display: block;
  margin: 4px 0;
}

.corporate-acceptance-list div {
  position: relative;
  padding-left: 38px;
}

.corporate-acceptance-list div::before {
  position: absolute;
  left: 10px;
  top: 14px;
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  font-size: 11px;
  font-weight: 950;
}

.corporate-acceptance-list [data-corp-check="pass"]::before {
  content: "✓";
  background: var(--palm);
}

.corporate-acceptance-list [data-corp-check="review"]::before {
  content: "?";
  background: var(--sun);
  color: #5d3d00;
}

.corporate-acceptance-list [data-corp-check="blocked"]::before {
  content: "!";
  background: var(--reef);
}

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

.channel-list span {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  padding: 0 10px;
  border-radius: 999px;
  background: #eef4f2;
  color: #27545d;
  font-size: 13px;
  font-weight: 800;
}

.important-info {
  display: grid;
  gap: 14px;
}

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

.info-search input {
  min-height: 38px;
  min-width: min(320px, 100%);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 11px;
  outline: 0;
}

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

.info-status-grid article,
.destination-info-grid div,
.emergency-grid div {
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfb;
}

.info-status-grid span,
.info-status-grid strong,
.destination-info-grid strong,
.destination-info-grid span,
.emergency-grid strong,
.emergency-grid span {
  display: block;
}

.info-status-grid span,
.destination-info-grid span,
.emergency-grid span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

.info-status-grid strong {
  margin-top: 6px;
  font-size: 20px;
}

.info-accordion {
  display: grid;
  gap: 8px;
}

.info-section {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
}

.info-section[hidden] {
  display: none;
}

.info-section summary {
  min-height: 48px;
  display: flex;
  align-items: center;
  padding: 0 14px;
  font-weight: 900;
  cursor: pointer;
}

.info-section > div {
  padding: 0 14px 14px;
}

.document-list,
.meeting-list,
.attachment-list,
.faq-list,
.announcement-list {
  display: grid;
  gap: 8px;
}

.document-list div,
.meeting-list div,
.faq-list div,
.announcement-list div {
  display: grid;
  gap: 3px;
  padding: 10px;
  border-radius: 8px;
  background: #f8faf8;
}

.document-list strong,
.document-list span,
.document-list time,
.document-list em,
.meeting-list strong,
.meeting-list span,
.faq-list strong,
.faq-list span,
.announcement-list strong,
.announcement-list span {
  display: block;
}

.document-list span,
.document-list time,
.meeting-list span,
.faq-list span,
.announcement-list span {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
}

.document-list em {
  width: fit-content;
  margin-top: 4px;
  border-radius: 999px;
  padding: 4px 8px;
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
}

.document-list .ok {
  background: #e7f8ef;
  color: #1f7a47;
}

.document-list .warn {
  background: #fff4e2;
  color: #86540b;
}

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

.rules-columns h3 {
  margin-top: 0;
}

.rules-columns ul {
  margin: 0;
  padding-left: 18px;
  color: var(--muted);
  line-height: 1.5;
}

.policy-list,
.packing-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.policy-list span,
.packing-tags span {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  padding: 0 10px;
  border-radius: 999px;
  background: #eef4f2;
  color: #27545d;
  font-size: 13px;
  font-weight: 800;
}

.checklist-grid label {
  min-height: 38px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfb;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.packing-tags {
  margin-top: 12px;
}

.meeting-list a,
.attachment-list a {
  color: var(--sea);
  font-size: 13px;
  font-weight: 900;
}

.attachment-list a {
  min-height: 38px;
  display: flex;
  align-items: center;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfb;
}

.read-confirmation {
  padding: 14px;
  border: 1px solid #c9e8df;
  border-radius: 8px;
  background: #eefaf6;
}

.read-confirmation label {
  display: flex;
  gap: 8px;
  align-items: center;
  color: #24565a;
  font-weight: 900;
}

.admin-brand {
  color: var(--ink);
  margin-bottom: 22px;
  align-items: flex-start;
  flex-wrap: wrap;
}

.admin-wordmark {
  width: min(300px, 72vw);
}

.admin-brand .brand-copy strong {
  display: none;
}

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

.admin-form {
  display: grid;
  gap: 14px;
}

.admin-form label {
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-weight: 700;
}

code {
  padding: 2px 5px;
  border-radius: 4px;
  background: #eef2f0;
}

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

  .sidebar {
    position: fixed;
    z-index: 45;
    inset: 0 auto 0 0;
    width: min(320px, calc(100vw - 34px));
    transform: translateX(-104%);
    transition: transform 260ms ease;
  }

  body.sidebar-open .sidebar {
    transform: translateX(0);
  }

  body.sidebar-open::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 40;
    background: rgba(6, 14, 18, 0.42);
  }

  .menu-button {
    display: inline-flex;
  }

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

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

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

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

  .mobile-nav {
    margin: 0 14px 14px;
    display: grid;
    grid-template-columns: repeat(9, 1fr);
    gap: 4px;
    padding: 6px;
    border-radius: 8px;
    background: rgba(17, 34, 43, 0.94);
    color: #fff;
    box-shadow: var(--shadow);
  }

  .mobile-nav button {
    min-height: 44px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: rgba(255, 255, 255, 0.75);
    font-size: 11px;
  }

  .mobile-nav button.active {
    color: #fff;
    background: rgba(255, 255, 255, 0.12);
  }
}

@media (max-width: 760px) {
  main {
    padding: 14px;
  }

  body.auth-screen main {
    padding: 0;
  }

  .auth-landing-nav {
    min-height: 92px;
    padding: 24px 18px;
    align-items: center;
  }

  .auth-brand {
    gap: 10px;
    font-size: 28px;
  }

  .brand-logo-wrap {
    width: 42px;
  }

  .sidebar .brand {
    min-height: 44px;
  }

  .auth-brand-logo {
    width: 208px;
  }

  .loader-logo {
    width: 96px;
  }

  .auth-brand .brand-mark {
    width: 28px;
    height: 28px;
  }

  .auth-nav-actions {
    gap: 10px;
  }

  .auth-link-button,
  .auth-start-button {
    min-height: 44px;
    border-radius: 17px;
    padding: 0 16px;
    font-size: 18px;
  }

  .auth-landing-grid {
    position: relative;
    min-height: calc(100vh - 92px);
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 18px;
  }

  .auth-pill {
    min-height: 42px;
    margin-bottom: 34px;
    padding: 0 18px;
    font-size: 18px;
  }

  .auth-landing h1 {
    font-size: clamp(36px, 12vw, 58px);
    line-height: 1.08;
  }

  .auth-carousel-overlay > p:not(.auth-pill) {
    margin-top: 28px;
    font-size: 18px;
    line-height: 1.45;
  }

  .auth-carousel {
    position: absolute;
    inset: 0;
    min-height: auto;
    border-radius: 0;
    box-shadow: none;
  }

  .auth-carousel::after {
    background: linear-gradient(180deg, rgba(7, 17, 22, 0.68), rgba(7, 17, 22, 0.88));
  }

  .auth-carousel-overlay {
    min-height: 360px;
    padding: 18px;
    justify-content: flex-start;
  }

  .auth-travel-tags,
  .auth-carousel blockquote {
    display: none;
  }

  .auth-landing .auth-card {
    position: relative;
    z-index: 2;
    max-height: none;
    margin: 220px auto 22px;
    padding: 18px;
    background: rgba(255, 250, 242, 0.94);
    backdrop-filter: blur(18px);
  }

  .auth-support-actions,
  .social-signin,
  .onboarding-panel > div {
    grid-template-columns: 1fr;
  }

  .auth-inline-row {
    align-items: flex-start;
    flex-direction: column;
  }

  .topbar,
  .auth-panel,
  .pwa-panel {
    grid-template-columns: 1fr;
  }

  .pwa-panel {
    display: grid;
  }

  .top-actions {
    justify-content: space-between;
  }

  .top-actions .primary-button,
  .top-actions .ghost-button,
  .top-actions .icon-button {
    flex: 1;
  }

  .hero {
    min-height: 430px;
  }

  .destination-banner {
    min-height: 520px;
  }

  .hero::after {
    background: linear-gradient(180deg, rgba(10, 21, 29, 0.1), rgba(10, 21, 29, 0.84));
  }

  .hero-copy {
    padding: 22px;
    padding-bottom: 74px;
  }

  .destination-banner-meta {
    grid-template-columns: 1fr;
    margin: 12px 0;
    padding-left: 13px;
  }

  .destination-banner-meta span {
    padding: 7px 0;
    font-size: 11px;
  }

  .destination-banner-meta span:nth-child(odd),
  .destination-banner-meta span:nth-child(even) {
    border-right: 0;
    padding-left: 0;
  }

  .hero-actions,
  .section-heading {
    align-items: stretch;
    flex-direction: column;
  }

  .hero-actions button,
  .section-heading .ghost-button {
    width: 100%;
  }

  .destination-banner-controls {
    right: 14px;
    bottom: 14px;
  }

  #destinationPauseButton {
    top: 12px;
    right: 12px;
    width: 32px;
    min-width: 32px;
    height: 32px;
    min-height: 32px;
    font-size: 13px;
  }

  #destinationPauseButton::before {
    content: "";
    position: absolute;
    inset: -6px;
  }

  .destination-banner-dots {
    left: 22px;
    bottom: 18px;
    max-width: calc(100% - 170px);
    flex-wrap: wrap;
  }

  .destination-banner-dots button {
    width: 18px;
  }

  .metrics,
  .widget-grid,
  .widget-meta,
  .destination-fact-grid,
  .destinations,
  .explore-context-grid,
  .explore-search-row,
  .explore-filter-row,
  .explore-results-grid,
  .explore-skeleton-grid,
  .explore-detail-panel,
  .ai-planner-shell,
  .ai-trip-output-grid,
  .ai-planner-actions,
  .ai-planner-input-row,
  .right-stack,
  .ledger-stats,
  .bank-overview,
  .wallet-breakdown,
  .trip-wallet-card,
  .navigation-status-grid,
  .security-status-grid,
  .backend-summary-grid,
  .security-control-grid,
  .policy-summary-grid,
  .copyright-columns,
  .copyright-process,
  .fraud-signal-list div,
  .card-balance-grid,
  .wallet-provisioning,
  .control-grid,
  .receipt-intake,
  .receipt-summary,
  .receipt-workspace,
  .receipt-item-list article,
  .receipt-status-list div,
  .receipt-history-list div,
  .bill-entry-grid,
  .split-mode-tabs,
  .bill-total-grid,
  .bill-tools-grid,
  .payment-method-grid,
  .corporate-meal-rules,
  .ride-destination-row,
  .ride-account-panel,
  .shared-ride-panel,
  .shared-ride-members,
  .ride-assistant-panel,
  .ride-location-grid,
  .ride-entry-grid,
  .ride-estimate-grid,
  .alert-category-grid,
  .delivery-preferences,
  .feature-toggle-grid,
  .trip-type-selector,
  .trip-creation-form,
  .invitation-builder-grid,
  .invitation-options-grid,
  .invitation-form-grid,
  .invite-checkbox-grid,
  .rsvp-status-grid,
  .guest-portal-grid,
  .solo-dashboard-grid,
  .solo-workspace,
  .solo-budget-list,
  .solo-tag-list,
  .social-grid,
  .social-hub-layout,
  .platform-grid,
  .empty-connect-grid,
  .story-grid,
  .creator-grid,
  .caption-studio,
  .analytics-grid,
  .corporate-home-grid,
  .corporate-policy-grid,
  .corporate-feature-grid,
  .corporate-card-actions,
  .corporate-acceptance-list,
  .retreat-type-grid,
  .permission-grid,
  .employee-dashboard,
  .approval-comm-grid,
  .enterprise-security-grid,
  .finance-metrics {
    grid-template-columns: 1fr;
  }

  .info-status-grid,
  .destination-info-grid,
  .emergency-grid,
  .rules-columns,
  .checklist-grid {
    grid-template-columns: 1fr;
  }

  .share-options,
  .quick-share-grid,
  .share-preview,
  .profile-controls {
    grid-template-columns: 1fr;
  }

  .connected-accounts-panel,
  .ai-caption-panel,
  .share-preview-panel {
    grid-column: auto;
  }

  .member-table {
    overflow-x: auto;
  }

  .member-table > div {
    min-width: 560px;
  }

  .split-preview div {
    grid-template-columns: 1fr;
  }

  .receipt-claim-grid {
    grid-template-columns: 1fr 1fr;
  }

  .split-preview b {
    text-align: left;
  }

  .explore-detail-panel img {
    min-height: 220px;
  }

  .metrics article {
    min-height: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.001ms !important;
  }

  .auth-carousel img {
    transform: none;
  }
}

@media (max-width: 720px) {
  .corporate-access-dialog {
    width: 100%;
    max-width: none;
    height: 100dvh;
    max-height: none;
    border-radius: 0;
  }

  .corporate-access-card {
    min-height: 100dvh;
    align-content: center;
    padding: 22px;
  }

  .corporate-access-actions,
  .corporate-access-admin-grid {
    grid-template-columns: 1fr;
  }
}

/* Clean, vibrant Travel-Drip redesign layer */
:root {
  --ink: #10202f;
  --muted: #607280;
  --line: #d8e7ea;
  --paper: #f4fbff;
  --panel: #ffffff;
  --sea: #0077b6;
  --reef: #ff6b4a;
  --sun: #ffd166;
  --sand: #fff4df;
  --aqua: #12c7d8;
  --mint: #38c98d;
  --palm: #1fa971;
  --violet: #7c5cff;
  --pink: #ff5fa2;
  --navy: #081b2d;
  --gold: #f6c85f;
  --danger: #d94d45;
  --shadow: 0 18px 50px rgba(16, 32, 47, 0.12);
  --soft-shadow: 0 8px 24px rgba(16, 32, 47, 0.07);
  --shadow-bright: 0 18px 46px rgba(0, 119, 182, 0.16);
  --travel-gradient: linear-gradient(135deg, var(--sea), var(--aqua));
  --sunset-gradient: linear-gradient(135deg, var(--reef), var(--pink));
  --ai-gradient: linear-gradient(135deg, var(--violet), #2f7cf6 58%, var(--pink));
  --tropical-gradient: linear-gradient(135deg, var(--aqua), var(--palm));
}

body {
  background:
    radial-gradient(circle at 12% 0%, rgba(255, 107, 74, 0.14), transparent 28%),
    radial-gradient(circle at 88% 6%, rgba(18, 199, 216, 0.16), transparent 26%),
    linear-gradient(180deg, #f8fdff 0%, var(--paper) 46%, #fff8ea 100%);
}

.shell {
  grid-template-columns: 232px minmax(0, 1fr);
}

main {
  width: min(100%, 1240px);
  margin: 0 auto;
}

.sidebar {
  padding: 16px 10px;
  background:
    radial-gradient(circle at 20% 0%, rgba(255, 209, 102, 0.22), transparent 30%),
    linear-gradient(180deg, rgba(255, 107, 74, 0.18), transparent 30%),
    linear-gradient(180deg, #08233a 0%, #071726 72%, #0d2e31 100%);
}

.brand strong {
  font-size: 20px;
}

.brand small,
.install-card {
  display: none;
}

.nav {
  gap: 7px;
}

.nav-group {
  padding: 4px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.055);
}

.nav-group summary {
  min-height: 30px;
  padding: 0 8px;
  font-size: 10px;
}

.nav button,
.nav a {
  min-height: 40px;
  border-radius: 12px;
  padding: 0 10px;
  font-size: 12px;
}

.nav .active,
.nav a:hover,
.nav button:hover {
  background: linear-gradient(135deg, rgba(18, 199, 216, 0.28), rgba(255, 107, 74, 0.18));
  box-shadow: inset 3px 0 0 var(--sun);
  transform: translateX(2px) scale(1.01);
}

.topbar,
.pwa-panel,
.panel,
.metrics article,
.travel-widget,
.explore-card,
.trip-tab-bar,
.auth-landing .auth-card {
  border: 1px solid rgba(230, 235, 232, 0.96);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: var(--soft-shadow);
}

.topbar {
  position: sticky;
  top: 12px;
  z-index: 25;
  margin: 12px 0 16px;
  backdrop-filter: blur(18px);
}

.search input,
.auth-form input,
.admin-form input,
.admin-form textarea,
.trip-creation-form input,
.trip-creation-form select,
.invitation-form-grid input,
.invitation-form-grid select,
.invitation-form-grid textarea {
  border-radius: 14px;
  border-color: var(--line);
  background: #fff;
}

.primary-button,
.chat-form button {
  border: 0;
  border-radius: 999px;
  background: var(--travel-gradient);
  color: #fff;
  box-shadow: 0 10px 20px rgba(0, 119, 182, 0.2);
}

.ghost-button,
.light-button,
.icon-button,
.explore-card-actions button,
.guest-access-actions button,
.wallet-provisioning button {
  border-radius: 999px;
  border: 1px solid var(--line);
  background: #fff;
  color: #24555d;
}

.button-row {
  gap: 8px;
}

.hero {
  min-height: 390px;
  border-radius: 30px;
  box-shadow: 0 24px 70px rgba(31, 42, 51, 0.15);
}

.hero::after {
  background:
    linear-gradient(90deg, rgba(8, 27, 45, 0.84), rgba(0, 119, 182, 0.24) 54%, rgba(255, 107, 74, 0.18)),
    radial-gradient(circle at 78% 16%, rgba(255, 209, 102, 0.28), transparent 30%);
}

.hero h1 {
  font-size: clamp(38px, 5vw, 68px);
  letter-spacing: 0;
}

.hero-copy {
  padding: 34px;
}

.hero-actions {
  margin-top: 18px;
}

.trip-tab-bar {
  position: sticky;
  top: 92px;
  z-index: 20;
  display: flex;
  gap: 8px;
  margin: 14px 0;
  padding: 8px;
  overflow-x: auto;
  scrollbar-width: none;
}

.trip-tab-bar::-webkit-scrollbar {
  display: none;
}

.trip-tab-bar button {
  flex: 0 0 auto;
  min-height: 40px;
  border: 0;
  border-radius: 999px;
  padding: 0 14px;
  background: transparent;
  color: var(--muted);
  font-weight: 850;
}

.trip-tab-bar button.active,
.trip-tab-bar button:hover {
  background: var(--sunset-gradient);
  color: #fff;
}

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

.metrics article {
  min-height: 112px;
}

.metrics strong {
  font-size: 28px;
}

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

.travel-widget {
  min-height: 174px;
  border-radius: 22px;
  background: linear-gradient(180deg, #fff, #effbff);
  box-shadow: var(--soft-shadow);
}

.travel-widget.is-large {
  grid-column: span 1;
}

.widget-toolbar button {
  min-height: 30px;
  border-radius: 999px;
}

.widget-meta span,
.notification-mini-list span,
.ai-reminder-list div {
  border-radius: 14px;
  background: #ecfbff;
}

.content-grid {
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
}

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

.right-stack > .panel {
  align-self: start;
}

#walletPanel,
#virtualCard,
.audit-panel,
.navigation-audit-panel {
  grid-column: span 1;
}

.wallet-total,
.wallet-breakdown div,
.card-balance-grid div,
.ledger-stats div,
.bank-overview div {
  border-radius: 18px;
  background: #f7fbfa;
}

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

.virtual-card {
  border-radius: 22px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.18), transparent),
    linear-gradient(135deg, #12333d, #087f8c 54%, #ff7a5c);
}

.messages {
  max-height: 280px;
  display: grid;
  gap: 10px;
  padding: 8px;
  border-radius: 20px;
  background: #f5f8f6;
}

.msg {
  width: fit-content;
  max-width: 82%;
  border-radius: 18px 18px 18px 6px;
  padding: 10px 12px;
  background: #fff;
  box-shadow: 0 4px 12px rgba(31, 42, 51, 0.06);
}

.msg:nth-child(2n) {
  justify-self: end;
  border-radius: 18px 18px 6px 18px;
  background: var(--aqua);
}

.msg:last-child {
  border: 1px solid rgba(244, 185, 66, 0.34);
  background: #fff7df;
}

.chat-form {
  grid-template-columns: minmax(0, 1fr) 72px;
}

.chat-form input {
  min-height: 48px;
  border-radius: 999px;
}

.explore-tabs,
#exploreTabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: none;
}

.explore-tabs::-webkit-scrollbar,
#exploreTabs::-webkit-scrollbar {
  display: none;
}

.explore-tabs button,
#exploreTabs button {
  flex: 0 0 auto;
  min-height: 42px;
  border-radius: 999px;
}

.explore-results-grid {
  gap: 16px;
}

.explore-card {
  overflow: hidden;
  border-radius: 24px;
  background: #fff;
}

.explore-card-main {
  text-align: left;
}

.explore-card-main img {
  aspect-ratio: 1.35;
  object-fit: cover;
}

.explore-card-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding: 0 14px 14px;
}

.explore-filter-row,
.explore-context-grid {
  border-radius: 20px;
  padding: 12px;
  background: #fff;
}

.destination-fact-grid article,
.invite-card,
.invitation-options-grid section,
.guided-step,
.feature-toggle-grid section,
.guest-portal-grid article {
  border-radius: 18px;
}

.mobile-nav {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: 10px;
  z-index: 35;
  grid-template-columns: repeat(5, 1fr);
  border-radius: 24px;
  background: rgba(16, 36, 45, 0.96);
  backdrop-filter: blur(18px);
}

.mobile-nav button {
  border-radius: 18px;
  font-weight: 850;
}

@media (min-width: 1081px) {
  .menu-button {
    display: none;
  }
}

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

  main {
    width: 100%;
  }

  .mobile-nav {
    display: grid;
  }

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

@media (max-width: 760px) {
  main {
    padding: 12px 12px 86px;
  }

  .topbar {
    position: static;
    grid-template-columns: auto 1fr auto;
    margin-top: 8px;
    border-radius: 18px;
  }

  .topbar-page-title {
    display: none;
  }

  .search {
    max-width: none;
  }

  .global-destination-header {
    grid-template-columns: 84px minmax(0, 1fr);
    min-height: 86px;
    gap: 10px;
    margin: -2px 0 14px;
    border-radius: 18px;
  }

  .global-destination-header img {
    width: 84px;
    height: 64px;
    border-radius: 14px;
  }

  .global-destination-copy strong {
    font-size: 16px;
  }

  .global-destination-copy p {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .global-destination-actions {
    grid-column: 1 / -1;
    justify-content: space-between;
  }

  .global-destination-actions button {
    min-height: 38px;
  }

  .hero {
    min-height: 410px;
    border-radius: 24px;
  }

  .hero-copy {
    padding: 22px;
  }

  .trip-tab-bar {
    top: 0;
    margin: 12px 0;
    border-radius: 18px;
  }

  .metrics,
  .widget-grid,
  .right-stack,
  .wallet-breakdown,
  .explore-card-actions,
  .guest-portal-grid {
    grid-template-columns: 1fr;
  }

  .travel-widget,
  .panel,
  .metrics article {
    border-radius: 20px;
  }

  .auth-switch {
    grid-template-columns: 1fr;
  }
}

.cruise-panel {
  display: grid;
  gap: 16px;
}

.cruise-hero-card {
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(260px, 0.85fr) minmax(0, 1.15fr);
  gap: 0;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: #fff;
  box-shadow: var(--soft-shadow);
}

.cruise-hero-card img {
  width: 100%;
  height: 100%;
  min-height: 260px;
  object-fit: cover;
}

.cruise-hero-card > div {
  display: grid;
  align-content: center;
  gap: 10px;
  padding: 22px;
}

.cruise-hero-card span,
.cruise-overview-grid span,
.cruise-wallet-grid span {
  color: var(--sea);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.cruise-hero-card h3 {
  margin: 0;
  font-size: clamp(26px, 4vw, 44px);
  line-height: 1.05;
}

.cruise-hero-card p,
.cruise-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.5;
}

.cruise-chip-row,
.excursion-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.cruise-chip-row span {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 0 10px;
  background: var(--aqua);
  color: #0b6870;
  font-size: 12px;
  letter-spacing: 0;
  text-transform: none;
}

.cruise-overview-grid,
.cruise-feature-grid,
.cruise-wallet-grid,
.cruise-corporate-rules {
  display: grid;
  gap: 12px;
}

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

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

.cruise-overview-grid article,
.cruise-card,
.cruise-corporate-rules div {
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 16px;
  background: #fff;
  box-shadow: var(--soft-shadow);
}

.cruise-overview-grid strong {
  display: block;
  margin-top: 8px;
  font-size: 25px;
}

.cruise-overview-grid small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
}

.cruise-card {
  display: grid;
  align-content: start;
  gap: 12px;
}

.cruise-card h3 {
  margin: 0;
}

.cabin-map {
  min-height: 150px;
  display: grid;
  place-items: center;
  gap: 6px;
  border-radius: 20px;
  background:
    linear-gradient(90deg, rgba(8, 127, 140, 0.10) 1px, transparent 1px),
    linear-gradient(180deg, rgba(8, 127, 140, 0.10) 1px, transparent 1px),
    #eff9f7;
  background-size: 34px 34px;
}

.cabin-map b {
  border-radius: 999px;
  padding: 8px 14px;
  background: var(--reef);
  color: #fff;
  box-shadow: 0 10px 22px rgba(255, 122, 92, 0.25);
}

.port-list {
  display: grid;
  gap: 9px;
}

.port-list div {
  border-radius: 16px;
  padding: 10px;
  background: #f7fbfa;
}

.port-list strong,
.port-list span,
.port-list small,
.cruise-corporate-rules strong,
.cruise-corporate-rules span {
  display: block;
}

.port-list span,
.port-list small,
.cruise-corporate-rules span {
  margin-top: 4px;
  color: var(--muted);
  line-height: 1.4;
}

.excursion-list button {
  min-height: 40px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0 12px;
  background: #fff;
  color: #24555d;
  font-weight: 850;
}

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

.cruise-wallet-grid div {
  border-radius: 16px;
  padding: 12px;
  background: #f7fbfa;
}

.cruise-wallet-grid strong {
  display: block;
  margin-top: 6px;
  font-size: 20px;
}

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

@media (max-width: 900px) {
  .cruise-hero-card,
  .cruise-overview-grid,
  .cruise-feature-grid,
  .cruise-corporate-rules {
    grid-template-columns: 1fr;
  }
}

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

.daily-memory-panel {
  display: grid;
  gap: 14px;
  margin-bottom: 18px;
}

.memory-reminder-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  overflow: hidden;
  border: 1px solid rgba(255, 122, 92, 0.20);
  border-radius: 24px;
  padding: 18px;
  background:
    linear-gradient(135deg, rgba(255, 122, 92, 0.12), rgba(8, 127, 140, 0.08)),
    #fff;
  box-shadow: var(--soft-shadow);
}

.memory-reminder-hero h3,
.memory-reminder-hero p,
.daily-memory-grid h3,
.daily-memory-grid p {
  margin: 0;
}

.memory-reminder-hero h3 {
  font-size: clamp(24px, 3vw, 36px);
}

.memory-reminder-hero p {
  margin-top: 8px;
  color: var(--muted);
  line-height: 1.5;
}

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

.daily-memory-grid article,
.memory-organization-strip {
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 16px;
  background: #fff;
  box-shadow: var(--soft-shadow);
}

.daily-memory-grid article > span,
.memory-organization-strip strong {
  color: var(--sea);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.completed-activity-list,
.memory-action-grid,
.memory-settings-grid,
.memory-organization-strip {
  display: grid;
  gap: 8px;
}

.completed-activity-list {
  margin-top: 12px;
}

.completed-activity-list div {
  position: relative;
  border-radius: 16px;
  padding: 10px 10px 10px 34px;
  background: #f7fbfa;
}

.completed-activity-list div::before {
  content: "✓";
  position: absolute;
  left: 10px;
  top: 10px;
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--mint);
  color: #1f6a48;
  font-size: 12px;
  font-weight: 900;
}

.completed-activity-list strong,
.completed-activity-list small,
.memory-organization-strip span {
  display: block;
}

.completed-activity-list small,
.memory-organization-strip span {
  margin-top: 3px;
  color: var(--muted);
}

.memory-action-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 12px 0;
}

.memory-action-grid button {
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0 12px;
  background: #fff;
  color: #24555d;
  font-weight: 850;
}

.memory-upload-card label,
.memory-settings-grid label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 850;
}

.memory-upload-card select,
.memory-settings-grid input[type="time"] {
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 0 10px;
  background: #fff;
  color: var(--ink);
}

.memory-settings-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 12px;
}

.memory-settings-grid label:not(:first-child) {
  min-height: 40px;
  display: flex;
  align-items: center;
  gap: 8px;
  border-radius: 16px;
  padding: 8px 10px;
  background: #f7fbfa;
}

.memory-ai-card {
  background:
    linear-gradient(135deg, rgba(223, 247, 245, 0.74), rgba(247, 234, 214, 0.72)),
    #fff !important;
}

.memory-ai-card p {
  margin-top: 8px;
  color: var(--muted);
  line-height: 1.5;
}

.memory-organization-strip {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

@media (max-width: 900px) {
  .memory-reminder-hero,
  .daily-memory-grid,
  .memory-organization-strip {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .memory-action-grid,
  .memory-settings-grid {
    grid-template-columns: 1fr;
  }
}

.reservation-reminder-panel {
  display: grid;
  gap: 16px;
  margin-top: 22px;
  border: 1px solid rgba(8, 127, 140, 0.16);
  border-radius: 28px;
  padding: 18px;
  background:
    linear-gradient(135deg, rgba(223, 247, 245, 0.72), rgba(247, 234, 214, 0.52)),
    #fff;
}

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

.reservation-reminder-card,
.smart-departure-card,
.reservation-ai-card,
.reservation-preferences-grid > div {
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 16px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: var(--soft-shadow);
}

.reservation-reminder-card.featured {
  background:
    linear-gradient(135deg, rgba(8, 127, 140, 0.10), rgba(255, 122, 92, 0.10)),
    #fff;
}

.reservation-reminder-card span,
.reservation-preferences-grid h4,
.smart-departure-card .eyebrow,
.reservation-ai-card .eyebrow {
  color: var(--sea);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.reservation-reminder-card h4,
.smart-departure-card h4,
.reservation-ai-card h4,
.reservation-preferences-grid h4,
.reservation-reminder-card p,
.smart-departure-card p,
.reservation-ai-card p {
  margin: 0;
}

.reservation-reminder-card h4,
.smart-departure-card h4,
.reservation-ai-card h4 {
  margin-top: 6px;
  color: var(--ink);
}

.reservation-reminder-card p,
.smart-departure-card p,
.reservation-ai-card p {
  margin-top: 8px;
  color: var(--muted);
  line-height: 1.5;
}

.reservation-reminder-card ul {
  margin: 12px 0;
  padding-left: 18px;
  color: var(--muted);
  line-height: 1.45;
}

.mini-action-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.mini-action-row button,
.reservation-preferences-grid button {
  min-height: 38px;
  border: 1px solid rgba(8, 127, 140, 0.18);
  border-radius: 999px;
  padding: 0 12px;
  background: #fff;
  color: #24555d;
  font-weight: 850;
}

.smart-departure-card,
.reservation-ai-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
}

.reservation-preferences-grid > div {
  display: grid;
  gap: 8px;
}

.reservation-preferences-grid label {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  border-radius: 16px;
  padding: 9px 10px;
  background: #f7fbfa;
  color: var(--muted);
  font-size: 13px;
  font-weight: 850;
}

@media (max-width: 900px) {
  .reservation-reminder-grid,
  .reservation-preferences-grid,
  .smart-departure-card,
  .reservation-ai-card {
    grid-template-columns: 1fr;
  }
}

.messages-hub {
  display: grid;
  gap: 16px;
  margin-bottom: 24px;
  border: 1px solid rgba(8, 127, 140, 0.16);
  border-radius: 28px;
  padding: 18px;
  background:
    linear-gradient(135deg, rgba(223, 247, 245, 0.64), rgba(255, 255, 255, 0.94)),
    #fff;
}

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

.message-search-row label {
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 850;
}

.message-search-row input {
  min-height: 46px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0 16px;
  background: #fff;
  color: var(--ink);
}

.message-tabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 5px;
  border-radius: 999px;
  background: #eef7f5;
}

.message-tabs button {
  min-height: 38px;
  border: 0;
  border-radius: 999px;
  padding: 0 16px;
  background: transparent;
  color: var(--muted);
  font-weight: 900;
  white-space: nowrap;
}

.message-tabs button.active {
  background: #fff;
  color: var(--ink);
  box-shadow: 0 8px 18px rgba(23, 32, 42, 0.09);
}

.messages-layout {
  display: grid;
  grid-template-columns: minmax(240px, 0.84fr) minmax(0, 1.6fr);
  gap: 14px;
  align-items: stretch;
}

.conversation-list,
.chat-workspace,
.message-support-grid article {
  border: 1px solid var(--line);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: var(--soft-shadow);
}

.conversation-list {
  display: grid;
  gap: 8px;
  align-content: start;
  padding: 10px;
  max-height: 568px;
  overflow: auto;
}

.conversation-card {
  width: 100%;
  min-height: 76px;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  border: 1px solid transparent;
  border-radius: 18px;
  padding: 9px;
  background: transparent;
  color: var(--ink);
  text-align: left;
}

.conversation-card.active {
  border-color: rgba(8, 127, 140, 0.26);
  background: #f1fbf8;
}

.conversation-card img,
.message-avatar {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  object-fit: cover;
}

.message-avatar {
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--sea), var(--reef));
  color: #06292f;
  font-weight: 950;
}

.conversation-card strong,
.conversation-card small,
.conversation-card em {
  display: block;
}

.conversation-card small,
.conversation-card em {
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  line-height: 1.35;
}

.conversation-card em {
  grid-column: 2;
  color: var(--sea);
  font-weight: 850;
}

.chat-workspace {
  display: grid;
  grid-template-rows: auto auto minmax(240px, 1fr) auto auto auto;
  gap: 10px;
  padding: 12px;
  min-height: 560px;
}

.chat-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
}

.chat-header h3,
.chat-header p,
.chat-header span,
.pinned-message strong,
.pinned-message span {
  margin: 0;
}

.chat-header span,
.typing-indicator {
  color: var(--muted);
  font-size: 13px;
}

.pinned-message {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  border-radius: 18px;
  padding: 10px 12px;
  background: #fff7df;
  color: #6c4f02;
}

.pinned-message button {
  min-height: 32px;
  border: 0;
  border-radius: 999px;
  padding: 0 12px;
  background: #fff;
  color: var(--ink);
  font-weight: 850;
}

.modern-messages {
  max-height: none;
  min-height: 240px;
  align-content: end;
}

.modern-messages .ai-msg {
  border: 1px solid rgba(8, 127, 140, 0.16);
  background: #effaf7;
}

.chat-tool-row {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 2px;
}

.chat-tool-row button {
  min-height: 36px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0 12px;
  background: #fff;
  color: #24555d;
  font-weight: 850;
  white-space: nowrap;
}

.typing-indicator {
  padding-left: 12px;
}

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

.message-support-grid article {
  display: grid;
  gap: 10px;
  padding: 16px;
}

.message-support-grid span {
  color: var(--sea);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.message-support-grid strong {
  color: var(--ink);
  line-height: 1.4;
}

@media (max-width: 980px) {
  .messages-layout,
  .message-support-grid {
    grid-template-columns: 1fr;
  }

  .conversation-list {
    max-height: none;
  }
}

@media (max-width: 680px) {
  .message-search-row,
  .chat-header,
  .pinned-message {
    grid-template-columns: 1fr;
  }

  .chat-workspace {
    min-height: 0;
  }
}

.profile-avatar-button {
  width: 42px;
  height: 42px;
  border: 1px solid var(--line);
  border-radius: 50%;
  padding: 0;
  background: #fff;
}

.profile-photo-manager,
.profile-photo-main,
.profile-photo-tools,
.profile-photo-appearances,
.profile-photo-policy-grid {
  display: grid;
  gap: 14px;
}

.profile-photo-manager {
  margin-bottom: 20px;
  border: 1px solid rgba(8, 127, 140, 0.16);
  border-radius: 28px;
  padding: 18px;
  background:
    linear-gradient(135deg, rgba(223, 247, 245, 0.70), rgba(255, 255, 255, 0.96)),
    #fff;
}

.profile-photo-main {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
}

.profile-photo-main h3,
.profile-photo-main p {
  margin: 0;
}

.profile-photo-main p:not(.eyebrow) {
  margin-top: 8px;
  color: var(--muted);
  line-height: 1.5;
}

.profile-photo-preview {
  width: 118px;
  height: 118px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(8, 127, 140, 0.16);
  border-radius: 50%;
  background: #fff;
  box-shadow: var(--soft-shadow);
  overflow: hidden;
}

.profile-photo-avatar {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  border-radius: inherit;
  background:
    linear-gradient(135deg, var(--reef), var(--sun), var(--sea));
  background-position: center;
  background-size: cover;
  color: #fff;
  font-size: 13px;
  font-weight: 950;
}

.profile-photo-avatar.has-photo {
  color: transparent;
  transform: scale(var(--profile-photo-scale, 1)) rotate(var(--profile-photo-rotation, 0deg));
}

.profile-photo-preview.rounded-square,
.profile-photo-avatar.rounded-square {
  border-radius: 24px;
}

.profile-photo-avatar.large {
  width: 72px;
  height: 72px;
  font-size: 18px;
}

.profile-photo-avatar.xl {
  width: 108px;
  height: 108px;
  font-size: 30px;
}

.profile-photo-avatar.small {
  width: 34px;
  height: 34px;
  font-size: 11px;
}

.file-action-button {
  min-height: 38px;
  display: inline-grid;
  place-items: center;
  border: 1px solid rgba(8, 127, 140, 0.18);
  border-radius: 999px;
  padding: 0 12px;
  background: #fff;
  color: #24555d;
  font-size: 13px;
  font-weight: 850;
  cursor: pointer;
}

.profile-photo-tools {
  grid-template-columns: minmax(0, 1fr) minmax(240px, 0.65fr) minmax(260px, 0.8fr);
}

.photo-drop-zone,
.photo-editor-card,
.photo-privacy-card,
.profile-photo-policy-grid div {
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 16px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: var(--soft-shadow);
}

.photo-drop-zone {
  min-height: 188px;
  display: grid;
  place-items: center;
  text-align: center;
  border-style: dashed;
}

.photo-drop-zone.is-dragging {
  border-color: var(--sea);
  background: #eefaf6;
}

.photo-drop-zone span,
.profile-photo-policy-grid span {
  color: var(--muted);
  line-height: 1.45;
}

.photo-privacy-card {
  display: grid;
  gap: 8px;
}

.photo-editor-card {
  display: grid;
  gap: 10px;
}

.photo-privacy-card h4 {
  margin: 0;
}

.photo-editor-card h4 {
  margin: 0;
}

.photo-editor-card label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 850;
}

.photo-editor-card input[type="range"],
.photo-editor-card select {
  width: 100%;
  min-height: 36px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  color: var(--ink);
}

.photo-editor-card select {
  padding: 0 10px;
}

.photo-editor-card span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.photo-privacy-card label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 850;
}

.photo-privacy-card label {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  border-radius: 14px;
  padding: 8px 10px;
  background: #f7fbfa;
}

.profile-photo-appearances,
.profile-photo-policy-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.profile-photo-appearances div {
  display: flex;
  gap: 8px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 10px;
  background: #fff;
  color: var(--ink);
  font-size: 13px;
}

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

.profile-photo-policy-grid strong,
.profile-photo-policy-grid span {
  display: block;
}

.profile-photo-policy-grid span {
  margin-top: 5px;
}

@media (max-width: 980px) {
  .profile-photo-tools,
  .profile-photo-appearances,
  .profile-photo-policy-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 680px) {
  .profile-photo-main {
    grid-template-columns: 1fr;
  }
}

.split-bill-panel {
  grid-column: 1 / -1;
  gap: 18px;
  overflow: visible;
}

.split-bill-hero {
  min-height: 170px;
  align-items: end;
  border: 1px solid rgba(8, 127, 140, 0.16);
  border-radius: 28px;
  padding: 22px;
  background:
    linear-gradient(115deg, rgba(5, 47, 55, 0.88), rgba(8, 127, 140, 0.76)),
    url("https://images.unsplash.com/photo-1551218808-94e220e084d2?auto=format&fit=crop&w=1200&q=78") center/cover;
  color: #fff;
  box-shadow: var(--soft-shadow);
}

.split-bill-hero h2,
.split-bill-hero p {
  margin: 0;
}

.split-bill-hero h2 {
  max-width: 720px;
  color: #fff;
  font-size: clamp(28px, 4vw, 48px);
  line-height: 1.03;
}

.split-bill-hero p:not(.eyebrow) {
  max-width: 660px;
  margin-top: 10px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 15px;
  line-height: 1.55;
}

.split-bill-hero .eyebrow {
  color: var(--reef);
}

.bill-hero-total {
  min-width: 170px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 24px;
  padding: 16px;
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(14px);
  text-align: right;
}

.bill-hero-total span,
.bill-hero-total small,
.bill-hero-total strong {
  display: block;
}

.bill-hero-total span,
.bill-hero-total small {
  color: rgba(255, 255, 255, 0.76);
  font-size: 12px;
  font-weight: 850;
}

.bill-hero-total strong {
  color: #fff;
  font-size: 34px;
  line-height: 1.1;
}

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

.bill-flow-strip div,
.receipt-command-card,
.bill-entry-card,
.split-bill-panel .receipt-summary > div,
.split-bill-panel .receipt-items-panel,
.split-bill-panel .payment-status-panel,
.split-bill-panel .receipt-history-panel,
.split-bill-panel .bill-total-grid div,
.split-bill-panel .bill-tools-grid > div,
.split-bill-panel .corporate-meal-rules div,
.split-bill-panel .split-preview div {
  border: 1px solid rgba(8, 127, 140, 0.14);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: var(--soft-shadow);
}

.bill-flow-strip div {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 12px;
}

.bill-flow-strip strong {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #dff7f5;
  color: var(--sea-dark);
}

.bill-flow-strip span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 850;
  line-height: 1.25;
}

.bill-redesign-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(330px, 0.78fr);
  gap: 16px;
  align-items: start;
}

.bill-main-column,
.bill-side-column,
.receipt-command-card,
.bill-entry-card {
  display: grid;
  gap: 14px;
}

.bill-side-column {
  position: sticky;
  top: 16px;
}

.receipt-command-card,
.bill-entry-card {
  padding: 16px;
}

.receipt-command-card {
  grid-template-columns: minmax(0, 0.7fr) minmax(280px, 1fr);
  align-items: center;
}

.receipt-command-card h3,
.bill-entry-card h3 {
  margin: 0;
}

.split-bill-panel .receipt-intake {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.split-bill-panel .receipt-intake button,
.split-bill-panel .payment-method-grid button {
  border-color: rgba(8, 127, 140, 0.16);
  border-radius: 999px;
  background: #fff;
  color: #24555d;
  box-shadow: 0 6px 16px rgba(31, 42, 51, 0.05);
}

.split-bill-panel .receipt-intake button:first-child,
.split-bill-panel .payment-method-grid button:first-child {
  background: var(--sea);
  color: #fff;
}

.split-bill-panel .receipt-summary {
  grid-template-columns: minmax(0, 1fr) minmax(160px, 0.32fr);
  gap: 10px;
}

.split-bill-panel .receipt-summary > div {
  padding: 16px;
}

.split-bill-panel .receipt-summary strong {
  font-size: 30px;
}

.split-bill-panel .bill-entry-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.split-bill-panel .bill-entry-grid label {
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 10px;
  background: #f7fbfa;
}

.split-bill-panel .bill-entry-grid input {
  min-height: 42px;
  border-radius: 14px;
}

.split-bill-panel .split-mode-tabs {
  border-radius: 999px;
  padding: 6px;
  background: #eef7f5;
}

.split-bill-panel .split-mode-tabs button {
  border-radius: 999px;
}

.split-bill-panel .bill-total-grid {
  grid-template-columns: 1fr;
}

.split-bill-panel .bill-total-grid div {
  padding: 14px;
}

.split-bill-panel .bill-total-grid strong {
  font-size: 28px;
}

.split-bill-panel .split-preview {
  max-height: 360px;
  overflow: auto;
  padding-right: 2px;
}

.split-bill-panel .split-preview div {
  grid-template-columns: minmax(0, 1fr) auto;
  padding: 12px;
}

.split-bill-panel .split-preview span,
.split-bill-panel .split-preview small {
  grid-column: 1 / -1;
}

.split-bill-panel .split-preview b {
  font-size: 22px;
}

.split-bill-panel .receipt-workspace {
  grid-template-columns: minmax(0, 1.08fr) minmax(260px, 0.74fr);
  gap: 14px;
}

.split-bill-panel .receipt-items-panel,
.split-bill-panel .payment-status-panel,
.split-bill-panel .receipt-history-panel {
  padding: 16px;
}

.split-bill-panel .receipt-item-list article {
  grid-template-columns: minmax(150px, 0.55fr) minmax(0, 1fr);
  border-radius: 18px;
  background: #f7fbfa;
}

.split-bill-panel .receipt-item-list article.needs-assignment {
  border-color: rgba(255, 122, 92, 0.38);
  background: #fff8f4;
}

.receipt-item-detail {
  display: grid;
  gap: 4px;
}

.receipt-item-detail strong,
.receipt-item-detail span,
.receipt-item-detail small {
  display: block;
}

.receipt-item-detail small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.recognition-chip {
  width: fit-content;
  border-radius: 999px;
  padding: 5px 9px;
  background: #dff7f5;
  color: var(--sea-dark) !important;
  font-size: 11px !important;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.needs-assignment .recognition-chip {
  background: #ffe0d7;
  color: #9a3a24 !important;
}

.receipt-claim-panel {
  display: grid;
  gap: 8px;
}

.split-bill-panel .receipt-claim-grid label {
  border-radius: 999px;
}

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

.receipt-item-actions button {
  min-height: 32px;
  border: 1px solid rgba(8, 127, 140, 0.16);
  border-radius: 999px;
  padding: 0 10px;
  background: #fff;
  color: #24555d;
  font-size: 12px;
  font-weight: 850;
}

.split-bill-panel .receipt-status-list div,
.split-bill-panel .receipt-history-list div {
  grid-template-columns: minmax(0, 1fr) auto;
  border-radius: 18px;
}

.split-bill-panel .receipt-status-list span,
.split-bill-panel .receipt-history-list span {
  grid-column: 1 / -1;
}

.split-bill-panel .bill-tools-grid {
  grid-template-columns: 1fr;
}

.split-bill-panel .bill-tools-grid > div {
  padding: 16px;
}

.split-bill-panel .payment-method-grid {
  grid-template-columns: 1fr;
}

.split-bill-panel #billMessage {
  border: 1px solid rgba(8, 127, 140, 0.16);
  border-radius: 18px;
  padding: 12px;
  background: #f7fbfa;
}

.split-bill-panel .corporate-meal-rules {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.split-bill-panel .corporate-meal-rules div {
  padding: 16px;
}

@media (max-width: 1120px) {
  .bill-redesign-grid,
  .receipt-command-card,
  .split-bill-panel .receipt-workspace {
    grid-template-columns: 1fr;
  }

  .bill-side-column {
    position: static;
  }

  .split-bill-panel .bill-total-grid,
  .split-bill-panel .bill-tools-grid,
  .split-bill-panel .payment-method-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .split-bill-hero,
  .bill-flow-strip,
  .split-bill-panel .receipt-intake,
  .split-bill-panel .receipt-summary,
  .split-bill-panel .bill-entry-grid,
  .split-bill-panel .bill-total-grid,
  .split-bill-panel .bill-tools-grid,
  .split-bill-panel .payment-method-grid,
  .split-bill-panel .corporate-meal-rules {
    grid-template-columns: 1fr;
  }

  .bill-hero-total {
    text-align: left;
  }
}

@media (max-width: 980px) {
  .private-driver-search,
  .private-driver-list {
    grid-template-columns: 1fr;
  }
}

/* Final vibrant theme layer */
.topbar,
.pwa-panel,
.panel,
.metrics article,
.travel-widget,
.explore-card,
.trip-tab-bar,
.auth-landing .auth-card,
.social-card {
  border-color: rgba(216, 231, 234, 0.96);
  background: rgba(255, 255, 255, 0.94);
  box-shadow: var(--soft-shadow);
}

.primary-button,
.chat-form button,
.explore-card-actions button:first-child,
.explore-card-actions button:nth-child(2),
.wallet-provisioning button:first-child {
  background: var(--travel-gradient);
  color: #fff;
  border-color: transparent;
}

.primary-button:nth-of-type(2n),
.button-row .primary-button:nth-child(2n),
#shareNowButton,
#sharePreviewNowButton {
  background: var(--sunset-gradient);
}

.ghost-button:hover,
.light-button:hover,
.icon-button:hover,
.explore-card-actions button:hover,
.wallet-provisioning button:hover {
  border-color: rgba(18, 199, 216, 0.42);
  color: #07556b;
}

.metrics article {
  background: linear-gradient(135deg, #ffffff, #ecfbff);
}

.metrics article:nth-child(2) {
  background: linear-gradient(135deg, #ffffff, #fff2e6);
}

.metrics article:nth-child(3) {
  background: linear-gradient(135deg, #ffffff, #f3efff);
}

.metrics article:nth-child(4) {
  background: linear-gradient(135deg, #ffffff, #edfff6);
}

.travel-widget {
  background: linear-gradient(180deg, #ffffff, #eefbff);
}

.travel-widget:nth-child(3n + 1) {
  background: linear-gradient(135deg, #ffffff, #fff4df);
}

.travel-widget:nth-child(3n + 2) {
  background: linear-gradient(135deg, #ffffff, #f4efff);
}

.ai-solo-manager,
.ai-caption-panel,
.memory-ai-card,
.ai-msg {
  background: linear-gradient(135deg, rgba(124, 92, 255, 0.14), rgba(47, 124, 246, 0.1), rgba(255, 95, 162, 0.1));
}

.daily-memory-panel,
.memory-upload-card,
.memory-settings-card,
.share-preview-panel {
  background: linear-gradient(135deg, #ffffff, #f7f0ff);
}

#walletPanel,
.virtual-card,
.wallet-total {
  background:
    radial-gradient(circle at top right, rgba(246, 200, 95, 0.22), transparent 34%),
    linear-gradient(135deg, #081b2d, #0e3552 58%, #10202f);
  color: #fff;
}

#walletPanel .eyebrow,
#walletPanel .small,
#walletPanel span,
#walletPanel p,
.wallet-total span,
.virtual-card span,
.virtual-card small {
  color: rgba(255, 255, 255, 0.78);
}

.wallet-breakdown div,
.bank-overview div,
.ledger-stats div,
.card-balance-grid div {
  background: linear-gradient(135deg, #ffffff, #effcf5);
}

.explore-panel,
.explore-filter-row,
.explore-context-grid {
  background: linear-gradient(180deg, rgba(233, 247, 255, 0.88), rgba(255, 244, 223, 0.76));
}

.explore-card {
  background: linear-gradient(180deg, #ffffff, #f0fcff);
}

.explore-tabs button.active,
#exploreTabs button.active,
.explore-subfilters button.active,
.trip-tab-bar button.active {
  background: var(--sunset-gradient);
  color: #fff;
  box-shadow: 0 12px 26px rgba(255, 107, 74, 0.22);
}

.messages,
.modern-messages {
  background: linear-gradient(180deg, #f8fdff, #fff7ee);
}

.msg:nth-child(2n) {
  background: #e9fbff;
  color: #0d6374;
}

.msg:last-child,
.pinned-message {
  background: #fff4d8;
  color: #624811;
}

.cruise-panel,
.cruise-hero-card,
.transport-panel,
.private-driver-panel {
  background: linear-gradient(135deg, #ffffff, #eafcff);
}

.enterprise-rbac,
.guest-portal-panel,
.corporate-rbac {
  background: linear-gradient(135deg, #ffffff, #edf7ff);
}

.status-pill,
.connection-status.connected,
.card-status span:first-child {
  background: #e8fbf3;
  color: #0b6d46;
}

.social-media-hub {
  background:
    linear-gradient(135deg, rgba(233, 247, 255, 0.68), rgba(247, 240, 255, 0.72)),
    #fff;
  border-radius: 22px;
  padding: 14px;
}

.platform-card,
.quick-share-grid button,
.privacy-options label {
  border-color: rgba(216, 231, 234, 0.96);
  background: #ffffff;
}

.quick-share-grid button.active {
  background: linear-gradient(135deg, rgba(18, 199, 216, 0.16), rgba(255, 209, 102, 0.18));
}

@media (prefers-reduced-motion: reduce) {
  .primary-button:hover,
  .ghost-button:hover,
  .light-button:hover,
  .icon-button:hover,
  .travel-widget:hover,
  .explore-card:hover,
  .nav .active,
  .nav a:hover,
  .nav button:hover {
    transform: none;
  }
}

/* Tropical Social Edition */
body[data-travel-theme="tropical"] {
  --sea: #0096c7;
  --aqua: #20d7d2;
  --reef: #ff744f;
  --pink: #ff4fad;
  --sun: #ffd45d;
  --palm: #1fc77e;
  --violet: #8357ff;
  --travel-gradient: linear-gradient(135deg, #0096c7, #20d7d2);
  --sunset-gradient: linear-gradient(135deg, #ff8a3d, #ff4fad);
  --ai-gradient: linear-gradient(135deg, #8357ff, #2f7cf6 54%, #ff4fad);
  --tropical-gradient: linear-gradient(135deg, #1fc77e, #20d7d2);
}

body[data-travel-theme="sunset"] {
  --sea: #7b2ff7;
  --aqua: #ffb703;
  --reef: #fb5607;
  --pink: #ff006e;
  --sun: #ffd166;
  --palm: #43aa8b;
  --violet: #8338ec;
  --travel-gradient: linear-gradient(135deg, #fb5607, #ff006e);
  --sunset-gradient: linear-gradient(135deg, #ffb703, #fb5607, #ff006e);
  --ai-gradient: linear-gradient(135deg, #8338ec, #ff006e);
  --tropical-gradient: linear-gradient(135deg, #ffb703, #43aa8b);
}

body[data-travel-theme="ocean"] {
  --sea: #0066ff;
  --aqua: #35e0ff;
  --reef: #ff6b6b;
  --pink: #7b61ff;
  --sun: #f5d76e;
  --palm: #18b777;
  --violet: #4455ff;
  --travel-gradient: linear-gradient(135deg, #0066ff, #35e0ff);
  --sunset-gradient: linear-gradient(135deg, #35e0ff, #f5d76e);
  --ai-gradient: linear-gradient(135deg, #4455ff, #7b61ff);
  --tropical-gradient: linear-gradient(135deg, #18b777, #35e0ff);
}

body[data-travel-theme="miami"] {
  --ink: #edf7ff;
  --muted: #adc1d2;
  --paper: #070918;
  --panel: #10152c;
  --line: rgba(255, 255, 255, 0.14);
  --sea: #00e5ff;
  --aqua: #00f5d4;
  --reef: #ff5a5f;
  --pink: #ff2bd6;
  --sun: #fee440;
  --palm: #00f5a0;
  --violet: #9b5de5;
  --travel-gradient: linear-gradient(135deg, #00e5ff, #9b5de5);
  --sunset-gradient: linear-gradient(135deg, #ff2bd6, #fee440);
  --ai-gradient: linear-gradient(135deg, #9b5de5, #ff2bd6, #00e5ff);
  --tropical-gradient: linear-gradient(135deg, #00f5a0, #00e5ff);
}

body[data-travel-theme="cruise"] {
  --sea: #0047ab;
  --aqua: #32d7ff;
  --reef: #ff7b54;
  --pink: #8e6cff;
  --sun: #f7c948;
  --palm: #2ec4b6;
  --violet: #4f46e5;
  --travel-gradient: linear-gradient(135deg, #0047ab, #32d7ff);
  --sunset-gradient: linear-gradient(135deg, #f7c948, #ff7b54);
  --ai-gradient: linear-gradient(135deg, #4f46e5, #32d7ff);
  --tropical-gradient: linear-gradient(135deg, #2ec4b6, #32d7ff);
}

body[data-travel-theme="festival"] {
  --sea: #00bbf9;
  --aqua: #00f5d4;
  --reef: #f15bb5;
  --pink: #f15bb5;
  --sun: #fee440;
  --palm: #00f5a0;
  --violet: #9b5de5;
  --travel-gradient: linear-gradient(135deg, #00bbf9, #00f5d4);
  --sunset-gradient: linear-gradient(135deg, #fee440, #f15bb5);
  --ai-gradient: linear-gradient(135deg, #9b5de5, #f15bb5, #00bbf9);
  --tropical-gradient: linear-gradient(135deg, #00f5a0, #fee440);
}

body[data-travel-theme="miami"] .topbar,
body[data-travel-theme="miami"] .panel,
body[data-travel-theme="miami"] .travel-widget,
body[data-travel-theme="miami"] .social-card,
body[data-travel-theme="miami"] .explore-card {
  background: rgba(16, 21, 44, 0.94);
  color: #edf7ff;
}

body[data-travel-theme="miami"] .small,
body[data-travel-theme="miami"] .travel-widget p,
body[data-travel-theme="miami"] .social-card p {
  color: #adc1d2;
}

.travel-social-strip,
.theme-studio,
.travel-badge-panel {
  display: grid;
  gap: 12px;
  border: 1px solid rgba(216, 231, 234, 0.96);
  border-radius: 22px;
  padding: 16px;
  background:
    radial-gradient(circle at top right, rgba(255, 79, 173, 0.16), transparent 34%),
    linear-gradient(135deg, rgba(236, 251, 255, 0.96), rgba(255, 244, 223, 0.96));
  box-shadow: var(--soft-shadow);
}

.travel-social-strip {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0 0 18px;
}

.travel-social-strip article {
  min-height: 104px;
  display: grid;
  gap: 6px;
  align-content: center;
  border-radius: 18px;
  padding: 14px;
  background: rgba(255, 255, 255, 0.74);
}

.travel-social-strip span {
  font-size: 26px;
}

.travel-social-strip strong,
.travel-social-strip small {
  display: block;
}

.travel-social-strip small {
  color: var(--muted);
  font-weight: 750;
}

.travel-social-strip article:nth-child(2) {
  background: linear-gradient(135deg, #fff, #ffe9f5);
}

.travel-social-strip article:nth-child(3) {
  background: linear-gradient(135deg, #fff, #fff4cf);
}

.travel-social-strip article:nth-child(4) {
  background: linear-gradient(135deg, #fff, #edfaff);
}

.theme-studio {
  grid-template-columns: minmax(0, .9fr) minmax(220px, .35fr);
  margin-bottom: 14px;
}

.theme-studio > p {
  grid-column: 1 / -1;
}

.theme-studio label {
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 900;
}

.theme-studio select {
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 0 12px;
  background: #fff;
  color: #10202f;
}

.theme-swatch-grid,
.travel-badge-grid {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.theme-swatch-grid button {
  min-height: 52px;
  border: 1px solid var(--line);
  border-radius: 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: #fff;
  color: #10202f;
  font-weight: 900;
}

.theme-swatch-grid button.active {
  border-color: transparent;
  background: var(--travel-gradient);
  color: #fff;
  box-shadow: var(--shadow-bright);
}

.theme-swatch-grid span {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--travel-gradient);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.42);
}

[data-theme-choice="sunset"] span { background: linear-gradient(135deg, #ffb703, #fb5607, #ff006e); }
[data-theme-choice="ocean"] span { background: linear-gradient(135deg, #0066ff, #35e0ff); }
[data-theme-choice="miami"] span { background: linear-gradient(135deg, #00e5ff, #ff2bd6, #fee440); }
[data-theme-choice="cruise"] span { background: linear-gradient(135deg, #0047ab, #32d7ff, #f7c948); }
[data-theme-choice="festival"] span { background: linear-gradient(135deg, #9b5de5, #f15bb5, #fee440, #00f5d4); }

.travel-badge-panel {
  margin-bottom: 14px;
  background:
    radial-gradient(circle at 12% 0%, rgba(255, 212, 93, 0.22), transparent 34%),
    linear-gradient(135deg, #ffffff, #fff0fa);
}

.travel-badge-grid span {
  min-height: 44px;
  display: flex;
  align-items: center;
  border-radius: 999px;
  padding: 0 12px;
  background: #fff;
  box-shadow: 0 8px 20px rgba(16, 32, 47, 0.07);
  color: #10202f;
  font-size: 13px;
  font-weight: 900;
}

.travel-widget h3::before,
.explore-card-main h3::before {
  margin-right: 6px;
}

.flight-widget h3::before { content: "✈️"; }
.weather-widget h3::before { content: "🌤"; }
.budget-widget h3::before { content: "💰"; }
.memories-widget .widget-toolbar span::before { content: "📸 "; }
.ai-widget .widget-toolbar span::before { content: "🤖 "; }
.cruise-widget h3::before { content: "🚢"; }
.corporate-widget h3::before { content: "💼"; }

@media (max-width: 900px) {
  .travel-social-strip,
  .theme-studio,
  .theme-swatch-grid,
  .travel-badge-grid {
    grid-template-columns: 1fr;
  }
}

/* Travel-Drip brand identity refresh */
.brand-logo-wrap,
.brand-logo,
.auth-brand-logo,
.loader-logo {
  min-width: 0;
}

.sidebar .brand .brand-logo-wrap {
  width: min(210px, 100%);
}

.sidebar .brand .brand-copy {
  display: none;
}

.auth-brand .auth-brand-logo {
  width: clamp(188px, 22vw, 292px);
}

.loader-card .loader-logo {
  width: 116px;
  margin: 0 auto 10px;
}

.admin-brand .admin-wordmark {
  width: min(300px, 72vw);
}

.admin-brand .brand-copy {
  display: block;
}

.admin-brand .brand-copy strong {
  display: none;
}

.admin-brand .brand-copy small {
  display: block;
}

@media (max-width: 720px) {
  .sidebar .brand .brand-logo-wrap {
    width: 42px;
  }

  .auth-brand .auth-brand-logo {
    width: 208px;
  }

  .loader-card .loader-logo {
    width: 96px;
  }
}

/* Event planning production flow */
.trip-creation-form textarea {
  min-height: 96px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  resize: vertical;
}

.trip-creation-form .wide,
.event-specific-fields {
  grid-column: 1 / -1;
}

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

.event-requirements label {
  min-height: 48px;
  align-items: center;
  grid-template-columns: auto 1fr;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.72);
}

.event-specific-fields {
  padding: 14px;
  border: 1px solid rgba(0, 150, 199, 0.22);
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(0, 180, 216, 0.08), rgba(255, 111, 97, 0.08));
}

.event-specific-fields h4 {
  margin: 0 0 10px;
  color: var(--ink);
}

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

@media (max-width: 900px) {
  .event-requirements,
  #eventSpecificFieldGrid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 1180px) {
  .transport-dashboard-grid {
    grid-template-columns: 1fr;
  }

  .transport-detail-empty {
    min-height: 180px;
  }
}

@media (max-width: 820px) {
  .transport-record-card {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .transport-record-card > div:nth-child(2) {
    grid-column: 1 / -1;
  }

  .transport-pass-card,
  .transport-detail-header,
  .wallet-pass-row {
    grid-template-columns: 1fr;
  }

  .wallet-pass-row {
    align-items: stretch;
  }
}

@media (max-width: 980px) {
  .transport-hub-header,
  .transport-summary-strip,
  .transport-search-row,
  .transport-dashboard-grid,
  .transport-timeline-panel,
  .transport-security-grid {
    grid-template-columns: 1fr;
  }

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

@media (max-width: 680px) {
  .transport-confirmation-hub {
    padding: 12px;
    border-radius: 14px;
  }

  .transport-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 4px;
  }

  .transport-tabs button {
    flex: 0 0 auto;
  }

  .transport-record-card,
  .transport-detail-header,
  .transport-pass-card,
  .transport-detail-grid,
  .transport-document-list,
  .transport-timeline {
    grid-template-columns: 1fr;
  }

  .mock-qr {
    width: 72px;
  }
}

/* Smart ride share hub redesign */
.ride-hub-redesign {
  display: grid;
  gap: 14px;
}

.ride-toolbar,
.ride-overview-grid,
.ride-two-column-grid,
.ride-card-heading,
.ride-hub-list article,
.ride-recommendation-grid,
.ride-timeline-list,
.ride-history-list,
.ride-notification-list {
  display: grid;
  gap: 12px;
}

.ride-toolbar {
  grid-template-columns: minmax(0, 1.2fr) minmax(150px, 0.4fr) minmax(150px, 0.4fr);
  padding: 12px;
  border: 1px solid rgba(8, 127, 140, 0.12);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 16px 34px rgba(15, 23, 42, 0.06);
}

.ride-toolbar label,
.ride-clean-card label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.ride-toolbar input,
.ride-toolbar select {
  min-width: 0;
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 0 11px;
  background: #fff;
  color: var(--ink);
}

.ride-overview-grid,
.ride-two-column-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
}

.ride-clean-card,
.ride-account-panel,
.shared-ride-panel,
.private-driver-panel,
.ride-assistant-panel > div {
  border: 1px solid rgba(8, 127, 140, 0.12);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 18px 38px rgba(15, 23, 42, 0.06);
}

.ride-clean-card {
  display: grid;
  gap: 14px;
  padding: 14px;
}

.ride-card-heading {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
}

.ride-card-heading h3,
.ride-clean-card h3,
.private-driver-panel h3 {
  margin: 0;
}

.ride-card-heading .ghost-button,
.ride-map-card .ghost-button {
  min-height: 36px;
  border-radius: 10px;
}

.ride-hub-list article,
.ride-recommendation-grid article,
.ride-timeline-list button,
.ride-history-list button,
.ride-notification-list button,
.ride-empty-state {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  padding: 12px;
  text-align: left;
}

.ride-hub-list article {
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
}

.ride-hub-list span,
.ride-recommendation-grid span {
  display: inline-flex;
  width: fit-content;
  border-radius: 999px;
  padding: 4px 8px;
  background: #e9f7f3;
  color: var(--sea-dark);
  font-size: 11px;
  font-weight: 900;
}

.ride-hub-list small,
.ride-recommendation-grid small,
.ride-timeline-list small,
.ride-history-list span,
.ride-notification-list span,
.ride-empty-state span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.ride-hub-list button,
.ride-recommendation-grid button,
.ride-timeline-list button,
.ride-history-list button,
.ride-notification-list button {
  min-height: 36px;
  border: 1px solid rgba(8, 127, 140, 0.16);
  border-radius: 10px;
  background: #fff;
  color: #24555d;
  font-weight: 850;
}

.ride-hub-list article > button,
.ride-recommendation-grid button {
  background: var(--reef);
  color: #071116;
}

.ride-map-preview {
  position: relative;
  min-height: 232px;
  overflow: hidden;
  border: 1px solid rgba(0, 150, 199, 0.14);
  border-radius: 14px;
  background:
    linear-gradient(90deg, rgba(8, 127, 140, 0.08) 1px, transparent 1px),
    linear-gradient(0deg, rgba(8, 127, 140, 0.08) 1px, transparent 1px),
    radial-gradient(circle at 28% 32%, rgba(255, 111, 97, 0.26), transparent 16%),
    radial-gradient(circle at 72% 66%, rgba(0, 180, 216, 0.28), transparent 18%),
    #f7fcfb;
  background-size: 42px 42px, 42px 42px, auto, auto, auto;
}

.ride-map-card.is-expanded .ride-map-preview {
  min-height: 360px;
}

.ride-map-pin {
  position: absolute;
  z-index: 2;
  border-radius: 999px;
  padding: 7px 10px;
  background: #071116;
  color: #fff;
  font-size: 12px;
  font-weight: 900;
  box-shadow: 0 10px 24px rgba(7, 17, 22, 0.18);
}

.ride-map-pin.pickup {
  left: 12%;
  top: 24%;
}

.ride-map-pin.dropoff {
  right: 12%;
  bottom: 22%;
}

.ride-map-route {
  position: absolute;
  inset: 34% 18% 34% 18%;
  border-top: 4px dashed rgba(0, 150, 199, 0.62);
  transform: rotate(17deg);
  transform-origin: center;
}

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

.ride-recommendation-grid article {
  display: grid;
  gap: 8px;
}

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

.ride-timeline-list button,
.ride-history-list button,
.ride-notification-list button {
  display: grid;
  gap: 6px;
}

.ride-timeline-list button span {
  color: var(--sea-dark);
  font-size: 12px;
  font-weight: 900;
}

.ride-history-list button {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}

.ride-history-list button span {
  grid-column: 1 / -1;
}

.ride-notification-list {
  grid-template-columns: 1fr;
}

.ride-destination-row,
.ride-location-grid,
.ride-entry-grid {
  gap: 10px;
}

.ride-destination-row select,
.ride-location-grid input,
.ride-entry-grid input {
  min-height: 42px;
  border-radius: 10px;
}

.ride-provider-list button,
.shared-ride-members label,
.private-driver-list article,
.private-driver-empty,
.ride-estimate-grid div,
.bill-total-grid div {
  border-radius: 12px;
}

.ride-estimate-grid div {
  border: 1px solid var(--line);
  background: #fff;
  padding: 12px;
}

.ride-account-panel,
.shared-ride-panel,
.private-driver-panel {
  padding: 14px;
}

.private-driver-panel {
  background: #fff;
}

@media (max-width: 1080px) {
  .ride-toolbar,
  .ride-overview-grid,
  .ride-two-column-grid,
  .ride-recommendation-grid,
  .ride-timeline-list {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .ride-card-heading,
  .ride-hub-list article,
  .ride-destination-row,
  .ride-account-panel,
  .shared-ride-panel,
  .ride-location-grid,
  .ride-entry-grid,
  .ride-estimate-grid,
  .shared-ride-members,
  .ride-assistant-panel {
    grid-template-columns: 1fr;
  }

  .ride-account-actions {
    justify-content: start;
  }

  .ride-clean-card,
  .ride-toolbar {
    padding: 12px;
    border-radius: 12px;
  }

  .ride-map-preview {
    min-height: 190px;
  }
}

/* Compact transportation recommendation and private driver panels */
.ride-two-column-grid {
  gap: 12px;
  align-items: stretch;
}

.ride-two-column-grid > .ride-clean-card,
.ride-two-column-grid > .private-driver-panel {
  min-width: 0;
  height: 100%;
  padding: 12px;
  gap: 10px;
  border-radius: 12px;
}

.ride-two-column-grid .ride-card-heading,
.ride-two-column-grid .private-driver-panel .section-heading.compact {
  gap: 8px;
  align-items: start;
  margin: 0;
}

.ride-two-column-grid .ride-card-heading h3,
.ride-two-column-grid .private-driver-panel h3 {
  font-size: 18px;
  line-height: 1.18;
}

.ride-two-column-grid .ride-card-heading .ghost-button,
.ride-two-column-grid .private-driver-panel .ghost-button {
  min-height: 34px;
  padding-inline: 10px;
}

.ride-two-column-grid .ride-recommendation-grid {
  grid-template-columns: 1fr;
  gap: 8px;
}

.ride-two-column-grid .ride-recommendation-grid article {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px 10px;
  padding: 10px;
  border-radius: 10px;
}

.ride-two-column-grid .ride-recommendation-grid article span,
.ride-two-column-grid .ride-recommendation-grid article strong,
.ride-two-column-grid .ride-recommendation-grid article small {
  grid-column: 1;
}

.ride-two-column-grid .ride-recommendation-grid article span {
  border-radius: 8px;
  padding: 3px 7px;
}

.ride-two-column-grid .ride-recommendation-grid article button {
  grid-column: 2;
  grid-row: 1 / 4;
  min-height: 34px;
  white-space: nowrap;
}

.ride-two-column-grid .private-driver-search {
  grid-template-columns: minmax(0, 1fr) minmax(120px, 0.42fr) minmax(140px, 0.5fr);
  gap: 8px;
}

.ride-two-column-grid .private-driver-search label {
  gap: 5px;
}

.ride-two-column-grid .private-driver-search input,
.ride-two-column-grid .private-driver-search select {
  min-height: 38px;
  border-radius: 10px;
}

.ride-two-column-grid .private-driver-list {
  grid-template-columns: 1fr;
  gap: 8px;
}

.ride-two-column-grid .private-driver-list article,
.ride-two-column-grid .private-driver-empty {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px 10px;
  padding: 10px;
  border-radius: 10px;
}

.ride-two-column-grid .private-driver-list article > b {
  font-size: 17px;
  white-space: nowrap;
}

.ride-two-column-grid .private-driver-actions {
  grid-column: 1 / -1;
  gap: 6px;
}

.ride-two-column-grid .private-driver-actions button {
  min-height: 32px;
  border-radius: 9px;
  padding-inline: 10px;
}

.ride-two-column-grid #privateDriverMessage {
  margin: 0;
}

@media (max-width: 1180px) {
  .ride-two-column-grid .private-driver-search {
    grid-template-columns: 1fr;
  }

  .ride-two-column-grid .ride-recommendation-grid article,
  .ride-two-column-grid .private-driver-list article,
  .ride-two-column-grid .private-driver-empty {
    grid-template-columns: 1fr;
  }

  .ride-two-column-grid .ride-recommendation-grid article button,
  .ride-two-column-grid .private-driver-actions {
    grid-column: 1;
    grid-row: auto;
  }
}

/* Clean group transportation fare split panel */
.ride-hub-redesign .ride-clean-card:has(#sharedRideMembers) {
  gap: 10px;
  padding: 12px;
  border-radius: 12px;
}

.ride-hub-redesign .ride-clean-card:has(#sharedRideMembers) .ride-card-heading {
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(8, 127, 140, 0.1);
}

.ride-hub-redesign .ride-clean-card:has(#sharedRideMembers) .ride-card-heading h3 {
  font-size: 18px;
  line-height: 1.18;
}

.ride-hub-redesign .ride-clean-card:has(#sharedRideMembers) .ghost-button {
  min-height: 34px;
  border-radius: 10px;
  padding-inline: 10px;
}

.ride-hub-redesign .shared-ride-panel {
  grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
  gap: 12px;
  align-items: stretch;
  border: 0;
  border-radius: 0;
  padding: 0;
  background: transparent;
  box-shadow: none;
}

.ride-hub-redesign .shared-ride-panel > div:first-child {
  display: grid;
  align-content: center;
  gap: 5px;
  min-width: 0;
  padding: 10px;
  border: 1px solid rgba(8, 127, 140, 0.12);
  border-radius: 10px;
  background: #fff;
}

.ride-hub-redesign .shared-ride-panel h3 {
  font-size: 17px;
  line-height: 1.2;
}

.ride-hub-redesign .shared-ride-members {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.ride-hub-redesign .shared-ride-members label {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 4px 8px;
  padding: 9px 10px;
  border-radius: 10px;
  background: #fff;
}

.ride-hub-redesign .shared-ride-members label strong,
.ride-hub-redesign .shared-ride-members label span {
  min-width: 0;
}

.ride-hub-redesign .shared-ride-members label span {
  grid-column: 2;
  font-size: 11px;
}

@media (max-width: 900px) {
  .ride-hub-redesign .shared-ride-panel,
  .ride-hub-redesign .shared-ride-members {
    grid-template-columns: 1fr;
  }
}

/* Global space optimization pass */
main {
  padding: clamp(14px, 2vw, 20px) clamp(14px, 2.2vw, 22px) clamp(20px, 3vw, 28px);
}

.topbar {
  gap: 12px;
  margin-bottom: 12px;
}

.global-destination-header {
  min-height: 88px;
  margin: -2px 0 12px;
  padding: 10px;
  border-radius: 16px;
}

.global-destination-header img {
  height: 68px;
  border-radius: 12px;
}

.auth-panel,
.pwa-panel,
.panel {
  margin-bottom: 12px;
}

.panel,
.auth-panel,
.pwa-panel,
.travel-widget,
.destination-card,
.metrics article {
  border-radius: 8px;
}

.panel {
  padding: 14px;
}

.dashboard-widgets,
.bank-grid,
.content-grid {
  gap: 12px;
  margin: 12px 0;
}

.widget-grid {
  gap: 10px;
}

.travel-widget {
  min-height: auto;
  gap: 8px;
  padding: 12px;
  border-radius: 12px;
}

.main-stack,
.right-stack,
.ride-share-panel,
.ride-hub-redesign,
.transport-confirmation-hub {
  gap: 12px;
}

.section-heading {
  gap: 10px;
}

.compact {
  margin-bottom: 8px;
}

.ledger-stats,
.bank-overview,
.wallet-breakdown,
.navigation-status-grid,
.security-status-grid,
.backend-summary-grid,
.go-live-summary-grid,
.policy-summary-grid {
  gap: 8px;
  margin: 8px 0;
}

.transport-confirmation-hub,
.ride-clean-card,
.private-driver-panel,
.transport-list-panel,
.transport-detail-panel,
.transport-timeline-panel {
  padding: 12px;
}

.transport-summary-strip,
.transport-search-row,
.transport-dashboard-grid,
.transport-security-grid,
.transport-timeline,
.ride-overview-grid,
.ride-two-column-grid,
.ride-location-grid,
.ride-entry-grid,
.ride-estimate-grid,
.shared-ride-members,
.payment-method-grid,
.bill-total-grid {
  gap: 10px;
}

.transport-summary-strip button,
.transport-record-card,
.transport-timeline button,
.transport-security-grid button,
.ride-hub-list article,
.ride-recommendation-grid article,
.private-driver-list article,
.private-driver-empty,
.shared-ride-members label {
  padding: 10px;
}

.transport-summary-strip button,
.transport-security-grid button {
  min-height: auto;
}

.transport-timeline button {
  min-height: 88px;
}

.button-row,
.transport-hub-actions,
.transport-actions,
.ride-account-actions,
.private-driver-actions,
.global-destination-actions,
.top-actions,
.hero-actions {
  gap: 6px;
}

.primary-button,
.ghost-button,
.light-button,
.icon-button {
  min-height: 40px;
  padding-inline: 12px;
}

input,
select,
textarea,
.transport-search-row input,
.transport-search-row select,
.ride-toolbar input,
.ride-toolbar select,
.private-driver-search input,
.private-driver-search select,
.ride-destination-row select,
.ride-location-grid input,
.ride-entry-grid input {
  min-height: 40px;
}

.split-preview,
.receipt-item-list,
.receipt-status-list,
.receipt-history-list,
.transport-record-list,
.private-driver-list,
.ride-hub-list,
.ride-history-list,
.ride-notification-list,
.notification-mini-list,
.ai-reminder-list {
  gap: 8px;
}

.metrics,
.event-requirements,
.theme-swatch-grid,
.travel-badge-grid {
  gap: 8px;
}

@media (min-width: 1320px) {
  .content-grid {
    grid-template-columns: minmax(0, 1.42fr) minmax(320px, 0.58fr);
  }

  .bank-grid {
    grid-template-columns: minmax(0, 1.2fr) minmax(300px, 0.8fr);
  }
}

@media (max-width: 900px) {
  main {
    padding: 12px 12px 78px;
  }

  .topbar,
  .global-destination-header,
  .auth-panel,
  .pwa-panel,
  .panel {
    margin-bottom: 10px;
  }

  .global-destination-header {
    grid-template-columns: 88px minmax(0, 1fr);
    min-height: auto;
  }

  .global-destination-header img {
    width: 88px;
    height: 58px;
  }

  .global-destination-actions {
    grid-column: 1 / -1;
  }

  .panel,
  .transport-confirmation-hub,
  .ride-clean-card,
  .private-driver-panel {
    padding: 10px;
  }
}

@media (max-width: 560px) {
  main {
    padding-inline: 10px;
  }

  .topbar {
    gap: 8px;
  }

  .search {
    min-height: 40px;
  }

  .section-heading,
  .ride-card-heading,
  .transport-hub-header {
    gap: 8px;
  }

  .primary-button,
  .ghost-button,
  .light-button,
  .icon-button {
    min-height: 38px;
  }
}

/* Travel tab right rail cleanup */
.map-panel {
  border-radius: 12px;
}

.map-panel .map {
  height: 172px;
}

.map-panel h2,
.map-panel p {
  padding-inline: 12px;
}

.map-panel h2 {
  margin-top: 10px;
  margin-bottom: 4px;
}

.map-panel p {
  padding-bottom: 12px;
  line-height: 1.35;
}

#virtualCard[data-route-support] {
  gap: 10px;
}

#virtualCard[data-route-support] .virtual-card {
  min-height: 178px;
  gap: 18px;
}

/* Smaller Smart route card */
.right-stack .map-panel {
  border-radius: 10px;
}

.right-stack .map-panel .map {
  height: 118px;
}

.right-stack .map-panel h2 {
  margin: 7px 0 2px;
  padding-inline: 10px;
  font-size: 18px;
  line-height: 1.15;
}

.right-stack .map-panel p {
  margin: 0;
  padding: 0 10px 10px;
  font-size: 12px;
  line-height: 1.3;
}

.right-stack .map-panel .pin {
  width: 24px;
  height: 24px;
  font-size: 11px;
}

/* Dense mode v2: auth, dashboard, lists, and tall panels */
.auth-landing-nav {
  min-height: 96px;
  padding: 22px 30px;
  gap: 16px;
}

.auth-landing-grid {
  min-height: calc(100vh - 96px);
  padding: 22px 30px 30px;
  gap: 18px;
}

.auth-carousel {
  min-height: min(620px, calc(100vh - 156px));
  border-radius: 18px;
}

.auth-carousel-overlay {
  padding: 28px;
}

.auth-pill {
  min-height: 34px;
  margin-bottom: 14px;
  padding-inline: 12px;
}

.auth-carousel-overlay > p:not(.auth-pill) {
  margin-top: 14px;
}

.auth-carousel blockquote,
.auth-travel-tags {
  margin-top: 16px;
}

.auth-landing .auth-card {
  max-height: calc(100vh - 156px);
  padding: 18px;
  border-radius: 14px;
}

.auth-link-button,
.auth-start-button {
  min-height: 44px;
  border-radius: 14px;
  padding-inline: 16px;
  font-size: 20px;
}

.hero {
  min-height: 320px;
}

.hero-copy {
  padding: 22px;
}

.hero-copy p,
.destination-banner-meta {
  margin-top: 12px;
}

.destination-banner-meta {
  margin-bottom: 12px;
}

.metrics article,
.ledger-stats article,
.bank-overview article,
.wallet-breakdown div,
.navigation-status-grid div,
.security-status-grid article,
.backend-summary-grid article,
.go-live-summary-grid article,
.policy-summary-grid article {
  padding: 10px;
}

.trip-row,
.ledger-list div,
.member-table div,
.announcement-list div,
.faq-list div,
.rule-list div,
.audit-log div,
.shared-wallet-ledger div,
.card-ledger div,
.card-rules div,
.notification-mini-list span,
.ai-reminder-list div {
  padding: 8px;
}

.trip-wallet-card,
.virtual-card,
.receipt-command-card,
.smart-departure-card,
.reservation-ai-card {
  min-height: auto;
}

.virtual-card {
  min-height: 168px;
  gap: 16px;
  padding: 14px;
}

.card-balance-grid div,
.wallet-provisioning button,
.control-grid label,
.payment-method-grid button {
  min-height: 38px;
}

.spending-controls,
.card-rules,
.card-ledger,
.shared-wallet-ledger,
.ledger-list,
.rule-list,
.announcement-list,
.faq-list,
.itinerary,
.member-table {
  gap: 6px;
}

.auth-form,
.funds-form,
.trip-creation-form,
.private-driver-search,
.transport-search-row,
.ride-toolbar,
.dashboard-controls {
  gap: 8px;
}

@media (min-width: 1180px) {
  .widget-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .travel-widget.is-large {
    grid-column: span 2;
  }
}

@media (max-width: 900px) {
  .auth-landing-nav {
    min-height: 76px;
    padding: 14px 16px;
  }

  .auth-landing-grid {
    min-height: auto;
    padding: 14px 16px 18px;
    gap: 12px;
  }

  .auth-carousel {
    min-height: 340px;
  }

  .auth-carousel-overlay {
    padding: 20px;
  }

  .auth-landing .auth-card {
    max-height: none;
    padding: 14px;
  }
}

@media (max-width: 560px) {
  .auth-carousel {
    min-height: 280px;
    border-radius: 14px;
  }

  .auth-link-button,
  .auth-start-button {
    min-height: 40px;
    font-size: 17px;
  }

  .hero {
    min-height: 280px;
  }
}

/* Login product messaging */
.auth-product-message {
  display: grid;
  gap: 7px;
  margin: 2px 0 4px;
  padding: 12px;
  border: 1px solid rgba(8, 189, 184, 0.18);
  border-radius: 12px;
  background: rgba(8, 189, 184, 0.07);
}

.auth-product-message > span {
  color: #0f8e8b;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.auth-product-message h3 {
  margin: 0;
  color: #102c35;
  font-size: clamp(18px, 1.6vw, 24px);
  line-height: 1.15;
}

.auth-product-message p {
  margin: 0;
  color: #5b6e75;
  font-size: 13px;
  line-height: 1.4;
}

.auth-capability-details summary {
  display: none;
}

.auth-product-points {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  margin-top: 3px;
}

.auth-product-points span {
  min-height: 30px;
  display: flex;
  align-items: center;
  padding: 6px 8px;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.72);
  color: #24444c;
  font-size: 12px;
  font-weight: 800;
}

.auth-new-user-note {
  margin-top: 0;
}

@media (max-width: 900px) {
  .auth-product-message {
    padding: 10px;
  }

  .auth-capability-details summary {
    display: flex;
    align-items: center;
    min-height: 34px;
    color: #0b827f;
    cursor: pointer;
    font-size: 13px;
    font-weight: 900;
  }

  .auth-capability-details:not([open]) .auth-product-points {
    display: none;
  }

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

@media (max-width: 560px) {
  .auth-product-message h3 {
    font-size: 17px;
  }

  .auth-product-message p,
  .auth-product-points span {
    font-size: 12px;
  }
}

/* Let's Plan toolbar and hub */
.topbar {
  grid-template-columns: minmax(220px, 1fr) auto auto;
}

.lets-plan-button {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 0;
  border-radius: 999px;
  padding: 0 18px;
  background: linear-gradient(135deg, #13d4d0, #ff8a5c);
  color: #061015 !important;
  box-shadow: 0 14px 32px rgba(0, 119, 182, 0.2);
  font-size: 14px;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
}

.lets-plan-button strong {
  display: inline-block;
  color: inherit;
  font: inherit;
}

.lets-plan-button span {
  font-size: 15px;
  line-height: 1;
}

.lets-plan-button:hover,
.lets-plan-button.active {
  color: #061015 !important;
  transform: translateY(-1px);
  box-shadow: 0 18px 40px rgba(255, 107, 74, 0.24);
}

.mobile-nav button[data-target="letsPlan"] {
  background: linear-gradient(135deg, #13d4d0, #ff8a5c);
  color: #061015 !important;
  font-weight: 950;
}

.mobile-nav button[data-target="letsPlan"].active {
  color: #061015 !important;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.22);
}

.lets-plan-panel {
  display: grid;
  gap: 16px;
}

.lets-plan-hero {
  display: grid;
  gap: 10px;
  padding: 18px;
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(0, 180, 216, 0.14), rgba(255, 107, 74, 0.12)),
    #fff;
}

.lets-plan-hero h2 {
  margin: 0;
  color: var(--ink);
  font-size: clamp(30px, 4vw, 48px);
  line-height: 1.05;
}

.lets-plan-hero p {
  max-width: 880px;
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}

.lets-plan-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

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

.lets-plan-group {
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
}

.lets-plan-group > span {
  color: var(--sea-dark);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.lets-plan-group > div {
  display: grid;
  gap: 8px;
}

.lets-plan-group button {
  min-height: 72px;
  display: grid;
  gap: 4px;
  border: 1px solid rgba(0, 119, 182, 0.12);
  border-radius: 12px;
  padding: 10px;
  background: rgba(248, 253, 255, 0.9);
  color: var(--ink);
  text-align: left;
}

.lets-plan-group button:hover,
.lets-plan-group button:focus-visible {
  border-color: rgba(0, 180, 216, 0.42);
  background: #fff;
  box-shadow: 0 12px 26px rgba(0, 119, 182, 0.12);
}

.lets-plan-group strong {
  font-size: 14px;
}

.lets-plan-group small {
  color: var(--muted);
  line-height: 1.35;
}

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

.lets-plan-summary article {
  display: grid;
  gap: 6px;
  padding: 12px;
  border-radius: 14px;
  background: rgba(255, 244, 226, 0.7);
}

.lets-plan-summary span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.lets-plan-summary strong {
  color: var(--ink);
  font-size: 13px;
  line-height: 1.35;
}

@media (max-width: 1100px) {
  .topbar {
    grid-template-columns: auto minmax(180px, 1fr) auto auto;
  }

  .lets-plan-grid {
    grid-template-columns: 1fr;
  }

  .lets-plan-group > div {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

@media (max-width: 760px) {
  .topbar {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .lets-plan-button {
    grid-column: 1 / -1;
    min-height: 40px;
    justify-self: stretch;
    padding-inline: 12px;
    font-size: 14px;
  }

  .top-actions {
    grid-column: 1 / -1;
  }

  .lets-plan-group > div,
  .lets-plan-summary {
    grid-template-columns: 1fr;
  }

  .lets-plan-hero {
    padding: 14px;
  }

  .mobile-nav {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

/* Travel tab cleanup */
.ride-share-panel {
  display: grid;
  gap: 12px;
}

.ride-share-panel > .section-heading {
  align-items: center;
  margin-bottom: 0;
}

.ride-share-panel > .section-heading h2 {
  margin-bottom: 3px;
}

.ride-share-panel > .section-heading p:not(.eyebrow) {
  max-width: 760px;
  margin: 0;
  color: var(--muted);
  line-height: 1.4;
}

.travel-overview-card {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(8, 127, 140, 0.12);
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(8, 189, 184, 0.1), rgba(255, 138, 92, 0.08)), #fff;
}

.travel-overview-card div,
.travel-row-list article {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.travel-overview-card span,
.travel-row-list span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.travel-overview-card strong {
  color: var(--ink);
  font-size: 19px;
  line-height: 1.2;
}

.travel-overview-card small,
.travel-row-list small {
  color: var(--muted);
  line-height: 1.35;
}

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

.travel-section-nav button {
  min-height: 42px;
  border: 1px solid rgba(8, 127, 140, 0.12);
  border-radius: 12px;
  padding: 0 10px;
  background: #fff;
  color: #174650;
  font-weight: 900;
  text-align: left;
}

.travel-section-nav button:hover,
.travel-section-nav button:focus-visible {
  border-color: rgba(0, 150, 199, 0.38);
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.08);
}

.transport-confirmation-hub {
  gap: 12px;
  padding: 12px;
}

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

.transport-summary-strip button {
  min-height: 68px;
  border-radius: 10px;
  padding: 9px;
}

.transport-summary-strip strong {
  font-size: 16px;
}

.transport-search-row {
  grid-template-columns: minmax(0, 1fr) minmax(150px, 0.42fr) minmax(145px, 0.38fr);
  padding: 10px;
}

.transport-tabs {
  gap: 6px;
}

.transport-tabs button {
  min-height: 34px;
  border-radius: 9px;
  padding-inline: 10px;
  font-size: 12px;
}

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

.travel-support-card {
  min-width: 0;
  padding: 12px;
  border: 1px solid rgba(8, 127, 140, 0.12);
  border-radius: 12px;
  background: #fff;
}

.travel-support-card .section-heading {
  margin-bottom: 8px;
}

.travel-support-card h3 {
  margin: 0;
}

.travel-row-list {
  display: grid;
  gap: 8px;
}

.travel-row-list article {
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(248, 253, 255, 0.92);
}

.travel-row-list strong {
  overflow-wrap: anywhere;
  color: var(--ink);
  line-height: 1.25;
}

.travel-map-preview {
  position: relative;
  min-height: 150px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  align-items: end;
  padding: 12px;
  overflow: hidden;
  border-radius: 12px;
  background:
    linear-gradient(135deg, rgba(0, 150, 199, 0.18), rgba(255, 186, 73, 0.12)),
    repeating-linear-gradient(45deg, rgba(8, 127, 140, 0.09) 0 1px, transparent 1px 18px),
    #eefaf8;
}

.travel-map-preview span {
  position: relative;
  z-index: 1;
  width: fit-content;
  border-radius: 999px;
  padding: 6px 8px;
  background: #fff;
  color: #174650;
  font-size: 11px;
  font-weight: 900;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
}

.travel-map-preview i {
  position: absolute;
  inset: 28% 16% auto 18%;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--sea), var(--coral));
  transform: rotate(-13deg);
}

.travel-map-card.is-expanded {
  grid-column: 1 / -1;
}

.travel-map-card.is-expanded .travel-map-preview {
  min-height: 260px;
}

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

.transport-security-grid button {
  display: grid;
  gap: 4px;
  min-height: auto;
  padding: 9px;
  border-radius: 10px;
  text-align: left;
}

.transport-security-grid strong {
  font-size: 13px;
}

.transport-security-grid span {
  font-size: 11px;
}

@media (max-width: 980px) {
  .travel-section-nav,
  .transport-summary-strip,
  .transport-security-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .travel-overview-card,
  .travel-support-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 680px) {
  .travel-section-nav,
  .transport-summary-strip,
  .transport-search-row,
  .transport-security-grid {
    grid-template-columns: 1fr;
  }

  .travel-section-nav button {
    text-align: center;
  }
}

/* Travel tab widget layout */
#rideShareHub {
  gap: 10px;
  padding-bottom: 12px;
}

#rideShareHub > .section-heading {
  padding: 12px;
  border: 1px solid rgba(8, 127, 140, 0.12);
  border-radius: 16px;
  background:
    linear-gradient(135deg, rgba(8, 189, 184, 0.12), rgba(255, 138, 92, 0.08)),
    #fff;
  box-shadow: 0 14px 28px rgba(15, 23, 42, 0.07);
}

#rideShareHub .travel-overview-card,
#rideShareHub .travel-section-nav,
#rideShareHub .transport-confirmation-hub,
#rideShareHub .ride-hub-redesign {
  margin-bottom: 0;
}

#rideShareHub .travel-overview-card {
  padding: 10px;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.07);
}

#rideShareHub .travel-overview-card strong {
  font-size: 16px;
}

#rideShareHub .travel-overview-card small {
  font-size: 12px;
}

#rideShareHub .travel-section-nav {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

#rideShareHub .travel-section-nav button {
  min-height: 118px;
  display: grid;
  align-content: space-between;
  gap: 8px;
  padding: 12px;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.065);
  text-align: left;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

#rideShareHub .travel-section-nav button:hover,
#rideShareHub .travel-section-nav button:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 16px 34px rgba(15, 23, 42, 0.1);
}

#rideShareHub .travel-section-nav button span {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(8, 189, 184, 0.16), rgba(255, 138, 92, 0.13));
  font-size: 18px;
}

#rideShareHub .travel-section-nav button strong {
  color: var(--ink);
  font-size: 17px;
  line-height: 1.1;
}

#rideShareHub .travel-section-nav button small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
}

#rideShareHub .transport-confirmation-hub {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  max-height: none;
  overflow: visible;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

#rideShareHub .transport-hub-header {
  grid-column: 1 / -1;
  padding: 10px;
  border: 1px solid rgba(8, 127, 140, 0.1);
  border-radius: 14px;
  background: #fff;
}

#rideShareHub .transport-hub-header h3,
#rideShareHub .travel-support-card h3,
#rideShareHub .ride-clean-card h3,
#rideShareHub .private-driver-panel h3 {
  font-size: 17px;
}

#rideShareHub .transport-hub-header p:not(.transport-route-chip) {
  font-size: 12px;
}

#rideShareHub .transport-summary-strip button {
  min-height: 58px;
  padding: 8px;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.055);
}

#rideShareHub .transport-summary-strip small {
  display: none;
}

#rideShareHub .transport-dashboard-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

#rideShareHub .transport-record-list,
#rideShareHub .transport-detail-panel,
#rideShareHub .transport-timeline,
#rideShareHub .ride-hub-list,
#rideShareHub .private-driver-list,
#rideShareHub .ride-history-list,
#rideShareHub .ride-notification-list,
#rideShareHub .split-preview {
  max-height: 320px;
  overflow: auto;
}

#rideShareHub .transport-list-panel,
#rideShareHub .transport-detail-panel,
#rideShareHub .transport-timeline-panel,
#rideShareHub .transport-search-row,
#rideShareHub .transport-tabs,
#rideShareHub #transportMessage {
  padding: 10px;
  border: 1px solid rgba(8, 127, 140, 0.1);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.055);
}

#rideShareHub .transport-summary-strip,
#rideShareHub .transport-search-row,
#rideShareHub .transport-tabs,
#rideShareHub .transport-dashboard-grid,
#rideShareHub .travel-support-grid,
#rideShareHub .transport-security-grid,
#rideShareHub #transportMessage {
  grid-column: 1 / -1;
}

#rideShareHub .travel-support-grid,
#rideShareHub .transport-security-grid {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

#rideShareHub .transport-security-grid button {
  background: #fff;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.055);
}

#rideShareHub .transport-detail-grid,
#rideShareHub .transport-document-list,
#rideShareHub .travel-support-grid,
#rideShareHub .ride-overview-grid,
#rideShareHub .ride-two-column-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

#rideShareHub .travel-support-card,
#rideShareHub .ride-clean-card,
#rideShareHub .private-driver-panel {
  padding: 10px;
  border-radius: 16px;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.055);
}

#rideShareHub .travel-row-list article,
#rideShareHub .transport-record-card,
#rideShareHub .transport-timeline button,
#rideShareHub .ride-hub-list article,
#rideShareHub .private-driver-list article,
#rideShareHub .shared-ride-members label {
  padding: 8px;
}

#rideShareHub .ride-hub-redesign {
  max-height: none;
  overflow: visible;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

#rideShareHub .ride-toolbar {
  position: sticky;
  top: 0;
  z-index: 2;
  grid-column: 1 / -1;
  padding: 8px;
  border: 1px solid rgba(8, 127, 140, 0.1);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.055);
}

#rideShareHub .ride-entry-grid,
#rideShareHub .ride-location-grid,
#rideShareHub .private-driver-search {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

#rideShareHub .ride-provider-section,
#rideShareHub .ride-two-column-grid {
  grid-column: 1 / -1;
}

#rideShareHub .ride-assistant-panel,
#rideShareHub .corporate-meal-rules {
  display: none;
}

@media (max-width: 1120px) {
  #rideShareHub .travel-section-nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #rideShareHub .transport-confirmation-hub,
  #rideShareHub .ride-hub-redesign {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  #rideShareHub .travel-section-nav,
  #rideShareHub .travel-overview-card,
  #rideShareHub .transport-summary-strip,
  #rideShareHub .transport-search-row,
  #rideShareHub .transport-detail-grid,
  #rideShareHub .transport-document-list,
  #rideShareHub .travel-support-grid,
  #rideShareHub .ride-toolbar,
  #rideShareHub .ride-overview-grid,
  #rideShareHub .ride-two-column-grid,
  #rideShareHub .ride-entry-grid,
  #rideShareHub .ride-location-grid,
  #rideShareHub .private-driver-search {
    grid-template-columns: 1fr;
  }

  #rideShareHub .transport-confirmation-hub,
  #rideShareHub .ride-hub-redesign {
    max-height: none;
    overflow: visible;
  }
}

/* Login carousel text sizing */
body.auth-screen .auth-carousel-overlay {
  max-width: 680px;
}

body.auth-screen .auth-landing h1 {
  max-width: 620px;
  font-size: clamp(34px, 3.7vw, 58px);
  line-height: 1.08;
}

body.auth-screen .auth-carousel-overlay > p:not(.auth-pill) {
  max-width: 600px;
  font-size: clamp(15px, 1.15vw, 18px);
  line-height: 1.5;
}

body.auth-screen .auth-carousel blockquote {
  max-width: 520px;
  font-size: clamp(17px, 1.4vw, 22px);
}

@media (max-width: 900px) {
  body.auth-screen .auth-carousel-overlay {
    max-width: 560px;
  }

  body.auth-screen .auth-landing h1 {
    max-width: 500px;
    font-size: clamp(28px, 8vw, 42px);
  }

  body.auth-screen .auth-carousel-overlay > p:not(.auth-pill) {
    max-width: 500px;
    font-size: 15px;
    line-height: 1.42;
  }
}

@media (max-width: 560px) {
  body.auth-screen .auth-pill {
    min-height: 30px;
    margin-bottom: 10px;
    padding-inline: 10px;
    font-size: 12px;
  }

  body.auth-screen .auth-landing h1 {
    font-size: clamp(24px, 7vw, 32px);
    line-height: 1.12;
  }

  body.auth-screen .auth-carousel-overlay > p:not(.auth-pill) {
    margin-top: 10px;
    font-size: 13px;
    line-height: 1.4;
  }
}

/* Travel tab tile split */
@media (min-width: 1121px) {
  #rideShareHub .transport-confirmation-hub,
  #rideShareHub .ride-hub-redesign {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
  }

  #rideShareHub .transport-hub-header,
  #rideShareHub .transport-summary-strip,
  #rideShareHub .transport-search-row,
  #rideShareHub .transport-tabs,
  #rideShareHub .transport-dashboard-grid,
  #rideShareHub .travel-support-grid,
  #rideShareHub .transport-security-grid,
  #rideShareHub #transportMessage,
  #rideShareHub .ride-toolbar,
  #rideShareHub .ride-provider-section,
  #rideShareHub .ride-two-column-grid {
    grid-column: auto;
  }

  #rideShareHub .transport-summary-strip,
  #rideShareHub .transport-search-row,
  #rideShareHub .transport-dashboard-grid,
  #rideShareHub .travel-support-grid,
  #rideShareHub .ride-toolbar,
  #rideShareHub .ride-overview-grid,
  #rideShareHub .ride-provider-section,
  #rideShareHub .ride-two-column-grid {
    grid-column: span 2;
  }

  #rideShareHub .transport-summary-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #rideShareHub .transport-tabs,
  #rideShareHub .transport-security-grid {
    grid-template-columns: 1fr;
    align-content: start;
  }

  #rideShareHub .transport-dashboard-grid,
  #rideShareHub .travel-support-grid,
  #rideShareHub .ride-overview-grid,
  #rideShareHub .ride-two-column-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #rideShareHub .transport-timeline-panel,
  #rideShareHub #transportMessage,
  #rideShareHub .ride-clean-card,
  #rideShareHub .private-driver-panel {
    min-height: 100%;
  }

  #rideShareHub .transport-hub-header,
  #rideShareHub .transport-tabs,
  #rideShareHub #transportMessage,
  #rideShareHub .ride-clean-card,
  #rideShareHub .private-driver-panel {
    display: grid;
  }
}

/* Travel Hub compact tile dashboard */
#rideShareHub {
  background: transparent;
}

#rideShareHub > .section-heading {
  background: #fff;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.045);
}

#rideShareHub .travel-overview-card {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  padding: 10px;
  border: 1px solid rgba(8, 127, 140, 0.11);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.045);
}

#rideShareHub .travel-overview-card div {
  min-height: 74px;
  padding: 8px;
  border: 1px solid rgba(8, 127, 140, 0.08);
  border-radius: 10px;
  background: rgba(248, 253, 255, 0.7);
}

#rideShareHub .travel-section-nav {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

#rideShareHub .travel-section-nav button {
  min-height: 132px;
  border: 1px solid rgba(8, 127, 140, 0.12);
  border-radius: 12px;
  padding: 12px;
  background: #fff;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.045);
}

#rideShareHub .travel-section-nav button span {
  background: rgba(8, 127, 140, 0.08);
}

#rideShareHub .travel-section-nav button.active {
  border-color: rgba(0, 150, 199, 0.45);
  box-shadow: 0 12px 24px rgba(0, 150, 199, 0.12);
}

#rideShareHub .travel-selected-tile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  border: 1px solid rgba(8, 127, 140, 0.12);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.045);
}

#rideShareHub .travel-selected-tile h3,
#rideShareHub .travel-selected-tile p {
  margin: 0;
}

#rideShareHub .travel-selected-tile p:not(.eyebrow) {
  color: var(--muted);
  line-height: 1.4;
}

.travel-workspace {
  display: grid;
  gap: 12px;
  padding: 12px;
  border: 1px solid rgba(8, 127, 140, 0.12);
  border-radius: 16px;
  background:
    linear-gradient(135deg, rgba(8, 189, 184, 0.08), rgba(255, 138, 92, 0.06)),
    #ffffff;
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.055);
}

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

.events-dashboard-panel {
  display: grid;
  gap: 14px;
  overflow: hidden;
}

.events-dashboard-panel > .section-heading {
  align-items: center;
}

.events-dashboard-panel > .section-heading p:not(.eyebrow) {
  margin: 5px 0 0;
  max-width: 760px;
  color: var(--muted);
  line-height: 1.45;
}

.event-dashboard-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.event-dashboard-tabs button {
  min-height: 36px;
  border: 1px solid rgba(8, 127, 140, 0.14);
  border-radius: 999px;
  padding: 0 13px;
  background: rgba(255, 255, 255, 0.86);
  color: #174650;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}

.event-dashboard-tabs button.active,
.event-dashboard-tabs button:hover,
.event-dashboard-tabs button:focus-visible {
  border-color: rgba(0, 150, 199, 0.38);
  background: rgba(8, 189, 184, 0.12);
}

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

.event-operations-grid button {
  display: grid;
  gap: 6px;
  min-height: 104px;
  align-content: start;
  border: 1px solid rgba(8, 127, 140, 0.12);
  border-radius: 14px;
  padding: 13px;
  background:
    linear-gradient(135deg, rgba(8, 189, 184, 0.1), rgba(255, 138, 92, 0.08)),
    #ffffff;
  color: #174650;
  text-align: left;
  box-shadow: 0 10px 20px rgba(15, 23, 42, 0.055);
}

.event-operations-grid strong {
  color: #0f2f3a;
  font-size: 17px;
}

.event-operations-grid span {
  color: #5f7882;
  line-height: 1.35;
}

.event-create-card {
  display: grid;
  gap: 12px;
  border: 1px solid rgba(8, 127, 140, 0.12);
  border-radius: 16px;
  padding: 14px;
  background: #fff;
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.055);
}

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

.event-create-grid label {
  display: grid;
  gap: 5px;
  color: #47707a;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.event-create-grid .wide {
  grid-column: span 2;
}

.event-create-grid input,
.event-create-grid select,
.event-create-grid textarea {
  width: 100%;
  min-height: 38px;
  border: 1px solid rgba(8, 127, 140, 0.16);
  border-radius: 11px;
  padding: 9px 10px;
  background: #fff;
  color: #0f2f3a;
  font: inherit;
  font-weight: 750;
}

.event-create-grid textarea {
  min-height: 78px;
  resize: vertical;
  text-transform: none;
}

.event-experience-card {
  min-height: 190px;
  display: grid;
  align-content: end;
  gap: 7px;
  position: relative;
  overflow: hidden;
  border: 0;
  border-radius: 18px;
  padding: 16px;
  background:
    linear-gradient(180deg, rgba(5, 18, 24, 0.08), rgba(5, 18, 24, 0.76)),
    var(--event-image);
  background-size: cover;
  background-position: center;
  color: #fff;
  box-shadow: 0 16px 34px rgba(15, 23, 42, 0.16);
  text-align: left;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.event-experience-card:hover,
.event-experience-card:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 20px 40px rgba(15, 23, 42, 0.22);
}

.event-experience-card span,
.event-experience-card small,
.event-experience-card i {
  position: relative;
  z-index: 1;
  font-weight: 900;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.45);
}

.event-experience-card span {
  width: fit-content;
  padding: 5px 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
  font-size: 11px;
  text-transform: uppercase;
}

.event-experience-card strong {
  position: relative;
  z-index: 1;
  font-size: 21px;
  line-height: 1.08;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.45);
}

.event-experience-card i {
  width: fit-content;
  padding: 6px 9px;
  border-radius: 999px;
  background: rgba(8, 189, 184, 0.86);
  font-size: 12px;
  font-style: normal;
}

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

.wallet-action-grid button {
  display: grid;
  gap: 6px;
  min-height: 118px;
  align-content: start;
  border: 1px solid rgba(8, 127, 140, 0.12);
  border-radius: 15px;
  padding: 14px;
  background:
    linear-gradient(135deg, rgba(8, 189, 184, 0.1), rgba(255, 138, 92, 0.08)),
    #ffffff;
  color: #174650;
  text-align: left;
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.06);
  cursor: pointer;
}

.wallet-action-grid button:first-child {
  background:
    linear-gradient(135deg, rgba(0, 150, 199, 0.18), rgba(255, 186, 73, 0.14)),
    #ffffff;
}

.wallet-action-grid button:hover,
.wallet-action-grid button:focus-visible {
  border-color: rgba(0, 150, 199, 0.35);
  box-shadow: 0 16px 28px rgba(15, 23, 42, 0.1);
}

.wallet-action-grid span {
  color: #47707a;
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
}

.wallet-action-grid strong {
  color: #0f2f3a;
  font-size: 20px;
}

.wallet-action-grid small {
  color: #5f7882;
  line-height: 1.35;
}

.travel-workspace-toolbar,
.pass-control-row {
  display: grid;
  grid-template-columns: minmax(220px, 0.8fr) 1fr;
  gap: 10px;
  align-items: end;
}

.travel-workspace-toolbar label,
.pass-control-row label {
  display: grid;
  gap: 5px;
  color: #47707a;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.travel-workspace-toolbar select,
.pass-control-row select {
  min-height: 38px;
  border: 1px solid rgba(8, 127, 140, 0.16);
  border-radius: 11px;
  padding: 0 10px;
  background: #fff;
  color: #0f2f3a;
  font-weight: 800;
}

.travel-quick-actions,
.pass-filter-row,
.route-chip-list,
.pass-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.travel-quick-actions button,
.pass-filter-row button,
.route-chip-list button,
.pass-actions button {
  min-height: 34px;
  border: 1px solid rgba(8, 127, 140, 0.14);
  border-radius: 999px;
  padding: 0 12px;
  background: rgba(255, 255, 255, 0.86);
  color: #174650;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}

.travel-quick-actions button:hover,
.travel-quick-actions button:focus-visible,
.pass-filter-row button:hover,
.pass-filter-row button:focus-visible,
.pass-filter-row button.active,
.route-chip-list button:hover,
.route-chip-list button:focus-visible,
.pass-actions button:hover,
.pass-actions button:focus-visible {
  border-color: rgba(0, 150, 199, 0.38);
  background: rgba(8, 189, 184, 0.1);
}

.travel-workspace-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(260px, 0.75fr);
  gap: 12px;
  align-items: start;
}

.travel-pass-workspace,
.travel-weather-dashboard,
.travel-map-dashboard {
  display: grid;
  gap: 11px;
  min-width: 0;
  border: 1px solid rgba(8, 127, 140, 0.12);
  border-radius: 14px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.045);
}

.travel-pass-workspace {
  grid-row: span 2;
}

.travel-pass-workspace .section-heading p:not(.eyebrow),
.travel-map-dashboard p,
.travel-weather-dashboard p {
  margin: 0;
  color: var(--muted);
  line-height: 1.4;
}

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

.visual-pass-card {
  display: grid;
  gap: 10px;
  min-width: 0;
  border: 1px solid rgba(8, 127, 140, 0.12);
  border-radius: 14px;
  padding: 12px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 253, 255, 0.86)),
    #ffffff;
}

.visual-pass-card--flight {
  background:
    linear-gradient(135deg, rgba(0, 150, 199, 0.14), rgba(8, 189, 184, 0.08)),
    #ffffff;
}

.visual-pass-card--reservation {
  background:
    linear-gradient(135deg, rgba(255, 186, 73, 0.14), rgba(255, 138, 92, 0.08)),
    #ffffff;
}

.pass-topline {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  color: #47707a;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.pass-topline strong {
  color: #087f8c;
  font-size: 11px;
}

.pass-route {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 8px;
  align-items: center;
  color: #0f2f3a;
  font-size: 24px;
  font-weight: 950;
}

.pass-provider {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 12px;
  background: rgba(15, 47, 58, 0.9);
  color: #fff;
}

.pass-provider b {
  font-size: 18px;
  letter-spacing: 0;
}

.pass-provider span {
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.pass-route i {
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, #0096c7, #ff7a59);
}

.visual-pass-card h4 {
  margin: 0;
  color: #0f2f3a;
  font-size: 17px;
}

.visual-pass-card dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
}

.visual-pass-card dt {
  color: #69838b;
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.visual-pass-card dd {
  margin: 2px 0 0;
  color: #173f49;
  font-size: 13px;
  font-weight: 900;
}

.official-code {
  min-height: 54px;
  border-radius: 10px;
  background:
    linear-gradient(90deg, #0f2f3a 0 4px, transparent 4px 8px),
    linear-gradient(#0f2f3a 0 4px, transparent 4px 8px),
    #ffffff;
  background-size: 11px 11px;
  border: 1px solid rgba(15, 47, 58, 0.12);
}

.barcode-strip {
  min-height: 34px;
  border-radius: 8px;
  background: repeating-linear-gradient(90deg, #0f2f3a 0 2px, transparent 2px 5px, #0f2f3a 5px 8px, transparent 8px 13px);
  opacity: 0.85;
}

.pass-note {
  margin: 0;
  color: #5f7882;
  font-size: 12px;
  line-height: 1.35;
}

.weather-hero {
  position: relative;
  min-height: 170px;
  display: grid;
  align-content: end;
  gap: 6px;
  overflow: hidden;
  border-radius: 14px;
  padding: 14px;
  background:
    linear-gradient(180deg, rgba(9, 25, 35, 0.08), rgba(9, 25, 35, 0.52)),
    radial-gradient(circle at 75% 26%, #ffd166 0 28px, transparent 29px),
    radial-gradient(circle at 35% 35%, rgba(255, 255, 255, 0.92) 0 38px, transparent 39px),
    radial-gradient(circle at 58% 44%, rgba(255, 255, 255, 0.86) 0 44px, transparent 45px),
    linear-gradient(160deg, #7dd3fc, #0ea5e9 58%, #087f8c);
  color: #fff;
}

.weather-hero::after {
  content: "";
  position: absolute;
  inset: -20px;
  background: repeating-linear-gradient(100deg, transparent 0 18px, rgba(255, 255, 255, 0.24) 18px 20px, transparent 20px 34px);
  opacity: 0.5;
  animation: weatherRainDrift 5s linear infinite;
  pointer-events: none;
  z-index: 0;
}

.weather-hero span,
.weather-hero small {
  position: relative;
  z-index: 1;
  font-weight: 900;
  text-shadow: 0 1px 8px rgba(15, 23, 42, 0.35);
}

.weather-hero strong {
  position: relative;
  z-index: 1;
  font-size: 44px;
  line-height: 0.95;
  text-shadow: 0 1px 10px rgba(15, 23, 42, 0.35);
}

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

.weather-metrics div {
  display: grid;
  gap: 3px;
  padding: 10px;
  border-radius: 12px;
  background: rgba(8, 189, 184, 0.08);
}

.weather-metrics span {
  color: #5f7882;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.weather-metrics strong {
  color: #0f2f3a;
  font-size: 18px;
}

.travel-map-dashboard {
  background:
    linear-gradient(135deg, rgba(8, 189, 184, 0.1), rgba(255, 138, 92, 0.08)),
    #ffffff;
}

.route-chip-list button {
  border-radius: 12px;
}

.weather-source-line {
  font-size: 12px;
  font-weight: 800;
}

@keyframes weatherRainDrift {
  from {
    transform: translate3d(-10px, -16px, 0);
  }

  to {
    transform: translate3d(18px, 22px, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .weather-hero::after {
    animation: none;
  }
}

#rideShareHub .transport-confirmation-hub {
  display: none;
}

#rideShareHub .ride-hub-redesign {
  display: grid;
  gap: 12px;
  margin-top: 0;
}

@media (max-width: 1120px) {
  #rideShareHub .travel-overview-card,
  #rideShareHub .travel-section-nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  #rideShareHub .travel-overview-card,
  #rideShareHub .travel-section-nav {
    grid-template-columns: 1fr;
  }

  #rideShareHub .travel-selected-tile {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 1080px) {
  .travel-workspace-grid {
    grid-template-columns: 1fr;
  }

  .travel-pass-workspace {
    grid-row: auto;
  }

  .event-experience-grid,
  .event-operations-grid,
  .wallet-action-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .travel-workspace-toolbar,
  .pass-control-row {
    grid-template-columns: 1fr;
  }

  .travel-quick-actions {
    justify-content: flex-start;
  }

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

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

@media (max-width: 640px) {
  .travel-workspace {
    padding: 10px;
  }

  .visual-pass-grid,
  .event-experience-grid,
  .event-operations-grid,
  .event-create-grid,
  .wallet-action-grid,
  .weather-metrics {
    grid-template-columns: 1fr;
  }

  .event-create-grid .wide {
    grid-column: auto;
  }

  .event-experience-card {
    min-height: 168px;
  }

  .pass-route {
    font-size: 20px;
  }

  .weather-hero {
    min-height: 142px;
  }
}

/* Travel summary premium dashboard */
#rideShareHub .travel-overview-card {
  gap: 10px;
  padding: 10px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.96);
  grid-template-columns: 1.35fr 1fr 1fr;
}

#rideShareHub > .travel-overview-card,
#rideShareHub > .travel-section-nav,
#rideShareHub > .travel-selected-tile,
#rideShareHub > .travel-workspace,
#rideShareHub > .transport-confirmation-hub,
#rideShareHub > .ride-hub-redesign {
  display: none;
}

.travel-settings-shell {
  display: grid;
  grid-template-columns: minmax(240px, 300px) minmax(0, 1fr);
  gap: 18px;
  margin-top: 18px;
  align-items: start;
}

.travel-settings-sidebar,
.travel-settings-main {
  border: 1px solid rgba(15, 23, 42, 0.09);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 18px 46px rgba(15, 23, 42, 0.08);
}

.travel-settings-sidebar {
  display: grid;
  gap: 14px;
  padding: 16px;
  position: sticky;
  top: 18px;
}

.travel-search-label,
.travel-country-select {
  display: grid;
  gap: 7px;
  font-size: 0.76rem;
  font-weight: 800;
  color: #334155;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.travel-search-label input,
.travel-country-select select,
.travel-form-row input {
  width: 100%;
  min-height: 42px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 14px;
  background: #f8fafc;
  color: #0f172a;
  padding: 0 13px;
  font: inherit;
  text-transform: none;
  letter-spacing: 0;
}

.travel-current-trip-card {
  display: grid;
  gap: 10px;
  padding: 10px;
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(14, 165, 233, 0.13), rgba(249, 115, 22, 0.12));
  border: 1px solid rgba(14, 165, 233, 0.16);
}

.travel-current-trip-card img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 16px;
}

.travel-current-trip-card span,
.travel-focus-grid span,
.travel-provider-cards span {
  display: block;
  color: #64748b;
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.travel-current-trip-card strong {
  display: block;
  color: #0f172a;
  font-size: 1rem;
}

.travel-current-trip-card small {
  color: #475569;
  line-height: 1.45;
}

.travel-settings-nav {
  display: grid;
  gap: 8px;
}

.travel-settings-nav details {
  border-radius: 16px;
  background: #f8fafc;
  border: 1px solid rgba(15, 23, 42, 0.07);
  overflow: hidden;
}

.travel-settings-nav summary {
  cursor: pointer;
  padding: 12px 13px;
  color: #0f172a;
  font-weight: 900;
  list-style: none;
}

.travel-settings-nav summary::-webkit-details-marker {
  display: none;
}

.travel-settings-nav summary::after {
  content: "+";
  float: right;
  color: #0891b2;
}

.travel-settings-nav details[open] summary::after {
  content: "-";
}

.travel-settings-nav button {
  width: calc(100% - 16px);
  min-height: 38px;
  margin: 0 8px 8px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: #334155;
  text-align: left;
  padding: 0 12px;
  font: inherit;
  font-weight: 750;
  cursor: pointer;
}

.travel-settings-nav button:hover,
.travel-settings-nav button:focus-visible,
.travel-settings-nav button.active {
  background: #0f172a;
  color: #fff;
  outline: none;
}

.travel-settings-main {
  padding: 18px;
  min-height: 560px;
}

.travel-focus-panel {
  display: none;
}

.travel-focus-panel.active {
  display: grid;
  gap: 16px;
  animation: travelFocusIn 180ms ease-out;
}

@keyframes travelFocusIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.travel-focus-header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 16px;
  border-radius: 22px;
  color: #fff;
  background:
    linear-gradient(135deg, rgba(12, 34, 50, 0.76), rgba(17, 94, 89, 0.78)),
    url("https://images.unsplash.com/photo-1507525428034-b723cf961d3e?q=80&w=1400&auto=format&fit=crop") center/cover;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12), 0 20px 50px rgba(8, 47, 73, 0.16);
}

.travel-focus-header .eyebrow,
.travel-focus-header p {
  color: rgba(255, 255, 255, 0.82);
}

.travel-focus-header h3 {
  margin: 2px 0 4px;
  color: #fff;
  font-size: clamp(1.35rem, 2vw, 2rem);
}

.travel-focus-icon {
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  border-radius: 17px;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.24);
  font-size: 1.5rem;
}

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

.travel-focus-grid article,
.travel-provider-cards article,
.travel-empty-state,
.travel-map-dashboard,
.focus-weather {
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 20px;
  background: #fff;
  padding: 16px;
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.07);
}

.travel-focus-grid article {
  display: grid;
  gap: 8px;
  align-content: start;
  min-height: 150px;
}

.travel-focus-grid article img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 15px;
  margin-bottom: 2px;
}

.travel-focus-grid strong,
.travel-provider-cards strong,
.travel-empty-state strong {
  color: #0f172a;
  font-size: 1.05rem;
}

.travel-focus-grid small,
.travel-provider-cards small,
.travel-empty-state span {
  color: #64748b;
  line-height: 1.45;
}

.travel-focus-grid button,
.travel-provider-cards button,
.travel-empty-state button,
.travel-pass-filters button,
.travel-quick-actions.compact button {
  width: fit-content;
  min-height: 36px;
  border: 0;
  border-radius: 999px;
  background: #e0f7fa;
  color: #075985;
  padding: 0 14px;
  font: inherit;
  font-weight: 850;
  cursor: pointer;
}

.travel-focus-grid button:hover,
.travel-focus-grid button:focus-visible,
.travel-provider-cards button:hover,
.travel-provider-cards button:focus-visible,
.travel-empty-state button:hover,
.travel-empty-state button:focus-visible,
.travel-pass-filters button.active,
.travel-pass-filters button:hover,
.travel-pass-filters button:focus-visible,
.travel-quick-actions.compact button:hover,
.travel-quick-actions.compact button:focus-visible {
  background: #0891b2;
  color: #fff;
  outline: none;
}

.travel-form-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  align-items: center;
}

.travel-form-row button {
  min-height: 42px;
  border: 0;
  border-radius: 14px;
  background: #0f172a;
  color: #fff;
  font: inherit;
  font-weight: 850;
  cursor: pointer;
}

.travel-country-select {
  max-width: 360px;
}

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

.travel-provider-cards article {
  display: grid;
  gap: 10px;
}

.travel-provider-cards dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
}

.travel-provider-cards div {
  padding: 10px;
  border-radius: 14px;
  background: #f8fafc;
}

.travel-provider-cards dt {
  color: #64748b;
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
}

.travel-provider-cards dd {
  margin: 2px 0 0;
  color: #0f172a;
  font-weight: 850;
}

.travel-pass-filters,
.travel-quick-actions.compact,
.route-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.single-focus-pass {
  grid-template-columns: minmax(280px, 420px);
}

.focus-weather {
  display: grid;
  gap: 14px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(240, 249, 255, 0.92)),
    url("https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?q=80&w=1200&auto=format&fit=crop") center/cover;
}

.focus-weather .weather-hero {
  min-height: 210px;
}

.travel-empty-state {
  display: grid;
  gap: 8px;
  align-content: center;
  min-height: 150px;
}

.travel-map-dashboard {
  display: grid;
  gap: 14px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.94), rgba(236, 253, 245, 0.9)),
    url("https://images.unsplash.com/photo-1524661135-423995f22d0b?q=80&w=1200&auto=format&fit=crop") center/cover;
}

#travelSettingsMessage {
  margin: 0;
  padding: 11px 13px;
  border-radius: 14px;
  background: #f8fafc;
  color: #475569;
}

@media (max-width: 980px) {
  .travel-settings-shell {
    grid-template-columns: 1fr;
  }

  .travel-settings-sidebar {
    position: static;
  }

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

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

@media (max-width: 760px) {
  .travel-settings-shell {
    gap: 12px;
    margin-top: 12px;
  }

  .travel-settings-sidebar,
  .travel-settings-main {
    border-radius: 18px;
    padding: 12px;
  }

  .travel-settings-nav {
    grid-template-columns: 1fr;
  }

  .travel-focus-header {
    grid-template-columns: 1fr;
    padding: 14px;
  }

  .travel-focus-header .primary-button {
    width: 100%;
  }

  .travel-focus-grid,
  .travel-provider-cards,
  .travel-form-row,
  .single-focus-pass {
    grid-template-columns: 1fr;
  }

  .travel-provider-cards dl {
    grid-template-columns: 1fr 1fr;
  }
}

/* Chat, Wallet, Memories, and Travel separation refresh */
#socialHub .daily-memory-panel,
#socialHub .social-media-hub {
  display: none;
}

#socialHub .section-heading h2 {
  overflow-wrap: anywhere;
}

#socialHub .messages-hub {
  margin-bottom: 0;
}

#socialHub .messages-layout {
  grid-template-columns: minmax(230px, 0.78fr) minmax(340px, 1.45fr) minmax(240px, 0.78fr);
}

.conversation-card {
  grid-template-columns: 48px minmax(0, 1fr) auto;
}

.conversation-card span,
.conversation-card strong,
.conversation-card small,
.conversation-card em {
  min-width: 0;
  overflow-wrap: anywhere;
}

.conversation-card em {
  grid-column: auto;
  justify-self: end;
  max-width: 92px;
  text-align: right;
}

.conversation-details-panel {
  display: grid;
  gap: 14px;
  align-content: start;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: var(--soft-shadow);
  padding: 14px;
  min-width: 0;
}

.chat-detail-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: center;
}

.chat-detail-card h3,
.conversation-details-panel h4,
.conversation-details-panel p {
  margin: 0;
}

.chat-detail-card small,
.conversation-details-panel p {
  color: var(--muted);
  line-height: 1.45;
}

.chat-detail-actions,
.chat-danger-actions {
  display: grid;
  gap: 8px;
}

.chat-detail-actions button,
.chat-danger-actions button {
  min-height: 38px;
  border: 1px solid rgba(8, 127, 140, 0.14);
  border-radius: 12px;
  background: #f8fafc;
  color: #174650;
  font-weight: 850;
  cursor: pointer;
}

.chat-danger-actions button {
  border-color: rgba(220, 38, 38, 0.18);
  color: #991b1b;
  background: #fff7f7;
}

.chat-member-list {
  display: grid;
  gap: 8px;
}

.chat-member-list span {
  display: flex;
  gap: 8px;
  align-items: center;
  min-width: 0;
  color: #334155;
}

.chat-member-list b {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  border-radius: 10px;
  background: #e0f7fa;
  color: #075985;
  font-size: 0.74rem;
}

.memories-panel {
  display: grid;
  gap: 16px;
}

.memories-toolbar {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 6px;
  border-radius: 999px;
  background: #eef7f5;
}

.memories-toolbar button {
  min-height: 38px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #47656d;
  padding: 0 14px;
  font-weight: 900;
  white-space: nowrap;
  cursor: pointer;
}

.memories-toolbar button.active,
.memories-toolbar button:hover,
.memories-toolbar button:focus-visible {
  background: #fff;
  color: #0f2f3a;
  box-shadow: 0 8px 18px rgba(23, 32, 42, 0.09);
  outline: none;
}

.memories-gallery-shell {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(280px, 0.7fr);
  gap: 16px;
  align-items: start;
}

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

.memory-media-card,
.memory-comments-panel,
.memory-album-grid article {
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.07);
  overflow: hidden;
}

.memory-media-card {
  display: grid;
  min-width: 0;
}

.memory-media-card img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.memory-media-card > div:not(.memory-card-actions) {
  display: grid;
  gap: 5px;
  padding: 13px 14px 8px;
}

.memory-media-card span {
  width: fit-content;
  border-radius: 999px;
  background: #e0f7fa;
  color: #075985;
  padding: 5px 9px;
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
}

.memory-media-card strong,
.memory-album-grid strong {
  color: #0f172a;
  overflow-wrap: anywhere;
}

.memory-media-card small,
.memory-album-grid span {
  color: #64748b;
  line-height: 1.4;
}

.memory-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0 14px 14px;
}

.memory-card-actions button,
.memory-comment-form button,
.memory-album-grid button,
.wallet-section-nav button,
.wallet-mini-actions button,
.wallet-quick-actions-redesign button {
  min-height: 36px;
  border: 0;
  border-radius: 999px;
  background: #eef7f5;
  color: #174650;
  padding: 0 13px;
  font-weight: 850;
  cursor: pointer;
}

.memory-card-actions button.active {
  background: #ffebef;
  color: #be123c;
}

.memory-comments-panel {
  display: grid;
  gap: 12px;
  padding: 16px;
  position: sticky;
  top: 18px;
}

.memory-comment-list {
  display: grid;
  gap: 10px;
  max-height: 330px;
  overflow: auto;
}

.memory-comment-list div {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 6px 9px;
  padding: 10px;
  border-radius: 14px;
  background: #f8fafc;
}

.memory-comment-list b {
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 12px;
  background: linear-gradient(135deg, #00c2c7, #ff8a5c);
  color: #06292f;
}

.memory-comment-list span {
  overflow-wrap: anywhere;
}

.memory-comment-list time {
  color: #64748b;
  font-size: 0.78rem;
}

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

.memory-comment-form input {
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0 14px;
  font: inherit;
}

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

.memory-album-grid article {
  display: grid;
  gap: 8px;
  padding: 16px;
}

.wallet-redesign-shell {
  display: grid;
  grid-template-columns: minmax(200px, 250px) minmax(0, 1fr);
  gap: 16px;
  margin-bottom: 16px;
}

.wallet-section-nav {
  display: grid;
  gap: 8px;
  align-content: start;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.94);
  padding: 12px;
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.07);
}

.wallet-section-nav button {
  width: 100%;
  border-radius: 13px;
  text-align: left;
}

.wallet-section-nav button.active,
.wallet-section-nav button:hover,
.wallet-section-nav button:focus-visible,
.wallet-mini-actions button:hover,
.wallet-mini-actions button:focus-visible,
.wallet-quick-actions-redesign button:hover,
.wallet-quick-actions-redesign button:focus-visible {
  background: #0f172a;
  color: #fff;
  outline: none;
}

.wallet-home-grid,
.wallet-trip-card-grid,
.wallet-quick-actions-redesign {
  display: grid;
  gap: 12px;
}

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

.wallet-balance-hero {
  grid-column: span 2;
  min-height: 168px;
  display: grid;
  align-content: end;
  gap: 8px;
  border-radius: 24px;
  padding: 18px;
  color: #fff;
  background:
    linear-gradient(135deg, rgba(6, 78, 59, 0.86), rgba(8, 145, 178, 0.82)),
    url("https://images.unsplash.com/photo-1507525428034-b723cf961d3e?q=80&w=1000&auto=format&fit=crop") center/cover;
  box-shadow: 0 18px 42px rgba(8, 47, 73, 0.16);
}

.wallet-summary-card,
.wallet-trip-tile,
.wallet-virtual-preview {
  display: grid;
  gap: 8px;
  min-width: 0;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 22px;
  background: #fff;
  padding: 16px;
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.07);
}

.wallet-balance-hero span,
.wallet-summary-card span,
.wallet-trip-tile span,
.wallet-virtual-preview span {
  font-size: 0.74rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.wallet-summary-card span,
.wallet-trip-tile span,
.wallet-virtual-preview span {
  color: #64748b;
}

.wallet-balance-hero strong {
  font-size: clamp(2.2rem, 5vw, 4.2rem);
  line-height: 0.95;
}

.wallet-summary-card strong,
.wallet-trip-tile strong,
.wallet-virtual-preview strong {
  color: #0f172a;
  font-size: 1.3rem;
  overflow-wrap: anywhere;
}

.wallet-balance-hero small,
.wallet-summary-card small,
.wallet-trip-tile small,
.wallet-virtual-preview small {
  color: inherit;
  opacity: 0.78;
  line-height: 1.4;
}

.wallet-summary-card small,
.wallet-trip-tile small,
.wallet-virtual-preview small {
  color: #64748b;
  opacity: 1;
}

.wallet-progress {
  height: 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.24);
  overflow: hidden;
}

.wallet-progress i {
  display: block;
  width: var(--w);
  height: 100%;
  border-radius: inherit;
  background: #facc15;
}

.wallet-trip-card-grid {
  grid-template-columns: minmax(0, 1.1fr) minmax(260px, 0.9fr);
  margin-top: 12px;
}

.wallet-trip-tile {
  grid-template-columns: 92px minmax(0, 1fr) auto;
  align-items: center;
}

.wallet-trip-tile img {
  width: 92px;
  height: 86px;
  border-radius: 18px;
  object-fit: cover;
}

.wallet-mini-actions,
.wallet-quick-actions-redesign {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.wallet-quick-actions-redesign {
  margin-top: 12px;
}

.travel-settings-shell,
.travel-settings-shell * {
  min-width: 0;
}

.travel-focus-header,
.travel-focus-grid article,
.travel-provider-cards article,
.travel-map-dashboard,
.travel-empty-state {
  overflow: hidden;
}

.travel-focus-header h3,
.travel-focus-header p,
.travel-focus-grid strong,
.travel-focus-grid small,
.travel-provider-cards strong,
.travel-provider-cards small,
.travel-provider-cards dd,
.travel-empty-state strong,
.travel-empty-state span,
#travelSettingsMessage {
  overflow-wrap: anywhere;
}

.travel-focus-grid button,
.travel-provider-cards button,
.travel-pass-filters button,
.travel-quick-actions.compact button {
  max-width: 100%;
  white-space: normal;
}

@media (max-width: 1120px) {
  #socialHub .messages-layout,
  .memories-gallery-shell,
  .wallet-redesign-shell {
    grid-template-columns: 1fr;
  }

  .conversation-details-panel,
  .memory-comments-panel {
    position: static;
  }

  .memory-gallery-grid,
  .memory-album-grid,
  .wallet-home-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .message-search-row,
  .memory-comment-form,
  .wallet-trip-tile {
    grid-template-columns: 1fr;
  }

  .conversation-card {
    grid-template-columns: 46px minmax(0, 1fr);
  }

  .conversation-card em {
    grid-column: 2;
    justify-self: start;
    max-width: 100%;
    text-align: left;
  }

  .chat-header,
  .pinned-message {
    grid-template-columns: 1fr;
  }

  .memory-gallery-grid,
  .memory-album-grid,
  .wallet-home-grid,
  .wallet-trip-card-grid {
    grid-template-columns: 1fr;
  }

  .wallet-balance-hero {
    grid-column: auto;
  }
}

/* Section 58 cleanup: flatter chat rows, compact wallet sections, itinerary dashboard */
.trip-tab-bar {
  gap: 7px;
}

.trip-tab-bar button {
  border-radius: 12px;
  min-height: 38px;
}

#socialHub .messages-hub,
#socialHub .conversation-list,
#socialHub .chat-workspace,
#socialHub .conversation-details-panel,
#socialHub .message-support-grid article {
  border-radius: 14px;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.055);
}

#socialHub .messages-hub {
  padding: 14px;
  background: #fff;
}

#socialHub .conversation-list {
  gap: 0;
  padding: 0;
  overflow: hidden auto;
}

#socialHub .conversation-card {
  min-height: 72px;
  border: 0;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 0;
  padding: 10px 12px;
  background: #fff;
}

#socialHub .conversation-card:last-child {
  border-bottom: 0;
}

#socialHub .conversation-card.active,
#socialHub .conversation-card:hover,
#socialHub .conversation-card:focus-visible {
  background: #f8fafc;
  outline: none;
}

#socialHub .conversation-card img,
#socialHub .message-avatar {
  border-radius: 12px;
}

#socialHub .message-tabs,
.memories-toolbar {
  border-radius: 14px;
}

#socialHub .message-tabs button,
.memories-toolbar button {
  border-radius: 10px;
}

#socialHub .chat-tool-row button,
#socialHub .chat-form input,
#socialHub .chat-form button,
#socialHub .pinned-message,
#socialHub .pinned-message button,
.chat-detail-actions button,
.chat-danger-actions button {
  border-radius: 10px;
}

.wallet-section-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 12px;
}

.wallet-section-card-grid article {
  display: grid;
  gap: 8px;
  min-width: 0;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 14px;
  background: #fff;
  padding: 14px;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.055);
}

.wallet-section-card-grid span {
  color: #64748b;
  font-size: 0.74rem;
  font-weight: 900;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.wallet-section-card-grid strong {
  color: #0f172a;
  font-size: 1.05rem;
  overflow-wrap: anywhere;
}

.wallet-section-card-grid small {
  color: #64748b;
  line-height: 1.4;
}

.wallet-section-card-grid button {
  justify-self: start;
  min-height: 34px;
  border: 0;
  border-radius: 10px;
  background: #eef7f5;
  color: #174650;
  padding: 0 12px;
  font-weight: 850;
  cursor: pointer;
}

#walletPanel .trip-wallet-card,
#walletPanel .wallet-total,
#walletPanel .wallet-breakdown div,
#walletPanel .wallet-action-grid button,
#walletPanel .shared-wallet-ledger,
#walletPanel .funds-form,
#walletPanel .range-wrap {
  border-radius: 14px;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.055);
}

#walletPanel .trip-wallet-card,
#walletPanel .wallet-total,
#walletPanel .shared-wallet-ledger {
  margin-top: 12px;
}

#walletPanel .wallet-action-grid {
  gap: 10px;
}

#walletPanel .wallet-action-grid button {
  min-height: auto;
  padding: 12px;
}

#walletPanel .wallet-breakdown {
  gap: 10px;
}

#walletPanel .shared-wallet-ledger {
  max-height: 260px;
  overflow: auto;
}

#walletPanel .payment-request-form {
  display: grid;
  grid-template-columns: minmax(180px, 1.4fr) minmax(120px, 0.7fr) minmax(210px, 1fr) auto;
  gap: 10px;
  align-items: end;
  margin: 14px 0;
  padding: 14px;
  border: 1px solid rgba(19, 165, 186, 0.2);
  border-radius: 14px;
  background: #f0fbfc;
}

#walletPanel .payment-request-form[hidden] {
  display: none;
}

#walletPanel .payment-request-form > div {
  display: grid;
  gap: 3px;
}

#walletPanel .payment-request-form > div span,
#walletPanel .payment-request-form .small {
  color: #496777;
  font-size: 0.82rem;
  line-height: 1.35;
}

#walletPanel .payment-request-form label {
  display: grid;
  gap: 5px;
  color: #173b4a;
  font-size: 0.8rem;
  font-weight: 800;
}

#walletPanel .payment-request-form input {
  min-width: 0;
  min-height: 38px;
  padding: 8px 10px;
  border: 1px solid rgba(16, 73, 92, 0.18);
  border-radius: 9px;
  background: #fff;
  color: #102033;
}

#walletPanel .payment-request-form .small {
  grid-column: 1 / -1;
  margin: 0;
}

.wallet-ledger-meta,
.wallet-notification-status {
  display: grid;
  gap: 3px;
  margin: 12px 0 8px;
  padding: 10px 12px;
  border-left: 3px solid #13a5ba;
  border-radius: 10px;
  background: #eefaf6;
}

.wallet-ledger-meta span,
.wallet-notification-status span {
  color: #496777;
  font-size: 0.84rem;
  line-height: 1.35;
}

.wallet-ledger-empty {
  color: #496777;
  font-size: 0.88rem;
}

.wallet-notification-list {
  display: grid;
  gap: 8px;
  margin: 10px 0 14px;
}

.wallet-notification-list:empty {
  display: none;
}

.wallet-notification-list > div {
  display: grid;
  gap: 3px;
  padding: 10px 12px;
  border: 1px solid rgba(16, 73, 92, 0.12);
  border-radius: 10px;
  background: #fff;
}

.wallet-notification-list span {
  color: #496777;
  font-size: 0.84rem;
  line-height: 1.35;
}

@media (max-width: 820px) {
  #walletPanel .payment-request-form {
    grid-template-columns: 1fr 1fr;
  }

  #walletPanel .payment-request-form > div,
  #walletPanel .payment-request-form .small {
    grid-column: 1 / -1;
  }
}

@media (max-width: 520px) {
  #walletPanel .payment-request-form {
    grid-template-columns: 1fr;
  }
}

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

.itinerary-card,
.itinerary-timeline-dashboard,
.upcoming-reservation-grid article {
  min-width: 0;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.96);
  padding: 15px;
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.06);
}

.itinerary-card {
  display: grid;
  gap: 8px;
  align-content: start;
}

.itinerary-card--featured {
  grid-column: span 2;
  color: #fff;
  background:
    linear-gradient(135deg, rgba(12, 34, 50, 0.78), rgba(8, 127, 140, 0.72)),
    url("https://images.unsplash.com/photo-1507525428034-b723cf961d3e?q=80&w=1100&auto=format&fit=crop") center/cover;
}

.itinerary-card span,
.upcoming-reservation-grid span {
  color: #64748b;
  font-size: 0.74rem;
  font-weight: 900;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.itinerary-card--featured span,
.itinerary-card--featured p {
  color: rgba(255, 255, 255, 0.84);
}

.itinerary-card h3,
.itinerary-timeline-dashboard h3,
.upcoming-reservation-grid strong {
  margin: 0;
  color: #0f172a;
  overflow-wrap: anywhere;
}

.itinerary-card--featured h3 {
  color: #fff;
  font-size: clamp(1.45rem, 2.4vw, 2.2rem);
}

.itinerary-card p,
.upcoming-reservation-grid small {
  margin: 0;
  color: #64748b;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.itinerary-action-row,
.upcoming-reservation-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.itinerary-card button,
.itinerary-action-row button,
.upcoming-reservation-grid button {
  width: fit-content;
  min-height: 34px;
  border: 0;
  border-radius: 10px;
  background: #eef7f5;
  color: #174650;
  padding: 0 12px;
  font-weight: 850;
  cursor: pointer;
}

.itinerary-card--featured button {
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
}

.route-preview-line {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 42px;
  border-radius: 14px;
  background: linear-gradient(90deg, #e0f7fa, #fff7ed);
  padding: 0 18px;
}

.route-preview-line::before {
  content: "";
  position: absolute;
  left: 32px;
  right: 32px;
  top: 50%;
  height: 3px;
  border-radius: 999px;
  background: #0891b2;
}

.route-preview-line i {
  position: relative;
  z-index: 1;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #0f172a;
}

.weather-orb {
  width: 58px;
  height: 58px;
  border-radius: 18px;
  background:
    radial-gradient(circle at 35% 35%, #facc15 0 28%, transparent 29%),
    radial-gradient(circle at 62% 62%, #67e8f9 0 38%, #0ea5e9 39% 100%);
  box-shadow: 0 12px 26px rgba(14, 165, 233, 0.28);
}

.trip-progress-track {
  height: 10px;
  border-radius: 999px;
  background: #e2e8f0;
  overflow: hidden;
}

.trip-progress-track i {
  display: block;
  width: var(--w);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #00c2c7, #ff8a5c);
}

.itinerary-timeline-dashboard {
  display: grid;
  gap: 12px;
  margin: 12px 0;
}

.itinerary-timeline-list {
  display: grid;
  gap: 8px;
}

.itinerary-timeline-list details {
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 14px;
  background: #f8fafc;
  overflow: hidden;
}

.itinerary-timeline-list summary {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 12px;
  cursor: pointer;
  list-style: none;
}

.itinerary-timeline-list summary::-webkit-details-marker {
  display: none;
}

.itinerary-timeline-list time {
  color: #475569;
  font-weight: 850;
  white-space: nowrap;
}

.itinerary-timeline-list strong {
  color: #0f172a;
  overflow-wrap: anywhere;
}

.itinerary-timeline-list em {
  border-radius: 999px;
  background: #dcfce7;
  color: #166534;
  padding: 5px 9px;
  font-size: 0.75rem;
  font-style: normal;
  font-weight: 900;
  white-space: nowrap;
}

.itinerary-timeline-list p {
  margin: 0;
  padding: 0 12px 12px 54px;
  color: #64748b;
  line-height: 1.45;
}

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

.upcoming-reservation-grid article {
  display: grid;
  gap: 7px;
}

@media (max-width: 1080px) {
  .itinerary-dashboard,
  .upcoming-reservation-grid,
  .wallet-section-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .itinerary-card--featured {
    grid-column: auto;
  }
}

@media (max-width: 700px) {
  .trip-tab-bar {
    gap: 6px;
  }

  .itinerary-dashboard,
  .upcoming-reservation-grid,
  .wallet-section-card-grid {
    grid-template-columns: 1fr;
  }

  .itinerary-timeline-list summary {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .itinerary-timeline-list time,
  .itinerary-timeline-list em {
    grid-column: 2;
  }

  .itinerary-timeline-list p {
    padding-left: 12px;
  }
}

/* Section 59: Travel itinerary belongs in Travel, Settings use rows */
#rideShareHub .travel-settings-sidebar,
#rideShareHub .travel-settings-main,
#rideShareHub .travel-focus-header,
#rideShareHub .travel-focus-grid article,
#rideShareHub .travel-provider-cards article,
#rideShareHub .travel-empty-state,
#rideShareHub .travel-map-dashboard,
#rideShareHub .focus-weather,
#rideShareHub .visual-pass-card,
#rideShareHub .travel-itinerary-section,
#rideShareHub .travel-timeline-section,
#rideShareHub .travel-reservation-sections article {
  border-radius: 14px;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.055);
}

#rideShareHub .travel-focus-header {
  color: #0f172a;
  background:
    linear-gradient(135deg, rgba(236, 253, 245, 0.92), rgba(240, 249, 255, 0.92)),
    #fff;
}

#rideShareHub .travel-focus-header h3,
#rideShareHub .travel-focus-header .eyebrow,
#rideShareHub .travel-focus-header p {
  color: #0f172a;
  text-shadow: none;
}

#rideShareHub .travel-focus-icon {
  background: #e0f7fa;
  border-color: rgba(8, 127, 140, 0.14);
}

.travel-itinerary-dashboard,
.travel-reservation-sections {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.travel-itinerary-section,
.travel-timeline-section,
.travel-reservation-sections article {
  min-width: 0;
  border: 1px solid rgba(15, 23, 42, 0.08);
  background: #fff;
  padding: 14px;
}

.travel-itinerary-section.trip-overview {
  grid-column: span 2;
}

.travel-itinerary-section {
  display: grid;
  gap: 8px;
  align-content: start;
}

.travel-itinerary-section span,
.travel-reservation-sections span {
  color: #64748b;
  font-size: 0.74rem;
  font-weight: 900;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.travel-itinerary-section h3,
.travel-reservation-sections strong {
  margin: 0;
  color: #0f172a;
  overflow-wrap: anywhere;
}

.travel-itinerary-section p,
.travel-reservation-sections small {
  margin: 0;
  color: #64748b;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.travel-itinerary-section dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
}

.travel-itinerary-section dl div {
  padding: 9px;
  border-radius: 10px;
  background: #f8fafc;
}

.travel-itinerary-section dt {
  color: #64748b;
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
}

.travel-itinerary-section dd {
  margin: 2px 0 0;
  color: #0f172a;
  font-weight: 850;
  overflow-wrap: anywhere;
}

.travel-itinerary-section button,
.travel-timeline-section button,
.travel-reservation-sections button {
  justify-self: start;
  min-height: 34px;
  border: 0;
  border-radius: 10px;
  background: #eef7f5;
  color: #174650;
  padding: 0 12px;
  font-weight: 850;
  cursor: pointer;
}

.travel-timeline-section {
  display: grid;
  gap: 12px;
}

.travel-itinerary-rows {
  display: grid;
  gap: 8px;
}

.travel-itinerary-rows details {
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 12px;
  background: #f8fafc;
  overflow: hidden;
}

.travel-itinerary-rows summary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) minmax(120px, auto) auto;
  gap: 10px;
  align-items: center;
  padding: 12px;
  cursor: pointer;
  list-style: none;
}

.travel-itinerary-rows summary::-webkit-details-marker {
  display: none;
}

.travel-itinerary-rows time,
.travel-itinerary-rows span,
.travel-itinerary-rows em {
  color: #64748b;
  font-size: 0.8rem;
  font-weight: 850;
}

.travel-itinerary-rows strong {
  color: #0f172a;
  overflow-wrap: anywhere;
}

.travel-itinerary-rows em {
  width: fit-content;
  border-radius: 999px;
  background: #dcfce7;
  color: #166534;
  padding: 5px 9px;
  font-style: normal;
  white-space: nowrap;
}

.travel-itinerary-rows p {
  margin: 0;
  padding: 0 12px 12px;
  color: #64748b;
  line-height: 1.45;
}

.travel-reservation-sections article {
  display: grid;
  gap: 7px;
}

.settings-shell {
  display: grid;
  grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
  gap: 14px;
  margin: 16px 0;
}

.settings-nav-panel,
.settings-main-panel {
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.055);
}

.settings-nav-panel {
  display: grid;
  gap: 7px;
  align-content: start;
  padding: 12px;
}

.settings-nav-panel label {
  display: grid;
  gap: 6px;
  color: #64748b;
  font-size: 0.76rem;
  font-weight: 900;
  text-transform: uppercase;
}

.settings-nav-panel input {
  min-height: 40px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 10px;
  padding: 0 12px;
  font: inherit;
  text-transform: none;
}

.settings-nav-panel button {
  min-height: 38px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #334155;
  text-align: left;
  padding: 0 12px;
  font-weight: 850;
  cursor: pointer;
}

.settings-nav-panel button.active,
.settings-nav-panel button:hover,
.settings-nav-panel button:focus-visible {
  background: #0f172a;
  color: #fff;
  outline: none;
}

.settings-main-panel {
  min-width: 0;
  padding: 14px;
}

.settings-section {
  display: none;
}

.settings-section.active {
  display: grid;
  gap: 10px;
}

.settings-section h3,
.settings-section p {
  margin: 0;
}

.settings-section p:not(.eyebrow) {
  color: #64748b;
  line-height: 1.45;
}

.settings-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  min-width: 0;
  padding: 12px 0;
  border-top: 1px solid rgba(15, 23, 42, 0.08);
}

.settings-row strong,
.settings-row span {
  display: block;
  overflow-wrap: anywhere;
}

.settings-row strong {
  color: #0f172a;
}

.settings-row span {
  color: #64748b;
  line-height: 1.4;
}

.settings-row button,
.settings-row select {
  max-width: 220px;
  min-height: 36px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 10px;
  background: #f8fafc;
  color: #174650;
  padding: 0 11px;
  font: inherit;
  font-weight: 850;
}

.settings-toggle {
  position: relative;
  display: inline-grid;
  align-items: center;
  width: 48px;
  height: 28px;
}

.settings-toggle input {
  position: absolute;
  opacity: 0;
}

.settings-toggle span {
  display: block;
  width: 48px;
  height: 28px;
  border-radius: 999px;
  background: #cbd5e1;
}

.settings-toggle span::after {
  content: "";
  display: block;
  width: 22px;
  height: 22px;
  margin: 3px;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.18s ease;
}

.settings-toggle input:checked + span {
  background: #0891b2;
}

.settings-toggle input:checked + span::after {
  transform: translateX(20px);
}

.my-profile-panel,
.admin-panel {
  display: grid;
  gap: 16px;
}

.profile-hero-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  padding: 18px;
  border: 1px solid rgba(8, 127, 140, 0.14);
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(20, 184, 166, 0.14), rgba(249, 115, 22, 0.12)),
    #fff;
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.08);
}

.profile-hero-card h2,
.profile-hero-card p {
  margin: 0;
}

.profile-hero-card p:not(.eyebrow) {
  color: #475569;
  line-height: 1.5;
}

.profile-completion-track {
  display: grid;
  gap: 7px;
  margin-top: 12px;
  max-width: 420px;
}

.profile-completion-track span {
  color: #0f172a;
  font-weight: 800;
}

.profile-completion-track i {
  display: block;
  height: 9px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.12);
}

.profile-completion-track b {
  display: block;
  width: var(--w, 0%);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #06b6d4, #f97316);
}

.profile-social-hero {
  position: relative;
  min-height: 320px;
  overflow: hidden;
  border-radius: 22px;
  background: linear-gradient(135deg, #0891b2, #f97316);
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.14);
}

.profile-social-hero > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.profile-social-hero > img[hidden] {
  display: none;
}

.profile-social-overlay {
  position: absolute;
  inset: auto 18px 18px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) minmax(180px, 260px);
  gap: 16px;
  align-items: end;
  padding: 18px;
  border: 1px solid rgba(255, 255, 255, 0.26);
  border-radius: 18px;
  color: #fff;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.16), rgba(15, 23, 42, 0.68));
  backdrop-filter: blur(8px);
}

.profile-social-overlay h2,
.profile-social-overlay p,
.profile-social-overlay strong {
  margin: 0;
  color: inherit;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.28);
}

.profile-social-overlay .eyebrow {
  color: rgba(255, 255, 255, 0.78);
}

.profile-social-avatar {
  width: 118px;
  height: 118px;
  border: 4px solid rgba(255, 255, 255, 0.86);
  border-radius: 999px;
  box-shadow: 0 14px 28px rgba(15, 23, 42, 0.22);
}

.profile-social-overlay .profile-completion-track span {
  color: #fff;
}

.profile-social-overlay .profile-completion-track i {
  background: rgba(255, 255, 255, 0.28);
}

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

.profile-quick-actions button,
.cover-photo-card button,
.photo-audience-card button {
  min-height: 38px;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 10px;
  background: #f8fafc;
  color: #174650;
  padding: 0 12px;
  font: inherit;
  font-weight: 850;
}

.profile-card-grid,
.profile-stats-grid,
.profile-adventure-grid,
.profile-connections-grid {
  display: grid;
  gap: 14px;
}

.profile-card-grid {
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
}

.profile-card-grid article,
.profile-stats-grid article,
.profile-adventure-grid article,
.profile-memory-preview,
.profile-connections-grid article,
.cover-photo-card,
.photo-audience-card {
  min-width: 0;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.065);
}

.profile-card-grid article,
.profile-stats-grid article,
.profile-adventure-grid article,
.profile-memory-preview,
.profile-connections-grid article {
  padding: 14px;
}

.profile-identity-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px;
  align-items: center;
}

.profile-identity-card dl {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
}

.profile-identity-card dt {
  color: #64748b;
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
}

.profile-identity-card dd {
  margin: 0;
  color: #0f172a;
  font-weight: 800;
}

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

.profile-stats-grid article {
  background: linear-gradient(135deg, rgba(20, 184, 166, 0.12), rgba(249, 115, 22, 0.08)), #fff;
}

.profile-stats-grid span,
.profile-adventure-grid span {
  color: #64748b;
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
}

.profile-stats-grid strong {
  display: block;
  color: #0f172a;
  font-size: clamp(1.45rem, 2.7vw, 2.3rem);
  line-height: 1;
}

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

.profile-adventure-grid img {
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: 12px;
  object-fit: cover;
}

.profile-adventure-grid article,
.profile-connections-grid article {
  display: grid;
  gap: 8px;
}

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

.profile-memory-gallery img {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 12px;
  object-fit: cover;
}

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

.profile-connections-grid article {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
}

.profile-connections-grid small {
  grid-column: 2;
  color: #64748b;
}

.cover-photo-card,
.photo-audience-card {
  display: grid;
  gap: 10px;
  padding: 14px;
}

.photo-audience-card label {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  color: #334155;
  font-weight: 750;
}

@media (max-width: 1080px) {
  .profile-card-grid,
  .profile-adventure-grid {
    grid-template-columns: 1fr;
  }

  .profile-stats-grid,
  .profile-memory-gallery,
  .profile-connections-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .profile-social-overlay {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .profile-social-overlay .profile-completion-track {
    grid-column: 1 / -1;
  }
}

@media (max-width: 680px) {
  .profile-social-hero {
    min-height: 420px;
    border-radius: 16px;
  }

  .profile-social-overlay {
    inset: 12px;
    grid-template-columns: 1fr;
    align-content: end;
    text-align: left;
  }

  .profile-social-avatar {
    width: 96px;
    height: 96px;
  }

  .profile-quick-actions,
  .profile-quick-actions button {
    width: 100%;
  }

  .profile-identity-card,
  .profile-identity-card dl,
  .profile-stats-grid,
  .profile-memory-gallery,
  .profile-connections-grid {
    grid-template-columns: 1fr;
  }

  .profile-connections-grid small {
    grid-column: auto;
  }
}

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

.profile-personal-grid article {
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 14px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.055);
}

.profile-personal-grid label {
  display: grid;
  gap: 6px;
  color: #334155;
  font-weight: 800;
}

.profile-personal-grid input,
.profile-personal-grid textarea,
.profile-personal-grid select {
  width: 100%;
  min-width: 0;
  min-height: 40px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 10px;
  background: #f8fafc;
  color: #0f172a;
  padding: 9px 11px;
  font: inherit;
}

.admin-panel .settings-nav-panel button {
  min-height: 40px;
}

.admin-panel [data-admin-only] {
  border-color: rgba(249, 115, 22, 0.22);
  background: rgba(255, 247, 237, 0.72);
}

.danger-row {
  border-color: rgba(220, 38, 38, 0.18);
}

.danger-row button {
  color: #991b1b;
  border-color: rgba(220, 38, 38, 0.24);
  background: #fef2f2;
}

#myProfile .travel-badge-panel,
#myProfile .profile-photo-manager,
#adminPanel .theme-studio,
#adminPanel .security-list,
#adminPanel .audit-grid,
#adminPanel .backend-readiness-grid {
  border-radius: 14px;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.055);
}

@media (max-width: 1080px) {
  .travel-itinerary-dashboard,
  .travel-reservation-sections {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .travel-itinerary-section.trip-overview {
    grid-column: auto;
  }
}

@media (max-width: 760px) {
  .settings-shell,
  .profile-hero-card,
  .profile-personal-grid,
  .travel-itinerary-dashboard,
  .travel-reservation-sections,
  .travel-itinerary-section dl {
    grid-template-columns: 1fr;
  }

  .travel-itinerary-rows summary,
  .settings-row {
    grid-template-columns: 1fr;
  }

  .settings-row button,
  .settings-row select {
    max-width: none;
    width: 100%;
  }

  .settings-nav-panel {
    position: static;
  }
}

/* Section 60: global widget fit and no-overflow confirmation layer */
html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

.panel,
.travel-widget,
.travel-focus-panel,
.travel-focus-grid article,
.travel-itinerary-section,
.travel-timeline-section,
.travel-reservation-sections article,
.itinerary-card,
.itinerary-timeline-dashboard,
.upcoming-reservation-grid article,
.wallet-summary-card,
.wallet-trip-tile,
.wallet-virtual-preview,
.wallet-section-card-grid article,
.trip-wallet-card,
.wallet-total,
.wallet-breakdown div,
.wallet-action-grid button,
.shared-wallet-ledger,
.virtual-card-panel,
.visual-pass-card,
.messages-hub,
.conversation-card,
.chat-workspace,
.conversation-details-panel,
.memory-media-card,
.memory-comments-panel,
.memory-album-grid article,
.event-experience-card,
.social-card,
.my-profile-panel,
.admin-panel,
.profile-hero-card,
.profile-social-hero,
.profile-card-grid article,
.profile-stats-grid article,
.profile-adventure-grid article,
.profile-memory-preview,
.profile-connections-grid article,
.profile-personal-grid article,
.settings-shell,
.settings-nav-panel,
.settings-main-panel,
.settings-row,
.profile-photo-manager,
.theme-studio,
.travel-badge-panel,
.reservation-reminder-card,
.smart-departure-card,
.reservation-ai-card,
.ride-clean-card,
.ride-provider-card,
.private-driver-panel,
.explore-card {
  min-width: 0;
  max-width: 100%;
  height: auto;
  min-height: 0;
  overflow: visible;
  overflow-wrap: anywhere;
  word-break: normal;
}

.panel,
.travel-widget,
.travel-focus-grid article,
.travel-itinerary-section,
.travel-timeline-section,
.travel-reservation-sections article,
.itinerary-card,
.upcoming-reservation-grid article,
.wallet-summary-card,
.wallet-trip-tile,
.wallet-virtual-preview,
.wallet-section-card-grid article,
.conversation-details-panel,
.memory-media-card,
.memory-comments-panel,
.settings-nav-panel,
.settings-main-panel,
.settings-row,
.reservation-reminder-card,
.ride-clean-card,
.social-card {
  border-radius: 14px;
}

h1,
h2,
h3,
h4,
p,
span,
small,
strong,
em,
time,
label,
button,
a,
dt,
dd,
li,
input,
select,
textarea,
code {
  max-width: 100%;
  overflow-wrap: anywhere;
}

img,
video,
canvas,
svg,
iframe {
  max-width: 100%;
}

.panel img,
.travel-widget img,
.travel-focus-grid img,
.memory-media-card img,
.trip-wallet-card img,
.wallet-trip-tile img,
.platform-card img,
.conversation-card img,
.share-preview img,
.profile-photo-preview img {
  display: block;
  max-width: 100%;
  object-fit: cover;
}

button,
.primary-button,
.ghost-button,
.icon-button,
select,
input,
textarea {
  max-width: 100%;
}

.button-row,
.mini-action-row,
.hero-actions,
.travel-quick-actions,
.travel-pass-filters,
.payment-method-grid,
.wallet-mini-actions,
.wallet-quick-actions-redesign,
.memory-card-actions,
.social-action-row,
.ride-account-actions,
.itinerary-action-row,
.pass-actions,
.platform-actions {
  flex-wrap: wrap;
  align-items: center;
}

.button-row button,
.mini-action-row button,
.hero-actions button,
.travel-quick-actions button,
.travel-pass-filters button,
.payment-method-grid button,
.wallet-mini-actions button,
.wallet-quick-actions-redesign button,
.memory-card-actions button,
.social-action-row button,
.ride-account-actions button,
.itinerary-action-row button,
.pass-actions button,
.platform-actions button {
  white-space: normal;
}

.status-pill,
.card-status,
.compliance-badge,
.social-pill,
.connection-status {
  width: fit-content;
  max-width: 100%;
  white-space: normal;
  line-height: 1.25;
}

.content-grid,
.dashboard-widget-grid,
.travel-settings-shell,
.travel-focus-grid,
.travel-itinerary-dashboard,
.travel-reservation-sections,
.itinerary-dashboard,
.upcoming-reservation-grid,
.wallet-home-grid,
.wallet-trip-card-grid,
.wallet-section-card-grid,
.messages-layout,
.message-support-grid,
.memories-gallery-shell,
.memory-gallery-grid,
.memory-album-grid,
.social-hub-layout,
.platform-grid,
.event-experience-grid,
.events-dashboard-grid,
.profile-personal-grid,
.settings-shell,
.reservation-reminder-grid,
.ride-two-column-grid,
.ride-recommendation-grid,
.private-driver-list {
  min-width: 0;
}

.visual-pass-card {
  display: grid;
  gap: 12px;
  width: 100%;
}

.visual-pass-card .pass-route,
.visual-pass-card dl,
.visual-pass-card .pass-actions,
.visual-pass-card .pass-topline,
.visual-pass-card .pass-provider {
  min-width: 0;
}

.visual-pass-card dl {
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
}

.official-code,
.barcode-strip {
  max-width: 100%;
  overflow: hidden;
}

.official-code {
  justify-self: start;
}

.barcode-strip {
  width: 100%;
}

.virtual-card {
  max-width: 100%;
  min-height: 0;
  overflow: hidden;
}

.virtual-card .card-number {
  font-size: clamp(1.35rem, 4vw, 2.3rem);
  letter-spacing: 0;
  overflow-wrap: anywhere;
}

.card-meta,
.card-balance-grid,
.wallet-breakdown,
.bill-total-grid,
.ride-estimate-grid,
.weather-metrics,
.info-status-grid {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.shared-wallet-ledger div,
.card-ledger div,
.transaction-row,
.document-list div,
.alert-preview-list div,
.ride-history-list article,
.ride-notification-list article {
  min-width: 0;
  overflow-wrap: anywhere;
}

.modern-messages .msg,
.messages .msg,
.memory-comment-list div {
  max-width: 100%;
  overflow-wrap: anywhere;
  white-space: normal;
}

.chat-form {
  position: relative;
  z-index: 1;
}

.chat-form input {
  min-width: 0;
}

.settings-row {
  align-items: start;
}

.settings-toggle {
  flex: 0 0 auto;
  justify-self: end;
}

@media (max-width: 1024px) {
  .content-grid,
  .dashboard-widget-grid,
  .travel-focus-grid,
  .travel-itinerary-dashboard,
  .travel-reservation-sections,
  .itinerary-dashboard,
  .upcoming-reservation-grid,
  .wallet-home-grid,
  .wallet-trip-card-grid,
  .wallet-section-card-grid,
  .memory-gallery-grid,
  .memory-album-grid,
  .platform-grid,
  .event-experience-grid,
  .profile-personal-grid,
  .reservation-reminder-grid,
  .ride-recommendation-grid,
  .private-driver-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 680px) {
  .content-grid,
  .dashboard-widget-grid,
  .travel-settings-shell,
  .travel-focus-grid,
  .travel-itinerary-dashboard,
  .travel-reservation-sections,
  .itinerary-dashboard,
  .upcoming-reservation-grid,
  .wallet-redesign-shell,
  .wallet-home-grid,
  .wallet-trip-card-grid,
  .wallet-section-card-grid,
  .messages-layout,
  .message-support-grid,
  .memories-gallery-shell,
  .memory-gallery-grid,
  .memory-album-grid,
  .social-hub-layout,
  .platform-grid,
  .event-experience-grid,
  .settings-shell,
  .reservation-reminder-grid,
  .ride-two-column-grid,
  .ride-recommendation-grid,
  .private-driver-list,
  .travel-itinerary-section dl,
  .travel-provider-cards,
  .ride-entry-grid,
  .ride-location-grid {
    grid-template-columns: 1fr;
  }

  .panel,
  .travel-settings-main,
  .settings-main-panel,
  .messages-hub,
  .wallet-redesign-shell,
  .memories-panel {
    padding: 12px;
  }

  .travel-focus-header,
  .section-heading,
  .chat-header,
  .pinned-message,
  .settings-row,
  .wallet-trip-tile,
  .trip-wallet-card,
  .profile-photo-main,
  .smart-departure-card,
  .ride-card-heading,
  .social-card-header,
  .travel-itinerary-rows summary,
  .itinerary-timeline-list summary {
    grid-template-columns: 1fr;
  }

  .button-row button,
  .mini-action-row button,
  .hero-actions button,
  .travel-quick-actions button,
  .payment-method-grid button,
  .wallet-mini-actions button,
  .wallet-quick-actions-redesign button,
  .memory-card-actions button,
  .social-action-row button,
  .ride-account-actions button,
  .itinerary-action-row button,
  .pass-actions button,
  .platform-actions button,
  .travel-focus-grid button,
  .travel-provider-cards button,
  .travel-itinerary-section button,
  .travel-reservation-sections button,
  .settings-row button,
  .settings-row select {
    width: 100%;
  }

  .settings-toggle {
    justify-self: start;
  }

  .visual-pass-card .pass-route {
    grid-template-columns: 1fr;
    gap: 8px;
    text-align: left;
  }

  .official-code {
    justify-self: stretch;
    width: min(100%, 220px);
  }
}

#rideShareHub .travel-overview-card .travel-summary-tile {
  position: relative;
  min-height: 96px;
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 14px 14px 12px 16px;
  overflow: hidden;
  border: 1px solid rgba(8, 127, 140, 0.12);
  border-radius: 12px;
  background: linear-gradient(180deg, #ffffff, rgba(248, 253, 255, 0.78));
  color: inherit;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.055);
  text-align: left;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

/* Section 63 travel tab presentation: keep the familiar #rideShareHub tile view first */
#rideShareHub {
  display: flex;
  flex-direction: column;
}

#rideShareHub > .section-heading {
  order: 0;
}

#rideShareHub > .travel-overview-card {
  order: 2;
}

#rideShareHub > .travel-section-nav {
  order: 3;
}

#rideShareHub > .travel-selected-tile {
  order: 4;
}

#rideShareHub > .travel-command-header {
  order: 5;
}

#rideShareHub > .travel-settings-shell {
  order: 6;
}

#rideShareHub > .travel-workspace {
  order: 7;
}

#rideShareHub > .transport-confirmation-hub {
  order: 8;
}

#rideShareHub > .ride-hub-redesign {
  order: 9;
}

#rideShareHub > .ride-assistant-panel,
#rideShareHub > .payment-method-grid,
#rideShareHub > #rideMessage,
#rideShareHub > .corporate-meal-rules {
  order: 10;
}

#rideShareHub .travel-command-header {
  margin-top: 6px;
  padding-top: 0;
}

#rideShareHub .travel-command-header article,
#rideShareHub .travel-command-actions {
  box-shadow: 0 6px 14px rgba(15, 23, 42, 0.045);
}

/* Section 62: Travel and Wallet dashboards with full text visibility */
:root {
  --td-title-size: clamp(1.35rem, 2.6vw, 2.25rem);
  --td-section-size: clamp(1.05rem, 1.7vw, 1.35rem);
  --td-card-title-size: clamp(0.98rem, 1.2vw, 1.15rem);
  --td-body-size: clamp(0.88rem, 0.95vw, 0.98rem);
  --td-label-size: clamp(0.72rem, 0.82vw, 0.82rem);
}

.panel h2 {
  font-size: var(--td-title-size);
  line-height: 1.08;
}

.panel h3 {
  font-size: var(--td-section-size);
  line-height: 1.18;
}

.panel h4,
.travel-dashboard-card strong,
.travel-booking-summary strong,
.travel-transport-summary strong,
.wallet-dashboard-sections strong,
.wallet-dashboard-header strong {
  font-size: var(--td-card-title-size);
  line-height: 1.18;
}

.panel p,
.panel small,
.panel span,
.panel label,
.panel button,
.panel input,
.panel select,
.panel textarea,
.panel dd {
  font-size: var(--td-body-size);
  line-height: 1.42;
}

.eyebrow,
.travel-command-header span,
.travel-dashboard-card .eyebrow,
.travel-booking-summary span,
.travel-transport-summary span,
.wallet-dashboard-header span,
.wallet-dashboard-sections .eyebrow,
.wallet-metric-list span {
  font-size: var(--td-label-size);
  letter-spacing: 0.03em;
}

.travel-command-header,
.wallet-dashboard-header {
  display: grid;
  grid-template-columns: minmax(260px, 1.5fr) repeat(3, minmax(150px, 0.8fr)) auto;
  gap: 12px;
  align-items: stretch;
  margin: 12px 0 16px;
}

.travel-command-header article,
.wallet-dashboard-header article,
.travel-command-actions,
.travel-dashboard-card,
.travel-booking-summary article,
.travel-transport-summary article,
.wallet-dashboard-sections article,
.wallet-metric-list div {
  min-width: 0;
  height: auto;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.055);
  overflow: visible;
}

.travel-command-header article,
.wallet-dashboard-header article,
.travel-command-actions {
  display: grid;
  align-content: center;
  gap: 5px;
  padding: 12px;
}

.travel-command-trip,
.wallet-dashboard-header article:first-child {
  background: linear-gradient(135deg, rgba(6, 182, 212, 0.11), rgba(249, 115, 22, 0.1)), #fff;
}

.travel-command-header span,
.wallet-dashboard-header span,
.travel-booking-summary span,
.travel-transport-summary span,
.wallet-metric-list span {
  color: #64748b;
  font-weight: 900;
  text-transform: uppercase;
}

.travel-command-header strong,
.wallet-dashboard-header strong {
  color: #0f172a;
  overflow-wrap: anywhere;
}

.travel-command-header small,
.wallet-dashboard-header small {
  color: #64748b;
  overflow-wrap: anywhere;
}

.travel-command-actions {
  grid-template-columns: 1fr;
  min-width: 150px;
}

.travel-command-actions button,
.travel-dashboard-card button,
.travel-booking-summary button,
.travel-transport-summary button,
.wallet-dashboard-sections button {
  width: fit-content;
  max-width: 100%;
  min-height: 36px;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 10px;
  background: #f8fafc;
  color: #174650;
  padding: 0 11px;
  font: inherit;
  font-weight: 850;
  white-space: normal;
}

.travel-dashboard-sections,
.travel-booking-summary,
.travel-transport-summary,
.wallet-dashboard-sections,
.wallet-metric-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 12px;
}

.travel-dashboard-card,
.travel-booking-summary article,
.travel-transport-summary article,
.wallet-dashboard-sections article,
.wallet-metric-list div {
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 14px;
}

.travel-dashboard-card--overview {
  grid-column: span 2;
}

.travel-dashboard-card dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
}

.travel-dashboard-card dt {
  color: #64748b;
  font-size: var(--td-label-size);
  font-weight: 900;
  text-transform: uppercase;
}

.travel-dashboard-card dd {
  margin: 0;
  color: #0f172a;
  font-weight: 800;
  overflow-wrap: anywhere;
}

.travel-dashboard-card--weather {
  position: relative;
  overflow: hidden;
  padding-right: 86px;
}

.weather-dashboard-visual {
  position: absolute;
  right: 12px;
  bottom: 12px;
  width: 62px;
  height: 48px;
  border-radius: 16px;
  opacity: 0.82;
  background:
    radial-gradient(circle at 19px 16px, #fbbf24 0 11px, transparent 12px),
    radial-gradient(circle at 39px 29px, #fff 0 16px, transparent 17px),
    radial-gradient(circle at 22px 33px, #fff 0 13px, transparent 14px),
    linear-gradient(180deg, #7dd3fc, #38bdf8);
  pointer-events: none;
  z-index: 0;
}

.travel-dashboard-card--weather > *:not(.weather-dashboard-visual) {
  position: relative;
  z-index: 1;
}

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

.wallet-redesign-shell {
  grid-template-columns: minmax(190px, 230px) minmax(0, 1fr);
}

.wallet-section-nav,
.wallet-summary-card,
.wallet-trip-tile,
.wallet-virtual-preview,
.wallet-balance-hero {
  border-radius: 14px;
}

.wallet-balance-hero {
  min-height: 132px;
  padding: 16px;
}

.wallet-balance-hero strong {
  font-size: clamp(1.9rem, 3.6vw, 3.2rem);
  line-height: 1;
}

.wallet-trip-card-grid {
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  align-items: stretch;
}

.wallet-dashboard-sections {
  grid-column: 1 / -1;
}

.wallet-dashboard-sections > article:first-child {
  grid-column: span 3;
}

.wallet-metric-list {
  margin-top: 0;
}

.wallet-metric-list div {
  box-shadow: none;
  background: #f8fafc;
}

.wallet-dashboard-sections > article:not(:first-child) strong,
.wallet-dashboard-sections > article:not(:first-child) small {
  overflow-wrap: anywhere;
}

.wallet-trip-tile {
  gap: 12px;
}

.wallet-virtual-preview {
  align-content: center;
}

.wallet-quick-actions-redesign button {
  border-radius: 10px;
  min-height: 38px;
}

#walletPanel .trip-wallet-card,
#walletPanel .wallet-total,
#walletPanel .security-note,
#walletPanel .wallet-breakdown,
#walletPanel .wallet-action-grid,
#walletPanel .range-wrap,
#walletPanel .funds-form,
#walletPanel .shared-wallet-ledger,
#walletPanel .budget-line,
#walletPanel .bar {
  margin-top: 12px;
}

@media (max-width: 1180px) {
  .travel-command-header {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .travel-command-trip,
  .travel-command-actions {
    grid-column: span 2;
  }

  .wallet-dashboard-header,
  .travel-dashboard-sections,
  .travel-booking-summary,
  .travel-transport-summary,
  .wallet-dashboard-sections,
  .wallet-metric-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .wallet-dashboard-sections > article:first-child,
  .travel-dashboard-card--overview {
    grid-column: span 2;
  }
}

@media (max-width: 720px) {
  .travel-command-header,
  .wallet-dashboard-header,
  .travel-dashboard-sections,
  .travel-booking-summary,
  .travel-transport-summary,
  .wallet-dashboard-sections,
  .wallet-metric-list,
  .wallet-trip-card-grid {
    grid-template-columns: 1fr;
  }

  .travel-command-trip,
  .travel-command-actions,
  .wallet-dashboard-sections > article:first-child,
  .travel-dashboard-card--overview {
    grid-column: auto;
  }

  .travel-dashboard-card--weather {
    padding-right: 14px;
    padding-bottom: 62px;
  }

  .travel-command-actions button,
  .travel-dashboard-card button,
  .travel-booking-summary button,
  .travel-transport-summary button,
  .wallet-dashboard-sections button {
    width: 100%;
  }
}

#rideShareHub .travel-overview-card .travel-summary-tile:hover,
#rideShareHub .travel-overview-card .travel-summary-tile:focus-visible,
#rideShareHub .travel-overview-card .travel-summary-tile.active {
  border-color: rgba(0, 150, 199, 0.34);
  box-shadow: 0 14px 28px rgba(15, 23, 42, 0.095);
  transform: translateY(-1px);
}

#rideShareHub .travel-overview-card .travel-summary-tile::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--tile-accent, #087f8c);
}

#rideShareHub .travel-overview-card .travel-summary-tile::after {
  content: none;
}

#rideShareHub .travel-overview-card .travel-summary-tile:nth-child(1) {
  --tile-accent: #0096c7;
}

#rideShareHub .travel-overview-card .travel-summary-tile:nth-child(2) {
  --tile-accent: #ffba49;
}

#rideShareHub .travel-overview-card .travel-summary-tile:nth-child(3) {
  --tile-accent: #22c55e;
}

#rideShareHub .travel-overview-card .travel-summary-tile:nth-child(4) {
  --tile-accent: #ff7a59;
}

#rideShareHub .travel-overview-card .travel-summary-tile:nth-child(5) {
  --tile-accent: #8b5cf6;
}

#rideShareHub .travel-summary-tile--trip {
  min-height: 160px;
  grid-row: span 2;
  align-content: end;
  padding: 20px;
  background:
    linear-gradient(145deg, rgba(3, 30, 40, 0.18), rgba(0, 150, 199, 0.08)),
    linear-gradient(135deg, rgba(8, 189, 184, 0.18), rgba(255, 138, 92, 0.1)),
    #ffffff;
}

#rideShareHub .travel-summary-tile--trip strong {
  font-size: 28px;
}

#rideShareHub .travel-summary-tile em {
  position: relative;
  z-index: 1;
  width: fit-content;
  max-width: 100%;
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.74);
  color: #174650;
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
  line-height: 1.2;
}

#rideShareHub .travel-summary-tile--weather {
  padding-right: 92px;
  background:
    linear-gradient(110deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.64)),
    linear-gradient(135deg, rgba(255, 186, 73, 0.22), rgba(0, 150, 199, 0.18));
}

#rideShareHub .weather-visual {
  position: absolute;
  right: 14px;
  bottom: 12px;
  width: 70px;
  height: 52px;
  border-radius: 18px;
  background:
    radial-gradient(circle at 24px 18px, #ffd166 0 13px, transparent 14px),
    radial-gradient(circle at 42px 30px, #ffffff 0 17px, transparent 18px),
    radial-gradient(circle at 24px 34px, #ffffff 0 15px, transparent 16px),
    linear-gradient(180deg, #7dd3fc, #38bdf8);
  box-shadow: inset 0 -10px 18px rgba(14, 116, 144, 0.18), 0 8px 18px rgba(15, 23, 42, 0.12);
}

#rideShareHub .weather-visual::after {
  content: "";
  position: absolute;
  left: 18px;
  right: 14px;
  bottom: 5px;
  height: 12px;
  background: repeating-linear-gradient(100deg, rgba(0, 150, 199, 0.72) 0 2px, transparent 2px 9px);
}

#rideShareHub .travel-summary-tile--pass {
  min-height: 126px;
}

#rideShareHub .mini-boarding-pass {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr 44px;
  gap: 5px;
  padding: 9px;
  border: 1px dashed rgba(8, 127, 140, 0.32);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.78);
}

#rideShareHub .mini-boarding-pass b {
  display: grid;
  min-height: 24px;
  align-items: center;
  padding: 3px 5px;
  border-radius: 7px;
  background: rgba(8, 189, 184, 0.1);
  color: #0f2f3a;
  font-size: 10px;
  font-style: normal;
  line-height: 1;
}

#rideShareHub .mini-boarding-pass b:last-child {
  grid-row: span 2;
  min-height: 54px;
  background:
    linear-gradient(90deg, #0f2f3a 0 3px, transparent 3px 6px),
    linear-gradient(#0f2f3a 0 3px, transparent 3px 6px),
    #ffffff;
  background-size: 9px 9px;
}

#rideShareHub .travel-overview-card span,
#rideShareHub .travel-overview-card strong,
#rideShareHub .travel-overview-card small {
  position: relative;
  z-index: 1;
}

#rideShareHub .travel-overview-card span {
  color: #47707a;
  font-size: 11px;
  letter-spacing: 0;
  text-transform: uppercase;
}

#rideShareHub .travel-overview-card strong {
  color: #0f2f3a;
  font-size: 19px;
  line-height: 1.15;
}

#rideShareHub .travel-overview-card small {
  color: #5f7882;
  font-size: 12px;
  line-height: 1.35;
}

@media (max-width: 900px) {
  #rideShareHub .travel-overview-card {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #rideShareHub .travel-summary-tile--trip {
    grid-row: auto;
    grid-column: span 2;
  }
}

@media (max-width: 640px) {
  #rideShareHub .travel-overview-card {
    grid-template-columns: 1fr;
  }

  #rideShareHub .travel-summary-tile--trip {
    grid-column: auto;
    min-height: 132px;
  }

  #rideShareHub .travel-summary-tile--trip strong {
    font-size: 24px;
  }

  #rideShareHub .travel-summary-tile--weather {
    padding-right: 86px;
  }
}

/* Section 64: Smart Travel Search, wallet command actions, and realistic pass UI */
#rideShareHub > .travel-smart-search {
  order: 1;
}

.travel-smart-search {
  display: grid;
  gap: 12px;
  margin: 12px 0;
  padding: 14px;
  border: 1px solid rgba(8, 127, 140, 0.13);
  border-radius: 16px;
  background:
    linear-gradient(135deg, rgba(8, 189, 184, 0.13), rgba(255, 186, 73, 0.11)),
    #ffffff;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.07);
}

.travel-smart-search-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: end;
}

.travel-smart-search-head h3 {
  margin: 2px 0 0;
}

.travel-smart-search-head > span {
  align-self: center;
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.75);
  color: #174650;
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

.travel-smart-search-row {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto auto;
  gap: 8px;
  align-items: center;
  padding: 8px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.88);
}

.travel-search-icon {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 11px;
  background: #0f2f3a;
  color: #ffffff;
  font-size: 18px;
  font-weight: 900;
}

#travelSmartSearchInput {
  min-width: 0;
  border: 0;
  background: transparent;
  color: #0f172a;
  font: inherit;
  font-weight: 750;
  outline: 0;
}

#travelSmartSearchInput::placeholder {
  color: #64748b;
  font-weight: 650;
}

.travel-smart-search-row button,
.travel-search-suggestions button,
.travel-result-card button,
.travel-search-empty button,
.wallet-smart-actions button {
  min-height: 36px;
  border: 1px solid rgba(8, 127, 140, 0.16);
  border-radius: 11px;
  background: #ffffff;
  color: #174650;
  padding: 0 12px;
  font: inherit;
  font-weight: 900;
  cursor: pointer;
}

.travel-smart-search-row button:first-of-type {
  background: rgba(0, 150, 199, 0.1);
}

.travel-search-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.travel-search-suggestions button {
  min-height: 32px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.74);
}

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

.travel-result-group,
.travel-search-empty {
  min-width: 0;
  padding: 12px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.88);
}

.travel-search-empty {
  grid-column: 1 / -1;
  display: grid;
  gap: 7px;
  align-items: start;
}

.travel-result-group-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 9px;
}

.travel-result-group-head strong {
  color: #0f2f3a;
}

.travel-result-group-head span {
  color: #64748b;
  font-size: 12px;
  font-weight: 850;
}

.travel-result-grid {
  display: grid;
  gap: 8px;
}

.travel-result-card {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  gap: 9px;
  align-items: center;
  padding: 9px;
  border: 1px solid rgba(15, 23, 42, 0.07);
  border-radius: 12px;
  background: #ffffff;
}

.travel-result-thumb {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(0, 150, 199, 0.18), rgba(255, 186, 73, 0.18));
  font-size: 19px;
}

.travel-result-card div {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.travel-result-card strong,
.travel-result-card small {
  overflow-wrap: anywhere;
}

.travel-result-card small {
  color: #64748b;
}

.travel-result-card em {
  width: fit-content;
  max-width: 100%;
  padding: 4px 7px;
  border-radius: 999px;
  background: rgba(8, 189, 184, 0.1);
  color: #087f8c;
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
}

.wallet-smart-actions {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: -4px 0 14px;
}

.wallet-smart-actions button {
  min-height: 44px;
  background: linear-gradient(135deg, #0f2f3a, #087f8c);
  color: #ffffff;
  box-shadow: 0 10px 18px rgba(8, 127, 140, 0.16);
}

.digital-boarding-pass {
  position: relative;
  overflow: hidden;
  border: 0;
  background:
    linear-gradient(90deg, rgba(15, 47, 58, 0.98) 0 34%, rgba(255, 255, 255, 0.98) 34%),
    #ffffff;
  color: #0f172a;
}

.digital-boarding-pass::before {
  content: "";
  position: absolute;
  top: 16px;
  bottom: 16px;
  left: 34%;
  border-left: 2px dashed rgba(15, 23, 42, 0.18);
}

.digital-boarding-pass .pass-topline,
.digital-boarding-pass .pass-provider,
.digital-boarding-pass .pass-route {
  position: relative;
  z-index: 1;
  width: calc(34% - 18px);
}

.digital-boarding-pass .pass-topline {
  color: #ffffff;
}

.digital-boarding-pass .pass-topline strong {
  background: rgba(255, 255, 255, 0.16);
  color: #ffffff;
}

.digital-boarding-pass .pass-provider {
  color: #ffffff;
}

.digital-boarding-pass .pass-provider b {
  font-size: clamp(1rem, 1.8vw, 1.35rem);
}

.digital-boarding-pass .pass-provider span {
  color: rgba(255, 255, 255, 0.78);
}

.digital-boarding-pass .pass-route {
  grid-template-columns: minmax(0, 0.8fr) 52px minmax(0, 0.8fr);
  color: #ffffff;
}

.digital-boarding-pass .pass-route b {
  color: #ffffff;
  font-size: clamp(1.7rem, 3.4vw, 3.2rem);
}

.digital-boarding-pass .pass-route i {
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.22), #ffffff, rgba(255, 255, 255, 0.22));
}

.digital-boarding-pass h4,
.digital-boarding-pass dl,
.digital-boarding-pass .official-code,
.digital-boarding-pass .barcode-strip,
.digital-boarding-pass .pass-actions {
  position: relative;
  z-index: 1;
  margin-left: 35%;
}

.digital-boarding-pass h4 {
  color: #0f2f3a;
}

.digital-boarding-pass dl {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.digital-boarding-pass .official-code {
  width: 96px;
  height: 96px;
  border-radius: 12px;
  background:
    linear-gradient(90deg, #0f2f3a 0 8px, transparent 8px 14px),
    linear-gradient(#0f2f3a 0 8px, transparent 8px 14px),
    #ffffff;
  background-size: 22px 22px;
  box-shadow: inset 0 0 0 8px #ffffff, 0 0 0 1px rgba(15, 23, 42, 0.12);
}

.digital-boarding-pass .barcode-strip {
  height: 42px;
  border-radius: 8px;
  background: repeating-linear-gradient(90deg, #0f2f3a 0 3px, transparent 3px 6px, #0f2f3a 6px 8px, transparent 8px 13px);
}

@media (max-width: 900px) {
  .travel-smart-results {
    grid-template-columns: 1fr;
  }

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

@media (max-width: 640px) {
  .travel-smart-search-head,
  .travel-result-group-head {
    align-items: start;
    flex-direction: column;
  }

  .travel-smart-search-row,
  .travel-result-card {
    grid-template-columns: 1fr;
  }

  .travel-search-icon {
    display: none;
  }

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

  .digital-boarding-pass {
    background: linear-gradient(180deg, #0f2f3a 0 190px, #ffffff 190px);
  }

  .digital-boarding-pass::before {
    display: none;
  }

  .digital-boarding-pass h4,
  .digital-boarding-pass dl,
  .digital-boarding-pass .official-code,
  .digital-boarding-pass .barcode-strip,
  .digital-boarding-pass .pass-actions {
    margin-left: 0;
  }

  .digital-boarding-pass .pass-topline,
  .digital-boarding-pass .pass-provider,
  .digital-boarding-pass .pass-route {
    width: 100%;
  }

  .digital-boarding-pass dl {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Section 65: Emergency Travel and Wallet overlap fix */
#rideShareHub,
#walletPanel {
  overflow-x: clip;
}

#rideShareHub,
#rideShareHub *,
#walletPanel,
#walletPanel * {
  box-sizing: border-box;
}

#rideShareHub > :where(section, div, p),
#walletPanel > :where(section, div, p),
#rideShareHub :where(article, section, div),
#walletPanel :where(article, section, div) {
  min-width: 0;
}

#rideShareHub :where(.travel-command-header, .travel-smart-search, .travel-overview-card, .travel-section-nav, .travel-selected-tile, .travel-settings-shell, .travel-workspace, .transport-confirmation-hub, .ride-hub-redesign),
#walletPanel :where(.wallet-dashboard-header, .wallet-smart-actions, .wallet-redesign-shell, .wallet-home-grid, .wallet-trip-card-grid, .wallet-dashboard-sections, .wallet-section-card-grid, .wallet-breakdown, .wallet-action-grid, .shared-wallet-ledger) {
  position: relative;
  inset: auto;
  float: none;
  clear: both;
  width: 100%;
  max-width: 100%;
  height: auto;
  min-height: 0;
  margin-left: 0;
  margin-right: 0;
  transform: none;
  overflow: visible;
  z-index: auto;
}

#rideShareHub > .travel-overview-card,
#rideShareHub > .travel-section-nav,
#rideShareHub > .travel-selected-tile,
#rideShareHub > .travel-workspace,
#rideShareHub > .transport-confirmation-hub,
#rideShareHub > .ride-hub-redesign {
  display: grid;
}

#rideShareHub .travel-command-header,
#walletPanel .wallet-dashboard-header {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 12px;
  align-items: stretch;
  margin: 12px 0;
}

#rideShareHub .travel-command-header > article,
#walletPanel .wallet-dashboard-header > article {
  grid-column: span 2;
}

#rideShareHub .travel-command-header > .travel-command-trip {
  grid-column: span 4;
}

#rideShareHub .travel-command-actions {
  grid-column: span 2;
}

#walletPanel .wallet-dashboard-header > article:first-child {
  grid-column: span 2;
}

#rideShareHub .travel-smart-search {
  margin: 12px 0;
  isolation: isolate;
  z-index: 2;
}

#rideShareHub .travel-smart-results {
  position: relative;
  z-index: 3;
}

#rideShareHub .travel-dashboard-sections,
#rideShareHub .travel-booking-summary,
#rideShareHub .travel-transport-summary,
#walletPanel .wallet-home-grid,
#walletPanel .wallet-trip-card-grid,
#walletPanel .wallet-dashboard-sections,
#walletPanel .wallet-section-card-grid,
#walletPanel .wallet-breakdown,
#walletPanel .wallet-action-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 12px;
  align-items: stretch;
  margin-top: 12px;
}

#rideShareHub .travel-dashboard-sections > *,
#rideShareHub .travel-booking-summary > *,
#rideShareHub .travel-transport-summary > *,
#walletPanel .wallet-dashboard-sections > *,
#walletPanel .wallet-section-card-grid > *,
#walletPanel .wallet-breakdown > *,
#walletPanel .wallet-action-grid > * {
  grid-column: span 4;
  width: 100%;
  min-height: 0;
  height: auto;
}

#rideShareHub .travel-dashboard-card--overview,
#walletPanel .wallet-dashboard-sections > article:first-child {
  grid-column: span 8;
}

#walletPanel .wallet-balance-hero {
  grid-column: span 6;
}

#walletPanel .wallet-summary-card {
  grid-column: span 3;
}

#walletPanel .wallet-trip-tile,
#walletPanel .wallet-virtual-preview {
  grid-column: span 6;
}

#walletPanel .wallet-smart-actions,
#walletPanel .wallet-quick-actions-redesign {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 12px 0;
}

#walletPanel .wallet-redesign-shell {
  display: grid;
  grid-template-columns: minmax(190px, 240px) minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

#walletPanel .wallet-section-nav {
  position: relative;
  top: auto;
}

#walletPanel .trip-wallet-card {
  display: grid;
  grid-template-columns: 120px repeat(2, minmax(0, 1fr));
  gap: 12px;
  align-items: center;
  height: auto;
  min-height: 0;
  overflow: visible;
}

#walletPanel .trip-wallet-card img {
  width: 120px;
  max-width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

#rideShareHub :where(article, .travel-dashboard-card, .travel-result-card, .travel-result-group, .travel-focus-header, .travel-current-trip-card, .travel-provider-cards article, .visual-pass-card),
#walletPanel :where(article, .wallet-summary-card, .wallet-trip-tile, .wallet-virtual-preview, .wallet-balance-hero, .wallet-dashboard-sections article, .wallet-section-card-grid article, .trip-wallet-card, .wallet-breakdown div, .wallet-action-grid button, .shared-wallet-ledger div) {
  overflow: visible;
  overflow-wrap: anywhere;
  word-break: normal;
  white-space: normal;
}

#rideShareHub :where(button, .primary-button, .ghost-button),
#walletPanel :where(button, .primary-button, .ghost-button) {
  max-width: 100%;
  min-width: 0;
  white-space: normal;
}

#rideShareHub :where(img, .weather-dashboard-visual, .weather-visual),
#walletPanel img {
  max-width: 100%;
}

#rideShareHub .digital-boarding-pass {
  overflow: hidden;
}

#rideShareHub .digital-boarding-pass :where(h4, dl, .official-code, .barcode-strip, .pass-actions) {
  min-width: 0;
}

@media (max-width: 1180px) {
  #rideShareHub .travel-command-header > article,
  #rideShareHub .travel-command-actions,
  #walletPanel .wallet-dashboard-header > article,
  #walletPanel .wallet-dashboard-header > article:first-child {
    grid-column: span 4;
  }

  #rideShareHub .travel-command-header > .travel-command-trip,
  #rideShareHub .travel-dashboard-card--overview,
  #walletPanel .wallet-dashboard-sections > article:first-child {
    grid-column: span 8;
  }

  #rideShareHub .travel-dashboard-sections > *,
  #rideShareHub .travel-booking-summary > *,
  #rideShareHub .travel-transport-summary > *,
  #walletPanel .wallet-dashboard-sections > *,
  #walletPanel .wallet-section-card-grid > *,
  #walletPanel .wallet-breakdown > *,
  #walletPanel .wallet-action-grid > *,
  #walletPanel .wallet-summary-card {
    grid-column: span 6;
  }
}

@media (max-width: 900px) {
  #walletPanel .wallet-redesign-shell {
    grid-template-columns: 1fr;
  }

  #walletPanel .wallet-section-nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #walletPanel .wallet-smart-actions,
  #walletPanel .wallet-quick-actions-redesign {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #rideShareHub .travel-command-header > *,
  #walletPanel .wallet-dashboard-header > *,
  #walletPanel .wallet-balance-hero,
  #walletPanel .wallet-trip-tile,
  #walletPanel .wallet-virtual-preview {
    grid-column: span 6;
  }
}

@media (max-width: 680px) {
  #rideShareHub .travel-command-header,
  #walletPanel .wallet-dashboard-header,
  #rideShareHub .travel-dashboard-sections,
  #rideShareHub .travel-booking-summary,
  #rideShareHub .travel-transport-summary,
  #walletPanel .wallet-home-grid,
  #walletPanel .wallet-trip-card-grid,
  #walletPanel .wallet-dashboard-sections,
  #walletPanel .wallet-section-card-grid,
  #walletPanel .wallet-breakdown,
  #walletPanel .wallet-action-grid,
  #walletPanel .wallet-smart-actions,
  #walletPanel .wallet-quick-actions-redesign,
  #walletPanel .trip-wallet-card {
    grid-template-columns: 1fr;
  }

  #rideShareHub .travel-command-header > *,
  #rideShareHub .travel-dashboard-sections > *,
  #rideShareHub .travel-booking-summary > *,
  #rideShareHub .travel-transport-summary > *,
  #walletPanel .wallet-dashboard-header > *,
  #walletPanel .wallet-home-grid > *,
  #walletPanel .wallet-trip-card-grid > *,
  #walletPanel .wallet-dashboard-sections > *,
  #walletPanel .wallet-section-card-grid > *,
  #walletPanel .wallet-breakdown > *,
  #walletPanel .wallet-action-grid > * {
    grid-column: 1 / -1;
  }

  #walletPanel .wallet-section-nav {
    grid-template-columns: 1fr;
  }

  #walletPanel .trip-wallet-card img {
    width: 100%;
    aspect-ratio: 16 / 9;
  }
}

/* Section 66: Global tab and widget overlap stabilization */
html,
body {
  max-width: 100%;
  overflow-x: clip;
}

body:not(.auth-screen) {
  padding-bottom: env(safe-area-inset-bottom);
}

.shell,
main,
.panel,
.route-screen,
.topbar,
.sidebar,
.nav,
.mobile-nav,
.content-grid,
.dashboard-widget-grid,
.widget-grid,
.right-stack,
.dashboard-widgets,
.navigation-status-grid,
.events-dashboard-grid,
.event-experience-grid,
.solo-dashboard-grid,
.corporate-access-admin-grid,
.employee-dashboard,
.permission-grid,
.invite-grid,
.explore-grid,
.destination-grid,
.reservation-reminder-grid,
.itinerary-dashboard,
.travel-itinerary-dashboard,
.travel-reservation-sections,
.upcoming-reservation-grid,
.messages-layout,
.message-support-grid,
.memories-gallery-shell,
.memory-gallery-grid,
.memory-album-grid,
.social-hub-layout,
.platform-grid,
.profile-card-grid,
.profile-stats-grid,
.profile-adventure-grid,
.profile-memory-strip,
.admin-settings-shell,
.settings-shell,
.settings-main-panel,
.settings-nav-panel,
.backend-readiness-grid,
.audit-grid,
.security-list,
.payment-method-grid,
.card-balance-grid,
.card-rules,
.card-ledger,
.wallet-breakdown,
.wallet-action-grid,
.ride-two-column-grid,
.ride-recommendation-grid,
.ride-entry-grid,
.ride-location-grid,
.private-driver-list,
.transport-dashboard-grid,
.transport-record-list,
.transport-pass-card,
.travel-provider-cards,
.visual-pass-grid {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

body.app-routed main > section.route-screen[hidden],
body.app-routed main > section.panel[hidden],
.travel-focus-panel:not(.active),
.settings-panel[hidden],
.guided-step[hidden],
.restricted-panel[hidden],
.financial-privacy-panel[hidden],
.info-section[hidden],
.travel-widget[hidden],
.auth-panel[hidden],
[hidden] {
  display: none !important;
}

body.app-routed main > section.route-screen:not([hidden]) {
  position: relative;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  height: auto;
  min-height: 0;
  margin-left: 0;
  margin-right: 0;
  overflow: visible;
  z-index: auto;
}

.sidebar {
  z-index: 30;
}

.topbar {
  z-index: 20;
}

.nav,
.nav-group,
.nav-group summary,
.nav button,
.nav a,
.mobile-nav,
.mobile-nav button,
.trip-tab-bar,
.trip-tab-bar button,
.tabs,
.tab,
.message-tabs,
.message-tabs button,
.split-mode-tabs,
.split-mode-tabs button,
.transport-tabs,
.transport-tabs button,
.explore-tabs,
.explore-tabs button,
.event-dashboard-tabs,
.event-dashboard-tabs button,
.travel-section-nav,
.travel-section-nav button,
.travel-settings-nav,
.travel-settings-nav button,
.wallet-section-nav,
.wallet-section-nav button,
.settings-nav-panel,
.settings-nav-panel button,
.pass-filter-row,
.pass-filter-row button,
.travel-pass-filters,
.travel-pass-filters button {
  position: relative;
  float: none;
  min-width: 0;
  max-width: 100%;
  height: auto;
  box-sizing: border-box;
  overflow: visible;
  transform: none;
}

.nav button,
.nav a,
.mobile-nav button,
.trip-tab-bar button,
.tabs .tab,
.tab,
.message-tabs button,
.split-mode-tabs button,
.transport-tabs button,
.explore-tabs button,
.event-dashboard-tabs button,
.travel-section-nav button,
.travel-settings-nav button,
.wallet-section-nav button,
.settings-nav-panel button,
.pass-filter-row button,
.travel-pass-filters button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 40px;
  min-width: max-content;
  flex: 0 0 auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  touch-action: manipulation;
}

.nav button,
.nav a,
.travel-settings-nav button,
.wallet-section-nav button,
.settings-nav-panel button {
  justify-content: flex-start;
  min-width: 0;
  white-space: normal;
  text-overflow: clip;
}

.trip-tab-bar,
.tabs,
.message-tabs,
.split-mode-tabs,
.transport-tabs,
.explore-tabs,
.event-dashboard-tabs,
.travel-section-nav,
.pass-filter-row,
.travel-pass-filters,
.travel-search-suggestions {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: visible;
  padding-bottom: 4px;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}

.trip-tab-bar button,
.tabs .tab,
.tab,
.message-tabs button,
.split-mode-tabs button,
.transport-tabs button,
.explore-tabs button,
.event-dashboard-tabs button,
.travel-section-nav button,
.pass-filter-row button,
.travel-pass-filters button,
.travel-search-suggestions button {
  scroll-snap-align: start;
}

.nav .active,
.nav a:hover,
.nav button:hover {
  transform: none;
}

.content-grid,
.dashboard-widget-grid,
.widget-grid,
.dashboard-widgets,
.right-stack,
.navigation-status-grid,
.events-dashboard-grid,
.event-experience-grid,
.solo-dashboard-grid,
.corporate-access-admin-grid,
.employee-dashboard,
.permission-grid,
.invite-grid,
.explore-grid,
.destination-grid,
.reservation-reminder-grid,
.itinerary-dashboard,
.travel-itinerary-dashboard,
.travel-reservation-sections,
.upcoming-reservation-grid,
.memory-gallery-grid,
.memory-album-grid,
.platform-grid,
.profile-card-grid,
.profile-stats-grid,
.profile-adventure-grid,
.backend-readiness-grid,
.audit-grid,
.security-list,
.payment-method-grid,
.card-balance-grid,
.card-rules,
.card-ledger,
.ride-recommendation-grid,
.private-driver-list,
.transport-record-list {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 24px);
  align-items: stretch;
}

.content-grid > *,
.dashboard-widget-grid > *,
.widget-grid > *,
.dashboard-widgets > *,
.right-stack > *,
.navigation-status-grid > *,
.events-dashboard-grid > *,
.event-experience-grid > *,
.solo-dashboard-grid > *,
.corporate-access-admin-grid > *,
.employee-dashboard > *,
.permission-grid > *,
.invite-grid > *,
.explore-grid > *,
.destination-grid > *,
.reservation-reminder-grid > *,
.itinerary-dashboard > *,
.travel-itinerary-dashboard > *,
.travel-reservation-sections > *,
.upcoming-reservation-grid > *,
.memory-gallery-grid > *,
.memory-album-grid > *,
.platform-grid > *,
.profile-stats-grid > *,
.profile-adventure-grid > *,
.backend-readiness-grid > *,
.audit-grid > *,
.security-list > *,
.payment-method-grid > *,
.card-balance-grid > *,
.card-rules > *,
.card-ledger > *,
.ride-recommendation-grid > *,
.private-driver-list > *,
.transport-record-list > * {
  grid-column: span 4;
  width: 100%;
  min-width: 0;
  height: auto;
  min-height: 0;
}

.dashboard-widget-grid > .is-large,
.widget-grid > .is-large,
.travel-widget.is-large,
.itinerary-card--featured,
.itinerary-timeline-dashboard,
.profile-card-grid > article:first-child,
.settings-main-panel,
.messages-hub,
.memory-comments-panel,
.social-card.is-large,
.events-dashboard-grid > article:first-child,
.backend-readiness-grid > article:first-child,
.audit-grid > article:first-child {
  grid-column: span 8;
}

.profile-card-grid {
  grid-template-columns: minmax(0, 8fr) minmax(280px, 4fr);
}

.messages-layout,
.memories-gallery-shell,
.social-hub-layout,
.settings-shell,
.admin-settings-shell,
.ride-two-column-grid,
.transport-dashboard-grid {
  display: grid;
  grid-template-columns: minmax(240px, 4fr) minmax(0, 8fr);
  gap: clamp(16px, 2vw, 24px);
  align-items: start;
}

.messages-layout > *,
.memories-gallery-shell > *,
.social-hub-layout > *,
.settings-shell > *,
.admin-settings-shell > *,
.ride-two-column-grid > *,
.transport-dashboard-grid > * {
  min-width: 0;
  max-width: 100%;
}

.panel,
.travel-widget,
.dashboard-card,
.status-card,
.install-card,
.explore-card,
.destination-card,
.event-experience-card,
.itinerary-card,
.itinerary-timeline-dashboard,
.wallet-summary-card,
.wallet-section-card-grid article,
.trip-wallet-card,
.virtual-card,
.virtual-card-panel,
.visual-pass-card,
.conversation-card,
.messages-hub,
.message-support-grid article,
.memory-media-card,
.memory-ai-card,
.memory-upload-card,
.memory-settings-card,
.social-card,
.platform-card,
.profile-hero-card,
.profile-card-grid article,
.profile-social-hero,
.cover-photo-card,
.photo-audience-card,
.settings-main-panel,
.settings-nav-panel,
.settings-row,
.admin-panel,
.navigation-audit-panel,
.backend-readiness-panel,
.reservation-reminder-card,
.smart-departure-card,
.reservation-ai-card,
.ride-clean-card,
.ride-provider-card,
.transport-record-card,
.transport-pass-card,
.travel-result-card,
.travel-result-group {
  position: relative;
  width: 100%;
  max-width: 100%;
  height: auto;
  min-height: 0;
  float: none;
  overflow: visible;
  overflow-wrap: anywhere;
  word-break: normal;
  white-space: normal;
  z-index: auto;
}

.panel :where(h1, h2, h3, h4, p, span, strong, small, em, label, dt, dd, li, button, a, input, select, textarea),
.topbar :where(strong, small, button),
.sidebar :where(strong, small, button, a, summary),
.mobile-nav button {
  max-width: 100%;
  overflow-wrap: anywhere;
}

.panel :where(button, .primary-button, .ghost-button, .light-button, .icon-button, .file-action-button),
.topbar button,
.sidebar button,
.mobile-nav button {
  max-width: 100%;
  min-width: 0;
}

.panel :where(img, picture, video, canvas, svg),
.profile-social-hero > img,
.cover-photo-card img,
.memory-media-card img,
.explore-card img,
.destination-card img,
.travel-widget img,
.platform-card img,
.conversation-card img,
.trip-wallet-card img {
  max-width: 100%;
  height: auto;
  object-fit: cover;
}

.profile-social-hero {
  min-height: 0;
  padding-bottom: clamp(18px, 3vw, 28px);
}

.profile-social-hero .profile-photo-stack,
.profile-social-hero .profile-photo-main,
.profile-social-hero .profile-hero-card {
  position: relative;
  z-index: 1;
}

.profile-hero-card,
.profile-identity-card,
.settings-row,
.social-card-header,
.ride-card-heading,
.transport-record-card,
.conversation-card,
.platform-card {
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
}

.settings-row {
  display: grid;
}

.member-table,
.navigation-audit-list,
.shared-wallet-ledger,
.card-ledger,
.transaction-list,
.document-list,
.alert-preview-list,
.ride-history-list,
.ride-notification-list {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: visible;
}

.member-table > div,
.navigation-audit-list div,
.shared-wallet-ledger div,
.card-ledger div,
.transaction-row,
.document-list div,
.alert-preview-list div,
.ride-history-list article,
.ride-notification-list article {
  min-width: 0;
  max-width: 100%;
}

.update-available-banner,
.offline-status-banner {
  z-index: 90;
}

dialog,
.pin-dialog,
.corporate-access-dialog {
  z-index: 100;
}

@media (max-width: 1180px) {
  .content-grid > *,
  .dashboard-widget-grid > *,
  .widget-grid > *,
  .dashboard-widgets > *,
  .right-stack > *,
  .navigation-status-grid > *,
  .events-dashboard-grid > *,
  .event-experience-grid > *,
  .solo-dashboard-grid > *,
  .corporate-access-admin-grid > *,
  .employee-dashboard > *,
  .permission-grid > *,
  .invite-grid > *,
  .explore-grid > *,
  .destination-grid > *,
  .reservation-reminder-grid > *,
  .itinerary-dashboard > *,
  .travel-itinerary-dashboard > *,
  .travel-reservation-sections > *,
  .upcoming-reservation-grid > *,
  .memory-gallery-grid > *,
  .memory-album-grid > *,
  .platform-grid > *,
  .profile-stats-grid > *,
  .profile-adventure-grid > *,
  .backend-readiness-grid > *,
  .audit-grid > *,
  .security-list > *,
  .payment-method-grid > *,
  .card-balance-grid > *,
  .card-rules > *,
  .card-ledger > *,
  .ride-recommendation-grid > *,
  .private-driver-list > *,
  .transport-record-list > *,
  .dashboard-widget-grid > .is-large,
  .widget-grid > .is-large,
  .travel-widget.is-large,
  .itinerary-card--featured,
  .itinerary-timeline-dashboard {
    grid-column: span 6;
  }

  .messages-layout,
  .memories-gallery-shell,
  .social-hub-layout,
  .settings-shell,
  .admin-settings-shell,
  .ride-two-column-grid,
  .transport-dashboard-grid,
  .profile-card-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 1080px) {
  body:not(.auth-screen) main {
    padding-bottom: calc(112px + env(safe-area-inset-bottom));
  }

  .mobile-nav {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(76px, 1fr);
    grid-template-columns: none;
    gap: 6px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 8px;
    max-width: calc(100vw - 24px);
    -webkit-overflow-scrolling: touch;
  }

  .mobile-nav button {
    min-width: 76px;
    white-space: nowrap;
  }
}

@media (max-width: 760px) {
  main {
    padding-left: 12px;
    padding-right: 12px;
  }

  .content-grid,
  .dashboard-widget-grid,
  .widget-grid,
  .dashboard-widgets,
  .right-stack,
  .navigation-status-grid,
  .events-dashboard-grid,
  .event-experience-grid,
  .solo-dashboard-grid,
  .corporate-access-admin-grid,
  .employee-dashboard,
  .permission-grid,
  .invite-grid,
  .explore-grid,
  .destination-grid,
  .reservation-reminder-grid,
  .itinerary-dashboard,
  .travel-itinerary-dashboard,
  .travel-reservation-sections,
  .upcoming-reservation-grid,
  .memory-gallery-grid,
  .memory-album-grid,
  .platform-grid,
  .profile-stats-grid,
  .profile-adventure-grid,
  .backend-readiness-grid,
  .audit-grid,
  .security-list,
  .payment-method-grid,
  .card-balance-grid,
  .card-rules,
  .card-ledger,
  .ride-recommendation-grid,
  .private-driver-list,
  .transport-record-list,
  .messages-layout,
  .memories-gallery-shell,
  .social-hub-layout,
  .settings-shell,
  .admin-settings-shell,
  .ride-two-column-grid,
  .transport-dashboard-grid,
  .profile-card-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .content-grid > *,
  .dashboard-widget-grid > *,
  .widget-grid > *,
  .dashboard-widgets > *,
  .right-stack > *,
  .navigation-status-grid > *,
  .events-dashboard-grid > *,
  .event-experience-grid > *,
  .solo-dashboard-grid > *,
  .corporate-access-admin-grid > *,
  .employee-dashboard > *,
  .permission-grid > *,
  .invite-grid > *,
  .explore-grid > *,
  .destination-grid > *,
  .reservation-reminder-grid > *,
  .itinerary-dashboard > *,
  .travel-itinerary-dashboard > *,
  .travel-reservation-sections > *,
  .upcoming-reservation-grid > *,
  .memory-gallery-grid > *,
  .memory-album-grid > *,
  .platform-grid > *,
  .profile-stats-grid > *,
  .profile-adventure-grid > *,
  .backend-readiness-grid > *,
  .audit-grid > *,
  .security-list > *,
  .payment-method-grid > *,
  .card-balance-grid > *,
  .card-rules > *,
  .card-ledger > *,
  .ride-recommendation-grid > *,
  .private-driver-list > *,
  .transport-record-list > *,
  .dashboard-widget-grid > .is-large,
  .widget-grid > .is-large,
  .travel-widget.is-large,
  .itinerary-card--featured,
  .itinerary-timeline-dashboard,
  .profile-card-grid > article:first-child,
  .settings-main-panel,
  .messages-hub,
  .memory-comments-panel,
  .social-card.is-large,
  .events-dashboard-grid > article:first-child,
  .backend-readiness-grid > article:first-child,
  .audit-grid > article:first-child {
    grid-column: 1 / -1;
  }

  .profile-hero-card,
  .profile-identity-card,
  .settings-row,
  .social-card-header,
  .ride-card-heading,
  .transport-record-card,
  .conversation-card,
  .platform-card {
    grid-template-columns: 1fr;
  }

  .panel :where(button, .primary-button, .ghost-button, .light-button),
  .settings-row button,
  .travel-focus-grid button,
  .travel-provider-cards button,
  .memory-card-actions button,
  .social-action-row button,
  .ride-account-actions button,
  .itinerary-action-row button,
  .pass-actions button,
  .platform-actions button {
    width: 100%;
  }
}

/* Section 67: Structured rectangular app design system, replacing bubble widgets */
:root {
  --td-card-radius: 12px;
  --td-panel-radius: 14px;
  --td-control-radius: 10px;
  --td-layout-gap: clamp(16px, 2vw, 24px);
  --td-section-gap: clamp(24px, 3vw, 32px);
  --td-card-padding: clamp(14px, 1.8vw, 20px);
  --td-border-soft: rgba(15, 23, 42, 0.1);
  --td-card-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
}

.panel,
.auth-panel,
.auth-card,
.pwa-panel,
.pwa-install-mini,
.global-destination-header,
.destination-spotlight,
.destination-card,
.content-grid > *,
.dashboard-widget-grid > *,
.widget-grid > *,
.dashboard-widgets > *,
.right-stack > *,
.travel-widget,
.travel-current-trip-card,
.travel-smart-search,
.travel-result-group,
.travel-result-card,
.travel-dashboard-card,
.travel-booking-summary article,
.travel-transport-summary article,
.travel-focus-header,
.travel-focus-grid article,
.travel-provider-cards article,
.travel-empty-state,
.travel-map-dashboard,
.travel-itinerary-section,
.travel-reservation-sections article,
.visual-pass-card,
.transport-record-card,
.transport-pass-card,
.ride-clean-card,
.ride-provider-card,
.smart-departure-card,
.reservation-reminder-card,
.reservation-ai-card,
.wallet-summary-card,
.wallet-balance-hero,
.wallet-trip-tile,
.wallet-virtual-preview,
.wallet-dashboard-sections article,
.wallet-section-card-grid article,
.trip-wallet-card,
.virtual-card,
.card-balance-grid div,
.card-rules div,
.card-ledger div,
.shared-wallet-ledger div,
.wallet-breakdown div,
.wallet-action-grid button,
.itinerary-card,
.itinerary-timeline-dashboard,
.event-experience-card,
.events-dashboard-grid article,
.invite-card,
.invitation-preview-card,
.solo-card,
.solo-dashboard-grid article,
.corporate-acceptance-card,
.corporate-card-preview,
.permission-card,
.employee-dashboard article,
.memory-media-card,
.memory-ai-card,
.memory-upload-card,
.memory-settings-card,
.memories-widget,
.social-card,
.platform-card,
.conversation-card,
.messages-hub,
.message-support-grid article,
.profile-social-hero,
.profile-hero-card,
.profile-card-grid article,
.cover-photo-card,
.photo-audience-card,
.settings-main-panel,
.settings-nav-panel,
.settings-row,
.admin-panel,
.admin-settings-shell,
.navigation-audit-panel,
.navigation-status-grid div,
.navigation-audit-list div,
.backend-readiness-panel,
.backend-readiness-grid article,
.security-list div,
.audit-grid article,
.explore-card,
.explore-card-main,
.map-card,
.weather-card,
.info-section,
.restricted-panel,
.financial-privacy-panel,
.feature-toggle-grid section,
.guest-portal-grid article {
  border-radius: var(--td-card-radius) !important;
  border: 1px solid var(--td-border-soft);
  box-shadow: var(--td-card-shadow);
  height: auto;
  min-height: 0;
  max-width: 100%;
  overflow: visible;
}

.panel,
.travel-settings-sidebar,
.travel-settings-main,
.wallet-section-nav,
.settings-nav-panel,
.settings-main-panel,
.messages-hub,
.memory-comments-panel,
.admin-settings-shell {
  border-radius: var(--td-panel-radius) !important;
}

.section-heading,
.travel-command-header,
.wallet-dashboard-header,
.wallet-smart-actions,
.wallet-quick-actions-redesign,
.travel-quick-actions,
.button-row,
.mini-action-row,
.hero-actions,
.social-action-row,
.memory-card-actions,
.platform-actions,
.ride-account-actions,
.itinerary-action-row,
.pass-actions,
.corporate-card-actions,
.explore-card-actions,
.travel-form-row,
.funds-form,
.auth-form,
.admin-form,
.settings-row,
.profile-edit-form {
  gap: clamp(10px, 1.5vw, 16px);
}

.nav-group,
.nav button,
.nav a,
.mobile-nav,
.mobile-nav button,
.trip-tab-bar,
.trip-tab-bar button,
.tabs,
.tab,
.message-tabs button,
.split-mode-tabs button,
.transport-tabs button,
.explore-tabs button,
.event-dashboard-tabs button,
.travel-section-nav button,
.travel-settings-nav details,
.travel-settings-nav button,
.wallet-section-nav button,
.settings-nav-panel button,
.pass-filter-row button,
.travel-pass-filters button,
.travel-search-suggestions button,
.primary-button,
.ghost-button,
.light-button,
.icon-button,
.file-action-button,
.travel-result-card button,
.wallet-smart-actions button,
.wallet-quick-actions-redesign button,
.travel-command-actions button,
.travel-dashboard-card button,
.travel-booking-summary button,
.travel-transport-summary button,
.wallet-dashboard-sections button {
  border-radius: var(--td-control-radius) !important;
}

.status-pill,
.card-status,
.compliance-badge,
.eyebrow-pill,
.chip,
.privacy-chip,
.notification-count,
.avatar,
.avatar-stack img,
.profile-photo-main,
.profile-avatar,
.brand-mark,
.pin,
.msg,
.modern-messages .msg {
  border-radius: 999px;
}

.profile-photo-main,
.profile-avatar,
.avatar,
.avatar-stack img,
.conversation-card img,
.platform-card img {
  overflow: hidden;
}

.panel :where(article, section, div, form, nav, aside),
.panel :where(h1, h2, h3, h4, p, span, strong, small, em, label, dt, dd, li),
.panel :where(button, input, select, textarea, a) {
  min-width: 0;
  max-width: 100%;
}

.panel :where(h1, h2, h3, h4) {
  line-height: 1.15;
}

.panel :where(p, small, span, dd, li, label) {
  line-height: 1.45;
}

.panel :where(button, .primary-button, .ghost-button, .light-button, .file-action-button) {
  min-height: 38px;
  padding-left: 12px;
  padding-right: 12px;
}

.panel :where(.primary-button, .ghost-button, .light-button, button) + :where(.primary-button, .ghost-button, .light-button, button) {
  margin-left: 0;
}

.panel :where(img, video, canvas, svg),
.visual-pass-card,
.digital-boarding-pass,
.mini-boarding-pass,
.official-code,
.barcode-strip,
.weather-dashboard-visual,
.weather-visual {
  max-width: 100%;
}

.digital-boarding-pass {
  border-radius: var(--td-card-radius) !important;
}

.travel-smart-results,
.travel-dashboard-sections,
.travel-booking-summary,
.travel-transport-summary,
.wallet-dashboard-header,
.wallet-home-grid,
.wallet-trip-card-grid,
.wallet-dashboard-sections,
.wallet-section-card-grid,
.profile-card-grid,
.events-dashboard-grid,
.memory-gallery-grid,
.platform-grid,
.messages-layout,
.settings-shell,
.admin-settings-shell {
  gap: var(--td-layout-gap);
}

.travel-smart-search,
.travel-settings-shell,
.wallet-redesign-shell,
.profile-card-grid,
.messages-layout,
.memories-gallery-shell,
.social-hub-layout,
.settings-shell,
.admin-settings-shell,
.events-dashboard-grid,
.memory-gallery-grid,
.platform-grid {
  margin-top: var(--td-layout-gap);
}

.travel-summary-tile,
#rideShareHub .travel-overview-card .travel-summary-tile {
  border-radius: var(--td-card-radius) !important;
  min-height: 0;
  padding: var(--td-card-padding);
}

#rideShareHub .travel-summary-tile--trip,
#rideShareHub .travel-summary-tile--pass {
  min-height: 0;
}

#rideShareHub .mini-boarding-pass {
  border-radius: 8px !important;
}

.wallet-balance-hero,
.wallet-trip-tile,
.wallet-virtual-preview,
.trip-wallet-card,
.virtual-card {
  align-content: start;
}

.wallet-trip-tile,
.trip-wallet-card,
.transport-record-card,
.settings-row {
  align-items: start;
}

.profile-social-hero {
  display: grid;
  gap: var(--td-layout-gap);
  padding: var(--td-card-padding);
}

.profile-social-hero > img {
  border-radius: 10px !important;
  position: relative;
  inset: auto;
  width: 100%;
  height: auto;
  max-height: 320px;
  aspect-ratio: 16 / 6;
  object-fit: cover;
}

.profile-hero-card {
  position: relative;
  margin-top: 0;
}

.settings-row {
  padding: 14px;
  border-radius: var(--td-card-radius) !important;
}

.settings-row button,
.settings-row select,
.settings-row input {
  justify-self: end;
}

.member-table,
.navigation-audit-list,
.shared-wallet-ledger,
.card-ledger,
.transaction-list,
.document-list,
.alert-preview-list,
.ride-history-list,
.ride-notification-list {
  border-radius: var(--td-card-radius);
}

@media (max-width: 1180px) {
  .settings-row button,
  .settings-row select,
  .settings-row input {
    justify-self: stretch;
  }
}

@media (max-width: 760px) {
  :root {
    --td-card-radius: 10px;
    --td-panel-radius: 12px;
    --td-card-padding: 14px;
  }

  .panel,
  .travel-smart-search,
  .wallet-redesign-shell,
  .profile-social-hero,
  .settings-main-panel,
  .messages-hub,
  .social-card,
  .memory-media-card {
    padding: var(--td-card-padding);
  }

  .profile-social-hero > img {
    aspect-ratio: 16 / 9;
    max-height: 240px;
  }

  .mobile-nav {
    border-radius: 14px !important;
  }

  .mobile-nav button {
    border-radius: 10px !important;
  }
}

/* Section 68: Compact dashboard table rows replacing long widgets */
:root {
  --td-row-gap: 8px;
  --td-row-padding: 10px 12px;
  --td-table-head-bg: #f8fafc;
  --td-table-row-bg: #ffffff;
}

.travel-dashboard-sections,
.travel-booking-summary,
.travel-transport-summary,
.wallet-dashboard-sections,
.wallet-section-card-grid,
.wallet-breakdown,
.wallet-action-grid,
.profile-stats-grid,
.profile-adventure-grid,
.events-dashboard-grid,
.event-experience-grid,
.settings-main-panel,
.memory-gallery-grid,
.platform-grid,
.navigation-status-grid,
.backend-readiness-grid,
.security-list,
.audit-grid {
  align-items: start;
}

.travel-dashboard-card,
.travel-booking-summary article,
.travel-transport-summary article,
.wallet-dashboard-header article,
.wallet-summary-card,
.wallet-dashboard-sections article,
.wallet-section-card-grid article,
.wallet-breakdown div,
.wallet-action-grid button,
.profile-card-grid article,
.profile-stats-grid article,
.profile-adventure-grid article,
.events-dashboard-grid article,
.event-experience-card,
.settings-row,
.memory-media-card,
.platform-card,
.conversation-card,
.navigation-status-grid div,
.backend-readiness-grid article,
.security-list div,
.audit-grid article {
  padding: 12px;
  gap: var(--td-row-gap);
}

.travel-booking-summary article,
.travel-transport-summary article,
.wallet-section-card-grid article,
.wallet-breakdown div,
.profile-stats-grid article,
.profile-adventure-grid article,
.events-dashboard-grid article,
.event-experience-card,
.navigation-status-grid div,
.backend-readiness-grid article,
.security-list div,
.audit-grid article {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) minmax(150px, 1.35fr) minmax(110px, 0.75fr) auto;
  align-items: center;
  column-gap: 12px;
  row-gap: 6px;
}

.travel-dashboard-card:not(.travel-dashboard-card--overview),
.wallet-dashboard-sections > article:not(:first-child),
.profile-card-grid article,
.settings-row,
.memory-media-card,
.platform-card,
.conversation-card {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) minmax(150px, 1.4fr) minmax(90px, 0.7fr) auto;
  align-items: center;
  column-gap: 12px;
  row-gap: 6px;
}

.travel-dashboard-card--overview,
.wallet-dashboard-sections > article:first-child,
.wallet-balance-hero,
.wallet-trip-tile,
.wallet-virtual-preview,
.profile-social-hero,
.profile-identity-card,
.cover-photo-card,
.photo-audience-card,
.messages-hub,
.settings-main-panel {
  display: grid;
  gap: 12px;
}

.travel-dashboard-card--overview dl,
.wallet-metric-list,
.profile-identity-card dl,
.card-balance-grid,
.card-rules,
.card-ledger {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.travel-dashboard-card dl > div,
.wallet-metric-list div,
.profile-identity-card dl > div,
.card-balance-grid div,
.card-rules div,
.card-ledger div {
  display: grid;
  grid-template-columns: minmax(100px, 0.85fr) minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  padding: var(--td-row-padding);
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 8px;
  background: var(--td-table-row-bg);
}

.travel-dashboard-card :where(.eyebrow, span),
.travel-booking-summary span,
.travel-transport-summary span,
.wallet-dashboard-header span,
.wallet-dashboard-sections .eyebrow,
.wallet-section-card-grid span,
.wallet-breakdown span,
.profile-card-grid span,
.profile-stats-grid span,
.profile-adventure-grid span,
.events-dashboard-grid span,
.event-experience-card span,
.settings-row strong,
.navigation-status-grid span,
.backend-readiness-grid span,
.security-list strong,
.audit-grid span {
  color: #475569;
  font-size: clamp(0.72rem, 0.86vw, 0.82rem);
  line-height: 1.25;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.travel-dashboard-card :where(h4, strong),
.travel-booking-summary strong,
.travel-transport-summary strong,
.wallet-dashboard-header strong,
.wallet-dashboard-sections strong,
.wallet-section-card-grid strong,
.wallet-breakdown strong,
.profile-card-grid strong,
.profile-stats-grid strong,
.profile-adventure-grid strong,
.events-dashboard-grid strong,
.event-experience-card strong,
.navigation-status-grid strong,
.backend-readiness-grid strong,
.security-list span,
.audit-grid strong {
  font-size: clamp(0.95rem, 1.05vw, 1.08rem);
  line-height: 1.25;
}

.travel-dashboard-card :where(p, small),
.travel-booking-summary small,
.travel-transport-summary small,
.wallet-dashboard-header small,
.wallet-dashboard-sections small,
.wallet-section-card-grid small,
.profile-card-grid small,
.profile-adventure-grid small,
.events-dashboard-grid small,
.event-experience-card small,
.settings-row span,
.navigation-status-grid small,
.backend-readiness-grid small,
.security-list small,
.audit-grid small {
  color: #64748b;
  font-size: clamp(0.82rem, 0.92vw, 0.94rem);
  line-height: 1.35;
}

.travel-dashboard-card button,
.travel-booking-summary button,
.travel-transport-summary button,
.wallet-dashboard-sections button,
.wallet-section-card-grid button,
.wallet-action-grid button,
.profile-card-grid button,
.profile-adventure-grid button,
.events-dashboard-grid button,
.event-experience-card button,
.settings-row button,
.memory-card-actions button,
.platform-actions button,
.conversation-card button,
.backend-readiness-grid button,
.audit-grid button {
  justify-self: end;
  min-width: 72px;
  width: auto;
  min-height: 34px;
  padding: 0 10px;
}

.wallet-home-grid,
.wallet-dashboard-header,
.travel-command-header {
  gap: 10px;
}

.wallet-dashboard-header article,
.travel-command-header article,
.wallet-summary-card {
  min-height: 0;
  align-content: start;
}

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

.wallet-trip-tile {
  grid-template-columns: 76px minmax(0, 1fr) auto;
}

.wallet-trip-tile img {
  width: 76px;
  height: 64px;
  border-radius: 8px !important;
}

.wallet-virtual-preview .wallet-mini-actions,
.wallet-quick-actions-redesign,
.wallet-smart-actions,
.travel-quick-actions.compact,
.pass-actions,
.memory-card-actions,
.platform-actions,
.explore-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.shared-wallet-ledger div,
.card-ledger div,
.transaction-row,
.document-list div,
.alert-preview-list div,
.ride-history-list article,
.ride-notification-list article,
.navigation-audit-list div,
.member-table > div {
  display: grid;
  grid-template-columns: minmax(120px, 0.9fr) minmax(160px, 1.2fr) minmax(120px, 0.8fr) auto;
  align-items: center;
  gap: 10px;
  padding: var(--td-row-padding);
  border-radius: 8px;
  background: var(--td-table-row-bg);
}

.memory-media-card {
  grid-template-columns: 92px minmax(0, 1fr) auto;
}

.memory-media-card img {
  width: 92px;
  height: 72px;
  border-radius: 8px !important;
}

.platform-card {
  grid-template-columns: 42px minmax(0, 1fr) auto;
}

.conversation-card {
  grid-template-columns: 46px minmax(0, 1fr) auto;
}

.settings-row {
  grid-template-columns: minmax(170px, 0.8fr) minmax(0, 1.4fr) minmax(100px, auto);
}

.settings-row > div {
  display: grid;
  gap: 3px;
}

.profile-social-hero {
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  align-items: start;
}

.profile-social-hero > img {
  max-height: 220px;
}

.profile-hero-card {
  grid-template-columns: auto minmax(0, 1fr) auto;
}

.profile-card-grid article p,
.event-experience-card p,
.settings-main-panel > p,
.travel-focus-header p,
.section-heading p {
  max-width: 72ch;
}

@media (max-width: 1180px) {
  .travel-booking-summary article,
  .travel-transport-summary article,
  .wallet-section-card-grid article,
  .wallet-breakdown div,
  .profile-stats-grid article,
  .profile-adventure-grid article,
  .events-dashboard-grid article,
  .event-experience-card,
  .travel-dashboard-card:not(.travel-dashboard-card--overview),
  .wallet-dashboard-sections > article:not(:first-child),
  .profile-card-grid article,
  .settings-row,
  .memory-media-card,
  .platform-card,
  .conversation-card,
  .shared-wallet-ledger div,
  .card-ledger div,
  .transaction-row,
  .document-list div,
  .alert-preview-list div,
  .ride-history-list article,
  .ride-notification-list article,
  .navigation-audit-list div,
  .member-table > div {
    grid-template-columns: minmax(130px, 0.9fr) minmax(0, 1.35fr) auto;
  }
}

@media (max-width: 760px) {
  .travel-booking-summary article,
  .travel-transport-summary article,
  .wallet-section-card-grid article,
  .wallet-breakdown div,
  .profile-stats-grid article,
  .profile-adventure-grid article,
  .events-dashboard-grid article,
  .event-experience-card,
  .travel-dashboard-card:not(.travel-dashboard-card--overview),
  .wallet-dashboard-sections > article:not(:first-child),
  .profile-card-grid article,
  .settings-row,
  .memory-media-card,
  .platform-card,
  .conversation-card,
  .shared-wallet-ledger div,
  .card-ledger div,
  .transaction-row,
  .document-list div,
  .alert-preview-list div,
  .ride-history-list article,
  .ride-notification-list article,
  .navigation-audit-list div,
  .member-table > div,
  .wallet-trip-tile,
  .profile-social-hero,
  .profile-hero-card {
    grid-template-columns: 1fr;
  }

  .travel-dashboard-card--overview dl,
  .wallet-metric-list,
  .profile-identity-card dl,
  .card-balance-grid,
  .card-rules,
  .card-ledger {
    grid-template-columns: 1fr;
  }

  .travel-dashboard-card dl > div,
  .wallet-metric-list div,
  .profile-identity-card dl > div,
  .card-balance-grid div,
  .card-rules div,
  .card-ledger div {
    grid-template-columns: 1fr;
  }

  .travel-dashboard-card button,
  .travel-booking-summary button,
  .travel-transport-summary button,
  .wallet-dashboard-sections button,
  .wallet-section-card-grid button,
  .wallet-action-grid button,
  .profile-card-grid button,
  .profile-adventure-grid button,
  .events-dashboard-grid button,
  .event-experience-card button,
  .settings-row button,
  .memory-card-actions button,
  .platform-actions button,
  .conversation-card button,
  .backend-readiness-grid button,
  .audit-grid button {
    justify-self: stretch;
    width: 100%;
  }

  .memory-media-card img,
  .wallet-trip-tile img {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
  }
}

/* Section 69: Single-column tab content correction */
body.app-routed main {
  max-width: min(1180px, 100%);
  margin-inline: auto;
}

body.app-routed main > section.route-screen:not([hidden]),
body.app-routed main > section.panel:not([hidden]) {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: var(--td-section-gap, 28px);
  align-items: stretch;
  width: 100%;
}

.content-grid,
.dashboard-widget-grid,
.widget-grid,
.dashboard-widgets,
.right-stack,
.navigation-status-grid,
.events-dashboard-grid,
.event-experience-grid,
.solo-dashboard-grid,
.corporate-access-admin-grid,
.employee-dashboard,
.permission-grid,
.invite-grid,
.explore-grid,
.destination-grid,
.reservation-reminder-grid,
.itinerary-dashboard,
.travel-itinerary-dashboard,
.travel-reservation-sections,
.upcoming-reservation-grid,
.memory-gallery-grid,
.memory-album-grid,
.platform-grid,
.profile-card-grid,
.profile-stats-grid,
.profile-adventure-grid,
.profile-memory-strip,
.backend-readiness-grid,
.audit-grid,
.security-list,
.payment-method-grid,
.card-balance-grid,
.card-rules,
.card-ledger,
.ride-recommendation-grid,
.private-driver-list,
.transport-record-list,
.travel-command-header,
.travel-dashboard-sections,
.travel-booking-summary,
.travel-transport-summary,
.travel-focus-grid,
.travel-provider-cards,
.travel-smart-results,
.wallet-dashboard-header,
.wallet-home-grid,
.wallet-trip-card-grid,
.wallet-dashboard-sections,
.wallet-section-card-grid,
.wallet-breakdown,
.wallet-action-grid,
.messages-layout,
.memories-gallery-shell,
.social-hub-layout,
.settings-shell,
.admin-settings-shell,
.ride-two-column-grid,
.transport-dashboard-grid,
.travel-settings-shell,
.wallet-redesign-shell,
.profile-social-hero,
.profile-hero-card,
.profile-identity-card,
.settings-row,
.shared-wallet-ledger div,
.card-ledger div,
.transaction-row,
.document-list div,
.alert-preview-list div,
.ride-history-list article,
.ride-notification-list article,
.navigation-audit-list div,
.member-table > div,
.travel-dashboard-card--overview dl,
.wallet-metric-list {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: clamp(12px, 1.8vw, 20px);
  align-items: stretch;
}

.content-grid > *,
.dashboard-widget-grid > *,
.widget-grid > *,
.dashboard-widgets > *,
.right-stack > *,
.navigation-status-grid > *,
.events-dashboard-grid > *,
.event-experience-grid > *,
.solo-dashboard-grid > *,
.corporate-access-admin-grid > *,
.employee-dashboard > *,
.permission-grid > *,
.invite-grid > *,
.explore-grid > *,
.destination-grid > *,
.reservation-reminder-grid > *,
.itinerary-dashboard > *,
.travel-itinerary-dashboard > *,
.travel-reservation-sections > *,
.upcoming-reservation-grid > *,
.memory-gallery-grid > *,
.memory-album-grid > *,
.platform-grid > *,
.profile-card-grid > *,
.profile-stats-grid > *,
.profile-adventure-grid > *,
.profile-memory-strip > *,
.backend-readiness-grid > *,
.audit-grid > *,
.security-list > *,
.payment-method-grid > *,
.card-balance-grid > *,
.card-rules > *,
.card-ledger > *,
.ride-recommendation-grid > *,
.private-driver-list > *,
.transport-record-list > *,
.travel-command-header > *,
.travel-dashboard-sections > *,
.travel-booking-summary > *,
.travel-transport-summary > *,
.travel-focus-grid > *,
.travel-provider-cards > *,
.travel-smart-results > *,
.wallet-dashboard-header > *,
.wallet-home-grid > *,
.wallet-trip-card-grid > *,
.wallet-dashboard-sections > *,
.wallet-section-card-grid > *,
.wallet-breakdown > *,
.wallet-action-grid > *,
.messages-layout > *,
.memories-gallery-shell > *,
.social-hub-layout > *,
.settings-shell > *,
.admin-settings-shell > *,
.ride-two-column-grid > *,
.transport-dashboard-grid > *,
.travel-settings-shell > *,
.wallet-redesign-shell > * {
  grid-column: 1 / -1 !important;
  width: 100%;
  max-width: 100%;
}

#rideShareHub > .section-heading { order: 0; }
#rideShareHub > .travel-command-header { order: 1; }
#rideShareHub > .travel-smart-search { order: 2; }
#rideShareHub > .travel-overview-card { order: 3; }
#rideShareHub > .travel-section-nav { order: 4; }
#rideShareHub > .travel-selected-tile { order: 5; }
#rideShareHub > .travel-settings-shell { order: 6; }
#rideShareHub > .travel-workspace { order: 7; }
#rideShareHub > .transport-confirmation-hub { order: 8; }
#rideShareHub > .ride-hub-redesign { order: 9; }
#rideShareHub > .ride-assistant-panel,
#rideShareHub > .payment-method-grid,
#rideShareHub > #rideMessage,
#rideShareHub > .corporate-meal-rules { order: 10; }

#walletPanel .wallet-section-nav,
.travel-settings-sidebar,
.settings-nav-panel {
  position: relative;
  top: auto;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 8px;
}

.travel-settings-nav,
.wallet-section-nav,
.settings-nav-panel {
  max-width: 100%;
}

.travel-settings-nav details,
.wallet-section-nav button,
.settings-nav-panel button {
  width: 100%;
}

.travel-smart-search-row,
.travel-result-card,
.wallet-trip-tile,
.memory-media-card,
.platform-card,
.conversation-card,
.transport-record-card,
.settings-row {
  grid-template-columns: minmax(0, 1fr) !important;
}

.wallet-trip-tile img,
.memory-media-card img,
.profile-social-hero > img,
.travel-current-trip-card img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
}

.wallet-smart-actions,
.wallet-quick-actions-redesign,
.travel-quick-actions.compact,
.pass-actions,
.memory-card-actions,
.platform-actions,
.explore-card-actions,
.button-row,
.mini-action-row,
.hero-actions,
.social-action-row,
.ride-account-actions,
.itinerary-action-row,
.corporate-card-actions {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 10px;
}

.wallet-smart-actions button,
.wallet-quick-actions-redesign button,
.travel-quick-actions.compact button,
.pass-actions button,
.memory-card-actions button,
.platform-actions button,
.explore-card-actions button,
.button-row button,
.mini-action-row button,
.hero-actions button,
.social-action-row button,
.ride-account-actions button,
.itinerary-action-row button,
.corporate-card-actions button,
.travel-dashboard-card button,
.travel-booking-summary button,
.travel-transport-summary button,
.wallet-dashboard-sections button,
.wallet-section-card-grid button,
.wallet-action-grid button,
.profile-card-grid button,
.profile-adventure-grid button,
.events-dashboard-grid button,
.event-experience-card button,
.settings-row button,
.conversation-card button,
.backend-readiness-grid button,
.audit-grid button {
  justify-self: stretch !important;
  width: 100% !important;
}

.trip-tab-bar,
.tabs,
.message-tabs,
.split-mode-tabs,
.transport-tabs,
.explore-tabs,
.event-dashboard-tabs,
.travel-section-nav,
.pass-filter-row,
.travel-pass-filters,
.travel-search-suggestions {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  overflow: visible;
}

.trip-tab-bar button,
.tabs .tab,
.tab,
.message-tabs button,
.split-mode-tabs button,
.transport-tabs button,
.explore-tabs button,
.event-dashboard-tabs button,
.travel-section-nav button,
.pass-filter-row button,
.travel-pass-filters button,
.travel-search-suggestions button {
  width: 100%;
  min-width: 0;
  white-space: normal;
  justify-content: flex-start;
}

.visual-pass-grid,
.single-focus-pass {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
}

.digital-boarding-pass h4,
.digital-boarding-pass dl,
.digital-boarding-pass .official-code,
.digital-boarding-pass .barcode-strip,
.digital-boarding-pass .pass-actions {
  margin-left: 0;
}

.digital-boarding-pass .pass-topline,
.digital-boarding-pass .pass-provider,
.digital-boarding-pass .pass-route {
  width: 100%;
}

.digital-boarding-pass {
  background: linear-gradient(180deg, #0f2f3a 0 190px, #ffffff 190px);
}

.digital-boarding-pass::before {
  display: none;
}

/* Section 71: Approved dashboard design applied across every tab */
:root {
  --td-approved-bg: #f6fbff;
  --td-approved-card: rgba(255, 255, 255, 0.96);
  --td-approved-border: rgba(15, 23, 42, 0.09);
  --td-approved-shadow: 0 12px 30px rgba(15, 23, 42, 0.075);
  --td-approved-radius: 18px;
  --td-approved-tab: #ffffff;
  --td-approved-active: linear-gradient(135deg, #7dd3fc, #99f6e4 52%, #fed7aa);
  --td-approved-gap: clamp(16px, 2vw, 24px);
}

body:not(.auth-screen) {
  background:
    radial-gradient(circle at 12% 8%, rgba(125, 211, 252, 0.28), transparent 28%),
    radial-gradient(circle at 88% 10%, rgba(253, 186, 116, 0.24), transparent 26%),
    linear-gradient(180deg, var(--td-approved-bg), #fff7ed 100%);
}

body.app-routed main {
  max-width: min(1440px, 100%);
}

.topbar,
.trip-tab-bar,
.tabs,
.message-tabs,
.split-mode-tabs,
.transport-tabs,
.explore-tabs,
.event-dashboard-tabs,
.travel-section-nav,
.pass-filter-row,
.travel-pass-filters,
.travel-search-suggestions {
  display: flex !important;
  flex-wrap: nowrap;
  align-items: center;
  gap: 10px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 10px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 999px !important;
  background: var(--td-approved-tab);
  box-shadow: var(--td-approved-shadow);
  -webkit-overflow-scrolling: touch;
}

.trip-tab-bar button,
.tabs .tab,
.tab,
.message-tabs button,
.split-mode-tabs button,
.transport-tabs button,
.explore-tabs button,
.event-dashboard-tabs button,
.travel-section-nav button,
.pass-filter-row button,
.travel-pass-filters button,
.travel-search-suggestions button {
  flex: 0 0 auto;
  width: auto !important;
  min-width: max-content;
  min-height: 40px;
  justify-content: center;
  padding: 0 14px;
  border-radius: 999px !important;
  white-space: nowrap;
  color: #0f2f3a;
}

.trip-tab-bar button.active,
.tabs .tab.active,
.tab.active,
.message-tabs button.active,
.split-mode-tabs button.active,
.transport-tabs button.active,
.explore-tabs button.active,
.event-dashboard-tabs button.active,
.travel-section-nav button.active,
.pass-filter-row button.active,
.travel-pass-filters button.active,
.travel-search-suggestions button.active {
  background: var(--td-approved-active) !important;
  color: #082f49 !important;
  box-shadow: 0 8px 18px rgba(8, 127, 140, 0.14);
}

.content-grid,
.dashboard-widget-grid,
.widget-grid,
.dashboard-widgets,
.right-stack,
.navigation-status-grid,
.events-dashboard-grid,
.event-experience-grid,
.solo-dashboard-grid,
.corporate-access-admin-grid,
.employee-dashboard,
.permission-grid,
.invite-grid,
.explore-grid,
.destination-grid,
.reservation-reminder-grid,
.itinerary-dashboard,
.travel-itinerary-dashboard,
.travel-reservation-sections,
.upcoming-reservation-grid,
.memory-gallery-grid,
.memory-album-grid,
.platform-grid,
.profile-stats-grid,
.profile-adventure-grid,
.profile-memory-strip,
.backend-readiness-grid,
.audit-grid,
.security-list,
.payment-method-grid,
.card-balance-grid,
.card-rules,
.card-ledger,
.ride-recommendation-grid,
.private-driver-list,
.transport-record-list,
.travel-command-header,
.travel-dashboard-sections,
.travel-booking-summary,
.travel-transport-summary,
.travel-focus-grid,
.travel-provider-cards,
.travel-smart-results,
.wallet-dashboard-header,
.wallet-home-grid,
.wallet-trip-card-grid,
.wallet-dashboard-sections,
.wallet-section-card-grid,
.wallet-breakdown,
.wallet-action-grid,
.visual-pass-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)) !important;
  gap: var(--td-approved-gap);
  align-items: stretch;
}

.messages-layout,
.memories-gallery-shell,
.social-hub-layout,
.settings-shell,
.admin-settings-shell,
.ride-two-column-grid,
.transport-dashboard-grid,
.travel-settings-shell,
.wallet-redesign-shell,
.profile-card-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)) !important;
  gap: var(--td-approved-gap);
  align-items: start;
}

.travel-dashboard-card--overview,
.wallet-dashboard-sections > article:first-child,
.itinerary-card--featured,
.itinerary-timeline-dashboard,
.settings-main-panel,
.messages-hub,
.memory-comments-panel,
.social-card.is-large,
.backend-readiness-grid > article:first-child,
.audit-grid > article:first-child {
  grid-column: span 2 !important;
}

.section-heading,
.travel-command-header > *,
.travel-smart-search,
.travel-dashboard-card,
.travel-booking-summary article,
.travel-transport-summary article,
.travel-focus-header,
.travel-focus-grid article,
.travel-provider-cards article,
.travel-result-group,
.travel-result-card,
.wallet-dashboard-header article,
.wallet-summary-card,
.wallet-balance-hero,
.wallet-trip-tile,
.wallet-virtual-preview,
.wallet-dashboard-sections article,
.wallet-section-card-grid article,
.trip-wallet-card,
.virtual-card,
.profile-social-hero,
.profile-card-grid article,
.events-dashboard-grid article,
.event-experience-card,
.memory-media-card,
.social-card,
.platform-card,
.conversation-card,
.settings-row,
.settings-main-panel,
.settings-nav-panel,
.admin-panel,
.navigation-audit-panel,
.backend-readiness-panel,
.security-list div,
.audit-grid article,
.destination-card,
.explore-card,
.reservation-reminder-card,
.ride-clean-card,
.transport-record-card,
.transport-pass-card,
.visual-pass-card {
  border-radius: var(--td-approved-radius) !important;
  border: 1px solid var(--td-approved-border);
  background: var(--td-approved-card);
  box-shadow: var(--td-approved-shadow);
}

.section-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  padding: 18px;
}

.section-heading .eyebrow,
.panel .eyebrow {
  color: #0891b2;
  letter-spacing: 0.08em;
}

.travel-dashboard-card:nth-child(4n + 1),
.wallet-dashboard-header article:nth-child(4n + 1),
.profile-stats-grid article:nth-child(4n + 1),
.events-dashboard-grid article:nth-child(4n + 1),
.platform-card:nth-child(4n + 1) {
  background: linear-gradient(180deg, #ffffff, rgba(224, 242, 254, 0.86));
}

.travel-dashboard-card:nth-child(4n + 2),
.wallet-dashboard-header article:nth-child(4n + 2),
.profile-stats-grid article:nth-child(4n + 2),
.events-dashboard-grid article:nth-child(4n + 2),
.platform-card:nth-child(4n + 2) {
  background: linear-gradient(180deg, #ffffff, rgba(204, 251, 241, 0.78));
}

.travel-dashboard-card:nth-child(4n + 3),
.wallet-dashboard-header article:nth-child(4n + 3),
.profile-stats-grid article:nth-child(4n + 3),
.events-dashboard-grid article:nth-child(4n + 3),
.platform-card:nth-child(4n + 3) {
  background: linear-gradient(180deg, #ffffff, rgba(254, 215, 170, 0.72));
}

.travel-dashboard-card:nth-child(4n + 4),
.wallet-dashboard-header article:nth-child(4n + 4),
.profile-stats-grid article:nth-child(4n + 4),
.events-dashboard-grid article:nth-child(4n + 4),
.platform-card:nth-child(4n + 4) {
  background: linear-gradient(180deg, #ffffff, rgba(221, 214, 254, 0.62));
}

.travel-smart-search-row,
.travel-result-card,
.wallet-trip-tile,
.memory-media-card,
.platform-card,
.conversation-card,
.transport-record-card,
.settings-row,
.shared-wallet-ledger div,
.card-ledger div,
.transaction-row,
.document-list div,
.alert-preview-list div,
.ride-history-list article,
.ride-notification-list article,
.navigation-audit-list div,
.member-table > div {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center;
  gap: 12px;
}

.wallet-trip-tile,
.memory-media-card,
.platform-card,
.conversation-card {
  grid-template-columns: auto minmax(0, 1fr) auto !important;
}

.wallet-smart-actions,
.wallet-quick-actions-redesign,
.travel-quick-actions.compact,
.pass-actions,
.memory-card-actions,
.platform-actions,
.explore-card-actions,
.button-row,
.mini-action-row,
.hero-actions,
.social-action-row,
.ride-account-actions,
.itinerary-action-row,
.corporate-card-actions {
  display: flex !important;
  flex-wrap: wrap;
  gap: 10px;
}

.wallet-smart-actions button,
.wallet-quick-actions-redesign button,
.travel-quick-actions.compact button,
.pass-actions button,
.memory-card-actions button,
.platform-actions button,
.explore-card-actions button,
.button-row button,
.mini-action-row button,
.hero-actions button,
.social-action-row button,
.ride-account-actions button,
.itinerary-action-row button,
.corporate-card-actions button {
  width: auto !important;
  min-width: max-content;
}

.digital-boarding-pass {
  background:
    linear-gradient(90deg, rgba(15, 47, 58, 0.98) 0 34%, rgba(255, 255, 255, 0.98) 34%),
    #ffffff;
}

.digital-boarding-pass::before {
  display: block;
}

.digital-boarding-pass .pass-topline,
.digital-boarding-pass .pass-provider,
.digital-boarding-pass .pass-route {
  width: calc(34% - 18px);
}

.digital-boarding-pass h4,
.digital-boarding-pass dl,
.digital-boarding-pass .official-code,
.digital-boarding-pass .barcode-strip,
.digital-boarding-pass .pass-actions {
  margin-left: 35%;
}

.mobile-nav {
  border-radius: 24px !important;
}

@media (max-width: 900px) {
  .travel-dashboard-card--overview,
  .wallet-dashboard-sections > article:first-child,
  .itinerary-card--featured,
  .itinerary-timeline-dashboard,
  .settings-main-panel,
  .messages-hub,
  .memory-comments-panel,
  .social-card.is-large,
  .backend-readiness-grid > article:first-child,
  .audit-grid > article:first-child {
    grid-column: auto !important;
  }
}

@media (max-width: 640px) {
  .section-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .wallet-smart-actions,
  .wallet-quick-actions-redesign,
  .travel-quick-actions.compact,
  .pass-actions,
  .memory-card-actions,
  .platform-actions,
  .explore-card-actions,
  .button-row,
  .mini-action-row,
  .hero-actions,
  .social-action-row,
  .ride-account-actions,
  .itinerary-action-row,
  .corporate-card-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }

  .wallet-smart-actions button,
  .wallet-quick-actions-redesign button,
  .travel-quick-actions.compact button,
  .pass-actions button,
  .memory-card-actions button,
  .platform-actions button,
  .explore-card-actions button,
  .button-row button,
  .mini-action-row button,
  .hero-actions button,
  .social-action-row button,
  .ride-account-actions button,
  .itinerary-action-row button,
  .corporate-card-actions button {
    width: 100% !important;
    min-width: 0;
  }

  .travel-smart-search-row,
  .travel-result-card,
  .wallet-trip-tile,
  .memory-media-card,
  .platform-card,
  .conversation-card,
  .transport-record-card,
  .settings-row,
  .shared-wallet-ledger div,
  .card-ledger div,
  .transaction-row,
  .document-list div,
  .alert-preview-list div,
  .ride-history-list article,
  .ride-notification-list article,
  .navigation-audit-list div,
  .member-table > div {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .digital-boarding-pass {
    background: linear-gradient(180deg, #0f2f3a 0 190px, #ffffff 190px);
  }

  .digital-boarding-pass::before {
    display: none;
  }

  .digital-boarding-pass .pass-topline,
  .digital-boarding-pass .pass-provider,
  .digital-boarding-pass .pass-route {
    width: 100%;
  }

  .digital-boarding-pass h4,
  .digital-boarding-pass dl,
  .digital-boarding-pass .official-code,
  .digital-boarding-pass .barcode-strip,
  .digital-boarding-pass .pass-actions {
    margin-left: 0;
  }
}

/* Section 72: Smart dashboard appearance mirrored across every app tab */
:root {
  --td-dashboard-shell: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(240, 249, 255, 0.78));
  --td-dashboard-card-bg: rgba(255, 255, 255, 0.96);
  --td-dashboard-card-border: rgba(15, 23, 42, 0.08);
  --td-dashboard-card-shadow: 0 12px 26px rgba(15, 23, 42, 0.07);
  --td-dashboard-card-radius: 18px;
  --td-dashboard-card-gap: clamp(14px, 1.8vw, 20px);
  --td-dashboard-pad: clamp(16px, 2vw, 24px);
}

body.app-routed main > section.panel:not([hidden]),
body.app-routed main > section.route-screen:not([hidden]):not(#dashboardHome) {
  width: 100%;
  max-width: 100%;
  display: grid !important;
  gap: var(--td-dashboard-card-gap);
  padding: var(--td-dashboard-pad);
  border: 1px solid rgba(15, 23, 42, 0.06);
  border-radius: 24px !important;
  background: var(--td-dashboard-shell);
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.08);
}

#dashboardHome {
  border-radius: 28px;
  box-shadow: 0 24px 48px rgba(15, 23, 42, 0.12);
}

#exploreDrops,
#tripsPanel,
#cruisePanel,
#socialHub,
#memoriesPanel,
#importantInfo,
#walletPanel,
#rideShareHub,
#itineraryAlerts,
#myProfile,
#adminPanel {
  align-content: start;
}

#exploreDrops > .section-heading,
#tripsPanel > .section-heading,
#cruisePanel > .section-heading,
#socialHub > .section-heading,
#memoriesPanel > .section-heading,
#importantInfo > .section-heading,
#walletPanel > .section-heading,
#rideShareHub > .section-heading,
#itineraryAlerts > .section-heading,
#myProfile > .section-heading,
#adminPanel > .section-heading {
  margin: 0;
  padding: clamp(14px, 1.6vw, 18px);
  border-radius: 18px !important;
  background:
    linear-gradient(135deg, rgba(224, 242, 254, 0.92), rgba(255, 237, 213, 0.78)),
    #ffffff;
}

#exploreDrops > :where(section, article, div, form):not(.section-heading):not(.explore-tabs):not(.explore-subfilters):not(.explore-results-toolbar):not(.button-row):not(.mini-action-row):not([hidden]),
#tripsPanel > :where(section, article, div, form):not(.section-heading):not(.button-row):not(.mini-action-row):not([hidden]),
#cruisePanel > :where(section, article, div, form):not(.section-heading):not(.button-row):not(.mini-action-row):not([hidden]),
#socialHub > :where(section, article, div, form):not(.section-heading):not(.button-row):not(.mini-action-row):not([hidden]),
#memoriesPanel > :where(section, article, div, form):not(.section-heading):not(.button-row):not(.mini-action-row):not([hidden]),
#importantInfo > :where(section, article, div, form):not(.section-heading):not(.button-row):not(.mini-action-row):not([hidden]),
#walletPanel > :where(section, article, div, form):not(.section-heading):not(.button-row):not(.mini-action-row):not([hidden]),
#rideShareHub > :where(section, article, div, form):not(.section-heading):not(.travel-section-nav):not(.button-row):not(.mini-action-row):not([hidden]),
#itineraryAlerts > :where(section, article, div, form):not(.section-heading):not(.button-row):not(.mini-action-row):not([hidden]),
#myProfile > :where(section, article, div, form):not(.section-heading):not(.profile-social-hero):not(.profile-quick-actions):not(.button-row):not(.mini-action-row):not([hidden]),
#adminPanel > :where(section, article, div, form):not(.section-heading):not(.button-row):not(.mini-action-row):not([hidden]) {
  min-width: 0;
  border-radius: var(--td-dashboard-card-radius) !important;
  border: 1px solid var(--td-dashboard-card-border);
  background: var(--td-dashboard-card-bg);
  box-shadow: var(--td-dashboard-card-shadow);
}

#exploreDrops :where(.explore-context-grid, .explore-results-grid, .explore-skeleton-grid, .explore-grid, .destination-grid),
#tripsPanel :where(.event-experience-grid, .solo-dashboard-grid, .feature-toggle-grid, .solo-workspace, .invitation-builder-grid, .invitation-options-grid),
#cruisePanel :where(.cruise-dashboard-grid, .cruise-doc-grid, .cruise-activity-grid, .cruise-card-grid, .cruise-corporate-rules),
#socialHub :where(.messages-layout, .message-support-grid, .daily-memory-grid, .social-hub-layout, .platform-grid),
#memoriesPanel :where(.memories-gallery-shell, .memory-gallery-grid, .memory-album-grid, .memory-action-grid, .profile-memory-gallery),
#importantInfo :where(.info-status-grid, .important-info-grid, .document-list, .info-card-grid),
#walletPanel :where(.wallet-dashboard-header, .wallet-home-grid, .wallet-trip-card-grid, .wallet-dashboard-sections, .wallet-section-card-grid, .wallet-action-grid, .wallet-breakdown),
#rideShareHub :where(.travel-overview-card, .travel-dashboard-sections, .travel-booking-summary, .travel-transport-summary, .travel-focus-grid, .travel-provider-cards, .visual-pass-grid, .ride-recommendation-grid, .private-driver-list, .transport-record-list),
#itineraryAlerts :where(.itinerary-dashboard, .travel-itinerary-dashboard, .upcoming-reservation-grid, .reservation-reminder-grid, .alert-category-grid, .delivery-preferences),
#myProfile :where(.profile-card-grid, .profile-stats-grid, .profile-adventure-grid, .profile-connections-grid, .profile-personal-grid, .profile-photo-policy-grid),
#adminPanel :where(.settings-shell, .admin-settings-shell, .security-status-grid, .security-control-grid, .fraud-signal-list, .backend-summary-grid, .backend-readiness-grid, .audit-grid) {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)) !important;
  gap: var(--td-dashboard-card-gap) !important;
  align-items: stretch;
}

#exploreDrops :where(.explore-context-grid > *, .explore-results-grid > *, .explore-skeleton-grid > *, .explore-grid > *, .destination-grid > *),
#tripsPanel :where(.event-experience-grid > *, .solo-dashboard-grid > *, .feature-toggle-grid > *, .solo-workspace > *, .invitation-builder-grid > *, .invitation-options-grid > *),
#cruisePanel :where(.cruise-dashboard-grid > *, .cruise-doc-grid > *, .cruise-activity-grid > *, .cruise-card-grid > *, .cruise-corporate-rules > *),
#socialHub :where(.message-support-grid > *, .daily-memory-grid > *, .platform-grid > *),
#memoriesPanel :where(.memory-gallery-grid > *, .memory-album-grid > *, .memory-action-grid > *),
#importantInfo :where(.info-status-grid > *, .important-info-grid > *, .document-list > *, .info-card-grid > *),
#walletPanel :where(.wallet-dashboard-header > *, .wallet-home-grid > *, .wallet-trip-card-grid > *, .wallet-dashboard-sections > *, .wallet-section-card-grid > *, .wallet-action-grid > *, .wallet-breakdown > *),
#rideShareHub :where(.travel-overview-card > *, .travel-dashboard-sections > *, .travel-booking-summary > *, .travel-transport-summary > *, .travel-focus-grid > *, .travel-provider-cards > *, .visual-pass-grid > *, .ride-recommendation-grid > *, .private-driver-list > *, .transport-record-list > *),
#itineraryAlerts :where(.itinerary-dashboard > *, .travel-itinerary-dashboard > *, .upcoming-reservation-grid > *, .reservation-reminder-grid > *, .alert-category-grid > *, .delivery-preferences > *),
#myProfile :where(.profile-card-grid > *, .profile-stats-grid > *, .profile-adventure-grid > *, .profile-connections-grid > *, .profile-personal-grid > *, .profile-photo-policy-grid > *),
#adminPanel :where(.security-status-grid > *, .security-control-grid > *, .fraud-signal-list > *, .backend-summary-grid > *, .backend-readiness-grid > *, .audit-grid > *) {
  grid-column: auto !important;
  min-width: 0;
  border-radius: var(--td-dashboard-card-radius) !important;
  border: 1px solid var(--td-dashboard-card-border);
  background:
    linear-gradient(180deg, #ffffff, rgba(248, 253, 255, 0.86)),
    #ffffff;
  box-shadow: var(--td-dashboard-card-shadow);
}

#socialHub .messages-layout,
#memoriesPanel .memories-gallery-shell,
#adminPanel .settings-shell,
#adminPanel .admin-settings-shell,
#rideShareHub .travel-settings-shell,
#rideShareHub .travel-workspace-grid,
#walletPanel .wallet-redesign-shell,
#myProfile .profile-card-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)) !important;
}

#exploreDrops :where(.explore-tabs, .explore-subfilters),
#rideShareHub :where(.travel-section-nav, .travel-pass-filters, .pass-filter-row),
#socialHub .message-tabs,
#adminPanel .settings-nav-panel,
#walletPanel .wallet-section-nav {
  margin: 0;
  border-radius: 999px !important;
  background: #ffffff;
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.06);
}

#exploreDrops :where(button, .primary-button, .ghost-button),
#tripsPanel :where(button, .primary-button, .ghost-button),
#cruisePanel :where(button, .primary-button, .ghost-button),
#socialHub :where(button, .primary-button, .ghost-button),
#memoriesPanel :where(button, .primary-button, .ghost-button),
#importantInfo :where(button, .primary-button, .ghost-button),
#walletPanel :where(button, .primary-button, .ghost-button),
#rideShareHub :where(button, .primary-button, .ghost-button),
#itineraryAlerts :where(button, .primary-button, .ghost-button),
#myProfile :where(button, .primary-button, .ghost-button),
#adminPanel :where(button, .primary-button, .ghost-button) {
  min-height: 40px;
}

@media (min-width: 1180px) {
  #exploreDrops :where(.explore-context-grid, .explore-results-grid, .explore-grid, .destination-grid),
  #tripsPanel :where(.solo-dashboard-grid, .feature-toggle-grid, .solo-workspace),
  #cruisePanel :where(.cruise-dashboard-grid, .cruise-card-grid),
  #socialHub :where(.message-support-grid, .daily-memory-grid, .platform-grid),
  #memoriesPanel :where(.memory-gallery-grid, .memory-album-grid),
  #importantInfo :where(.info-status-grid, .important-info-grid),
  #walletPanel :where(.wallet-dashboard-header, .wallet-home-grid, .wallet-trip-card-grid, .wallet-section-card-grid, .wallet-action-grid),
  #rideShareHub :where(.travel-overview-card, .travel-dashboard-sections, .travel-booking-summary, .travel-transport-summary, .travel-focus-grid, .visual-pass-grid, .ride-recommendation-grid),
  #itineraryAlerts :where(.itinerary-dashboard, .travel-itinerary-dashboard, .upcoming-reservation-grid, .reservation-reminder-grid),
  #myProfile :where(.profile-stats-grid, .profile-adventure-grid, .profile-connections-grid, .profile-personal-grid),
  #adminPanel :where(.security-status-grid, .security-control-grid, .backend-summary-grid, .backend-readiness-grid) {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 920px) {
  body.app-routed main > section.panel:not([hidden]),
  body.app-routed main > section.route-screen:not([hidden]):not(#dashboardHome) {
    padding: 14px;
    border-radius: 20px !important;
  }

  #exploreDrops :where(.explore-context-grid, .explore-results-grid, .explore-grid, .destination-grid),
  #tripsPanel :where(.event-experience-grid, .solo-dashboard-grid, .feature-toggle-grid, .solo-workspace, .invitation-builder-grid, .invitation-options-grid),
  #cruisePanel :where(.cruise-dashboard-grid, .cruise-doc-grid, .cruise-activity-grid, .cruise-card-grid, .cruise-corporate-rules),
  #socialHub :where(.messages-layout, .message-support-grid, .daily-memory-grid, .social-hub-layout, .platform-grid),
  #memoriesPanel :where(.memories-gallery-shell, .memory-gallery-grid, .memory-album-grid, .memory-action-grid),
  #importantInfo :where(.info-status-grid, .important-info-grid, .document-list, .info-card-grid),
  #walletPanel :where(.wallet-dashboard-header, .wallet-home-grid, .wallet-trip-card-grid, .wallet-dashboard-sections, .wallet-section-card-grid, .wallet-action-grid, .wallet-breakdown),
  #rideShareHub :where(.travel-overview-card, .travel-dashboard-sections, .travel-booking-summary, .travel-transport-summary, .travel-focus-grid, .travel-provider-cards, .visual-pass-grid, .ride-recommendation-grid, .private-driver-list, .transport-record-list),
  #itineraryAlerts :where(.itinerary-dashboard, .travel-itinerary-dashboard, .upcoming-reservation-grid, .reservation-reminder-grid, .alert-category-grid, .delivery-preferences),
  #myProfile :where(.profile-card-grid, .profile-stats-grid, .profile-adventure-grid, .profile-connections-grid, .profile-personal-grid, .profile-photo-policy-grid),
  #adminPanel :where(.settings-shell, .admin-settings-shell, .security-status-grid, .security-control-grid, .fraud-signal-list, .backend-summary-grid, .backend-readiness-grid, .audit-grid) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 640px) {
  body.app-routed main > section.panel:not([hidden]),
  body.app-routed main > section.route-screen:not([hidden]):not(#dashboardHome) {
    padding: 12px;
    gap: 12px;
    border-radius: 18px !important;
  }

  #exploreDrops :where(.explore-context-grid, .explore-results-grid, .explore-grid, .destination-grid),
  #tripsPanel :where(.event-experience-grid, .solo-dashboard-grid, .feature-toggle-grid, .solo-workspace, .invitation-builder-grid, .invitation-options-grid),
  #cruisePanel :where(.cruise-dashboard-grid, .cruise-doc-grid, .cruise-activity-grid, .cruise-card-grid, .cruise-corporate-rules),
  #socialHub :where(.messages-layout, .message-support-grid, .daily-memory-grid, .social-hub-layout, .platform-grid),
  #memoriesPanel :where(.memories-gallery-shell, .memory-gallery-grid, .memory-album-grid, .memory-action-grid),
  #importantInfo :where(.info-status-grid, .important-info-grid, .document-list, .info-card-grid),
  #walletPanel :where(.wallet-dashboard-header, .wallet-home-grid, .wallet-trip-card-grid, .wallet-dashboard-sections, .wallet-section-card-grid, .wallet-action-grid, .wallet-breakdown),
  #rideShareHub :where(.travel-overview-card, .travel-dashboard-sections, .travel-booking-summary, .travel-transport-summary, .travel-focus-grid, .travel-provider-cards, .visual-pass-grid, .ride-recommendation-grid, .private-driver-list, .transport-record-list),
  #itineraryAlerts :where(.itinerary-dashboard, .travel-itinerary-dashboard, .upcoming-reservation-grid, .reservation-reminder-grid, .alert-category-grid, .delivery-preferences),
  #myProfile :where(.profile-card-grid, .profile-stats-grid, .profile-adventure-grid, .profile-connections-grid, .profile-personal-grid, .profile-photo-policy-grid),
  #adminPanel :where(.settings-shell, .admin-settings-shell, .security-status-grid, .security-control-grid, .fraud-signal-list, .backend-summary-grid, .backend-readiness-grid, .audit-grid) {
    grid-template-columns: 1fr !important;
  }
}

/* Section 76: restore the signed-in floating destination bar */
body.signed-in-shell .global-destination-header:not([hidden]) {
  position: sticky !important;
  top: 84px;
  z-index: 18;
  display: grid !important;
  grid-template-columns: 96px minmax(0, 1fr) auto !important;
  width: 100%;
  min-width: 0;
  min-height: 82px;
  margin: 0 0 14px;
  padding: 9px 12px;
  overflow: hidden;
  border: 1px solid rgba(15, 23, 42, 0.09);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 12px 26px rgba(15, 23, 42, 0.08);
  backdrop-filter: blur(16px);
}

body.signed-in-shell .global-destination-header img {
  width: 96px;
  height: 62px;
  max-width: 100%;
  border-radius: 11px;
  object-fit: cover;
}

body.signed-in-shell .global-destination-copy,
body.signed-in-shell .global-destination-actions {
  min-width: 0;
}

body.signed-in-shell .global-destination-copy strong,
body.signed-in-shell .global-destination-copy p {
  overflow-wrap: anywhere;
}

body.signed-in-shell .global-destination-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

body.signed-in-shell .global-destination-actions button {
  flex: 0 0 auto;
  min-width: 0;
  max-width: 100%;
}

@media (max-width: 680px) {
  body.signed-in-shell .global-destination-header:not([hidden]) {
    top: 70px;
    grid-template-columns: 64px minmax(0, 1fr) !important;
    min-height: 72px;
    padding: 8px;
  }

  body.signed-in-shell .global-destination-header img {
    width: 64px;
    height: 54px;
  }

  body.signed-in-shell .global-destination-copy strong {
    font-size: 16px;
  }

  body.signed-in-shell .global-destination-copy p {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  body.signed-in-shell .global-destination-actions {
    grid-column: 1 / -1;
    justify-content: stretch;
  }

  body.signed-in-shell .global-destination-actions button {
    flex: 1 1 0;
  }
}

/* Section 75: last-pass wrapper removal and overlap protection */
/* Section 78: final Trending Discovery card treatment */
body.app-routed main > section.panel:not([hidden]) .explore-results-grid,
body.app-routed main > section.route-screen:not([hidden]) .explore-results-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: clamp(14px, 1.8vw, 20px) !important;
  align-items: start !important;
  min-width: 0;
  width: 100%;
}

.explore-results-grid .explore-card {
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-width: 0;
  width: 100%;
  height: auto;
  overflow: hidden;
  border: 1px solid rgba(15, 23, 42, 0.09);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.075);
}

.explore-results-grid .explore-card-main {
  display: block;
  width: 100%;
  min-width: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  text-align: left;
}

.trending-media {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: 16px 16px 0 0;
  background: #eef4f7;
}

.trending-media img,
.trending-media video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.animated-discovery-media img {
  animation: discovery-photo-drift 10s ease-in-out infinite alternate;
}

@keyframes discovery-photo-drift {
  from { transform: scale(1); }
  to { transform: scale(1.035); }
}

.discovery-content {
  display: grid;
  gap: 8px;
  padding: 16px;
  min-width: 0;
}

.discovery-content > * {
  min-width: 0;
  overflow-wrap: anywhere;
}

.discovery-title,
.discovery-location,
.discovery-description,
.discovery-tags,
.discovery-content .explore-card-meta {
  display: block;
}

.discovery-title {
  color: var(--ink);
  font-size: 18px;
  line-height: 1.18;
}

.discovery-location {
  color: #087f8c;
  font-size: 12px;
  font-weight: 800;
}

.discovery-description {
  color: var(--muted);
  line-height: 1.45;
}

.discovery-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.discovery-tags span {
  display: inline-flex;
  max-width: 100%;
  padding: 5px 8px;
  border-radius: 999px;
  background: #eef9fb;
  color: #126477;
  font-size: 11px;
  line-height: 1.25;
}

.explore-results-grid .explore-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0 16px 16px;
}

.explore-results-grid .explore-card-actions button {
  flex: 1 1 120px;
  min-width: 0;
}

@media (prefers-reduced-motion: reduce) {
  .animated-discovery-media img { animation: none; }
}

@media (max-width: 1100px) {
  body.app-routed main > section.panel:not([hidden]) .explore-results-grid,
  body.app-routed main > section.route-screen:not([hidden]) .explore-results-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 680px) {
  body.app-routed main > section.panel:not([hidden]) .explore-results-grid,
  body.app-routed main > section.route-screen:not([hidden]) .explore-results-grid {
    grid-template-columns: 1fr !important;
  }
}
body.app-routed main > section.panel:not([hidden]),
body.app-routed main > section.route-screen:not([hidden]):not(#dashboardHome) {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: clamp(14px, 1.8vw, 20px) !important;
  align-items: start !important;
  width: 100% !important;
  max-width: none !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}

body.app-routed main > section.panel:not([hidden]) > .section-heading,
body.app-routed main > section.route-screen:not([hidden]):not(#dashboardHome) > .section-heading {
  grid-column: 1 / -1 !important;
  margin: 0 !important;
}

body.app-routed main > section.panel:not([hidden]) > :where(.travel-settings-shell, .wallet-redesign-shell, .settings-shell, .admin-settings-shell, .memories-gallery-shell) {
  display: contents !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.app-routed main > section.panel:not([hidden]) :where(.travel-dashboard-sections, .travel-booking-summary, .travel-transport-summary, .travel-focus-grid, .travel-provider-cards, .wallet-dashboard-header, .wallet-home-grid, .wallet-trip-card-grid, .wallet-dashboard-sections, .wallet-section-card-grid, .wallet-action-grid, .info-status-grid, .important-info-grid, .security-status-grid, .security-control-grid, .backend-summary-grid, .backend-readiness-grid, .audit-grid, .memory-gallery-grid, .memory-album-grid, .platform-grid, .messages-layout, .message-support-grid) {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: clamp(14px, 1.8vw, 20px) !important;
  align-items: start !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: visible !important;
}

body.app-routed main > section.panel:not([hidden]) :where(.travel-dashboard-sections > *, .travel-booking-summary > *, .travel-transport-summary > *, .travel-focus-grid > *, .travel-provider-cards > *, .wallet-dashboard-header > *, .wallet-home-grid > *, .wallet-trip-card-grid > *, .wallet-dashboard-sections > *, .wallet-section-card-grid > *, .wallet-action-grid > *, .info-status-grid > *, .important-info-grid > *, .security-status-grid > *, .security-control-grid > *, .backend-summary-grid > *, .backend-readiness-grid > *, .audit-grid > *, .memory-gallery-grid > *, .memory-album-grid > *, .platform-grid > *, .messages-layout > *, .message-support-grid > *) {
  grid-column: auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow-wrap: anywhere;
}

body.app-routed main :where(.trip-tab-bar, .tabs, .message-tabs, .split-mode-tabs, .transport-tabs, .explore-tabs, .event-dashboard-tabs, .travel-section-nav, .pass-filter-row, .travel-pass-filters, .travel-search-suggestions) {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center;
  max-width: 100%;
  overflow-x: auto !important;
  overflow-y: hidden !important;
}

body.app-routed main :where(.trip-tab-bar button, .tabs .tab, .message-tabs button, .split-mode-tabs button, .transport-tabs button, .explore-tabs button, .event-dashboard-tabs button, .travel-section-nav button, .pass-filter-row button, .travel-pass-filters button, .travel-search-suggestions button) {
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: max-content !important;
  white-space: nowrap !important;
}

@media (max-width: 1100px) {
  body.app-routed main > section.panel:not([hidden]),
  body.app-routed main > section.route-screen:not([hidden]):not(#dashboardHome),
  body.app-routed main > section.panel:not([hidden]) :where(.travel-dashboard-sections, .travel-booking-summary, .travel-transport-summary, .travel-focus-grid, .travel-provider-cards, .wallet-dashboard-header, .wallet-home-grid, .wallet-trip-card-grid, .wallet-dashboard-sections, .wallet-section-card-grid, .wallet-action-grid, .info-status-grid, .important-info-grid, .security-status-grid, .security-control-grid, .backend-summary-grid, .backend-readiness-grid, .audit-grid, .memory-gallery-grid, .memory-album-grid, .platform-grid, .messages-layout, .message-support-grid) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 680px) {
  body.app-routed main > section.panel:not([hidden]),
  body.app-routed main > section.route-screen:not([hidden]):not(#dashboardHome),
  body.app-routed main > section.panel:not([hidden]) :where(.travel-dashboard-sections, .travel-booking-summary, .travel-transport-summary, .travel-focus-grid, .travel-provider-cards, .wallet-dashboard-header, .wallet-home-grid, .wallet-trip-card-grid, .wallet-dashboard-sections, .wallet-section-card-grid, .wallet-action-grid, .info-status-grid, .important-info-grid, .security-status-grid, .security-control-grid, .backend-summary-grid, .backend-readiness-grid, .audit-grid, .memory-gallery-grid, .memory-album-grid, .platform-grid, .messages-layout, .message-support-grid) {
    grid-template-columns: 1fr !important;
  }
}