/* ═══════════════════════════════════════════════════════════════
   DRINK MAPS — design system v6 "AFTER DARK"
   Midnight base · signal red (the logo red, finally) · ember · neon
   Dark is the default. body.light is the daytime theme.
   Rules: text ≥ AA on its surface · every tap target ≥ 46px ·
   one icon grid · motion is fast, springy, and reduced-motion safe.
   ═══════════════════════════════════════════════════════════════ */

/* ── 1. TOKENS ─────────────────────────────────────────────── */
:root{
  /* base surfaces (dark) */
  --ink:#06080F;            /* app background */
  --surface:#111624;        /* cards */
  --surface-2:#19203230;    /* placeholder, overwritten below */
  --s3:#232C44;
  --s4:#2F3A57;
  --line:rgba(168,190,235,.10);
  --line-2:rgba(168,190,235,.20);

  /* text */
  --text:#F3F6FE;
  --muted:#9AA7C4;
  --faint:#7C8AA8;
  --label:#F3F6FE;

  /* brand — sampled from the Drink Maps mark (#E90C15), lifted for dark UI */
  --red:#FF2740;
  --red-deep:#E90C15;
  --ember:#FF7A2F;
  --amber:#FFB020;
  --green:#00E08A;
  --blue:#4D9FFF;
  --violet:#9B6BFF;
  --cyan:#3FD8F5;

  /* accessible text tints — a saturated brand colour as TEXT on its own
     tint fails contrast, so every accent has a text-safe twin */
  --green-t:#3BEFA9;
  --amber-t:#FFC44D;
  --cyan-t:#5FE3FA;
  --blue-t:#78B6FF;
  --purple-t:#B79BFF;
  --trail-t:#5FE3FA;
  --danger-t:#FF7A8C;
  --red-t:#FF6B7E;
  --ember-t:#FFA05C;
  --on-green:#04160C;      /* ink that sits on a solid green fill */
  --on-cyan:#052833;

  /* compositing helpers kept for legacy rules */
  --tint:168,190,235;
  --shadow:0,0,0;
  --glassrgb:17,22,36;
  --glass:rgba(17,22,36,.78);

  /* type */
  --display:'Unbounded',system-ui,sans-serif;
  --body:'Outfit',system-ui,-apple-system,sans-serif;

  /* shape + rhythm */
  --r:20px; --r-sm:14px; --r-lg:26px; --tap:46px;
  --gut:16px;

  /* elevation */
  --e1:0 1px 2px rgba(0,0,0,.4);
  --e2:0 4px 16px rgba(0,0,0,.42), 0 1px 2px rgba(0,0,0,.5);
  --e3:0 14px 40px rgba(0,0,0,.55), 0 2px 6px rgba(0,0,0,.4);
  --glow-red:0 6px 26px rgba(255,39,64,.42);

  /* motion — three curves, used everywhere (see §21 for reduced-motion)
     --sp     strong ease-out: entrances, exits, UI response
     --move   strong ease-in-out: things repositioning on screen
     --drawer iOS sheet curve (Ionic): bottom sheets and drawers
     --bo     overshoot: reserved for momentum moments (puck, tab pill) */
  --sp:cubic-bezier(.22,1,.36,1);
  --move:cubic-bezier(.77,0,.175,1);
  --drawer:cubic-bezier(.32,.72,0,1);
  --bo:cubic-bezier(.2,.9,.3,1.35);

  --sat:env(safe-area-inset-top,0px);
  --sab:env(safe-area-inset-bottom,0px);
--pt:#b91c1c;}
:root{ --surface-2:#192032; }

/* ── DAY THEME ── */
body.light{
  --ink:#F4F7FD; --surface:#FFFFFF; --surface-2:#EEF3FB; --s3:#E1EAF7; --s4:#CFDDF1;
  --line:rgba(16,42,86,.10); --line-2:rgba(16,42,86,.18);
  --text:#0B1B33; --muted:#516584; --faint:#5D6E88; --label:#0B1B33;
  --red:#E00A22; --red-deep:#B00618; --ember:#E2620C; --amber:#B7770A;
  --green:#00875A; --blue:#1667D6; --violet:#6D3EE0; --cyan:#0A7EA0;
  --green-t:#00714C; --amber-t:#8E5B00; --cyan-t:#046684; --blue-t:#1055B8;
  --purple-t:#5A2BCB; --trail-t:#046684; --danger-t:#C41F31;
  --red-t:#B00618; --ember-t:#9C4100; --on-green:#FFFFFF; --on-cyan:#FFFFFF;
  --tint:16,42,86; --glassrgb:255,255,255; --glass:rgba(255,255,255,.86);
  --e1:0 1px 2px rgba(16,42,86,.08);
  --e2:0 4px 16px rgba(16,42,86,.10), 0 1px 2px rgba(16,42,86,.06);
  --e3:0 14px 40px rgba(16,42,86,.16), 0 2px 6px rgba(16,42,86,.08);
  --glow-red:0 6px 22px rgba(224,10,34,.28);
}

/* ── 2. RESET + SHELL ──────────────────────────────────────── */
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%;overscroll-behavior:none}
body{background:var(--ink);font-family:var(--body);color:var(--text);font-size:16px;
  line-height:1.45;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  display:flex;justify-content:center;align-items:flex-start;min-height:100dvh}
/* On a phone the document itself must never scroll. If it can, iOS drags the
   whole app up as the URL bar collapses and the tab bar rides off the bottom
   of the screen — the app looks fine, then the nav is simply gone. Scrolling
   belongs to .body and nothing else. (Scoped to phone widths so the framed
   desktop preview, which is taller than the viewport, can still scroll.) */
@media(max-width:519px){
  html,body{overflow:hidden;position:fixed;inset:0;width:100%}
}
button,input,textarea,select{font-family:var(--body);color:inherit}
button{transition:transform .12s var(--sp),background .16s ease,border-color .16s ease,color .16s ease,box-shadow .16s ease}
button:active{transform:scale(.965)}
:focus-visible{outline:2px solid var(--red);outline-offset:2px;border-radius:8px}
img{max-width:100%}
.ico{display:block;flex-shrink:0}
.ico.is-fill{stroke:none}

/* Height cascade, weakest first — each line wins only where it's supported:
   100vh   … universal, but wrong on iOS while the URL bar is showing
   -webkit-fill-available … older iOS Safari's answer
   100dvh  … the modern one; tracks the URL bar
   --appvh … set from visualViewport by the script in index.html, and the only
             one that also shrinks when the on-screen keyboard opens, which is
             what keeps the tab bar above the keyboard instead of behind it. */
.frame{width:100%;height:100vh;height:-webkit-fill-available;height:100dvh;
  height:var(--appvh,100dvh);background:var(--ink);overflow:hidden;
  display:flex;flex-direction:column;position:relative}
@media(min-width:520px){
  body{padding:24px;align-items:center;
    background:radial-gradient(ellipse at 50% 0%,#131a2c,#05070d 70%)}
  body.light{background:radial-gradient(ellipse at 50% 0%,#ffffff,#dfe8f6 70%)}
  .frame{width:412px;height:min(880px,94vh);border-radius:54px;
    box-shadow:0 40px 100px rgba(0,0,0,.6),0 0 0 10px #0a0d15,0 0 0 11px rgba(255,255,255,.08)}
}
/* ambient brand glow behind everything */
.frame::before{content:"";position:absolute;inset:-30%;pointer-events:none;z-index:0;
  background:radial-gradient(circle at 26% 12%,rgba(255,39,64,.13),transparent 42%),
             radial-gradient(circle at 82% 88%,rgba(155,107,255,.10),transparent 44%);
  animation:driftGlow 18s ease-in-out infinite alternate}
body.light .frame::before{background:radial-gradient(circle at 26% 12%,rgba(224,10,34,.07),transparent 42%),
             radial-gradient(circle at 82% 88%,rgba(109,62,224,.06),transparent 44%)}
.frame>*{position:relative;z-index:1}
@keyframes driftGlow{to{transform:translate(4%,-4%) scale(1.09)}}

.scroll-x{display:flex;gap:9px;overflow-x:auto;scrollbar-width:none;padding:2px var(--gut) 8px;
  scroll-padding-inline:var(--gut)}
.scroll-x::-webkit-scrollbar{display:none}
.body{flex:1 1 0;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;
  scrollbar-width:none;overscroll-behavior:contain}
.body::-webkit-scrollbar{display:none}

/* entrance choreography — fires ONLY on navigation (the .screen-in class is
   applied by render() on tab changes, never on in-place re-renders), so a
   heart-tap or timer tick doesn't replay the whole show. Tab switches happen
   tens of times a session: keep them fast and shallow. */
.screen-in{animation:screenIn .2s var(--sp)}
@keyframes screenIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
/* .stag children choreograph only inside an entering screen; otherwise
   they're simply visible — no replay, no flicker. */
.stag{opacity:1}
.screen-in .stag{opacity:0;animation:screenIn .32s var(--sp) forwards}
/* the "Tonight near you" rail is the hero of Home — its cards cascade in
   with a 40ms stagger on arrival (first paint / returning to Home only) */
.screen-in .scroll-x .tcard{opacity:0;animation:screenIn .3s var(--sp) forwards}
.screen-in .scroll-x .tcard:nth-child(1){animation-delay:.1s}
.screen-in .scroll-x .tcard:nth-child(2){animation-delay:.14s}
.screen-in .scroll-x .tcard:nth-child(3){animation-delay:.18s}
.screen-in .scroll-x .tcard:nth-child(4){animation-delay:.22s}
.screen-in .scroll-x .tcard:nth-child(n+5){animation-delay:.26s}

/* ── 3. HEADER ─────────────────────────────────────────────── */
.hdr{display:flex;align-items:center;gap:10px;padding:calc(12px + var(--sat)) var(--gut) 10px;flex-shrink:0}
.hdr .logo{font-family:var(--display);font-weight:900;font-size:16px;flex-shrink:0;letter-spacing:-.02em}
.hdr .logo .dm{color:var(--red)}
.hbrand{height:28px;width:auto;flex-shrink:0;
  filter:drop-shadow(0 2px 10px rgba(255,39,64,.35))}
.locbar{flex:1;min-width:0;background:var(--surface);border:1px solid var(--line);border-radius:99px;
  display:flex;align-items:center;gap:8px;padding:0 15px;height:42px;cursor:pointer;box-shadow:var(--e1)}
.locbar:active{background:var(--surface-2)}
.locbar .dot{width:7px;height:7px;border-radius:50%;background:var(--green);
  box-shadow:0 0 0 3px rgba(0,224,138,.18);flex-shrink:0;animation:blink 2.4s ease-in-out infinite}
.locbar .city{font-weight:700;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  display:flex;align-items:center;letter-spacing:-.01em}
.locbar::after{content:"";width:6px;height:6px;margin-left:auto;flex-shrink:0;
  border-right:1.6px solid var(--faint);border-bottom:1.6px solid var(--faint);transform:rotate(45deg) translate(-2px,-2px)}
.hbtn{width:42px;height:42px;border-radius:14px;background:var(--surface);border:1px solid var(--line);
  cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;position:relative;
  color:var(--text);box-shadow:var(--e1)}
.hbtn:active{background:var(--surface-2)}
.hbtn .bub{position:absolute;top:-3px;right:-3px;min-width:16px;height:16px;border-radius:99px;background:var(--red-deep);
  color:#fff;font-size:11px;font-weight:800;display:flex;align-items:center;justify-content:center}
.fb-live{margin-left:7px;font-size:11px;font-weight:900;letter-spacing:.1em;color:var(--green-t);
  border:1px solid rgba(0,224,138,.4);border-radius:99px;padding:2px 6px;background:rgba(0,224,138,.1)}

/* ── 4. TAB BAR ────────────────────────────────────────────── */
/* Pinned to the bottom, structurally. flex-shrink:0 in a column flex frame is
   what puts it there; sticky + margin-top:auto are belt and braces for the
   cases that would otherwise let it drift — a screen whose content is shorter
   than the frame, or one that renders without the scrolling .body wrapper. */
.tabbar{display:flex;align-items:flex-end;flex-shrink:0;margin-top:auto;
  position:sticky;bottom:0;z-index:20;
  padding:9px 6px calc(11px + var(--sab));border-top:1px solid var(--line);
  background:linear-gradient(180deg,rgba(var(--glassrgb),.65),var(--ink) 42%);
  backdrop-filter:blur(20px) saturate(160%)}
.tab{flex:1;background:none;border:none;display:flex;flex-direction:column;align-items:center;gap:4px;
  cursor:pointer;padding-top:7px;min-height:var(--tap);color:var(--faint);position:relative}
.tab .em{position:relative;display:grid;place-items:center;
  width:26px;height:26px;transition:transform .22s var(--bo)}
.tab .em .ic-o,.tab .em .ic-f{grid-area:1/1;display:flex;align-items:center;justify-content:center;
  transition:opacity .18s ease,transform .22s var(--bo)}
.tab .em .ico{width:23px;height:23px}
/* outline resting, filled active — crossfade, never both */
.tab .em .ic-f{opacity:0;transform:scale(.82)}
.tab.on .em .ic-f{opacity:1;transform:scale(1)}
.tab.on .em .ic-o{opacity:0;transform:scale(1.1)}
/* pressed feedback: transform only, zero layout shift */
.tab:active .em{transform:scale(.88)}
.tab.on:active .em{transform:translateY(-2px) scale(.88)}
.tab.center:active .puck{transform:scale(.94)}
@media (prefers-reduced-motion:reduce){
  .tab .em,.tab .em .ic-o,.tab .em .ic-f,.tab.center .puck{transition:opacity .15s ease}
  .tab:active .em,.tab.on:active .em,.tab.center:active .puck{transform:none}
}
.tab .lb{font-size:11px;font-weight:700;letter-spacing:.01em;transition:color .18s ease;white-space:nowrap}
/* Six tabs instead of five: each is ~51px on a 320px screen, so the labels get
   a touch tighter. nowrap above is the load-bearing part — a wrapped "Profile"
   would grow the bar height and push the safe-area padding off. */
.tab.on{color:var(--red)}
.tab.on .em{transform:translateY(-2px)}
.tab.on .lb{color:var(--text);font-weight:800}
.tab.on::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:20px;height:3px;border-radius:0 0 99px 99px;background:var(--red);
  box-shadow:0 0 12px var(--red);animation:tabIn .3s var(--bo)}
@keyframes tabIn{from{transform:translateX(-50%) scaleX(0);opacity:0}}
.tab.center{flex:1.1}
.tab.center .puck{width:58px;height:58px;border-radius:22px;margin-top:-26px;color:#fff;
  background:linear-gradient(145deg,var(--red),var(--red-deep));
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 10px 28px rgba(255,39,64,.5),0 0 0 6px var(--ink),inset 0 1px 0 rgba(255,255,255,.28);
  transition:transform .24s var(--bo)}
.tab.center .puck .ico{width:26px;height:26px}
.tab.center:active .puck{transform:scale(.92);transition-duration:.1s}
.tab.center.on .puck{transform:scale(1.07) rotate(-4deg)}
.tab.center.on::before{display:none}
.tab.center .lb{margin-top:5px}
.tbadge{position:absolute;top:-5px;right:-11px;min-width:17px;height:17px;border-radius:12px;
  background:var(--red-deep);color:#fff;font-size:11px;font-weight:900;display:flex;align-items:center;
  justify-content:center;padding:0 4px;border:2px solid var(--ink);box-shadow:0 0 10px rgba(255,39,64,.6)}

/* ── 5. HOME ───────────────────────────────────────────────── */
.greet{padding:2px var(--gut) 0;font-family:var(--display);font-weight:700;font-size:20px;
  letter-spacing:-.025em;line-height:1.2;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.greet .ico{color:var(--red)}
.greet .sub{width:100%;font-family:var(--body);font-weight:500;font-size:14px;color:var(--muted);
  margin-top:5px;letter-spacing:0}

/* live happy-hour ticker — the hero moment */
.ticker{margin:14px var(--gut) 6px;border-radius:var(--r);padding:14px 16px;display:flex;align-items:center;gap:12px;
  background:linear-gradient(115deg,rgba(0,224,138,.16),rgba(0,224,138,.03) 60%),var(--surface);
  border:1px solid rgba(0,224,138,.34);cursor:pointer;width:calc(100% - var(--gut)*2);text-align:left;
  min-height:var(--tap);position:relative;overflow:hidden;box-shadow:var(--e2)}
.ticker::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle at 12% 50%,rgba(0,224,138,.18),transparent 55%);
  animation:breathe 3.4s ease-in-out infinite}
@keyframes breathe{50%{opacity:.45}}
.ticker.off{background:linear-gradient(115deg,rgba(255,176,32,.14),rgba(255,176,32,.02) 60%),var(--surface);
  border-color:rgba(255,176,32,.32)}
.ticker.off::after{background:radial-gradient(circle at 12% 50%,rgba(255,176,32,.15),transparent 55%);animation:none}
.ticker .live{width:10px;height:10px;border-radius:50%;background:var(--green);flex-shrink:0;
  box-shadow:0 0 0 4px rgba(0,224,138,.16),0 0 14px var(--green);animation:blink 1.5s infinite}
.ticker.off .live{background:var(--amber);box-shadow:0 0 0 4px rgba(255,176,32,.16);animation:none}
@keyframes blink{50%{opacity:.3}}
.ticker .t1{font-weight:800;font-size:15px;letter-spacing:-.01em}
.ticker .t2{font-size:13px;color:var(--muted);margin-top:2px}
.ticker .cd{margin-left:auto;font-family:var(--display);font-weight:900;font-size:15px;color:var(--green);
  flex-shrink:0;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.ticker.off .cd{color:var(--amber)}

/* ── home hero: the one thing on this screen with hero weight ─────────────
   Replaces .ticker as the answer to "where do I go next". The venue's own
   photo is the background; a bottom-weighted scrim carries the type so white
   text clears contrast over any image we did not choose or crop. */
.hh-hero{display:flex;flex-direction:column;align-items:flex-start;
  margin:14px var(--gut) 4px;width:calc(100% - var(--gut)*2);
  min-height:172px;padding:14px 16px 15px;border-radius:var(--r-lg);
  background-size:cover;background-position:center;background-color:var(--surface);
  border:1px solid rgba(255,255,255,.09);box-shadow:var(--e2);
  text-align:left;cursor:pointer;position:relative;overflow:hidden;isolation:isolate;
  /* Only transform transitions: `all` would animate the background-image swap
     on every re-render and cost a paint. */
  transition:transform 160ms cubic-bezier(.23,1,.32,1)}
.hh-hero:active{transform:scale(.985)}
/* Explicit line-heights throughout: these spans sit inside a <button>, which
   inherits the app's roomy body leading and was inflating a one-line eyebrow to
   39px and a one-line meta to 81px — the card came out 279px instead of 172px
   and pushed the venue list back under the fold, undoing the whole point. */
.hh-eyebrow{display:inline-flex;align-items:center;gap:6px;line-height:1;
  font-size:12px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;
  color:var(--amber);text-shadow:0 1px 6px rgba(0,0,0,.6)}
.hh-hero.live .hh-eyebrow{color:var(--green)}
.hh-dot{width:7px;height:7px;border-radius:50%;background:var(--green);
  box-shadow:0 0 0 3px rgba(0,224,138,.22);animation:hhpulse 2s ease-in-out infinite}
@keyframes hhpulse{0%,100%{opacity:1}50%{opacity:.45}}
/* Copy sits at the bottom so the photo reads above it. */
/* align-self:stretch so the text uses the card's full width instead of
   shrink-wrapping under align-items:flex-start and wrapping early. */
.hh-name{margin-top:auto;padding-top:10px;align-self:stretch;
  font-family:var(--display);font-weight:900;
  font-size:24px;line-height:1.14;letter-spacing:-.03em;color:#fff;
  text-shadow:0 2px 12px rgba(0,0,0,.55);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.hh-meta{margin-top:5px;align-self:stretch;font-size:13px;font-weight:500;line-height:1.35;
  color:rgba(255,255,255,.82);text-shadow:0 1px 8px rgba(0,0,0,.6);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.hh-cta{margin-top:11px;display:flex;align-items:center;gap:9px;align-self:stretch;line-height:1}
.hh-cd{font-family:var(--display);font-weight:900;font-size:16px;letter-spacing:-.01em;line-height:1;
  font-variant-numeric:tabular-nums;color:var(--amber);
  background:rgba(8,8,12,.55);border:1px solid rgba(255,176,32,.34);
  border-radius:99px;padding:6px 12px;backdrop-filter:blur(6px)}
.hh-hero.live .hh-cd{color:var(--green);border-color:rgba(0,224,138,.4)}
.hh-go{margin-left:auto;display:flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:50%;color:#fff;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.2);
  backdrop-filter:blur(6px)}

/* ── one social row (was .plan-strip + .chat-card + .friends-strip) ─────── */
.social-row{display:flex;align-items:center;gap:11px;
  margin:12px var(--gut) 2px;width:calc(100% - var(--gut)*2);
  min-height:var(--tap);padding:10px 13px;border-radius:var(--r);
  background:var(--surface);border:1px solid var(--line);box-shadow:var(--e1);
  text-align:left;cursor:pointer;
  transition:transform 160ms cubic-bezier(.23,1,.32,1)}
.social-row:active{transform:scale(.985)}
.sr-avs{display:flex;flex-shrink:0}
.sr-avs>span{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;font-size:13px;font-weight:800;color:#fff;
  border:2px solid var(--surface);margin-right:-9px}
.sr-avs>span:last-child{margin-right:0}
.sr-ico{background:rgba(109,62,224,.22);color:var(--violet)}
.sr-b{min-width:0;flex:1;display:flex;flex-direction:column;gap:2px}
.sr-b b{font-size:14px;font-weight:800;letter-spacing:-.01em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sr-b i{font-style:normal;font-size:13px;color:var(--muted);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sr-n{flex-shrink:0;font-size:13px;font-weight:800;color:var(--green);
  font-variant-numeric:tabular-nums}
.sr-n::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;
  background:var(--green);margin-right:5px;vertical-align:middle}

/* Motion here is decorative: movement goes, legibility stays. */
@media (prefers-reduced-motion:reduce){
  .hh-hero,.social-row{transition:none}
  .hh-hero:active,.social-row:active{transform:none}
  .hh-dot{animation:none}
}

/* category chips */
.cat-chips{padding-top:10px}
.chip{flex-shrink:0;display:flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--line);
  color:var(--muted);border-radius:99px;padding:0 16px;height:42px;font-size:14px;font-weight:700;cursor:pointer;
  white-space:nowrap;letter-spacing:-.01em;box-shadow:var(--e1);
  transition:background .18s ease,color .18s ease,border-color .18s ease,box-shadow .18s ease,transform .12s var(--sp)}
.chip .ico{width:17px;height:17px}
.chip .ce{display:flex;align-items:center;font-size:16px}
.chip.on{background:linear-gradient(135deg,var(--red),var(--red-deep));border-color:transparent;color:#fff;
  box-shadow:var(--glow-red)}

/* section headers */
.sec{display:flex;align-items:center;justify-content:space-between;padding:14px var(--gut) 7px;gap:10px}
.sec h2{font-family:var(--display);font-size:14px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--text);display:flex;align-items:center;gap:8px}
.sec h2 .ico{color:var(--red);width:15px;height:15px}
.sec .more{font-size:14px;font-weight:700;color:var(--red);background:none;border:none;cursor:pointer;
  min-height:32px;display:flex;align-items:center;gap:4px;padding:0}
.sec .more .ico{width:14px;height:14px}

/* Tonight rail — venue cards */
.tcard{flex:0 0 240px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;cursor:pointer;text-align:left;box-shadow:var(--e2);
  transition:transform .18s var(--sp),box-shadow .18s ease,border-color .18s ease}
.tcard:active{transform:scale(.98)}
.tcard .art{height:112px;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden}
.tcard .art::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 40%,rgba(0,0,0,.55))}
body.light .tcard .art::after{background:linear-gradient(180deg,transparent 45%,rgba(255,255,255,.6))}
.tcard .art .mono{width:60px;height:60px;font-size:20px;z-index:1}
.tcard .art .fav{position:absolute;top:9px;right:9px;width:36px;height:36px;border-radius:50%;z-index:2;
  background:rgba(6,8,15,.62);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.14);
  cursor:pointer;color:#fff;display:flex;align-items:center;justify-content:center}
.tcard .art .fav.on{color:var(--red)}
.tcard .art .chips-row{position:absolute;left:10px;bottom:9px;display:flex;gap:5px;z-index:2}
.tag-s{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:800;letter-spacing:.05em;
  padding:4px 8px;border-radius:99px;background:rgba(6,8,15,.78);backdrop-filter:blur(8px);color:#fff;
  border:1px solid rgba(255,255,255,.12)}
.tag-s .ico{width:11px;height:11px}
.tag-s.o{color:var(--green-t)} .tag-s.c{color:#C7CFE0} .tag-s.hh{color:var(--amber-t)}
.tcard .meta{padding:12px 14px 14px}
.tcard .nm{font-weight:800;font-size:16px;letter-spacing:-.015em}
.tcard .ar{font-size:13px;color:var(--muted);margin-top:3px}
.tcard .deal{font-size:13px;font-weight:700;color:var(--red);margin-top:8px;display:flex;align-items:center;gap:5px}
.tcard .deal span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.tcard .deal .ico{width:13px;height:13px;flex-shrink:0}

/* friends strip */
.friends-strip{display:flex;gap:8px;align-items:center;overflow-x:auto;scrollbar-width:none;padding:4px var(--gut) 8px}
.friends-strip::-webkit-scrollbar{display:none}
.friends-strip .fs-l{font-size:11px;font-weight:900;letter-spacing:.14em;color:var(--muted);
  text-transform:uppercase;flex-shrink:0;padding-right:2px}
.friend{flex-shrink:0;display:flex;align-items:center;gap:9px;background:var(--surface);border:1px solid var(--line);
  border-radius:99px;padding:5px 15px 5px 5px;min-height:42px;cursor:pointer;box-shadow:var(--e1)}
.friend .f-av{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-weight:900;font-size:14px;color:#fff;flex-shrink:0;box-shadow:inset 0 1px 0 rgba(255,255,255,.3)}
.friend .f-t{font-size:13px;color:var(--muted);white-space:nowrap}
.friend .f-t b{color:var(--text);font-weight:700}
.friend .f-t i{color:var(--green);font-style:normal;font-weight:800}

/* today-in-city rows */
.today-sec{padding:0 var(--gut);display:flex;flex-direction:column;gap:9px}
.tsp{display:flex;align-items:center;gap:12px;background:var(--surface);
  border:1px solid var(--line);border-left:3px solid var(--amber);
  border-radius:var(--r-sm);padding:12px 14px;cursor:pointer;min-height:56px;box-shadow:var(--e1)}
.tsp:active{background:var(--surface-2)}
.tsp-n{font-weight:800;font-size:14px;flex-shrink:0;max-width:36%;color:var(--amber-t);letter-spacing:-.01em}
.tsp-t{font-size:13px;color:var(--text);line-height:1.4;min-width:0}
.tsp-a{margin-left:auto;color:var(--faint);flex-shrink:0;display:flex;align-items:center}

/* wheel teaser + sponsor */
.wheel-teaser{margin:8px var(--gut) 0;border-radius:var(--r);padding:14px 16px;display:flex;gap:13px;align-items:center;
  background:linear-gradient(115deg,rgba(155,107,255,.18),rgba(155,107,255,.03) 60%),var(--surface);
  border:1px solid rgba(155,107,255,.36);cursor:pointer;width:calc(100% - var(--gut)*2);text-align:left;
  min-height:var(--tap);box-shadow:var(--e2)}
.wheel-teaser .wt-em{flex-shrink:0;width:40px;height:40px;border-radius:14px;display:flex;align-items:center;
  justify-content:center;background:rgba(155,107,255,.16);color:var(--violet);
  border:1px solid rgba(155,107,255,.34)}
.wheel-teaser .wt-em .ico{width:22px;height:22px;animation:slowspin 9s linear infinite}
@keyframes slowspin{to{transform:rotate(360deg)}}
.wheel-teaser .wt-t{font-weight:800;font-size:15px;letter-spacing:-.01em}
.wheel-teaser .wt-s{font-size:13px;color:var(--muted)}
.wheel-teaser .wt-a{margin-left:auto;color:var(--purple-t);display:flex;align-items:center}

.sponsor{color:#fff;margin:16px var(--gut) 6px;border:1px solid var(--line-2);border-radius:var(--r);
  text-align:center;padding:18px;cursor:pointer;width:calc(100% - var(--gut)*2);position:relative;overflow:hidden;
  box-shadow:var(--e2)}
.sponsor::after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.14),transparent);animation:sheen 4.5s infinite}
@keyframes sheen{0%,60%{left:-60%}100%{left:120%}}
.sponsor .name{font-family:var(--display);font-weight:900;font-size:20px;letter-spacing:.06em}
.sponsor .sub{color:rgba(255,255,255,.72);font-size:11px;font-weight:700;text-transform:uppercase;
  letter-spacing:.08em;margin-top:5px}
.sponsor .link{color:var(--amber);font-size:13px;font-weight:700;margin-top:8px;display:inline-block}
.dots{display:flex;justify-content:center;gap:5px;margin-top:9px}
.dots span{width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.28);transition:background .2s ease,width .2s var(--sp),border-radius .2s ease}
.dots span.on{background:var(--red);width:16px;border-radius:99px}

/* event cards */
.event-card{border-radius:var(--r);padding:14px;display:flex;gap:13px;align-items:center;
  background:var(--surface);border:1px solid var(--line);
  cursor:pointer;width:100%;text-align:left;min-height:70px;box-shadow:var(--e2)}
.event-card .date{flex-shrink:0;width:54px;height:58px;border-radius:14px;
  background:linear-gradient(150deg,rgba(77,159,255,.2),rgba(77,159,255,.05));
  border:1px solid rgba(77,159,255,.34);display:flex;flex-direction:column;align-items:center;justify-content:center}
.event-card .d1{font-family:var(--display);font-weight:900;font-size:14px;color:var(--blue-t);letter-spacing:-.02em}
.event-card .d2{font-size:11px;font-weight:800;letter-spacing:.12em;color:var(--blue-t);margin-top:3px;opacity:.85}
.event-card .nm{font-weight:800;font-size:15px;letter-spacing:-.01em}
.event-card .in{font-size:13px;color:var(--muted);margin-top:4px;line-height:1.4}
/* Synced listings (Ticketmaster/SeatGeek) carry a poster and a ticket link;
   hand-written rows have neither, so both children below are optional.
   Live titles also run far longer than the hand-written ones ("Zach Bryan -
   The Quittin Time Tour"), so the text column needs min-width:0 or flex
   refuses to shrink it and the card blows out of the viewport. */
.event-card>div:not(.date){min-width:0}
.event-card .nm,.event-card .in{overflow:hidden;text-overflow:ellipsis}
.event-card .nm{white-space:nowrap}
.event-card .ev-cover{flex-shrink:0;width:54px;height:58px;border-radius:14px;object-fit:cover;
  background:var(--line);border:1px solid var(--line)}
.event-card .ev-cover+.date{margin-left:-8px;width:44px;background:var(--surface);
  box-shadow:0 2px 10px rgba(0,0,0,.3)}
.event-card .ev-go{margin-left:auto;flex-shrink:0;opacity:.45;display:flex;align-items:center}
/* Weekly regulars (trivia, karaoke, live acoustic) are expanded on-device into
   dated instances, so they sit in the normal chronological list — this marks
   them as "happens every week" rather than a one-off. */
.event-card .ev-rep{flex-shrink:0;opacity:.4;display:flex;align-items:center}
.event-card .ev-go+.ev-rep,.event-card .ev-rep+.ev-go{margin-left:6px}
.event-card .ev-rep:not(.ev-go~*){margin-left:auto}
.event-card .ev-when{color:var(--blue-t);font-weight:800}
.sec .sec-sub{font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);opacity:.75;margin-left:auto;align-self:center}

/* ── 6. MONOGRAM MARKS ─────────────────────────────────────── */
.mono{position:relative;overflow:hidden;border-radius:16px;display:flex;align-items:center;justify-content:center;
  font-family:var(--display);font-weight:900;color:#fff;flex-shrink:0;
  text-shadow:0 1px 6px rgba(0,0,0,.35);box-shadow:inset 0 1px 0 rgba(255,255,255,.18)}
.mono .mk-i{position:relative;z-index:2;letter-spacing:-.03em}
.mono .mk-wm{position:absolute;right:-4px;bottom:-6px;font-size:1.6em;opacity:.2;z-index:1;filter:grayscale(1)}
.mk-round{border-radius:50%!important}
.mk-leaf{border-radius:50% 15px 50% 15px!important}
.mk-cut{border-radius:16px 5px 17px 5px!important}
.mk-stripe::before{content:"";position:absolute;inset:0;z-index:1;
  background:repeating-linear-gradient(45deg,rgba(255,255,255,.11) 0 4px,transparent 4px 11px)}
.mk-dots::before{content:"";position:absolute;inset:0;z-index:1;
  background-image:radial-gradient(rgba(255,255,255,.13) 1.2px,transparent 1.3px);background-size:9px 9px}
.mk-ring::before{content:"";position:absolute;inset:14%;z-index:1;border-radius:50%;border:2px solid rgba(255,255,255,.14)}
.mlogo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:inherit;z-index:3}

/* ── 7. LIST SCREENS ───────────────────────────────────────── */
.filter-pills{display:flex;gap:8px;padding:2px var(--gut) 12px;overflow-x:auto;scrollbar-width:none}
.filter-pills::-webkit-scrollbar{display:none}
.fpill{flex-shrink:0;background:var(--surface);border:1px solid var(--line);color:var(--muted);border-radius:99px;
  padding:0 16px;height:40px;font-size:14px;font-weight:700;cursor:pointer;display:flex;align-items:center;gap:6px;
  box-shadow:var(--e1)}
.fpill .ico{width:14px;height:14px}
.fpill.on{background:var(--surface-2);border-color:var(--line-2);color:var(--text);font-weight:800}
.fpill.on.g{color:var(--green-t);border-color:rgba(0,224,138,.45);background:rgba(0,224,138,.09)}
.fpill.on.a{color:var(--amber-t);border-color:rgba(255,176,32,.45);background:rgba(255,176,32,.09)}

.list{padding:2px var(--gut) 22px;display:flex;flex-direction:column;gap:11px}
.l-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:13px;
  display:flex;gap:13px;align-items:center;cursor:pointer;text-align:left;width:100%;min-height:76px;
  box-shadow:var(--e2);transition:transform .16s var(--sp),border-color .16s ease}
.l-card:active{transform:scale(.985);border-color:var(--line-2)}
.l-card .mono{width:54px;height:54px;font-size:17px;align-self:flex-start}
.l-card .nm{font-weight:800;font-size:16px;letter-spacing:-.015em}
.l-card .sub{font-size:13px;color:var(--muted);margin-top:3px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.l-card .deal{font-size:13px;font-weight:700;color:var(--red);margin-top:6px;display:flex;gap:5px;align-items:flex-start;line-height:1.35}
.l-card .deal .ico{width:13px;height:13px;flex-shrink:0;margin-top:1px}
.l-card .tags{margin-top:8px;display:flex;gap:5px;flex-wrap:wrap}
.l-card .right{margin-left:auto;text-align:right;flex-shrink:0;display:flex;flex-direction:column;
  align-items:flex-end;gap:8px;align-self:flex-start}
.l-card .dist{font-size:12px;font-weight:800;color:var(--muted);font-variant-numeric:tabular-nums}
.l-card .fav{background:none;border:none;cursor:pointer;width:38px;height:38px;color:var(--faint);
  display:flex;align-items:center;justify-content:center;border-radius:50%}
.l-card .fav.on,.fav.on{color:var(--red)}
.fav.pop{animation:pop .4s var(--bo)}
@keyframes pop{40%{transform:scale(1.45)}}

.empty{padding:52px 40px;text-align:center;color:var(--muted)}
.empty .big{display:flex;justify-content:center;margin-bottom:14px;color:var(--faint);opacity:.75}
.empty .big .ico{width:44px;height:44px}
.empty p{font-size:15px;line-height:1.6}
.samplenote{padding:4px 26px 18px;font-size:12px;color:var(--faint);text-align:center;line-height:1.55}

.open-tag{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:800;letter-spacing:.04em;
  padding:5px 9px;border-radius:99px;background:var(--surface-2);color:var(--muted)}
.open-tag .ico{width:11px;height:11px}
.open-tag.o{color:var(--green-t);background:rgba(0,224,138,.12)}
.open-tag.c{color:var(--muted);background:var(--surface-2)}
.open-tag.hh{color:var(--amber-t);background:rgba(255,176,32,.13);
  box-shadow:0 0 0 1px rgba(255,176,32,.25),0 0 14px rgba(255,176,32,.14)}

/* ── 8. BUSY METER + PRESENCE ──────────────────────────────── */
i.bars{display:inline-flex;align-items:flex-end;gap:1.6px;height:9px;margin-right:5px}
i.bars i{width:2.6px;background:currentColor;border-radius:1px;opacity:.24}
i.bars i:nth-child(1){height:3px}i.bars i:nth-child(2){height:5px}i.bars i:nth-child(3){height:7px}i.bars i:nth-child(4){height:9px}
.b1 i.bars i:nth-child(-n+1),.b2 i.bars i:nth-child(-n+2),.b3 i.bars i:nth-child(-n+3),.b4 i.bars i{opacity:1}
.open-tag.bz.b1,.tag-s.bz.b1{color:var(--blue-t);background:rgba(77,159,255,.13)}
.open-tag.bz.b2,.tag-s.bz.b2{color:var(--green-t);background:rgba(0,224,138,.12)}
.open-tag.bz.b3,.tag-s.bz.b3{color:var(--amber-t);background:rgba(255,176,32,.13)}
.open-tag.bz.b4,.tag-s.bz.b4{color:var(--red-t);background:rgba(255,39,64,.14)}
.open-tag.here,.tag-s.here{color:var(--purple-t);background:rgba(155,107,255,.14)}
.busy-block{margin-top:15px;border-radius:var(--r-sm);padding:13px 15px;background:var(--surface-2);
  border:1px solid var(--line-2)}
.busy-block.b1{border-color:rgba(77,159,255,.34)}.busy-block.b2{border-color:rgba(0,224,138,.34)}
.busy-block.b3{border-color:rgba(255,176,32,.34)}.busy-block.b4{border-color:rgba(255,39,64,.38)}
.bb-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.bb-lvl{font-weight:900;font-size:15px;display:inline-flex;align-items:center;letter-spacing:-.01em}
.busy-block.b1 .bb-lvl{color:var(--blue-t)}.busy-block.b2 .bb-lvl{color:var(--green-t)}
.busy-block.b3 .bb-lvl{color:var(--amber-t)}.busy-block.b4 .bb-lvl{color:var(--danger-t)}
.bb-trend{font-size:12px;color:var(--muted);font-weight:600}
.bb-gauge{margin-top:10px;height:7px;border-radius:99px;background:rgba(var(--tint),.10);overflow:hidden}
.bb-gauge i{display:block;height:100%;border-radius:99px;transition:width .7s var(--sp)}
.busy-block.b1 .bb-gauge i{background:linear-gradient(90deg,#2B6BC4,#4D9FFF)}
.busy-block.b2 .bb-gauge i{background:linear-gradient(90deg,#068A57,#00E08A)}
.busy-block.b3 .bb-gauge i{background:linear-gradient(90deg,#B87B1E,#FFB020)}
.busy-block.b4 .bb-gauge i{background:linear-gradient(90deg,#C4102A,#FF2740)}
.bb-here{margin-top:10px;font-size:13px;color:var(--muted);display:flex;align-items:center;gap:6px}
.bb-here .ico{width:14px;height:14px;color:var(--purple-t)}
.bb-here b{color:var(--purple-t)}

/* ── 9. MAP ────────────────────────────────────────────────── */
.map-stage{position:relative;flex:1 1 0;min-height:0;height:100%;display:flex;flex-direction:column}
.map-viewport{position:relative;flex:1;min-height:0;overflow:hidden;touch-action:none;cursor:grab;
  background:var(--surface-2);user-select:none}
.map-viewport.grabbing{cursor:grabbing}
.map-layer{position:absolute;inset:0;transform-origin:0 0;will-change:transform}
.map-layer svg{position:absolute;inset:0;width:100%;height:100%}
/* floating glass filter bar instead of a solid slab over the map */
.map-chips{position:absolute;top:0;left:0;right:0;z-index:1001;padding:10px 0 16px;
  background:linear-gradient(180deg,rgba(var(--glassrgb),.92) 20%,rgba(var(--glassrgb),0));
  -webkit-mask-image:linear-gradient(180deg,#000 55%,transparent);
  mask-image:linear-gradient(180deg,#000 55%,transparent)}
.map-chips .scroll-x{padding-bottom:2px}
.map-chips .chip{backdrop-filter:blur(14px) saturate(160%);background:var(--glass);box-shadow:var(--e2)}
.map-chips .chip.on{background:linear-gradient(135deg,var(--red),var(--red-deep))}
.map-ctrl{position:absolute;right:12px;bottom:126px;display:flex;flex-direction:column;gap:8px;z-index:1001}
.map-ctrl button{width:46px;height:46px;border:1px solid var(--line-2);border-radius:16px;background:var(--glass);
  backdrop-filter:blur(16px) saturate(160%);color:var(--text);cursor:pointer;box-shadow:var(--e2);
  display:flex;align-items:center;justify-content:center;
  transition:transform 100ms var(--sp),background .18s ease,border-color .18s ease,box-shadow .18s ease}
.map-ctrl button:active{transform:scale(.93)}
.map-ctrl #heatbtn.on{background:rgba(255,39,64,.2);border-color:rgba(255,39,64,.6);color:var(--red-t);
  box-shadow:0 0 18px rgba(255,39,64,.35)}
.map-hintline{position:absolute;left:50%;transform:translateX(-50%);bottom:108px;z-index:1000;font-size:12px;
  color:var(--muted);background:var(--glass);backdrop-filter:blur(12px);border:1px solid var(--line);
  border-radius:99px;padding:7px 14px;white-space:nowrap;transition:opacity .4s;pointer-events:none}
.map-hintline.hide{opacity:0}

.pin{position:absolute;transform:translate(-50%,-100%);border:none;background:none;cursor:pointer;z-index:3;padding:6px}
.pin-inner{display:flex;flex-direction:column;align-items:center;transform-origin:50% 100%;transition:transform .2s var(--sp)}
@media (hover:hover) and (pointer:fine){.pin:hover .pin-inner{transform:scale(1.12)}}
.pin .mono{width:40px;height:40px;font-size:13px;border-radius:14px 14px 14px 4px!important;
  box-shadow:0 8px 18px rgba(0,0,0,.5);border:2px solid rgba(255,255,255,.28);transition:box-shadow .2s,border-color .2s}
.pin .mono .mk-wm{display:none}
.pin.sel .mono{border-color:#fff;box-shadow:0 0 0 4px rgba(255,39,64,.4),0 8px 22px rgba(0,0,0,.5)}
.pin.sel{z-index:4}
.pin.sel .pin-inner{animation:bounce .34s var(--bo)}
@keyframes bounce{30%{transform:translateY(-9px) scale(1.09)}}
.pin .stem{width:2px;height:7px;background:rgba(255,255,255,.35)}
.pin .tag{margin-top:4px;background:rgba(6,8,15,.9);backdrop-filter:blur(8px);color:#fff;font-size:11px;
  font-weight:700;padding:4px 10px;border-radius:99px;white-space:nowrap;opacity:0;transition:opacity .2s;
  pointer-events:none;border:1px solid rgba(255,255,255,.14)}
.map-viewport.zoomed .pin .tag,.pin:hover .tag,.pin.sel .tag{opacity:1}
.pin.drop .pin-inner{animation:drop .5s var(--bo)}
@keyframes drop{0%{transform:translateY(-34px);opacity:0}100%{transform:translateY(0);opacity:1}}
.you{position:absolute;transform:translate(-50%,-50%);z-index:2;pointer-events:none}
.you .core{width:14px;height:14px;border-radius:50%;background:var(--blue);border:3px solid #fff;
  box-shadow:0 0 12px rgba(77,159,255,.9)}
.you .pulse{position:absolute;inset:-14px;border-radius:50%;background:rgba(77,159,255,.3);animation:pulse 2.2s infinite}
@keyframes pulse{0%{transform:scale(.45);opacity:1}100%{transform:scale(1.7);opacity:0}}

.preview{position:absolute;left:12px;right:12px;bottom:14px;z-index:1002;background:var(--glass);
  backdrop-filter:blur(20px) saturate(170%);border:1px solid var(--line-2);border-radius:var(--r);padding:14px;
  display:flex;gap:13px;align-items:center;cursor:pointer;animation:up .28s var(--sp);
  box-shadow:var(--e3);text-align:left;width:calc(100% - 24px);min-height:78px}
.preview .mono{width:54px;height:54px;font-size:17px}
.preview .nm{font-weight:800;font-size:16px}
.preview .sub{font-size:12px;color:var(--muted);margin-top:2px}
.preview .deal{font-size:12px;font-weight:700;color:var(--red);margin-top:5px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:190px}
.preview .go{margin-left:auto;flex-shrink:0;width:40px;height:40px;border-radius:50%;border:none;cursor:pointer;
  background:var(--red-deep);color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:var(--glow-red)}

/* Leaflet layer */
.map-viewport.lmode{touch-action:auto}
#lmap{background:var(--ink)}
.lmode .leaflet-top.leaflet-right{top:64px;right:2px}
#lmap .leaflet-tile-pane{filter:saturate(1.05) contrast(1.02)}
body.light #lmap .leaflet-tile-pane{filter:saturate(1.02)}
.leaflet-control-attribution{background:rgba(var(--glassrgb),.75)!important;color:var(--muted)!important;font-size:11px!important}
.leaflet-control-attribution a{color:var(--muted)!important}
#lmslot{position:absolute;inset:0;z-index:0;isolation:isolate}
.map-viewport.lmode>:not(#lmslot){z-index:1000}
.lpin{width:72px;height:72px;border-radius:20px;transform:scale(var(--pinscale,1));transform-origin:center center;
  display:flex;align-items:center;justify-content:center;
  font:800 13px/1 'Unbounded',sans-serif;color:#fff;letter-spacing:-.03em;position:relative;
  background:linear-gradient(148deg,var(--pc),color-mix(in srgb,var(--pc) 52%,#000));
  border:2px solid rgba(255,255,255,.7);box-shadow:0 8px 20px rgba(0,0,0,.5);cursor:pointer;
  transition:transform .16s var(--sp)}
.lpin.sel{transform:scale(calc(var(--pinscale,1)*1.24));border-color:#fff;z-index:600;
  box-shadow:0 0 0 4px rgba(255,39,64,.42),0 10px 26px rgba(0,0,0,.55)}
.lpin.hh{border-color:rgba(255,176,32,.95);box-shadow:0 0 0 2px rgba(255,176,32,.35),0 8px 20px rgba(0,0,0,.5)}
.lpin.bst{box-shadow:0 0 0 3px rgba(255,176,32,.9),0 0 20px rgba(255,176,32,.75)}
.lpin .mlogo{padding:14%;border-radius:12px}
.lpin .ldot{position:absolute;z-index:5;bottom:-4px;right:-4px;width:12px;height:12px;border-radius:50%;
  background:var(--amber);border:2px solid var(--ink);animation:lp 1.6s infinite}
@keyframes lp{50%{transform:scale(1.35)}}
.lyou{position:relative;width:18px;height:18px}
.lyou .core{position:absolute;inset:3px;border-radius:50%;background:var(--blue);border:2px solid #fff}
.lyou .pulse{position:absolute;inset:-6px;border-radius:50%;border:2px solid rgba(77,159,255,.6);animation:lp 2s infinite}
.zfar .lpin{transform:scale(calc(var(--pinscale,1)*.62))}
.zfar .lpin.sel{transform:scale(calc(var(--pinscale,1)*.78))}
.lpin .lname{position:absolute;z-index:5;top:calc(100% + 5px);left:50%;transform:translate(-50%,3px);max-width:120px;
  padding:3px 9px;border-radius:99px;background:rgba(var(--glassrgb),.95);border:1px solid var(--line-2);
  font:800 10.5px/1.2 'Outfit',sans-serif;color:var(--label);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  opacity:0;pointer-events:none;transition:opacity 180ms ease,transform 180ms var(--sp)}
.znear .lpin .lname{opacity:1;transform:translate(-50%,0)}
.zfar .lpin .lname{opacity:0}
.lpin .pcount{position:absolute;z-index:5;top:-7px;min-width:16px;height:16px;padding:0 4px;border-radius:99px;
  display:flex;align-items:center;justify-content:center;font:800 8.5px/1 'Outfit',sans-serif;
  border:1.5px solid var(--surface);pointer-events:none;opacity:0;transition:opacity 180ms ease}
.lpin .pcount.w{left:-7px;background:#FF5D8F;color:#2B0714}
.lpin .pcount.m{right:-7px;background:#3FD8F5;color:#062533}
.lpin .pcount[hidden]{display:none}
.zmid .lpin .pcount{opacity:1}
.zfar .lpin .pcount{opacity:0}
.trailglow{filter:drop-shadow(0 0 5px var(--cyan)) drop-shadow(0 0 14px rgba(63,216,245,.6));
  animation:trailDash 1.1s linear infinite}
@keyframes trailDash{to{stroke-dashoffset:-24}}
.traildest{animation:destPulse 1.4s ease-in-out infinite}
@keyframes destPulse{50%{stroke-width:6;opacity:.7}}

/* heat bar */
.heatbar{position:absolute;left:50%;bottom:108px;z-index:1001;display:flex;align-items:center;gap:7px;
  background:var(--glass);backdrop-filter:blur(18px) saturate(170%);border:1px solid var(--line-2);
  border-radius:99px;padding:5px 11px 5px 6px;white-space:nowrap;box-shadow:var(--e2);
  transform:translate(-50%,0);opacity:1;
  transition:opacity 200ms var(--sp),transform 200ms var(--sp)}
.heatbar.hide{opacity:0;transform:translate(-50%,10px);pointer-events:none;transition-duration:150ms}
.hsg{display:flex;background:rgba(var(--tint),.09);border-radius:99px;padding:2px;gap:1px}
.hseg{min-height:32px;min-width:40px;padding:0 12px;border:0;border-radius:99px;background:transparent;
  color:var(--muted);font-family:var(--body);font-weight:800;font-size:13px;cursor:pointer}
.hseg:active{transform:scale(.94)}
.hseg.on{background:var(--red-deep);color:#fff}
.hsg.g2 .hseg.on{background:rgba(255,176,32,.22);color:var(--amber-t)}
.hsum{font-family:ui-monospace,monospace;font-size:11px;color:var(--muted)}
.hleg{width:34px;height:5px;border-radius:3px;background:linear-gradient(90deg,#2B1B67,#7A2FB8,#D5297A,#FF9E3D,#FFD980);flex:none}
.leaflet-heatmap-layer{transition:opacity 450ms ease}
.dmheat-off .leaflet-heatmap-layer{opacity:0}
@media (max-width:360px){.hsum{display:none}.hseg{min-width:36px;padding:0 10px}}

/* rich map popup */
.mpv{position:absolute;left:10px;right:10px;bottom:14px;z-index:1002;background:var(--glass);
  backdrop-filter:blur(20px) saturate(170%);
  border:1px solid var(--line-2);border-radius:var(--r);padding:12px 13px;box-shadow:var(--e3);
  animation:fadeUp .2s both}
.mpv-x{position:absolute;top:10px;right:10px;width:32px;height:32px;border-radius:12px;z-index:2;
  background:var(--surface-2);border:1px solid var(--line-2);color:var(--muted);
  display:flex;align-items:center;justify-content:center}
.mpv-hd{display:flex;gap:12px;align-items:center;cursor:pointer;background:none;border:none;
  padding:0;width:100%;text-align:left}
.mpv-logo .mono{width:68px;height:68px;font-size:22px;border-radius:16px}
.mpv-hd .nm{font-weight:900;font-size:16px;letter-spacing:-.02em}
.mpv-hd .sub{font-size:12px;color:var(--muted);margin:2px 0 6px}
.mpv-badges{display:flex;gap:5px;flex-wrap:wrap}
.mpv-hd .go{color:var(--red);margin-right:26px;display:flex;align-items:center}
.mpv-today{margin-top:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:12px;font-weight:800;
  color:var(--amber-t);background:rgba(255,176,32,.11);border:1px solid rgba(255,176,32,.34);
  border-radius:12px;padding:8px 11px}
.mpv-deal{margin-top:8px;font-size:13px;color:var(--text);line-height:1.4;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mpv-meta{display:none}
.mpv-row{display:flex;gap:7px;margin-top:10px}
.mpv-b{flex:1;border-radius:12px;padding:10px 0;font-weight:800;font-size:13px;min-height:42px;
  background:var(--surface-2);border:1px solid var(--line-2);color:var(--text);
  display:flex;align-items:center;justify-content:center;gap:6px;
  transition:transform 100ms var(--sp),background .16s ease,color .16s ease,border-color .16s ease}
.mpv-b .ico{width:15px;height:15px}
.mpv-b:active{transform:scale(.95)}
.mpv-b.prime{background:linear-gradient(135deg,var(--red),var(--red-deep));border-color:transparent;color:#fff;
  box-shadow:var(--glow-red)}
.mpv-b.ch{flex:0 0 54px;background:rgba(155,107,255,.16);border-color:rgba(155,107,255,.45);color:var(--purple-t)}
.mpv-b.tr{color:var(--trail-t);border-color:rgba(63,216,245,.34)}
.mpv-b.tr.on{background:rgba(63,216,245,.16);border-color:rgba(63,216,245,.7);box-shadow:0 0 14px rgba(63,216,245,.25)}
.mpv-b.ic{flex:0 0 46px;padding:0}
.mpv.mini{display:flex;align-items:center;gap:10px;padding:9px 10px;cursor:default}
.mpv.mini .nm{font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mpv.mini .sub{font-size:12px;color:var(--trail-t);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mpv-logo.sm{transform:scale(.86);transform-origin:left center}
.mpv-x.rel{position:static;flex-shrink:0}
.mpv-fav{position:absolute;top:10px;right:48px;width:32px;height:32px;border-radius:12px;z-index:2;
  background:var(--surface-2);border:1px solid var(--line-2);color:var(--muted);
  display:flex;align-items:center;justify-content:center}
.mpv-fav.on{background:rgba(255,39,64,.16);border-color:rgba(255,39,64,.5);color:var(--red-t)}
.mpv-bc{margin-top:9px;font-size:12px;color:var(--trail-t);background:rgba(63,216,245,.09);
  border:1px solid rgba(63,216,245,.3);border-radius:12px;padding:8px 11px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mpv-bc i{font-style:normal;color:var(--muted);font-size:11px}
.trailmode .tabbar{display:none}
.trailmode .map-hintline{display:none}
.trailmode .heatbar{opacity:0;pointer-events:none}
.trailmode .mpv.mini{left:8px;right:8px;bottom:calc(10px + var(--sab))}
.trailmode .map-ctrl{bottom:150px}
.map-viewport:has(.mpv:not(.mini)) .map-ctrl{bottom:334px}

/* ── 10. BOTTOM SHEETS ─────────────────────────────────────── */
.overlay{position:absolute;inset:0;background:rgba(3,5,10,.74);backdrop-filter:blur(6px);z-index:30;
  display:flex;align-items:flex-end;animation:fade .2s ease}
body.light .overlay{background:rgba(11,27,51,.42)}
.sheet{background:var(--surface);width:100%;border-radius:28px 28px 0 0;overflow:hidden;
  animation:sheetUp .42s var(--drawer);border-top:1px solid var(--line-2);
  box-shadow:0 -20px 60px rgba(0,0,0,.6);
  max-height:92%;display:flex;flex-direction:column;will-change:transform;touch-action:none}
@keyframes sheetUp{from{transform:translateY(100%)}to{transform:none}}
@keyframes up{from{transform:translateY(28px);opacity:0}to{transform:none;opacity:1}}
.sheet.dragging{animation:none;transition:none}
.sheet.snapback{transition:transform .3s var(--drawer)}
.grip-zone{padding:11px 0 5px;cursor:grab;flex-shrink:0}
.grip{width:44px;height:5px;border-radius:99px;background:var(--s4);margin:0 auto}
.sheet-art{height:120px;position:relative;display:flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden}
.sheet-art::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,var(--surface))}
.sheet-art .mono{width:74px;height:74px;font-size:24px;border-radius:22px;z-index:1;box-shadow:var(--e3),inset 0 1px 0 rgba(255,255,255,.2)}
.sheet-art .fav,.sheet-art .shr{position:absolute;top:10px;width:42px;height:42px;border-radius:50%;z-index:2;
  background:rgba(6,8,15,.66);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.14);
  cursor:pointer;color:#fff;display:flex;align-items:center;justify-content:center}
.sheet-art .fav{right:12px} .sheet-art .shr{right:62px}
.sheet-art .fav.on{color:#fff;background:var(--red-deep);border-color:var(--red-deep)}
.sheet-body{padding:8px 18px 8px;overflow-y:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.sheet-body::-webkit-scrollbar{display:none}
.sheet-body .nm{font-family:var(--display);font-weight:700;font-size:20px;letter-spacing:-.03em;line-height:1.2}
.sheet-body .sub{font-size:14px;color:var(--muted);margin-top:5px}
.badges{display:flex;gap:7px;margin-top:13px;flex-wrap:wrap}
.badge{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:700;border-radius:99px;
  padding:6px 12px;border:1px solid var(--line);background:var(--surface-2);color:var(--muted)}
.badge .ico{width:12px;height:12px}
.badge.a{color:var(--amber-t);border-color:rgba(255,176,32,.34);background:rgba(255,176,32,.1)}
.badge.g{color:var(--green-t);border-color:rgba(0,224,138,.32);background:rgba(0,224,138,.09)}
.social-proof{margin-top:14px;font-size:14px;color:var(--muted);display:flex;align-items:center;gap:7px}
.social-proof .ico{width:15px;height:15px;color:var(--purple-t);flex-shrink:0}
.social-proof b{color:var(--text)}
.rate-row{display:flex;align-items:center;gap:2px;margin-top:12px}
.rate-row .rr-l{font-size:13px;font-weight:700;color:var(--muted);margin-right:6px}
.rate-row .star{background:none;border:none;color:var(--faint);cursor:pointer;
  width:38px;height:38px;display:flex;align-items:center;justify-content:center;
  transition:color .14s ease,transform .14s var(--bo)}
.rate-row .star .ico{width:25px;height:25px}
.rate-row .star.on{color:var(--amber);filter:drop-shadow(0 0 8px rgba(255,176,32,.5))}
.rate-row .star:active{transform:scale(1.28)}

.deal-box{margin-top:15px;border-radius:var(--r-sm);padding:14px 15px;
  background:linear-gradient(120deg,rgba(255,39,64,.15),rgba(255,39,64,.03));
  border:1px solid rgba(255,39,64,.32);font-size:14px;font-weight:600;line-height:1.5}
.deal-box .k{font-size:11px;font-weight:900;letter-spacing:.14em;color:var(--red);text-transform:uppercase;
  display:flex;align-items:center;gap:6px;margin-bottom:6px}
.deal-box .k .ico{width:12px;height:12px}
.deal-box.today-box{background:linear-gradient(120deg,rgba(255,176,32,.15),rgba(255,176,32,.03));
  border-color:rgba(255,176,32,.38);margin-bottom:0}
.deal-box.today-box .k{color:var(--amber-t)}
.deal-box.today-box+.deal-box{margin-top:10px}
.phone-row{margin-top:11px;font-size:14px;font-weight:600;color:var(--muted);display:flex;align-items:center;gap:8px}
.phone-row .ico{width:15px;height:15px;color:var(--faint)}
.bcast{margin-top:12px;font-size:13px;color:var(--trail-t);background:rgba(63,216,245,.08);
  border:1px solid rgba(63,216,245,.32);border-radius:var(--r-sm);padding:11px 13px;line-height:1.45}
.bcast span{display:block;font-size:11px;color:var(--muted);margin-top:4px}
.checkin{margin-top:13px;width:100%;border-radius:var(--r-sm);padding:13px 0;font-weight:800;font-size:15px;
  cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;
  background:rgba(155,107,255,.12);border:1px solid rgba(155,107,255,.45);color:var(--purple-t);min-height:var(--tap)}
.checkin .ico{width:16px;height:16px}
.checkin.on{background:rgba(0,224,138,.13);border-color:rgba(0,224,138,.5);color:var(--green-t)}
.vrow2{display:flex;gap:8px;margin-top:11px}
.fol,.rep{flex:1;border-radius:var(--r-sm);padding:11px 0;font-weight:800;font-size:13px;min-height:44px;
  background:var(--surface-2);border:1px solid var(--line-2);color:var(--text);
  display:flex;align-items:center;justify-content:center;gap:7px}
.fol .ico,.rep .ico{width:14px;height:14px}
.fol.on{background:rgba(255,39,64,.13);border-color:rgba(255,39,64,.45);color:var(--red-t)}
.rep{color:var(--muted);font-weight:700}
.nx{margin-top:13px;background:var(--surface-2);border:1px solid var(--line-2);border-radius:var(--r-sm);padding:12px 13px}
.nx-k{font-size:11px;font-weight:900;color:var(--trail-t);letter-spacing:.1em;margin-bottom:9px;
  display:flex;align-items:center;gap:6px}
.nx-k .ico{width:13px;height:13px}
.nx-row{display:flex;align-items:center;gap:11px;width:100%;text-align:left;background:none;border:none;
  padding:9px 2px;border-top:1px solid var(--line);cursor:pointer}
.nx-row:first-of-type{border-top:none}
.nx-row .mono{width:40px;height:40px;font-size:13px;flex-shrink:0}
.nx-b{min-width:0;flex:1}
.nx-b b{font-size:14px;display:block;letter-spacing:-.01em}
.nx-b i{font-style:normal;font-size:12px;color:var(--muted)}
.nx-row .go{color:var(--trail-t);display:flex;align-items:center}
.ownlink{margin-top:11px;width:100%;border-radius:var(--r-sm);padding:12px;font-size:13px;font-weight:600;
  background:rgba(77,159,255,.07);border:1px dashed rgba(77,159,255,.42);color:var(--muted);min-height:44px;
  display:flex;align-items:center;justify-content:center;gap:7px;cursor:pointer}
.ownlink .ico{width:14px;height:14px;color:var(--blue-t)}
.ownlink b{color:var(--blue-t)}
.tip-btn{margin-top:11px;width:100%;border-radius:var(--r-sm);padding:12px;font-weight:800;font-size:13px;
  background:rgba(0,224,138,.09);border:1px dashed rgba(0,224,138,.45);color:var(--green-t);min-height:var(--tap);
  display:flex;align-items:center;justify-content:center;gap:8px;cursor:pointer}
.tip-btn .ico{width:15px;height:15px}
.tip-ta{width:100%;border-radius:var(--r-sm);background:var(--surface-2);border:1px solid var(--line-2);
  color:var(--text);padding:13px;font:inherit;font-size:14px;resize:none}

.sheet-actions{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:14px}
.sheet-actions button{border:1px solid var(--line-2);background:var(--surface-2);color:var(--text);
  border-radius:var(--r-sm);padding:10px 0;font-weight:700;font-size:12px;cursor:pointer;min-height:56px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px}
.sheet-actions button .ico{width:18px;height:18px}
.sheet-actions button.prime2{background:linear-gradient(140deg,var(--red),var(--red-deep));border-color:transparent;color:#fff}
.sheet-actions button.share-act{background:rgba(77,159,255,.14);border-color:rgba(77,159,255,.42);color:var(--blue-t)}
.sheet-actions .chat-act{background:rgba(155,107,255,.14);border-color:rgba(155,107,255,.45);color:var(--purple-t)}
.sheet-actions .trailb{background:rgba(63,216,245,.12);border-color:rgba(63,216,245,.42);color:var(--trail-t)}
.prime2.cartb{background:rgba(63,216,245,.12);border:1px solid rgba(63,216,245,.42);color:var(--trail-t)}

/* sticky CTA — thumb territory */
.sheet-cta{flex-shrink:0;padding:12px 18px calc(14px + var(--sab));border-top:1px solid var(--line);
  background:linear-gradient(180deg,rgba(var(--glassrgb),0),var(--surface) 45%);
  display:flex;gap:9px}
.claim-btn{flex:1;background:linear-gradient(135deg,var(--red),var(--red-deep));border:none;color:#fff;
  border-radius:16px;padding:16px 0;font-weight:800;font-size:16px;cursor:pointer;letter-spacing:-.01em;
  box-shadow:var(--glow-red);min-height:54px;display:flex;align-items:center;justify-content:center;gap:8px}
.claim-btn .ico{width:18px;height:18px}
.wheel-btn{flex:0 0 auto;background:linear-gradient(140deg,var(--violet),#5B2BC9);border:none;color:#fff;
  border-radius:16px;padding:0 18px;font-weight:800;font-size:14px;cursor:pointer;min-height:54px;
  box-shadow:0 8px 22px rgba(155,107,255,.4);display:flex;align-items:center;justify-content:center;gap:7px}
.wheel-btn .ico{width:19px;height:19px}
.wheel-btn span{display:none}
@media(min-width:400px){.wheel-btn span{display:inline}}

/* claim / QR */
.code-wrap{padding:8px 18px calc(18px + var(--sab));text-align:center;overflow-y:auto}
.code-card{border:2px dashed rgba(255,39,64,.5);border-radius:22px;padding:22px;background:rgba(255,39,64,.05)}
.code-card .k{font-size:11px;font-weight:900;letter-spacing:.16em;color:var(--red);text-transform:uppercase}
.prize-line{font-family:var(--display);font-weight:900;font-size:17px;margin-top:7px;color:var(--amber)}
.code-card .code{font-family:var(--display);font-weight:900;font-size:30px;letter-spacing:.1em;margin-top:9px}
.qr-box{margin:16px auto 0;width:176px;height:176px;background:#fff;border-radius:20px;padding:14px;
  display:flex;align-items:center;justify-content:center;box-shadow:0 12px 34px rgba(0,0,0,.4)}
.qr-box img,.qr-box canvas{width:148px!important;height:148px!important;image-rendering:pixelated}
.qr-fallback{display:grid;grid-template-columns:repeat(21,1fr);width:148px;height:148px}
.qr-fallback i{background:#fff}.qr-fallback i.b{background:#111}
.code-card .exp{font-size:13px;color:var(--muted);margin-top:10px}
.code-card .exp b{color:var(--amber)}
.code-note{font-size:13px;color:var(--muted);margin-top:13px;line-height:1.55}
.code-wrap .claim-btn{margin-top:15px;width:100%}

/* ── 11. WHEEL ─────────────────────────────────────────────── */
.wheel-sheet{text-align:center}
.wheel-head{font-family:var(--display);font-weight:900;font-size:20px;margin-top:5px;letter-spacing:-.03em;
  display:flex;align-items:center;justify-content:center;gap:9px}
.wheel-head .ico{color:var(--violet)}
.wheel-sub{font-size:14px;color:var(--muted);margin-top:3px}
.wheel-stage{position:relative;width:272px;height:272px;margin:18px auto 4px}
#wheelcv{width:272px;height:272px;display:block;border-radius:50%;
  box-shadow:0 18px 46px rgba(0,0,0,.55),0 0 0 6px var(--surface-2);will-change:transform}
.wheel-pointer{position:absolute;top:-10px;left:50%;transform:translateX(-50%);z-index:3;
  width:0;height:0;border-left:11px solid transparent;border-right:11px solid transparent;
  border-top:18px solid var(--red);filter:drop-shadow(0 3px 8px rgba(255,39,64,.55))}
.wheel-hub{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:58px;height:58px;border-radius:50%;
  background:var(--ink);border:3px solid var(--s4);display:flex;align-items:center;justify-content:center;
  font-family:var(--display);font-weight:900;font-size:15px;color:var(--red);z-index:2;
  box-shadow:0 0 26px rgba(0,0,0,.6)}
.spin-cta{margin:14px 18px 0;width:calc(100% - 36px);font-family:var(--display);letter-spacing:.06em}
.spin-cta:disabled{opacity:.55}
.prize-won{margin:12px 18px 0;border:2px dashed rgba(255,176,32,.55);border-radius:20px;padding:16px;
  background:rgba(255,176,32,.07)}
.prize-won .pw-k{font-size:11px;font-weight:900;letter-spacing:.16em;color:var(--amber);text-transform:uppercase}
.prize-won .pw-t{font-family:var(--display);font-weight:900;font-size:22px;margin-top:7px;letter-spacing:-.03em}
.prize-won .claim-btn{margin-top:13px;width:100%}
.wheel-note{font-size:12px;color:var(--muted);margin:13px 26px 0;line-height:1.55}
.sheet-close{flex-shrink:0;margin:10px 18px calc(14px + var(--sab));background:none;border:none;color:var(--muted);
  font-weight:700;font-size:15px;cursor:pointer;min-height:var(--tap)}

/* ── 12. SHARE STUDIO ──────────────────────────────────────── */
.share-sheet{text-align:center}
.share-title{font-family:var(--display);font-weight:700;font-size:17px;margin-top:6px;letter-spacing:-.02em}
#storycard{width:198px;height:352px;border-radius:20px;margin:16px auto 0;display:block;
  box-shadow:0 20px 50px rgba(0,0,0,.55);border:1px solid var(--line-2)}
.share-actions{display:grid;grid-template-columns:repeat(2,1fr);gap:9px;margin:18px 18px 0}
.share-actions .sa{border:1px solid var(--line-2);background:var(--surface-2);color:var(--text);
  border-radius:var(--r-sm);padding:14px 4px;font-weight:800;font-size:13px;cursor:pointer;min-height:var(--tap);
  display:flex;align-items:center;justify-content:center;gap:7px}
.share-actions .sa .ico{width:15px;height:15px}
.share-actions .sa.prime{background:linear-gradient(135deg,var(--red),var(--red-deep));border-color:transparent;
  color:#fff;box-shadow:var(--glow-red)}
.share-note{font-size:12px;color:var(--muted);margin:13px 26px 0;line-height:1.6}
.share-note b{color:var(--amber-t)}

/* ── 13. PROFILE ───────────────────────────────────────────── */
/* points hero */
.pts-card{margin:6px var(--gut) 14px;border-radius:var(--r);padding:17px 18px;position:relative;overflow:hidden;
  background:linear-gradient(140deg,rgba(255,39,64,.18),rgba(255,122,47,.06) 55%),var(--surface);
  border:1px solid rgba(255,39,64,.3);box-shadow:var(--e2)}
.pts-card::before{content:"";position:absolute;top:-40%;right:-20%;width:220px;height:220px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,122,47,.2),transparent 68%);pointer-events:none}
.pts-top{display:flex;align-items:center;justify-content:space-between;gap:12px;position:relative}
.pts-bal{font-family:var(--display);font-weight:900;font-size:30px;letter-spacing:-.04em;line-height:1}
.pts-bal span{font-size:13px;color:var(--muted);font-family:var(--body);font-weight:600;letter-spacing:0}
.pts-lvl{font-size:13px;font-weight:800;color:var(--amber-t);margin-top:6px;display:flex;align-items:center;gap:6px}
.pts-lvl .ico{width:14px;height:14px}
.pts-bar{height:8px;border-radius:99px;background:rgba(var(--tint),.12);margin-top:13px;overflow:hidden;position:relative}
.pts-bar div{height:100%;border-radius:99px;background:linear-gradient(90deg,var(--red),var(--ember),var(--amber));
  box-shadow:0 0 14px rgba(255,122,47,.5);transition:width .8s var(--sp)}
.pts-earn{margin-top:12px;font-size:12px;color:var(--muted);line-height:1.7;position:relative;
  display:flex;flex-wrap:wrap;gap:5px}
.pts-earn b{display:inline-flex;align-items:center;gap:4px;background:var(--surface-2);border:1px solid var(--line);
  border-radius:99px;padding:4px 9px;font-weight:700;color:var(--text);font-size:11px}
.pts-earn b i{font-style:normal;color:var(--green-t);font-weight:900}
.pts-log{margin-top:12px;display:flex;flex-direction:column;gap:6px;position:relative}
.pts-li{display:flex;justify-content:space-between;gap:10px;font-size:13px;color:var(--muted)}
.pts-li b{color:var(--green-t);font-variant-numeric:tabular-nums}
.lg-btn{flex-shrink:0;border-radius:12px;padding:10px 15px;font-weight:800;font-size:13px;cursor:pointer;
  background:rgba(255,39,64,.14);border:1px solid rgba(255,39,64,.45);color:var(--red-t);min-height:40px}
.lg-btn.lg-x{background:var(--surface-2);border-color:var(--line-2);color:var(--muted);padding:9px 11px}

/* ── leaderboard (was completely unstyled — rebuilt) ── */
.lb-card{margin:0 var(--gut);background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:6px 6px;box-shadow:var(--e2);overflow:hidden}
.lb-row{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:var(--r-sm);
  position:relative;transition:background .18s ease}
.lb-row+.lb-row{box-shadow:0 -1px 0 var(--line)}
.lb-row.me{background:linear-gradient(110deg,rgba(255,39,64,.14),rgba(255,39,64,.03));
  box-shadow:inset 0 0 0 1px rgba(255,39,64,.34)}
.lb-rank{flex-shrink:0;width:26px;display:flex;align-items:center;justify-content:center;
  font-family:var(--display);font-weight:900;font-size:14px;color:var(--faint);letter-spacing:-.03em}
.lb-rank .ico{width:18px;height:18px;color:var(--amber);filter:drop-shadow(0 0 8px rgba(255,176,32,.55))}
.lb-row:first-child .lb-rank{color:var(--amber)}
.lb-av{flex-shrink:0;width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-family:var(--display);font-weight:900;font-size:16px;color:#fff;letter-spacing:-.03em;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3)}
.lb-row.me .lb-av{box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 0 0 2px rgba(255,39,64,.5)}
.lb-n{flex:1;min-width:0;font-weight:800;font-size:15px;letter-spacing:-.01em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lb-row.me .lb-n::after{content:"YOU";margin-left:8px;font-size:11px;font-weight:900;letter-spacing:.1em;
  color:var(--red-t);background:rgba(255,39,64,.16);border-radius:99px;padding:3px 7px;vertical-align:middle}
.lb-p{flex-shrink:0;font-family:var(--display);font-weight:700;font-size:13px;color:var(--muted);
  font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.lb-row.me .lb-p{color:var(--red)}

/* me-card (avatar) */
.me-card{margin:14px var(--gut);display:flex;align-items:center;gap:14px;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r);padding:14px 15px;box-shadow:var(--e2)}
.me-av{position:relative;width:56px;height:56px;border-radius:50%;flex-shrink:0;
  background:linear-gradient(140deg,var(--red),var(--violet));border:2px solid var(--line-2);cursor:pointer;padding:0;
  display:flex;align-items:center;justify-content:center}
.me-av img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.me-av>span:first-child{color:#fff;font-weight:900;font-size:22px;font-family:var(--display)}
.me-cam{position:absolute;right:-4px;bottom:-4px;width:26px;height:26px;border-radius:50%;
  background:var(--surface-2);border:1.5px solid var(--line-2);color:var(--muted);display:flex;
  align-items:center;justify-content:center}
.me-cam .ico{width:13px;height:13px}
.me-info{min-width:0;flex:1}
.me-n{font-weight:900;font-size:16px;letter-spacing:-.01em}
.me-s{font-size:13px;color:var(--muted);margin-top:2px}

.prof-head{display:flex;align-items:center;gap:14px;padding:8px var(--gut) 0}
.prof-av{width:56px;height:56px;border-radius:50%;background:linear-gradient(140deg,var(--red),var(--violet));
  display:flex;align-items:center;justify-content:center;font-family:var(--display);font-weight:900;font-size:20px;
  color:#fff;flex-shrink:0}
.prof-head .n{font-family:var(--display);font-weight:700;font-size:17px;letter-spacing:-.02em}
.prof-head .s{font-size:13px;color:var(--muted);margin-top:4px}

.wallet{padding:0 var(--gut);display:flex;flex-direction:column;gap:10px}
.wcode{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:13px 15px;
  display:flex;align-items:center;gap:13px;cursor:pointer;width:100%;text-align:left;min-height:66px;box-shadow:var(--e1)}
.wcode.dead{opacity:.5}
.wcode .cc{font-family:var(--display);font-weight:900;font-size:16px;letter-spacing:.04em;flex-shrink:0;color:var(--red)}
.wcode .wn{font-size:14px;font-weight:700}
.wcode .ws{font-size:12px;color:var(--muted);margin-top:2px}
.wcode .st{margin-left:auto;flex-shrink:0;font-size:11px;font-weight:900;letter-spacing:.07em;
  border-radius:99px;padding:5px 11px}
.wcode .st.a{color:var(--green-t);background:rgba(0,224,138,.13)}
.wcode .st.r{color:var(--muted);background:var(--surface-2)}
.ref-card{margin:0 var(--gut);border-radius:var(--r);padding:17px;
  background:linear-gradient(135deg,rgba(155,107,255,.16),rgba(155,107,255,.03));
  border:1px solid rgba(155,107,255,.38);width:calc(100% - var(--gut)*2);text-align:left;cursor:pointer;box-shadow:var(--e2)}
.ref-card .t{font-weight:800;font-size:15px;display:flex;align-items:center;gap:7px}
.ref-card .t .ico{width:15px;height:15px;color:var(--purple-t)}
.ref-card .c{font-family:var(--display);font-weight:900;font-size:22px;color:var(--purple-t);margin-top:7px;
  letter-spacing:.05em}
.ref-card .s{font-size:13px;color:var(--muted);margin-top:6px;line-height:1.5}
.fol-wrap{display:flex;flex-wrap:wrap;gap:7px;margin:0 var(--gut) 12px}
.fol-chip{border-radius:99px;padding:9px 14px;font-weight:800;font-size:13px;cursor:pointer;
  background:rgba(255,39,64,.1);border:1px solid rgba(255,39,64,.4);color:var(--red-t)}
.prow{margin:0 var(--gut);background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:14px 16px;display:flex;align-items:center;gap:13px;cursor:pointer;width:calc(100% - var(--gut)*2);
  text-align:left;min-height:60px;box-shadow:var(--e1)}
.prow:active{background:var(--surface-2)}
.prow .pe{flex-shrink:0;width:38px;height:38px;border-radius:12px;background:var(--surface-2);
  border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--muted)}
.prow .pe .ico{width:18px;height:18px}
.prow .pt{font-weight:700;font-size:15px;letter-spacing:-.01em}
.prow .ps{font-size:12px;color:var(--muted);margin-top:3px;line-height:1.4}
.prow .pa{margin-left:auto;color:var(--faint);flex-shrink:0;display:flex;align-items:center}
.ver{padding:16px 0 22px;text-align:center;font-size:12px;color:var(--faint)}

/* ── 14. CHAT ──────────────────────────────────────────────── */
.chat-card{margin:0 var(--gut) 6px;display:flex;align-items:center;gap:12px;cursor:pointer;
  background:linear-gradient(115deg,rgba(155,107,255,.15),rgba(155,107,255,.02) 60%),var(--surface);
  border:1px solid rgba(155,107,255,.36);border-radius:var(--r);padding:13px 15px;min-height:60px;box-shadow:var(--e2)}
.cc-ico{flex-shrink:0;width:38px;height:38px;border-radius:12px;background:rgba(155,107,255,.16);
  border:1px solid rgba(155,107,255,.34);color:var(--purple-t);display:flex;align-items:center;justify-content:center}
.cc-ico .ico{width:19px;height:19px}
.cc-body{min-width:0;flex:1}
.cc-body b{font-size:14px;color:var(--purple-t)}
.cc-body i{font-style:normal;font-size:13px;color:var(--muted);display:block;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
.cc-n{font-size:12px;font-weight:800;color:var(--green);flex-shrink:0;display:flex;align-items:center;gap:5px}
.cc-n::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--green);
  box-shadow:0 0 8px var(--green);animation:blink 1.8s infinite}

.hub-hd{padding:18px var(--gut) 6px}
.hub-hd h1{margin:0;font-family:var(--display);font-size:24px;letter-spacing:-.035em;font-weight:700}
.hub-hd .sub{font-size:13px;color:var(--green);font-weight:700;margin-top:5px;display:flex;align-items:center;gap:7px}
.hub-hd .sub::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--green);
  box-shadow:0 0 10px var(--green);animation:blink 1.8s infinite}
.hub-list{padding:0 var(--gut);display:flex;flex-direction:column;gap:9px}
.hub-room{display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r);padding:12px 14px;width:100%;text-align:left;min-height:68px;cursor:pointer;box-shadow:var(--e1)}
.hub-room:active{background:var(--surface-2)}
.hr-ico{width:44px;height:44px;border-radius:14px;background:rgba(155,107,255,.14);
  border:1px solid rgba(155,107,255,.4);color:var(--purple-t);
  display:flex;align-items:center;justify-content:center;flex-shrink:0}
.hr-ico .ico{width:20px;height:20px}
.hub-room .mono{width:44px;height:44px;font-size:15px;flex-shrink:0}
.hr-b{min-width:0;flex:1;display:flex;flex-direction:column;gap:3px}
.hr-n{font-weight:800;font-size:15px;letter-spacing:-.01em}
.hr-p{font-size:13px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hr-r{display:flex;flex-direction:column;align-items:flex-end;gap:5px;flex-shrink:0}
.hr-t{font-size:11px;color:var(--faint)}
.hr-u{min-width:20px;height:20px;border-radius:12px;background:var(--red-deep);color:#fff;font-size:11px;
  font-weight:900;display:flex;align-items:center;justify-content:center;padding:0 6px;
  box-shadow:0 0 10px rgba(255,39,64,.45)}
.hub-tip{margin:16px var(--gut);font-size:12px;color:var(--muted);background:var(--surface);
  border:1px dashed var(--line-2);border-radius:var(--r-sm);padding:12px 14px;display:flex;align-items:center;gap:9px}
.hub-tip .ico{width:16px;height:16px;color:var(--green-t);flex-shrink:0}
.hub-tip b{color:var(--green-t)}

.chat-full{height:min(92dvh,92vh);display:flex;flex-direction:column}
.chat-full .vc-msgs{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch}
.chat-sheet{height:84%;max-height:84%}
.vc-hd{display:flex;align-items:center;gap:10px;padding:2px var(--gut) 10px;border-bottom:1px solid var(--line);flex-shrink:0}
.vc-hd-l{min-width:0;flex:1;display:flex;flex-direction:column}
.vc-room{font-family:var(--display);font-weight:700;font-size:16px;color:var(--purple-t);letter-spacing:-.02em}
.vc-sub{display:block;font-size:13px;color:var(--muted);margin-top:3px}
.vc-pres{display:flex;align-items:center;gap:0}
.vp-dot{width:20px;height:20px;border-radius:50%;border:2.5px solid var(--surface);margin-left:-7px}
.vp-dot:first-child{margin-left:0}
.vp-n{font-size:12px;font-weight:800;color:var(--green);margin-left:8px;white-space:nowrap}
.vc-x{width:36px;height:36px;border-radius:12px;background:var(--surface-2);border:1px solid var(--line-2);
  color:var(--muted);flex-shrink:0;display:flex;align-items:center;justify-content:center;cursor:pointer}
.vc-rooms{display:flex;gap:7px;overflow-x:auto;padding:10px var(--gut);scrollbar-width:none;flex-shrink:0}
.vc-rooms::-webkit-scrollbar{display:none}
.vc-rchip{flex-shrink:0;border-radius:99px;padding:8px 14px;font-weight:800;font-size:13px;cursor:pointer;
  background:var(--surface-2);border:1px solid var(--line-2);color:var(--muted)}
.vc-rchip.on{background:rgba(155,107,255,.16);border-color:rgba(155,107,255,.55);color:var(--purple-t)}
.vc-msgs{flex:1;min-height:0;overflow-y:auto;padding:14px var(--gut);display:flex;flex-direction:column;gap:12px;
  -webkit-overflow-scrolling:touch;scrollbar-width:none}
.vc-msgs::-webkit-scrollbar{display:none}
.vc-msg{display:flex;gap:9px;align-items:flex-start;animation:mIn .28s var(--sp)}
@keyframes mIn{from{opacity:0;transform:translateY(8px)}}
.vc-msg.me{flex-direction:row-reverse}
.vc-av{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-weight:900;font-size:13px;color:#fff;flex-shrink:0;box-shadow:inset 0 1px 0 rgba(255,255,255,.3)}
.vc-av.avimg{object-fit:cover;padding:0;border:none;width:32px;height:32px;border-radius:50%}
.vc-b{background:var(--surface-2);border:1px solid var(--line);border-radius:8px 17px 17px 17px;
  padding:10px 13px;max-width:78%;display:flex;flex-direction:column;gap:4px}
.vc-msg.me .vc-b{background:linear-gradient(140deg,rgba(255,39,64,.2),rgba(255,39,64,.07));
  border-color:rgba(255,39,64,.36);border-radius:16px 5px 17px 17px}
.vc-n{font-size:12px;font-weight:800;color:var(--muted)}
.vc-c{font-size:15px;line-height:1.5}
.vc-t{font-size:11px;color:var(--faint)}
.vc-ph{max-width:100%;width:212px;border-radius:12px;border:1px solid var(--line-2);display:block}
.vc-msg.sys{justify-content:center}
.vc-msg.sys span{font-size:12px;color:var(--muted);text-align:center;background:var(--surface-2);
  border-radius:99px;padding:5px 12px}
.vc-typing{height:18px;padding:0 var(--gut);font-size:12px;color:var(--muted);flex-shrink:0}
.vc-typing b{color:var(--text)}
.vc-quote{display:block;border-left:3px solid rgba(155,107,255,.6);background:rgba(155,107,255,.09);
  border-radius:8px;padding:6px 10px;margin:4px 0 6px;font-size:12px;color:var(--muted)}
.vc-quote b{color:var(--purple-t)}
.vc-rx{display:flex;gap:5px;margin-top:6px;flex-wrap:wrap}
.rxchip{border-radius:99px;padding:4px 10px;font-size:12px;background:var(--surface);
  border:1px solid var(--line-2);color:var(--text);cursor:pointer}
.rxchip.mine{background:rgba(255,39,64,.16);border-color:rgba(255,39,64,.5)}
.vc-actions{display:flex;gap:6px;align-items:center;margin-top:7px;flex-wrap:wrap;
  background:var(--surface);border:1px solid var(--line-2);border-radius:14px;padding:6px 8px;
  width:fit-content;animation:fadeUp .16s both;box-shadow:var(--e2)}
.vc-msg.me .vc-actions{margin-left:auto}
.vc-actions button{background:none;border:none;font-size:17px;padding:4px 6px;cursor:pointer}
.vc-actions .txtb{font-size:13px;font-weight:800;color:var(--text);background:var(--surface-2);
  border-radius:12px;padding:7px 11px}
@keyframes fadeUp{from{opacity:0;transform:translateY(5px)}to{opacity:1}}
.vc-replybar{display:flex;align-items:center;gap:7px;margin:0 var(--gut) 6px;padding:9px 13px;font-size:13px;
  color:var(--muted);background:rgba(155,107,255,.1);border:1px solid rgba(155,107,255,.4);border-radius:14px;
  white-space:nowrap;overflow:hidden}
.vc-replybar b{color:var(--purple-t)}
.vc-replybar button{margin-left:auto;background:none;border:none;color:var(--muted);flex-shrink:0;
  display:flex;align-items:center}
.vc-in{display:flex;gap:8px;align-items:center;padding:10px var(--gut);border-top:1px solid var(--line);flex-shrink:0}
.vc-cam{width:46px;height:46px;border-radius:14px;background:var(--surface-2);border:1px solid var(--line-2);
  display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;color:var(--muted)}
.vc-in input[type=text]{flex:1;background:var(--surface-2);border:1px solid var(--line-2);border-radius:14px;
  padding:13px 15px;color:var(--text);font-family:var(--body);font-size:15px;outline:none;min-width:0;min-height:46px}
.vc-in input[type=text]:focus{border-color:rgba(255,39,64,.55)}
.vc-in input[type=text]::placeholder{color:var(--faint)}
.vc-send{width:48px;height:46px;border-radius:14px;background:linear-gradient(135deg,var(--red),var(--red-deep));
  border:none;color:#fff;cursor:pointer;box-shadow:var(--glow-red);flex-shrink:0;
  display:flex;align-items:center;justify-content:center}
.vc-note{padding:6px var(--gut) calc(10px + var(--sab));font-size:11px;color:var(--faint);flex-shrink:0}
.vc-qr{display:flex;gap:7px;overflow-x:auto;padding:8px var(--gut) 2px;scrollbar-width:none;flex-shrink:0}
.vc-qr::-webkit-scrollbar{display:none}
.vc-qrb{flex-shrink:0;border-radius:99px;padding:9px 14px;font-size:13px;font-weight:700;cursor:pointer;
  background:var(--surface-2);border:1px solid var(--line-2);color:var(--text)}
.vc-qrb:active{background:rgba(255,39,64,.14);border-color:rgba(255,39,64,.5)}
#chatnotif{position:fixed;top:-90px;left:12px;right:12px;z-index:80;display:flex;gap:11px;align-items:center;
  background:var(--glass);border:1px solid rgba(155,107,255,.5);border-radius:20px;padding:13px 15px;
  box-shadow:var(--e3);transition:top .34s var(--bo);cursor:pointer;backdrop-filter:blur(18px) saturate(170%)}
#chatnotif.show{top:calc(var(--sat) + 10px)}
.cn-ico{flex-shrink:0;color:var(--purple-t);display:flex;align-items:center}
.cn-b{min-width:0;font-size:13px;color:var(--text);line-height:1.4}
.cn-b b{color:var(--purple-t);font-size:12px}

/* ── 15. BUSINESS DASHBOARD ────────────────────────────────── */
.biz-top{display:flex;align-items:center;justify-content:space-between;padding:calc(12px + var(--sat)) var(--gut) 12px;
  gap:10px;flex-shrink:0}
.biz-id{display:flex;align-items:center;gap:11px;flex:1;min-width:0}
.biz-id>span{min-width:0;flex:1}
.biz-id .mono{width:44px;height:44px;font-size:14px}
.biz-id .n{font-weight:800;font-size:16px;line-height:1.2;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;display:block;letter-spacing:-.01em}
.biz-id .p{font-size:11px;color:var(--amber-t);font-weight:800;letter-spacing:.05em;margin-top:3px;
  display:flex;align-items:center;gap:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.biz-id .p .ico{width:11px;height:11px;flex-shrink:0}
.exit-biz{background:var(--surface);border:1px solid var(--line-2);color:var(--muted);border-radius:12px;
  padding:10px 14px;font-size:13px;font-weight:800;cursor:pointer;min-height:42px;flex-shrink:0}
.kpis{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:4px var(--gut) 0}
.kpi{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:15px;box-shadow:var(--e2);
  animation:screenIn .5s var(--sp) both}
.kpi:nth-child(2){animation-delay:.06s}.kpi:nth-child(3){animation-delay:.12s}.kpi:nth-child(4){animation-delay:.18s}
.kpi .n{font-family:var(--display);font-weight:900;font-size:24px;letter-spacing:-.04em}
.kpi .n em{font-style:normal;color:var(--green-t);font-size:11px;font-weight:800;margin-left:6px;letter-spacing:0}
.kpi .l{font-size:12px;color:var(--muted);margin-top:5px;line-height:1.35}
.kpi.hot{border-color:rgba(255,39,64,.4);background:linear-gradient(150deg,rgba(255,39,64,.13),var(--surface) 62%)}
.kpi.hot .n{color:var(--red)}
.chart-card{margin:12px var(--gut) 0;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:16px;box-shadow:var(--e2)}
.chart-card .t{font-size:12px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.chart-card .bars{display:flex;align-items:flex-end;gap:8px;height:82px;margin-top:14px}
.bar{flex:1;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:6px}
.bar i{width:100%;flex:0 0 auto;border-radius:8px 8px 3px 3px;
  background:linear-gradient(180deg,var(--red),var(--red-deep));
  min-height:6px;animation:grow .7s var(--sp) both}
.chart-card .bars .bar b{flex:0 0 auto}
.bar:last-child i{background:linear-gradient(180deg,var(--green),#068A57);box-shadow:0 0 16px rgba(0,224,138,.35)}
@keyframes grow{from{height:0!important}}
.bar b{font-size:11px;color:var(--faint);font-weight:700}
.scan-card{margin:12px var(--gut) 0;background:linear-gradient(135deg,rgba(0,224,138,.12),var(--surface) 58%);
  border:1px solid rgba(0,224,138,.36);border-radius:var(--r);padding:16px;box-shadow:var(--e2)}
.scan-card .t{font-weight:800;font-size:16px;letter-spacing:-.01em;display:flex;align-items:center;gap:8px}
.scan-card .t .ico{width:15px;height:15px;color:var(--green-t);flex-shrink:0}
.scan-card .s{font-size:13px;color:var(--muted);margin-top:4px;line-height:1.5}
.scan-row{display:flex;gap:9px;margin-top:13px}
.scan-row input{flex:1;background:var(--ink);border:1px solid var(--line-2);border-radius:14px;padding:13px 15px;
  color:var(--text);font-family:var(--display);font-weight:700;font-size:15px;letter-spacing:.06em;outline:none;
  text-transform:uppercase;min-width:0}
.scan-row input:focus{border-color:rgba(0,224,138,.6)}
.scan-btn{background:var(--green);border:none;color:var(--on-green);border-radius:14px;padding:0 19px;font-weight:900;
  font-size:14px;cursor:pointer;box-shadow:0 6px 18px rgba(0,224,138,.3);flex-shrink:0;min-height:var(--tap)}
.scan-btn.sm{padding:9px 15px;font-size:12px;min-height:0}
.sim-btn{margin-top:10px;width:100%;background:var(--surface-2);border:1px dashed var(--line-2);color:var(--muted);
  border-radius:14px;padding:13px;font-weight:700;font-size:13px;cursor:pointer;min-height:var(--tap)}
.feed{margin:12px var(--gut) 0;display:flex;flex-direction:column;gap:9px}
.feed-item{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);padding:12px 14px;
  display:flex;align-items:center;gap:12px;animation:feedIn .4s var(--sp);box-shadow:var(--e1)}
@keyframes feedIn{from{opacity:0;transform:translateX(-14px)}to{opacity:1;transform:none}}
.feed-item .em{width:36px;height:36px;border-radius:12px;background:rgba(0,224,138,.14);display:flex;
  align-items:center;justify-content:center;flex-shrink:0;color:var(--green-t)}
.feed-item .em .ico{width:17px;height:17px}
.feed-item.scan .em{background:rgba(77,159,255,.14);color:var(--blue-t)}
.feed-item .t{font-size:14px;font-weight:700}
.feed-item .s{font-size:12px;color:var(--muted);margin-top:2px}
.feed-item .w{margin-left:auto;font-size:12px;font-weight:800;color:var(--green-t);flex-shrink:0}
.deal-row{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);padding:13px 14px;
  display:flex;align-items:center;gap:12px}
.deal-row .t{font-size:14px;font-weight:700}
.deal-row .s{font-size:12px;color:var(--muted);margin-top:3px}
.switch{margin-left:auto;width:48px;height:28px;border-radius:99px;background:var(--surface-2);
  border:1px solid var(--line-2);position:relative;cursor:pointer;flex-shrink:0;transition:background .22s}
.switch i{position:absolute;top:2px;left:2px;width:22px;height:22px;border-radius:50%;background:var(--faint);
  transition:transform .24s var(--bo),background .2s ease}
.switch.on{background:rgba(0,224,138,.24);border-color:rgba(0,224,138,.5)}
.switch.on i{transform:translateX(20px);background:var(--green)}
.hq{margin:14px var(--gut) 4px;border-radius:var(--r);border:1px solid rgba(155,107,255,.3);
  background:linear-gradient(140deg,rgba(155,107,255,.14),var(--surface) 60%);padding:16px;box-shadow:var(--e2)}
.hq .k{font-size:11px;font-weight:900;letter-spacing:.16em;color:var(--purple-t);text-transform:uppercase}
.hq .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px}
.hq .cell .n{font-family:var(--display);font-weight:900;font-size:17px;letter-spacing:-.03em}
.hq .cell .l{font-size:11px;color:var(--muted);margin-top:3px;line-height:1.35}
.lockwrap{position:relative;margin-bottom:14px}
.lockwrap .scan-card{margin-bottom:0!important}
.lockdim{filter:blur(3px) saturate(.6);opacity:.5;pointer-events:none}
.lockover{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:11px;background:rgba(var(--glassrgb),.4);border-radius:var(--r);backdrop-filter:blur(2px)}
.lockover span{font-weight:900;font-size:14px;text-shadow:0 2px 12px rgba(0,0,0,.7);
  display:flex;align-items:center;gap:8px;color:var(--amber-t)}
.lockover span .ico{width:15px;height:15px}
.lockover button{background:var(--amber);border:none;color:#231400;font-weight:900;border-radius:12px;
  padding:12px 24px;font-size:14px;cursor:pointer}
.mini-bars{width:100%;height:52px;display:block;margin-top:8px}
.dl-row{display:flex;justify-content:space-between;gap:10px;font-size:13px;margin-top:9px}
.dl-row b{color:var(--amber-t);white-space:nowrap}
.prem-row{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:13px}
.plans,.cplans{display:grid;gap:8px;margin-top:11px}
.plans{grid-template-columns:1fr 1fr}
.cplans{grid-template-columns:1fr 1fr;margin:0 var(--gut) 12px}
.tiercard .t{display:flex;align-items:center;gap:7px}
.tiercard .t .ico{width:15px;height:15px;color:var(--amber-t)}
.plan{position:relative;text-align:left;background:var(--surface-2);border:2px solid var(--line-2);
  border-radius:var(--r-sm);padding:12px;color:var(--text);cursor:pointer}
.plan b{display:block;font-size:13px;letter-spacing:.03em}
.plan i{font-style:normal;display:block;color:var(--amber-t);font-weight:900;font-size:12px;margin:3px 0 6px}
.plan span{font-size:11px;color:var(--muted);line-height:1.5;display:block}
.plan.on{border-color:var(--red);background:rgba(255,39,64,.09)}
.plan em{position:absolute;top:8px;right:9px;font-style:normal;font-size:11px;font-weight:900;color:var(--red)}
.biz-wrap{display:flex;flex-direction:column;min-height:100%}

/* ── 16. PITCH + BRANDS ────────────────────────────────────── */
.pitch{padding:6px var(--gut) 24px}
.pitch h1{font-family:var(--display);font-weight:900;font-size:24px;line-height:1.3;letter-spacing:-.035em}
.pitch h1 em{color:var(--red);font-style:normal}
.pitch .lead{color:var(--muted);font-size:15px;line-height:1.6;margin-top:12px}
.stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:18px}
.stat{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:15px;box-shadow:var(--e2)}
.stat .n{font-family:var(--display);font-weight:900;font-size:22px;color:var(--red);letter-spacing:-.04em}
.stat .l{font-size:12px;color:var(--muted);margin-top:5px;line-height:1.4}
.tier{margin-top:12px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:15px;display:flex;align-items:center;gap:13px;box-shadow:var(--e1)}
.tier.hot{border-color:rgba(255,39,64,.45);background:linear-gradient(150deg,rgba(255,39,64,.12),var(--surface) 62%)}
.tier .em{flex-shrink:0;width:40px;height:40px;border-radius:14px;background:var(--surface-2);border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;color:var(--muted)}
.tier .em .ico{width:19px;height:19px}
.tier.hot .em{color:var(--red-t);background:rgba(255,39,64,.13);border-color:rgba(255,39,64,.3)}
.tier .t{font-weight:800;font-size:15px;letter-spacing:-.01em}
.tier .s{font-size:12px;color:var(--muted);margin-top:3px;line-height:1.45}
.tier .p{margin-left:auto;font-family:var(--display);font-weight:700;font-size:14px;color:var(--amber-t);
  flex-shrink:0;text-align:right;letter-spacing:-.02em}
.brand-sec{margin:0 var(--gut) 18px}
.brand-hd{display:flex;align-items:center;justify-content:space-between;gap:10px}
.brand-hd .ttl{color:var(--text);font-family:var(--display);font-weight:700;font-size:14px;letter-spacing:.04em;
  display:flex;align-items:center;gap:10px;text-transform:uppercase}
.brand-hd .ttl .em{background:var(--surface);border:1px solid var(--line-2);width:34px;height:34px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;color:var(--red)}
.brand-hd .ttl .em .ico{width:17px;height:17px}
.viewall{background:var(--surface);border:1px solid var(--line-2);color:var(--text);border-radius:12px;
  padding:9px 12px;font-size:11px;font-weight:800;cursor:pointer;min-height:36px;flex-shrink:0}
.slots{margin-top:12px;display:grid;grid-template-columns:repeat(5,1fr);gap:9px}
.slot{aspect-ratio:1/1;border:none;border-radius:14px;cursor:pointer;padding:0;display:flex;
  align-items:center;justify-content:center}
.slot .mono{width:100%;height:100%;font-size:14px;border-radius:14px}
.slot.empty-slot{background:var(--surface);border:1px dashed var(--line-2);color:var(--muted)}
.slot.empty-slot span{font-size:17px}
.biz-cta{margin:4px var(--gut) 18px;border-radius:var(--r);padding:18px;
  background:linear-gradient(135deg,rgba(255,39,64,.16),rgba(255,122,47,.04));
  border:1px solid rgba(255,39,64,.36);cursor:pointer;width:calc(100% - var(--gut)*2);text-align:left;box-shadow:var(--e2)}
.biz-cta .t{font-family:var(--display);font-weight:700;font-size:15px;letter-spacing:-.02em}
.biz-cta .s{font-size:13px;color:var(--muted);margin-top:6px;line-height:1.5}
.biz-cta .b{display:inline-block;margin-top:13px;background:linear-gradient(135deg,var(--red),var(--red-deep));
  color:#fff;font-weight:800;font-size:13px;border-radius:99px;padding:10px 18px;box-shadow:var(--glow-red)}
.backpill{margin:14px var(--gut) 0;border-radius:99px;padding:10px 17px;font-weight:800;font-size:13px;cursor:pointer;
  background:var(--surface-2);border:1px solid var(--line-2);color:var(--text);width:fit-content;
  display:flex;align-items:center;gap:7px}
.backpill .ico{width:14px;height:14px}

/* ── 17. SEARCH ────────────────────────────────────────────── */
.search-panel{position:absolute;inset:0;background:var(--ink);z-index:40;display:flex;flex-direction:column;
  animation:fade .2s ease}
@keyframes fade{from{opacity:0}to{opacity:1}}
.search-head{display:flex;gap:10px;align-items:center;padding:calc(14px + var(--sat)) var(--gut) 12px;flex-shrink:0}
.search-input{flex:1;background:var(--surface);border:1px solid var(--line-2);border-radius:16px;padding:14px 16px;
  color:var(--text);font-size:16px;font-family:var(--body);outline:none;min-height:50px}
.search-input::placeholder{color:var(--faint)}
.search-input:focus{border-color:rgba(255,39,64,.55);box-shadow:0 0 0 3px rgba(255,39,64,.12)}
.cancel{background:none;border:none;color:var(--red);font-weight:800;font-size:15px;cursor:pointer;min-height:var(--tap)}
.search-hint{padding:6px var(--gut);font-size:12px;font-weight:800;letter-spacing:.12em;color:var(--muted);
  text-transform:uppercase;flex-shrink:0}

/* ── 18. SPLASH + GATE ─────────────────────────────────────── */
.splash{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:radial-gradient(circle at 50% 42%,#1A0810,var(--ink) 68%)}
body.light .splash{background:radial-gradient(circle at 50% 42%,#fff,var(--ink) 68%)}
.splash .tick{margin-top:30px;width:120px;height:3px;border-radius:99px;background:var(--surface-2);overflow:hidden}
.splash .tick i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--red),var(--ember));
  animation:load 1.15s ease forwards}
@keyframes load{to{width:100%}}
.gate{height:100%;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:44px 30px;text-align:center;position:relative;overflow-y:auto;overflow-x:hidden}
.gate::before{content:"";position:absolute;inset:-40%;pointer-events:none;
  background:radial-gradient(circle at 50% 20%,rgba(255,39,64,.22),transparent 46%),
             radial-gradient(circle at 82% 84%,rgba(155,107,255,.14),transparent 42%)}
.gate>*{position:relative}
.gate .tag{margin-top:18px;color:var(--muted);font-size:16px;line-height:1.6;max-width:300px}
.gate .q{margin-top:38px;font-weight:800;font-size:17px;letter-spacing:-.01em}
.gate .row{display:flex;gap:12px;margin-top:18px;width:100%}
.gate .row button{flex:1;border-radius:20px;padding:17px 0;font-size:16px;font-weight:800;cursor:pointer;min-height:56px}
.gate .yes{background:linear-gradient(135deg,var(--red),var(--red-deep));border:none;color:#fff;
  box-shadow:0 10px 30px rgba(255,39,64,.42)}
.gate .no{background:none;border:1px solid var(--line-2);color:var(--muted)}
.gate .fine{margin-top:26px;font-size:12px;color:var(--faint);line-height:1.7}
.gate .sorry{margin-top:18px;color:var(--amber-t);font-size:14px;font-weight:600}
.brandwrap{display:flex;justify-content:center;position:relative}
.brandwrap .brandimg{width:min(56vw,240px);animation:logoIn 1.2s var(--sp) both,logoGlow 3.4s ease-in-out 1.2s infinite}
.brandwrap.gate .brandimg{width:min(46vw,190px);animation:logoIn .85s var(--sp) both}
@keyframes logoIn{0%{opacity:0;transform:scale(.62) rotate(-4deg);filter:blur(14px)}
  55%{filter:blur(0)}75%{transform:scale(1.04) rotate(0)}100%{opacity:1;transform:scale(1)}}
@keyframes logoGlow{0%,100%{filter:drop-shadow(0 0 0 rgba(255,39,64,0))}
  50%{filter:drop-shadow(0 0 26px rgba(255,39,64,.6))}}
.bubbles{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.bubbles i{position:absolute;bottom:-30px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.4),rgba(255,39,64,.22));animation:rise linear infinite}
@keyframes rise{0%{transform:translateY(0)}50%{transform:translateY(-45vh) translateX(12px)}
  100%{transform:translateY(-95vh) translateX(-8px)}}

/* ── 19. PUSH / TOAST / CONFETTI ───────────────────────────── */
.push{position:absolute;top:calc(12px + var(--sat));left:12px;right:12px;z-index:60;background:var(--glass);
  backdrop-filter:blur(20px) saturate(170%);border:1px solid var(--line-2);border-radius:20px;padding:14px 15px;
  display:flex;gap:12px;align-items:center;box-shadow:var(--e3);cursor:pointer;
  animation:pushIn .5s var(--bo);width:calc(100% - 24px);text-align:left}
@keyframes pushIn{from{transform:translateY(-100px);opacity:0}}
.push.out{animation:pushOut .3s ease forwards}
@keyframes pushOut{to{transform:translateY(-100px);opacity:0}}
.push .appic{width:38px;height:38px;border-radius:12px;background:#0A0C14;border:1px solid var(--line-2);
  display:flex;align-items:center;justify-content:center;font-family:var(--display);font-weight:900;font-size:12px;
  color:#FF6B7E;flex-shrink:0}
.push .t{font-weight:800;font-size:14px;letter-spacing:-.01em}
.push .s{font-size:13px;color:var(--muted);margin-top:2px;line-height:1.4}
.push .x{margin-left:auto;background:none;border:none;color:var(--muted);cursor:pointer;
  flex-shrink:0;width:36px;height:36px;display:flex;align-items:center;justify-content:center}
.toast{position:absolute;left:50%;bottom:calc(98px + var(--sab));transform:translateX(-50%) translateY(8px);z-index:50;
  background:var(--s3);border:1px solid var(--line-2);color:var(--text);font-size:14px;font-weight:600;
  padding:11px 18px;border-radius:99px;opacity:0;transition:opacity .3s,transform .3s var(--sp);
  pointer-events:none;white-space:nowrap;box-shadow:var(--e3);max-width:calc(100% - 32px);
  overflow:hidden;text-overflow:ellipsis}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.confetti{position:absolute;inset:0;pointer-events:none;z-index:80;overflow:hidden}
.confetti i{position:absolute;top:38%;width:8px;height:12px;border-radius:2px;
  animation:confetti 1.4s cubic-bezier(.2,.7,.4,1) forwards}
@keyframes confetti{0%{transform:translate(0,0) rotate(0);opacity:1}
  100%{transform:translate(var(--dx),58vh) rotate(var(--rot));opacity:0}}

/* ── 20. CART DISPATCH ─────────────────────────────────────── */
.cart-top{display:flex;align-items:center;gap:12px;padding:calc(18px + var(--sat)) var(--gut) 12px}
.ct-ic{width:46px;height:46px;border-radius:14px;background:var(--surface-2);border:1px solid var(--line-2);
  color:var(--trail-t);display:flex;align-items:center;justify-content:center}
.ct-ic svg{width:60%;height:60%}
.ct-t{font-family:var(--display);font-weight:900;font-size:17px;letter-spacing:-.03em}
.ct-s{font-size:12px;color:var(--muted);margin-top:2px}
.cart-top .exit-biz{margin-left:auto}
.cart-online{margin:0 var(--gut) 12px;border-radius:var(--r);padding:16px;display:flex;align-items:center;gap:12px;
  cursor:pointer;background:var(--surface);border:2px solid var(--line-2)}
.cart-online.on{border-color:rgba(0,224,138,.55);background:rgba(0,224,138,.07)}
.cart-online b{font-size:15px}
.cart-online span{font-size:12px;color:var(--muted)}
.cart-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:0 var(--gut) 12px}
.ck{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);padding:11px 6px;text-align:center}
.ck b{display:block;font-family:var(--display);font-size:16px;letter-spacing:-.03em}
.ck span{font-size:11px;color:var(--muted)}
.cart-active{margin:0 var(--gut) 8px;border-radius:var(--r);padding:15px;background:rgba(63,216,245,.08);
  border:2px solid rgba(63,216,245,.5)}
.ca-k{font-size:11px;font-weight:900;letter-spacing:.12em;color:var(--trail-t)}
.ca-r{font-size:15px;margin-top:6px}
.ca-p{font-size:13px;color:var(--text);margin-top:5px}
.ca-f{font-size:12px;color:var(--amber-t);font-weight:800;margin-top:5px}
.cart-req{display:flex;align-items:center;gap:10px;margin:0 var(--gut) 8px;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-sm);padding:12px 13px}
.cr-b{flex:1;font-size:13px;min-width:0}
.cr-b i{font-style:normal;color:var(--muted);font-size:12px}
.cr-f{font-weight:900;color:var(--amber-t);font-size:15px}
.cr-go{background:var(--green);border:none;color:var(--on-green);font-weight:900;border-radius:12px;padding:10px 14px;
  font-size:13px;cursor:pointer}
.cr-x{background:var(--surface-2);border:1px solid var(--line-2);color:var(--muted);border-radius:12px;
  width:34px;height:34px;display:flex;align-items:center;justify-content:center;cursor:pointer}
.cart-empty{margin:0 var(--gut);font-size:13px;color:var(--muted)}
.cart-hot{display:flex;flex-wrap:wrap;gap:7px;margin:0 var(--gut)}
.cart-hot span{background:rgba(255,39,64,.1);border:1px solid rgba(255,39,64,.38);color:var(--red-t);
  border-radius:99px;padding:8px 13px;font-size:12px;font-weight:800}
.cart-note{margin:14px var(--gut) 24px;font-size:12px;color:var(--muted);line-height:1.6;background:var(--surface);
  border:1px dashed var(--line-2);border-radius:var(--r-sm);padding:12px 14px}

/* ── 21. ACCESSIBILITY + MOTION ────────────────────────────── */
/* Reduced motion = fewer and gentler, not zero. Movement, springs and
   overshoot are removed globally, then the state changes a person must
   still *perceive* — a sheet opening, a screen arriving, a toast — are
   re-allowed as short opacity-only cross-fades (no translation, no scale). */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important}
  .heatbar,.heatbar.hide{transform:translate(-50%,0)}
  .map-ctrl button:active,.hseg:active,.mpv-b:active{transform:none}
  .lpin .lname{transform:translate(-50%,0)}
  .screen-in,.screen-in .stag,.screen-in .scroll-x .tcard{
    animation:rmFade .15s ease both!important;animation-delay:0s!important}
  .sheet{animation:rmFade .2s ease both!important}
  .overlay{animation:rmFade .15s ease both!important}
  .toast{transition:opacity .15s ease!important;transform:translateX(-50%)!important}
  .tab.center:active .puck{transform:none}
}
@keyframes rmFade{from{opacity:0}to{opacity:1}}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ═══════════════════════════════════════════════════════════════
   v6 ENGAGEMENT LAYER — streaks, plans, live status, hero
   ═══════════════════════════════════════════════════════════════ */

/* ── streak card (profile) ── */
.streak-card{margin:0 var(--gut) 14px;border-radius:var(--r);padding:15px 16px;box-shadow:var(--e2);
  background:linear-gradient(135deg,rgba(255,122,47,.16),rgba(255,39,64,.04) 60%),var(--surface);
  border:1px solid rgba(255,122,47,.32)}
.sk-head{display:flex;align-items:center;gap:12px}
.sk-ic{flex-shrink:0;width:40px;height:40px;border-radius:14px;display:flex;align-items:center;justify-content:center;
  background:rgba(255,122,47,.16);border:1px solid rgba(255,122,47,.34);color:var(--ember-t)}
.sk-b{min-width:0;flex:1}
.sk-b b{display:block;font-size:15px;font-weight:800;letter-spacing:-.01em}
.sk-b i{font-style:normal;font-size:13px;color:var(--muted);display:block;margin-top:2px}
.sk-n{font-family:var(--display);font-weight:900;font-size:22px;color:var(--ember-t);letter-spacing:-.04em;flex-shrink:0}
.sk-dots{display:flex;gap:6px;margin-top:13px}
.sk-d{flex:1;height:30px;border-radius:12px;display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:800;color:var(--muted);background:var(--surface-2);border:1px solid var(--line)}
.sk-d.on{color:#fff;background:linear-gradient(150deg,var(--ember),var(--red));border-color:transparent;
  box-shadow:0 3px 12px rgba(255,122,47,.4)}
.sec-count{font-size:12px;font-weight:800;color:var(--muted);background:var(--surface-2);
  border:1px solid var(--line);border-radius:99px;padding:4px 10px}

/* ── home hero: "what's happening right now" ── */
.hero{margin:12px var(--gut) 4px;border-radius:var(--r-lg);padding:18px;position:relative;overflow:hidden;
  border:1px solid var(--line-2);box-shadow:var(--e3);cursor:pointer;text-align:left;width:calc(100% - var(--gut)*2);
  background:linear-gradient(145deg,#1B1020,#0A0D18)}
body.light .hero{background:linear-gradient(145deg,#FFF,#EAF0FA)}
.hero::before{content:"";position:absolute;top:-60%;right:-25%;width:280px;height:280px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,39,64,.34),transparent 66%);pointer-events:none;
  animation:driftGlow 12s ease-in-out infinite alternate}
.hero-k{position:relative;font-size:11px;font-weight:900;letter-spacing:.18em;text-transform:uppercase;
  color:var(--red);display:flex;align-items:center;gap:7px}
.hero-k .ico{width:13px;height:13px}
.hero-t{position:relative;font-family:var(--display);font-weight:700;font-size:22px;letter-spacing:-.035em;
  line-height:1.2;margin-top:9px;color:var(--text)}
.hero-s{position:relative;font-size:14px;color:var(--muted);margin-top:7px;line-height:1.5}
.hero-row{position:relative;display:flex;gap:8px;margin-top:14px;flex-wrap:wrap}
.hero-b{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:800;border-radius:99px;
  padding:7px 12px;background:rgba(var(--tint),.09);border:1px solid var(--line-2);color:var(--text)}
.hero-b .ico{width:13px;height:13px}
.hero-b.hot{color:var(--red-t);background:rgba(255,39,64,.14);border-color:rgba(255,39,64,.35)}
.hero-b.live{color:var(--green-t);background:rgba(0,224,138,.13);border-color:rgba(0,224,138,.34)}
.hero-go{position:absolute;right:16px;bottom:16px;width:42px;height:42px;border-radius:50%;
  background:linear-gradient(135deg,var(--red),var(--red-deep));color:#fff;display:flex;align-items:center;
  justify-content:center;box-shadow:var(--glow-red)}

/* ── plan-the-night crew strip ── */
.plan-strip{margin:0 var(--gut) 4px;display:flex;gap:9px;align-items:center;background:var(--surface);
  border:1px solid var(--line);border-left:3px solid var(--violet);border-radius:var(--r-sm);
  padding:12px 14px;cursor:pointer;min-height:56px;box-shadow:var(--e1);width:calc(100% - var(--gut)*2);text-align:left}
.plan-strip .pl-ic{flex-shrink:0;color:var(--purple-t);display:flex}
.plan-strip .pl-b{min-width:0;flex:1}
.plan-strip b{font-size:14px;font-weight:800;display:block;letter-spacing:-.01em}
.plan-strip i{font-style:normal;font-size:12px;color:var(--muted);display:block;margin-top:2px}
.plan-strip .pl-a{margin-left:auto;color:var(--faint);display:flex;flex-shrink:0}
.pl-avs{display:flex;flex-shrink:0}
.pl-avs span{width:26px;height:26px;border-radius:50%;margin-left:-8px;border:2px solid var(--surface);
  display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:900;color:#fff}
.pl-avs span:first-child{margin-left:0}

/* ── venue-side live status composer (business dashboard) ── */
.live-post{margin:12px var(--gut) 0;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r);padding:16px;box-shadow:var(--e2)}
.lp-k{font-size:12px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);
  display:flex;align-items:center;gap:7px}
.lp-k .ico{width:14px;height:14px;color:var(--cyan)}
.lp-quick{display:flex;gap:7px;flex-wrap:wrap;margin-top:12px}
.lp-q{border-radius:99px;padding:9px 13px;font-size:13px;font-weight:700;cursor:pointer;
  background:var(--surface-2);border:1px solid var(--line-2);color:var(--text)}
.lp-q:active{background:rgba(63,216,245,.16);border-color:rgba(63,216,245,.55);color:var(--trail-t)}
.lp-row{display:flex;gap:9px;margin-top:12px}
.lp-row input{flex:1;background:var(--ink);border:1px solid var(--line-2);border-radius:14px;padding:13px 15px;
  color:var(--text);font-size:15px;outline:none;min-width:0;min-height:46px}
.lp-row input:focus{border-color:rgba(63,216,245,.6)}
.lp-send{background:var(--cyan);border:none;color:var(--on-cyan);border-radius:14px;padding:0 18px;font-weight:900;
  font-size:14px;cursor:pointer;flex-shrink:0;min-height:46px;box-shadow:0 6px 18px rgba(63,216,245,.28)}
.lp-note{font-size:12px;color:var(--faint);margin-top:10px;line-height:1.5}
.lp-live{margin-top:12px;display:flex;align-items:center;gap:9px;font-size:13px;color:var(--trail-t);
  background:rgba(63,216,245,.08);border:1px solid rgba(63,216,245,.3);border-radius:var(--r-sm);padding:10px 13px}
.lp-live .ico{width:14px;height:14px;flex-shrink:0}
.lp-live b{color:var(--text)}
.lp-live em{font-style:normal;margin-left:auto;color:var(--muted);font-size:11px;flex-shrink:0}

/* ── first-run reward moment ── */
.welcome-card{margin:0 var(--gut) 10px;border-radius:var(--r);padding:15px 16px;display:flex;gap:12px;
  align-items:center;background:linear-gradient(120deg,rgba(0,224,138,.15),rgba(0,224,138,.02) 60%),var(--surface);
  border:1px solid rgba(0,224,138,.34);box-shadow:var(--e2);animation:screenIn .45s var(--sp) both}
.welcome-card .wc-ic{flex-shrink:0;width:40px;height:40px;border-radius:14px;display:flex;align-items:center;
  justify-content:center;background:rgba(0,224,138,.16);border:1px solid rgba(0,224,138,.34);color:var(--green-t)}
.welcome-card b{font-size:14px;font-weight:800;display:block;letter-spacing:-.01em}
.welcome-card i{font-style:normal;font-size:13px;color:var(--muted);display:block;margin-top:3px;line-height:1.45}
.welcome-card .wc-x{margin-left:auto;background:none;border:none;color:var(--faint);cursor:pointer;
  width:32px;height:32px;display:flex;align-items:center;justify-content:center;flex-shrink:0}

/* tonight-card refinements */
.tcard .art{height:104px}
.tcard .art .mono{width:56px;height:56px;font-size:20px}
.art-live{position:absolute;left:10px;bottom:9px;z-index:2;display:inline-flex;align-items:center;gap:4px;
  font-size:11px;font-weight:900;letter-spacing:.07em;padding:5px 9px;border-radius:99px;color:#FFC44D;
  background:rgba(6,8,15,.82);backdrop-filter:blur(8px);border:1px solid rgba(255,176,32,.4);
  box-shadow:0 0 14px rgba(255,176,32,.2)}
.art-live .ico{width:11px;height:11px}
.art-live.open{color:var(--green-t);border-color:rgba(0,224,138,.4);box-shadow:none}
.art-live.shut{color:#C7CFE0;border-color:rgba(255,255,255,.14);box-shadow:none}
.tcard-tags{display:flex;gap:5px;margin-top:9px;flex-wrap:wrap}
.tcard .deal span{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.l-card .deal span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.welcome-card{padding:12px 14px}
.welcome-card .wc-ic{width:36px;height:36px;border-radius:12px}

/* chat hub: presence + conversation starters */
.crew-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;padding:0 var(--gut)}
.crew{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);padding:12px 6px 11px;
  display:flex;flex-direction:column;align-items:center;gap:7px;cursor:pointer;box-shadow:var(--e1)}
.cw-av{position:relative;width:40px;height:40px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;font-weight:900;font-size:16px;color:#fff;font-family:var(--display);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3)}
.cw-live{position:absolute;right:-1px;bottom:-1px;width:11px;height:11px;border-radius:50%;background:var(--green);
  border:2px solid var(--surface);box-shadow:0 0 8px var(--green)}
.cw-n{font-size:13px;font-weight:800;letter-spacing:-.01em}
.cw-v{font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.plan-actions{display:flex;flex-direction:column;gap:8px;padding:0 var(--gut)}
.pa-btn{display:flex;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-sm);padding:13px 15px;font-size:14px;font-weight:700;color:var(--text);cursor:pointer;
  text-align:left;min-height:var(--tap);box-shadow:var(--e1)}
.pa-btn .ico{color:var(--purple-t);flex-shrink:0}
.pa-btn:active{background:rgba(155,107,255,.12);border-color:rgba(155,107,255,.45)}

/* brand lockup: white-wordmark logo on dark, black-wordmark on light.
   NOTE: url() inside a stylesheet resolves against the STYLESHEET, not the
   document — these must be ../brand/, or the swap 404s and silently falls
   back to the light logo (black wordmark, invisible on a dark background). */
body:not(.light) .brandimg,body.dark .brandimg{content:url("../brand/dm-logo-dark.png")}
body.light .brandimg{content:url("../brand/dm-logo.png")}

/* ── light-theme corrections for the dark-glass overlays ───────── */
body.light .art-live{background:rgba(255,255,255,.86);border-color:rgba(183,119,10,.45);
  color:var(--amber-t);box-shadow:0 1px 6px rgba(16,42,86,.14)}
body.light .art-live.open{color:var(--green-t);border-color:rgba(0,135,90,.4)}
body.light .art-live.shut{color:var(--muted);border-color:rgba(16,42,86,.18)}
body.light .tcard .art .fav,
body.light .sheet-art .fav,
body.light .sheet-art .shr{background:rgba(255,255,255,.9);border-color:rgba(16,42,86,.14);
  color:var(--muted);box-shadow:0 2px 8px rgba(16,42,86,.16)}
body.light .tcard .art .fav.on,body.light .sheet-art .fav.on{color:var(--red)}
body.light .tag-s{background:rgba(255,255,255,.9);border-color:rgba(16,42,86,.14);color:var(--text)}
body.light .tag-s.o{color:var(--green-t)} body.light .tag-s.c{color:var(--muted)}
body.light .tag-s.hh{color:var(--amber-t)}
body.light .pin .tag{background:rgba(11,27,51,.92)}
body.light .push .appic{background:#0B1B33}
body.light .tcard .art::after{background:linear-gradient(180deg,transparent 50%,rgba(255,255,255,.35))}

/* real venue logos ship with their own light or dark plate — a hairline ring
   keeps a black-plate logo from dissolving into a dark card, and a white-plate
   one from bleeding into a light card */
.mono:has(.mlogo){box-shadow:inset 0 0 0 1px rgba(255,255,255,.16),0 2px 10px rgba(0,0,0,.35)}
body.light .mono:has(.mlogo){box-shadow:inset 0 0 0 1px rgba(16,42,86,.14),0 2px 10px rgba(16,42,86,.12)}

/* ═══════════════════════════════════════════════════════════════
   AUTH — sign in · create account · magic link · reset
   Soft gate: the sheet always says WHY it is asking.
   ═══════════════════════════════════════════════════════════════ */
.auth-sheet{max-height:94%}
.au-body{padding:6px 20px calc(20px + var(--sab));overflow-y:auto;scrollbar-width:none}
.au-body::-webkit-scrollbar{display:none}
.au-head{text-align:center;padding:4px 4px 18px}
.au-ic{width:56px;height:56px;border-radius:20px;display:inline-flex;align-items:center;justify-content:center;
  background:linear-gradient(150deg,rgba(255,39,64,.2),rgba(255,122,47,.08));
  border:1px solid rgba(255,39,64,.34);color:var(--red-t);margin-bottom:14px;
  box-shadow:0 8px 26px rgba(255,39,64,.2)}
.au-head h2{font-family:var(--display);font-weight:700;font-size:22px;letter-spacing:-.035em;line-height:1.2}
.au-head p{font-size:14px;color:var(--muted);margin-top:8px;line-height:1.55;max-width:320px;
  margin-left:auto;margin-right:auto}

/* fields */
.au-f{display:block;margin-bottom:14px}
.au-f>span{display:flex;align-items:center;justify-content:space-between;gap:8px;
  font-size:13px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);margin-bottom:7px}
.au-f input{width:100%;background:var(--surface-2);border:1px solid var(--line-2);border-radius:16px;
  padding:15px 16px;color:var(--text);font-family:var(--body);font-size:16px;outline:none;min-height:54px;
  transition:border-color .16s ease,box-shadow .16s ease,background .16s ease}
.au-f input::placeholder{color:var(--faint)}
.au-f input:focus{border-color:rgba(255,39,64,.6);background:var(--surface);
  box-shadow:0 0 0 4px rgba(255,39,64,.12)}
.au-f input:-webkit-autofill{-webkit-text-fill-color:var(--text);-webkit-box-shadow:0 0 0 1000px var(--surface-2) inset}

/* password strength */
.au-strength{display:flex;gap:5px;margin-top:9px}
.au-strength i{flex:1;height:4px;border-radius:99px;background:var(--s3);transition:background .25s var(--sp)}
.au-strength.s1 i:nth-child(-n+1){background:var(--red)}
.au-strength.s2 i:nth-child(-n+2){background:var(--ember)}
.au-strength.s3 i:nth-child(-n+3){background:var(--amber)}
.au-strength.s4 i{background:var(--green)}
.au-strength-l{display:block;font-size:12px;font-weight:700;color:var(--muted);margin-top:6px}

/* buttons */
.au-btn{width:100%;border-radius:16px;padding:16px 0;font-weight:800;font-size:16px;cursor:pointer;
  min-height:54px;display:flex;align-items:center;justify-content:center;gap:9px;margin-top:4px;
  border:1px solid var(--line-2);background:var(--surface-2);color:var(--text)}
.au-btn+.au-btn{margin-top:10px}
.au-btn.prime{background:linear-gradient(135deg,var(--red),var(--red-deep));border-color:transparent;color:#fff;
  box-shadow:var(--glow-red)}
.au-btn.ghost{background:none;color:var(--muted);font-size:15px;font-weight:700;min-height:48px;padding:13px 0}
.au-btn.ghost .ico{width:15px;height:15px}
.au-btn:disabled{opacity:.62;cursor:default}
.au-btn:disabled:active{transform:none}
.au-spin{width:16px;height:16px;border-radius:50%;border:2px solid rgba(255,255,255,.35);
  border-top-color:#fff;animation:auSpin .7s linear infinite;flex-shrink:0}
.au-btn.ghost .au-spin{border-color:rgba(var(--tint),.3);border-top-color:var(--text)}
@keyframes auSpin{to{transform:rotate(360deg)}}

.au-social{width:100%;border-radius:16px;padding:15px 0;font-weight:700;font-size:16px;cursor:pointer;
  min-height:54px;display:flex;align-items:center;justify-content:center;gap:11px;
  background:var(--surface-2);border:1px solid var(--line-2);color:var(--text)}
.au-social:disabled{opacity:.6;cursor:default}
.au-or{display:flex;align-items:center;gap:12px;margin:18px 0}
.au-or::before,.au-or::after{content:"";flex:1;height:1px;background:var(--line)}
.au-or span{font-size:12px;font-weight:700;color:var(--faint);text-transform:uppercase;letter-spacing:.1em}

.au-link{background:none;border:none;color:var(--red-t);font-weight:800;font-size:13px;cursor:pointer;
  padding:0;text-transform:none;letter-spacing:0}
.au-swap{text-align:center;font-size:14px;color:var(--muted);margin-top:18px}
.au-swap .au-link{font-size:14px}
.au-fine{font-size:12px;color:var(--faint);line-height:1.6;margin-top:14px;text-align:center}
.au-guest{width:100%;background:none;border:none;color:var(--muted);font-size:14px;font-weight:700;
  cursor:pointer;padding:16px 0 6px;min-height:var(--tap);text-decoration:underline;
  text-underline-offset:3px;text-decoration-color:var(--line-2)}
.au-err{display:flex;align-items:flex-start;gap:9px;font-size:14px;font-weight:600;line-height:1.45;
  color:var(--danger-t);background:rgba(255,39,64,.1);border:1px solid rgba(255,39,64,.34);
  border-radius:var(--r-sm);padding:12px 13px;margin:2px 0 14px;animation:auShake .32s var(--sp)}
.au-err .ico{flex-shrink:0;margin-top:1px}
@keyframes auShake{0%,100%{transform:translateX(0)}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
.au-demo{font-size:12px;color:var(--faint);line-height:1.6;margin-top:16px;text-align:center;
  display:flex;align-items:flex-start;gap:7px;justify-content:center;flex-wrap:wrap}
.au-demo code{font-family:ui-monospace,monospace;font-size:12px;background:var(--surface-2);
  border:1px solid var(--line);border-radius:8px;padding:2px 6px;color:var(--muted)}

/* "check your email" confirmation */
.au-sent{text-align:center;padding-top:20px}
.au-sent-ic{width:64px;height:64px;border-radius:20px;display:inline-flex;align-items:center;justify-content:center;
  background:linear-gradient(150deg,rgba(0,224,138,.2),rgba(0,224,138,.05));
  border:1px solid rgba(0,224,138,.36);color:var(--green-t);margin-bottom:16px}
.au-sent h2{font-family:var(--display);font-weight:700;font-size:22px;letter-spacing:-.035em}
.au-sent p{font-size:15px;color:var(--muted);margin:10px auto 0;line-height:1.6;max-width:320px}
.au-sent p b{color:var(--text)}
.au-sent .au-btn{margin-top:22px}

/* account chip on Profile */
.acct-card{margin:6px var(--gut) 14px;display:flex;align-items:center;gap:13px;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r);padding:14px 15px;box-shadow:var(--e2);
  width:calc(100% - var(--gut)*2);text-align:left}
.acct-card.out{cursor:pointer;border-color:rgba(255,39,64,.3);
  background:linear-gradient(120deg,rgba(255,39,64,.1),rgba(255,39,64,.02) 60%),var(--surface)}
.acct-av{width:48px;height:48px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;
  font-family:var(--display);font-weight:900;font-size:17px;color:#fff;letter-spacing:-.03em;overflow:hidden;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3)}
.acct-av img{width:100%;height:100%;object-fit:cover}
.acct-av.guest{background:var(--surface-2);border:1px solid var(--line-2);color:var(--muted);box-shadow:none}
.acct-b{min-width:0;flex:1}
.acct-b b{display:block;font-size:15px;font-weight:800;letter-spacing:-.01em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.acct-b i{font-style:normal;display:block;font-size:13px;color:var(--muted);margin-top:3px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Facebook-sourced extras: birthday perk + friends already on the app */
.acct-extra{display:flex;align-items:center;gap:5px;font-size:12px;font-weight:700;
  color:var(--amber-t);margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.acct-extra+.acct-extra{color:var(--green-t)}
.acct-extra svg{flex-shrink:0}
.acct-cta{flex-shrink:0;font-size:13px;font-weight:800;color:#fff;border-radius:99px;padding:9px 15px;
  background:linear-gradient(135deg,var(--red),var(--red-deep));box-shadow:var(--glow-red)}
.acct-out{flex-shrink:0;display:flex;align-items:center;gap:6px;font-size:13px;font-weight:700;
  color:var(--muted);background:var(--surface-2);border:1px solid var(--line-2);border-radius:99px;
  padding:9px 13px;cursor:pointer;min-height:38px}
.hbtn-in{width:auto;padding:0 14px;font-size:14px;font-weight:800;color:var(--red-t);
  border-color:rgba(255,39,64,.4);background:rgba(255,39,64,.1)}
.hbtn-me{overflow:hidden;color:#fff;font-family:var(--display);font-weight:900;font-size:14px;
  letter-spacing:-.03em;border-color:transparent;box-shadow:inset 0 1px 0 rgba(255,255,255,.3)}
.hbtn-me img{width:100%;height:100%;object-fit:cover}

/* ── driver dispatch gate ─────────────────────────────────────── */
.dv-gate{padding:calc(14px + var(--sat)) var(--gut) calc(24px + var(--sab));min-height:100%}
.dv-back{display:inline-flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--line-2);
  color:var(--muted);border-radius:99px;padding:10px 16px;font-size:14px;font-weight:800;cursor:pointer;
  min-height:42px;margin-bottom:22px}
.dv-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:24px 20px;
  box-shadow:var(--e2)}
.dv-ic{width:58px;height:58px;border-radius:20px;display:inline-flex;align-items:center;justify-content:center;
  background:linear-gradient(150deg,rgba(63,216,245,.2),rgba(63,216,245,.05));
  border:1px solid rgba(63,216,245,.36);color:var(--trail-t);margin-bottom:18px}
.dv-ic.ok{background:linear-gradient(150deg,rgba(0,224,138,.2),rgba(0,224,138,.05));
  border-color:rgba(0,224,138,.36);color:var(--green-t)}
.dv-card h2{font-family:var(--display);font-weight:700;font-size:24px;letter-spacing:-.035em;line-height:1.2}
.dv-card>p{font-size:15px;color:var(--muted);margin:10px 0 22px;line-height:1.6}
.dv-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-bottom:24px}
.dv-stats div{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:13px 10px;text-align:center}
.dv-stats b{display:block;font-family:var(--display);font-weight:900;font-size:17px;letter-spacing:-.03em;
  color:var(--trail-t)}
.dv-stats span{display:block;font-size:11px;color:var(--muted);margin-top:5px;line-height:1.35}
.dv-card .au-btn{margin-top:6px}

/* ═══ SIGN-IN PAGE (first run) ═══════════════════════════════════ */
.signin-page{height:100%;overflow-y:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;
  background:radial-gradient(circle at 50% 0%,rgba(255,39,64,.14),transparent 46%),var(--ink)}
.signin-page::-webkit-scrollbar{display:none}
.sp-inner{padding:calc(28px + var(--sat)) 22px calc(28px + var(--sab));max-width:440px;margin:0 auto}
.sp-logo{display:block;width:min(42vw,168px);margin:0 auto 26px;
  filter:drop-shadow(0 0 24px rgba(255,39,64,.3))}
.sp-head{text-align:center;margin-bottom:24px}
.sp-head h2{font-family:var(--display);font-weight:700;font-size:24px;letter-spacing:-.04em;line-height:1.15}
.sp-head p{font-size:15px;color:var(--muted);margin-top:9px;line-height:1.55;
  max-width:330px;margin-left:auto;margin-right:auto}
.signin-page .au-guest{margin-top:8px}
.signin-page .ver{padding-top:20px}

/* Facebook button variant */
.au-social+.au-social{margin-top:10px}
.au-social.fb{border-color:rgba(24,119,242,.4);background:rgba(24,119,242,.10)}
.au-social.fb:active{background:rgba(24,119,242,.18)}
body.light .au-social.fb{background:rgba(24,119,242,.07)}

/* ── share-to-network row ─────────────────────────────────────── */
.share-nets{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin:16px 18px 0}
.sn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  border:1px solid var(--line-2);background:var(--surface-2);color:var(--text);border-radius:var(--r-sm);
  padding:12px 4px;font-weight:700;font-size:12px;cursor:pointer;min-height:58px}
.sn svg,.sn .ico{flex-shrink:0}
.sn.fb{border-color:rgba(24,119,242,.4);background:rgba(24,119,242,.10)}
.sn.wa{border-color:rgba(37,211,102,.38);background:rgba(37,211,102,.09)}
.sn.x{color:var(--text)}
.sn.sms{color:var(--purple-t);border-color:rgba(155,107,255,.4);background:rgba(155,107,255,.1)}
body.light .sn.fb{background:rgba(24,119,242,.07)}
body.light .sn.wa{background:rgba(37,211,102,.07)}
.sn.msgr{border-color:rgba(0,132,255,.4);background:rgba(0,132,255,.10)}
body.light .sn.msgr{background:rgba(0,132,255,.07)}

/* ── invite friends (profile) ─────────────────────────────── */
.inv-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:14px 0 14px;overflow:hidden}
.inv-nets{margin:0 14px}
.inv-pals{display:flex;align-items:center;gap:0 8px;padding:2px 16px 12px;flex-wrap:wrap}
.inv-av{width:30px;height:30px;border-radius:50%;overflow:hidden;flex-shrink:0;
  background:var(--surface-2);border:2px solid var(--surface);display:inline-flex;
  align-items:center;justify-content:center;font-weight:800;font-size:14px;color:var(--text);
  margin-left:-8px;box-shadow:0 1px 4px rgba(0,0,0,.35)}
.inv-av:first-child{margin-left:0}
.inv-av img{width:100%;height:100%;object-fit:cover}
.inv-pn{font-size:13px;font-weight:700;color:var(--green-t);margin-left:4px}
.inv-hint{display:flex;align-items:center;gap:7px;padding:0 16px 12px;
  font-size:13px;color:var(--muted);font-weight:600}
.inv-connect{display:flex;align-items:center;gap:8px;margin:0 14px 12px;width:calc(100% - 28px);
  padding:11px 13px;border-radius:var(--r-sm);border:1px dashed rgba(24,119,242,.5);
  background:rgba(24,119,242,.08);color:var(--blue-t);font-weight:700;font-size:13px;
  cursor:pointer;text-align:left}
.inv-native{display:flex;align-items:center;justify-content:center;gap:9px;margin:0 14px 12px;
  width:calc(100% - 28px);padding:13px 0;border-radius:var(--r-sm);border:none;cursor:pointer;
  background:linear-gradient(135deg,var(--red),var(--red-deep));color:#fff;font-weight:800;
  font-size:15px;box-shadow:var(--glow-red)}
/* ── settings (profile) ───────────────────────────────────── */
.set-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:4px 0;overflow:hidden}
.set-row{display:flex;align-items:center;gap:12px;width:100%;padding:13px 16px;
  background:none;border:none;border-bottom:1px solid var(--line);cursor:pointer;text-align:left}
.set-card .set-row:last-of-type{border-bottom:none}
.set-ic{width:32px;height:32px;border-radius:12px;background:var(--surface-2);color:var(--muted);
  display:flex;align-items:center;justify-content:center;flex-shrink:0}
.set-row[aria-checked="true"] .set-ic{background:rgba(255,39,64,.13);color:var(--red-t)}
.set-b{flex:1;min-width:0}
.set-b b{display:block;font-size:14px;font-weight:800;color:var(--text)}
.set-b i{display:block;font-style:normal;font-size:12px;color:var(--muted);margin-top:2px;line-height:1.45}
.sw{width:44px;height:26px;border-radius:99px;background:var(--surface-2);border:1px solid var(--line-2);
  position:relative;flex-shrink:0;transition:background .18s var(--sp),border-color .18s var(--sp)}
.sw i{position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;background:var(--muted);
  transition:transform .18s var(--sp),background .18s var(--sp)}
.sw.on{background:linear-gradient(135deg,var(--red),var(--red-deep));border-color:transparent}
.sw.on i{transform:translateX(18px);background:#fff}
@media(prefers-reduced-motion:reduce){.sw,.sw i{transition:none}}
/* home-tab invite strip */
.inv-strip{display:flex;align-items:center;gap:11px;width:100%;margin:2px 0 14px;padding:12px 14px;
  border-radius:var(--r);border:1px solid var(--line);cursor:pointer;text-align:left;
  background:linear-gradient(120deg,rgba(255,39,64,.12),var(--surface) 60%)}
.inv-strip .is-ic{width:34px;height:34px;border-radius:12px;background:rgba(255,39,64,.15);
  color:var(--red-t);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.inv-strip .is-b{flex:1;min-width:0}
.inv-strip .is-b b{display:block;font-size:14px;font-weight:800;color:var(--text)}
.inv-strip .is-b i{display:block;font-style:normal;font-size:12px;color:var(--muted);margin-top:2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.inv-strip .is-go{color:var(--red-t);flex-shrink:0}
.inv-copy{display:block;margin:12px 14px 0;width:calc(100% - 28px);padding:10px 12px;
  border-radius:var(--r-sm);border:1px dashed var(--line-2);background:var(--surface-2);
  color:var(--muted);font-weight:700;font-size:13px;cursor:pointer;
  font-family:ui-monospace,monospace;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ── edit profile sheet ───────────────────────────────────── */
.ep-avrow{display:flex;align-items:center;gap:12px;margin:2px 0 14px}
.ep-av{position:relative}
.ep-avhint{font-size:13px;color:var(--muted);font-weight:600}
.ep-drinks{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.ep-dr{display:inline-flex;align-items:center;gap:6px;padding:8px 13px;border-radius:99px;
  border:1px solid var(--line-2);background:var(--surface-2);color:var(--text);
  font-weight:700;font-size:13px;cursor:pointer}
.ep-dr.on{border-color:var(--red);background:rgba(255,39,64,.12);color:var(--red-t);
  box-shadow:0 0 0 1px var(--red) inset}
body.light .ep-dr.on{background:rgba(233,12,21,.08)}

/* ═══ v6.4 — INPUT SIZING (zoom unlock support) ═══════════════════
   Page zoom is no longer locked (accessibility), so every text-entry
   control must be ≥16px or iOS Safari auto-zooms the page on focus and
   leaves it zoomed. 16px also reads better in a dim bar. */
input[type=text],input[type=email],input[type=password],input[type=search],
input[type=tel],input[type=number],textarea{font-size:17px}

/* ═══ v6.4.1 — COMMUNITY SAFETY (report · block · house rules) ════ */
.vc-actions .txtb.warn{color:var(--red-t)}
.rpt-sheet{max-height:86%}
.rpt-bd{padding:4px 20px calc(20px + var(--sab));overflow-y:auto}
.rpt-h{font-size:17px;font-weight:800;margin-bottom:6px}
.rpt-q{font-size:14px;color:var(--muted);background:var(--surface-2);border:1px solid var(--line);
  border-radius:12px;padding:10px 13px;margin-bottom:10px;font-style:italic;overflow:hidden;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.rpt-s{font-size:14px;color:var(--muted);line-height:1.55;margin-bottom:14px}
.rpt-r{display:block;width:100%;text-align:left;background:var(--surface-2);border:1px solid var(--line-2);
  color:var(--text);border-radius:14px;padding:14px 16px;font-size:16px;font-weight:700;cursor:pointer;
  min-height:48px;margin-bottom:9px;transition:border-color .15s ease,background .15s ease}
.rpt-r:active{background:var(--s3)}
.rpt-r.hard{border-color:rgba(255,39,64,.5);color:var(--red-t);background:rgba(255,39,64,.08)}
.rpt-cancel{display:block;width:100%;background:none;border:none;color:var(--muted);font-weight:700;
  font-size:15px;padding:13px 0 4px;cursor:pointer;min-height:46px}
.rpt-fine{font-size:12px;color:var(--faint);line-height:1.6;margin-top:10px;text-align:center}
.rpt-brow{display:flex;align-items:center;justify-content:space-between;gap:10px;
  background:var(--surface-2);border:1px solid var(--line);border-radius:14px;padding:12px 14px;
  margin-bottom:9px;font-weight:700;font-size:15px}
.rpt-un{background:none;border:1px solid var(--line-2);color:var(--red-t);border-radius:99px;
  padding:8px 14px;font-weight:800;font-size:13px;cursor:pointer;min-height:38px}
.rpt-empty{font-size:14px;color:var(--faint);text-align:center;padding:18px 0}
.rpt-rule{font-size:15px;line-height:1.55;color:var(--text);background:var(--surface-2);
  border:1px solid var(--line);border-radius:12px;padding:11px 14px;margin-bottom:8px}
.rpt-rule b{color:var(--red-t)}

/* ═══ v6.5.0 — SIGN IN WITH APPLE (HIG: black button, most prominent) ═ */
.au-social.apple{background:#000;color:#fff;border-color:#000}
.au-social.apple:active{background:#1a1a1a}
body.light .au-social.apple{background:#000;color:#fff;border-color:#000}

/* delete account — quiet entry, loud confirm */
.acct-card{flex-wrap:wrap}
.acct-del{flex-basis:100%;background:none;border:none;color:var(--faint);font-size:13px;
  font-weight:700;cursor:pointer;padding:6px 0 0;min-height:34px;text-align:left}
.acct-del:active{color:var(--red-t)}

/* ═══ v6.6.0 — GET A RIDE (Uber / Lyft handoff) ═══════════════════ */
body.dark .sheet-actions .rideb{border-color:rgba(77,215,255,.4);color:#7fe3ff;background:rgba(77,215,255,.08)}
body.light .sheet-actions .rideb{color:#00647d;border-color:rgba(0,124,152,.45);background:rgba(0,124,152,.07)}
.rpt-r.ride-uber{background:#000;color:#fff;border-color:#000;text-align:center;font-weight:800}
body.light .rpt-r.ride-uber{background:#000;color:#fff;border-color:#000}
.rpt-r.ride-lyft{background:#0f0714;color:#ff8ae2;border-color:#FF00BF;text-align:center;font-weight:800}
body.light .rpt-r.ride-lyft{background:#0f0714;color:#ff8ae2;border-color:#FF00BF}
.rpt-r.ride-uber:active,.rpt-r.ride-lyft:active{filter:brightness(1.3)}

/* Get-there cascade rows: option name + context line */
.rpt-r.gt,.rpt-r.ride-uber,.rpt-r.ride-lyft{display:flex;flex-direction:column;align-items:flex-start;gap:2px}
.gt-t{font-size:16px;font-weight:800}
.gt-m{font-size:13px;font-weight:600;color:var(--muted)}
.gt-m.gt-inv{color:inherit;opacity:.75}
.rpt-r.gt{border-color:rgba(63,216,245,.35)}

/* home escape hatch inside the get-there chooser */
.rpt-home{display:block;width:100%;background:none;border:1px dashed var(--line-2);border-radius:14px;
  color:var(--muted);font-weight:700;font-size:14px;padding:12px 0;cursor:pointer;min-height:46px;margin-top:2px}
.rpt-home:active{color:var(--text);border-color:var(--line-2)}

/* fallback map self-identifies + offers retry (matches desktop) */
.sketchnote{position:absolute;left:50%;top:12px;transform:translateX(-50%);z-index:5;background:var(--glass);
  backdrop-filter:blur(10px);border:1px solid var(--line-2);border-radius:99px;padding:6px 12px;
  font-size:12px;font-weight:700;color:var(--muted);white-space:nowrap;display:flex;align-items:center;gap:4px}
.sketchnote .sk-retry{background:none;border:1px solid var(--line-2);border-radius:99px;color:var(--text);
  font-weight:800;font-size:11px;padding:4px 11px;cursor:pointer;min-height:26px}

/* location diagnostic rows */
.gd-r{display:flex;justify-content:space-between;gap:12px;padding:9px 2px;border-bottom:1px solid var(--line);font-size:14px;font-weight:600;color:var(--muted)}
.gd-r b{font-weight:800;color:var(--text);text-align:right;max-width:60%;word-break:break-word}
.gd-r.ok b{color:var(--green-t,#43d17c)}
.gd-r.bad b{color:var(--red-t,#ff6b7a)}

/* ═══ v6.8.0 — safe choices, visible ═══ */
.gt-row{display:flex;align-items:center;gap:10px}
.brandchip{display:inline-flex;align-items:center;justify-content:center;border-radius:8px;
  min-width:52px;height:26px;padding:0 10px;font-weight:900;letter-spacing:-.01em}
.brandchip.uber{background:#000;color:#fff;font-size:15px;border:1px solid #2a2a2a}
.brandchip.lyft{background:#FF00BF;color:#fff;font-size:20px;line-height:1;font-weight:900;text-transform:lowercase}
.homesafe{display:flex;align-items:center;gap:12px;width:100%;text-align:left;background:linear-gradient(140deg,rgba(77,215,255,.10),var(--surface));
  border:1px solid rgba(77,215,255,.32);border-radius:20px;padding:13px 15px;cursor:pointer;min-height:56px;color:var(--text)}
.homesafe .hs-ic{font-size:24px}
.homesafe .t1{font-size:15px;font-weight:800}
.homesafe .t2{font-size:12px;font-weight:600;color:var(--muted)}
.homesafe .pa{margin-left:auto;color:var(--faint);font-size:20px}
body.dark .rideclaim{display:block;width:100%;margin:10px 0 2px;background:rgba(77,215,255,.09);border:1px solid rgba(77,215,255,.35);
  border-radius:14px;padding:13px;color:#7fe3ff;font-weight:800;font-size:15px;cursor:pointer;min-height:48px}
body.light .rideclaim{display:block;width:100%;margin:10px 0 2px;border-radius:14px;padding:13px;font-weight:800;font-size:15px;cursor:pointer;min-height:48px;color:#00647d;border-color:rgba(0,124,152,.45);background:rgba(0,124,152,.07)}

/* ═══ YOUR PAGE — profile customization ═══ */
.pubcard{border:1px solid var(--line-2);border-left:4px solid var(--pt,#b91c1c);border-radius:16px;
  padding:14px 15px;margin:8px 0 14px;background:var(--surface)}
.pc-hd{display:flex;align-items:center;gap:11px;min-width:0}
.pc-av{width:44px;height:44px;border-radius:14px;flex-shrink:0;display:flex;align-items:center;justify-content:center;
  background:var(--pt,#b91c1c);color:#fff;font-weight:900;font-size:20px;object-fit:cover}
.pc-n{font-size:16px;font-weight:800}
.pc-s{font-size:13px;font-weight:600;color:var(--muted);font-style:italic}
.pc-bio{font-size:14px;font-weight:600;color:var(--text);margin-top:10px;line-height:1.5}
.pc-row{font-size:14px;font-weight:600;color:var(--muted);margin-top:8px}
.pc-row b{color:var(--text)}
.pc-spot{background:none;border:1px solid var(--line-2);border-radius:99px;color:var(--text);
  font-size:13px;font-weight:700;padding:5px 11px;margin:3px 3px 0 0;cursor:pointer;min-height:30px}
.pc-spot:active{border-color:var(--pt,#b91c1c)}
.pe-l{display:block;font-size:13px;font-weight:800;color:var(--muted);margin:13px 2px 6px;text-transform:uppercase;letter-spacing:.04em}
.pe-l span{font-weight:600;text-transform:none;letter-spacing:0}
.pe-i{width:100%;background:var(--surface-2);border:1px solid var(--line-2);border-radius:12px;
  color:var(--text);font:600 16px/1.4 Outfit,system-ui;padding:12px 13px;min-height:48px}
.pe-i:focus{outline:2px solid var(--red);outline-offset:1px}
.pe-t{min-height:74px;resize:none}
.pe-tints{display:flex;gap:10px;padding:2px}
.pe-tint{width:34px;height:34px;border-radius:12px;border:2px solid transparent;cursor:pointer}
.pe-tint.on{border-color:var(--text);box-shadow:0 0 0 3px var(--surface),0 0 0 5px var(--pt,transparent)}
.pe-spots{display:flex;flex-wrap:wrap;gap:7px}
.pe-spot{background:var(--surface-2);border:1px solid var(--line-2);border-radius:99px;color:var(--muted);
  font-size:13px;font-weight:700;padding:8px 13px;cursor:pointer;min-height:36px}
.pe-spot.on{color:var(--text);border-color:var(--red);background:rgba(255,39,64,.09)}

/* demo-mode transparency on the sign-in page */
.au-demo{border:1px dashed var(--line-2);border-radius:12px;padding:10px 13px;margin-bottom:12px;
  font-size:13px;font-weight:600;color:var(--muted);line-height:1.5}
.au-demo b{color:var(--text)}


/* ==========================================================================
   Apple pass - motion + elevation tokens, five-up tab bar, map FAB.
   ========================================================================== */
:root{
  /* Apple reasons about motion as damping + response rather than duration +
     bezier. --ease-out is the critically damped default (no overshoot) and
     covers almost everything. --ease-spring has a small overshoot and is used
     ONLY where a gesture carried momentum into the animation. Exits run about
     65% of the enter duration, so dismissing always feels quicker than
     summoning. */
  --ease-out:cubic-bezier(.23,1,.32,1);
  --ease-inout:cubic-bezier(.77,0,.175,1);
  --ease-spring:cubic-bezier(.34,1.4,.64,1);
  --dur-press:.12s;
  --dur-in:.28s;
  --dur-out:.18s;
  /* One four-step elevation scale, replacing ten ad-hoc box-shadows. */
  --e1:0 1px 2px rgba(0,0,0,.30);
  --e2:0 4px 14px rgba(0,0,0,.36);
  --e3:0 14px 36px rgba(0,0,0,.44);
  --e4:0 28px 68px rgba(0,0,0,.52);
}

/* Five labelled destinations, each a full-width target with a readable
   label -- the six-up bar had to drop to 1px padding and a 9.5px label
   (9px under 340px) to fit, which is below both the legible floor and the
   44pt target. */
.tabbar-5 .tab{padding-left:2px;padding-right:2px}
.tabbar-5 .tab .lb{font-size:11px;letter-spacing:.01em}

/* Map is the app's primary verb, not a sixth destination, so it rides above
   the bar as a floating action button at the trailing edge -- thumb-reachable
   and clear of every tab. Icon-only by design; the name is on aria-label.
   Press feedback is transform-only, so nothing around it reflows. */
.mapfab{
  position:fixed; right:16px; bottom:calc(var(--sab) + 76px);
  width:56px; height:56px; padding:0; border:none; border-radius:999px;
  background:var(--red); color:#fff; cursor:pointer;
  display:grid; place-items:center; line-height:0;
  box-shadow:var(--e3), 0 0 0 4px var(--ink);
  transition:transform var(--dur-press) var(--ease-out),
             box-shadow var(--dur-in) var(--ease-out);
  z-index:21;
}
.mapfab:active{transform:scale(.94)}
.mapfab.on{box-shadow:var(--e3), 0 0 0 4px var(--ink), 0 0 0 6px var(--red)}
.mapfab .puck{display:grid; place-items:center; line-height:0}

/* One focus ring for the whole app. Keyboard-only (:focus-visible), never
   removed, and offset so it reads against both cards and photos. */
:where(button,a,[role="button"],input,select,textarea,[tabindex]):focus-visible{
  outline:2px solid var(--red);
  outline-offset:2px;
  border-radius:inherit;
}
/* Kill the legacy 300ms tap delay on everything interactive. */
:where(button,a,[role="button"],.chip,.tab,.mapfab){touch-action:manipulation}

/* Reduced transparency: frost the glass rather than blurring it, so the
   translucent chrome stays legible for people who asked for less of it. */
@media (prefers-reduced-transparency:reduce){
  .tabbar,.topbar,.sheet,.modal{backdrop-filter:none !important;}
  .tabbar{background:var(--ink) !important;}
}
/* High contrast: solid surfaces with a defined border. */
@media (prefers-contrast:more){
  .tabbar{background:var(--ink) !important; border-top-color:var(--text) !important;}
  .mapfab{box-shadow:none; outline:2px solid var(--text); outline-offset:2px;}
}
@media (prefers-reduced-motion:reduce){
  .mapfab{transition:none}
  .mapfab:active{transform:none}
}

/* ==========================================================================
   Apple pass - motion + elevation tokens, five-up tab bar, map FAB.
   ========================================================================== */
:root{
  /* Apple reasons about motion as damping + response rather than duration +
     bezier. --ease-out is the critically damped default (no overshoot) and
     covers almost everything. --ease-spring has a small overshoot and is used
     ONLY where a gesture carried momentum into the animation. Exits run about
     65% of the enter duration, so dismissing feels quicker than summoning. */
  --ease-out:cubic-bezier(.23,1,.32,1);
  --ease-inout:cubic-bezier(.77,0,.175,1);
  --ease-spring:cubic-bezier(.34,1.4,.64,1);
  --dur-press:.12s;
  --dur-in:.28s;
  --dur-out:.18s;
  /* One four-step elevation scale, replacing ten ad-hoc box-shadows. */
  --e1:0 1px 2px rgba(0,0,0,.30);
  --e2:0 4px 14px rgba(0,0,0,.36);
  --e3:0 14px 36px rgba(0,0,0,.44);
  --e4:0 28px 68px rgba(0,0,0,.52);
}

/* Five labelled destinations, each a full-width target with a readable
   label. The six-up bar had to drop to 1px padding and a 9.5px label
   (9px under 340px) to fit -- below both the legible floor and the 44pt
   target. */
.tabbar-5 .tab{padding-left:2px;padding-right:2px}
.tabbar-5 .tab .lb{font-size:11px;letter-spacing:.01em}

/* Map is the app's primary verb, not a sixth destination, so it rides above
   the bar as a floating action button at the trailing edge -- thumb-reachable
   and clear of every tab. Icon-only by design; the name is on aria-label.
   Press feedback is transform-only, so nothing around it reflows. */
.mapfab{
  position:fixed; right:16px; bottom:calc(var(--sab) + 76px);
  width:56px; height:56px; padding:0; border:none; border-radius:999px;
  background:var(--red); color:#fff; cursor:pointer;
  display:grid; place-items:center; line-height:0;
  box-shadow:var(--e3), 0 0 0 4px var(--ink);
  transition:transform var(--dur-press) var(--ease-out),
             box-shadow var(--dur-in) var(--ease-out);
  z-index:21;
}
.mapfab:active{transform:scale(.94)}
.mapfab.on{box-shadow:var(--e3), 0 0 0 4px var(--ink), 0 0 0 6px var(--red)}
.mapfab .puck{display:grid; place-items:center; line-height:0}

/* One focus ring for the whole app. Keyboard-only, never removed, and
   offset so it reads against both flat cards and photography. */
:where(button,a,[role="button"],input,select,textarea,[tabindex]):focus-visible{
  outline:2px solid var(--red);
  outline-offset:2px;
}
/* Kill the legacy 300ms tap delay on everything interactive. */
:where(button,a,[role="button"],.chip,.tab,.mapfab){touch-action:manipulation}

/* Reduced transparency: frost the glass rather than blur it, so translucent
   chrome stays legible for people who asked for less of it. */
@media (prefers-reduced-transparency:reduce){
  .tabbar,.topbar,.sheet,.modal{backdrop-filter:none !important}
  .tabbar{background:var(--ink) !important}
}
/* High contrast: solid surfaces with a defined border. */
@media (prefers-contrast:more){
  .tabbar{background:var(--ink) !important;border-top-color:var(--text) !important}
  .mapfab{box-shadow:none;outline:2px solid var(--text);outline-offset:2px}
}
@media (prefers-reduced-motion:reduce){
  .mapfab{transition:none}
  .mapfab:active{transform:none}
}

/* ==========================================================================
   Apple pass 2 - feel. Press response for the one tappable surface that had
   none, matching the scale every other card already uses.
   ========================================================================== */
.event-card{cursor:pointer}
.event-card:active{transform:scale(.98)}
@media (prefers-reduced-motion:reduce){
  .event-card:active{transform:none}
}

/* ==== MySpace pass: profile backdrops + social motion ==== */
.bg-night{background:linear-gradient(155deg,#101a38,#1c2f5e)}
.pc-bg-night{background:linear-gradient(155deg,#101a38,#1c2f5e) !important}
.bg-sunset{background:linear-gradient(155deg,#3a1024,#7a2c1f)}
.pc-bg-sunset{background:linear-gradient(155deg,#3a1024,#7a2c1f) !important}
.bg-neon{background:linear-gradient(155deg,#14032b,#3b0a5e)}
.pc-bg-neon{background:linear-gradient(155deg,#14032b,#3b0a5e) !important}
.bg-ocean{background:linear-gradient(155deg,#04222e,#0a4a5c)}
.pc-bg-ocean{background:linear-gradient(155deg,#04222e,#0a4a5c) !important}
.bg-velvet{background:linear-gradient(155deg,#260a1e,#571434)}
.pc-bg-velvet{background:linear-gradient(155deg,#260a1e,#571434) !important}
.bg-gold{background:linear-gradient(155deg,#2b1d04,#6b4a0c)}
.pc-bg-gold{background:linear-gradient(155deg,#2b1d04,#6b4a0c) !important}
.bg-forest{background:linear-gradient(155deg,#06231a,#0e4a34)}
.pc-bg-forest{background:linear-gradient(155deg,#06231a,#0e4a34) !important}
.bg-mono{background:linear-gradient(155deg,#15161a,#26282e)}
.pc-bg-mono{background:linear-gradient(155deg,#15161a,#26282e) !important}
.pe-bgs{display:flex;gap:8px;flex-wrap:wrap}.pe-bg{width:44px;height:44px;border-radius:12px;border:2px solid rgba(255,255,255,.14);cursor:pointer;padding:0;touch-action:manipulation;transition:transform var(--dur-press,.12s) var(--ease-out,ease-out),border-color .18s ease}.pe-bg:active{transform:scale(.92)}.pe-bg.on{border-color:#fff;box-shadow:0 0 0 2px rgba(255,255,255,.25)}
@keyframes dmsocIn{from{opacity:0;transform:translateY(8px)}}
.dmsoc-row{animation:dmsocIn .3s var(--ease-out,ease-out) backwards}
.dmsoc-row:nth-child(1){animation-delay:0ms}
.dmsoc-row:nth-child(2){animation-delay:30ms}
.dmsoc-row:nth-child(3){animation-delay:60ms}
.dmsoc-row:nth-child(4){animation-delay:90ms}
.dmsoc-row:nth-child(5){animation-delay:120ms}
.dmsoc-row:nth-child(6){animation-delay:150ms}
.dmsoc-row:nth-child(7){animation-delay:180ms}
.dmsoc-row:nth-child(8){animation-delay:210ms}
@media (prefers-reduced-motion:reduce){.dmsoc-row{animation:none}.pe-bg{transition:none}.pe-bg:active{transform:none}}

/* ── venue page story ── */
.v-tagline{font-style:italic;color:var(--text);opacity:.92;font-size:14.5px;margin-top:6px}
.v-vibes{display:flex;flex-wrap:wrap;gap:7px;margin-top:9px}
.v-chip{font-size:12px;font-weight:700;padding:5px 11px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12)}
.v-sips{margin-top:11px;padding:11px 13px;border-radius:14px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.09)}
.v-sips-k{font-size:10.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--muted,#94a3b8);margin-bottom:6px}
.v-sip{font-size:13.5px;padding:3px 0}

/* ── calmer home: promo banners read as rows, not hero cards ── */
.homesafe{padding:9px 12px;gap:10px}
.homesafe .t1{font-size:13.5px}
.homesafe .t2{font-size:10.5px}
.wheel-teaser{padding:9px 12px;gap:10px}
.wheel-teaser .wt-t{font-size:13.5px}
.wheel-teaser .wt-s{font-size:10.5px}

/* ══ .lpin-fill-fix — smaller map tiles, logos clipped to the tile ══ */
.lpin{width:58px;height:58px;border-radius:17px}
.lpin .mlogo{padding:0;border-radius:inherit}
.lpin .lname{max-width:104px}
/* Tonight near you: a real logo fills the art edge-to-edge;
   monogram-only venues keep their small branded tile */
.tcard .art .mono:has(.mlogo){width:100%;height:100%;border-radius:0;border:0}
.tcard .art .mono:has(.mlogo) .mk-i,.tcard .art .mono:has(.mlogo) .mk-wm{visibility:hidden}

/* ════ Tonight planner ════ */
.plan-entry{display:flex;align-items:center;gap:10px;margin:10px var(--gut) 0;
  width:calc(100% - 2*var(--gut));padding:12px 14px;border-radius:999px;
  border:1px solid var(--line);background:var(--surface);color:var(--text);
  font-family:inherit;font-size:13.5px;font-weight:700;cursor:pointer;
  transition:transform .16s cubic-bezier(.23,1,.32,1)}
.plan-entry:active{transform:scale(.98)}
.pe-ic{color:var(--red);display:grid;place-items:center}
.pe-t{flex:1;text-align:left;opacity:.85}
.pe-mic{opacity:.55;display:grid;place-items:center}
.ps-scrim{position:absolute;inset:0;background:rgba(4,6,10,.6);z-index:940}
.plansheet{position:absolute;left:0;right:0;bottom:0;z-index:950;
  background:#14161f;border:1px solid rgba(255,255,255,.09);border-bottom:0;
  border-radius:22px 22px 0 0;padding:14px var(--gut) calc(18px + env(safe-area-inset-bottom));
  max-height:80%;overflow-y:auto;animation:psUp .3s cubic-bezier(.32,.72,0,1)}
@keyframes psUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
.ps-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.ps-ti{display:flex;align-items:center;gap:7px;font-weight:900;font-size:15px}
.ps-ti .ico{color:var(--red)}
.ps-x{width:32px;height:32px;border-radius:50%;border:1px solid var(--line);
  background:rgba(255,255,255,.05);color:var(--text);display:grid;place-items:center;cursor:pointer}
.ps-in{display:flex;gap:8px;align-items:center}
.ps-in input{flex:1;height:44px;border-radius:12px;border:1px solid var(--line);
  background:rgba(255,255,255,.05);color:var(--text);font-family:inherit;font-size:14px;padding:0 13px}
.ps-in input::placeholder{color:rgba(255,255,255,.35)}
.ps-mic{width:44px;height:44px;border-radius:12px;border:1px solid var(--line);
  background:rgba(255,255,255,.05);color:var(--text);display:grid;place-items:center;cursor:pointer;
  transition:color .15s ease,box-shadow .15s ease}
.ps-mic.rec{color:var(--red);box-shadow:0 0 0 2px rgba(255,39,64,.5);animation:micPulse 1.1s ease infinite}
@keyframes micPulse{50%{box-shadow:0 0 0 6px rgba(255,39,64,.15)}}
.ps-go{width:100%;margin-top:9px;height:44px;border:0;border-radius:12px;background:var(--red);
  color:#fff;font-family:inherit;font-weight:900;font-size:14px;letter-spacing:.02em;cursor:pointer;
  transition:transform .14s cubic-bezier(.23,1,.32,1)}
.ps-go:active{transform:scale(.98)}
.ps-chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:10px}
.ps-hint{margin-top:14px;font-size:12.5px;line-height:1.55;color:rgba(255,255,255,.55)}
.ps-res{margin-top:13px;display:flex;flex-direction:column;gap:9px}
.ps-stop{position:relative;border:1px solid var(--line);border-radius:14px;padding:11px 12px;
  background:rgba(255,255,255,.04);cursor:pointer;transition:transform .14s cubic-bezier(.23,1,.32,1)}
.ps-stop:active{transform:scale(.985)}
.ps-when{font-size:10px;font-weight:900;letter-spacing:.14em;color:var(--red);margin-bottom:3px}
.ps-nm{font-weight:900;font-size:15px}
.ps-why{margin-top:2px;font-size:12px;color:rgba(255,255,255,.6);line-height:1.45}
.ps-map{position:absolute;top:10px;right:10px;display:flex;align-items:center;gap:5px;
  border:1px solid var(--line);background:rgba(255,255,255,.06);color:var(--text);
  border-radius:999px;padding:5px 10px;font-family:inherit;font-size:11.5px;font-weight:800;cursor:pointer}
.ps-note{font-size:10.5px;color:rgba(255,255,255,.4);margin-top:3px}
@media (prefers-reduced-motion:reduce){
  .plansheet{animation:psFade .2s ease}
  @keyframes psFade{from{opacity:0}to{opacity:1}}
  .ps-mic.rec{animation:none}
  .plan-entry:active,.ps-go:active,.ps-stop:active{transform:none}
}

/* the planner pill: neutralize the global span min-height */
.plan-entry span{min-height:0}
.plan-entry .pe-t{line-height:1.3}

/* stop mobile pull-to-refresh: the app scrolls inside .body, so a downward
   swipe at the top read as a page-refresh gesture. Contain it. */
html,body{overscroll-behavior-y:none}
.body{overscroll-behavior:contain}
.map-viewport,.leaflet-container{overscroll-behavior:contain}

/* ══ chat: people rows + DM inbox row ══ */
.pr-av{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
  font-weight:900;font-size:15px;color:#fff;flex-shrink:0;text-transform:uppercase}
.pr-av .ico{color:#fff}
.hub-person,.hub-dmrow{gap:11px}
.hub-person:active,.hub-dmrow:active{transform:scale(.985)}
@media (prefers-reduced-motion:reduce){.hub-person:active,.hub-dmrow:active{transform:none}}

.ep-perkhint{font-style:normal;font-weight:600;font-size:10.5px;color:var(--red);margin-left:6px;opacity:.85}
#ep-bday{color-scheme:dark}

/* ══ polish v8.8 — spacing, tactility, numerics ══ */
:root{--ezo:cubic-bezier(.16,1,.3,1)}
/* 1. content clears tabbar + map puck on every tab */
.body{padding-bottom:calc(122px + env(safe-area-inset-bottom,0px))}
/* 2. steady digits */
.hh-cd,.tbadge,.hr-t,.hh-hero,.greet{font-variant-numeric:tabular-nums}
/* 3. one press language everywhere */
.l-card,.event-card,.tcard,.hub-room,.chip,.cat-chips>button,.filter-pills>button,
.hh-hero,.plan-entry,.social-row,.wheel-teaser,.dmsoc-inboxbtn,.plansheet button{
  transition:transform .16s var(--ezo)}
.l-card:active,.event-card:active,.tcard:active,.hub-room:active,.chip:active,
.cat-chips>button:active,.filter-pills>button:active,.hh-hero:active,
.plan-entry:active,.social-row:active,.wheel-teaser:active,
.dmsoc-inboxbtn:active,.plansheet button:active{transform:scale(.98)}
.mapfab{transition:transform .16s var(--ezo)}
.mapfab:active{transform:scale(.94)}
/* 4. horizontal rows: snap + "more this way" edge fade */
.scroll-x{scroll-snap-type:x proximity;padding-right:28px;
  -webkit-mask-image:linear-gradient(90deg,#000 94%,transparent);
  mask-image:linear-gradient(90deg,#000 94%,transparent)}
.scroll-x>*{scroll-snap-align:start}
/* 5. focus visibility (keyboard / a11y) */
:where(button,a,input,select):focus-visible{outline:2px solid rgba(255,89,100,.7);outline-offset:2px}
.plansheet input:focus{outline:none;border-color:rgba(255,39,64,.55);
  box-shadow:0 0 0 3px rgba(255,39,64,.16)}
/* 6. tab badge separates from its icon */
.tbadge{box-shadow:0 0 0 2px #0b0e14}
/* 7. profile: quiet the plumbing */
.dmsoc-diag{opacity:.45;font-size:10.5px}
.acct-del{opacity:.65;font-size:12.5px;font-weight:600}
.acct-del:active{opacity:1}
/* 8. reduced motion honors the OS */
@media (prefers-reduced-motion:reduce){
  .l-card,.event-card,.tcard,.hub-room,.chip,.cat-chips>button,.filter-pills>button,
  .hh-hero,.plan-entry,.social-row,.wheel-teaser,.dmsoc-inboxbtn,.plansheet button,.mapfab{transition:none}
  .l-card:active,.event-card:active,.tcard:active,.hub-room:active,.chip:active,
  .cat-chips>button:active,.filter-pills>button:active,.hh-hero:active,
  .plan-entry:active,.social-row:active,.wheel-teaser:active,
  .dmsoc-inboxbtn:active,.plansheet button:active,.mapfab:active{transform:none}
  .scroll-x{scroll-snap-type:none}
}

/* ══ extras v8.9 — deals sort row + back-to-top pill ══ */
.sortrow{display:flex;align-items:center;gap:8px;padding:2px 16px 10px;overflow-x:auto;scrollbar-width:none}
.sortrow::-webkit-scrollbar{display:none}
.sr-l{font-size:10.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#98a0ae;flex:none}
.sr-c{flex:none;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);color:#cfd5df;
  font-size:12.5px;font-weight:600;font-family:inherit;line-height:1;padding:9px 13px;border-radius:999px;
  transition:transform .16s var(--ezo),background .16s,border-color .16s,color .16s}
.sr-c.on{background:rgba(255,39,64,.16);border-color:rgba(255,39,64,.6);color:#ff9aa2}
.sr-c:active{transform:scale(.96)}
.totop{position:fixed;left:50%;transform:translate(-50%,14px);bottom:calc(96px + env(safe-area-inset-bottom,0px));
  z-index:930;width:40px;height:40px;border-radius:50%;border:1px solid rgba(255,255,255,.14);
  background:rgba(20,24,36,.92);color:#eef1f6;font-size:17px;line-height:1;
  opacity:0;pointer-events:none;transition:opacity .2s var(--ezo),transform .2s var(--ezo);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.totop.show{opacity:1;pointer-events:auto;transform:translate(-50%,0)}
@media (prefers-reduced-motion:reduce){.sr-c,.totop{transition:none}}

/* ══ venue hero v9.0 — venue's own imagery behind the sheet banner ══ */
.sheet-art{position:relative;overflow:hidden}
.vhero{position:absolute;inset:0;z-index:0;background-size:cover;background-position:center;
  opacity:0;transition:opacity .55s var(--ezo)}
.vhero::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(11,14,20,.18) 0%,rgba(11,14,20,.44) 55%,rgba(13,16,24,.9) 100%)}
.vhero.in{opacity:1}
.vhero.vh-fit{background-size:auto 54%;background-repeat:no-repeat;background-position:center 42%}
.sheet-art .mk-stripe{position:relative;z-index:1}
.sheet-art .shr,.sheet-art .fav{z-index:2}
.badge.vweb{display:inline-flex;align-items:center;color:#ff9aa2;border-color:rgba(255,89,100,.45);
  text-decoration:none;transition:transform .16s var(--ezo)}
.badge.vweb:active{transform:scale(.96)}
@media (prefers-reduced-motion:reduce){.vhero{transition:none}.badge.vweb{transition:none}}

/* ══ events rail + sheet v9.1 ══ */
.fev-rail{padding-top:4px}
.fev-row{display:flex;gap:12px;padding:2px 16px 14px;overflow-x:auto}
.fev-card{position:relative;flex:none;width:168px;height:200px;border-radius:18px;overflow:hidden;
  border:1px solid rgba(255,255,255,.09);background:linear-gradient(160deg,#232a3d,#141824);
  background-size:cover;background-position:center;display:flex;flex-direction:column;
  justify-content:flex-end;align-items:flex-start;padding:12px;text-align:left;
  transition:transform .16s var(--ezo);scroll-snap-align:start}
.fev-card:active{transform:scale(.97)}
.fev-card.img::before{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(11,14,20,.05) 30%,rgba(11,14,20,.86) 100%)}
.fev-card>*{position:relative}
.fev-chip{position:absolute;top:10px;left:10px;font-size:10.5px;font-weight:800;letter-spacing:.08em;
  color:#ffd479;background:rgba(11,14,20,.72);border:1px solid rgba(255,212,121,.35);
  padding:5px 9px;border-radius:999px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.fev-name{font-weight:800;font-size:14.5px;line-height:1.25;color:#fff;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.fev-where{font-size:11.5px;color:#aeb6c4;margin-top:3px}
.fev-scrim{position:fixed;inset:0;z-index:944;background:rgba(5,7,12,.6);opacity:0;transition:opacity .25s var(--ezo)}
.fev-scrim.in{opacity:1}
.fev-sheet{position:fixed;left:0;right:0;bottom:0;z-index:946;max-height:82%;overflow-y:auto;
  background:#121622;border-radius:22px 22px 0 0;border:1px solid rgba(255,255,255,.08);border-bottom:0;
  transform:translateY(24px);opacity:0;transition:transform .3s cubic-bezier(.32,.72,0,1),opacity .3s var(--ezo)}
.fev-sheet.in{transform:translateY(0);opacity:1}
.fev-hero{position:relative;height:190px;background:linear-gradient(160deg,#2a3350,#151a28);
  background-size:cover;background-position:center}
.fev-hero.img::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(18,22,34,0) 40%,#121622 100%)}
.fev-x{position:absolute;top:12px;right:12px;z-index:2;width:34px;height:34px;border-radius:50%;
  border:1px solid rgba(255,255,255,.16);background:rgba(11,14,20,.66);color:#fff;font-size:14px}
.fev-body{padding:16px 18px calc(26px + env(safe-area-inset-bottom,0px))}
.fev-date{font-size:11px;font-weight:800;letter-spacing:.12em;color:#ffd479}
.fev-t{margin:6px 0 2px;font-size:23px;line-height:1.15}
.fev-v{color:#98a0ae;font-size:13.5px;margin-bottom:10px}
.fev-d{color:#cfd5df;font-size:14.5px;line-height:1.55;margin:0 0 16px}
.fev-cta{display:block;text-align:center;background:var(--red,#ff2740);color:#fff;font-weight:800;
  padding:14px;border-radius:14px;text-decoration:none;transition:transform .16s var(--ezo)}
.fev-cta:active{transform:scale(.98)}
@media (prefers-reduced-motion:reduce){.fev-card,.fev-scrim,.fev-sheet,.fev-cta{transition:none}}

/* ══ venue pages v9.2 — real photos, branded fallbacks, socials ══ */
/* any venue with a hero (photo OR gradient) drops the faded grayscale watermark */
.sheet-art:has(.vhero) .mk-wm{opacity:.06;filter:none}
.vhero.vh-grad::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(11,14,20,.12) 0%,rgba(11,14,20,.5) 60%,rgba(13,16,24,.92) 100%)}
.vlinks{display:inline-flex;align-items:center;gap:7px;flex-wrap:wrap}
.vsoc{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;
  border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.05);color:#cfd5df;
  transition:transform .16s var(--ezo),color .16s,border-color .16s}
.vsoc svg{width:16px;height:16px}
.vsoc:active{transform:scale(.9)}
.vsoc-ig:hover{color:#e75f8f;border-color:rgba(231,95,143,.5)}
.vsoc-fb:hover{color:#5b8def;border-color:rgba(91,141,239,.5)}
.vsoc-tt:hover{color:#eef1f6;border-color:rgba(255,255,255,.4)}
.vsoc-x:hover{color:#eef1f6;border-color:rgba(255,255,255,.4)}
.fev-card.grad::before,.fev-hero.grad::after{content:"";position:absolute;inset:0}
.fev-card.grad::before{background:linear-gradient(180deg,rgba(11,14,20,.05) 30%,rgba(11,14,20,.82) 100%)}
@media (prefers-reduced-motion:reduce){.vsoc{transition:none}}

/* ══ ghost-member avatars v9.3 ══ */
.dm-hasav{color:transparent !important;text-shadow:none !important;background-color:transparent !important;overflow:hidden}
.dm-hasav>*{visibility:hidden}

/* ══ tile hero wash v9.4 ══ */
.tile-wash{position:absolute;inset:0;z-index:0;pointer-events:none;border-radius:inherit;
  background-size:cover;background-position:center;opacity:.16;
  -webkit-mask-image:linear-gradient(180deg,#000,rgba(0,0,0,.35));mask-image:linear-gradient(180deg,#000,rgba(0,0,0,.35))}
.l-card>*:not(.tile-wash),.tcard>*:not(.tile-wash){position:relative;z-index:1}

/* ══ v9.5 · one events section, hero event cards, brand partners, audit fixes ══ */
/* native event cards become hero cards when they carry a cover image */
.event-card:has(.ev-cover){position:relative;flex-wrap:wrap;align-items:stretch;gap:0;padding:0;overflow:hidden;background:var(--surface)}
.event-card:has(.ev-cover) .ev-cover{order:-1;flex:0 0 100%;width:100%;height:164px;border-radius:0;border:0;border-bottom:1px solid var(--line);object-fit:cover;background:#141824}
.event-card:has(.ev-cover)::before{content:"";position:absolute;left:0;right:0;top:96px;height:70px;background:linear-gradient(180deg,rgba(11,14,20,0),rgba(11,14,20,.55));pointer-events:none}
.event-card:has(.ev-cover) .date{position:absolute;top:10px;left:10px;margin:0;width:50px;height:54px;
  background:rgba(11,14,20,.78);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-color:rgba(255,255,255,.2);box-shadow:0 4px 14px rgba(0,0,0,.4)}
.event-card:has(.ev-cover) .ev-cover+.date{margin-left:0;width:50px}
.event-card:has(.ev-cover)>div:not(.date){flex:1 1 auto;min-width:0;padding:12px 44px 14px 14px}
.event-card:has(.ev-cover) .nm{font-size:16px;white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.event-card:has(.ev-cover) .in{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.event-card:has(.ev-cover) .ev-go,.event-card:has(.ev-cover) .ev-rep{position:absolute;right:14px;bottom:16px;margin:0;opacity:.7}
.event-card:has(.ev-cover) .ev-rep{right:40px}
/* push callout sits under the header instead of on top of it */
.push{top:calc(var(--sat,0px) + 74px) !important}
/* sort row matches the filter pills above it */
.sortrow .sr-l{text-transform:none;letter-spacing:0;font-size:13px;color:var(--muted)}
.sortrow .sr-c{height:38px;padding:0 14px;font-size:13.5px}
/* touch targets */
.vsoc{width:40px;height:40px}
.fev-x{width:40px;height:40px}
.fev-where{font-size:13px}
.fev-date{font-size:12px}
/* rich event sheet additions */
.fev-brand{display:flex;align-items:center;gap:10px;margin:2px 0 12px}
.fev-blogo{height:30px;width:auto;max-width:120px;padding:5px 9px;border-radius:9px;background:#fff;object-fit:contain}
.fev-blogo.dark{background:#0b0e14;border:1px solid rgba(255,255,255,.14)}
.fev-bt{font-size:12.5px;font-weight:700;color:var(--muted)}
.fev-venue{display:block;width:100%;margin:0 0 10px;padding:13px;border-radius:14px;border:1px solid var(--line-2);background:var(--surface-2);color:var(--text);font-weight:800;font-size:14px;text-align:center}
/* ── brand partner card (Home sponsor slot) ── */
.sponsor.bp{padding:0;text-align:left;aspect-ratio:16/10;min-height:220px;border-radius:20px;border-color:rgba(255,255,255,.1);box-shadow:var(--e3)}
.sponsor.bp::after{display:none}
.bp-img{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transform:scale(1.04);transition:opacity .6s var(--ezo,ease),transform 1.2s var(--ezo,ease)}
.bp-img.in{opacity:1;transform:scale(1)}
.bp-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,8,15,.12) 18%,rgba(6,8,15,.5) 55%,rgba(6,8,15,.9) 100%)}
.bp-top{position:absolute;top:12px;left:12px;right:12px;display:flex;justify-content:space-between;align-items:center;gap:8px}
.bp-k{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#fff;background:rgba(11,14,20,.62);
  border:1px solid rgba(255,255,255,.18);padding:6px 10px;border-radius:999px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.bp-logo{height:36px;width:auto;max-width:130px;padding:6px 10px;border-radius:10px;background:#fff;object-fit:contain;box-shadow:0 4px 14px rgba(0,0,0,.35)}
.bp-logo.dark{background:#0b0e14;border:1px solid rgba(255,255,255,.14)}
.bp-body{position:absolute;left:14px;right:14px;bottom:14px}
.bp-t{font-family:var(--display);font-weight:900;font-size:22px;letter-spacing:-.02em;line-height:1.1;color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.5)}
.bp-s{font-size:13.5px;line-height:1.4;color:rgba(255,255,255,.86);margin-top:5px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.bp-cta{display:inline-flex;align-items:center;margin-top:10px;padding:9px 13px;border-radius:999px;background:var(--red);color:#fff;font-weight:800;font-size:13px;box-shadow:0 6px 18px rgba(255,39,64,.35)}
/* ── Brands page ── */
.bp-page{padding:0}
.bp-lead{margin:-2px var(--gut) 12px;font-size:14px;line-height:1.5;color:var(--muted)}
.bpc{margin:0 0 18px}
.bpc .sponsor.bp{margin-bottom:0;border-radius:20px 20px 0 0;aspect-ratio:16/9;min-height:190px}
.bpc-rows{margin:0 var(--gut);background:var(--surface);border:1px solid var(--line-2);border-top:0}
.bpr{display:flex;gap:12px;align-items:flex-start;width:100%;padding:12px 14px;border:0;border-top:1px solid var(--line);background:none;color:var(--text);text-align:left;font:inherit;cursor:pointer}
.bpr:first-child{border-top:0}
.bpr:active{background:rgba(255,255,255,.04)}
.bpr-d{flex:0 0 46px;height:50px;border-radius:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:rgba(255,255,255,.05);border:1px solid var(--line-2)}
.bpr-d b{font-family:var(--display);font-weight:900;font-size:15px;line-height:1}
.bpr-d i{font-style:normal;font-size:10px;font-weight:800;letter-spacing:.1em;color:var(--muted);margin-top:3px}
.bpr-m{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px}
.bpr-m b{font-weight:800;font-size:15px}
.bpr-m span{font-size:13px;color:var(--muted)}
.bpr-m small{font-size:12.5px;line-height:1.4;color:rgba(255,255,255,.7);margin-top:2px}
.bpr-t{flex:none;font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:5px 8px;border-radius:999px;margin-top:2px;
  background:rgba(255,255,255,.06);border:1px solid var(--line-2);color:var(--muted)}
.bpr-t.tasting{color:#ffd479;border-color:rgba(255,212,121,.35);background:rgba(255,212,121,.1)}
.bpr-t.event{color:#b79bff;border-color:rgba(183,155,255,.35);background:rgba(183,155,255,.1)}
.bpc-foot{margin:0 var(--gut);padding:10px 14px;display:flex;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--line-2);border-top:0;border-radius:0 0 20px 20px}
.bpc-link{font-size:13px;font-weight:800;color:var(--text);text-decoration:none;margin-right:auto}
.bp-note{margin:4px var(--gut) 18px;font-size:12px;line-height:1.5;color:var(--faint,#7c8aa8)}
@media (prefers-reduced-motion:reduce){.bp-img{transition:none;transform:none}}

/* ══ v9.6 · hotels & resorts ══ */
.hot-rail{margin:6px 0 4px}
.hot-rail .sec{display:flex;align-items:center;justify-content:space-between}
.sec-link{background:none;border:0;color:var(--red);font:inherit;font-weight:800;font-size:13px;padding:6px 0;cursor:pointer}
.hot-row{display:flex;gap:12px;padding:4px var(--gut) 14px;overflow-x:auto;scroll-snap-type:x mandatory}
.hot-card{position:relative;flex:none;width:236px;border:1px solid var(--line-2);border-radius:18px;overflow:hidden;background:var(--surface);
  padding:0;text-align:left;color:var(--text);font:inherit;cursor:pointer;scroll-snap-align:start;box-shadow:var(--e2);
  transition:transform .16s var(--ezo,ease)}
.hot-card:active{transform:scale(.98)}
.hot-img{position:relative;height:138px;background:#141824;background-size:cover;background-position:center;opacity:.001;transition:opacity .5s var(--ezo,ease)}
.hot-img.in{opacity:1}
.hot-img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,8,15,.05) 40%,rgba(6,8,15,.55) 100%)}
.hot-logo{position:absolute;left:10px;bottom:10px;z-index:1;height:30px;width:auto;max-width:120px;padding:5px 9px;border-radius:9px;background:#fff;object-fit:contain;box-shadow:0 4px 12px rgba(0,0,0,.35)}
.hot-logo.dark{background:rgba(11,14,20,.85);border:1px solid rgba(255,255,255,.14)}
.hot-cap{display:flex;flex-direction:column;gap:3px;padding:11px 13px 13px}
.hot-cap b{font-weight:800;font-size:15px;line-height:1.2;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.hot-cap span{font-size:12.5px;color:var(--muted)}
/* sheet */
.hot-sheet .fev-hero{height:220px}
.hot-logo.hero{left:16px;bottom:16px;height:40px;max-width:160px}
.hot-acts{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:4px 0 18px}
.hot-act{display:flex;flex-direction:column;gap:3px;padding:13px 14px;border-radius:14px;border:1px solid var(--line-2);background:var(--surface-2,#192032);color:var(--text);text-decoration:none}
.hot-act b{font-size:14.5px;font-weight:800}
.hot-act span{font-size:12px;color:var(--muted);line-height:1.35}
.hot-act.prime{background:linear-gradient(135deg,var(--red),var(--red-deep,#E90C15));border-color:transparent;color:#fff;box-shadow:0 8px 22px rgba(255,39,64,.3)}
.hot-act.prime span{color:rgba(255,255,255,.85)}
.hot-h3{font-family:var(--display);font-weight:800;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:0 0 8px}
.hot-venues{display:flex;flex-direction:column;border:1px solid var(--line-2);border-radius:14px;overflow:hidden;margin:0 0 14px;background:var(--surface)}
.hot-venue{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 14px;border-top:1px solid var(--line);color:var(--text);text-decoration:none}
.hot-venue:first-child{border-top:0}
.hot-venue b{font-weight:800;font-size:14.5px}
.hot-venue span{font-size:12px;color:var(--muted);text-align:right;flex:none}
.hot-links{display:flex;align-items:center;gap:10px;margin:0 0 14px}
.hot-note{font-size:12.5px;line-height:1.5;color:var(--muted);margin:0;padding:12px 14px;border-radius:12px;background:rgba(255,39,64,.06);border:1px dashed rgba(255,39,64,.35)}
/* all-hotels sheet */
.hot-all{padding:0}
.hot-allhd{position:relative;padding:22px 22px 8px}
.hot-allhd .fev-x{top:14px;right:14px}
.hot-allhd .fev-t{margin:0 44px 6px 0}
.hot-allhd .fev-d{margin:0}
.hot-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:8px 18px 24px}
.hot-card.big{width:auto}
@media (max-width:430px){.hot-grid{grid-template-columns:1fr}}

/* ══ v9.7 · polish pass 2 ══ */
/* push callout → bottom toast on a solid surface; never over a sheet */
.push{top:auto !important;bottom:calc(var(--sab,0px) + 86px) !important;left:12px !important;right:12px !important;width:auto !important;
  background:#151a26 !important;border:1px solid rgba(255,255,255,.14) !important;box-shadow:0 16px 44px rgba(0,0,0,.55) !important;
  backdrop-filter:none !important;-webkit-backdrop-filter:none !important}
body:has(.overlay) .push,body:has(.fev-sheet) .push,body:has(.qrmodal) .push,body:has(.chat-sheet) .push{display:none !important}
/* HH LIVE already means open — one status chip, not two */
:has(> .open-tag.hh) > .open-tag.o{display:none}
/* Home "Tonight near you": the photo is the card */
.tcard .tile-wash{opacity:.55;-webkit-mask-image:linear-gradient(180deg,#000 38%,rgba(0,0,0,.12) 100%);mask-image:linear-gradient(180deg,#000 38%,rgba(0,0,0,.12) 100%)}
.tcard .art{overflow:hidden}
/* room for the map button at the end of every list */
.body{padding-bottom:calc(150px + env(safe-area-inset-bottom))}
/* account: destructive action last and quiet */
.acct-del{display:block;width:100%;margin-top:22px;opacity:.55;font-size:13px;text-align:center}

/* v9.9 · Home rail upcoming cards (native layout) */
.scroll-x .event-card.dm-up{align-items:center;min-height:86px}
.scroll-x .event-card.dm-up .in{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* v10.0 · map tab is the whole screen */
.body:has(.leaflet-container){padding-bottom:0 !important}
.mapfab.on{display:none !important}

/* v10.1 · washes as async-decoded images */
.tile-wash{overflow:hidden}
.tile-wash > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}

/* v10.2 · polish 5 */
.hbadge[hidden],.dmsoc-pbadge[hidden],.hbtn .bub[hidden]{display:none!important}
.dmsoc-diag{display:none!important}
.locbar{gap:7px;padding:0 13px}
.locbar .city{overflow:visible;flex-shrink:0;text-overflow:clip}
.locbar .city .fb-live{margin-left:6px!important;font-size:8px!important;padding:1px 5px!important;line-height:1.3;flex-shrink:0}
.tcard .tile-wash{opacity:.38!important;-webkit-mask-image:linear-gradient(180deg,#000 30%,rgba(0,0,0,.06) 100%)!important;mask-image:linear-gradient(180deg,#000 30%,rgba(0,0,0,.06) 100%)!important}
.mp-stats{gap:6px}
.mp-st span{white-space:nowrap;font-size:9.5px;letter-spacing:.06em}
.acct-card{row-gap:0}
.acct-del{margin-top:8px}
.push{transition:opacity .25s ease,transform .25s ease}

/* ══ v10.3 · readability + calmer accents ══ */
/* nothing under 11px: these were 8.5–10.5px and unreadable at arm's length */
.pcount{font-size:10.5px!important;letter-spacing:.02em}
.dist,.lname,.fev-chip,.fev-bchip,.vc-typing,.vc-msg.sys span{font-size:11.5px}
.mp-st span{font-size:10px}
/* a 3px colored rail on a rounded card is a tell — keep the signal, lose the slab */
.tsp{border-left-width:1px!important;border-left-color:var(--line)!important;
  background:linear-gradient(90deg,rgba(255,176,32,.10),rgba(255,176,32,0) 34%),var(--surface)}
.plan-strip{border-left-width:1px!important;border-left-color:var(--line)!important;
  background:linear-gradient(90deg,rgba(155,107,255,.12),rgba(155,107,255,0) 34%),var(--surface)}
.pubcard{border-left-width:1px!important;border-left-color:var(--line-2)!important;
  background:linear-gradient(90deg,rgba(185,28,28,.14),rgba(185,28,28,0) 30%),var(--surface)}
/* browser surfaces carry the design too */
::selection{background:rgba(255,39,64,.3);color:#fff}
:focus-visible{outline:2px solid var(--red);outline-offset:2px;border-radius:6px}
.body::-webkit-scrollbar,.scroll-x::-webkit-scrollbar{width:8px;height:8px}
.body::-webkit-scrollbar-thumb,.scroll-x::-webkit-scrollbar-thumb{background:rgba(255,255,255,.14);border-radius:99px}
.body::-webkit-scrollbar-track,.scroll-x::-webkit-scrollbar-track{background:transparent}
.dist,.pcount,.pts-n,.k-num{font-variant-numeric:tabular-nums}
/* very small phones (SE / 320–360): keep the hero and rails intact */
@media (max-width:360px){
  :root{--gut:13px}
  .greet{font-size:23px}
  .tcard{width:74vw}
  .hh-v{font-size:21px}
  .tabbar .tb i{font-size:9.5px}
}

/* ══ v10.4 · readability floor (beats runtime-injected styles) ══ */
.pcount,.lname,.fev-chip,.fev-bchip,.dmheat-chip,.dist,.t2,.wt-s,.vc-typing,.dmc-rs,.dmp-going,.dmsoc-sub,.mp-hint,.tsp-t,.au-cwho i{font-size:11.5px!important;line-height:1.45}
.pcount{font-size:10.5px!important}
.mp-st span,.dmag-k,.dmc-badge small{font-size:10px!important}

/* the one number on this line that is about people, not inventory */
.sub .lively{color:var(--green-t);font-weight:700}

/* The monogram watermark holds a drawn icon now, not an emoji: size it, tint it
   from the mark's own colour, and let it sit behind the letterform. */
.mk-wm svg{width:20px;height:20px;opacity:.55}
.dl-row .mk-wm svg,.tcard .mk-wm svg{width:18px;height:18px}

/* Profile order. The balance is the most-checked number in a points product and
   it was rendering at 982px — a full screen below the fold, behind the account
   card, the owner strip, six menu rows and an invite banner. Reordering here
   rather than in the template leaves every other screen untouched. */
.body:has(> .acct-card){display:flex;flex-direction:column}
.body:has(> .acct-card) > .acct-card{order:-3}
.body:has(> .acct-card) > .pts-card{order:-2}
.body:has(> .acct-card) > .streak-card{order:-1}

/* readability floor: nothing a person has to read drops below 10.4px, because
   this is read at arm's length in a dark room. */
.me-card .k,.pts-card .k,.streak-card .k,.me-stats span,.mini-k{font-size:11px}

/* Flex items shrink by default and this container has a constrained height, so
   the cards were squeezed to fit instead of overflowing into the scroll — the
   balance card collapsed to a sliver. Keep each card's own height. */
.body:has(> .acct-card) > *{flex:0 0 auto}

/* Nothing a person has to read sits under 10.4px: this is read at arm's length,
   one-handed, in a dark room. Selectors taken off the live DOM. */
.hdr .hbtn .hbadge{font-size:10.5px}


/* --- icon slots never collapse or leak stray text --- */
.dmp-hcard > i,
.dmp-game > i { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; flex: 0 0 auto; color: var(--cyan-t); }
.dmp-hcard > i > svg,
.dmp-game > i > svg { display: block; }

/* --- inline glyph slots (play) --- */
.gico { display: inline-flex; align-items: center; justify-content: center; vertical-align: -3px; margin-right: 7px; color: var(--cyan-t); }
.gico > svg { display: block; }
.dmc-av > svg { display: block; margin: auto; }
.dmp-chip > svg { vertical-align: -2px; margin-right: 5px; }
button[disabled] > svg { vertical-align: -2px; margin-right: 5px; opacity: .8; }

/* --- legibility floor, without letting anything resize its container --- */
/* the LIVE badge toggles on and off, so its row gets a fixed height and the
   badge itself a fixed box: it can never reflow the location bar again. */
.locbar .city { min-height: 26px; }
.locbar .city, .locbar .city > * { align-self: center; }
.fb-live,
.locbar .city .fb-live {
  font-size: 10.5px !important;
  line-height: 1 !important;
  letter-spacing: .06em !important;
  padding: 0 6px !important;
  height: 17px !important;
  display: inline-flex !important;
  align-items: center !important;
  flex: 0 0 auto !important;
  box-sizing: border-box !important;
}
.mp-st span,
.mp-stats .mp-st span,
.dmag-k,
.dmc-badge small { font-size: 11px !important; }

/* --- glyph slots: fixed boxes, so an icon swap never reflows a row --- */
.gico { display: inline-flex; align-items: center; justify-content: center;
        width: 16px; height: 16px; flex: 0 0 auto; margin-right: 7px;
        vertical-align: -3px; color: var(--cyan-t); }
.gico > svg { display: block; }
.dmp-hcard > i, .dmp-game > i { display: inline-flex; align-items: center;
        justify-content: center; width: 18px; height: 18px; flex: 0 0 auto; }
.dmp-hcard > i > svg, .dmp-game > i > svg { display: block; }
.dmc-av > svg { display: block; margin: auto; }
.dmp-chip > svg, .dmp-cta > svg, button[disabled] > svg {
        flex: 0 0 auto; margin-right: 6px; vertical-align: -3px; opacity: .9; }

/* --- map marks hold their ground --- */
/* A pin marks a real address, so it never slides, drops or drifts. Leaflet's
   own zoom/fade animation is off in JS; this covers the marker chrome. */
.leaflet-marker-icon,
.leaflet-marker-icon.leaflet-zoom-animated { transition: none !important; }
.lpin { animation: none !important; }
.lpin, .lpin.sel { transition: box-shadow .16s ease-out, border-color .16s ease-out; }
.pin.drop { animation: none !important; }
/* Old Town packs venues within 30m of each other. The mark shrinks so the
   cluster stays readable; the coordinate underneath does not move. */
.zmid .lpin { transform: scale(calc(var(--pinscale,1) * .82)); }
.zmid .lpin.sel { transform: scale(calc(var(--pinscale,1) * 1.05)); }
@media (prefers-reduced-motion: reduce) {
  .lpin, .lpin.sel, .leaflet-marker-icon { transition: none !important; }
}