/* =====================================================================
   bz-night.css: the "after dark" theme (the owner's styling 1/2 concepts).
   Night navy, neon gold + teal accents, dark glass cards, Playfair
   headings, spaced small-caps labels. Everything is scoped under
   html.bz-night so it only applies when the theme is switched on
   (bz-supabase.js adds the class; ?night=1 / ?night=0 toggles it while
   it is in preview). bz-design.css uses !important almost everywhere,
   so the overrides here do too, with one more class of specificity.
   ===================================================================== */

html.bz-night{
  --night-card:linear-gradient(135deg,var(--surface-3),var(--surface-2));
}

/* page backdrop: charcoal with two faint glows, fixed so it does not
   scroll away under long feeds */
html.bz-night body.app{
  background:
    radial-gradient(1100px 600px at 85% -10%,rgba(255,182,39,.06),transparent 60%),
    radial-gradient(900px 600px at -10% 30%,rgba(255,255,255,.025),transparent 60%),
    var(--bg) !important;
  background-attachment:fixed !important;
  color:var(--text);
}

/* ---------- type ---------- */
html.bz-night body.app h1,
html.bz-night body.app h2,
html.bz-night body.app h3{font-family:var(--ui) !important;font-weight:650 !important;letter-spacing:-.025em}
html.bz-night .kick,
html.bz-night .k,
html.bz-night .card .k{
  font-family:'Inter',system-ui,sans-serif !important;font-weight:500 !important;
  font-size:10.5px !important;letter-spacing:.3em !important;text-transform:uppercase !important;
  color:#d4d2d6 !important;margin-bottom:14px !important;padding-bottom:12px;
  border-bottom:1px solid rgba(255,255,255,.07);
}
html.bz-night .card h3{font-family:var(--ui) !important;font-weight:600 !important}

/* ---------- nav ---------- */
html.bz-night nav.bar{
  background:rgba(12,12,14,.82) !important;
  border-bottom:1px solid rgba(255,255,255,.07) !important;
  height:64px;
}
html.bz-night nav.bar .links a{color:#d4d2d6 !important;position:relative}
html.bz-night nav.bar .links a:hover{color:#fff !important}
html.bz-night nav.bar .links a.on{color:#fff !important}
html.bz-night nav.bar .links a.on::after{content:'';position:absolute;left:0;right:0;bottom:-21px;height:2px;
  background:var(--accent);box-shadow:0 0 12px var(--accent);border-radius:2px}
html.bz-night .navmore > button{color:#d4d2d6 !important}
html.bz-night .moremenu{background:#18181b !important;border:1px solid rgba(255,209,102,.14) !important;
  box-shadow:0 20px 50px rgba(0,0,0,.6) !important}

/* ---------- cards: dark glass with a pink hairline ---------- */
html.bz-night .card{
  background:var(--night-card) !important;
  border:1px solid rgba(255,255,255,.08) !important;
  border-radius:18px !important;
  box-shadow:0 8px 24px rgba(0,0,0,.2),inset 0 1px 0 rgba(255,255,255,.04) !important;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
html.bz-night .card:hover{border-color:rgba(255,182,39,.28) !important}
html.bz-night .card .pad{padding:22px !important}
html.bz-night .card p{color:var(--text-dim)}

/* ---------- buttons ---------- */
html.bz-night .btn{
  border:1px solid rgba(255,209,102,.28) !important;color:var(--text) !important;
  background:rgba(255,255,255,.02) !important;border-radius:999px !important;
}
html.bz-night .btn:hover{border-color:var(--accent) !important;background:rgba(255,182,39,.08) !important}
html.bz-night .btn.solid,
html.bz-night .follow{
  background:linear-gradient(110deg,var(--accent-hi),var(--accent)) !important;color:#171208 !important;border-color:transparent !important;
  box-shadow:0 8px 26px rgba(255,182,39,.32),inset 0 1px 0 rgba(255,255,255,.25) !important;
}
html.bz-night .btn.solid:hover,
html.bz-night .follow:hover{
  background:linear-gradient(110deg,#ffe4a0,var(--accent-hi)) !important;
  box-shadow:0 12px 34px rgba(255,182,39,.48),inset 0 1px 0 rgba(255,255,255,.3) !important;
}

/* ---------- fields ---------- */
html.bz-night body.app input[type=text],
html.bz-night body.app input[type=search],
html.bz-night body.app input[type=email],
html.bz-night body.app input[type=number],
html.bz-night body.app input[type=date],
html.bz-night body.app select,
html.bz-night body.app textarea{
  background:rgba(10,10,12,.75) !important;border:1px solid rgba(255,209,102,.14) !important;
  color:var(--text) !important;border-radius:12px !important;
}
html.bz-night body.app input:focus,
html.bz-night body.app select:focus,
html.bz-night body.app textarea:focus{border-color:var(--accent) !important;box-shadow:0 0 0 3px rgba(255,182,39,.15) !important;outline:0}

/* ---------- avatars get a pink ring ---------- */
html.bz-night .avatar{box-shadow:0 0 0 2px rgba(255,182,39,.55),0 0 18px rgba(255,182,39,.25)}

/* ---------- tabs (friends / leaderboard) ---------- */
html.bz-night .mtab.on,
html.bz-night .lbtabs button.on{color:#fff !important;background:rgba(255,182,39,.16) !important;border-color:rgba(255,182,39,.45) !important}

/* =====================================================================
   HOME (feed.html)
   ===================================================================== */

/* the photo banner across the top, hidden in the classic theme */
.nbanner{display:none}
.community-banner-art{background-image:url(img/artwork/community-v1.webp)}
@media(max-width:760px){
  .community-banner-art{background-image:url(img/artwork/community-v1-small.webp)}
}
html.bz-night .nbanner{
  display:flex;align-items:center;position:relative;overflow:hidden;isolation:isolate;
  min-height:230px;margin:22px 0 22px;border-radius:22px;
  border:1px solid rgba(255,209,102,.14);
  box-shadow:0 30px 70px rgba(0,0,0,.5);
}
html.bz-night .nbanner .nbg{position:absolute;inset:0;z-index:-2;background-size:cover;background-position:center 40%;
  filter:saturate(.55) brightness(.72) hue-rotate(-18deg);
  transform:scale(1.04);transition:transform 6s ease}
html.bz-night .nbanner:hover .nbg{transform:scale(1.08)}
html.bz-night .nbanner::before{content:'';position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,rgba(12,12,14,.96) 0%,rgba(12,12,14,.78) 38%,rgba(12,12,14,.15) 75%,rgba(12,12,14,.35) 100%)}
html.bz-night .nbanner .nin{padding:34px 40px;max-width:860px}
@media(min-width:900px){html.bz-night .nbanner h2{white-space:nowrap}}
html.bz-night .nbanner .eb{font-size:10.5px;letter-spacing:.38em;text-transform:uppercase;color:#e6e4e8;font-weight:500}
html.bz-night .nbanner h2{font-family:'Playfair Display',Georgia,serif !important;font-weight:400 !important;
  font-size:clamp(34px,4.6vw,58px) !important;line-height:1.02;margin:12px 0 6px;color:#fff}
html.bz-night .nbanner h2 em{font-style:italic;color:var(--accent)}
html.bz-night .nbanner p{font-family:'Playfair Display',Georgia,serif;font-size:clamp(17px,1.8vw,21px);color:#ecebee;margin-bottom:18px}
@media(max-width:700px){
  html.bz-night .nbanner{min-height:200px;border-radius:16px;margin:14px 0}
  html.bz-night .nbanner .nin{padding:24px 22px}
  html.bz-night .nbanner::before{background:linear-gradient(90deg,rgba(12,12,14,.95),rgba(12,12,14,.55))}
}

/* welcome bar and beta bars match the cards */
html.bz-night .welcome,
html.bz-night .betabar{
  background:var(--night-card) !important;border:1px solid rgba(255,209,102,.14) !important;border-radius:16px !important;
}

/* the Spotlight: gold, like the concept */
html.bz-night #spotCard{
  border-color:rgba(242,193,78,.55) !important;
  box-shadow:0 0 0 1px rgba(242,193,78,.18),0 0 40px rgba(242,193,78,.12),0 8px 24px rgba(0,0,0,.2) !important;
}
html.bz-night #spotCard .k{color:#f6dfa2 !important;border-bottom-color:rgba(242,193,78,.18)}

/* weekly contest: a photo behind it */
html.bz-night #contestCard{
  background:
    linear-gradient(90deg,rgba(16,16,18,.95) 30%,rgba(16,16,18,.55) 100%),
    url(img/artwork/community-v1.webp) center/cover !important;
}
@media(max-width:760px){
  html.bz-night #contestCard{background-image:linear-gradient(90deg,rgba(16,16,18,.95) 30%,rgba(16,16,18,.55) 100%),url(img/artwork/community-v1-small.webp)!important}
}

/* posts */
html.bz-night .card.post{border-radius:18px !important}
html.bz-night .card.post.pinned,
html.bz-night .card.post.staff-post{
  border-color:rgba(255,182,39,.4) !important;
  box-shadow:0 0 0 1px rgba(255,182,39,.12),0 0 36px rgba(255,182,39,.10),0 8px 24px rgba(0,0,0,.2) !important;
}

/* =====================================================================
   PAGE HEADERS become photo banners (Groups, Meet Up, Clubs, Members,
   Contest / Points Store). The header's own title, text and buttons stay
   exactly as they are; only the box around them changes. Each page sets
   its photo with --nb on the element.
   ===================================================================== */
html.bz-night .nhead{
  position:relative;overflow:hidden;
  margin:22px 0 24px !important;padding:46px 42px !important;min-height:200px;
  border-radius:22px;border:1px solid rgba(255,209,102,.14);
  box-shadow:0 30px 70px rgba(0,0,0,.5);
  background:linear-gradient(90deg,rgba(8,11,20,.96) 0%,rgba(8,11,20,.78) 42%,rgba(8,11,20,.2) 80%,rgba(8,11,20,.4) 100%) !important;
  isolation:isolate;
}
/* Keep the decorative image separate so headings and controls retain their colors. */
html.bz-night .nhead::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:var(--nb) center 45%/cover no-repeat;
  filter:saturate(.55) brightness(.72) hue-rotate(-18deg);opacity:.45}
html.bz-night .nhead h1{font-family:'Playfair Display',Georgia,serif !important;font-weight:400 !important;
  font-size:clamp(38px,5vw,62px) !important;line-height:1.02;color:#fff;text-shadow:0 4px 30px rgba(0,0,0,.6)}
html.bz-night .nhead .sub,
html.bz-night .nhead p{color:#e4e2e6 !important;max-width:560px;text-shadow:0 2px 14px rgba(0,0,0,.7)}
@media(max-width:700px){
  html.bz-night .nhead{padding:30px 22px !important;min-height:170px;border-radius:16px}
  html.bz-night .nhead::before{background-image:var(--nb-small,var(--nb));background-position:center;opacity:.35}
}

/* =====================================================================
   Page-specific panels and cards get the same dark glass as .card.
   Only the box changes -- contents, buttons and layout are untouched.
   ===================================================================== */
html.bz-night body.app :is(.filters,.gcard,.gpost,.gstat,.ngbox,.thread,.mkform,.rcard,.ecard,.mcard,
  .ask,.box,.ccard,.found,.ent,.rw,.submitbox,.uq,.panel,.crbox,.upbox,.trust,.compose,.cstat,.thr,
  .feat,.yc,.lcard,.stat,.st,.idcard,.hero,.sbox){
  background:var(--night-card) !important;
  border:1px solid rgba(255,255,255,.08) !important;
  border-radius:18px !important;
  box-shadow:0 8px 24px rgba(0,0,0,.2),inset 0 1px 0 rgba(255,255,255,.04) !important;
}
html.bz-night body.app :is(.gcard,.mcard,.rcard,.ccard,.ecard,.lcard):hover{
  border-color:rgba(255,182,39,.35) !important;
  box-shadow:0 0 0 1px rgba(255,182,39,.12),0 0 30px rgba(255,182,39,.10),0 8px 24px rgba(0,0,0,.2) !important;
}
/* small caps labels used by the filter panels */
html.bz-night body.app .flab{letter-spacing:.28em !important;color:#d4d2d6 !important;font-weight:500 !important}
/* modals (profile, messages) */
html.bz-night .smodal{background:rgba(6,6,8,.86) !important}

/* ---- fixes from the owner's first look (2026-10-05) ---- */
/* the Home "Showing" filter: its little label is a .k too, and picked up
   the card-heading rule line and spacing, which stacked the button */
html.bz-night .feedopts .fobtn .k{
  border-bottom:0 !important;padding-bottom:0 !important;margin-bottom:0 !important;
  letter-spacing:.22em !important;color:var(--accent-hi) !important;font-size:10px !important;
}
html.bz-night .feedopts .fobtn{border-radius:999px !important;background:rgba(10,10,12,.65) !important;
  border:1px solid rgba(255,209,102,.2) !important}
/* numbers line up (Playfair's default numerals sit at different heights) */
html.bz-night body.app{font-variant-numeric:lining-nums}
/* filter panels: the search box matches the dropdowns */
html.bz-night .filters input[type=search],
html.bz-night .filters input[type=text]{width:100% !important;box-sizing:border-box}
/* Members age range: "to" stays on one line between the boxes */
html.bz-night .agerow input{min-width:0;flex:1 1 0;width:auto !important}
html.bz-night .agerow span{flex:none;letter-spacing:0 !important}
/* Points Store button under your points: same pill as the others */
html.bz-night .pts .go{font-family:'Inter',system-ui,sans-serif !important;font-weight:600;letter-spacing:.04em;
  font-size:13.5px;color:#fff !important;background:linear-gradient(135deg,#FFC23D,#F59E0B) !important;
  box-shadow:0 8px 26px rgba(255,182,39,.3)}