/* Site-wide look (matches the homepage): grid, red glow and sparkles behind every page; cards, headings,
   buttons and tabs restyled. The homepage has its own (bb-home.css), so most of this skips body.bbs-home. */
:root{--bbs-line:rgb(255 255 255 / .08);--bbs-red:var(--color-accent);--bbs-red-ink:#ff5263}

/* Backdrop: a red glow and a faint grid at the top of each page */
body:not(.bbs-home)::before{content:"";position:absolute;inset:0 0 auto;height:900px;z-index:-1;pointer-events:none;
  background:radial-gradient(45% 60% at 50% 0%,color-mix(in srgb,var(--bbs-red) 16%,transparent),transparent 72%),
    linear-gradient(rgb(255 255 255 / .03) 1px,transparent 1px),linear-gradient(90deg,rgb(255 255 255 / .03) 1px,transparent 1px);
  background-size:auto,72px 72px,72px 72px;mask-image:linear-gradient(#000 40%,transparent)}
body:not(.bbs-home){position:relative;isolation:isolate}
.bbs-stars{position:absolute;inset:0 0 auto;height:760px;width:100%;z-index:-1;mask-image:linear-gradient(#000 50%,transparent)}

/* Page titles: bigger, tighter, with a soft white-to-red fade */
body:not(.bbs-home) main h1.font-display{letter-spacing:-.04em;line-height:1;background:linear-gradient(180deg,#fff 35%,#ffb3ba 120%);-webkit-background-clip:text;background-clip:text;color:transparent}
body:not(.bbs-home) main h1.font-display *{color:inherit}
body:not(.bbs-home) main h2.font-display{letter-spacing:-.03em}

/* Cards: a glassy surface, a hairline edge and a red glow that follows the cursor */
body:not(.bbs-home) .raised{position:relative;background:linear-gradient(180deg,rgb(255 255 255 / .045),rgb(255 255 255 / .012)),rgb(11 11 13 / .82);
  box-shadow:inset 0 0 0 1px var(--bbs-line),0 24px 60px -40px rgb(0 0 0 / .9);backdrop-filter:blur(6px);transition:box-shadow .25s}
body:not(.bbs-home) .raised::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;opacity:0;transition:opacity .3s;
  background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),color-mix(in srgb,var(--bbs-red) 70%,transparent),transparent 70%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
body:not(.bbs-home) .raised:hover::after{opacity:1}
body:not(.bbs-home) .raised:hover{box-shadow:inset 0 0 0 1px rgb(255 255 255 / .12),0 30px 70px -40px color-mix(in srgb,var(--bbs-red) 45%,transparent)}

/* Buttons and live tags */
body:not(.bbs-home) main .bg-accent{box-shadow:0 10px 30px -12px color-mix(in srgb,var(--bbs-red) 85%,transparent),inset 0 1px 0 rgb(255 255 255 / .22)}
body:not(.bbs-home) main .text-accent{text-shadow:0 0 18px color-mix(in srgb,var(--bbs-red) 40%,transparent)}
body:not(.bbs-home) main button,body:not(.bbs-home) main a{transition:background-color .2s,color .2s,box-shadow .2s,transform .15s}
body:not(.bbs-home) main a.bg-accent:active,body:not(.bbs-home) main button.bg-accent:active{transform:translateY(1px)}

/* Legal and FAQ text pages read like the homepage's sections */
body:not(.bbs-home) main article h2,body:not(.bbs-home) main .prose h2{letter-spacing:-.02em}

@media (prefers-reduced-motion:reduce){body:not(.bbs-home) .raised::after,body:not(.bbs-home) .raised{transition:none}}
body.bbs-home /* Page headline: page name as a small label, catchline with one solid red word */
.bbs-pill{display:inline-flex;align-items:center;gap:8px;width:fit-content;margin-bottom:14px;padding:5px 12px;border-radius:999px;background:rgb(255 255 255 / .04);box-shadow:inset 0 0 0 1px var(--bbs-line);font-size:.75rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--color-fg-2)}
.bbs-dot{width:6px;height:6px;border-radius:50%;background:var(--bbs-red);box-shadow:0 0 0 3px color-mix(in srgb,var(--bbs-red) 22%,transparent)}
body:not(.bbs-home) main h1.bbs-titled{background:none;color:var(--color-fg);letter-spacing:-.04em;text-wrap:balance;max-width:24ch}
.bbs-red{color:var(--bbs-red-ink)}
body:not(.bbs-home) main h1.bbs-titled .bbs-red{color:var(--bbs-red-ink)}
/* Brand is black, white and red: the old amber "warning" color becomes a neutral light grey everywhere */
:root{--color-warn:#c9c9cf}
/* falling numbers and buyers use the brand red, not orange */
:root{--color-down:#ff5263}
/* medals in brand colors: 1st place red, 3rd place grey (2nd stays light grey) */
:root{--color-gold:#ff5263;--color-gold-ink:#ffffff;--color-bronze:#8a8a93}
/* the "Viewing Now" counter floats in the corner instead of sitting in the layout */
[title="People with this page open right now"]{position:fixed;right:20px;bottom:20px;z-index:45;background:rgb(16 16 19 / .82)!important;backdrop-filter:blur(10px);box-shadow:inset 0 0 0 1px rgb(255 255 255 / .1),0 18px 40px -16px rgb(0 0 0 / .9),0 0 0 1px color-mix(in srgb,var(--color-accent) 18%,transparent)!important;animation:bbs-pop .4s cubic-bezier(.2,.8,.2,1) both}
@keyframes bbs-pop{from{opacity:0;transform:translateY(10px)}}
@media (prefers-reduced-motion:reduce){[title="People with this page open right now"]{animation:none}}
/* dashboard: no yellow (green stays only for good statuses) */
.bx{--bx-yellow:#d4d4d8}
.bx-ic-yellow{background:#17171a;border-color:#2a2a2f}

/* Sparkles (bb-common.js): white dots with a glow that rise through the box and fade */
.bb-sparkles{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.bb-sparkles span{position:absolute;bottom:0;border-radius:50%;background:#fff;opacity:0;animation:bb-drift 30s linear infinite;will-change:transform,opacity}
@keyframes bb-drift{0%{opacity:0;transform:translate(0)}10%{opacity:var(--p-opacity,.5)}90%{opacity:var(--p-opacity,.5)}100%{transform:translate3d(var(--p-dx,0),-110vh,0);opacity:0}}
@media (prefers-reduced-motion:reduce){.bb-sparkles span{animation:none}}