/* =============================================================================
   usernames.css — THE PRINCE OF PROXY (/users hub, @dollarbill).

   A multi-goat proxy hub. @dollarbill negotiates + proxies every deal; the page
   is a roster of the goats whose stock he brokers: @plug, @obey (username
   storefronts), @usernism (Mikey / @sickz — a full @usernismbot marketplace),
   @kingpin (VolStock), and @frag (+888 numbers, his own chat on /888).

   Cohesive with market.css / numbers.css: shared theme.css palette (both wtf +
   dark), shared hairlines, shared reduced-motion contract. It KEEPS the shop's
   signature ANIMATED USERNAME TAGS — black-leather luggage name-tags that SWAY
   from a split ring (kcSway) — now laid out in a horizontal storefront RACK
   STRIP instead of a 3D carousel (simpler, robust, mobile-clean). Scoped
   leather/hardware tints live here and are used by nothing but the tags.
   ========================================================================== */

:root{
  /* black leather — tags only */
  --lth-hi:#2b2620; --lth:#161310; --lth-lo:#0a0806;
  --thread:rgba(206,178,120,.40);
  --emboss:#d9c9a6; --emboss-lo:#8f8261;
  --hw-hi:#d6dbe3; --hw-mid:#7c828c; --hw-lo:#33363d; --hw-glow:transparent;
  /* royal gold — the Prince-of-Proxy crest */
  --royal-hi:#ffe9ad; --royal:#e7b23a; --royal-lo:#a8781f;
}
.tier-silver   { --lth-hi:#a5865e; --lth:#7a5e3d; --lth-lo:#402a17;
                 --hw-hi:#e6ebf2; --hw-mid:#868c96; --hw-lo:#33363d; --hw-glow:transparent; }
.tier-gold     { --lth-hi:#9a6438; --lth:#6f4423; --lth-lo:#3a2110;
                 --hw-hi:#ffe6a1; --hw-mid:#c99a3c; --hw-lo:#5f430f; --hw-glow:rgba(201,154,60,.30); }
.tier-diamond  { --lth-hi:#7c3f2f; --lth:#54271d; --lth-lo:#2c1310;
                 --hw-hi:#f2fbff; --hw-mid:#a9c8dd; --hw-lo:#4d6a80; --hw-glow:rgba(150,214,255,.34); }
.tier-legendary{ --lth-hi:#2b2620; --lth:#161310; --lth-lo:#0a0806;
                 --hw-hi:#ffd97a; --hw-mid:#b07e28; --hw-lo:#2c2416; --hw-glow:rgba(255,196,92,.42); }

/* ---------------------------------------------------------------------------
   0 · SKIP LINK + BACK STRIP + TAB BAR  (shared convention)
   ------------------------------------------------------------------------ */
.skip{ position:absolute; left:-9999px; top:0; background:var(--raised); color:var(--ink-hi);
  padding:8px 14px; border-radius:0 0 8px 0; z-index:100; }
.skip:focus{ left:0; }

#backstrip{ display:flex; align-items:center; gap:8px; padding:9px 16px;
  background:var(--panel); border-bottom:1px solid var(--hairline-2);
  font-size:11px; letter-spacing:.04em; }
.back-link{ display:inline-flex; align-items:center; gap:6px; color:var(--ink-hi);
  text-decoration:none; font-weight:800; letter-spacing:.12em; }
.back-link span{ color:var(--p500); }
.back-link:hover{ color:var(--p600); }
.back-sep{ color:var(--ink-faint); }
.back-here{ color:var(--ink-lo); text-transform:uppercase; letter-spacing:.1em; font-size:10px; }
#backstrip #themeToggle{ margin-left:auto; }

#tabbar{ display:flex; align-items:stretch; gap:2px; padding:0 12px;
  background:var(--panel); border-bottom:1px solid var(--hairline-2);
  overflow-x:auto; scrollbar-width:none; }
#tabbar::-webkit-scrollbar{ display:none; }
.tab{ display:inline-flex; align-items:center; gap:7px; flex:0 0 auto; padding:11px 14px;
  color:var(--ink-lo); font-size:13px; font-weight:600; text-decoration:none; white-space:nowrap;
  border-bottom:2px solid transparent; margin-bottom:-1px; }
.tab:hover{ color:var(--ink-hi); }
.tab .tab-ic{ color:var(--ink-faint); font-size:13px; line-height:1; }
.tab:hover .tab-ic{ color:var(--p600); }
.tab[aria-selected="true"]{ color:var(--ink-hi); border-bottom-color:var(--p400); }
.tab[aria-selected="true"] .tab-ic{ color:var(--p500); }

/* shared page shell width */
.wrap{ max-width:1120px; margin:0 auto; }

/* =============================================================================
   1 · HERO — THE PRINCE OF PROXY.
   ========================================================================== */
#hero{
  position:relative; overflow:hidden;
  padding:44px 20px 40px;
  background:
    radial-gradient(120% 90% at 82% -10%, color-mix(in srgb, var(--royal) 20%, transparent), transparent 58%),
    radial-gradient(100% 80% at 6% 120%, color-mix(in srgb, var(--p400) 14%, transparent), transparent 55%),
    linear-gradient(180deg, var(--panel), var(--void));
  border-bottom:1px solid var(--hairline-2);
}
.hero-inner{ position:relative; z-index:2; width:100%; max-width:1120px; margin:0 auto;
  display:flex; gap:34px; align-items:center; flex-wrap:wrap; }
.hero-copy{ flex:1 1 420px; min-width:0; }
.hero-side{ flex:0 0 auto; display:flex; flex-direction:column; align-items:center; gap:14px; }

.hero-grid{
  position:absolute; inset:-40% -10% -10%; z-index:1; opacity:.5;
  background-image:
    linear-gradient(to right, color-mix(in srgb, var(--p500) 8%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in srgb, var(--p500) 8%, transparent) 1px, transparent 1px);
  background-size:34px 34px;
  -webkit-mask-image:radial-gradient(80% 70% at 70% 20%, #000, transparent 78%);
          mask-image:radial-gradient(80% 70% at 70% 20%, #000, transparent 78%);
  animation:gridDrift 26s linear infinite;
}
@keyframes gridDrift{ from{ background-position:0 0,0 0; } to{ background-position:34px 68px,34px 68px; } }

.hero-badge{ display:inline-flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:5px 12px 5px 8px; background:var(--raised); border:1px solid var(--hairline-2);
  border-radius:999px; margin-bottom:16px; }
.frag-live{ display:inline-flex; align-items:center; gap:6px; color:var(--ink-lo); font-size:10px; letter-spacing:.06em; }
.frag-live i{ width:6px; height:6px; border-radius:50%; background:var(--gain); box-shadow:0 0 8px var(--gain);
  animation:blip 2.2s ease-in-out infinite; }
@keyframes blip{ 0%,100%{opacity:1} 50%{opacity:.35} }
.proxy-chip{ display:inline-flex; align-items:center; padding:2px 9px; border-radius:999px;
  border:1px solid var(--hairline-2); color:var(--ink-faint); font-size:9px; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; white-space:nowrap; }

#hero-title{ margin:0 0 8px; font-family:var(--font-bubble,"Fredoka","Baloo 2",system-ui,sans-serif);
  font-weight:700; line-height:1.0; letter-spacing:.01em; font-size:clamp(30px, 6.2vw, 60px); }
.ht-line{ display:block; color:var(--ink-hi); }
.ht-accent{ background:linear-gradient(92deg, var(--royal-lo), var(--royal) 45%, var(--p400));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent;
  text-shadow:0 0 44px color-mix(in srgb, var(--royal) 30%, transparent); }
.hero-handle{ display:inline-flex; align-items:baseline; gap:10px; margin:0 0 16px; flex-wrap:wrap; }
.hero-handle a{ color:var(--p600); font-weight:800; font-size:17px; text-decoration:none; }
.hero-handle a:hover{ color:var(--p700); }
.hero-handle .hh-id{ color:var(--ink-faint); font-size:11px; letter-spacing:.06em; }

#hero-bio{ max-width:620px; margin:0 0 22px; color:var(--ink-mid); font-size:15.5px; line-height:24px; }
#hero-bio strong{ color:var(--ink-hi); }
#hero-bio .bio-lead{ color:var(--ink-hi); font-weight:700; }
.bio-quote{ display:block; margin:14px 0 0; padding:12px 16px; border-left:3px solid var(--royal);
  background:color-mix(in srgb, var(--raised) 80%, transparent); border-radius:0 12px 12px 0;
  color:var(--ink-hi); font-size:15px; line-height:22px; font-style:italic; }

.hero-cta-row{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin:0 0 20px; }
.hero-chat-cta{
  display:inline-flex; align-items:center; gap:11px; padding:12px 22px 12px 12px; border-radius:999px;
  background:linear-gradient(140deg, var(--p300), var(--p400) 60%, var(--p500));
  border:1px solid var(--p600); color:var(--on-accent);
  box-shadow:0 12px 30px color-mix(in srgb, var(--p400) 42%, transparent), 0 0 0 1px rgba(255,255,255,.08) inset;
  transition:transform .16s ease, box-shadow .16s ease, filter .16s ease;
}
.hero-chat-cta:hover{ transform:translateY(-2px); filter:brightness(1.04);
  box-shadow:0 16px 40px color-mix(in srgb, var(--p400) 56%, transparent), 0 0 0 1px rgba(255,255,255,.14) inset; }
.hero-chat-cta:active{ transform:translateY(0); }
.hero-chat-cta .cta-crest{ width:34px; height:34px; font-size:18px; border:2px solid rgba(255,255,255,.5); }
.hero-chat-cta b{ font-size:15px; font-weight:800; }
.hero-chat-cta .cta-sub{ display:block; font-size:10.5px; opacity:.9; font-weight:600; }
.hero-jump{ color:var(--p600); font-weight:700; font-size:13px; text-decoration:none; }
.hero-jump:hover{ color:var(--p700); text-decoration:underline; }

/* proxy stats row */
#hero-stats{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; padding:14px 18px;
  background:color-mix(in srgb, var(--raised) 80%, transparent); border:1px solid var(--hairline-2);
  border-radius:14px; backdrop-filter:blur(4px); width:max-content; max-width:100%; }
.hstat{ display:flex; flex-direction:column; gap:2px; }
.hstat-n{ color:var(--ink-hi); font-weight:800; font-size:24px; line-height:1; }
.hstat-n.accent{ color:var(--royal); }
.hstat-k{ color:var(--ink-lo); font-size:10px; text-transform:uppercase; letter-spacing:.1em; }
.hstat-div{ width:1px; align-self:stretch; background:var(--hairline-2); }

/* ---- the big 👑 PRINCE CREST (placeholder avatar) ----------------------- */
.pop-crest{ display:inline-flex; align-items:center; justify-content:center; border-radius:50%;
  background:radial-gradient(120% 120% at 50% 18%, var(--royal-hi), var(--royal) 46%, var(--royal-lo) 78%, #6e4c12);
  color:#3a2708; line-height:1; overflow:hidden; text-align:center;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5), inset 0 -3px 6px rgba(0,0,0,.35); }
.pop-crest span{ filter:drop-shadow(0 1px 0 rgba(0,0,0,.25)); }
.cta-crest{ display:inline-flex; align-items:center; justify-content:center; border-radius:50%;
  background:radial-gradient(120% 120% at 50% 18%, var(--royal-hi), var(--royal) 46%, var(--royal-lo) 78%, #6e4c12);
  color:#3a2708; }
.hero-crest{ position:relative; width:clamp(140px,26vw,200px); height:clamp(140px,26vw,200px);
  font-size:clamp(64px,14vw,104px);
  border:3px solid color-mix(in srgb, var(--royal) 70%, #000);
  box-shadow:0 20px 50px rgba(0,0,0,.45), 0 0 0 6px color-mix(in srgb, var(--royal) 16%, transparent),
             inset 0 2px 0 rgba(255,255,255,.55), inset 0 -8px 16px rgba(0,0,0,.3); }
.hero-crest::after{ content:"PoP"; position:absolute; bottom:14%; left:0; right:0;
  font-family:var(--font-num); font-weight:800; font-size:13px; letter-spacing:.28em; color:#5a3c0c;
  text-align:center; opacity:.7; }
.crest-pending{ font-size:9px; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-faint); border:1px dashed var(--hairline-2); border-radius:999px; padding:3px 10px; }
/* @dollarbill PFP now staged — fill the crest circle with the photo + drop the placeholder "PoP" overlay */
.pop-crest img{ width:100%; height:100%; object-fit:cover; display:block; border-radius:50%; }
.hero-crest::after{ content:none; }

/* =============================================================================
   2 · SECTION scaffolding — a goat storefront block.
   ========================================================================== */
.pop-sect{ max-width:1120px; margin:0 auto; padding:34px 20px 10px; scroll-margin-top:14px; }
.pop-sect + .pop-sect{ border-top:1px solid var(--hairline); }

.goat-head{ display:flex; align-items:center; gap:16px; margin:0 0 6px; flex-wrap:wrap; }
.goat-pfp{ flex:0 0 auto; width:66px; height:66px; border-radius:50%; overflow:hidden;
  border:2px solid var(--p400); background:radial-gradient(120% 120% at 50% 20%, var(--raised), var(--void));
  box-shadow:0 8px 22px rgba(0,0,0,.35); transition:transform .16s ease, border-color .16s ease; text-decoration:none;
  display:inline-flex; align-items:center; justify-content:center; }
.goat-pfp:hover{ transform:translateY(-2px) scale(1.04); border-color:var(--p600); }
.goat-pfp img{ width:100%; height:100%; object-fit:cover; display:block; }
.goat-meta{ min-width:0; flex:1 1 240px; }
.goat-name{ margin:0; display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;
  font-family:var(--font-bubble,"Fredoka","Baloo 2",system-ui,sans-serif); font-weight:700;
  color:var(--ink-hi); font-size:clamp(22px,3.4vw,30px); letter-spacing:.01em; }
.goat-name a{ color:var(--p600); text-decoration:none; font-size:14px; font-weight:800;
  font-family:var(--font-ui); }
.goat-name a:hover{ color:var(--p700); }
.goat-tag{ margin:4px 0 0; color:var(--ink-mid); font-size:13.5px; line-height:20px; max-width:640px; }
.goat-badges{ display:flex; gap:8px; flex-wrap:wrap; margin-top:8px; }
.gb{ display:inline-flex; align-items:center; gap:6px; padding:3px 10px; border-radius:999px;
  font-size:10px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  border:1px solid var(--hairline-2); color:var(--ink-lo); background:var(--raised); }
.gb.gb-proxy{ color:#5a3c0c; border-color:color-mix(in srgb, var(--royal) 55%, transparent);
  background:linear-gradient(180deg, color-mix(in srgb, var(--royal) 34%, transparent), color-mix(in srgb, var(--royal) 14%, transparent)); }
:root[data-theme="dark"] .gb.gb-proxy{ color:var(--royal-hi); }
.gb.gb-live{ color:var(--gain); border-color:color-mix(in srgb, var(--gain) 40%, transparent); }
.goat-cta{ margin-left:auto; align-self:center; }
.proxy-btn{ display:inline-flex; align-items:center; gap:8px; padding:10px 18px; border-radius:10px;
  background:linear-gradient(180deg,var(--p400),var(--p300)); color:var(--on-accent);
  border:1px solid var(--p500); font-weight:800; font-size:13.5px; cursor:pointer;
  box-shadow:0 6px 18px color-mix(in srgb, var(--p400) 34%, transparent); transition:filter .16s ease, transform .12s ease; }
.proxy-btn:hover{ filter:brightness(1.07); transform:translateY(-1px); }
.proxy-btn:active{ transform:none; }
.proxy-btn.ghost{ background:var(--raised); color:var(--ink-hi); border-color:var(--hairline-2); box-shadow:none; }
.proxy-btn.ghost:hover{ border-color:var(--p500); }

/* =============================================================================
   3 · STOREFRONT RACK STRIP — a horizontal rail of hanging, swaying tags.
   Keeps the shop's signature animated leather tags without the 3D carousel.
   ========================================================================== */
.pop-rack{ position:relative; margin:16px 0 6px; padding:30px 4px 14px; }
.pop-rail{ position:absolute; left:10px; right:10px; top:14px; height:9px; border-radius:6px; z-index:0;
  background:linear-gradient(180deg,#3a3d44,#20232a 45%,#0c0d10);
  box-shadow:0 1px 0 rgba(255,255,255,.10) inset, 0 8px 18px rgba(0,0,0,.4); }
.pop-strip{ position:relative; z-index:1; display:flex; gap:6px; align-items:flex-start;
  overflow-x:auto; overflow-y:hidden; padding:0 6px 10px; scrollbar-width:thin;
  scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch; touch-action:pan-x pan-y; }
.pop-strip::-webkit-scrollbar{ height:8px; }
.pop-strip::-webkit-scrollbar-thumb{ background:var(--hairline-2); border-radius:8px; }
.pop-strip .kc-cell{ position:relative; flex:0 0 auto; scroll-snap-align:center; }
.pop-empty{ color:var(--ink-lo); font-size:13px; padding:18px 6px; }
.rack-foot{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin:6px 4px 0; }
.rack-hint{ color:var(--ink-faint); font-size:11px; }
.rack-more{ color:var(--p600); font-weight:700; font-size:12px; background:none; border:0; cursor:pointer; }
.rack-more:hover{ color:var(--p700); text-decoration:underline; }

/* CATEGORY FILTER chips — one bar per rack, sits above the strip and composes
   with the platform / BIN / C-O filters on the rack foot. Same pill language as
   the @usernism .um-tab tabs, a touch more compact. JS hides the bar when there
   is nothing to filter by (or usernames-categories.js is missing). */
.cat-bar{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin:14px 4px 2px; }
.cat-bar[hidden]{ display:none; }
.cat-bar-lab{ color:var(--ink-lo); font-size:10px; font-weight:800; text-transform:uppercase;
  letter-spacing:.11em; margin-right:2px; }
.cat-chip{ display:inline-flex; align-items:center; gap:5px; padding:6px 11px; border-radius:999px;
  background:var(--raised); border:1px solid var(--hairline-2); color:var(--ink-mid); font-weight:700; font-size:11.5px;
  transition:background .16s ease, border-color .16s ease, color .16s ease; cursor:pointer; }
.cat-chip:hover{ border-color:var(--p500); color:var(--ink-hi); }
.cat-chip.is-on{ color:var(--ink-hi); border-color:var(--p500); background:var(--hover); }
.cat-chip .cat-n{ color:var(--ink-faint); font-size:10px; font-weight:700; font-family:var(--font-num); }
.cat-chip.is-on .cat-n{ color:var(--p600); }

/* one hanging cell — hanger + tag, in normal flow (no 3D transform) */
.kc-cell{ width:104px; display:flex; flex-direction:column; align-items:center; }

.kc-hang{ position:relative; width:100%; display:flex; flex-direction:column; align-items:center; height:34px; }
.kc-ringmetal{ position:relative; width:26px; height:26px; border-radius:50%; border:4px solid transparent;
  background:linear-gradient(var(--void),var(--void)) padding-box,
    conic-gradient(from 210deg, var(--hw-lo), var(--hw-hi) 22%, var(--hw-mid) 50%, var(--hw-hi) 74%, var(--hw-lo)) border-box;
  box-shadow:0 0 8px var(--hw-glow), 0 2px 4px rgba(0,0,0,.6); }
.kc-ringmetal::after{ content:""; position:absolute; right:-1px; top:46%; width:6px; height:3px; border-radius:2px; background:var(--hw-lo); }
.kc-strap{ width:15px; height:16px; margin-top:-3px; border-radius:3px 3px 5px 5px;
  background:linear-gradient(90deg,var(--lth-lo),var(--lth-hi) 45%,var(--lth-lo));
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.5), 0 2px 4px rgba(0,0,0,.5); position:relative; }
.kc-strap::after{ content:""; position:absolute; inset:2px 5px; border-left:1px dashed var(--thread); border-right:1px dashed var(--thread); opacity:.55; }

/* THE BLACK-LEATHER TAG — the star. Drawn in CSS, sways from the split ring. */
.kc-tag{
  position:relative; width:92px; height:300px; margin-top:5px; padding:22px 10px 16px;
  display:flex; flex-direction:column; align-items:center; justify-content:flex-start; gap:10px;
  border-radius:12px 12px 14px 14px; color:var(--emboss); text-align:center;
  background:
    radial-gradient(130% 70% at 28% 8%, rgba(255,255,255,.06), transparent 42%),
    radial-gradient(120% 120% at 74% 116%, rgba(0,0,0,.6), transparent 58%),
    linear-gradient(158deg, var(--lth-hi), var(--lth) 44%, var(--lth-lo));
  border:1px solid #000;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06), inset 0 -14px 24px rgba(0,0,0,.55), 0 18px 30px rgba(0,0,0,.45);
  transform-origin:50% -2px; animation:kcSway 4.6s ease-in-out infinite;
  -webkit-user-select:none; user-select:none; }
.kc-tag::before{ content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background-image:
    repeating-radial-gradient(circle at 18% 26%, rgba(255,255,255,.028) 0 1px, transparent 1px 4px),
    repeating-radial-gradient(circle at 72% 64%, rgba(0,0,0,.22) 0 1px, transparent 1px 3px),
    repeating-radial-gradient(circle at 50% 90%, rgba(0,0,0,.16) 0 1px, transparent 1px 5px);
  mix-blend-mode:overlay; opacity:.8; }
.kc-tag::after{ content:""; position:absolute; inset:7px; border-radius:9px; pointer-events:none;
  border:1.5px dashed var(--thread); box-shadow:inset 0 0 0 1px rgba(0,0,0,.35); }
.kc-grommet{ position:relative; width:20px; height:20px; margin-top:-14px; border-radius:50%;
  background:radial-gradient(circle at 38% 32%, var(--hw-hi), var(--hw-mid) 56%, var(--hw-lo));
  box-shadow:0 0 7px var(--hw-glow), 0 2px 4px rgba(0,0,0,.7), inset 0 1px 1px rgba(255,255,255,.35); z-index:2; }
.kc-grommet::after{ content:""; position:absolute; inset:5px; border-radius:50%;
  background:radial-gradient(circle at 50% 38%, #000, #050403);
  box-shadow:inset 0 2px 3px rgba(0,0,0,.9), inset 0 -1px 1px rgba(255,255,255,.06); }
.kc-handle{ position:relative; z-index:1; flex:1 1 auto; display:flex; align-items:center; justify-content:center;
  writing-mode:vertical-rl; text-orientation:mixed; font-family:var(--font-ui); font-weight:900;
  font-size:24px; line-height:1.04; letter-spacing:.005em; color:var(--emboss); white-space:nowrap; overflow:hidden;
  text-shadow:0 1px 0 rgba(0,0,0,.85), 0 -1px 0 rgba(255,255,255,.05), 0 2px 6px rgba(0,0,0,.6); }
.kc-handle .kc-at{ color:var(--emboss-lo); font-weight:800; }
.kc-badge{ display:none !important; }
.kc-price{ position:relative; z-index:1; margin-top:auto; font-family:var(--font-num); font-weight:700;
  font-size:14px; letter-spacing:.01em; color:var(--emboss);
  text-shadow:0 1px 0 rgba(0,0,0,.8), 0 -1px 0 rgba(255,255,255,.05); }
.kc-price.kc-offer{ font-family:var(--font-ui); font-weight:800; font-size:11px; letter-spacing:.14em; color:var(--royal-hi); }
/* --- rich listings (Vol / imports): platform chip near the grommet + BIN/C-O
   badge at the tag foot. Bare-handle plug/obey tags keep the plain OFFER. --- */
.kc-plat{ position:relative; z-index:2; margin-top:-1px; font-family:var(--font-ui); font-weight:900;
  font-size:9px; letter-spacing:.09em; line-height:1; padding:3px 6px; border-radius:999px; color:#fff;
  background:rgba(0,0,0,.45); border:1px solid rgba(255,255,255,.2); box-shadow:0 1px 2px rgba(0,0,0,.5);
  text-shadow:0 1px 1px rgba(0,0,0,.6); }
.kc-plat-instagram{ background:linear-gradient(135deg,#8a3ab9,#e95950,#fccc63); }
.kc-plat-telegram{ background:linear-gradient(135deg,#2aabee,#229ed9); }
.kc-plat-twitter{ background:#0b0b0b; }
.kc-plat-tiktok{ background:linear-gradient(135deg,#25f4ee,#111 55%,#fe2c55); }
.kc-plat-discord{ background:#5865f2; }
.kc-plat-other{ background:rgba(0,0,0,.55); }
.kc-price.kc-bin{ font-family:var(--font-ui); font-weight:900; font-size:10.5px; letter-spacing:.03em;
  white-space:nowrap; color:#1a1406; background:linear-gradient(180deg,#ffe58a,#f4c430); padding:3px 7px;
  border-radius:6px; box-shadow:0 1px 2px rgba(0,0,0,.5); text-shadow:none; }
.kc-price.kc-co{ font-family:var(--font-ui); font-weight:900; font-size:10.5px; letter-spacing:.03em;
  white-space:nowrap; color:#fff; background:rgba(64,92,204,.55); border:1px solid rgba(150,175,255,.5);
  padding:3px 7px; border-radius:6px; text-shadow:0 1px 1px rgba(0,0,0,.5); }
.rack-more.rack-filter.is-on{ background:var(--p300); color:var(--on-accent); border-color:transparent; }
button.kc-tag{ cursor:pointer; }
button.kc-tag:hover{ filter:brightness(1.08); }
button.kc-tag:active{ transform:translateY(1px); }
@keyframes kcSway{ 0%,100%{ transform:rotate(-2.1deg); } 50%{ transform:rotate(2.1deg); } }
.kc-cell:nth-child(2n) .kc-tag{ animation-duration:5.2s; animation-delay:-1.7s; }
.kc-cell:nth-child(3n) .kc-tag{ animation-duration:4.9s; animation-delay:-3.1s; }
.kc-cell:nth-child(4n) .kc-tag{ animation-duration:5.5s; animation-delay:-.8s; }

/* SOLD tag — dark, worn, ink stamp */
.kc-tag.is-sold{ color:var(--ink-faint);
  background:radial-gradient(120% 120% at 74% 116%, rgba(0,0,0,.72), transparent 58%),
    linear-gradient(158deg, #17140f, #100d0a 44%, #080605); filter:saturate(.6) brightness(.82); }
.kc-tag.is-sold .kc-handle{ color:#5b5348; text-shadow:0 1px 0 rgba(0,0,0,.85); }
.kc-tag.is-sold .kc-handle .kc-at{ color:#463f36; }
.kc-sold{ position:relative; z-index:2; margin-top:auto; padding:3px 10px; border-radius:3px;
  font-family:var(--font-num); font-weight:900; font-size:14px; letter-spacing:.22em; color:var(--loss);
  border:2px solid var(--loss); transform:rotate(-11deg); opacity:.82; }

/* =============================================================================
   4 · @usernism MARKETPLACE — the full @usernismbot shop.
   ========================================================================== */
.um{ margin-top:18px; }
.um-lead{ margin:0 0 4px; color:var(--ink-hi); font-size:15px; line-height:22px; font-weight:600; }
.um-blurb{ margin:0 0 14px; color:var(--ink-mid); font-size:13.5px; line-height:20px; max-width:720px; }
.um-powered{ display:inline-flex; align-items:center; gap:6px; color:var(--ink-lo); font-size:11px;
  font-weight:700; letter-spacing:.02em; }
.um-powered b{ color:var(--p600); }

.um-stats{ display:flex; align-items:stretch; gap:0; flex-wrap:wrap; margin:14px 0 16px;
  border:1px solid var(--hairline-2); border-radius:14px; overflow:hidden; background:var(--raised); width:max-content; max-width:100%; }
.um-stat{ display:flex; flex-direction:column; gap:3px; padding:12px 22px; }
.um-stat + .um-stat{ border-left:1px solid var(--hairline); }
.um-stat-n{ color:var(--ink-hi); font-weight:800; font-size:22px; line-height:1; font-family:var(--font-num); }
.um-stat.sale .um-stat-n{ color:var(--gain); }
.um-stat.vol .um-stat-n{ color:var(--royal); }
.um-stat-k{ color:var(--ink-lo); font-size:9.5px; text-transform:uppercase; letter-spacing:.1em; }

/* controls: search + filter tabs + sort */
.um-controls{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin:0 0 16px; }
.um-searchwrap{ position:relative; flex:1 1 220px; min-width:0; max-width:340px; }
.um-searchwrap .s-icon{ position:absolute; left:12px; top:50%; transform:translateY(-50%); display:flex; color:var(--ink-lo); pointer-events:none; }
.um-search{ width:100%; padding:10px 14px 10px 36px; background:var(--raised); border:1px solid var(--hairline-2);
  border-radius:10px; color:var(--ink-hi); }
.um-search::placeholder{ color:var(--ink-faint); }
.um-search:focus{ border-color:var(--p500); }
.um-tabs{ display:flex; gap:6px; flex-wrap:wrap; }
.um-tab{ display:inline-flex; align-items:center; gap:6px; padding:8px 13px; border-radius:999px;
  background:var(--raised); border:1px solid var(--hairline-2); color:var(--ink-mid); font-weight:700; font-size:12px;
  transition:background .16s ease, border-color .16s ease, color .16s ease; cursor:pointer; }
.um-tab:hover{ border-color:var(--p500); color:var(--ink-hi); }
.um-tab.is-on{ color:var(--ink-hi); border-color:var(--p500); background:var(--hover); }
.um-tab .um-tab-n{ color:var(--ink-faint); font-size:10.5px; font-weight:700; }
.um-tab.is-on .um-tab-n{ color:var(--p600); }
.um-sortwrap{ margin-left:auto; display:inline-flex; align-items:center; gap:7px; }
.um-sort-lab{ color:var(--ink-lo); font-size:11px; text-transform:uppercase; letter-spacing:.08em; }
.um-sort{ padding:8px 12px; border-radius:10px; background:var(--raised); border:1px solid var(--hairline-2);
  color:var(--ink-hi); font-weight:700; font-size:12.5px; cursor:pointer; }
.um-sort:focus{ border-color:var(--p500); }
.um-count{ color:var(--ink-faint); font-size:11px; margin:0 0 12px; letter-spacing:.02em; }

/* listing grid + cards */
.um-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(228px, 1fr)); gap:12px; }
.um-card{ position:relative; display:flex; flex-direction:column; gap:9px; padding:14px;
  background:var(--raised); border:1px solid var(--hairline-2); border-radius:14px;
  transition:border-color .16s ease, transform .12s ease, box-shadow .16s ease; }
.um-card:hover{ border-color:var(--p500); transform:translateY(-2px); box-shadow:0 12px 30px rgba(0,0,0,.28); }
.um-card-top{ display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
.um-kind{ display:inline-flex; align-items:center; gap:5px; padding:2px 9px; border-radius:999px;
  font-size:9.5px; font-weight:900; letter-spacing:.08em; text-transform:uppercase;
  border:1px solid var(--hairline-2); color:var(--ink-lo); background:var(--void); }
.um-kind.k-username{ color:var(--p600); border-color:color-mix(in srgb, var(--p400) 45%, transparent); }
.um-kind.k-number{ color:#2e86c8; border-color:color-mix(in srgb, #4da9ee 55%, transparent); }
.um-kind.k-ton{ color:#7db8e8; border-color:color-mix(in srgb, #7db8e8 50%, transparent); }
.um-kind.k-tmail{ color:#b07ee0; border-color:color-mix(in srgb, #b07ee0 55%, transparent); }
.um-chain{ display:inline-flex; align-items:center; gap:4px; padding:2px 8px; border-radius:999px;
  font-size:9px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; }
.um-chain.on{ color:var(--gain); border:1px solid color-mix(in srgb, var(--gain) 42%, transparent);
  background:color-mix(in srgb, var(--gain) 12%, transparent); }
.um-chain.off{ color:var(--ink-lo); border:1px solid var(--hairline-2); background:var(--void); }
.um-premium{ margin-left:auto; color:#5a3c0c; font-size:9px; font-weight:900; letter-spacing:.1em;
  text-transform:uppercase; padding:2px 8px; border-radius:999px;
  background:linear-gradient(180deg, color-mix(in srgb, var(--royal) 40%, transparent), color-mix(in srgb, var(--royal) 16%, transparent));
  border:1px solid color-mix(in srgb, var(--royal) 50%, transparent); }
:root[data-theme="dark"] .um-premium{ color:var(--royal-hi); }
.um-handle{ font-family:var(--font-num); font-weight:800; font-size:16px; color:var(--ink-hi);
  word-break:break-all; line-height:1.25; }
.um-ask{ display:flex; align-items:baseline; gap:6px; margin-top:auto; }
.um-ask-n{ font-family:var(--font-num); font-weight:800; font-size:17px; color:var(--ink-hi); }
.um-ask-u{ color:var(--ink-lo); font-size:11px; font-weight:700; letter-spacing:.04em; }
.um-ask.offer .um-ask-n{ color:var(--royal); font-family:var(--font-ui); font-size:14px; letter-spacing:.02em; }
.um-actions{ display:flex; gap:6px; margin-top:2px; }
.um-act{ flex:1 1 auto; padding:8px 6px; border-radius:9px; font-weight:800; font-size:12px; text-align:center;
  cursor:pointer; transition:filter .16s ease, border-color .16s ease, background .16s ease, transform .12s ease; }
.um-act:active{ transform:translateY(1px); }
.um-bin{ background:linear-gradient(180deg,var(--p400),var(--p300)); color:var(--on-accent); border:1px solid var(--p500);
  box-shadow:0 4px 12px color-mix(in srgb, var(--p400) 30%, transparent); }
.um-bin:hover{ filter:brightness(1.08); }
.um-offer{ background:var(--void); color:var(--ink-hi); border:1px solid var(--hairline-2); }
.um-offer:hover{ border-color:var(--p500); }
.um-view{ flex:0 0 auto; background:transparent; color:var(--ink-lo); border:1px solid var(--hairline-2); }
.um-view:hover{ color:var(--ink-hi); border-color:var(--p500); }
.um-more-row{ display:flex; justify-content:center; margin:18px 0 4px; }
.um-more{ padding:10px 22px; border-radius:10px; background:var(--raised); border:1px solid var(--hairline-2);
  color:var(--ink-hi); font-weight:800; font-size:13px; cursor:pointer; }
.um-more:hover{ border-color:var(--p500); }
.um-empty{ grid-column:1/-1; color:var(--ink-lo); font-size:13px; padding:26px 6px; text-align:center; }

/* =============================================================================
   5 · @kingpin / VolStock storefront card.
   ========================================================================== */
.vs-card{ display:flex; gap:18px; align-items:center; flex-wrap:wrap; margin:16px 0 6px; padding:20px;
  border:1px solid var(--hairline-2); border-radius:16px;
  background:
    radial-gradient(120% 140% at 100% 0%, color-mix(in srgb, var(--royal) 12%, transparent), transparent 60%),
    var(--raised); }
.vs-body{ flex:1 1 300px; min-width:0; }
.vs-title{ margin:0 0 6px; color:var(--ink-hi); font-weight:800; font-size:18px; }
.vs-title .vs-flag{ color:var(--gain); font-size:11px; font-weight:800; letter-spacing:.06em; margin-left:8px;
  border:1px solid color-mix(in srgb, var(--gain) 40%, transparent); border-radius:999px; padding:2px 8px; text-transform:uppercase; }
.vs-desc{ margin:0 0 10px; color:var(--ink-mid); font-size:13.5px; line-height:20px; max-width:560px; }
.vs-actions{ display:flex; gap:10px; flex-wrap:wrap; }
.vs-link{ display:inline-flex; align-items:center; gap:6px; color:var(--p600); font-weight:700; font-size:13px; text-decoration:none; align-self:center; }
.vs-link:hover{ color:var(--p700); text-decoration:underline; }

/* =============================================================================
   6 · BUY / DETAIL MODAL + TOAST + VOUCHES.
   ========================================================================== */
#buyModal{ position:fixed; inset:0; z-index:80; display:flex; align-items:center; justify-content:center; padding:20px; }
#buyModal[hidden]{ display:none !important; }
.bm-backdrop{ position:absolute; inset:0; background:rgba(5,4,10,.72); backdrop-filter:blur(3px); }
.bm-card{ position:relative; z-index:1; width:min(520px,100%); max-height:calc(100vh - 40px); overflow:auto;
  background:var(--raised); border:1px solid var(--p500); border-radius:16px; padding:22px;
  box-shadow:0 30px 80px rgba(0,0,0,.6); animation:bmIn .18s ease; }
@keyframes bmIn{ from{ transform:translateY(10px) scale(.98); opacity:0; } to{ transform:none; opacity:1; } }
.bm-x{ position:absolute; top:12px; right:14px; color:var(--ink-lo); font-size:20px; line-height:1; padding:2px 6px; }
.bm-x:hover{ color:var(--ink-hi); }
.bm-tag{ color:var(--royal); font-size:9px; font-weight:800; letter-spacing:.14em; margin-bottom:8px; text-transform:uppercase; }
.bm-card h3{ margin:0 0 14px; color:var(--ink-hi); font-size:20px; font-family:var(--font-num); word-break:break-all; }
.bm-facts{ margin:0 0 16px; display:grid; gap:8px; }
.bm-facts > div{ display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  border-bottom:1px solid var(--hairline); padding-bottom:7px; }
.bm-facts dt{ color:var(--ink-lo); font-size:11px; text-transform:uppercase; letter-spacing:.08em; margin:0; }
.bm-facts dd{ color:var(--ink-hi); font-size:13px; margin:0; text-align:right; font-weight:700; }
.bm-body{ color:var(--ink-mid); font-size:12.5px; line-height:19px; margin:0 0 18px; }
.bm-actions{ display:flex; gap:10px; }
.bm-go{ flex:1 1 auto; background:var(--p300); color:var(--on-accent); border:1px solid var(--p500);
  border-radius:10px; padding:11px; font-weight:800; text-align:center; cursor:pointer; }
.bm-go:hover{ background:var(--p400); }
.bm-cancel{ flex:0 0 auto; background:var(--raised); color:var(--ink-mid); border:1px solid var(--hairline-2);
  border-radius:10px; padding:11px 16px; }
.bm-cancel:hover{ border-color:var(--p500); color:var(--ink-hi); }

.toast{ position:fixed; left:50%; bottom:26px; transform:translateX(-50%) translateY(12px); z-index:90;
  max-width:calc(100vw - 32px); background:var(--raised); color:var(--ink-hi); border:1px solid var(--p500);
  border-radius:10px; padding:11px 18px; font-size:13px; font-weight:600; box-shadow:0 16px 40px rgba(0,0,0,.5);
  opacity:0; pointer-events:none; transition:opacity .2s ease, transform .2s ease; }
.toast .t-strong{ color:var(--p600); }
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }

#vouchModal{ position:fixed; inset:0; z-index:86; display:flex; align-items:center; justify-content:center; padding:20px; }
#vouchModal[hidden]{ display:none !important; }
.vch-back{ position:absolute; inset:0; background:rgba(5,4,10,.72); backdrop-filter:blur(3px); }
.vch-card{ position:relative; z-index:1; width:min(560px,100%); max-height:calc(100vh - 40px);
  display:flex; flex-direction:column; background:var(--raised); border:1px solid var(--p500); border-radius:16px;
  padding:18px 18px 8px; box-shadow:0 30px 80px rgba(0,0,0,.6); animation:bmIn .18s ease; }
.vch-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.vch-title{ color:var(--gain); font-size:16px; font-weight:800; }
.vch-x{ color:var(--ink-lo); font-size:22px; line-height:1; padding:2px 8px; }
.vch-x:hover{ color:var(--ink-hi); }
.vch-seg{ display:inline-flex; background:var(--well); border:1px solid var(--hairline-2); border-radius:10px; padding:3px; margin-bottom:12px; align-self:flex-start; }
.vch-seg-b{ padding:7px 16px; border:0; background:transparent; color:var(--ink-lo); font-weight:700; font-size:13px; border-radius:8px; cursor:pointer; }
.vch-seg-b.is-on{ background:var(--p300); color:var(--on-accent); }
.vch-list{ overflow-y:auto; display:flex; flex-direction:column; gap:8px; padding-bottom:12px; }
.vch-item{ background:var(--well); border:1px solid var(--hairline); border-left:3px solid var(--gain); border-radius:10px; padding:10px 12px; }
.vch-text{ color:var(--ink-hi); font-size:13.5px; line-height:1.45; }
.vch-meta{ color:var(--ink-faint); font-size:11px; margin-top:4px; }
.vch-empty, .vch-more{ color:var(--ink-lo); font-size:12.5px; padding:10px 2px; }

/* VolStock's tab renders the cleaned chat as a TRANSCRIPT of bubbles — the "just
   have the chat with @dollarbill visible" view. Service + Fragment "ownership
   transferred" bubbles were stripped in vol-data.js, so only real messages show.
   Incoming-style bubbles, left-aligned (the sharp top-left corner reads as chat). */
.vch-list.vch-chat{ gap:10px; padding:4px 2px 12px; }
.vch-msg{ display:flex; flex-direction:column; align-items:flex-start; max-width:100%; }
.vch-bub{
  background:var(--well); border:1px solid var(--hairline);
  border-radius:4px 16px 16px 16px; padding:9px 13px;
  color:var(--ink-hi); font-size:13.5px; line-height:1.46;
  max-width:86%; white-space:pre-wrap; word-break:break-word;
  box-shadow:0 1px 2px rgba(0,0,0,.06);
}
.vch-msg .vch-meta{ margin:3px 0 0 5px; }

/* =============================================================================
   7 · REDUCED MOTION + RESPONSIVE + FOOTER.
   ========================================================================== */
@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
  .kc-tag{ transform:rotate(0deg) !important; }
  .frag-live i{ opacity:1; }
}

@media (max-width: 719px){
  #hero{ padding:28px 14px 26px; }
  .hero-inner{ gap:22px; }
  .hero-side{ order:-1; }
  #hero-stats{ gap:12px; padding:12px 14px; width:100%; }
  .hstat-n{ font-size:20px; }
  .pop-sect{ padding:28px 14px 8px; }
  .goat-cta{ margin-left:0; width:100%; }
  .proxy-btn{ width:100%; justify-content:center; }
  .um-sortwrap{ margin-left:0; }
  .kc-cell{ width:96px; }
  .kc-tag{ width:82px; height:280px; padding:20px 9px 14px; }
  .kc-handle{ font-size:22px; }
}
@media (max-width: 419px){
  .hstat-div{ display:none; }
  #hero-stats{ justify-content:space-between; }
  .um-grid{ grid-template-columns:1fr 1fr; }
  .um-card{ padding:11px; }
  .um-handle{ font-size:14px; }
}

.it-foot{ display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:12px;
  padding:26px 16px 90px; margin-top:24px; border-top:1px solid var(--hairline-2); color:var(--ink-faint); font-size:13px; }
.it-foot a{ color:var(--ink-lo); text-decoration:none; }
.it-foot a:hover{ color:var(--ink-hi); }
.it-foot .foot-pyonya b{ color:var(--ink-mid); }

/* =============================================================================
   THE BIG RACK — one filterable wall of every goat's tags (usernames.js
   buildBigRack). Volume-style market controls in our leather-shop skin.
   ========================================================================== */
#bigrack{ }
.br-head{ display:flex; align-items:flex-end; gap:16px; flex-wrap:wrap; margin-bottom:14px; }
.br-title{ margin:0; font-size:clamp(26px,4vw,40px); letter-spacing:-.03em; line-height:1; }
.br-sub{ margin:6px 0 0; color:var(--ink-mid); font-size:13.5px; max-width:52ch; }
.br-dd{
  margin-left:auto; padding:12px 20px; border-radius:999px; border:none; cursor:pointer;
  background:linear-gradient(135deg,#F06AAE,#E0392B); color:#fff;
  font:850 13.5px/1 var(--font-ui, system-ui, sans-serif); letter-spacing:.02em;
  box-shadow:0 8px 22px rgba(224,57,43,.34); transition:transform .15s ease;
  animation:brDDpulse 2.8s ease-in-out infinite;
}
.br-dd:hover{ transform:translateY(-2px); }
@keyframes brDDpulse{ 0%,100%{ box-shadow:0 8px 22px rgba(224,57,43,.3);} 50%{ box-shadow:0 8px 30px rgba(240,106,174,.55);} }
.br-search{
  width:100%; box-sizing:border-box; margin:0 0 12px; padding:13px 16px;
  border:1px solid var(--hairline-2); border-radius:14px;
  background:var(--well, rgba(128,128,128,.06)); color:var(--ink-hi);
  font:700 15px/1.2 var(--font-ui, system-ui, sans-serif);
}
.br-search:focus{ outline:2px solid #F06AAE; outline-offset:1px; }
.br-rows{ display:flex; flex-direction:column; gap:7px; margin-bottom:10px; }
.br-row{ display:flex; align-items:center; gap:6px; overflow-x:auto; padding-bottom:2px;
  -webkit-overflow-scrolling:touch; scrollbar-width:none; }
.br-row::-webkit-scrollbar{ display:none; }
.br-lab{ flex:0 0 auto; min-width:74px; text-align:left; cursor:pointer;
  font:850 10px/1 var(--font-num, monospace);
  letter-spacing:.12em; text-transform:uppercase; color:var(--ink-lo); }
.br-caret{ display:none; }
.br-chips{ display:flex; gap:6px; }
.br-chips .cat-chip{ flex:0 0 auto; }
.br-side-head{ display:none; }

/* -- DESKTOP: collapsible left filter SIDEBAR (grid re-lay, no DOM change) -- */
@media (min-width:1000px){
  #bigrack{
    max-width:none;            /* full window width — break the 1120px page cap */
    padding-left:clamp(18px,3vw,48px); padding-right:clamp(18px,3vw,48px);
    display:grid; grid-template-columns:264px minmax(0,1fr); column-gap:24px;
    grid-template-areas:
      "head head"
      "side search"
      "side active"
      "side grid"
      "side foot";
    align-items:start;
  }
  .br-head{ grid-area:head; }
  .br-search{ grid-area:search; }
  #brActive{ grid-area:active; }
  #brGrid{ grid-area:grid; }
  .br-foot{ grid-area:foot; }
  #brRows{
    grid-area:side; position:sticky; top:70px; margin-bottom:0;
    padding:14px; border:1px solid var(--hairline-2); border-radius:16px;
    background:var(--well, rgba(128,128,128,.05));
    max-height:calc(100vh - 90px); overflow-y:auto; gap:0;
  }
  .br-side-head{
    display:flex; align-items:center; gap:8px; padding-bottom:9px; margin-bottom:4px;
    border-bottom:1px solid var(--hairline-2);
  }
  .br-side-t{ font:900 13px/1 var(--font-ui, system-ui, sans-serif); color:var(--ink-hi);
    display:inline-flex; align-items:center; gap:7px; }
  .br-side-n{ min-width:18px; height:18px; padding:0 5px; border-radius:999px; display:inline-grid; place-items:center;
    background:#F06AAE; color:#fff; font:850 10.5px/1 var(--font-num, monospace); }
  .br-side-tog{ margin-left:auto; padding:5px 9px; border-radius:8px; cursor:pointer;
    border:1px solid var(--hairline-2); background:var(--raised, rgba(255,255,255,.5));
    color:var(--ink-mid); font:800 11px/1 var(--font-ui, system-ui, sans-serif); }
  .br-side-tog:hover{ color:var(--ink-hi); }
  .br-row{ display:block; overflow:visible; padding-bottom:0; }
  .br-lab{
    display:flex; align-items:center; justify-content:space-between; width:100%;
    min-width:0; padding:10px 2px; border-bottom:1px solid var(--hairline-2);
    color:var(--ink-mid);
  }
  .br-lab:hover{ color:var(--ink-hi); }
  .br-caret{ display:inline-block; font-size:11px; color:var(--ink-lo);
    transition:transform .18s ease; }
  .br-row.is-closed .br-caret{ transform:rotate(-90deg); }
  .br-chips{ display:flex; flex-wrap:wrap; gap:6px; padding:9px 0 7px; }
  .br-row.is-closed .br-chips{ display:none; }
  /* whole-bar tuck: a slim rail with just the ⟩ button */
  #bigrack.br-side-off{ grid-template-columns:46px minmax(0,1fr); }
  .br-side-off #brRows{ padding:9px 6px; }
  .br-side-off #brRows .br-row{ display:none; }
  .br-side-off .br-side-head{ border-bottom:none; padding-bottom:0; margin-bottom:0; justify-content:center; }
  .br-side-off .br-side-t{ display:none; }
  .br-side-off .br-side-tog{ margin-left:0; }
}
@media (prefers-reduced-motion:reduce){ .br-caret{ transition:none !important; } }
.br-active{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:12px; min-height:4px; }
.br-fchip{
  display:inline-flex; align-items:center; gap:6px; padding:6px 12px; border-radius:999px;
  border:1px solid #F06AAE; background:color-mix(in srgb,#F06AAE 12%, transparent);
  color:var(--ink-hi); font:800 12px/1 var(--font-ui, system-ui, sans-serif); cursor:pointer;
}
.br-fchip .br-x{ font-size:14px; line-height:1; color:#E0392B; }
.br-fchip.br-reset{ border-color:var(--hairline-2); background:var(--well, rgba(128,128,128,.06)); color:var(--ink-mid); }
/* THE SLOT RACKS — three vertical reels of horizontal readable leather tags,
   cycling slot-machine style (usernames.js renderGrid/renderReels). */
.br-reels{
  position:relative; display:grid; grid-template-columns:repeat(3, minmax(0,1fr));
  gap:14px; height:560px; overflow:hidden; border-radius:18px;
  touch-action:none; overscroll-behavior:contain;
}
.br-reel{
  position:relative; overflow:hidden; border-radius:16px;
  -webkit-mask-image:linear-gradient(180deg, transparent 0, #000 7%, #000 93%, transparent 100%);
  mask-image:linear-gradient(180deg, transparent 0, #000 7%, #000 93%, transparent 100%);
}
.br-track{ position:absolute; left:0; right:0; top:0; bottom:0; will-change:transform; }
.br-slot{ position:absolute; left:0; right:6px; height:92px; padding:6px 0; box-sizing:border-box; }
.br-htag{
  display:flex; align-items:center; gap:11px; height:80px; padding:0 14px 0 12px; cursor:pointer;
  border-radius:14px; border:1px solid rgba(46,26,12,.55);
  background:linear-gradient(115deg, #7a4b26, #8f5a2e 45%, #6f4322);
  box-shadow:inset 0 0 0 2px rgba(255,235,200,.12), inset 0 -12px 26px rgba(0,0,0,.28),
             0 6px 14px rgba(20,10,4,.35);
  transition:transform .15s ease, box-shadow .15s ease;
}
.br-htag:hover{ transform:translateX(4px) scale(1.015);
  box-shadow:inset 0 0 0 2px rgba(255,235,200,.2), inset 0 -12px 26px rgba(0,0,0,.24),
             0 10px 22px rgba(20,10,4,.45); }
/* five leather shades keyed off the handle hash */
.br-l2{ background:linear-gradient(115deg, #5d3a1e, #744a26 45%, #533418); }
.br-l3{ background:linear-gradient(115deg, #8a5a33, #a06c3d 45%, #7c4f2b); }
.br-l4{ background:linear-gradient(115deg, #4a2e18, #61401f 45%, #422a13); }
.br-l5{ background:linear-gradient(115deg, #6d4527, #7f5a35 45%, #5e3b1f); }
.br-ring{
  width:20px; height:20px; border-radius:50%; flex:0 0 auto;
  background:radial-gradient(circle at 35% 30%, #f7e3b0, #b98a3e 55%, #7a5518);
  box-shadow:inset 0 0 0 4px rgba(60,38,8,.55), 0 1px 3px rgba(0,0,0,.4);
}
.br-hname{
  flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font:900 clamp(16px,1.5vw,21px)/1 var(--font-ui, system-ui, sans-serif);
  color:#f6e7cd; letter-spacing:.01em;
  text-shadow:0 1px 0 rgba(0,0,0,.45), 0 -1px 0 rgba(255,255,255,.12);
}
.br-hmeta{ display:flex; align-items:center; gap:8px; flex:0 0 auto; }
.br-hprice{
  padding:6px 10px; border-radius:8px; font:850 12px/1 var(--font-num, monospace); white-space:nowrap;
  background:linear-gradient(180deg, #f5d778, #d9a83f); color:#3a2606; box-shadow:0 2px 5px rgba(0,0,0,.3);
}
.br-hco{ background:linear-gradient(180deg, #9fd8f7, #5ba4d4); color:#0b2a3d; }
.br-hask{ background:rgba(255,255,255,.14); color:#f0e2c8; }
.br-arrows{
  position:absolute; right:12px; top:50%; transform:translateY(-50%);
  display:flex; flex-direction:column; gap:8px; z-index:3;
}
.br-arrow{
  width:40px; height:40px; border-radius:50%; cursor:pointer;
  border:1px solid var(--hairline-2); background:var(--raised, #fff); color:var(--ink-hi);
  font-size:14px; box-shadow:0 6px 16px rgba(20,10,30,.28); transition:transform .12s ease;
}
.br-arrow:hover{ background:#F06AAE; color:#fff; transform:scale(1.08); }
.br-empty{ position:absolute; inset:0; display:grid; place-items:center; z-index:2;
  color:var(--ink-mid); font:700 14px/1.5 var(--font-ui, system-ui, sans-serif); text-align:center; padding:20px; }
@media (max-width:919px){ .br-reels{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:559px){ .br-reels{ grid-template-columns:1fr; height:470px; } .br-slot{ right:0; } }
@media (prefers-reduced-motion:reduce){ .br-htag, .br-arrow{ transition:none !important; } }

/* ALL (A–Z) popup — the full filtered book in one dense alphabetical list */
.br-all{
  padding:12px 18px; border-radius:999px; cursor:pointer;
  border:1px solid var(--hairline-2); background:var(--raised, #fff); color:var(--ink-hi);
  font:850 13px/1 var(--font-ui, system-ui, sans-serif); letter-spacing:.04em;
}
.br-all:hover{ border-color:#F06AAE; color:#E0392B; }
.brall-back{
  position:fixed; inset:0; z-index:10090; display:flex; align-items:center; justify-content:center;
  padding:18px; background:rgba(11,9,18,.72); backdrop-filter:blur(8px);
}
.brall-card{
  display:flex; flex-direction:column; width:min(94vw, 980px); max-height:88vh;
  padding:20px 20px 14px; border-radius:22px; border:1px solid var(--hairline);
  background:linear-gradient(145deg, var(--panel), var(--raised)); color:var(--ink-hi);
  box-shadow:0 28px 90px rgba(0,0,0,.4);
}
.brall-head{ display:flex; align-items:center; gap:10px; margin-bottom:6px; }
.brall-t{ margin:0; font-size:22px; letter-spacing:-.02em; }
.brall-n{ padding:4px 10px; border-radius:999px; background:#F06AAE; color:#fff;
  font:850 11.5px/1 var(--font-num, monospace); }
.brall-x{ margin-left:auto; width:34px; height:34px; border-radius:10px; cursor:pointer;
  font-size:20px; color:var(--ink-lo); background:none; border:1px solid var(--hairline-2); }
.brall-x:hover{ color:var(--ink-hi); }
.brall-note{ margin-bottom:10px; color:var(--ink-mid); font-size:12.5px; }
.brall-search{ margin-bottom:10px; }
.brall-sorts{ display:flex; gap:6px; flex-wrap:wrap; margin-bottom:12px; }
.brall-list{
  flex:1 1 auto; min-height:0; overflow-y:auto; display:grid;
  grid-template-columns:repeat(auto-fill, minmax(220px,1fr)); gap:7px; align-content:start;
  padding-bottom:6px;
}
.brall-item{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:9px 12px; border-radius:10px; cursor:pointer; text-align:left;
  border:1px solid var(--hairline-2); background:var(--well, rgba(128,128,128,.05));
  color:var(--ink-hi); font:750 13.5px/1.2 var(--font-ui, system-ui, sans-serif);
}
.brall-item:hover{ border-color:#F06AAE; background:color-mix(in srgb, #F06AAE 8%, var(--well)); }
.brall-h{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.brall-p{ flex:0 0 auto; font:850 11.5px/1 var(--font-num, monospace); color:var(--ink-lo); }
.brall-p.is-bin{ color:#a8781f; }
.brall-p.is-co{ color:#2f7fbf; }
.brall-more{ grid-column:1 / -1; text-align:center; padding:10px; color:var(--ink-faint); font-size:12px; }
@media (max-width:640px){ .br-all{ width:100%; } .brall-list{ grid-template-columns:1fr 1fr; } }
.br-foot{ justify-content:center; }
@media (max-width:640px){
  .br-dd{ margin-left:0; width:100%; }
  
  .br-lab{ min-width:64px; }
}
@media (prefers-reduced-motion:reduce){ .br-dd{ animation:none !important; transition:none !important; } }