/* ═══════════════════════════════════════════════════════════════════════════
   YAAD ADZ v3.0 — "LAGOON" LIQUID GLASS
   ───────────────────────────────────────────────────────────────────────────
   A pure-CSS layer loaded AFTER style.css (see the <link> in index.html).
   It restyles materials, shapes and motion only — no markup is required for
   it to work and no application behaviour is touched.

   ROLLBACK: delete the one <link rel="stylesheet" href="v3-glass.css"> line
   in index.html (and bump CACHE_VERSION in sw.js). Nothing else depends on it.

   Design language (from the approved Lagoon mockups)
     · sunset-lagoon backdrop — sky, low sun, mountain silhouettes
     · capsule shapes — chips, search, buttons are fully round
     · rim light — a bright top-left edge that fades to the bottom-right
     · spring physics — controls lift on hover and compress on press
     · one gold accent (the brand gold), used sparingly for price and action

   Safety rails kept from the existing system
     · per-card backdrop blur stays at the 12px mobile budget (§PERF)
     · prefers-reduced-motion  → no movement
     · prefers-reduced-transparency → opaque surfaces, no sheen
     · forced-colors → every decorative layer is dropped
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --v3-spring: cubic-bezier(.34, 1.56, .64, 1);
  --v3-settle: cubic-bezier(.16, 1, .3, 1);
  --v3-gold-a: #fff0b8;
  --v3-gold-b: #ffd45c;
  --v3-gold-c: #f4c300;
  --v3-gold-grad: linear-gradient(145deg, #fff0b8 0%, #ffd45c 52%, #f4c300 100%);
  --v3-gold-glow: 0 10px 26px rgba(244, 195, 0, .34);
  --v3-rim-lit: rgba(255, 255, 255, .62);
  --v3-rim-dim: rgba(255, 255, 255, .12);
  --v3-fill: linear-gradient(145deg, rgba(255, 255, 255, .24), rgba(255, 255, 255, .06) 55%, rgba(255, 255, 255, .13));
  --v3-tint: rgba(6, 34, 30, .34);
  --v3-shadow: 0 18px 40px rgba(2, 20, 18, .34);
  /* Shared rim-light stack: lit top edge, soft inner glow, occluded bottom. */
  --v3-rim:
    inset 0 1px 1px var(--v3-rim-lit),
    inset 0 -1px 2px var(--v3-rim-dim),
    inset 0 0 22px rgba(255, 255, 255, .06);
}

/* ── 1. THE LAGOON BACKDROP ────────────────────────────────────────────────
   Same structure as the layer it replaces (scrim over colour pools over a
   base ramp), re-coloured from forest-green to dusk sky → lagoon → deep
   green. The bottom scrim is kept on purpose: it protects photo contrast in
   the listing grid, which is the product. */
body {
  background-color: #06231f;
  background-image:
    linear-gradient(180deg,
      rgba(3, 22, 18, 0) 0%,
      rgba(3, 22, 18, 0) 34%,
      rgba(3, 22, 18, .6) 70%,
      rgba(3, 22, 18, .86) 100%),
    radial-gradient(24rem 16rem at 90% 6%, rgba(255, 186, 110, .46), transparent 64%),
    radial-gradient(23rem 15rem at 6% 34%, rgba(0, 205, 140, .32), transparent 62%),
    radial-gradient(26rem 16rem at 62% 44%, rgba(46, 132, 224, .26), transparent 66%),
    radial-gradient(22rem 14rem at 80% 64%, rgba(140, 100, 255, .2), transparent 62%),
    linear-gradient(180deg, #123f5c 0%, #0c5f60 40%, #053a2a 100%);
  background-attachment: fixed;
}

/* ── 2. HERO — THE SUNSET SCENE ────────────────────────────────────────────
   The hero becomes the lagoon scene: a low sun, two mountain ridgelines and a
   sky ramp, drawn as background layers (no pseudo-elements — .hero::before and
   ::after are already in use) so it costs nothing at scroll time. */
.hero {
  background-image:
    radial-gradient(circle at 88% 18%, rgba(255, 232, 170, .8) 0, rgba(255, 190, 110, .45) 5.5rem, rgba(255, 150, 80, 0) 14rem),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 430 150' preserveAspectRatio='none'%3E%3Cpath d='M0 120 L70 82 L130 108 L205 62 L280 110 L350 78 L430 105 L430 150 L0 150Z' fill='%2306402f'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 430 150' preserveAspectRatio='none'%3E%3Cpath d='M0 95 L50 55 L95 80 L160 18 L225 78 L285 40 L350 75 L400 50 L430 70 L430 150 L0 150Z' fill='%230a5a45' fill-opacity='.72'/%3E%3C/svg%3E"),
    linear-gradient(180deg, rgba(18, 63, 92, .78) 0%, rgba(12, 106, 99, .66) 58%, rgba(5, 58, 42, .82) 100%);
  background-size: auto, 100% 30%, 100% 44%, auto;
  background-position: 0 0, bottom, bottom, 0 0;
  background-repeat: no-repeat;
  border-bottom-color: rgba(255, 255, 255, .16);
}
.hero h1 { text-shadow: 0 2px 22px rgba(0, 30, 30, .45); }
.hero-sub { text-shadow: 0 1px 12px rgba(0, 30, 30, .4); }

.hero-eyebrow {
  border-radius: 999px;
  background: var(--v3-fill), rgba(60, 40, 0, .22);
  border-color: rgba(255, 222, 93, .4);
  box-shadow: var(--v3-rim);
}
.hero-stats > div {
  border-radius: 24px;
  border-color: rgba(255, 255, 255, .2);
  background: var(--v3-fill), var(--v3-tint);
  box-shadow: var(--v3-rim);
}

/* ── 3. CAPSULE CONTROLS ───────────────────────────────────────────────────
   Search pill, category chips and the sort / filter controls share one shape
   and one rim. The active chip is the single gold accent in the row. */
.nav-search-pill {
  border-radius: 999px;
  background: var(--v3-fill), var(--v3-tint);
  border-color: rgba(255, 255, 255, .26);
  box-shadow: var(--v3-rim);
  transition: transform .4s var(--v3-spring), box-shadow .3s ease, border-color .3s ease;
}
.nav-search-pill:hover { transform: translateY(-2px); border-color: rgba(255, 255, 255, .4); }
.nav-search-pill:active { transform: scale(.97); }

.cat-pill-sm {
  border-radius: 999px;
  background-color: rgba(255, 255, 255, .1);
  border-color: rgba(255, 255, 255, .24);
  box-shadow: var(--v3-rim);
  transition: transform .4s var(--v3-spring), background-color .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.cat-pill-sm:hover { transform: translateY(-2px); background-color: rgba(255, 255, 255, .16); }
.cat-pill-sm.active,
.cat-pill-sm.active:hover {
  background-color: transparent;
  background-image: var(--v3-gold-grad);
  background-size: auto;
  border-color: rgba(255, 245, 200, .7);
  color: #1a1405;
  box-shadow: var(--v3-gold-glow), inset 0 1px 1px rgba(255, 255, 255, .7);
}
.cat-pill-sm.active .cp-name { color: #1a1405; font-weight: 700; }
.cat-pill-sm.active .cp-n { background: rgba(26, 20, 5, .18); color: #1a1405; }

.fchip, .fy-chip, .recent-search-chip {
  border-radius: 999px;
  box-shadow: var(--v3-rim);
}

/* ── 4. CARDS ──────────────────────────────────────────────────────────────
   Photo sits inside the glass with an 8px margin and a nested corner radius
   (outer 30 → inner 23), the way iOS 26 cards are built. Backdrop blur is NOT
   raised here — the 12px mobile budget in style.css (§PERF) still applies. */
.ad-card {
  border-radius: 30px;
  padding: 8px;
  box-shadow: var(--v3-rim), var(--v3-shadow);
  transition: transform .45s var(--v3-spring), box-shadow .3s ease;
}
.ad-card .ad-card-img { border-radius: 23px; overflow: hidden; }
.ad-card .ad-card-body { padding-left: 10px; padding-right: 10px; }
@media (hover: hover) {
  .ad-card:hover { transform: translateY(-4px); }
}
.ad-card:active { transform: scale(.985); }

.ad-price {
  color: #ffd45c;
  text-shadow: 0 0 18px rgba(244, 195, 0, .28);
  letter-spacing: -.01em;
}
.neg-pill { border-radius: 999px; }

.ad-card .ad-cat-tag,
.ad-card .fresh-badge,
.ad-card .trending-badge,
.ad-card .photo-count-badge,
.ad-card .sold-tag {
  border-radius: 999px;
  background: rgba(6, 34, 30, .62);
  border: 1px solid rgba(255, 255, 255, .22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2);
  color: #fff;
}
.ad-card .fresh-badge,
.ad-card .trending-badge { color: #ffe08a; }

.ad-card .fav-btn {
  background: rgba(6, 34, 30, .56);
  border: 1px solid rgba(255, 255, 255, .26);
  box-shadow: var(--v3-rim);
  transition: transform .4s var(--v3-spring);
}
.ad-card .fav-btn:hover { transform: scale(1.1); }
.ad-card .fav-btn:active { transform: scale(.88); }

.ad-seller-avatar { box-shadow: 0 0 0 2px rgba(255, 255, 255, .18); }
.ad-seller-verified {
  border-radius: 999px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18);
}

/* ── 5. PANELS ─────────────────────────────────────────────────────────────
   The raised sections (browse deck, results header, For You bar, recents) get
   rounder corners and the shared rim. Fills are left to style.css — they were
   already tuned for contrast. */
.browse-deck, .results-header, .fy-bar, .ai-response-card {
  border-radius: 30px;
}
.recent-card { border-radius: 24px; }
.fy-bar, .browse-deck, .results-header {
  box-shadow: var(--v3-rim), 0 20px 46px rgba(0, 8, 4, .3);
}

/* ── 6. BUTTONS ────────────────────────────────────────────────────────────
   Capsule buttons with the brand gold as a lit gradient. */
.btn, .load-more-btn, .pwa-install-btn {
  border-radius: 999px;
  transition: transform .4s var(--v3-spring), box-shadow .3s ease, filter .25s ease, background .25s ease;
}
.btn:hover, .load-more-btn:hover { transform: translateY(-2px); }
.btn:active, .load-more-btn:active, .pwa-install-btn:active { transform: scale(.96); }
.btn-gold,
.btn-gold:hover {
  background-image: var(--v3-gold-grad);
  background-color: transparent;
  color: #1a1405;
  box-shadow: var(--v3-gold-glow), inset 0 1px 1px rgba(255, 255, 255, .7);
}
.btn-gold:hover { filter: brightness(1.05) saturate(1.05); }

/* ── 7. DIALOGS & SHEETS ───────────────────────────────────────────────────
   Bigger radius and the same rim; the fills stay on style.css's tuned values. */
.modal { border-radius: 34px; }
.ai-sheet { border-top-left-radius: 34px; border-top-right-radius: 34px; }
.modal .form-inp, .form-inp, .ai-sheet-input-bar, .chat-input {
  border-radius: 18px;
  box-shadow: var(--v3-rim);
}
.ai-sheet-input-bar { border-radius: 999px; }

/* ── 8. THE TAB BAR — FLOATING CAPSULE WITH A SLIDING GLASS PILL ───────────
   Emoji glyphs are swapped for stroke icons drawn as CSS masks (so they take
   the item's text colour). The account icon is left alone while signed in —
   ui-nav.js writes the member's initials into it with an inline style, and
   :not([style]) keeps that working exactly as before.

   The selection pill is .mob-nav::before. It slides to the active item using
   :has() with a spring ease; browsers without :has() fall back to a static
   pill drawn on the active item itself. */
.mob-nav {
  border-radius: 999px;
  border-color: rgba(255, 255, 255, .2);
  background-color: rgba(8, 34, 34, .5);
  background-image: var(--v3-fill);
  box-shadow: var(--v3-rim), 0 20px 50px rgba(0, 12, 10, .42);
  --i: 0;
}
.mob-nav-item { position: relative; z-index: 1; }
.mob-nav-item.active { color: #fff; }
.mob-nav-item.active .mn-label { font-weight: 700; }
.mob-nav-item.active .mob-nav-icon { transform: none; }

/* icon swap: hide the glyph, paint a stroke icon with the item's own colour */
.mob-nav-icon {
  font-size: 0 !important;
  line-height: 0;
  width: 22px;
  height: 22px;
  background-color: currentColor;
  -webkit-mask: var(--v3-ico) center / contain no-repeat;
  mask: var(--v3-ico) center / contain no-repeat;
}
#mnHome .mob-nav-icon   { --v3-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 11 12 4l8 7v9H4z'/%3E%3C/svg%3E"); }
#mnSearch .mob-nav-icon { --v3-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E"); }
#mnMsgs .mob-nav-icon   { --v3-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12a8 8 0 0 1-11.6 7.1L4 20l1-4.6A8 8 0 1 1 21 12z'/%3E%3C/svg%3E"); }
#mnAccount .mob-nav-icon:not([style*="border-radius"]) { --v3-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21a8 8 0 0 1 16 0'/%3E%3C/svg%3E"); }
/* signed in: the initials avatar returns to its original, un-masked look */
#mnAccount .mob-nav-icon[style*="border-radius"] {
  -webkit-mask: none;
  mask: none;
  background-color: transparent;
  font-size: 10px !important;
  line-height: normal;
}

@supports selector(:has(*)) {
  .mob-nav::before {
    content: "";
    position: absolute;
    top: 6px;
    bottom: 6px;
    left: 6px;
    width: calc((100% - 12px) / 5);
    border-radius: 999px;
    background: linear-gradient(145deg, rgba(255, 255, 255, .34), rgba(255, 255, 255, .12));
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, .7), inset 0 -1px 2px rgba(255, 255, 255, .2), 0 6px 16px rgba(2, 20, 18, .25);
    transform: translateX(calc(var(--i) * 100%));
    transition: transform .5s var(--v3-spring), opacity .25s ease, top .45s var(--v3-settle), bottom .45s var(--v3-settle);
    pointer-events: none;
  }
  .mob-nav.mob-nav-compact::before { top: 4px; bottom: 4px; }
  .mob-nav:has(#mnHome.active)    { --i: 0; }
  .mob-nav:has(#mnSearch.active)  { --i: 1; }
  .mob-nav:has(#mnMsgs.active)    { --i: 3; }
  .mob-nav:has(#mnAccount.active) { --i: 4; }
  /* no tab selected (e.g. browse view) → no pill, rather than a wrong one */
  .mob-nav:not(:has(.mob-nav-item.active))::before { opacity: 0; }
}
@supports not selector(:has(*)) {
  .mob-nav-item.active {
    border-radius: 999px;
    background: linear-gradient(145deg, rgba(255, 255, 255, .3), rgba(255, 255, 255, .1));
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, .6);
  }
}

/* the Post button: a raised, lit gold lens that sits proud of the capsule */
.mob-nav-post {
  background: var(--v3-gold-grad);
  border: 1px solid rgba(255, 250, 220, .75);
  color: #1a1405;
  font-weight: 700;
  box-shadow: var(--v3-gold-glow), inset 0 1px 1px rgba(255, 255, 255, .8);
  margin-top: -14px;
  transition: transform .4s var(--v3-spring), box-shadow .3s ease;
}
.mob-nav.mob-nav-compact .mob-nav-post { margin-top: 0; }
.mob-nav-item:active .mob-nav-post { transform: scale(.9); }

/* ── 9. FLOATING EXTRAS ────────────────────────────────────────────────────
   Back-to-top and the gas chip join the same capsule family. */
.back-to-top { box-shadow: var(--v3-rim), 0 10px 26px rgba(0, 12, 10, .4); transition: transform .4s var(--v3-spring); }
.back-to-top:active { transform: scale(.9); }
.toast, .pwa-banner { border-radius: 24px; }

/* ── 10. TEXT SELECTION & FOCUS ───────────────────────────────────────────
   Keyboard focus is always visible and uses the brand gold. */
:where(a, button, input, select, textarea, [role="button"]):focus-visible {
  outline: 2px solid rgba(255, 212, 92, .95);
  outline-offset: 2px;
}

/* ── 11. ACCESSIBILITY FALLBACKS ─────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .mob-nav::before,
  .mob-nav-post,
  .ad-card,
  .ad-card .fav-btn,
  .cat-pill-sm,
  .nav-search-pill,
  .btn, .load-more-btn {
    transition: none !important;
  }
  .ad-card:hover, .cat-pill-sm:hover, .nav-search-pill:hover, .btn:hover { transform: none; }
}
@media (prefers-reduced-transparency: reduce) {
  .mob-nav { background-color: #0b2a1b; background-image: none; }
  .mob-nav::before { background: rgba(255, 255, 255, .22); }
  .hero { background-image: linear-gradient(180deg, #123f5c, #053a2a); }
  .ad-card { background-color: #0d2a1d; }
  .nav-search-pill, .hero-stats > div, .hero-eyebrow { background-image: none; }
}
@media (forced-colors: active) {
  .mob-nav, .nav-search-pill, .hero, .hero-stats > div, .hero-eyebrow, .btn-gold, .cat-pill-sm.active {
    background-image: none;
  }
  .mob-nav-icon { background-color: CanvasText; }
  .mob-nav::before { display: none; }
}

/* ── 12. POLISH PASS ───────────────────────────────────────────────────────
   The ship-cost widget carries its own inline <style> (loaded after this file),
   so these selectors are one class deeper to win without !important. */
.shipw .shipw-in {
  border-radius: 30px;
  background: var(--v3-fill), var(--v3-tint);
  border-color: rgba(255, 255, 255, .22);
  box-shadow: var(--v3-rim), var(--v3-shadow);
}
.shipw .shipw-r input,
.shipw .shipw-r select {
  border-radius: 999px;
  border-color: rgba(255, 255, 255, .24);
  background: rgba(255, 255, 255, .1);
  padding-left: 16px;
}
.shipw .shipw-r button {
  border-radius: 999px;
  background: var(--v3-gold-grad);
  box-shadow: var(--v3-gold-glow), inset 0 1px 1px rgba(255, 255, 255, .7);
  transition: transform .4s var(--v3-spring);
}
.shipw .shipw-r button:active { transform: scale(.95); }
.shipw .shipw-s { color: rgba(255, 255, 255, .86); }

/* keep the header capsule inside the viewport */
.nav, header.nav { max-width: 100%; box-sizing: border-box; }

/* the detail page's "Back" button is styled inline (green on teal); an
   attribute selector + !important is the only way to override inline colour. */
button[onclick="goHome()"] { color: #fff !important; }


/* ═══════════════════════════════════════════════════════════════════════════
   13. LAYOUT REDESIGN — the Lagoon screens, not just the Lagoon colours
   ───────────────────────────────────────────────────────────────────────────
   Sections 1–12 re-skinned the old layout. This section changes the layout to
   match the approved mockups:
     · header      — floating logo capsule + action capsules, no full-width bar
     · hero        — big left-aligned greeting + one large glass search capsule
     · categories  — round glass icon buttons with a label underneath
     · ship widget — a single collapsible glass row (was a tall form card)
     · cards       — photo framed inside the glass, gold price, clean text stack
     · tab bar     — four tabs in a capsule + a separate gold Post button
   ═══════════════════════════════════════════════════════════════════════════ */
:root { --v3-font: 'Sora', 'Outfit', system-ui, sans-serif; }

/* shared glass material (same recipe as the mockups' .lg) */
.v3-glass,
.v3-hero-search, .v3-hero-search .v3-hs-ai,
.nav-logo, nav .btn,
.cat-pill-sm .cp-icon,
.shipw .shipw-in {
  background: var(--v3-fill), var(--v3-tint);
  -webkit-backdrop-filter: blur(22px) saturate(190%) brightness(1.06);
  backdrop-filter: blur(22px) saturate(190%) brightness(1.06);
  box-shadow: var(--v3-rim), var(--v3-shadow);
}

/* ── hero: greeting + capsule ── */
.hero { text-align: left; border-bottom: 0; }
.hero-content { max-width: 560px; margin: 0; }
.hero h1 {
  font-family: var(--v3-font);
  font-weight: 600;
  letter-spacing: -.04em;
  line-height: 1.04;
  text-align: left;
}
.hero h1 em { display: block; font-family: inherit; font-style: normal; color: #ffd27a; }
.hero-eyebrow { display: inline-flex; }
.hero-sub { text-align: left; margin-left: 0; }
.hero-stats { justify-content: flex-start; }
.hero-stat-num { font-family: var(--v3-font); font-weight: 700; }

.v3-hero-search {
  display: none;
  align-items: center;
  gap: 12px;
  height: 58px;
  margin: 18px 0 4px;
  padding: 0 8px 0 20px;
  border-radius: 999px;
  border: 0;
  color: #fff;
  position: relative;
  transition: transform .4s var(--v3-spring);
}
.v3-hero-search:focus-within { transform: translateY(-2px); box-shadow: var(--v3-rim), 0 0 0 2px rgba(255, 212, 92, .8), var(--v3-shadow); }
.v3-hs-ico { flex: none; opacity: .9; }
.v3-hero-search input {
  flex: 1; min-width: 0; height: 100%;
  background: none; border: 0; outline: 0;
  color: #fff; font: inherit; font-size: 16px;
  -webkit-appearance: none; appearance: none;
}
.v3-hero-search input::placeholder { color: rgba(255, 255, 255, .85); }
.v3-hero-search input::-webkit-search-cancel-button { display: none; }
.v3-hs-ai {
  flex: none; width: 44px; height: 44px; border-radius: 50%; border: 0;
  display: flex; align-items: center; justify-content: center;
  color: #ffd27a; cursor: pointer;
  transition: transform .4s var(--v3-spring);
}
.v3-hs-ai:active { transform: scale(.9); }
.hero.searched .v3-hero-search { display: none; }

/* ── category rail: round icon buttons ── */
.cat-row { gap: 6px; align-items: flex-start; }
.cat-row .cat-pill-sm,
.cat-row .cat-pill-sm:hover {
  flex: 0 0 auto;
  width: 72px;
  height: auto;
  padding: 0;
  gap: 7px;
  flex-direction: column;
  justify-content: flex-start;
  background: none;
  border: 0;
  box-shadow: none;
  transform: none;
  color: #fff;
}
.cat-row .cat-pill-sm .cp-icon {
  width: 60px; height: 60px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 26px; line-height: 1;
  transition: transform .4s var(--v3-spring), background .25s ease;
}
.cat-row .cat-pill-sm:hover .cp-icon { transform: translateY(-3px); }
.cat-row .cat-pill-sm:active .cp-icon { transform: scale(.94); }
.cat-row .cat-pill-sm .cp-name { font-size: 12px; font-weight: 600; max-width: 72px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cat-row .cat-pill-sm .cp-n { display: none; }
.cat-row .cat-pill-sm.is-empty { opacity: .55; }
.cat-row .cat-pill-sm.active,
.cat-row .cat-pill-sm.active:hover {
  background: none; box-shadow: none; color: #ffd27a;
}
.cat-row .cat-pill-sm.active .cp-icon {
  background: var(--v3-gold-grad);
  box-shadow: var(--v3-gold-glow), inset 0 1px 1px rgba(255, 255, 255, .7);
}
.cat-row .cat-pill-sm.active .cp-name { color: #ffd27a; }
.browse-deck { background: none; border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; padding-left: 0; padding-right: 0; }

/* ── ship widget: one slim collapsible glass row ── */
.shipw .shipw-in { padding: 0; border: 0; overflow: hidden; }
.shipw .shipw-t {
  margin: 0; padding: 0 18px; min-height: 56px; cursor: pointer;
  list-style: none; font-family: var(--v3-font); font-weight: 600;
}
.shipw .shipw-t::-webkit-details-marker { display: none; }
.shipw .shipw-chev {
  margin-left: auto; width: 10px; height: 10px;
  border-right: 2px solid #ffd27a; border-bottom: 2px solid #ffd27a;
  transform: rotate(45deg) translateY(-2px);
  transition: transform .4s var(--v3-spring);
}
.shipw .shipw-in[open] .shipw-chev { transform: rotate(-135deg); }
.shipw .shipw-s { margin: 0; padding: 0 18px 10px; }
.shipw .shipw-r { padding: 0 14px 16px; }

/* ── listing cards ── */
.ad-card {
  background: var(--v3-fill), var(--v3-tint);
  border: 0;
  border-radius: 34px;
  padding: 10px;
}
.ad-card .accent-stripe, .ad-card .card-glow { display: none; }
.ad-card .ad-card-img { border-radius: 26px; }
.ad-card .ad-card-body { background: none; padding: 14px 8px 6px; }
.ad-card .ad-price {
  font-family: var(--v3-font);
  font-weight: 700;
  font-size: 24px;
  letter-spacing: -.02em;
  background: none;
  -webkit-text-fill-color: #ffd27a;
  color: #ffd27a;
  margin-bottom: 2px;
}
.ad-card .ad-title { font-size: 16px; font-weight: 600; min-height: 0; margin-bottom: 4px; }
.ad-card .ad-meta { border: 0; padding-bottom: 0; margin-bottom: 0; font-size: 13px; color: rgba(255, 255, 255, .84); }
.ad-card .ad-seller-row { margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, .14); min-height: 0; }
.ad-card .ad-seller-avatar { width: 28px; height: 28px; font-size: 11px; }
.ad-card .ad-seller-sub { display: none; }
.ad-card .ad-cat-tag, .ad-card .fresh-badge, .ad-card .trending-badge, .ad-card .photo-count-badge, .ad-card .sold-tag {
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  backdrop-filter: blur(16px) saturate(180%);
}

/* ── phones ── */
@media (max-width: 640px) {
  body { padding-top: 18px; }

  /* header: floating capsules on the scene, nothing full-width */
  nav, nav.scrolled-transparent {
    position: relative; top: 0;
    width: calc(100% - 36px); height: 46px; margin: 0 auto; padding: 0; gap: 10px;
    background: none; border: 0; box-shadow: none;
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  .nav-logo { height: 46px; padding: 0 16px 0 12px; border-radius: 999px; align-items: center; }
  .nav-logo img { height: 32px !important; }
  nav .nav-search-pill { display: none; }
  nav .btn { height: 46px; padding: 0 18px; border-radius: 999px; border: 0; color: #fff; font-weight: 700; }
  nav .btn.btn-gold { background: var(--v3-gold-grad); color: #1a1405; box-shadow: var(--v3-gold-glow), inset 0 1px 1px rgba(255, 255, 255, .7); -webkit-backdrop-filter: none; backdrop-filter: none; }

  /* hero: greeting + capsule sit straight on the scene (no panel) */
  #page-home .hero:not(.searched) { margin-top: 0; padding: 22px 18px 6px; background-image: none; }
  #page-home .hero::before, #page-home .hero::after { display: none; }
  #page-home .hero-eyebrow { margin-bottom: 14px; }
  #page-home .hero:not(.searched) h1 { font-size: 38px; line-height: 1.04; margin: 0 0 8px; }
  #page-home .hero:not(.searched) .hero-sub { font-size: 15px; margin-bottom: 0; max-width: 28ch; }
  .v3-hero-search { display: flex; }
  .hero-stats { margin-top: 16px; gap: 8px; }

  .shipw { padding: 0 18px; margin-top: 14px; }
  .results-area { padding-left: 12px; padding-right: 12px; }
  .cat-row { padding: 14px 6px 6px; }

  .ad-card { border-radius: 34px; }
  .ad-card .ad-card-img { border-radius: 26px; }
}

/* ── tab bar: four tabs in a capsule + a separate gold Post button ── */
@media (max-width: 640px) {
  .mob-nav,
  .mob-nav.scrolled-transparent {
    left: 14px; right: 14px; height: 68px; padding: 0;
    display: grid; grid-template-columns: repeat(4, 1fr) 72px; column-gap: 0; align-items: center;
    background: none; border: 0; box-shadow: none;
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  /* the capsule behind the four tabs */
  .mob-nav::after {
    content: ""; position: absolute; left: 0; top: 0; bottom: 0;
    width: calc(100% - 78px); border-radius: 999px; z-index: 0; pointer-events: none;
    background: var(--v3-fill), rgba(8, 34, 34, .5);
    -webkit-backdrop-filter: blur(22px) saturate(190%) brightness(1.06);
    backdrop-filter: blur(22px) saturate(190%) brightness(1.06);
    box-shadow: var(--v3-rim), 0 20px 50px rgba(0, 12, 10, .42);
  }
  .mob-nav-item { z-index: 1; height: 56px; padding: 0; justify-self: stretch; }
  #mnHome { grid-column: 1; } #mnSearch { grid-column: 2; } #mnMsgs { grid-column: 3; } #mnAccount { grid-column: 4; }
  .mob-nav-item:has(.mob-nav-post) { grid-column: 5; grid-row: 1; justify-self: end; width: 68px; height: 68px; }
  .mob-nav-post { width: 64px; height: 68px; border-radius: 999px; margin: 0; font-size: 30px; box-shadow: var(--v3-gold-glow), inset 0 1px 1px rgba(255, 255, 255, .8), var(--v3-shadow); }
  @supports selector(:has(*)) {
    .mob-nav::before {
      z-index: 0; left: 6px; top: 6px; bottom: 6px;
      width: calc((100% - 78px - 12px) / 4);
    }
    .mob-nav:has(#mnMsgs.active)    { --i: 2; }
    .mob-nav:has(#mnAccount.active) { --i: 3; }
  }
  .mob-nav.mob-nav-compact { left: 14px; right: 14px; height: 60px; }
  .mob-nav.mob-nav-compact .mn-label { display: block; }
  .mob-nav.mob-nav-compact .mob-nav-post { width: 64px; height: 60px; font-size: 28px; }
  #mnSearch .mob-nav-icon { --v3-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E"); }
}

@media (prefers-reduced-transparency: reduce) {
  .v3-hero-search, .v3-hs-ai, .nav-logo, nav .btn, .cat-pill-sm .cp-icon, .shipw .shipw-in, .ad-card { background: #0d2a1d; }
  .mob-nav::after { background: #0b2a1b; }
}

/* ── toolbar, view switch, floating buttons (phones) ── */
.results-header {
  border-radius: 28px; padding: 10px 12px 10px 16px; gap: 8px 10px;
  background: var(--v3-fill), var(--v3-tint); border: 0;
}
.results-header .rb-controls { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-left: auto; }
.view-toggle { background: rgba(255, 255, 255, .1); border-radius: 999px; padding: 3px; gap: 2px; box-shadow: var(--v3-rim); }
.view-toggle .view-opt { border-radius: 999px; background: none; color: rgba(255, 255, 255, .85); box-shadow: none; }
.view-toggle .view-opt[aria-pressed="true"] { background: var(--v3-gold-grad); color: #1a1405; box-shadow: inset 0 1px 1px rgba(255, 255, 255, .7); }
@media (max-width: 640px) {
  .back-to-top { right: 22px; bottom: calc(max(10px, env(safe-area-inset-bottom)) + 68px + 14px); background: var(--v3-tint); -webkit-backdrop-filter: blur(18px) saturate(180%); backdrop-filter: blur(18px) saturate(180%); border: 0; }
  .back-to-top.visible.back-to-top-compact { width: 44px; height: 44px; font-size: 18px; bottom: calc(max(10px, env(safe-area-inset-bottom)) + 60px + 14px); right: 22px; }
  nav .nav-actions { overflow: visible; background: none; border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; padding: 0; gap: 8px; }
}

/* the low sun lives on the page backdrop on phones, so no panel edge can cut it */
@media (max-width: 640px) {
  body { background-image:
      linear-gradient(180deg, rgba(3, 22, 18, 0) 0%, rgba(3, 22, 18, 0) 34%, rgba(3, 22, 18, .6) 70%, rgba(3, 22, 18, .86) 100%),
      radial-gradient(11rem 11rem at 84% 9%, rgba(255, 238, 190, .9), rgba(255, 190, 110, .5) 45%, rgba(255, 150, 80, 0) 72%),
      radial-gradient(26rem 18rem at 92% 10%, rgba(255, 160, 90, .5), transparent 66%),
      radial-gradient(23rem 15rem at 6% 34%, rgba(0, 205, 140, .3), transparent 62%),
      radial-gradient(26rem 16rem at 62% 44%, rgba(46, 132, 224, .24), transparent 66%),
      linear-gradient(180deg, #123f5c 0%, #0c5f60 40%, #053a2a 100%); }
}

/* results toolbar: count + layout switch on row one, filters on row two */
@media (max-width: 640px) {
  .results-header { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px; padding: 12px 14px; }
  .results-header .rb-controls { display: contents; }
  .results-header .results-count { grid-column: 1; grid-row: 1; }
  .results-header .view-toggle { grid-column: 2; grid-row: 1; }
  .results-header .hs-switch { grid-column: 1; grid-row: 2; justify-self: start; }
  .results-header .rb-select { grid-column: 2; grid-row: 2; }
}

/* the page scrim started at the hero's top edge and cut the sunset in half */
.page.active { background: none; }

/* the AI sheet's input bar draws its own focus ring; drop the doubled inner one */
.ai-sheet-input-bar :focus-visible { outline: none; }


/* ═══════════════════════════════════════════════════════════════════════════
   14. THE LAGOON HOME SCREEN — built to the approved mockup (board G)
   ───────────────────────────────────────────────────────────────────────────
   top row (parish picker + bell) · greeting · search capsule · four round
   category buttons + More · feed of glass cards · four-tab bar + Post.
   Desktop keeps its header bar; the phone layout below is the mockup.
   ═══════════════════════════════════════════════════════════════════════════ */
@keyframes v3-rise  { from { opacity: 0; transform: translateY(20px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes v3-sun   { 0%, 100% { transform: scale(1); opacity: .9; } 50% { transform: scale(1.08); opacity: 1; } }
@keyframes v3-sway  { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-14px); } }
@keyframes v3-glint { 0%, 55% { transform: translateX(-140%) skewX(-18deg); } 100% { transform: translateX(380%) skewX(-18deg); } }

.v3-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.v3-top, .v3-brand { display: none; }

/* the glass material, with the mockup's bright rim ring */
.v3-glass-cap {
  position: relative; border: 0; color: #fff; cursor: pointer;
  background: var(--v3-fill), var(--v3-tint);
  -webkit-backdrop-filter: blur(22px) saturate(190%) brightness(1.06);
  backdrop-filter: blur(22px) saturate(190%) brightness(1.06);
  box-shadow: var(--v3-rim), var(--v3-shadow);
  transition: transform .4s var(--v3-spring);
}
.v3-glass-cap::before,
.v3-hero-search::after,
.cat-row .cat-pill-sm .cp-icon::after,
.ad-card::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(135deg, rgba(255, 255, 255, .75), rgba(255, 255, 255, 0) 36%, rgba(255, 255, 255, 0) 64%, rgba(255, 255, 255, .4));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
.v3-glass-cap:hover { transform: translateY(-3px); }
.v3-glass-cap:active { transform: scale(.95); }

@media (max-width: 640px) {
  /* ── the scene: sun + two mountain ridges live behind everything ── */
  body { isolation: isolate; background-image:
      linear-gradient(180deg, rgba(3, 22, 18, 0) 0%, rgba(3, 22, 18, 0) 40%, rgba(3, 22, 18, .5) 100%),
      radial-gradient(70% 38% at 76% 14%, #ffd27a 0%, #ff9a55 22%, rgba(255, 120, 80, 0) 62%),
      linear-gradient(180deg, #123f5c 0%, #0c6a63 42%, #053a2a 100%); }
  body::before {
    content: ""; position: fixed; right: 36px; top: 70px; width: 120px; height: 120px; border-radius: 50%; z-index: -1; pointer-events: none;
    background: radial-gradient(circle, #fff3c9 0%, #ffd27a 45%, rgba(255, 210, 122, 0) 72%);
    animation: v3-sun 7s ease-in-out infinite;
  }
  body::after {
    content: ""; position: fixed; left: -20px; bottom: 80px; width: 430px; height: 340px; z-index: -1; pointer-events: none;
    background:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 430 340' preserveAspectRatio='none'%3E%3Cpath d='M0 250 L80 180 L150 230 L230 150 L320 235 L430 170 L430 340 L0 340Z' fill='%2306402f'/%3E%3C/svg%3E") center / 100% 100% no-repeat,
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 430 340' preserveAspectRatio='none'%3E%3Cpath d='M0 190 L60 120 L110 160 L190 60 L260 150 L320 100 L430 190 L430 340 L0 340Z' fill='%230a5a45' fill-opacity='.75'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
    animation: v3-sway 18s ease-in-out infinite;
  }

  /* the header bar is replaced by the top row inside the hero */
  body:has(#page-home.active) nav { display: none; }
  body { padding-top: 0; }
  #page-home .hero:not(.searched) { padding: 18px 18px 4px; background: none; }
  .v3-top { display: flex; align-items: center; justify-content: space-between; animation: v3-rise .7s ease both; }
  .v3-loc { height: 46px; padding: 0 16px 0 12px; border-radius: 999px; display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; }
  .v3-loc svg:first-child { color: #ffd27a; }
  .v3-loc select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; font-size: 16px; }
  .v3-bell { width: 46px; height: 46px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
  .v3-bell-dot { position: absolute; top: 11px; right: 12px; width: 9px; height: 9px; border-radius: 50%; background: #ffd27a; box-shadow: 0 0 0 2px rgba(6, 34, 30, .8); }
  .v3-bell-dot[hidden] { display: none; }
  .v3-brand { display: block; margin: 14px 0 0; animation: v3-rise .7s .04s ease both; }
  .v3-brand img { height: 30px; width: auto; display: block; filter: drop-shadow(0 2px 12px rgba(0, 30, 30, .35)); }

  #page-home .hero .hero-eyebrow, #page-home .hero .hero-sub { display: none; }
  #page-home .hero:not(.searched) h1.v3-greet {
    font-family: var(--v3-font); font-weight: 600; font-size: 38px; line-height: 1.04; letter-spacing: -.04em;
    margin: 6px 0 0; text-shadow: 0 2px 20px rgba(0, 30, 30, .35); animation: v3-rise .7s .06s ease both;
  }
  .v3-greet em { display: block; font-family: inherit; font-style: normal; color: #ffd27a; }

  .v3-hero-search { height: 58px; margin: 14px 0 0; padding: 0 8px 0 20px; gap: 12px; animation: v3-rise .7s .12s ease both; }
  .v3-hero-search::after { border-radius: 999px; }
  .v3-hs-ico { opacity: .85; }
  .v3-hs-ai { width: 44px; height: 44px; position: relative; }
  .v3-hs-ai::before { content: ""; position: absolute; inset: 0; border-radius: 50%; padding: 1px; pointer-events: none;
    background: linear-gradient(135deg, rgba(255, 255, 255, .7), rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, .35));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }

  /* the live numbers become one quiet line under the search, not three boxes */
  #page-home .hero-stats { display: flex; justify-content: flex-start; gap: 6px 16px; flex-wrap: wrap; margin: 12px 4px 0; animation: v3-rise .7s .16s ease both; }
  #page-home .hero-stats > div { display: flex; align-items: baseline; gap: 5px; min-width: 0; padding: 0; background: none; border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; border-radius: 0; }
  #page-home .hero-stat-num { font-size: 15px; }
  #page-home .hero-stat-lbl { font-size: 13px; color: rgba(255, 255, 255, .82); }

  /* ── categories: four round buttons + More ── */
  .results-area { padding-left: 18px; padding-right: 18px; }
  .browse-deck { margin: 0; padding: 0; }
  .browse-deck .recent-search-row { padding-left: 0; padding-right: 0; }
  .browse-deck .cat-row { display: flex; justify-content: space-between; gap: 0; padding: 16px 2px 4px; overflow: visible; -webkit-mask-image: none; mask-image: none; animation: v3-rise .7s .18s ease both; }
  .browse-deck .cat-row .cat-pill-sm { display: none; }
  .browse-deck .cat-row .cat-pill-sm[onclick="catFilter('vehicles')"],
  .browse-deck .cat-row .cat-pill-sm[onclick="catFilter('property')"],
  .browse-deck .cat-row .cat-pill-sm[onclick="catFilter('electronics')"],
  .browse-deck .cat-row .cat-pill-sm[onclick="catFilter('jobs')"] { display: flex; }
  .cat-row .cat-pill-sm[onclick="catFilter('vehicles')"] { order: 1; }
  .cat-row .cat-pill-sm[onclick="catFilter('property')"] { order: 2; }
  .cat-row .cat-pill-sm[onclick="catFilter('electronics')"] { order: 3; }
  .cat-row .cat-pill-sm[onclick="catFilter('jobs')"] { order: 4; }
  .cat-row .v3-more { order: 99; }

  .cat-row .cat-pill-sm, .cat-row .v3-more { flex: 0 0 auto; width: 64px; padding: 0; gap: 7px; flex-direction: column; align-items: center; background: none; border: 0; box-shadow: none; color: #fff; font: inherit; cursor: pointer; }
  .cat-row .v3-more { display: flex; }
  .cat-row .cp-icon {
    position: relative; width: 60px; height: 60px; border-radius: 50%; font-size: 0; color: #fff;
    display: flex; align-items: center; justify-content: center;
    background: var(--v3-fill), var(--v3-tint);
    -webkit-backdrop-filter: blur(22px) saturate(190%) brightness(1.06); backdrop-filter: blur(22px) saturate(190%) brightness(1.06);
    box-shadow: var(--v3-rim), var(--v3-shadow);
    transition: transform .4s var(--v3-spring);
  }
  .cat-row .cat-pill-sm .cp-icon::before { content: ""; width: 26px; height: 26px; background-color: currentColor; -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat; }
  .cat-row .v3-more .cp-icon svg { display: block; }
  .cat-row .cp-name { font-size: 12px; font-weight: 600; max-width: 70px; text-align: center; }
  .cat-row .cat-pill-sm:hover .cp-icon, .cat-row .v3-more:hover .cp-icon { transform: translateY(-3px); }
  .cat-row .cat-pill-sm:active .cp-icon, .cat-row .v3-more:active .cp-icon { transform: scale(.94); }
  .cat-row .cat-pill-sm.active .cp-icon { background: var(--v3-gold-grad); color: #1a1405; box-shadow: var(--v3-gold-glow), inset 0 1px 1px rgba(255, 255, 255, .7); }
  .cat-row .cat-pill-sm.active .cp-name { color: #ffd27a; }

  /* category line icons (CSS masks, tinted by the button's colour) */
  .cat-row .cat-pill-sm[onclick="catFilter('all')"]         .cp-icon { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linejoin='round'%3E%3Cpath d='M12 2l2.2 6.3L21 10l-6.8 1.7L12 18l-2.2-6.3L3 10l6.8-1.7z'/%3E%3C/svg%3E"); }
  .cat-row .cat-pill-sm[onclick="catFilter('vehicles')"]    .cp-icon { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 16V11l2-5h10l2 5v5M3 16h18M7 19v-3M17 19v-3'/%3E%3C/svg%3E"); }
  .cat-row .cat-pill-sm[onclick="catFilter('property')"]    .cp-icon { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 11 12 4l8 7v9H4zM10 20v-6h4v6'/%3E%3C/svg%3E"); }
  .cat-row .cat-pill-sm[onclick="catFilter('electronics')"] .cp-icon { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='7' y='2' width='10' height='20' rx='2'/%3E%3Cpath d='M11 18h2'/%3E%3C/svg%3E"); }
  .cat-row .cat-pill-sm[onclick="catFilter('jobs')"]        .cp-icon { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='7' width='18' height='13' rx='2'/%3E%3Cpath d='M9 7V5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v2'/%3E%3C/svg%3E"); }
  .cat-row .cat-pill-sm[onclick="catFilter('fashion')"]     .cp-icon { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 3 3 6l2.5 4L8 9v12h8V9l2.5 1L21 6l-5-3a4 4 0 0 1-8 0z'/%3E%3C/svg%3E"); }
  .cat-row .cat-pill-sm[onclick="catFilter('furniture')"]   .cp-icon { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 11V8a3 3 0 0 1 3-3h8a3 3 0 0 1 3 3v3M3 13a2 2 0 0 1 4 0v2h10v-2a2 2 0 0 1 4 0v5H3zM6 18v2M18 18v2'/%3E%3C/svg%3E"); }
  .cat-row .cat-pill-sm[onclick="catFilter('services')"]    .cp-icon { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.7 6.3a4 4 0 0 0-5.4 5.1L3 17.7 6.3 21l6.3-6.3a4 4 0 0 0 5.1-5.4l-2.6 2.6-2.4-.6-.6-2.4z'/%3E%3C/svg%3E"); }
  .cat-row .cat-pill-sm[onclick="catFilter('food')"]        .cp-icon { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 7c-3-3-8-1-8 4 0 5 3 9 5 9 1 0 2-.6 3-.6s2 .6 3 .6c2 0 5-4 5-9 0-5-5-7-8-4zM12 7c0-2 1-4 3-5'/%3E%3C/svg%3E"); }
  .cat-row .cat-pill-sm[onclick="catFilter('music')"]       .cp-icon { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18V5l11-2v13'/%3E%3Ccircle cx='6' cy='18' r='3'/%3E%3Ccircle cx='17' cy='16' r='3'/%3E%3C/svg%3E"); }
  .cat-row .cat-pill-sm[onclick="catFilter('sports')"]      .cp-icon { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 3c3 3 3 15 0 18M12 3c-3 3-3 15 0 18M3 12h18'/%3E%3C/svg%3E"); }
  .cat-row .cat-pill-sm[onclick="catFilter('kids')"]        .cp-icon { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8 14a5 5 0 0 0 8 0M9 9.5h.01M15 9.5h.01'/%3E%3C/svg%3E"); }
  .cat-row .cat-pill-sm[onclick="catFilter('other')"]       .cp-icon { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 8 12 3 3 8v8l9 5 9-5zM3 8l9 5 9-5M12 13v8'/%3E%3C/svg%3E"); }

  /* active-filter chips */
  .v3-filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 4px; }
  .v3-filters[hidden] { display: none; }
  .v3-fchip { height: 38px; padding: 0 16px; border-radius: 999px; border: 0; color: #ffd27a; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer;
    background: var(--v3-fill), var(--v3-tint); -webkit-backdrop-filter: blur(18px) saturate(180%); backdrop-filter: blur(18px) saturate(180%); box-shadow: var(--v3-rim); transition: transform .4s var(--v3-spring); }
  .v3-fchip:active { transform: scale(.95); }

  /* feed header + For You bar: quiet lines, not panels */
  .results-header, .fy-bar { background: none; border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; padding-left: 4px; padding-right: 4px; }
  .results-header .results-count { font-family: var(--v3-font); font-weight: 600; font-size: 17px; }
  .fy-bar { margin-bottom: 4px; }

  /* ── feed cards: the mockup's featured card ── */
  .listings-grid { gap: 16px; }
  .ad-card { border-radius: 34px; padding: 10px; animation: v3-rise .8s ease both; }
  .ad-card::after { border-radius: 34px; }
  .ad-card .ad-card-img { aspect-ratio: 16 / 10; min-height: 0; border-radius: 26px; }
  .ad-card .ad-card-img::before { display: none; }
  .ad-card .ad-card-img::after {
    content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 70px; background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .28), rgba(255, 255, 255, 0));
    animation: v3-glint 6s ease-in-out infinite; pointer-events: none; opacity: 1; inset: auto;
  }
  .ad-card .ad-cat-tag, .ad-card .sold-tag, .ad-card .fresh-badge, .ad-card .trending-badge, .ad-card .photo-count-badge {
    text-transform: none; letter-spacing: 0; font-size: 12px; font-weight: 700; height: 30px; padding: 0 12px; display: inline-flex; align-items: center;
    background: var(--v3-fill), rgba(6, 34, 30, .42); border: 0; box-shadow: var(--v3-rim);
  }
  .ad-card .fav-btn { width: 44px; height: 44px; top: 4px; right: 8px; background: var(--v3-fill), rgba(6, 34, 30, .42); border: 0; box-shadow: var(--v3-rim); }
  .ad-card .ad-card-body { padding: 12px 8px 4px; }
  .ad-card .ad-price { font-size: 24px; margin-bottom: 2px; }
  .ad-card .ad-title { font-size: 16px; font-weight: 600; }
  .ad-card .ad-meta { font-size: 13px; color: rgba(255, 255, 255, .82); }
  .ad-card .ad-seller-row { display: none; }
  .ad-card .ad-views { display: none; }
}

/* ── the tab bar: Home · Saved · Chats · Me in a capsule, Post on its own ── */
@media (max-width: 640px) {
  #mnSaved { grid-column: 2; } #mnMsgs { grid-column: 3; } #mnAccount { grid-column: 4; }
  #mnSaved .mob-nav-icon { --v3-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.8 5.6a5 5 0 0 0-7.1 0L12 7.3l-1.7-1.7a5 5 0 0 0-7.1 7.1L12 21.5l8.8-8.8a5 5 0 0 0 0-7.1z'/%3E%3C/svg%3E"); }
  @supports selector(:has(*)) {
    .mob-nav:has(#mnSaved.active)   { --i: 1; }
    .mob-nav:has(#mnMsgs.active)    { --i: 2; }
    .mob-nav:has(#mnAccount.active) { --i: 3; }
  }
  .mob-nav-item { font-size: 11px; }
}

/* desktop: the greeting reads fine; the top row and logo mark are phone-only */
@media (min-width: 641px) {
  .hero h1.v3-greet em { display: inline; }
  .hero h1.v3-greet .v3-g1 { margin-right: .25em; }
}

@media (prefers-reduced-motion: reduce) {
  body::before, body::after, .ad-card .ad-card-img::after, .ad-card, .v3-top, .v3-brand, .v3-hero-search, .cat-row { animation: none !important; }
}
@media (prefers-reduced-transparency: reduce) {
  .v3-glass-cap, .cat-row .cp-icon, .v3-fchip { background: #0d2a1d; }
}

/* ── 14b. phone fixes after the first visual pass ── */
@media (max-width: 640px) {
  .cat-row .cat-pill-sm .cp-icon { font-size: 0 !important; }
  .cat-row .cat-pill-sm.is-empty { opacity: 1; }

  /* the feed header: JS sets inline display:flex, so the grid needs !important */
  .results-header { display: grid !important; grid-template-columns: 1fr auto; gap: 10px; align-items: center; margin: 14px 0 8px; }
  .results-header .rb-controls { display: contents; }
  .results-header .results-count { grid-column: 1; grid-row: 1; }
  .results-header .view-toggle { grid-column: 2; grid-row: 1; }
  .results-header .hs-switch { grid-column: 1; grid-row: 2; justify-self: start; }
  .results-header .rb-select { grid-column: 2; grid-row: 2; }

  .fy-bar .fy-line { display: none; }
  .fy-bar .fy-hd { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
  .fy-bar .fy-actions { display: flex; gap: 8px; margin-left: auto; }
  .fy-bar .fy-btn { height: 36px; padding: 0 14px; border-radius: 999px; font-size: 13px; }

  .ad-card .ad-card-img::after {
    top: 0; bottom: 0; left: 0; right: auto; height: auto; width: 70px;
    background-repeat: no-repeat; background-size: 100% 100%; border: 0; border-radius: 0; box-shadow: none;
  }

  /* gas price: a glass capsule that rides above the tab bar instead of over it */
  #gasBanner, #gasBanner.gas-banner-compact {
    bottom: calc(max(10px, env(safe-area-inset-bottom)) + 68px + 12px); left: 18px;
    border: 0; border-radius: 999px;
    background: var(--v3-fill), var(--v3-tint);
    -webkit-backdrop-filter: blur(22px) saturate(190%) brightness(1.06); backdrop-filter: blur(22px) saturate(190%) brightness(1.06);
    box-shadow: var(--v3-rim), var(--v3-shadow);
    color: #fff;
  }
  #gasBanner { padding: 8px 16px 8px 12px; }
  #gasBanner.gas-banner-compact { max-width: 44px; padding: 10px; }
  #gasBanner .gas-banner-price { color: #ffd27a; font-family: var(--v3-font); }
  .back-to-top.visible.back-to-top-compact { bottom: calc(max(10px, env(safe-area-inset-bottom)) + 68px + 12px); }
}

@media (max-width: 640px) {
  .results-header .view-toggle { justify-self: end; width: auto; }
  .v3-brand img { height: 40px; }
}

@media (min-width: 641px) {
  .v3-more { display: none; }
  #page-home .hero-content { max-width: min(1100px, calc(100% - 48px)); margin: 0 auto; text-align: left; }
  #page-home .hero:not(.searched) { padding-left: 0; padding-right: 0; }
  .v3-hero-search, .v3-top, .v3-brand { display: none; }
}

/* small phones (320px): five round buttons must fit inside the page gutters */
@media (max-width: 640px) {
  .cat-row .cat-pill-sm, .cat-row .v3-more { flex: 1 1 0; min-width: 0; max-width: 64px; width: auto; }
}
@media (max-width: 360px) {
  .cat-row .cp-icon { width: 52px; height: 52px; }
  .cat-row .cp-name { font-size: 11px; max-width: 56px; }
  .results-area, .shipw { padding-left: 14px; padding-right: 14px; }
  #page-home .hero:not(.searched) { padding-left: 14px; padding-right: 14px; }
  #page-home .hero:not(.searched) h1.v3-greet { font-size: 34px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   15. PHASE 2 — LISTING DETAIL (board K): full-bleed photo, floating glass
   controls, one glass info panel, seller card, floating capsule contact bar
   ═══════════════════════════════════════════════════════════════════════════ */
body:has(#page-detail.active) nav,
body:has(#page-detail.active) .mob-nav,
body:has(#page-detail.active) #gasBanner,
body:has(#page-detail.active) .back-to-top { display: none !important; }
body:has(#page-detail.active) { padding-top: 0; }

.v3d { max-width: 760px; margin: 0 auto; padding-bottom: calc(110px + env(safe-area-inset-bottom, 0px)); }

/* hero photo */
.v3d-hero { position: relative; }
.v3d-hero .gallery-wrap { background: #06231f; border-radius: 0 0 34px 34px; overflow: hidden; }
.v3d-hero .gallery-slide { height: min(58vh, 460px); }
.v3d-hero .detail-img { height: min(46vh, 380px); border-radius: 0 0 34px 34px;
  background: linear-gradient(145deg, rgba(255,255,255,.2), rgba(255,255,255,.05)), #0d3b33; }
.v3d-hero .gallery-nav, .v3d-hero .gallery-dots { display: none; }
@media (hover: hover) and (pointer: fine) {
  .v3d-hero .gallery-nav { display: flex; }
}
.v3d-bar { position: absolute; z-index: 3; left: 16px; right: 16px; top: calc(14px + env(safe-area-inset-top, 0px));
  display: flex; justify-content: space-between; align-items: center; pointer-events: none; }
.v3d-bar > * { pointer-events: auto; }
.v3d-bar-r { display: flex; gap: 10px; }

/* glass circle button (back / share / save / call / whatsapp) */
.v3d-circ {
  position: relative; width: 46px; height: 46px; flex: none; border: 0; border-radius: 50%; padding: 0;
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer; color: #fff; text-decoration: none;
  background: var(--v3-fill, linear-gradient(145deg, rgba(255,255,255,.24), rgba(255,255,255,.06))), rgba(6, 34, 30, .42);
  -webkit-backdrop-filter: blur(22px) saturate(190%) brightness(1.06);
  backdrop-filter: blur(22px) saturate(190%) brightness(1.06);
  box-shadow: inset 0 1px 1px rgba(255,255,255,.6), inset 0 -1px 2px rgba(255,255,255,.12), 0 10px 24px rgba(2,20,18,.34);
  transition: transform .4s cubic-bezier(.34,1.56,.64,1);
}
.v3d-circ:active { transform: scale(.92); }
.v3d-save.on { color: #ff6b81; }
.v3d-save.on svg { fill: currentColor; }
.v3d-save.pop svg { animation: v3dPop .5s cubic-bezier(.34,1.56,.64,1); }
@keyframes v3dPop { 0% { transform: scale(.6); } 60% { transform: scale(1.3); } 100% { transform: scale(1); } }

.v3d-count { position: absolute; z-index: 3; right: 16px; bottom: 16px; padding: 7px 14px; border-radius: 999px;
  font-size: 12.5px; font-weight: 600; color: #fff; letter-spacing: .01em;
  background: rgba(6, 34, 30, .5); -webkit-backdrop-filter: blur(16px) saturate(180%); backdrop-filter: blur(16px) saturate(180%);
  box-shadow: inset 0 1px 1px rgba(255,255,255,.3); }

/* info panel */
.v3d-panel.detail-body {
  position: relative; z-index: 2; margin: -26px 14px 0; padding: 22px 20px 20px; border: 0; border-radius: 34px;
  background: linear-gradient(145deg, rgba(255,255,255,.24), rgba(255,255,255,.06) 55%, rgba(255,255,255,.13)), rgba(6, 34, 30, .46);
  -webkit-backdrop-filter: blur(22px) saturate(190%) brightness(1.06);
  backdrop-filter: blur(22px) saturate(190%) brightness(1.06);
  box-shadow: inset 0 1px 1px rgba(255,255,255,.6), inset 0 -1px 2px rgba(255,255,255,.12), 0 18px 40px rgba(2,20,18,.34);
}
.v3d-panel .detail-price { font-family: var(--v3-font, 'Sora', sans-serif); font-size: 31px; font-weight: 700; letter-spacing: -.03em;
  color: #ffd27a; margin: 0 0 6px; line-height: 1.1; }
.v3d-neg { font: 600 12px/1 var(--font-b, system-ui); color: #ffd27a; background: rgba(255,210,122,.14);
  border: 1px solid rgba(255,210,122,.3); border-radius: 999px; padding: 5px 10px; vertical-align: middle; letter-spacing: 0; }
.v3d-panel .detail-title { font-family: var(--v3-font, 'Sora', sans-serif); font-size: 19px; font-weight: 600; letter-spacing: -.01em;
  line-height: 1.3; color: #fff; margin: 0 0 8px; }
.v3d-loc { display: flex; align-items: center; gap: 6px; font-size: 14px; color: rgba(255,255,255,.82); margin-bottom: 16px; }
.v3d-loc svg { color: #ffd27a; flex: none; }
.v3d-sold { display: inline-block; margin-bottom: 10px; padding: 5px 12px; border-radius: 999px; font-size: 12px; font-weight: 700;
  color: #ffb4b4; background: rgba(229,57,53,.2); border: 1px solid rgba(255,140,140,.3); }
.v3d-specs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 18px; }
.v3d-spec { display: flex; flex-direction: column; gap: 2px; padding: 12px 10px; min-width: 0; border-radius: 22px;
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.16); box-shadow: inset 0 1px 1px rgba(255,255,255,.25); }
.v3d-spec-ic { font-size: 18px; line-height: 1; margin-bottom: 4px; }
.v3d-spec-k { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.66); }
.v3d-spec-v { font-size: 14px; font-weight: 600; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v3d-h { font-family: var(--v3-font, 'Sora', sans-serif); font-size: 15px; font-weight: 600; margin: 0 0 8px; color: #fff; }
.v3d-panel .detail-desc { font-size: 15px; line-height: 1.7; color: rgba(255,255,255,.9); margin: 0 0 4px; }

/* reviews mounted inside the panel */
.v3d-panel .ad-feedback { margin-top: 18px; }

/* seller card */
.v3d-seller { display: flex; align-items: center; gap: 14px; margin: 14px 14px 0; padding: 14px 16px; border-radius: 30px;
  background: linear-gradient(145deg, rgba(255,255,255,.2), rgba(255,255,255,.05)), rgba(6, 34, 30, .4);
  -webkit-backdrop-filter: blur(22px) saturate(190%); backdrop-filter: blur(22px) saturate(190%);
  box-shadow: inset 0 1px 1px rgba(255,255,255,.55), 0 14px 32px rgba(2,20,18,.28); }
.v3d-seller .s-avatar { width: 52px; height: 52px; flex: none; box-shadow: 0 0 0 2px rgba(255,255,255,.25); }
.v3d-seller .s-info { flex: 1; min-width: 0; }
.v3d-sname { font-weight: 700; font-size: 16px; color: #fff; }
.v3d-ver { display: inline-flex; width: 17px; height: 17px; margin-left: 4px; border-radius: 50%; align-items: center; justify-content: center;
  font-size: 11px; background: #4fc08b; color: #04281b; vertical-align: 1px; }
.v3d-ssub { font-size: 13px; color: rgba(255,255,255,.78); margin-top: 2px; }
.v3d-sview { border: 0; cursor: pointer; padding: 10px 18px; border-radius: 999px; font: 600 14px var(--font-b, system-ui); color: #fff;
  background: rgba(255,255,255,.14); box-shadow: inset 0 1px 1px rgba(255,255,255,.4); transition: transform .4s cubic-bezier(.34,1.56,.64,1); }
.v3d-sview:active { transform: scale(.94); }

.v3d-extras { display: flex; flex-direction: column; gap: 8px; margin: 14px 14px 0; }
.v3d-extras .btn { width: 100%; border-radius: 999px; }
.v3d-soldnote { margin: 14px 14px 0; text-align: center; color: rgba(255,255,255,.8); font-size: 14px; }
.v3d .similar-section { margin: 18px 14px 0; padding: 18px 16px; border: 0; border-radius: 30px;
  background: linear-gradient(145deg, rgba(255,255,255,.18), rgba(255,255,255,.04)), rgba(6, 34, 30, .4);
  box-shadow: inset 0 1px 1px rgba(255,255,255,.5); }
.v3d .similar-title { font-family: var(--v3-font, 'Sora', sans-serif); color: #fff; }
.v3d .sim-card { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.14) !important; border-radius: 22px !important; color: #fff; }
.v3d .sim-card [style*="--green"] { color: #ffd27a !important; }

/* floating capsule contact bar */
.v3d-cta { position: fixed; z-index: 60; left: 50%; transform: translateX(-50%);
  bottom: calc(14px + env(safe-area-inset-bottom, 0px)); width: min(calc(100% - 28px), 560px);
  display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 999px;
  background: linear-gradient(145deg, rgba(255,255,255,.22), rgba(255,255,255,.05)), rgba(6, 34, 30, .5);
  -webkit-backdrop-filter: blur(24px) saturate(190%) brightness(1.06); backdrop-filter: blur(24px) saturate(190%) brightness(1.06);
  box-shadow: inset 0 1px 1px rgba(255,255,255,.6), inset 0 -1px 2px rgba(255,255,255,.12), 0 18px 40px rgba(2,20,18,.45);
  animation: v3dCtaIn .6s cubic-bezier(.34,1.56,.64,1) both; }
@keyframes v3dCtaIn { from { opacity: 0; transform: translate(-50%, 24px) scale(.96); } }
.v3d-cta .v3d-circ { width: 52px; height: 52px; box-shadow: inset 0 1px 1px rgba(255,255,255,.5), none; background: rgba(255,255,255,.13); -webkit-backdrop-filter: none; backdrop-filter: none; }
.v3d-cta .detail-msg-slot { flex: 1; margin: 0; min-width: 0; }
.v3d-cta .detail-msg-btn, .v3d-cta .detail-msg-slot .btn {
  width: 100%; height: 52px; min-height: 52px; border: 0; border-radius: 999px; font: 700 16px var(--font-b, system-ui);
  color: #1a1405; background: linear-gradient(145deg, #fff0b8 0%, #ffd45c 52%, #f4c300 100%);
  box-shadow: 0 10px 26px rgba(244,195,0,.34), inset 0 1px 1px rgba(255,255,255,.7);
  transition: transform .4s cubic-bezier(.34,1.56,.64,1); }
.v3d-cta .detail-msg-btn:active { transform: scale(.96); }
/* no in-app chat available (demo / own ad): WhatsApp becomes the gold action */
.v3d-cta:not(:has(.detail-msg-btn)) .v3d-wa { flex: 1; width: auto; border-radius: 999px; color: #1a1405;
  background: linear-gradient(145deg, #fff0b8 0%, #ffd45c 52%, #f4c300 100%); box-shadow: 0 10px 26px rgba(244,195,0,.34), inset 0 1px 1px rgba(255,255,255,.7); }

@media (min-width: 641px) {
  .v3d-hero .gallery-wrap, .v3d-hero .detail-img { border-radius: 0 0 34px 34px; }
  .v3d-cta { bottom: 24px; }
}
@media (max-width: 360px) {
  .v3d-panel .detail-price { font-size: 27px; }
  .v3d-specs { gap: 6px; }
  .v3d-spec { padding: 10px 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .v3d-cta, .v3d-save.pop svg { animation: none; }
  .v3d-circ, .v3d-sview, .v3d-cta .detail-msg-btn { transition: none; }
}
@media (prefers-reduced-transparency: reduce) {
  .v3d-circ, .v3d-panel.detail-body, .v3d-seller, .v3d-cta, .v3d .similar-section { background: #0d2a1d; -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   16. PHASE 3 — BROWSE HUB (board S) + SEARCH RESULT ROWS (board J)
   ═══════════════════════════════════════════════════════════════════════════ */
body:has(#page-browse.active) nav,
body:has(#page-browse.active) #gasBanner { display: none !important; }
body:has(#page-browse.active) { padding-top: 0; }

.v3b { max-width: 640px; margin: 0 auto; padding: calc(18px + env(safe-area-inset-top, 0px)) 18px calc(130px + env(safe-area-inset-bottom, 0px));
  display: flex; flex-direction: column; gap: 14px; }
.v3b > * { animation: v3bRise .6s cubic-bezier(.22,1,.36,1) both; }
.v3b > :nth-child(2) { animation-delay: .04s; } .v3b > :nth-child(3) { animation-delay: .08s; }
.v3b > :nth-child(4) { animation-delay: .12s; } .v3b > :nth-child(n+5) { animation-delay: .16s; }
@keyframes v3bRise { from { opacity: 0; transform: translateY(18px); } }
.v3b-top { display: flex; align-items: center; gap: 12px; }
.v3b-back { width: 48px; height: 48px; }
.v3b-h1 { margin: 0; font: 600 28px/1 var(--v3-font, 'Sora', sans-serif); letter-spacing: -.04em; color: #fff; }

.v3b-search, .v3b-big, .v3b-tile, .v3b-chip, .v3b-link {
  background: linear-gradient(145deg, rgba(255,255,255,.26), rgba(255,255,255,.06) 55%, rgba(255,255,255,.14)), rgba(6, 34, 30, .3);
  -webkit-backdrop-filter: blur(22px) saturate(190%) brightness(1.06); backdrop-filter: blur(22px) saturate(190%) brightness(1.06);
  box-shadow: inset 0 1px 1px rgba(255,255,255,.6), inset 0 -1px 2px rgba(255,255,255,.12), 0 14px 30px rgba(2,20,18,.28);
  border: 0; color: #fff; cursor: pointer;
  transition: transform .4s cubic-bezier(.34,1.56,.64,1);
}
.v3b-big:active, .v3b-tile:active, .v3b-chip:active, .v3b-link:active { transform: scale(.96); }
@media (hover: hover) { .v3b-big:hover, .v3b-tile:hover { transform: translateY(-3px); } }
.v3b-search { display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 18px; border-radius: 999px; cursor: text; }
.v3b-search svg { flex: none; color: rgba(255,255,255,.85); }
.v3b-search input { flex: 1; min-width: 0; background: none; border: 0; outline: none; color: #fff; font: 500 16px var(--font-b, system-ui); -webkit-appearance: none; }
.v3b-search input::placeholder { color: rgba(255,255,255,.7); }
.v3b-search:focus-within { box-shadow: inset 0 1px 1px rgba(255,255,255,.6), 0 0 0 3px rgba(255,210,122,.4), 0 14px 30px rgba(2,20,18,.28); }

.v3b-feature { display: flex; gap: 12px; }
.v3b-big { flex: 1; min-width: 0; height: 130px; padding: 16px; border-radius: 32px; text-align: left;
  display: flex; flex-direction: column; justify-content: space-between; }
.v3b-big-t { display: flex; flex-direction: column; }
.v3b-big-t b { font: 700 19px var(--v3-font, 'Sora', sans-serif); }
.v3b-big-t span { font-size: 13px; color: rgba(255,255,255,.9); }
.v3b-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.v3b-tile { height: 84px; padding: 0 4px; border-radius: 28px; font: 600 13px var(--font-b, system-ui);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; text-align: center; }
.v3b-all { color: #ffd27a; font-weight: 700; }
.v3b-sub { margin: 4px 0 -4px 4px; font: 700 13px var(--font-b, system-ui); color: #fff; }
.v3b-parishes { display: flex; gap: 8px; overflow-x: auto; margin: 0 -18px; padding: 4px 18px 8px; scrollbar-width: none; scroll-snap-type: x proximity; }
.v3b-parishes::-webkit-scrollbar { display: none; }
.v3b-chip { flex: none; height: 40px; padding: 0 18px; border-radius: 999px; font: 600 14px var(--font-b, system-ui); scroll-snap-align: start; }
.v3b-chip.on { background: linear-gradient(145deg, #fff0b8, #ffd45c 55%, #f4c300); color: #1a1405; }
.v3b-links { display: flex; gap: 10px; }
.v3b-link { flex: 1; height: 62px; border-radius: 999px; display: flex; align-items: center; justify-content: center; gap: 9px;
  font: 700 14px var(--font-b, system-ui); text-decoration: none; }

/* ── search results: Board J list rows (only while a typed search is active) ── */
body.v3-rows #homeGrid.listings-grid, body.v3-rows #homeGrid { display: flex !important; flex-direction: column; gap: 10px; }
body.v3-rows #homeGrid .ad-card { display: grid !important; grid-template-columns: 108px minmax(0, 1fr); gap: 12px; padding: 8px; border-radius: 30px; align-items: center; min-height: 124px; }
body.v3-rows #homeGrid .ad-card .ad-card-img { width: 108px; height: 108px; aspect-ratio: 1; border-radius: 23px; overflow: hidden; }
body.v3-rows #homeGrid .ad-card .ad-card-img img, body.v3-rows #homeGrid .ad-card .img-placeholder { width: 100%; height: 100%; object-fit: cover; }
body.v3-rows #homeGrid .ad-card .ad-card-body { padding: 0 44px 0 0; min-width: 0; gap: 2px; }
body.v3-rows #homeGrid .ad-card .ad-price { font-size: 19px; }
body.v3-rows #homeGrid .ad-card .ad-title { font-size: 15px; font-weight: 600; -webkit-line-clamp: 1; }
body.v3-rows #homeGrid .ad-card .ad-seller-row, body.v3-rows #homeGrid .ad-card .ad-cat-tag,
body.v3-rows #homeGrid .ad-card .trending-badge, body.v3-rows #homeGrid .ad-card .photo-count-badge,
body.v3-rows #homeGrid .ad-card .ad-views { display: none !important; }
body.v3-rows #homeGrid .ad-card .fresh-badge { top: 6px; left: 6px; }
body.v3-rows #homeGrid .ad-card .fav-btn { position: absolute; top: 6px; right: 6px; left: auto; width: 44px; height: 44px; }
body.v3-rows #homeViewBtn { display: none !important; }
.v3-fchip[data-clear="query"] { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (min-width: 641px) { .v3b-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 360px) { .v3b-big { height: 118px; } .v3b-h1 { font-size: 25px; } }
@media (prefers-reduced-motion: reduce) { .v3b > * { animation: none; } .v3b-big, .v3b-tile, .v3b-chip, .v3b-link { transition: none; } }
@media (prefers-reduced-transparency: reduce) { .v3b-search, .v3b-big, .v3b-tile, .v3b-chip, .v3b-link { background: #123b27; -webkit-backdrop-filter: none; backdrop-filter: none; } }
body.v3-rows #fyBar, body.v3-rows .fy-bar { display: none !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   17. PHASE 4 — CHATS (board N) + SAVED (board O)
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  body:has(#page-msgs.active) nav, body:has(#page-saved.active) nav { display: none !important; }
  body:has(#page-msgs.active), body:has(#page-saved.active) { padding-top: 0; }
}
.v3s { max-width: 640px; margin: 0 auto; padding: calc(18px + env(safe-area-inset-top, 0px)) 18px calc(130px + env(safe-area-inset-bottom, 0px));
  display: flex; flex-direction: column; gap: 12px; }
.v3s > * { animation: v3bRise .6s cubic-bezier(.22,1,.36,1) both; }
.v3s > :nth-child(2) { animation-delay: .05s; } .v3s > :nth-child(3) { animation-delay: .1s; } .v3s > :nth-child(n+4) { animation-delay: .15s; }
.v3s-top { display: flex; align-items: center; justify-content: space-between; min-height: 48px; }
.v3s-h1 { margin: 0; font: 600 32px/1.1 var(--v3-font, 'Sora', sans-serif); letter-spacing: -.04em; color: #fff; }
.v3s-gold { color: #ffd27a; width: 48px; height: 48px; }

.v3s-search, .v3s-card, .v3s-edit, .v3s-seg, .v3s-sc, .v3s-chip:not(.on), .v3s-empty {
  background: linear-gradient(145deg, rgba(255,255,255,.26), rgba(255,255,255,.06) 55%, rgba(255,255,255,.14)), rgba(6, 34, 30, .3);
  -webkit-backdrop-filter: blur(22px) saturate(190%) brightness(1.06); backdrop-filter: blur(22px) saturate(190%) brightness(1.06);
  box-shadow: inset 0 1px 1px rgba(255,255,255,.6), inset 0 -1px 2px rgba(255,255,255,.12), 0 14px 30px rgba(2,20,18,.28);
  border: 0; color: #fff;
}
.v3s-search { display: flex; align-items: center; gap: 10px; height: 50px; padding: 0 18px; border-radius: 999px; cursor: text; }
.v3s-search svg { flex: none; color: rgba(255,255,255,.85); }
.v3s-search input { flex: 1; min-width: 0; background: none; border: 0; outline: none; color: #fff; font: 500 16px var(--font-b, system-ui); -webkit-appearance: none; }
.v3s-search input::placeholder { color: rgba(255,255,255,.7); }
.v3s-search:focus-within { box-shadow: inset 0 1px 1px rgba(255,255,255,.6), 0 0 0 3px rgba(255,210,122,.4), 0 14px 30px rgba(2,20,18,.28); }
.v3s-chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.v3s-chips::-webkit-scrollbar { display: none; }
.v3s-chip { flex: none; height: 38px; padding: 0 18px; border-radius: 999px; border: 0; cursor: pointer; font: 600 14px var(--font-b, system-ui); color: #fff;
  transition: transform .4s cubic-bezier(.34,1.56,.64,1); }
.v3s-chip:active { transform: scale(.94); }
.v3s-chip.on { background: linear-gradient(145deg, #fff0b8, #ffd45c 55%, #f4c300); color: #1a1405; font-weight: 700; box-shadow: 0 8px 20px rgba(244,195,0,.28); }

/* one glass list card; rows are 76px with hairline dividers */
.v3s-card { border-radius: 34px; padding: 6px; }
#inboxList.v3s-card { display: flex; flex-direction: column; gap: 0; }
#inboxList .inbox-item, #inboxList .inbox-item:hover {
  display: grid !important; grid-template-columns: 52px minmax(0, 1fr) auto; grid-template-areas: "av name time" "av prev dot" "av ad ad";
  column-gap: 12px; row-gap: 1px; align-items: center; min-height: 76px; padding: 10px 12px; margin: 0;
  background: none !important; border: 0 !important; border-radius: 26px; box-shadow: none !important;
  -webkit-backdrop-filter: none; backdrop-filter: none; transform: none; cursor: pointer;
}
#inboxList .inbox-item[hidden] { display: none !important; }
#inboxList .inbox-item + .inbox-item { position: relative; }
#inboxList .inbox-item + .inbox-item::before { content: ""; position: absolute; top: 0; left: 76px; right: 12px; height: 1px; background: rgba(255,255,255,.14); }
@media (hover: hover) { #inboxList .inbox-item:hover { background: rgba(255,255,255,.07) !important; } }
#inboxList .inbox-avatar { grid-area: av; width: 52px; height: 52px; border-radius: 50%; font: 700 17px var(--v3-font, 'Sora', sans-serif); display: flex; align-items: center; justify-content: center; box-shadow: none; }
#inboxList .inbox-info { display: contents; }
#inboxList .inbox-name { grid-area: name; font: 700 16px var(--font-b, system-ui); color: #fff; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#inboxList .inbox-time { grid-area: time; align-self: center; font-size: 12px; color: rgba(255,255,255,.8); white-space: nowrap; }
#inboxList .inbox-preview { grid-area: prev; font-size: 14px; color: rgba(255,255,255,.88); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#inboxList .inbox-ad { grid-area: ad; justify-self: start; max-width: 100%; margin-top: 3px; font-size: 11.5px; color: rgba(255,255,255,.8); background: rgba(255,255,255,.1); border-radius: 999px; padding: 3px 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#inboxList .inbox-item.unread .inbox-time { color: #ffd27a; font-weight: 700; }
#inboxList .inbox-item.unread .inbox-preview { color: #fff; font-weight: 600; }
#inboxList .inbox-item.unread::after { content: ""; grid-area: dot; width: 12px; height: 12px; border-radius: 50%; background: #ffd27a; box-shadow: 0 0 10px rgba(255,210,122,.6); justify-self: end; }
#inboxList .inbox-new { display: none; }
#inboxList .inbox-empty-hint, #inboxList .empty { margin: 8px; padding: 22px 14px; border: 0; background: none; color: rgba(255,255,255,.88); text-align: center; }
.v3s-none { margin: 4px 0; text-align: center; color: rgba(255,255,255,.85); font-size: 14px; }

/* Saved */
.v3s-edit { height: 44px; padding: 0 20px; border-radius: 999px; cursor: pointer; font: 700 14px var(--font-b, system-ui); transition: transform .4s cubic-bezier(.34,1.56,.64,1); }
.v3s-edit:active { transform: scale(.94); }
.v3s-edit[aria-pressed="true"] { background: linear-gradient(145deg, #fff0b8, #ffd45c 55%, #f4c300); color: #1a1405; }
.v3s-seg { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); height: 54px; padding: 5px; border-radius: 999px; --i: 0; }
.v3s-seg-pill { position: absolute; top: 5px; bottom: 5px; left: 5px; width: calc((100% - 10px) / 3); border-radius: 999px;
  background: linear-gradient(145deg, rgba(255,255,255,.38), rgba(255,255,255,.14)); box-shadow: inset 0 1px 1px rgba(255,255,255,.7), 0 6px 16px rgba(2,20,18,.25);
  transform: translateX(calc(var(--i) * 100%)); transition: transform .5s cubic-bezier(.34,1.56,.64,1); }
.v3s-seg button { position: relative; z-index: 1; background: none; border: 0; cursor: pointer; border-radius: 999px; font: 600 14px var(--font-b, system-ui); color: rgba(255,255,255,.85); }
.v3s-seg button.on { color: #fff; font-weight: 700; }

.v3s-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.v3s-sc { border-radius: 30px; padding: 8px; display: flex; flex-direction: column; gap: 8px; cursor: pointer; min-width: 0;
  animation: v3bRise .6s cubic-bezier(.22,1,.36,1) both; animation-delay: calc(var(--i) * 45ms);
  transition: transform .4s cubic-bezier(.34,1.56,.64,1), opacity .25s ease; }
.v3s-sc:active { transform: scale(.97); }
.v3s-sc.leaving { opacity: 0; transform: scale(.85); }
.v3s-sc-img { position: relative; height: 116px; border-radius: 23px; overflow: hidden; background: linear-gradient(155deg, #4fc08b, #14684a 70%, #0a3324); }
.v3s-sc-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.v3s-ph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 40px; }
.v3s-badge { position: absolute; left: 7px; top: 7px; height: 24px; padding: 0 10px; border-radius: 999px; background: rgba(6,34,30,.7); font-size: 11px; font-weight: 700; display: flex; align-items: center; color: #fff; }
.v3s-heart { position: absolute; right: 2px; top: 0; width: 44px; height: 44px; border: 0; background: none; color: #ffd27a; display: flex; align-items: center; justify-content: center; cursor: pointer; filter: drop-shadow(0 2px 6px rgba(0,0,0,.4)); }
#v3SavedBody.editing .v3s-heart { color: #fff; }
#v3SavedBody.editing .v3s-heart svg { padding: 5px; border-radius: 50%; background: rgba(229,57,53,.85); width: 28px; height: 28px; }
#v3SavedBody.editing .v3s-sc { animation: v3Wob .5s ease-in-out infinite alternate; }
@keyframes v3Wob { from { transform: rotate(-.6deg); } to { transform: rotate(.6deg); } }
.v3s-sc-b { padding: 0 6px 4px; display: flex; flex-direction: column; min-width: 0; }
.v3s-price { font: 700 16px var(--v3-font, 'Sora', sans-serif); color: #ffd27a; }
.v3s-title { font-size: 14px; font-weight: 600; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v3s-loc { font-size: 12px; color: rgba(255,255,255,.85); }
.v3s-sc.sold .v3s-sc-b { opacity: .8; } .v3s-sc.sold .v3s-price { color: #fff; } .v3s-sc.sold .v3s-sc-img img { filter: grayscale(.8); }

.v3s-rows { padding: 6px; display: flex; flex-direction: column; }
.v3s-row { position: relative; display: flex; align-items: center; gap: 12px; min-height: 76px; padding: 10px 12px; border-radius: 26px; cursor: pointer; }
.v3s-row + .v3s-row::before { content: ""; position: absolute; top: 0; left: 76px; right: 12px; height: 1px; background: rgba(255,255,255,.14); }
.v3s-ric, .v3s-av { flex: none; width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.v3s-ric { background: linear-gradient(135deg, #fff0b8, #ffd27a); color: #3a2400; }
.v3s-av { font: 700 17px var(--v3-font, 'Sora', sans-serif); }
.v3s-rmid { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.v3s-rmid b { font-size: 16px; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v3s-rmid span { font-size: 13px; color: rgba(255,255,255,.85); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v3s-chev { font-size: 28px; line-height: 1; color: #ffd27a; padding-right: 4px; }
.v3s-del { flex: none; width: 36px; height: 36px; border: 0; border-radius: 50%; background: rgba(229,57,53,.85); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.v3s-empty { border-radius: 34px; padding: 34px 20px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.v3s-empty-ic { font-size: 44px; line-height: 1; }
.v3s-empty h2 { margin: 4px 0 0; font: 600 20px var(--v3-font, 'Sora', sans-serif); color: #fff; }
.v3s-empty p { margin: 0 0 8px; font-size: 14.5px; color: rgba(255,255,255,.88); max-width: 280px; }

@media (min-width: 641px) { .v3s-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 360px) { .v3s-h1 { font-size: 28px; } .v3s-sc-img { height: 100px; } }
@media (prefers-reduced-motion: reduce) { .v3s > *, .v3s-sc, #v3SavedBody.editing .v3s-sc { animation: none; } .v3s-seg-pill, .v3s-chip, .v3s-edit { transition: none; } }
@media (prefers-reduced-transparency: reduce) { .v3s-search, .v3s-card, .v3s-edit, .v3s-seg, .v3s-sc, .v3s-chip:not(.on), .v3s-empty { background: #123b27; -webkit-backdrop-filter: none; backdrop-filter: none; } }

/* phone sub-screens: no site footer text or gas pill sitting under the content */
@media (max-width: 640px) {
  body:has(#page-msgs.active, #page-saved.active, #page-browse.active) :is(.seo-about, footer, #gasBanner) { display: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   18. PHASE 5 — ME (board P), SIGN-IN (board T), NOTIFICATIONS (board U)
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  body:has(#page-myads.active, #page-notifs.active) nav { display: none !important; }
  body:has(#page-myads.active, #page-notifs.active) { padding-top: 0; }
  body:has(#page-myads.active, #page-notifs.active) :is(.seo-about, footer, #gasBanner) { display: none !important; }
  .v3me-msgs { display: none; }
}
@media (min-width: 641px) { .v3me-menu, #v3InstallCard, .v3s-gear { display: none; } .v3me .v3s-top { display: none; } }

/* ── Me ── */
.v3me.page-wrap, .v3me { max-width: 640px; }
.v3p-card, .v3p-ref, .v3me-install, .v3n-push {
  background: linear-gradient(145deg, rgba(255,255,255,.26), rgba(255,255,255,.06) 55%, rgba(255,255,255,.14)), rgba(6, 34, 30, .3);
  -webkit-backdrop-filter: blur(22px) saturate(190%) brightness(1.06); backdrop-filter: blur(22px) saturate(190%) brightness(1.06);
  box-shadow: inset 0 1px 1px rgba(255,255,255,.6), inset 0 -1px 2px rgba(255,255,255,.12), 0 14px 30px rgba(2,20,18,.28);
  border: 0; color: #fff;
}
.v3p-card { border-radius: 34px; padding: 18px; display: flex; flex-direction: column; gap: 16px; }
.v3p-id { display: flex; align-items: center; gap: 14px; }
.v3p-av { flex: none; width: 64px; height: 64px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font: 700 24px var(--v3-font, 'Sora', sans-serif); box-shadow: 0 0 0 3px rgba(255,255,255,.25); }
.v3p-who { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.v3p-name { font: 700 20px var(--v3-font, 'Sora', sans-serif); color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v3p-sub { font-size: 13px; color: rgba(255,255,255,.85); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v3p-edit, .v3me-gold, .v3n-mark {
  flex: none; border: 0; cursor: pointer; border-radius: 999px; font: 700 14px var(--font-b, system-ui);
  transition: transform .4s cubic-bezier(.34,1.56,.64,1);
}
.v3p-edit { height: 40px; padding: 0 18px; color: #fff; background: rgba(255,255,255,.16); box-shadow: inset 0 1px 1px rgba(255,255,255,.45); }
.v3me-gold { height: 42px; padding: 0 20px; color: #1a1405; background: linear-gradient(145deg, #fff0b8, #ffd45c 55%, #f4c300); box-shadow: 0 8px 20px rgba(244,195,0,.3), inset 0 1px 1px rgba(255,255,255,.7); }
.v3p-edit:active, .v3me-gold:active, .v3n-mark:active { transform: scale(.94); }
.v3p-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.v3p-stats > div { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 12px 6px; border-radius: 22px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.14); }
.v3p-n { font: 700 22px var(--v3-font, 'Sora', sans-serif); color: #ffd27a; line-height: 1.1; }
.v3p-l { font-size: 12px; color: rgba(255,255,255,.85); }
.v3p-ref { margin-top: 12px; border-radius: 30px; padding: 16px 18px; }
.v3p-ref-t { font-size: 13px; font-weight: 700; margin-bottom: 8px; }
.v3p-ref-row { display: flex; gap: 8px; }
.v3p-ref-row input { flex: 1; min-width: 0; height: 42px; border: 0; border-radius: 999px; padding: 0 16px; font-size: 13px; color: #fff; background: rgba(0,0,0,.28); box-shadow: inset 0 1px 3px rgba(0,0,0,.35); outline: none; }
.v3p-copy { flex: none; width: 42px; height: 42px; border: 0; border-radius: 50%; cursor: pointer; background: rgba(255,255,255,.16); font-size: 16px; }
.v3p-ref-s { margin-top: 8px; font-size: 12.5px; color: #ffd27a; }
.v3me-install { display: flex; align-items: center; justify-content: space-between; gap: 12px; border-radius: 999px; padding: 10px 10px 10px 22px; }
.v3me-install[hidden], .v3n-push[hidden] { display: none; }
.v3me-install-t, .v3n-push-t { display: flex; flex-direction: column; min-width: 0; }
.v3me-install-t b, .v3n-push-t b { font-size: 15px; } .v3me-install-t span, .v3n-push-t span { font-size: 13px; color: rgba(255,255,255,.88); }
.v3me-menu .v3s-row { width: 100%; border: 0; background: none; color: #fff; text-align: left; font-family: inherit; text-decoration: none; }
.v3me-menu .v3s-row + .v3s-row::before { left: 76px; }
.v3me-menu .v3s-ric { font-size: 22px; background: rgba(255,255,255,.14); color: #fff; }
.v3me-out .v3s-rmid b { color: #ff9b9b; }
#v3MyAds .section-title { color: #fff; font-family: var(--v3-font, 'Sora', sans-serif); }
#v3MyAds .my-ad-row { background: linear-gradient(145deg, rgba(255,255,255,.2), rgba(255,255,255,.05)), rgba(6,34,30,.34); border: 0; border-radius: 28px; box-shadow: inset 0 1px 1px rgba(255,255,255,.5); color: #fff; }
#v3MyAds .my-ad-title, #v3MyAds .my-ad-meta { color: #fff; } #v3MyAds .my-ad-price { color: #ffd27a; font-family: var(--v3-font, 'Sora', sans-serif); }

/* ── Notifications ── */
.v3n-title { display: flex; align-items: center; gap: 12px; min-width: 0; }
.v3n-h1 { font-size: 26px; }
.v3n-back { width: 48px; height: 48px; }
.v3n-mark { height: 40px; padding: 0 4px; background: none; color: #ffd27a; font-size: 14px; }
.v3n-mark[hidden] { display: none; }
.v3n-push { border-radius: 999px; padding: 10px 10px 10px 22px; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.v3n-g { margin: 14px 0 8px 4px; font: 700 13px var(--font-b, system-ui); letter-spacing: .02em; color: #fff; }
.v3n-list { margin-bottom: 4px; }
.v3n-ic { flex: none; width: 46px; height: 46px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.14); color: #fff; }
.v3n-msg { background: linear-gradient(135deg, #4fc08b, #14684a); }
.v3n-update { background: linear-gradient(135deg, #fff0b8, #ffd27a); color: #3a2400; }
.v3n-ad { background: linear-gradient(135deg, #6fb4ff, #1b4f8f); }
.v3n-gas { background: rgba(255,255,255,.16); color: #ffd27a; }
.v3n-row .v3s-rmid span { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.v3n-row.unread .v3s-rmid b { color: #fff; } .v3n-row:not(.unread) .v3s-rmid b { font-weight: 600; color: rgba(255,255,255,.92); }
.v3n-dot { flex: none; width: 12px; height: 12px; border-radius: 50%; background: #ffd27a; box-shadow: 0 0 10px rgba(255,210,122,.6); }

/* ── Sign-in (phones: full-screen lagoon; desktop: glass dialog) ── */
#ovAuth .m-close { font-size: 0; width: 48px; height: 48px; border: 0; border-radius: 50%; padding: 0; top: 16px; left: 16px; right: auto;
  background: linear-gradient(145deg, rgba(255,255,255,.26), rgba(255,255,255,.06)), rgba(6,34,30,.4); color: #fff;
  -webkit-backdrop-filter: blur(22px) saturate(190%); backdrop-filter: blur(22px) saturate(190%); box-shadow: inset 0 1px 1px rgba(255,255,255,.6), 0 10px 24px rgba(2,20,18,.3); }
#ovAuth .m-close::before { content: ""; position: absolute; left: 50%; top: 50%; width: 11px; height: 11px; border-left: 2.4px solid #fff; border-bottom: 2.4px solid #fff; transform: translate(-30%, -50%) rotate(45deg); }
.v3a-skip { position: absolute; top: 16px; right: 16px; height: 44px; padding: 0 20px; border: 0; border-radius: 999px; cursor: pointer; color: #fff; font: 700 14px var(--font-b, system-ui);
  background: linear-gradient(145deg, rgba(255,255,255,.26), rgba(255,255,255,.06)), rgba(6,34,30,.4); -webkit-backdrop-filter: blur(22px) saturate(190%); backdrop-filter: blur(22px) saturate(190%);
  box-shadow: inset 0 1px 1px rgba(255,255,255,.6), 0 10px 24px rgba(2,20,18,.3); }
#ovAuth .m-logo { margin-top: 44px; }
#ovAuth .m-logo img { height: 64px !important; padding: 12px; border-radius: 28px; box-sizing: content-box;
  background: linear-gradient(145deg, rgba(255,255,255,.26), rgba(255,255,255,.06)), rgba(6,34,30,.32); -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px); box-shadow: inset 0 1px 1px rgba(255,255,255,.6); }
.v3a-h { margin: 14px 0 0; text-align: center; font: 600 32px/1.1 var(--v3-font, 'Sora', sans-serif); letter-spacing: -.04em; color: #fff; }
.v3a-sub { margin: 6px 0 16px; text-align: center; font-size: 15px; color: rgba(255,255,255,.9); }
#ovAuth .modal > .tab-switch { display: none; }
#ovAuth #fLogin > .divider, #ovAuth #fLogin > p:last-child { display: none; }
#ovAuth #fLogin, #ovAuth #fReg { padding: 18px; border-radius: 34px;
  background: linear-gradient(145deg, rgba(255,255,255,.26), rgba(255,255,255,.06) 55%, rgba(255,255,255,.14)), rgba(6, 34, 30, .3);
  -webkit-backdrop-filter: blur(22px) saturate(190%) brightness(1.06); backdrop-filter: blur(22px) saturate(190%) brightness(1.06);
  box-shadow: inset 0 1px 1px rgba(255,255,255,.6), inset 0 -1px 2px rgba(255,255,255,.12), 0 14px 30px rgba(2,20,18,.28); }
#ovAuth #fReg[style*="display:none"], #ovAuth #fReg[style*="display: none"] { display: none !important; }
#ovAuth .form-lbl { color: rgba(255,255,255,.88); font-size: 13px; font-weight: 600; }
#ovAuth .form-inp { height: 50px; border: 0; border-radius: 999px; padding: 0 18px; color: #fff; font-size: 16px;
  background: rgba(255,255,255,.12); box-shadow: inset 0 1px 3px rgba(0,0,0,.3), inset 0 0 0 1px rgba(255,255,255,.14); }
#ovAuth select.form-inp { appearance: none; -webkit-appearance: none; }
#ovAuth .form-inp::placeholder { color: rgba(255,255,255,.62); }
#ovAuth .form-inp:focus { outline: none; box-shadow: 0 0 0 3px rgba(255,210,122,.45), inset 0 0 0 1px rgba(255,255,255,.3); }
#ovAuth #forgotPwLink { color: #ffd27a !important; font-size: 13px !important; }
#ovAuth .btn-green { height: 54px; border: 0; border-radius: 999px; color: #1a1405; font: 700 16px var(--font-b, system-ui);
  background: linear-gradient(145deg, #fff0b8, #ffd45c 55%, #f4c300); box-shadow: 0 10px 26px rgba(244,195,0,.34), inset 0 1px 1px rgba(255,255,255,.7); }
#ovAuth .btn-green:active { transform: scale(.97); }
#ovAuth .v3a-or { margin: 14px 0; color: rgba(255,255,255,.85); }
#ovAuth .modal > .btn-block[onclick*="Google"] { height: 54px; border: 0 !important; border-radius: 999px; color: #fff !important; font-weight: 700;
  background: linear-gradient(145deg, rgba(255,255,255,.26), rgba(255,255,255,.06)), rgba(6,34,30,.32) !important;
  -webkit-backdrop-filter: blur(22px) saturate(190%); backdrop-filter: blur(22px) saturate(190%); box-shadow: inset 0 1px 1px rgba(255,255,255,.6), 0 10px 24px rgba(2,20,18,.28); }
.v3a-switch { margin: 16px 0 4px; text-align: center; font-size: 14px; color: rgba(255,255,255,.9); }
.v3a-switch a { color: #ffd27a; font-weight: 700; }
#ovAuth .alert-box { border-radius: 22px; }
@media (max-width: 640px) {
  #ovAuth { padding: 0 !important; align-items: stretch !important; background: radial-gradient(60% 30% at 82% 6%, rgba(255,160,90,.5), rgba(255,120,80,0) 65%), linear-gradient(180deg, #123f5c 0%, #0c6a63 45%, #053a2a 100%); }
  #ovAuth .modal { width: 100%; max-width: none; height: 100%; max-height: none; border: 0; border-radius: 0; background: none; box-shadow: none;
    -webkit-backdrop-filter: none; backdrop-filter: none; padding: calc(16px + env(safe-area-inset-top, 0px)) 20px calc(24px + env(safe-area-inset-bottom, 0px)); overflow-y: auto; }
}
@media (min-width: 641px) {
  #ovAuth .modal { background: linear-gradient(160deg, #123f5c, #0c6a63 60%, #053a2a); border: 0; border-radius: 36px; color: #fff; }
  .v3a-skip { display: none; }
}
@media (prefers-reduced-transparency: reduce) { .v3p-card, .v3p-ref, .v3me-install, .v3n-push, #ovAuth #fLogin, #ovAuth #fReg { background: #123b27; -webkit-backdrop-filter: none; backdrop-filter: none; } }

/* ═══════════════════════════════════════════════════════════════════════════
   19. PHASE 6 — POST AN AD (board M)
   ═══════════════════════════════════════════════════════════════════════════ */
#ovPost .modal { color: #fff; }
#ovPost .m-close { font-size: 0; width: 48px; height: 48px; border: 0; border-radius: 50%; padding: 0; top: 16px; left: 16px; right: auto; z-index: 3;
  background: linear-gradient(145deg, rgba(255,255,255,.26), rgba(255,255,255,.06)), rgba(6,34,30,.4); color: #fff;
  -webkit-backdrop-filter: blur(22px) saturate(190%); backdrop-filter: blur(22px) saturate(190%); box-shadow: inset 0 1px 1px rgba(255,255,255,.6), 0 10px 24px rgba(2,20,18,.3); }
#ovPost .m-close::before, #ovPost .m-close::after { content: ""; position: absolute; left: 50%; top: 50%; width: 18px; height: 2.4px; border-radius: 2px; background: #fff; }
#ovPost .m-close::before { transform: translate(-50%, -50%) rotate(45deg); } #ovPost .m-close::after { transform: translate(-50%, -50%) rotate(-45deg); }
.v3pp-head { display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; margin-top: 4px; }
.v3pp-head h2 { margin: 0 !important; font: 600 18px var(--v3-font, 'Sora', sans-serif) !important; color: #fff; }
.v3pp-step { font-size: 12px; color: rgba(255,255,255,.85); }
#ovPost .m-sub { display: none; }

/* progress: three gold segments (driven by the wizard's .active/.done classes) */
#ovPost .step-bar { display: flex; gap: 6px; padding: 0 4px; margin: 14px 0 16px; border: 0; }
#ovPost .step { flex: 1; height: 6px; padding: 0; border: 0; border-radius: 3px; font-size: 0; line-height: 0; background: rgba(255,255,255,.25); overflow: hidden; transition: background .4s ease; }
#ovPost .step.active, #ovPost .step.done { background: linear-gradient(90deg, #fff0b8, #ffd27a); }
#ovPost .step .step-num { display: none; }

#ovPost .form-lbl { font-size: 13px; font-weight: 700; color: #fff; padding-left: 4px; }
#ovPost .form-lbl span { font-weight: 500; color: rgba(255,255,255,.8); }
#ovPost .form-inp {
  border: 0; border-radius: 20px; padding: 0 18px; min-height: 52px; color: #fff; font-size: 16px;
  background: linear-gradient(145deg, rgba(255,255,255,.2), rgba(255,255,255,.05)), rgba(6,34,30,.3);
  -webkit-backdrop-filter: blur(22px) saturate(190%); backdrop-filter: blur(22px) saturate(190%);
  box-shadow: inset 0 1px 1px rgba(255,255,255,.5), inset 0 0 0 1px rgba(255,255,255,.1);
}
#ovPost textarea.form-inp { padding: 14px 18px; border-radius: 24px; min-height: 120px; }
#ovPost select.form-inp { appearance: none; -webkit-appearance: none; }
#ovPost .form-inp::placeholder { color: rgba(255,255,255,.62); }
#ovPost .form-inp:focus { outline: none; box-shadow: 0 0 0 3px rgba(255,210,122,.45), inset 0 1px 1px rgba(255,255,255,.5); }
#ovPost .form-inp option { color: #111; }
.v3pp-cat #aCat { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.v3pp-chips { display: flex; gap: 8px; overflow-x: auto; margin: 6px -18px 0 0; padding: 2px 18px 6px 0; scrollbar-width: none; }
.v3pp-chips::-webkit-scrollbar { display: none; }
.v3pp-chip { flex: none; height: 40px; padding: 0 18px; border: 0; border-radius: 999px; cursor: pointer; color: #fff; font: 600 14px var(--font-b, system-ui);
  background: linear-gradient(145deg, rgba(255,255,255,.26), rgba(255,255,255,.06) 55%, rgba(255,255,255,.14)), rgba(6, 34, 30, .3);
  -webkit-backdrop-filter: blur(22px) saturate(190%); backdrop-filter: blur(22px) saturate(190%);
  box-shadow: inset 0 1px 1px rgba(255,255,255,.6), 0 8px 18px rgba(2,20,18,.22); transition: transform .4s cubic-bezier(.34,1.56,.64,1); }
.v3pp-chip:active { transform: scale(.94); }
.v3pp-chip.on { background: linear-gradient(145deg, #fff0b8, #ffd45c 55%, #f4c300); color: #1a1405; font-weight: 700; }

/* negotiable → iOS switch */
#ovPost #aNeg { appearance: none; -webkit-appearance: none; width: 52px !important; height: 32px !important; border-radius: 999px; position: relative; cursor: pointer; flex: none;
  background: rgba(255,255,255,.22); box-shadow: inset 0 1px 3px rgba(0,0,0,.3); transition: background .3s ease; }
#ovPost #aNeg::after { content: ""; position: absolute; top: 3px; left: 3px; width: 26px; height: 26px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.3); transition: transform .4s cubic-bezier(.34,1.56,.64,1); }
#ovPost #aNeg:checked { background: #ffd27a; } #ovPost #aNeg:checked::after { transform: translateX(20px); }
#ovPost #aNeg:focus-visible { outline: 3px solid rgba(255,210,122,.6); outline-offset: 2px; }

/* photos: 96px rounded tiles, gold dashed add tile */
#ovPost .photo-grid { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; }
#ovPost .photo-add-btn { aspect-ratio: 1; min-height: 96px; border: 1.5px dashed rgba(255,255,255,.55); border-radius: 26px; color: #ffd27a; font-weight: 700; font-size: 12px; background: rgba(255,255,255,.08); gap: 4px; }
#ovPost .photo-thumb-wrap { border-radius: 26px; overflow: hidden; border: 1px solid rgba(255,255,255,.3); }
#ovPost .photo-cover-tag { border-radius: 999px; background: rgba(6,34,30,.65); color: #ffd27a; }
#ovPost p[style*="text-3"] { color: rgba(255,255,255,.75) !important; }

/* actions */
#ovPost .step-nav { position: sticky; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); z-index: 2; gap: 10px; margin-top: 22px; padding: 8px; border-radius: 999px;
  background: linear-gradient(145deg, rgba(255,255,255,.22), rgba(255,255,255,.05)), rgba(6, 34, 30, .5);
  -webkit-backdrop-filter: blur(24px) saturate(190%); backdrop-filter: blur(24px) saturate(190%);
  box-shadow: inset 0 1px 1px rgba(255,255,255,.55), 0 14px 32px rgba(2,20,18,.4); }
#ovPost .step-nav .btn { height: 52px; border: 0; border-radius: 999px; font: 700 16px var(--font-b, system-ui); }
#ovPost .step-nav .btn-green, #ovPost .step-nav .btn-gold { color: #1a1405; background: linear-gradient(145deg, #fff0b8, #ffd45c 55%, #f4c300); box-shadow: 0 10px 26px rgba(244,195,0,.34), inset 0 1px 1px rgba(255,255,255,.7); }
#ovPost .step-nav .btn-ghost { color: #fff; background: rgba(255,255,255,.14); box-shadow: inset 0 1px 1px rgba(255,255,255,.4); }
#ovPost .step-nav .btn:active { transform: scale(.97); }
#ovPost .alert-box { border-radius: 22px; }
#ovPost #previewDetails { color: rgba(255,255,255,.9) !important; }

@media (max-width: 640px) {
  #ovPost { padding: 0 !important; align-items: stretch !important;
    background: radial-gradient(60% 30% at 82% 6%, rgba(255,160,90,.5), rgba(255,120,80,0) 65%), linear-gradient(180deg, #123f5c 0%, #0c6a63 45%, #053a2a 100%); }
  #ovPost .modal { width: 100%; max-width: none; height: 100%; max-height: none; border: 0; border-radius: 0; background: none; box-shadow: none;
    -webkit-backdrop-filter: none; backdrop-filter: none; padding: calc(16px + env(safe-area-inset-top, 0px)) 18px calc(16px + env(safe-area-inset-bottom, 0px)); overflow-y: auto; }
  .v3pp-head { min-height: 48px; justify-content: center; margin-top: 0; }
}
@media (min-width: 641px) {
  #ovPost .modal { background: linear-gradient(160deg, #123f5c, #0c6a63 60%, #053a2a); border: 0; border-radius: 36px; }
  #ovPost .m-sub { display: block; color: rgba(255,255,255,.85); text-align: center; }
}
@media (prefers-reduced-motion: reduce) { #ovPost .step, .v3pp-chip, #ovPost #aNeg, #ovPost #aNeg::after { transition: none; } }
@media (prefers-reduced-transparency: reduce) { #ovPost .form-inp, .v3pp-chip, #ovPost .step-nav { background: #123b27; -webkit-backdrop-filter: none; backdrop-filter: none; } }

/* ═══════════════════════════════════════════════════════════════════════════
   20. PHASE 9 — YAAD BRAIN CHAT (board L)  — CSS only, same markup & JS
   ═══════════════════════════════════════════════════════════════════════════ */
.ai-sheet-overlay { background: rgba(2, 20, 18, .5); }
.ai-sheet.ai-v2 {
  background: linear-gradient(180deg, rgba(18,63,92,.78), rgba(8,70,64,.82) 45%, rgba(5,40,30,.9)), rgba(6,34,30,.6);
  border: 0; border-radius: 36px 36px 0 0;
  -webkit-backdrop-filter: blur(28px) saturate(190%); backdrop-filter: blur(28px) saturate(190%);
  box-shadow: inset 0 1px 1px rgba(255,255,255,.6), 0 -18px 50px rgba(2,20,18,.45);
}
.ai-sheet.ai-v2 .ai-sheet-handle span { background: rgba(255,255,255,.4); }
.ai-sheet.ai-v2 .ai-orb { width: 44px; height: 44px; border: 0;
  background: radial-gradient(circle at 32% 26%, #fff0b8, #ffd45c 45%, #f4c300 80%);
  box-shadow: inset 0 1px 1px rgba(255,255,255,.8), 0 0 22px rgba(255,210,122,.45); }
.ai-sheet.ai-v2 .ai-sheet-name { font-family: var(--v3-font, 'Sora', sans-serif); font-weight: 600; font-size: 17px; }
.ai-sheet.ai-v2 .ai-title-txt em { color: #ffd27a; font-style: normal; }
.ai-sheet.ai-v2 .ai-sheet-sub { color: rgba(255,255,255,.85); }
.ai-sheet.ai-v2 .ai-tool-btn { width: 44px; height: 44px; border: 0; color: #fff;
  background: var(--v3-fill), var(--v3-tint); box-shadow: var(--v3-rim); transition: transform .4s cubic-bezier(.34,1.56,.64,1); }
.ai-sheet.ai-v2 .ai-tool-btn:hover { background: var(--v3-fill), var(--v3-tint); color: #ffd27a; }
.ai-sheet.ai-v2 .ai-tool-btn:active { transform: scale(.92); }

.ai-sheet.ai-v2 .ai-hero-greet { font-family: var(--v3-font, 'Sora', sans-serif); font-weight: 600; font-size: 26px; }
.ai-sheet.ai-v2 .ai-hero-lead { color: rgba(255,255,255,.88); }

/* suggestion chips */
.ai-sheet.ai-v2 .sheet-sug, .ai-sheet.ai-v2 .ai-chip, .ai-sheet.ai-v2 .sheet-recent-chip {
  min-height: 40px; padding: 0 16px; border: 0; border-radius: 999px; color: #fff; font-weight: 600;
  background: var(--v3-fill), var(--v3-tint); -webkit-backdrop-filter: blur(22px) saturate(190%); backdrop-filter: blur(22px) saturate(190%);
  box-shadow: var(--v3-rim); transition: transform .4s cubic-bezier(.34,1.56,.64,1);
}
.ai-sheet.ai-v2 .sheet-sug:hover, .ai-sheet.ai-v2 .ai-chip:hover { color: #1a1405; border: 0;
  background: linear-gradient(145deg, #fff0b8, #ffd45c 55%, #f4c300); }
.ai-sheet.ai-v2 .sheet-sug:active, .ai-sheet.ai-v2 .ai-chip:active { transform: scale(.94); }
.ai-sheet.ai-v2 .sheet-recent-label { color: rgba(255,255,255,.85); }

/* bubbles */
.ai-sheet.ai-v2 .ai-bubble-user {
  border: 0; border-radius: 26px 26px 8px 26px; color: #1a1405; font-weight: 500;
  background: linear-gradient(145deg, #fff0b8, #ffd45c 55%, #f4c300);
  box-shadow: 0 8px 22px rgba(244,195,0,.28), inset 0 1px 1px rgba(255,255,255,.7);
}
.ai-sheet.ai-v2 .ai-bubble-ai {
  border: 0; border-radius: 26px 26px 26px 8px; color: #fff;
  background: var(--v3-fill), var(--v3-tint); -webkit-backdrop-filter: blur(22px) saturate(190%); backdrop-filter: blur(22px) saturate(190%);
  box-shadow: var(--v3-rim), 0 10px 24px rgba(2,20,18,.25);
}
.ai-sheet.ai-v2 .ai-text { font-size: 15px; }
.ai-sheet.ai-v2 .ai-avatar { border: 0; background: radial-gradient(circle at 32% 26%, #fff0b8, #ffd45c 55%, #f4c300); box-shadow: inset 0 1px 1px rgba(255,255,255,.8); }
.ai-sheet.ai-v2 .ai-time { color: rgba(255,255,255,.7); }
.ai-sheet.ai-v2 .ai-thinking { color: rgba(255,255,255,.8); }
.ai-sheet.ai-v2 .ai-typing i { background: #ffd27a; }
.ai-sheet.ai-v2 .ai-caret { background: #ffd27a; }

/* result cards inside the thread */
.ai-sheet.ai-v2 .ai-result-card {
  border: 0; border-radius: 26px; padding: 10px 14px 10px 10px; gap: 12px;
  background: var(--v3-fill), rgba(6,34,30,.4); -webkit-backdrop-filter: blur(22px) saturate(190%); backdrop-filter: blur(22px) saturate(190%);
  box-shadow: var(--v3-rim), 0 10px 24px rgba(2,20,18,.25); transition: transform .4s cubic-bezier(.34,1.56,.64,1);
}
.ai-sheet.ai-v2 .ai-result-card:hover { border: 0; background: var(--v3-fill), rgba(6,34,30,.4); transform: translateY(-2px); }
.ai-sheet.ai-v2 .ai-result-card:active { transform: scale(.98); }
.ai-sheet.ai-v2 .ai-thumb { border-radius: 18px; overflow: hidden; }
.ai-sheet.ai-v2 .ai-result-price { color: #ffd27a; font-family: var(--v3-font, 'Sora', sans-serif); font-weight: 700; }
.ai-sheet.ai-v2 .ai-result-title { color: #fff; }
.ai-sheet.ai-v2 .ai-result-meta, .ai-sheet.ai-v2 .ai-result-arrow { color: rgba(255,255,255,.78); }
.ai-sheet.ai-v2 .ai-compare { border: 0; border-radius: 22px; box-shadow: var(--v3-rim); }
.ai-sheet.ai-v2 .ai-compare-label { color: rgba(255,255,255,.8); }
.ai-sheet.ai-v2 .ai-compare-row.win-a .ai-compare-val:nth-child(2), .ai-sheet.ai-v2 .ai-compare-row.win-b .ai-compare-val:nth-child(3) { color: #ffd27a; }

/* composer: glass capsule with gold send */
.ai-sheet.ai-v2 .ai-sheet-input-wrap { padding: 8px 16px calc(14px + env(safe-area-inset-bottom, 0px)); background: none; border: 0; }
.ai-sheet.ai-v2 .ai-sheet-input-bar { min-height: 60px; padding: 6px 6px 6px 20px; border: 0; border-radius: 999px;
  background: var(--v3-fill), rgba(6,34,30,.5); -webkit-backdrop-filter: blur(24px) saturate(190%); backdrop-filter: blur(24px) saturate(190%);
  box-shadow: var(--v3-rim), 0 14px 32px rgba(2,20,18,.4); }
.ai-sheet.ai-v2 .ai-sheet-input-bar:focus-within { box-shadow: 0 0 0 3px rgba(255,210,122,.45), var(--v3-rim), 0 14px 32px rgba(2,20,18,.4); }
.ai-sheet.ai-v2 .ai-sheet-input { color: #fff; font-size: 16px; }
.ai-sheet.ai-v2 .ai-sheet-input::placeholder { color: rgba(255,255,255,.7); }
.ai-sheet.ai-v2 .ai-mic-btn, .ai-sheet.ai-v2 .ai-clear-btn { width: 44px; height: 44px; color: #fff; }
.ai-sheet.ai-v2 .ai-sheet-send { width: 48px; height: 48px; border: 0; border-radius: 50%; color: #1a1405; font-size: 20px; font-weight: 800;
  background: linear-gradient(145deg, #fff0b8, #ffd45c 55%, #f4c300); box-shadow: 0 8px 20px rgba(244,195,0,.34), inset 0 1px 1px rgba(255,255,255,.7); }
.ai-sheet.ai-v2 .ai-sheet-send:hover { background: linear-gradient(145deg, #fff0b8, #ffd45c 55%, #f4c300); }
.ai-sheet.ai-v2 .ai-sheet-hint { color: rgba(255,255,255,.75); }
.ai-sheet.ai-v2 .ai-hint-link { color: #ffd27a; }
@media (min-width: 641px) { .ai-sheet.ai-v2 { border-radius: 36px 0 0 36px; } }
@media (prefers-reduced-motion: reduce) { .ai-sheet.ai-v2 .sheet-sug, .ai-sheet.ai-v2 .ai-chip, .ai-sheet.ai-v2 .ai-tool-btn, .ai-sheet.ai-v2 .ai-result-card { transition: none; } }
@media (prefers-reduced-transparency: reduce) { .ai-sheet.ai-v2, .ai-sheet.ai-v2 .ai-bubble-ai, .ai-sheet.ai-v2 .ai-sheet-input-bar { background: #0c3b34; -webkit-backdrop-filter: none; backdrop-filter: none; } }
.ai-sheet.ai-v2 .ai-sheet-input { flex: 1 1 0; min-width: 0; width: auto; min-height: 0; height: auto; padding: 6px 0; border: 0; border-radius: 0; background: none; box-shadow: none !important; outline: none; }
.ai-sheet.ai-v2 .ai-sheet-input:focus { box-shadow: none !important; }
.ai-sheet.ai-v2 .ai-sheet-input-bar { gap: 2px; overflow: hidden; }
.ai-sheet.ai-v2 .ai-sheet-send { margin-left: 4px; }
/* suggestion chips: one scrolling rail instead of a tall stack */
.ai-sheet.ai-v2 .ai-sheet-sugs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding: 8px 18px 10px; }
.ai-sheet.ai-v2 .ai-sheet-sugs::-webkit-scrollbar { display: none; }
.ai-sheet.ai-v2 .sheet-sug { flex: none; white-space: nowrap; }

/* ═══════════════════════════════════════════════════════════════════════════
   21. PHASE 10 — DESKTOP POLISH (≥641px) — contrast, gold accents, tablet
   ═══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 641px) {
  /* header actions: gold primary, white glass secondary */
  nav .nav-actions .btn { min-height: 44px; padding: 0 20px; border: 0; border-radius: 999px; font-weight: 700; transition: transform .4s cubic-bezier(.34,1.56,.64,1); }
  nav .nav-actions .btn:active { transform: scale(.95); }
  nav .nav-actions .btn-gold, nav .nav-actions .nav-post-btn { color: #1a1405; background: linear-gradient(145deg, #fff0b8, #ffd45c 55%, #f4c300); box-shadow: 0 8px 20px rgba(244,195,0,.3), inset 0 1px 1px rgba(255,255,255,.7); }
  nav .nav-actions .btn-outline, nav .nav-actions .btn-green { color: #fff; background: var(--v3-fill), var(--v3-tint); box-shadow: var(--v3-rim); }
  nav .nav-actions .btn-outline:hover { color: #ffd27a; }

  /* floating AI button: gold orb like the in-sheet one */
  .ai-fab { width: 64px; height: 64px; background: radial-gradient(circle at 32% 26%, #fff0b8, #ffd45c 45%, #f4c300 80%);
    box-shadow: inset 0 1px 1px rgba(255,255,255,.8), 0 14px 30px rgba(244,195,0,.35); }
  .ai-fab::after { box-shadow: 0 0 0 2px rgba(255,210,122,.6); }

  /* footer & about copy: readable on the dark lagoon */
  .seo-about-inner, .seo-about-inner strong { color: rgba(255,255,255,.88); }
  .seo-about-inner a, .seo-about-cats a { color: #ffd27a; }
  .seo-about-inner a:hover, .seo-about-cats a:hover { color: #fff; }
  footer p { color: rgba(255,255,255,.82); }

  /* sub-screens use the width: browse becomes a roomier grid */
  .v3b { max-width: 860px; }
  .v3b .v3b-grid { grid-template-columns: repeat(5, 1fr); }

  /* Chats/Me empty states */
  #page-msgs h2, #page-msgs h3 { font-family: var(--v3-font, 'Sora', sans-serif); color: #fff; font-weight: 600; }
  #page-msgs .btn-green { color: #1a1405; background: linear-gradient(145deg, #fff0b8, #ffd45c 55%, #f4c300); border: 0; border-radius: 999px; min-height: 48px; padding: 0 28px; font-weight: 700; box-shadow: 0 10px 26px rgba(244,195,0,.34), inset 0 1px 1px rgba(255,255,255,.7); }

  /* gas pill: brighter label text */
  #gasBanner .gas-banner-label, #gasBanner .gas-banner-sub { color: rgba(255,255,255,.85); }
}
/* tablet: keep the 4-up grid from squeezing cards */
@media (min-width: 641px) and (max-width: 1000px) {
  .v3b .v3b-grid { grid-template-columns: repeat(4, 1fr); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   22. WHAT'S NEW POPUP — calm sheet: newest update open, older ones folded
   ═══════════════════════════════════════════════════════════════════════════ */
.su-overlay { background: rgba(2, 20, 18, .55); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); align-items: flex-end; padding: 0; }
.site-update-modal {
  max-width: 560px; max-height: 86dvh; border: 0; border-radius: 36px 36px 0 0; color: #fff;
  background: linear-gradient(180deg, rgba(18,63,92,.82), rgba(8,70,64,.86) 55%, rgba(5,40,30,.92)), rgba(6,34,30,.6);
  -webkit-backdrop-filter: blur(28px) saturate(190%); backdrop-filter: blur(28px) saturate(190%);
  box-shadow: inset 0 1px 1px rgba(255,255,255,.6), 0 -18px 50px rgba(2,20,18,.45);
  animation: v3suUp .45s cubic-bezier(.34,1.2,.64,1) both;
}
@keyframes v3suUp { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
.su-overlay.leaving .site-update-modal { transform: translateY(24px); }
.site-update-modal-hd { padding: 22px 22px 10px; gap: 10px; }
.site-update-modal-hd-title { font: 600 20px var(--v3-font, 'Sora', sans-serif); letter-spacing: -.2px; color: #fff; }
.site-update-modal-hd-count { font-size: 13px; font-weight: 500; color: rgba(255,255,255,.8); }
.su-close { position: relative; width: 40px; height: 40px; flex: none; border: 0; border-radius: 50%; cursor: pointer;
  background: var(--v3-fill), var(--v3-tint); box-shadow: var(--v3-rim); }
.su-close::before, .su-close::after { content: ""; position: absolute; left: 50%; top: 50%; width: 15px; height: 2px; border-radius: 2px; background: #fff; }
.su-close::before { transform: translate(-50%, -50%) rotate(45deg); } .su-close::after { transform: translate(-50%, -50%) rotate(-45deg); }

.site-update-list { padding: 4px 18px 8px; }
.site-update-entry { border: 0; border-radius: 26px; margin: 0 0 8px; padding: 0; background: rgba(255,255,255,.07); box-shadow: none; }
.site-update-entry.is-latest { padding: 18px 18px 16px; background: var(--v3-fill), var(--v3-tint); box-shadow: var(--v3-rim); }
.site-update-entry-hd { width: 100%; display: flex; align-items: baseline; justify-content: space-between; gap: 12px; text-align: left; }
.site-update-entry.is-latest .site-update-entry-title { font: 600 18px/1.3 var(--v3-font, 'Sora', sans-serif); color: #fff; }
.site-update-entry-title { font: 600 15px/1.35 var(--font-b, system-ui); color: #fff; flex: 1; min-width: 0; }
.site-update-date { font-size: 12.5px; color: rgba(255,255,255,.78); white-space: nowrap; }
button.site-update-entry-hd { appearance: none; border: 0; background: none; cursor: pointer; padding: 15px 18px; min-height: 52px; align-items: center; font-family: inherit; }
button.site-update-entry-hd::after { content: ""; width: 8px; height: 8px; flex: none; border-right: 2px solid rgba(255,255,255,.8); border-bottom: 2px solid rgba(255,255,255,.8); transform: rotate(45deg) translateY(-2px); transition: transform .3s ease; }
.site-update-entry.is-open button.site-update-entry-hd::after { transform: rotate(225deg); }
.site-update-entry.is-folded .su-detail { padding: 0 18px 16px; }
.su-detail[hidden], .site-update-notes li[hidden], .su-more[hidden] { display: none; }
.su-detail:not(.is-expanded) .site-update-notes { display: none; }

.site-update-body { margin: 10px 0 0; font-size: 15px; line-height: 1.55; color: rgba(255,255,255,.92); }
.is-latest .su-detail:not(.is-expanded) .site-update-body { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.site-update-notes { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 10px; }
.site-update-notes li { position: relative; margin: 0; padding-left: 18px; font-size: 14.5px; line-height: 1.5; color: rgba(255,255,255,.92); }
.site-update-notes li::before { content: ""; position: absolute; left: 2px; top: .6em; width: 6px; height: 6px; border-radius: 50%; background: #ffd27a; }
.su-more { margin-top: 12px; padding: 0; border: 0; background: none; cursor: pointer; color: #ffd27a; font: 600 14px var(--font-b, system-ui); min-height: 44px; }
.su-cta { display: block; margin-top: 8px; width: 100%; min-height: 52px; border: 0; border-radius: 999px; cursor: pointer; font: 700 15px var(--v3-font, 'Sora', sans-serif); color: #1a1405;
  background: linear-gradient(145deg, #fff0b8, #ffd45c 55%, #f4c300); box-shadow: 0 10px 26px rgba(244,195,0,.3), inset 0 1px 1px rgba(255,255,255,.7); }

.site-update-actions { padding: 10px 18px calc(16px + env(safe-area-inset-bottom, 0px)); gap: 10px; justify-content: stretch; }
.site-update-actions .site-update-btn { flex: 1; min-height: 52px; border: 0; border-radius: 999px; font: 600 15px var(--font-b, system-ui); color: #fff; background: var(--v3-fill), var(--v3-tint); box-shadow: var(--v3-rim); }
.site-update-actions .site-update-btn-primary { color: #fff; }
.su-more:focus-visible, .su-cta:focus-visible, .su-close:focus-visible, .site-update-btn:focus-visible, button.site-update-entry-hd:focus-visible { outline: 3px solid rgba(255,210,122,.7); outline-offset: 2px; }
@media (min-width: 641px) { .su-overlay { align-items: center; padding: 24px; } .site-update-modal { border-radius: 36px; } }
@media (prefers-reduced-motion: reduce) { .site-update-modal { animation: none; } button.site-update-entry-hd::after { transition: none; } }
@media (prefers-reduced-transparency: reduce) { .site-update-modal, .su-overlay { background: #0c3b34; -webkit-backdrop-filter: none; backdrop-filter: none; } }

/* Chats empty state on phones: same type and gold button as the rest */
#page-msgs .empty h3 { font-family: var(--v3-font, 'Sora', sans-serif); font-weight: 600; color: #fff; }
#page-msgs .empty p { color: rgba(255,255,255,.88); }
#page-msgs .empty .btn-green { color: #1a1405; background: linear-gradient(145deg, #fff0b8, #ffd45c 55%, #f4c300); border: 0; border-radius: 999px; min-height: 48px; padding: 0 28px; font-weight: 700; box-shadow: 0 10px 26px rgba(244,195,0,.34), inset 0 1px 1px rgba(255,255,255,.7); }

/* ═══════════════════════════════════════════════════════════════════════════
   23. HOME SEARCH → BROWSE, AND THE FLOATING AI ORB
   ═══════════════════════════════════════════════════════════════════════════ */
.v3-hero-search.v3-hs-tap { cursor: pointer; }
.v3-hero-search.v3-hs-tap:focus-within { transform: none; box-shadow: var(--v3-rim), var(--v3-shadow); }
.v3-hero-search input { cursor: pointer; caret-color: transparent; text-overflow: ellipsis; }
.v3-hero-search input:focus, .v3-hero-search input:focus-visible { outline: none; box-shadow: none; }
.v3-hero-search:active { transform: scale(.985); }

.v3-hs-ai { overflow: visible; }
.v3-orb { position: relative; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; border-radius: 50%;
  transform: translate(var(--tx, 0), var(--ty, 0)); transition: transform .35s cubic-bezier(.34,1.56,.64,1); animation: v3-float 3.6s ease-in-out infinite; }
.v3-orb svg { position: relative; z-index: 1; animation: v3-twinkle 3.6s ease-in-out infinite; }
.v3-orb-glow { position: absolute; inset: -2px; border-radius: 50%; z-index: 0;
  background: radial-gradient(circle at 35% 30%, rgba(255,240,184,.55), rgba(255,210,122,.22) 55%, rgba(255,210,122,0) 75%);
  animation: v3-breathe 3.6s ease-in-out infinite; }
.v3-hs-ai:hover .v3-orb svg, .v3-hs-ai:focus-visible .v3-orb svg { transform: rotate(20deg) scale(1.12); }
.v3-hs-ai:focus-visible { outline: 3px solid rgba(255,210,122,.7); outline-offset: 2px; }
@keyframes v3-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -3px; } }
@keyframes v3-twinkle { 0%, 100% { transform: rotate(0) scale(1); } 50% { transform: rotate(14deg) scale(1.1); } }
@keyframes v3-breathe { 0%, 100% { opacity: .55; transform: scale(.92); } 50% { opacity: 1; transform: scale(1.12); } }
.v3-spark { position: absolute; left: 50%; top: 50%; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; pointer-events: none; z-index: 2;
  background: #ffe08a; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
  animation: v3-spark .65s cubic-bezier(.2,.7,.3,1) forwards; }
@keyframes v3-spark { from { transform: translate(0, 0) scale(.4); opacity: 1; } to { transform: translate(var(--sx), var(--sy)) scale(1.2) rotate(90deg); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .v3-orb, .v3-orb svg, .v3-orb-glow { animation: none; } .v3-spark { display: none; } }

/* ═══════════════════════════════════════════════════════════════════════════
   24. LISTING PHOTO — fits fully, and doubles as the page backdrop
   ═══════════════════════════════════════════════════════════════════════════ */
body:has(#page-detail.active)::before, body:has(#page-detail.active)::after { display: none; }
.v3d-bg { position: fixed; inset: -30px; z-index: -1; pointer-events: none; background-size: cover; background-position: center;
  background-color: #0d3b33; filter: blur(9px) saturate(1.5) brightness(.85); transform: translateZ(0); transition: background-image .3s ease; }
.v3d-bg::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(5,40,30,.05) 0%, rgba(5,40,30,.2) 50%, rgba(3,26,20,.5) 100%); }
/* the whole photo is visible (no crop); the blurred copy behind it fills the rest */
.v3d-hero .gallery-wrap { background: transparent; border-radius: 0 0 34px 34px; }
.v3d-hero .gallery-slide { height: auto; aspect-ratio: 4 / 3; max-height: 58vh; background: transparent; }
.v3d-hero .gallery-slide img { object-fit: contain; }
.v3d-hero .detail-img { background: rgba(255,255,255,.1); }
.v3d-panel.detail-body { margin-top: 12px; }
@media (min-width: 641px) { .v3d-hero .gallery-slide { aspect-ratio: 16 / 10; } }
@media (prefers-reduced-motion: reduce) { .v3d-bg { transition: none; } }

/* ═══════════════════════════════════════════════════════════════════════════
   25. FLOATING AI ORB (phones) — mirrors the gas pill on the right
   ═══════════════════════════════════════════════════════════════════════════ */
.v3-ai-float { display: none; }
@media (max-width: 640px) {
  .v3-ai-float {
    display: flex; align-items: center; justify-content: center; position: fixed; z-index: 250;
    right: 18px; bottom: calc(max(10px, env(safe-area-inset-bottom)) + 68px + 12px);
    width: 52px; height: 52px; padding: 0; border: 0; border-radius: 50%; cursor: pointer; color: #ffe9a8;
    background: var(--v3-fill), var(--v3-tint);
    -webkit-backdrop-filter: blur(22px) saturate(190%) brightness(1.06); backdrop-filter: blur(22px) saturate(190%) brightness(1.06);
    box-shadow: var(--v3-rim), var(--v3-shadow), 0 0 22px rgba(255,210,122,.28);
    transition: transform .35s cubic-bezier(.34,1.56,.64,1), width .3s, height .3s, opacity .25s; -webkit-tap-highlight-color: transparent;
  }
  .v3-ai-float:active { transform: scale(.9); }
  .v3-ai-float:focus-visible { outline: 3px solid rgba(255,210,122,.7); outline-offset: 3px; }
  body.ai-sheet-open .v3-ai-float { opacity: 0; pointer-events: none; }
  body:has(#page-detail.active, #page-browse.active, #page-msgs.active, #page-saved.active, #page-myads.active, #page-notifs.active) .v3-ai-float { display: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   26. NOTIFICATIONS — compact: more items per screen, less empty glass
   ═══════════════════════════════════════════════════════════════════════════ */
.v3n-list.v3s-card { border-radius: 26px; padding: 2px 4px; }
.v3n-row.v3s-row { min-height: 56px; padding: 8px 10px; gap: 10px; border-radius: 20px; }
.v3n-row + .v3n-row::before { left: 56px; right: 10px; }
.v3n-ic { width: 36px; height: 36px; }
.v3n-ic svg { width: 18px; height: 18px; }
.v3n-row .v3s-rmid { gap: 0; }
.v3n-row .v3s-rmid b { font-size: 14.5px; line-height: 1.3; }
.v3n-row .v3s-rmid span { font-size: 12.5px; line-height: 1.3; -webkit-line-clamp: 1; }
.v3n-side { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 5px; min-width: 24px; }
.v3n-side time { font-size: 11.5px; color: rgba(255,255,255,.75); }
.v3n-dot { width: 9px; height: 9px; }
.v3n-g { margin: 10px 0 5px 6px; font-size: 11.5px; text-transform: uppercase; letter-spacing: .08em; color: rgba(255,255,255,.8); }
.v3n-push.v3s-card { padding: 7px 7px 7px 16px; margin-bottom: 8px; }
.v3n-push-t b { font-size: 14px; } .v3n-push-t span { font-size: 12px; }
.v3n-push .v3me-gold { height: 36px; min-height: 0; padding: 0 16px; font-size: 13.5px; }
.v3n-h1 { font-size: 22px; }
.v3n-back { width: 42px; height: 42px; }
#page-notifs .v3s-top { margin-bottom: 4px; }
.v3n-mark { height: 34px; padding: 0 14px; border-radius: 999px; font-weight: 600; color: #ffe9a8; background: var(--v3-fill), var(--v3-tint); box-shadow: var(--v3-rim); }
.v3n-push-t span { display: block; }

/* ── listing depth: photo recedes while scrolling, backdrop sharpens (--p set by js/v3-home.js) ── */
@media (max-width: 640px) {
  .v3d-hero .gallery-wrap { transform-origin: 50% 0; will-change: transform, opacity, filter;
    transform: translateY(calc(var(--p, 0) * 170px)) scale(calc(1 - var(--p, 0) * .1));
    opacity: calc(1 - var(--p, 0) * .3); filter: blur(calc(var(--p, 0) * 2px)); position: relative; z-index: 0; }
}
.v3d-bg { filter: blur(calc(12px - var(--p, 0) * 5px)) saturate(1.5) brightness(calc(.7 + var(--p, 0) * .2)); }

/* the photo sinks behind these, so they always paint on top of it */
.v3d-panel, .v3d-seller, .v3d-extras, .v3d-soldnote, .v3d > section, .v3d > div:not(.v3d-hero):not(.v3d-bg):not(.v3d-cta) { position: relative; z-index: 2; }

/* ═══════════════════════════════════════════════════════════════════════════
   27. WELCOME ONBOARDING + TOUR — lagoon glass
   Phones: a full-screen sunset scene. Desktop: one glass card over a dimmed page.
   ═══════════════════════════════════════════════════════════════════════════ */
#obRoot .ob-overlay { background: rgba(3, 24, 22, .62); -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%); }
#obRoot .ob-welcome {
  position: fixed; left: 0; top: 0; width: 100%; max-width: none; height: 100vh; height: 100dvh; max-height: none;
  margin: 0; padding: calc(18px + env(safe-area-inset-top, 0px)) 22px calc(18px + env(safe-area-inset-bottom, 0px));
  border: 0; border-radius: 0; color: #fff; text-align: left; overflow-y: auto;
  display: flex; flex-direction: column;
  background:
    radial-gradient(11rem 11rem at 84% 6%, rgba(255,238,190,.85), rgba(255,190,110,.42) 45%, rgba(255,150,80,0) 72%),
    radial-gradient(26rem 18rem at 92% 8%, rgba(255,160,90,.4), transparent 66%),
    radial-gradient(23rem 15rem at 6% 40%, rgba(0,205,140,.3), transparent 62%),
    linear-gradient(180deg, #123f5c 0%, #0c5f60 45%, #053a2a 100%);
  box-shadow: none; transform: translateY(24px); opacity: 0;
  transition: opacity .4s ease, transform .5s cubic-bezier(.34,1.3,.64,1);
}
#obRoot.ob-welcome-open .ob-welcome { transform: none; opacity: 1; }
#obRoot .ob-welcome > * { position: relative; z-index: 1; }
#obRoot .ob-brand { padding: 0; gap: 10px; color: rgba(255,255,255,.92); font: 700 11px var(--v3-font, 'Sora', sans-serif); letter-spacing: .14em; }
#obRoot .ob-brand img { width: 44px; height: auto; filter: drop-shadow(0 4px 10px rgba(0,30,30,.3)); }
#obRoot .ob-skip { position: absolute; top: calc(14px + env(safe-area-inset-top, 0px)); right: 16px; z-index: 3; min-height: 38px; padding: 0 16px; border: 0; border-radius: 999px;
  color: #fff; font: 600 13px var(--v3-font, 'Sora', sans-serif); background: var(--v3-fill), var(--v3-tint); box-shadow: var(--v3-rim); }

/* progress: three capsules, the current one stretches and turns gold */
#obRoot .ob-dots { display: flex; gap: 8px; margin: 18px 0 0; }
#obRoot .ob-dot { flex: 1; height: 8px; min-height: 8px; padding: 0; border: 0; border-radius: 999px; font-size: 0; background: rgba(255,255,255,.25);
  transition: flex .45s cubic-bezier(.34,1.56,.64,1), background .3s ease; }
#obRoot .ob-dot span { display: none; }
#obRoot .ob-dot.active { flex: 2.6; background: linear-gradient(90deg, #fff0b8, #ffd45c, #f4c300); box-shadow: 0 0 14px rgba(255,210,92,.55); }

#obRoot .ob-welcome-inner { flex: 1 0 auto; display: flex; flex-direction: column; min-height: 0; padding: 8px 0; }
#obRoot .ob-slide { margin: auto 0; }
#obRoot button:focus-visible { outline-width: 2px; outline-offset: 2px; outline-color: rgba(255,240,184,.9); }
#obRoot .ob-slide.active { animation: obRise .5s cubic-bezier(.2,.8,.2,1) both; }
@keyframes obRise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
#obRoot .ob-slide-title { margin: 6px 0 10px; font: 600 clamp(28px, 8vw, 38px)/1.08 var(--v3-font, 'Sora', sans-serif); letter-spacing: -.025em; color: #fff; text-shadow: 0 2px 20px rgba(0,30,30,.35); }
#obRoot .ob-slide-title em { display: block; font-style: normal; color: #ffd27a; }
#obRoot .ob-slide-text { margin: 0; font-size: 16px; line-height: 1.55; color: rgba(255,255,255,.92); max-width: 34ch; }

/* illustration area: no box, just floating glass pieces */
#obRoot .ob-visual { background: none; border: 0; padding: 0 0 6px; margin-bottom: 8px; text-align: left; }
#obRoot .ob-visual-label { color: #ffd27a; font: 700 11px var(--v3-font, 'Sora', sans-serif); letter-spacing: .14em; }
#obRoot .ob-visual-caption { color: rgba(255,255,255,.8); font-size: 12.5px; margin-top: 12px; }
#obRoot .ob-mini-cards, #obRoot .ob-sell-steps { gap: 10px; margin-top: 14px; justify-content: flex-start; }
#obRoot .ob-mini-cards > span, #obRoot .ob-sell-steps > span {
  flex: 1; max-width: none; padding: 18px 6px 14px; border: 0; border-radius: 28px; font-size: 34px; color: #fff; text-align: center;
  background: var(--v3-fill), var(--v3-tint); -webkit-backdrop-filter: blur(22px) saturate(190%) brightness(1.06); backdrop-filter: blur(22px) saturate(190%) brightness(1.06);
  box-shadow: var(--v3-rim), var(--v3-shadow); animation: v3-float 3.6s ease-in-out infinite;
}
#obRoot .ob-mini-cards > span:nth-child(2), #obRoot .ob-sell-steps > span:nth-child(3) { animation-delay: -1.2s; transform: none; background: var(--v3-fill), var(--v3-tint); }
#obRoot .ob-mini-cards > span:nth-child(3), #obRoot .ob-sell-steps > span:nth-child(5) { animation-delay: -2.4s; }
#obRoot .ob-mini-cards small, #obRoot .ob-sell-steps small { font: 600 12px var(--v3-font, 'Sora', sans-serif); color: #fff; margin-top: 8px; }
#obRoot .ob-sell-steps b { color: #ffd27a; font-size: 18px; flex: none; }
#obRoot .ob-demo-input { margin: 14px 0 12px; padding: 0 20px; height: 56px; border-radius: 999px; color: #fff; font-size: 16px; align-items: center;
  background: var(--v3-fill), var(--v3-tint); -webkit-backdrop-filter: blur(22px) saturate(190%) brightness(1.06); backdrop-filter: blur(22px) saturate(190%) brightness(1.06);
  box-shadow: var(--v3-rim), var(--v3-shadow); }
#obRoot .ob-demo-tags { justify-content: flex-start; gap: 8px; }
#obRoot .ob-demo-tags span { padding: 8px 14px; border-radius: 999px; font-size: 12.5px; font-weight: 600; color: #3a2400; background: linear-gradient(145deg, #fff0b8, #ffd27a); }
#obRoot .ob-benefits { gap: 8px; margin-top: 18px; }
#obRoot .ob-benefits span { padding: 8px 14px; border-radius: 999px; font-size: 13px; font-weight: 600; color: #fff; background: var(--v3-fill), var(--v3-tint); box-shadow: var(--v3-rim); }
#obRoot .ob-note { padding: 14px 16px; border-radius: 24px; font-size: 13.5px; color: rgba(255,255,255,.92); background: var(--v3-fill), var(--v3-tint); box-shadow: var(--v3-rim); }
#obRoot .ob-note strong { color: #ffd27a; }

/* buttons: gold capsule primary, glass capsule secondary */
#obRoot .btn { border: 0; border-radius: 999px; min-height: 54px; padding: 0 26px; font: 700 16px var(--v3-font, 'Sora', sans-serif); transition: transform .4s cubic-bezier(.34,1.56,.64,1); }
#obRoot .btn:active { transform: scale(.95); }
#obRoot .btn-gold { color: #1a1405; background: linear-gradient(145deg, #fff0b8, #ffd45c 55%, #f4c300); box-shadow: 0 10px 26px rgba(244,195,0,.34), inset 0 1px 1px rgba(255,255,255,.7); }
#obRoot .btn-outline, #obRoot .btn-ghost { color: #fff; background: var(--v3-fill), var(--v3-tint); box-shadow: var(--v3-rim); }
#obRoot .ob-start-actions { flex-direction: column; gap: 10px; margin-top: 20px; }
#obRoot .ob-welcome-nav { flex-wrap: wrap; border: 0; margin: 0; padding: 10px 0 0; gap: 10px; justify-content: space-between; align-items: center; }
#obRoot .ob-welcome-nav #obNext { flex: 1 1 0; width: auto; height: 54px; min-width: 0; border-radius: 999px; aspect-ratio: auto; padding: 0 22px; white-space: nowrap; }
#obRoot .ob-welcome-nav #obBack { flex: none; }
#obRoot .ob-step-label { order: -1; width: 100%; text-align: center; font-size: 12px; letter-spacing: .08em; color: rgba(255,255,255,.75); flex-basis: 100%; }
#obRoot .ob-replay-note { margin: 8px 0 0; font-size: 11.5px; color: rgba(255,255,255,.7); text-align: center; }

/* coach-mark tour */
#obRoot.ob-tour-open .ob-overlay { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
#obRoot .ob-tip { border: 0; border-radius: 30px; padding: 18px 18px 16px; color: #fff;
  background: var(--v3-fill), var(--v3-tint); -webkit-backdrop-filter: blur(24px) saturate(190%) brightness(1.06); backdrop-filter: blur(24px) saturate(190%) brightness(1.06);
  box-shadow: var(--v3-rim), 0 22px 50px rgba(2,20,18,.5); }
#obRoot .ob-tip-step { color: #ffd27a; font: 700 11px var(--v3-font, 'Sora', sans-serif); letter-spacing: .12em; }
#obRoot .ob-tip-title { font: 600 18px var(--v3-font, 'Sora', sans-serif); color: #fff; }
#obRoot .ob-tip-text { color: rgba(255,255,255,.9); font-size: 14px; line-height: 1.5; }
#obRoot .ob-tour-progress { height: 6px; background: rgba(255,255,255,.2); }
#obRoot .ob-tour-progress span { background: linear-gradient(90deg, #fff0b8, #f4c300); }
#obRoot .ob-tip-next { border: 0; border-radius: 999px; min-height: 44px; padding: 0 22px; font-weight: 700; color: #1a1405; background: linear-gradient(145deg, #fff0b8, #ffd45c 55%, #f4c300); }
#obRoot .ob-tip-back, #obRoot .ob-tip-skip { color: rgba(255,255,255,.88); border-radius: 999px; }
#obRoot .ob-spotlight { border-radius: 24px; box-shadow: 0 0 0 9999px rgba(3,24,22,.6), 0 0 0 3px rgba(255,210,122,.9), 0 0 24px rgba(255,210,122,.5); }

@media (min-width: 641px) {
  #obRoot .ob-welcome { left: 50%; top: 50%; width: min(520px, calc(100vw - 48px)); height: auto; max-height: calc(100dvh - 48px); padding: 26px 30px 24px;
    border-radius: 40px; overflow: hidden; transform: translate(-50%, -46%) scale(.96); box-shadow: var(--v3-rim), 0 34px 90px rgba(0,20,18,.55); }
  #obRoot.ob-welcome-open .ob-welcome { transform: translate(-50%, -50%); }
  #obRoot .ob-welcome-inner { padding: 18px 0 6px; } #obRoot .ob-slide { margin: 0; }
  #obRoot .ob-start-actions { flex-direction: row; }
}
@media (max-height: 640px) { #obRoot .ob-slide-title { font-size: 28px; } #obRoot .ob-mini-cards > span, #obRoot .ob-sell-steps > span { padding: 12px 6px 10px; font-size: 28px; } }
@media (prefers-reduced-motion: reduce) { #obRoot .ob-slide.active, #obRoot .ob-mini-cards > span, #obRoot .ob-sell-steps > span { animation: none; } }
@media (prefers-reduced-transparency: reduce) { #obRoot .ob-tip, #obRoot .ob-overlay { background: #0c3b34; -webkit-backdrop-filter: none; backdrop-filter: none; } }
@media (max-width: 360px) { #obRoot .ob-brand { letter-spacing: .08em; font-size: 10px; } #obRoot .ob-brand img { width: 36px; } }

/* ── the gas pill and the AI orb fold into one button on scroll ── */
.v3-orb-badge { display: none; }
@media (max-width: 640px) {
  #gasBanner { transition: translate .55s cubic-bezier(.34,1.3,.64,1), scale .55s cubic-bezier(.34,1.3,.64,1), opacity .35s ease, max-width .3s, padding .3s; }
  #gasBanner.v3-merge { translate: -3px 78px; scale: .3; opacity: 0; pointer-events: none; }
  .v3-ai-float { transition: transform .35s cubic-bezier(.34,1.56,.64,1), translate .8s cubic-bezier(.34,1.25,.64,1), width .6s cubic-bezier(.34,1.35,.64,1), height .6s cubic-bezier(.34,1.35,.64,1), opacity .25s; }
  .v3-ai-float.is-min { width: 46px; height: 46px; translate: calc(78px - 100vw) 77px; }
  .v3-ai-float.is-min .v3-bars { transform: scale(.8); }
  .v3-ai-float.is-gulp { animation: v3-gulp .6s cubic-bezier(.34,1.56,.64,1) .3s; }
  .v3-orb-badge { display: flex; position: absolute; top: -5px; left: -5px; width: 20px; height: 20px; align-items: center; justify-content: center; border-radius: 50%;
    color: #3a2400; background: linear-gradient(145deg, #fff0b8, #ffd27a); box-shadow: 0 3px 8px rgba(2,20,18,.35), inset 0 1px 1px rgba(255,255,255,.7);
    scale: 0; opacity: 0; transition: scale .45s cubic-bezier(.34,1.56,.64,1) .25s, opacity .2s ease .25s; }
  .v3-ai-float.is-min .v3-orb-badge { scale: 1; opacity: 1; }
}
@keyframes v3-gulp { 0% { transform: scale(1); } 40% { transform: scale(1.22); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { #gasBanner, .v3-orb-badge { transition: none; } .v3-ai-float.is-gulp { animation: none; } }
@media (max-width: 640px) {
  #gasBanner > *, #gasBanner::before, #gasBanner::after { transition: opacity .25s ease; }
  #gasBanner.v3-merge > *, #gasBanner.v3-merge::before, #gasBanner.v3-merge::after { opacity: 0 !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   28. BROWSE — live suggestions under the search box
   ═══════════════════════════════════════════════════════════════════════════ */
.v3b-sugg { display: grid; grid-template-rows: 0fr; margin-top: 0; opacity: 0; transition: grid-template-rows .5s cubic-bezier(.34,1.3,.64,1), opacity .25s ease, margin .4s ease; }
.v3b-sugg.open { grid-template-rows: 1fr; opacity: 1; margin-top: 10px; }
.v3b-sugg-in { min-height: 0; overflow: hidden; border-radius: 30px; display: flex; flex-direction: column; padding: 0 6px;
  background: var(--v3-fill), var(--v3-tint); -webkit-backdrop-filter: blur(24px) saturate(190%) brightness(1.06); backdrop-filter: blur(24px) saturate(190%) brightness(1.06);
  box-shadow: var(--v3-rim), var(--v3-shadow); }
.v3b-sugg.open .v3b-sugg-in { padding: 6px; }
.v3b-sg-chips { display: flex; gap: 8px; padding: 6px 6px 8px; overflow-x: auto; scrollbar-width: none; }
.v3b-sg-chips::-webkit-scrollbar { display: none; }
.v3b-sg-chip { flex: none; min-height: 34px; padding: 0 14px; border: 0; border-radius: 999px; font: 600 13px var(--font-b, system-ui); color: #3a2400; cursor: pointer;
  background: linear-gradient(145deg, #fff0b8, #ffd27a); transition: transform .35s cubic-bezier(.34,1.56,.64,1); }
.v3b-sg-chip:active { transform: scale(.92); }
.v3b-sg-row { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 62px; padding: 8px 10px; border: 0; border-radius: 22px; background: none; color: #fff; text-align: left; cursor: pointer; font-family: inherit; }
.v3b-sg-row + .v3b-sg-row { box-shadow: 0 -1px 0 rgba(255,255,255,.12); }
.v3b-sg-row:active { background: rgba(255,255,255,.12); }
.v3b-sg-th { flex: none; width: 46px; height: 46px; border-radius: 15px; overflow: hidden; display: flex; align-items: center; justify-content: center; font-size: 22px; background: rgba(255,255,255,.14); }
.v3b-sg-th img { width: 100%; height: 100%; object-fit: cover; display: block; }
.v3b-sg-t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.v3b-sg-t b { font-size: 15px; font-weight: 600; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v3b-sg-t span { font-size: 12.5px; color: rgba(255,255,255,.8); }
.v3b-sg-t mark { background: none; color: #ffd27a; font-weight: 800; }
.v3b-sg-p { flex: none; font: 700 14px var(--v3-font, 'Sora', sans-serif); color: #ffd27a; }
.v3b-sg-all { display: flex; align-items: center; justify-content: center; gap: 8px; width: calc(100% - 4px); margin: 6px 2px 2px; min-height: 48px; border: 0; border-radius: 999px; cursor: pointer;
  font: 700 14.5px var(--v3-font, 'Sora', sans-serif); color: #1a1405; background: linear-gradient(145deg, #fff0b8, #ffd45c 55%, #f4c300); box-shadow: 0 8px 22px rgba(244,195,0,.3), inset 0 1px 1px rgba(255,255,255,.7); }
.v3b-sg-none { display: flex; flex-direction: column; gap: 2px; padding: 16px 14px; color: #fff; }
.v3b-sg-none span { font-size: 13px; color: rgba(255,255,255,.82); }
.v3b-sg-row.in, .v3b-sg-all.in, .v3b-sg-none.in { animation: v3-sg-in .5s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--i, 0) * 55ms + 90ms); }
@keyframes v3-sg-in { from { opacity: 0; transform: translateY(-10px) scale(.97); } to { opacity: 1; transform: none; } }
/* the category hub steps back while you are searching */
.v3b-feature, .v3b-grid, .v3b-sub, .v3b-parishes, .v3b-links { transition: opacity .35s ease, filter .35s ease; }
.v3b.has-sugg .v3b-feature, .v3b.has-sugg .v3b-grid, .v3b.has-sugg .v3b-sub, .v3b.has-sugg .v3b-parishes, .v3b.has-sugg .v3b-links { opacity: .22; filter: blur(3px); pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .v3b-sugg, .v3b-sg-row.in, .v3b-sg-all.in, .v3b-sg-none.in { animation: none; transition: none; } }
@media (prefers-reduced-transparency: reduce) { .v3b-sugg-in { background: #0f3d36; -webkit-backdrop-filter: none; backdrop-filter: none; } }
.v3b-search input, .v3b-search input:focus, .v3b-search input:focus-visible { outline: none !important; box-shadow: none !important; border: 0 !important; background: none !important; }
.v3b-search:focus-within { box-shadow: var(--v3-rim), 0 0 0 2px rgba(255,212,92,.8), var(--v3-shadow); }
.v3b-sg-t b { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
@media (max-width: 360px) { .v3b-sg-p { font-size: 12.5px; } .v3b-sg-th { width: 40px; height: 40px; } }

/* ═══════════════════════════════════════════════════════════════════════════
   29. AI ORB — living "voice" mark (no star): an aurora ring turns around a glass sphere
   whose four bars breathe like someone about to speak; and the bottom bar melts down on scroll
   ═══════════════════════════════════════════════════════════════════════════ */
.v3-bars { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 3.5px; height: 24px; color: #ffe9a8; }
.v3-bars i { display: block; width: 4px; height: 100%; border-radius: 4px; background: currentColor; transform: scaleY(.38); transform-origin: 50% 50%;
  animation: v3-eq 1.7s ease-in-out infinite; box-shadow: 0 0 8px rgba(255,226,140,.65); }
.v3-bars i:nth-child(1) { animation-delay: -.9s; }
.v3-bars i:nth-child(2) { animation-delay: -.3s; }
.v3-bars i:nth-child(3) { animation-delay: -1.3s; }
.v3-bars i:nth-child(4) { animation-delay: -.6s; }
@keyframes v3-eq { 0%, 100% { transform: scaleY(.34); } 30% { transform: scaleY(1); } 55% { transform: scaleY(.55); } 78% { transform: scaleY(.85); } }
.v3-ai-float:active .v3-bars i, .ai-fab:active .v3-bars i, .v3-ai-float:hover .v3-bars i { animation-duration: .7s; }
.ai-fab .v3-bars { color: #3a2400; }
.ai-fab .v3-bars i { box-shadow: none; }
.ai-fab { display: flex; align-items: center; justify-content: center; }

/* aurora ring */
.v3-ai-float { overflow: visible; }
.v3-ai-float::before { content: ""; position: absolute; inset: -3px; border-radius: 50%; padding: 2.5px; pointer-events: none;
  background: conic-gradient(from 0deg, #fff0b8, #ffd45c, #7ee8c0, #6fb4ff, #c9a2ff, #fff0b8);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: v3-ring 5s linear infinite; opacity: .9; }
@keyframes v3-ring { to { transform: rotate(360deg); } }
.v3-spark { clip-path: none; border-radius: 50%; width: 6px; height: 6px; margin: -3px 0 0 -3px; background: radial-gradient(circle, #fff6cf, #ffd27a); }

/* ── the bottom pill melts down to a slim capsule on scroll ── */
@media (max-width: 640px) {
  html body .mob-nav {
    transition: height .6s cubic-bezier(.34,1.35,.64,1), left .6s cubic-bezier(.34,1.35,.64,1), right .6s cubic-bezier(.34,1.35,.64,1), grid-template-columns .6s cubic-bezier(.34,1.35,.64,1), opacity .3s ease;
  }
  .mob-nav::after { transition: width .6s cubic-bezier(.34,1.35,.64,1), border-radius .6s ease; }
  .mob-nav .mn-label { max-height: 16px; overflow: hidden; transition: opacity .25s ease, max-height .45s cubic-bezier(.34,1.2,.64,1), transform .45s ease; }
  .mob-nav-post { transition: width .6s cubic-bezier(.34,1.35,.64,1), height .6s cubic-bezier(.34,1.35,.64,1), margin .5s ease, transform .4s var(--v3-spring), box-shadow .3s ease; }
  .mob-nav-item { transition: height .6s cubic-bezier(.34,1.35,.64,1); }
  .mob-nav-icon { transition: transform .5s cubic-bezier(.34,1.56,.64,1); }

  html body .mob-nav.mob-nav-compact { height: 52px; left: 68px; right: 14px; grid-template-columns: repeat(4, 1fr) 58px; }
  .mob-nav.mob-nav-compact::after { width: calc(100% - 62px); }
  .mob-nav.mob-nav-compact::before { top: 4px; bottom: 4px; width: calc((100% - 62px - 12px) / 4); }
  .mob-nav.mob-nav-compact .mn-label { display: block; opacity: 0; max-height: 0; transform: translateY(5px); }
  .mob-nav.mob-nav-compact .mob-nav-item { height: 46px; }
  .mob-nav.mob-nav-compact .mob-nav-item:has(.mob-nav-post) { width: 58px; height: 52px; }
  html body .mob-nav.mob-nav-compact .mob-nav-post { width: 52px; height: 52px; margin: 0; font-size: 26px; }
  .mob-nav.mob-nav-compact .mob-nav-icon { transform: scale(.92); }
}
@media (prefers-reduced-motion: reduce) { .v3-bars i, .v3-ai-float::before { animation: none; } .v3-bars i { transform: scaleY(.7); } html body .mob-nav, .mob-nav::after, .mob-nav .mn-label, .mob-nav-post { transition: none; } }

/* ═══════════════════════════════════════════════════════════════════════════
   30. NOTIFICATIONS GROW OUT OF THE BELL
   ═══════════════════════════════════════════════════════════════════════════ */
.v3-bell-ring { animation: v3-bellring .9s ease-in-out .1s; transform-origin: 50% 12%; }
@keyframes v3-bellring { 0%,100% { rotate: 0deg; } 15% { rotate: 16deg; } 30% { rotate: -14deg; } 45% { rotate: 10deg; } 60% { rotate: -8deg; } 75% { rotate: 4deg; } }
.v3-bell-ping::after { content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none; box-shadow: 0 0 0 0 rgba(255,210,122,.8); animation: v3-ping .9s ease-out; }
@keyframes v3-ping { to { box-shadow: 0 0 0 16px rgba(255,210,122,0); } }
.v3-pop { position: fixed; z-index: 9500; top: calc(10px + env(safe-area-inset-top, 0px)); left: 14px; right: 14px; max-width: 420px; margin-left: auto;
  display: flex; align-items: center; gap: 12px; padding: 12px 12px 12px 14px; border-radius: 30px; color: #fff;
  background: var(--v3-fill), rgba(6,40,36,.8); -webkit-backdrop-filter: blur(26px) saturate(190%) brightness(1.08); backdrop-filter: blur(26px) saturate(190%) brightness(1.08);
  box-shadow: var(--v3-rim), 0 22px 50px rgba(2,20,18,.5); will-change: transform, opacity; }
.v3-pop-ic { flex: none; width: 42px; height: 42px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 21px;
  background: linear-gradient(135deg, #fff0b8, #ffd27a); box-shadow: inset 0 1px 1px rgba(255,255,255,.7); }
.v3-pop-t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.v3-pop-t b { font: 700 12px var(--v3-font, 'Sora', sans-serif); letter-spacing: .08em; text-transform: uppercase; color: #ffd27a; }
.v3-pop-t span { font-size: 14px; line-height: 1.35; color: rgba(255,255,255,.95); }
.v3-pop-go { flex: none; min-height: 40px; padding: 0 16px; border: 0; border-radius: 999px; font: 700 14px var(--v3-font, 'Sora', sans-serif); color: #1a1405; cursor: pointer;
  background: linear-gradient(145deg, #fff0b8, #ffd45c 55%, #f4c300); box-shadow: 0 6px 16px rgba(244,195,0,.3), inset 0 1px 1px rgba(255,255,255,.7); }
.v3-pop-x { flex: none; width: 30px; height: 30px; border: 0; border-radius: 50%; font-size: 13px; color: rgba(255,255,255,.85); background: rgba(255,255,255,.14); cursor: pointer; }
.v3-pop.is-in .v3-pop-t, .v3-pop.is-in .v3-pop-go, .v3-pop.is-in .v3-pop-x { animation: v3-pop-fade .45s ease .55s backwards; }
@keyframes v3-pop-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .v3-bell-ring, .v3-bell-ping::after, .v3-pop.is-in * { animation: none; } }
@media (prefers-reduced-transparency: reduce) { .v3-pop { background: #0f3d36; -webkit-backdrop-filter: none; backdrop-filter: none; } }

/* ═══════════════════════════════════════════════════════════════════════════
   31. YAAD BRAIN CHAT — full redesign: more room, big readable findings, smooth motion
   • no big backdrop-filter surfaces (they made scrolling and opening stutter)
   • answers run edge to edge; findings are a 2-up grid of large photo cards
   • one calm slide-up (no spring overshoot), messages fade in, text is not typed out
   ═══════════════════════════════════════════════════════════════════════════ */
.ai-sheet-overlay { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(2,20,18,.55); transition: opacity .3s ease; }
.ai-sheet.ai-v2 {
  height: calc(100dvh - 8px - env(safe-area-inset-top, 0px)); border-radius: 30px 30px 0 0; border: 0;
  background:
    radial-gradient(12rem 12rem at 88% 0%, rgba(255,214,150,.28), transparent 70%),
    linear-gradient(180deg, #123f5c 0%, #0b5a5c 42%, #053a2a 100%);
  -webkit-backdrop-filter: none; backdrop-filter: none;
  box-shadow: inset 0 1px 1px rgba(255,255,255,.5), 0 -16px 44px rgba(2,20,18,.45);
  transition: transform .5s cubic-bezier(.22,1,.36,1); will-change: transform; contain: layout paint;
}
.ai-sheet.ai-v2.ai-sheet-keyboard-open { height: calc(100dvh - var(--ai-kb, 240px)); transition: transform .5s cubic-bezier(.22,1,.36,1); }
.ai-sheet.ai-v2 .ai-sheet-handle { padding: 8px 0 0; }
.ai-sheet.ai-v2 .ai-sheet-handle span { width: 38px; height: 4px; }

/* header: one slim row */
.ai-sheet.ai-v2 .ai-sheet-header { padding: 6px 14px 10px; gap: 10px; align-items: center; flex-wrap: nowrap; border: 0; background: none; }
.ai-sheet.ai-v2 .ai-sheet-title { flex: 1; min-width: 0; gap: 10px; }
.ai-sheet.ai-v2 .ai-orb { flex: none; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; position: relative; }
.ai-sheet.ai-v2 .ai-orb .v3-bars { height: 18px; gap: 3px; color: #3a2400; }
.ai-sheet.ai-v2 .ai-orb .v3-bars i { width: 3.5px; box-shadow: none; }
.ai-sheet.ai-v2 .ai-title-txt { min-width: 0; }
.ai-sheet.ai-v2 .ai-sheet-name { font-size: 18px; line-height: 1.15; }
.ai-sheet.ai-v2 .ai-sheet-sub { display: flex; align-items: center; gap: 6px; font-size: 12.5px; margin: 1px 0 0; min-width: 0; }
.ai-sheet.ai-v2 .ai-sheet-sub span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.ai-sheet.ai-v2 .ai-dot { flex: none; }
.ai-sheet.ai-v2 .ai-sheet-tools { flex: none; gap: 8px; }
.ai-sheet.ai-v2 .ai-tool-btn { width: 40px; height: 40px; min-height: 0; padding: 0; display: flex; align-items: center; justify-content: center; font-size: 0; }

/* thread */
.ai-sheet.ai-v2 .ai-sheet-body { padding: 0 12px 104px !important; scroll-behavior: auto; }
.ai-sheet.ai-v2 .ai-hero { padding: 4px 6px 6px; }
.ai-sheet.ai-v2 .ai-hero-greet { font-size: 24px; margin: 0 0 4px; }
.ai-sheet.ai-v2 .ai-hero-lead { font-size: 15px; line-height: 1.45; max-width: none; margin: 0; }
.ai-sheet.ai-v2 .ai-sheet-sugs { padding: 8px 2px 10px; margin: 0 -12px; padding-left: 14px; padding-right: 14px; gap: 8px; }
.ai-sheet.ai-v2 .sheet-sug, .ai-sheet.ai-v2 .ai-chip, .ai-sheet.ai-v2 .sheet-recent-chip { min-height: 40px; padding: 0 16px; font-size: 14.5px; -webkit-backdrop-filter: none; backdrop-filter: none;
  background: rgba(255,255,255,.14); box-shadow: inset 0 1px 1px rgba(255,255,255,.4); }
.ai-sheet.ai-v2 .ai-msg { padding: 6px 0; gap: 0; animation: aiMsgIn .28s ease both; contain: layout; }
.ai-sheet.ai-v2 .ai-msg-ai .ai-avatar, .ai-sheet.ai-v2 .ai-msg-typing .ai-avatar, .ai-sheet.ai-v2 .ai-time { display: none; }
.ai-sheet.ai-v2 .ai-col { max-width: 100%; width: 100%; gap: 10px; }
.ai-sheet.ai-v2 .ai-bubble { padding: 12px 15px; }
.ai-sheet.ai-v2 .ai-bubble-ai { border-radius: 22px 22px 22px 8px; background: rgba(255,255,255,.13); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: inset 0 1px 1px rgba(255,255,255,.35); width: fit-content; max-width: 100%; }
.ai-sheet.ai-v2 .ai-bubble-user { border-radius: 22px 22px 8px 22px; max-width: 88%; }
.ai-sheet.ai-v2 .ai-msg-user { justify-content: flex-end; }
.ai-sheet.ai-v2 .ai-text { font-size: 16px; line-height: 1.5; }
.ai-sheet.ai-v2 .ai-msg-typing .ai-bubble { display: flex; align-items: center; gap: 8px; }

/* findings: big 2-up photo cards */
.ai-sheet.ai-v2 .ai-count-tag { display: inline-flex; align-self: flex-start; align-items: center; padding: 6px 12px; border-radius: 999px; font: 700 13px var(--v3-font, 'Sora', sans-serif);
  letter-spacing: 0; text-transform: none; color: #3a2400; background: linear-gradient(145deg, #fff0b8, #ffd27a); }
.ai-sheet.ai-v2 .ai-results { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ai-sheet.ai-v2 .ai-result-card { flex-direction: column; align-items: stretch; gap: 0; padding: 6px 6px 10px; border-radius: 24px; position: relative; overflow: hidden;
  background: rgba(255,255,255,.13); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: inset 0 1px 1px rgba(255,255,255,.4), 0 8px 20px rgba(2,20,18,.25); transition: transform .25s ease; }
.ai-sheet.ai-v2 .ai-result-card:hover { transform: none; background: rgba(255,255,255,.13); }
.ai-sheet.ai-v2 .ai-result-card:active { transform: scale(.97); }
.ai-sheet.ai-v2 .ai-thumb { width: 100%; height: auto; aspect-ratio: 4 / 3; border-radius: 18px; object-fit: cover; border: 0; background: rgba(255,255,255,.12); }
.ai-sheet.ai-v2 .ai-thumb-icon { font-size: 40px; }
.ai-sheet.ai-v2 .ai-result-info { padding: 8px 6px 0; display: flex; flex-direction: column; gap: 3px; }
.ai-sheet.ai-v2 .ai-result-price { font-size: 19px; line-height: 1.15; gap: 6px; }
.ai-sheet.ai-v2 .ai-result-title { font-size: 15px; font-weight: 600; line-height: 1.3; white-space: normal; margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ai-sheet.ai-v2 .ai-result-meta { font-size: 13px; margin: 0; color: rgba(255,255,255,.85); }
.ai-sheet.ai-v2 .ai-result-arrow { display: none; }
.ai-sheet.ai-v2 .ai-badge { font-size: 11px; padding: 4px 8px; }
.ai-sheet.ai-v2 .ai-result-card.is-gone { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: 12px; padding: 10px; }
.ai-sheet.ai-v2 .ai-result-card.is-gone .ai-thumb { width: 52px; aspect-ratio: 1; }
.ai-sheet.ai-v2 .ai-result-card.is-gone .ai-result-arrow { display: block; }

/* composer: slim capsule, no wasted line */
.ai-sheet.ai-v2 .ai-sheet-input-wrap { padding: 6px 12px calc(10px + env(safe-area-inset-bottom, 0px)); background: linear-gradient(180deg, rgba(5,58,42,0), rgba(5,58,42,.92) 38%); }
.ai-sheet.ai-v2 .ai-sheet-input-bar { min-height: 56px; -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(255,255,255,.16); box-shadow: inset 0 1px 1px rgba(255,255,255,.45), 0 10px 26px rgba(2,20,18,.4); }
.ai-sheet.ai-v2 .ai-sheet-hint { margin: 6px 0 0; font-size: 12px; }
.ai-sheet.ai-v2:has(.ai-msg) .ai-sheet-hint, .ai-sheet.ai-v2.ai-sheet-keyboard-open .ai-sheet-hint { display: none; }

@media (max-width: 360px) {
  .ai-sheet.ai-v2 .ai-result-price { font-size: 17px; }
  .ai-sheet.ai-v2 .ai-result-title { font-size: 14px; }
}
@media (min-width: 641px) {
  .ai-sheet.ai-v2 { height: 100%; border-radius: 36px 0 0 36px; transition: transform .5s cubic-bezier(.22,1,.36,1); }
  .ai-sheet.ai-v2 .ai-results { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) { .ai-sheet.ai-v2, .ai-sheet-overlay, .ai-sheet.ai-v2 .ai-msg { transition: none; animation: none; } }
/* second pass: edge-to-edge thread, chip rail, bigger action targets, single-result hero */
.ai-sheet.ai-v2 .ai-sheet-chat { padding: 4px 0 8px; gap: 6px; overflow: visible; flex: none; }
.ai-sheet.ai-v2 .ai-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -12px; padding: 2px 12px 4px; }
.ai-sheet.ai-v2 .ai-chips::-webkit-scrollbar { display: none; }
.ai-sheet.ai-v2 .ai-chips .ai-chip { flex: none; white-space: nowrap; }
.ai-sheet.ai-v2 .ai-actions { gap: 6px; }
.ai-sheet.ai-v2 .ai-act { min-width: 40px; min-height: 40px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; font-size: 16px; background: rgba(255,255,255,.1); border: 0; color: #fff; }
.ai-sheet.ai-v2 .ai-act.is-on { background: linear-gradient(145deg, #fff0b8, #ffd27a); color: #3a2400; }
.ai-sheet.ai-v2 .ai-results > .ai-result-card:only-child { grid-column: 1 / -1; }
.ai-sheet.ai-v2 .ai-results > .ai-result-card:only-child .ai-thumb { aspect-ratio: 16 / 10; }
.ai-sheet.ai-v2 .sheet-btn-row, .ai-sheet.ai-v2 .ai-foot { gap: 8px; }

/* 32 · AI chat — gas answers */
.ai-gas-cta { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; margin-top: 8px; min-height: 44px; padding: 0 18px; border-radius: 999px; text-decoration: none; font: 700 14.5px var(--v3-font); color: #1a1405;
  background: linear-gradient(145deg, #fff0b8, #ffd45c 55%, #f4c300); box-shadow: 0 8px 20px rgba(244,195,0,.3), inset 0 1px 1px rgba(255,255,255,.7); transition: transform .4s var(--v3-spring); }
.ai-gas-cta:active { transform: scale(.95); }

/* 33 · AI sheet — never peek from the bottom edge when closed
   (iOS Safari's collapsing toolbar made a closed sheet's header show above the screen bottom) */
.ai-sheet:not(.open) { visibility: hidden; pointer-events: none; transform: translateY(calc(100% + 220px)); transition: transform .5s cubic-bezier(.22,1,.36,1), visibility 0s linear .5s; }
.ai-sheet.open { visibility: visible; }
@media (min-width: 641px) { .ai-sheet:not(.open) { transform: translateX(calc(100% + 40px)); } }

/* 34 · PERFORMANCE — smooth scrolling on mid-range phones
   Measured at 4x CPU throttle with 56 listing cards: 34 ms → ~21 ms per frame, long frames 21 → 3.
   • No backdrop-filter on elements that repeat in long lists (each one is its own blur pass on every scroll frame);
     they get a slightly more opaque fill instead, so the look stays the same.
   • Off-screen cards skip layout/paint entirely (content-visibility).
   • Decorative loops only run while you touch/hover the card. */
.ad-card, .ad-card *, .ad-card::before, .ad-card::after,
.my-ad-row, .my-ad-row *, .inbox-item, .inbox-item *,
.cat-row .cp-icon, .v3s-card, .ai-result-card, .ai-bubble-ai {
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}
.ad-card .ad-cat-tag, .ad-card .fresh-badge, .ad-card .trending-badge, .ad-card .photo-count-badge, .ad-card .sold-tag, .ad-card .fav-btn, .ad-card .share-btn {
  background-color: rgba(10, 36, 24, .62);
}
.ai-bubble-ai, .ai-result-card { background-color: rgba(16, 44, 31, .88); }
.ad-card { content-visibility: auto; contain-intrinsic-size: auto 420px; }
.my-ad-row, .inbox-item { content-visibility: auto; contain-intrinsic-size: auto 96px; }
.ad-card .ad-card-img::after { animation: none; opacity: 0; }
@media (hover: hover) { .ad-card:hover .ad-card-img::after { opacity: 1; animation: v3-glint 1.4s ease-in-out 1; } }

/* 35 · live visit counter (also in v3-gas.css for the gas page) */
.live-strip { display: inline-flex !important; align-items: center; gap: 6px; padding: 6px 12px !important; border-radius: 999px !important; font: 600 12.5px var(--v3-font, system-ui); color: rgba(255,255,255,.9);
  background: rgba(255,255,255,.1) !important; box-shadow: inset 0 1px 1px rgba(255,255,255,.28) !important; width: fit-content; }
.live-strip[hidden] { display: none !important; }
.live-strip b { color: #ffe08a; font-weight: 800; font-variant-numeric: tabular-nums; }
.live-sep { opacity: .5; }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: #5df2a0; box-shadow: 0 0 0 0 rgba(93,242,160,.7); animation: live-pulse 2s ease-out infinite; }
@keyframes live-pulse { 0% { box-shadow: 0 0 0 0 rgba(93,242,160,.65); } 70%, 100% { box-shadow: 0 0 0 8px rgba(93,242,160,0); } }
.lv-bump { animation: lv-bump .5s ease; }
@keyframes lv-bump { 40% { transform: scale(1.25); } }
.g-live { margin: 2px 4px 14px; }
@media (prefers-reduced-motion: reduce) { .live-dot, .lv-bump { animation: none; } }


/* 36 · swipeable photos on the home cards */
.ad-card-img .ad-strip { position: absolute; inset: 0; z-index: 1; display: flex; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; scrollbar-width: none; border-radius: inherit; }
.ad-card-img .ad-strip::-webkit-scrollbar { display: none; }
.ad-card-img .ad-strip img { flex: 0 0 100%; width: 100%; height: 100%; object-fit: cover; scroll-snap-align: center; scroll-snap-stop: always; -webkit-user-drag: none; user-select: none; animation: none !important; }
.ad-dots { position: absolute; left: 0; right: 0; bottom: 10px; z-index: 4; display: flex; justify-content: center; gap: 5px; pointer-events: none; }
.ad-dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.5); transition: width .3s cubic-bezier(.34,1.56,.64,1), background .2s; }
.ad-dots i.on { width: 18px; border-radius: 6px; background: #fff; box-shadow: 0 0 8px rgba(0,0,0,.35); }
.ad-strip-nav { display: none; }
@media (hover: hover) and (pointer: fine) {
  .ad-strip-nav { position: absolute; top: 50%; z-index: 5; width: 38px; height: 38px; margin-top: -19px; display: grid; place-items: center; border: 0; border-radius: 50%; font: 700 24px/1 system-ui; color: #fff; cursor: pointer; opacity: 0; background: rgba(8,36,30,.6); transition: opacity .25s; }
  .ad-strip-nav[hidden] { display: none; }
  .ad-strip-nav.prev { left: 10px; } .ad-strip-nav.next { right: 10px; }
  .ad-card:hover .ad-strip-nav { opacity: 1; }
}