/* ================================================================
   Buildaverse design system v1  -  token-driven, dark + light themes.
   Loaded AFTER bootstrap.css so it supersedes legacy rules where they
   share selectors. New components use the .bv- prefix.

   See design_handoff_buildaverse/README.md for the full token table.
   ================================================================ */

/* ============= TOKENS ============= */
:root,
:root[data-theme="dark"] {
    --bv-bg:           #0D0D12;
    --bv-bg2:          #15151f;
    --bv-panel:        #16161f;
    --bv-panel2:       #1d1d29;
    --bv-ink:          #E2E2EA;
    --bv-ink2:         #9090A8;
    --bv-ink3:         #6c6c80;
    --bv-hairline:     rgba(255,255,255,0.08);
    --bv-hairline2:    rgba(255,255,255,0.14);
    --bv-primary:      #7C6BF0;
    --bv-primary-dark: #5e4cd8;
    --bv-primary-alt:  #3D9EFF;
    --bv-primary-soft: rgba(124,107,240,0.15);
    --bv-primary-ink:  #c4bfff;
    --bv-good:         #46C780;
    --bv-warn:         #FFC107;
    --bv-danger:       #ef4444;
    --bv-cash:         #46C780;
    --bv-shadow:       0 1px 2px rgba(0,0,0,.5), 0 4px 18px rgba(0,0,0,.35);
    --bv-tag-good-bg:  rgba(70,199,128,.15);
    --bv-tag-warn-bg:  rgba(255,193,7,.15);
    --bv-tag-blue-bg:  rgba(61,158,255,.15);
    /* Force bootstrap.css glass tokens onto our panel surface so any
       legacy rule that consumes --glass-bg/border (.card, etc.) resolves
       to the correct dark panel color rather than the translucent-white
       default declared in bootstrap.css. */
    --glass-bg:           var(--bv-panel);
    --glass-bg-strong:    var(--bv-panel2);
    --glass-border:       var(--bv-hairline);
    --glass-border-hover: var(--bv-hairline2);
    --glass-blur:         none;
    --glass-blur-strong:  none;
}

:root[data-theme="light"] {
    --bv-bg:           #f7f6fc;
    --bv-bg2:          #eeebf7;
    --bv-panel:        #ffffff;
    --bv-panel2:       #f4f2fa;
    --bv-ink:          #0D0D12;
    --bv-ink2:         #5a5470;
    --bv-ink3:         #9690a8;
    --bv-hairline:     #e7e3f0;
    --bv-hairline2:    #d6cfe4;
    --bv-primary:      #7C6BF0;
    --bv-primary-dark: #5e4cd8;
    --bv-primary-alt:  #3D9EFF;
    --bv-primary-soft: #ece8fe;
    --bv-primary-ink:  #4a37c4;
    --bv-good:         #16a34a;
    --bv-warn:         #d97706;
    --bv-danger:       #dc2626;
    --bv-cash:         #16a34a;
    --bv-shadow:       0 1px 2px rgba(40,30,80,.06), 0 4px 14px rgba(40,30,80,.07);
    --bv-tag-good-bg:  #d1fae5;
    --bv-tag-warn-bg:  #fef3c7;
    --bv-tag-blue-bg:  #dbeafe;
}

/* ============= BRAND TYPOGRAPHY =============
   Single typeface: Plus Jakarta Sans, for body + display + everything
   inline. Switched from Inter on 2026-05-09  -  Inter reads as the
   default vibe-coded SaaS face; Jakarta has more humanist character
   while staying neutral enough for dense UI.

   Code blocks fall through to platform monospace (no Google Fonts hop).
   The mono token resolves to the body face so legacy chip/eyebrow rules
   render in the brand voice instead of broadcasting "tech startup"
   via a distinctive monospace face. The handful of places that
   genuinely want monospaced glyphs (verification codes, OTP inputs)
   set their own ui-monospace stack inline.
   ============================================ */
:root {
    --bv-font-body:    'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --bv-font-display: var(--bv-font-body);
    --bv-font-mono:    var(--bv-font-body);
}
body, .bv-body { font-family: var(--bv-font-body); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
h1, h2, h3, .bv-display, .bv-page-header__title, .w-h1, .w-final-h, .w-section-h2,
.bv-thread-title, .w-hero__h1, .w-client__title, .bv-spotlight__name, .bv-feature-banner__title,
.w-bento__name, .bv-section-h2 {
    font-family: var(--bv-font-display);
    font-feature-settings: "ss01", "cv11";
    letter-spacing: -.02em;
}
/* Eyebrows / labels: monospace, always uppercase. */
.bv-eyebrow, .w-eyebrow, .w-card__title, .w-bento__eyebrow, .w-foot__col h4,
.bv-thread-rail-card__title, .bv-side-h, .bv-section-h, .bv-replies-divider,
.bv-topic-sidebar__label {
    font-family: var(--bv-font-mono);
}

/* Make body honor the theme tokens. */
body {
    background: var(--bv-bg) !important;
    color: var(--bv-ink) !important;
    /* Smooth swap between dark + light, including text color so headings
       don't flash a half-state. Kept short so hover states stay snappy. */
    transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
/* Universal transition so token-driven properties move together when the
   theme flips. Anything that uses var(--bv-*) tokens for color, bg, or
   border will glide; anything hardcoded will pop (which is the cue to fix
   it). Inputs / buttons get a tighter duration so hover/focus feel snappy. */
html, body, body *,
body *::before, body *::after {
    transition: background-color .18s ease, color .18s ease, border-color .18s ease, fill .18s ease, stroke .18s ease;
}
input, button, select, textarea, .btn, a {
    transition-duration: .12s;
}
/* Don't transition the bits that animate themselves  -  would compound. */
.spinner-border, .w-pulse, .pulse,
.bv-emoji-picker, .bv-emoji-picker *,
.notification-dropdown, .notification-dropdown * { transition: none !important; }

/* ============= LOGO THEME-SWAP =============
   The brand has two logo SVGs whose names refer to the LOGO COLOR, not
   Inline SVG (resources/views/_brand_logo.blade.php). The wordmark glyph
   uses currentColor (driven by .bv-logo color), the accent uses
   var(--bv-primary). Theme-aware automatically  -  no hide-rule games.
   =========================================== */
.bv-logo {
    display: block;
    height: 22px;
    width: auto;
    color: var(--bv-ink);
    flex-shrink: 0;
}
.bv-logo path { transition: fill .2s ease; }
/* Size modifiers  -  let callers override the default 22px height. */
.bv-logo--xl { height: auto; width: 100%; }
.bv-logo--lg { height: 32px; }

/* ============= THEME-AWARE VISIBILITY UTILITIES ====================
   Drop these on any element to show it only in the matching theme.
   Naming: "dark-only" means the element is FOR dark theme (visible
   when dark, hidden when light), and vice-versa.
   Works on any element type (img, span, div, svg, etc.).
   ================================================================== */
.bv-light-only { display: none !important; }
:root[data-theme="light"] .bv-dark-only  { display: none !important; }
:root[data-theme="light"] .bv-light-only { display: initial !important; }

/* ============= DEV BANNER (always-on "preview" strip) =============
   Thin, mono, subtle. Tokens only so it tracks theme. Sticky at the top.
   The maintenance banner (when active) stacks above this one.
   ====================================================================== */
/* Dev banner sits at the top of the document but does NOT stick on
   scroll. The topbar is .sticky-top and used to fight this rule for
   the same `top: 0` slot, so they overlapped on scroll. The user has
   already seen the preview notice once  -  it can scroll away. */
.bv-dev-banner {
    position: sticky;
    top: 0;
    z-index: 1010;
    width: 100%;
    background: rgb(13, 13, 18);
    background-image: linear-gradient(180deg, rgba(124, 107, 240, 0.12), rgba(124, 107, 240, 0.04));
    border-bottom: 1px solid rgba(124, 107, 240, 0.28);
    color: var(--bv-ink);
    font-size: 12px;
    padding: 7px 14px;
    text-align: center;
    line-height: 1.3;
}
:root[data-theme="light"] .bv-dev-banner {
    background: rgb(247, 246, 252);
    background-image: linear-gradient(180deg, rgba(124, 107, 240, 0.10), rgba(124, 107, 240, 0.03));
    border-bottom-color: rgba(124, 107, 240, 0.22);
}
.bv-dev-banner__inner {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
    max-width: 100%;
}
.bv-dev-banner__dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--bv-primary);
    box-shadow: 0 0 0 0 rgba(124, 107, 240, 0.55);
    animation: bv-dev-ping 2.4s ease-out infinite;
    flex-shrink: 0;
}
@keyframes bv-dev-ping {
    0%   { box-shadow: 0 0 0 0 rgba(124, 107, 240, 0.5); }
    70%  { box-shadow: 0 0 0 6px rgba(124, 107, 240, 0); }
    100% { box-shadow: 0 0 0 0 rgba(124, 107, 240, 0); }
}
.bv-dev-banner__label {
    color: var(--bv-primary);
    font-weight: 700;
}
.bv-dev-banner__sep { color: var(--bv-ink3); }
.bv-dev-banner__text {
    color: var(--bv-ink2);
    text-transform: none;
    letter-spacing: 0;
    font-family: var(--bv-font-body);
    font-size: 12px;
}
@media (max-width: 640px) {
    .bv-dev-banner__sep, .bv-dev-banner__text { display: none; }
    .bv-dev-banner__label { letter-spacing: 0.12em; }
}
@media (prefers-reduced-motion: reduce) {
    .bv-dev-banner__dot { animation: none; }
}

/* Auth pages (login, register, verify, reset, two-factor, ais auth)
   ship the body with `d-flex align-items-center` to vertically center
   their card. With the dev banner now also a body-level child, the
   banner gets flex-centered as a sibling instead of pinning to top.
   Override: keep the body a column flex (banner stacks naturally at
   top, sticky behavior intact), let <main> take remaining height and
   do the actual content centering. */
body.authentication {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    min-height: 100vh;
}
body.authentication > main {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
}

/* ============= DARK-MODE CARD GUARDRAIL =============
   bootstrap.css line 5153 defines `.card { background: var(--glass-bg) }`
   which previously resolved to a translucent-white because --glass-bg was
   only declared in the unscoped :root block. We now redefine --glass-bg
   inside :root[data-theme="dark"] (above) so the tokenized rule resolves
   correctly, but belt-and-suspenders: also pin .card surfaces explicitly
   to --bv-panel in dark mode so any future legacy rule that reaches for
   a hardcoded white can't repaint the surface.
   ===================================================== */
:root[data-theme="dark"] .card,
:root[data-theme="dark"] .card-body {
    background: var(--bv-panel) !important;
    color: var(--bv-ink) !important;
    border-color: var(--bv-hairline) !important;
}
:root[data-theme="dark"] .card-header,
:root[data-theme="dark"] .card-footer {
    background: var(--bv-panel2) !important;
    color: var(--bv-ink) !important;
    border-color: var(--bv-hairline) !important;
}

/* ============= LIGHT-MODE BOOTSTRAP/LEGACY OVERRIDES =============
   bootstrap.css was hand-tuned for dark mode and hardcodes colors all
   over (literal hex values inside .card / .form-control / .dropdown-menu /
   etc., and indirected via --glass-bg, --bs-body-bg, --shadow-card, ...).
   When data-theme="light" is set, our tokens flip but those legacy rules
   keep painting the page dark. Override them here.
   ================================================================== */
:root[data-theme="light"] {
    /* Flip Bootstrap's body vars so any util that consumes them (.bg-body,
       .text-body, etc.) follows the theme. */
    --bs-body-bg:        #f7f6fc;
    --bs-body-bg-rgb:    247, 246, 252;
    --bs-body-color:     #0D0D12;
    --bs-body-color-rgb: 13, 13, 18;
    /* The "glass" surface tokens that .card and friends consume. In dark
       these are translucent-white-on-black. In light we want translucent
       primary-tint-on-white so the depth survives the inversion. */
    --glass-bg:           rgba(255, 255, 255, 0.85);
    --glass-bg-strong:    #ffffff;
    --glass-border:       #e7e3f0;
    --glass-border-hover: #d6cfe4;
    /* Glass-blur tokens stay `none` in light mode too  -  brand says no
       glassmorphism. Shadow tokens stay neutral, no purple bloom. */
    --glass-blur:         none;
    --glass-blur-strong:  none;
    --shadow-card:        0 1px 2px rgba(40, 30, 80, .05), 0 1px 1px rgba(40, 30, 80, .04);
    --shadow-card-hover:  0 1px 2px rgba(40, 30, 80, .08);
}

/* Cards: bootstrap.css hardcodes border-color via var(--glass-border-hover)
   on hover but the base rule consumes --glass-bg/border/shadow which we
   overrode above. Only need to nudge text color so descendants pick it up. */
:root[data-theme="light"] .card {
    color: var(--bv-ink);
}

/* Form controls  -  hardcoded #E2E2EA + rgba(255,255,255,*) backgrounds. */
:root[data-theme="light"] .form-control,
:root[data-theme="light"] .form-select {
    color: var(--bv-ink) !important;
    background-color: var(--bv-panel) !important;
    border-color: var(--bv-hairline) !important;
}
:root[data-theme="light"] .form-control:focus,
:root[data-theme="light"] .form-select:focus {
    background-color: var(--bv-panel) !important;
    border-color: var(--bv-primary) !important;
    box-shadow: 0 0 0 3px var(--bv-primary-soft) !important;
}
:root[data-theme="light"] .form-control::placeholder { color: var(--bv-ink3) !important; }
:root[data-theme="light"] .input-group-text {
    background-color: var(--bv-bg2) !important;
    color: var(--bv-ink2) !important;
    border-color: var(--bv-hairline) !important;
}

/* Dropdowns  -  literal rgba(20,20,28,.95) background. */
:root[data-theme="light"] .dropdown-menu {
    background: var(--bv-panel) !important;
    color: var(--bv-ink) !important;
    border: 1px solid var(--bv-hairline) !important;
    box-shadow: var(--bv-shadow);
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}
:root[data-theme="light"] .dropdown-item {
    color: var(--bv-ink) !important;
}
:root[data-theme="light"] .dropdown-item:hover,
:root[data-theme="light"] .dropdown-item:focus {
    background: var(--bv-bg2) !important;
    color: var(--bv-ink) !important;
}
:root[data-theme="light"] .dropdown-item.active,
:root[data-theme="light"] .dropdown-item:active {
    background: var(--bv-primary-soft) !important;
    color: var(--bv-primary-ink) !important;
}
:root[data-theme="light"] .dropdown-divider {
    border-color: var(--bv-hairline) !important;
}
:root[data-theme="light"] .dropdown-header {
    color: var(--bv-ink3) !important;
}

/* Modals */
:root[data-theme="light"] .modal-content {
    background: var(--bv-panel) !important;
    color: var(--bv-ink) !important;
    border: 1px solid var(--bv-hairline) !important;
}
:root[data-theme="light"] .modal-header,
:root[data-theme="light"] .modal-footer {
    border-color: var(--bv-hairline) !important;
}
:root[data-theme="light"] .modal-backdrop.show { opacity: 0.35; }
:root[data-theme="light"] .btn-secondary {
    background: var(--bv-bg2) !important;
    color: var(--bv-ink) !important;
    border: 1px solid var(--bv-hairline) !important;
}
:root[data-theme="light"] .btn-secondary:hover {
    background: var(--bv-bg3, #ddd) !important;
    color: var(--bv-ink) !important;
}

/* List groups */
:root[data-theme="light"] .list-group {
    background: transparent;
    --bs-list-group-bg: var(--bv-panel);
    --bs-list-group-color: var(--bv-ink);
    --bs-list-group-border-color: var(--bv-hairline);
}
:root[data-theme="light"] .list-group-item {
    background-color: var(--bv-panel) !important;
    color: var(--bv-ink) !important;
    border-color: var(--bv-hairline) !important;
}
:root[data-theme="light"] .list-group-item.active {
    background-color: var(--bv-primary) !important;
    color: #fff !important;
    border-color: var(--bv-primary) !important;
}

/* Nav tabs */
:root[data-theme="light"] .nav-tabs {
    border-bottom-color: var(--bv-hairline) !important;
}
:root[data-theme="light"] .nav-tabs .nav-link {
    color: var(--bv-ink2) !important;
    border-color: transparent !important;
}
:root[data-theme="light"] .nav-tabs .nav-link:hover {
    color: var(--bv-ink) !important;
    border-color: var(--bv-hairline) var(--bv-hairline) transparent !important;
}
:root[data-theme="light"] .nav-tabs .nav-link.active {
    color: var(--bv-primary-ink) !important;
    background-color: var(--bv-panel) !important;
    border-color: var(--bv-hairline) var(--bv-hairline) var(--bv-panel) !important;
}

/* Generic .nav-link (used by .nav-pills and bare .nav). bootstrap.css line
   ~4406 hardcodes color:#DEDEDE which is invisible on a white card in
   light mode  -  the symptom users see when an admin/edit page renders
   white-on-white nav columns. */
:root[data-theme="light"] .nav-link {
    color: var(--bv-ink2) !important;
}
:root[data-theme="light"] .nav-link:hover,
:root[data-theme="light"] .nav-link:focus {
    color: var(--bv-primary-ink) !important;
}
:root[data-theme="light"] .nav-pills .nav-link {
    background: transparent;
    color: var(--bv-ink) !important;
}
:root[data-theme="light"] .nav-pills .nav-link:hover {
    background: var(--bv-bg2) !important;
    color: var(--bv-ink) !important;
}
:root[data-theme="light"] .nav-pills .nav-link.active,
:root[data-theme="light"] .nav-pills .show > .nav-link {
    color: #fff !important;
    background: var(--bv-primary) !important;
}

/* Tables */
:root[data-theme="light"] .table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--bv-ink);
    --bs-table-striped-bg: var(--bv-bg2);
    --bs-table-striped-color: var(--bv-ink);
    --bs-table-hover-bg: var(--bv-bg2);
    --bs-table-hover-color: var(--bv-ink);
    --bs-table-border-color: var(--bv-hairline);
    color: var(--bv-ink) !important;
    border-color: var(--bv-hairline) !important;
}
:root[data-theme="light"] .table > :not(caption) > * > * {
    background-color: transparent;
    color: var(--bv-ink);
    border-bottom-color: var(--bv-hairline);
}

/* Bootstrap "dark" utility classes used as panel backgrounds  -  neutralize. */
:root[data-theme="light"] .bg-dark {
    background-color: var(--bv-panel) !important;
    color: var(--bv-ink) !important;
}
:root[data-theme="light"] .bg-light {
    background-color: var(--bv-bg2) !important;
    color: var(--bv-ink) !important;
}
:root[data-theme="light"] .bg-body {
    background-color: var(--bv-bg) !important;
}
:root[data-theme="light"] .text-light { color: var(--bv-ink2) !important; }
:root[data-theme="light"] .text-dark  { color: var(--bv-ink)  !important; }
:root[data-theme="light"] .text-muted,
:root[data-theme="light"] .text-secondary { color: var(--bv-ink3) !important; }
:root[data-theme="light"] .text-white { color: #fff !important; } /* keep white on colored backgrounds */
:root[data-theme="light"] .text-body { color: var(--bv-ink) !important; }

/* Buttons that use the dark/light variants */
:root[data-theme="light"] .btn-light {
    background-color: var(--bv-panel) !important;
    color: var(--bv-ink) !important;
    border-color: var(--bv-hairline) !important;
}
:root[data-theme="light"] .btn-light:hover {
    background-color: var(--bv-bg2) !important;
    border-color: var(--bv-hairline2) !important;
}
:root[data-theme="light"] .btn-dark {
    background-color: #1d1d29 !important;
    color: #fff !important;
    border-color: #1d1d29 !important;
}
:root[data-theme="light"] .btn-outline-light {
    color: var(--bv-ink) !important;
    border-color: var(--bv-hairline2) !important;
}
:root[data-theme="light"] .btn-outline-light:hover {
    background-color: var(--bv-bg2) !important;
    color: var(--bv-ink) !important;
}

/* Alerts  -  base alert in bootstrap.css uses a dark glass surface. */
:root[data-theme="light"] .alert {
    background: var(--bv-panel) !important;
    color: var(--bv-ink) !important;
    border-color: var(--bv-hairline) !important;
}
:root[data-theme="light"] .alert-success {
    background: var(--bv-tag-good-bg) !important;
    color: #065f46 !important;
    border-color: rgba(16,163,74,.25) !important;
}
:root[data-theme="light"] .alert-warning {
    background: var(--bv-tag-warn-bg) !important;
    color: #92400e !important;
    border-color: rgba(217,119,6,.25) !important;
}
:root[data-theme="light"] .alert-danger {
    background: rgba(220,38,38,.10) !important;
    color: #991b1b !important;
    border-color: rgba(220,38,38,.25) !important;
}
:root[data-theme="light"] .alert-info {
    background: var(--bv-tag-blue-bg) !important;
    color: #1e40af !important;
    border-color: rgba(61,158,255,.25) !important;
}

/* Pagination */
:root[data-theme="light"] .page-link {
    background: var(--bv-panel) !important;
    color: var(--bv-ink2) !important;
    border-color: var(--bv-hairline) !important;
}
:root[data-theme="light"] .page-link:hover {
    background: var(--bv-bg2) !important;
    color: var(--bv-ink) !important;
}
:root[data-theme="light"] .page-item.active .page-link {
    background: var(--bv-primary) !important;
    color: #fff !important;
    border-color: var(--bv-primary) !important;
}
:root[data-theme="light"] .page-item.disabled .page-link {
    background: var(--bv-bg2) !important;
    color: var(--bv-ink3) !important;
}

/* Toasts (toastr.js + bootstrap toast) */
:root[data-theme="light"] .toast,
:root[data-theme="light"] #toast-container > div {
    background: var(--bv-panel) !important;
    color: var(--bv-ink) !important;
    border: 1px solid var(--bv-hairline) !important;
    box-shadow: var(--bv-shadow);
}

/* Popovers / tooltips */
:root[data-theme="light"] .popover {
    background: var(--bv-panel) !important;
    border-color: var(--bv-hairline) !important;
    color: var(--bv-ink) !important;
}
:root[data-theme="light"] .popover-header {
    background: var(--bv-bg2) !important;
    color: var(--bv-ink) !important;
    border-bottom-color: var(--bv-hairline) !important;
}
:root[data-theme="light"] .popover-body {
    color: var(--bv-ink) !important;
}

/* Anchors  -  bootstrap.css uses #877bf4 hardcoded */
:root[data-theme="light"] a {
    color: var(--bv-primary-ink);
}
:root[data-theme="light"] a:hover {
    color: var(--bv-primary);
}

/* Code / kbd / pre */
:root[data-theme="light"] code,
:root[data-theme="light"] kbd,
:root[data-theme="light"] pre {
    background: var(--bv-bg2) !important;
    color: var(--bv-ink) !important;
}

/* Close button (×) used in modals/alerts/toasts  -  bootstrap renders it as a
   white SVG mask on dark; invert in light mode. */
:root[data-theme="light"] .btn-close {
    filter: none;
}

/* Breadcrumb */
:root[data-theme="light"] .breadcrumb-item,
:root[data-theme="light"] .breadcrumb-item.active {
    color: var(--bv-ink2);
}
:root[data-theme="light"] .breadcrumb-item + .breadcrumb-item::before {
    color: var(--bv-ink3);
}

/* hr */
:root[data-theme="light"] hr {
    color: var(--bv-hairline) !important;
    background-color: var(--bv-hairline) !important;
    opacity: 1;
}

/* Generic: any element using the dark-mode "glass" pattern via Bootstrap
   custom properties is now light-tinted by --glass-* overrides above. */

/* ============= TOPBAR (overrides bootstrap.css legacy rules) ============= */
.topbar {
    height: 56px;
    width: 100%;
    padding: 0 1rem 0 1.25rem;
    background: var(--bv-panel) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-bottom: 1px solid var(--bv-hairline) !important;
    gap: 1rem;
}

.topbar-brand img { height: 22px !important; width: auto; display: block; }

/* Search field + type-ahead dropdown. Stretches to fill the topbar
   between brand and action cluster.
     - max-width: none cancels bootstrap.css legacy rule that capped
       the search at 380px (bootstrap.css line ~12281).
     - flex: 1 1 0 with basis 0 (NOT auto) so the form starts at zero
       width and absorbs all leftover space. With basis auto the input's
       width:100% creates a chicken-and-egg where the form never grows. */
.topbar-search {
    flex: 1 1 0 !important;
    max-width: none !important;
    width: auto !important;
    min-width: 0;
    position: relative;
}
.topbar-search .form-control {
    height: 36px;
    width: 100%;
    padding: 0 0.75rem 0 2.25rem;
    background: var(--bv-bg2) !important;
    border: 1px solid var(--bv-hairline) !important;
    border-radius: 9px !important;
    color: var(--bv-ink) !important;
    font-size: 13.5px !important;
}
.topbar-search .form-control::placeholder { color: var(--bv-ink3) !important; }
.topbar-search > i { color: var(--bv-ink3) !important; }
.topbar-search .form-control:focus {
    background: var(--bv-bg2) !important;
    border-color: var(--bv-hairline2) !important;
    box-shadow: 0 0 0 3px rgba(124,107,240,0.10) !important;
}

/* Type-ahead dropdown (anchored to .topbar-search). Hidden by default;
   the JS toggles .is-open when there's a query + non-empty results. */
.topbar-suggest {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    background: var(--bv-panel);
    border: 1px solid var(--bv-hairline);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,.35);
    max-height: 70vh;
    overflow-y: auto;
    z-index: 1080;
    display: none;
    padding: 6px;
}
.topbar-suggest.is-open { display: block; }
.topbar-suggest__group { padding: 6px 4px 8px; }
.topbar-suggest__group + .topbar-suggest__group { border-top: 1px solid var(--bv-hairline); }
.topbar-suggest__head {
    font-size: 11px;
    font-weight: 700;
    color: var(--bv-ink3);
    padding: 4px 8px 6px;
}
.topbar-suggest__item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 8px;
    color: var(--bv-ink);
    text-decoration: none;
    font-size: 13.5px;
    line-height: 1.2;
}
.topbar-suggest__item:hover,
.topbar-suggest__item.is-active {
    background: var(--bv-bg2);
    color: var(--bv-ink);
}
.topbar-suggest__icon {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    object-fit: cover;
    flex-shrink: 0;
    background: var(--bv-bg2);
    display: grid;
    place-items: center;
    color: var(--bv-ink3);
    font-size: 14px;
}
.topbar-suggest__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar-suggest__sub  { font-size: 12px; color: var(--bv-ink3); }
.topbar-suggest__seeall {
    display: block;
    text-align: center;
    padding: 10px;
    border-top: 1px solid var(--bv-hairline);
    margin-top: 4px;
    font-size: 13px;
    font-weight: 700;
    color: var(--bv-primary);
    text-decoration: none;
}
.topbar-suggest__seeall:hover { background: var(--bv-bg2); color: var(--bv-primary); }
.topbar-suggest__empty { padding: 16px; text-align: center; color: var(--bv-ink3); font-size: 13px; }

/* ============= GLOBAL SEARCH RESULTS PAGE ============= */
.bv-search-page { padding: 8px 0 32px; }
.bv-search-tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.bv-search-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: 999px;
    background: var(--bv-panel);
    border: 1px solid var(--bv-hairline);
    color: var(--bv-ink2);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
}
.bv-search-tab:hover { color: var(--bv-ink); border-color: var(--bv-hairline2); }
.bv-search-tab.is-active {
    background: var(--bv-primary);
    border-color: var(--bv-primary);
    color: #fff;
}
.bv-search-tab__count {
    font-size: 11px;
    font-weight: 700;
    color: var(--bv-ink3);
    padding: 1px 6px;
    border-radius: 999px;
    background: var(--bv-bg2);
}
.bv-search-tab.is-active .bv-search-tab__count { background: rgba(255,255,255,.15); color: #fff; }

.bv-search-lane { }
.bv-search-lane__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 12px;
}
.bv-search-lane__title { font-size: 16px; font-weight: 800; color: var(--bv-ink); margin: 0; }
.bv-search-lane__more {
    font-size: 13px;
    color: var(--bv-primary);
    font-weight: 700;
    text-decoration: none;
}
.bv-search-lane__more:hover { text-decoration: underline; }

.bv-search-card {
    display: block;
    background: var(--bv-panel);
    border: 1px solid var(--bv-hairline);
    border-radius: 12px;
    overflow: hidden;
    text-decoration: none;
    color: var(--bv-ink);
    height: 100%;
    transition: border-color .12s;
}
.bv-search-card:hover { border-color: var(--bv-hairline2); color: var(--bv-ink); text-decoration: none; }
.bv-search-card__art {
    aspect-ratio: 1;
    background: var(--bv-bg2);
    display: grid;
    place-items: center;
    color: var(--bv-ink3);
    font-size: 28px;
}
.bv-search-card__art img { width: 100%; height: 100%; object-fit: contain; }
.bv-search-card__art--avatar img { object-fit: cover; }
.bv-search-card__body { padding: 10px 12px 12px; }
.bv-search-card__name {
    font-size: 14px;
    font-weight: 700;
    color: var(--bv-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.bv-search-card__sub { font-size: 12px; color: var(--bv-ink3); margin-top: 2px; }

.bv-search-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: var(--bv-panel);
    border: 1px solid var(--bv-hairline);
    border-radius: 10px;
    text-decoration: none;
    color: var(--bv-ink);
    transition: border-color .12s;
}
.bv-search-row:hover { border-color: var(--bv-hairline2); color: var(--bv-ink); text-decoration: none; }
.bv-search-row__art {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    background: var(--bv-bg2);
    display: grid;
    place-items: center;
    color: var(--bv-ink3);
    flex-shrink: 0;
    overflow: hidden;
}
.bv-search-row__art img { width: 100%; height: 100%; object-fit: cover; }
.bv-search-row__body { flex: 1; min-width: 0; }
.bv-search-row__name {
    font-size: 14px;
    font-weight: 700;
    color: var(--bv-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.bv-search-row__sub {
    font-size: 12px;
    color: var(--bv-ink3);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-top: 2px;
}
.bv-search-threads { display: flex; flex-direction: column; gap: 8px; }

.bv-search-empty {
    text-align: center;
    padding: 60px 20px;
    background: var(--bv-panel);
    border: 1px solid var(--bv-hairline);
    border-radius: 12px;
    color: var(--bv-ink2);
}

/* Auth-state action cluster (notifications, trades, currency, user menu).
   flex-shrink: 0 so the search bar consumes free space, not these. The
   search bar's flex-grow:1 already pushes this cluster to the right edge;
   no margin-left: auto needed (and it would conflict with the search's
   grow because margin-auto absorbs free space before flex-grow does). */
.topbar-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}
.topbar-guest {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

.topbar-icon-btn {
    width: 36px;
    height: 36px;
    border-radius: 9px;
    color: var(--bv-ink2);
    font-size: 1rem;
}
.topbar-icon-btn:hover {
    background: var(--bv-bg2);
    color: var(--bv-ink);
}
.topbar-badge {
    top: 6px;
    right: 7px;
    width: 8px;
    height: 8px;
    background: var(--bv-danger) !important;
    border-color: var(--bv-panel) !important;
}

/* Top-bar auth CTA buttons (guest-only)  -  pill, matched to 36px control height */
.bv-auth-cta { height: 36px; }
.bv-auth-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 36px;
    padding: 0 16px;
    border-radius: 999px;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.06s ease;
    white-space: nowrap;
    border: 1px solid transparent;
}
.bv-auth-btn:active { transform: translateY(0.5px); }
.bv-auth-btn--ghost {
    color: var(--bv-ink);
    background: transparent;
    border-color: var(--bv-hairline);
}
.bv-auth-btn--ghost:hover {
    color: var(--bv-ink);
    background: var(--bv-bg2);
    border-color: var(--bv-hairline2, var(--bv-hairline));
    text-decoration: none;
}
.bv-auth-btn--primary {
    color: #fff;
    background: var(--bv-primary);
    border-color: var(--bv-primary);
    box-shadow: 0 1px 1px rgba(0,0,0,.12);
}
.bv-auth-btn--primary:hover {
    color: #fff;
    background: var(--bv-primary-dark);
    border-color: var(--bv-primary-dark);
    text-decoration: none;
}

/* New: combined currency pill (replaces .topbar-currency layout) */
.bv-currency-pill {
    display: inline-flex;
    align-items: stretch;
    background: var(--bv-bg2);
    border: 1px solid var(--bv-hairline);
    border-radius: 999px;
    padding: 4px;
    gap: 0;
    text-decoration: none;
}
.bv-currency-pill__item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 12px 3px 10px;
    color: var(--bv-ink);
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}
.bv-currency-pill__item--cash  { color: var(--bv-cash); }
.bv-currency-pill__item--coins { color: var(--bv-ink); }
.bv-currency-pill__item:hover  { color: var(--bv-primary); }
.bv-currency-pill__divider {
    width: 1px;
    align-self: stretch;
    background: var(--bv-hairline);
}

/* New: theme toggle button */
.bv-theme-toggle {
    width: 36px;
    height: 36px;
    border-radius: 9px;
    background: var(--bv-bg2);
    border: 1px solid var(--bv-hairline);
    color: var(--bv-ink2);
    display: inline-grid;
    place-items: center;
    cursor: pointer;
    transition: color .15s, background .15s;
}
.bv-theme-toggle:hover { color: var(--bv-ink); background: var(--bv-panel2); }
.bv-theme-toggle .bi-sun-fill,
.bv-theme-toggle .bi-moon-fill { font-size: 14px; }

/* New: user pill (replaces flat .topbar-user) */
.topbar-user {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    padding: 4px 10px 4px 4px !important;
    border-radius: 999px !important;
    background: var(--bv-bg2);
    border: 1px solid var(--bv-hairline);
    color: var(--bv-ink) !important;
}
.topbar-user:hover {
    background: var(--bv-panel2);
    color: var(--bv-ink) !important;
}
.topbar-user-avatar {
    width: 28px !important;
    height: 28px !important;
    background: var(--bv-bg2) !important;
    border: 1px solid var(--bv-hairline) !important;
}
.topbar-user-name { font-weight: 700 !important; font-size: 13px !important; }
.topbar-user .bi-chevron-down { color: var(--bv-ink3); }

/* ============= SIDEBAR (overrides bootstrap.css legacy rules) ============= */
.sidebar-container { top: 56px; height: calc(100vh - 56px); }
.sidebar {
    width: 220px;
    background: var(--bv-panel) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-right: 1px solid var(--bv-hairline) !important;
    padding: 14px 10px;
}
.sidebar-nav { gap: 2px; }
.sidebar-section-label {
    font-size: 10px !important;
    font-weight: 800 !important;
    letter-spacing: .12em !important;
    color: var(--bv-ink3) !important;
    padding: 14px 14px 6px !important;
}
.sidebar-section-label:first-child,
.sidebar-nav > .sidebar-section-label:first-of-type { padding-top: 4px !important; }

.sidebar-link {
    gap: 11px !important;
    padding: 9px 12px !important;
    margin: 0 !important;
    border-radius: 9px !important;
    border-left: none !important;
    color: var(--bv-ink2) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    transition: background .12s, color .12s;
}
.sidebar-link:hover {
    background: var(--bv-bg2) !important;
    color: var(--bv-ink) !important;
}
.sidebar-link.active {
    background: var(--bv-primary-soft) !important;
    color: var(--bv-primary-ink) !important;
    border: none !important;
    border-image: none !important;
}
.sidebar-link i { font-size: 17px !important; width: 17px !important; color: inherit; }

/* "SOON" chip on a sidebar item (use class .sidebar-link.is-soon) */
.sidebar-link.is-soon {
    cursor: default;
    opacity: .55;
}
.sidebar-link.is-soon:hover { background: transparent !important; color: var(--bv-ink2) !important; }
.bv-soon-chip {
    margin-left: auto;
    font-size: 9px;
    font-weight: 800;
    padding: 2px 6px;
    background: var(--bv-bg2);
    color: var(--bv-ink3);
    border-radius: 4px;
    letter-spacing: .04em;
    line-height: 1;
}

.sidebar-bottom { border-top: 1px solid var(--bv-hairline) !important; padding: 8px 0 0 !important; margin-top: 8px !important; }

/* ============= MAIN SECTION ============= */
.main-section { padding-top: 22px !important; padding-bottom: 28px !important; }

/* The persistent sidebar is position:fixed at 13rem (~208px) wide. Without
   matching offset on the site footer, the leftmost portion of footer
   content sits behind the sidebar. Apply the same desktop offset. */
@media (min-width: 768px) {
    body > footer { padding-left: 230px; }
}
@media (min-width: 768px) {
    .main-section {
        padding-left: 240px !important;
        margin-top: 0 !important;
    }
}

/* ============= CARDS ============= */
.card {
    background: var(--bv-panel) !important;
    border: 1px solid var(--bv-hairline) !important;
    border-radius: 12px !important;
    box-shadow: var(--bv-shadow);
    color: var(--bv-ink);
}
.card-body { color: var(--bv-ink); }
.text-muted { color: var(--bv-ink3) !important; }
.text-light  { color: var(--bv-ink) !important; }

/* Subtle 1px lift on interactive cards (replaces aggressive 4px lift). */
.bv-card-hover { transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease; }
.bv-card-hover:hover {
    transform: translateY(-1px);
    border-color: var(--bv-hairline2) !important;
    box-shadow: 0 6px 22px rgba(0,0,0,.32);
}

/* ============= WELCOME BANNER (dashboard) ============= */
.bv-welcome {
    background: var(--bv-panel);
    border: 1px solid var(--bv-hairline);
    border-radius: 12px;
    padding: 20px 22px;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 18px;
}
:root[data-theme="light"] .bv-welcome {
    background: var(--bv-panel);
    border-color: var(--bv-hairline);
}
.bv-welcome__avatar {
    width: 56px; height: 56px;
    border-radius: 50%;
    border: 1px solid var(--bv-hairline2);
    flex-shrink: 0;
    background: var(--bv-bg2);
}
.bv-welcome__title {
    font-family: var(--bv-font-display);
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -.015em;
    color: var(--bv-ink);
    line-height: 1.05;
}
.bv-welcome__meta {
    display: flex; gap: 18px;
    margin-top: 6px;
    flex-wrap: wrap;
}
.bv-welcome__meta-item {
    font-size: 12.5px;
    color: var(--bv-ink2);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* ============= QUICK ACTIONS ============= */
.bv-qa-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 18px; }
.bv-qa-tile {
    background: var(--bv-panel);
    border: 1px solid var(--bv-hairline);
    border-radius: 12px;
    padding: 22px 14px 18px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: var(--bv-ink);
    position: relative;
    transition: transform .12s, box-shadow .12s, border-color .12s;
    box-shadow: var(--bv-shadow);
}
.bv-qa-tile:hover {
    transform: translateY(-1px);
    border-color: var(--bv-hairline2);
    color: var(--bv-ink);
    text-decoration: none;
    box-shadow: 0 4px 18px rgba(0,0,0,.25);
}
.bv-qa-tile.is-soon { opacity: .65; cursor: default; }
.bv-qa-tile.is-soon:hover { transform: none; box-shadow: none; }
.bv-qa-icon {
    width: 52px; height: 52px;
    border-radius: 999px;
    display: grid; place-items: center;
    font-size: 22px;
}
.bv-qa-icon--primary,
.bv-qa-icon--good,
.bv-qa-icon--blue,
.bv-qa-icon--warn {
    background: var(--bv-bg2);
    color: var(--bv-ink2);
    border: 1px solid var(--bv-hairline);
}
.bv-qa-tile:hover .bv-qa-icon--primary,
.bv-qa-tile:hover .bv-qa-icon--good,
.bv-qa-tile:hover .bv-qa-icon--blue,
.bv-qa-tile:hover .bv-qa-icon--warn {
    color: var(--bv-ink);
}
.bv-qa-label { font-size: 13.5px; font-weight: 600; color: var(--bv-ink); letter-spacing: -.005em; }
.bv-qa-tile .bv-soon-chip { position: absolute; top: 8px; right: 8px; }

/* ============= STREAK ============= */
.bv-streak {
    background: var(--bv-panel);
    border: 1px solid var(--bv-hairline);
    border-radius: 12px;
    padding: 16px 18px;
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 18px;
}
.bv-streak__icon {
    width: 40px; height: 40px;
    border-radius: 999px;
    background: var(--bv-bg2);
    color: var(--bv-ink2);
    border: 1px solid var(--bv-hairline);
    display: grid; place-items: center;
    font-size: 16px;
    flex-shrink: 0;
}
.bv-streak__eyebrow {
    font-family: var(--bv-font-mono);
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--bv-ink3);
    margin-bottom: 2px;
}
.bv-streak__title {
    font-family: var(--bv-font-display);
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--bv-ink);
    line-height: 1.1;
}
.bv-streak__reward { font-size: 13px; color: var(--bv-ink2); font-weight: 400; margin-top: 4px; }
.bv-streak__next-label {
    font-family: var(--bv-font-mono);
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--bv-ink3);
}
.bv-streak__next-value {
    font-family: var(--bv-font-display);
    font-size: 14px;
    font-weight: 700;
    color: var(--bv-ink);
    margin-top: 2px;
}

/* ============= SECTION HEADERS (dashboard sections) ============= */
.bv-section-h {
    font-family: var(--bv-font-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--bv-ink2);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 0;
}
.bv-section-h .bi { display: none; }
.bv-section-link {
    font-family: var(--bv-font-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .04em;
    text-transform: lowercase;
    color: var(--bv-ink3);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 3px;
}
.bv-section-link:hover { color: var(--bv-ink); }

/* ============= TAGS ============= */
.bv-tag {
    display: inline-block;
    padding: 3px 9px;
    border-radius: 5px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .02em;
    background: var(--bv-bg2);
    color: var(--bv-ink2);
}
.bv-tag--primary { background: var(--bv-primary-soft); color: var(--bv-primary-ink); }
.bv-tag--good    { background: var(--bv-tag-good-bg);  color: var(--bv-good); }
.bv-tag--warn    { background: var(--bv-tag-warn-bg);  color: var(--bv-warn); }
.bv-tag--blue    { background: var(--bv-tag-blue-bg);  color: var(--bv-primary-alt); }
.bv-tag--danger  { background: rgba(239,68,68,.14);    color: var(--bv-danger); }

/* ============= BUTTONS ============= */
.btn-primary,
.bv-btn--primary {
    background: var(--bv-primary) !important;
    border: 1px solid var(--bv-primary) !important;
    color: #fff !important;
    box-shadow: 0 1px 1px rgba(0,0,0,.12);
    font-weight: 600;
}
.btn-primary:hover,
.bv-btn--primary:hover {
    background: #6b58ea !important;
    border-color: #6b58ea !important;
    color: #fff !important;
}

.btn-outline-light {
    color: var(--bv-ink) !important;
    border-color: var(--bv-hairline2) !important;
    background: transparent !important;
}
.btn-outline-light:hover {
    background: var(--bv-bg2) !important;
    color: var(--bv-ink) !important;
    border-color: var(--bv-hairline2) !important;
}

/* ============= MOBILE NAV ============= */
.mobile-nav { background: var(--bv-panel) !important; border-color: var(--bv-hairline) !important; }
.mobile-nav-link { color: var(--bv-ink2) !important; }
.mobile-nav-link-active { color: var(--bv-primary-ink) !important; }

/* ============= ADVERTISEMENT (top of main) ============= */
/* Reduce visual weight of the ad slot; no bg, just centered. */
main.main-section > .d-flex.justify-content-center { padding-top: 14px; padding-bottom: 4px; }
main.main-section > .d-flex.justify-content-center .text-muted { color: var(--bv-ink3) !important; }

/* ============= MISC ============= */
hr { border-color: var(--bv-hairline) !important; opacity: 1; }
.border-bottom { border-color: var(--bv-hairline) !important; }
.dropdown-menu {
    background: var(--bv-panel) !important;
    border: 1px solid var(--bv-hairline) !important;
    color: var(--bv-ink) !important;
}
.dropdown-item { color: var(--bv-ink) !important; }
.dropdown-item:hover { background: var(--bv-bg2) !important; color: var(--bv-ink) !important; }
.dropdown-divider { border-color: var(--bv-hairline) !important; }
.notification-dropdown {
    background: var(--bv-panel) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* Forms in the new theme */
.form-control {
    background: var(--bv-bg2) !important;
    border: 1px solid var(--bv-hairline) !important;
    color: var(--bv-ink) !important;
    border-radius: 8px;
}
.form-control:focus {
    background: var(--bv-bg2) !important;
    border-color: var(--bv-hairline2) !important;
    box-shadow: 0 0 0 3px rgba(124,107,240,.10) !important;
    color: var(--bv-ink) !important;
}
.form-control::placeholder { color: var(--bv-ink3) !important; }

/* Subtle text-xs / text-sm helpers used by the dashboard */
.text-xs { font-size: 11px; }
.text-sm { font-size: 13px; }

/* Bootstrap 5.0/5.1 doesn't ship min-w-0  -  provide it. */
.min-w-0 { min-width: 0 !important; }

/* ============= MARKETPLACE AD ROW (top of every page) =============
   Random rotating marketplace item, labeled clearly as an ad so users
   don't read it as curated/sponsored content. The "Ad" chip on the
   left is the new key affordance  -  same convention as Reddit's
   "promoted" or NYT's "ad" tag. */
.bv-promo-ad {
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--bv-panel);
    border: 1px solid var(--bv-hairline);
    border-radius: 12px;
    padding: 10px 12px;
    margin: 0 0 18px;
    text-decoration: none;
    color: var(--bv-ink);
    transition: border-color .12s;
}
.bv-promo-ad:hover {
    border-color: var(--bv-hairline2);
    color: var(--bv-ink);
    text-decoration: none;
}
.bv-promo-ad__chip {
    flex-shrink: 0;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--bv-ink3);
    background: var(--bv-bg2);
    border: 1px solid var(--bv-hairline);
    padding: 3px 8px;
    border-radius: 4px;
    cursor: help;
}
.bv-promo-ad__chip--sponsored {
    color: #a78bfa;
    background: rgba(167, 139, 250, 0.10);
    border-color: rgba(167, 139, 250, 0.22);
}
.bv-promo-ad__thumb {
    width: 48px; height: 48px;
    border-radius: 8px;
    background: var(--bv-bg2);
    display: grid;
    place-items: center;
    flex-shrink: 0;
    overflow: hidden;
}
.bv-promo-ad__thumb img {
    max-width: 90%;
    max-height: 90%;
    object-fit: contain;
}
.bv-promo-ad__body {
    flex: 1;
    min-width: 0;
}
.bv-promo-ad__name {
    font-size: 15px;
    font-weight: 800;
    color: var(--bv-ink);
    letter-spacing: -.01em;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.bv-promo-ad__sub {
    font-size: 12px;
    color: var(--bv-ink2);
    font-weight: 600;
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.bv-promo-ad__sub strong {
    color: var(--bv-ink);
    font-weight: 700;
}
/* Right cluster: price pill + CTA button vertically aligned. */
.bv-promo-ad__right {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}
.bv-promo-ad__price {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    font-weight: 800;
    padding: 5px 10px;
    border-radius: 999px;
    white-space: nowrap;
    line-height: 1;
}
.bv-promo-ad__price .bi,
.bv-promo-ad__price img { display: inline-block; }
.bv-promo-ad__price--cash  { background: rgba(70,199,128,0.12);  color: var(--bv-good); }
.bv-promo-ad__price--coins { background: rgba(255,193,7,0.12);   color: var(--bv-warn); }
.bv-promo-ad__price--free  { background: rgba(70,199,128,0.12);  color: var(--bv-good); }
.bv-promo-ad__cta {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--bv-primary);
    color: #fff;
    padding: 7px 14px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 700;
    transition: background .12s;
}
.bv-promo-ad:hover .bv-promo-ad__cta { background: var(--bv-primary-dark); color: #fff; }
@media (max-width: 600px) {
    .bv-promo-ad__price { display: none; }
    .bv-promo-ad__cta { padding: 6px 10px; }
    .bv-promo-ad { padding: 8px 10px; }
}

/* ================================================================
   INNER PAGE COMPONENTS  -  Phase 2
   Shared chrome for Marketplace / Forum / Communities / People /
   Leaderboards.
   ================================================================ */

/* Page header  -  h1 38px font-800 tracking -.025em + subtitle 14px ink2,
   with optional right-side actions. */
.bv-page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 22px;
    flex-wrap: wrap;
}
.bv-page-header__title {
    font-size: clamp(28px, 4vw, 38px);
    font-weight: 800;
    margin: 0;
    letter-spacing: -.025em;
    color: var(--bv-ink);
    line-height: 1.05;
}
.bv-page-header__subtitle {
    font-size: 14px;
    color: var(--bv-ink2);
    margin-top: 6px;
    font-weight: 500;
}
.bv-page-header__actions { display: inline-flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* BV button system (use as a or button). */
.bv-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 16px;
    font-size: 14px;
    font-weight: 700;
    border-radius: 8px;
    cursor: pointer;
    text-decoration: none;
    border: none;
    transition: filter .12s, background .12s, color .12s, border-color .12s;
    white-space: nowrap;
    font-family: inherit;
    line-height: 1.2;
}
.bv-btn--sm  { padding: 6px 12px; font-size: 13px; border-radius: 7px; }
.bv-btn--lg  { padding: 12px 22px; font-size: 15px; border-radius: 10px; }
/* Flat primary, brand says "no glow". Box-shadow stays neutral 0 1px 1px. */
.bv-btn--primary {
    background: var(--bv-primary);
    color: #fff;
    box-shadow: 0 1px 1px rgba(0,0,0,.12);
}
.bv-btn--primary:hover {
    background: var(--bv-primary-dark);
    color: #fff;
}
.bv-btn--solid { background: var(--bv-primary); color: #fff; }
.bv-btn--solid:hover { background: var(--bv-primary-dark); color: #fff; }
.bv-btn--ghost { background: transparent; color: var(--bv-ink); border: 1px solid var(--bv-hairline2); }
.bv-btn--ghost:hover { background: var(--bv-bg2); color: var(--bv-ink); }
.bv-btn--soft  { background: var(--bv-primary-soft); color: var(--bv-primary-ink); }
.bv-btn--soft:hover { filter: brightness(1.04); color: var(--bv-primary-ink); }
.bv-btn--outline { background: transparent; color: var(--bv-ink2); border: 1px solid var(--bv-hairline2); }
.bv-btn--outline:hover { background: var(--bv-bg2); color: var(--bv-ink); }
.bv-btn--block { display: flex; width: 100%; justify-content: center; }

/* Underline tab row (Marketplace, People). */
.bv-tabs {
    display: flex;
    gap: 0;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--bv-hairline);
    flex-wrap: wrap;
}
.bv-tab {
    background: none;
    border: none;
    padding: 10px 4px;
    margin: 0 18px 0 0;
    cursor: pointer;
    font-size: 14px;
    font-weight: 700;
    color: var(--bv-ink2);
    border-bottom: 2px solid transparent;
    text-decoration: none;
    transition: color .12s, border-color .12s;
}
.bv-tab:hover { color: var(--bv-ink); text-decoration: none; }
.bv-tab.is-active { color: var(--bv-primary); border-bottom-color: var(--bv-primary); }
.bv-tab__count { color: var(--bv-ink3); font-weight: 600; margin-left: 6px; }

/* Pill row (Forum categories). */
.bv-pills { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 16px; }
.bv-pill {
    background: var(--bv-panel);
    color: var(--bv-ink2);
    border: 1px solid var(--bv-hairline);
    padding: 7px 14px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: background .12s, color .12s, border-color .12s;
}
.bv-pill:hover { color: var(--bv-ink); border-color: var(--bv-hairline2); text-decoration: none; }
.bv-pill.is-active { background: var(--bv-primary); color: #fff; border-color: var(--bv-primary); }
.bv-pill.is-active:hover { color: #fff; }
.bv-pill__count { opacity: .7; font-weight: 600; margin-left: 4px; }

/* Segmented switcher (Communities, Leaderboards period). */
.bv-segmented {
    display: inline-flex;
    gap: 4px;
    padding: 4px;
    background: var(--bv-bg2);
    border-radius: 10px;
}
.bv-segmented__btn {
    background: transparent;
    color: var(--bv-ink2);
    border: none;
    padding: 7px 14px;
    border-radius: 7px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
    font-family: inherit;
    transition: background .12s, color .12s;
}
.bv-segmented__btn:hover { color: var(--bv-ink); text-decoration: none; }
.bv-segmented__btn.is-active {
    background: var(--bv-panel);
    color: var(--bv-ink);
    box-shadow: var(--bv-shadow);
}

/* Sort pills (Marketplace)  -  like underline tabs but small + rounded. */
.bv-sort {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.bv-sort__label { font-size: 11px; color: var(--bv-ink3); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.bv-sort__btn {
    background: transparent;
    color: var(--bv-ink2);
    border: 1px solid var(--bv-hairline);
    padding: 5px 11px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
    text-transform: capitalize;
}
.bv-sort__btn.is-active { background: var(--bv-primary-soft); color: var(--bv-primary-ink); border-color: transparent; }

/* Marketplace feature banner  -  flat primary, no gradient ramp. */
.bv-feature-banner {
    background: var(--bv-primary);
    border-radius: 16px;
    padding: 24px 28px;
    color: #fff;
    margin-bottom: 22px;
    display: flex;
    align-items: center;
    gap: 24px;
    position: relative;
    overflow: hidden;
}
.bv-feature-banner::after {
    content: "";
    position: absolute;
    top: -30px; right: -30px;
    width: 160px; height: 160px;
    border-radius: 50%;
    background: rgba(255,255,255,.08);
}
.bv-feature-banner__eyebrow {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .1em;
    opacity: .85;
    margin-bottom: 6px;
}
.bv-feature-banner__title {
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -.02em;
}
.bv-feature-banner__sub {
    font-size: 13px;
    opacity: .85;
    margin-top: 4px;
}
.bv-feature-banner__body { flex: 1; position: relative; z-index: 1; min-width: 0; }
.bv-feature-banner__cta {
    background: #fff;
    color: var(--bv-primary-ink);
    position: relative;
    z-index: 1;
    box-shadow: none;
}
.bv-feature-banner__cta:hover { background: #f5f5fa; color: var(--bv-primary-ink); }

/* Marketplace item card  -  overrides legacy card styling within grid. */
.bv-item-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
@media (max-width: 992px) { .bv-item-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 768px) { .bv-item-grid { grid-template-columns: repeat(2, 1fr); } }
.bv-item-card {
    background: var(--bv-panel);
    border: 1px solid var(--bv-hairline);
    border-radius: 12px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    text-decoration: none;
    transition: transform .12s, border-color .12s, box-shadow .12s;
    color: var(--bv-ink);
    height: 100%;
}
.bv-item-card:hover {
    transform: translateY(-1px);
    border-color: var(--bv-hairline2);
    box-shadow: 0 6px 22px rgba(0,0,0,.32);
    color: var(--bv-ink);
    text-decoration: none;
}
.bv-item-card__thumb {
    background: var(--bv-bg2);
    border-radius: 10px;
    display: grid;
    place-items: center;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    position: relative;
}
.bv-item-card__thumb img { max-width: 80%; max-height: 80%; object-fit: contain; }
.bv-item-card__title-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    margin-top: 4px;
}
.bv-item-card__name {
    font-size: 13px;
    font-weight: 800;
    color: var(--bv-ink);
    letter-spacing: -.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Price slot on the marketplace card. Matches the calm text-only
 * style of the "Free" badge - no chunky pill, no icon background. The
 * cash/coins distinction comes from a small inline icon (11px) +
 * subtle currency tint, not from a colored bar. Visual weight matches
 * .bv-item-card__name so the title and price read as a balanced pair.
 */
.bv-item-card__price {
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    color: var(--bv-ink);
}
.bv-item-card__price + .bv-item-card__price { margin-left: 6px; }
.bv-item-card__price--cash  { color: var(--bv-ink); }
.bv-item-card__price--cash i { color: var(--bv-cash); font-size: 12px; }
.bv-item-card__price--coins { color: var(--bv-ink); }
.bv-item-card__price--coins img { width: 11px; height: 11px; }
.bv-item-card__price--free  { color: var(--bv-good); }
.bv-item-card__meta {
    font-size: 11px;
    color: var(--bv-ink3);
    font-weight: 600;
    display: flex;
    justify-content: space-between;
    gap: 8px;
}

/* Forum thread card row. */
.bv-thread-list { display: flex; flex-direction: column; }
.bv-thread-row {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px 20px;
    border-top: 1px solid var(--bv-hairline);
    text-decoration: none;
    color: var(--bv-ink);
    transition: background .12s;
}
.bv-thread-row:first-child { border-top: none; }
.bv-thread-row:hover { background: var(--bv-bg2); color: var(--bv-ink); text-decoration: none; }
.bv-thread-row__avatar { width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; }
.bv-thread-row__body { flex: 1; min-width: 0; }
.bv-thread-row__tags { display: flex; align-items: center; gap: 6px; margin-bottom: 3px; flex-wrap: wrap; }
.bv-thread-row__title {
    font-size: 16px;
    font-weight: 800;
    color: var(--bv-ink);
    letter-spacing: -.01em;
    margin-bottom: 3px;
}
.bv-thread-row__preview {
    font-size: 13px;
    color: var(--bv-ink2);
    line-height: 1.4;
    margin-bottom: 6px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.bv-thread-row__meta {
    font-size: 12px;
    color: var(--bv-ink3);
    font-weight: 600;
}
.bv-thread-row__counts { text-align: right; min-width: 80px; padding-top: 4px; flex-shrink: 0; }
.bv-thread-row__counts-n { font-size: 16px; font-weight: 800; color: var(--bv-ink); line-height: 1; }
.bv-thread-row__counts-l { font-size: 11px; color: var(--bv-ink3); font-weight: 700; letter-spacing: .04em; margin-top: 4px; }
.bv-thread-row__counts-views { font-size: 11px; color: var(--bv-ink3); margin-top: 2px; }

/* Compact label header used inside side cards. */
.bv-side-h {
    font-size: 11px;
    font-weight: 800;
    color: var(--bv-ink);
    letter-spacing: .08em;
    margin-bottom: 10px;
    text-transform: uppercase;
}
.bv-stat-row {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    font-size: 13px;
    color: var(--bv-ink2);
}
.bv-stat-row strong { color: var(--bv-ink); }

/* Communities  -  clan card */
.bv-clan-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 992px) { .bv-clan-grid { grid-template-columns: repeat(2, 1fr); } }
/* Mobile (≤600px) - keep 2 columns so phones don't have to scroll
   through one giant card at a time. Cards are compact (tag tile +
   name + 1-line motto + small row), so 2-up is the right density.
   Drop gap a hair to 10px so the cards don't crowd the edges. */
@media (max-width: 600px) { .bv-clan-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; } }
/* Tiny screens (≤380px) - fall back to single column so the card
   chrome (avatar tile + name) doesn't get squeezed unreadable. */
@media (max-width: 380px) { .bv-clan-grid { grid-template-columns: 1fr; } }
.bv-clan-card {
    background: var(--bv-panel);
    border: 1px solid var(--bv-hairline);
    border-radius: 12px;
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    text-decoration: none;
    color: var(--bv-ink);
    transition: border-color .12s;
}
.bv-clan-card:hover { border-color: var(--bv-hairline2); color: var(--bv-ink); text-decoration: none; }
.bv-clan-card__head { display: flex; align-items: flex-start; gap: 12px; }
.bv-clan-card__tag {
    width: 56px;
    height: 56px;
    border-radius: 12px;
    background: var(--bv-bg2);
    color: var(--bv-ink2);
    text-decoration: none;
    display: grid;
    place-items: center;
    font-weight: 900;
    font-size: 14px;
    letter-spacing: .04em;
    flex-shrink: 0;
    overflow: hidden;
}
.bv-clan-card__name { font-size: 16px; font-weight: 800; color: var(--bv-ink); letter-spacing: -.01em; }
.bv-clan-card__meta { font-size: 12px; color: var(--bv-ink3); font-weight: 600; }
.bv-clan-card__motto { font-size: 13px; color: var(--bv-ink2); font-style: italic; line-height: 1.4; }
.bv-clan-card__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 11.5px;
    font-weight: 700;
}
.bv-clan-card__online { color: var(--bv-good); display: inline-flex; align-items: center; gap: 5px; }
.bv-clan-card__online::before {
    content: "";
    width: 6px; height: 6px;
    border-radius: 999px;
    background: var(--bv-good);
    display: inline-block;
}

/* People page  -  featured spotlight */
/* Featured-player spotlight. Was a banner+overlap-avatar trick that broke
   at narrow widths and produced a giant empty purple block. Now: single
   panel with a thin primary tint at top, content laid out cleanly. */
.bv-spotlight {
    background: var(--bv-panel);
    border: 1px solid rgba(124,107,240,.28);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: var(--bv-shadow);
    position: relative;
}
/* Removed legacy ::before tint  -  the spotlight surface now uses the
   panel token directly with a hairline border, no overlay gradient. */
.bv-spotlight__banner { display: none; } /* legacy, no longer used */
.bv-spotlight__chip {
    position: absolute;
    top: 14px; right: 16px;
    background: var(--bv-primary);
    color: #fff;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .12em;
    white-space: nowrap;
    z-index: 2;
}
.bv-spotlight__body {
    position: relative;
    z-index: 1;
    padding: 22px 24px 22px;
}
.bv-spotlight__row {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
    margin-top: 0;
}
.bv-spotlight__avatar {
    width: 84px; height: 84px;
    border-radius: 50%;
    border: 3px solid var(--bv-panel);
    box-shadow: var(--bv-shadow);
    background: var(--bv-bg2);
    object-fit: cover;
    flex-shrink: 0;
}
.bv-spotlight__name {
    font-size: 24px;
    font-weight: 800;
    color: var(--bv-ink);
    letter-spacing: -.02em;
    line-height: 1.1;
}
.bv-spotlight__sub  { font-size: 13.5px; color: var(--bv-ink2); margin-top: 4px; }
.bv-spotlight__actions {
    display: inline-flex;
    gap: 8px;
    margin-left: auto;
    flex-shrink: 0;
}
.bv-spotlight__stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid var(--bv-hairline);
}
.bv-spotlight__stat {
    background: var(--bv-bg2);
    border-radius: 10px;
    padding: 12px 14px;
}
.bv-spotlight__stat-v { font-size: 22px; font-weight: 800; color: var(--bv-ink); letter-spacing: -.02em; }
.bv-spotlight__stat-l { font-size: 10.5px; color: var(--bv-ink3); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; margin-top: 2px; }
@media (max-width: 768px) {
    .bv-spotlight__stats { grid-template-columns: repeat(2, 1fr); }
    .bv-spotlight__actions { margin-left: 0; width: 100%; }
    .bv-spotlight__actions .bv-btn { flex: 1; justify-content: center; }
}

/* People page  -  maker card grid */
.bv-player-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
@media (max-width: 992px) { .bv-player-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 768px) { .bv-player-grid { grid-template-columns: repeat(2, 1fr); } }
.bv-player-card {
    background: var(--bv-panel);
    border: 1px solid var(--bv-hairline);
    border-radius: 12px;
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    box-shadow: var(--bv-shadow);
    transition: border-color .12s, transform .12s;
}
.bv-player-card:hover { border-color: var(--bv-hairline2); transform: translateY(-1px); }
.bv-player-card__avatar-wrap { position: relative; align-self: flex-start; }
.bv-player-card__avatar { width: 56px; height: 56px; border-radius: 50%; flex-shrink: 0; background: var(--bv-bg2); object-fit: cover; display: block; }
.bv-player-card__name { font-size: 15px; font-weight: 800; color: var(--bv-ink); margin-top: 4px; letter-spacing: -.01em; display: flex; align-items: center; gap: 5px; }
.bv-player-card__name a { color: inherit; text-decoration: none; }
.bv-online-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--bv-ink3); flex-shrink: 0; }
.bv-online-dot.is-online { background: var(--bv-good); }
.bv-player-card__bio  { font-size: 12.5px; color: var(--bv-ink2); line-height: 1.4; }
.bv-player-card__meta { font-size: 11px; color: var(--bv-ink3); font-weight: 600; }
.bv-player-card__action { margin-top: 4px; display: flex; gap: 6px; }
.bv-player-card__action .bv-btn { flex: 1; justify-content: center; }

/* Real-earned badges. Show only when achieved. */
.bv-player-card__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: -2px;
}
.bv-player-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10.5px;
    font-weight: 800;
    padding: 2px 7px;
    border-radius: 999px;
    letter-spacing: .02em;
    background: var(--bv-bg2);
    border: 1px solid var(--bv-hairline);
    color: var(--bv-ink2);
}
.bv-player-badge i { font-size: 10px; }
.bv-player-badge--mod     { background: rgba(239,68,68,.14); border-color: rgba(239,68,68,.28); color: #ef4444; }
.bv-player-badge--creator { background: rgba(70,199,128,.14); border-color: rgba(70,199,128,.28); color: var(--bv-good); }
.bv-player-badge--writer  { background: rgba(61,158,255,.14); border-color: rgba(61,158,255,.28); color: var(--bv-primary-alt); }
.bv-player-badge--vet     { background: rgba(255,193,7,.14);  border-color: rgba(255,193,7,.28);  color: var(--bv-warn); }

.bv-player-card__stats {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
    font-size: 11.5px;
    color: var(--bv-ink3);
    font-weight: 600;
}
.bv-player-card__stats strong { color: var(--bv-ink); font-weight: 800; }
.bv-player-card__action .bv-btn { width: 100%; justify-content: center; }

/* Leaderboards  -  board selector cards */
.bv-board-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 24px; }
@media (max-width: 768px) { .bv-board-grid { grid-template-columns: repeat(2, 1fr); } }
.bv-board-card {
    background: var(--bv-panel);
    border: 1px solid var(--bv-hairline);
    border-radius: 14px;
    padding: 16px 18px;
    cursor: pointer;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 4px;
    box-shadow: var(--bv-shadow);
    color: var(--bv-ink);
    text-decoration: none;
    font-family: inherit;
    transition: border-color .12s, transform .12s;
}
.bv-board-card:hover { border-color: var(--bv-hairline2); transform: translateY(-1px); color: var(--bv-ink); text-decoration: none; }
.bv-board-card.is-active { background: var(--bv-primary); border-color: var(--bv-primary); color: #fff; box-shadow: none; }
.bv-board-card.is-active:hover { color: #fff; }
.bv-board-card__metric { font-size: 22px; font-weight: 900; }
.bv-board-card__label  { font-size: 14px; font-weight: 800; letter-spacing: -.01em; }
.bv-board-card__desc   { font-size: 11px; font-weight: 600; opacity: .65; }
.bv-board-card.is-active .bv-board-card__desc { opacity: .85; }

/* Leaderboards  -  podium */
.bv-podium { display: grid; grid-template-columns: 1fr 1.1fr 1fr; gap: 10px; align-items: flex-end; margin-bottom: 16px; }
@media (max-width: 600px) { .bv-podium { grid-template-columns: 1fr; } }
.bv-podium__card {
    background: var(--bv-panel);
    border: 1px solid var(--bv-hairline);
    border-radius: 12px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    position: relative;
    text-align: center;
    box-shadow: var(--bv-shadow);
    text-decoration: none;
    color: var(--bv-ink);
}
.bv-podium__card.is-first { border: 2px solid var(--bv-primary); }
.bv-podium__rank {
    position: absolute;
    top: -10px; left: 50%;
    transform: translateX(-50%);
    background: var(--bv-ink2);
    color: #fff;
    border-radius: 999px;
    padding: 3px 11px;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .04em;
}
.bv-podium__card.is-first .bv-podium__rank { background: var(--bv-primary); }
.bv-podium__avatar { width: 64px; height: 64px; border-radius: 50%; background: var(--bv-bg2); object-fit: cover; }
.bv-podium__name   { font-size: 15px; font-weight: 800; color: var(--bv-ink); }
.bv-podium__name a { color: inherit; text-decoration: none; }
.bv-podium__score  { font-size: 20px; font-weight: 900; color: var(--bv-primary); letter-spacing: -.02em; margin-top: 4px; }
.bv-podium__label  { font-size: 10px; color: var(--bv-ink3); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; margin-top: 2px; }

/* Leaderboards  -  long ranked list */
.bv-rank-list { display: flex; flex-direction: column; }
.bv-rank-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 18px;
    border-top: 1px solid var(--bv-hairline);
}
.bv-rank-row:first-child { border-top: none; }
.bv-rank-row__rank { width: 30px; font-size: 14px; font-weight: 800; color: var(--bv-ink3); font-family: var(--bv-font-mono); }
.bv-rank-row__avatar { width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0; background: var(--bv-bg2); object-fit: cover; }
.bv-rank-row__name { flex: 1; font-size: 14px; font-weight: 700; color: var(--bv-ink); min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bv-rank-row__name a { color: inherit; text-decoration: none; }
.bv-rank-row__score { font-size: 14px; font-weight: 800; color: var(--bv-primary); min-width: 90px; text-align: right; }

/* Leaderboards  -  your rank card (right side) */
.bv-yourrank {
    background: var(--bv-panel);
    border: 2px solid var(--bv-primary);
    border-radius: 12px;
    padding: 18px;
    box-shadow: var(--bv-shadow);
    margin-bottom: 14px;
}
.bv-yourrank__h { font-size: 11px; font-weight: 800; color: var(--bv-primary); letter-spacing: .08em; margin-bottom: 10px; text-transform: uppercase; }
.bv-yourrank__row { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.bv-yourrank__avatar { width: 44px; height: 44px; border-radius: 50%; }
.bv-yourrank__name { font-size: 14px; font-weight: 800; color: var(--bv-ink); }
.bv-yourrank__sub  { font-size: 12px; color: var(--bv-ink3); }
.bv-yourrank__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.bv-yourrank__stat { background: var(--bv-bg2); border-radius: 8px; padding: 10px 12px; }
.bv-yourrank__stat-v { font-size: 22px; font-weight: 900; color: var(--bv-ink); letter-spacing: -.02em; }
.bv-yourrank__stat-v--primary { color: var(--bv-primary); }
.bv-yourrank__stat-l { font-size: 10px; color: var(--bv-ink3); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; margin-top: 2px; }

/* Filter rail */
.bv-filter-rail { position: sticky; top: 80px; }

/* Forum stats / contributors mini cards (right rail of forum) */
.bv-side-card {
    background: var(--bv-panel);
    border: 1px solid var(--bv-hairline);
    border-radius: 12px;
    padding: 16px;
    box-shadow: var(--bv-shadow);
    margin-bottom: 14px;
}
.bv-side-card:last-child { margin-bottom: 0; }

/* Layout helpers used by inner pages */
.bv-grid-main-rail { display: grid; grid-template-columns: 1fr 280px; gap: 22px; }
.bv-grid-rail-main { display: grid; grid-template-columns: 220px 1fr; gap: 22px; }
@media (max-width: 992px) {
    .bv-grid-main-rail,
    .bv-grid-rail-main { grid-template-columns: 1fr; }
    .bv-filter-rail { position: static; }
}

/* Rounded form inputs (for marketplace search etc) match new theme */
.input-group-text {
    background: var(--bv-bg2) !important;
    border: 1px solid var(--bv-hairline) !important;
    color: var(--bv-ink3) !important;
}

/* Marketplace filter rail  -  actually-functional checkbox styling.
   Hides the native input and uses a custom check via the sibling span. */
.bv-filter-rail__group {
    font-family: var(--bv-font-mono);
    font-size: 11px;
    font-weight: 800;
    color: var(--bv-ink2);
    letter-spacing: .14em;
    text-transform: uppercase;
    margin-bottom: 8px;
}
.bv-filter-rail__opt {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 5px 0;
    font-size: 13px;
    color: var(--bv-ink2);
    cursor: pointer;
    user-select: none;
    transition: color .12s;
}
.bv-filter-rail__opt:hover { color: var(--bv-ink); }
.bv-filter-rail__opt input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.bv-filter-rail__check {
    width: 16px; height: 16px;
    border-radius: 4px;
    border: 1.5px solid var(--bv-hairline2);
    display: inline-grid;
    place-items: center;
    flex-shrink: 0;
    transition: background .12s, border-color .12s;
    position: relative;
}
.bv-filter-rail__check::after {
    content: "";
    width: 9px; height: 9px;
    background: var(--bv-primary);
    border-radius: 2px;
    transform: scale(0);
    transition: transform .12s;
}
.bv-filter-rail__opt input:checked + .bv-filter-rail__check {
    border-color: var(--bv-primary);
    background: var(--bv-primary-soft);
}
.bv-filter-rail__opt input:checked + .bv-filter-rail__check::after {
    transform: scale(1);
}
.bv-filter-rail__opt input:checked ~ span:not(.bv-filter-rail__check) {
    color: var(--bv-ink);
    font-weight: 700;
}

/* Topic cards (forum browser) reskin */
.topic-row { color: var(--bv-ink); transition: background .12s; }
.topic-row:hover { background: var(--bv-bg2); }
.topic-row .border-bottom.border-secondary { border-color: var(--bv-hairline) !important; }

/* ============================================================
   FORUM  -  Topic Board layout (forum/index.blade.php)
   ============================================================ */

/* Two-column shell: persistent topic sidebar + main column. */
.bv-forum-shell {
    display: grid;
    grid-template-columns: 320px minmax(0, 1fr);
    gap: 22px;
    align-items: flex-start;
}
@media (max-width: 992px) {
    .bv-forum-shell { grid-template-columns: 1fr; }
}

/* Eyebrow above the page title (TOPIC BOARD / GENERAL DISCUSSION) */
.bv-eyebrow {
    display: inline-block;
    font-family: var(--bv-font-mono);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .14em;
    color: var(--bv-primary-ink);
    text-transform: uppercase;
    margin-bottom: 4px;
}
.bv-eyebrow--chip {
    background: var(--bv-primary-soft);
    border-radius: 999px;
    padding: 4px 10px;
    color: var(--bv-primary-ink);
    letter-spacing: .12em;
    font-size: 10.5px;
}

/* Topic sidebar */
.bv-topic-sidebar {
    background: var(--bv-panel);
    border: 1px solid var(--bv-hairline);
    border-radius: 14px;
    padding: 14px 12px 8px;
    box-shadow: var(--bv-shadow);
    position: sticky;
    top: 16px;
}
.bv-topic-sidebar__group {
    margin-top: 14px;
}
.bv-topic-sidebar__group:first-child { margin-top: 0; }
.bv-topic-sidebar__label {
    font-family: var(--bv-font-mono);
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .14em;
    color: var(--bv-ink3);
    text-transform: uppercase;
    padding: 6px 10px 8px;
}
.bv-topic-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 10px;
    border-radius: 10px;
    text-decoration: none;
    color: var(--bv-ink);
    margin-bottom: 2px;
    transition: background .12s;
    position: relative;
}
.bv-topic-row:hover {
    background: var(--bv-bg2);
    color: var(--bv-ink);
}
.bv-topic-row.is-active {
    background: var(--bv-primary-soft);
    color: var(--bv-primary-ink);
}
.bv-topic-row.is-active .bv-topic-row__name { color: var(--bv-primary-ink); }
.bv-topic-row__icon {
    width: 36px;
    height: 36px;
    border-radius: 9px;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    font-size: 16px;
    background: var(--bv-bg2);
    color: var(--bv-ink2);
}
.bv-topic-row.is-active .bv-topic-row__icon {
    background: var(--bv-primary-soft);
    color: var(--bv-primary-ink);
}
.bv-topic-row__name {
    flex: 1;
    min-width: 0;
    font-size: 14px;
    font-weight: 700;
    color: var(--bv-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    letter-spacing: -.005em;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.bv-topic-row__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--bv-danger);
    display: inline-block;
}
.bv-topic-row__count {
    font-size: 11.5px;
    color: var(--bv-ink3);
    font-weight: 700;
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
}
.bv-topic-row.is-active .bv-topic-row__count { color: var(--bv-primary-ink); }
.bv-topic-sidebar__footer {
    border-top: 1px solid var(--bv-hairline);
    margin-top: 10px;
    padding: 12px 10px 8px;
    font-size: 13px;
    font-weight: 700;
    color: var(--bv-ink3);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.bv-topic-sidebar__footer:hover { color: var(--bv-primary-ink); }

/* Featured topic banner (right column, above thread list).
   Composes a theme-aware panel base with the topic-color tint as an
   overlay  -  was a single rgba gradient that read fine in dark and
   washed out the white text against a light tint. */
.bv-topic-banner {
    background-color: var(--bv-panel);
    border: 1px solid var(--bv-hairline);
    border-radius: 14px;
    padding: 22px 24px;
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 18px;
}
.bv-topic-banner__icon {
    width: 64px;
    height: 64px;
    border-radius: 14px;
    background: var(--bv-primary);
    display: grid;
    place-items: center;
    color: #fff;
    font-size: 28px;
    flex-shrink: 0;
    box-shadow: 0 1px 1px rgba(0,0,0,.12);
}
.bv-topic-banner__name {
    font-size: 22px;
    font-weight: 800;
    color: var(--bv-ink);
    letter-spacing: -.015em;
    margin: 0 0 4px;
}
.bv-topic-banner__sub {
    font-size: 13px;
    color: var(--bv-ink2);
    line-height: 1.45;
}

/* Featured-thread variant: real OP avatar + topic pill + reply count. */
.bv-topic-banner--thread {
    text-decoration: none;
    color: inherit;
    transition: transform .12s ease, border-color .12s ease;
}
.bv-topic-banner--thread:hover {
    transform: translateY(-1px);
    color: inherit;
}
.bv-topic-banner__avatar {
    width: 56px; height: 56px;
    border-radius: 50%;
    background: var(--bv-bg2);
    object-fit: cover;
    flex-shrink: 0;
}
.bv-topic-banner__pill {
    display: inline-block;
    font-family: var(--bv-font-mono);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .14em;
    padding: 3px 9px;
    border-radius: 999px;
    margin-bottom: 4px;
    text-transform: uppercase;
    background: var(--bv-primary-soft);
    color: var(--bv-primary-ink);
}
.bv-topic-banner__meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    flex-shrink: 0;
    margin-left: 8px;
}
.bv-topic-banner__metric {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    font-weight: 800;
    color: var(--bv-ink);
    font-variant-numeric: tabular-nums;
}
.bv-topic-banner__metric i { color: var(--bv-primary-ink); }
.bv-topic-banner__metric--time {
    font-size: 11px;
    font-weight: 600;
    color: var(--bv-ink3);
}
@media (max-width: 600px) {
    .bv-topic-banner__meta { display: none; }
}

/* Thread cards (right column list) */
.bv-thread-card {
    background: var(--bv-panel);
    border: 1px solid var(--bv-hairline);
    border-radius: 12px;
    padding: 14px 18px 14px 14px;
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 10px;
    transition: border-color .12s, transform .08s, box-shadow .12s;
    text-decoration: none;
}
.bv-thread-card:hover {
    border-color: var(--bv-hairline2);
    box-shadow: var(--bv-shadow);
    color: inherit;
}
.bv-thread-card__avatar {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    width: 64px;
    text-align: center;
}
.bv-thread-card__avatar img {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--bv-bg2);
    object-fit: cover;
}
.bv-thread-card__avatar-name {
    font-size: 11.5px;
    font-weight: 700;
    color: var(--bv-primary-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
}
.bv-thread-card__avatar-meta {
    font-size: 10px;
    color: var(--bv-ink3);
    font-weight: 600;
}
.bv-thread-card__online {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--bv-good);
    display: inline-block;
    box-shadow: 0 0 0 2px var(--bv-panel);
    position: relative;
    top: -10px;
    left: 18px;
    margin-left: -10px;
    margin-top: -8px;
}
.bv-thread-card__body {
    flex: 1;
    min-width: 0;
}
.bv-thread-card__section {
    display: inline-block;
    font-family: var(--bv-font-mono);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .14em;
    padding: 3px 9px;
    border-radius: 999px;
    margin-bottom: 6px;
    text-transform: uppercase;
    background: var(--bv-primary-soft);
    color: var(--bv-primary-ink);
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.bv-thread-card__title {
    font-size: 17px;
    font-weight: 800;
    color: var(--bv-ink);
    margin: 0 0 4px;
    letter-spacing: -.01em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.bv-thread-card__title .bv-thread-card__pin {
    color: var(--bv-warn);
    margin-right: 4px;
    font-size: 14px;
    vertical-align: 1px;
}
.bv-thread-card__title .bv-thread-card__lock {
    color: var(--bv-ink3);
    margin-right: 4px;
    font-size: 14px;
    vertical-align: 1px;
}
.bv-thread-card__latest {
    font-size: 13px;
    color: var(--bv-ink2);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.bv-thread-card__latest .arrow { color: var(--bv-ink3); margin-right: 6px; }
.bv-thread-card__latest .at { color: var(--bv-primary-ink); font-weight: 700; }
.bv-thread-card__latest .quote { color: var(--bv-ink); }
.bv-thread-card__stats {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 8px;
    font-size: 12.5px;
    color: var(--bv-ink3);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.bv-thread-card__stats .stat { display: inline-flex; align-items: center; gap: 4px; }
.bv-thread-card__stats .stat--replies { color: var(--bv-primary-ink); }
.bv-thread-card__stats .stat--likes   { color: #f59e0b; }
.bv-thread-card__stats .stat--views   { color: var(--bv-ink2); }
.bv-thread-card__stats .stat--time::before { content: "·"; margin-right: 8px; color: var(--bv-ink3); }

/* ============================================================
   FORUM  -  Thread Detail (forum/thread.blade.php)
   ============================================================ */

.bv-thread-breadcrumb {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 14px;
    font-size: 14px;
}
.bv-thread-back {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: var(--bv-panel);
    border: 1px solid var(--bv-hairline);
    display: grid;
    place-items: center;
    color: var(--bv-ink2);
    text-decoration: none;
    font-size: 15px;
    transition: background .12s, color .12s;
    flex-shrink: 0;
}
.bv-thread-back:hover { background: var(--bv-bg2); color: var(--bv-ink); }
.bv-thread-breadcrumb__crumb { color: var(--bv-ink3); font-weight: 700; }
.bv-thread-breadcrumb__sep { color: var(--bv-ink3); }
.bv-thread-breadcrumb__current { color: var(--bv-primary-ink); font-weight: 700; }

.bv-thread-title {
    font-size: clamp(28px, 4vw, 40px);
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--bv-ink);
    margin: 4px 0 18px;
    line-height: 1.1;
}
.bv-thread-title .badge { vertical-align: 6px; margin-right: 6px; }

/* OP card */
.bv-op-card {
    background: var(--bv-panel);
    border: 1px solid rgba(61,158,255,.28);
    border-radius: 14px;
    padding: 18px;
    margin-bottom: 24px;
    display: grid;
    grid-template-columns: 110px minmax(0, 1fr);
    gap: 18px;
    box-shadow: var(--bv-shadow);
}
.bv-op-card__author {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 4px;
    position: relative;
}
.bv-op-card__op-tag {
    font-family: var(--bv-font-mono);
    font-size: 10.5px;
    font-weight: 800;
    color: var(--bv-primary-ink);
    letter-spacing: .14em;
    text-transform: uppercase;
}
.bv-op-card__avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--bv-bg2);
    object-fit: cover;
    margin: 4px 0;
}
.bv-op-card__online,
.bv-reply-card__online {
    width: 9px; height: 9px;
    border-radius: 50%;
    background: var(--bv-good);
    display: block;
    border: 2px solid var(--bv-panel);
    position: absolute;
    top: 60px;
    left: calc(50% + 18px);
}
.bv-op-card__online--off,
.bv-reply-card__online--off { background: var(--bv-ink3); }
.bv-op-card__name {
    font-size: 14px;
    font-weight: 800;
    color: var(--bv-primary-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}
.bv-op-card__name a { color: inherit; text-decoration: none; }
.bv-op-card__name a:hover { color: var(--bv-primary); }
.bv-op-card__posts {
    font-size: 11.5px;
    color: var(--bv-ink3);
    font-weight: 600;
}
.bv-op-card__body {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}
.bv-op-card__meta {
    font-size: 13px;
    color: var(--bv-ink3);
    font-weight: 600;
}
.bv-op-card__text {
    font-size: 17px;
    color: var(--bv-ink);
    line-height: 1.5;
    word-wrap: break-word;
}
.bv-op-card__sig {
    font-size: 12.5px;
    color: var(--bv-ink3);
    font-style: italic;
    border-top: 1px dashed var(--bv-hairline);
    padding-top: 10px;
}

/* Reaction chips (used on OP and replies). Matches the chip style from
   the prototype. Heart is the only functional reaction in the codebase
   today; other emoji can be wired later. */
.bv-react-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 4px;
}

/* OP / reply foot row. Lays reactions, views chip, Quote link, and
 * the kebab menu on a single line - used to be two stacked
 * .bv-react-row blocks where views ended up alone underneath the
 * reactions. The inner .bv-react-row (from the reaction_row
 * component) keeps its own internal flex; this just adopts it as one
 * child of the outer flex. */
.bv-thread-foot {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}
.bv-thread-foot > .bv-react-row { margin-top: 0; }
.bv-react-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--bv-bg2);
    border: 1px solid var(--bv-hairline);
    border-radius: 999px;
    padding: 5px 11px;
    font-size: 13px;
    font-weight: 700;
    color: var(--bv-ink);
    cursor: pointer;
    transition: background .12s, border-color .12s, transform .08s;
    line-height: 1;
}
.bv-react-chip:hover {
    background: var(--bv-panel2);
    border-color: var(--bv-hairline2);
}
.bv-react-chip:active { transform: scale(0.96); }
.bv-react-chip.is-active {
    background: rgba(239,68,68,.10);
    border-color: rgba(239,68,68,.35);
}
.bv-react-chip__count { font-variant-numeric: tabular-nums; }
.bv-react-chip__count:empty { display: none; }
.bv-react-chip--add {
    background: transparent;
    border: 1.5px dashed var(--bv-hairline2);
    color: var(--bv-ink3);
    width: 30px; height: 30px;
    padding: 0;
    border-radius: 50%;
    justify-content: center;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    transition: background .12s, border-color .12s, color .12s;
}
.bv-react-chip--add:hover {
    color: var(--bv-primary-ink);
    border-color: var(--bv-primary);
    background: var(--bv-primary-soft);
}

/* Emoji-style chip (rendered with the actual unicode emoji rather than
   a bootstrap icon). Slightly more padding so the emoji sits centered. */
.bv-react-chip--emoji {
    background: var(--bv-bg2);
    border: 1px solid var(--bv-hairline);
    color: var(--bv-ink);
    padding: 4px 10px;
    line-height: 1;
}
.bv-react-chip--emoji.is-active {
    background: var(--bv-primary-soft);
    border-color: var(--bv-primary);
}
.bv-react-chip--emoji[disabled] {
    cursor: default;
    opacity: 0.85;
}
.bv-react-chip__emoji {
    font-size: 15px;
    line-height: 1;
    /* Use the system emoji font so they render in color on every OS. */
    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
}

/* "Who reacted" hover popover  -  wraps each reaction chip and surfaces
   reactor avatars + usernames so you can see who reacted with what. */
.bv-react-chip-wrap {
    position: relative;
    display: inline-block;
}
.bv-react-popover {
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--bv-panel);
    border: 1px solid var(--bv-hairline);
    border-radius: 10px;
    padding: 10px 12px;
    min-width: 180px;
    max-width: 280px;
    box-shadow: var(--bv-shadow);
    z-index: 80;
    display: none;
    pointer-events: none;
    transition: none;
}
.bv-react-chip-wrap:hover .bv-react-popover { display: block; }
.bv-react-popover__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    padding-bottom: 6px;
    margin-bottom: 6px;
    border-bottom: 1px solid var(--bv-hairline);
    font-size: 12px;
    color: var(--bv-ink2);
}
.bv-react-popover__head .emoji { font-size: 16px; }
.bv-react-popover__head .count { font-weight: 700; color: var(--bv-ink); }
.bv-react-popover__list { display: flex; flex-direction: column; gap: 2px; }
.bv-react-popover__user {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 6px;
    border-radius: 6px;
    text-decoration: none;
    color: var(--bv-ink);
    font-size: 12.5px;
    font-weight: 600;
    transition: background .12s;
}
.bv-react-popover__user:hover { background: var(--bv-bg2); color: var(--bv-primary-ink); }
.bv-react-popover__user img {
    width: 20px; height: 20px;
    border-radius: 50%;
    background: var(--bv-bg2);
    object-fit: cover;
}
.bv-react-popover__more {
    font-size: 11.5px;
    color: var(--bv-ink3);
    padding: 4px 6px;
    font-weight: 600;
}

/* Picker chip  -  single affordance to add a reaction. Click it → the
   picker opens with the curated emoji set so you choose. Replaces the
   old dashed "+" round button. */
.bv-react-chip--picker {
    background: var(--bv-bg2);
    border: 1px solid var(--bv-hairline);
    color: var(--bv-ink);
    padding: 4px 10px;
    line-height: 1;
    cursor: pointer;
    transition: background .12s, border-color .12s, transform .08s;
}
.bv-react-chip--picker:hover {
    background: var(--bv-primary-soft);
    border-color: var(--bv-primary);
}

/* Add-reaction popover */
.bv-react-add-wrap { position: relative; display: inline-block; }
.bv-emoji-picker {
    position: absolute;
    bottom: calc(100% + 6px);
    left: 0;
    background: var(--bv-panel);
    border: 1px solid var(--bv-hairline);
    border-radius: 12px;
    padding: 6px;
    display: none;
    gap: 2px;
    box-shadow: var(--bv-shadow);
    z-index: 50;
    white-space: nowrap;
}
.bv-emoji-picker.is-open { display: inline-flex; }
.bv-emoji-picker__btn {
    background: transparent;
    border: none;
    width: 32px; height: 32px;
    border-radius: 8px;
    font-size: 18px;
    cursor: pointer;
    transition: background .1s, transform .08s;
    line-height: 1;
    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
}
.bv-emoji-picker__btn:hover {
    background: var(--bv-bg2);
    transform: scale(1.15);
}

/* Replies separator */
.bv-replies-divider {
    text-align: center;
    margin: 20px 0 18px;
    position: relative;
    color: var(--bv-ink3);
    font-family: var(--bv-font-mono);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
}
.bv-replies-divider::before,
.bv-replies-divider::after {
    content: "";
    position: absolute;
    top: 50%;
    width: calc(50% - 60px);
    height: 1px;
    background: var(--bv-hairline);
}
.bv-replies-divider::before { left: 0; }
.bv-replies-divider::after  { right: 0; }

/* Reply card */
.bv-reply-card {
    background: var(--bv-panel);
    border: 1px solid var(--bv-hairline);
    border-radius: 12px;
    padding: 14px 16px;
    margin-bottom: 12px;
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 14px;
    align-items: flex-start;
}
.bv-reply-card__avatar-wrap {
    position: relative;
    width: 36px;
    height: 36px;
}
.bv-reply-card__avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--bv-bg2);
    display: block;
}
.bv-reply-card__online {
    top: 26px;
    left: 26px;
    width: 10px;
    height: 10px;
}
.bv-reply-card__head {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 6px;
    flex-wrap: wrap;
}
.bv-reply-card__name {
    font-size: 14px;
    font-weight: 800;
    color: var(--bv-primary-ink);
    text-decoration: none;
}
.bv-reply-card__name:hover { color: var(--bv-primary); }
.bv-reply-card__meta {
    font-size: 12.5px;
    color: var(--bv-ink3);
    font-weight: 600;
}
.bv-reply-card__body {
    font-size: 15px;
    color: var(--bv-ink);
    line-height: 1.5;
    word-wrap: break-word;
    margin-bottom: 8px;
}
.bv-reply-card__sig {
    font-size: 12px;
    color: var(--bv-ink3);
    font-style: italic;
    margin-bottom: 8px;
}
.bv-reply-card__reactions { margin-bottom: 6px; }
.bv-reply-card__footer {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}
.bv-reply-action {
    background: transparent;
    border: none;
    padding: 0;
    color: var(--bv-ink3);
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: color .12s;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.bv-reply-action:hover { color: var(--bv-primary-ink); }
.bv-reply-action i { font-size: 14px; }

/* Quote header on a reply that is replying-to another post */
.bv-reply-card__quote {
    background: var(--bv-bg2);
    border-left: 3px solid var(--bv-primary);
    border-radius: 6px;
    padding: 6px 10px;
    margin-bottom: 8px;
    font-size: 12.5px;
    color: var(--bv-ink2);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.bv-reply-card__quote .arrow { color: var(--bv-ink3); margin-right: 4px; }
.bv-reply-card__quote .name  { color: var(--bv-primary-ink); font-weight: 700; margin-right: 4px; }

/* Right rail cards */
.bv-thread-rail {
    display: flex;
    flex-direction: column;
    gap: 14px;
    position: sticky;
    top: 16px;
}
.bv-thread-rail-card {
    background: var(--bv-panel);
    border: 1px solid var(--bv-hairline);
    border-radius: 14px;
    padding: 16px 18px;
    box-shadow: var(--bv-shadow);
}
.bv-thread-rail-card__title {
    font-family: var(--bv-font-mono);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .14em;
    color: var(--bv-ink2);
    text-transform: uppercase;
    margin-bottom: 12px;
}
.bv-thread-rail-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 6px 0;
    font-size: 14px;
    color: var(--bv-ink2);
    font-weight: 600;
}
.bv-thread-rail-row strong {
    color: var(--bv-ink);
    font-weight: 800;
    font-size: 16px;
    font-variant-numeric: tabular-nums;
}
.bv-participant {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 0;
    text-decoration: none;
    color: var(--bv-ink);
}
.bv-participant:hover .bv-participant__name { color: var(--bv-primary); }
.bv-participant__avatar-wrap {
    position: relative;
    width: 28px;
    height: 28px;
    flex-shrink: 0;
}
.bv-participant__avatar {
    width: 28px; height: 28px;
    border-radius: 50%;
    background: var(--bv-bg2);
    object-fit: cover;
    display: block;
}
.bv-participant__dot {
    position: absolute;
    bottom: -1px; right: -1px;
    width: 9px; height: 9px;
    border-radius: 50%;
    background: var(--bv-good);
    border: 2px solid var(--bv-panel);
}
.bv-participant__dot--off { background: var(--bv-ink3); }
.bv-participant__name {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--bv-primary-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: color .12s;
}

/* Guest CTA  -  shown to logged-out visitors so they have a clear path to
   sign in. Sits where the Reply CTA would for authed users. */
.bv-guest-cta {
    display: flex;
    align-items: center;
    gap: 16px;
    background: var(--bv-panel);
    border: 1px solid var(--bv-hairline);
    border-radius: 14px;
    padding: 14px 18px;
    margin-bottom: 18px;
}
.bv-guest-cta__icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--bv-primary);
    display: grid;
    place-items: center;
    color: #fff;
    flex-shrink: 0;
    font-size: 18px;
    box-shadow: 0 1px 1px rgba(0,0,0,.10);
}
.bv-guest-cta__body { flex: 1; min-width: 0; }
.bv-guest-cta__title {
    font-size: 15px;
    font-weight: 800;
    color: var(--bv-ink);
    letter-spacing: -.005em;
    line-height: 1.2;
}
.bv-guest-cta__sub {
    font-size: 13px;
    color: var(--bv-ink2);
    margin-top: 2px;
}
.bv-guest-cta__actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}
.bv-guest-cta__actions .bv-btn {
    white-space: nowrap;
}
@media (max-width: 640px) {
    .bv-guest-cta {
        flex-wrap: wrap;
        gap: 12px;
    }
    .bv-guest-cta__actions { width: 100%; }
    .bv-guest-cta__actions .bv-btn { flex: 1; justify-content: center; }
}

/* Inline guest hint shown next to per-card reactions instead of a real
   action footer. Subtle, single-line. */
.bv-guest-hint {
    font-size: 12.5px;
    color: var(--bv-ink3);
    font-weight: 600;
}
.bv-guest-hint a {
    color: var(--bv-primary-ink);
    text-decoration: none;
    font-weight: 700;
}
.bv-guest-hint a:hover { color: var(--bv-primary); text-decoration: underline; }

/* Thread page wrapping grid (main + rail) */
.bv-thread-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 24px;
    align-items: flex-start;
}
@media (max-width: 992px) {
    .bv-thread-grid { grid-template-columns: 1fr; }
    .bv-thread-rail { position: static; flex-direction: column; }
    .bv-op-card { grid-template-columns: 90px minmax(0, 1fr); padding: 14px; }
    .bv-op-card__avatar { width: 56px; height: 56px; }
}

/* ================================================================
   MOBILE PASS  -  comprehensive responsive overhaul (≤768px)
   Builds on the existing bottom mobile-nav and the new mobile-topbar.
   ================================================================ */

/* ---------- Mobile top bar (above content) ---------- */
.bv-mobile-topbar {
    display: none;
    position: sticky;
    top: 0;
    z-index: 1030;
    align-items: center;
    gap: 8px;
    padding: 8px 12px calc(8px + env(safe-area-inset-top, 0px)) 12px;
    background: var(--bv-panel);
    border-bottom: 1px solid var(--bv-hairline);
    min-height: 48px;
}
@media (max-width: 767.98px) {
    .bv-mobile-topbar { display: flex; }
}
.bv-mobile-topbar__brand {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    padding: 6px;
    margin: -6px;
}
.bv-mobile-topbar__brand img { height: 22px; width: auto; display: block; }
.bv-mobile-topbar__center { flex: 1; display: flex; justify-content: center; min-width: 0; }
.bv-mobile-topbar__currency {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    background: var(--bv-bg2);
    border: 1px solid var(--bv-hairline);
    border-radius: 999px;
    color: var(--bv-ink);
    text-decoration: none;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}
.bv-mobile-topbar__currency .bv-mc-cash { color: var(--bv-cash, #46c780); }
.bv-mobile-topbar__currency .bv-mc-coins { color: var(--bv-warn, #ffc04a); display: inline-flex; align-items: center; gap: 4px; }
.bv-mobile-topbar__currency .bv-mc-divider { width: 1px; height: 12px; background: var(--bv-hairline); }
.bv-mobile-topbar__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    color: var(--bv-ink2);
    text-decoration: none;
    border-radius: 8px;
    flex-shrink: 0;
}
.bv-mobile-topbar__icon:hover, .bv-mobile-topbar__icon:focus { color: var(--bv-ink); background: var(--bv-bg2); }
.bv-mobile-topbar__icon i { font-size: 18px; }
.bv-mobile-topbar__dot {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--bv-danger, #ff6f7e);
    border: 2px solid var(--bv-panel);
}

/* ---------- Bottom mobile-nav: fixed, safe-area, tap targets ---------- */
@media (max-width: 767.98px) {
    .mobile-nav {
        position: fixed !important;
        left: 0; right: 0; bottom: 0;
        z-index: 1040;
        padding: 6px 0 calc(6px + env(safe-area-inset-bottom, 0px)) 0 !important;
        border-top: 1px solid var(--bv-hairline);
        box-shadow: 0 -2px 12px rgba(0,0,0,0.18);
    }
    .mobile-nav-container {
        max-width: 100%;
        display: flex;
        justify-content: space-around;
        align-items: center;
        gap: 4px;
    }
    .mobile-nav-link {
        display: flex !important;
        align-items: center;
        justify-content: center;
        min-width: 56px;
        min-height: 44px;
        padding: 8px 12px !important;
        border-radius: 8px;
    }
    .mobile-nav-link h3 { margin: 0 !important; font-size: 22px !important; line-height: 1 !important; }
    .mobile-nav-link-active {
        background: rgba(124,107,240,0.12);
    }
    /* Reserve space at the bottom of every page so the fixed nav doesn't cover content. */
    main.main-section { padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)) !important; }
    body { padding-bottom: 0; }
}

/* ---------- Container / padding sanity on small screens ---------- */
@media (max-width: 767.98px) {
    main.main-section { padding-left: 12px; padding-right: 12px; }
    .container, .container-sm, .container-md, .container-lg, .container-xl { padding-left: 0; padding-right: 0; }
    h1 { font-size: 1.6rem; }
    h2 { font-size: 1.35rem; }
    h3 { font-size: 1.15rem; }
    h4 { font-size: 1rem; }
    .card { border-radius: 12px; }
}

/* ---------- Tap-target minimums ---------- */
@media (max-width: 767.98px) {
    .btn, .nav-link, .dropdown-item, .form-control, .form-select { min-height: 40px; }
    .btn-sm { min-height: 32px; }
    .form-control, .form-select { font-size: 16px !important; /* prevents iOS Safari zoom-on-focus */ }
}

/* ---------- Tables: horizontal scroll wrapper instead of cramped ---------- */
@media (max-width: 767.98px) {
    .table-responsive-mobile {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    table.table { font-size: 13px; }
    /* Default Bootstrap .table inside cards on mobile */
    .card .table { display: block; overflow-x: auto; }
}

/* ---------- Modals: full-width on phones, less margin ---------- */
@media (max-width: 575.98px) {
    .modal-dialog { margin: 8px; }
    .modal-dialog.modal-dialog-centered { min-height: calc(100vh - 16px); align-items: flex-end; }
    .modal-content { border-radius: 16px 16px 12px 12px; }
    .modal-body { padding: 16px; }
    .modal-footer { padding: 12px 16px; }
    .modal-header { padding: 14px 16px; }
}

/* ---------- Dropdowns: don't overflow viewport ---------- */
@media (max-width: 767.98px) {
    .dropdown-menu { max-width: calc(100vw - 24px) !important; }
    .notification-dropdown { min-width: 280px !important; }
    .notification-dropdown .text-truncate { max-width: 180px; }
}

/* ---------- Promo ad on mobile: tighter layout ---------- */
@media (max-width: 575.98px) {
    .bv-promo-ad {
        flex-wrap: wrap;
        padding: 10px 12px !important;
        gap: 10px;
    }
    .bv-promo-ad__thumb { width: 44px !important; height: 44px !important; }
    .bv-promo-ad__body { flex: 1; min-width: 0; }
    .bv-promo-ad__name { font-size: 14px; }
    .bv-promo-ad__sub { font-size: 11px; }
    .bv-promo-ad__price { font-size: 14px; }
    .bv-promo-ad__cta { display: none; } /* whole row is tappable */
}

/* ---------- Sidebar (desktop): make sure mobile content isn't shoved ---------- */
@media (max-width: 767.98px) {
    .sidebar-container { display: none !important; }
    .topbar { display: none !important; }
}

/* ---------- Forms / settings page on mobile ---------- */
@media (max-width: 767.98px) {
    .settings-shell { gap: 16px !important; }
    .settings-side { width: 100% !important; }
    .settings-card { padding: 16px !important; }
    .settings-row { flex-direction: column; align-items: flex-start !important; gap: 8px !important; }
    .settings-row > .btn { align-self: stretch; }
}

/* ---------- Item grids: tighter columns on phone ---------- */
@media (max-width: 575.98px) {
    .bv-item-grid { grid-template-columns: repeat(2, 1fr); gap: 10px !important; }
    .bv-player-grid { grid-template-columns: repeat(2, 1fr); gap: 10px !important; }
}

/* ---------- Profile / avatar viewer ---------- */
@media (max-width: 767.98px) {
    /* Three.js avatar canvases need to shrink with the column */
    canvas[data-avatar-viewer], .bv-avatar-viewer canvas { width: 100% !important; height: auto !important; max-height: 60vh; }
}

/* ---------- Misc: hide things that don't add value on phones ---------- */
@media (max-width: 767.98px) {
    .topbar-search { display: none; } /* search isn't wired yet anyway */
}

/* ================================================================
   MOBILE PASS v2  -  page-specific fixes after first pass shipped
   ================================================================ */

/* ---------- Welcome banner / dashboard top card ---------- */
@media (max-width: 575.98px) {
    .bv-welcome {
        flex-direction: column !important;
        align-items: flex-start !important;
        text-align: left;
        gap: 10px !important;
        padding: 14px !important;
    }
    .bv-welcome__avatar { width: 48px !important; height: 48px !important; }
    .bv-welcome__title { font-size: 18px !important; }
    .bv-welcome__meta { gap: 8px !important; flex-wrap: wrap; }
    .bv-welcome__meta-item { font-size: 12px !important; }
    .bv-welcome > .btn { align-self: stretch; }
    .bv-qa-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }
    .bv-qa-tile { padding: 14px 10px !important; }
    .bv-qa-icon { width: 38px !important; height: 38px !important; }
    .bv-streak { padding: 14px !important; gap: 12px; }
    .bv-streak__icon { width: 40px !important; height: 40px !important; font-size: 18px !important; }
    .bv-streak__title { font-size: 16px !important; }
}

/* ---------- Profile page  -  shrink the 3D viewer + reflow ---------- */
@media (max-width: 991.98px) {
    .profile-avatar-3d { height: 240px !important; }
}
@media (max-width: 575.98px) {
    .profile-avatar-3d { height: 200px !important; }
    /* Profile page uses col-lg-4 / col-lg-8  -  they stack on <992. Make sure the
       reordering with order-* classes still leaves the avatar ABOVE the wall. */
}

/* ---------- Customize page modal  -  full-screen-feel on phones ---------- */
@media (max-width: 767.98px) {
    #advancedModal .modal-dialog { max-width: none !important; margin: 0 !important; }
    #advancedModal .modal-content { min-height: 100vh; border-radius: 0 !important; }
    #advancedModal .modal-body { padding: 14px !important; }
    /* Body part selector + colors row: stack vertically when narrow */
    #advancedModal .d-flex.gap-3 {
        flex-direction: column !important;
        gap: 12px !important;
    }
    #advancedModal .flex-shrink-0[style*="width: 110px"] {
        width: 100% !important;
        max-width: 240px;
        align-self: center;
    }
    /* Color swatches  -  keep them tappable */
    .color-swatch { width: 36px !important; height: 36px !important; }
    /* Colors flex row gets more breathing room */
    #advancedModal .d-flex.flex-wrap.gap-1 { gap: 8px !important; }
}

/* ---------- Customize index page  -  main 3D viewer + inventory ---------- */
@media (max-width: 767.98px) {
    /* The customize page splits 4/8: left = avatar, right = inventory.
       At <md it'll already collapse to one column. Make the avatar viewer
       reasonable height and let inventory thumbnails stay readable. */
    .col-md-4 [data-avatar-type], .col-md-8 [data-avatar-type] {
        height: 280px !important;
    }
}

/* ---------- Forum index ---------- */
@media (max-width: 575.98px) {
    /* Search input grows to full width on small screens */
    form[action*="forum"] { max-width: 100% !important; }
}

/* ---------- Market grid + item page ---------- */
@media (max-width: 575.98px) {
    /* Item grid was already 2-col via earlier media rule; tighten cards */
    .bv-item-grid > * { padding: 8px !important; }
    .bv-item-grid img { max-height: 110px !important; }
    .bv-promo-ad__name { font-size: 14px !important; line-height: 1.2; }
}

/* ---------- Item page ---------- */
@media (max-width: 767.98px) {
    /* The item show page often has a 2-col layout: image + meta. Make sure
       the image isn't gigantic and the buy button is reachable. */
    .market-item-image img, .item-show img.img-fluid { max-height: 280px; object-fit: contain; }
}

/* ---------- Forum thread + reply page ---------- */
@media (max-width: 767.98px) {
    .bv-op-card,
    .reply-card { padding: 12px !important; }
    .reply-card .d-flex {
        flex-direction: column;
        gap: 8px;
    }
    .reply-card img.notif-pfp,
    .reply-card .reply-avatar {
        width: 36px !important; height: 36px !important;
    }
}

/* ---------- Auth pages (login, register, password reset) ---------- */
@media (max-width: 767.98px) {
    .authentication { padding: 16px !important; }
    .authentication .container { padding: 0 !important; }
    .authentication .card { border-radius: 12px !important; }
    .authentication .col-md-8, .authentication .col-md-9 { padding: 0 !important; }
}

/* ---------- Community Manage > Members (server-rendered) ----------
   Two-pane layout: rank sidebar on the left, paginated member list
   on the right. Collapses to single column under 700px (sidebar
   becomes a horizontal scroller of rank chips). */
.bv-mgr {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 16px;
    background: var(--bv-panel);
    border: 1px solid var(--bv-hairline);
    border-radius: 12px;
    padding: 14px;
}
.bv-mgr__side {
    display: flex;
    flex-direction: column;
    gap: 4px;
    border-right: 1px solid var(--bv-hairline);
    padding-right: 12px;
}
.bv-mgr__rank {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 10px;
    border-radius: 8px;
    background: transparent;
    color: var(--bv-ink2);
    text-decoration: none;
    font-size: 13.5px;
    font-weight: 600;
    transition: background .12s, color .12s;
}
.bv-mgr__rank:hover { background: var(--bv-bg2); color: var(--bv-ink); text-decoration: none; }
.bv-mgr__rank.is-active {
    background: var(--bv-primary-soft);
    color: var(--bv-primary-ink);
}
.bv-mgr__rank-count {
    font-size: 11px;
    background: var(--bv-bg2);
    border-radius: 999px;
    padding: 2px 8px;
    color: var(--bv-ink3);
    font-weight: 700;
}
.bv-mgr__rank.is-active .bv-mgr__rank-count { background: var(--bv-panel); color: var(--bv-primary-ink); }
.bv-mgr__list { min-width: 0; }
.bv-mgr__list-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 4px 12px;
    border-bottom: 1px solid var(--bv-hairline);
    margin-bottom: 8px;
}
.bv-mgr__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 4px;
    border-bottom: 1px solid var(--bv-hairline);
}
.bv-mgr__row:last-child { border-bottom: none; }
.bv-mgr__user {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--bv-ink);
    min-width: 0;
    flex: 1;
}
.bv-mgr__user:hover { color: var(--bv-ink); text-decoration: none; }
.bv-mgr__user img { flex-shrink: 0; }
.bv-mgr__username {
    font-weight: 700;
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.bv-mgr__meta { font-size: 11.5px; color: var(--bv-ink3); }
.bv-mgr__actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}
.bv-mgr__rank-form { margin: 0; }
.bv-mgr__rank-select {
    background: var(--bv-bg2);
    border: 1px solid var(--bv-hairline);
    color: var(--bv-ink);
    font-size: 12.5px;
    padding: 4px 24px 4px 10px;
    border-radius: 8px;
    min-width: 140px;
}
@media (max-width: 700px) {
    .bv-mgr { grid-template-columns: 1fr; padding: 10px; }
    .bv-mgr__side {
        flex-direction: row;
        overflow-x: auto;
        border-right: 0;
        border-bottom: 1px solid var(--bv-hairline);
        padding-right: 0;
        padding-bottom: 10px;
        gap: 6px;
    }
    .bv-mgr__rank { flex-shrink: 0; padding: 6px 10px; font-size: 12.5px; }
    .bv-mgr__row { flex-wrap: wrap; padding: 8px 0; }
    .bv-mgr__actions { width: 100%; justify-content: flex-end; }
    .bv-mgr__rank-select { min-width: 130px; }
}

/* ---------- Community browse chips (filter + sort) ----------
   Two horizontal rows of small chips sit above the .bv-clan-grid
   on the Communities page. Active chip uses brand primary; the
   rest are quiet hairline. Wraps cleanly on phones. */
.bv-clan-filters {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0 0 18px;
}
.bv-clan-filters__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}
/* Category row has ~12 chips. Wrapping is fine on desktop, but on
   phones we let it scroll horizontally so the filter bar doesn't
   eat half the screen. Hides the scrollbar visually but stays
   swipeable. */
.bv-clan-filters__row--scroll {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 2px;
}
.bv-clan-filters__row--scroll::-webkit-scrollbar { display: none; }
.bv-clan-filters__row--scroll .bv-clan-chip { flex-shrink: 0; }
@media (min-width: 992px) {
    /* On wide screens, let category chips wrap normally rather than
       scroll - the chip bar fits comfortably and wrapping reads
       better than a horizontal river. */
    .bv-clan-filters__row--scroll { flex-wrap: wrap; overflow-x: visible; }
}
.bv-clan-filters__lbl {
    font-size: 11px;
    font-weight: 700;
    color: var(--bv-ink3);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-right: 2px;
}
.bv-clan-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    background: var(--bv-bg2);
    border: 1px solid var(--bv-hairline);
    color: var(--bv-ink2);
    font-size: 12.5px;
    font-weight: 600;
    text-decoration: none;
    transition: background .12s, color .12s, border-color .12s;
    white-space: nowrap;
}
.bv-clan-chip:hover {
    color: var(--bv-ink);
    border-color: var(--bv-hairline2);
    background: var(--bv-panel);
    text-decoration: none;
}
.bv-clan-chip.is-active {
    background: var(--bv-primary-soft);
    border-color: var(--bv-primary);
    color: var(--bv-primary-ink);
}
.bv-clan-chip i { font-size: 13px; }
.bv-clan-chip--sort { font-size: 12px; padding: 5px 10px; }
@media (max-width: 600px) {
    .bv-clan-filters { margin-bottom: 12px; gap: 6px; }
    .bv-clan-chip { padding: 5px 10px; font-size: 12px; }
}

/* ---------- Communities / guild list ---------- */
@media (max-width: 600px) {
    /* Tighter chrome for the 2-up mobile grid: smaller avatar tile,
       smaller name, hide the motto + member-count row, hide the
       Manage button (members tap "View" then manage from the page). */
    .bv-clan-card { padding: 10px !important; }
    .bv-clan-card__head { gap: 8px !important; }
    .bv-clan-card__tag { width: 40px !important; height: 40px !important; font-size: 13px !important; }
    .bv-clan-card__name { font-size: 14px !important; }
    .bv-clan-card__meta { font-size: 11px !important; }
    .bv-clan-card__motto { display: none !important; }
    .bv-clan-card__row { display: none !important; }
}

/* ---------- Toastr toasts on mobile (don't cover the bottom-nav) ---------- */
@media (max-width: 767.98px) {
    #toast-container.toast-bottom-right,
    #toast-container.toast-top-right {
        right: 8px !important;
        left: 8px !important;
        width: auto !important;
    }
    #toast-container > .toast {
        width: 100% !important;
        margin: 0 0 8px 0 !important;
        opacity: 0.96;
    }
    #toast-container.toast-bottom-right { bottom: calc(80px + env(safe-area-inset-bottom, 0px)) !important; }
}

/* ---------- Trades + Money pages (often have stacked rows that look odd) ---------- */
@media (max-width: 575.98px) {
    .trade-row, .transaction-row {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 8px;
    }
}

/* ---------- Wall posts (profile) ---------- */
@media (max-width: 575.98px) {
    .wall-post .d-flex.gap-3 { gap: 10px !important; }
    .wall-post img.headshot { width: 36px !important; height: 36px !important; }
}

/* ---------- Modal close buttons  -  bigger tap target ---------- */
@media (max-width: 767.98px) {
    .modal .btn-close {
        width: 32px;
        height: 32px;
        background-size: 1.5em;
    }
}

/* ---------- Sticky alert: don't overlap top bar ---------- */
@media (max-width: 767.98px) {
    .alert.position-fixed.top-0 { top: 56px !important; left: 8px !important; right: 8px !important; }
}

/* ---------- Buttons inside dropdowns hit min target ---------- */
@media (max-width: 767.98px) {
    .dropdown-menu .dropdown-item {
        padding: 10px 14px !important;
        font-size: 14px;
    }
}

/* ---------- Profile rail: when stacked, shrink the centered avatar/cards ---------- */
@media (max-width: 991.98px) {
    .profile-rail-card { padding: 14px !important; }
    .profile-rail-card .col-6 { padding: 4px !important; }
}

/* ---------- Generic: long usernames / item names should truncate not overflow ---------- */
@media (max-width: 767.98px) {
    .text-truncate-mobile {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
    }
    /* Cards with header + value stack should wrap text */
    .card h1, .card h2, .card h3, .card h4 { word-wrap: break-word; }
}

/* ---------- Footer compaction on mobile ---------- */
@media (max-width: 575.98px) {
    footer { padding: 16px 12px !important; font-size: 12px; }
    footer .row { gap: 12px; }
}

/* ---------- Customize page: responsive avatar viewer ---------- */
.bv-customize-avatar-card { min-height: 380px; }
.bv-customize-avatar-viewer { height: 360px; }
@media (max-width: 991.98px) {
    .bv-customize-avatar-card { min-height: 0; }
    .bv-customize-avatar-viewer { height: 320px; }
}
@media (max-width: 575.98px) {
    .bv-customize-avatar-viewer { height: 260px; }
}

/* ================================================================
   MOBILE PASS v3  -  clean rewrite (overrides v1 + v2 where they collide)
   ================================================================ */

/* ---------- Global: stop horizontal overflow on mobile ---------- */
@media (max-width: 767.98px) {
    html, body {
        overflow-x: hidden !important;
        max-width: 100vw;
    }
    /* Anything that wants to hug the viewport edge shouldn't bleed past it. */
    .row { margin-left: 0; margin-right: 0; }
    .row > [class*="col-"] { padding-left: 6px; padding-right: 6px; }
    img, video, canvas, iframe { max-width: 100%; height: auto; }
    pre, code { white-space: pre-wrap; word-break: break-word; }
    /* Bootstrap .container default padding can cause overflow on edge cases */
    .container, .container-fluid { padding-left: 12px; padding-right: 12px; max-width: 100vw; }
}

/* ---------- v3 Top bar: simpler, balanced, single row ---------- */
.bv-mobile-topbar {
    display: none;
    position: sticky;
    top: 0;
    z-index: 1030;
    align-items: center;
    gap: 6px;
    padding: 0 10px;
    padding-top: env(safe-area-inset-top, 0px);
    background: var(--bv-panel);
    border-bottom: 1px solid var(--bv-hairline);
    height: calc(48px + env(safe-area-inset-top, 0px));
    box-sizing: border-box;
}
@media (max-width: 767.98px) {
    .bv-mobile-topbar { display: flex; }
}
.bv-mobile-topbar__brand {
    display: inline-flex;
    align-items: center;
    height: 100%;
    padding: 0 6px;
    flex-shrink: 0;
}
.bv-mobile-topbar__brand img { height: 20px; width: auto; display: block; opacity: 0.95; }

.bv-mobile-topbar__wallet {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;          /* push wallet + icons to the right edge */
    padding: 5px 10px;
    background: var(--bv-bg2);
    border: 1px solid var(--bv-hairline);
    border-radius: 999px;
    color: var(--bv-ink);
    text-decoration: none;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    flex-shrink: 0;
}
.bv-mobile-topbar__wallet:hover { color: var(--bv-ink); }
.bv-wallet-amt {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    line-height: 1;
}
.bv-wallet-amt:nth-child(1) { color: var(--bv-cash, #46c780); }
.bv-wallet-amt:nth-child(2) { color: var(--bv-warn, #ffc04a); }
.bv-wallet-amt:nth-child(2)::before {
    content: "";
    display: inline-block;
    width: 1px;
    height: 12px;
    background: var(--bv-hairline);
    margin-right: 6px;
}

.bv-mobile-topbar__icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    color: var(--bv-ink2);
    text-decoration: none;
    border-radius: 8px;
    flex-shrink: 0;
}
.bv-mobile-topbar__icon:hover, .bv-mobile-topbar__icon:focus { color: var(--bv-ink); background: var(--bv-bg2); }
.bv-mobile-topbar__icon i { font-size: 17px; line-height: 1; }
.bv-mobile-topbar__dot {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--bv-danger, #ff6f7e);
    border: 2px solid var(--bv-panel);
    pointer-events: none;
}

/* ---------- v3 Bottom nav: clean equal-width cells ---------- */
.bv-mobile-bottom {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1040;
    background: var(--bv-panel);
    border-top: 1px solid var(--bv-hairline);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    box-shadow: 0 -2px 12px rgba(0,0,0,0.18);
}
@media (max-width: 767.98px) {
    .bv-mobile-bottom { display: flex; }
    /* Hide the OLD .mobile-nav from earlier; we replaced it with .bv-mobile-bottom */
    .mobile-nav { display: none !important; }
    /* Reserve space at the bottom of every page so the fixed nav doesn't cover content. */
    main.main-section {
        padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)) !important;
    }
}
.bv-mb-item, .bv-mb-item-link {
    flex: 1 1 0;
    min-width: 0;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 8px 4px;
    color: var(--bv-ink3);
    text-decoration: none;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.02em;
    background: transparent;
    border: none;
    height: 60px;
    box-sizing: border-box;
}
.bv-mb-item.dropup { padding: 0; }
.bv-mb-item.dropup .bv-mb-item-link { width: 100%; height: 100%; }
.bv-mb-item i, .bv-mb-item-link i { font-size: 22px; line-height: 1; color: inherit; }
.bv-mb-item span, .bv-mb-item-link span {
    display: block;
    line-height: 1;
    text-transform: none;
    color: inherit;
}
.bv-mb-item:hover, .bv-mb-item-link:hover { color: var(--bv-ink); }
.bv-mb-item.is-active, .bv-mb-item.is-active .bv-mb-item-link { color: var(--bv-primary-ink, #7c6bf0); }

/* ---------- Messages page: full-screen chat, lock body scroll ---------- */
@media (max-width: 767.98px) {
    /* When the chat-container is on screen on mobile, freeze body scroll */
    body:has(.chat-container) {
        overflow: hidden !important;
        height: 100vh;
        height: 100dvh;
    }
    body:has(.chat-container) main.main-section {
        padding: 0 !important;
        height: 100dvh;
        overflow: hidden;
    }
    /* Fallback for browsers without :has()  -  apply via JS-set class if needed */
    body.bv-route-messages { overflow: hidden !important; }
}

/* ---------- Disable v1 mobile-topbar/mobile-nav rules that fight v3 ---------- */
@media (max-width: 767.98px) {
    /* The v1 mobile-nav had min-height + fixed positioning + container-based
       layout. v3 replaces it entirely with .bv-mobile-bottom. Hard-hide the
       legacy element so it can't ghost in. */
    .d-md-none > .mobile-nav { display: none !important; }
}

/* ================================================================
   Worlds page
   ================================================================ */

.bv-worlds-wrap {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 24px 48px;
}
.bv-worlds-official-icon {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    vertical-align: -2px;
    margin-right: 4px;
}

/* Hero card (Town Square) */
.bv-world-hero {
    display: block;
    border-radius: 12px;
    overflow: hidden;
    text-decoration: none;
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.bv-world-hero:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}
.bv-world-hero__img {
    position: relative;
    width: 100%;
    aspect-ratio: 21 / 8;
    overflow: hidden;
    background: linear-gradient(135deg, var(--bv-primary), var(--bv-bg2));
}
.bv-world-hero__img > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.bv-world-hero__gradient {
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.2) 50%, transparent 100%);
}
.bv-world-hero__body {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 28px 32px;
    max-width: 480px;
}
.bv-world-hero__tags {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}
.bv-world-tag {
    font-size: 10px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 4px;
    letter-spacing: 0.5px;
    color: white;
}
.bv-world-tag--featured { background: var(--bv-primary); }
.bv-world-tag--official { background: rgba(255,255,255,0.15); }
.bv-world-tag--badge {
    position: absolute;
    top: 8px;
    left: 8px;
    background: rgba(0,0,0,0.6);
    font-size: 9px;
    letter-spacing: 1px;
    padding: 2px 6px;
}
.bv-world-hero__title {
    font-size: 24px;
    font-weight: 800;
    color: white;
    margin: 0 0 6px;
    line-height: 1.2;
}
.bv-world-hero__desc {
    font-size: 13px;
    color: rgba(255,255,255,0.8);
    margin: 0 0 14px;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.bv-world-hero__actions {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}
.bv-world-hero__play {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--bv-primary);
    color: white;
    padding: 8px 20px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 700;
}
.bv-world-hero__meta {
    font-size: 12px;
    color: rgba(255,255,255,0.6);
}

/* World card grids */
.bv-worlds-grid {
    display: grid;
    gap: 14px;
}
.bv-worlds-grid--official {
    grid-template-columns: repeat(3, 1fr);
}
.bv-worlds-grid--community {
    grid-template-columns: repeat(4, 1fr);
}

/* Individual world card */
.bv-world-card {
    display: flex;
    flex-direction: column;
    background: var(--bv-panel);
    border: 1px solid var(--bv-hairline);
    border-radius: 12px;
    overflow: hidden;
    text-decoration: none;
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.bv-world-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    text-decoration: none;
}
.bv-world-card__thumb {
    position: relative;
    aspect-ratio: 16 / 9;
    width: 100%;
    overflow: hidden;
    background: linear-gradient(135deg, var(--bv-primary), var(--bv-bg2));
    display: flex;
    align-items: center;
    justify-content: center;
}
.bv-world-card__thumb > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.bv-world-card__wip {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2px;
    opacity: 0.3;
    color: var(--bv-ink3);
}
.bv-world-card__body {
    padding: 12px 14px;
}
.bv-world-card__name {
    font-weight: 700;
    font-size: 14px;
    color: var(--bv-ink);
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.bv-world-card__meta {
    font-size: 12px;
    color: var(--bv-ink3);
    display: flex;
    align-items: center;
    gap: 5px;
}
.bv-world-card__creator {
    color: var(--bv-accent);
    font-weight: 600;
}
.bv-world-card__sep { opacity: 0.4; }
.bv-world-card__avatar {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--bv-bg2);
}
.bv-world-card__desc {
    font-size: 11px;
    color: var(--bv-ink3);
    margin-top: 6px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.bv-world-card__desc--truncate {
    white-space: nowrap;
    display: block;
    text-overflow: ellipsis;
}

/* Empty state */
.bv-worlds-empty {
    text-align: center;
    padding: 40px 24px;
}
.bv-worlds-empty__icon { font-size: 36px; margin-bottom: 12px; opacity: 0.3; }
.bv-worlds-empty__title { font-size: 15px; font-weight: 600; color: var(--bv-ink); margin-bottom: 6px; }
.bv-worlds-empty__sub { font-size: 13px; color: var(--bv-ink3); max-width: 360px; margin: 0 auto; }

/* Worlds: tablet */
@media (max-width: 992px) {
    .bv-worlds-grid--official { grid-template-columns: repeat(2, 1fr); }
    .bv-worlds-grid--community { grid-template-columns: repeat(3, 1fr); }
}

/* Worlds: mobile */
@media (max-width: 767.98px) {
    .bv-worlds-wrap { padding: 0 14px 32px; }
    .bv-world-hero__img { aspect-ratio: 16 / 10; }
    .bv-world-hero__gradient {
        background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.35) 60%, transparent 100%);
    }
    .bv-world-hero__body {
        justify-content: flex-end;
        padding: 16px;
        max-width: none;
    }
    .bv-world-hero__title { font-size: 18px; }
    .bv-world-hero__desc { font-size: 12px; margin-bottom: 10px; -webkit-line-clamp: 2; }
    .bv-world-hero__play { padding: 7px 14px; font-size: 12px; }
    .bv-world-hero__meta { font-size: 11px; }
    .bv-worlds-grid--official { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .bv-worlds-grid--community { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .bv-world-card__body { padding: 10px 12px; }
    .bv-world-card__name { font-size: 13px; }
    .bv-world-card__meta { font-size: 11px; }
    .bv-world-card__desc { font-size: 10px; }
}

/* Worlds: small phones */
@media (max-width: 400px) {
    .bv-worlds-grid--community { grid-template-columns: 1fr; }
    .bv-worlds-grid--official { grid-template-columns: 1fr; }
}

/* ================================================================
   Item-detail page  -  hero + meta + sections
   ================================================================ */

.bv-item-detail { display: flex; flex-direction: column; gap: 28px; }

.bv-item-detail__hero {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 28px;
    background: var(--bv-panel);
    border: 1px solid var(--bv-hairline);
    border-radius: 16px;
    padding: 22px;
}
@media (max-width: 768px) {
    .bv-item-detail__hero { grid-template-columns: 1fr; gap: 20px; padding: 16px; }
}

.bv-item-detail__media { min-width: 0; }
.bv-item-detail__info {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.bv-item-detail__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}
.bv-item-detail__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.bv-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.04em;
    background: var(--bv-bg2);
    color: var(--bv-ink2);
    line-height: 1;
    white-space: nowrap;
}
.bv-chip--type { background: rgba(124,107,240,0.15); color: var(--bv-primary-ink); }
.bv-chip--official { background: rgba(34,197,94,0.16); color: #4ade80; }
.bv-chip--collectible { background: rgba(255,193,7,0.15); color: var(--bv-warn); }
.bv-chip--timed { background: rgba(239,68,68,0.15); color: var(--bv-danger); }

/* ----- Profile-style chips (membership / role badges) -----
   Subtler look than item-detail chips: monospace, uppercase, hairline
   border, neutral background. Color comes from the modifier and tints
   the text + icon + border only. Replaces the old Bootstrap pills + the
   gold/purple gradient glow on the user profile. */
.bv-chip--staff,
.bv-chip--verified,
.bv-chip--discord,
.bv-chip--cosmo,
.bv-chip--cosmo-pro {
    font-family: var(--bv-font-mono);
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 4px 10px;
    gap: 6px;
    background: var(--bv-bg2);
    border: 1px solid var(--bv-hairline);
    color: var(--bv-ink2);
}
.bv-chip--staff     .bi,
.bv-chip--verified  .bi,
.bv-chip--discord   .bi,
.bv-chip--cosmo     .bi,
.bv-chip--cosmo-pro .bi { font-size: 11px; opacity: 0.85; }

.bv-chip--staff     { color: var(--bv-warn);        border-color: rgba(255,193,7,.32); }
.bv-chip--verified  { color: var(--bv-good);        border-color: rgba(70,199,128,.32); }
.bv-chip--discord   { color: var(--bv-primary-alt); border-color: rgba(61,158,255,.32); }
.bv-chip--cosmo     { color: var(--bv-primary);     border-color: rgba(124,107,240,.32); }
.bv-chip--cosmo-pro { color: var(--bv-warn);        border-color: rgba(255,193,7,.32); }

.bv-icon-btn {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: transparent;
    border: 1px solid var(--bv-hairline);
    color: var(--bv-ink2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background .12s, color .12s;
}
.bv-icon-btn:hover { background: var(--bv-bg2); color: var(--bv-ink); }

.bv-item-detail__title {
    font-family: var(--bv-display, inherit);
    font-size: clamp(28px, 4vw, 40px);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.02em;
    margin: 0;
    color: var(--bv-ink);
}

.bv-item-detail__creator {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--bv-ink2);
    width: fit-content;
    padding: 4px 10px 4px 4px;
    border-radius: 999px;
    background: var(--bv-bg2);
    border: 1px solid var(--bv-hairline);
    transition: background .12s, border-color .12s;
}
.bv-item-detail__creator:hover {
    background: var(--bv-bg3, var(--bv-bg2));
    border-color: var(--bv-hairline2);
    color: var(--bv-ink);
    text-decoration: none;
}
.bv-item-detail__creator-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--bv-bg3, var(--bv-bg2));
}
.bv-item-detail__creator-meta { display: inline-flex; gap: 5px; align-items: baseline; font-size: 13px; }
.bv-item-detail__creator-by { color: var(--bv-ink3); font-weight: 600; }
.bv-item-detail__creator-name { color: var(--bv-ink); font-weight: 700; }
.bv-item-detail__creator-name.is-staff { color: var(--bv-danger); }

.bv-item-detail__buy { display: flex; flex-direction: column; gap: 10px; }
.bv-item-detail__buy-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.bv-buy-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 18px;
    border-radius: 12px;
    font-weight: 800;
    font-size: 15px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: filter .12s, transform .12s;
    line-height: 1;
}
.bv-buy-btn:hover { filter: brightness(1.06); transform: translateY(-1px); }
.bv-buy-btn:active { transform: translateY(0); }
.bv-buy-btn .bv-buy-btn__price { font-size: 16px; }
.bv-buy-btn .bv-buy-btn__label { font-size: 12px; opacity: 0.85; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.bv-buy-btn--cash  { background: var(--bv-cash, #22c55e); color: #06120b; }
.bv-buy-btn--coins { background: var(--bv-warn, #f59e0b); color: #1a1206; }
.bv-buy-btn--free  { background: var(--bv-primary, #7c6bf0); color: #fff; }
.bv-buy-btn--sm    { padding: 8px 12px; font-size: 13px; }
.bv-buy-btn--sm .bv-buy-btn__price { font-size: 13px; }

.bv-item-detail__notice {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 700;
    width: fit-content;
}
.bv-item-detail__notice--info   { background: rgba(61,158,255,0.12); color: #6db4ff; }
.bv-item-detail__notice--good   { background: rgba(34,197,94,0.12); color: #4ade80; }
.bv-item-detail__notice--warn   { background: rgba(245,158,11,0.12); color: var(--bv-warn); }
.bv-item-detail__notice--danger { background: rgba(239,68,68,0.12); color: var(--bv-danger); }
.bv-item-detail__notice--muted  { background: var(--bv-bg2); color: var(--bv-ink3); }

.bv-item-detail__serials {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding-top: 4px;
}
.bv-item-detail__serials-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--bv-ink3);
    margin-right: 4px;
}

.bv-item-detail__stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    padding: 14px 0 0;
    border-top: 1px solid var(--bv-hairline);
}
.bv-item-detail__stat {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.bv-item-detail__stat-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--bv-ink3);
}
.bv-item-detail__stat-value {
    font-size: 15px;
    font-weight: 700;
    color: var(--bv-ink);
}

.bv-item-detail__desc { padding-top: 4px; }
.bv-item-detail__desc-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--bv-ink3);
    margin-bottom: 6px;
}
.bv-item-detail__desc-body {
    font-size: 14px;
    color: var(--bv-ink2);
    line-height: 1.6;
    word-wrap: break-word;
}

.bv-item-detail__section {
    background: var(--bv-panel);
    border: 1px solid var(--bv-hairline);
    border-radius: 14px;
    padding: 18px 20px;
}
.bv-item-detail__section-title {
    font-size: 16px;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--bv-ink);
    margin: 0 0 14px;
}

.bv-item-detail__listings { display: flex; flex-direction: column; gap: 8px; }
.bv-item-detail__listing {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 10px;
    background: var(--bv-bg2);
    border: 1px solid var(--bv-hairline);
}
.bv-item-detail__listing-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--bv-bg3, var(--bv-bg2));
}
.bv-item-detail__listing-meta { flex: 1; min-width: 0; }
.bv-item-detail__listing-name {
    font-weight: 700;
    color: var(--bv-ink);
    text-decoration: none;
    font-size: 14px;
}
.bv-item-detail__listing-name:hover { color: var(--bv-primary-ink); text-decoration: none; }
.bv-item-detail__listing-serial {
    font-size: 12px;
    color: var(--bv-ink3);
    font-weight: 600;
    margin-top: 2px;
}

.bv-item-detail__comments { display: flex; flex-direction: column; gap: 14px; }
.bv-item-detail__comment-form { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.bv-item-detail__comment-form textarea { width: 100%; }

.bv-item-detail__empty {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 28px 16px;
    color: var(--bv-ink3);
    font-size: 14px;
    font-weight: 600;
}
.bv-item-detail__empty .bi { font-size: 22px; opacity: 0.7; }

@media (max-width: 575.98px) {
    .bv-item-detail { gap: 18px; }
    .bv-item-detail__stats { grid-template-columns: repeat(3, 1fr); gap: 8px; }
    .bv-item-detail__stat-value { font-size: 13px; }
    .bv-item-detail__buy-row { flex-direction: column; align-items: stretch; }
    .bv-buy-btn { justify-content: center; }
    .bv-item-detail__section { padding: 16px; }
}

/* ================================================================
   Item-detail preview  -  type-aware presentation
   ================================================================ */

.bv-item-preview-frame {
    background: var(--bv-bg2);
    border: 1px solid var(--bv-hairline);
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* ---- Face items: show texture directly, big and centered ---- */
.bv-face-stage {
    width: 78%;
    aspect-ratio: 1 / 1;
    background: var(--bv-bg2);
    border-radius: 14%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.05),
        0 4px 24px rgba(0,0,0,0.25);
    overflow: hidden;
    position: relative;
}
/* Removed radial vignette overlay  -  the face texture already separates
   from the panel via the inset hairline; an extra ellipse gradient was
   pure ornament and read as AI styling. */
.bv-face-flat {
    width: 90%;
    height: 90%;
    object-fit: contain;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
    background: transparent;
}

/* 3D face-on-head viewer (item detail page) */
.bv-face-3d-viewer {
    width: 100%;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    overflow: hidden;
    background: radial-gradient(ellipse at 50% 40%, #2a2a3a 0%, #16161e 100%);
    cursor: grab;
}
.bv-face-3d-viewer:active { cursor: grabbing; }
.bv-face-3d-viewer canvas {
    width: 100% !important;
    height: 100% !important;
    display: block;
    border-radius: 12px;
}

/* Small "see on avatar" thumbnail in the corner of the face preview */
.bv-as-worn {
    position: absolute;
    bottom: 10px;
    right: 10px;
    width: 64px;
    height: 64px;
    border-radius: 12px;
    background: var(--bv-panel);
    border: 1px solid var(--bv-hairline);
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    overflow: hidden;
    transition: transform 0.15s ease;
}
.bv-as-worn:hover { transform: scale(1.06); }
.bv-as-worn img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: top;
}

/* ---- Hat: zoom to head region (top of avatar render) ---- */
.is-zoom-head {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 12%;
    transform: scale(1.6);
    transform-origin: 50% 22%;
}

/* ---- Shirt: zoom to torso ---- */
.is-zoom-torso {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 40%;
    transform: scale(1.5);
    transform-origin: 50% 45%;
}

/* ---- Pants: zoom to legs ---- */
.is-zoom-legs {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 70%;
    transform: scale(1.5);
    transform-origin: 50% 75%;
}

/* On phones: ease the zoom a touch so heads/torsos don't crop hard */
@media (max-width: 575.98px) {
    .is-zoom-head  { transform: scale(1.35); transform-origin: 50% 25%; }
    .is-zoom-torso { transform: scale(1.3);  transform-origin: 50% 50%; }
    .is-zoom-legs  { transform: scale(1.3);  transform-origin: 50% 75%; }
    .bv-thumb-zoom-face { transform: scale(1.5); transform-origin: 50% 20%; }
    .bv-as-worn { width: 52px; height: 52px; bottom: 8px; right: 8px; }
}

/* ================================================================
   Marketplace catalog thumbnails  -  type-aware
   Same idea as item-detail: actually show the part of the item that
   matters, not a tiny avatar from across the room.
   ================================================================ */

.bv-item-card__thumb {
    position: relative;
    overflow: hidden;
}

/* ---- Face card: show face texture directly ---- */
.bv-thumb-2 {
    background: var(--bv-bg2);
    display: flex;
    align-items: center;
    justify-content: center;
}
.bv-thumb-face {
    width: 76% !important;
    height: 76% !important;
    object-fit: contain !important;
    filter: drop-shadow(0 4px 14px rgba(0,0,0,0.25));
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
}

/* ---- Other types: avatar render zoomed to the relevant body region ---- */
.bv-thumb-zoom {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

/* Face → head (zoom into face area of avatar render) */
.bv-thumb-zoom-face {
    object-position: 50% 8% !important;
    transform: scale(1.8);
    transform-origin: 50% 18%;
}

/* Hat → head */
.bv-thumb-zoom-1 {
    object-position: 50% 5% !important;
    transform: scale(1.8);
    transform-origin: 50% 15%;
}

/* Shirt → torso */
.bv-thumb-zoom-4 {
    object-position: 50% 42% !important;
    transform: scale(1.4);
    transform-origin: 50% 45%;
}

/* Pants → legs */
.bv-thumb-zoom-5 {
    object-position: 50% 75% !important;
    transform: scale(1.4);
    transform-origin: 50% 75%;
}

/* T-shirt → torso (same as shirt) */
.bv-thumb-zoom-6 {
    object-position: 50% 42% !important;
    transform: scale(1.4);
    transform-origin: 50% 45%;
}

/* Accessory → head/upper body (varies by item; default to upper) */
.bv-thumb-zoom-3 {
    object-position: 50% 25% !important;
    transform: scale(1.4);
    transform-origin: 50% 28%;
}

/* Phone: ease zoom slightly */
@media (max-width: 575.98px) {
    .bv-thumb-zoom-1 { transform: scale(1.5); transform-origin: 50% 15%; }
    .bv-thumb-zoom-4, .bv-thumb-zoom-6 { transform: scale(1.25); }
    .bv-thumb-zoom-5 { transform: scale(1.25); }
    .bv-thumb-zoom-3 { transform: scale(1.25); }
    .bv-thumb-face { width: 80% !important; height: 80% !important; }
}

/* ================================================================
   Email-verification site-wide banner
   ================================================================ */
/* Quiet single-line "verify your email" notice. No colored fill, no
   button cluster  -  just a hairline strip that sits below the topbar
   with one inline link. The icon is the only colored element so it
   reads as informational, not blocking. */
.bv-verify-banner {
    background: var(--bv-bg2);
    border-bottom: 1px solid var(--bv-hairline);
    color: var(--bv-ink2);
    font-size: 12.5px;
    padding: 6px 12px 6px 232px; /* 220px sidebar + 12px gutter */
}
@media (max-width: 767.98px) {
    .bv-verify-banner { padding-left: 12px; }
}
.bv-verify-banner__inner {
    max-width: 1280px;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.bv-verify-banner__inner .bi { font-size: 13px; color: var(--bv-warn); flex-shrink: 0; }
.bv-verify-banner__inner span { color: var(--bv-ink2); }
.bv-verify-banner__link {
    background: none;
    border: none;
    color: var(--bv-primary);
    font-weight: 600;
    font-size: 12.5px;
    padding: 0;
    text-decoration: underline;
    cursor: pointer;
    font-family: var(--bv-font-body);
}
.bv-verify-banner__link:hover { color: var(--bv-primary-dark); }

/* ============================================================
   AVATAR CUSTOMIZER (redesigned 2026-05-08)
   Two-pane layout: 3D viewer left (sticky), tabbed inventory right.
   Flat brand surfaces, hairline borders, primary used only on the
   active tab + equipped tile stroke.
   ============================================================ */

.bv-customize {
    display: grid;
    grid-template-columns: minmax(320px, 380px) minmax(0, 1fr);
    gap: 24px;
    align-items: start;
    padding: 8px 0 32px;
}
@media (max-width: 991.98px) {
    .bv-customize { grid-template-columns: 1fr; }
}

/* ---- LEFT pane (sticky on desktop) ---- */
.bv-customize__left {
    position: sticky;
    top: 72px; /* clears the topbar */
    display: flex;
    flex-direction: column;
    gap: 14px;
}
@media (max-width: 991.98px) {
    .bv-customize__left { position: static; }
}

.bv-customize__viewer-card {
    background: var(--bv-panel);
    border: 1px solid var(--bv-hairline);
    border-radius: 14px;
    padding: 0;
    aspect-ratio: 3 / 4;
    position: relative;
    overflow: hidden;
}
.bv-customize__viewer {
    width: 100%;
    height: 100%;
    display: block;
    cursor: grab;
}
.bv-customize__viewer:active { cursor: grabbing; }
.bv-customize__viewer-hint {
    position: absolute;
    top: 10px;
    left: 10px;
    font-size: 11px;
    /* The pill floats OVER the 3D viewer and uses a dark glass
       background in both themes - so the text color has to be light
       regardless of theme. `var(--bv-ink3)` was used here originally
       but in light mode that token resolves to a dark gray, making
       the pill unreadable. Hardcode a light tone instead. */
    color: rgba(255,255,255,0.92);
    background: rgba(0,0,0,0.55);
    padding: 4px 8px;
    border-radius: 999px;
    pointer-events: none;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.bv-customize__viewer-hint .bi { margin-right: 4px; }
.bv-customize__viewer-fallback {
    height: 100%;
    display: grid;
    place-items: center;
    color: var(--bv-ink3);
    text-align: center;
    gap: 8px;
}
.bv-customize__viewer-fallback .bi { font-size: 28px; }

/* 2D mode: shows the user's cached avatar PNG instead of the live
   Three.js scene. Same aspect-ratio viewer-card so the layout doesn't
   shift when toggling. */
.bv-customize__viewer-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: var(--bv-bg2);
    display: block;
}

/* Top-right "switch viewer mode" button. Sits inside the viewer-card,
   above both the 3D viewer and the 2D fallback img. */
.bv-customize__viewer-toggle {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    /* Same logic as .viewer-hint: pill floats over the 3D viewer and
       uses a dark glass background regardless of theme, so the icon
       color needs to be light always. `var(--bv-ink2)` in light mode
       resolves to a dark gray that disappears into the pill. */
    background: rgba(0,0,0,0.55);
    border: 1px solid rgba(255,255,255,0.18);
    color: rgba(255,255,255,0.92);
    cursor: pointer;
    display: grid;
    place-items: center;
    font-size: 16px;
    transition: background .12s, color .12s, border-color .12s;
    z-index: 2;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.bv-customize__viewer-toggle:hover {
    background: var(--bv-primary);
    border-color: var(--bv-primary);
    color: #fff;
}

/* ---- Body type + orient pills ---- */
.bv-customize__quick {
    background: var(--bv-panel);
    border: 1px solid var(--bv-hairline);
    border-radius: 12px;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.bv-customize__quick-row {
    display: flex;
    align-items: center;
    gap: 10px;
}
.bv-customize__quick-lbl {
    font-size: 11px;
    font-weight: 700;
    color: var(--bv-ink3);
    width: 50px;
    flex-shrink: 0;
}
.bv-customize__pillgroup {
    display: flex;
    flex: 1;
    background: var(--bv-bg2);
    border: 1px solid var(--bv-hairline);
    border-radius: 999px;
    padding: 2px;
    gap: 2px;
}
.bv-customize__pill {
    flex: 1;
    border: none;
    background: transparent;
    color: var(--bv-ink2);
    font-size: 12px;
    font-weight: 600;
    padding: 5px 10px;
    border-radius: 999px;
    cursor: pointer;
    transition: background .12s, color .12s;
}
.bv-customize__pill:hover { color: var(--bv-ink); }
.bv-customize__pill.is-active {
    background: var(--bv-primary);
    color: #fff;
}
.bv-customize__pill.is-saving { opacity: 0.5; pointer-events: none; }

/* Full-width pill variant used for the Regenerate-avatar button. */
.bv-customize__regen {
    margin: 8px 0 12px;
}
.bv-customize__pill--full {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--bv-hairline);
    background: var(--bv-bg2);
    color: var(--bv-ink);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.bv-customize__pill--full:hover {
    border-color: var(--bv-hairline2);
    background: var(--bv-bg);
}

/* ---- Currently wearing strip ---- */
.bv-customize__wearing {
    background: var(--bv-panel);
    border: 1px solid var(--bv-hairline);
    border-radius: 12px;
    padding: 12px;
}
.bv-customize__wearing-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 13px;
    font-weight: 700;
    color: var(--bv-ink);
    margin-bottom: 10px;
}
.bv-customize__wearing-count {
    font-size: 11px;
    font-weight: 700;
    color: var(--bv-ink3);
    background: var(--bv-bg2);
    padding: 2px 8px;
    border-radius: 999px;
}
.bv-customize__wearing-empty {
    font-size: 13px;
    color: var(--bv-ink3);
    text-align: center;
    padding: 16px 8px;
}
.bv-customize__wearing-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}
.bv-customize__worn {
    position: relative;
    aspect-ratio: 1;
    background: var(--bv-bg2);
    border: 1px solid var(--bv-hairline);
    border-radius: 8px;
    padding: 4px;
    cursor: pointer;
    transition: border-color .12s;
}
.bv-customize__worn:hover { border-color: var(--bv-danger); }
.bv-customize__worn img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.bv-customize__worn-x {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.55);
    display: grid;
    place-items: center;
    color: var(--bv-danger);
    font-size: 22px;
    border-radius: 7px;
    opacity: 0;
    transition: opacity .12s;
}
.bv-customize__worn:hover .bv-customize__worn-x { opacity: 1; }
.bv-customize__worn-slot {
    position: absolute;
    top: 2px;
    right: 4px;
    font-size: 9px;
    font-weight: 800;
    color: var(--bv-primary);
    background: var(--bv-panel);
    padding: 1px 4px;
    border-radius: 3px;
}
.bv-customize__worn.is-saving { opacity: 0.5; pointer-events: none; }

/* ---- RIGHT pane ---- */
.bv-customize__right {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.bv-customize__tabs {
    display: flex;
    gap: 4px;
    background: var(--bv-panel);
    border: 1px solid var(--bv-hairline);
    border-radius: 10px;
    padding: 4px;
    overflow-x: auto;
}
.bv-customize__tab {
    flex: 1;
    min-width: max-content;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 12px;
    border-radius: 8px;
    color: var(--bv-ink2);
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    transition: background .12s, color .12s;
}
.bv-customize__tab:hover { background: var(--bv-bg2); color: var(--bv-ink); }
.bv-customize__tab.is-active {
    background: var(--bv-primary);
    color: #fff;
}
.bv-customize__tab.is-active:hover { background: var(--bv-primary-dark); color: #fff; }
.bv-customize__tab .bi { font-size: 14px; }
@media (max-width: 575.98px) {
    .bv-customize__tab span { display: none; }
}

/* ---- Search bar ---- */
.bv-customize__search {
    position: relative;
    display: flex;
    align-items: center;
}
.bv-customize__search > .bi {
    position: absolute;
    left: 12px;
    color: var(--bv-ink3);
    pointer-events: none;
}
.bv-customize__search input {
    width: 100%;
    height: 38px;
    background: var(--bv-panel);
    border: 1px solid var(--bv-hairline);
    border-radius: 9px;
    padding: 0 12px 0 36px;
    color: var(--bv-ink);
    font-size: 13.5px;
}
.bv-customize__search input:focus {
    outline: none;
    border-color: var(--bv-hairline2);
    box-shadow: 0 0 0 3px rgba(124,107,240,0.10);
}

/* ---- Panel + grid ---- */
.bv-customize__panel {
    background: var(--bv-panel);
    border: 1px solid var(--bv-hairline);
    border-radius: 12px;
    padding: 16px;
}
.bv-customize__panel-title { font-size: 18px; font-weight: 800; color: var(--bv-ink); margin: 0 0 4px; }
.bv-customize__panel-sub { font-size: 13px; color: var(--bv-ink3); margin: 0 0 16px; }

.bv-customize__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
    gap: 12px;
}
.bv-customize__tile {
    position: relative;
    background: var(--bv-bg2);
    border: 2px solid var(--bv-hairline);
    border-radius: 10px;
    padding: 8px;
    cursor: pointer;
    text-align: left;
    transition: border-color .12s, transform .08s;
}
.bv-customize__tile:hover {
    border-color: var(--bv-hairline2);
    transform: translateY(-1px);
}
.bv-customize__tile.is-equipped {
    border-color: var(--bv-primary);
    background: rgba(124, 107, 240, 0.06);
}
.bv-customize__tile.is-saving { opacity: 0.5; pointer-events: none; }
.bv-customize__tile-art {
    position: relative;
    aspect-ratio: 1;
    background: var(--bv-bg);
    border-radius: 8px;
    overflow: hidden;
    display: grid;
    place-items: center;
}
.bv-customize__tile-art img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.bv-customize__tile-tick {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--bv-primary);
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 13px;
    box-shadow: 0 1px 1px rgba(0,0,0,0.3);
}
.bv-customize__tile-name {
    margin-top: 6px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--bv-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ---- Empty state ---- */
.bv-customize__empty {
    text-align: center;
    padding: 40px 20px;
    color: var(--bv-ink3);
}
.bv-customize__empty .bi { font-size: 32px; display: block; margin-bottom: 10px; }
.bv-customize__empty p { font-size: 14px; margin: 0 0 14px; }

/* ---- Pagination ---- */
.bv-customize__pager {
    display: flex;
    justify-content: center;
    margin-top: 16px;
}

/* ---- Body color rows ---- */
.bv-customize__color-rows {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.bv-customize__color-row {
    background: var(--bv-bg2);
    border: 1px solid var(--bv-hairline);
    border-radius: 10px;
    padding: 12px;
}
.bv-customize__color-row-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}
.bv-customize__color-current {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    border: 1px solid var(--bv-hairline2);
    flex-shrink: 0;
}
.bv-customize__color-label {
    font-size: 14px;
    font-weight: 700;
    color: var(--bv-ink);
    flex: 1;
}
.bv-customize__color-hex {
    width: 100px;
    height: 30px;
    background: var(--bv-panel);
    border: 1px solid var(--bv-hairline);
    border-radius: 6px;
    padding: 0 8px;
    color: var(--bv-ink);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12px;
    text-transform: lowercase;
}
.bv-customize__color-hex:focus {
    outline: none;
    border-color: var(--bv-primary);
}
.bv-customize__color-swatches {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(28px, 1fr));
    gap: 6px;
}
.bv-customize__color-swatch {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    border: 1px solid var(--bv-hairline);
    cursor: pointer;
    transition: transform .08s, border-color .12s;
    padding: 0;
}
.bv-customize__color-swatch:hover {
    transform: scale(1.08);
    border-color: var(--bv-ink);
}

/* ---- Status pill ---- */
.bv-customize__status {
    align-self: flex-end;
    font-size: 12px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 999px;
    min-height: 24px;
    transition: opacity .12s, background .12s, color .12s;
}
.bv-customize__status[data-kind="idle"]   { opacity: 0; }
.bv-customize__status[data-kind="saving"] { background: var(--bv-bg2); color: var(--bv-ink3); opacity: 1; }
.bv-customize__status[data-kind="saved"]  { background: rgba(70,199,128,0.12); color: var(--bv-good); opacity: 1; }
.bv-customize__status[data-kind="error"]  { background: rgba(239,68,68,0.12); color: var(--bv-danger); opacity: 1; }

/* ============================================================
   CREATOR AREA (redesigned 2026-05-08)
   Tabbed item manager + inline "+ New" tile per tab. Same flat
   surface convention as the customizer.
   ============================================================ */

.bv-creator { padding: 8px 0 32px; }
.bv-creator__head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
    flex-wrap: wrap;
}
.bv-creator__sub { color: var(--bv-ink2); margin: 4px 0 0; font-size: 14px; }

/* Earnings overview row. Four-up tile grid that wraps to 2x2 on
   tablets and stacks on mobile. Each tile is a flat panel  -  same
   surface convention as the rest of the page  -  with a one-line
   sub-caption so the number itself stays the focal point. */
.bv-creator__stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin: 0 0 22px;
}
@media (max-width: 991px) { .bv-creator__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 540px) { .bv-creator__stats { grid-template-columns: 1fr; } }
.bv-creator__stat {
    background: var(--bv-panel);
    border: 1px solid var(--bv-hairline);
    border-radius: 12px;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    text-decoration: none;
    color: var(--bv-ink);
    transition: border-color .12s, transform .08s;
}
.bv-creator__stat--link:hover { border-color: var(--bv-hairline2); transform: translateY(-1px); color: var(--bv-ink); }
.bv-creator__stat-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--bv-ink2);
    font-weight: 700;
}
.bv-creator__stat-value {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 22px;
    font-weight: 800;
    color: var(--bv-ink);
    letter-spacing: -.01em;
    line-height: 1.1;
    min-height: 36px;
}
.bv-creator__stat-value i, .bv-creator__stat-value img { font-size: 18px; flex-shrink: 0; }
.bv-creator__stat-value--cash  { color: var(--bv-cash); }
.bv-creator__stat-value--coins { color: var(--bv-warn); }
.bv-creator__stat-value--muted { color: var(--bv-ink3); font-size: 16px; font-weight: 600; }
.bv-creator__stat-value--top {
    font-size: 14px; font-weight: 600; gap: 10px;
}
.bv-creator__stat-thumb {
    border-radius: 8px;
    object-fit: contain;
    background: var(--bv-bg2);
    flex-shrink: 0;
}
.bv-creator__stat-top-name { color: var(--bv-ink); font-weight: 700; }
.bv-creator__stat-sub {
    font-size: 12px;
    color: var(--bv-ink2);
    margin-top: 2px;
}

/* Per-tile sales stats row. Sits between the description and the
   price+menu footer. Hidden by default when the item has no sales. */
.bv-creator__tile-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 8px 0 4px;
    font-size: 12px;
    color: var(--bv-ink2);
}
.bv-creator__tile-stat {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-weight: 600;
}
.bv-creator__tile-stat i, .bv-creator__tile-stat img { flex-shrink: 0; }
.bv-creator__tile-stat--cash  { color: var(--bv-cash); }
.bv-creator__tile-stat--coins { color: var(--bv-warn); }

/* ============================================================
   FRIENDS PAGE (redesigned 2026-05-09)
   Compact card list with a 3-dot menu instead of a loud full-
   width red Unfriend button. Hover surfaces the menu; click
   opens a themed bvConfirm before actually removing.
   ============================================================ */
.bv-friends { padding: 8px 0 32px; }
.bv-friends__head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 18px;
}
.bv-friends__title {
    font-size: 28px;
    font-weight: 800;
    letter-spacing: -.01em;
    margin: 0 0 4px;
    color: var(--bv-ink);
}
.bv-friends__sub { color: var(--bv-ink2); margin: 0; font-size: 14px; }

.bv-friends__tabs {
    display: flex;
    gap: 4px;
    background: var(--bv-panel);
    border: 1px solid var(--bv-hairline);
    border-radius: 10px;
    padding: 4px;
    margin-bottom: 16px;
    width: fit-content;
}
.bv-friends__tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 8px;
    color: var(--bv-ink2);
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    transition: background-color .12s, color .12s;
}
.bv-friends__tab:hover { color: var(--bv-ink); background: var(--bv-bg2); }
.bv-friends__tab.is-active {
    color: var(--bv-primary-ink);
    background: var(--bv-primary-soft);
}
.bv-friends__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    padding: 0 7px;
    height: 18px;
    font-size: 11px;
    font-weight: 700;
    border-radius: 999px;
    background: var(--bv-bg2);
    color: var(--bv-ink2);
}
.bv-friends__tab.is-active .bv-friends__count {
    background: var(--bv-primary);
    color: #fff;
}
.bv-friends__count--alert { background: var(--bv-danger); color: #fff; }

.bv-friends__bulk {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: var(--bv-panel);
    border: 1px solid var(--bv-hairline);
    border-radius: 10px;
    padding: 10px 14px;
    margin-bottom: 12px;
    font-size: 13px;
    color: var(--bv-ink2);
    flex-wrap: wrap;
}

.bv-friends__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 10px;
}

.bv-friend-card {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--bv-panel);
    border: 1px solid var(--bv-hairline);
    border-radius: 12px;
    padding: 12px 14px;
    transition: border-color .12s;
}
.bv-friend-card:hover { border-color: var(--bv-hairline2); }

.bv-friend-card__avatar-wrap {
    position: relative;
    flex-shrink: 0;
    text-decoration: none;
}
.bv-friend-card__avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--bv-bg2);
    display: block;
}
.bv-friend-card__online {
    position: absolute;
    right: -1px;
    bottom: -1px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--bv-good);
    border: 2px solid var(--bv-panel);
}

.bv-friend-card__body {
    flex: 1;
    min-width: 0;
}
.bv-friend-card__name {
    display: block;
    color: var(--bv-ink);
    font-weight: 700;
    font-size: 15px;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.bv-friend-card__name:hover { color: var(--bv-primary-ink); }
.bv-friend-card__meta {
    color: var(--bv-ink2);
    font-size: 12px;
    margin-top: 2px;
}
.bv-friend-card__status--online { color: var(--bv-good); font-weight: 600; }

/* Three-dot menu trigger. Tucked into the corner so it doesn't
   compete with the avatar/name. Hover state matches .bv-creator__menu-btn. */
.bv-friend-card__menu-btn {
    background: transparent;
    border: 1px solid transparent;
    color: var(--bv-ink2);
    width: 30px;
    height: 30px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color .12s, color .12s, border-color .12s;
}
.bv-friend-card__menu-btn:hover { color: var(--bv-ink); background: var(--bv-bg2); border-color: var(--bv-hairline); }

/* Form-as-dropdown-item: the Unfriend action lives in a <form>
   inside <li> so the POST goes through the existing remove route.
   Strip the form's default block layout so the inner <button>
   inherits dropdown-item styling cleanly. */
.bv-friend-card__menu .dropdown-item-form {
    margin: 0;
    padding: 0;
}
.bv-friend-card__menu .dropdown-item-form .dropdown-item {
    background: transparent;
    border: 0;
    width: 100%;
    text-align: left;
    cursor: pointer;
}

/* Request card variant: side-by-side accept/decline icon buttons
   instead of a kebab menu. */
.bv-friend-card__actions {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}
.bv-friend-card__actions .bv-btn {
    width: 36px;
    height: 36px;
    padding: 0;
    justify-content: center;
}

.bv-friends__empty {
    text-align: center;
    padding: 60px 20px;
    color: var(--bv-ink2);
}
.bv-friends__empty i {
    font-size: 56px;
    color: var(--bv-ink3);
    display: block;
    margin-bottom: 12px;
}
.bv-friends__empty h3 {
    font-size: 18px;
    font-weight: 700;
    color: var(--bv-ink);
    margin: 0 0 4px;
}
.bv-friends__empty p { margin: 0 0 16px; font-size: 14px; }

.bv-creator__tabs {
    display: flex;
    gap: 4px;
    background: var(--bv-panel);
    border: 1px solid var(--bv-hairline);
    border-radius: 10px;
    padding: 4px;
}
.bv-creator__tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 8px;
    color: var(--bv-ink2);
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    transition: background .12s, color .12s;
}
.bv-creator__tab:hover { background: var(--bv-bg2); color: var(--bv-ink); }
.bv-creator__tab.is-active {
    background: var(--bv-primary);
    color: #fff;
}
.bv-creator__tab.is-active:hover { background: var(--bv-primary-dark); color: #fff; }

.bv-creator__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 14px;
}
.bv-creator__grid--wide {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

/* "+ New" upload tile  -  same dimensions as item cards so the grid
   stays uniform. Dashed border + primary color hint signal "this is
   the start-something action". */
.bv-creator__new-tile {
    display: block;
    background: var(--bv-bg2);
    border: 2px dashed var(--bv-hairline2);
    border-radius: 12px;
    text-decoration: none;
    color: var(--bv-ink);
    transition: border-color .12s, color .12s, background .12s;
    aspect-ratio: 1 / 1.25;
}
.bv-creator__new-tile:hover {
    border-color: var(--bv-primary);
    color: var(--bv-primary);
    background: rgba(124,107,240,0.04);
    text-decoration: none;
}
.bv-creator__new-tile-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    height: 100%;
    padding: 18px;
    gap: 6px;
}
.bv-creator__new-tile-inner .bi {
    font-size: 28px;
    color: var(--bv-primary);
}
.bv-creator__new-tile-inner span:not(.bv-creator__new-tile-sub) {
    font-size: 14px;
    font-weight: 700;
}
.bv-creator__new-tile-sub {
    font-size: 11.5px;
    color: var(--bv-ink3);
    font-weight: 500;
    line-height: 1.3;
}

/* Item card */
.bv-creator__tile {
    background: var(--bv-panel);
    border: 1px solid var(--bv-hairline);
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: border-color .12s;
}
.bv-creator__tile:hover { border-color: var(--bv-hairline2); }
.bv-creator__tile-art {
    position: relative;
    background: var(--bv-bg2);
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    overflow: hidden;
}
.bv-creator__tile-art img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.bv-creator__tile-art--ad img { object-fit: cover; }
.bv-creator__tile-body {
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
}
.bv-creator__tile-eyebrow {
    font-size: 10.5px;
    font-weight: 800;
    color: var(--bv-ink3);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.bv-creator__tile-name {
    font-size: 14px;
    font-weight: 700;
    color: var(--bv-ink);
    text-decoration: none;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.bv-creator__tile-name:hover { color: var(--bv-primary); text-decoration: none; }
.bv-creator__tile-desc {
    font-size: 12px;
    color: var(--bv-ink3);
    line-height: 1.35;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.bv-creator__tile-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
    padding-top: 4px;
    gap: 8px;
}

/* Status pill (top-left of art) */
.bv-creator__status {
    position: absolute;
    top: 8px;
    left: 8px;
    font-size: 10.5px;
    font-weight: 800;
    padding: 3px 8px;
    border-radius: 999px;
    background: var(--bv-bg2);
    border: 1px solid var(--bv-hairline);
    color: var(--bv-ink3);
}
.bv-creator__status--live    { background: rgba(70,199,128,0.14); border-color: rgba(70,199,128,0.30); color: var(--bv-good); }
.bv-creator__status--pending { background: rgba(255,193,7,0.14);  border-color: rgba(255,193,7,0.30);  color: var(--bv-warn); }
.bv-creator__status--hidden  { background: rgba(239,68,68,0.14);  border-color: rgba(239,68,68,0.30);  color: var(--bv-danger); }

/* Price pill (replaces the old "-1 coins" raw-number bug) */
.bv-creator__price {
    display: inline-flex;
    align-items: center;
    font-size: 12.5px;
    font-weight: 800;
    padding: 3px 9px;
    border-radius: 999px;
    line-height: 1;
}
.bv-creator__price--cash  { background: rgba(70,199,128,0.14);  color: var(--bv-good); }
.bv-creator__price--coins { background: rgba(255,193,7,0.14);   color: var(--bv-warn); }
.bv-creator__price--free  { background: var(--bv-bg2);          color: var(--bv-ink2); }
.bv-creator__price--off   { background: var(--bv-bg2);          color: var(--bv-ink3); }

/* Three-dot menu */
.bv-creator__menu { position: relative; }
.bv-creator__menu-btn {
    background: transparent;
    border: 1px solid var(--bv-hairline);
    border-radius: 6px;
    width: 28px;
    height: 28px;
    color: var(--bv-ink2);
    cursor: pointer;
    display: grid;
    place-items: center;
    font-size: 14px;
}
.bv-creator__menu-btn:hover {
    background: var(--bv-bg2);
    color: var(--bv-ink);
    border-color: var(--bv-hairline2);
}

/* Ad card actions */
.bv-creator__takedown {
    background: transparent;
    border: 1px solid rgba(239,68,68,0.30);
    color: var(--bv-danger);
    padding: 5px 10px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background .12s;
}
.bv-creator__takedown:hover {
    background: rgba(239,68,68,0.12);
}

/* Empty state */
.bv-creator__empty {
    text-align: center;
    padding: 60px 20px;
    background: var(--bv-panel);
    border: 1px solid var(--bv-hairline);
    border-radius: 12px;
    color: var(--bv-ink2);
    margin-top: 18px;
}
.bv-creator__empty .bi { font-size: 32px; display: block; margin-bottom: 10px; color: var(--bv-ink3); }
.bv-creator__empty p { font-size: 14px; margin: 0 0 14px; }

/* Template hint, collapsible <details> */
.bv-creator__tip {
    margin-top: 24px;
    background: var(--bv-panel);
    border: 1px solid var(--bv-hairline);
    border-radius: 10px;
    padding: 12px 14px;
}
.bv-creator__tip > summary {
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    color: var(--bv-ink);
    list-style: none;
}
.bv-creator__tip > summary::-webkit-details-marker { display: none; }
.bv-creator__tip-body {
    margin-top: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}
.bv-creator__tip-body img {
    max-width: 100%;
    max-height: 240px;
    border-radius: 8px;
    border: 1px solid var(--bv-hairline);
    background: var(--bv-bg2);
}

/* ============================================================
   BLOG (blog.buildaverse.com  -  public)
   Card grid for the index, prose-style article for show().
   Same flat surface convention as the rest of the site.
   ============================================================ */

.bv-blog { padding: 8px 0 32px; max-width: 1100px; margin: 0 auto; }
.bv-blog__head { margin-bottom: 28px; }
.bv-blog__h1 {
    font-size: 36px;
    font-weight: 800;
    color: var(--bv-ink);
    letter-spacing: -.02em;
    margin: 0 0 6px;
}
.bv-blog__sub { color: var(--bv-ink2); font-size: 15px; margin: 0 0 18px; max-width: 560px; }

.bv-blog__search {
    position: relative;
    max-width: 380px;
}
.bv-blog__search > .bi {
    position: absolute;
    left: 12px; top: 50%; transform: translateY(-50%);
    color: var(--bv-ink3);
    pointer-events: none;
}
.bv-blog__search input {
    width: 100%;
    height: 38px;
    background: var(--bv-panel);
    border: 1px solid var(--bv-hairline);
    border-radius: 9px;
    padding: 0 12px 0 36px;
    color: var(--bv-ink);
    font-size: 13.5px;
}
.bv-blog__search input:focus {
    outline: none;
    border-color: var(--bv-hairline2);
    box-shadow: 0 0 0 3px rgba(124,107,240,0.10);
}

.bv-blog__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 18px;
}
.bv-blog__card {
    background: var(--bv-panel);
    border: 1px solid var(--bv-hairline);
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: border-color .12s, transform .08s;
}
.bv-blog__card:hover {
    border-color: var(--bv-hairline2);
    transform: translateY(-1px);
}
.bv-blog__cover {
    display: block;
    aspect-ratio: 16 / 9;
    background: var(--bv-bg2);
    overflow: hidden;
}
.bv-blog__cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.bv-blog__card-body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.bv-blog__card-title {
    font-size: 17px;
    font-weight: 800;
    color: var(--bv-ink);
    text-decoration: none;
    line-height: 1.25;
}
.bv-blog__card-title:hover { color: var(--bv-primary); text-decoration: none; }
.bv-blog__card-excerpt {
    font-size: 13.5px;
    color: var(--bv-ink2);
    line-height: 1.5;
    margin: 0;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}
.bv-blog__card-meta {
    margin-top: auto;
    font-size: 12px;
    color: var(--bv-ink3);
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.bv-blog__empty {
    text-align: center;
    padding: 80px 20px;
    background: var(--bv-panel);
    border: 1px solid var(--bv-hairline);
    border-radius: 12px;
    color: var(--bv-ink2);
}
.bv-blog__empty .bi { font-size: 36px; display: block; margin-bottom: 12px; color: var(--bv-ink3); }
.bv-blog__empty p { font-size: 15px; margin: 0; }

.bv-blog__pager {
    display: flex;
    justify-content: center;
    margin-top: 28px;
}

/* ---- Single post (article) ---- */
.bv-post {
    max-width: 760px;
    margin: 0 auto;
    padding: 8px 0 32px;
}
.bv-post__back {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--bv-ink3);
    font-size: 13px;
    text-decoration: none;
    margin-bottom: 18px;
}
.bv-post__back:hover { color: var(--bv-ink); }
.bv-post__head { margin-bottom: 22px; }
.bv-post__title {
    font-size: 38px;
    font-weight: 800;
    color: var(--bv-ink);
    letter-spacing: -.02em;
    line-height: 1.15;
    margin: 0 0 10px;
}
.bv-post__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    color: var(--bv-ink3);
    font-size: 13px;
}
.bv-post__byline { color: var(--bv-ink2); font-weight: 600; }

.bv-post__cover {
    margin: 0 0 24px;
    border-radius: 12px;
    overflow: hidden;
    background: var(--bv-bg2);
    border: 1px solid var(--bv-hairline);
}
.bv-post__cover img {
    width: 100%;
    height: auto;
    display: block;
}

/* Markdown body. Heading scale + list spacing tuned for long-form
   reading (vs. a marketing landing page). max-width on the article
   above caps line length around 70-75ch. */
.bv-post__body {
    font-size: 16.5px;
    line-height: 1.7;
    color: var(--bv-ink);
}
.bv-post__body h1,
.bv-post__body h2,
.bv-post__body h3,
.bv-post__body h4 {
    font-weight: 800;
    color: var(--bv-ink);
    letter-spacing: -.01em;
    margin: 1.6em 0 0.6em;
    line-height: 1.25;
}
.bv-post__body h1 { font-size: 28px; }
.bv-post__body h2 { font-size: 24px; }
.bv-post__body h3 { font-size: 19px; }
.bv-post__body h4 { font-size: 16px; }
.bv-post__body p { margin: 0 0 1.1em; }
.bv-post__body a { color: var(--bv-primary); text-decoration: underline; text-underline-offset: 2px; }
.bv-post__body a:hover { color: var(--bv-primary-dark); }
.bv-post__body ul,
.bv-post__body ol { margin: 0 0 1.1em 1.4em; padding: 0; }
.bv-post__body li { margin: 0 0 .35em; }
.bv-post__body blockquote {
    margin: 1.2em 0;
    padding: .4em 1em;
    border-left: 3px solid var(--bv-primary);
    color: var(--bv-ink2);
    background: var(--bv-bg2);
    border-radius: 0 6px 6px 0;
}
.bv-post__body code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.92em;
    background: var(--bv-bg2);
    padding: 1px 6px;
    border-radius: 4px;
    border: 1px solid var(--bv-hairline);
    color: var(--bv-ink);
}
.bv-post__body pre {
    background: var(--bv-bg2);
    border: 1px solid var(--bv-hairline);
    border-radius: 8px;
    padding: 14px 16px;
    overflow-x: auto;
    margin: 1.2em 0;
    font-size: 13.5px;
    line-height: 1.5;
}
.bv-post__body pre code {
    background: none;
    border: none;
    padding: 0;
    font-size: inherit;
    color: var(--bv-ink);
}
.bv-post__body img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    border: 1px solid var(--bv-hairline);
    margin: 1.2em 0;
}
.bv-post__body table {
    border-collapse: collapse;
    width: 100%;
    margin: 1.2em 0;
    font-size: 14px;
}
.bv-post__body th,
.bv-post__body td {
    border: 1px solid var(--bv-hairline);
    padding: 8px 12px;
    text-align: left;
}
.bv-post__body th { background: var(--bv-bg2); font-weight: 700; }
.bv-post__body hr {
    border: none;
    border-top: 1px solid var(--bv-hairline);
    margin: 2em 0;
}

.bv-post__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid var(--bv-hairline);
}
.bv-post__share a {
    color: var(--bv-ink3);
    margin-left: 12px;
    font-size: 18px;
    text-decoration: none;
}
.bv-post__share a:hover { color: var(--bv-primary); }

.bv-post__more { max-width: 1100px; margin: 40px auto 32px; }
.bv-post__more-h {
    font-size: 18px;
    font-weight: 800;
    color: var(--bv-ink);
    margin: 0 0 16px;
}

/* ---- Mod / admin action indicator in dropdown menus ----
   Subtle distinction so a moderator never accidentally clicks a
   write action when they meant Report. Used everywhere admin or
   moderator-only items live in a dropdown next to user-visible
   options (forum thread / reply, blurb feed, item comments). */
.bv-mod-header {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--bv-ink3);
    text-transform: uppercase;
    padding: 8px 16px 4px;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 6px;
}
.bv-mod-header::before {
    content: "";
    flex: 0 0 auto;
    width: 10px;
    height: 10px;
    background: var(--bv-primary);
    border-radius: 2px;
    box-shadow: inset 0 0 0 2px var(--bv-panel);
    border: 1px solid var(--bv-primary);
}
.dropdown-item.bv-mod-action {
    position: relative;
    padding-left: 32px;
}
.dropdown-item.bv-mod-action::before {
    content: "\F555"; /* bi-shield-fill-check (Bootstrap Icons private-use codepoint) */
    font-family: "bootstrap-icons";
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--bv-primary);
    font-size: 13px;
}
.dropdown-item.bv-mod-action:hover,
.dropdown-item.bv-mod-action:focus {
    background: rgba(124, 107, 240, 0.08);
}

/* ---- Emoji picker (driven by public/js/emoji-picker.js) ----
   Auto-injected button + global popover. Single panel reused
   across every text field that opts in via data-emoji. */
.bv-emoji-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    margin-left: 6px;
    padding: 0;
    border-radius: 8px;
    border: 1px solid var(--bv-hairline);
    background: var(--bv-bg2);
    color: var(--bv-ink);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    vertical-align: middle;
    transition: background .12s, border-color .12s, transform .08s;
}

/* ============= COMPOSER (single-line status post on /dashboard) =============
   Avatar | input | (emoji 😊 injected by emoji-picker.js) | Post button.
   The emoji button is appended into the form by JS, so we have to style it
   contextually here  -  the global .bv-emoji-btn rules ship a 30x30 chip
   with margin-left:6px which doesn't line up with a 40px input + 40px
   submit. Inside .bv-composer we bump it to 40x40 and zero the margin so
   the parent gap is the only gap.
   ============================================================================ */
.bv-composer {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
}
.bv-composer__avatar {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    object-fit: cover;
}
.bv-composer__input.form-control {
    flex: 1 1 auto;
    height: 40px;
    min-width: 0;
}
.bv-composer__submit.btn {
    height: 40px;
    padding: 0 18px;
    flex-shrink: 0;
    font-weight: 600;
}
.bv-composer .bv-emoji-btn {
    width: 40px;
    height: 40px;
    margin-left: 0;
    flex-shrink: 0;
    font-size: 18px;
}
.bv-emoji-btn:hover {
    background: var(--bv-primary-soft);
    border-color: var(--bv-primary);
    transform: translateY(-1px);
}
#bvEmojiPicker {
    position: absolute;
    z-index: 2000;
    width: 320px;
    max-height: 320px;
    background: var(--bv-panel);
    border: 1px solid var(--bv-hairline);
    border-radius: 12px;
    box-shadow: var(--bv-shadow);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.bv-emoji__tabs {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 6px;
    border-bottom: 1px solid var(--bv-hairline);
    background: var(--bv-bg2);
}
.bv-emoji__tab {
    flex: 1;
    height: 30px;
    padding: 0;
    border: none;
    border-radius: 6px;
    background: transparent;
    cursor: pointer;
    font-size: 17px;
    line-height: 1;
    transition: background .12s;
}
.bv-emoji__tab:hover { background: var(--bv-hairline); }
.bv-emoji__tab.is-active {
    background: var(--bv-primary-soft);
    box-shadow: inset 0 0 0 1px var(--bv-primary);
}
.bv-emoji__grid {
    flex: 1;
    overflow-y: auto;
    padding: 8px;
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 2px;
    align-content: start;
}
.bv-emoji__cell {
    width: 100%;
    aspect-ratio: 1;
    padding: 0;
    border: none;
    background: transparent;
    border-radius: 6px;
    cursor: pointer;
    font-size: 20px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .08s, transform .08s;
}
.bv-emoji__cell:hover {
    background: var(--bv-primary-soft);
    transform: scale(1.15);
}
@media (max-width: 480px) {
    #bvEmojiPicker { width: calc(100vw - 16px); }
    .bv-emoji__grid { grid-template-columns: repeat(7, 1fr); }
}

/* ============================================================
   Community page - hero, tabs, group chat
   ============================================================ */

/* ── Hero header ── */
.bv-comm-hero {
    display: flex;
    align-items: center;
    gap: 18px;
    background: var(--bv-panel);
    border: 1px solid var(--bv-hairline);
    border-radius: 14px;
    padding: 20px 22px;
    margin-bottom: 18px;
    box-shadow: var(--bv-shadow);
}
.bv-comm-hero__logo {
    width: 68px;
    height: 68px;
    border-radius: 12px;
    overflow: hidden;
    flex-shrink: 0;
    background: var(--bv-bg2);
    display: block;
}
.bv-comm-hero__logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.bv-comm-hero__body {
    flex: 1;
    min-width: 0;
}
.bv-comm-hero__name {
    font-size: clamp(20px, 3vw, 26px);
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--bv-ink);
    line-height: 1.2;
    margin-bottom: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.bv-comm-hero__meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    font-size: 13px;
    color: var(--bv-ink2);
}
.bv-comm-hero__sep { color: var(--bv-ink3); }
.bv-comm-hero__actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    flex-wrap: wrap;
    justify-content: flex-end;
}

/* ── Tabs ── */
.bv-comm-tabs {
    gap: 4px;
    margin-bottom: 16px !important;
}
.bv-comm-tab {
    background: transparent !important;
    border: 1px solid var(--bv-hairline) !important;
    border-radius: 9px !important;
    color: var(--bv-ink2) !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    padding: 8px 16px !important;
    transition: background .12s, color .12s, border-color .12s !important;
}
.bv-comm-tab:hover:not(.active) {
    background: var(--bv-bg2) !important;
    color: var(--bv-ink) !important;
    border-color: var(--bv-hairline2) !important;
}
.bv-comm-tab.active {
    background: var(--bv-primary-soft) !important;
    color: var(--bv-primary-ink) !important;
    border-color: transparent !important;
}
.bv-comm-tab__count {
    display: inline-block;
    background: var(--bv-bg2);
    color: var(--bv-ink3);
    border-radius: 999px;
    font-size: 11px;
    padding: 1px 7px;
    margin-left: 5px;
    font-weight: 700;
}
.bv-comm-tab.active .bv-comm-tab__count {
    background: var(--bv-primary);
    color: #fff;
}

/* ── Group Chat ── */
.bv-comm-chat {
    background: var(--bv-panel);
    border: 1px solid var(--bv-hairline);
    border-radius: 14px;
    display: flex;
    flex-direction: column;
    height: calc(100vh - 380px);
    min-height: 420px;
    overflow: hidden;
    box-shadow: var(--bv-shadow);
}
.bv-comm-chat__msgs {
    flex: 1;
    overflow-y: auto;
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    scroll-behavior: smooth;
}
.bv-comm-chat__compose {
    padding: 12px 16px;
    border-top: 1px solid var(--bv-hairline);
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--bv-panel);
    flex-shrink: 0;
}
.bv-comm-chat { position: relative; }
.bv-comm-chat__compose input {
    flex: 1;
    background: var(--bv-bg2);
    border: 1px solid var(--bv-hairline);
    border-radius: 999px;
    padding: 10px 18px;
    color: var(--bv-ink);
    font-size: 14px;
    outline: none;
    transition: border-color .12s;
}
.bv-comm-chat__compose input:focus {
    border-color: var(--bv-hairline2);
}
.bv-comm-chat__compose input::placeholder { color: var(--bv-ink3); }
.bv-comm-chat__send {
    width: 40px; height: 40px;
    border-radius: 50%;
    border: none;
    background: var(--bv-primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    cursor: pointer;
    flex-shrink: 0;
    transition: filter .12s, transform .1s;
    box-shadow: 0 4px 12px rgba(124,107,240,.35);
}
.bv-comm-chat__send:hover { filter: brightness(1.08); }
.bv-comm-chat__send:active { transform: scale(.93); }
.bv-comm-chat__send:disabled { opacity: .4; cursor: not-allowed; box-shadow: none; }

/* ── GIF button ── */
.gc-gif-btn {
    height: 36px;
    padding: 0 10px;
    border-radius: 8px;
    border: 1px solid var(--bv-hairline);
    background: var(--bv-bg2);
    color: var(--bv-ink2);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .04em;
    cursor: pointer;
    flex-shrink: 0;
    transition: background .12s, border-color .12s, color .12s;
}
.gc-gif-btn:hover, .gc-gif-btn.active {
    background: var(--bv-primary);
    border-color: var(--bv-primary);
    color: #fff;
}

/* ── GIF picker panel ── */
.gc-gif-picker {
    position: absolute;
    bottom: calc(100% + 6px);
    left: 16px;
    right: 16px;
    background: var(--bv-panel);
    border: 1px solid var(--bv-hairline);
    border-radius: 14px;
    box-shadow: 0 8px 32px rgba(0,0,0,.18);
    z-index: 50;
    display: flex;
    flex-direction: column;
    max-height: 320px;
    overflow: hidden;
}
.gc-gif-picker__header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--bv-hairline);
    flex-shrink: 0;
}
.gc-gif-picker__header input {
    flex: 1;
    background: var(--bv-bg2);
    border: 1px solid var(--bv-hairline);
    border-radius: 8px;
    padding: 6px 12px;
    font-size: 13px;
    color: var(--bv-ink);
    outline: none;
}
.gc-gif-picker__header input::placeholder { color: var(--bv-ink3); }
.gc-gif-picker__close {
    background: transparent;
    border: none;
    color: var(--bv-ink3);
    cursor: pointer;
    font-size: 14px;
    padding: 4px;
    flex-shrink: 0;
}
.gc-gif-picker__close:hover { color: var(--bv-ink); }
.gc-gif-picker__grid {
    flex: 1;
    overflow-y: auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
    padding: 8px;
}
.gc-gif-picker__grid img {
    width: 100%;
    aspect-ratio: 16/9;
    object-fit: cover;
    border-radius: 6px;
    cursor: pointer;
    transition: transform .1s, opacity .1s;
}
.gc-gif-picker__grid img:hover { transform: scale(1.04); opacity: .9; }
.gc-gif-picker__footer {
    padding: 5px 10px;
    border-top: 1px solid var(--bv-hairline);
    text-align: right;
    flex-shrink: 0;
}

/* ── GIF message ── */
.gc-msg__gif {
    max-width: 220px;
    border-radius: 10px;
    display: block;
    margin-top: 4px;
}
.gc-msg--gif .gc-msg__body { background: transparent !important; }

/* ── Message rows ── */
.gc-msg {
    display: flex;
    gap: 10px;
    padding: 6px 8px;
    border-radius: 10px;
    transition: background .1s;
}
.gc-msg:hover { background: var(--bv-bg2); }
.gc-msg--mine { background: rgba(124,107,240,.06); }
.gc-msg--mine:hover { background: rgba(124,107,240,.1); }
.gc-msg__avatar {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    object-fit: cover;
    flex-shrink: 0;
    background: var(--bv-bg2);
    margin-top: 2px;
}
.gc-msg__content { flex: 1; min-width: 0; }
.gc-msg__meta {
    display: flex;
    align-items: baseline;
    gap: 7px;
    margin-bottom: 3px;
    flex-wrap: wrap;
}
.gc-msg__name {
    font-weight: 800;
    font-size: 13px;
    color: var(--bv-ink);
    text-decoration: none;
    letter-spacing: -.005em;
}
.gc-msg__name:hover { color: var(--bv-primary-ink); }
.gc-msg--mine .gc-msg__name { color: var(--bv-primary-ink); }
.gc-msg__rank {
    font-size: 10.5px;
    font-weight: 700;
    color: var(--bv-ink3);
    background: var(--bv-bg2);
    border-radius: 4px;
    padding: 1px 6px;
    letter-spacing: .02em;
}
.gc-msg__time {
    font-size: 10.5px;
    color: var(--bv-ink3);
    font-weight: 600;
    margin-left: auto;
}
.gc-msg__body {
    font-size: 13.5px;
    color: var(--bv-ink);
    line-height: 1.5;
    word-break: break-word;
}

/* ── Chat utility states ── */
.gc-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px;
    flex: 1;
}
.gc-empty {
    text-align: center;
    color: var(--bv-ink3);
    font-size: 13.5px;
    padding: 32px 16px;
}
.gc-load-more {
    display: flex;
    justify-content: center;
    margin-bottom: 12px;
}
.gc-load-more-btn {
    background: var(--bv-bg2);
    border: 1px solid var(--bv-hairline);
    color: var(--bv-ink2);
    font-size: 12px;
    font-weight: 700;
    border-radius: 999px;
    padding: 5px 14px;
    cursor: pointer;
    transition: background .12s, color .12s;
}
.gc-load-more-btn:hover { background: var(--bv-panel2); color: var(--bv-ink); }

/* ── Messages sidebar: Communities tab ── */
.chat-sidebar-mode-tabs {
    display: flex;
    flex: 1;
    gap: 4px;
}
.chat-mode-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 8px;
    border: none;
    background: transparent;
    color: var(--bv-ink3);
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    transition: background .12s, color .12s;
    letter-spacing: -.005em;
}
.chat-mode-tab:hover { background: var(--bv-bg2); color: var(--bv-ink); }
.chat-mode-tab.active { background: var(--bv-primary-soft); color: var(--bv-primary-ink); }
.chat-mode-tab .bi { font-size: 13px; }

/* ── Responsive ── */
@media (max-width: 767.98px) {
    .bv-comm-hero {
        flex-wrap: wrap;
        gap: 14px;
        padding: 16px;
    }
    .bv-comm-hero__actions { width: 100%; justify-content: flex-start; }
    .bv-comm-chat {
        height: calc(100vh - 320px);
        min-height: 360px;
    }
}

/* ================================================================
   MOBILE PASS v4  -  search overlay, topbar polish, page-by-page
   ================================================================ */

/* ── Mobile topbar: search trigger button ── */
.bv-mobile-topbar__search-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: var(--bv-bg2);
    border: 1px solid var(--bv-hairline);
    border-radius: 9px;
    color: var(--bv-ink2);
    cursor: pointer;
    flex-shrink: 0;
    transition: background .12s, color .12s, border-color .12s;
    margin-left: 4px;
}
.bv-mobile-topbar__search-btn:hover,
.bv-mobile-topbar__search-btn:focus {
    background: var(--bv-primary-soft);
    border-color: transparent;
    color: var(--bv-primary-ink);
    outline: none;
}
.bv-mobile-topbar__search-btn i { font-size: 15px; line-height: 1; }

/* ── Mobile search overlay ── */
.bv-mobile-search {
    display: none;        /* shown by .is-open */
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1080;
    background: var(--bv-bg);
    flex-direction: column;
    padding-top: env(safe-area-inset-top, 0px);
    overflow: hidden;
}
.bv-mobile-search.is-open { display: flex; }

.bv-mobile-search__bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background: var(--bv-panel);
    border-bottom: 1px solid var(--bv-hairline);
    flex-shrink: 0;
}
.bv-mobile-search__back {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: var(--bv-ink2);
    font-size: 18px;
    border-radius: 8px;
    cursor: pointer;
    transition: background .12s, color .12s;
}
.bv-mobile-search__back:hover { background: var(--bv-bg2); color: var(--bv-ink); }

.bv-mobile-search__input-wrap {
    flex: 1;
    position: relative;
    display: flex;
    align-items: center;
}
.bv-mobile-search__icon {
    position: absolute;
    left: 13px;
    color: var(--bv-ink3);
    font-size: 14px;
    pointer-events: none;
    line-height: 1;
}
.bv-mobile-search__input {
    width: 100%;
    background: var(--bv-bg2);
    border: 1px solid var(--bv-hairline);
    border-radius: 10px;
    padding: 10px 38px 10px 38px;
    color: var(--bv-ink);
    font-size: 16px;   /* prevents iOS zoom-on-focus */
    font-weight: 500;
    outline: none;
    line-height: 1.2;
    transition: border-color .12s, background .12s;
}
.bv-mobile-search__input:focus {
    border-color: var(--bv-primary);
    background: var(--bv-panel);
}
.bv-mobile-search__input::placeholder { color: var(--bv-ink3); }

.bv-mobile-search__clear {
    position: absolute;
    right: 10px;
    display: none;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: var(--bv-ink3);
    font-size: 16px;
    padding: 4px;
    cursor: pointer;
    line-height: 1;
}
.bv-mobile-search__clear:hover { color: var(--bv-ink); }

/* Results container scrolls */
.bv-mobile-search__results {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 8px 0 calc(80px + env(safe-area-inset-bottom, 0px));
}

/* Quick shortcuts (idle state) */
.bv-mobile-search__shortcuts {
    padding: 16px 0 8px;
}
.bv-mobile-search__shortcuts-label {
    padding: 0 16px 8px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--bv-ink3);
}
.bv-mobile-search__shortcut {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    color: var(--bv-ink);
    text-decoration: none;
    font-size: 15px;
    font-weight: 600;
    transition: background .1s;
}
.bv-mobile-search__shortcut:hover,
.bv-mobile-search__shortcut:active { background: var(--bv-bg2); color: var(--bv-ink); }
.bv-mobile-search__shortcut-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: var(--bv-bg2);
    border: 1px solid var(--bv-hairline);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: var(--bv-primary-ink);
    flex-shrink: 0;
}

/* Suggest results */
.bv-mobile-search__group { padding: 8px 0; }
.bv-mobile-search__group + .bv-mobile-search__group {
    border-top: 1px solid var(--bv-hairline);
}
.bv-mobile-search__group-label {
    padding: 6px 16px 4px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--bv-ink3);
}
.bv-mobile-search__row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    text-decoration: none;
    transition: background .1s;
    min-height: 52px;
}
.bv-mobile-search__row:hover,
.bv-mobile-search__row:active { background: var(--bv-bg2); }
.bv-mobile-search__row-img {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    object-fit: contain;
    background: var(--bv-bg2);
    flex-shrink: 0;
}
.bv-mobile-search__row-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--bv-bg2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: var(--bv-ink2);
    flex-shrink: 0;
}
.bv-mobile-search__row-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.bv-mobile-search__row-name {
    font-size: 15px;
    font-weight: 700;
    color: var(--bv-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.bv-mobile-search__row-sub {
    font-size: 12px;
    color: var(--bv-ink3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.bv-mobile-search__empty {
    padding: 32px 20px 12px;
    text-align: center;
    color: var(--bv-ink3);
    font-size: 14px;
}
.bv-mobile-search__seeall {
    display: block;
    margin: 4px 16px 8px;
    padding: 13px 16px;
    background: var(--bv-bg2);
    border-radius: 10px;
    text-align: center;
    color: var(--bv-primary-ink);
    font-size: 13.5px;
    font-weight: 700;
    text-decoration: none;
    border: 1px solid var(--bv-hairline);
    transition: background .12s;
}
.bv-mobile-search__seeall:hover { background: var(--bv-primary-soft); border-color: transparent; }

/* Backdrop dims page behind overlay on non-full-screen contexts */
.bv-mobile-search__backdrop {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1079;
    background: rgba(0,0,0,.4);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}
.bv-mobile-search__backdrop.is-visible { display: block; }

/* Lock body scroll while search is open */
body.bv-search-open { overflow: hidden !important; }


/* ── Bottom nav: active indicator pill ── */
@media (max-width: 767.98px) {
    .bv-mb-item.is-active i {
        background: rgba(124,107,240,.15);
        border-radius: 8px;
        padding: 4px 12px;
    }
}


/* ── Dashboard: tighter hero on phones ── */
@media (max-width: 575.98px) {
    /* The "view profile" CTA in the welcome banner is redundant on mobile
       (bottom nav has a profile shortcut). Saves a row of space. */
    .bv-welcome > .btn.btn-outline-light { display: none; }

    /* Quick actions: more breathing room on each tile */
    .bv-qa-tile {
        border-radius: 14px !important;
        padding: 16px 12px !important;
    }
    /* Login streak card: horizontal compact layout */
    .bv-streak { gap: 10px; padding: 14px !important; }
    .bv-streak__next-label,
    .bv-streak__next-value { font-size: 11px !important; }
}


/* ── Market index: feature banner on mobile ── */
@media (max-width: 767.98px) {
    /* The feature banner thumbnails are d-none on <lg. On mobile we still show
       the banner title and CTA, just without the grid of thumbnails. */
    .bv-feature-banner {
        padding: 20px 18px !important;
        border-radius: 14px !important;
        gap: 12px !important;
    }
    .bv-feature-banner__title { font-size: 20px !important; }
    .bv-feature-banner__sub   { font-size: 13px !important; }

    /* Item cards: slightly larger touch target + tighter label */
    .bv-item-card { border-radius: 12px; }
    .bv-item-card__name { font-size: 12px !important; }
    .bv-item-card__price { font-size: 12px !important; }
}

@media (max-width: 575.98px) {
    /* 2-column with slightly smaller gap so cards aren't too cramped */
    .bv-item-grid { grid-template-columns: repeat(2,1fr) !important; gap: 8px !important; }
    .bv-item-card__img { min-height: 100px; max-height: 130px; }
}


/* ── Market item page: buy section full-width on phone ── */
@media (max-width: 575.98px) {
    .bv-item-detail__hero { padding: 14px !important; gap: 16px !important; }
    .bv-item-detail__name { font-size: 1.4rem !important; }
    /* Stack buy + own-price buttons vertically so they each have full width */
    .bv-buy-row { flex-direction: column !important; }
    .bv-buy-btn { width: 100% !important; justify-content: center !important; }
    /* Chips wrap tighter */
    .bv-item-detail__chips { gap: 4px !important; }
    .bv-chip { font-size: 10px !important; padding: 3px 7px !important; }
}


/* ── Profile page: better equipment slot grid on phone ── */
@media (max-width: 575.98px) {
    /* Equipment slots: 3 per row instead of 2, so all 6 fit without scrolling */
    .profile-rail-card .row.g-2 .col-6 {
        flex: 0 0 33.333% !important;
        max-width: 33.333% !important;
    }
    /* Avatar viewer: constrain height so page doesn't feel top-heavy */
    .profile-avatar-3d { height: 200px !important; }
}


/* ── Forum: thread card on mobile ── */
@media (max-width: 767.98px) {
    /* Thread rows: keep the avatar + meta in one line, push reply count right */
    .bv-thread-card {
        padding: 12px 14px !important;
        gap: 10px !important;
    }
    .bv-thread-card__title { font-size: 14px !important; line-height: 1.3; }
    .bv-thread-card__meta  { font-size: 11px !important; gap: 8px !important; }
    .bv-thread-card__stats { flex-direction: column; gap: 2px; align-items: flex-end; }
}


/* ── Community / guild view: chat on mobile ── */
@media (max-width: 767.98px) {
    /* Full-height chat fills the space below the tab strip */
    .bv-comm-chat {
        height: calc(100dvh - 260px) !important;
        min-height: 300px !important;
    }
    .bv-comm-chat__msgs { padding: 10px 12px !important; }
    .bv-comm-chat__compose { padding: 8px 10px !important; gap: 6px !important; }
    .bv-comm-chat__compose-input { font-size: 16px !important; } /* prevent iOS zoom */

    /* Hero: tighter on phone */
    .bv-comm-hero__logo { width: 56px !important; height: 56px !important; }
    .bv-comm-hero__name { font-size: 1.2rem !important; }
    .bv-comm-hero__meta { font-size: 12px !important; }

    /* Tabs: full-width, even spacing */
    .bv-comm-tabs .nav-link { padding: 10px 14px !important; font-size: 13px !important; }
}


/* ── Leaderboard: stack podium on phone ── */
@media (max-width: 575.98px) {
    .bv-podium { grid-template-columns: 1fr !important; gap: 8px !important; }
    .bv-podium-card { padding: 14px !important; }
    /* Reorder so 1st place is visually first on mobile (CSS order changes the
       DOM visual position but not the semantic order). */
    .bv-podium > :nth-child(1) { order: 1; }
    .bv-podium > :nth-child(2) { order: 0; }
    .bv-podium > :nth-child(3) { order: 2; }
}


/* ── Trades page: card grid on mobile ── */
@media (max-width: 767.98px) {
    .bv-trade-card { flex-direction: column !important; gap: 12px !important; }
    .bv-trade-card__side { width: 100% !important; }
    .bv-trade-card__arrow { transform: rotate(90deg); }
}


/* ── User money / wallet page ── */
@media (max-width: 575.98px) {
    .bv-wallet-stat { padding: 14px !important; }
    .bv-wallet-stat__amount { font-size: 2rem !important; }
}


/* ── Page section headers: better mobile spacing ── */
@media (max-width: 767.98px) {
    .bv-section-h { font-size: 11px !important; }
    .bv-page-header { margin-bottom: 14px !important; gap: 10px !important; }
    .bv-page-header h1,
    .bv-page-header h2 { font-size: 1.4rem !important; }
    /* Action button next to header: shrink to icon-only on small screens */
    .bv-page-header .btn span.d-none-sm { display: none; }
}


/* ── Cards: no horizontal padding bleed on phones ── */
@media (max-width: 575.98px) {
    .card { border-left: none !important; border-right: none !important; border-radius: 0 !important; }
    /* Exception: cards inside grid columns stay rounded */
    .row .card,
    [class*="col-"] .card,
    .bv-item-card,
    .bv-clan-card,
    .bv-player-card { border: 1px solid var(--bv-hairline) !important; border-radius: 12px !important; }
}


/* ── Typography: improve reading comfort on phone ── */
@media (max-width: 575.98px) {
    body { font-size: 15px; line-height: 1.55; }
    p    { margin-bottom: 0.8em; }
    .text-sm, small { font-size: 13px !important; }
}


/* ── Scrollable tabs (category pills, nav pills): momentum scroll on iOS ── */
.bv-tabs, .nav-pills, .nav-tabs {
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
}
.bv-tabs .nav-link,
.nav-pills .nav-link { scroll-snap-align: start; }

@media (max-width: 767.98px) {
    /* Prevent tab strips from wrapping; make them scroll instead */
    .bv-tabs, .nav-pills, .nav-tabs {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden;
        scrollbar-width: none;
        padding-bottom: 2px;
    }
    .bv-tabs::-webkit-scrollbar,
    .nav-pills::-webkit-scrollbar,
    .nav-tabs::-webkit-scrollbar { display: none; }

    .bv-tabs .nav-link,
    .nav-pills .nav-link,
    .nav-tabs .nav-link {
        white-space: nowrap;
        flex-shrink: 0;
    }
}


/* ── Forms: full-width buttons on phone ── */
@media (max-width: 575.98px) {
    /* Any standalone .btn inside a .card-body or .bv-section gets stretched */
    .card-body > .btn:not(.btn-sm):only-of-type,
    .bv-section > .btn:not(.btn-sm):only-of-type {
        width: 100%;
    }
    /* Ensure form submit rows look clean */
    .d-flex.gap-2 > .btn { flex: 1 1 0; }
}


/* ── Sticky section labels (people / friends page) ── */
@media (max-width: 767.98px) {
    .bv-sticky-label {
        position: sticky;
        top: calc(48px + env(safe-area-inset-top, 0px));
        z-index: 10;
        background: var(--bv-bg);
        padding: 6px 0 4px;
        margin: 0 -12px;
        padding-left: 12px;
        padding-right: 12px;
        border-bottom: 1px solid var(--bv-hairline);
        font-size: 11px;
        font-weight: 800;
        letter-spacing: .06em;
        text-transform: uppercase;
        color: var(--bv-ink3);
    }
}


/* ── Notification list: full-width rows ── */
@media (max-width: 575.98px) {
    .notif-item {
        padding: 12px 0 !important;
        gap: 10px !important;
        align-items: flex-start !important;
    }
    .notif-pfp { width: 40px !important; height: 40px !important; flex-shrink: 0; }
    .notif-text { font-size: 13.5px !important; }
}


/* ── People / player grid: 2 columns on very small screens ── */
@media (max-width: 400px) {
    .bv-player-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }
}


/* ── Auth pages: logo centered, form full-width ── */
@media (max-width: 575.98px) {
    .authentication .card-body { padding: 24px 18px !important; }
    .authentication .text-center img { max-width: 60px; margin-bottom: 12px; }
}


/* ── Misc: improve link underlines and focus rings on touch ── */
@media (max-width: 767.98px) {
    a:focus-visible {
        outline: 2px solid var(--bv-primary);
        outline-offset: 2px;
        border-radius: 4px;
    }
    /* Remove iOS blue highlight flash on tap */
    a, button, [role="button"] { -webkit-tap-highlight-color: transparent; }
}


/* ============================================================
   MOBILE PASS v5 – Forum / Market / People full redesign
   Max-width breakpoints: 767.98px (phone), 575.98px (small phone)
   ============================================================ */

/* ── FORUM: topic sidebar → horizontal scroll chip strip ── */
@media (max-width: 767.98px) {
    /* Strip the card shell; become a horizontal flex scroll bar */
    .bv-topic-sidebar {
        background: none !important;
        border: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        padding: 2px 0 12px !important;
        position: static !important;
        display: flex !important;
        flex-direction: row !important;
        overflow-x: auto !important;
        overflow-y: visible !important;
        gap: 6px !important;
        margin-bottom: 6px !important;
        scrollbar-width: none !important;
        -webkit-overflow-scrolling: touch;
    }
    .bv-topic-sidebar::-webkit-scrollbar { display: none !important; }

    /* Flatten .bv-topic-sidebar__group so topic rows surface as direct flex
       children - display:contents makes the wrapper transparent to layout */
    .bv-topic-sidebar__group {
        display: contents !important;
    }
    .bv-topic-sidebar__label { display: none !important; }

    /* Topic rows → pill chips */
    .bv-topic-row {
        display: inline-flex !important;
        align-items: center !important;
        flex-shrink: 0 !important;
        white-space: nowrap !important;
        padding: 7px 14px !important;
        background: var(--bv-bg2) !important;
        border: 1px solid var(--bv-hairline) !important;
        border-radius: 999px !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        color: var(--bv-ink2) !important;
        gap: 6px !important;
        text-decoration: none !important;
        margin-bottom: 0 !important;
    }
    .bv-topic-row.is-active {
        background: var(--bv-primary) !important;
        border-color: transparent !important;
        color: #fff !important;
    }
    .bv-topic-row.is-active .bv-topic-row__name { color: #fff !important; }
    .bv-topic-row.is-active .bv-topic-row__icon {
        color: #fff !important;
        background: rgba(255,255,255,.15) !important;
    }
    /* No translate on pill – it would jank the scroll */
    .bv-topic-row:hover { transform: none !important; }

    /* Icon in pill mode: shrink the badge */
    .bv-topic-row__icon {
        width: 20px !important;
        height: 20px !important;
        font-size: 11px !important;
        border-radius: 6px !important;
        background: var(--bv-bg) !important;
        border: none !important;
        flex-shrink: 0 !important;
    }
    /* Hide thread count - no room in pill */
    .bv-topic-row__count { display: none !important; }

    /* "Browse all topics" footer → pill */
    .bv-topic-sidebar__footer {
        display: inline-flex !important;
        align-items: center !important;
        flex-shrink: 0 !important;
        white-space: nowrap !important;
        padding: 7px 14px !important;
        background: var(--bv-bg2) !important;
        border: 1px solid var(--bv-hairline) !important;
        border-radius: 999px !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        color: var(--bv-ink3) !important;
        gap: 6px !important;
        text-decoration: none !important;
    }
    .bv-topic-sidebar__footer:hover { color: var(--bv-ink) !important; }

    /* Featured thread banner: tighten padding, clamp teaser */
    .bv-topic-banner {
        padding: 12px 14px !important;
    }
    .bv-topic-banner__name { font-size: 15px !important; margin-bottom: 4px !important; }
    .bv-topic-banner__sub {
        font-size: 12.5px !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 1 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
    }
    .bv-topic-banner__avatar { width: 36px !important; height: 36px !important; }
    /* .bv-topic-banner__meta is already display:none at 600px in base CSS */

    /* Thread cards: compact */
    .bv-thread-card {
        padding: 10px 12px !important;
        gap: 10px !important;
        margin-bottom: 8px !important;
        border-radius: 10px !important;
    }
    .bv-thread-card__avatar { width: 48px !important; }
    .bv-thread-card__avatar img { width: 38px !important; height: 38px !important; }
    .bv-thread-card__avatar-name { font-size: 10.5px !important; }
    .bv-thread-card__avatar-meta { display: none !important; }
    .bv-thread-card__title { font-size: 14.5px !important; }
    .bv-thread-card__latest { font-size: 12px !important; }
    .bv-thread-card__stats { font-size: 11.5px !important; gap: 10px !important; margin-top: 5px !important; }
    /* Drop views & likes stat on mobile - keep replies + time */
    .bv-thread-card__stats .stat--views,
    .bv-thread-card__stats .stat--likes { display: none !important; }
}


/* ── MARKET: filter rail hidden on mobile, toggled by #bvFilterToggle ── */
@media (max-width: 767.98px) {
    /* Filter rail collapsed by default */
    #bvFilterRail {
        display: none;
    }
    #bvFilterRail.bv-is-open {
        display: block;
        margin-bottom: 14px;
    }

    /* Feature banner: hide thumbnail row (kept d-none d-lg-flex in template
       already, but this ensures nothing bleeds through on mid sizes) */
    .bv-feature-banner { padding: 18px 16px !important; }
    .bv-feature-banner__title { font-size: 17px !important; }
    .bv-feature-banner__sub { font-size: 12.5px !important; }

    /* Sort row: make sort buttons scrollable */
    .bv-sort {
        overflow-x: auto !important;
        scrollbar-width: none !important;
        -webkit-overflow-scrolling: touch;
    }
    .bv-sort::-webkit-scrollbar { display: none !important; }
    .bv-sort__btn { flex-shrink: 0 !important; white-space: nowrap !important; }

    /* "Showing" + sort row: stack on very narrow */
    .bv-grid-rail-main > div:last-child > .d-flex.align-items-center.justify-content-between {
        flex-wrap: wrap !important;
        gap: 8px !important;
    }
}


/* ── PEOPLE: player cards → compact horizontal list rows ── */
@media (max-width: 575.98px) {
    /* Single-column list with dividing lines instead of grid gap */
    .bv-player-grid {
        grid-template-columns: 1fr !important;
        gap: 0 !important;
        background: var(--bv-panel) !important;
        border: 1px solid var(--bv-hairline) !important;
        border-radius: 14px !important;
        overflow: hidden !important;
    }

    /* Each card: horizontal row via CSS grid [avatar | name+bio | action] */
    .bv-player-card {
        display: grid !important;
        grid-template-columns: 44px 1fr auto !important;
        grid-template-rows: auto auto !important;
        column-gap: 12px !important;
        row-gap: 1px !important;
        align-items: center !important;
        padding: 11px 14px !important;
        border: none !important;
        border-bottom: 1px solid var(--bv-hairline) !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }
    .bv-player-card:last-child { border-bottom: none !important; }
    .bv-player-card:hover { transform: none !important; box-shadow: none !important; border-color: transparent !important; }

    /* Avatar: spans both rows */
    .bv-player-card__avatar-wrap {
        grid-column: 1 !important;
        grid-row: 1 / 3 !important;
        align-self: center !important;
    }
    .bv-player-card__avatar {
        width: 44px !important;
        height: 44px !important;
    }

    /* Username: row 1 col 2 */
    .bv-player-card__name {
        grid-column: 2 !important;
        grid-row: 1 !important;
        font-size: 14px !important;
        margin-top: 0 !important;
    }

    /* Bio/last seen: row 2 col 2 */
    .bv-player-card__bio {
        grid-column: 2 !important;
        grid-row: 2 !important;
        font-size: 12px !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 1 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
    }

    /* Badges + stats: hidden in row layout (space too tight) */
    .bv-player-card__badges { display: none !important; }
    .bv-player-card__stats  { display: none !important; }

    /* Action: col 3 spanning both rows - show only the View button */
    .bv-player-card__action {
        grid-column: 3 !important;
        grid-row: 1 / 3 !important;
        margin-top: 0 !important;
        align-self: center !important;
        flex-direction: column !important;
        gap: 4px !important;
    }
    /* Hide "Message" on mobile - primary tap is "View profile" */
    .bv-player-card__action .bv-btn--ghost { display: none !important; }
    .bv-player-card__action .bv-btn--soft {
        flex: none !important;
        width: auto !important;
        padding: 6px 12px !important;
        font-size: 12.5px !important;
    }

    /* Spotlight: compact header row on small phones */
    .bv-spotlight__row { flex-wrap: wrap !important; }
    .bv-spotlight__actions {
        margin-left: 0 !important;
        width: 100% !important;
        margin-top: 8px !important;
    }
    .bv-spotlight__stat-v { font-size: 18px !important; }
    .bv-spotlight__stat-l { font-size: 10px !important; }
}


/* ============================================================
   MOBILE PASS v5 FIXES – search bar / people / forum overflow
   ============================================================ */

/* ── Search bar: widen the trigger into a real pill input look ── */
@media (max-width: 767.98px) {
    .bv-mobile-topbar__search-btn {
        flex: 1 !important;
        min-width: 0 !important;
        width: auto !important;
        border-radius: 999px !important;
        justify-content: flex-start !important;
        gap: 8px !important;
        padding: 0 14px !important;
        margin-left: 0 !important;
        font-size: 13.5px !important;
        color: var(--bv-ink3) !important;
    }
    .bv-mobile-topbar__search-btn:hover,
    .bv-mobile-topbar__search-btn:focus {
        color: var(--bv-ink2) !important;
        background: var(--bv-bg2) !important;
        border-color: var(--bv-hairline) !important;
    }
    .bv-mobile-topbar__search-btn i { font-size: 14px !important; }
    .bv-mobile-topbar__search-ph {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 13.5px;
        font-weight: 400;
        color: var(--bv-ink3);
    }

    /* Shrink wallet pill slightly so the search bar gets more room */
    .bv-mobile-topbar__wallet {
        margin-left: 6px !important;
        padding: 5px 8px !important;
        font-size: 11.5px !important;
        gap: 6px !important;
    }
}


/* ── People: extend list-row layout to cover all phone widths ── */
/* Previous breakpoint was 575.98px - too narrow for most phones.
   Extending to 767.98px so portrait phones get the list layout. */
@media (max-width: 767.98px) {
    .bv-player-grid {
        grid-template-columns: 1fr !important;
        gap: 0 !important;
        background: var(--bv-panel) !important;
        border: 1px solid var(--bv-hairline) !important;
        border-radius: 14px !important;
        overflow: hidden !important;
    }
    .bv-player-card {
        display: grid !important;
        grid-template-columns: 44px 1fr auto !important;
        grid-template-rows: auto auto !important;
        column-gap: 12px !important;
        row-gap: 1px !important;
        align-items: center !important;
        padding: 11px 14px !important;
        border: none !important;
        border-bottom: 1px solid var(--bv-hairline) !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }
    .bv-player-card:last-child { border-bottom: none !important; }
    .bv-player-card:hover { transform: none !important; box-shadow: none !important; }
    .bv-player-card__avatar-wrap {
        grid-column: 1 !important;
        grid-row: 1 / 3 !important;
        align-self: center !important;
    }
    .bv-player-card__avatar { width: 44px !important; height: 44px !important; }
    .bv-player-card__name {
        grid-column: 2 !important;
        grid-row: 1 !important;
        font-size: 14px !important;
        margin-top: 0 !important;
    }
    .bv-player-card__bio {
        grid-column: 2 !important;
        grid-row: 2 !important;
        font-size: 12px !important;
        overflow: hidden !important;
        white-space: nowrap !important;
        text-overflow: ellipsis !important;
    }
    .bv-player-card__badges { display: none !important; }
    .bv-player-card__stats  { display: none !important; }
    .bv-player-card__action {
        grid-column: 3 !important;
        grid-row: 1 / 3 !important;
        margin-top: 0 !important;
        align-self: center !important;
    }
    .bv-player-card__action .bv-btn--ghost { display: none !important; }
    .bv-player-card__action .bv-btn--soft {
        flex: none !important;
        width: auto !important;
        padding: 6px 12px !important;
        font-size: 12.5px !important;
    }

    /* Spotlight: collapse to a compact single-row strip.
       At full size it dominates the screen and hides the grid. */
    .bv-spotlight {
        padding: 12px 14px !important;
    }
    .bv-spotlight__chip { font-size: 10px !important; margin-bottom: 8px !important; }
    .bv-spotlight__body { padding: 0 !important; }
    .bv-spotlight__row {
        flex-wrap: nowrap !important;
        gap: 10px !important;
    }
    .bv-spotlight__avatar {
        width: 44px !important;
        height: 44px !important;
        flex-shrink: 0 !important;
    }
    .bv-spotlight__name { font-size: 15px !important; }
    .bv-spotlight__sub  { font-size: 12px !important; }
    /* Hide stats on mobile - just show the CTA */
    .bv-spotlight__stats { display: none !important; }
    .bv-spotlight__actions {
        margin-left: 0 !important;
        width: auto !important;
        flex-shrink: 0 !important;
    }
    .bv-spotlight__actions .bv-btn--ghost { display: none !important; }
    .bv-spotlight__actions .bv-btn--primary { white-space: nowrap !important; }
}


/* ── Forum: prevent thread cards from overflowing horizontally ── */
@media (max-width: 767.98px) {
    /* The forum shell right column must not exceed viewport width */
    .bv-forum-shell {
        overflow-x: hidden !important;
        max-width: 100% !important;
    }
    .bv-forum-shell > div {
        min-width: 0 !important;
        overflow-x: hidden !important;
        max-width: 100% !important;
    }
    /* Thread cards: clamp to column width */
    .bv-thread-card {
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }
    .bv-thread-card__body {
        min-width: 0 !important;
        overflow: hidden !important;
        max-width: 100% !important;
    }
    /* Ensure title and latest-reply don't stretch the card */
    .bv-thread-card__title,
    .bv-thread-card__latest {
        max-width: 100% !important;
    }
}


/* ============================================================
   PEOPLE PAGE – overlap fixes (spotlight chip + action button)
   ============================================================ */
@media (max-width: 767.98px) {

    /* Spotlight "★ FEATURED PLAYER" chip is position:absolute top-right.
       On mobile it sits directly on top of the View button which is also
       pushed to the right edge of the same row. Pull it out of absolute
       flow and render it as a normal chip above the content. */
    .bv-spotlight__chip {
        position: static !important;
        display: inline-block !important;
        margin-bottom: 10px !important;
        align-self: flex-start !important;
    }
    /* The body already has position:relative; make sure it lays out
       the chip in normal flow above the row. */
    .bv-spotlight__body {
        display: flex !important;
        flex-direction: column !important;
        padding: 14px 16px !important;
        gap: 0 !important;
    }

    /* Player card action button: base CSS sets width:100% and flex:1.
       In a grid cell those rules make the button span the whole card.
       Override to natural (auto) width so it stays inside column 3. */
    .bv-player-card__action {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 0 !important;
        margin-top: 0 !important;
    }
    .bv-player-card__action .bv-btn {
        width: auto !important;
        flex: none !important;
        white-space: nowrap !important;
        min-width: 0 !important;
    }
}

/* ============= @-MENTIONS ==================================================
   Rendered inline in wall posts, comments, messages, forum posts. Hover-
   lifts the brand purple and underlines for affordance. Keeps the @
   visible so users can pattern-match it as a tag, not a username. */
.bv-mention {
    display: inline;
    color: var(--bv-primary-ink, #a78bfa);
    font-weight: 600;
    text-decoration: none;
    padding: 0 1px;
    border-radius: 3px;
    transition: color .12s, background .12s;
}
.bv-mention:hover {
    color: #fff;
    background: var(--bv-primary, #7c6bf0);
    text-decoration: none;
}
.bv-mention::before {
    /* Subtle visual lift on the @ glyph so the tag reads as a unit. */
    content: '';
}

/* =====================================================================
 * Topbar popovers: notifications + trades.
 *
 * Replaced the old single-line "You're all caught up!" treatment with
 * a real empty-state component so the dropdown reads as polished even
 * when there's nothing to show. Mirrors the empty-state pattern used
 * on the friends + messages dropdowns directly above this in
 * navigation.blade.php.
 * ===================================================================== */
.bv-topbar-pop {
    min-width: 320px;
    padding: 0 !important;
}
.bv-topbar-pop__head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 14px;
    border-bottom: 1px solid var(--bv-hairline);
}
.bv-topbar-pop__title {
    font-weight: 700;
    font-size: 14px;
    color: var(--bv-ink);
}
.bv-topbar-pop__badge {
    background: var(--bv-primary, #7c6bf0);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 999px;
    line-height: 1.4;
}
.bv-topbar-pop__body {
    padding: 12px 14px;
    border-bottom: 1px solid var(--bv-hairline);
}
.bv-topbar-pop__line {
    color: var(--bv-ink2);
    font-size: 13px;
}
.bv-topbar-pop__foot {
    padding: 10px 14px;
    background: rgba(255,255,255,0.02);
}
.bv-topbar-pop__foot a {
    display: inline-flex; align-items: center; gap: 6px;
    color: var(--bv-primary-ink, #a18cff);
    font-weight: 600;
    font-size: 13px;
    text-decoration: none;
}
.bv-topbar-pop__foot a:hover { text-decoration: underline; }

/* Empty state inside .bv-topbar-pop. Big circular icon block + title +
 * supporting copy. Sized to feel intentional, not "broken page". */
.bv-topbar-empty {
    padding: 22px 16px 18px;
    text-align: center;
}
.bv-topbar-empty__icon {
    width: 56px; height: 56px;
    margin: 0 auto 12px;
    border-radius: 50%;
    display: grid; place-items: center;
    background: var(--bv-primary-soft, rgba(124,107,240,0.12));
    color: var(--bv-primary-ink, #a18cff);
    font-size: 24px;
}
.bv-topbar-empty__title {
    font-size: 14px;
    font-weight: 700;
    color: var(--bv-ink);
    margin-bottom: 4px;
}
.bv-topbar-empty__sub {
    font-size: 12.5px;
    color: var(--bv-ink3);
    line-height: 1.5;
    max-width: 260px;
    margin: 0 auto;
}

/* =====================================================================
 * Forum: floating "compose new thread" FAB on mobile.
 *
 * Replaces the inline "+ New thread" pill at the top of the page
 * header on mobile widths. Sits above the bottom tab bar (~64px) and
 * respects the safe-area inset on notched devices. Desktop keeps the
 * inline pill button - the FAB is hidden via .d-md-none in markup.
 * ===================================================================== */
.bv-fab {
    position: fixed;
    right: 18px;
    /* Sit just above the bottom tab bar (60px) with a small breathing
       gap - was 80px, dropped to 72px so the FAB hugs the nav row
       instead of floating in the middle of the conversation list. */
    bottom: calc(72px + env(safe-area-inset-bottom, 0px));
    z-index: 60;
    width: 56px; height: 56px;
    border-radius: 50%;
    background: var(--bv-primary, #7c6bf0);
    color: #fff;
    display: grid; place-items: center;
    box-shadow:
        0 8px 20px rgba(124,107,240,0.38),
        0 2px 6px rgba(0,0,0,0.18);
    border: 0;
    padding: 0;
    text-decoration: none;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
    transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
    -webkit-tap-highlight-color: transparent;
}
.bv-fab:hover, .bv-fab:focus-visible {
    background: var(--bv-primary-hover, #6957e8);
    color: #fff;
    transform: translateY(-1px);
    box-shadow:
        0 12px 24px rgba(124,107,240,0.45),
        0 4px 10px rgba(0,0,0,0.22);
    outline: none;
}
.bv-fab:active { transform: translateY(0); }
.bv-fab i { font-size: 26px; }

/* =====================================================================
 * .bv-verify-gate - replaces the previous yellow btn-warning rendering
 * of <x-verify-gate-button> when the user hasn't verified their email
 * yet. Reads as a quiet "this action is gated" affordance on brand,
 * not as a chunky warning shouting at the user mid-page.
 *
 * Soft purple surface + purple-ink text. Same vertical rhythm as a
 * normal pill so it can slot directly into composer rows / form
 * footers without throwing the layout off.
 * ===================================================================== */
.bv-verify-gate {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    /* Match standard composer/submit button height. The previous
     * 9px y-padding + 13.5px font + line-height 1.2 was ~32-34px
     * solo, but in narrow composer slots (wall, profile feed) the
     * label wrapped to two lines and the gate appeared ~2× taller
     * than the adjacent emoji/submit button. white-space: nowrap +
     * tighter padding + line-height 1.4 keeps a single line at the
     * same ~36px height as its peers. */
    padding: 8px 14px;
    border-radius: 10px;
    background: var(--bv-primary-soft);
    color: var(--bv-primary-ink);
    border: 1px solid transparent;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
    text-decoration: none;
    white-space: nowrap;
    transition: background .12s ease, color .12s ease, border-color .12s ease;
    cursor: pointer;
}
.bv-verify-gate:hover {
    background: var(--bv-primary);
    color: #fff;
    text-decoration: none;
}
.bv-verify-gate:focus-visible {
    outline: none;
    border-color: var(--bv-primary);
    box-shadow: 0 0 0 3px var(--bv-primary-soft);
}
.bv-verify-gate i { font-size: 13px; }

/* =====================================================================
 * Outfits panel - character customizer
 *
 * Lives on `?sort=outfits`. Each outfit is a card with up to four
 * representative item thumbnails (hat / face / shirt / pants), the
 * outfit name + meta, and three action pills (Wear, Rename, Delete).
 * Saved looks are limited to 30 per account (see OutfitController).
 * ===================================================================== */
.bv-customize__panel-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}
.bv-customize__outfits-empty {
    border: 1px dashed var(--bv-hairline);
    border-radius: 14px;
    padding: 32px 22px;
    text-align: center;
    color: var(--bv-ink2);
}
.bv-customize__outfits-empty-icon {
    width: 56px; height: 56px;
    margin: 0 auto 12px;
    border-radius: 50%;
    background: var(--bv-primary-soft);
    color: var(--bv-primary-ink);
    display: grid; place-items: center;
    font-size: 22px;
}
.bv-customize__outfits-empty-title {
    font-size: 15px; font-weight: 700; color: var(--bv-ink); margin-bottom: 4px;
}
.bv-customize__outfits-empty-sub {
    font-size: 13px; color: var(--bv-ink3); max-width: 380px; margin: 0 auto;
    line-height: 1.55;
}
.bv-customize__outfits-empty-sub strong { color: var(--bv-ink); font-weight: 700; }

.bv-customize__outfits-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 14px;
}
.bv-customize__outfit {
    background: var(--bv-panel);
    border: 1px solid var(--bv-hairline);
    border-radius: 14px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: border-color .12s, transform .12s;
}
.bv-customize__outfit:hover { border-color: var(--bv-hairline2); transform: translateY(-1px); }
.bv-customize__outfit-thumbs {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 6px;
    aspect-ratio: 1 / 1;
}
.bv-customize__outfit-thumb {
    background: var(--bv-bg2);
    border-radius: 8px;
    display: grid;
    place-items: center;
    overflow: hidden;
}
.bv-customize__outfit-thumb img {
    max-width: 80%; max-height: 80%; object-fit: contain;
}
.bv-customize__outfit-body {
    min-height: 38px;
}
.bv-customize__outfit-name {
    font-size: 14px; font-weight: 700; color: var(--bv-ink);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bv-customize__outfit-meta {
    font-size: 11.5px; color: var(--bv-ink3); margin-top: 2px;
}
.bv-customize__outfit-actions {
    display: flex; gap: 6px;
}
.bv-customize__outfit-actions .bv-customize__pill {
    flex: 1 1 auto;
    justify-content: center;
    font-size: 12px;
    padding: 6px 10px;
}
.bv-customize__outfit-actions .bv-customize__pill--ghost {
    flex: 0 0 auto;
    padding: 6px 10px;
}