/* ============================================================
   PARTY RADAR — clean, map-first UI (Google-Maps style)
   ============================================================ */
/* Sora — bundled locally (variable, 100–800) so the product UI never flashes a system
   fallback and works offline. SemiBold (600) for headings/elements, Medium (500) for sub-text.
   The Clubbit logo/pixel art and the mono number accents are unaffected. */
@font-face{
  font-family:'Sora';
  src:url('/fonts/sora.woff2') format('woff2');
  font-weight:100 800;
  font-style:normal;
  font-display:block;
}
:root{
  /* Safe-area insets. Take the larger of the native CSS env() and the value
     Capacitor 8's SystemBars injects (--safe-area-inset-*), so headers/nav clear
     the status & navigation bars under Android edge-to-edge AND on iOS notches. */
  --sat: max(env(safe-area-inset-top), var(--safe-area-inset-top, 0px));
  --sab: max(env(safe-area-inset-bottom), var(--safe-area-inset-bottom, 0px));
  /* tweakcn theme (light) — indigo primary, teal secondary, orange accent */
  --primary:oklch(0.5106 0.2301 276.9656);
  --secondary:oklch(0.7038 0.1230 182.5025);
  --accent:oklch(0.7686 0.1647 70.0804);
  --destructive:oklch(0.6368 0.2078 25.3313);
  --ring:oklch(0.7853 0.1041 274.7134);
  /* app roles mapped onto the theme */
  --blue:var(--primary);--blue-d:oklch(0.4200 0.2000 277);
  --red:var(--destructive);--red-d:oklch(0.5000 0.1900 25);
  --orange:var(--accent);--orange-d:oklch(0.5000 0.1200 62);
  --amber:oklch(0.8000 0.1400 85);--amber-d:oklch(0.4800 0.1000 75);
  --green:oklch(0.7227 0.1920 149.5793);--green-d:oklch(0.4800 0.1500 150);
  --gray:oklch(0.6200 0 0);
  --ink:oklch(0 0 0);--ink2:oklch(0.3211 0 0);--muted:oklch(0.4500 0 0);--faint:oklch(0.6000 0 0);
  --line:oklch(0 0 0 / 0.12);--line2:oklch(0 0 0 / 0.82);
  --card:oklch(1 0 0);--bg:oklch(0.9789 0.0082 121.6272);--mapbg:oklch(0.1900 0.020 264);--hover:oklch(0.9650 0.004 122);
  /* semantic surfaces (flip in dark mode) */
  --surface-2:#f1f3f4;--surface-3:#f8f9fa;--surface-4:#e8eaed;--tint-blue:#e8f0fe;--avatar-bg:oklch(0.95 0.006 122);
  --radius:14px;
  --shadow:0 1px 2px rgba(0,0,0,.07),0 1px 3px 1px rgba(0,0,0,.04);
  --shadow-lg:0 2px 6px rgba(0,0,0,.10),0 6px 18px rgba(0,0,0,.06);
  --font:'Sora',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'Space Mono',ui-monospace,monospace;
}
/* ---- dark theme: flip the surface/ink tokens; colored accents stay ---- */
:root[data-theme="dark"]{
  --ink:oklch(0.97 0 0);--ink2:oklch(0.86 0 0);--muted:oklch(0.70 0 0);--faint:oklch(0.58 0 0);
  --line:oklch(1 0 0 / 0.14);--line2:oklch(1 0 0 / 0.26);
  --card:oklch(0.225 0.014 285);--bg:oklch(0.16 0.014 285);--hover:oklch(0.30 0.016 285);
  --surface-2:oklch(0.29 0.016 285);--surface-3:oklch(0.255 0.015 285);--surface-4:oklch(0.32 0.016 285);
  --tint-blue:oklch(0.32 0.07 277);--avatar-bg:oklch(0.30 0.016 285);
  --shadow:0 1px 2px rgba(0,0,0,.5),0 1px 3px 1px rgba(0,0,0,.4);
  --shadow-lg:0 4px 10px rgba(0,0,0,.6),0 10px 26px rgba(0,0,0,.5);
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%;overscroll-behavior:none}
body{font-family:var(--font);color:var(--ink);background:var(--bg);overflow:hidden;position:fixed;inset:0;height:100vh;height:100dvh;width:100%;overscroll-behavior:none}

/* ── Global scroll containment ────────────────────────────────────────────
   The app shell never scrolls or rubber-bands (map is a fixed canvas). Every
   genuine scroll region below uses overflow:auto (so it does NOT scroll when
   its content fits) AND overscroll-behavior:contain (so when it DOES scroll,
   reaching an edge never chains the drag to the shell / bounces the interface).
   Fix lives here, once, rather than per-screen. */
.sheet-body,.venue-card,.report.notestep .report-inner,.ed-card,.pscreen,
.msheet-body,.rdetail-card,.evlist,.nc-list,.chat-body,.gate-cities,.dw-col,
.media-strip,.sheet-filters,.saved-sort,.chat-follow,.lb-track,.map-controls{
  overscroll-behavior:contain}
/* balance multi-word headings/subtitles so a lone word never orphans onto its own line
   (short labels/metadata use their own nowrap rules; this is only for sentence-y copy) */
.gate-card h2,.gate-card p,.chat-welcome h3,.chat-welcome p,.lc-empty-t,.lc-empty-s,
.prep-empty-t,.prep-empty-s,.nc-empty-t,.nc-empty-s,.vc-title{text-wrap:balance}
button{font-family:inherit;color:inherit;cursor:pointer;border:none;background:none}
::-webkit-scrollbar{width:0;height:0}
@media (prefers-reduced-motion: reduce){*{animation:none!important;transition:none!important}}

/* ============================================================ TOP APP BAR */
.appbar{position:absolute;top:0;left:0;right:0;z-index:24;overflow:hidden;
  padding-top:var(--sat);min-height:calc(var(--sat) + 64px);display:flex;align-items:center;
  background:var(--card);box-shadow:0 1px 3px rgba(60,64,67,.15)}
.appbar-scene{display:block;width:100%;height:auto;max-height:84px;object-fit:contain;cursor:pointer;flex:0 0 auto}
.avatar{position:absolute;left:12px;top:var(--sat);bottom:0;margin:auto 0;z-index:3;
  width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:19px;background:var(--avatar-bg);box-shadow:0 0 0 2px var(--primary),0 0 0 4px #fff}
.appbar-logo{display:flex;align-items:center;gap:8px;font-size:18px;font-weight:600;color:var(--ink);letter-spacing:.2px;cursor:pointer}
.logo-mark{width:16px;height:16px;border-radius:50% 50% 50% 0;background:var(--primary);transform:rotate(45deg);flex-shrink:0}
.logo-mascot{height:58px;width:auto;max-width:60vw;object-fit:contain;display:block}
.logo-fallback{font-size:18px;font-weight:600;color:var(--ink);letter-spacing:.2px}
.appbar-actions{position:absolute;right:10px;top:var(--sat);bottom:0;margin:auto 0;height:40px;transform:translateY(3px);z-index:3;display:flex;align-items:center;gap:4px}
.ab-ic{position:relative;width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--ink2)}
.ab-ic:active{background:var(--surface-2)}
.ab-ic svg{width:23px;height:23px}
.ic-badge{position:absolute;top:2px;right:2px;min-width:16px;height:16px;padding:0 4px;border-radius:9px;
  background:var(--red);color:#fff;font-size:9px;font-weight:600;display:flex;align-items:center;justify-content:center;line-height:1}
.ic-badge.blue{background:var(--blue)}

/* round map buttons + FABs */
.round-btn{position:absolute;z-index:15;width:44px;height:44px;border-radius:50%;background:var(--card);
  box-shadow:var(--shadow);display:flex;align-items:center;justify-content:center;color:var(--ink2)}
.round-btn:active{background:var(--surface-3)}
.round-btn svg{width:22px;height:22px}
/* search + filter chips share one horizontal scroller so nothing clips against a pinned icon */
.map-controls{position:absolute;left:0;right:0;top:calc(var(--appbar-h, 104px) + 8px);z-index:15;display:flex;align-items:center;gap:8px;
  padding:0 12px;overflow-x:auto;-webkit-overflow-scrolling:touch}
.map-controls::-webkit-scrollbar{height:0}
.search-btn{position:static;flex:0 0 auto}
.here-pill{position:absolute;right:12px;top:70px;z-index:15;display:flex;align-items:center;gap:8px;
  background:var(--card);box-shadow:var(--shadow);border-radius:24px;padding:6px 12px 6px 7px}
.here-pill:active{background:var(--surface-3)}
.hp-ava{width:28px;height:28px;border-radius:50%;background:var(--tint-blue);display:flex;align-items:center;justify-content:center;font-size:14px;box-shadow:0 0 0 2px var(--blue)}
.hp-count{font-size:12px;font-weight:600;color:#fff;background:var(--blue);border-radius:12px;padding:1px 7px;margin-left:-14px;margin-bottom:-14px;align-self:flex-end;position:relative;z-index:1}
.hp-label{font-size:13px;font-weight:500;color:var(--ink);margin-left:2px}
.hp-chev{font-size:16px;color:var(--muted);margin-left:2px}

.filter-row{display:flex;align-items:center;gap:8px;flex:0 0 auto;height:44px}
.filter-row::-webkit-scrollbar{height:0}
.fchip{flex:0 0 auto;font-size:13px;font-weight:500;color:var(--ink2);background:var(--card);box-shadow:var(--shadow);
  padding:8px 15px;border-radius:20px;white-space:nowrap;transition:background .12s}
.fchip:active{background:var(--surface-2)}
.fchip.active{background:var(--primary);color:#fff}
/* filter pills inside the list sheet: dark grey unselected, purple when active */
/* compact, naturally-sized filter pills; smooth state + tap-scale micro-interaction */
.sheet-filters .fchip{background:transparent;box-shadow:none;border:1px solid var(--line2);font-weight:600;padding:5px 11px;font-size:12px;border-radius:15px;transition:background .2s ease,color .2s ease,border-color .2s ease,transform .1s ease}
.sheet-filters .fchip.active{background:var(--primary);border-color:var(--primary);color:#fff}
.sheet-filters .fchip:active{transform:scale(.94)}
/* small search shortcut chip at the start of the sheet filter row */
.sheet-filters .fchip-ic{display:inline-flex;align-items:center;justify-content:center;padding:5px 9px;color:var(--ink2)}
.sheet-filters .fchip-ic svg{width:15px;height:15px}
.fchip-n{opacity:.55;font-weight:600;margin-left:2px}
.fchip.active .fchip-n{opacity:.85}

.fab-stack{position:absolute;right:12px;bottom:calc(92px + var(--sab));z-index:16;display:flex;flex-direction:column;gap:12px;align-items:center}
/* while the first-use tooltip is up, open extra space above the Report Vibe button so
   the tooltip never overlaps the location button (stack is bottom-anchored → the
   location button rises). Returns to normal when the tooltip dismisses. */
.fab-stack.tip-open{gap:56px}
/* MY LOCATION — secondary dark utility with a clear navigation arrow */
.fab-mini{width:48px;height:48px;border-radius:50%;background:var(--card);border:1px solid color-mix(in oklab,var(--line2) 70%,transparent);
  box-shadow:0 2px 8px rgba(0,0,0,.35);display:flex;align-items:center;justify-content:center;color:var(--ink2);font-size:19px}
.fab-mini svg{width:22px;height:22px}
.fab-mini .loc-arrow{color:color-mix(in oklab,var(--ink) 82%,#fff);transition:transform .18s ease}
.fab-mini:active{background:var(--surface-3)}
.fab-mini:active .loc-arrow{transform:translateY(-1px) scale(1.08)}
.fab-mini#radarFab{color:#8430ce}
.fab-mini#radarFab.on{background:#8430ce;color:#fff}
/* REPORT VIBE — primary Clubbit action: purple, live equalizer+ icon, subtle slow glow */
.fab-fabwrap{position:relative;display:flex;align-items:center;justify-content:center}
.fab-primary{width:56px;height:56px;border-radius:50%;background:var(--primary);color:#fff;display:flex;align-items:center;justify-content:center;line-height:1;
  box-shadow:0 4px 14px rgba(0,0,0,.4),0 0 0 0 color-mix(in oklab,var(--primary) 45%,transparent);
  animation:fabVibeGlow 3.6s ease-in-out infinite}
.fab-primary svg{width:24px;height:24px}
.fab-primary .fab-pin{width:30px;height:30px;object-fit:contain}
.fab-primary:active{background:var(--blue-d)}
@media (prefers-reduced-motion:no-preference){
  @keyframes fabVibeGlow{
    0%,100%{box-shadow:0 4px 14px rgba(0,0,0,.4),0 0 0 0 color-mix(in oklab,var(--primary) 40%,transparent)}
    50%{box-shadow:0 4px 14px rgba(0,0,0,.4),0 0 15px 4px color-mix(in oklab,var(--primary) 42%,transparent)}
  }
}
/* first-use tooltip ABOVE the Report Vibe button (auto-dismisses). Anchored to the
   button's right edge so it stays on-screen, with a downward pointer over the button —
   never extends left into the centered List button. */
.fab-tip{position:absolute;right:0;bottom:calc(100% + 10px);white-space:nowrap;
  background:var(--card);color:var(--ink);font-size:12.5px;font-weight:600;padding:7px 12px;border-radius:12px;
  border:1px solid color-mix(in oklab,var(--primary) 30%,var(--line2));box-shadow:0 4px 14px rgba(0,0,0,.45);
  opacity:0;transform:translateY(4px);transition:opacity .25s ease,transform .25s ease;pointer-events:none}
.fab-tip::after{content:"";position:absolute;top:100%;right:22px;border:6px solid transparent;border-top-color:var(--card)}
.fab-tip[hidden]{display:none}
.fab-tip.show{opacity:1;transform:translateY(0)}

.list-btn{position:absolute;left:50%;transform:translateX(-50%);bottom:calc(74px + var(--sab));z-index:15;
  display:flex;align-items:center;gap:8px;background:var(--card);box-shadow:var(--shadow-lg);border-radius:24px;padding:11px 20px;font-size:14px;font-weight:500;color:var(--ink)}
.list-btn:active{background:var(--surface-3)}
.list-btn svg{width:19px;height:19px;color:var(--ink2)}

/* bottom nav */
.bottomnav{position:absolute;left:0;right:0;bottom:0;z-index:27;display:flex;
  background:var(--card);border-top:1px solid var(--line);padding:11px 0 calc(var(--sab) + 16px)}
.bn{flex:1;display:flex;align-items:center;justify-content:center;color:var(--muted)}
.bn svg{width:30px;height:30px}
.bn.active{color:var(--blue)}

/* ============================================================ MAP */
.stage{position:absolute;inset:0;z-index:1}
#map{position:absolute;inset:0;z-index:0;background:var(--mapbg)}
.maplibregl-map{font-family:var(--font)}
.maplibregl-ctrl-attribution{font-size:10px!important}
.maplibregl-ctrl-bottom-right{z-index:11}
/* guarantee marker positioning even if maplibre-gl.css fails to load */
.maplibregl-marker{position:absolute;top:0;left:0;will-change:transform}
/* your-location dot */
.user-dot{width:18px;height:18px;border-radius:50%;background:var(--primary);border:3px solid #fff;z-index:500;
  box-shadow:0 0 0 6px oklch(0.5106 0.2301 276.9656 / 0.22),0 1px 3px rgba(0,0,0,.5)}

/* location gate */
.gate{position:fixed;inset:0;z-index:80;display:flex;align-items:center;justify-content:center;padding:20px;
  background:rgba(20,21,28,.6);backdrop-filter:blur(4px)}
.gate[hidden]{display:none}
.gate-card{background:var(--card);border-radius:20px;padding:24px 22px;max-width:360px;width:100%;text-align:center;box-shadow:var(--shadow-lg)}
.gate-card .btn{width:100%}
.gate-emoji{font-size:40px}
.gate-card h2{font-size:20px;font-weight:600;margin:8px 0 6px;color:var(--ink)}
.gate-card p{font-size:13.5px;color:var(--muted);margin-bottom:18px;line-height:1.5}
.gate-or{font-size:11px;color:var(--faint);text-transform:uppercase;letter-spacing:.6px;margin:18px 0 10px}
.gate-cities{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;max-height:168px;overflow-y:auto}
.gate-city{font-size:13px;font-weight:500;padding:8px 14px;border-radius:20px;background:oklch(0.96 0.004 122);color:var(--ink2);border:1px solid var(--line)}
.gate-city:active{background:var(--hover)}
.gate-skip{margin-top:18px;font-size:13px;color:var(--muted);font-weight:500}
.gate-status{font-size:12.5px;margin-top:10px;color:var(--muted);line-height:1.4}
.gate-status[hidden]{display:none}
.gate-status.err{color:var(--red-d)}
#radarCanvas{position:absolute;inset:0;z-index:5;pointer-events:none;display:block}
.map-overlay{position:absolute;inset:0;pointer-events:none;z-index:10}

/* pin markers (MapLibre sets position:absolute via .maplibregl-marker — don't override it) */
/* fade opacity on the INNER .pin, never the marker root — MapLibre owns the root's
   opacity for globe occlusion, so animating it there would fight and flicker. */
.pin{cursor:pointer;position:relative;opacity:1;transition:opacity .3s ease}
.pin.mk-enter{opacity:0}
.pin-count{position:absolute;top:-2px;right:-5px;min-width:14px;height:14px;padding:0 3px;border-radius:7px;
  background:radial-gradient(circle at 34% 28%, #a78bfa, #7c3aed 82%);color:#fff;font-size:9.5px;font-weight:600;line-height:14px;text-align:center;
  box-shadow:0 1px 3px rgba(0,0,0,.5);border:1.25px solid var(--card);z-index:7;pointer-events:none}
/* zoomed-out count bubble (how many venues in a city) — the visible circle is the
   inner .cl-in so it can fade in/out independently of the marker root's occlusion. */
/* ---- city cluster bubbles (always Clubbit purple) ---- */
.cluster{cursor:pointer;display:flex;align-items:center;justify-content:center}
.cl-in{display:flex;align-items:center;justify-content:center;
  min-width:31px;height:31px;padding:0 8px;border-radius:999px;
  background:radial-gradient(circle at 34% 28%, #a78bfa, #7c3aed 78%);
  border:1.5px solid rgba(255,255,255,.9);
  box-shadow:0 3px 10px rgba(0,0,0,.5),0 0 10px 1px rgba(124,58,237,.35);
  color:#fff;font:800 13px/1 'DM Sans',sans-serif;letter-spacing:.3px;
  opacity:1;transition:opacity .3s ease, transform .12s}
.cluster.has-pop .cl-in{box-shadow:0 3px 11px rgba(0,0,0,.5),0 0 18px 5px rgba(168,85,247,.55)}
.cl-in.mk-enter{opacity:0}
.cluster:active .cl-in{transform:scale(.9)}
.cl-count{pointer-events:none;text-shadow:0 1px 2px rgba(0,0,0,.35)}
/* ---- close-venue cluster (2+ pins that sit right on top of each other) — ONE clean
   circular Clubbit object with the count centred inside and a soft purple glow. No
   floating count badge, no child moon/star badges, no stacked outlines. Tapping it
   zooms the camera in until the real pins separate. ---- */
.cluster-pin{cursor:pointer;position:relative;opacity:1;transition:opacity .3s ease}
.cluster-pin.mk-enter{opacity:0}
.cp-dot{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 34% 28%, #9d7bf5, #6d28d9 84%);
  border:2px solid rgba(210,192,255,.88);color:#fff;font:800 13px/1 'DM Sans',sans-serif;letter-spacing:.2px;
  box-shadow:0 3px 9px rgba(0,0,0,.5),0 0 9px 1px rgba(124,58,237,.4);
  transition:transform .2s cubic-bezier(.2,.8,.3,1.2),box-shadow .3s ease,opacity .3s ease}
.cp-dot.mk-enter{opacity:0}
.cluster-pin.has-pop .cp-dot{background:radial-gradient(circle at 34% 28%, #c98bf5, #a11fce 84%);
  box-shadow:0 3px 10px rgba(0,0,0,.5),0 0 16px 4px rgba(200,80,230,.55)}
.cluster-pin:hover .cp-dot{transform:scale(1.07)}
.cluster-pin:active .cp-dot{transform:scale(.9)}
.cp-num{pointer-events:none;text-shadow:0 1px 2px rgba(0,0,0,.4)}
/* ---- venue pins: ONE purple base for every venue; category = the centre icon,
   activity = purple intensity/glow. No per-category body colours. ---- */
.pin{position:relative}
.pin-body{position:relative;width:32px;height:32px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);
  display:flex;align-items:center;justify-content:center;
  background:#6d40e0;border:2px solid rgba(206,182,255,.72);box-shadow:0 3px 7px rgba(0,0,0,.42);
  transition:transform .4s cubic-bezier(.2,.8,.3,1.2), box-shadow .42s ease, background .42s ease, border-color .42s ease, opacity .3s ease}
.pin-body::before{content:"";position:absolute;inset:2px;border-radius:inherit;pointer-events:none;
  background:radial-gradient(circle at 32% 26%, rgba(255,255,255,.28), rgba(255,255,255,0) 60%)}
.pin:hover .pin-body{transform:rotate(-45deg) scale(1.08)}
.pin-ic{transform:rotate(45deg);color:#fff;display:flex;align-items:center;justify-content:center;
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.35))}
.pin-ic svg{width:15px;height:15px;display:block}
/* crowd ramp: dark(closed) → muted violet(quiet) → purple(steady) → electric(busy)
   → purple/magenta(popping) → bright pink(packed). Colour + glow + size all climb. */
.pin[data-state="closed"] .pin-body{background:#0f0e14;border-color:rgba(140,120,190,.28);border-width:1.5px;box-shadow:0 2px 5px rgba(0,0,0,.42);opacity:.58}
.pin[data-state="closed"] .pin-ic{opacity:.45}
.pin[data-state="closed"] .pin-body::before{opacity:.2}
.pin[data-state="quiet"] .pin-body{background:#5844ab;border-color:rgba(196,172,255,.7);box-shadow:0 2px 6px rgba(0,0,0,.4)}
.pin[data-state="steady"] .pin-body{background:#6d40e0;border-color:rgba(206,182,255,.78);
  box-shadow:0 0 8px 1px rgba(124,58,237,.32),0 2px 6px rgba(0,0,0,.4)}
.pin[data-state="busy"] .pin-body{background:#8b4ff5;border-color:rgba(224,205,255,.9);transform:rotate(-45deg) scale(1.05);
  box-shadow:0 0 14px 2px rgba(139,79,245,.55),0 3px 8px rgba(0,0,0,.42)}
.pin[data-state="popping"] .pin-body{background:linear-gradient(135deg,#9b46f0,#d838d0);transform:rotate(-45deg) scale(1.09);border-color:#fff;
  box-shadow:0 0 18px 5px rgba(200,80,230,.58),0 3px 9px rgba(0,0,0,.45)}
.pin[data-state="packed"] .pin-body{background:linear-gradient(135deg,#b23bff,#ff3ba0);transform:rotate(-45deg) scale(1.12);border-color:#fff;
  box-shadow:0 0 22px 6px rgba(255,60,160,.6),0 3px 10px rgba(0,0,0,.46)}
@media (prefers-reduced-motion:no-preference){
  .pin[data-state="packed"] .pin-body{animation:pinPulse 2s ease-in-out infinite}
}
@keyframes pinPulse{
  0%,100%{box-shadow:0 0 18px 4px rgba(255,60,160,.52),0 3px 10px rgba(0,0,0,.46)}
  50%{box-shadow:0 0 28px 9px rgba(255,80,175,.66),0 3px 10px rgba(0,0,0,.46)}
}
/* selected: bigger, brighter, lifted */
.pin.sel .pin-body{background:linear-gradient(135deg,#7c3aed,#d946ef);transform:rotate(-45deg) scale(1.18);border-color:#fff;
  box-shadow:0 0 0 3px rgba(124,58,237,.4),0 0 20px 6px rgba(168,85,247,.55),0 5px 13px rgba(0,0,0,.5);z-index:6}
.pin.sel .pin-ic{opacity:1}
/* status badges — small, secondary (top-left; +N stack count stays top-right) */
.pin-badge2{position:absolute;top:0;left:0;width:8.5px;height:8.5px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;background:#20202a;border:1px solid rgba(255,255,255,.88);
  box-shadow:0 1px 2px rgba(0,0,0,.5);z-index:7}
.pin-badge2[hidden]{display:none}
.pin-badge2 svg{width:5px;height:5px}
.pin-badge2.b-closed{background:#2a2a34;color:#b9b9c6;border-color:rgba(255,255,255,.7)}
.pin-badge2.b-saved{background:#f5b301;color:#3a2a00}
.pin-badge2.b-event{background:#7c3aed;color:#fff}
/* photo pins — venue photo in a purple ring; activity shows as ring glow */
.pin.photo{padding-bottom:8px}
.pin.photo .pin-body{width:43px;height:43px;border-radius:50%;transform:none;border:2.5px solid #7c3aed;
  background:var(--card);overflow:visible;position:relative;box-shadow:0 0 10px 1px rgba(124,58,237,.3),0 2px 6px rgba(0,0,0,.45)}
.pin.photo .pin-body::before{display:none}
.pin.photo .pin-photo{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block}
.pin.photo .pin-body::after{content:"";position:absolute;bottom:-7px;left:50%;transform:translateX(-50%);
  border-left:6px solid transparent;border-right:6px solid transparent;border-top:8px solid #7c3aed}
.pin.photo:hover .pin-body{transform:scale(1.06)}
.pin.photo[data-state="closed"] .pin-body{border-color:rgba(140,120,190,.4);box-shadow:0 2px 6px rgba(0,0,0,.5);opacity:.72}
.pin.photo[data-state="closed"] .pin-photo{filter:grayscale(.6) brightness(.58)}
.pin.photo[data-state="quiet"] .pin-body{border-color:#7355c8;box-shadow:0 0 8px 1px rgba(124,58,237,.24),0 2px 6px rgba(0,0,0,.45)}
.pin.photo[data-state="steady"] .pin-body{border-color:#9068e8;box-shadow:0 0 11px 1px rgba(124,58,237,.38),0 2px 6px rgba(0,0,0,.45)}
.pin.photo[data-state="busy"] .pin-body{border-color:#a855f7;transform:scale(1.05);box-shadow:0 0 15px 3px rgba(139,79,245,.52),0 2px 7px rgba(0,0,0,.46)}
.pin.photo[data-state="popping"] .pin-body{border-color:#d946ef;transform:scale(1.09);box-shadow:0 0 20px 6px rgba(200,80,230,.56),0 3px 9px rgba(0,0,0,.48)}
.pin.photo[data-state="packed"] .pin-body{border-color:#ff3ba0;transform:scale(1.12);box-shadow:0 0 24px 7px rgba(255,60,160,.6),0 3px 10px rgba(0,0,0,.48)}
@media (prefers-reduced-motion:no-preference){
  .pin.photo[data-state="packed"] .pin-body{animation:pinPhotoPulse 2s ease-in-out infinite}
}
@keyframes pinPhotoPulse{
  0%,100%{box-shadow:0 0 20px 5px rgba(255,60,160,.52),0 3px 10px rgba(0,0,0,.48)}
  50%{box-shadow:0 0 30px 9px rgba(255,80,175,.66),0 3px 10px rgba(0,0,0,.48)}
}
.pin.photo.sel .pin-body{border-color:#fff;box-shadow:0 0 0 3px rgba(124,58,237,.4),0 0 20px 6px rgba(168,85,247,.55),0 5px 13px rgba(0,0,0,.5)}
/* neighbourhood label — a compact, PASSIVE ambient pill (never steals taps from venues).
   One horizontal glass pill: "Savamala  🔥 76". Secondary to venue pins. */
.hz-label{pointer-events:none;white-space:nowrap;opacity:.92;transition:opacity .2s ease}
.hz-label.hz-out{opacity:0}
.hz-inner{display:inline-flex;transform:translateY(-6px);transition:transform .2s ease,opacity .2s ease}
.hz-pill{display:inline-flex;align-items:center;gap:6px;max-width:170px;
  background:rgba(11,11,16,.8);border:1px solid rgba(255,255,255,.09);border-radius:11px;
  padding:3px 9px;box-shadow:0 1px 5px rgba(0,0,0,.4);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.hz-nm{font-size:11px;font-weight:600;letter-spacing:.1px;color:#fff;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:118px}
.hz-en{font-size:11px;font-weight:600;white-space:nowrap;flex:none}

.map-legend{position:absolute;left:12px;bottom:calc(var(--sheet-peek,150px) + 14px);z-index:15;
  display:flex;flex-direction:column;gap:5px;background:var(--card);border-radius:10px;box-shadow:var(--shadow);padding:9px 11px;transition:opacity .3s}
.lg-title{font-size:9px;font-weight:600;letter-spacing:.8px;color:var(--muted);text-transform:uppercase}
.lg-item{display:flex;align-items:center;gap:7px;font-size:11px;color:var(--ink2)}
.sw{width:10px;height:10px;border-radius:50%}
.sw-quiet{background:var(--gray)}.sw-heat{background:var(--blue)}.sw-busy{background:var(--amber)}
.sw-pop{background:var(--orange)}.sw-red{background:var(--red)}
.zoom-reset{position:absolute;right:12px;top:calc(var(--appbar-h, 104px) + 12px);z-index:15;font-size:12px;font-weight:500;color:var(--ink2);
  background:var(--card);box-shadow:var(--shadow);padding:9px 13px;border-radius:24px}

/* ============================================================ BOTTOM SHEET (on demand) */
/* scrim behind the sheet: blurs + locks the visible map (tap it to close); shown whenever a sheet is open */
.sheet-scrim{position:absolute;inset:0;z-index:29;background:rgba(10,12,18,.30);
  -webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);transition:opacity .25s ease}
.sheet-scrim[hidden]{display:none}
.sheet{position:absolute;left:0;right:0;bottom:0;z-index:30;height:92vh;
  background:var(--card);border-radius:18px 18px 0 0;box-shadow:0 -2px 16px rgba(60,64,67,.25);
  transform:translateY(101%);transition:transform .34s cubic-bezier(.2,.7,.25,1);
  display:flex;flex-direction:column;padding-bottom:var(--sab)}
.sheet.open{transform:translateY(0)}
/* search + filters live together at the top of the list sheet */
.sheet-controls{padding:2px 12px 6px}
.sheet-controls[hidden]{display:none}
.sheet-search{padding:0 0 8px}
.sheet-search[hidden]{display:none} /* Browse mode has no search field — Search mode reveals it */
.sheet-search .group{display:flex;line-height:28px;align-items:center;position:relative;width:100%}
.sheet-search .input{width:100%;height:38px;line-height:26px;padding:0 2.4rem 0 2.6rem;border:1px solid var(--line2);border-radius:11px;
  outline:none;background:var(--surface-2);color:var(--ink);font-family:var(--font);font-size:14px;transition:border-color .2s,box-shadow .2s,background .2s}
.sheet-search .input::placeholder{color:#9e9ea7}
/* hide the browser's native search clear (×) so only our own clear button shows */
.sheet-search .input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none;display:none}
.sheet-search .input::-webkit-search-decoration{-webkit-appearance:none}
/* focused: thin Clubbit-purple border + very subtle glow (no heavy purple halo) */
.sheet-search.focused .input{border-color:var(--primary);background:var(--card);box-shadow:0 0 0 2px color-mix(in oklab,var(--primary) 14%,transparent)}
.sheet-search .icon{position:absolute;left:.85rem;color:#9e9ea7;width:18px;height:18px;pointer-events:none}
.search-clear{position:absolute;right:.5rem;width:28px;height:28px;border:0;background:var(--surface-3);color:var(--ink2);border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer}
.search-clear[hidden]{display:none}
.search-clear svg{width:14px;height:14px}
/* subtle right-edge fade hints there are more filters to scroll to */
.sheet-filters{display:flex;gap:8px;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:2px 2px 2px 0;
  -webkit-mask-image:linear-gradient(90deg,#000 92%,transparent);mask-image:linear-gradient(90deg,#000 92%,transparent)}
.sheet-filters::-webkit-scrollbar{height:0}
.sheet-grip{display:flex;justify-content:center;padding:10px 0 6px;cursor:grab;touch-action:none}
.sheet-grip:active{cursor:grabbing}
.sheet-grip span{width:38px;height:5px;border-radius:3px;background:var(--line2)}
/* polished search empty state */
.lc-empty{text-align:center;padding:30px 20px 20px;display:flex;flex-direction:column;align-items:center}
.lc-empty-ic{font-size:34px;opacity:.9}
.lc-empty-m{width:64px;height:64px;object-fit:contain;opacity:.62;filter:grayscale(.5);margin-bottom:2px}
.lc-empty-t{font-size:15.5px;font-weight:600;color:var(--ink);margin-top:8px}
.lc-empty-s{font-size:13px;color:var(--muted);margin-top:4px;line-height:1.4;max-width:260px}
.lc-empty-btn{margin-top:15px;border:0;cursor:pointer;font-family:inherit;font-size:13px;font-weight:600;color:#fff;
  background:var(--primary);padding:9px 18px;border-radius:12px;transition:transform .1s ease,filter .15s ease}
.lc-empty-btn:active{transform:scale(.96);filter:brightness(1.08)}
.lc-empty-btn.ghost{background:transparent;color:var(--ink2);border:1px solid var(--line2)}
/* ── Saved Spots ── */
.saved-head{padding:6px 4px 10px}
.saved-title{font-size:20px;font-weight:600;color:var(--ink);line-height:1.15}
.saved-sub{font-size:13px;color:var(--muted);margin-top:2px}
.lc-empty.saved{padding:14px 20px 8px}
.lc-empty-m.big{width:64px;height:64px} /* same size as every other empty-state mascot */
/* lightweight sort control (2+ saved) */
.saved-sort{display:flex;gap:8px;padding:0 4px 12px;overflow-x:auto;scrollbar-width:none}
.saved-sort::-webkit-scrollbar{height:0}
.ss-chip{flex:0 0 auto;font-family:inherit;font-size:12px;font-weight:600;color:var(--ink2);background:transparent;
  border:1px solid var(--line2);border-radius:14px;padding:5px 12px;cursor:pointer;transition:background .18s ease,color .18s ease,border-color .18s ease,transform .1s ease}
.ss-chip.on{background:var(--primary);border-color:var(--primary);color:#fff}
.ss-chip:active{transform:scale(.94)}
/* saved cards a touch more compact than the main list (shorter photo) */
.saved-list .lc-photo{aspect-ratio:2/1;max-height:180px}
/* smooth removal when un-saving */
.lcard.removing{overflow:hidden;transition:max-height .25s ease,opacity .2s ease,margin .25s ease}
/* "That's all within N km" + wider-area affordance at the end of a deliberately-local list */
.lc-widen{display:flex;flex-direction:column;align-items:center;gap:10px;padding:6px 20px 8px;text-align:center}
.lc-widen-note{font-size:12.5px;color:var(--muted)}
.tabs{display:flex;padding:0 8px;border-bottom:1px solid var(--line)}
.tab{flex:1;font-size:12.5px;font-weight:500;color:var(--muted);padding:11px 4px;position:relative;letter-spacing:.2px}
.tab.active{color:var(--blue)}
.tab.active::after{content:"";position:absolute;left:22%;right:22%;bottom:-1px;height:3px;border-radius:3px 3px 0 0;background:var(--blue)}
/* padding-top:0 so no venue-image sliver bleeds above the sticky header; bottom padding is
   set dynamically in JS (off-screen overflow + safe-area + keyboard + breathing) */
.sheet-body{flex:1;overflow-y:auto;overflow-x:hidden;padding:0 12px 20px;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.pick-banner{background:var(--tint-blue);color:var(--blue-d);font-size:13px;font-weight:500;text-align:center;padding:10px;border-radius:10px;margin:6px 4px 10px}

.section-h{display:flex;align-items:center;justify-content:space-between;margin:8px 4px 8px}
.section-h h3{font-size:12px;font-weight:600;letter-spacing:.3px;text-transform:uppercase;color:var(--ink)}
.section-h .count{font-size:11px;color:var(--muted);font-family:var(--mono)}
/* search-results header now scrolls normally with the list (no sticky → no image bleed) */
.sheet-body .section-h{background:var(--card);margin:0 0 8px;padding:2px 4px 8px}

/* FIXED Clubbit discovery header — lives OUTSIDE the scroll body (in #sheetDisco), so it
   never moves and no venue image can ever appear underneath it. ~70px, fully opaque, with a
   subtle purple glow behind a big recognizable mascot. Hairline divider + ~12px gap to list. */
.sheet-disco{display:none} /* legacy fixed slot — the module now scrolls inside the list */
/* Compact premium "Best near you" module: the FIRST item inside the scroll list (not pinned) —
   scrolls away with the venues. Subtle elevated card with a faint purple tint + 1px border. */
.disco-h{position:relative;display:flex;align-items:center;gap:12px;margin:5px 0 11px;padding:9px 14px;overflow:hidden;
  border-radius:15px;border:1px solid color-mix(in oklab,var(--primary) 20%,var(--line));
  background:color-mix(in oklab,var(--primary) 4%,var(--card))}
/* (glow now lives on the icon circle .disco-repic, so the container ::before is off) */
.disco-h::before{display:none}
.disco-h.disco-tap{cursor:pointer}
.disco-h.disco-tap:active{transform:scale(.995)}
.disco-mascot{width:36px;height:36px;object-fit:contain;flex:none;position:relative;z-index:1;filter:drop-shadow(0 2px 6px rgba(0,0,0,.35));
  transform-origin:50% 82%;animation:drinkSway 3.6s ease-in-out infinite}
/* gentle cocktail sway — subtle idle motion, disabled for reduced-motion users */
@keyframes drinkSway{0%,100%{transform:rotate(-3deg) translateY(0)}50%{transform:rotate(3deg) translateY(-1.5px)}}
@media (prefers-reduced-motion: reduce){.disco-mascot{animation:none}}
.disco-txt{display:flex;flex-direction:column;min-width:0;flex:1;position:relative;z-index:1}
.disco-title{font-size:19px;font-weight:600;color:var(--ink);line-height:1.1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.disco-sub{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--muted);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.disco-sub b{color:var(--ink2);font-weight:600}
.disco-live{font-weight:600;letter-spacing:.4px;color:color-mix(in oklab,var(--primary) 52%,var(--ink))}
/* venue count as subtle metadata (not a button): small, muted, dark, soft border */
.disco-count{flex:none;align-self:center;position:relative;z-index:1;white-space:nowrap;
  font-size:10.5px;font-weight:600;color:var(--muted);background:rgba(0,0,0,.22);
  border:1px solid color-mix(in oklab,var(--line) 60%,transparent);border-radius:11px;padding:4px 8px}
/* Report-the-vibe "select a venue" mode: same header, slightly more active purple + an X */
.disco-h.report{border-color:color-mix(in oklab,var(--primary) 42%,var(--line));background:color-mix(in oklab,var(--primary) 9%,var(--card))}
.disco-h.report::before{display:none} /* the report icon carries the purple accent instead */
/* the Report-the-vibe (equalizer) icon in a subtle purple circle — same language as the FAB */
.disco-repic{flex:none;position:relative;z-index:1;width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  color:color-mix(in oklab,var(--primary) 62%,#fff);background:color-mix(in oklab,var(--primary) 18%,transparent);
  border:1px solid color-mix(in oklab,var(--primary) 34%,var(--line));box-shadow:0 0 10px -2px color-mix(in oklab,var(--primary) 40%,transparent)}
.disco-repic svg{width:21px;height:21px}
.disco-repic img{width:26px;height:26px;object-fit:contain}
/* X: subtle, ~38px touch target with a quieter visible circle */
.disco-x{flex:none;align-self:center;position:relative;z-index:1;width:26px;height:26px;margin:6px -2px 6px 0;border-radius:50%;cursor:pointer;
  border:1px solid color-mix(in oklab,var(--line) 60%,transparent);background:rgba(0,0,0,.18);color:var(--muted);font-size:11px;line-height:1;
  display:flex;align-items:center;justify-content:center;transition:transform .1s ease}
.disco-x:active{transform:scale(.9)}
/* "Report here" pill on each venue image while selecting a venue to report */
.lc-reportpill{position:absolute;left:9px;bottom:9px;z-index:1;display:inline-flex;align-items:center;gap:5px;
  font-size:11.5px;font-weight:600;letter-spacing:.2px;color:#fff;background:var(--primary);
  padding:6px 11px 6px 9px;border-radius:14px;box-shadow:0 2px 8px rgba(0,0,0,.35)}
.lc-reportpill svg{width:15px;height:15px}
.lc-reportpill img{width:17px;height:17px;object-fit:contain}

/* venue row */
.vrow{display:flex;align-items:center;gap:12px;padding:11px 8px;border-bottom:1px solid var(--line);cursor:pointer;transition:background .12s}
.vrow:active{background:var(--hover)}
.vscore{width:42px;height:42px;flex-shrink:0;border-radius:10px;display:flex;flex-direction:column;align-items:center;justify-content:center;
  color:#fff;font-family:var(--mono);font-weight:600;font-size:16px;line-height:1}
.vscore small{font-size:6.5px;font-weight:500;letter-spacing:.5px;opacity:.9;font-family:var(--font)}
.vmeta{flex:1;min-width:0}
.vname{font-weight:500;font-size:15px;color:var(--ink);display:flex;align-items:center;gap:6px}
.vname .verified{color:var(--blue);font-size:12px}
.vsub{font-size:12px;color:var(--muted);margin-top:2px;display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.vsub .dot{width:3px;height:3px;border-radius:50%;background:var(--line2)}
.vright{text-align:right;flex-shrink:0}
.vlabel{font-size:11px;font-weight:600;letter-spacing:.2px}
.vmom{font-size:11px;font-weight:500;margin-top:3px;font-family:var(--mono)}
.chip{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:500;padding:3px 9px;border-radius:20px;white-space:nowrap}

/* ── Airbnb-style venue card (List + Saved) ── */
/* separation via spacing only — no divider lines (photos already separate the cards) */
.lcard{cursor:pointer;padding:0;margin-bottom:22px;border:0;transition:transform .12s ease}
.lcard:last-child{margin-bottom:4px}
.lcard:active{transform:scale(.985)}
/* wide, cinematic photo (~230px) — one full card + a peek of the next */
.lc-photo{position:relative;width:100%;aspect-ratio:3/2;max-height:250px;border-radius:17px;overflow:hidden;
  background:linear-gradient(135deg,color-mix(in srgb,var(--pc) 55%,#000),var(--pc));display:flex;align-items:center;justify-content:center}
.lc-img{width:100%;height:100%;object-fit:cover;display:block}
.lc-ph{font-size:40px;filter:drop-shadow(0 2px 6px rgba(0,0,0,.4));opacity:.92}
.lcard.closed .lc-img{filter:grayscale(.4) brightness(.82)}
/* smaller, cleaner overlays with a subtle gradient for readability */
.lc-photo::before{content:"";position:absolute;inset:0 0 auto 0;height:56px;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.34),transparent)}
.lc-heart{position:absolute;top:8px;right:8px;width:30px;height:30px;border:0;background:transparent;cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center;z-index:1}
.lc-heart svg{width:23px;height:23px;fill:rgba(0,0,0,.3);stroke:#fff;stroke-width:1.7;transition:transform .18s cubic-bezier(.2,1.5,.4,1),fill .16s ease}
.lc-heart.on svg{fill:#ff385c;stroke:#fff}
.lc-heart:active svg{transform:scale(.82)}
.lc-status{position:absolute;top:9px;left:9px;font-size:10.5px;font-weight:600;letter-spacing:.2px;padding:4px 9px;border-radius:16px;background:rgba(255,255,255,.94);color:#111;box-shadow:0 1px 4px rgba(0,0,0,.25);z-index:1}
.lc-status.now{color:#0a7d34}
.lc-status.soon{color:#7a5cff} /* opens later tonight — useful info, not "closed" */
.lc-status.shut{color:#8a8a8a}
.lc-body{padding:8px 2px 0}
.lc-row1{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.lc-title{font-size:17.5px;font-weight:600;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
/* rating stays muted so it never competes with venue name / live vibe */
.lc-rating{font-size:13px;font-weight:600;color:var(--muted);opacity:.7;flex:none;white-space:nowrap}
.lc-sub{font-size:13px;color:var(--muted);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lc-hours{margin-top:1px;color:var(--ink2);font-weight:600} /* opening time slightly brighter than metadata */
/* live vibe = the hero data point: clean coloured dot + label pill (no mascot) */
.lc-badges{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:8px}
.lc-vibe{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;letter-spacing:.3px;
  padding:4px 10px;border-radius:9px;background:color-mix(in oklab,currentColor 14%,transparent)}
.lc-vibe .lc-dot{width:7px;height:7px;border-radius:50%;background:currentColor;flex:none}
/* Clubbit vibe scale: quiet → grey-purple, up through purple to high-energy pink/magenta */
.vibe-quiet{color:color-mix(in oklab,var(--primary) 32%,var(--muted))}
.vibe-steady{color:color-mix(in oklab,var(--primary) 72%,var(--ink))}
.vibe-busy{color:color-mix(in oklab,var(--primary) 96%,#fff 4%)}
.vibe-popping{color:#d63ad0}
.vibe-packed{color:#ff3d7f}
.lc-report{font-size:11.5px;color:var(--muted);margin-top:6px;letter-spacing:.1px}
.lc-entry{font-size:10.5px;font-weight:600;letter-spacing:.3px;color:var(--ink2);
  background:var(--surface-3);border:1px solid var(--line2);padding:4px 9px;border-radius:8px}

/* band colors */
.c-red{color:var(--red)}.bg-red{background:#fce8e6;color:var(--red-d)}
.c-pop{color:var(--orange-d)}.bg-pop{background:#fef0e5;color:var(--orange-d)}
.c-busy{color:var(--amber-d)}.bg-busy{background:#feefc3;color:var(--amber-d)}
.c-heat{color:var(--blue)}.bg-heat{background:var(--tint-blue);color:var(--blue-d)}
.c-chill{color:var(--muted)}.bg-chill{background:var(--surface-2);color:var(--muted)}
.c-quiet{color:var(--gray)}.bg-quiet{background:var(--surface-2);color:var(--muted)}
.c-up{color:var(--green)}.c-down{color:var(--red)}.c-steady{color:var(--muted)}

/* area card */
.acard{padding:14px;margin-bottom:10px;border-radius:var(--radius);cursor:pointer;background:var(--card);
  border:1px solid var(--line2);box-shadow:var(--shadow);transition:background .12s}
.acard:active{background:var(--hover)}
.acard-top{display:flex;align-items:center;justify-content:space-between}
.aname{font-size:16px;font-weight:500;color:var(--ink)}
.ascore{font-size:24px;font-weight:600;font-family:var(--mono);line-height:1}
.acard-sub{display:flex;gap:6px;flex-wrap:wrap;margin-top:9px}
.acard-foot{margin-top:10px;font-size:11.5px;color:var(--muted);display:flex;gap:14px;flex-wrap:wrap}
.acard-foot b{color:var(--ink2);font-weight:500}

/* radar feed */
.feed-item{display:flex;gap:11px;padding:11px 4px;border-bottom:1px solid var(--line)}
.feed-time{font-family:var(--mono);font-size:10.5px;color:var(--faint);min-width:40px;padding-top:3px}
.feed-ic{width:30px;height:30px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:14px;color:#fff}
.feed-ic.photo{position:relative;background:var(--surface-2);overflow:visible}
.feed-ic.photo img{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block}
.feed-ic.photo .feed-ic-tag{position:absolute;right:-3px;bottom:-3px;width:16px;height:16px;border-radius:50%;background:var(--card);
  display:flex;align-items:center;justify-content:center;font-size:9px;box-shadow:0 1px 3px rgba(0,0,0,.3)}
.feed-txt{flex:1;font-size:13px;color:var(--ink2);line-height:1.4}
.feed-txt .fsub{font-size:12px;font-weight:500;margin-top:1px}
.feed-txt .farea{font-size:11px;color:var(--muted)}

/* ============================================================ VENUE DETAIL */
.overlay{position:fixed;inset:0;z-index:40;display:flex;align-items:flex-end;justify-content:center}
.overlay[hidden]{display:none}
.overlay-scrim{position:absolute;inset:0;background:rgba(32,33,36,.4);animation:fade .25s}
@keyframes fade{from{opacity:0}}
.venue-card{position:relative;width:100%;max-width:520px;max-height:94vh;overflow-y:auto;background:var(--card);
  border-radius:16px 16px 0 0;box-shadow:var(--shadow-lg);animation:slideUp .3s cubic-bezier(.2,.6,.35,1);padding-bottom:var(--sab)}
@keyframes slideUp{from{transform:translateY(100%)}}
.vc-grip{position:sticky;top:0;display:flex;justify-content:center;padding:9px 0 2px;background:var(--card);z-index:5}
.vc-grip span{width:34px;height:4px;border-radius:3px;background:var(--line2)}
.vc-close{position:absolute;top:12px;right:12px;z-index:6;width:34px;height:34px;border-radius:50%;background:var(--surface-2);color:var(--ink2);font-size:16px;display:flex;align-items:center;justify-content:center}
.vc-hero{position:relative;padding:16px 18px 16px;border-bottom:1px solid var(--line)}
.vc-eyebrow{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted)}
.vc-title{font-size:22px;font-weight:500;color:var(--ink);margin:8px 0 0;display:flex;align-items:center;gap:8px;letter-spacing:-.021em}
.vc-headrow{display:flex;align-items:center;gap:12px;margin-top:8px}
.vc-headrow .vc-title{margin-top:0}
.vc-headtext{min-width:0;flex:1}
.vc-photo{width:60px;height:60px;border-radius:14px;object-fit:cover;flex:none;background:var(--hover);
  box-shadow:0 1px 3px rgba(0,0,0,.12)}

/* Party Radar score — the hero, with an activity-matched Clubbit mascot */
.pr-hero{display:flex;align-items:center;gap:14px;margin-top:16px;
  background:linear-gradient(180deg,var(--surface-3),transparent);border-radius:16px;padding:12px 14px 12px 6px}
.pr-mascot{width:74px;height:74px;object-fit:contain;flex:none;image-rendering:auto;
  filter:drop-shadow(0 4px 10px rgba(0,0,0,.35));animation:mascotIn .5s cubic-bezier(.2,1.3,.35,1) both}
.pr-mascot.m-busy,.pr-mascot.m-packed{animation:mascotBop .9s ease-in-out .5s infinite}
/* CLOSED — the closed state is integrated into this panel: dimmed sleeping mascot,
   a CLOSED / Opens label where the score sits, muted bar, and the correction pill. */
.pr-hero.closed{background:linear-gradient(180deg,color-mix(in oklab,var(--surface-3) 50%,transparent),transparent)}
.pr-hero.closed .pr-mascot{filter:drop-shadow(0 4px 10px rgba(0,0,0,.3)) grayscale(.7);opacity:.5;animation:none}
.pr-hero.closed .pr-track{background:var(--surface-3)}
.pr-closed{display:flex;flex-direction:column;line-height:1.1}
.pr-closed b{font-size:22px;font-weight:600;letter-spacing:.5px;color:var(--ink2)}
.pr-closed small{font-size:12px;font-weight:500;color:var(--muted);margin-top:3px}
@keyframes mascotIn{from{opacity:0;transform:translateY(8px) scale(.7)}to{opacity:1;transform:none}}
@keyframes mascotBop{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-5px) rotate(2deg)}}
.pr-main{flex:1;min-width:0}
.pr-top{display:flex;align-items:baseline;gap:10px}
.pr-num{font-family:var(--mono);font-weight:600;font-size:42px;line-height:1}
.pr-lab{font-size:17px;font-weight:600;letter-spacing:.3px;text-transform:uppercase}
.pr-track{height:8px;border-radius:5px;background:var(--surface-4);margin:9px 0 7px;overflow:hidden}
.pr-track i{display:block;height:100%;border-radius:5px;transition:width .5s cubic-bezier(.2,.8,.3,1)}
.pr-sub{font-size:12px;color:var(--muted);display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.pr-sub .pr-sub-lab{font-weight:600;color:var(--ink2)}

.src-tag{font-size:10px;font-weight:600;letter-spacing:.3px;padding:2px 8px;border-radius:6px}
.src-community{background:var(--tint-blue);color:var(--blue)}
.src-venue{background:#feefc3;color:var(--amber-d)}
.src-estimate{background:var(--surface-2);color:var(--muted)}
.src-live{background:#e6f4ea;color:var(--green-d)}
.src-besttime{background:var(--tint-blue);color:var(--blue-d)}
.live-busy{display:flex;align-items:center;gap:8px;margin:2px 0 14px;padding:11px 13px;border-radius:12px;background:#e6f4ea;color:var(--ink);font-size:13.5px}
.live-busy b{font-family:var(--mono);font-size:16px;color:var(--green-d)}
.live-busy .lb-src{color:var(--muted);font-size:11px;font-weight:500}
.live-busy .lb-dot{width:9px;height:9px;border-radius:50%;background:var(--green);box-shadow:0 0 0 4px rgba(52,168,83,.2)}

.vc-body{padding:16px 18px calc(var(--sab) + 28px)}
/* ── Area detail: compact night-score insight + peak card ── */
/* night score: three clear zones — [big mascot] | [label / score / bar] */
.area-ns{display:flex;align-items:stretch;gap:14px;margin-top:16px}
.area-ns-m{width:54px;height:54px;object-fit:contain;flex:none;align-self:center;filter:drop-shadow(0 2px 6px rgba(0,0,0,.4))}
.area-ns-div{width:1px;flex:none;align-self:stretch;margin:3px 0;background:color-mix(in oklab,var(--ink) 13%,transparent)}
.area-ns-main{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center;gap:6px}
.area-ns-lab{font-size:10.5px;font-weight:600;letter-spacing:.6px;text-transform:uppercase;color:var(--muted)}
.area-ns-row{display:flex;align-items:baseline;gap:9px;min-width:0}
.area-ns-score{font-family:var(--mono);line-height:1;color:var(--ink);flex:none;white-space:nowrap}
.area-ns-score b{font-size:26px;font-weight:600}
.area-ns-score small{font-size:13px;color:var(--muted);font-weight:600;margin-left:1px}
.area-ns-sep{color:color-mix(in oklab,var(--ink) 30%,transparent);font-size:13px;flex:none}
.area-ns-vibe{font-size:14px;font-weight:600;white-space:nowrap;min-width:0;overflow:hidden;text-overflow:ellipsis}
.area-ns .pr-track{height:7px;margin:3px 0 0}
/* peak-tonight insight — one line, thin low-contrast separators between the three parts */
.area-peak{display:flex;flex-direction:column;gap:7px;margin-top:16px;padding:10px 13px;border-radius:12px;
  background:color-mix(in oklab,var(--accent) 7%,var(--surface-3));border:1px solid color-mix(in oklab,var(--accent) 18%,var(--line))}
.area-peak .ap-head{display:flex;align-items:center;gap:6px}
.area-peak svg{width:13px;height:13px;color:var(--accent);flex:none}
.area-peak .ap-lab{font-size:10px;font-weight:600;letter-spacing:.4px;text-transform:uppercase;color:color-mix(in oklab,var(--accent) 80%,var(--ink));flex:none}
.area-peak .ap-info{display:flex;align-items:baseline;gap:7px;white-space:nowrap}
.area-peak .ap-time{font-size:14px;font-weight:600;color:var(--ink);flex:none;font-variant-numeric:tabular-nums}
.area-peak .ap-sep{color:color-mix(in oklab,var(--ink) 30%,transparent);flex:none;font-size:12px}
.area-peak .ap-cat{font-size:12px;color:var(--muted);min-width:0;overflow:hidden;text-overflow:ellipsis}
.area-vh{margin:20px 0 8px}
.area-vh h3{font-size:14px;font-weight:600;text-transform:none;letter-spacing:0}
.stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0 0 6px}
.stat{background:var(--surface-3);border-radius:12px;padding:11px 13px}
.stat .k{font-size:11px;color:var(--muted);font-weight:500;display:flex;align-items:center;gap:5px}
.stat .v{font-size:18px;font-weight:500;color:var(--ink);margin-top:4px;font-family:var(--mono)}
.stat .vs{font-size:11px;color:var(--muted);margin-top:2px}
.stat.wide{grid-column:1/-1}
.mom-meter{height:6px;border-radius:4px;background:var(--surface-4);overflow:hidden;margin-top:8px;position:relative}
.mom-fill{position:absolute;top:0;bottom:0;left:50%;border-radius:4px}

.owner-note{margin-top:14px;font-size:12px;color:var(--amber-d);background:#feefc3;border-radius:10px;padding:10px 12px}

/* ===== Clubbit Forecast — bars + peak + recommendation as ONE component ===== */
.forecast{margin-top:18px;border:1px solid color-mix(in oklab,var(--primary) 9%,var(--line));border-radius:16px;
  padding:13px 14px 15px;background:linear-gradient(180deg,color-mix(in oklab,var(--primary) 7%,var(--card)),var(--card))}
.forecast .section-h{margin:2px 2px 2px}
/* few bars centre as a deliberate cluster; many bars fill the width — the per-column
   max-width caps how wide 2–3 bars can spread so they never look sparse or stretched */
.fc-bars{display:flex;align-items:flex-end;justify-content:center;gap:9px;padding:20px 2px 13px}
.fc-col{flex:1 1 0;min-width:0;max-width:68px;display:flex;flex-direction:column;align-items:center;gap:7px;position:relative}
/* very subtle "opens" hint under the first bar when the venue is closed now */
.fc-opens,.fc-closes{position:absolute;top:100%;left:-4px;right:-4px;margin-top:2px;text-align:center;
  font-size:8px;font-weight:600;letter-spacing:.6px;text-transform:uppercase;white-space:nowrap}
.fc-opens{color:color-mix(in oklab,var(--primary) 52%,var(--ink))}
.fc-closes{color:color-mix(in oklab,var(--muted) 82%,transparent)}
/* fixed-height track: the bar's height:% resolves against THIS (nothing else competes),
   so a 100% bar is exactly twice a 50% bar and heights always match their labels */
.fc-track{width:100%;max-width:30px;height:78px;display:flex;align-items:flex-end;position:relative}
.fc-bar{width:100%;min-height:4px;border-radius:9px 9px 4px 4px;transform-origin:bottom;
  background:linear-gradient(180deg,color-mix(in oklab,var(--primary) 48%,transparent),color-mix(in oklab,var(--primary) 20%,transparent))}
/* pending reveal: bars sit collapsed until the forecast scrolls into view */
.forecast.fc-reveal .fc-bar{transform:scaleY(0)}
.forecast.fc-reveal .fc-pct{opacity:0}
/* then grow from zero (staggered) when it enters view */
.forecast.fc-animate .fc-bar{animation:fcGrow .5s cubic-bezier(.85,0,.15,1) both;animation-delay:calc(var(--i,0)*40ms)}
.forecast.fc-animate .fc-pct{animation:fcPctIn .3s ease both;animation-delay:calc(var(--i,0)*40ms + .16s)}
@keyframes fcPctIn{from{opacity:0}to{opacity:1}}
/* staggered fade-up of the venue card's sections when it opens (first render only —
   the quiet detail upgrade carries .vc-still so it doesn't replay) */
@keyframes vcFadeUp{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
#venueCard:not(.vc-still) .vc-hero > *,
#venueCard:not(.vc-still) .vc-body > *{animation:vcFadeUp .42s cubic-bezier(.2,.7,.3,1) both}
#venueCard:not(.vc-still) .vc-hero > *:nth-child(2){animation-delay:.04s}
#venueCard:not(.vc-still) .vc-hero > *:nth-child(3){animation-delay:.08s}
#venueCard:not(.vc-still) .vc-hero > *:nth-child(4){animation-delay:.12s}
#venueCard:not(.vc-still) .vc-hero > *:nth-child(n+5){animation-delay:.15s}
#venueCard:not(.vc-still) .vc-body > *:nth-child(1){animation-delay:.14s}
#venueCard:not(.vc-still) .vc-body > *:nth-child(2){animation-delay:.18s}
#venueCard:not(.vc-still) .vc-body > *:nth-child(3){animation-delay:.22s}
#venueCard:not(.vc-still) .vc-body > *:nth-child(4){animation-delay:.26s}
#venueCard:not(.vc-still) .vc-body > *:nth-child(5){animation-delay:.3s}
#venueCard:not(.vc-still) .vc-body > *:nth-child(6){animation-delay:.34s}
#venueCard:not(.vc-still) .vc-body > *:nth-child(n+7){animation-delay:.37s}
/* the % hugs the top of its bar (positioned per-bar inline), never scaled by the bar */
.fc-pct{position:absolute;left:-7px;right:-7px;text-align:center;font-family:var(--mono);font-size:10px;color:var(--ink2);font-weight:600;white-space:nowrap;transition:color .3s}
.fc-lab{font-size:9.5px;color:var(--muted);white-space:nowrap;font-weight:600}
/* current hour — solid Clubbit purple */
.fc-col.now .fc-bar{background:linear-gradient(180deg,var(--primary),color-mix(in oklab,var(--primary) 74%,#000))}
.fc-col.now .fc-pct{color:color-mix(in oklab,var(--primary) 68%,var(--ink))}
.fc-col.now .fc-lab{color:color-mix(in oklab,var(--primary) 62%,var(--ink));font-weight:600}
/* peak hour — a touch brighter with a soft, premium lavender glow (not neon) */
.fc-col.peak .fc-bar{background:linear-gradient(180deg,color-mix(in oklab,var(--primary) 78%,#fff 4%),color-mix(in oklab,var(--primary) 50%,transparent));
  box-shadow:0 0 9px color-mix(in oklab,var(--primary) 28%,transparent),0 0 0 1px color-mix(in oklab,var(--primary) 22%,transparent)}
.fc-col.peak .fc-pct{color:color-mix(in oklab,var(--primary) 60%,var(--ink));font-weight:600}
@keyframes fcGrow{from{transform:scaleY(0)}to{transform:scaleY(1)}}
/* CLOSED venue — same forecast, but greyed so it reads as inactive/future (the next
   opening session). Purple/active styling returns automatically once it opens. */
.forecast.fc-closed{border-color:color-mix(in oklab,var(--muted) 18%,var(--line));
  background:linear-gradient(180deg,color-mix(in oklab,var(--muted) 5%,var(--card)),var(--card))}
.forecast.fc-closed .count{color:color-mix(in oklab,var(--muted) 78%,transparent)}
.forecast.fc-closed .fc-bar{box-shadow:none;
  background:linear-gradient(180deg,color-mix(in oklab,var(--muted) 52%,transparent),color-mix(in oklab,var(--muted) 22%,transparent))}
.forecast.fc-closed .fc-pct{color:color-mix(in oklab,var(--muted) 62%,transparent)}
.forecast.fc-closed .fc-lab{color:color-mix(in oklab,var(--muted) 58%,transparent)}
.forecast.fc-closed .fc-col.peak .fc-bar{box-shadow:none;
  background:linear-gradient(180deg,color-mix(in oklab,var(--muted) 62%,transparent),color-mix(in oklab,var(--muted) 30%,transparent))}
.forecast.fc-closed .fc-col.peak .fc-pct{color:color-mix(in oklab,var(--muted) 66%,transparent);font-weight:600}
/* keep the OPENS marker readable — a subtle muted purple so the opening still stands out */
.forecast.fc-closed .fc-opens{color:color-mix(in oklab,var(--primary) 44%,var(--muted))}

/* Expected peak — premium warm-gold highlight, reads as part of the forecast */
.peak-flag{display:inline-flex;align-items:center;gap:7px;margin-top:8px;font-size:12.5px;font-weight:600;
  color:color-mix(in oklab,var(--accent) 74%,var(--ink));
  background:linear-gradient(180deg,color-mix(in oklab,var(--accent) 22%,var(--card)),color-mix(in oklab,var(--accent) 12%,var(--card)));
  border:1px solid color-mix(in oklab,var(--accent) 34%,transparent);padding:7px 13px;border-radius:22px;
  box-shadow:0 2px 12px color-mix(in oklab,var(--accent) 15%,transparent)}
.peak-flag svg{color:var(--accent);flex:none;filter:drop-shadow(0 0 4px color-mix(in oklab,var(--accent) 45%,transparent))}
.peak-flag b{color:color-mix(in oklab,var(--accent) 88%,var(--ink));font-weight:600;margin-left:2px}

/* Recommendation — Clubbit tints, never traffic-light bright; tighter than before */
.decision{margin-top:12px;border-radius:13px;padding:10px 14px}
.decision.go{background:linear-gradient(180deg,color-mix(in oklab,var(--green) 15%,var(--card)),var(--card));border:1px solid color-mix(in oklab,var(--green) 28%,transparent)}
.decision.wait{background:linear-gradient(180deg,color-mix(in oklab,var(--accent) 15%,var(--card)),var(--card));border:1px solid color-mix(in oklab,var(--accent) 26%,transparent)}
.decision.your{background:linear-gradient(180deg,color-mix(in oklab,var(--primary) 9%,var(--card)),var(--card));border:1px solid color-mix(in oklab,var(--primary) 19%,transparent)}
.decision.closed{background:linear-gradient(180deg,color-mix(in oklab,var(--primary) 13%,var(--card)),var(--card));border:1px solid color-mix(in oklab,var(--primary) 26%,transparent)}
.dec-verdict{font-size:17px;font-weight:600;letter-spacing:.2px;display:flex;align-items:center;gap:8px}
.decision.go .dec-verdict{color:color-mix(in oklab,var(--green) 62%,var(--ink))}
.decision.wait .dec-verdict{color:color-mix(in oklab,var(--accent) 66%,var(--ink))}
.decision.your .dec-verdict{color:color-mix(in oklab,var(--primary) 44%,var(--ink))}
.decision.closed .dec-verdict{color:color-mix(in oklab,var(--primary) 56%,var(--ink))}
.dec-head{font-size:13px;color:var(--ink2);margin-top:2px}
.dec-reasons{list-style:none;margin-top:7px;display:flex;flex-direction:column;gap:4px}
.dec-reasons li{font-size:13px;color:var(--ink2);display:flex;gap:8px;align-items:center}
.dec-reasons li::before{content:"";width:5px;height:5px;border-radius:50%;background:color-mix(in oklab,var(--primary) 68%,transparent);flex-shrink:0}
.decision.wait .dec-reasons li::before{background:color-mix(in oklab,var(--accent) 66%,transparent)}
.decision.go .dec-reasons li::before{background:color-mix(in oklab,var(--green) 60%,transparent)}

.vc-actions{display:flex;flex-direction:column;gap:10px;margin-top:18px}
.btn{display:flex;align-items:center;justify-content:center;gap:8px;font-size:14px;font-weight:500;padding:13px;border-radius:24px;transition:opacity .12s}
.btn:active{opacity:.85}
.btn-primary{background:var(--blue);color:#fff}
.btn-ghost{background:var(--card);border:1px solid var(--line2);color:var(--ink2)}
.btn-here{background:var(--card);border:1px solid var(--line2);color:var(--blue)}
.btn.full{grid-column:1/-1}
.btn:disabled{opacity:.5}

.pulse-row{display:flex;gap:8px;margin-top:14px;padding:12px;border-radius:12px;background:var(--tint-blue)}
.pulse-row .pq{font-size:12px;font-weight:500;color:var(--blue);align-self:center}
.pulse-btn{flex:1;font-size:13px;font-weight:500;padding:9px;border-radius:20px;background:var(--card);border:1px solid var(--line2)}
.pulse-btn:active{background:var(--hover)}
.note{text-align:center;font-size:11px;color:var(--muted);margin-top:14px}

/* ============================================================ REPORT FLOW */
.report{align-items:stretch;background:var(--card)}
/* keyboard-aware: when the soft keyboard is open (--kb > 0), shrink the report
   sheet so its bottom edge sits directly above the keyboard — keeping Back / Skip /
   Submit and the field/counter visible and reachable without dismissing it first.
   (height wins cleanly here; a `bottom` offset is ignored because .overlay's
   inset:0 over-constrains a fixed box.) */
#reportOverlay{height:calc(100% - var(--kb, 0px));transition:height .16s ease}
/* full-screen opaque backdrop so the map never shows through when the keyboard shrinks the overlay */
#reportOverlay::before{content:"";position:fixed;inset:0;background:var(--card);z-index:-1;pointer-events:none}
.report.notestep .report-inner{overflow-y:auto}
.report-inner{position:relative;width:100%;max-width:520px;margin:0 auto;display:flex;flex-direction:column;height:100%;
  padding:calc(var(--sat) + 18px) 20px calc(var(--sab) + 46px)}
.rep-head{display:flex;align-items:center;justify-content:space-between}
.rep-venue{font-size:13px;color:var(--muted)}.rep-venue b{color:var(--ink);font-weight:500}
.rep-head-r{display:flex;align-items:center;gap:13px}
.rep-count{font-size:12px;color:var(--muted);font-family:var(--mono)}
.rep-x{width:34px;height:34px;border-radius:50%;background:var(--surface-2);color:var(--ink2);font-size:16px}
.rep-progress{display:flex;gap:6px;margin:14px 0 6px}
.rep-progress i{flex:1;height:3px;border-radius:3px;background:color-mix(in oklab,var(--surface-4) 70%,transparent);transition:background .25s ease}
.rep-progress i.on{background:var(--blue)}
.rep-progress i.cur{box-shadow:0 0 7px color-mix(in oklab,var(--primary) 55%,transparent)}
/* question + cards sit in the upper area (moved up, not glued to the progress bar);
   Next stays pinned at the bottom */
.rep-q{font-size:27px;font-weight:600;text-align:center;margin:46px 0 5px;color:var(--ink);letter-spacing:-.015em}
.rep-hint{text-align:center;font-size:15px;color:var(--muted);margin-bottom:16px}
.rep-opts{display:flex;flex-direction:column;gap:13px;margin-bottom:auto}
/* report: photo/video capture step */
.rep-media{display:flex;flex-direction:column;gap:8px;align-items:center;margin-bottom:auto}
.md-req{align-self:center;margin-top:-2px;font-size:11px;font-weight:600;letter-spacing:.4px;text-transform:uppercase;
  color:color-mix(in oklab,var(--primary) 78%,var(--ink));background:color-mix(in oklab,var(--primary) 16%,var(--card));
  border:1px solid color-mix(in oklab,var(--primary) 30%,transparent);padding:3px 11px;border-radius:20px}
/* branded upload box — shorter, purple-tinted, soft glow */
.media-drop{width:100%;min-height:196px;border:1.5px solid color-mix(in oklab,var(--primary) 24%,var(--line2));border-radius:18px;
  background:linear-gradient(180deg,color-mix(in oklab,var(--primary) 10%,var(--surface-3)),var(--surface-3));
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;color:var(--muted);overflow:hidden;padding:16px;position:relative;
  box-shadow:inset 0 0 44px color-mix(in oklab,var(--primary) 8%,transparent)}
/* custom pixel-art camera with a subtle purple aura */
.media-drop .md-cam{display:flex;align-items:center;justify-content:center}
.media-drop .md-cam img{width:84px;height:auto;display:block;
  filter:drop-shadow(0 0 15px color-mix(in oklab,var(--primary) 42%,transparent)) drop-shadow(0 6px 12px rgba(0,0,0,.45))}
.media-drop .md-t{font-size:16px;font-weight:600;color:var(--ink)}
.md-actions{display:flex;flex-direction:column;gap:6px;width:100%;max-width:290px;margin-top:2px}
.md-act{display:flex;align-items:center;justify-content:center;gap:8px;padding:11px;border-radius:22px;font-size:14px;font-weight:600;
  background:var(--surface-2);color:var(--ink);border:1px solid color-mix(in oklab,var(--line2) 42%,transparent);transition:background .18s ease}
.md-act.primary{background:var(--primary);color:#fff;border-color:transparent;box-shadow:0 4px 12px color-mix(in oklab,var(--primary) 26%,transparent)}
.md-act:active{transform:scale(.99)}
/* uploaded state */
.media-drop.has{border-style:solid;border-color:var(--primary);background:#000;padding:0;box-shadow:0 0 0 1px var(--primary),0 6px 18px color-mix(in oklab,var(--primary) 20%,transparent)}
.media-preview{width:100%;height:min(54vh,430px);object-fit:cover;display:block}
.md-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:46px;height:46px;border-radius:50%;
  background:rgba(0,0,0,.45);display:flex;align-items:center;justify-content:center;color:#fff;box-shadow:0 2px 10px rgba(0,0,0,.5)}
.md-play svg{margin-left:2px}
.md-check{position:absolute;top:10px;right:10px;width:26px;height:26px;border-radius:50%;background:var(--primary);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:14px;box-shadow:0 2px 8px rgba(0,0,0,.45)}
.md-added{position:absolute;bottom:10px;left:10px;font-size:11px;font-weight:600;letter-spacing:.3px;color:#fff;
  background:color-mix(in oklab,var(--primary) 82%,#000);padding:4px 10px;border-radius:14px}
/* breathing room so "Choose a different one" isn't attached to the preview border,
   plus a little space beneath it (the uploaded state only) */
.media-retake{margin:16px 0 6px;font-size:13px;font-weight:600;color:color-mix(in oklab,var(--primary) 80%,var(--ink));
  background:color-mix(in oklab,var(--primary) 12%,transparent);border:1px solid color-mix(in oklab,var(--primary) 28%,transparent);border-radius:22px;padding:10px 18px}
/* media step only: nudge the card a little lower; Back/Next sit at the same bottom
   position as every other step (default report-inner padding) */
.report.mstep .rep-q{margin-top:40px}
/* venue page: community media strip */
.vc-media{margin-top:16px}
.media-strip{display:flex;gap:11px;overflow-x:auto;padding-bottom:4px;-webkit-overflow-scrolling:touch}
.media-strip::-webkit-scrollbar{height:0}
.media-thumb{width:120px;aspect-ratio:4/5;height:auto;flex:0 0 auto;border-radius:13px;object-fit:cover;
  background:var(--surface-2);border:1px solid color-mix(in oklab,var(--primary) 12%,var(--line2));cursor:pointer}
/* profile */
.profile{padding:4px 2px}
.prof-head{display:flex;align-items:center;gap:14px;padding:8px 4px 14px}
.prof-ava{width:60px;height:60px;border-radius:50%;background:var(--avatar-bg);display:flex;align-items:center;justify-content:center;font-size:30px;box-shadow:0 0 0 2px var(--primary),0 0 0 4px #fff;flex-shrink:0}
.prof-name{font-size:18px;font-weight:500;color:var(--ink)}
.prof-sub{font-size:12.5px;color:var(--muted);margin-top:2px}
.prof-details{background:var(--surface-3);border:1px solid var(--line);border-radius:14px;padding:4px 14px;margin:2px 0 14px}
.prof-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 0;border-bottom:1px solid var(--line)}
.prof-row:last-child{border-bottom:0}
.prk{font-size:12.5px;color:var(--muted);flex-shrink:0}
.prv{font-size:13.5px;color:var(--ink);font-weight:500;text-align:right;word-break:break-word}
.prof-signout{color:#c0392b!important}
.prof-delete{background:transparent;border:1px solid var(--red);color:var(--red)}
.prof-delete:active{background:color-mix(in oklab,var(--red) 10%,transparent)}
.prof-delete:disabled{opacity:.6}
.prof-removepic{color:var(--muted)!important}
/* profile action buttons */
.prof-actions{display:flex;gap:10px;margin:2px 0 4px}
.prof-actions .btn{flex:1}
/* edit-profile modal */
/* Edit profile — Clubbit bottom sheet */
.edit-ov{position:fixed;inset:0;z-index:1200;display:flex;align-items:flex-end;justify-content:center;padding-bottom:var(--kb,0);transition:padding-bottom .16s ease}
.edit-ov .overlay-scrim{position:absolute;inset:0;background:rgba(8,5,14,.7);backdrop-filter:blur(3px)}
.edit-sheet{position:relative;z-index:1;width:100%;max-width:520px;margin:0 auto;background:var(--card);color:var(--ink);
  border-radius:20px 20px 0 0;padding:8px 18px calc(var(--sab) + 16px);box-shadow:0 -14px 44px rgba(0,0,0,.45);
  max-height:min(94vh,720px);overflow-y:auto;animation:sheetUp .28s cubic-bezier(.2,.8,.3,1)}
@keyframes sheetUp{from{transform:translateY(100%)}to{transform:none}}
.eh-grip{display:flex;justify-content:center;padding:2px 0 4px}
.eh-grip span{width:38px;height:4px;border-radius:3px;background:var(--line2)}
.edit-x{position:absolute;top:10px;right:11px;width:28px;height:28px;border-radius:50%;background:var(--surface-3);
  color:var(--muted);font-size:13px;display:flex;align-items:center;justify-content:center;z-index:2}
.edit-x:active{background:var(--surface-4)}
.edit-sheet h3{margin:3px 0 10px;font-size:16px;font-weight:600;color:var(--ink);text-align:center}
.edit-hero{display:flex;flex-direction:column;align-items:center;gap:4px;margin:0 0 12px}
.edit-ava{width:58px;height:58px;border-radius:50%;object-fit:cover;background:var(--avatar-bg);
  box-shadow:0 0 0 2px var(--primary),0 0 0 4px var(--card)}
.edit-changephoto{background:none;color:color-mix(in oklab,var(--primary) 72%,var(--muted));font-size:12.5px;font-weight:600;padding:2px 6px}
.edit-changephoto:active{color:var(--primary)}
.ed-field{display:block;margin-bottom:9px}
.ed-field>span{display:block;font-size:11px;color:color-mix(in oklab,var(--muted) 92%,transparent);margin-bottom:5px;font-weight:500}
.ed-input{width:100%;height:44px;border-radius:12px;border:1px solid var(--line2);background:var(--surface-2);
  padding:0 14px;font-size:15px;color:var(--ink);font-family:inherit;font-weight:500}
.ed-field select.ed-input{appearance:none;-webkit-appearance:none;padding-right:38px}
.ed-input::placeholder{color:var(--muted);font-weight:400}
:root[data-theme="dark"] .ed-dob-native{color-scheme:dark}
.ed-input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px color-mix(in oklab,var(--primary) 15%,transparent)}
.ed-selwrap,.ed-dobwrap{position:relative}
.ed-chev,.ed-cal{position:absolute;top:50%;right:13px;transform:translateY(-50%);color:var(--muted);pointer-events:none}
.ed-dob{display:flex;align-items:center;justify-content:space-between;gap:8px}
.ed-dob>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ed-dob>span.ph{color:var(--muted);font-weight:400}
.ed-dob .ed-cal{position:static;transform:none;flex:none}
.ed-dob-native{position:absolute;inset:0;width:100%;height:100%;opacity:0;border:none;background:none;margin:0;padding:0}
.ed-err{color:#e05252;font-size:12.5px;min-height:15px;margin-bottom:6px}
.edit-actions{display:flex;gap:10px;margin-top:4px}
.edit-actions .btn{flex:1;height:46px}
.ed-cancel{background:var(--surface-3);color:var(--ink2);border:1px solid var(--line)}
.ed-cancel:active{background:var(--surface-4)}
.edit-actions .btn-primary:disabled{opacity:.45}
/* Change-photo action sheet */
.photo-as{position:fixed;inset:0;z-index:1320;display:flex;flex-direction:column;justify-content:flex-end;
  padding:0 10px calc(var(--sab) + 10px);gap:8px}
.photo-as-scrim{position:absolute;inset:0;background:rgba(0,0,0,.5)}
.photo-as-card{position:relative;z-index:1;background:var(--card);border:1px solid var(--line2);border-radius:16px;overflow:hidden;box-shadow:var(--shadow-lg)}
.photo-as-item{width:100%;height:52px;background:none;font-size:15px;font-weight:600;color:var(--ink);
  border-bottom:1px solid var(--line2)}
.photo-as-item:last-child{border-bottom:0}
.photo-as-item:active{background:var(--surface-3)}
.photo-as-item.danger{color:var(--red)}
.photo-as-item.cancel{font-weight:600}
/* discard-changes confirm */
.discard-ov{position:fixed;inset:0;z-index:1300;display:flex;align-items:center;justify-content:center;padding:24px}
.discard-scrim{position:absolute;inset:0;background:rgba(0,0,0,.5)}
.discard-card{position:relative;z-index:1;width:100%;max-width:320px;background:var(--card);border-radius:18px;padding:20px;text-align:center;box-shadow:var(--shadow-lg)}
.discard-t{font-size:16px;font-weight:600;color:var(--ink)}
.discard-s{font-size:13px;color:var(--muted);margin-top:6px;line-height:1.4}
.discard-actions{display:flex;gap:10px;margin-top:16px}
.discard-actions .btn{flex:1;height:44px}
.ed-danger{background:color-mix(in oklab,var(--red) 88%,#000);color:#fff}
.ed-danger:active{filter:brightness(1.1)}
/* Clubbit date-of-birth wheel picker */
.dw-ov{z-index:1340;align-items:flex-end;justify-content:center;padding:0}
.dw-ov .overlay-scrim,.gp-ov .overlay-scrim{background:rgba(8,5,14,.74);backdrop-filter:blur(3px)}
.dw-sheet{position:relative;z-index:1;width:100%;max-width:440px;background:var(--card);
  border:1px solid var(--line2);border-bottom:0;border-radius:22px 22px 0 0;
  padding:0 16px calc(var(--sab) + 16px);box-shadow:var(--shadow-lg);animation:sheetUp .26s cubic-bezier(.2,.8,.2,1)}
.dw-sheet h3{margin:2px 0 6px;font-size:16px;font-weight:600;text-align:center;color:var(--ink)}
.dw-wheels{position:relative;display:flex;gap:6px;height:200px;margin:4px 0 14px;overflow:hidden}
.dw-band{position:absolute;left:0;right:0;top:80px;height:40px;pointer-events:none;z-index:2;
  border-radius:12px;background:color-mix(in oklab,var(--primary) 12%,transparent);
  border-top:1px solid color-mix(in oklab,var(--primary) 40%,var(--line2));
  border-bottom:1px solid color-mix(in oklab,var(--primary) 40%,var(--line2))}
.dw-col{flex:1;min-width:0;height:200px;overflow-y:scroll;scroll-snap-type:y mandatory;
  padding:80px 0;text-align:center;scrollbar-width:none;-webkit-overflow-scrolling:touch;position:relative;z-index:1}
.dw-col::-webkit-scrollbar{display:none;width:0;height:0}
.dw-mon{flex:1.15}
.dw-item{height:40px;line-height:40px;scroll-snap-align:center;font-family:var(--mono);
  font-size:16px;font-weight:600;color:var(--muted);transition:color .12s,font-size .12s,font-weight .12s;white-space:nowrap}
.dw-item.on{color:var(--ink);font-weight:600;font-size:19px}
.dw-done{width:100%;height:48px;font-size:15px}
/* Gender field button (mirrors the DOB button) */
.ed-gender{display:flex;align-items:center;justify-content:space-between;gap:8px}
.ed-gender .ed-chev{position:static;transform:none;flex:none}
.ed-gender-cur{display:flex;align-items:center;gap:9px;min-width:0;overflow:hidden}
.ed-gender-cur>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ed-gface{width:26px;height:26px;border-radius:50%;object-fit:cover;background:var(--avatar-bg);flex:none}
/* Clubbit gender picker */
.gp-ov{z-index:1340;align-items:flex-end;justify-content:center;padding:0}
.gp-sheet{position:relative;z-index:1;width:100%;max-width:440px;background:var(--card);
  border:1px solid var(--line2);border-bottom:0;border-radius:22px 22px 0 0;
  padding:0 14px calc(var(--sab) + 16px);box-shadow:var(--shadow-lg);animation:sheetUp .26s cubic-bezier(.2,.8,.2,1)}
.gp-sheet h3{margin:2px 0 10px;font-size:16px;font-weight:600;text-align:center;color:var(--ink)}
.gp-list{display:flex;flex-direction:column;gap:8px}
.gp-opt{display:flex;align-items:center;gap:12px;width:100%;padding:10px 14px;min-height:60px;
  background:var(--surface-3);border:1px solid var(--line);border-radius:14px;text-align:left}
.gp-opt:active{background:var(--surface-4)}
.gp-opt.noface{padding-left:16px}
.gp-face{width:40px;height:40px;border-radius:50%;object-fit:cover;background:var(--avatar-bg);flex:none}
.gp-label{flex:1;min-width:0;font-size:15px;font-weight:600;color:var(--ink)}
.gp-check{flex:none;color:var(--primary);opacity:0;transform:scale(.7);transition:opacity .12s,transform .12s;display:flex}
.gp-opt.sel{border-color:var(--primary);background:color-mix(in oklab,var(--primary) 14%,var(--surface-3))}
.gp-opt.sel .gp-check{opacity:1;transform:scale(1)}
.gp-opt.sel .gp-label{color:var(--ink);font-weight:600}
.prof-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:4px 0}
.pstat{background:var(--surface-3);border-radius:12px;padding:14px 8px;text-align:center}
.pv{font-size:24px;font-weight:600;font-family:var(--mono);color:var(--ink)}
.pk{font-size:11px;color:var(--muted);margin-top:3px}
.prof-total{text-align:center;font-size:13px;color:var(--ink2);margin:10px 0 2px}
.prof-badges{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:10px 0 2px}
.media-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.media-cell{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:10px;background:var(--surface-2);border:1px solid var(--line);cursor:pointer}
.rep-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px;margin-bottom:auto}
.rep-opt{display:flex;align-items:center;justify-content:center;gap:11px;padding:16px;border-radius:14px;position:relative;
  background:var(--surface-3);border:1.5px solid color-mix(in oklab,var(--line2) 62%,transparent);font-size:15px;font-weight:500;color:var(--ink);
  transition:border-color .18s ease,background .18s ease,box-shadow .18s ease}
.rep-opt .emoji{font-size:26px}
.rep-opt:active{transform:scale(.99)}
/* selected — tinted gradient fill + tight, soft glow (premium, not flashy) */
.rep-opt.sel{border-color:var(--primary);color:var(--ink);
  background:linear-gradient(180deg,color-mix(in oklab,var(--primary) 20%,var(--card)),color-mix(in oklab,var(--primary) 11%,var(--card)));
  box-shadow:0 0 0 1px var(--primary),0 2px 7px color-mix(in oklab,var(--primary) 12%,transparent)}
.rep-opt.sm{padding:14px;font-size:13.5px;flex-direction:column;gap:6px}
/* small checkmark on a selected option (grid chips + full-width queue) */
/* selected checkmark: same purple circle badge as the vibe cards, vertically
   centred on the right with consistent padding — identical on every slide */
.rep-opt.sel:not(.vibe)::after{content:"✓";position:absolute;top:50%;right:14px;transform:translateY(-50%);
  width:20px;height:20px;border-radius:50%;background:var(--primary);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:600;line-height:1}
/* queue step: the DOTS carry the intensity, so card backgrounds stay very faint and
   nearly uniform (just a whisper of hue) — no card should look preselected */
.rep-opt.q0{background:var(--surface-3)}
.rep-opt.q1{background:linear-gradient(0deg,color-mix(in oklab,#8b5cf6 6%,var(--surface-3)),color-mix(in oklab,#8b5cf6 6%,var(--surface-3)))}
.rep-opt.q2{background:linear-gradient(0deg,color-mix(in oklab,var(--primary) 7%,var(--surface-3)),color-mix(in oklab,var(--primary) 7%,var(--surface-3)))}
.rep-opt.q3{background:linear-gradient(0deg,color-mix(in oklab,#c026d3 4%,var(--surface-3)),color-mix(in oklab,#c026d3 4%,var(--surface-3)))}
.rep-opt.q4{background:linear-gradient(0deg,color-mix(in oklab,#e11d8f 2%,var(--surface-3)),color-mix(in oklab,#e11d8f 2%,var(--surface-3)));border-color:color-mix(in oklab,#e11d8f 3%,var(--line2))}
/* dots + label read as one group on the left; the indicator column is a fixed
   width so labels line up whether it's dots, a star or a dash */
.rep-opt.q-opt{justify-content:flex-start;gap:13px;padding-left:20px}
.rep-opt .q-ic{display:flex;align-items:center;justify-content:center;flex:none;min-width:46px;color:var(--muted)}
/* entry: guest list = subtle gold/purple accent; other = neutral */
.rep-opt.e-guest{background:linear-gradient(0deg,color-mix(in oklab,var(--accent) 4%,var(--surface-3)),color-mix(in oklab,var(--accent) 4%,var(--surface-3)));border-color:color-mix(in oklab,var(--accent) 9%,var(--line2))}
.rep-opt.e-guest .q-ic{color:color-mix(in oklab,var(--accent) 78%,#fff)}
.rep-opt.e-other{background:var(--surface-3)}
.rep-opt.e-other .q-ic{color:color-mix(in oklab,var(--muted) 60%,transparent)}
/* entry has 7 options → slightly more compact cards + gaps (queue/vibe unaffected) */
.report.estep .rep-opt.q-opt{padding-top:13px;padding-bottom:13px}
.report.estep .rep-opts{gap:11px}
/* clearer progression: brighter active dots, dimmer inactive dots */
.q-dots circle.off{fill:color-mix(in oklab,var(--muted) 16%,transparent)}
/* None reads clearly as zero queue — its (all-inactive) dots are extra dim */
.rep-opt.q0 .q-dots circle.off{fill:color-mix(in oklab,var(--muted) 10%,transparent)}
.q-dots circle.on{fill:color-mix(in oklab,var(--primary) 90%,#fff)}
.rep-opt.q1 .q-dots circle.on{fill:color-mix(in oklab,#8b5cf6 90%,#fff)}
.rep-opt.q2 .q-dots circle.on{fill:color-mix(in oklab,var(--primary) 90%,#fff)}
.rep-opt.q3 .q-dots circle.on{fill:color-mix(in oklab,#c026d3 90%,#fff)}
.rep-opt.q4 .q-dots circle.on{fill:color-mix(in oklab,#e11d8f 88%,#fff)}
/* selected wins over the per-option aura */
.rep-opt.sel:not(.vibe){border-color:var(--primary);
  background:linear-gradient(180deg,color-mix(in oklab,var(--primary) 20%,var(--card)),color-mix(in oklab,var(--primary) 11%,var(--card)))}
/* music step — same 2-col card system as the rest of the flow, with a subtle
   per-genre colour identity: a small glowing dot on the left + a whisper of that
   hue in the card. Left-aligned so the shared right-centred checkmark reads clean.
   Selected always wins with the standard purple fill (rules below use :not(.sel)). */
.rep-grid.music .rep-opt{flex-direction:row;justify-content:flex-start;text-align:left;gap:10px;padding:14px 32px 14px 13px}
.rep-grid.music .rep-opt > span:last-child{font-size:14px;font-weight:600;color:var(--ink)}
.m-dot{width:9px;height:9px;border-radius:50%;flex:none;background:var(--muted)}
.rep-grid.music .rep-opt.m-house:not(.sel){background:color-mix(in oklab,#6733d4 9%,var(--surface-3));border-color:color-mix(in oklab,#6733d4 16%,var(--line2))}
.rep-grid.music .rep-opt.m-techno:not(.sel){background:color-mix(in oklab,#6d8bff 9%,var(--surface-3));border-color:color-mix(in oklab,#6d8bff 16%,var(--line2))}
.rep-grid.music .rep-opt.m-hiphop:not(.sel){background:color-mix(in oklab,#9b5de5 9%,var(--surface-3));border-color:color-mix(in oklab,#9b5de5 16%,var(--line2))}
.rep-grid.music .rep-opt.m-rnb:not(.sel){background:color-mix(in oklab,#c264d8 9%,var(--surface-3));border-color:color-mix(in oklab,#c264d8 16%,var(--line2))}
.rep-grid.music .rep-opt.m-afro:not(.sel){background:color-mix(in oklab,#e08b4a 8%,var(--surface-3));border-color:color-mix(in oklab,#e08b4a 15%,var(--line2))}
.rep-grid.music .rep-opt.m-comm:not(.sel){background:color-mix(in oklab,#7d6bff 9%,var(--surface-3));border-color:color-mix(in oklab,#7d6bff 16%,var(--line2))}
.rep-grid.music .rep-opt.m-latin:not(.sel){background:color-mix(in oklab,#e0559b 9%,var(--surface-3));border-color:color-mix(in oklab,#e0559b 16%,var(--line2))}
.rep-grid.music .rep-opt.m-other:not(.sel){background:var(--surface-3);border-color:color-mix(in oklab,var(--line2) 62%,transparent)}
.m-house .m-dot{background:#6733d4;box-shadow:0 0 8px color-mix(in oklab,#6733d4 62%,transparent)}
.m-techno .m-dot{background:#6d8bff;box-shadow:0 0 8px color-mix(in oklab,#6d8bff 60%,transparent)}
.m-hiphop .m-dot{background:#9b5de5;box-shadow:0 0 8px color-mix(in oklab,#9b5de5 60%,transparent)}
.m-rnb .m-dot{background:#c264d8;box-shadow:0 0 8px color-mix(in oklab,#c264d8 60%,transparent)}
.m-afro .m-dot{background:#e08b4a;box-shadow:0 0 8px color-mix(in oklab,#e08b4a 60%,transparent)}
.m-comm .m-dot{background:#7d6bff;box-shadow:0 0 8px color-mix(in oklab,#7d6bff 60%,transparent)}
.m-latin .m-dot{background:#e0559b;box-shadow:0 0 8px color-mix(in oklab,#e0559b 60%,transparent)}
.m-other .m-dot{background:var(--muted)}
/* queue step: Back/Next sit at the same bottom height as every other step (default) */
.report.qstep .report-inner{padding-bottom:calc(var(--sab) + 46px)}
/* vibe step — branded mascot "vibe cards" */
.rep-opt.vibe{justify-content:flex-start;text-align:left;gap:13px;padding:8px 14px;position:relative;overflow:hidden}
.rep-opt.vibe .rvm-wrap{flex:none;width:54px;height:54px;display:flex;align-items:center;justify-content:center}
.rep-opt.vibe .rvm{width:54px;height:54px;object-fit:contain;filter:drop-shadow(0 3px 7px rgba(0,0,0,.45))}
.rep-opt.vibe .rv-txt{display:flex;flex-direction:column;line-height:1.25;flex:1;min-width:0}
.rep-opt.vibe .rv-txt b{font-size:16px;font-weight:600;color:var(--ink)}
.rep-opt.vibe .rv-txt small{font-size:12.5px;color:var(--muted);font-weight:500}
.rep-opt.vibe .rv-check{flex:none;width:20px;height:20px;border-radius:50%;background:var(--primary);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:11px;opacity:0;transform:scale(.6);transition:opacity .18s ease,transform .18s ease}
.rep-opt.vibe.sel .rv-check{opacity:1;transform:scale(1)}
/* per-vibe personality: a subtle aura behind the mascot + matching mascot glow, building
   Dead → Chill → Popping → Packed. Unselected stays gentle so it never competes with the
   selected card; Dead is grey/asleep, Chill a clear violet so the two don't look alike. */
.rep-opt.v-dead{background:radial-gradient(140px 74px at 40px 50%,color-mix(in oklab,var(--muted) 7%,transparent),transparent 70%),var(--surface-3)}
.rep-opt.v-dead .rvm{filter:drop-shadow(0 3px 6px rgba(0,0,0,.5)) saturate(.75);opacity:.85}
.rep-opt.v-chill{background:radial-gradient(158px 88px at 42px 50%,color-mix(in oklab,#8b5cf6 20%,transparent),transparent 72%),var(--surface-3)}
.rep-opt.v-chill .rvm{filter:drop-shadow(0 3px 8px color-mix(in oklab,#8b5cf6 42%,transparent))}
.rep-opt.v-popping{background:radial-gradient(170px 94px at 44px 50%,color-mix(in oklab,#c026d3 14%,transparent),transparent 74%),var(--surface-3)}
.rep-opt.v-popping .rvm{filter:drop-shadow(0 3px 9px color-mix(in oklab,#c026d3 38%,transparent))}
.rep-opt.v-packed{background:radial-gradient(185px 104px at 46px 50%,color-mix(in oklab,#e11d8f 17%,transparent),transparent 76%),var(--surface-3);border-color:color-mix(in oklab,#e11d8f 16%,var(--line2))}
.rep-opt.v-packed .rvm{filter:drop-shadow(0 3px 10px color-mix(in oklab,#e11d8f 46%,transparent))}
/* selected wins over the per-vibe aura (higher specificity): same tinted gradient + a
   slightly brighter, tight mascot glow */
.rep-opt.vibe.sel{background:linear-gradient(180deg,color-mix(in oklab,var(--primary) 20%,var(--card)),color-mix(in oklab,var(--primary) 11%,var(--card)));border-color:var(--primary)}
.rep-opt.vibe.sel .rvm{filter:drop-shadow(0 0 9px color-mix(in oklab,var(--primary) 50%,transparent)) drop-shadow(0 3px 6px rgba(0,0,0,.4))}
/* VIBE step: make the 4 cards fill the whole screen — each stretches to share the height,
   with a bigger mascot + larger text. Scoped to the vibe step only. */
.report.vibestep .rep-opts{flex:1;justify-content:center;gap:16px;margin-bottom:0}
.report.vibestep .rep-opt.vibe{flex:1;min-height:96px;padding:14px 20px;gap:18px}
.report.vibestep .rep-opt.vibe .rvm-wrap{width:74px;height:74px}
.report.vibestep .rep-opt.vibe .rvm{width:74px;height:74px}
.report.vibestep .rep-opt.vibe .rv-txt b{font-size:20px}
.report.vibestep .rep-opt.vibe .rv-txt small{font-size:14px}
.report.vibestep .rep-q{margin:28px 0 4px}
/* QUEUE step: same fill-the-screen treatment — the options stretch to share the height */
.report.qstep .rep-opts{flex:1;justify-content:center;gap:12px;margin-bottom:0}
.report.qstep .rep-opt{flex:1;min-height:60px;font-size:16.5px;font-weight:600}
.report.qstep .rep-opt .q-ic{min-width:54px}
.report.qstep .rep-q{margin:28px 0 4px}
/* ENTRY step (7 options): stretch to fill */
.report.estep .rep-opts{flex:1;justify-content:center;gap:9px;margin-bottom:0}
.report.estep .rep-opt{flex:1;min-height:46px;font-size:15.5px;font-weight:600}
.report.estep .rep-q{margin:24px 0 4px}
/* CROWD MIX step (3 big-mascot cards): fill the space (bigger cards) with clearance above Skip */
.report.mixstep .rep-opts{flex:1;justify-content:center;gap:16px;margin-bottom:10px}
.report.mixstep .rep-opt.vibe{flex:1;min-height:96px}
/* MUSIC step (2-col grid): stretch rows to fill, but leave clearance above Skip */
.report.musicstep .rep-grid{flex:1;grid-auto-rows:minmax(0,1fr);margin-bottom:12px}
.report.musicstep .rep-q{margin:24px 0 10px}
/* subtle idle motion — energy rises with the vibe; Dead stays still (asleep) */
@media (prefers-reduced-motion:no-preference){
  .rep-opt.v-chill .rvm{animation:rvmSway 3.2s ease-in-out infinite}
  .rep-opt.v-popping .rvm{animation:rvmBob 1.5s ease-in-out infinite}
  .rep-opt.v-packed .rvm{animation:rvmBop 1s ease-in-out infinite}
}
/* Crowd mix cards — bigger mascots, a soft per-card colour identity + glow
   (women = pink/purple, even = balanced violet, men = blue/purple). Selected
   state still wins via .rep-opt.vibe.sel. */
/* fixed mascot column (same for all 3) so every text block starts at the same x
   and card heights stay equal regardless of mascot size */
/* the wrap sets the CARD height (kept moderate); the mascot itself can be larger and
   overflow it a little, so the characters grow without the card borders getting taller */
.rep-opt.v-more_women,.rep-opt.v-even,.rep-opt.v-more_men{overflow:visible}
.rep-opt.v-more_women .rvm-wrap,.rep-opt.v-even .rvm-wrap,.rep-opt.v-more_men .rvm-wrap{width:108px;height:92px;overflow:visible}
/* bigger single mascots; the man a bit larger still (his asset reads smaller),
   the hugging pair kept smaller so all three feel balanced */
.rep-opt.v-more_women .rvm{width:auto;height:124px;max-width:112px}
.rep-opt.v-more_men .rvm{width:auto;height:134px;max-width:112px}
.rep-opt.v-even .rvm{width:auto;height:78px;max-width:112px}
/* mix step: a little top space reclaimed so everything still fits */
.report.mixstep .rep-q{margin-top:20px}
.rep-opt.v-more_women{background:radial-gradient(180px 130% at 52px 50%,color-mix(in oklab,#e879f9 16%,transparent),transparent 74%),var(--surface-3)}
.rep-opt.v-more_women .rvm{filter:drop-shadow(0 3px 9px color-mix(in oklab,#e879f9 48%,transparent))}
.rep-opt.v-even{background:radial-gradient(190px 130% at 52px 50%,color-mix(in oklab,var(--primary) 17%,transparent),transparent 74%),var(--surface-3)}
.rep-opt.v-even .rvm{filter:drop-shadow(0 3px 10px color-mix(in oklab,var(--primary) 50%,transparent))}
.rep-opt.v-more_men{background:radial-gradient(180px 130% at 52px 50%,color-mix(in oklab,#6d8bff 21%,transparent),transparent 74%),var(--surface-3)}
.rep-opt.v-more_men .rvm{filter:drop-shadow(0 3px 9px color-mix(in oklab,#6d8bff 52%,transparent))}
@keyframes rvmSway{0%,100%{transform:rotate(-2deg)}50%{transform:rotate(2deg)}}
@keyframes rvmBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-2.5px)}}
@keyframes rvmBop{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-4px) rotate(2deg)}}
.rep-nav{display:flex;gap:11px;margin-top:16px}
.rep-skip{flex:0 0 auto;padding:14px 20px;border-radius:24px;background:var(--surface-2);color:var(--ink2);font-weight:500}
/* Skip = subtle centred text action sitting just above the Back/Next row */
.rep-skiprow{text-align:center;margin-bottom:8px}
.rep-skiprow + .rep-nav{margin-top:1px}
.rep-skiplink{padding:8px 18px;background:none;color:var(--muted);font-weight:500;font-size:14px;
  border:1px solid color-mix(in oklab,var(--muted) 22%,transparent);border-radius:20px}
.rep-skiplink:active{color:var(--ink2)}
.rep-next{flex:1;font-weight:600;font-size:15px;padding:14px;border-radius:24px;background:var(--primary);color:#fff;
  transition:background .2s ease,box-shadow .2s ease,opacity .2s ease}
.rep-next:not(:disabled){box-shadow:0 4px 12px color-mix(in oklab,var(--primary) 22%,transparent)}
.rep-next:disabled{background:var(--surface-4);color:color-mix(in oklab,var(--ink) 42%,transparent);box-shadow:none}
/* done screen: vertically centred block (content sits above the ambient FX) */
.rep-done{text-align:center;margin:auto 0;position:relative;z-index:1}
/* ambient nightclub lighting behind the completion moment — soft colour glows,
   faint spotlight beams and a few drifting sparkles. Low opacity, blurred, never
   harsh; sits behind all content (z-index:-1 within the .rep-done context). */
.rd-fx{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.rd-fx .rd-orb{position:absolute;border-radius:50%;filter:blur(64px);opacity:.45;mix-blend-mode:screen}
.rd-fx .o1{width:300px;height:300px;top:-64px;left:-72px;
  background:radial-gradient(circle,color-mix(in oklab,var(--primary) 72%,transparent),transparent 70%)}
.rd-fx .o2{width:280px;height:280px;top:-44px;right:-84px;
  background:radial-gradient(circle,#4f7bff,transparent 70%);opacity:.38}
.rd-fx .o3{width:240px;height:240px;bottom:64px;left:50%;margin-left:-120px;
  background:radial-gradient(circle,#4f7bff,transparent 70%);opacity:.32}
.rd-fx .rd-beam{position:absolute;top:-12%;width:150px;height:120%;filter:blur(16px);opacity:.22;transform-origin:top center;
  background:linear-gradient(to bottom,color-mix(in oklab,var(--primary) 34%,transparent),transparent 58%)}
.rd-fx .b1{left:20%;transform:rotate(15deg)}
.rd-fx .b2{right:20%;transform:rotate(-15deg);
  background:linear-gradient(to bottom,color-mix(in oklab,#4f7bff 34%,transparent),transparent 58%)}
.rd-fx .rd-spark{position:absolute;width:5px;height:5px;border-radius:50%;background:#fff;opacity:.6;
  box-shadow:0 0 8px 2px color-mix(in oklab,var(--primary) 70%,#fff)}
.rd-fx .s1{top:29%;left:23%}
.rd-fx .s2{top:21%;right:25%;background:#cbb8ff}
.rd-fx .s3{top:43%;left:15%}
.rd-fx .s4{top:37%;right:17%;background:#ffd1ec}
.rd-fx .s5{top:15%;left:41%}
.rd-fx .s6{top:51%;right:35%;background:#bcd0ff}
@media (prefers-reduced-motion: no-preference){
  .rd-fx .rd-orb{animation:rdOrb 8s ease-in-out infinite}
  .rd-fx .o2{animation-duration:10s;animation-delay:1s}
  .rd-fx .o3{animation-duration:9s;animation-delay:.5s}
  .rd-fx .rd-beam{animation:rdBeam 6s ease-in-out infinite}
  .rd-fx .b2{animation-delay:2s}
  .rd-fx .rd-spark{animation:rdFloat 5s ease-in-out infinite}
  .rd-fx .s2{animation-delay:.8s}.rd-fx .s3{animation-delay:1.6s}.rd-fx .s4{animation-delay:2.4s}
  .rd-fx .s5{animation-delay:1.2s}.rd-fx .s6{animation-delay:3s}
}
@keyframes rdOrb{0%,100%{opacity:.38}50%{opacity:.6}}
@keyframes rdBeam{0%,100%{opacity:.16}50%{opacity:.32}}
@keyframes rdFloat{0%,100%{transform:translateY(0);opacity:.3}50%{transform:translateY(-10px);opacity:.85}}
.rep-done .big{font-size:56px;margin-bottom:10px}
.rep-done h2{font-size:24px;font-weight:600;color:var(--ink);margin-top:4px}
.rep-done p{color:var(--muted);font-size:13px;line-height:1.5}
.rep-done .rd-sub{margin:10px auto 0;max-width:300px}
/* headline camera icon in place of the party emoji */
.rd-title-cam{height:1.15em;width:auto;vertical-align:-0.22em;margin-left:8px;
  filter:drop-shadow(0 2px 6px color-mix(in oklab,var(--primary) 40%,transparent))}
.rep-badge{display:inline-flex;align-items:center;gap:8px;margin-top:14px;font-size:12px;font-weight:500;color:var(--amber-d);background:#feefc3;padding:8px 15px;border-radius:20px}
/* contributor progress: a compact reward pill (dark card, soft purple border) */
.rep-levelnote{display:inline-flex;align-items:center;gap:6px;margin-top:12px;padding:7px 14px;border-radius:20px;
  background:color-mix(in oklab,var(--primary) 7%,var(--surface-3));
  border:1px solid color-mix(in oklab,var(--primary) 15%,var(--line2));
  font-size:12px;font-weight:500;color:var(--ink2)}
.rep-levelnote b{color:var(--primary);font-weight:600}
.rep-levelnote .rl-sep{color:color-mix(in oklab,var(--muted) 60%,transparent)}
.rep-levelnote .rl-next{color:var(--muted);font-weight:500}
/* Done: full-width primary button, same weight as the flow's Next buttons */
.rd-donerow{margin-top:32px}
.rep-done .rd-donerow .rep-next{width:100%;max-width:none;margin:0}
/* report: shared "vibe" backdrop for the welcome slides + done screen */
.report.vibe{background:
  radial-gradient(120% 70% at 50% 12%, #f4ecff 0%, rgba(244,236,255,0) 62%),
  linear-gradient(180deg, #faf6ff 0%, #fdfbff 46%, #ffffff 100%)}
.report.vibe .rep-venue{color:var(--muted)}
/* report: done-screen mascot — bigger, with a soft purple Clubbit aura behind it */
.rep-done .rd-mascotwrap{position:relative;display:flex;justify-content:center;align-items:flex-end;margin:0 auto 18px;width:max-content;
  animation:riPop .5s cubic-bezier(.2,.8,.3,1.2) both}
.rep-done .rd-mascotwrap::before{content:"";position:absolute;left:50%;top:52%;transform:translate(-50%,-50%);
  width:112%;height:104%;border-radius:50%;z-index:0;pointer-events:none;
  background:radial-gradient(circle,color-mix(in oklab,var(--primary) 46%,transparent) 0%,color-mix(in oklab,var(--primary) 14%,transparent) 40%,transparent 68%);filter:blur(20px);
  animation:rdAura 3.4s ease-in-out infinite}
@keyframes rdAura{0%,100%{opacity:.85;transform:translate(-50%,-50%) scale(1)}50%{opacity:1;transform:translate(-50%,-50%) scale(1.06)}}
.rep-done .rd-mascot{position:relative;z-index:1;width:180px;max-width:52vw;height:auto;margin:0;display:block;
  filter:drop-shadow(0 14px 24px rgba(124,58,237,.28))}
.rep-done .rd-mascot.solo{width:132px;max-width:38vw}
/* the dancing/sipping mascot clip carries its own motion — background keyed out per frame */
.rep-done .rd-mascot.rd-vid{width:150px;max-width:44vw;height:auto;background:transparent;
  filter:drop-shadow(0 14px 24px rgba(124,58,237,.28))}
/* a little idle dance so the popping mascot feels alive */
@media (prefers-reduced-motion: no-preference){
  .rep-done .rd-mascot.solo:not(.rd-vid){animation:rdBob 1.5s ease-in-out infinite}
}
@keyframes rdBob{0%,100%{transform:translateY(0) rotate(-1.5deg)}50%{transform:translateY(-7px) rotate(1.5deg)}}
@keyframes riPop{0%{opacity:0;transform:translateY(14px) scale(.9)}100%{opacity:1;transform:none}}


/* recent named vibe reports on the venue card */
.reports-block{margin:18px 0 4px}
.rep-item{display:flex;align-items:center;gap:11px;padding:9px 0;border-top:1px solid var(--line,#eee)}
.rep-item:first-of-type{border-top:none}
.rep-face{width:40px;height:40px;border-radius:50%;object-fit:cover;flex:none;background:var(--card-solid,#f4f4f6)}
.rep-txt{min-width:0}
.rep-who{font-size:14px;color:var(--ink,#111)}
.rep-who b{font-weight:600}
.rep-tag{display:inline-block;font-size:10px;font-weight:600;color:var(--violet-2,#7c3aed);background:rgba(124,58,237,.1);padding:1px 7px;border-radius:10px;vertical-align:middle;margin:0 2px}
.rep-sub{font-size:12px;color:var(--muted);margin-top:1px}

/* profile level / tier */
.pl-tag{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:600;color:var(--violet-2,#7c3aed);background:rgba(124,58,237,.1);padding:3px 10px;border-radius:20px}
.pl-tag.sm{font-size:10px;padding:1px 8px;vertical-align:middle}
.prof-level{margin:14px 0 4px}
.pl-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.pl-count{font-size:11px;color:var(--muted)}
.pl-track{height:7px;border-radius:6px;background:var(--line,#ececf0);overflow:hidden}
.pl-track i{display:block;height:100%;background:linear-gradient(90deg,var(--violet-2,#7c3aed),var(--gold,#f6c944));border-radius:6px}

/* ============================================================ TOAST + misc */
.toast{position:fixed;left:50%;bottom:150px;transform:translateX(-50%);z-index:60;
  background:#202124;color:#fff;font-size:13px;font-weight:400;padding:11px 18px;border-radius:8px;box-shadow:var(--shadow-lg);max-width:88vw;text-align:center}
.toast[hidden]{display:none}
.empty{text-align:center;color:var(--muted);font-size:13px;padding:30px 10px}
.live-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--green);animation:blink 1.4s infinite}
@keyframes blink{50%{opacity:.3}}
.skel{background:var(--surface-2);border-radius:12px;animation:pulse-o 1.2s infinite}
@keyframes pulse-o{50%{opacity:.5}}

@media(min-width:760px){
  .sheet{left:50%;right:auto;width:440px;max-width:92vw;transform:translate(-50%,101%);border-radius:16px 16px 0 0}
  .sheet.open{transform:translate(-50%,0)}
  .venue-card{border-radius:16px;max-height:88vh}
  .report{max-width:520px;margin:0 auto}
}

/* ---- open / closed honesty ---- */
.pin.closed{filter:grayscale(.5)}
.vrow.closed .vscore{background:var(--muted)!important;color:var(--muted-foreground)}
.vthumb{position:relative;width:42px;height:42px;flex-shrink:0;border-radius:10px;overflow:hidden;background:var(--hover)}
.vthumb img{width:100%;height:100%;object-fit:cover;display:block;filter:grayscale(.35) brightness(.82)}
.vthumb.noimg img{display:none}
.vthumb-badge{position:absolute;left:0;right:0;bottom:0;background:rgba(0,0,0,.6);color:#fff;
  font-size:6.5px;font-weight:600;letter-spacing:.5px;text-align:center;padding:1px 0;font-family:var(--font)}
.vrow.closed .vname{color:var(--muted-foreground)}
.vc-status{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:8px}
.open-chip{font:600 12px/1 'DM Sans',sans-serif;padding:5px 9px;border-radius:999px;letter-spacing:.2px}
.open-chip.now{background:color-mix(in oklab,var(--green,#16a34a) 16%,transparent);color:var(--green,#16a34a)}
.open-chip.shut{background:color-mix(in oklab,#ef4444 14%,transparent);color:#dc2626}
.g-rating{font:600 12px/1 'DM Sans',sans-serif;color:var(--muted-foreground);display:inline-flex;align-items:center;gap:3px}
.season-tag{font-size:10px;font-weight:600;letter-spacing:.3px;padding:2px 8px;border-radius:6px;background:color-mix(in oklab,#f59e0b 18%,transparent);color:#b45309;white-space:nowrap}

/* ---- default profile avatar image (falls back to emoji) ---- */
.avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block}
.prof-ava{overflow:hidden}
.prof-ava img{width:100%;height:100%;object-fit:cover;border-radius:inherit;display:block}

/* ---- deletable photo cells (Profile) ---- */
.media-cellwrap{position:relative}
.media-cellwrap .media-cell{display:block}
.media-del{position:absolute;top:5px;right:5px;width:24px;height:24px;border:none;border-radius:50%;
  background:rgba(0,0,0,.62);color:#fff;font-size:13px;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;backdrop-filter:blur(2px);
  box-shadow:0 1px 4px rgba(0,0,0,.35);transition:background .15s,transform .1s}
.media-del:hover{background:#dc2626}
.media-del:active{transform:scale(.9)}

/* ---- About (short tags + More) and "What people say" chips ---- */
.reviews{margin-top:14px}
.about-line{display:flex;flex-direction:column;gap:3px;margin:8px 0 0}
.about-lab{font-size:12px;font-weight:600;letter-spacing:.3px;text-transform:uppercase;color:var(--muted);flex:none}
.about-tags{font-size:14px;font-weight:600;color:var(--ink);letter-spacing:.1px}
.about-full{font-size:13.5px;color:var(--muted-foreground);line-height:1.5;margin:8px 0 0}
.about-more{background:none;border:none;color:var(--primary);font-weight:600;font-size:12.5px;padding:6px 0 2px;cursor:pointer}
.rev-people{font-size:12px;font-weight:600;letter-spacing:.3px;color:var(--ink);text-transform:uppercase;margin:14px 0 8px;opacity:.75}
.rev-chips{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 8px}
/* fixed height + centred content so every chip matches; long labels grow wide, not tall.
   Text colour mixes toward --ink (which flips per theme) so it stays high-contrast in
   both dark and light without going neon. */
.rev-chip{display:inline-flex;align-items:center;gap:5px;height:26px;padding:0 11px;font-size:12.5px;font-weight:600;
  border-radius:999px;line-height:1;white-space:nowrap;border:1px solid transparent}
.rev-chip.pro{background:color-mix(in oklab,var(--green) 14%,var(--card));color:color-mix(in oklab,var(--green) 66%,var(--ink));
  border-color:color-mix(in oklab,var(--green) 24%,transparent)}
.rev-chip.con{background:color-mix(in oklab,var(--amber) 12%,var(--card));color:color-mix(in oklab,var(--amber) 70%,var(--ink));
  border-color:color-mix(in oklab,var(--amber) 26%,transparent)}
.rev-src{font-size:11px;color:var(--muted-foreground);opacity:.7;margin-top:2px}

/* ---- "⚡ I'm here — report the vibe" — the key loop, near the top ---- */
.report-cta{display:flex;align-items:center;gap:12px;width:100%;text-align:left;cursor:pointer;
  margin:0 0 14px;padding:13px 14px;border-radius:14px;border:1px solid color-mix(in oklab,var(--primary) 35%,transparent);
  background:linear-gradient(100deg,color-mix(in oklab,var(--primary) 20%,var(--surface-3)),var(--surface-3));color:var(--ink)}
.report-cta .rc-ic{font-size:22px;flex:none;display:flex;filter:drop-shadow(0 0 8px color-mix(in oklab,var(--primary) 60%,transparent))}
.report-cta .rc-ic img{width:34px;height:34px;object-fit:contain}
.report-cta .rc-txt{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.25}
.report-cta .rc-txt b{font-size:14.5px;font-weight:600}
.report-cta .rc-txt small{font-size:11.5px;color:var(--muted)}
.report-cta .rc-go{font-size:22px;color:var(--primary);flex:none;font-weight:600}
/* CLOSED state now lives INSIDE the Party Radar panel (see .pr-closed below). The
   "It's actually open" secondary action — a subtle muted-purple text link (no pill,
   no border, no fill), directly under "Party Radar · No live activity". */
.rc-correct{display:inline-flex;align-items:center;gap:4px;margin:6px 0 0;padding:0;background:none;border:none;
  color:color-mix(in oklab,var(--primary) 58%,var(--muted));font-size:12px;font-weight:600;letter-spacing:.1px}
.rc-correct .rc-arrow{font-size:14px;opacity:.85;position:relative;top:-2.5px}
.rc-correct:active{color:var(--primary)}
.rc-correct:disabled{color:var(--muted);font-weight:500}
.rc-correct:active{background:color-mix(in oklab,var(--primary) 10%,transparent);color:var(--primary)}
.rc-correct:disabled{color:var(--muted);border-color:var(--line2);font-weight:500}

/* CTA hierarchy: Instagram outlined + Save small, in one row under the primary */
.vc-actrow{display:flex;gap:10px;margin-top:10px}
.vc-actrow>*{flex:1 1 0;min-width:0}
.btn-ig-out{background:transparent;border:1.5px solid color-mix(in oklab,#cc2366 55%,var(--line));color:var(--ink)}
.btn-ig-out svg{margin-right:4px;color:#cc2366}
.btn-save2{background:var(--card);border:1px solid var(--line);color:var(--ink);transition:background .2s ease,border-color .2s ease,color .2s ease}
.btn-save2.on{background:color-mix(in oklab,var(--primary) 9%,transparent);border-color:color-mix(in oklab,var(--primary) 55%,var(--line));color:color-mix(in oklab,var(--primary) 78%,var(--ink));font-weight:600}
/* the star is an outline until saved, then fills with the Clubbit purple */
.bs-star{fill:none;stroke:currentColor;stroke-width:2;stroke-linejoin:round;transition:fill .2s ease}
.btn-save2.on .bs-star{fill:currentColor;stroke:none}

/* Duolingo-smooth open: sections rise + fade in a gentle stagger */
@keyframes vcRise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.vc-body>*{animation:vcRise .42s cubic-bezier(.22,.9,.32,1) both}
.vc-body>*:nth-child(1){animation-delay:.03s}
.vc-body>*:nth-child(2){animation-delay:.07s}
.vc-body>*:nth-child(3){animation-delay:.11s}
.vc-body>*:nth-child(4){animation-delay:.15s}
.vc-body>*:nth-child(5){animation-delay:.19s}
.vc-body>*:nth-child(6){animation-delay:.23s}
.vc-body>*:nth-child(n+7){animation-delay:.26s}
@media (prefers-reduced-motion:reduce){.vc-body>*,.vc-hero>*,.pr-mascot{animation:none}}
/* quiet upgrade to full payload: no entrance replay (keep the idle bop for busy/packed) */
#venueCard.vc-still .vc-body>*{animation:none}
#venueCard.vc-still .pr-mascot:not(.m-busy):not(.m-packed){animation:none}

/* ---- Instagram button on venue profile ---- */
.btn-ig{width:100%;color:#fff;border:none;
  background:linear-gradient(95deg,#f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%);
  box-shadow:0 2px 10px rgba(188,24,136,.28)}
.btn-ig:active{filter:brightness(.95)}
.btn-ig svg{vertical-align:-3px;margin-right:4px}

/* ---- LGBTQ+ venues: rainbow-coloured pin (pride flag) ---- */
.pin.lgbtq .pin-body{
  background:linear-gradient(45deg,#e40303 0%,#ff8c00 20%,#ffed00 40%,#008026 60%,#004dff 80%,#750787 100%)!important}
.pin.lgbtq .pin-ic{color:#fff;filter:drop-shadow(0 0 1.5px rgba(0,0,0,.75))}

/* ---- fan overlapping pins into a lollipop bouquet (shared anchor point) ---- */
.pin .stem{display:none}
.pin.lollipop{height:var(--len,58px);transform-origin:bottom center;transform:rotate(var(--ang,0deg));transition:transform .18s ease}
.pin.lollipop .stem{display:block;position:absolute;left:50%;bottom:0;width:2px;height:var(--len,58px);
  margin-left:-1px;background:rgba(255,255,255,.8);border-radius:2px;box-shadow:0 0 1px rgba(0,0,0,.4)}
.pin.lollipop .pin-body{position:absolute;left:50%;top:-3px;transform:translateX(-50%);
  width:26px;height:26px;border-radius:50%;border:2px solid #fff}
.pin.lollipop .pin-body::after{display:none}
.pin.lollipop .pin-ic{transform:none}
.pin.lollipop .pin-ic svg{width:14px;height:14px}
.pin.lollipop .pin-photo{border-radius:50%}

/* ---- dress code hint ---- */
.dress{display:flex;gap:12px;align-items:center;margin-top:14px;padding:12px 13px;
  background:color-mix(in oklab,var(--primary) 8%,transparent);border-radius:12px}
.dress-ic{font-size:34px;line-height:1;flex:none;display:flex;align-items:center}
.dress-txt{min-width:0;flex:1}
.dress-txt b{font-size:14px}
.dress-tip{font-size:13px;color:var(--muted-foreground);line-height:1.4;margin-top:2px}

/* ---- "near you tonight" feed rows ---- */
.feed-item .feed-txt b{font-size:14px;line-height:1.3;display:block}
.feed-item .fsub{font-size:12.5px;color:var(--muted-foreground);margin-top:2px}
.feed-ig{display:inline-flex;align-items:center;gap:5px;margin-top:7px;padding:5px 10px;border-radius:999px;
  font:600 12px/1 'DM Sans',sans-serif;color:#fff;
  background:linear-gradient(95deg,#f09433,#dc2743 55%,#bc1888)}
.feed-ig:active{filter:brightness(.95)}

/* ---- save-for-later button ---- */
.btn-save{width:100%;background:var(--card);border:1px solid var(--line);color:var(--ink)}
.btn-save.on{background:color-mix(in oklab,var(--primary) 12%,transparent);border-color:var(--primary);color:var(--primary);font-weight:600}

/* ============================================================
   APPLE-STYLE POLISH — tactile response, materials, motion, type
   ============================================================ */

/* 1 · Tactile response: press feedback is instant and physical.
   Scoped to controls that DON'T use transform for layout (so we never
   fight .list-btn/.sheet/.avatar positioning transforms). */
.btn, .fchip, .round-btn, .fab-primary, .fab-mini, .bn, .acard,
.pulse-btn, .rep-next, .gate-city, .media-thumb, .prof-actions .btn {
  transition: transform .11s ease, opacity .12s ease, background .12s ease;
}
.btn:active, .fchip:active, .round-btn:active, .fab-primary:active,
.fab-mini:active, .acard:active, .pulse-btn:active, .rep-next:active,
.gate-city:active, .media-thumb:active {
  transform: scale(.96);
}
.bn:active { transform: scale(.9); }               /* icon-only, a touch more */
.vrow:active, .rep-item:active { transform: scale(.985); }

/* 2 · Materials: solid white surfaces (translucency removed per preference) */
.bottomnav {
  background: var(--card);
  backdrop-filter: none; -webkit-backdrop-filter: none;
  border-top: 1px solid var(--line);
}
.fchip, .round-btn, .fab-mini, .list-btn, .here-pill {
  background: var(--card);
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
.fchip.active { background: var(--primary); }

/* 3 · Motion: graceful sheet/card entrance. The sheet slides with a SMOOTH
   decelerate (no overshoot) — an overshoot lifts its bottom edge and briefly
   reveals the map behind it ("glitch from behind"). GPU-hinted for smoothness. */
.sheet { transition: transform .34s cubic-bezier(.22,.61,.36,1); will-change: transform; }
.venue-card { animation: appleUp .44s cubic-bezier(.32,1.28,.42,1); }
@keyframes appleUp { from { transform: translateY(14%); opacity: .6; } to { transform: translateY(0); opacity: 1; } }
.overlay-scrim { animation: fade .28s ease; }

/* 4 · Typography: large titles want tighter tracking; tiny labels a hair looser. */
.vc-title { letter-spacing: -.021em; }
.gate-card h2, .rep-done h2 { letter-spacing: -.018em; }
.prof-name { letter-spacing: -.012em; }

/* 5 · Reduced motion: don't kill feedback — swap physical motion for a gentle
   cross-fade (overrides the blanket rule above for these surfaces). */
@media (prefers-reduced-motion: reduce) {
  .sheet { transition: opacity .2s ease !important; }
  .venue-card { animation: fade .2s ease !important; }
  .btn:active, .fchip:active, .round-btn:active, .fab-primary:active,
  .fab-mini:active, .bn:active, .acard:active, .vrow:active { transform: none; }
}

/* 6 · Reduced transparency: make glass surfaces solid & legible. */
@media (prefers-reduced-transparency: reduce) {
  .bottomnav, .fchip, .round-btn, .fab-mini, .list-btn, .here-pill {
    background: var(--card);
    backdrop-filter: none; -webkit-backdrop-filter: none;
  }
  .fchip.active { background: var(--primary); }
}

/* 7 · High contrast: firmer borders on floating chrome. */
@media (prefers-contrast: more) {
  .fchip, .round-btn, .fab-mini, .list-btn, .btn-ghost, .btn-here {
    border: 1px solid var(--line2);
  }
  .bottomnav { border-top: 1px solid var(--line2); }
}

/* ============================================================ PROFILE PHOTO CROP */
.crop-ov{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;
  background:rgba(20,12,30,.72);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);padding:20px}
.crop-ov[hidden]{display:none}
.crop-box{width:100%;max-width:360px;background:var(--card);border-radius:20px;box-shadow:var(--shadow-lg);
  padding:20px 18px calc(18px + var(--sab));display:flex;flex-direction:column}
.crop-box h3{text-align:center;font-size:17px;font-weight:600;color:var(--ink);margin-bottom:16px;letter-spacing:-.01em}
.crop-box .crop-stage{position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;padding:6px 0}
.crop-box .crop-circle{position:relative;width:min(66vw,260px);height:min(66vw,260px);border-radius:50%;overflow:hidden;
  box-shadow:0 0 0 3px var(--primary),0 0 0 2000px rgba(20,12,30,.55);touch-action:none;background:#000;cursor:grab}
.crop-box .crop-circle:active{cursor:grabbing}
.crop-box .crop-circle img{position:absolute;left:50%;top:50%;user-select:none;-webkit-user-drag:none;will-change:transform}
.crop-box .crop-zoom{display:flex;align-items:center;gap:12px;margin:18px 4px 8px;color:var(--muted)}
.crop-box .crop-zoom input{flex:1;accent-color:var(--primary)}
.crop-box .crop-btns{display:flex;gap:10px;margin-top:6px}
.crop-box .crop-btns .btn{flex:1}

/* ============================================================ FULL-SCREEN PROFILE */
.pscreen{position:fixed;inset:0;z-index:26;background:var(--bg);overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding-bottom:calc(88px + var(--sab))}
.pscreen-top{position:sticky;top:0;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:calc(var(--sat) + 10px) 12px 10px;background:var(--card);border-bottom:1px solid var(--line)}
.ptop-btn{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--ink2);background:var(--surface-2)}
.ptop-btn:active{background:var(--surface-4)}
.ptop-btn svg{width:22px;height:22px}
.ptop-title{font-size:17px;font-weight:600;color:var(--ink)}
.pscreen-body{padding:12px 16px calc(var(--sab) + 28px);max-width:560px;margin:0 auto}
/* hero */
.phero{display:flex;flex-direction:column;align-items:center;text-align:center;gap:1px;max-width:100%}
.phero-ava{position:relative;width:92px;height:92px;margin-bottom:2px}
.phero-ava>img{width:92px;height:92px;border-radius:50%;object-fit:cover;background:var(--avatar-bg);
  box-shadow:0 0 0 2.5px var(--primary),0 0 0 5px var(--card),var(--shadow-lg)}
.phero-edit{position:absolute;bottom:0;right:0;width:26px;height:26px;border-radius:50%;background:var(--primary);color:#fff;
  display:flex;align-items:center;justify-content:center;box-shadow:0 2px 7px rgba(0,0,0,.3),0 0 0 2.5px var(--card)}
.phero-edit:active{filter:brightness(1.08)}
.phero-edit svg{width:13px;height:13px}
.phero-name{font-size:21px;font-weight:600;color:var(--ink);letter-spacing:-.02em;margin-top:1px;max-width:90%;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.phero-sub{font-size:13px;color:var(--muted)}
/* rank chip under the name — kept subtle so the progress card is the main rank element */
.phero-tag{display:inline-flex;align-items:center;gap:6px;margin-top:6px;font-size:11.5px;font-weight:600;
  color:color-mix(in oklab,var(--primary) 66%,var(--muted));background:color-mix(in oklab,var(--primary) 8%,transparent);
  border:1px solid color-mix(in oklab,var(--primary) 16%,var(--line2));padding:4px 11px;border-radius:20px}
/* level card */
.pcard-l{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:14px 16px;margin-top:14px;box-shadow:var(--shadow)}
.pcard-l .pl-top{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:13px}
.pcard-l .pl-name{font-weight:600;color:var(--ink);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pcard-l .pl-next{color:var(--muted);font-size:12px;flex:none;white-space:nowrap}
.pcard-l .pl-track{height:8px;border-radius:5px;background:var(--surface-4);margin-top:9px;overflow:hidden}
.pcard-l .pl-track i{display:block;height:100%;border-radius:5px;background:linear-gradient(90deg,var(--primary),var(--accent))}
/* small secondary contributions line inside the rank card, under the bar */
.pcard-l .pl-total{margin-top:9px;font-size:12px;color:var(--muted)}
/* stat tiles */
.pstats{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:12px}
.pstats.one{grid-template-columns:1fr}
.pstat2{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:11px;text-align:center;box-shadow:var(--shadow)}
.pstat2 .pv{font-size:24px;font-weight:600;font-family:var(--mono);color:var(--ink);line-height:1.1}
.pstat2 .pk{font-size:11.5px;color:var(--muted);margin-top:2px}
/* detail list */
.pdetails{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:2px 16px;margin-top:12px;box-shadow:var(--shadow)}
.pdetail{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 0;border-bottom:1px solid var(--line)}
.pdetail:last-child{border-bottom:0}
.pdetail .pk{font-size:12.5px;color:var(--muted);flex:none}
.pdetail .pv{font-size:13.5px;color:var(--ink);font-weight:500;text-align:right;flex:1;min-width:0;overflow-wrap:anywhere;word-break:break-word}
.psec-h{display:flex;align-items:center;justify-content:space-between;margin:20px 2px 10px}
.psec-h h3{font-size:15px;font-weight:600;color:var(--ink)}
.psec-h .count{font-size:12px;color:var(--muted);font-family:var(--mono)}
.pedit-btn{width:100%;margin-top:12px;height:44px;border-radius:22px;background:var(--surface-2);color:var(--ink2);
  font-size:14px;font-weight:600;display:flex;align-items:center;justify-content:center;gap:8px}
.pedit-btn:active{background:var(--surface-4)}
.pedit-btn svg{width:16px;height:16px}
/* Your reports — empty state */
.prep-empty{text-align:center;padding:20px 12px 8px}
.prep-empty-ic{width:64px;height:64px;object-fit:contain;opacity:.62;filter:grayscale(.5)}
.prep-empty-t{font-size:15px;font-weight:600;color:var(--ink);margin-top:6px}
.prep-empty-s{font-size:12.5px;color:var(--muted);margin:4px auto 0;max-width:250px;line-height:1.45}
.pbadges{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.pbadge{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--amber-d);
  background:var(--tint-blue);padding:7px 13px;border-radius:20px}

/* ============================================================ SETTINGS / LANGUAGE SHEETS */
.msheet-scrim{position:fixed;inset:0;z-index:40;background:rgba(0,0,0,.5);backdrop-filter:blur(2px);touch-action:none}
/* while a modal sheet (Settings, Language…) is open, freeze the content behind it
   so the map/list can't scroll or pan underneath */
body.msheet-open .sheet-body,body.msheet-open #map,body.msheet-open .radar-stage,body.msheet-open .pscreen{touch-action:none!important;overflow:hidden!important;pointer-events:none}
/* the settings/language sheet lives ABOVE the profile screen and its scrim must
   catch touches, so re-enable pointer events on the sheet + scrim themselves */
body.msheet-open .msheet,body.msheet-open .msheet-scrim{pointer-events:auto}
.msheet{position:fixed;left:0;right:0;bottom:0;z-index:41;background:var(--card);color:var(--ink);
  border-radius:22px 22px 0 0;max-height:88vh;display:flex;flex-direction:column;
  transform:translateY(100%);transition:transform .32s cubic-bezier(.3,.7,.25,1);box-shadow:0 -8px 30px rgba(0,0,0,.25);
  padding-bottom:calc(var(--sab) + 8px)}
.msheet.open{transform:none}
.msheet-grip{width:40px;height:4px;border-radius:3px;background:var(--surface-4);margin:10px auto 2px}
.msheet-head{display:flex;align-items:center;justify-content:space-between;padding:8px 12px 12px 18px}
.msheet-head h2{font-size:19px;font-weight:600;color:var(--ink)}
.msheet-x{width:28px;height:28px;border-radius:50%;background:var(--surface-2);color:var(--ink2);font-size:13px;flex:none}
.msheet-body{overflow-y:auto;padding:2px 14px 12px}
/* setting groups + section labels */
.set-sectlabel{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);
  margin:14px 6px 7px;opacity:.9}
.set-sectlabel:first-child{margin-top:2px}
.setgrp{background:var(--surface-3);border:1px solid var(--line);border-radius:15px;overflow:hidden;margin-bottom:8px}
.setrow{display:flex;align-items:center;gap:12px;padding:13px 14px;border-bottom:1px solid var(--line);width:100%;text-align:left;background:none;min-height:56px}
.setrow:last-child{border-bottom:0}
.setrow:active{background:var(--hover)}
.setrow.setrow-stack{align-items:flex-start;flex-direction:column;gap:11px}
.sr-head{display:flex;align-items:center;gap:12px;width:100%}
.setrow .sr-ic{width:34px;height:34px;border-radius:10px;background:color-mix(in oklab,var(--primary) 13%,transparent);color:var(--primary);flex:none;display:flex;align-items:center;justify-content:center}
.setrow .sr-ic svg{width:18px;height:18px}
.setrow .sr-ic.danger{background:color-mix(in oklab,var(--red) 11%,transparent);color:var(--red)}
.setrow.muted .sr-ic{background:var(--surface-4);color:var(--muted)}
.setrow.muted .sr-label{color:var(--ink2);font-weight:600}
.setrow .sr-main{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center}
.setrow .sr-label{font-size:15px;font-weight:600;color:var(--ink)}
.setrow .sr-sub{font-size:12px;color:var(--muted);margin-top:2px;line-height:1.3}
.setrow .sr-val{font-size:13px;color:var(--muted);display:flex;align-items:center;gap:5px;flex:none;max-width:46%;overflow:hidden}
.setrow .sr-valtxt{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.setrow .sr-val svg{width:16px;height:16px;flex:none}
.setrow.danger .sr-label{color:var(--red)}
/* segmented toggles — Appearance + Distance unit share one design system */
.segtoggle{display:flex;gap:3px;background:var(--surface-4);border-radius:14px;padding:3px}
.segtoggle.segfull{width:100%}
.segtoggle button{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;padding:7px 12px;border-radius:11px;
  font-size:13px;font-weight:600;color:var(--muted);transition:color .15s}
.segtoggle button svg{width:15px;height:15px}
.segtoggle button.on{background:var(--card);color:var(--ink);box-shadow:var(--shadow)}
/* language list */
.lang-item{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;padding:14px 14px;border-radius:12px;background:none;text-align:left}
.lang-item:active{background:var(--hover)}
.lang-item .li-native{font-size:15px;font-weight:600;color:var(--ink)}
.lang-item .li-en{font-size:12px;color:var(--muted);margin-top:1px}
.lang-item .li-check{color:var(--primary);opacity:0}
.lang-item.sel .li-check{opacity:1}
.lang-item .li-check svg{width:20px;height:20px}

/* dark mode: the header goes dark too; the logo swaps to a transparent-bg
   variant (mascot-dark.png) via JS so it reads on the dark bar */
:root[data-theme="dark"] .avatar{box-shadow:0 0 0 2px var(--primary),0 0 0 4px var(--card)}

/* report: free-text note step — same dark Clubbit card language as the option
   slides: a faint purple-tinted field that lifts to a stronger (but restrained)
   purple border + glow on focus. The counter and a small comment icon tuck into
   the field's reserved bottom strip so they read as part of the input. */
.rep-note{position:relative;display:flex;flex-direction:column;margin-bottom:auto}
.rep-note textarea{width:100%;min-height:140px;border:1.5px solid color-mix(in oklab,var(--primary) 17%,var(--line2));border-radius:14px;
  background:color-mix(in oklab,var(--primary) 4%,var(--surface-3));
  padding:14px 14px 32px;font-family:inherit;font-size:15px;color:var(--ink);resize:none;line-height:1.5;
  transition:border-color .18s ease,box-shadow .18s ease,background .18s ease}
.rep-note textarea::placeholder{color:var(--muted)}
.rep-note textarea:focus{outline:none;border-color:var(--primary);
  background:color-mix(in oklab,var(--primary) 6%,var(--surface-3));
  box-shadow:0 0 0 3px color-mix(in oklab,var(--primary) 15%,transparent)}
/* the message icon (bottom-left) and the counter (bottom-right) share the same
   baseline strip — matched vertical centres and symmetric 13px side insets */
.rep-note-ic{position:absolute;left:13px;bottom:8px;width:18px;height:18px;
  color:color-mix(in oklab,var(--primary) 55%,var(--muted));opacity:.65;pointer-events:none}
.rep-note-ic svg{width:100%;height:100%;display:block}
.rep-notecount{position:absolute;right:13px;bottom:10px;font-size:12px;
  color:color-mix(in oklab,var(--muted) 72%,var(--ink));font-family:var(--mono)}
/* note step: title/subtitle a touch lower so the vertical rhythm matches the
   option slides (short field otherwise floats the heading high) */
.report.notestep .rep-q{margin-top:58px}
/* venue media: reporter avatar badge (top-left) */
.media-thumbwrap{position:relative;flex:0 0 auto}
.media-by{position:absolute;top:6px;left:6px;width:26px;height:26px;border-radius:50%;object-fit:cover;
  border:2px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.35);background:var(--avatar-bg);z-index:1}
/* recent reports: tap to expand a rundown of what was reported */
.rep-item{cursor:pointer}
.rep-txt{flex:1}
.rep-item .rep-chev{margin-left:auto;color:var(--faint);transition:transform .2s}
.rep-item .rep-del{margin-left:auto;align-self:center}
.rep-item.open .rep-chev{transform:rotate(90deg)}
.rep-rundown{margin:2px 0 10px 51px;padding:12px 14px;background:var(--surface-3);border:1px solid var(--line);border-radius:12px}
.rep-rundown .rr-row{display:flex;justify-content:space-between;gap:12px;font-size:13px;padding:4px 0}
.rep-rundown .rr-k{color:var(--muted)}
.rep-rundown .rr-v{color:var(--ink);font-weight:500;text-align:right}
.rep-rundown .rr-note{margin-top:8px;padding-top:8px;border-top:1px solid var(--line);font-size:13.5px;color:var(--ink);line-height:1.5}

/* fullscreen media viewer */
.lightbox{position:fixed;inset:0;z-index:3000;background:#000;display:flex;align-items:center;justify-content:center}
.lightbox[hidden]{display:none}
.lb-close{position:absolute;top:calc(var(--sat) + 14px);right:16px;width:42px;height:42px;border-radius:50%;
  background:rgba(255,255,255,.16);color:#fff;font-size:18px;display:flex;align-items:center;justify-content:center;z-index:4}
.lb-close:active{background:rgba(255,255,255,.28)}
/* swipeable full-screen track: one slide per media, aspect-preserving (never cropped) */
.lb-track{width:100%;height:100%;display:flex;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.lb-track.single{overflow:hidden}
.lb-track::-webkit-scrollbar{width:0;height:0}
.lb-slide{flex:0 0 100%;width:100%;height:100%;scroll-snap-align:center;display:flex;align-items:center;justify-content:center;padding:16px}
.lb-slide img,.lb-slide video{max-width:100%;max-height:88vh;object-fit:contain;background:#000;border-radius:10px;will-change:transform}
/* poster metadata — avatar + name + report time, top-right (just left of the X) */
.lb-meta{position:absolute;top:calc(var(--sat) + 14px);right:66px;z-index:2;display:flex;align-items:center;gap:9px;
  max-width:calc(100vw - 92px);padding:5px 14px 5px 5px;border-radius:24px;background:rgba(0,0,0,.44);backdrop-filter:blur(5px);pointer-events:none}
.lb-meta[hidden]{display:none}
.lb-mface{width:34px;height:34px;border-radius:50%;object-fit:cover;flex:none;border:1.5px solid rgba(255,255,255,.85);background:#222}
.lb-mtxt{display:flex;flex-direction:column;line-height:1.2;min-width:0}
.lb-mtxt b{color:#fff;font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lb-mtxt span{color:rgba(255,255,255,.72);font-size:11px;white-space:nowrap}
.media-thumb,.media-cell{cursor:pointer}

/* report done: two mascots side by side */
.rep-done .rd-duo{display:flex;align-items:flex-end;justify-content:center;gap:0;margin:0 auto 4px}
.rep-done .rd-duo .rd-mascot{width:132px;max-width:38vw;height:auto;margin:0;display:block;
  filter:drop-shadow(0 14px 24px rgba(124,58,237,.2));animation:riPop .5s cubic-bezier(.2,.8,.3,1.2) both}
.rep-done .rd-duo .rd-mascot-f{width:116px;max-width:34vw;transform:scaleX(-1);margin-left:-6px}

/* report: "Other" custom input (entry price / music genre) */
.rep-other{margin-top:10px}
.rep-grid .rep-other{grid-column:1 / -1}
.rep-other input{width:100%;height:52px;border:1.5px solid var(--line2);border-radius:14px;background:var(--surface-3);
  padding:0 16px;font-size:16px;color:var(--ink);font-family:inherit}
.rep-other input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(124,58,237,.15)}


/* report flow: mascot duo for personality */
.rep-mascots{display:flex;align-items:flex-end;justify-content:center;gap:0;margin:9vh auto 2px;height:210px}
.rep-mascots img{height:210px;width:auto;display:block;filter:drop-shadow(0 14px 22px rgba(124,58,237,.24))}
.rep-mascots img.f{height:188px;transform:scaleX(-1);margin-left:-14px}
/* full-width "Other" chip in a 2-col grid */
.rep-grid .rep-opt.wide{grid-column:1 / -1}
/* your-own-report controls on the venue card */
.rep-you{font-size:10px;font-weight:600;color:var(--primary);background:var(--tint-blue);padding:1px 7px;border-radius:10px;margin-left:4px;vertical-align:middle}
.rep-del{flex:none;width:32px;height:32px;border-radius:50%;background:var(--red);color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 1px 4px rgba(0,0,0,.2)}
.rep-del svg{width:16px;height:16px}
.rep-del:active{filter:brightness(1.1)}

/* profile: your-reports overview (photo + details) */
.myrep-list{display:flex;flex-direction:column;gap:10px}
.myrep{display:flex;align-items:center;gap:12px;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:10px;box-shadow:var(--shadow);position:relative}
.myrep-media{width:64px;height:64px;border-radius:11px;object-fit:cover;flex:none;background:var(--surface-2);cursor:pointer}
.myrep-media.noimg{display:flex;align-items:center;justify-content:center;font-size:24px;cursor:default}
.myrep-txt{flex:1;min-width:0;cursor:pointer}
.myrep-venue{font-size:14.5px;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.myrep-meta{font-size:12.5px;color:var(--muted);margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.myrep-time{font-size:11px;color:var(--faint);margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.myrep-act{flex:none;align-self:flex-start;margin:-2px -2px 0 0}

/* venue card: report rundown photo + combined community block */
.rr-media{width:100%;max-height:300px;border-radius:12px;object-fit:cover;display:block;margin-bottom:10px;cursor:pointer;background:var(--surface-2)}
.community-block{margin-top:10px}
.cb-sub{font-size:12px;font-weight:600;color:var(--muted);margin-bottom:8px}

/* ===== LIVE REPORTS — each report is a polished, media-forward post preview:
   avatar over the media (top-left), the media as the hero, then a bottom section
   with byline · chips · a 2-line note snippet. Tapping the media opens full-screen. */
.lr-list{display:flex;flex-direction:column;gap:24px}
.lr-card{position:relative;border-radius:16px;overflow:hidden;
  background:linear-gradient(180deg,color-mix(in oklab,var(--primary) 6%,var(--surface-3)),var(--surface-3));
  border:1px solid color-mix(in oklab,var(--line2) 55%,transparent);
  box-shadow:0 3px 14px rgba(0,0,0,.22),0 8px 22px color-mix(in oklab,var(--primary) 9%,transparent)}
/* hero media */
.lr-hero{position:relative;display:block;width:100%;aspect-ratio:1.45;background:#0c0912;cursor:pointer;overflow:hidden}
/* subtle centred play icon for video previews */
.lr-playic{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:2;width:52px;height:52px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.4);backdrop-filter:blur(2px);
  box-shadow:0 2px 10px rgba(0,0,0,.4);pointer-events:none}
.lr-playic svg{margin-left:3px}
.lr-heroimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.lr-hero::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.5) 0%,rgba(0,0,0,0) 24%,rgba(0,0,0,0) 100%)}
.lr-hero:active{filter:brightness(.94)}
/* avatar */
.lr-face{width:40px;height:40px;border-radius:50%;object-fit:cover;flex:none;background:var(--avatar-bg);
  border:1.5px solid color-mix(in oklab,var(--primary) 32%,var(--line2))}
.lr-face.on-media{position:absolute;top:10px;left:10px;z-index:2;width:38px;height:38px;
  border:2px solid rgba(255,255,255,.9);box-shadow:0 2px 10px rgba(0,0,0,.55)}
/* "Live report" type label + media-count / actions on the hero */
.lr-type{position:absolute;top:15px;left:56px;z-index:2;font-size:9.5px;font-weight:600;letter-spacing:.5px;
  text-transform:uppercase;color:#fff;background:color-mix(in oklab,var(--primary) 72%,rgba(0,0,0,.5));
  padding:3px 9px;border-radius:11px;box-shadow:0 1px 6px rgba(0,0,0,.4)}
.lr-type.inline{position:static;background:color-mix(in oklab,var(--primary) 20%,transparent);
  color:color-mix(in oklab,var(--primary) 86%,#fff);box-shadow:none;padding:1px 7px}
.lr-heroact{position:absolute;top:9px;right:9px;z-index:3;display:flex;align-items:center;gap:6px}
.lr-mcount{font-size:11px;font-weight:600;color:#fff;background:rgba(0,0,0,.5);padding:3px 9px;border-radius:11px;backdrop-filter:blur(3px)}
.lr-hero .lr-menu{color:#fff;background:rgba(0,0,0,.42)}
.lr-hero .lr-menu:active{background:rgba(0,0,0,.62)}
/* body section */
.lr-body{padding:13px 12px 20px}
.lr-byline{display:flex;align-items:flex-start;gap:10px}
.lr-id{flex:1;min-width:0}
.lr-name{font-size:14.5px;color:var(--ink);line-height:1.25;display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0}
.lr-name b{font-weight:600;overflow-wrap:anywhere;word-break:break-word}
.lr-tag{font-size:10px;font-weight:600;letter-spacing:.2px;color:color-mix(in oklab,var(--primary) 84%,#fff);
  background:color-mix(in oklab,var(--primary) 16%,transparent);padding:2px 8px;border-radius:11px}
.lr-you{font-size:8px;font-weight:600;letter-spacing:.3px;text-transform:uppercase;color:color-mix(in oklab,var(--muted) 85%,transparent);
  background:transparent;border:1px solid color-mix(in oklab,var(--line2) 80%,transparent);padding:1px 5px;border-radius:8px;opacity:.9}
.lr-time{font-size:12px;color:var(--muted);margin-top:4px;font-weight:500;display:flex;align-items:center;gap:5px;flex-wrap:wrap}
.lr-actions{display:flex;align-items:center;gap:2px;flex:none}
.lr-menuwrap{position:relative}
.lr-menu{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--muted);background:transparent}
.lr-menu:active{background:var(--surface-4)}
.lr-menupop{position:absolute;top:33px;right:0;z-index:6;min-width:150px;padding:5px;
  background:var(--surface-2);border:1px solid var(--line2);border-radius:12px;box-shadow:0 10px 26px rgba(0,0,0,.45)}
.lr-del{width:100%;text-align:left;padding:9px 12px;border-radius:8px;font-size:13.5px;font-weight:600;color:var(--red);background:transparent}
.lr-del:active{background:color-mix(in oklab,var(--red) 14%,transparent)}
/* key report chips — pack as many as fit per row (tight pills), wrap only as a last
   resort so a tag is never clipped. */
.lr-chips{display:flex;flex-wrap:wrap;gap:5px;margin-top:16px}
.lr-chip{flex:0 0 auto;max-width:100%;font-size:12px;font-weight:600;color:var(--ink2);background:var(--surface-4);
  border:1px solid var(--line2);padding:7px 8px;border-radius:20px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lr-chip.vibe{color:color-mix(in oklab,var(--primary) 88%,#fff);
  background:color-mix(in oklab,var(--primary) 15%,transparent);border-color:color-mix(in oklab,var(--primary) 28%,transparent)}
/* note — subtle dark/purple container; clamped to 2 lines with a More/Less toggle */
.lr-note{display:flex;gap:7px;align-items:flex-start;margin-top:11px;padding:7px 10px;
  border:1px solid color-mix(in oklab,var(--primary) 14%,var(--line2));border-left:3px solid color-mix(in oklab,var(--primary) 44%,transparent);
  border-radius:8px 10px 10px 8px;background:color-mix(in oklab,var(--primary) 6%,var(--surface-2))}
.lr-noteic{flex:none;margin-top:3px;color:color-mix(in oklab,var(--primary) 62%,var(--muted))}
.lr-notebody{min-width:0;font-size:13px;line-height:1.4;color:color-mix(in oklab,var(--ink) 94%,var(--muted));font-style:italic}
.lr-notetext{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.lr-note.open .lr-notetext{display:block;-webkit-line-clamp:unset;overflow:visible}
.lr-notemore{display:none;margin-top:3px;font-style:normal;font-size:12px;font-weight:600;background:transparent;
  color:color-mix(in oklab,var(--primary) 82%,#fff)}
.lr-note.long .lr-notemore{display:inline-block}
.lr-notemore .lt{display:none}
.lr-note.open .lr-notemore .mt{display:none}
.lr-note.open .lr-notemore .lt{display:inline}

/* profile: tap-a-report detail modal */
.rdetail-ov{position:fixed;inset:0;z-index:2500;display:flex;align-items:center;justify-content:center;padding:20px}
.rdetail-scrim{position:absolute;inset:0;background:rgba(0,0,0,.55);backdrop-filter:blur(2px)}
.rdetail-card{position:relative;z-index:1;width:100%;max-width:420px;max-height:86vh;overflow-y:auto;background:var(--card);color:var(--ink);border-radius:18px;padding:18px;box-shadow:var(--shadow-lg)}
.rdetail-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:12px}
.rdetail-head h3{font-size:17px;font-weight:600;color:var(--ink);line-height:1.25;flex:1;min-width:0;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;overflow-wrap:anywhere}
.rd-actions{display:flex;align-items:center;gap:2px;flex:none}
.rd-actions .lr-menu{color:var(--muted)}
/* small venue photo beside the name — the whole title is a button that opens the venue */
.rd-title{display:flex;align-items:center;gap:11px;flex:1;min-width:0;background:none;border:none;padding:0;margin:0;text-align:left;cursor:pointer;color:inherit;font:inherit}
.rd-title:active{opacity:.7}
.rd-titletext{display:flex;flex-direction:column;min-width:0;gap:1px}
.rd-titletext h3{min-width:0}
/* the details block is tappable too → open the venue */
.rdetail-rows.go-venue{cursor:pointer}
.rdetail-rows.go-venue:active{background:var(--surface-4)}
/* "Open venue" hint sits right under the club name */
.rd-open{font-size:12px;font-weight:600;color:var(--primary)}
.rd-hero.go-venue{cursor:pointer}
.rd-thumb{width:44px;height:44px;border-radius:11px;overflow:hidden;flex:none;background:var(--surface-4);
  box-shadow:0 2px 8px rgba(0,0,0,.35),inset 0 0 0 1px color-mix(in oklab,var(--primary) 22%,transparent)}
.rd-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.rd-thumb[hidden]{display:none}
.rd-herowrap:empty{display:none}
.rd-hero{width:100%;aspect-ratio:16/10;max-height:260px;object-fit:cover;border-radius:12px;margin-bottom:12px;background:var(--surface-2);cursor:pointer;display:block}
/* venue rating + type line under the hero */
.rd-venuemeta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 2px 12px}
.rd-venuemeta[hidden]{display:none}
.rd-rating{font-size:13px;font-weight:600;color:#f5b301}
.rd-venuemeta .rd-sub{font-size:12.5px;color:var(--muted);font-weight:600}
/* community reviews block */
.rd-reviews:empty{display:none}
.rd-reviews{margin-top:14px}
.rd-reviews .reviews{background:var(--surface-3);border:1px solid var(--line);border-radius:14px;padding:12px 14px;animation:fade .3s ease}
.rdetail-rows{background:var(--surface-3);border:1px solid var(--line);border-radius:14px;padding:0 18px}
.rdetail-rows .pdetail{gap:16px;padding:10px 0}
.rdetail-rows .pdetail .pk{flex:none}
.rdetail-rows .pdetail .pv{flex:1;min-width:0;text-align:right;overflow-wrap:anywhere;word-break:break-word}
/* report detail — Comment section (label subtle, comment is the focus) */
.rd-comment{margin-top:14px}
.rd-comment-h{display:flex;align-items:center;gap:5px;font-size:10px;font-weight:600;letter-spacing:.4px;
  text-transform:uppercase;color:color-mix(in oklab,var(--muted) 80%,transparent);margin-bottom:7px}
.rd-comment-h .lr-noteic{margin-top:0;color:color-mix(in oklab,var(--primary) 62%,var(--muted))}
.rd-comment-body{padding:11px 13px;border:1px solid color-mix(in oklab,var(--primary) 16%,var(--line2));
  border-left:3px solid color-mix(in oklab,var(--primary) 46%,transparent);border-radius:8px 10px 10px 8px;
  background:color-mix(in oklab,var(--primary) 6%,var(--surface-2));font-size:13.5px;line-height:1.5;color:var(--ink);
  font-style:italic;overflow-wrap:anywhere}

/* skeleton shimmer placeholders (profile loading) */
.sk{background:var(--surface-2);border-radius:12px;position:relative;overflow:hidden}
.sk::after{content:"";position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,color-mix(in oklab,var(--ink) 8%,transparent),transparent);
  animation:skShimmer 1.25s infinite}
@keyframes skShimmer{100%{transform:translateX(100%)}}
@media (prefers-reduced-motion:reduce){.sk::after{animation:none}}

/* map loading skeleton — dark map ground + shimmer pins so it's never blank */
.map-skeleton{position:absolute;inset:0;z-index:20;background:var(--mapbg);overflow:hidden;transition:opacity .5s ease}
.map-skeleton.gone{opacity:0;pointer-events:none}
.mk-pin{position:absolute;width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.06);
  box-shadow:0 0 0 6px rgba(255,255,255,.03);overflow:hidden}
.mk-pin::after{content:"";position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.12),transparent);animation:skShimmer 1.3s infinite}
.mk-loader{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;gap:8px}
.mk-loader span{width:10px;height:10px;border-radius:50%;background:var(--primary);opacity:.5;animation:mkPulse 1s ease-in-out infinite}
.mk-loader span:nth-child(2){animation-delay:.15s}
.mk-loader span:nth-child(3){animation-delay:.3s}
@keyframes mkPulse{0%,100%{opacity:.35;transform:scale(.8)}50%{opacity:1;transform:scale(1.2)}}
@media (prefers-reduced-motion:reduce){.mk-pin::after{animation:none}.mk-loader span{animation:none}}

/* venue card: "hours are in the venue's local time" note (foreign venues) */
.vc-tznote{display:flex;align-items:flex-start;gap:8px;margin-top:10px;font-size:12px;color:var(--muted);
  background:var(--surface-3);border:1px solid var(--line);border-radius:10px;padding:9px 12px;line-height:1.5}
.vc-tznote svg{flex:none;color:var(--primary);margin-top:2px}

/* tonight's real lineup (Ticketmaster) on the venue card */
.vc-event{display:flex;align-items:center;gap:11px;margin-top:10px;padding:9px 12px;width:100%;
  border-radius:12px;text-decoration:none;color:inherit;text-align:left;font:inherit;cursor:pointer;
  background:linear-gradient(100deg,color-mix(in srgb,var(--primary) 20%,var(--surface-2)),var(--surface-2));
  border:1px solid color-mix(in srgb,var(--primary) 38%,var(--line))}
.ve-cover{flex:none;width:46px;height:46px;border-radius:9px;overflow:hidden;display:flex;
  align-items:center;justify-content:center;background:color-mix(in srgb,var(--primary) 22%,var(--surface-3));font-size:20px}
.ve-cover img{width:100%;height:100%;object-fit:cover;display:block}
.vc-event .ve-txt{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1}
.vc-event .ve-txt b{font-size:12px;color:var(--primary);font-weight:600;letter-spacing:.2px}
.vc-event .ve-name{font-size:13.5px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vc-event .ve-more{font-size:11px;color:var(--muted)}
.vc-event .ve-go{flex:none;font-size:12px;font-weight:600;color:var(--primary);white-space:nowrap}
/* "all events this week" modal list */
.evlist{max-height:min(62vh,520px);overflow-y:auto;-webkit-overflow-scrolling:touch;display:flex;flex-direction:column;gap:9px;margin-top:6px;padding-right:2px}
.evrow{display:flex;align-items:center;gap:12px;padding:9px;border-radius:12px;text-decoration:none;color:inherit;
  background:var(--surface-2);border:1px solid var(--line)}
.evr-cover{flex:none;width:58px;height:58px;border-radius:10px;overflow:hidden;display:flex;align-items:center;
  justify-content:center;background:color-mix(in srgb,var(--primary) 18%,var(--surface-3));font-size:22px}
.evr-cover img{width:100%;height:100%;object-fit:cover;display:block}
.evr-txt{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.evr-txt b{font-size:12px;color:var(--primary);font-weight:600}
.evr-name{font-size:14px;font-weight:650;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.evr-sub{font-size:11.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.evr-go{flex:none;font-size:12px;font-weight:600;color:var(--primary);white-space:nowrap}

/* close-venue picker as a proper Clubbit bottom sheet (docked, slide-up) */
.rdetail-ov.pinstack{align-items:flex-end;justify-content:center;padding:0}
.rdetail-ov.pinstack .rdetail-card{max-width:520px;width:100%;max-height:72vh;border-radius:20px 20px 0 0;
  padding:16px 16px calc(14px + env(safe-area-inset-bottom));animation:pinstackUp .32s cubic-bezier(.2,.8,.3,1.05)}
@keyframes pinstackUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
.rdetail-ov.pinstack .evrow{cursor:pointer;transition:background .15s,transform .1s}
.rdetail-ov.pinstack .evrow:active{background:var(--hover);transform:scale(.985)}

/* ---- Clubbit notification center (full-screen page) ---- */
.nc-ov{position:fixed;inset:0;z-index:2500;display:flex;flex-direction:column;background:var(--card)}
.nc-sheet{position:relative;z-index:1;width:100%;height:100%;display:flex;flex-direction:column;
  background:var(--card);color:var(--ink);padding-top:var(--sat);padding-bottom:calc(var(--sab) + 4px);
  transform:translateY(12px);opacity:0;transition:transform .26s cubic-bezier(.2,.8,.2,1),opacity .24s}
.nc-ov.open .nc-sheet{transform:none;opacity:1}
.nc-top{display:flex;align-items:center;gap:11px;padding:6px 14px 8px 6px;flex:none;border-bottom:1px solid var(--line)}
.nc-back{width:40px;height:40px;flex:none;display:flex;align-items:center;justify-content:center;border-radius:50%;color:var(--ink);background:none}
.nc-back:active{background:var(--surface-3)}
.nc-titles{flex:1;min-width:0}
.nc-titles h2{font-size:20px;font-weight:600;color:var(--ink);line-height:1.1;letter-spacing:-.01em}
.nc-sub{font-size:12px;color:var(--muted);font-weight:500;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nc-markread{flex:none;font-size:11.5px;font-weight:600;color:var(--muted);background:none;padding:6px 4px;white-space:nowrap}
.nc-markread:active{color:var(--primary)}
/* slim segmented tabs on one subtle track */
.nc-tabs{display:flex;gap:2px;margin:12px 16px 2px;padding:3px;flex:none;
  background:color-mix(in oklab,var(--surface-4) 60%,transparent);border-radius:12px}
.nc-tab{flex:1;padding:7px 6px;border-radius:9px;font-size:12.5px;font-weight:600;color:var(--muted);
  text-align:center;white-space:nowrap;transition:color .15s,background .15s}
.nc-tab:active{color:var(--ink2)}
.nc-tab.on{color:#fff;background:color-mix(in oklab,var(--primary) 82%,transparent);
  box-shadow:0 2px 10px color-mix(in oklab,var(--primary) 32%,transparent)}
.nc-list{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:4px 8px 14px}
.nc-list::-webkit-scrollbar{width:0}
/* lightweight editorial section labels */
.nc-sect{font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--faint);
  padding:14px 12px 5px;position:sticky;top:0;background:linear-gradient(var(--card) 62%,transparent);z-index:1}
.nc-group{display:flex;flex-direction:column}
/* event-specific radius context — only shown inside the Events tab */
.nc-evctx{display:flex;align-items:center;gap:6px;margin:2px 4px 6px;padding:7px 12px;border-radius:11px;
  background:color-mix(in oklab,var(--primary) 9%,transparent);color:var(--ink2);font-size:12px;font-weight:600}
.nc-evctx svg{flex:none;color:var(--primary)}
/* clean media rows — soft, divider-separated, not boxed */
.nc-item{display:flex;align-items:center;gap:13px;width:100%;text-align:left;position:relative;
  padding:11px 12px;border-radius:14px;background:none;border:0;transition:background .12s}
.nc-item::after{content:"";position:absolute;left:12px;right:12px;bottom:0;height:1px;
  background:color-mix(in oklab,var(--line) 50%,transparent)}
.nc-group .nc-item:last-child::after{display:none}
.nc-item:active{background:color-mix(in oklab,var(--primary) 7%,transparent)}
/* unread = subtle wash + stronger headline + a slim left accent (no loud dot) */
.nc-item.unread{background:color-mix(in oklab,var(--primary) 5%,transparent)}
.nc-item.unread::before{content:"";position:absolute;left:2px;top:14px;bottom:14px;width:3px;border-radius:3px;
  background:color-mix(in oklab,var(--primary) 70%,transparent)}
.nc-img{position:relative;flex:none;width:54px;height:62px;border-radius:13px;overflow:hidden;display:flex;align-items:center;justify-content:center;
  background:var(--surface-3);box-shadow:0 2px 8px rgba(0,0,0,.22)}
.nc-img img{width:100%;height:100%;object-fit:cover;display:block}
.nc-fallback{display:none;align-items:center;justify-content:center;width:100%;height:100%}
.nc-fallback.show{display:flex}
/* saved = small gold star tucked into the thumbnail corner (activity state unchanged) */
.nc-star{position:absolute;top:3px;right:3px;width:15px;height:15px;border-radius:50%;background:#f5b301;color:#3a2a00;
  display:flex;align-items:center;justify-content:center;box-shadow:0 1px 3px rgba(0,0,0,.5);z-index:3}
.nc-star svg{width:9px;height:9px}
/* "N more opening tonight" summary row */
.nc-more .nc-img{width:44px;height:44px;background:color-mix(in oklab,var(--primary) 13%,transparent);box-shadow:none}
.nc-more .nc-img svg{color:var(--primary)}
.nc-more .nc-title{color:var(--primary);font-weight:650;font-size:14px}
.nc-more .nc-sub2{color:var(--muted)}
.nc-fb-venue{color:var(--primary)}
.nc-fb-report{color:#ff86bf}
.nc-fb-event{color:#c6a4ff}
.nc-score{width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:600;font-size:20px;font-family:var(--mono)}
.nc-item:not(.unread) .nc-img{opacity:.82}
.nc-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.nc-accent{display:flex;align-items:center;gap:7px;font-size:11px;font-weight:600;color:var(--primary);
  text-transform:uppercase;letter-spacing:.03em;white-space:nowrap;overflow:hidden}
.nc-accent.nc-k-report{color:#ff86bf}
.nc-accent.nc-k-event{color:#c6a4ff}
.nc-tag{font-size:10px;font-weight:600;color:var(--muted);text-transform:none;letter-spacing:0;
  padding-left:7px;border-left:1px solid var(--line2);overflow:hidden;text-overflow:ellipsis}
.nc-title{font-size:15px;font-weight:650;color:var(--ink2);line-height:1.25;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.nc-item.unread .nc-title{color:var(--ink);font-weight:750}
.nc-sub2{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* home activity preview reuses the same rows inside the main sheet */
.nc-feed{padding:2px 0 4px}
.nc-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:4px;padding:48px 24px 44px}
.nc-empty-ic{width:64px;height:64px;object-fit:contain;opacity:.62;filter:grayscale(.5);margin-bottom:4px}
.nc-empty-t{font-size:15px;font-weight:600;color:var(--ink)}
.nc-empty-s{font-size:12.5px;color:var(--muted);line-height:1.4;max-width:250px}

/* "Events near you" call-to-action in the Tonight feed */
.events-cta{display:flex;align-items:center;gap:12px;width:100%;margin:4px 0 12px;padding:12px 14px;
  border-radius:14px;text-align:left;font:inherit;cursor:pointer;color:var(--text);
  background:linear-gradient(100deg,color-mix(in srgb,var(--primary) 26%,var(--surface-2)),var(--surface-2));
  border:1px solid color-mix(in srgb,var(--primary) 42%,var(--line))}
.events-cta .ec-ic{font-size:22px;flex:none}
.events-cta .ec-txt{display:flex;flex-direction:column;gap:1px;flex:1;min-width:0}
.events-cta .ec-txt b{font-size:14px;font-weight:600}
.events-cta .ec-txt span{font-size:12px;color:var(--muted)}
.events-cta .ec-go{flex:none;font-size:20px;font-weight:600;color:var(--primary)}

/* Settings: event-radius stepper + compact KM/MI toggle */
.stepper{display:flex;align-items:center;gap:8px;flex:none}
.step-btn{width:32px;height:32px;border-radius:50%;border:none;cursor:pointer;flex:none;
  background:color-mix(in oklab,var(--primary) 13%,transparent);color:var(--primary);
  font-size:20px;font-weight:600;line-height:1;display:flex;align-items:center;justify-content:center}
.step-btn:active{transform:scale(.9)}
.step-val{min-width:62px;text-align:center;font-size:14.5px;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
/* compact KM/MI shares the same design system as the Appearance control */
.segtoggle.segsm{width:auto;flex:0 0 auto}
.segtoggle.segsm button{flex:0 0 auto;padding:7px 15px;font-weight:600;min-width:44px}
/* notification switches */
.notif-row{gap:12px}
.nswitch{width:44px;height:26px;border-radius:14px;background:var(--surface-4);flex:none;position:relative;
  border:1px solid var(--line);transition:background .18s,border-color .18s;cursor:pointer;padding:0}
.nswitch-dot{position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;background:var(--card);
  box-shadow:0 1px 3px rgba(0,0,0,.3);transition:transform .18s}
.nswitch.on{background:var(--primary);border-color:transparent}
.nswitch.on .nswitch-dot{transform:translateX(18px);background:#fff}
/* Privacy & Terms content */
.legal-sect{margin-bottom:16px}
.legal-sect h3{font-size:14px;font-weight:600;color:var(--ink);margin:0 0 5px}
.legal-sect p{font-size:13px;line-height:1.5;color:var(--ink2);margin:0 0 7px}
.legal-foot{font-size:12.5px;color:var(--muted);text-align:center;padding:6px 0 4px}
.legal-foot a{color:var(--primary);font-weight:600}

/* Clubbit AI chat screen */
.chatscreen{position:fixed;inset:0;z-index:60;display:flex;flex-direction:column;background:var(--bg);
  /* translateY(100vh), not 100%: the panel is shortened by its bottom nav offset, so
     100% of its own height leaves a sliver of the header on screen when closed */
  transform:translateY(100vh);opacity:1;transition:transform .3s cubic-bezier(.22,.61,.36,1),opacity .28s ease}
.chatscreen[hidden]{display:none!important}
/* while the chat is open, freeze the map/background so it can't scroll or drift behind
   the panel (e.g. when the keyboard opens) */
body.chat-open{overflow:hidden}
/* hide the map entirely while the chat is open so it can never peek through any gap the
   keyboard opens up as the panel resizes to the visible viewport (body bg matches, so the
   area behind the panel stays a seamless dark surface) */
body.chat-open .stage{overflow:hidden!important;touch-action:none;visibility:hidden}
.chatscreen.open{transform:translateY(0)}
/* closing glides down and fades out on a soft settle curve so the dismiss feels smooth */
.chatscreen.closing{transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.34s;opacity:0}
.chat-head{display:flex;align-items:center;justify-content:space-between;padding:calc(var(--sat) + 12px) 14px 12px;border-bottom:1px solid var(--line);background:var(--card)}
.chat-title{font-size:16px;font-weight:600;display:flex;align-items:center;gap:10px;color:var(--text)}
.chat-title>span{display:flex;flex-direction:column;line-height:1.15}
.chat-title small{font-size:11px;font-weight:600;color:var(--muted)}
.chat-ai-av{width:60px;height:60px;border-radius:50%;overflow:hidden;position:relative;flex:none;display:block;box-shadow:0 1px 5px rgba(0,0,0,.3)}
/* Each mascot art fills its frame differently (man ~55%, woman ~64%, non-binary
   ~86%), so the image inside a chat avatar is positioned per gender to render the
   CHARACTER at the same on-screen size, centred, in every avatar. */
.chat-ai-av>img,.chat-av>img,.chat-welcome-av>img{position:absolute;width:auto;height:100%;left:0;top:0}
/* character rendered at ~68% of the circle (smaller, more padding), centred, equal
   size for every gender (each art fills its frame differently — man 55%, woman 64%,
   non-binary 86% — so the height % and offsets are tuned per gender). */
.mav-man>img{height:124%;left:2%;top:-13%}
.mav-fem>img{height:107%;left:10%;top:1%}
.mav-nb>img{height:79%;left:20%;top:14%}
.chat-close{width:36px;height:36px;border-radius:50%;border:none;background:var(--surface-3);color:var(--text);cursor:pointer;display:flex;align-items:center;justify-content:center}
.chat-close svg{width:18px;height:18px}
.chat-body{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:16px 16px 24px;display:flex;flex-direction:column;gap:12px}
.chat-msg{display:flex;align-items:flex-end;gap:8px}
.chat-msg.user{justify-content:flex-end}
.chat-msg.assistant{justify-content:flex-start}
.chat-av{width:40px;height:40px;border-radius:50%;overflow:hidden;position:relative;flex:none;display:block;align-self:flex-start;margin-top:2px}
/* spinning ring around the mascot while the AI is composing a reply */
.chat-av-load{position:relative;flex:none;align-self:flex-start;margin-top:2px;display:inline-flex}
.chat-av-load .chat-av{margin-top:0}
.chat-av-load::before{content:"";position:absolute;inset:-4px;border-radius:50%;
  border:2.5px solid rgba(124,58,237,.2);border-top-color:var(--primary);
  animation:chatAvSpin .8s linear infinite}
@keyframes chatAvSpin{to{transform:rotate(360deg)}}
/* blinking caret shown at the end of a message while it types out */
.chat-caret{display:inline-block;width:2px;height:1em;margin-left:1px;vertical-align:-2px;border-radius:1px;background:var(--primary);animation:chatCaret .7s steps(1) infinite}
@keyframes chatCaret{50%{opacity:0}}
.chat-col{display:flex;flex-direction:column;gap:8px;min-width:0;max-width:90%}
.chat-col.wide{max-width:100%}
.chat-bubble{padding:11px 14px;border-radius:16px;font-size:14.5px;line-height:1.5;word-wrap:break-word;overflow-wrap:anywhere}
.chat-msg.user .chat-bubble{max-width:82%}
.chat-msg.user .chat-bubble{background:var(--primary);color:#fff;border-bottom-right-radius:5px}
.chat-msg.assistant .chat-bubble{background:var(--surface-2);color:var(--text);border:1px solid var(--line);border-bottom-left-radius:5px}
.chat-bubble b{font-weight:600}
.chat-bubble.typing{display:flex;gap:5px;padding:14px}
.chat-bubble.typing span{width:7px;height:7px;border-radius:50%;background:var(--muted);animation:chatdot 1s infinite}
.chat-bubble.typing span:nth-child(2){animation-delay:.15s}
.chat-bubble.typing span:nth-child(3){animation-delay:.3s}
@keyframes chatdot{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}
.chat-welcome{text-align:center;margin:auto;max-width:340px;padding:8px 10px 16px}
/* when the keyboard is open: keep the mascot full size, shrink the TEXT/spacing, and
   sit the group a little lower (top-aligned) so everything stays visible above it */
.chatscreen.kb .chat-welcome{margin:0 auto auto;padding:22px 10px 6px}
.chatscreen.kb .chat-welcome h3{font-size:17px;margin:8px 0 3px}
.chatscreen.kb .chat-welcome p{font-size:12.5px;line-height:1.35;margin:0 0 8px}
.chatscreen.kb .chat-datline{margin:0 auto 8px}
.chatscreen.kb .chat-poplabel{margin-bottom:7px}
.chatscreen.kb .chat-chip-hero{padding:10px 15px;font-size:13.5px}
.chatscreen.kb .chat-suggest::before{opacity:.5}
.chatscreen.kb .chat-quickbar{padding:6px 0 8px}
/* lock scrolling on the STARTING page while the keyboard is open (it all fits, so no
   bounce/scroll). The conversation page still scrolls normally. */
.chatscreen.kb .chat-body.is-welcome{overflow:hidden}
/* quick prompts pinned in their own bar right above the composer (never clipped by the
   keyboard, since it sits outside the scrolling body) */
.chat-quickbar{padding:8px 0 10px}
.chat-quickbar[hidden]{display:none}
.chat-welcome-av{width:108px;height:108px;border-radius:50%;overflow:hidden;position:relative;flex:none;display:block;margin:0 auto;box-shadow:0 6px 22px rgba(0,0,0,.35)}
.chat-welcome h3{margin:12px 0 6px;font-size:20px;color:var(--text)}
.chat-welcome p{margin:0 0 8px;font-size:14px;color:var(--muted);line-height:1.5}
/* generic centred chip row (used by non-welcome contexts) */
.chat-chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.chat-chip{padding:8px 13px;border-radius:13px;border:1px solid color-mix(in oklab,var(--primary) 24%,var(--line));
  background:linear-gradient(180deg,color-mix(in oklab,var(--primary) 9%,var(--surface-3)),var(--surface-2));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 1px 4px rgba(0,0,0,.28);
  color:var(--ink2);font-size:12.5px;font-weight:600;cursor:pointer;text-align:center;
  transition:transform .1s ease,border-color .15s ease,box-shadow .18s ease}
.chat-chip:active{transform:scale(.98);border-color:color-mix(in oklab,var(--primary) 55%,transparent);
  box-shadow:0 0 10px color-mix(in oklab,var(--primary) 30%,transparent)}
/* featured (primary) suggestion — the clear headline action, centred, not edge-to-edge */
.chat-chip-hero{display:inline-flex;align-items:center;gap:8px;width:fit-content;max-width:min(100%,320px);margin:0 auto 12px;padding:12px 16px;border-radius:15px;cursor:pointer;white-space:nowrap;
  font-size:14px;font-weight:600;color:#fff;font-family:inherit;
  background:linear-gradient(135deg,color-mix(in oklab,var(--primary) 90%,#000),#c22fce);
  border:1px solid color-mix(in oklab,var(--primary) 60%,#fff);
  box-shadow:0 6px 24px color-mix(in oklab,var(--primary) 42%,transparent),0 0 14px -2px color-mix(in oklab,#d838d0 55%,transparent),inset 0 1px 0 rgba(255,255,255,.18);
  transition:transform .1s ease,box-shadow .2s ease}
.chat-chip-hero::before{content:"✦";font-size:13px;opacity:.95;flex:none}
.chat-chip-hero>*{margin:0 auto} /* centre the label text between the icons */
.chat-chip-hero::after{content:"›";margin-left:auto;font-size:18px;font-weight:600;opacity:.9;flex:none}
.chat-chip-hero:active{transform:scale(.985)}
/* symmetric 2-column secondary grid — quick filters, each on ONE line */
.chat-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;width:100%;max-width:300px;margin:0 auto}
.chat-grid .chat-chip{width:100%;min-height:34px;padding:7px 8px;display:flex;align-items:center;justify-content:center;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1;font-size:clamp(11px,3.3vw,12.5px)}
/* a lone item on the final row centres itself instead of hugging the left column */
.chat-grid>.chat-chip:last-child:nth-child(odd){grid-column:1 / -1;justify-self:center;max-width:65%}
/* short landscape: tighten the AI chat so its header + welcome don't crowd the panel */
@media (orientation:landscape) and (max-height:500px){
  .chat-head{padding:7px 14px}
  .chat-ai-av{width:42px;height:42px}
  .chat-welcome{padding:8px 10px}
  .chat-welcome-av{width:62px;height:62px}
  .chat-welcome h3{margin:8px 0 3px;font-size:17px}
  .chat-welcome p{margin:0 0 10px;font-size:12.5px;line-height:1.35}
  .chat-body{padding:12px 14px}
}
/* The WebView resizes for the keyboard, so the bar stays put on its own — no --kb
   margin (that was the source of the on-focus wobble). Focus changes nothing here. */
/* no top border / card seam — chips, composer and the content above sit on one continuous surface */
.chat-inputbar{display:flex;gap:9px;padding:12px 14px calc(12px + var(--sab));background:var(--bg)}
.chat-inputbar input{flex:1;height:46px;border-radius:23px;border:1.5px solid var(--line);background:var(--surface-2);color:var(--text);padding:0 16px;font-size:15px;font-family:inherit;outline:none}
.chat-inputbar input:focus{border-color:var(--primary)}
.chat-send{width:46px;height:46px;flex:none;border-radius:50%;border:none;background:var(--primary);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;
  box-shadow:0 2px 10px color-mix(in oklab,var(--primary) 45%,transparent);transition:transform .12s ease,box-shadow .18s ease,opacity .18s ease}
.chat-send svg{width:20px;height:20px}
.chat-send:active:not(:disabled){transform:scale(.9)}
.chat-send:disabled{opacity:.45;box-shadow:none;cursor:default}

/* clickable venue chips under an AI reply + AI nav mascot */
/* venue chips: one per row, uniform full width (as wide as the message column) */
.chat-venues{display:flex;flex-direction:column;gap:6px;margin-top:3px;width:100%}
.chat-venue-chip{display:flex;align-items:center;gap:9px;width:100%;padding:6px 12px 6px 6px;border-radius:14px;cursor:pointer;text-align:left;
  background:var(--card);border:1px solid color-mix(in srgb,var(--primary) 35%,var(--line));color:var(--text);font-family:inherit}
.chat-venue-chip img{width:30px;height:30px;border-radius:50%;object-fit:cover;flex:none}
.chat-venue-chip .cvc-ic{width:30px;height:30px;border-radius:50%;background:var(--surface-3);display:flex;align-items:center;justify-content:center;font-size:14px;flex:none}
.chat-venue-chip .cvc-name{font-size:13.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1 1 auto;min-width:0}
.chat-venue-chip .cvc-go{color:var(--primary);font-weight:600;font-size:16px;flex:none;margin-left:auto;padding-left:6px}
.chat-venue-chip:active{transform:scale(.98)}
/* ---- Clubbit AI: premium concierge polish ---- */
/* header live signal */
.chat-live{display:inline-flex;align-items:center;gap:4px;margin-left:5px;font-size:10px;font-weight:600;letter-spacing:.4px;
  color:#34d399;text-transform:uppercase}
/* slow, soft pulse on the live dot (the word LIVE stays still) */
.chat-live i{width:6px;height:6px;border-radius:50%;background:#34d399;box-shadow:0 0 6px #34d399;animation:chatLive 2.8s ease-in-out infinite}
@keyframes chatLive{0%,100%{opacity:1;box-shadow:0 0 7px #34d399}50%{opacity:.5;box-shadow:0 0 3px #34d399}}
/* empty state — one centred, deliberately composed suggestion group */
.chat-datline{display:inline-flex;align-items:center;gap:6px;margin:0 auto 15px;font-size:11.5px;font-weight:600;color:var(--muted)}
.chat-datline i{width:6px;height:6px;border-radius:50%;background:#34d399;box-shadow:0 0 6px #34d399;animation:chatLive 2.8s ease-in-out infinite}
.chat-suggest{position:relative;display:flex;flex-direction:column;align-items:center;width:100%}
/* extremely subtle radial glow behind the suggestions — depth, not a visible card */
.chat-suggest::before{content:"";position:absolute;left:50%;top:38%;transform:translate(-50%,-50%);
  width:120%;height:150%;z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse at center, color-mix(in oklab,var(--primary) 13%,transparent) 0%, transparent 68%)}
.chat-poplabel{font-size:11px;font-weight:600;letter-spacing:.8px;text-transform:uppercase;color:var(--muted);text-align:center;margin:0 0 12px}
/* thinking / live-check state */
.chat-bubble.chat-think{display:flex;align-items:center;gap:9px;padding:11px 14px}
.chat-think-dots{display:inline-flex;gap:4px;flex:none}
.chat-think-dots span{width:6px;height:6px;border-radius:50%;background:var(--primary);animation:chatdot 1s infinite}
.chat-think-dots span:nth-child(2){animation-delay:.15s}
.chat-think-dots span:nth-child(3){animation-delay:.3s}
.chat-think-txt{font-size:13px;color:var(--muted);font-weight:600}
/* compact "Best move" verdict card (replaces the big grey bubble) */
.chat-best{background:linear-gradient(180deg,color-mix(in oklab,var(--primary) 11%,var(--surface-2)),var(--surface-2));
  border:1px solid color-mix(in oklab,var(--primary) 30%,var(--line));border-radius:15px;padding:11px 13px 12px;
  box-shadow:0 2px 12px color-mix(in oklab,var(--primary) 12%,transparent)}
.chat-best-h{font-size:10.5px;font-weight:600;letter-spacing:.7px;text-transform:uppercase;
  color:color-mix(in oklab,var(--primary) 82%,#fff);margin-bottom:5px}
.chat-best-b{font-size:14.5px;line-height:1.45;color:var(--text)}
.chat-best-b b{font-weight:600}
/* section heading above the venue cards, with a subtle divider line trailing right */
.chat-reclabel{display:flex;align-items:center;gap:10px;font-size:10.5px;font-weight:600;letter-spacing:.7px;text-transform:uppercase;color:var(--muted);margin:6px 2px 0}
.chat-reclabel::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,color-mix(in oklab,var(--primary) 34%,var(--line2)),transparent)}
/* live venue cards under an AI reply */
.chat-vcards{display:flex;flex-direction:column;gap:8px;width:100%;margin-top:2px}
.chat-vsect{display:flex;flex-direction:column;gap:7px}
.chat-vsect-h{display:flex;align-items:center;gap:6px;font-size:10.5px;font-weight:600;letter-spacing:.7px;text-transform:uppercase;color:color-mix(in oklab,var(--primary) 80%,#fff);margin:3px 2px 0}
.chat-vsect-h::before{font-size:9px;line-height:1}
.chat-vsect-h.now{color:#4bd6a0}
.chat-vsect-h.now::before{content:"●";color:#34d399;text-shadow:0 0 5px #34d399}
.chat-vsect-h.later{color:color-mix(in oklab,#f5b301 60%,#fff)}
.chat-vsect-h.later::before{content:"◷";font-size:11px}
.chat-vcard{display:flex;align-items:stretch;gap:11px;width:100%;text-align:left;cursor:pointer;font-family:inherit;
  padding:10px 12px 11px 9px;border-radius:15px;color:var(--text);
  background:linear-gradient(180deg,color-mix(in oklab,var(--primary) 8%,var(--surface-3)),var(--surface-3));
  border:1px solid color-mix(in oklab,var(--primary) 26%,var(--line2));
  box-shadow:0 2px 10px rgba(0,0,0,.28);transition:transform .12s ease,border-color .2s ease,box-shadow .2s ease}
.chat-vcard:active{transform:scale(.985);border-color:color-mix(in oklab,var(--primary) 46%,transparent)}
/* status-aware accents — subtle, without changing the card design */
.chat-vcard.acc-now{border-color:color-mix(in oklab,#34d399 26%,var(--line2));
  box-shadow:0 2px 10px rgba(0,0,0,.28),0 0 12px -3px rgba(52,211,153,.45)}
/* GO LATER: much softer amber (≈45% less) — mostly normal card, amber left for accents */
.chat-vcard.acc-later{border-color:color-mix(in oklab,#f5b301 12%,var(--line2));
  box-shadow:0 2px 10px rgba(0,0,0,.28),0 0 7px -4px color-mix(in oklab,#f5b301 40%,var(--primary))}
/* the strongest pick: subtle brighter border + glow + a small embedded label (not bigger) */
.chat-vcard.top{position:relative;border-color:color-mix(in oklab,var(--primary) 55%,transparent);
  box-shadow:0 2px 12px rgba(0,0,0,.3),0 0 14px 1px color-mix(in oklab,var(--primary) 30%,transparent)}
/* embedded into the image's upper-left corner (deliberate), with a tiny glow */
.cv-toplabel{position:absolute;top:7px;left:7px;z-index:1;font-size:8.5px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;
  color:#fff;background:linear-gradient(135deg,var(--primary),#d838d0);padding:2px 7px;border-radius:7px;
  box-shadow:0 1px 5px rgba(0,0,0,.55),0 0 9px color-mix(in oklab,var(--primary) 60%,transparent)}
.cv-img{width:56px;height:56px;border-radius:12px;object-fit:cover;flex:none;align-self:center;background:var(--surface-4)}
.cv-noimg{display:flex;align-items:center;justify-content:center;font-size:22px;background:color-mix(in oklab,var(--primary) 16%,var(--surface-4))}
.cv-main{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}
.cv-top{display:flex;align-items:baseline;gap:8px;min-width:0}
.cv-name{font-size:15px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.cv-rating{flex:none;font-size:11.5px;font-weight:600;color:#f5b301;margin-left:auto}
.cv-chips{display:flex;flex-wrap:wrap;gap:5px}
.cv-chip{font-size:9.5px;font-weight:600;letter-spacing:.3px;padding:2.5px 7px;border-radius:8px;white-space:nowrap}
.cv-green{color:#34d399;background:rgba(52,211,153,.15);border:1px solid rgba(52,211,153,.3)}
.cv-amber{color:#f5b301;background:rgba(245,179,1,.14);border:1px solid rgba(245,179,1,.28)}
.cv-pink{color:#ff5cae;background:rgba(255,60,160,.15);border:1px solid rgba(255,60,160,.32)}
.cv-purple{color:color-mix(in oklab,var(--primary) 86%,#fff);background:color-mix(in oklab,var(--primary) 16%,transparent);border:1px solid color-mix(in oklab,var(--primary) 30%,transparent)}
.cv-meta{font-size:11.5px;color:var(--muted);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cv-why{font-size:12.5px;color:color-mix(in oklab,var(--text) 88%,var(--muted));line-height:1.35;margin-top:1px}
.cv-go{align-self:center;flex:none;color:var(--primary);font-weight:600;font-size:18px;padding-left:2px}
/* follow-ups / quick prompts — ONE horizontal swipe row. Chips scroll fully off-screen
   (no fade barrier), free-scroll so there's no dead space at the end, with a small side
   gutter so nothing is jammed against the edge. */
.chat-followwrap{position:relative;width:100%;margin-top:14px}
.chat-follow{display:flex;gap:9px;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;
  scroll-snap-type:x proximity;scroll-padding:0 16px;padding:2px 16px;scrollbar-width:none}
.chat-follow::-webkit-scrollbar{display:none}
/* endless loop: JS drives a calm continuous drift, so snap/smooth are OFF (they fought the
   loop and made it "crazy spin"). Chips peek at both edges; fades in on open. */
.chat-follow.chat-loop{scroll-snap-type:none;scroll-behavior:auto;animation:fade .45s ease both}
.chat-follow.chat-loop .chat-fchip{scroll-snap-align:none}
.chat-fchip{flex:0 0 auto;scroll-snap-align:start;display:inline-flex;align-items:center;justify-content:center;min-height:38px;padding:9px 16px;border-radius:18px;cursor:pointer;font-family:inherit;
  font-size:13px;font-weight:600;color:var(--ink2);white-space:nowrap;
  background:color-mix(in oklab,var(--primary) 8%,var(--surface-2));border:1px solid color-mix(in oklab,var(--primary) 28%,var(--line));
  transition:transform .1s ease,border-color .15s ease,background .15s ease}
.chat-fchip:active{transform:scale(.96);border-color:color-mix(in oklab,var(--primary) 50%,transparent);background:color-mix(in oklab,var(--primary) 16%,var(--surface-2))}
/* staggered entrance for the newest answer (quick, so it feels alive not slow) */
@media (prefers-reduced-motion:no-preference){
  /* the Best Move card is present while text types in, so it does NOT animate (that
     would flicker each tick). Only the recommendations/follow-ups fade in on finish. */
  .chat-msg.assistant:last-child .chat-reclabel{animation:chatIn .2s ease .02s both}
  .chat-msg.assistant:last-child .chat-vsect:nth-of-type(1){animation:chatIn .2s ease .06s both}
  .chat-msg.assistant:last-child .chat-vsect:nth-of-type(2){animation:chatIn .2s ease .12s both}
  .chat-msg.assistant:last-child .chat-vcards>.chat-vcard{animation:chatIn .2s ease .06s both}
  .chat-msg.assistant:last-child .chat-follow{animation:chatIn .2s ease .16s both}
}
@keyframes chatIn{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}
.bn-mascot{width:32px;height:32px;border-radius:50%;object-fit:cover}
.bn-ai.active .bn-mascot{outline:2px solid var(--primary);outline-offset:1px}