/* ============================================================
   Zera — Premium Light Theme
   ============================================================ */

:root,
:root[data-theme="light"] {
  /* ============================================================
     ZERA INDIGO — LIGHT
     Pure white page + warm near-black ink + a 4-tier indigo accent
     tuned to the Zera logo wordmark (#6366F1). The hero tone drives
     logo / large-moment surfaces; the deeper tone carries UI text,
     italic emphasis, and small elements where contrast matters.
     Soft + mist handle hover and background tints respectively.
     ============================================================ */

  /* ===== Canonical tokens (authoritative) ===== */
  --color-bg: #FFFFFF;
  --color-surface: #FAFAF8;
  --color-surface-raised: #FFFFFF;
  --color-ink: #1A1612;
  --color-ink-soft: #4A4038;
  --color-muted: #8A7F70;
  --color-muted-light: #C4B9AA;
  --color-accent: #6366F1;            /* Zera indigo — logo, large moments, illustrations */
  --color-accent-deep: #4B4FD6;       /* UI text, italic emphasis, small elements */
  --color-accent-soft: #9196F5;       /* Hover states, gradients */
  --color-accent-mist: #EEEEFE;       /* Background tints, subtle fills */
  --color-accent-muted: var(--color-accent-mist);
  --color-border: rgba(26, 22, 18, 0.08);
  --color-border-strong: rgba(26, 22, 18, 0.12);
  --color-success: #4A7C59;
  --color-warning: #C4903E;
  --color-danger: #9B3B2E;
  /* Photo placeholders only — warm skin-tone gradient is palette-agnostic */
  --gradient-warm: linear-gradient(165deg, #E8B49A 0%, #C4755A 50%, #7A4233 100%);

  /* ===== Legacy aliases (drive 100+ existing selectors via cascade) =====
     KEY DECISION: --accent routes to --color-accent-deep (not the light
     hero tone) because most legacy usages are text-level (italic emphasis,
     section labels, score badges, focus rings). Hero surfaces that want
     the lighter #7B7FD4 reference --color-accent directly. */
  --bg: var(--color-bg);
  --bg-secondary: var(--color-surface);
  --bg-tertiary: var(--color-accent-mist);
  --surface: var(--color-surface);
  --surface-hover: var(--color-accent-mist);
  --surface-sunken: var(--color-surface);
  --border: var(--color-border);
  --border-light: rgba(26, 22, 18, 0.05);
  --border-strong: var(--color-ink);

  --accent: var(--color-accent-deep);
  --accent-light: var(--color-accent-soft);
  --accent-dim: var(--color-accent-mist);
  --accent-glow: rgba(99, 102, 241, 0.22);

  --terracotta: var(--color-accent-deep);
  --gradient: var(--color-accent-deep);
  --gradient-subtle: var(--color-accent-mist);

  --gradient-hero: linear-gradient(180deg, #FFFFFF 0%, #EEEEFE 100%);
  --gradient-celebration: linear-gradient(135deg, #1A1612 0%, #2B2621 100%);
  --gradient-premium: linear-gradient(135deg, #2B2621 0%, #1A1612 100%);

  --text: var(--color-ink);
  --text-secondary: var(--color-ink-soft);
  --text-dim: var(--color-muted);
  --text-muted: var(--color-muted-light);

  --danger: var(--color-danger);
  --danger-light: rgba(155, 59, 46, 0.10);
  --success: var(--color-success);
  --success-light: rgba(74, 124, 89, 0.10);
  --warning: var(--color-warning);
  --warning-light: rgba(196, 144, 62, 0.10);

  --shadow-color: 26,22,18;
  color-scheme: light;

  /* ===== Brand-kit fonts ===== */
  --font-serif: 'Fraunces', ui-serif, Georgia, serif;
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  /* Radius */
  --radius: 12px;
  --radius-sm: 8px;
  --radius-xs: 4px;
  --radius-pill: 100px;

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.02);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.06), 0 1px 3px rgba(0,0,0,0.03);
  --shadow-lg: 0 12px 32px rgba(0,0,0,0.08), 0 4px 8px rgba(0,0,0,0.04);

  /* Transitions */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --t-fast: 0.15s var(--ease);
  --t-normal: 0.25s var(--ease);
  --t-slow: 0.4s var(--ease);
}

:root[data-theme="dark"] {
  /* ============================================================
     ZERA INDIGO — DARK
     Warm charcoal page (#1A1612) + cream text. Indigo tiers lift
     proportionally so each variant stays in its role on dark: the
     soft tone becomes the "large-moment" display color, deep lifts
     so it remains readable as UI text on dark surfaces. Safety
     signals stay chromatic.
     ============================================================ */
  --color-bg: #1A1612;
  --color-surface: #221D18;
  --color-surface-raised: #2B2621;
  --color-ink: #FAFAF8;
  --color-ink-soft: #C4B9AA;
  --color-muted: #8A7F70;
  --color-muted-light: #4A4038;
  --color-accent: #9196F5;            /* Logo / large-moment tone on dark */
  --color-accent-deep: #B8BBF9;       /* lifted for readable UI text on dark */
  --color-accent-soft: #D2D4FB;
  --color-accent-mist: rgba(99, 102, 241, 0.14);
  --color-accent-muted: var(--color-accent-mist);
  --color-border: rgba(250, 250, 248, 0.08);
  --color-border-strong: rgba(250, 250, 248, 0.12);
  --color-success: #6BAD88;
  --color-warning: #D9A959;
  --color-danger: #C9523F;
  --gradient-warm: linear-gradient(165deg, #C4755A 0%, #8A4233 50%, #4A2018 100%);

  /* Legacy aliases — --accent routes to accent-deep for text-level usages */
  --bg: var(--color-bg);
  --bg-secondary: var(--color-surface);
  --bg-tertiary: #14100C;
  --surface: var(--color-surface);
  --surface-hover: #2B2621;
  --surface-sunken: #14100C;
  --border: var(--color-border);
  --border-light: rgba(250, 250, 248, 0.05);
  --border-strong: var(--color-ink);

  --accent: var(--color-accent-deep);
  --accent-light: var(--color-accent-soft);
  --accent-dim: var(--color-accent-mist);
  --accent-glow: rgba(192, 194, 235, 0.28);

  --terracotta: var(--color-accent-deep);
  --gradient: var(--color-accent-deep);
  --gradient-subtle: var(--color-accent-mist);

  --gradient-hero: linear-gradient(180deg, #1A1612 0%, #221D18 100%);
  --gradient-celebration: linear-gradient(135deg, #221D18 0%, #14100C 100%);
  --gradient-premium: linear-gradient(135deg, #2B2621 0%, #14100C 100%);

  --text: var(--color-ink);
  --text-secondary: var(--color-ink-soft);
  --text-dim: var(--color-muted);
  --text-muted: var(--color-muted-light);

  --danger: var(--color-danger);
  --danger-light: rgba(201, 82, 63, 0.14);
  --success: var(--color-success);
  --success-light: rgba(107, 173, 136, 0.14);
  --warning: var(--color-warning);
  --warning-light: rgba(217, 169, 89, 0.14);

  --shadow-color: 0,0,0;
  color-scheme: dark;
}

/* ============================================================
   RESET & BASE
   ============================================================ */

* { margin: 0; padding: 0; box-sizing: border-box; }

html { height: 100%; }
body {
  /* Body defaults to Inter (sans UI). Headings and display sizes override
     to Fraunces via the .t-* classes below or direct selectors. */
  font-family: var(--font-sans);
  background: var(--color-bg);
  color: var(--color-ink);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
  height: 100vh;
  height: 100dvh;
  line-height: 1.5;
}

/* ============================================================
   BRAND-KIT TYPOGRAPHY (§3)
   Fraunces for display/title, Inter for body/UI. Italic emphasis
   in accent is the brand signature — em tags get this automatically.
   ============================================================ */
h1, h2, h3, h4, h5,
.t-display-xl, .t-display-l, .t-display-m,
.t-title-l, .t-title-m, .t-title-s {
  font-family: var(--font-serif);
  font-weight: 600;
  /* Let the browser pick optical size based on the rendered font-size —
     this was previously hardcoded to opsz 144 + WONK which made headlines
     render as quirky display cuts at every size, hurting readability. */
  font-optical-sizing: auto;
  color: var(--color-ink);
  letter-spacing: -0.015em;
  line-height: 1.2;
}
.t-display-xl { font-size: 56px; line-height: 0.98; letter-spacing: -0.035em; }
.t-display-l  { font-size: 40px; line-height: 0.95; letter-spacing: -0.03em; }
.t-display-m  { font-size: 32px; line-height: 1.0; letter-spacing: -0.03em; }
.t-title-l    { font-size: 26px; line-height: 1.05; letter-spacing: -0.025em; }
.t-title-m    { font-size: 22px; line-height: 1.1; letter-spacing: -0.02em; }
.t-title-s    { font-size: 16px; line-height: 1.2; letter-spacing: -0.01em; }

.t-body-l {
  font-family: var(--font-serif);
  font-size: 15px; line-height: 1.55; color: var(--color-ink);
  font-optical-sizing: auto;
}
.t-body-m { font-family: var(--font-sans); font-size: 14px; line-height: 1.5; color: var(--color-ink); }
.t-body-s { font-family: var(--font-sans); font-size: 13px; line-height: 1.5; color: var(--color-ink); }
.t-caption { font-family: var(--font-sans); font-size: 11px; color: var(--color-muted); letter-spacing: 0.3px; }
.t-eyebrow {
  font-family: var(--font-sans);
  font-size: 10px; font-weight: 600;
  letter-spacing: 2.5px; text-transform: uppercase;
  color: var(--color-accent);
}

/* Italic emphasis — the brand's signature device. Every <em> renders in
   italic Fraunces in the accent color. Inside serif titles it inherits
   the title color (so headlines stay monochromatic with just italic shape). */
em, .t-italic {
  font-family: var(--font-serif);
  font-style: italic;
  font-optical-sizing: auto;
  color: var(--color-accent);
}
h1 em, h2 em, h3 em, h4 em, h5 em,
.t-display-xl em, .t-display-l em, .t-display-m em,
.t-title-l em, .t-title-m em, .t-title-s em {
  color: inherit;
  font-optical-sizing: auto;
}

/* Reduced motion — brand-kit §9 accessibility mandate */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* Focus ring — brand-kit §9: 2px accent, 4px offset */
*:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 4px;
  border-radius: inherit;
}
button:focus-visible, .chip:focus-visible, .scenario-option:focus-visible {
  outline-offset: 2px;
}

.app {
  max-width: 430px;
  margin: 0 auto;
  height: 100vh;
  height: 100dvh;
  position: relative;
  overflow: hidden;
  background: var(--bg);
}
/* Safe-area insets — apply unconditionally (not gated on display-mode:
   standalone) so the rule fires in PWA installs AND when the app is
   loaded directly in a mobile browser. env(safe-area-inset-*) returns
   0px on devices without notches / status bars, so applying the rule
   everywhere is a no-op on phones that don't need it.
   Owner reported (2026-04 round 2): "All pages are too high, every
   tab has the buttons riding into the phone's fields." First attempt
   gated on display-mode: standalone; turns out that media query
   doesn't fire reliably on every PWA install path, so we drop the
   gate. Hero screens (auth/welcome/onboarding) still skip the top
   inset because their .hero-header already adds it inside its own
   padding — we don't want it doubled.
   :has() is supported on iOS Safari 15.4+ + Chrome 105+. */
.bottom-nav {
  padding-bottom: max(env(safe-area-inset-bottom), 8px);
}
.screen:not(:has(.hero-header)) {
  padding-top: env(safe-area-inset-top);
}
/* Belt-and-suspenders fallback for browsers without :has() — apply the
   inset to every screen, then offset it back inside hero-header so
   things still align. Kept secondary so :has()-aware browsers prefer
   the cleaner rule above. */
@supports not selector(:has(*)) {
  .screen { padding-top: env(safe-area-inset-top); }
  .screen .hero-header { margin-top: calc(-1 * env(safe-area-inset-top)); padding-top: calc(44px + env(safe-area-inset-top, 0px)); }
}

/* Screens */
.screen { display: none; flex-direction: column; height: 100%; overflow: hidden; position: absolute; inset: 0; }
.screen.active { display: flex; }

.scroll-body { flex: 1; overflow-y: auto; padding: 20px 16px 100px; -webkit-overflow-scrolling: touch; scroll-behavior: smooth; }

/* ============================================================
   HERO HEADER
   ============================================================ */

.hero-header {
  /* Restored original login-hero structure: 4-stop diagonal accent gradient
     with a warm-sand orb (upper-left) and white highlight (lower-right).
     Palette translated from original indigo to current periwinkle so the
     hero still reads rich and branded without fighting the rest of the app. */
  background:
    radial-gradient(ellipse 60% 80% at 30% 0%, rgba(232, 168, 124, 0.24) 0%, transparent 60%),
    radial-gradient(ellipse 80% 70% at 80% 100%, rgba(255, 255, 255, 0.22) 0%, transparent 60%),
    linear-gradient(135deg, #3D3F8F 0%, #5A5EB8 35%, #7B7FD4 70%, #A3A6E3 100%);
  color: #FFFFFF;
  padding: 52px 20px 40px;
  text-align: center;
  position: relative;
  overflow: hidden;
  border-radius: 0 0 28px 28px;
  flex-shrink: 0;
  isolation: isolate;
}

.hero-content { position: relative; z-index: 2; }

.hero-orb {
  position: absolute;
  border-radius: 50%;
  opacity: 0.22;
  filter: blur(8px);
  animation: floatOrb 7s ease-in-out infinite;
}
.orb-1 { width: 140px; height: 140px; background: radial-gradient(circle, #fff 0%, transparent 70%); top: -30px; right: -30px; animation-duration: 8s; }
.orb-2 { width: 100px; height: 100px; background: radial-gradient(circle, #E8A87C 0%, transparent 70%); bottom: -20px; left: -20px; animation-duration: 6s; opacity: 0.55; }
.orb-3 { width: 60px; height: 60px; background: radial-gradient(circle, #fff 0%, transparent 70%); top: 28%; left: 14%; animation-duration: 5s; animation-delay: -1.5s; opacity: 0.35; }

@keyframes floatOrb {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-16px) scale(1.08); }
}

.logo-mark { font-size: 36px; display: block; margin-bottom: 8px; filter: drop-shadow(0 2px 6px rgba(0,0,0,0.12)); }
.brand-mark {
  width: 112px; height: 95px;
  display: block;
  margin: 0 auto 18px;
  filter: drop-shadow(0 6px 24px rgba(0, 0, 0, 0.28));
  animation: brandPulse 2.4s ease-in-out infinite;
}

/* Zera wordmark — lowercase serif "zera" with a 3D heart glyph tucked
   against the right edge. Matches the uploaded brand logo: Fraunces
   display at heavy weight, letter-spacing tight, heart in indigo #6366F1
   with a soft inner highlight for the "puffy" 3D feel. */
.zera-wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0;
  margin: 0 auto 14px;
  filter: drop-shadow(0 6px 24px rgba(0, 0, 0, 0.24));
  animation: brandPulse 2.4s ease-in-out infinite;
}
.zera-text {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 700;
  font-size: 84px;
  line-height: 0.9;
  letter-spacing: -0.02em;
  color: #FFFFFF;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.22);
  font-feature-settings: "ss01" on;
}
.zera-heart {
  width: 48px;
  height: 44px;
  margin-left: -4px;
  margin-bottom: -6px; /* align optically with the baseline dip */
  filter: drop-shadow(0 3px 8px rgba(99, 102, 241, 0.45));
}
.zera-wordmark-sm .zera-text { font-size: 34px; }
.zera-wordmark-sm .zera-heart { width: 20px; height: 18px; margin-left: -2px; margin-bottom: -2px; }
@media (max-width: 600px) {
  .zera-text { font-size: 64px; }
  .zera-heart { width: 36px; height: 34px; margin-bottom: -4px; }
}
@media (max-width: 380px) {
  .zera-text { font-size: 52px; }
  .zera-heart { width: 30px; height: 28px; margin-bottom: -3px; }
}
@keyframes brandPulse {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 6px 24px rgba(0, 0, 0, 0.28)); }
  30% { transform: scale(1.08); filter: drop-shadow(0 8px 32px rgba(255, 255, 255, 0.45)); }
  60% { transform: scale(1); filter: drop-shadow(0 6px 24px rgba(0, 0, 0, 0.28)); }
}
.app-name {
  font-family: var(--font-sans);
  font-size: 56px; font-weight: 900; color: #fff;
  letter-spacing: 0.02em;
  line-height: 0.95;
  text-transform: uppercase;
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.25);
}
.app-subname {
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.92);
  letter-spacing: 0.24em;
  margin-top: 4px;
  text-transform: uppercase;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.2);
}
.app-tagline {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 15px; color: rgba(255,255,255,0.92); margin-top: 18px;
  font-weight: 500; letter-spacing: 0.005em;
  font-style: italic;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.15);
}
.app-tagline-sub { font-size: 12px; color: rgba(255,255,255,0.65); margin-top: 4px; }

/* ---- Mobile shrink for the auth hero ----
   The full-size hero was eating ~300px of viewport on phones which left the
   login form pushed halfway off-screen. Compact it aggressively under 600px. */
@media (max-width: 600px) {
  /* Extra top padding accounts for the iOS status-bar overlay on PWA
     installs — without it the Fraunces wordmark gets clipped by the
     notch / status-bar region. env(safe-area-inset-top) covers both
     Safari tab and installed-PWA standalone mode. */
  .hero-header {
    padding: calc(44px + env(safe-area-inset-top, 0px)) 18px 22px;
    border-radius: 0 0 22px 22px;
  }
  .brand-mark {
    width: 72px;
    height: 62px;
    margin: 0 auto 10px;
  }
  .app-name { font-size: 38px; line-height: 1.0; letter-spacing: 0.02em; }
  .app-subname { font-size: 13px; letter-spacing: 0.22em; margin-top: 3px; }
  .app-tagline { font-size: 13px; margin-top: 10px; }
  .app-tagline-sub { font-size: 11px; margin-top: 3px; }
  /* Zera wordmark on mobile — needs line-height breathing room so the
     Fraunces descenders + heart glyph don't clip against the top edge. */
  .zera-wordmark { margin-top: 4px; }
  .zera-text { line-height: 1.0; }
  /* Orbs are decorative — shrink + dim so they don't dominate */
  .orb-1 { width: 96px; height: 96px; }
  .orb-2 { width: 68px; height: 68px; }
  .orb-3 { width: 40px; height: 40px; }
}
/* Extra-narrow (<380px — iPhone SE) — even smaller */
@media (max-width: 380px) {
  .hero-header { padding: calc(36px + env(safe-area-inset-top, 0px)) 16px 18px; }
  .brand-mark { width: 60px; height: 52px; margin-bottom: 8px; }
  .app-name { font-size: 32px; }
  .app-subname { font-size: 12px; }
  .app-tagline { font-size: 12px; margin-top: 8px; }
}

/* ---- Onboarding form picker styles ----
   DOB three-select picker + Height two-select picker + GPS button. */
.dob-picker { display: grid; grid-template-columns: 1.3fr 0.7fr 0.9fr; gap: 8px; }
.dob-picker .text-input { min-width: 0; }
.height-picker { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; max-width: 240px; }
.height-picker .text-input { min-width: 0; }
.section-label-opt {
  font-weight: 400;
  color: var(--text-dim);
  font-size: 0.85em;
  margin-left: 6px;
}
.city-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.city-gps-btn {
  align-self: flex-start;
  background: transparent;
  border: 1px solid var(--color-accent);
  color: var(--color-accent-deep);
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--t-fast);
}
.city-gps-btn:hover { background: var(--color-accent-mist); }
.city-gps-btn:disabled { opacity: 0.6; cursor: progress; }

/* ============================================================
   AUTH
   ============================================================ */

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

.auth-tabs {
  display: flex;
  margin-bottom: 20px;
  background: var(--bg);
  border-radius: var(--radius-sm);
  padding: 3px;
}

.auth-tab {
  flex: 1;
  padding: 10px;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  border-radius: 6px;
  transition: all var(--t-fast);
}
.auth-tab:hover { color: var(--text); }
.auth-tab.active { background: var(--accent); color: #fff; box-shadow: var(--shadow-sm); }

.form-section { margin-bottom: 16px; }
.section-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 6px;
  letter-spacing: 0.02em;
}

.text-input, .select-input {
  width: 100%;
  padding: 12px 14px;
  background: var(--bg);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  /* 16px minimum — iOS Safari auto-zooms into any input below 16px on focus,
     which causes the "screen jumps" effect when editing the profile. */
  font-size: 16px;
  line-height: 1.4;
  font-family: inherit;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
  outline: none;
}
/* Native <input type="date"> renders taller than text inputs on iOS due to
   the embedded calendar picker button. Normalize height so DOB lines up
   with Full Name, Height, City, etc. */
input[type="date"].text-input {
  height: 46px;
  min-height: 46px;
  line-height: normal;
  -webkit-appearance: none;
  appearance: none;
}
/* Clean up the default iOS/Safari date indicator — keep it tappable but
   consistent with the rest of the input palette. */
input[type="date"].text-input::-webkit-date-and-time-value { text-align: left; }
input[type="date"].text-input::-webkit-calendar-picker-indicator {
  opacity: 0.6;
  cursor: pointer;
}
.text-input:focus, .select-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-dim);
}
.text-input::placeholder { color: var(--text-muted); }
.text-input.error { border-color: var(--danger); }
.text-input.error:focus { box-shadow: 0 0 0 3px var(--danger-light); }

select.select-input { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236E655A' fill='none' stroke-width='1.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 36px; }
select.select-input option { background: var(--surface); color: var(--text); }

textarea.text-input { resize: none; min-height: 80px; line-height: 1.5; }

.bio-counter { font-size: 11px; color: var(--text-dim); text-align: right; margin-top: 4px; }

.auth-error { color: var(--danger); font-size: 13px; margin-bottom: 10px; min-height: 18px; font-weight: 500; }
.form-disclaimer { font-size: 12px; color: var(--text-dim); text-align: center; margin-top: 16px; line-height: 1.5; }
.forgot-link { color: var(--accent); font-size: 13px; text-decoration: none; display: block; text-align: center; margin-top: 12px; cursor: pointer; font-weight: 500; transition: opacity var(--t-fast); }
.forgot-link:hover { opacity: 0.8; }

/* ============================================================
   BUTTONS
   ============================================================ */

/* Primary button — brand-kit §6. CTA is ALWAYS ink, never accent.
   That's what keeps the brand feeling editorial instead of loud. */
.btn-primary {
  width: 100%;
  padding: 14px 24px;
  /* Zera indigo primary — buttons and accents now share the same brand color
     instead of the "editorial ink" CTA discipline the earlier brand-kit spec
     used. Hover darkens toward accent-deep; :active scales for tactile feel. */
  background: var(--color-accent);
  border: none;
  border-radius: var(--radius-pill);
  color: #FFFFFF;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(99, 102, 241, 0.24);
  transition: background var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);
  position: relative;
}
.btn-primary:hover { background: var(--color-accent-deep); box-shadow: 0 6px 20px rgba(99, 102, 241, 0.32); }
.btn-primary:active { transform: scale(0.98); box-shadow: 0 2px 8px rgba(99, 102, 241, 0.22); }
.btn-primary:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }
.btn-primary.loading { pointer-events: none; opacity: 0.7; }
.btn-primary.loading::after {
  content: "";
  display: inline-block;
  width: 16px; height: 16px;
  border: 2px solid rgba(255,255,255,0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
  margin-left: 8px;
  vertical-align: middle;
}

/* Secondary button — brand-kit §6. Transparent bg, thin border, pill. */
.btn-secondary {
  width: 100%;
  padding: 14px 24px;
  background: transparent;
  border: 1.5px solid var(--color-accent);
  border-radius: var(--radius-pill);
  color: var(--color-accent);
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color var(--t-fast), background var(--t-fast), color var(--t-fast);
}
.btn-secondary:hover { border-color: var(--color-accent-deep); background: var(--color-accent-mist); color: var(--color-accent-deep); }
.btn-secondary:active { transform: scale(0.98); }

/* Ghost italic — brand-kit §6. For "— not right now" / "— see profile first"
   style secondary actions. Fraunces italic in soft ink, no background. */
.btn-ghost-italic {
  background: transparent;
  color: var(--color-ink-soft);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 13px;
  font-optical-sizing: auto;
  padding: 8px 16px;
  border: none;
  cursor: pointer;
  transition: color var(--t-fast);
}
.btn-ghost-italic:hover { color: var(--color-ink); }

/* Small button — ink fill, pill, Inter. Matches primary scale but compact. */
.btn-small {
  padding: 8px 16px;
  background: var(--color-accent);
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-pill);
  color: #FFFFFF;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--t-fast), transform var(--t-fast);
}
.btn-small:hover { background: var(--color-accent-deep); border-color: var(--color-accent-deep); }
.btn-small:active { transform: scale(0.97); }

.btn-danger {
  background: var(--danger-light);
  border: 1px solid var(--danger);
  color: var(--danger);
}
.btn-danger:hover { background: rgba(201, 69, 63, 0.14); }

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

/* ============================================================
   CHIPS
   ============================================================ */

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

.chip {
  padding: 8px 16px;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-pill);
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--t-fast);
  user-select: none;
}
/* Only apply hover on devices that truly support it. On touch devices a tap
   "sticks" the :hover state until the next tap, which mimicked the selected
   look and made unselect-on-retap look broken to users. */
@media (hover: hover) {
  .chip:hover { border-color: var(--text); color: var(--text); background: var(--surface-hover); }
}
.chip:active { transform: scale(0.95); }
/* Selected chip — Zera-indigo fill with white label. Matches primary-button
   language: chosen state uses brand color, not ink. */
.chip.selected {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #FFFFFF;
  font-weight: 600;
}

/* ============================================================
   ONBOARDING
   ============================================================ */

.onboarding-progress {
  height: 3px;
  background: var(--border);
  margin: 0;
  flex-shrink: 0;
}
.onboarding-progress-bar {
  height: 100%;
  background: var(--gradient);
  transition: width var(--t-slow);
  border-radius: 2px;
}

.onboarding-card {
  display: none;
  animation: slideUpIn 0.35s var(--ease);
}
.onboarding-card.active { display: block; }

.card-title {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 4px;
  color: var(--text);
  line-height: 1.3;
}
.card-subtitle {
  font-size: 14px;
  color: var(--text-secondary);
  margin-bottom: 20px;
}

.onboarding-ack {
  background: var(--gradient-subtle);
  border: 1px solid rgba(90, 94, 184, 0.15);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  margin-bottom: 20px;
  font-size: 14px;
  color: var(--accent);
  font-weight: 500;
  animation: slideUpIn 0.3s var(--ease);
}

.onboarding-nav {
  display: flex;
  gap: 12px;
  padding: 16px;
  background: var(--bg);
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}
.onboarding-nav .btn-back {
  padding: 12px 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--t-fast);
}
.onboarding-nav .btn-back:hover { border-color: var(--border-light); color: var(--text); }
.onboarding-nav .btn-back:active { transform: scale(0.96); }
.onboarding-nav .btn-next {
  flex: 1;
  padding: 12px;
  background: var(--gradient);
  border: none;
  border-radius: var(--radius-sm);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: all var(--t-fast);
}
.onboarding-nav .btn-next:hover { box-shadow: 0 4px 12px rgba(90, 94, 184, 0.25); }
.onboarding-nav .btn-next:active { transform: scale(0.97); }
.onboarding-nav .btn-next:disabled { opacity: 0.4; cursor: not-allowed; transform: none; box-shadow: none; }

/* Photo grid */
.photo-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 16px;
}
.photo-slot {
  aspect-ratio: 1;
  border-radius: var(--radius-sm);
  border: 2px dashed var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  overflow: hidden;
  position: relative;
  background: var(--bg);
  transition: all var(--t-fast);
}
/* Empty slot: dashed border only, no glyph. Previously an `add-icon` "+"
   was rendered in the center, but during multi-photo upload race conditions
   (partial server response, broken URL in the photos array) the browser's
   broken-image placeholder could leak through and look like an unwanted
   icon. The JS now renders empty slots without any child content, and
   uses the ::before below purely for the click affordance on desktop. */
.photo-slot.empty { background: var(--bg); }
.photo-slot.empty:hover { border-color: var(--accent); background: var(--accent-dim); }
.photo-slot.empty::before {
  content: "+";
  font-size: 28px;
  color: var(--text-dim);
  opacity: 0.5;
  line-height: 1;
  pointer-events: none;
}
.photo-slot.filled { border-style: solid; border-color: transparent; background: transparent; }
.photo-slot.filled:hover { border-color: var(--accent); background: transparent; }
.photo-slot img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Legacy .add-icon rule retained for the profile editor path which still
   uses the explicit <span class="add-icon">+</span> element. */
.photo-slot .add-icon { font-size: 24px; color: var(--text-dim); transition: color var(--t-fast); }
.photo-slot.empty:hover .add-icon { color: var(--accent); }
.photo-slot .remove-btn {
  position: absolute;
  top: 6px;
  right: 6px;
  /* Bumped from 22→28 so the tap target meets the iOS 44pt minimum when
     combined with the surrounding padding. Owner reported the X was
     hard to hit on mobile (2026-04). */
  width: 28px;
  height: 28px;
  background: rgba(0,0,0,0.7);
  border: none;
  border-radius: 50%;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  z-index: 2;
  transition: opacity var(--t-fast);
}
.photo-slot:hover .remove-btn { opacity: 1; }
/* On touch devices always show the control buttons at full opacity —
   the user can't hover, and the previous 0.85 felt low-contrast. */
@media (hover: none) {
  .photo-slot .remove-btn,
  .photo-slot .photo-replace-btn { opacity: 1; }
}
/* Primary-photo badge (photos[0] is used as the main display photo) */
.photo-slot .photo-primary-badge {
  position: absolute;
  bottom: 4px;
  left: 4px;
  padding: 2px 8px;
  background: var(--accent);
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: var(--radius-pill);
  pointer-events: none;
}
/* Replace-this-photo pencil button */
.photo-slot .photo-replace-btn {
  position: absolute;
  top: 4px;
  left: 4px;
  width: 22px;
  height: 22px;
  background: rgba(0,0,0,0.6);
  border: none;
  border-radius: 50%;
  color: #fff;
  font-size: 11px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity var(--t-fast);
}
.photo-slot:hover .photo-replace-btn { opacity: 1; }
/* Drag-reorder visual states */
.photo-slot.dragging { opacity: 0.4; transform: scale(0.96); }
.photo-slot.drop-target { outline: 2px dashed var(--accent); outline-offset: -4px; }
.photo-slot[draggable="true"] { cursor: grab; }
.photo-slot[draggable="true"]:active { cursor: grabbing; }

/* Age range slider */
.range-container { padding: 8px 0; }
.range-values { display: flex; justify-content: space-between; font-size: 14px; color: var(--accent); font-weight: 600; margin-bottom: 8px; }
.range-track { position: relative; height: 6px; background: var(--border); border-radius: 3px; margin: 12px 0; }
.range-fill { position: absolute; height: 100%; background: var(--gradient); border-radius: 3px; }
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  background: transparent;
  position: absolute;
  top: 0;
  pointer-events: none;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 22px; height: 22px;
  background: var(--accent);
  border-radius: 50%;
  cursor: pointer;
  pointer-events: auto;
  box-shadow: var(--shadow-md);
  transition: transform var(--t-fast);
}
input[type="range"]::-webkit-slider-thumb:active { transform: scale(1.15); }

/* Scenario cards */
.scenario-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 16px;
  box-shadow: var(--shadow-sm);
}
.scenario-prompt { font-size: 14px; color: var(--text); margin-bottom: 12px; font-style: italic; line-height: 1.5; }
.scenario-options { display: flex; flex-direction: column; gap: 8px; }
.scenario-option {
  padding: 10px 14px;
  background: var(--bg);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-size: 13px;
  cursor: pointer;
  transition: all var(--t-fast);
  text-align: left;
  line-height: 1.4;
}
.scenario-option:hover { border-color: var(--text); color: var(--text); background: var(--surface-hover); }
.scenario-option:active { transform: scale(0.98); }
.scenario-option.selected {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #FFFFFF;
  font-weight: 500;
}

/* ============================================================
   BOTTOM NAV
   ============================================================ */

.bottom-nav {
  display: flex;
  background: var(--surface);
  border-top: 1px solid rgba(0,0,0,0.06);
  padding: 0 0 env(safe-area-inset-bottom);
  flex-shrink: 0;
  position: relative;
  z-index: 10;
}
.nav-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  padding: 10px 0 8px;
  border: none;
  background: none;
  color: #bbb;
  font-size: 0;
  font-weight: 600;
  cursor: pointer;
  position: relative;
  transition: color var(--t-fast);
}
.nav-btn::after {
  content: "";
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: transparent;
  margin-top: 4px;
  transition: background var(--t-fast);
}
.nav-btn:hover { color: #999; }
/* Active nav item — Zera indigo. Follows the primary-color-everywhere rule. */
.nav-btn.active { color: var(--color-accent); }
.nav-btn.active::after { background: var(--color-accent); }
.nav-btn .nav-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  transition: transform var(--t-fast);
}
.nav-btn .nav-icon svg {
  width: 22px;
  height: 22px;
}
.nav-btn.active .nav-icon svg {
  stroke-width: 2.5;
}
.nav-btn:active .nav-icon { transform: scale(0.88); }
.nav-badge {
  position: absolute;
  top: 4px;
  right: calc(50% - 20px);
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  box-sizing: border-box;
  background: var(--accent);
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  padding: 0 5px;
  border: 2px solid var(--surface);
  animation: scaleIn 0.3s var(--ease-spring);
}

/* ============================================================
   DISCOVER
   ============================================================ */

.discover-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  flex-shrink: 0;
}
.discover-counts { font-size: 13px; color: var(--text-secondary); }
.discover-counts span { color: var(--accent); font-weight: 600; }
.filter-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px 7px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: all var(--t-fast);
  box-shadow: var(--shadow-xs, 0 1px 2px rgba(0,0,0,0.04));
}
.filter-btn svg { flex-shrink: 0; opacity: 0.85; }
.filter-btn:hover {
  border-color: var(--accent-light);
  color: var(--text);
  background: var(--bg-secondary);
}
.filter-btn .filter-btn-dot { display: none; }
.filter-btn.has-filters {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-dim);
}
.filter-btn.has-filters .filter-btn-dot {
  display: inline-block;
  position: absolute;
  top: 6px;
  right: 8px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 2px var(--surface);
}
.filter-btn.has-filters svg { opacity: 1; }

.discover-area {
  flex: 1;
  position: relative;
  overflow-y: auto;
  overflow-x: hidden;
  margin: 0;
  padding: 0 16px;
  -webkit-overflow-scrolling: touch;
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease);
}

.discover-card {
  position: relative;
  background: var(--surface);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 24px rgba(0,0,0,0.10);
  margin-bottom: 80px;
  animation: fadeSlideIn 0.35s var(--ease);
}

/* Photo hero (legacy + new scroll profile) */
.discover-photo-wrap,
.profile-photo-section {
  position: relative;
  overflow: hidden;
}

/* Photo carousel — horizontal swipe between a profile's photos.
   touch-action: pan-y lets the page still scroll vertically; we cancel
   touchmove ourselves only when the user is dragging horizontally. */
.photo-carousel {
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}
.photo-track {
  display: flex;
  width: 100%;
  transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}
.photo-slide {
  flex: 0 0 100%;
  width: 100%;
  position: relative;
}
.photo-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
  -webkit-user-drag: none;
}
.photo-dots {
  position: absolute;
  top: 12px;
  left: 0; right: 0;
  display: flex;
  justify-content: center;
  gap: 4px;
  padding: 0 12px;
  z-index: 4;
  pointer-events: auto;
}
.photo-dot {
  flex: 1 1 0;
  max-width: 40px;
  height: 3px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.35);
  cursor: pointer;
  transition: background var(--t-fast);
}
.photo-dot.active { background: #fff; }

/* Online/last-seen badge on the Discover hero */
.discover-online-row { margin-top: 6px; }
.online-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  background: rgba(0, 0, 0, 0.45);
  color: rgba(255, 255, 255, 0.9);
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 600;
  backdrop-filter: blur(6px);
}
.online-badge.live { color: #fff; background: rgba(71, 179, 122, 0.7); }
.online-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #6BD198;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.25);
  animation: onlinePulse 1.8s ease-in-out infinite;
}
@keyframes onlinePulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.7; transform: scale(1.2); }
}
.discover-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  cursor: pointer;
  display: block;
}

/* Name/age/city overlaid on photo with gradient */
.discover-photo-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 48px 16px 14px;
  background: linear-gradient(transparent, rgba(0,0,0,0.55));
  pointer-events: none;
}
.discover-name { font-size: 22px; font-weight: 700; line-height: 1.2; color: #fff; }
.discover-name .age { font-weight: 400; opacity: 0.85; margin-left: 3px; }
.discover-meta { font-size: 13px; color: rgba(255,255,255,0.8); margin-top: 3px; }

/* Compact info section below photo */
.discover-info {
  padding: 12px 16px 10px;
  flex-shrink: 0;
}

/* Bio hidden on card, shown in overlay */
.discover-bio { display: none; }

/* Tags hidden on card, shown in overlay */
.discover-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.discover-card .discover-tags { display: none; }
/* Unified profile tag — used by Looking For, Values, AND Details (with optional emoji) */
/* Profile chips (interests, values, looking-for, etc.) — monochrome per
   dating-app convention. Color reserved for italic emphasis and score
   badges only; chips are neutral so the accent earns its presence. */
.discover-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  font-size: 12.5px;
  color: var(--color-ink);
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1.3;
}
.discover-tag .chip-icon { font-size: 13px; line-height: 1; opacity: 0.95; }

/* Action buttons — fixed to viewport (not absolute inside the scroll container).
   iOS Safari sometimes drops pointer events on absolute-positioned children of
   scrolling ancestors with -webkit-overflow-scrolling: touch, which is why the
   previous bottom: 76px wasn't firing taps reliably. Fixed positioning bypasses
   that stacking context entirely.
   Hidden on non-discover screens so they don't overlap other content. */
.discover-actions-float {
  position: fixed;
  left: 50%;
  bottom: calc(74px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 18px;
  z-index: 45;
  pointer-events: auto;
}
/* Only show when Discover is the active screen — fixed positioning would
   otherwise bleed across Connections, Profile, etc. */
body:not(:has(#screen-discover.active)) .discover-actions-float { display: none; }
.action-btn {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: none;
  font-size: 22px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--t-fast);
  /* Mobile tap fixes: kill 300ms delay, explicitly allow pointer events,
     force tap-highlight off so the button fires the moment you touch it. */
  touch-action: manipulation;
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
.discover-actions-float { pointer-events: auto; }
.action-btn:active { transform: scale(0.88); }

/* Pass button — soft, light */
.action-btn.pass-btn {
  background: #f5f0eb;
  color: #bbb;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.action-btn.pass-btn:hover { background: var(--danger-light); color: var(--danger); box-shadow: 0 2px 12px rgba(201,69,63,0.12); }

/* Super-like button — small gold star */
.action-btn.star-btn {
  width: 42px;
  height: 42px;
  font-size: 18px;
  background: linear-gradient(135deg, rgba(90, 94, 184,0.1), rgba(90, 94, 184,0.1));
  color: var(--accent);
  box-shadow: 0 2px 8px rgba(90, 94, 184,0.1);
}
.action-btn.star-btn:hover { background: linear-gradient(135deg, rgba(90, 94, 184,0.2), rgba(90, 94, 184,0.2)); box-shadow: 0 2px 12px rgba(90, 94, 184,0.2); }

/* Like button — gold filled, glowing */
.action-btn.like-btn {
  background: var(--gradient);
  color: #fff;
  box-shadow: 0 4px 16px rgba(90, 94, 184,0.3);
}
.action-btn.like-btn:hover { box-shadow: 0 4px 20px rgba(90, 94, 184,0.45); transform: translateY(-1px); }

.discover-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 40px;
  color: var(--text-secondary);
  animation: fadeIn 0.4s var(--ease);
}
.discover-empty .empty-icon { font-size: 48px; margin-bottom: 16px; }
.discover-empty p { line-height: 1.5; }

.limit-message {
  background: var(--accent-dim);
  border: 1px solid rgba(90, 94, 184,0.2);
  border-radius: var(--radius);
  padding: 24px;
  text-align: center;
  margin: 20px 0;
  animation: slideUpIn 0.35s var(--ease);
}
.limit-message h3 { color: var(--accent); margin-bottom: 8px; font-size: 16px; }
.limit-message p { color: var(--text-secondary); font-size: 14px; line-height: 1.5; }

/* ============================================================
   FILTER MODAL
   ============================================================ */

.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.2);
  z-index: 50;
  backdrop-filter: blur(6px);
}
.modal-overlay.active { display: flex; align-items: flex-end; justify-content: center; }

.modal-content {
  background: var(--surface);
  border-radius: 20px 20px 0 0;
  width: 100%;
  max-width: 430px;
  max-height: 80vh;
  overflow-y: auto;
  padding: 56px 20px 24px;
  animation: slideUp 0.3s var(--ease);
  box-shadow: var(--shadow-lg);
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}
.modal-title { font-size: 18px; font-weight: 700; }
.modal-close {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: var(--bg);
  color: var(--text-secondary);
  font-size: 18px;
  cursor: pointer;
  transition: all var(--t-fast);
}
.modal-close:hover { background: var(--bg-secondary); color: var(--text); }

.filter-section { margin-bottom: 16px; }
.filter-label { font-size: 13px; font-weight: 600; color: var(--text-secondary); margin-bottom: 8px; }

@keyframes slideUp {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

/* ============================================================
   PROFILE OVERLAY
   ============================================================ */

.profile-overlay {
  display: none;
  position: absolute;
  inset: 0;
  background: var(--bg);
  z-index: 20;
  overflow-y: auto;
  border-radius: var(--radius);
  animation: slideUpIn 0.3s var(--ease);
}
.profile-overlay.active { display: block; }

.profile-overlay-header {
  position: sticky;
  top: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background: rgba(247, 245, 240, 0.92);
  backdrop-filter: blur(12px);
  z-index: 5;
  border-bottom: 1px solid rgba(229, 224, 213, 0.5);
}
.profile-close {
  width: 32px; height: 32px; border-radius: 50%;
  border: 1px solid var(--border); background: var(--surface); color: var(--text);
  font-size: 14px; cursor: pointer;
  transition: all var(--t-fast);
}
.profile-close:hover { background: var(--bg); }
.profile-overlay-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.profile-report {
  width: 32px; height: 32px; border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-secondary);
  font-size: 18px;
  line-height: 0;
  cursor: pointer;
  transition: all var(--t-fast);
  letter-spacing: 2px;
}
.profile-report:hover { background: var(--danger-light); color: var(--danger); border-color: var(--danger); }

/* Discover-card report button — intentionally discreet.
   Parked top-LEFT (opposite of the compat band chip at top-right) so it's
   always visible but stays out of the primary read-path. Slightly smaller
   and translucent so the face photo keeps dominance. */
.discover-report-btn {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 5;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.38);
  color: rgba(255, 255, 255, 0.85);
  border: 0;
  font-size: 16px;
  line-height: 0;
  letter-spacing: 1.5px;
  cursor: pointer;
  backdrop-filter: blur(6px);
  transition: all var(--t-fast);
  opacity: 0.72;
}
.discover-report-btn:hover {
  background: var(--danger);
  color: #fff;
  opacity: 1;
  transform: scale(1.06);
}
.profile-overlay-photos { width: 100%; }
.profile-overlay-photos img { width: 100%; display: block; cursor: pointer; }
.profile-overlay-body { padding: 16px; }
.profile-overlay-body h2 { font-size: 20px; font-weight: 700; line-height: 1.3; }
.profile-overlay-body .meta { font-size: 14px; color: var(--text-secondary); margin-top: 4px; }
.profile-section { margin-top: 20px; }
.profile-section-title { font-size: 11px; font-weight: 700; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 8px; }
.profile-detail { font-size: 14px; color: var(--text-secondary); margin-bottom: 6px; line-height: 1.4; }
.profile-detail strong { color: var(--text); font-weight: 600; }

/* ============================================================
   LIGHTBOX
   ============================================================ */

.lightbox {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.94);
  z-index: 100;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  animation: fadeIn 0.2s var(--ease);
  backdrop-filter: blur(2px);
}
.lightbox.active { display: flex; }
.lightbox img {
  max-width: 95%;
  max-height: 86%;
  object-fit: contain;
  border-radius: var(--radius-sm);
  cursor: default;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}
.lightbox-topbar {
  position: absolute;
  top: 0; left: 0; right: 0;
  padding: 16px 20px calc(16px + 40px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(to bottom, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.5) 50%, transparent 100%);
  z-index: 2;
  pointer-events: none; /* lets image remain focal; button re-enables */
}
.lightbox-title {
  color: #fff;
  font-family: 'Fraunces', Georgia, serif;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}
.lightbox-close {
  pointer-events: auto;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background var(--t-fast), transform var(--t-fast);
}
.lightbox-close:hover {
  background: rgba(255, 255, 255, 0.28);
  transform: scale(1.05);
}
.lightbox-close:active {
  transform: scale(0.92);
}

/* ============================================================
   CONNECTIONS
   ============================================================ */

.connections-list { display: flex; flex-direction: column; gap: 12px; }

.connection-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  display: flex;
  gap: 12px;
  align-items: center;
  cursor: pointer;
  position: relative;
  transition: all var(--t-fast);
  box-shadow: var(--shadow-sm);
}
.connection-card:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
.connection-card:active { transform: scale(0.99); }

.connection-photo {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 2px solid var(--bg-secondary);
}
.connection-info { flex: 1; min-width: 0; }
.connection-name { font-size: 15px; font-weight: 600; line-height: 1.3; }
.connection-name .age { font-weight: 400; color: var(--text-secondary); font-size: 14px; }

.stage-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 600;
  margin-left: 6px;
  letter-spacing: 0.01em;
}
.stage-badge.details { background: rgba(90, 94, 184,0.12); color: var(--accent); }
.stage-badge.chat { background: rgba(61,150,80,0.12); color: var(--success); }
.stage-badge.speed_dating { background: rgba(130,110,200,0.12); color: #7A68C8; }
.stage-badge.plan_date { background: rgba(90, 94, 184,0.12); color: var(--terracotta); }

.connection-summary { font-size: 13px; color: var(--text-secondary); margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.connection-discard {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: none;
  background: var(--bg);
  color: var(--text-muted);
  font-size: 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--t-fast);
  opacity: 0;
}
.connection-card:hover .connection-discard { opacity: 1; }
.connection-discard:hover { color: var(--danger); background: var(--danger-light); }

/* Plan-a-date stage pill — appears on connection cards while the pair is
   mid-funnel so users can tell at a glance where they are (1 of 5, 2 of 5…). */
.connection-subrow { margin-top: 6px; display: flex; gap: 6px; flex-wrap: wrap; }
.date-flow-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--color-accent-mist);
  color: var(--color-accent-deep);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  border: 1px solid rgba(90, 94, 184, 0.18);
  white-space: nowrap;
}
.date-flow-pill.confirmed {
  background: var(--color-accent);
  color: #fff;
  border-color: var(--color-accent-deep);
}

.unread-dot {
  width: 10px;
  height: 10px;
  background: var(--accent);
  border-radius: 50%;
  flex-shrink: 0;
  animation: pulse 2s ease-in-out infinite;
}

.new-match-indicator {
  position: absolute;
  top: -4px;
  left: -4px;
  padding: 2px 8px;
  background: var(--gradient);
  border-radius: var(--radius-pill);
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.02em;
}

/* Staggered list animation */
.connection-card:nth-child(1) { animation: slideUpIn 0.3s var(--ease) both; animation-delay: 0s; }
.connection-card:nth-child(2) { animation: slideUpIn 0.3s var(--ease) both; animation-delay: 0.06s; }
.connection-card:nth-child(3) { animation: slideUpIn 0.3s var(--ease) both; animation-delay: 0.12s; }
.connection-card:nth-child(4) { animation: slideUpIn 0.3s var(--ease) both; animation-delay: 0.18s; }
.connection-card:nth-child(5) { animation: slideUpIn 0.3s var(--ease) both; animation-delay: 0.24s; }

/* ============================================================
   MATCH DETAIL
   ============================================================ */

.match-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  /* Deeper background than --surface so the header visually separates from
     the chat body below, and so the secondary text has real contrast.
     Owner reported the previous --surface + --text-dim combo rendered as
     "light on cream" at ~3.5:1 — below WCAG AA minimums. */
  background: var(--bg);
  border-bottom: 1px solid var(--color-border-strong);
  flex-shrink: 0;
}
.match-back {
  width: 32px; height: 32px; border-radius: 50%;
  border: 1px solid var(--border); background: var(--bg); color: var(--text);
  font-size: 14px; cursor: pointer;
  transition: all var(--t-fast);
}
.match-back:hover { background: var(--bg-secondary); }
.match-back:active { transform: scale(0.9); }
.match-partner-photo { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; border: 2px solid var(--bg-secondary); }
.match-partner-name { font-size: 16px; font-weight: 700; color: var(--color-ink); flex: 1; }
/* Was --text-dim (muted taupe ~#8A7F70) which failed AA contrast on the
   off-white header background. Use --color-ink-soft (~#4A4038) for a real
   readable secondary text color. */
.match-stage-label { font-size: 12px; color: var(--color-ink-soft); font-weight: 600; }

.match-body { flex: 1; overflow-y: auto; padding: 16px; }

/* Details stage — compatibility ring */
.compat-ring-container {
  display: flex;
  justify-content: center;
  margin-bottom: 16px;
}
.compat-ring {
  position: relative;
  width: 120px;
  height: 120px;
}
.compat-ring svg { transform: rotate(-90deg); }
.compat-ring .ring-track { fill: none; stroke: var(--border); stroke-width: 8; }
.compat-ring .ring-value { fill: none; stroke: url(#goldGradient); stroke-width: 8; stroke-linecap: round; transition: stroke-dashoffset 1.2s var(--ease); }
.compat-ring .ring-text {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.compat-ring .ring-num { font-size: 32px; font-weight: 800; background: var(--gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; line-height: 1; }
.compat-ring .ring-label { font-size: 11px; color: var(--text-dim); margin-top: 2px; font-weight: 500; }

.compat-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  margin-bottom: 12px;
  box-shadow: var(--shadow-sm);
}
/* Staggered entrance */
.compat-card:nth-child(1) { animation: slideUpIn 0.35s var(--ease) both; }
.compat-card:nth-child(2) { animation: slideUpIn 0.35s var(--ease) both; animation-delay: 0.08s; }
.compat-card:nth-child(3) { animation: slideUpIn 0.35s var(--ease) both; animation-delay: 0.16s; }

.compat-score { text-align: center; margin-bottom: 16px; }
.compat-score .score-num { font-size: 48px; font-weight: 800; background: var(--gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; line-height: 1; }
.compat-score .score-label { font-size: 13px; color: var(--text-dim); margin-top: 4px; }
.compat-card h3 { font-size: 15px; font-weight: 600; margin-bottom: 8px; }
.compat-card p { font-size: 14px; color: var(--text-secondary); line-height: 1.5; }

.ai-intro-card {
  background: var(--gradient-subtle);
  border: 1px solid rgba(90, 94, 184,0.15);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  padding: 16px 16px 16px 20px;
  margin-bottom: 16px;
  animation: slideUpIn 0.35s var(--ease) both;
  animation-delay: 0.24s;
}
.ai-intro-card .intro-label { font-size: 11px; font-weight: 700; color: var(--accent); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 6px; }
.ai-intro-card p { font-size: 14px; color: var(--text); line-height: 1.6; }

.confirm-actions {
  display: flex;
  gap: 12px;
  padding: 16px;
  background: var(--bg);
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}
.confirm-btn {
  flex: 1;
  padding: 14px;
  border-radius: var(--radius-sm);
  border: none;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all var(--t-fast);
}
.confirm-btn:active { transform: scale(0.95); }
.confirm-btn.yes { background: var(--gradient); color: #fff; }
.confirm-btn.yes:hover { box-shadow: 0 4px 12px rgba(90, 94, 184, 0.25); }
.confirm-btn.no { background: var(--surface); border: 1px solid var(--border); color: var(--text-secondary); }
.confirm-btn.no:hover { border-color: var(--border-light); color: var(--text); }

.waiting-state {
  text-align: center;
  padding: 24px;
  color: var(--text-secondary);
  font-size: 14px;
  animation: fadeIn 0.3s var(--ease);
}
.waiting-dots { display: inline-flex; gap: 4px; margin-bottom: 8px; }
.waiting-dots span {
  width: 8px; height: 8px; border-radius: 50%; background: var(--accent);
  animation: waitingDot 1.4s ease-in-out infinite;
}
.waiting-dots span:nth-child(2) { animation-delay: 0.2s; }
.waiting-dots span:nth-child(3) { animation-delay: 0.4s; }

@keyframes waitingDot {
  0%, 80%, 100% { opacity: 0.3; transform: scale(0.8); }
  40% { opacity: 1; transform: scale(1); }
}

@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

/* ============================================================
   CHAT
   ============================================================ */

.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.chat-date-divider {
  text-align: center;
  font-size: 12px;
  color: var(--text-dim);
  margin: 16px 0 8px;
  font-weight: 500;
}

.chat-bubble {
  max-width: 78%;
  padding: 10px 14px;
  border-radius: 18px;
  font-size: 14px;
  line-height: 1.45;
  animation: msgIn 0.25s var(--ease);
  word-wrap: break-word;
}
@keyframes msgIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.chat-bubble.sent {
  align-self: flex-end;
  background: var(--accent);
  color: #fff;
  border-bottom-right-radius: 4px;
}
.chat-bubble.received {
  align-self: flex-start;
  background: rgba(90, 94, 184, 0.08); /* purple accent tint at 8% */
  border: 1px solid rgba(90, 94, 184, 0.18);
  color: var(--text);
  border-bottom-left-radius: 4px;
}
.chat-bubble .time {
  display: block;
  font-size: 10px;
  margin-top: 6px;
  opacity: 0.78;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}
.chat-bubble.sent .time { color: rgba(255,255,255,0.85); }
.chat-bubble.received .time { color: var(--text-secondary); opacity: 1; }

.read-receipt {
  align-self: flex-end;
  font-size: 11px;
  color: var(--text-dim);
  margin-top: -1px;
  display: flex;
  align-items: center;
  gap: 3px;
}

.chat-input-bar {
  display: flex;
  gap: 8px;
  padding: 12px 16px;
  background: var(--surface);
  border-top: 1px solid var(--border);
  box-shadow: 0 -2px 8px rgba(0,0,0,0.02);
  flex-shrink: 0;
}
.chat-input-bar input {
  flex: 1;
  padding: 10px 16px;
  background: var(--bg);
  border: 1.5px solid var(--border);
  border-radius: 24px;
  color: var(--text);
  font-size: 14px;
  font-family: inherit;
  outline: none;
  transition: border-color var(--t-fast);
}
.chat-input-bar input:focus { border-color: var(--accent); }
.chat-input-bar input::placeholder { color: var(--text-muted); }
.chat-input-bar button {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: var(--gradient);
  color: #fff;
  font-size: 16px;
  cursor: pointer;
  flex-shrink: 0;
  transition: all var(--t-fast);
}
.chat-input-bar button:hover { box-shadow: 0 2px 8px rgba(90, 94, 184, 0.3); }
.chat-input-bar button:active { transform: scale(0.92); }

/* ===== Unified Compose Bar (text / voice / video) ===== */
.chat-compose {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 12px;
  background: var(--surface);
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}
.compose-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(90, 94, 184, 0.22);
  background: rgba(90, 94, 184, 0.08); /* purple accent tint at 8% */
  color: var(--accent);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--t-fast);
  touch-action: none;
  user-select: none;
}
.compose-icon svg { width: 20px; height: 20px; display: block; }
.compose-icon:hover { background: rgba(90, 94, 184, 0.16); border-color: rgba(90, 94, 184, 0.4); }
.compose-icon:active { transform: scale(0.92); }
.compose-icon.recording {
  background: var(--gradient);
  color: #fff;
  animation: micPulse 1s ease-in-out infinite;
}
@keyframes micPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(90, 94, 184,0.5); }
  50%      { box-shadow: 0 0 0 8px rgba(90, 94, 184,0); }
}
.compose-input {
  flex: 1;
  min-width: 0;
  padding: 10px 16px;
  background: var(--bg);
  border: 1.5px solid var(--border);
  border-radius: 24px;
  color: var(--text);
  font-size: 14px;
  font-family: inherit;
  outline: none;
  transition: border-color var(--t-fast);
}
.compose-input:focus { border-color: var(--accent); }
.compose-input::placeholder { color: var(--text-muted); }
.compose-send {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: var(--gradient);
  color: #fff;
  font-size: 16px;
  cursor: pointer;
  transition: all var(--t-fast);
}
.compose-send:active { transform: scale(0.92); }

/* Voice recording bar (replaces compose while holding) */
.voice-rec-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 12px;
  padding: 12px 18px 14px;
  background: var(--surface);
  border-top: 1px solid var(--border);
  flex-shrink: 0;
  animation: slideUpIn 0.2s var(--ease);
}
/* Profile-aware starter surfaced while holding-to-record — gives the
   recorder something to riff on instead of a blank mic. */
.voice-rec-starter {
  flex-basis: 100%;
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 8px 12px;
  background: var(--accent-dim);
  color: var(--text);
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--accent);
  font-size: 13px;
  line-height: 1.4;
}
.voice-rec-starter-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  flex-shrink: 0;
}
.voice-rec-starter-text {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-weight: 500;
  font-size: 14px;
  color: var(--text);
}
.voice-rec-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #e74c3c;
  animation: recPulse 1s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes recPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.5; transform: scale(1.2); }
}
.voice-rec-timer {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 15px;
  color: var(--text);
  min-width: 42px;
}
.voice-rec-hint {
  font-size: 12px;
  color: var(--text-secondary);
  flex: 1;
  text-align: right;
}
.voice-rec-hint.cancelling { color: #e74c3c; font-weight: 600; }

/* Explicit Cancel button on the voice-recording bar. Replaces the invisible
   "slide up to cancel" gesture with something tappable. */
.voice-rec-cancel {
  margin-left: auto;
  padding: 6px 14px;
  background: rgba(231, 76, 60, 0.12);
  color: #c94040;
  border: 1px solid rgba(231, 76, 60, 0.35);
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.voice-rec-cancel:hover { background: rgba(231, 76, 60, 0.2); }
.voice-rec-cancel:active { transform: scale(0.96); }

/* Stop-and-preview button sits next to Cancel. Primary-action styling so it
   reads as the obvious "done recording, send this" tap target. */
.voice-rec-stop {
  margin-left: 6px;
  padding: 6px 16px;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.voice-rec-stop:hover { filter: brightness(1.05); }
.voice-rec-stop:active { transform: scale(0.96); }

/* Media bubbles */
.chat-bubble.media {
  padding: 6px;
  max-width: 72%;
}
.chat-bubble.media .time {
  margin-top: 4px;
  padding: 0 4px;
}
.bubble-media audio {
  display: block;
  width: 240px;
  max-width: 100%;
  height: 36px;
}
/* Shows the speed-date question that was attached to this clip —
   persisted server-side on messages.prompt_text. */
.bubble-media-prompt {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 12px 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  margin-bottom: 6px;
}
.chat-bubble.received .bubble-media-prompt {
  border-bottom-color: var(--border);
}
.bubble-media-prompt-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.75;
}
.bubble-media-prompt-text {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-size: 13.5px;
  line-height: 1.35;
}
.bubble-media video {
  display: block;
  width: 240px;
  max-width: 100%;
  max-height: 320px;
  border-radius: 12px;
  background: #000;
}

/* Full-screen video capture overlay */
.video-capture-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: #000;
  z-index: 120;
  align-items: center;
  justify-content: center;
}
.video-capture-overlay.active { display: flex; }
.video-capture-overlay video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.vc-close {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 3;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: rgba(0,0,0,0.6);
  color: #fff;
  font-size: 18px;
  cursor: pointer;
}
.vc-timer {
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  background: rgba(231, 76, 60, 0.9);
  color: #fff;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  font-size: 14px;
}
/* Starter chip surfaced at the top of the video-capture overlay — gives
   the recorder a profile-aware conversation prompt per slot. */
.vc-starter {
  position: absolute;
  top: 68px;
  left: 50%;
  transform: translateX(-50%);
  max-width: min(92%, 460px);
  z-index: 4;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 16px;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(8px);
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #fff;
  text-align: center;
}
.vc-starter-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
}
.vc-starter-text {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-size: 16px;
  line-height: 1.4;
  font-weight: 500;
}
.vc-controls {
  position: absolute;
  bottom: 40px;
  left: 0;
  right: 0;
  z-index: 3;
  display: flex;
  justify-content: center;
}
.vc-record {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: #fff;
  border: 4px solid rgba(255,255,255,0.5);
  cursor: pointer;
  position: relative;
  transition: all var(--t-fast);
}
.vc-record::after {
  content: "";
  position: absolute;
  inset: 8px;
  border-radius: 50%;
  background: #e74c3c;
  transition: all var(--t-fast);
}
.vc-record.recording::after {
  inset: 22px;
  border-radius: 6px;
}
.vc-review {
  position: absolute;
  bottom: 40px;
  left: 0;
  right: 0;
  z-index: 3;
  display: flex;
  justify-content: center;
  gap: 16px;
}
.vc-review-btn {
  padding: 14px 28px;
  border-radius: var(--radius-pill);
  border: none;
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
  transition: all var(--t-fast);
}
.vc-review-btn.retake {
  background: rgba(255,255,255,0.15);
  color: #fff;
  backdrop-filter: blur(10px);
}
.vc-review-btn.send {
  background: var(--gradient);
  color: #fff;
  box-shadow: 0 4px 14px rgba(90, 94, 184,0.4);
}
.vc-review-btn.send:disabled { opacity: 0.6; cursor: wait; }

.chat-confirm-prompt {
  background: var(--gradient-subtle);
  border: 1px solid rgba(90, 94, 184,0.15);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin: 16px 0;
  text-align: center;
  font-size: 13px;
  color: var(--accent);
  font-weight: 500;
  animation: slideUpIn 0.3s var(--ease);
}
.chat-confirm-prompt button {
  margin-top: 10px;
  padding: 8px 24px;
  background: var(--accent);
  border: none;
  border-radius: var(--radius-pill);
  color: #fff;
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  transition: all var(--t-fast);
}
.chat-confirm-prompt button:hover { box-shadow: 0 2px 8px rgba(90, 94, 184, 0.3); }

/* Floating variant — centered hover card over the chat, dismissible.
   Uses the original pill look: soft purple tint, gold-accent border,
   comfy padding. The chat scrolls underneath unaffected. */
.chat-confirm-prompt.chat-confirm-floating {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc(100% - 32px);
  max-width: 340px;
  z-index: 85;
  background: var(--surface);
  border: 1px solid rgba(90, 94, 184, 0.25);
  border-radius: var(--radius);
  box-shadow: 0 20px 50px rgba(0,0,0,0.22), 0 6px 14px rgba(90, 94, 184, 0.16);
  padding: 20px 24px 22px;
  margin: 0;
  text-align: center;
  color: var(--accent);
  animation: confirmPromptIn 0.25s var(--ease-spring, var(--ease));
}
@keyframes confirmPromptIn {
  from { opacity: 0; transform: translate(-50%, -46%) scale(0.96); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
.chat-confirm-prompt.chat-confirm-floating .chat-confirm-dismiss {
  position: absolute;
  top: 6px;
  right: 8px;
  width: 24px;
  height: 24px;
  padding: 0;
  margin: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--text-dim);
  font-size: 14px;
  line-height: 1;
  border: 0;
  cursor: pointer;
  box-shadow: none;
  font-weight: 400;
}
.chat-confirm-prompt.chat-confirm-floating .chat-confirm-dismiss:hover {
  background: var(--bg-secondary);
  color: var(--text);
  box-shadow: none;
}

/* Typing indicator */
.typing-indicator {
  align-self: flex-start;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 12px 16px;
  display: flex;
  gap: 4px;
  animation: fadeIn 0.2s var(--ease);
}
.typing-indicator span {
  width: 6px; height: 6px; border-radius: 50%; background: var(--text-dim);
  animation: typingDot 1.2s ease-in-out infinite;
}
.typing-indicator span:nth-child(2) { animation-delay: 0.15s; }
.typing-indicator span:nth-child(3) { animation-delay: 0.3s; }
@keyframes typingDot {
  0%, 60%, 100% { opacity: 0.3; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-4px); }
}

/* ============================================================
   SPEED DATING — GUIDED ROUNDS
   ============================================================ */

/* Intro screen */
.speed-intro { text-align: center; padding: 32px 20px; animation: fadeSlideIn 0.4s var(--ease); }
.speed-intro-photo { width: 80px; height: 80px; border-radius: 50%; object-fit: cover; border: 3px solid var(--accent); margin-bottom: 16px; box-shadow: 0 0 0 4px rgba(90, 94, 184, 0.15); }
.speed-intro h2 { font-size: 20px; font-weight: 700; margin-bottom: 8px; color: var(--text); }
.speed-intro p { font-size: 14px; color: var(--text-secondary); line-height: 1.6; margin-bottom: 24px; max-width: 280px; margin-left: auto; margin-right: auto; }
.speed-intro .btn-go { background: var(--gradient); color: #fff; border: none; padding: 14px 40px; border-radius: var(--radius-pill); font-size: 16px; font-weight: 700; cursor: pointer; transition: all var(--t-fast); box-shadow: var(--shadow-md); }
.speed-intro .btn-go:hover { box-shadow: var(--shadow-lg); transform: translateY(-1px); }
.speed-intro .btn-go:active { transform: scale(0.97); }

/* Round progress dots */
.speed-progress { display: flex; justify-content: center; gap: 10px; margin-bottom: 20px; }
.speed-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--border); transition: all var(--t-normal) var(--ease); }
.speed-dot.active { background: var(--accent); transform: scale(1.3); box-shadow: 0 0 0 3px rgba(90, 94, 184, 0.2); }
.speed-dot.complete { background: var(--accent); }

/* Prompt card */
.speed-prompt-card {
  background: linear-gradient(135deg, rgba(90, 94, 184,0.06) 0%, rgba(90, 94, 184,0.06) 100%);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  padding: 16px 20px;
  margin-bottom: 20px;
  animation: slideUpIn 0.35s var(--ease);
}
.speed-prompt-card .round-label { font-size: 11px; font-weight: 700; color: var(--accent); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 6px; }
.speed-prompt-card .prompt-text { font-size: 16px; font-weight: 600; color: var(--text); line-height: 1.4; }

/* Video/Audio toggle */
.media-toggle { display: flex; justify-content: center; gap: 0; margin-bottom: 20px; }
.media-toggle-btn {
  padding: 10px 28px;
  font-size: 13px;
  font-weight: 600;
  border: 1.5px solid var(--border);
  background: var(--surface);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--t-fast);
}
.media-toggle-btn:first-child { border-radius: var(--radius-pill) 0 0 var(--radius-pill); }
.media-toggle-btn:last-child { border-radius: 0 var(--radius-pill) var(--radius-pill) 0; border-left: 0; }
.media-toggle-btn.active { background: rgba(90, 94, 184,0.1); border-color: var(--accent); color: var(--accent); }

/* Camera preview */
.speed-camera-preview {
  width: 100%;
  aspect-ratio: 4/3;
  border-radius: var(--radius);
  background: #1a1a1a;
  margin-bottom: 16px;
  object-fit: cover;
  box-shadow: var(--shadow-sm);
}

/* Circular timer ring */
.timer-ring-wrap { display: flex; justify-content: center; margin-bottom: 16px; position: relative; }
.timer-ring-wrap svg { width: 120px; height: 120px; transform: rotate(-90deg); }
.timer-ring .ring-track { fill: none; stroke: var(--border); stroke-width: 6; }
.timer-ring .ring-progress { fill: none; stroke: var(--accent); stroke-width: 6; stroke-linecap: round; transition: stroke-dashoffset 1s linear; }
.timer-ring .ring-progress.recording { stroke: var(--danger); }
.timer-ring-text {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  font-size: 28px; font-weight: 700; color: var(--accent); font-variant-numeric: tabular-nums;
}
.timer-ring-text.recording { color: var(--danger); }

/* Recorder controls (reused) */
.recorder-controls { display: flex; justify-content: center; gap: 12px; }
.rec-btn {
  padding: 10px 24px;
  border-radius: var(--radius-pill);
  border: none;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--t-fast);
}
.rec-btn:active { transform: scale(0.95); }
.rec-btn.record { background: var(--danger); color: #fff; }
.rec-btn.record:hover { box-shadow: 0 2px 8px rgba(201, 69, 63, 0.3); }
.rec-btn.stop { background: var(--surface); border: 1px solid var(--border); color: var(--text); }
.rec-btn.send { background: var(--gradient); color: #fff; }
.rec-btn.discard { background: var(--surface); border: 1px solid var(--danger); color: var(--danger); }

/* Waiting state */
.speed-waiting { text-align: center; padding: 32px 20px; animation: fadeSlideIn 0.3s var(--ease); }
.speed-waiting p { font-size: 15px; color: var(--text-secondary); margin-bottom: 8px; }
.speed-waiting .waiting-dots span {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent); margin: 0 3px;
  animation: typingDot 1.4s ease-in-out infinite;
}
.speed-waiting .waiting-dots span:nth-child(2) { animation-delay: 0.2s; }
.speed-waiting .waiting-dots span:nth-child(3) { animation-delay: 0.4s; }

/* Response review cards */
.speed-responses { display: flex; flex-direction: column; gap: 12px; margin-bottom: 20px; animation: fadeSlideIn 0.35s var(--ease); }
.speed-response-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px;
  box-shadow: var(--shadow-sm);
}
.speed-response-card .response-header { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.speed-response-card .response-photo { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; }
.speed-response-card .response-name { font-size: 13px; font-weight: 600; color: var(--text); }
.speed-response-card video, .speed-response-card audio { width: 100%; border-radius: var(--radius-sm); }
.seed-placeholder {
  background: linear-gradient(135deg, rgba(90, 94, 184,0.06) 0%, rgba(90, 94, 184,0.06) 100%);
  border-radius: var(--radius-sm);
  padding: 28px 16px;
  text-align: center;
  color: var(--text-secondary);
  font-size: 13px;
  font-style: italic;
}

/* Decision / summary screen */
.speed-summary { padding: 8px 0; animation: fadeSlideIn 0.4s var(--ease); }
.speed-summary h2 { text-align: center; font-size: 20px; font-weight: 700; margin-bottom: 4px; }
.speed-summary .summary-sub { text-align: center; font-size: 14px; color: var(--text-secondary); margin-bottom: 20px; }
.speed-summary-round { margin-bottom: 16px; }
.speed-summary-round .summary-prompt { font-size: 13px; color: var(--accent); font-weight: 600; font-style: italic; margin-bottom: 8px; padding-left: 12px; border-left: 2px solid var(--accent); }

/* Recorder card wrapper */
.speed-recorder-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  margin-bottom: 16px;
  box-shadow: var(--shadow-sm);
}

/* Round transition */
.speed-round-enter { animation: fadeSlideIn 0.35s var(--ease); }
@keyframes fadeSlideIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }

/* Next round button */
.btn-next-round {
  display: block; width: 100%; padding: 14px; margin-top: 8px;
  background: var(--gradient); color: #fff; border: none;
  border-radius: var(--radius); font-size: 15px; font-weight: 600;
  cursor: pointer; transition: all var(--t-fast); box-shadow: var(--shadow-sm);
}
.btn-next-round:hover { box-shadow: var(--shadow-md); }
.btn-next-round:active { transform: scale(0.98); }

/* ============================================================
   PLAN DATE
   ============================================================ */

.plan-date-section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  margin-bottom: 12px;
  box-shadow: var(--shadow-sm);
  animation: slideUpIn 0.35s var(--ease);
}
.plan-date-section h3 { font-size: 16px; font-weight: 600; margin-bottom: 12px; }

/* New Plan Date section scaffolding — role eyebrow + compact finished view */
.plan-role-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 6px;
}
.plan-role-sub {
  font-size: 13.5px;
  color: var(--text-secondary);
  line-height: 1.5;
  margin-bottom: 14px;
}
.plan-date-section.plan-date-final h3 {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 20px;
  margin-bottom: 8px;
}
.plan-summary {
  font-size: 14px;
  color: var(--text);
  line-height: 1.55;
  padding: 12px 14px;
  background: var(--accent-dim);
  border-left: 3px solid var(--accent);
  border-radius: 8px;
  margin: 0 0 16px;
}

/* "I'm on my way" asymmetric phone unlock — 2h window around scheduled_at */
.on-way-section {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed var(--border);
}
.on-way-btn {
  width: 100%;
  padding: 14px;
  border-radius: var(--radius);
  background: var(--accent);
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  border: 0;
  cursor: pointer;
}
.on-way-btn:hover { background: var(--accent-light); }
.on-way-hint {
  margin-top: 8px;
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.45;
  text-align: center;
}
.on-way-active {
  padding: 12px 14px;
  background: rgba(71, 179, 122, 0.10);
  border-left: 3px solid var(--success);
  border-radius: 8px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--text);
}
.on-way-incoming {
  margin-top: 8px;
  padding: 10px 14px;
  background: var(--accent-dim);
  border-radius: 8px;
  font-size: 13px;
  color: var(--accent);
  font-weight: 600;
}
.on-way-phone {
  margin-top: 12px;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.on-way-phone-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.on-way-phone-number {
  font-size: 20px;
  font-weight: 700;
  color: var(--accent);
  text-decoration: none;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}
.on-way-phone-number:hover { color: var(--accent-light); }

/* Share-with-a-friend (rec B) — bottom of meeting panel */
.share-friend-section {
  margin-top: 14px;
  padding: 14px;
  background: var(--bg-secondary);
  border: 1px dashed var(--border-strong, var(--border));
  border-radius: var(--radius);
}
.share-friend-title { font-size: 13px; font-weight: 700; color: var(--text); margin-bottom: 4px; }
.share-friend-sub { font-size: 12px; color: var(--text-secondary); line-height: 1.45; margin-bottom: 10px; }
.share-friend-btn { width: 100%; }

/* Post-date check-in (rec A) */
.checkin-section {
  margin-top: 14px;
  padding: 16px 14px 12px;
  background: rgba(90, 94, 184, 0.06);
  border: 1px solid rgba(90, 94, 184, 0.22);
  border-radius: var(--radius);
}
.checkin-title { font-family: 'Fraunces', Georgia, serif; font-size: 17px; font-weight: 700; margin-bottom: 4px; }
.checkin-sub { font-size: 13px; color: var(--text-secondary); line-height: 1.45; margin-bottom: 12px; }
.checkin-btn { width: 100%; }
.checkin-emergency {
  display: block;
  text-align: center;
  margin-top: 10px;
  padding: 8px;
  font-size: 12px;
  color: var(--danger);
  text-decoration: underline;
}

/* Per-match selfie verification strip — shown above chat messages when
   partner's per-match selfie is stale/missing (rec D). */
.selfie-strip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--accent-dim);
  border-bottom: 1px solid rgba(90, 94, 184, 0.2);
  font-size: 13px;
  flex-wrap: wrap;
}
.selfie-strip-icon { font-size: 16px; flex-shrink: 0; }
.selfie-strip-text { flex: 1; color: var(--text); font-weight: 500; min-width: 140px; }
.selfie-strip-btn {
  padding: 6px 12px;
  background: var(--accent);
  color: #fff;
  border: 0;
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  flex-shrink: 0;
}
.selfie-strip-btn:hover { background: var(--accent-light); }

/* Tone-check speed bump buttons (rec C) */
.tone-buttons {
  display: flex;
  gap: 10px;
  margin-top: 8px;
}
.tone-edit-btn {
  flex: 1;
  padding: 12px;
  border-radius: var(--radius);
  border: 0;
  background: var(--accent);
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
}
.tone-edit-btn:hover { background: var(--accent-light); }
.tone-send-btn {
  flex: 1;
  padding: 12px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-secondary);
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
}
.tone-send-btn:hover { color: var(--text); }

/* Premium AI-opener button in slow-like sheet */
.ai-opener-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 0 10px;
  padding: 10px 14px;
  width: 100%;
  background: linear-gradient(135deg, rgba(90, 94, 184, 0.12) 0%, rgba(90, 94, 184, 0.18) 100%);
  border: 1px solid rgba(90, 94, 184, 0.3);
  border-radius: var(--radius-pill);
  color: var(--accent);
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  transition: all var(--t-fast);
}
.ai-opener-btn:hover {
  background: linear-gradient(135deg, rgba(90, 94, 184, 0.2) 0%, rgba(90, 94, 184, 0.28) 100%);
  transform: translateY(-1px);
}
.ai-opener-btn:disabled { opacity: 0.6; cursor: default; transform: none; }

/* Zera+ paywall screen */
.paywall-body {
  padding: 24px 20px 80px;
  background: linear-gradient(180deg, rgba(90, 94, 184, 0.08) 0%, var(--bg) 60%);
  min-height: 100%;
}
.paywall-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--surface);
  font-size: 16px;
  cursor: pointer;
  z-index: 10;
}
.paywall-hero { text-align: center; padding: 24px 16px 20px; }
.paywall-mark {
  width: 80px;
  height: 68px;
  margin: 0 auto 16px;
  filter: drop-shadow(0 6px 16px rgba(90, 94, 184, 0.35));
  animation: heartPulse 1.8s ease-in-out infinite;
}
.paywall-eyebrow {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 6px;
}
.paywall-title {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 30px;
  font-weight: 700;
  line-height: 1.1;
  margin-bottom: 10px;
}
.paywall-sub {
  font-size: 15px;
  color: var(--text-secondary);
  line-height: 1.55;
  max-width: 320px;
  margin: 0 auto;
}
.paywall-perks {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 30px 0 24px;
}
.paywall-perk {
  display: flex;
  gap: 14px;
  padding: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.paywall-perk-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--accent-dim);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}
.paywall-perk-title { font-weight: 700; font-size: 15px; color: var(--text); }
.paywall-perk-sub { font-size: 13px; color: var(--text-secondary); margin-top: 2px; line-height: 1.45; }
.paywall-price {
  text-align: center;
  padding: 18px;
  background: var(--accent-dim);
  border: 1px solid rgba(90, 94, 184, 0.3);
  border-radius: var(--radius);
  margin-bottom: 16px;
}
.paywall-price-main { display: flex; align-items: baseline; justify-content: center; gap: 4px; }
.paywall-price-amount { font-family: 'Fraunces', Georgia, serif; font-size: 30px; font-weight: 700; color: var(--accent); }
.paywall-price-period { font-size: 14px; color: var(--text-secondary); }
.paywall-price-sub { font-size: 12px; color: var(--text-secondary); margin-top: 4px; }
.paywall-cta {
  width: 100%;
  padding: 16px;
  border-radius: var(--radius);
  background: var(--accent);
  color: #fff;
  border: 0;
  font-weight: 700;
  font-size: 16px;
  cursor: pointer;
  box-shadow: 0 8px 22px rgba(90, 94, 184, 0.38);
}
.paywall-cta:hover { background: var(--accent-light); }
.paywall-cta:disabled { opacity: 0.6; cursor: default; }
.paywall-manage {
  width: 100%;
  margin-top: 8px;
  padding: 12px;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
}
.paywall-disabled-note {
  text-align: center;
  margin-top: 12px;
  padding: 12px;
  color: var(--text-secondary);
  font-size: 13px;
  background: var(--bg-secondary);
  border-radius: var(--radius-sm);
}
.paywall-legal {
  text-align: center;
  font-size: 11px;
  color: var(--text-dim);
  line-height: 1.55;
  margin-top: 14px;
}
.paywall-legal a { color: var(--accent); text-decoration: underline; }

/* Zera+ row in Settings */
.vibe-plus-row {
  background: linear-gradient(135deg, rgba(90, 94, 184, 0.14) 0%, rgba(90, 94, 184, 0.08) 100%) !important;
  border: 1px solid rgba(90, 94, 184, 0.28) !important;
  color: var(--accent) !important;
  font-weight: 700;
}
.vibe-plus-row.subscribed { background: var(--accent-dim) !important; }
.vibe-plus-row:hover { background: linear-gradient(135deg, rgba(90, 94, 184, 0.22) 0%, rgba(90, 94, 184, 0.14) 100%) !important; }

/* "Who liked you" premium gate */
.like-photo.is-blurred img {
  filter: blur(18px) saturate(0.8);
  transform: scale(1.1); /* hide blur halo edges */
}
.like-photo .like-lock {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-size: 28px;
  color: #fff;
  text-shadow: 0 2px 8px rgba(0,0,0,0.4);
}
.like-card.is-locked { cursor: pointer; }
.like-card.is-locked .like-name { color: var(--text-dim); font-weight: 600; }
.like-card.is-locked .like-sub { color: var(--accent); font-weight: 600; }

.likes-upsell {
  margin: 4px 16px 14px;
  padding: 18px 20px;
  background: linear-gradient(135deg, rgba(90, 94, 184, 0.12) 0%, rgba(90, 94, 184, 0.18) 100%);
  border: 1px solid rgba(90, 94, 184, 0.3);
  border-radius: var(--radius);
  text-align: center;
}
.likes-upsell-eyebrow {
  font-size: 11px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 6px;
}
.likes-upsell-title { font-family: 'Fraunces', Georgia, serif; font-size: 22px; font-weight: 700; margin-bottom: 4px; }
.likes-upsell-sub { font-size: 13px; color: var(--text-secondary); margin-bottom: 14px; line-height: 1.45; }
.likes-upsell-cta {
  padding: 11px 22px;
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: #fff;
  border: 0;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  box-shadow: 0 6px 14px rgba(90, 94, 184, 0.3);
}
.likes-upsell-cta:hover { background: var(--accent-light); }

/* Beta banner — sits above everything including overlays via high z-index.
   Layout: when visible, the whole app container is pushed down by its height
   via a CSS custom property so content never hides behind it. */
:root { --beta-banner-height: 0px; }
body.beta-active { padding-top: var(--beta-banner-height); }
.beta-banner {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Safe-area-inset-top added to the top padding (2026-04 owner report:
     "Beta banner is high off the screen on the mobile app" — meaning
     the banner was riding under the iOS status bar / Android notch).
     The banner is fixed-positioned outside the .screen wrapper, so
     the Batch 2 :has(.hero-header) safe-area rule didn't reach it. */
  padding: calc(10px + env(safe-area-inset-top, 0px)) 44px 10px 14px;
  /* Beta banner — deep ink surface. Informational bars shouldn't shout;
     they carry weight through contrast + a thin accent rule on the chip. */
  background: var(--gradient-celebration);
  color: #F2EEE7;
  border-bottom: 1px solid rgba(242, 238, 231, 0.12);
  font-family: var(--font-sans);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
.beta-banner-inner {
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 720px;
  text-align: center;
  flex-wrap: wrap;
  justify-content: center;
}
.beta-banner-chip {
  flex-shrink: 0;
  padding: 4px 12px;
  background: var(--accent);
  color: #FFFFFF;
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}
.beta-banner-text {
  font-size: 13px;
  line-height: 1.4;
  color: #fff;
}
.beta-banner-text b { font-weight: 700; }
.beta-banner-text a { color: #fff; text-decoration: underline; font-weight: 600; }
.beta-banner-close {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 26px; height: 26px;
  border: 0;
  background: transparent;
  color: #fff;
  font-size: 14px;
  cursor: pointer;
  border-radius: 50%;
  opacity: 0.7;
}
.beta-banner-close:hover { opacity: 1; background: rgba(255, 255, 255, 0.18); }

/* Feedback button — icon-only, discreet. Opens the full feedback sheet on tap.
   Intentionally small + low-saturation so it never blocks primary actions. */
.fb-fab {
  position: fixed;
  bottom: 14px;
  right: 14px;
  z-index: 150;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  background: rgba(90, 94, 184, 0.9);
  color: #fff;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.16);
  opacity: 0.75;
  transition: all var(--t-fast);
}
.fb-fab:hover {
  opacity: 1;
  background: var(--accent);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(90, 94, 184, 0.32);
}
/* Scoot above the bottom nav on authenticated screens so it doesn't collide */
body:has(.screen#screen-discover.active) .fb-fab,
body:has(.screen#screen-connections.active) .fb-fab,
body:has(.screen#screen-profile.active) .fb-fab,
body:has(.screen#screen-match.active) .fb-fab {
  bottom: 76px;
}

/* Feedback modal */
.fb-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 220;
  align-items: flex-end;
  justify-content: center;
  backdrop-filter: blur(6px);
}
.fb-overlay.active { display: flex; }
.fb-sheet {
  position: relative;
  width: 100%;
  max-width: 460px;
  max-height: 92vh;
  overflow-y: auto;
  background: var(--surface);
  border-radius: 24px 24px 0 0;
  padding: 28px 22px 20px;
  animation: fbIn 0.22s var(--ease);
}
@keyframes fbIn {
  from { transform: translateY(14px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}
@media (min-width: 560px) {
  .fb-overlay { align-items: center; }
  .fb-sheet { border-radius: 24px; max-height: 88vh; }
}
.fb-close {
  position: absolute;
  top: 12px;
  right: 14px;
  width: 32px; height: 32px;
  border: 0;
  background: transparent;
  font-size: 16px;
  cursor: pointer;
  color: var(--text-secondary);
  border-radius: 50%;
}
.fb-close:hover { background: var(--bg-secondary); color: var(--text); }
.fb-eyebrow {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 6px;
}
.fb-title {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 22px;
  font-weight: 700;
  margin: 0 0 6px;
  color: var(--text);
}
.fb-sub {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.5;
  margin: 0 0 18px;
}
.fb-field { margin-bottom: 14px; }
.fb-field.fb-row { display: flex; gap: 10px; }
.fb-field-half { flex: 1; }
.fb-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 6px;
}
.fb-required { color: var(--danger); }
.fb-chip-group {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.fb-chip {
  padding: 7px 12px;
  border-radius: var(--radius-pill);
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--t-fast);
}
.fb-chip:hover { background: var(--surface-hover); }
.fb-chip.selected {
  background: var(--accent-dim);
  border-color: var(--accent);
  color: var(--accent);
}
.fb-input, .fb-textarea {
  width: 100%;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg-secondary);
  color: var(--text);
  font-family: inherit;
  font-size: 14px;
}
.fb-textarea { resize: vertical; min-height: 90px; }
.fb-input:focus, .fb-textarea:focus { outline: 2px solid rgba(90, 94, 184, 0.3); outline-offset: 0; border-color: var(--accent); }
.fb-counter {
  margin-top: 4px;
  text-align: right;
  font-size: 11px;
  color: var(--text-dim);
}
.fb-consent {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 12px;
  background: var(--bg-secondary);
  border-radius: var(--radius-sm);
  margin-bottom: 16px;
  font-size: 13px;
  color: var(--text-secondary);
  cursor: pointer;
}
.fb-consent input { margin-top: 2px; accent-color: var(--accent); }
.fb-actions { display: flex; gap: 10px; }
.fb-cancel {
  flex: 0 0 auto;
  padding: 12px 20px;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  font-weight: 600;
  cursor: pointer;
}
.fb-submit {
  flex: 1;
  padding: 12px;
  border-radius: var(--radius);
  background: var(--accent);
  color: #fff;
  border: 0;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(90, 94, 184, 0.25);
}
.fb-submit:hover:not(:disabled) { background: var(--accent-light); }
.fb-submit:disabled { opacity: 0.5; cursor: default; }

/* Admin Feedback tab */
.fb-admin-filters { display: flex; gap: 16px; align-items: center; margin: 12px 0 16px; font-size: 13px; color: var(--text-secondary); }
.fb-admin-filters .admin-select.sm { min-width: 140px; }
.fb-admin-list { display: flex; flex-direction: column; gap: 12px; }
.fb-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
}
.fb-card.fb-status-new      { border-left-color: var(--accent); }
.fb-card.fb-status-reviewing{ border-left-color: #E8803B; }
.fb-card.fb-status-done     { border-left-color: var(--success); opacity: 0.7; }
.fb-card.fb-status-wontfix  { border-left-color: var(--text-dim); opacity: 0.55; }
.fb-card-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
}
.fb-cat-chip, .fb-impact-chip, .fb-status-chip, .fb-tag {
  display: inline-flex;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 700;
  border: 1px solid var(--border);
  background: var(--bg-secondary);
  color: var(--text-secondary);
}
.fb-cat-chip { background: var(--accent-dim); color: var(--accent); border-color: rgba(90, 94, 184,0.35); }
.fb-status-chip { text-transform: uppercase; letter-spacing: 0.06em; }
.fb-status-chip.fb-s-new { background: var(--accent); color: #fff; border-color: var(--accent); }
.fb-status-chip.fb-s-reviewing { background: rgba(232,128,59,0.14); color: #E8803B; border-color: rgba(232,128,59,0.4); }
.fb-status-chip.fb-s-done { background: rgba(71,179,122,0.12); color: var(--success); border-color: rgba(71,179,122,0.35); }
.fb-status-chip.fb-s-wontfix { background: var(--bg-secondary); color: var(--text-dim); }
.fb-time { margin-left: auto; font-size: 11px; color: var(--text-dim); }
.fb-message { font-size: 14px; line-height: 1.55; color: var(--text); white-space: pre-wrap; margin-bottom: 10px; }
.fb-meta { display: flex; flex-wrap: wrap; gap: 12px; font-size: 12px; color: var(--text-secondary); margin-bottom: 6px; }
.fb-ctx { font-size: 11px; color: var(--text-dim); font-family: monospace; margin-bottom: 6px; word-break: break-all; }
.fb-adminnotes {
  font-size: 12px; color: var(--text-secondary);
  background: var(--bg-secondary); border-radius: var(--radius-sm);
  padding: 8px 10px; margin: 6px 0 8px;
}
.fb-actions-row {
  display: flex; gap: 6px; margin-top: 10px;
  align-items: center;
}
.fb-actions-row .text-input.sm { flex: 1; }
.fb-tag.subtle { opacity: 0.6; }

/* Premium toggle row in admin */
.prem-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-size: 12px;
  color: var(--text-secondary);
}
.prem-toggle input { accent-color: var(--accent); }
.prem-toggle input:checked + span { color: var(--accent); font-weight: 700; }

/* Admin empty-state card (subs / payments before Stripe is wired) */
.admin-empty-card {
  background: var(--bg-secondary);
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  padding: 20px 24px;
  margin-top: 12px;
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.6;
}
.admin-empty-card h3 { font-size: 16px; color: var(--text); margin: 0 0 8px; }
.admin-empty-card ol { margin: 10px 0 0 20px; }
.admin-empty-card li { margin-bottom: 4px; }
/* Interests multi-select section in edit modal */
.interests-section .interests-count {
  font-size: 12px;
  color: var(--text-secondary);
  margin-bottom: 10px;
}
.interests-section .interests-group {
  margin-bottom: 12px;
}
.interests-section .interests-cat-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 6px;
}
.interests-section .interests-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.interests-section .interests-custom {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.interests-section .interests-custom-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 6px;
}

.err-stack {
  background: var(--bg-secondary);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  margin: 6px 0;
  font-size: 11px;
  line-height: 1.45;
  color: var(--text-secondary);
  white-space: pre-wrap;
  max-height: 180px;
  overflow: auto;
}
.admin-empty-card code {
  background: var(--surface);
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 12px;
  color: var(--accent);
  border: 1px solid var(--border);
}

/* Dark-mode variant — keeps the warning semantics but tones down the yellow */
:root[data-theme="dark"] .beta-banner {
  background: linear-gradient(90deg, rgba(230, 199, 106, 0.12) 0%, rgba(254, 243, 205, 0.08) 100%);
  color: #f0d88f;
  border-bottom-color: rgba(230, 199, 106, 0.3);
}
:root[data-theme="dark"] .beta-banner-close { color: #f0d88f; }
:root[data-theme="dark"] .beta-banner-close:hover { background: rgba(255,255,255,0.08); }

/* ============================================================
   5-STAGE DATE FLOW — progress strip + per-stage inputs + celebration modal
   ============================================================ */
.date-flow-progress-wrap {
  position: relative;
  padding-right: 72px; /* reserve space for close button */
}
.date-flow-progress {
  display: flex;
  gap: 4px;
  padding: 12px 16px 4px;
  font-size: 11px;
}
.df-close {
  position: absolute;
  top: 10px;
  right: 12px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-secondary);
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: color var(--t-fast), background var(--t-fast), border-color var(--t-fast);
}
.df-close:hover { color: var(--text); background: var(--bg-secondary, var(--surface)); border-color: var(--color-accent-soft); }
.df-close:active { transform: scale(0.97); }

/* Nudge button — appears in waiting sub-stages so the user can poke the
   partner whose turn it is. Visually secondary so it doesn't compete with
   the forward-motion CTA on their-turn stages. */
.df-nudge-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 14px;
  padding: 10px 18px;
  border: 1px solid var(--color-accent);
  border-radius: 999px;
  background: var(--color-accent-mist);
  color: var(--color-accent-deep);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--t-fast), transform var(--t-fast);
}
.df-nudge-btn:hover { background: var(--color-accent-soft); color: #fff; }
.df-nudge-btn:disabled { opacity: 0.6; cursor: default; }
.df-nudge-btn:active { transform: scale(0.98); }
.date-flow-step {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  color: var(--text-dim);
  text-align: center;
  position: relative;
}
.date-flow-step::after {
  content: "";
  position: absolute;
  top: 12px; right: -50%; width: 100%; height: 2px;
  background: var(--border, rgba(0,0,0,0.08));
  z-index: 0;
}
.date-flow-step:last-child::after { display: none; }
.date-flow-num {
  position: relative;
  z-index: 1;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--bg-secondary, #eee);
  color: var(--text-dim);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700;
}
/* Editorial Intimacy progress: filled ink for done, outlined for current,
   border-color for upcoming. Shape + weight carry the state, not color. */
.date-flow-step.done .date-flow-num { background: var(--color-accent); color: #fff; }
.date-flow-step.done::after { background: var(--color-accent); }
.date-flow-step.active .date-flow-num {
  background: var(--bg);
  color: var(--color-accent-deep);
  box-shadow: inset 0 0 0 2px var(--color-accent);
}
.date-flow-step.active .date-flow-lbl { color: var(--color-accent-deep); font-weight: 600; }

.df-locked-location {
  background: var(--success-light, rgba(43,122,60,0.1));
  border-radius: 10px;
  padding: 12px 14px;
  margin: 12px 0;
  font-size: 13px;
}
.df-locked-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--success, #2b7a3c);
  font-weight: 700;
  margin-bottom: 4px;
}
.df-locked-body { color: var(--text); }

#df-slots { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
#df-slots label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--text-secondary); }
#df-slots input[type="datetime-local"] {
  padding: 10px 12px;
  border: 1px solid var(--border, rgba(0,0,0,0.12));
  border-radius: 8px;
  font-size: 14px;
  background: var(--surface, #fff);
  color: var(--text);
}

.df-slot-choices { display: flex; flex-direction: column; gap: 8px; margin: 14px 0; }
.df-slot-choice {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--border, rgba(0,0,0,0.12));
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.15s;
}
.df-slot-choice:hover { border-color: var(--accent); background: var(--accent-dim); }
.df-slot-choice:has(input:checked) {
  border-color: var(--accent);
  background: var(--accent-dim);
}

.df-phone-section { margin-top: 16px; display: flex; flex-direction: column; gap: 6px; }
.df-phone-section label { font-size: 13px; color: var(--text-secondary); }
.df-phone-section label small { color: var(--text-dim); font-weight: 400; }
.df-phone-section input[type="tel"] {
  padding: 10px 12px;
  border: 1px solid var(--border, rgba(0,0,0,0.12));
  border-radius: 8px;
  font-size: 14px;
  background: var(--surface, #fff);
}
.df-consent { display: flex; align-items: center; gap: 8px; font-size: 12px; margin-top: 6px; }
.df-consent input { margin: 0; }

.phone-transparency {
  margin-top: 14px;
  padding: 12px 14px;
  background: var(--bg-secondary, #f4f4f6);
  border-left: 3px solid var(--accent);
  border-radius: 4px;
  font-size: 12.5px;
  color: var(--text-secondary);
  line-height: 1.55;
}
.phone-transparency-title {
  font-weight: 700;
  color: var(--text);
  margin-bottom: 6px;
  font-size: 13px;
}
.phone-transparency-list {
  margin: 0;
  padding-left: 18px;
}
.phone-transparency-list li { margin: 3px 0; }
.phone-transparency-list b { color: var(--text); }

/* "OPTIONAL" pill in the phone input heading — small, bold, unmissable. */
.df-phone-heading {
  font-weight: 700;
  font-size: 14px;
  color: var(--text);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.df-optional-pill {
  display: inline-block;
  padding: 2px 8px;
  background: var(--accent-dim);
  color: var(--accent);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
  border-radius: 10px;
}
/* Emphasize the primary "Share my phone" checkbox vs the utility
   "Save as default" one beneath it. */
.df-consent.df-consent-emph {
  background: var(--surface, #fff);
  border: 1px solid var(--border, rgba(0,0,0,0.1));
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 10px;
}
.df-consent.df-consent-emph input {
  transform: scale(1.15);
}

/* Stage 4 — peer's share status chip */
.df-status-chip {
  display: inline-block;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 12.5px;
  line-height: 1.4;
}
.df-status-chip.df-shared   { background: var(--success-light, rgba(43,122,60,0.1)); color: var(--success, #2b7a3c); }
.df-status-chip.df-unshared { background: var(--bg-secondary, #f4f4f6); color: var(--text-secondary); }

/* Date flow CTA — full-width primary action for stages 3 + 4. The "final"
   variant (stage 4) gets a gradient, check icon, and two-line label so the
   "you're about to lock this in" moment feels deliberate and warm. */
.df-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  margin-top: 18px;
  padding: 14px 18px;
  border: none;
  border-radius: 12px;
  /* Plan-A-Date CTAs opt into the periwinkle accent — this flow earns the
     chroma as a "we're building something together" signal. */
  background: var(--color-accent);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.01em;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
  transition: transform 0.12s ease, box-shadow 0.12s ease, filter 0.12s ease;
}
.df-cta:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18); }
.df-cta:active { transform: translateY(0); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); }
.df-cta:disabled { opacity: 0.55; cursor: wait; transform: none; box-shadow: none; }
.df-cta-arrow { font-size: 18px; line-height: 1; opacity: 0.9; }

/* Final confirmation CTA (stage 4) — deep ink gradient + single accent ring
   so the "you're about to lock this in" moment feels deliberate and warm
   without shouting. This is one of the few surfaces that earns the accent. */
.df-cta-final {
  padding: 16px 20px;
  background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-deep) 100%);
  box-shadow: 0 8px 24px rgba(90, 94, 184, 0.32), 0 0 0 1px rgba(255,255,255,0.18) inset;
}
.df-cta-final:hover { box-shadow: 0 10px 30px rgba(90, 94, 184, 0.4), 0 0 0 1px rgba(255,255,255,0.28) inset; }
.df-cta-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
  font-size: 16px;
  font-weight: 800;
  flex-shrink: 0;
}
.df-cta-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  line-height: 1.25;
}
.df-cta-body b { font-size: 16px; font-weight: 800; }
.df-cta-body small {
  font-size: 11.5px;
  font-weight: 500;
  opacity: 0.9;
  letter-spacing: 0.01em;
}

/* Stage 5 celebration modal */
.date-celeb-sheet {
  position: relative;
  background: var(--surface, #fff);
  color: var(--text);
  border-radius: 16px;
  padding: 28px 24px;
  max-width: 92vw; width: 440px;
  box-shadow: 0 24px 70px rgba(0,0,0,0.28);
}
.date-celeb-hero {
  text-align: center;
  font-size: 52px;
  line-height: 1;
  margin-bottom: 2px;
  animation: bounce-in 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes bounce-in {
  0% { transform: scale(0.3); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}
.date-celeb-detail {
  background: var(--bg-secondary, #fafafa);
  border-radius: 10px;
  padding: 14px 16px;
  font-size: 14px;
  line-height: 1.5;
}
.date-celeb-actions {
  display: flex; flex-direction: column; gap: 8px; margin-top: 16px;
}

/* ============================================================
   TRIAL COUNTDOWN BANNER — sits above the Discover header during an active
   14-day trial. Once-per-day dismiss on the X.
   ============================================================ */
.trial-banner {
  /* Trial countdown — sunken surface with a terracotta left rule. Carries
     information without feeling like a marketing shout. */
  background: var(--surface-sunken);
  color: var(--text);
  border-left: 3px solid var(--accent);
  flex-shrink: 0;
}
.trial-banner-inner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  font-size: 12.5px;
  line-height: 1.3;
}
.trial-banner-chip {
  flex-shrink: 0;
  font-size: 14px;
}
.trial-banner-text { flex: 1; min-width: 0; color: var(--text-secondary); }
.trial-banner-text a {
  color: var(--accent);
  text-decoration: underline;
  font-weight: 600;
  margin-left: 2px;
}
.trial-banner-close {
  background: transparent;
  border: none;
  color: var(--text-dim);
  opacity: 0.7;
  font-size: 14px;
  line-height: 1;
  padding: 4px 6px;
  cursor: pointer;
  border-radius: 4px;
}
.trial-banner-close:hover { opacity: 1; background: var(--bg-tertiary); color: var(--text); }

/* Insights panel backdrop — monochrome sunken surface. Previously a Tailwind
   purple in dark mode; Editorial Intimacy moves this to warm ink-sunken so
   the chart/data cards contrast through the neutral palette. */
:root[data-theme="dark"] #tab-insights,
:root[data-theme="dark"] #tab-insights.insights-reveal { background: var(--surface-sunken); }

.date-pref-options { display: flex; flex-direction: column; gap: 8px; }
.date-pref-option {
  padding: 14px 16px;
  background: var(--bg);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-size: 14px;
  cursor: pointer;
  transition: all var(--t-fast);
}
.date-pref-option:hover { border-color: var(--accent); color: var(--text); background: var(--surface-hover); }
.date-pref-option:active { transform: scale(0.98); }
.date-pref-option.selected { background: var(--color-accent); border-color: var(--color-accent); color: #FFFFFF; font-weight: 600; }

.plan-input-section { margin-top: 16px; }
.plan-input-section textarea {
  width: 100%;
  padding: 12px;
  background: var(--bg);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 14px;
  font-family: inherit;
  resize: none;
  min-height: 80px;
  outline: none;
  line-height: 1.5;
  transition: border-color var(--t-fast);
}
.plan-input-section textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-dim); }

.safety-disclaimer {
  background: var(--danger-light);
  border: 1px solid rgba(225, 56, 96, 0.25);
  border-left: 4px solid var(--danger);
  border-radius: var(--radius);
  padding: 12px 16px 14px;
  margin-top: 14px;
  font-size: 13px;
  color: var(--text);
  line-height: 1.5;
  display: flex;
  flex-direction: column;
  gap: 6px;
  box-shadow: 0 2px 8px rgba(225, 56, 96, 0.06);
}
.safety-disclaimer-label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--danger);
}
.safety-disclaimer-body {
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.55;
}

.plan-display {
  background: var(--gradient-subtle);
  border: 1px solid rgba(90, 94, 184,0.15);
  border-radius: var(--radius);
  padding: 16px;
  margin-top: 12px;
}
.plan-display h4 { color: var(--accent); font-size: 13px; margin-bottom: 6px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
.plan-display p { font-size: 14px; color: var(--text); line-height: 1.5; }
.copy-btn {
  margin-top: 10px;
  padding: 6px 14px;
  background: var(--accent-dim);
  border: 1px solid var(--accent);
  border-radius: var(--radius-pill);
  color: var(--accent);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--t-fast);
}
.copy-btn:hover { background: var(--accent-glow); }

.followup-section { margin-top: 20px; }
.followup-question { font-size: 14px; color: var(--text); margin-bottom: 10px; font-weight: 500; }
.followup-btns { display: flex; gap: 8px; }
.followup-btn {
  padding: 8px 20px;
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--border);
  background: var(--surface);
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--t-fast);
}
.followup-btn:hover { border-color: var(--accent); color: var(--accent); }
.followup-btn:active { transform: scale(0.96); }
.followup-btn.selected { background: var(--accent-dim); border-color: var(--accent); color: var(--accent); }

.feedback-message {
  text-align: center;
  padding: 20px;
  font-size: 14px;
  animation: fadeIn 0.3s var(--ease);
}
.feedback-message.success { color: var(--success); font-weight: 500; }
.feedback-message.neutral { color: var(--text-secondary); }

/* ============================================================
   PROFILE SCREEN
   ============================================================ */

.profile-screen-header {
  text-align: center;
  padding: 24px 16px 16px;
}

/* ===== Hero zone ===== */
.profile-hero {
  text-align: center;
  padding: 24px 16px 12px;
}
.profile-hero .profile-main-photo { margin-bottom: 10px; }
.completeness {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  font-size: 12px;
  color: var(--text-secondary);
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 6px 12px;
  border-radius: var(--radius-pill);
}
.completeness-bar {
  width: 80px; height: 6px;
  background: var(--border);
  border-radius: 4px;
  overflow: hidden;
  position: relative;
}
.completeness-bar-fill {
  height: 100%;
  background: var(--gradient);
  border-radius: 4px;
  transition: width 0.4s var(--ease);
}
.hero-chips {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 14px;
  flex-wrap: wrap;
}
.hero-chip {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: all var(--t-fast);
}
.hero-chip:hover { background: var(--surface-hover); border-color: var(--accent-light); }
.hero-chip:active { transform: scale(0.97); }
/* Primary hero chip — used for "Edit profile" as the main action */
.hero-chip.primary {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
  box-shadow: 0 4px 12px rgba(90, 94, 184, 0.28);
}
.hero-chip.primary:hover { background: var(--accent-light); border-color: var(--accent-light); }
/* Subtle/secondary variant for Preview */
.hero-chip.subtle {
  background: transparent;
  color: var(--text-secondary);
}
.hero-chip.subtle.is-active { background: var(--accent-dim); color: var(--accent); border-color: var(--accent); }

/* ===== Tabs ===== */
.profile-tabs {
  display: flex;
  gap: 4px;
  padding: 4px;
  margin: 8px 16px 12px;
  background: var(--bg-secondary);
  border-radius: var(--radius);
  position: sticky;
  top: 0;
  z-index: 5;
}
.profile-tab {
  flex: 1;
  background: transparent;
  border: none;
  padding: 10px 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--t-fast);
}
.profile-tab.active {
  background: var(--surface);
  color: var(--accent);
  box-shadow: var(--shadow-sm);
}
.profile-tab-content { padding: 0 16px 24px; }

/* ===== Vibe hero card ===== */
.vibe-card {
  /* Insights hero — a "large moment" surface, so it uses the lighter
     --color-accent (the hero tier) rather than the text-level --accent
     alias. Per brand spec: accent is for logo / large moments / illustrations. */
  background: var(--color-accent);
  color: #fff;
  border-radius: var(--radius);
  padding: 22px 20px;
  margin-bottom: 14px;
  box-shadow: var(--shadow-md);
  position: relative;
  overflow: hidden;
}
.vibe-card::before {
  content: "";
  position: absolute;
  top: -40px; right: -40px;
  width: 120px; height: 120px;
  background: rgba(255,255,255,0.12);
  border-radius: 50%;
}
.vibe-card::after {
  content: "";
  position: absolute;
  bottom: -50px; left: -30px;
  width: 100px; height: 100px;
  background: rgba(255,255,255,0.08);
  border-radius: 50%;
}
.vibe-eyebrow {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.9;
  margin-bottom: 6px;
  position: relative;
}
.vibe-title {
  font-size: 24px;
  font-weight: 800;
  line-height: 1.15;
  margin-bottom: 10px;
  position: relative;
}
.vibe-blurb {
  font-size: 14px;
  line-height: 1.55;
  opacity: 0.95;
  margin-bottom: 16px;
  position: relative;
}
.vibe-pull {
  position: relative;
  background: rgba(255,255,255,0.14);
  border-left: 2px solid rgba(255,255,255,0.6);
  padding: 10px 12px;
  border-radius: 6px;
  font-size: 13px;
  margin-bottom: 8px;
}
.vibe-pull:last-child { margin-bottom: 0; }
.vibe-pull .pull-label {
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.85;
  margin-bottom: 2px;
}

/* ===== Insight dimension cards ===== */
.insight-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 12px;
  box-shadow: var(--shadow-sm);
}
.insight-card-head {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 10px;
}
.insight-card-label {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-dim);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.insight-card-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--text);
}
.insight-card-summary {
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-secondary);
  margin-bottom: 12px;
}
.insight-list-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-top: 10px;
  margin-bottom: 4px;
}
.insight-list {
  font-size: 13px;
  color: var(--text);
  line-height: 1.5;
}
.insight-list li { margin-left: 16px; margin-bottom: 2px; }
.insight-pairs {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--border);
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.5;
}

/* ===== Love-language bar ===== */
.ll-bar {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 8px 0 12px;
}
.ll-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
}
.ll-name { width: 112px; flex-shrink: 0; color: var(--text-secondary); font-size: 12px; }
.ll-name.primary { color: var(--accent); font-weight: 700; }
.ll-name.secondary { color: var(--text); font-weight: 600; }
.ll-track {
  flex: 1;
  height: 8px;
  background: var(--bg-secondary);
  border-radius: 4px;
  overflow: hidden;
}
.ll-fill {
  height: 100%;
  border-radius: 4px;
  background: var(--border-strong);
}
.ll-fill.primary { background: var(--gradient); }
.ll-fill.secondary { background: var(--accent-light); }
.ll-pct { width: 34px; font-size: 11px; color: var(--text-dim); text-align: right; }

/* ===== Life-vision chip grid ===== */
.lv-chips {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 8px;
  margin: 4px 0 12px;
}
.lv-chip {
  background: var(--accent-dim);
  border: 1px solid var(--accent-glow);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  font-size: 13px;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 8px;
}
.lv-chip .lv-icon { font-size: 16px; }

/* ===== Insights locked state ===== */
.insights-locked {
  background: var(--surface);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius);
  padding: 32px 20px;
  text-align: center;
}
.insights-locked h3 { font-size: 17px; font-weight: 700; margin-bottom: 8px; }
.insights-locked p { font-size: 14px; color: var(--text-secondary); margin-bottom: 16px; line-height: 1.5; }

/* ===== First-view reveal animation ===== */
@keyframes vibe-rise {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
.insights-reveal > * {
  opacity: 0;
  animation: vibe-rise 0.5s var(--ease) forwards;
}
.insights-reveal > *:nth-child(1) { animation-delay: 0.05s; }
.insights-reveal > *:nth-child(2) { animation-delay: 0.17s; }
.insights-reveal > *:nth-child(3) { animation-delay: 0.29s; }
.insights-reveal > *:nth-child(4) { animation-delay: 0.41s; }
.insights-reveal > *:nth-child(5) { animation-delay: 0.53s; }
.insights-reveal > *:nth-child(6) { animation-delay: 0.65s; }
.insights-reveal > *:nth-child(7) { animation-delay: 0.77s; }

/* ===== Emoji profile chips ===== */
.profile-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 2px;
}
/* Profile detail chips — unified with .discover-tag style (Looking For / Values)
   Kept as a separate selector so the emoji icon inside can still breathe. */
/* Monochrome — was accent-tinted, now neutral ink-on-surface with border. */
.profile-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--surface);
  color: var(--color-ink);
  border: 1px solid var(--border);
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0.01em;
  transition: background var(--t-fast);
}
.profile-chip .chip-icon { font-size: 13px; line-height: 1; opacity: 0.95; }
.profile-chip .chip-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.75;
}
.profile-chip .chip-label::after {
  content: "·";
  margin: 0 2px 0 5px;
  opacity: 0.55;
  font-weight: 700;
}
.profile-chip .chip-value { font-weight: 700; }
.profile-chip.is-hidden {
  background: var(--bg-tertiary);
  border-color: var(--border);
  color: var(--text-dim);
  opacity: 0.7;
}
.chip-hidden-tag {
  margin-left: 6px;
  padding: 1px 6px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: var(--border);
  color: var(--text-secondary);
  border-radius: var(--radius-xs);
}

/* ===== Visibility toggle (Edit modal) ===== */
.vis-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--accent-dim);
  border: 1px solid var(--accent-glow);
  color: var(--accent);
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  border-radius: var(--radius-pill);
  cursor: pointer;
  margin: 6px 0 10px;
  transition: all var(--t-fast);
}
.vis-toggle.is-hidden {
  background: var(--bg-tertiary);
  border-color: var(--border);
  color: var(--text-dim);
}
.vis-toggle:active { transform: scale(0.97); }

/* ===== Empty chat cue ===== */
.empty-chat-cue {
  text-align: center;
  font-size: 14px;
  color: var(--text-secondary);
  padding: 16px;
  margin: 8px 16px;
  background: var(--gradient-subtle);
  border: 1px solid rgba(90, 94, 184,0.12);
  border-radius: var(--radius);
}
.empty-chat-cue b { color: var(--text); font-weight: 600; }

/* ===== Settings tab list ===== */
.settings-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
}
.settings-item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  text-align: left;
  cursor: pointer;
  transition: all var(--t-fast);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.settings-item:hover { background: var(--surface-hover); }
.settings-item-sub {
  display: block;
  font-size: 11px;
  color: var(--text-dim);
  font-weight: 400;
  margin-top: 2px;
}
.settings-item.danger { color: var(--danger); }
.settings-item .chev { color: var(--text-dim); }

.profile-main-photo {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--accent);
  margin-bottom: 12px;
  box-shadow: 0 0 0 4px var(--accent-dim);
}
.profile-main-name { font-size: 22px; font-weight: 700; line-height: 1.3; }
.profile-main-meta { font-size: 14px; color: var(--text-secondary); margin-top: 4px; }

.profile-sections { padding: 0 16px; }
.profile-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 12px;
  box-shadow: var(--shadow-sm);
}
.profile-card h3 {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.profile-row {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  font-size: 14px;
  border-bottom: 1px solid rgba(229, 224, 213, 0.4);
}
.profile-row:last-child { border-bottom: none; }
.profile-row .label { color: var(--text-secondary); }
.profile-row .value { color: var(--text); font-weight: 500; }

.profile-actions {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Edit profile modal */
.edit-modal {
  display: none;
  position: fixed;
  inset: 0;
  background: var(--bg);
  z-index: 60;
  overflow-y: auto;
  animation: slideUp 0.3s var(--ease);
}
.edit-modal.active { display: block; }
.edit-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 16px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 5;
  box-shadow: 0 1px 4px rgba(0,0,0,0.03);
}
.edit-modal-body { padding: 16px; }

/* ============================================================
   PROMPTS
   ============================================================ */

.prompt-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-bottom: 10px;
  cursor: pointer;
  transition: all var(--t-fast);
}
.prompt-card:hover { border-color: var(--accent); }
.prompt-card.selected { border-color: var(--accent); background: var(--accent-dim); }
.prompt-card .prompt-q { font-size: 13px; color: var(--accent); font-weight: 600; font-style: italic; margin-bottom: 4px; }
.prompt-card .prompt-a { font-size: 14px; color: var(--text); line-height: 1.45; }
.prompt-card textarea {
  width: 100%; margin-top: 8px; padding: 10px; background: var(--bg);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  font-size: 14px; font-family: inherit; color: var(--text);
  resize: none; min-height: 48px; outline: none;
}
.prompt-card textarea:focus { border-color: var(--accent); }
.prompt-card .prompt-counter { font-size: 11px; color: var(--text-dim); text-align: right; margin-top: 2px; }

/* Discover card prompt preview */
.discover-prompt {
  margin-top: 0;
  margin-bottom: 6px;
  padding: 8px 12px;
  background: rgba(90, 94, 184, 0.04);
  border-radius: var(--radius-sm);
  border-left: 2px solid var(--accent);
}
.discover-prompt .dq { font-size: 11px; color: var(--accent); font-weight: 600; font-style: italic; }
.discover-prompt .da { font-size: 13px; color: var(--text); margin-top: 2px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* Photo progress bars (top of photo, Hinge-style) */
.photo-bars {
  position: absolute;
  top: 8px;
  left: 12px;
  right: 12px;
  display: flex;
  gap: 4px;
  z-index: 4;
}
.photo-bar {
  flex: 1;
  height: 3px;
  border-radius: 2px;
  background: rgba(255,255,255,0.3);
  transition: background var(--t-fast);
}
.photo-bar.active { background: rgba(255,255,255,0.95); }

/* Verified quiz badge */
.verified-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: 10px;
  margin-left: 6px;
  vertical-align: middle;
  line-height: 1;
}
.discover-photo-overlay .verified-badge {
  background: none;
  color: rgba(255,255,255,0.5);
  font-size: 12px;
  width: auto;
  height: auto;
  margin-left: 4px;
}

/* Detail icon chips */
.detail-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}
.detail-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  background: var(--accent-dim);
  border: none;
  border-radius: var(--radius-pill);
  font-size: 12.5px;
  color: var(--accent);
  font-weight: 600;
  white-space: nowrap;
  letter-spacing: 0.01em;
  line-height: 1.3;
}
.detail-chip .chip-icon {
  font-size: 11px;
  line-height: 1;
  color: var(--accent);
  opacity: 0.7;
}

/* Detail chips in scrollable profile */
.profile-details-section .detail-chips {
  flex-wrap: wrap;
  gap: 6px;
}

/* ============================================================
   SCROLLABLE PROFILE — INTERLEAVED SECTIONS
   ============================================================ */

/* Photo sections */
.profile-photo-section {
  position: relative;
  width: 100%;
}
.profile-photo-section img {
  width: 100%;
  display: block;
  object-fit: cover;
  cursor: pointer;
}
/* Hero photo (first) — taller */
.profile-photo-section.hero img {
  aspect-ratio: 3 / 4;
}
/* Subsequent photos — landscape-ish (legacy; new layout uses profile-photo-block) */
.profile-photo-section:not(.hero) img {
  aspect-ratio: 4 / 3;
}

/* ============================================================
   Push notification UX (2026-04) — visible category toggles +
   soft banner on Connections screen.
   ============================================================ */

/* Disabled pref-row: dim the whole row + block the switch. Used when
   push categories are shown before the user subscribes, so they can
   see what they'd be turning on without being able to toggle state
   that doesn't matter yet. */
.pref-row.is-disabled {
  opacity: 0.55;
}
.pref-row.is-disabled .switch {
  cursor: not-allowed;
  pointer-events: none;
}
.pref-row.is-disabled input[type="checkbox"] {
  cursor: not-allowed;
}

/* Intro line above the disabled push category rows explaining why
   they're greyed out. */
.push-prefs-intro {
  font-size: 12px;
  color: var(--text-secondary);
  padding: 4px 2px 6px;
  font-style: italic;
}

/* Connections-screen push banner (Part 3: soft fallback nudge). */
.push-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 12px 16px 0;
  padding: 12px 14px;
  background: var(--color-accent-mist, #EEEEFE);
  border: 1px solid var(--color-accent-soft, #9196F5);
  border-radius: var(--radius);
}
.push-banner-copy {
  flex: 1;
  min-width: 0;
}
.push-banner-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-accent-deep, #4B4FD6);
  line-height: 1.3;
}
.push-banner-sub {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 2px;
  line-height: 1.4;
}
.push-banner-cta {
  border: none;
  background: var(--color-accent, #6366F1);
  color: #fff;
  font-weight: 600;
  font-size: 13px;
  padding: 7px 14px;
  border-radius: 100px;
  cursor: pointer;
  font-family: "Inter", sans-serif;
  flex-shrink: 0;
}
.push-banner-cta:hover { background: var(--color-accent-deep, #4B4FD6); }
.push-banner-dismiss {
  border: none;
  background: transparent;
  color: var(--text-secondary);
  font-size: 16px;
  cursor: pointer;
  padding: 4px 6px;
  line-height: 1;
  flex-shrink: 0;
}
.push-banner-dismiss:hover { color: var(--text); }

/* ============================================================
   Profile overlay redesign (2026-04) — photo-count-aware layouts.
   See C:\Users\All Hours Plumbing\.claude\plans\prancy-scribbling-moth.md
   ============================================================ */

/* Clean header row below the hero. Replaces the old text-on-photo overlay
   which was hard to read against light photos + failed contrast. */
.profile-header-clean {
  padding: 14px 16px 8px;
}
.profile-header-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  font-family: "Fraunces", Georgia, serif;
  font-size: 22px;
  font-weight: 600;
  color: var(--text);
}
.profile-header-age {
  font-size: 18px;
  font-weight: 400;
  color: var(--text-secondary);
}
.profile-verified-badge {
  font-size: 11px;
  font-weight: 600;
  color: var(--color-accent-deep, #4B4FD6);
  background: var(--color-accent-mist, #EEEEFE);
  padding: 2px 8px;
  border-radius: 100px;
  letter-spacing: 0.02em;
  font-family: "Inter", sans-serif;
}
.profile-active-pill {
  font-size: 11px;
  font-weight: 600;
  color: #2b7a3c;
  background: rgba(43, 122, 60, 0.08);
  padding: 2px 8px;
  border-radius: 100px;
  letter-spacing: 0.02em;
  font-family: "Inter", sans-serif;
}
.profile-header-meta {
  margin-top: 6px;
  font-size: 13px;
  color: var(--text-secondary);
  font-family: "Inter", sans-serif;
}
.profile-hometown-pill {
  display: inline-block;
  font-size: 12px;
  color: var(--text-secondary);
  background: var(--color-surface, rgba(0,0,0,0.04));
  padding: 1px 8px;
  border-radius: 100px;
}

/* Layout A zero-photo poster — typographic hero when the user has no
   photos. Brand gradient + Fraunces serif. */
.profile-hero-poster {
  aspect-ratio: 3 / 4;
  background: linear-gradient(135deg, var(--color-accent-soft, #9196F5) 0%, var(--color-accent-deep, #4B4FD6) 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #fff;
  border-radius: var(--radius);
  overflow: hidden;
}
.profile-hero-poster-name {
  font-family: "Fraunces", Georgia, serif;
  font-size: 56px;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.profile-hero-poster-age {
  font-family: "Inter", sans-serif;
  font-size: 18px;
  opacity: 0.85;
  margin-top: 4px;
}

/* Featured first-prompt treatment for Layout A (character-forward).
   Oversized serif quote feel. */
.profile-prompt--featured {
  padding: 20px 20px 22px;
  background: var(--color-surface);
  border-left: 3px solid var(--color-accent, #6366F1);
  border-radius: var(--radius);
  margin: 18px 0;
}
.profile-prompt--featured .profile-prompt-q {
  font-size: 12px;
  color: var(--text-secondary);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.profile-prompt--featured .profile-prompt-a {
  font-family: "Fraunces", Georgia, serif;
  font-size: 22px;
  line-height: 1.35;
  color: var(--text);
}

/* Audio prompt card — differentiator; featured treatment. */
.profile-audio-prompt {
  background: linear-gradient(180deg, var(--color-accent-mist, #EEEEFE) 0%, transparent 100%);
  border: 1px solid var(--color-accent-mist, #EEEEFE);
  border-radius: var(--radius);
  padding: 16px;
  margin: 14px 0;
}
.profile-audio-prompt-q {
  font-size: 12px;
  color: var(--text-secondary);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.profile-audio-prompt-a {
  font-family: "Fraunces", Georgia, serif;
  font-size: 16px;
  color: var(--text);
  margin-bottom: 10px;
}
.profile-audio-prompt-play {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: none;
  background: var(--color-accent, #6366F1);
  color: #fff;
  border-radius: 100px;
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  font-family: "Inter", sans-serif;
}
.profile-audio-prompt-play:hover { background: var(--color-accent-deep, #4B4FD6); }
.profile-audio-prompt-play.playing { background: var(--color-accent-deep, #4B4FD6); }
.profile-audio-prompt-play .play-icon { font-size: 10px; }

/* Compatibility insight — soft callout for matched-both-quiz-done users. */
.profile-compat-insight {
  background: var(--color-surface);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin: 14px 0;
  border-left: 3px solid var(--color-accent-deep, #4B4FD6);
}
.profile-compat-insight .compat-band-pill {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  color: var(--color-accent-deep, #4B4FD6);
  background: var(--color-accent-mist, #EEEEFE);
  padding: 3px 10px;
  border-radius: 100px;
  margin-bottom: 8px;
  letter-spacing: 0.03em;
}
.profile-compat-insight .compat-insight-headline {
  font-family: "Fraunces", Georgia, serif;
  font-size: 17px;
  color: var(--text);
  line-height: 1.4;
  margin-bottom: 4px;
}
.profile-compat-insight .compat-insight-why {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.5;
}

/* Hinge-style interleaved photo blocks — full-width images sandwiched between
   prompts + sections. 4:5 portrait crop by default. Tap to open lightbox. */
.profile-photo-block {
  position: relative;
  width: 100%;
  margin: 18px 0;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--color-surface);
}
.profile-photo-block img {
  width: 100%;
  display: block;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  cursor: pointer;
  transition: transform 0.25s var(--ease);
}
.profile-photo-block img:hover { transform: scale(1.01); }

/* Prompt sections between photos */
.profile-prompt-section {
  padding: 28px 20px 28px 28px;
  position: relative;
}
/* Remove hard dividers between adjacent prompts — the alt background
   stripe provides enough separation without the black line. */
.profile-prompt-section + .profile-prompt-section {
  margin-top: 0;
}
/* Subtle left accent ribbon — signals "editorial moment" without an icon */
.profile-prompt-section::before {
  content: "";
  position: absolute;
  left: 14px;
  top: 32px;
  width: 2px;
  height: calc(100% - 64px);
  background: linear-gradient(180deg, var(--accent) 0%, transparent 100%);
  opacity: 0.55;
  border-radius: 2px;
}
.profile-prompt-section .prompt-question {
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
  font-style: italic;
  margin-bottom: 6px;
  line-height: 1.4;
}
.profile-prompt-section .prompt-answer {
  font-size: 16px;
  font-weight: 500;
  color: var(--text);
  line-height: 1.5;
}
.profile-prompt-section.prompt-alt {
  background: rgba(90, 94, 184, 0.035);
}

/* Details section at bottom */
.profile-details-section {
  padding: 16px 20px 20px;
}
.profile-details-section .section-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 10px;
  margin-top: 22px;
}
.profile-details-section .section-label:first-child {
  margin-top: 0;
}
.profile-details-section .detail-chips {
  margin-top: 8px;
}
.profile-details-section .discover-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}

/* Bio in scrollable profile */
.profile-bio-section {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  font-size: 15px;
  color: var(--text-secondary);
  line-height: 1.55;
}

/* Compatibility insight card */
.compat-insight {
  padding: 16px 20px;
  background: rgba(90, 94, 184, 0.04);
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 12px;
}
.compat-score-ring {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 3px solid var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 700;
  color: var(--accent);
  flex-shrink: 0;
}
.compat-insight-text {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.4;
}
.compat-insight-text strong {
  color: var(--text);
  font-weight: 600;
}

/* Qualitative compat bands — replace raw % which miscalibrates filtering */
.compat-band-chip, .compat-band-pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.compat-band-chip { backdrop-filter: blur(4px); }

/* Monochrome compatibility bands — signal strength by fill darkness, not hue.
   Kept dashed border for the "no quiz" state so it still reads as unfilled. */
.compat-band-ex      { background: var(--color-ink); color: var(--color-bg); border: 1px solid var(--color-ink); }
.compat-band-strong  { background: var(--color-ink-soft); color: var(--color-bg); border: 1px solid var(--color-ink-soft); }
.compat-band-worth   { background: var(--surface); color: var(--color-ink); border: 1px solid var(--border-strong); }
.compat-band-diff    { background: var(--surface); color: var(--color-ink-soft); border: 1px solid var(--border); }
.compat-band-none    { background: var(--surface); color: var(--color-ink-soft); border: 1px dashed var(--border-strong); }

/* On the Discover hero chip, override to be white-on-dark so it pops over photos */
.profile-photo-section.hero .compat-band-chip {
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.25);
}
/* Pinned variant — monochrome surface, subtle ink border. */
.compat-insight.compat-insight-pinned {
  margin: 12px 16px 8px;
  border-top: 0;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--border);
}

/* ============================================================
   OPENER BOTTOM SHEET
   ============================================================ */

.opener-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  z-index: 50;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  align-items: flex-end;
  justify-content: center;
}
.opener-overlay.active {
  display: flex;
}
.opener-sheet {
  background: var(--surface);
  border-radius: 20px 20px 0 0;
  width: 100%;
  max-width: 480px;
  padding: 20px 16px 28px;
  max-height: 70vh;
  transform: translateY(100%);
  transition: transform 0.3s var(--ease);
}
.opener-overlay.active .opener-sheet {
  transform: translateY(0);
}
.opener-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.opener-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
}
.opener-option {
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 10px;
  cursor: pointer;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text);
  transition: all var(--t-fast);
}
.opener-option:hover {
  border-color: var(--accent);
  background: var(--accent-dim);
}
.opener-option:active {
  transform: scale(0.98);
}
.opener-skip {
  width: 100%;
  padding: 12px;
  background: none;
  border: none;
  color: var(--text-secondary);
  font-size: 14px;
  cursor: pointer;
  margin-top: 4px;
  font-family: inherit;
}
.opener-skip:hover {
  color: var(--text);
}

/* ============================================================
   TOAST NOTIFICATION
   ============================================================ */

.toast {
  position: fixed;
  bottom: 100px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--text);
  color: var(--bg);
  padding: 10px 20px;
  border-radius: var(--radius-pill);
  font-size: 13px;
  font-weight: 600;
  z-index: 90;
  opacity: 0;
  transition: all var(--t-normal);
  pointer-events: none;
  box-shadow: var(--shadow-lg);
}
.toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ============================================================
   SKELETON LOADING
   ============================================================ */

.skeleton {
  background: linear-gradient(90deg, var(--bg-secondary) 25%, var(--bg) 50%, var(--bg-secondary) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s ease-in-out infinite;
  border-radius: var(--radius-sm);
}
.skeleton-circle { border-radius: 50%; }
.skeleton-text { height: 14px; margin-bottom: 8px; }
.skeleton-text.short { width: 60%; }
.skeleton-photo { width: 100%; aspect-ratio: 3/4; }

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

/* Skeleton card for discover */
.skeleton-discover {
  position: absolute;
  inset: 0;
  background: var(--surface);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.skeleton-discover .skeleton-photo { flex: 1; }
.skeleton-discover .skeleton-info { padding: 16px; }

/* ============================================================
   ADMIN
   ============================================================ */

.admin-body {
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  padding: 20px;
}

/* Legacy admin-login rules moved to a single block below the admin restyle */

.admin-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}
.admin-header h1 { font-size: 24px; font-weight: 700; }

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  margin-bottom: 24px;
}
.stat-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 16px;
  text-align: center;
  box-shadow: var(--shadow-sm);
}
.stat-card .stat-value { font-size: 28px; font-weight: 700; color: var(--accent); }
.stat-card .stat-label { font-size: 12px; color: var(--text-secondary); margin-top: 4px; }

.admin-tabs {
  display: flex;
  margin-bottom: 20px;
  overflow-x: auto;
  border-bottom: 1px solid var(--border);
}
.admin-tab {
  padding: 10px 16px;
  border: none;
  background: none;
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: all var(--t-fast);
}
.admin-tab:hover { color: var(--text); }
.admin-tab.active { color: var(--accent); border-bottom-color: var(--accent); }
/* System-group separator — visual break between day-to-day admin tabs
   (Users, Reports, etc.) and admin-owner areas (Admins, AI, Errors). */
.admin-tab-sep {
  display: inline-block;
  width: 1px;
  height: 22px;
  margin: 0 8px;
  background: var(--border, rgba(0,0,0,0.1));
  vertical-align: middle;
}
.admin-tab.sys { color: var(--text-dim); font-style: italic; }
.admin-tab.sys.active { font-style: normal; }
/* Error breadcrumb chip (section.function) */
.err-breadcrumb {
  display: inline-block;
  padding: 2px 8px;
  margin-left: 6px;
  border-radius: 4px;
  background: var(--bg-secondary, #f4f4f6);
  color: var(--text-secondary);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
}

.admin-panel { display: none; }
.admin-panel.active { display: block; animation: fadeIn 0.2s var(--ease); }

.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  table-layout: auto;
}
.admin-table th {
  text-align: left;
  padding: 8px 10px;
  color: var(--text-secondary);
  font-weight: 600;
  border-bottom: 1px solid var(--border);
}
.admin-table td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
  word-wrap: break-word;
  overflow-wrap: anywhere;
}
.admin-table tr:hover { background: var(--surface-hover); }

.admin-btn {
  padding: 4px 10px;
  border-radius: var(--radius-xs);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-secondary);
  font-size: 12px;
  cursor: pointer;
  margin-right: 4px;
  transition: all var(--t-fast);
}
.admin-btn:hover { border-color: var(--accent); color: var(--accent); }
.admin-btn.danger { border-color: var(--danger); color: var(--danger); }
.admin-btn.danger:hover { background: var(--danger-light); }

.admin-select {
  padding: 8px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 14px;
  margin-bottom: 12px;
}

.chat-group {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 12px;
  overflow: hidden;
}
.chat-group-header {
  padding: 12px 16px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  font-weight: 600;
  font-size: 14px;
  transition: background var(--t-fast);
}
.chat-group-header:hover { background: var(--surface-hover); }
.chat-group-messages { padding: 8px 16px 12px; display: none; }
.chat-group-messages.open { display: block; }
.chat-group-msg { padding: 4px 0; font-size: 13px; line-height: 1.5; }
.chat-group-msg .sender { color: var(--accent); font-weight: 600; }
.chat-group-msg .time { color: var(--text-dim); font-size: 11px; margin-left: 8px; }

/* ============================================================
   MATCH TOAST
   ============================================================ */

.match-toast {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 80;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
}
.match-toast.active { display: flex; }
.match-toast-content {
  text-align: center;
  animation: scaleIn 0.4s var(--ease-spring);
  background: var(--surface);
  border-radius: 20px;
  padding: 40px 32px;
  box-shadow: var(--shadow-lg);
  max-width: 320px;
}
.match-toast-content .toast-emoji { font-size: 56px; }
.match-toast-content h2 { font-size: 24px; font-weight: 800; margin-top: 12px; background: var(--gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.match-toast-content p { color: var(--text-secondary); margin-top: 8px; font-size: 14px; line-height: 1.5; }
.match-toast-content button {
  margin-top: 20px;
  padding: 12px 32px;
  background: var(--gradient);
  border: none;
  border-radius: var(--radius-pill);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: all var(--t-fast);
}
.match-toast-content button:hover { box-shadow: 0 4px 16px rgba(90, 94, 184, 0.3); }
.match-toast-content button:active { transform: scale(0.96); }

/* ===== Match celebration (redesigned) ===== */
.match-celebration {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 90;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(6px);
  padding: 16px;
}
.match-celebration.active { display: flex; }

/* Admin warning modal — softer than match celebration, slightly stern */
.warning-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  z-index: 95;
  align-items: center;
  justify-content: center;
  padding: 16px;
  backdrop-filter: blur(6px);
}
.warning-overlay.active { display: flex; }
.warning-card {
  width: 100%;
  max-width: 380px;
  background: var(--surface);
  border-radius: 24px;
  padding: 30px 26px 24px;
  text-align: center;
  box-shadow: 0 24px 48px rgba(0,0,0,0.28);
  border: 1px solid var(--border);
  border-top: 4px solid var(--danger);
}
.warning-card .warning-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 14px;
  border-radius: 50%;
  background: var(--danger-light);
  color: var(--danger);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  font-weight: 700;
}
.warning-card .warning-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 6px;
}
.warning-card .warning-title {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 22px;
  font-weight: 700;
  margin: 0 0 14px;
  color: var(--text);
}
.warning-card .warning-reason {
  font-size: 14.5px;
  color: var(--text);
  line-height: 1.5;
  margin: 0 0 12px;
  padding: 12px 14px;
  background: var(--bg-secondary);
  border-left: 3px solid var(--danger);
  border-radius: 8px;
  text-align: left;
}
.warning-card .warning-body {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.55;
  margin: 0 0 22px;
}
.warning-card .warning-body a { color: var(--accent); text-decoration: underline; }
.warning-card .warning-ack {
  width: 100%;
  padding: 14px;
  border-radius: var(--radius);
  border: 0;
  background: var(--accent);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.01em;
  cursor: pointer;
}
.warning-card .warning-ack:hover { background: var(--accent-light); }

/* Speed-date first-time explainer */
.speed-explainer-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 94;
  align-items: center;
  justify-content: center;
  padding: 16px;
  backdrop-filter: blur(6px);
}
.speed-explainer-overlay.active { display: flex; }
.speed-explainer-card {
  width: 100%;
  max-width: 400px;
  background: var(--surface);
  border-radius: 24px;
  padding: 30px 26px 24px;
  text-align: left;
  border: 1px solid var(--border);
  border-top: 4px solid var(--accent);
  box-shadow: 0 24px 48px rgba(0,0,0,0.28);
}
.speed-explainer-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 6px;
}
.speed-explainer-title {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 22px;
  font-weight: 700;
  margin: 0 0 10px;
  color: var(--text);
}
.speed-explainer-sub {
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-secondary);
  margin: 0 0 16px;
}
.speed-explainer-steps {
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.speed-explainer-steps li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 13.5px;
  color: var(--text);
  line-height: 1.45;
}
.speed-explainer-steps .step-icon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--accent-dim);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}
.speed-explainer-steps li b { color: var(--text); font-weight: 600; }
.speed-explainer-cta {
  width: 100%;
  padding: 14px;
  border-radius: var(--radius);
  border: 0;
  background: var(--accent);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}
.speed-explainer-cta:hover { background: var(--accent-light); }
.match-celebration-card {
  position: relative;
  width: 100%;
  max-width: 360px;
  max-height: 92vh;
  overflow-y: auto;
  background:
    radial-gradient(ellipse at top, rgba(90, 94, 184, 0.12), transparent 60%),
    var(--surface);
  border-radius: 28px;
  padding: 32px 26px 24px;
  box-shadow:
    0 24px 60px rgba(0,0,0,0.25),
    0 0 0 1px rgba(90, 94, 184, 0.22) inset;
  text-align: center;
  animation: scaleIn 0.45s var(--ease-spring);
}
.match-celebration-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(circle at 20% 0%, rgba(90, 94, 184,0.08), transparent 40%),
              radial-gradient(circle at 80% 100%, rgba(90, 94, 184,0.06), transparent 40%);
}
.match-dismiss {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: none;
  background: rgba(0,0,0,0.06);
  color: var(--text-secondary);
  font-size: 14px;
  cursor: pointer;
}
.match-headline {
  position: relative;
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.5px;
  background: var(--gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 22px;
}
.match-headline::after {
  content: "";
  display: block;
  width: 32px;
  height: 2px;
  background: var(--gradient);
  border-radius: 2px;
  margin: 8px auto 0;
  opacity: 0.5;
}
.match-photos {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0;
  margin-bottom: 14px;
}
.match-photo {
  position: relative;
  width: 104px;
  height: 104px;
  border-radius: 50%;
  padding: 3px;
  background: var(--gradient);
  box-shadow: 0 8px 22px rgba(0,0,0,0.18);
}
.match-photo > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 50%;
  border: 3px solid var(--surface);
  background: #eee;
}
/* Slight overlap preserved but the heart no longer covers the faces */
.match-photo-me { transform: translateX(14px); z-index: 1; }
.match-photo-them { transform: translateX(-14px); z-index: 1; }
/* Match celebration centerpiece — the Vibe heart pulses at the bottom
   intersection of the two photos (crown position) so it never covers a face. */
.match-heart-bridge {
  position: absolute;
  left: 50%;
  bottom: -12px;
  transform: translateX(-50%);
  width: 44px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
  color: var(--accent);
  filter: drop-shadow(0 4px 10px rgba(90, 94, 184, 0.45));
  animation: heartPulse 1.4s ease-in-out infinite;
}
.match-heart-bridge svg,
.match-heart-bridge .match-brand-heart {
  width: 100%;
  height: 100%;
  display: block;
}
/* The brand-heart asset is the periwinkle indigo SVG (logo-mark.svg).
   Drop the `color` filter inheritance on the heart-bridge wrapper —
   the brand SVG paints its own gradient + fill, so currentColor isn't
   needed and would tint it incorrectly. */
.match-heart-bridge:has(.match-brand-heart) { color: transparent; }
@keyframes heartPulse {
  0%, 100% { transform: translateX(-50%) scale(1); }
  50%      { transform: translateX(-50%) scale(1.14); }
}
.match-compat-badge {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  margin-top: 10px;
  padding: 10px 22px;
  border-radius: var(--radius-pill);
  background: var(--gradient);
  color: #fff;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 0.3px;
  box-shadow: 0 6px 18px rgba(90, 94, 184, 0.4);
}
.match-partner-line {
  margin-top: 14px;
  font-size: 16px;
  color: var(--text);
  font-weight: 700;
  letter-spacing: -0.2px;
}
.match-section-title {
  text-align: center;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin: 22px 0 12px;
}
.match-shared-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}
.match-shared-chip {
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  background: rgba(90, 94, 184, 0.1);
  border: 1px solid rgba(90, 94, 184, 0.28);
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.2;
}
.match-shared-chip::before {
  content: "✦";
  color: var(--accent, #d4a054);
  margin-right: 6px;
  font-size: 11px;
}
.match-openers {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.match-opener-pill {
  text-align: left;
  background: rgba(90, 94, 184, 0.08);
  border: 1px solid rgba(90, 94, 184, 0.25);
  border-radius: 14px;
  padding: 10px 14px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--text);
  cursor: pointer;
  transition: all var(--t-fast);
}
.match-opener-pill:hover {
  background: rgba(90, 94, 184, 0.14);
  border-color: rgba(90, 94, 184, 0.45);
}
.match-opener-pill:active { transform: scale(0.98); }
.match-cta {
  margin-top: 24px;
  width: 100%;
  padding: 16px;
  background: var(--gradient);
  border: none;
  border-radius: var(--radius-pill);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.2px;
  cursor: pointer;
  box-shadow: 0 8px 22px rgba(90, 94, 184, 0.35);
  transition: all var(--t-fast);
}
.match-cta:hover { box-shadow: 0 10px 26px rgba(90, 94, 184, 0.45); transform: translateY(-1px); }
.match-cta:active { transform: scale(0.98); }
.match-skip {
  margin-top: 8px;
  width: 100%;
  padding: 10px;
  background: transparent;
  border: none;
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}
.match-skip:hover { color: var(--text); }

/* ============================================================
   ANIMATIONS
   ============================================================ */

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

@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.85); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes slideUpIn {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   SCROLLBAR
   ============================================================ */

::-webkit-scrollbar { width: 3px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
::-webkit-scrollbar-thumb:hover { background: var(--border-light); }

/* ============================================================
   THEME TOGGLE (Settings)
   ============================================================ */
.theme-toggle-row {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  cursor: default !important;
}
.theme-segment {
  display: inline-flex;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 3px;
  gap: 2px;
}
.theme-seg {
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  background: transparent;
  border: 0;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast);
}
.theme-seg.active {
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-sm);
}

/* ============================================================
   BRAND TYPOGRAPHY
   ============================================================ */
.discover-name,
.profile-main-name {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  letter-spacing: -0.015em;
}
.discover-name { font-size: 28px; }
.profile-main-name { letter-spacing: -0.02em; }

/* ============================================================
   TIER 2 DECISION-SIGNALS ROW
   Intent + kids stance (+ marital when !single) pulled out of the
   buried Tier 3 lifestyle chip section so they're visible at-a-glance
   immediately under the hero. These are the dealbreakers users scan
   in 2 seconds before deciding to read any further.
   ============================================================ */
.decision-signals {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 14px 18px 6px;
  background: var(--surface);
}
.decision-chip {
  flex: 1 1 140px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 12px;
  background: var(--color-accent-mist);
  border: 1px solid rgba(99, 102, 241, 0.18);
  min-height: 48px;
}
.decision-chip .decision-icon {
  font-size: 22px;
  line-height: 1;
  flex-shrink: 0;
}
.decision-chip .decision-body {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.decision-chip .decision-label {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-accent-deep);
  opacity: 0.8;
}
.decision-chip .decision-val {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ============================================================
   PROFILE STAT STRIP
   ============================================================ */
.profile-stat-strip {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 12px 18px 14px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
  scrollbar-width: none;
}
.profile-stat-strip::-webkit-scrollbar { display: none; }
.profile-stat {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  padding: 0 12px;
  border-right: 1px solid var(--border);
}
.profile-stat:first-child { padding-left: 0; }
.profile-stat:last-child { border-right: none; }
.profile-stat .stat-icon {
  font-size: 11px;
  color: var(--text-dim);
  font-weight: 700;
}
/* Monochrome stat — previously accent-colored on "Quiz done". Keep ink only. */
.profile-stat.accent { color: var(--color-ink); }
.profile-stat.accent .stat-icon { color: var(--color-ink); }

/* ============================================================
   SHARED TRAITS ("You both…")
   ============================================================ */
.shared-traits {
  padding: 16px 18px 18px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.shared-traits-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-muted);
  margin-bottom: 10px;
}
.shared-traits-label::before {
  content: "✦";
  font-size: 12px;
  color: var(--color-muted);
}
.shared-traits-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
/* Monochrome shared-trait pill — was accent-tinted, now neutral so the accent
   stays reserved for italic emphasis + score badges. */
.shared-trait-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 13px;
  background: var(--surface);
  color: var(--color-ink);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
}
.shared-trait-pill .shared-trait-cat {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-muted);
  opacity: 1;
}
.shared-trait-pill .shared-trait-cat::after {
  content: "·";
  margin-left: 6px;
  opacity: 0.5;
}
.shared-trait-pill .shared-trait-val { font-weight: 700; }

/* ============================================================
   PROMPT HEART-REACT
   ============================================================ */
.profile-prompt-section {
  position: relative;
  padding: 28px 64px 28px 28px;
}
.prompt-react-btn {
  position: absolute;
  bottom: 18px;
  right: 18px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0.7;
  transition: all var(--t-fast);
}
.prompt-react-btn:hover {
  transform: scale(1.08);
  border-color: var(--terracotta);
  background: var(--surface);
  opacity: 1;
}
.prompt-react-btn svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: var(--terracotta);
  stroke-width: 2;
  stroke-linejoin: round;
}
.prompt-react-btn.active { background: var(--terracotta); border-color: var(--terracotta); }
.prompt-react-btn.active svg { fill: #fff; stroke: #fff; }

/* Prompt question — small editorial eyebrow so the answer gets the weight */
.profile-prompt-section .prompt-question {
  font-family: var(--font-sans);
  font-style: normal;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  opacity: 0.85;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.profile-prompt-section .prompt-answer {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 19px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--text);
  letter-spacing: -0.005em;
}

/* ============================================================
   MATCH CELEBRATION refinements
   ============================================================ */
.match-eyebrow {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--accent);
  margin-bottom: 6px;
}
.match-headline {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.match-headline #match-headline-name {
  color: var(--accent);
  font-style: italic;
}
/* (Overrides consolidated into the primary .match-heart-bridge rule above.) */
/* Speed-date primer inside the You Matched card — sets expectations
   for what comes next so the celebration leads naturally into chat. */
.match-speed-primer {
  margin: 14px 4px 18px;
  padding: 12px 14px;
  background: rgba(90, 94, 184, 0.08); /* purple accent tint at 8% */
  border: 1px solid rgba(90, 94, 184, 0.18);
  border-radius: var(--radius);
  text-align: left;
}
.match-speed-primer-eyebrow {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 4px;
}
.match-speed-primer-body {
  font-size: 13px;
  line-height: 1.5;
  color: var(--text);
}
.match-speed-primer-body b { font-weight: 700; color: var(--text); }
.match-subcopy {
  text-align: center;
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.5;
  margin: 16px 8px 16px;
  font-style: italic;
  font-family: 'Fraunces', Georgia, serif;
}
.match-section-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-dim);
  margin-bottom: 8px;
  text-align: center;
}
.match-shared-chip {
  background: var(--accent-dim);
  color: var(--accent);
  font-weight: 600;
}

/* ============================================================
   OPENER SHEET
   ============================================================ */
.opener-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(4px);
  z-index: 1000;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-normal);
}
.opener-overlay.active {
  opacity: 1;
  pointer-events: auto;
}
.opener-sheet {
  width: 100%;
  max-width: 430px;
  background: var(--surface);
  border-radius: 24px 24px 0 0;
  padding: 24px 20px 20px;
  position: relative;
  box-sizing: border-box;
  max-height: 92dvh;
  overflow-y: auto;
  box-shadow: 0 -12px 40px rgba(0,0,0,0.18);
  transform: translateY(20px);
  transition: transform var(--t-normal);
}
.opener-overlay.active .opener-sheet { transform: translateY(0); }

/* Prompt-context quote block — appears above the opener textarea when the
   sheet is opened via the heart-react on a specific prompt. Visually styled
   as a "Replying to:" block so the user knows the note travels with the
   prompt context. Monochrome — ink text on sunken surface, thin left rule. */
.opener-prompt-quote {
  margin: 0 0 12px;
  padding: 12px 14px;
  background: var(--color-surface);
  border: 1px solid var(--border);
  border-left: 2px solid var(--color-ink-soft);
  border-radius: var(--radius-sm);
}
.opener-prompt-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin-bottom: 6px;
}
.opener-prompt-q {
  font-family: var(--font-serif);
  font-size: 13px;
  font-weight: 500;
  color: var(--color-ink-soft);
  margin-bottom: 4px;
  font-style: italic;
}
.opener-prompt-a {
  font-family: var(--font-serif);
  font-size: 15px;
  line-height: 1.45;
  color: var(--color-ink);
  font-optical-sizing: auto;
}

.opener-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--bg-secondary);
  border: 0;
  color: var(--text-secondary);
  font-size: 14px;
  cursor: pointer;
}
.opener-eyebrow {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 22px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.01em;
  margin-bottom: 6px;
}
.opener-eyebrow #opener-target-name {
  color: var(--accent);
  font-style: italic;
}
.opener-hint {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.45;
  margin-bottom: 16px;
}
.opener-textarea {
  width: 100%;
  min-height: 80px;
  padding: 14px;
  border-radius: var(--radius);
  border: 1.5px solid var(--border);
  background: var(--bg-secondary);
  color: var(--text);
  font-family: inherit;
  font-size: 15px;
  line-height: 1.45;
  resize: none;
  transition: border-color var(--t-fast);
}
.opener-textarea:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--surface);
}
.opener-counter {
  text-align: right;
  font-size: 11px;
  color: var(--text-dim);
  margin-top: 4px;
}
.opener-suggestions-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-dim);
  margin-top: 14px;
  margin-bottom: 8px;
}
.opener-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
  max-height: 180px;
  overflow-y: auto;
}
.opener-option {
  padding: 12px 14px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 14px;
  line-height: 1.4;
  color: var(--text);
  cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast);
}
.opener-option:hover {
  background: var(--accent-dim);
  border-color: var(--accent);
}
/* Stack vertically — the "Send" action deserves full width, the opt-out
   sits below as a centered text link. Keeps everything readable on 320px. */
.opener-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 6px;
}
.opener-skip {
  order: 2;
  align-self: center;
  padding: 10px 4px;
  background: none;
  border: none;
  color: var(--text-dim);
  font-weight: 500;
  font-size: 12.5px;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.opener-skip:hover { color: var(--text-secondary); }
.opener-send {
  order: 1;
  width: 100%;
  padding: 14px;
  border-radius: var(--radius);
  background: var(--accent);
  border: 0;
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  transition: background var(--t-fast), opacity var(--t-fast);
}
.opener-send:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.opener-send:not(:disabled):hover {
  background: var(--accent-light);
}

/* ============================================================
   TURN CHIPS — "Your turn" / "Awaiting reply"
   ============================================================ */
.turn-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.6;
}
.turn-chip.turn-yours {
  background: var(--accent);
  color: #fff;
}
.turn-chip.turn-yours::before {
  content: "●";
  font-size: 8px;
  animation: pulse-soft 1.8s infinite;
}
.turn-chip.turn-theirs {
  background: var(--bg-secondary);
  color: var(--text-secondary);
  border: 1px solid var(--border);
}
@keyframes pulse-soft {
  0%,100% { opacity: 1; }
  50% { opacity: 0.4; }
}
.connection-card.turn-yours { border-left: 3px solid var(--accent); }
.connection-summary .subtle { color: var(--text-dim); }

/* ============================================================
   DISCOVER — WEEKLY INSIGHT CARD
   ============================================================ */
.discover-insight {
  margin: 0 16px 10px;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  transition: opacity var(--t-fast);
}
.discover-insight .insight-body { flex: 1; min-width: 0; }
.discover-insight .insight-eyebrow {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--accent);
  margin-bottom: 4px;
}
.discover-insight .insight-headline {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
  letter-spacing: -0.005em;
}
.discover-insight .insight-sub {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 4px;
  line-height: 1.4;
}
.discover-insight .insight-dismiss {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--bg-secondary);
  border: 0;
  color: var(--text-dim);
  font-size: 12px;
  cursor: pointer;
  flex-shrink: 0;
}

/* ============================================================
   SPEED DATE HERO CARD
   ============================================================ */
.speed-hero {
  margin: 0 16px 14px;
  padding: 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform var(--t-fast), box-shadow var(--t-fast);
}
.speed-hero::before {
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 4px;
  background: var(--accent);
}
.speed-hero:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}
.speed-hero-photo {
  width: 56px; height: 56px; border-radius: 50%;
  overflow: hidden; flex-shrink: 0;
  background: var(--bg-secondary);
}
.speed-hero-photo img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.speed-hero-body { flex: 1; min-width: 0; }
.speed-hero-eyebrow {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--accent);
  margin-bottom: 2px;
}
.speed-hero-title {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
  letter-spacing: -0.005em;
}
.speed-hero-sub {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 3px;
}
.speed-hero-cta {
  flex-shrink: 0;
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: #fff;
  border: 0;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  transition: background var(--t-fast);
}
.speed-hero-cta:hover { background: var(--accent-light); }

/* ============================================================
   JOURNEY / CHAPTER CARD (Profile → Settings)
   ============================================================ */
.journey-card {
  margin: 12px 16px 18px;
  padding: 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.journey-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.journey-title {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 18px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.01em;
}
.journey-sub {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 2px;
}
.journey-ring {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background:
    conic-gradient(var(--accent) calc(var(--pct) * 1%), var(--bg-secondary) 0);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
}
.journey-ring::before {
  content: "";
  position: absolute;
  inset: 3px;
  background: var(--surface);
  border-radius: 50%;
}
.journey-ring span {
  position: relative;
  font-size: 11px;
  font-weight: 700;
  color: var(--text);
}
.journey-steps { display: flex; flex-direction: column; gap: 8px; }
.step {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: var(--bg-secondary);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast);
}
.step:not([data-journey-action]) { cursor: default; }
.step.done { opacity: 0.65; }
.step.active {
  background: var(--accent-dim);
  border-color: var(--accent);
}
.step:hover[data-journey-action] {
  background: var(--accent-dim);
}
.step-dot {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--surface);
  border: 1.5px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-secondary);
  flex-shrink: 0;
}
.step.done .step-dot {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.step.active .step-dot {
  border-color: var(--accent);
  color: var(--accent);
}
.step-body { flex: 1; min-width: 0; }
.step-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}
.step-sub {
  font-size: 11.5px;
  color: var(--text-secondary);
  margin-top: 2px;
  line-height: 1.35;
}
.step-status {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.step-cta {
  font-size: 12px;
  font-weight: 700;
  color: var(--accent);
}

/* ============================================================
   CONNECTIONS TABS (Matches / Likes you)
   ============================================================ */
.connections-tabs {
  display: flex;
  gap: 4px;
  padding: 0 16px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.conn-tab {
  padding: 10px 4px 12px;
  margin-right: 16px;
  background: transparent;
  border: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  position: relative;
  transition: color var(--t-fast);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.conn-tab:hover { color: var(--text); }
.conn-tab.active { color: var(--text); }
.conn-tab.active::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: var(--accent);
  border-radius: 2px;
}
.conn-tab-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 6px;
  border-radius: 100px;
  background: var(--accent);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
}

/* ============================================================
   LIKES YOU grid
   ============================================================ */
.likes-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  padding: 12px 16px 20px;
}
.like-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  cursor: pointer;
  transition: transform var(--t-fast), box-shadow var(--t-fast);
  display: flex;
  flex-direction: column;
}
.like-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.like-photo {
  position: relative;
  aspect-ratio: 4/5;
  background: var(--bg-secondary);
}
.like-photo img {
  width: 100%; height: 100%; object-fit: cover;
  display: block;
}
.like-note-badge {
  position: absolute;
  top: 8px; left: 8px;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  backdrop-filter: blur(8px);
}
.like-info {
  padding: 10px 12px 4px;
}
.like-name {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.01em;
}
.like-name .age { color: var(--text-secondary); font-weight: 400; }
.like-sub {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 2px;
}
.like-note-preview {
  padding: 0 12px 12px;
  font-size: 12px;
  color: var(--text-secondary);
  font-style: italic;
  line-height: 1.4;
  font-family: 'Fraunces', Georgia, serif;
}

/* ============================================================
   CHAT — REACTIONS + TYPING INDICATOR
   ============================================================ */
.chat-bubble-wrap {
  display: flex;
  flex-direction: column;
  margin: 4px 0;
  position: relative;
}
.chat-bubble-wrap.sent { align-items: flex-end; }
.chat-bubble-wrap.received { align-items: flex-start; }
.chat-bubble { position: relative; }
/* Hover target is the whole wrap so there's no gap while reaching the button */
.chat-bubble-wrap:hover .bubble-react-btn,
.chat-bubble-wrap:focus-within .bubble-react-btn {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(-50%) scale(1);
}
.bubble-react-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%) scale(0.8);
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--accent);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-fast), transform var(--t-fast), background var(--t-fast), border-color var(--t-fast);
  box-shadow: var(--shadow-sm);
  z-index: 5;
  /* Tight to the bubble — no cursor gap between bubble and button */
}
.bubble-react-btn:hover {
  background: var(--accent-dim);
  border-color: var(--accent);
}
/* Anchor on the INSIDE edge of each row so the button lives in the free
   gutter next to the bubble (chat column has at least 22% free) rather
   than hanging off the viewport edge on narrow screens. */
.chat-bubble-wrap.sent .bubble-react-btn { left: -36px; }
.chat-bubble-wrap.received .bubble-react-btn { right: -36px; }
/* Mobile: always visible at low opacity since there's no hover */
@media (hover: none) and (pointer: coarse) {
  .bubble-react-btn {
    opacity: 0.45;
    pointer-events: auto;
    transform: translateY(-50%) scale(0.85);
  }
  .bubble-react-btn:active {
    opacity: 1;
    background: var(--accent-dim);
    border-color: var(--accent);
  }
}

.msg-reactions {
  display: flex; gap: 4px; margin-top: 2px; padding: 0 4px;
}
.msg-react-badge {
  display: inline-flex;
  padding: 2px 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 100px;
  font-size: 12px;
  line-height: 1.4;
  box-shadow: var(--shadow-sm);
}

.reaction-picker {
  position: fixed;
  z-index: 9999;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 100px;
  padding: 4px;
  display: flex;
  gap: 2px;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  transform: scale(0.8);
  transition: opacity var(--t-fast), transform var(--t-fast);
}
.reaction-picker.active { opacity: 1; transform: scale(1); }
.react-emoji {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: transparent;
  border: 0;
  font-size: 18px;
  cursor: pointer;
  transition: transform var(--t-fast), background var(--t-fast);
}
.react-emoji:hover {
  transform: scale(1.3);
  background: var(--bg-secondary);
}

.chat-typing-indicator {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 20px;
  font-size: 12px;
  color: var(--text-secondary);
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}
.typing-dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--text-secondary);
  animation: typing-bounce 1.2s infinite;
}
.typing-dot:nth-child(2) { animation-delay: 0.15s; }
.typing-dot:nth-child(3) { animation-delay: 0.3s; }
.typing-text { margin-left: 4px; font-style: italic; }
@keyframes typing-bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
  30% { transform: translateY(-4px); opacity: 1; }
}

/* ============================================================
   SAFETY MENU + REPORT SHEET
   ============================================================ */
.match-safety-btn {
  margin-left: auto;
  width: 32px; height: 32px;
  background: transparent;
  border: 0;
  color: var(--text-secondary);
  font-size: 20px;
  cursor: pointer;
  border-radius: 50%;
}
.match-safety-btn:hover { background: var(--bg-secondary); color: var(--text); }
.safety-menu {
  position: fixed;
  top: 56px; right: 16px;
  z-index: 9999;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  min-width: 180px;
}
.safety-item {
  display: block;
  width: 100%;
  padding: 12px 16px;
  background: transparent;
  border: 0;
  text-align: left;
  font-size: 14px;
  color: var(--text);
  cursor: pointer;
}
.safety-item:hover { background: var(--bg-secondary); }
.safety-item[data-action="block"] { color: var(--danger); font-weight: 600; }
.safety-item[data-action="report"] { color: var(--danger); font-weight: 600; }
.safety-item[data-action="unmatch"] { color: var(--text); font-weight: 600; }
.safety-item.cancel { border-top: 1px solid var(--border); color: var(--text-secondary); }

/* Block-as-checkbox inside the Report sheet */
.report-block-opt {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 12px;
  background: var(--danger-light);
  border: 1px solid rgba(225, 56, 96, 0.18);
  border-radius: var(--radius-sm);
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 13px;
  line-height: 1.45;
}
.report-block-opt input[type="checkbox"] {
  margin-top: 2px;
  accent-color: var(--danger);
  flex-shrink: 0;
}
.report-block-opt small {
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.4;
  display: block;
  margin-top: 2px;
}

/* ============================================================
   UNDO PASS TOAST
   ============================================================ */
.undo-toast {
  position: fixed;
  left: 50%;
  bottom: 104px;
  transform: translate(-50%, 16px);
  width: min(360px, calc(100% - 32px));
  background: var(--text);
  color: var(--bg);
  border-radius: var(--radius);
  padding: 12px 8px 12px 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  z-index: 999;
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.3);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.34, 1.2, 0.64, 1);
  overflow: hidden;
}
.undo-toast.active {
  opacity: 1;
  transform: translate(-50%, 0);
  pointer-events: auto;
}
.undo-body { flex: 1; min-width: 0; }
.undo-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--bg);
}
.undo-btn {
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  background: transparent;
  border: 0;
  color: var(--accent-light);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  letter-spacing: 0.02em;
  transition: background var(--t-fast);
}
.undo-btn:hover { background: rgba(255, 255, 255, 0.08); }
.undo-progress {
  position: absolute;
  left: 0; bottom: 0;
  width: 100%;
  height: 3px;
  background: var(--accent);
  transform-origin: left;
  animation: undo-countdown 4.2s linear forwards;
}
@keyframes undo-countdown {
  from { transform: scaleX(1); }
  to { transform: scaleX(0); }
}

/* ============================================================
   BUTTON SPINNERS / LOADING STATES
   ============================================================ */
.btn-spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: spin 0.72s linear infinite;
  vertical-align: -2px;
  margin-right: 8px;
  opacity: 0.85;
}
.btn-loading-label { letter-spacing: 0.01em; }
@keyframes spin { to { transform: rotate(360deg); } }

button.is-loading,
.btn-primary.is-loading,
.report-submit.is-loading,
.opener-send.is-loading,
.prompt-audio-stop.is-loading {
  opacity: 0.85;
  cursor: wait;
}
button.is-loading .btn-spinner { border-color: currentColor transparent currentColor currentColor; }

/* Dim disabled interactive surfaces while loading */
.is-loading * { pointer-events: none; }

/* ============================================================
   SPEED DATING — Lavender Sand polish
   ============================================================ */
.speed-prompt-card {
  background: var(--accent-dim);
  border-left: 3px solid var(--accent);
  border: 1px solid rgba(90, 94, 184, 0.18);
  border-left-width: 3px;
}
.speed-prompt-card .round-label {
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--accent);
}
.speed-prompt-card .round-label::before {
  content: "✦ ";
  opacity: 0.7;
}
.speed-prompt-card .prompt-text {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.3;
  color: var(--text);
}

/* Progress dots — show round 1/2/3 */
.progress-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-bottom: 16px;
}
.progress-dots .dot {
  width: 22px;
  height: 4px;
  border-radius: 2px;
  background: var(--border-strong);
  transition: background var(--t-normal), width var(--t-normal);
}
.progress-dots .dot.active {
  background: var(--accent);
  width: 32px;
}
.progress-dots .dot.done {
  background: var(--accent);
  opacity: 0.55;
}

/* Media toggle — refined pill */
.media-toggle-btn {
  background: var(--surface);
  color: var(--text-secondary);
  border-color: var(--border);
}
.media-toggle-btn.active {
  background: var(--accent-dim);
  border-color: var(--accent);
  color: var(--accent);
}

/* Response cards — larger, framed */
.speed-response-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px;
  box-shadow: var(--shadow-sm);
}
.speed-response-card .response-header {
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}
.speed-response-card .response-name {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
}
.speed-response-card video {
  width: 100% !important;
  max-height: 260px !important;
  aspect-ratio: 16/10;
  object-fit: cover;
  background: #000;
  border-radius: var(--radius-sm);
}
.speed-response-card audio {
  width: 100%;
  height: 40px;
}
.seed-placeholder {
  padding: 24px 16px;
  text-align: center;
  font-size: 13px;
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  color: var(--text-secondary);
  background: var(--bg-secondary);
  border-radius: var(--radius-sm);
  border: 1px dashed var(--border);
  line-height: 1.5;
}

/* Next-round CTA */
.btn-next-round {
  width: 100%;
  padding: 14px;
  background: var(--accent);
  color: #fff;
  border: 0;
  border-radius: var(--radius);
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  transition: background var(--t-fast), transform var(--t-fast);
}
.btn-next-round:hover { background: var(--accent-light); }
.btn-next-round:active { transform: scale(0.98); }

/* ============================================================
   ADMIN DASHBOARD — Lavender Sand restyle
   ============================================================ */
body.admin-body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  min-height: 100vh;
  padding: 0;
  overflow: auto;
  height: auto;
}
.admin-body::before {
  content: "";
  position: fixed;
  inset: 0;
  background:
    radial-gradient(circle at 20% 0%, var(--accent-dim) 0%, transparent 50%),
    radial-gradient(circle at 85% 95%, rgba(232,168,124,0.08) 0%, transparent 55%);
  pointer-events: none;
  z-index: -1;
}

/* Login panel */
.admin-login {
  max-width: 420px;
  margin: min(10vh, 80px) auto;
  background: var(--surface);
  padding: 36px 32px 32px;
  border-radius: 20px;
  border: 1px solid var(--border);
  box-shadow:
    0 24px 60px rgba(20, 20, 40, 0.12),
    0 2px 8px rgba(20, 20, 40, 0.04);
}
@media (max-width: 480px) {
  .admin-login { margin: 32px 16px; padding: 28px 22px; }
}
.admin-login-hero { text-align: center; margin-bottom: 24px; }
.admin-login-mark {
  width: 44px; height: 44px;
  margin: 0 auto 12px;
  display: block;
  filter: drop-shadow(0 2px 8px rgba(90, 94, 184, 0.25));
  animation: brandPulse 4s ease-in-out infinite;
}
.admin-login-eyebrow {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--accent);
  margin-bottom: 4px;
}
.admin-login h1 {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 30px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text);
  margin: 0 0 6px;
  text-align: center;
  line-height: 1.1;
}
.admin-login-sub {
  font-size: 14px;
  color: var(--text-secondary);
  text-align: center;
  margin: 0;
}
.admin-login-form {
  margin-top: 4px;
}

/* Dashboard header */
.admin-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 28px 24px 20px;
}
.admin-brand {
  display: flex;
  align-items: center;
  gap: 12px;
}
.admin-brand-mark { flex-shrink: 0; }
.admin-header h1 {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text);
  line-height: 1;
}
.admin-subtitle {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--accent);
  margin-top: 4px;
}

/* Stats grid */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  padding: 0 24px 24px;
}
.stat-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px;
  box-shadow: var(--shadow-sm);
  transition: transform var(--t-fast), border-color var(--t-fast);
}
.stat-card:hover {
  transform: translateY(-1px);
  border-color: var(--accent);
}
.stat-value {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text);
  line-height: 1;
}
.stat-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-secondary);
  margin-top: 6px;
}

/* Tabs */
.admin-tabs {
  display: flex;
  gap: 4px;
  padding: 0 24px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
.admin-tab {
  padding: 11px 16px 13px;
  background: transparent;
  border: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  position: relative;
  transition: color var(--t-fast);
  font-family: inherit;
}
.admin-tab:hover { color: var(--text); }
.admin-tab.active { color: var(--accent); }
.admin-tab.active::after {
  content: "";
  position: absolute;
  left: 12px; right: 12px; bottom: -1px;
  height: 2px;
  background: var(--accent);
  border-radius: 2px;
}

/* Panels & tables */
.admin-panel { display: none; padding: 0 24px 40px; }
.admin-panel.active { display: block; }
.admin-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  font-size: 13px;
}
.admin-table th {
  background: var(--bg-secondary);
  padding: 10px 14px;
  text-align: left;
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border);
}
.admin-table td {
  padding: 10px 14px;
  color: var(--text);
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.admin-table tr:last-child td { border-bottom: 0; }
.admin-table tr:hover td { background: var(--surface-hover); }

.admin-select {
  padding: 10px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 14px;
  color: var(--text);
  font-family: inherit;
  margin-bottom: 16px;
}
.btn-small {
  padding: 8px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast);
}
.btn-small:hover {
  background: var(--accent-dim);
  border-color: var(--accent);
  color: var(--accent);
}

/* Review summary grid */
.review-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}
.review-summary .stat-card {
  padding: 14px 16px;
}
.review-summary .stat-value {
  font-size: 22px;
}
.admin-btn {
  padding: 5px 10px;
  margin-right: 2px;
  margin-bottom: 2px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast);
}
.admin-btn:hover {
  background: var(--accent-dim);
  border-color: var(--accent);
  color: var(--accent);
}
.admin-btn.danger {
  color: var(--danger);
  border-color: rgba(225, 56, 96, 0.25);
}
.admin-btn.danger:hover {
  background: var(--danger);
  color: #fff;
  border-color: var(--danger);
}
.status-badge {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 100px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.admin-toolbar {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.admin-search {
  flex: 1;
  min-width: 220px;
  padding: 9px 14px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 13px;
}
.admin-search:focus { outline: none; border-color: var(--accent); }
.admin-count {
  font-size: 11px;
  color: var(--text-secondary);
  font-weight: 600;
}
.admin-pagination {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: center;
  padding: 16px 0 8px;
}
.admin-pagination .admin-btn { padding: 8px 16px; }
.admin-pagination .admin-btn[disabled] { opacity: 0.4; cursor: not-allowed; }
.admin-page-info { font-size: 12px; color: var(--text-secondary); font-weight: 600; }
.admin-header-actions { display: flex; align-items: center; gap: 8px; }
.admin-export-dropdown { position: relative; }
.admin-export-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 180px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 6px;
  z-index: 100;
  display: none;
}
.admin-export-menu.open { display: block; }
.admin-export-menu a {
  display: block;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
}
.admin-export-menu a:hover { background: var(--accent-dim); color: var(--accent); }
/* Settings section divider (groups related items in the Settings list) */
.settings-section-divider {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
  padding: 18px 16px 8px;
}
/* Exit survey — "I found someone on here!" gets a celebratory treatment */
.report-reason.celebratory { border: 1px solid rgba(232, 168, 124, 0.35); background: rgba(232, 168, 124, 0.1); }
.report-reason.celebratory:has(input:checked) { background: var(--accent-dim); color: var(--accent); }

/* ============================================================
   CHAT — "You both" pinned shared context
   ============================================================ */
.chat-shared-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: var(--accent-dim);
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
  scrollbar-width: none;
  flex-shrink: 0;
}
.chat-shared-chip::-webkit-scrollbar { display: none; }
.chat-shared-label {
  font-size: 10px;
  font-weight: 700;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  flex-shrink: 0;
}
.chat-shared-pills {
  display: flex;
  gap: 5px;
  flex-wrap: nowrap;
}
.chat-shared-pill .chat-shared-pill-cat {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.chat-shared-pill .chat-shared-pill-cat::after {
  content: "·";
  margin-left: 4px;
  opacity: 0.5;
}
.chat-shared-pill .chat-shared-pill-val { font-weight: 700; }
.chat-shared-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  background: var(--surface);
  color: var(--text);
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  border: 1px solid var(--border);
}

/* ============================================================
   CHAT — mutual-agree prompt states (waiting / nudge)
   ============================================================ */
.chat-confirm-prompt.waiting {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  text-align: center;
  padding: 14px 16px;
  border-radius: var(--radius);
  margin: 12px 16px;
}
.waiting-dot {
  display: inline-block;
  width: 8px; height: 8px;
  background: var(--accent);
  border-radius: 50%;
  margin-right: 8px;
  vertical-align: middle;
  animation: pulse-soft 1.5s infinite;
}
.waiting-sub {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 6px;
}
.chat-confirm-prompt.nudge {
  background: var(--accent-dim);
  border: 1px solid rgba(90, 94, 184, 0.25);
  text-align: center;
  padding: 16px;
  border-radius: var(--radius);
  margin: 12px 16px;
}
.nudge-eyebrow {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent);
  margin-bottom: 8px;
}
.chat-advance-btn {
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  border: 0;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  margin: 4px 3px;
}
.chat-advance-btn.yes { background: var(--accent); color: #fff; }
.chat-advance-btn.yes:hover { background: var(--accent-light); }
.chat-advance-btn.no { background: var(--bg-secondary); color: var(--text-secondary); border: 1px solid var(--border); }

/* ============================================================
   MEETING PANEL — map picker, datetime, phone, calendar
   ============================================================ */
.meeting-panel {
  margin-top: 14px;
  padding: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.meeting-step {
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}
.meeting-step:last-of-type { border-bottom: 0; }
.meeting-step-title {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
  margin-bottom: 4px;
}
.meeting-step-sub {
  font-size: 12px;
  color: var(--text-secondary);
  margin-bottom: 10px;
  line-height: 1.4;
}
.meeting-search { display: flex; gap: 8px; margin-bottom: 8px; }
.meeting-search input {
  flex: 1;
  padding: 10px 12px;
  border: 1px solid var(--border);
  background: var(--bg-secondary);
  color: var(--text);
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: 14px;
}
.meeting-search input:focus { outline: none; border-color: var(--accent); background: var(--surface); }
.meeting-search-btn {
  padding: 10px 16px;
  border-radius: var(--radius-sm);
  background: var(--accent);
  color: #fff;
  border: 0;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
}
.meeting-search-btn:hover { background: var(--accent-light); }
.meeting-search-results {
  max-height: 180px;
  overflow-y: auto;
  border-radius: var(--radius-sm);
  margin-bottom: 8px;
}
.meet-search-loading, .meet-search-empty { padding: 10px; font-size: 12px; color: var(--text-secondary); }
.meet-search-row {
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  background: var(--bg-secondary);
  margin-bottom: 4px;
  border: 1px solid transparent;
  transition: border-color var(--t-fast), background var(--t-fast);
}
.meet-search-row:hover { border-color: var(--accent); background: var(--accent-dim); }
.meet-search-name { font-weight: 600; font-size: 13px; color: var(--text); }
.meet-search-addr { font-size: 11px; color: var(--text-secondary); margin-top: 2px; line-height: 1.3; }
.meeting-map {
  width: 100%;
  height: 240px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid var(--border);
  margin-bottom: 10px;
  z-index: 0;
}
.meeting-map .leaflet-control-attribution {
  font-size: 9px;
}
.meeting-selected { margin-top: 4px; }
.meeting-place {
  padding: 10px 12px;
  background: var(--accent-dim);
  border: 1px solid rgba(90, 94, 184,0.15);
  border-radius: var(--radius-sm);
}
.meeting-place-name { font-weight: 700; color: var(--text); font-size: 14px; }
.meeting-place-addr { font-size: 12px; color: var(--text-secondary); margin-top: 2px; line-height: 1.35; }
.meeting-place-empty {
  padding: 10px 12px;
  background: var(--bg-secondary);
  border-radius: var(--radius-sm);
  font-size: 12px;
  color: var(--text-dim);
  font-style: italic;
}
.meeting-consent {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 10px 0 0;
  font-size: 12px;
  color: var(--text-secondary);
  cursor: pointer;
  line-height: 1.4;
}
.meeting-consent input { margin-top: 2px; accent-color: var(--accent); }
.meeting-status-row { padding: 10px 0; text-align: center; }
.meeting-status {
  display: inline-block;
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 700;
}
.meeting-status.confirmed { background: var(--success-light); color: var(--success); }
.meeting-status.waiting { background: var(--accent-dim); color: var(--accent); }
.meeting-status.nudge { background: rgba(232, 168, 124, 0.16); color: #B87D2F; }
.meeting-actions { display: flex; gap: 8px; flex-wrap: wrap; padding-top: 4px; }

/* ============================================================
   FOLLOW-UP — pre-date "upcoming" state
   ============================================================ */
.followup-pre {
  text-align: center;
  padding: 16px 12px;
  background: var(--bg-secondary);
  border-radius: var(--radius-sm);
  border: 1px dashed var(--border);
}
.followup-pre-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--accent);
  margin-bottom: 4px;
}
.followup-pre-when {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 17px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.01em;
  margin-bottom: 6px;
}
.followup-pre-sub { font-size: 12px; color: var(--text-secondary); line-height: 1.4; }



.report-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(4px);
  z-index: 10000;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.report-sheet {
  width: 100%;
  max-width: 430px;
  background: var(--surface);
  border-radius: 24px 24px 0 0;
  padding: 22px 20px 18px;
}
.report-title {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 4px;
}
.report-hint {
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: 14px;
}
.report-reasons {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 14px;
}
.report-reason {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  cursor: pointer;
  font-size: 14px;
  transition: all var(--t-fast);
}
.report-reason:hover { background: var(--surface-hover); }
.report-reason input { accent-color: var(--accent); margin-top: 2px; flex-shrink: 0; }
.report-reason-body { display: flex; flex-direction: column; gap: 2px; line-height: 1.35; }
.report-reason-label { font-weight: 600; color: var(--text); }
.report-reason-sub { font-size: 12px; color: var(--text-secondary); }
.report-reason:has(input:checked) {
  background: var(--accent-dim);
  border-color: var(--accent);
}
.report-reason:has(input:checked) .report-reason-label { color: var(--accent); }
/* Severity gets a left-edge accent — calibrates the reporter's expectation */
.report-reason-critical { border-left: 3px solid var(--danger); }
.report-reason-high     { border-left: 3px solid #E8803B; }
.report-reason-med      { border-left: 3px solid var(--accent); }
.report-reason-low      { border-left: 3px solid var(--border-strong, var(--border)); }
.report-details {
  width: 100%;
  min-height: 60px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg-secondary);
  color: var(--text);
  font-family: inherit;
  font-size: 14px;
  resize: none;
  margin-bottom: 12px;
}
.report-actions { display: flex; gap: 10px; }
.report-cancel, .report-submit {
  flex: 1;
  padding: 12px;
  border-radius: var(--radius);
  border: 0;
  font-weight: 700;
  cursor: pointer;
}
.report-cancel {
  background: var(--bg-secondary);
  color: var(--text-secondary);
  border: 1px solid var(--border);
}
.report-submit {
  background: var(--danger);
  color: #fff;
}
.report-submit:disabled { opacity: 0.45; cursor: not-allowed; }

/* ============================================================
   NOTIFICATION BELL + PANEL
   ============================================================ */
.discover-header-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}
.notif-bell {
  position: relative;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color var(--t-fast), background var(--t-fast);
}
.notif-bell:hover { color: var(--accent); background: var(--accent-dim); }
.notif-badge {
  position: absolute;
  top: -4px; right: -4px;
  min-width: 18px; height: 18px;
  padding: 0 5px;
  box-sizing: border-box;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  line-height: 14px; /* 18px - 2*2px border */
  border: 2px solid var(--surface);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.notif-panel {
  position: absolute;
  top: 58px; right: 12px;
  width: min(360px, calc(100% - 24px));
  max-height: 70vh;
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  z-index: 500;
  animation: notif-pop 0.15s var(--ease-spring);
}
@keyframes notif-pop {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}
.notif-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
}
.notif-title {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: -0.01em;
}
.notif-close {
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--bg-secondary);
  border: 0;
  color: var(--text-secondary);
  font-size: 11px;
  cursor: pointer;
}
.notif-list { padding: 4px 0; }
.notif-empty { padding: 40px 20px; text-align: center; color: var(--text-secondary); font-size: 13px; }
.notif-empty .empty-icon { font-size: 22px; display: block; margin-bottom: 8px; color: var(--accent); }
.notif-item {
  display: flex;
  gap: 12px;
  padding: 10px 14px;
  cursor: pointer;
  transition: background var(--t-fast);
  border-bottom: 1px solid var(--border);
  align-items: center;
}
.notif-item:last-child { border-bottom: 0; }
.notif-item:hover { background: var(--bg-secondary); }
.notif-photo {
  width: 40px; height: 40px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--bg-secondary);
  flex-shrink: 0;
}
.notif-photo.placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  font-size: 18px;
}
.notif-body { flex: 1; min-width: 0; }
.notif-item-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
}
.notif-item-sub {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.notif-kind {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-dim);
  flex-shrink: 0;
  padding: 3px 7px;
  border-radius: var(--radius-pill);
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  white-space: nowrap;
}
/* Per-kind color — kind string is the raw value from the server.
   Spaces appear because the DOM text replaces _ with spaces. */
.notif-item:has(.notif-kind:-webkit-any(*)) .notif-kind { /* evergreen */ }
.notif-kind:is([class]) { /* placeholder for :has fallback */ }
/* Simpler approach — match on textContent via attribute selectors added client-side.
   We set data-kind on the item for reliable styling. */
.notif-item[data-kind="matched"] .notif-kind {
  background: var(--accent-dim);
  color: var(--accent);
  border-color: rgba(90, 94, 184, 0.35);
}
.notif-item[data-kind="liked_you"] .notif-kind {
  background: rgba(232, 168, 124, 0.16);
  color: var(--terracotta);
  border-color: rgba(232, 168, 124, 0.45);
}
.notif-item[data-kind="message"] .notif-kind {
  background: rgba(71, 179, 122, 0.12);
  color: var(--success);
  border-color: rgba(71, 179, 122, 0.35);
}
.notif-item[data-kind="speed_date"] .notif-kind {
  background: rgba(90, 94, 184, 0.14);
  color: var(--accent);
  border-color: rgba(90, 94, 184, 0.45);
}
/* Matches also get a subtle gradient accent strip on the left */
.notif-item[data-kind="matched"] {
  border-left: 3px solid var(--accent);
  background: linear-gradient(90deg, var(--accent-dim) 0%, transparent 18%);
}

/* ============================================================
   TOGGLE SWITCH (used in Notification Settings)
   ============================================================ */
.pref-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}
.pref-row:last-child { border-bottom: 0; }
.pref-meta { flex: 1; min-width: 0; }
.pref-label { font-size: 14px; font-weight: 600; color: var(--text); }
.pref-sub { font-size: 12px; color: var(--text-secondary); margin-top: 2px; line-height: 1.4; }
.switch {
  position: relative;
  display: inline-block;
  width: 44px; height: 24px;
  flex-shrink: 0;
}
.switch input { opacity: 0; width: 0; height: 0; }
.switch-slider {
  position: absolute;
  inset: 0;
  background: var(--border-strong);
  border-radius: 100px;
  transition: background var(--t-fast);
  cursor: pointer;
}
.switch-slider::before {
  content: "";
  position: absolute;
  left: 3px; top: 3px;
  width: 18px; height: 18px;
  background: #fff;
  border-radius: 50%;
  transition: transform var(--t-fast);
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.switch input:checked + .switch-slider {
  background: var(--accent);
}
.switch input:checked + .switch-slider::before {
  transform: translateX(20px);
}

/* ============================================================
   SAFETY CENTER blocks
   ============================================================ */
.safety-sheet { max-height: 85vh; overflow-y: auto; }
.safety-block {
  padding: 14px 16px;
  background: var(--bg-secondary);
  border-radius: var(--radius-sm);
  margin-bottom: 10px;
}
.safety-block-title {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 4px;
  letter-spacing: -0.01em;
}
.safety-block-body { font-size: 13px; color: var(--text-secondary); line-height: 1.45; }

/* ============================================================
   FIRST-MATCH TOUR
   ============================================================ */
.tour-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.65);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10001;
  opacity: 0;
  transition: opacity var(--t-normal);
}
.tour-backdrop.active { opacity: 1; }
.tour-card {
  width: min(380px, calc(100% - 32px));
  background: var(--surface);
  border-radius: 20px;
  padding: 24px;
  box-shadow: var(--shadow-lg);
  transform: scale(0.95);
  transition: transform var(--t-normal);
}
.tour-backdrop.active .tour-card { transform: scale(1); }
.tour-eyebrow {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--accent);
  margin-bottom: 6px;
}
.tour-title {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text);
  margin-bottom: 8px;
  line-height: 1.15;
}
.tour-body {
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: 16px;
}
.tour-steps { display: flex; flex-direction: column; gap: 12px; margin-bottom: 20px; }
.tour-step {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 13px;
  color: var(--text);
  line-height: 1.45;
}
.tour-num {
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.tour-cta {
  width: 100%;
  padding: 14px;
  background: var(--accent);
  color: #fff;
  border: 0;
  border-radius: var(--radius);
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  transition: background var(--t-fast);
}
.tour-cta:hover { background: var(--accent-light); }

/* ============================================================
   STANDOUTS STRIP (weekly curated top-3)
   ============================================================ */
.standouts-strip {
  margin: 0 0 12px;
  padding: 14px 16px 16px;
  background: linear-gradient(180deg, var(--accent-dim) 0%, transparent 100%);
  border-bottom: 1px solid var(--border);
}
.standouts-head { margin-bottom: 12px; }
.standouts-title {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 20px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.02em;
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.standouts-subtitle {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 700;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.standouts-caption {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 2px;
}
.standouts-scroller {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 4px;
  margin: 0 -16px;
  padding-left: 16px;
  padding-right: 16px;
}
.standouts-scroller::-webkit-scrollbar { display: none; }
.standout-card {
  flex-shrink: 0;
  width: 132px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  cursor: pointer;
  transition: transform var(--t-fast), box-shadow var(--t-fast);
  display: flex;
  flex-direction: column;
}
.standout-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.standout-card:active { transform: scale(0.97); }
.standout-photo {
  position: relative;
  aspect-ratio: 4/5;
  background: var(--bg-secondary);
  overflow: hidden;
}
.standout-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.standout-score {
  position: absolute;
  top: 8px;
  right: 8px;
  padding: 3px 8px;
  border-radius: 100px;
  background: var(--accent);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}
.standout-name {
  padding: 8px 10px 0;
  font-family: 'Fraunces', Georgia, serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.01em;
}
.standout-name span { color: var(--text-secondary); font-weight: 400; }
.standout-why {
  padding: 3px 10px 10px;
  font-size: 11px;
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ============================================================
   WELCOME SPLASH
   ============================================================ */
#screen-welcome .welcome-stage {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 64px 24px 28px;
  background: radial-gradient(circle at 30% 10%, var(--accent-dim) 0%, transparent 60%),
              radial-gradient(circle at 85% 90%, rgba(232, 168, 124, 0.14) 0%, transparent 55%),
              var(--bg);
}
.welcome-slides {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.welcome-slide {
  display: none;
  animation: slide-in 0.4s var(--ease);
}
.welcome-slide.active { display: block; }
@keyframes slide-in {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
.welcome-art {
  width: 160px;
  height: 160px;
  margin: 0 auto 36px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.welcome-art svg { width: 100%; height: 100%; }
.welcome-eyebrow {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--accent);
  margin-bottom: 10px;
  text-align: center;
}
.welcome-title {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 34px;
  font-weight: 600;
  letter-spacing: -0.025em;
  color: var(--text);
  line-height: 1.1;
  text-align: center;
  margin-bottom: 14px;
}
.welcome-body {
  font-size: 15px;
  line-height: 1.55;
  color: var(--text-secondary);
  text-align: center;
  max-width: 320px;
  margin: 0 auto;
}
.welcome-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-bottom: 20px;
}
.welcome-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--border-strong);
  cursor: pointer;
  transition: width var(--t-normal), background var(--t-normal);
}
.welcome-dot.active {
  width: 20px;
  background: var(--accent);
  border-radius: 3px;
}
.welcome-actions {
  display: flex;
  gap: 10px;
}
.welcome-skip {
  padding: 14px 24px;
  background: transparent;
  color: var(--text-secondary);
  border: 0;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  border-radius: var(--radius);
}
.welcome-skip:hover { color: var(--text); background: var(--bg-secondary); }
.welcome-next {
  flex: 1;
  padding: 14px;
  background: var(--accent);
  color: #fff;
  border: 0;
  border-radius: var(--radius);
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  transition: background var(--t-fast), transform var(--t-fast);
}
.welcome-next:hover { background: var(--accent-light); }
.welcome-next:active { transform: scale(0.98); }

/* ============================================================
   MOTION POLISH — global press states & screen transitions
   ============================================================ */
.screen {
  transition: opacity var(--t-normal), transform var(--t-normal);
}
.btn-primary:active,
.btn-next:active,
.match-cta:active,
.welcome-next:active,
.opener-send:active,
.tour-cta:active,
.speed-hero-cta:active {
  transform: scale(0.97);
}
.settings-item:active,
.notif-item:active,
.like-card:active,
.connection-card:active,
.standout-card:active {
  transform: scale(0.99);
}
.action-btn, .btn-primary, .like-card, .standout-card, .notif-bell, .connection-card {
  will-change: transform;
}

/* ============================================================
   PROFILE SCREEN HERO — Lavender Sand polish
   ============================================================ */
#screen-profile .scroll-body {
  background:
    radial-gradient(circle at 50% 0%, var(--accent-dim) 0%, transparent 55%),
    var(--bg);
}
.profile-hero {
  padding: 36px 16px 18px;
  position: relative;
}
.profile-hero .profile-main-photo {
  width: 128px;
  height: 128px;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid var(--surface);
  box-shadow:
    0 0 0 2px var(--accent),
    0 12px 36px rgba(90, 94, 184, 0.22);
  transition: box-shadow var(--t-slow), transform var(--t-slow);
  margin-bottom: 16px;
}
/* Celebratory aura when profile is complete */
#screen-profile.is-polished .profile-hero .profile-main-photo {
  box-shadow:
    0 0 0 2px var(--accent),
    0 0 0 10px var(--accent-dim),
    0 16px 40px rgba(90, 94, 184, 0.28);
  animation: polished-aura 3.8s ease-in-out infinite;
}
@keyframes polished-aura {
  0%, 100% {
    box-shadow:
      0 0 0 2px var(--accent),
      0 0 0 10px var(--accent-dim),
      0 16px 40px rgba(90, 94, 184, 0.24);
  }
  50% {
    box-shadow:
      0 0 0 2px var(--accent),
      0 0 0 14px var(--accent-glow),
      0 20px 48px rgba(90, 94, 184, 0.35);
  }
}
.profile-hero .profile-main-name {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 30px;
  font-weight: 600;
  letter-spacing: -0.025em;
  color: var(--text);
  line-height: 1.1;
  margin-bottom: 4px;
}
.profile-hero .profile-main-meta {
  font-size: 13px;
  color: var(--text-secondary);
  margin-top: 4px;
  line-height: 1.4;
}
.profile-hero .completeness {
  margin-top: 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 6px 14px;
  font-weight: 600;
  color: var(--text);
  box-shadow: var(--shadow-sm);
}
.profile-hero .completeness-bar-fill {
  background: var(--accent);
}
.profile-hero .hero-chips { gap: 6px; margin-top: 16px; }
.profile-hero .hero-chip {
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
}
.profile-hero .hero-chip:hover {
  background: var(--accent-dim);
  border-color: var(--accent);
  color: var(--accent);
}
.profile-hero .hero-chip:active { transform: scale(0.96); }

/* ============================================================
   PROFILE STRENGTH CARD
   ============================================================ */
.profile-strength {
  margin: 14px 16px 18px;
  padding: 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.ps-top {
  display: flex;
  align-items: center;
  gap: 16px;
}
.ps-ring {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background:
    conic-gradient(var(--accent) calc(var(--pct) * 1%), var(--bg-secondary) 0);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  flex-shrink: 0;
  transition: background var(--t-slow);
}
.ps-ring::before {
  content: "";
  position: absolute;
  inset: 5px;
  background: var(--surface);
  border-radius: 50%;
}
.ps-ring span {
  position: relative;
  font-family: 'Fraunces', Georgia, serif;
  font-size: 18px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.01em;
}
.ps-eyebrow {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--accent);
  margin-bottom: 2px;
}
.ps-label {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 20px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.02em;
  line-height: 1.15;
}
.ps-score-sub {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 3px;
  line-height: 1.4;
}
.ps-tips {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
.ps-tip {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: var(--bg-secondary);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
}
.ps-tip:hover {
  background: var(--accent-dim);
  border-color: var(--accent);
}
.ps-tip:active { transform: scale(0.99); }
.ps-tip-num {
  width: 36px;
  height: 24px;
  border-radius: 100px;
  background: var(--accent);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  letter-spacing: -0.01em;
}
.ps-tip-body { flex: 1; min-width: 0; }
.ps-tip-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}
.ps-tip-sub {
  font-size: 11.5px;
  color: var(--text-secondary);
  margin-top: 2px;
  line-height: 1.35;
}
.ps-tip-go {
  color: var(--accent);
  font-weight: 700;
  font-size: 16px;
  flex-shrink: 0;
}

/* Completeness chip becomes celebratory at 100% */
.profile-hero .completeness.is-polished {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.profile-hero .completeness.is-polished .completeness-bar { display: none; }

/* ============================================================
   VOICE PROMPTS
   ============================================================ */
/* Record / remove controls inside the Prompt Editor */
.prompt-audio-row {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--bg-secondary);
  border: 1px dashed var(--border-light);
  border-radius: var(--radius-sm);
}
.prompt-audio-rec,
.prompt-audio-remove,
.prompt-audio-stop {
  padding: 7px 14px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast);
}
.prompt-audio-rec:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-dim);
}
.prompt-audio-remove {
  color: var(--danger);
  border-color: var(--danger-light);
}
.prompt-audio-stop {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
  margin-left: auto;
}
.prompt-audio-hint {
  font-size: 11px;
  color: var(--text-dim);
}
.prompt-audio-player {
  flex: 1;
  min-width: 180px;
  height: 32px;
}
.prompt-audio-recording {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  font-size: 13px;
  color: var(--text);
}
.prompt-rec-dot {
  width: 10px; height: 10px;
  background: var(--danger);
  border-radius: 50%;
  animation: rec-pulse 1s ease-in-out infinite;
}
@keyframes rec-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }
.prompt-rec-timer { font-variant-numeric: tabular-nums; font-weight: 700; min-width: 48px; }
.prompt-rec-hint { flex: 1; color: var(--text-secondary); font-size: 12px; }
.prompt-audio-uploading {
  width: 100%;
  text-align: center;
  padding: 8px 0;
  font-size: 12px;
  color: var(--text-secondary);
  font-style: italic;
}

/* Play badge on Discover prompt cards */
.prompt-voice-play {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: 8px;
  padding: 3px 10px 3px 8px;
  border-radius: var(--radius-pill);
  background: var(--accent-dim);
  color: var(--accent);
  border: 1px solid transparent;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
  vertical-align: middle;
}
.prompt-voice-play:hover {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.prompt-voice-play:active { transform: scale(0.96); }
.prompt-voice-play.playing {
  background: var(--accent);
  color: #fff;
  animation: voice-playing 1.3s ease-in-out infinite;
}
@keyframes voice-playing {
  0%, 100% { box-shadow: 0 0 0 0 var(--accent-glow); }
  50% { box-shadow: 0 0 0 8px rgba(90, 94, 184,0); }
}

/* Inline audio player on Profile's own prompt cards */
.prompt-inline-audio {
  display: block;
  width: 100%;
  height: 32px;
  margin-top: 10px;
}

/* ============================================================
   DISCOVER MOTION POLISH
   ============================================================ */
.discover-area {
  transition: transform 0.28s cubic-bezier(0.34, 1.2, 0.64, 1), opacity 0.24s ease;
  will-change: transform, opacity;
}
.discover-area.is-transitioning { pointer-events: none; }
.profile-photo-section.hero {
  overflow: hidden;
}
.profile-photo-section.hero img {
  transition: transform 0.1s linear;
  will-change: transform;
}

/* Like / Pass stamp animation */
.like-stamp {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 20;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.4);
  transition: transform 0.42s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;
  backdrop-filter: blur(4px);
}
.like-stamp svg {
  width: 56px;
  height: 56px;
}
.like-stamp.stamp-like {
  background: rgba(90, 94, 184, 0.92);
  color: #fff;
  box-shadow: 0 18px 50px rgba(90, 94, 184, 0.45);
}
.like-stamp.stamp-pass {
  background: rgba(26, 23, 20, 0.72);
  color: #fff;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.3);
}
.like-stamp.active {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1.05);
}

/* ============================================================
   CALENDAR HAND-OFF (Plan Date)
   ============================================================ */
.calendar-row {
  margin-top: 14px;
  padding: 14px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.calendar-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--accent);
  margin-bottom: 8px;
}
.calendar-when {
  width: 100%;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-family: inherit;
  font-size: 13px;
  margin-bottom: 10px;
}
.calendar-when:focus { outline: none; border-color: var(--accent); }
.calendar-buttons {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.calendar-btn {
  flex: 1;
  min-width: 120px;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
}
.calendar-btn:hover {
  background: var(--accent-dim);
  border-color: var(--accent);
  color: var(--accent);
}
.calendar-btn:active { transform: scale(0.97); }
.calendar-hint {
  margin-top: 8px;
  font-size: 11px;
  color: var(--text-dim);
  line-height: 1.4;
}

/* ============================================================
   DATE REVIEW SHEET
   ============================================================ */
.review-cta-wrap {
  padding: 4px 0;
}
.review-sub {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.45;
  margin: 6px 0 12px;
}
.review-sheet { max-height: 90vh; overflow-y: auto; }
.review-eyebrow {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--accent);
  margin-bottom: 4px;
}
.review-block {
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
}
.review-block:last-of-type { border-bottom: 0; }
.review-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 6px;
}
.review-sub-lbl {
  font-size: 12px;
  color: var(--text-secondary);
  margin-bottom: 10px;
  line-height: 1.4;
}
.review-stars {
  display: flex;
  gap: 4px;
}
.star-btn {
  width: 34px; height: 34px;
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--t-fast);
}
.star-btn svg {
  width: 100%; height: 100%;
  fill: var(--border-strong);
  stroke: var(--border-strong);
  stroke-width: 0.5;
  transition: fill var(--t-fast), stroke var(--t-fast), transform var(--t-fast);
}
.star-btn:hover svg { transform: scale(1.08); }
.star-btn:active { transform: scale(0.92); }
.star-btn.filled svg {
  fill: var(--accent);
  stroke: var(--accent);
}
.review-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}
.review-submit {
  background: var(--accent);
}
.review-submit:hover:not(:disabled) { background: var(--accent-light); }

/* ============================================================
   DESKTOP / TABLET — frame the mobile column in a designed space
   ============================================================ */
@media (min-width: 720px) {
  html, body { height: auto; }
  body {
    overflow: auto;
    background:
      radial-gradient(circle at 18% 18%, var(--accent-dim) 0%, transparent 45%),
      radial-gradient(circle at 82% 82%, rgba(232, 168, 124, 0.12) 0%, transparent 45%),
      var(--bg);
    min-height: 100dvh;
    padding: 32px 24px;
  }
  /* Use block layout + auto margins so the .app column centers horizontally
     without forcing a rigid height. Vertical centering at min-height viewports
     happens via margin: 32px auto so short viewports never clip the form. */
  .app {
    height: min(900px, calc(100dvh - 64px));
    max-height: 900px;
    margin: 32px auto;
    border-radius: 28px;
    overflow: hidden;
    box-shadow:
      0 24px 80px rgba(20, 20, 40, 0.18),
      0 4px 16px rgba(20, 20, 40, 0.06);
    border: 1px solid var(--border);
    background: var(--bg);
  }
  /* Bottom navs stay sticky inside the rounded frame */
  .bottom-nav { border-radius: 0 0 28px 28px; }
  .hero-header { border-radius: 28px 28px 0 0; }
}

@media (min-width: 1100px) {
  /* On wide screens, frame the mobile column with the Zera wordmark on the
     left + the tagline on the right — both decorative, pointer-events: none.
     Lowercase Fraunces serif matches the brand logo lockup. */
  body::before {
    content: "zera";
    position: fixed;
    left: 8vw;
    top: 50%;
    transform: translateY(-50%);
    font-family: 'Fraunces', Georgia, serif;
    font-size: clamp(96px, 12vw, 200px);
    font-weight: 700;
    letter-spacing: -0.04em;
    color: var(--color-accent);
    opacity: 0.14;
    pointer-events: none;
    line-height: 0.9;
  }
  body::after {
    content: "Something real, not random.";
    position: fixed;
    right: 6vw;
    bottom: 8vh;
    font-family: 'Fraunces', Georgia, serif;
    font-size: 18px;
    font-style: italic;
    color: var(--text-secondary);
    opacity: 0.45;
    pointer-events: none;
    max-width: 240px;
    text-align: right;
    line-height: 1.4;
  }
}

/* Dark mode: tone down the brand-mark watermark so it doesn't glow */
:root[data-theme="dark"] body::before { opacity: 0.06; }
:root[data-theme="dark"] body::after { opacity: 0.5; }

/* ============================================================
   VOICE PREVIEW BAR — listen / retake / send before the message goes
   ============================================================ */
.voice-preview-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: var(--surface);
  border-top: 1px solid var(--border);
  flex-wrap: wrap;
  animation: voice-preview-in 0.18s var(--ease-spring);
}
@keyframes voice-preview-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.voice-preview-audio {
  flex: 1;
  min-width: 200px;
  height: 36px;
}
.voice-preview-btn {
  padding: 9px 14px;
  border-radius: var(--radius-pill);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  transition: background var(--t-fast), border-color var(--t-fast);
}
.voice-preview-btn.retake {
  color: var(--text-secondary);
}
.voice-preview-btn.retake:hover {
  border-color: var(--danger);
  color: var(--danger);
  background: var(--danger-light);
}
.voice-preview-btn.send {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.voice-preview-btn.send:hover {
  background: var(--accent-light);
}
.voice-preview-btn:active { transform: scale(0.97); }

/* ============================================================
   LEGAL PAGES (terms.html, privacy.html)
   ============================================================ */
body.legal-body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  overflow: auto;
  padding: 0;
  min-height: 100dvh;
}
.legal-wrap {
  max-width: 720px;
  margin: 0 auto;
  padding: 40px 24px 80px;
}
.legal-wrap h1 {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 40px;
  font-weight: 600;
  letter-spacing: -0.025em;
  color: var(--text);
  line-height: 1.1;
  margin: 12px 0 8px;
}
.legal-wrap h2 {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
  line-height: 1.2;
  margin: 36px 0 10px;
}
.legal-wrap p, .legal-wrap li {
  font-size: 15px;
  line-height: 1.65;
  color: var(--text-secondary);
  margin-bottom: 12px;
}
.legal-wrap ul { padding-left: 20px; margin-bottom: 18px; }
.legal-wrap a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}
.legal-wrap a:hover { opacity: 0.8; }
.legal-meta {
  color: var(--text-dim);
  font-size: 13px;
  margin-bottom: 28px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 20px;
}
.legal-back {
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary) !important;
  border-bottom: 0 !important;
  margin-bottom: 8px;
}
.legal-back:hover { color: var(--accent) !important; }
.legal-logo {
  width: 72px;
  height: 62px;
  display: block;
  margin: 20px 0 8px;
}

/* ============================================================
   ADMIN — fit-to-width tables, clickable stat cards, chips
   ============================================================ */
.admin-table.admin-table-fit {
  width: 100%;
  table-layout: fixed;
  font-size: 13px;
}
.admin-table.admin-table-fit th,
.admin-table.admin-table-fit td {
  word-wrap: break-word;
  overflow-wrap: anywhere;
  padding: 10px 12px;
}
.admin-table.admin-table-fit .col-user { width: 14%; }
.admin-table.admin-table-fit .col-truncate { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Created + Last Active — identical shape so header and value line up and the
   two columns visually align with each other. Right-aligned so the "N ago"
   text hugs the next column (Last Active → Moderation). */
.admin-table.admin-table-fit .col-created,
.admin-table.admin-table-fit .col-last-active {
  width: 8%;
  white-space: nowrap;
  font-size: 11px;
  color: var(--text-secondary);
  padding-left: 8px;
  padding-right: 8px;
  text-align: right;
}
.admin-table.admin-table-fit thead th.col-created,
.admin-table.admin-table-fit thead th.col-last-active { text-align: right; }
/* Moderation column uses icon-only buttons so 5 actions fit in ~180px. */
.admin-table.admin-table-fit .col-mod {
  width: 15%; min-width: 180px; white-space: nowrap;
  padding-left: 8px;
}
.admin-btn.mod-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; padding: 0;
  font-size: 14px; font-weight: 600; line-height: 1;
  margin: 0 2px 0 0;
  border-radius: 6px;
  flex-shrink: 0;
}
.admin-btn.mod-icon.danger { color: var(--danger, #b33); }
.admin-btn.mod-icon:hover { background: var(--bg-secondary, #f0f0f0); }
.admin-btn.mod-icon.danger:hover { background: var(--danger-light, rgba(179,51,51,0.12)); }

/* Users table — tight distribution: User · Status · Flag · Age · Location · Personality · Love · Last · Mod
   SCOPED to .tbl-users so these nth-child rules don't bleed onto the other
   admin-table-fit tables (Meets, Admins, AI, Push, Exits, Modlog…) that
   have entirely different column orders. */
.admin-table.tbl-users thead th:nth-child(2),
.admin-table.tbl-users tbody td:nth-child(2) { width: 8%; white-space: nowrap; }  /* Status */
.admin-table.tbl-users thead th:nth-child(3),
.admin-table.tbl-users tbody td:nth-child(3) { width: 6%; white-space: nowrap; }  /* Flag */
.admin-table.tbl-users thead th:nth-child(4),
.admin-table.tbl-users tbody td:nth-child(4) { width: 5%; text-align: center; white-space: nowrap; }  /* Age */
.admin-table.tbl-users thead th:nth-child(5),
.admin-table.tbl-users tbody td:nth-child(5) { width: 8%; }   /* Location */
.admin-table.tbl-users thead th:nth-child(6),
.admin-table.tbl-users tbody td:nth-child(6) { width: 11%; }
.admin-table.tbl-users thead th:nth-child(6) { white-space: nowrap; }
.admin-table.tbl-users thead th:nth-child(7),
.admin-table.tbl-users tbody td:nth-child(7) { width: 13%; }  /* Love language */

/* Meets: 4-column primary row (When · Users · Address · Status) plus an
   optional detail row below each meeting showing Location name + Coords.
   Pulls the content that used to smash into one cell onto its own line. */
/* Use <colgroup> widths so they apply even when the generic admin-table-fit
   nth-child rules (written for the Users table) try to shrink Status to 5%. */
.admin-table.tbl-meetings { table-layout: fixed; }
.admin-table.tbl-meetings col.col-when   { width: 18%; }
.admin-table.tbl-meetings col.col-users  { width: 22%; }
.admin-table.tbl-meetings col.col-addr   { width: 42%; }
.admin-table.tbl-meetings col.col-status { width: 18%; }
.admin-table.tbl-meetings th,
.admin-table.tbl-meetings td { vertical-align: top; }
.admin-table.tbl-meetings .cell-when   { white-space: nowrap; }
.admin-table.tbl-meetings .cell-users  { word-wrap: break-word; }
.admin-table.tbl-meetings .cell-addr   { word-break: break-word; overflow-wrap: anywhere; }
.admin-table.tbl-meetings .cell-addr .meet-addr-clip {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.admin-table.tbl-meetings .cell-status {
  text-align: center;
  white-space: nowrap;
}
.admin-table.tbl-meetings tr.meet-primary td { border-bottom: none; }

/* Backups table — filename / when / size / actions. */
.admin-table.tbl-backups { table-layout: fixed; }
/* Five columns now (added Format chip 2026-04). Widths re-balanced so
   "When" sits next to "Filename" and Actions has enough room for
   Download / Restore / Delete buttons without wrapping. */
.admin-table.tbl-backups col.col-name { width: 32%; }
.admin-table.tbl-backups col.col-when { width: 18%; }
.admin-table.tbl-backups col.col-size { width: 10%; }
.admin-table.tbl-backups col:nth-child(4) { width: 12%; } /* Format */
.admin-table.tbl-backups col.col-acts { width: 28%; }
.admin-table.tbl-backups .cell-name { word-break: break-all; }
.admin-table.tbl-backups .cell-acts { text-align: right; white-space: nowrap; }

.admin-table.tbl-exits th:nth-child(1),
.admin-table.tbl-exits td:nth-child(1) { width: 14%; white-space: nowrap; }
.admin-table.tbl-exits th:nth-child(2),
.admin-table.tbl-exits td:nth-child(2) { width: 22%; }
.admin-table.tbl-exits th:nth-child(3),
.admin-table.tbl-exits td:nth-child(3) { width: 10%; }
.admin-table.tbl-exits th:nth-child(4),
.admin-table.tbl-exits td:nth-child(4) { width: 18%; }
.admin-table.tbl-exits th:nth-child(5),
.admin-table.tbl-exits td:nth-child(5) { width: 36%; }

.admin-table.tbl-modlog th:nth-child(1),
.admin-table.tbl-modlog td:nth-child(1) { width: 14%; white-space: nowrap; }
.admin-table.tbl-modlog th:nth-child(2),
.admin-table.tbl-modlog td:nth-child(2) { width: 26%; }
.admin-table.tbl-modlog th:nth-child(3),
.admin-table.tbl-modlog td:nth-child(3) { width: 14%; }
.admin-table.tbl-modlog th:nth-child(4),
.admin-table.tbl-modlog td:nth-child(4) { width: 16%; }
.admin-table.tbl-modlog th:nth-child(5),
.admin-table.tbl-modlog td:nth-child(5) { width: 30%; }

.admin-table.tbl-reviews th:nth-child(1),
.admin-table.tbl-reviews td:nth-child(1) { width: 13%; white-space: nowrap; }
.admin-table.tbl-reviews th:nth-child(2),
.admin-table.tbl-reviews td:nth-child(2) { width: 16%; }
.admin-table.tbl-reviews th:nth-child(3),
.admin-table.tbl-reviews td:nth-child(3) { width: 10%; }
.admin-table.tbl-reviews th:nth-child(4),
.admin-table.tbl-reviews td:nth-child(4) { width: 10%; }
.admin-table.tbl-reviews th:nth-child(5),
.admin-table.tbl-reviews td:nth-child(5) { width: 10%; }
.admin-table.tbl-reviews th:nth-child(6),
.admin-table.tbl-reviews td:nth-child(6) { width: 9%; }
.admin-table.tbl-reviews th:nth-child(7),
.admin-table.tbl-reviews td:nth-child(7) { width: 32%; }

/* Reports — 7-column primary row: When · Sev · Reporter · Reported · Reason ·
   Outcome · Action. Long `Details` text moved onto its own full-width
   secondary row below each report so it never squeezes the name columns. */
.admin-table.tbl-reports { border-collapse: separate; border-spacing: 0; }
.admin-table.tbl-reports th,
.admin-table.tbl-reports td {
  padding: 10px 12px;
  border-right: 1px solid var(--border, rgba(0,0,0,0.08));
  vertical-align: top;
  word-break: break-word;
  overflow-wrap: anywhere;
  white-space: normal;
}
.admin-table.tbl-reports th:last-child,
.admin-table.tbl-reports td:last-child { border-right: none; }
.admin-table.tbl-reports tr.report-primary td { border-bottom: none; }
.admin-table.tbl-reports tr.report-detail td { border-right: none; }
.admin-table.tbl-reports th:nth-child(1),
.admin-table.tbl-reports td:nth-child(1) { width: 10%; white-space: nowrap; font-size: 11px; }
.admin-table.tbl-reports th:nth-child(2),
.admin-table.tbl-reports td:nth-child(2) { width: 8%; text-align: center; }
.admin-table.tbl-reports th:nth-child(3),
.admin-table.tbl-reports td:nth-child(3) { width: 16%; }  /* Reporter */
.admin-table.tbl-reports th:nth-child(4),
.admin-table.tbl-reports td:nth-child(4) { width: 16%; }  /* Reported */
.admin-table.tbl-reports th:nth-child(5),
.admin-table.tbl-reports td:nth-child(5) { width: 16%; }  /* Reason */
.admin-table.tbl-reports th:nth-child(6),
.admin-table.tbl-reports td:nth-child(6) { width: 16%; }  /* Outcome */
.admin-table.tbl-reports th:nth-child(7),
.admin-table.tbl-reports td:nth-child(7) { width: 18%; }  /* Action */

.admin-table.tbl-actions th:nth-child(1),
.admin-table.tbl-actions td:nth-child(1) { width: 30%; }
.admin-table.tbl-actions th:nth-child(2),
.admin-table.tbl-actions td:nth-child(2) { width: 30%; }
.admin-table.tbl-actions th:nth-child(3),
.admin-table.tbl-actions td:nth-child(3) { width: 14%; }
.admin-table.tbl-actions th:nth-child(4),
.admin-table.tbl-actions td:nth-child(4) { width: 26%; white-space: nowrap; }

.admin-table.tbl-matches th:nth-child(1),
.admin-table.tbl-matches td:nth-child(1) { width: 5%; }
.admin-table.tbl-matches th:nth-child(2),
.admin-table.tbl-matches td:nth-child(2) { width: 22%; }
.admin-table.tbl-matches th:nth-child(3),
.admin-table.tbl-matches td:nth-child(3) { width: 9%; }
.admin-table.tbl-matches th:nth-child(n+4),
.admin-table.tbl-matches td:nth-child(n+4) { width: 10.5%; }

/* Connections table — Messages/Videos/Audio get the SAME width so the
   "a / b" counters line up visually. Plan gets more room; Met?/Success? hug
   each other to reclaim the width from Last Active-style end columns. */
.admin-table.tbl-conns th:nth-child(1),
.admin-table.tbl-conns td:nth-child(1) { width: 17%; }   /* Connection (pair) */
.admin-table.tbl-conns th:nth-child(2),
.admin-table.tbl-conns td:nth-child(2) { width: 8%; white-space: nowrap; }  /* Stage */
.admin-table.tbl-conns th:nth-child(3),
.admin-table.tbl-conns td:nth-child(3) { width: 6%; text-align: center; }   /* Score */
/* Messages / Videos / Audio — identical tight columns with minimal gutter so
   they read as a single trio of media counters. */
.admin-table.tbl-conns th:nth-child(4),
.admin-table.tbl-conns td:nth-child(4),
.admin-table.tbl-conns th:nth-child(5),
.admin-table.tbl-conns td:nth-child(5),
.admin-table.tbl-conns th:nth-child(6),
.admin-table.tbl-conns td:nth-child(6) {
  width: 7%; text-align: center; white-space: nowrap;
  padding-left: 3px; padding-right: 3px;
  font-variant-numeric: tabular-nums;
}
/* Date type butts up against Audio with slightly more left-padding so it
   reads as the next group, not a continuation of the media trio. */
.admin-table.tbl-conns th:nth-child(7),
.admin-table.tbl-conns td:nth-child(7) { width: 9%; padding-left: 10px; }
.admin-table.tbl-conns th:nth-child(8),
.admin-table.tbl-conns td:nth-child(8) { width: 22%; }   /* Plan — more room */
.admin-table.tbl-conns th:nth-child(9),
.admin-table.tbl-conns td:nth-child(9),
.admin-table.tbl-conns th:nth-child(10),
.admin-table.tbl-conns td:nth-child(10) {
  width: 6.5%; text-align: center; white-space: nowrap; padding-left: 4px; padding-right: 4px;
}  /* Met? / Success? — narrow + adjacent */

/* Removed tab — 5 columns spread evenly, no single column hogs width */
.admin-table.tbl-removed th:nth-child(1),
.admin-table.tbl-removed td:nth-child(1) { width: 26%; }
.admin-table.tbl-removed th:nth-child(2),
.admin-table.tbl-removed td:nth-child(2) { width: 18%; white-space: nowrap; }
.admin-table.tbl-removed th:nth-child(3),
.admin-table.tbl-removed td:nth-child(3) { width: 18%; }
.admin-table.tbl-removed th:nth-child(4),
.admin-table.tbl-removed td:nth-child(4) { width: 20%; }
.admin-table.tbl-removed th:nth-child(5),
.admin-table.tbl-removed td:nth-child(5) { width: 18%; text-align: center; }

/* Premium table — User column gets enough breathing room, per-feature toggles
   evenly distributed, Status pinned right. Previously the default 100% stretch
   smooshed the toggles together. */
.admin-table.tbl-premium th:nth-child(1),
.admin-table.tbl-premium td:nth-child(1) { width: 28%; }
.admin-table.tbl-premium th,
.admin-table.tbl-premium td { padding: 12px 14px; }
.admin-table.tbl-premium td:not(:first-child):not(:last-child) { text-align: center; }
.admin-table.tbl-premium th:last-child,
.admin-table.tbl-premium td:last-child { width: 11%; text-align: center; }
.prem-toggle { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.prem-toggle input { margin: 0; }
.prem-summary .stat-card.clickable.active { outline: 2px solid var(--accent); }

/* ============================================================
   ADMIN — MOBILE OVERRIDES (only affects < 900px, desktop unchanged)
   ============================================================ */
@media (max-width: 900px) {
  /* Tabs wrap instead of scrolling so everything's reachable */
  .admin-tabs { flex-wrap: wrap; gap: 4px; }
  .admin-tab { padding: 8px 10px; font-size: 12px; }
  .admin-tab-sep { display: none; }

  /* Fixed-layout tables become scroll-x on mobile so columns don't collapse.
     Wraps each .admin-table in its own horizontal scroller. */
  .admin-panel { overflow-x: auto; }
  .admin-table.admin-table-fit { min-width: 720px; font-size: 12px; }
  .admin-table.admin-table-fit th,
  .admin-table.admin-table-fit td { padding: 8px 8px; }

  /* Stats grid becomes 2-up instead of cramming 5-7 tiny cards across */
  .stats-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }

  /* Moderation buttons re-enable wrap on narrow screens so nothing clips */
  .admin-btn-row { flex-wrap: wrap; }

  /* User cell gets more vertical room for email underneath */
  .admin-user-email { font-size: 10px; }
}
.admin-user-cell { display: flex; flex-direction: column; gap: 2px; }
.admin-user-name { font-weight: 600; color: var(--text); line-height: 1.3; }
.admin-user-email { font-size: 11px; color: var(--text-dim); line-height: 1.3; overflow: hidden; text-overflow: ellipsis; }
.admin-pair-cell { display: flex; flex-direction: column; gap: 2px; line-height: 1.3; }
/* Desktop: moderation buttons ride on one row (no wrap). Mobile media query
   below re-enables wrapping so narrow screens can stack. */
.admin-btn-row { display: flex; gap: 4px; flex-wrap: nowrap; }
.admin-btn-row .admin-btn { padding: 4px 9px; font-size: 11px; margin: 0; white-space: nowrap; flex-shrink: 0; }

/* Severity chips on Reports */
.sev-chip {
  display: inline-block; padding: 2px 8px; border-radius: var(--radius-pill);
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;
}
.sev-critical { background: var(--danger-light); color: var(--danger); border: 1px solid var(--danger); }
.sev-high     { background: rgba(232, 128, 59, 0.12); color: #E8803B; border: 1px solid rgba(232, 128, 59, 0.4); }
.sev-med      { background: var(--accent-dim); color: var(--accent); border: 1px solid rgba(90, 94, 184, 0.35); }
.sev-low      { background: var(--bg-secondary); color: var(--text-secondary); border: 1px solid var(--border); }
.sev-row-critical td { background: rgba(240, 133, 133, 0.04); }
.sev-row-high td     { background: rgba(232, 128, 59, 0.03); }

/* Report outcome chips */
.outcome-chip {
  display: inline-block; padding: 2px 8px; border-radius: var(--radius-pill);
  font-size: 11px; font-weight: 600;
}
.outcome-no_action           { background: var(--bg-secondary); color: var(--text-secondary); }
.outcome-warn                { background: rgba(90, 94, 184, 0.14); color: var(--accent); }
.outcome-remove_content      { background: rgba(232, 168, 124, 0.18); color: var(--terracotta); }
.outcome-require_verification{ background: rgba(71, 179, 122, 0.14); color: var(--success); }
.outcome-suspend             { background: rgba(240, 133, 133, 0.15); color: var(--danger); }
.outcome-ban                 { background: var(--danger); color: #fff; }
.outcome-escalate            { background: #111; color: #fff; }

/* Compact action row inside report table */
.report-action-row {
  display: flex; flex-direction: column; gap: 4px; min-width: 220px;
}
.admin-select.sm, .text-input.sm {
  padding: 5px 8px; font-size: 12px; margin: 0; height: auto;
}

.stat-card.clickable { cursor: pointer; }
.stat-card.clickable:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(90, 94, 184, 0.12);
}
.stat-card.urgent {
  background: linear-gradient(135deg, rgba(225, 56, 96, 0.06) 0%, var(--surface) 100%);
  border-color: rgba(225, 56, 96, 0.3);
}
.stat-card.urgent .stat-value { color: var(--danger); }

/* Mini identity chips (MBTI, attachment, love language) */
.chip-mini {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: 100px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  margin-right: 3px;
  margin-bottom: 2px;
  white-space: nowrap;
}
/* Admin mini-chips — all monochrome. Color reserved for status chips (sev-*). */
.chip-mini.chip-mbti  { background: var(--surface); color: var(--color-ink); border: 1px solid var(--border); }
.chip-mini.chip-attach { background: var(--surface); color: var(--color-ink-soft); border: 1px solid var(--border); }
.chip-mini.chip-love  { background: var(--surface); color: var(--color-ink); border: 1px solid var(--border); }
.admin-flag-chip {
  display: inline-flex; align-items: center; gap: 3px;
  background: var(--danger-light); color: var(--danger);
  padding: 3px 8px; border-radius: 100px;
  font-size: 11px; font-weight: 700; cursor: help;
}
.row-flagged td { background: rgba(225, 56, 96, 0.04); }

/* Stage pill (Connections/Removed) */
.stage-pill {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 100px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.score-pill {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 100px;
  font-size: 11px;
  font-weight: 800;
  background: var(--accent-dim);
  color: var(--accent);
}
.yn { font-weight: 700; font-size: 11px; letter-spacing: 0.02em; }
.yn.yes { color: var(--success); }
.yn.no { color: var(--text-dim); }

/* ============================================================
   GEO PROMPT (Discover nudge)
   ============================================================ */
.discover-nudge.geoprompt {
  background: var(--accent-dim) !important;
  border: 1px solid rgba(90, 94, 184, 0.2) !important;
  gap: 12px;
  flex-direction: column;
  align-items: stretch;
}
@media (min-width: 480px) {
  .discover-nudge.geoprompt { flex-direction: row; align-items: center; }
}
.geoprompt-title { font-size: 14px; font-weight: 700; color: var(--text); line-height: 1.3; }
.geoprompt-sub { font-size: 12px; color: var(--text-secondary); margin-top: 3px; line-height: 1.4; }
.geoprompt-actions { display: flex; gap: 8px; flex-shrink: 0; }
.geoprompt-skip, .geoprompt-ok {
  padding: 8px 14px; border-radius: 100px;
  font-size: 13px; font-weight: 700; cursor: pointer; border: 1px solid var(--border);
  background: var(--surface); color: var(--text-secondary);
}
.geoprompt-ok { background: var(--accent); color: #fff; border-color: var(--accent); }

/* ============================================================
   VERIFICATION — selfie overlay + profile CTA + admin review grid
   ============================================================ */
.verify-overlay {
  position: fixed; inset: 0;
  background: rgba(10, 7, 20, 0.78);
  backdrop-filter: blur(6px);
  z-index: 10000;
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
  animation: fadeIn 0.2s ease;
}
.verify-sheet {
  width: min(440px, 100%);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 24px 22px 18px;
  position: relative;
  box-shadow: 0 24px 80px rgba(0,0,0,0.35);
  max-height: calc(100vh - 40px);
  overflow-y: auto;
}
.verify-close {
  position: absolute; top: 12px; right: 12px;
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--bg-secondary); border: 0;
  color: var(--text-secondary); font-size: 14px; cursor: pointer;
}
.verify-close:hover { background: var(--accent-dim); color: var(--accent); }
.verify-eyebrow {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.12em; color: var(--accent); margin-bottom: 6px;
}
.verify-title {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 22px; font-weight: 600; letter-spacing: -0.01em;
  color: var(--text); line-height: 1.2;
}
.verify-sub {
  font-size: 13px; color: var(--text-secondary);
  line-height: 1.5; margin: 6px 0 16px;
}
.verify-stage {
  position: relative;
  aspect-ratio: 4/3; background: #000; border-radius: var(--radius);
  overflow: hidden; margin-bottom: 14px;
}
.verify-stage video,
.verify-stage img {
  width: 100%; height: 100%; object-fit: cover;
  transform: scaleX(-1); /* mirrored so it feels natural */
}
.verify-frame {
  position: absolute; inset: 20% 24%;
  border: 2px dashed rgba(255, 255, 255, 0.55);
  border-radius: 50%;
  pointer-events: none;
}
.verify-hint {
  position: absolute; left: 0; right: 0; bottom: 10px;
  text-align: center; color: #fff; font-size: 12px;
  text-shadow: 0 1px 6px rgba(0,0,0,0.8); padding: 0 16px;
}
.verify-bar {
  display: flex; gap: 10px;
}
.verify-bar button {
  flex: 1; padding: 12px 14px; border-radius: var(--radius);
  font-weight: 700; font-size: 13px; border: 1px solid var(--border);
  background: var(--bg-secondary); color: var(--text); cursor: pointer;
}
.verify-capture, .verify-submit { background: var(--accent) !important; color: #fff !important; border-color: var(--accent) !important; }
.verify-cancel, .verify-retake { color: var(--text-secondary); }
.verify-privacy {
  margin-top: 10px; text-align: center;
  font-size: 11px; color: var(--text-dim); line-height: 1.4;
}

/* Verify CTA on Profile tab */
.verify-cta {
  margin: 12px 16px 14px;
  padding: 16px 18px;
  background: linear-gradient(135deg, var(--accent-dim) 0%, rgba(90, 94, 184, 0.08) 100%);
  border: 1px solid rgba(90, 94, 184, 0.2);
  border-radius: var(--radius);
  position: relative;
  overflow: hidden;
}
.verify-cta.pending { background: var(--bg-secondary); }
.verify-cta.rejected { background: var(--danger-light); border-color: rgba(225, 56, 96, 0.25); }
.verify-cta-eyebrow {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.14em; color: var(--accent); margin-bottom: 4px;
}
.verify-cta.rejected .verify-cta-eyebrow { color: var(--danger); }
.verify-cta-title {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 18px; font-weight: 600; letter-spacing: -0.01em;
  color: var(--text); line-height: 1.2;
}
.verify-cta-sub {
  margin-top: 4px; font-size: 13px; color: var(--text-secondary); line-height: 1.45;
}
.verify-cta-btn {
  margin-top: 12px;
  padding: 10px 18px;
  background: var(--accent); color: #fff;
  border: 0; border-radius: var(--radius-pill);
  font-weight: 700; font-size: 13px; cursor: pointer;
  transition: background var(--t-fast), transform var(--t-fast);
}
.verify-cta-btn:hover { background: var(--accent-light); }
.verify-cta-btn:active { transform: scale(0.97); }
.verify-tick-inline {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--accent); color: #fff; font-size: 12px; font-weight: 700;
  vertical-align: 1px;
}

/* Admin verification review grid */
.verify-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 16px;
}
.verify-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 14px;
  display: flex; flex-direction: column; gap: 10px;
}
.verify-header { display: flex; flex-direction: column; gap: 2px; }
.verify-compare {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
}
.verify-col { display: flex; flex-direction: column; gap: 4px; }
.verify-label { font-size: 11px; font-weight: 700; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.08em; }
.verify-img {
  width: 100%; aspect-ratio: 1/1; object-fit: cover;
  border-radius: var(--radius-sm); background: var(--bg-secondary);
}
.verify-missing {
  aspect-ratio: 1/1; display: flex; align-items: center; justify-content: center;
  background: var(--bg-secondary); color: var(--text-dim); font-size: 12px;
  border-radius: var(--radius-sm);
}
.verify-actions { display: flex; gap: 8px; margin-top: 4px; }
.verify-actions .admin-btn { flex: 1; padding: 10px; font-size: 13px; }

.verified-tick {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px; height: 16px;
  background: var(--accent);
  color: #fff;
  border-radius: 50%;
  font-size: 10px;
  font-weight: 700;
  margin-left: 4px;
  vertical-align: 1px;
}
.legal-footer {
  margin-top: 48px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
  font-size: 13px;
  color: var(--text-dim);
}

/* ============================================================
   ONBOARDING — eyebrow + softer subtitle
   ============================================================ */
.onboarding-card .card-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 6px;
}
.onboarding-card .card-title {
  font-family: 'Fraunces', Georgia, serif;
  letter-spacing: -0.02em;
}
.onboarding-card .card-subtitle {
  line-height: 1.55;
  color: var(--text-secondary);
  font-size: 14px;
  max-width: 420px;
}