:root{
    --bg:#070b16;
    --bg2:#0e1526;
    --card:#111a2e;
    --card2:#17223a;
    --text:#ffffff;
    --muted:#8ea3c4;
    --pink:#3b82f6;
    --orange:#38bdf8;
    --purple:#4f6df5;
    --green:#22c55e;
    --danger:#ff5470;
    --grad: linear-gradient(135deg,#1d4ed8,#3b82f6);
    --grad2: linear-gradient(135deg,#312e81,#2563eb);
    --radius:20px;
    --border:#22304a;
  }
  *{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
  /* This page never intentionally scrolls sideways — but a fraction-of-a-pixel-
     wide element (a flex/grid child, a centered absolute pill, a gradient) is
     all it takes to make mobile Safari/Chrome think the page CAN scroll
     horizontally. Once that happens, a normal vertical swipe easily drags a
     few px sideways too, which shifts fixed/sticky/absolutely-positioned
     elements (the top nav, the call controls, card corners) out from under
     their intended spot — that's the "layout isn't consistent, cuts off
     sometimes while scrolling" effect. Locking horizontal scroll out
     entirely at the root is the standard fix. */
  html,body{height:100%; overflow-x:hidden;}
  body{
    margin:0;
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    /* "circle" sizes its radius to look right on a wide, short desktop
       window — on a tall, narrow phone screen that same radius runs out
       long before reaching the bottom-right two-thirds of the page, leaving
       a hard, visible seam where the glow just stops and flat --bg begins.
       "ellipse" (the default shape, made explicit here) scales its two axes
       independently to the box's own aspect ratio, so the same glow reaches
       every corner smoothly on any screen size instead of just wide ones. */
    background:
      radial-gradient(ellipse at 15% -10%, #142544 0%, transparent 45%),
      radial-gradient(ellipse at 100% 0%, #0f2038 0%, transparent 40%),
      var(--bg);
    color:var(--text);
    min-height:100vh;
  }
  a{ color:inherit; }
  ::-webkit-scrollbar{ width:8px; height:8px; }
  ::-webkit-scrollbar-thumb{ background:#26375a; border-radius:8px; }

  h1.big{ font-size:28px; margin:0 0 8px; font-weight:800; letter-spacing:-.02em; }
  h1.page-title{ font-size:26px; font-weight:800; margin:0 0 6px; letter-spacing:-.01em; }
  p.sub{ color:var(--muted); font-size:15px; line-height:1.55; margin:0 0 22px; }

  .btn{
    border:none; border-radius:14px; padding:15px 22px; font-size:15.5px; font-weight:700;
    cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:8px;
    transition:transform .12s ease, filter .12s ease, opacity .12s ease;
  }
  .btn:active{ transform:scale(.98); }
  .btn-primary{ background:var(--grad); color:#ffffff; box-shadow:0 10px 24px -8px rgba(37,99,235,.45); }
  .btn-primary:hover{ filter:brightness(1.06); }
  .btn-ghost{ background:var(--card2); color:var(--text); }
  .btn-ghost:hover{ background:#26263a; }
  .btn-outline{ background:transparent; color:var(--text); border:1.5px solid var(--border); }
  .btn-outline:hover{ border-color:#3a3a55; }
  .btn-block{ width:100%; }
  .btn-disabled{ opacity:.4; pointer-events:none; }
  .btn-sm{ padding:9px 15px; font-size:13.5px; border-radius:11px; }
  .btn-google{ background:#ffffff; color:#1f1f1f; border:1.5px solid var(--border); margin-bottom:16px; }
  .btn-google:hover{ background:#f5f5f5; }
  .or-divider{ display:flex; align-items:center; gap:12px; margin:2px 0 18px; color:var(--muted); font-size:12.5px; text-transform:uppercase; letter-spacing:.05em; }
  .or-divider::before, .or-divider::after{ content:''; flex:1; height:1px; background:var(--border); }

  /* ================= TOP NAV ================= */
  .topnav{
    position:sticky; top:0; z-index:100; height:66px;
    display:flex; align-items:center; justify-content:space-between;
    padding:0 clamp(18px,4vw,40px);
    background:#0e0e17d9; backdrop-filter:blur(10px);
    border-bottom:1px solid var(--border);
  }
  .topnav.hidden{ display:none; }
  .brand{ display:flex; align-items:center; gap:10px; font-weight:800; font-size:18px; cursor:default; }

  /* ---- logo mark: a ring with a clock hand, used everywhere the brand appears ---- */
  .logo-icon{
    --logo-size:26px; --logo-border:2px; --logo-hand-w:2px;
    width:var(--logo-size); height:var(--logo-size); border-radius:50%;
    border:var(--logo-border) solid var(--pink); position:relative; display:inline-block; flex-shrink:0;
  }
  .logo-icon::after{
    content:''; position:absolute; left:50%; top:15%; width:var(--logo-hand-w); height:38%;
    background:var(--pink); border-radius:1px; transform-origin:bottom center;
    transform:translateX(-50%) rotate(40deg);
  }
  .topnav-links{ display:flex; gap:4px; }
  .nav-link{
    padding:9px 16px; border-radius:10px; font-weight:700; font-size:14px; color:var(--muted);
    cursor:pointer; display:flex; align-items:center; gap:7px; position:relative; user-select:none;
  }
  .nav-link:hover{ color:var(--text); }
  .nav-link.active{ color:var(--text); background:#ffffff10; }
  .nav-link .badge{ background:var(--pink); color:#fff; font-size:10px; font-weight:800; padding:1px 6px; border-radius:10px; }
  .user-chip{ display:flex; align-items:center; gap:10px; cursor:pointer; }
  .user-chip .avatar-circle{ width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:17px; background:var(--grad); }
  .user-chip .uname{ font-size:13.5px; font-weight:700; color:var(--muted); }
  .user-chip:hover .uname{ color:var(--text); }

  /* ================= SCREENS ================= */
  .screen{ display:none; }
  .screen.active{ display:block; animation:fadeIn .25s ease; }
  @keyframes fadeIn{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:translateY(0); } }

  /* Stepping through onboarding (age -> verify -> name -> ...) gets its own
     directional feel instead of the plain fade every other screen uses —
     forward slides in from the right, back (the onboard-back arrow) slides
     in from the left. go() in app.js decides which class to add, based on
     each screen's position in ONBOARDING_STEPS. More specific than
     .screen.active alone, so this cleanly overrides the plain fadeIn above
     without needing !important. */
  .screen.active.slide-fwd{ animation:onboardSlideFwd .38s cubic-bezier(.22,.61,.36,1); }
  .screen.active.slide-back{ animation:onboardSlideBack .38s cubic-bezier(.22,.61,.36,1); }
  @keyframes onboardSlideFwd{ from{ opacity:0; transform:translateX(28px); } to{ opacity:1; transform:translateX(0); } }
  @keyframes onboardSlideBack{ from{ opacity:0; transform:translateX(-28px); } to{ opacity:1; transform:translateX(0); } }

  /* ---- onboarding (landing / age / signup / interests) ---- */
  .onboard-shell{ min-height:100vh; display:flex; align-items:center; justify-content:center; padding:60px 20px; }
  .onboard-card{
    width:100%; max-width:460px; background:var(--card); border:1px solid var(--border);
    border-radius:28px; padding:44px 40px; box-shadow:0 40px 90px -30px rgba(0,0,0,.6);
  }

  .onboard-progress{ margin-bottom:22px; }
  .onboard-progress-top{ display:flex; align-items:center; gap:10px; margin-bottom:10px; }
  .onboard-back{ width:28px; height:28px; border-radius:50%; background:var(--bg2); display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--text); font-size:14px; flex-shrink:0; }
  .onboard-back:hover{ background:#26263a; }
  .onboard-step-text{ font-size:12px; font-weight:700; color:var(--muted); letter-spacing:.04em; }

  /* Same glowing wavefront look as the search screen's .load-pill and the
     call timer (see those sections below) — reused here at header-bar
     scale: a dark rail with a blue gradient fill whose leading edge stays
     bright, a drifting shimmer, and a small soft glow bleeding just ahead
     of it. Purely cosmetic — renderOnboardProgress() in app.js still just
     sets this fill's width to the step percentage. */
  .onboard-progress-track{ height:8px; border-radius:999px; background:#0b0f1e; border:1px solid var(--border); overflow:hidden; }
  .onboard-progress-fill{
    position:relative; height:100%; border-radius:999px;
    background:linear-gradient(90deg, #16264a 0%, #1d4ed8 55%, #5b9dff 85%, #eaf4ff 100%);
    transition:width .45s cubic-bezier(.22,.61,.36,1);
  }
  .onboard-progress-fill::before{
    content:''; position:absolute; inset:0;
    background:repeating-linear-gradient(115deg, transparent 0 10px, rgba(255,255,255,.09) 10px 12px, transparent 12px 26px);
    background-size:260% 100%;
    animation:pill-shimmer 2.8s linear infinite;
    mix-blend-mode:overlay;
  }
  .onboard-progress-fill::after{
    content:''; position:absolute; top:-200%; bottom:-200%; right:-14px; width:34px;
    background:radial-gradient(closest-side, rgba(147,197,253,.9), rgba(59,130,246,.4) 55%, transparent 75%);
    filter:blur(8px); pointer-events:none;
  }

  /* ---- landing intro animation ---- */
  .intro-wrap{
    min-height:100vh; display:flex; align-items:center; justify-content:center;
    position:relative; overflow:hidden; padding:20px;
  }
  .intro-stack{ display:flex; flex-direction:column; align-items:center; gap:26px; }

  .intro-lockup{
    display:flex; align-items:center; gap:18px;
    animation:lockupLift 900ms cubic-bezier(.22,.7,.24,1) 1500ms 1 both;
  }
  .intro-mark{
    position:relative; width:64px; height:64px; display:flex; align-items:center; justify-content:center;
    animation:markSettle 700ms cubic-bezier(.22,.7,.24,1) 0s 1 both;
  }
  .intro-mark-glow{
    position:absolute; width:64px; height:64px; border-radius:50%;
    background:radial-gradient(circle, rgba(59,92,245,.45), transparent 68%);
    animation:glowPulse 1400ms ease-out 500ms 1 both;
  }
  .intro-ring{
    stroke-dasharray:176; transform:rotate(-90deg); transform-origin:32px 32px;
    animation:ringDraw 900ms cubic-bezier(.5,0,.2,1) 120ms 1 both;
  }
  .intro-hand{
    transform-origin:32px 32px;
    animation:handSweep 900ms cubic-bezier(.3,0,.2,1) 620ms 1 both;
  }
  .intro-word{
    font-size:46px; font-weight:800; letter-spacing:-.035em; line-height:1;
    animation:wordIn 700ms cubic-bezier(.22,.7,.24,1) 780ms 1 both;
  }

  .intro-tagblock{
    display:flex; flex-direction:column; align-items:center; gap:18px;
    animation:tagIn 700ms cubic-bezier(.22,.7,.24,1) 1500ms 1 both;
  }
  .intro-tagline{ font-size:14px; color:var(--muted); letter-spacing:.01em; }
  .intro-bar{ width:132px; height:2px; border-radius:2px; background:rgba(255,255,255,.08); overflow:hidden; }
  .intro-bar-fill{
    width:100%; height:100%; background:#3b5cf5; transform-origin:left center; transform:scaleX(0);
    animation:barGrow 1100ms cubic-bezier(.4,0,.2,1) 1700ms 1 both;
  }
  .intro-actions{
    display:flex; flex-direction:column; gap:10px; width:264px;
    animation:tagIn 700ms cubic-bezier(.22,.7,.24,1) 1950ms 1 both;
  }
  .intro-btn-primary, .intro-btn-outline{
    padding:13px; border-radius:10px; font-size:15px; text-align:center; cursor:pointer; font-family:inherit;
  }
  .intro-btn-primary{ background:#3b5cf5; color:#ffffff; font-weight:700; border:none; }
  .intro-btn-primary:hover{ background:#5273f7; }
  .intro-btn-outline{ background:none; border:1px solid rgba(255,255,255,.12); color:var(--muted); font-weight:600; }
  .intro-btn-outline:hover{ border-color:rgba(255,255,255,.28); color:#ffffff; }

  @keyframes ringDraw{ 0%{ stroke-dashoffset:176; } 100%{ stroke-dashoffset:0; } }
  @keyframes handSweep{ 0%{ transform:rotate(-160deg); opacity:0; } 25%{ opacity:1; } 100%{ transform:rotate(45deg); opacity:1; } }
  @keyframes markSettle{ 0%{ transform:scale(.82); opacity:0; } 60%{ transform:scale(1.02); opacity:1; } 100%{ transform:scale(1); opacity:1; } }
  @keyframes wordIn{ 0%{ transform:translateX(-14px); opacity:0; clip-path:inset(0 100% 0 0); } 100%{ transform:translateX(0); opacity:1; clip-path:inset(0); } }
  @keyframes lockupLift{ 0%{ transform:translateY(0); } 100%{ transform:translateY(-4px); } }
  @keyframes tagIn{ 0%{ transform:translateY(6px); opacity:0; } 100%{ transform:translateY(0); opacity:1; } }
  @keyframes barGrow{ 0%{ transform:scaleX(0); } 100%{ transform:scaleX(1); } }
  @keyframes glowPulse{ 0%{ transform:scale(.9); opacity:0; } 45%{ opacity:.55; } 100%{ transform:scale(1.5); opacity:0; } }

  /* ---- form bits ---- */
  .field-label{ font-size:12.5px; font-weight:700; color:var(--muted); margin:20px 0 8px; text-transform:uppercase; letter-spacing:.05em; }
  .field-label:first-of-type{ margin-top:0; }
  input[type=text], input[type=date], input[type=email], input[type=password], textarea{
    width:100%; background:var(--bg2); border:1.5px solid var(--border); color:var(--text);
    padding:14px 16px; border-radius:13px; font-size:15.5px; outline:none;
    font-family:inherit;
  }
  textarea{ resize:vertical; min-height:90px; line-height:1.5; }
  input:focus, textarea:focus{ border-color:var(--pink); }
  /* stop the browser's yellow/blue autofill background (common on email + password fields)
     from breaking the dark theme when a saved login gets autofilled */
  input:-webkit-autofill,
  input:-webkit-autofill:hover,
  input:-webkit-autofill:focus{
    -webkit-text-fill-color: var(--text);
    -webkit-box-shadow: 0 0 0px 1000px var(--bg2) inset;
    box-shadow: 0 0 0px 1000px var(--bg2) inset;
    transition: background-color 9999s ease-in-out 0s;
  }
  .error-text{ color:var(--danger); font-size:13px; margin-top:8px; min-height:16px; }
  .char-count{ text-align:right; color:var(--muted); font-size:12px; margin-top:6px; }
  .optional-tag{ text-transform:none; color:var(--muted); font-weight:600; opacity:.7; letter-spacing:0; }

  /* ---- custom dropdown (replaces native <select> UI) ---- */
  .custom-select{ position:relative; width:100%; }
  .custom-select-trigger{
    width:100%; display:flex; align-items:center; justify-content:space-between; gap:10px;
    background:var(--bg2); border:1.5px solid var(--border); color:var(--text);
    padding:14px 16px; border-radius:13px; font-size:15.5px; font-family:inherit;
    cursor:pointer; text-align:left;
  }
  .custom-select-trigger:hover{ border-color:#2c3e5c; }
  .custom-select.open .custom-select-trigger{ border-color:var(--pink); }
  .custom-select-value{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .custom-select-value.is-placeholder{ color:var(--muted); }
  .custom-select-arrow{ color:var(--muted); font-size:12px; flex-shrink:0; transition:transform .15s ease; }
  .custom-select.open .custom-select-arrow{ transform:rotate(180deg); }
  .custom-select-panel{
    display:none; position:absolute; left:0; right:0; top:calc(100% + 8px); z-index:20;
    background:var(--card2); border:1.5px solid var(--border); border-radius:14px;
    max-height:260px; overflow-y:auto; padding:6px;
    box-shadow:0 20px 40px -12px rgba(0,0,0,.55);
  }
  .custom-select.open .custom-select-panel{ display:block; }
  .custom-select-option{
    padding:11px 13px; border-radius:9px; font-size:14.5px; font-weight:600; color:var(--text);
    cursor:pointer; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  .custom-select-option:hover{ background:var(--bg2); }
  .custom-select-option.selected{ background:var(--grad); color:#ffffff; }

  /* ---- date-of-birth (month / day / year) ---- */
  .dob-row{ display:flex; gap:10px; }
  .dob-row .custom-select{ flex:1.3; min-width:0; }
  .dob-row .dob-day{ flex:.85; }
  .dob-row .dob-year{ flex:1; }
  .dob-row .custom-select-trigger{ padding-left:14px; padding-right:10px; }

  .avatar-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:10px; margin-top:4px; }
  .avatar-opt{
    aspect-ratio:1; border-radius:14px; display:flex; align-items:center; justify-content:center;
    font-size:21px; cursor:pointer; border:2px solid transparent; background:var(--bg2);
  }
  .avatar-opt:hover{ background:#262638; }
  .avatar-opt.selected{ border-color:var(--orange); background:#26263a; }

  .photo-upload-box{
    width:116px; height:116px; border-radius:50%; margin:4px auto 0; cursor:pointer;
    border:2px dashed var(--border); display:flex; align-items:center; justify-content:center;
    background-color:var(--bg2); background-size:cover; background-position:center; flex-shrink:0;
  }
  .photo-upload-box:hover{ border-color:var(--pink); }
  .photo-upload-box.has-photo{ border-style:solid; border-color:var(--border); }
  .photo-upload-empty{ display:flex; flex-direction:column; align-items:center; gap:5px; color:var(--muted); font-size:12px; font-weight:600; text-align:center; padding:0 10px; }
  .photo-upload-icon{ font-size:26px; }
  .photo-remove-btn{
    display:none; margin:12px auto 0; background:none; border:none; color:var(--danger); font-size:13px;
    font-weight:700; cursor:pointer; text-align:center; width:100%;
  }
  .photo-divider{ display:flex; align-items:center; gap:12px; color:var(--muted); font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; margin:24px 0 14px; }
  .photo-divider::before, .photo-divider::after{ content:''; flex:1; height:1px; background:var(--border); }

  /* ---- age verification (selfie) ---- */
  .verify-cam-box{
    width:180px; height:180px; border-radius:50%; margin:8px auto 0; position:relative;
    background-color:var(--bg2); border:1px solid var(--border); overflow:hidden; flex-shrink:0;
  }
  .verify-cam-video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transform:scaleX(-1); }
  .verify-cam-preview{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
  .verify-cam-placeholder{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:56px; }
  .verify-cam-check{
    position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:56px;
    background:rgba(10,14,23,.55);
  }
  .verify-cam-box.is-verified{ border-color:var(--green); border-width:2px; }
  .verify-hint{ color:var(--muted); font-size:13px; text-align:center; margin-top:14px; }

  .chip-grid{ display:flex; flex-wrap:wrap; gap:9px; margin-top:6px; }
  .chip{
    padding:10px 15px; border-radius:30px; background:var(--bg2); border:1.5px solid var(--border);
    font-size:13.5px; font-weight:600; cursor:pointer; color:var(--text); user-select:none;
  }
  .chip:hover{ border-color:#3a3a55; }
  .chip.selected{ background:var(--grad); color:#ffffff; border-color:transparent; }
  .counter-note{ color:var(--muted); font-size:12.5px; margin-top:14px; }

  .chip-grid-stack{ flex-direction:column; }
  .chip-grid-stack .chip{ width:100%; text-align:left; padding:14px 16px; border-radius:14px; }
  .onboard-actions{ margin-top:26px; display:flex; justify-content:flex-end; }

  /* ---- generic page container ---- */
  .page{ max-width:1000px; margin:0 auto; padding:40px clamp(18px,4vw,32px) 80px; }
  .page-narrow{ max-width:640px; }

  /* ---- home ---- */
  #screen-home.active{ display:flex; align-items:center; justify-content:center; min-height:calc(100vh - 66px); }
  .page-home{ max-width:1360px; width:100%; padding:36px clamp(18px,4vw,40px); }
  .home-grid{ display:grid; grid-template-columns:1.2fr .8fr; gap:26px; align-items:stretch; }
  @media (max-width:900px){ .home-grid{ grid-template-columns:1fr; } }

  .online-pill{ display:flex; align-items:center; gap:8px; background:var(--card2); padding:9px 16px; border-radius:20px; font-size:13.5px; color:var(--muted); font-weight:600; border:1px solid var(--border); white-space:nowrap; }
  .dot-live{ width:7px; height:7px; border-radius:50%; background:var(--green); box-shadow:0 0 8px var(--green); }

  /* camera preview card */
  .home-cam-card{
    position:relative; width:100%; min-width:0; min-height:520px; height:100%;
    border-radius:24px; overflow:hidden; background:#0a1120; border:1px solid var(--border);
    display:flex; align-items:center; justify-content:center;
  }
  .home-cam-video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transform:scaleX(-1); display:none; }
  .home-cam-video.flipped{ transform:scaleX(1); }
  .home-cam-fallback{
    position:relative; width:100%; height:100%; display:flex; align-items:center; justify-content:center;
    background-image:repeating-linear-gradient(45deg, #131d33 0 2px, transparent 2px 9px);
  }
  .home-cam-fallback-label{ font-family:ui-monospace,Menlo,monospace; font-size:13px; letter-spacing:.08em; color:#5c728e; text-transform:uppercase; }
  .home-cam-badge{
    position:absolute; left:18px; top:18px; z-index:2; display:flex; align-items:center; gap:8px;
    padding:9px 15px; border-radius:999px; background:rgba(10,14,23,.72); backdrop-filter:blur(4px);
    font-size:13.5px; font-weight:600; color:#c4cbdb;
  }
  .home-cam-badge-dot{ width:7px; height:7px; border-radius:50%; background:var(--muted); flex-shrink:0; }
  .home-cam-controls{ position:absolute; right:18px; bottom:18px; z-index:2; display:flex; gap:10px; }
  .home-cam-btn{
    padding:10px 18px; border-radius:10px; background:rgba(10,14,23,.72); backdrop-filter:blur(4px);
    border:1px solid rgba(255,255,255,.12); font-size:14px; font-weight:600; color:#c4cbdb; cursor:pointer;
  }
  .home-cam-btn:hover{ border-color:rgba(255,255,255,.28); }
  .home-cam-btn.active-off{ color:var(--danger); border-color:rgba(255,84,112,.35); }

  /* info card */
  .home-info-card{
    border-radius:24px; background:var(--card); border:1px solid var(--border);
    padding:34px; display:flex; flex-direction:column; gap:30px; height:100%;
  }
  .home-info-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
  .greeting{ font-size:26px; font-weight:800; letter-spacing:-.01em; }
  .home-info-sub{ font-size:14.5px; color:var(--muted); margin-top:5px; }

  .home-field-group{ display:flex; flex-direction:column; gap:11px; }
  .home-field-group .field-label{ font-size:13px; }
  .home-match-row{
    display:flex; align-items:center; justify-content:space-between; gap:10px;
    padding:16px 18px; border-radius:14px; background:var(--bg2); border:1px solid var(--border);
    font-size:16px; font-weight:600; cursor:pointer; width:100%; text-align:left; color:var(--text); font-family:inherit;
  }
  .home-match-row:hover{ border-color:#2c3e5c; }
  .home-match-row .custom-select-arrow{ color:var(--muted); font-size:12px; }

  .home-interest-chips{ display:flex; flex-wrap:wrap; gap:9px; }
  .home-interest-chip{
    display:inline-flex; align-items:center; gap:7px; padding:10px 16px; border-radius:999px;
    background:var(--bg2); border:1px solid var(--border); font-size:14.5px; font-weight:600; color:var(--text); cursor:pointer;
  }
  .home-interest-chip:hover{ border-color:#2c3e5c; }
  .home-interest-chip .remove-x{ color:var(--muted); font-weight:800; }
  .home-interest-chip-add{
    display:inline-flex; align-items:center; gap:6px; padding:10px 17px; border-radius:999px;
    border:1px dashed var(--border); font-size:14.5px; font-weight:600; color:var(--muted); cursor:pointer; background:none;
  }
  .home-interest-chip-add:hover{ color:var(--text); border-color:#2c3e5c; }

  .home-stats-row{ display:flex; gap:14px; }
  .home-stat-card{ flex:1; background:var(--bg2); border:1px solid var(--border); border-radius:14px; padding:16px; text-align:center; }
  .home-stat-num{ font-size:20px; font-weight:800; }
  .home-stat-label{ font-size:11.5px; color:var(--muted); font-weight:600; margin-top:3px; }

  .home-start-wrap{ margin-top:auto; display:flex; flex-direction:column; gap:13px; }
  .home-start-btn{
    width:100%; padding:20px; border-radius:15px; border:none; background:var(--grad); color:#ffffff;
    font-size:18px; font-weight:800; letter-spacing:-.01em; text-align:center; cursor:pointer; font-family:inherit;
    box-shadow:0 16px 32px -12px rgba(37,99,235,.5);
  }
  .home-start-btn:hover{ filter:brightness(1.06); }
  .home-start-btn:active{ transform:scale(.98); }
  .home-start-btn.checking{ opacity:.7; pointer-events:none; }
  .home-start-caption{ font-size:13px; color:var(--muted); text-align:center; }
  .home-calls-left{ font-size:12.5px; color:var(--muted); text-align:center; }
  .home-calls-left.is-low{ color:#ffb020; }
  .home-calls-left.is-premium{ color:#3b5cf5; font-weight:700; }

  /* Deliberately gold/amber — the only warm color anywhere in this otherwise
     all-blue palette, on purpose, so "Go Premium" is never just another blue
     button blending into the rest of Home. Its own card, its own color. */
  .home-premium-banner{
    display:flex; align-items:center; gap:12px; width:100%; text-align:left;
    padding:14px 16px; border-radius:16px; border:none; cursor:pointer; font-family:inherit;
    background:linear-gradient(135deg,#f6c453,#f0a63d); color:#2a1a02;
    box-shadow:0 12px 26px -12px rgba(240,166,61,.6);
  }
  .home-premium-banner[hidden]{ display:none; }
  .home-premium-banner:hover{ filter:brightness(1.05); }

  /* Price + feature list inside the paywall modal, so someone sees exactly
     what they're paying for before startPremiumCheckout() sends them to
     Stripe's hosted checkout page. */
  .paywall-price{ margin:18px 0 4px; }
  .paywall-price-amount{ font-size:36px; font-weight:800; color:#f0a63d; }
  .paywall-price-period{ font-size:15px; font-weight:600; color:var(--muted); margin-left:2px; }
  .paywall-price-note{ font-size:12px; color:var(--muted); margin:6px 0 0; line-height:1.4; }
  .paywall-price-note[hidden]{ display:none; }
  .paywall-features{
    list-style:none; margin:14px 0 4px; padding:0; text-align:left;
    display:flex; flex-direction:column; gap:10px;
  }
  .paywall-features li{
    font-size:14px; color:var(--text); line-height:1.4; padding-left:26px; position:relative;
  }
  .paywall-features li::before{
    content:"✓"; position:absolute; left:0; top:0;
    color:#f0a63d; font-weight:800;
  }
  .home-premium-banner:active{ transform:scale(.98); }
  .home-premium-banner-icon{ font-size:22px; flex:0 0 auto; }
  .home-premium-banner-text{ flex:1; min-width:0; display:flex; flex-direction:column; gap:1px; }
  .home-premium-banner-title{ font-weight:800; font-size:14.5px; }
  .home-premium-banner-sub{ font-size:12px; opacity:.8; font-weight:600; }
  .home-premium-banner-arrow{ font-size:19px; opacity:.6; flex:0 0 auto; }

  /* ---- searching ---- */
  .search-card{
    max-width:460px; margin:60px auto; text-align:center; background:var(--card);
    border:1px solid var(--border); padding:40px 36px 44px; border-radius:28px;
  }

  /* Glowing "wavefront" progress pill — a rounded, bordered bar that fills
     left-to-right with a soft blue glow riding its leading edge. Used both
     for the simulated/demo match (a fixed timed fill, see startSearching())
     and the real matchmaking search (an indeterminate fill that eases
     toward ~94% and holds there until a real match actually arrives, see
     startSearchLoadingBar()/completeSearchLoadingBar() in app.js). */
  .load-pill{
    position:relative; width:100%; min-height:86px; margin-top:8px;
    border-radius:24px; background:#0b0f1e; border:1px solid var(--border);
    overflow:hidden; box-shadow:0 20px 40px -22px rgba(0,0,0,.7);
  }
  .load-pill-fill{
    position:absolute; inset:0; right:auto; width:0%;
    background:linear-gradient(90deg, #16264a 0%, #1d4ed8 55%, #5b9dff 85%, #eaf4ff 100%);
  }
  .load-pill-fill::before{
    /* a soft diagonal shimmer drifting across the filled area, for a bit of liquid motion */
    content:''; position:absolute; inset:0;
    background:repeating-linear-gradient(115deg, transparent 0 18px, rgba(255,255,255,.09) 18px 22px, transparent 22px 46px);
    background-size:260% 100%;
    animation:pill-shimmer 2.8s linear infinite;
    mix-blend-mode:overlay;
  }
  .load-pill-fill::after{
    /* glow bleeding from the leading edge out into the still-dark, unfilled area */
    content:''; position:absolute; top:-60%; bottom:-60%; right:-40px; width:110px;
    background:radial-gradient(closest-side, rgba(147,197,253,.85), rgba(59,130,246,.35) 55%, transparent 75%);
    filter:blur(16px); pointer-events:none;
  }
  @keyframes pill-shimmer{ 0%{ background-position:0% 0; } 100%{ background-position:-260% 0; } }

  .load-pill-content{
    position:relative; z-index:1; min-height:86px;
    display:flex; align-items:center; justify-content:space-between; gap:14px;
    padding:18px 24px;
  }
  .load-pill-text{ text-align:left; }
  .load-pill-title{ font-size:14px; font-weight:800; letter-spacing:.03em; text-transform:uppercase; }
  .load-pill-sub{ color:#c9d6ec; font-size:12.5px; margin-top:4px; min-height:16px; }
  .load-pill-pct{ font-size:26px; font-weight:800; letter-spacing:-.01em; white-space:nowrap; }

  /* ---- call ---- */
  .call-page{ max-width:1600px; margin:0 auto; padding:32px clamp(18px,4vw,32px) 60px; }
  .call-timer-bar{ display:flex; justify-content:center; margin-bottom:16px; }
  .call-card{
    position:relative; width:100%; aspect-ratio:1920/1080; max-height:calc(100vh - 220px); margin:0 auto;
    border-radius:26px; overflow:hidden; background:#000;
    border:1px solid var(--border);
    /* a tight contact shadow for lift, plus two soft color blooms echoing the
       site's own gradient — makes the card read as "live" instead of a flat
       dropped rectangle. call-card-glow below breathes it gently over time;
       kept subtle and slow so it adds life without being distracting. */
    box-shadow:
      0 40px 90px -30px rgba(0,0,0,.65),
      0 0 0 1px rgba(255,255,255,.05) inset,
      0 25px 70px -22px rgba(59,130,246,.35),
      0 12px 44px -16px rgba(79,109,245,.28);
    animation: call-card-glow 6s ease-in-out infinite;
  }
  @keyframes call-card-glow{
    0%,100%{ box-shadow:0 40px 90px -30px rgba(0,0,0,.65), 0 0 0 1px rgba(255,255,255,.05) inset, 0 25px 70px -22px rgba(59,130,246,.35), 0 12px 44px -16px rgba(79,109,245,.28); }
    50%{ box-shadow:0 40px 90px -30px rgba(0,0,0,.65), 0 0 0 1px rgba(255,255,255,.07) inset, 0 25px 80px -18px rgba(79,109,245,.42), 0 12px 50px -14px rgba(56,189,248,.32); }
  }
  /* a soft diagonal sheen across the top of the card, like light catching
     glass — sits above the video panes but below every interactive overlay
     (top bar/pillbar/info card/intro/decision all declare higher z-indexes) */
  .call-card::after{
    content:''; position:absolute; inset:0; z-index:4; pointer-events:none;
    background:linear-gradient(180deg, rgba(255,255,255,.09) 0%, rgba(255,255,255,0) 20%);
  }
  .call-video-split{ position:absolute; inset:0; display:flex; }
  /* the seam between the two camera feeds — drawn as one centered line on the
     split container rather than a border on a single pane, so it reads as a
     deliberate divider instead of a faint edge that gets lost against video.
     Shared with .chat-video-split below; the ≤760px media query further down
     flips this one from a vertical to a horizontal seam to match the stacked
     layout on small screens. */
  .call-video-split::after,
  .chat-video-split::after{
    content:'';
    position:absolute; top:0; bottom:0; left:50%; width:2px; margin-left:-1px;
    background:linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.65) 12%, rgba(255,255,255,.65) 88%, rgba(255,255,255,0) 100%);
    box-shadow:0 0 10px rgba(255,255,255,.3);
    z-index:9; pointer-events:none;
  }
  .video-pane{ position:relative; flex:1 1 50%; width:50%; overflow:hidden; display:flex; align-items:center; justify-content:center; background:#0e0e17; }
  /* a soft vignette pulling focus toward the center of each tile — sits above
     the avatar fallback (z-index 2) so it darkens that too, but below the
     real video track (z-index 5) where it just adds a gentle cinematic edge */
  .video-pane::before{
    content:''; position:absolute; inset:0; z-index:3; pointer-events:none;
    background:radial-gradient(120% 120% at 50% 42%, transparent 45%, rgba(0,0,0,.4) 100%);
  }
  .call-video-bg{ position:absolute; inset:0; background-size:200% 200%; animation:gradient-shift 8s ease infinite; }
  @keyframes gradient-shift{ 0%{ background-position:0% 50%;} 50%{ background-position:100% 50%;} 100%{ background-position:0% 50%;} }
  .partner-avatar-big{ font-size:96px; z-index:2; filter:drop-shadow(0 10px 20px rgba(0,0,0,.35)); animation:breathe 3.2s ease-in-out infinite; }
  @keyframes breathe{ 0%,100%{ transform:scale(1);} 50%{ transform:scale(1.05);} }
  /* only populated during a real match's call (see realcall.js) — sits above the gradient/avatar fallback */
  .partner-pane video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:5; }

  .self-pane{ background:#15151f; }
  .self-pane video{ width:100%; height:100%; object-fit:cover; transform:scaleX(-1); }
  .self-pane .fallback{ font-size:88px; }

  .pane-label{ position:absolute; top:82px; left:14px; z-index:10; background:#00000070; padding:8px 14px; border-radius:14px; font-weight:700; font-size:14px; }

  /* shown on your own video tile whenever your mic is muted — this is what the other person sees too */
  .mute-indicator{
    position:absolute; right:14px; bottom:14px; z-index:11;
    width:38px; height:38px; border-radius:50%; background:#ff3b3be6; color:#ffffff;
    display:flex; align-items:center; justify-content:center; font-size:17px;
    box-shadow:0 6px 16px rgba(0,0,0,.4); border:2px solid #ffffff35;
    animation:mute-indicator-pop .2s cubic-bezier(.2,.9,.3,1.3);
  }
  @keyframes mute-indicator-pop{ from{ transform:scale(.6); opacity:0; } to{ transform:scale(1); opacity:1; } }
  /* a soft expanding ring so a muted mic reads as an active state, not just a static badge */
  .mute-indicator::after{
    content:''; position:absolute; inset:-6px; border-radius:50%;
    border:2px solid rgba(255,59,59,.55); animation:mute-ring-pulse 1.8s ease-out infinite;
  }
  @keyframes mute-ring-pulse{ 0%{ transform:scale(.82); opacity:.85; } 100%{ transform:scale(1.4); opacity:0; } }

  .call-top-bar{ position:absolute; top:18px; left:18px; right:18px; display:flex; align-items:center; justify-content:space-between; z-index:20; }
  /* the brand mark, floating over the video — email-logo.png is already the
     plain-white cutout of the navbar clock icon (see email-templates/), which
     is exactly what reads cleanly over an arbitrary, ever-changing video
     background. Kept small and softly dimmed so it never competes with the
     partner's video or the controls; the drop-shadow is what keeps it visible
     over light backgrounds instead of just the default dark gradient. */
  .call-logo{
    height:22px; width:auto; display:block;
    opacity:.85; filter:drop-shadow(0 2px 6px rgba(0,0,0,.5));
    pointer-events:none; user-select:none;
  }
  /* Same glowing wavefront pill as the search screen's .load-pill (see
     styles.css's "searching" section) — .load-pill-fill is reused directly
     here as the countdown's fill, its width driven by elapsed call time
     (see updateCallTimerDisplay() in app.js). Fills up to 100% right as the
     minute runs out, switching to a red glow for the last 10 seconds via
     the .warn variant below instead of blue. */
  .call-timer{
    position:relative; overflow:hidden;
    background:linear-gradient(180deg, rgba(23,30,52,.92), rgba(11,15,30,.96));
    padding:10px 26px; border-radius:999px;
    font-size:26px; font-weight:800; letter-spacing:.02em;
    box-shadow:0 10px 26px -8px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.06) inset, 0 0 22px -6px rgba(59,130,246,.5);
    border:1px solid rgba(255,255,255,.1); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
    font-variant-numeric:tabular-nums;
    transition:border-color .2s ease, box-shadow .2s ease;
  }
  .call-timer-content{ position:relative; z-index:1; display:flex; align-items:center; gap:10px; }
  /* the timer badge is much smaller than the search screen's pill — scale the glow down to match */
  .call-timer .load-pill-fill::after{ top:-40%; bottom:-40%; right:-16px; width:46px; filter:blur(10px); }
  /* ticks once a second (see updateCallTimerDisplay()) — ease each step so the fill reads as continuous motion rather than a jump */
  .call-timer .load-pill-fill{ transition:width 1s linear; }
  .live-dot{ width:9px; height:9px; border-radius:50%; background:#ff3b3b; animation:blink 1.2s infinite; }
  @keyframes blink{ 50%{ opacity:.2;} }
  .call-close{
    background:rgba(0,0,0,.45); width:34px; height:34px; border-radius:50%;
    display:flex; align-items:center; justify-content:center; font-size:14px; cursor:pointer; z-index:21;
    border:1px solid rgba(255,255,255,.14); box-shadow:0 6px 16px rgba(0,0,0,.35); backdrop-filter:blur(8px);
    transition:background .15s ease, transform .15s ease;
  }
  .call-close:hover{ background:rgba(0,0,0,.7); transform:scale(1.06); }
  .call-close:active{ transform:scale(.94); }

  /* a floating glass chip instead of the old bottom-fading gradient scrim —
     reads as a considered UI element rather than a darkened strip of video */
  .partner-info-card{
    position:absolute; bottom:14px; left:14px; z-index:10;
    background:rgba(10,14,26,.55); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
    border:1px solid rgba(255,255,255,.14); border-radius:18px;
    padding:10px 16px; box-shadow:0 10px 24px -8px rgba(0,0,0,.45);
    max-width:calc(100% - 28px);
  }
  .partner-name-row{ display:flex; align-items:baseline; font-size:19px; font-weight:800; }
  .partner-name-row .flag{ font-size:16px; margin-left:7px; }
  .shared-tag{
    display:inline-flex; align-items:center; gap:6px;
    background:linear-gradient(135deg, rgba(59,130,246,.4), rgba(79,109,245,.4));
    border:1px solid rgba(255,255,255,.18);
    padding:4px 10px; border-radius:999px; font-size:12px; font-weight:700; margin-top:6px;
  }

  .call-timer.warn{ border-color:rgba(255,59,59,.65); box-shadow:0 10px 26px -8px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.06) inset, 0 0 26px -4px rgba(255,59,59,.65); }
  .call-timer.warn #callTimer{ color:#ffb0b0; animation:timer-pulse .6s ease-in-out infinite; }
  .call-timer.warn .load-pill-fill{
    background:linear-gradient(90deg, #451414 0%, #dc2626 55%, #ff6b6b 85%, #ffe3e3 100%);
  }
  .call-timer.warn .load-pill-fill::after{
    background:radial-gradient(closest-side, rgba(255,180,180,.9), rgba(220,38,38,.4) 55%, transparent 75%);
  }
  @keyframes timer-pulse{ 0%,100%{ opacity:1;} 50%{ opacity:.55;} }

  .call-intro-banner{
    position:absolute; inset:0; z-index:35; display:flex; align-items:center; justify-content:center;
    background:#00000055; opacity:0; pointer-events:none; transition:opacity .5s ease;
  }
  .call-intro-banner.show{ opacity:1; }
  .call-intro-inner{
    background:linear-gradient(180deg, rgba(22,26,44,.96), rgba(10,10,20,.97));
    border:1px solid rgba(255,255,255,.2); border-radius:22px; padding:32px 40px;
    text-align:center; max-width:380px; backdrop-filter:blur(10px);
    box-shadow:0 30px 70px -20px rgba(0,0,0,.7), 0 0 40px -10px rgba(59,130,246,.4);
    animation:intro-pop .5s cubic-bezier(.2,.9,.3,1.3);
  }
  @keyframes intro-pop{ from{ transform:scale(.85); opacity:0; } to{ transform:scale(1); opacity:1; } }
  .call-intro-clock{ font-size:34px; margin-bottom:10px; display:inline-block; animation:intro-clock-tick 1.6s ease-in-out infinite; }
  @keyframes intro-clock-tick{ 0%,100%{ transform:rotate(-8deg);} 50%{ transform:rotate(8deg);} }
  .call-intro-title{ font-size:19px; font-weight:700; line-height:1.4; }
  .call-intro-title span{ background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; font-weight:800; }
  .call-intro-sub{ color:var(--muted); font-size:13.5px; margin-top:10px; }

  .call-decision{
    position:absolute; inset:0; z-index:40; background:#0b0b14ee; backdrop-filter:blur(6px);
    display:flex; align-items:center; justify-content:center; opacity:0; pointer-events:none; transition:opacity .3s ease;
  }
  .call-decision.show{ opacity:1; pointer-events:auto; }
  .decision-inner{ text-align:center; max-width:380px; padding:20px; }
  .decision-inner h2{ font-size:24px; margin:18px 0 8px; font-weight:800; }
  .decision-inner p{ color:var(--muted); font-size:14.5px; margin:0 0 26px; line-height:1.5; }
  .decision-avatars{ display:flex; align-items:center; justify-content:center; }
  .decision-avatars .da{
    width:64px; height:64px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:28px;
    border:3px solid var(--bg); box-shadow:0 0 0 2px rgba(255,255,255,.14), 0 10px 24px -6px rgba(0,0,0,.5);
  }
  .decision-avatars .da:first-child{ margin-right:-16px; z-index:1; }
  .decision-actions{ display:flex; gap:12px; justify-content:center; }
  .decision-btn{ border:none; border-radius:14px; padding:14px 20px; font-size:14.5px; font-weight:700; cursor:pointer; transition:filter .15s ease, transform .15s ease, box-shadow .15s ease; }
  .decision-btn.interested{ background:var(--grad); color:#ffffff; box-shadow:0 10px 26px -8px rgba(59,130,246,.6); }
  .decision-btn.not-interested{ background:rgba(255,255,255,.1); color:var(--text); border:1px solid rgba(255,255,255,.14); }
  .decision-btn:hover{ filter:brightness(1.08); transform:translateY(-2px); }
  .decision-btn:active{ transform:scale(.97); }
  .decision-spinner{ width:34px; height:34px; border-radius:50%; border:3px solid #ffffff30; border-top-color:var(--pink); margin:0 auto; animation:spin .8s linear infinite; }
  @keyframes spin{ to{ transform:rotate(360deg); } }
  /* Report / Mute / Next float as their own clean pills over the bottom of the call video */
  .call-pillbar{
    position:absolute; left:50%; bottom:22px; transform:translateX(-50%);
    display:flex; align-items:center; gap:12px; z-index:15; transition:opacity .2s ease;
  }
  .call-pill{
    display:flex; align-items:center; gap:8px; border:1px solid rgba(255,255,255,.18); border-radius:999px;
    background:rgba(0,0,0,.5); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
    color:#ffffff; font-family:inherit; font-size:12.5px; font-weight:700;
    padding:12px 20px; cursor:pointer; white-space:nowrap;
    box-shadow:0 8px 20px -8px rgba(0,0,0,.5), 0 1px 0 rgba(255,255,255,.12) inset;
    transition:background .15s ease, border-color .15s ease, transform .15s ease, box-shadow .15s ease;
  }
  .call-pill:hover{ background:rgba(0,0,0,.68); transform:translateY(-2px); box-shadow:0 12px 26px -10px rgba(0,0,0,.6), 0 1px 0 rgba(255,255,255,.14) inset; }
  .call-pill:active{ transform:scale(.96) translateY(0); }
  .call-pill .ti{ font-size:16px; line-height:1; display:flex; filter:drop-shadow(0 2px 4px rgba(0,0,0,.4)); }
  .call-pill-mic.off{ background:rgba(255,59,59,.3); border-color:rgba(255,59,59,.6); }
  /* the primary "move on" action gets its own gradient + a slow pulsing glow
     so it draws the eye as the pill worth noticing among the three */
  .call-pill-next{
    background:var(--grad); border-color:transparent;
    box-shadow:0 8px 24px -6px rgba(59,130,246,.6), 0 1px 0 rgba(255,255,255,.25) inset;
    animation:next-pill-pulse 2.4s ease-in-out infinite;
  }
  .call-pill-next:hover{ box-shadow:0 12px 30px -6px rgba(59,130,246,.8), 0 1px 0 rgba(255,255,255,.3) inset; }
  @keyframes next-pill-pulse{
    0%,100%{ box-shadow:0 8px 24px -6px rgba(59,130,246,.6), 0 1px 0 rgba(255,255,255,.25) inset; }
    50%{ box-shadow:0 8px 30px -4px rgba(59,130,246,.85), 0 1px 0 rgba(255,255,255,.3) inset; }
  }
  .call-pill-next.locked{ background:rgba(0,0,0,.5); border-color:rgba(255,255,255,.18); color:rgba(255,255,255,.65); cursor:not-allowed; animation:none; box-shadow:0 8px 20px -8px rgba(0,0,0,.5); }
  .call-pill-next.locked:hover{ background:rgba(0,0,0,.5); transform:none; box-shadow:0 8px 20px -8px rgba(0,0,0,.5); }
  .toolbar-btn{
    display:flex; flex-direction:column; align-items:center; gap:7px; background:none; border:none;
    cursor:pointer; color:var(--muted); font-size:11.5px; font-weight:700; padding:6px 16px; border-radius:16px;
  }
  .toolbar-btn:hover{ background:var(--bg2); color:var(--text); }
  .toolbar-btn .ti{ width:46px; height:46px; border-radius:50%; background:var(--bg2); display:flex; align-items:center; justify-content:center; font-size:19px; transition:background .15s ease; }
  .toolbar-btn.active-toggle.on .ti{ background:#ffffff14; }
  .toolbar-btn.active-toggle.off .ti{ background:#ff3b3b30; }
  .toolbar-btn.leave{ color:#ff8080; }
  .toolbar-btn.leave .ti{ font-size:16px; }

  .toast{
    position:absolute; top:70px; left:50%; transform:translateX(-50%) translateY(-10px);
    background:#000000cc; color:#fff; padding:10px 18px; border-radius:14px; font-size:13.5px; font-weight:600;
    z-index:60; opacity:0; pointer-events:none; transition:all .25s ease; white-space:nowrap;
  }
  .toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }

  /* ---- match overlay ---- */
  .overlay{
    position:fixed; inset:0; z-index:300; background:#000000d0; backdrop-filter:blur(4px);
    display:flex; align-items:center; justify-content:center; flex-direction:column; text-align:center; padding:40px 30px;
    opacity:0; pointer-events:none; transition:opacity .3s ease;
  }
  .overlay.show{ opacity:1; pointer-events:auto; }
  .overlay-card{ background:var(--card); border:1px solid var(--border); border-radius:28px; padding:48px 46px; max-width:420px; width:100%; position:relative; }
  .match-avatars{ display:flex; align-items:center; justify-content:center; margin-bottom:22px; }
  .match-avatars .ma{ width:78px; height:78px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:34px; border:3px solid var(--card); }
  .match-avatars .ma:first-child{ margin-right:-18px; z-index:1; }
  .match-title{ font-size:26px; font-weight:800; margin-bottom:8px; background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
  .match-sub{ color:var(--muted); font-size:14.5px; margin-bottom:30px; }
  .match-actions{ display:flex; flex-direction:column; gap:10px; }
  /* incoming match-call overlay only ever shows one avatar, so undo the two-avatar overlap trick */
  #incomingMatchCallOverlay .match-avatars .ma:first-child{ margin-right:0; }
  .confetti{ position:absolute; inset:0; overflow:hidden; pointer-events:none; border-radius:28px; }
  .confetti span{ position:absolute; top:-10px; font-size:16px; animation:fall linear forwards; }
  @keyframes fall{ to{ transform:translateY(480px) rotate(360deg); opacity:.2; } }

  /* ---- matches + chat (sidebar layout) ---- */
  .matches-layout{
    display:flex; background:var(--card); border:1px solid var(--border); border-radius:24px;
    overflow:hidden; min-height:600px;
  }
  .matches-sidebar{ width:320px; flex-shrink:0; border-right:1px solid var(--border); display:flex; flex-direction:column; }
  .matches-sidebar-head{ padding:20px 20px 12px; }
  .matches-sidebar-list{ flex:1; overflow-y:auto; padding:6px 10px 16px; }
  .list-row{ display:flex; align-items:center; gap:12px; padding:12px 10px; border-radius:14px; cursor:pointer; }
  .list-row:hover{ background:var(--bg2); }
  .list-row.selected{ background:#26263a; }
  .list-avatar{ width:46px; height:46px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:21px; flex-shrink:0; }
  .list-main{ flex:1; min-width:0; }
  .list-name-row{ display:flex; justify-content:space-between; align-items:baseline; }
  .list-name{ font-weight:700; font-size:14.5px; }
  .list-time{ color:var(--muted); font-size:11px; }
  .list-preview{ color:var(--muted); font-size:12.5px; margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

  .matches-conversation{ flex:1; display:flex; flex-direction:column; min-width:0; }
  .conversation-empty{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:14px; padding:0 30px; color:var(--muted); }
  .conversation-empty .e{ font-size:44px; }
  .conversation-active{ flex:1; display:none; flex-direction:column; min-height:0; }
  .conversation-active.show{ display:flex; }
  .chat-header{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px 22px; border-bottom:1px solid var(--border); }
  .chat-header-info{ display:flex; align-items:center; gap:12px; min-width:0; }
  .chat-header .list-avatar{ width:38px; height:38px; font-size:18px; }
  .chat-header .name{ font-weight:700; font-size:15px; }
  .chat-header .status{ color:var(--green); font-size:11.5px; font-weight:600; }
  .chat-header .status.offline{ color:var(--muted); }
  .chat-video-btn{
    display:flex; align-items:center; gap:7px; padding:9px 16px; border-radius:10px; border:none;
    background:var(--grad); color:#ffffff; font-size:13.5px; font-weight:700; cursor:pointer;
    font-family:inherit; flex-shrink:0;
  }
  .chat-video-btn:hover{ filter:brightness(1.06); }
  .chat-video-btn.checking{ opacity:.7; pointer-events:none; }
  .chat-video-btn.in-call{ background:#ff3b3b; }
  .chat-video-btn.ringing{ background:var(--card2); color:var(--text); opacity:.85; }
  .chat-messages{ flex:1; overflow-y:auto; padding:20px 22px; display:flex; flex-direction:column; gap:10px; }
  /* "calling…" screen shown while waiting for the match to accept, before the video call connects */
  .chat-ringing-panel{
    display:none; flex:1; min-height:0; flex-direction:column; align-items:center; justify-content:center; gap:6px;
    background:#0e0e17; text-align:center; padding:20px;
  }
  .chat-ringing-panel.show{ display:flex; }
  .ringing-avatar-wrap{ position:relative; width:110px; height:110px; display:flex; align-items:center; justify-content:center; margin-bottom:18px; }
  .ringing-avatar{ position:relative; z-index:2; width:88px; height:88px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:38px; }
  .ringing-pulse{
    position:absolute; inset:0; border-radius:50%; background:var(--grad); opacity:.5;
    animation:ringing-pulse-anim 1.8s ease-out infinite;
  }
  .ringing-pulse.delay{ animation-delay:.9s; }
  @keyframes ringing-pulse-anim{ 0%{ transform:scale(.8); opacity:.55; } 100%{ transform:scale(1.7); opacity:0; } }
  .ringing-title{ font-size:18px; font-weight:700; color:var(--text); }
  .ringing-sub{ font-size:13.5px; color:var(--muted); margin-bottom:14px; }
  .ringing-cancel-btn{
    border:none; border-radius:12px; padding:11px 24px; font-size:13.5px; font-weight:700; cursor:pointer;
    background:#ffffff18; color:var(--text); font-family:inherit;
  }
  .ringing-cancel-btn:hover{ background:#ffffff28; }
  /* inline, unlimited-time video call that takes over the message area for an existing match —
     laid out like the main call screen: two 1920x1080 panes side by side, partner on the left, you on the right */
  .chat-video-panel{ display:none; flex:1; min-height:0; flex-direction:column; align-items:stretch; justify-content:center; background:#0e0e17; padding:16px 16px 0; }
  .chat-video-panel.show{ display:flex; }
  .chat-video-res-note{ text-align:center; color:var(--muted); font-size:11px; margin-bottom:10px; letter-spacing:.04em; text-transform:uppercase; }
  .chat-video-split{
    position:relative; width:100%; aspect-ratio:1920/1080; max-height:100%; margin:0 auto;
    border-radius:18px; overflow:hidden; background:#000; display:flex; border:1px solid var(--border);
  }
  .chat-video-pane{ position:relative; flex:1 1 50%; width:50%; overflow:hidden; display:flex; align-items:center; justify-content:center; background:#0e0e17; }
  .chat-video-bg{ position:absolute; inset:0; background-size:200% 200%; animation:gradient-shift 8s ease infinite; }
  .chat-video-partner-avatar{ position:relative; z-index:2; font-size:min(11vw,72px); filter:drop-shadow(0 10px 20px rgba(0,0,0,.35)); animation:breathe 3.2s ease-in-out infinite; }
  .chat-video-partner-pane video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:5; }
  .chat-video-live-badge{
    position:absolute; top:12px; left:12px; z-index:3; display:flex; align-items:center; gap:7px;
    background:#00000070; color:#ffffff; padding:6px 12px; border-radius:14px; font-weight:700; font-size:11.5px;
  }
  .chat-video-pane-label{ position:absolute; bottom:12px; left:12px; z-index:10; background:#00000070; padding:6px 12px; border-radius:12px; font-weight:700; font-size:12.5px; }
  .chat-video-self-pane{ background:#15151f; }
  .chat-video-self-pane video{ width:100%; height:100%; object-fit:cover; transform:scaleX(-1); }
  .chat-video-self-pane video.flipped{ transform:scaleX(1); }
  .chat-video-self-pane .fallback{ font-size:min(10vw,64px); }
  .chat-video-controls{
    display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:wrap;
    padding:14px 18px; margin-top:14px; background:var(--card); border-top:1px solid var(--border); border-radius:16px 16px 0 0;
  }
  /* fullscreen mode — the video panel itself becomes the fullscreen element, so it just gets more room to breathe */
  .chat-video-panel:fullscreen{ width:100vw; height:100vh; padding:28px; background:#000; }
  .chat-video-panel:fullscreen .chat-video-split{ max-height:calc(100vh - 150px); }
  .chat-video-panel:fullscreen .chat-video-partner-avatar{ font-size:min(14vw,180px); }
  .chat-video-panel:fullscreen .chat-video-self-pane .fallback{ font-size:min(12vw,130px); }
  .chat-video-panel:fullscreen .chat-video-controls{ background:var(--card); border-radius:16px; margin-top:20px; }
  .msg{ max-width:65%; padding:11px 14px; border-radius:16px; font-size:14.5px; line-height:1.4; }
  .msg.them{ background:var(--bg2); align-self:flex-start; border-bottom-left-radius:4px; }
  .msg.me{ background:var(--grad); color:#ffffff; align-self:flex-end; border-bottom-right-radius:4px; font-weight:600; }
  .msg-seen{ align-self:flex-end; color:var(--muted); font-size:11.5px; margin-top:-4px; padding-right:4px; }
  .typing-indicator{ align-self:flex-start; background:var(--bg2); padding:11px 16px; border-radius:16px; border-bottom-left-radius:4px; display:flex; gap:4px; }
  .typing-indicator span{ width:6px; height:6px; border-radius:50%; background:var(--muted); animation:typing-bounce 1s infinite; }
  .typing-indicator span:nth-child(2){ animation-delay:.15s; }
  .typing-indicator span:nth-child(3){ animation-delay:.3s; }
  @keyframes typing-bounce{ 0%,60%,100%{ transform:translateY(0);} 30%{ transform:translateY(-5px);} }
  .chat-input-row{ display:flex; gap:10px; padding:16px 20px; border-top:1px solid var(--border); align-items:center; }
  .chat-input-row input{ flex:1; border-radius:24px; padding:12px 16px; }
  .send-btn{ width:44px; height:44px; border-radius:50%; background:var(--grad); border:none; color:#ffffff; font-size:17px; cursor:pointer; flex-shrink:0; }
  .send-btn:hover{ filter:brightness(1.05); }

  /* ---- profile ---- */
  .profile-head{ display:flex; flex-direction:column; align-items:center; gap:10px; padding-top:6px; }
  .profile-avatar{ width:92px; height:92px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:42px; }
  .profile-name{ font-size:21px; font-weight:800; }
  .profile-sub{ color:var(--muted); font-size:13.5px; }
  .profile-intent-badge{ display:inline-flex; align-items:center; gap:6px; background:var(--card2); border:1px solid var(--border); border-radius:999px; padding:6px 14px; font-size:13px; font-weight:600; margin-top:4px; }
  .profile-bio{ color:var(--text); font-size:14.5px; line-height:1.5; background:var(--card); border:1px solid var(--border); border-radius:16px; padding:14px 16px; margin:18px 0 0; }
  .profile-bio-empty{ color:var(--muted); font-style:italic; }
  .stats-row{ display:flex; gap:12px; margin:26px 0 8px; }
  .stat-card{ flex:1; background:var(--card); border:1px solid var(--border); border-radius:16px; padding:16px 8px; text-align:center; }
  .stat-num{ font-size:20px; font-weight:800; }
  .stat-label{ color:var(--muted); font-size:11px; margin-top:2px; }
  .settings-list{ margin-top:12px; display:flex; flex-direction:column; gap:9px; }
  .settings-row{ display:flex; align-items:center; justify-content:space-between; background:var(--card); border:1px solid var(--border); padding:16px 18px; border-radius:14px; cursor:pointer; font-size:14.5px; font-weight:600; }
  .settings-row:hover{ border-color:#3a3a55; }
  .settings-row .arrow{ color:var(--muted); }
  .settings-row-danger{ background:#ff3b3b1a; border-color:#ff3b3b40; color:var(--danger); }
  .settings-row-danger:hover{ background:#ff3b3b2a; border-color:#ff3b3b70; }
  .settings-row-danger .arrow{ color:var(--danger); opacity:.7; }

  /* ---- info modal ---- */
  .info-modal-overlay{
    position:fixed; inset:0; z-index:300; background:#000000c8; backdrop-filter:blur(3px);
    display:flex; align-items:center; justify-content:center; padding:24px;
    opacity:0; pointer-events:none; transition:opacity .25s ease;
  }
  .info-modal-overlay.show{ opacity:1; pointer-events:auto; }
  .info-modal{ background:var(--card); border:1px solid var(--border); border-radius:24px; max-width:520px; width:100%; max-height:80vh; overflow-y:auto; padding:36px 38px; }
  .info-modal .close-x{ float:right; cursor:pointer; color:var(--muted); font-size:20px; }
  .camera-modal-icon{ font-size:44px; margin-bottom:6px; }

  /* Same gold accent as the Home premium banner, so the two visually agree —
     this is the one moment we actually want to feel celebratory. */
  .premium-success-modal{
    border-color:rgba(240,166,61,.5);
    box-shadow:0 24px 70px -24px rgba(240,166,61,.45);
  }
  .premium-success-modal .camera-modal-icon{
    width:72px; height:72px; line-height:72px; margin:0 auto 14px;
    border-radius:50%; background:linear-gradient(135deg,#f6c453,#f0a63d);
    box-shadow:0 12px 26px -10px rgba(240,166,61,.6);
  }

  @media (max-width:760px){
    .matches-layout{ flex-direction:column; min-height:0; }
    .matches-sidebar{ width:100%; border-right:none; border-bottom:1px solid var(--border); max-height:280px; }
    .conversation-active{ min-height:420px; }

    /* Video call card: a fixed 640px was taller than most phones' whole
       viewport once the page padding and timer bar are added on top, which
       is what pushed the "1 minute" intro banner down into the report/mute/
       next controls. Sized off the real viewport instead (dvh accounts for
       the browser's address bar; the plain vh line right before it is the
       fallback for engines that don't support dvh yet), and capped so it
       doesn't grow oddly tall on a long phone either. */
    .call-page{ padding:16px 14px 28px; }
    .call-timer-bar{ margin-bottom:12px; }
    .call-card{ aspect-ratio:auto; height:calc(100vh - 130px); height:calc(100dvh - 130px); max-height:600px; min-height:420px; }
    /* the breathing glow looks great with room around the card on desktop,
       but on a phone the card runs edge-to-edge and the animation is just
       spent battery for a glow nobody can see past the screen edge —
       trade it for one fixed (still colorful) shadow instead */
    .call-card{ animation:none; box-shadow:0 30px 60px -24px rgba(0,0,0,.65), 0 0 0 1px rgba(255,255,255,.05) inset, 0 16px 40px -18px rgba(59,130,246,.35); }
    .call-timer{ font-size:21px; padding:8px 20px; }
    .call-logo{ height:17px; }
    .call-video-split{ flex-direction:column; }
    .video-pane{ width:100%; flex:1 1 50%; }
    .call-video-split::after{
      top:50%; bottom:auto; left:0; right:0; width:auto; height:2px; margin-left:0; margin-top:-1px;
      background:linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.65) 12%, rgba(255,255,255,.65) 88%, rgba(255,255,255,0) 100%);
    }
    /* was inset:0 (full card) — on a short card that put its centered text
       right on top of the pillbar below; this keeps it clear of that strip */
    .call-intro-banner{ inset:0 0 78px 0; }
    .call-intro-inner{ padding:26px 26px; }
    .call-pillbar{ gap:6px; bottom:14px; max-width:calc(100% - 20px); }
    .call-pill{ padding:10px 13px; font-size:11.5px; gap:5px; }
    .call-pill .ti{ font-size:14px; }

    /* .partner-info-card (the name/flag label) is a sibling of .call-video-split,
       not nested inside .partner-pane, so its "bottom:14px" anchors to the whole
       card. That's harmless on desktop where both panes span the full card height,
       but once the panes stack vertically above, "bottom of card" lands in the
       SELF pane instead of the partner pane, overlapping the pillbar. Anchor it
       to the seam between the two stacked panes instead, so it stays pinned to
       the bottom of the (top) partner pane. */
    .partner-info-card{ top:auto; bottom:calc(50% + 8px); left:10px; padding:8px 12px; border-radius:14px; }
    .partner-name-row{ font-size:16px; }
    .shared-tag{ font-size:11px; padding:3px 9px; }

    /* Onboarding: 60px of top/bottom padding was pushing the actual form
       (and on longer ones like the interests grid, the Continue button
       entirely) below the fold on a phone-height screen. */
    .onboard-shell{ min-height:100vh; min-height:100dvh; padding:24px 16px; }
    .onboard-card{ padding:30px 22px; }
    /* a right-aligned "Continue" floating in an otherwise-empty row reads
       as a desktop leftover on a narrow screen — full-width is the
       standard mobile pattern and gives it a much bigger, easier tap target */
    .onboard-actions .btn{ width:100%; }

    /* Top nav: brand + 3 labeled links + name chip never fit a phone's
       width — Home/Matches/Profile drop to icon-only (their badge and
       active-state still show) and the name next to your avatar hides,
       since tapping the avatar already opens your profile. */
    .topnav{ padding:0 12px; }
    .brand{ font-size:15px; gap:7px; }
    .topnav-links{ gap:2px; }
    .nav-link{ padding:9px 10px; font-size:13px; gap:0; }
    .nav-label{ display:none; }
    .user-chip{ gap:0; }
    .user-chip .uname{ display:none; }
  }

/* ============================================================================
   Native-app polish
   ----------------------------------------------------------------------------
   Everything below only applies once capacitor-bridge.js adds "native-app"
   to <html> — which only happens inside the wrapped Android app. None of
   this touches the regular website. It removes the things that make a
   WebView feel like "a webpage in a box" instead of an app: the blue/gray
   tap-flash on buttons and links, pull-to-refresh and rubber-band overscroll,
   the visible scrollbar, and the long-press text-selection/"save image"
   popup on anything that isn't an actual text input.
   ============================================================================ */
html.native-app{
  overscroll-behavior: none; /* kills pull-to-refresh + rubber-band bounce */
}
html.native-app body{
  overscroll-behavior: none;
}
html.native-app *{
  -webkit-tap-highlight-color: transparent; /* kills the flash on tap */
}
html.native-app ::-webkit-scrollbar{
  display: none; /* app UIs don't show scrollbars */
}
html.native-app button,
html.native-app .btn,
html.native-app .nav-link,
html.native-app a,
html.native-app .chip{
  -webkit-touch-callout: none; /* no "save image" / selection popup on long-press */
  -webkit-user-select: none;
  user-select: none;
}
/* text you're actually meant to select/edit stays selectable */
html.native-app input,
html.native-app textarea,
html.native-app [contenteditable="true"]{
  -webkit-user-select: text;
  user-select: text;
}