:root {
  --navy: #071b2d;
  --navy-2: #0d2d46;
  --aqua: #10c5b5;
  --aqua-dark: #079c92;
  --aqua-hover: #24d5c5;
  --on-teal: #052c2b;
  --mist: #f2f7f8;
  --silver: #dce6e8;
  --ink: #102333;
  --muted: #556875;
  --white: #ffffff;
  --line: #dce5e7;
  --shadow: 0 12px 36px rgba(5, 29, 46, 0.08);
  --font: "Sora", "Segoe UI", Arial, sans-serif;
  --text-display: clamp(2.75rem, 5.2vw, 4.5rem);
  --text-headline: clamp(2rem, 4vw, 3rem);
  --text-feature: 1.75rem;
  --text-subhead: 1.5rem;
  --text-title: 1.375rem;
  --text-lead: 1.125rem;
  --text-body: 1rem;
  --text-body-sm: 0.9375rem;
  --text-ui: 0.875rem;
  --text-caption: 0.8125rem;
  --text-label: 0.75rem;
  --text-meta: 0.6875rem;
  --weight-regular: 400;
  --weight-bold: 700;
  --weight-heavy: 800;
  --tracking-display: -0.04em;
  --tracking-headline: -0.03em;
  --tracking-title: -0.02em;
  --tracking-label: 0.08em;
  --tracking-meta: 0.06em;
  --tracking-dark: 0.01em;
  --icon-sm: 1.25rem;
  --icon-md: 1.5625rem;
  --icon-lg: 1.625rem;
  --icon-xl: 2.1875rem;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --motion-fast: 140ms;
  --motion-base: 280ms;
  --motion-panel: 380ms;
  --motion-focal: 520ms;
}

* { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  max-width: 100%;
  overflow-x: hidden;
}
body {
  margin: 0;
  background: #f8fbfb;
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--text-body);
  font-weight: var(--weight-regular);
  line-height: 1.6;
  overflow-wrap: anywhere;
  overflow-x: hidden;
  max-width: 100%;
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
}
body.has-overlay { overflow: hidden; }
.skip-link {
  position: absolute;
  left: 12px;
  top: 12px;
  z-index: 1000;
  padding: 10px 14px;
  border-radius: 10px;
  background: var(--navy);
  color: #fff;
  font-size: var(--text-ui);
  font-weight: var(--weight-heavy);
  text-decoration: none;
  transform: translateY(-120%);
}
.skip-link:focus {
  transform: none;
  outline: 2px solid var(--aqua);
  outline-offset: 3px;
}
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--aqua-dark);
  outline-offset: 3px;
}
button:focus-visible,
a:focus-visible,
summary:focus-visible,
.swipe-button:focus-visible,
.swipe-view-button:focus-visible,
.primary-action:focus-visible,
.secondary-action:focus-visible,
.publish-button:focus-visible,
.close-button:focus-visible,
.card-share:focus-visible {
  outline: 2px solid var(--aqua-dark);
  outline-offset: 3px;
}
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
img { display: block; max-width: 100%; }
.app-shell {
  min-height: 100vh;
  overflow-x: clip;
  width: 100%;
  max-width: 100%;
}
::placeholder { color: #6a7d88; opacity: 1; }
input:disabled, select:disabled, textarea:disabled, button:disabled {
  cursor: not-allowed;
}

.topbar {
  height: 76px;
  padding: 0 clamp(24px, 5vw, 76px);
  padding-top: env(safe-area-inset-top, 0px);
  height: calc(76px + env(safe-area-inset-top, 0px));
  display: flex;
  align-items: center;
  gap: 28px;
  background: rgba(255,255,255,.94);
  border-bottom: 1px solid rgba(7,27,45,.06);
  position: sticky;
  top: 0;
  z-index: 30;
  backdrop-filter: blur(14px);
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  min-width: 0;
}
.brand {
  color: var(--navy);
  display: inline-flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
  font-size: var(--text-subhead);
  font-weight: var(--weight-heavy);
  letter-spacing: var(--tracking-headline);
  white-space: nowrap;
  min-width: 0;
  flex: 0 1 auto;
}
.brand-logo {
  display: block;
  height: 56px;
  width: auto;
  max-width: min(280px, 62vw);
  object-fit: contain;
  image-rendering: -webkit-optimize-contrast;
}
.brand-logo.small { height: 44px; max-width: 220px; }
.brand-logo.strip {
  height: 50px;
  max-width: 240px;
  padding: 8px 12px;
  border-radius: 10px;
  background: #fff;
  box-sizing: content-box;
}
.brand > span:last-child > span { color: var(--aqua-dark); }
.brand-mark { width: 38px; height: 38px; border-radius: 0; display: inline-grid; place-items: center; background: transparent; color: var(--navy); position: relative; overflow: visible; }
.brand-mark i { position: absolute; font-style: normal; font-size: var(--text-lead); font-weight: var(--weight-bold); line-height: 1; }
.brand-mark i:first-child { transform: translate(-4px,-4px); color: var(--aqua); }
.brand-mark i:last-child { transform: translate(4px,4px); color: var(--navy); }
.brand-mark.small { width: 32px; height: 32px; border-radius: 0; }
.brand-mark.small i { font-size: var(--text-body-sm); }
.main-nav {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 28px;
  margin-right: auto;
  min-width: 0;
  flex: 1 1 auto;
}
.main-nav a,
.main-nav button {
  border: 0;
  background: transparent;
  text-decoration: none;
  color: #465866;
  font-size: var(--text-ui);
  font-weight: var(--weight-bold);
  cursor: pointer;
  padding: 10px 0;
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: keep-all;
  flex: 0 0 auto;
}
.main-nav a:hover, .main-nav button:hover { color: var(--aqua-dark); }
.main-nav a[aria-current="page"] { color: var(--aqua-dark); font-weight: var(--weight-heavy); }
.main-nav button { display: inline-flex; align-items: center; gap: 6px; }
.main-nav .referral-nav-button { padding: 7px 10px; border-radius: 10px; background: #e6faf7; color: #087b72; }
.main-nav .referral-nav-button:hover { background: #d4f6f1; color: #065f59; }
.referral-nav-button span { font-size: var(--text-ui); }
.referral-nav-button small {
  padding: 4px 8px;
  border-radius: 999px;
  background: var(--aqua);
  color: var(--on-teal);
  font-size: 10px;
  font-weight: var(--weight-heavy);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}
.referral-highlight,
.referral-share-card em {
  color: var(--aqua-dark);
  font-style: normal;
  font-weight: var(--weight-heavy);
  letter-spacing: 0.02em;
}
.nav-badge { min-width: 18px; height: 18px; padding: 0 5px; display: inline-grid; place-items: center; border-radius: 999px; background: var(--aqua); color: #06332f; font-size: var(--text-meta); }
.account-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 0 0 auto;
  margin-left: auto;
  min-width: 0;
}
.swipe-quick-button {
  display: none;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  place-items: center;
  border: 1px solid #c5d5db;
  border-radius: 11px;
  background: #fff;
  text-decoration: none;
  transition: border-color .18s ease, background .18s ease, transform .18s var(--ease-out);
}
.swipe-quick-button .swipe-quick-icon {
  width: 28px;
  height: 28px;
  display: block;
  object-fit: contain;
}
.swipe-quick-button:hover {
  border-color: var(--aqua-dark);
  background: #eefaf8;
  transform: translateY(-1px);
}
.swipe-quick-button.is-active {
  border-color: var(--aqua);
  background: #e6faf7;
}
.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  padding: 0;
  border: 1px solid #c5d5db;
  border-radius: 11px;
  background: #fff;
  cursor: pointer;
  place-items: center;
  gap: 5px;
  flex-direction: column;
  justify-content: center;
}
.nav-toggle span {
  display: block;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: var(--navy);
  transition: transform .2s var(--ease-out), opacity .2s ease;
}
.nav-toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2) { opacity: 0; }
.nav-toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.mobile-nav-backdrop,
.mobile-nav { display: none; }
.referral-quick-button { display: none; width: 44px; height: 44px; place-items: center; border: 1px solid #bce4df; border-radius: 11px; background: #e8faf7; cursor: pointer; font-size: var(--text-body-sm); }
.login-link { border: 0; background: transparent; color: var(--navy); text-decoration: none; font-weight: var(--weight-bold); font-size: var(--text-ui); padding: 10px 15px; cursor: pointer; }
.publish-button, .section-heading > button { border: 0; background: var(--navy); color: white; border-radius: 12px; padding: 13px 19px; font-weight: var(--weight-heavy); font-size: var(--text-caption); cursor: pointer; box-shadow: 0 4px 14px rgba(7,27,45,.08); }
.publish-button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.publish-button > span { font-size: var(--text-body-sm); line-height: 1; }
.publish-button:hover, .section-heading > button:hover { background: var(--navy-2); transform: translateY(-1px); }
.account-menu { position: relative; }
.account-menu summary { list-style: none; display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: var(--text-caption); font-weight: var(--weight-bold); }
.account-menu summary::-webkit-details-marker { display: none; }
.avatar, .mini-avatar { width: 34px; height: 34px; display: inline-grid; place-items: center; border-radius: 50%; background: #dff8f4; color: #08786f; font-weight: var(--weight-heavy); text-transform: uppercase; }
.account-menu > div { position: absolute; right: 0; top: 48px; width: 250px; padding: 18px; border-radius: 14px; background: white; box-shadow: var(--shadow); border: 1px solid var(--line); }
.account-menu p { margin: 0 0 4px; font-weight: var(--weight-heavy); }
.account-menu small { display: block; color: var(--muted); overflow: hidden; text-overflow: ellipsis; }
.account-menu button { width: 100%; margin-top: 14px; padding: 11px 0; border: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: transparent; color: var(--aqua-dark); text-align: left; font-size: var(--text-label); font-weight: var(--weight-heavy); cursor: pointer; }
.account-menu a { display: block; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); color: #bd3d3d; text-decoration: none; font-size: var(--text-caption); font-weight: var(--weight-bold); }
.account-menu a.admin-crm-link { color: var(--aqua-dark); border-top: 0; margin-top: 8px; padding-top: 0; }
.account-menu a.login-link { margin-top: 0; padding-top: 0; border-top: 0; }
.account-menu .logout-button { color: #bd3d3d; border-bottom: 0; }

/* —— Hero: one composition, brand-first, full-bleed visual —— */
.hero {
  position: relative;
  isolation: isolate;
  min-height: min(78vh, 760px);
  display: grid;
  align-items: end;
  padding: 0;
  color: white;
  overflow: hidden;
  background: #061827;
}
.hero::after { display: none; }
.hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero-media-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% center;
  transform: scale(1.04);
  animation: heroDrift 18s var(--ease-out) both;
}
.hero-media-shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(105deg, rgba(4, 16, 28, .92) 0%, rgba(4, 16, 28, .78) 38%, rgba(4, 22, 34, .42) 68%, rgba(4, 22, 34, .28) 100%),
    linear-gradient(180deg, rgba(4, 16, 28, .35) 0%, transparent 28%, rgba(4, 16, 28, .55) 100%);
}
.hero-copy {
  position: relative;
  z-index: 1;
  width: min(680px, 100%);
  padding: 72px clamp(24px, 7vw, 110px) 80px;
  animation: heroRise .7s var(--ease-out) both;
}
.hero-brand { margin-bottom: 28px; }
.hero-brand .brand-logo.strip {
  height: 54px;
  max-width: 280px;
  box-shadow: 0 10px 30px rgba(0,0,0,.18);
}
.invite-banner {
  width: fit-content;
  max-width: 100%;
  margin-bottom: 18px;
  padding: 10px 13px;
  display: flex;
  flex-wrap: wrap;
  gap: 5px 10px;
  border: 1px solid rgba(115,239,225,.3);
  border-radius: 11px;
  background: rgba(16,197,181,.14);
  color: #d8fffb;
  font-size: var(--text-caption);
  letter-spacing: var(--tracking-dark);
  line-height: 1.55;
}
.invite-banner span { color: #b8d7d7; }
.eyebrow { display: none; }
.hero h1 {
  max-width: 14ch;
  font-size: clamp(2.4rem, 4.6vw, 3.85rem);
  line-height: 1.05;
  letter-spacing: var(--tracking-display);
  margin: 0 0 18px;
  font-weight: var(--weight-heavy);
  text-wrap: balance;
}
.hero-copy > p {
  max-width: 36ch;
  margin: 0;
  color: #d5e2e8;
  font-size: clamp(1.05rem, 1.5vw, 1.2rem);
  line-height: 1.55;
  letter-spacing: var(--tracking-dark);
  font-weight: 400;
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
}
.primary-action, .secondary-action { min-height: 52px; display: inline-flex; align-items: center; justify-content: center; gap: 14px; padding: 0 24px; border-radius: 12px; font-weight: var(--weight-heavy); font-size: var(--text-ui); text-decoration: none; cursor: pointer; border: 0; }
.primary-action { background: var(--aqua); color: var(--on-teal); box-shadow: 0 10px 28px rgba(16,197,181,.22); }
.primary-action:hover { background: var(--aqua-hover); color: var(--on-teal); transform: translateY(-1px); }
.primary-action:disabled { opacity: .55; cursor: not-allowed; transform: none; }
.secondary-action {
  background: white;
  color: var(--navy);
  border: 1px solid #c5d5db;
  box-shadow: none;
}
.secondary-action:hover {
  background: #eff7f7;
  border-color: var(--aqua-dark);
  color: var(--navy);
}
.secondary-action.dark {
  background: var(--navy);
  color: white;
  border: 1px solid var(--navy);
}
.secondary-action.dark:hover {
  background: var(--navy-2);
  border-color: var(--navy-2);
  color: white;
}
.hero .secondary-action,
.guide-hero .secondary-action,
.secondary-action.on-dark {
  background: rgba(255,255,255,.1);
  color: white;
  border: 1px solid rgba(255,255,255,.28);
  backdrop-filter: blur(8px);
}
.hero .secondary-action:hover,
.guide-hero .secondary-action:hover,
.secondary-action.on-dark:hover {
  background: rgba(255,255,255,.18);
  color: white;
  border-color: rgba(255,255,255,.45);
}
.primary-action.full { width: 100%; margin-top: 8px; }
@keyframes heroRise {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: none; }
}
@keyframes heroDrift {
  from { transform: scale(1.08) translate3d(0, 0, 0); }
  to { transform: scale(1.02) translate3d(-1.2%, 0, 0); }
}
.trust-row,
.hero-referral-benefit,
.hero-visual { display: none; }
.swap-card { width: 305px; border-radius: 20px; overflow: hidden; background: white; box-shadow: 0 18px 48px rgba(0,0,0,.22); position: absolute; }
.swap-card img { width: 100%; height: 205px; object-fit: cover; }
.swap-card > div { padding: 17px 19px 20px; display: flex; flex-direction: column; }
.swap-card small { color: var(--aqua-dark); font-size: var(--text-meta); letter-spacing: var(--tracking-label); font-weight: var(--weight-heavy); }
.swap-card strong { color: var(--navy); margin-top: 6px; font-size: var(--text-lead); }
.swap-card span { color: var(--muted); font-size: var(--text-label); margin-top: 4px; }
.swap-card-back { top: 4px; right: 3px; transform: rotate(5deg); opacity: .92; }
.swap-card-front { left: 0; bottom: 34px; transform: rotate(-3deg); }
.swap-badge { position: absolute; z-index: 5; left: calc(50% - 24px); top: calc(50% - 16px); width: 52px; height: 52px; display: grid; place-items: center; border-radius: 50%; background: var(--aqua); color: var(--on-teal); font-weight: var(--weight-heavy); font-size: var(--icon-md); border: 4px solid #0a263b; box-shadow: 0 8px 18px rgba(0,0,0,.18); }
.match-note { position: absolute; right: 2px; bottom: 0; background: rgba(4,20,32,.72); border: 1px solid rgba(255,255,255,.12); border-radius: 999px; padding: 10px 14px; color: #c9d7de; font-size: var(--text-label); }
.match-note span { color: var(--aqua); margin-right: 5px; }

.how-it-works { min-height: 112px; padding: 24px clamp(24px, 7vw, 110px); display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(18px, 4vw, 88px); background: white; border-bottom: 1px solid var(--line); }
.how-it-works > div { display: flex; align-items: center; gap: 14px; }
.how-it-works b { font-size: var(--text-caption); color: var(--aqua-dark); width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: #e7f9f6; }
.how-it-works span { display: flex; flex-direction: column; gap: 4px; }
.how-it-works strong { font-size: var(--text-body); color: var(--navy); }
.how-it-works small { color: var(--muted); font-size: var(--text-ui); }
.how-guide-link {
  color: var(--aqua-dark);
  font-size: var(--text-ui);
  font-weight: var(--weight-heavy);
  text-decoration: none;
  border-bottom: 1px solid #97d5cf;
  padding-bottom: 2px;
  white-space: nowrap;
}
.how-guide-link:hover { color: #056860; }

.swipe-page-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 42px clamp(24px, 6vw, 90px) 36px;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px;
  color: white;
  background:
    radial-gradient(ellipse 80% 120% at 100% 0%, rgba(16,197,181,.28), transparent 55%),
    radial-gradient(ellipse 60% 80% at 0% 100%, rgba(7,156,146,.18), transparent 50%),
    linear-gradient(135deg, #04131f 0%, #0a2a3c 48%, #0c3a48 100%);
}
.swipe-page-hero-copy { position: relative; z-index: 1; max-width: 640px; animation: heroRise .65s var(--ease-out) both; }
.swipe-page-hero .section-kicker { color: #7fe8dc; }
.swipe-page-hero h1 {
  margin: 12px 0 12px;
  max-width: 14ch;
  color: white;
  font-size: clamp(2.1rem, 4.2vw, 3.2rem);
  letter-spacing: var(--tracking-headline);
  line-height: 1.05;
  font-weight: var(--weight-heavy);
  text-wrap: balance;
}
.swipe-page-hero p {
  margin: 0;
  max-width: 42ch;
  color: #b9ced6;
  font-size: var(--text-body);
  line-height: 1.55;
}
.swipe-page-chips {
  list-style: none;
  margin: 20px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.swipe-page-chips li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: #d7e6eb;
  font-size: var(--text-caption);
  font-weight: var(--weight-bold);
  backdrop-filter: blur(6px);
}
.swipe-page-chips b {
  color: var(--aqua);
  font-size: var(--text-ui);
}
.swipe-page-actions {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  animation: heroRise .75s var(--ease-out) .08s both;
}
.swipe-page-orb {
  position: absolute;
  width: 340px;
  height: 340px;
  right: -80px;
  top: -120px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(16,197,181,.35), transparent 68%);
  filter: blur(8px);
  animation: swipeOrb 10s ease-in-out infinite alternate;
  pointer-events: none;
  z-index: 0;
}
.swipe-page-orb-2 {
  width: 260px;
  height: 260px;
  right: 18%;
  top: auto;
  bottom: -140px;
  background: radial-gradient(circle, rgba(36,213,197,.22), transparent 70%);
  animation-duration: 14s;
  animation-direction: alternate-reverse;
}
@keyframes swipeOrb {
  from { transform: translate3d(0, 0, 0) scale(1); opacity: .85; }
  to { transform: translate3d(-28px, 18px, 0) scale(1.12); opacity: 1; }
}
.page-swipe .swipe-zone {
  min-height: calc(100vh - 260px);
  border-bottom: 0;
}
.page-swipe .swipe-zone-focus {
  padding-top: 48px;
}
.page-swipe .swipe-experience > .swipe-hint {
  display: none;
}

.guide-page { background: #f7fbfb; }
.guide-hero {
  padding: 56px clamp(24px, 6vw, 90px) 42px;
  background: linear-gradient(135deg, #062438, #0b3344);
  color: white;
}
.guide-hero h1 {
  margin: 12px 0 12px;
  max-width: 720px;
  font-size: var(--text-headline);
  letter-spacing: var(--tracking-headline);
  line-height: 1.08;
  font-weight: var(--weight-heavy);
}
.guide-hero > p {
  margin: 0 0 24px;
  max-width: 65ch;
  color: #b7ccd5;
  font-size: var(--text-lead);
  line-height: 1.75;
  letter-spacing: var(--tracking-dark);
}
.guide-hero .section-kicker { color: #72e2d6; }
.guide-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.guide-grid {
  max-width: 1180px;
  margin: 0 auto;
  padding: 42px clamp(20px, 5vw, 40px) 20px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.guide-grid article {
  padding: 24px 22px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: white;
  box-shadow: 0 10px 28px rgba(7,27,45,.04);
}
.guide-grid span {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 11px;
  background: #e7f9f6;
  color: var(--aqua-dark);
  font-size: var(--text-caption);
  font-weight: var(--weight-heavy);
}
.guide-grid h2 {
  margin: 14px 0 8px;
  color: var(--navy);
  font-size: var(--text-title);
  letter-spacing: var(--tracking-title);
}
.guide-grid p {
  margin: 0;
  color: #5d727d;
  font-size: var(--text-body-sm);
  line-height: 1.65;
}
.guide-tips,
.guide-cta {
  max-width: 1180px;
  margin: 0 auto 28px;
  padding: 28px 24px;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: white;
}
.guide-tips { margin-top: 12px; }
.guide-tips h2,
.guide-cta h2 {
  margin: 0 0 12px;
  color: var(--navy);
  font-size: var(--text-subhead);
}
.guide-tips ul {
  margin: 0;
  padding-left: 18px;
  color: #5d727d;
  font-size: var(--text-body-sm);
  line-height: 1.7;
}
.guide-tips li { margin-bottom: 8px; }
.guide-cta {
  margin-bottom: 60px;
  background: #effaf8;
  border-color: #cfe9e5;
  text-align: center;
}
.guide-cta p { margin: 0 0 18px; color: #54736f; }
.guide-cta > div { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.main-nav a[aria-current="page"] { color: var(--aqua-dark); }

.referral-strip { padding: 26px clamp(24px, 5vw, 76px); display: grid; grid-template-columns: auto minmax(290px,1fr) auto auto; align-items: center; gap: 18px; background: linear-gradient(100deg,#062438,#0b3344); color: white; border-bottom: 1px solid rgba(255,255,255,.08); }
.referral-strip-icon { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 14px; background: rgba(16,197,181,.16); color: #73e3d7; font-size: var(--text-title); font-weight: var(--weight-heavy); box-shadow: none; }
.referral-strip-copy > span { color: #8fd4cc; font-size: var(--text-label); font-weight: var(--weight-heavy); letter-spacing: var(--tracking-label); }
.referral-strip h2 { margin: 5px 0 3px; font-size: var(--text-subhead); letter-spacing: var(--tracking-title); }
.referral-strip h2 em {
  font-style: normal;
  color: #7fe8dc;
  letter-spacing: 0.04em;
}
.referral-strip p { margin: 0; color: #a8c1cb; font-size: var(--text-ui); line-height: 1.5; }
.referral-strip-benefits { display: flex; align-items: center; gap: 8px; }
.referral-strip-benefits strong { min-width: 105px; padding: 10px 12px; display: flex; flex-direction: column; border: 1px solid rgba(255,255,255,.1); border-radius: 12px; background: rgba(255,255,255,.04); }
.referral-strip-benefits b { color: #8fd4cc; font-size: var(--text-lead); }
.referral-strip-benefits small { margin-top: 2px; color: white; font-size: var(--text-label); }
.referral-strip-benefits i { color: #6fe3d7; font-style: normal; font-weight: var(--weight-heavy); }
.referral-strip > button { min-height: 46px; padding: 0 17px; border: 0; border-radius: 11px; background: var(--aqua); color: var(--on-teal); font-size: var(--text-ui); font-weight: var(--weight-heavy); cursor: pointer; box-shadow: 0 6px 16px rgba(16,197,181,.12); }
.referral-strip > button:hover { background: var(--aqua-hover); color: var(--on-teal); transform: translateY(-1px); }
.referral-strip > button span { margin-left: 9px; font-size: var(--text-body); }

.category-showcase { padding: 72px clamp(24px, 6vw, 90px) 78px; background: white; border-bottom: 1px solid var(--line); }
.category-showcase > div:first-child { max-width: 720px; margin: 0 auto 32px; text-align: center; }
.category-showcase h2 { margin: 10px 0 8px; color: var(--navy); font-size: var(--text-headline); letter-spacing: var(--tracking-headline); font-weight: var(--weight-heavy); }
.category-showcase > div:first-child p { margin: 0; max-width: 65ch; color: var(--muted); font-size: var(--text-lead); line-height: 1.6; }
.category-grid { max-width: 1320px; margin: 0 auto; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 13px; }
.category-grid button { min-height: 142px; padding: 21px; display: flex; flex-direction: column; align-items: flex-start; text-align: left; border: 1px solid #dfe8e9; border-radius: 16px; background: #f9fbfb; cursor: pointer; transition: .18s ease; }
.category-grid button:hover { transform: translateY(-1px); border-color: #c5ddd9; background: #f5fbfa; box-shadow: 0 8px 18px rgba(8,39,57,.05); }
.category-grid i { width: 35px; height: 35px; display: grid; place-items: center; border-radius: 11px; background: #ddf8f3; color: #087f76; font-style: normal; font-size: var(--icon-sm); font-weight: var(--weight-heavy); }
.category-grid strong { margin-top: 13px; color: var(--navy); font-size: var(--text-body-sm); }
.category-grid span { margin-top: 5px; color: var(--muted); font-size: var(--text-ui); line-height: 1.45; }

.swipe-zone {
  min-height: 760px;
  padding: 84px clamp(24px, 8vw, 125px);
  background:
    radial-gradient(ellipse 50% 45% at 85% 30%, rgba(16,197,181,.14), transparent 60%),
    radial-gradient(ellipse 40% 40% at 10% 80%, rgba(7,27,45,.05), transparent 55%),
    linear-gradient(160deg, #e8f7f5 0%, #f7fbfb 42%, #eef5f6 100%);
  display: grid;
  grid-template-columns: minmax(300px, .85fr) minmax(420px, 1.15fr);
  gap: clamp(50px, 8vw, 120px);
  align-items: center;
  position: relative;
  overflow: hidden;
}
.swipe-zone::before {
  content: "";
  width: 480px;
  height: 480px;
  position: absolute;
  left: -280px;
  top: 40px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(16,197,181,.12), transparent 70%);
  animation: swipeOrb 12s ease-in-out infinite alternate;
  pointer-events: none;
}
.swipe-zone-glow {
  position: absolute;
  width: 520px;
  height: 520px;
  right: -160px;
  bottom: -200px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(16,197,181,.16), transparent 68%);
  animation: swipeOrb 16s ease-in-out infinite alternate-reverse;
  pointer-events: none;
  z-index: 0;
}
.swipe-intro { position: relative; z-index: 2; animation: heroRise .6s var(--ease-out) both; }
.swipe-intro-compact .swipe-hint {
  margin: 0 0 18px;
  max-width: 42ch;
  color: #4f6570;
  font-size: var(--text-body);
  line-height: 1.55;
  font-weight: 600;
}
.section-kicker { color: var(--aqua-dark); font-size: var(--text-label); font-weight: var(--weight-bold); letter-spacing: var(--tracking-label); text-transform: uppercase; }
.swipe-intro h2 { max-width: 520px; margin: 14px 0 18px; color: var(--navy); font-size: var(--text-headline); line-height: 1.06; letter-spacing: var(--tracking-headline); font-weight: var(--weight-heavy); }
.swipe-intro > p { max-width: 65ch; margin: 0; color: #60747f; font-size: var(--text-lead); line-height: 1.7; }
.swipe-legend { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 30px; }
.swipe-intro-compact .swipe-legend { margin-top: 0; }
.swipe-legend > button {
  min-width: 0;
  padding: 15px;
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 10px;
  border: 1px solid rgba(7,27,45,.1);
  border-radius: 14px;
  background: rgba(255,255,255,.82);
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: inherit;
  backdrop-filter: blur(8px);
  transition: transform .18s var(--ease-out), box-shadow .18s ease, border-color .18s ease;
}
.swipe-legend > button:hover:not(:disabled) {
  transform: translateY(-3px);
  box-shadow: 0 14px 28px rgba(7,27,45,.1);
  border-color: rgba(16,197,181,.35);
}
.swipe-legend > button:disabled { opacity: .55; cursor: not-allowed; }
.swipe-legend i { width: 36px; height: 36px; grid-row: 1 / 3; display: grid; place-items: center; border-radius: 50%; font-style: normal; font-size: var(--text-lead); font-weight: var(--weight-heavy); }
.legend-pass { background: #fff0ef; color: #e15c58; }
.legend-like { background: #ddf8f3; color: #078a7f; }
.swipe-legend b { color: var(--navy); font-size: var(--text-body-sm); }
.swipe-legend small { display: block; color: var(--muted); font-size: var(--text-caption); margin-top: 3px; }
.swipe-signin { margin-top: 22px; color: var(--navy); display: inline-flex; align-items: center; gap: 12px; font-size: var(--text-body-sm); font-weight: var(--weight-heavy); text-decoration: none; border: 0; border-bottom: 1px solid #97aaa9; padding: 0 0 5px; background: transparent; cursor: pointer; }
.matches-summary {
  margin-top: 23px;
  padding: 11px 16px 11px 11px;
  display: inline-flex;
  align-items: center;
  gap: 11px;
  border: 1px solid #b9dfda;
  border-radius: 14px;
  background: white;
  color: var(--navy);
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(16,197,181,.08);
  transition: transform .18s var(--ease-out), box-shadow .18s ease;
}
.matches-summary:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(16,197,181,.14);
}
.matches-summary > b { width: 39px; height: 39px; display: grid; place-items: center; border-radius: 12px; background: var(--aqua); color: var(--on-teal); font-size: var(--text-lead); }
.matches-summary > span { display: flex; flex-direction: column; text-align: left; font-size: var(--text-ui); font-weight: var(--weight-heavy); }
.matches-summary small { margin-top: 3px; color: var(--aqua-dark); font-size: var(--text-label); }
.swipe-experience { width: min(100%, 490px); justify-self: center; position: relative; z-index: 2; animation: heroRise .7s var(--ease-out) .06s both; }
.swipe-filters {
  width: min(100%, 420px);
  margin: 0 auto 14px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  align-items: end;
}
.swipe-filters label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  color: var(--muted);
  font-size: var(--text-label);
  font-weight: var(--weight-bold);
}
.swipe-filters select {
  height: 44px;
  border: 1px solid #dbe4e7;
  border-radius: 10px;
  background: rgba(255,255,255,.92);
  padding: 0 10px;
  color: var(--navy);
  font: inherit;
  font-size: var(--text-ui);
  font-weight: var(--weight-bold);
}
.swipe-filters-clear {
  height: 44px;
  padding: 0 12px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--aqua-dark);
  font-size: var(--text-label);
  font-weight: var(--weight-heavy);
  cursor: pointer;
  grid-column: 1 / -1;
  justify-self: start;
  white-space: nowrap;
}
.deck-status {
  margin: 0 auto 17px;
  width: min(100%, 420px);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--muted);
  font-size: var(--text-caption);
  white-space: nowrap;
}
.deck-status span {
  color: var(--navy);
  font-weight: var(--weight-heavy);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  white-space: nowrap;
}
.deck-status small {
  color: var(--muted);
  font-size: var(--text-caption);
  font-weight: var(--weight-bold);
  white-space: nowrap;
  flex: 0 0 auto;
}
.deck-status i {
  width: 8px;
  height: 8px;
  display: inline-block;
  border-radius: 50%;
  background: var(--aqua);
  box-shadow: 0 0 0 4px rgba(16,197,181,.15);
  flex: 0 0 auto;
  animation: deckPulse 1.8s ease-in-out infinite;
}
@keyframes deckPulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(16,197,181,.12); }
  50% { box-shadow: 0 0 0 8px rgba(16,197,181,.22); }
}
.swipe-deck {
  height: 510px;
  width: min(100%, 420px);
  margin: 0 auto;
  position: relative;
  touch-action: pan-y;
}
.swipe-deck::before {
  content: "";
  position: absolute;
  inset: 18% -8% -6%;
  border-radius: 40%;
  background: radial-gradient(circle, rgba(16,197,181,.22), transparent 68%);
  filter: blur(18px);
  z-index: 0;
  pointer-events: none;
}
.swipe-card-live {
  position: absolute;
  inset: 0;
  border-radius: 22px;
  overflow: hidden;
  background: #d9e5e6;
  box-shadow: 0 22px 50px rgba(7,27,45,.18);
  transform-origin: 50% 100%;
  user-select: none;
  z-index: 1;
  touch-action: none;
  -webkit-user-drag: none;
}
.swipe-card-live.is-current {
  cursor: grab;
  touch-action: none;
}
.swipe-card-live.is-current:active { cursor: grabbing; }
.swipe-card-live:not(.is-current) .swipe-card-info,
.swipe-card-live:not(.is-current) .swipe-card-gradient,
.swipe-card-live:not(.is-current) .swipe-share,
.swipe-card-live:not(.is-current) .swipe-featured {
  visibility: hidden;
}
.swipe-card-live.is-current:not(.is-exiting) {
  animation: cardArrive .4s var(--ease-out);
}
@keyframes cardArrive {
  from { opacity: 0; }
  to { opacity: 1; }
}
.swipe-card-live > img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.swipe-card-gradient,
.swipe-card-info,
.swipe-stamp,
.swipe-featured,
.swipe-location { pointer-events: none; }
.swipe-share { position: absolute; z-index: 7; top: 16px; right: 16px; width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.35); border-radius: 50%; background: rgba(4,20,32,.78); color: white; font-size: var(--icon-sm); font-weight: var(--weight-heavy); cursor: pointer; touch-action: manipulation; }
.swipe-share:hover { background: var(--aqua); color: var(--on-teal); }
.swipe-featured {
  position: absolute;
  z-index: 7;
  left: 16px;
  top: 16px;
  padding: 7px 10px;
  border-radius: 999px;
  background: linear-gradient(110deg, rgba(4,20,32,.78), rgba(7,90,84,.72), rgba(4,20,32,.78));
  background-size: 200% 100%;
  color: #d7f5f1;
  border: 1px solid rgba(115,239,225,.35);
  box-shadow: 0 4px 14px rgba(0,0,0,.18);
  font-size: var(--text-meta);
  font-weight: var(--weight-heavy);
  letter-spacing: var(--tracking-meta);
  animation: featuredShimmer 3.2s ease-in-out infinite;
}
@keyframes featuredShimmer {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}
.swipe-card-gradient { position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 35%, rgba(3,17,28,.13) 55%, rgba(3,17,28,.94) 100%); }
.swipe-card-info { position: absolute; left: 0; right: 0; bottom: 0; padding: 28px 26px 25px; color: white; }
.swipe-location { display: inline-flex; padding: 6px 9px; border-radius: 999px; background: rgba(4,20,32,.55); font-size: var(--text-meta); font-weight: var(--weight-heavy); }
.swipe-card-info h3 { margin: 10px 0 6px; font-size: var(--text-feature); letter-spacing: var(--tracking-headline); line-height: 1.12; font-weight: var(--weight-heavy); }
.swipe-card-info > p { margin: 0; color: #dde6ea; font-size: var(--text-ui); font-weight: var(--weight-bold); letter-spacing: var(--tracking-dark); line-height: 1.5; }
.swipe-card-info > p i { display: inline-block; width: 3px; height: 3px; margin: 0 8px 2px; border-radius: 50%; background: var(--aqua); }
.swipe-card-info > div { margin-top: 15px; padding: 11px 13px; display: flex; flex-direction: column; border-radius: 11px; background: rgba(4,20,32,.45); border: 1px solid rgba(255,255,255,.12); }
.swipe-card-info > div small { color: #8ce6dd; font-size: var(--text-label); font-weight: var(--weight-heavy); letter-spacing: var(--tracking-meta); }
.swipe-card-info > div strong { margin-top: 4px; font-size: var(--text-caption); line-height: 1.45; }
.swipe-stamp {
  position: absolute;
  top: 45px;
  z-index: 4;
  padding: 8px 12px;
  border: 4px solid;
  border-radius: 8px;
  font-size: var(--text-feature);
  font-weight: var(--weight-heavy);
  letter-spacing: 0.12em;
  opacity: 0;
  transform: scale(0.86);
  transition: opacity var(--motion-fast) ease, transform var(--motion-base) var(--ease-out);
}
.swipe-stamp.visible { opacity: 1; transform: scale(1); }
.swipe-stamp.like { left: 26px; color: #13d3bf; border-color: #13d3bf; transform: rotate(-10deg) scale(0.86); text-shadow: 0 2px 12px rgba(0,0,0,.3); }
.swipe-stamp.pass { right: 26px; color: #ff6e68; border-color: #ff6e68; transform: rotate(10deg) scale(0.86); text-shadow: 0 2px 12px rgba(0,0,0,.3); }
.swipe-stamp.like.visible { transform: rotate(-10deg) scale(1); }
.swipe-stamp.pass.visible { transform: rotate(10deg) scale(1); }
.swipe-card-live.is-exiting .swipe-stamp.like.visible { transform: rotate(-12deg) scale(1.08); }
.swipe-card-live.is-exiting .swipe-stamp.pass.visible { transform: rotate(12deg) scale(1.08); }
.swipe-controls {
  margin-top: 26px;
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 20px;
}
.swipe-button {
  width: 62px;
  height: 62px;
  flex: 0 0 62px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 0;
  background: white;
  box-shadow: 0 10px 28px rgba(7,27,45,.13);
  cursor: pointer;
  font-weight: var(--weight-heavy);
  transition: transform var(--motion-fast) var(--ease-out), box-shadow var(--motion-fast) ease, background var(--motion-fast) ease;
}
.swipe-button:hover { transform: translateY(-2px) scale(1.04); }
.swipe-button:active { transform: translateY(0) scale(0.96); }
.swipe-button.like:active { box-shadow: 0 0 0 6px rgba(16,197,181,.16); }
.swipe-button.pass:active { box-shadow: 0 0 0 6px rgba(237,101,96,.12); }
.swipe-button:disabled { opacity: .45; cursor: default; transform: none; }
.swipe-button.pass {
  color: #ed6560;
  font-size: var(--icon-xl);
  box-shadow: 0 10px 28px rgba(237,101,96,.12), 0 0 0 1px rgba(237,101,96,.12);
}
.swipe-button.pass:hover {
  background: #fff5f4;
  box-shadow: 0 14px 32px rgba(237,101,96,.18), 0 0 0 1px rgba(237,101,96,.2);
}
.swipe-button.like {
  color: #08a99b;
  font-size: var(--icon-md);
  box-shadow: 0 10px 28px rgba(16,197,181,.16), 0 0 0 1px rgba(16,197,181,.16);
}
.swipe-button.like:hover {
  background: #edfaf8;
  box-shadow: 0 14px 34px rgba(16,197,181,.22), 0 0 0 1px rgba(16,197,181,.28);
}
.swipe-button.info {
  width: 52px;
  height: 52px;
  flex: 0 0 52px;
  color: #56717d;
  font-family: var(--font);
  font-size: var(--text-lead);
  font-weight: var(--weight-bold);
  border: 1px solid #d9e5e7;
}
.swipe-info-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
}
.swipe-view-button {
  min-width: 88px;
  min-height: 44px;
  padding: 0 22px;
  border: 0;
  border-radius: 12px;
  background: var(--aqua);
  color: var(--on-teal);
  font-size: var(--text-body-sm);
  font-weight: var(--weight-heavy);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(16,197,181,.14);
}
.swipe-view-button:hover { background: var(--aqua-hover); color: var(--on-teal); transform: translateY(-1px); }
.swipe-view-button:active { transform: translateY(0) scale(0.97); }
.swipe-view-button:disabled { opacity: .45; cursor: default; transform: none; }
.swipe-hint {
  margin: 12px 0 0;
  width: 100%;
  color: var(--muted);
  text-align: center;
  font-size: var(--text-caption);
  display: block;
}
.swipe-skeleton { width: min(100%, 420px); height: 510px; margin: 0 auto; border-radius: 22px; background: linear-gradient(100deg,#dce8e9 30%,#f7fbfb 50%,#dce8e9 70%); background-size: 300% 100%; animation: shimmer 1.3s infinite; }
.deck-empty {
  width: min(100%, 420px);
  min-height: 430px;
  margin: 0 auto;
  padding: 50px 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  border: 1px solid rgba(16,197,181,.22);
  border-radius: 24px;
  background:
    radial-gradient(ellipse 70% 50% at 50% 0%, rgba(16,197,181,.12), transparent 65%),
    rgba(255,255,255,.86);
  box-shadow: 0 18px 40px rgba(7,27,45,.06);
  animation: heroRise .55s var(--ease-out) both;
}
.deck-empty > span {
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #ddf8f3;
  color: #078a7f;
  font-size: var(--icon-md);
  box-shadow: 0 0 0 8px rgba(16,197,181,.1);
}
.deck-empty h3 { margin: 17px 0 7px; color: var(--navy); font-size: var(--text-title); }
.deck-empty p { margin: 0 0 18px; max-width: 36ch; color: var(--muted); font-size: var(--text-body-sm); line-height: 1.55; }
.deck-empty button { padding: 12px 17px; border: 0; border-radius: 10px; background: var(--aqua); color: var(--on-teal); font-size: var(--text-caption); font-weight: var(--weight-heavy); cursor: pointer; }
.deck-empty-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.deck-empty-actions button.outline { border: 1px solid #b7d4d0; background: white; color: var(--navy); }
.deck-empty-actions button.outline:hover { border-color: var(--aqua-dark); background: #effaf8; color: var(--aqua-dark); }

.marketplace { max-width: 1480px; margin: 0 auto; padding: 78px clamp(24px, 5vw, 80px) 90px; }
.section-heading { display: flex; justify-content: space-between; align-items: end; gap: 30px; }
.section-heading > div > span, .modal-kicker { color: var(--aqua-dark); font-weight: var(--weight-heavy); letter-spacing: var(--tracking-label); font-size: var(--text-label); text-transform: uppercase; }
.section-heading h2 { margin: 10px 0 8px; color: var(--navy); font-size: var(--text-headline); letter-spacing: var(--tracking-headline); font-weight: var(--weight-heavy); }
.section-heading p { margin: 0; max-width: 65ch; color: var(--muted); font-size: var(--text-body-sm); line-height: 1.55; }
.filters { margin-top: 32px; padding: 13px; display: flex; flex-wrap: wrap; align-items: end; gap: 10px; border: 1px solid var(--line); border-radius: 16px; background: white; box-shadow: none; }
.filters label { display: flex; flex-direction: column; gap: 7px; }
.filters > label:not(.search-box) { min-width: 150px; }
.filters label > span { color: var(--muted); font-size: var(--text-label); font-weight: var(--weight-heavy); text-transform: uppercase; letter-spacing: var(--tracking-label); padding-left: 3px; }
.filters select, .filters input { height: 46px; border: 1px solid #dbe4e7; border-radius: 10px; background: #fbfdfd; padding: 0 13px; color: var(--navy); outline: none; font-size: var(--text-body); }
.filters select:focus, .filters input:focus, .field input:focus, .field textarea:focus, .field select:focus {
  border-color: var(--aqua);
  box-shadow: 0 0 0 3px rgba(16,197,181,.11);
  outline: none;
}
.filters select:focus-visible, .filters input:focus-visible, .field input:focus-visible, .field textarea:focus-visible, .field select:focus-visible {
  outline: 2px solid var(--aqua-dark);
  outline-offset: 1px;
}
.filters select, .filters input, .field input, .field textarea, .field select {
  font-size: var(--text-body);
}
.card-body h3,
.swipe-card-info h3,
.detail-content h2,
.account-listing-card h3 {
  overflow-wrap: anywhere;
  word-break: break-word;
}
.matched-assets strong,
.swap-card strong,
.owner-row strong,
.detail-owner strong {
  overflow-wrap: anywhere;
}
.filters .search-box { min-width: 320px; flex: 1; position: relative; }
.filters .search-box > span { position: absolute; left: 14px; bottom: 10px; z-index: 1; font-size: var(--icon-sm); color: #738791; }
.filters .search-box input { padding-left: 42px; width: 100%; }
.clear-filter { min-height: 44px; height: auto; border: 0; background: transparent; color: var(--aqua-dark); font-size: var(--text-label); font-weight: var(--weight-heavy); padding: 10px 12px; cursor: pointer; }
.results-meta { padding: 20px 2px 15px; display: flex; justify-content: space-between; color: var(--muted); font-size: var(--text-caption); }
.results-meta span { color: var(--navy); font-weight: var(--weight-heavy); }
.listing-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.listing-card {
  min-width: 0;
  background: white;
  border: 1px solid #dfe7e9;
  border-radius: 18px;
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  content-visibility: auto;
  contain-intrinsic-size: auto 520px;
  contain: layout style paint;
}
.listing-card:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(5,29,46,.07); border-color: #d5e0e3; }
.card-media { position: relative; }
.card-image { border: 0; padding: 0; width: 100%; height: 215px; position: relative; cursor: pointer; background: #dbe6e8; overflow: hidden; }
.card-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s var(--ease-out); }
.listing-card:hover .card-image img { transform: scale(1.02); }
.available-pill, .location-pill { position: absolute; top: 13px; border-radius: 999px; padding: 7px 10px; font-size: var(--text-meta); font-weight: var(--weight-heavy); letter-spacing: var(--tracking-meta); text-transform: uppercase; }
.available-pill { left: 13px; background: #dffaf5; color: #087d72; }
.featured-pill { position: absolute; left: 13px; top: 47px; padding: 6px 9px; border-radius: 999px; background: #e8f7f4; color: #0a6b63; border: 1px solid #b7e4de; font-size: var(--text-label); font-weight: var(--weight-heavy); letter-spacing: var(--tracking-meta); }
.location-pill { right: 13px; top: auto; bottom: 13px; color: white; background: rgba(4,20,32,.78); text-transform: none; letter-spacing: 0; font-size: var(--text-label); }
.card-share { position: absolute; z-index: 3; right: 12px; top: 12px; min-height: 44px; padding: 0 12px; display: inline-flex; align-items: center; gap: 5px; border: 1px solid rgba(255,255,255,.4); border-radius: 999px; background: rgba(4,20,32,.82); color: white; font-size: var(--text-meta); font-weight: var(--weight-heavy); cursor: pointer; }
.card-share span { font-size: var(--text-ui); }
.card-share:hover { background: var(--aqua); color: var(--on-teal); }
.available-pill.static { position: static; display: inline-flex; }
.card-body { padding: 19px; }
.card-body > small { color: var(--muted); font-size: var(--text-meta); font-weight: var(--weight-heavy); letter-spacing: var(--tracking-meta); }
.card-body h3 { margin: 6px 0 13px; font-size: var(--text-title); color: var(--navy); letter-spacing: var(--tracking-title); }
.asset-details { min-height: 16px; margin: -7px 0 12px; color: var(--muted); font-size: var(--text-caption); line-height: 1.45; }
.specs { display: flex; gap: 0; margin-bottom: 15px; }
.specs span { padding: 0 10px; border-right: 1px solid var(--line); color: #5e707c; font-size: var(--text-ui); font-weight: var(--weight-bold); }
.specs span:first-child { padding-left: 0; }
.specs span:last-child { border: 0; color: var(--navy); }
.accepts { background: #f5f9f9; border: 1px solid #e2eceb; padding: 11px 12px; border-radius: 10px; min-height: 68px; }
.accepts small { color: #6a8180; font-weight: var(--weight-bold); font-size: var(--text-label); letter-spacing: var(--tracking-meta); }
.accepts p { margin: 4px 0 0; color: #42585a; font-size: var(--text-ui); line-height: 1.5; }
.owner-row { display: flex; align-items: center; gap: 9px; padding-top: 15px; margin-top: 15px; border-top: 1px solid #edf1f2; }
.mini-avatar { width: 31px; height: 31px; font-size: var(--text-meta); flex: 0 0 auto; }
.mini-avatar.large { width: 44px; height: 44px; font-size: var(--text-body-sm); }
.owner-row > span:nth-child(2), .detail-owner > span:nth-child(2) { min-width: 0; display: flex; flex-direction: column; margin-right: auto; }
.owner-row small, .detail-owner small { color: var(--muted); font-size: var(--text-meta); }
.owner-row strong, .detail-owner strong { color: #354955; font-size: var(--text-caption); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.owner-row button { border: 1px solid #bddbd7; background: white; color: var(--navy); border-radius: 9px; padding: 11px 14px; min-height: 44px; font-size: var(--text-label); font-weight: var(--weight-heavy); cursor: pointer; }
.owner-row button:hover { background: #eafaf7; border-color: var(--aqua-dark); color: var(--aqua-dark); }
.skeleton { height: 470px; border-radius: 18px; background: linear-gradient(100deg, #e9eff0 30%, #f8fbfb 50%, #e9eff0 70%); background-size: 300% 100%; animation: shimmer 1.3s infinite; }
@keyframes shimmer { to { background-position: -150% 0; } }
.empty-state { border: 1px dashed #b9c8cc; background: white; padding: 55px 25px; border-radius: 18px; text-align: center; }
.empty-state strong { color: var(--navy); font-size: var(--text-title); }
.empty-state p { color: var(--muted); }
.empty-state button { border: 0; border-radius: 10px; padding: 11px 17px; color: var(--on-teal); background: var(--aqua); cursor: pointer; font-weight: var(--weight-heavy); }
.empty-state button:hover { background: var(--aqua-hover); }

.validation-strip { max-width: 1320px; margin: 0 auto 80px; border-radius: 22px; padding: 38px 48px; background: var(--navy); color: white; display: flex; align-items: center; justify-content: space-between; gap: 30px; box-shadow: none; }
.validation-strip > div { display: grid; grid-template-columns: auto 1fr; column-gap: 14px; align-items: center; }
.validation-strip .brand-logo.strip { grid-row: 1 / 3; }
.validation-strip h2 { margin: 0; font-size: var(--text-subhead); }
.validation-strip p { margin: 6px 0 0; color: #a9bdc8; font-size: var(--text-label); }
.validation-strip > button {
  border: 0;
  background: var(--aqua);
  color: var(--on-teal);
  border-radius: 12px;
  padding: 16px 20px;
  font-weight: var(--weight-heavy);
  font-size: var(--text-ui);
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 6px 16px rgba(16,197,181,.14);
}
.validation-strip > button:hover {
  background: var(--aqua-hover);
  color: var(--on-teal);
  transform: translateY(-1px);
}
.validation-strip > button span { color: inherit; }
footer { min-height: 110px; background: white; border-top: 1px solid var(--line); display: flex; align-items: center; gap: 24px; padding: 25px clamp(24px, 6vw, 90px) calc(25px + env(safe-area-inset-bottom, 0px)); }
.footer-brand { font-size: var(--text-lead); }
footer p { color: var(--muted); font-size: var(--text-label); margin-right: auto; }
.footer-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  text-align: right;
}
.footer-meta span { color: var(--muted); font-size: var(--text-label); line-height: 1.4; }
.footer-links { display: flex; align-items: center; gap: 16px; }
.footer-links a { color: #4d606b; font-size: var(--text-label); font-weight: var(--weight-bold); text-decoration: none; }
.footer-links a:hover { color: var(--aqua-dark); }

.support-page { background: #f7fbfb; }
.support-hero {
  padding: 48px clamp(20px, 6vw, 90px) 36px;
  background: linear-gradient(135deg, #062438, #0b3344);
  color: white;
}
.support-hero .section-kicker { color: #72e2d6; }
.support-hero h1 {
  margin: 12px 0;
  max-width: 16ch;
  font-size: clamp(2rem, 4vw, 3rem);
  letter-spacing: var(--tracking-headline);
  line-height: 1.05;
  font-weight: var(--weight-heavy);
}
.support-hero p { margin: 0; max-width: 52ch; color: #b7ccd5; line-height: 1.6; }
.support-grid {
  max-width: 1100px;
  margin: 0 auto;
  padding: 28px clamp(16px, 4vw, 40px) 64px;
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 22px;
}
.support-faq,
.support-contact {
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: white;
}
.support-faq h2,
.support-contact h2 {
  margin: 0 0 14px;
  color: var(--navy);
  font-size: var(--text-subhead);
}
.support-faq details {
  border-top: 1px solid var(--line);
  padding: 12px 0;
}
.support-faq details:first-of-type { border-top: 0; }
.support-faq summary {
  cursor: pointer;
  color: var(--navy);
  font-weight: var(--weight-heavy);
  font-size: var(--text-body-sm);
}
.support-faq details p {
  margin: 10px 0 0;
  color: #5d727d;
  font-size: var(--text-body-sm);
  line-height: 1.55;
}
.support-wa-list { display: grid; gap: 10px; margin-bottom: 22px; }
.support-wa-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid #b9dfda;
  background: #effaf8;
  text-decoration: none;
  color: var(--navy);
}
.support-wa-card strong { font-size: var(--text-body-sm); }
.support-wa-card span { color: var(--muted); font-size: var(--text-caption); }
.support-wa-card em { color: var(--aqua-dark); font-style: normal; font-weight: var(--weight-heavy); font-size: var(--text-label); }
.support-form { display: grid; gap: 12px; }
.support-success {
  padding: 18px;
  border-radius: 14px;
  background: #effaf8;
  border: 1px solid #b9dfda;
}
.support-success strong { color: var(--navy); display: block; margin-bottom: 6px; }
.support-success p { margin: 0 0 14px; color: #54736f; }

.faq-widget {
  position: fixed;
  right: max(16px, env(safe-area-inset-right, 0px));
  bottom: max(16px, env(safe-area-inset-bottom, 0px));
  z-index: 55;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}
.faq-launcher {
  width: 56px;
  height: 56px;
  border: 0;
  border-radius: 50%;
  background: var(--navy);
  color: white;
  font-size: 1.4rem;
  font-weight: var(--weight-heavy);
  cursor: pointer;
  box-shadow: 0 12px 28px rgba(7,27,45,.22);
}
.faq-panel {
  width: min(360px, calc(100vw - 32px));
  max-height: min(70vh, 520px);
  overflow: auto;
  border-radius: 18px;
  background: white;
  border: 1px solid var(--line);
  box-shadow: 0 18px 48px rgba(7,27,45,.18);
}
.faq-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 14px 10px;
  border-bottom: 1px solid var(--line);
  color: var(--navy);
}
.faq-panel-head button {
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 10px;
  background: #eef4f5;
  cursor: pointer;
  font-size: 1.2rem;
}
.faq-panel-body { padding: 12px 14px 16px; }
.faq-empty { margin: 0 0 12px; color: var(--muted); font-size: var(--text-ui); }
.faq-answer {
  margin-bottom: 12px;
  padding: 12px;
  border-radius: 12px;
  background: #f4faf9;
}
.faq-answer strong { display: block; color: var(--navy); margin-bottom: 6px; font-size: var(--text-body-sm); }
.faq-answer p { margin: 0; color: #54736f; font-size: var(--text-caption); line-height: 1.5; }
.faq-answer-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.faq-answer-actions a,
.faq-panel-links a {
  color: var(--aqua-dark);
  font-size: var(--text-label);
  font-weight: var(--weight-heavy);
  text-decoration: none;
}
.faq-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.faq-chip {
  border: 1px solid #cfe3e0;
  border-radius: 999px;
  background: white;
  color: var(--navy);
  padding: 8px 10px;
  font-size: 12px;
  font-weight: var(--weight-bold);
  cursor: pointer;
  text-align: left;
}
.faq-chip.is-active,
.faq-chip:hover { background: #e6faf7; border-color: #9fd9d2; }
.faq-panel-links { display: flex; gap: 14px; flex-wrap: wrap; }

@media (max-width: 900px) {
  .support-grid { grid-template-columns: 1fr; }
  .swipe-filters { grid-template-columns: 1fr 1fr; }
  .swipe-filters-clear { grid-column: 1 / -1; justify-self: start; }
}

.modal-backdrop, .messages-backdrop, .match-backdrop { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; padding: 24px; background: rgba(4,17,29,.82); animation: fadeIn var(--motion-base) ease both; overflow-y: auto; }
@keyframes fadeIn { from { opacity: 0; } }
.detail-modal, .proposal-modal, .publish-modal, .referral-modal, .terms-modal {
  animation: panelIn var(--motion-panel) var(--ease-out) both;
}
@keyframes panelIn {
  from { opacity: 0; transform: translateY(16px) scale(0.985); }
  to { opacity: 1; transform: none; }
}
.detail-modal, .proposal-modal, .publish-modal { width: min(940px, 100%); max-height: calc(100vh - 48px); overflow-y: auto; border-radius: 22px; background: white; box-shadow: 0 20px 60px rgba(0,0,0,.22); position: relative; }
.detail-modal {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  overflow: hidden;
  width: min(920px, calc(100vw - 24px));
}
.detail-gallery {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: #0a1f30;
}
.detail-gallery-stage {
  position: relative;
  flex: 1;
  min-height: 420px;
  background: #0a1f30;
}
.detail-gallery-stage > img {
  width: 100%;
  height: 100%;
  min-height: 420px;
  max-height: calc(100vh - 48px);
  object-fit: cover;
  display: block;
}
.detail-gallery-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: rgba(7,27,45,.72);
  color: white;
  font-size: var(--text-feature);
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
  z-index: 2;
}
.detail-gallery-nav.prev { left: 12px; }
.detail-gallery-nav.next { right: 12px; }
.detail-gallery-count {
  position: absolute;
  right: 14px;
  bottom: 14px;
  z-index: 2;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(7,27,45,.72);
  color: white;
  font-size: var(--text-label);
  font-weight: var(--weight-heavy);
}
.detail-gallery-thumbs {
  display: flex;
  gap: 8px;
  padding: 10px;
  overflow-x: auto;
  background: #071b2d;
}
.detail-gallery-thumbs button {
  flex: 0 0 64px;
  width: 64px;
  height: 52px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  background: transparent;
  opacity: .7;
}
.detail-gallery-thumbs button.is-active {
  border-color: var(--aqua);
  opacity: 1;
}
.detail-gallery-thumbs img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.detail-modal > img {
  width: 100%;
  height: 100%;
  min-height: 520px;
  max-height: calc(100vh - 48px);
  object-fit: cover;
  display: block;
}
.detail-content {
  padding: 36px 32px 30px;
  overflow-y: auto;
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
}
.close-button { position: absolute; right: 16px; top: 15px; z-index: 2; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; border: 0; background: rgba(7,27,45,.82); color: white; font-size: var(--text-subhead); line-height: 1; cursor: pointer; }
.detail-content h2 { margin: 14px 0 6px; font-size: var(--text-feature); color: var(--navy); letter-spacing: var(--tracking-headline); }
.detail-location { color: var(--muted); font-size: var(--text-ui); }
.detail-price { display: block; margin: 22px 0; color: var(--navy); font-size: var(--text-subhead); }
.detail-price small { color: var(--muted); font-size: var(--text-label); font-weight: var(--weight-bold); }
.detail-copy { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 17px 0; }
.detail-copy h3 { margin: 8px 0 5px; font-size: var(--text-label); text-transform: uppercase; letter-spacing: var(--tracking-label); color: var(--aqua-dark); }
.detail-copy p { margin: 0 0 14px; color: #526772; font-size: var(--text-ui); line-height: 1.6; }
.detail-owner { display: flex; align-items: center; gap: 11px; margin: 19px 0; }
.share-box { margin: 0 0 17px; padding: 14px; border: 1px solid #cfe9e5; border-radius: 12px; background: #effaf8; width: 100%; box-sizing: border-box; }
.share-box > span { display: block; margin-bottom: 9px; color: #54736f; font-size: var(--text-meta); font-weight: var(--weight-heavy); letter-spacing: var(--tracking-meta); }
.share-box > div { display: flex; flex-wrap: wrap; gap: 8px; width: 100%; }
.share-box button {
  flex: 1 1 calc(50% - 8px);
  min-height: 42px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #c5d5db;
  border-radius: 9px;
  background: white;
  color: var(--navy);
  text-decoration: none;
  font-size: var(--text-caption);
  font-weight: var(--weight-heavy);
  cursor: pointer;
}
.share-box button:hover { background: #eff7f7; border-color: var(--aqua-dark); color: var(--aqua-dark); }
.detail-content .primary-action.full { width: 100%; margin-top: 4px; box-sizing: border-box; }
.own-listing { padding: 13px; background: #f1f6f7; color: var(--muted); border-radius: 10px; font-size: var(--text-caption); text-align: center; }
.detail-owner-actions { display: grid; gap: 10px; margin-top: 4px; }
.secondary-action.danger,
.account-card-actions button.danger {
  background: #fff5f4;
  color: #9b2c2c;
  border: 1px solid #f0c2be;
}
.secondary-action.danger:hover,
.account-card-actions button.danger:hover {
  background: #fde8e6;
  border-color: #e39a94;
  color: #7a1f1f;
}
.secondary-action.full { width: 100%; }
.safety-note { display: block; color: var(--muted); font-size: var(--text-label); text-align: center; line-height: 1.5; margin-top: 12px; }
.proposal-modal { width: min(520px, 100%); padding: 36px; }
.proposal-modal .close-button, .publish-modal .close-button { background: #eef4f5; color: var(--navy); }
.modal-icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 13px; background: #ddf8f4; color: #087e74; font-size: var(--text-title); font-weight: var(--weight-heavy); }
.proposal-modal h2, .publish-modal h2 { color: var(--navy); margin: 16px 0 7px; font-size: var(--text-feature); letter-spacing: var(--tracking-headline); }
.proposal-modal > p, .publish-modal > p { margin: 0 0 22px; color: var(--muted); font-size: var(--text-body-sm); line-height: 1.55; }
.proposal-listing { padding: 10px; display: flex; gap: 12px; background: #f2f7f8; border-radius: 12px; margin-bottom: 18px; }
.proposal-listing img { width: 76px; height: 64px; border-radius: 8px; object-fit: cover; }
.proposal-listing span { display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.proposal-listing small { color: var(--aqua-dark); font-size: var(--text-meta); letter-spacing: var(--tracking-meta); font-weight: var(--weight-heavy); }
.proposal-listing strong { color: var(--navy); font-size: var(--text-label); margin: 4px 0; }
.proposal-listing em { color: var(--muted); font-style: normal; font-size: var(--text-label); }
.field { display: flex; flex-direction: column; gap: 7px; }
.field > span { font-size: var(--text-label); font-weight: var(--weight-heavy); color: #40545e; letter-spacing: 0.02em; }
.field input, .field textarea, .field select { width: 100%; border: 1px solid #d7e1e3; border-radius: 10px; padding: 12px; outline: none; resize: vertical; background: white; color: var(--navy); }
.field input { height: 44px; }
.field select { height: 44px; }
.publish-modal { width: min(780px, 100%); padding: 38px; }
.form-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 20px 0; }
.form-grid .wide { grid-column: 1 / -1; }
.highlight-field { background: #ecfaf8; padding: 14px; border-radius: 12px; }
.photo-gallery-editor { margin: 0 0 18px; }
.photo-previews {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 10px;
}
.photo-preview-item {
  position: relative;
  aspect-ratio: 1;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: #eef4f5;
}
.photo-preview-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-preview-item button {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 50%;
  background: rgba(7,27,45,.82);
  color: white;
  font-size: var(--text-lead);
  line-height: 1;
  cursor: pointer;
}
.photo-cover-badge {
  position: absolute;
  left: 6px;
  bottom: 6px;
  padding: 3px 7px;
  border-radius: 999px;
  background: var(--aqua);
  color: var(--on-teal);
  font-size: var(--text-label);
  font-weight: var(--weight-heavy);
}
.photo-upload {
  min-height: 110px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border: 1px dashed #9eb5b7;
  border-radius: 13px;
  background: #f7fbfb;
  cursor: pointer;
  overflow: hidden;
  position: relative;
  text-align: center;
  padding: 12px;
}
.photo-upload.add-photo { min-height: 110px; aspect-ratio: 1; }
.photo-upload input { position: absolute; opacity: 0; pointer-events: none; }
.photo-upload b { font-size: var(--icon-md); color: var(--aqua-dark); }
.photo-upload strong { color: var(--navy); font-size: var(--text-label); }
.photo-upload small { color: var(--muted); font-size: var(--text-label); line-height: 1.35; }
.photo-hint { margin: 10px 0 0; color: var(--muted); font-size: var(--text-label); }

.terms-backdrop { z-index: 95; }
.terms-modal { width: min(590px, 100%); max-height: calc(100vh - 48px); overflow-y: auto; padding: 38px; border-radius: 22px; background: white; box-shadow: 0 20px 60px rgba(0,0,0,.22); position: relative; }
.terms-modal .close-button { background: #eef4f5; color: var(--navy); }
.terms-modal h2 { max-width: 470px; margin: 10px 0 8px; color: var(--navy); font-size: var(--text-feature); line-height: 1.08; letter-spacing: var(--tracking-headline); font-weight: var(--weight-heavy); }
.terms-modal > p { margin: 0 0 20px; color: var(--muted); font-size: var(--text-label); line-height: 1.55; }
.terms-modal > .field { margin-top: 13px; }
.terms-modal .field input[readonly] { background: #f3f7f8; color: var(--muted); }
.auth-email-note { margin: 14px 0 0; padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; border: 1px solid var(--line); border-radius: 10px; background: #f6f9fa; }
.auth-email-note b { color: #40545e; font-size: var(--text-label); }
.auth-email-note span { color: var(--muted); font-size: var(--text-label); line-height: 1.45; }
.auth-switch { margin-top: 14px; width: 100%; border: 0; background: transparent; color: var(--aqua-dark); font-size: var(--text-label); font-weight: var(--weight-heavy); cursor: pointer; }
.auth-modal .consent-list label strong { font-weight: var(--weight-heavy); color: var(--navy); }

.account-backdrop { z-index: 90; align-items: stretch; justify-items: end; padding: 0; }
.account-panel { width: min(980px, 100vw); height: 100vh; height: 100dvh; background: #f7fafb; box-shadow: -12px 0 40px rgba(0,0,0,.14); display: flex; flex-direction: column; animation: slideIn var(--motion-panel) var(--ease-out); overflow: hidden; }
.account-panel-head { min-height: 110px; padding: 28px 28px 18px; display: flex; justify-content: space-between; gap: 18px; border-bottom: 1px solid var(--line); background: white; }
.account-panel-head h2 { margin: 6px 0 6px; color: var(--navy); font-size: var(--text-feature); letter-spacing: var(--tracking-headline); }
.account-panel-head p { margin: 0; color: var(--muted); font-size: var(--text-label); max-width: 520px; }
.account-tabs { display: flex; gap: 8px; padding: 14px 28px; background: white; border-bottom: 1px solid var(--line); }
.account-tabs button { border: 1px solid var(--line); background: #f4f8f9; color: #5d717c; border-radius: 999px; padding: 10px 16px; font-size: var(--text-label); font-weight: var(--weight-heavy); cursor: pointer; }
.account-tabs button.active { background: var(--navy); border-color: var(--navy); color: white; }
.account-tabs button b { margin-left: 6px; }
.account-section { flex: 1; overflow-y: auto; padding: 22px 28px 36px; }
.account-section-actions { display: flex; justify-content: space-between; gap: 16px; align-items: center; margin-bottom: 18px; }
.account-section-actions p, .account-section-lead { margin: 0 0 18px; color: var(--muted); font-size: var(--text-label); }
.account-loading { padding: 48px; text-align: center; color: var(--muted); font-weight: var(--weight-bold); }
.account-listing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.account-listing-card { display: grid; grid-template-columns: 132px 1fr; gap: 14px; padding: 14px; border-radius: 18px; background: white; border: 1px solid var(--line); }
.account-listing-media { position: relative; border: 0; padding: 0; background: transparent; cursor: pointer; border-radius: 14px; overflow: hidden; }
.account-listing-media img { width: 100%; height: 132px; object-fit: cover; display: block; }
.account-listing-card h3 { margin: 4px 0 6px; color: var(--navy); font-size: var(--text-lead); font-weight: var(--weight-heavy); }
.account-listing-card p { margin: 0 0 8px; color: var(--muted); font-size: var(--text-caption); }
.account-listing-card strong { color: var(--navy); font-size: var(--text-body-sm); }
.account-card-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.account-card-actions button, .account-match-actions button { border: 1px solid #c5d5db; background: white; color: var(--navy); border-radius: 999px; padding: 8px 12px; font-size: var(--text-caption); font-weight: var(--weight-heavy); cursor: pointer; }
.account-card-actions button:hover, .account-match-actions button:hover { border-color: var(--aqua-dark); background: #effaf8; color: var(--aqua-dark); }
.account-card-actions button.danger,
.account-match-actions button.danger {
  border-color: #e7b4af;
  color: #9a2f2a;
}
.account-card-actions button.danger:hover,
.account-match-actions button.danger:hover {
  border-color: #e39a94;
  background: #fde8e6;
  color: #7a1f1f;
}
.account-card-actions button:disabled { opacity: 0.55; cursor: not-allowed; }
.account-match-actions .whatsapp-match-button.compact { border: 0; color: white; }
.account-match-list { display: grid; gap: 16px; }
.account-match-card { padding: 18px; border-radius: 20px; background: white; border: 1px solid var(--line); }
.account-match-pair { display: grid; grid-template-columns: 1fr auto 1fr; gap: 14px; align-items: start; }
.account-match-pair > div { display: grid; gap: 4px; }
.account-match-pair img { width: 100%; height: 160px; object-fit: cover; border-radius: 14px; margin-bottom: 8px; }
.account-match-pair small { color: var(--aqua-dark); font-size: var(--text-meta); letter-spacing: var(--tracking-label); font-weight: var(--weight-heavy); }
.account-match-pair strong { color: var(--navy); font-size: var(--text-lead); }
.account-match-pair span, .account-match-pair p { color: var(--muted); font-size: var(--text-caption); margin: 0; line-height: 1.45; }
.account-match-pair b { color: var(--navy); font-size: var(--text-body); margin: 4px 0; }
.account-match-pair p small { display: block; margin-bottom: 2px; letter-spacing: var(--tracking-meta); }
.account-match-pair > i { margin-top: 70px; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; background: #ddf8f4; color: #087e74; font-style: normal; font-weight: var(--weight-heavy); }
.account-match-actions { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.account-match-actions time { margin-right: auto; color: var(--muted); font-size: var(--text-caption); }
.consent-list { margin: 20px 0 15px; display: flex; flex-direction: column; gap: 10px; }
.consent-list label { display: grid; grid-template-columns: 18px 1fr; gap: 9px; align-items: start; padding: 11px 12px; border: 1px solid var(--line); border-radius: 11px; background: #fbfdfd; cursor: pointer; }
.consent-list label.marketing-choice { background: #effaf8; border-color: #c6e7e2; }
.consent-list input { width: 16px; height: 16px; margin: 1px 0 0; accent-color: var(--aqua-dark); }
.consent-list span { color: #536872; font-size: var(--text-label); line-height: 1.5; }
.consent-list a { color: var(--aqua-dark); font-weight: var(--weight-heavy); }
.consent-list b { color: var(--navy); }
.form-error { margin: -3px 0 10px !important; padding: 10px 12px; border-radius: 9px; background: #fff0ef; color: #ad3f3a !important; font-size: var(--text-caption) !important; font-weight: var(--weight-bold); line-height: 1.45; }
.auth-page {
  min-height: calc(100vh - 200px);
  padding: 42px 20px 70px;
  display: grid;
  place-items: center;
  background: linear-gradient(160deg, #ecf7f6 0%, #f7fbfb 48%, #e8f2f4 100%);
}
.auth-page-card {
  width: min(480px, 100%);
  padding: 34px 28px 28px;
  border-radius: 22px;
  background: white;
  border: 1px solid var(--line);
  box-shadow: 0 24px 60px rgba(7,27,45,.1);
}
.auth-page-brand { margin-bottom: 18px; }
.auth-page-brand .brand-logo { height: 56px; max-width: 260px; }
.auth-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 22px;
  padding: 6px;
  border-radius: 14px;
  background: #f1f6f7;
}
.auth-tabs a {
  min-height: 42px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  color: #5d717c;
  text-decoration: none;
  font-size: var(--text-ui);
  font-weight: var(--weight-heavy);
}
.auth-tabs a.active {
  background: white;
  color: var(--navy);
  box-shadow: 0 6px 16px rgba(7,27,45,.08);
}
.auth-page-form h1 {
  margin: 8px 0 8px;
  color: var(--navy);
  font-size: var(--text-subhead);
  letter-spacing: var(--tracking-headline);
  line-height: 1.15;
  font-weight: var(--weight-heavy);
}
.auth-page-form > p {
  margin: 0 0 18px;
  color: var(--muted);
  font-size: var(--text-body-sm);
  line-height: 1.55;
  max-width: 45ch;
}
.auth-page-form .field { margin-top: 12px; }
.auth-page-actions {
  margin-top: 22px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.auth-page-card > h1 {
  margin: 10px 0 8px;
  color: var(--navy);
  font-size: var(--text-subhead);
  letter-spacing: var(--tracking-headline);
  font-weight: var(--weight-heavy);
}
.auth-page-card > p {
  margin: 0;
  color: var(--muted);
  font-size: var(--text-body-sm);
  line-height: 1.55;
  max-width: 45ch;
}

.legal-page { min-height: 100vh; background: #f4f8f9; }
.legal-header { min-height: 70px; padding: 0 clamp(20px, 6vw, 82px); display: flex; align-items: center; justify-content: space-between; gap: 20px; background: white; border-bottom: 1px solid var(--line); }
.legal-header > a:last-child { color: var(--navy); font-size: var(--text-caption); font-weight: var(--weight-heavy); text-decoration: none; }
.legal-content { width: min(820px, calc(100% - 32px)); margin: 44px auto 70px; padding: clamp(28px, 5vw, 58px); border: 1px solid var(--line); border-radius: 22px; background: white; box-shadow: 0 18px 55px rgba(5,29,46,.07); }
.legal-kicker { color: var(--aqua-dark); font-size: var(--text-label); font-weight: var(--weight-heavy); letter-spacing: var(--tracking-label); text-transform: uppercase; }
.legal-content h1 { margin: 10px 0 8px; color: var(--navy); font-size: var(--text-headline); letter-spacing: var(--tracking-headline); font-weight: var(--weight-heavy); }
.legal-updated { margin: 0 0 34px; color: var(--muted); font-size: var(--text-caption); }
.legal-content section { padding: 22px 0; border-top: 1px solid #e8edef; }
.legal-content h2 { margin: 0 0 9px; color: var(--navy); font-size: var(--text-lead); font-weight: var(--weight-heavy); }
.legal-content p, .legal-content li { color: #506570; font-size: var(--text-body-sm); line-height: 1.7; max-width: 70ch; }
.legal-content p { margin: 0 0 10px; }
.legal-company { padding: 15px 17px; border: 1px solid #c8e5e1; border-radius: 12px; background: #effaf8; }
.legal-company strong { color: var(--navy); }
.legal-content ul { margin: 8px 0 0; padding-left: 19px; }
.legal-content a { color: var(--aqua-dark); font-weight: var(--weight-bold); }
.legal-contact { padding: 18px !important; border: 0 !important; border-radius: 13px; background: #eaf8f6; }

.referral-backdrop { z-index: 88; }
.referral-modal { width: min(880px, 100%); max-height: calc(100vh - 48px); overflow-y: auto; padding: 38px; border-radius: 24px; background: #f7fafb; box-shadow: 0 20px 60px rgba(0,0,0,.22); position: relative; }
.referral-modal .close-button { background: #e7eef0; color: var(--navy); }
.referral-head { padding-right: 45px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.referral-head h2 { margin: 8px 0 5px; color: var(--navy); font-size: var(--text-subhead); letter-spacing: var(--tracking-headline); font-weight: var(--weight-heavy); }
.referral-head p { margin: 0; color: var(--muted); font-size: var(--text-body-sm); line-height: 1.5; max-width: 48ch; }
.current-level { min-width: 172px; padding: 13px 15px; display: flex; align-items: center; gap: 11px; border-radius: 15px; background: var(--navy); color: white; }
.current-level > i { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; background: rgba(16,197,181,.16); font-style: normal; font-size: var(--icon-sm); }
.current-level span { display: flex; flex-direction: column; }
.current-level small { color: #78dcd3; font-size: var(--text-meta); font-weight: var(--weight-heavy); letter-spacing: var(--tracking-meta); }
.current-level strong { margin-top: 4px; font-size: var(--text-ui); }
.referral-stats { margin: 24px 0 14px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; }
.referral-stats > div { padding: 16px; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 13px; background: white; }
.referral-stats .qualified { border-color: #b6e5df; background: #eafaf8; }
.referral-stats strong { color: var(--navy); font-size: var(--text-subhead); }
.referral-stats span { margin-top: 3px; color: var(--muted); font-size: var(--text-meta); font-weight: var(--weight-heavy); text-transform: uppercase; letter-spacing: var(--tracking-meta); }
.referral-progress-card, .referral-share-card, .referral-reward, .referral-levels { margin-top: 12px; padding: 18px; border: 1px solid var(--line); border-radius: 15px; background: white; }
.referral-progress-card > div:first-child { display: flex; justify-content: space-between; gap: 12px; color: var(--navy); font-size: var(--text-label); }
.referral-progress-card > div:first-child span { font-weight: var(--weight-heavy); }
.referral-progress { height: 8px; margin: 11px 0 8px; border-radius: 999px; overflow: hidden; background: #e4ecee; }
.referral-progress i {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg,var(--aqua-dark),var(--aqua));
  transform-origin: left center;
  transform: scaleX(0);
  will-change: transform;
  transition: transform .25s var(--ease-out);
}
.referral-progress-card small { color: var(--muted); font-size: var(--text-meta); line-height: 1.5; }
.referral-share-card > div:first-child span, .referral-levels > div:first-child span { color: var(--aqua-dark); font-size: var(--text-meta); font-weight: var(--weight-heavy); letter-spacing: var(--tracking-label); }
.referral-share-card > div:first-child strong { display: block; margin-top: 5px; color: var(--navy); font-size: var(--text-body); }
.referral-share-card > div:first-child p { margin: 5px 0 11px; color: var(--muted); font-size: var(--text-label); }
.referral-benefit-duo { margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
.referral-benefit-duo strong { flex: 1; padding: 11px 13px; display: flex; flex-direction: column; border: 1px solid #bce7e1; border-radius: 11px; background: #eafaf7; }
.referral-benefit-duo b { color: #087d73; font-size: var(--text-lead); }
.referral-benefit-duo small { margin-top: 2px; color: #536d70; font-size: var(--text-meta); }
.referral-benefit-duo i { color: var(--aqua-dark); font-style: normal; font-weight: var(--weight-heavy); }
.referral-share-card > label { display: flex; padding: 5px; border: 1px solid #c9dadd; border-radius: 11px; background: #f7fafb; }
.referral-share-card input { min-width: 0; flex: 1; border: 0; outline: 0; padding: 0 9px; background: transparent; color: #38515c; font-size: var(--text-label); }
.referral-share-card label button { min-height: 44px; padding: 0 13px; border: 0; border-radius: 8px; background: var(--aqua); color: var(--on-teal); font-size: var(--text-label); font-weight: var(--weight-heavy); cursor: pointer; }
.referral-share-card label button:hover { background: var(--aqua-hover); }
.referral-share-actions { margin-top: 9px; display: flex; align-items: center; gap: 8px; }
.referral-share-actions a, .referral-share-actions button { min-height: 44px; padding: 0 12px; display: inline-flex; align-items: center; border: 1px solid #c5d5db; border-radius: 9px; background: white; color: var(--navy); text-decoration: none; font-size: var(--text-label); font-weight: var(--weight-heavy); cursor: pointer; }
.referral-share-actions a:hover, .referral-share-actions button:hover { border-color: var(--aqua-dark); background: #effaf8; color: var(--aqua-dark); }
.referral-share-actions a { border-color: var(--aqua); background: var(--aqua); color: var(--on-teal); }
.referral-share-actions a:hover { background: var(--aqua-hover); color: var(--on-teal); border-color: var(--aqua-hover); }
.referral-share-actions > span { margin-left: auto; color: var(--muted); font-size: var(--text-meta); }
.referral-share-actions b { color: var(--navy); }
.referral-reward { display: grid; grid-template-columns: 1fr 1.25fr; align-items: center; gap: 20px; }
.referral-reward.has-reward { border-color: #b7e4de; background: #f3faf8; }
.reward-total { display: flex; align-items: center; gap: 12px; }
.reward-total > i { width: 43px; height: 43px; display: grid; place-items: center; border-radius: 13px; background: #e7f7f4; color: #0a6b63; font-style: normal; font-size: var(--icon-sm); }
.reward-total > span { display: flex; flex-direction: column; }
.reward-total small { color: var(--aqua-dark); font-size: var(--text-meta); font-weight: var(--weight-heavy); letter-spacing: var(--tracking-meta); }
.reward-total strong { margin-top: 3px; color: var(--navy); font-size: var(--text-title); }
.reward-total em { margin-top: 2px; color: var(--muted); font-size: var(--text-meta); font-style: normal; }
.referral-reward > p { margin: 0; color: var(--muted); font-size: var(--text-label); line-height: 1.55; }
.reward-activate { display: flex; align-items: end; gap: 8px; }
.reward-activate label { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 6px; }
.reward-activate label span { color: #5c6f78; font-size: var(--text-meta); font-weight: var(--weight-heavy); }
.reward-activate select { width: 100%; height: 40px; border: 1px solid #d4dfe1; border-radius: 9px; padding: 0 10px; background: white; color: var(--navy); font-size: var(--text-label); }
.reward-activate button, .reward-publish { min-height: 40px; padding: 0 13px; border: 0; border-radius: 9px; background: var(--aqua); color: var(--on-teal); font-size: var(--text-label); font-weight: var(--weight-heavy); cursor: pointer; }
.reward-activate button:hover, .reward-publish:hover { background: var(--aqua-hover); }
.referral-levels > div:first-child { display: flex; align-items: center; justify-content: space-between; }
.referral-levels > div:first-child small { color: var(--muted); font-size: var(--text-meta); }
.levels-grid { margin-top: 13px; display: grid; grid-template-columns: repeat(5, 1fr); gap: 7px; }
.levels-grid article { padding: 12px 7px; display: flex; flex-direction: column; align-items: center; border: 1px solid #e1e8ea; border-radius: 11px; background: #f8fafb; text-align: center; opacity: .68; }
.levels-grid article.reached { opacity: 1; border-color: #bfddd9; background: #f0faf8; }
.levels-grid article.current { opacity: 1; border-color: #9fd0ca; background: #f2faf8; box-shadow: none; }
.levels-grid i { font-style: normal; font-size: var(--icon-sm); }
.levels-grid strong { margin-top: 5px; color: var(--navy); font-size: var(--text-label); }
.levels-grid span { margin-top: 3px; color: var(--muted); font-size: var(--text-meta); }
.referral-privacy { margin: 13px 2px 0; color: var(--muted); font-size: var(--text-meta); line-height: 1.6; }
.referral-privacy a { color: var(--aqua-dark); font-weight: var(--weight-heavy); }
.referral-loading { min-height: 340px; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--muted); text-align: center; }
.referral-loading > span { width: 50px; height: 50px; display: grid; place-items: center; border-radius: 15px; background: #dff8f4; color: var(--aqua-dark); font-size: var(--text-subhead); font-weight: var(--weight-heavy); }
.referral-loading button { padding: 10px 14px; border: 0; border-radius: 9px; background: var(--aqua); color: var(--on-teal); font-size: var(--text-label); font-weight: var(--weight-heavy); cursor: pointer; }
.referral-loading button:hover { background: var(--aqua-hover); }

.messages-backdrop { place-items: stretch end; padding: 0; background: rgba(4,17,29,.55); }
.messages-panel { width: min(900px, 96vw); height: 100vh; height: 100dvh; background: white; box-shadow: -12px 0 40px rgba(0,0,0,.14); display: flex; flex-direction: column; animation: slideIn var(--motion-panel) var(--ease-out); }
@keyframes slideIn { from { transform: translateX(100%); } to { transform: none; } }
.messages-panel > header { min-height: 86px; padding: 22px 26px; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; }
.messages-panel h2 { margin: 4px 0 0; color: var(--navy); font-size: var(--text-subhead); font-weight: var(--weight-heavy); }
.close-button.inline { position: static; background: #edf3f4; color: var(--navy); }
.signin-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 30px; }
.signin-empty > span { width: 54px; height: 54px; display: grid; place-items: center; border-radius: 12px; background: #e3f8f5; color: var(--aqua-dark); font-size: var(--text-subhead); }
.signin-empty h3 { color: var(--navy); font-size: var(--text-title); margin: 17px 0 7px; }
.signin-empty p { max-width: 350px; color: var(--muted); font-size: var(--text-label); margin: 0 0 19px; }
.chat-layout { flex: 1; min-height: 0; display: grid; grid-template-columns: 300px 1fr; }
.chat-layout aside { overflow-y: auto; border-right: 1px solid var(--line); padding: 10px; }
.chat-layout aside button { width: 100%; border: 0; background: white; border-radius: 11px; padding: 10px; display: flex; gap: 10px; text-align: left; cursor: pointer; }
.chat-layout aside button:hover, .chat-layout aside button.active { background: #eef8f7; }
.chat-layout aside img { width: 50px; height: 48px; object-fit: cover; border-radius: 9px; }
.chat-layout aside span { min-width: 0; display: flex; flex-direction: column; justify-content: center; }
.chat-layout aside strong { font-size: var(--text-ui); color: var(--navy); }
.chat-layout aside small { font-size: var(--text-label); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 4px; }
.conversation-view { min-width: 0; display: flex; flex-direction: column; background: #f7fafb; }
.conversation-head { height: 70px; padding: 10px 16px; display: flex; gap: 11px; align-items: center; background: white; border-bottom: 1px solid var(--line); }
.conversation-head img { width: 48px; height: 48px; object-fit: cover; border-radius: 9px; }
.conversation-head span { display: flex; flex-direction: column; }
.conversation-head small { color: var(--aqua-dark); font-size: var(--text-meta); font-weight: var(--weight-heavy); letter-spacing: var(--tracking-meta); }
.conversation-head strong { color: var(--navy); font-size: var(--text-label); margin-top: 4px; }
.message-list { flex: 1; overflow-y: auto; padding: 20px; display: flex; flex-direction: column; gap: 10px; }
.message-bubble { max-width: 75%; padding: 11px 13px 8px; border-radius: 14px; box-shadow: 0 3px 10px rgba(7,27,45,.05); }
.message-bubble.mine { align-self: flex-end; background: var(--navy); color: white; border-bottom-right-radius: 4px; }
.message-bubble.theirs { align-self: flex-start; background: white; color: var(--ink); border-bottom-left-radius: 4px; }
.message-bubble small { font-size: var(--text-meta); opacity: .62; font-weight: var(--weight-heavy); }
.message-bubble p { margin: 5px 0; font-size: var(--text-label); line-height: 1.45; }
.message-bubble time { display: block; text-align: right; font-size: var(--text-meta); opacity: .55; }
.message-composer { display: flex; gap: 9px; padding: 13px; background: white; border-top: 1px solid var(--line); }
.message-composer input { flex: 1; height: 44px; border: 1px solid #d5e0e2; border-radius: 999px; padding: 0 17px; outline: none; }
.message-composer button { width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--aqua); color: var(--on-teal); font-size: var(--icon-sm); font-weight: var(--weight-heavy); cursor: pointer; }
.message-composer button:hover { background: var(--aqua-hover); }
.message-composer button:disabled { opacity: .45; cursor: default; }
.match-backdrop { z-index: 85; background: rgba(3,16,27,.78); }
.match-modal {
  width: min(500px, 100%);
  padding: 40px 36px 28px;
  border-radius: 22px;
  background: white;
  box-shadow: 0 20px 60px rgba(0,0,0,.22);
  text-align: center;
  position: relative;
  overflow: hidden;
  animation: matchModalIn var(--motion-focal) var(--ease-out) both;
}
@keyframes matchModalIn {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}
@keyframes matchAssetIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}
@keyframes matchHeartIn {
  from { opacity: 0; transform: scale(0.85); }
  to { opacity: 1; transform: scale(1); }
}
.match-kicker { color: var(--aqua-dark); font-size: var(--text-label); font-weight: var(--weight-heavy); letter-spacing: var(--tracking-label); text-transform: uppercase; }
.match-modal h2 { margin: 9px 0 6px; color: var(--navy); font-size: var(--text-headline); letter-spacing: var(--tracking-headline); font-weight: var(--weight-heavy); }
.match-modal > p { max-width: 42ch; margin: 0 auto; color: var(--muted); font-size: var(--text-body-sm); line-height: 1.6; }
.matched-assets { margin: 28px 0 22px; display: flex; align-items: flex-start; justify-content: center; position: relative; z-index: 1; }
.matched-assets > div, .match-asset { width: 145px; display: flex; flex-direction: column; align-items: center; }
.match-asset-own { animation: matchAssetIn .46s var(--ease-out) .06s both; }
.match-asset-theirs { animation: matchAssetIn .46s var(--ease-out) .14s both; }
.matched-assets img { width: 112px; height: 112px; border-radius: 50%; object-fit: cover; border: 4px solid white; box-shadow: 0 6px 16px rgba(7,27,45,.12); }
.match-asset-own img { transform: rotate(-3deg); }
.match-asset-theirs img { transform: rotate(3deg); }
.match-heart {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  margin: 30px -12px 0;
  z-index: 2;
  border-radius: 50%;
  background: var(--aqua);
  color: var(--on-teal);
  border: 4px solid white;
  box-shadow: 0 4px 14px rgba(7,27,45,.14);
  animation: matchHeartIn .4s var(--ease-out) .12s both;
}
.matched-assets strong { width: 100%; margin-top: 8px; color: var(--navy); font-size: var(--text-label); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.matched-assets small { color: var(--muted); font-size: var(--text-meta); margin-top: 3px; }
.continue-swiping { margin-top: 13px; border: 0; background: transparent; color: var(--muted); font-size: var(--text-caption); font-weight: var(--weight-bold); cursor: pointer; }
.whatsapp-match-button {
  margin-top: 12px;
  width: 100%;
  min-height: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  border: 0;
  background: #20b86e;
  color: white;
  font-size: var(--text-body-sm);
  font-weight: var(--weight-heavy);
  text-decoration: none;
  box-shadow: 0 6px 16px rgba(32,184,110,.14);
}
.whatsapp-match-button:hover { background: #1aa562; transform: translateY(-1px); }
.whatsapp-match-button.compact {
  margin-top: 0;
  width: auto;
  min-height: 38px;
  padding: 0 14px;
  border-radius: 999px;
  font-size: var(--text-caption);
  box-shadow: none;
}
.toast {
  position: fixed;
  z-index: 100;
  left: 50%;
  bottom: max(28px, calc(16px + env(safe-area-inset-bottom, 0px)));
  transform: translateX(-50%);
  padding: 13px 18px;
  border-radius: 11px;
  background: var(--navy);
  color: white;
  box-shadow: var(--shadow);
  font-size: var(--text-label);
  font-weight: var(--weight-bold);
  animation: toastIn .2s ease;
  max-width: min(520px, calc(100vw - 32px));
}
@keyframes toastIn { from { transform: translate(-50%, 20px); opacity: 0; } }

/* Notebooks / monitores médios: enxuga a barra antes de colapsar */
@media (max-width: 1500px) {
  .topbar { gap: 18px; padding-inline: clamp(16px, 3vw, 40px); }
  .main-nav { gap: 18px; }
  .main-nav .referral-nav-button { display: none; }
  .brand-logo { height: 48px; max-width: min(220px, 28vw); }
}

/* Abaixo disso o menu horizontal não cabe — usa hamburger */
@media (max-width: 1280px) {
  .main-nav { display: none; }
  .account-actions { margin-left: auto; }
  .nav-toggle { display: inline-flex; }
  .swipe-quick-button { display: inline-grid; }
  .account-menu { display: none; }
  .login-link { display: none; }
  .brand-logo { height: 44px; max-width: min(160px, 42vw); }
  .topbar { gap: 12px; }
  .mobile-nav-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 40;
    background: rgba(4, 17, 29, .48);
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease;
  }
  .mobile-nav-backdrop.is-open {
    opacity: 1;
    pointer-events: auto;
  }
  .mobile-nav {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    right: 0;
    z-index: 45;
    width: min(360px, 88vw);
    height: 100vh;
    height: 100dvh;
    padding: calc(18px + env(safe-area-inset-top, 0px)) 18px calc(24px + env(safe-area-inset-bottom, 0px));
    background: #fff;
    border-left: 1px solid rgba(7,27,45,.08);
    box-shadow: -18px 0 48px rgba(7,27,45,.18);
    transform: translateX(104%);
    visibility: hidden;
    pointer-events: none;
    transition: transform .28s var(--ease-out), visibility .28s;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .mobile-nav.is-open {
    transform: translateX(0);
    visibility: visible;
    pointer-events: auto;
  }
  .mobile-nav-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
    color: var(--navy);
    font-size: var(--text-lead);
    font-weight: var(--weight-heavy);
  }
  .mobile-nav-close {
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 11px;
    background: #eef4f5;
    color: var(--navy);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
  }
  .mobile-nav-links,
  .mobile-nav-account {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  .mobile-nav-links a,
  .mobile-nav-links button,
  .mobile-nav-account a,
  .mobile-nav-account button {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 52px;
    padding: 0 14px;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: var(--navy);
    text-decoration: none;
    text-align: left;
    font: inherit;
    font-size: var(--text-body);
    font-weight: var(--weight-bold);
    cursor: pointer;
  }
  .mobile-nav-links a:hover,
  .mobile-nav-links button:hover,
  .mobile-nav-account a:hover,
  .mobile-nav-account button:hover {
    background: #eef8f6;
    color: var(--aqua-dark);
  }
  .mobile-nav-links a[aria-current="page"] {
    background: #e6faf7;
    color: var(--aqua-dark);
  }
  .mobile-nav-links .referral-nav-button {
    margin-top: 8px;
    background: #e6faf7;
    color: #087b72;
    justify-content: flex-start;
    flex-wrap: wrap;
    height: auto;
    min-height: 52px;
    padding-top: 12px;
    padding-bottom: 12px;
  }
  .mobile-nav-account {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--line);
  }
  .mobile-nav-user {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
    padding: 4px 8px 12px;
  }
  .mobile-nav-user strong {
    display: block;
    color: var(--navy);
    font-size: var(--text-body-sm);
  }
  .mobile-nav-user small {
    color: var(--muted);
    font-size: var(--text-caption);
    word-break: break-all;
  }
  .mobile-nav-login,
  .mobile-nav-signup {
    justify-content: center !important;
    font-weight: var(--weight-heavy) !important;
  }
  .mobile-nav-login {
    background: var(--navy) !important;
    color: #fff !important;
  }
  .mobile-nav-signup {
    border: 1px solid #c5d5db !important;
  }
  .mobile-nav-account .logout-button { color: #bd3d3d; }
  .mobile-nav .nav-badge {
    margin-left: auto;
  }
  body.nav-open { overflow: hidden; }
}

@media (max-width: 1100px) {
  .hero { grid-template-columns: 1fr; }
  .listing-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .swipe-zone { grid-template-columns: .8fr 1fr; gap: 40px; padding-inline: 50px; }
  .referral-strip { grid-template-columns: auto 1fr auto; }
  .referral-strip-icon { grid-row: 1 / 3; }
  .referral-strip-benefits { grid-column: 2; }
  .referral-strip > button { grid-column: 3; grid-row: 1 / 3; }
  .category-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .detail-modal {
    grid-template-columns: 1fr;
    width: min(100%, calc(100vw - 20px));
  }
  .detail-gallery-stage,
  .detail-gallery-stage > img,
  .detail-modal > img {
    min-height: 260px;
    max-height: 320px;
    height: 280px;
  }
}

@media (max-width: 760px) {
  .topbar {
    height: calc(64px + env(safe-area-inset-top, 0px));
    padding: env(safe-area-inset-top, 0px) max(12px, env(safe-area-inset-right, 0px)) 0 max(12px, env(safe-area-inset-left, 0px));
    gap: 10px;
  }
  .brand { font-size: var(--text-title); }
  .brand-logo { height: 40px; max-width: min(148px, 40vw); }
  .account-name { display: none; }
  .account-actions { gap: 8px; flex-shrink: 0; }
  .login-link { display: none; }
  .publish-button { width: 44px; height: 44px; padding: 0; border-radius: 11px; flex: 0 0 auto; }
  .publish-button > b { display: none; }
  .publish-button > span { font-size: var(--text-lead); }
  .hero {
    min-height: min(72vh, 620px);
    align-items: end;
  }
  .hero-copy {
    width: 100%;
    padding: 48px max(22px, env(safe-area-inset-right, 0px)) 56px max(22px, env(safe-area-inset-left, 0px));
  }
  .hero-brand .brand-logo.strip {
    height: 44px;
    max-width: min(220px, 70vw);
  }
  .hero h1 {
    max-width: 12ch;
    font-size: clamp(2rem, 9vw, 2.6rem);
  }
  .hero-copy > p { max-width: 34ch; font-size: var(--text-body); }
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .primary-action,
  .hero-actions .secondary-action { width: 100%; }
  .hero-media-img { object-position: 70% center; }
  .trust-row { gap: 12px; }
  .how-it-works {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 14px;
    padding: 28px 18px;
    overflow: visible;
  }
  .how-it-works > i { display: none; }
  .how-it-works > div {
    min-width: 0;
    width: 100%;
    padding: 14px 14px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #f7fbfb;
  }
  .how-guide-link {
    align-self: flex-start;
    margin-top: 4px;
  }
  .guide-grid { grid-template-columns: 1fr; padding-top: 28px; }
  .guide-hero { padding: 42px 20px 34px; }
  .guide-tips, .guide-cta { margin-left: 16px; margin-right: 16px; }
  .guide-hero-actions .primary-action,
  .guide-hero-actions .secondary-action { width: 100%; }
  .swipe-page-hero { padding: 34px 18px 28px; }
  .swipe-page-hero h1 { font-size: clamp(1.9rem, 8vw, 2.5rem); max-width: 12ch; }
  .swipe-page-actions { width: 100%; }
  .swipe-page-actions .primary-action,
  .swipe-page-actions .secondary-action { flex: 1 1 100%; }
  .page-swipe .swipe-zone-focus { padding-top: 28px; gap: 28px; }
  .page-swipe .swipe-zone-focus .swipe-experience { order: -1; }
  .page-swipe .swipe-intro-compact .swipe-hint { margin-bottom: 14px; }
  .referral-strip { padding: 25px 18px; grid-template-columns: auto 1fr; }
  .referral-strip-icon { grid-row: auto; }
  .referral-strip h2 { font-size: var(--text-lead); }
  .referral-strip-benefits {
    grid-column: 1 / -1;
    justify-content: stretch;
    min-width: 0;
    width: 100%;
  }
  .referral-strip-benefits strong {
    flex: 1 1 0;
    min-width: 0;
  }
  .referral-strip > button { grid-column: 1 / -1; grid-row: auto; width: 100%; min-height: 48px; }
  .category-showcase { padding: 52px 16px 58px; }
  .category-showcase > div:first-child { text-align: left; margin-bottom: 24px; }
  .category-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
  .category-grid button { min-height: 150px; padding: 16px; }
  .swipe-zone { min-height: auto; padding: 58px 18px calc(68px + env(safe-area-inset-bottom, 0px)); grid-template-columns: 1fr; gap: 42px; }
  .swipe-intro { text-align: center; }
  .swipe-intro h2 { font-size: var(--text-headline); letter-spacing: var(--tracking-headline); }
  .swipe-intro > p { font-size: var(--text-body-sm); }
  .swipe-legend { text-align: left; gap: 10px; }
  .swipe-legend > button { min-height: 64px; }
  .swipe-signin { justify-content: center; min-height: 44px; }
  .swipe-experience { width: 100%; max-width: 420px; margin: 0 auto; }
  .swipe-deck, .swipe-skeleton { height: min(116vw, 520px); width: 100%; }
  .swipe-card-info h3 { font-size: var(--text-feature); }
  .swipe-share { width: 44px; height: 44px; top: 12px; right: 12px; }
  .deck-status {
    width: 100%;
    font-size: var(--text-ui);
    padding: 0 4px;
    white-space: normal;
  }
  .deck-status span,
  .deck-status small {
    white-space: nowrap;
    font-size: var(--text-ui);
  }
  .swipe-controls {
    width: 100%;
    margin-top: 22px;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    gap: 22px;
  }
  .swipe-button {
    width: 64px;
    height: 64px;
    flex: 0 0 64px;
  }
  .swipe-button.info {
    width: 54px;
    height: 54px;
    flex: 0 0 54px;
  }
  .swipe-view-button {
    min-width: 96px;
    min-height: 46px;
    font-size: var(--text-body);
  }
  .swipe-hint { font-size: var(--text-caption); margin-top: 14px; }
  .marketplace { padding: 55px 16px calc(65px + env(safe-area-inset-bottom, 0px)); }
  .section-heading { align-items: flex-start; }
  .section-heading h2 { font-size: var(--text-headline); }
  .section-heading > button { display: none; }
  .filters { align-items: stretch; flex-direction: column; }
  .filters .search-box { min-width: 0; }
  .filters select,
  .filters input { min-height: 48px; }
  .listing-grid { grid-template-columns: 1fr; }
  .card-image { height: min(56vw, 260px); }
  .card-share { min-height: 44px; padding-inline: 12px; font-size: var(--text-label); }
  .owner-row { flex-wrap: wrap; }
  .owner-row button { width: 100%; justify-content: center; }
  .validation-strip {
    margin: 0 16px 55px;
    padding: 28px 20px;
    flex-direction: column;
    align-items: stretch;
    gap: 18px;
    max-width: none;
    width: auto;
    box-sizing: border-box;
  }
  .validation-strip > div {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    min-width: 0;
  }
  .validation-strip .brand-logo.strip {
    grid-row: auto;
    height: 40px;
    max-width: min(200px, 70vw);
  }
  .validation-strip h2 {
    font-size: var(--text-title);
    line-height: 1.2;
    max-width: none;
  }
  .validation-strip p {
    font-size: var(--text-body-sm);
    line-height: 1.55;
  }
  .validation-strip > button {
    width: 100%;
    min-height: 50px;
    white-space: normal;
  }
  footer {
    flex-wrap: wrap;
    padding: 25px 16px calc(25px + env(safe-area-inset-bottom, 0px));
  }
  footer p { margin-right: 0; width: 100%; order: 3; }
  .footer-links { width: 100%; order: 4; flex-wrap: wrap; gap: 12px 16px; }
  .footer-meta {
    width: 100%;
    order: 5;
    align-items: flex-start;
    text-align: left;
  }
  .modal-backdrop,
  .match-backdrop,
  .referral-backdrop,
  .terms-backdrop {
    padding: 10px 10px max(10px, env(safe-area-inset-bottom, 0px));
    align-items: end;
  }
  .detail-modal {
    grid-template-columns: 1fr;
    width: min(100%, calc(100vw - 16px));
    max-height: calc(100dvh - 20px - env(safe-area-inset-bottom, 0px));
    overflow-y: auto;
    border-radius: 20px 20px 12px 12px;
  }
  .detail-gallery-stage,
  .detail-gallery-stage > img,
  .detail-modal > img {
    width: 100%;
    height: 240px;
    min-height: 240px;
    max-height: 280px;
  }
  .detail-content {
    width: 100%;
    padding: 24px 18px calc(22px + env(safe-area-inset-bottom, 0px));
    overflow: visible;
  }
  .share-box > div { flex-direction: row; }
  .share-box button { flex: 1 1 calc(50% - 8px); font-size: var(--text-caption); min-height: 44px; }
  .proposal-modal,
  .publish-modal {
    max-height: calc(100dvh - 20px - env(safe-area-inset-bottom, 0px));
    padding: 28px 18px calc(20px + env(safe-area-inset-bottom, 0px));
    border-radius: 20px 20px 10px 10px;
  }
  .terms-modal {
    max-height: calc(100dvh - 20px - env(safe-area-inset-bottom, 0px));
    padding: 30px 18px calc(22px + env(safe-area-inset-bottom, 0px));
    border-radius: 20px 20px 10px 10px;
  }
  .terms-modal h2 { padding-right: 44px; font-size: var(--text-feature); }
  .referral-modal {
    max-height: calc(100dvh - 20px - env(safe-area-inset-bottom, 0px));
    padding: 30px 16px calc(20px + env(safe-area-inset-bottom, 0px));
    border-radius: 20px 20px 10px 10px;
  }
  .referral-head { align-items: flex-start; flex-direction: column; padding-right: 36px; gap: 14px; }
  .referral-head h2 { font-size: var(--text-feature); }
  .current-level { min-width: 0; width: 100%; }
  .referral-stats { grid-template-columns: repeat(2, 1fr); }
  .referral-progress-card > div:first-child { flex-direction: column; }
  .referral-share-actions { flex-wrap: wrap; }
  .referral-share-actions > span { width: 100%; margin-left: 0; }
  .referral-reward { grid-template-columns: 1fr; }
  .reward-activate { align-items: stretch; flex-direction: column; }
  .reward-activate button,
  .reward-publish { min-height: 44px; width: 100%; }
  .levels-grid { grid-template-columns: repeat(5, minmax(76px, 1fr)); overflow-x: auto; padding-bottom: 5px; -webkit-overflow-scrolling: touch; }
  .match-modal {
    padding: 40px 20px calc(25px + env(safe-area-inset-bottom, 0px));
    width: min(100%, calc(100vw - 16px));
  }
  .match-modal h2 { font-size: var(--text-headline); }
  .matched-assets > div,
  .match-asset { width: 125px; }
  .matched-assets img { width: 96px; height: 96px; }
  .continue-swiping { min-height: 44px; padding: 10px 12px; }
  .form-grid { grid-template-columns: 1fr; }
  .form-grid .wide { grid-column: 1 / -1; }
  .auth-page { padding: 24px 16px calc(32px + env(safe-area-inset-bottom, 0px)); }
  .auth-page-card { width: 100%; padding: 24px 18px; }
  .auth-page-actions { flex-direction: column; }
  .auth-page-actions .primary-action,
  .auth-page-actions .secondary-action { width: 100%; }
  .account-panel,
  .messages-panel {
    width: 100vw;
    height: 100dvh;
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .account-panel-head, .account-tabs, .account-section { padding-left: 16px; padding-right: 16px; }
  .account-section-actions { flex-direction: column; align-items: stretch; }
  .account-listing-card { grid-template-columns: 1fr; }
  .account-listing-media img { height: 180px; }
  .account-match-pair { grid-template-columns: 1fr; }
  .account-match-pair > i { margin: 4px auto; }
  .chat-layout { grid-template-columns: 1fr; }
  .chat-layout aside { max-height: 190px; border-right: 0; border-bottom: 1px solid var(--line); }
  .conversation-view { min-height: 0; }
  .message-composer {
    padding-bottom: max(13px, env(safe-area-inset-bottom, 0px));
  }
  .toast { width: calc(100% - 32px); text-align: center; bottom: max(16px, env(safe-area-inset-bottom, 0px)); }
  .legal-header { min-height: 64px; padding: 0 16px; }
  .legal-header .brand { font-size: var(--text-lead); }
  .legal-content { margin: 22px auto 45px; padding: 26px 20px; border-radius: 16px; }
  .whatsapp-match-button.compact { min-height: 44px; }
}

@media (max-width: 760px) and (orientation: landscape) {
  .hero { min-height: min(88vh, 560px); }
  .swipe-deck, .swipe-skeleton { height: min(70vh, 420px); }
  .detail-gallery-stage,
  .detail-gallery-stage > img {
    height: 180px;
    min-height: 180px;
    max-height: 200px;
  }
  .modal-backdrop,
  .match-backdrop,
  .referral-backdrop,
  .terms-backdrop {
    align-items: center;
  }
}

@media (hover: none) {
  .listing-card:hover { transform: none; box-shadow: none; }
  .listing-card:hover .card-image img { transform: none; }
  .category-grid button:hover { transform: none; box-shadow: none; }
  .swipe-button:hover { transform: none; }
  .primary-action:hover,
  .publish-button:hover,
  .whatsapp-match-button:hover { transform: none; }
}

@media (pointer: coarse) {
  .main-nav a,
  .main-nav button {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  .login-link {
    min-height: 44px;
  }
  .swipe-legend > button { min-height: 64px; }
  .filters select,
  .filters input,
  .field input,
  .field select { min-height: 48px; }
}

@media (prefers-reduced-transparency: reduce) {
  .topbar { backdrop-filter: none; background: #ffffff; }
}

.swipe-deck,
.swipe-experience {
  contain: layout style;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .swipe-skeleton,
  .skeleton { animation: none !important; }
  .swipe-page-orb,
  .swipe-zone-glow,
  .swipe-zone::before,
  .swipe-featured { animation: none !important; }
  .swipe-button:hover,
  .listing-card:hover,
  .primary-action:hover { transform: none; }
}