/* ============================================================
   BuzzThat — app stylesheet (mobile-first)
   Official brand theme: amber #FFB200 · orange #F5871F · ink #141414
   ============================================================ */
:root{
  --bz-amber:#FFB200; --bz-amber-deep:#FF9E00;
  --bz-orange:#F5871F; --bz-orange-deep:#E0750F;
  --bz-ink:#141414; --bz-white:#fff;
  --bz-cream:#FFF6E0; --bz-line:#EEE4CC; --bz-muted:#7a6f55;
  --bz-good:#2EAF6E; --bz-hot:#E8482C;
  --r:14px; --r-lg:22px; --sh:0 8px 26px rgba(20,20,20,.10);
  --head:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --body:'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;

  /* Semantic theme tokens (light defaults; overridden by [data-theme=dark]) */
  --bg:#fff;              /* app page background */
  --surface:#fff;        /* cards / panels */
  --text:var(--bz-ink);  /* primary text */
  --text-soft:#46402f;   /* secondary text on cards */
  --muted:var(--bz-muted); /* theme-aware muted text (follows dark override) */
  --rail-bg:var(--bz-amber);
  --rail-border:var(--bz-amber-deep);
  --rail-muted:#6b5a2c;
  --rail-hover:rgba(255,255,255,.4);
  --rail-active:rgba(255,255,255,.6);
  --rail-chip:rgba(20,20,20,.16);
}

/* ---- Dark theme: dark surfaces, amber kept as the accent ---- */
html[data-theme=dark]{
  --bz-cream:#23272c;    /* secondary panels (chips, hovers, rr-cards) */
  --bz-line:#2d333b;     /* borders */
  --bz-muted:#9aa4af;    /* muted text */
  --bz-ink:#2b3038;      /* dark "ink" surfaces (buttons, countdown, borders) */
  --sh:0 10px 28px rgba(0,0,0,.55);
  --bg:#0f1114;
  --surface:#1a1e23;
  --text:#e9ebee;
  --text-soft:#b9bfc7;
  --rail-bg:#16181d;
  --rail-border:#2d333b;
  --rail-muted:#9aa4af;
  --rail-hover:rgba(255,255,255,.07);
  --rail-active:rgba(255,178,0,.18);
  --rail-chip:rgba(255,255,255,.16);
}
html[data-theme=dark] body,
html[data-theme=dark] body.has-shell{background:var(--bg);color:var(--text)}
/* The appbar & landing hero stay brand-amber in dark mode, so their text must
   stay dark (light text on amber is unreadable). Scope the text tokens to dark. */
html[data-theme=dark] .appbar,
html[data-theme=dark] .bc-top,
html[data-theme=dark] .hero{--text:#141414;--text-soft:#46402f}
/* Small always-amber chips need fixed dark text in dark mode too. */
html[data-theme=dark] .comments h3 .cct,
html[data-theme=dark] .lb .rk{color:#141414}
/* …but cards & inputs nested on the hero keep their own dark surface + light text. */
html[data-theme=dark] .hero .create,
html[data-theme=dark] .hero .searchbar input{--text:#e9ebee;--text-soft:#b9bfc7}
*{margin:0;padding:0;box-sizing:border-box}
/* Global guard: the `hidden` attribute must always win over a class's display rule.
   Components are shown by REMOVING the attribute, so this is safe and ends a whole
   class of "stuck-visible popup/preview" bugs (emoji picker, lightbox, video previews,
   menus, count badges) without needing a per-class .x[hidden]{display:none} each time. */
[hidden]{display:none!important}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--body);color:var(--text);background:var(--bz-cream);line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
/* Mobile: never let a stray wide element create horizontal scroll (a common
   webview jank). Nested scroll containers (rails, maps) keep their own overflow. */
@media (max-width:640px){ html,body{max-width:100%;overflow-x:hidden} }
.wrap{width:100%;max-width:1080px;margin:0 auto;padding:0 18px}
h1,h2,h3,h4,.logo{font-family:var(--head);letter-spacing:-.4px}
/* Leading emoji on a title. Color-emoji glyphs each carry different built-in
   side-bearing, so a raw margin is either too loose (🔥) or makes the next word
   touch (🏡). Normalize every emoji into one fixed, centered box so the gap to
   the title is consistent no matter the glyph. */
.t-emoji{display:inline-block;width:1.2em;text-align:center;margin-right:.12em}

/* ---- App bar ---- */
.appbar{position:sticky;top:0;z-index:50;background:var(--bz-amber);border-bottom:2px solid var(--bz-amber-deep)}
.appbar .row{display:flex;align-items:center;justify-content:space-between;height:132px}
.logo{display:flex;align-items:center;gap:9px;font-weight:800;font-size:21px;color:var(--text)}
.logo .logo-img{height:112px;width:auto;display:block}
@media (max-width:600px){.appbar .row{height:84px}.logo .logo-img{height:64px}}
.logo .bubble{background:var(--bz-orange);color:#fff;border:2px solid #fff;border-radius:9px;padding:1px 8px;font-weight:800;
  box-shadow:0 2px 0 rgba(0,0,0,.15)}
.logo .dot{color:var(--text);font-size:13px;font-weight:700;margin-left:-3px}
.appbar nav{display:flex;align-items:center;gap:22px;font-weight:600;font-size:15px}
.appbar nav a.hide-sm{display:none}

/* ---- Buttons ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;cursor:pointer;border:none;
  font-family:var(--head);font-weight:800;font-size:15px;border-radius:var(--r);padding:12px 18px;transition:.14s;white-space:nowrap}
.btn:active{transform:translateY(1px)}
.btn-orange{background:var(--bz-orange);color:#fff;box-shadow:0 4px 0 var(--bz-orange-deep)}
.btn-orange:hover{background:var(--bz-orange-deep);box-shadow:0 2px 0 var(--bz-orange-deep)}
.btn-ink{background:var(--bz-ink);color:#fff}
.btn-ink:hover{background:#000}
.btn-ghost{background:var(--surface);color:var(--text);border:2px solid var(--bz-line)}
.btn-ghost:hover{border-color:var(--bz-orange)}
/* Admin-only jump button (e.g. profile → that user's moderation page). Dashed
   indigo so it reads as a staff tool in both light & dark, never a user action. */
.btn-admin-jump{background:var(--surface);color:var(--text);border:2px dashed color-mix(in srgb,var(--bz-line) 55%,#7c3aed)}
.btn-admin-jump:hover{border-style:solid;border-color:#7c3aed;color:#7c3aed}
.btn-block{width:100%}
.btn-lg{font-size:17px;padding:15px 22px}

/* ---- Hero ---- */
.hero{background:var(--bz-amber);padding:46px 0 54px;text-align:center;position:relative;overflow:hidden}
.hero::after{content:"";position:absolute;inset:auto 0 -1px 0;height:40px;background:var(--bz-cream);
  border-radius:50% 50% 0 0/100% 100% 0 0}
.pill{display:inline-flex;align-items:center;gap:7px;background:rgba(20,20,20,.08);color:var(--text);
  font-weight:700;font-size:13px;padding:6px 13px;border-radius:999px;margin-bottom:18px}
.hero h1{font-size:34px;line-height:1.28;font-weight:800;max-width:680px;margin:0 auto}
.hero h1 .bubble{background:var(--bz-orange);color:#fff;border:4px solid #fff;border-radius:18px;
  padding:8px 34px;font-size:1.12em;line-height:1.12;display:inline-block;margin-top:6px;
  transform:rotate(-2.5deg);box-shadow:0 6px 0 rgba(0,0,0,.2),0 14px 30px rgba(245,135,31,.55)}
.hero p.sub{color:var(--text-soft);font-size:17px;max-width:520px;margin:16px auto 0;font-weight:500}

/* ---- Create bar ---- */
.create{position:relative;z-index:2;margin:26px auto 0;max-width:560px;background:var(--surface);border:2px solid var(--bz-ink);
  border-radius:18px;padding:8px;box-shadow:0 10px 0 rgba(20,20,20,.12);text-align:left}
.create form{display:flex;flex-direction:column;gap:8px}
.create-main{display:flex;flex-direction:column;gap:8px}
.create .grow input[type=text],.create .grow textarea{
  width:100%;border:none;outline:none;font-family:var(--body);font-size:16px;padding:13px 14px;background:var(--surface);color:var(--text)}
.create textarea{resize:none;border-top:1px solid var(--bz-line)}
.create input::placeholder,.create textarea::placeholder{color:#9a9079}

/* Guests see a login/register CTA instead of the create form */
.create-guest{padding:18px 16px;text-align:center}
.create-guest>p{font-size:15px;font-weight:600;color:var(--text-soft);margin-bottom:14px}
.cg-actions{display:flex;flex-direction:column;gap:8px;justify-content:center}
@media(min-width:520px){.cg-actions{flex-direction:row}}

/* "+ Countdown, link, emoji & image" disclosure */
.more{border-top:1px solid var(--bz-line);margin-top:2px}
.more summary{cursor:pointer;list-style:none;padding:11px 14px 7px;font-size:13px;font-weight:700;color:var(--bz-orange-deep);user-select:none}
.more summary::-webkit-details-marker{display:none}
.more summary:hover{color:var(--text)}
.more-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:4px 6px 8px}
.mf{display:flex;flex-direction:column;gap:5px}
.mf-wide{grid-column:1 / -1}
.mf>span{font-size:12px;font-weight:700;color:var(--text-soft)}
.mf input{width:100%;border:2px solid var(--bz-line);border-radius:10px;padding:10px 11px;font-size:15px;font-family:var(--body);background:var(--surface);color:var(--text)}
.mf input:focus{outline:none;border-color:var(--bz-orange)}
.mf input[type=file]{padding:8px;font-size:13px;cursor:pointer}
#imagePreview:empty{display:none}
.hint{margin-top:13px;font-size:13px;color:var(--text-soft);font-weight:500}
.hint b{color:var(--text)}

/* ---- Generic card ---- */
.card{background:var(--surface);border:1px solid var(--bz-line);border-radius:var(--r-lg);box-shadow:var(--sh)}
.section{padding:42px 0}
.section h2{font-size:26px;text-align:center}
.eyebrow{text-align:center;color:var(--bz-orange-deep);font-weight:800;font-size:13px;letter-spacing:1.4px;text-transform:uppercase}

/* ---- Trending grid ---- */
.tgrid{display:grid;grid-template-columns:1fr;gap:14px;margin-top:22px}
.tcard{display:block;min-width:0;background:var(--surface);border:1px solid var(--bz-line);border-radius:var(--r);padding:16px 18px;box-shadow:var(--sh)}
.tcard:hover{border-color:var(--bz-orange)}
.tcard .t-thumb{width:100%;height:120px;object-fit:cover;border-radius:10px;margin-bottom:12px;border:1px solid var(--bz-line)}
.tcard .t-title{font-family:var(--head);font-weight:800;font-size:17px}
.tcard .t-meta{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:8px;font-size:13px;color:var(--bz-muted);font-weight:600}
.tcard .t-meta .t-ic{display:inline-block;width:1.4em}
.tcard .t-meta .hot{color:var(--bz-orange-deep)}
.tcard .t-meta .t-when{margin-left:auto;font-weight:500;white-space:nowrap}
/* Grid view: spread buzzing / views / date evenly across the row instead of
   pinning the date to the far right. (List view keeps its own stacked layout.) */
.tgrid:not(.is-list) .tcard .t-meta{justify-content:space-between}
.tgrid:not(.is-list) .tcard .t-meta .t-when{margin-left:0}

/* 🚩 Report menu (details/summary popover) */
.report-menu{position:relative;display:inline-block}
.report-menu>summary{list-style:none;cursor:pointer;border:2px solid var(--bz-line);background:var(--surface);border-radius:999px;padding:7px 11px;font-size:14px;line-height:1;color:var(--muted)}
.report-menu>summary::-webkit-details-marker{display:none}
.report-menu>summary:hover{border-color:#f46a6a}
.report-pop{position:absolute;right:0;top:calc(100% + 6px);z-index:40;width:240px;background:var(--surface);border:2px solid var(--bz-ink);border-radius:14px;box-shadow:var(--sh);padding:12px}
.report-h{font-weight:800;font-size:13px;margin:0 0 8px}
.report-opt{display:flex;gap:8px;align-items:flex-start;font-size:13px;padding:4px 0;cursor:pointer}
.report-opt input{margin-top:2px}
.report-pop textarea{width:100%;margin:8px 0;border:2px solid var(--bz-line);border-radius:8px;padding:7px;font-family:var(--body);font-size:13px;resize:vertical;box-sizing:border-box}
.report-pop .btn{width:100%}
.cmt-actions .report-menu>summary{border:0;padding:2px 4px;font-size:13px;background:none}
/* Report ⋯ lives at the top-right of the post header (amber bar). */
.bc-top-r{display:flex;align-items:center;gap:8px;flex:0 0 auto}
.bc-top-r .report-menu>summary{border:0;background:transparent;padding:0 6px;font-size:24px;letter-spacing:1px;color:var(--text)}
.bc-top-r .report-menu>summary:hover{color:#f46a6a}
.bc-top-r .report-pop{text-align:left}

/* ============ Public buzz page ============ */
.buzzpage{max-width:480px;margin:0 auto;padding:18px}
.buzzcard{background:var(--surface);border:2px solid var(--bz-ink);border-radius:var(--r-lg);overflow:hidden;box-shadow:0 12px 0 rgba(20,20,20,.10)}
.bc-top{display:flex;align-items:center;justify-content:space-between;padding:15px 18px;background:var(--bz-amber);border-bottom:2px solid var(--bz-ink)}
.bc-host{display:flex;align-items:center;gap:10px}
.bc-host .av{width:36px;height:36px;border-radius:50%;background:var(--bz-orange);border:2px solid #fff;display:grid;place-items:center;color:#fff;font-weight:800}
.bc-host b{font-size:14px;display:block;color:var(--text)}.bc-host span{font-size:12px;color:var(--text-soft)}
.live{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:800;color:var(--bz-hot)}
.live .d{width:8px;height:8px;border-radius:50%;background:var(--bz-hot);animation:blink 1.3s infinite}
@keyframes blink{50%{opacity:.25}}
.bc-image{display:block;width:100%;max-height:340px;object-fit:cover;border-bottom:2px solid var(--bz-ink)}
.bc-body{padding:22px 20px}
.bc-body h1{font-size:24px;line-height:1.2;font-weight:800}
.bc-body .desc{color:var(--bz-muted);margin-top:10px;font-size:15px}
.bc-link{display:inline-flex;align-items:center;gap:6px;margin-top:12px;font-size:13px;font-weight:700;color:var(--bz-orange-deep);word-break:break-all}

.countdown{display:flex;gap:8px;margin:20px 0}
/* Countdown early access */
.ea-banner{margin:0 0 16px;padding:12px 14px;border-radius:14px;background:var(--bz-cream);border:1.5px dashed var(--bz-orange)}
.ea-banner b{display:block;font-size:14.5px;color:var(--bz-orange-deep)}
.ea-banner span{display:block;font-size:13px;color:var(--text-soft);margin-top:2px}
.ea-banner.ea-in{background:rgba(46,175,110,.12);border-color:var(--bz-green,#2EAF6E)}
.ea-banner.ea-in b{color:#1e7a4d}
.ea-tag{display:inline-block;font-size:10.5px;font-weight:800;color:#1e7a4d;background:rgba(46,175,110,.16);border-radius:999px;padding:1px 7px;margin-left:6px;vertical-align:1px}
.lb .row.is-early{border-color:var(--bz-orange);box-shadow:0 0 0 1px var(--bz-orange) inset}

/* Compose: post-as identity selector */
.post-as{display:flex;align-items:center;gap:11px;padding:10px 12px;background:var(--bz-cream);border-radius:14px;margin-bottom:6px}
.post-as.is-anon{background:rgba(120,120,130,.14)}
.post-as-av{flex:none;display:inline-flex}
.post-as-av.post-as-anon{width:40px;height:40px;border-radius:50%;background:#3a3a44;color:#fff;align-items:center;justify-content:center;font-size:20px}
.post-as-av[hidden]{display:none}   /* show only the selected identity (class display overrode bare [hidden]) */
.post-as-meta{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.post-as-meta .s{font-size:11.5px;color:var(--bz-muted);text-transform:uppercase;letter-spacing:.5px;font-weight:700}
.post-as-meta select{border:none;background:transparent;font-size:15px;font-weight:800;color:var(--text);padding:0;cursor:pointer;max-width:100%}
.post-as-note{font-size:12.5px;color:var(--text-soft);background:rgba(120,120,130,.1);border-radius:10px;padding:9px 12px;margin-bottom:10px;line-height:1.45}
html[data-theme=dark] .post-as{background:rgba(255,255,255,.05)}

/* Comment "post as" identity switch (avatar + caret dropdown) */
.cf-submit{display:flex;align-items:center;gap:8px;flex:none}
.cf-as{position:relative}
.cf-as-btn{display:inline-flex;align-items:center;gap:3px;border:1px solid var(--bz-line);background:var(--surface);border-radius:999px;padding:2px 5px 2px 2px;cursor:pointer}
.cf-as-btn:hover{border-color:var(--bz-orange)}
.cf-as.is-anon .cf-as-btn{border-color:#3a3a44}
.cf-as-caret{font-size:10px;color:var(--bz-muted);line-height:1}
.cf-as-av{display:inline-flex}
.cf-as-av .profile-av,.cf-as-av .profile-av.sm{width:24px;height:24px;font-size:11px;border-width:2px}
.cf-as-anon-av{width:24px;height:24px;border-radius:50%;background:#3a3a44;color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:13px;flex:none}
.cf-as-menu{position:absolute;bottom:calc(100% + 6px);right:0;z-index:40;background:var(--surface);border:1px solid var(--bz-line);border-radius:12px;box-shadow:var(--sh);padding:5px;min-width:150px}
.cf-as-menu[hidden]{display:none}
.cf-as-opt{display:flex;align-items:center;gap:8px;width:100%;background:none;border:0;cursor:pointer;padding:7px 9px;border-radius:8px;font-size:13.5px;font-weight:700;color:var(--text);text-align:left}
.cf-as-opt:hover{background:var(--bz-cream)}
html[data-theme=dark] .cf-as-opt:hover{background:rgba(255,255,255,.07)}

/* Anonymous Buzz Mode */
.anon-av{font-size:18px}
.profile-av.sm.anon-av{font-size:17px}
.anon-tag{display:inline-block;font-size:10.5px;font-weight:800;color:#fff;background:rgba(120,120,130,.85);border-radius:999px;padding:1px 7px;vertical-align:1px}
.anon-row{display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--bz-line);border-radius:14px;padding:12px 14px;margin-bottom:10px}
.anon-row-meta{flex:1;min-width:0}
.anon-row-meta a{color:var(--text)}
.anon-row-meta b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ===== Buzz Syndication (share + return-traffic) ===== */
.syndicate{padding:16px 20px 20px}
.synd-open{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:11px;border:2px solid var(--bz-line);border-radius:12px;background:var(--surface);color:var(--text);font-family:var(--head);font-weight:800;font-size:14px;cursor:pointer}
.synd-open:hover{border-color:var(--bz-orange)}
.synd-caret{font-size:11px;color:var(--bz-muted);transition:transform .15s}
.synd-open.is-open .synd-caret{transform:rotate(180deg)}
.synd-panel{margin-top:10px}
.synd-panel[hidden]{display:none}
.synd-label{display:block;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.6px;color:var(--bz-muted);margin-bottom:8px}
.synd-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px}
.synd-btn{display:flex;align-items:center;justify-content:center;gap:7px;padding:11px 8px;border:2px solid var(--bz-line);border-radius:12px;background:var(--surface);color:var(--text);font-weight:700;font-size:13.5px;cursor:pointer;text-decoration:none}
.synd-btn:hover{border-color:var(--bz-orange);color:var(--text)}
.synd-btn .si{width:17px;height:17px;flex:none}
.synd-btn .synd-emoji{font-size:16px;line-height:1}
.synd-note{font-size:12px;color:var(--bz-muted);margin-top:8px}
.synd-stats{margin:0 20px 16px;background:var(--bz-cream);border-radius:14px;padding:14px}
.synd-stats h4{font-size:14px;margin-bottom:8px}
.synd-stat{display:flex;justify-content:space-between;align-items:center;padding:6px 0;border-bottom:1px solid var(--bz-line);font-size:14px}
.synd-stat:last-of-type{border-bottom:none}
.synd-stat b{font-family:var(--head);font-size:16px}
html[data-theme=dark] .synd-stats{background:rgba(255,255,255,.05)}

/* ===== Clip Battles ===== */
.battles-page,.battle-page{max-width:680px;margin:0 auto;padding:18px 14px 48px}
.battle-page .battle-head{text-align:center;margin:14px 0 18px}
.battle-tag{display:inline-block;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:1px;color:var(--bz-orange-deep);background:var(--bz-cream);border-radius:999px;padding:3px 12px}
.battle-head h1{font-size:24px;font-weight:800;margin:8px 0 4px}
.battle-clock{font-weight:800;color:var(--bz-orange-deep)}
.battle-arena{display:grid;grid-template-columns:1fr auto 1fr;gap:12px;align-items:start}
.battle-vs{align-self:center;font-family:var(--head);font-weight:800;font-size:18px;color:var(--bz-muted)}
.battle-side{background:var(--surface);border:2px solid var(--bz-ink);border-radius:var(--r-lg);box-shadow:var(--sh);padding:12px;text-align:center;position:relative}
.battle-side.is-winner{border-color:var(--bz-green,#2EAF6E);box-shadow:0 0 0 2px var(--bz-green,#2EAF6E)}
.battle-side.is-mine{border-color:var(--bz-orange)}
.battle-crown{position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:var(--bz-green,#2EAF6E);color:#fff;font-weight:800;font-size:12px;border-radius:999px;padding:2px 12px;white-space:nowrap}
.battle-clip{border-radius:12px;overflow:hidden;background:#000;margin-bottom:10px}
.battle-clip img{width:100%;display:block}
.battle-clip .vid-player{margin:0 auto}
.battle-noclip{aspect-ratio:1/1;display:grid;place-items:center;font-size:48px;background:var(--bz-cream);border-radius:12px}
.battle-title{display:block;font-weight:800;font-size:15px;color:var(--text);margin-bottom:2px}
.battle-by{font-size:13px;color:var(--bz-muted)}
.battle-bar{height:10px;background:var(--bz-line);border-radius:999px;overflow:hidden;margin:10px 0 6px}
.battle-bar span{display:block;height:100%;background:var(--bz-orange);border-radius:999px;transition:width .3s}
.is-winner .battle-bar span{background:var(--bz-green,#2EAF6E)}
.battle-stat{font-size:13px;color:var(--text-soft);margin-bottom:10px}
.battle-stat b{color:var(--text);font-size:15px}
.battle-voted{font-weight:800;color:var(--bz-green,#2EAF6E);padding:8px}
.battle-voted.muted{color:var(--bz-muted);font-weight:600}
/* battle rows on the index */
.battle-row{display:flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--bz-line);border-radius:14px;padding:12px;margin-bottom:10px;text-decoration:none;color:var(--text)}
.battle-row:hover{border-color:var(--bz-orange)}
.battle-row-side{flex:1;min-width:0;text-align:center}
.battle-row-side.won{color:var(--bz-green,#2EAF6E);font-weight:800}
.battle-row-emoji{font-size:22px;display:block}
.battle-row-name{font-size:13px;font-weight:700;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.battle-row-mid{flex:0 0 auto;text-align:center;max-width:160px}
.battle-vs-sm{font-family:var(--head);font-weight:800;font-size:13px;color:var(--bz-muted);display:block}
.battle-row-topic{display:block;line-height:1.2}
.battle-row-meta{font-size:11px;color:var(--bz-muted);display:block;margin-top:2px}
@media(max-width:560px){
  .battle-arena{grid-template-columns:1fr;gap:10px}
  .battle-vs{order:0;margin:2px 0}
}

/* Countdowns discovery page */
.cd-page{max-width:600px;margin:0 auto;padding:18px 14px 48px}
.cd-head{margin-bottom:16px}
.cd-head h1{font-size:26px;font-weight:800}
.cd-head .btn{margin-top:10px}
.cd-card{display:block;background:var(--surface);border:2px solid var(--bz-ink);border-radius:var(--r-lg);box-shadow:var(--sh);padding:14px 16px;margin-bottom:12px;text-decoration:none;color:var(--text)}
.cd-card:hover{border-color:var(--bz-orange)}
.cd-card-top{display:flex;align-items:center;gap:12px}
.cd-emoji{font-size:26px;flex:none}
.cd-card-meta{flex:1;min-width:0}
.cd-card-meta b{display:block;font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cd-card-meta span{font-size:13px;color:var(--bz-muted)}
.cd-hype{flex:none;font-weight:800;color:var(--bz-orange-deep);font-size:14px}
.cd-mini{display:flex;align-items:center;gap:10px;margin-top:10px;font-size:13px;color:var(--text-soft)}
.cd-mini b{font-family:var(--head);font-weight:800;color:var(--text);font-size:15px}
.cd-when{color:var(--bz-muted)}
html[data-theme=dark] .ea-banner{background:rgba(255,170,60,.1)}
html[data-theme=dark] .ea-banner.ea-in{background:rgba(46,175,110,.14)}
.cd{flex:1;background:var(--bz-ink);color:#fff;border-radius:12px;padding:10px 0;text-align:center}
.cd b{font-size:24px;font-weight:800;display:block;font-family:var(--head)}
.cd span{font-size:10px;text-transform:uppercase;letter-spacing:1px;opacity:.7}

.hype{display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--bz-cream);
  border:2px solid var(--bz-amber);border-radius:14px;padding:14px 16px;margin-top:20px}
.hype .faces{display:flex}
.hype .faces i{width:28px;height:28px;border-radius:50%;border:2px solid #fff;margin-left:-10px;display:inline-block}
.hype .faces i:first-child{margin-left:0}
.hype .count{font-size:15px;font-weight:700}.hype .count b{color:var(--bz-orange-deep);font-size:18px;margin-right:5px}
.hype .rank{font-size:13px;font-weight:800;color:var(--bz-good)}

/* Equal-cell grid so every action is the same width + aligned across rows
   (forms, the Boost button, and the Report control all match the buttons). */
/* Single horizontal action row — compact buttons, scroll on overflow (never wraps). */
.bc-actions{display:flex;flex-wrap:wrap;gap:9px;padding:20px 20px 8px}
.bc-actions>*{flex:0 0 auto;min-width:0}
.bc-actions form{display:flex}
.bc-actions .btn{width:auto;white-space:nowrap;padding:9px 14px;font-size:13.5px}
/* Flatten the orange/ink primaries in the row (no raised 3D shadow) + transparent
   border so they're the exact same height as the bordered ghost buttons, and the
   hover no longer reveals a shadow "layer" under the button. */
.bc-actions .btn-orange,.bc-actions .btn-ink{box-shadow:none;border:2px solid transparent}
.bc-actions .btn-orange:hover,.bc-actions .btn-ink:hover{box-shadow:none}
.bc-actions .boost-btn{width:auto;white-space:nowrap;background:var(--surface);border:2px solid var(--bz-line);
  border-radius:var(--r);color:var(--text);font-family:var(--head);font-weight:800;font-size:13.5px;
  padding:8px 13px;display:inline-flex;align-items:center;justify-content:center;gap:7px}
.bc-actions .boost-btn:hover{border-color:var(--bz-orange);color:var(--text)}
/* Report control (a <details>) — make its trigger match the ghost buttons. */
.bc-actions .report-menu{display:flex}
.bc-actions .report-menu>summary{width:auto;white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;
  font-weight:800;font-size:20px;line-height:1;padding:6px 14px;border-radius:999px;color:var(--muted)}
.bc-actions .report-menu>summary:hover{border-color:var(--bz-orange)}
.share-row{display:flex;gap:8px;padding:14px 20px 22px}
.share-row a,.share-row button{flex:1;text-align:center;padding:11px 0;border:2px solid var(--bz-line);border-radius:11px;
  font-size:13px;font-weight:700;color:var(--bz-muted);background:var(--surface);cursor:pointer}
.share-row a:hover,.share-row button:hover{border-color:var(--bz-orange);color:var(--text)}

/* leaderboard */
.lb{margin-top:18px}
.lb h3{font-size:15px;text-transform:uppercase;letter-spacing:1px;color:var(--bz-muted);margin-bottom:10px}
.lb-you{text-align:center;margin-top:12px;font-size:13.5px;color:var(--text-soft);background:rgba(245,135,31,.07);border:1px solid var(--bz-line);border-radius:12px;padding:9px 12px}
.lb .row{display:flex;align-items:center;gap:12px;padding:10px 12px;background:var(--surface);border:1px solid var(--bz-line);border-radius:12px;margin-bottom:7px}
.lb .rk{width:26px;height:26px;border-radius:8px;background:var(--bz-amber);color:var(--text);display:grid;place-items:center;font-weight:800;font-size:13px}
.lb .row:nth-child(1) .rk{background:var(--bz-orange);color:#fff}
.lb .nm{flex:1;font-weight:700;font-size:14px}
.lb .ct{font-weight:800;color:var(--bz-orange-deep)}
/* Owner/admin "Manage" controls — a tidy button row instead of stray text links */
.owner-tools{margin-top:16px;padding:10px 14px;border:1px dashed var(--bz-line);border-radius:14px;background:var(--surface);display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.owner-tools-label{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--bz-muted)}
.owner-tools-btns{display:flex;gap:8px;flex-wrap:wrap}
.owner-tools-btns a{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;font-weight:700;padding:8px 14px;border-radius:999px;border:2px solid var(--bz-line);background:var(--bz-card,var(--surface));color:var(--text);text-decoration:none;transition:border-color .12s}
.owner-tools-btns a:hover{border-color:var(--bz-orange)}
/* Referral leaderboard empty-state + "copy my link" */
.lb-empty{text-align:center;font-size:13.5px;color:var(--bz-muted);background:var(--surface);border:1px dashed var(--bz-line);border-radius:12px;padding:14px 12px}
.lb-cta{text-align:center;font-size:13px;color:var(--bz-muted);margin-top:11px}
.lb-share{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
.lb-ref-input{flex:1;min-width:150px;border:1.5px solid var(--bz-line);border-radius:10px;padding:9px 12px;font-size:13px;background:var(--bz-cream);color:var(--text)}
.lb-ref-copy{flex:none;white-space:nowrap;border:none;border-radius:10px;padding:9px 15px;background:var(--bz-orange);color:#fff;font-weight:800;font-size:13px;cursor:pointer}
.lb-ref-copy:hover{background:var(--bz-orange-deep)}

/* ---- modal ---- */
.modal{position:fixed;inset:0;background:rgba(20,20,20,.55);display:none;align-items:center;justify-content:center;z-index:100;padding:18px}
.modal.open{display:flex}
.modal .box{background:var(--surface);border-radius:var(--r-lg);max-width:380px;width:100%;padding:26px;text-align:center;border:2px solid var(--bz-ink)}
.modal .box h3{font-size:20px}.modal .box p{color:var(--bz-muted);margin:8px 0 18px}
.modal input{width:100%;border:2px solid var(--bz-line);border-radius:12px;padding:13px;font-size:15px;margin-bottom:10px;font-family:var(--body)}
.modal input:focus{outline:none;border-color:var(--bz-orange)}

/* ---- auth + dashboard ---- */
.authwrap{max-width:400px;margin:30px auto;padding:0 18px}
.authcard{background:var(--surface);border:2px solid var(--bz-ink);border-radius:var(--r-lg);padding:28px;box-shadow:0 10px 0 rgba(20,20,20,.10)}
.authcard h1{font-size:24px;text-align:center}
.authcard p.s{text-align:center;color:var(--bz-muted);margin:6px 0 20px}
.field{margin-bottom:14px}
.field label{display:block;font-weight:700;font-size:14px;margin-bottom:6px}
.field input,.field textarea,.field select{width:100%;border:2px solid var(--bz-line);border-radius:12px;padding:12px 13px;font-size:15px;font-family:var(--body);background:var(--surface);color:var(--text)}
.field textarea{resize:vertical;min-height:54px}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--bz-orange)}
/* City autocomplete dropdown (Eats add-restaurant form). */
.ac{position:relative}
.ac-list{position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:50;margin:0;padding:6px;list-style:none;
  background:var(--surface);border:1px solid var(--bz-line);border-radius:12px;box-shadow:var(--sh);max-height:280px;overflow-y:auto}
.ac-list[hidden]{display:none}
.ac-item{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:9px 12px;border-radius:8px;
  cursor:pointer;font-size:15px;color:var(--text)}
.ac-item:hover,.ac-item.is-active{background:var(--rail-hover)}
.ac-item .ac-st{font-size:12px;color:var(--bz-muted);font-weight:700}
.ac-item.ac-add{color:var(--bz-orange-deep);font-weight:700;border-top:1px solid var(--bz-line)}
.ac-item.ac-add .ac-st{color:var(--bz-orange-deep);font-weight:600}
/* Agree-to-terms checkbox: a real checkbox + inline text (the generic .field
   input rule above otherwise stretches it into a full-width box). */
.field label.agree-check{display:flex;align-items:flex-start;gap:10px;text-align:left;margin-bottom:0;cursor:pointer}
.agree-check input[type=checkbox]{width:18px;height:18px;flex:0 0 18px;margin:1px 0 0;padding:0;border-radius:5px;accent-color:var(--bz-orange)}
.agree-check span{font-weight:700;font-size:14px;line-height:1.35}
.err{background:#fde8e4;border:1px solid var(--bz-hot);color:#a3271a;padding:10px 13px;border-radius:10px;font-size:13px;margin-bottom:14px;font-weight:600}
.muted-link{text-align:center;margin-top:16px;font-size:14px;color:var(--bz-muted)}
.muted-link a{color:var(--bz-orange-deep);font-weight:700}

.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin:18px 0}
.stat{background:var(--surface);border:1px solid var(--bz-line);border-radius:var(--r);padding:16px;text-align:center;box-shadow:var(--sh)}
.stat b{display:block;font-family:var(--head);font-size:28px;font-weight:800;color:var(--bz-orange-deep)}
.stat span{font-size:12px;color:var(--bz-muted);font-weight:700;text-transform:uppercase;letter-spacing:.5px}
.dash-buzz{display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--surface);border:1px solid var(--bz-line);
  border-radius:var(--r);padding:15px 17px;margin-bottom:11px;box-shadow:var(--sh)}
.dash-buzz .b-title{font-family:var(--head);font-weight:800;font-size:16px}
.dash-buzz .b-meta{font-size:13px;color:var(--bz-muted);font-weight:600;margin-top:4px}
.empty{text-align:center;padding:40px 20px;color:var(--bz-muted)}

/* ---- footer ---- */
footer{border-top:1px solid var(--bz-line);margin-top:50px;padding:26px 0;color:var(--bz-muted);font-size:13px;text-align:center}

/* ---- full site footer (links to every public + legal/safety page) ---- */
.site-footer{border-top:1px solid var(--bz-line);margin-top:80px;padding:40px 0 44px;color:var(--text-soft);font-size:14px;text-align:left}
.site-footer .wrap{max-width:1080px}
.sf-grid{display:grid;grid-template-columns:1fr;gap:24px}
.sf-brand .sf-logo{display:inline-block;line-height:0}
.sf-brand .sf-logo img{height:62px;width:auto;border-radius:10px}
.sf-tag{margin:10px 0 0;max-width:300px;line-height:1.5;color:var(--text-soft)}
.sf-col h4{margin:0 0 8px;font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:var(--text);opacity:.7;white-space:nowrap}
.sf-col a{display:block;color:var(--text-soft);text-decoration:none;padding:5px 0;line-height:1.35}
.sf-col a:hover{color:var(--bz-amber-deep);text-decoration:underline}
.sf-bottom{display:flex;flex-wrap:wrap;gap:8px 18px;justify-content:space-between;align-items:center;margin-top:26px;padding-top:18px;border-top:1px solid var(--bz-line);font-size:13px;color:var(--bz-muted)}
@media(min-width:720px){
  .sf-grid{grid-template-columns:1.7fr 1fr 1fr 1.1fr;gap:32px}
}

.flash{background:var(--bz-good);color:#fff;text-align:center;padding:11px;font-weight:700;font-size:14px}

/* ---- tablet/desktop ---- */
@media(min-width:720px){
  .appbar nav a.hide-sm{display:inline}
  .hero h1{font-size:50px}
  .hero{padding:64px 0 72px}
  .tgrid{grid-template-columns:repeat(3,1fr)}
  /* In the logged-in app shell the center column is ~680px (right rail takes the
     rest), so 3 card columns overflow and slide under the right rail. Use 2. */
  .x-main .tgrid{grid-template-columns:repeat(2,1fr)}
  .stats{grid-template-columns:repeat(4,1fr)}
  .create-main{flex-direction:row;align-items:center}
  .create-main .grow{flex:1}
  .create textarea{display:none}
  .more-grid{grid-template-columns:1fr 1fr}
}

/* ---- Comments ---- */
.comments{margin-top:24px}
.comments h3{font-size:15px;text-transform:uppercase;letter-spacing:1px;color:var(--bz-muted);margin-bottom:12px}
.comments h3 .cct{display:inline-block;background:var(--bz-amber);color:var(--text);font-size:12px;font-weight:800;border-radius:999px;padding:1px 9px;margin-left:6px;letter-spacing:0}
.comment-form{background:var(--surface);border:1px solid var(--bz-line);border-radius:14px;padding:12px;margin-bottom:16px}
.comment-form textarea{width:100%;border:0;resize:vertical;font:inherit;font-size:15px;outline:none;background:transparent;min-height:46px;color:var(--text)}
.comment-form .cf-actions{display:flex;justify-content:flex-end;border-top:1px solid var(--bz-line);padding-top:10px;margin-top:6px}
.comment-login{background:var(--bz-cream);border:1px solid var(--bz-line);border-radius:12px;padding:13px 15px;font-size:14px;margin-bottom:16px}
.comment-login a{color:var(--bz-orange-deep);font-weight:700}
.comment-list{display:flex;flex-direction:column;gap:10px}
.comment{display:flex;gap:11px;align-items:flex-start;background:var(--surface);border:1px solid var(--bz-line);border-radius:14px;padding:12px 13px}
.comment .av{width:34px;height:34px;flex-shrink:0;border-radius:50%;background:var(--bz-ink);color:#fff;display:grid;place-items:center;font-weight:800;font-size:14px}
.comment .cbody{flex:1;min-width:0}
.comment .cmeta{font-size:13px;color:var(--bz-muted);margin-bottom:2px}
.comment .cmeta b{color:var(--text);font-size:14px;margin-right:2px}
.comment .cbody p{margin:0;font-size:15px;line-height:1.45;word-wrap:break-word;overflow-wrap:anywhere}
.comment .cdel{flex-shrink:0}
.comment .cdel button{border:0;background:transparent;color:var(--bz-muted);cursor:pointer;font-size:15px;line-height:1;padding:4px 6px;border-radius:8px}
.comment .cdel button:hover{background:#fde8e4;color:var(--bz-hot)}
.comment-empty{color:var(--bz-muted);text-align:center;padding:18px;font-size:14px}

/* ===== Profile / user feed (Facebook-style) ============================== */
/* ===== Standalone public profile (link-in-bio), mobile-first ===== */
.bio-body{background:var(--bg);min-height:100vh;display:flex;flex-direction:column}
.bio-bar{position:sticky;top:0;z-index:20;background:var(--surface);border-bottom:1px solid var(--bz-line)}
.bio-bar-in{max-width:520px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 14px}
.bio-logo img{height:30px;display:block}
.bio-bar-actions{display:flex;align-items:center;gap:8px}
.bio-theme{background:none;border:none;cursor:pointer;font-size:18px;line-height:1;padding:4px}
.bio-main{flex:1}
.bio-foot{text-align:center;padding:20px 14px 32px;color:var(--bz-muted);font-size:13px;display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.bio-foot a{color:var(--bz-muted)}
.bio-foot a:hover{color:var(--text)}

.profile{max-width:480px;margin:0 auto;padding:16px 14px 40px}

/* Centered, mobile-style header card */
.profile-head{background:var(--surface);border:2px solid var(--bz-ink);border-radius:var(--r-lg);box-shadow:var(--sh);padding:24px 18px 18px;text-align:center}
.profile-id{display:flex;flex-direction:column;align-items:center}
.profile-av{width:84px;height:84px;border-radius:50%;background:var(--bz-orange);border:4px solid #fff;
  display:grid;place-items:center;color:#fff;font-weight:800;font-size:34px;font-family:var(--head);flex-shrink:0}
.profile-id>.profile-av{width:92px;height:92px;font-size:38px;box-shadow:0 0 0 2px var(--bz-line);margin-bottom:12px}
.profile-av.sm{width:40px;height:40px;border-width:2px;font-size:17px}
.profile-name{font-size:23px;line-height:1.15;font-weight:800;display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap}
.profile-id .handle{color:var(--bz-muted);font-weight:600;font-size:14px;margin-top:3px}
.admin-namelog{display:inline-block;margin-top:6px;font-size:11.5px;font-weight:700;color:var(--bz-orange-deep);background:var(--bz-cream);border:1px dashed var(--bz-orange);border-radius:999px;padding:2px 9px;cursor:help;white-space:pre-line}
.profile-cta{margin:15px auto 2px;width:100%;max-width:320px;display:flex;flex-direction:column;gap:10px}
.profile-cta .btn,.profile-cta .btn-follow,.profile-cta .btn-friend{width:100%;justify-content:center;min-height:50px;padding:13px 18px;font-size:15px;border-radius:14px}
.profile-cta .btn-orange{box-shadow:0 6px 18px rgba(245,135,31,.28)}
.profile-cta form{margin:0}
/* Friend button — clean, matched pair with Follow */
.btn-friend{display:inline-flex;align-items:center;justify-content:center;gap:7px;font-weight:800;font-size:15px;line-height:1;padding:13px 18px;border-radius:14px;border:2px solid transparent;cursor:pointer;text-decoration:none;transition:.14s}
.friend-add{background:var(--surface);color:var(--text);border-color:var(--bz-line)}
.friend-add:hover{border-color:var(--bz-orange);color:var(--bz-orange-deep);background:var(--bz-cream)}
.friend-accept{background:var(--bz-orange);color:#fff;box-shadow:0 6px 16px rgba(245,135,31,.32)}
.friend-accept:hover{background:var(--bz-orange-deep)}
.friend-muted,.friend-on{background:var(--bz-cream);color:var(--bz-muted);border-color:var(--bz-line)}
.friend-on:hover,.friend-muted:hover{border-color:#dc2626;color:#dc2626;background:#fee}
.conn-requests{background:var(--bz-cream);border:1px solid var(--bz-line);border-radius:var(--r);padding:14px;margin-bottom:14px}
.conn-requests h3{font-size:15px;margin:0 0 10px;display:flex;align-items:center;gap:6px}
.conn-requests .cct{background:var(--bz-orange);color:#fff;border-radius:999px;padding:1px 8px;font-size:12px}
.conn-requests .conn-row{margin-bottom:8px;gap:8px}
.conn-requests .conn-row form{margin:0}
.friend-form{margin:0}
.profile-stats{display:flex;gap:7px;margin-top:18px}
.profile-stats>div,.profile-stats>a{flex:1;min-width:0;text-align:center;background:var(--bz-cream);border-radius:12px;padding:9px 0;color:var(--text)}
.profile-stats>a:hover{background:#fbeccb}
.profile-stats b{display:block;font-size:18px;font-weight:800;font-family:var(--head)}
.profile-stats span{font-size:10px;text-transform:uppercase;letter-spacing:.5px;color:var(--bz-muted);font-weight:700}

/* Posts / Media tabs + media grid */
.pf-tabs{display:flex;gap:6px;margin:16px 0 12px}
.pf-tab{flex:1;text-align:center;padding:11px 8px;border-radius:12px;font-weight:800;font-size:14px;color:var(--bz-muted);background:var(--surface);border:1.5px solid var(--bz-line)}
.pf-tab.is-active{color:var(--text);border-color:var(--bz-ink);background:var(--bz-cream)}
.pf-tab-n{font-size:12px;color:var(--bz-muted);font-weight:700;margin-left:3px}
.pf-media{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}
.pf-media-cell{position:relative;aspect-ratio:1/1;border-radius:10px;overflow:hidden;background:var(--bz-cream);display:grid;place-items:center}
.pf-media-cell img{width:100%;height:100%;object-fit:cover;display:block}
.pf-media-emoji{font-size:30px}
.pf-media-play{position:absolute;right:6px;bottom:6px;width:22px;height:22px;border-radius:50%;background:rgba(0,0,0,.6);color:#fff;display:grid;place-items:center;font-size:10px;padding-left:2px}

/* Gamification + badges read as one centered row inside the card */
.profile-head .gam-stats{justify-content:center;gap:26px;margin-top:16px;padding-top:14px;border-top:1px solid var(--bz-line)}
.profile-head .gam-stat{text-align:center}
.profile-head .badge-row{justify-content:center;margin-top:10px}

/* Feed */
.feed{margin-top:16px;display:flex;flex-direction:column;gap:16px}

.feed-compose{display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--bz-line);
  border-radius:var(--r);padding:12px 14px;box-shadow:var(--sh);color:var(--bz-muted);font-weight:600}
.feed-compose>span:not(.profile-av){flex:1;font-size:15px}
/* Eats discovery module on the home feed */
.home-eats{background:var(--surface);border:1px solid var(--bz-line);border-radius:16px;padding:14px 16px;margin-bottom:16px}
.he-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.he-top h2{font-size:18px;margin:0}
.he-all{font-size:13px;font-weight:700;color:var(--bz-orange-deep);text-decoration:none;white-space:nowrap}
.he-search{display:flex;gap:8px;margin-bottom:12px}
.he-search input{flex:1;min-width:0;border:1.5px solid var(--bz-line);border-radius:999px;padding:11px 16px;font:inherit;font-size:14px;background:var(--bz-cream);color:var(--text);outline:none}
.he-search input:focus{border-color:var(--bz-orange);background:var(--surface)}
.he-search-btn{flex:none;border:0;border-radius:999px;background:var(--bz-orange);color:#fff;font-weight:800;padding:0 18px;cursor:pointer;font:inherit;font-size:14px}
.he-rail{display:flex;gap:10px;overflow-x:auto;padding-bottom:10px;scrollbar-width:thin;scrollbar-color:var(--bz-muted) transparent}
.he-rail::-webkit-scrollbar{height:10px}
.he-rail::-webkit-scrollbar-track{background:var(--bz-line);border-radius:6px}
.he-rail::-webkit-scrollbar-thumb{background:var(--bz-muted);border-radius:6px;border:2px solid transparent;background-clip:content-box}
.he-rail::-webkit-scrollbar-thumb:hover{background:var(--text)}
/* Always-visible "you can scroll right" affordance — macOS hides the native bar. */
.he-rail-wrap{position:relative}
.he-rail-wrap::after{content:"";position:absolute;top:0;right:0;bottom:12px;width:56px;background:linear-gradient(90deg,transparent,var(--surface) 80%);pointer-events:none;opacity:1;transition:opacity .18s;border-radius:0 12px 12px 0}
.he-rail-wrap::before{content:"";position:absolute;top:0;left:0;bottom:12px;width:56px;background:linear-gradient(270deg,transparent,var(--surface) 80%);pointer-events:none;opacity:1;transition:opacity .18s;border-radius:12px 0 0 12px;z-index:1}
.he-rail-wrap.at-end::after,.he-rail-wrap.no-scroll::after{opacity:0}
.he-rail-wrap.at-start::before,.he-rail-wrap.no-scroll::before{opacity:0}
.he-rail-next,.he-rail-prev{position:absolute;top:calc(50% - 14px);transform:translateY(-50%);width:34px;height:34px;border-radius:50%;border:1px solid var(--bz-line);background:var(--bg);color:var(--text);font-size:19px;font-weight:800;line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.18);transition:opacity .18s;z-index:2}
.he-rail-next{right:6px;opacity:1}
.he-rail-prev{left:6px;opacity:0;pointer-events:none}
.he-rail-next:hover,.he-rail-prev:hover{background:var(--bz-orange);border-color:var(--bz-orange);color:#fff}
.he-rail-wrap:not(.at-start):not(.no-scroll) .he-rail-prev{opacity:1;pointer-events:auto}
.he-rail-wrap.at-end .he-rail-next,.he-rail-wrap.no-scroll .he-rail-next{opacity:0;pointer-events:none}
.he-card{flex:0 0 150px;display:flex;flex-direction:column;gap:2px;text-decoration:none;color:var(--text)}
.he-thumb{display:flex;align-items:center;justify-content:center;height:96px;border-radius:12px;background:var(--bz-cream) center/cover no-repeat;font-size:30px;border:1px solid var(--bz-line);margin-bottom:3px}
.he-name{font-size:14px;line-height:1.25}
.he-sub{font-size:12px;color:var(--bz-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.he-rate{font-size:11.5px;font-weight:700;color:var(--bz-orange-deep)}
.he-rate.he-new{color:var(--bz-muted);font-weight:600}
/* Quick links row: keep each on a single line (no orphaned last word); if the
   three can't fit, the row scrolls sideways instead of wrapping. */
.he-foot{display:flex;gap:16px;margin-top:11px;padding-top:11px;border-top:1px solid var(--bz-line);
  overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.he-foot::-webkit-scrollbar{display:none}
.he-foot a{font-size:13px;font-weight:700;color:var(--text);text-decoration:none;white-space:nowrap;flex:none}
.he-foot a:hover{color:var(--bz-orange-deep)}
@media(max-width:430px){ .he-foot{gap:12px} .he-foot a{font-size:12px} }
.feed-compose-prompt{flex:1;min-width:0;font-size:15px;color:var(--text);text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.feed-compose-vid{background:transparent!important;color:var(--bz-orange-deep)!important;border:1.5px solid var(--bz-orange)}
.feed-compose-vid:hover{background:rgba(245,135,31,.08)!important}
.feed-compose>.profile-av{flex:none}
.feed-compose:hover{border-color:var(--bz-orange)}
.feed-compose-btn{flex:none!important;background:var(--bz-orange);color:#fff;font-weight:800;font-size:13px;padding:8px 14px;border-radius:10px}

.post{background:var(--surface);border:1px solid var(--bz-line);border-radius:var(--r);box-shadow:var(--sh);overflow:hidden}
.post-top{display:flex;align-items:center;gap:11px;padding:14px 16px 10px}
.post-by{flex:1;min-width:0;line-height:1.25}
.post-by a{color:var(--text)}
.post-by b{font-size:15px;font-weight:800}
.post-by span{display:block;font-size:12px;color:var(--bz-muted);font-weight:600}
.post-badge{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:800;flex-shrink:0}
.post-badge.live{color:var(--bz-hot)}
.post-badge.live .d{width:7px;height:7px;border-radius:50%;background:var(--bz-hot);animation:blink 1.3s infinite}
.post-badge.ended{color:var(--bz-muted)}

.post-body{display:block;padding:2px 16px 12px;color:var(--text)}
.post-body h2{font-size:19px;line-height:1.25;font-weight:800}
.post-body p{color:var(--text-soft);font-size:15px;margin-top:6px}
.post-body:hover h2{color:var(--bz-orange-deep)}

.post-countdown{display:block;margin:0 16px 12px;background:var(--bz-ink);color:#fff;border-radius:10px;
  padding:9px 12px;font-size:13px;font-weight:700}
.post-img{display:block;width:100%;max-height:420px;object-fit:cover;border-top:1px solid var(--bz-line);border-bottom:1px solid var(--bz-line)}
.post-img-wrap{position:relative;display:block}
.fc-vid{position:relative}
/* Small image (would upscale → blurry): show it crisp at natural size, centered on a
   blurred fill of itself, so it fits the card without stretching. Toggled by JS. */
.post-img-wrap.img-fit-blur,
.bc-gallery.img-fit-blur{position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;min-height:240px;max-height:420px;background:#0b0b0b}
.post-img-wrap.img-fit-blur::before,
.bc-gallery.img-fit-blur::before{content:"";position:absolute;inset:0;pointer-events:none;background:var(--fitimg) center/cover no-repeat;filter:blur(28px) saturate(1.25);transform:scale(1.3);opacity:.5}
.post-img-wrap.img-fit-blur .post-img,
.bc-gallery.img-fit-blur .bc-image{position:relative;z-index:1;width:auto;height:auto;max-width:92%;max-height:380px;object-fit:contain;border:0}
/* Reusable search field — clean, modern, theme-aware (Eats city/state search, etc.) */
.bz-search{display:flex;align-items:center;gap:10px;background:var(--bz-card,#fff);border:1.5px solid var(--bz-line,#e7e2d6);border-radius:14px;padding:0 8px 0 15px;height:50px;max-width:560px;transition:border-color .15s,box-shadow .15s}
.bz-search:focus-within{border-color:#FF9E00;box-shadow:0 0 0 4px rgba(255,158,0,.14)}
.bz-search > .bz-search-ico{flex:0 0 auto;width:18px;height:18px;color:#9a8e72}
.bz-search input{flex:1;min-width:0;border:0;background:transparent;outline:none;font:inherit;font-size:15.5px;color:inherit;height:100%;-webkit-appearance:none}
.bz-search input::placeholder{color:#9a8e72}
.bz-search input::-webkit-search-cancel-button{-webkit-appearance:none;display:none}
.bz-search .bz-clear{flex:0 0 auto;border:0;background:transparent;cursor:pointer;color:#9a8e72;font-size:17px;line-height:1;padding:6px;border-radius:8px;text-decoration:none}
.bz-search .bz-clear:hover{color:var(--bz-ink,#1a1205);background:rgba(0,0,0,.06)}
.bz-search .bz-go{flex:0 0 auto;border:0;cursor:pointer;background:linear-gradient(180deg,#FFC53D,#FF9E00);color:#1a1205;font-weight:800;font-size:14px;padding:0 18px;height:38px;border-radius:11px}
.bz-search .bz-go:hover{filter:brightness(1.04)}
[data-theme=dark] .bz-search{background:#1c2128;border-color:#2d333b}
[data-theme=dark] .bz-search > .bz-search-ico,[data-theme=dark] .bz-search input::placeholder{color:#8b949e}
[data-theme=dark] .bz-search .bz-clear:hover{background:rgba(255,255,255,.08);color:#e9ebee}
/* Add-to-guide modal (note + photos) */
.gm-overlay{position:fixed;inset:0;z-index:1000;background:rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center;padding:18px}
.gm-card{position:relative;background:var(--bz-card,#fff);border-radius:18px;max-width:440px;width:100%;max-height:90vh;overflow-y:auto;padding:22px 20px;box-shadow:0 24px 60px rgba(0,0,0,.3)}
.gm-x{position:absolute;top:12px;right:12px;border:0;background:transparent;font-size:18px;cursor:pointer;color:#9a8e72;padding:6px;border-radius:8px;line-height:1}
.gm-x:hover{background:rgba(0,0,0,.06)}
.gm-title{margin:0 0 2px;font-size:19px}
.gm-sub{margin:0 0 6px;font-size:13.5px;color:var(--bz-muted)}
.gm-label{display:block;font-weight:700;font-size:13.5px;margin:15px 0 6px}
.gm-card select,.gm-card textarea{width:100%;border:1.5px solid var(--bz-line,#e7e2d6);border-radius:12px;padding:11px 12px;font:inherit;font-size:15px;background:var(--bz-card,#fff);color:inherit;outline:none}
.gm-card select:focus,.gm-card textarea:focus{border-color:#FF9E00;box-shadow:0 0 0 4px rgba(255,158,0,.12)}
.gm-card textarea{resize:vertical;min-height:92px}
.gm-drop{border:2px dashed var(--bz-line,#e7e2d6);border-radius:12px;padding:18px;text-align:center;color:var(--bz-muted);cursor:pointer;font-size:14px;transition:border-color .15s,background .15s}
.gm-drop:hover,.gm-drop.on{border-color:#FF9E00;background:rgba(255,158,0,.06)}
.gm-previews{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.gm-thumb{width:64px;height:64px;object-fit:cover;border-radius:10px;border:1px solid var(--bz-line,#e7e2d6)}
.gm-newlink{display:inline-block;margin-top:12px;font-size:13.5px;color:var(--bz-orange-deep,#d97706);text-decoration:none}
.gm-newlink:hover{text-decoration:underline}
.gm-status{margin:10px 0 0;font-size:13.5px;font-weight:700;min-height:1px}
[data-theme=dark] .gm-card{background:#1c2128}
[data-theme=dark] .gm-x:hover{background:rgba(255,255,255,.08)}
[data-theme=dark] .gm-card select,[data-theme=dark] .gm-card textarea{background:#0d1117;border-color:#2d333b}
/* Guide entry video (Cloudflare Stream iframe) */
.g-entry-video{position:relative;width:100%;max-width:380px;aspect-ratio:4/5;border-radius:12px;overflow:hidden;margin:10px 0;background:#000}
.g-entry-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
/* Share-to-a-friend modal rows */
.sh-label{font-weight:700;font-size:12px;text-transform:uppercase;letter-spacing:.03em;margin:16px 0 8px;color:var(--bz-muted)}
.sh-friends{display:flex;flex-direction:column;gap:2px;max-height:46vh;overflow-y:auto}
.sh-friend{display:flex;align-items:center;gap:10px;padding:7px 6px;border-radius:10px}
.sh-friend:hover{background:rgba(0,0,0,.03)}
.sh-id{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.2}
.sh-id b{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sh-id span{font-size:12.5px;color:var(--bz-muted)}
.sh-av{width:38px;height:38px;border-radius:50%;background-size:cover;background-position:center;flex:0 0 auto;background-color:#eee}
.sh-av-ph{display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#FFB200,#FF7A00);color:#fff;font-weight:800;font-size:15px}
.sh-friend button.sh-sent{background:#d1fae5;color:#047857}
[data-theme=dark] .sh-friend:hover{background:rgba(255,255,255,.05)}
.sh-ext{display:flex;flex-wrap:wrap;gap:8px}
.sh-ext-btn{display:inline-flex;align-items:center;gap:6px;border:1.5px solid var(--bz-line,#e7e2d6);background:transparent;color:inherit;border-radius:999px;padding:8px 14px;font-size:13.5px;font-weight:700;cursor:pointer;text-decoration:none}
.sh-ext-btn:hover{border-color:#FF9E00;background:rgba(255,158,0,.06)}
[data-theme=dark] .sh-ext-btn{border-color:#2d333b}
.img-count-badge{position:absolute;top:10px;right:10px;background:rgba(0,0,0,.62);color:#fff;font-size:12px;font-weight:700;padding:3px 9px;border-radius:999px;backdrop-filter:blur(2px);pointer-events:none;z-index:2}
.t-thumb-wrap .img-count-badge{top:7px;right:7px;font-size:11px;padding:2px 7px}

.post-stats{display:flex;flex-wrap:wrap;gap:14px;padding:12px 16px;font-size:13px;color:var(--bz-muted);font-weight:600}
.post-actions{display:flex;border-top:1px solid var(--bz-line)}
.post-actions a{flex:1;text-align:center;padding:11px 0;font-size:14px;font-weight:700;color:var(--bz-muted)}
.post-actions a:hover{background:var(--bz-cream);color:var(--text)}
.post-actions a+a{border-left:1px solid var(--bz-line)}
/* SVG action icons (cross-OS consistent; inherit the button's currentColor) */
.pa-ic{width:17px;height:17px;vertical-align:-3.5px;flex:none;pointer-events:none}

.feed-empty{background:var(--surface);border:1px dashed var(--bz-line);border-radius:var(--r);padding:36px 20px;text-align:center;color:var(--bz-muted)}
.feed-empty.review-cta{border:1.5px solid var(--bz-orange);background:rgba(245,135,31,.05)}
.feed-empty.review-cta .fe-title{color:var(--bz-orange-deep)}
/* Gold Buzz Coin glyph — replaces the silver 🪙 emoji everywhere (see gold-coin script). */
.bz-coin{display:inline-block;width:1.05em;height:1.05em;border-radius:50%;background:radial-gradient(circle at 34% 30%, #ffe9a6, #f8cd49 45%, #e4a826 75%, #c08a1c 100%);box-shadow:inset 0 -.05em .09em rgba(120,80,0,.38), inset 0 .05em .09em rgba(255,255,255,.55), 0 .03em .05em rgba(0,0,0,.15);vertical-align:-.16em;position:relative}
.bz-coin::after{content:"";position:absolute;inset:17%;border-radius:50%;border:.05em solid rgba(125,82,8,.3)}
/* Cold-start "first review" nudge card on the home feed. */
.review-nudge{position:relative;display:flex;align-items:center;gap:14px;flex-wrap:wrap;background:rgba(245,135,31,.06);border:1.5px solid var(--bz-orange);border-radius:16px;padding:15px 18px;margin-bottom:16px}
.review-nudge .rn-emoji{font-size:28px;flex-shrink:0;line-height:1}
.review-nudge .rn-copy{flex:1;min-width:180px}
.review-nudge .rn-copy b{font-size:14.5px;color:var(--text)}
.review-nudge .rn-copy p{margin:3px 0 0;font-size:13px;color:var(--bz-muted)}
.review-nudge .rn-cta{flex-shrink:0;white-space:nowrap}
.rn-x{position:absolute;top:7px;right:10px;border:0;background:transparent;color:var(--bz-muted);font-size:13px;line-height:1;cursor:pointer;opacity:.5;transition:opacity .12s}
.rn-x:hover{opacity:1;color:var(--text)}
.rn-bonus{font-size:.85em;color:var(--bz-muted);font-weight:600;white-space:nowrap}
@media (max-width:520px){.review-nudge .rn-cta{flex:1 0 100%;text-align:center}}
.feed-empty .fe-title{font-size:18px;font-weight:800;color:var(--text);margin-bottom:6px}
.feed-empty .btn{margin-top:14px}

.feed-nav{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:6px 2px}
.feed-nav a,.feed-nav span{font-size:14px;font-weight:700;color:var(--text)}
.feed-nav a{padding:8px 14px;background:var(--surface);border:2px solid var(--bz-line);border-radius:10px}
.feed-nav a:hover{border-color:var(--bz-orange)}
.feed-nav .disabled{color:var(--bz-muted);opacity:.5;padding:8px 14px}
.feed-nav .fn-page{color:var(--bz-muted);font-weight:600}

/* ===== Hashtags + search ================================================= */
.tag{display:inline-block;font-size:12.5px;font-weight:700;color:var(--bz-orange-deep);
  background:#FFF1DD;border:1px solid #F6D9AE;border-radius:999px;padding:3px 10px;line-height:1.4;white-space:nowrap}
a.tag:hover{background:var(--bz-orange);color:#fff;border-color:var(--bz-orange)}
.tag-row{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.tcard .tag-row{margin-top:10px}

/* Landing search bar + trending tag cloud */
.searchbar{display:flex;gap:8px;max-width:460px;margin:18px auto 0}
.searchbar input{flex:1;min-width:0;border:2px solid var(--bz-line);border-radius:12px;padding:12px 14px;
  font-family:var(--body);font-size:15px;background:var(--surface);color:var(--text)}
.searchbar input:focus{outline:none;border-color:var(--bz-orange)}
.searchbar .btn{padding:12px 16px}
.tag-cloud{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:16px auto 0;max-width:560px}

/* Styled paginator (matches partials/pager on public pages) */
.pagination{display:flex;justify-content:center;gap:6px;flex-wrap:wrap}
.pagination a,.pagination span{padding:8px 12px;border:2px solid var(--bz-line);border-radius:10px;
  background:var(--surface);font-size:13.5px;font-weight:700;color:var(--text)}
.pagination a:hover{border-color:var(--bz-orange)}
.pagination span[aria-current]{background:var(--bz-amber);border-color:var(--bz-amber-deep)}
.pagination .muted{color:var(--bz-muted);opacity:.6}

/* ===== Buzz-to-unlock (gated link/image) ================================= */
.mf.toggle{flex-direction:row;align-items:center;gap:10px;cursor:pointer}
.mf.toggle input[type=checkbox]{width:18px;height:18px;flex:none;accent-color:var(--bz-orange);cursor:pointer}
.mf.toggle>span{font-size:13px;font-weight:700;color:var(--text-soft)}
.bc-locked{margin-top:14px;text-align:center;border:2px dashed #E7C9A0;border-radius:14px;padding:20px 16px;
  background:linear-gradient(180deg,#FFF6E0,#FFF1DD)}
.bc-locked .lk-ico{font-size:28px;display:block;line-height:1}
.bc-locked b{display:block;margin-top:8px;font-size:16px;color:var(--text)}
.bc-locked .lk-sub{display:block;margin-top:4px;font-size:13px;color:var(--bz-muted);max-width:300px;margin-left:auto;margin-right:auto}

/* ===== Communities ====================================================== */
/* Browse / pills on the landing page */
.comm-bar{display:flex;flex-wrap:wrap;justify-content:center;gap:9px;margin:18px auto 0;max-width:680px}
.comm-pill{background:var(--surface);border:2px solid var(--bz-line);border-radius:999px;padding:8px 15px;font-weight:700;font-size:14px}
.comm-pill:hover{border-color:var(--bz-orange)}
.comm-pill-all{background:var(--bz-ink);color:#fff;border-color:var(--text)}

/* Eats promo banner (landing) */
.eat-promo{display:flex;align-items:center;gap:34px;background:var(--surface);border:2px solid var(--text);
  border-radius:22px;padding:30px 32px;box-shadow:0 10px 0 rgba(20,20,20,.08)}
.eat-promo-copy{flex:1;min-width:0}
.eat-promo-copy h2{margin:6px 0 8px}
.eat-promo-copy p{color:var(--text-soft,#6b6457);max-width:46ch;margin:0}
.eat-promo-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.eat-promo-art{flex:none}
.eat-promo-card{width:250px;background:var(--surface);border:2px solid var(--text);border-radius:16px;
  box-shadow:0 8px 0 rgba(20,20,20,.10);overflow:hidden}
.eat-promo-cover{height:110px;background:linear-gradient(135deg,var(--bz-orange),#FFB200);
  color:var(--bz-ink);font-weight:800;font-size:13px;display:flex;align-items:flex-start;justify-content:flex-end;padding:10px}
.eat-promo-name{font-weight:800;font-size:16px;padding:12px 14px 2px}
.eat-promo-meta{font-size:13px;color:var(--text-soft,#6b6457);padding:0 14px 14px}
.eat-promo-stars{color:var(--bz-orange);font-weight:800}
@media(max-width:680px){.eat-promo{flex-direction:column;text-align:center;padding:26px 20px}
  .eat-promo-actions{justify-content:center}.eat-promo-copy p{margin:0 auto}}

/* Feature tiles (landing — replaces the live trending grid) */
.feat-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:26px auto 0;max-width:920px;text-align:left}
@media(max-width:820px){.feat-tiles{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.feat-tiles{grid-template-columns:1fr}}
.feat-tile{display:flex;flex-direction:column;background:var(--surface);border:2px solid var(--bz-line);
  border-radius:18px;padding:20px;text-decoration:none;color:inherit;
  transition:transform .12s ease,border-color .12s ease,box-shadow .12s ease}
.feat-tile:hover{transform:translateY(-4px);border-color:var(--bz-orange);box-shadow:0 10px 0 rgba(20,20,20,.08)}
.ft-ic{font-size:30px;line-height:1;margin-bottom:12px}
.ft-title{font-weight:800;font-size:18px;color:var(--text)}
.ft-desc{font-size:14px;line-height:1.5;color:var(--text-soft,#6b6457);margin-top:5px}

/* Community chip on buzz cards & the buzz page */
.comm-chip{display:inline-block;font-size:12px;font-weight:800;color:var(--bz-orange-deep);
  background:#FFF1DD;border:1px solid #F6D9AE;border-radius:999px;padding:3px 11px;margin-bottom:8px}
a.comm-chip:hover{background:var(--bz-orange);color:#fff}
.tcard .comm-chip{margin-bottom:8px}

/* Browse grid */
.comm-top{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:6px}
/* Communities search bar */
.comm-search{display:flex;gap:10px;max-width:580px;margin:16px 0 8px}
.comm-search-field{position:relative;flex:1;display:flex;align-items:center}
.comm-search-ic{position:absolute;left:15px;font-size:16px;pointer-events:none;opacity:.7}
.comm-search-field input[type=search]{width:100%;font-size:16px;padding:14px 16px 14px 42px;border:2px solid var(--bz-ink);border-radius:14px;background:var(--surface);color:var(--text);box-shadow:0 4px 0 rgba(20,20,20,.10);outline:none;-webkit-appearance:none}
.comm-search-field input[type=search]::placeholder{color:#9a9079}
.comm-search-field input[type=search]:focus{border-color:var(--bz-orange);box-shadow:0 4px 0 rgba(245,135,31,.22)}
.comm-search button{flex:none;padding:14px 24px;border-radius:14px;font-weight:800;box-shadow:0 4px 0 rgba(20,20,20,.18)}
@media(max-width:520px){.comm-search{flex-direction:column}.comm-search button{width:100%}}

/* "Not interested" on For You cards */
.post{position:relative}
.post-ni{position:absolute;top:10px;right:10px;width:26px;height:26px;border-radius:999px;border:0;background:transparent;color:var(--bz-muted);font-size:13px;line-height:1;cursor:pointer;opacity:.45;transition:opacity .12s,background .12s;z-index:2}
.post-ni:hover{opacity:1;background:var(--bz-cream);color:var(--text)}
/* Social login (Google / Apple) buttons on the auth pages. Brand-fixed colors. */
.oauth-row{display:flex;flex-direction:column;gap:10px;margin:2px 0}
.oauth-btn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:11px 14px;border-radius:12px;font-weight:700;font-size:14.5px;cursor:pointer;text-decoration:none;border:1px solid var(--bz-line);transition:filter .12s,background .12s}
.oauth-btn svg{flex-shrink:0}
.oauth-google{background:#fff;color:#1f1f1f;border-color:#dadce0}
.oauth-google:hover{background:#f6f7f8}
.oauth-apple{background:#000;color:#fff;border-color:#000}
.oauth-apple:hover{filter:brightness(1.4)}
.oauth-sep{display:flex;align-items:center;gap:12px;color:var(--bz-muted);font-size:12.5px;margin:15px 0}
.oauth-sep::before,.oauth-sep::after{content:"";flex:1;height:1px;background:var(--bz-line)}
/* Reserve room for the top-right ✕ so the community badge (🔥 Deals etc.) never sits under it. */
.post:has(.post-ni) .post-top{padding-right:44px}

/* Saved Collections */
.coll-strip{display:flex;flex-wrap:wrap;gap:9px;align-items:flex-start;margin:14px 0 18px}
.coll-chip{display:inline-flex;align-items:center;gap:7px;background:var(--surface);border:2px solid var(--bz-line);border-radius:999px;padding:8px 14px;font-weight:700;font-size:14px;color:var(--text);text-decoration:none;cursor:pointer}
.coll-chip:hover{border-color:var(--bz-orange)}
.coll-chip span{background:var(--bz-cream);border-radius:999px;padding:1px 8px;font-size:12px}
.coll-chip--new{border-style:dashed}
.coll-new{position:relative}
.coll-new summary{list-style:none}.coll-new summary::-webkit-details-marker{display:none}
.coll-new-form{display:flex;gap:8px;margin-top:8px;background:var(--surface);border:2px solid var(--bz-line);border-radius:12px;padding:10px;position:absolute;z-index:30;box-shadow:0 8px 24px rgba(0,0,0,.14)}
.coll-new-form input{border:2px solid var(--bz-line);border-radius:9px;padding:8px 10px;font-size:14px}
.bm-item{margin-bottom:6px}
.coll-add,.coll-remove{margin:-4px 0 16px}
.coll-add summary{list-style:none;cursor:pointer;font-size:13px;font-weight:700;color:var(--bz-muted);padding:4px 2px}
.coll-add summary::-webkit-details-marker{display:none}
.coll-add-list{display:flex;flex-wrap:wrap;gap:7px;margin-top:6px}
.coll-add-list button,.coll-remove button{background:var(--surface);border:2px solid var(--bz-line);border-radius:999px;padding:6px 12px;font-size:13px;font-weight:700;color:var(--text);cursor:pointer}
.coll-add-list button:hover{border-color:var(--bz-orange);background:var(--bz-cream)}
.coll-remove button{color:var(--bz-muted);border-color:transparent}
.coll-remove button:hover{color:#b91c1c}
.coll-manage{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-bottom:16px}
.coll-rename{display:flex;gap:8px}
.coll-rename input{border:2px solid var(--bz-line);border-radius:9px;padding:8px 10px;font-size:14px;max-width:220px}

/* Community thread: search + grid/list toggle */
.feed-controls{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:14px}
.feed-search{position:relative;flex:1;min-width:200px;display:flex;align-items:center}
.feed-search-ic{position:absolute;left:13px;font-size:15px;pointer-events:none;opacity:.7}
.feed-search input[type=search]{width:100%;font-size:15px;padding:11px 14px 11px 38px;border:2px solid var(--bz-ink);border-radius:12px;background:var(--surface);color:var(--text);box-shadow:0 3px 0 rgba(20,20,20,.08);outline:none;-webkit-appearance:none}
.feed-search input[type=search]::placeholder{color:#9a9079}
.feed-search input[type=search]:focus{border-color:var(--bz-orange);box-shadow:0 3px 0 rgba(245,135,31,.22)}
.feed-views{display:inline-flex;border:2px solid var(--bz-ink);border-radius:12px;overflow:hidden;flex:none}
.feed-views button{background:var(--surface);border:0;border-left:2px solid var(--bz-ink);padding:10px 14px;font-size:16px;line-height:1;cursor:pointer;color:var(--text)}
.feed-views button:first-child{border-left:0}
.feed-views button.on{background:var(--bz-orange);color:#fff}
/* List view: one buzz per row, thumbnail on the left */
.tgrid.is-list{grid-template-columns:1fr}
.tgrid.is-list .tcard{display:flex;flex-direction:row;align-items:flex-start;gap:14px}
.tgrid.is-list .tcard .t-thumb,.tgrid.is-list .tcard .t-thumb-wrap{width:140px;height:96px;flex:none;margin:0}
.tgrid.is-list .tcard .t-thumb{object-fit:cover;border-radius:12px}
.tgrid.is-list .tcard .t-title{font-size:16px}
/* Align the meta (buzzing / views / date) + tags into fixed columns so they line
   up across every row, with or without a thumbnail. Title absorbs the slack.
   Phones (<700px) keep the flexible layout. */
@media(min-width:700px){
  .tgrid.is-list .tcard .t-title{flex:1 1 auto;min-width:0}
  .tgrid.is-list .tcard .t-meta{flex:0 0 128px;flex-direction:column;flex-wrap:nowrap;
    align-items:flex-start;gap:3px;margin-top:0}
  .tgrid.is-list .tcard .t-meta .t-when{margin-left:0}
  /* Indent views + date so they line up under the buzzing text (past the ⚡). */
  .tgrid.is-list .tcard .t-meta>span:not(.hot){padding-left:1.4em}
  .tgrid.is-list .tcard .tag-row{flex:0 0 152px;align-content:flex-start;margin-top:0}
}
@media(max-width:560px){.tgrid.is-list .tcard .t-thumb,.tgrid.is-list .tcard .t-thumb-wrap{width:96px;height:72px}}
.comm-grid{display:grid;grid-template-columns:1fr;gap:12px;margin-top:18px}
@media(min-width:680px){.comm-grid{grid-template-columns:1fr 1fr}}
.comm-card{display:flex;gap:13px;background:var(--surface);border:1px solid var(--bz-line);border-radius:var(--r);padding:15px 16px;box-shadow:var(--sh)}
.comm-card:hover{border-color:var(--bz-orange)}
.comm-emoji{font-size:30px;line-height:1;flex:none}
.comm-body{min-width:0}
.comm-body b{font-size:16px;font-weight:800;display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.comm-handle{display:block;font-size:12.5px;color:var(--bz-muted);font-weight:600;margin-top:1px}
.comm-body p{font-size:13.5px;color:var(--text-soft);margin-top:6px}
.comm-meta{font-size:12px;color:var(--bz-muted);font-weight:600;margin-top:7px}
.comm-badge{font-size:10px;text-transform:uppercase;letter-spacing:.5px;font-weight:800;color:#fff;background:var(--bz-good);border-radius:6px;padding:2px 6px}

/* Community page hero */
.comm-hero{display:flex;align-items:center;gap:14px;background:var(--surface);border:2px solid var(--bz-ink);
  border-radius:var(--r-lg);padding:18px 20px;box-shadow:var(--sh)}
.comm-hero-emoji{font-size:42px;line-height:1;flex:none}
.comm-hero-meta{flex:1;min-width:0}
.comm-hero-meta h1{font-size:22px;font-weight:800;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.comm-hero-meta .handle{color:var(--bz-muted);font-weight:600;font-size:13px;margin-top:2px}
.comm-hero-action{flex:none}
.comm-role{font-weight:800;font-size:13px;color:var(--bz-orange-deep)}
.comm-desc{margin:14px 4px 0;color:var(--text-soft);font-size:15px}
.comm-locked{margin-top:14px;text-align:center;background:var(--bz-cream);border:2px dashed var(--bz-line);
  border-radius:var(--r);padding:14px;font-size:14px;font-weight:600;color:var(--bz-muted)}
/* Private communities */
.comm-badge-private{background:#6b7280}
.comm-locked-gate{margin-top:20px;text-align:center;background:var(--surface);border:1px solid var(--bz-line);border-radius:18px;padding:36px 22px}
.comm-locked-gate .clg-ic{font-size:42px;margin-bottom:8px}
.comm-locked-gate h2{font-size:20px;font-weight:800;margin:0 0 6px}
.comm-locked-gate p{color:var(--text-soft);margin:0 0 14px}
.comm-locked-gate form{display:inline-block}
.comm-requests{margin-top:16px;border:1px solid var(--bz-line);border-radius:16px;padding:14px}
.comm-requests h3{font-size:15px;margin:0 0 10px;display:flex;align-items:center;gap:8px}
.comm-request{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 0;border-top:1px solid var(--bz-line)}
.comm-request:first-of-type{border-top:0}
.cr-id{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--text)}
.cr-id span{display:flex;flex-direction:column;line-height:1.2}
.cr-actions{display:flex;gap:6px;flex:none}
.cr-actions form{margin:0}
.cc-private{display:flex;align-items:flex-start;gap:10px;cursor:pointer}
.cc-private input{width:18px;height:18px;margin-top:2px;flex:none;accent-color:var(--bz-orange)}
.cc-private span{display:flex;flex-direction:column;line-height:1.3}

/* ===== Community moderation ============================================= */
.btn-xs{font-size:12px;padding:6px 11px;border-radius:9px}
.btn-ghost.danger{color:var(--bz-hot);border-color:#f3cfc7}
.btn-ghost.danger:hover{border-color:var(--bz-hot);background:#fde8e4}
.comm-mod-remove{margin-left:8px;border:0;background:transparent;color:var(--bz-muted);cursor:pointer;
  font-size:12px;font-weight:700}
.comm-mod-remove:hover{color:var(--bz-hot)}

.mem-list{display:flex;flex-direction:column}
.mem-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:11px 0;border-top:1px solid var(--bz-line)}
.mem-row:first-child{border-top:0}
.mem-row>.profile-av.sm{flex:none}
.mem-id{flex:1;min-width:0}
.mem-id b{font-size:15px;font-weight:800;display:block}
.mem-id span{font-size:12.5px;color:var(--bz-muted)}
.mem-role{font-style:normal;font-weight:800;text-transform:uppercase;letter-spacing:.4px;font-size:10.5px}
.mem-muted{font-style:normal;font-weight:700;color:var(--bz-hot);margin-left:4px}
.mem-owner{font-weight:800;color:var(--bz-orange-deep)}
.mem-moderator{color:var(--bz-good)}
.mem-member{color:var(--bz-muted)}
.mem-actions{display:flex;gap:7px;align-items:center;flex:none}
.mem-actions form{margin:0}
.mem-search{display:flex;gap:8px;align-items:center;margin:10px 0 4px}
.mem-search input{flex:1;border:2px solid var(--bz-line);border-radius:10px;padding:9px 12px;font-size:14px;
  font-family:var(--body);background:var(--surface);color:var(--text)}
.mem-search input:focus{outline:none;border-color:var(--bz-orange)}
.mem-perms{flex-basis:100%;display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:2px 0 4px 50px;
  background:var(--bz-cream);border-radius:10px;padding:8px 12px}
.mem-perms label{display:flex;align-items:center;gap:5px;font-size:12.5px;font-weight:600}

/* Official vs community-led sections on the browse page */
.comm-section{font-size:18px;font-weight:800;margin:30px 0 0;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.comm-section span{font-size:13px;font-weight:600;color:var(--bz-muted)}
.comm-section + .comm-grid{margin-top:14px}

/* Title-first community URL row */
.url-row{display:flex;align-items:center;border:2px solid var(--bz-line);border-radius:12px;overflow:hidden;background:var(--surface)}
.url-row span{padding:0 4px 0 12px;color:var(--bz-muted);font-size:14px;font-weight:600;white-space:nowrap}
.url-row input{flex:1;min-width:0;border:0!important;padding:12px 12px 12px 2px!important;font-size:15px;outline:none}

/* ===== Hashtag autocomplete ============================================= */
.tag-ac{position:relative}
.tag-ac-list{position:absolute;top:calc(100% + 5px);left:0;right:0;z-index:60;background:var(--surface);
  border:2px solid var(--bz-line);border-radius:12px;box-shadow:var(--sh);overflow:hidden;max-height:240px;overflow-y:auto}
.tag-ac-item{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 13px;cursor:pointer}
.tag-ac-item b{color:var(--bz-orange-deep);font-weight:700;font-size:14px}
.tag-ac-item span{font-size:12px;color:var(--bz-muted);font-weight:600}
.tag-ac-item:hover,.tag-ac-item.on{background:var(--bz-cream)}

/* ===== Preset emoji picker ============================================== */
.emoji-row{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.emoji-btn{border:1.5px solid var(--bz-line);background:var(--surface);border-radius:10px;width:36px;height:36px;
  font-size:19px;line-height:1;cursor:pointer;display:grid;place-items:center;transition:.12s}
.emoji-btn:hover{border-color:var(--bz-orange);background:var(--bz-cream)}
.emoji-btn.on{border-color:var(--bz-orange);background:#FFF1DD;box-shadow:0 0 0 2px rgba(245,135,31,.2)}

/* ===== Toggle switch (buzz-to-unlock) ================================== */
.switch-row{display:flex;align-items:center;justify-content:space-between;gap:14px;cursor:pointer;
  background:var(--surface);border:2px solid var(--bz-line);border-radius:12px;padding:12px 14px}
.switch-row:hover{border-color:var(--bz-orange)}
.switch-text{font-size:13.5px;font-weight:700;color:var(--text);line-height:1.35}
.switch-text em{font-weight:500;color:var(--bz-muted);font-style:normal}
.switch{position:relative;flex:none;width:46px;height:26px}
.switch input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer;z-index:2}
.switch-track{position:absolute;inset:0;background:#d9d2bf;border-radius:999px;transition:.2s}
.switch-knob{position:absolute;top:3px;left:3px;width:20px;height:20px;background:var(--surface);border-radius:50%;
  box-shadow:0 1px 3px rgba(0,0,0,.3);transition:.2s}
.switch input:checked+.switch-track{background:var(--bz-orange)}
.switch input:checked+.switch-track .switch-knob{transform:translateX(20px)}
.switch input:focus-visible+.switch-track{box-shadow:0 0 0 3px rgba(245,135,31,.35)}

/* ===== Comments 2.0 — threads, images, likes ============================ */
.btn-sm{font-size:13px;padding:8px 14px;border-radius:10px}
.comment-form .cf-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;
  border-top:1px solid var(--bz-line);padding-top:10px;margin-top:6px}
.cf-tools{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0}
.emoji-mini{display:flex;gap:2px;flex-wrap:wrap}
.emoji-btn-sm{border:0;background:transparent;font-size:17px;line-height:1;cursor:pointer;padding:3px;border-radius:7px}
.emoji-btn-sm:hover{background:var(--bz-cream)}
.cf-img{cursor:pointer;font-size:16px;line-height:1;display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border:1.5px solid var(--bz-line);border-radius:10px;background:var(--surface);color:var(--text);flex:0 0 auto}
.cf-img:hover{border-color:var(--bz-orange);background:var(--bz-cream)}
.cf-img.has-file{border-color:var(--bz-orange);background:#FFF1DD}
.cf-imgname{font-size:12px;color:var(--bz-muted);max-width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.comment-list{display:flex;flex-direction:column;gap:4px}
.cmt{display:flex;gap:10px;padding:10px 0}
.cmt-av{width:34px;height:34px;border-radius:50%;background:var(--bz-ink);color:#fff;display:grid;place-items:center;
  font-weight:800;font-size:14px;flex:none}
/* Avatar photo (when the member has one) covers the circle in comments + header. */
.cmt-av.has-img,.bc-host .av.has-img{background-size:cover;background-position:center;background-repeat:no-repeat;color:transparent}
.cmt-body{flex:1;min-width:0}
.cmt-meta{font-size:12.5px;color:var(--bz-muted)}
.cmt-meta b{color:var(--text);font-size:14px;font-weight:800}
.cmt-text{margin:3px 0 0;font-size:15px;line-height:1.45;word-wrap:break-word;overflow-wrap:anywhere}
.cmt-img{margin-top:8px;max-height:260px;border-radius:12px;border:1px solid var(--bz-line)}
.cmt-actions{display:flex;align-items:center;gap:14px;margin-top:6px}
.cmt-actions button{border:0;background:transparent;cursor:pointer;font-size:13px;font-weight:700;color:var(--bz-muted);padding:0}
.cmt-actions button:hover{color:var(--text)}
.cmt-like{display:inline-flex;align-items:center;gap:5px}
.cmt-like.on{color:var(--bz-hot)}
.cmt-del{display:inline}
.cmt-del button{color:var(--bz-muted)}
.cmt-del button:hover{color:var(--bz-hot)}
.cmt-replybox{margin-top:10px}
.cmt-replybox .comment-form{margin-bottom:0}
.cmt-children{margin-top:6px;margin-left:6px;padding-left:14px;border-left:2px solid var(--bz-line)}

/* ===== Image lightbox =================================================== */
.bc-image,.cmt-img{cursor:zoom-in}
.lightbox{position:fixed;inset:0;z-index:200;background:rgba(0,0,0,.88);display:grid;place-items:center;
  padding:24px;cursor:zoom-out}
.lightbox[hidden]{display:none}   /* the hidden attribute must win over display:grid */
.lightbox img{max-width:96vw;max-height:92vh;object-fit:contain;border-radius:8px;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.lightbox-x{position:absolute;top:16px;right:18px;width:42px;height:42px;border:0;border-radius:50%;
  background:rgba(255,255,255,.15);color:#fff;font-size:20px;cursor:pointer;line-height:1}
.lightbox-x:hover{background:rgba(255,255,255,.3)}

/* ===== Multi-image: previews, edit grid, buzz-page gallery =============== */
.img-previews{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.img-previews img{width:64px;height:64px;object-fit:cover;border-radius:8px;border:2px solid var(--bz-line)}

.img-edit-grid{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px}
.img-edit-item{display:flex;flex-direction:column;gap:4px;cursor:pointer}
.img-edit-item img{width:80px;height:80px;object-fit:cover;border-radius:10px;border:2px solid var(--bz-line)}
.img-rm{display:flex;align-items:center;gap:4px;font-size:11px;color:var(--bz-muted)}
.img-edit-item input:checked ~ img,
.img-edit-item:has(input:checked) img{opacity:.4;border-color:var(--bz-hot)}

.bc-gallery{display:grid;gap:3px;border-bottom:2px solid var(--bz-ink)}
.bc-gallery .bc-image{width:100%;display:block;border:0}
.bc-gallery[data-count="1"]{grid-template-columns:1fr}
.bc-gallery[data-count="1"] .bc-image{max-height:340px;object-fit:cover}
.bc-gallery:not([data-count="1"]){grid-template-columns:1fr 1fr}
.bc-gallery:not([data-count="1"]) .bc-image{height:165px;object-fit:cover}
.bc-gallery[data-count="3"] .bc-image:first-child,
.bc-gallery[data-count="5"] .bc-image:first-child{grid-column:1 / -1;height:210px}

/* Multi-image carousel (enhanced from the grid by JS for 2+ images) */
.bc-gallery.is-carousel{display:block;grid-template-columns:none;position:relative;overflow:hidden}
.bc-gallery.is-carousel .bc-scroller{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.bc-gallery.is-carousel .bc-scroller::-webkit-scrollbar{display:none}
.bc-gallery.is-carousel .bc-image{flex:0 0 100%;width:100%;height:auto;max-height:480px;object-fit:cover;scroll-snap-align:center}
.bc-gallery .bc-count{position:absolute;top:11px;right:11px;background:rgba(0,0,0,.6);color:#fff;font-size:12px;font-weight:800;padding:3px 10px;border-radius:999px;z-index:3;pointer-events:none}
.bc-gallery .bc-arrow{position:absolute;top:50%;transform:translateY(-50%);width:36px;height:36px;border:0;border-radius:50%;background:rgba(0,0,0,.45);color:#fff;font-size:20px;line-height:1;cursor:pointer;z-index:3;display:flex;align-items:center;justify-content:center}
.bc-gallery .bc-arrow:hover{background:rgba(0,0,0,.72)}
.bc-gallery .bc-arrow.prev{left:9px}
.bc-gallery .bc-arrow.next{right:9px}
.bc-gallery .bc-dots{position:absolute;bottom:11px;left:0;right:0;display:flex;gap:6px;justify-content:center;z-index:3;pointer-events:none}
.bc-gallery .bc-dot{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.5);transition:background .15s}
.bc-gallery .bc-dot.on{background:#fff}

/* ===== Stories: tray + full-screen viewer ============================== */
.story-tray{display:flex;gap:14px;overflow-x:auto;padding:4px 2px 12px;scrollbar-width:none;margin-bottom:4px}
.story-tray::-webkit-scrollbar{display:none}
.story-cell{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:5px;width:66px;text-decoration:none}
.story-ring{position:relative;width:62px;height:62px;border-radius:50%;display:grid;place-items:center;padding:3px}
.story-ring .profile-av,.story-ring .avatar{width:54px!important;height:54px!important}
.story-ring--new{background:linear-gradient(45deg,#f5871f,#f46a6a,#7c3aed)}
.story-ring--seen{background:var(--bz-line)}
.story-ring--add{background:var(--bz-line)}
.story-ring--new .profile-av,.story-ring--seen .profile-av,.story-ring--add .profile-av{border:2px solid var(--surface)}
.story-plus{position:absolute;right:-1px;bottom:-1px;width:21px;height:21px;border-radius:50%;background:var(--bz-orange,#f5871f);color:#fff;font-size:13px;font-weight:800;display:grid;place-items:center;border:2px solid var(--surface)}
.story-name{font-size:12px;color:var(--text);max-width:64px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.story-bg-row{display:flex;gap:9px;flex-wrap:wrap}
.story-bg-swatch{width:34px;height:34px;border-radius:8px;cursor:pointer;border:2px solid var(--bz-line);position:relative}
.story-bg-swatch input{position:absolute;opacity:0}
.story-bg-swatch:has(input:checked){outline:3px solid var(--bz-ink);outline-offset:1px}
.story-file{display:block;width:100%;font-size:14px}

.story-viewer{position:fixed;inset:0;z-index:300;background:#000;display:flex;flex-direction:column;max-width:520px;margin:0 auto}
.sv-bars{display:flex;gap:4px;padding:10px 12px 4px}
.sv-bar{flex:1;height:3px;border-radius:2px;background:rgba(255,255,255,.3);overflow:hidden}
.sv-bar i{display:block;height:100%;width:0;background:#fff}
.sv-head{display:flex;align-items:center;gap:9px;padding:6px 12px 8px;color:#fff;position:relative;z-index:2}
.sv-head .profile-av,.sv-head .avatar{width:34px!important;height:34px!important}
.sv-head-id{display:flex;flex-direction:column;line-height:1.15;font-size:13px;color:#fff}
.sv-head-id span{font-size:11px;opacity:.7}
.sv-del,.sv-close{background:none;border:0;color:#fff;font-size:18px;cursor:pointer;text-decoration:none;padding:4px}
.sv-stage{flex:1;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
.sv-img{max-width:100%;max-height:100%;object-fit:contain}
.sv-text{display:none;width:100%;height:100%;align-items:center;justify-content:center;text-align:center;color:#fff;font-size:26px;font-weight:700;padding:32px;box-sizing:border-box}
.sv-caption{position:absolute;left:0;right:0;bottom:0;padding:16px 18px;color:#fff;font-size:15px;background:linear-gradient(transparent,rgba(0,0,0,.7))}
.sv-zone{position:absolute;top:64px;bottom:0;width:34%;background:transparent;border:0;cursor:pointer;z-index:1}
.sv-prev{left:0}
.sv-next{right:0;width:66%}
.sv-video{max-width:100%;max-height:100%;width:auto;height:100%;object-fit:contain;background:#000}
/* Viewer engagement: reactions + reply (non-owner), seen-by (owner) */
.sv-actions{position:absolute;left:0;right:0;bottom:0;z-index:4;padding:10px 12px 14px;background:linear-gradient(transparent,rgba(0,0,0,.6));display:flex;flex-direction:column;gap:8px}
.sv-reacts{display:flex;gap:6px;justify-content:center}
.sv-react{font-size:24px;line-height:1;background:rgba(0,0,0,.35);border:0;border-radius:50%;width:42px;height:42px;cursor:pointer;transition:transform .12s,background .12s}
.sv-react:hover{transform:scale(1.18)}
.sv-react.on{background:rgba(255,255,255,.28);transform:scale(1.18)}
.sv-reply{display:flex;gap:8px;align-items:center}
.sv-reply input{flex:1;border:2px solid rgba(255,255,255,.5);background:rgba(0,0,0,.35);color:#fff;border-radius:999px;padding:10px 16px;font-size:14px;outline:none}
.sv-reply input::placeholder{color:rgba(255,255,255,.7)}
.sv-reply input:focus{border-color:#fff}
.sv-reply.sent input{border-color:#34c38f}
.sv-reply.sent::after{content:'Sent ✓';color:#34c38f;font-size:13px;font-weight:700;align-self:center}
.sv-seen-toggle{position:absolute;left:0;right:0;bottom:0;z-index:4;border:0;background:linear-gradient(transparent,rgba(0,0,0,.6));color:#fff;font-size:13px;font-weight:700;padding:14px;cursor:pointer;text-align:center}
.sv-seen-sheet{position:absolute;left:0;right:0;bottom:0;z-index:5;max-height:46%;overflow-y:auto;background:var(--surface);border-top-left-radius:16px;border-top-right-radius:16px;padding:14px 16px}
.sv-seen-row{display:flex;justify-content:space-between;align-items:center;padding:8px 2px;border-bottom:1px solid var(--bz-line);color:var(--text);font-size:14px}
.sv-seen-row:last-child{border-bottom:0}
/* Story composer: video upload + webcam record */
.svid-modes{display:flex;gap:8px;margin-bottom:8px}
.svid-mode{border:2px solid var(--bz-line);background:var(--surface);border-radius:999px;padding:5px 13px;font-size:13px;font-weight:700;cursor:pointer;color:var(--text)}
.svid-mode.on{border-color:var(--bz-orange);background:var(--bz-orange);color:#fff}
.svid-rec{margin-top:8px}
.svid-stage{position:relative;background:#000;border-radius:12px;overflow:hidden;aspect-ratio:9/16;max-height:340px;margin:0 auto}
.svid-stage video{width:100%;height:100%;object-fit:cover}
.svid-dot{position:absolute;top:8px;left:8px;background:rgba(220,38,38,.9);color:#fff;font-size:11px;font-weight:800;padding:2px 8px;border-radius:999px}
.svid-controls{display:flex;gap:8px;justify-content:center;margin-top:8px}
.svid-preview{display:block;width:100%;max-height:340px;border-radius:12px;margin-top:8px;background:#000}
.svid-status{font-size:12px;color:var(--muted);margin-top:6px}
.btn-xs{padding:6px 14px;font-size:13px;border-radius:999px}

/* ===== Social: feed header, follow, followers/following lists ========== */
.feed-head{display:flex;align-items:center;gap:13px;flex-wrap:wrap;background:var(--surface);border:2px solid var(--bz-ink);
  border-radius:var(--r-lg);padding:13px 16px;box-shadow:var(--sh)}
.feed-head .profile-av.sm{width:46px;height:46px;font-size:19px;border-width:2px}
.feed-head-id{flex:1;min-width:120px;line-height:1.15;text-decoration:none;color:inherit;display:block}
.feed-head-id h1{font-size:19px;font-weight:800}
.feed-head-id .handle{color:var(--bz-muted);font-weight:600;font-size:13px;margin-top:1px}
.feed-head-ext{font-size:13px;color:var(--bz-muted);opacity:0;transition:opacity .12s;vertical-align:middle}
.feed-head-id:hover h1{color:var(--bz-orange-deep)}
.feed-head-id:hover .feed-head-ext{opacity:1}
.feed-quickstats{display:flex;align-items:center;gap:16px;font-size:13px;color:var(--bz-muted);font-weight:600}
.feed-quickstats a{color:var(--bz-muted)}
.feed-quickstats a:hover{color:var(--text)}
.feed-quickstats b{color:var(--text);font-weight:800}

.feed-tabs{display:flex;gap:6px;margin-top:14px}
.feed-tabs a{flex:1;text-align:center;padding:11px 0;border-radius:12px;font-weight:800;font-size:14px;
  background:var(--surface);border:1px solid var(--bz-line);color:var(--text)}
.feed-tabs a:hover{border-color:var(--bz-orange);background:var(--bz-cream);color:var(--bz-orange-deep)}
.feed-tabs a.on{background:var(--bz-ink);color:#fff;border-color:var(--text)}

.btn-follow{padding:9px 18px;font-size:14px}
.follow-form{margin:0}
.post-badge.comm{background:var(--bz-cream);color:var(--bz-orange-deep);border:1px solid var(--bz-line);
  border-radius:999px;padding:4px 10px}
.post-badge.comm:hover{border-color:var(--bz-orange)}

.flash-ok{background:#e7f7ee;border:1px solid #b6e6cd;color:#1c7a4d;border-radius:12px;
  padding:11px 14px;font-size:14px;font-weight:600}

.fe-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:16px}
.fe-actions .btn{margin-top:0}

/* Followers / following list */
.conn-head{background:var(--surface);border:2px solid var(--bz-ink);border-radius:var(--r-lg);
  padding:14px 18px;box-shadow:var(--sh);margin-bottom:16px}
.back-link{display:inline-block;font-weight:700;color:var(--bz-muted);font-size:14px;margin-bottom:8px}
.back-link:hover{color:var(--text)}
.conn-tabs{display:flex;gap:8px}
.bm-tabs{margin:0 0 16px}
.conn-tabs a{flex:1;text-align:center;padding:9px 0;border-radius:10px;font-weight:800;font-size:14px;
  background:var(--bz-cream);color:var(--bz-muted)}
.conn-tabs a.on{background:var(--bz-ink);color:#fff}
.conn-list{display:flex;flex-direction:column;gap:10px}
.conn-row{display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--bz-line);
  border-radius:var(--r);padding:12px 14px;box-shadow:var(--sh)}
.conn-id{flex:1;min-width:0;line-height:1.25;color:var(--text)}
.conn-id b{font-size:15px;font-weight:800;display:block}
.conn-id span{font-size:13px;color:var(--bz-muted);font-weight:600}
.conn-av{position:relative;flex:none;display:inline-flex}
.conn-av.is-online::after{content:"";position:absolute;right:0;bottom:0;width:12px;height:12px;border-radius:50%;background:#16a34a;border:2px solid var(--surface);box-shadow:0 0 0 1px rgba(22,163,74,.25)}
.conn-active{color:#16a34a;font-weight:800}
/* Right-rail contacts (Facebook-style) */
.rr-contacts .rr-contact{display:flex;align-items:center;gap:10px;width:100%;background:none;border:none;padding:7px 6px;border-radius:10px;cursor:pointer;text-align:left}
.rr-contacts .rr-contact:hover{background:var(--bz-cream)}
.rr-contact-av{position:relative;flex:none;display:inline-flex}
.rr-contact-av.is-online::after{content:"";position:absolute;right:-1px;bottom:-1px;width:11px;height:11px;border-radius:50%;background:#16a34a;border:2px solid var(--surface)}
.rr-contact-name{font-weight:700;font-size:14px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rr-allfriends{display:block;margin-top:6px;font-size:13px;font-weight:700;color:var(--bz-orange-deep)}
.rr-contacts h3{display:flex;align-items:center;gap:6px}
.rr-mute{margin-left:auto;background:none;border:none;cursor:pointer;font-size:15px;padding:2px 4px;border-radius:7px;line-height:1}
.rr-mute:hover{background:var(--bz-cream)}
.rr-contact{position:relative}
.rr-unread{margin-left:auto;flex:none;background:#dc2626;color:#fff;font-size:11px;font-weight:800;min-width:18px;height:18px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;padding:0 5px}
.rr-req-badge{margin-left:8px;background:var(--bz-orange);color:#fff;font-size:11px;font-weight:800;padding:2px 8px;border-radius:999px;text-decoration:none;vertical-align:middle}
.feed-req{background:#dc2626;color:#fff;font-size:11px;font-weight:800;padding:1px 7px;border-radius:999px;margin-left:2px}
.chatp-head{cursor:move;user-select:none}
.chatp.dragged{position:fixed;right:auto;bottom:auto;border-radius:14px}
.chatp-seen{align-self:flex-end;font-size:11px;color:var(--bz-muted);font-weight:700;margin-top:-2px}
.chatp-typing{align-self:flex-start;display:inline-flex;gap:4px;align-items:center;background:var(--surface);border:1px solid var(--bz-line);border-radius:14px;border-bottom-left-radius:4px;padding:10px 13px}
.chatp-typing span{width:7px;height:7px;border-radius:50%;background:var(--bz-muted);animation:chatpDot 1.2s infinite}
.chatp-typing span:nth-child(2){animation-delay:.18s}
.chatp-typing span:nth-child(3){animation-delay:.36s}
@keyframes chatpDot{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}
/* Chat popups (Facebook Messenger-style) */
.chat-dock{position:fixed;right:18px;bottom:0;display:flex;align-items:flex-end;gap:12px;z-index:1200;pointer-events:none}
.chatp{pointer-events:auto;width:360px;max-width:90vw;height:500px;max-height:78vh;display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--bz-line);border-radius:14px 14px 0 0;box-shadow:0 12px 40px rgba(16,24,40,.22);overflow:hidden}
.chatp.min{height:48px}
.chatp-head{display:flex;align-items:center;gap:8px;padding:0 8px 0 14px;height:48px;background:var(--cp,var(--bz-orange));color:#fff;cursor:pointer;flex:none}
.chatp-name{flex:1;min-width:0;font-weight:800;font-size:14.5px;color:#fff;text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chatp-head button,.chatp-exp{background:none;border:none;color:#fff;font-size:16px;cursor:pointer;width:28px;height:28px;border-radius:7px;display:inline-flex;align-items:center;justify-content:center;text-decoration:none;flex:none}
.chatp-head button:hover,.chatp-exp:hover{background:rgba(255,255,255,.2)}
.chatp-exp{font-size:17px}
.chatp-body{flex:1;overflow-y:auto;padding:12px;display:flex;flex-direction:column;gap:6px;background:var(--bz-cream)}
.chatp.min .chatp-body,.chatp.min .chatp-compose{display:none}
.chatp-loading,.chatp-empty{margin:auto;color:var(--bz-muted);font-size:13px}
.chatp-msg{max-width:78%;padding:8px 11px;border-radius:14px;font-size:14px;line-height:1.4;word-wrap:break-word}
.chatp-msg.them{align-self:flex-start;background:var(--surface);border:1px solid var(--bz-line);color:var(--text);border-bottom-left-radius:4px}
.chatp-msg.me{align-self:flex-end;background:var(--cp,var(--bz-orange));color:#fff;border-bottom-right-radius:4px}
.chatp-img{display:block;max-width:100%;border-radius:10px;margin-bottom:2px}
.chatp-file{display:inline-flex;align-items:center;gap:5px;color:inherit;text-decoration:underline;font-size:13.5px;word-break:break-all}
.chatp-msg.me .chatp-file{color:#fff}
.chatp-audio{max-width:230px;height:36px;display:block}
.chatp-compose{display:flex;align-items:center;gap:4px;padding:7px 8px;border-top:1px solid var(--bz-line);background:var(--surface);flex:none}
.chatp-tools{display:flex;align-items:center;gap:1px;flex:none}
.chatp-tool{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border:none;background:none;font-size:16px;cursor:pointer;border-radius:8px;padding:0}
.chatp-tool:hover{background:var(--bz-cream)}
.chatp-tool.rec{background:#fee;animation:chatpRec 1s infinite}
@keyframes chatpRec{0%,100%{opacity:1}50%{opacity:.45}}
.chatp-input{flex:1;min-width:0;border:1.5px solid var(--bz-line);border-radius:999px;padding:8px 14px;font:inherit;font-size:14px;background:var(--bz-cream);color:var(--text)}
.chatp-input:focus{outline:none;border-color:var(--cp,var(--bz-orange));background:var(--surface)}
.chatp-send{flex:none;width:36px;height:36px;border:none;border-radius:50%;background:var(--cp,var(--bz-orange));color:#fff;font-size:15px;cursor:pointer}
.chatp-send:hover{filter:brightness(.92)}
.chatp-emojis{display:flex;flex-wrap:wrap;gap:1px;max-height:148px;overflow-y:auto;padding:8px;border-top:1px solid var(--bz-line);background:var(--surface);flex:none}
.chatp-emojis[hidden]{display:none}
.chatp-emojis button{border:none;background:none;font-size:20px;cursor:pointer;width:32px;height:32px;border-radius:7px;padding:0}
.chatp-emojis button:hover{background:var(--bz-cream)}
.chatp-tool-gif{font-size:11px;font-weight:900;letter-spacing:.5px}
.chatp-gifs{display:flex;flex-direction:column;gap:8px;max-height:230px;padding:8px;border-top:1px solid var(--bz-line);background:var(--surface);flex:none}
.chatp-gifs[hidden]{display:none}
.chatp-gif-q{border:1.5px solid var(--bz-line);border-radius:999px;padding:7px 12px;font:inherit;font-size:13.5px;background:var(--bz-cream);color:var(--text)}
.chatp-gif-q:focus{outline:none;border-color:var(--bz-orange);background:var(--surface)}
.chatp-gif-grid{display:grid;grid-template-columns:1fr 1fr;gap:5px;overflow-y:auto}
.chatp-gif-item{width:100%;border-radius:8px;cursor:pointer;display:block}
.chatp-gif-item:hover{outline:2px solid var(--bz-orange)}
.chatp-gif-loading{grid-column:1/-1;color:var(--bz-muted);font-size:13px;text-align:center;padding:14px}
.chatp-attach{padding:8px;border-top:1px solid var(--bz-line);background:var(--surface);flex:none}
.chatp-chip{display:inline-flex;align-items:center;gap:7px;background:var(--bz-cream);border:1px solid var(--bz-line);border-radius:10px;padding:5px 9px;font-size:13px;font-weight:600;max-width:100%}
.chatp-chip-thumb{width:30px;height:30px;border-radius:6px;object-fit:cover}
.chatp-chip-x{border:none;background:none;cursor:pointer;font-size:13px;color:var(--bz-muted)}
.chatp-flash{font-size:12.5px;color:var(--bz-orange-deep);font-weight:700}
.chatp.drag{outline:3px dashed var(--bz-orange);outline-offset:-3px}
.bubble-file{display:inline-flex;align-items:center;gap:5px;font-weight:600;text-decoration:underline;word-break:break-all}
.bubble-audio{display:block;max-width:260px;height:38px;margin:2px 0}
/* Messenger-style upgrades: header avatar + presence, ⋯ menu, bubble avatars,
   time separators, quick 👍. */
.chatp-head{padding-left:10px}
.chatp-av{flex:none;width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,.28) center/cover no-repeat;color:#fff;font-weight:800;font-size:14px;display:flex;align-items:center;justify-content:center}
.chatp-peer{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center;line-height:1.15;gap:1px}
.chatp-peer .chatp-name{flex:none;font-size:14.5px}
.chatp-name[data-open-menu],.chatp-av[data-open-menu]{cursor:pointer}
.chatp-presence{font-size:11px;color:rgba(255,255,255,.92);display:flex;align-items:center;gap:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chatp-presence .dot{width:7px;height:7px;border-radius:50%;background:#39d353;display:inline-block;flex:none}
.chatp-hbtn{width:26px}
.chatp-menu{position:fixed;z-index:60;background:var(--surface);border:1px solid var(--bz-line);border-radius:12px;box-shadow:0 12px 34px rgba(16,24,40,.24);padding:5px;width:190px;display:flex;flex-direction:column}
.chatp-menu[hidden]{display:none}
.chatp-menu>a,.chatp-menu>button{display:flex;align-items:center;justify-content:flex-start;gap:8px;width:100%;margin:0;padding:8px 10px;border-radius:8px;background:none;border:none;-webkit-appearance:none;appearance:none;text-align:left;color:var(--text);font-size:13px;font-weight:600;line-height:1.2;text-decoration:none;cursor:pointer;font-family:inherit;white-space:nowrap;box-sizing:border-box}
.chatp-menu>a:hover,.chatp-menu>button:hover{background:var(--bz-cream)}
.chatp-mi-ic{flex:none;width:20px;text-align:center;font-size:15px;font-style:normal;line-height:1}
.chatp-menu-sep{height:1px;background:var(--bz-line);margin:4px 6px}
.chatp-menu-label{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--bz-muted);padding:2px 10px 4px}
.chatp-themes{display:flex;flex-wrap:wrap;gap:7px;padding:2px 10px 6px}
.chatp-sw{width:24px;height:24px;border-radius:50%;border:2px solid transparent;cursor:pointer;padding:0;margin:0;flex:none;-webkit-appearance:none;appearance:none;box-sizing:border-box}
.chatp-sw.on{border-color:var(--text);box-shadow:0 0 0 2px var(--surface) inset}
.chatp-time-sep{align-self:center;font-size:11px;color:var(--bz-muted);font-weight:700;margin:8px 0 2px}
.chatp-row{display:flex;align-items:flex-end;gap:6px;align-self:flex-start;max-width:84%}
.chatp-row .chatp-msg{max-width:100%}
.chatp-bub-av{flex:none;width:26px;height:26px;border-radius:50%;background:var(--cp,var(--bz-orange)) center/cover no-repeat;color:#fff;font-size:11px;font-weight:800;display:flex;align-items:center;justify-content:center}
.chatp-bub-av.blank{background:none}
.chatp-msg.emoji-only{background:none!important;border:none!important;padding:0 2px!important;font-size:40px;line-height:1.1}
.chatp-like{flex:none;width:36px;height:36px;border:none;border-radius:50%;background:none;font-size:19px;cursor:pointer;padding:0;line-height:1}
.chatp-like:hover{background:var(--bz-cream)}
.chatp-compose.typing .chatp-like{display:none}
.chatp-compose:not(.typing) .chatp-send{display:none}
@media (max-width:640px){.chatp{width:86vw;height:70vh}}

/* Standalone create page */
.create-page{max-width:1080px;margin:0 auto;padding:22px 18px 40px}
.cp-title{font-size:26px;font-weight:800;margin:6px 0 16px}
.create-standalone{box-shadow:0 10px 0 rgba(20,20,20,.10)}

/* Account: profile identity preview */
.acct-id{display:flex;align-items:center;gap:11px;background:var(--bz-cream);border:1px solid var(--bz-line);
  border-radius:14px;padding:11px 13px;margin-bottom:16px}
.acct-id .profile-av.sm{width:44px;height:44px;font-size:18px;border-width:2px}
.acct-id-meta{flex:1;min-width:0;line-height:1.2}
.acct-id-meta b{font-size:15px;font-weight:800;display:block}
.acct-id-meta span{font-size:13px;color:var(--bz-muted);font-weight:600}
.acct-id-view{font-size:13px;font-weight:700;color:var(--bz-orange-deep);white-space:nowrap}
.acct-id-view:hover{color:var(--text)}

/* ============ X-style app shell (logged-in) ============================= */
body.has-shell{background:var(--surface)}
/* Facebook-style: left rail pinned to the viewport edge, the feed grows to
   fill the freed space (was a centered, fixed-680 middle with side gaps). */
.x-shell{display:grid;grid-template-columns:minmax(88px,290px) minmax(0,1fr) minmax(0,370px);
  gap:0;max-width:1600px;align-items:start}

/* Left rail */
.leftrail{position:sticky;top:0;height:100vh;padding:6px 10px 14px;background:var(--rail-bg);border-right:2px solid var(--rail-border)}
.lr-inner{display:flex;flex-direction:column;height:100%;min-height:0;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--rail-border) transparent;overscroll-behavior:contain}
.lr-inner::-webkit-scrollbar{width:9px}
.lr-inner::-webkit-scrollbar-thumb{background:var(--rail-border);border-radius:5px;border:2px solid transparent;background-clip:content-box}
.lr-inner:hover::-webkit-scrollbar-thumb{background:var(--rail-muted)}
.lr-logo{display:block;padding:4px 6px 6px;flex:none}
.lr-logo img{width:100%;height:auto;display:block;border-radius:16px}
.lr-nav{display:flex;flex-direction:column;gap:2px;margin-top:2px;flex:none}
.lr-nav>a{display:flex;align-items:center;gap:13px;padding:8px 14px;border-radius:999px;font-size:16px;
  font-weight:600;color:var(--text);position:relative}
.lr-nav>a:hover{background:var(--rail-hover)}
.lr-nav>a.on{font-weight:800;background:var(--rail-active)}
.lr-ic{font-size:20px;width:22px;text-align:center;flex:none}
.lr-badge{position:absolute;left:30px;top:7px;background:var(--bz-hot);color:#fff;font-size:10px;font-weight:800;
  min-width:17px;height:17px;border-radius:9px;display:grid;place-items:center;padding:0 4px}
.lr-post{margin:12px 6px 14px;border-radius:999px;padding:11px;font-size:16px;width:auto;flex:none}
.lr-post-ic{display:none}
.lr-verify{flex:none;display:block;text-align:center;margin:6px 6px 2px;padding:8px 10px;border-radius:999px;background:var(--bz-cream);color:var(--bz-orange-deep);font-weight:800;font-size:13px;border:1.5px dashed var(--bz-orange);text-decoration:none}
.lr-verify:hover{background:#fbeccb}
html[data-theme=dark] .lr-verify{background:rgba(255,255,255,.06)}
html[data-theme=dark] .lr-verify:hover{background:rgba(255,255,255,.1)}
.lr-me{margin-top:auto;flex:none;display:flex;align-items:center;gap:6px;padding:8px 10px;border-radius:999px;border-top:1px solid var(--rail-border)}
.lr-me:hover{background:var(--rail-hover)}
.lr-me-id{display:flex;align-items:center;gap:11px;flex:1;min-width:0;color:var(--text)}
.lr-me-meta{min-width:0;line-height:1.2}
.lr-me-meta b{font-size:14px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:140px}
.lr-me-meta>span{font-size:12px;color:#6b5a2c}
.lr-logout{background:none;border:none;cursor:pointer;font-size:19px;color:var(--text);padding:6px;line-height:1}
.lr-logout:hover{color:var(--bz-hot)}

/* Center column */
.x-main{min-width:0;border-right:1px solid var(--bz-line);min-height:100vh;padding-top:16px;padding-bottom:80px}
.x-main>.profile,.x-main>.buzzpage{max-width:none;margin:0;padding-left:16px;padding-right:16px}

/* Right rail */
.rightrail{position:sticky;top:0;align-self:start;padding:16px 14px 24px}
.rr-search input{width:100%;border:1px solid var(--bz-line);border-radius:999px;padding:12px 16px;background:var(--bz-cream);
  font-size:14px;font-family:var(--body);outline:none}
.rr-search input:focus{border-color:var(--bz-orange);background:var(--surface)}
/* Smart-search dropdown */
.rr-search{position:relative}
.rr-suggest{position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:60;background:var(--surface);
  border:1px solid var(--bz-line);border-radius:16px;box-shadow:var(--sh);max-height:72vh;overflow:auto;padding:6px}
.rr-sg-group{padding:8px 9px 3px;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.6px;color:var(--bz-muted)}
.rr-sg-item{display:flex;align-items:center;gap:10px;padding:8px 9px;border-radius:11px;text-decoration:none;color:var(--text);cursor:pointer}
.rr-sg-item:hover,.rr-sg-item.active{background:var(--bz-cream)}
.rr-sg-ico{flex:0 0 auto;width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:var(--bz-amber);color:var(--text);font-weight:800;font-size:15px;overflow:hidden;background-size:cover;background-position:center}
.rr-sg-main{min-width:0;line-height:1.25}
.rr-sg-main b{display:block;font-size:14px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rr-sg-main span{display:block;font-size:12px;color:var(--bz-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rr-sg-foot{display:block;padding:10px;text-align:center;font-size:13px;font-weight:700;color:var(--bz-orange-deep);
  text-decoration:none;border-top:1px solid var(--bz-line);margin-top:4px}
.rr-sg-foot:hover{background:var(--bz-cream);border-radius:10px}
.rr-sg-empty{padding:14px;text-align:center;color:var(--bz-muted);font-size:13px}
.rr-card{background:var(--bz-cream);border-radius:18px;padding:15px 16px;margin-top:14px}
.rr-card h3{font-size:18px;font-weight:800}
.rr-tag{display:block;padding:9px 0;border-bottom:1px solid var(--bz-line)}
.rr-tag:last-child{border-bottom:0}
.rr-tag b{display:block;font-size:14px;font-weight:800}
.rr-tag span{font-size:12px;color:var(--bz-muted)}
.rr-follow{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--bz-line)}
.rr-follow:last-child{border-bottom:0}
.rr-follow-id{flex:1;min-width:0;line-height:1.2;color:var(--text)}
.rr-follow-id b{display:block;font-size:14px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rr-follow-id span{font-size:12px;color:var(--bz-muted)}
.rr-follow .btn-follow{padding:7px 14px;font-size:13px}
.rr-empty{color:var(--bz-muted);font-size:13px;padding:4px 0}
.rr-foot{color:var(--bz-muted);font-size:12px;margin-top:14px;padding-left:4px}

/* Mobile bottom tab bar */
.mobnav{display:none}

/* Tablet / narrow desktop: hide the right rail AND collapse the left rail to an
   icon bar at the SAME width the left column shrinks — otherwise labels clip. */
@media(max-width:1100px){
  .x-shell{grid-template-columns:84px minmax(0,720px);max-width:820px}
  .rightrail{display:none}
  .lr-tx,.lr-me-meta,.lr-badge,.lrv-tx{display:none}
  .lr-post-full{display:none}.lr-post-ic{display:inline}
  .lr-verify{margin:6px 2px 2px;padding:8px 0;font-size:15px}
  .leftrail{padding:6px 6px 12px}
  .lr-logo{padding:4px 2px 8px}
  .lr-nav>a{justify-content:center;gap:0;padding:11px 0}
  .lr-ic{width:auto}
  /* Compose → a centered round button. */
  .lr-post{width:42px;height:42px;margin:8px auto 14px;padding:0;font-size:21px;
    display:grid;place-items:center;border-radius:50%}
  /* Account zone: divider + spacing so the avatar reads as "you", not a 2nd button.
     Smaller, ringed avatar to distinguish it from the orange compose button above. */
  .lr-me{flex-direction:column;gap:12px;padding:14px 4px 6px;border-top:1px solid var(--rail-border)}
  .lr-me-id{flex:0 0 auto}
  .lr-me .profile-av.sm{width:28px;height:28px;font-size:13px;border-width:2px}
}
@media(max-width:700px){
  .x-shell{grid-template-columns:1fr;max-width:100%}
  .leftrail{display:none}
  .x-main{border-right:0;padding-bottom:74px}
  .mobnav{display:flex;position:fixed;bottom:0;left:0;right:0;z-index:60;background:var(--surface);
    border-top:1px solid var(--bz-line);justify-content:space-around;align-items:center;
    padding:4px 2px calc(4px + env(safe-area-inset-bottom))}
  /* Bigger tap targets: taller, wider hit area on each item (easier to hit). */
  .mobnav a{display:flex;align-items:center;justify-content:center;font-size:23px;
    min-width:56px;min-height:52px;padding:8px 14px;border-radius:12px;line-height:1;
    touch-action:manipulation;-webkit-tap-highlight-color:transparent;cursor:pointer}
  .mobnav a.on{background:var(--bz-cream)}
  .mobnav .mob-post{background:var(--bz-orange);color:#fff;width:48px;height:48px;min-width:48px;min-height:48px;
    border-radius:50%;padding:0;display:flex;align-items:center;justify-content:center;
    box-shadow:0 4px 0 var(--bz-orange-deep);transition:transform .08s ease}
  .mobnav .mob-post:active{transform:scale(.9)}
  .mobnav a:active{opacity:.6}
  /* Instant tap feedback (JS-driven, reliable in WKWebView where :active lags).
     Stays lit while the next screen loads so a tap never feels ignored. */
  .mobnav a.bz-press{background:var(--bz-cream);opacity:1}
  .mobnav .mob-post.bz-press{background:var(--bz-orange-deep);transform:scale(.88);
    box-shadow:0 0 0 4px rgba(255,122,0,.28)}
  .mobnav .mob-post>span{display:block;font-size:30px;font-weight:500;line-height:1}
}

/* ===== BuzzCam Pro — full-screen in-app native camera (camera-preview) =====
   While active, the page goes transparent so the native camera (rendered behind
   the webview) shows through; only the #buzzcam-pro control overlay is visible. */
html.buzzcam-active, html.buzzcam-active body { background:transparent !important; }
html.buzzcam-active body > *:not(#buzzcam-pro) { display:none !important; }
.bcp{position:fixed;inset:0;z-index:100000;display:flex;flex-direction:column;justify-content:space-between;
  background:transparent;color:#fff;-webkit-user-select:none;user-select:none;
  padding:calc(env(safe-area-inset-top) + 10px) 16px calc(env(safe-area-inset-bottom) + 20px)}
.bcp-top{display:flex;align-items:center;justify-content:space-between}
.bcp-btn{background:rgba(0,0,0,.45);color:#fff;border:0;border-radius:999px;padding:9px 14px;font-size:15px;font-weight:700;backdrop-filter:blur(6px)}
.bcp-status{position:absolute;top:50%;left:0;right:0;text-align:center;font-weight:700;text-shadow:0 1px 3px rgba(0,0,0,.6);padding:0 24px}
.bcp-count{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:120px;font-weight:800;text-shadow:0 3px 12px rgba(0,0,0,.5)}
.bcp-bottom{display:flex;align-items:center;justify-content:space-between}
.bcp-side{flex:0 0 64px;text-align:center;font-weight:800;font-size:15px;text-shadow:0 1px 3px rgba(0,0,0,.6)}
.bcp-flip{background:rgba(0,0,0,.45);border:0;color:#fff;width:52px;height:52px;border-radius:50%;font-size:22px}
.bcp-rec{position:relative;width:82px;height:82px;border-radius:50%;border:5px solid #fff;background:transparent;padding:0;cursor:pointer}
.bcp-rec-in{position:absolute;inset:7px;border-radius:50%;background:#ff2d55;transition:border-radius .18s,inset .18s}
.bcp.is-rec .bcp-rec-in{inset:22px;border-radius:8px}
.bcp-ring{position:absolute;inset:-9px;width:calc(100% + 18px);height:calc(100% + 18px);transform:rotate(-90deg)}
.bcp-ring-bg{fill:none;stroke:rgba(255,255,255,.25);stroke-width:5}
.bcp-ring-fg{fill:none;stroke:#ff2d55;stroke-width:5;stroke-linecap:round;transition:stroke-dashoffset .2s linear}

/* ===== Watch — full-screen vertical video feed (TikTok / Reels) ===== */
body:has(.watch) .appbar, body:has(.watch) .site-footer, body:has(.watch) .mtopbar{display:none}
/* DESKTOP (in the app shell): keep the left menu, drop the right rail, and center
   a phone-shaped video stage — TikTok-web style (not a full-bleed takeover). */
.watch{position:relative;height:100dvh;max-width:440px;margin:0 auto;background:#000;overflow-y:auto;
  scroll-snap-type:y mandatory;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;border-radius:16px;
  scrollbar-width:none;-ms-overflow-style:none}
.watch::-webkit-scrollbar{width:0;height:0;display:none}
body:has(.watch) .rightrail{display:none}
body:has(.watch) .x-main{padding:0;border:0;background:#000}
body:has(.watch){background:#000}   /* TikTok-style: whole watch surface is black, not white */
@media(min-width:701px){ .wf-back,.wf-brand{display:none} }   /* left-rail is the nav on desktop */
/* PHONES + the native app: true full screen */
@media(max-width:700px){ .watch{position:fixed;inset:0;z-index:45;height:auto;max-width:none;margin:0;border-radius:0} }
.is-native-app .watch{position:fixed;inset:0;z-index:45;height:auto;max-width:none;margin:0;border-radius:0}
.wf-slide{position:relative;height:100dvh;scroll-snap-align:start;scroll-snap-stop:always;
  display:flex;align-items:center;justify-content:center;background:#000;overflow:hidden}
.wf-stage{position:absolute;inset:0}
.wf-video{position:absolute;inset:0;overflow:hidden;background:#000}
/* Fill the frame TikTok-style. The Cloudflare player letterboxes the clip INSIDE
   its iframe, so we make the iframe 16:9, sized to the slide's height, and
   cover-crop it. For a portrait clip the crop window lands on the pillar (fills,
   no bars); for a landscape clip it fills the height and crops the sides. */
.wf-video iframe{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  height:100%;width:auto;min-width:100%;aspect-ratio:16/9;border:0;display:block}
/* Desktop (whenever the app shell / left-rail is shown, 701px+): center a 9:16
   column with the action rail sitting BESIDE the video — TikTok-style — laid out
   as one centered row so it always fits regardless of window width. */
@media (min-width:701px){
  .watch{max-width:none;width:100%;margin:0;border-radius:0;overflow-x:hidden}
  .wf-slide{flex-direction:row;align-items:center;justify-content:center;gap:14px}
  .wf-stage{position:relative;inset:auto;flex:0 0 auto;
    height:calc(100dvh - 16px);width:auto;aspect-ratio:9/16;max-width:min(42vw,480px);
    border-radius:16px;overflow:visible;box-shadow:0 12px 50px rgba(0,0,0,.55)}
  .wf-stage .wf-video,.wf-stage .wf-post-bg{border-radius:16px}
  .wf-stage .wf-shade{border-radius:0 0 16px 16px}
  .wf-stage .wf-meta{left:16px;right:16px}
  /* Everything is anchored to the VIDEO so it's identical on any desktop size:
     rail at the video's bottom-right, arrows at the video's middle-right. */
  .wf-stage .wf-actions{position:absolute;left:calc(100% + 14px);right:auto;bottom:16px;top:auto;margin:0}
  .wf-stage .wf-scrollnav{display:flex;flex-direction:column;gap:12px;position:absolute;
    left:calc(100% + 14px);top:16px;transform:none;z-index:4}
}

/* ---- Watch top overlay: mute (left) + settings ⋯ (right) ---- */
.wf-top{position:absolute;top:0;left:0;right:0;z-index:48;display:flex;justify-content:space-between;
  align-items:flex-start;padding:12px;pointer-events:none}
.wf-top button{pointer-events:auto}
.wf-mute,.wf-more{width:40px;height:40px;border-radius:50%;border:0;cursor:pointer;color:#fff;
  background:rgba(22,22,22,.42);display:flex;align-items:center;justify-content:center;
  -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);transition:background .15s}
.wf-mute:hover,.wf-more:hover{background:rgba(22,22,22,.64)}
.wf-mute .ic{width:22px;height:22px}
.wf-more{font-size:19px;font-weight:900;letter-spacing:1px;line-height:1}
.wf-mute .ic-on{display:none}
.wf-sound .wf-mute .ic-on{display:block}
.wf-sound .wf-mute .ic-off{display:none}
/* Volume — TikTok-style: a pill that slides the slider out of the speaker on hover. */
.wf-vol{display:flex;align-items:center;pointer-events:auto;border-radius:22px;transition:background .18s}
.wf-vol-range{width:0;opacity:0;height:4px;margin:0;cursor:pointer;pointer-events:none;
  -webkit-appearance:none;appearance:none;accent-color:#fff;border-radius:3px;
  background:rgba(255,255,255,.4);transition:width .18s ease,opacity .16s ease,margin .18s ease}
.wf-vol-range::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:8px;background:#fff;cursor:pointer;box-shadow:0 1px 3px rgba(0,0,0,.35)}
.wf-vol-range::-moz-range-thumb{width:14px;height:14px;border:0;border-radius:8px;background:#fff;cursor:pointer}
@media (min-width:701px){
  .wf-vol:hover,.wf-vol:focus-within{background:rgba(22,22,22,.5);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
  .wf-vol:hover .wf-mute,.wf-vol:focus-within .wf-mute{background:none;-webkit-backdrop-filter:none;backdrop-filter:none}
  .wf-vol:hover .wf-vol-range,.wf-vol:focus-within .wf-vol-range{width:92px;opacity:1;margin:0 14px 0 4px;pointer-events:auto}
}

/* ---- Scroll chevrons (desktop only) ---- */
.wf-scrollnav{display:none}
@media (min-width:701px){
  /* .wf-stage .wf-scrollnav position is set in the desktop layout block above */
  .wf-chevron{width:44px;height:44px;border-radius:50%;border:0;cursor:pointer;color:#fff;
    background:rgba(255,255,255,.12);display:flex;align-items:center;justify-content:center;transition:background .15s}
  .wf-chevron:hover{background:rgba(255,255,255,.24)}
  .wf-chevron .ic{width:24px;height:24px}
}

/* ---- Video settings popover ---- */
.wf-menu{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;
  opacity:0;transition:opacity .2s}
.wf-menu.open{opacity:1}
.wf-menu[hidden]{display:none}
.wf-menu-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.5)}
.wf-menu-card{position:relative;z-index:1;width:min(340px,92vw);background:#1c1c1e;color:#fff;border-radius:16px;
  padding:8px;box-shadow:0 20px 60px rgba(0,0,0,.55);transform:scale(.96);transition:transform .2s}
.wf-menu.open .wf-menu-card{transform:scale(1)}
.wf-menu-row{display:flex;align-items:center;gap:12px;width:100%;padding:12px;border:0;background:none;color:#fff;
  font-size:15px;font-weight:600;text-align:left;text-decoration:none;border-radius:10px;cursor:pointer}
.wf-menu-row:hover{background:rgba(255,255,255,.07)}
.wf-menu-ic{display:flex}
.wf-menu-ic .ic{width:22px;height:22px;color:#fff}
.wf-menu-label{flex:1}
.wf-menu-speed{flex-wrap:wrap;cursor:default}
.wf-menu-speed:hover{background:none}
.wf-menu-speeds{display:flex;gap:4px;flex-basis:100%;margin:6px 0 2px 34px;
  background:rgba(255,255,255,.08);border-radius:999px;padding:3px;width:max-content}
.wf-menu-speeds button{border:0;background:none;color:#bbb;font-size:12px;font-weight:700;padding:5px 10px;border-radius:999px;cursor:pointer}
.wf-menu-speeds button.on{background:#fff;color:#000}
/* Report sub-view inside the settings menu */
.wf-report{padding:6px 4px 4px}
.wf-report-head{display:flex;align-items:center;gap:8px;font-size:16px;padding:6px 8px 12px}
.wf-report-back{border:0;background:none;color:#fff;font-size:24px;line-height:1;cursor:pointer;padding:0 4px}
.wf-report-reasons{display:flex;flex-direction:column;gap:2px}
.wf-report-reason{display:block;width:100%;text-align:left;border:0;background:none;color:#fff;
  font-size:15px;font-weight:600;padding:11px 12px;border-radius:10px;cursor:pointer}
.wf-report-reason:hover{background:rgba(255,255,255,.07)}
.wf-report-reason.on{background:rgba(255,178,0,.22);color:#FFC945}
.wf-report-note{width:calc(100% - 16px);margin:10px 8px 0;padding:9px 11px;border-radius:10px;border:0;
  background:rgba(255,255,255,.08);color:#fff;font-size:14px;resize:none}
.wf-report-note::placeholder{color:rgba(255,255,255,.45)}
.wf-report-submit{width:calc(100% - 16px);margin:10px 8px 6px;padding:11px;border:0;border-radius:999px;
  background:#FE2C55;color:#fff;font-weight:800;font-size:15px;cursor:pointer}
.wf-report-submit:disabled{opacity:.5;cursor:default}
.wf-report-done{text-align:center;padding:22px 12px;color:#fff;font-weight:600}
.wf-tap{position:absolute;inset:0;background:transparent;border:0;cursor:pointer;z-index:1}
.wf-playglyph{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:60px;color:rgba(255,255,255,.92);
  opacity:0;transition:opacity .15s;pointer-events:none;text-shadow:0 2px 10px rgba(0,0,0,.5)}
.wf-shade{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(0,0,0,.62) 0%,rgba(0,0,0,0) 32%,rgba(0,0,0,0) 80%,rgba(0,0,0,.35) 100%)}
.wf-meta{position:absolute;left:14px;right:82px;bottom:calc(26px + env(safe-area-inset-bottom));color:#fff;z-index:3;text-shadow:0 1px 4px rgba(0,0,0,.6)}
.wf-meta a{position:relative;z-index:3}
.wf-user{display:inline-flex;align-items:center;gap:8px;color:#fff;text-decoration:none;font-weight:800;font-size:15px}
.wf-place{display:inline-block;margin-top:8px;color:#fff;text-decoration:none;background:rgba(0,0,0,.4);padding:4px 11px;border-radius:999px;font-weight:700;font-size:13px}
.wf-stars{color:#FFC945}
.wf-title{font-weight:800;font-size:16px;margin-top:9px}
.wf-desc{font-size:14px;margin-top:4px;opacity:.95;line-height:1.4}
/* ♫ Sound chip on watch cards (wf-snd — note: .wf-sound is the mute-state class) */
.wf-snd{display:inline-flex;align-items:center;gap:7px;margin-top:10px;max-width:min(78%,320px);
  color:#fff;text-decoration:none;font-weight:700;font-size:13px}
.wf-snd-note{flex:0 0 auto;width:26px;height:26px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;background:rgba(0,0,0,.4);font-size:14px}
.wf-snd-mq{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.wf-snd-mq>span{display:inline-block}

/* Sound page (/sound/{slug}) */
.snd-page{max-width:920px;margin:0 auto;padding:20px 16px 60px}
.snd-hero{display:flex;gap:18px;align-items:center;flex-wrap:wrap;margin-bottom:24px}
.snd-cover{flex:0 0 auto;width:120px;height:120px;border-radius:16px;background:linear-gradient(135deg,#FFC945,#ff7a59);
  background-size:cover;background-position:center;display:flex;align-items:center;justify-content:center;
  box-shadow:0 8px 26px rgba(0,0,0,.18)}
.snd-note{font-size:46px;color:rgba(0,0,0,.55)}
.snd-head{flex:1;min-width:220px}
.snd-kicker{font-weight:800;font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.snd-title{margin:4px 0 2px;font-size:26px;line-height:1.15}
.snd-by{color:var(--muted);font-weight:600}
.snd-stats{margin:6px 0 14px;color:var(--muted);font-size:14px}
.snd-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.snd-cell{position:relative;display:block;border-radius:12px;overflow:hidden;text-decoration:none;
  aspect-ratio:9/16;background:#111}
.snd-thumb{position:absolute;inset:0;background-size:cover;background-position:center}
.snd-cell-meta{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:space-between;
  gap:6px;padding:8px 10px;color:#fff;font-size:12px;font-weight:700;
  background:linear-gradient(to top,rgba(0,0,0,.72),transparent)}
.snd-cell-user{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.snd-empty{padding:30px 0;text-align:center}
.snd-more{margin-top:20px}
.snd-submit-link{display:inline-block;margin-left:12px;font-weight:700;color:var(--accent,#ff7a59);text-decoration:none}
.snd-submit-link:hover{text-decoration:underline}
.snd-submit{max-width:560px;margin:0 auto;padding:18px 16px 60px}
.snd-submit-title{margin:12px 0 4px;font-size:24px}
.snd-submit-sub{margin:0 0 20px;line-height:1.5}
.snd-submit-form{display:flex;flex-direction:column;gap:16px}
.snd-field{display:flex;flex-direction:column;gap:6px;font-weight:700;font-size:14px}
.snd-field .input{font-weight:500}
.snd-field em{font-weight:500;font-style:normal}
.snd-attest{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;line-height:1.45;
  background:var(--surface-2,rgba(0,0,0,.04));padding:12px 14px;border-radius:12px}
.snd-attest input{margin-top:2px;flex:0 0 auto}

/* In-recorder "Add sound" picker */
.snd-pick{margin:10px 0 2px}
.snd-pick-btn{display:inline-flex;align-items:center;gap:8px;max-width:100%;padding:8px 14px;border-radius:999px;
  border:1.5px solid var(--border,#e5e7eb);background:var(--surface,#fff);color:inherit;font-weight:700;font-size:14px;cursor:pointer}
.snd-pick.has .snd-pick-btn{border-color:#FFC945;background:rgba(255,201,69,.14)}
.snd-pick-label{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.snd-pick-x{margin-left:2px;opacity:.6;font-size:12px}
.snd-pick-x:hover{opacity:1}

.sndp{position:fixed;inset:0;z-index:70;display:flex;align-items:flex-end;justify-content:center;opacity:0;transition:opacity .2s}
.sndp.open{opacity:1}
.sndp[hidden]{display:none}
.sndp-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.5)}
.sndp-sheet{position:relative;z-index:1;width:min(480px,100%);max-height:78vh;display:flex;flex-direction:column;
  background:var(--surface,#fff);border-radius:18px 18px 0 0;padding:14px 14px 18px;transform:translateY(12px);transition:transform .2s}
.sndp.open .sndp-sheet{transform:none}
@media(min-width:560px){.sndp{align-items:center}.sndp-sheet{border-radius:18px;transform:scale(.97)}.sndp.open .sndp-sheet{transform:none}}
.sndp-head{display:flex;align-items:center;justify-content:space-between;font-size:17px;margin-bottom:10px;flex:0 0 auto}
.sndp-search,.sndp-upload{flex:0 0 auto}
.sndp-x{border:0;background:none;font-size:18px;cursor:pointer;color:inherit;opacity:.6}
.sndp-search{width:100%;padding:10px 14px;border-radius:12px;border:1.5px solid var(--border,#e5e7eb);background:var(--surface-2,#f7f7f9);font-size:15px}
.sndp-cats{display:flex;flex-wrap:wrap;gap:7px;flex:0 0 auto;margin:12px 0 4px;padding:2px 0 6px}
.sndp-cat{flex:0 0 auto;border:1.5px solid var(--border,#e5e7eb);background:var(--surface,#fff);color:inherit;
  font-weight:700;font-size:13px;padding:6px 13px;border-radius:999px;cursor:pointer;white-space:nowrap}
.sndp-cat.on{background:#111;color:#fff;border-color:#111}
.sndp-upload{display:inline-block;margin:10px 2px 4px;font-weight:700;color:#ff7a59;text-decoration:none}
.sndp-list{flex:1 1 auto;min-height:0;overflow-y:auto;margin-top:6px;-webkit-overflow-scrolling:touch}
.sndp-loading,.sndp-empty{padding:24px 6px;text-align:center;color:var(--muted,#6b7280)}
.sndp-row{display:flex;align-items:center;flex-wrap:wrap;gap:12px;padding:10px 4px;border-bottom:1px solid var(--border,#f0f0f2)}
.sndp-prog{flex:0 0 100%;display:flex;align-items:center;gap:8px;padding:2px 2px 4px}
.sndp-prog .sndp-cur,.sndp-prog .sndp-dur{font-size:11px;color:var(--muted,#6b7280);font-variant-numeric:tabular-nums;min-width:32px}
.sndp-prog .sndp-dur{text-align:right}
.sndp-seek{flex:1;-webkit-appearance:none;appearance:none;height:5px;border-radius:999px;background:var(--border,#e5e7eb);cursor:pointer;outline:none}
.sndp-seek::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:#FFC945;cursor:pointer;box-shadow:0 1px 3px rgba(0,0,0,.3)}
.sndp-seek::-moz-range-thumb{width:14px;height:14px;border:0;border-radius:50%;background:#FFC945;cursor:pointer}
.sndp-kinds{display:flex;flex-wrap:wrap;gap:6px;margin:2px 0}
.sndp-kind{border:1.5px solid var(--border,#e5e7eb);background:var(--surface,#fff);color:inherit;font-weight:600;
  font-size:12px;padding:4px 11px;border-radius:999px;cursor:pointer;white-space:nowrap}
.sndp-kind.on{background:#111;color:#fff;border-color:#111}
.sndp-play{flex:0 0 auto;width:42px;height:42px;border-radius:10px;border:0;cursor:pointer;font-size:14px;position:relative;
  background:rgba(0,0,0,.06)center/cover no-repeat;color:#fff;display:flex;align-items:center;justify-content:center;
  text-shadow:0 1px 4px rgba(0,0,0,.6),0 0 2px rgba(0,0,0,.45)}
.sndp-play.on{box-shadow:0 0 0 3px #FFC945}
.sndp-meta{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.25}
.sndp-meta b{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.sndp-meta span{font-size:12px;color:var(--muted,#6b7280);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.sndp-vote{flex:0 0 auto;display:flex;gap:4px}
.sndp-vbtn{border:1.5px solid var(--border,#e5e7eb);background:var(--surface,#fff);color:inherit;font-size:13px;
  padding:5px 8px;border-radius:999px;cursor:pointer;display:flex;align-items:center;gap:3px;line-height:1}
.sndp-vbtn i{font-style:normal;font-size:11px;font-weight:700;color:var(--muted,#6b7280)}
.sndp-up.on{border-color:#16a34a;background:rgba(22,163,74,.12)}
.sndp-up.on i{color:#16a34a}
.sndp-dn.on{border-color:#dc2626;background:rgba(220,38,38,.12)}
.sndp-dn.on i{color:#dc2626}
.sndp-use{flex:0 0 auto;border:0;background:#111;color:#fff;font-weight:700;font-size:13px;padding:7px 15px;border-radius:999px;cursor:pointer}
.snd-vol{margin:10px 2px 0;display:flex;flex-direction:column;gap:8px;max-width:340px}
.snd-vol[hidden]{display:none}
.snd-vol-row{display:flex;align-items:center;gap:10px;font-size:13px;font-weight:700}
.snd-vol-row span{flex:0 0 92px}
.snd-vol-row input[type=range]{flex:1;accent-color:#FFC945}

/* ===== Stories composer (redesign) ===== */
.stc{max-width:420px;margin:0 auto;padding:8px 16px 60px}
.stc-top{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.stc-back{font-size:22px;text-decoration:none;color:inherit;line-height:1}
.stc-top b{font-size:17px}
.stc-hint{margin-left:auto;font-size:12px;color:var(--muted,#6b7280)}
.stc-preview{position:relative;width:100%;max-width:300px;margin:0 auto 16px;aspect-ratio:9/16;border-radius:18px;
  overflow:hidden;background:#141414;box-shadow:0 12px 40px rgba(0,0,0,.22)}
.stc-pv-img,.stc-pv-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.stc-shade{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .2s;
  background:linear-gradient(to top,rgba(0,0,0,.55),transparent 45%)}
.stc-preview.mode-photo .stc-shade,.stc-preview.mode-video .stc-shade{opacity:1}
.stc-pv-text{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;
  padding:26px 20px;color:#fff;font-weight:800;font-size:23px;line-height:1.28;word-break:break-word;
  text-shadow:0 1px 8px rgba(0,0,0,.28)}
.stc-preview.text-dark .stc-pv-text{color:#111;text-shadow:none}
.stc-preview.mode-photo .stc-pv-text,.stc-preview.mode-video .stc-pv-text{align-items:flex-end;justify-content:flex-start;
  text-align:left;font-size:16px;font-weight:700;padding:16px}
.stc-preview.mode-photo.text-dark .stc-pv-text,.stc-preview.mode-video.text-dark .stc-pv-text{color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.6)}
.stc-pv-text.empty::after{content:'Aa';opacity:.35}
.stc-preview.mode-photo .stc-pv-text.empty,.stc-preview.mode-video .stc-pv-text.empty{display:none}

.stc-tabs{display:flex;gap:8px;justify-content:center;margin-bottom:12px}
.stc-tab{border:1.5px solid var(--border,#e5e7eb);background:var(--surface,#fff);color:inherit;font-weight:700;
  font-size:14px;padding:8px 16px;border-radius:999px;cursor:pointer}
.stc-tab.on{background:#111;color:#fff;border-color:#111}
.stc-caption{width:100%;padding:11px 14px;border-radius:12px;border:1.5px solid var(--border,#e5e7eb);
  background:var(--surface,#fff);color:inherit;font-size:15px;resize:vertical;margin-bottom:12px}
.stc-panel{margin-bottom:8px}
.stc-bglabel,.stc-textcolor{font-size:13px;font-weight:700;color:var(--muted,#6b7280);margin:4px 2px}
.stc-bgs{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;margin-bottom:12px}
.stc-bg{aspect-ratio:1;border-radius:50%;border:2px solid transparent;cursor:pointer;padding:0}
.stc-bg.on{border-color:#FFC945;box-shadow:0 0 0 2px var(--surface,#fff),0 0 0 4px #FFC945}
.stc-textcolor{display:flex;align-items:center;gap:8px}
.stc-tc{width:24px;height:24px;border-radius:50%;border:2px solid var(--border,#ccc);cursor:pointer;padding:0}
.stc-tc.on{border-color:#FFC945;box-shadow:0 0 0 2px #FFC945}
.stc-drop{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  min-height:120px;border:2px dashed var(--border,#d1d5db);border-radius:14px;cursor:pointer;
  color:var(--muted,#6b7280);font-weight:700;text-align:center;padding:18px}
.stc-drop-ic{font-size:30px}
.stc-drop small{font-weight:500;opacity:.8}
.stc-share{margin-top:14px}
/* fallback "feed post" slides (no video): full-bleed image or brand gradient */
.wf-post-bg{position:absolute;inset:0;background-size:cover;background-position:center;background-repeat:no-repeat}
.wf-post-grad{background:linear-gradient(150deg,#FFC945 0%,#F5871F 55%,#EF6E0C 100%)}
.wf-meta--post .wf-title{font-size:21px;line-height:1.25}
.wf-meta--post .wf-desc{font-size:15.5px;line-height:1.5;-webkit-line-clamp:6;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}
/* TikTok-style action rail: avatar + follow, then circular icon buttons w/ counts */
.wf-actions{position:absolute;right:12px;bottom:calc(30px + env(safe-area-inset-bottom));display:flex;flex-direction:column;align-items:center;gap:17px;z-index:3}
.wf-avatar{position:relative;display:block;width:48px;height:48px;margin-bottom:6px}
.wf-avatar .profile-av,.wf-avatar .profile-av.sm,.wf-avatar img{width:48px!important;height:48px!important;border-radius:50%!important;border:2px solid #fff;object-fit:cover;display:flex!important;align-items:center;justify-content:center;background-size:cover;background-position:center;font-size:18px;line-height:1;color:#fff}
.wf-follow{position:absolute;left:50%;bottom:-8px;transform:translateX(-50%);width:20px;height:20px;border-radius:50%;background:#FE2C55;color:#fff;font-weight:700;font-size:14px;line-height:16px;text-align:center;border:2px solid #0d0d0d;cursor:pointer;box-shadow:0 1px 4px rgba(0,0,0,.4)}
.wf-act{background:none;border:0;padding:0;color:#fff;display:flex;flex-direction:column;align-items:center;gap:5px;font-weight:700;font-size:12.5px;text-decoration:none;cursor:pointer}
.wf-ic{width:48px;height:48px;border-radius:50%;background:rgba(22,22,22,.42);display:flex;align-items:center;justify-content:center;transition:transform .12s,background .15s}
.wf-ic .ic{width:27px;height:27px;color:inherit;filter:drop-shadow(0 1px 3px rgba(0,0,0,.45))}
.wf-act:active .wf-ic{transform:scale(.9)}
/* Hover feedback (desktop) — lighten the icon + a subtle lift, TikTok-style. */
@media (hover:hover){
  .wf-act:hover .wf-ic{background:rgba(255,255,255,.2)}
  .wf-act.pa-buzz.on:hover .wf-ic{background:rgba(255,178,0,.32)}
  .wf-avatar,.wf-mute,.wf-more,.wf-chevron{transition:transform .12s,background .15s}
  .wf-avatar:hover{transform:scale(1.06)}
}
.wf-n{text-shadow:0 1px 4px rgba(0,0,0,.6)}
@keyframes wfPop{0%{transform:scale(1)}45%{transform:scale(1.35)}100%{transform:scale(1)}}
.wf-act.pa-buzz.on{color:#FFC945}
.wf-act.pa-buzz.on .wf-ic{background:rgba(255,178,0,.2)}
.wf-act.pa-buzz-pop .wf-ic{animation:wfPop .5s ease}
.wf-bm.on{color:#FFC945}
.wf-back{position:fixed;top:calc(env(safe-area-inset-top) + 10px);left:12px;z-index:46;width:40px;height:40px;border-radius:50%;
  background:rgba(0,0,0,.4);color:#fff;font-size:26px;line-height:38px;text-align:center;text-decoration:none;backdrop-filter:blur(6px)}
.wf-brand{position:fixed;top:calc(env(safe-area-inset-top) + 16px);left:0;right:0;text-align:center;z-index:46;color:#fff;font-weight:800;font-size:15px;text-shadow:0 1px 4px rgba(0,0,0,.5);pointer-events:none}
.wf-tabs{position:fixed;top:calc(env(safe-area-inset-top) + 21px);left:0;right:0;z-index:46;display:flex;gap:24px;justify-content:center;pointer-events:none}
.wf-tabs a{pointer-events:auto}   /* the full-width bar must not eat taps on the mute / ⋯ buttons */
.wf-tabs a{color:rgba(255,255,255,.6);font-weight:800;font-size:16px;text-decoration:none;text-shadow:0 1px 5px rgba(0,0,0,.65);padding-bottom:3px;border-bottom:2px solid transparent}
.wf-tabs a.on{color:#fff;border-bottom-color:#fff}
@media(min-width:701px){.wf-tabs{position:absolute;top:21px}}
.wf-empty{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:#fff;padding:24px}
.wf-empty-emoji{font-size:58px}
.wf-empty h2{font-size:23px;font-weight:800;margin:8px 0 2px}
.wf-empty p{color:rgba(255,255,255,.75);max-width:34ch;margin:0 0 16px}
/* keep the bottom overlay clear of the app/mobile bottom tab bar */
@media(max-width:700px){.wf-meta,.wf-actions{bottom:calc(84px + env(safe-area-inset-bottom))}}
.is-native-app .wf-meta,.is-native-app .wf-actions{bottom:calc(84px + env(safe-area-inset-bottom))}
/* Comment drawer (TikTok-style bottom sheet) */
.cdrawer{position:fixed;inset:0;z-index:120}
.cdrawer-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.35)}
.cdrawer-sheet{position:absolute;left:0;right:0;bottom:0;height:72dvh;max-width:440px;margin:0 auto;
  background:#1c1c1e;color:#fff;border-radius:16px 16px 0 0;display:flex;flex-direction:column;overflow:hidden;
  transform:translateY(100%);transition:transform .26s cubic-bezier(.4,0,.2,1)}
.cdrawer.open .cdrawer-sheet{transform:none}
.cdrawer-head{position:relative;flex:none;text-align:center;font-weight:800;font-size:14px;padding:14px;border-bottom:1px solid rgba(255,255,255,.1)}
.cdrawer-x{position:absolute;right:10px;top:9px;background:none;border:0;color:#fff;font-size:20px;padding:4px 8px;cursor:pointer}
.cdrawer-list{flex:1;overflow-y:auto;padding:6px 14px;-webkit-overflow-scrolling:touch}
.cdrawer-loading,.cdrawer-empty{color:rgba(255,255,255,.55);text-align:center;padding:44px 12px;font-size:14px}
.cdrawer-compose{display:flex;align-items:center;gap:10px;flex:none;background:#1c1c1e;
  padding:10px 12px calc(10px + env(safe-area-inset-bottom));border-top:1px solid rgba(255,255,255,.1)}
.cdrawer-input{flex:1;background:#2c2c2e;border:0;border-radius:999px;padding:11px 16px;color:#fff;font-size:15px;outline:none}
.cdrawer-input::placeholder{color:rgba(255,255,255,.5)}
.cdrawer-send{flex:none;width:40px;height:40px;border-radius:50%;border:0;background:var(--bz-orange);color:#fff;font-size:16px;cursor:pointer}
.cdrawer-send:disabled{opacity:.5}
.cdrawer-login{display:block;text-align:center;padding:16px;color:var(--bz-amber-deep,#E89400);font-weight:700;border-top:1px solid rgba(255,255,255,.1);text-decoration:none}
/* comments rendered light-on-dark inside the sheet */
.cdrawer-sheet .cmt{padding:10px 0;border:0}
.cdrawer-sheet .cmt-text{color:#fff}
.cdrawer-sheet .cmt-meta,.cdrawer-sheet .cmt-meta b{color:#fff}
.cdrawer-sheet .cmt-meta span{color:rgba(255,255,255,.5)}
.cdrawer-sheet .cmt-like{color:rgba(255,255,255,.7)}
.cdrawer-sheet .cmt-like.on{color:#ff2d55}
.cdrawer-sheet .cmt-reply,.cdrawer-sheet .boost-btn,.cdrawer-sheet .cmt-del,.cdrawer-sheet .boost-banner{display:none}

/* ===== Native app shell (Capacitor webview; body/html .is-native-app) =====
   Makes buzzthat.com read as a native app rather than a repackaged website when
   loaded inside the BuzzThat app (UA contains "BuzzThatApp"): the marketing top
   bar + footer are hidden, content clears the status bar + Dynamic Island and the
   always-on bottom tab bar, and long-press text selection is suppressed for a
   native touch feel. Normal browsers are untouched. */
.is-native-app .appbar,
.is-native-app .site-footer,
.is-native-app .app-badges{display:none !important}
/* logged-in shell: bottom tab bar always on (incl. tablet), content clears notch + bar */
body.is-native-app .mobnav{display:flex}
body.is-native-app.has-shell .x-main{
  /* the sticky .mtopbar now fills the notch, so x-main starts flush below it */
  padding-top:0;
  padding-bottom:calc(70px + env(safe-area-inset-bottom));
}

/* ===== Facebook-style mobile / native top bar (logo left, search + messages right).
   Desktop keeps the left rail and hides this; shown < 700px and inside the app. ===== */
.mtopbar{
  display:none;align-items:center;justify-content:space-between;gap:10px;
  position:sticky;top:0;z-index:70;
  background:var(--surface);border-bottom:1px solid var(--bz-line);
  padding:6px 14px;
}
.mtb-logo{display:flex;align-items:center;text-decoration:none}
.mtb-word{font-family:var(--head);font-weight:800;font-size:22px;letter-spacing:-.02em;line-height:1;color:var(--text)}
.mtb-word b{color:var(--bz-orange);font-weight:800}
.mtb-actions{display:flex;align-items:center;gap:8px}
.mtb-ic{position:relative;font-size:19px;line-height:1;width:40px;height:40px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;background:var(--bz-cream);text-decoration:none;
  border:0;cursor:pointer;color:inherit;font-family:inherit;padding:0}
.mtb-ic.on{background:var(--bz-orange)}
.mtb-badge{position:absolute;top:-3px;right:-3px;min-width:17px;height:17px;padding:0 4px;border-radius:999px;
  background:#e0245e;color:#fff;font-size:10px;font-weight:800;line-height:17px;text-align:center;
  border:2px solid var(--surface);font-family:var(--head)}
@media(max-width:700px){ .mtopbar{display:flex} }
body.is-native-app .mtopbar{display:flex;padding-top:max(calc(6px + env(safe-area-inset-top)), 54px)}

/* Guest top bar (native app only): BuzzThat wordmark + Log in / Sign up. Shares the
   .mtb-* children with the logged-in .mtopbar; desktop/mobile web keep the marketing
   .appbar (hidden in the app), so this never doubles up. */
.mtopbar-guest{
  display:none;align-items:center;justify-content:space-between;gap:10px;
  position:sticky;top:0;z-index:70;
  background:var(--surface);border-bottom:1px solid var(--bz-line);
  padding:6px 14px;
}
body.is-native-app .mtopbar-guest{display:flex;padding-top:max(calc(6px + env(safe-area-inset-top)), 54px)}
/* the guest bar owns the notch → drop the body-level inset padding so it isn't doubled */
body.is-native-app:not(.has-shell):has(.mtopbar-guest){padding-top:0}
.mtb-auth{display:flex;align-items:center;height:38px;padding:0 14px;border-radius:999px;
  font-family:var(--head);font-weight:700;font-size:14px;color:var(--text);text-decoration:none;
  white-space:nowrap;background:var(--bz-cream)}
.mtb-cta{display:flex;align-items:center;height:38px;padding:0 16px;border-radius:999px;
  font-family:var(--head);font-weight:800;font-size:14px;color:#fff;text-decoration:none;
  white-space:nowrap;background:var(--bz-orange)}
.mtb-auth.on{box-shadow:inset 0 0 0 2px var(--bz-orange)}

/* avatar as the right-most bottom-nav tab (Profile), Facebook-style */
.mobnav .mob-me{padding:4px}
.mobnav .mob-me .profile-av,.mobnav .mob-me .profile-av.sm{width:29px;height:29px;font-size:13px;border-width:2px}
.mobnav .mob-me.on .profile-av{box-shadow:0 0 0 2px var(--bz-orange)}

/* ☰ top-bar menu button + the Facebook-style slide-in menu it opens */
.mtb-left{display:flex;align-items:center;gap:4px;min-width:0}
.mtb-menu{width:40px;height:40px;flex:none;border:0;background:none;cursor:pointer;font-size:21px;line-height:1;
  color:var(--text);display:flex;align-items:center;justify-content:center;border-radius:50%;padding:0;font-family:inherit}
.mtb-menu:active{background:var(--bz-cream)}

.mmenu{position:fixed;inset:0;z-index:200;visibility:hidden}
.mmenu.open{visibility:visible}
.mmenu-scrim{position:absolute;inset:0;background:rgba(0,0,0,.5);opacity:0;transition:opacity .2s}
.mmenu.open .mmenu-scrim{opacity:1}
.mmenu-panel{position:absolute;top:0;left:0;bottom:0;width:84%;max-width:340px;background:var(--surface);
  display:flex;flex-direction:column;box-shadow:2px 0 30px rgba(0,0,0,.35);
  transform:translateX(-100%);transition:transform .22s ease;overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom)}
.mmenu.open .mmenu-panel{transform:translateX(0)}
.mmenu-head{display:flex;align-items:center;gap:10px;padding:16px 16px 12px;border-bottom:1px solid var(--bz-line)}
.mmenu-me{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--text);flex:1;min-width:0}
.mmenu-me-meta{display:flex;flex-direction:column;min-width:0}
.mmenu-me-meta b{font-family:var(--head);font-size:16px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mmenu-me-meta span{font-size:13px;color:var(--bz-muted)}
.mmenu-x{width:34px;height:34px;flex:none;border:0;background:var(--bz-cream);border-radius:50%;color:var(--text);
  font-size:14px;cursor:pointer;display:flex;align-items:center;justify-content:center}
.mmenu-links{flex:1;padding:8px 0;display:flex;flex-direction:column}
.mmenu-links a{display:flex;align-items:center;gap:14px;padding:13px 18px;text-decoration:none;color:var(--text);
  font-weight:600;font-size:16px}
.mmenu-links a:active{background:var(--bz-cream)}
.mmenu .mm-ic{width:24px;text-align:center;font-size:19px;line-height:1}
.mmenu-logout{border-top:1px solid var(--bz-line);padding:8px}
.mmenu-logout button{width:100%;display:flex;align-items:center;gap:14px;padding:13px 10px;border:0;background:none;
  cursor:pointer;color:#e0245e;font-family:inherit;font-weight:700;font-size:16px;border-radius:10px}
.mmenu-logout button:active{background:rgba(224,36,94,.1)}

/* guest pages in-app (login / register / marketing) clear the notch too */
body.is-native-app:not(.has-shell){padding-top:env(safe-area-inset-top);min-height:100dvh}
/* native feel: no long-press callout / accidental text selection outside real inputs */
.is-native-app *:not(input):not(textarea):not([contenteditable]){
  -webkit-touch-callout:none;-webkit-user-select:none;user-select:none;
}
.is-native-app input,.is-native-app textarea,.is-native-app [contenteditable]{-webkit-user-select:text;user-select:text}

/* ============ Page header, bookmarks, messages ========================= */
.page-head{padding:16px 4px 6px}
.page-head h1{font-size:23px;font-weight:800}
.page-head p{color:var(--bz-muted);font-size:14px;margin-top:2px}
/* page-narrow pages (notifications, leaderboard…) get the same side padding as .profile */
.page-narrow{padding-left:16px;padding-right:16px}

/* Bookmark action in a post card */
.post-actions .pa-bm{flex:1;display:flex;border-left:1px solid var(--bz-line)}
.post-actions .pa-bm button{flex:1;background:none;border:0;cursor:pointer;padding:11px 0;font-size:14px;
  font-weight:700;color:var(--bz-muted);font-family:var(--head)}
.post-actions .pa-bm button:hover{background:var(--bz-cream);color:var(--text)}
.post-actions .pa-bm button.on{color:var(--bz-orange-deep)}
/* Repost button (mirrors bookmark) + Quote link in the action row */
.post-actions .pa-rp{flex:1;display:flex;border-left:1px solid var(--bz-line)}
.post-actions .pa-rp button{flex:1;background:none;border:0;cursor:pointer;padding:11px 0;font-size:14px;
  font-weight:700;color:var(--bz-muted);font-family:var(--head)}
.post-actions .pa-rp button:hover{background:var(--bz-cream);color:var(--text)}
.post-actions .pa-rp button.on{color:#2EAF6E}            /* reposted = green */
.post-actions a.pa-quote{border-left:1px solid var(--bz-line)}
/* Inline "⚡ Buzz" button (first action — buzzes the post without leaving the feed) */
.post-actions .pa-buzz{flex:1;background:none;border:0;cursor:pointer;padding:11px 0;font-size:14px;
  font-weight:700;color:var(--bz-muted);font-family:var(--head)}
.post-actions .pa-buzz:hover{background:var(--bz-cream);color:var(--text)}
.post-actions .pa-buzz.on{color:var(--bz-orange-deep)}
.post-actions .pa-buzz.pa-buzz-pop{animation:paBuzzPop .5s ease}
/* Share action — match the flat row buttons + a separator on the left */
.post-actions .pa-share{flex:1;background:none;border:0;border-left:1px solid var(--bz-line);cursor:pointer;padding:11px 0;font-size:14px;font-weight:700;color:var(--bz-muted);font-family:var(--head)}
.post-actions .pa-share:hover{background:var(--bz-cream);color:var(--text)}
/* The ⚡ Buzz lightning is always orange (label stays neutral until buzzed) */
.post-actions .pa-buzz .pa-ic{color:var(--bz-orange)}
/* Touch devices keep :hover "stuck" after a tap, leaving Buzz/Share with a cream
   fill while the rest stay white. On no-hover pointers, never paint the hover bg —
   all six actions read as clean white (colours/active states untouched). */
@media (hover: none) {
  .post-actions a:hover,
  .post-actions .pa-buzz:hover,
  .post-actions .pa-share:hover,
  .post-actions .pa-bm button:hover,
  .post-actions .pa-rp button:hover { background:none; }
}
/* Phones: 6 labelled actions don't fit one row → tidy 3×2 grid, labels on one line
   (avoids the emoji/label wrapping seen in the narrow Android app webview). */
@media (max-width:640px){
  .post-actions{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--bz-line);border-top:1px solid var(--bz-line)}
  .post-actions > *{background:var(--surface);border-left:0 !important}
  .post-actions a,.post-actions .pa-buzz,.post-actions .pa-share,
  .post-actions .pa-bm button,.post-actions .pa-rp button{font-size:12.5px;white-space:nowrap;padding:12px 4px;width:100%}
  .post-actions a.pa-quote{border-left:0}
}
@keyframes paBuzzPop{0%{transform:scale(1)}30%{transform:scale(1.18)}100%{transform:scale(1)}}
/* "@x reposted" header wrapping a reshared card */
.repost-wrap{background:var(--surface);border:1px solid var(--bz-line);border-radius:var(--r);box-shadow:var(--sh);overflow:hidden}
.repost-wrap .post{border:0;box-shadow:none;border-radius:0}
.repost-attr{padding:9px 16px 0;font-size:13px;font-weight:700;color:var(--bz-muted)}
.repost-attr a{color:var(--bz-muted);text-decoration:none}
.repost-attr a:hover{text-decoration:underline}
/* Embedded quoted buzz (inside a quote-buzz card / show page) */
.quoted-buzz{display:block;border:1px solid var(--bz-line);border-radius:14px;padding:11px 13px;
  text-decoration:none;color:var(--text);background:var(--bz-cream)}
.quoted-buzz:hover{border-color:var(--bz-orange)}
.qb-top{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.qb-by{font-size:13px;line-height:1.15}
.qb-by b{font-weight:800}
.qb-handle{color:var(--bz-muted);font-weight:600}
.qb-title{font-family:var(--head);font-weight:800;font-size:15px;line-height:1.25}
.qb-desc{color:var(--text-soft);font-size:13.5px;margin-top:3px}
.qb-img{display:block;width:100%;max-height:240px;object-fit:cover;border-radius:10px;margin-top:8px}
.qb-media{display:inline-flex;align-items:center;gap:6px;margin-top:8px;font-size:13px;color:var(--bz-muted);font-weight:700}
.qb-play{display:inline-flex;width:20px;height:20px;align-items:center;justify-content:center;border-radius:50%;background:var(--bz-orange);color:#fff;font-size:10px}

/* Message list (inbox + start-a-chat) */
.msg-list{display:flex;flex-direction:column;gap:8px;margin-top:8px}
.msg-row{display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--bz-line);
  border-radius:var(--r);padding:12px 14px;box-shadow:var(--sh);color:var(--text)}
.msg-row:hover{border-color:var(--bz-orange)}
.msg-row.unread{background:#fffaf0;border-color:var(--bz-amber)}
.msg-row-main{flex:1;min-width:0;line-height:1.3}
.msg-row-main b{font-size:15px;font-weight:800;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.msg-snip{font-size:13px;color:var(--bz-muted);display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.msg-row.unread .msg-snip{color:var(--text);font-weight:600}
.msg-dot{flex:none;background:var(--bz-hot);color:#fff;font-size:11px;font-weight:800;min-width:20px;height:20px;
  border-radius:10px;display:grid;place-items:center;padding:0 5px}
.msg-go{flex:none;font-size:13px;font-weight:700;color:var(--bz-orange-deep)}
/* Group DMs */
.msg-group-av{flex:none;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font-size:18px;background:rgba(245,135,31,.14)}
.msg-pending-tag{display:inline-block;margin-left:6px;font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.4px;color:var(--bz-muted);background:rgba(0,0,0,.06);border-radius:6px;padding:1px 5px;vertical-align:middle}
.chat-peer--group{display:flex;align-items:center;gap:10px;text-decoration:none}
.chat-members{font-size:12px;color:var(--bz-muted);padding:2px 2px 8px;border-bottom:1px solid var(--bz-line);margin-bottom:6px}
.bubble-sender{display:block;font-size:11.5px;font-weight:800;color:var(--bz-orange-deep);margin-bottom:2px}
.ng-form{padding:6px 2px}
.ng-label{display:block;font-weight:800;margin-bottom:6px}
.ng-people{display:flex;flex-direction:column;gap:6px;max-height:46vh;overflow:auto;border:1px solid var(--bz-line);border-radius:14px;padding:8px}
.ng-person{display:flex;align-items:center;gap:10px;padding:7px 8px;border-radius:10px;cursor:pointer}
.ng-person:hover{background:rgba(0,0,0,.035)}
.ng-person input{width:18px;height:18px;flex:none;accent-color:var(--bz-orange)}
.ng-person-id{display:flex;flex-direction:column;line-height:1.25}
/* DM message requests */
.req-count{display:inline-flex;min-width:20px;height:20px;padding:0 6px;align-items:center;justify-content:center;background:var(--bz-orange);color:#fff;border-radius:999px;font-size:12px;font-weight:800;vertical-align:middle}
.msg-row.req-row{opacity:.94}
.dm-req-banner{background:rgba(245,135,31,.08);border:1px solid var(--bz-line);border-radius:14px;padding:12px 14px;margin:10px 0}
.dm-req-banner p{margin:0;font-size:13.5px;color:var(--text-soft)}
.dm-req-banner.pending{background:rgba(0,0,0,.035)}
.dm-req-actions{display:flex;gap:8px;margin-top:10px}
.dm-req-actions form{margin:0}
.dm-req-actions .btn{padding:8px 16px;font-size:14px}

/* Chat thread */
.chat-page{display:flex;flex-direction:column;min-height:calc(100vh - 20px)}
.chat-head{display:flex;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--bz-line);
  border-radius:var(--r);padding:10px 14px;box-shadow:var(--sh);position:sticky;top:0;z-index:5}
.chat-back{font-size:20px;margin:0;color:var(--text)}
.chat-peer{display:flex;align-items:center;gap:10px;color:var(--text)}
.chat-peer-id{line-height:1.2}
.chat-peer-id b{font-size:15px;font-weight:800;display:block}
.chat-peer-id span{font-size:12px;color:var(--bz-muted)}
.chat-thread{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:8px;padding:16px 4px;max-height:62vh}
.chat-empty{text-align:center;color:var(--bz-muted);font-size:14px;margin:auto 0}
.bubble{max-width:78%;padding:9px 13px;border-radius:16px;font-size:15px;line-height:1.4;word-wrap:break-word}
.bubble-body{display:block}
.bubble-time{display:block;font-size:10px;opacity:.7;margin-top:3px;text-align:right}
.bubble.mine{align-self:flex-end;background:var(--bz-orange);color:#fff;border-bottom-right-radius:5px}
.bubble.theirs{align-self:flex-start;background:var(--surface);border:1px solid var(--bz-line);color:var(--text);border-bottom-left-radius:5px}
.chat-compose{display:flex;gap:8px;padding:10px 0 0;position:sticky;bottom:0;background:var(--bz-cream)}
body.has-shell .chat-compose{background:var(--surface)}
.chat-compose input{flex:1;border:2px solid var(--bz-line);border-radius:999px;padding:12px 16px;font-size:15px;
  font-family:var(--body);outline:none;background:var(--surface);color:var(--text)}
.chat-compose input:focus{border-color:var(--bz-orange)}
.chat-compose .btn{border-radius:999px;padding:12px 22px}
.chat-attach{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border:2px solid var(--bz-line);border-radius:50%;cursor:pointer;font-size:18px;flex:0 0 auto;background:var(--surface)}
.chat-attach:hover{border-color:var(--bz-orange)}
.chat-attach-name{font-size:12px;color:var(--muted);padding:6px 4px 0}

/* DM rich content: shared buzz card, image attachment, read receipt */
.bubble-img{display:block;max-width:240px;max-height:280px;border-radius:12px;margin-bottom:4px}
.bubble-vid{display:block;position:relative;width:200px;max-width:68vw;aspect-ratio:9/16;border-radius:14px;overflow:hidden;background:#000;margin-bottom:4px}
.bubble-vid .vov-cap{font-size:clamp(10px,3.4vw,15px)}   /* small clip bubble → smaller captions */
.bubble-vid iframe{width:100%;height:100%;border:0;display:block}
.bubble-vid-na{display:inline-block;font-size:13px;color:var(--text-soft);margin-bottom:4px}
.chat-clip-status{font-size:12.5px;margin-top:6px;padding:0 4px;color:var(--text-soft)}
.chat-clip-status.is-ok{color:#16a34a;font-weight:700}
.chat-clip-status.is-err{color:#dc2626;font-weight:700}
/* DM webcam recorder */
.chat-clip-preview{margin-top:8px;display:flex;align-items:flex-end;gap:10px}
.chat-clip-preview-vid{width:150px;max-width:46vw;aspect-ratio:9/16;border-radius:12px;background:#000;object-fit:cover;border:1px solid var(--bz-line)}
.chat-clip-remove{border:1.5px solid var(--bz-line);background:var(--surface);color:var(--text);border-radius:999px;
  padding:8px 16px;font:inherit;font-size:13px;font-weight:700;cursor:pointer}
.chat-clip-remove:hover{border-color:var(--bz-hot);color:var(--bz-hot)}
.chat-rec{margin-top:10px;border:1px solid var(--bz-line);border-radius:14px;padding:10px;background:var(--surface)}
.chat-rec-live{width:100%;max-height:280px;border-radius:10px;background:#000;display:block;object-fit:cover;transform:scaleX(-1)}
.chat-rec.is-recording{border-color:var(--bz-hot)}
.chat-rec-bar{display:flex;align-items:center;gap:8px;margin-top:8px}
.chat-rec-timer{font-weight:800;font-variant-numeric:tabular-nums;color:var(--text);margin-right:auto}
.chat-rec.is-recording .chat-rec-timer{color:var(--bz-hot)}
.chat-rec-hint{font-size:11.5px;color:var(--bz-muted);margin:8px 2px 0}
.bubble-buzz{display:flex;gap:10px;align-items:center;text-decoration:none;background:rgba(0,0,0,.06);border-radius:12px;padding:8px;margin-bottom:4px;max-width:300px}
.bubble.mine .bubble-buzz{background:rgba(255,255,255,.18)}
.bb-thumb{flex:0 0 auto;width:48px;height:48px;border-radius:8px;background-size:cover;background-position:center}
.bb-meta{display:flex;flex-direction:column;gap:2px;min-width:0}
.bb-kicker{font-size:11px;font-weight:800;opacity:.8;text-transform:uppercase;letter-spacing:.02em}
.bb-title{font-size:13px;font-weight:600;line-height:1.25;color:inherit}
.bubble.theirs .bb-title,.bubble.theirs .bb-kicker{color:var(--text)}
.bubble.mine .bubble-buzz .bb-title,.bubble.mine .bubble-buzz .bb-kicker{color:#fff}
.chat-seen{align-self:flex-end;font-size:11px;color:var(--muted);padding:2px 4px}
.share-buzz-preview{display:flex;gap:12px;align-items:center;background:var(--surface);border:2px solid var(--bz-line);border-radius:var(--r-lg);padding:12px;margin:12px 0}
.share-buzz-preview .bb-thumb{width:56px;height:56px}
.share-people{display:flex;flex-direction:column;gap:6px}
.share-person{display:flex;align-items:center;gap:11px;background:var(--surface);border:1px solid var(--bz-line);border-radius:14px;padding:9px 12px}
.share-person .sp-id{display:flex;flex-direction:column;line-height:1.2;flex:1;min-width:0}
.share-person .sp-id span{font-size:12px;color:var(--muted)}
.share-person .btn{padding:7px 18px;border-radius:999px}

/* Small theme toggle in the account row — chip gives the gold moon contrast */
.lr-mini{width:34px;height:34px;display:grid;place-items:center;border-radius:50%;border:none;cursor:pointer;
  font-size:17px;line-height:1;padding:0;background:var(--rail-chip)}
.lr-mini:hover{filter:brightness(.9)}

/* Dark-mode polish: keep status/accent chips legible on dark surfaces */
html[data-theme=dark] .msg-row.unread{background:#23272c;border-color:var(--bz-amber-deep)}
html[data-theme=dark] .flash-ok{background:#16312a;border-color:#205c46;color:#7fe3b4}
html[data-theme=dark] .rr-search input::placeholder,
html[data-theme=dark] .create input::placeholder,
html[data-theme=dark] .create textarea::placeholder,
html[data-theme=dark] .chat-compose input::placeholder{color:#7b8590}
html[data-theme=dark] .bubble.theirs{background:#23272c}
/* Dark mode: these used near-black tints that vanish on a dark page */
html[data-theme=dark] .dm-req-banner.pending{background:rgba(255,255,255,.05)}
html[data-theme=dark] .bubble-buzz{background:rgba(255,255,255,.07)}
.rr-alert{display:flex;align-items:center;gap:11px;background:var(--bz-orange);color:#fff;border-radius:14px;
  padding:12px 14px;margin-bottom:14px;text-decoration:none;box-shadow:0 5px 16px rgba(245,135,31,.28)}
.rr-alert:hover{filter:brightness(1.05)}
.rr-alert-ico{font-size:21px;line-height:1}
.rr-alert-txt{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.rr-alert-txt b{font-size:14px}
.rr-alert-txt span{font-size:12px;opacity:.92}

/* ============ Drag & drop image uploader ============ */
.uploader{display:flex;flex-direction:column;gap:10px}
.uploader-zone{border:2px dashed var(--bz-line);border-radius:14px;padding:22px 16px;text-align:center;
  cursor:pointer;background:var(--surface);transition:border-color .15s,background .15s}
.uploader-zone:hover,.uploader-zone:focus-visible{border-color:var(--bz-orange);outline:none}
.uploader-zone.drag{border-color:var(--bz-orange);background:var(--bz-cream)}
.uz-icon{font-size:28px;margin-bottom:6px;line-height:1}
.uz-text{font-size:14px;font-weight:600;color:var(--text)}
.uz-browse{color:var(--bz-orange-deep);font-weight:800}
.uz-hint{font-size:12px;color:var(--bz-muted);margin-top:5px}
.uploader-previews{display:flex;flex-wrap:wrap;gap:8px}
.uploader-previews:empty{display:none}
.up-thumb{position:relative;width:76px;height:76px;border-radius:10px;overflow:hidden;border:2px solid var(--bz-line)}
.up-thumb img{width:100%;height:100%;object-fit:cover}
.up-rm{position:absolute;top:3px;right:3px;width:22px;height:22px;border-radius:50%;border:none;cursor:pointer;
  background:rgba(20,20,20,.72);color:#fff;font-size:11px;line-height:1;display:grid;place-items:center}
.up-rm:hover{background:var(--bz-hot)}
.up-edit{position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;border:none;cursor:pointer;
  background:rgba(20,20,20,.72);color:#fff;font-size:12px;line-height:1;display:grid;place-items:center}
.up-edit:hover{background:var(--bz-orange)}
/* Image editor modal */
.imged{position:fixed;inset:0;z-index:9000;background:rgba(0,0,0,.66);display:grid;place-items:center;padding:16px}
.imged-box{background:var(--surface);border-radius:18px;padding:16px;width:min(440px,94vw);max-height:92vh;overflow:auto;box-shadow:0 18px 60px rgba(0,0,0,.4)}
.imged-stage{display:grid;place-items:center;background:#0d0d0d;border-radius:12px;padding:10px;min-height:200px}
.imged-stage canvas{max-width:100%;max-height:48vh;border-radius:6px}
.imged-tools{display:flex;gap:8px;margin-top:12px}
.imged-tool{flex:1;padding:9px;border:2px solid var(--bz-line);background:var(--surface);color:var(--text);border-radius:10px;font-weight:700;font-size:14px;cursor:pointer}
.imged-tool:hover,.imged-tool.on{border-color:var(--bz-orange);color:var(--bz-orange-deep)}
.imged-filters{display:flex;gap:7px;overflow-x:auto;padding:12px 0 4px}
.imged-chip{flex:none;padding:7px 12px;border:2px solid var(--bz-line);background:var(--surface);color:var(--text);border-radius:999px;font-weight:700;font-size:13px;cursor:pointer;white-space:nowrap}
.imged-chip.on{border-color:var(--bz-orange);background:var(--bz-orange);color:#fff}
.imged-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:12px}
.imged-actions .btn{padding:9px 18px}

/* Primary CTA (Follow) on the profile card — make it pop */
.profile-cta .btn-follow.btn-orange{background:var(--bz-ink);color:#fff;border:2px solid #fff;
  box-shadow:0 4px 0 rgba(0,0,0,.22)}
.profile-cta .btn-follow.btn-orange:hover{background:#000;box-shadow:0 2px 0 rgba(0,0,0,.22)}

/* Avatars: uploaded photo fills the circle, hides the initial */
.profile-av.has-img{background-size:cover;background-position:center;color:transparent;background-color:var(--bz-line)}
.avatar-edit{display:flex;align-items:center;gap:14px}
.avatar-edit>.profile-av{width:64px;height:64px;font-size:26px;flex:none}
.avatar-edit-controls{flex:1;min-width:0}
.avatar-edit-controls input[type=file]{font-size:13px;max-width:100%}
.avatar-remove{display:flex;align-items:center;gap:10px;margin-top:8px;flex-wrap:wrap}
.avatar-remove-note{font-size:12.5px;color:var(--bz-hot);display:inline-flex;align-items:center;gap:6px}
.avatar-remove-undo{background:none;border:none;padding:0;font:inherit;color:var(--bz-orange);font-weight:700;cursor:pointer;text-decoration:underline}
.avatar-remove-undo:hover{color:var(--bz-orange-deep)}
.avatar-edit>.profile-av.is-removing{opacity:.35;filter:grayscale(1)}
/* Ready-made avatar picker */
.av-preset-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(56px,1fr));gap:9px;margin:8px 0}
.av-preset{position:relative;cursor:pointer;border:2px solid transparent;border-radius:13px;padding:2px;line-height:0;transition:border-color .12s,transform .12s}
.av-preset img{width:100%;aspect-ratio:1;border-radius:11px;display:block;background:var(--bz-cream)}
.av-preset:hover{border-color:var(--bz-line);transform:translateY(-1px)}
.av-preset.on{border-color:var(--bz-orange)}
.av-preset.on::after{content:'✓';position:absolute;right:-4px;bottom:-4px;width:20px;height:20px;border-radius:50%;
  background:var(--bz-orange);color:#fff;font-size:12px;font-weight:800;display:flex;align-items:center;justify-content:center;border:2px solid var(--surface)}

/* ============ Polls ============ */
.poll{margin:12px 0;display:flex;flex-direction:column;gap:7px}
.poll-form{margin:0}
.poll-opt{display:block;width:100%;text-align:left;background:var(--surface);border:2px solid var(--bz-line);
  border-radius:12px;padding:11px 14px;font-size:15px;font-weight:700;color:var(--text);cursor:pointer;font-family:var(--body)}
button.poll-opt:hover{border-color:var(--bz-orange)}
.poll-opt.result{position:relative;overflow:hidden;cursor:default;display:flex;align-items:center;justify-content:space-between;font-weight:600}
.poll-bar{position:absolute;top:0;bottom:0;left:0;background:var(--bz-cream);z-index:0;transition:width .3s}
.poll-opt.result.mine{border-color:var(--bz-orange)}
.poll-opt.result.mine .poll-bar{background:#ffe6b8}
html[data-theme=dark] .poll-opt.result.mine .poll-bar{background:rgba(255,178,0,.22)}
.poll-text,.poll-pct{position:relative;z-index:1}
.poll-pct{font-weight:800;color:var(--bz-orange-deep)}
.poll-total{font-size:12px;color:var(--bz-muted);font-weight:600;margin-top:2px}
.poll-total a{color:var(--bz-orange-deep);font-weight:700}

/* ============ Profile identity (pronouns/vibe/bio/links) ============ */
.pf-pronouns{font-size:13px;font-weight:600;color:var(--bz-muted);margin-left:8px;letter-spacing:0}
.profile-about{padding:0 20px 14px}
.pf-vibe{font-weight:700;font-size:15px;margin-top:11px}
.pf-bio{color:var(--text-soft);font-size:14px;margin-top:5px;line-height:1.45}
.pf-links{display:flex;flex-wrap:wrap;gap:8px;margin-top:9px}
.pf-links a{font-size:13px;font-weight:700;color:var(--bz-orange-deep);background:var(--bz-cream);border-radius:999px;padding:4px 11px}
.pf-links a:hover{background:#fbeccb}

/* Link-in-bio: social icon row + tappable link buttons */
.pf-socials{display:flex;flex-wrap:wrap;justify-content:center;gap:9px;margin-top:13px}
.pf-score{display:inline-flex;align-items:center;gap:7px;margin:9px auto 0;padding:6px 13px;border:2px solid var(--bz-ink);border-radius:999px;background:var(--surface);font-size:13px;cursor:default;box-shadow:0 4px 0 rgba(20,20,20,.08)}
.pf-score b{font-weight:800}
.pf-score-tier{font-weight:700;opacity:.65}
.pf-score-em{font-size:15px;line-height:1}
.pf-social{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:999px;background:var(--bz-cream);font-size:19px;line-height:1;text-decoration:none;color:var(--text);transition:transform .08s ease,background .15s ease}
.pf-social .si{width:19px;height:19px}
.pf-social:hover{background:#fbeccb;transform:translateY(-1px)}
.pf-linkbtns{display:flex;flex-direction:column;gap:9px;margin-top:12px}
.pf-linkbtn{display:flex;align-items:center;gap:10px;padding:13px 16px;border-radius:14px;background:var(--bz-cream);border:1.5px solid transparent;font-weight:800;font-size:15px;color:var(--text);text-decoration:none;transition:transform .08s ease,border-color .15s ease,background .15s ease}
.pf-linkbtn:hover{background:#fbeccb;border-color:var(--bz-orange);transform:translateY(-1px)}
.pf-linkbtn-tx{flex:1;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pf-linkbtn-arrow{flex:0 0 auto;color:var(--bz-orange-deep);opacity:.65;font-weight:700}
html[data-theme=dark] .pf-social,html[data-theme=dark] .pf-linkbtn{background:rgba(255,255,255,.05)}
html[data-theme=dark] .pf-social:hover,html[data-theme=dark] .pf-linkbtn:hover{background:rgba(255,255,255,.09)}

/* Account editor: link rows + social handle rows */
.link-rows{display:flex;flex-direction:column;gap:7px}
.link-row{display:flex;align-items:center;gap:7px}
.link-row-grip{flex:0 0 auto;color:var(--text-soft);cursor:default;user-select:none;font-size:15px}
.link-row-title{flex:0 0 38%;min-width:0}
.link-row-url{flex:1;min-width:0}
.link-row-del{flex:0 0 auto;width:30px;height:30px;border:none;background:transparent;color:var(--text-soft);cursor:pointer;border-radius:8px;font-size:13px}
.link-row-del:hover{background:var(--bz-cream);color:#b91c1c}
.social-rows{display:flex;flex-direction:column;gap:7px}
.social-row{display:flex;align-items:center;gap:9px}
.social-row-ic{flex:0 0 auto;width:24px;text-align:center;font-size:17px}
.social-row-label{flex:0 0 84px;font-size:13px;font-weight:700;color:var(--text-soft)}
.social-row input{flex:1;min-width:0}
html[data-theme=dark] .link-row-del:hover{background:rgba(255,255,255,.07)}

/* Account editor: checkbox rows + public-page design controls */
.check{display:flex;align-items:flex-start;gap:9px;font-size:13.5px;line-height:1.4;color:var(--text);cursor:pointer}
.check input[type=checkbox]{margin-top:2px;width:16px;height:16px;accent-color:var(--bz-orange);flex:none}
.check span b{font-weight:800}
.theme-colors{display:grid;grid-template-columns:repeat(2,1fr);gap:8px 12px;margin-bottom:14px;transition:opacity .15s}
.theme-colors.is-off{opacity:.38;pointer-events:none}
.color-row{display:flex;align-items:center;gap:9px;font-size:13px;font-weight:600;color:var(--text)}
.color-row input[type=color]{width:40px;height:30px;border:1px solid var(--bz-line);border-radius:8px;background:none;cursor:pointer;padding:2px;flex:none}
.theme-toggles{display:flex;flex-direction:column;gap:9px;margin-top:2px}

/* Create-buzz add bar (compose-first: reveal extras on demand) */
.cb-divider{height:2px;background:var(--bz-line);border:0;margin:18px 0}
.lbl-add{font-weight:700;font-size:13px;margin:2px 0 10px}
.addbar{display:flex;flex-wrap:wrap;gap:8px}
.addchip{display:inline-flex;align-items:center;gap:6px;background:var(--surface);border:2px solid var(--bz-line);border-radius:999px;padding:8px 13px;color:var(--text);font-size:13px;font-weight:600;cursor:pointer;font-family:inherit;line-height:1;transition:border-color .12s,background .12s,color .12s}
.addchip:hover{border-color:var(--bz-orange)}
.addchip.on{background:var(--bz-cream);border-color:var(--bz-orange);color:var(--text)}
.addblock{margin-top:16px}
.addblock[hidden]{display:none}

/* Searchable community picker (combobox) */
.cpick{position:relative}
.cpick-control{position:relative}
.cpick-input{width:100%;padding-right:34px}
.cpick-caret{position:absolute;right:14px;top:50%;transform:translateY(-50%);pointer-events:none;color:var(--bz-muted);font-size:12px}
.cpick-menu{position:absolute;z-index:60;left:0;right:0;top:calc(100% + 5px);max-height:240px;overflow:auto;background:var(--surface);border:2px solid var(--bz-line);border-radius:12px;box-shadow:0 12px 30px rgba(0,0,0,.16);padding:6px}
.cpick-menu[hidden]{display:none}
.cpick-opt{display:block;width:100%;text-align:left;background:none;border:0;border-radius:8px;padding:10px 11px;font-size:14px;color:var(--text);cursor:pointer;font-family:inherit}
.cpick-opt:hover{background:var(--bz-cream)}
.cpick-empty{padding:10px 11px;font-size:13px;color:var(--bz-muted)}
.cpick-empty[hidden]{display:none}

/* Clip recorder (webcam) inside the Clip add-block */
.vu-modes{display:flex;gap:8px;margin-bottom:10px}
.vu-mode{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:7px;background:var(--surface);border:2px solid var(--bz-line);border-radius:10px;padding:9px;font-weight:700;font-size:13px;cursor:pointer;color:var(--text)}
.vu-mode:hover{border-color:var(--bz-orange)}
.vu-mode.on{background:var(--bz-cream);border-color:var(--bz-orange);color:var(--text)}
.vu-rec{border:2px solid var(--bz-line);border-radius:12px;padding:14px;background:var(--bz-cream)}
.vu-rec[hidden]{display:none}
.vu-rec-stage{position:relative;width:auto;max-width:100%;margin:0 auto;border-radius:10px;overflow:hidden;background:#000;aspect-ratio:9/16;max-height:min(72vh,620px)}
.vu-rec-stage video{width:100%;height:100%;object-fit:cover;display:block}
.vu-rec-dot{position:absolute;top:9px;left:9px;display:none;align-items:center;gap:6px;background:rgba(0,0,0,.55);color:#fff;font-size:12px;font-weight:700;padding:4px 9px;border-radius:999px}
.vu-rec.is-recording .vu-rec-dot{display:inline-flex}
.vu-rec-dot::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--bz-red,#f46a6a);animation:vu-blink 1s steps(2,start) infinite}
@keyframes vu-blink{50%{opacity:.25}}
.vu-rec-controls{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.vu-rec-hint{font-size:11.5px;color:var(--muted-2,#5f768a);margin-top:8px}

/* Verified blue check + identity verification page */
.vbadge{display:inline-flex;width:1.05em;height:1.05em;vertical-align:-0.14em;margin-left:4px;cursor:pointer;flex:none}
.vbadge svg{width:100%;height:100%;display:block}
.vbadge:hover{opacity:.85}
.vbadge-lg{width:34px;height:34px;margin:0;vertical-align:middle}
/* Instant branded tooltip (shared bubble positioned via JS; never clipped) */
.bz-tip{position:fixed;z-index:9999;background:var(--bz-ink);color:#fff;font-size:12px;font-weight:700;
  padding:6px 9px;border-radius:8px;white-space:nowrap;pointer-events:none;opacity:0;
  transition:opacity .1s ease;box-shadow:0 6px 18px rgba(0,0,0,.28)}
.bz-tip.show{opacity:1}
.bz-tip::after{content:"";position:absolute;top:100%;left:50%;margin-left:-5px;
  border:5px solid transparent;border-top-color:var(--bz-ink)}
.id-state{text-align:center;padding:14px 8px 16px}
.id-ic{font-size:34px;line-height:1;display:block;margin-bottom:8px}
.id-state b{font-size:18px;display:block;margin-bottom:4px}
/* Emoji input with click-to-open picker dropdown */
.emoji-field{position:relative}
.emoji-pick{display:flex;gap:8px;align-items:center}
.emoji-pick input{flex:1;min-width:0}
.emoji-toggle{flex:none;border:1px solid var(--bz-line);background:var(--surface);border-radius:12px;width:46px;height:46px;cursor:pointer;font-size:20px;line-height:1;display:grid;place-items:center}
.emoji-toggle:hover{border-color:var(--bz-orange)}
.emoji-pop{position:absolute;z-index:60;right:0;margin-top:6px;background:var(--surface);border:1px solid var(--bz-line);border-radius:14px;box-shadow:var(--sh);padding:8px;display:grid;grid-template-columns:repeat(8,1fr);gap:2px;max-width:340px;max-height:230px;overflow:auto}
.emoji-pop[hidden]{display:none}
.emoji-pop button{background:none;border:0;cursor:pointer;font-size:21px;line-height:1;padding:6px;border-radius:9px}
.emoji-pop button:hover{background:var(--bz-cream)}
html[data-theme=dark] .emoji-pop button:hover{background:rgba(255,255,255,.08)}

.id-banner{display:flex;align-items:center;gap:8px;margin:12px 0 0;padding:11px 14px;border-radius:12px;background:var(--bz-cream);border:1.5px dashed var(--bz-orange);color:var(--bz-orange-deep);font-weight:800;font-size:14px;text-decoration:none}
.id-banner:hover{background:#fbeccb}
.id-banner span{flex:1}
html[data-theme=dark] .id-banner{background:rgba(255,255,255,.06)}
.id-benefits{list-style:none;padding:0;margin:0 0 16px;display:flex;flex-direction:column;gap:12px}
.id-benefits li{display:flex;gap:12px;align-items:flex-start}
.id-b-ic{font-size:20px;line-height:1.1;width:24px;flex:none;display:flex;justify-content:center}
.id-benefits b{display:block;font-size:14.5px}
.id-benefits span{color:var(--text-soft);font-size:13px}
.id-fee{background:var(--bz-cream);border-radius:12px;padding:12px 14px;text-align:center;font-size:15px;margin-bottom:14px}
html[data-theme=dark] .id-fee{background:rgba(255,255,255,.06)}

/* ============ AI composer assistant ============ */
.ai-bar{display:flex;align-items:center;gap:8px;margin-top:8px;flex-wrap:wrap}
.ai-style{border:2px solid var(--bz-line);border-radius:10px;padding:6px 9px;font-size:13px;font-family:var(--body);
  background:var(--surface);color:var(--text)}
.ai-status{font-size:12px;color:var(--bz-muted);font-weight:600}
.ai-suggest{margin-top:10px;border:2px solid var(--bz-orange);border-radius:12px;padding:12px 14px;background:var(--bz-cream)}
.ai-suggest-text{font-size:15px;line-height:1.5;color:var(--text)}
.ai-suggest-actions{display:flex;gap:8px;margin-top:10px}
.btn-xs{font-size:13px;padding:7px 13px}

/* ============ Thread TL;DR ============ */
.tldr-btn{margin-left:10px;border:2px solid var(--bz-orange);background:var(--surface);color:var(--bz-orange);
  border-radius:999px;padding:4px 12px;font-size:13px;font-weight:700;cursor:pointer;vertical-align:middle;font-family:var(--body)}
.tldr-btn:hover{background:var(--bz-orange);color:#fff}
.tldr-btn:disabled{opacity:.6;cursor:default}
.tldr-box{margin:10px 0 6px;border:2px solid var(--bz-orange);border-radius:12px;padding:12px 14px;background:var(--bz-cream)}
.tldr-head{font-weight:800;font-size:14px;margin-bottom:6px;color:var(--text)}
.tldr-body p{font-size:15px;line-height:1.55;color:var(--text);margin:2px 0}

/* ---- Buzz Coins wallet ---- */
.coin-balances{display:flex;gap:12px;margin-top:14px}
.coin-bal{flex:1;border:2px solid var(--bz-line);border-radius:14px;padding:14px;text-align:center;background:var(--surface)}
.coin-bal-earned{border-color:var(--bz-orange)}
.coin-bal-n{display:block;font-family:var(--head);font-weight:800;font-size:28px;color:var(--text)}
.coin-bal-l{display:block;font-size:12.5px;color:var(--bz-muted);font-weight:600;margin-top:2px}
.coin-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 0;border-top:1px solid var(--bz-line)}
.coin-row:first-of-type{border-top:none}
.coin-amt{font-family:var(--head);font-weight:800;font-size:16px}
.coin-amt.pos{color:var(--bz-good)}
.coin-amt.neg{color:var(--bz-hot)}
/* Boosted comment banner */
.boost-banner{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:800;color:#fff;
  background:linear-gradient(120deg,var(--bz-amber-deep),var(--bz-orange));border-radius:999px;padding:3px 10px;margin-bottom:6px}
.comment.boosted{border-left:3px solid var(--bz-orange);padding-left:10px}
.boost-btn{background:none;border:none;cursor:pointer;color:var(--bz-orange-deep);font-weight:700;font-size:12.5px}
.boost-btn:hover{color:var(--bz-orange)}

/* ============ Notifications ============ */
.note-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.note-list{display:flex;flex-direction:column;gap:2px}
.note-item{display:flex;align-items:center;gap:12px;padding:13px 14px;border-radius:14px;
  text-decoration:none;color:var(--text);border:2px solid transparent;transition:background .12s}
.note-item:hover{background:var(--bz-cream)}
.note-item.is-unread{background:color-mix(in srgb,var(--bz-orange) 9%,var(--surface))}
.note-ic{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;
  background:var(--bz-cream);font-size:18px;flex:none}
.note-body{display:flex;flex-direction:column;gap:1px;flex:1;min-width:0}
.note-msg{font-size:15px;line-height:1.4}
.note-time{font-size:12.5px;color:var(--bz-muted)}
.note-dot{width:9px;height:9px;border-radius:50%;background:var(--bz-orange);flex:none}
.note-empty{text-align:center;padding:48px 16px;color:var(--bz-muted)}
.note-empty .ne-title{font-size:18px;font-weight:800;color:var(--text);margin-bottom:6px}
.mob-bell{position:relative}
.mob-dot{position:absolute;top:6px;right:50%;transform:translateX(12px);width:8px;height:8px;
  border-radius:50%;background:var(--bz-orange)}
/* Coin package picker */
.pkg-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px}
.pkg-card{border:2px solid var(--bz-line);border-radius:14px;padding:16px;text-align:center;background:var(--surface)}
.pkg-card:hover{border-color:var(--bz-orange)}
.pkg-coins{font-family:var(--head);font-weight:800;font-size:22px;color:var(--text)}
.pkg-bonus{font-size:12px;font-weight:700;color:var(--bz-good);margin-top:2px}
.pkg-name{font-size:13px;color:var(--bz-muted);font-weight:600;margin:4px 0 10px}
@media(max-width:480px){.pkg-grid{grid-template-columns:1fr}}
/* Inline comment boost form */
.cmt-boostbox{margin:8px 0;padding:10px 12px;border:1px solid var(--bz-line);border-radius:10px;background:var(--bz-cream)}
.cmt-boost-row{display:flex;gap:8px;align-items:center;margin:6px 0}
.cmt-boost-row input{width:110px;border:2px solid var(--bz-line);border-radius:8px;padding:7px 9px;font-size:14px;background:var(--surface);color:var(--text)}
.cmt-boost-row input:focus{outline:none;border-color:var(--bz-orange)}
/* Withdrawal status chips */
.wd-status{font-size:12px;font-weight:800;padding:3px 10px;border-radius:999px}
.wd-paid{background:#e7f7ef;color:var(--bz-good)}
.wd-pending{background:var(--bz-cream);color:var(--bz-orange-deep)}
.wd-rejected,.wd-failed{background:#fde8e4;color:var(--bz-hot)}

/* ============ Buzz boost ============ */
.buzz-boostbox{margin:10px 20px 4px;border:2px solid var(--bz-orange);border-radius:12px;padding:12px 14px;background:var(--bz-cream)}
.buzz-boostbox .s{display:block;font-size:13.5px;color:var(--text);margin-bottom:8px}
.buzz-boostbox .cmt-boost-row{display:flex;gap:8px;align-items:center;margin-bottom:6px}
.buzz-boostbox input{width:120px;border:2px solid var(--bz-line);border-radius:10px;padding:7px 10px;font-size:14px;
  background:var(--surface);color:var(--text)}
.buzz-boosted{display:inline-block;background:linear-gradient(90deg,#F5871F,#FFB200);color:#1a1a1a;
  font-weight:800;font-size:12.5px;border-radius:999px;padding:4px 12px;margin-bottom:10px}

/* ============ Topic onboarding ============ */
.topic-onboard{border:2px solid var(--bz-orange);border-radius:16px;padding:14px 16px;margin-bottom:14px;background:var(--bz-cream)}
.to-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:10px}
.to-head strong{display:block;font-size:15px}
.to-head .muted{font-size:13px}
.to-skip{background:none;border:none;color:var(--bz-muted);font-size:13px;cursor:pointer;font-family:var(--body);padding:2px 4px}
.to-skip:hover{color:var(--text);text-decoration:underline}
.to-chips{display:flex;flex-wrap:wrap;gap:8px}
.to-chips form{margin:0}
.to-chip{border:2px solid var(--bz-line);background:var(--surface);color:var(--text);border-radius:999px;
  padding:6px 12px;font-size:13.5px;font-weight:700;cursor:pointer;font-family:var(--body);transition:all .12s}
.to-chip:hover{border-color:var(--bz-orange);color:var(--bz-orange)}

/* ============ Leaderboard + badges ============ */
.lb-list{display:flex;flex-direction:column;gap:4px}
.lb-row{display:flex;align-items:center;gap:12px;padding:11px 14px;border-radius:14px;text-decoration:none;
  color:var(--text);border:2px solid transparent}
.lb-row:hover{background:var(--bz-cream)}
.lb-rank{display:grid;place-items:center;min-width:30px;height:30px;border-radius:50%;background:var(--bz-cream);
  font-weight:800;font-size:14px;flex:none}
.lb-rank.top{background:linear-gradient(135deg,#F5871F,#FFB200);color:#fff}
.lb-id{display:flex;flex-direction:column;flex:1;min-width:0}
.lb-id b{font-size:15px}.lb-id .muted{font-size:12.5px}
.lb-pts{font-weight:800;font-size:15px;white-space:nowrap}
.badge-row{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0}
.badge-chip{display:inline-flex;align-items:center;gap:6px;background:var(--bz-cream);border:2px solid var(--bz-line);
  border-radius:999px;padding:5px 11px;font-size:13px;font-weight:700}
.gam-stats{display:flex;gap:18px;flex-wrap:wrap;margin:8px 0 4px}
.gam-stat b{font-size:18px}.gam-stat span{font-size:12.5px;color:var(--bz-muted);display:block}

/* ============ Creator analytics ============ */
.an-totals{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:14px}
.an-t{flex:1;min-width:90px;background:var(--surface);border:2px solid var(--bz-line);border-radius:12px;padding:10px 12px;text-align:center}
.an-t b{display:block;font-size:20px}.an-t span{font-size:11.5px;color:var(--bz-muted)}
.an-charts{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:560px){.an-charts{grid-template-columns:1fr}}
.an-card{background:var(--surface);border:2px solid var(--bz-line);border-radius:14px;padding:12px 14px}
.an-card-head{display:flex;justify-content:space-between;align-items:baseline;font-size:13px;color:var(--bz-muted);margin-bottom:8px}
.an-card-head b{font-size:17px;color:var(--text)}
.spark{display:flex;align-items:flex-end;gap:2px;height:54px}
.spark-bar{flex:1;background:var(--bz-orange);border-radius:2px 2px 0 0;min-height:2px;opacity:.85}
.spark-bar:hover{opacity:1}
.an-top{display:flex;flex-direction:column;gap:4px}
.an-top-row{display:flex;justify-content:space-between;gap:12px;padding:10px 12px;border-radius:10px;text-decoration:none;color:var(--text);border:2px solid var(--bz-line)}
.an-top-row:hover{border-color:var(--bz-orange)}
.an-top-title{font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.an-top-stats{font-size:13px;color:var(--bz-muted);white-space:nowrap}

/* ============ Explore / discovery hub ============ */
.xp-block{margin-top:26px}
.xp-h{font-size:17px;margin-bottom:12px}
.xp-sub{font-size:12px;font-weight:600;color:var(--bz-muted);letter-spacing:0}
.xp-rise{color:#16a34a;font-weight:700}
/* Community Wars */
.war-card{border:1px solid var(--bz-line);border-radius:16px;padding:14px 16px;margin-bottom:12px;background:var(--surface)}
.war-top{display:flex;align-items:center;gap:10px;font-size:12.5px;color:var(--bz-muted);margin-bottom:12px}
.war-name{font-weight:800;color:var(--text)}
.war-ends{margin-left:auto}
.war-badge{font-size:10px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;background:rgba(0,0,0,.07);border-radius:6px;padding:2px 7px;color:var(--bz-muted)}
.war-badge.war-live{background:#fee2e2;color:#dc2626}
.war-won{margin-left:auto;font-weight:800;color:var(--bz-orange-deep)}
.war-teams{display:flex;align-items:center;gap:10px}
.war-team{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;text-decoration:none;color:var(--text);padding:8px;border-radius:12px;border:2px solid transparent;text-align:center}
.war-team.lead{border-color:var(--bz-orange);background:rgba(245,135,31,.06)}
.war-team .war-em{font-size:24px}
.war-team .war-tn{font-size:13px;font-weight:700;line-height:1.2}
.war-team b{font-size:22px;font-weight:800}
.war-vs{flex:none;font-weight:800;color:var(--bz-muted);font-size:13px}
.war-bar{height:8px;border-radius:6px;background:var(--bz-line);overflow:hidden;margin-top:12px;display:flex}
.war-bar-a{background:var(--bz-orange);height:100%}
.war-bar::after{content:"";flex:1;background:var(--bz-ink,#1a1a1a);opacity:.25}
/* Reserve / Order affiliate links */
.rest-affiliate{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.aff-btn{display:inline-flex;align-items:center;gap:6px;text-decoration:none;font-weight:700;font-size:13.5px;padding:9px 14px;border-radius:999px;border:1.5px solid var(--bz-line);color:var(--text);background:var(--surface)}
.aff-btn:hover{border-color:var(--bz-orange);color:var(--bz-orange-deep)}
.aff-btn.aff-reserve{background:rgba(245,135,31,.08);border-color:rgba(245,135,31,.4)}
/* Local Creators */
.cr-standing{background:rgba(245,135,31,.08);border:1px solid var(--bz-line);border-radius:14px;padding:12px 14px;margin-bottom:14px;font-size:14px}
.cr-badge{display:inline-block;background:var(--bz-orange);color:#fff;font-weight:800;font-size:12px;border-radius:999px;padding:3px 10px;margin-right:6px}
.cr-cities{display:flex;gap:8px;overflow-x:auto;padding-bottom:6px;margin-bottom:8px}
.cr-city{flex:none;white-space:nowrap;text-decoration:none;border:1px solid var(--bz-line);border-radius:999px;padding:6px 12px;font-size:13px;font-weight:700;color:var(--text)}
.cr-city.on{background:var(--bz-orange);color:#fff;border-color:var(--bz-orange)}
.cr-board{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.cr-row{display:flex;align-items:center;gap:12px;border:1px solid var(--bz-line);border-radius:14px;padding:10px 14px}
.cr-row.cr-top{background:rgba(245,135,31,.05);border-color:rgba(245,135,31,.35)}
.cr-rank{flex:none;width:34px;text-align:center;font-size:18px;font-weight:800}
.cr-who{flex:1;display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--text);min-width:0}
.cr-who-meta{display:flex;flex-direction:column;line-height:1.3;min-width:0}
.cr-who-meta b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cr-coins{flex:none;font-weight:800;font-size:15px}
/* Lists & Guides */
.guide-grid{display:grid;grid-template-columns:1fr;gap:14px}
@media(min-width:560px){.guide-grid{grid-template-columns:1fr 1fr}}
.guide-card{display:block;text-decoration:none;color:var(--text);border:1px solid var(--bz-line);border-radius:16px;overflow:hidden;background:var(--surface);transition:.12s}
.guide-card:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.08)}
.guide-cover{position:relative;height:140px;background:var(--bz-cream) center/cover no-repeat;display:grid;place-items:center}
.guide-cover-ph{font-size:40px;opacity:.5}
.guide-count{position:absolute;bottom:8px;right:8px;background:rgba(0,0,0,.62);color:#fff;font-size:11px;font-weight:700;padding:3px 8px;border-radius:999px}
.guide-card-body{padding:12px 14px}
.guide-card-body b{display:block;font-size:15px;line-height:1.3}
.guide-by{font-size:12.5px;color:var(--bz-muted)}
.guide-private{font-size:11px;font-weight:700;color:var(--bz-muted);margin-left:6px}
.guide-list{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-direction:column;gap:10px;counter-reset:g}
.guide-item{display:flex;align-items:center;gap:12px}
.guide-rank{flex:none;width:28px;height:28px;border-radius:50%;background:var(--bz-cream);color:var(--bz-orange-deep);font-weight:800;display:grid;place-items:center;font-size:14px}
.guide-place{flex:1;display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--text);border:1px solid var(--bz-line);border-radius:14px;padding:8px 10px;min-width:0}
.guide-place:hover{border-color:var(--bz-orange)}
.guide-thumb{flex:none;width:54px;height:54px;border-radius:10px;background:var(--bz-cream) center/cover no-repeat;display:grid;place-items:center;font-size:20px}
.guide-place-meta{min-width:0;display:flex;flex-direction:column;line-height:1.32}
.guide-place-meta b{font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.guide-rating{font-size:13px;font-weight:700}
.guide-note{font-size:13px;color:var(--text-soft);font-style:italic;margin-top:2px}
.guide-rm{margin:0;flex:none}
.guide-rm button{width:30px;height:30px;border-radius:50%;border:1px solid var(--bz-line);background:var(--surface);cursor:pointer;color:var(--bz-muted)}
.guide-rm button:hover{border-color:#dc2626;color:#dc2626}
.guide-add{position:relative;display:inline-block}
.guide-add>summary{list-style:none;cursor:pointer}
.guide-add>summary::-webkit-details-marker{display:none}
.guide-add-pop{position:absolute;z-index:30;top:calc(100% + 6px);left:0;min-width:200px;background:var(--surface);border:1px solid var(--bz-line);border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.16);padding:6px;max-height:300px;overflow:auto}
.guide-add-opt{display:block;width:100%;text-align:left;border:0;background:none;padding:8px 12px;border-radius:8px;cursor:pointer;font:inherit;font-size:14px;color:var(--text)}
.guide-add-opt:hover{background:var(--rail-hover,rgba(0,0,0,.05))}
.guide-add-new{display:block;padding:8px 12px;border-top:1px solid var(--bz-line);margin-top:4px;font-weight:700;color:var(--bz-orange-deep);text-decoration:none}
/* Magazine-style guide page */
.g-hero{position:relative;border-radius:20px;overflow:hidden;padding:32px 24px;margin-top:6px;color:#fff;background:#222 center/cover no-repeat}
.g-hero::before{content:"";position:absolute;inset:0;background-image:var(--hero);background-size:cover;background-position:center;filter:brightness(.55)}
.g-hero.g-hero--plain{background:linear-gradient(135deg,var(--bz-orange),var(--bz-orange-deep))}
.g-hero.g-hero--plain::before{display:none}
.g-hero-in{position:relative}
.g-hero-kicker{display:inline-block;font-size:12px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;background:rgba(255,255,255,.18);padding:4px 11px;border-radius:999px;backdrop-filter:blur(4px)}
.g-hero-title{font-size:32px;font-weight:800;line-height:1.1;letter-spacing:-.6px;margin:12px 0 8px;text-shadow:0 2px 14px rgba(0,0,0,.3)}
.g-hero-desc{font-size:15.5px;line-height:1.55;max-width:640px;margin:0 0 14px;opacity:.95}
.g-hero-by{display:flex;align-items:center;gap:8px;font-size:13.5px;opacity:.95}
.g-hero-by .profile-av{width:26px;height:26px}
.g-editbar{margin:14px 2px 0;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.g-list{display:flex;flex-direction:column;gap:30px;margin-top:28px}
/* Vertical magazine listicle: full-width photo on top, roomy text below */
.g-entry{border:1px solid var(--bz-line);border-radius:18px;overflow:hidden;background:var(--surface)}
.g-photo{position:relative;display:block;width:100%;height:300px;background:var(--bz-cream) center/cover no-repeat}
@media(max-width:560px){.g-photo{height:210px}}
.g-photo.is-ph{display:grid;place-items:center}
.g-photo-ph{font-size:54px;opacity:.45}
.g-rank{position:absolute;top:14px;left:14px;width:42px;height:42px;border-radius:50%;background:var(--bz-orange);color:#fff;font-weight:800;font-size:19px;display:grid;place-items:center;box-shadow:0 3px 14px rgba(0,0,0,.35)}
.g-entry-body{padding:22px 24px 24px}
.g-entry-name{font-size:24px;font-weight:800;margin:0 0 7px;letter-spacing:-.4px;line-height:1.2}
.g-entry-name a{text-decoration:none;color:var(--text)}
.g-entry-name a:hover{color:var(--bz-orange-deep)}
.g-entry-meta{font-size:14px;color:var(--bz-muted);margin-bottom:14px}
.g-entry-rating{font-weight:700;color:var(--text)}
.g-entry-note{font-size:16px;line-height:1.6;color:var(--text);margin:0 0 16px;padding-left:14px;border-left:3px solid var(--bz-orange);white-space:pre-line}
.g-dishes{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px}
.g-dish{width:104px;height:104px;border-radius:12px;background:var(--bz-cream) center/cover no-repeat;border:1px solid var(--bz-line);transition:transform .12s}
.g-dish:hover{transform:scale(1.04)}
.g-entry-actions{display:flex;gap:10px;flex-wrap:wrap}
/* Guide engagement */
.g-engage{display:flex;gap:10px;align-items:center;margin-top:28px;flex-wrap:wrap}
.g-buzz{display:inline-flex;align-items:center;gap:8px}
.g-buzz.is-on{background:var(--bz-orange-deep)}
.g-buzz-n{background:rgba(255,255,255,.25);border-radius:999px;padding:1px 9px;font-size:13px}
/* Guide editor — items management */
/* Guide builder — search & add */
.ge-add{margin-top:20px;border:1px solid var(--bz-line);border-radius:16px;padding:18px;background:var(--surface);box-shadow:0 1px 3px rgba(0,0,0,.04)}
/* location filter */
.ge-filter{display:flex;gap:8px;margin-bottom:10px}
.ge-filter-state{flex:0 0 150px}
.ge-filter-city{flex:1;min-width:0}
.ge-filter-state,.ge-filter-city{border:1.5px solid var(--bz-line);border-radius:11px;padding:11px 13px;font:inherit;font-size:14px;background:var(--surface);color:var(--text);transition:border-color .15s,box-shadow .15s}
.ge-filter-state:focus,.ge-filter-city:focus{outline:none;border-color:var(--bz-orange);box-shadow:0 0 0 3px rgba(245,135,31,.16)}
/* modern search field */
.ge-search{position:relative;display:flex;align-items:center}
.ge-search-ic{position:absolute;left:15px;width:18px;height:18px;color:var(--bz-muted);pointer-events:none}
.ge-search-input{width:100%;border:1.5px solid var(--bz-line);border-radius:12px;padding:13px 16px 13px 44px;font:inherit;font-size:15px;background:var(--surface);color:var(--text);transition:border-color .15s,box-shadow .15s;-webkit-appearance:none;appearance:none}
.ge-search-input::placeholder{color:var(--bz-muted)}
.ge-search-input:focus{outline:none;border-color:var(--bz-orange);box-shadow:0 0 0 3px rgba(245,135,31,.18)}
/* Pill / bubble inline link */
.bubble-link{display:inline-flex;align-items:center;gap:4px;background:var(--bz-cream);color:var(--bz-orange-deep);font-weight:700;font-size:.92em;padding:3px 11px;border-radius:999px;text-decoration:none;border:1px solid var(--bz-line);line-height:1.5;transition:.12s;white-space:nowrap}
.bubble-link:hover{background:var(--bz-orange);color:#fff;border-color:var(--bz-orange)}
.ge-results{margin-top:12px;display:flex;flex-direction:column;gap:6px;max-height:360px;overflow:auto}
.ge-result{display:flex;align-items:center;gap:11px;padding:8px;border:1px solid var(--bz-line);border-radius:11px;background:var(--surface)}
.ge-result-thumb{flex:none;width:46px;height:46px;border-radius:9px;background:var(--bz-cream) center/cover no-repeat;display:grid;place-items:center;font-size:18px}
.ge-result-meta{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.3}
.ge-result-meta b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ge-result .btn{flex:none}
.ge-noresult{padding:8px 4px;margin:0}
.ge-added-note{margin-top:10px;font-size:13px;font-weight:600;color:#16a34a}
/* Modern toggle switch (reusable) — label.bz-switch beats `.field label{display:block}` */
label.bz-switch,.bz-switch{display:flex;align-items:flex-start;gap:13px;cursor:pointer;user-select:none;font-weight:400;margin-bottom:0}
.bz-switch>input{position:absolute;opacity:0;width:0;height:0;pointer-events:none}
.bz-switch-track{flex:none;width:48px;height:28px;border-radius:999px;background:var(--bz-line);position:relative;transition:background .2s;margin-top:1px}
.bz-switch-thumb{position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.28);transition:transform .2s}
.bz-switch>input:checked ~ .bz-switch-track{background:var(--bz-orange)}
.bz-switch>input:checked ~ .bz-switch-track .bz-switch-thumb{transform:translateX(20px)}
.bz-switch>input:focus-visible ~ .bz-switch-track{outline:2px solid var(--bz-orange);outline-offset:2px}
.bz-switch-text{display:flex;flex-direction:column;line-height:1.35}
.ge-items{margin-top:24px;border-top:1px solid var(--bz-line);padding-top:18px}
.ge-h{font-size:16px;margin:0 0 6px}
.ge-item{border:1px solid var(--bz-line);border-radius:16px;padding:16px;margin-bottom:14px;background:var(--surface);box-shadow:0 1px 2px rgba(16,24,40,.04);transition:box-shadow .15s,border-color .15s}
.ge-item:hover{box-shadow:0 4px 14px rgba(16,24,40,.08);border-color:#e3e0d8}
.ge-item-head{display:flex;align-items:center;gap:12px}
.ge-num{flex:none;width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,var(--bz-orange),var(--bz-orange-deep));color:#fff;font-weight:800;font-size:13px;display:grid;place-items:center;box-shadow:0 1px 3px rgba(245,135,31,.4)}
.ge-thumb{flex:none;width:50px;height:50px;border-radius:12px;background:var(--bz-cream) center/cover no-repeat;display:grid;place-items:center;font-size:21px;border:1px solid var(--bz-line)}
.ge-item-id{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px;line-height:1.32}
.ge-item-id b{font-size:15.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ge-item-id .muted{font-size:12.5px}
.ge-item-ctrls{display:flex;gap:5px;flex:none}
.ge-item-ctrls form{margin:0}
.ge-item-ctrls button{width:32px;height:32px;border-radius:9px;border:1px solid var(--bz-line);background:var(--surface);cursor:pointer;color:var(--bz-muted);font-size:14px;display:grid;place-items:center;transition:.12s}
.ge-item-ctrls button:hover{border-color:var(--bz-orange);color:var(--bz-orange-deep);background:var(--bz-cream)}
.ge-item-ctrls .ge-rm:hover{border-color:#dc2626;color:#dc2626;background:#fee}
.ge-note{margin-top:13px}
.ge-note textarea{width:100%;border:1.5px solid var(--bz-line);border-radius:13px;padding:11px 14px;font:inherit;font-size:14px;line-height:1.5;background:var(--bz-cream);color:var(--text);resize:vertical;min-height:58px;transition:.15s}
.ge-note textarea:focus{outline:none;border-color:var(--bz-orange);background:var(--surface);box-shadow:0 0 0 3px rgba(245,135,31,.15)}
.ge-note-bar{display:flex;justify-content:flex-end;margin-top:8px}
.ge-photos{display:flex;flex-wrap:wrap;gap:9px;margin-top:13px;padding-top:13px;border-top:1px dashed var(--bz-line)}
.ge-photo{position:relative;width:86px;height:86px;border-radius:13px;background:var(--bz-cream) center/cover no-repeat;flex:none;border:1px solid var(--bz-line);box-shadow:0 1px 3px rgba(16,24,40,.06)}
.ge-photo-rm{position:absolute;top:-7px;right:-7px;width:22px;height:22px;border-radius:50%;border:2px solid var(--surface);background:rgba(20,20,20,.85);color:#fff;font-size:10px;cursor:pointer;display:grid;place-items:center;line-height:1}
.ge-photo-rm:hover{background:#dc2626}
.ge-photo-add{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;width:86px;height:86px;border-radius:13px;border:2px dashed #d8d3c7;cursor:pointer;font-size:21px;color:var(--bz-muted);text-align:center;background:var(--bz-cream);transition:.12s}
.ge-photo-add span{font-size:9.5px;font-weight:700;line-height:1.15;padding:0 4px}
.ge-photo-add:hover{border-color:var(--bz-orange);color:var(--bz-orange-deep);background:#fff7ee}
.ge-photo-add.is-loading{opacity:.5;pointer-events:none}
.ge-savebar{position:sticky;bottom:0;display:flex;align-items:center;justify-content:space-between;gap:12px;margin:22px -4px 0;padding:14px 16px;background:var(--surface);border:1px solid var(--bz-line);border-radius:16px;box-shadow:0 -6px 22px rgba(16,24,40,.1);z-index:20}
.ge-save-status{font-size:13px;color:var(--bz-muted);transition:color .15s}
.ge-save-status.is-saving{color:var(--bz-orange-deep)}
.ge-save-status.is-saved{color:#16a34a;font-weight:600}
.ge-savebtn{font-size:15px;padding:11px 22px;white-space:nowrap;flex:none}
.ge-savebtn.is-busy{opacity:.7;pointer-events:none}
/* Guide builder — live preview pane (replaces the right rail) */
.guide-preview{position:sticky;top:8px;display:flex;flex-direction:column}
.gp-head{display:flex;align-items:center;gap:7px;font-weight:800;font-size:14px;padding:2px 2px 11px}
.gp-head .s{font-weight:400;color:var(--bz-muted)}
.gp-dot{width:8px;height:8px;border-radius:50%;background:#16a34a;box-shadow:0 0 0 3px rgba(22,163,74,.18);animation:gpPulse 2s infinite}
@keyframes gpPulse{0%,100%{opacity:1}50%{opacity:.35}}
.gp-frame{max-height:calc(100vh - 120px);overflow-y:auto;border:1px solid var(--bz-line);border-radius:18px;padding:12px;background:var(--bz-cream);box-shadow:inset 0 1px 4px rgba(16,24,40,.06)}
.gp-open{margin-top:10px;align-self:center}
.gp-empty{font-size:13px;color:var(--bz-muted);text-align:center;padding:26px 14px;line-height:1.55}
.gp-hero{padding:18px 16px;border-radius:14px;margin-top:0}
.guide-preview .g-hero-kicker{font-size:11px}
.guide-preview .g-hero-title{font-size:21px;margin:8px 0 6px;letter-spacing:-.3px}
.guide-preview .g-hero-desc{font-size:12.5px}
.guide-preview .g-hero-by{font-size:12px}
.gp-list{margin-top:14px;display:flex;flex-direction:column;gap:12px}
.guide-preview .g-entry{border-radius:13px}
.guide-preview .g-photo{height:110px}
.guide-preview .g-rank{width:26px;height:26px;font-size:13px}
.guide-preview .g-entry-body{padding:11px 12px}
.guide-preview .g-entry-name{font-size:15px}
.guide-preview .g-entry-name a{pointer-events:none}
.guide-preview .g-entry-meta{font-size:11.5px}
.guide-preview .g-entry-note{font-size:12.5px;line-height:1.5;margin:6px 0 9px;padding-left:10px}
.guide-preview .g-dishes{gap:5px;margin:0}
.guide-preview .g-dish{width:54px;height:54px;border-radius:9px}
/* Buzz Wrap */
.wrap-hero{background:linear-gradient(135deg,rgba(245,135,31,.12),rgba(245,135,31,.03));border:1px solid var(--bz-line);border-radius:18px;padding:20px 22px;margin-top:6px}
.wrap-headline{font-size:24px;font-weight:800;margin:0 0 8px;letter-spacing:-.4px}
.wrap-intro{font-size:15.5px;line-height:1.55;color:var(--text);margin:0}
.wrap-foot{font-size:12px;color:var(--bz-muted);text-align:center;margin-top:26px}
.xp-topics{display:flex;flex-wrap:wrap;gap:8px}
.xp-topic{display:inline-flex;align-items:center;gap:6px;border:2px solid var(--bz-line);border-radius:999px;
  padding:5px 6px 5px 12px;background:var(--surface)}
.xp-topic.on{border-color:var(--bz-orange)}
.xp-topic a{text-decoration:none;color:var(--text);font-weight:700;font-size:13.5px}
.xp-topic form{margin:0}
.xp-topic button{width:22px;height:22px;border-radius:50%;border:none;cursor:pointer;font-weight:800;
  background:var(--bz-cream);color:var(--text);font-size:13px;line-height:1}
.xp-topic.on button{background:var(--bz-orange);color:#fff}
.xp-people{display:flex;flex-direction:column;gap:8px}
.xp-person{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;
  border:2px solid var(--bz-line);border-radius:14px;background:var(--surface)}
.xp-person-id{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--text);min-width:0}
.xp-person-meta{display:flex;flex-direction:column;min-width:0}
.xp-person-meta b{font-size:15px}.xp-person-meta .muted{font-size:12.5px}

/* ============ Live notification toasts ============ */
.toast-wrap{position:fixed;right:18px;bottom:18px;z-index:200;display:flex;flex-direction:column;gap:8px;max-width:min(360px,90vw)}
.toast{display:flex;align-items:center;gap:10px;background:var(--surface);border:2px solid var(--bz-orange);
  border-radius:14px;padding:11px 14px;text-decoration:none;color:var(--text);box-shadow:0 8px 24px rgba(0,0,0,.18);
  transform:translateY(12px);opacity:0;transition:transform .25s,opacity .25s}
.toast.in{transform:translateY(0);opacity:1}
.toast-ic{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--bz-cream);font-size:17px;flex:none}
.toast-msg{font-size:14px;line-height:1.4;font-weight:600}
@media(max-width:680px){.toast-wrap{right:10px;left:10px;bottom:74px;max-width:none}}

/* ============ Verify-email banner ============ */
.verify-banner{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  background:color-mix(in srgb,var(--bz-orange) 12%,var(--surface));border:2px solid var(--bz-orange);
  border-radius:12px;padding:11px 15px;margin-bottom:14px;font-size:14px;font-weight:600}
.verify-banner form{margin:0}
.verify-banner button{background:var(--bz-orange);color:#fff;border:none;border-radius:999px;
  padding:6px 14px;font-weight:700;cursor:pointer;font-family:var(--body);font-size:13px}

/* ============ Coin-locked (premium) buzz ============ */
.coin-lock{display:flex;flex-direction:column;align-items:flex-start;gap:4px;margin:12px 0;
  border:2px dashed var(--bz-orange);border-radius:14px;padding:16px 18px;background:var(--bz-cream)}
.coin-lock .cl-ico{font-size:26px}
.coin-lock b{font-size:16px;color:var(--text)}
.coin-lock .cl-sub{font-size:13px;color:var(--bz-muted)}
.coin-lock .cl-sub a{color:var(--bz-orange);font-weight:700}

/* ============ Goal-funded (crowdfunded) unlock ============ */
.goal-box{margin:12px 0;border:2px solid var(--bz-orange);border-radius:14px;padding:14px 16px;background:var(--bz-cream)}
.goal-box.reached{border-color:#2EAF6E;background:color-mix(in srgb,#2EAF6E 10%,var(--surface))}
.goal-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:8px}
.goal-head b{font-size:15px;color:var(--text)}
.goal-bar{height:12px;border-radius:999px;background:var(--bz-line);overflow:hidden}
.goal-bar span{display:block;height:100%;background:linear-gradient(90deg,#F5871F,#FFB200);border-radius:999px;transition:width .3s}
.goal-box.reached .goal-bar span{background:#2EAF6E}
.goal-sub{display:block;font-size:13px;margin-top:8px}
.goal-sub a{color:var(--bz-orange);font-weight:700}
.goal-form{display:flex;gap:8px;align-items:center;margin-top:10px}
.goal-form input{width:120px;border:2px solid var(--bz-line);border-radius:10px;padding:7px 10px;font-size:14px;background:var(--surface);color:var(--text)}

/* ============ Legal pages (Terms / Privacy / Refund Policy) ============= */
.legal{max-width:760px;margin:0 auto;padding:28px 18px 60px;line-height:1.65;color:var(--text)}
.legal-back{display:inline-block;color:var(--bz-orange-deep);font-weight:700;font-size:14px;margin-bottom:18px}
.legal-back:hover{text-decoration:underline}
.legal h1{font-size:30px;font-weight:800;font-family:var(--head);line-height:1.15}
.legal-updated{color:var(--bz-muted);font-size:13px;margin:4px 0 22px}
.legal h2{font-size:19px;font-weight:800;font-family:var(--head);margin:26px 0 8px}
.legal p{margin:10px 0}
.legal ul{margin:10px 0 10px 4px;padding-left:20px}
.legal li{margin:6px 0}
.legal a{color:var(--bz-orange-deep);font-weight:600}
.legal a:hover{text-decoration:underline}
.legal-foot{margin-top:34px;padding-top:16px;border-top:1px solid var(--bz-line);color:var(--bz-muted);font-size:14px}

/* Footer legal links */
.foot-links{margin-top:6px}
.foot-links a{color:inherit;opacity:.8;margin:0 7px}
.foot-links a:first-child{margin-left:0}
.foot-links a:hover{opacity:1;text-decoration:underline}
.rr-foot .foot-links{display:block;margin-top:6px}

/* ============ Premium / Goal badges on feed cards ====================== */
.bz-badge-row{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 0}
.bz-badge{display:inline-block;font-size:12px;font-weight:800;border-radius:999px;
  padding:3px 11px;line-height:1.4;white-space:nowrap}
.bz-badge--premium{color:#fff;background:var(--bz-orange);border:1px solid var(--bz-orange-deep)}
.bz-badge--goal{color:var(--bz-orange-deep);background:#FFF1DD;border:1px solid #F6D9AE}

/* ============ Emoji reactions (buzz detail) ============================ */
.react-bar{display:flex;flex-wrap:wrap;gap:8px;margin:24px 0 10px;padding:0 20px}
.react-bar form{margin:0}
.react-btn{display:inline-flex;align-items:center;gap:5px;font-size:14px;font-weight:700;
  color:var(--text);background:var(--surface);border:1px solid var(--bz-line);border-radius:999px;
  padding:5px 11px;line-height:1.4;cursor:pointer}
.react-btn:hover{border-color:var(--bz-orange)}
/* Center each emoji in a uniform box so glyphs with uneven side-bearing
   (e.g. 👍) don't sit off-center in their circle. */
.react-btn .react-emoji{display:inline-flex;align-items:center;justify-content:center;width:1.3em;line-height:1}
.react-btn .react-count{font-size:12.5px;color:var(--bz-muted);min-width:8px}
.react-btn--on{background:#FFF1DD;border-color:var(--bz-orange);color:var(--bz-orange-deep)}
.react-btn--on .react-count{color:var(--bz-orange-deep)}

/* ============ Short-video clips ========================================= */
/* Video-first hero block in the buzz composer — pulled up front, accented to stand out */
.cb-video{border:1.5px solid var(--bz-orange);background:rgba(245,135,31,.05);border-radius:14px;padding:13px 14px 12px;margin-bottom:16px}
.cb-video>label{color:var(--bz-orange-deep)}
.cb-video .vid-up-zone{border-color:var(--bz-orange);background:rgba(245,135,31,.04);min-height:120px}
.vid-up{display:flex;flex-direction:column;gap:10px}
.vid-up-zone{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;
  padding:22px 16px;border:2px dashed var(--bz-line);border-radius:12px;background:var(--surface);
  color:var(--bz-muted);cursor:pointer;transition:border-color .15s,background .15s}
.vid-up-zone:hover,.vid-up-zone:focus,.vid-up-zone.drag{border-color:var(--bz-orange);outline:none}
.vid-up-zone .vu-icon{font-size:26px;line-height:1}
.vid-up-zone .vu-text{color:var(--text);font-size:14px}
.vid-up-zone .vu-browse{color:var(--bz-orange);font-weight:700}
.vid-up-zone .vu-hint{font-size:12px;color:var(--bz-muted)}
.vid-up-preview{width:100%;max-height:360px;border-radius:12px;background:#000;display:block}
.vid-up-status{font-size:13px;color:var(--bz-muted);min-height:18px}
.vid-up-status.is-ok{color:#2EAF6E;font-weight:700}
.vid-up-status.is-err{color:#d23b3b;font-weight:600}
.vid-player{position:relative;width:100%;max-width:420px;margin:16px auto 14px;
  aspect-ratio:9/16;max-height:78vh;border-radius:14px;overflow:hidden;background:#000}
.vid-player iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* ---- Clip-editor caption overlays (rendered OVER the player, no re-encode) ----
   Positioned by x/y fractions (where the creator dragged the text). --*/
.vov{position:absolute;inset:0;pointer-events:none;z-index:3;overflow:hidden}
.vov-cap{position:absolute;transform:translate(-50%,-50%);max-width:90%;
  font-weight:800;font-size:clamp(15px,4.4vw,26px);line-height:1.15;text-align:center;
  white-space:pre-wrap;word-break:break-word;
  text-shadow:0 1px 3px rgba(0,0,0,.85),0 0 2px rgba(0,0,0,.9)}
.vov-edit .vov-cap{font-size:clamp(14px,4.6vw,22px)}   /* composer preview is smaller */

/* ---- WYSIWYG drag editor: captions live ON the clip preview ----
   The stage is the SAME 9:16 letterboxed frame as the final player, so a caption's
   x/y maps 1:1 between editing and playback (the black bars line up too). --*/
.cap-stage{position:relative;width:100%;max-width:280px;aspect-ratio:9/16;margin:0 auto;
  background:#000;border-radius:12px;overflow:hidden;touch-action:none;line-height:0}
.cap-stage .vid-up-preview{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
  margin:0;border-radius:0;max-height:none;background:#000}
.vov-edit{pointer-events:none}                 /* layer passes clicks through… */
.vov-edit .cap-edit{pointer-events:auto;cursor:grab;touch-action:none;padding:2px 6px;border-radius:8px}
.vov-edit .cap-edit:active{cursor:grabbing}
.vov-edit .cap-edit.sel{outline:2px dashed rgba(255,255,255,.95);outline-offset:3px;background:rgba(0,0,0,.18)}
.cap-del{position:absolute;top:-11px;right:-11px;width:22px;height:22px;border-radius:50%;border:0;
  background:#ff4d4d;color:#fff;font-size:11px;line-height:22px;padding:0;cursor:pointer;pointer-events:auto;
  box-shadow:0 1px 3px rgba(0,0,0,.5)}

/* ---- Caption editor toolbar ---- */
.clip-cap{margin-top:10px;padding:12px;border:1px solid var(--bz-line);border-radius:12px;background:var(--surface)}
.clip-cap-head{font-weight:800;font-size:13.5px;margin-bottom:8px}
.clip-cap-head .s{font-weight:500}
.clip-cap-row{display:flex;gap:8px}
.clip-cap-text{flex:1;min-width:0;padding:9px 12px;border:1px solid var(--bz-line);border-radius:10px;background:var(--bg);color:var(--text);font-size:14px}
.clip-cap-text:disabled{opacity:.6}
.clip-cap-row .btn-orange{box-shadow:none;align-self:stretch}          /* drop the 3D "double button" ledge */
.clip-cap-row .btn-orange:hover{box-shadow:none;background:var(--bz-orange-deep)}
.clip-cap-colors{display:flex;gap:8px;margin-top:10px}
.clip-cap-colors button{width:26px;height:26px;border-radius:50%;border:2px solid var(--bz-line);cursor:pointer;padding:0}
.clip-cap-colors button.on{border-color:var(--bz-orange);box-shadow:0 0 0 2px color-mix(in srgb,var(--bz-orange) 40%,transparent)}
.clip-cap-hint{margin-top:9px;color:var(--muted)}

/* Deal tap-tracking badges (owner Deals tab) */
.deal-taps{display:inline-block;margin-left:8px;font-size:12px;font-weight:700;color:var(--bz-orange);
  background:color-mix(in srgb,var(--bz-orange) 12%,var(--surface));border-radius:999px;padding:1px 8px;vertical-align:middle}
.deal-taps-total{margin:0 0 12px;padding:9px 13px;border:1px solid color-mix(in srgb,var(--bz-orange) 30%,var(--bz-line));
  border-radius:10px;background:color-mix(in srgb,var(--bz-orange) 8%,var(--surface));font-size:13.5px;color:var(--text)}

/* Eats retention: review nudge banner + "your saved spots" section link */
.eat-review-nudge{display:flex;align-items:center;gap:12px;margin:6px 0 18px;padding:12px 14px;text-decoration:none;
  border:1px solid color-mix(in srgb,var(--bz-orange) 35%,var(--bz-line));border-radius:12px;
  background:color-mix(in srgb,var(--bz-orange) 8%,var(--surface));color:var(--text)}
.eat-review-nudge:hover{border-color:var(--bz-orange)}
.ern-ic{font-size:22px;flex:none}
.ern-body{display:flex;flex-direction:column;flex:1;min-width:0;line-height:1.3}
.ern-body b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ern-cta{flex:none;font-weight:800;color:var(--bz-orange)}
.eat-seeall{font-size:13px;font-weight:700;color:var(--bz-orange);text-decoration:none;margin-left:8px}
.eat-seeall:hover{text-decoration:underline}

/* Native app: hide all "buy coins" entry points — App Store / Play Store require
   digital-goods purchases go through their own billing (Stripe would be rejected).
   The /coins/buy + checkout routes are also 404'd server-side for the native UA. */
.is-native-app a[href*="/coins/buy"]{display:none !important}
/* Hide the "Get the app" badges inside the app itself (you're already in it). */
.is-native-app .app-badges{display:none !important}

/* Official app-store badges */
.app-badges{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:16px}
.app-badge-img{height:48px;width:auto;display:block;transition:transform .12s}
.app-badges a:hover .app-badge-img{transform:translateY(-2px)}
/* Footer badges: slightly smaller + left-aligned under the brand */
.site-footer .app-badges{margin-top:14px}
.site-footer .app-badge-img{height:40px}
/* "Get the app" store link in the left rail — pointless inside the native app */
.is-native-app .lr-getapp{display:none !important}
/* Refer-a-Friend: "you were invited" banner on the register page */
.invite-banner{background:rgba(245,135,31,.12);border:1px solid var(--bz-line);border-radius:12px;padding:11px 14px;font-size:14px;color:var(--text);line-height:1.45;margin-bottom:14px}

/* ── Live Betting / Prediction Markets (event page widget) ─────────────── */
.ev-bets{background:var(--surface);border:1px solid var(--bz-line);border-radius:14px;padding:14px;margin-bottom:14px}
.ev-bets-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.ev-bets-h{display:flex;align-items:center;gap:8px;font-size:16px;font-weight:800;color:var(--text);margin:0}
.ev-bets-bal{font-size:13px;font-weight:700;color:var(--text);white-space:nowrap}
.ev-bets-note{font-size:12px;color:var(--bz-muted);margin:6px 0 12px}
.ev-bets-empty{font-size:14px;color:var(--bz-muted);margin:4px 0}
.ev-bets-new{margin-bottom:12px;border:1px dashed var(--bz-line);border-radius:12px;overflow:hidden}
.ev-bets-new>summary{cursor:pointer;padding:10px 12px;font-weight:700;font-size:14px;color:var(--bz-orange);list-style:none}
.ev-bets-new>summary::-webkit-details-marker{display:none}
.ev-bets-newform{display:flex;flex-direction:column;gap:8px;padding:0 12px 12px}
.ev-bets-newform input[type=text],.ev-bets-newform input[type=number]{border:2px solid var(--bz-line);border-radius:10px;padding:9px 11px;font-size:14px;font-family:var(--body);background:var(--surface);color:var(--text)}
.ev-bets-newform input:focus{outline:none;border-color:var(--bz-orange)}
.ev-bets-close{font-size:12px;color:var(--bz-muted);display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.ev-bets-close input{width:80px}
.ev-bets-list{display:flex;flex-direction:column;gap:12px}
.ev-bet{border:1px solid var(--bz-line);border-radius:12px;padding:12px;background:var(--bz-card,var(--surface))}
.ev-bet-top{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
.ev-bet-q{font-weight:800;font-size:15px;color:var(--text);line-height:1.3}
.ev-bet-state{flex-shrink:0;font-size:11px;font-weight:800;padding:3px 8px;border-radius:999px;text-transform:uppercase;letter-spacing:.02em;background:var(--bz-line);color:var(--bz-muted)}
.ev-bet-state-open{background:rgba(34,197,94,.16);color:var(--bz-green,#16a34a)}
.ev-bet-state-settled{background:rgba(245,158,11,.16);color:var(--bz-amber-deep,#b45309)}
.ev-bet-meta{font-size:12px;color:var(--bz-muted);margin:6px 0 10px;display:flex;gap:6px;flex-wrap:wrap}
.ev-bet-opts{display:flex;flex-direction:column;gap:6px}
.ev-bet-opt{position:relative;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:9px 11px;border-radius:9px;border:1px solid var(--bz-line);background:var(--surface);overflow:hidden}
.ev-bet-opt-bar{position:absolute;inset:0 auto 0 0;height:100%;background:rgba(245,158,11,.18);z-index:0;transition:width .4s ease}
.ev-bet-opt-label,.ev-bet-opt-pct{position:relative;z-index:1;font-size:13px;color:var(--text)}
.ev-bet-opt-label{font-weight:600}
.ev-bet-opt-pct{font-weight:800;color:var(--bz-muted)}
.ev-bet-opt.is-mine{border-color:var(--bz-orange)}
.ev-bet-opt.is-winner{border-color:var(--bz-green,#16a34a)}
.ev-bet-opt.is-winner .ev-bet-opt-bar{background:rgba(34,197,94,.2)}
.ev-bet-mine{font-size:13px;color:var(--text);margin:10px 0 0}
.ev-bet-won{color:var(--bz-green,#16a34a);font-weight:700}
.ev-bet-lost{color:var(--bz-muted)}
.ev-bet-ref{color:var(--bz-muted)}
.ev-bet-place{display:flex;gap:6px;margin-top:10px;flex-wrap:wrap}
.ev-bet-place select{flex:1;min-width:120px;border:2px solid var(--bz-line);border-radius:10px;padding:8px 10px;font-size:14px;background:var(--surface);color:var(--text)}
.ev-bet-place input[type=number]{width:88px;border:2px solid var(--bz-line);border-radius:10px;padding:8px 10px;font-size:14px;background:var(--surface);color:var(--text)}
.ev-bet-place select:focus,.ev-bet-place input:focus{outline:none;border-color:var(--bz-orange)}
.ev-bet-hint{font-size:11px;color:var(--bz-muted);margin:6px 0 0}
.ev-bet-admin{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:12px;padding-top:10px;border-top:1px dashed var(--bz-line)}
.ev-bet-settle{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.ev-bet-settle select{border:2px solid var(--bz-line);border-radius:10px;padding:7px 9px;font-size:13px;background:var(--surface);color:var(--text)}
.ev-bet-void{background:none;border:none;color:var(--bz-red,#dc2626);font-size:12px;font-weight:700;cursor:pointer;padding:6px 4px}
.ev-bet-void:hover{text-decoration:underline}

/* ---- Clip trim: dual-range slider over the preview ---- */
.clip-trim{margin-top:10px;padding:12px;border:1px solid var(--bz-line);border-radius:12px;background:var(--surface)}
.ct-head{font-weight:800;font-size:13.5px;margin-bottom:12px}
.ct-head .s{font-weight:700;color:var(--bz-orange)}
.ct-bar{position:relative;height:34px}
.ct-bar::before{content:'';position:absolute;top:14px;left:0;right:0;height:6px;background:var(--bz-line);border-radius:3px}
.ct-sel{position:absolute;top:14px;height:6px;background:var(--bz-orange);border-radius:3px}
/* Handle knobs — real divs, positioned by JS, drawn ON TOP so nothing hides them
   (stacked range inputs occlude each other's native thumb on iOS). Transparent
   thumbs below stay draggable; these knobs are just the visuals (pointer-events off). */
.ct-knob{position:absolute;top:0;width:16px;height:34px;margin-left:-8px;background:var(--bz-orange);border:2px solid #fff;border-radius:7px;box-shadow:0 1px 5px rgba(0,0,0,.5);box-sizing:border-box;pointer-events:none;z-index:6}
.ct-range{position:absolute;top:0;left:0;width:100%;height:34px;margin:0;background:none;-webkit-appearance:none;appearance:none;pointer-events:none}
.ct-range::-webkit-slider-thumb{-webkit-appearance:none;pointer-events:auto;width:34px;height:34px;background:transparent;border:0;cursor:ew-resize}
.ct-range::-moz-range-thumb{pointer-events:auto;width:34px;height:34px;background:transparent;border:0;cursor:ew-resize}
.ct-range::-webkit-slider-runnable-track{background:none;border:0}
.ct-range::-moz-range-track{background:none;border:0}
/* Feed variant: larger than the show-page player and prominent on load, like
   Reddit — full-width on phones, centered on desktop. Keeps the clip's own
   (portrait) ratio so there are no letterbox bars; height-capped so it can't
   dominate the scroll. */
.vid-player--feed{max-width:440px;margin:0 auto 14px;max-height:62vh}
/* Mobile: let the portrait clip fill the card width edge-to-edge (like an image
   / a vertical Short) instead of a narrow centered box; cap height to the
   viewport so it never overflows the screen. */
@media (max-width:600px){
  .vid-player--feed{max-width:100%;margin:0 0 12px;max-height:84vh;border-radius:0;
    border-top:1px solid var(--bz-line);border-bottom:1px solid var(--bz-line)}
}
/* Video posters in compact grid cards (community / search / tag pages). */
.t-thumb-wrap{position:relative;display:block;margin-bottom:12px}
.t-thumb-wrap .t-thumb{margin-bottom:0}
.t-play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:30px;color:#fff;text-shadow:0 2px 10px rgba(0,0,0,.7);pointer-events:none;
  background:linear-gradient(transparent,rgba(0,0,0,.28));border-radius:10px}
.vid-state{margin:0 0 14px;padding:16px 18px;border-radius:12px;text-align:center;
  font-size:14px;font-weight:600;border:1px solid var(--bz-line);background:var(--surface);color:var(--bz-muted)}
.vid-state-fail{border-color:#d23b3b;color:#d23b3b}

/* ============ Mobile + dark-mode polish pass ============================ */
/* Hero subtext: darker / higher-contrast on the amber hero (both themes). */
.hero p.sub{color:#3a2e14;font-weight:600}
.hero .hint{color:#3a2e14}

/* Dark mode: chips & boxes that hardcode a light (cream) background would show
   pale/illegible on the dark page — adapt them so text stays readable. */
html[data-theme=dark] .bc-locked{background:var(--bz-cream)}
html[data-theme=dark] .tag,
html[data-theme=dark] .comm-chip,
html[data-theme=dark] .bz-badge--goal,
html[data-theme=dark] .react-btn--on,
html[data-theme=dark] .emoji-btn.on{background:rgba(245,135,31,.16);border-color:rgba(245,135,31,.36)}
html[data-theme=dark] .msg-row.unread{background:rgba(245,135,31,.10);border-color:var(--bz-amber-deep)}
html[data-theme=dark] .profile-stats>a:hover,
html[data-theme=dark] .pf-links a:hover{background:rgba(255,255,255,.07)}

/* Mobile compose button: a cleaner raised FAB with a soft shadow. */
.mobnav .mob-post{width:46px;height:46px;margin-top:-16px;border:3px solid var(--surface);
  box-shadow:0 6px 16px rgba(245,135,31,.5)}

/* Explore topic chips: subtle fill for better definition. */
.xp-topic{background:var(--bz-cream)}
/* Hero heading inherits color (not via --text var), so dark mode left it light
   on the amber hero — force it dark (the hero is amber in both themes). */
html[data-theme=dark] .hero h1{color:#141414}

/* ============ Events ==================================================== */
.evpage{max-width:620px;margin:0 auto}
.ev-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:6px}
.ev-head h1{font-size:24px}
.ev-section{margin-top:22px}
.ev-section-h{font-size:15px;font-weight:800;color:var(--bz-muted);text-transform:uppercase;letter-spacing:.6px;margin-bottom:10px}
.ev-card{display:flex;align-items:center;justify-content:space-between;gap:14px;background:var(--surface);
  border:1px solid var(--bz-line);border-radius:var(--r);padding:14px 16px;box-shadow:var(--sh);margin-bottom:10px;text-decoration:none;color:var(--text)}
.ev-card:hover{border-color:var(--bz-orange)}
.ev-card-title{font-weight:800;font-size:16px}
.ev-card-host{font-size:13px;color:var(--bz-orange-deep);font-weight:700;margin-top:2px}
.ev-card-meta{font-size:12px;color:var(--bz-muted);margin-top:4px}
.ev-card-side{flex-shrink:0}
.ev-pill{display:inline-flex;align-items:center;gap:6px;background:rgba(20,20,20,.06);color:var(--bz-muted);
  border-radius:999px;padding:4px 11px;font-size:12px;font-weight:700;white-space:nowrap}
.ev-pill-live{background:rgba(232,72,44,.12);color:var(--bz-hot)}
.ev-pill-ended{opacity:.8}
.ev-dot{width:8px;height:8px;border-radius:50%;background:var(--bz-hot);animation:blink 1.3s infinite}
.ev-empty{text-align:center;background:var(--surface);border:1px solid var(--bz-line);border-radius:var(--r);padding:34px 24px;box-shadow:var(--sh)}
.ev-empty-title{font-size:18px;font-weight:800;margin-bottom:6px}
.ev-empty-actions{margin-top:16px}
.ev-show{background:var(--surface);border:1px solid var(--bz-line);border-radius:var(--r);padding:22px;box-shadow:var(--sh)}
.ev-show-head h1{font-size:22px}
.ev-host{display:inline-flex;align-items:center;gap:8px;margin-top:10px;text-decoration:none;font-size:14px;font-weight:700;color:var(--bz-orange-deep)}
.ev-desc{margin-top:12px;color:var(--bz-muted);white-space:pre-wrap}
.ev-status-row{margin-top:14px}
.ev-rsvp{margin-top:16px}
.ev-rsvp-count{display:inline-block;margin-left:6px;font-weight:800}
.ev-feed{margin-top:22px;border-top:1px solid var(--bz-line);padding-top:16px}
.ev-feed-h{font-size:15px;font-weight:800;margin-bottom:10px}
.ev-feed-list{max-height:380px;overflow-y:auto;display:flex;flex-direction:column;gap:8px;padding-right:4px}
.ev-feed-empty{color:var(--bz-muted);font-size:14px;padding:8px 0}
.ev-msg{display:flex;flex-wrap:wrap;align-items:baseline;gap:7px;background:rgba(20,20,20,.04);border-radius:12px;padding:8px 12px}
.ev-msg-user{font-weight:800;font-size:13px;color:var(--bz-orange-deep)}
.ev-msg-body{font-size:14px;color:var(--text);word-break:break-word}
.ev-msg-at{margin-left:auto;font-size:11px;color:var(--bz-muted);white-space:nowrap}
.ev-form{display:flex;gap:8px;margin-top:14px}
.ev-form input{flex:1;border:2px solid var(--bz-line);border-radius:12px;padding:11px 13px;font-size:15px;font-family:var(--body);background:var(--surface);color:var(--text)}
.ev-form input:focus{outline:none;border-color:var(--bz-orange)}
.ev-feed-note{margin-top:14px;font-size:14px;color:var(--bz-muted)}
.ev-feed-note a{color:var(--bz-orange-deep);font-weight:700}

/* dark-mode: lift the chip/message backgrounds off the dark page */
html[data-theme=dark] .ev-pill{background:rgba(255,255,255,.08)}
html[data-theme=dark] .ev-msg{background:rgba(255,255,255,.05)}

/* ===== Live broadcast (events) ===== */
.ev-live{position:relative;width:100%;aspect-ratio:16/9;margin:16px 0;border-radius:12px;overflow:hidden;background:#000}
.ev-live iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.ev-golive{display:flex;flex-wrap:wrap;gap:10px;margin:16px 0}
.ev-broadcast{margin:16px 0;padding:16px;border:1px solid var(--bz-line);border-radius:12px;background:var(--surface);display:flex;flex-direction:column;gap:12px}
#evPreview{width:100%;max-height:280px;border-radius:12px;background:#000;object-fit:contain;transform:scaleX(-1)}
.ev-cast-status{margin:0;font-weight:600;color:var(--text)}
.ev-creds{border:1px solid var(--bz-line);border-radius:10px;padding:10px 12px;background:var(--surface)}
.ev-creds summary{cursor:pointer;color:var(--bz-muted);font-size:14px}
.ev-cred-row{margin:8px 0 0;font-size:13px;color:var(--text);word-break:break-all}
.ev-cred-row code{background:rgba(20,20,20,.06);border:1px solid var(--bz-line);border-radius:6px;padding:2px 6px;font-size:12px}
.ev-cred-note{margin:8px 0 0;font-size:12px;color:var(--bz-muted)}
.ev-end-btn{background:#e02424;color:#fff;border:1px solid #e02424}
.ev-end-btn:hover{background:#c81e1e;border-color:#c81e1e}
html[data-theme=dark] .ev-cred-row code{background:rgba(255,255,255,.08)}

/* ===== Event room: countdown, presence, manage, feed moderation ===== */
.ev-when{margin-top:8px;font-size:14px;font-weight:600;color:var(--text-soft)}
.ev-countdown{margin-top:12px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:26px;font-weight:800;letter-spacing:.5px;color:var(--bz-orange-deep);
  background:var(--bz-cream);border:2px solid var(--bz-line);border-radius:12px;
  padding:10px 16px;display:inline-block}
html[data-theme=dark] .ev-countdown{color:var(--bz-orange)}
.ev-card-when{font-size:13px;color:var(--text-soft);margin:2px 0}
.ev-room{background:var(--surface);border:1px solid var(--bz-line);border-radius:14px;
  padding:14px 16px;margin:18px 0}
.ev-room-h{display:flex;align-items:center;gap:10px;font-size:16px;font-weight:800;color:var(--text);margin:0 0 12px}
.ev-room-count{display:inline-flex;align-items:center;justify-content:center;min-width:24px;
  height:22px;padding:0 8px;border-radius:999px;background:var(--bz-orange);color:#fff;
  font-size:12px;font-weight:800}
.ev-att-list{display:flex;flex-direction:column;gap:6px}
.ev-att{position:relative;display:flex;align-items:center;gap:8px;
  padding:6px 8px;border-radius:10px;background:var(--bz-cream);border:1px solid var(--bz-line)}
.ev-att-name{font-weight:700;font-size:14px;color:var(--text)}
.ev-att-handle{font-size:13px;color:var(--bz-muted)}
.ev-att-badge{font-size:11px;font-weight:800;padding:2px 7px;border-radius:999px;white-space:nowrap}
.ev-badge-host{background:rgba(245,135,31,.16);color:var(--bz-orange-deep)}
.ev-badge-mod{background:rgba(20,20,20,.08);color:var(--text-soft)}
html[data-theme=dark] .ev-badge-host{color:var(--bz-orange)}
html[data-theme=dark] .ev-badge-mod{background:rgba(255,255,255,.08)}
.ev-att-mod{position:relative;margin-left:auto}
.ev-att-dots{border:none;background:transparent;cursor:pointer;font-size:20px;line-height:1;
  color:var(--text-soft);padding:2px 8px;border-radius:8px}
.ev-att-dots:hover{background:rgba(20,20,20,.06);color:var(--text)}
html[data-theme=dark] .ev-att-dots:hover{background:rgba(255,255,255,.08)}
.ev-att-menu{position:absolute;right:0;top:calc(100% + 4px);z-index:20;min-width:170px;
  background:var(--surface);border:1px solid var(--bz-line);border-radius:10px;
  box-shadow:0 8px 24px rgba(0,0,0,.18);padding:6px;display:flex;flex-direction:column;gap:2px}
.ev-att-menu form{margin:0}
.ev-att-menu button{width:100%;text-align:left;border:none;background:transparent;cursor:pointer;
  font-size:13px;font-weight:600;color:var(--text);padding:8px 10px;border-radius:7px}
.ev-att-menu button:hover{background:var(--bz-cream)}
.ev-att-menu .ev-att-danger{color:#c0392b}
.ev-att-menu .ev-att-danger:hover{background:rgba(192,57,43,.10)}
.ev-manage{margin:14px 0;background:var(--surface);border:1px solid var(--bz-line);border-radius:12px;padding:6px 14px}
.ev-manage>summary{cursor:pointer;list-style:none;font-weight:800;font-size:14px;color:var(--text);padding:8px 0}
.ev-manage>summary::-webkit-details-marker{display:none}
.ev-manage-sec{padding:6px 0 12px}
.ev-manage-h{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.6px;
  color:var(--bz-muted);margin:6px 0}
.ev-manage-row{display:flex;align-items:center;gap:8px;padding:6px 0;border-top:1px solid var(--bz-line)}
.ev-manage-name{font-weight:700;font-size:14px;color:var(--text)}
.ev-manage-handle{font-size:13px;color:var(--bz-muted)}
.ev-manage-row form{margin:0 0 0 auto}
.ev-manage-empty{font-size:13px;color:var(--bz-muted);padding:4px 0}
.btn-sm{padding:5px 12px;font-size:13px}
.ev-msg{position:relative}
.ev-msg-del{margin:0 0 0 auto}
.ev-msg-del-btn{border:none;background:transparent;cursor:pointer;color:var(--bz-muted);
  font-size:16px;line-height:1;padding:0 4px;border-radius:6px}
.ev-msg-del-btn:hover{color:#c0392b;background:rgba(192,57,43,.10)}
.ev-muted-note{font-size:14px;font-weight:700;color:var(--bz-muted);
  background:var(--bz-cream);border:1px dashed var(--bz-line);border-radius:10px;padding:10px 12px}

/* Live WHEP viewer */
.ev-live video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#000}
.ev-live-status{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  color:#fff;font-weight:600;font-size:15px;text-align:center;padding:12px;pointer-events:none}
.ev-live-unmute{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);z-index:3;
  border:0;border-radius:999px;background:rgba(0,0,0,.72);color:#fff;font-weight:700;
  font-size:14px;padding:9px 18px;cursor:pointer;backdrop-filter:blur(4px)}
.ev-live-unmute:hover{background:rgba(0,0,0,.88)}

/* Gold Buzz Coin icon */
.coin-ic{width:1.15em;height:1.15em;vertical-align:-.22em;display:inline-block}

/* Coin USD worth */
.coin-rate{margin-top:8px;display:inline-block;background:var(--bz-cream);border:1px solid var(--bz-line);
  border-radius:999px;padding:5px 12px;font-size:13px;color:var(--text-soft)}
.coin-bal-usd{display:block;font-size:13px;font-weight:700;color:var(--bz-orange-deep);margin-top:2px}
html[data-theme=dark] .coin-bal-usd{color:var(--bz-orange)}

/* ===== Event theater layout (YouTube-live: big video + docked chat) ===== */
.x-shell-theater{grid-template-columns:minmax(84px,240px) minmax(0,1fr);max-width:none}
.x-shell-theater>.rightrail{display:none}
.x-shell-theater .x-main{border-right:0}
.x-shell-theater .evpage{max-width:none;margin:0}
.x-shell-theater .ev-show{padding:0;border:0;background:transparent;box-shadow:none}
.ev-theater{display:flex;gap:16px;align-items:flex-start;padding:2px 20px 18px}
.ev-stage{flex:1 1 auto;min-width:0}
.ev-stage .ev-live{width:100%;margin:0 0 14px;max-height:calc(100vh - 120px)}
.ev-live-offline{display:flex;align-items:center;justify-content:center}
.ev-show-head h1{font-size:26px}
.ev-aside{flex:0 0 392px;width:392px;position:sticky;top:8px;
  display:flex;flex-direction:column;gap:14px;height:calc(100vh - 16px)}
.ev-aside .ev-room{flex:0 0 auto;margin:0}
.ev-aside .ev-att-list{max-height:24vh;overflow-y:auto}
.ev-chat{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;
  border:1px solid var(--bz-line);border-radius:14px;background:var(--surface);padding:12px 14px}
.ev-chat .ev-feed{margin:0;border-top:0;padding-top:0;flex:1 1 auto;min-height:0;display:flex;flex-direction:column}
.ev-chat .ev-feed-list{max-height:none;flex:1 1 auto}
@media(max-width:1100px){ .x-shell-theater{grid-template-columns:84px minmax(0,1fr)} }
@media(max-width:980px){
  .ev-theater{flex-direction:column;padding:2px 12px 16px}
  .ev-stage .ev-live{max-height:62vh}
  .ev-aside{flex:1 1 auto;width:100%;position:static;height:auto}
  .ev-chat .ev-feed-list{max-height:52vh}
  .ev-aside .ev-att-list{max-height:40vh}
}
@media(max-width:700px){ .x-shell-theater{grid-template-columns:1fr} }

/* Drag-to-resize handle between the video and chat */
.ev-resize{flex:0 0 8px;align-self:stretch;cursor:col-resize;position:relative;border-radius:4px;touch-action:none}
.ev-resize::before{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:4px;height:46px;border-radius:3px;background:var(--bz-line)}
.ev-resize:hover::before{background:var(--bz-orange)}
@media(max-width:980px){ .ev-resize{display:none} }

/* Left rail fills the entire left edge (covers the gap when the shell is centered) */
.leftrail{box-shadow:-100vw 0 0 var(--rail-bg)}
/* Keep page content from touching the left rail */
.evpage{padding-left:20px;padding-right:20px}
.x-shell-theater .evpage{padding:0}

/* ===== Event room: Buzz Coin donations ===== */
.ev-donate{margin:6px 0}
.ev-donate-btn{display:inline-flex;align-items:center;gap:5px;font:inherit;font-weight:700;font-size:.82rem;cursor:pointer;
  padding:5px 12px;border-radius:999px;color:var(--bz-orange-deep);background:var(--bz-cream);
  border:1px solid var(--bz-orange);transition:background .15s ease,transform .08s ease}
.ev-donate-btn:hover{background:#fff2dd}
.ev-donate-btn:active{transform:translateY(1px)}
#evDonateForm{margin-top:8px;padding:12px;border:1px solid var(--bz-line);border-radius:12px;
  background:var(--surface);display:flex;flex-direction:column;gap:8px}
#evDonateForm[hidden]{display:none}
#evDonateForm .ev-donate-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
#evDonateForm input[type="number"],#evDonateForm input[type="text"]{font:inherit;padding:8px 10px;
  border:1px solid var(--bz-line);border-radius:8px;background:var(--surface);color:var(--text)}
#evDonateCoins{width:110px}
#evDonateMsg{width:100%}
.ev-donate-usd{font-weight:700;color:var(--bz-orange-deep)}
.ev-donate-bal{font-size:.82rem;color:var(--bz-muted)}
.ev-donate-hint{margin:0;font-size:.78rem;color:var(--bz-muted)}
.ev-donate-send{white-space:nowrap}
.ev-donate-err{margin:0;font-size:.85rem;font-weight:600;color:#b4232a}
.ev-donate-err .ev-donate-buy{color:var(--bz-orange-deep);font-weight:700;text-decoration:underline}
.ev-coin-ico{width:1em;height:1em;vertical-align:-0.12em;display:inline-block}
.ev-msg-donation{background:linear-gradient(135deg,var(--bz-cream),#ffe6b8);border:1px solid var(--bz-orange);
  border-radius:12px;padding:8px 10px;box-shadow:0 1px 3px rgba(214,122,0,.18)}
.ev-msg-donation .ev-msg-donation-amt{display:inline-flex;align-items:center;gap:4px;font-weight:800;
  color:var(--bz-orange-deep);margin-right:6px}
.ev-msg-donation .ev-msg-user{color:var(--bz-orange-deep);font-weight:700}
#evPinned:empty{display:none}
.ev-pin{position:sticky;top:0;z-index:3;display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  margin-bottom:8px;padding:9px 12px;border-radius:12px;
  background:linear-gradient(135deg,var(--bz-orange),var(--bz-orange-deep));color:#fff;
  box-shadow:0 2px 8px rgba(214,122,0,.35)}
.ev-pin-coins{display:inline-flex;align-items:center;gap:4px;font-weight:800}
.ev-pin-user{font-weight:700;opacity:.95}
.ev-pin-body{flex:1 1 100%;font-size:.9rem;opacity:.95}
html[data-theme=dark] .ev-donate-btn{background:rgba(255,170,60,.12);color:var(--bz-orange);border-color:var(--bz-orange)}
html[data-theme=dark] .ev-donate-btn:hover{background:rgba(255,170,60,.20)}
html[data-theme=dark] .ev-msg-donation{background:linear-gradient(135deg,rgba(255,170,60,.16),rgba(214,122,0,.10));
  border-color:rgba(255,170,60,.5);box-shadow:none}
html[data-theme=dark] .ev-msg-donation .ev-msg-donation-amt,
html[data-theme=dark] .ev-msg-donation .ev-msg-user{color:var(--bz-orange)}
html[data-theme=dark] .ev-donate-err{color:#ff7a82}
html[data-theme=dark] .ev-donate-err .ev-donate-buy{color:var(--bz-orange)}
html[data-theme=dark] .ev-pin{background:linear-gradient(135deg,var(--bz-orange-deep),#7a3e00);box-shadow:0 2px 8px rgba(0,0,0,.4)}

/* ===== Event room: Q&A tab + panel ===== */
.ev-tabs{display:flex;gap:6px;margin:4px 0 10px}
.ev-tab{flex:1;border:1px solid var(--bz-line);background:var(--surface);color:var(--bz-muted);
  font:inherit;font-weight:700;font-size:.9rem;cursor:pointer;padding:8px 10px;border-radius:10px;
  display:inline-flex;align-items:center;justify-content:center;gap:6px}
.ev-tab.is-active{background:var(--bz-cream);color:var(--text);border-color:var(--bz-orange)}
.ev-tab-dot{width:8px;height:8px;border-radius:50%;background:var(--bz-hot);display:inline-block}
.ev-chat[hidden],.ev-qa[hidden]{display:none}
.ev-qa{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;
  border:1px solid var(--bz-line);border-radius:14px;background:var(--surface);padding:12px 14px}
.ev-qa-h{font-size:15px;font-weight:800;margin:0 0 10px}
.ev-qa-ask{display:flex;gap:8px;margin-bottom:10px}
.ev-qa-ask input{flex:1;min-width:0;border:1px solid var(--bz-line);border-radius:999px;
  padding:9px 14px;background:var(--surface);color:var(--text);font:inherit}
.ev-qa-ask-btn{flex:none;padding:8px 16px}
.ev-qa-muted,.ev-qa-note{font-size:14px;color:var(--bz-muted);margin:0 0 10px}
.ev-qa-note a{color:var(--bz-orange-deep);font-weight:700}
.ev-qa-list{flex:1 1 auto;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:8px;padding-right:2px}
.ev-qa-empty{color:var(--bz-muted);font-size:14px;padding:8px 2px}
.ev-q{display:flex;gap:10px;align-items:flex-start;padding:8px;border:1px solid var(--bz-line);
  border-radius:12px;background:var(--bz-cream)}
.ev-q-answered{opacity:.62}
.ev-q-vote{flex:none;display:flex;flex-direction:column;align-items:center;gap:1px;min-width:42px;
  border:1px solid var(--bz-line);background:var(--surface);color:var(--bz-muted);cursor:pointer;
  padding:5px 6px;border-radius:9px;font:inherit;line-height:1}
.ev-q-vote .ev-q-vote-arrow{font-size:12px}
.ev-q-vote .ev-q-vote-count{font-size:14px;font-weight:800;color:var(--text)}
.ev-q-vote:hover{border-color:var(--bz-orange)}
.ev-q-vote.is-voted{background:var(--bz-orange);border-color:var(--bz-orange)}
.ev-q-vote.is-voted .ev-q-vote-arrow,.ev-q-vote.is-voted .ev-q-vote-count{color:#fff}
.ev-q-main{flex:1;min-width:0}
.ev-q-body{margin:0 0 4px;font-size:14px;color:var(--text);word-wrap:break-word}
.ev-q-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ev-q-user{font-size:12px;font-weight:700;color:var(--bz-muted)}
.ev-q-badge{font-size:11px;font-weight:800;padding:2px 7px;border-radius:999px;
  background:rgba(46,175,110,.15);color:var(--bz-good)}
.ev-q-actions{flex:none;display:flex;align-items:center;gap:4px}
.ev-q-answer{border:1px solid var(--bz-line);background:var(--surface);color:var(--bz-good);
  font:inherit;font-weight:700;font-size:12px;cursor:pointer;padding:5px 9px;border-radius:8px;white-space:nowrap}
.ev-q-answer:hover{border-color:var(--bz-good)}
.ev-q-del{border:0;background:transparent;color:var(--bz-muted);cursor:pointer;font-size:16px;line-height:1;padding:2px 5px;border-radius:6px}
.ev-q-del:hover{color:#c0392b;background:rgba(192,57,43,.10)}
html[data-theme=dark] .ev-tab.is-active{background:rgba(255,170,60,.14)}
html[data-theme=dark] .ev-q{background:rgba(255,255,255,.03)}
html[data-theme=dark] .ev-q-badge{background:rgba(46,175,110,.22)}

/* ====================================================================
   🍽️ Eats — restaurant reviews by state & city
   ==================================================================== */

/* Restaurant card grid (landing / state / city / search) */
.rest-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:16px;margin:14px 0 6px}
.rest-card{display:flex;flex-direction:column;background:var(--surface);border:2px solid var(--bz-line);
  border-radius:var(--r);overflow:hidden;text-decoration:none;color:var(--text);transition:transform .12s ease,box-shadow .12s ease}
.rest-card:hover{transform:translateY(-3px);box-shadow:var(--sh)}
.rest-cover{position:relative;aspect-ratio:16/10;background:var(--bz-cream) center/cover no-repeat;display:flex;align-items:center;justify-content:center}
.rest-cover-ph{font-size:38px;opacity:.5}
/* Cover boxes show the WHOLE image (logos & wide wordmarks included), scaled to
   FIT inside the box on a soft blurred fill of itself — never cropped/cut off.
   Overlay badges (score/featured/logo) stay on top via z-index. */
.rest-cover.has-cover,.rest-hero-cover.has-cover{background:var(--bz-cream);overflow:hidden}
.rest-cover.has-cover::before,.rest-hero-cover.has-cover::before{content:"";position:absolute;inset:0;z-index:0;background:var(--cover) center/cover no-repeat;filter:blur(16px) saturate(1.25);transform:scale(1.2);opacity:.5}
.rest-cover.has-cover::after,.rest-hero-cover.has-cover::after{content:"";position:absolute;inset:0;z-index:1;background:var(--cover) center/contain no-repeat}
.rest-score,.rest-logo{z-index:2}
.rest-score{position:absolute;top:8px;right:8px;background:rgba(20,20,20,.78);color:#fff;font-weight:800;
  font-size:13px;padding:3px 8px;border-radius:999px}
.rest-body{padding:11px 13px 13px}
.rest-name{display:block;font-family:var(--head);font-weight:800;font-size:15.5px;line-height:1.25}
.rest-sub{display:flex;gap:8px;flex-wrap:wrap;font-size:12.5px;color:var(--text-soft);margin-top:3px}
.rest-price{font-weight:700;color:var(--bz-good)}
.rest-stars{color:var(--bz-amber-deep);letter-spacing:1px;font-size:14px;margin-top:5px;display:flex;align-items:center;gap:6px}
.rest-stars--lg{font-size:20px}
.rest-count{color:var(--text-soft);letter-spacing:normal;font-size:12px;font-weight:600}
.rest-loc{font-size:12.5px;color:var(--text-soft);margin-top:6px}

/* Mini stars on review buzz-cards */
.t-stars{color:var(--bz-amber-deep);letter-spacing:1px;font-size:13px;margin:2px 0 4px}

/* States / cities chip grid */
.state-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;margin:14px 0}
.state-chip{display:flex;flex-direction:column;gap:3px;background:var(--surface);border:2px solid var(--bz-line);
  border-radius:12px;padding:13px 15px;text-decoration:none;color:var(--text);transition:border-color .12s ease,transform .12s ease}
.state-chip:hover{border-color:var(--bz-amber);transform:translateY(-2px)}
.state-chip b{font-family:var(--head);font-weight:800;font-size:15px}
.state-chip span{font-size:12.5px;color:var(--text-soft)}

/* City sort bar */
.rest-sortbar{display:flex;gap:8px;margin:6px 0 4px}
.rest-sort{font-size:13px;font-weight:700;padding:7px 13px;border-radius:999px;text-decoration:none;
  color:var(--text-soft);border:2px solid var(--bz-line);background:var(--surface)}
.rest-sort.on{color:#fff;background:var(--bz-orange);border-color:var(--bz-orange)}

/* Restaurant hero */
.rest-hero{display:flex;gap:18px;background:var(--surface);border:2px solid var(--bz-line);
  border-radius:var(--r-lg);overflow:hidden;margin-bottom:18px}
/* Eats: Yelp-style location sidebar (map + contact card) on the right rail */
/* Eats map explore page */
.eat-map-page{display:flex;flex-direction:column;min-height:calc(100vh - 34px)}
.eat-map-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:6px 4px 12px;flex-wrap:wrap}
.eat-map-filters{display:flex;gap:8px;flex-wrap:wrap;align-items:center;padding:0 4px 12px}
.eat-map-filters select{border:1.5px solid var(--bz-line);border-radius:999px;padding:8px 14px;font:inherit;
  font-weight:600;font-size:13.5px;background:var(--surface);color:var(--text);cursor:pointer}
.eat-map-filters select:focus{outline:none;border-color:var(--bz-orange)}
.eat-f-clear{border:0;background:none;color:var(--bz-orange-deep);font-weight:700;font-size:13px;cursor:pointer;padding:8px}
.eat-map-search{display:flex;gap:8px;align-items:center;flex:1;min-width:200px;max-width:380px;margin:0 6px}
.eat-map-search .ac{position:relative;flex:1}
.eat-map-search .ac-list{z-index:1200}
.eat-map-search input,.eat-map-search select{border:1.5px solid var(--bz-line);border-radius:999px;padding:8px 14px;
  font:inherit;font-size:13.5px;background:var(--surface);color:var(--text)}
.eat-map-search input{width:100%}
.eat-map-search select{max-width:84px;padding:8px}
.eat-map-search input:focus,.eat-map-search select:focus{outline:none;border-color:var(--bz-orange)}
.eat-map-actions{display:flex;gap:8px}
.eat-map-wrap{display:flex;flex:1;min-height:0;border:1px solid var(--bz-line);border-radius:16px;overflow:hidden;box-shadow:var(--sh)}
.eat-map-list{width:340px;flex:none;overflow-y:auto;border-right:1px solid var(--bz-line);background:var(--surface)}
.eat-map-canvas{flex:1;min-width:0;min-height:560px;z-index:0;background:#eaeaea}
/* brand the marker-cluster bubbles orange (default is blue/green) */
.marker-cluster{background:rgba(245,135,31,.30)!important}
.marker-cluster div{background:var(--bz-orange)!important;color:#fff!important;font-weight:800}
/* CSS-drawn pin (no external icon image to 404) */
.eat-pin-mk{background:none;border:0}
.eat-pin-mk i{display:block;width:16px;height:16px;border-radius:50%;background:var(--bz-orange);
  border:3px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.45)}
/* Deals map layer: spots with a live offer get a 🏷️ badge + a popup banner. */
.eat-pin-mk.has-deal i{background:#e11d48}
.eat-pin-mk.has-deal{position:relative}
.eat-pin-deal{position:absolute;top:-13px;left:50%;transform:translateX(-50%);font-size:13px;line-height:1;
  background:#fff;border-radius:50%;padding:2px;box-shadow:0 1px 4px rgba(0,0,0,.4)}
.eat-pop-deal{display:flex;gap:9px;align-items:flex-start;margin:9px 12px 2px;padding:9px 11px;border-radius:11px;
  background:color-mix(in srgb,var(--bz-orange) 12%,var(--surface));border:1px solid color-mix(in srgb,var(--bz-orange) 35%,var(--bz-line))}
.eat-pop-deal-emoji{font-size:20px;line-height:1.2}
.eat-pop-deal b{display:block;font-size:13.5px}
.eat-pop-deal-terms{display:block;font-size:11.5px;color:var(--muted)}
.eat-pop-deal-ends{display:block;font-size:11px;color:var(--bz-orange);font-weight:700;margin-top:2px}
.eat-pin-deal-chip{display:inline-block;align-self:flex-start;font-size:11.5px;font-weight:700;color:#be123c;
  background:color-mix(in srgb,#e11d48 12%,var(--surface));border:1px solid color-mix(in srgb,#e11d48 30%,var(--bz-line));
  border-radius:8px;padding:1px 7px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.eat-pin-card.has-deal{background:color-mix(in srgb,var(--bz-orange) 6%,transparent)}
.eat-f-deals input:checked + *,.eat-f-deals:has(:checked){color:#be123c}
.leaflet-popup-content{margin:10px 12px}
.eat-pin-card{display:flex;gap:11px;padding:11px 13px;border-bottom:1px solid var(--bz-line);color:var(--text)}
.eat-pin-card:hover{background:var(--bz-cream)}
.eat-pin-thumb{flex:none;width:62px;height:62px;border-radius:10px;background:var(--bz-cream) center/cover no-repeat;display:grid;place-items:center;font-size:24px;border:1px solid var(--bz-line)}
.eat-pin-body{display:flex;flex-direction:column;gap:2px;min-width:0}
.eat-pin-body b{font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.eat-pop-wrap .leaflet-popup-content{margin:0;width:auto!important}
.eat-pop-wrap .leaflet-popup-content-wrapper{border-radius:14px;padding:0;overflow:hidden}
.eat-pop{display:block;color:var(--text)}
.eat-pop-photos{height:120px;background:var(--bz-cream)}
.eat-pop-photos img{width:100%;height:120px;object-fit:cover;display:block}
.eat-pop-photos .ph{display:grid;place-items:center;height:120px;font-size:34px}
.eat-pop-photos.strip{display:flex;overflow-x:auto;gap:3px;scroll-snap-type:x mandatory}
.eat-pop-photos.strip .eat-pop-ph{flex:0 0 76%;height:120px;background:#eee center/cover no-repeat;scroll-snap-align:start}
.eat-pop-body{padding:11px 13px;display:flex;flex-direction:column;gap:5px}
.eat-pop-name{font-family:var(--head);font-weight:800;font-size:16px;color:var(--text);line-height:1.2}
.eat-pop-name:hover{color:var(--bz-orange)}
.eat-pop-rating{font-size:13px;color:var(--bz-orange-deep);font-weight:700}
.eat-pop-meta{font-size:13px;color:var(--bz-muted);font-weight:600}
.eat-pop-row{font-size:12.5px;color:var(--text-soft);display:block;word-break:break-word}
a.eat-pop-row:hover{color:var(--bz-orange)}
.eat-pop-actions{display:flex;gap:7px;margin-top:6px}
.eat-pop-actions .btn{flex:1;justify-content:center;font-size:12.5px;padding:7px 8px}
@media(max-width:760px){
  .eat-map-wrap{flex-direction:column-reverse;height:auto}
  .eat-map-list{width:auto;max-height:42vh;border-right:0;border-top:1px solid var(--bz-line)}
  .eat-map-canvas{height:52vh;min-height:0}
}

/* Push the location panel down to line up with the restaurant card, not the
   breadcrumb above it (main column = 42px section pad + the breadcrumb row). */
.eat-side{display:flex;flex-direction:column;gap:14px;margin-top:78px}
.eat-map{height:230px;border-radius:16px;overflow:hidden;border:1px solid var(--bz-line);background:var(--bz-cream);z-index:0}
.eat-map .leaflet-control-attribution{font-size:9px;background:rgba(255,255,255,.7)}
.eat-side-card{background:var(--surface);border:1px solid var(--bz-line);border-radius:16px;padding:16px;
  display:flex;flex-direction:column;gap:11px;box-shadow:var(--sh)}
.eat-side-dir{width:100%;justify-content:center}
.eat-side-media{margin-top:14px;gap:0}
.eat-side-media h4{margin:0 0 10px;font-size:14px}
.eat-side-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.eat-side-thumb{display:block;padding-top:100%;border-radius:10px;background-size:cover;background-position:center;background-color:#eee;position:relative}
.eat-side-thumb.is-video::after{content:'▶';position:absolute;inset:0;display:grid;place-items:center;color:#fff;font-size:16px;text-shadow:0 1px 5px rgba(0,0,0,.7)}
.eat-side-row{display:flex;gap:9px;align-items:flex-start;font-size:14px;color:var(--text);line-height:1.45}
.eat-side-row span{min-width:0;word-break:break-word}
a.eat-side-row:hover{color:var(--bz-orange)}
.eat-side-meta{gap:12px;color:var(--bz-muted);font-weight:600}
.eat-price{color:#2EAF6E;font-weight:800}
.eat-side-review{width:100%;justify-content:center;margin-top:2px}
.rest-hero-cover{position:relative;flex:0 0 230px;background:var(--bz-cream) center/cover no-repeat;display:flex;align-items:center;justify-content:center;min-height:200px}
.rest-logo{position:absolute;left:10px;bottom:10px;width:54px;height:54px;border-radius:12px;object-fit:contain;
  background:#fff;padding:5px;box-shadow:0 2px 8px rgba(0,0,0,.25);border:1px solid rgba(255,255,255,.7)}
/* Diner photo gallery (real customer images from reviews) */
.rest-photos{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px;margin-top:6px}
.rest-photo{display:block;aspect-ratio:1;border-radius:12px;background:var(--bz-cream) center/cover no-repeat;
  border:1px solid var(--bz-line);transition:transform .12s}
.rest-photo:hover{transform:scale(1.03);border-color:var(--bz-orange)}
.rest-hero-cover .rest-cover-ph{font-size:56px}
.rest-hero-body{flex:1;min-width:0;padding:18px 20px 20px}
.rest-hero-name{font-family:var(--head);font-weight:800;font-size:26px;line-height:1.15;margin:0}
.rest-hero-sub{display:flex;gap:10px;flex-wrap:wrap;font-size:14px;color:var(--text-soft);margin-top:6px}
.rest-hero-rating{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:12px}
.rest-hero-score{font-family:var(--head);font-weight:800;font-size:30px;line-height:1}
.rest-info{margin-top:14px;display:flex;flex-direction:column;gap:7px}
.rest-info-row{font-size:13.5px;color:var(--text);text-decoration:none;display:block}
a.rest-info-row:hover{color:var(--bz-orange-deep)}
.rest-hero-badges{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}
.rest-hero-actions{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px;margin-top:12px}
.rest-hero-actions .btn{width:100%}
.rest-hero-actions .btn-orange{grid-column:1/-1}   /* primary CTA spans the full width */
.rest-intent{display:grid;grid-template-columns:repeat(auto-fit,minmax(135px,1fr));gap:8px;margin-top:12px}
.rest-intent-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:1.5px solid var(--bz-line);background:var(--surface);
  color:var(--text);font:inherit;font-weight:700;font-size:13.5px;padding:9px 14px;border-radius:999px;cursor:pointer}
.rest-intent .rest-intent-btn{width:100%}
.rest-intent>.guide-add{display:block}
.rest-intent-btn:hover{border-color:var(--bz-orange)}
.rest-intent-btn.on{background:rgba(245,135,31,.12);border-color:var(--bz-orange);color:var(--bz-orange-deep)}
.saved-card{position:relative;transition:opacity .15s}
.saved-remove{position:absolute;top:8px;right:8px;z-index:3;width:30px;height:30px;border-radius:50%;border:0;
  background:rgba(0,0,0,.55);color:#fff;font-size:14px;cursor:pointer;display:grid;place-items:center;line-height:1}
.saved-remove:hover{background:rgba(0,0,0,.78)}
/* Back button (replaces plain "← X" text links) */
.back-btn{display:inline-flex;align-items:center;gap:6px;border:1.5px solid var(--bz-line);background:var(--surface);color:var(--text);
  font:inherit;font-weight:600;font-size:13.5px;padding:7px 13px;border-radius:999px;text-decoration:none;line-height:1}
.back-btn:hover{border-color:var(--bz-orange);color:var(--bz-orange-deep)}

/* Rating breakdown bars */
.rest-breakdown{background:var(--surface);border:2px solid var(--bz-line);border-radius:var(--r);
  padding:14px 16px;margin-bottom:8px;display:flex;flex-direction:column;gap:7px;max-width:380px}
.rb-row{display:flex;align-items:center;gap:10px;font-size:13px}
.rb-label{flex:0 0 34px;color:var(--text-soft);font-weight:700}
.rb-bar{flex:1;height:9px;background:var(--bz-cream);border-radius:999px;overflow:hidden}
.rb-fill{display:block;height:100%;background:var(--bz-amber);border-radius:999px}
.rb-count{flex:0 0 30px;text-align:right;color:var(--text-soft);font-weight:600}

/* Review count → jumps to the reviews section */
.rest-hero-revlink{text-decoration:none;border-bottom:1px dotted currentColor;transition:color .12s}
.rest-hero-revlink:hover{color:var(--bz-orange)}

/* Star filter chips above the reviews (Yelp-style) */
.rev-filter{display:flex;flex-wrap:wrap;gap:8px;margin:2px 0 16px}
.rev-chip{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;
  border:1px solid var(--bz-line);background:var(--surface);color:var(--text);font-size:13px;font-weight:700;text-decoration:none}
.rev-chip span{font-weight:600;color:var(--muted)}
.rev-chip:hover{border-color:var(--bz-orange)}
.rev-chip.on{border-color:var(--bz-orange);background:color-mix(in srgb,var(--bz-orange) 14%,var(--surface));color:var(--bz-orange)}
.rev-chip.on span{color:var(--bz-orange)}
.rev-chip.is-empty{opacity:.5}

/* Interactive star picker (review composer) */
.star-pick{display:inline-flex;flex-direction:row-reverse;justify-content:flex-end;gap:4px;font-size:34px;line-height:1}
.star-pick input{position:absolute;opacity:0;width:0;height:0}
.star-pick label{color:var(--bz-line);cursor:pointer;transition:color .1s ease}
.star-pick label:hover,
.star-pick label:hover ~ label,
.star-pick input:checked ~ label{color:var(--bz-amber-deep)}
.star-pick input:focus-visible + label{outline:2px solid var(--bz-orange);outline-offset:2px;border-radius:4px}

@media (max-width:640px){
  .rest-hero{flex-direction:column}
  .rest-hero-cover{flex-basis:auto;min-height:160px;aspect-ratio:16/9}
}

/* Review banner on a review's buzz page */
.review-banner{display:flex;align-items:center;gap:12px;background:var(--bz-cream);border:2px solid var(--bz-line);
  border-radius:12px;padding:11px 14px;margin:4px 0 12px;text-decoration:none;color:var(--text)}
.review-banner:hover{border-color:var(--bz-amber)}
.review-banner .rb-ico{font-size:22px}
.review-banner .rb-thumb{flex:none;width:44px;height:44px;border-radius:9px;background:var(--surface) center/cover no-repeat;
  display:grid;place-items:center;font-size:20px;border:1px solid var(--bz-line)}
.review-banner .rb-meta{display:flex;flex-direction:column;line-height:1.3;flex:1;min-width:0}
.review-banner .rb-meta b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.review-banner .rest-stars{font-size:16px;flex:none}
.fc-review-banner{padding:0 16px}
.fc-review-banner .review-banner{margin:0 0 12px}

/* Discover tab bar (Communities ⇄ Eats) */
.disc-tabs{display:flex;gap:8px;margin:4px 0 18px}
/* Eats header action row (Map / Add a restaurant) */
.eat-toolbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:4px 0 18px}

/* Eats landing — quick links as tidy pills that WRAP (never cut off / scroll) */
.eat-quick{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 4px}
.eat-quick .eq{flex:0 0 auto;display:inline-flex;align-items:center;gap:7px;padding:9px 15px;
  border-radius:999px;border:1.5px solid var(--bz-line);background:var(--surface);color:var(--text);
  font-weight:700;font-size:14px;text-decoration:none;white-space:nowrap;transition:border-color .15s}
.eat-quick .eq:hover{border-color:var(--bz-orange)}
.eat-quick .eq-add{background:var(--bz-orange);border-color:var(--bz-orange);color:#fff}
.eat-quick .eq-add:hover{background:var(--bz-orange-deep);border-color:var(--bz-orange-deep)}

/* City/State picker on the Eats landing — label on its own line, then City + State +
   Go together on ONE row (they used to wrap because the label shared the row). */
.eat-picker{display:block;margin:12px 0 4px}
.eat-picker-lbl{display:block;font-weight:700;font-size:14px;color:var(--text);margin-bottom:8px}
/* City takes the room; State is compact (2-letter code); Go sizes to its label */
.eat-picker-row{display:grid;grid-template-columns:1fr 78px auto;gap:8px;align-items:stretch}
.eat-picker-row .ac{position:relative;min-width:0}
.eat-picker input,.eat-picker select{width:100%;border:1.5px solid var(--bz-line);border-radius:12px;
  padding:11px 13px;font:inherit;font-size:15px;background:var(--surface);color:var(--text)}
.eat-picker-row .btn{display:inline-flex;align-items:center;justify-content:center;width:100%;
  padding:11px 13px;border-radius:12px;white-space:nowrap}
.eat-picker input:focus,.eat-picker select:focus{outline:none;border-color:var(--bz-orange)}
/* Business claim flow */
.claim-step{display:flex;gap:14px;align-items:flex-start;padding:18px;border:1.5px solid var(--bz-line);border-radius:16px;margin-bottom:14px;background:var(--surface)}
.claim-step-n{flex:0 0 32px;height:32px;border-radius:50%;display:grid;place-items:center;font-weight:800;background:#fff3df;color:var(--bz-orange-deep);border:1.5px solid var(--bz-line)}
.claim-step-n.done{background:#16a34a;color:#fff;border-color:#16a34a}
.claim-ok{color:#16a34a;font-weight:600}
.claim-file{display:block;margin-top:10px;font:inherit;max-width:100%}
.claim-note{display:block;width:100%;margin-top:10px;border:1.5px solid var(--bz-line);border-radius:12px;padding:10px 12px;font:inherit;background:var(--surface);color:var(--text);resize:vertical}
.claim-note:focus{outline:none;border-color:var(--bz-orange)}
.claim-done{padding:22px;border:1.5px solid var(--bz-line);border-radius:16px;background:var(--surface);text-align:center}
.rest-claimed{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;color:#16a34a;background:rgba(22,163,74,.1);border:1px solid rgba(22,163,74,.25);padding:4px 10px;border-radius:999px}
/* "Claim your free listing" prompt on unclaimed restaurants (dark-mode safe: adaptive surface + amber accent) */
.owner-claim{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin:6px 0 18px;padding:14px 18px;background:var(--surface);border:1px solid var(--bz-line);border-left:4px solid var(--bz-amber);border-radius:14px}
.owner-claim-txt{display:flex;flex-direction:column;gap:3px;flex:1;min-width:240px}
.owner-claim-txt strong{font-size:15px;color:var(--text)}
.owner-claim-txt span{font-size:13.5px;color:var(--text-soft);line-height:1.45}
.owner-claim-btn{white-space:nowrap;flex-shrink:0}
/* Owner manage: hours editor (compact one line per day) */
.hours-editor{border:1.5px solid var(--bz-line);border-radius:14px;padding:2px 12px}
.hours-row{display:grid;grid-template-columns:40px 1fr auto;align-items:center;gap:10px;padding:7px 0;border-bottom:1px solid var(--bz-line)}
.hours-row:last-of-type{border-bottom:0}
.hours-day{font-weight:700;font-size:13px;color:var(--text)}
.hours-times{display:flex;align-items:center;gap:6px}
.hours-times .hours-time{width:auto;border:1.5px solid var(--bz-line);border-radius:8px;padding:5px 7px;font:inherit;font-size:13px;background:var(--surface);color:var(--text)}
.hours-times .hours-time:disabled{opacity:.35}
.hours-dash{color:var(--muted)}
.hours-row.is-closed .hours-times{opacity:.45}
.hours-closed{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;color:var(--muted);white-space:nowrap;cursor:pointer}
.hours-closed input[type=checkbox]{width:14px;height:14px;min-width:14px;margin:0;accent-color:var(--bz-orange)}
.hours-copy{display:block;border:0;background:none;color:var(--bz-orange-deep);font-weight:700;font-size:12.5px;cursor:pointer;padding:9px 0 5px}
.manage-cover{height:170px;border-radius:12px;background:var(--bz-cream) center/cover no-repeat;margin-bottom:8px;display:grid;place-items:center;border:1px solid var(--bz-line)}
.manage-cover-ph{color:var(--bz-muted);font-size:13px;font-weight:600}
.cover-remove{display:flex;align-items:center;gap:8px;margin:8px 0 4px;font-size:14px;color:var(--text)}
.cover-remove input[type=checkbox]{width:16px;height:16px;min-width:16px;margin:0;flex:0 0 auto;accent-color:var(--bz-orange)}
/* Hours display on the restaurant page */
.rest-hours{border:1.5px solid var(--bz-line);border-radius:14px;padding:14px 16px;margin-top:14px;background:var(--surface)}
.rest-hours h4{margin:0 0 8px;font-size:14px}
.rest-hours-row{display:flex;justify-content:space-between;font-size:13.5px;padding:2px 0}
.rest-hours-row.today{font-weight:700}
.rest-hours-row .closed{color:var(--muted)}
.open-pill{font-size:11.5px;font-weight:700;padding:2px 8px;border-radius:999px;margin-left:6px;vertical-align:middle}
.open-pill.open{background:rgba(22,163,74,.12);color:#16a34a}
.open-pill.closed{background:#eef0f4;color:var(--muted)}
.eat-f-toggle{display:inline-flex;align-items:center;gap:6px;border:1.5px solid var(--bz-line);border-radius:999px;
  padding:8px 14px;font-weight:600;font-size:13.5px;cursor:pointer;background:var(--surface)}
.eat-f-toggle input{accent-color:#16a34a}
/* Owner response on review cards */
.owner-resp{margin-top:10px;padding:10px 12px;border-left:3px solid var(--bz-orange);background:rgba(245,135,31,.06);border-radius:0 10px 10px 0}
.owner-resp-h{font-weight:700;font-size:12.5px;color:var(--bz-orange-deep)}
.owner-resp p{margin:4px 0 0;font-size:13.5px}
/* Manage dashboard cards */
.mng-card{margin-top:18px}
.mng-h{font-size:18px;margin:0 0 6px}
/* Owner Insights dashboard */
.ins-summary{display:flex;gap:26px;flex-wrap:wrap;margin:12px 0 16px;padding-bottom:16px;border-bottom:1px solid var(--bz-line)}
.ins-summary>div{display:flex;flex-direction:column}
.ins-summary b{font-size:23px;color:var(--text);line-height:1.1}
.ins-summary span{font-size:12.5px;color:var(--bz-muted);margin-top:2px}
.ins-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));gap:12px}
.ins-card{background:var(--bg);border:1px solid var(--bz-line);border-radius:12px;padding:13px 14px}
.ins-top{display:flex;align-items:center;gap:6px;color:var(--bz-muted);font-size:12.5px;font-weight:700}
.ins-ic{font-size:15px}
.ins-n{font-size:26px;font-weight:800;color:var(--text);margin:5px 0 3px;line-height:1.05}
.ins-d{font-size:12px;font-weight:700}
.ins-d.up{color:#16a34a}
.ins-d.down{color:var(--bz-hot)}
.ins-d.flat{color:var(--bz-muted)}
.ins-d .s{color:var(--bz-muted);font-weight:500}
/* Owner review-rewards campaign */
.mng-panel[data-panel="rewards"] .authcard{text-align:left}
.mng-panel[data-panel="rewards"] .check{display:flex;align-items:flex-start;gap:8px;text-align:left;margin-bottom:8px}
.rwd-stat{display:grid;grid-template-columns:repeat(auto-fit,minmax(108px,1fr));gap:10px;margin:14px 0}
.rwd-stat>div{background:var(--bg);border:1px solid var(--bz-line);border-radius:10px;padding:10px 12px;display:flex;flex-direction:column}
.rwd-stat b{font-size:17px;color:var(--text);line-height:1.15}
.rwd-stat span{font-size:11.5px;color:var(--bz-muted);margin-top:2px}
.rwd-actions{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-start;margin-top:8px}
.rwd-actions form{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:0}
.rwd-log{width:100%;border-collapse:collapse;margin-top:8px;font-size:13.5px}
.rwd-log th{text-align:left;color:var(--bz-muted);font-size:12px;font-weight:700;padding:6px 8px;border-bottom:1px solid var(--bz-line)}
.rwd-log td{padding:8px;border-bottom:1px solid var(--bz-line);color:var(--text)}
.rwd-pending{background:rgba(245,135,31,.06);border:1px solid var(--bz-orange);border-radius:12px;padding:13px 14px;margin:14px 0}
.rwd-pend{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding:10px 0;border-top:1px solid var(--bz-line)}
.rwd-pend:first-of-type{border-top:0}
.rwd-pend-info{font-size:13.5px;color:var(--text);min-width:200px;flex:1}
.rwd-pend-act{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.rwd-pend-act form{display:flex;gap:6px;align-items:center;margin:0}
.rwd-reject .input{padding:7px 9px;font-size:13px;max-width:170px}
/* Local deals / offers */
.deal-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(258px,1fr));gap:12px}
.deal-card{display:flex;gap:12px;align-items:flex-start;background:var(--surface);border:1px solid var(--bz-line);border-radius:14px;padding:14px;text-decoration:none;transition:border-color .12s,transform .12s}
.deal-card:hover{border-color:var(--bz-orange);transform:translateY(-1px)}
.deal-emoji{font-size:26px;flex:none;line-height:1}
.deal-body{display:flex;flex-direction:column;gap:3px;min-width:0}
.deal-title{font-size:14.5px;color:var(--text);font-weight:700;line-height:1.25}
.deal-rest{font-size:12.5px;color:var(--bz-muted)}
.deal-ends{font-size:11.5px;color:var(--bz-orange-deep);font-weight:600}
.rest-deals{margin:6px 0 18px}
.rest-deals-list{display:flex;flex-direction:column;gap:10px}
.rest-deal{display:flex;gap:12px;align-items:flex-start;background:rgba(245,135,31,.06);border:1px solid var(--bz-orange);border-radius:12px;padding:12px 14px}
.rest-deal-body{min-width:0}
.rest-deal-body b{color:var(--text)}
.rest-deal-body p{margin:2px 0 3px;font-size:12.5px}
/* Review-rewards create form: scannable rules, balance bar, selectable mode cards */
.rwd-rules{list-style:none;margin:0 0 16px;padding:0;display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--text-soft)}
.rwd-rules li{line-height:1.4}
.rwd-balance{display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--bg);border:1px solid var(--bz-line);border-radius:12px;padding:8px 8px 8px 14px;margin-bottom:16px;font-size:14px;color:var(--text-soft)}
.rwd-balance b{color:var(--text)}
.field .rwd-opt{display:flex;align-items:flex-start;gap:11px;padding:12px 14px;border:1.5px solid var(--bz-line);border-radius:14px;cursor:pointer;margin-bottom:10px;font-weight:400;transition:border-color .15s,background .15s}
.field .rwd-opt:hover{border-color:var(--bz-muted)}
.field .rwd-opt:has(:checked){border-color:var(--bz-orange);background:rgba(245,135,31,.07)}
.rwd-opt input{margin:2px 0 0;flex:none;width:18px;height:18px;accent-color:var(--bz-orange)}
.rwd-opt-body{display:flex;flex-direction:column;gap:3px}
.rwd-opt-body b{font-weight:700;color:var(--text);font-size:14.5px}
.rwd-opt-body .s{line-height:1.4}
.rwd-quality{display:flex;flex-direction:column;gap:10px}
/* Disclosed incentive banner on the restaurant page */
.rev-bounty{display:flex;align-items:center;gap:12px;background:rgba(245,135,31,.07);border:1.5px solid var(--bz-orange);border-radius:14px;padding:13px 16px;margin:0 0 14px}
.rev-bounty .rb-ic{font-size:24px;flex-shrink:0}
.rev-bounty b{color:var(--text)}
.rev-bounty p{margin:2px 0 0;font-size:12.5px;color:var(--bz-muted)}
.rev-bounty .btn{flex-shrink:0;margin-left:auto}
.inc-badge{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:800;color:var(--bz-orange-deep);background:rgba(245,135,31,.12);border:1px solid var(--bz-orange);border-radius:999px;padding:2px 8px}
/* Manage tabs */
.mng-tabs{display:flex;gap:6px;flex-wrap:wrap;margin:14px 0 16px;border-bottom:1.5px solid var(--bz-line)}
.mng-tab{border:0;background:none;cursor:pointer;font:inherit;font-weight:700;font-size:14px;color:var(--muted);
  padding:9px 14px;border-bottom:2.5px solid transparent;margin-bottom:-1.5px;border-radius:8px 8px 0 0}
.mng-tab:hover{color:var(--text)}
.mng-tab.is-active{color:var(--bz-orange-deep);border-bottom-color:var(--bz-orange)}
.mng-team{list-style:none;margin:10px 0;padding:0;display:flex;flex-direction:column;gap:6px}
.mng-team li{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;border:1px solid var(--bz-line);border-radius:10px;font-weight:600}
.mng-team form{margin:0}
.mng-x{border:0;background:none;cursor:pointer;color:var(--muted);font-size:14px}
.mng-add{display:flex;gap:8px;margin-top:8px}
.mng-add input{flex:1;border:1.5px solid var(--bz-line);border-radius:12px;padding:9px 12px;font:inherit;background:var(--surface);color:var(--text)}
.mng-review{padding:12px 0;border-bottom:1px solid var(--bz-line)}
.mng-review:last-child{border-bottom:0}
.mng-review-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:6px}
.mng-stars{color:var(--bz-orange);letter-spacing:1px}
.mng-resp{margin:0}
.mng-resp textarea{width:100%;border:1.5px solid var(--bz-line);border-radius:12px;padding:9px 12px;font:inherit;background:var(--surface);color:var(--text);resize:vertical}
.mng-resp textarea:focus{outline:none;border-color:var(--bz-orange)}
.mng-x-link{border:0;background:none;color:var(--muted);font-size:12.5px;cursor:pointer;text-decoration:underline;padding:0}
.mng-danger{margin-top:18px;padding-top:16px;border-top:1px solid var(--bz-line)}
.mng-danger h3{margin:0 0 4px;font-size:15px;color:#b91c1c}
.btn-release{margin-top:8px;border:1.5px solid #f0c2c2;background:#fef2f2;color:#b91c1c;font:inherit;font-weight:700;
  font-size:13.5px;padding:9px 16px;border-radius:12px;cursor:pointer}
.btn-release:hover{background:#fee2e2;border-color:#e7a3a3}
/* Video-first review hero */
.review-vid > label{font-weight:700}
.review-vid-hero .vid-up-zone{min-height:128px;padding:30px 16px;border-color:var(--bz-orange);background:rgba(245,135,31,.05)}
.review-vid-hero .vid-up-zone:hover{background:rgba(245,135,31,.09)}
.review-vid-hero .vu-icon{font-size:36px}
.review-vid-hero .vu-text{font-size:15px}
/* Vertical review feed (TikTok-style) */
.rfeed-wrap{max-width:480px;margin:0 auto}
.rfeed-bar{display:flex;align-items:center;gap:12px;padding:8px 4px 12px}
.rfeed{height:calc(100vh - 150px);min-height:420px;overflow-y:auto;scroll-snap-type:y mandatory;border-radius:18px;background:#000;-webkit-overflow-scrolling:touch}
.rfeed-slide{position:relative;height:100%;scroll-snap-align:start;scroll-snap-stop:always;overflow:hidden}
.rfeed-stage{position:absolute;inset:0;background:#000}
.rfeed-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.55}
.rfeed-video{position:absolute;inset:0;width:100%;height:100%;border:0}
.rfeed-unmute{position:absolute;top:12px;right:12px;z-index:3;border:0;border-radius:50%;width:40px;height:40px;background:rgba(0,0,0,.5);color:#fff;font-size:18px;cursor:pointer}
.rfeed-overlay{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:20px 16px;color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.85));pointer-events:none}
.rfeed-overlay a{color:#fff;pointer-events:auto}
.rfeed-place{display:inline-block;font-weight:800;font-size:14px;text-decoration:none;background:rgba(0,0,0,.4);padding:5px 11px;border-radius:999px}
.rfeed-stars{color:#ffd166;letter-spacing:1px;margin-top:8px;font-size:16px}
.rfeed-title{font-weight:800;font-size:18px;margin-top:3px;line-height:1.25}
.rfeed-desc{margin:5px 0 0;font-size:14px;opacity:.92;line-height:1.4}
.rfeed-foot{display:flex;justify-content:space-between;align-items:center;margin-top:12px}
.rfeed-by{font-weight:700;font-size:13.5px;text-decoration:none}
.rfeed-open{font-size:13px;font-weight:800;background:var(--bz-orange);padding:8px 13px;border-radius:999px;text-decoration:none}
.rfeed-empty{text-align:center;padding:56px 20px;border:1.5px solid var(--bz-line);border-radius:18px}
/* Review page context rail */
.rev-rail{margin-top:4px}
.rev-ctx{border:1.5px solid var(--bz-line);border-radius:16px;overflow:hidden;background:var(--surface)}
.rev-ctx-cover{height:110px;background:#f3f1ec;background-size:cover;background-position:center;display:grid;place-items:center}
.rev-ctx-cover .rest-cover-ph{font-size:32px;opacity:.5}
.rev-ctx-body{padding:12px 14px}
.rev-ctx-name{font-size:16px;display:block}
.rev-ctx-meta{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:5px}
.rev-ctx-stars{font-weight:800;color:var(--bz-orange-deep)}
.rev-ctx-photos{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin-top:10px}
.rev-ctx-photos span{display:block;padding-top:100%;border-radius:8px;background-size:cover;background-position:center;background-color:#eee}
.rev-tips{margin-top:14px;border:1.5px solid var(--bz-line);border-radius:14px;padding:14px;background:var(--surface)}
.rev-tips b{font-size:14px}
.rev-ctx-lines{margin-top:12px;display:flex;flex-direction:column;gap:7px;font-size:13.5px;color:var(--text-soft)}
.rev-ctx-lines>div{display:flex;gap:7px;align-items:flex-start;line-height:1.4}
.rev-ctx-lines a{color:var(--bz-orange-deep);font-weight:600;word-break:break-word}
.rev-ctx-links{display:flex;gap:8px;margin-top:12px}
.rev-ctx-links a{flex:1;text-align:center;border:1.5px solid var(--bz-line);border-radius:10px;padding:8px 6px;font-size:13px;font-weight:700;color:var(--text)}
.rev-ctx-links a:hover{border-color:var(--bz-orange);color:var(--bz-orange-deep)}
.rev-tips ul{margin:8px 0 0;padding-left:18px;font-size:13px;color:var(--text-soft);line-height:1.5}
.rev-tips li{margin-bottom:4px}
/* Verified visit */
.t-verified{display:inline-flex;align-items:center;gap:4px;font-size:11.5px;font-weight:700;color:#16a34a;
  background:rgba(22,163,74,.1);border:1px solid rgba(22,163,74,.22);padding:2px 8px;border-radius:999px;margin-top:6px}
.rfeed-verified{display:inline-block;font-size:11px;font-weight:800;color:#fff;background:rgba(22,163,74,.85);padding:2px 8px;border-radius:999px;margin-left:8px;vertical-align:middle}
.rev-verify{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.rev-verify-btn{border:1.5px solid var(--bz-line);background:var(--surface);color:var(--text);font:inherit;font-weight:700;
  font-size:13.5px;padding:9px 14px;border-radius:12px;cursor:pointer;white-space:nowrap}
.rev-verify-btn:hover{border-color:#16a34a}
.rev-verify.is-set .rev-verify-btn{border-color:#16a34a;background:rgba(22,163,74,.08);color:#16a34a}
.rev-verify-status{flex:1;min-width:160px}
.rest-cat{font-weight:700;color:var(--bz-orange-deep)}
/* AI "What people say" summary */
.rest-aisum{border:1.5px solid var(--bz-line);border-radius:16px;padding:16px 18px;margin:18px 0;background:linear-gradient(180deg,rgba(245,135,31,.05),transparent)}
.rest-aisum h3{margin:0 0 8px;font-size:16px}
.rest-aisum p{margin:0;font-size:15px;line-height:1.5}
.rest-aisum-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.rest-aisum-tags span{font-size:12.5px;font-weight:600;background:var(--surface);border:1px solid var(--bz-line);padding:3px 10px;border-radius:999px}
/* Featured listing badge */
.rest-featured{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;font-weight:800;color:#92400e;
  background:linear-gradient(135deg,#ffe9b8,#ffd166);border:1px solid #f0c040;padding:4px 10px;border-radius:999px}
.rcard-featured{position:absolute;top:8px;left:8px;z-index:2;font-size:11px;font-weight:800;color:#92400e;
  background:linear-gradient(135deg,#ffe9b8,#ffd166);border:1px solid #f0c040;padding:2px 8px;border-radius:999px}
/* Owner hub grid */
.owner-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px}
.owner-card{border:1.5px solid var(--bz-line);border-radius:16px;overflow:hidden;background:var(--surface);display:flex;flex-direction:column}
.owner-cover{display:block;height:130px;background:#f3f1ec;background-size:cover;background-position:center;position:relative}
.owner-cover .rest-cover-ph{position:absolute;inset:0;display:grid;place-items:center;font-size:38px;opacity:.5}
.owner-body{padding:12px 14px;display:flex;flex-direction:column;gap:3px}
.owner-name{font-size:16px;line-height:1.25}
.owner-meta{display:flex;flex-wrap:wrap;gap:5px;align-items:center}
.owner-role{font-weight:700;color:var(--bz-orange-deep)}
.owner-actions{display:flex;gap:8px;margin-top:10px}
.owner-actions .btn{padding:7px 12px;font-size:13px}
/* "Near you" geolocation rail on the Eats landing */
.eat-nearby{margin-top:22px;margin-bottom:10px}
.eat-near-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap}
.eat-near-links{font-size:13px;white-space:nowrap}
.eat-near-links a{color:var(--bz-orange-deep);font-weight:700}
.disc-tab{font-family:var(--head);font-weight:800;font-size:14px;padding:9px 16px;border-radius:999px;
  text-decoration:none;color:var(--text-soft);background:var(--surface);border:2px solid var(--bz-line)}
.disc-tab:hover{border-color:var(--bz-amber);color:var(--text)}
.disc-tab.on{color:#fff;background:var(--bz-orange);border-color:var(--bz-orange)}

/* ── Unified page-header spacing across all app-shell sections ──
   Match the .page-head standard (used by Messages/Bookmarks/Notifications)
   so every page's title sits in the same place with the same size + padding. */
.ev-head,.cd-head,.battle-head{padding:16px 4px 8px;margin:0 0 16px;display:flex;align-items:center;justify-content:space-between;gap:12px 16px;flex-wrap:wrap}
.ev-head h1,.cd-head h1,.battle-head h1{font-size:23px;font-weight:800;margin:0}
/* when the primary action wraps to its own line, keep it clear of the content below */
.ev-head .btn,.cd-head .btn,.battle-head .btn{margin-top:2px}
/* Consistent left/right gutter for narrow-centered section wrappers */
.evpage,.cd-page,.battles-page{padding-left:16px;padding-right:16px}

/* ───────── 🔴 Restaurant live streaming (grid + broadcaster + modal) ───────── */
.rl{margin:18px 0;padding:16px;border:1px solid var(--bz-line);border-radius:16px;background:var(--surface);color:var(--text)}
.rl-head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.rl-count{display:inline-grid;place-items:center;min-width:22px;height:22px;margin-left:8px;padding:0 7px;border-radius:11px;background:#E11D48;color:#fff;font-size:12px;font-weight:800;vertical-align:middle}
.rl-count:empty{display:none}
.rl-note{margin:8px 0 12px;color:var(--bz-dim)}
.rl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.rl-grid:empty{display:none}
.rl-tile{position:relative;aspect-ratio:9/16;max-height:300px;border-radius:14px;overflow:hidden;background:#0b0b0b;cursor:pointer;border:2px solid transparent}
.rl-tile:hover{border-color:#E11D48}
.rl-tile video,.rl-tile iframe{width:100%;height:100%;object-fit:cover;border:0;display:block;background:#0b0b0b}
.rl-tname{position:absolute;left:8px;bottom:8px;right:26px;color:#fff;font-size:13px;font-weight:700;text-shadow:0 1px 3px rgba(0,0,0,.7);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rl-expand{position:absolute;right:8px;bottom:8px;color:#fff;font-size:15px;opacity:.85;text-shadow:0 1px 3px rgba(0,0,0,.7)}
.rl-badge{position:absolute;top:8px;left:8px;display:inline-flex;align-items:center;gap:5px;padding:3px 8px;border-radius:999px;background:#E11D48;color:#fff;font-size:11px;font-weight:800;letter-spacing:.04em}
.rl-badge i{width:7px;height:7px;border-radius:50%;background:#fff;animation:rlpulse 1.4s infinite}
.rl-dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:#E11D48;animation:rlpulse 1.4s infinite}
@keyframes rlpulse{0%,100%{opacity:1}50%{opacity:.35}}
.rl-empty{color:var(--bz-dim);margin:6px 0 0}
.rl-empty[hidden]{display:none}
.rl-broadcast{margin-top:14px;padding:14px;border:1px solid #FCA5A5;background:#FEF2F2;border-radius:14px}
.rl-bc-live{display:flex;align-items:center;gap:8px;font-weight:800;color:#B91C1C;margin-bottom:10px}
.rl-broadcast video{width:100%;max-width:280px;border-radius:12px;background:#0b0b0b;aspect-ratio:9/16;object-fit:cover;display:block}
.rl-bc-actions{margin-top:10px}
.rl-obs{margin-top:10px;font-size:13px}
.rl-obs code{background:var(--surface);border:1px solid var(--bz-line);border-radius:6px;padding:2px 6px;word-break:break-all}
.rl-obs p{margin:6px 0}
.rl-modal{position:fixed;inset:0;z-index:1200;display:flex;align-items:center;justify-content:center}
.rl-modal[hidden]{display:none}
.rl-modal-bg{position:absolute;inset:0;background:rgba(0,0,0,.82)}
.rl-modal-card{position:relative;z-index:1;width:min(440px,92vw)}
.rl-modal-stage{position:relative;aspect-ratio:9/16;max-height:82vh;border-radius:16px;overflow:hidden;background:#0b0b0b}
.rl-modal-stage video,.rl-modal-stage iframe{width:100%;height:100%;object-fit:contain;border:0;background:#0b0b0b}
.rl-modal-x{position:absolute;top:-6px;right:-6px;z-index:2;width:38px;height:38px;border-radius:50%;border:0;background:#fff;color:#111;font-size:17px;font-weight:800;cursor:pointer;box-shadow:0 2px 10px rgba(0,0,0,.4)}
.rl-modal-meta{display:flex;align-items:center;gap:10px;justify-content:center;margin-top:12px;color:#fff;font-weight:700}
@media (max-width:640px){.rl-grid{grid-template-columns:repeat(2,1fr)}}
/* Dark mode uses [data-theme=dark] (NOT .dark). .rl/.rl-obs follow --surface
   automatically; only the red broadcaster tint needs a dark variant. */
[data-theme=dark] .rl-broadcast{background:#2a1416;border-color:#7f1d1d}
[data-theme=dark] .rl-bc-live{color:#fca5a5}
.rl-replay::before{content:"🔴";position:absolute;top:4px;left:4px;font-size:10px;z-index:2;line-height:1;filter:drop-shadow(0 1px 2px rgba(0,0,0,.7))}
/* LIVE ring + badge on any avatar of someone broadcasting now */
.profile-av.is-live{position:relative;box-shadow:0 0 0 2px var(--surface),0 0 0 4px #E11D48}
.profile-av.is-live .av-live{position:absolute;left:50%;bottom:-7px;transform:translateX(-50%);background:#E11D48;color:#fff;font-size:8px;font-weight:800;letter-spacing:.04em;line-height:1;padding:2px 4px;border-radius:4px;border:1.5px solid var(--surface);pointer-events:none}
.profile-av.sm.is-live .av-live{font-size:7px;bottom:-6px;padding:1.5px 3px}
.pf-live{display:inline-flex;align-items:center;gap:8px;margin:10px 0 2px;padding:8px 14px;border-radius:999px;background:#E11D48;color:#fff;font-size:14px;text-decoration:none;font-weight:600}
.pf-live b{font-weight:800}
.pf-live:hover{background:#be123c}
/* Account settings tabs */
.acct-head{margin-bottom:14px}
.acct-head h1{margin:0 0 12px}
.acct-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.acct-tab{flex:0 0 auto;padding:8px 14px;border-radius:999px;border:1.5px solid var(--bz-line);background:var(--surface);color:var(--text);font-weight:700;font-size:13.5px;cursor:pointer;transition:border-color .15s,background .15s}
.acct-tab:hover{border-color:var(--bz-orange)}
.acct-tab.on{background:var(--bz-orange);color:#fff;border-color:var(--bz-orange)}
.acct-panel{display:none}
.acct-panel.on{display:block;animation:acctFade .18s ease}
@keyframes acctFade{from{opacity:.4}to{opacity:1}}
.acct-save{margin-top:6px}
.acct-save[hidden]{display:none}
/* Eats "Live now" rail */
.eat-live-rail{display:flex;gap:12px;overflow-x:auto;padding:2px 2px 10px;-webkit-overflow-scrolling:touch}
.eat-live-card{position:relative;flex:0 0 210px;height:124px;border-radius:14px;overflow:hidden;background:#0b0b0b;background-size:cover;background-position:center;text-decoration:none;border:2px solid transparent;display:block}
.eat-live-card:hover{border-color:#E11D48}
.eat-live-card::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.82),transparent 62%)}
.eat-live-card .rl-badge{z-index:2}
.eat-live-n{position:absolute;top:8px;right:8px;z-index:2;background:rgba(0,0,0,.6);color:#fff;font-size:11px;font-weight:700;padding:2px 7px;border-radius:999px}
.eat-live-meta{position:absolute;left:10px;right:10px;bottom:8px;z-index:2;color:#fff}
.eat-live-meta b{display:block;font-size:14px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.eat-live-meta span{display:block;font-size:11px;opacity:.92;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Moment Clips */
.rl-clip-status{color:#fff;text-align:center;margin:8px 0 0;font-size:13px;min-height:16px}
.clip-credit{display:inline-block;margin:0 16px 8px;font-size:13px;color:var(--bz-orange-deep);text-decoration:none;font-weight:600}
.clip-credit b{font-weight:800}
.clip-credit:hover{text-decoration:underline}
/* Owner "get review poster" CTA on the manage page */
.mng-poster-cta{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 16px;padding:12px 16px;border-radius:14px;background:linear-gradient(90deg,#FFF7E6,#FFEFD0);border:1px solid var(--bz-line);color:var(--text);text-decoration:none}
.mng-poster-cta:hover{border-color:var(--bz-orange)}
.mng-poster-go{flex:0 0 auto;font-weight:800;color:var(--bz-orange-deep);white-space:nowrap}
[data-theme=dark] .mng-poster-cta{background:linear-gradient(90deg,#2a230f,#241d0c)}

/* ── Places hub (non-food local-business discovery) ───────────────── */
.places-hero{margin:8px 0 18px}
.places-h1{font-size:26px;font-weight:800;margin:0 0 6px;color:var(--text)}
.places-sub{color:var(--muted);font-size:14.5px;max-width:660px;margin:0;line-height:1.5}
.places-sub a{color:var(--bz-amber-deep);font-weight:700}
.places-crumb{font-size:13px;color:var(--muted);margin-bottom:10px}
.places-crumb a{color:var(--muted);font-weight:600;text-decoration:none}
.places-crumb a:hover{text-decoration:underline}
.places-crumb span{opacity:.6;margin:0 5px}
.place-cats{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px}
.place-cat{display:flex;flex-direction:column;gap:5px;padding:16px;border:2px solid var(--bz-line);border-radius:14px;background:var(--surface);text-decoration:none;transition:border-color .15s,transform .15s}
.place-cat:hover{border-color:var(--bz-amber);transform:translateY(-2px)}
.place-cat-emoji{font-size:26px;line-height:1}
.place-cat-name{font-weight:700;color:var(--text);font-size:15px}
.place-cat-meta{color:var(--muted);font-size:12.5px}
.place-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.place-chip{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border:1.5px solid var(--bz-line);border-radius:999px;background:var(--surface);color:var(--text);text-decoration:none;font-size:13px;font-weight:600}
.place-chip:hover{border-color:var(--bz-amber)}
.place-chip.on{background:var(--bz-amber);border-color:var(--bz-amber);color:#141414}
.place-chip-n{opacity:.6;font-weight:500;font-size:12px}
.place-chip.on .place-chip-n{opacity:.8;color:#141414}

/* ── Eats home video-reviews rail (Yelp/TikTok-style) ───────────────── */
.vid-rail{display:flex;gap:12px;overflow-x:auto;-webkit-overflow-scrolling:touch;padding:4px 2px 10px;scroll-snap-type:x mandatory;scrollbar-width:none}
.vid-rail::-webkit-scrollbar{display:none}
.vid-card{flex:0 0 auto;width:150px;scroll-snap-align:start;text-decoration:none;display:flex;flex-direction:column;gap:6px}
.vid-thumb{position:relative;display:block;width:150px;height:255px;border-radius:14px;overflow:hidden;background:#111 center/cover no-repeat;border:1px solid var(--bz-line);box-shadow:0 2px 10px rgba(0,0,0,.12)}
.vid-thumb::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.05) 40%,rgba(0,0,0,.55))}
.vid-card:hover .vid-thumb{transform:translateY(-2px);transition:transform .15s}
.vid-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:2;width:40px;height:40px;border-radius:50%;background:rgba(0,0,0,.55);color:#fff;display:flex;align-items:center;justify-content:center;font-size:15px;padding-left:3px;backdrop-filter:blur(2px)}
.vid-buzzes{position:absolute;left:8px;bottom:8px;z-index:2;color:#fff;font-size:11.5px;font-weight:700;text-shadow:0 1px 3px rgba(0,0,0,.6)}
.vid-meta{display:flex;flex-direction:column;gap:1px;padding:0 2px}
.vid-title{font-size:12.5px;font-weight:700;color:var(--text);line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.vid-sub{font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Buzz Wrap — topic picker (official communities as interests) */
.wrap-topics .wrap-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px}
.wrap-chip{display:inline-flex;align-items:center;gap:5px;padding:7px 13px;border-radius:999px;border:2px solid var(--bz-line);background:var(--surface);color:var(--text);text-decoration:none;font-weight:700;font-size:13.5px}
.wrap-chip.on{border-color:var(--bz-orange);background:rgba(245,135,31,.10)}
.wrap-sub{font-size:13px;font-weight:800;margin:12px 0 8px;color:var(--text-soft)}
.wrap-rec{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px}
.wrap-rec-card{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 13px;border:2px solid var(--bz-line);border-radius:14px;background:var(--surface)}
.wrap-rec-id{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--text);min-width:0}
.wrap-rec-emoji{font-size:24px;flex:0 0 auto}
.wrap-rec-meta{display:flex;flex-direction:column;min-width:0;line-height:1.3}
.wrap-rec-meta b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wrap-rec-meta .muted{font-size:11.5px}
.wrap-rec-card form{flex:0 0 auto}
/* Instant search type-ahead dropdown */
.eat-sugg{position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:60;background:var(--surface);border:1.5px solid var(--bz-line);border-radius:14px;box-shadow:var(--sh);overflow:hidden;max-height:344px;overflow-y:auto}
.eat-sugg-row{display:flex;align-items:center;gap:10px;padding:9px 12px;text-decoration:none;color:var(--text);border-bottom:1px solid var(--border)}
.eat-sugg-row:last-child{border-bottom:0}
.eat-sugg-row.on,.eat-sugg-row:hover{background:var(--surface-2,#f7f7f9)}
.eat-sugg-thumb{flex:0 0 auto;width:38px;height:38px;border-radius:9px;background:rgba(0,0,0,.06) center/cover no-repeat;display:flex;align-items:center;justify-content:center;font-size:16px}
.eat-sugg-meta{display:flex;flex-direction:column;min-width:0;line-height:1.3}
.eat-sugg-meta b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.eat-sugg-meta span{font-size:12px;color:var(--muted,#6b7280);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}