/* KaSabay — Flagship Design System
   Art Direction: Philippine Archipelago Mobility — Apple precision, Airbnb warmth, Linear density, Stripe surface craft */

:root {
  --ink: #0a192f;
  --ink-2: #2c3e5a;
  --muted: #5a6b85;
  --line: rgba(13, 34, 64, 0.085);
  --line-2: rgba(13, 34, 64, 0.16);
  --bg: #fafbfd;
  --surface: #ffffff;
  --soft: #f1f5fa;
  --soft-2: #e6edf7;
  --brand: #0038a8;
  --brand-600: #002b82;
  --brand-700: #061b52;
  --brand-50: #edf3ff;
  --brand-100: #dbe7ff;
  --sun: #fcd116;
  --sun-600: #eab800;
  --sun-ink: #5c4500;
  --red: #ce1126;
  --red-50: #fdf0f1;
  --ok: #0a7b4e;
  --ok-50: #e6f6ef;
  --warn-50: #fff8db;
  --radius-lg: 22px;
  --radius: 16px;
  --radius-s: 12px;
  --radius-xs: 8px;
  --shadow-sm: 0 1px 2px rgba(10, 25, 47, 0.04), 0 2px 6px rgba(10, 25, 47, 0.03);
  --shadow: 0 1px 2px rgba(10, 25, 47, 0.04), 0 8px 24px -4px rgba(10, 25, 47, 0.06), 0 2px 6px -1px rgba(10, 25, 47, 0.03);
  --shadow-lg: 0 4px 12px rgba(10, 25, 47, 0.06), 0 20px 48px -12px rgba(0, 40, 120, 0.14), 0 0 0 1px rgba(13, 34, 64, 0.06);
  --shadow-glow: 0 24px 60px -12px rgba(0, 28, 92, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.14);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --t: 0.2s;
  --fs-xs: 12.5px;
  --fs-sm: 14px;
  --fs-md: 16px;
  --fs-lg: 18px;
  --fs-xl: 22px;
  --font: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-serif: "Instrument Serif", Georgia, serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --gutter: 24px;
  --max: 1160px;
  color-scheme: light;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

main {
  flex: 1;
  outline: none;
}

h1,
h2,
h3 {
  text-wrap: balance;
  margin: 0;
  line-height: 1.15;
  letter-spacing: -0.025em;
  color: var(--ink);
}

h1 {
  font-size: clamp(30px, 4vw, 44px);
  font-weight: 800;
}

h2 {
  font-size: clamp(22px, 2.5vw, 28px);
  font-weight: 800;
  letter-spacing: -0.02em;
}

h3,
.h3 {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.015em;
}

p {
  margin: 0;
  text-wrap: pretty;
}

.rc-times,
.rc-price,
.itin-time,
.book-price strong,
.big-num,
.lines,
.stat-row strong,
.route-meta,
.hv-end-time,
.hv-price-val,
.calc-big {
  font-variant-numeric: tabular-nums;
}

a {
  color: var(--brand);
  text-underline-offset: 3px;
  transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, transform 0.15s var(--ease), box-shadow 0.2s var(--ease);
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

img,
svg {
  display: block;
}

:focus-visible {
  outline: 2.5px solid var(--brand);
  outline-offset: 3px;
  border-radius: 6px;
}

.band :focus-visible,
.sb-go:focus-visible,
.hero :focus-visible {
  outline-color: var(--sun);
}

.sb-go:focus-visible {
  outline-offset: -4px;
}

.wrap {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.wrap.narrow {
  max-width: 760px;
}

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

.small {
  font-size: 13.5px;
}

.strong {
  font-weight: 700;
}

.grow {
  flex: 1;
  min-width: 0;
}

.center {
  text-align: center;
}

.mt {
  margin-top: 16px;
}

.mt-s {
  margin-top: 8px;
}

.mt-l {
  margin-top: 32px;
}

.lede {
  font-size: 17.5px;
  line-height: 1.6;
  max-width: 56ch;
}

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

.skip {
  position: absolute;
  left: -9999px;
  top: 10px;
  background: var(--ink);
  color: #fff;
  padding: 10px 16px;
  border-radius: 999px;
  font-weight: 700;
  z-index: 100;
}

.skip:focus {
  left: 12px;
}

/* ---------- icons ---------- */
.ic,
.nav-link svg,
.tabbar svg,
.nav-avatar svg {
  width: 20px;
  height: 20px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ic-end {
  margin-left: auto;
  color: var(--muted);
}

.ic-star {
  fill: var(--sun);
  stroke: var(--sun-600);
  stroke-width: 1.4;
  width: 15px;
  height: 15px;
}

/* ---------- header ---------- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(250, 251, 253, 0.86);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border-bottom: 1px solid var(--line);
}

.topbar-inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gutter);
  height: 68px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: var(--ink);
}

.brand-logo-full {
  height: 32px;
  width: auto;
  max-width: 140px;
  display: block;
  flex: none;
  object-fit: contain;
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

.brand:hover .brand-logo-full {
  transform: scale(1.04);
}

.brand-mark {
  height: 28px;
  width: auto;
  flex: none;
  display: block;
  object-fit: contain;
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

.brand:hover .brand-mark {
  transform: scale(1.05);
}

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

.brand-word {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: 21.5px;
  letter-spacing: -0.035em;
  color: #0a1931;
  line-height: 1;
}

.auth-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}

.auth-brand .brand-word {
  font-size: 24px;
  color: #0a1931;
}

.brand-badge {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 2px 6px;
  border-radius: 6px;
  background: var(--brand-50);
  color: var(--brand);
  border: 1px solid rgba(0, 56, 168, 0.14);
}

.nav {
  display: flex;
  align-items: center;
  gap: 6px;
}

.nav-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 38px;
  box-sizing: border-box;
  padding: 0 14px;
  border-radius: 999px;
  color: var(--ink-2);
  font-weight: 600;
  text-decoration: none;
  font-size: 14px;
  background: #f8fafc;
  border: 1px solid rgba(15, 23, 42, 0.09);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap;
}

.nav-link svg {
  width: 18px;
  height: 18px;
  color: var(--muted);
  transition: transform 0.25s ease-in-out, color 0.15s ease;
  transform-origin: center center;
  flex-shrink: 0;
}

.nav-link:hover {
  transform: translateY(-0.5px);
}

.nav-link:hover svg {
  color: var(--brand);
}

.nav-link.active {
  background: var(--brand-50);
  color: var(--brand);
  font-weight: 700;
  border-color: rgba(0, 56, 168, 0.2);
}

.nav-link.active svg {
  color: var(--brand);
}

/* Subtle architectural divider */
.nav-sep {
  width: 1px;
  height: 20px;
  background: var(--line, #e2e8f0);
  margin: 0 3px;
  flex-shrink: 0;
  opacity: 0.7;
}
@media (max-width: 1120px) {
  .nav-sep {
    display: none;
  }
}

/* 1. Ask for a ride (Passenger Request Pill) */
.nav-link.nav-ask {
  position: relative;
  background: #f8fafc;
  border: 1px solid rgba(15, 23, 42, 0.09);
}
.nav-link.nav-ask:hover {
  background: #f1f5f9;
  border-color: rgba(15, 23, 42, 0.18);
  color: #0f172a;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.04);
}
.nav-link.nav-ask:hover svg {
  color: #0f172a;
  transform: translateY(-2px) scale(1.08);
}
.nav-link.nav-ask.active {
  background: var(--brand-50);
  color: var(--brand);
  border-color: rgba(0, 56, 168, 0.25);
}

/* 2. Find a ride (Search capsule Pill) */
.nav-link.nav-search-hub {
  position: relative;
  background: #f8fafc;
  border: 1px solid rgba(0, 56, 168, 0.14);
}
.nav-link.nav-search-hub:hover {
  background: #eef4ff;
  border-color: rgba(0, 56, 168, 0.28);
  color: #0038a8;
  box-shadow: 0 2px 6px rgba(0, 56, 168, 0.08);
}
.nav-link.nav-search-hub:hover svg {
  color: #0038a8;
  transform: scale(1.1) rotate(5deg);
}
.nav-link.nav-search-hub.active {
  background: #0038a8;
  border-color: #0038a8;
  color: #ffffff !important;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(0, 56, 168, 0.25);
}
.nav-link.nav-search-hub.active svg {
  color: #ffffff !important;
}

/* 3. Offer a ride (Driver Hero Pill with Steering Wheel wiggle) */
.nav-link.nav-offer-pill {
  position: relative;
  background: rgba(0, 56, 168, 0.05);
  border: 1px solid rgba(0, 56, 168, 0.25);
  color: #0038a8;
  font-weight: 700;
}
.nav-link.nav-offer-pill svg {
  color: #0038a8;
}
@keyframes steerWiggle {
  0% { transform: rotate(0deg); }
  25% { transform: rotate(-12deg); }
  75% { transform: rotate(12deg); }
  100% { transform: rotate(0deg); }
}
.nav-link.nav-offer-pill:hover {
  background: #0038a8;
  border-color: #0038a8;
  color: #ffffff !important;
  box-shadow: 0 3px 10px rgba(0, 56, 168, 0.28);
  transform: translateY(-1px);
}
.nav-link.nav-offer-pill:hover svg {
  color: #ffffff !important;
  animation: steerWiggle 0.45s ease-in-out forwards;
}
.nav-link.nav-offer-pill.active {
  background: #0038a8;
  border-color: #0038a8;
  color: #ffffff !important;
  font-weight: 700;
}
.nav-link.nav-offer-pill.active svg {
  color: #ffffff !important;
}

/* 4. Find passengers (Demand Hub with Live Pulse Dot) */
.nav-link.nav-pax {
  position: relative;
  background: #f8fafc;
  border: 1px solid rgba(15, 23, 42, 0.09);
}
.nav-live-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.3);
  margin-left: 2px;
  flex-shrink: 0;
  animation: livePaxPulse 2.2s infinite ease-in-out;
}
@keyframes livePaxPulse {
  0%, 100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.35);
  }
  50% {
    transform: scale(1.25);
    box-shadow: 0 0 0 5px rgba(16, 185, 129, 0.12);
  }
}
.nav-link.nav-pax:hover {
  background: var(--role-pass-bg);
  border-color: var(--role-pass-bd);
  color: var(--role-pass);
  box-shadow: 0 2px 6px rgba(211, 154, 60, 0.16);
}
.nav-link.nav-pax:hover svg {
  color: var(--role-pass-solid);
  transform: translateY(-2px) scale(1.08);
}
.nav-link.nav-pax.active {
  background: var(--role-pass-solid);
  border-color: var(--role-pass-solid);
  color: var(--role-pass-ink) !important;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(211, 154, 60, 0.35);
}
.nav-link.nav-pax.active svg {
  color: var(--role-pass-ink) !important;
}
.nav-link.nav-pax.active .nav-live-dot {
  background: var(--role-pass-ink);
  box-shadow: 0 0 0 2px rgba(59, 40, 0, 0.25);
}

/* 5. My trips (Boarding Pass Ticket Pill) */
.nav-link.nav-trips {
  position: relative;
  background: #f8fafc;
  border: 1px solid rgba(15, 23, 42, 0.09);
}
.nav-link.nav-trips:hover {
  background: #f1f5f9;
  border-color: rgba(15, 23, 42, 0.18);
  color: #0f172a;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.04);
}
.nav-link.nav-trips:hover svg {
  color: #0f172a;
  transform: translateY(-2px) scale(1.08);
}
.nav-link.nav-trips.active {
  background: var(--brand-50);
  border-color: rgba(0, 56, 168, 0.25);
  color: var(--brand);
}

/* 6. Account Capsule Button */
.nav-account {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: 2px;
  height: 38px;
  box-sizing: border-box;
  padding: 0 14px 0 6px;
  border-radius: 999px;
  border: 1px solid #e2e8f0;
  background: #ffffff;
  text-decoration: none;
  color: #0f172a;
  font-weight: 700;
  font-size: 13.5px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.nav-account:hover {
  border-color: #cbd5e1;
  background: #f8fafc;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
  transform: translateY(-0.5px);
}
.nav-account:hover .nav-avatar svg {
  transform: scale(1.08);
}
.nav-avatar svg {
  transition: transform 0.25s ease-in-out;
}
  font-size: 14.5px;
  box-shadow: var(--shadow-sm);
}

.nav-account:hover,
.nav-account.active {
  border-color: var(--brand);
  background: var(--brand-50);
}

.nav-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--soft);
  color: var(--ink-2);
  display: grid;
  place-items: center;
  font-size: 12.5px;
  font-weight: 800;
}

.nav-avatar.on {
  background: linear-gradient(135deg, var(--brand), var(--brand-600));
  color: #fff;
}

.tabbar {
  display: none;
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  padding: 10px 22px;
  border-radius: 999px;
  border: 1.5px solid transparent;
  font-weight: 700;
  font-size: 15.5px;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.18s var(--ease), border-color 0.18s var(--ease), transform 0.12s var(--ease), box-shadow 0.18s var(--ease);
  white-space: nowrap;
}

.btn:active {
  transform: translateY(1px) scale(0.99);
}

.btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.btn-primary {
  background: linear-gradient(180deg, #0b46be 0%, var(--brand) 100%);
  color: #fff;
  box-shadow: 0 2px 8px rgba(0, 56, 168, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.btn-primary:hover:not(:disabled) {
  background: linear-gradient(180deg, var(--brand) 0%, var(--brand-600) 100%);
  box-shadow: 0 6px 18px rgba(0, 56, 168, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.2);
  transform: translateY(-1px);
}

.btn-sun {
  background: linear-gradient(180deg, #ffda2e 0%, var(--sun) 100%);
  color: var(--ink);
  box-shadow: 0 4px 16px rgba(0, 15, 55, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.55);
}

.btn-sun:hover:not(:disabled) {
  background: var(--sun-600);
  transform: translateY(-1px);
}

.btn-ghost {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--line-2);
  box-shadow: var(--shadow-sm);
}

.btn-ghost:hover:not(:disabled) {
  background: var(--soft);
  border-color: rgba(13, 34, 64, 0.28);
}

.btn-danger {
  background: var(--surface);
  color: var(--red);
  border-color: rgba(206, 17, 38, 0.26);
  white-space: normal;
}

.btn-danger:hover:not(:disabled) {
  background: var(--red-50);
  border-color: var(--red);
}

.btn-sm {
  min-height: 38px;
  padding: 6px 15px;
  font-size: 13.5px;
}

.btn-lg {
  min-height: 54px;
  font-size: 16.5px;
  padding-inline: 28px;
}

.btn-block {
  width: 100%;
}

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

.linkish {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: 0;
  padding: 6px 0;
  color: var(--brand);
  font-weight: 700;
  cursor: pointer;
}

.linkish.danger {
  color: var(--red);
}

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-weight: 700;
  font-size: 14.5px;
  text-decoration: none;
  padding: 7px 14px;
  border-radius: 999px;
  background: var(--brand-50);
  color: var(--brand);
}

.link-arrow:hover {
  background: var(--brand-100);
  transform: translateX(2px);
}

/* ---------- avatar & rating ---------- */
.avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, #e0ebff 0%, #c4d8ff 100%);
  color: var(--brand-600);
  border: 1.5px solid rgba(0, 56, 168, 0.12);
  display: inline-grid;
  place-items: center;
  font-weight: 800;
  font-size: 15px;
  flex: none;
}

.avatar.sm {
  width: 36px;
  height: 36px;
  font-size: 12.5px;
}

.avatar.lg {
  width: 58px;
  height: 58px;
  font-size: 19px;
}

.avatar.xl {
  width: 84px;
  height: 84px;
  font-size: 27px;
}

.rating {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 700;
  font-size: 14px;
}

.rating.new {
  color: var(--muted);
  font-weight: 600;
}

.stars {
  color: var(--sun-600);
  letter-spacing: 1px;
  font-size: 14px;
}

.stars .dim {
  color: var(--line-2);
}

.seat-pips {
  display: inline-flex;
  align-items: center;
  gap: 3.5px;
}

.seat-pips .pip {
  width: 7.5px;
  height: 7.5px;
  border-radius: 50%;
  display: inline-block;
}

.seat-pips .pip.open {
  background: var(--ok);
  box-shadow: 0 0 0 1.5px rgba(10, 123, 78, 0.2);
}

.seat-pips .pip.taken {
  background: var(--line-2);
}

/* ---------- home hero ---------- */
.hero {
  position: relative;
  overflow: hidden;
  color: #fff;
  background: #041029;
}

.hero-backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.hero-bg-photo {
  position: absolute;
  inset: -3%;
  background-image: url("/hero-expressway.jpg");
  background-size: cover;
  background-position: 68% 42%;
  background-repeat: no-repeat;
  filter: saturate(1.12) contrast(1.06);
  transform: scale(1.03);
  animation: heroCinemaDrift 26s ease-in-out infinite alternate;
  will-change: transform;
}

@keyframes heroCinemaDrift {
  0% {
    transform: scale(1.02) translate3d(0, 0, 0);
  }
  100% {
    transform: scale(1.07) translate3d(-1.2%, -0.8%, 0);
  }
}

.hero-bg-scrim {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(680px 340px at 84% 26%, rgba(252, 209, 22, 0.16) 0%, rgba(249, 115, 22, 0.08) 45%, transparent 74%),
    linear-gradient(180deg, rgba(3, 11, 31, 0.56) 0%, rgba(3, 11, 31, 0.12) 28%, rgba(3, 11, 31, 0.24) 72%, rgba(3, 12, 34, 0.92) 100%),
    linear-gradient(96deg, rgba(3, 11, 31, 0.94) 0%, rgba(4, 16, 44, 0.89) 36%, rgba(6, 22, 58, 0.52) 64%, rgba(6, 18, 48, 0.66) 100%);
}

.hero-bg-trails {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.85;
  mix-blend-mode: screen;
}

.hero-trail-line {
  stroke-dasharray: 220 560;
  stroke-dashoffset: 780;
  animation: heroTrailFlow 7.5s linear infinite;
}

.hero-trail-line.ruby-1 {
  stroke-dasharray: 180 540;
  stroke-dashoffset: 720;
  animation-duration: 9s;
  animation-delay: -2.8s;
}

.hero-trail-line.gold-2 {
  stroke-dasharray: 140 620;
  stroke-dashoffset: 760;
  animation-duration: 11s;
  animation-delay: -5.2s;
}

@keyframes heroTrailFlow {
  to {
    stroke-dashoffset: 0;
  }
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background-image: radial-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px);
  background-size: 30px 30px;
  mask-image: linear-gradient(125deg, rgba(0, 0, 0, 0.55) 0%, transparent 62%);
  -webkit-mask-image: linear-gradient(125deg, rgba(0, 0, 0, 0.55) 0%, transparent 62%);
  pointer-events: none;
}

.hero-inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 40px;
  align-items: center;
  padding-top: 52px;
  padding-bottom: 108px;
}

.hero-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 13px;
  border-radius: 999px;
  background: rgba(8, 25, 64, 0.62);
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  font-size: 13px;
  font-weight: 600;
  color: #f0f5ff;
  margin-bottom: 20px;
}

.hero-pill-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--sun);
  box-shadow: 0 0 0 3px rgba(252, 209, 22, 0.28);
}

.hero h1 {
  font-size: clamp(38px, 5vw, 62px);
  line-height: 1.02;
  letter-spacing: -0.038em;
  font-weight: 800;
  color: #fff;
  text-shadow: 0 4px 24px rgba(2, 8, 24, 0.55);
}

.hero h1 span {
  display: block;
}

.hero h1 .hero-serif {
  font-family: var(--font-serif);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(44px, 5.7vw, 70px);
  letter-spacing: -0.01em;
  color: var(--sun);
  margin-top: 2px;
  text-shadow: 0 4px 28px rgba(2, 8, 24, 0.65);
}

.hero-sub {
  margin-top: 20px;
  max-width: 48ch;
  font-size: 17px;
  line-height: 1.6;
  color: rgba(241, 246, 255, 0.94);
  text-shadow: 0 2px 12px rgba(2, 8, 24, 0.5);
}

.hero-metrics {
  margin-top: 28px;
  display: inline-flex;
  align-items: center;
  gap: 20px;
  padding: 12px 20px;
  border-radius: 16px;
  background: rgba(5, 17, 46, 0.68);
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 10px 30px rgba(2, 8, 24, 0.35);
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  flex-wrap: wrap;
}

.hero-metric {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.hero-metric strong {
  font-size: 15px;
  font-weight: 800;
  color: #fff;
}

.hero-metric span {
  font-size: 12px;
  color: rgba(218, 232, 255, 0.84);
}

.hero-metric-sep {
  width: 1px;
  height: 28px;
  background: rgba(255, 255, 255, 0.18);
}

/* Interactive Hero Corridor Explorer (Scaled down 18-20% for landscape visibility) */
.hv {
  position: relative;
  width: 100%;
  max-width: 375px;
  justify-self: end;
  background: rgba(7, 22, 58, 0.64);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 18px;
  padding: 12px;
  box-shadow: 0 18px 45px rgba(2, 8, 24, 0.52), 0 0 0 1px rgba(255, 255, 255, 0.06) inset;
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
}

.hv-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  padding: 3px;
  background: rgba(4, 16, 44, 0.55);
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.hv-tab {
  border: 0;
  background: transparent;
  color: rgba(214, 228, 255, 0.76);
  font-size: 11px;
  font-weight: 700;
  padding: 6px 4px;
  border-radius: 7px;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hv-tab:hover {
  color: #fff;
}

.hv-tab.on {
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.hv-stage {
  margin-top: 10px;
  display: grid;
  gap: 9px;
}

.hv-telemetry {
  padding: 10px 12px;
  border-radius: 13px;
  background: rgba(5, 19, 52, 0.52);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.hv-telemetry-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 11px;
  color: #c8dafc;
}

.hv-badge-live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  color: #fff;
  font-size: 11.5px;
}

.hv-pulse {
  width: 6.5px;
  height: 6.5px;
  border-radius: 50%;
  background: #34d399;
  box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.25);
}

.hv-km {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--sun);
}

.hv-map-strip {
  position: relative;
  margin-top: 3px;
}

.hv-route-svg {
  width: 100%;
  height: 62px;
}

.hv-endpoints {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-top: 3px;
}

.hv-end {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.hv-end.to {
  text-align: right;
  align-items: flex-end;
}

.hv-end-time {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--sun);
}

.hv-end strong {
  font-size: 13.5px;
  color: #fff;
}

.hv-end-sub {
  font-size: 10.5px;
  color: rgba(205, 222, 255, 0.75);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 140px;
}

.hv-ticket {
  display: block;
  padding: 11px 12px;
  border-radius: 13px;
  background: #ffffff;
  color: var(--ink);
  text-decoration: none;
  box-shadow: 0 10px 24px rgba(2, 16, 54, 0.22);
  transition: transform 0.18s var(--ease), box-shadow 0.18s var(--ease);
}

.hv-ticket:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(2, 16, 54, 0.32);
}

.hv-driver-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.hv-driver-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.hv-driver-name {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
}

.hv-rating {
  font-size: 12px;
  font-weight: 700;
  color: #b88600;
}

.hv-rating span {
  color: var(--muted);
  font-weight: 500;
}

.hv-car {
  font-size: 11.5px;
  color: var(--muted);
}

.hv-price-col {
  text-align: right;
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}

.hv-price-val {
  font-size: 18px;
  font-weight: 800;
  color: var(--brand);
}

.hv-price-lbl {
  font-size: 10.5px;
  color: var(--muted);
}

.hv-ticket-foot {
  margin-top: 9px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.hv-chips {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
}

.hv-mini-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2.5px 7px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 700;
}

.hv-mini-chip .ic {
  width: 12px;
  height: 12px;
}

.hv-mini-chip.ok {
  background: var(--ok-50);
  color: var(--ok);
}

.hv-mini-chip.bolt {
  background: var(--warn-50);
  color: #7d5d00;
}

.hv-mini-chip.women {
  background: #fbe9f2;
  color: #a2245f;
}

.hv-cta-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11.5px;
  font-weight: 800;
  color: var(--brand);
}

.hv-cta-link .ic {
  width: 13px;
  height: 13px;
}

/* ---------- search bar ---------- */
.hero-search {
  position: relative;
  z-index: 10;
  margin-top: -46px;
}

.sb {
  display: flex;
  align-items: stretch;
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  position: relative;
  border: 1px solid rgba(13, 34, 64, 0.08);
}

.sb-cell {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  min-height: 76px;
  flex: 1;
  min-width: 0;
  color: var(--muted);
  transition: background-color 0.15s ease;
}

.sb-cell + .sb-cell::before,
.sb-swap + .sb-cell::before {
  content: "";
  position: absolute;
  left: 0;
  top: 16px;
  bottom: 16px;
  width: 1px;
  background: var(--line);
}

.sb-from,
.sb-to {
  flex: 1.35;
}

.sb-date {
  flex: 1;
  cursor: pointer;
}

.sb-pax {
  flex: 0.9;
  cursor: pointer;
}

.sb-field-stack {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.sb-micro {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.055em;
  color: var(--muted);
  line-height: 1.1;
}

.sb-ring {
  width: 13px;
  height: 13px;
  border: 3px solid var(--brand);
  border-radius: 50%;
  flex: none;
}

.sb-ring.end {
  background: var(--brand);
}

.sb-input {
  border: 0;
  background: transparent;
  width: 100%;
  min-width: 0;
  font-weight: 700;
  font-size: 15.5px;
  color: var(--ink);
  padding: 2px 0;
  cursor: pointer;
}

.sb-date-text {
  flex: 1;
  min-width: 0;
  font-weight: 700;
  font-size: 15.5px;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 2px 0;
}

.sb-date-text.is-placeholder {
  color: var(--ink-2);
  font-weight: 600;
}

.sb-date-native {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  border: 0;
}

.sb-date-native::-webkit-calendar-picker-indicator {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
}

.sb-input:focus {
  outline: none;
}

.sb-cell:focus-within {
  background: var(--brand-50);
}

.sb-from:focus-within {
  border-radius: var(--radius-lg) 0 0 var(--radius-lg);
}

.sb select.sb-input {
  appearance: none;
}

.sb-swap {
  align-self: center;
  flex: none;
  width: 36px;
  height: 36px;
  margin: 0 -18px;
  border-radius: 50%;
  border: 1px solid var(--line-2);
  background: var(--surface);
  color: var(--brand);
  display: grid;
  place-items: center;
  cursor: pointer;
  z-index: 3;
  box-shadow: var(--shadow-sm);
  transition: transform 0.25s var(--ease), background-color 0.15s ease, border-color 0.15s ease;
}

.sb-swap .ic {
  width: 16px;
  height: 16px;
  transform: rotate(90deg);
}

.sb-swap:hover {
  background: var(--brand-50);
  border-color: var(--brand);
  transform: scale(1.06);
}

.sb-swap.spin {
  animation: swapSpin 0.35s var(--ease);
}

@keyframes swapSpin {
  0% {
    transform: rotate(0deg) scale(0.95);
  }
  100% {
    transform: rotate(180deg) scale(1);
  }
}

.sb-go {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 0 28px;
  margin: 6px;
  border: 0;
  border-radius: 16px;
  background: linear-gradient(180deg, #0b46be 0%, var(--brand) 100%);
  color: #fff;
  font-weight: 800;
  font-size: 16px;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 56, 168, 0.28);
  transition: background 0.18s ease, transform 0.15s ease, box-shadow 0.18s ease;
}

.sb-go:hover {
  background: var(--brand-600);
  box-shadow: 0 6px 20px rgba(0, 56, 168, 0.36);
}

.sb-compact {
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--line-2);
  border-radius: 18px;
}

.sb-compact .sb-cell {
  min-height: 60px;
  padding: 8px 16px;
}

.sb-compact .sb-go {
  border-radius: 13px;
  padding: 0 22px;
}

/* Quick corridor pills below hero search */
.quick-corridors {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 14px;
  padding-inline: 4px;
}

.quick-label {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--muted);
  margin-right: 4px;
}

.quick-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--line-2);
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  box-shadow: var(--shadow-sm);
}

.quick-chip .ic {
  width: 13px;
  height: 13px;
  color: var(--muted);
}

.quick-chip:hover {
  border-color: var(--brand);
  color: var(--brand);
  background: var(--brand-50);
  transform: translateY(-1px);
}

.quick-chip:hover .ic {
  color: var(--brand);
}

/* ---------- Smart Location Selector (PSGC Hierarchy + Direct Search) ---------- */
.pi {
  position: relative;
  flex: 1;
  min-width: 0;
}

.pi-input-row {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.pi-input-stack {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

.pi-input {
  border: 0;
  background: transparent;
  width: 100%;
  font-weight: 700;
  font-size: 15px;
  color: var(--ink);
  padding: 1px 0;
  text-overflow: ellipsis;
}

.pi-submeta {
  font-size: 11px;
  font-weight: 600;
  color: var(--brand);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.15;
}

.pi-clear {
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 0;
  background: var(--soft);
  color: var(--muted);
  display: grid;
  place-items: center;
  cursor: pointer;
  padding: 0;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.pi-clear[hidden] {
  display: none !important;
}

.pi-clear .ic {
  width: 12px;
  height: 12px;
}

.pi-clear:hover {
  background: var(--line-2);
  color: var(--ink);
}

.pi-input::placeholder {
  color: var(--muted);
  font-weight: 500;
}

.pi-input:focus {
  outline: none;
}

.pi.invalid .pi-input::placeholder,
.pi.invalid .pi-input {
  color: var(--red);
}

.pi-list {
  position: absolute;
  top: calc(100% + 14px);
  left: -34px;
  width: min(460px, 94vw);
  margin: 0;
  padding: 8px;
  list-style: none;
  background: var(--surface);
  border-radius: 16px;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--line-2);
  z-index: 80;
  max-height: 440px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.pi-list[hidden] {
  display: none !important;
}

.pi-items {
  list-style: none;
  margin: 0;
  padding: 2px 0 0;
  overflow-y: auto;
  max-height: 315px;
}

.pi-mode-bar {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 5px;
  padding: 4px;
  background: var(--soft);
  border-radius: 11px;
  margin-bottom: 6px;
  flex: none;
}

.pi-mode-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 7px 10px;
  border-radius: 8px;
  border: 0;
  background: transparent;
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.14s ease, color 0.14s ease, box-shadow 0.14s ease;
}

.pi-mode-btn .ic {
  width: 14px;
  height: 14px;
}

.pi-mode-btn.on {
  background: var(--surface);
  color: var(--brand);
  box-shadow: var(--shadow-sm);
}

.pi-crumbs {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  padding: 5px 8px 7px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 4px;
  flex: none;
}

.pi-crumb {
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 6px;
  cursor: pointer;
}

.pi-crumb:hover {
  background: var(--soft);
  color: var(--ink);
}

.pi-crumb.active {
  background: var(--brand-50);
  color: var(--brand);
}

.pi-crumb-sep {
  color: var(--muted);
  font-size: 12px;
  user-select: none;
}

.pi-select-current {
  padding: 4px 4px 6px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 4px;
  flex: none;
}

.pi-use-unit-btn {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 11px;
  border-radius: 10px;
  border: 1px solid rgba(0, 56, 168, 0.22);
  background: var(--brand-50);
  color: var(--brand);
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  text-align: left;
  transition: background-color 0.14s ease, border-color 0.14s ease;
}

.pi-use-unit-btn:hover {
  background: #dce8ff;
  border-color: var(--brand);
}

.pi-use-unit-btn .ic {
  width: 15px;
  height: 15px;
  flex: none;
}

.pi-code-tag {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.85);
  color: var(--ink-2);
}

.pi-district-bar {
  display: flex;
  align-items: center;
  gap: 5px;
  overflow-x: auto;
  padding: 4px 4px 7px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 4px;
  flex: none;
}

.pi-dist-chip {
  flex: none;
  border: 1px solid var(--line-2);
  background: var(--surface);
  color: var(--ink-2);
  font-size: 11.5px;
  font-weight: 700;
  padding: 4px 9px;
  border-radius: 999px;
  cursor: pointer;
}

.pi-dist-chip.on {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}

.pi-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px 10px 7px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  border-bottom: 1px solid var(--line);
  margin-bottom: 4px;
  flex: none;
}

.pi-kbd {
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 1px 6px;
  border-radius: 5px;
  background: var(--soft);
  color: var(--ink-2);
}

.pi-opt {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 11px;
  border-radius: 11px;
  cursor: pointer;
  color: var(--muted);
  transition: background-color 0.12s ease;
}

.pi-pin {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: var(--soft);
  color: var(--brand);
  display: grid;
  place-items: center;
  flex: none;
}

.pi-pin .ic {
  width: 16px;
  height: 16px;
}

.pi-opt-body {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
  gap: 1px;
}

.pi-opt-title-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

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

.pi-opt-body .muted {
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pi-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 5px;
  background: var(--soft);
  color: var(--ink-2);
  border: 1px solid var(--line-2);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.pi-badge-bgy {
  background: #eef6ff;
  color: var(--brand);
  border-color: rgba(0, 56, 168, 0.18);
}

.pi-badge-huc,
.pi-badge-city {
  background: var(--ok-50);
  color: var(--ok);
  border-color: rgba(13, 122, 73, 0.2);
}

.pi-browse-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: none;
}

.pi-pick-direct-btn {
  border: 1px solid var(--line-2);
  background: var(--surface);
  color: var(--brand);
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 999px;
  cursor: pointer;
  transition: background-color 0.12s ease, border-color 0.12s ease;
}

.pi-pick-direct-btn:hover {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}

.pi-drill-ic {
  width: 16px;
  height: 16px;
  color: var(--muted);
}

.pi-island {
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--soft);
  color: var(--ink-2);
  flex: none;
}

.pi-opt:hover,
.pi-opt.on {
  background: var(--brand-50);
}

.pi-opt:hover .pi-pin,
.pi-opt.on .pi-pin {
  background: var(--brand);
  color: #fff;
}

.pi-none {
  padding: 16px 12px;
  color: var(--muted);
  font-size: 13.5px;
  text-align: center;
}

.pi-big {
  border-bottom: 2px solid var(--line-2);
}

.pi-big:focus-within {
  border-color: var(--brand);
}

.pi-big .pi-input {
  font-size: 22px;
  padding: 14px 0 6px;
}

.pi-big .pi-list {
  position: static;
  width: 100%;
  box-shadow: none;
  border: 0;
  padding: 8px 0 0;
  max-height: none;
  background: transparent;
}

.pi-big .pi-items {
  max-height: 380px;
}

.pi-big .pi-opt {
  padding: 12px 10px;
  border-radius: 12px;
  background: var(--surface);
  margin-bottom: 6px;
  border: 1px solid var(--line);
}

/* ---------- Date & Passengers Matched Popovers ---------- */
.pi-trigger-input {
  cursor: pointer;
}

.pi-trigger-input.is-any {
  color: var(--ink);
}

.pi-chev {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  color: var(--muted);
  transition: transform 0.2s var(--ease), color 0.15s ease, background-color 0.15s ease;
  flex: none;
}

.pi-chev[hidden] {
  display: none !important;
}

.pi-chev .ic {
  width: 15px;
  height: 15px;
}

.sb-cell:hover .pi-chev,
.sb-cell.is-open .pi-chev {
  color: var(--brand);
  background: var(--brand-50);
}

.sb-cell.is-open .pi-chev {
  transform: rotate(180deg);
}

.sb-cell.is-open {
  background: var(--brand-50);
}

.sb-date > .ic,
.sb-pax > .ic {
  width: 19px;
  height: 19px;
  color: var(--brand);
  flex: none;
}

.pi-popover {
  animation: piPopoverIn 0.18s var(--ease);
  transform-origin: top center;
}

@keyframes piPopoverIn {
  0% {
    opacity: 0;
    transform: translateY(-6px) scale(0.985);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.pi-popover-date {
  width: min(390px, 94vw);
  left: -34px;
}

.pi-popover-pax {
  width: min(380px, 94vw);
  left: auto;
  right: -12px;
}

/* Calendar Grid inside Date Popover */
.pi-cal-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 8px 8px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 6px;
}

.pi-cal-title {
  font-size: 14px;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.01em;
}

.pi-cal-arrow {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  border: 1px solid var(--line-2);
  background: var(--surface);
  color: var(--ink-2);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background-color 0.14s ease, border-color 0.14s ease, color 0.14s ease;
}

.pi-cal-arrow .ic {
  width: 16px;
  height: 16px;
}

.pi-cal-arrow:hover {
  background: var(--brand-50);
  border-color: var(--brand);
  color: var(--brand);
}

.pi-cal-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  text-align: center;
  padding: 2px 4px 6px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}

.pi-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px;
  padding: 2px 4px 8px;
}

.pi-cal-day {
  height: 36px;
  border-radius: 9px;
  border: 0;
  background: transparent;
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background-color 0.12s ease, color 0.12s ease, transform 0.12s ease;
}

.pi-cal-day:hover:not(.off):not(.selected) {
  background: var(--brand-50);
  color: var(--brand);
}

.pi-cal-day.today:not(.selected) {
  border: 1.5px solid rgba(0, 56, 168, 0.35);
  color: var(--brand);
}

.pi-cal-day.selected {
  background: var(--brand);
  color: #fff;
  box-shadow: 0 3px 10px rgba(0, 56, 168, 0.28);
}

.pi-cal-day.off {
  color: var(--line-2);
  cursor: not-allowed;
  opacity: 0.55;
}

.pi-cal-foot {
  padding-top: 6px;
  border-top: 1px solid var(--line);
}

/* Stepper Header inside Passengers Popover */
.pi-pax-stepper-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--soft);
  border: 1px solid var(--line);
  margin-bottom: 6px;
}

.pi-pax-stepper-copy {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.pi-pax-stepper-copy strong {
  font-size: 13.5px;
  color: var(--ink);
}

.pi-pax-stepper-copy .muted {
  font-size: 11.5px;
}

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

.pi-step-btn {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid var(--line-2);
  background: var(--surface);
  color: var(--brand);
  font-size: 17px;
  font-weight: 800;
  line-height: 1;
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: background-color 0.14s ease, border-color 0.14s ease, transform 0.12s ease;
}

.pi-step-btn:hover:not(:disabled) {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
  transform: scale(1.05);
}

.pi-step-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.pi-step-val {
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 800;
  color: var(--ink);
  min-width: 18px;
  text-align: center;
}

/* ---------- sections ---------- */
.section {
  padding-top: 64px;
}

.sec-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.eyebrow {
  display: inline-block;
  font-weight: 800;
  color: var(--brand);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 6px;
}

/* Bento value cards */
.values {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  padding-top: 44px;
}

.value {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px;
  box-shadow: var(--shadow-sm);
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

.value:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}

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

.value-tag {
  font-size: 11.5px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--soft);
  color: var(--ink-2);
}

.value h2 {
  font-size: 18px;
  margin: 0 0 8px;
}

.value p {
  color: var(--muted);
  font-size: 14.5px;
  line-height: 1.55;
}

.value-ic {
  width: 44px;
  height: 44px;
  border-radius: 13px;
  background: var(--brand-50);
  color: var(--brand);
  display: grid;
  place-items: center;
  flex: none;
  border: 1px solid rgba(0, 56, 168, 0.1);
}

.value-ic .ic {
  width: 22px;
  height: 22px;
}

/* Empty showcase when no live rides */
.empty-showcase {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 28px;
  padding: 28px;
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  align-items: center;
}

.empty-showcase-copy h3 {
  font-size: 22px;
  margin: 12px 0 8px;
}

.empty-showcase-examples {
  background: var(--soft);
  border-radius: var(--radius);
  padding: 18px;
  display: grid;
  gap: 10px;
  border: 1px solid var(--line);
}

.sample-corridor-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  background: var(--surface);
  border-radius: var(--radius-s);
  border: 1px solid var(--line);
  text-decoration: none;
  color: var(--ink);
}

.sample-corridor-row:hover {
  border-color: var(--brand);
  transform: translateX(2px);
}

.sample-corridor-row div:first-child {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sample-corridor-price {
  text-align: right;
  display: flex;
  flex-direction: column;
}

.sample-corridor-price strong {
  color: var(--brand);
  font-size: 16px;
}

/* Popular corridors grid */
.route-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.route-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 22px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--ink);
  box-shadow: var(--shadow-sm);
}

.route-row:hover {
  border-color: rgba(0, 56, 168, 0.35);
  box-shadow: var(--shadow);
  transform: translateY(-2px);
}

.route-row-main {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}

.route-badges {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.route-island-tag {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--brand-50);
  color: var(--brand);
}

.route-via {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
}

.route-names {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 17.5px;
  margin-top: 2px;
}

.route-names .ic {
  color: var(--brand);
  width: 17px;
  height: 17px;
}

.route-desc {
  font-size: 13.5px;
  color: var(--muted);
}

.route-row-right {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: none;
}

.route-price-tag {
  text-align: right;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.route-price-tag strong {
  font-size: 17px;
  font-weight: 800;
  color: var(--ink);
}

.route-price-tag.live strong {
  color: var(--ok);
}

.route-price-tag span {
  font-size: 12px;
  color: var(--muted);
  font-family: var(--font-mono);
}

.route-go-circle {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--soft);
  color: var(--brand);
  display: grid;
  place-items: center;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.route-row:hover .route-go-circle {
  background: var(--brand);
  color: #fff;
}

/* Passenger requests grid */
.req-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); /* min(): on a 320px phone the card no longer overflows its column */
  gap: 16px;
}

.req {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 14px;
  padding: 20px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.req:hover {
  border-color: rgba(0, 56, 168, 0.32);
  box-shadow: var(--shadow);
  transform: translateY(-2px);
}

.req-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

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

.req-user {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.req-user-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.req-user-name {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.req-date {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  line-height: 1.2;
}

.req-date .ic {
  width: 13px;
  height: 13px;
  color: var(--muted);
  flex-shrink: 0;
}

.req-seat-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  padding: 6px 11px;
  border-radius: 999px;
  background: var(--brand-50);
  color: var(--brand);
  border: 1px solid rgba(0, 56, 168, 0.14);
}

.req-seat-pill .ic {
  width: 13.5px;
  height: 13.5px;
  color: var(--brand);
  flex-shrink: 0;
}

.req-route {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 8px;
  padding-top: 2px;
  font-size: 16.5px;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.015em;
  line-height: 1.3;
}

.req-city {
  color: var(--ink);
}

.req-arrow {
  width: 16px;
  height: 16px;
  color: var(--brand);
  flex-shrink: 0;
}

.req-note {
  margin: 0;
  padding: 10px 12px;
  background: var(--soft);
  border: 1px solid var(--line);
  border-left: 3px solid rgba(0, 56, 168, 0.35);
  border-radius: 10px;
  color: var(--ink-2);
  font-size: 13px;
  line-height: 1.5;
  font-style: italic;
}

.req-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.req-corridor-tag {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--soft);
  color: var(--muted);
}

.req-offer-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--brand);
  text-decoration: none;
  white-space: nowrap;
  transition: gap 0.15s ease, color 0.15s ease;
}

.req-offer-link .ic {
  width: 14px;
  height: 14px;
}

.req-offer-link:hover {
  color: var(--brand-ink);
  gap: 7px;
}

/* ---------- Interactive Driver Pitch & Cost-Split Estimator (Daytime Highway) ---------- */
.band {
  margin-top: 96px;
  margin-bottom: 24px;
  position: relative;
  overflow: hidden;
  color: #fff;
  border-radius: 28px;
  box-shadow: 0 20px 60px rgba(0, 12, 40, 0.28);
}

.band-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.band-bg-photo {
  position: absolute;
  inset: -2%;
  background-image: url("/driver-highway-daytime.jpg");
  background-size: cover;
  background-position: center 48%;
  background-repeat: no-repeat;
  filter: saturate(1.08) contrast(1.04);
}

.band-bg-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(8, 18, 42, 0.84) 0%, rgba(8, 18, 42, 0.68) 36%, rgba(8, 18, 42, 0.15) 50%, rgba(8, 18, 42, 0.64) 66%, rgba(8, 18, 42, 0.84) 100%),
    linear-gradient(180deg, rgba(4, 12, 30, 0.45) 0%, transparent 22%, transparent 78%, rgba(4, 12, 30, 0.55) 100%);
}

.band-inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.12fr 0.88fr;
  gap: 52px;
  align-items: center;
  padding-block: 84px;
  padding-inline: 48px;
}

.band-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.band-tag {
  display: inline-flex;
  align-items: center;
  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 4px 11px;
  border-radius: 999px;
  background: rgba(30, 24, 10, 0.82);
  color: var(--sun);
  border: 1px solid rgba(252, 209, 22, 0.35);
  margin-bottom: 12px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.band-heading {
  margin-bottom: 12px;
}

.band-heading span {
  display: block;
  font-size: clamp(22px, 2.5vw, 32px);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.025em;
  color: #ffffff;
  text-shadow: 0 3px 18px rgba(0, 0, 0, 0.65);
}

.band-heading .band-serif {
  font-family: var(--font-serif);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(26px, 3vw, 38px);
  letter-spacing: -0.01em;
  color: var(--sun);
  margin-top: 4px;
  text-shadow: 0 3px 20px rgba(0, 0, 0, 0.7);
}

.band-lede {
  font-size: 13.5px;
  line-height: 1.5;
  color: rgba(240, 246, 255, 0.95);
  max-width: 42ch;
  margin-bottom: 20px;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.55);
}

.band-perks-cards {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 22px;
  width: 100%;
  max-width: 390px;
}

.band-perk-card {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 8px 13px;
  border-radius: 13px;
  background: rgba(11, 24, 52, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 8px 20px rgba(2, 8, 24, 0.32);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition: transform 0.18s ease, background 0.18s ease;
}

.band-perk-card:hover {
  background: rgba(14, 32, 70, 0.82);
  transform: translateX(3px);
}

.perk-icon-wrap {
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: rgba(252, 209, 22, 0.15);
  border: 1px solid rgba(252, 209, 22, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--sun);
}

.perk-icon-wrap .ic {
  width: 14px;
  height: 14px;
}

.perk-text {
  font-size: 12px;
  line-height: 1.35;
  color: #ffffff;
  font-weight: 500;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}

.band-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 24px;
  border-radius: 999px;
  background: linear-gradient(180deg, #ffdc33 0%, var(--sun) 100%);
  color: #041029;
  font-size: 13.5px;
  font-weight: 800;
  text-decoration: none;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.55);
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
  cursor: pointer;
}

.band-cta-btn:hover {
  background: var(--sun-600);
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
}

.band-cta-btn .ic {
  width: 16px;
  height: 16px;
}

/* Glassmorphic Calculator Card (~25% more compact) */
.band-calc {
  position: relative;
  background: rgba(11, 24, 52, 0.76);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 20px;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 13px;
  color: #e2ecff;
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  box-shadow: 0 20px 50px rgba(0, 10, 32, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.08) inset;
  max-width: 380px;
  justify-self: end;
  width: 100%;
}

.calc-eyebrow {
  display: block;
  font-size: 9.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--sun);
  margin-bottom: 7px;
}

.calc-route-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.calc-pill {
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.08);
  color: #e2ecff;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.calc-pill:hover {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
}

.calc-pill.on {
  background: #ffffff;
  color: #0b1836;
  border-color: #ffffff;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.calc-seat-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-block: 2px;
}

.calc-seat-label {
  font-size: 11.5px;
  font-weight: 600;
  color: #cbd5e1;
}

.calc-seat-btns {
  display: flex;
  gap: 5px;
}

.calc-seat-btn {
  width: 29px;
  height: 29px;
  border-radius: 7px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: #1e40af;
  color: #ffffff;
  font-weight: 800;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.calc-seat-btn:hover {
  background: #2563eb;
}

.calc-seat-btn.on {
  background: var(--sun);
  color: #041029;
  border-color: var(--sun);
  box-shadow: 0 2px 8px rgba(252, 209, 22, 0.4);
}

.calc-result {
  background: rgba(4, 14, 38, 0.65);
  border-radius: 15px;
  padding: 13px 15px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  display: flex;
  flex-direction: column;
}

.calc-label {
  display: block;
  font-size: 10.5px;
  color: #94a3b8;
  font-weight: 600;
}

.calc-big {
  display: block;
  font-size: 32px;
  font-weight: 900;
  color: var(--sun);
  line-height: 1.05;
  margin-block: 1px 3px;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 2px 10px rgba(252, 209, 22, 0.3);
}

.calc-sub {
  display: block;
  font-size: 11px;
  color: #cbd5e1;
}

.calc-formula {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: #94a3b8;
}

.calc-savings-badge {
  margin-top: 9px;
  padding: 4px 11px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #f1f5f9;
  font-size: 10px;
  font-weight: 600;
  text-align: center;
}

.calc-submit-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 100%;
  padding: 11px 18px;
  border-radius: 999px;
  background: linear-gradient(180deg, #ffdc33 0%, var(--sun) 100%);
  color: #041029;
  font-size: 13.5px;
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.55);
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.calc-submit-btn:hover {
  background: var(--sun-600);
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.4);
}

.calc-submit-btn .ic {
  width: 15px;
  height: 15px;
}

.calc-trust-badges {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding-top: 0px;
}

.calc-trust-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  font-weight: 700;
  color: #ffffff;
}

.calc-trust-badge .ic {
  width: 14px;
  height: 14px;
  color: #38bdf8;
}

.badge-logo-g {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #007dfe;
  color: #ffffff;
  font-weight: 900;
  font-size: 9.5px;
}

/* Trust section (Designed for peace of mind on every kilometer) */
.trust {
  display: grid;
  grid-template-columns: minmax(360px, 1fr) minmax(440px, 1.15fr);
  gap: 32px;
  align-items: stretch;
  background: linear-gradient(180deg, #fafcff 0%, #f3f7fd 100%);
  border: 1px solid rgba(13, 34, 64, 0.086);
  border-radius: 20px;
  padding: 24px 28px 22px 28px;
  box-shadow: 0 1px 3px rgba(10, 25, 47, 0.04), 0 4px 12px rgba(10, 25, 47, 0.03);
  position: relative;
  overflow: hidden;
  margin-top: var(--sec-gap);
  margin-bottom: 0;
}

.ts-left {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
  position: relative;
}

.ts-editorial {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  z-index: 2;
}

.ts-eyebrow {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand, #0038a8);
  margin-bottom: 6px;
  display: inline-block;
}

.ts-title {
  font-size: 28px;
  font-weight: 800;
  line-height: 1.18;
  color: #0a192f;
  margin: 0 0 8px 0;
  letter-spacing: -0.02em;
  white-space: pre-line;
}

.ts-title-accent {
  color: var(--brand, #0038a8);
  display: inline;
}

.ts-desc {
  font-size: 14.5px;
  line-height: 1.48;
  color: #64748b;
  margin: 0 0 14px 0;
  max-width: 440px;
}

.ts-btn-wrap {
  margin-bottom: 10px;
}

.ts-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 22px;
  background: linear-gradient(180deg, #0b46be 0%, var(--brand, #0038a8) 100%);
  color: #ffffff;
  font-size: 13.5px;
  font-weight: 700;
  border-radius: 999px;
  text-decoration: none;
  box-shadow: 0 2px 8px rgba(0, 56, 168, 0.25);
  transition: background-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.ts-btn-primary:hover {
  background: linear-gradient(180deg, var(--brand, #0038a8) 0%, #002b82 100%);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(0, 56, 168, 0.34);
}

.ts-community {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 2px;
}

.ts-avatars {
  display: flex;
  align-items: center;
}

.ts-avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid #ffffff;
  object-fit: cover;
  margin-left: -6px;
  background: #cce0ff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  display: block;
}

.ts-avatar:first-child {
  margin-left: 0;
}

.ts-community-txt {
  font-size: 12px;
  font-weight: 600;
  color: #64748b;
  line-height: 1.35;
  max-width: 280px;
}

.ts-photo-box {
  position: relative;
  width: 100%;
  height: 145px;
  border-radius: 16px;
  overflow: hidden;
  margin-top: auto;
  box-shadow: 0 4px 18px rgba(15, 29, 54, 0.08);
  background: #d0e1f7;
}

.ts-photo-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 60%;
  display: block;
}

.ts-glass-badge {
  position: absolute;
  bottom: 10px;
  right: 10px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 11px;
  background: rgba(14, 28, 54, 0.52);
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 10px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22);
  color: #ffffff;
}

.ts-glass-ic {
  width: 24px;
  height: 24px;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #ffffff;
}

.ts-glass-txt {
  display: flex;
  flex-direction: column;
  font-size: 10px;
  line-height: 1.25;
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

.ts-glass-txt strong {
  font-weight: 750;
  color: #ffffff;
}

/* 4 Trust Cards Grid */
.ts-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  align-content: stretch;
}

.ts-card {
  background: #ffffff;
  border: 1px solid rgba(13, 34, 64, 0.086);
  border-radius: 16px;
  padding: 16px 18px 15px 18px;
  box-shadow: 0 1px 2px rgba(10, 25, 47, 0.04), 0 2px 6px rgba(10, 25, 47, 0.03);
  display: flex;
  flex-direction: column;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.ts-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(10, 25, 47, 0.08), 0 2px 4px rgba(10, 25, 47, 0.03);
  border-color: rgba(0, 56, 168, 0.25);
}

.ts-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.ts-icon-box {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--brand-50, #edf3ff);
  color: var(--brand, #0038a8);
  border: 1px solid rgba(201, 218, 255, 0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ts-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2.5px 8.5px;
  border-radius: 999px;
  background: #eaf8f0;
  color: #166534;
  font-size: 11px;
  font-weight: 600;
  border: 1px solid #bbf0d0;
}

.ts-card-title {
  font-size: 15.5px;
  font-weight: 700;
  color: #0a192f;
  margin: 0 0 5px 0;
  line-height: 1.25;
}

.ts-card-desc {
  font-size: 12.5px;
  line-height: 1.48;
  color: #64748b;
  margin: 0 0 10px 0;
  flex-grow: 1;
}

.ts-card-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--brand, #0038a8);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  margin-top: auto;
  cursor: pointer;
  transition: gap 0.15s ease, color 0.15s ease;
}

.ts-card-link:hover {
  gap: 8px;
  color: var(--brand-600, #002b82);
}

/* Modal Dialog for Safety Topics */
.ts-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 22, 45, 0.65);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  animation: tsFadeIn 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.ts-modal-dialog {
  background: #ffffff;
  border-radius: 20px;
  width: 100%;
  max-width: 520px;
  box-shadow: 0 20px 48px rgba(10, 25, 50, 0.28);
  border: 1px solid #dbe6f5;
  overflow: hidden;
  animation: tsScaleIn 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

.ts-modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 20px 22px 16px;
  border-bottom: 1px solid #edf3fc;
}

.ts-modal-head-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.ts-modal-kicker {
  display: block;
  font-size: 10px;
  font-weight: 750;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand, #0038a8);
  margin-bottom: 3px;
}

.ts-modal-title {
  font-size: 17px;
  font-weight: 750;
  color: #10203b;
  margin: 0;
  line-height: 1.25;
}

.ts-modal-close {
  background: transparent;
  border: none;
  color: #64748b;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.ts-modal-close:hover {
  background: #f1f5f9;
  color: #0f172a;
}

.ts-modal-body {
  padding: 20px 22px;
  max-height: calc(85vh - 160px);
  overflow-y: auto;
}

.ts-modal-badge-row {
  margin-bottom: 10px;
}

.ts-modal-lead {
  font-size: 14px;
  font-weight: 600;
  color: #1e293b;
  margin: 0 0 14px;
  line-height: 1.45;
}

.ts-modal-points {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ts-modal-points li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  line-height: 1.45;
  color: #475569;
}

.ts-modal-points li svg {
  color: #0f766e;
  flex-shrink: 0;
  margin-top: 2px;
}

.ts-modal-foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 22px 18px;
  background: #f8fbff;
  border-top: 1px solid #edf3fc;
}

@keyframes tsFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes tsScaleIn {
  from { opacity: 0; transform: scale(0.96); }
  to { opacity: 1; transform: scale(1); }
}

@media (max-width: 980px) {
  .trust {
    grid-template-columns: 1fr;
    gap: 28px;
    padding: 26px 22px;
  }
  .ts-photo-box {
    height: 180px;
  }
  .ts-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 680px) {
  .trust {
    padding: 20px 16px;
    border-radius: 20px;
    gap: 22px;
  }
  .ts-title {
    font-size: 26px;
  }
  .ts-photo-box {
    height: 160px;
  }
  .ts-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .ts-glass-badge {
    bottom: 8px;
    right: 8px;
    padding: 6px 10px;
  }
}

/* FAQ section */
.faq {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 24px;
}

.faq details {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0 20px;
  box-shadow: var(--shadow-sm);
}

.faq details[open] {
  border-color: rgba(0, 56, 168, 0.25);
  box-shadow: var(--shadow);
}

.faq summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 0;
  font-weight: 700;
  font-size: 15.5px;
  cursor: pointer;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary .ic {
  color: var(--brand);
  transition: transform 0.2s var(--ease);
}

.faq details[open] summary .ic {
  transform: rotate(180deg);
}

.faq details p {
  padding-bottom: 18px;
  font-size: 14.5px;
  line-height: 1.6;
}

/* ---------- ride cards ---------- */
.rc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 18px;
}

.rc {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  color: var(--ink);
  transition: box-shadow var(--t) var(--ease), transform var(--t) var(--ease), border-color var(--t) var(--ease);
  border: 1px solid var(--line);
  overflow: hidden;
}

.rc:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
  border-color: rgba(0, 56, 168, 0.28);
}

.rc-full {
  opacity: 0.64;
}

.rc-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  padding: 18px 20px 14px;
}

.rc-route {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.rc-tl-row {
  display: grid;
  grid-template-columns: 52px 16px 1fr;
  column-gap: 11px;
  align-items: start;
  position: relative;
}

.rc-tl-origin {
  padding-bottom: 8px;
}

.rc-route:not(.has-stops) .rc-tl-origin {
  padding-bottom: 14px;
}

.rc-tl-via {
  padding-bottom: 6px;
}

.rc-tl-dest {
  padding-top: 2px;
  padding-bottom: 0;
}

.rc-time-val {
  font-family: var(--font-mono);
  font-size: 15.5px;
  font-weight: 700;
  line-height: 22px;
  color: var(--ink);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.rc-time-arr {
  color: var(--ink);
}

.rc-time-empty {
  display: block;
}

.rc-tl-rail {
  position: relative;
  display: flex;
  justify-content: center;
  align-self: stretch;
}

.rc-tl-origin .rc-tl-rail::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 2.5px;
  top: 15px;
  bottom: -9px;
  background: var(--brand);
  border-radius: 2px;
}

.rc-route:not(.has-stops) .rc-tl-origin .rc-tl-rail::after {
  bottom: -13px;
  background: linear-gradient(180deg, var(--brand) 0%, #CBD5E1 100%);
}

.rc-tl-via .rc-tl-rail::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  top: 9px;
  bottom: -13px;
  background: #CBD5E1;
}

.rc-tl-dot {
  display: block;
  border-radius: 50%;
  flex: none;
  position: relative;
  z-index: 2;
}

.rc-tl-dot-start {
  width: 12px;
  height: 12px;
  margin-top: 5px;
  border: 2.5px solid var(--brand);
  background: var(--surface);
}

.rc-tl-dot-via {
  width: 8px;
  height: 8px;
  margin-top: 5px;
  background: #CBD5E1;
  box-shadow: 0 0 0 2px var(--surface);
}

.rc-tl-via.is-hit .rc-tl-dot-via {
  background: var(--brand);
}

.rc-tl-dot-end {
  width: 12px;
  height: 12px;
  margin-top: 5px;
  background: var(--brand);
}

.rc-stop {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.rc-stop strong {
  font-size: 16.5px;
  font-weight: 700;
  line-height: 22px;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rc-landmark {
  font-size: 12.5px;
  line-height: 17px;
  color: #64748B;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rc-stop-via {
  justify-content: center;
}

.rc-via-name {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13.5px;
  line-height: 18px;
  font-weight: 500;
  color: #64748B;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rc-tl-via.is-hit .rc-via-name {
  color: var(--brand);
  font-weight: 700;
}

.rc-via-hit-pill {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--brand-50);
  color: var(--brand);
  border: 1px solid rgba(0, 56, 168, 0.2);
}

.rc-price {
  text-align: right;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-start;
  gap: 8px;
  flex: none;
}

.rc-date-pill {
  font-size: 11.5px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--brand-50);
  color: var(--brand);
}

.rc-price-box {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.rc-amount {
  font-size: 22px;
  font-weight: 800;
  color: var(--brand);
  line-height: 1.1;
}

.rc-per {
  font-size: 11.5px;
  color: var(--muted);
}

.rc-seats-meta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-2);
}

.rc-full-label {
  font-weight: 800;
  color: var(--muted);
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: 0.06em;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--soft);
}

.rc-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 20px;
  background: var(--surface);
  border-top: 1px dashed rgba(148, 163, 184, 0.45);
}

.rc-driver {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.rc-driver-meta {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.rc-driver-line {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
}

.rc-car-line {
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rc-stars {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-2);
}

.rc-stars .ic {
  width: 13.5px;
  height: 13.5px;
}

.rc-new-badge {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ok);
}

.rc-icons {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 26px;
  padding: 0 9px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 700;
}

.chip .ic {
  width: 13.5px;
  height: 13.5px;
}

.chip-bolt {
  background: var(--warn-50);
  border-color: rgba(234, 184, 0, 0.35);
  color: #7d5d00;
}

.chip-bolt .ic {
  fill: var(--sun);
  stroke: #7d5d00;
}

.chip-women {
  background: #fbe9f2;
  border-color: rgba(162, 36, 95, 0.2);
  color: #a2245f;
}

.status {
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
}

.status-confirmed {
  background: var(--ok-50);
  color: var(--ok);
}

.status-pending {
  background: var(--warn-50);
  color: #7a5c00;
}

.status-cancelled {
  background: var(--red-50);
  color: var(--red);
}

.status-past {
  background: var(--soft);
  color: var(--muted);
}

/* ---------- search results ---------- */
.search-top {
  background: var(--surface);
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}

.results {
  display: grid;
  grid-template-columns: 270px 1fr;
  gap: 36px;
  padding-top: 32px;
  align-items: start;
}

.results > .loading {
  grid-column: 1 / -1;
}

.res-side {
  position: sticky;
  top: 88px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: var(--shadow-sm);
}

.filters h2 {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin: 22px 0 8px;
}

.filters .f-head h2 {
  margin-top: 0;
}

.f-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}

.f-group {
  display: grid;
  gap: 2px;
}

.f-opt {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  margin: 0 -10px;
  border-radius: 10px;
  text-decoration: none;
  color: var(--ink);
  font-weight: 600;
  font-size: 14.5px;
}

.f-opt:hover {
  background: var(--soft);
}

.f-opt > .ic {
  color: var(--muted);
  width: 17px;
  height: 17px;
}

.f-label {
  flex: 1;
}

.f-count {
  font-family: var(--font-mono);
  color: var(--muted);
  font-size: 12px;
  background: var(--soft);
  padding: 1px 7px;
  border-radius: 999px;
}

.f-radio,
.f-box {
  width: 20px;
  height: 20px;
  border: 2px solid var(--line-2);
  flex: none;
  display: grid;
  place-items: center;
  background: var(--surface);
}

.f-radio {
  border-radius: 50%;
}

.f-box {
  border-radius: 6px;
  color: #fff;
}

.f-box .ic {
  width: 13px;
  height: 13px;
  stroke-width: 3;
  opacity: 0;
}

.f-opt.on {
  color: var(--brand);
  font-weight: 700;
}

.f-opt.on .f-radio {
  border: 6px solid var(--brand);
}

.f-opt.on .f-box {
  background: var(--brand);
  border-color: var(--brand);
}

.f-opt.on .f-box .ic {
  opacity: 1;
}

.filter-sheet {
  display: none;
}

.res-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
  margin-bottom: 20px;
}

.res-title {
  font-size: clamp(24px, 3vw, 32px);
}

.res-title span {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.res-title .ic {
  width: 24px;
  height: 24px;
  color: var(--brand);
}

.day-nav {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px;
  box-shadow: var(--shadow-sm);
}

.day-nav strong {
  padding: 0 10px;
  font-size: 14px;
}

.day-btn {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--brand);
  background: var(--soft);
}

.day-btn:hover:not(.off) {
  background: var(--brand);
  color: #fff;
}

.day-btn.off {
  color: var(--line-2);
  background: transparent;
}

.res-list {
  display: grid;
  gap: 14px;
}

.res-day {
  font-size: 13.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin-top: 12px;
}

.res-day:first-child {
  margin-top: 0;
}

.res-main .section {
  padding-inline: 0;
  padding-top: 40px;
}

/* ---------- ride detail page ---------- */
.ride {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 44px;
  padding-top: 32px;
  align-items: start;
}

.ride-top-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink-2);
  text-decoration: none;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--line);
}

.back-link:hover {
  color: var(--brand);
  border-color: var(--brand);
}

.back-link .ic {
  width: 16px;
  height: 16px;
}

.ride-date {
  margin-top: 4px;
  font-size: clamp(26px, 3.4vw, 36px);
}

.itin-card {
  margin-top: 22px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px;
  box-shadow: var(--shadow-sm);
}

.itin {
  display: grid;
}

.itin-stop,
.itin-mid {
  display: grid;
  grid-template-columns: 64px 18px 1fr;
  gap: 0 16px;
  align-items: start;
}

.itin-stop > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.itin-stop strong {
  font-size: 18px;
}

.itin-time {
  font-family: var(--font-mono);
  font-size: 17px;
  text-align: right;
}

.itin-dot {
  width: 15px;
  height: 15px;
  margin-top: 5px;
  border: 3.5px solid var(--brand);
  border-radius: 50%;
  background: var(--surface);
}

.itin-dot.end {
  background: var(--brand);
}

.itin-mid {
  align-items: center;
  min-height: 58px;
}

.itin-bar {
  justify-self: center;
  width: 3px;
  height: 100%;
  min-height: 58px;
  background: linear-gradient(180deg, var(--brand) 0%, rgba(0, 56, 168, 0.35) 100%);
}

.itin-mid .itin-time {
  font-size: 12.5px;
}

.itin-km-pill {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-2);
  background: var(--soft);
  padding: 4px 10px;
  border-radius: 999px;
}

.map {
  margin-top: 20px;
  height: 280px;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--soft);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}

.map-fallback {
  padding: 16px;
}

.block {
  margin-top: 24px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px;
  box-shadow: var(--shadow-sm);
}

.person-row {
  display: flex;
  align-items: center;
  gap: 16px;
  text-decoration: none;
  color: var(--ink);
  padding: 10px;
  margin: -10px;
  border-radius: var(--radius-s);
}

.person-row > div {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.person-row .ic-end {
  margin-left: 0;
}

.person-row:hover {
  background: var(--soft);
}

.person-name {
  font-size: 20px;
}

.quote {
  margin-top: 16px;
  padding: 14px 16px;
  background: var(--soft);
  border-left: 3px solid var(--brand);
  border-radius: 0 var(--radius-s) var(--radius-s) 0;
  color: var(--ink-2);
  font-style: italic;
}

.prefs {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: grid;
  gap: 12px;
}

.prefs li {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--ink-2);
  font-weight: 600;
  font-size: 14.5px;
}

.prefs li .ic {
  color: var(--brand);
}

.prefs li.off .ic {
  color: var(--muted);
}

.note {
  margin-top: 18px;
  padding: 16px;
  background: var(--brand-50);
  border: 1px solid rgba(0, 56, 168, 0.14);
  border-radius: var(--radius-s);
}

.note p {
  margin-top: 6px;
  white-space: pre-line;
  color: var(--ink-2);
}

.review {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

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

.review p {
  margin-top: 8px;
  color: var(--ink-2);
}

.block .linkish {
  margin-top: 20px;
}

.ride-side .sticky {
  position: sticky;
  top: 88px;
}

.card {
  background: var(--surface);
  border-radius: var(--radius);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  padding: 24px;
}

.book-route {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 13.5px;
  color: var(--muted);
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}

.book-route strong {
  color: var(--ink);
  font-size: 16.5px;
}

.book-price-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 16px;
}

.book-price {
  display: flex;
  flex-direction: column;
}

.book-price strong {
  font-size: 34px;
  font-weight: 800;
  line-height: 1.05;
  color: var(--brand);
}

.fair-cap-pill {
  margin-top: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 10px;
  background: var(--ok-50);
  color: var(--ok);
  font-size: 12.5px;
  font-weight: 700;
}

.fair-cap-pill .ic {
  width: 16px;
  height: 16px;
}

.seat-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 20px;
  font-weight: 700;
}

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

.stepper button {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1.5px solid var(--brand);
  background: var(--surface);
  color: var(--brand);
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.stepper button:hover:not(:disabled) {
  background: var(--brand);
  color: #fff;
}

.stepper button:disabled {
  border-color: var(--line);
  color: var(--line-2);
  cursor: not-allowed;
}

.stepper output {
  min-width: 20px;
  text-align: center;
  font-weight: 800;
  font-size: 20px;
}

.lines {
  margin: 18px 0;
  padding: 14px;
  background: var(--soft);
  border-radius: var(--radius-s);
  display: grid;
  gap: 10px;
  font-size: 13.5px;
  color: var(--ink-2);
}

.lines > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.lines .total {
  padding-top: 10px;
  border-top: 1px solid var(--line-2);
  font-weight: 800;
  font-size: 16px;
  color: var(--ink);
}

.hint {
  margin-top: 10px;
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.5;
}

.notice {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 14px;
  border-radius: var(--radius-s);
  background: var(--warn-50);
  font-size: 14.5px;
}

.notice.ok {
  background: var(--ok-50);
}

.notice .ic {
  margin-top: 2px;
}

.notice.ok .ic {
  color: var(--ok);
}

.contact {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px;
  border: 1.5px solid var(--brand);
  background: var(--brand-50);
  border-radius: var(--radius-s);
  text-decoration: none;
  color: var(--ink);
}

.contact > span {
  display: flex;
  flex-direction: column;
}

.contact strong {
  font-size: 18px;
  font-family: var(--font-mono);
}

.contact .ic {
  color: var(--brand);
}

.error {
  color: var(--red);
  background: var(--red-50);
  padding: 10px 14px;
  border-radius: var(--radius-xs);
  font-weight: 600;
  font-size: 14.5px;
  margin: 10px 0;
}

.error[hidden] {
  display: none;
}

.requests-box {
  margin-top: 12px;
  padding: 14px;
  background: var(--warn-50);
  border-radius: var(--radius-s);
}

.passenger {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
}

.passenger:last-child {
  border-bottom: 0;
}

.star-pick {
  display: flex;
  gap: 4px;
  margin: 8px 0;
}

.star-pick button {
  background: none;
  border: 0;
  font-size: 30px;
  color: var(--line-2);
  cursor: pointer;
  padding: 0 2px;
  line-height: 1;
}

.star-pick button.on {
  color: var(--sun-600);
}

.bookbar {
  display: none;
}

/* ---------- forms ---------- */
.form {
  display: grid;
  gap: 18px;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.label {
  font-weight: 700;
  font-size: 14.5px;
  color: var(--ink);
}

.field input,
.field select,
.field textarea,
.field .pi {
  width: 100%;
  border: 1.5px solid var(--line-2);
  border-radius: var(--radius-s);
  padding: 12px 14px;
  background: var(--surface);
  font-size: 15.5px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.field .pi {
  padding: 10px 14px;
}

.field .pi .pi-list {
  left: -1px;
  top: calc(100% + 6px);
}

.field textarea {
  min-height: 110px;
  resize: vertical;
}

.field input:focus,
.field select:focus,
.field textarea:focus,
.field .pi:focus-within {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3.5px var(--brand-50);
}

.page-head {
  padding-top: 44px;
  padding-bottom: 24px;
}

.page-head p {
  margin-top: 10px;
}

/* ---------- offer wizard ---------- */

.wiz-progress {
  height: 4px;
  background: var(--soft);
}

.wiz-progress span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--brand) 0%, #2563eb 100%);
  transition: width 0.3s var(--ease);
}

.wiz {
  max-width: 640px;
  padding-top: 28px;
  padding-bottom: 64px;
}

.wiz-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 44px;
  gap: 12px;
}

.wiz-context-pill {
  font-size: 12.5px;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--brand-50);
  color: var(--brand);
}

.back-btn {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--brand);
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
}

.back-btn:hover {
  background: var(--brand-50);
}

.wiz-title {
  margin-top: 24px;
  font-size: clamp(28px, 4.2vw, 38px);
  text-align: center;
}

.wiz-sub {
  text-align: center;
  margin-top: 10px;
}

.wiz-form {
  margin-top: 32px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 28px;
  box-shadow: var(--shadow);
}

.wiz-actions {
  margin-top: 28px;
  display: flex;
  justify-content: center;
}

.big-input {
  width: 100%;
  border: 0;
  border-bottom: 2px solid var(--line-2);
  font-size: 22px;
  font-weight: 700;
  padding: 14px 0;
  background: transparent;
  color: var(--ink);
}

.big-input:focus {
  outline: none;
  border-color: var(--brand);
}

.big-input::placeholder {
  color: var(--muted);
  font-weight: 500;
}

.stack {
  display: grid;
  gap: 16px;
}

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

.chip-btn {
  border: 1.5px solid var(--line-2);
  background: var(--surface);
  border-radius: 999px;
  padding: 8px 16px;
  font-weight: 700;
  font-size: 14.5px;
  cursor: pointer;
  color: var(--ink-2);
  transition: all 0.15s ease;
}

.chip-btn:hover {
  border-color: var(--brand);
  color: var(--brand);
}

.chip-btn.on {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}

.big-stepper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 32px;
  padding-block: 12px;
}

.round-btn {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 2px solid var(--brand);
  background: var(--surface);
  color: var(--brand);
  font-size: 28px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: all 0.15s ease;
}

.round-btn:hover:not(:disabled) {
  background: var(--brand);
  color: #fff;
}

.round-btn:disabled {
  border-color: var(--line);
  color: var(--line-2);
  cursor: not-allowed;
}

.big-num {
  font-size: 60px;
  font-weight: 800;
  min-width: 2ch;
  text-align: center;
  letter-spacing: -0.03em;
  color: var(--brand);
}

.meter {
  margin-top: 24px;
}

.meter-track {
  height: 10px;
  border-radius: 999px;
  background: var(--soft);
  overflow: hidden;
}

.meter-fill {
  height: 100%;
  background: var(--ok);
  border-radius: 999px;
  transition: width 0.2s ease;
}

.meter-fill.over {
  background: var(--red);
}

.meter-labels {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--muted);
}

.opt-list {
  display: grid;
  gap: 12px;
}

.opt-card {
  display: flex;
  align-items: center;
  gap: 16px;
  text-align: left;
  padding: 18px 20px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  cursor: pointer;
  transition: all 0.15s ease;
}

.opt-card > span:nth-child(2) {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}

.opt-card strong {
  font-size: 16.5px;
}

.opt-card:hover {
  border-color: var(--line-2);
  background: var(--soft);
}

.opt-card.on {
  border-color: var(--brand);
  background: var(--brand-50);
  box-shadow: 0 0 0 3px rgba(0, 56, 168, 0.1);
}

.toggle {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
}

.toggle .grow {
  display: flex;
  flex-direction: column;
}

.toggle.disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.toggle input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.switch {
  width: 48px;
  height: 28px;
  border-radius: 999px;
  background: var(--line-2);
  position: relative;
  flex: none;
  transition: background 0.15s;
}

.switch::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  transition: transform 0.15s;
}

.toggle input:checked + .switch {
  background: var(--brand);
}

.toggle input:checked + .switch::after {
  transform: translateX(20px);
}

.toggle input:focus-visible + .switch {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

.summary {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

.sum-row {
  display: grid;
  grid-template-columns: 90px 1fr auto;
  gap: 12px;
  align-items: center;
  width: 100%;
  text-align: left;
  padding: 14px 16px;
  background: var(--surface);
  border: 0;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
}

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

.sum-row:hover {
  background: var(--soft);
}

.sum-row .link {
  color: var(--brand);
  font-weight: 700;
}

/* ---------- trips, account, profile ---------- */
.tabs {
  display: flex;
  gap: 6px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 24px;
  overflow-x: auto;
}

.tabs a {
  padding: 12px 18px;
  text-decoration: none;
  color: var(--muted);
  font-weight: 700;
  border-bottom: 3px solid transparent;
  margin-bottom: -1px;
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.tabs a[aria-selected="true"] {
  color: var(--brand);
  border-color: var(--brand);
}

.tab-n {
  background: var(--brand-50);
  color: var(--brand);
  border-radius: 999px;
  padding: 1px 8px;
  font-size: 12.5px;
  font-family: var(--font-mono);
}

.auth {
  max-width: 460px;
  padding-top: 52px;
  padding-bottom: 52px;
}

.auth h1 {
  text-align: center;
}

.auth > .muted {
  text-align: center;
  margin: 10px 0 28px;
}

.auth-card {
  padding: 28px;
}

.auth-switch {
  text-align: center;
  margin-top: 24px;
}

.auth-switch a {
  font-weight: 700;
}

.profile-head {
  display: flex;
  align-items: center;
  gap: 20px;
  padding-top: 40px;
}

.profile-head > div {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.stat-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 28px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

.stat-row > div {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 18px 8px;
}

.stat-row > div + div {
  border-left: 1px solid var(--line);
}

.stat-row strong {
  font-size: 24px;
  color: var(--brand);
}

.menu-list {
  margin-top: 24px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.menu-list a {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  text-decoration: none;
  color: var(--ink);
  font-weight: 700;
  border-bottom: 1px solid var(--line);
}

.menu-list a:last-child {
  border-bottom: 0;
}

.menu-list a > .ic:first-child {
  color: var(--brand);
}

.menu-list a:hover {
  background: var(--soft);
}

.h3 + .form {
  margin-top: 16px;
}

.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  padding-bottom: 24px;
}

.step {
  padding: 24px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

.step-n {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 800;
  margin-bottom: 14px;
}

.step p {
  margin-top: 6px;
}

.prose {
  padding-bottom: 32px;
}

.prose h2 {
  margin: 32px 0 10px;
}

.prose p,
.prose li {
  color: var(--ink-2);
  margin-bottom: 10px;
  line-height: 1.65;
}

.prose ul {
  padding-left: 20px;
}

/* ---------- misc ---------- */
.empty {
  padding: 44px 24px;
  text-align: center;
  background: var(--surface);
  border: 1.5px dashed var(--line-2);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.empty strong {
  font-size: 18px;
}

.empty .row-btns {
  justify-content: center;
  margin-top: 8px;
}

.loading {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-block: 40px;
  color: var(--muted);
}

.spinner {
  width: 22px;
  height: 22px;
  border: 3px solid var(--line);
  border-top-color: var(--brand);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

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

.toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  background: var(--ink);
  color: #fff;
  padding: 14px 22px;
  border-radius: 999px;
  font-weight: 600;
  box-shadow: var(--shadow-lg);
  z-index: 90;
  max-width: calc(100vw - 32px);
}

.toast.bad {
  background: var(--red);
}

/* ---------- footer ---------- */
.footer {
  margin-top: 88px;
  background: var(--surface);
  border-top: 1px solid var(--line);
  color: var(--ink);
}

.footer-skyline {
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding: 22px var(--gutter) 0;
  pointer-events: none;
  user-select: none;
}

.footer-inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 32px var(--gutter) 36px;
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 0.9fr;
  gap: 32px;
}

.footer-brand-link {
  margin-bottom: 10px;
}

.footer-brand p {
  margin-top: 10px;
  color: var(--muted);
  font-size: 14px;
  max-width: 38ch;
  line-height: 1.6;
}

.footer-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 14px;
}

.footer-pill {
  font-size: 11.5px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--soft);
  color: var(--ink-2);
}

.footer-col {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer-col h2 {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink);
  margin-bottom: 4px;
}

.footer-col a {
  color: var(--muted);
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
}

.footer-col a:hover {
  color: var(--brand);
}

.footer-bottom {
  border-top: 1px solid var(--line);
  background: var(--soft);
}

.footer-bottom-inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 18px var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.footer-legal,
.footer-legal-sub {
  color: var(--muted);
  font-size: 13px;
}

.footer-legal-sub {
  font-family: var(--font-mono);
  font-size: 12px;
}

.footer-bottom-right {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.footer-dot {
  color: var(--subtle);
  font-size: 12px;
  user-select: none;
}

.wd-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.wd-trigger {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  font-family: var(--font-sans);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  line-height: inherit;
  transition: color 0.15s ease;
}

.wd-trigger:hover,
.wd-trigger[aria-expanded="true"] {
  color: var(--brand);
}

.wd-trigger:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
  border-radius: 4px;
}

.wd-popover {
  position: absolute;
  bottom: calc(100% + 10px);
  right: 0;
  z-index: 60;
  min-width: 236px;
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  white-space: nowrap;
  animation: wdPopIn 0.16s cubic-bezier(0.16, 1, 0.3, 1);
}

.wd-popover[hidden] {
  display: none !important;
}

@keyframes wdPopIn {
  from {
    opacity: 0;
    transform: translateY(6px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.wd-name {
  font-family: var(--font-sans);
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.01em;
  line-height: 1.3;
}

.wd-email {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px 4px 8px;
  border-radius: 8px;
  background: var(--brand-50);
  border: 1px solid rgba(0, 56, 168, 0.14);
  color: var(--brand);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.wd-email .ic {
  width: 13.5px;
  height: 13.5px;
  color: var(--brand);
  flex-shrink: 0;
}

.wd-email:hover {
  background: #dce8ff;
  border-color: rgba(0, 56, 168, 0.28);
  color: var(--brand-ink);
}

.wd-email:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

/* ---------- tablet ---------- */
@media (max-width: 960px) {
  .results {
    grid-template-columns: 1fr;
  }
  .res-side {
    display: none;
  }
  .filter-sheet {
    display: block;
    position: relative;
  }
  .filter-sheet summary {
    list-style: none;
  }
  .filter-sheet summary::-webkit-details-marker {
    display: none;
  }
  .filter-sheet[open] .filters {
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    width: min(320px, calc(100vw - 32px));
    background: var(--surface);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--line);
    padding: 20px;
    z-index: 30;
  }
  .ride {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .ride-side .sticky {
    position: static;
  }
  .sb {
    flex-wrap: wrap;
  }
  .sb-from,
  .sb-to {
    flex: 1 1 42%;
  }
  .sb-date,
  .sb-pax {
    flex: 1 1 30%;
    border-top: 1px solid var(--line);
  }
  .sb-date::before {
    display: none;
  }
  .sb-go {
    flex: 1 1 100%;
    justify-content: center;
    padding: 14px;
    margin: 6px;
  }
  .trust,
  .band-inner,
  .empty-showcase {
    grid-template-columns: 1fr;
  }
  .hero-inner {
    grid-template-columns: 1fr;
    padding-bottom: 92px;
    gap: 32px;
  }
  .hv {
    justify-self: stretch;
    max-width: 100%;
  }
  .values {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .footer-inner {
    grid-template-columns: 1fr 1fr;
  }
}

/* ---------- phone ---------- */
@media (max-width: 680px) {
  :root {
    --gutter: 16px;
  }
  body {
    padding-bottom: calc(68px + env(safe-area-inset-bottom));
  }
  .topbar-inner {
    height: 60px;
  }
  .nav-link,
  .nav-account-label {
    display: none;
  }
  .nav-account {
    padding: 3px;
    border: 0;
    background: transparent;
    box-shadow: none;
  }
  .tabbar {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 45;
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-top: 1px solid var(--line);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .tabbar a {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 9px 0 8px;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--muted);
    text-decoration: none;
  }
  .tabbar a.active {
    color: var(--brand);
  }
  .tabbar svg {
    width: 21px;
    height: 21px;
  }
  .toast {
    bottom: calc(82px + env(safe-area-inset-bottom));
  }

  .hero-inner {
    grid-template-columns: 1fr;
    padding-top: 32px;
    padding-bottom: 84px;
    gap: 28px;
  }
  .hero h1 {
    font-size: 36px;
  }
  .hero h1 .hero-serif {
    font-size: 40px;
  }
  .hero-sub {
    font-size: 15.5px;
    margin-top: 14px;
  }
  .hero-metrics {
    gap: 12px;
    padding: 10px 14px;
  }
  .hero-metric-sep {
    display: none;
  }
  .hero-search {
    margin-top: -52px;
  }
  .sb {
    flex-direction: column;
    border-radius: 20px;
  }
  .sb-cell {
    min-height: 60px;
    flex: none !important;
  }
  .sb-cell + .sb-cell::before,
  .sb-swap + .sb-cell::before {
    left: 16px;
    right: 16px;
    top: 0;
    bottom: auto;
    width: auto;
    height: 1px;
  }
  .sb-date,
  .sb-pax {
    border-top: 0;
  }
  .sb-swap {
    position: absolute;
    right: 14px;
    top: 42px;
    margin: 0;
  }
  .sb-swap .ic {
    transform: none;
  }
  .sb-from,
  .sb-to {
    padding-right: 58px;
  }
  .sb-from:focus-within {
    border-radius: 20px 20px 0 0;
  }
  .sb-go,
  .sb-compact .sb-go {
    border-radius: 14px;
    justify-content: center;
    padding: 15px;
    margin: 8px;
  }
  .pi-list,
  .pi-popover-date,
  .pi-popover-pax {
    left: -32px;
    right: auto;
    width: calc(100vw - 32px);
  }
  .field .pi .pi-list {
    width: calc(100% + 2px);
  }

  .section {
    padding-top: 48px;
  }
  .route-list,
  .trust-list,
  .faq {
    grid-template-columns: 1fr;
  }
  .band {
    margin-top: 56px;
  }
  .band-inner {
    padding-block: 44px;
    gap: 28px;
  }
  .rc-grid {
    grid-template-columns: 1fr;
  }
  .rc-top {
    padding: 16px 16px 14px;
  }
  .rc-foot {
    padding: 10px 16px;
  }

  .search-top {
    padding: 12px 0;
  }
  .results {
    padding-top: 20px;
  }
  .res-head {
    align-items: flex-start;
    flex-direction: column;
    gap: 12px;
  }
  .filter-sheet[open] .filters {
    left: 0;
    right: auto;
  }

  .ride {
    padding-top: 20px;
  }
  .map {
    height: 210px;
  }
  .card,
  .wiz-form {
    padding: 20px;
  }
  .bookbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    position: fixed;
    left: 0;
    right: 0;
    bottom: calc(58px + env(safe-area-inset-bottom));
    z-index: 44;
    padding: 10px 16px;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(12px);
    border-top: 1px solid var(--line);
    box-shadow: 0 -4px 16px rgba(13, 34, 64, 0.06);
  }
  .bookbar strong {
    font-size: 20px;
    color: var(--brand);
  }
  body:has(.bookbar) .ride {
    padding-bottom: 64px;
  }

  .form-row {
    grid-template-columns: 1fr;
  }
  .wiz-title {
    margin-top: 14px;
  }
  .big-num {
    font-size: 50px;
  }
  .big-stepper {
    gap: 20px;
  }
  .wiz-actions .btn {
    width: 100%;
  }
  .steps {
    grid-template-columns: 1fr;
  }
  .footer {
    margin-top: 56px;
  }
  .footer-inner {
    grid-template-columns: 1fr 1fr;
    gap: 24px;
  }
  .footer-brand {
    grid-column: 1 / -1;
  }
  .wd-popover {
    right: 0;
    left: auto;
  }
  .profile-head {
    padding-top: 28px;
  }
  .avatar.xl {
    width: 72px;
    height: 72px;
    font-size: 24px;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    animation-duration: 0.01ms !important;
  }
}


/* email confirmation bar, alerts, verified chip */
.verify-bar {
  display: none !important;
  background: var(--warn-50);
  border-bottom: 1px solid var(--line);
  font-size: 14px;
}
.verify-bar .wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-block: 9px;
}
.verify-bar .ic {
  flex: none;
}
.verify-bar span {
  min-width: 0;
  overflow-wrap: anywhere;
}
.verify-bar .linkish {
  margin-left: auto;
  flex: none;
  font-weight: 700;
}
.alert-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
}
.alert-row .grow {
  min-width: 0;
  overflow-wrap: anywhere;
}
.chip-verified {
  color: var(--ok);
  margin-top: 4px;
}

.avatar.has-photo {
  overflow: hidden;
  background: var(--surface);
}
.avatar img,
#nav-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}
.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}
.chip-row .chip-verified {
  margin-top: 0;
}
.chip-super {
  color: var(--brand-600);
  background: #eef4ff;
  border-color: rgba(0, 56, 168, 0.25);
}
.car-photo {
  display: block;
  width: 100%;
  max-height: 260px;
  object-fit: cover;
  border-radius: var(--radius-s);
  margin-top: 14px;
}
.photo-card {
  display: grid;
  gap: 18px;
  padding: 18px;
}
.photo-tile {
  display: flex;
  gap: 16px;
  align-items: center;
}
.photo-prev {
  width: 96px;
  height: 72px;
  flex: none;
  object-fit: cover;
  border-radius: var(--radius-s);
}
.photo-prev.round {
  width: 84px;
  height: 84px;
  border-radius: 50%;
}
.photo-prev.empty {
  display: grid;
  place-items: center;
  background: var(--surface);
  border: 1px dashed var(--line);
  color: var(--ink-2);
}
.photo-meta {
  min-width: 0;
}
.photo-meta .hint {
  margin: 2px 0 8px;
}
.big-peso {
  font-size: 60px;
  margin-right: -14px;
  font-weight: 800;
  color: var(--brand-600);
  line-height: 1;
}
.big-num-input {
  width: 4.4ch;
  min-width: 0;
  border: 0;
  background: transparent;
  text-align: left;
  font-family: inherit;
  font-size: 60px;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--brand);
  padding: 0;
  -moz-appearance: textfield;
  appearance: textfield;
}
.big-num-input::-webkit-outer-spin-button,
.big-num-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.big-num-input:focus {
  outline: none;
  border-bottom: 2px solid var(--brand-600);
}
@media (max-width: 560px) {
  .photo-tile {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 560px) {
  .big-stepper:has(.big-num-input) {
    gap: 8px;
  }
  .big-num-input,
  .big-peso {
    font-size: 46px;
  }
  .big-num-input {
    width: 4.2ch;
  }
}

/* messages */
#nav-avatar {
  position: relative;
}
#nav-avatar.has-unread::after {
  content: "";
  position: absolute;
  top: -1px;
  right: -1px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #d92d3f;
  border: 2px solid #fff;
}
.count-badge {
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  border-radius: 999px;
  background: #d92d3f;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  display: inline-grid;
  place-items: center;
}
.count-badge[hidden] {
  display: none;
}
.inbox a.unread strong {
  color: var(--brand-600);
}
.inbox-text {
  min-width: 0;
}
.inbox-last {
  font-size: 14px;
  color: var(--ink-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ask-card {
  padding: 16px;
  display: grid;
  gap: 6px;
}
.ask-card p {
  margin: 0 0 6px;
}
.pass-actions {
  display: grid;
  gap: 2px;
  justify-items: end;
}
.chat {
  display: grid;
  gap: 12px;
  padding-block: 16px 28px;
}
.chat-head {
  display: flex;
  align-items: center;
  gap: 12px;
}
.chat-head .grow {
  min-width: 0;
}
.chat-ride {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.round-back {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  flex: none;
}
.chat-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px;
  min-height: 280px;
  max-height: min(56vh, 520px);
  overflow-y: auto;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.chat-empty {
  margin: auto;
  max-width: 28ch;
}
.bubble {
  max-width: 82%;
  padding: 9px 13px 6px;
  border-radius: 16px;
  background: var(--surface);
  overflow-wrap: anywhere;
}
.bubble p {
  margin: 0;
  white-space: pre-wrap;
}
.bubble.mine {
  align-self: flex-end;
  background: var(--brand-600);
  color: #fff;
  border-bottom-right-radius: 5px;
}
.bubble.theirs {
  align-self: flex-start;
  border-bottom-left-radius: 5px;
}
.bubble-time {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  opacity: 0.7;
  text-align: right;
}
.chat-form {
  display: flex;
  gap: 10px;
  align-items: flex-end;
}
.chat-input {
  flex: 1;
  min-width: 0;
  resize: none;
}
.chat-note {
  margin: 0;
}
.chat-tools {
  display: flex;
  gap: 18px;
  font-size: 13.5px;
}
@media (max-width: 560px) {
  .chat-list {
    max-height: 50vh;
  }
}
.bubble.theirs {
  background: #eaeef5;
}
.chat-input {
  border: 1.5px solid var(--line);
  border-radius: 16px;
  padding: 11px 14px;
  font: inherit;
  background: #fff;
  color: var(--ink);
}
.chat-input:focus {
  outline: none;
  border-color: var(--brand-600);
}

/* ---------- scrollbar: Philippine flag palette (blue thumb, red on drag) ---------- */
:root {
  --sb-track: #eef1f7;
  --sb-thumb: #0038a8;
  --sb-thumb-hover: #0a47c8;
  --sb-thumb-active: #ce1126;
}

@supports selector(::-webkit-scrollbar) {
  *::-webkit-scrollbar {
    width: 12px;
    height: 12px;
  }
  *::-webkit-scrollbar-track {
    background: var(--sb-track);
  }
  *::-webkit-scrollbar-thumb {
    background: var(--sb-thumb);
    border: 3px solid var(--sb-track);
    border-radius: 999px;
    min-height: 44px;
    transition: background-color 0.15s ease;
  }
  *::-webkit-scrollbar-thumb:hover {
    background: var(--sb-thumb-hover);
  }
  *::-webkit-scrollbar-thumb:active {
    background: var(--sb-thumb-active);
  }
  *::-webkit-scrollbar-corner {
    background: var(--sb-track);
  }
  .chat-list::-webkit-scrollbar,
  .sb-list::-webkit-scrollbar {
    width: 10px;
  }
}

/* Firefox (and any browser without ::-webkit-scrollbar) */
@supports not selector(::-webkit-scrollbar) {
  * {
    scrollbar-color: var(--sb-thumb) var(--sb-track);
    scrollbar-width: auto;
  }
  .chat-list {
    scrollbar-width: thin;
  }
}

/* admin panel */
.admin-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
}
.admin-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 14px;
}
.stat-card {
  display: grid;
  gap: 2px;
  padding: 18px;
  text-decoration: none;
  color: inherit;
}
.stat-card strong {
  font-size: 34px;
  line-height: 1.1;
  color: var(--brand);
}
a.stat-card:hover {
  border-color: var(--brand);
}
.admin-user,
.admin-report {
  padding: 16px;
  display: grid;
  gap: 12px;
}
.admin-user.is-banned {
  background: #fff6f6;
}
.au-main {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.au-main .grow {
  min-width: 0;
  overflow-wrap: anywhere;
}
.au-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.chip-bad {
  color: #b0121f;
  background: #fff0f1;
  border-color: rgba(206, 17, 38, 0.3);
}
.log-row {
  display: grid;
  grid-template-columns: 120px 150px 1fr;
  gap: 10px;
  padding: 10px 4px;
  border-bottom: 1px solid var(--line);
  align-items: baseline;
}
.log-row:last-child {
  border-bottom: 0;
}
@media (max-width: 640px) {
  .log-row {
    grid-template-columns: 1fr;
    gap: 2px;
  }
  .admin-head {
    flex-direction: column;
    align-items: flex-start;
  }
}

.tabs {
  overflow-y: hidden;
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar {
  display: none;
}
.admin-search {
  width: 100%;
  max-width: 460px;
  border: 1.5px solid var(--line-2);
  border-radius: 14px;
  padding: 11px 14px;
  font: inherit;
  background: #fff;
  color: var(--ink);
  margin-bottom: 12px;
}
.admin-search:focus {
  outline: none;
  border-color: var(--brand-600);
}

.share-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.share-card .share-row .btn{flex:0 0 auto}
.stops-line{padding:14px 18px 16px;border-top:1px solid var(--line,#e3e8f2)}
.stops-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.stops-chips .chip{background:#eef1f7;color:#0b1b3f;padding:4px 10px;border-radius:999px;font-size:13px}
.stops-chips .chip-end{background:#0038a8;color:#fff}
.stops-edit{display:grid;gap:10px;margin-bottom:10px}
.stop-row{display:flex;align-items:flex-start;gap:10px}
.stop-row .big-input{flex:1;min-width:0}
.stop-row .pi{flex:1;min-width:0}
.stop-row .stop-n{margin-top:18px}
.stop-row > .btn{margin-top:12px;flex:none}
.stop-n{flex:0 0 26px;height:26px;border-radius:50%;background:#0038a8;color:#fff;font-size:13px;font-weight:700;display:grid;place-items:center}
.rc-stops{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:0 18px 12px}
.rc-stops-label{font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#55607a;margin-right:2px}
.rc-stop-chip{background:#eef1f7;color:#0b1b3f;padding:3px 10px;border-radius:999px;font-size:13px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rc-stop-chip.hit{background:#0038a8;color:#fff;font-weight:600}
.rc-stop-chip.more{background:transparent;color:#55607a}

/* ---------- search results: day strip, quick filters, tags ---------- */
.date-strip{position:relative;display:flex;gap:8px;overflow-x:auto;padding:2px 2px 10px;margin:0 0 6px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.date-strip::-webkit-scrollbar{display:none}
.ds-chip{flex:0 0 auto;min-width:58px;display:grid;justify-items:center;gap:1px;padding:8px 10px;border:1px solid var(--line);border-radius:14px;background:var(--surface);color:var(--ink,#0b1b3f);text-decoration:none;line-height:1.15;transition:border-color .15s,background .15s}
.ds-chip:hover{border-color:var(--brand)}
.ds-wd{font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.ds-d{font-size:18px}
.ds-n{font-size:12px;font-weight:700;color:var(--brand)}
.ds-chip.zero .ds-n,.ds-chip.zero .ds-d{color:var(--muted);font-weight:500}
.ds-chip.zero{background:transparent}
.ds-chip.on{background:var(--brand);border-color:var(--brand);color:#fff}
.ds-chip.on .ds-wd,.ds-chip.on .ds-n,.ds-chip.on .ds-d{color:#fff}
.ds-any .ds-d{font-size:15px}
.quick-chips,.recent-row{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 12px;scrollbar-width:none;align-items:center}
.quick-chips::-webkit-scrollbar,.recent-row::-webkit-scrollbar{display:none}
.q-chip{flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;padding:7px 13px;border-radius:999px;border:1px solid var(--line);background:var(--surface);font-size:13.5px;font-weight:600;color:var(--ink,#0b1b3f);text-decoration:none;white-space:nowrap}
.q-chip .ic{width:15px;height:15px;color:var(--brand)}
.q-chip:hover{border-color:var(--brand)}
.q-chip.on{background:var(--soft);border-color:var(--brand);color:var(--brand)}
.res-day-n{margin-left:8px;font-weight:600;letter-spacing:0;text-transform:none;font-size:12.5px;color:var(--muted)}
.rc-tag{align-self:flex-end;background:#fcd116;color:#0b1b3f;font-size:11.5px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;padding:3px 9px;border-radius:999px;margin-bottom:6px;display:inline-block}
.nearby-wrap{margin-top:22px;display:grid;gap:14px}
.nearby .res-day{margin-bottom:10px}
.res-main{min-width:0}
.date-strip,.quick-chips,.recent-row{max-width:100%}

/* ---------- use my location ---------- */
.pi-locate{display:flex;align-items:center;gap:10px;width:100%;padding:12px 14px;border:0;border-bottom:1px solid var(--line);background:var(--soft);color:var(--brand);font:inherit;font-weight:700;text-align:left;cursor:pointer}
.pi-locate .ic{width:18px;height:18px}
.pi-locate:hover{background:#e3eafb}
.pi-locate:disabled{opacity:.7;cursor:progress}

/* ---------- passenger requests & driver offers ---------- */
.req-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.req-pill { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; background: var(--soft); border: 1px solid var(--line); color: var(--ink-2); font-size: 12.5px; font-weight: 600; }
.req-pill .ic { width: 13px; height: 13px; }
.req-pill.ok { background: var(--ok-50); color: var(--ok); border-color: rgba(10, 123, 78, 0.2); }
.req-offer-link.cta { padding: 7px 14px; border-radius: 999px; background: var(--brand); color: #fff; }
.req-offer-link.cta:hover { background: var(--brand-600); color: #fff; }
.req-filter { margin-top: 0; }
.req-who { display: grid; gap: 12px; }
.req-who .req-user { gap: 14px; }
.req-budget { display: flex; align-items: center; gap: 8px; margin: 0; font-weight: 700; color: var(--ink); }
.req-budget .ic { width: 18px; height: 18px; color: var(--brand); }
.req-state { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 13px; font-weight: 700; color: var(--muted); }
.req-state.hot { color: var(--brand); }
.req-state.ok { color: var(--ok); }
.req-state .ic { width: 14px; height: 14px; }
.back { margin-bottom: 8px; display: inline-flex; }

.offer-list { display: grid; gap: 16px; }
.offer-card { display: grid; gap: 12px; padding: 18px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); min-width: 0; }
.offer-card.won { border-color: var(--ok); box-shadow: 0 0 0 3px var(--ok-50); }
.offer-card.dim { opacity: 0.6; }
.offer-top { display: flex; justify-content: space-between; gap: 14px; align-items: flex-start; flex-wrap: wrap; }
.offer-who { display: flex; gap: 12px; align-items: center; text-decoration: none; color: inherit; min-width: 0; }
.offer-who > div { display: grid; gap: 2px; min-width: 0; }
.offer-sub { display: block; }
.offer-price { display: grid; text-align: right; gap: 1px; }
.offer-price strong { font-size: 26px; line-height: 1.1; color: var(--ink); }
.offer-vs { font-size: 12.5px; font-weight: 700; }
.offer-vs.ok { color: var(--ok); }
.offer-vs.over { color: var(--red); }
.offer-car { margin-top: 0; max-height: 220px; }
.offer-carline { display: flex; align-items: center; gap: 8px; margin: 0; font-weight: 700; color: var(--ink-2); }
.offer-carline .ic { width: 18px; height: 18px; color: var(--brand); flex: none; }
.offer-ride { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: var(--radius-s); background: var(--soft); text-decoration: none; color: var(--ink-2); font-size: 14px; font-weight: 600; }
.offer-ride .ic { width: 16px; height: 16px; flex: none; }
.offer-ride .ic:last-child { margin-left: auto; }
.offer-last { display: flex; gap: 8px; align-items: flex-start; margin: 0; padding: 10px 12px; border-left: 3px solid rgba(0, 56, 168, 0.35); background: var(--soft); border-radius: 10px; font-size: 13.5px; color: var(--ink-2); }
.offer-last .ic { width: 15px; height: 15px; flex: none; margin-top: 2px; }
.offer-contact { display: grid; gap: 8px; padding: 12px; border-radius: var(--radius-s); background: var(--ok-50); border: 1px solid rgba(10, 123, 78, 0.25); }
.offer-contact > strong { display: flex; align-items: center; gap: 6px; color: var(--ok); }
.offer-contact .contact { padding: 10px 12px; font-size: 15px; font-weight: 700; }
.offer-actions { align-items: center; }
.offer-actions .count-badge { margin-left: 6px; }

.offer-bar { display: grid; gap: 10px; padding: 12px 14px; margin: 12px 0 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-s); }
.offer-bar[hidden] { display: none; }
.offer-bar-main { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.offer-bar-main strong { font-size: 18px; }
.offer-bar-car { display: flex; align-items: center; gap: 6px; margin: 0; }
.offer-bar-car .ic { width: 15px; height: 15px; }
.offer-status { margin-left: auto; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; padding: 3px 9px; border-radius: 999px; background: var(--soft); color: var(--muted); }
.offer-status.open { background: var(--brand-50); color: var(--brand); }
.offer-status.accepted { background: var(--ok-50); color: var(--ok); }
.offer-status.declined, .offer-status.withdrawn { background: var(--red-50); color: var(--red); }
.offer-reprice { align-items: center; }
.offer-price-in { width: 110px; padding: 8px 10px; border: 1.5px solid var(--line-2); border-radius: var(--radius-xs); font: inherit; }
.profile-car { padding: 14px; margin-top: 14px; display: grid; gap: 10px; }
.profile-car .car-photo { margin-top: 0; }
@media (max-width: 680px) {
  .offer-price { text-align: left; }
  .offer-top { flex-direction: column; }
}
.page-head .back { display: flex; width: max-content; }
@media (max-width: 480px) {
  .tabs { gap: 0; }
  .tabs a { padding: 12px 11px; gap: 5px; font-size: 14.5px; }
}

.pi-chev { flex: none; display: grid; place-items: center; color: var(--muted); }
.pi-chev .ic { width: 16px; height: 16px; }
.pi-pick .pi-input[readonly] { cursor: pointer; }
.field .pi .pi-list.pi-narrow { left: -1px; width: calc(100% + 2px); min-width: 250px; }
.pi-opt.sel .pi-pin { background: var(--brand); color: #fff; }
.pi-opt.sel strong { color: var(--brand); }
@media (max-width: 680px) { .field .pi .pi-list.pi-narrow { width: calc(100% + 2px); } }
.nav-link span { white-space: nowrap; }
@media (max-width: 1120px) and (min-width: 681px) {
  .nav-link { padding: 0 10px; gap: 6px; }
  .nav-sep { display: none; }
}
@media (max-width: 920px) and (min-width: 681px) {
  .nav { gap: 4px; }
  .nav-link { padding: 0 8px; font-size: 13.5px; gap: 5px; }
  .brand-badge { display: none; }
}
@media (max-width: 780px) and (min-width: 681px) {
  .nav-account-label { display: none; }
  .nav-link { padding: 0 7px; font-size: 13px; }
  .brand-word { font-size: 19px; }
}

.report-chat{margin:.6rem 0;border:1px solid var(--line,#e5e7eb);border-radius:12px;padding:.5rem .8rem}
.report-chat summary{cursor:pointer;font-weight:600}
.rc-msg{margin-top:.6rem}
.rc-msg p{margin:.1rem 0 0;white-space:pre-wrap}
.rc-msg.reported p{font-weight:600}

.gcash-qr{display:flex;justify-content:center;margin-top:.8rem}
.gcash-qr img{width:min(280px,100%);height:auto;border-radius:16px;border:1px solid var(--line,#e5e7eb)}
.support-note{margin-top:1rem;text-align:center}

/* ========================================================
   KaSabay Flagship Growth & Trust Design System
   ======================================================== */

/* ---------- Hero Pilot Trust Pill & Metrics ---------- */
.hero-pilot-banner {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(8, 25, 64, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.22);
  padding: 6px 16px;
  border-radius: 999px;
  margin-bottom: 14px;
  font-size: 13px;
  font-weight: 600;
  color: #ffffff;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.pilot-tag {
  background: linear-gradient(135deg, #fcd116 0%, #f59e0b 100%);
  color: #041029;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.05em;
  padding: 3px 9px;
  border-radius: 999px;
  text-transform: uppercase;
  box-shadow: 0 2px 8px rgba(252, 209, 22, 0.35);
}
.pilot-text {
  letter-spacing: -0.01em;
  color: #f1f5f9;
  font-weight: 500;
  text-shadow: 0 1px 4px rgba(2, 8, 24, 0.5);
}
.pilot-free-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #f0fdf4;
  color: #15803d;
  border: 1px solid rgba(22, 163, 74, 0.25);
  font-size: 12px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  margin-top: 6px;
}
.pilot-free-pill .ic {
  width: 13px;
  height: 13px;
}

/* ---------- Driver Trust Badges in Cards ---------- */
.rc-badge-verified {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: rgba(16, 185, 129, 0.1);
  color: #059669;
  font-size: 11px;
  font-weight: 700;
  padding: 1.5px 7px;
  border-radius: 999px;
  border: 1px solid rgba(16, 185, 129, 0.28);
  letter-spacing: 0.02em;
}
.rc-badge-verified .ic {
  width: 11px;
  height: 11px;
}
.rc-badge-super {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: rgba(0, 56, 168, 0.08);
  color: #0038a8;
  font-size: 11px;
  font-weight: 700;
  padding: 1.5px 7px;
  border-radius: 999px;
  border: 1px solid rgba(0, 56, 168, 0.22);
  letter-spacing: 0.02em;
}
.rc-badge-super .ic {
  width: 11px;
  height: 11px;
}
.rc-badge-reliable {
  display: inline-flex;
  align-items: center;
  background: #f1f5f9;
  color: #475569;
  font-size: 11px;
  font-weight: 600;
  padding: 1.5px 6px;
  border-radius: 999px;
}
.rc-new-tag {
  font-size: 11px;
  font-weight: 600;
  color: #64748b;
  background: #f1f5f9;
  padding: 1.5px 6px;
  border-radius: 4px;
}
.rc-star-n, .rc-rides-n {
  font-size: 11.5px;
  font-weight: 500;
  color: #64748b;
}
.rc-car-line {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: #64748b;
  margin-top: 2px;
}
.rc-car-line .ic-car-xs {
  width: 13px;
  height: 13px;
  opacity: 0.7;
}
.rc-car-photo-tag {
  font-size: 11px;
  background: #f1f5f9;
  padding: 1px 5px;
  border-radius: 4px;
  color: #334155;
  font-weight: 600;
}
.rc-seats-urgent {
  display: inline-flex;
  align-items: center;
  font-size: 11.5px;
  font-weight: 700;
  color: #dc2626;
  background: #fef2f2;
  border: 1px solid rgba(220, 38, 38, 0.25);
  padding: 1.5px 7px;
  border-radius: 999px;
  animation: pulseUrgent 2s infinite ease-in-out;
}
@keyframes pulseUrgent {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.75; }
}

/* ---------- Flagship High-Conversion Route Alert Hero ---------- */
.route-alert-hero {
  background: linear-gradient(135deg, #ffffff 0%, #f0f6ff 100%);
  border: 1.5px solid rgba(0, 56, 168, 0.16);
  border-radius: 20px;
  padding: 36px 28px;
  text-align: center;
  box-shadow: 0 12px 36px -8px rgba(0, 56, 168, 0.08), 0 2px 6px rgba(0, 0, 0, 0.02);
  margin: 12px 0 24px;
  position: relative;
  overflow: hidden;
}
.route-alert-badge {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  background: #0038a8;
  color: #ffffff;
  border-radius: 50%;
  margin-bottom: 16px;
  box-shadow: 0 6px 16px rgba(0, 56, 168, 0.28);
}
.alert-pulse-ring {
  position: absolute;
  top: -4px;
  left: -4px;
  right: -4px;
  bottom: -4px;
  border-radius: 50%;
  border: 2px solid rgba(0, 56, 168, 0.4);
  animation: beaconPulse 2.4s infinite ease-out;
}
@keyframes beaconPulse {
  0% { transform: scale(0.95); opacity: 0.9; }
  60% { transform: scale(1.35); opacity: 0; }
  100% { transform: scale(1.35); opacity: 0; }
}
.ic-alert-hero {
  width: 25px;
  height: 25px;
}
.route-alert-title {
  font-size: 21px;
  font-weight: 800;
  color: #0b1b3f;
  margin: 0 0 10px;
  letter-spacing: -0.02em;
}
.route-alert-desc {
  font-size: 14.5px;
  line-height: 1.55;
  color: #475569;
  max-width: 540px;
  margin: 0 auto 24px;
}
.route-alert-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}
.btn-alert-cta {
  background: #0038a8;
  color: #ffffff !important;
  font-weight: 700;
  font-size: 15px;
  padding: 12px 24px;
  border-radius: 999px;
  box-shadow: 0 4px 14px rgba(0, 56, 168, 0.25);
  transition: all 0.15s ease;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.btn-alert-cta:hover {
  background: #002b82;
  transform: translateY(-1px);
}
.btn-alert-cta .ic {
  width: 17px;
  height: 17px;
}
.route-alert-driver-hook {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid rgba(0, 56, 168, 0.12);
  border-radius: 12px;
  padding: 10px 18px;
  max-width: 520px;
  margin: 0 auto;
  text-align: left;
}
.driver-hook-icon {
  font-size: 22px;
  flex-shrink: 0;
}
.driver-hook-text strong {
  display: block;
  font-size: 13.5px;
  color: #0f172a;
}

/* ---------- Direct Driver Coordination Hub (WhatsApp, Call, GCash) ---------- */
.confirmed-coord-box {
  background: #ffffff;
  border: 1.5px solid rgba(16, 185, 129, 0.35);
  border-radius: 14px;
  padding: 16px;
  margin-top: 14px;
  box-shadow: 0 4px 16px rgba(16, 185, 129, 0.08);
}
.coord-head {
  display: flex;
  flex-direction: column;
  margin-bottom: 12px;
}
.coord-driver-name {
  font-size: 15px;
  color: #0f172a;
}
.coord-actions-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  margin-bottom: 12px;
}
.btn-call {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: #0038a8;
  color: #ffffff !important;
  font-size: 12.5px;
  font-weight: 700;
  padding: 9px 8px;
  border-radius: 10px;
  text-decoration: none;
  white-space: nowrap;
}
.btn-call .ic {
  width: 14px;
  height: 14px;
}
.btn-wa {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: #128C7E;
  color: #ffffff !important;
  font-size: 12.5px;
  font-weight: 700;
  padding: 9px 8px;
  border-radius: 10px;
  text-decoration: none;
  box-shadow: 0 2px 8px rgba(18, 140, 126, 0.25);
  white-space: nowrap;
}
.btn-wa:hover {
  background: #0e7064;
  color: #ffffff !important;
}
.btn-wa .ic,
.btn-wa svg {
  width: 18px;
  height: 18px;
  fill: #ffffff !important;
  stroke: none !important;
  flex-shrink: 0;
}
/* Redesigned "Your passengers" card (Kasabay 8845) */
.passenger.passenger-v3 {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line, #e2e8f0);
  min-width: 0;
  max-width: 100%;
  width: 100%;
  box-sizing: border-box;
}
.passenger.passenger-v3:last-child {
  border-bottom: 0;
}
.pass-row-top {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-width: 0;
  max-width: 100%;
}
.pass-info {
  flex: 1 1 0%;
  min-width: 0;
  width: 0;
  overflow: hidden;
}
.pass-name {
  font-weight: 700;
  color: var(--text, #0f172a);
  font-size: 15px;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
  min-width: 0;
  max-width: 100%;
}
.pass-meta {
  font-size: 13px;
  color: var(--muted, #64748b);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pass-dropoff {
  font-size: 12px;
  color: var(--muted, #64748b);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pass-row-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: flex-start;
  width: 100%;
  flex-wrap: nowrap;
}
.btn-pass-chat {
  min-height: 40px !important;
  height: 40px !important;
  padding: 0 20px !important;
  font-size: 14.5px !important;
  font-weight: 600 !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
  box-sizing: border-box !important;
  flex-shrink: 0;
}
.btn-pass-circle {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  min-height: 40px !important;
  border-radius: 50% !important;
  background: #ffffff !important;
  border: 1px solid #dbe3f0 !important;
  color: #1e293b !important;
  text-decoration: none !important;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
  flex-shrink: 0 !important;
  box-sizing: border-box !important;
  padding: 0 !important;
}
.btn-pass-circle:hover {
  background: #f8fafc !important;
  border-color: #cbd5e1 !important;
  transform: translateY(-1px);
}
.btn-pass-circle:focus-visible,
.btn-pass-chat:focus-visible {
  outline: 2px solid var(--brand, #0b3fae) !important;
  outline-offset: 2px !important;
}
.btn-pass-circle svg,
.btn-pass-circle .ic {
  display: block !important;
  flex-shrink: 0 !important;
}
.btn-pass-call svg,
.btn-pass-call .ic {
  width: 18px !important;
  height: 18px !important;
  stroke: #1e293b !important;
  color: #1e293b !important;
  fill: none !important;
  stroke-width: 2 !important;
}
.btn-pass-messenger svg {
  width: 18px !important;
  height: 18px !important;
  fill: #0084FF !important;
  color: #0084FF !important;
}

/* ==========================================================================
   ENTERPRISE ADMIN PANEL & FINTECH OPERATIONS CENTER
   ========================================================================== */

/* Top Navigation Tabs - Overflow & Clipping Fix */
.admin-tabs {
  display: flex !important;
  align-items: center;
  gap: 4px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  white-space: nowrap !important;
  scrollbar-width: none !important;
  -webkit-overflow-scrolling: touch;
  padding: 4px 2px 10px !important;
  margin-bottom: 20px !important;
  border-bottom: 1.5px solid var(--line, #e2e8f0) !important;
}
.admin-tabs::-webkit-scrollbar {
  display: none !important;
}
.admin-tabs a {
  padding: 8px 13px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  border-radius: 8px !important;
  color: var(--muted, #64748b) !important;
  border-bottom: 2px solid transparent !important;
  margin-bottom: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  white-space: nowrap !important;
  text-decoration: none !important;
  transition: all 0.15s ease !important;
}
.admin-tabs a:hover {
  color: #0038a8 !important;
  background: #f1f5f9 !important;
}
.admin-tabs a[aria-selected="true"] {
  color: #0038a8 !important;
  background: #eff6ff !important;
  border-bottom-color: #0038a8 !important;
  font-weight: 700 !important;
}
.admin-tabs .tab-n {
  background: #fee2e2 !important;
  color: #dc2626 !important;
  border-radius: 999px !important;
  padding: 1px 7px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
}

.admin-badge-corp {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #e0f2fe;
  color: #0369a1;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 6px;
  border: 1px solid #bae6fd;
}

/* Operational Triage Command Strip */
.admin-triage-bar {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 18px 20px;
  margin-bottom: 22px;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
}
.triage-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  gap: 12px;
  flex-wrap: wrap;
}
.triage-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 999px;
}
.triage-status-pill.needs-action,
.triage-status-pill.urgent {
  background: #fef2f2;
  color: #b91c1c;
  border: 1px solid #fecaca;
}
.triage-status-pill.all-clear,
.triage-status-pill.nominal {
  background: #f0fdf4;
  color: #15803d;
  border: 1px solid #bbf7d0;
}
.triage-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
}
.triage-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.triage-badge {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px 7px;
  border-radius: 6px;
  background: #e2e8f0;
  color: #475569;
}
.triage-badge.red {
  background: #fee2e2;
  color: #dc2626;
}
.triage-badge.blue {
  background: #dbeafe;
  color: #1d4ed8;
}
.triage-metric {
  font-size: 24px;
  font-weight: 800;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  color: #0f172a;
}
.triage-card.has-items.triage-verify {
  border-color: #fde68a;
  background: #fffdf5;
}
.triage-card.has-items.triage-reports {
  border-color: #fecaca;
  background: #fff5f5;
}
.triage-card.has-items.triage-refunds {
  border-color: #bfdbfe;
  background: #f0f7ff;
}
.triage-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
}
.triage-card {
  border: 1.5px solid #e2e8f0;
  border-radius: 12px;
  padding: 14px 16px;
  background: #f8fafc;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.triage-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06);
}
.triage-card.triage-alert.is-active {
  border-color: #fca5a5;
  background: #fff5f5;
}
.triage-card.triage-warn.is-active {
  border-color: #fcd34d;
  background: #fffbeb;
}
.triage-card.triage-info.is-active {
  border-color: #93c5fd;
  background: #eff6ff;
}
.triage-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.triage-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  background: #e2e8f0;
  color: #334155;
}
.triage-alert .triage-icon { background: #fee2e2; color: #dc2626; }
.triage-warn .triage-icon { background: #fef3c7; color: #d97706; }
.triage-info .triage-icon { background: #dbeafe; color: #2563eb; }
.triage-val {
  font-size: 26px;
  font-weight: 800;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  color: #0f172a;
  line-height: 1;
}
.triage-body {
  margin-bottom: 12px;
}
.triage-title {
  font-size: 14px;
  font-weight: 700;
  color: #1e293b;
  margin-bottom: 2px;
}
.triage-hint {
  font-size: 12px;
  color: #64748b;
  line-height: 1.4;
}
.triage-action {
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.triage-action:hover {
  text-decoration: underline;
}

/* Velocity & Growth Area Chart */
.admin-chart-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 18px 20px;
  margin-bottom: 22px;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
}
.admin-chart-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  flex-wrap: wrap;
  gap: 10px;
}
.admin-chart-legend {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 12px;
  font-weight: 600;
  color: #64748b;
}
.legend-bullet {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  margin-right: 6px;
}
.admin-chart-svg {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
}
.chart-labels {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  font-size: 11px;
  color: #94a3b8;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

/* Fintech & Accounting KPIs */
.fintech-kpis-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  margin-bottom: 20px;
}
.fintech-kpi {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 18px 18px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.03);
}
.fintech-label {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #64748b;
  margin-bottom: 4px;
}
.fintech-val {
  font-size: 28px;
  font-weight: 800;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  color: #0f172a;
  line-height: 1.15;
  margin-bottom: 4px;
}
.fintech-sub {
  font-size: 12px;
  color: #64748b;
}
.fintech-note {
  font-size: 11px;
  color: #94a3b8;
  border-top: 1px solid #f1f5f9;
  padding-top: 8px;
  margin-top: 8px;
}

/* Fintech Actions Toolbar */
.fintech-actions-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* Payment Channel Progress */
.channel-progress-track {
  display: flex;
  height: 12px;
  border-radius: 999px;
  overflow: hidden;
  background: #f1f5f9;
  margin: 12px 0 16px;
}
.channel-progress-fill {
  height: 100%;
  transition: width 0.3s ease;
}

/* Corporate Data Table */
.admin-table-wrapper {
  overflow-x: auto;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  background: #ffffff;
}
.admin-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-size: 13.5px;
}
.admin-table th {
  background: #f8fafc;
  color: #475569;
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 12px 14px;
  border-bottom: 1.5px solid #e2e8f0;
  white-space: nowrap;
}
.admin-table td {
  padding: 12px 14px;
  border-bottom: 1px solid #f1f5f9;
  color: #1e293b;
  vertical-align: middle;
}
.admin-table tr:last-child td {
  border-bottom: none;
}
.admin-table tr:hover td {
  background: #f8fafc;
}
.admin-table .mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 13px;
}

/* Badges & Doc Status Pills */
.badge-channel {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 11.5px;
  font-weight: 700;
}
.badge-gcash {
  background: #eff6ff;
  color: #005ce6;
  border: 1px solid #bfdbfe;
}
.badge-maya {
  background: #f0fdf4;
  color: #15803d;
  border: 1px solid #bbf7d0;
}
.badge-cash {
  background: #f8fafc;
  color: #475569;
  border: 1px solid #cbd5e1;
}

.doc-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
}
.doc-pill-ok {
  background: #ecfdf5;
  color: #047857;
  border: 1px solid #a7f3d0;
}
.doc-pill-warn {
  background: #fffbeb;
  color: #b45309;
  border: 1px solid #fde68a;
}
.doc-pill-bad {
  background: #fef2f2;
  color: #b91c1c;
  border: 1px solid #fecaca;
}

/* Expressway Corridors Grid */
.corridors-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 16px;
}
.corridor-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 16px;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.03);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.corridor-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 12px;
  gap: 8px;
}
.corridor-name {
  font-size: 15px;
  font-weight: 700;
  color: #0f172a;
}
.corridor-status-pill {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
}
.corridor-bar-track {
  height: 8px;
  border-radius: 999px;
  background: #f1f5f9;
  overflow: hidden;
  margin: 8px 0 12px;
}
.corridor-bar-fill {
  height: 100%;
  border-radius: 999px;
}

/* Safety & Anomaly Banners */
.safety-alert-banner {
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: 12px;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}
.expressway-feed-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px;
}
.expressway-feed-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.anomaly-flag-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-radius: 8px;
  background: #fff1f2;
  border: 1px solid #fecdd3;
  margin-bottom: 8px;
  gap: 12px;
  flex-wrap: wrap;
}

/* ==========================================================================
   UBER / GRAB "GOD VIEW" OPERATIONS COMMAND CENTER
   ========================================================================== */

/* Top Telemetry Ribbon */
.ops-telemetry-ribbon {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #091124;
  color: #f8fafc;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  padding: 12px 18px;
  margin-bottom: 18px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  flex-wrap: wrap;
  gap: 14px;
}
.ops-ribbon-left {
  display: flex;
  align-items: center;
  gap: 10px;
}
.ops-beacon {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 10px #10b981;
  position: relative;
  display: inline-block;
}
.ops-beacon::after {
  content: "";
  position: absolute;
  top: -4px;
  left: -4px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1.5px solid #10b981;
  animation: opsPulse 2s infinite ease-out;
}
@keyframes opsPulse {
  0% { transform: scale(0.6); opacity: 1; }
  100% { transform: scale(1.6); opacity: 0; }
}
.ops-system-status {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #f1f5f9;
}
.ops-latency-pill {
  font-size: 10.5px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(16, 185, 129, 0.15);
  color: #34d399;
  border: 1px solid rgba(16, 185, 129, 0.3);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}
.ops-ticker-row {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.ops-ticker-item {
  display: flex;
  flex-direction: column;
}
.ops-ticker-lbl {
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #94a3b8;
}
.ops-ticker-val {
  font-size: 15px;
  font-weight: 700;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  color: #f8fafc;
}
.ops-ticker-val.green { color: #10b981; }
.ops-ticker-val.amber { color: #f59e0b; }
.ops-ticker-val.blue { color: #60a5fa; }
.ops-ticker-sep {
  width: 1px;
  height: 24px;
  background: rgba(255, 255, 255, 0.12);
}

/* Split God View Workspace */
.ops-grid-workspace {
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 18px;
  margin-bottom: 22px;
  align-items: stretch;
}
@media (max-width: 1024px) {
  .ops-grid-workspace {
    grid-template-columns: 1fr;
  }
}

/* Sidebar: Corridor Liquidity Rail */
.ops-sidebar {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.04);
}
.ops-sidebar-header {
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid #f1f5f9;
}
.ops-sidebar-header strong {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: #0f172a;
}
.ops-corridors-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow-y: auto;
  max-height: 520px;
  padding-right: 2px;
}
.ops-corridor-card {
  border: 1.5px solid #e2e8f0;
  border-radius: 12px;
  padding: 12px 14px;
  background: #f8fafc;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.ops-corridor-card:hover {
  transform: translateY(-2px);
  border-color: #0038a8;
  box-shadow: 0 4px 12px rgba(0, 56, 168, 0.08);
}
.ops-corridor-card.is-surge {
  border-color: #fde68a;
  background: #fffdf5;
}
.ops-corridor-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}
.ops-corridor-name {
  font-size: 13.5px;
  font-weight: 700;
  color: #0f172a;
}
.ops-corridor-status-tag {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 6px;
}
.ops-corridor-status-tag.ok {
  background: #ecfdf5;
  color: #059669;
}
.ops-corridor-status-tag.warn {
  background: #fef3c7;
  color: #d97706;
}
.ops-corridor-metrics {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #64748b;
  margin-bottom: 6px;
}
.ops-corridor-metrics .bold {
  font-weight: 700;
  color: #0f172a;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}
.dot-sep {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #cbd5e1;
}
.ops-corridor-track {
  height: 6px;
  background: #e2e8f0;
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 8px;
}
.ops-corridor-fill {
  height: 100%;
  border-radius: 999px;
}
.ops-corridor-fill.ok { background: #10b981; }
.ops-corridor-fill.warn { background: #f59e0b; }
.ops-corridor-actions {
  display: flex;
  justify-content: flex-end;
}

/* Map Column & God View Canvas */
.ops-canvas-col {
  position: relative;
  background: #091124;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.18);
  min-height: 560px;
}
.ops-map-canvas {
  width: 100%;
  height: 100%;
  min-height: 560px;
  display: block;
}
.ops-map-fallback {
  display: grid;
  place-items: center;
  height: 560px;
  color: #94a3b8;
  font-size: 14px;
}

/* Floating HUD Overlays */
.ops-map-hud-top {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 10;
  background: rgba(9, 17, 36, 0.85);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #ffffff;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 10px;
  pointer-events: none;
}
.ops-hud-live-tag {
  color: #ef4444;
  font-weight: 800;
  letter-spacing: 0.05em;
}
.ops-map-controls {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 10;
  display: flex;
  gap: 6px;
}
.ops-ctrl-btn {
  background: rgba(9, 17, 36, 0.85);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #ffffff;
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
}
.ops-ctrl-btn:hover {
  background: #0038a8;
  border-color: #0038a8;
}
.ops-ctrl-btn.primary {
  background: #0038a8;
  border-color: #3b82f6;
}

.ops-map-hud-bottom {
  position: absolute;
  bottom: 14px;
  left: 14px;
  right: 14px;
  z-index: 10;
  background: rgba(9, 17, 36, 0.88);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #ffffff;
  padding: 10px 16px;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ops-map-hud-bottom strong {
  font-size: 13.5px;
  font-weight: 700;
  color: #fcd116;
}
.ops-map-hud-bottom span {
  font-size: 12px;
  color: #cbd5e1;
}

/* Custom Hotspot Transit Hub Markers */
.ops-hub-marker {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.ops-hub-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #0038a8;
  border: 2px solid #ffffff;
  box-shadow: 0 0 8px rgba(0, 56, 168, 0.6);
  z-index: 2;
}
.ops-hub-pulse {
  position: absolute;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(0, 56, 168, 0.35);
  animation: hubPulse 2s infinite ease-out;
  z-index: 1;
}
@keyframes hubPulse {
  0% { transform: scale(0.5); opacity: 1; }
  100% { transform: scale(1.6); opacity: 0; }
}
.ops-hub-label {
  position: absolute;
  top: 16px;
  background: #0f172a;
  color: #ffffff;
  font-size: 10.5px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  white-space: nowrap;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  pointer-events: none;
}

/* Bottom Operational Triage (3-Column Action Trays) */
.ops-bottom-triage {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  align-items: stretch;
  margin-top: 18px;
}
@media (max-width: 1024px) {
  .ops-bottom-triage {
    grid-template-columns: 1fr;
  }
}
.ops-triage-block {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 16px 18px;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.03);
  display: flex;
  flex-direction: column;
  min-height: 290px;
}
.ops-block-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid #f1f5f9;
}
.ops-block-head strong {
  font-size: 13.5px;
  font-weight: 700;
  color: #0f172a;
}
.ops-counter-pill {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  flex-shrink: 0;
}
.ops-counter-pill.ok { background: #ecfdf5; color: #059669; border: 1px solid #a7f3d0; }
.ops-counter-pill.amber { background: #fef3c7; color: #d97706; border: 1px solid #fde68a; }
.ops-counter-pill.red { background: #fee2e2; color: #dc2626; border: 1px solid #fecaca; }

.ops-drivers-stack,
.ops-anomalies-stack {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
  max-height: 230px;
  overflow-y: auto;
  padding-right: 4px;
}
.ops-driver-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: #f8fafc;
  border-radius: 10px;
  border: 1px solid #e2e8f0;
  transition: border-color 0.15s ease;
}
.ops-driver-row:hover {
  border-color: #0038a8;
}
.ops-driver-row .grow {
  min-width: 0;
  overflow: hidden;
}
.ops-driver-row .grow strong {
  display: block;
  font-size: 13.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #0f172a;
}
.ops-driver-row .grow .small {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #64748b;
  font-size: 11.5px;
}
.ops-driver-row button {
  flex-shrink: 0;
  white-space: nowrap;
  font-size: 12px;
  padding: 6px 12px;
}

.ops-all-clear {
  padding: 16px;
  text-align: center;
  color: #059669;
  font-size: 12.5px;
  font-weight: 600;
  background: #f0fdf4;
  border-radius: 10px;
  border: 1px solid #bbf7d0;
}
.ops-anomaly-card {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  background: #fff5f5;
  border: 1px solid #fecaca;
  border-radius: 10px;
}
.ops-anomaly-badge {
  font-size: 9.5px;
  font-weight: 800;
  text-transform: uppercase;
  background: #dc2626;
  color: #ffffff;
  padding: 2px 6px;
  border-radius: 4px;
  flex-shrink: 0;
  margin-top: 2px;
}
.ops-anomaly-card .grow {
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.ops-anomaly-card .grow strong {
  font-size: 12.5px;
  color: #991b1b;
  display: block;
  margin-bottom: 2px;
}
.ops-anomaly-card .grow p {
  margin: 0;
  font-size: 11.5px;
  color: #7f1d1d;
  line-height: 1.35;
}

/* Database Browse Controls */
.browse-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.browse-search-wrap {
  flex: 1;
  min-width: 260px;
  max-width: 480px;
}
.browse-search-wrap .admin-search {
  margin-bottom: 0;
}
.browse-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.browse-card-item {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 14px 16px;
  transition: all 0.15s ease;
}
.browse-card-item:hover {
  border-color: #0038a8;
  box-shadow: 0 4px 12px rgba(0, 56, 168, 0.05);
}
.browse-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}
.browse-card-title {
  font-size: 14.5px;
  font-weight: 700;
  color: #0f172a;
}
.browse-card-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #64748b;
  margin-bottom: 6px;
}
.browse-card-who {
  font-size: 12px;
  color: #475569;
  border-top: 1px solid #f1f5f9;
  padding-top: 6px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.ops-weather-pill {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ops-expressway-mini-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 8px;
}
.ops-mini-alert {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ops-alert-tag {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
}
.ops-alert-tag.green { color: #059669; }
.ops-alert-tag.yellow { color: #d97706; }

/* Modal: Driver Inspection & Document Verification */
.ops-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.7);
  backdrop-filter: blur(6px);
  z-index: 9999;
  display: grid;
  place-items: center;
  padding: 16px;
}
.ops-modal-box {
  background: #ffffff;
  border-radius: 16px;
  width: 100%;
  max-width: 620px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25);
  overflow: hidden;
  border: 1px solid #e2e8f0;
}
.ops-modal-header {
  padding: 16px 20px;
  border-bottom: 1px solid #e2e8f0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #f8fafc;
}
.ops-modal-tag {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  color: #0038a8;
  letter-spacing: 0.04em;
}
.ops-modal-header h3 {
  margin: 2px 0 0;
  font-size: 18px;
  color: #0f172a;
}
.ops-btn-close {
  background: none;
  border: none;
  font-size: 18px;
  cursor: pointer;
  color: #64748b;
}
.ops-modal-body {
  padding: 20px;
}
.ops-driver-profile-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid #f1f5f9;
}
.ops-driver-name {
  font-size: 16px;
  color: #0f172a;
}
.ops-docs-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 18px;
}
@media (max-width: 640px) {
  .ops-docs-grid {
    grid-template-columns: 1fr;
  }
}
.ops-doc-card {
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 12px;
  background: #f8fafc;
}
.ops-doc-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.ops-license-preview {
  background: linear-gradient(135deg, #0b1b3f 0%, #1e3a8a 100%);
  color: #ffffff;
  border-radius: 8px;
  padding: 12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  margin-bottom: 8px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}
.lto-strip {
  font-size: 7.5px;
  letter-spacing: 0.05em;
  opacity: 0.8;
  margin-bottom: 6px;
}
.lto-id-num {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: #fcd116;
  margin-bottom: 4px;
}
.lto-name {
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 4px;
}
.lto-meta {
  font-size: 8.5px;
  opacity: 0.75;
}
.ops-nbi-preview {
  background: #f0fdf4;
  border: 1px dashed #22c55e;
  border-radius: 8px;
  padding: 12px;
  text-align: center;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  margin-bottom: 8px;
}
.nbi-watermark {
  font-size: 8px;
  color: #15803d;
  font-weight: 700;
  letter-spacing: 0.05em;
}
.nbi-num {
  font-size: 11px;
  font-weight: 700;
  color: #0f172a;
  margin: 4px 0;
}
.nbi-status {
  font-size: 10px;
  font-weight: 800;
  color: #16a34a;
}
.ops-doc-hint {
  font-size: 11px;
  color: #64748b;
  line-height: 1.3;
  display: block;
}
.ops-modal-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}
.ops-broadcast-preview {
  background: #f8fafc;
  border-left: 4px solid #0038a8;
  padding: 12px 14px;
  border-radius: 4px 8px 8px 4px;
  margin-top: 10px;
}
.ops-broadcast-preview p {
  margin: 4px 0 0;
  font-size: 13px;
  color: #334155;
}

/* ==========================================================================
   Operations panel — small-screen refinements
   ========================================================================== */
body.is-admin .tabbar { display: none !important; }
body.is-admin { padding-bottom: 0; }
.admin-head-actions { flex-wrap: wrap; }

/* tab strip: soft fade on the right edge while more tabs are hidden */
@media (max-width: 760px) {
  .admin-tabs:not(.is-end) {
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent);
    mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent);
  }
}

@media (max-width: 680px) {
  body.is-admin { padding-bottom: 0; }
  .admin-head-actions { width: 100%; }
  .admin-head-actions > .btn { flex: 1 1 auto; justify-content: center; }

  /* God View: keep filters in a single scrollable row under the HUD pill instead of on top of it */
  .ops-map-hud-top { right: 14px; flex-wrap: wrap; row-gap: 2px; border-radius: 16px; }
  .ops-map-controls {
    top: 70px;
    left: 14px;
    right: 14px;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 2px;
  }
  .ops-map-controls::-webkit-scrollbar { display: none; }
  .ops-ctrl-btn { flex: 0 0 auto; white-space: nowrap; }

  /* corridor list flows with the page instead of scrolling inside its own box */
  .ops-corridors-list { max-height: none; overflow: visible; }
}

/* Home hero (phones): the coverage pill repeats what the "43,768 locations" section says further down;
   hiding it lets the headline sit higher without losing information. */
@media (max-width: 680px) {
  .hero-pill { display: none; }
}

/* Hero metrics (phones): a tidy 2×2 grid instead of a 3 + 1 wrap */
@media (max-width: 680px) {
  .hero-metrics {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 12px;
  }
  .hero-metric-sep { display: none; }
}

/* ===== Operations Center design system (modelled on the Database Browse tab) ===== */
.oc-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; margin: 4px 0 16px; }
.oc-head-text h2 { margin: 0; font-size: 20px; line-height: 1.25; letter-spacing: -0.01em; color: #0f172a; }
.oc-head-text p { margin: 4px 0 0; max-width: 62ch; }
.oc-head-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.oc-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; margin-bottom: 16px; }
.oc-kpi { background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; min-width: 0; border-left: 3px solid #cbd5e1; }
.oc-kpi.accent { border-left-color: #0038a8; }
.oc-kpi.ok { border-left-color: #10b981; }
.oc-kpi.warn { border-left-color: #f59e0b; }
.oc-kpi.bad { border-left-color: #ef4444; }
.oc-kpi-lbl { font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #64748b; }
.oc-kpi-val { font-size: 24px; line-height: 1.15; color: #0f172a; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.oc-kpi-sub { font-size: 12.5px; color: #64748b; }
.oc-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 16px; min-width: 0; }
.oc-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px 14px; flex-wrap: wrap; margin-bottom: 12px; }
.oc-card-head h3 { margin: 0; font-size: 15.5px; line-height: 1.3; color: #0f172a; }
.oc-card-head p { margin: 3px 0 0; }
.oc-card-right { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.oc-stack { display: grid; gap: 14px; }
.oc-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-bottom: 14px; align-items: start; }
.oc-grid-3 { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
@media (max-width: 900px) { .oc-grid-2 { grid-template-columns: 1fr; } }
.oc-pill { display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 700; line-height: 1.4; background: #f1f5f9; color: #475569; white-space: nowrap; }
.oc-pill.ok { background: #dcfce7; color: #15803d; }
.oc-pill.warn { background: #fef3c7; color: #b45309; }
.oc-pill.bad { background: #fee2e2; color: #b91c1c; }
.oc-table-wrap { overflow-x: auto; border: 1px solid #e2e8f0; border-radius: 10px; margin-top: 10px; }
.oc-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.oc-table th { background: #f8fafc; color: #475569; font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; text-align: left; padding: 10px 14px; border-bottom: 1px solid #e2e8f0; white-space: nowrap; }
.oc-table td { padding: 11px 14px; border-bottom: 1px solid #f1f5f9; vertical-align: middle; color: #1e293b; }
.oc-table tr:last-child td { border-bottom: 0; }
.oc-table tbody tr:hover td { background: #f8fafc; }
.oc-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.oc-table td:last-child { text-align: right; white-space: nowrap; }
.oc-table td .small { overflow-wrap: anywhere; }
.oc-empty-cell { text-align: center !important; color: #64748b; padding: 22px 14px !important; }
.oc-person { display: flex; align-items: center; gap: 10px; min-width: 0; }
.oc-person .muted { overflow-wrap: anywhere; }
.oc-bars { display: grid; gap: 14px; }
.oc-bar-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 6px; flex-wrap: wrap; }
.oc-bar-track { height: 8px; border-radius: 99px; background: #e8eef8; overflow: hidden; }
.oc-bar-fill { height: 100%; border-radius: 99px; background: linear-gradient(90deg, #0038a8, #3b6fe0); }
.oc-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 14px; }
.oc-metric { background: #f8fafc; border-radius: 8px; padding: 9px 11px; display: flex; flex-direction: column; gap: 2px; }
.oc-metric span { font-size: 11.5px; color: #64748b; }
.oc-metric strong { font-size: 18px; font-variant-numeric: tabular-nums; color: #0f172a; }
.oc-routes { margin-top: 14px; display: grid; gap: 6px; }
.oc-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.oc-chip { background: #edf3ff; color: #0b2f86; border-radius: 999px; padding: 3px 10px; font-size: 12px; font-weight: 600; }
.oc-list { display: grid; gap: 8px; }
.oc-alert { display: flex; align-items: flex-start; gap: 10px; border-radius: 10px; padding: 10px 12px; border: 1px solid #fecaca; background: #fef2f2; }
.oc-alert.warn { border-color: #fde68a; background: #fffbeb; }
.oc-alert p { margin: 2px 0 0; }
.oc-allclear { padding: 14px; border-radius: 10px; background: #f0fdf4; color: #166534; font-size: 13.5px; }
.oc-advisory { margin: 0 0 12px; padding: 10px 12px; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 10px; font-size: 13.5px; }
.oc-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.oc-tile { border: 1px solid #e2e8f0; border-radius: 10px; padding: 10px 12px; display: grid; gap: 6px; }
.oc-tile-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.oc-queues { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.oc-queue { display: grid; gap: 4px; background: #fff; border: 1px solid #e2e8f0; border-left: 3px solid #cbd5e1; border-radius: 12px; padding: 14px 16px; color: inherit; text-decoration: none; transition: box-shadow .15s, border-color .15s; }
.oc-queue:hover { box-shadow: 0 4px 14px rgba(0, 56, 168, .08); border-color: #0038a8; }
.oc-queue.warn { border-left-color: #f59e0b; }
.oc-queue.bad { border-left-color: #ef4444; }
.oc-queue.ok { border-left-color: #10b981; }
.oc-queue-lbl { font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #64748b; }
.oc-queue-val { font-size: 28px; line-height: 1.1; color: #0f172a; }
.oc-queue-hint { font-size: 12.5px; color: #64748b; }
.oc-queue-go { font-size: 12.5px; font-weight: 700; color: #0038a8; margin-top: 2px; }
.admin-panel-body .chips { margin-bottom: 12px; }
.admin-panel-body > .browse-toolbar + .chips { margin-top: 2px; }
.admin-panel-body .oc-card .chips { margin: 4px 0 0; }
@media (max-width: 680px) {
  .oc-head-actions, .oc-export { width: 100%; }
  .oc-export .btn { flex: 1 1 auto; justify-content: center; }
  .oc-tiles, .oc-metrics { grid-template-columns: 1fr 1fr; }
  .oc-table th, .oc-table td { padding: 9px 10px; }
}
.oc-table .mono { white-space: nowrap; }
.ops-corridor-actions button, .ops-corridor-actions .btn { font-size: 12.5px; padding: 6px 12px; min-height: 0; width: 100%; justify-content: center; }
.ops-latency-pill { white-space: nowrap; }
.admin-report, .admin-user, .log-row { overflow-wrap: anywhere; min-width: 0; }
.admin-report .au-actions { flex-wrap: wrap; }
.admin-panel-body { min-width: 0; }
.browse-card-item { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 680px) { .browse-card-top { flex-wrap: wrap; } .browse-search-wrap { min-width: 0; max-width: none; flex-basis: 100%; } }

/* ---- Operations Center: user file + driver documents ---- */
.uf-box { max-width: 980px; max-height: 92vh; display: flex; flex-direction: column; }
.uf-content { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.uf-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px 14px; flex-wrap: wrap; padding: 10px 16px 0; border-bottom: 1px solid #e2e8f0; }
.uf-tabs { display: flex; gap: 2px; flex-wrap: wrap; border-bottom: 0; margin: 0; }
.uf-tabs .tab { position: relative; padding: 9px 12px; white-space: nowrap; }
.uf-tabs .count-badge { margin-left: 6px; }
.uf-export { padding-bottom: 8px; }
.uf-export .oc-export { margin: 0; }
.uf-pane { padding: 16px 18px 22px; overflow: auto; min-height: 0; flex: 1 1 auto; }
.uf-sub { margin: 18px 0 8px; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: #475569; }
.uf-kv { display: grid; grid-template-columns: minmax(130px, 200px) 1fr; gap: 0; margin: 0 0 8px; border: 1px solid #e2e8f0; border-radius: 10px; overflow: hidden; }
.uf-kv dt, .uf-kv dd { margin: 0; padding: 8px 12px; border-bottom: 1px solid #f1f5f9; font-size: 13.5px; }
.uf-kv dt { background: #f8fafc; color: #475569; font-weight: 600; }
.uf-kv dd { display: flex; flex-direction: column; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.uf-src { font-size: 11.5px; color: #0038a8; }
.uf-actions, .uf-actions-row { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0; }
.uf-doc { border: 1px solid #e2e8f0; border-radius: 12px; padding: 14px; margin: 12px 0; background: #fff; }
.uf-doc-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.uf-doc-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 10px; }
.uf-doc-actions input { flex: 1 1 180px; min-width: 0; }
.uf-doc-img img { max-width: 100%; max-height: 420px; border-radius: 8px; border: 1px solid #e2e8f0; margin-top: 10px; display: block; }
.uf-timeline { margin-top: 12px; }
.uf-day-label { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: #64748b; margin: 16px 0 6px; }
.uf-ev { display: grid; grid-template-columns: 52px 1fr auto; gap: 10px; align-items: start; padding: 8px 0 8px 12px; border-left: 3px solid #cbd5e1; margin-left: 4px; }
.uf-ev-time { font-variant-numeric: tabular-nums; color: #64748b; font-size: 12.5px; padding-top: 1px; }
.uf-ev-type { font-size: 11px; color: #64748b; background: #f1f5f9; border-radius: 999px; padding: 2px 8px; white-space: nowrap; }
.uf-ev-payment, .uf-ev-payout { border-left-color: #16a34a; }
.uf-ev-safety { border-left-color: #dc2626; }
.uf-ev-document { border-left-color: #d97706; }
.uf-ev-admin { border-left-color: #0038a8; }
.driver-docs .doc-form { border-top: 1px solid #e2e8f0; padding: 12px 0; display: grid; gap: 8px; }
.driver-docs .doc-form-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.driver-docs .doc-form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; }
@media (max-width: 640px) {
  .uf-kv { grid-template-columns: 1fr; }
  .uf-kv dt { border-bottom: 0; padding-bottom: 2px; }
  .uf-ev { grid-template-columns: 44px 1fr; }
  .uf-ev-type { display: none; }
  .uf-pane { padding: 12px 12px 20px; }
}
.uf-tabs .tab { background: none; border: 0; border-bottom: 3px solid transparent; border-radius: 0; font: inherit; font-weight: 600; color: #475569; cursor: pointer; }
.uf-tabs .tab:hover { color: #0f172a; }
.uf-tabs .tab.on { color: #0038a8; border-bottom-color: #0038a8; }
.uf-bar { align-items: flex-end; }
.uf-box-sm { max-width: 760px; max-height: 90vh; display: flex; flex-direction: column; }
.uf-link { color: #0038a8; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.uf-filter { width: 100%; max-width: 320px; margin: 4px 0 8px; padding: 7px 10px; border: 1px solid #cbd5e1; border-radius: 8px; font: inherit; font-size: 13px; }
.uf-details summary { cursor: pointer; font-weight: 600; color: #334155; margin: 4px 0 8px; }
.uf-carphoto { margin: 12px 0; display: grid; gap: 4px; }
.uf-carphoto img { max-width: 320px; width: 100%; border-radius: 10px; border: 1px solid #e2e8f0; }
.uf-chat { display: grid; gap: 8px; }
.uf-msg { background: #f1f5f9; border-radius: 12px; padding: 8px 12px; max-width: 85%; overflow-wrap: anywhere; }
.uf-msg.mine { background: #e0ebff; margin-left: auto; }
.oc-manual { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.oc-advisory p { margin: 4px 0; }
.oc-tile { display: grid; gap: 4px; align-content: start; }
.oc-tile .btn { justify-self: start; margin-top: 4px; }

/* ================= Route Stage — driver pitch & estimator (light, on-brand) ================= */
.rs-wrap { padding-top: 64px; }
.rs {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow); overflow: hidden;
}
.rs-inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 500px); align-items: stretch; }
.rs-copy {
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center; min-width: 0; padding: 40px 44px;
  background: radial-gradient(420px 260px at 0% 0%, var(--brand-50), transparent 70%);
}
.rs-title { margin-bottom: 12px; }
.rs-title span { display: block; font-size: clamp(24px, 2.7vw, 32px); font-weight: 800; line-height: 1.1; letter-spacing: -0.03em; color: var(--ink); }
.rs-title .rs-serif { font-family: var(--font-serif); font-weight: 400; font-style: italic; font-size: clamp(28px, 3.1vw, 38px); letter-spacing: -0.01em; color: var(--brand); margin-top: 2px; }
.rs-lede { max-width: 44ch; font-size: 15px; line-height: 1.6; color: var(--muted); margin-bottom: 22px; }
.rs-perks { list-style: none; margin: 0 0 24px; padding: 0; display: grid; gap: 14px; }
.rs-perk { display: flex; align-items: flex-start; gap: 13px; }
.rs-perk-ic { flex: none; width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; color: var(--brand); background: var(--brand-50); border: 1px solid rgba(0, 56, 168, 0.1); }
.rs-perk-ic .ic { width: 18px; height: 18px; }
.rs-perk strong { display: block; font-size: 14.5px; font-weight: 700; color: var(--ink); line-height: 1.3; }
.rs-perk div span { display: block; font-size: 13.5px; line-height: 1.45; color: var(--muted); margin-top: 1px; }
.rs-link .ic:first-child { width: 16px; height: 16px; }
.rs-link .ic:last-child { width: 14px; height: 14px; }

.rs-panel { display: flex; flex-direction: column; gap: 14px; min-width: 0; padding: 24px; background: var(--soft); border-left: 1px solid var(--line); }
.rs-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.rs-tab {
  padding: 5px 12px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line-2); color: var(--ink-2);
  font-size: 13px; font-weight: 600; cursor: pointer; box-shadow: var(--shadow-sm);
  transition: border-color 0.15s, color 0.15s, background 0.15s, transform 0.15s var(--ease);
}
.rs-tab:hover { border-color: var(--brand); color: var(--brand); background: var(--brand-50); transform: translateY(-1px); }
.rs-tab.on { background: var(--brand); border-color: var(--brand); color: #fff; box-shadow: 0 2px 8px rgba(0, 56, 168, 0.25); }

.rs-mapbox { position: relative; height: 260px; border-radius: var(--radius); overflow: hidden; background: var(--soft-2); border: 1px solid var(--line-2); box-shadow: var(--shadow-sm); }
.rs-map { position: absolute; inset: 0; }
.rs-chip {
  position: absolute; left: 10px; top: 10px; z-index: 3; max-width: calc(100% - 64px); pointer-events: none;
  padding: 5px 11px; border-radius: 999px; font-family: var(--font-mono); font-size: 11px; font-weight: 600; color: var(--ink-2); line-height: 1.35;
  background: rgba(255, 255, 255, 0.94); border: 1px solid var(--line); box-shadow: var(--shadow-sm);
}
.rs-map-off { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; text-align: center; padding: 20px; font-size: 13px; font-weight: 600; color: var(--muted); background: var(--soft-2); }
.rs-map-off[hidden] { display: none; }
.rs-mapbox .maplibregl-ctrl-group { border-radius: 10px; box-shadow: var(--shadow); }
.rs-mapbox .maplibregl-ctrl-attrib { font-size: 10px; }

.rs-pin { width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 3px solid var(--brand); box-shadow: 0 2px 8px rgba(0, 56, 168, 0.35); }
.rs-pin-end { background: var(--brand); }
.rs-pin-label {
  position: absolute; left: 50%; top: 20px; transform: translateX(-50%); white-space: nowrap; pointer-events: none;
  font-size: 11.5px; font-weight: 700; color: var(--ink); padding: 2px 8px; border-radius: 7px;
  background: rgba(255, 255, 255, 0.96); border: 1px solid var(--line); box-shadow: var(--shadow-sm);
}
.rs-pin-end .rs-pin-label { top: auto; bottom: 20px; }
.rs-trav-wrap { width: 12px; height: 12px; pointer-events: none; }
.rs-traveller { display: block; width: 12px; height: 12px; border-radius: 50%; background: var(--sun); border: 2px solid #fff; box-shadow: 0 0 0 4px rgba(252, 209, 22, 0.35), 0 2px 8px rgba(10, 25, 47, 0.25); transition: opacity 0.4s; }

.rs-result { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.rs-result-label { display: block; font-size: 12px; font-weight: 600; color: var(--muted); }
.rs-big { display: block; font-size: 36px; font-weight: 800; line-height: 1.05; letter-spacing: -0.035em; color: var(--brand); font-variant-numeric: tabular-nums; margin: 1px 0 2px; }
.rs-big-sub { display: block; font-size: 13px; color: var(--ink-2); }
.rs-seatcol { text-align: right; }
.rs-seats { display: flex; gap: 6px; margin-top: 6px; justify-content: flex-end; }
.rs-seat {
  display: flex; flex-direction: column; align-items: center; justify-content: center; width: 40px; height: 46px; border-radius: var(--radius-s); cursor: pointer;
  color: var(--muted); background: var(--surface); border: 1px solid var(--line-2); box-shadow: var(--shadow-sm);
  transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.15s var(--ease);
}
.rs-seat span { font-size: 11px; font-weight: 800; }
.rs-seat-ic { width: 18px; height: 18px; }
.rs-seat:hover { border-color: var(--brand); color: var(--brand); transform: translateY(-2px); }
.rs-seat.on { color: var(--brand); background: var(--brand-50); border-color: rgba(0, 56, 168, 0.3); }
.rs-seat.sel { color: #fff; background: var(--brand); border-color: var(--brand); box-shadow: 0 4px 12px rgba(0, 56, 168, 0.3); }

.rs-meter { height: 6px; border-radius: 999px; background: var(--soft-2); overflow: hidden; }
.rs-meter-fill { height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--brand), #2f6bdc); transition: width 0.7s var(--ease); }
.rs-meter-legend { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 12px; margin-top: 7px; font-size: 12px; color: var(--muted); }
.rs-meter-legend b, .rs-meter-legend strong { color: var(--ink); font-variant-numeric: tabular-nums; }
.rs-cta { width: 100%; }
.rs-cta .ic { width: 17px; height: 17px; }
.rs-note { text-align: center; font-size: 11.5px; color: var(--muted); margin-top: -4px; }

@media (max-width: 980px) {
  .rs-inner { grid-template-columns: minmax(0, 1fr); }
  .rs-copy { padding: 30px 28px; }
  .rs-panel { border-left: 0; border-top: 1px solid var(--line); }
}
@media (max-width: 640px) {
  .rs-wrap { padding-top: 48px; }
  .rs-copy { padding: 24px 18px; }
  .rs-panel { padding: 16px 14px; }
  .rs-mapbox { height: 230px; }
  .rs-result { align-items: flex-start; }
  .rs-seatcol { text-align: left; }
  .rs-seats { justify-content: flex-start; }
  .rs-seat { width: 46px; }
  .rs-chip { font-size: 10px; padding: 4px 9px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}

/* Hero card: marks the showcased trip as an illustration */
.hv-ticket { position: relative; }
.hv-sample {
  position: absolute; top: -9px; right: 14px; padding: 2px 9px; border-radius: 999px; pointer-events: none;
  font-size: 9.5px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--sun-ink); background: var(--warn-50); border: 1px solid rgba(234, 184, 0, 0.45);
  box-shadow: 0 2px 6px rgba(10, 25, 47, 0.18);
}

/* Ride detail: drop-off stops sit on the same timeline as the route (same look as the ride cards) */
.itin-via { display: grid; grid-template-columns: 64px 18px 1fr; gap: 0 16px; align-items: stretch; min-height: 34px; }
.itin-rail { position: relative; display: flex; justify-content: center; }
.itin-rail::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 3px; margin-left: -1.5px; background: rgba(0, 56, 168, 0.35); }
.itin-dot-via { position: relative; z-index: 1; display: block; width: 9px; height: 9px; margin-top: 12px; border-radius: 50%; background: #cbd5e1; box-shadow: 0 0 0 3px var(--surface); }
.itin-via.is-hit .itin-dot-via { background: var(--brand); }
.itin-via-name { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; padding-block: 5px; font-size: 15px; font-weight: 500; line-height: 24px; color: var(--ink-2); }
.itin-via.is-hit .itin-via-name { color: var(--brand); font-weight: 700; }

/* ---- Route Stage: soft edges so the block melts into the page instead of sitting on it as a box ---- */
.rs { position: relative; isolation: isolate; overflow: visible; background: none; border: 0; box-shadow: none; transition: opacity 1s var(--ease), transform 1s var(--ease); }
.rs.rs-pre { opacity: 0; transform: translateY(20px); }
.rs::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: 30px;
  background:
    radial-gradient(640px 320px at 0% 12%, rgba(219, 231, 255, 0.55), transparent 72%),
    radial-gradient(520px 300px at 100% 92%, rgba(252, 209, 22, 0.07), transparent 72%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.97));
  box-shadow: inset 0 0 0 1px rgba(13, 34, 64, 0.055), 0 30px 70px -40px rgba(0, 40, 120, 0.22);
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 17%, #000 83%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 17%, #000 83%, transparent 100%);
}
.rs-copy { background: none; padding-block: 72px; }
.rs-panel { position: relative; isolation: isolate; background: none; border: 0; padding-block: 52px; }
.rs-panel::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, rgba(241, 245, 250, 0) 0, rgba(238, 243, 251, 0.92) 14%, rgba(241, 245, 250, 0.7) 100%);
  border-radius: 0 30px 30px 0;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 20%, #000 80%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 20%, #000 80%, transparent 100%);
}
@media (max-width: 980px) {
  .rs-copy { padding-block: 48px 24px; }
  .rs-panel { border-top: 0; padding-block: 24px 48px; }
  .rs-panel::before { border-radius: 0 0 30px 30px; background: linear-gradient(180deg, rgba(238, 243, 251, 0) 0, rgba(238, 243, 251, 0.9) 16%, rgba(241, 245, 250, 0.7) 100%); -webkit-mask-image: linear-gradient(180deg, #000 0, #000 80%, transparent 100%); mask-image: linear-gradient(180deg, #000 0, #000 80%, transparent 100%); }
}
@media (max-width: 640px) {
  .rs-copy { padding-block: 36px 16px; }
  .rs-panel { padding-block: 16px 36px; }
  .rs::before { border-radius: 22px; }
}
@media (prefers-reduced-motion: reduce) { .rs, .rs.rs-pre { transition: none; opacity: 1; transform: none; } }

/* ---- Route Stage v2: deeper, wider fade (a glow that dissolves in every direction, no edges) ---- */
.rs::before {
  inset: -96px -24px -120px; border-radius: 0; box-shadow: none;
  background:
    radial-gradient(820px 460px at 14% 34%, rgba(208, 224, 255, 1), rgba(219, 231, 255, 0.5) 55%, transparent 80%),
    radial-gradient(640px 360px at 90% 72%, rgba(252, 209, 22, 0.11), transparent 74%),
    radial-gradient(900px 520px at 58% 48%, rgba(237, 243, 255, 0.9), transparent 80%),
    linear-gradient(180deg, rgba(247, 250, 255, 0.5), rgba(255, 255, 255, 0.9));
  -webkit-mask-image: radial-gradient(ellipse 54% 60% at 50% 50%, #000 0%, rgba(0, 0, 0, 0.9) 36%, rgba(0, 0, 0, 0.55) 62%, rgba(0, 0, 0, 0.18) 84%, transparent 100%);
  mask-image: radial-gradient(ellipse 54% 60% at 50% 50%, #000 0%, rgba(0, 0, 0, 0.9) 36%, rgba(0, 0, 0, 0.55) 62%, rgba(0, 0, 0, 0.18) 84%, transparent 100%);
}
.rs-panel::before {
  inset: -48px -24px -48px -80px; border-radius: 0;
  background:
    radial-gradient(ellipse 70% 62% at 58% 50%, rgba(224, 235, 252, 0.95), rgba(233, 240, 251, 0.6) 55%, transparent 100%);
  -webkit-mask-image: none; mask-image: none;
}
@media (max-width: 980px) {
  .rs::before { inset: -72px -16px -80px; -webkit-mask-image: radial-gradient(ellipse 58% 62% at 50% 50%, #000 0%, rgba(0, 0, 0, 0.85) 38%, rgba(0, 0, 0, 0.45) 66%, transparent 100%); mask-image: radial-gradient(ellipse 58% 62% at 50% 50%, #000 0%, rgba(0, 0, 0, 0.85) 38%, rgba(0, 0, 0, 0.45) 66%, transparent 100%); }
  .rs-panel::before { inset: -32px -16px -40px; background: radial-gradient(ellipse 90% 70% at 50% 45%, rgba(224, 235, 252, 0.9), rgba(233, 240, 251, 0.5) 60%, transparent 100%); }
}
@media (max-width: 640px) { .rs::before { border-radius: 0; inset: -56px -16px -64px; } }

/* ========================================================
   Vertical rhythm — one spacing scale for the whole page
   (section gap 44 desktop / 36 mobile · head→content 18 · card gaps 16)
   ======================================================== */
:root {
  --sec-gap: 44px;
  --head-gap: 18px;
}
.section { padding-top: var(--sec-gap); }
.sec-head { margin-bottom: var(--head-gap); }
.values { padding-top: 28px; }
.rs-wrap { padding-top: calc(var(--sec-gap) - 4px); }
.rs::before { inset: -64px -24px -72px; }
.trust .lede { margin: 10px 0 18px; }
.faq { gap: 10px 20px; }
.footer { margin-top: 52px; }
.footer-inner { padding: 26px var(--gutter) 28px; }
.footer-skyline { padding-top: 14px; }
.hero-inner { padding-top: 44px; padding-bottom: 92px; }

@media (max-width: 980px) {
  .rs::before { inset: -48px -16px -56px; }
}
@media (max-width: 680px) {
  :root { --sec-gap: 34px; --head-gap: 14px; }
  .values { padding-top: 24px; gap: 12px; }
  .section { padding-top: var(--sec-gap); }
  .rs-wrap { padding-top: var(--sec-gap); }
  .rs::before { inset: -36px -16px -44px; }
  .footer { margin-top: 40px; }
  .hero-inner { padding-top: 28px; padding-bottom: 76px; }
}
@media (min-width: 981px) {
  .rs-panel { padding-block: 26px; }
  .rs-copy { padding: 34px 40px; }
}
@media (max-width: 980px) {
  .rs-panel { padding-block: 20px 28px; }
}

/* Driver documents — premium form styling */
.driver-docs .doc-form { border: 1px solid #f1f5f9; border-radius: 14px; padding: 18px; margin-top: 14px; background: #fff; box-shadow: 0 1px 2px rgba(15,23,42,.04); gap: 14px; }
.driver-docs .doc-form-grid { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; align-items: start; }
.driver-docs .doc-form-grid > label, .driver-docs .doc-field { display: grid; gap: 6px; font-size: 13px; font-weight: 600; color: #475569; align-content: start; }
.driver-docs .doc-field-label { font-size: 13px; font-weight: 600; color: #475569; }
.driver-docs .doc-form input:not([type=file]) { width: 100%; box-sizing: border-box; border: 1px solid #e2e8f0; border-radius: 12px; background: rgba(248,250,252,.5); padding: 10px 14px; font: inherit; font-size: 14px; font-weight: 400; color: #1e293b; outline: none; transition: all .15s ease; min-height: 42px; }
.driver-docs .doc-form input::placeholder { color: #94a3b8; }
.driver-docs .doc-form input:not([type=file]):focus { background: #fff; border-color: #2563eb; box-shadow: 0 0 0 3px #dbeafe; }
.driver-docs .doc-form input[type=date] { color-scheme: light; }
.driver-docs .doc-form input[type=date]::-webkit-calendar-picker-indicator { cursor: pointer; opacity: .85; border-radius: 6px; padding: 2px; filter: invert(18%) sepia(95%) saturate(3300%) hue-rotate(215deg) brightness(.85); }
.driver-docs .doc-drop { position: relative; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; padding: 10px 14px; border: 1px dashed #cbd5e1; border-radius: 12px; background: #f8fafc; color: #334155; font-size: 14px; font-weight: 600; cursor: pointer; transition: all .15s ease; box-sizing: border-box; }
.driver-docs .doc-drop:hover { border-color: #3b82f6; background: rgba(239,246,255,.6); color: var(--brand); }
.driver-docs .doc-drop:focus-within { border-color: #2563eb; box-shadow: 0 0 0 3px #dbeafe; }
.driver-docs .doc-drop.has-file { border-style: solid; border-color: #93c5fd; background: #eff6ff; color: var(--brand); }
.driver-docs .doc-drop .ic { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.driver-docs .doc-file-input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; font-size: 0; }
.driver-docs .doc-file-name { font-size: 12px; font-weight: 400; color: #64748b; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.driver-docs .doc-send { width: 100%; min-height: 44px; transition: all .15s ease; }
.driver-docs .doc-send:hover:not(:disabled) { background: #1e40af; }
.driver-docs .doc-send:active:not(:disabled) { transform: scale(.99); }

/* ===== Live Overview — light theme ===== */
.ops-telemetry-ribbon { background: #fff; color: #0f172a; border: 1px solid #e2e8f0; border-radius: 16px; padding: 20px; box-shadow: 0 1px 2px rgba(15,23,42,.06); gap: 16px 24px; }
.ops-beacon { width: 8px; height: 8px; background: #22c55e; box-shadow: none; }
.ops-beacon::after { border-color: rgba(34,197,94,.45); }
.ops-system-status { color: #0f172a; font-weight: 700; font-size: 13px; letter-spacing: .06em; }
.ops-latency-pill { font-family: inherit; font-size: 11px; font-weight: 600; letter-spacing: .04em; padding: 3px 10px; border-radius: 999px; }
.ops-latency-pill.warn { background: #fffbeb; color: #b45309; border: 1px solid #fde68a; }
.ops-latency-pill.ok { background: #f0fdf4; color: #15803d; border: 1px solid #bbf7d0; }
.ops-ticker-row { gap: 22px; }
.ops-ticker-lbl { font-size: 12px; font-weight: 500; letter-spacing: .04em; color: #64748b; }
.ops-ticker-val, .ops-ticker-val.green, .ops-ticker-val.amber, .ops-ticker-val.blue { font-family: inherit; font-size: 20px; font-weight: 700; color: #1e293b; font-variant-numeric: tabular-nums; line-height: 1.3; }
.ops-ticker-sep { background: #e2e8f0; height: 32px; }

.ops-canvas-col { background: #f1f5f9; border: 1px solid #e2e8f0; box-shadow: 0 1px 2px rgba(15,23,42,.06); }
.ops-map-hud-top { background: rgba(255,255,255,.92); backdrop-filter: blur(12px); border: 1px solid #e2e8f0; color: #334155; box-shadow: 0 1px 2px rgba(15,23,42,.08); font-weight: 500; }
.ops-hud-live-tag { color: #dc2626; font-weight: 700; }
.ops-map-controls { top: 58px; right: auto; left: 14px; gap: 2px; padding: 3px; background: rgba(255,255,255,.9); backdrop-filter: blur(12px); border: 1px solid #e2e8f0; border-radius: 999px; box-shadow: 0 1px 2px rgba(15,23,42,.08); }
.ops-ctrl-btn { background: transparent; backdrop-filter: none; border: 0; color: #475569; padding: 6px 14px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.ops-ctrl-btn:hover { background: #f1f5f9; border-color: transparent; color: #0f172a; }
.ops-ctrl-btn.on, .ops-ctrl-btn.on:hover { background: var(--brand); color: #fff; box-shadow: 0 1px 3px rgba(0,56,168,.35); }
.ops-map-hud-bottom { background: rgba(255,255,255,.95); backdrop-filter: blur(12px); border: 1px solid #e2e8f0; color: #334155; box-shadow: 0 4px 12px rgba(15,23,42,.1); border-radius: 12px; }
.ops-map-hud-bottom strong { color: #0f172a; }
.ops-map-hud-bottom span { color: #64748b; }

/* hub markers: quiet dot, name on hover */
.ops-hub-marker { width: 16px; height: 16px; }
.ops-hub-dot { width: 11px; height: 11px; background: var(--brand); border: 2px solid #fff; box-shadow: 0 1px 3px rgba(15,23,42,.35); transition: transform .15s ease; }
.ops-hub-marker:hover { z-index: 5; }
.ops-hub-marker:hover .ops-hub-dot { transform: scale(1.3); }
.ops-hub-label { top: auto; bottom: 18px; background: #fff; color: #0f172a; border: 1px solid #e2e8f0; box-shadow: 0 4px 12px rgba(15,23,42,.15); font-weight: 600; padding: 4px 8px; border-radius: 8px; opacity: 0; transform: translateY(3px); transition: opacity .15s, transform .15s; }
.ops-hub-marker:hover .ops-hub-label { opacity: 1; transform: none; }

/* corridor list */
.ops-corridor-card, .ops-corridor-card.is-surge { background: #fff; border: 1px solid #f1f5f9; border-radius: 12px; box-shadow: 0 1px 2px rgba(15,23,42,.05); }
.ops-corridor-card:hover { border-color: #cbd5e1; box-shadow: 0 4px 12px rgba(15,23,42,.08); }
.ops-corridor-status-tag { font-size: 12px; font-weight: 500; padding: 2px 10px; border-radius: 999px; white-space: nowrap; }
.ops-corridor-status-tag.ok { background: #f0fdf4; color: #15803d; }
.ops-corridor-status-tag.warn { background: #fffbeb; color: #b45309; }
.ops-corridor-metrics .bold { font-family: inherit; }
.ops-corridor-fill.ok { background: #34d399; }
.ops-corridor-fill.warn { background: #fbbf24; }
.ops-broadcast-btn { width: 100%; background: #f8fafc; color: #334155; border: 1px solid #e2e8f0; border-radius: 8px; font: inherit; font-size: 12px; font-weight: 600; padding: 8px 12px; cursor: pointer; transition: background .15s ease; }
.ops-broadcast-btn:hover { background: #f1f5f9; }
.ops-corridor-actions { justify-content: stretch; }
@media (max-width: 680px) { .ops-map-controls { right: 14px; border-radius: 14px; } }

/* Community requests — honest empty state */
.req-empty { display: grid; gap: 8px; justify-items: start; padding: 22px 24px; }
.req-empty strong { font-size: 16px; color: #0f172a; }
.req-empty p { margin: 0 0 6px; }

/* Leaving soon — compact empty state */
.soon-empty { display: flex; align-items: center; justify-content: space-between; gap: 14px 20px; flex-wrap: wrap; padding: 18px 22px; }
.soon-empty p { margin: 0; color: #475569; }
.soon-empty strong { color: #0f172a; }

/* ===== Role system: Driver offer (brand blue) vs Passenger request (red) ===== */
:root { --role-driver: #0038a8; --role-driver-bg: #edf3ff; --role-driver-bd: #c9daff; --role-pass: #8a5a00; --role-pass-bg: #fff6dc; --role-pass-bd: #f4cf72; --role-pass-solid: #f7be38; --role-pass-deep: #d39a3c; --role-pass-ink: #3b2800; }
.role-pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px 5px 9px; border-radius: 999px; font-size: 12.5px; font-weight: 700; letter-spacing: .01em; line-height: 1; white-space: nowrap; border: 1px solid transparent; }
.role-pill .ic { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.role-pill-sm { font-size: 11.5px; padding: 4px 10px 4px 8px; }
.role-pill-sm .ic { width: 14px; height: 14px; }
.role-driver { background: var(--role-driver-bg); color: var(--role-driver); border-color: var(--role-driver-bd); }
.role-passenger { background: var(--role-pass-bg); color: var(--role-pass); border-color: var(--role-pass-bd); }
.role-line { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; margin-bottom: 10px; }
.role-line .eyebrow { margin: 0; }
.role-sec-driver .role-line .eyebrow { color: var(--role-driver); }
.role-sec-passenger .role-line .eyebrow { color: var(--role-pass); }
.role-sub { margin: 6px 0 0; color: #64748b; font-size: 15px; max-width: 56ch; }
.role-head { align-items: flex-end; }
.rc-role { padding: 12px 16px 0; }
.req-role { margin-bottom: -2px; }
.role-sec-passenger .req-offer-link.cta { background: var(--role-pass-bg); color: var(--role-pass); border: 1px solid var(--role-pass-bd); }
.role-sec-passenger .req-offer-link.cta:hover { background: #ffecb3; color: var(--role-pass-ink); }
.role-sec-passenger .req-empty .btn-primary,
.role-sec-passenger .role-actions .btn-primary { background: var(--role-pass-solid); border-color: var(--role-pass-solid); color: var(--role-pass-ink); }
.role-sec-passenger .req-empty .btn-primary:hover,
.role-sec-passenger .role-actions .btn-primary:hover { background: #eaaa1e; border-color: #eaaa1e; color: var(--role-pass-ink); }
.role-sec-passenger .link-arrow { background: var(--role-pass-bg); color: var(--role-pass); }
.role-sec-passenger .link-arrow:hover { background: #ffecb3; color: var(--role-pass-ink); }

/* Request card: vertical route timeline (origin ○ above, destination ● below) */
.req-tl { display: grid; gap: 0; padding-top: 2px; }
.req-tl-row { display: grid; grid-template-columns: 16px 1fr; column-gap: 12px; align-items: start; position: relative; }
.req-tl-row + .req-tl-row { margin-top: 10px; }
.req-tl-rail { position: relative; display: flex; justify-content: center; align-self: stretch; }
.req-tl-dot { display: block; width: 12px; height: 12px; margin-top: 5px; border-radius: 50%; position: relative; z-index: 2; flex: none; box-sizing: border-box; }
.req-tl-start { border: 2.5px solid var(--role-pass-solid); background: var(--surface); }
.req-tl-end { background: var(--role-pass-solid); }
.req-tl-origin .req-tl-rail::after { content: ""; position: absolute; left: 50%; transform: translateX(-50%); width: 2.5px; top: 17px; bottom: -15px; border-radius: 2px; background: linear-gradient(180deg, var(--role-pass-solid) 0%, #fbe3a0 100%); }
.req-tl-place { display: grid; gap: 1px; min-width: 0; }
.req-tl-place .req-city { font-size: 16.5px; font-weight: 800; letter-spacing: -0.015em; line-height: 1.3; color: var(--ink); }
.req-tl-sub { font-size: 12.5px; color: #64748b; font-weight: 500; }

.role-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.role-actions .btn .ic-end { margin-left: 2px; }

/* Request card = same anatomy as the ride card; only the role accent differs */
.rc.req-rc { cursor: default; }
.rc.req-rc:hover { border-color: rgba(211,154,60,.55); }
.req-rc .rc-tl-dot-start { border-color: var(--role-pass-solid); }
.req-rc .rc-tl-dot-end { background: var(--role-pass-solid); }
.req-rc .rc-tl-origin .rc-tl-rail::after { background: linear-gradient(180deg, var(--role-pass-solid) 0%, #fbe3a0 100%); bottom: -13px; }
.req-rc .rc-date-pill { background: #f1f5f9; color: #475569; }
.req-rc .rc-amount { color: #1e293b; }
.req-rc .rc-time-na { color: #cbd5e1; font-weight: 600; }
.req-rc .req-seat-pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; background: var(--role-pass-bg); border: 1px solid var(--role-pass-bd); color: var(--role-pass); font-size: 12px; font-weight: 700; }
.req-rc .req-seat-pill .ic { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.req-rc-note { margin: -6px 20px 12px; font-size: 12.5px; font-style: italic; color: #64748b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.req-rc .rc-foot { margin-top: auto; }
.req-rc .req-offer-link.cta { flex: none; }
.req-rc .rc-driver-line strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.req-rc .rc-driver-meta { min-width: 0; }
.req-rc .req-offer-link.cta { white-space: nowrap; }

/* Request card with a drop-off / meetup point: solid origin line, grey connector, grey node */
.req-rc .rc-route.has-stops .rc-tl-origin .rc-tl-rail::after { background: var(--role-pass-solid); bottom: -9px; }
.stop-field { display: grid; grid-template-columns: 170px 1fr; gap: 10px; align-items: start; }
@media (max-width: 480px) { .stop-field { grid-template-columns: 1fr; } }
.req-rc .rc-stop-via .rc-via-name { display: block; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Trip note on the ride card: same one-line italic note as the passenger request card */
.rc .rc-note { margin: -6px 20px 12px; }

/* Place search: subtle inline spinner while a lookup is in flight */
.pi-spin { width: 12px; height: 12px; border-radius: 50%; border: 2px solid #cbd5e1; border-top-color: var(--role-driver, #0038a8); animation: pi-spin .7s linear infinite; flex: none; margin-left: auto; margin-right: 8px; }
@keyframes pi-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .pi-spin { animation-duration: 2s; } }

/* Driver pitch (informational redesign): numbered steps + one labelled example, a single CTA */
.rs-steps { list-style: none; margin: 0 0 26px; padding: 0; display: grid; gap: 16px; counter-reset: rs; }
.rs-step { display: flex; align-items: flex-start; gap: 14px; }
.rs-step-n { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: 13.5px; font-weight: 800; color: var(--brand); background: var(--brand-50); border: 1px solid rgba(0, 56, 168, 0.18); }
.rs-step strong { display: block; font-size: 14.5px; font-weight: 700; color: var(--ink); line-height: 1.3; }
.rs-step div span { display: block; font-size: 13.5px; line-height: 1.45; color: var(--muted); margin-top: 1px; }
.rs-copy .rs-cta { width: auto; align-self: flex-start; }
.rs-panel { justify-content: center; gap: 18px; }
.rs-ex-head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; }
.rs-ex-tag { padding: 2px 9px; border-radius: 999px; font-size: 10.5px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sun-ink); background: var(--warn-50); border: 1px solid rgba(234, 184, 0, 0.45); }
.rs-ex-route { font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.rs-big { font-size: 42px; }
@media (max-width: 640px) { .rs-big { font-size: 36px; } .rs-copy .rs-cta { width: 100%; justify-content: center; } }

/* ================= Home hero — daylight (light sky + route network illustration) ================= */
.hero { color: var(--ink); background: linear-gradient(180deg, #e9f1ff 0%, #f3f7ff 55%, var(--bg) 100%); }
.hero::before {
  background-image: radial-gradient(rgba(0, 56, 168, 0.11) 1px, transparent 1px);
  mask-image: linear-gradient(120deg, rgba(0, 0, 0, 0.7) 0%, transparent 70%);
  -webkit-mask-image: linear-gradient(120deg, rgba(0, 0, 0, 0.7) 0%, transparent 70%);
}
.hero :focus-visible { outline-color: var(--brand); }
.hero-bg-routes { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-net .rt { fill: none; stroke-width: 2.6; stroke-dasharray: 3 9; animation: heroRouteFlow 22s linear infinite; }
.hero-net .rt-blue { stroke: rgba(0, 56, 168, 0.42); }
.hero-net .rt-faint { stroke: rgba(0, 56, 168, 0.22); animation-duration: 30s; }
.hero-net .rt-red { stroke: rgba(206, 17, 38, 0.5); animation-duration: 26s; }
@keyframes heroRouteFlow { to { stroke-dashoffset: -240; } }
.hero-nodes circle { fill: #fff; stroke: var(--brand); stroke-width: 3; }
.hero-rider { fill: var(--sun); stroke: #fff; stroke-width: 2; filter: drop-shadow(0 2px 4px rgba(0, 40, 120, 0.35)); }
@media (prefers-reduced-motion: reduce) { .hero-net .rt { animation: none; } .hero-rider { display: none; } }

.hero-pilot-banner {
  background: #fff; border: 1px solid rgba(0, 56, 168, 0.14); box-shadow: 0 4px 14px rgba(0, 40, 120, 0.08);
  color: var(--ink-2); backdrop-filter: none; -webkit-backdrop-filter: none; margin-bottom: 18px;
}
.pilot-text { color: var(--ink-2); text-shadow: none; }
.hero h1 { color: var(--ink); text-shadow: none; }
.hero h1 .hero-serif { color: var(--brand); text-shadow: none; }
.hero-sub { color: var(--ink-2); text-shadow: none; }
.hero-trust { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 10px; }
.hero-trust li { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--muted); }
.hero-trust li strong { color: var(--ink); font-weight: 700; }
.hero-trust .ic { flex: none; width: 22px; height: 22px; padding: 4px; border-radius: 50%; color: var(--ok); background: var(--ok-50); }

.hv { background: rgba(255, 255, 255, 0.86); border: 1px solid rgba(0, 56, 168, 0.12); box-shadow: 0 22px 50px rgba(0, 40, 120, 0.16); backdrop-filter: blur(10px) saturate(140%); -webkit-backdrop-filter: blur(10px) saturate(140%); }
.hv-tabs { background: var(--soft); border-color: var(--line); }
.hv-tab { color: var(--muted); }
.hv-tab:hover { color: var(--brand); }
.hv-tab.on { background: #fff; color: var(--brand); box-shadow: 0 2px 8px rgba(0, 40, 120, 0.12); }
.hv-telemetry { background: #f5f8ff; border-color: rgba(0, 56, 168, 0.1); }
.hv-telemetry-top { color: var(--muted); }
.hv-badge-live { color: var(--ink); }
.hv-km { color: var(--brand); font-weight: 700; }
.hv-end-time { color: var(--brand); }
.hv-end strong { color: var(--ink); }
.hv-end-sub { color: var(--muted); }
.hv-ticket { border: 1px solid var(--line); box-shadow: 0 6px 16px rgba(0, 40, 120, 0.10); }
.hv-ticket:hover { box-shadow: 0 12px 26px rgba(0, 40, 120, 0.18); }

.hero-search .sb { box-shadow: 0 18px 44px rgba(0, 40, 120, 0.16); border-color: rgba(0, 56, 168, 0.10); }
@media (max-width: 980px) { .hero-bg-routes { opacity: 0.55; } }

/* Hero without the example-trip card: copy on the left, route illustration breathing on the right */
.hero-inner { grid-template-columns: minmax(0, 640px); padding-top: 64px; padding-bottom: 116px; }
@media (max-width: 980px) { .hero-inner { grid-template-columns: minmax(0, 1fr); padding-top: 40px; padding-bottom: 92px; } }
.hero-backdrop { -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 84%, transparent 99%); mask-image: linear-gradient(180deg, #000 0%, #000 84%, transparent 99%); }

/* ================= Hero map — frosted-glass cartography of the Philippines ================= */
.hero-bg-routes { position: absolute; inset: 0 0 0 auto; width: min(66%, 840px); height: 100%; }
/* Soft morning light from the top-right corner (warm yellow + white), no solid sun */
.hero-morning { position: absolute; inset: 0; pointer-events: none; animation: heroMorning 11s ease-in-out infinite alternate; }
.hero-morning::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(640px 420px at 100% 0%, rgba(255, 236, 168, 0.62) 0%, rgba(255, 244, 205, 0.34) 38%, rgba(255, 255, 255, 0) 72%),
    radial-gradient(900px 560px at 92% -6%, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0) 70%);
}
.hero-morning::after {
  content: ""; position: absolute; inset: 0;
  background: conic-gradient(from 196deg at 100% 0%, transparent 0deg, rgba(255, 240, 180, 0.20) 9deg, transparent 20deg, rgba(255, 246, 214, 0.16) 31deg, transparent 44deg, rgba(255, 238, 170, 0.12) 58deg, transparent 72deg);
  -webkit-mask-image: radial-gradient(70% 90% at 100% 0%, #000 0%, transparent 78%); mask-image: radial-gradient(70% 90% at 100% 0%, #000 0%, transparent 78%);
  filter: blur(2px);
}
@keyframes heroMorning { from { opacity: 0.82; } to { opacity: 1; } }

.mp-grat line { stroke: #7f97b8; stroke-opacity: 0.22; stroke-width: 0.5; stroke-dasharray: 2 5; }
.mp-axis text, .mp-corner text { font: 600 9px/1 var(--font-mono, ui-monospace, monospace); fill: #7e9bbd; letter-spacing: 0.04em; }
.mp-axis text { fill-opacity: 0.85; }

/* Bathymetric shelves & relief */
.mp-shelf { fill: none; stroke-linejoin: round; }
.mp-shelf-outer { stroke: #9ec0ef; stroke-width: 9; stroke-opacity: 0.16; }
.mp-shelf-inner { stroke: #6f9be0; stroke-width: 3.5; stroke-opacity: 0.22; }
.mp-rim { fill: none; stroke: #fff; stroke-width: 6; stroke-opacity: 0.75; }
.mp-coast-under { fill: none; stroke: #ffffff; stroke-width: 1.2; stroke-opacity: 0.95; stroke-linejoin: round; }
.mp-coast { fill: none; stroke: #6b93c9; stroke-width: 0.65; stroke-opacity: 0.70; stroke-linejoin: round; filter: drop-shadow(0 0 1px rgba(120, 160, 215, 0.45)); }

/* Highway Corridors & RoRo links */
.mp-road-case { fill: none; stroke: rgba(255, 255, 255, 0.88); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.mp-road { fill: none; stroke: #1d5fd6; stroke-width: 1.1; stroke-opacity: 0.75; stroke-linecap: round; stroke-linejoin: round; }
.mp-road-sec { stroke-width: 0.85; stroke-opacity: 0.52; }
.mp-road-amber { stroke: #d97706; stroke-opacity: 0.70; }
.mp-trunk { fill: none; stroke: #2563eb; stroke-width: 0.95px; stroke-opacity: 0.38; stroke-dasharray: 4 3; }
.mp-trunk-case { fill: none; stroke: rgba(255, 255, 255, 0.85); stroke-width: 2px; stroke-linecap: round; }
.mp-roro { fill: none; stroke: #5681c6; stroke-width: 0.8; stroke-dasharray: 2 3; stroke-opacity: 0.48; }

/* Carpooling motion: Blue & Amber flows + The Single Red traveler */
.mp-traveler-blue { fill: #ffffff; stroke: #0038a8; stroke-width: 0.95px; filter: drop-shadow(0 0 2px rgba(0, 56, 168, 0.45)); }
.mp-traveler-amber { fill: #f59e0b; stroke: #ffffff; stroke-width: 0.85px; filter: drop-shadow(0 0 2.8px rgba(245, 158, 11, 0.75)); }
.mp-traveler-red { fill: #ce1126; stroke: #ffffff; stroke-width: 0.95px; filter: drop-shadow(0 0 3px rgba(206, 17, 38, 0.75)); }
.mp-traveler-red-soft { fill: #d64553; filter: drop-shadow(0 0 1.6px rgba(206, 17, 38, 0.4)); }
.mp-traveler-green { fill: #10b981; stroke: #ffffff; stroke-width: 0.85px; filter: drop-shadow(0 0 2.2px rgba(16, 185, 129, 0.6)); }

/* Light streaks sweeping along corridors (pathLength = 100) */
.mp-streak { fill: none; stroke-width: 1.5px; stroke-linecap: round; stroke-dasharray: 7 200; stroke-dashoffset: 7; animation: mpStreak 7s linear infinite; }
.mp-streak-b { stroke: #4f8dfb; }
.mp-streak-a { stroke: #fbbf24; }
.mp-streak-g { stroke: #34d399; }
@keyframes mpStreak {
  0% { stroke-dashoffset: 7; opacity: 0; }
  12% { opacity: 0.85; }
  85% { opacity: 0.85; }
  100% { stroke-dashoffset: -100; opacity: 0; }
}

/* Secondary place names */
.mp-city-sec {
  font: 600 9px/1 var(--font, system-ui, sans-serif);
  fill: #475569;
  letter-spacing: 0;
  paint-order: stroke;
  stroke: #ffffff;
  stroke-width: 2.4px;
  stroke-linejoin: round;
}

/* Precision hubs & nodes */
.mp-gold-ring { fill: none; stroke: #f7be38; stroke-width: 1.1; stroke-opacity: 0.95; }
.mp-ring { fill: #ffffff; stroke: #0038a8; stroke-width: 1.3; }
.mp-core { fill: #0038a8; }
.mp-node-sec { fill: #ffffff; stroke: #527bb8; stroke-width: 0.85; stroke-opacity: 0.75; }
.mp-node-amber { fill: #f59e0b; stroke: #ffffff; stroke-width: 0.85px; }

/* Concentric pulse on hubs */
.mp-pulse {
  fill: none;
  stroke: #0038a8;
  stroke-width: 0.8;
  animation: mpPulse 6s cubic-bezier(0.2, 0.8, 0.4, 1) infinite;
  transform-box: fill-box;
  transform-origin: center;
}
.mp-pulse-manila { animation-duration: 5s; }
.mp-pulse-amber {
  stroke: #f59e0b;
  animation: mpPulseAmber 5.5s cubic-bezier(0.2, 0.8, 0.4, 1) infinite;
}
@keyframes mpPulse {
  0% { r: 3.2px; opacity: 0.48; }
  60% { r: 11.5px; opacity: 0; }
  100% { r: 12px; opacity: 0; }
}
@keyframes mpPulseAmber {
  0% { r: 2.8px; opacity: 0.55; }
  60% { r: 9px; opacity: 0; }
  100% { r: 9.5px; opacity: 0; }
}

.mp-city {
  font: 700 10.5px/1 var(--font, system-ui, sans-serif);
  fill: #1e293b;
  letter-spacing: -0.01em;
  paint-order: stroke;
  stroke: #ffffff;
  stroke-width: 2.6px;
  stroke-linejoin: round;
}
.mp-city-hub { font-size: 11.5px; fill: #0f172a; }

.mp-cring { fill: rgba(255, 255, 255, 0.35); stroke: #9fb3cf; stroke-width: 0.6; }
.mp-cring-in { fill: none; stroke-dasharray: 1.5 2.5; }
.mp-cn { fill: #b7c6dc; } .mp-ce { fill: #d3deec; } .mp-cnn { fill: #6f8fc2; }
.mp-compass text { font: 700 8.5px/1 var(--font, system-ui, sans-serif); fill: #94a3b8; }

@media (max-width: 980px) { .hero-bg-routes { width: 100%; opacity: 0.42; } }
@media (prefers-reduced-motion: reduce) {
  .hero-morning { animation: none; }
  .mp-pulse, .mp-pulse-amber { animation: none; opacity: 0; }
  .mp-flow, .mp-streaks { display: none; }
}

/* map: bigger and a touch more present */
.hero-bg-routes { top: -5%; height: 110%; width: min(70%, 900px); }
.mp-road { stroke-opacity: 0.75; }
.mp-city { font-size: 10.5px; }

/* Map keeps the same safety margin as the text: its right edge lines up with the page content (search bar), never the browser edge */
.hero-bg-routes { right: max(var(--gutter), calc((100% - var(--max)) / 2 + var(--gutter))); left: auto; }
@media (max-width: 980px) { .hero-bg-routes { right: var(--gutter); width: calc(100% - 2 * var(--gutter)); } }

/* ================= Compact panoramic hero (styles v134) =================
   Less dead air above the pilot badge and below the benefits; benefits in one row on desktop.
   Map is anchored to the visible hero area (above the overlapping search bar) so no island is cut. */
@media (min-width: 981px) {
  .hero-inner { padding-top: 40px; padding-bottom: 96px; }
  .hero-trust { display: flex; flex-wrap: nowrap; align-items: flex-start; gap: 26px; margin-top: 24px; }
  .hero-trust li { align-items: flex-start; gap: 9px; line-height: 1.3; }
  .hero-trust li .ic { margin-top: 1px; }
  .hero-trust-txt { display: flex; flex-direction: column; gap: 2px; }
  .hero-trust-sep { display: none; }
  .hero-trust-desc { font-size: 13px; white-space: nowrap; }
  .hero-bg-routes { top: 8px; height: calc(100% - 48px); }
  .hero-backdrop { -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 90%, transparent 100%); mask-image: linear-gradient(180deg, #000 0%, #000 90%, transparent 100%); }
}
@media (max-width: 640px) { .hero-bg-routes { top: 0; height: calc(100% - 52px); } }
@media (max-width: 980px) and (min-width: 641px) {
  .hero-bg-routes { top: 0; height: calc(100% - 46px); }
  .hero-trust { display: flex; flex-wrap: wrap; gap: 12px 26px; }
  .hero-trust li { align-items: flex-start; gap: 9px; line-height: 1.3; }
  .hero-trust-txt { display: flex; flex-direction: column; gap: 2px; }
  .hero-trust-sep { display: none; }
  .hero-trust-desc { font-size: 13px; }
}

/* ================= Compact Hero (Flagship Minimalist Layout) ================= */
.hero.hero-compact {
  position: relative;
  overflow: visible;
  background: linear-gradient(180deg, #edf3fa 0%, #f6f9fc 60%, var(--bg) 100%);
  padding: var(--gutter) 0 var(--head-gap);
}

.hero.hero-compact::before {
  display: none !important;
}

.hero.hero-compact .hero-backdrop {
  display: none !important;
}

.hero.hero-compact .hero-search-wrap,
.hero.hero-compact .hero-search {
  position: relative;
  z-index: 10;
  margin-top: 0 !important;
}

.hero.hero-compact .hero-search-wrap .sb,
.hero.hero-compact .hero-search .sb {
  margin: 0;
  box-shadow: 0 16px 42px rgba(0, 40, 120, 0.12), 0 2px 8px rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 56, 168, 0.10);
}

.hero.hero-compact + .photo-story.ev {
  padding-top: var(--gutter);
}

@media (max-width: 980px) {
  .hero.hero-compact {
    padding: 16px 0 14px;
  }
  .hero.hero-compact .hero-search-wrap,
  .hero.hero-compact .hero-search {
    margin-top: 0 !important;
  }
  .hero.hero-compact + .photo-story.ev {
    padding-top: 20px;
  }
}

/* Cards — subtle diagonal gradient (solid, opaque base; ends in white) */
.role-sec-driver .rc,
.res-list .rc:not(.req-rc) {
  background: linear-gradient(135deg, rgba(0, 56, 168, 0.09) 0%, rgba(0, 56, 168, 0.025) 28%, #ffffff 62%, #ffffff 100%) #ffffff;
}
.role-sec-passenger .rc.req-rc,
.req-grid .rc.req-rc:not(.grp-rc) {
  background: linear-gradient(135deg, rgba(247, 190, 56, 0.16) 0%, rgba(247, 190, 56, 0.04) 28%, #ffffff 62%, #ffffff 100%) #ffffff;
}
.role-sec .rc .rc-foot, .res-list .rc .rc-foot, .req-grid .rc .rc-foot { background: transparent; }

/* Third role — Families & groups (whole-car requests): pastel green */
:root { --role-grp: #1f6b34; --role-grp-bg: #E2F4E1; --role-grp-bd: #b3dbb1; --role-grp-solid: #E2F4E1; --role-grp-line: #6bbd72; --role-grp-ink: #14532d; --role-grp-deep: #cdeccb; }
.role-group { background: var(--role-grp-bg); color: var(--role-grp); border-color: var(--role-grp-bd); }
.role-sec-group .role-line .eyebrow { color: var(--role-grp); }
.role-sec-group .req-offer-link.cta { background: var(--role-grp-bg); color: var(--role-grp); border: 1px solid var(--role-grp-bd); }
.role-sec-group .req-offer-link.cta:hover { background: var(--role-grp-deep); color: var(--role-grp-ink); }
.role-sec-group .req-empty .btn-primary,
.role-sec-group .role-actions .btn-primary { background: var(--role-grp-solid); border-color: var(--role-grp-bd); color: var(--role-grp-ink); }
.role-sec-group .role-actions .btn-primary:hover { background: var(--role-grp-deep); border-color: var(--role-grp-line); color: var(--role-grp-ink); }
.role-sec-group .link-arrow { background: var(--role-grp-bg); color: var(--role-grp); }
.grp-rc .rc-tl-dot-start { border-color: var(--role-grp-line); }
.grp-rc .rc-tl-dot-end { background: var(--role-grp-line); }
.grp-rc .rc-tl-origin .rc-tl-rail::after { background: linear-gradient(180deg, var(--role-grp-line) 0%, #E2F4E1 100%); }
.grp-rc .req-seat-pill { background: var(--role-grp-bg); border-color: var(--role-grp-bd); color: var(--role-grp); }
.grp-rc .rc-route.has-stops .rc-tl-origin .rc-tl-rail::after { background: var(--role-grp-line); }
.role-sec-group .rc.grp-rc,
.req-grid .rc.grp-rc { background: linear-gradient(135deg, rgba(226, 244, 225, 0.95) 0%, rgba(226, 244, 225, 0.35) 28%, #ffffff 62%, #ffffff 100%) #ffffff; }
.grp-rc:hover, .rc.req-rc.grp-rc:hover { border-color: rgba(107, 189, 114, 0.5); }
.grp-toggle { border: 1px solid var(--role-grp-bd); background: var(--role-grp-bg); border-radius: 14px; padding: 14px 16px; margin-bottom: 18px; }
.grp-toggle .value-ic { background: #fff; color: var(--role-grp); }
.grp-toggle input:checked + .switch { background: var(--role-grp-line); }
.grp-toggle input:focus-visible + .switch { outline-color: var(--role-grp-line); }
.form.is-group .btn-primary.btn-lg { background: var(--role-grp-solid); border-color: var(--role-grp-line); color: var(--role-grp-ink); }
.form.is-group .btn-primary.btn-lg:hover { background: var(--role-grp-deep); }
.form [hidden], .form.is-group [hidden] { display: none !important; }
.req-pills { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }

/* Search bar: "Search for <text>" free-text choice */
.pi-opt-free { border-top: 1px dashed rgba(148, 163, 184, 0.45); }
.pi-opt-free .pi-pin { color: var(--brand); }
.btn-grp { color: var(--role-grp); border-color: var(--role-grp-bd); }
.btn-grp:hover { background: var(--role-grp-bg); }

/* Find passengers: request-type badge + quick filter */
.req-type { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.req-type-pill { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; border: 1px solid #e2e8f0; background: #fff; color: #334155; font-size: 14px; font-weight: 600; text-decoration: none; }
.req-type-pill:hover { border-color: #94a3b8; color: #0f172a; }
.req-type-pill.on { background: #0038a8; border-color: #0038a8; color: #fff; }
.req-type-n { font-size: 12px; font-weight: 700; padding: 1px 7px; border-radius: 999px; background: #f1f5f9; color: #475569; }
.req-type-pill.on .req-type-n { background: rgba(255, 255, 255, .22); color: #fff; }

/* Role badge: single component for Home + Find passengers (and section heads) */
.role-pill { gap: 6px; padding: 5px 12px 5px 9px; font-size: 12.5px; font-weight: 600; letter-spacing: .005em; box-shadow: inset 0 0 0 1px rgba(255,255,255,.6); }
.role-pill-sm { font-size: 11.5px; padding: 3px 10px 3px 8px; gap: 5px; }
.role-pill .ic { width: 15px; height: 15px; stroke-width: 1.8; }
.role-pill-sm .ic { width: 14px; height: 14px; }
.role-driver { border-color: rgba(201, 218, 255, .85); }
.role-passenger { border-color: var(--role-pass-bd); }
.role-group { border-color: var(--role-grp-bd); }
.req-rc .req-seat-pill .ic { color: inherit; }
.res-main .req-type { margin: 4px 0 16px; }

/* The search-bar date picker used as a form field (offer a ride, edit ride, driver documents) */
.cal-field { width: 100%; border: 1.5px solid var(--line-2); border-radius: var(--radius-s); padding: 10px 14px; background: var(--surface); font-size: 15.5px; transition: border-color .15s ease, box-shadow .15s ease; cursor: pointer; }
.cal-field:hover { border-color: #b6c2d6; }
.cal-field:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3.5px var(--brand-50); }
.cal-field.invalid { border-color: #e11d48; box-shadow: 0 0 0 3.5px rgba(225, 29, 72, .12); }
.cal-field .pi-input-row { gap: 10px; }
.cal-ic { display: grid; place-items: center; color: var(--brand); flex: none; }
.cal-ic .ic { width: 19px; height: 19px; }
.cal-field .pi-trigger-input, .driver-docs .cal-field .pi-trigger-input { border: 0 !important; box-shadow: none !important; background: transparent !important; padding: 1px 0 !important; height: auto; min-height: 0; border-radius: 0; cursor: pointer; }
.cal-field .pi-trigger-input:focus { outline: none; }
.cal-field .pi-trigger-input::placeholder { color: var(--muted); font-weight: 600; }
.cal-field .pi-popover-date { left: -1.5px; top: calc(100% + 8px); width: min(390px, calc(100vw - 32px)); cursor: default; }
.cal-nav-side { display: flex; gap: 6px; min-width: 30px; }
.pi-cal-arrow.cal-year { font-size: 17px; font-weight: 800; line-height: 1; padding: 0 0 2px; }

/* ===== Notification hub: bell in the navbar + panel ===== */
.nav-bell-wrap { position: relative; display: inline-flex; margin-left: 2px; }
.nav-bell-wrap[hidden] { display: none; }
.nav-bell { position: relative; display: grid; place-items: center; width: 38px; height: 38px; padding: 0; border-radius: 50%; border: 1px solid #e2e8f0; background: #fff; color: #334155; cursor: pointer; box-shadow: 0 1px 3px rgba(0, 0, 0, .04); transition: all .2s cubic-bezier(.16, 1, .3, 1); }
.nav-bell svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transform-origin: 50% 4px; }
.nav-bell:hover, .nav-bell[aria-expanded="true"] { border-color: var(--brand); background: var(--brand-50); color: var(--brand); }
.nav-bell:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.nav-bell.has-new svg { animation: bellRing 1.6s ease-in-out 1; }
@keyframes bellRing { 0%, 100% { transform: rotate(0); } 10%, 30% { transform: rotate(14deg); } 20%, 40% { transform: rotate(-12deg); } 50% { transform: rotate(0); } }
@media (prefers-reduced-motion: reduce) { .nav-bell.has-new svg { animation: none; } }
.nav-bell-badge { position: absolute; top: -4px; right: -4px; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 999px; background: #e11d48; color: #fff; font-size: 11px; font-weight: 800; line-height: 19px; text-align: center; border: 2px solid #fff; box-sizing: content-box; box-shadow: 0 2px 6px rgba(225, 29, 72, .35); }
.nav-bell-badge[hidden] { display: none; }
.nav-bell.has-pending::after { content: ""; position: absolute; top: 2px; right: 2px; width: 9px; height: 9px; border-radius: 50%; background: #f59e0b; border: 2px solid #fff; box-sizing: content-box; opacity: .75; }

.hub-pop { position: fixed; top: 76px; right: max(16px, calc((100vw - var(--max)) / 2 + var(--gutter))); width: 400px; max-width: calc(100vw - 24px); max-height: min(640px, calc(100dvh - 96px)); display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line-2); border-radius: 18px; box-shadow: 0 24px 60px rgba(15, 23, 42, .18), 0 4px 14px rgba(15, 23, 42, .08); z-index: 120; overflow: hidden; animation: piPopoverIn .18s var(--ease); transform-origin: top right; }
.hub-pop[hidden] { display: none; }
.hub-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px 6px; }
.hub-head strong { font-size: 17px; letter-spacing: -.01em; color: var(--ink); }
.hub-link { background: none; border: 0; padding: 4px 2px; font: inherit; font-size: 13px; font-weight: 700; color: var(--brand); cursor: pointer; }
.hub-link:hover { text-decoration: underline; }
.hub-tabs { display: flex; gap: 6px; padding: 8px 14px 10px; border-bottom: 1px solid var(--line); }
.hub-tab { display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border-radius: 999px; border: 1px solid transparent; background: transparent; font: inherit; font-size: 13.5px; font-weight: 700; color: #475569; cursor: pointer; }
.hub-tab:hover { background: var(--soft); color: var(--ink); }
.hub-tab.on { background: var(--brand-50); color: var(--brand); border-color: rgba(0, 56, 168, .18); }
.hub-tab-n { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--brand); color: #fff; font-size: 11.5px; font-weight: 800; line-height: 20px; text-align: center; }
.hub-scroll { overflow-y: auto; overscroll-behavior: contain; flex: 1; min-height: 140px; }
.hub-sec-h { display: flex; align-items: center; gap: 8px; margin: 0; padding: 14px 18px 6px; font-size: 11.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: #64748b; }
.hub-sec-action { color: #b45309; }
.hub-sec-action span { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: #fef3c7; color: #92400e; font-size: 11px; line-height: 18px; text-align: center; letter-spacing: 0; }
.hub-list { list-style: none; margin: 0; padding: 0; }
.hub-item { border-bottom: 1px solid var(--line); }
.hub-item:last-child { border-bottom: 0; }
.hub-row { display: flex; align-items: flex-start; gap: 12px; padding: 12px 18px; color: inherit; text-decoration: none; transition: background-color .12s ease; }
a.hub-row:hover { background: var(--soft); }
a.hub-row:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.hub-row.unread { background: linear-gradient(90deg, rgba(0, 56, 168, .05), transparent 70%); }
.hub-ic { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; flex: none; }
.hub-ic .ic { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.hub-tone-blue { background: #edf3ff; color: #0038a8; }
.hub-tone-green { background: #ecfdf5; color: #047857; }
.hub-tone-rose { background: #fff1f2; color: #be123c; }
.hub-tone-amber { background: #fffbeb; color: #b45309; }
.hub-row .avatar { flex: none; }
.hub-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.hub-txt strong { font-size: 14px; line-height: 1.3; color: var(--ink); }
.hub-body { font-size: 13px; line-height: 1.35; color: #64748b; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.hub-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex: none; padding-top: 2px; }
.hub-meta time { font-size: 11.5px; font-weight: 600; color: #94a3b8; white-space: nowrap; }
.hub-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--brand); }
.hub-actions { display: flex; gap: 8px; padding: 0 18px 14px 66px; }
.hub-actions .btn { min-height: 34px; padding: 6px 14px; font-size: 13px; }
.hub-empty { display: grid; justify-items: center; gap: 6px; padding: 40px 28px 44px; text-align: center; }
.hub-empty-ic { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--brand-50); color: var(--brand); margin-bottom: 4px; }
.hub-empty-ic .ic { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.hub-empty strong { font-size: 15.5px; color: var(--ink); }
.hub-empty p { margin: 0; font-size: 13.5px; color: #64748b; max-width: 28ch; }
.hub-foot { display: flex; justify-content: space-between; gap: 6px; padding: 8px 12px; border-top: 1px solid var(--line); background: #fafbfd; }
.hub-foot a { display: inline-flex; align-items: center; gap: 6px; padding: 8px 10px; border-radius: 10px; font-size: 13px; font-weight: 700; color: #334155; text-decoration: none; }
.hub-foot a:hover { background: var(--brand-50); color: var(--brand); }
.hub-foot .ic { width: 15px; height: 15px; }
@media (max-width: 680px) {
  .nav-bell-wrap { margin-left: 0; }
  .hub-pop { top: 64px; left: 12px; right: 12px; width: auto; max-height: calc(100dvh - 150px); transform-origin: top center; }
  .hub-actions { padding-left: 66px; }
}

/* ---- Find a ride: 2-column card grid, ambient background, whole-card click (same standard as Find passengers) ---- */
body { overflow-x: clip; }
.res-list.is-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
.res-list.is-grid > :not(.rc) { grid-column: 1 / -1; }
.res-list.is-grid > .res-day { margin-top: 8px; }
.res-list.is-grid .rc { height: 100%; }
.res-list.is-grid .rc-top { gap: 12px; padding: 14px 16px 12px; }
.res-list.is-grid .rc-foot { flex-wrap: wrap; row-gap: 8px; padding: 12px 16px; margin-top: auto; }
.res-list.is-grid .rc-icons { justify-content: flex-start; }
.res-list.is-grid .rc-driver { min-width: 0; flex: 1 1 180px; }
.res-list.is-grid .rc-driver-line { flex-wrap: wrap; row-gap: 4px; }
.res-list.is-grid .rc-note { margin: -4px 16px 12px; }
.res-list.is-grid .rc-role, .req-grid .rc-role { padding: 12px 16px 0; }
@media (max-width: 760px) { .res-list.is-grid { grid-template-columns: 1fr; } }

/* Every card is one big click target with a quiet hover */
.rc, .rc.req-rc { cursor: pointer; position: relative; }
.rc:hover, .rc.req-rc:hover { border-color: #cbd5e1; box-shadow: 0 4px 12px rgba(10, 25, 47, 0.08), 0 2px 4px rgba(10, 25, 47, 0.04); transform: translateY(-1px); }
.rc:focus-visible, .rc:focus-within { outline: 2px solid var(--brand); outline-offset: 2px; }
.rc.req-rc.grp-rc:hover { border-color: #cbd5e1; }
.rc-stretch::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.rc.req-rc:focus-within { outline: 2px solid var(--role-pass-deep); }
.rc.req-rc.grp-rc:focus-within { outline-color: var(--role-grp); }

/* Soft ambient gradient behind the results area (colour = the role of the page) */
.amb { position: relative; isolation: isolate; }
.amb::before { content: ""; position: absolute; z-index: -1; top: 0; height: 560px; left: calc(50% - 50vw); width: 100vw; pointer-events: none; }
.amb-driver::before { background: radial-gradient(900px 420px at 18% 0%, rgba(0, 56, 168, 0.10), transparent 72%), radial-gradient(760px 380px at 88% 12%, rgba(0, 56, 168, 0.055), transparent 72%), linear-gradient(180deg, rgba(237, 243, 255, 0.55), rgba(250, 251, 253, 0) 100%); }
.amb-pass::before { background: radial-gradient(900px 420px at 18% 0%, rgba(247, 190, 56, 0.16), transparent 72%), radial-gradient(760px 380px at 88% 12%, rgba(226, 244, 225, 0.55), transparent 72%), linear-gradient(180deg, rgba(255, 246, 220, 0.5), rgba(250, 251, 253, 0) 100%); }
.amb::before { top: -60px; height: 620px; -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 90px, #000 55%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 90px, #000 55%, transparent 100%); }
.sb-nopax .sb-date { flex: 1.15; }

/* ---- Support KaSabay: footer strip, FAQ link and modal ---- */
body.modal-open { overflow: hidden; }
.footer-support-wrap { max-width: var(--max); margin: 0 auto; padding: 28px var(--gutter) 0; }
.footer-support { display: flex; align-items: center; gap: 16px; padding: 16px 20px; border-radius: 20px; border: 1px solid rgba(244, 114, 142, 0.28); background: linear-gradient(120deg, rgba(255, 228, 234, 0.75) 0%, rgba(237, 243, 255, 0.7) 55%, #ffffff 100%); }
.fs-heart { flex: none; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: #e11d48; box-shadow: 0 1px 3px rgba(10, 25, 47, .08); }
.fs-heart .ic, .fs-btn .ic { width: 20px; height: 20px; fill: currentColor; stroke: currentColor; stroke-width: 1.4; stroke-linejoin: round; }
.fs-text { display: grid; gap: 2px; min-width: 0; flex: 1; }
.fs-text strong { font-size: 15px; color: var(--ink); }
.fs-text span { font-size: 13.5px; color: var(--muted); }
.fs-pay { display: flex; gap: 6px; flex: none; }
.fs-chip { font-size: 11.5px; font-weight: 800; letter-spacing: .04em; padding: 4px 10px; border-radius: 999px; background: #fff; border: 1px solid var(--line-2); color: #334155; }
.fs-btn { flex: none; display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 999px; background: var(--brand); color: #fff; font-weight: 700; font-size: 14px; text-decoration: none; box-shadow: 0 6px 16px -6px rgba(0, 56, 168, .5); transition: transform .15s ease, background .15s ease; }
.fs-btn:hover { background: var(--brand-600); transform: translateY(-1px); }
.fs-btn .ic { width: 17px; height: 17px; color: #fecdd3; }
@media (max-width: 760px) { .footer-support { flex-wrap: wrap; } .fs-text { flex-basis: calc(100% - 70px); } .fs-pay { order: 3; } .fs-btn { order: 4; width: 100%; justify-content: center; } }

.support-inline { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--brand); text-decoration: none; white-space: nowrap; }
.support-inline .ic { width: 15px; height: 15px; fill: #e11d48; stroke: #e11d48; stroke-width: 1.4; }
.support-inline:hover { text-decoration: underline; }

.sup-overlay { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 20px; background: rgba(15, 23, 42, 0.4); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); opacity: 0; transition: opacity .16s ease; overflow-y: auto; }
.sup-overlay.on { opacity: 1; }
.sup-box { position: relative; width: min(760px, 100%); border-radius: 28px; padding: 32px 32px 24px; background: linear-gradient(135deg, rgba(237, 243, 255, 0.95) 0%, rgba(255, 246, 220, 0.5) 30%, #ffffff 62%) #fff; box-shadow: 0 30px 80px -20px rgba(10, 25, 47, 0.45), 0 0 0 1px rgba(13, 34, 64, 0.06); transform: translateY(8px) scale(.985); transition: transform .18s var(--ease); outline: none; }
.sup-overlay.on .sup-box { transform: none; }
.sup-x { position: absolute; top: 14px; right: 14px; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line-2); background: #fff; color: #475569; display: grid; place-items: center; cursor: pointer; transition: background .15s ease; }
.sup-x:hover { background: #f1f5f9; color: var(--ink); }
.sup-x .ic { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.sup-head { text-align: center; max-width: 560px; margin: 0 auto 22px; }
.sup-heart { width: 46px; height: 46px; border-radius: 50%; display: inline-grid; place-items: center; background: #fff1f2; color: #e11d48; margin-bottom: 10px; }
.sup-heart .ic { width: 22px; height: 22px; fill: currentColor; stroke: currentColor; stroke-width: 1.4; stroke-linejoin: round; }
.sup-head h2 { margin: 0 0 8px; font-size: 26px; letter-spacing: -0.02em; }
.sup-head p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.55; }
.sup-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.sup-grid.one { grid-template-columns: minmax(0, 360px); justify-content: center; }
.sup-card { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 18px; border-radius: 22px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.sup-card-top { width: 100%; display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.sup-badge { font-size: 10.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; }
.sup-badge-wallet { background: #eef4fb; color: #2c4a78; border: 1px solid #c9daff; }
.sup-badge-global { background: var(--role-pass-bg, #fff6dc); color: var(--role-pass, #8a5a00); border: 1px solid var(--role-pass-bd, #f4cf72); }
.sup-brand { font-size: 20px; letter-spacing: -0.02em; font-weight: 800; }
.sup-brand-gcash { color: #0a5cff; }
.sup-brand-paypal { color: #0b2a6f; }
.sup-qr { padding: 10px; border-radius: 18px; background: #fff; border: 1px dashed #cbd5e1; }
.sup-qr img { display: block; width: min(220px, 60vw); height: auto; border-radius: 10px; }
.sup-cap { margin: 10px 0 2px; font-weight: 800; font-size: 14px; color: var(--ink); }
.sup-help { margin: 4px 0 0; font-size: 13px; color: var(--muted); line-height: 1.5; }
.sup-pp-title { margin: 10px 0 2px; font-weight: 800; font-size: 17px; color: var(--ink); }
.sup-paypal .sup-chips { justify-content: center; margin: 14px 0; }
.sup-paypal .sup-pp-btn { margin-top: auto; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.sup-pp-btn .ic { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sup-note { display: flex; gap: 10px; align-items: flex-start; margin-top: 16px; padding: 12px 14px; border-radius: 16px; background: #fffbeb; border: 1px solid #fde68a; color: #7c4a03; }
.sup-note .ic { flex: none; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; margin-top: 1px; }
.sup-note p { margin: 0; font-size: 13px; line-height: 1.5; }
@media (max-width: 640px) {
  .sup-overlay { align-items: end; padding: 0; }
  .sup-box { width: 100%; border-radius: 26px 26px 0 0; padding: 24px 16px 18px; transform: translateY(24px); max-height: 94vh; overflow-y: auto; }
  .sup-grid { grid-template-columns: 1fr; }
}

/* ---- delete account (Profile) ---- */
.del-card { border-color: #f1c4c4; background: #fffafa; }
.del-form { margin-top: 12px; }
.del-list { margin: 6px 0 14px; padding-left: 18px; display: grid; gap: 4px; color: var(--muted, #475569); }
.del-ack { display: flex; gap: 10px; align-items: flex-start; margin: 12px 0; cursor: pointer; }
.del-ack input { margin-top: 3px; }
.del-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 12px; }
.btn.btn-danger-solid { background: var(--red, #c62828); color: #fff; border: 0; }
.btn.btn-danger-solid:disabled { opacity: .45; cursor: not-allowed; }
.del-form .error a { font-weight: 700; }

/* ---- Offer a ride: single-page form (same look as Ask for a ride) ---- */
.form .stop-row .pi { flex: 1; min-width: 0; }
.form .stack { display: grid; gap: 10px; }
.form .stops-edit:empty { display: none; }

/* ---- About KaSabay + Home teaser ---- */
.about-story h2 { margin-top: 0; }
.ab-mv { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 8px; }
.ab-mv-card { background: linear-gradient(160deg, #eef3ff 0%, #fff 70%); border: 1px solid #d6e0f7; border-radius: 16px; padding: 20px; }
.ab-mv-card:nth-child(2) { background: linear-gradient(160deg, #fff6dc 0%, #fff 70%); border-color: #f4cf72; }
.ab-mv-card .eyebrow { display: block; margin-bottom: 8px; }
.ab-mv-card p { margin: 0; font-size: 17px; line-height: 1.5; font-weight: 600; color: var(--ink); }
.ab-grid { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; }
.ab-card { background: #fff; border: 1px solid var(--line, #e2e8f0); border-radius: 16px; padding: 18px; display: grid; gap: 8px; align-content: start; }
.ab-card p { margin: 0; }
.ab-steps { margin-top: 18px; }
.about-support { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; background: linear-gradient(135deg, #fff1f3 0%, #f4f7ff 100%); border: 1px solid #f4c9d2; border-radius: 16px; padding: 18px; margin-top: 8px; }
.about-support h2 { margin: 0 0 4px; font-size: 20px; }
.about-support p { margin: 0; }
.about-foot { margin-top: 18px; }
.about-sign { font-weight: 700; margin-top: 4px; }
.about-strip { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; background: linear-gradient(135deg, #eef3ff 0%, #fff 70%); border: 1px solid #d6e0f7; border-radius: 18px; padding: 22px; }
.about-strip-text { flex: 1 1 320px; }
.about-strip-text h2 { margin: 0 0 6px; font-size: 22px; }
.about-strip-text p { margin: 0; }
@media (max-width: 640px) { .ab-mv { grid-template-columns: 1fr; } }
#safety, #faq { scroll-margin-top: 84px; }

/* ---- Contact & feedback ---- */
.footer-contact { display: inline-flex; align-items: center; gap: 7px; color: var(--brand) !important; font-weight: 700; }
.footer-contact .ic { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.footer-new { font-size: 10px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; padding: 2px 7px; border-radius: 999px; background: #d9f3ee; color: #0e6b5d; }
.ct-box { width: min(520px, 100%); }
.ct-form { display: grid; gap: 14px; }
.ct-kinds { display: flex; gap: 8px; flex-wrap: wrap; }
.ct-kind { display: inline-flex; align-items: center; gap: 7px; padding: 9px 14px; border-radius: 999px; border: 1px solid var(--line-2, #d7dee8); background: #fff; font-weight: 700; font-size: 14px; color: #334155; cursor: pointer; }
.ct-kind .ic { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ct-kind.on { background: var(--brand-50, #eef3ff); border-color: var(--brand, #0038a8); color: var(--brand, #0038a8); }
.ct-form textarea { min-height: 120px; resize: vertical; }
.ct-count { align-self: flex-end; }
.ct-check { display: flex; gap: 10px; align-items: center; cursor: pointer; }
.ct-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.ct-note { text-align: center; margin: 0; }
.ct-done { text-align: center; display: grid; gap: 10px; justify-items: center; padding: 18px 0 8px; }
.ct-done h2 { margin: 0; }
.ct-done p { margin: 0 0 8px; }
.ct-box .sup-head { margin-bottom: 16px; }
.ct-box .sup-heart, .ct-done .sup-heart { background: #eef3ff; color: var(--brand, #0038a8); }
.ct-box .sup-heart .ic, .ct-done .sup-heart .ic { fill: none; stroke-width: 2; stroke-linecap: round; }
.footer-contact { white-space: nowrap; }
@media (max-width: 520px) { .footer-new { display: none; } }

/* ---- Advertise with us (footer) + partnership fields ---- */
.footer-ads { margin-top: -2px; }
.footer-partner { font-size: 10px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; padding: 2px 7px; border-radius: 6px; background: #fff6dc; color: #8a5a00; border: 1px solid #f4cf72; }
@media (max-width: 520px) { .footer-partner { display: none; } }
.ct-biz { display: grid; gap: 12px; }
.ct-biz[hidden], .ct-check[hidden] { display: none; }
.ct-biz-note { margin: 0; }


/* ---------- photography ---------- */
.ph { position: relative; margin: 0; overflow: hidden; border-radius: 20px; background: #e6edf8; box-shadow: 0 10px 30px -14px rgba(20, 40, 80, 0.35); }
.ph img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ph figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 44px 18px 14px; color: #fff; font-weight: 600; font-size: 16px; line-height: 1.3; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.35); background: linear-gradient(180deg, rgba(10, 20, 40, 0) 0%, rgba(10, 20, 40, 0.6) 100%); }
.photo-story .sec-head { margin-bottom: 18px; }
.ps-grid { display: grid; gap: 14px; grid-template-columns: 1.4fr 1fr; grid-template-rows: 1fr 1fr; }
.ps-main { grid-row: 1 / span 2; min-height: 420px; }
.ps-a, .ps-b { min-height: 203px; }
.ps-cta { margin-top: 18px; display: flex; gap: 10px; flex-wrap: wrap; }
.ph-wide { aspect-ratio: 21 / 8; }
.ab-photo { margin-top: 6px; margin-bottom: 26px; }
.ph-band { aspect-ratio: 21 / 6; margin: -4px 0 18px; }
@media (max-width: 720px) {
  .ps-grid { grid-template-columns: 1fr; grid-template-rows: none; }
  .ps-main { grid-row: auto; min-height: 0; aspect-ratio: 4 / 3.4; }
  .ps-a, .ps-b { min-height: 0; aspect-ratio: 16 / 10; }
  .ph-wide { aspect-ratio: 16 / 9; }
  .ph-band { aspect-ratio: 16 / 6; border-radius: 16px; }
  .ph figcaption { font-size: 15px; }
}

.ph-highway.ph-band img { object-position: 50% 82% !important; }


/* ---------- community stories (design mock) ---------- */
.cs-section { position: relative; margin-top: 56px; padding: 56px 0 120px; overflow: hidden; isolation: isolate; background: linear-gradient(180deg, #f6f9ff 0%, #f1f6ff 70%, #f7faff 100%); }
.cs-section::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: radial-gradient(rgba(98, 120, 160, 0.22) 1.1px, transparent 1.3px); background-size: 26px 26px; -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 100%); mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 100%); }
.cs-section::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 110px; z-index: -1; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 110' preserveAspectRatio='none'%3E%3Cpath d='M0 108 L120 70 L180 86 L300 30 L380 70 L470 56 L560 92 L700 40 L800 80 L920 22 L1010 70 L1120 52 L1230 84 L1330 44 L1440 78' fill='none' stroke='%23c3cfe3' stroke-width='1.4' stroke-linejoin='round'/%3E%3C/svg%3E") center bottom / 100% 100% no-repeat; }
.cs-mocknote { position: absolute; top: 16px; right: max(16px, calc((100% - 1160px) / 2)); font-size: 10.5px; line-height: 1; font-weight: 600; color: #8a6d2f; background: rgba(255, 244, 214, 0.85); padding: 5px 10px; border-radius: 999px; }
.cs-inner .eyebrow { color: #b7791f; }
.cs-inner h2 { margin: 6px 0 6px; font-size: clamp(28px, 4.2vw, 44px); letter-spacing: -0.02em; }
.cs-sub { margin: 0 0 30px; font-size: 18px; color: #5a6b86; }
.cs-grid { display: grid; gap: 22px; grid-template-columns: repeat(3, 1fr); }
.cs-card { display: flex; flex-direction: column; padding: 12px; border-radius: 22px; background: #fff; border: 1px solid #e3eaf6; box-shadow: 0 16px 36px -22px rgba(30, 60, 120, 0.35), 0 2px 6px rgba(30, 60, 120, 0.05); }
.cs-photo { position: relative; border-radius: 14px; overflow: hidden; aspect-ratio: 545 / 395; background: #e8eef8; }
.cs-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cs-sample { position: absolute; top: 8px; right: 8px; font-size: 9.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #8a6d2f; background: rgba(255, 255, 255, 0.82); padding: 3px 7px; border-radius: 6px; }
.cs-body { display: flex; flex-direction: column; gap: 10px; padding: 16px 8px 10px; }
.cs-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.cs-who { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.cs-who strong { font-size: 19px; letter-spacing: -0.01em; }
.cs-role { font-size: 15px; color: #6b7a93; }
.cs-verified { display: inline-flex; align-items: center; gap: 4px; padding: 4px 11px 4px 8px; border-radius: 999px; font-size: 13px; font-weight: 600; color: #0c6b43; background: #e3f7ec; white-space: nowrap; }
.cs-verified svg { width: 14px; height: 14px; }
.cs-route { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0; font-size: 15px; color: #35456a; }
.cs-route b { font-weight: 500; color: #0038a8; }
.cs-route svg { width: 16px; height: 16px; flex: none; color: #0038a8; }
.cs-text { margin: 2px 0 0; font-size: 16.5px; line-height: 1.55; color: #1c2a45; }
@media (max-width: 900px) {
  .cs-grid { grid-template-columns: 1fr; max-width: 520px; }
  .cs-section { padding: 44px 0 100px; }
}

/* Admin · Messages: filters, batch actions, confirm dialog, empty state */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.msg-toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 14px 0 6px; }
.msg-search { flex: 1 1 260px; min-width: 200px; display: flex; align-items: center; gap: 8px; background: #fff; border: 1.5px solid var(--line-2); border-radius: 12px; padding: 0 12px; color: var(--muted); }
.msg-search:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-50); }
.msg-search-input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; padding: 10px 0; font: inherit; font-size: 14.5px; color: var(--ink); }
.msg-select { border: 1.5px solid var(--line-2); border-radius: 12px; background: #fff; padding: 9px 12px; font: inherit; font-size: 14.5px; color: var(--ink-2); }
.msg-syncline { display: flex; align-items: center; gap: 4px; margin: 6px 2px 10px; }
.msg-refresh { border: 0; background: transparent; color: var(--muted); cursor: pointer; padding: 4px; border-radius: 8px; display: inline-flex; }
.msg-refresh:hover { color: var(--brand); background: var(--brand-50); }
.msg-bulk { position: sticky; top: 8px; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; background: #fff; border: 1.5px solid var(--brand); border-radius: 14px; padding: 10px 14px; box-shadow: var(--shadow); margin-bottom: 12px; }
.msg-bulk[hidden] { display: none; }
.msg-bulk-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.msg-btn-ok { background: #059669; border-color: #059669; color: #fff; }
.msg-btn-ok:hover { background: #047857; }
.msg-btn-del { background: #fff1f2; color: #be123c; border: 1px solid #fecdd3; }
.msg-btn-del:hover:not(:disabled) { background: #ffe4e6; }
.msg-btn-del:disabled, .msg-bulk .btn:disabled { opacity: 0.5; cursor: not-allowed; }
.msg-selectall { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ink-2); margin: 2px 2px 0; cursor: pointer; }
.msg-selectall[hidden] { display: none; }
.msg-card-top { display: flex; gap: 12px; align-items: flex-start; }
.msg-card-main { flex: 1; min-width: 0; display: grid; gap: 8px; overflow-wrap: anywhere; }
.msg-check, .msg-selectall input { width: 18px; height: 18px; accent-color: var(--brand); margin-top: 2px; flex: none; }
.msg-card.is-sel { border-color: var(--brand); background: var(--brand-50); }
.msg-card mark, .msg-card-main mark { background: #fff1a8; color: inherit; border-radius: 3px; padding: 0 1px; }
.msg-st { margin-left: 8px; font-size: 12px; font-weight: 700; border-radius: 999px; padding: 1px 8px; background: #eef2f7; color: var(--ink-2); }
.msg-st-new { background: var(--brand-50); color: var(--brand); }
.msg-st-done { background: var(--ok-50); color: var(--ok); }
.msg-empty { display: grid; justify-items: center; gap: 8px; text-align: center; padding: 56px 16px; }
.msg-empty-ic { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--brand-50); color: var(--brand); }
.msg-empty-ic .ic { width: 30px; height: 30px; }
.msg-empty strong { font-size: 18px; color: var(--ink); }
.msg-empty p { margin: 0; max-width: 46ch; }
.msg-empty-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-top: 6px; }
.msg-confirm { max-width: 440px; }
.msg-confirm-body { padding: 24px 24px 8px; display: grid; gap: 8px; justify-items: center; text-align: center; }
.msg-confirm-body h3 { margin: 0; font-size: 19px; }
.msg-confirm-body p { margin: 0; color: var(--ink-2); font-size: 14.5px; line-height: 1.5; }
.msg-confirm-ic { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: #fff1f2; color: #be123c; }
.msg-confirm-actions { display: flex; justify-content: flex-end; gap: 8px; padding: 16px 24px 20px; }
.msg-danger-solid { background: #be123c; border-color: #be123c; color: #fff; }
.msg-danger-solid:hover { background: #9f1239; }
@media (max-width: 560px) {
  .msg-bulk { position: static; }
  .msg-bulk-btns .btn { flex: 1 1 auto; justify-content: center; }
  .msg-confirm-actions { flex-direction: column-reverse; }
  .msg-confirm-actions .btn { width: 100%; }
}

/* ---------- Operations Center: left menu + Dashboard / Bird's-Eye View / Reviews ---------- */
.ops-shell { display: grid; grid-template-columns: 264px minmax(0, 1fr); max-width: 1520px; margin: 0 auto; align-items: start; }
.ops-side { position: sticky; top: 68px; height: calc(100vh - 68px); overflow-y: auto; display: flex; flex-direction: column; justify-content: space-between; gap: 12px; background: #fff; border-right: 1px solid var(--line-2); padding: 18px 12px 14px; }
.ops-side-head { display: flex; align-items: center; gap: 8px; padding: 2px 8px 10px; }
.ops-side-head strong { font-size: 19px; letter-spacing: -0.01em; color: var(--ink); }
.ops-side-tag { font-size: 10.5px; font-weight: 800; letter-spacing: 0.08em; color: var(--brand); background: var(--brand-50); border-radius: 999px; padding: 3px 8px; }
.ops-nav { display: grid; gap: 14px; align-content: start; flex: 1; }
.ops-nav-label { font-size: 11px; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase; color: #94a3b8; padding: 0 10px 5px; }
.ops-nav-link { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 10px; color: var(--ink-2); font-weight: 600; font-size: 14.5px; text-decoration: none; border: 1px solid transparent; }
.ops-nav-link:hover { background: #f4f7fb; color: var(--ink); }
.ops-nav-link:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.ops-nav-link.on { background: var(--brand-50); color: var(--brand); border-color: rgba(0, 56, 168, 0.15); }
.ops-nav-link .ic { color: #64748b; }
.ops-nav-link.on .ic { color: var(--brand); }
.ops-nav-text { flex: 1; min-width: 0; }
.ops-nav-n { margin-left: auto; background: #fde8ea; color: #b0121f; }
.ops-nav-live { font-size: 9.5px; font-weight: 800; letter-spacing: 0.06em; color: #047857; background: #e6f6ef; border-radius: 999px; padding: 2px 6px; }
.ops-side-foot { display: grid; gap: 10px; border-top: 1px solid var(--line); padding: 12px 6px 0; }
.ops-env { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 700; color: var(--ink-2); }
.ops-env-dot { width: 8px; height: 8px; border-radius: 50%; background: #f59e0b; }
.ops-env.prod .ops-env-dot { background: #10b981; }
.ops-who { display: flex; align-items: center; gap: 10px; }
.ops-who > div { display: grid; line-height: 1.25; min-width: 0; }
.ops-who strong { font-size: 13.5px; }
.ops-who-av { width: 34px; height: 34px; border-radius: 50%; background: var(--brand); color: #fff; font-size: 12px; font-weight: 800; display: grid; place-items: center; flex: none; }
.ops-lock { justify-content: center; }
.ops-back { font-size: 13px; color: var(--muted); text-decoration: none; text-align: center; }
.ops-back:hover { color: var(--brand); }
.ops-main { min-width: 0; padding: 14px 24px 40px; }
.ops-topbar { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; min-height: 36px; }
.ops-menu-btn { display: none; }
.ops-crumbs { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); flex-wrap: wrap; }
.ops-crumbs strong { color: var(--ink); }
.ops-crumbs .sep { color: #cbd5e1; }
.ops-scrim { position: fixed; inset: 0; background: rgba(15, 23, 42, 0.5); z-index: 8999; }
.ops-scrim[hidden] { display: none; }
@media (max-width: 900px) {
  .ops-shell { grid-template-columns: minmax(0, 1fr); }
  .ops-side { position: fixed; z-index: 9000; left: 0; top: 0; bottom: 0; width: min(300px, 86vw); height: auto; transform: translateX(-102%); transition: transform 0.22s var(--ease, ease); box-shadow: 0 0 40px rgba(0, 0, 0, 0.25); }
  .ops-side.open { transform: none; }
  .ops-menu-btn { display: inline-flex; }
  .ops-main { padding: 12px 16px 32px; }
  body.ops-menu-open { overflow: hidden; }
}
@media (prefers-reduced-motion: reduce) { .ops-side { transition: none; } }
.ops-sync { display: inline-flex; align-items: center; gap: 4px; }
.ops-grid-2 { display: grid; grid-template-columns: 1fr 1.4fr; gap: 12px; margin-bottom: 12px; align-items: start; }
.ops-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; align-items: start; margin-bottom: 12px; }
@media (max-width: 1100px) { .ops-grid-3 { grid-template-columns: 1fr; } }
@media (max-width: 900px) { .ops-grid-2 { grid-template-columns: 1fr; } }
.ops-card { padding: 16px; display: grid; gap: 12px; align-content: start; }
.ops-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.ops-note { margin: 0; }
.ops-stack { display: flex; gap: 3px; height: 38px; border-radius: 10px; overflow: hidden; }
.ops-seg { display: grid; place-items: center; min-width: 0; font-size: 12px; font-weight: 700; color: #fff; padding: 0 6px; }
.ops-seg span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ops-seg.sched { background: #0038a8; }
.ops-seg.dep { background: #64748b; }
.ops-seg.canc { background: #be123c; }
.ops-table-wrap { overflow-x: auto; }
.ops-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.ops-table th { text-align: left; font-size: 11.5px; letter-spacing: 0.05em; text-transform: uppercase; color: #94a3b8; padding: 6px 8px; border-bottom: 1px solid var(--line-2); }
.ops-table td { padding: 9px 8px; border-bottom: 1px solid var(--line); }
.ops-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.ops-list li { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.ops-list li:last-child { border-bottom: 0; }
.ops-list li > span:first-child { display: grid; min-width: 0; }
.ops-list li > span:last-child { white-space: nowrap; }
.ops-clip { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ops-map-page { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 12px; height: clamp(520px, calc(100vh - 210px), 900px); }
.ops-map-wide { min-height: 0; height: 100%; }
.ops-map-full { min-height: 0 !important; height: 100% !important; }
.ops-map-panel { background: #fff; border: 1px solid var(--line-2); border-radius: 16px; padding: 10px; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; }
.ops-map-panel.closed { display: none; }
.ops-map-page:has(.ops-map-panel.closed) { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 900px) { .ops-map-page { grid-template-columns: 1fr; height: auto; } .ops-map-wide { height: 60vh; min-height: 380px; } .ops-map-panel { max-height: 320px; } }
.ops-mp-sec { padding: 8px 6px 2px; font-size: 12.5px; color: var(--ink-2); }
.ops-mp-cor, .ops-mp-item { display: flex; align-items: center; justify-content: space-between; gap: 8px; text-align: left; border: 1px solid var(--line); background: #fff; border-radius: 10px; padding: 8px 10px; font: inherit; font-size: 13px; cursor: pointer; color: var(--ink); }
.ops-mp-cor:hover, .ops-mp-item:hover { border-color: var(--brand); background: var(--brand-50); }
.ops-mp-cor.warn { border-color: #fecdd3; background: #fff7f8; }
.ops-mp-item { flex-direction: column; align-items: flex-start; gap: 2px; border-left: 3px solid #d97706; }
.ops-mp-item.request { border-left-color: #2563eb; }
.ops-mp-route { font-weight: 700; }
.ops-mp-empty { padding: 4px 8px; margin: 0; }
.ops-map-legend { position: absolute; top: 12px; left: 12px; z-index: 10; display: grid; gap: 6px; background: rgba(255, 255, 255, 0.95); border: 1px solid var(--line-2); border-radius: 12px; padding: 10px 12px; font-size: 12.5px; box-shadow: 0 4px 12px rgba(15, 23, 42, 0.1); }
.ops-leg { display: flex; align-items: center; gap: 8px; cursor: pointer; color: var(--ink-2); font-weight: 600; }
.ops-leg input { accent-color: var(--brand); }
.ops-leg-sw { width: 22px; height: 0; border-top: 3px solid; }
.ops-leg-sw.rides { border-color: #d97706; }
.ops-leg-sw.reqs { border-color: #2563eb; border-top-style: dashed; }
.ops-leg-sw.roads { border-color: #94a3b8; border-top-width: 2px; }
.ops-map-note { position: absolute; inset: 50% 20px auto; transform: translateY(-50%); z-index: 11; text-align: center; background: #fff; border: 1px solid var(--line-2); border-radius: 12px; padding: 14px; font-size: 14px; color: var(--ink-2); }
.ops-map-note[hidden] { display: none; }
.ops-panel-btn { align-self: center; }
.ops-rev-sum { grid-template-columns: 200px 1fr; gap: 24px; align-items: center; margin-bottom: 12px; }
@media (max-width: 700px) { .ops-rev-sum { grid-template-columns: 1fr; } }
.ops-rev-avg { display: grid; gap: 2px; }
.ops-rev-avg strong { font-size: 40px; line-height: 1; letter-spacing: -0.02em; }
.ops-stars { color: #f59e0b; letter-spacing: 2px; }
.ops-stars.low { color: #be123c; }
.ops-rev-bars { display: grid; gap: 6px; }
.ops-rev-row { display: grid; grid-template-columns: 38px 1fr 30px; align-items: center; gap: 8px; }
.ops-rev-track { height: 8px; background: #eef2f7; border-radius: 999px; overflow: hidden; }
.ops-rev-fill { height: 100%; background: #f59e0b; border-radius: 999px; }
.ops-rev-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* ---------- Messages: priority, assignment, replies ---------- */
.msg-select-sm { padding: 6px 10px; font-size: 13px; border-radius: 10px; max-width: 190px; }
.msg-st-in_progress { background: #fef3c7; color: #b45309; }
.msg-replies { margin-left: 8px; font-size: 12px; font-weight: 700; color: var(--ink-2); }
.msg-meta-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.msg-prio { appearance: none; -webkit-appearance: none; border: 1.5px solid var(--line-2); border-radius: 999px; padding: 4px 26px 4px 12px; font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5l3 3 3-3' fill='none' stroke='%2364748b' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 8px center / 12px; color: var(--ink-2); }
.msg-prio-high { background-color: #fee2e2; border-color: #fecaca; color: #b91c1c; }
.msg-prio-low { background-color: #f1f5f9; color: #64748b; }
.msg-card.is-high { border-left: 4px solid #ef4444; }
.msg-reply { display: grid; gap: 10px; border-top: 1px dashed var(--line-2); padding-top: 12px; margin-top: 4px; }
.msg-reply-text { width: 100%; min-height: 110px; resize: vertical; border: 1.5px solid var(--line-2); border-radius: 12px; padding: 10px 12px; font: inherit; font-size: 14.5px; }
.msg-reply-text:focus { outline: 2px solid var(--brand); outline-offset: 1px; }
.msg-reply-bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.msg-reply-done { display: inline-flex; gap: 6px; align-items: center; color: var(--ink-2); }
.msg-reply-btns { display: flex; gap: 8px; margin-left: auto; }
.msg-thread { display: grid; gap: 8px; }
.msg-thread-item { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 12px; padding: 10px 12px; }
.msg-thread-item p { margin: 4px 0 0; font-size: 14px; }
.msg-mail { font-weight: 700; }
.msg-mail-sent { color: #15803d; }
.msg-mail-failed { color: #b91c1c; }
.msg-mail-simulated { color: #b45309; }
.msg-warn { background: #fffbeb; border: 1px solid #fde68a; color: #92400e; border-radius: 10px; padding: 8px 12px; margin: 0; }
.msg-team-list { display: grid; gap: 8px; margin: 12px 0; }
.msg-team-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; border: 1px solid #e2e8f0; border-radius: 12px; padding: 10px 12px; }
.msg-team-add { display: flex; gap: 8px; }
.msg-team-add input { flex: 1; min-width: 0; }

/* ---------- Revenue: invoices & earnings ---------- */
.inv-modal { max-width: 680px; }
.inv-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.inv-totals { margin: 12px 0 4px auto; max-width: 300px; display: grid; gap: 6px; }
.inv-line { display: flex; justify-content: space-between; gap: 16px; font-variant-numeric: tabular-nums; color: var(--ink-2); }
.inv-line.strong { font-weight: 800; color: var(--ink); font-size: 17px; border-top: 1px solid #e2e8f0; padding-top: 8px; }
.inv-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.inv-sub { margin-top: 12px; border: 1px solid #e2e8f0; border-radius: 12px; padding: 12px; background: #f8fafc; }
.inv-sub[hidden] { display: none; }
.inv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.inv-lines-head, .inv-line-row { display: grid; grid-template-columns: minmax(0, 1fr) 76px 110px 36px; gap: 8px; align-items: center; }
.inv-lines { display: grid; gap: 8px; }
.inv-line-row input { min-width: 0; width: 100%; }
@media (max-width: 560px) { .inv-grid { grid-template-columns: 1fr; } .inv-lines-head { display: none; } .inv-line-row { grid-template-columns: minmax(0, 1fr) 64px 92px 32px; } }
.ops-note { display: flex; gap: 10px; align-items: flex-start; background: #f1f6ff; border: 1px solid #d5def0; color: #1e3a8a; border-radius: 12px; padding: 10px 14px; margin: 0 0 12px; }
.ops-note .ic { flex: none; margin-top: 2px; }
.ops-note p { margin: 0; }
.ops-note.warn { background: #fffbeb; border-color: #fde68a; color: #92400e; margin-top: 12px; }
.ops-period { display: flex; flex-wrap: wrap; gap: 12px; margin: 10px 0 4px; }
.ops-period label { display: grid; gap: 4px; color: var(--ink-2); font-weight: 600; }
.ops-period input { border: 1.5px solid var(--line-2); border-radius: 10px; padding: 7px 10px; font: inherit; }
.ops-bars-wrap { margin-top: 14px; }
.ops-bars { display: flex; align-items: flex-end; gap: 2px; height: 170px; padding: 8px 4px 0; border-bottom: 1.5px solid #cbd5e1; background: repeating-linear-gradient(to top, transparent 0, transparent 41px, #eef2f7 41px, #eef2f7 42px); }
.ops-bar-col { flex: 1; min-width: 2px; height: 100%; display: flex; align-items: flex-end; }
.ops-bar { width: 100%; background: #0038a8; border-radius: 3px 3px 0 0; min-height: 1px; }
.ops-bar.zero { background: #cbd5e1; }
.ops-bar-col:hover .ops-bar { background: #fcd116; }
.ops-bar-axis { display: flex; justify-content: space-between; margin-top: 6px; }
.ops-bar-axis span { flex: 1; text-align: center; font-size: 11px; }
@media (prefers-reduced-motion: no-preference) { .ops-bar { transition: height .25s ease; } }
.ops-grid-2.even { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 900px) { .ops-grid-2.even { grid-template-columns: 1fr; } }
.inv-modal .form { display: grid; gap: 12px; }
.inv-modal .form label { display: grid; gap: 4px; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.inv-modal .form input:not([type="checkbox"]), .inv-modal .form select { width: 100%; border: 1.5px solid var(--line-2); border-radius: 10px; padding: 8px 10px; font: inherit; font-size: 14.5px; background: #fff; }
.inv-modal .form input:focus, .inv-modal .form select:focus { outline: 2px solid var(--brand); outline-offset: 1px; }
.inv-modal .inv-line-row input { width: 100%; }

/* ---------- Inbox (two panes) ---------- */
.ib-page { max-width: 1180px; padding-block: 20px 32px; }
.ib-head h1 { margin: 2px 0 4px; }
.ib-sub { margin: 0 0 16px; }
.ib-shell { display: grid; grid-template-columns: 380px minmax(0, 1fr); background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; height: clamp(520px, calc(100vh - 250px), 760px); box-shadow: var(--shadow-sm); }
.ib-list { border-right: 1px solid var(--line); display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.ib-search { display: flex; align-items: center; gap: 8px; margin: 14px 14px 8px; padding: 0 12px; border: 1.5px solid var(--line-2); border-radius: 12px; color: var(--muted); }
.ib-search:focus-within { border-color: var(--brand); }
.ib-search-input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; padding: 10px 0; color: var(--ink); }
.ib-tabs { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 14px 10px; }
.ib-tabs .chip-btn { padding: 5px 12px; font-size: 13px; }
.tab-n { margin-left: 6px; background: var(--red-50); color: var(--red); border-radius: 999px; padding: 0 6px; font-size: 11px; font-weight: 800; }
.chip-btn.on .tab-n { background: #fff; color: var(--brand); }
.ib-rows { overflow-y: auto; flex: 1; min-height: 0; }
.ib-rowwrap { position: relative; border-top: 1px solid var(--soft); }
.ib-row { display: flex; align-items: center; gap: 12px; padding: 13px 44px 13px 14px; position: relative; color: inherit; text-decoration: none; }
.ib-row:hover { background: var(--soft); }
.ib-row.sel { background: var(--brand-50); }
.ib-row.sel::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--brand); }
.ib-rm { flex: 1; min-width: 0; }
.ib-rt { display: flex; justify-content: space-between; gap: 8px; }
.ib-rt strong { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ib-rt > span { font-size: 12px; color: var(--muted); white-space: nowrap; }
.ib-role { font-weight: 500; color: var(--muted); font-size: 12.5px; }
.ib-route { font-size: 12.5px; color: var(--muted); margin: 1px 0 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ib-last { font-size: 13.5px; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ib-row.unread .ib-last { font-weight: 700; color: var(--ink); }
.ib-row .count-badge { position: absolute; right: 12px; top: 14px; }
.ib-arch { position: absolute; right: 8px; bottom: 8px; width: 28px; height: 28px; border: 0; border-radius: 8px; background: transparent; color: var(--muted); display: grid; place-items: center; opacity: 0; cursor: pointer; }
.ib-rowwrap:hover .ib-arch, .ib-arch:focus-visible { opacity: 1; }
.ib-arch:hover { background: var(--soft-2); color: var(--ink); }
@media (hover: none) { .ib-arch { opacity: 0.7; } }
.ib-chip { display: inline-block; font-size: 11px; font-weight: 800; border-radius: 999px; padding: 1px 8px; margin-right: 6px; background: var(--soft); color: var(--muted); }
.ib-chip.up { background: var(--ok-50); color: var(--ok); }
.ib-chip.off { background: var(--warn-50); color: var(--sun-ink); }
.ib-chip.bad { background: var(--red-50); color: var(--red); }
.ib-chip.sup { background: var(--brand-50); color: var(--brand); }
.ib-av { width: 44px; height: 44px; border-radius: 50%; flex: none; display: grid; place-items: center; color: #fff; font-weight: 800; background: var(--brand); position: relative; }
.ib-av.sup::after { content: ""; position: absolute; right: -1px; bottom: -1px; width: 12px; height: 12px; border-radius: 50%; background: var(--sun); border: 2px solid #fff; }
.ib-empty { padding: 28px 18px; text-align: center; display: grid; gap: 8px; justify-items: center; border: 0; background: transparent; }
.ib-hint { padding: 0 18px 14px; text-align: center; }
.ib-pane { min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.ib-none { margin: auto; padding: 24px; text-align: center; display: grid; gap: 6px; justify-items: center; max-width: 34ch; }
.ib-none-ic { width: 60px; height: 60px; border-radius: 50%; background: var(--brand-50); color: var(--brand); display: grid; place-items: center; margin-bottom: 4px; }
.ib-chat { display: flex; flex-direction: column; min-height: 0; height: 100%; }
.ib-chat-head { padding: 14px 20px; border-bottom: 1px solid var(--line); }
.ib-chat-head .ib-role { font-size: 13px; }
.ib-arch-btn { display: inline-flex; align-items: center; gap: 6px; }
.ib-back { display: none; }
.ib-trip { margin: 14px 20px 0; border: 1px solid var(--line); border-radius: 14px; padding: 10px 14px; background: var(--bg); display: flex; gap: 10px 14px; align-items: center; flex-wrap: wrap; }
.ib-trip-main { flex: 1; min-width: 200px; display: grid; gap: 1px; }
.ib-trip .ib-chip { margin: 0; }
.ib-chat .offer-bar { margin: 12px 20px 0; }
.ib-chat .chat-list { flex: 1; min-height: 0; max-height: none; border: 0; border-radius: 0; padding: 16px 20px; }
.ib-chat .bubble { max-width: 70%; }
.chat-day { align-self: center; margin: 4px 0; }
.chat-day span { font-size: 12px; color: var(--muted); background: var(--soft); border-radius: 999px; padding: 2px 10px; }
.chat-empty.center { text-align: center; display: grid; gap: 4px; }
.bubble-from { display: block; font-size: 11.5px; font-weight: 800; color: var(--brand); margin-bottom: 2px; }
.bubble-topic { display: block; font-size: 11px; font-weight: 800; opacity: 0.8; margin-bottom: 2px; text-transform: uppercase; letter-spacing: 0.04em; }
.ib-chat .chat-foot { border-top: 1px solid var(--line); padding: 12px 20px; display: grid; gap: 8px; }
.ib-composer { display: grid; gap: 8px; }
.ib-quick { display: flex; flex-wrap: wrap; gap: 8px; }
.ib-q { border: 1.5px solid var(--line-2); border-radius: 999px; padding: 5px 12px; font: inherit; font-size: 13px; font-weight: 700; color: var(--brand); background: #fff; cursor: pointer; }
.ib-q:hover { background: var(--brand-50); }
.ib-topic { display: flex; align-items: center; gap: 8px; }
.msg-select-sm { padding: 4px 8px; }
.ib-support-form { margin-top: 0; }
@media (max-width: 860px) {
  .ib-shell { grid-template-columns: 1fr; height: calc(100vh - 210px); min-height: 480px; }
  .ib-list { border-right: 0; }
  .ib-shell:not(.has-active) .ib-pane { display: none; }
  .ib-shell.has-active .ib-list { display: none; }
  .ib-back { display: grid; }
  .ib-head .ib-sub { display: none; }
  .ib-chat .bubble { max-width: 86%; }
  .ib-chat-head, .ib-chat .chat-foot, .ib-chat .chat-list { padding-inline: 14px; }
  .ib-trip, .ib-chat .offer-bar { margin-inline: 14px; }
}
.msg-mail-in_app { color: var(--brand); }
@media (max-width: 860px) {
  .ib-page:has(.ib-shell.has-active) .ib-head { display: none; }
  .ib-page:has(.ib-shell.has-active) .ib-shell { height: calc(100vh - 150px); }
}

/* ---------- Official KaSabay avatar + inbox header actions ---------- */
.ib-head-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; margin-bottom: 4px; }
.ib-head-row .ib-sub { margin-bottom: 16px; }
.ib-export { margin-bottom: 16px; }
.ib-av.official { background: #fff; border: 1.5px solid var(--brand-100); display: inline-grid; padding: 3px; box-sizing: border-box; position: relative; flex: none; }
.ib-av.official img { width: 100%; height: 100%; object-fit: contain; border-radius: 50%; }
.ib-av.official::after { display: none; }
.ib-vbadge { position: absolute; right: -3px; bottom: -3px; width: 36%; height: 36%; min-width: 12px; min-height: 12px; border-radius: 50%; background: var(--brand); color: #fff; display: grid; place-items: center; border: 2px solid #fff; }
.ib-vbadge .ic { width: 62%; height: 62%; stroke-width: 3.5; }
.ib-vtick { display: inline-grid; place-items: center; width: 15px; height: 15px; margin-left: 5px; border-radius: 50%; background: var(--brand); color: #fff; vertical-align: -2px; }
.bubble-from { display: flex; align-items: center; gap: 6px; }
.bubble-from .ib-av.official { padding: 1px; border-width: 1px; }
.bubble-from .ib-vbadge { display: none; }

/* ---------- Public profile ---------- */
.pf { display: grid; gap: 16px; padding-block: 20px 36px; }
.pf-hero { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; padding: 22px; }
.pf-avatar { position: relative; flex: none; padding: 4px; border-radius: 50%; }
.pf-avatar.verified { background: conic-gradient(var(--brand), var(--sun), var(--brand)); }
.pf-avatar.verified .avatar { border: 3px solid #fff; }
.pf-vbadge { position: absolute; right: -2px; bottom: 2px; width: 28px; height: 28px; border-radius: 50%; background: var(--brand); color: #fff; display: grid; place-items: center; border: 3px solid #fff; }
.pf-id { flex: 1; min-width: 200px; display: grid; gap: 6px; justify-items: start; }
.pf-id h1 { margin: 0; font-size: 34px; }
.pf-id p { margin: 0; }
.pf-role { display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; padding: 4px 12px; font-weight: 800; font-size: 13px; background: var(--soft); color: var(--muted); }
.pf-role.verified { background: var(--brand-50); color: var(--brand); }
.pf-role.active { background: var(--ok-50); color: var(--ok); }
.pf-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.pf-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.pf-tile { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; display: grid; gap: 2px; align-content: start; }
.pf-tile-l { font-size: 12px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); }
.pf-tile-v { font-size: 22px; line-height: 1.2; }
.pf .profile-car { display: flex; gap: 16px; align-items: center; }
.pf .profile-car .car-photo { width: 140px; height: 92px; object-fit: cover; border-radius: 12px; }
.pf .review { display: grid; gap: 4px; }
.pf-rv-date { margin-left: auto; }
.pf-rv-route { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; color: var(--brand); background: var(--brand-50); border-radius: 999px; padding: 2px 9px; justify-self: start; }
@media (max-width: 680px) { .pf-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pf-id h1 { font-size: 28px; } }

/* ---------- Ride alerts ---------- */
.al-page { max-width: 1100px; padding-block: 20px 36px; }
.al-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 14px 24px; flex-wrap: wrap; margin-bottom: 18px; }
.al-head h1 { margin: 2px 0 6px; }
.al-head p { margin: 0; max-width: 56ch; }
.al-summary { margin-top: 6px !important; font-weight: 700; }
.al-head-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.al-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 16px; }
.al-card { display: grid; gap: 12px; align-content: start; padding: 18px; }
.al-card.paused { background: var(--bg); }
.al-card.paused .al-route, .al-card.paused .al-meta { opacity: 0.6; }
.al-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.al-route { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 17px; }
.al-sw-wrap { display: inline-flex; align-items: center; gap: 8px; flex: none; cursor: pointer; }
.al-sw-l { font-size: 12.5px; font-weight: 800; color: var(--muted); }
.al-switch { width: 44px; height: 26px; border-radius: 999px; border: 0; background: #c3cddd; position: relative; cursor: pointer; padding: 0; transition: background 0.15s; }
.al-switch.on { background: var(--ok); }
.al-switch span { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform 0.15s; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); }
.al-switch.on span { transform: translateX(18px); }
.al-switch:focus-visible { outline: 3px solid var(--brand-100); outline-offset: 2px; }
.al-card > .ib-chip { justify-self: start; margin: 0; }
.al-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; margin: 0; }
.al-meta-wide { grid-column: 1 / -1; }
.al-arrows { color: var(--brand); font-weight: 800; font-size: 18px; }
.al-meta dt { display: flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
.al-meta dd { margin: 2px 0 0; font-weight: 700; font-size: 14px; }
.al-chs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.al-ch-l { font-size: 12px; color: var(--muted); font-weight: 700; margin-right: 2px; }
.al-ch { border: 1.5px solid var(--line-2); background: #fff; color: var(--muted); border-radius: 999px; padding: 4px 11px; font: inherit; font-size: 12.5px; font-weight: 800; cursor: pointer; }
.al-ch.on { background: var(--brand-50); border-color: var(--brand); color: var(--brand); }
.al-ch:disabled { cursor: default; }
.al-ch.soon { opacity: 0.55; }
.al-ch em { font-style: normal; font-size: 10px; margin-left: 5px; text-transform: uppercase; }
.al-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; border-top: 1px solid var(--line); padding-top: 12px; }
.al-btns { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.al-empty { grid-column: 1 / -1; display: grid; gap: 8px; justify-items: center; padding: 40px 18px; }
.al-form { display: grid; gap: 12px; }
.al-form .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.al-check { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.al-check input { width: 18px; height: 18px; }
@media (max-width: 560px) { .al-grid { grid-template-columns: 1fr; } .al-head-actions, .al-head-actions .oc-export { width: 100%; } .al-head-actions .btn { flex: 1 1 auto; justify-content: center; } }

/* ---------- My trips ---------- */
.tr-page { max-width: 980px; padding-block: 20px 36px; display: grid; gap: 16px; }
.tr-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 14px 24px; flex-wrap: wrap; }
.tr-head h1 { margin: 2px 0 6px; }
.tr-head p { margin: 0; max-width: 54ch; }
.tr-next { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: var(--radius); background: linear-gradient(120deg, var(--brand-700), var(--brand)); color: #fff; text-decoration: none; box-shadow: var(--shadow); }
.tr-next:hover { filter: brightness(1.07); }
.tr-next-ic { width: 46px; height: 46px; border-radius: 14px; background: rgba(255, 255, 255, 0.16); display: grid; place-items: center; flex: none; }
.tr-next-t { flex: 1; min-width: 0; display: grid; gap: 1px; }
.tr-next-t strong { font-size: 19px; }
.tr-next-t span { font-size: 13.5px; opacity: 0.9; }
.tr-next-l { font-size: 12px !important; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sun); opacity: 1 !important; }
.tr-next .ic-end { color: #fff; }
.tr-kpis .pf-tile-v { font-size: 26px; }
.tr-when { display: flex; gap: 8px; flex-wrap: wrap; }
.tr-when .chip-btn { text-decoration: none; display: inline-flex; align-items: center; gap: 8px; }
.tr-cnt { font-size: 11.5px; font-weight: 800; background: var(--soft-2); color: var(--ink-2); border-radius: 999px; padding: 0 7px; }
.chip-btn.on .tr-cnt { background: #fff; color: var(--brand); }
.tr-list { display: grid; gap: 12px; }
.tr-card { display: grid; grid-template-columns: 74px minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 16px 18px; }
.tr-card.cancelled { background: var(--bg); }
.tr-card.cancelled .tr-route { text-decoration: line-through; text-decoration-color: var(--line-2); color: var(--muted); }
.tr-card.past .tr-date { background: var(--soft); color: var(--muted); }
.tr-date { width: 74px; border-radius: 16px; background: var(--brand-50); color: var(--brand); display: grid; justify-items: center; padding: 8px 0; line-height: 1.1; }
.tr-date.off { background: var(--soft); color: var(--muted); }
.tr-date strong { font-size: 28px; }
.tr-wd, .tr-mo { font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; }
.tr-main { min-width: 0; display: grid; gap: 8px; }
.tr-top { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; }
.tr-route { font-size: 18px; display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tr-top .ib-chip { margin: 0; }
.tr-metas { display: flex; flex-wrap: wrap; gap: 6px 16px; color: var(--ink-2); font-size: 13.5px; }
.tr-m { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.tr-m .ic { color: var(--muted); flex: none; }
.tr-who { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--ink-2); }
.tr-seats { display: flex; align-items: center; gap: 10px; }
.tr-bar { width: 120px; height: 8px; border-radius: 999px; background: var(--soft-2); overflow: hidden; display: inline-block; }
.tr-bar i { display: block; height: 100%; background: var(--ok); border-radius: 999px; }
.tr-actions { display: grid; gap: 8px; justify-items: stretch; min-width: 132px; }
.tr-actions .btn { justify-content: center; }
@media (max-width: 720px) {
  .tr-card { grid-template-columns: 62px minmax(0, 1fr); gap: 12px 14px; align-items: start; }
  .tr-date { width: 62px; padding: 6px 0; }
  .tr-date strong { font-size: 24px; }
  .tr-actions { grid-column: 1 / -1; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
  .tr-route { font-size: 16.5px; }
  .tr-next-t strong { font-size: 16.5px; }
  .tr-head .al-head-actions, .tr-head .oc-export { width: 100%; }
  .tr-head .al-head-actions .btn { flex: 1 1 auto; justify-content: center; }
}

/* ---- Admin → member messages ---- */
.am-lbl { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.inv-modal .form textarea { width: 100%; border: 1.5px solid var(--line-2); border-radius: 10px; padding: 10px; font: inherit; font-size: 14.5px; line-height: 1.45; resize: vertical; min-height: 120px; background: #fff; }
.inv-modal .form textarea:focus { outline: 2px solid var(--brand); outline-offset: 1px; }
.am-check { display: flex !important; grid-template-columns: none; align-items: center; gap: 8px; font-weight: 600; font-size: 13.5px; }
.am-check input { width: 18px; height: 18px; flex: none; accent-color: var(--brand); }
.am-note { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 10px; background: #eff6ff; color: #1e3a8a; font-size: 13.5px; line-height: 1.4; }
.am-note.warn { background: #fef3c7; color: #92400e; }
.am-note svg { flex: none; margin-top: 1px; }
.am-preview { background: #f8fafc; border: 1px dashed var(--line-2); border-radius: 12px; padding: 10px 12px; display: grid; gap: 6px; }
.am-bubble { max-width: 100%; margin: 0; align-self: stretch; }
.am-bubble p, .bubble-subject + p { white-space: pre-wrap; overflow-wrap: anywhere; }
.am-subj, .bubble-subject { display: block; font-size: 14px; margin: 2px 0; }
.am-aud { display: grid; gap: 4px; padding: 12px 14px; border-radius: 12px; background: #f1f5f9; font-size: 14px; }
.am-aud.ok { background: #ecfdf5; color: #065f46; }
.am-aud.bad { background: #fef2f2; color: #991b1b; }
.am-count { font-size: 26px; line-height: 1.1; }
.am-done { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; font-size: 18px; }
.am-done-ic { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: #dcfce7; color: #15803d; }
.am-excerpt { display: block; max-width: 340px; overflow-wrap: anywhere; white-space: normal; }
.ops-modal-body .ops-modal-actions { margin-top: 4px; }
@media (max-width: 560px) { .am-excerpt { max-width: none; } .am-count { font-size: 22px; } }
/* Long modals scroll inside the window instead of running off the screen */
.inv-modal { display: flex; flex-direction: column; max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); }
.inv-modal .ops-modal-header { flex: none; }
.inv-modal .ops-modal-body { overflow-y: auto; overscroll-behavior: contain; }
.ib-support-form .chat-input { min-width: 0; }
.ib-support-form .btn { flex: none; }
.hub-official { display: inline-flex; align-items: center; gap: 5px; }
.hub-official .ib-vtick { display: inline-grid; place-items: center; }

/* ---- Operations Center dashboard: sections, link tiles, 14-day trends, system status ---- */
.oc-sec { margin: 0 0 22px; }
.oc-sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 6px 14px; flex-wrap: wrap; margin: 0 0 10px; }
.oc-sec-head h3 { margin: 0; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: #334155; }
.oc-queue { cursor: pointer; position: relative; }
.oc-queue.accent { border-left-color: #0038a8; }
.oc-queue::after { content: "›"; position: absolute; right: 14px; top: 12px; font-size: 18px; line-height: 1; color: #94a3b8; transition: transform .15s, color .15s; }
.oc-queue:hover::after { color: #0038a8; transform: translateX(2px); }
.oc-queue:focus-visible, .oc-spark-card:focus-visible { outline: 3px solid #93b4ff; outline-offset: 2px; }
.oc-queue-lbl { padding-right: 18px; }
.oc-sparks { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; }
.oc-spark-card { display: grid; gap: 6px; padding: 14px 16px; color: inherit; text-decoration: none; transition: box-shadow .15s, border-color .15s; }
.oc-spark-card:hover { box-shadow: 0 4px 14px rgba(0, 56, 168, .08); border-color: #0038a8; }
.oc-spark-top { display: flex; align-items: baseline; gap: 8px; }
.oc-spark { display: flex; align-items: flex-end; gap: 3px; height: 54px; }
.oc-spark i { flex: 1; min-width: 0; background: #dbe4f5; border-radius: 3px 3px 0 0; }
.oc-spark i.on { background: #0038a8; }
.oc-spark-axis { display: flex; justify-content: space-between; }
.ops-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; color: #334155; }
.ops-legend span { display: inline-flex; align-items: center; gap: 6px; }
.ops-dot { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.ops-dot.sched { background: #0038a8; } .ops-dot.dep { background: #64748b; } .ops-dot.canc { background: #be123c; }
.oc-callout { margin: 0; padding: 10px 12px; border-radius: 10px; background: #fff7e6; border: 1px solid #f4cf72; color: #5b3d00; font-size: 13px; }
.oc-sys { display: flex; flex-wrap: wrap; gap: 10px 22px; padding: 12px 14px; background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; }
.oc-sys-item { display: inline-flex; align-items: center; gap: 8px; }
.ops-list a { color: inherit; text-decoration: none; }
.ops-list a:hover strong { text-decoration: underline; }
.oc-queues.dense { grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); }
.oc-alert.ok { border-color: #bbf7d0; background: #f0fdf4; }
.oc-alert-main { flex: 1; min-width: 0; }
.oc-alert-act { flex: none; align-self: center; white-space: nowrap; }
.oc-radar-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px 14px; flex-wrap: wrap; margin-top: 12px; padding-top: 12px; border-top: 1px solid #e2e8f0; }
.oc-radar-foot p { margin: 0; max-width: 46ch; }
.oc-radar-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.oc-card > .oc-list[hidden] { display: none; }
.oc-card > .oc-list + .oc-list { margin-top: 10px; }
@media (max-width: 560px) { .oc-alert { flex-wrap: wrap; } .oc-alert-act { width: 100%; } }

/* ---- Hero pilot badge: compact, one short line (replaces the long pill above) ---- */
.hero .hero-pilot-banner {
  gap: 8px; padding: 3px 12px 3px 3px; margin-bottom: 14px; font-size: 12.5px; line-height: 1.2;
  background: rgba(255, 255, 255, .85); border: 1px solid rgba(0, 56, 168, .12); box-shadow: 0 1px 6px rgba(0, 40, 120, .07);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); max-width: 100%;
}
.hero .pilot-tag { font-size: 10px; padding: 3px 9px; letter-spacing: .06em; box-shadow: none; white-space: nowrap; }
.hero .pilot-text { font-size: 12.5px; font-weight: 600; letter-spacing: 0; color: var(--ink-2); white-space: nowrap; }

/* ---- Ride card footer: driver row, then trust badges on their own line ---- */
.rc-foot.rc-foot-v, .res-list.is-grid .rc-foot.rc-foot-v { display: flex; flex-direction: column; align-items: stretch; flex-wrap: nowrap; gap: 10px; padding: 14px 20px 16px; }
.res-list.is-grid .rc-foot.rc-foot-v { padding: 14px 16px 16px; }
.rc-foot-main { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 0; }
.rc-foot-v .rc-driver, .res-list.is-grid .rc-foot-v .rc-driver { flex: 1 1 auto; min-width: 0; }
.rc-foot-v .rc-driver-meta { gap: 2px; min-width: 0; }
.rc-foot-v .rc-driver-line, .res-list.is-grid .rc-foot-v .rc-driver-line { flex-wrap: nowrap; gap: 8px; min-width: 0; }
.rc-foot-v .rc-driver-line strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rc-foot-v .rc-driver-line > :not(strong) { flex: none; }
.rc-foot-v .rc-car-line { display: flex; align-items: center; gap: 5px; margin-top: 0; min-width: 0; }
.rc-foot-v .rc-car-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rc-foot-v .rc-car-photo-tag { flex: none; white-space: nowrap; }
.rc-foot-v .rc-icons, .res-list.is-grid .rc-foot-v .rc-icons { flex: none; display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
.rc-badges { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 10px; border-top: 1px solid rgba(148, 163, 184, .25); }
.rc-badges > * { white-space: nowrap; }

/* Request cards (passenger + group): same footer rhythm as driver cards, safe for long CTA labels */
.req-rc .rc-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 20px 16px; }
.res-list.is-grid .req-rc .rc-foot { padding: 14px 16px 16px; }
.req-rc .rc-foot .rc-driver { flex: 1 1 auto; min-width: 0; }
.req-rc .rc-car-line { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 400px) {
  .req-rc .rc-foot { flex-wrap: wrap; }
  .req-rc .rc-foot .req-offer-link { flex: 1 1 100%; justify-content: center; }
}

/* Export buttons on a single trip page */
.ride-export { display: flex; flex-wrap: wrap; gap: 8px; margin: 2px 0 14px; }
@media (max-width: 560px) { .ride-export .btn { flex: 1 1 auto; justify-content: center; } }

/* ---------- Account (same look as My trips: brand blue + sun yellow) ---------- */
.ac-page { gap: 16px; }
.ac-id { display: flex; align-items: center; gap: 18px; padding: 20px 22px; background: linear-gradient(120deg, var(--brand-700), var(--brand)); color: #fff; border: 0; box-shadow: var(--shadow-md, 0 10px 28px rgba(6, 27, 82, .22)); }
.ac-id-t { min-width: 0; display: grid; gap: 6px; }
.ac-name { margin: 0; color: #fff; font-size: 24px; overflow-wrap: anywhere; }
.ac-id .muted { color: rgba(255, 255, 255, .82); margin: 0; overflow-wrap: anywhere; }
.ac-id-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ac-id-badges > * { background: #fff; color: var(--ink); border-radius: 999px; padding-inline: 10px; }
.ac-id-badges > * * { color: inherit; }
.ac-id .avatar { box-shadow: 0 0 0 3px var(--sun); flex: none; }
.pf-tile-link { text-decoration: none; color: inherit; border-color: var(--sun-600); background: linear-gradient(180deg, #fffbe6, #fff); transition: transform .15s, box-shadow .15s; }
.pf-tile-link:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(6, 27, 82, .12); }
.ac-page .tabs { margin-top: 2px; }
.ac-data { display: grid; gap: 12px; }
.ac-data-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ac-list { margin: 6px 0 0; padding-left: 18px; display: grid; gap: 3px; }
.ac-data-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.ac-session { display: flex; }
.ac-reviews { display: grid; gap: 10px; }
.ac-reviews .review { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; display: grid; gap: 4px; }
@media (max-width: 560px) {
  .ac-id { padding: 16px; gap: 14px; }
  .ac-data-cols { grid-template-columns: 1fr; }
  .ac-data-actions .btn { flex: 1 1 auto; justify-content: center; }
}
.ac-id .ac-id-badges .muted { color: var(--muted); }
.ac-id { position: relative; }
.ac-logout { margin-left: auto; align-self: flex-start; background: var(--sun); color: var(--brand-700); border: 1px solid var(--sun-600); font-weight: 800; box-shadow: 0 2px 10px rgba(0, 0, 0, .22); }
.ac-logout:hover { background: #ffdf4d; color: var(--brand-700); filter: none; }
.ac-logout:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.ac-logout .ic { stroke: currentColor; }
@media (max-width: 560px) { .ac-id { flex-wrap: wrap; } .ac-logout { margin-left: 0; width: 100%; justify-content: center; align-self: stretch; } }

/* Sign-in & security card */
.ac-sec { display: grid; gap: 4px; }
.ac-sec-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px 16px; align-items: center; padding: 14px 0; border-top: 1px solid var(--line); }
.ac-sec-row:first-of-type { margin-top: 8px; }
.ac-sec-main { display: grid; gap: 4px; min-width: 0; justify-items: start; }
.ac-sec-main p { margin: 0; }
.ac-sec-val { font-size: 16px; overflow-wrap: anywhere; }
.ac-sec-chip { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 800; border-radius: 999px; padding: 2px 9px; }
.ac-sec-chip.ok { background: var(--ok-50, #e8f7ee); color: var(--ok, #12805c); }
.ac-sec-chip.warn { background: #fff4d6; color: #8a6100; }
.ac-sec-form { grid-column: 1 / -1; display: grid; gap: 10px; padding: 14px; border-radius: var(--radius); background: var(--soft, #f4f6fb); }
.ac-sec-form[hidden] { display: none; }
.ac-sec-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.ok-note { color: var(--ok, #12805c); }
@media (max-width: 560px) { .ac-sec-row { grid-template-columns: 1fr; } .ac-sec-row > .btn { justify-self: stretch; justify-content: center; } .ac-sec-actions .btn { flex: 1 1 auto; justify-content: center; } }
.ac-sec-row > .btn[hidden], .ac-sec-form[hidden] { display: none !important; }
.ac-sec-main .linkish { font-size: 13.5px; }

/* Clickable KPI tiles on Account */
.pf-tile-link, .pf-tile-link2 { position: relative; text-decoration: none; color: inherit; transition: transform .15s, box-shadow .15s, border-color .15s; }
.pf-tile-link2:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(6, 27, 82, .12); border-color: var(--brand); }
.pf-tile-link2:focus-visible, .pf-tile-link:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }
.pf-tile-go { position: absolute; top: 14px; right: 12px; width: 16px; height: 16px; color: var(--muted); }
.pf-tile-link .pf-tile-go { color: var(--sun-600); }
.pf-tile.tone-warn { border-color: var(--sun-600); background: linear-gradient(180deg, #fffbe6, #fff); }

/* Admin mode: the Operations Center is not a member session, so the member menu and avatar are replaced */
.nav-admin-mode { display: none; }
body.is-admin .nav > :not(.nav-admin-mode) { display: none !important; }
body.is-admin .nav-admin-mode { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.nav-admin-pill { display: inline-flex; align-items: center; gap: 7px; background: var(--brand-700); color: var(--sun); font-weight: 800; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; padding: 7px 13px; border-radius: 999px; }
.nav-admin-pill svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; }
.nav-admin-exit { font-weight: 700; font-size: 14px; color: var(--brand); text-decoration: none; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--line-2, #d6dbe6); background: #fff; }
.nav-admin-exit:hover { background: var(--brand-50); }
.nav-admin-pill, .nav-admin-exit { white-space: nowrap; }
.nav-admin-exit .x-short { display: none; }
@media (max-width: 560px) { .nav-admin-mode { gap: 8px; } .nav-admin-exit { padding: 6px 12px; font-size: 13px; } .nav-admin-pill { padding: 6px 10px; font-size: 12px; } .nav-admin-exit .x-long { display: none; } .nav-admin-exit .x-short { display: inline; } }
@media (max-width: 560px) { body.is-admin .brand-badge { display: none; } }

/* ---------- Philippine hairline skyline (original artwork, public/art/*.png used as an alpha mask) ---------- */
/* One divider per page: the footer panorama. It is never stretched past its drawn size. */
.sk {
  display: block;
  width: 100%;
  max-width: calc(var(--w) * 1px);
  aspect-ratio: var(--w) / var(--h);
  margin: 0 auto;
  background: #4f5b82;
  opacity: .62;
  -webkit-mask: var(--m) center bottom / 100% 100% no-repeat;
  mask: var(--m) center bottom / 100% 100% no-repeat;
  pointer-events: none;
  user-select: none;
}
@media (max-width: 700px) {
  /* Phones: same drawing scale (no shrinking to dust, no stretching) - show the middle of the panorama */
  .sk { max-width: none; aspect-ratio: auto; height: calc(var(--h) * .8px); -webkit-mask-size: auto 100%; mask-size: auto 100%; -webkit-mask-position: center bottom; mask-position: center bottom; }
}

/* ---------- Ambient watermarks: one hairline motif per card, low opacity, drawn at (or below) its native size ---------- */
.wm { position: relative; isolation: isolate; }
.wm::after {
  content: "";
  position: absolute;
  z-index: -1;
  right: 18px;
  bottom: 0;
  height: var(--wm-h, 80px);
  aspect-ratio: var(--wm-ar, 1);
  background: #4f5b82;
  opacity: .34;
  -webkit-mask: var(--wm-m) right bottom / 100% 100% no-repeat;
  mask: var(--wm-m) right bottom / 100% 100% no-repeat;
  pointer-events: none;
}
.wm-eagle { --wm-m: url(/art/v-eagle.png); --wm-ar: 112 / 175; --wm-h: 112px; }
.wm-eaglefly { --wm-m: url(/art/v-eagle-fly.png); --wm-ar: 80 / 72; --wm-h: 58px; }
.wm-tarsier { --wm-m: url(/art/v-tarsier.png); --wm-ar: 89 / 137; --wm-h: 84px; }
.wm-palm { --wm-m: url(/art/v-palm.png); --wm-ar: 46 / 78; --wm-h: 78px; }
.wm-church { --wm-m: url(/art/v-church.png); --wm-ar: 134 / 104; --wm-h: 78px; }
.wm-rizal { --wm-m: url(/art/v-rizal.png); --wm-ar: 166 / 145; --wm-h: 80px; }
.wm-jeepney { --wm-m: url(/art/v-jeepney.png); --wm-ar: 92 / 36; --wm-h: 34px; }
.wm-banca { --wm-m: url(/art/v-banca.png); --wm-ar: 94 / 45; --wm-h: 42px; }
/* Tarsier peeking over the top edge of a card (login, register, reset) */
.wm-peek { --wm-m: url(/art/v-tarsier.png); --wm-ar: 89 / 137; --wm-h: 74px; }
.wm-peek::after { bottom: 100%; right: 12px; margin-bottom: -1px; z-index: 0; opacity: .5; }
/* Empty states, the "no rides" card and the donation card */
.empty { position: relative; isolation: isolate; overflow: hidden; }
.empty::after { content: ""; position: absolute; z-index: -1; right: 16px; bottom: 0; height: 74px; aspect-ratio: 46 / 78; background: #4f5b82; opacity: .3; -webkit-mask: url(/art/v-palm.png) right bottom / 100% 100% no-repeat; mask: url(/art/v-palm.png) right bottom / 100% 100% no-repeat; pointer-events: none; }
.route-alert-hero { isolation: isolate; overflow: hidden; }
.route-alert-hero::after { content: ""; position: absolute; z-index: -1; right: 20px; bottom: 0; height: 112px; aspect-ratio: 112 / 175; background: #4f5b82; opacity: .3; -webkit-mask: url(/art/v-eagle.png) right bottom / 100% 100% no-repeat; mask: url(/art/v-eagle.png) right bottom / 100% 100% no-repeat; pointer-events: none; }
.footer-support { position: relative; isolation: isolate; }
.footer-support::before { content: ""; position: absolute; z-index: -1; left: 54%; top: 6px; height: 54px; aspect-ratio: 80 / 72; background: #4f5b82; opacity: .3; -webkit-mask: url(/art/v-eagle-fly.png) center / 100% 100% no-repeat; mask: url(/art/v-eagle-fly.png) center / 100% 100% no-repeat; pointer-events: none; }
/* National heroes and everyday Filipino life (original artwork) */
.wm-lapulapu { --wm-m: url(/art/v-lapulapu.png); --wm-ar: 74 / 116; --wm-h: 96px; }
.wm-gabriela { --wm-m: url(/art/v-gabriela.png); --wm-ar: 126 / 145; --wm-h: 90px; }
.wm-mabini { --wm-m: url(/art/v-mabini.png); --wm-ar: 96 / 98; --wm-h: 76px; }
.wm-bonifacio { --wm-m: url(/art/v-bonifacio.png); --wm-ar: 128 / 143; --wm-h: 92px; }
.wm-rizalman { --wm-m: url(/art/v-rizal-man.png); --wm-ar: 58 / 121; --wm-h: 96px; }
.wm-bonifaciomonument { --wm-m: url(/art/v-bonifacio-monument.png); --wm-ar: 136 / 168; --wm-h: 100px; }
.wm-tricycle { --wm-m: url(/art/v-tricycle.png); --wm-ar: 76 / 44; --wm-h: 40px; }
.wm-carabao { --wm-m: url(/art/v-carabao.png); --wm-ar: 122 / 55; --wm-h: 50px; }
.wm-nipa { --wm-m: url(/art/v-nipa.png); --wm-ar: 110 / 94; --wm-h: 76px; }
.wm-farmer { --wm-m: url(/art/v-farmer-tuktok.png); --wm-ar: 80 / 56; --wm-h: 54px; }
.ab-mv-card.wm { padding-bottom: 64px; }
.req-empty.wm { min-height: 130px; }
.wm-luneta { --wm-m: url(/art/v-luneta.png); --wm-ar: 191 / 142; --wm-h: 134px; }
/* Rizal Monument standing on the top edge of the search card, in the hero margin */
.hero-search.wm-luneta::after { bottom: 100%; right: 4%; margin-bottom: -1px; z-index: 0; opacity: .75; }
/* Lapu-Lapu at the end of the "Everyday rides" heading, text kept clear of him */
.wm-head::after { top: 0; bottom: auto; right: 0; --wm-h: 104px; opacity: .6; }
.photo-story .sec-head p { max-width: calc(100% - 130px); }
.trust-card.wm-rizalman::after { opacity: .6; --wm-h: 104px; }
.value.wm::after { opacity: .5; }
@media (max-width: 700px) {
  .wm::after { opacity: .26; height: calc(var(--wm-h, 80px) * .8); right: 12px; }
  .wm-peek::after { opacity: .45; }
  .empty::after { height: 56px; opacity: .24; }
  .route-alert-hero::after { height: 84px; opacity: .22; }
  .footer-support::before { display: none; }
  .hero-search.wm-luneta::after { display: none; }
  .wm-head::after { display: none; }
  .photo-story .sec-head p { max-width: none; }
}



/* ---------- Navbar: one hover / active language for all five pills (soft brand tint). Identity lives in the logo and the PH chip. ---------- */
.nav-link:is(.nav-ask, .nav-search-hub, .nav-pax, .nav-trips):hover,
.nav-link:is(.nav-ask, .nav-search-hub, .nav-pax, .nav-trips):focus-visible {
  background: #eef3fb; border-color: rgba(0, 56, 168, .20); color: #1a2f66; box-shadow: 0 2px 8px rgba(0, 56, 168, .08); transform: none;
}
.nav-link:is(.nav-ask, .nav-search-hub, .nav-pax, .nav-trips):hover svg { color: #0038a8; transform: none; animation: none; }
.nav-link:is(.nav-ask, .nav-search-hub, .nav-pax, .nav-trips).active {
  background: #e3ebfa; border-color: rgba(0, 56, 168, .38); color: #0038a8 !important; font-weight: 700; box-shadow: 0 0 0 1px rgba(0, 56, 168, .08);
}
.nav-link:is(.nav-ask, .nav-search-hub, .nav-pax, .nav-trips).active svg { color: #0038a8 !important; }
.nav-link.nav-offer-pill:hover, .nav-link.nav-offer-pill:focus-visible {
  background: #dbe6f8; border-color: rgba(0, 56, 168, .36); color: #0038a8 !important; box-shadow: 0 3px 10px rgba(0, 56, 168, .12); transform: none;
}
.nav-link.nav-offer-pill:hover svg { color: #0038a8 !important; animation: none; transform: none; }
.nav-link.nav-offer-pill.active {
  background: #d3e0f6; border-color: rgba(0, 56, 168, .5); color: #0038a8 !important; font-weight: 700; box-shadow: 0 0 0 1px rgba(0, 56, 168, .10);
}
.nav-link.nav-offer-pill.active svg { color: #0038a8 !important; }

/* PH chip with a tiny soft flag */
.brand-badge { display: inline-flex; align-items: center; gap: 5px; }
.brand-badge::before { content: ""; width: 15px; height: 10px; flex: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 15'%3E%3Cdefs%3E%3CclipPath id='c'%3E%3Crect width='22' height='15' rx='3'/%3E%3C/clipPath%3E%3C/defs%3E%3Cg clip-path='url%28%23c%29'%3E%3Crect width='22' height='7.5' fill='%23C9DCF2'/%3E%3Crect y='7.5' width='22' height='7.5' fill='%23F6D2D5'/%3E%3Cpolygon points='0,0 11,7.5 0,15' fill='%23FFFFFF'/%3E%3Ccircle cx='3.6' cy='7.5' r='1.5' fill='%23F5D07A'/%3E%3C/g%3E%3Crect x='.3' y='.3' width='21.4' height='14.4' rx='2.8' fill='none' stroke='%230038A8' stroke-opacity='.18' stroke-width='.6'/%3E%3C/svg%3E") center / 100% 100% no-repeat; }

/* ---------- Admin Messages: two-pane inbox (same language as /messages) ---------- */
.msg-shell { height: clamp(540px, calc(100vh - 330px), 820px); grid-template-columns: 372px minmax(0, 1fr); margin-top: 6px; }
.msg-listcol .msg-selectall { margin: 0; padding: 9px 14px; border-bottom: 1px solid var(--line); font-size: 13px; }
.msg-rowwrap { display: flex; align-items: stretch; }
.msg-rowcheck { flex: none; align-self: center; margin: 0 0 0 14px; }
.msg-row { flex: 1; min-width: 0; width: 100%; padding: 12px 14px 12px 10px; border: 0; background: transparent; font: inherit; text-align: left; cursor: pointer; }
.msg-row:hover { background: var(--soft); }
.msg-row.sel { background: var(--brand-50); }
.msg-row.is-high:not(.sel) { box-shadow: inset 3px 0 0 #ef4444; }
.msg-row.unread .ib-rt strong { font-weight: 800; }
.msg-row .ib-av { width: 40px; height: 40px; font-size: 14px; }
.msg-av.guest { background: #94a3b8; }
.msg-row .ib-route { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; margin: 2px 0 3px; white-space: normal; }
.msg-row .ib-chip { margin-right: 2px; }
.msg-chip-new { background: var(--brand-50); color: var(--brand); }
.msg-chip-in_progress { background: #fef3c7; color: #b45309; }
.msg-chip-done { background: var(--ok-50); color: var(--ok); }
.msg-chip-archived { background: var(--soft); color: var(--muted); }
.msg-listcol .ib-rows mark, .msg-detail mark { background: #fff1a8; color: inherit; border-radius: 3px; padding: 0 1px; }
.msg-listcol .msg-empty { border: 0; padding: 24px 16px; }
.msg-dhead { display: flex; align-items: center; gap: 12px; }
.msg-dwho { flex: 1; min-width: 0; display: grid; gap: 1px; }
.msg-dwho strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg-dbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 20px; border-bottom: 1px solid var(--line); background: var(--bg); }
.msg-dbar-sp { flex: 1; }
.msg-detail .msg-chat { background: #fff; }
.msg-detail .bubble { max-width: 78%; }
.msg-bfrom { display: block; }
.msg-bfrom.mine { color: #fff; opacity: 0.9; }
.msg-biz { margin: 2px 0 4px; }
.msg-biz a { color: inherit; text-decoration: underline; }
.msg-foot .msg-reply-text { min-height: 74px; width: 100%; resize: vertical; }
.msg-foot .msg-reply-btns { margin-left: auto; }
.msg-pane { background: #fff; }
@media (max-width: 860px) {
  .msg-shell { grid-template-columns: 1fr; height: calc(100vh - 230px); min-height: 480px; }
  .msg-dbar, .msg-dhead { padding-inline: 14px; }
  .msg-detail .bubble { max-width: 90%; }
  .msg-dbar-sp { display: none; }
}
/* compact toolbar + roomier conversation (admin messages) */
.msg-toolbar { gap: 8px; margin: 10px 0 4px; }
.msg-toolbar .msg-search { flex: 1 1 170px; min-width: 150px; }
.msg-toolbar .msg-search-input { padding: 7px 0; font-size: 14px; }
.msg-toolbar .msg-select { padding: 7px 10px; font-size: 13.5px; border-radius: 10px; }
.msg-toolbar .chip-btn, .msg-toolbar .btn { padding-block: 6px; font-size: 13.5px; }
.msg-syncline { margin: 2px 2px 8px; }
.msg-shell { height: clamp(520px, calc(100vh - 290px), 840px); }
.msg-row.unread .ib-last { font-weight: 500; color: var(--ink-2); }
.msg-foot { padding-block: 10px; gap: 6px; }
.msg-foot .msg-warn { margin: 0; padding: 6px 10px; font-size: 12.5px; }
.msg-foot .msg-reply-text { min-height: 56px; }
.msg-foot .msg-reply-bar { gap: 8px; }
.msg-dbar { padding-block: 8px; }
.msg-dhead { padding-block: 10px; }
.msg-toolbar .msg-select { max-width: 150px; }
.msg-toolbar .msg-search { flex: 1 1 130px; min-width: 120px; }
@media (max-width: 860px) {
  .msg-toolbar .msg-select { max-width: none; }
  .msg-root.msg-drill > :not(.msg-shell) { display: none; }
  .msg-root.msg-drill .msg-shell { height: calc(100vh - 170px); min-height: 440px; margin-top: 0; }
}
@media (max-width: 860px) {
  .msg-toolbar .msg-search { flex: 1 1 100%; }
  .msg-shell:not(.has-active) .msg-row.sel { background: transparent; }
  .msg-shell:not(.has-active) .msg-row.sel::before { display: none; }
}
/* unified conversations */
.msg-chip-sent { background: #ede9fe; color: #5b21b6; }
.msg-chip-unseen { background: var(--warn-50); color: var(--sun-ink); }
.msg-you { color: var(--muted); font-weight: 600; }
.msg-startnote { margin: 0; padding: 8px 20px; background: #f5f3ff; border-bottom: 1px solid var(--line); }
.msg-subj { display: block; margin: 2px 0; }
.msg-foot-ctx { margin: 0; }
.bubble.mine.is-out { background: #4c1d95; }
.msg-tab-sent { margin-left: 6px; }
.msg-shell { height: clamp(560px, calc(100vh - 236px), 880px); }
.msg-warn-inline { color: #92400e; font-weight: 600; }
.msg-startnote { padding: 6px 20px; font-size: 12.5px; }
.msg-foot-ctx { font-size: 12.5px; }
@media (max-width: 860px) { .msg-shell { height: calc(100vh - 230px); min-height: 480px; } }

/* ---------- Trip pages: ride, request, offers (same language as My account) ---------- */
.tp-page { max-width: 1120px; }
.tp-ride { max-width: 1120px; }
.tp-kick { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tp-head-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.tp-head-actions .oc-export { margin: 0; }
.tp-chip { display: inline-flex; align-items: center; font-size: 12px; font-weight: 800; border-radius: 999px; padding: 3px 10px; background: var(--soft); color: var(--ink-2); }
.tp-chip.tp-ok { background: var(--ok-50); color: var(--ok); }
.tp-chip.tp-full { background: var(--warn-50); color: var(--sun-ink); }
.tp-chip.tp-bad { background: var(--red-50); color: var(--red); }
.tp-chip.tp-done { background: var(--soft); color: var(--muted); }
.tp-banner .ac-name a { color: #fff; text-decoration: none; }
.tp-banner .ac-name a:hover { text-decoration: underline; }
.tp-ban-eye { font-size: 11.5px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255, 255, 255, 0.78); }
.tp-aside { margin-left: auto; text-align: right; display: grid; gap: 2px; color: rgba(255, 255, 255, 0.85); font-size: 13px; flex: none; }
.tp-price { font-size: 34px; line-height: 1.1; color: #fff; }
.tp-ride .ride { padding-top: 0; gap: 24px; grid-template-columns: minmax(0, 1fr) 360px; }
.tp-ride .book-route { display: none; }
.tp-ride .ride-main { display: grid; gap: 16px; min-width: 0; }
.tp-ride .ride-main > * { margin: 0; }
.tp-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 20px; align-items: start; }
.tp-main { display: grid; gap: 16px; min-width: 0; }
.tp-side { position: sticky; top: 88px; display: grid; gap: 16px; }
.tp-card { padding: 18px 20px; }
.tp-card h2.h3 { margin: 0 0 6px; }
.tp-card .req-note { margin: 4px 0 0; padding: 12px 14px; border-left: 3px solid var(--brand); background: var(--soft); border-radius: 0 12px 12px 0; font-style: italic; }
.tp-list { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 12px; }
.tp-list li { display: grid; grid-template-columns: 20px 1fr; gap: 10px; align-items: start; color: var(--ink-2); font-size: 14.5px; }
.tp-list .ic { color: var(--brand); margin-top: 2px; }
.tp-offer { padding: 20px; margin: 0; }
.offer-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.tp-main .offer-card { box-shadow: var(--shadow-sm); }
/* full ride */
.full-state { display: grid; gap: 10px; margin-top: 14px; }
.full-head { display: flex; gap: 12px; align-items: flex-start; }
.full-head p { margin: 2px 0 0; }
.full-ic { width: 40px; height: 40px; border-radius: 50%; background: var(--warn-50); color: var(--sun-ink); display: grid; place-items: center; flex: none; }
.full-alt { display: grid; gap: 8px; margin-top: 4px; }
.full-alt-h { color: var(--muted); }
.alt-ride { display: grid; grid-template-columns: minmax(0, 1fr) auto auto 16px; gap: 10px; align-items: center; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; text-decoration: none; color: inherit; background: #fff; }
.alt-ride:hover { border-color: var(--brand); background: var(--brand-50); }
.alt-when { font-weight: 700; font-size: 14px; }
@media (max-width: 900px) {
  .tp-grid, .tp-ride .ride { grid-template-columns: minmax(0, 1fr); }
  .tp-side { position: static; }
}
@media (max-width: 560px) {
  .tp-aside { margin-left: 0; text-align: left; width: 100%; grid-auto-flow: row; }
  .tp-price { font-size: 28px; }
  .alt-ride { grid-template-columns: minmax(0, 1fr) auto 16px; }
  .alt-ride .muted { display: none; }
}
.tp-block-h { margin: 0 0 10px; }

/* Offer card, My Account style */
.offer-card{padding:0;gap:0;overflow:hidden;border-radius:18px}
.offer-card .offer-tags{padding:12px 20px 0;margin:0}
.offer-card .offer-top{padding:16px 20px;background:linear-gradient(180deg,#f7f9fe,#fff);border-bottom:1px solid var(--line);align-items:center}
.offer-card .offer-price strong{font-size:28px;letter-spacing:-.02em}
.offer-body{display:grid;gap:14px;padding:16px 20px}
.offer-body.has-photo{grid-template-columns:200px minmax(0,1fr);align-items:start}
.offer-body .offer-car{width:200px;height:140px;max-height:none;object-fit:cover;border-radius:14px;margin:0;display:block}
.offer-facts{display:grid;gap:10px;min-width:0;align-content:start}
.offer-facts .offer-last{margin:0}
.offer-card .offer-contact{margin:0 20px 4px}
.offer-card .offer-actions{padding:14px 20px 18px;border-top:1px solid var(--line);margin-top:2px;align-items:center}
.offer-card.won{border-color:var(--ok)}
@media(max-width:560px){.offer-body.has-photo{grid-template-columns:1fr}.offer-body .offer-car{width:100%;height:180px}.offer-card .offer-top,.offer-body,.offer-card .offer-actions{padding-left:16px;padding-right:16px}}
@media(max-width:560px){.offer-card .offer-price{text-align:left}}

/* Offer header: My Account banner language */
.offer-card .offer-top{background:linear-gradient(135deg,#0a1f5c 0%,#0b3aa8 100%);border-bottom:0;color:#fff}
.offer-card .offer-who,.offer-card .offer-who strong,.offer-card .offer-price strong{color:#fff}
.offer-card .offer-who strong{font-size:19px}
.offer-card .offer-sub,.offer-card .offer-price .muted{color:rgba(255,255,255,.78)}
.offer-card .offer-who .avatar,.offer-card .offer-who .av{box-shadow:0 0 0 3px #f5c518}
.offer-card .offer-vs.over{color:#ffd0d0}
.offer-card .offer-vs.ok{color:#9ff0c0}
.offer-k{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted,#5b6b86)}
.offer-facts .offer-carline{font-size:20px;margin-top:-6px}
.offer-kv{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px}
.offer-kv>div{display:grid;gap:3px;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:var(--soft,#f4f7fc)}
.offer-kv strong{font-size:15px;color:var(--ink)}
.offer-card .offer-who>div>*:not(strong):not(.offer-sub){color:rgba(255,255,255,.92)!important}

/* Booking card: no overflow, quieter */
.coord-actions-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.coord-actions-grid>*{min-width:0}
.book-free{display:flex;align-items:center;gap:6px;margin:10px 0 0}
.book-free .ic{width:14px;height:14px;color:var(--ok,#128a4a)}

/* Ride page, minimal */
.tp-k3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:560px){.tp-k3{grid-template-columns:repeat(2,minmax(0,1fr))}.tp-k3>:last-child{grid-column:1/-1}}
.tp-ride .map{height:240px;min-height:0}
.tp-export{display:flex;gap:8px;flex-wrap:wrap;opacity:.85}
.tp-ride .ask-card,.tp-ride .share-card{padding:14px 16px}
.tp-ride .ask-card strong,.tp-ride .share-card strong{display:block;margin-bottom:10px}

/* ---- Car photo gallery, lightbox and manager ---- */
.cg{display:grid;gap:8px;margin:0}
.cg-cover{position:relative;display:block;width:100%;padding:0;border:0;background:#e9eef7;border-radius:16px;overflow:hidden;cursor:zoom-in;aspect-ratio:16/10}
.cg-cover img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .25s}
.cg-cover:hover img{transform:scale(1.02)}
.cg-more{position:absolute;right:10px;bottom:10px;display:inline-flex;align-items:center;gap:6px;padding:6px 11px;border-radius:999px;background:rgba(10,20,50,.78);color:#fff;font-size:12.5px;font-weight:700;backdrop-filter:blur(4px)}
.cg-more .ic{width:14px;height:14px}
.cg-thumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:8px}
.cg-th{padding:0;border:2.5px solid transparent;border-radius:12px;overflow:hidden;aspect-ratio:4/3;background:#e9eef7;cursor:pointer;transition:transform .18s ease,border-color .18s,box-shadow .18s}
.cg-th img{width:100%;height:100%;object-fit:cover;display:block}
.cg-th:hover{transform:translateY(-2px)}
.cg-th.on{border-color:#0b3fae;box-shadow:0 0 0 3px rgba(11,63,174,.18);transform:translateY(-2px)}
.offer-body .offer-car{width:200px;height:auto;aspect-ratio:auto}
.offer-body .offer-car .cg-cover{aspect-ratio:10/7;border-radius:14px}
.profile-car .cg{margin-bottom:10px}
.uf-carphoto{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.uf-carphoto img{width:88px;height:64px;object-fit:cover;border-radius:10px}
.lb{position:fixed;inset:0;z-index:1000;background:rgba(6,12,30,.92);display:flex;align-items:center;justify-content:center;flex-direction:column;gap:10px;padding:16px}
.lb-stage{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;max-width:1100px;max-height:82vh}
.lb-img{max-width:100%;max-height:80vh;border-radius:14px;object-fit:contain;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.lb-x{position:absolute;top:14px;right:16px;width:44px;height:44px;border-radius:50%;border:0;background:rgba(255,255,255,.14);color:#fff;font-size:28px;line-height:1;cursor:pointer}
.lb-nav{flex:none;width:46px;height:46px;border-radius:50%;border:0;background:rgba(255,255,255,.14);color:#fff;font-size:32px;line-height:1;cursor:pointer}
.lb-x:hover,.lb-nav:hover{background:rgba(255,255,255,.26)}
.lb-count{color:#fff;font-weight:700;font-size:14px;min-height:20px}
body.lb-open{overflow:hidden}
@media(max-width:560px){.lb-nav{position:absolute;bottom:18px;width:44px;height:44px}.lb-prev{left:18px}.lb-next{right:18px}.lb-stage{max-height:76vh}.lb-count{position:absolute;bottom:30px}}
.cp-tile{align-items:flex-start}
.cp-meta{width:100%}
.cp-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin-top:12px}
.cp-slot{position:relative;aspect-ratio:4/3;border-radius:14px;overflow:hidden;background:#e9eef7;border:1px solid var(--line)}
.cp-img{display:block;width:100%;height:100%;padding:0;border:0;background:none;cursor:zoom-in}
.cp-img img{width:100%;height:100%;object-fit:cover;display:block}
.cp-cover{position:absolute;left:6px;bottom:6px;padding:3px 9px;border-radius:999px;background:#0b3aa8;color:#fff;font-size:11px;font-weight:800;letter-spacing:.02em}
.cp-make{position:absolute;left:6px;bottom:6px;padding:3px 9px;border-radius:999px;border:0;background:rgba(255,255,255,.92);color:#0b3aa8;font-size:11px;font-weight:800;cursor:pointer}
.cp-del{position:absolute;right:6px;top:6px;width:26px;height:26px;border-radius:50%;border:0;background:rgba(10,20,50,.72);color:#fff;font-size:17px;line-height:1;cursor:pointer}
.cp-del:hover{background:#c8102e}
.cp-add{aspect-ratio:4/3;border-radius:14px;border:1.5px dashed #9db3df;background:#f6f9ff;color:#0b3aa8;display:grid;place-content:center;justify-items:center;gap:2px;font-weight:700;font-size:13px;cursor:pointer}
.cp-add:hover{background:#eaf1ff}
.cp-add small{color:var(--muted,#5b6b86);font-weight:600}
@media(max-width:900px){.cp-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:560px){.cp-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

.cg-multi .cg-cover{aspect-ratio:2/1}
.cg-one .cg-cover{aspect-ratio:16/9}
.offer-body .offer-car .cg-cover{aspect-ratio:10/7}

/* Unsaved profile changes: one bar on every My account tab */
.save-bar{position:fixed;left:50%;transform:translateX(-50%);bottom:20px;z-index:60;display:flex;align-items:center;gap:10px;max-width:calc(100vw - 32px);padding:10px 12px 10px 18px;border-radius:999px;background:#0a1f5c;color:#fff;box-shadow:0 12px 36px rgba(10,31,92,.35)}
.save-bar[hidden]{display:none}
.save-bar-t{font-size:14px;font-weight:600;margin-right:6px}
.save-bar .btn-ghost{background:transparent;border-color:rgba(255,255,255,.4);color:#fff}
.save-bar .btn-primary{background:#f5c518;color:#0a1f5c;border-color:#f5c518}
@media(max-width:700px){.save-bar{bottom:76px;border-radius:18px;flex-wrap:wrap;justify-content:flex-end;width:calc(100vw - 24px)}.save-bar-t{flex:1 1 100%;margin:0 0 2px}}

/* ===== Ask for a ride (#/request): calm, soft-filled form, one card ===== */
.rq-page { background: radial-gradient(120% 60% at 85% -10%, var(--brand-50) 0%, rgba(237, 243, 255, 0) 60%), var(--bg); padding-bottom: 40px; }
.rq-wrap { max-width: 1080px; }
.rq-hero { display: grid; grid-template-columns: 1.05fr 0.95fr; align-items: center; gap: 8px; padding-top: 44px; }
.rq-hero-copy { padding-bottom: 56px; position: relative; z-index: 1; }
.rq-hero h1 { font-size: clamp(36px, 5.2vw, 58px); line-height: 1.02; letter-spacing: -0.035em; font-weight: 800; margin: 10px 0 0; color: var(--ink); }
.rq-intro { margin: 16px 0 0; max-width: 40ch; font-size: 17px; line-height: 1.55; color: var(--ink-2); }
.rq-trust { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 18px; white-space: nowrap; font-size: 13.5px; font-weight: 600; color: var(--ink-2); }
.rq-trust li { display: inline-flex; align-items: center; gap: 7px; }
.rq-trust .ic { color: var(--brand); }
.rq-hero-ph.ph { border-radius: 30px; box-shadow: none; aspect-ratio: 5 / 4; background: transparent; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 42%), linear-gradient(0deg, transparent 0, #000 28%); -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent 0, #000 42%), linear-gradient(0deg, transparent 0, #000 28%); mask-composite: intersect; }

.rq-form { --rq-acc: var(--brand); --rq-acc-bg: var(--brand-50); position: relative; z-index: 2; max-width: 760px; margin: -64px auto 0; background: var(--surface); border-radius: 30px; padding: 30px 34px 34px; box-shadow: 0 1px 2px rgba(10, 25, 47, 0.04), 0 24px 64px -16px rgba(0, 40, 120, 0.2), 0 0 0 1px rgba(13, 34, 64, 0.05); }
.rq-form.is-group { --rq-acc: var(--role-grp); --rq-acc-bg: var(--role-grp-bg); }
.rq-modes { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; background: var(--soft); border-radius: 999px; }
.rq-mode-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 46px; border: 0; border-radius: 999px; background: transparent; font: inherit; font-weight: 700; font-size: 15px; color: var(--muted); cursor: pointer; transition: background var(--t) var(--ease), color var(--t) var(--ease), box-shadow var(--t) var(--ease); }
.rq-mode-btn:hover { color: var(--ink); }
.rq-mode-btn.on { background: #fff; color: var(--rq-acc); box-shadow: 0 1px 2px rgba(10, 25, 47, 0.08), 0 4px 12px -2px rgba(10, 25, 47, 0.1); }
.rq-mode-btn:focus-visible, .rq-step:focus-visible, .rq-swap:focus-visible, .rq-pill:focus-visible, .rq-details-toggle:focus-visible { outline: 2px solid var(--rq-acc); outline-offset: 2px; }
.rq-mode-sub { margin: 12px 4px 0; font-size: 14px; color: var(--muted); }
.rq-sec { margin-top: 30px; }
.rq-h { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; font-size: 17px; font-weight: 700; letter-spacing: -0.01em; color: var(--ink); }
.rq-h b { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--rq-acc-bg); color: var(--rq-acc); font-size: 12.5px; font-weight: 800; }

.rq-box { position: relative; display: block; background: var(--soft); border: 1.5px solid transparent; border-radius: 16px; padding: 11px 16px 12px; transition: background var(--t) var(--ease), border-color var(--t) var(--ease), box-shadow var(--t) var(--ease); }
.rq-box[hidden] { display: none; }
.rq-box:hover { background: #ebf0f8; }
.rq-box:focus-within { background: #fff; border-color: var(--rq-acc); box-shadow: 0 0 0 4px var(--rq-acc-bg); }
.rq-box:has(.invalid) { background: #fff; border-color: #e11d48; box-shadow: 0 0 0 4px rgba(225, 29, 72, 0.1); }
.rq-lab { display: block; margin-bottom: 3px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted); }
.rq-lab-row { display: flex; justify-content: space-between; align-items: baseline; }
.rq-count-note { font-size: 12px; color: var(--muted); }
.rq-box .pi-input, .rq-box .pi-trigger-input { font-size: 16.5px; font-weight: 600; }
.rq-box .cal-field { border: 0; padding: 0; background: transparent; box-shadow: none; border-radius: 0; }
.rq-box .cal-field:hover, .rq-box .cal-field:focus-within, .rq-box .cal-field.invalid { border: 0; box-shadow: none; }
.rq-box .pi-list { left: -17px; right: auto; top: calc(100% + 16px); width: calc(100% + 34px); min-width: 280px; }
.rq-box .cal-field .pi-popover-date { left: -17px; top: calc(100% + 16px); width: min(390px, calc(100vw - 32px)); }
.rq-box .pi-chev { color: var(--muted); }

.rq-route { position: relative; display: grid; gap: 10px; padding-left: 30px; }
.rq-box-place { padding-right: 68px; }
.rq-rail { position: absolute; left: 4px; top: 30px; bottom: 30px; width: 14px; display: flex; flex-direction: column; align-items: center; }
.rq-rail i { width: 12px; height: 12px; border-radius: 50%; border: 3px solid var(--rq-acc); background: #fff; }
.rq-rail i.end { background: var(--rq-acc); }
.rq-rail u { flex: 1; width: 2px; margin: 4px 0; background: repeating-linear-gradient(180deg, var(--line-2) 0 4px, transparent 4px 8px); }
.rq-swap { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); z-index: 3; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--line-2); background: #fff; color: var(--rq-acc); box-shadow: 0 4px 14px -4px rgba(10, 25, 47, 0.2); cursor: pointer; transition: transform 0.25s var(--ease), background var(--t); }
.rq-swap:hover { background: var(--rq-acc-bg); }
.rq-swap .ic { width: 18px; height: 18px; transform: rotate(0deg); transition: transform 0.35s var(--ease); }
.rq-swap.spin .ic { transform: rotate(180deg); }

.rq-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.rq-box-step { display: block; }
.rq-stepper { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.rq-count { display: flex; align-items: baseline; gap: 7px; min-width: 0; }
.rq-num { font-size: 28px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; color: var(--ink); font-variant-numeric: tabular-nums; }
.rq-num.is-empty { color: var(--muted); }
.rq-unit { font-size: 14px; color: var(--muted); white-space: nowrap; }
.rq-step { display: grid; place-items: center; flex: none; width: 38px; height: 38px; padding: 0; border-radius: 50%; border: 1px solid var(--line-2); background: #fff; color: var(--ink); cursor: pointer; transition: background var(--t), color var(--t), border-color var(--t), transform 0.12s; }
.rq-step .ic { width: 18px; height: 18px; }
.rq-step:hover:not(:disabled) { background: var(--rq-acc-bg); color: var(--rq-acc); border-color: transparent; }
.rq-step:active:not(:disabled) { transform: scale(0.92); }
.rq-step:disabled { opacity: 0.35; cursor: default; }
.rq-box-budget { cursor: text; }
.rq-peso-row { display: flex; align-items: center; gap: 6px; }
.rq-peso { font-size: 22px; font-weight: 700; color: var(--muted); }
.rq-box .rq-peso-row input { border: 0; background: transparent; padding: 0; width: 100%; font: inherit; font-size: 22px; font-weight: 800; color: var(--ink); letter-spacing: -0.02em; box-shadow: none; outline: none; -moz-appearance: textfield; }
.rq-box .rq-peso-row input::placeholder { font-size: 15px; font-weight: 500; color: #8a98ad; letter-spacing: 0; }
.rq-peso-row input::-webkit-outer-spin-button, .rq-peso-row input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.rq-help { display: block; margin: 8px 4px 0; font-size: 13px; color: var(--muted); }

.rq-details { margin-top: 22px; }
.rq-details-toggle { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 4px; border: 0; background: transparent; font: inherit; font-weight: 700; font-size: 15px; color: var(--rq-acc); text-align: left; cursor: pointer; }
.rq-details-toggle span { flex: 1; }
.rq-details-toggle em { font-style: normal; font-weight: 600; font-size: 12.5px; color: var(--muted); }
.rq-details-toggle .ic:last-child { color: var(--muted); transition: transform var(--t) var(--ease); }
.rq-details.open .rq-details-toggle .ic:last-child { transform: rotate(180deg); }
.rq-details-body { display: none; gap: 12px; margin-top: 8px; }
.rq-details.open .rq-details-body { display: grid; animation: rqIn 0.22s var(--ease); }
@keyframes rqIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.rq-pills { display: flex; gap: 8px; margin: 6px 0 8px; }
.rq-pill { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line-2); background: #fff; font: inherit; font-size: 13.5px; font-weight: 700; color: var(--ink-2); cursor: pointer; }
.rq-pill.on { background: var(--rq-acc); border-color: var(--rq-acc); color: #fff; }
.rq-box input#q-stop, .rq-box textarea { width: 100%; border: 0; background: transparent; padding: 0; font: inherit; font-size: 16px; font-weight: 600; color: var(--ink); box-shadow: none; outline: none; resize: none; }
.rq-box textarea { font-weight: 500; line-height: 1.5; min-height: 48px; }
.rq-box input#q-stop::placeholder, .rq-box textarea::placeholder { color: #8a98ad; font-weight: 500; }

.rq-submit { margin-top: 28px; }
.rq-summary { margin: 0 0 14px; font-size: 14px; line-height: 1.4; text-align: center; color: var(--muted); }
.rq-summary.ready { color: var(--ink); font-weight: 600; }
.rq-submit .error { margin: 0 0 12px; text-align: center; }
.rq-submit-btn { width: 100%; height: 58px; border-radius: 999px; font-size: 17px; font-weight: 700; letter-spacing: -0.01em; border: 0; color: #fff; background: linear-gradient(135deg, #1a56d6 0%, var(--brand) 55%, var(--brand-600) 100%); box-shadow: 0 14px 30px -10px rgba(0, 56, 168, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.18); transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease), filter var(--t); }
.rq-submit-btn:hover:not(:disabled) { transform: translateY(-1px); filter: brightness(1.05); box-shadow: 0 18px 36px -10px rgba(0, 56, 168, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.2); }
.rq-submit-btn:active:not(:disabled) { transform: translateY(0) scale(0.99); }
.rq-submit-btn:disabled { opacity: 0.6; cursor: default; }
.rq-form.is-group .rq-submit-btn { background: linear-gradient(135deg, #2f8a4a 0%, var(--role-grp) 100%); color: #fff; border: 0; box-shadow: 0 14px 30px -10px rgba(31, 107, 52, 0.55); }
.rq-fine { margin: 14px 8px 0; text-align: center; font-size: 12.5px; line-height: 1.5; color: var(--muted); }

@media (max-width: 860px) {
  .rq-hero { grid-template-columns: 1fr; padding-top: 24px; gap: 0; }
  .rq-hero-copy { padding: 16px 2px 8px; }
  .rq-hero-ph.ph { order: -1; aspect-ratio: 16 / 8; border-radius: 22px; -webkit-mask-image: linear-gradient(0deg, transparent 0, #000 45%); mask-image: linear-gradient(0deg, transparent 0, #000 45%); margin-bottom: 0; }
  .rq-form { margin-top: 12px; }
}
@media (max-width: 720px) {
  .rq-form { padding: 20px 18px 0; border-radius: 24px; }
  .rq-form { padding-bottom: 22px; }
  .rq-summary { margin-bottom: 10px; }
  .rq-fine { margin-top: 10px; }
}
@media (max-width: 560px) {
  .rq-grid2 { grid-template-columns: 1fr; }
  .rq-hero h1 { font-size: 36px; }
  .rq-trust { gap: 8px 14px; font-size: 13px; }
  .rq-intro { font-size: 16px; }
  .rq-box-place { padding-right: 62px; }
}
@media (prefers-reduced-motion: reduce) { .rq-details.open .rq-details-body { animation: none; } .rq-swap .ic, .rq-submit-btn { transition: none; } }

.rq-box .pi.invalid .pi-input { color: var(--ink); }

/* ===== Offer a ride (#/offer): hero, numbered sections, live preview ===== */
.of-page { --rq-acc: var(--brand); --rq-acc-bg: var(--brand-50); background: radial-gradient(110% 50% at 15% -8%, var(--brand-50) 0%, rgba(237, 243, 255, 0) 62%), var(--bg); padding-bottom: 48px; }
.of-wrap { max-width: 1160px; }
.of-hero { position: relative; min-height: 360px; display: flex; align-items: center; padding: 40px 0 36px; }
.of-hero-copy { position: relative; z-index: 2; max-width: 520px; }
.of-hero h1 { margin: 8px 0 0; font-size: clamp(38px, 5.4vw, 60px); line-height: 1.02; letter-spacing: -0.035em; font-weight: 800; color: var(--ink); }
.of-lead { margin: 14px 0 0; font-size: 19px; font-weight: 700; letter-spacing: -0.01em; color: var(--ink); }
.of-sub { margin: 8px 0 0; font-size: 15.5px; line-height: 1.55; color: var(--ink-2); }
.of-perks { list-style: none; margin: 24px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, auto); gap: 14px 22px; justify-content: start; font-size: 13.5px; font-weight: 600; line-height: 1.3; color: var(--ink); }
.of-perks li { display: flex; align-items: center; gap: 10px; max-width: 150px; }
.of-perk-ic { display: grid; place-items: center; flex: none; width: 42px; height: 42px; border-radius: 12px; background: var(--brand-50); color: var(--brand); }
.of-hero-ph.ph { position: absolute; right: 0; top: 0; bottom: 0; width: 62%; margin: 0; border-radius: 28px; box-shadow: none; background: transparent; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 46%), linear-gradient(0deg, transparent 0, #000 22%); -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent 0, #000 46%), linear-gradient(0deg, transparent 0, #000 22%); mask-composite: intersect; }
.of-hero-ph.ph img { object-position: 50% 30%; }

.of-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 24px; align-items: start; }
.of-form { background: var(--surface); border-radius: 26px; padding: 8px 36px 36px; box-shadow: 0 1px 2px rgba(10, 25, 47, 0.04), 0 22px 56px -18px rgba(0, 40, 120, 0.18), 0 0 0 1px rgba(13, 34, 64, 0.05); }
.of-form [hidden] { display: none !important; }
.of-form .stack { display: grid; gap: 10px; }
.of-sec { padding: 28px 0; display: grid; gap: 16px; }
.of-sec + .of-sec { border-top: 1px solid var(--line); }
.of-sec-h { display: flex; align-items: center; gap: 14px; margin-bottom: 4px; }
.of-sec-h b { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 50%; background: linear-gradient(135deg, #1a56d6, var(--brand)); color: #fff; font-size: 16px; font-weight: 800; box-shadow: 0 6px 14px -4px rgba(0, 56, 168, 0.5); }
.of-sec-h h2 { margin: 0; font-size: 20px; font-weight: 700; letter-spacing: -0.015em; color: var(--ink); }
.of-sec-h p { margin: 2px 0 0; font-size: 14px; color: var(--muted); }
.of-form .of-f .label { font-weight: 600; font-size: 14px; color: var(--ink-2); }
.of-form .label em { font-style: normal; font-weight: 500; color: var(--muted); }
.of-form .field input, .of-form .field textarea, .of-form .field .pi { border: 1px solid var(--line-2); border-radius: 12px; background: #fff; font-size: 15.5px; }
.of-form .field input, .of-form .field .pi { min-height: 50px; }
.of-form .field .pi { padding: 8px 14px; display: flex; flex-direction: column; justify-content: center; }
.of-form .field .pi:hover, .of-form .field input:hover, .of-form .field textarea:hover { border-color: #b6c2d6; }
.of-form .field input:focus, .of-form .field textarea:focus, .of-form .field .pi:focus-within { border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-50); }
.of-form .cal-field { padding: 8px 14px; }
.of-ctl { display: flex; align-items: center; gap: 10px; min-height: 50px; padding: 0 14px; border: 1px solid var(--line-2); border-radius: 12px; background: #fff; color: var(--muted); transition: border-color var(--t), box-shadow var(--t); }
.of-ctl:focus-within { border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-50); color: var(--brand); }
.of-form .of-ctl input, .of-form .of-ctl input:focus, .of-form .of-ctl input:hover { border: 0; box-shadow: none; padding: 0; min-height: 0; background: transparent; flex: 1; min-width: 0; color: var(--ink); font-weight: 600; outline: none; }
.of-form .of-ctl .ic { flex: none; }
.of-peso { font-size: 18px; font-weight: 700; color: var(--muted); }
.of-price input { font-size: 18px !important; font-weight: 800 !important; letter-spacing: -0.01em; }
.of-route { display: grid; grid-template-columns: minmax(0, 1fr) 44px minmax(0, 1fr); gap: 8px; align-items: end; }
.of-swap { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 3px; border-radius: 50%; border: 0; background: var(--brand-50); color: var(--brand); cursor: pointer; transition: transform 0.2s var(--ease), background var(--t); }
.of-swap:hover { background: var(--brand-100); }
.of-swap .ic { width: 20px; height: 20px; transition: transform 0.35s var(--ease); }
.of-swap.spin .ic { transform: rotate(180deg); }
.of-g2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.of-g3 { display: grid; grid-template-columns: 1.15fr 1fr 1.1fr; gap: 14px; }
.of-seatprice { align-items: start; }
.of-seatbox { min-height: 50px; display: flex; align-items: center; padding: 4px 10px 4px 6px; border: 1px solid var(--line-2); border-radius: 999px; background: #fff; }
.of-seatbox .rq-stepper { width: 100%; }
.of-seatbox .rq-step { background: var(--brand-50); border-color: transparent; color: var(--brand); width: 36px; height: 36px; }
.of-seatbox .rq-step:disabled { opacity: 0.4; }
.of-form .stops-edit { display: grid; gap: 10px; margin: 0; }
.of-form .stop-row { display: flex; align-items: center; gap: 10px; }
.of-form .stop-row .stop-n { margin: 0; width: 26px; height: 26px; flex: none; }
.of-x { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 50%; border: 0; background: var(--soft); color: var(--muted); cursor: pointer; }
.of-x:hover { background: #fde7ea; color: var(--red); }
.of-add { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: max-content; max-width: 100%; min-height: 46px; padding: 0 20px; border: 1px dashed #b6c2d6; border-radius: 12px; background: #fff; font: inherit; font-weight: 700; font-size: 14.5px; color: var(--brand); cursor: pointer; transition: background var(--t), border-color var(--t); }
.of-add:hover { background: var(--brand-50); border-color: var(--brand); }
.of-add[hidden] { display: none; }
.of-lab-row { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
.of-lab-row .label { margin: 0; }
.of-count { font-size: 12px; color: var(--muted); }
.of-form textarea { min-height: 96px; padding: 12px 14px; resize: vertical; }
.of-submit-area { padding-top: 28px; border-top: 1px solid var(--line); }
.of-submit { width: 100%; height: 58px; border: 0; border-radius: 999px; gap: 10px; font-size: 17px; font-weight: 700; color: #fff; background: linear-gradient(135deg, #1a56d6 0%, var(--brand) 55%, var(--brand-600) 100%); box-shadow: 0 14px 30px -10px rgba(0, 56, 168, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.18); transition: transform var(--t) var(--ease), filter var(--t); }
.of-submit:hover:not(:disabled) { transform: translateY(-1px); filter: brightness(1.05); }
.of-submit:disabled { opacity: 0.6; }
.of-submit-area .hint { text-align: center; margin-top: 14px; }
.of-submit-area .error { margin-bottom: 12px; text-align: center; }

.of-side { position: sticky; top: 88px; display: grid; gap: 18px; }
.of-good { position: relative; overflow: hidden; padding: 26px 24px 24px; border-radius: 24px; background: linear-gradient(165deg, #f4f8ff 0%, #dbe7ff 100%); box-shadow: 0 0 0 1px rgba(0, 56, 168, 0.08); }
.of-good-ic { display: grid; place-items: center; width: 64px; height: 64px; margin-bottom: 18px; border-radius: 20px; background: #fff; color: var(--brand); box-shadow: 0 10px 24px -10px rgba(0, 56, 168, 0.45); }
.of-good h2 { margin: 0 0 16px; font-size: 21px; line-height: 1.2; font-weight: 800; letter-spacing: -0.02em; color: var(--ink); }
.of-good ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; font-size: 14.5px; color: var(--ink-2); }
.of-good li { display: flex; align-items: flex-start; gap: 10px; line-height: 1.35; }
.of-good li .ic { flex: none; margin-top: 1px; color: var(--ok); }
.of-pv { padding: 22px 22px 18px; border-radius: 24px; background: var(--surface); box-shadow: 0 1px 2px rgba(10, 25, 47, 0.04), 0 16px 40px -16px rgba(0, 40, 120, 0.16), 0 0 0 1px rgba(13, 34, 64, 0.05); }
.of-pv h2 { margin: 0; font-size: 19px; font-weight: 800; letter-spacing: -0.015em; }
.of-pv-sub { margin: 4px 0 18px; font-size: 13.5px; color: var(--muted); }
.of-pv-route { list-style: none; margin: 0; padding: 0; position: relative; display: grid; gap: 14px; }
.of-pv-route::before { content: ""; position: absolute; left: 5px; top: 10px; bottom: 10px; width: 2px; background: var(--line-2); }
.of-pv-stop { position: relative; display: flex; align-items: baseline; gap: 14px; font-size: 14.5px; color: var(--ink-2); }
.of-pv-stop i { position: relative; z-index: 1; flex: none; width: 12px; height: 12px; align-self: center; border-radius: 50%; background: #fff; border: 3px solid var(--brand); }
.of-pv-stop.mid i { width: 8px; height: 8px; margin: 0 2px; border: 0; background: var(--ink-2); }
.of-pv-stop.dest i { background: var(--brand); }
.of-pv-name { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.of-pv-stop.end .of-pv-name { font-weight: 700; color: var(--ink); }
.of-pv-time { flex: none; font-size: 13px; color: var(--muted); }
.of-pv-stop.is-empty .of-pv-name { font-weight: 500; color: #8a98ad; }
.of-pv-meta { list-style: none; margin: 18px 0 0; padding: 18px 0 0; border-top: 1px solid var(--line); display: grid; gap: 14px; font-size: 14.5px; font-weight: 600; color: var(--ink); }
.of-pv-meta li { display: flex; align-items: center; gap: 14px; }
.of-pv-meta .ic { flex: none; color: var(--ink-2); }
.of-pv-meta li.is-empty { color: #8a98ad; font-weight: 500; }
.of-pv-note { display: flex; align-items: center; gap: 8px; margin: 18px 0 0; padding-top: 14px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--muted); }

@media (max-width: 1020px) {
  .of-layout { grid-template-columns: 1fr; }
  .of-side { position: static; grid-template-columns: 1fr 1fr; }
}
@media (max-width: 860px) {
  .of-hero { flex-direction: column; align-items: stretch; min-height: 0; padding: 20px 0 28px; }
  .of-hero-ph.ph { position: relative; order: -1; width: 100%; aspect-ratio: 16 / 9; border-radius: 22px; -webkit-mask-image: linear-gradient(0deg, transparent 0, #000 40%); mask-image: linear-gradient(0deg, transparent 0, #000 40%); margin-bottom: 4px; }
  .of-hero-copy { padding: 8px 2px 0; max-width: none; }
  .of-perks { grid-template-columns: repeat(3, 1fr); gap: 10px; }
  .of-perks li { flex-direction: column; align-items: flex-start; max-width: none; gap: 8px; }
}
@media (max-width: 720px) {
  .of-form { padding: 4px 18px 24px; border-radius: 22px; }
  .of-side { grid-template-columns: 1fr; }
  .of-g3, .of-g2 { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .of-route { grid-template-columns: 1fr; }
  .of-swap { justify-self: end; margin: -6px 0 -6px; transform: rotate(90deg); }
  .of-hero h1 { font-size: 38px; }
  .of-perks { font-size: 12.5px; }
}
@media (prefers-reduced-motion: reduce) { .of-swap .ic, .of-submit { transition: none; } }
.of-form .field .pi input, .of-form .field .pi input:hover, .of-form .field .pi input:focus { border: 0; box-shadow: none; background: transparent; min-height: 0; padding: 1px 0; border-radius: 0; }
.of-form .field .pi { min-height: 54px; }
.of-perks li { max-width: 190px; }

/* ===== Find a ride (#/search): hero, floating search card, filters, premium result cards ===== */
.fr-page { background: radial-gradient(110% 40% at 80% -6%, var(--brand-50) 0%, rgba(237, 243, 255, 0) 60%), var(--bg); padding-bottom: 56px; }
.fr-wrap { max-width: 1200px; }
.fr-hero { position: relative; display: flex; align-items: center; min-height: 340px; padding: 40px 0 70px; }
.fr-hero-copy { position: relative; z-index: 2; max-width: 560px; }
.fr-hero h1 { margin: 8px 0 0; font-size: clamp(34px, 4.8vw, 56px); line-height: 1.04; letter-spacing: -0.035em; font-weight: 800; color: var(--ink); }
.fr-hero-copy > p { margin: 16px 0 0; max-width: 46ch; font-size: 16.5px; line-height: 1.55; color: var(--ink-2); }
.fr-trust { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 22px; font-size: 14px; font-weight: 600; color: var(--ink-2); }
.fr-trust li { display: inline-flex; align-items: center; gap: 9px; }
.fr-trust .ic { color: var(--brand); }
.fr-hero-art { position: absolute; right: 0; top: 0; bottom: 0; width: 60%; }
.fr-hero-ph.ph { position: absolute; inset: 0; margin: 0; border-radius: 28px; box-shadow: none; background: transparent; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 44%), linear-gradient(0deg, transparent 0, #000 20%); -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent 0, #000 44%), linear-gradient(0deg, transparent 0, #000 20%); mask-composite: intersect; }
.fr-hero-ph.ph img { object-position: 50% 52%; }
.fr-glass { position: absolute; right: 18px; top: 28px; display: flex; align-items: center; gap: 12px; padding: 12px 16px 12px 12px; border-radius: 18px; background: rgba(20, 30, 50, 0.38); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.25); color: #fff; }
.fr-glass span { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: rgba(255, 255, 255, 0.22); }
.fr-glass p { margin: 0; font-size: 12.5px; line-height: 1.35; font-weight: 600; }

.fr-searchcard { position: relative; z-index: 3; margin-top: -48px; padding: 14px; border-radius: 28px; background: var(--surface); box-shadow: 0 1px 2px rgba(10, 25, 47, 0.04), 0 24px 60px -18px rgba(0, 40, 120, 0.22), 0 0 0 1px rgba(13, 34, 64, 0.05); }
.fr-searchcard .sb { box-shadow: none; border: 1px solid var(--line-2); border-radius: 20px; }
.fr-searchcard .sb-compact .sb-go { border-radius: 14px; background: linear-gradient(135deg, #1a56d6, var(--brand)); box-shadow: 0 10px 22px -8px rgba(0, 56, 168, 0.55); }
.fr-pop { display: flex; align-items: center; gap: 8px; padding: 14px 6px 2px; overflow-x: auto; scrollbar-width: none; }
.fr-pop::-webkit-scrollbar { display: none; }
.fr-pop[hidden] { display: none; }
.fr-pop-l { flex: none; font-size: 13.5px; font-weight: 700; color: var(--ink-2); margin-right: 4px; }
.fr-pop-chip { flex: none; padding: 8px 15px; border-radius: 999px; border: 1px solid var(--line-2); background: #fff; font-size: 13.5px; font-weight: 600; color: var(--ink); text-decoration: none; white-space: nowrap; transition: border-color var(--t), background var(--t), color var(--t); }
.fr-pop-chip:hover { border-color: var(--brand); background: var(--brand-50); color: var(--brand); }

.fr-page .results { grid-template-columns: 290px minmax(0, 1fr); gap: 28px; padding-top: 28px; }
.fr-page .res-side { top: 84px; padding: 22px 22px 24px; border: 0; border-radius: 24px; box-shadow: 0 1px 2px rgba(10, 25, 47, 0.04), 0 16px 40px -18px rgba(0, 40, 120, 0.16), 0 0 0 1px rgba(13, 34, 64, 0.05); }
.fr-page .filters h2 { font-size: 16px; font-weight: 800; letter-spacing: -0.01em; text-transform: none; color: var(--ink); margin: 0 0 10px; padding-top: 18px; border-top: 1px solid var(--line); }
.fr-page .filters .f-head { margin-bottom: 0; }
.fr-page .filters .f-head h2, .fr-page .filters > .f-head + .f-group { border-top: 0; padding-top: 0; }
.fr-page .filters > h2 { margin-top: 18px; }
.fr-page .f-opt { padding: 9px 0; font-size: 14.5px; }
.fr-page .f-count { background: var(--soft); color: var(--muted); font-weight: 600; border-radius: 999px; }
.f-price { padding-bottom: 4px; }
.f-range { position: relative; height: 26px; margin: 4px 6px 0; }
.f-range-track { position: absolute; left: 0; right: 0; top: 11px; height: 4px; border-radius: 4px; background: var(--soft-2); }
.f-range-fill { position: absolute; top: 11px; height: 4px; border-radius: 4px; background: var(--brand); }
.f-range input { position: absolute; left: -6px; right: -6px; width: calc(100% + 12px); top: 0; height: 26px; margin: 0; background: none; pointer-events: none; -webkit-appearance: none; appearance: none; }
.f-range input::-webkit-slider-runnable-track { background: none; height: 26px; }
.f-range input::-moz-range-track { background: none; }
.f-range input::-webkit-slider-thumb { -webkit-appearance: none; pointer-events: auto; width: 22px; height: 22px; margin-top: 2px; border-radius: 50%; background: #fff; border: 3px solid var(--brand); box-shadow: 0 2px 8px rgba(0, 56, 168, 0.3); cursor: grab; }
.f-range input::-moz-range-thumb { pointer-events: auto; width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 3px solid var(--brand); cursor: grab; }
.f-range input:focus-visible::-webkit-slider-thumb { outline: 3px solid var(--brand-100); }
.f-range-vals { display: flex; justify-content: space-between; margin-top: 6px; font-size: 13px; font-weight: 700; color: var(--ink-2); }
.f-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.f-chip { padding: 7px 12px; border-radius: 999px; border: 1px solid var(--line-2); background: #fff; font-size: 13px; font-weight: 600; color: var(--ink-2); text-decoration: none; }
.f-chip:hover { border-color: var(--brand); color: var(--brand); }
.f-chip.on { background: var(--brand-50); border-color: var(--brand); color: var(--brand); }
.f-note { margin: 0; font-size: 13.5px; color: var(--muted); }

.fr-page .res-main { display: flex; flex-direction: column; gap: 0; }
.ds-wrap { position: relative; }
.fr-page .date-strip { gap: 10px; padding: 2px 52px 12px 2px; margin: 0; }
.fr-page .ds-chip { min-width: 108px; gap: 3px; padding: 12px 10px; border-radius: 16px; border: 1px solid var(--line); text-align: center; box-shadow: var(--shadow-sm); }
.fr-page .ds-wd { font-size: 13px; font-weight: 600; color: var(--muted); text-transform: none; letter-spacing: 0; }
.fr-page .ds-d { font-size: 18px; font-weight: 800; letter-spacing: -0.01em; }
.fr-page .ds-n { font-size: 12.5px; color: var(--muted); font-weight: 500; }
.fr-page .ds-chip.on { background: linear-gradient(160deg, #1a56d6, var(--brand-600)); box-shadow: 0 10px 22px -10px rgba(0, 56, 168, 0.6); }
.fr-page .ds-chip.on .ds-wd, .fr-page .ds-chip.on .ds-n { color: rgba(255, 255, 255, 0.85); }
.ds-next { position: absolute; right: 0; top: 50%; transform: translateY(-62%); display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line-2); background: #fff; color: var(--brand); box-shadow: 0 8px 20px -6px rgba(10, 25, 47, 0.25); cursor: pointer; }
.ds-next:hover { background: var(--brand-50); }
.fr-reshead { margin: 8px 0 14px; align-items: flex-end; }
.fr-count { margin: 0; font-size: 22px; font-weight: 800; letter-spacing: -0.02em; }
.fr-reshead .muted { margin: 4px 0 0; font-size: 14px; }
.fr-head-act { display: flex; align-items: center; gap: 10px; }
.fr-mapbtn { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 16px; border-radius: 12px; border: 1px solid var(--line-2); background: #fff; font-weight: 700; font-size: 14px; color: var(--brand); text-decoration: none; box-shadow: var(--shadow-sm); }
.fr-mapbtn:hover, .fr-mapbtn.on { background: var(--brand-50); border-color: var(--brand); }
.fr-map { height: 460px; margin: 0 0 18px; border-radius: 22px; overflow: hidden; background: var(--soft); box-shadow: 0 0 0 1px rgba(13, 34, 64, 0.08); }
.fr-map[hidden] { display: none; }
.fr-map .map-fallback { padding: 24px; }
.fr-pin { padding: 5px 10px; border-radius: 999px; border: 2px solid #fff; background: var(--brand); color: #fff; font: inherit; font-size: 12.5px; font-weight: 800; box-shadow: 0 4px 12px rgba(0, 56, 168, 0.4); cursor: pointer; }
.fr-pop-card { display: grid; gap: 4px; font-size: 13px; color: var(--ink-2); }
.fr-pop-card strong { color: var(--ink); font-size: 14px; }
.fr-pop-card a { margin-top: 4px; font-weight: 700; color: var(--brand); }
.fr-page .quick-chips { padding: 0 2px 14px; }
.fr-list { display: grid; gap: 16px; }
.fr-list > .res-day { margin: 6px 0 -4px; }

.fc { position: relative; display: grid; grid-template-columns: 230px minmax(0, 1fr) 190px; gap: 0; padding: 20px 22px; border-radius: 22px; background: var(--surface); box-shadow: 0 1px 2px rgba(10, 25, 47, 0.04), 0 10px 30px -14px rgba(0, 40, 120, 0.16), 0 0 0 1px rgba(13, 34, 64, 0.05); transition: box-shadow var(--t) var(--ease), transform var(--t) var(--ease); }
.fc:hover { transform: translateY(-2px); box-shadow: 0 1px 2px rgba(10, 25, 47, 0.04), 0 18px 40px -14px rgba(0, 40, 120, 0.24), 0 0 0 1px rgba(0, 56, 168, 0.18); }
.fc-full { opacity: 0.78; }
.fc-driver { display: flex; gap: 14px; padding-right: 20px; min-width: 0; }
.fc-driver .avatar { flex: none; width: 56px; height: 56px; font-size: 18px; }
.fc-driver-meta { display: grid; gap: 4px; align-content: start; min-width: 0; }
.fc-name { display: flex; align-items: center; gap: 6px; font-size: 16px; }
.fc-check { display: inline-grid; place-items: center; width: 17px; height: 17px; border-radius: 50%; background: var(--brand); color: #fff; }
.fc-rating { display: flex; align-items: center; gap: 4px; font-size: 14px; color: var(--ink-2); }
.fc-rating .ic-star { width: 15px; height: 15px; color: #f5a623; fill: #f5a623; }
.fc-rating span { color: var(--muted); }
.fc-rating-new { font-size: 13px; color: var(--muted); }
.fc-car { display: flex; align-items: center; gap: 6px; font-size: 13.5px; color: var(--ink-2); min-width: 0; }
.fc-car span { overflow-wrap: anywhere; }
.fc-car .ic { flex: none; color: var(--muted); }
.fc-perks { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12.5px; color: var(--muted); }
.fc-perk { display: inline-flex; align-items: center; gap: 5px; }
.fc-perk-women { color: #b4237f; font-weight: 600; }
.fc-perk-bolt { color: #a16207; font-weight: 600; }
.fc-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.fc-badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; background: var(--ok-50); color: var(--ok); font-size: 12px; font-weight: 700; }
.fc-badge-super { background: var(--warn-50); color: var(--sun-ink); }
.fc-route { display: flex; flex-direction: column; justify-content: center; gap: 12px; padding: 0 22px; border-left: 1px solid var(--line); border-right: 1px solid var(--line); min-width: 0; }
.fc-tls { list-style: none; margin: 0; padding: 0; display: grid; }
.fc-tl { position: relative; display: grid; grid-template-columns: 74px 14px minmax(0, 1fr); gap: 12px; align-items: start; padding: 5px 0; }
.fc-tl::before { content: ""; position: absolute; left: 86px; top: 20px; bottom: -6px; width: 2px; background: var(--brand-100); }
.fc-tl.fc-end::before { display: none; }
.fc-time { font-size: 15px; font-weight: 700; letter-spacing: -0.01em; color: var(--ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
.fc-dot { position: relative; z-index: 1; width: 12px; height: 12px; margin-top: 4px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 3px #fff; }
.fc-via .fc-dot { width: 8px; height: 8px; margin: 6px 2px 0; background: #fff; border: 2px solid var(--brand); }
.fc-place { display: grid; min-width: 0; }
.fc-place strong { font-size: 15px; font-weight: 700; color: var(--ink); overflow-wrap: anywhere; }
.fc-place span { font-size: 13px; color: var(--muted); overflow-wrap: anywhere; }
.fc-via .fc-place strong { font-size: 13.5px; font-weight: 600; color: var(--ink-2); }
.fc-via.is-hit .fc-place strong { color: var(--brand); }
.fc-meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding-left: 86px; }
.fc-pill { padding: 4px 12px; border-radius: 999px; background: var(--brand-50); color: var(--brand); font-size: 12.5px; font-weight: 700; }
.fc-pill-stops { background: #eef2ff; color: #3b4fd1; }
.fc-dur { font-size: 13px; color: var(--muted); }
.fc-note { margin: 0; padding-left: 86px; font-size: 13px; font-style: italic; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fc-buy { display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; gap: 8px; padding-left: 20px; text-align: right; }
.fc-tag { padding: 3px 10px; border-radius: 999px; background: var(--warn-50); color: var(--sun-ink); font-size: 12px; font-weight: 700; }
.fc-date { font-size: 12.5px; font-weight: 600; color: var(--muted); }
.fc-price strong { display: block; font-size: 30px; line-height: 1; font-weight: 800; letter-spacing: -0.03em; color: var(--ink); }
.fc-price span { font-size: 13px; color: var(--muted); }
.fc-soldout { padding: 6px 14px; border-radius: 999px; background: var(--soft-2); color: var(--muted); font-size: 13px; font-weight: 800; letter-spacing: 0.04em; }
.fc-seats { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-2); }
.fc-seats .is-urgent { color: #b45309; font-weight: 700; }
.fc-cta { position: static; display: grid; place-items: center; width: 100%; height: 46px; border-radius: 12px; background: linear-gradient(135deg, #1a56d6, var(--brand)); color: #fff; font-weight: 700; font-size: 14.5px; text-decoration: none; box-shadow: 0 10px 22px -10px rgba(0, 56, 168, 0.6); }
.fc-cta::after { content: ""; position: absolute; inset: 0; border-radius: 22px; }
.fc-cta:focus-visible { outline: 3px solid var(--brand-100); outline-offset: 2px; }
.fc-full .fc-cta { background: var(--soft-2); color: var(--ink-2); box-shadow: none; }

@media (max-width: 1100px) {
  .fc { grid-template-columns: 210px minmax(0, 1fr) 170px; padding: 18px; }
  .fc-route { padding: 0 16px; }
  .fc-tl { grid-template-columns: 66px 14px minmax(0, 1fr); gap: 10px; }
  .fc-tl::before { left: 76px; }
  .fc-meta, .fc-note { padding-left: 76px; }
}
@media (max-width: 960px) {
  .fr-page .results { grid-template-columns: 1fr; }
  .fr-page .filter-sheet[open] .filters { max-height: 72vh; overflow: auto; }
  .fr-page .filter-sheet summary { height: 42px; border-radius: 12px; background: #fff; }
}
@media (max-width: 860px) {
  .fr-hero { flex-direction: column; align-items: stretch; min-height: 0; padding: 18px 0 62px; }
  .fr-hero-art { position: relative; order: -1; width: 100%; aspect-ratio: 16 / 8; margin-bottom: 8px; }
  .fr-hero-ph.ph { -webkit-mask-image: linear-gradient(0deg, transparent 0, #000 40%); mask-image: linear-gradient(0deg, transparent 0, #000 40%); }
  .fr-glass { display: none; }
  .fr-hero-copy { padding: 4px 2px 0; max-width: none; }
  .fc { grid-template-columns: 1fr; gap: 14px; }
  .fc-driver { padding-right: 0; }
  .fc-route { padding: 14px 0; border: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .fc-buy { display: grid; grid-template-columns: 1fr auto; align-items: center; justify-items: start; padding-left: 0; text-align: left; gap: 8px 12px; }
  .fc-tag, .fc-date { grid-column: 1; }
  .fc-price { grid-column: 1; grid-row: 3; }
  .fc-seats { grid-column: 1; grid-row: 4; }
  .fc-cta { grid-column: 2; grid-row: 3 / span 2; width: auto; min-width: 140px; padding: 0 20px; }
  .fc-soldout { grid-column: 1; }
}
@media (max-width: 560px) {
  .fr-searchcard { padding: 10px; border-radius: 22px; margin-top: -40px; }
  .fr-hero h1 { font-size: 32px; }
  .fc { padding: 16px; border-radius: 18px; }
  .fc-cta::after { border-radius: 18px; }
  .fc-meta, .fc-note { padding-left: 0; }
  .fc-tl { grid-template-columns: 62px 12px minmax(0, 1fr); }
  .fc-tl::before { left: 72px; }
  .fr-reshead { flex-direction: row; align-items: flex-start; }
  .fr-map { height: 340px; }
}
.fr-mapbtn { white-space: nowrap; }
.f-chip.zero { opacity: 0.5; }
@media (max-width: 960px) {
  .fr-page .filter-sheet[open] .filters { position: fixed; left: 12px; right: 12px; top: 72px; width: auto; max-height: calc(100dvh - 150px); overflow: auto; z-index: 60; }
}
@media (max-width: 560px) { .fr-mapbtn { padding: 0 12px; } .fr-head-act { gap: 8px; } }

/* ===== Soft atmosphere for Find a ride / Find passengers: blue washes that melt into white ===== */
.fr-page {
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(900px 520px at 6% 2%, rgba(0, 56, 168, 0.075), rgba(0, 56, 168, 0) 70%),
    radial-gradient(820px 560px at 100% 8%, rgba(60, 120, 230, 0.09), rgba(60, 120, 230, 0) 72%),
    radial-gradient(760px 620px at -4% 52%, rgba(0, 56, 168, 0.06), rgba(0, 56, 168, 0) 70%),
    radial-gradient(900px 600px at 104% 78%, rgba(60, 120, 230, 0.07), rgba(60, 120, 230, 0) 70%),
    linear-gradient(180deg, #f2f7ff 0, #f0f5ff 480px, #f6f9ff 900px, #fafcff 1500px, var(--bg) 2200px);
}
.fr-page::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 760px; z-index: -1; pointer-events: none; background: linear-gradient(180deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0.45) 62%, rgba(255, 255, 255, 0) 100%); }
.fr-page .wrap.results { max-width: 1200px; }
.fr-hero { overflow: visible; }
.fr-hero::before { content: ""; position: absolute; z-index: 0; left: -8%; right: -8%; top: -8%; bottom: 0; pointer-events: none; background: radial-gradient(60% 80% at 22% 40%, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0) 70%); }
.fr-hero-copy { z-index: 2; }
.fr-hero-art { right: -40px; width: calc(60% + 40px); }
.fr-hero-ph.ph {
  border-radius: 0;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, 0.35) 22%, #000 48%, #000 86%, transparent 100%), linear-gradient(180deg, transparent 0, #000 16%, #000 70%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, 0.35) 22%, #000 48%, #000 86%, transparent 100%), linear-gradient(180deg, transparent 0, #000 16%, #000 70%, transparent 100%);
  mask-composite: intersect;
}
.fr-hero-art::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(240, 245, 255, 0.35), rgba(240, 245, 255, 0) 30%, rgba(240, 245, 255, 0) 70%, rgba(240, 245, 255, 0.5)); }
.fr-glass { right: 56px; }
.fr-searchcard { box-shadow: 0 1px 2px rgba(10, 25, 47, 0.04), 0 30px 70px -20px rgba(0, 56, 168, 0.28), 0 0 0 1px rgba(13, 34, 64, 0.04); }
.fr-searchcard::before { content: ""; position: absolute; z-index: -1; left: 6%; right: 6%; bottom: -34px; height: 70px; border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 56, 168, 0.16), rgba(0, 56, 168, 0)); filter: blur(6px); pointer-events: none; }
.fr-page .amb::before { display: none; }
.fr-page .res-side { background: rgba(255, 255, 255, 0.88); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.fr-page .fc, .fr-page .res-list .rc { background: rgba(255, 255, 255, 0.96); }
.fr-page .ds-chip { background: rgba(255, 255, 255, 0.9); }
.fr-page .ds-chip.zero:not(.on) { background: rgba(255, 255, 255, 0.55); }

/* Find passengers keeps its warm touch on the cards, but the page breathes in the same blue as Find a ride */
.fp-page { background:
    radial-gradient(900px 520px at 6% 2%, rgba(0, 56, 168, 0.075), rgba(0, 56, 168, 0) 70%),
    radial-gradient(820px 560px at 100% 8%, rgba(60, 120, 230, 0.09), rgba(60, 120, 230, 0) 72%),
    radial-gradient(760px 620px at -4% 52%, rgba(0, 56, 168, 0.055), rgba(0, 56, 168, 0) 70%),
    radial-gradient(900px 600px at 104% 74%, rgba(247, 190, 56, 0.10), rgba(247, 190, 56, 0) 70%),
    linear-gradient(180deg, #f2f7ff 0, #f0f5ff 480px, #f7f9fd 900px, #fbfbfd 1500px, var(--bg) 2200px); }
.fp-page .fr-hero-ph.ph img { object-position: 50% 60%; }

@media (max-width: 860px) {
  .fr-hero-art { right: 0; width: 100%; }
  .fr-hero-ph.ph { -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 22%, #000 60%, transparent 100%), linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 22%, #000 60%, transparent 100%), linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%); }
  .fr-hero::before { display: none; }
}

/* Atmosphere v2: clearly visible, still soft */
.fr-page {
  background:
    radial-gradient(1000px 640px at 4% 0%, rgba(0, 56, 168, 0.16), rgba(0, 56, 168, 0) 70%),
    radial-gradient(900px 640px at 100% 6%, rgba(70, 130, 240, 0.20), rgba(70, 130, 240, 0) 72%),
    radial-gradient(900px 760px at -6% 46%, rgba(0, 56, 168, 0.13), rgba(0, 56, 168, 0) 70%),
    radial-gradient(1000px 720px at 106% 62%, rgba(70, 130, 240, 0.16), rgba(70, 130, 240, 0) 70%),
    radial-gradient(900px 600px at 30% 100%, rgba(70, 130, 240, 0.12), rgba(70, 130, 240, 0) 70%),
    linear-gradient(180deg, #e6efff 0, #e9f1ff 520px, #eef4ff 1000px, #f4f8ff 1600px, #f8faff 2400px);
}
.fp-page {
  background:
    radial-gradient(1000px 640px at 4% 0%, rgba(0, 56, 168, 0.16), rgba(0, 56, 168, 0) 70%),
    radial-gradient(900px 640px at 100% 6%, rgba(70, 130, 240, 0.20), rgba(70, 130, 240, 0) 72%),
    radial-gradient(900px 760px at -6% 46%, rgba(0, 56, 168, 0.12), rgba(0, 56, 168, 0) 70%),
    radial-gradient(1000px 720px at 106% 62%, rgba(247, 190, 56, 0.16), rgba(247, 190, 56, 0) 70%),
    radial-gradient(900px 600px at 30% 100%, rgba(70, 130, 240, 0.10), rgba(70, 130, 240, 0) 70%),
    linear-gradient(180deg, #e6efff 0, #e9f1ff 520px, #eff4ff 1000px, #f6f8fd 1600px, #f9fafd 2400px);
}
.fr-page::before { background: linear-gradient(180deg, rgba(255, 255, 255, 0) 20%, rgba(255, 255, 255, 0.28) 60%, rgba(255, 255, 255, 0) 100%); }
.fr-hero-art::after { background: linear-gradient(180deg, rgba(225, 236, 255, 0.55), rgba(225, 236, 255, 0) 30%, rgba(225, 236, 255, 0) 65%, rgba(225, 236, 255, 0.7)); }
.fr-page .res-side { background: rgba(255, 255, 255, 0.82); box-shadow: 0 24px 50px -28px rgba(0, 56, 168, 0.28), 0 0 0 1px rgba(13, 34, 64, 0.04); }

/* ===== Atmosphere v3: white page, soft blue haze, full-bleed photo melting into the page (as in the design reference) ===== */
.fr-page, .fp-page {
  overflow-x: clip;
  background:
    radial-gradient(760px 300px at -4% 440px, rgba(60, 120, 235, 0.17), rgba(60, 120, 235, 0) 70%),
    radial-gradient(900px 340px at 104% 420px, rgba(60, 120, 235, 0.14), rgba(60, 120, 235, 0) 70%),
    radial-gradient(700px 620px at -10% 1150px, rgba(60, 120, 235, 0.09), rgba(60, 120, 235, 0) 70%),
    radial-gradient(760px 640px at 110% 1650px, rgba(60, 120, 235, 0.08), rgba(60, 120, 235, 0) 70%),
    linear-gradient(180deg, #fbfdff 0, #ffffff 360px, #fafcff 1200px, #f6f9ff 2400px);
}
.fr-page::before { background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0) 100%); }
.fr-page::after { content: ""; position: absolute; z-index: -1; left: -16%; top: 330px; width: 58%; height: 260px; border-radius: 50%; pointer-events: none; background: radial-gradient(closest-side, rgba(110, 160, 245, 0.2), rgba(110, 160, 245, 0)); filter: blur(14px); transform: rotate(-6deg); }
.fr-hero-art::after { background: linear-gradient(180deg, rgba(255, 255, 255, 0.5) 0, rgba(255, 255, 255, 0) 14%); }
.fr-glass { right: 40px; }
@media (min-width: 861px) {
  .fr-hero-art { right: calc((100% - 100vw) / 2); bottom: -30px; width: calc(66% + (100vw - 100%) / 2); }
  .fr-hero-ph.ph {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, 0.22) 14%, rgba(0, 0, 0, 0.7) 32%, #000 52%, #000 100%), linear-gradient(180deg, transparent 0, #000 12%, #000 62%, rgba(0, 0, 0, 0.55) 84%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, 0.22) 14%, rgba(0, 0, 0, 0.7) 32%, #000 52%, #000 100%), linear-gradient(180deg, transparent 0, #000 12%, #000 62%, rgba(0, 0, 0, 0.55) 84%, transparent 100%);
  }
}
.fr-page .res-side { background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; }
.fr-page .fc, .fr-page .res-list .rc { background: #fff; }

/* Find passengers: request cards use the premium ride-card layout */
.fp-page .req-grid { grid-template-columns: 1fr; gap: 14px; }
.fc-req .fc-time-soft { font-size: 13px; font-weight: 600; color: var(--muted); }
.fc-req .fc-badge-req { background: var(--brand-50); color: var(--brand); }
.fc-req .fc-badge-soft { background: var(--soft); color: var(--muted); font-weight: 600; }
.fc-req .fc-cta { margin-top: auto; }
.fc-req.fc-req-grp .fc-badge:first-child { background: var(--ok-50); color: var(--ok); }

/* ===== Our signature fade (as on the home page): role-tinted diagonal wash on cards + ambient wash behind the results ===== */
.fr-page .amb::before { display: block; top: -40px; }
.fr-page .fc { background: linear-gradient(135deg, rgba(0, 56, 168, 0.09) 0%, rgba(0, 56, 168, 0.025) 28%, #ffffff 62%, #ffffff 100%) #ffffff; }
.fr-page .fc.fc-full { background: linear-gradient(135deg, rgba(0, 56, 168, 0.05) 0%, rgba(0, 56, 168, 0.015) 28%, #ffffff 62%, #ffffff 100%) #ffffff; }
.fr-page .fc.fc-req { background: linear-gradient(135deg, rgba(247, 190, 56, 0.17) 0%, rgba(247, 190, 56, 0.045) 28%, #ffffff 62%, #ffffff 100%) #ffffff; }
.fr-page .fc.fc-req.fc-req-grp { background: linear-gradient(135deg, rgba(226, 244, 225, 0.95) 0%, rgba(226, 244, 225, 0.35) 28%, #ffffff 62%, #ffffff 100%) #ffffff; }
.fr-page .fc.fc-req:hover { box-shadow: 0 1px 2px rgba(10, 25, 47, 0.04), 0 18px 40px -14px rgba(180, 120, 0, 0.22), 0 0 0 1px rgba(247, 190, 56, 0.45); }
.fr-page .fc.fc-req.fc-req-grp:hover { box-shadow: 0 1px 2px rgba(10, 25, 47, 0.04), 0 18px 40px -14px rgba(30, 130, 60, 0.22), 0 0 0 1px rgba(60, 160, 80, 0.35); }
.fr-page .fc-req .fc-pill { background: rgba(247, 190, 56, 0.2); color: var(--sun-ink, #8a5a00); }
.fr-page .fc-req.fc-req-grp .fc-pill { background: rgba(60, 160, 80, 0.14); color: var(--ok); }
.fr-page .fc-req .fc-badge-req { background: rgba(247, 190, 56, 0.2); color: var(--sun-ink, #8a5a00); }
.fr-page .fc-req .fc-tl::before { background: rgba(247, 190, 56, 0.45); }
.fr-page .fc-req .fc-dot { background: #f7be38; }
.fr-page .fc-req .fc-via .fc-dot { background: #fff; border-color: #f7be38; }
.fr-page .fc-req.fc-req-grp .fc-tl::before { background: rgba(60, 160, 80, 0.35); }
.fr-page .fc-req.fc-req-grp .fc-dot { background: #4caf63; }
.fr-page .res-side { background: linear-gradient(160deg, rgba(0, 56, 168, 0.05) 0%, #ffffff 40%) #fff; }
.fp-page .res-side { background: linear-gradient(160deg, rgba(247, 190, 56, 0.1) 0%, #ffffff 40%) #fff; }

/* ===== Ask for a ride (v2): same system as Offer a ride, full-bleed skyline hero melting into a white page ===== */
.ar-page {
  overflow-x: clip;
  isolation: isolate;
  background:
    radial-gradient(780px 340px at -6% 330px, rgba(60, 120, 235, 0.16), rgba(60, 120, 235, 0) 70%),
    radial-gradient(820px 360px at 104% 360px, rgba(60, 120, 235, 0.12), rgba(60, 120, 235, 0) 70%),
    radial-gradient(680px 640px at -10% 1100px, rgba(60, 120, 235, 0.08), rgba(60, 120, 235, 0) 70%),
    linear-gradient(180deg, #f8fbff 0, #ffffff 380px, #fafcff 1100px, #f6f9ff 2000px);
  padding-bottom: 56px;
}
.ar-hero { min-height: 330px; padding: 48px 0 70px; }
.ar-hero .of-hero-copy { max-width: 540px; }
.ar-intro { max-width: 46ch; font-size: 17px; }
.ar-perks { grid-template-columns: repeat(3, auto); gap: 10px 26px; margin-top: 22px; font-size: 14.5px; }
.ar-perks li { max-width: none; gap: 9px; }
.ar-perks .of-perk-ic { width: auto; height: auto; border-radius: 0; background: transparent; }
.ar-page .of-layout { position: relative; z-index: 2; margin-top: -26px; }
@media (min-width: 861px) {
  .ar-hero .of-hero-ph.ph {
    right: calc((100% - 100vw) / 2); bottom: -40px; width: calc(60% + (100vw - 100%) / 2); border-radius: 0;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, 0.25) 14%, rgba(0, 0, 0, 0.8) 34%, #000 52%, #000 100%), linear-gradient(180deg, transparent 0, #000 10%, #000 70%, rgba(0, 0, 0, 0.5) 88%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, 0.25) 14%, rgba(0, 0, 0, 0.8) 34%, #000 52%, #000 100%), linear-gradient(180deg, transparent 0, #000 10%, #000 70%, rgba(0, 0, 0, 0.5) 88%, transparent 100%);
  }
}
.ar-hero .of-hero-ph.ph img { object-position: 50% 38%; }
.ar-form .rq-modes { margin-top: 28px; }
.ar-form .rq-mode-sub { margin: 12px 4px 0; }
.ar-form .of-sec:first-of-type { border-top: 0; }
.ar-form .rq-mode-btn.on { color: var(--brand); }
.ar-form.is-group .rq-mode-btn.on { color: var(--role-grp); }
.ar-form .of-seatbox .rq-stepper { gap: 8px; }
.ar-form .of-seatprice { align-items: start; }
.ar-form .rq-details { margin-top: 6px; border: 1px dashed #b6c2d6; border-radius: 14px; background: rgba(237, 243, 255, 0.35); padding: 4px 14px; }
.ar-form .rq-details.open { background: #fff; }
.ar-form .rq-details-body { padding-bottom: 14px; }
.ar-form .rq-details-body input, .ar-form .rq-details-body textarea { width: 100%; border: 1px solid var(--line-2); border-radius: 12px; min-height: 50px; padding: 0 14px; font: inherit; font-size: 15.5px; background: #fff; }
.ar-form .rq-details-body textarea { padding: 12px 14px; min-height: 90px; resize: vertical; }
.ar-form .rq-details-body input:focus, .ar-form .rq-details-body textarea:focus { outline: 0; border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-50); }
.ar-form .rq-summary { margin: 0 0 14px; }
.ar-form.is-group .of-submit { background: linear-gradient(135deg, #2f8a4a 0%, var(--role-grp) 100%); box-shadow: 0 14px 30px -10px rgba(31, 107, 52, 0.55); }
.ar-form.is-group .of-seatbox .rq-step { background: var(--role-grp-bg); color: var(--role-grp); }
.ar-form .of-sec-h b { position: relative; isolation: isolate; overflow: hidden; transition: box-shadow var(--t) var(--ease); }
.ar-form .of-sec-h b::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(135deg, #2f8a4a 0%, var(--role-grp) 100%); opacity: 0; transition: opacity var(--t) var(--ease); z-index: -1; pointer-events: none; }
.ar-form.is-group .of-sec-h b { box-shadow: 0 6px 14px -4px rgba(31, 107, 52, 0.5); }
.ar-form.is-group .of-sec-h b::after { opacity: 1; }
.ar-good { background: linear-gradient(165deg, #f6f9ff 0%, #dfeaff 100%); }
.ar-good::after { content: ""; position: absolute; right: 6px; top: 12px; width: 96px; height: 150px; pointer-events: none; opacity: 0.3; background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 200'><path d='M70 20 C20 60 110 90 60 130 S95 170 85 185' fill='none' stroke='%231d5fe0' stroke-width='2.2' stroke-linecap='round'/><circle cx='70' cy='20' r='5' fill='%231d5fe0'/><circle cx='85' cy='185' r='5' fill='%231d5fe0'/></svg>") no-repeat center / contain; }
.ar-good ul, .ar-good h2 { position: relative; z-index: 1; }
@media (max-width: 860px) {
  .ar-hero { padding: 20px 0 8px; }
  .ar-hero .of-hero-ph.ph { -webkit-mask-image: linear-gradient(0deg, transparent 0, #000 36%), linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%); mask-image: linear-gradient(0deg, transparent 0, #000 36%), linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%); }
  .ar-page .of-layout { margin-top: 0; }
  .ar-perks { grid-template-columns: 1fr; gap: 10px; }
  .ar-perks li { flex-direction: row; align-items: center; }
  .ar-good::after { opacity: 0.5; }
}

.ar-form .of-price input::placeholder { font-weight: 500; font-size: 15.5px; letter-spacing: 0; }

/* ===== Ask for a ride: skyline hero — balanced, contained in the page grid, soft progressive edges ===== */
.ar-hero .of-hero-ph.ph img { object-position: 50% 50%; }
@media (min-width: 861px) {
  .ar-hero { min-height: 350px; padding: 36px 0 78px; }
  .ar-hero .of-hero-copy { max-width: 500px; }
  .ar-hero .ar-intro { max-width: 42ch; }
  .ar-hero .of-hero-ph.ph {
    right: 0; top: 0; bottom: -44px; width: 64%; border-radius: 0; background: transparent; box-shadow: none;
    -webkit-mask-image:
      linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.05) 4%, rgba(0,0,0,.16) 8%, rgba(0,0,0,.34) 12%, rgba(0,0,0,.56) 16%, rgba(0,0,0,.78) 20%, rgba(0,0,0,.93) 24%, #000 28%, #000 93%, rgba(0,0,0,.7) 97%, rgba(0,0,0,.35) 100%),
      linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.6) 4%, #000 9%, #000 84%, rgba(0,0,0,.6) 93%, rgba(0,0,0,0) 100%);
    -webkit-mask-composite: source-in;
    mask-image:
      linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.05) 4%, rgba(0,0,0,.16) 8%, rgba(0,0,0,.34) 12%, rgba(0,0,0,.56) 16%, rgba(0,0,0,.78) 20%, rgba(0,0,0,.93) 24%, #000 28%, #000 93%, rgba(0,0,0,.7) 97%, rgba(0,0,0,.35) 100%),
      linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.6) 4%, #000 9%, #000 84%, rgba(0,0,0,.6) 93%, rgba(0,0,0,0) 100%);
    mask-composite: intersect;
  }
  .ar-page .of-layout { margin-top: -48px; position: relative; z-index: 3; }
}
.ar-form { box-shadow: 0 1px 2px rgba(10, 25, 47, 0.04), 0 14px 36px -20px rgba(0, 40, 120, 0.14), 0 0 0 1px rgba(13, 34, 64, 0.05); }
.ar-side .of-pv, .ar-page .of-pv { box-shadow: 0 1px 2px rgba(10, 25, 47, 0.04), 0 10px 28px -18px rgba(0, 40, 120, 0.14), 0 0 0 1px rgba(13, 34, 64, 0.05); }
@media (max-width: 860px) {
  .ar-hero .of-hero-ph.ph { aspect-ratio: 2 / 1; border-radius: 0; -webkit-mask-image: linear-gradient(0deg, transparent 0, #000 22%), linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%); mask-image: linear-gradient(0deg, transparent 0, #000 22%), linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%); }
}
@media (min-width: 861px) {
  .ar-hero .of-hero-ph.ph {
    bottom: -26px; width: 57%;
    -webkit-mask-image:
      linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.05) 4%, rgba(0,0,0,.16) 8%, rgba(0,0,0,.34) 12%, rgba(0,0,0,.56) 16%, rgba(0,0,0,.78) 20%, rgba(0,0,0,.93) 24%, #000 28%, #000 90%, rgba(0,0,0,.62) 95%, rgba(0,0,0,0) 100%),
      linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.6) 4%, #000 9%, #000 86%, rgba(0,0,0,.55) 94%, rgba(0,0,0,0) 100%);
    mask-image:
      linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.05) 4%, rgba(0,0,0,.16) 8%, rgba(0,0,0,.34) 12%, rgba(0,0,0,.56) 16%, rgba(0,0,0,.78) 20%, rgba(0,0,0,.93) 24%, #000 28%, #000 90%, rgba(0,0,0,.62) 95%, rgba(0,0,0,0) 100%),
      linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.6) 4%, #000 9%, #000 86%, rgba(0,0,0,.55) 94%, rgba(0,0,0,0) 100%);
  }
  .ar-perks { gap: 10px 20px; }
}

/* ===== Ask for a ride hero v4: one simple mask (left fade only), photo ends cleanly where the cards begin ===== */
.ar-page {
  background:
    radial-gradient(760px 520px at -8% 1050px, rgba(60, 120, 235, 0.07), rgba(60, 120, 235, 0) 70%),
    linear-gradient(180deg, #f6f9ff 0, #ffffff 460px, #fafcff 1200px, #f6f9ff 2000px);
}
.ar-page .of-wrap { max-width: 1200px; }
.ar-page .of-hero h1 { font-size: 44px; line-height: 1.15; }
.ar-page .of-hero-copy { max-width: 540px;
}
@media (min-width: 861px) {
  .ar-hero .of-hero-ph.ph {
    right: 0; top: 0; bottom: 48px; width: 54%; border-radius: 0; background: transparent; box-shadow: none;
    -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.03) 3%, rgba(0,0,0,.1) 6%, rgba(0,0,0,.22) 9%, rgba(0,0,0,.4) 12%, rgba(0,0,0,.6) 15%, rgba(0,0,0,.8) 18%, rgba(0,0,0,.92) 20%, #000 22%);
    mask-image: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.03) 3%, rgba(0,0,0,.1) 6%, rgba(0,0,0,.22) 9%, rgba(0,0,0,.4) 12%, rgba(0,0,0,.6) 15%, rgba(0,0,0,.8) 18%, rgba(0,0,0,.92) 20%, #000 22%);
    -webkit-mask-composite: source-over; mask-composite: add;
  }
  .ar-hero { min-height: 330px; padding: 34px 0 78px; }
  .ar-page .of-layout { margin-top: -48px; position: relative; z-index: 3; }
}
@media (max-width: 860px) {
  .ar-hero .of-hero-ph.ph { border-radius: 18px; -webkit-mask-image: none; mask-image: none; }
}

/* ===== Find a ride hero v2 (Find passengers keeps its own hero): panoramic avenue photo, one left fade, ends cleanly on the search card ===== */
.fr-page:not(.fp-page) {
  background:
    radial-gradient(700px 600px at -10% 1000px, rgba(60, 120, 235, 0.08), rgba(60, 120, 235, 0) 70%),
    radial-gradient(760px 640px at 110% 1500px, rgba(60, 120, 235, 0.07), rgba(60, 120, 235, 0) 70%),
    linear-gradient(180deg, #f6f9ff 0, #ffffff 460px, #fafcff 1200px, #f6f9ff 2400px);
}
.fr-page:not(.fp-page)::after, .fr-page:not(.fp-page) .fr-hero::before, .fr-page:not(.fp-page) .fr-hero-art::after { display: none; }
.fr-page:not(.fp-page) .fr-hero h1 { font-size: 44px; line-height: 1.15; }
.fr-page:not(.fp-page) .fr-hero-copy { max-width: 540px; }
.fr-page:not(.fp-page) .fr-hero-ph.ph img { object-position: 52% 50%; }
@media (min-width: 861px) {
  .fr-page:not(.fp-page) .fr-hero { min-height: 330px; padding: 34px 0 78px; }
  .fr-page:not(.fp-page) .fr-hero-art { right: 0; top: 0; bottom: 48px; width: 54%; }
  .fr-page:not(.fp-page) .fr-hero-ph.ph {
    border-radius: 0; background: transparent; box-shadow: none;
    -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.03) 3%, rgba(0,0,0,.1) 6%, rgba(0,0,0,.22) 9%, rgba(0,0,0,.4) 12%, rgba(0,0,0,.6) 15%, rgba(0,0,0,.8) 18%, rgba(0,0,0,.92) 20%, #000 22%);
    mask-image: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.03) 3%, rgba(0,0,0,.1) 6%, rgba(0,0,0,.22) 9%, rgba(0,0,0,.4) 12%, rgba(0,0,0,.6) 15%, rgba(0,0,0,.8) 18%, rgba(0,0,0,.92) 20%, #000 22%);
    -webkit-mask-composite: source-over; mask-composite: add;
  }
  .fr-page:not(.fp-page) .fr-searchcard { box-shadow: 0 1px 2px rgba(10, 25, 47, 0.04), 0 14px 36px -20px rgba(0, 40, 120, 0.16), 0 0 0 1px rgba(13, 34, 64, 0.05); }
  .fr-page:not(.fp-page) .fr-searchcard::before { display: none; }
}
@media (max-width: 860px) {
  .fr-page:not(.fp-page) .fr-hero-art { aspect-ratio: 2 / 1; }
  .fr-page:not(.fp-page) .fr-hero-ph.ph { border-radius: 18px; -webkit-mask-image: none; mask-image: none; }
}

/* Offer a ride hero: panoramic plaza photo (shares the Ask for a ride hero system) */
@media (min-width: 861px) { .ar-hero-offer .of-hero-ph.ph { width: 53%; } }
@media (max-width: 860px) { .ar-hero-offer .of-hero-ph.ph { aspect-ratio: 2 / 1; } .ar-hero-offer .of-hero-ph.ph img { object-position: 30% 50% !important; } }

/* ===== Find passengers hero: same clean panoramic treatment as Find a ride ===== */
.fp-page {
  background:
    radial-gradient(700px 600px at -10% 1000px, rgba(60, 120, 235, 0.07), rgba(60, 120, 235, 0) 70%),
    radial-gradient(760px 640px at 110% 1400px, rgba(247, 190, 56, 0.10), rgba(247, 190, 56, 0) 70%),
    linear-gradient(180deg, #f6f9ff 0, #ffffff 460px, #fbfbfd 1200px, #f8f9fd 2400px);
}
.fp-page::after, .fp-page .fr-hero::before, .fp-page .fr-hero-art::after { display: none; }
.fp-page .fr-hero h1 { font-size: 44px; line-height: 1.15; }
.fp-page .fr-hero-copy { max-width: 540px; }
.fp-page .fr-hero-ph.ph img { object-position: 50% 50%; }
@media (min-width: 861px) {
  .fp-page .fr-hero { min-height: 330px; padding: 34px 0 78px; }
  .fp-page .fr-hero-art { right: 0; top: 0; bottom: 48px; width: 54%; }
  .fp-page .fr-hero-ph.ph {
    border-radius: 0; background: transparent; box-shadow: none;
    -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.03) 3%, rgba(0,0,0,.1) 6%, rgba(0,0,0,.22) 9%, rgba(0,0,0,.4) 12%, rgba(0,0,0,.6) 15%, rgba(0,0,0,.8) 18%, rgba(0,0,0,.92) 20%, #000 22%);
    mask-image: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.03) 3%, rgba(0,0,0,.1) 6%, rgba(0,0,0,.22) 9%, rgba(0,0,0,.4) 12%, rgba(0,0,0,.6) 15%, rgba(0,0,0,.8) 18%, rgba(0,0,0,.92) 20%, #000 22%);
    -webkit-mask-composite: source-over; mask-composite: add;
  }
  .fp-page .fr-searchcard { box-shadow: 0 1px 2px rgba(10, 25, 47, 0.04), 0 14px 36px -20px rgba(0, 40, 120, 0.16), 0 0 0 1px rgba(13, 34, 64, 0.05); }
  .fp-page .fr-searchcard::before { display: none; }
}
@media (max-width: 860px) {
  .fp-page .fr-hero-art { aspect-ratio: 2 / 1; }
  .fp-page .fr-hero-ph.ph { border-radius: 18px; -webkit-mask-image: none; mask-image: none; }
}
@media (min-width: 861px) and (max-width: 1100px) {
  .fr-page:not(.fp-page) .fr-hero-art, .fp-page .fr-hero-art { width: 42%; }
}

/* ===== Find passengers · request detail (rd-*) ===== */
.rd-page .tp-main{display:grid;gap:16px;align-content:start}
.rd-page .tp-side{display:grid;gap:16px;align-content:start}
.rd-route{background:linear-gradient(135deg,rgba(247,190,56,.14) 0%,rgba(247,190,56,.04) 40%,#fff 66%);border-color:rgba(247,190,56,.35)}
.rd-route-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:6px}
.rd-route-head .h3{margin:0}
.rd-km{font-size:13px;font-weight:600;color:var(--muted,#5b6472);background:rgba(255,255,255,.8);border:1px solid rgba(0,0,0,.08);border-radius:999px;padding:4px 10px;white-space:nowrap}
.rd-tls{list-style:none;margin:0;padding:0;display:grid}
.rd-tl{display:grid;grid-template-columns:76px 18px 1fr;column-gap:12px;align-items:start;position:relative;padding:12px 0;min-height:64px}
.rd-time{font-weight:700;font-size:15px;text-align:right;padding-top:2px;font-variant-numeric:tabular-nums}
.rd-time-soft{font-weight:500;font-size:13px;color:var(--muted,#5b6472)}
.rd-dot{width:14px;height:14px;border-radius:50%;background:#fff;border:3px solid #e0a21a;margin:4px 0 0 2px;position:relative;z-index:1}
.rd-end .rd-dot{background:#17356b;border-color:#17356b}
.rd-via .rd-dot{width:10px;height:10px;margin:6px 0 0 4px;border-width:2px;border-color:#9aa4b5}
.rd-tl:not(:last-child)::before{content:"";position:absolute;left:calc(76px + 12px + 8px);top:30px;bottom:-14px;width:2px;background:repeating-linear-gradient(to bottom,#d9b25a 0 6px,transparent 6px 11px)}
.rd-place{display:grid;gap:2px;min-width:0}
.rd-place strong{font-size:18px;line-height:1.25}
.rd-via .rd-place strong{font-size:15px}
.rd-place span{font-size:13.5px;color:var(--muted,#5b6472)}
.rd-place .rd-tag{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#a87400}
.rd-end .rd-tag{color:#17356b}
.rd-facts{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.rd-status .tp-list li{align-items:flex-start}
@media (max-width:640px){
  .rd-tl{grid-template-columns:58px 16px 1fr;column-gap:10px}
  .rd-tl:not(:last-child)::before{left:calc(58px + 10px + 7px)}
  .rd-place strong{font-size:16px}
  .rd-facts{grid-template-columns:repeat(2,1fr)}
}

/* ===== My trips v2 (mt-*) · reference design ===== */
.tr-page.mt-page { max-width: 1312px; padding-inline: clamp(16px, 2.8vw, 36px); padding-block: 26px 56px; gap: 0; display: block; --mt-navy: #051f53; --mt-blue: #0b3fae; --mt-line: #e6ebf3; }
.mt-page > * + * { margin-top: 22px; }
.mt-head > div:first-child { flex: 1 1 auto; min-width: 0; }
.mt-head-act { flex: none; }
.mt-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 18px 28px; flex-wrap: wrap; margin-top: 0 !important; }
.mt-eyebrow { display: block; font-size: 15px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--mt-blue); margin-bottom: 4px; }
.mt-head h1 { margin: 0; font-size: clamp(44px, 6vw, 66px); line-height: 1.02; letter-spacing: -.035em; font-weight: 800; color: var(--ink); }
.mt-head p { margin: 12px 0 0; font-size: 19px; color: var(--muted); max-width: none; }
.mt-head-act { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding-bottom: 6px; }
.mt-head-act .oc-export { display: flex; gap: 10px; margin: 0; }
.mt-page .oc-export .btn, .mt-btn-solid { height: 50px; padding: 0 20px; border-radius: 999px; font-size: 16px; font-weight: 700; display: inline-flex; align-items: center; gap: 10px; background: #fff; border: 1px solid var(--mt-line); color: var(--ink); box-shadow: 0 2px 8px rgba(13,34,64,.06); }
.mt-page .oc-export .btn:hover { border-color: #c9d3e4; box-shadow: 0 6px 16px rgba(13,34,64,.1); }
.mt-btn-solid { background: linear-gradient(180deg, #0a47c9, #0038a8); border-color: transparent; color: #fff; text-decoration: none; box-shadow: 0 10px 24px rgba(0,56,168,.28); }
.mt-btn-solid:hover { filter: brightness(1.08); }
.mt-plus { font-size: 26px; font-weight: 500; line-height: 1; margin-top: -2px; }

/* hero */
.mt-hero { position: relative; display: block; min-height: 228px; border-radius: 22px; overflow: hidden; text-decoration: none; color: #fff; isolation: isolate;
  background: linear-gradient(90deg, #051f53 0%, #04276a 32%, #03337b 46%, #0a3f94 100%); box-shadow: 0 18px 40px rgba(5,31,83,.22); }
.mt-hero:hover .mt-hero-go { background: rgba(10,25,60,.85); }
.mt-hero-ph { position: absolute; top: 0; right: 0; height: 100%; width: 60%; object-fit: cover; object-position: left center; z-index: -1;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.12) 14%, rgba(0,0,0,.38) 28%, rgba(0,0,0,.8) 44%, #000 58%); mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.12) 14%, rgba(0,0,0,.38) 28%, rgba(0,0,0,.8) 44%, #000 58%); }
.mt-hero-in { display: flex; gap: 20px; padding: 20px 28px 20px 20px; align-items: center; min-height: 228px; position: relative; }
.mt-hero-ic { flex: none; width: 68px; height: 68px; border-radius: 20px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.12); display: grid; place-items: center; color: #fff; align-self: center; margin-top: -10px; }
.mt-hero-t { min-width: 0; display: grid; gap: 10px; }
.mt-hero-k { font-size: 16px; font-weight: 800; letter-spacing: .02em; text-transform: uppercase; color: #fcd116; }
.mt-hero-h { font-size: clamp(26px, 2.6vw, 34px); line-height: 1.1; font-weight: 800; letter-spacing: -.02em; }
.mt-arr { margin: 0 .35em; font-weight: 500; opacity: .95; }
.mt-hero-when { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 18px; font-weight: 500; }
.mt-hero-when .ic { opacity: .9; }
.mt-pill { display: inline-flex; align-items: center; height: 36px; padding: 0 18px; border-radius: 999px; font-size: 16px; font-weight: 700; margin-left: 6px; }
.mt-pill.drv { background: #10b476; color: #fff; box-shadow: 0 4px 12px rgba(16,180,118,.35); }
.mt-pill.pass { background: rgba(255,255,255,.18); color: #fff; border: 1px solid rgba(255,255,255,.25); }
.mt-hero-row { display: flex; align-items: center; gap: 22px 30px; flex-wrap: wrap; margin-top: 4px; }
.mt-hero-route { display: grid; gap: 8px; font-size: 18px; font-weight: 500; }
.mt-hero-stats { display: flex; align-items: center; gap: 0; font-size: 18px; font-weight: 500; }
.mt-hero-stats > span { display: inline-flex; align-items: center; gap: 12px; padding: 4px 28px; }
.mt-hero-stats > span + span { border-left: 1px solid rgba(255,255,255,.25); }
.mt-hero-stats .ic { opacity: .9; }
.mt-hero-go { position: absolute; top: 76px; right: 20px; width: 52px; height: 52px; border-radius: 50%; background: rgba(10,25,60,.7); border: 1px solid rgba(255,255,255,.18); display: grid; place-items: center; color: #fff; backdrop-filter: blur(4px); transition: background .15s; }
.mt-hero-cta { position: absolute; right: 20px; bottom: 18px; height: 44px; padding: 0 22px; border-radius: 999px; background: #fff; color: var(--ink); font-weight: 700; font-size: 16px; display: inline-flex; align-items: center; gap: 10px; box-shadow: 0 8px 20px rgba(0,0,0,.2); }
.mt-rl { position: relative; display: flex; align-items: center; gap: 14px; }
.mt-rl i { flex: none; width: 14px; height: 14px; border-radius: 50%; border: 2.5px solid #fff; background: transparent; position: relative; z-index: 1; }
.mt-rl.to i { border-color: #34d6a0; }
.mt-rl.from::after { content: ""; position: absolute; left: 6px; top: calc(50% + 8px); height: calc(100% - 4px); width: 2px; background: rgba(255,255,255,.5); }
.mt-route .mt-rl.from::after { left: 5.5px; background: #cfd9ea; }

/* KPI */
.mt-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.mt-kpi { position: relative; display: flex; align-items: center; gap: 14px; padding: 20px 18px; background: #fff; border: 1px solid var(--mt-line); border-radius: 20px; text-decoration: none; color: var(--ink); box-shadow: 0 2px 10px rgba(13,34,64,.04); transition: transform .15s, box-shadow .15s, border-color .15s; }
.mt-kpi:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(13,34,64,.1); border-color: #cfd9ea; }
.mt-kpi-ic { flex: none; width: 60px; height: 60px; border-radius: 20px; display: grid; place-items: center; }
.mt-kpi.blue .mt-kpi-ic { background: #e5edfd; color: #1448c6; }
.mt-kpi.green .mt-kpi-ic { background: #e2f6ec; color: #0fa968; }
.mt-kpi.amber .mt-kpi-ic { background: #fdeccd; color: #f08c00; }
.mt-kpi.violet .mt-kpi-ic { background: #ece4fe; color: #7a4fe0; }
.mt-kpi-t { display: grid; gap: 1px; min-width: 0; }
.mt-kpi-l { font-size: 17px; font-weight: 700; color: var(--ink); }
.mt-kpi-t strong { font-size: 38px; line-height: 1.1; font-weight: 800; letter-spacing: -.02em; }
.mt-kpi-s { font-size: 13.5px; color: var(--muted); }
.mt-kpi-go { position: absolute; top: 20px; right: 18px; width: 18px; height: 18px; color: #7b8aa3; }

/* tabs */
.mt-tabs { display: flex; gap: 14px 34px; border-bottom: 1px solid var(--mt-line); margin-top: 34px !important; overflow-x: auto; scrollbar-width: none; }
.mt-tabs::-webkit-scrollbar { display: none; }
.mt-tabs a { position: relative; display: inline-flex; align-items: center; gap: 12px; padding: 16px 6px 18px; font-size: 20px; font-weight: 600; color: #4a5a76; text-decoration: none; white-space: nowrap; }
.mt-tabs a[aria-selected="true"] { color: var(--mt-blue); font-weight: 700; }
.mt-tabs a[aria-selected="true"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 4px; border-radius: 4px 4px 0 0; background: var(--mt-blue); }
.mt-tab-n { min-width: 28px; height: 28px; padding: 0 8px; border-radius: 999px; display: inline-grid; place-items: center; font-size: 14px; font-weight: 800; background: #fde7ea; color: #d6213a; }
.mt-tabs a[aria-selected="true"] .mt-tab-n { background: #e5243b; color: #fff; }

/* filters */
.mt-controls { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 24px !important; }
.mt-when-chips { display: flex; gap: 12px; flex-wrap: wrap; margin-right: auto; }
.mt-fchip { display: inline-flex; align-items: center; gap: 12px; height: 54px; padding: 0 22px; border-radius: 999px; background: #fff; border: 1px solid var(--mt-line); color: var(--ink); font-size: 18px; font-weight: 600; text-decoration: none; transition: border-color .15s, background .15s; }
.mt-fchip:hover { border-color: #b9c7e0; }
.mt-fchip.on { background: linear-gradient(180deg, #0a47c9, #0038a8); border-color: transparent; color: #fff; font-weight: 700; box-shadow: 0 8px 20px rgba(0,56,168,.26); }
.mt-fn { min-width: 26px; height: 26px; border-radius: 999px; display: inline-grid; place-items: center; font-size: 14px; font-weight: 700; background: #eef2f8; color: #3c4b66; padding: 0 7px; }
.mt-fchip.on .mt-fn { background: #fff; color: var(--mt-blue); }
.mt-search { display: flex; align-items: center; gap: 12px; height: 54px; width: 330px; padding: 0 20px; border-radius: 999px; background: #fff; border: 1px solid var(--mt-line); color: #5a6b85; }
.mt-search:focus-within, .mt-sort select:focus { border-color: var(--mt-blue); box-shadow: 0 0 0 3px rgba(0,56,168,.14); }
.mt-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; font-size: 17px; color: var(--ink); height: 100%; }
.mt-search input::placeholder { color: #8391aa; }
.mt-sort { display: flex; align-items: center; gap: 12px; font-size: 16px; color: var(--muted); }
.mt-sort select { appearance: none; -webkit-appearance: none; height: 54px; padding: 0 46px 0 22px; border-radius: 16px; border: 1px solid var(--mt-line); background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235a6b85' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 18px center; font: inherit; font-size: 17px; font-weight: 600; color: var(--ink); cursor: pointer; outline: 0; }

/* trip cards */
.mt-list { display: grid; gap: 18px; margin-top: 22px !important; }
.mt-card { display: grid; grid-template-columns: 244px minmax(0, 1.25fr) minmax(0, 1fr) 212px; align-items: center; gap: 0 28px; padding: 18px 20px; background: #fff; border: 1px solid var(--mt-line); border-radius: 20px; box-shadow: 0 2px 10px rgba(13,34,64,.04); transition: box-shadow .15s, border-color .15s; }
.mt-card:hover { box-shadow: 0 14px 32px rgba(13,34,64,.09); border-color: #d3dcec; }
.mt-ph { display: block; width: 244px; height: 160px; border-radius: 14px; overflow: hidden; background: #dfe7f5; }
.mt-ph img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s; }
.mt-card:hover .mt-ph img { transform: scale(1.04); }
.mt-body { min-width: 0; display: grid; gap: 9px; align-content: center; }
.mt-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.mt-chip { display: inline-flex; align-items: center; height: 26px; padding: 0 12px; border-radius: 9px; font-size: 13.5px; font-weight: 700; background: #eef2f8; color: #4a5a76; }
.mt-chip.blue { background: #e1ebfd; color: #0b3fae; }
.mt-chip.sun { background: #fdf0c2; color: #946600; }
.mt-chip.soft { background: #eef2f8; color: #4a5a76; }
.mt-chip.ok, .mt-chip.up { background: #dcf5e8; color: #0a7b4e; }
.mt-chip.off { background: #fdf0c2; color: #946600; }
.mt-chip.bad { background: #fde7ea; color: #c01d33; }
.mt-chip.done { background: #eef2f8; color: #4a5a76; }
.mt-title { margin: 0; font-size: 26px; line-height: 1.15; font-weight: 800; letter-spacing: -.02em; }
.mt-title a { color: var(--ink); text-decoration: none; }
.mt-title .mt-arr { opacity: .8; }
.mt-when { display: flex; gap: 8px 26px; flex-wrap: wrap; font-size: 16px; color: var(--ink-2, #25354f); }
.mt-when span { display: inline-flex; align-items: center; gap: 9px; }
.mt-when .ic { color: #5a6b85; }
.mt-route { display: grid; gap: 8px; font-size: 16px; position: relative; }
.mt-route .mt-rl i { width: 13px; height: 13px; border: 3px solid var(--mt-blue); }
.mt-route .mt-rl.to i { border-color: #1fc98a; }
.mt-stats { list-style: none; margin: 0; padding: 4px 0 4px 30px; border-left: 1px solid var(--mt-line); display: grid; gap: 15px; align-content: center; font-size: 16px; color: #3a4a66; align-self: stretch; }
.mt-stats li { display: flex; align-items: center; gap: 14px; min-width: 0; }
.mt-stats .ic { color: #6b7b96; flex: none; }
.mt-stats span { min-width: 0; overflow-wrap: anywhere; }
.mt-acts { display: grid; gap: 12px; padding-left: 28px; border-left: 1px solid var(--mt-line); align-self: stretch; align-content: center; }
.mt-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 50px; padding: 0 18px; border-radius: 999px; font: inherit; font-size: 16px; font-weight: 700; text-decoration: none; cursor: pointer; border: 1px solid transparent; transition: filter .15s, background .15s, border-color .15s; white-space: normal; text-align: center; line-height: 1.15; }
.mt-btn-primary { background: linear-gradient(180deg, #0a47c9, #0038a8); color: #fff; box-shadow: 0 8px 18px rgba(0,56,168,.24); }
.mt-btn-primary:hover { filter: brightness(1.08); }
.mt-btn-ghost { background: #fff; border-color: var(--mt-line); color: var(--ink); }
.mt-btn-ghost:hover { border-color: #b9c7e0; background: #f7f9fd; }
.mt-btn-danger { background: #fdeeee; color: #d6213a; border-color: transparent; }
.mt-btn-danger:hover { background: #fbdde0; }
.mt-btn-dark { background: linear-gradient(180deg, #0a3f9d, #072f7a); color: #fff; height: 52px; padding: 0 28px; box-shadow: 0 10px 22px rgba(7,47,122,.28); }
.mt-btn-dark:hover { filter: brightness(1.1); }
.mt-card.cancelled { background: #f8f9fc; }
.mt-card.cancelled .mt-title a { text-decoration: line-through; text-decoration-color: #b9c4d8; color: #6b7b96; }
.mt-card.cancelled .mt-ph, .mt-card.past .mt-ph { filter: grayscale(.55); }
.mt-none { text-align: center; padding: 34px 20px; border: 1px dashed #cdd7e8; border-radius: 20px; color: var(--muted); }
.mt-none strong { color: var(--ink); font-size: 18px; }
.mt-none p { margin: 6px 0 0; }

/* empty state */
.mt-empty { position: relative; margin-top: 22px; border: 1.5px dashed #cdd7e8; border-radius: 22px; background: #fff; padding: 38px 24px 40px; min-height: 196px; display: grid; justify-items: center; align-items: center; overflow: hidden; }
.mt-empty-art { position: absolute; left: 4%; top: 50%; transform: translateY(-50%); width: 280px; height: 150px; opacity: .95;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 280 150'%3E%3Cellipse cx='140' cy='132' rx='112' ry='12' fill='%23eef2fa'/%3E%3Cpath d='M26 100c0-8 8-13 15-10 3-9 16-11 22-3 8-2 15 4 13 13z' fill='%23f1f5fb'/%3E%3Cpath d='M170 108c0-7 7-11 13-9 2-8 14-10 19-2 7-2 13 3 11 11z' fill='%23f1f5fb'/%3E%3Cpath d='M92 126c30-6 40-20 66-26 18-4 30-14 30-30' fill='none' stroke='%239db4e0' stroke-width='2.4' stroke-dasharray='2 6' stroke-linecap='round'/%3E%3Cpath d='M82 52c0-9 7-15 15-15s15 6 15 15c0 11-15 27-15 27s-15-16-15-27z' fill='%236f93e8'/%3E%3Ccircle cx='97' cy='52' r='5.5' fill='%23fff'/%3E%3Crect x='224' y='62' width='7' height='60' rx='3.5' fill='%23d8c9a6' transform='rotate(8 227 92)'/%3E%3Cpath d='M228 66c-12-14-30-12-38-4 14-2 24 0 36 8zM229 68c10-14 28-14 38-8-14 0-23 4-34 12zM228 70c-4-16 4-30 14-34-6 10-5 22-6 36z' fill='%23d5e6d6'/%3E%3Cpath d='M196 104h30l-6-22-9-12-9 12z' fill='%23e3e9f4'/%3E%3Cpath d='M205 70v-14l5-5 5 5v14z' fill='%23dde5f1'/%3E%3Cg transform='translate(60 112)'%3E%3Cpath d='M2 12h44c0-8-6-12-12-14-5-6-20-6-24 0C4 0 2 6 2 12z' fill='%236f93e8'/%3E%3Crect x='0' y='11' width='48' height='9' rx='4' fill='%234c74d6'/%3E%3Ccircle cx='13' cy='21' r='5' fill='%23ffffff' stroke='%234c74d6' stroke-width='3'/%3E%3Ccircle cx='36' cy='21' r='5' fill='%23ffffff' stroke='%234c74d6' stroke-width='3'/%3E%3C/g%3E%3C/svg%3E") no-repeat center / contain; }
.mt-empty-t { position: relative; display: grid; justify-items: center; gap: 8px; text-align: center; max-width: 560px; }
.mt-empty-k { font-size: 13.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #5a6b85; }
.mt-empty-t strong { font-size: 26px; line-height: 1.2; letter-spacing: -.01em; }
.mt-empty-t p { margin: 0 0 12px; font-size: 16.5px; color: #4a5a76; }

/* tablet */
@media (max-width: 1180px) {
  .mt-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mt-card { grid-template-columns: 220px minmax(0, 1fr) 200px; grid-template-areas: "ph body acts" "ph stats acts"; gap: 12px 24px; }
  .mt-ph { grid-area: ph; width: 220px; height: 100%; min-height: 170px; }
  .mt-body { grid-area: body; } .mt-acts { grid-area: acts; padding-left: 24px; }
  .mt-stats { grid-area: stats; border-left: 0; padding: 12px 0 0; border-top: 1px solid var(--mt-line); grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 20px; align-self: end; }
  .mt-hero-ph { width: 62%; }
  .mt-hero-row { flex-direction: column; align-items: flex-start; gap: 12px; }
  .mt-hero-stats > span:first-child { padding-left: 0; }
  .mt-search { width: 260px; }
  .mt-hero-in { padding-right: 190px; }
  .mt-empty-art { left: 1%; width: 170px; opacity: .8; }
  .mt-empty-t { max-width: 440px; }
}
@media (max-width: 900px) {
  .mt-search { width: 100%; order: 3; flex: 1 1 100%; }
  .mt-when-chips { flex: 1 1 100%; margin-right: 0; }
  .mt-sort { margin-left: auto; }
  .mt-card { grid-template-columns: 200px minmax(0, 1fr); grid-template-areas: "ph body" "ph stats" "acts acts"; gap: 12px 22px; }
  .mt-ph { width: 200px; }
  .mt-acts { border-left: 0; padding: 14px 0 0; border-top: 1px solid var(--mt-line); grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
  .mt-hero-in { padding-right: 20px; }
  .mt-hero-go { top: 18px; right: 16px; }
  .mt-hero-cta { position: static; margin: 0 20px 20px; width: max-content; }
}
/* phone */
@media (max-width: 720px) {
  .tr-page.mt-page { padding-block: 16px 40px; }
  .mt-page > * + * { margin-top: 16px; }
  .mt-head h1 { font-size: 46px; }
  .mt-head p { font-size: 17px; }
  .mt-head-act { width: 100%; }
  .mt-head-act .oc-export { display: contents; }
  .mt-page .oc-export .btn, .mt-btn-solid { height: 48px; padding: 0 16px; font-size: 15px; flex: 1 1 auto; justify-content: center; }
  .mt-btn-solid { flex: 1 1 100%; }
  .mt-hero { min-height: 0; background: linear-gradient(180deg, #051f53 0%, #03337b 100%); }
  .mt-hero-ph { position: relative; display: block; width: 100%; height: 150px; right: auto; z-index: 0;
    -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 100%); mask-image: linear-gradient(180deg, #000 55%, transparent 100%); }
  .mt-hero-in { flex-direction: column; align-items: flex-start; gap: 14px; padding: 0 20px 22px; margin-top: -18px; min-height: 0; }
  .mt-hero-ic { display: none; }
  .mt-hero-in { padding-right: 20px !important; margin-top: -30px; }
  .mt-hero-h { font-size: 26px; }
  .mt-hero-when { font-size: 16px; }
  .mt-hero-row { flex-direction: column; align-items: flex-start; gap: 14px; }
  .mt-hero-stats { flex-direction: column; align-items: flex-start; font-size: 16px; }
  .mt-hero-stats > span { padding: 4px 0; } .mt-hero-stats > span + span { border-left: 0; }
  .mt-hero-go { display: none; }
  .mt-hero-cta { position: static; width: 100%; justify-content: center; margin: 4px 20px 22px; width: calc(100% - 40px); }
  .mt-kpis { gap: 10px; }
  .mt-kpi { flex-direction: column; align-items: flex-start; gap: 12px; padding: 16px; }
  .mt-kpi-ic { width: 52px; height: 52px; border-radius: 16px; } .mt-kpi-t strong { font-size: 30px; } .mt-kpi-l { font-size: 15px; } .mt-kpi-s { font-size: 13px; }
  .mt-kpi-go { top: 14px; right: 12px; width: 16px; height: 16px; }
  .mt-tabs { gap: 6px 20px; margin-top: 22px !important; }
  .mt-tabs a { font-size: 17px; gap: 8px; padding: 12px 2px 14px; } .mt-tabs a .ic { width: 20px; height: 20px; }
  .mt-tab-n { min-width: 24px; height: 24px; font-size: 12.5px; }
  .mt-tabs a .ic { display: none; } .mt-tabs { gap: 4px 16px; } .mt-tabs a { font-size: 16px; }
  .mt-controls { margin-top: 16px !important; }
  .mt-fchip { height: 46px; padding: 0 16px; font-size: 16px; gap: 8px; }
  .mt-search, .mt-sort select { height: 48px; } .mt-search { padding: 0 16px; }
  .mt-sort { width: 100%; justify-content: space-between; margin-left: 0; } .mt-sort select { flex: 1; max-width: 260px; }
  .mt-card { display: block; padding: 12px; }
  .mt-ph { width: 100%; height: 170px; min-height: 0; }
  .mt-body { padding: 14px 6px 0; }
  .mt-title { font-size: 23px; }
  .mt-stats { border: 0; border-top: 1px solid var(--mt-line); margin: 14px 6px 0; padding: 14px 0 0; grid-template-columns: 1fr; gap: 11px; }
  .mt-acts { border: 0; padding: 14px 6px 6px; grid-template-columns: 1fr; }
  .mt-empty { padding: 168px 18px 30px; justify-items: center; }
  .mt-empty-art { left: 50%; top: 18px; transform: translateX(-50%); width: 240px; height: 130px; }
  .mt-empty-t strong { font-size: 22px; }
}


/* ===== Public profile (pp-*) — "See public profile" ===== */
.pp-page { max-width: 1120px; padding-block: 28px 64px; display: grid; gap: 20px; --pp-line: #e6ebf3; --pp-blue: #0b3fae; --pp-navy: #061b52; }
.pp-page > *, .pp-reviews > * { min-width: 0; } /* a grid child can't be wider than the phone: its content wraps instead of widening the page */
.pp-card { background: #fff; border: 1px solid var(--pp-line); border-radius: 22px; box-shadow: 0 2px 12px rgba(13,34,64,.05); }
.pp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; height: 48px; padding: 0 22px; border-radius: 999px; border: 1px solid transparent; font: inherit; font-size: 15px; font-weight: 700; text-decoration: none; cursor: pointer; white-space: nowrap; transition: filter .15s, background .15s, border-color .15s; }
.pp-btn-primary { background: linear-gradient(180deg, #0a47c9, #0038a8); color: #fff; box-shadow: 0 8px 18px rgba(0,56,168,.24); }
.pp-btn-primary:hover { filter: brightness(1.08); }
.pp-btn-ghost { background: #fff; border-color: var(--pp-line); color: var(--ink); box-shadow: 0 2px 8px rgba(13,34,64,.06); }
.pp-btn-ghost:hover { border-color: #b9c7e0; background: #f7f9fd; }
.pp-btn-outline { background: #fff; border-color: #2f6df0; color: var(--pp-blue); height: 46px; }
.pp-btn-outline:hover { background: #f1f6ff; }
.pp-btn.sm { height: 40px; padding: 0 16px; font-size: 14px; }
.pp-btn:focus-visible, .pp-th:focus-visible, .pp-arrow:focus-visible, .pp-open:focus-visible, .pp-trip:focus-visible { outline: 3px solid #7aa5ff; outline-offset: 2px; }

/* header */
.pp-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 30px; padding: 28px 32px; align-items: start; }
.pp-avatar { position: relative; width: 140px; height: 140px; }
.pp-avatar .avatar { width: 140px; height: 140px; font-size: 46px; border: 4px solid #fff; box-shadow: 0 0 0 1px var(--pp-line), 0 8px 22px rgba(13,34,64,.14); }
.pp-cam { position: absolute; right: 2px; bottom: 4px; width: 40px; height: 40px; border-radius: 50%; background: #fff; color: var(--pp-blue); display: grid; place-items: center; box-shadow: 0 2px 10px rgba(13,34,64,.22); border: 1px solid var(--pp-line); }
.pp-cam:hover { background: #f1f6ff; }
.pp-id { min-width: 0; display: grid; gap: 6px; align-content: start; }
.pp-name-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.pp-id h1 { margin: 0; font-size: clamp(30px, 4vw, 40px); line-height: 1.05; font-weight: 800; letter-spacing: -.025em; color: var(--pp-navy); }
.pp-role { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 14px; border-radius: 999px; background: #eef3fb; color: var(--ink-2); font-size: 14px; font-weight: 600; border: 1px solid var(--pp-line); }
.pp-role.verified { background: #e6f6ef; color: #0a7b4e; border-color: transparent; }
.pp-role.active { background: #edf3ff; color: var(--pp-blue); border-color: transparent; }
.pp-since { margin: 2px 0 0; color: var(--muted); font-size: 16px; }
.pp-bio { margin: 6px 0 0; max-width: 56ch; color: var(--ink-2); font-size: 16.5px; line-height: 1.55; white-space: pre-line; overflow-wrap: anywhere; }
.pp-bio-empty { color: var(--muted); font-size: 15px; }
.pp-bio-empty a { font-weight: 700; white-space: nowrap; }
.pp-badges { display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 12px; }
.pp-badge { display: inline-flex; align-items: center; gap: 9px; font-size: 15px; font-weight: 500; color: var(--ink-2); }
.pp-badge.ok .ic { color: #16a34a; }
.pp-badge.sun .ic { color: #d99a00; }
.pp-actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: flex-end; }

/* metrics */
.pp-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.pp-tile { display: flex; align-items: center; gap: 16px; padding: 22px 20px; background: #fff; border: 1px solid var(--pp-line); border-radius: 20px; box-shadow: 0 2px 10px rgba(13,34,64,.04); min-width: 0; }
.pp-tile-ic { flex: none; width: 58px; height: 58px; border-radius: 16px; display: grid; place-items: center; }
.pp-tile-ic.amber { background: #fff3d6; color: #f5a000; }
.pp-tile-ic.blue { background: #e8f0ff; color: #2563eb; }
.pp-tile-ic.green { background: #e2f6ea; color: #16a34a; }
.pp-tile-ic.violet { background: #efe9ff; color: #6d3ae0; }
.pp-tile-ic .ic { fill: none; }
.pp-tile-ic.amber .ic { fill: currentColor; }
.pp-tile-t { display: grid; gap: 3px; min-width: 0; }
.pp-tile-l { font-size: 12.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
.pp-tile-v { font-size: 30px; line-height: 1.1; font-weight: 800; letter-spacing: -.02em; color: var(--pp-navy); }
.pp-tile-v.sm { font-size: 24px; }
.pp-tile-s { font-size: 14.5px; color: var(--muted); line-height: 1.3; }

/* next trip */
.pp-trip { position: relative; display: block; min-height: 204px; border-radius: 22px; overflow: hidden; text-decoration: none; color: #fff; isolation: isolate; padding: 24px 28px 24px 24px;
  background: linear-gradient(90deg, #051f53 0%, #04276a 32%, #03337b 46%, #0a3f94 100%); box-shadow: 0 18px 40px rgba(5,31,83,.22); display: flex; gap: 18px; align-items: center; }
.pp-trip-ph { position: absolute; top: 0; right: 0; height: 100%; width: 58%; object-fit: cover; object-position: left center; z-index: -1;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.12) 14%, rgba(0,0,0,.38) 28%, rgba(0,0,0,.8) 44%, #000 58%); mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.12) 14%, rgba(0,0,0,.38) 28%, rgba(0,0,0,.8) 44%, #000 58%); }
.pp-trip-ic { flex: none; width: 64px; height: 64px; border-radius: 18px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.12); display: grid; place-items: center; align-self: flex-start; margin-top: 2px; }
.pp-trip-t { min-width: 0; display: grid; gap: 9px; }
.pp-trip-k { font-size: 13.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: #fcd116; }
.pp-trip-h { margin: 0; font-size: clamp(24px, 2.8vw, 32px); line-height: 1.1; font-weight: 800; letter-spacing: -.02em; color: #fff; }
.pp-trip-h.sm { font-size: clamp(22px, 2.4vw, 28px); }
.pp-arr { margin: 0 .35em; font-weight: 500; }
.pp-trip-p { margin: 0; color: rgba(255,255,255,.85); font-size: 15.5px; max-width: 40ch; }
.pp-trip-when { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 16px; font-weight: 500; }
.pp-pill { display: inline-flex; align-items: center; height: 32px; padding: 0 16px; border-radius: 999px; background: #10b476; color: #fff; font-size: 14.5px; font-weight: 700; margin-left: 6px; box-shadow: 0 4px 12px rgba(16,180,118,.35); }
.pp-trip-row { display: flex; align-items: center; gap: 14px 0; flex-wrap: wrap; margin-top: 4px; }
.pp-trip-route { display: grid; gap: 6px; font-size: 15px; font-weight: 500; padding-right: 26px; }
.pp-rl { position: relative; display: flex; align-items: center; gap: 12px; }
.pp-rl i { flex: none; width: 13px; height: 13px; border-radius: 50%; border: 2.5px solid #fff; position: relative; z-index: 1; }
.pp-rl.to i { border-color: #34d6a0; }
.pp-rl.from::after { content: ""; position: absolute; left: 5.5px; top: calc(50% + 8px); height: calc(100% - 2px); width: 2px; background: rgba(255,255,255,.5); }
.pp-trip-stats { display: flex; align-items: center; font-size: 15.5px; font-weight: 500; }
.pp-trip-stats > span { display: inline-flex; align-items: center; gap: 10px; padding: 4px 24px; }
.pp-trip-stats > span:first-child { border-left: 1px solid rgba(255,255,255,.28); }
.pp-trip-stats > span + span { border-left: 1px solid rgba(255,255,255,.28); }
.pp-trip-go { position: absolute; top: 18px; right: 20px; width: 50px; height: 50px; border-radius: 50%; background: rgba(10,25,60,.72); border: 1px solid rgba(255,255,255,.18); display: grid; place-items: center; backdrop-filter: blur(4px); transition: background .15s; }
.pp-trip:hover .pp-trip-go { background: rgba(10,25,60,.88); }
.pp-trip-cta { position: absolute; right: 20px; bottom: 18px; height: 44px; padding: 0 22px; border-radius: 999px; background: #fff; color: var(--ink); font-weight: 700; font-size: 15px; display: inline-flex; align-items: center; gap: 10px; box-shadow: 0 8px 20px rgba(0,0,0,.2); text-decoration: none; }
.pp-trip-empty { min-height: 150px; }
.pp-trip-empty .pp-trip-cta.static { bottom: auto; top: 50%; transform: translateY(-50%); }

/* vehicle */
.pp-vehicle { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 22px; padding: 14px; align-items: stretch; }
.pp-gal { min-width: 0; display: grid; gap: 12px; align-content: start; }
.pp-frame { position: relative; border-radius: 16px; overflow: hidden; background: #e9eef7; aspect-ratio: 16 / 9.6; }
.pp-main-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pp-main-img.in { animation: ppFade .28s ease; }
@keyframes ppFade { from { opacity: .35; } to { opacity: 1; } }
.pp-open { position: absolute; inset: 0; width: 100%; height: 100%; background: transparent; border: 0; padding: 0; cursor: zoom-in; }
.pp-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 42px; height: 42px; border-radius: 50%; border: 0; background: rgba(255,255,255,.94); color: var(--ink); display: grid; place-items: center; cursor: pointer; box-shadow: 0 4px 14px rgba(0,0,0,.22); }
.pp-arrow:hover { background: #fff; }
.pp-arrow.prev { left: 12px; } .pp-arrow.next { right: 12px; }
.pp-count { position: absolute; right: 12px; bottom: 12px; display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px; border-radius: 999px; background: rgba(10,25,60,.78); color: #fff; font-size: 14px; font-weight: 700; pointer-events: none; backdrop-filter: blur(4px); }
.pp-thumbs { display: grid; grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); gap: 10px; }
.pp-th { padding: 0; border: 2px solid transparent; border-radius: 12px; overflow: hidden; background: #e9eef7; cursor: pointer; aspect-ratio: 4 / 3; opacity: .9; transition: opacity .15s, border-color .15s, box-shadow .15s; }
.pp-th img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pp-th:hover { opacity: 1; }
.pp-th.on { border-color: #2f6df0; opacity: 1; box-shadow: 0 0 0 3px rgba(47,109,240,.18); }
.pp-gal-empty { min-height: 280px; place-content: center; justify-items: center; text-align: center; padding: 26px; border-radius: 16px; background: #f4f7fc; border: 1.5px dashed #c9d6ec; color: #4a6a9e; gap: 8px; }
.pp-gal-empty strong { color: var(--ink); font-size: 17px; }
.pp-gal-empty .pp-btn { margin-top: 8px; }
.pp-vinfo { background: #f6f9ff; border-radius: 16px; padding: 22px 24px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.pp-vtop { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.pp-vchip { display: inline-flex; align-items: center; gap: 9px; height: 36px; padding: 0 14px; border-radius: 999px; background: #e6eefc; color: var(--ink-2); font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.pp-vtitle { margin: 4px 0 0; font-size: clamp(24px, 2.6vw, 30px); line-height: 1.12; font-weight: 800; letter-spacing: -.02em; color: var(--pp-navy); overflow-wrap: anywhere; }
.pp-attrs { list-style: none; margin: 4px 0 0; padding: 0 0 18px; display: grid; grid-auto-flow: column; grid-template-rows: repeat(3, auto); grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 18px; border-bottom: 1px solid #e1e8f5; }
.pp-attrs:last-child { border-bottom: 0; padding-bottom: 0; }
.pp-attrs li { display: flex; align-items: center; gap: 12px; color: var(--ink-2); font-size: 15.5px; min-width: 0; }
.pp-attrs li .ic { flex: none; color: #5a6b85; }
.pp-attrs li span { overflow-wrap: anywhere; }
.pp-about h3 { margin: 4px 0 8px; font-size: 16px; font-weight: 800; color: var(--pp-navy); }
.pp-about p { margin: 0; color: var(--muted); font-size: 15.5px; line-height: 1.6; white-space: pre-line; overflow-wrap: anywhere; }

/* reviews */
.pp-reviews { margin-top: 14px; display: grid; gap: 16px; }
.pp-rv-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.pp-rv-head h2 { margin: 0; display: flex; align-items: center; gap: 14px; font-size: 32px; font-weight: 800; letter-spacing: -.02em; color: var(--pp-navy); }
.pp-rv-head p { margin: 6px 0 0; font-size: 16px; }
.pp-n { display: inline-grid; place-items: center; min-width: 38px; height: 34px; padding: 0 12px; border-radius: 999px; background: #eef3fb; color: var(--ink-2); font-size: 16px; font-weight: 700; letter-spacing: 0; }
.pp-how { background: #f6f9ff; border: 1px solid #dfe8f7; border-radius: 16px; padding: 16px 20px; color: var(--ink-2); font-size: 15px; }
.pp-how ul { margin: 8px 0 0; padding-left: 20px; display: grid; gap: 4px; }
.pp-rv-empty { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: center; padding: 26px 40px; min-height: 230px; }
.pp-rv-art { height: 190px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 380 190'%3E%3Cellipse cx='190' cy='168' rx='170' ry='14' fill='%23eef3fb'/%3E%3Cg fill='%23dfe8f7'%3E%3Crect x='296' y='60' width='7' height='104' rx='3'/%3E%3Cpath d='M300 62c-26-4-42 8-52 22 22-8 40-6 52-2 12-4 30-6 52 2-10-14-26-26-52-22z'/%3E%3Cpath d='M300 66c-20-16-40-14-56-6 24-2 38 4 56 8 18-4 32-10 56-8-16-8-36-10-56 6z'/%3E%3Crect x='338' y='108' width='5' height='56' rx='2.5'/%3E%3Cpath d='M341 110c-16-2-26 6-32 15 14-5 25-4 32-1 7-3 18-4 32 1-6-9-16-17-32-15z'/%3E%3C/g%3E%3Cg fill='%23d3dff3'%3E%3Cpath d='M262 164l22-62 22 62z'/%3E%3Crect x='281' y='162' width='6' height='8'/%3E%3C/g%3E%3Crect x='28' y='98' width='96' height='62' rx='14' fill='%23dbe6fb'/%3E%3Cpath d='M44 160l-4 18 22-18z' fill='%23dbe6fb'/%3E%3Crect x='44' y='118' width='60' height='6' rx='3' fill='%23c4d4f3'/%3E%3Crect x='44' y='132' width='40' height='6' rx='3' fill='%23c4d4f3'/%3E%3Crect x='70' y='20' width='112' height='84' rx='18' fill='%23729dfa'/%3E%3Cpath d='M92 104l-8 24 28-24z' fill='%23729dfa'/%3E%3Cpath d='M126 42l7.4 15 16.6 2.4-12 11.7 2.8 16.5-14.8-7.8-14.8 7.8 2.8-16.5-12-11.7 16.6-2.4z' fill='%23fff'/%3E%3Cg%3E%3Cpath d='M140 156c0-14 10-24 24-24h34c10 0 18 6 22 14l6 4c4 2 6 4 6 8v8H140z' fill='%236f9cf5'/%3E%3Crect x='166' y='138' width='20' height='10' rx='3' fill='%23dfe9fd'/%3E%3Crect x='192' y='138' width='20' height='10' rx='3' fill='%23dfe9fd'/%3E%3Ccircle cx='168' cy='166' r='10' fill='%2335507f'/%3E%3Ccircle cx='168' cy='166' r='4' fill='%23dfe9fd'/%3E%3Ccircle cx='222' cy='166' r='10' fill='%2335507f'/%3E%3Ccircle cx='222' cy='166' r='4' fill='%23dfe9fd'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat; }
.pp-rv-txt h3 { margin: 0 0 8px; font-size: 22px; font-weight: 800; color: var(--pp-navy); }
.pp-rv-txt p { margin: 0 0 16px; font-size: 16px; max-width: 42ch; }
.pp-rv-txt .pp-btn { max-width: 100%; height: auto; min-height: 46px; white-space: normal; text-align: center; }
.pp-rvs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.pp-rv { background: #fff; border: 1px solid var(--pp-line); border-radius: 18px; padding: 18px 20px; box-shadow: 0 2px 10px rgba(13,34,64,.04); display: grid; gap: 8px; align-content: start; }
.pp-rv-h { display: flex; align-items: center; gap: 12px; }
.pp-rv-h > div { display: grid; flex: 1; min-width: 0; }
.pp-rv-route { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
.pp-rv p { margin: 0; font-size: 15.5px; color: var(--ink-2); line-height: 1.55; overflow-wrap: anywhere; }
.pp-err { display: grid; justify-items: center; text-align: center; gap: 10px; padding: 48px 24px; color: #4a6a9e; }
.pp-err h1 { margin: 0; font-size: 26px; color: var(--pp-navy); }
.pp-err .pp-actions { justify-content: center; margin-top: 8px; }
.pp-vfs { border: 0; padding: 0; margin: 0; min-width: 0; }
.pp-vfs legend { padding: 0; }

@media (max-width: 1100px) {
  .pp-tile { padding: 18px 14px; gap: 12px; }
  .pp-tile-ic { width: 50px; height: 50px; }
  .pp-trip-ph { width: 62%; }
  .pp-trip-stats > span { padding: 4px 18px; }
}
@media (max-width: 900px) {
  .pp-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pp-head { grid-template-columns: auto minmax(0, 1fr); padding: 24px; gap: 22px; }
  .pp-head .pp-actions { grid-column: 1 / -1; justify-content: flex-start; }
  .pp-vehicle { grid-template-columns: 1fr; }
  .pp-trip { padding-bottom: 76px; align-items: flex-start; }
  .pp-trip-ph { width: 70%; opacity: .9; }
  .pp-trip-row { flex-direction: column; align-items: flex-start; }
  .pp-trip-stats > span:first-child { border-left: 0; padding-left: 0; }
  .pp-trip-cta { bottom: 16px; }
  .pp-rv-empty { padding: 22px 24px; }
}
@media (max-width: 720px) {
  .pp-page { padding-block: 18px 48px; gap: 16px; }
  .pp-head { grid-template-columns: 1fr; justify-items: start; padding: 22px 20px; }
  .pp-avatar, .pp-avatar .avatar { width: 108px; height: 108px; font-size: 36px; }
  .pp-head .pp-actions { width: 100%; }
  .pp-head .pp-actions .pp-btn { flex: 1 1 150px; }
  .pp-tiles { gap: 12px; }
  .pp-tile { flex-direction: column; align-items: flex-start; gap: 12px; padding: 16px; }
  .pp-tile-ic { width: 48px; height: 48px; border-radius: 14px; }
  .pp-tile-v { font-size: 26px; } .pp-tile-v.sm { font-size: 20px; }
  .pp-trip { flex-direction: column; gap: 14px; padding: 168px 20px 74px; min-height: 0; }
  .pp-trip-ph { width: 100%; height: 150px; -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent); mask-image: linear-gradient(180deg, #000 55%, transparent); object-position: center; }
  .pp-trip-ic { display: none; }
  .pp-trip-go { top: 14px; right: 14px; width: 42px; height: 42px; }
  .pp-trip-cta { left: 20px; right: 20px; justify-content: center; }
  .pp-trip-empty { padding-top: 160px; }
  .pp-trip-empty .pp-trip-cta.static { top: auto; bottom: 16px; transform: none; }
  .pp-trip-route { padding-right: 0; }
  .pp-vehicle { padding: 10px; }
  .pp-vinfo { padding: 18px; }
  .pp-thumbs { gap: 6px; }
  .pp-th { border-radius: 9px; }
  .pp-arrow { width: 36px; height: 36px; }
  .pp-attrs { grid-auto-flow: row; grid-template-rows: none; }
  .pp-rv-head h2 { font-size: 26px; }
  .pp-rv-head .pp-btn { width: 100%; }
  .pp-rv-empty { grid-template-columns: minmax(0, 1fr); padding: 20px; text-align: left; }
  .pp-rv-art { height: 150px; }
  .pp-rvs { grid-template-columns: 1fr; }
}

.pp-trip-stats, .pp-trip-when, .pp-trip-route { text-shadow: 0 1px 8px rgba(3,25,70,.55); }


/* ===== Messages v2 (ib3-*): list · conversation · trip details ===== */
body:has(.ib3-page) { overflow: hidden; }
body:has(.ib3-page) .footer { display: none !important; }
.ib3-page { max-width: 1560px; padding-inline: clamp(12px, 1.4vw, 24px); padding-block: 16px 20px; --ib-line: #e6ebf3; --ib-blue: #0b3fae; --ib-navy: #061b52; box-sizing: border-box; }
.ib3-page.has-active { padding-block: 10px 14px; }
.ib3-page.has-active .ib3-head { display: none; }
.ib3-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; padding-inline: 6px; }
.ib3-eyebrow { display: block; font-size: 14px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--ib-blue); margin-bottom: 4px; }
.ib3-head h1 { margin: 0; font-size: clamp(34px, 3.4vw, 46px); line-height: 1.05; font-weight: 800; letter-spacing: -.025em; color: var(--ib-navy); }
.ib3-sub { margin: 8px 0 0; font-size: 18px; color: var(--muted); }
.ib3-export { display: flex; gap: 10px; }
.ib3-xbtn { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--ib-line); background: #fff; color: var(--ink); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.ib3-xbtn:hover { border-color: #b9c7e0; background: #f7f9fd; }

.ib3-shell { display: grid; grid-template-columns: clamp(340px, 31%, 470px) minmax(0, 1fr) 360px; gap: 10px; height: clamp(520px, calc(100dvh - 210px), 940px); min-height: 480px; box-sizing: border-box; }
.ib3-page.has-active .ib3-shell { height: clamp(500px, calc(100dvh - 88px), 1200px); min-height: 480px; }
.ib3-shell.no-ctx { grid-template-columns: clamp(340px, 31%, 470px) minmax(0, 1fr); }
.ib3-shell.no-ctx .ib3-ctx { display: none; }
.ib3-list, .ib3-chat, .ib3-ctx { min-height: 0; min-width: 0; height: 100%; }
.ib3-list, .ib3-chat { background: #fff; border: 1px solid var(--ib-line); border-radius: 22px; box-shadow: 0 2px 12px rgba(13,34,64,.05); overflow: hidden; display: flex; flex-direction: column; }

/* list */
.ib3-searchrow { display: flex; gap: 10px; padding: 16px 16px 0; }
.ib3-search { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 16px; border: 1px solid var(--ib-line); border-radius: 16px; background: #fff; color: var(--muted); }
.ib3-search:focus-within { border-color: #7aa5ff; box-shadow: 0 0 0 3px rgba(47,109,240,.14); }
.ib3-search-input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; font-size: 15.5px; color: var(--ink); height: 100%; -webkit-appearance: none; appearance: none; }
.ib3-search-input::placeholder { color: #8a98ae; }
.ib3-search-input::-webkit-search-cancel-button { -webkit-appearance: none; }
.ib3-filter { position: relative; flex: none; width: 52px; height: 52px; border-radius: 16px; border: 1px solid var(--ib-line); background: #fff; color: var(--ink-2); display: grid; place-items: center; cursor: pointer; }
.ib3-filter:hover { background: #f4f7fc; }
.ib3-filter.on { background: #edf3ff; border-color: #9db9f5; color: var(--ib-blue); }
.ib3-filter-n { position: absolute; top: -6px; right: -6px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: var(--ib-blue); color: #fff; font-size: 11.5px; font-weight: 800; display: grid; place-items: center; }
.ib3-tabs { display: flex; gap: 8px; padding: 14px 16px 14px; overflow-x: auto; scrollbar-width: none; flex: none; }
.ib3-tabs::-webkit-scrollbar { display: none; }
.ib3-tab { flex: none; display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 15px; border-radius: 999px; border: 1px solid var(--ib-line); background: #fff; color: var(--ink-2); font: inherit; font-size: 15.5px; font-weight: 600; cursor: pointer; transition: background .15s, border-color .15s; }
.ib3-tab:hover { border-color: #b9c7e0; background: #f7f9fd; }
.ib3-tab.on { background: var(--ib-blue); border-color: var(--ib-blue); color: #fff; box-shadow: 0 6px 14px rgba(11,63,174,.24); }
.ib3-tab-n { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: #e5484d; color: #fff; font-size: 12.5px; font-weight: 800; }
.ib3-arch-note { display: flex; align-items: center; gap: 10px; margin: 0 16px 8px; padding: 10px 14px; border-radius: 14px; background: #f4f7fc; color: var(--ink-2); font-size: 14.5px; font-weight: 600; }
.ib3-arch-note span { flex: 1; }
.ib3-linkbtn { border: 0; background: none; color: var(--ib-blue); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; padding: 0; }
.ib3-rows { flex: 1; overflow-y: auto; border-top: 1px solid var(--ib-line); overscroll-behavior: contain; }
.ib3-rowwrap { position: relative; border-bottom: 1px solid var(--ib-line); }
.ib3-rowwrap:hover .ib3-arch, .ib3-arch:focus-visible { opacity: 1; }
.ib3-row { position: relative; display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px; color: inherit; text-decoration: none; transition: background .12s; }
.ib3-row:hover { background: #f7f9fd; }
.ib3-row.sel { background: #eef4ff; box-shadow: inset 4px 0 0 var(--ib-blue); }
.ib3-row .avatar.lg, .ib3-row .ib-av { flex: none; width: 56px; height: 56px; font-size: 18px; }
.ib3-rm { min-width: 0; flex: 1; display: grid; gap: 4px; }
.ib3-rt { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ib3-rt strong { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 18px; font-weight: 700; color: var(--ib-navy); min-width: 0; }
.ib3-time { font-size: 14px; color: var(--muted); flex: none; }
.ib3-row.unread .ib3-time { color: var(--ib-blue); font-weight: 700; }
.ib3-role { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 999px; font-size: 12.5px; font-weight: 600; background: #eef1f6; color: var(--ink-2); }
.ib3-role.passenger { background: #e8f0ff; color: #2a55c7; }
.ib3-role.driver { background: #e3f6ea; color: #14803c; }
.ib3-role.sup { background: #e8f0ff; color: #2a55c7; justify-self: start; }
.ib3-role.offer { background: #fff3d6; color: #8a5a00; }
.ib3-route { font-size: 14.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ib3-last { font-size: 15px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 76px; }
.ib3-row.unread .ib3-last { color: var(--ink); font-weight: 600; }
.ib3-badge { position: absolute; right: 18px; bottom: 16px; display: grid; place-items: center; min-width: 26px; height: 26px; padding: 0 7px; border-radius: 999px; background: var(--ib-blue); color: #fff; font-size: 13px; font-weight: 800; }
.ib3-arch { position: absolute; right: 54px; bottom: 12px; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--ib-line); background: #fff; color: var(--muted); display: grid; place-items: center; cursor: pointer; opacity: 0; transition: opacity .12s; }
.ib3-arch:hover { color: var(--ib-blue); border-color: #9db9f5; }
@media (hover: none) { .ib3-arch { opacity: .85; } }
.ib3-empty { display: grid; justify-items: center; gap: 8px; text-align: center; padding: 48px 28px; color: #4a6a9e; }
.ib3-empty strong { color: var(--ink); font-size: 17px; }
.ib3-empty p { margin: 0; }
.ib3-pill-btn { display: inline-flex; align-items: center; justify-content: center; height: 44px; padding: 0 22px; border-radius: 999px; border: 1px solid var(--ib-line); background: #fff; color: var(--ink); font: inherit; font-size: 15px; font-weight: 700; text-decoration: none; cursor: pointer; margin-top: 8px; }
.ib3-pill-btn.primary { background: linear-gradient(180deg, #0a47c9, #0038a8); color: #fff; border-color: transparent; box-shadow: 0 8px 18px rgba(0,56,168,.24); }

/* conversation */
.ib3-chatin { display: flex; flex-direction: column; height: 100%; min-height: 0; overflow: hidden; background: #fff; position: relative; }
.ib3-chathead { flex: 0 0 auto; display: flex; align-items: center; gap: 14px; padding: 14px 22px; border-bottom: 1px solid var(--ib-line); background: #fff; z-index: 5; box-sizing: border-box; }
.ib3-back { display: none; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--ib-line); place-items: center; color: var(--ink); text-decoration: none; flex: none; }
.ib3-hav { display: block; flex: none; line-height: 0; }
.ib3-hav .avatar.lg, .ib3-chathead > .ib-av, .ib3-chathead .avatar.lg { width: 56px; height: 56px; font-size: 18px; }
.ib3-hid { min-width: 0; display: grid; gap: 4px; }
.ib3-hid.grow { flex: 1; }
.ib3-hname { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ib3-hname strong, .ib3-hid > strong { font-size: 21px; font-weight: 800; color: var(--ib-navy); display: inline-flex; align-items: center; gap: 8px; }
.ib3-hsub { font-size: 15px; color: var(--ink-2); display: flex; gap: 6px; align-items: center; }
.ib3-hrate { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; color: var(--ink); }
.ib3-hrate .ic { color: #f5a000; fill: #f5a000; }
.ib3-iconbtn { flex: none; width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--ib-line); background: #fff; color: var(--ink-2); display: grid; place-items: center; cursor: pointer; }
.ib3-iconbtn:hover { background: #f4f7fc; }
.ib3-infobtn { display: none; }
.ib3-menuwrap { position: relative; }
.ib3-menu { position: absolute; right: 0; top: calc(100% + 8px); z-index: 20; min-width: 230px; background: #fff; border: 1px solid var(--ib-line); border-radius: 16px; box-shadow: 0 18px 40px rgba(13,34,64,.18); padding: 6px; display: grid; }
.ib3-menu[hidden] { display: none; }
.ib3-mi { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 0; background: none; border-radius: 10px; font: inherit; font-size: 15px; font-weight: 600; color: var(--ink); cursor: pointer; text-align: left; }
.ib3-mi:hover { background: #f4f7fc; }
.ib3-mi.danger { color: #c4172c; }

.ib3-trip { flex: none; display: flex; align-items: center; gap: 14px; margin: 0 0 6px 0; padding: 12px 14px; background: #f5f8fd; border: 1px solid #edf1f8; border-radius: 18px; box-sizing: border-box; width: 100%; }
.ib3-trip-ph { flex: none; width: 72px; height: 68px; object-fit: cover; border-radius: 14px; }
.ib3-trip-main { flex: 1; min-width: 0; display: grid; gap: 3px; }
.ib3-trip-k { font-size: 14.5px; color: var(--muted); }
.ib3-trip-r { font-size: clamp(18px, 1.4vw, 22px); line-height: 1.15; font-weight: 800; color: var(--ib-navy); letter-spacing: -.015em; overflow-wrap: anywhere; }
.ib3-trip-m { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 2px; }
.ib3-trip-t { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; color: var(--ink-2); }
.ib3-outline { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 42px; padding: 0 16px; white-space: nowrap; border-radius: 999px; border: 1px solid var(--ib-line); background: #fff; color: var(--ink); font-size: 14px; font-weight: 600; text-decoration: none; box-shadow: 0 2px 8px rgba(13,34,64,.05); }
.ib3-outline:hover { border-color: #b9c7e0; background: #f7f9fd; }
.ib3-chip { display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border-radius: 999px; font-size: 13.5px; font-weight: 600; background: #eef1f6; color: var(--ink-2); white-space: nowrap; }
.ib3-chip.up { background: #e0f6e9; color: #0d7a3f; }
.ib3-chip.off { background: #fff3d6; color: #8a5a00; }
.ib3-chip.bad { background: #fdeeee; color: #c4172c; }
.ib3-chip.solid { height: 34px; padding: 0 16px; font-size: 14.5px; font-weight: 700; color: #fff; box-shadow: 0 6px 16px rgba(0,0,0,.22); }
.ib3-chip.solid.up { background: #10b476; } .ib3-chip.solid.off { background: #f59e0b; } .ib3-chip.solid.bad { background: #e5484d; } .ib3-chip.solid.done { background: rgba(10,25,60,.78); }
.ib3-offerbar { flex: none; margin: 0 0 8px 0; box-sizing: border-box; width: 100%; }

.ib3-msgs { flex: 1 1 0%; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 14px 22px 12px; display: flex; flex-direction: column; gap: 8px; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #94a9d4 #f1f4f9; }
.ib3-msgs::-webkit-scrollbar { width: 9px; }
.ib3-msgs::-webkit-scrollbar-track { background: #f1f4f9; border-radius: 999px; margin: 6px 0; }
.ib3-msgs::-webkit-scrollbar-thumb { background: #94a9d4; border-radius: 999px; min-height: 44px; transition: background-color 0.18s ease; }
.ib3-msgs::-webkit-scrollbar-thumb:hover { background: #0b3fae; }
.ib3-msgs::-webkit-scrollbar-thumb:active { background: #061b52; }
.ib3-day { align-self: center; margin: 12px 0 8px; }
.ib3-day span { display: inline-block; padding: 6px 16px; border-radius: 999px; background: #eef2f8; color: var(--ink-2); font-size: 13.5px; font-weight: 600; }
.ib3-msg { display: flex; align-items: flex-end; gap: 12px; max-width: 100%; }
.ib3-msg.mine { justify-content: flex-end; }
.ib3-msg.end { margin-bottom: 8px; }
.ib3-msg .avatar, .ib3-msg .ib-av { flex: none; width: 40px; height: 40px; font-size: 14px; }
.ib3-avgap { flex: none; width: 40px; }
.ib3-bubble { max-width: min(76%, 560px); padding: 14px 18px 10px; border-radius: 20px; font-size: 16.5px; line-height: 1.5; color: var(--ink); background: #f1f4f9; border-bottom-left-radius: 8px; overflow-wrap: anywhere; }
.ib3-msg.mine .ib3-bubble { background: #dde9ff; border-bottom-left-radius: 20px; border-bottom-right-radius: 8px; }
.ib3-bubble p { margin: 0; white-space: pre-wrap; }
.ib3-bubble .bubble-from, .ib3-bubble .bubble-topic { display: block; font-size: 12.5px; font-weight: 700; color: var(--ib-blue); margin-bottom: 4px; }
.ib3-bubble .bubble-subject { display: block; margin-bottom: 4px; }
.ib3-btime { display: flex; justify-content: flex-end; align-items: center; gap: 6px; margin-top: 4px; font-size: 12.5px; color: #7a8aa3; }
.ib3-ticks { display: inline-flex; align-items: center; color: #9aa8bf; }
.ib3-ticks.seen { color: #2f6df0; }
.ib3-ticks .ic { stroke-width: 2.4; }
.ib3-ticks .ic + .ic { margin-left: -9px; }
.ib3-hello { margin: auto; text-align: center; max-width: 420px; display: grid; gap: 6px; padding: 24px; }
.ib3-hello strong { font-size: 19px; color: var(--ib-navy); }
.ib3-hello p { margin: 0; }

.ib3-foot { flex: 0 0 auto; padding: 10px 20px 14px; border-top: 1px solid var(--ib-line); background: #fff; z-index: 5; box-sizing: border-box; }
.ib3-compwrap { display: grid; gap: 8px; }
.ib3-quick { display: flex; flex-wrap: wrap; gap: 8px; }
.ib3-quick[hidden] { display: none; }
.ib3-q { height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--ib-line); background: #fff; color: var(--ink-2); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.ib3-q:hover { background: #f4f7fc; border-color: #b9c7e0; }
.ib3-q.on { background: #edf3ff; border-color: #9db9f5; color: var(--ib-blue); }
.ib3-composer { display: flex; align-items: flex-end; gap: 10px; }
.ib3-plus { flex: none; width: 52px; height: 52px; border-radius: 16px; border: 1px solid var(--ib-line); background: #fff; color: var(--ink-2); display: grid; place-items: center; cursor: pointer; }
.ib3-plus:hover, .ib3-plus[aria-expanded="true"] { background: #edf3ff; color: var(--ib-blue); border-color: #9db9f5; }
.ib3-field { flex: 1; min-width: 0; display: flex; align-items: center; min-height: 52px; padding: 0 16px; border: 1px solid var(--ib-line); border-radius: 16px; background: #fff; transition: border-color 0.2s, box-shadow 0.2s; }
.ib3-field:focus-within { border-color: #7aa5ff; box-shadow: 0 0 0 3px rgba(47,109,240,.14); }
.ib3-input { width: 100%; border: 0; outline: 0; resize: none; background: transparent; font: inherit; font-size: 15.5px; line-height: 1.45; padding: 13px 0; color: var(--ink); max-height: 110px; overflow-y: auto; }
.ib3-input::placeholder { color: #8a98ae; }
.ib3-send { flex: none; width: 54px; height: 52px; border-radius: 16px; border: 0; background: linear-gradient(180deg, #0a47c9, #0038a8); color: #fff; display: grid; place-items: center; cursor: pointer; box-shadow: 0 6px 16px rgba(0,56,168,.24); transition: filter 0.15s, transform 0.12s; }
.ib3-send:hover { filter: brightness(1.08); }
.ib3-send:active { transform: scale(0.96); }
.ib3-send:disabled { opacity: .55; cursor: default; transform: none; }
.ib3-note { margin: 6px 2px 0; font-size: 12.5px; color: var(--muted); line-height: 1.35; }
.ib3-closed { display: flex; align-items: center; gap: 12px; margin: 4px 0 0; padding: 14px 16px; border-radius: 16px; background: #f4f7fc; color: var(--ink-2); font-size: 15px; }
.ib3-kinds { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.ib3-kinds-l { font-size: 13.5px; font-weight: 700; color: var(--muted); margin-right: 4px; }
.ib3-none { margin: auto; display: grid; justify-items: center; gap: 8px; text-align: center; padding: 40px 28px; max-width: 420px; }
.ib3-none strong { font-size: 21px; color: var(--ib-navy); }
.ib3-none p { margin: 0; }
.ib3-none-ic { width: 72px; height: 72px; border-radius: 22px; background: #edf3ff; color: var(--ib-blue); display: grid; place-items: center; }
.ib3-none-ic.bad { background: #fdeeee; color: #c4172c; }
.ib3-chat > .loading, .ib3-chat > .ib-loading { margin: auto; }

/* right column */
.ib3-ctx { display: flex; flex-direction: column; gap: 10px; overflow-y: auto; overscroll-behavior: contain; padding-bottom: 2px; }
.ib3-ctx-close { display: none; align-self: flex-end; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--ib-line); background: #fff; color: var(--ink); place-items: center; cursor: pointer; flex: none; }
.ib3-card { background: #fff; border: 1px solid var(--ib-line); border-radius: 22px; box-shadow: 0 2px 12px rgba(13,34,64,.05); overflow: hidden; flex: none; }
.ib3-card h3 { margin: 0; font-size: 19px; font-weight: 800; color: var(--ib-navy); }
.ib3-tph { position: relative; height: 188px; background: #dfe8f5; }
.ib3-tph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ib3-tph .ib3-chip { position: absolute; top: 14px; right: 14px; }
.ib3-tbody { padding: 18px 20px 8px; }
.ib3-facts { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 14px; }
.ib3-facts li { display: flex; align-items: center; gap: 14px; font-size: 16.5px; color: var(--ink); }
.ib3-facts li .ic { flex: none; color: #4b5d78; }
.ib3-acts { margin-top: 18px; border-top: 1px solid var(--ib-line); padding-top: 6px; display: grid; }
.ib3-act { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 2px; border: 0; background: none; font: inherit; font-size: 15.5px; color: var(--ink); text-decoration: none; cursor: pointer; text-align: left; }
.ib3-act:hover .grow { text-decoration: underline; }
.ib3-act > .ic:last-child { color: #aab6c9; }
.ib3-act-ic { flex: none; width: 24px; height: 24px; display: grid; place-items: center; color: #4b5d78; }
.ib3-act.danger { color: #d6213a; }
.ib3-act.danger .ib3-act-ic { color: #d6213a; }
.ib3-about { display: block; padding: 18px 20px 16px; color: inherit; text-decoration: none; }
.ib3-about:hover { border-color: #b9c7e0; }
.ib3-aboutrow { display: flex; align-items: center; gap: 16px; margin-top: 14px; }
.ib3-aboutrow .avatar.xl { flex: none; width: 72px; height: 72px; border-radius: 18px; font-size: 24px; }
.ib3-aboutrow > .ic { flex: none; color: #4b5d78; margin-left: auto; }
.ib3-aboutt { display: grid; gap: 3px; min-width: 0; }
.ib3-aboutt strong { font-size: 18px; color: var(--ib-navy); }
.ib3-verifs { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 16px; font-size: 14px; color: var(--ink-2); }
.ib3-verifs span { display: inline-flex; align-items: center; gap: 7px; }
.ib3-verifs .ic { color: #16a34a; }
.ib3-sup { padding: 22px 20px; display: grid; gap: 10px; justify-items: start; }
.ib3-sup h3 { display: inline-flex; align-items: center; gap: 8px; font-size: 21px; }
.ib3-sup p { margin: 0; font-size: 15.5px; line-height: 1.5; }
.ib3-sup .ib3-facts { margin-top: 6px; }
.ib3-help { padding: 18px 20px 10px; }
.ib3-help .ib3-act:first-of-type { margin-top: 6px; }
.ib3-safe { display: flex; gap: 10px; align-items: flex-start; margin: 2px 6px 0; font-size: 13.5px; color: var(--muted); line-height: 1.45; }
.ib3-safe .ic { flex: none; margin-top: 1px; }

@media (max-width: 1279px) {
  .ib3-shell, .ib3-shell.no-ctx { grid-template-columns: clamp(320px, 38%, 420px) minmax(0, 1fr); }
  .ib3-infobtn { display: grid; }
  .ib3-ctx, .ib3-shell.no-ctx .ib3-ctx { display: flex; position: fixed; z-index: 90; top: 0; right: 0; bottom: 0; width: min(420px, 100%); padding: 14px 14px 96px; background: #f4f7fc; box-shadow: -18px 0 50px rgba(10,25,60,.22); transform: translateX(104%); visibility: hidden; transition: transform .25s var(--ease), visibility 0s .25s; }
  .ib3-shell.ctx-open .ib3-ctx { transform: none; visibility: visible; transition: transform .25s var(--ease); }
  .ib3-shell.no-ctx .ib3-ctx:empty { display: none; }
  .ib3-ctx-close { display: grid; }
}
@media (max-width: 820px) {
  .ib3-page { padding-block: 14px 24px; }
  .ib3-head { margin-bottom: 12px; }
  .ib3-sub { font-size: 16px; }
  .ib3-export { display: none; }
  .ib3-shell, .ib3-shell.no-ctx { grid-template-columns: minmax(0, 1fr); height: calc(100dvh - 190px); min-height: 480px; }
  .ib3-shell.has-active .ib3-list { display: none; }
  .ib3-shell:not(.has-active) .ib3-chat { display: none; }
  .ib3-page.has-active { padding-block: 8px 12px; }
  .ib3-page.has-active .ib3-head { display: none; }
  .ib3-page.has-active .ib3-shell { height: calc(100dvh - 156px); }
  .ib3-back { display: grid; }
  .ib3-chathead { padding: 12px 14px; gap: 10px; }
  .ib3-hav .avatar.lg, .ib3-chathead .avatar.lg, .ib3-chathead > .ib-av { width: 46px; height: 46px; font-size: 16px; }
  .ib3-hname strong, .ib3-hid > strong { font-size: 18px; }
  .ib3-iconbtn { width: 42px; height: 42px; }
  .ib3-trip { flex-wrap: wrap; margin: 0 0 6px; padding: 10px; gap: 12px; width: 100%; }
  .ib3-trip-ph { width: 64px; height: 64px; }
  .ib3-trip-r { font-size: 19px; }
  .ib3-outline { width: 100%; justify-content: center; height: 42px; }
  .ib3-msgs { padding: 10px 12px; }
  .ib3-bubble { max-width: 84%; font-size: 16px; }
  .ib3-msg .avatar, .ib3-msg .ib-av, .ib3-avgap { width: 32px; height: 32px; font-size: 12px; }
  .ib3-avgap { height: 1px; }
  .ib3-foot { padding: 6px 12px 12px; }
  .ib3-plus, .ib3-send { width: 50px; height: 50px; }
  .ib3-field { min-height: 50px; padding: 0 14px; }
  .ib3-input { padding: 12px 0; }
  .ib3-row { padding: 14px 14px; }
  .ib3-badge { right: 14px; }
  .ib3-arch { right: 50px; }
  .ib3-tabs { padding: 12px 12px; }
  .ib3-searchrow { padding: 12px 12px 0; }
  .ib3-tab { height: 42px; padding: 0 16px; font-size: 15px; }
}

.ib3-page [hidden] { display: none !important; }

/* ===== My ride alerts v2 (ra-*) · reference design ===== */
.ra-page { --ra-blue: #0b3fae; --ra-line: #e6ebf3; --ra-navy: #051f53; }
.ra-page > * + * { margin-top: 24px; }
.ra-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 18px 28px; flex-wrap: wrap; margin-top: 0 !important; }
.ra-head-t { flex: 1 1 520px; min-width: 0; }
.ra-eyebrow { display: block; font-size: 15px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--ra-blue); margin-bottom: 4px; }
.ra-head h1 { margin: 0; font-size: clamp(40px, 5.6vw, 66px); line-height: 1.02; letter-spacing: -.035em; font-weight: 800; color: var(--ink); }
.ra-head p { margin: 12px 0 0; font-size: 19px; line-height: 1.45; color: var(--muted); max-width: 62ch; }
.ra-head-act { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding-bottom: 6px; }
.ra-export { display: flex; gap: 10px; }
.ra-primary, .ra-cta, .ra-ghost { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 50px; padding: 0 22px; border-radius: 999px; font: inherit; font-size: 16px; font-weight: 700; cursor: pointer; border: 1px solid transparent; white-space: nowrap; transition: filter .15s, border-color .15s, box-shadow .15s; }
.ra-primary, .ra-cta { background: linear-gradient(180deg, #0a47c9, #0038a8); color: #fff; box-shadow: 0 10px 24px rgba(0,56,168,.26); }
.ra-primary:hover, .ra-cta:hover { filter: brightness(1.08); }
.ra-ghost { background: #fff; border-color: var(--ra-line); color: var(--ink); box-shadow: 0 2px 8px rgba(13,34,64,.06); }
.ra-ghost:hover { border-color: #c9d3e4; box-shadow: 0 6px 16px rgba(13,34,64,.1); }
.ra-primary:focus-visible, .ra-cta:focus-visible, .ra-ghost:focus-visible, .ra-btn:focus-visible, .ra-more:focus-visible { outline: 3px solid rgba(11,63,174,.35); outline-offset: 2px; }

/* hero */
.ra-hero { position: relative; background: linear-gradient(90deg, #fff 0, #fff 42%, #f4f8ff 100%); border: 1px solid var(--ra-line); border-radius: 26px; box-shadow: 0 14px 40px rgba(13,34,64,.07); overflow: hidden; isolation: isolate; }
.ra-hero-top { position: relative; display: flex; align-items: center; min-height: 196px; padding: 26px 34px; }
.ra-hero.wide .ra-hero-top { min-height: 262px; padding-bottom: 36px; }
.ra-hero-t { position: relative; z-index: 2; display: flex; align-items: center; gap: 22px; width: 44%; min-width: 0; }
.ra-bell { flex: none; width: 76px; height: 76px; border-radius: 22px; background: #e9f0ff; color: var(--ra-blue); display: grid; place-items: center; box-shadow: inset 0 0 0 1px rgba(11,63,174,.08); }
.ra-hero-t h2 { margin: 0; font-size: clamp(24px, 2.5vw, 34px); line-height: 1.12; letter-spacing: -.02em; font-weight: 800; color: var(--ra-navy); }
.ra-hero-t p { margin: 10px 0 0; font-size: 17px; line-height: 1.45; color: #4b5a78; max-width: 36ch; }
.ra-cta { margin-top: 20px; height: 54px; padding: 0 26px; }
.ra-art { position: absolute; right: 0; top: 0; width: 58%; aspect-ratio: 798 / 204; container-type: inline-size; z-index: 1; pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 22%), linear-gradient(180deg, #000 80%, transparent 100%); -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent 0, #000 22%), linear-gradient(180deg, #000 80%, transparent 100%); mask-composite: intersect; }
.ra-hero.wide .ra-art { width: 66%; }
.ra-art img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ra-pin { position: absolute; display: flex; align-items: center; }
.ra-pin.a { left: 20.6%; top: 11.6%; }
.ra-pin.b { left: 77.8%; top: 8.6%; }
.ra-pin-c { position: relative; z-index: 1; flex: none; display: grid; place-items: center; width: 7.3cqw; height: 7.3cqw; border-radius: 50%; background: rgba(255,255,255,.78); box-shadow: 0 .6cqw 2.2cqw rgba(30,70,140,.18), inset 0 0 0 1px rgba(255,255,255,.9); }
.ra-pin-c svg { width: 3.9cqw; height: 3.9cqw; fill: #1b62ff; filter: drop-shadow(0 .3cqw .5cqw rgba(11,63,174,.3)); }
.ra-pin b { margin-left: -3.2cqw; padding: 0 1.9cqw 0 4cqw; min-width: 9.6cqw; max-width: 22cqw; height: 4.9cqw; display: flex; align-items: center; border-radius: 1.2cqw; background: rgba(255,255,255,.86); box-shadow: 0 .6cqw 2.2cqw rgba(30,70,140,.14); font-size: max(10px, 1.78cqw); font-weight: 700; color: var(--ra-navy); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; line-height: 4.9cqw; }
.ra-perks { position: relative; z-index: 3; list-style: none; margin: -8px 0 0; padding: 0 34px 26px; display: grid; grid-template-columns: repeat(3, 1fr); }
.ra-perks li { display: flex; align-items: center; gap: 18px; padding: 6px 28px; }
.ra-perks li + li { border-left: 1px solid var(--ra-line); }
.ra-perks li:first-child { padding-left: 0; }
.ra-perk-ic { flex: none; width: 66px; height: 66px; border-radius: 50%; background: #e9f0ff; color: var(--ra-blue); display: grid; place-items: center; }
.ra-perks strong { display: block; font-size: 18px; color: var(--ra-navy); margin-bottom: 3px; }
.ra-perks span:not(.ra-perk-ic) { display: block; font-size: 15.5px; line-height: 1.4; color: #4b5a78; }

/* list section */
.ra-sec { background: #fff; border: 1px solid var(--ra-line); border-radius: 26px; box-shadow: 0 14px 40px rgba(13,34,64,.05); padding: 26px 28px 28px; }
.ra-sec-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px 24px; flex-wrap: wrap; margin-bottom: 20px; }
.ra-sec-head h2 { margin: 0; font-size: 30px; letter-spacing: -.02em; font-weight: 800; color: var(--ra-navy); }
.ra-sec-head p { margin: 6px 0 0; font-size: 17px; color: var(--muted); }
.ra-sec-head .ra-sub { font-size: 14.5px; margin-top: 4px; }
.ra-sec-head > div:first-child { flex: 1 1 340px; min-width: 0; }
.ra-tools { display: flex; gap: 12px; align-items: center; flex-wrap: nowrap; flex: 0 1 auto; }
.ra-search { position: relative; display: flex; align-items: center; width: min(340px, 100%); }
.ra-search svg { position: absolute; left: 16px; color: #7b88a3; pointer-events: none; }
.ra-search-in { width: 100%; height: 50px; border-radius: 999px; border: 1px solid var(--ra-line); background: #fff; padding: 0 18px 0 46px; font: inherit; font-size: 16px; color: var(--ink); }
.ra-search-in:focus, .ra-sel:focus { outline: 3px solid rgba(11,63,174,.25); border-color: #9db6ea; }
.ra-selw { position: relative; display: inline-flex; align-items: center; }
.ra-selw svg { position: absolute; right: 16px; pointer-events: none; color: #55627f; }
.ra-sel { appearance: none; -webkit-appearance: none; height: 50px; min-width: 190px; border-radius: 999px; border: 1px solid var(--ra-line); background: #fff; padding: 0 44px 0 20px; font: inherit; font-size: 16px; font-weight: 600; color: var(--ink); cursor: pointer; }
.ra-list { display: grid; gap: 14px; }
.ra-row { position: relative; display: grid; grid-template-columns: 150px minmax(0, 1fr) 170px auto; gap: 14px 24px; align-items: center; padding: 14px 18px 14px 14px; border: 1px solid var(--ra-line); border-radius: 20px; background: #fff; transition: box-shadow .15s, border-color .15s; }
.ra-row:hover { border-color: #d3dcee; box-shadow: 0 10px 28px rgba(13,34,64,.08); }
.ra-row.menu-open { z-index: 6; }
.ra-row.paused .ra-ph img { filter: grayscale(.55) opacity(.85); }
.ra-ph { width: 150px; height: 104px; border-radius: 14px; overflow: hidden; background: #e9eefb; }
.ra-ph img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ra-main { min-width: 0; display: grid; gap: 8px; }
.ra-route { margin: 0; font-size: 24px; line-height: 1.15; letter-spacing: -.015em; font-weight: 800; color: var(--ra-navy); overflow-wrap: anywhere; }
.ra-facts { display: flex; flex-wrap: wrap; gap: 6px 22px; }
.ra-fact { display: inline-flex; align-items: center; gap: 8px; font-size: 16px; color: #3d4b69; }
.ra-fact svg { color: #6c7a97; flex: none; }
.ra-match { display: inline-flex; align-items: center; gap: 7px; width: fit-content; font-size: 14.5px; font-weight: 700; color: var(--ra-blue); text-decoration: none; background: #eaf1ff; padding: 5px 12px; border-radius: 999px; }
.ra-match:hover { background: #dce8ff; }
.ra-note { font-size: 14.5px; color: var(--muted); }
.ra-stat { display: grid; gap: 8px; justify-items: start; }
.ra-pill { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 14px; border-radius: 999px; font-size: 14.5px; font-weight: 800; }
.ra-pill i { width: 8px; height: 8px; border-radius: 50%; }
.ra-pill.on { background: #e6f7ee; color: #0b7a3b; } .ra-pill.on i { background: #1fb15a; }
.ra-pill.off { background: #fff3d9; color: #8a5a00; } .ra-pill.off i { background: #f0a000; }
.ra-created { font-size: 14.5px; color: var(--muted); }
.ra-acts { display: flex; align-items: center; gap: 10px; }
.ra-btn { display: inline-flex; align-items: center; gap: 8px; height: 46px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--ra-line); background: #fff; font: inherit; font-size: 15.5px; font-weight: 700; color: var(--ink); cursor: pointer; }
.ra-btn:hover, .ra-more:hover { border-color: #c4d0e6; background: #f6f9ff; }
.ra-more { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--ra-line); background: #fff; color: #3d4b69; cursor: pointer; }
.ra-menu { position: relative; }
.ra-pop { position: absolute; right: 0; top: calc(100% + 8px); min-width: 230px; z-index: 30; background: #fff; border: 1px solid var(--ra-line); border-radius: 16px; box-shadow: 0 18px 44px rgba(13,34,64,.18); padding: 6px; display: grid; }
.ra-pop[hidden] { display: none; }
.ra-mi { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 0; border-radius: 11px; background: none; font: inherit; font-size: 15.5px; font-weight: 600; color: var(--ink); text-align: left; text-decoration: none; cursor: pointer; }
.ra-mi:hover { background: #f1f5fd; }
.ra-mi.danger { color: #b42318; } .ra-mi.danger:hover { background: #fdecea; }
.ra-none, .ra-error { text-align: center; padding: 34px 18px; border: 1px dashed #cfd9ec; border-radius: 18px; color: var(--muted); display: grid; gap: 8px; justify-items: center; }
.ra-none strong, .ra-error strong { color: var(--ra-navy); font-size: 18px; }
.ra-none p, .ra-error p { margin: 0; }
.ra-error { background: #fff; margin-top: 30px; }
.ra-danger { background: #c0321f !important; border-color: #c0321f !important; }
.ra-confirm-btns { display: flex; justify-content: flex-end; gap: 10px; margin-top: 16px; }

@media (max-width: 1180px) {
  .ra-hero-t { width: 52%; }
  .ra-row { grid-template-columns: 124px minmax(0, 1fr) auto; }
  .ra-ph { width: 124px; height: 96px; }
  .ra-stat { grid-column: 2; grid-row: 2; display: flex; align-items: center; gap: 12px; }
  .ra-acts { grid-column: 3; grid-row: 1 / span 2; }
  .ra-perks li { padding-inline: 18px; gap: 14px; }
  .ra-perk-ic { width: 56px; height: 56px; }
}
@media (max-width: 900px) {
  .ra-hero-top { flex-direction: column; align-items: stretch; padding: 24px 22px 0; min-height: 0 !important; }
  .ra-hero-t { width: 100%; }
  .ra-art { -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 16%, #000 80%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 16%, #000 80%, transparent 100%); }
  .ra-art, .ra-hero.wide .ra-art { position: relative; width: calc(100% + 44px); margin: 14px -22px 0; }
  .ra-hero.wide .ra-art { margin-bottom: -26px; }
  .ra-perks { grid-template-columns: 1fr; margin: 0; padding: 0 22px 20px; position: relative; }
  .ra-perks li, .ra-perks li:first-child { padding: 14px 0; }
  .ra-perks li + li { border-left: 0; border-top: 1px solid var(--ra-line); }
  .ra-sec { padding: 20px 16px 20px; }
  .ra-row { grid-template-columns: 110px minmax(0, 1fr); }
  .ra-ph { width: 110px; height: 88px; }
  .ra-stat { grid-column: 2; grid-row: 2; }
  .ra-acts { grid-column: 1 / -1; grid-row: 3; }
  .ra-tools { flex-wrap: wrap; width: 100%; } .ra-search { width: 100%; flex: 1 1 100%; }
  .ra-selw, .ra-sel { width: 100%; }
}
@media (max-width: 640px) {
  .ra-head h1 { font-size: 40px; } .ra-head p { font-size: 17px; }
  .ra-head-act, .ra-export { width: 100%; } .ra-head-act { gap: 10px; }
  .ra-primary { width: 100%; order: -1; }
  .ra-export .ra-ghost { flex: 1 1 0; padding: 0 12px; }
  .ra-hero-t { gap: 16px; flex-direction: column; align-items: flex-start; } .ra-bell { width: 60px; height: 60px; border-radius: 18px; }
  .ra-cta { width: 100%; }
  .ra-row { grid-template-columns: 1fr auto; padding: 12px; gap: 12px; }
  .ra-ph { grid-column: 1 / -1; width: 100%; height: 108px; }
  .ra-main { grid-column: 1 / -1; }
  .ra-route { font-size: 21px; }
  .ra-stat { grid-column: 1; grid-row: auto; flex-direction: column; align-items: flex-start; gap: 6px; }
  .ra-acts { grid-column: 2; grid-row: auto; flex-wrap: wrap; justify-content: flex-end; }
  .ra-btn { height: 42px; padding: 0 14px; }
}

/* ===== Notifications v2 (hub-*) · reference design ===== */
.hub-pop { width: 500px; max-width: calc(100vw - 24px); max-height: min(740px, calc(100dvh - 92px)); top: 70px; border-radius: 22px; border: 1px solid #e3e9f4; background: #fff; box-shadow: 0 30px 70px rgba(13,34,64,.2), 0 6px 18px rgba(13,34,64,.08); }
.hub-head { padding: 22px 24px 4px; align-items: center; }
.hub-head strong, .hub-head h1 { margin: 0; font-size: 22px; line-height: 1.2; letter-spacing: -.015em; font-weight: 700; color: #061b52; }
.hub-link { display: inline-flex; align-items: center; gap: 7px; font-size: 15px; font-weight: 600; color: #0b3fae; padding: 6px 4px; }
.hub-link:disabled { opacity: .55; cursor: default; }
.hub-tabs { gap: 8px; padding: 14px 20px 16px; border-bottom: 0; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.hub-tabs::-webkit-scrollbar { display: none; }
.hub-tab { flex: none; gap: 8px; height: 40px; padding: 0 14px 0 16px; font-size: 15.5px; font-weight: 600; color: #1b2a4a; background: #fff; border: 1px solid #e3e9f4; box-shadow: 0 1px 3px rgba(13,34,64,.05); }
.hub-tab:hover { background: #f6f9ff; }
.hub-tab.on { background: #0b3fae; border-color: #0b3fae; color: #fff; box-shadow: 0 6px 16px rgba(11,63,174,.28); }
.hub-tab-n { min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: #e5233f; color: #fff; font-size: 12.5px; font-weight: 700; display: inline-grid; place-items: center; }
.hub-tab-n.zero { background: #e8edf5; color: #6b7a96; }
.hub-scroll { min-height: 120px; border-top: 1px solid #edf1f8; }
.hub-sec-h { padding: 14px 24px 6px; }
.hub-item { border-bottom: 1px solid #edf1f8; }
.hub-row { align-items: center; gap: 14px; padding: 16px 20px 16px 22px; background: #fff; }
.hub-row:hover { background: #f6f9ff; }
.hub-row.unread { background: #eef3fc; }
.hub-row.unread:hover { background: #e7eefb; }
.hub-lead { display: flex; align-items: center; gap: 10px; flex: none; }
.hub-lead .hub-ic { width: 46px; height: 46px; }
.hub-lead .hub-ic .ic { width: 22px; height: 22px; stroke-width: 1.8; }
.hub-lead .avatar, .hub-lead .ib-av { width: 48px !important; height: 48px !important; flex: none; }
.hub-tone-orange { background: #fff0df; color: #ee8416; }
.hub-tone-soft { background: #eef2fa; color: #5f7298; }
.hub-tone-blue { background: #e6eefc; }
.hub-tone-green { background: #e3f6ec; color: #17a05b; }
.hub-txt { gap: 3px; }
.hub-txt strong { font-size: 16.5px; line-height: 1.25; font-weight: 700; color: #061b52; }
.hub-body { font-size: 14.5px; line-height: 1.4; color: #5a6a88; -webkit-line-clamp: 2; }
.hub-time { font-size: 13.5px; font-weight: 500; color: #8493ad; margin-top: 2px; }
.hub-row:not(.unread) .hub-body { color: #6f7e99; }
.hub-end { display: flex; align-items: center; gap: 14px; flex: none; color: #8d9bb5; align-self: stretch; }
.hub-end .ic { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.hub-dot { width: 10px; height: 10px; background: #0b57e3; margin-bottom: 0; }
.hub-actions { padding: 0 20px 16px 22px; }
.hub-empty { padding: 48px 28px 52px; }
.hub-foot { display: flex; align-items: center; justify-content: space-between; gap: 0; padding: 0; border-top: 1px solid #e3e9f4; background: #fff; }
.hub-foot a { flex: none; padding: 18px 20px; border-radius: 0; font-size: 15.5px; font-weight: 600; color: #0b2a6b; gap: 10px; }
.hub-foot a .ic { width: 20px; height: 20px; color: #0b3fae; stroke-width: 1.8; }
.hub-foot a + a { border-left: 1px solid #e3e9f4; }
.hub-foot .hub-foot-all { margin-right: auto; color: #0b3fae; }
.hub-foot .hub-foot-all .ic:last-child { width: 14px; height: 14px; }
.hub-foot a:hover { background: #f6f9ff; color: #0b3fae; }
.hub-page-wrap { max-width: 640px; padding-block: 28px 56px; }
.hub-page { background: #fff; border: 1px solid #e3e9f4; border-radius: 22px; box-shadow: 0 14px 40px rgba(13,34,64,.07); overflow: hidden; }
.hub-page .hub-scroll { max-height: none; }
@media (max-width: 640px) {
  .hub-pop { left: 10px; right: 10px; width: auto; top: 62px; max-height: calc(100dvh - 140px); border-radius: 18px; }
  .hub-head { padding: 16px 16px 2px; } .hub-head strong, .hub-head h1 { font-size: 19px; } .hub-link { font-size: 14px; }
  .hub-tabs { padding: 12px 12px 12px; gap: 6px; } .hub-tab { height: 36px; padding: 0 10px 0 12px; font-size: 14px; gap: 6px; }
  .hub-row { gap: 10px; padding: 14px 12px 14px 14px; }
  .hub-lead { gap: 6px; } .hub-lead .hub-ic { width: 38px; height: 38px; } .hub-lead .avatar, .hub-lead .ib-av { width: 40px !important; height: 40px !important; }
  .hub-txt strong { font-size: 15px; } .hub-body { font-size: 13.5px; }
  .hub-end { gap: 8px; }
  .hub-foot a { padding: 14px 10px; font-size: 14px; gap: 6px; } .hub-foot a .ic { width: 18px; height: 18px; }
}
@media (max-width: 480px) {
  .hub-tabs { gap: 5px; padding: 10px 10px; }
  .hub-tab { height: 34px; padding: 0 8px 0 10px; font-size: 13px; gap: 5px; flex: 1 1 auto; justify-content: center; }
  .hub-tab-n { min-width: 18px; height: 18px; font-size: 11px; padding: 0 4px; }
  .hub-foot a { padding: 14px 9px; font-size: 13px; gap: 5px; }
  .hub-foot .hub-foot-all .ic:last-child { display: none; }
  .hub-foot a:not(.hub-foot-all) .ic { display: none; }
}
.hub-pop { top: 76px; }

/* ===== My account v2 (ma-*) · reference design ===== */
.tr-page.ma-page { max-width: 1312px; padding-inline: clamp(16px, 2.8vw, 36px); padding-block: 26px 56px; display: block; --ma-navy: #061b52; --ma-blue: #0b3fae; --ma-line: #e6ebf3; --ma-mut: #5f6f8f; }
.ma-page > * + * { margin-top: 22px; }
.ma-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 18px 28px; flex-wrap: wrap; margin-top: 0 !important; }
.ma-head-t { flex: 1 1 520px; min-width: 0; }
.ma-eyebrow { display: block; font-size: 14px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--ma-blue); margin-bottom: 4px; }
.ma-head h1 { margin: 0; font-size: clamp(38px, 5vw, 56px); line-height: 1.04; letter-spacing: -.035em; font-weight: 800; color: var(--ma-navy); }
.ma-head p { margin: 10px 0 0; font-size: 18px; color: var(--ma-mut); max-width: none; }
.ma-head-act { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; padding-bottom: 6px; }
.ma-btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; height: 46px; padding: 0 20px; border-radius: 999px; border: 1px solid var(--ma-line); background: #fff; color: var(--ma-navy); font: inherit; font-size: 15.5px; font-weight: 700; text-decoration: none; cursor: pointer; white-space: nowrap; box-shadow: 0 2px 8px rgba(13,34,64,.06); transition: filter .15s, border-color .15s, box-shadow .15s, background .15s; }
.ma-btn:hover { border-color: #c4d0e6; box-shadow: 0 6px 16px rgba(13,34,64,.1); }
.ma-btn-primary { background: linear-gradient(180deg, #0a47c9, #0038a8); border-color: transparent; color: #fff; box-shadow: 0 10px 24px rgba(0,56,168,.28); }
.ma-btn-primary:hover { filter: brightness(1.08); border-color: transparent; }
.ma-btn-soft { color: var(--ma-blue); background: #fff; border-color: #cfdcf5; box-shadow: none; }
.ma-btn-soft:hover { background: #f3f7ff; }
.ma-btn-sm { height: 36px; padding: 0 16px; font-size: 14px; box-shadow: none; }
.ma-danger { color: #b42318; }
.ma-btn:focus-visible, .ma-stat:focus-visible, .ma-q:focus-visible, .ma-ck-i:focus-visible, .ma-tabs a:focus-visible { outline: 3px solid rgba(11,63,174,.35); outline-offset: 2px; }
.ma-link { background: none; border: 0; padding: 0; font: inherit; font-size: 14px; font-weight: 700; color: var(--ma-blue); cursor: pointer; text-align: left; }

/* banner */
.ma-banner { position: relative; display: flex; align-items: center; gap: 26px; min-height: 184px; padding: 22px 32px; border-radius: 22px; overflow: hidden; isolation: isolate; color: #fff; background: linear-gradient(100deg, #082a78 0%, #0a3a9e 46%, #1c5fd0 100%); box-shadow: 0 16px 40px rgba(8,42,120,.22); }
.ma-banner-art { position: absolute; z-index: -1; right: 0; top: 0; height: 100%; width: 62%; object-fit: cover; object-position: right center;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 34%); mask-image: linear-gradient(90deg, transparent 0, #000 34%); }
.ma-av { position: relative; flex: none; width: 124px; height: 124px; }
.ma-av .avatar { width: 124px !important; height: 124px !important; border: 4px solid #fff; box-shadow: 0 8px 22px rgba(0,0,0,.25); font-size: 34px; }
.ma-cam { position: absolute; right: -2px; bottom: 2px; width: 40px; height: 40px; border-radius: 50%; border: 3px solid #fff; background: var(--ma-blue); color: #fff; display: grid; place-items: center; cursor: pointer; box-shadow: 0 4px 12px rgba(0,0,0,.25); padding: 0; }
.ma-cam:hover { filter: brightness(1.12); }
.ma-id { min-width: 0; display: grid; gap: 8px; justify-items: start; }
.ma-id h2 { margin: 0; font-size: clamp(26px, 2.6vw, 34px); line-height: 1.1; letter-spacing: -.02em; font-weight: 800; color: #fff; overflow-wrap: anywhere; }
.ma-status { display: inline-flex; align-items: center; height: 26px; padding: 0 12px; border-radius: 999px; background: #3b82f6; color: #fff; font-size: 13.5px; font-weight: 700; }
.ma-mail { margin: 0; font-size: 16px; color: rgba(255,255,255,.92); overflow-wrap: anywhere; }
.ma-prog { display: flex; align-items: center; gap: 10px; font-size: 14.5px; font-weight: 600; color: #fff; }
.ma-prog > svg { flex: none; width: 18px; height: 18px; padding: 3px; border-radius: 50%; background: #3b82f6; stroke: #fff; }
.ma-bar { display: block; width: 170px; height: 8px; border-radius: 99px; background: rgba(255,255,255,.28); overflow: hidden; }
.ma-bar i { display: block; height: 100%; border-radius: 99px; background: #9cc4ff; transition: width .4s; }
.ma-bubble { position: absolute; right: 3%; top: 14%; z-index: 1; width: clamp(160px, 15%, 200px); padding: 11px 14px 12px; border-radius: 16px; background: rgba(255,255,255,.93); color: var(--ma-navy); display: grid; gap: 2px; box-shadow: 0 10px 28px rgba(0,20,70,.2); font-size: 13.5px; line-height: 1.35; }
.ma-bubble strong { font-size: 14px; } .ma-bubble span { color: #4b5a78; }
.ma-bubble::after { content: ""; position: absolute; left: 18px; bottom: -8px; border: 8px solid transparent; border-top-color: rgba(255,255,255,.93); border-bottom: 0; }

/* stats */
.ma-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.ma-stat { display: flex; align-items: center; gap: 16px; padding: 18px 20px; background: #fff; border: 1px solid var(--ma-line); border-radius: 18px; box-shadow: 0 6px 20px rgba(13,34,64,.05); text-decoration: none; color: inherit; transition: box-shadow .15s, border-color .15s; }
.ma-stat:hover { border-color: #cfdcf5; box-shadow: 0 12px 30px rgba(13,34,64,.09); }
.ma-stat-ic { flex: none; width: 58px; height: 58px; border-radius: 50%; background: #e6eefc; color: var(--ma-blue); display: grid; place-items: center; }
.ma-stat-ic svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ma-stat-t { flex: 1; min-width: 0; display: grid; line-height: 1.2; }
.ma-stat-t strong { font-size: 30px; font-weight: 800; color: var(--ma-navy); letter-spacing: -.02em; }
.ma-stat-t em { font-style: normal; font-size: 16px; font-weight: 600; color: var(--ma-navy); }
.ma-stat-t small { font-size: 14px; color: #8493ad; }
.ma-stat > svg:last-child { flex: none; color: #8d9bb5; fill: none; stroke: currentColor; stroke-width: 2; }

/* tabs */
.ma-tabs { display: flex; gap: 6px; border-bottom: 1px solid var(--ma-line); overflow-x: auto; scrollbar-width: none; }
.ma-tabs::-webkit-scrollbar { display: none; }
.ma-tabs a { flex: none; display: inline-flex; align-items: center; gap: 9px; padding: 14px 20px; font-size: 16px; font-weight: 600; color: #3d4b69; text-decoration: none; border-bottom: 3px solid transparent; margin-bottom: -1px; }
.ma-tabs a svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ma-tabs a[aria-selected="true"] { color: var(--ma-blue); border-bottom-color: var(--ma-blue); font-weight: 700; }
.ma-tabs a:hover { color: var(--ma-blue); }
.ma-tab-n { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 99px; background: #e6eefc; color: var(--ma-blue); font-size: 12px; font-weight: 700; display: inline-grid; place-items: center; }

/* overview grid */
.ma-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 22px; align-items: start; margin-top: 18px !important; }
.ma-col { display: grid; gap: 22px; align-content: start; min-width: 0; }
.ma-col > * { margin: 0 !important; }
.ma-card { background: #fff; border: 1px solid var(--ma-line); border-radius: 22px; box-shadow: 0 10px 30px rgba(13,34,64,.05); padding: 24px; }
.ma-ch { display: flex; align-items: flex-start; gap: 16px; }
.ma-ch-ic { flex: none; width: 54px; height: 54px; border-radius: 50%; background: #e6eefc; color: var(--ma-blue); display: grid; place-items: center; }
.ma-ch-ic svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ma-ch-ic.sm { width: 40px; height: 40px; }
.ma-ch-t { flex: 1; min-width: 0; }
.ma-ch-t h3 { margin: 2px 0 4px; font-size: 21px; font-weight: 800; letter-spacing: -.015em; color: var(--ma-navy); }
.ma-ch-t p { margin: 0; font-size: 15px; line-height: 1.45; color: var(--ma-mut); }
.ma-ch > .ma-btn { flex: none; }
.ma-info { margin: 20px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px 24px; padding: 22px; border: 1px solid var(--ma-line); border-radius: 16px; background: #fbfcff; }
.ma-info > div { display: grid; gap: 4px; align-content: start; min-width: 0; }
.ma-info dt { font-size: 14px; color: #6f7e99; } .ma-info dd { margin: 0; font-size: 17px; color: var(--ma-navy); overflow-wrap: anywhere; }
.ma-ok { display: inline-flex; align-items: center; gap: 7px; font-size: 14.5px; font-weight: 600; color: #15803d; }
.ma-ok svg { width: 18px; height: 18px; padding: 3px; border-radius: 50%; background: #dcf6e6; stroke: #15803d; fill: none; stroke-width: 3; }
.ma-gallery { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-top: 20px; }
.ma-slot { position: relative; aspect-ratio: 4 / 3; border-radius: 14px; }
.ma-slot.cover { grid-column: span 2; aspect-ratio: auto; }
.ma-slot-img { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; border-radius: 14px; overflow: hidden; cursor: zoom-in; background: #e9eefb; }
.ma-slot-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .25s; }
.ma-slot-img:hover img { transform: scale(1.03); }
.ma-cover { position: absolute; left: 10px; bottom: 10px; padding: 4px 12px; border-radius: 99px; background: var(--ma-blue); color: #fff; font-size: 13px; font-weight: 700; }
.ma-more { position: absolute; right: 8px; top: 8px; width: 32px; height: 32px; border-radius: 50%; border: 0; background: rgba(255,255,255,.95); color: var(--ma-navy); display: grid; place-items: center; cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,.2); padding: 0; }
.ma-pop { position: absolute; right: 8px; top: 44px; z-index: 10; min-width: 168px; padding: 6px; background: #fff; border: 1px solid var(--ma-line); border-radius: 14px; box-shadow: 0 16px 40px rgba(13,34,64,.2); display: grid; }
.ma-pop[hidden] { display: none; }
.ma-pop button { text-align: left; padding: 10px 12px; border: 0; border-radius: 9px; background: none; font: inherit; font-size: 14.5px; font-weight: 600; color: var(--ma-navy); cursor: pointer; }
.ma-pop button:hover { background: #f1f5fd; } .ma-pop .danger { color: #b42318; }
.ma-add { aspect-ratio: 4 / 3; border: 2px dashed #b6c8ee; border-radius: 14px; background: #f7faff; color: var(--ma-blue); display: grid; place-content: center; justify-items: center; gap: 2px; cursor: pointer; font: inherit; }
.ma-add:hover { background: #eef4ff; }
.ma-add strong { font-size: 15px; } .ma-add small { font-size: 14px; color: #6f7e99; }
.ma-gallery:has(.ma-slot:only-child) .ma-slot.cover { grid-column: span 2; }
.ma-vd { display: flex; align-items: center; gap: 16px; margin-top: 18px; padding: 14px 16px; border: 1px solid var(--ma-line); border-radius: 16px; background: #fbfcff; }
.ma-vd-ic { flex: none; width: 46px; height: 46px; border-radius: 50%; background: #e6eefc; color: var(--ma-blue); display: grid; place-items: center; }
.ma-vd-ic svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ma-vd-t { flex: 1; min-width: 0; } .ma-vd-t strong { font-size: 15.5px; color: var(--ma-navy); } .ma-vd-t p { margin: 2px 0 0; font-size: 14.5px; color: var(--ma-mut); }
.ma-mgr { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin: 12px 0 16px; }
.ma-mgr-i { position: relative; display: grid; gap: 8px; } .ma-mgr-i img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 12px; } .ma-mgr-b { display: flex; gap: 6px; flex-wrap: wrap; }
.ma-docs { display: grid; gap: 14px; margin-top: 20px; }
.ma-doc { display: grid; grid-template-columns: 52px minmax(0, 1.25fr) minmax(0, 1fr) 76px auto; gap: 14px 18px; align-items: center; padding: 16px; border: 1px solid var(--ma-line); border-radius: 16px; background: #fbfcff; }
.ma-doc-ic { width: 48px; height: 48px; border-radius: 12px; background: #e6eefc; color: var(--ma-blue); display: grid; place-items: center; }
.ma-doc-ic svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ma-doc-n { display: grid; gap: 6px; min-width: 0; }
.ma-doc-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .ma-doc-top strong { font-size: 16px; color: var(--ma-navy); }
.ma-doc-num { display: grid; } .ma-doc-num small { font-size: 13.5px; color: #8493ad; } .ma-doc-num span { font-size: 15.5px; color: var(--ma-navy); overflow-wrap: anywhere; }
.ma-doc-hint, .ma-doc-note { margin: 0; font-size: 14px; color: var(--ma-mut); } .ma-doc-note { color: #b42318; }
.ma-chip { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 11px; border-radius: 99px; font-size: 13px; font-weight: 700; }
.ma-chip.ok { background: #e3f6ec; color: #15803d; } .ma-chip.ok svg { fill: none; stroke: currentColor; stroke-width: 3; }
.ma-chip.warn { background: #fff3d9; color: #8a5a00; } .ma-chip.bad { background: #fde8e6; color: #b42318; } .ma-chip.none { background: #eef2fa; color: #5f7298; }
.ma-doc-x { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; }
.ma-doc-x > div { display: grid; line-height: 1.3; } .ma-doc-x small { color: #8493ad; } .ma-doc-x span { color: var(--ma-navy); font-size: 15.5px; } .ma-doc-x em { font-style: normal; color: var(--ma-mut); }
.ma-doc-cal { margin-top: 18px; color: var(--ma-blue); } .ma-doc-cal svg { fill: none; stroke: currentColor; stroke-width: 1.8; }
.ma-doc-x.warn em { color: #b45309; font-weight: 600; } .ma-doc-x.bad em, .ma-doc-x.bad span { color: #b42318; font-weight: 600; }
.ma-doc-th { width: 76px; height: 56px; padding: 0; border: 1px solid var(--ma-line); border-radius: 10px; overflow: hidden; background: #eef2fa; cursor: zoom-in; display: grid; place-items: center; color: #8d9bb5; }
.ma-doc-th.empty { cursor: default; } .ma-doc-th img { width: 100%; height: 100%; object-fit: cover; }
.ma-doc-b { display: flex; gap: 8px; }
.ma-err { display: grid; gap: 10px; justify-items: start; margin-top: 14px; color: #b42318; }

/* side column */
.ma-side { padding: 22px 22px 14px; }
.ma-side-h { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; } .ma-side-h h3 { margin: 0; font-size: 20px; font-weight: 800; color: var(--ma-navy); }
.ma-q { display: flex; align-items: center; gap: 14px; padding: 14px 4px; border-top: 1px solid #edf1f8; text-decoration: none; color: inherit; }
.ma-q:first-of-type { border-top: 1px solid #edf1f8; margin-top: 8px; }
.ma-q:hover .ma-q-t strong { color: var(--ma-blue); }
.ma-q-ic { flex: none; width: 44px; height: 44px; border-radius: 50%; background: #e6eefc; color: var(--ma-blue); display: grid; place-items: center; }
.ma-q-ic svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ma-q-t { flex: 1; min-width: 0; display: grid; gap: 1px; } .ma-q-t strong { font-size: 16px; color: var(--ma-navy); } .ma-q-t small { font-size: 13.5px; line-height: 1.35; color: #7a89a6; }
.ma-q > svg:last-child { flex: none; color: #8d9bb5; fill: none; stroke: currentColor; stroke-width: 2; }
.ma-q-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 2px 6px; border-top: 1px solid #edf1f8; }
.ma-q-foot a { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 600; color: var(--ma-mut); text-decoration: none; } .ma-q-foot a:hover { color: var(--ma-blue); }
.ma-q-foot .btn { min-height: 34px; }
.ma-comp { display: flex; align-items: center; gap: 18px; padding: 14px 0 16px; }
.ma-comp p { margin: 0; font-size: 16px; line-height: 1.45; color: var(--ma-mut); }
.ma-ring-w { position: relative; flex: none; width: 104px; height: 104px; display: grid; place-items: center; }
.ma-ring { position: absolute; inset: 0; width: 100%; height: 100%; }
.ma-ring .bg { fill: none; stroke: #e1e9f8; stroke-width: 9; } .ma-ring .fg { fill: none; stroke: #1a6bff; stroke-width: 9; stroke-linecap: round; transition: stroke-dashoffset .5s; }
.ma-ring-w strong { position: relative; font-size: 22px; font-weight: 800; color: var(--ma-navy); }
.ma-ck { list-style: none; margin: 0; padding: 0; }
.ma-ck-i { width: 100%; display: flex; align-items: center; gap: 12px; padding: 13px 4px; border: 0; border-top: 1px solid #edf1f8; background: none; font: inherit; text-align: left; cursor: pointer; color: var(--ma-navy); }
.ma-ck-i:hover { color: var(--ma-blue); }
.ma-ck-c { flex: none; width: 26px; height: 26px; border-radius: 50%; border: 2px solid #cbd6ea; display: grid; place-items: center; color: #fff; }
.ma-ck-i.done .ma-ck-c { background: #16a34a; border-color: #16a34a; } .ma-ck-c svg { fill: none; stroke: currentColor; stroke-width: 3; }
.ma-ck-l { flex: 1; font-size: 15.5px; }
.ma-ck-i > svg:last-child { color: #8d9bb5; fill: none; stroke: currentColor; stroke-width: 2; }

@media (max-width: 1180px) {
  .ma-grid { grid-template-columns: 1fr; }
  .ma-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ma-doc { grid-template-columns: 52px minmax(0, 1fr) minmax(0, 1fr); } .ma-doc-th { display: none; } .ma-doc-b { grid-column: 2 / -1; }
}
@media (max-width: 760px) {
  .ma-head h1 { font-size: 38px; } .ma-head p { font-size: 16.5px; }
  .ma-head-act { width: 100%; } .ma-head-act .ma-btn { flex: 1 1 0; padding: 0 14px; }
  .ma-banner { flex-direction: column; align-items: flex-start; gap: 16px; padding: 22px 20px 120px; }
  .ma-banner-art { width: 100%; height: 130px; top: auto; bottom: 0; -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 40%); mask-image: linear-gradient(180deg, transparent 0, #000 40%); object-position: right bottom; }
  .ma-bubble { top: auto; bottom: 34px; right: 14px; width: 152px; padding: 9px 12px 10px; font-size: 12.5px; }
  .ma-av, .ma-av .avatar { width: 96px !important; height: 96px !important; } .ma-av { width: 96px; height: 96px; }
  .ma-bar { width: 120px; }
  .ma-stat { padding: 14px; gap: 12px; } .ma-stat-ic { width: 46px; height: 46px; } .ma-stat-ic svg { width: 22px; height: 22px; } .ma-stat-t strong { font-size: 24px; } .ma-stat-t em { font-size: 14.5px; } .ma-stat-t small { font-size: 12.5px; }
  .ma-tabs a { padding: 12px 14px; font-size: 15px; }
  .ma-card { padding: 18px 16px; border-radius: 18px; }
  .ma-ch { flex-wrap: wrap; } .ma-ch > .ma-btn { margin-left: 70px; }
  .ma-info { grid-template-columns: 1fr; padding: 16px; gap: 16px; }
  .ma-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ma-slot.cover { grid-column: span 2; aspect-ratio: 16 / 10; }
  .ma-vd { flex-wrap: wrap; } .ma-vd > .ma-btn { width: 100%; }
  .ma-doc { grid-template-columns: 44px minmax(0, 1fr); padding: 14px; } .ma-doc-x, .ma-doc-b { grid-column: 1 / -1; } .ma-doc-b .ma-btn { flex: 1; }
}
.ma-gallery { grid-template-columns: 2fr repeat(4, minmax(0, 1fr)); grid-auto-rows: 150px; }
.ma-slot, .ma-slot.cover, .ma-add { aspect-ratio: auto; height: 150px; }
.ma-slot.cover { grid-column: auto; }
.ma-gallery:has(.ma-slot:only-child) .ma-slot.cover { grid-column: span 2; }
.ma-q-foot .btn { background: none !important; border: 0 !important; box-shadow: none !important; color: var(--ma-mut) !important; font-weight: 600; font-size: 14px; padding: 0 !important; min-height: 0; gap: 7px; }
.ma-q-foot .ac-logout { background: none !important; border: 0 !important; box-shadow: none !important; color: var(--red, #ce1126) !important; font-weight: 600; font-size: 14px; padding: 0 !important; min-height: 0; gap: 7px; cursor: pointer; transition: color var(--t, 0.2s) ease; }
.ma-q-foot .ac-logout:hover { color: #b42318 !important; }
@media (max-width: 1180px) { .ma-gallery { grid-auto-rows: 120px; } .ma-slot, .ma-add { height: 120px; } }
@media (max-width: 760px) { .ma-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 110px; } .ma-slot, .ma-add { height: 110px; } .ma-slot.cover { grid-column: span 2; height: 170px; } .ma-gallery { grid-auto-rows: auto; } }
@media (max-width: 760px) {
  .ma-ch { flex-wrap: wrap; gap: 12px 14px; }
  .ma-ch-ic { width: 46px; height: 46px; }
  .ma-ch-t { flex: 1 1 calc(100% - 64px); }
  .ma-ch > .ma-btn { flex: 1 1 100%; margin-left: 0; }
  .ma-stat { min-width: 0; } .ma-stat-t { min-width: 0; } .ma-stat > svg:last-child { display: none; }
  .ma-page { overflow-x: clip; }
}
.ma-docform { display: grid; gap: 16px; }
.ma-docform .doc-form-grid { display: grid; gap: 16px; }
.ma-docform label { display: grid; gap: 6px; font-size: 14px; font-weight: 700; color: var(--ma-navy, #061b52); }
.ma-docform input[type=text] { height: 48px; padding: 0 14px; border: 1px solid #d5deef; border-radius: 12px; font: inherit; font-size: 16px; }
.ma-docform .doc-field { display: grid; gap: 6px; } .ma-docform .doc-field-label { font-size: 14px; font-weight: 700; color: #061b52; }
.ma-docform .doc-file-input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.ma-docform .doc-drop { position: relative; display: flex; align-items: center; gap: 10px; padding: 14px 16px; border: 2px dashed #b6c8ee; border-radius: 14px; background: #f7faff; color: #0b3fae; font-weight: 700; cursor: pointer; }
.ma-docform .doc-drop.has-file { border-style: solid; background: #eef4ff; }
.ma-docform .doc-drop svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.ma-docform .doc-file-name { font-size: 13.5px; color: #5f6f8f; font-weight: 500; }

/* ===== Everyday rides (ev-*) · compact flagship design ===== */
.ev { --ev-navy: #061b52; --ev-blue: #0b3fae; }
.ev-eyebrow {
  display: inline-block;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand, #0038a8);
  margin-bottom: 6px;
}
.ev-head h2 {
  margin: 0;
  font-size: 28px;
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-weight: 800;
  color: var(--ink, #0a192f);
}
.ev-head p {
  margin: 8px 0 0;
  max-width: 740px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--muted, #55607a);
}
.ev-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 18px;
}
.ev-card {
  position: relative;
  display: block;
  overflow: hidden;
  height: 210px;
  border-radius: 18px;
  color: #fff;
  text-decoration: none;
  isolation: isolate;
  background: #0d2a63;
  box-shadow: 0 10px 24px rgba(13, 34, 64, 0.12);
  min-height: 0;
}
.ev-main, .ev-a, .ev-b {
  grid-row: auto;
  aspect-ratio: auto;
}
.ev-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
  transition: transform 0.4s ease;
}
.ev-card:hover img {
  transform: scale(1.035);
}
.ev-shade {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(6, 27, 82, 0) 24%, rgba(6, 27, 82, 0.42) 54%, rgba(6, 27, 82, 0.88) 100%);
}
.ev-body {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 14px;
}
.ev-ic {
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #fff;
  color: var(--brand, #0038a8);
  display: grid;
  place-items: center;
  box-shadow: 0 4px 12px rgba(0, 20, 70, 0.24);
}
.ev-ic svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  width: 18px !important;
  height: 18px !important;
}
.ev-t {
  flex: 1;
  min-width: 0;
  display: grid;
  gap: 2px;
}
.ev-t strong {
  font-size: 15.5px;
  line-height: 1.25;
  letter-spacing: -0.01em;
  font-weight: 700;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ev-t span {
  font-size: 12.5px;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.94);
  text-shadow: 0 1px 5px rgba(0, 0, 0, 0.5);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ev-go {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(4px);
  display: grid;
  place-items: center;
  transition: background 0.2s, transform 0.2s;
}
.ev-go svg {
  fill: none;
  stroke: #fff;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  width: 15px !important;
  height: 15px !important;
}
.ev-card:hover .ev-go {
  background: rgba(255, 255, 255, 0.38);
  transform: translateX(2px);
}
.ev-card:focus-visible {
  outline: 3px solid #fff;
  outline-offset: -4px;
  box-shadow: 0 0 0 4px var(--ev-blue);
}
.ev-cta {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 16px;
}
.ev-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 38px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid #e3e9f4;
  background: #fff;
  color: var(--ink, #0a192f);
  font: inherit;
  font-size: 13.5px;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 2px 6px rgba(13, 34, 64, 0.06);
  transition: filter 0.15s, box-shadow 0.15s, border-color 0.15s, transform 0.15s;
}
.ev-btn:hover {
  border-color: #c4d0e6;
  box-shadow: 0 4px 12px rgba(13, 34, 64, 0.12);
  transform: translateY(-1px);
}
.ev-btn svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
  width: 16px !important;
  height: 16px !important;
}
.ev-btn-primary {
  background: linear-gradient(180deg, #0b46be 0%, var(--brand, #0038a8) 100%);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 4px 12px rgba(0, 56, 168, 0.25);
}
.ev-btn-primary:hover {
  background: linear-gradient(180deg, var(--brand, #0038a8) 0%, #002b82 100%);
  border-color: transparent;
  filter: brightness(1.04);
}
.ev-btn:focus-visible {
  outline: 2px solid var(--brand, #0038a8);
  outline-offset: 2px;
}

/* Tablet adjustments */
@media (min-width: 681px) and (max-width: 900px) {
  .ev-grid { gap: 10px; }
  .ev-card { height: 200px; border-radius: 16px; }
  .ev-body { padding: 12px 10px; gap: 8px; }
  .ev-ic { width: 30px; height: 30px; }
  .ev-ic svg { width: 15px !important; height: 15px !important; }
  .ev-go { width: 28px; height: 28px; }
  .ev-go svg { width: 14px !important; height: 14px !important; }
  .ev-t strong { font-size: 13.5px; line-height: 1.25; }
  .ev-t span { font-size: 11.5px; line-height: 1.3; }
}
@media (min-width: 681px) and (max-width: 780px) {
  .ev-ic { display: none; }
  .ev-body { padding: 12px 12px; }
}

/* Mobile adjustments */
@media (max-width: 680px) {
  .ev-head h2 { font-size: 22px; line-height: 1.2; }
  .ev-grid { grid-template-columns: 1fr; gap: 12px; margin-top: 14px; }
  .ev-card { height: 180px; border-radius: 16px; }
  .ev-body { padding: 14px 14px; gap: 10px; }
  .ev-ic { width: 34px; height: 34px; }
  .ev-ic svg { width: 17px !important; height: 17px !important; }
  .ev-go { width: 30px; height: 30px; }
  .ev-t strong { font-size: 15.5px; }
  .ev-t span { font-size: 13px; -webkit-line-clamp: 2; }
  .ev-cta { gap: 10px; margin-top: 14px; }
  .ev-btn { height: 38px; font-size: 13.5px; }
}

/* ---- Navegación en tablet estrecha (681px - 900px): solo iconos para evitar scroll horizontal ---- */
@media (min-width: 681px) and (max-width: 900px) {
  .nav { gap: 4px; }
  .nav-link { padding: 0; width: 40px; height: 40px; justify-content: center; }
  .nav-link > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .nav-account-label { display: none; }
  .topbar-inner { gap: 10px; }
}


/* ==========================================================================
   POPULAR ROUTES SECTION (Home Page — Replaces "For Private Car Owners")
   ========================================================================== */

.pr-section {
  position: relative;
  isolation: isolate;
  z-index: 1;
  scroll-margin-top: 84px;
  padding-top: 36px;
  padding-bottom: 0;
  margin-block: 16px;
}

/* Framed container with landscape background, rounded corners and subtle border */
.pr-frame {
  position: relative;
  width: 100%;
  border-radius: 32px;
  overflow: hidden;
  border: 0;
  /* Hairline ring + inner highlight + soft multi-layer elevation (no hard border) */
  box-shadow:
    0 0 0 1px rgba(15, 23, 42, 0.04),
    inset 0 1px 1px rgba(255, 255, 255, 0.8),
    0 1px 2px rgba(15, 23, 42, 0.03),
    0 20px 50px -12px rgba(15, 23, 42, 0.06);
  background-color: #f0f7ff;
  background-image:
    radial-gradient(ellipse 85% 70% at 50% 45%, rgba(255, 255, 255, 0.90) 0%, rgba(240, 248, 255, 0.72) 55%, rgba(210, 235, 255, 0.45) 100%),
    url('/people/explore-philippines-bg.jpg');
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  padding: 24px 20px 22px;
}

.pr-head-row {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  text-align: center;
}

.pr-head {
  text-align: center;
  max-width: 640px;
  margin: 0 auto;
}

.pr-eyebrow {
  display: inline-block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #0038a8;
  margin-bottom: 4px;
}

.pr-title {
  font-size: 26px;
  font-weight: 850;
  letter-spacing: -0.025em;
  line-height: 1.15;
  color: #0f172a;
  margin: 0 0 4px;
}

.pr-title-accent {
  color: #0038a8;
}

.pr-subtitle {
  font-size: 13.5px;
  line-height: 1.4;
  color: #475569;
  margin: 0;
  font-weight: 450;
}

.pr-view-all-top {
  position: absolute;
  right: 0;
  top: 4px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 16px;
  border-radius: 999px;
  background: #ffffff;
  border: 1px solid rgba(203, 213, 225, 0.85);
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.05);
  color: #0f172a;
  font-size: 12.5px;
  font-weight: 600;
  text-decoration: none;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, color 0.18s ease;
  z-index: 5;
}

.pr-view-all-top:hover {
  border-color: #93c5fd;
  color: #0038a8;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.09);
  transform: translateY(-1px);
}

.pr-view-all-top svg {
  width: 13px !important;
  height: 13px !important;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* 3D Cover Flow Stage */
.pr-cover-wrapper {
  position: relative;
  width: 100%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pr-cover-stage {
  position: relative;
  width: 100%;
  height: 385px;
  perspective: 1200px;
  perspective-origin: 50% 50%;
  outline: none;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  touch-action: pan-y;
}

.pr-cover-stage.is-dragging,
.pr-cover-stage.is-dragging * {
  cursor: pointer !important;
  user-select: none !important;
  -webkit-user-select: none !important;
}

/* Individual 3D Cover Flow Card.
   Transform / opacity / z-index are driven live by JS (continuous cover-flow physics). */
.pr-card {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 290px;
  height: 356px;
  margin-top: -178px;
  margin-left: -145px;
  background: #ffffff;
  border-radius: 18px;
  box-shadow: 0 14px 28px -8px rgba(15, 23, 42, 0.14), 0 4px 10px -2px rgba(15, 23, 42, 0.06);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  /* iOS-like damped settle */
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.5s ease;
  will-change: transform, opacity;
  user-select: none;
  -webkit-user-select: none;
  cursor: pointer;
}

/* Direct manipulation: follow the pointer 1:1 with no easing */
.pr-cover-stage.is-dragging .pr-card {
  transition: none;
}

.pr-card.pr-pos-0 {
  cursor: pointer;
  box-shadow: 0 24px 48px -12px rgba(15, 23, 42, 0.22), 0 8px 18px -4px rgba(15, 23, 42, 0.08), 0 0 0 1px rgba(255, 255, 255, 0.95);
}

.pr-card.pr-pos-hidden {
  pointer-events: none;
}

.pr-card.pr-pos-m1:hover,
.pr-card.pr-pos-p1:hover {
  box-shadow: 0 20px 40px -10px rgba(15, 23, 42, 0.2), 0 4px 12px -2px rgba(15, 23, 42, 0.08);
}

/* Navigation Buttons Contained Within the Rounded Container Frame */
.pr-nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 25;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #ffffff;
  border: 1px solid rgba(203, 213, 225, 0.85);
  box-shadow: 0 4px 14px rgba(15, 35, 75, 0.14), 0 2px 6px rgba(15, 35, 75, 0.06);
  color: #0038a8;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: transform 0.2s cubic-bezier(0.2, 1, 0.3, 1), box-shadow 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.pr-nav-prev {
  left: 12px;
}

.pr-nav-next {
  right: 12px;
}

.pr-nav-btn:hover:not(:disabled) {
  background: #ffffff;
  border-color: #93c5fd;
  color: #1d4ed8;
  box-shadow: 0 6px 20px rgba(15, 35, 75, 0.20);
  transform: translateY(-50%) scale(1.06);
}

.pr-nav-btn:active:not(:disabled) {
  transform: translateY(-50%) scale(0.96);
}

.pr-nav-btn svg {
  width: 18px !important;
  height: 18px !important;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Card Media (h-28 to h-32 scale) */
.pr-card-media {
  position: relative;
  height: 124px;
  flex-shrink: 0;
  overflow: hidden;
  background: #dae5f7;
  border-radius: 18px 18px 0 0;
}

.pr-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: translateZ(0);
  backface-visibility: hidden;
  transition: transform 0.6s cubic-bezier(0.2, 1, 0.3, 1);
}

.pr-card:hover .pr-card-img {
  transform: scale(1.04) translateZ(0);
}

.pr-card-media-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(8, 22, 48, 0.08) 0%, rgba(8, 22, 48, 0) 50%, rgba(8, 22, 48, 0.12) 100%);
  pointer-events: none;
}

.pr-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(8px);
  box-shadow: 0 2px 8px rgba(10, 24, 52, 0.12);
  font-size: 10.5px;
  font-weight: 600;
  color: #0f172a;
  line-height: 1.1;
}

.pr-badge-ic {
  display: inline-flex;
  color: #f97316;
}

.pr-badge-ic svg {
  width: 11px !important;
  height: 11px !important;
  fill: #f97316;
  stroke: #ea580c;
  stroke-width: 1.5;
}

.pr-badge-mode {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2.5px 7px;
  border-radius: 999px;
  background: rgba(15, 29, 54, 0.85);
  backdrop-filter: blur(6px);
  color: #ffffff;
  font-size: 10px;
  font-weight: 600;
}

.pr-badge-mode svg {
  width: 11px !important;
  height: 11px !important;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
}

/* Card Body */
.pr-card-body {
  padding: 11px 14px 11px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 1;
  min-height: 0;
  background: #ffffff;
}

.pr-route-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: start;
}

/* Vertical Timeline */
.pr-timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.pr-timeline::before {
  content: "";
  position: absolute;
  left: 4.5px;
  top: 6px;
  bottom: 6px;
  width: 1.5px;
  background: #cbd5e1;
}

.pr-tl-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  line-height: 1.2;
}

.pr-tl-dot-origin {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid #0038a8;
  background: #ffffff;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}

.pr-tl-dot-stop {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #94a3b8;
  margin-left: 3px;
  margin-right: 3px;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}

.pr-tl-pin {
  width: 10px;
  height: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #0038a8;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
  background: #ffffff;
}

.pr-tl-pin svg {
  width: 10px !important;
  height: 12px !important;
  fill: #0038a8;
  stroke: #ffffff;
  stroke-width: 1.2;
}

.pr-tl-origin .pr-tl-text,
.pr-tl-dest .pr-tl-text {
  font-size: 13.5px;
  font-weight: 750;
  color: #0f172a !important;
  opacity: 1 !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: -0.01em;
}

.pr-tl-stop .pr-tl-text {
  font-size: 11px;
  font-weight: 500;
  color: #64748b !important;
  opacity: 1 !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Right Duration & Highway Meta */
.pr-route-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
  gap: 3px;
  padding-top: 1px;
  flex-shrink: 0;
}

.pr-meta-row {
  display: inline-flex;
  align-items: center;
  gap: 3.5px;
  font-size: 11px;
  font-weight: 500;
  color: #64748b !important;
  opacity: 1 !important;
  white-space: nowrap;
}

.pr-meta-row svg {
  width: 11px !important;
  height: 11px !important;
  fill: none;
  stroke: #64748b;
  stroke-width: 1.8;
  flex-shrink: 0;
}

.pr-meta-hwy {
  font-size: 10.5px;
  font-weight: 500;
  color: #64748b !important;
  opacity: 1 !important;
  max-width: 90px;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Bottom Price & Distance & CTA */
.pr-price-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px;
  padding-top: 8px;
  margin-top: auto;
  border-top: 1px dashed #e2e8f0;
}

.pr-price-col {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.pr-price-kicker {
  font-size: 10.5px;
  font-weight: 500;
  color: #64748b !important;
  opacity: 1 !important;
  line-height: 1.1;
  margin-bottom: 2px;
}

.pr-price-main {
  display: flex;
  align-items: baseline;
  gap: 4px;
  white-space: nowrap;
}

.pr-price-val {
  font-size: 22px;
  font-weight: 800;
  color: #0038a8 !important;
  opacity: 1 !important;
  letter-spacing: -0.02em;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.pr-price-unit {
  font-size: 11px;
  font-weight: 400;
  color: #64748b !important;
  opacity: 1 !important;
}

.pr-price-distance {
  display: inline-flex;
  align-items: center;
  gap: 3.5px;
  font-size: 11px;
  font-weight: 500;
  color: #64748b !important;
  opacity: 1 !important;
  margin-top: 2px;
}

.pr-price-distance svg {
  width: 11px !important;
  height: 11px !important;
  fill: none;
  stroke: #64748b;
  stroke-width: 1.8;
}

.pr-price-meta-sub {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 2px;
}

.pr-avail-mini {
  font-size: 10.5px;
  font-weight: 600;
  color: #0038a8;
}

.pr-avatars {
  display: flex;
  align-items: center;
  min-width: 0;
}

.pr-av {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1.4px solid #ffffff;
  margin-left: -4px;
  overflow: hidden;
  background: linear-gradient(135deg, #dbe8fe 0%, #c3d9fd 100%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 8.5px;
  font-weight: 700;
  color: #0038a8;
  box-shadow: 0 1px 3px rgba(15, 35, 75, 0.12);
  flex-shrink: 0;
}

.pr-av:first-child {
  margin-left: 0;
}

.pr-av img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.pr-go-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #0038a8;
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0, 56, 168, 0.32);
  flex-shrink: 0;
  text-decoration: none;
  transition: transform 0.18s cubic-bezier(0.2, 1, 0.3, 1), box-shadow 0.18s ease, background-color 0.18s ease;
}

.pr-go-btn:hover {
  transform: scale(1.08);
  background: #1d4ed8;
  box-shadow: 0 6px 16px rgba(0, 56, 168, 0.42);
}

.pr-go-btn svg {
  width: 15px !important;
  height: 15px !important;
  fill: none;
  stroke: #ffffff;
  stroke-width: 2.3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ==========================================================================
   Responsive Breakpoints for 3D Cover Flow
   ========================================================================== */

@media (min-width: 681px) and (max-width: 1023px) {
  .pr-frame {
    padding: 22px 16px 20px;
    border-radius: 28px;
  }
  .pr-cover-stage {
    height: 380px;
  }
  .pr-head-row {
    margin-bottom: 14px;
  }
  .pr-view-all-top {
    position: static;
    margin-top: 10px;
    align-self: center;
  }
  .pr-card {
    width: 280px;
    height: 350px;
    margin-left: -140px;
    margin-top: -175px;
  }
  .pr-nav-prev {
    left: 8px;
  }
  .pr-nav-next {
    right: 8px;
  }
}

@media (max-width: 680px) {
  .pr-section {
    padding-top: 24px;
    margin-bottom: 8px;
    scroll-margin-top: 72px;
  }
  .pr-frame {
    padding: 18px 12px 18px;
    border-radius: 24px;
  }
  .pr-head-row {
    margin-bottom: 12px;
  }
  .pr-title {
    font-size: 22px;
  }
  .pr-subtitle {
    font-size: 13px;
  }
  .pr-view-all-top {
    position: static;
    margin-top: 10px;
    display: inline-flex;
    align-self: center;
  }
  .pr-cover-stage {
    height: 375px;
  }
  .pr-card {
    width: min(275px, calc(100% - 64px));
    height: 350px;
    margin-left: calc(-1 * min(137.5px, (100% - 64px) / 2));
    margin-top: -175px;
  }
  .pr-nav-btn {
    width: 36px;
    height: 36px;
  }
  .pr-nav-prev {
    left: 4px;
  }
  .pr-nav-next {
    right: 4px;
  }
}

/* Maintain Admin Popular Routes Carousel Preview Grid without 3D transforms */
.adm-pr-cp-grid .pr-card {
  position: static !important;
  width: 100% !important;
  height: auto !important;
  min-height: 350px !important;
  margin: 0 !important;
  transform: none !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  cursor: default !important;
  box-shadow: 0 4px 14px rgba(10, 25, 47, 0.08) !important;
}
.adm-pr-cp-grid .pr-card:hover {
  transform: translateY(-2px) !important;
}

/* ==========================================================================
   ADMIN -> CONTENT MANAGEMENT -> POPULAR ROUTES (.adm-pr-*)
   ========================================================================== */

.adm-pr-head-btns {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.adm-pr-kpis {
  margin-bottom: 18px;
}

.adm-pr-carousel-preview {
  margin-bottom: 20px;
  padding: 16px;
  border: 1px solid #d5e2f6;
  background: #ffffff;
}

.adm-pr-cp-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.adm-pr-cp-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.adm-pr-cp-stage {
  border-radius: 14px;
  padding: 24px 18px;
  border: 1px solid #d8e4f7;
}

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

.adm-pr-cp-grid .pr-card {
  flex: initial;
  width: 100%;
}

.adm-pr-workspace {
  display: grid;
  grid-template-columns: 328px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

.adm-pr-list-col {
  background: #ffffff;
  border: 1px solid #dde5f2;
  border-radius: 16px;
  padding: 12px;
  box-shadow: 0 2px 10px rgba(15, 29, 54, 0.04);
}

.adm-pr-list-toolbar {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid #edf2fa;
}

.adm-pr-tabs {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

.adm-pr-tab {
  border: 1px solid #dce5f4;
  background: #f6f9fe;
  color: #415576;
  font-size: 11.5px;
  font-weight: 600;
  padding: 5px 9px;
  border-radius: 8px;
  cursor: pointer;
}

.adm-pr-tab.on {
  background: var(--brand, #0038a8);
  border-color: var(--brand, #0038a8);
  color: #ffffff;
}

.adm-pr-route-rows {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.adm-pr-row {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  padding: 8px;
  border-radius: 12px;
  border: 1px solid #e2eaf6;
  background: #fbfdff;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

.adm-pr-row:hover {
  border-color: #b7cdf0;
  background: #f4f8ff;
}

.adm-pr-row.sel {
  border-color: var(--brand, #0038a8);
  background: #eff5ff;
  box-shadow: 0 0 0 2px rgba(0, 56, 168, 0.12);
}

.adm-pr-row.is-archived {
  opacity: 0.68;
}

.adm-pr-row-thumb {
  position: relative;
  width: 54px;
  height: 44px;
  border-radius: 8px;
  overflow: hidden;
  background: #dbe6f8;
  flex-shrink: 0;
}

.adm-pr-row-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.adm-pr-row-ord {
  position: absolute;
  bottom: 3px;
  left: 3px;
  background: rgba(15, 29, 54, 0.82);
  color: #ffffff;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 4px;
}

.adm-pr-row-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.adm-pr-row-top {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.adm-pr-row-title {
  font-size: 13px;
  font-weight: 700;
  color: #10203b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.adm-pr-row-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: #536788;
  flex-wrap: wrap;
}

.adm-pr-badge-pill {
  background: #fff3e6;
  color: #c2410c;
  border: 1px solid #fed7aa;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 999px;
}

.adm-pr-row-stats {
  font-size: 11px;
  margin-top: 1px;
}

.adm-pr-stat-live {
  color: #0f766e;
  font-weight: 600;
}

.adm-pr-stat-est {
  color: #5c6f8f;
}

.adm-pr-row-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}

.adm-pr-row-actions .btn-xs {
  padding: 3px 8px;
  min-height: 24px;
  height: 24px;
  font-size: 11px;
  font-weight: 600;
  border-radius: 6px;
  line-height: 1;
}

.adm-pr-order-btns {
  display: flex;
  gap: 3px;
}

.adm-pr-icon-btn {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  border: 1px solid #d7e2f3;
  background: #ffffff;
  color: #364b6e;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}

.adm-pr-icon-btn:hover:not(:disabled) {
  border-color: #9cb8e6;
  background: #f2f7ff;
}

.adm-pr-icon-btn:disabled {
  opacity: 0.35;
  cursor: default;
}

.adm-pr-icon-btn.danger:hover {
  border-color: #f87171;
  background: #fef2f2;
  color: #dc2626;
}

/* Right Editor Column */
.adm-pr-editor-card {
  padding: 16px;
}

.adm-pr-editor-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 14px;
  margin-bottom: 16px;
  border-bottom: 1px solid #e6eef9;
  flex-wrap: wrap;
}

.adm-pr-editor-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.adm-pr-geo-alert {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 12px;
  background: #fffbeb;
  border: 1px solid #fde68a;
  color: #92400e;
  margin-bottom: 16px;
}

.adm-pr-geo-alert p {
  margin: 2px 0 0;
  font-size: 12.5px;
  line-height: 1.4;
}

.adm-pr-editor-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 20px;
  align-items: start;
}

.adm-pr-form-pane {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
  width: 100%;
}

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

.adm-pr-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.adm-pr-field-full {
  grid-column: 1 / -1;
  width: 100%;
}

.adm-pr-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  row-gap: 4px;
  flex-wrap: wrap;
  user-select: none;
}

.adm-pr-label-main {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #475569;
}

.adm-pr-label-ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #0038a8;
  flex-shrink: 0;
}

.adm-pr-label-hint {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #64748b;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  padding: 1.5px 7px;
  border-radius: 999px;
  line-height: 1.2;
}

/* Input & Select Wrappers */
.adm-pr-input-wrap,
.adm-pr-select-wrap {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
}

.adm-pr-input-prefix {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #64748b;
  pointer-events: none;
  z-index: 2;
  transition: color 0.15s ease;
}

.adm-pr-input-wrap:focus-within .adm-pr-input-prefix,
.adm-pr-select-wrap:focus-within .adm-pr-input-prefix {
  color: #0038a8;
}

.adm-pr-select-arrow {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #64748b;
  pointer-events: none;
  z-index: 2;
  transition: transform 0.15s ease, color 0.15s ease;
}

.adm-pr-select-wrap:focus-within .adm-pr-select-arrow {
  color: #0038a8;
}

/* Styled Inputs & Selects */
.adm-pr-input,
.adm-pr-select {
  width: 100%;
  height: 42px;
  border-radius: 10px;
  border: 1px solid #cbd5e1;
  background-color: #ffffff;
  color: #0f172a;
  font-size: 13.5px;
  font-weight: 500;
  font-family: inherit;
  padding: 0 12px;
  box-sizing: border-box;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.adm-pr-input.adm-pr-has-prefix,
.adm-pr-select.adm-pr-has-prefix {
  padding-left: 38px;
}

.adm-pr-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 36px;
  cursor: pointer;
}

.adm-pr-input:hover,
.adm-pr-select:hover {
  border-color: #94a3b8;
  background-color: #fafcff;
}

.adm-pr-input:focus,
.adm-pr-select:focus {
  outline: none;
  border-color: #0038a8;
  background-color: #ffffff;
  box-shadow: 0 0 0 3px rgba(0, 56, 168, 0.12), 0 1px 2px rgba(15, 23, 42, 0.04);
}

.adm-pr-input::placeholder {
  color: #94a3b8;
  font-weight: 400;
}

/* Styled Textarea */
.adm-pr-textarea {
  width: 100%;
  min-height: 80px;
  border-radius: 10px;
  border: 1px solid #cbd5e1;
  background-color: #ffffff;
  color: #0f172a;
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  padding: 10px 12px;
  box-sizing: border-box;
  resize: vertical;
  line-height: 1.5;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.adm-pr-textarea:hover {
  border-color: #94a3b8;
  background-color: #fafcff;
}

.adm-pr-textarea:focus {
  outline: none;
  border-color: #0038a8;
  background-color: #ffffff;
  box-shadow: 0 0 0 3px rgba(0, 56, 168, 0.12), 0 1px 2px rgba(15, 23, 42, 0.04);
}

.adm-pr-textarea::placeholder {
  color: #94a3b8;
  font-weight: 400;
}

/* Stops Editor */
.adm-pr-stops-box,
.adm-pr-media-box,
.adm-pr-sync-box {
  background: #f8fbff;
  border: 1px solid #dee8f7;
  border-radius: 12px;
  padding: 13px;
}

.adm-pr-stops-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.adm-pr-stops-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 10px;
}

.adm-pr-stop-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  background: #ffffff;
  border: 1px solid #d7e3f5;
  border-radius: 8px;
  padding: 4px 8px;
}

.adm-pr-stop-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--brand, #0038a8);
  flex-shrink: 0;
}

.adm-pr-stop-edit {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 3px 4px !important;
  font-size: 12.5px !important;
  flex: 1;
  min-width: 0;
}

.adm-pr-stop-btn {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
  color: #475569;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: all 0.12s ease;
}

.adm-pr-stop-btn:hover:not(:disabled) {
  background: #e2e8f0;
  color: #0f172a;
}

.adm-pr-stop-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.adm-pr-stop-btn.danger:hover:not(:disabled) {
  background: #fef2f2;
  border-color: #fecaca;
  color: #dc2626;
}

.adm-pr-stop-add {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
}

.adm-pr-stop-add-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 42px;
  padding: 0 16px;
  border-radius: 10px;
  border: 1px solid #0038a8;
  background: #0038a8;
  color: #ffffff;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
  box-shadow: 0 1px 3px rgba(0, 56, 168, 0.25);
}

.adm-pr-stop-add-btn:hover {
  background: #002d87;
  border-color: #002d87;
}

.adm-pr-stop-add-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(0, 56, 168, 0.25);
}

/* Media Library & Framing */
.adm-pr-media-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

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

.adm-pr-media-item {
  position: relative;
  border: 2px solid transparent;
  border-radius: 9px;
  overflow: hidden;
  padding: 0;
  cursor: pointer;
  background: #dae5f7;
  height: 68px;
  text-align: left;
}

.adm-pr-media-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.adm-pr-media-item.sel {
  border-color: var(--brand, #0038a8);
  box-shadow: 0 0 0 2px rgba(0, 56, 168, 0.2);
}

.adm-pr-media-caption {
  position: absolute;
  inset: auto 0 0 0;
  background: linear-gradient(180deg, transparent, rgba(10, 22, 46, 0.85));
  color: #ffffff;
  font-size: 9.5px;
  font-weight: 600;
  padding: 8px 5px 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.adm-pr-framing-controls {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding-top: 10px;
  border-top: 1px solid #e3ecfa;
}

.adm-pr-slider-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
}

.adm-pr-slider-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.adm-pr-slider-title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #475569;
}

.adm-pr-slider-title svg {
  color: #0038a8;
}

.adm-pr-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 11px;
  font-weight: 700;
  color: #0038a8;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  padding: 1px 6px;
  border-radius: 6px;
  line-height: 1.2;
}

.adm-pr-range {
  width: 100%;
  height: 6px;
  -webkit-appearance: none;
  appearance: none;
  background: #e2e8f0;
  border-radius: 999px;
  outline: none;
  margin: 6px 0;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.adm-pr-range:hover {
  background: #cbd5e1;
}

.adm-pr-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #0038a8;
  border: 2.5px solid #ffffff;
  box-shadow: 0 1px 4px rgba(0, 56, 168, 0.35);
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.adm-pr-range::-webkit-slider-thumb:hover {
  transform: scale(1.15);
  box-shadow: 0 2px 6px rgba(0, 56, 168, 0.45);
}

.adm-pr-range::-webkit-slider-thumb:active {
  transform: scale(1.15);
  box-shadow: 0 0 0 4px rgba(0, 56, 168, 0.2);
}

.adm-pr-range::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #0038a8;
  border: 2.5px solid #ffffff;
  box-shadow: 0 1px 4px rgba(0, 56, 168, 0.35);
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.adm-pr-range::-moz-range-thumb:hover {
  transform: scale(1.15);
  box-shadow: 0 2px 6px rgba(0, 56, 168, 0.45);
}

.adm-pr-range::-moz-range-thumb:active {
  transform: scale(1.15);
  box-shadow: 0 0 0 4px rgba(0, 56, 168, 0.2);
}

/* Real-Time Sync Box */
.adm-pr-sync-head {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 6px;
}

.adm-pr-sync-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
}

.adm-pr-sync-item {
  background: #ffffff;
  border: 1px solid #e0e9f7;
  border-radius: 8px;
  padding: 7px 9px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.adm-pr-sync-k {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #637696;
}

.adm-pr-sync-v {
  font-size: 12.5px;
  font-weight: 700;
  color: #10203b;
}

/* Sticky Live Card Preview Pane */
.adm-pr-preview-pane {
  position: sticky;
  top: 18px;
  align-self: start;
  min-width: 0;
  width: 100%;
}

.adm-pr-preview-sticky {
  background: linear-gradient(180deg, #f8fbff 0%, #edf4fc 100%);
  border: 1px solid #d5e2f6;
  border-radius: 16px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: 0 4px 18px rgba(15, 23, 42, 0.04);
}

.adm-pr-preview-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 2px;
}

.adm-pr-live-card-mount {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  min-height: 486px;
}

.adm-pr-live-card-mount .pr-card {
  position: static !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  margin: 0 auto !important;
  width: 280px !important;
  max-width: 100% !important;
  height: 486px !important;
  min-height: 486px !important;
  transform: none !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  cursor: default !important;
  box-shadow: 0 10px 28px -4px rgba(15, 23, 42, 0.12), 0 4px 10px -2px rgba(15, 23, 42, 0.05) !important;
  flex: initial !important;
}

.adm-pr-live-card-mount .pr-card:hover {
  transform: none !important;
}

.adm-pr-preview-foot {
  margin-top: 2px;
}

@media (max-width: 1320px) {
  .adm-pr-workspace {
    grid-template-columns: 1fr;
  }
  .adm-pr-cp-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 960px) {
  .adm-pr-editor-split {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .adm-pr-preview-pane {
    position: static;
    max-width: 360px;
    width: 100%;
    margin: 0 auto;
  }
}

@media (max-width: 720px) {
  .adm-pr-field-grid,
  .adm-pr-sync-metrics {
    grid-template-columns: 1fr;
  }
  .adm-pr-cp-grid {
    grid-template-columns: 1fr;
  }
  .adm-pr-editor-card {
    padding: 12px;
  }
  .adm-pr-editor-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  .adm-pr-editor-actions {
    width: 100%;
    display: flex;
    gap: 8px;
  }
  .adm-pr-editor-actions .btn {
    flex: 1;
    text-align: center;
    justify-content: center;
  }
}

/* ============================================================================
 * KASABAY OPERATIONS CENTER — FLAGSHIP EXECUTIVE & OPERATIONAL DESIGN SYSTEM
 * Strictly scoped to .ops-shell, .ops-modal-backdrop, .ops-ctx-menu, .ops-login-wrap
 * Zero impact on public pages (#/)
 * ============================================================================ */

/* --- 0. Operations Login Screen --- */
.ops-login-wrap {
  max-width: 440px;
  margin: 48px auto 72px;
  text-align: center;
}
.ops-login-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(0, 56, 168, 0.08);
  color: #0038a8;
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.ops-login-wrap h1 {
  font-size: 1.65rem;
  font-weight: 800;
  letter-spacing: -0.025em;
  color: #0f172a;
  margin-bottom: 6px;
}
.ops-login-card {
  margin-top: 20px;
  text-align: left;
  border-radius: 16px;
  border: 1px solid rgba(15, 23, 42, 0.09);
  box-shadow: 0 12px 32px -8px rgba(15, 23, 42, 0.08);
  padding: 24px;
}

/* --- 1. Operations Shell, Sidebar & Topbar --- */
.ops-shell {
  --ops-brand: #0038a8;
  --ops-brand-hover: #002d87;
  --ops-brand-soft: rgba(0, 56, 168, 0.07);
  --ops-navy: #0f172a;
  --ops-slate: #475569;
  --ops-muted: #64748b;
  --ops-bg: #f8fafc;
  --ops-surface: #ffffff;
  --ops-border: rgba(15, 23, 42, 0.08);
  --ops-border-strong: rgba(15, 23, 42, 0.14);
  --ops-shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.03), 0 4px 12px -2px rgba(15, 23, 42, 0.04);
  --ops-shadow-md: 0 10px 28px -6px rgba(15, 23, 42, 0.07), 0 2px 6px rgba(15, 23, 42, 0.03);
  background: var(--ops-bg);
  color: var(--ops-navy);
  min-height: calc(100vh - 64px);
  display: grid;
  grid-template-columns: 248px minmax(0, 1fr);
}

.ops-side {
  background: #ffffff;
  border-right: 1px solid var(--ops-border);
  padding: 18px 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: sticky;
  top: 64px;
  height: calc(100vh - 64px);
  overflow-y: auto;
}

.ops-side-head {
  padding: 6px 10px 14px;
  border-bottom: 1px solid var(--ops-border);
}
.ops-side-brand-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.ops-side-logo-mark {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: linear-gradient(135deg, #0038a8 0%, #1d4ed8 100%);
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 10px rgba(0, 56, 168, 0.22);
  flex-shrink: 0;
}
.ops-side-brand-txt {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}
.ops-side-brand-txt strong {
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #0f172a;
}
.ops-side-tag {
  font-size: 0.625rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: #0038a8;
  margin-top: 2px;
}

.ops-nav {
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex: 1;
}
.ops-nav-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ops-nav-label {
  font-size: 0.65rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: #64748b;
  padding: 0 10px 4px;
}
.ops-nav-link {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 10px;
  border-radius: 9px;
  font-size: 0.84rem;
  font-weight: 600;
  color: #334155;
  text-decoration: none;
  transition: background 0.14s ease, color 0.14s ease;
}
.ops-nav-link:hover {
  background: #f1f5f9;
  color: #0f172a;
}
.ops-nav-link.on {
  background: rgba(0, 56, 168, 0.08);
  color: #0038a8;
  font-weight: 700;
  box-shadow: inset 3px 0 0 #0038a8;
}
.ops-nav-link.on svg {
  color: #0038a8;
}
.ops-nav-text {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ops-nav-n {
  font-variant-numeric: tabular-nums;
  font-size: 0.7rem;
  font-weight: 800;
  padding: 1px 7px;
  border-radius: 999px;
  background: #fef3c7;
  color: #b45309;
}
.ops-nav-link.on .ops-nav-n {
  background: #0038a8;
  color: #ffffff;
}
.ops-nav-live {
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  padding: 2px 6px;
  border-radius: 999px;
  background: #dcfce7;
  color: #15803d;
}

.ops-side-foot {
  border-top: 1px solid var(--ops-border);
  padding: 12px 8px 4px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ops-who {
  display: flex;
  align-items: center;
  gap: 9px;
}
.ops-who-av {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: #0f172a;
  color: #ffffff;
  font-size: 0.72rem;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.ops-who-meta {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
  min-width: 0;
}
.ops-who-meta strong {
  font-size: 0.8rem;
  color: #0f172a;
}
.ops-side-foot-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.ops-side-foot-actions .btn {
  justify-content: center;
  font-size: 0.76rem;
  padding: 6px 8px;
}

/* --- Topbar --- */
.ops-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: 0;
}
.ops-topbar {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--ops-border);
  padding: 10px 24px;
  margin-bottom: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  position: sticky;
  top: 64px;
  z-index: 15;
}
.ops-topbar-left {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.ops-crumbs {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 0.8125rem;
  color: #64748b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ops-crumb-root {
  font-weight: 600;
  color: #475569;
}
.ops-crumbs strong {
  color: #0f172a;
  font-weight: 700;
}
.ops-topbar-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.ops-topbar-alert {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  text-decoration: none;
  font-variant-numeric: tabular-nums;
}
.ops-topbar-alert.warn {
  background: #fffbeb;
  color: #b45309;
  border: 1px solid rgba(245, 158, 11, 0.3);
}
.ops-topbar-alert.ok {
  background: #f0fdf4;
  color: #15803d;
  border: 1px solid rgba(22, 163, 74, 0.22);
}
.ops-topbar-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.ops-topbar-quick {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.76rem;
  font-weight: 600;
  color: #334155;
  background: #f8fafc;
  border: 1px solid var(--ops-border);
  padding: 4px 10px;
  border-radius: 8px;
  text-decoration: none;
  transition: all 0.14s ease;
}
.ops-topbar-quick:hover {
  background: #ffffff;
  border-color: rgba(0, 56, 168, 0.3);
  color: #0038a8;
}

.ops-shell .admin-panel-body {
  padding: 20px 22px 48px;
  max-width: 1440px;
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* --- Shared Module Headers, KPIs, Cards & Tables --- */
.ops-shell .oc-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--ops-border);
  margin-bottom: 2px;
}
.ops-shell .oc-head-text h2 {
  font-size: 1.45rem;
  font-weight: 800;
  letter-spacing: -0.025em;
  color: #0f172a;
  margin: 0 0 3px;
}
.ops-shell .oc-head-text p {
  margin: 0;
  font-size: 0.85rem;
  color: #64748b;
}
.ops-shell .oc-head-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.ops-shell .oc-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
}
.ops-shell .oc-kpi {
  background: #ffffff;
  border: 1px solid var(--ops-border);
  border-radius: 14px;
  padding: 14px 16px;
  box-shadow: var(--ops-shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.ops-shell .oc-kpi-lbl {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #64748b;
}
.ops-shell .oc-kpi-val {
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.025em;
  color: #0f172a;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}
.ops-shell .oc-kpi.ok .oc-kpi-val { color: #0f766e; }
.ops-shell .oc-kpi.warn .oc-kpi-val { color: #b45309; }
.ops-shell .oc-kpi.bad .oc-kpi-val { color: #b91c1c; }
.ops-shell .oc-kpi-sub {
  font-size: 0.76rem;
  color: #64748b;
}

.ops-shell .oc-card,
.ops-shell .ops-card {
  background: #ffffff;
  border: 1px solid var(--ops-border);
  border-radius: 14px;
  padding: 18px 20px;
  box-shadow: var(--ops-shadow-sm);
}
.ops-shell .ops-card-head > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ops-shell .oc-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  background: #f1f5f9;
  color: #334155;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.ops-shell .oc-pill.ok {
  background: #dcfce7;
  color: #15803d;
}
.ops-shell .oc-pill.warn {
  background: #fef3c7;
  color: #b45309;
}
.ops-shell .oc-pill.bad {
  background: #fee2e2;
  color: #b91c1c;
}

/* --- 2. Dashboard Tier A: Actionable Triage Banner --- */
.oc-triage-banner {
  background: #ffffff;
  border: 1px solid var(--ops-border);
  border-radius: 14px;
  padding: 14px 18px;
  box-shadow: var(--ops-shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.oc-triage-banner.has-urgent {
  border-color: rgba(217, 119, 6, 0.28);
  background: linear-gradient(180deg, rgba(255, 251, 235, 0.55) 0%, #ffffff 100%);
}
.oc-triage-banner.all-clear {
  border-color: rgba(22, 163, 74, 0.22);
  background: linear-gradient(90deg, rgba(240, 253, 244, 0.65) 0%, #ffffff 100%);
}
.oc-triage-banner-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.oc-triage-status {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.oc-triage-pulse {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
}
.oc-triage-pulse.warn {
  background: #d97706;
  box-shadow: 0 0 0 4px rgba(217, 119, 6, 0.16);
}
.oc-triage-pulse.ok {
  background: #16a34a;
  box-shadow: 0 0 0 4px rgba(22, 163, 74, 0.14);
}
.oc-triage-clear-pills {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.oc-triage-clear-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 999px;
  background: #f8fafc;
  border: 1px solid var(--ops-border);
  font-size: 0.72rem;
  color: #475569;
  text-decoration: none;
  font-variant-numeric: tabular-nums;
  transition: all 0.14s ease;
}
.oc-triage-clear-chip svg {
  color: #16a34a;
}
.oc-triage-clear-chip:hover {
  border-color: rgba(0, 56, 168, 0.25);
  color: #0038a8;
  background: #ffffff;
}
.oc-triage-active-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 10px;
}
.oc-triage-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  border-radius: 12px;
  background: #ffffff;
  border: 1px solid var(--ops-border-strong);
  text-decoration: none;
  color: #0f172a;
  transition: transform 0.14s ease, box-shadow 0.14s ease, border-color 0.14s ease;
}
.oc-triage-card:hover {
  transform: translateY(-1px);
  box-shadow: var(--ops-shadow-md);
  border-color: #0038a8;
}
.oc-triage-card.warn {
  border-left: 3px solid #d97706;
}
.oc-triage-card.bad {
  border-left: 3px solid #dc2626;
}
.oc-triage-card-ic {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: #fffbeb;
  color: #b45309;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.oc-triage-card.bad .oc-triage-card-ic {
  background: #fef2f2;
  color: #b91c1c;
}
.oc-triage-card-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.oc-triage-card-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.oc-triage-card-lbl {
  font-size: 0.8rem;
  font-weight: 700;
  color: #0f172a;
}
.oc-triage-card-val {
  font-size: 1.15rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: #b45309;
}
.oc-triage-card.bad .oc-triage-card-val {
  color: #b91c1c;
}
.oc-triage-card-hint {
  font-size: 0.72rem;
  color: #64748b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.oc-triage-card-go {
  font-size: 0.74rem;
  font-weight: 700;
  color: #0038a8;
  flex-shrink: 0;
}

/* --- 3. Dashboard Tier B: 4 Executive KPI Cards --- */
.oc-exec-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
.oc-exec-kpi-card {
  background: #ffffff;
  border: 1px solid var(--ops-border);
  border-radius: 14px;
  padding: 16px 18px;
  text-decoration: none;
  color: #0f172a;
  box-shadow: var(--ops-shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.oc-exec-kpi-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--ops-shadow-md);
  border-color: rgba(0, 56, 168, 0.28);
}
.oc-exec-kpi-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.oc-exec-kpi-lbl {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #64748b;
}
.oc-exec-kpi-ic {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.oc-exec-kpi-ic.blue { background: rgba(0, 56, 168, 0.09); color: #0038a8; }
.oc-exec-kpi-ic.teal { background: rgba(13, 148, 136, 0.1); color: #0d9488; }
.oc-exec-kpi-ic.amber { background: rgba(217, 119, 6, 0.12); color: #d97706; }
.oc-exec-kpi-ic.indigo { background: rgba(99, 102, 241, 0.1); color: #4f46e5; }
.oc-exec-kpi-main {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.oc-exec-kpi-val {
  font-size: 1.85rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: #0f172a;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.oc-exec-kpi-foot {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  color: #64748b;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.oc-exec-kpi-dot {
  color: #cbd5e1;
}

/* --- 4. Dashboard Tier C: Interactive 14-Day Native SVG Analytics --- */
.oc-analytics-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.oc-analytics-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}
.oc-analytics-head > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.oc-chart-tabs {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #f1f5f9;
  padding: 4px;
  border-radius: 10px;
  flex-wrap: wrap;
}
.oc-chart-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 0;
  background: transparent;
  padding: 5px 10px;
  border-radius: 7px;
  font-size: 0.76rem;
  font-weight: 600;
  color: #475569;
  cursor: pointer;
  transition: all 0.14s ease;
}
.oc-chart-tab:hover {
  color: #0f172a;
}
.oc-chart-tab.on {
  background: #ffffff;
  color: #0f172a;
  font-weight: 700;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
}
.oc-chart-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.oc-chart-tab-val {
  font-variant-numeric: tabular-nums;
  font-size: 0.72rem;
  padding: 1px 6px;
  border-radius: 999px;
  background: #f1f5f9;
  color: #0f172a;
}
.oc-chart-stage {
  position: relative;
  width: 100%;
  background: linear-gradient(180deg, #fafcff 0%, #ffffff 100%);
  border: 1px solid rgba(15, 23, 42, 0.06);
  border-radius: 12px;
  padding: 10px 12px 6px;
}
.oc-chart-svg {
  width: 100%;
  height: 210px;
  display: block;
  overflow: visible;
}
.oc-chart-grid {
  stroke: rgba(15, 23, 42, 0.06);
  stroke-dasharray: 3 3;
}
.oc-chart-axis-txt {
  fill: #64748b;
  font-size: 10.5px;
  font-family: inherit;
  font-variant-numeric: tabular-nums;
}
.oc-chart-guide {
  stroke: #0038a8;
  stroke-width: 1;
  stroke-dasharray: 3 3;
  pointer-events: none;
}
.oc-chart-tooltip {
  position: absolute;
  top: 12px;
  right: 14px;
  background: rgba(15, 23, 42, 0.94);
  color: #ffffff;
  padding: 8px 12px;
  border-radius: 10px;
  font-size: 0.75rem;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.22);
  pointer-events: none;
  min-width: 165px;
  z-index: 5;
}
.oc-chart-tip-head {
  font-weight: 700;
  color: #e2e8f0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  padding-bottom: 4px;
  margin-bottom: 5px;
}
.oc-chart-tip-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 2px 0;
  font-variant-numeric: tabular-nums;
}
.oc-chart-tip-lbl {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #cbd5e1;
}
.oc-chart-tip-lbl i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  display: inline-block;
}
.oc-chart-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.oc-chart-stat {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 10px 12px;
  border-radius: 10px;
  background: #f8fafc;
  border: 1px solid var(--ops-border);
  text-decoration: none;
  color: #0f172a;
  transition: all 0.14s ease;
}
.oc-chart-stat:hover,
.oc-chart-stat.is-active {
  background: #ffffff;
  border-color: rgba(0, 56, 168, 0.28);
  box-shadow: var(--ops-shadow-sm);
}
.oc-chart-stat-top {
  display: flex;
  align-items: center;
  gap: 6px;
}
.oc-chart-stat-lbl {
  font-size: 0.74rem;
  font-weight: 600;
  color: #475569;
}
.oc-chart-stat-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px;
}
.oc-chart-stat-val {
  font-size: 1.15rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.oc-chart-stat-sub {
  font-size: 0.7rem;
  color: #64748b;
  font-variant-numeric: tabular-nums;
}

/* --- 5. Dashboard Tier D: Feed & Pre-Flight System Strip --- */
.oc-feed-card .ops-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(15, 23, 42, 0.05);
}
.oc-feed-card .ops-list li:last-child {
  border-bottom: 0;
}
.oc-feed-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.oc-inline-user-btn {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-weight: 700;
  color: #0038a8;
  text-align: left;
  cursor: pointer;
}
.oc-inline-user-btn:hover {
  text-decoration: underline;
}
.ops-shell .oc-sys {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  background: #ffffff;
  border: 1px solid var(--ops-border);
  border-radius: 12px;
  padding: 10px 16px;
}
.ops-shell .oc-sys-item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  text-decoration: none;
}
.ops-shell .oc-sys-item.is-link:hover .oc-pill {
  box-shadow: 0 0 0 2px rgba(0, 56, 168, 0.2);
}

/* --- 6. Users Enterprise Data Table & Contextual Menu --- */
.ops-users-toolbar {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  background: #ffffff;
  border: 1px solid var(--ops-border);
  border-radius: 14px;
  padding: 14px 16px;
  box-shadow: var(--ops-shadow-sm);
}
.ops-users-toolbar .browse-search-wrap {
  width: 100%;
}
.ops-users-toolbar .admin-search {
  width: 100%;
  border-radius: 10px;
  border: 1px solid var(--ops-border-strong);
  padding: 9px 14px;
  font-size: 0.875rem;
}
.ops-users-toolbar .admin-search:focus {
  outline: none;
  border-color: #0038a8;
  box-shadow: 0 0 0 3px rgba(0, 56, 168, 0.12);
}
.ops-filter-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.ops-shell .chip-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  border: 1px solid var(--ops-border);
  background: #f8fafc;
  color: #475569;
  cursor: pointer;
  transition: all 0.14s ease;
}
.ops-shell .chip-btn:hover {
  background: #f1f5f9;
  color: #0f172a;
}
.ops-shell .chip-btn.on {
  background: #0038a8;
  border-color: #0038a8;
  color: #ffffff;
}
.ops-chip-count {
  font-size: 0.68rem;
  font-weight: 800;
  padding: 0 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.22);
  color: #ffffff;
  font-variant-numeric: tabular-nums;
}

.ops-batch-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 10px 16px;
  border-radius: 12px;
  background: rgba(0, 56, 168, 0.06);
  border: 1px solid rgba(0, 56, 168, 0.2);
}
.ops-batch-bar[hidden] {
  display: none !important;
}
.ops-batch-info {
  display: flex;
  align-items: baseline;
  gap: 8px;
  color: #0038a8;
}
.ops-batch-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.ops-users-card,
.ops-browse-card {
  padding: 0;
  overflow: hidden;
}
.ops-users-table-wrap {
  overflow-x: auto;
}
.ops-shell .oc-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8125rem;
}
.ops-shell .oc-table thead th {
  background: #f8fafc;
  color: #475569;
  font-size: 0.65rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.055em;
  padding: 9px 8px;
  border-bottom: 1px solid var(--ops-border);
  text-align: left;
  white-space: nowrap;
}
.ops-shell .oc-table thead th.num,
.ops-shell .oc-table tbody td.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.ops-shell .oc-table tbody td {
  padding: 9px 8px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.05);
  vertical-align: middle;
}
.ops-shell .oc-table tbody tr:last-child td {
  border-bottom: 0;
}
.ops-shell .oc-table tbody tr:hover {
  background: #f8fafc;
}
.ops-user-tr.is-selected {
  background: rgba(0, 56, 168, 0.04);
}
.ops-user-tr.is-banned {
  background: rgba(254, 242, 242, 0.5);
}
.ops-col-check {
  width: 30px;
  text-align: center;
}
.ops-row-check {
  width: 15px;
  height: 15px;
  accent-color: #0038a8;
  cursor: pointer;
}
.ops-user-cell-identity {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 138px;
}
.ops-user-id-meta {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.ops-user-name-btn {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-weight: 700;
  color: #0f172a;
  text-align: left;
  cursor: pointer;
}
.ops-user-name-btn:hover {
  color: #0038a8;
  text-decoration: underline;
}
.ops-user-contact {
  max-width: 138px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ops-user-badges {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}
.ops-pill-link {
  text-decoration: none;
}
.ops-pill-link:hover {
  text-decoration: underline;
}
.ops-user-metrics {
  display: flex;
  align-items: center;
  gap: 4px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  font-size: 0.78rem;
}
.ops-user-metrics .sep {
  color: #cbd5e1;
}
.ops-user-rating {
  color: #b45309;
  font-weight: 700;
}
.ops-col-actions {
  text-align: right;
  white-space: nowrap;
}
.ops-row-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
}
.ops-btn-360 {
  font-weight: 700;
  font-size: 0.75rem;
  padding: 5px 8px;
  color: #0038a8;
  border-color: rgba(0, 56, 168, 0.22);
  background: rgba(0, 56, 168, 0.04);
}
.ops-btn-360:hover {
  background: #0038a8;
  color: #ffffff;
  border-color: #0038a8;
}
.ops-btn-more {
  padding: 5px 7px;
  color: #475569;
}

/* --- Floating Contextual Menu (.ops-ctx-menu) --- */
.ops-ctx-menu {
  position: fixed;
  z-index: 9999;
  min-width: 220px;
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 12px;
  padding: 6px;
  box-shadow: 0 16px 36px -6px rgba(15, 23, 42, 0.18), 0 4px 10px rgba(15, 23, 42, 0.06);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ops-ctx-item {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  border: 0;
  background: transparent;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #1e293b;
  text-align: left;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}
.ops-ctx-item:hover:not(:disabled) {
  background: #f1f5f9;
  color: #0f172a;
}
.ops-ctx-item.primary {
  color: #0038a8;
  font-weight: 700;
}
.ops-ctx-item.danger {
  color: #b91c1c;
}
.ops-ctx-item.danger:hover:not(:disabled),
.ops-ctx-item.is-armed {
  background: #fef2f2;
  color: #991b1b;
}
.ops-ctx-item:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.ops-ctx-sep {
  height: 1px;
  background: rgba(15, 23, 42, 0.08);
  margin: 4px 6px;
}

/* --- Browse & Empty States --- */
.ops-browse-route-cell {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ops-inline-link {
  text-decoration: none;
  color: #0038a8;
}
.ops-inline-link:hover {
  text-decoration: underline;
}
.ops-empty-state {
  padding: 40px 24px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

/* --- Responsive Adjustments for Operations Center --- */
@media (max-width: 1180px) {
  .oc-exec-kpis,
  .oc-chart-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 960px) {
  .ops-shell {
    grid-template-columns: 1fr;
  }
  .ops-side {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    height: 100vh;
    width: 268px;
    z-index: 60;
    transform: translateX(-100%);
    transition: transform 0.2s ease;
  }
  .ops-side.open {
    transform: translateX(0);
  }
  .ops-topbar {
    padding: 10px 16px;
  }
  .ops-shell .admin-panel-body {
    padding: 18px 16px 36px;
  }
}
@media (max-width: 640px) {
  .oc-exec-kpis,
  .oc-chart-summary {
    grid-template-columns: 1fr;
  }
  .ops-topbar-quick {
    display: none;
  }
}

/* === Selector Share a seat / Whole car: arrastrar y soltar con fisica spring (8834) === */
.ar-form { --p: 0; --sel-ease: cubic-bezier(0.16, 1, 0.3, 1); }
.ar-form .rq-modes { position: relative; isolation: isolate; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.ar-form .rq-modes.is-dragging, .ar-form .rq-modes.is-dragging * { cursor: pointer !important; }
.ar-form .rq-modes .rq-mode-pill { position: absolute; z-index: 0; top: 4px; bottom: 4px; left: 4px; width: calc((100% - 12px) / 2); border-radius: 999px; background: #fff; box-shadow: 0 1px 2px rgba(10, 25, 47, 0.08), 0 4px 12px -2px rgba(10, 25, 47, 0.1); transform: translate3d(calc(var(--p) * (100% + 4px)), 0, 0); scale: 1; transition: scale 240ms var(--sel-ease), box-shadow 240ms var(--sel-ease); will-change: transform; pointer-events: none; }
.ar-form .rq-modes.is-pressed .rq-mode-pill { scale: 0.97; box-shadow: 0 1px 2px rgba(10, 25, 47, 0.1), 0 8px 18px -4px rgba(10, 25, 47, 0.18), 0 0 0 3px color-mix(in srgb, color-mix(in srgb, var(--role-grp) calc(var(--p) * 100%), var(--brand)) 13%, transparent); }
.ar-form.of-form .rq-modes .rq-mode-btn { position: relative; z-index: 1; background: transparent; box-shadow: none; transition: none; -webkit-tap-highlight-color: transparent; }
.ar-form.of-form .rq-modes .rq-mode-btn[data-whole="false"] { color: color-mix(in srgb, var(--brand) calc((1 - var(--p)) * 100%), var(--muted)); }
.ar-form.of-form .rq-modes .rq-mode-btn[data-whole="true"] { color: color-mix(in srgb, var(--role-grp) calc(var(--p) * 100%), var(--muted)); }
.ar-form .of-seatprice { position: relative; }
.ar-form.of-form .of-sec-h b { transition: none; box-shadow: 0 6px 14px -4px color-mix(in srgb, rgb(31 107 52 / 0.5) calc(var(--p) * 100%), rgb(0 56 168 / 0.5)); }
.ar-form.of-form .of-sec-h b::after { opacity: var(--p); transition: none; }
.ar-form.of-form .of-seatbox .rq-step { transition: transform 0.12s, border-color var(--t); background: color-mix(in srgb, var(--role-grp-bg) calc(var(--p) * 100%), var(--brand-50)); color: color-mix(in srgb, var(--role-grp) calc(var(--p) * 100%), var(--brand)); }
.ar-form.of-form .of-submit { position: relative; isolation: isolate; overflow: hidden; background: linear-gradient(135deg, #1a56d6 0%, var(--brand) 55%, var(--brand-600) 100%); box-shadow: 0 14px 30px -10px color-mix(in srgb, rgb(31 107 52 / 0.55) calc(var(--p) * 100%), rgb(0 56 168 / 0.55)), inset 0 1px 0 rgba(255, 255, 255, 0.18); transition: transform var(--t) var(--ease), filter var(--t); }
.ar-form.of-form .of-submit::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(135deg, #2f8a4a 0%, var(--role-grp) 100%); opacity: var(--p); z-index: -1; pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
  .ar-form .rq-modes .rq-mode-pill { transition: none; }
}

/* ---- reviews & ratings (v143) ---- */
.rate-page{padding-block:28px 64px}
.rate-head h1{margin:4px 0 6px;font-size:clamp(26px,5vw,36px);letter-spacing:-.02em}
.rate-left{display:inline-block;margin-top:8px;padding:4px 12px;border-radius:999px;background:rgba(245,158,11,.14);color:#92580a;font-weight:700;font-size:13px}
.rate-left.done{background:rgba(22,163,74,.14);color:#15803d}
.rate-list{display:grid;gap:16px;margin-top:20px}
.rate-card{padding:22px;display:grid;gap:14px;transition:transform .25s,box-shadow .25s,opacity .25s}
.rate-card.is-done{opacity:.92}
.rate-who{display:flex;align-items:center;gap:12px}
.rate-who>div{display:grid}
.rate-stars{display:flex;gap:6px}
.rate-stars .rs{border:0;background:none;padding:4px;font-size:clamp(34px,9vw,44px);line-height:1;color:#d4d4d8;cursor:pointer;transition:transform .18s cubic-bezier(.34,1.56,.64,1),color .15s}
.rate-stars .rs.on{color:#f59e0b}
.rate-stars .rs:hover{transform:scale(1.15)}
.rate-stars .rs:active{transform:scale(.92)}
.rate-stars .rs:focus-visible{outline:3px solid rgba(245,158,11,.5);outline-offset:2px;border-radius:10px}
.rate-stars.ro .rs{cursor:default;font-size:28px;padding:2px}
.rate-stars.ro .rs:hover{transform:none}
.rate-word{font-weight:700;min-height:1.4em;color:#92580a}
.rate-foot{display:flex;align-items:center;justify-content:space-between;gap:12px}
.rate-sent{display:flex;align-items:center;gap:6px;color:#15803d;font-weight:700;margin:0}
.rate-empty{padding:32px;text-align:center;display:grid;gap:10px;justify-items:center}
.rate-note{margin-top:18px}
.rate-banner{display:flex;align-items:center;gap:14px;margin:0 0 18px;padding:14px 18px;border-radius:18px;background:linear-gradient(135deg,rgba(245,158,11,.16),rgba(245,158,11,.06));border:1px solid rgba(245,158,11,.35)}
.rate-banner>div{display:grid;min-width:0}
.rate-banner .small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pp-rolesplit{display:flex;gap:12px;margin:0 0 14px;flex-wrap:wrap}
.pp-rs{display:grid;gap:2px;padding:12px 18px;border-radius:16px;background:rgba(0,0,0,.04);min-width:140px}
.pp-rs strong{font-size:22px}
.pp-rv-role{display:inline-block;margin-left:8px;font-size:12px;font-weight:600;color:#52525b}
.rv-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px;margin:0 0 14px}
.rv-kpi{display:grid;gap:2px;padding:12px 14px;border-radius:14px;background:rgba(0,0,0,.04)}
.rv-kpi strong{font-size:20px}.rv-kpi span{font-size:12px;opacity:.7}
.rv-kpi.warn{background:rgba(245,158,11,.14)}.rv-kpi.bad{background:rgba(220,38,38,.1)}
.rv-views{margin-bottom:10px}
.rv-badge{display:inline-block;padding:2px 10px;border-radius:999px;font-size:12px;font-weight:700;background:rgba(22,163,74,.14);color:#15803d}
.rv-badge.hidden{background:rgba(113,113,122,.18);color:#52525b}.rv-badge.flagged{background:rgba(220,38,38,.12);color:#b91c1c}.rv-badge.pending{background:rgba(245,158,11,.16);color:#92580a}
.ops-review-card.is-hidden{opacity:.65}
.rv-flag{color:#b91c1c;margin:4px 0}
.rv-mod{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}.rv-mod input{flex:1;min-width:200px}
@media (prefers-reduced-motion:reduce){.rate-stars .rs,.rate-card{transition:none}}

/* ---- reviews & reputation v2 (account, rating page, admin) ---- */
.rv-st{display:inline-flex;gap:1px;line-height:1}
.rv-st i{font-style:normal;color:#d7deea;font-size:18px}
.rv-st i.on{color:#f5a300}
.rv-st.sm i{font-size:13px}.rv-st.md i{font-size:22px}
.rv-ring{position:relative;width:132px;height:132px;flex:none}
.rv-ring.lg{width:168px;height:168px}
.rv-ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.rv-ring circle{fill:none;stroke-width:9}
.rv-ring-bg{stroke:var(--soft-2)}
.rv-ring-fg{stroke:var(--brand);stroke-linecap:round;transition:stroke-dashoffset 1.3s cubic-bezier(.34,1.15,.5,1)}
.rv-ring-num{position:absolute;inset:0;display:grid;place-content:center;text-align:center;gap:2px}
.rv-ring-num strong{font-size:38px;line-height:1;letter-spacing:-.03em;color:var(--ink)}
.rv-ring.lg .rv-ring-num strong{font-size:46px}
.rv-ring-num span{font-size:12px;color:var(--muted)}
.rv-acct{display:grid;gap:18px;margin-top:6px}
.rv-hero{display:grid;grid-template-columns:auto minmax(0,1.5fr) minmax(0,1fr);gap:28px;align-items:center;padding:28px;border-radius:var(--radius-lg);background:linear-gradient(135deg,#fff 0%,var(--brand-50) 100%);border:1px solid var(--line);box-shadow:var(--shadow)}
.rv-dist{display:grid;gap:6px;min-width:0}
.rv-dist h3{margin:0 0 2px;font-size:var(--fs-lg)}
.rv-dist-row{display:grid;grid-template-columns:34px 1fr 28px;align-items:center;gap:10px;border:0;background:none;padding:3px 6px;border-radius:10px;font:inherit;font-size:13px;color:var(--ink-2);cursor:pointer;text-align:left;transition:background .18s,transform .18s}
.rv-dist-row:hover:not(:disabled){background:rgba(0,56,168,.06);transform:translateX(2px)}
.rv-dist-row:disabled{cursor:default;opacity:.55}
.rv-dist-row.on{background:var(--brand-100);color:var(--brand-700)}
.rv-dist-row b{text-align:right;font-weight:700}
.rv-track{height:8px;border-radius:99px;background:var(--soft-2);overflow:hidden}
.rv-track i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#f5a300,#fcd116);animation:rv-grow .9s cubic-bezier(.22,1,.36,1) both;transform-origin:left}
@keyframes rv-grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.rv-roles{display:grid;gap:12px}
.rv-role{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto auto;column-gap:12px;padding:14px 16px;border-radius:var(--radius);background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-sm)}
.rv-role svg{grid-row:1/4;align-self:center;color:var(--brand)}
.rv-role strong{font-size:22px;letter-spacing:-.02em;line-height:1.1}
.rv-role span{font-size:13px;font-weight:600}.rv-role small{color:var(--muted)}
.rv-seg,.rva-tabs{display:inline-flex;gap:4px;padding:4px;border-radius:999px;background:var(--soft);border:1px solid var(--line);align-self:start;justify-self:start;max-width:100%;overflow-x:auto}
.rv-seg button,.rva-tabs button{border:0;background:none;font:inherit;font-weight:700;font-size:14px;color:var(--muted);padding:9px 16px;border-radius:999px;cursor:pointer;display:inline-flex;align-items:center;gap:8px;white-space:nowrap;transition:background .25s var(--ease),color .2s,box-shadow .25s}
.rv-seg button.on,.rva-tabs button.on{background:#fff;color:var(--brand-700);box-shadow:var(--shadow-sm)}
.rv-seg-n{min-width:22px;padding:1px 7px;border-radius:99px;background:var(--soft-2);font-size:12px;text-align:center}
.rv-seg-n.hot{background:var(--red);color:#fff}
.rv-body{display:grid;gap:14px;animation:rv-rise .45s var(--ease) both}
@keyframes rv-rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.rv-trip{border-radius:var(--radius-lg);background:#fff;border:1px solid var(--line);box-shadow:var(--shadow);overflow:hidden}
.rv-trip-h{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px 20px;background:var(--soft);border-bottom:1px solid var(--line)}
.rv-trip-h>div{display:grid;gap:2px}
.rv-due{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:700;padding:4px 10px;border-radius:99px;background:var(--ok-50);color:var(--ok);white-space:nowrap}
.rv-due.soon{background:var(--warn-50);color:var(--sun-ink)}
.rv-person{display:grid;grid-template-columns:auto minmax(120px,200px) 1fr;gap:6px 16px;align-items:start;padding:18px 20px;border-top:1px solid var(--line);transition:opacity .3s,transform .3s}
.rv-person:first-of-type{border-top:0}
.rv-person.leaving{opacity:0;transform:translateX(24px)}
.rv-pn{display:grid;gap:2px;padding-top:4px}
.rv-rate{display:grid;gap:4px}
.rv-pick{display:flex;align-items:center;gap:2px;flex-wrap:wrap}
.rv-star{border:0;background:none;padding:2px 3px;font-size:34px;line-height:1;color:#d7deea;cursor:pointer;transition:transform .25s cubic-bezier(.34,1.56,.64,1),color .15s}
.rv-star.on{color:#f5a300;filter:drop-shadow(0 2px 6px rgba(245,163,0,.35))}
.rv-star:hover{transform:scale(1.18)}
.rv-star.pop{animation:rv-pop .5s cubic-bezier(.34,1.56,.64,1)}
@keyframes rv-pop{0%{transform:scale(.6)}55%{transform:scale(1.35)}100%{transform:scale(1)}}
.rv-star:focus-visible{outline:3px solid rgba(0,56,168,.35);outline-offset:2px;border-radius:10px}
.rv-word{margin-left:10px;font-size:13px;font-weight:700;color:var(--muted);transition:color .2s}
.rv-word.set{color:#a56a00}
.rv-extra{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s cubic-bezier(.34,1.25,.64,1)}
.rv-rate.open .rv-extra{grid-template-rows:1fr}
.rv-extra-in{overflow:hidden;display:grid;gap:10px;min-height:0}
.rv-rate.open .rv-extra-in{padding-top:10px}
.rv-extra textarea{width:100%;resize:vertical;border:1.5px solid var(--line-2);border-radius:var(--radius-s);padding:12px 14px;font:inherit;background:#fff}
.rv-extra textarea:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 4px rgba(0,56,168,.12)}
.rv-foot{display:flex;justify-content:space-between;align-items:center;gap:12px}
.rv-sent{grid-column:2/-1;display:flex;align-items:center;gap:12px;animation:rv-rise .4s var(--ease) both}
.rv-sent>div{display:grid;gap:3px}
.rv-sent-ic{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:var(--ok-50);color:var(--ok);animation:rv-pop .6s cubic-bezier(.34,1.56,.64,1)}
.rv-chips{display:flex;gap:8px;flex-wrap:wrap}
.rv-list{display:grid;gap:12px}
.rv-card{display:grid;gap:10px;padding:18px 20px;border-radius:var(--radius);background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-sm);transition:transform .25s var(--ease),box-shadow .25s;animation:rv-rise .45s var(--ease) both}
.rv-card:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.rv-list .rv-card:nth-child(2){animation-delay:.04s}.rv-list .rv-card:nth-child(3){animation-delay:.08s}.rv-list .rv-card:nth-child(4){animation-delay:.12s}.rv-list .rv-card:nth-child(n+5){animation-delay:.16s}
.rv-card-h{display:flex;align-items:center;gap:12px}
.rv-card-who{display:grid;gap:1px;flex:1;min-width:0}
.rv-quote{margin:0;font-size:15px;line-height:1.55;color:var(--ink);padding-left:12px;border-left:3px solid var(--sun)}
.rv-card-f{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.rv-trip-chip{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;color:var(--brand);background:var(--brand-50);padding:5px 11px;border-radius:99px;text-decoration:none}
.rv-link{border:0;background:none;font:inherit;font-size:13px;color:var(--muted);cursor:pointer;display:inline-flex;gap:4px;align-items:center}
.rv-link:hover{color:var(--red)}
.rv-reported{display:inline-flex;align-items:center;gap:4px;font-size:12.5px;font-weight:600;color:var(--red)}
.rv-report{display:flex;gap:8px;flex-wrap:wrap}.rv-report input{flex:1;min-width:200px;border:1.5px solid var(--line-2);border-radius:var(--radius-s);padding:9px 12px;font:inherit}
.rv-empty{display:grid;justify-items:center;gap:8px;text-align:center;padding:44px 20px;border:1.5px dashed var(--line-2);border-radius:var(--radius-lg);background:#fff}
.rv-empty p{margin:0;max-width:380px}
.rv-empty-ic{width:60px;height:60px;border-radius:50%;display:grid;place-items:center;background:var(--brand-50);color:var(--brand)}
.rv-empty-ic.ok{background:var(--ok-50);color:var(--ok)}
.ma-tab-n.hot{background:var(--red);color:#fff}
/* rating page */
.rate-hero{display:grid;gap:8px;margin-bottom:6px}
.rate-hero h1{margin:0;font-size:clamp(28px,5vw,40px);letter-spacing:-.03em}
.rate-trip{display:inline-flex;align-items:center;gap:6px;color:var(--ink-2);font-size:14px}
.rate-progress{display:flex;align-items:center;gap:12px;margin-top:6px}
.rate-dots{display:flex;gap:6px}
.rate-dots i{width:26px;height:6px;border-radius:99px;background:var(--soft-2);transition:background .4s,transform .4s cubic-bezier(.34,1.56,.64,1)}
.rate-dots i.on{background:var(--ok);transform:scaleY(1.4)}
.rate-card.just-done{animation:rv-pop .5s cubic-bezier(.34,1.56,.64,1)}
.rate-card .rv-rate{margin-top:6px}
.rate-card .rv-star{font-size:clamp(38px,11vw,50px)}
/* admin */
.rva-dash{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:16px;margin-bottom:20px}
.rva-card{padding:22px}
.rva-card h3{margin:0 0 4px;font-size:var(--fs-lg)}
.rva-rep{grid-column:span 5;display:flex;gap:22px;align-items:center}
.rva-stats{grid-column:span 7;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.rva-stat{display:grid;gap:2px;align-content:start;text-align:left;padding:16px;border-radius:var(--radius);background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-sm);font:inherit;color:inherit;transition:transform .22s var(--ease),box-shadow .22s}
button.rva-stat{cursor:pointer}button.rva-stat:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.rva-stat-ic{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;background:var(--brand-50);color:var(--brand);margin-bottom:6px}
.rva-stat strong{font-size:26px;letter-spacing:-.02em;line-height:1.1}
.rva-stat-l{font-size:13px;font-weight:600}.rva-stat small{color:var(--muted);font-size:12px}
.rva-stat.warn .rva-stat-ic{background:var(--warn-50);color:var(--sun-ink)}
.rva-stat.bad .rva-stat-ic{background:var(--red-50);color:var(--red)}
.rva-trend{grid-column:span 6}
.rva-lead{grid-column:span 6;display:grid;grid-template-columns:1fr 1fr;gap:20px}
.rva-bars{display:grid;grid-template-columns:repeat(8,1fr);gap:8px;height:150px;align-items:end;margin-top:12px}
.rva-bar{display:grid;grid-template-rows:16px 1fr 16px;justify-items:center;height:100%;gap:4px}
.rva-bar b{font-size:11px;color:var(--muted)}
.rva-bar i{align-self:end;width:100%;max-width:34px;border-radius:8px 8px 3px 3px;background:linear-gradient(180deg,var(--brand),#2f6bd6);animation:rv-up .8s cubic-bezier(.22,1,.36,1) both;transform-origin:bottom}
@keyframes rv-up{from{transform:scaleY(0)}to{transform:scaleY(1)}}
.rva-bar span{font-size:10.5px;color:var(--muted);white-space:nowrap}
.rva-lead-row{display:grid;grid-template-columns:1fr auto;gap:0 10px;width:100%;text-align:left;border:0;background:none;padding:8px 10px;margin:0 -10px;border-radius:10px;font:inherit;cursor:pointer}
.rva-lead-row:hover{background:var(--soft)}
.rva-lead-n{font-weight:600;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rva-lead-s{font-weight:700;color:#a56a00}.rva-lead-row small{grid-column:1/-1;color:var(--muted);font-size:12px}
.rva-low{color:var(--red);font-weight:600;margin:0 0 6px}
.rva-tabs{margin-bottom:12px}
.rva-list{display:grid;gap:10px;margin-top:10px}
.rva-row{border-radius:var(--radius);background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-sm);overflow:hidden;transition:box-shadow .22s,border-color .22s}
.rva-row:hover,.rva-row.open{box-shadow:var(--shadow);border-color:var(--line-2)}
.rva-row.low{border-left:4px solid var(--red)}.rva-row.is-hidden{opacity:.65}
.rva-row-h{display:grid;grid-template-columns:96px minmax(180px,1.1fr) minmax(0,1.4fr) auto 18px;gap:14px;align-items:center;width:100%;padding:14px 18px;border:0;background:none;font:inherit;text-align:left;cursor:pointer;color:inherit}
.rva-row-h.static{cursor:default;grid-template-columns:56px minmax(220px,1.4fr) 1fr auto}
.rva-score{display:grid;justify-items:start;gap:2px}.rva-score b{font-size:24px;line-height:1;letter-spacing:-.02em}
.rva-score.pend{width:44px;height:44px;border-radius:14px;place-items:center;background:var(--warn-50);color:var(--sun-ink)}
.rva-who{display:grid;gap:2px;min-width:0}.rva-who strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rva-who small{color:var(--muted);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rva-snip{color:var(--ink-2);font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rva-chev{color:var(--muted);font-size:22px;transition:transform .3s cubic-bezier(.34,1.56,.64,1)}.rva-row.open .rva-chev{transform:rotate(90deg)}
.rva-detail{display:grid;gap:10px;padding:4px 18px 18px;border-top:1px dashed var(--line);animation:rv-rise .3s var(--ease) both}
.rva-ctx{display:flex;gap:14px;flex-wrap:wrap;font-size:13px;color:var(--muted)}.rva-ctx span{display:inline-flex;gap:4px;align-items:center}
@media (max-width:1000px){
  .rv-hero{grid-template-columns:auto 1fr;}.rv-roles{grid-column:1/-1;grid-template-columns:1fr 1fr}
  .rva-rep,.rva-stats,.rva-trend,.rva-lead{grid-column:1/-1}
}
@media (max-width:640px){
  .rv-hero{grid-template-columns:1fr;justify-items:center;padding:22px 18px}.rv-dist{width:100%}.rv-roles{grid-template-columns:1fr 1fr;width:100%}
  .rv-person{grid-template-columns:auto 1fr}.rv-person .rv-rate{grid-column:1/-1}.rv-sent{grid-column:1/-1}
  .rv-star{font-size:40px}
  .rva-rep{flex-direction:column;align-items:center}.rva-stats{grid-template-columns:1fr 1fr}.rva-lead{grid-template-columns:1fr}
  .rva-row-h{grid-template-columns:56px 1fr 18px}.rva-row-h .rva-snip,.rva-row-h .rv-badge{display:none}.rva-row-h.static{grid-template-columns:44px 1fr}.rva-row-h.static .rva-snip{display:none}
  .rva-pend-actions{grid-column:1/-1}
}
@media (prefers-reduced-motion:reduce){.rv-body,.rv-card,.rv-track i,.rva-bar i,.rv-sent,.rva-detail{animation:none}.rv-ring-fg,.rv-extra,.rv-star{transition:none}.rv-star.pop,.rv-sent-ic,.rate-card.just-done{animation:none}}

/* === Notifications v2 (8837): every row shares one structure, modelled on Messages === */
.hub-item { position: relative; border-bottom: 0; --ring: #fff; }
.hub-item::after { content: ""; position: absolute; left: 82px; right: 0; bottom: 0; height: 1px; background: #e8edf6; }
.hub-item:last-child::after { display: none; }
.hub-item:has(> .hub-row.unread) { background: #f0f5ff; --ring: #f0f5ff; }
.hub-item:has(> a.hub-row:hover) { background: #f6f9ff; --ring: #f6f9ff; }
.hub-item:has(> a.hub-row.unread:hover) { background: #e9f0fd; --ring: #e9f0fd; }
.hub-row, .hub-row.unread, .hub-row:hover, .hub-row.unread:hover, a.hub-row:hover { background: transparent; }
.hub-row { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; align-items: center; column-gap: 14px; min-height: 84px; padding: 14px 20px; }
.hub-lead { position: relative; display: block; width: 48px; height: 48px; flex: none; }
.hub-lead > .avatar, .hub-lead > .ib-av { width: 48px !important; height: 48px !important; display: grid; place-items: center; }
.hub-lead > .hub-ic { width: 48px; height: 48px; border-radius: 15px; }
.hub-lead > .hub-ic .ic { width: 23px; height: 23px; stroke-width: 1.8; }
.hub-lead.has-av > .hub-ic { position: absolute; right: -4px; bottom: -4px; width: 24px; height: 24px; border-radius: 50%; border: 2.5px solid var(--ring); box-sizing: border-box; box-shadow: 0 1px 3px rgba(13, 34, 64, .12); }
.hub-lead.has-av > .hub-ic .ic { width: 12px; height: 12px; stroke-width: 2.2; }
.hub-lead.official > .hub-ic { display: none; }
.hub-txt { gap: 2px; align-self: center; }
.hub-txt strong { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-size: 16px; line-height: 1.28; letter-spacing: -.005em; }
.hub-body { font-size: 14.5px; line-height: 1.38; }
.hub-time { display: block; margin-top: 3px; font-size: 13px; line-height: 1.2; }
.hub-end { display: flex; align-items: center; gap: 10px; align-self: center; }
.hub-dot { flex: none; }
.hub-dot.off { visibility: hidden; }
.hub-actions { padding: 0 20px 16px 82px; }
@media (max-width: 640px) {
  .hub-item::after { left: 70px; }
  .hub-row { grid-template-columns: 44px minmax(0, 1fr) auto; column-gap: 12px; min-height: 78px; padding: 13px 14px; }
  .hub-lead { width: 44px; height: 44px; }
  .hub-lead > .avatar, .hub-lead > .ib-av { width: 44px !important; height: 44px !important; }
  .hub-lead > .hub-ic { width: 44px; height: 44px; border-radius: 14px; }
  .hub-lead.has-av > .hub-ic { width: 22px; height: 22px; border-radius: 50%; }
  .hub-txt strong { font-size: 15px; }
  .hub-body { font-size: 13.5px; }
  .hub-end { gap: 8px; }
  .hub-actions { padding: 0 14px 14px 70px; }
}

/* Notifications v2.1 (8837): slim scrollbar so long lists (All, Trips) keep the dot and arrow exactly where Messages has them */
.hub-scroll { scrollbar-width: thin; scrollbar-color: rgba(15,35,90,.22) transparent; scrollbar-gutter: auto; }
.hub-scroll::-webkit-scrollbar { width: 6px; height: 6px; background: transparent; }
.hub-scroll::-webkit-scrollbar-track { background: transparent; margin: 6px 0; }
.hub-scroll::-webkit-scrollbar-thumb { background: rgba(15,35,90,.22); border-radius: 999px; border: 0; min-height: 36px; }
.hub-scroll::-webkit-scrollbar-thumb:hover, .hub-scroll::-webkit-scrollbar-thumb:active { background: rgba(15,35,90,.4); }

/* Reviews: a submitted review is shown as a calm read-only state with its stars and comment */
.rv-sent { align-items: flex-start; }
.rv-sent .rv-sent-b { display: grid; gap: 6px; min-width: 0; flex: 1; }
.rv-sent .rv-sent-q { margin: 2px 0 0; padding: 10px 12px; border-radius: 12px; background: #f4f7fd; color: #34405c; font-size: 14.5px; line-height: 1.45; overflow-wrap: anywhere; }
.rv-sent.already .rv-sent-ic { background: #eaf1ff; color: #0b3aa8; }

/* ===== My trips v3 (tp-*) · built on the same language as My account (ma-*) ===== */
.tp-page { --ma-navy: #061b52; --ma-blue: #0b3fae; --ma-line: #e6ebf3; --ma-mut: #5f6f8f; --tp-ease: cubic-bezier(.22,.61,.36,1); max-width: 1312px; padding-inline: clamp(16px, 2.8vw, 36px); padding-block: 26px 56px; display: block; }
.tp-export { display: flex; gap: 12px; flex-wrap: wrap; }
.tp-page .ma-btn svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* hero */
.tp-hero { position: relative; display: flex; align-items: center; min-height: 232px; padding: 30px 36px; border-radius: 24px; overflow: hidden; isolation: isolate; color: #fff; text-decoration: none; background: linear-gradient(100deg, #071f63 0%, #0a3a9e 48%, #1c5fd0 100%); box-shadow: 0 18px 44px rgba(8,42,120,.24); transition: transform .35s var(--tp-ease), box-shadow .35s var(--tp-ease); }
a.tp-hero:hover { transform: translateY(-2px); box-shadow: 0 26px 56px rgba(8,42,120,.3); }
a.tp-hero:focus-visible { outline: 3px solid rgba(11,63,174,.4); outline-offset: 3px; }
.tp-hero-art { position: absolute; z-index: -1; right: 0; top: 0; height: 100%; width: 66%; object-fit: cover; object-position: right center; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 40%); mask-image: linear-gradient(90deg, transparent 0, #000 40%); transition: transform 1.4s var(--tp-ease); }
a.tp-hero:hover .tp-hero-art { transform: scale(1.035); }
.tp-hero-in { display: flex; align-items: center; gap: 26px; min-width: 0; max-width: 700px; }
.tp-hero-ic { flex: none; width: 76px; height: 76px; border-radius: 24px; display: grid; place-items: center; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.3); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: inset 0 1px 0 rgba(255,255,255,.25); }
.tp-hero-ic svg { fill: none; stroke: #fff; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.tp-hero-t { display: grid; gap: 11px; min-width: 0; justify-items: start; }
.tp-hero-k { display: inline-flex; align-items: center; gap: 10px; font-size: 13.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #ffd24a; }
.tp-hero-k i { width: 4px; height: 4px; border-radius: 50%; background: currentColor; opacity: .75; }
.tp-hero-h { font-size: clamp(28px, 3.5vw, 44px); line-height: 1.05; letter-spacing: -.03em; font-weight: 800; overflow-wrap: anywhere; }
.tp-arr { margin: 0 .32em; opacity: .75; font-weight: 500; }
.tp-hero-when, .tp-hero-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; }
.tp-hero-when { font-size: 17px; font-weight: 600; }
.tp-hero-meta { font-size: 15.5px; color: rgba(255,255,255,.92); }
.tp-hero-when > span, .tp-hero-meta > span { display: inline-flex; align-items: center; gap: 9px; min-width: 0; }
.tp-hero svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tp-pill { height: 30px; padding: 0 14px; border-radius: 999px; font-size: 14px; font-weight: 700; }
.tp-pill.drv { background: #10b476; color: #fff; box-shadow: 0 4px 12px rgba(16,180,118,.35); }
.tp-pill.pass { background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.3); color: #fff; }
.tp-hero-bubble { right: 3%; top: 14%; }
.tp-hero-cta { position: absolute; right: 32px; bottom: 28px; display: inline-flex; align-items: center; gap: 9px; height: 46px; padding: 0 20px; border-radius: 999px; background: #fff; color: var(--ma-navy); font-size: 15.5px; font-weight: 700; box-shadow: 0 10px 26px rgba(0,20,70,.28); transition: transform .25s var(--tp-ease), box-shadow .25s; }
a.tp-hero:hover .tp-hero-cta { transform: translateX(3px); box-shadow: 0 14px 30px rgba(0,20,70,.34); }
.tp-hero-cta svg { stroke: currentColor; }
.tp-hero-p { margin: 0; font-size: 17px; color: rgba(255,255,255,.9); max-width: 46ch; }
.tp-hero-btns { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
.tp-hero-btn { display: inline-flex; align-items: center; gap: 9px; height: 46px; padding: 0 20px; border-radius: 999px; background: #fff; color: var(--ma-navy); font-weight: 700; font-size: 15.5px; text-decoration: none; box-shadow: 0 10px 26px rgba(0,20,70,.25); transition: transform .2s var(--tp-ease), box-shadow .2s; }
.tp-hero-btn:hover { transform: translateY(-1px); box-shadow: 0 14px 30px rgba(0,20,70,.32); }
.tp-hero-btn.ghost { background: rgba(255,255,255,.14); color: #fff; border: 1px solid rgba(255,255,255,.4); box-shadow: none; }

/* stats: same tiles as My account, one accent per meaning */
.tp-stat { transition: transform .25s var(--tp-ease), box-shadow .25s var(--tp-ease), border-color .25s; }
.tp-stat:hover { transform: translateY(-2px); }
.tp-stat.green .ma-stat-ic { background: #def5ea; color: #12805a; }
.tp-stat.amber .ma-stat-ic { background: #fff0d8; color: #b45f06; }
.tp-stat.violet .ma-stat-ic { background: #ece6ff; color: #6a3fd6; }
.tp-stat.hot { border-color: #f4d6a0; box-shadow: 0 8px 26px rgba(180,95,6,.12); }
.tp-tabs a { transition: color .2s, border-color .2s; }
.ma-tab-n.zero { background: #eef1f6; color: #8392ad; }

/* toolbar */
.tp-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px; border: 1px solid var(--ma-line); border-radius: 22px; background: #fff; box-shadow: 0 6px 20px rgba(13,34,64,.05); }
.tp-seg { display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px; background: #eef2f9; }
.tp-seg-i { display: inline-flex; align-items: center; gap: 9px; height: 40px; padding: 0 16px; border-radius: 999px; font-size: 15px; font-weight: 650; color: #4a5a79; text-decoration: none; transition: background .22s var(--tp-ease), color .22s, box-shadow .22s; }
.tp-seg-i:hover { color: var(--ma-blue); }
.tp-seg-i.on { background: #fff; color: var(--ma-blue); font-weight: 750; box-shadow: 0 2px 8px rgba(13,34,64,.13); }
.tp-seg-n { min-width: 22px; height: 22px; padding: 0 7px; border-radius: 99px; display: inline-grid; place-items: center; font-size: 12px; font-weight: 700; background: rgba(11,63,174,.08); color: #6a7a99; }
.tp-seg-i.on .tp-seg-n { background: var(--ma-blue); color: #fff; }
.tp-search { flex: 1 1 240px; display: flex; align-items: center; gap: 10px; height: 48px; padding: 0 18px; border-radius: 999px; background: #f4f7fc; border: 1px solid transparent; color: #7b8aa6; transition: background .2s, border-color .2s, box-shadow .2s; }
.tp-search:focus-within { background: #fff; border-color: #9db8ea; box-shadow: 0 0 0 4px rgba(11,63,174,.1); }
.tp-search svg { flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; }
.tp-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; font-size: 15.5px; color: var(--ma-navy); padding: 0; box-shadow: none; }
.tp-sort { display: flex; align-items: center; gap: 8px; height: 48px; padding: 0 8px 0 18px; border-radius: 999px; background: #f4f7fc; font-size: 14px; color: #6f7e99; }
.tp-sort select { appearance: none; -webkit-appearance: none; border: 0; outline: 0; background: transparent url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236f7e99' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>") no-repeat right 6px center; font: inherit; font-size: 15px; font-weight: 700; color: var(--ma-navy); height: 100%; padding: 0 28px 0 4px; cursor: pointer; }
.tp-sort:focus-within { box-shadow: 0 0 0 4px rgba(11,63,174,.1); }

/* trip cards */
.tp-list { display: grid; gap: 18px; }
@keyframes tp-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.tp-card { position: relative; display: grid; grid-template-columns: 236px minmax(0, 1fr) 256px; background: #fff; border: 1px solid var(--ma-line); border-radius: 24px; overflow: hidden; box-shadow: 0 8px 26px rgba(13,34,64,.06); transition: transform .3s var(--tp-ease), box-shadow .3s var(--tp-ease), border-color .3s; animation: tp-rise .5s var(--tp-ease) both; }
.tp-card:nth-child(2) { animation-delay: .05s; } .tp-card:nth-child(3) { animation-delay: .1s; } .tp-card:nth-child(4) { animation-delay: .15s; } .tp-card:nth-child(n+5) { animation-delay: .2s; }
.tp-card:hover { transform: translateY(-3px); box-shadow: 0 20px 46px rgba(13,34,64,.12); border-color: #d3def2; }
.tp-ph { position: relative; display: block; margin: 12px; border-radius: 18px; overflow: hidden; min-height: 210px; background: #dfe9fb; }
.tp-ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--tp-ease), filter .3s; }
.tp-card:hover .tp-ph img { transform: scale(1.05); }
.tp-ph::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6,27,82,0) 40%, rgba(6,27,82,.38)); pointer-events: none; }
.tp-card.past .tp-ph img { filter: saturate(.65); }
.tp-card.cancelled .tp-ph img { filter: grayscale(.9) brightness(.95); }
.tp-date { position: absolute; z-index: 1; left: 12px; top: 12px; display: grid; justify-items: center; gap: 3px; line-height: 1; min-width: 56px; padding: 9px 10px 10px; border-radius: 15px; background: rgba(255,255,255,.95); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: var(--ma-navy); box-shadow: 0 8px 18px rgba(0,20,70,.22); }
.tp-date small { font-size: 11px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--ma-blue); }
.tp-date small:last-child { color: #7a89a6; letter-spacing: .05em; }
.tp-date strong { font-size: 26px; font-weight: 800; letter-spacing: -.03em; }
.tp-main { display: grid; gap: 11px; align-content: center; min-width: 0; padding: 22px 22px 22px 10px; }
.tp-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.tp-card .mt-chip { height: 28px; padding: 0 13px; border-radius: 999px; font-size: 13px; }
.tp-title { margin: 0; font-size: clamp(22px, 2.2vw, 28px); line-height: 1.12; letter-spacing: -.028em; font-weight: 800; color: var(--ma-navy); overflow-wrap: anywhere; }
.tp-title a { color: inherit; text-decoration: none; }
.tp-title a:hover { color: var(--ma-blue); }
.tp-title .tp-arr { color: #7d8fb3; opacity: 1; }
.tp-when { display: flex; flex-wrap: wrap; gap: 6px 20px; font-size: 15px; font-weight: 600; color: #3f4f73; }
.tp-when span { display: inline-flex; align-items: center; gap: 8px; }
.tp-when svg, .tp-stats svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tp-when svg { color: #6f86b8; }
.tp-route { position: relative; display: grid; gap: 9px; margin-top: 2px; }
.tp-rl { position: relative; display: flex; align-items: flex-start; gap: 13px; min-width: 0; }
.tp-rl i { flex: none; width: 13px; height: 13px; margin-top: 4px; border-radius: 50%; border: 3px solid var(--ma-blue); background: #fff; position: relative; z-index: 1; }
.tp-rl.to i { border-color: #1fc98a; background: #1fc98a; }
.tp-rl.from::after { content: ""; position: absolute; left: 5.5px; top: 20px; height: calc(100% - 6px); width: 2px; border-radius: 2px; background: repeating-linear-gradient(180deg, #c3d1ec 0 4px, transparent 4px 8px); }
.tp-rl span { display: grid; min-width: 0; }
.tp-rl b { font-size: 15.5px; font-weight: 700; color: var(--ma-navy); }
.tp-rl em { font-style: normal; font-size: 13.5px; color: #7a89a6; }
.tp-stats { list-style: none; margin: 4px 0 0; padding: 13px 0 0; border-top: 1px dashed #dfe6f3; display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 14.5px; color: #4a5a79; }
.tp-stats li { display: inline-flex; align-items: center; gap: 9px; min-width: 0; }
.tp-stats svg { color: #7b8fbd; flex: none; }
.tp-stats span { min-width: 0; overflow-wrap: anywhere; }
.tp-side { display: flex; flex-direction: column; justify-content: space-between; gap: 18px; padding: 22px 22px 22px 22px; border-left: 1px solid #edf1f8; background: linear-gradient(180deg, #fbfcff, #f5f8fe); }
.tp-price { display: grid; gap: 3px; text-align: right; justify-items: end; }
.tp-price.none { min-height: 4px; }
.tp-price small { font-size: 12px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: #7a89a6; }
.tp-price strong { font-size: 32px; line-height: 1.05; font-weight: 800; letter-spacing: -.035em; color: var(--ma-navy); }
.tp-price span { font-size: 13.5px; color: #7a89a6; }
.tp-acts { display: grid; gap: 9px; }
.tp-acts .mt-btn { height: 46px; padding: 0 18px; font-size: 15px; transition: transform .2s var(--tp-ease), filter .2s, background .2s, border-color .2s, box-shadow .2s; }
.tp-acts .mt-btn:active { transform: scale(.98); }
.tp-acts .mt-btn-primary { box-shadow: 0 10px 22px rgba(0,56,168,.26); }
.tp-acts .mt-btn-primary:hover { filter: brightness(1.08); transform: translateY(-1px); }
.tp-acts .mt-btn-ghost { background: #fff; }
.tp-acts .mt-btn-danger { background: transparent; border-color: #f4cfd4; }
.tp-acts .mt-btn-danger:hover { background: #fdeeee; }
.tp-page .mt-empty { margin-top: 0; border-radius: 24px; }
.tp-page .mt-none { border-radius: 24px; background: #fff; }
.tp-page .after > * , .tp-page > div:last-child .mt-empty { margin-top: 0; }

@media (max-width: 1180px) {
  .tp-card { grid-template-columns: 210px minmax(0, 1fr); }
  .tp-side { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: space-between; border-left: 0; border-top: 1px solid #edf1f8; padding: 16px 22px; }
  .tp-price { text-align: left; justify-items: start; }
  .tp-acts { display: flex; flex-wrap: wrap; justify-content: flex-end; }
  .tp-hero-bubble { display: none; }
}
@media (max-width: 760px) {
  .tp-page { padding-block: 16px 40px; }
  .tp-hero { padding: 22px 20px 84px; align-items: flex-start; min-height: 0; }
  .tp-hero-in { flex-direction: column; align-items: flex-start; gap: 16px; }
  .tp-hero-ic { width: 58px; height: 58px; border-radius: 18px; }
  .tp-hero-art { width: 100%; height: 46%; top: auto; bottom: 0; -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 45%); mask-image: linear-gradient(180deg, transparent 0, #000 45%); }
  .tp-hero-when { font-size: 15.5px; } .tp-hero-meta { font-size: 14.5px; }
  .tp-hero-cta { left: 20px; right: 20px; bottom: 20px; justify-content: center; }
  .tp-bar { padding: 8px; gap: 8px; border-radius: 20px; }
  .tp-seg { width: 100%; } .tp-seg-i { flex: 1 1 0; justify-content: center; padding: 0 8px; gap: 6px; font-size: 14px; }
  .tp-search, .tp-sort { flex: 1 1 100%; }
  .tp-sort { justify-content: space-between; }
  .tp-card { grid-template-columns: 1fr; border-radius: 22px; }
  .tp-ph { min-height: 0; height: 150px; margin: 10px 10px 0; }
  .tp-main { padding: 16px 18px 6px; gap: 10px; }
  .tp-side { flex-direction: column; align-items: stretch; gap: 14px; padding: 14px 18px 18px; border-top: 0; background: transparent; }
  .tp-price { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; text-align: left; flex-wrap: wrap; }
  .tp-price small { order: 0; } .tp-price strong { order: 1; margin-left: auto; font-size: 26px; } .tp-price span { order: 2; flex-basis: 100%; text-align: right; }
  .tp-acts { display: grid; grid-template-columns: 1fr 1fr; } .tp-acts > :first-child { grid-column: 1 / -1; }
  .tp-acts .mt-btn { height: 48px; }
}
@media (prefers-reduced-motion: reduce) { .tp-card, .tp-card *, .tp-hero, .tp-hero *, .tp-stat { animation: none !important; transition: none !important; } .tp-card:hover, a.tp-hero:hover, .tp-stat:hover { transform: none; } }

.tp-acts .mt-btn svg { fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.tp-stat .ma-stat-t small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.tp-acts .mt-btn-primary svg { stroke: #fff !important; }
@media (max-width: 760px) {
  .tp-hero { padding-bottom: 150px; }
  .tp-hero-art { height: 130px; }
  .tp-acts { display: flex; flex-wrap: wrap; gap: 9px; }
  .tp-acts > * { flex: 1 1 calc(50% - 5px); }
  .tp-acts > :first-child { flex-basis: 100%; }
}
@media (max-width: 760px) { .tp-stat .ma-stat-t small { white-space: normal; } }
@media (min-width: 761px) and (max-width: 1180px) { .tp-hero { padding-bottom: 96px; } .tp-hero-art { width: 52%; } .tp-hero-cta { left: 36px; right: auto; bottom: 26px; } .tp-hero-in { max-width: 100%; } }

/* ===== Ride alerts modal v2 (al-*) · same language as Ask for a ride / My account ===== */
.ops-modal-backdrop:has(.ax-modal) { background: rgba(8, 20, 58, .55); -webkit-backdrop-filter: blur(10px) saturate(1.1); backdrop-filter: blur(10px) saturate(1.1); animation: ax-fade .2s ease both; }
.ax-modal { --ax-navy: #061b52; --ax-blue: #0b3fae; --ax-line: #dfe6f3; --ax-mut: #5f6f8f; max-width: 660px; border: 0; border-radius: 28px; background: #fff; overflow: visible; box-shadow: 0 40px 90px rgba(6,20,70,.38), 0 0 0 1px rgba(255,255,255,.6) inset; animation: ax-pop .38s cubic-bezier(.22,.9,.3,1.04) both; }
@keyframes ax-pop { from { opacity: 0; transform: translateY(16px) scale(.975); } to { opacity: 1; transform: none; } }
@keyframes ax-fade { from { opacity: 0; } to { opacity: 1; } }
.ax-modal .ops-modal-header { display: flex; align-items: center; gap: 16px; padding: 26px 28px 20px; background: linear-gradient(180deg, #f5f8ff, #fff); border-bottom: 1px solid #edf1f8; border-radius: 28px 28px 0 0; }
.ax-head-ic { flex: none; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: #e6eefc; color: var(--ax-blue); }
.ax-head-ic svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ax-modal .ops-modal-header > div { flex: 1; min-width: 0; }
.ax-modal .ops-modal-tag { font-size: 12.5px; letter-spacing: .1em; color: var(--ax-blue); }
.ax-modal .ops-modal-header h3 { margin: 2px 0 0; font-size: 26px; line-height: 1.12; letter-spacing: -.03em; font-weight: 800; color: var(--ax-navy); }
.ax-sub { margin: 5px 0 0; font-size: 15px; color: var(--ax-mut); }
.ax-x { flex: none; width: 42px; height: 42px; padding: 0; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--ax-line); background: #fff; color: #44547a; cursor: pointer; box-shadow: 0 2px 8px rgba(13,34,64,.06); transition: transform .2s, background .2s, box-shadow .2s, color .2s; }
.ax-x:hover { background: #f3f7ff; color: var(--ax-blue); box-shadow: 0 6px 16px rgba(13,34,64,.12); transform: rotate(90deg); }
.ax-x svg { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.ax-modal .ops-modal-body { padding: 24px 28px 28px; overflow: visible; }
.ax-modal .form.al-form { display: grid; gap: 22px; }
.al-form .ax-field { display: grid; gap: 9px; min-width: 0; align-content: start; }
.ax-lab { display: flex; align-items: baseline; gap: 8px; font-size: 14.5px; font-weight: 700; color: var(--ax-navy); }
.ax-lab em { font-style: normal; font-weight: 600; font-size: 13px; color: #8493ad; }
.ax-hint { margin: 0; font-size: 13.5px; color: #7a89a6; line-height: 1.4; }
.ax-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ax-grid[hidden], .al-form [hidden] { display: none !important; }
.ax-group { display: grid; gap: 10px; }
.ax-group > .ax-grid .ax-lab { font-size: 13px; font-weight: 600; color: #6f7e99; }

/* alert type: segmented control, same capsule as Share a seat / Whole car */
.ax-seg { position: relative; isolation: isolate; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: 999px; background: #eef2f9; }
.ax-seg-pill { position: absolute; z-index: 0; top: 4px; bottom: 4px; left: 4px; width: calc((100% - 12px) / 2); border-radius: 999px; background: #fff; box-shadow: 0 1px 2px rgba(10,25,47,.08), 0 6px 16px -4px rgba(10,25,47,.16); transition: transform .5s cubic-bezier(.16,1,.3,1); }
.ax-seg[data-i="1"] .ax-seg-pill { transform: translateX(calc(100% + 4px)); }
.ax-seg-b { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 46px; padding: 0 12px; border: 0; border-radius: 999px; background: transparent; font: inherit; font-size: 15px; font-weight: 700; color: #6a7a99; cursor: pointer; transition: color .3s; -webkit-tap-highlight-color: transparent; }
.ax-seg-b:hover { color: var(--ax-navy); }
.ax-seg-b.on { color: var(--ax-blue); }
.ax-seg-b svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ax-seg-b:focus-visible { outline: 3px solid rgba(11,63,174,.35); outline-offset: 2px; }

/* controls */
.ax-ctl { position: relative; display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 0 16px; border: 1px solid var(--ax-line); border-radius: 18px; background: #fff; color: #6f86b8; box-shadow: 0 1px 2px rgba(13,34,64,.03); transition: border-color .2s, box-shadow .2s, background .2s; }
.ax-ctl:hover { border-color: #c4d0e6; }
.ax-ctl:focus-within { border-color: var(--ax-blue); box-shadow: 0 0 0 4px rgba(11,63,174,.1); background: #fff; }
.ax-ctl-ic { flex: none; display: grid; place-items: center; }
.ax-ctl-ic svg, .ax-ctl svg.ic { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ax-ctl .pi { position: static; flex: 1; min-width: 0; }
.ax-ctl .pi-input-row { min-height: 54px; gap: 8px; }
.ax-ctl .pi-input { font-size: 16px; font-weight: 650; color: var(--ax-navy); padding: 0; border: 0; box-shadow: none; background: transparent; min-height: 0; height: auto; }
.ax-ctl .pi-input::placeholder { font-weight: 500; color: #8e9cb7; }
.ax-ctl .pi-submeta { font-size: 12.5px; color: var(--ax-blue); }
.ax-ctl .pi-chev { color: #8d9bb5; }
.ax-ctl .cal-ic { display: none; }
.ax-ctl.ax-date::before { content: ""; flex: none; width: 19px; height: 19px; background: currentColor; -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><rect x='3.5' y='5' width='17' height='15.5' rx='3'/><path d='M3.5 10h17M8 3v4M16 3v4'/></svg>") center / contain no-repeat; mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><rect x='3.5' y='5' width='17' height='15.5' rx='3'/><path d='M3.5 10h17M8 3v4M16 3v4'/></svg>") center / contain no-repeat; }
.ax-ctl .pi-list { top: calc(100% + 8px); left: 0; right: 0; width: auto; min-width: 0; z-index: 30; }
.ax-ctl .pi-popover-date { width: min(400px, 100%); }
.ax-places .ax-field:nth-child(2) .pi-list { left: auto; right: 0; }
.ax-places .pi-list { width: min(440px, calc(100vw - 48px)); right: auto; }
.ax-places .ax-field:nth-child(2) .pi-list { left: auto; right: 0; }
.ax-from { color: var(--ax-blue); } .ax-to { color: #12a672; }
.ax-step { padding: 6px 8px; }
.ax-step .rq-stepper { width: 100%; }
.ax-price { gap: 8px; color: #6f7e99; }
.ax-peso { font-size: 18px; font-weight: 700; color: #6f7e99; }
.ax-price input { flex: 1; min-width: 0; border: 0 !important; outline: 0; box-shadow: none !important; background: transparent !important; padding: 0 !important; min-height: 0 !important; font: inherit; font-size: 18px !important; font-weight: 800 !important; letter-spacing: -.01em; color: var(--ax-navy); }
.ax-price input::placeholder { font-size: 15.5px; font-weight: 500; letter-spacing: 0; color: #8e9cb7; }

/* email switch row */
.ax-switch { position: relative; display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 1px solid var(--ax-line); border-radius: 18px; background: #f8fafe; cursor: pointer; transition: border-color .2s, background .2s; }
.ax-switch:hover { border-color: #c4d0e6; background: #f3f7ff; }
.ax-switch-ic { flex: none; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: #e6eefc; color: var(--ax-blue); }
.ax-switch-ic svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ax-switch-t { flex: 1; min-width: 0; display: grid; gap: 1px; }
.ax-switch-t strong { font-size: 15px; font-weight: 700; color: var(--ax-navy); }
.ax-switch-t span { font-size: 13.5px; color: #7a89a6; }
.ax-sw-in { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.ax-sw { flex: none; position: relative; width: 52px; height: 32px; border-radius: 999px; background: #cdd7ea; transition: background .3s cubic-bezier(.16,1,.3,1); }
.ax-sw::after { content: ""; position: absolute; top: 3px; left: 3px; width: 26px; height: 26px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(10,25,47,.25); transition: transform .35s cubic-bezier(.34,1.4,.5,1); }
.ax-sw-in:checked ~ .ax-sw { background: linear-gradient(180deg, #0a47c9, #0038a8); }
.ax-sw-in:checked ~ .ax-sw::after { transform: translateX(20px); }
.ax-sw-in:focus-visible ~ .ax-sw { outline: 3px solid rgba(11,63,174,.35); outline-offset: 2px; }

/* submit */
.ax-go { width: 100%; height: 56px; border-radius: 999px; font-size: 17px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; gap: 10px; background: linear-gradient(180deg, #0a47c9, #0038a8); border: 0; color: #fff; box-shadow: 0 14px 30px rgba(0,56,168,.3); transition: transform .2s cubic-bezier(.22,.61,.36,1), filter .2s, box-shadow .2s; }
.ax-go:hover { filter: brightness(1.08); transform: translateY(-1px); box-shadow: 0 18px 36px rgba(0,56,168,.34); }
.ax-go:active { transform: scale(.985); }
.ax-go:disabled { opacity: .65; transform: none; }
.ax-go svg { fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.al-form .error { margin: 0; padding: 12px 14px; border-radius: 14px; background: #fdeeee; color: #b42318; font-size: 14.5px; }

@media (max-height: 840px) {
  .ax-modal { max-height: calc(100dvh - 24px); display: flex; flex-direction: column; overflow: hidden; }
  .ax-modal .ops-modal-body { overflow-y: auto; overscroll-behavior: contain; }
}
@media (max-width: 640px) {
  .ops-modal-backdrop:has(.ax-modal) { place-items: end center; padding: 0; }
  .ax-modal { max-width: 100%; max-height: 94dvh; display: flex; flex-direction: column; overflow: hidden; border-radius: 26px 26px 0 0; animation: ax-sheet .42s cubic-bezier(.22,.9,.3,1) both; }
  .ax-modal .ops-modal-header { padding: 20px 18px 16px; gap: 12px; border-radius: 26px 26px 0 0; }
  .ax-head-ic { width: 46px; height: 46px; } .ax-modal .ops-modal-header h3 { font-size: 22px; } .ax-sub { font-size: 14px; }
  .ax-modal .ops-modal-body { padding: 18px 18px calc(22px + env(safe-area-inset-bottom)); overflow-y: auto; overscroll-behavior: contain; }
  .ax-grid { grid-template-columns: 1fr; gap: 14px; }
  .ax-grid.ax-times, .ax-group > .ax-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .ax-seg-b { font-size: 14px; padding: 0 6px; gap: 6px; }
  .ax-places .pi-list, .ax-ctl .pi-list { left: 0; right: 0; width: auto; }
}
@keyframes ax-sheet { from { transform: translateY(40px); opacity: .4; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .ax-modal, .ops-modal-backdrop:has(.ax-modal) { animation: none; } .ax-seg-pill, .ax-sw, .ax-sw::after, .ax-go, .ax-x { transition: none; } }

/* specificity fixes: the generic .inv-modal form rules must not box the inner inputs or re-grid the switch */
.ax-modal .form .ax-ctl input.pi-input { border: 0 !important; padding: 0 !important; background: transparent !important; box-shadow: none !important; width: 100% !important; min-height: 0 !important; border-radius: 0 !important; outline: 0; font-size: 16px; }
.ax-modal .form .ax-ctl input.pi-input:focus { outline: 0; }
.ax-modal .form label.ax-switch { display: flex; gap: 14px; font-size: inherit; font-weight: inherit; color: inherit; }
.ax-modal .form label.ax-switch .ax-sw-in { position: absolute; width: 1px !important; padding: 0 !important; border: 0 !important; }
.ax-modal .form.al-form { gap: 18px; }
.ax-modal .ops-modal-body { padding-top: 20px; }
.ax-modal .form .ax-price input { border: 0 !important; width: auto !important; }
.ax-modal .form.al-form { gap: 16px; }
.ax-modal .ops-modal-header { padding: 22px 28px 16px; }
.ax-modal .ops-modal-body { padding: 18px 28px 24px; }
.ax-ctl { min-height: 52px; } .ax-ctl .pi-input-row { min-height: 50px; }
.ax-seg-b { height: 42px; }
.ax-go { height: 54px; }

/* ===== Ride details v3 (rd2) — same language as My account ===== */
.rd2 { --rd-ease: cubic-bezier(.22,.61,.36,1); }
.rd2 .rd-head h1 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 .28em; }
.rd2 .rd-arr { color: var(--ma-blue); font-weight: 700; }
.rd2 .ma-eyebrow { display: flex; align-items: center; gap: 12px; }
.rd2 .rd-state { display: inline-flex; align-items: center; height: 26px; padding: 0 12px; border-radius: 999px; background: #e6eefc; color: var(--ma-blue); font-size: 12.5px; letter-spacing: .02em; text-transform: none; font-weight: 700; }
.rd2 .rd-state.ok { background: #e6f6ec; color: #15803d; }
.rd2 .rd-state.full, .rd2 .rd-state.bad { background: #fdebe9; color: #b42318; }
.rd2 .rd-state.done { background: #eef1f6; color: #5f6f8f; }
.rd2 .rd-banner { min-height: 200px; }
.rd2 .rd-av { text-decoration: none; transition: transform .25s var(--rd-ease); }
.rd2 .rd-av:hover { transform: scale(1.03); }
.rd2 .rd-ban-eye { font-size: 12.5px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: rgba(255,255,255,.8); }
.rd2 .rd-banner .ma-id h2 { margin: 0; font-size: clamp(28px, 3.4vw, 38px); letter-spacing: -.025em; line-height: 1.08; }
.rd2 .rd-banner .ma-id h2 a { color: #fff; text-decoration: none; }
.rd2 .rd-ban-badges { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rd2 .rd-ban-badges .badge, .rd2 .rd-ban-badges .chip, .rd2 .rd-ban-badges > span:not(.ma-status) { font-size: 13.5px; }
.rd2 .rd-ban-car { display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 6px 14px 6px 12px; border-radius: 999px; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.24); font-size: 14.5px; font-weight: 600; color: #fff; backdrop-filter: blur(6px); }
.rd2 .rd-ban-car .ic { width: 16px; height: 16px; }
.rd2 .rd-bubble strong { font-size: 18px; letter-spacing: -.01em; }
.rd2 .ma-stats.rd-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.rd2 .rd-stat { cursor: default; }
.rd2 .rd-stat.warn .ma-stat-ic { background: #fdebe9; color: #b42318; }
.rd2 .rd-grid { grid-template-columns: minmax(0, 1fr) 390px; gap: 24px; margin-top: 22px !important; }
.rd2 .ma-col { gap: 24px; }
.rd2 .ma-card { padding: 26px; }
.rd2 .ma-ch { margin-bottom: 4px; }
/* route card: itinerary beside the map */
.rd2 .rd-route-in { display: grid; grid-template-columns: minmax(250px, .8fr) minmax(0, 1.2fr); gap: 22px; margin-top: 20px; align-items: stretch; }
.rd2 .rd-itin { padding: 20px 18px; border: 1px solid var(--ma-line); border-radius: 18px; background: #fbfcff; align-self: stretch; }
.rd2 .rd-itin .itin { gap: 0; }
.rd2 .rd-itin .itin-time { font-size: 17px; letter-spacing: -.01em; color: var(--ma-navy); }
.rd2 .rd-itin .itin-stop strong { color: var(--ma-navy); }
.rd2 .rd-itin .itin-stop > div strong { font-size: 18px; }
.rd2 .rd-itin .muted { color: var(--ma-mut); }
.rd2 .rd-route .map { height: 100%; min-height: 300px; border-radius: 18px; overflow: hidden; border: 1px solid var(--ma-line); background: linear-gradient(135deg, #eaf0fc, #f6f9ff); margin: 0; }
.rd2 .rd-route .map-fallback { display: grid; place-items: center; height: 100%; margin: 0; font-weight: 700; color: var(--ma-blue); }
/* about card */
.rd2 .rd-photo { margin-top: 20px; }
.rd2 .rd-photo .cg-cover { border-radius: 18px; aspect-ratio: 16/8; box-shadow: 0 10px 28px rgba(13,34,64,.12); }
.rd2 .rd-photo .cg-multi .cg-cover, .rd2 .rd-photo .cg-one .cg-cover { aspect-ratio: 16/8; }
.rd2 .rd-photo .cg-thumbs { margin-top: 10px; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
.rd2 .rd-photo .cg-th { border-radius: 14px; transition: transform .2s var(--rd-ease), box-shadow .2s; }
.rd2 .rd-photo .cg-th:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(13,34,64,.16); }
.rd2 .rd-vehicle-specs { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; margin-top: 16px; padding: 0; list-style: none; }
.rd2 .rd-vehicle-specs li { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border: 1px solid var(--ma-line); border-radius: 12px; background: #fbfcff; font-size: 13.5px; font-weight: 600; color: var(--ma-navy); transition: border-color .2s, box-shadow .2s; }
.rd2 .rd-vehicle-specs li:hover { border-color: #cfdcf5; box-shadow: 0 4px 12px rgba(13,34,64,.06); }
.rd2 .rd-vehicle-specs li .ic { flex: none; width: 17px; height: 17px; color: var(--ma-blue); }
.rd2 .rd-note-vehicle { margin-top: 14px; background: #f8fbff; border-color: #e2edfd; }
.rd2 .rd-note-vehicle strong { color: var(--ma-navy); font-size: 14px; font-weight: 700; }
.rd2 .rd-note-vehicle p { margin: 4px 0 0; font-size: 14.5px; line-height: 1.5; color: #31415f; }
.rd2 .rd-note { margin-top: 18px; padding: 16px 18px; border: 1px solid var(--ma-line); border-radius: 16px; background: #fbfcff; }
.rd2 .rd-note strong { display: block; font-size: 15px; color: var(--ma-navy); }
.rd2 .rd-note p { margin: 6px 0 0; font-size: 15.5px; line-height: 1.55; color: #31415f; }
.rd2 .rd-note-trip { background: #f1f6ff; border-color: #d6e3fb; }
.rd2 .rd-sub { margin: 26px 0 0; font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ma-mut); }
.rd2 .prefs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }
.rd2 .prefs li { gap: 14px; padding: 12px 14px; border: 1px solid var(--ma-line); border-radius: 14px; background: #fbfcff; font-size: 14.5px; line-height: 1.35; color: var(--ma-navy); transition: border-color .2s, box-shadow .2s, transform .2s var(--rd-ease); }
.rd2 .prefs li:hover { border-color: #cfdcf5; box-shadow: 0 6px 16px rgba(13,34,64,.06); transform: translateY(-1px); }
.rd2 .prefs li .ic { flex: none; box-sizing: content-box; width: 20px; height: 20px; padding: 9px; border-radius: 50%; background: #e6eefc; color: var(--ma-blue); }
.rd2 .prefs li.off .ic { background: #eef1f6; color: #8a97b1; }
.rd2 .prefs li.off { color: var(--ma-mut); }
.rd2 .rd-report { margin-top: 18px; display: inline-flex; align-items: center; gap: 7px; color: var(--ma-mut); }
.rd2 .rd-report:hover { color: #b42318; }
.rd2 .rd-rv-list { display: grid; gap: 12px; margin-top: 18px; }
.rd2 .rd-rv { padding: 16px 18px; border: 1px solid var(--ma-line); border-radius: 16px; background: #fbfcff; margin: 0; }
.rd2 .rd-rv p { margin: 8px 0 0; font-size: 15px; line-height: 1.5; color: #31415f; }
.rd2 .rd-rv .stars { color: #f5a623; }
.rd2 .rd-rv .stars .dim { color: #d7dded; }
/* side column */
.rd2 .rd-side .sticky { top: 90px; display: grid; gap: 18px; }
.rd2 .rd-side .sticky > * { margin: 0 !important; }
.rd2 .rd-side .card { padding: 22px; border-radius: 22px; border: 1px solid var(--ma-line); box-shadow: 0 10px 30px rgba(13,34,64,.06); background: #fff; }
.rd2 .rd-side .card.book { padding: 26px; box-shadow: 0 18px 44px rgba(8,42,120,.12); border-color: #d6e3fb; background: linear-gradient(180deg, #f6f9ff 0, #fff 120px); }
.rd2 .book-route { display: none; }
.rd2 .book-price-row { align-items: flex-end; }
.rd2 .book-price strong { font-size: 46px; line-height: 1; letter-spacing: -.035em; color: var(--ma-navy); }
.rd2 .book-price .muted { display: block; margin-top: 8px; color: var(--ma-mut); }
.rd2 .rd-side .card strong { color: var(--ma-navy); }
.rd2 .rd-side .ask-card strong, .rd2 .rd-side .share-card strong, .rd2 .rd-side .safety-card strong { display: block; margin-bottom: 12px; font-size: 17px; letter-spacing: -.01em; }
.rd2 .rd-side .wm::after { display: none; }
.rd2 .rd-side .btn { border-radius: 999px; height: 48px; font-weight: 700; font-size: 15.5px; transition: transform .15s var(--rd-ease), box-shadow .2s, filter .15s, border-color .15s; }
.rd2 .rd-side .btn:active { transform: scale(.98); }
.rd2 .rd-side .btn-lg { height: 54px; font-size: 16.5px; }
.rd2 .rd-side .btn-primary { background: linear-gradient(180deg, #0a47c9, #0038a8); box-shadow: 0 10px 24px rgba(0,56,168,.28); border-color: transparent; }
.rd2 .rd-side .btn-primary:hover:not(:disabled) { filter: brightness(1.06); }
.rd2 .rd-side .btn-ghost { background: #fff; border: 1px solid #cfdcf5; color: var(--ma-blue); }
.rd2 .rd-side .btn-ghost:hover { border-color: var(--ma-blue); box-shadow: 0 6px 16px rgba(13,34,64,.08); }
.rd2 .rd-side .btn-danger { background: #fff; border: 1px solid #f3c9c4; color: #b42318; }
.rd2 .rd-side .btn-danger:hover { background: #fff5f4; }
.rd2 .rd-side .notice.ok { border-radius: 16px; }
.rd2 .rd-side .confirmed-coord-box { border-radius: 18px; }
.rd2 .rd-export .oc-export { display: flex; gap: 10px; flex-wrap: wrap; margin: 0; }
.rd2 .rd-export .btn { height: 42px; border-radius: 999px; background: #fff; border: 1px solid var(--ma-line); color: var(--ma-navy); font-weight: 700; }
@media (max-width: 1100px) {
  .rd2 .rd-grid { grid-template-columns: minmax(0, 1fr); }
  .rd2 .rd-side .sticky { position: static; }
  .rd2 .ma-stats.rd-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 820px) {
  .rd2 .rd-route-in { grid-template-columns: minmax(0, 1fr); }
  .rd2 .rd-route .map { min-height: 260px; height: 260px; }
  .rd2 .rd-banner { flex-wrap: wrap; padding: 22px 20px; gap: 18px; }
  .rd2 .rd-bubble { display: none; }
  .rd2 .ma-card { padding: 20px; }
  .rd2 .prefs { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 520px) {
  .rd2 .rd-av, .rd2 .rd-av .avatar { width: 88px !important; height: 88px !important; }
  .rd2 .rd-banner .ma-id h2 { font-size: 26px; }
  .rd2 .ma-stat { padding: 14px; gap: 12px; }
  .rd2 .ma-stat-ic { width: 44px; height: 44px; }
  .rd2 .rd-side .card.book { padding: 22px; }
}
@media (prefers-reduced-motion: no-preference) {
  .rd2 .ma-card, .rd2 .rd-banner, .rd2 .rd-stat { animation: rd-in .5s var(--rd-ease) both; }
  .rd2 .rd-stats .rd-stat:nth-child(2) { animation-delay: .04s } .rd2 .rd-stats .rd-stat:nth-child(3) { animation-delay: .08s } .rd2 .rd-stats .rd-stat:nth-child(4) { animation-delay: .12s }
  @keyframes rd-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
}
.rd2 .rd-banner .rating { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px; border-radius: 999px; background: rgba(255,255,255,.95); color: var(--ma-navy); font-weight: 700; font-size: 13.5px; }
.rd2 .rd-banner .rating .muted { color: var(--ma-mut); }
.rd2 .rd-banner .rating .ic-star { color: #f5a623; fill: #f5a623; width: 14px; height: 14px; }
.rd2 .rd-banner .chip-row { display: flex; gap: 8px; flex-wrap: wrap; }
.rd2 .rd-banner .chip { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px; border-radius: 999px; background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.3); color: #fff; font-weight: 700; font-size: 13px; }
.rd2 .rd-banner .chip .ic { width: 14px; height: 14px; }
@media (max-width: 820px) {
  .rd2 .rd-banner { padding-bottom: 130px; align-items: flex-start; }
  .rd2 .rd-banner .ma-banner-art { top: auto; bottom: 0; height: 120px; width: 100%; object-position: 70% 60%; -webkit-mask-image: linear-gradient(180deg, transparent, #000 70%); mask-image: linear-gradient(180deg, transparent, #000 70%); }
  .rd2 .rd-banner .ma-id { flex: 1 1 100%; }
  .rd2 .rd-ban-car { position: absolute; left: 20px; bottom: 16px; }
}
/* alert type selector: same spring capsule as Share a seat / Whole car */
.ax-seg { --p: 0; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.ax-seg .ax-seg-pill, .ax-seg[data-i="1"] .ax-seg-pill { transform: translate3d(calc(var(--p) * (100% + 4px)), 0, 0); scale: 1; transition: scale 240ms cubic-bezier(.16,1,.3,1), box-shadow 240ms cubic-bezier(.16,1,.3,1); will-change: transform; pointer-events: none; box-shadow: 0 1px 2px rgba(10,25,47,.08), 0 4px 12px -2px rgba(10,25,47,.1); }
.ax-seg.is-pressed .ax-seg-pill { scale: .97; box-shadow: 0 1px 2px rgba(10,25,47,.1), 0 8px 18px -4px rgba(10,25,47,.18), 0 0 0 3px rgba(11,63,174,.13); }
.ax-seg.is-dragging, .ax-seg.is-dragging * { cursor: pointer !important; }
.ax-seg-b { transition: none; }
.ax-seg-b[data-v="ride"] { color: color-mix(in srgb, var(--ax-blue) calc((1 - var(--p)) * 100%), #6a7a99); }
.ax-seg-b[data-v="request"] { color: color-mix(in srgb, var(--ax-blue) calc(var(--p) * 100%), #6a7a99); }
@media (prefers-reduced-motion: reduce) { .ax-seg .ax-seg-pill { transition: none; } }
.ax-modal .ax-ctl .pi-input:focus, .ax-modal .ax-ctl .pi-input:focus-visible, .ax-modal .ax-ctl .pi-trigger-input:focus { outline: none !important; box-shadow: none !important; border-color: transparent !important; background: transparent !important; }
.ax-modal .ax-ctl:focus-within { border-color: var(--ax-blue); box-shadow: 0 0 0 4px rgba(11,63,174,.14); }
.ax-modal .ax-ctl .pi.cal-field, .ax-modal .ax-ctl .pi.cal-field:focus-within, .ax-modal .ax-ctl .pi.cal-field.open { border-color: transparent !important; box-shadow: none !important; background: transparent !important; }
/* Request & offers pages: same premium language as Ride details */
.rq2 .rd-facts { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.rq2 .rd-grid { grid-template-columns: minmax(0, 1fr) 400px; align-items: start; }
.rq2 .rq-side { position: sticky; top: 90px; }
.rq2 .rq-side > * { margin: 0 !important; }
.rq2 .rq-route-card { background: #fff; border-color: var(--ma-line); }
.rq2 .rd-tls { margin-top: 18px; padding: 10px 18px; border: 1px solid var(--ma-line); border-radius: 18px; background: #fbfcff; }
.rq2 .rd-tl { grid-template-columns: 86px 18px 1fr; }
.rq2 .rd-tl:not(:last-child)::before { left: calc(86px + 12px + 8px); background: repeating-linear-gradient(to bottom, #9db6ea 0 6px, transparent 6px 11px); }
.rq2 .rd-dot { border-color: var(--ma-blue); }
.rq2 .rd-end .rd-dot { background: var(--ma-blue); border-color: var(--ma-blue); }
.rq2 .rd-place .rd-tag { color: var(--ma-blue); }
.rq2 .rd-end .rd-tag { color: var(--ma-blue); }
.rq2 .rd-time { color: var(--ma-navy); }
.rq2 .rd-place strong { color: var(--ma-navy); }
.rq2 .req-note { margin: 16px 0 0; padding: 16px 18px; border-left: 3px solid var(--ma-blue); background: #f1f6ff; border-radius: 0 16px 16px 0; font-style: italic; font-size: 16px; line-height: 1.55; color: #31415f; }
.rq2 .lg-list { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 12px; }
.rq2 .lg-list li { display: flex; align-items: flex-start; gap: 14px; padding: 12px 14px; border: 1px solid var(--ma-line); border-radius: 14px; background: #fbfcff; font-size: 15px; line-height: 1.45; color: var(--ma-navy); }
.rq2 .lg-list .ic { flex: none; box-sizing: content-box; width: 20px; height: 20px; padding: 9px; border-radius: 50%; background: #e6eefc; color: var(--ma-blue); margin: 0; }
.rq2 .rd-side .rd-status .lg-list { margin-top: 14px; }
.rq2 .rd-side .tp-offer { padding: 24px; box-shadow: 0 18px 44px rgba(8,42,120,.12); border-color: #d6e3fb; background: linear-gradient(180deg, #f6f9ff 0, #fff 120px); }
.rq2 .rd-side .tp-offer .h3, .rq2 .rd-side .rd-status .h3 { font-size: 21px; font-weight: 800; letter-spacing: -.015em; color: var(--ma-navy); margin: 0 0 10px; }
.rq2 .rd-side .tp-offer.wm::after { display: none; }
.rq2 .rd-side .tp-offer input, .rq2 .rd-side .tp-offer textarea, .rq2 .rd-side .tp-offer select { border-radius: 14px; border: 1px solid var(--ma-line); background: #fff; }
@media (max-width: 1100px) { .rq2 .rd-grid { grid-template-columns: minmax(0, 1fr); } .rq2 .rq-side { position: static; } }
@media (max-width: 560px) { .rq2 .rd-tl { grid-template-columns: 64px 18px 1fr; } .rq2 .rd-tl:not(:last-child)::before { left: calc(64px + 12px + 8px); } }
/* itinerary timeline, refined */
.rd2 .rd-route-in { grid-template-columns: minmax(330px, 1fr) minmax(0, 1fr); gap: 24px; }
.rd2 .rd-itin { padding: 26px 24px; background: linear-gradient(180deg, #f7faff, #fff); box-shadow: 0 8px 24px rgba(13,34,64,.05); }
.rd2 .rd-itin .itin-stop, .rd2 .rd-itin .itin-mid { grid-template-columns: 74px 22px minmax(0, 1fr); gap: 0 14px; }
.rd2 .rd-itin .itin-stop > div { gap: 3px; padding-bottom: 2px; }
.rd2 .rd-itin .itin-time { font-family: inherit; font-variant-numeric: tabular-nums; font-size: 20px; font-weight: 800; letter-spacing: -.02em; color: var(--ma-navy); text-align: right; line-height: 26px; }
.rd2 .rd-itin .itin-tag { font-size: 11.5px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--ma-blue); line-height: 18px; }
.rd2 .rd-itin .itin-stop > div strong { font-size: 21px; line-height: 1.2; letter-spacing: -.015em; }
.rd2 .rd-itin .itin-stop > div .muted { font-size: 15px; line-height: 1.4; }
.rd2 .rd-itin .itin-dot { box-sizing: border-box; width: 22px; height: 22px; margin-top: 2px; border: 5px solid var(--ma-blue); background: #fff; box-shadow: 0 0 0 5px rgba(11,63,174,.12); }
.rd2 .rd-itin .itin-dot.end { background: var(--ma-blue); }
.rd2 .rd-itin .itin-mid { min-height: 84px; align-items: center; }
.rd2 .rd-itin .itin-mid .itin-time { justify-self: end; display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 999px; background: #e6eefc; color: var(--ma-blue); font-size: 13px; font-weight: 700; letter-spacing: 0; }
.rd2 .rd-itin .itin-bar { width: 4px; min-height: 84px; border-radius: 4px; background: linear-gradient(180deg, var(--ma-blue), #7ea4ee); }
.rd2 .rd-itin .itin-via { grid-template-columns: 74px 22px minmax(0, 1fr); gap: 0 14px; }
.rd2 .rd-itin .itin-via-name { font-size: 16px; font-weight: 600; color: var(--ma-navy); }
@media (max-width: 1280px) { .rd2 .rd-route-in { grid-template-columns: minmax(0, 1fr); } .rd2 .rd-route .map { min-height: 280px; height: 280px; } }
@media (max-width: 520px) { .rd2 .rd-itin { padding: 20px 16px; } .rd2 .rd-itin .itin-stop, .rd2 .rd-itin .itin-mid, .rd2 .rd-itin .itin-via { grid-template-columns: 58px 22px minmax(0, 1fr); gap: 0 10px; } .rd2 .rd-itin .itin-time { font-size: 17px; } .rd2 .rd-itin .itin-stop > div strong { font-size: 19px; } }
/* Whole-car request: five-up facts, route + map, 70/30 layout */
.rq2 .ma-stats.rd-facts { grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 14px; }
.rq2 .rd-facts .ma-stat { padding: 16px 16px; gap: 12px; min-width: 0; }
.rq2 .rd-facts .ma-stat-ic { width: 48px; height: 48px; }
.rq2 .rd-facts .ma-stat-t { min-width: 0; }
.rq2 .rd-facts .ma-stat-t strong { font-size: 24px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rq2 .rd-facts .ma-stat-t small, .rq2 .rd-facts .ma-stat-t em { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rq2 .rd-grid { grid-template-columns: minmax(0, 2.2fr) minmax(380px, 1fr); }
.rq2 .rd-route-in { grid-template-columns: minmax(320px, .95fr) minmax(0, 1.05fr); }
.rq2 .rd-route-in.no-map { grid-template-columns: minmax(0, 1fr); }
.rq2 .rd-route .map { min-height: 340px; }
.rq2 .rd-itin .itin-stop, .rq2 .rd-itin .itin-mid, .rq2 .rd-itin .itin-via { grid-template-columns: 84px 22px minmax(0, 1fr); }
.rq2 .rd-itin .itin-time { font-size: 17px; }
.rq2 .rd-itin .itin-time.soft { font-size: 14px; font-weight: 600; color: var(--ma-mut); }
.rq2 .rd-itin .itin-via-kind { display: block; font-style: normal; font-size: 13px; font-weight: 600; color: var(--ma-mut); }
.rq2 .rd-itin .itin-via { min-height: 56px; }
.rq2 .rd-share .muted { margin: 0 0 14px; }
.rq2 .rd-share .share-row { display: flex; flex-wrap: wrap; gap: 10px; }
.rq2 .rd-chat-btn { margin-top: 14px; }
@media (max-width: 1280px) { .rq2 .rd-route-in { grid-template-columns: minmax(0, 1fr); } .rq2 .rd-route .map { height: 300px; } .rq2 .rd-grid { grid-template-columns: minmax(0, 1fr) 380px; } }
@media (max-width: 1100px) { .rq2 .ma-stats.rd-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); } .rq2 .rd-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { .rq2 .ma-stats.rd-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } .rq2 .rd-facts > :last-child:nth-child(odd) { grid-column: 1 / -1; } .rq2 .rd-itin .itin-stop, .rq2 .rd-itin .itin-mid, .rq2 .rd-itin .itin-via { grid-template-columns: 68px 22px minmax(0, 1fr); } }
.rq2 .rd-itin .itin-time { white-space: nowrap; }
@media (max-width: 560px) {
  .rq2 .ma-stats.rd-facts .ma-stat { padding: 14px 12px; gap: 10px; }
  .rq2 .ma-stats.rd-facts .ma-stat-ic { width: 40px; height: 40px; }
  .rq2 .ma-stats.rd-facts .ma-stat-t strong { font-size: 19px; white-space: normal; text-overflow: clip; line-height: 1.15; }
  .rq2 .ma-stats.rd-facts .ma-stat-t small { white-space: normal; }
  .rq2 .rd-itin .itin-stop, .rq2 .rd-itin .itin-mid, .rq2 .rd-itin .itin-via { grid-template-columns: 76px 22px minmax(0, 1fr); gap: 0 10px; }
  .rq2 .rd-itin .itin-time { font-size: 15px; }
  .rq2 .rd-itin .itin-mid .itin-time { font-size: 12.5px; padding: 0 8px; }
}
@media (min-width: 901px) and (max-width: 1100px) {
  .rq2 .ma-stats.rd-facts { grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 10px; }
  .rq2 .ma-stats.rd-facts .ma-stat { flex-direction: column; align-items: flex-start; gap: 10px; padding: 14px; }
  .rq2 .ma-stats.rd-facts .ma-stat-t strong { font-size: 21px; }
}
/* Route & itinerary timeline (shared by Ride and Request details) */
.rd2 .rd-itin { padding: 22px 22px 24px; border: 1px solid var(--ma-line); border-radius: 20px; background: linear-gradient(180deg, #f7faff, #fff); box-shadow: 0 8px 24px rgba(13,34,64,.05); }
.tl { --tl-c: #2d62d8; --tl-line: #a9c0f1; list-style: none; margin: 0; padding: 0; display: grid; }
.tl-row { display: grid; grid-template-columns: 84px 24px minmax(0, 1fr); column-gap: 14px; align-items: stretch; margin: 0; padding: 0; }
.tl-time { text-align: right; padding-top: 18px; font-size: 17px; line-height: 26px; font-weight: 800; letter-spacing: -.015em; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--ma-navy); }
.tl-time.soft { font-size: 14px; font-weight: 600; color: var(--ma-mut); letter-spacing: 0; }
.tl-rail { position: relative; display: block; }
.tl-rail::before { content: ""; position: absolute; left: 50%; width: 4px; margin-left: -2px; top: 0; bottom: 0; border-radius: 4px; background: var(--tl-line); }
.tl-start .tl-rail::before { top: 31px; border-radius: 4px 4px 0 0; }
.tl-end .tl-rail::before { bottom: auto; height: 31px; border-radius: 0 0 4px 4px; }
.tl-start .tl-rail::before, .tl-gap .tl-rail::before, .tl-via .tl-rail::before { background: linear-gradient(180deg, var(--tl-c), var(--tl-line)); }
.tl-dot { position: absolute; left: 50%; display: block; box-sizing: border-box; border-radius: 50%; transform: translateX(-50%); z-index: 1; }
.tl-start .tl-dot { top: 20px; width: 22px; height: 22px; background: #fff; border: 5px solid var(--tl-c); box-shadow: 0 0 0 5px rgba(45,98,216,.14); }
.tl-end .tl-dot { top: 20px; width: 22px; height: 22px; background: var(--tl-c); box-shadow: 0 0 0 5px rgba(45,98,216,.14), inset 0 0 0 6px var(--tl-c), inset 0 0 0 11px #fff; }
.tl-via .tl-dot { top: 23px; width: 14px; height: 14px; background: #fff; border: 3px solid #7ea4ee; box-shadow: 0 0 0 4px #fff; }
.tl-body { display: grid; align-content: start; gap: 2px; padding-bottom: 6px; min-width: 0; }
.tl-tag { display: flex; align-items: center; gap: 8px; height: 18px; font-size: 11.5px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--ma-blue); line-height: 18px; }
.tl-name { font-size: 20px; line-height: 26px; letter-spacing: -.015em; font-weight: 800; color: var(--ma-navy); overflow-wrap: anywhere; }
.tl-sub { font-size: 15px; line-height: 1.4; color: var(--ma-mut); }
.tl-via .tl-tag { color: #6a7a99; }
.tl-via .tl-name { font-size: 17px; line-height: 24px; font-weight: 700; }
.tl-via .tl-time { line-height: 24px; }
.tl-via .tl-body { padding-bottom: 14px; }
.tl-start .tl-body, .tl-end .tl-body { padding-bottom: 4px; }
.tl-gap { min-height: 52px; }
.tl-gap .tl-body { align-content: center; }
.tl-dur { display: inline-flex; align-items: center; gap: 6px; width: fit-content; height: 26px; padding: 0 11px 0 9px; border-radius: 999px; background: #e9f0fd; color: #35549a; font-size: 13px; font-weight: 700; }
.tl-dur svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tl-via.is-hit .tl-name { color: var(--ma-blue); }
.tl-via.is-hit .tl-dot { background: var(--tl-c); border-color: var(--tl-c); }
.tl-row .tl-dot, .tl-row .tl-name { transition: transform .25s cubic-bezier(.22,.61,.36,1), color .2s; }
.tl-row:hover .tl-dot { transform: translateX(-50%) scale(1.1); }
@media (max-width: 520px) { .rd2 .rd-itin { padding: 18px 14px 20px; } .tl-row { grid-template-columns: 72px 24px minmax(0, 1fr); column-gap: 10px; } .tl-time { font-size: 15px; } .tl-name { font-size: 19px; } }
.tl { --tl-line: #7fa3ec; }
.tl-start .tl-rail::before, .tl-gap .tl-rail::before, .tl-via .tl-rail::before, .tl-end .tl-rail::before { background: var(--tl-line); }
.tl-start .tl-rail::before { top: 31px; bottom: -1px; }
.tl-gap .tl-rail::before, .tl-via .tl-rail::before { top: -1px; bottom: -1px; }
.tl-tag { white-space: nowrap; flex-wrap: nowrap; }
.tl-tag .rc-via-hit-pill { flex: none; display: inline-flex; align-items: center; height: 20px; padding: 0 8px; margin: 0; border-radius: 999px; font-size: 10.5px; letter-spacing: .06em; white-space: nowrap; line-height: 1; }
@media (max-width: 520px) { .tl-tag { letter-spacing: .06em; font-size: 11px; } .tl-row { grid-template-columns: 64px 24px minmax(0, 1fr); } }

/* ===== Support KaSabay modal (sp-*) — KaSabay language: Plus Jakarta, flag blue, serif italic accent, slate mask art ===== */
.sp-overlay { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 24px; background: rgba(10, 25, 47, .42); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); opacity: 0; transition: opacity .18s ease; overflow-y: auto; }
.sp-overlay.on { opacity: 1; }
.sp-ic { display: inline-flex; width: 1em; height: 1em; flex: none; }
.sp-ic svg { width: 100%; height: 100%; display: block; }
.sp-box { position: relative; width: min(980px, 100%); margin: auto; border-radius: 28px; padding: 38px 38px 30px; color: var(--ink); outline: none; overflow: hidden;
  background: radial-gradient(520px 300px at 0% 0%, rgba(0, 56, 168, .08), rgba(0, 56, 168, 0) 70%), radial-gradient(460px 260px at 100% 0%, rgba(252, 209, 22, .16), rgba(252, 209, 22, 0) 70%), radial-gradient(rgba(0, 56, 168, .09) 1px, transparent 1.2px) 0 0 / 22px 22px, var(--bg);
  box-shadow: var(--shadow-glow); transform: translateY(12px) scale(.985); transition: transform .22s var(--ease); }
.sp-overlay.on .sp-box { transform: none; }
.sp-x { position: absolute; top: 18px; right: 18px; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line-2); background: #fff; color: var(--ink-2); display: grid; place-items: center; cursor: pointer; font-size: 17px; transition: background .15s, transform .15s; z-index: 3; }
.sp-x:hover { background: var(--soft); transform: scale(1.05); }
.sp-x:focus-visible, .sp-pill:focus-visible { outline: 3px solid rgba(0, 56, 168, .4); outline-offset: 2px; }
.sp-head { margin: 0 0 26px; max-width: 700px; }
.sp-eyebrow { display: inline-flex; align-items: center; gap: 7px; margin-bottom: 8px; }
.sp-eyebrow .sp-ic { font-size: 14px; color: var(--red); }
.sp-head h2 { margin: 0 0 10px; font-size: clamp(34px, 5vw, 50px); font-weight: 800; letter-spacing: -.035em; line-height: 1.02; }
.sp-serif { font-family: var(--font-serif); font-style: italic; font-weight: 400; color: var(--brand); letter-spacing: -.01em; font-size: 1.08em; }
.sp-lede { margin: 0; color: var(--muted); font-size: 17px; line-height: 1.55; }
.sp-split { display: grid; grid-template-columns: 1.05fr 1fr; gap: 18px; align-items: stretch; }
.sp-split.one { grid-template-columns: minmax(0, 520px); }
.sp-card { display: flex; flex-direction: column; padding: 24px; border-radius: 22px; background: #fff; border: 1px solid var(--line); box-shadow: 0 10px 30px rgba(13, 34, 64, .06); min-width: 0; }
.sp-card-head { display: flex; align-items: center; justify-content: space-between; min-height: 40px; }
.sp-logo .sp-ic { width: auto; height: 36px; aspect-ratio: 170 / 44; font-size: 0; }
.sp-logo-paypal .sp-ic { aspect-ratio: 160 / 44; height: 38px; }
.sp-tag { font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--brand); background: var(--brand-50); padding: 5px 11px; border-radius: 999px; }
.sp-tag-sun { color: var(--sun-ink); background: var(--warn-50); box-shadow: 0 0 0 1px rgba(234, 184, 0, .4) inset; }
.sp-card-title { margin: 14px 0 4px; font-size: 22px; font-weight: 800; letter-spacing: -.02em; }
.sp-card-sub { margin: 0; color: var(--muted); font-size: 14.5px; line-height: 1.5; }
.sp-plate { align-self: center; margin: 22px 0 18px; width: min(330px, 100%); padding: 10px; border-radius: 22px; background: #fff; border: 1px solid var(--line-2); box-shadow: var(--shadow); }
.sp-qrcrop { position: relative; width: 100%; aspect-ratio: 640 / 684; overflow: hidden; border-radius: 15px; background: #fff; }
.sp-qrcrop img { display: block; width: 100%; height: auto; }
.sp-qrcrop::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2.2%; background: #fff; border-radius: 0 0 15px 15px; }
.sp-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.sp-btn { background: #fff; border-color: var(--line-2); color: var(--brand); min-height: 42px; padding: 8px 16px; font-size: 14px; }
.sp-btn:hover { background: var(--brand-50); border-color: rgba(0, 56, 168, .35); }
.sp-btn .sp-ic { font-size: 17px; }
.sp-fine { margin: 14px 0 0; font-size: 13px; color: var(--muted); text-align: center; }
.sp-field { display: block; margin: 18px 0 0; padding: 12px 18px 12px; border-radius: 18px; border: 1px solid var(--line-2); background: #fff; box-shadow: var(--shadow-sm); cursor: text; transition: border-color .15s, box-shadow .15s; }
.sp-field:focus-within { border-color: var(--brand); box-shadow: 0 0 0 4px rgba(0, 56, 168, .12); }
.sp-field-lab { display: block; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.sp-field-row { display: flex; align-items: baseline; gap: 6px; }
.sp-cur { font-size: 28px; font-weight: 700; color: var(--muted); }
.sp-amount-input { width: 2ch; min-width: 2ch; max-width: 100%; border: 0; outline: 0; background: transparent; font: inherit; font-size: 44px; font-weight: 800; letter-spacing: -.03em; line-height: 1.15; color: var(--ink); padding: 0; font-variant-numeric: tabular-nums; }
.sp-amount-input.bad { color: var(--red); }
.sp-unit { margin-left: auto; font-size: 13px; font-weight: 700; color: var(--muted); letter-spacing: .06em; }
.sp-amount-hint { margin: 8px 2px 14px; min-height: 18px; font-size: 13px; color: var(--muted); }
.sp-amount-hint.bad { color: var(--red); }
.sp-pills { display: flex; gap: 6px; margin-bottom: 18px; }
.sp-pill { display: inline-flex; align-items: center; justify-content: center; gap: 6px; flex: 1 1 auto; min-height: 40px; padding: 8px 10px; border-radius: 999px; border: 1px solid var(--line-2); background: #fff; color: var(--ink); font: inherit; font-size: 14.5px; white-space: nowrap; font-weight: 700; cursor: pointer; transition: background .15s, border-color .15s, color .15s; }
.sp-pill:hover { background: var(--soft); }
.sp-pill.on { background: var(--brand-50); border-color: rgba(0, 56, 168, .45); color: var(--brand); }
.sp-pill .sp-ic { font-size: 15px; color: var(--brand); }
.sp-donate { width: 100%; min-height: 54px; font-size: 16.5px; }
.sp-donate .sp-ic { font-size: 17px; opacity: .9; }
.sp-donate.off { background: #c3cce0; box-shadow: none; cursor: not-allowed; transform: none; }
.sp-secure { display: flex; align-items: center; justify-content: center; gap: 7px; margin: 11px 0 0; font-size: 13px; color: var(--muted); }
.sp-secure .sp-ic { font-size: 15px; }
.sp-why { list-style: none; margin: auto 0 0; padding: 18px 0 0; display: grid; gap: 9px; }
.sp-why li { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--ink-2); font-weight: 600; }
.sp-tick { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--ok-50); color: var(--ok); font-size: 12px; font-style: normal; }
.sp-note { position: relative; isolation: isolate; margin-top: 18px; padding: 22px 26px; min-height: 118px; border-radius: 22px; background: linear-gradient(100deg, var(--warn-50), #fffdf2); border: 1px solid rgba(234, 184, 0, .38); overflow: hidden; }
.sp-note-t { position: relative; z-index: 1; max-width: 520px; }
.sp-note-t strong { display: block; margin-bottom: 4px; font-size: 16.5px; font-weight: 800; letter-spacing: -.01em; }
.sp-note-t p { margin: 0; font-size: 14px; line-height: 1.55; color: #6b5a2a; }
.sp-art { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.sp-art i { position: absolute; display: block; background: #4f5b82; }
.sp-art-luneta { right: 30px; bottom: 11px; height: 92px; aspect-ratio: 191 / 142; opacity: .3; -webkit-mask: url(/art/v-luneta.png) right bottom / 100% 100% no-repeat; mask: url(/art/v-luneta.png) right bottom / 100% 100% no-repeat; }
.sp-art-palm { right: 210px; bottom: 11px; height: 66px; aspect-ratio: 46 / 78; opacity: .3; -webkit-mask: url(/art/v-palm.png) right bottom / 100% 100% no-repeat; mask: url(/art/v-palm.png) right bottom / 100% 100% no-repeat; }
.sp-art-jeep { right: 250px; bottom: 11px; height: 36px; aspect-ratio: 92 / 36; opacity: .42; -webkit-mask: url(/art/v-jeepney.png) right bottom / 100% 100% no-repeat; mask: url(/art/v-jeepney.png) right bottom / 100% 100% no-repeat; }
.sp-art-road { left: auto; right: 0; bottom: 10px; width: 46%; height: 2px; opacity: .22; background: repeating-linear-gradient(90deg, #4f5b82 0 12px, transparent 12px 22px) !important; -webkit-mask: linear-gradient(90deg, transparent, #000 40%); mask: linear-gradient(90deg, transparent, #000 40%); }
.sp-lb { position: fixed; inset: 0; z-index: 4; display: grid; place-items: center; padding: 28px; background: rgba(10, 25, 47, .74); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.sp-lb img { max-width: min(560px, 100%); max-height: 100%; border-radius: 22px; background: #fff; box-shadow: 0 30px 80px rgba(0, 0, 0, .5); }
.sp-lb-x { position: fixed; top: 18px; right: 18px; }
@media (max-width: 860px) {
  .sp-box { padding: 30px 20px 22px; }
  .sp-split { grid-template-columns: 1fr; }
  .sp-art-luneta { right: 12px; height: 78px; opacity: .24; }
  .sp-art-palm { right: 160px; opacity: .24; }
  .sp-art-jeep { right: 196px; opacity: .34; }
}
@media (max-width: 560px) {
  .sp-overlay { align-items: end; padding: 10px 0 0; }
  .sp-box { width: 100%; border-radius: 26px 26px 0 0; padding: 26px 12px 14px; transform: translateY(24px); }
  .sp-x { top: 12px; right: 12px; }
  .sp-head { padding: 0 8px; margin-bottom: 18px; padding-right: 44px; }
  .sp-lede { font-size: 15px; }
  .sp-card { padding: 18px 16px; }
  .sp-plate { width: min(250px, 100%); }
  .sp-pills { flex-wrap: wrap; }
  .sp-pill { flex: 1 1 calc(25% - 6px); }
  .sp-pill-custom { flex: 1 1 100%; }
  .sp-amount-input { font-size: 38px; }
  .sp-note { padding: 18px 18px 86px; }
  .sp-art-luneta { height: 62px; right: 10px; }
  .sp-art-palm { right: 130px; height: 50px; }
  .sp-art-jeep { right: 156px; height: 30px; }
}
@media (prefers-reduced-motion: reduce) { .sp-overlay, .sp-box, .sp-pill, .sp-field { transition: none; } }

/* ===== Contact & feedback modal — premium pass (scoped to .ct-box) ===== */
.sup-overlay { background: rgba(10, 25, 47, .42); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.ct-box { width: min(540px, 100%); padding: 38px 34px 28px; border-radius: 28px; overflow: hidden;
  background: radial-gradient(420px 240px at 0% 0%, rgba(0, 56, 168, .08), rgba(0, 56, 168, 0) 70%), radial-gradient(380px 220px at 100% 0%, rgba(252, 209, 22, .16), rgba(252, 209, 22, 0) 70%), radial-gradient(rgba(0, 56, 168, .08) 1px, transparent 1.2px) 0 0 / 22px 22px, var(--bg);
  box-shadow: var(--shadow-glow); }
.ct-box .sup-x { top: 16px; right: 16px; width: 36px; height: 36px; border: 0; background: rgba(13, 34, 64, .06); color: var(--ink-2); transition: background .15s, transform .15s; }
.ct-box .sup-x:hover { background: rgba(13, 34, 64, .1); transform: scale(1.05); }
.ct-box .sup-head { margin: 0 auto 26px; max-width: 420px; }
.ct-box .sup-heart, .ct-done .sup-heart { width: 56px; height: 56px; border-radius: 17px; margin-bottom: 16px; background: linear-gradient(180deg, #1a55d0, var(--brand)); color: #fff; box-shadow: 0 12px 24px -10px rgba(0, 56, 168, .6), inset 0 1px 0 rgba(255, 255, 255, .25); }
.ct-box .sup-heart .ic, .ct-done .sup-heart .ic { width: 24px; height: 24px; stroke: currentColor; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.ct-box .sup-head h2, .ct-done h2 { margin: 0 0 8px; font-size: 31px; font-weight: 800; letter-spacing: -.03em; line-height: 1.1; }
.ct-box .sup-head p { color: var(--muted); font-size: 15.5px; line-height: 1.5; text-wrap: balance; }
.ct-form { gap: 20px; }
.ct-form .field { position: relative; margin: 0; }
.ct-form .label { display: block; margin: 0 0 8px 2px; font-size: 12px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.ct-kinds { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ct-kind { position: relative; justify-content: flex-start; gap: 12px; padding: 10px 14px 10px 10px; min-height: 54px; border-radius: 16px; border: 1px solid var(--line-2); background: rgba(255, 255, 255, .85); font-size: 14.5px; font-weight: 700; color: var(--ink); cursor: pointer; box-shadow: var(--shadow-sm); transition: border-color .18s var(--ease), background .18s var(--ease), box-shadow .18s var(--ease), transform .18s var(--ease); }
.ct-kind .ic { flex: none; box-sizing: content-box; width: 18px; height: 18px; padding: 8px; border-radius: 11px; background: var(--brand-50); color: var(--brand); transition: background .18s var(--ease), color .18s var(--ease); }
.ct-kind:hover { transform: translateY(-1px); border-color: rgba(0, 56, 168, .3); box-shadow: 0 8px 20px -12px rgba(0, 56, 168, .4); }
.ct-kind:active { transform: scale(.985); }
.ct-kind.on { background: #fff; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(0, 56, 168, .14), 0 8px 20px -12px rgba(0, 56, 168, .5); color: var(--brand); }
.ct-kind.on .ic { background: var(--brand); color: #fff; }
.ct-kind:focus-visible { outline: 3px solid rgba(0, 56, 168, .4); outline-offset: 2px; }
.ct-form input[type="text"], .ct-form input[type="email"], .ct-form input:not([type]), .ct-form textarea { width: 100%; padding: 14px 16px; border-radius: 15px; border: 1px solid var(--line-2); background: rgba(255, 255, 255, .92); font: inherit; font-size: 15.5px; color: var(--ink); box-shadow: var(--shadow-sm); transition: border-color .15s, box-shadow .15s; }
.ct-form input::placeholder, .ct-form textarea::placeholder { color: #98a4ba; }
.ct-form input:focus, .ct-form textarea:focus { outline: 0; border-color: var(--brand); box-shadow: 0 0 0 4px rgba(0, 56, 168, .12); }
.ct-form textarea { min-height: 136px; padding-bottom: 34px; resize: none; line-height: 1.5; }
.ct-count { position: absolute; right: 14px; bottom: 11px; align-self: auto; font-size: 12px; font-variant-numeric: tabular-nums; color: #8a96ad; pointer-events: none; }
.ct-count.warn { color: #b45309; font-weight: 700; }
.ct-biz { padding: 16px; border-radius: 18px; background: rgba(255, 255, 255, .7); border: 1px solid var(--line); gap: 14px; }
.ct-check { display: inline-flex; align-items: center; gap: 11px; margin: -4px 0 0; font-size: 14.5px; font-weight: 600; color: var(--ink-2); cursor: pointer; width: fit-content; user-select: none; }
.ct-check input { appearance: none; -webkit-appearance: none; flex: none; width: 24px; height: 24px; margin: 0; border-radius: 8px; border: 1.5px solid #b9c4d8; background: #fff center / 14px no-repeat; cursor: pointer; transition: background-color .16s var(--ease), border-color .16s var(--ease), box-shadow .16s var(--ease); }
.ct-check:hover input { border-color: var(--brand); }
.ct-check input:checked { background-color: var(--brand); border-color: var(--brand); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.500l4.500 4.500L19 7'/%3E%3C/svg%3E"); }
.ct-check input:focus-visible { outline: 3px solid rgba(0, 56, 168, .4); outline-offset: 2px; }
.ct-form .error { margin: -6px 2px 0; padding: 10px 14px; border-radius: 12px; background: var(--red-50); color: var(--red); font-size: 13.5px; font-weight: 600; }
.ct-form .btn-primary { width: 100%; min-height: 56px; margin-top: 2px; font-size: 16.5px; border-radius: 999px; }
.ct-note { margin: -4px 0 0; font-size: 13px; color: var(--muted); text-align: center; }
.ct-done { padding: 22px 0 6px; }
.ct-done p { color: var(--muted); }
@media (max-width: 560px) {
  .ct-box { padding: 30px 18px 18px; }
  .ct-box .sup-head h2 { font-size: 27px; }
  .ct-kind { padding-right: 10px; font-size: 14px; gap: 9px; }
}
@media (prefers-reduced-motion: reduce) { .ct-kind, .ct-check input { transition: none; } }

/* ===== Compact pass: Support KaSabay + Contact & feedback (also "Advertise with us") ===== */
.sp-overlay { padding: 16px; }
.sp-box, .ct-box { max-height: calc(100vh - 32px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(13,34,64,.2) transparent; }
/* Support */
.sp-box { width: min(840px, 100%); padding: 24px 26px 20px; border-radius: 24px; }
.sp-x { top: 14px; right: 14px; width: 34px; height: 34px; font-size: 15px; }
.sp-head { margin: 0 0 16px; max-width: 600px; }
.sp-eyebrow { font-size: 11px; margin-bottom: 4px; }
.sp-head h2 { margin: 0 0 6px; font-size: clamp(26px, 3.3vw, 32px); }
.sp-lede { font-size: 14.5px; line-height: 1.5; }
.sp-split { grid-template-columns: 1.12fr 1fr; gap: 14px; }
.sp-card { padding: 16px 18px 16px; border-radius: 18px; box-shadow: 0 6px 20px rgba(13, 34, 64, .05); }
.sp-card-head { min-height: 30px; }
.sp-logo .sp-ic { height: 26px; }
.sp-logo-paypal .sp-ic { height: 28px; }
.sp-tag { font-size: 10.5px; padding: 4px 9px; }
.sp-card-title { margin: 10px 0 2px; font-size: 17px; }
.sp-card-sub { font-size: 13px; line-height: 1.45; }
.sp-gcash { display: grid; grid-template-columns: 188px minmax(0, 1fr); column-gap: 16px; align-content: start; }
.sp-gcash .sp-card-head, .sp-gcash .sp-card-title { grid-column: 1 / -1; }
.sp-gcash .sp-plate { grid-column: 1; grid-row: 3 / span 3; align-self: start; margin: 12px 0 0; width: 100%; padding: 6px; border-radius: 16px; }
.sp-gcash .sp-card-sub { grid-column: 2; grid-row: 3; margin-top: 14px; }
.sp-gcash .sp-actions { grid-column: 2; grid-row: 4; flex-direction: column; align-items: stretch; gap: 8px; margin-top: 12px; }
.sp-gcash .sp-fine { grid-column: 2; grid-row: 5; margin: 10px 0 0; text-align: left; font-size: 12px; line-height: 1.4; }
.sp-qrcrop { border-radius: 11px; }
.sp-qrcrop::after { border-radius: 0 0 11px 11px; }
.sp-btn { min-height: 36px; padding: 6px 12px; font-size: 13px; }
.sp-btn .sp-ic { font-size: 15px; }
.sp-field { margin: 12px 0 0; padding: 8px 14px 6px; border-radius: 14px; }
.sp-field-lab { font-size: 10.5px; }
.sp-cur { font-size: 22px; }
.sp-amount-input { font-size: 34px; line-height: 1.15; }
.sp-unit { font-size: 12px; }
.sp-amount-hint { margin: 6px 2px 10px; min-height: 16px; font-size: 12px; }
.sp-pills { gap: 5px; margin-bottom: 12px; }
.sp-pill { min-height: 34px; padding: 6px 6px; font-size: 13.5px; }
.sp-donate { min-height: 46px; font-size: 15px; }
.sp-secure { margin: 8px 0 0; font-size: 12px; }
.sp-why { margin: 12px 0 0; padding: 12px 0 0; gap: 6px; border-top: 1px solid var(--line); }
.sp-why li { font-size: 12.5px; gap: 8px; }
.sp-tick { width: 18px; height: 18px; font-size: 10px; }
.sp-note { margin-top: 14px; padding: 14px 18px; min-height: 76px; border-radius: 16px; }
.sp-note-t { max-width: 470px; }
.sp-note-t strong { font-size: 14.5px; margin-bottom: 2px; }
.sp-note-t p { font-size: 12.5px; line-height: 1.5; }
.sp-art-luneta { right: 22px; bottom: 8px; height: 60px; }
.sp-art-palm { right: 150px; bottom: 8px; height: 46px; }
.sp-art-jeep { right: 176px; bottom: 8px; height: 26px; }
.sp-art-road { bottom: 7px; }
/* Contact (and Advertise with us, which opens the same form) */
.ct-box { width: min(430px, 100%); padding: 26px 24px 18px; border-radius: 24px; }
.ct-box .sup-x { top: 12px; right: 12px; width: 30px; height: 30px; font-size: 14px; }
.ct-box .sup-head { margin: 0 auto 16px; max-width: 340px; }
.ct-box .sup-heart, .ct-done .sup-heart { width: 42px; height: 42px; border-radius: 13px; margin-bottom: 10px; }
.ct-box .sup-heart .ic, .ct-done .sup-heart .ic { width: 20px; height: 20px; }
.ct-box .sup-head h2, .ct-done h2 { margin: 0 0 5px; font-size: 24px; }
.ct-box .sup-head p { font-size: 13.5px; line-height: 1.45; }
.ct-form { gap: 13px; }
.ct-form .label { margin: 0 0 6px 2px; font-size: 10.5px; }
.ct-kinds { gap: 8px; }
.ct-kind { min-height: 42px; padding: 6px 10px 6px 7px; gap: 9px; border-radius: 13px; font-size: 13.5px; }
.ct-kind .ic { width: 15px; height: 15px; padding: 6px; border-radius: 9px; }
.ct-form input[type="text"], .ct-form input[type="email"], .ct-form input:not([type]), .ct-form textarea { padding: 10px 13px; border-radius: 12px; font-size: 14px; }
.ct-form textarea { min-height: 88px; padding-bottom: 26px; }
.ct-count { right: 11px; bottom: 8px; font-size: 11px; }
.ct-biz { padding: 12px; border-radius: 14px; gap: 10px; }
.ct-biz-note { font-size: 12px; line-height: 1.45; }
.ct-check { gap: 9px; margin: -2px 0 0; font-size: 13.5px; }
.ct-check input { width: 20px; height: 20px; border-radius: 6px; background-size: 12px; }
.ct-form .error { padding: 8px 12px; font-size: 12.5px; }
.ct-form .btn-primary { min-height: 46px; font-size: 15px; }
.ct-note { margin: -2px 0 0; font-size: 12px; }
.ct-done { padding: 14px 0 4px; }
@media (max-width: 860px) {
  .sp-box { width: min(560px, 100%); }
  .sp-split { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .sp-overlay { padding: 8px 0 0; }
  .sp-box, .ct-box { max-height: 94vh; width: 100%; border-radius: 22px 22px 0 0; padding: 20px 14px 14px; }
  .sp-gcash { grid-template-columns: 150px minmax(0, 1fr); column-gap: 12px; }
  .sp-card { padding: 14px; }
  .sp-art-luneta { right: 8px; height: 50px; } .sp-art-palm { right: 112px; height: 38px; } .sp-art-jeep { right: 134px; height: 22px; }
  .sp-note { padding: 14px 14px 66px; }
  .ct-box .sup-head h2 { font-size: 22px; }
}

/* compact pass 2 */
.sp-box { width: min(800px, 100%); }
.sp-gcash { grid-template-columns: 214px minmax(0, 1fr); align-content: center; }
.sp-amount-input { font-size: 30px; }
.sp-field { margin-top: 10px; padding: 7px 14px 4px; }
.sp-amount-hint { margin: 5px 2px 8px; }
.sp-why { grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 10px 0 0; padding: 10px 0 0; }
.sp-why li { flex-direction: column; align-items: flex-start; gap: 5px; font-size: 11.5px; line-height: 1.3; font-weight: 600; }
.sp-secure { margin-top: 7px; }
.ct-form { gap: 11px; }
.ct-kind { min-height: 38px; }
.ct-form textarea { min-height: 72px; }
.ct-box .sup-head { margin-bottom: 13px; }
.ct-box .sup-heart, .ct-done .sup-heart { width: 38px; height: 38px; margin-bottom: 8px; }
.ct-box { padding-top: 22px; }
@media (max-width: 560px) { .sp-gcash { grid-template-columns: 150px minmax(0, 1fr); } }

/* compact pass 3: GCash card stacked, QR plate compact */
.sp-gcash { display: flex; flex-direction: column; align-content: normal; }
.sp-gcash .sp-card-sub { margin-top: 0; }
.sp-gcash .sp-plate { align-self: center; width: min(226px, 100%); margin: 12px 0 12px; }
.sp-gcash .sp-actions { flex-direction: row; justify-content: center; margin-top: 0; }
.sp-gcash .sp-fine { text-align: center; margin: 10px 0 0; }
@media (max-width: 560px) { .sp-gcash { display: flex; } .sp-gcash .sp-plate { width: min(210px, 100%); } }

.ct-form textarea { height: 84px; min-height: 84px; }
.sp-gcash .sp-plate { width: min(206px, 100%); margin: 10px 0 10px; }
.sp-head { margin-bottom: 14px; }
.sp-card-title { margin-top: 8px; }

/* ---------- Footer design credit: macOS-style popover ---------- */
.wd-wrap .wd-trigger { font-size: 12.5px; font-weight: 500; color: var(--brand); letter-spacing: 0; transition: opacity 0.18s ease, color 0.18s ease; }
.wd-wrap .wd-trigger:hover, .wd-wrap .wd-trigger[aria-expanded="true"] { color: var(--brand); opacity: 0.78; }
.wd-wrap .wd-popover {
  --wd-arrow: 50%;
  left: 0; right: auto; bottom: calc(100% + 12px);
  width: 280px; max-width: calc(100vw - 24px); min-width: 0;
  padding: 16px 16px 6px; gap: 0; align-items: stretch; white-space: normal;
  background: #fff; border: 1px solid rgba(13, 34, 64, 0.08); border-radius: 16px;
  box-shadow: 0 1px 2px rgba(10, 25, 47, 0.05), 0 18px 44px -12px rgba(10, 25, 47, 0.22), 0 0 0 0.5px rgba(10, 25, 47, 0.04);
  animation: none; opacity: 0; transform: translateY(6px) scale(0.97); transform-origin: var(--wd-arrow) 100%;
  transition: opacity 0.18s ease, transform 0.26s cubic-bezier(0.32, 0.72, 0, 1); pointer-events: none;
}
.wd-wrap .wd-popover.is-open { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.wd-arrow { position: absolute; left: var(--wd-arrow); bottom: -6px; width: 12px; height: 12px; margin-left: -6px; background: #fff; border-right: 1px solid rgba(13, 34, 64, 0.08); border-bottom: 1px solid rgba(13, 34, 64, 0.08); border-bottom-right-radius: 3px; transform: rotate(45deg); }
.wd-head { display: flex; align-items: center; gap: 12px; }
.wd-ico { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--brand-50, #eaf1ff); color: var(--brand); }
.wd-ico svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.wd-id { display: grid; gap: 1px; min-width: 0; }
.wd-wrap .wd-name { font-size: 15px; font-weight: 700; letter-spacing: -0.015em; color: var(--ink); line-height: 1.25; }
.wd-role { font-size: 12.5px; color: var(--muted); line-height: 1.3; }
.wd-wrap .wd-email { display: inline-flex; align-items: center; gap: 7px; align-self: flex-start; margin-top: 12px; padding: 0; background: none; border: 0; border-radius: 6px; font-family: var(--font-sans); font-size: 13px; font-weight: 500; color: var(--brand); }
.wd-wrap .wd-email:hover { background: none; color: var(--brand-ink, var(--brand)); text-decoration: underline; text-underline-offset: 3px; }
.wd-wrap .wd-email .ic, .wd-connect .ic { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }
.wd-bio { margin: 10px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--muted); }
.wd-sep { height: 1px; border: 0; margin: 14px -16px 0; background: rgba(13, 34, 64, 0.08); }
.wd-connect { display: flex; align-items: center; gap: 8px; margin: 0 -16px; padding: 11px 16px 12px; border-radius: 0 0 15px 15px; font-size: 13px; font-weight: 600; color: var(--brand); text-decoration: none; transition: background 0.15s ease; }
.wd-connect:hover { background: var(--brand-50, #eaf1ff); }
.wd-connect .wd-go { margin-left: auto; width: 14px; height: 14px; opacity: 0.55; transition: transform 0.2s ease, opacity 0.2s ease; }
.wd-connect:hover .wd-go { transform: translateX(2px); opacity: 0.9; }
.wd-wrap .wd-email:focus-visible, .wd-connect:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
@media (prefers-reduced-motion: reduce) { .wd-wrap .wd-popover { transition: opacity 0.01ms; transform: none; } }

/* Notifications panel: in a short window the flex column was shrinking the header and the tab row (overflow:auto lets it), so the list climbed over the pills. Only the list scrolls. */
.hub-pop .hub-head, .hub-pop .hub-tabs, .hub-pop .hub-foot { flex-shrink: 0; }

/* =====================================================================
   ADMIN CENTER — My Account visual language (v166)
   Shared tokens, pill buttons, rounded cards, calm motion.
   ===================================================================== */
.ops-shell {
  --ma-navy: #061b52; --ma-blue: #0b3fae; --ma-line: #e6ebf3; --ma-mut: #5f6f8f;
  --ad-ease: cubic-bezier(.22, 1, .36, 1);
  --ad-spring: cubic-bezier(.34, 1.4, .64, 1);
  background: linear-gradient(180deg, #f6f8fd 0, #f4f7fc 100%);
  grid-template-columns: 240px minmax(0, 1fr);
  max-width: none;
}
.ops-side { background: #fff; border-right: 1px solid var(--ma-line); padding: 20px 12px 14px; gap: 14px; }
.ops-side-logo-mark { background: linear-gradient(135deg, #0b3fae, #0a2f86); color: #fff; border-radius: 14px; box-shadow: 0 6px 14px rgba(11,63,174,.28); }
.ops-side-brand-txt strong { color: var(--ma-navy); letter-spacing: -.02em; }
.ops-side-tag { color: var(--ma-blue); background: #e6eefc; letter-spacing: .09em; }
.ops-nav-label { color: #8493ad; font-weight: 800; letter-spacing: .1em; }
.ops-nav-link { border-radius: 999px; padding: 9px 14px; color: #3d4b69; font-weight: 600; border: 1px solid transparent; transition: background .18s var(--ad-ease), color .18s, transform .18s var(--ad-ease), box-shadow .18s; }
.ops-nav-link svg { transition: transform .25s var(--ad-spring), color .18s; color: #7b8aa6; }
.ops-nav-link:hover { background: #eef3fc; color: var(--ma-blue); }
.ops-nav-link:hover svg { transform: scale(1.12); color: var(--ma-blue); }
.ops-nav-link:active { transform: scale(.98); }
.ops-nav-link.on { background: var(--ma-blue); color: #fff; border-color: transparent; box-shadow: 0 6px 16px rgba(11,63,174,.26); }
.ops-nav-link.on svg { color: #fff; }
.ops-nav-link:focus-visible { outline: 2px solid var(--ma-blue); outline-offset: 2px; }
.ops-nav-n { background: #fde8ea; color: #b0121f; border-radius: 99px; font-weight: 700; }
.ops-nav-link.on .ops-nav-n { background: rgba(255,255,255,.22); color: #fff; }
.ops-nav-live { background: #e0f6ec; color: #047857; }
.ops-nav-link.on .ops-nav-live { background: rgba(255,255,255,.2); color: #fff; }
.ops-side-foot { border-top: 1px solid var(--ma-line); }
.ops-env { border-radius: 999px; }
.ops-who-av { background: #e6eefc; color: var(--ma-blue); }
.ops-side-foot-actions .btn { border-radius: 999px; border-color: var(--ma-line); color: var(--ma-navy); font-weight: 700; transition: background .15s, border-color .15s, transform .15s var(--ad-ease); }
.ops-side-foot-actions .btn:hover { background: #eef3fc; border-color: #cfdcf5; }
.ops-side-foot-actions .btn:active { transform: scale(.97); }

.ops-topbar { background: rgba(246,248,253,.88); border-bottom: 1px solid var(--ma-line); padding: 10px clamp(16px, 2.6vw, 32px); }
.ops-crumbs { color: var(--ma-mut); }
.ops-crumbs span:last-child, .ops-crumbs strong { color: var(--ma-navy); font-weight: 700; }
.ops-topbar-alert { border-radius: 999px; font-weight: 700; }
.ops-topbar-quick { border-radius: 999px; border: 1px solid var(--ma-line); background: #fff; color: var(--ma-navy); font-weight: 700; transition: background .15s, border-color .15s, transform .15s var(--ad-ease); }
.ops-topbar-quick:hover { background: #eef3fc; border-color: #cfdcf5; color: var(--ma-blue); }
.ops-topbar-quick:active { transform: scale(.97); }
.ops-main { padding: 0; }
.admin-panel-body { padding: clamp(18px, 2.4vw, 30px) clamp(16px, 2.6vw, 32px) 56px; max-width: 1360px; width: 100%; animation: ad-rise .45s var(--ad-ease) both; }
@keyframes ad-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Page heading (same hierarchy as My Account) */
.ops-shell .oc-head { margin: 0 0 22px; align-items: flex-end; }
.ops-shell .oc-head-text h2 { font-size: clamp(28px, 3.4vw, 40px); line-height: 1.08; letter-spacing: -.03em; font-weight: 800; color: var(--ma-navy); margin: 0; }
.ops-shell .oc-head-text p { font-size: 16px; color: var(--ma-mut); margin: 8px 0 0; max-width: 64ch; }

/* Buttons: pill, calm hover/press */
.ops-shell .btn { border-radius: 999px; font-weight: 700; transition: background .15s, border-color .15s, box-shadow .15s, transform .15s var(--ad-ease), filter .15s; }
.ops-shell .btn:active { transform: scale(.97); }
.ops-shell .btn-ghost { background: #fff; border: 1px solid var(--ma-line); color: var(--ma-navy); box-shadow: 0 2px 8px rgba(13,34,64,.05); }
.ops-shell .btn-ghost:hover { background: #eef3fc; border-color: #cfdcf5; color: var(--ma-blue); }
.ops-shell .btn-primary { background: var(--ma-blue); border-color: var(--ma-blue); box-shadow: 0 6px 16px rgba(11,63,174,.24); }
.ops-shell .btn-primary:hover { filter: brightness(1.08); }

/* Cards */
.ops-shell .card, .ops-shell .ops-card { border: 1px solid var(--ma-line); border-radius: 20px; box-shadow: 0 8px 26px rgba(13,34,64,.05); background: #fff; }
.ops-shell .ops-card-head strong { color: var(--ma-navy); font-size: 17px; letter-spacing: -.01em; }
.ops-shell .oc-pill { border-radius: 999px; font-weight: 700; }
.ops-shell .ops-table th { color: #8493ad; border-bottom-color: var(--ma-line); letter-spacing: .07em; }
.ops-shell .ops-table td { border-bottom-color: #eef2f8; }
.ops-shell .ops-table tbody tr { transition: background .15s; }
.ops-shell .ops-table tbody tr:hover { background: #f5f8fe; }
.ops-shell .ops-list li { transition: background .15s; }

/* Triage + KPI cards in the My Account stat style */
.ops-shell .oc-triage-banner { border-radius: 20px; }
.ops-shell .oc-exec-kpi-card { border: 1px solid var(--ma-line); border-radius: 20px; box-shadow: 0 8px 26px rgba(13,34,64,.05); transition: box-shadow .2s var(--ad-ease), border-color .2s, transform .2s var(--ad-ease); }
.ops-shell .oc-exec-kpi-card:hover { border-color: #cfdcf5; box-shadow: 0 14px 34px rgba(13,34,64,.09); transform: translateY(-2px); }
.ops-shell .oc-exec-kpi-val { font-size: 30px; color: var(--ma-navy); letter-spacing: -.02em; }
.ops-shell .oc-exec-kpi-ic { border-radius: 50%; width: 38px; height: 38px; }

/* ---------- Analytics (dashboard) ---------- */
.ad-analytics { display: grid; gap: 18px; margin: 4px 0 18px; }
.ad-loading { display: flex; align-items: center; gap: 10px; color: var(--ma-mut); padding: 24px 4px; }
.ad-periodbar { display: flex; align-items: center; justify-content: space-between; gap: 12px 18px; flex-wrap: wrap; }
.ad-periodlbl { display: grid; line-height: 1.15; }
.ad-periodlbl .ma-eyebrow { display: block; font-size: 12.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--ma-blue); }
.ad-periodlbl strong { font-size: 20px; color: var(--ma-navy); letter-spacing: -.02em; }
.ad-seg { display: inline-flex; padding: 4px; gap: 2px; background: #fff; border: 1px solid var(--ma-line); border-radius: 999px; box-shadow: 0 2px 8px rgba(13,34,64,.05); }
.ad-seg button { border: 0; background: transparent; padding: 8px 16px; border-radius: 999px; font: inherit; font-size: 14px; font-weight: 700; color: #3d4b69; cursor: pointer; transition: background .2s var(--ad-ease), color .2s, transform .15s var(--ad-ease); }
.ad-seg button:hover { color: var(--ma-blue); background: #eef3fc; }
.ad-seg button:active { transform: scale(.96); }
.ad-seg button.on { background: var(--ma-blue); color: #fff; box-shadow: 0 4px 12px rgba(11,63,174,.28); }
.ad-seg button:focus-visible { outline: 2px solid var(--ma-blue); outline-offset: 2px; }
.ad-range { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; width: 100%; justify-content: flex-end; color: var(--ma-mut); font-size: 14px; animation: ad-rise .3s var(--ad-ease) both; }
.ad-range input[type="date"] { height: 40px; border: 1px solid var(--ma-line); border-radius: 999px; padding: 0 14px; font: inherit; font-size: 14px; color: var(--ma-navy); background: #fff; }
.ad-range input[type="date"]:focus { outline: 2px solid var(--ma-blue); outline-offset: 1px; }
.ad-apply { height: 40px; padding: 0 18px; }
.ad-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.ad-kpi { display: flex; align-items: center; gap: 14px; padding: 16px 18px; background: #fff; border: 1px solid var(--ma-line); border-radius: 20px; box-shadow: 0 8px 26px rgba(13,34,64,.05); text-decoration: none; color: inherit; min-width: 0; transition: box-shadow .2s var(--ad-ease), border-color .2s, transform .2s var(--ad-ease); }
.ad-kpi:hover { border-color: #cfdcf5; box-shadow: 0 14px 34px rgba(13,34,64,.09); transform: translateY(-2px); }
.ad-kpi:active { transform: scale(.99); }
.ad-kpi-ic { flex: none; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; color: var(--c); background: color-mix(in srgb, var(--c) 12%, #fff); }
.ad-kpi-t { flex: 1; min-width: 0; display: grid; line-height: 1.2; gap: 1px; }
.ad-kpi-t em { font-style: normal; font-size: 13.5px; font-weight: 600; color: var(--ma-mut); }
.ad-kpi-t strong { font-size: 28px; font-weight: 800; color: var(--ma-navy); letter-spacing: -.02em; }
.ad-kpi-t small { font-size: 12.5px; color: #8493ad; line-height: 1.3; }
.ad-kpi-t small.up { color: #0f7a4d; font-weight: 700; }
.ad-kpi-t small.down { color: #b0121f; font-weight: 700; }
.ad-kpi-sp { flex: none; width: 64px; }
.ad-kpi-t em { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ad-feed-ic svg { display: block; }
.ad-spark { width: 100%; height: 34px; display: block; }
.ad-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.ad-card { background: #fff; border: 1px solid var(--ma-line); border-radius: 22px; box-shadow: 0 10px 30px rgba(13,34,64,.05); padding: 22px; min-width: 0; display: grid; gap: 14px; align-content: start; animation: ad-rise .5s var(--ad-ease) both; }
.ad-wide { grid-column: 1 / -1; }
.ad-card-h { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px 14px; flex-wrap: wrap; }
.ad-card-h h3 { margin: 0; font-size: 18px; letter-spacing: -.015em; color: var(--ma-navy); }
.ad-card-h p { margin: 3px 0 0; font-size: 13.5px; color: var(--ma-mut); }
.ad-tabs { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.ad-tabs button { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--ma-line); background: #fff; border-radius: 999px; padding: 6px 13px; font: inherit; font-size: 13px; font-weight: 700; color: #3d4b69; cursor: pointer; transition: background .18s, border-color .18s, color .18s, transform .15s var(--ad-ease); }
.ad-tabs button i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.ad-tabs button:hover { border-color: #cfdcf5; background: #eef3fc; }
.ad-tabs button:active { transform: scale(.96); }
.ad-tabs button.on { background: #e6eefc; border-color: #cfdcf5; color: var(--ma-blue); }
.ad-chart { position: relative; }
.ad-stage { position: relative; width: 100%; min-height: 210px; }
.ad-stage svg { display: block; width: 100%; height: auto; overflow: visible; }
.ad-hit { outline: none; cursor: crosshair; }
.ad-draw { animation: ad-draw 1s var(--ad-ease) .05s forwards; }
@keyframes ad-draw { to { stroke-dashoffset: 0; } }
.ad-fade { animation: ad-fade .9s ease .2s both; }
@keyframes ad-fade { from { opacity: 0; } to { opacity: 1; } }
.ad-bar { transform-box: fill-box; transform-origin: bottom; animation: ad-grow .6s var(--ad-spring) both; }
@keyframes ad-grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.ad-tip { position: absolute; z-index: 5; min-width: 150px; padding: 10px 12px; background: var(--ma-navy); color: #fff; border-radius: 14px; box-shadow: 0 12px 28px rgba(6,27,82,.3); font-size: 13px; pointer-events: none; display: grid; gap: 4px; animation: ad-fade .12s ease both; }
.ad-tip[hidden] { display: none; }
.ad-tip strong { font-size: 12.5px; color: #cfdcf5; font-weight: 700; margin-bottom: 2px; }
.ad-tip-row { display: flex; align-items: center; gap: 8px; }
.ad-tip-row i { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.ad-tip-row span { flex: 1; color: #e6eefc; }
.ad-tip-row b { font-variant-numeric: tabular-nums; }
.ad-empty { display: grid; justify-items: center; text-align: center; gap: 4px; padding: 26px 12px; color: var(--ma-mut); }
.ad-empty-ic { width: 46px; height: 46px; border-radius: 50%; background: #e6eefc; color: var(--ma-blue); display: grid; place-items: center; margin-bottom: 6px; }
.ad-empty strong { color: var(--ma-navy); font-size: 15.5px; }
.ad-empty p { margin: 0; font-size: 13.5px; max-width: 38ch; }
.ad-bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.ad-bar-t { display: flex; justify-content: space-between; gap: 10px; font-size: 14px; color: var(--ma-navy); font-weight: 600; margin-bottom: 6px; }
.ad-bar-t span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ad-bar-t b { font-variant-numeric: tabular-nums; color: var(--ma-blue); font-weight: 800; flex: none; }
.ad-bar-track { height: 9px; border-radius: 99px; background: #eef2f9; overflow: hidden; }
.ad-bar-track i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #0b3fae, #3b82f6); transform-origin: left; animation: ad-grow-x .7s var(--ad-ease) both; }
.ad-bar-track i.amber { background: linear-gradient(90deg, #f59e0b, #fbbf24); }
@keyframes ad-grow-x { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.ad-bars small { display: block; margin-top: 5px; font-size: 12.5px; color: #8493ad; }
.ad-bars-sm { gap: 10px; }
.ad-bars-sm .ad-bar-t { margin-bottom: 4px; }
.ad-rate { display: grid; grid-template-columns: auto 1fr; gap: 22px; align-items: center; }
.ad-rate-avg { display: grid; justify-items: center; line-height: 1; padding: 6px 4px; }
.ad-rate-avg strong { font-size: 44px; font-weight: 800; color: var(--ma-navy); letter-spacing: -.03em; }
.ad-rate-avg span { color: #f59e0b; font-size: 22px; margin: 2px 0 6px; }
.ad-rate-avg small { color: var(--ma-mut); font-size: 12.5px; }
.ad-feed { list-style: none; margin: 0; padding: 0; display: grid; }
.ad-feed li { display: flex; align-items: center; gap: 12px; padding: 11px 6px; border-bottom: 1px solid #eef2f8; border-radius: 12px; transition: background .15s; }
.ad-feed li:last-child { border-bottom: 0; }
.ad-feed li:hover { background: #f5f8fe; }
.ad-feed li > div { flex: 1; min-width: 0; font-size: 14px; color: var(--ma-mut); }
.ad-feed li > div strong { color: var(--ma-navy); }
.ad-feed li small { color: #8493ad; font-size: 12.5px; white-space: nowrap; }
.ad-feed-ic { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: #e6eefc; color: var(--ma-blue); }
.ad-feed-ic.k-booking { background: #dcf5ee; color: #0d7a6e; }
.ad-feed-ic.k-member { background: #ece8fb; color: #5b49c4; }
.ad-feed-ic.k-review { background: #fdf0d5; color: #b45309; }
.ad-feed-ic.k-report { background: #fde8ea; color: #b0121f; }

@media (max-width: 1180px) { .ad-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 980px) { .ops-shell { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 860px) { .ad-grid { grid-template-columns: minmax(0, 1fr); } .ad-range { justify-content: flex-start; } }
@media (max-width: 560px) {
  .ad-kpis { grid-template-columns: minmax(0, 1fr); }
  .ad-card { padding: 18px 16px; border-radius: 20px; }
  .ad-seg { width: 100%; overflow-x: auto; scrollbar-width: none; }
  .ad-seg button { flex: 1; padding: 8px 10px; white-space: nowrap; }
  .ad-rate { grid-template-columns: 1fr; gap: 10px; }
  .ad-kpi-sp { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .admin-panel-body, .ad-card, .ad-range, .ad-draw, .ad-fade, .ad-bar, .ad-bar-track i { animation: none !important; stroke-dashoffset: 0; }
  .ops-shell * { transition-duration: .01ms !important; }
}
@media (max-width: 560px) { .ops-crumb-root, .ops-crumbs .sep:first-of-type { display: none; } .ops-topbar { flex-wrap: wrap; } }
.ops-shell .ops-nav-link.on .ic, .ops-shell .ops-nav-link.on svg { color: #fff; }
.ops-shell .ops-nav-link:not(.on):hover .ic { color: var(--ma-blue); }

/* =====================================================================
   MESSAGES — premium messenger (v168). Namespace: mx-*
   ===================================================================== */
.msg-root { --mx-navy: #061b52; --mx-blue: #0b3fae; --mx-line: #e6ebf3; --mx-mut: #5f6f8f; --mx-soft: #8493ad; --mx-bg: #f3f6fc; --mx-ease: cubic-bezier(.22, 1, .36, 1); --mx-spring: cubic-bezier(.34, 1.4, .64, 1); }
.mx-pagehead { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; margin: 0 0 14px; }
.mx-pagehead p { display: none; }
.mx-pagehead .mx-eyebrow { margin-bottom: 2px; }
.mx-eyebrow { display: block; font-size: 12.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--mx-blue); margin-bottom: 4px; }
.mx-pagehead h2 { margin: 0; font-size: clamp(28px, 3.2vw, 38px); line-height: 1.05; letter-spacing: -.03em; font-weight: 800; color: var(--mx-navy); }
.mx-pagehead p { margin: 6px 0 0; font-size: 15.5px; color: var(--mx-mut); }

.mx-shell { scroll-margin-top: 120px; position: relative; display: grid; grid-template-columns: minmax(310px, 372px) minmax(0, 1fr); height: clamp(560px, calc(100vh - 236px), 880px); background: #fff; border: 1px solid var(--mx-line); border-radius: 24px; box-shadow: 0 14px 40px rgba(13, 34, 64, .07); overflow: hidden; }
.mx-listcol { overflow: hidden; display: flex; flex-direction: column; min-height: 0; min-width: 0; border-right: 1px solid var(--mx-line); background: #fbfcff; }
.mx-listhead { flex: none; padding: 18px 16px 8px; display: grid; gap: 12px; border-bottom: 1px solid var(--mx-line); background: rgba(255, 255, 255, .92); }
.mx-lh-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.mx-lh-top h3 { margin: 0; font-size: 22px; letter-spacing: -.025em; color: var(--mx-navy); }
.mx-lh-act { display: flex; align-items: center; gap: 6px; }
.mx-lh-act .btn { height: 36px; padding: 0 14px; }
.mx-iconbtn { position: relative; flex: none; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--mx-line); background: #fff; color: var(--mx-navy); display: inline-grid; place-items: center; cursor: pointer; padding: 0; transition: background .18s, border-color .18s, color .18s, transform .18s var(--mx-spring); }
.mx-iconbtn:hover { background: #eef3fc; border-color: #cfdcf5; color: var(--mx-blue); }
.mx-iconbtn:active { transform: scale(.92); }
.mx-iconbtn.on { background: #e6eefc; border-color: #cfdcf5; color: var(--mx-blue); }
.mx-iconbtn:focus-visible, .mx-btn:focus-visible, .mx-tab:focus-visible, .mx-row:focus-visible, .mx-send:focus-visible { outline: 2px solid var(--mx-blue); outline-offset: 2px; }
.mx-iconbtn[data-n]:not([data-n=""])::after { content: attr(data-n); position: absolute; top: -4px; right: -4px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 99px; background: var(--mx-blue); color: #fff; font-size: 10.5px; font-weight: 800; display: grid; place-items: center; }
.mx-search { position: relative; display: flex; align-items: center; }
.mx-search .ic { position: absolute; left: 14px; color: var(--mx-soft); pointer-events: none; }
.mx-search input { width: 100%; height: 42px; border-radius: 999px; border: 1px solid transparent; background: var(--mx-bg); padding: 0 16px 0 40px; font: inherit; font-size: 14.5px; color: var(--mx-navy); transition: background .2s, border-color .2s, box-shadow .2s; }
.mx-search input:focus { outline: none; background: #fff; border-color: #b9c9ea; box-shadow: 0 0 0 4px rgba(11, 63, 174, .1); }
.mx-listhead, .mx-listhead > * { min-width: 0; }
.mx-filters select, .mx-filters .msg-select { width: 100%; min-width: 0; max-width: 100%; height: 36px; border-radius: 999px; font-size: 13.5px; }
.mx-filters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 12px; background: var(--mx-bg); border-radius: 18px; animation: mx-drop .28s var(--mx-ease) both; }
.mx-filters[hidden] { display: none; }
.mx-filters label { display: grid; gap: 4px; font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--mx-soft); }
.mx-filters-row { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.mx-filters .chip-btn { border-radius: 999px; }
.mx-link { border: 0; background: none; font: inherit; font-size: 13.5px; font-weight: 700; color: var(--mx-blue); cursor: pointer; padding: 4px 8px; }
@keyframes mx-drop { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.mx-select { width: 100%; height: 36px; border-radius: 999px; border: 1px solid var(--mx-line); background: #fff; padding: 0 12px; font: inherit; font-size: 13.5px; font-weight: 600; color: var(--mx-navy); text-transform: none; letter-spacing: 0; cursor: pointer; }
.mx-select:disabled { opacity: .55; cursor: not-allowed; }
.mx-select:focus { outline: 2px solid var(--mx-blue); outline-offset: 1px; }
.mx-prio-high { color: #b0121f; border-color: #f3c3c8; background: #fff6f6; }
.mx-prio-low { color: #5f6f8f; }

.mx-listhead .chips { display: flex; flex-wrap: wrap; gap: 4px; padding: 0 0 4px; margin: 0 -4px; }
.mx-listhead .chips::-webkit-scrollbar { display: none; }
.mx-tab { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: 999px; border: 1px solid transparent; background: transparent; font: inherit; font-size: 13.5px; font-weight: 700; color: #3d4b69; cursor: pointer; transition: background .18s, color .18s, transform .15s var(--mx-spring); }
.mx-tab:hover { background: #eef3fc; color: var(--mx-blue); }
.mx-tab:active { transform: scale(.96); }
.mx-tab.on { background: var(--mx-blue); color: #fff; box-shadow: 0 4px 12px rgba(11, 63, 174, .25); }
.mx-tab .tab-n { min-width: 19px; height: 19px; padding: 0 6px; border-radius: 99px; background: #fde8ea; color: #b0121f; font-size: 11.5px; font-weight: 800; display: inline-grid; place-items: center; }
.mx-tab.on .tab-n { background: rgba(255, 255, 255, .25); color: #fff; }
.mx-lh-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; font-size: 12.5px; color: var(--mx-soft); min-height: 24px; }
.mx-lh-meta .msg-selectall { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--mx-mut); cursor: pointer; }
.mx-lh-meta .msg-syncline { font-size: 12px; color: var(--mx-soft); margin-left: auto; }
.mx-lh-meta .msg-refresh { color: var(--mx-blue); }
.mx-listcol { position: relative; }
.mx-listcol > .msg-bulk { flex: none; display: flex; flex-wrap: nowrap; align-items: flex-start; gap: 10px; border: 0; border-radius: 0; box-shadow: none; min-width: 0; position: static; padding: 8px 12px; margin: 0; background: #e6eefc; border-bottom: 1px solid #cfdcf5; animation: mx-drop .3s var(--mx-ease) both; }
.mx-listcol > .msg-bulk[hidden] { display: none; }
.mx-listcol > .msg-bulk .msg-bulk-n { flex: none; color: var(--mx-blue); font-size: 13px; font-weight: 800; white-space: nowrap; }
.mx-listcol > .msg-bulk .msg-bulk-btns { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; gap: 6px; overflow: visible; scrollbar-width: none; padding: 2px 0; }
.mx-listcol > .msg-bulk .msg-bulk-btns::-webkit-scrollbar { display: none; }
.mx-listcol > .msg-bulk .btn, .mx-listcol > .msg-bulk .msg-select { flex: none; height: 30px; font-size: 12.5px; border-radius: 999px; white-space: nowrap; width: auto; }

.mx-rows { flex: 1; min-height: 0; overflow-y: auto; padding: 8px 8px 14px; display: grid; align-content: start; gap: 2px; }
.mx-rowwrap { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 12px; padding: 0 6px 0 10px; border-radius: 18px; transition: background .18s; animation: mx-in .35s var(--mx-ease) both; }
@keyframes mx-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.mx-rowwrap:hover { background: #f1f5fc; }
.mx-rowwrap.is-checked { background: #eaf1ff; }
.mx-lead { position: relative; padding-top: 12px; width: 46px; }
.mx-rowcheck { position: absolute; top: 12px; left: 0; width: 46px; height: 46px; margin: 0; border-radius: 50%; appearance: none; -webkit-appearance: none; border: 2px solid #b9c9ea; background: #fff; cursor: pointer; opacity: 0; transition: opacity .15s, background .15s, transform .2s var(--mx-spring); }
.mx-lead:hover .mx-rowcheck, .mx-rows.has-sel .mx-rowcheck, .mx-rowcheck:focus-visible { opacity: 1; }
.mx-rowcheck:checked { opacity: 1; background: var(--mx-blue); border-color: var(--mx-blue); }
.mx-rowcheck:checked::after { content: ""; position: absolute; left: 15px; top: 9px; width: 10px; height: 18px; border: solid #fff; border-width: 0 3px 3px 0; transform: rotate(45deg); }
.mx-row { all: unset; box-sizing: border-box; cursor: pointer; display: grid; gap: 3px; padding: 12px 8px 12px 4px; min-width: 0; border-radius: 14px; }
.mx-rowwrap:has(.mx-row.sel) { background: #e6eefc; }
.mx-row.is-high { box-shadow: none; }
.mx-r1 { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.mx-r1 strong { font-size: 15px; font-weight: 700; color: var(--mx-navy); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: -.01em; }
.mx-row.unread .mx-r1 strong { font-weight: 800; }
.mx-r1 time { flex: none; font-size: 12px; color: var(--mx-soft); font-variant-numeric: tabular-nums; }
.mx-row.unread .mx-r1 time { color: var(--mx-blue); font-weight: 700; }
.mx-r2 { display: flex; align-items: center; gap: 6px; min-width: 0; }
.mx-prev { flex: 1; min-width: 0; font-size: 13.5px; color: var(--mx-mut); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.35; }
.mx-row.unread .mx-prev { color: var(--mx-navy); }
.mx-prev mark, .mx-b mark, .mx-who mark { background: #fff1b8; color: inherit; border-radius: 4px; padding: 0 1px; }
.mx-you { flex: none; display: inline-flex; color: var(--mx-soft); }
.mx-you svg { margin-right: -5px; }
.mx-badge { flex: none; min-width: 22px; height: 22px; padding: 0 7px; border-radius: 99px; background: var(--mx-blue); color: #fff; font-size: 12px; font-weight: 800; display: grid; place-items: center; box-shadow: 0 3px 8px rgba(11, 63, 174, .3); animation: mx-pop .45s var(--mx-spring) both; }
@keyframes mx-pop { from { transform: scale(.5); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.mx-r3 { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 3px; }
.mx-tag { display: inline-flex; align-items: center; gap: 4px; height: 21px; padding: 0 9px; border-radius: 99px; background: #edf1f8; color: #4a5a7a; font-size: 11.5px; font-weight: 700; }
.mx-tag.hot { background: #fde8ea; color: #b0121f; }
.mx-tag.soft { background: #e6eefc; color: var(--mx-blue); }
.mx-tag.st-in_progress, .mx-chip.st-in_progress, .mx-mini.st-open { background: #fdf0d5; color: #9a5b06; }
.mx-tag.st-done, .mx-chip.st-done { background: #dcf5ee; color: #0d7a6e; }
.mx-tag.st-archived, .mx-chip.st-archived { background: #eef1f6; color: #6b7a96; }
.mx-tag.st-sent, .mx-chip.st-sent { background: #ece8fb; color: #5b49c4; }
.mx-rows .msg-empty { margin: 18px 8px; border: 1px dashed #cfdcf5; border-radius: 20px; background: #fff; padding: 26px 16px; }

/* Avatars */
.mx-av { flex: none; display: inline-grid; place-items: center; border-radius: 50%; background: linear-gradient(135deg, #dbe7ff, #c5d7fb); color: var(--mx-blue); font-weight: 800; letter-spacing: .02em; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(11, 63, 174, .08); }
.mx-av.guest { background: linear-gradient(135deg, #eef1f6, #dfe5ef); color: #5f6f8f; }
.mx-av img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Conversation */
.mx-convcol { min-width: 0; min-height: 0; display: flex; flex-direction: column; background: #fff; }
.mx-conv { display: flex; flex-direction: column; min-height: 0; height: 100%; animation: mx-fade .3s ease both; }
@keyframes mx-fade { from { opacity: 0; } to { opacity: 1; } }
.mx-head { flex: none; display: flex; align-items: center; gap: 12px; padding: 12px 18px; border-bottom: 1px solid var(--mx-line); background: rgba(255, 255, 255, .92); backdrop-filter: blur(10px); }
.mx-who { flex: 1; min-width: 0; display: grid; line-height: 1.25; }
.mx-who strong { font-size: 16.5px; letter-spacing: -.015em; color: var(--mx-navy); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mx-who span { font-size: 13px; color: var(--mx-mut); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mx-head-act { display: flex; align-items: center; gap: 8px; flex: none; }
.mx-back { display: none; }
.mx-chip { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 11px; border-radius: 99px; background: #e6eefc; color: var(--mx-blue); font-size: 12.5px; font-weight: 700; white-space: nowrap; }
.mx-chip.ok { background: #dcf5ee; color: #0d7a6e; }
.mx-chip.warn { background: #fdf0d5; color: #9a5b06; }
.mx-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 36px; padding: 0 15px; border-radius: 999px; border: 1px solid var(--mx-line); background: #fff; color: var(--mx-navy); font: inherit; font-size: 13.5px; font-weight: 700; text-decoration: none; cursor: pointer; white-space: nowrap; box-shadow: 0 2px 8px rgba(13, 34, 64, .05); transition: background .18s, border-color .18s, color .18s, transform .15s var(--mx-spring); }
.mx-btn:hover { background: #eef3fc; border-color: #cfdcf5; color: var(--mx-blue); }
.mx-btn:active { transform: scale(.96); }
.mx-btn.ok { background: var(--mx-blue); border-color: var(--mx-blue); color: #fff; box-shadow: 0 6px 16px rgba(11, 63, 174, .25); }
.mx-btn.ok:hover { filter: brightness(1.08); color: #fff; }
.mx-btn.wide { width: 100%; justify-content: flex-start; padding: 0 16px; height: 40px; }

.mx-chat { flex: 1; min-height: 0; overflow-y: auto; padding: 18px clamp(14px, 3vw, 32px) 10px; background: radial-gradient(1200px 400px at 50% -10%, #f6f9ff, transparent), var(--mx-bg); display: flex; flex-direction: column; }
.mx-day { align-self: center; margin: 12px 0 6px; }
.mx-day span { display: inline-block; padding: 4px 12px; border-radius: 99px; background: rgba(255, 255, 255, .9); border: 1px solid var(--mx-line); color: var(--mx-mut); font-size: 12px; font-weight: 700; box-shadow: 0 2px 8px rgba(13, 34, 64, .05); backdrop-filter: blur(6px); }
.mx-b { display: grid; max-width: min(640px, 78%); margin-top: 12px; animation: mx-pop2 .4s var(--mx-spring) both; }
.mx-b.grouped { margin-top: 3px; }
@keyframes mx-pop2 { from { opacity: 0; transform: translateY(8px) scale(.97); } to { opacity: 1; transform: none; } }
.mx-b.in { align-self: flex-start; justify-items: start; }
.mx-b.out { align-self: flex-end; justify-items: end; }
.mx-b-from { font-size: 12px; font-weight: 700; color: var(--mx-mut); margin: 0 12px 4px; }
.mx-bubble { padding: 10px 15px; border-radius: 20px; font-size: 15px; line-height: 1.45; overflow-wrap: anywhere; box-shadow: 0 2px 10px rgba(13, 34, 64, .05); }
.mx-bubble p { margin: 0; white-space: pre-wrap; }
.mx-b.in .mx-bubble { background: #fff; color: var(--mx-navy); border: 1px solid var(--mx-line); border-bottom-left-radius: 7px; }
.mx-b.in.grouped .mx-bubble { border-top-left-radius: 7px; }
.mx-b.out .mx-bubble { background: linear-gradient(160deg, #1050cf, #0a35a0); color: #fff; border-bottom-right-radius: 7px; box-shadow: 0 6px 16px rgba(11, 63, 174, .25); }
.mx-b.out.grouped .mx-bubble { border-top-right-radius: 7px; }
.mx-b.out .mx-bubble a { color: #fff; }
.mx-subj { display: block; margin-bottom: 4px; font-size: 14px; }
.mx-biz { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-bottom: 8px; padding: 6px 10px; border-radius: 12px; background: #f1f5fc; font-size: 12.5px; color: var(--mx-mut); }
.mx-biz a { color: var(--mx-blue); font-weight: 700; }
.mx-b-meta { margin: 4px 12px 0; font-size: 11.5px; color: var(--mx-soft); }
.mx-b-meta .seen { color: #0d7a6e; font-weight: 700; }
.mx-loading { align-self: center; padding: 30px; }
.mx-none { flex: 1; display: grid; place-content: center; justify-items: center; text-align: center; gap: 6px; padding: 30px; background: var(--mx-bg); color: var(--mx-mut); }
.mx-none-ic { width: 72px; height: 72px; border-radius: 50%; background: #e6eefc; color: var(--mx-blue); display: grid; place-items: center; margin-bottom: 8px; }
.mx-none strong { font-size: 18px; color: var(--mx-navy); }
.mx-none p { margin: 0; max-width: 34ch; font-size: 14px; }

/* Composer */
.mx-composer { flex: none; padding: 10px clamp(14px, 3vw, 32px) 14px; background: #fff; border-top: 1px solid var(--mx-line); display: grid; gap: 8px; }
.mx-composer.off { text-align: center; color: var(--mx-mut); font-size: 14px; padding-block: 18px; }
.mx-composer.off p { margin: 0; }
.mx-ctx { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; color: var(--mx-navy); white-space: nowrap; overflow: hidden; }
.mx-ctx span { overflow: hidden; text-overflow: ellipsis; flex: none; max-width: 100%; }
.mx-ctx em { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.mx-ctx .ic { color: var(--mx-blue); }
.mx-ctx em { font-style: normal; font-weight: 500; color: var(--mx-soft); }
.mx-quick { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 2px 0; }
.mx-quick::-webkit-scrollbar { display: none; }
.mx-quick-chip { flex: none; height: 30px; padding: 0 13px; border-radius: 99px; border: 1px solid #cfdcf5; background: #f4f8ff; color: var(--mx-blue); font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; transition: background .18s, transform .15s var(--mx-spring); }
.mx-quick-chip:hover { background: #e6eefc; }
.mx-quick-chip:active { transform: scale(.95); }
.mx-field { display: flex; align-items: flex-end; gap: 8px; padding: 6px 6px 6px 16px; border-radius: 26px; background: var(--mx-bg); border: 1px solid transparent; transition: border-color .2s, box-shadow .2s, background .2s; }
.mx-field:focus-within { background: #fff; border-color: #b9c9ea; box-shadow: 0 0 0 4px rgba(11, 63, 174, .1); }
.mx-input { flex: 1; min-width: 0; resize: none; border: 0; background: transparent; font: inherit; font-size: 15px; line-height: 1.45; color: var(--mx-navy); padding: 8px 0; max-height: 168px; outline: none; }
.mx-send { flex: none; width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--mx-blue); color: #fff; display: grid; place-items: center; cursor: pointer; box-shadow: 0 6px 14px rgba(11, 63, 174, .3); transition: transform .2s var(--mx-spring), filter .15s, background .2s, box-shadow .2s; }
.mx-send:hover:not(:disabled) { filter: brightness(1.1); transform: scale(1.06); }
.mx-send:active:not(:disabled) { transform: scale(.9); }
.mx-send:disabled { background: #cdd7ea; box-shadow: none; cursor: not-allowed; }
.mx-opts { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mx-opts .mx-select { width: auto; min-width: 150px; }
.mx-check { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--mx-mut); cursor: pointer; }
.mx-hint { margin-left: auto; font-size: 12px; color: var(--mx-soft); }

/* Contact panel */
.mx-infocol { min-width: 0; min-height: 0; }
.mx-info { height: 100%; overflow-y: auto; padding: 22px 20px 24px; display: grid; gap: 16px; align-content: start; background: #fff; }
.mx-info-top { position: relative; display: grid; justify-items: center; gap: 8px; text-align: center; }
.mx-info-x { position: absolute; top: -8px; right: -6px; }
.mx-info-name { font-size: 19px; letter-spacing: -.02em; color: var(--mx-navy); }
.mx-info-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.mx-info-mail { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; font-size: 13.5px; font-weight: 600; color: var(--mx-blue); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mx-info-mail:hover { text-decoration: underline; }
.mx-stats { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--mx-line); border-radius: 18px; overflow: hidden; }
.mx-stats > div { display: grid; justify-items: center; gap: 1px; padding: 12px 6px; }
.mx-stats > div + div { border-left: 1px solid var(--mx-line); }
.mx-stats strong { font-size: 18px; color: var(--mx-navy); letter-spacing: -.02em; }
.mx-stats span { font-size: 11.5px; color: var(--mx-soft); text-align: center; }
.mx-joined { margin: -4px 0 0; display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 12.5px; color: var(--mx-soft); }
.mx-sec { display: grid; gap: 10px; padding-top: 14px; border-top: 1px solid var(--mx-line); }
.mx-sec h4 { margin: 0; display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--mx-soft); }
.mx-kv { display: grid; grid-template-columns: 92px 1fr; align-items: center; gap: 8px; font-size: 13.5px; }
.mx-kv label { color: var(--mx-mut); font-weight: 600; }
.mx-kv.ro span { color: var(--mx-navy); font-weight: 600; }
.mx-note { margin: 0; font-size: 12.5px; color: var(--mx-soft); line-height: 1.45; }
.mx-ctxlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.mx-ctxlist li { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; border-radius: 14px; background: #f6f8fd; transition: background .18s; }
.mx-ctxlist li:hover { background: #eef3fc; }
.mx-ctxlist li > div { min-width: 0; display: grid; }
.mx-ctxlist strong { font-size: 13.5px; color: var(--mx-navy); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mx-ctxlist small { font-size: 12px; color: var(--mx-soft); }
.mx-mini { flex: none; padding: 3px 9px; border-radius: 99px; background: #e6eefc; color: var(--mx-blue); font-size: 11px; font-weight: 800; text-transform: capitalize; }
.mx-mini.st-cancelled, .mx-mini.st-cancelled_by_driver { background: #fde8ea; color: #b0121f; }
.mx-mini.st-confirmed, .mx-mini.st-open, .mx-mini.st-matched { background: #dcf5ee; color: #0d7a6e; }
.mx-info-act { display: grid; gap: 8px; padding-top: 14px; border-top: 1px solid var(--mx-line); }

/* Layout: info panel inline on very wide screens, slide-over elsewhere */
.mx-infocol { position: absolute; top: 0; right: 0; bottom: 0; width: min(340px, 100%); background: #fff; border-left: 1px solid var(--mx-line); box-shadow: -18px 0 40px rgba(13, 34, 64, .1); transform: translateX(104%); transition: transform .42s var(--mx-ease); z-index: 6; }
.mx-shell.info-open .mx-infocol { transform: none; }
.mx-shell:not(.has-active):not(:has(.mx-head)) .mx-infocol { display: none; }
@media (min-width: 1280px) {
  .mx-shell.info-open { grid-template-columns: minmax(290px, 336px) minmax(0, 1fr) 306px; }
  .mx-infocol { position: static; width: auto; transform: none; box-shadow: none; display: none; }
  .mx-shell.info-open .mx-infocol { display: block; }
}
@media (max-width: 719px) {
  .mx-shell { grid-template-columns: minmax(0, 1fr); height: calc(100vh - 210px); min-height: 480px; border-radius: 20px; }
  .mx-shell:not(.has-active) .mx-convcol { display: none; }
  .mx-shell.has-active .mx-listcol { display: none; }
  .mx-back { display: inline-grid; }
  .mx-infocol { width: 100%; }
  .msg-root.msg-drill .mx-pagehead { display: none; }
  .msg-root.msg-drill .mx-shell { height: calc(100vh - 150px); }
  .mx-head { padding: 10px 12px; gap: 8px; }
  .mx-head-act .mx-btn span { display: none; }
  .mx-head-act .mx-btn { width: 38px; padding: 0; }
  .mx-b { max-width: 88%; }
  .mx-hint { display: none; }
}
@media (max-width: 1100px) and (min-width: 720px) { .mx-head-act .mx-btn span { display: none; } .mx-head-act .mx-btn { width: 38px; padding: 0; } }
@media (prefers-reduced-motion: reduce) { .mx-shell *, .mx-shell { animation: none !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } }

@media (max-width: 1559px) { .mx-shell.info-open .mx-head-act .mx-btn span { display: none; } .mx-shell.info-open .mx-head-act .mx-btn { width: 38px; padding: 0; } .mx-shell.info-open .mx-ctx em { display: none; } .mx-shell.info-open .mx-hint { display: none; } }
.msg-root.msg-drill > .mx-shell { display: grid; }
.mx-listcol > .msg-bulk .btn { font-size: 0; width: 32px; padding: 0; gap: 0; }
.mx-listcol > .msg-bulk .btn svg { width: 15px; height: 15px; }
.mx-listcol > .msg-bulk .btn:last-child { font-size: 12.5px; width: auto; padding: 0 12px; }
.mx-listcol > .msg-bulk .msg-select { width: 112px; }

/* =====================================================================
   MESSAGES v2 — full-height layout (v169): the chat gets the viewport
   ===================================================================== */
.admin-panel-body:has(.msg-root) { max-width: none; padding: 12px clamp(12px, 1.5vw, 24px) 12px; }
.msg-root { height: calc(100vh - 150px); min-height: 460px; display: flex; flex-direction: column; }
.msg-root .mx-shell { flex: 1; height: auto; min-height: 0; grid-template-columns: minmax(300px, 344px) minmax(0, 1fr); border-radius: 22px; }
.msg-root .mx-shell.info-open { grid-template-columns: minmax(300px, 344px) minmax(0, 1fr); }
@media (min-width: 1280px) { .msg-root .mx-shell.info-open { grid-template-columns: minmax(300px, 344px) minmax(0, 1fr) 304px; } }
.mx-listhead { padding: 14px 14px 6px; gap: 10px; }
.mx-lh-top h3 { font-size: 20px; }
.mx-lh-act { gap: 6px; }
.mx-lh-act .oc-export { display: flex; gap: 6px; margin: 0; }
.mx-lh-act .oc-export .btn { font-size: 0; gap: 0; width: 38px; height: 38px; padding: 0; border-radius: 50%; }
.mx-lh-act .oc-export .btn svg { width: 17px; height: 17px; }
.mx-lh-act > .btn { height: 38px; }
.mx-search input { height: 38px; }
.mx-rows { padding: 6px 8px 12px; }

/* Conversation header: slimmer */
.mx-head { padding: 9px 18px; gap: 11px; min-height: 58px; }
.mx-head .mx-av { width: 38px !important; height: 38px !important; font-size: 14px !important; }
.mx-who strong { font-size: 15.5px; }
.mx-who span { font-size: 12.5px; }
.mx-head-act .mx-btn { height: 34px; }
.mx-head-act .mx-iconbtn { width: 34px; height: 34px; }

/* Message history: more room, calmer bubbles */
.mx-chat { padding: 16px clamp(16px, 3vw, 40px) 12px; }
.mx-b { max-width: min(620px, 74%); margin-top: 10px; }
.mx-b.grouped { margin-top: 2px; }
.mx-bubble { padding: 9px 14px; font-size: 14.5px; line-height: 1.5; border-radius: 19px; }
.mx-b-meta { margin-top: 3px; font-size: 11px; }
.mx-b-from { font-size: 11.5px; margin-bottom: 3px; }
.mx-day { margin: 10px 0 4px; }
.mx-day span { padding: 3px 11px; font-size: 11.5px; }

/* Composer: pinned bottom, compact (field + one slim options row) */
.mx-composer { padding: 10px clamp(16px, 3vw, 40px) 10px; gap: 6px; }
.mx-field { position: relative; align-items: flex-end; padding: 5px 5px 5px 8px; gap: 6px; border-radius: 24px; }
.mx-input { padding: 9px 4px; font-size: 14.5px; }
.mx-tool { flex: none; width: 36px; height: 36px; border-radius: 50%; border: 0; background: transparent; color: var(--mx-blue); display: grid; place-items: center; cursor: pointer; transition: background .18s, transform .18s var(--mx-spring); }
.mx-tool:hover { background: #e3ebfa; }
.mx-tool:active { transform: scale(.9); }
.mx-tool[aria-expanded="true"] { background: #d9e5fb; }
.mx-send { width: 36px; height: 36px; }
.mx-quickpop { position: absolute; left: 0; bottom: calc(100% + 10px); width: min(440px, 100%); display: grid; gap: 2px; padding: 8px; background: #fff; border: 1px solid var(--mx-line); border-radius: 20px; box-shadow: 0 18px 44px rgba(13, 34, 64, .18); z-index: 8; transform-origin: bottom left; animation: mx-rise .28s var(--mx-spring) both; }
.mx-quickpop[hidden] { display: none; }
@keyframes mx-rise { from { opacity: 0; transform: translateY(8px) scale(.97); } to { opacity: 1; transform: none; } }
.mx-quickitem { all: unset; box-sizing: border-box; cursor: pointer; display: grid; gap: 2px; padding: 9px 12px; border-radius: 14px; transition: background .15s; }
.mx-quickitem:hover, .mx-quickitem:focus-visible { background: #eef3fc; }
.mx-quickitem strong { font-size: 13.5px; color: var(--mx-navy); }
.mx-quickitem span { font-size: 12.5px; color: var(--mx-mut); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.4; }
.mx-opts { gap: 10px; flex-wrap: nowrap; padding: 0 6px; min-height: 28px; }
.mx-opts .mx-ctx { flex: 1; min-width: 0; font-size: 12px; font-weight: 600; color: var(--mx-mut); }
.mx-opts .mx-ctx .ic { flex: none; color: var(--mx-blue); }
.mx-opts .mx-ctx span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.mx-opts .mx-select { height: 28px; min-width: 0; width: auto; font-size: 12.5px; padding: 0 10px; flex: none; }
.mx-opts .mx-check { flex: none; font-size: 12.5px; white-space: nowrap; }
.mx-opts .mx-hint { flex: none; margin-left: 0; font-size: 11.5px; white-space: nowrap; }
@media (max-width: 1760px) { .mx-opts .mx-hint { display: none; } }
@media (max-width: 719px) {
  .msg-root { height: auto; min-height: 0; }
  .msg-root .mx-shell { height: calc(100vh - 190px); min-height: 460px; grid-template-columns: minmax(0, 1fr); }
  .msg-root.msg-drill .mx-shell { height: calc(100vh - 150px); }
  .mx-opts .mx-ctx { display: none; }
  .mx-opts .mx-check span { white-space: normal; }
  .mx-b { max-width: 88%; }
}
.mx-composer { grid-template-columns: minmax(0, 1fr); min-width: 0; }
.mx-composer > * { min-width: 0; }
.mx-opts { overflow: hidden; }
.mx-convcol { min-width: 0; overflow: hidden; }
@media (max-width: 719px) { .mx-opts { flex-wrap: wrap; } .mx-opts .mx-check span { white-space: nowrap; } }

/* ===== REPORTS — premium moderation queue (v171) ===== */
.rpx-av { position: relative; display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; flex: none; overflow: hidden; background: linear-gradient(145deg, #dbe7ff, #c3d5fb); color: var(--brand); font-weight: 800; font-size: 13px; border: 2px solid #fff; box-shadow: 0 1px 4px rgba(15,35,90,.14); }
.rpx-av img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.rpx-av.t { background: linear-gradient(145deg, #ffe1e1, #fbc4c4); color: #b42318; }
.rpx-av.sm { width: 30px; height: 30px; font-size: 11px; }
.rpx-avs { display: inline-flex; flex: none; }
.rpx-avs .rpx-av + .rpx-av { margin-left: -12px; }
.rpx-who { display: flex; align-items: center; gap: 12px; min-width: 0; }
.rpx-txt { display: grid; gap: 2px; min-width: 0; }
.rpx-txt strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rpx-txt small { color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rpx-row .rva-row-h { grid-template-columns: 84px minmax(240px, 1.2fr) minmax(0, 1.3fr) auto 18px; }
.rpx-row.is-done { opacity: .82; }
.rpx-age { align-items: center; justify-items: start; }
.rpx-age b { font-size: 22px; }
.rpx-age small { font-size: 11px; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.rpx-age.late b { color: var(--red); }
.rpx-age b.ok { color: #15803d; display: inline-flex; }
.rpx-badges { display: inline-flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.rpx-lead { grid-template-columns: auto 1fr auto; align-items: center; gap: 2px 10px; }
.rpx-lead .rpx-av { grid-row: span 2; }
.rpx-lead small { grid-column: 2 / -1; }
.rpx-n { color: var(--red); }
.rpx-late { color: var(--red) !important; }
.rpx-cat { cursor: pointer; }
.rpx-cat span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rpx-note { margin: 8px 0 0; }
.rpx-chat { border: 1px solid var(--line); border-radius: 16px; background: var(--soft); overflow: hidden; }
.rpx-chat-h { display: flex; align-items: center; gap: 6px; padding: 10px 14px; font-size: 12.5px; font-weight: 700; color: var(--muted); border-bottom: 1px solid var(--line); background: #fff; }
.rpx-thread { display: grid; gap: 8px; padding: 14px; max-height: 280px; overflow-y: auto; }
.rpx-msg { display: grid; gap: 2px; max-width: 78%; }
.rpx-msg small { font-size: 11px; color: var(--muted); }
.rpx-msg p { margin: 0; padding: 8px 13px; border-radius: 16px; font-size: 14px; line-height: 1.4; background: #fff; border: 1px solid var(--line); border-bottom-left-radius: 5px; }
.rpx-msg.rep { justify-self: end; text-align: right; }
.rpx-msg.rep p { background: var(--brand); color: #fff; border-color: transparent; border-radius: 16px; border-bottom-right-radius: 5px; text-align: left; }
.rpx-msg.tgt p { border-color: rgba(220,38,38,.25); background: #fff6f6; }
.rva-tab-n { margin-left: 8px; padding: 1px 8px; border-radius: 999px; font-size: 12px; background: rgba(0,0,0,.07); }
.rva-tabs button.on .rva-tab-n { background: rgba(255,255,255,.25); }
.rv-mod .btn.danger { background: var(--red); border-color: var(--red); color: #fff; }
@media (max-width: 1100px) { .rpx-row .rva-row-h { grid-template-columns: 70px minmax(0, 1fr) auto 18px; } .rpx-row .rva-snip { display: none; } }
@media (max-width: 719px) {
  .rpx-row .rva-row-h { grid-template-columns: 56px minmax(0, 1fr) 18px; } .rpx-badges { display: none; }
  .rpx-msg { max-width: 92%; }
}
.rpx-cat { grid-template-columns: minmax(130px, 168px) minmax(0, 1fr) auto !important; }
.rpx-avs .rpx-av + .rpx-av { margin-left: -7px; }
.rpx-row .rv-flag { display: flex; align-items: center; gap: 6px; }
.chips .chip-btn .ops-chip-count { margin-left: 7px; padding: 1px 7px; border-radius: 999px; font-size: 11.5px; background: rgba(0,0,0,.07); color: var(--ink-2); }
.chips .chip-btn.on .ops-chip-count { background: rgba(255,255,255,.25); color: #fff; }

/* ===== DASHBOARD — New users section (v173) ===== */
.nu-body { display: grid; grid-template-columns: minmax(240px, 300px) minmax(0, 1fr); gap: 28px; align-items: stretch; }
.nu-side { display: grid; gap: 14px; align-content: start; }
.nu-total { display: grid; gap: 4px; }
.nu-lbl { font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #8493ad; }
.nu-total strong { font-size: 52px; line-height: 1; letter-spacing: -.04em; color: #0b3fae; }
.nu-delta { font-size: 13px; font-weight: 700; color: #8493ad; }
.nu-delta.up { color: #0f7a4d; } .nu-delta.down { color: #b0121f; }
.nu-prev { font-size: 12.5px; color: #8493ad; }
.nu-split { display: flex; height: 8px; border-radius: 999px; overflow: hidden; background: #e8edf5; gap: 2px; }
.nu-split i { display: block; min-width: 0; transition: width .6s cubic-bezier(.2,.8,.2,1); }
.nu-role { display: grid; grid-template-columns: 12px 1fr auto; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 14px; background: #f5f8fe; }
.nu-role i { width: 10px; height: 10px; border-radius: 50%; }
.nu-role div { display: grid; gap: 1px; min-width: 0; }
.nu-role strong { font-size: 14px; } .nu-role small { font-size: 12px; color: #8493ad; } .nu-role small.up { color: #0f7a4d; font-weight: 700; } .nu-role small.down { color: #b0121f; font-weight: 700; }
.nu-role b { font-size: 22px; letter-spacing: -.02em; }
.nu-note { margin: 0; font-size: 12px; line-height: 1.45; color: #8493ad; }
.nu-chart { min-height: 250px; }
@media (max-width: 860px) { .nu-body { grid-template-columns: minmax(0, 1fr); gap: 18px; } .nu-total strong { font-size: 44px; } }

/* ===== v175 Team accounts, alerts & response times ===== */
.ops-login-switch { display: block; margin: 14px auto 0; background: none; border: 0; padding: 4px 6px; color: var(--brand); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.ops-login-switch:hover { color: var(--brand-600); }
.ops-login-fields { display: grid; gap: 14px; }
.ops-nav-n.ops-nav-od { background: #ce1126; color: #fff; }
.ops-nav-link.on .ops-nav-n.ops-nav-od { background: #fff; color: #ce1126; }
.tm-secret[hidden] { display: none; }
.ops-topbar-alert.late { background: #fdf0f1; color: #b0121f; border: 1px solid rgba(206, 17, 38, .28); }
.ops-topbar-alert.late .ops-topbar-dot { background: #ce1126; }
.ops-topbar-alert.ro { background: #eef2f8; color: #3c4d68; border: 1px solid var(--line-2); display: inline-flex; align-items: center; gap: 6px; }
.triage-late { background: #ce1126; color: #fff; font-size: 10.5px; font-weight: 800; letter-spacing: .03em; padding: 2px 8px; border-radius: 99px; margin-left: auto; margin-right: 8px; align-self: center; }
.tm-form-host:empty { display: none; }
.tm-form, .tm-secret { border: 1px solid var(--line-2); background: var(--soft); border-radius: 14px; padding: 16px; margin: 12px 0; display: grid; gap: 10px; }
.tm-secret { background: #fffbeb; border-color: rgba(245, 158, 11, .4); margin: 0 0 14px; }
.tm-secret-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.tm-pass { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 20px; letter-spacing: .08em; background: #fff; border: 1px dashed var(--line-2); border-radius: 10px; padding: 8px 14px; user-select: all; }
.tm-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.tm-grid label, .tm-field, .tm-sla label { display: grid; gap: 4px; font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.tm-grid input, .tm-grid select, .tm-field input, .tm-sel { width: 100%; min-height: 40px; border: 1px solid var(--line-2); border-radius: 10px; padding: 0 12px; font: inherit; font-weight: 400; background: #fff; color: var(--ink); }
.tm-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.tm-rowact { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.tm-rowact .danger { color: #b0121f; }
.tm-legend { display: grid; gap: 6px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 13px; }
.tm-alerts { display: grid; gap: 14px; }
.tm-check { display: flex; gap: 10px; align-items: flex-start; font-weight: 600; font-size: 14px; }
.tm-check input { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--brand); }
.tm-sla { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.tm-sla label > div { display: flex; align-items: center; gap: 6px; font-weight: 400; }
.tm-hrs { width: 84px; min-height: 40px; border: 1px solid var(--line-2); border-radius: 10px; padding: 0 10px; font: inherit; }
@media (max-width: 760px) { .tm-grid, .tm-sla { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .tm-grid, .tm-sla { grid-template-columns: 1fr; } .tm-pass { font-size: 17px; } }

/* ===== v177 Moderation tools + global search ===== */
.mod-box { max-width: 620px; width: calc(100% - 24px); }
.mod-body { padding: 4px 22px 22px; }
.mod-form { display: grid; gap: 12px; }
.mod-f { display: grid; gap: 5px; font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.mod-text { width: 100%; border: 1px solid var(--line-2); border-radius: 12px; padding: 10px 12px; font: inherit; font-weight: 400; line-height: 1.5; resize: vertical; background: #fff; color: var(--ink); }
.mod-hist { background: var(--soft); border-radius: 10px; padding: 8px 12px; margin: 0; }
.mod-hist.warn { background: #fffbeb; color: #8a4b00; }
.mod-resolution { background: var(--ok-50); border: 1px solid rgba(10, 123, 78, .2); border-radius: 12px; padding: 10px 14px; margin: 10px 0; }
.mod-resolution p { margin: 4px 0; }
.mod-actions { margin: 14px 0 4px; }
.mod-timeline { display: grid; gap: 0; border-left: 2px solid var(--line-2); margin-left: 6px; }
.mod-ev { position: relative; padding: 2px 0 16px 20px; }
.mod-dot { position: absolute; left: -7px; top: 6px; width: 12px; height: 12px; border-radius: 50%; background: #94a3b8; border: 2px solid #fff; }
.mod-report_against .mod-dot, .mod-suspension .mod-dot { background: #ce1126; }
.mod-warning .mod-dot, .mod-appeal .mod-dot { background: #f59e0b; }
.mod-reinstated .mod-dot, .mod-report_resolved .mod-dot { background: #0a7b4e; }
.mod-cancel_ride .mod-dot, .mod-cancel_booking .mod-dot { background: #0038a8; }
.mod-ev-h { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.mod-ev p { margin: 3px 0 2px; color: var(--ink-2); }
.mod-appeal { margin-bottom: 14px; }
.mod-appeal-h { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; flex-wrap: wrap; }
.mod-appeal-ctx { margin: 6px 0; }
.mod-quote { margin: 10px 0; padding: 10px 14px; border-left: 3px solid var(--brand); background: var(--soft); border-radius: 0 10px 10px 0; white-space: pre-wrap; }
.ops-search-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 34px; padding: 0 10px 0 12px; border: 1px solid var(--line-2); border-radius: 999px; background: #fff; color: var(--ink-2); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.ops-search-btn:hover { border-color: var(--brand); color: var(--brand); }
.ops-search-btn kbd, .gs-bar kbd { font: 600 11px ui-monospace, Menlo, Consolas, monospace; background: var(--soft); border: 1px solid var(--line-2); border-radius: 6px; padding: 2px 6px; color: var(--muted); }
.gs-backdrop { position: fixed; inset: 0; z-index: 1200; background: rgba(6, 27, 82, .45); backdrop-filter: blur(3px); display: flex; justify-content: center; align-items: flex-start; padding: 12vh 12px 12px; }
.gs-box { width: 100%; max-width: 640px; background: #fff; border-radius: 18px; box-shadow: var(--shadow-lg); overflow: hidden; display: flex; flex-direction: column; max-height: 70vh; }
.gs-bar { display: flex; align-items: center; gap: 10px; padding: 0 16px; border-bottom: 1px solid var(--line); color: var(--muted); }
.gs-input { flex: 1; min-width: 0; border: 0; outline: 0; font: inherit; font-size: 17px; padding: 16px 0; color: var(--ink); background: transparent; }
.gs-results { overflow-y: auto; padding: 6px 8px 10px; flex: 1; }
.gs-hint { margin: 18px 12px; color: var(--muted); font-size: 14px; }
.gs-glabel { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding: 10px 10px 4px; }
.gs-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; text-align: left; border: 0; background: transparent; padding: 9px 10px; border-radius: 10px; cursor: pointer; font: inherit; color: var(--ink); }
.gs-item.on { background: var(--brand-50); }
.gs-main { display: grid; min-width: 0; }
.gs-main strong { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gs-main small { color: var(--muted); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gs-foot { padding: 9px 16px; border-top: 1px solid var(--line); background: var(--bg); }
@media (max-width: 640px) { .ops-search-btn span, .ops-search-btn kbd { display: none; } .ops-search-btn { padding: 0 10px; } .gs-backdrop { padding-top: 8vh; } .mod-body { padding: 4px 16px 18px; } }
.nu-grand { color: #0b3fae; font-weight: 800; }

/* ===== v179: Log in / Create account / Reset — KaSabay PRIME (au-*) ===== */
.au-page { max-width: 500px; padding: 44px 16px 72px; --au-navy: #061b52; --au-blue: #0b3fae; --au-line: #dbe3f0; --au-mut: #5f6f8f; --au-red: #c81e33; --au-ok: #0a7b4e; --au-ease: cubic-bezier(.32, .72, 0, 1); }
.au-page .auth-brand { display: flex; justify-content: center; margin-bottom: 8px; }
.au-title { text-align: center; font-size: clamp(28px, 5.2vw, 38px); line-height: 1.08; letter-spacing: -.025em; font-weight: 800; color: var(--au-navy); margin: 14px 0 0; }
.au-lead { text-align: center; color: var(--au-mut); font-size: 16px; line-height: 1.5; margin: 10px auto 40px; max-width: 34ch; }
.au-card { position: relative; background: #fff; border: 1px solid #e6ebf3; border-radius: 26px; box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 18px 48px rgba(13,34,64,.08), 0 2px 6px rgba(13,34,64,.04); padding: 22px 26px 26px; transition: opacity .35s ease, transform .35s var(--au-ease); }
.au-card.is-done { opacity: .55; transform: scale(.992); pointer-events: none; }
.au-card .au-form { margin: 0; }
.au-seg { --p: 0; touch-action: pan-y; user-select: none; -webkit-user-select: none; position: relative; display: grid; grid-template-columns: 1fr 1fr; background: #eef2f9; border-radius: 15px; padding: 4px; margin-bottom: 24px; }
.au-seg-thumb { position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); background: #fff; border-radius: 11px; box-shadow: 0 1px 2px rgba(13,34,64,.12), 0 4px 12px rgba(13,34,64,.08); transform: translate3d(calc(var(--p) * 100%), 0, 0); scale: 1; transition: scale 240ms var(--au-ease), box-shadow 240ms var(--au-ease); will-change: transform; pointer-events: none; }
.au-seg.is-pressed .au-seg-thumb { scale: .97; box-shadow: 0 1px 2px rgba(13,34,64,.14), 0 8px 18px -4px rgba(13,34,64,.2), 0 0 0 3px rgba(11,63,174,.13); }
.au-seg.is-dragging, .au-seg.is-dragging * { cursor: pointer !important; }
.au-seg-b { position: relative; z-index: 1; background: none; border: 0; height: 42px; font: inherit; font-weight: 700; font-size: 15px; color: var(--au-mut); cursor: pointer; border-radius: 11px; transition: none; -webkit-tap-highlight-color: transparent; }
#au-t-login { color: color-mix(in srgb, var(--au-navy) calc((1 - var(--p)) * 100%), var(--au-mut)); }
#au-t-signup { color: color-mix(in srgb, var(--au-navy) calc(var(--p) * 100%), var(--au-mut)); }
.au-seg-b:focus-visible { outline: 2px solid var(--au-blue); outline-offset: 1px; }
.au-panel { transition: opacity .13s ease, transform .13s ease; }
.au-panel.is-out { opacity: 0; transform: translateY(6px); }
.au-panel.is-in { animation: au-rise .32s var(--au-ease); }
@keyframes au-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.au-field { margin-bottom: 16px; }
.au-lrow { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 7px; }
.au-label { font-size: 13.5px; font-weight: 700; color: var(--au-navy); letter-spacing: .005em; }
.au-forgot { font-size: 13px; font-weight: 700; color: var(--au-blue); text-decoration: none; }
.au-forgot:hover { text-decoration: underline; }
.au-in { position: relative; display: flex; align-items: center; }
.au-ico { position: absolute; left: 16px; width: 19px; height: 19px; color: #8a98b4; pointer-events: none; transition: color .2s ease; }
.au-in:focus-within .au-ico { color: var(--au-blue); }
.au-input { width: 100%; height: 54px; padding: 0 16px 0 46px; font: inherit; font-size: 16px; color: var(--au-navy); background: #fff; border: 1.5px solid var(--au-line); border-radius: 15px; outline: none; transition: border-color .2s ease, box-shadow .2s ease, background .2s ease; -webkit-appearance: none; appearance: none; }
.au-input::placeholder { color: #9aa7bf; }
.au-input:hover { border-color: #c3cfe3; }
.au-input:focus { border-color: var(--au-blue); box-shadow: 0 0 0 4px rgba(11,63,174,.12); }
.au-field.is-err .au-input { border-color: var(--au-red); background: #fffafa; box-shadow: 0 0 0 4px rgba(200,30,51,.10); }
.au-field.is-err .au-ico { color: var(--au-red); }
.au-field.is-ok .au-input { border-color: #8fd0b4; }
.au-field.is-ok .au-ico { color: var(--au-ok); }
.au-input[type="password"], .au-in:has(.au-eye) .au-input { padding-right: 72px; }
.au-eye { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); background: none; border: 0; font: inherit; font-size: 13px; font-weight: 700; color: var(--au-blue); padding: 8px 10px; border-radius: 10px; cursor: pointer; }
.au-eye:hover { background: #edf3ff; }
.au-eye:focus-visible { outline: 2px solid var(--au-blue); }
.au-hint { margin: 7px 2px 0; font-size: 12.5px; color: var(--au-mut); }
.au-msg { margin: 7px 2px 0; font-size: 13px; font-weight: 600; color: var(--au-red); }
.au-msg:empty { display: none; }
.au-msg:not(:empty) { animation: au-rise .25s var(--au-ease); }
.au-field.is-err .au-hint { display: none; }
.au-caps { display: flex; align-items: center; gap: 6px; margin: 7px 2px 0; font-size: 12.5px; font-weight: 600; color: #8a5a00; }
.au-caps[hidden] { display: none; }
.au-caps .ic { width: 15px; height: 15px; }
.au-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

.au-meter { max-height: 0; opacity: 0; overflow: hidden; transition: max-height .4s var(--au-ease), opacity .25s ease, margin .3s ease; margin: 0; }
.au-meter.on { max-height: 120px; opacity: 1; margin-top: 10px; }
.au-bars { display: grid; grid-template-columns: repeat(4, 1fr) auto; gap: 6px; align-items: center; }
.au-bars i { height: 5px; border-radius: 4px; background: #e6ebf3; transition: background .3s ease; }
.au-meter-w { font-size: 12px; font-weight: 700; color: var(--au-mut); min-width: 52px; text-align: right; }
.au-meter[data-lvl="1"] .au-bars i:nth-child(-n+1) { background: #e0475b; }
.au-meter[data-lvl="2"] .au-bars i:nth-child(-n+2) { background: #f0a020; }
.au-meter[data-lvl="3"] .au-bars i:nth-child(-n+3) { background: #2f7de1; }
.au-meter[data-lvl="4"] .au-bars i { background: #12a06b; }
.au-meter[data-lvl="1"] .au-meter-w { color: #c81e33; } .au-meter[data-lvl="2"] .au-meter-w { color: #a86a00; } .au-meter[data-lvl="3"] .au-meter-w { color: #1f64c0; } .au-meter[data-lvl="4"] .au-meter-w { color: var(--au-ok); }
.au-rules { list-style: none; margin: 9px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 14px; }
.au-rules li { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--au-mut); transition: color .25s ease; }
.au-rules .ic { width: 14px; height: 14px; opacity: .3; transition: opacity .25s ease, transform .3s var(--au-ease); transform: scale(.85); }
.au-rules li.done { color: var(--au-ok); font-weight: 600; }
.au-rules li.done .ic { opacity: 1; transform: scale(1); }

.au-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.au-chip { flex: 1 1 auto; min-height: 46px; padding: 0 14px; font: inherit; font-size: 14.5px; font-weight: 600; color: var(--au-mut); background: #fff; border: 1.5px solid var(--au-line); border-radius: 13px; cursor: pointer; transition: all .2s ease; -webkit-tap-highlight-color: transparent; }
.au-chip:hover { border-color: #c3cfe3; }
.au-chip[aria-checked="true"] { color: var(--au-blue); background: #edf3ff; border-color: var(--au-blue); box-shadow: 0 0 0 3px rgba(11,63,174,.08); }
.au-chip:focus-visible { outline: 2px solid var(--au-blue); outline-offset: 2px; }

.au-alert { display: flex; gap: 10px; align-items: flex-start; background: #fdf0f1; border: 1px solid rgba(200,30,51,.22); color: #86111f; border-radius: 14px; padding: 12px 14px; font-size: 14px; line-height: 1.45; margin: 4px 0 16px; }
.au-alert[hidden] { display: none; }
.au-alert .ic { width: 18px; height: 18px; flex: none; margin-top: 1px; color: var(--au-red); }
.au-alert a { color: #86111f; font-weight: 700; text-decoration: underline; }

.au-btn { position: relative; display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; height: 56px; margin-top: 6px; border: 0; border-radius: 17px; font: inherit; font-size: 16.5px; font-weight: 800; letter-spacing: .005em; color: #fff; cursor: pointer; background: linear-gradient(180deg, #0c47c6 0%, #0535a0 100%); box-shadow: 0 1px 0 rgba(255,255,255,.25) inset, 0 10px 24px rgba(11,63,174,.30); transition: transform .18s var(--au-ease), box-shadow .2s ease, filter .2s ease, opacity .2s ease; -webkit-tap-highlight-color: transparent; }
.au-btn:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 1px 0 rgba(255,255,255,.25) inset, 0 14px 30px rgba(11,63,174,.36); filter: brightness(1.04); }
.au-btn:active:not(:disabled) { transform: scale(.985); }
.au-btn:focus-visible { outline: 3px solid rgba(11,63,174,.35); outline-offset: 3px; }
.au-btn:disabled { cursor: progress; }
.au-btn:disabled:not(.is-busy) { opacity: .6; }
.au-spin { display: none; width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid rgba(255,255,255,.4); border-top-color: #fff; animation: au-spin .7s linear infinite; }
.au-btn.is-busy .au-spin { display: inline-block; }
@keyframes au-spin { to { transform: rotate(360deg); } }
.au-trust { display: flex; align-items: flex-start; justify-content: center; gap: 7px; margin: 18px 4px 0; font-size: 12.5px; line-height: 1.45; color: var(--au-mut); text-align: left; }
.au-trust .ic { width: 15px; height: 15px; flex: none; margin-top: 1px; color: var(--au-ok); }
.au-legal { margin: 14px 0 0; text-align: center; font-size: 12.5px; color: var(--au-mut); }
.au-legal a, .au-foot a { color: var(--au-blue); font-weight: 700; }
.au-foot { text-align: center; margin: 26px 0 0; color: #33425f; font-size: 15px; }
.au-foot.in { margin-top: 18px; }
.au-sent { display: flex; gap: 14px; align-items: center; color: var(--au-mut); font-size: 14.5px; line-height: 1.5; }
.au-sent p { margin: 0; }
.au-sent-i { flex: none; width: 46px; height: 46px; border-radius: 14px; background: #edf3ff; color: var(--au-blue); display: grid; place-items: center; }
.au-sent-i .ic { width: 22px; height: 22px; }
.au-shake { animation: au-shake .42s cubic-bezier(.36, .07, .19, .97); }
@keyframes au-shake { 10%, 90% { transform: translateX(-1px); } 20%, 80% { transform: translateX(2px); } 30%, 50%, 70% { transform: translateX(-4px); } 40%, 60% { transform: translateX(4px); } }
@media (max-width: 560px) {
  .au-page { padding: 28px 14px 56px; }
  .au-lead { margin-bottom: 34px; font-size: 15px; }
  .au-card { padding: 16px 16px 20px; border-radius: 22px; }
  .au-seg-b { height: 44px; }
  .au-chip { flex-basis: 100%; }
}
@media (min-width: 561px) and (max-width: 1024px) { .au-page { padding-top: 56px; } }
@media (prefers-reduced-motion: reduce) {
  .au-card, .au-seg-thumb, .au-panel, .au-meter, .au-btn, .au-input, .au-rules .ic { transition: none; }
  .au-shake, .au-panel.is-in, .au-msg:not(:empty), .au-spin { animation-duration: .001s; }
  .au-spin { animation: au-spin 1.4s linear infinite; }
}

/* v180: gender selector — same sliding capsule as the Log in / Create account tabs */
.au-gseg { --p: 0; --n: 3; position: relative; display: grid; grid-template-columns: repeat(var(--n), 1fr); background: #eef2f9; border-radius: 15px; padding: 4px; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.au-gseg-thumb { position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc((100% - 8px) / var(--n)); background: #fff; border-radius: 11px; box-shadow: 0 1px 2px rgba(13,34,64,.12), 0 4px 12px rgba(13,34,64,.08); transform: translate3d(calc(var(--p) * 100%), 0, 0); scale: 1; transition: scale 240ms var(--au-ease), box-shadow 240ms var(--au-ease); will-change: transform; pointer-events: none; }
.au-gseg.is-pressed .au-gseg-thumb { scale: .97; box-shadow: 0 1px 2px rgba(13,34,64,.14), 0 8px 18px -4px rgba(13,34,64,.2), 0 0 0 3px rgba(11,63,174,.13); }
.au-gseg.is-dragging, .au-gseg.is-dragging * { cursor: pointer !important; }
.au-gseg-b { position: relative; z-index: 1; background: none; border: 0; min-height: 44px; padding: 4px 6px; font: inherit; font-size: 14px; font-weight: 700; line-height: 1.2; color: var(--au-mut); cursor: pointer; border-radius: 11px; transition: color .2s ease; -webkit-tap-highlight-color: transparent; }
.au-gseg-b[aria-checked="true"] { color: var(--au-blue); }
.au-gseg-b:focus-visible { outline: 2px solid var(--au-blue); outline-offset: 1px; }
@media (max-width: 560px) { .au-gseg-b { font-size: 13px; padding: 4px 3px; } }
@media (prefers-reduced-motion: reduce) { .au-gseg-thumb { transition: none; } }
.mp-relief { opacity: .95; mix-blend-mode: multiply; }
@media (max-width: 980px) { .mp-relief { opacity: .75; } }

/* v182 hero: hub-to-hub arcs, comets and arrival ripples */
.mp-arc { fill: none; stroke-width: 0.9px; stroke-linecap: round; stroke-opacity: 0.34; stroke-dasharray: 0.5 3.2; }
.mp-arc-b { stroke: #2563eb; } .mp-arc-a { stroke: #d98a0b; stroke-opacity: 0.42; } .mp-arc-g { stroke: #0f9d6e; stroke-opacity: 0.4; }
.mp-comet { fill: none; stroke-width: 1.6px; stroke-linecap: round; }
.mp-comet-b { stroke: #3b82f6; } .mp-comet-a { stroke: #f59e0b; } .mp-comet-g { stroke: #10b981; }
.mp-comet-head { stroke: none; filter: drop-shadow(0 0 2.4px rgba(37, 99, 235, 0.8)); }
circle.mp-comet-b { fill: #1d4ed8; } circle.mp-comet-a { fill: #f59e0b; } circle.mp-comet-g { fill: #059669; }
.mp-ripple { fill: none; stroke-width: 0.9px; }
.mp-ripple-b { stroke: #2563eb; } .mp-ripple-a { stroke: #f59e0b; } .mp-ripple-g { stroke: #10b981; }
@media (max-width: 640px), (prefers-reduced-motion: reduce) { .mp-comet, .mp-comet-head, .mp-ripple { display: none; } }

/* ===== v183: premium select (kb-*) — PRIME look, bottom sheet on phones ===== */
.kb { position: relative; }
.kb-box { position: relative; margin-top: 7px; }
.kb-trigger { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 8px 14px 8px 12px; font: inherit; text-align: left; color: #061b52; background: #fff; border: 1.5px solid #dbe3f0; border-radius: 16px; cursor: pointer; transition: border-color .2s ease, box-shadow .2s ease, background .2s ease; -webkit-tap-highlight-color: transparent; }
.kb-trigger:hover { border-color: #c3cfe3; }
.kb-trigger:focus-visible, .kb.is-open .kb-trigger { outline: none; border-color: #0b3fae; box-shadow: 0 0 0 4px rgba(11, 63, 174, .12); }
.kb-t-ico { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 12px; background: #edf3ff; color: #0b3fae; }
.kb-t-ico .ic { width: 18px; height: 18px; }
.kb-t-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.kb-t-name { font-weight: 700; font-size: 15.5px; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kb-t-sub { font-size: 12.5px; font-weight: 600; color: #5f6f8f; }
.kb-t-sub[hidden] { display: none; }
.kb-chev { flex: none; width: 18px; height: 18px; color: #5f6f8f; transition: transform .35s cubic-bezier(.32, .72, 0, 1); }
.kb.is-open .kb-chev { transform: rotate(180deg); color: #0b3fae; }
.kb-pop { position: absolute; z-index: 40; left: 0; right: 0; top: calc(100% + 8px); background: #fff; border: 1px solid #e6ebf3; border-radius: 18px; box-shadow: 0 24px 56px rgba(13, 34, 64, .16), 0 4px 14px rgba(13, 34, 64, .07); padding: 6px; transform-origin: top center; opacity: 0; transform: translateY(-6px) scale(.97); visibility: hidden; pointer-events: none; transition: opacity .16s ease, transform .28s cubic-bezier(.32, .72, 0, 1), visibility 0s linear .28s; }
.kb.is-up .kb-pop { top: auto; bottom: calc(100% + 8px); transform-origin: bottom center; transform: translateY(6px) scale(.97); }
.kb.is-open .kb-pop { opacity: 1; transform: none; visibility: visible; pointer-events: auto; transition-delay: 0s; }
.kb-sheet-h, .kb-back { display: none; }
.kb-list { list-style: none; margin: 0; padding: 0; max-height: 330px; overflow-y: auto; outline: none; overscroll-behavior: contain; }
.kb-opt { position: relative; display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 13px; cursor: pointer; color: #061b52; transition: background .15s ease; }
.kb-opt.is-active { background: #f1f5fb; }
.kb-opt[aria-selected="true"] { background: #edf3ff; }
.kb-rail { flex: none; align-self: stretch; width: 14px; display: flex; justify-content: center; align-items: center; position: relative; }
.kb-rail::before { content: ""; position: absolute; left: 50%; top: -12px; bottom: -12px; width: 2px; margin-left: -1px; background: #d6e0f1; }
.kb-opt:first-child .kb-rail::before { top: 50%; }
.kb-opt:last-child .kb-rail::before { bottom: 50%; }
.kb-rail i { position: relative; width: 10px; height: 10px; border-radius: 50%; background: #fff; border: 2px solid #8fb0ea; transition: all .2s ease; }
.kb-opt.is-final .kb-rail i { background: #0b3fae; border-color: #0b3fae; }
.kb-opt[aria-selected="true"] .kb-rail i { background: #0b3fae; border-color: #0b3fae; box-shadow: 0 0 0 4px rgba(11, 63, 174, .15); }
.kb-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.kb-name { font-weight: 700; font-size: 15px; line-height: 1.3; }
.kb-sub { font-size: 12.5px; color: #5f6f8f; }
.kb-tag { flex: none; font-size: 11px; font-weight: 700; letter-spacing: .02em; padding: 3px 9px; border-radius: 999px; background: #eef2f9; color: #4a5b7c; }
.kb-opt.is-final .kb-tag { background: #e6f6ef; color: #0a7b4e; }
.kb-check { flex: none; width: 18px; height: 18px; color: #0b3fae; opacity: 0; transform: scale(.6); transition: opacity .2s ease, transform .3s cubic-bezier(.32, .72, 0, 1); }
.kb-opt[aria-selected="true"] .kb-check { opacity: 1; transform: none; }
@media (max-width: 640px) {
  .kb-pop { position: fixed; z-index: 1200; left: 0; right: 0; bottom: 0; top: auto; border-radius: 24px 24px 0 0; padding: 8px 12px calc(16px + env(safe-area-inset-bottom)); transform: translateY(100%); opacity: 1; transition: transform .42s cubic-bezier(.32, .72, 0, 1), visibility 0s linear .42s; box-shadow: 0 -18px 60px rgba(13, 34, 64, .22); }
  .kb.is-up .kb-pop { top: auto; bottom: 0; transform: translateY(100%); }
  .kb.is-open .kb-pop, .kb.is-open.is-up .kb-pop { transform: none; }
  .kb-sheet-h { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 4px 0 12px; font-size: 16px; color: #061b52; }
  .kb-grab { width: 40px; height: 5px; border-radius: 3px; background: #d6dde9; }
  .kb-back { display: block; position: fixed; z-index: 1190; inset: 0; background: rgba(6, 27, 82, .38); opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility 0s linear .3s; }
  .kb.is-open .kb-back { opacity: 1; visibility: visible; transition-delay: 0s; }
  .kb-list { max-height: 55vh; }
  .kb-opt { padding: 14px 12px; }
}
body.kb-lock { overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .kb-pop, .kb-chev, .kb-back, .kb-check, .kb-rail i { transition: none !important; } }
/* v184 offer: car from My Account */
.of-veh-note { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: -4px 0 4px; font-size: 13.5px; color: var(--muted); }
.of-veh-note[hidden] { display: none; }
.of-veh-note .ic { color: #16875a; flex: none; }
.of-veh-note.is-edited .ic { color: var(--brand); }
.of-veh-reset { border: 0; background: var(--brand-50); color: var(--brand); font: inherit; font-weight: 600; padding: 5px 12px; border-radius: 999px; cursor: pointer; transition: background .15s, transform .15s; }
.of-veh-reset:hover { background: var(--brand-100); }
.of-veh-reset:active { transform: scale(.96); }

/* v185 (8842): Operations Center access uses the same sliding capsule as Log in / Create account */
.au-page .ops-au-badge { display: flex; justify-content: center; }
.au-page .ops-au-badge .ops-login-badge { margin-bottom: 0; }
#ops-t-key { color: color-mix(in srgb, var(--au-navy) calc((1 - var(--p)) * 100%), var(--au-mut)); }
#ops-t-team { color: color-mix(in srgb, var(--au-navy) calc(var(--p) * 100%), var(--au-mut)); }


/* ---- v186 (8844): Facebook Messenger Integration (PRIME style) ---- */

/* Share row and buttons Messenger SVG fill */
.btn-messenger-share svg,
.btn-messenger svg,
.ct-fb-btn svg {
  fill: currentColor;
  stroke: none !important;
}

.footer-messenger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.footer-messenger svg,
.footer-messenger .footer-messenger-ic {
  width: 18px;
  height: 18px;
  fill: #0084FF !important;
  color: #0084FF !important;
  stroke: none !important;
  vertical-align: middle;
  flex: none;
}

/* Live banner when a ride is published */
.banner-live {
  background: linear-gradient(135deg, #eef5ff 0%, #f4f8fe 100%);
  border: 1px solid rgba(0, 56, 168, 0.16);
  border-radius: var(--radius);
  padding: 20px 24px;
  margin-bottom: 24px;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.banner-live-head {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.banner-live-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--brand);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.banner-live-badge svg {
  color: #0a7b4e;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
}
.banner-live-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--ink);
  margin: 0;
  letter-spacing: -0.01em;
}
.banner-live-sub {
  font-size: 14px;
  color: var(--muted);
  margin: 0;
  line-height: 1.45;
}
.banner-live-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}

/* Contact modal Facebook card */
.ct-fb-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px 18px;
  background: #f0f6ff;
  border: 1px solid rgba(0, 106, 255, 0.18);
  border-radius: var(--radius-s);
  margin-bottom: 20px;
}
.ct-fb-head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  width: 100%;
}
.ct-fb-ic {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: #006aff;
  color: #fff;
  flex-shrink: 0;
  margin-top: 2px;
}
.ct-fb-ic svg {
  fill: #fff !important;
  stroke: none !important;
}
.ct-fb-info {
  flex: 1 1 auto;
}
.ct-fb-card strong {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.ct-fb-card p {
  margin: 3px 0 0;
  line-height: 1.4;
  color: var(--muted);
  font-size: 13.5px;
}
.ct-fb-btn {
  align-self: flex-start;
  background: #fff !important;
  color: #006aff !important;
  border: 1px solid rgba(0, 106, 255, 0.3) !important;
  font-weight: 600;
  height: 36px;
  padding: 0 16px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  font-size: 13.5px;
  transition: all 0.15s ease;
}
.ct-fb-btn:hover {
  background: #e5f0ff !important;
  border-color: #006aff !important;
  transform: translateY(-1px);
}

/* Messenger card for confirmed passenger on ride detail */
.messenger-card strong {
  display: block;
  font-size: 15px;
  color: var(--ink);
  margin-bottom: 4px;
}
.btn-messenger {
  color: #006aff !important;
  border-color: rgba(0, 106, 255, 0.25) !important;
  font-weight: 600;
  margin-top: 10px;
}
.btn-messenger:hover {
  background: #f0f6ff !important;
  border-color: #006aff !important;
}

/* My trips action button */
.mt-btn-messenger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: #f0f6ff;
  border: 1px solid rgba(0, 106, 255, 0.22);
  color: #006aff;
  transition: transform .2s var(--tp-ease, cubic-bezier(.2, .8, .2, 1)), filter .2s, background .2s, border-color .2s;
  white-space: normal;
  text-align: center;
  line-height: 1.15;
}
.mt-btn-messenger:hover {
  background: #e5f0ff;
  border-color: rgba(0, 106, 255, 0.45);
  color: #0056cc;
}
.mt-btn-messenger:focus-visible {
  outline: 3px solid rgba(0, 132, 255, 0.45);
  outline-offset: 2px;
}
.mt-btn-messenger svg {
  width: 16px;
  height: 16px;
  fill: #0084FF !important;
  color: #0084FF !important;
  flex-shrink: 0;
  stroke: none !important;
}
@media (max-width: 480px) {
  .tp-acts .mt-btn-messenger {
    padding: 0 8px;
    font-size: 13px;
    gap: 6px;
  }
}
@media (max-width: 360px) {
  .tp-acts .mt-btn-messenger {
    padding: 0 6px;
    font-size: 12px;
    gap: 5px;
  }
}
.tp-acts .mt-btn:focus-visible {
  outline: 3px solid rgba(11, 63, 174, 0.35);
  outline-offset: 2px;
}

/* Messenger link input in profile editor */
.fb-field-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  font-size: 14.5px;
  color: var(--ink);
}
.fb-field-icon {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  vertical-align: middle;
}
.p-fb-help {
  font-size: 12px;
  color: #6B7280;
  margin-top: 6px;
  line-height: 1.5;
}
.p-fb-err {
  font-size: 12px;
  color: var(--danger, #DC2626);
  margin-top: 6px;
  line-height: 1.5;
}

/* Direct Driver Coordination layout */
.coord-actions-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 0;
}
.coord-actions-grid > * {
  min-width: 0;
}
.btn-coord-messenger {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: #0084FF;
  color: #ffffff !important;
  font-size: 13px;
  font-weight: 700;
  padding: 9px 12px;
  border-radius: 10px;
  text-decoration: none;
  box-shadow: 0 2px 8px rgba(0, 132, 255, 0.25);
  box-sizing: border-box;
  width: 100%;
  min-height: 38px;
  text-align: center;
  transition: transform 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.btn-coord-messenger:hover {
  background: #0073e6;
  color: #ffffff !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 132, 255, 0.35);
}
.btn-coord-messenger:focus-visible {
  outline: 2px solid #0084FF;
  outline-offset: 2px;
}
.btn-coord-messenger .ic,
.btn-coord-messenger svg {
  width: 16px;
  height: 16px;
  fill: #ffffff !important;
  stroke: none !important;
  flex-shrink: 0;
}

/* Price block inline lightning icon */
.book-free {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin: 6px 0 0 !important;
}
.book-free .ic,
.book-free svg {
  display: inline-block !important;
  width: 14px !important;
  height: 14px !important;
  color: #16a34a !important;
  stroke: #16a34a !important;
  flex-shrink: 0 !important;
}

/* Secondary button in Book card: Ask driver a question */
.btn-ask-driver {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: 100% !important;
  height: 48px !important;
  background: #ffffff !important;
  border: 1px solid #dbe3f0 !important;
  border-radius: 999px !important;
  color: #0b3fae !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  cursor: pointer !important;
  margin-top: 10px !important;
  box-sizing: border-box !important;
  box-shadow: 0 1px 3px rgba(11, 63, 174, 0.04) !important;
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.12s ease !important;
}
.btn-ask-driver:hover {
  background: #f8fafc !important;
  border-color: #0b3fae !important;
  box-shadow: 0 4px 12px rgba(11, 63, 174, 0.08) !important;
}
.btn-ask-driver:active {
  transform: scale(0.99) !important;
}
.btn-ask-driver:focus-visible {
  outline: 2px solid #0b3fae !important;
  outline-offset: 2px !important;
}
.btn-ask-driver .ic,
.btn-ask-driver svg {
  width: 16px !important;
  height: 16px !important;
  stroke: #0b3fae !important;
  stroke-width: 2 !important;
  fill: none !important;
  flex-shrink: 0 !important;
}

.share-inline-note {
  flex-basis: 100%;
  font-size: 13px;
  font-weight: 600;
  color: #166534;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  padding: 6px 12px;
  border-radius: 8px;
  margin-top: 4px;
  box-sizing: border-box;
}


/* ==========================================================================
   UNIFIED CONTACT COMPONENT (Kasabay 8845 - Phase 2)
   ========================================================================== */

/* 1. "card" variant (Ride Detail Direct Driver Coordination) */
.contact-card-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 14px;
  width: 100%;
}
.contact-card-actions .btn {
  width: 100%;
  min-height: 44px;
  font-size: 15px;
  font-weight: 700;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  text-decoration: none;
  box-sizing: border-box;
  transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.contact-card-actions .btn-contact-chat {
  background: #0b3fae !important;
  color: #ffffff !important;
  border: 1.5px solid transparent !important;
  box-shadow: 0 2px 8px rgba(0, 56, 168, 0.25) !important;
}
.contact-card-actions .btn-contact-chat:hover {
  background: #002b82 !important;
  color: #ffffff !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(0, 56, 168, 0.35) !important;
}
.contact-card-actions .btn-contact-chat svg,
.contact-card-actions .btn-contact-chat .ic {
  stroke: #ffffff !important;
  color: #ffffff !important;
  fill: none !important;
}
.contact-card-actions .btn-contact-messenger {
  background: #ffffff !important;
  border: 1px solid #0084FF !important;
  color: #0084FF !important;
  box-shadow: 0 1px 3px rgba(0, 132, 255, 0.08) !important;
}
.contact-card-actions .btn-contact-messenger:hover {
  background: #f0f7ff !important;
  border-color: #0073e6 !important;
  color: #0073e6 !important;
  transform: translateY(-1px);
}
.contact-card-actions .btn-contact-messenger svg,
.contact-card-actions .btn-contact-messenger .ic {
  fill: #0084FF !important;
  color: #0084FF !important;
  stroke: none !important;
}
.contact-card-actions .btn-contact-call {
  background: #ffffff !important;
  border: 1px solid #dbe3f0 !important;
  color: #1e293b !important;
  box-shadow: 0 1px 3px rgba(13, 34, 64, 0.05) !important;
}
.contact-card-actions .btn-contact-call:hover {
  background: #f8fafc !important;
  border-color: #cbd5e1 !important;
  transform: translateY(-1px);
}
.contact-card-actions .btn-contact-call svg,
.contact-card-actions .btn-contact-call .ic {
  stroke: #1e293b !important;
  color: #1e293b !important;
  fill: none !important;
}
.contact-card-actions .btn-contact-wa {
  background: #128C7E !important;
  color: #ffffff !important;
  border: 1.5px solid transparent !important;
  box-shadow: 0 2px 8px rgba(18, 140, 126, 0.25) !important;
}
.contact-card-actions .btn-contact-wa:hover {
  background: #075E54 !important;
  color: #ffffff !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(18, 140, 126, 0.35) !important;
}
.contact-card-actions .btn-contact-wa svg,
.contact-card-actions .btn-contact-wa .ic {
  fill: #ffffff !important;
  stroke: none !important;
}
.contact-card-actions .btn:focus-visible {
  outline: 2px solid #0b3fae !important;
  outline-offset: 2px !important;
}

/* 2. "row" variant (Passenger lists in Driver Panel) */
.btn-pass-messenger {
  border: 1px solid #0084FF !important;
}
.btn-pass-messenger:hover {
  background: #f0f7ff !important;
  border-color: #0073e6 !important;
}

/* 3. "trip-card" variant (My trips, Requests & Offers) */
.mt-btn-chat {
  background: #0b3fae !important;
  color: #ffffff !important;
  border: 1.5px solid transparent !important;
}
.mt-btn-chat:hover {
  background: #002b82 !important;
  color: #ffffff !important;
}
.mt-btn-chat svg,
.mt-btn-chat .ic {
  stroke: #ffffff !important;
  color: #ffffff !important;
  fill: none !important;
}
.mt-btn-messenger {
  background: #ffffff !important;
  border: 1px solid #0084FF !important;
  color: #0084FF !important;
}
.mt-btn-messenger:hover {
  background: #f0f7ff !important;
  border-color: #0073e6 !important;
  color: #0073e6 !important;
}
.mt-btn-call {
  background: #ffffff !important;
  border: 1px solid #dbe3f0 !important;
  color: #1e293b !important;
}
.mt-btn-call:hover {
  background: #f8fafc !important;
  border-color: #cbd5e1 !important;
}


/* ==========================================================================
   BOOKING CARD REFINEMENT (Kasabay 8845)
   ========================================================================== */
.rd2 .book-price-row,
.card.book .book-price-row {
  padding-top: 0;
  align-items: flex-start;
  width: 100%;
}
.card.book .book-price {
  width: 100%;
  display: flex;
  flex-direction: column;
}
.card.book .book-price-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
}
.card.book .book-price-sub {
  display: block;
  margin-top: 6px;
  color: var(--ma-mut, #5f6f8f);
  font-size: 13px;
}
.book-seats-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  flex-shrink: 0;
}
.book-seats-pill.is-open {
  background: #e6f6ee;
  color: #0a7b4e;
  border: 1px solid #b7e4cd;
}
.book-seats-pill.is-full {
  background: #f1f5f9;
  color: #475569;
  border: 1px solid #cbd5e1;
}

/* Fee notice chip (one time only, light blue background + bolt) */
.card.book .book-free {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 12px 0 0 !important;
  padding: 8px 12px !important;
  background: #eef4ff !important;
  border: 1px solid #d8e6ff !important;
  border-radius: 10px !important;
  color: #0f172a !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
}
.card.book .book-free .ic,
.card.book .book-free svg {
  display: inline-block !important;
  width: 15px !important;
  height: 15px !important;
  color: #0b3fae !important;
  stroke: #0b3fae !important;
  fill: none !important;
  flex-shrink: 0 !important;
}

/* Seat selector: 40px round buttons, 1.5px border, clear disabled state */
.card.book .seat-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 16px;
  font-size: 16px;
  font-weight: 700;
  color: var(--ma-navy, #071936);
}
.card.book .stepper {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.card.book .stepper button {
  width: 40px;
  height: 40px;
  min-width: 40px;
  min-height: 40px;
  padding: 0;
  border-radius: 50%;
  border: 1.5px solid #0b3fae;
  background: #ffffff;
  color: #0b3fae;
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.card.book .stepper button:hover:not(:disabled) {
  background: #0b3fae;
  color: #ffffff;
}
.card.book .stepper button:focus-visible {
  outline: 2px solid #0b3fae;
  outline-offset: 2px;
}
.card.book .stepper button:disabled {
  border-color: #d5deec;
  background: #f8fafc;
  color: #94a3b8;
  cursor: not-allowed;
}
.card.book .stepper output {
  min-width: 24px;
  text-align: center;
  font-weight: 800;
  font-size: 20px;
  color: var(--ma-navy, #071936);
  font-variant-numeric: tabular-nums;
}

/* Compact summary line */
.card.book .lines {
  margin: 14px 0;
  padding: 11px 14px;
  background: #f1f5fb;
  border-radius: 12px;
  display: grid;
  gap: 8px;
  font-size: 13.5px;
  color: #334155;
}
.card.book .lines > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.card.book .lines strong {
  font-weight: 800;
  color: var(--ma-navy, #071936);
  font-size: 14.5px;
  white-space: nowrap;
}

/* Primary Book button disabled state */
.rd2 .rd-side .card.book .btn-book-ride:disabled,
.card.book .btn-book-ride:disabled {
  background: #e2e8f0 !important;
  color: #475569 !important;
  border-color: #cbd5e1 !important;
  box-shadow: none !important;
  cursor: not-allowed !important;
}

/* Shortened note under Book button with info icon */
.card.book .book-hint {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  margin: 12px 0 0;
  font-size: 12.5px;
  color: #5f6f8f;
  line-height: 1.45;
}
.card.book .book-hint .ic,
.card.book .book-hint svg {
  width: 15px;
  height: 15px;
  flex: none;
  margin-top: 2px;
  color: #5f6f8f;
  stroke: #5f6f8f;
  fill: none;
  stroke-width: 1.9;
}

/* Secondary Ask button: 44px high, 1.5px border in #0b3fae at ~40% opacity */
.rd2 .rd-side .card.book .btn-ask-driver,
.card.book .btn-ask-driver {
  height: 44px !important;
  min-height: 44px !important;
  width: 100% !important;
  background: #ffffff !important;
  border: 1.5px solid rgba(11, 63, 174, 0.4) !important;
  border-radius: 999px !important;
  color: #0b3fae !important;
  font-size: 14.5px !important;
  font-weight: 700 !important;
  margin-top: 12px !important;
  box-shadow: none !important;
}
.rd2 .rd-side .card.book .btn-ask-driver:hover,
.card.book .btn-ask-driver:hover {
  background: #f4f8ff !important;
  border-color: rgba(11, 63, 174, 0.75) !important;
  box-shadow: 0 4px 12px rgba(11, 63, 174, 0.08) !important;
}

/* ==========================================================================
   REQUEST DETAIL: REFINED "I CAN TAKE YOU" & "YOUR OFFER" (Kasabay 8846)
   ========================================================================== */
.req-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.req-card-top .h3 {
  margin: 0 !important;
}
.tp-offer-status {
  padding: 24px;
  box-shadow: 0 18px 44px rgba(8, 42, 120, 0.12);
  border: 1.5px solid #d6e3fb;
  border-radius: 20px;
  background: linear-gradient(180deg, #f6f9ff 0, #fff 120px);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.offer-status-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}
.offer-price-large {
  font-size: 36px;
  font-weight: 800;
  color: #0b3fae;
  line-height: 1.05;
  letter-spacing: -0.025em;
  margin-top: 2px;
}
.offer-summary-box {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 13.5px;
  color: #334155;
  line-height: 1.45;
}
.offer-summary-desc {
  margin: 0;
  color: #475569;
}
.chip-budget-ok {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
  background: #e6f6ee;
  color: #0a7b4e;
  border: 1px solid #b7e4cd;
}
.chip-budget-over {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
  background: #fff7ed;
  color: #c2410c;
  border: 1px solid #fed7aa;
}
.btn-offer-chat {
  font-size: 16px;
  font-weight: 700;
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 14px;
}
.offer-actions-wrap {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 4px;
}
.btn-withdraw-offer {
  min-height: 42px;
  border-radius: 12px;
  border: 1.5px solid #fecaca;
  background: #fff;
  color: #dc2626;
  font-weight: 600;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  transition: all 0.15s ease;
  width: 100%;
}
.btn-withdraw-offer:hover {
  background: #fef2f2;
  border-color: #fca5a5;
  color: #b91c1c;
}
.btn-withdraw-offer.armed {
  background: #fee2e2;
  border-color: #ef4444;
  color: #991b1b;
  font-weight: 700;
}
.offer-edit-box {
  background: #f1f5f9;
  border: 1px solid #cbd5e1;
  border-radius: 14px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.offer-edit-box input {
  border-radius: 10px;
  border: 1px solid #94a3b8;
  padding: 8px 12px;
  font-size: 16px;
  font-weight: 600;
  background: #fff;
}
.offer-edit-box .edit-actions {
  display: flex;
  gap: 8px;
}

/* Accepted offer card in offers page (My trips aesthetic) */
.accepted-offer-wrap { display: grid; gap: 20px; width: 100%; }
.accepted-offer-wrap .tp-card { width: 100%; box-sizing: border-box; }
.tp-card.won { border-color: #bcd4f5; box-shadow: 0 12px 34px rgba(11, 63, 174, 0.08); }
.tp-card.won .tp-chips .mt-chip.ok { background: #eaf8f0; color: #0e8345; font-weight: 700; }

/* v206 Email usage card (admin Dashboard) */
.em-card { margin-bottom: 12px; }
.em-body { display: grid; grid-template-columns: minmax(240px, 1fr) minmax(0, 1.5fr); gap: 24px; align-items: stretch; }
.em-big { display: flex; align-items: baseline; gap: 4px; flex-wrap: wrap; margin-bottom: 14px; }
.em-big b { font-size: 38px; line-height: 1; letter-spacing: -.02em; color: var(--ink, #0a192f); }
.em-big span { font-size: 18px; font-weight: 700; color: #64748b; }
.em-big small { flex-basis: 100%; font-size: 12.5px; color: #64748b; margin-top: 4px; }
.em-meter { margin-bottom: 12px; }
.em-meter-top { display: flex; justify-content: space-between; font-size: 12.5px; color: #475569; margin-bottom: 5px; }
.em-meter-top strong { color: var(--ink, #0a192f); }
.em-track { height: 8px; border-radius: 999px; background: #eaf0f8; overflow: hidden; }
.em-fill { display: block; height: 100%; border-radius: 999px; background: #1f9d63; transition: width .6s var(--ease, ease); }
.em-fill.warn { background: #e8a317; }
.em-fill.bad { background: #d64545; }
.em-facts { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12.5px; color: #475569; margin-top: 4px; }
.em-dot { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 6px; vertical-align: baseline; background: #0038a8; }
.em-dot.failed { background: #d64545; }
.em-right { display: flex; flex-direction: column; min-width: 0; }
.em-chart-title { margin-bottom: 8px; }
.em-chart { display: flex; align-items: flex-end; gap: 10px; height: 150px; padding: 18px 4px 0; border-bottom: 1px solid #e2e8f0; }
.em-col { flex: 1; min-width: 0; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; position: relative; }
.em-stack { width: 100%; max-width: 44px; min-height: 0; display: flex; flex-direction: column; border-radius: 6px 6px 0 0; overflow: hidden; transition: height .6s var(--ease, ease); }
.em-seg { display: block; min-height: 3px; }
.em-seg.sent { background: #0038a8; opacity: .85; }
.em-seg.failed { background: #d64545; }
.em-col.today .em-seg.sent { opacity: 1; }
.em-num { font-size: 11.5px; font-weight: 700; color: #0038a8; margin-bottom: 3px; min-height: 14px; display: flex; flex-direction: column; align-items: center; line-height: 1.25; }
.em-nf { font-style: normal; font-weight: 700; color: #d64545; }
.em-day { position: absolute; bottom: -22px; font-size: 11.5px; color: #64748b; white-space: nowrap; }
.em-col.today .em-day { color: #0038a8; font-weight: 700; }
.em-right .ops-legend { margin-top: 30px; }
.em-fail { margin-top: 12px; word-break: break-word; }
@media (max-width: 800px) { .em-body { grid-template-columns: 1fr; gap: 16px; } .em-chart { gap: 6px; } }

/* v208 Email controls (admin Dashboard) */
.em-ctl { margin-top: 14px; border: 1px solid #e2e8f0; border-radius: 12px; background: #f8fafc; }
.em-ctl > summary { display: flex; align-items: center; gap: 8px; padding: 11px 14px; cursor: pointer; list-style: none; font-size: 13.5px; color: var(--ink, #0a192f); }
.em-ctl > summary::-webkit-details-marker { display: none; }
.em-ctl-sum { margin-left: auto; font-size: 12.5px; color: #64748b; }
.em-ctl[open] > summary { border-bottom: 1px solid #e2e8f0; }
.em-ctl-body { padding: 8px 14px 14px; display: grid; gap: 2px; }
.em-ctl-row { display: flex; align-items: flex-start; gap: 12px; padding: 10px 2px; cursor: pointer; border-bottom: 1px solid #eef2f7; transition: opacity .2s; }
.em-ctl-row.is-dim { opacity: .45; }
.em-ctl-row.em-pause { background: #fff7e6; border: 1px solid #f3d28b; border-radius: 10px; padding: 10px 12px; margin: 6px 0; }
.em-ctl-row.em-pause.is-dim { opacity: 1; }
.em-ctl-t { display: grid; gap: 2px; font-size: 13.5px; }
.em-ctl-t small { color: #64748b; font-size: 12.5px; line-height: 1.4; }
.em-sw { width: 38px; height: 22px; flex: none; margin-top: 2px; appearance: none; border-radius: 999px; background: #cbd5e1; position: relative; cursor: pointer; transition: background .2s var(--ease, ease); }
.em-sw::after { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(15, 23, 42, .3); transition: transform .2s var(--ease, ease); }
.em-sw:checked { background: #1f9d63; }
.em-pause .em-sw:checked { background: #e8a317; }
.em-sw:checked::after { transform: translateX(16px); }
.em-sw:disabled { opacity: .5; cursor: not-allowed; }
.em-sw:focus-visible { outline: 3px solid #cfe0ff; outline-offset: 2px; }
.em-ctl-limit { display: flex; align-items: center; gap: 12px; padding: 12px 2px 4px; flex-wrap: wrap; }
.em-ctl-limit > span { display: grid; gap: 2px; flex: 1 1 220px; font-size: 13.5px; }
.em-ctl-limit small { color: #64748b; font-size: 12.5px; }
.em-limit-in { width: 96px; padding: 8px 10px; border: 1px solid #cbd5e1; border-radius: 10px; font: inherit; font-weight: 700; }
.em-ess { margin: 8px 0 0; }

/* v209 Community goal (Support screen + admin card) */
.sp-goal-slot { margin: 0 0 14px; }
.sp-goal-slot:empty { display: none; }
.sp-goal { padding: 14px 18px 13px; border-radius: 18px; background: #fff; border: 1px solid var(--line, #e2e8f0); box-shadow: 0 6px 20px rgba(13, 34, 64, .05); animation: sp-goal-in .35s var(--ease, ease) both; }
.sp-goal-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.sp-goal-eyebrow { font-size: 10.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--brand, #0038a8); }
.sp-goal-pct { font-size: 20px; font-weight: 800; letter-spacing: -.02em; color: var(--ink, #0a192f); font-variant-numeric: tabular-nums; }
.sp-goal-title { margin: 2px 0 0; font-size: 16px; font-weight: 800; letter-spacing: -.01em; line-height: 1.25; color: var(--ink, #0a192f); }
.sp-goal-note { margin: 3px 0 0; font-size: 13px; line-height: 1.45; color: var(--muted, #64748b); }
.sp-goal-track { margin-top: 11px; height: 8px; border-radius: 999px; background: var(--brand-50, #e8efff); overflow: hidden; }
.sp-goal-track > i { display: block; height: 100%; min-width: 0; border-radius: 999px; background: linear-gradient(90deg, var(--brand, #0038a8), #2f6bff); transition: width .7s var(--ease, ease); }
.sp-goal-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; font-size: 12.5px; color: var(--muted, #64748b); flex-wrap: wrap; }
.sp-goal-foot b { color: var(--ink, #0a192f); font-weight: 800; font-variant-numeric: tabular-nums; }
.sp-goal-upd { font-size: 11.5px; }
@keyframes sp-goal-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .sp-goal { animation: none; } .sp-goal-track > i { transition: none; } }
@media (max-width: 560px) { .sp-goal { padding: 12px 14px; } .sp-goal-title { font-size: 15px; } }

.gl-body { padding: 4px 2px 2px; display: grid; gap: 2px; }
.gl-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 12px 2px 6px; }
.gl-f { display: grid; gap: 5px; font-size: 12.5px; color: #64748b; font-weight: 600; min-width: 0; }
.gl-in { width: 100%; padding: 9px 11px; border: 1px solid #cbd5e1; border-radius: 10px; font: inherit; font-size: 14px; font-weight: 600; color: var(--ink, #0a192f); background: #fff; min-width: 0; box-sizing: border-box; }
.gl-in:focus { outline: none; border-color: var(--brand, #0038a8); box-shadow: 0 0 0 4px var(--brand-50, #e8efff); }
.gl-in:disabled { background: #f1f5f9; cursor: not-allowed; }
.gl-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 2px 2px; }
.gl-prev { font-variant-numeric: tabular-nums; }
@media (max-width: 640px) { .gl-grid { grid-template-columns: 1fr; } }

/* v210 Admin two-step verification (Security tab + login code step) */
.tf { display: grid; gap: 12px; padding: 4px 2px 2px; max-width: 560px; }
.tf-steps { margin: 0; padding-left: 20px; display: grid; gap: 16px; }
.tf-steps > li { padding-left: 4px; }
.tf-steps > li > .small, .tf-steps > li > strong { line-height: 1.5; }
.tf-qrbox { margin: 10px 0 8px; width: 188px; padding: 8px; background: #fff; border: 1px solid var(--line, #dbe4f3); border-radius: 14px; box-shadow: var(--shadow-sm); }
.tf-qr { display: block; width: 100%; height: auto; }
.tf-keyrow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tf-key { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 13px; letter-spacing: .06em; background: var(--brand-50, #eef3ff); border-radius: 8px; padding: 7px 10px; word-break: break-all; }
.tf-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 8px; }
.tf-code { max-width: 170px; letter-spacing: .12em; font-variant-numeric: tabular-nums; }
.tf-err { margin: 6px 0 0; }
.tf-h { margin: 6px 0 0; font-size: 15px; }
.tf-codes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; max-width: 360px; }
.tf-codes code { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 13px; text-align: center; background: var(--brand-50, #eef3ff); border-radius: 8px; padding: 8px 6px; }
.tf-low { color: #b45309; font-weight: 600; }
.tf-off { margin-top: 6px; }
@media (max-width: 480px) { .tf-codes { grid-template-columns: 1fr; } }
.tf > .btn { justify-self: start; }
.tf > .oc-pill { justify-self: start; }