/* BitCrate public configurator — standalone dark + gold storefront styling.
 * Self-contained (no dependency on the authed Hub theme). Typeface matches the
 * legacy React source EXACTLY: the system 'Segoe UI' stack for the whole page
 * (titles + body). Orbitron/Rajdhani are no longer used here (font files remain
 * on disk for other surfaces). */
:root{
  /* ── VERBATIM BitCrate design tokens (from BitCrateConfigurator.jsx) ── */
  --bc-gold:#f7ba1e; --bc-purple:#803ccb; --bc-blue:#0c4989;
  --bc-gold-dim:rgba(247,186,30,0.12); --bc-purple-dim:rgba(128,60,203,0.12); --bc-blue-dim:rgba(12,73,137,0.12);
  --bc-gold-glow:rgba(247,186,30,0.25); --bc-purple-glow:rgba(128,60,203,0.25);
  --bc-bg:#07080d; --bc-card:rgba(12,14,22,0.85); --bc-card-hover:rgba(18,20,30,0.9);
  --bc-border:rgba(255,255,255,0.06); --bc-border-light:rgba(255,255,255,0.1);
  --bc-text:rgba(255,255,255,0.88); --bc-text-dim:rgba(255,255,255,0.4); --bc-text-muted:rgba(255,255,255,0.2);

  /* semantic aliases → verbatim tokens (existing rules consume these; no near-miss leftovers) */
  --gold:var(--bc-gold); --gold-bright:#ffce52; --gold-press:#d4a017; --on-gold:#0a0a0a;
  --bg:var(--bc-bg); --surface:#0e1018; --surface-2:var(--bc-card); --surface-3:var(--bc-card-hover);
  --text:var(--bc-text); --muted:var(--bc-text-dim); --faint:var(--bc-text-muted);
  --green:#22c55e; --red:#ef4444; --amber:var(--bc-gold);
  --purple:var(--bc-purple); --blue:var(--bc-blue);
  --border:var(--bc-border); --border-strong:var(--bc-border-light);
  --gold-soft:var(--bc-gold-dim); --gold-line:rgba(247,186,30,0.42); --gold-glow:var(--bc-gold-glow);
  --green-soft:rgba(34,197,94,0.12); --red-soft:rgba(239,68,68,0.12);
  --radius:20px; --radius-sm:10px;
  /* legacy typeface — system Segoe UI stack for titles AND body */
  --font-head:'Segoe UI',-apple-system,sans-serif;
  --font-body:'Segoe UI',-apple-system,sans-serif;

  /* default selected-state accent = gold; tier classes override (explicit rgba, no color-mix) */
  --acc:var(--bc-gold);
  --acc-bar:rgba(247,186,30,0.56); --acc-bg:rgba(247,186,30,0.07);
  --acc-dot2:rgba(247,186,30,0.53); --acc-dotglow:rgba(247,186,30,0.25); --acc-glow:var(--bc-gold-glow);
  --acc-t1:rgba(247,186,30,0.094); --acc-t2:rgba(247,186,30,0.024); --acc-tb:rgba(247,186,30,0.082);
}
*{box-sizing:border-box;}
html,body{margin:0;}
body{background:linear-gradient(180deg,#07080d 0%,#0a0b12 50%,#07080d 100%);background-attachment:fixed;
  color:var(--bc-text);line-height:1.5;-webkit-font-smoothing:antialiased;min-height:100vh;
  font-family:var(--font-body);font-size:16px;}
body.bc-noscroll{overflow:hidden;}
img{display:block;}

.bc-wrap{max-width:1240px;margin:0 auto;padding:30px 18px 72px;}
.bc-head{margin-bottom:18px;text-align:center;}
.bc-brand{display:inline-flex;align-items:center;gap:10px;}
.bc-brand-mark{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;
  border-radius:9px;background:var(--gold);color:var(--on-gold);font-size:20px;
  box-shadow:0 0 18px var(--gold-glow);}
.bc-brand-word{font-family:var(--font-head);font-weight:800;font-size:26px;letter-spacing:0.02em;}
.bc-eyebrow{display:block;margin-top:8px;font-size:11px;letter-spacing:0.18em;text-transform:uppercase;color:var(--gold);font-weight:700;font-family:var(--font-body);}
.bc-h1{font-family:var(--font-head);font-size:30px;line-height:1.1;margin:8px 0 6px;font-weight:800;letter-spacing:-0.01em;}
.bc-gold{color:var(--gold);}
.bc-lede{color:var(--muted);max-width:640px;margin:0;font-size:15px;}

/* ---- wizard panels (use-case picker + preference + budget) ---- */
.bc-card,.bc-panel{background:linear-gradient(180deg,#0e1018 0%,#0a0b12 100%);
  border:1px solid var(--bc-border);border-radius:20px;
  box-shadow:0 24px 60px rgba(0,0,0,0.6),0 0 30px var(--bc-purple-glow);}
.bc-panel{position:relative;overflow:hidden;padding:0;width:100%;margin:0 auto;}
/* exact legacy panel widths */
#bcUseCase,#bcPrefs{max-width:560px;}
#bcStart{max-width:640px;}
@media (max-width:560px){.bc-card,.bc-panel{border-radius:12px;}}
/* header band — a REAL full-width child at the top of the panel (the legacy structure) */
.bc-panel-head{padding:26px 26px 22px;text-align:center;
  background:linear-gradient(135deg,var(--bc-gold-dim),var(--bc-purple-dim),var(--bc-blue-dim));
  border-bottom:1px solid var(--bc-border);}
.bc-panel-body{padding:26px;}
.bc-panel-title{font-family:var(--font-head);font-size:27px;font-weight:800;letter-spacing:-0.01em;margin:0 0 6px;}
.bc-panel-sub{color:var(--bc-text-dim);font-size:15px;margin:0 auto;max-width:520px;}
.bc-q{margin-bottom:22px;}
.bc-q-label{font-family:var(--font-head);font-size:15px;font-weight:700;letter-spacing:0.01em;margin-bottom:11px;color:var(--text);}
.bc-tiles{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:12px;}
.bc-tile{position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:5px;text-align:center;background:var(--bc-card);border:1px solid var(--bc-border-light);border-radius:var(--radius-sm);
  padding:18px 10px;cursor:pointer;color:var(--bc-text);font:inherit;
  transition:border-color .12s,box-shadow .12s,transform .08s,background .12s;}
.bc-tile:hover{background:var(--bc-card-hover);border-color:var(--gold-line);transform:translateY(-2px);}
.bc-tile-ico{font-size:26px;line-height:1;}
.bc-tile-name{font-family:var(--font-head);font-weight:700;font-size:13px;}
.bc-tile-sub{font-size:12.5px;color:var(--bc-text-dim);font-weight:500;}
.bc-tile-sel .bc-tile-name{color:var(--acc);}

/* ── shared selected-state: accent tint + 2px top bar + 20px corner dot ──
   Driven by --acc-* (gold default; tier classes override with explicit rgba). If
   an accent var is ever missing the rule simply falls back to the gold default —
   the card layout never breaks. */
.bc-tile-sel,.bc-tier-card-sel{
  background:linear-gradient(168deg,var(--acc-bg) 0%,var(--bc-card) 60%);
  border-color:var(--acc);box-shadow:0 0 0 1px var(--acc),0 0 22px var(--acc-glow);}
.bc-tile-sel::before,.bc-tier-card-sel::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--acc-bar),transparent);}
.bc-tile-sel::after,.bc-tier-card-sel::after{content:'';position:absolute;top:9px;right:9px;width:20px;height:20px;
  border-radius:50%;background:linear-gradient(135deg,var(--acc),var(--acc-dot2));box-shadow:0 0 10px var(--acc-dotglow);}
/* color swatches as the tile icon */
.bc-sw{width:26px;height:26px;border-radius:50%;border:1.5px solid rgba(255,255,255,0.25);}
.bc-sw-black{background:#0c0c10;}
.bc-sw-white{background:#f2f2f2;}
.bc-sw-pink{background:#ff8fc4;}
.bc-panel-foot{display:flex;align-items:center;justify-content:flex-end;gap:14px;margin-top:24px;
  padding-top:18px;border-top:1px solid var(--border);flex-wrap:wrap;}

/* ---- start form (budget step) ---- */
.bc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;}
.bc-field{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:600;color:var(--muted);}
.bc-field select,.bc-field input{width:100%;background:var(--surface-2);color:var(--text);font-size:15px;
  border:1px solid var(--border-strong);border-radius:var(--radius-sm);padding:11px 12px;font-weight:500;font-family:var(--font-body);}
.bc-field select:focus,.bc-field input:focus{outline:none;border-color:var(--gold-line);box-shadow:0 0 0 2px var(--gold-soft);}
.bc-hint{color:var(--faint);font-size:12.5px;margin-right:auto;}

/* ---- budget screen: big price + gradient slider + tier cards ---- */
.bc-budget-display{text-align:center;margin:6px 0 18px;}
.bc-budget-amount{font-family:var(--font-head);font-weight:800;font-size:52px;line-height:1;
  color:var(--gold);text-shadow:0 0 26px var(--gold-glow);display:block;letter-spacing:-0.01em;}
.bc-budget-hint{display:block;margin-top:8px;font-size:13px;font-weight:600;color:var(--muted);
  text-transform:uppercase;letter-spacing:0.06em;min-height:16px;}
.bc-slider{-webkit-appearance:none;appearance:none;width:100%;height:10px;border-radius:999px;outline:none;
  background:linear-gradient(90deg,#9ca3af,#22c55e,#0c4989,#803ccb,#f7ba1e,#ef4444);
  box-shadow:inset 0 1px 3px rgba(0,0,0,0.4);cursor:pointer;}
.bc-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:26px;height:26px;border-radius:50%;
  background:#fff;border:3px solid var(--bc-gold);box-shadow:0 0 14px var(--bc-gold-glow),0 2px 6px rgba(0,0,0,0.5);cursor:pointer;}
.bc-slider::-moz-range-thumb{width:24px;height:24px;border-radius:50%;background:#fff;border:3px solid var(--bc-gold);
  box-shadow:0 0 14px var(--bc-gold-glow);cursor:pointer;}
.bc-slider-scale{display:flex;justify-content:space-between;margin:8px 2px 22px;font-size:12px;color:var(--bc-text-muted);font-weight:600;}

.bc-tier-cards{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin-bottom:18px;}
@media (max-width:720px){.bc-tier-cards{grid-template-columns:repeat(3,1fr);}}
@media (max-width:420px){.bc-tier-cards{grid-template-columns:repeat(2,1fr);}}
.bc-tier-card{position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:center;gap:3px;
  text-align:center;cursor:pointer;background:var(--bc-card);border:1px solid var(--bc-border-light);
  border-radius:var(--radius-sm);padding:14px 8px 12px;color:var(--bc-text);font:inherit;
  transition:border-color .12s,box-shadow .12s,transform .08s,background .12s;}
.bc-tier-card:hover{background:var(--bc-card-hover);border-color:var(--gold-line);transform:translateY(-2px);}
.bc-tier-ico{font-size:20px;line-height:1;color:var(--acc);}
.bc-tier-name{font-family:var(--font-head);font-weight:700;font-size:13px;letter-spacing:0.01em;}
.bc-tier-fee{font-weight:700;font-size:13px;color:var(--acc);font-variant-numeric:tabular-nums;}
.bc-tier-sub{font-size:11px;color:var(--bc-text-dim);}

/* per-tier accent vars (exact tier colors + glows, precomputed rgba — no color-mix) */
.bc-tier-common{--acc:#9ca3af;--acc-bar:rgba(156,163,175,.56);--acc-bg:rgba(156,163,175,.07);
  --acc-dot2:rgba(156,163,175,.53);--acc-dotglow:rgba(156,163,175,.25);--acc-glow:rgba(156,163,175,.2);
  --acc-t1:rgba(156,163,175,.094);--acc-t2:rgba(156,163,175,.024);--acc-tb:rgba(156,163,175,.082);}
.bc-tier-uncommon{--acc:#22c55e;--acc-bar:rgba(34,197,94,.56);--acc-bg:rgba(34,197,94,.07);
  --acc-dot2:rgba(34,197,94,.53);--acc-dotglow:rgba(34,197,94,.25);--acc-glow:rgba(34,197,87,.25);
  --acc-t1:rgba(34,197,94,.094);--acc-t2:rgba(34,197,94,.024);--acc-tb:rgba(34,197,94,.082);}
.bc-tier-rare{--acc:#1a6ef5;--acc-bar:rgba(26,110,245,.56);--acc-bg:rgba(26,110,245,.07);
  --acc-dot2:rgba(26,110,245,.53);--acc-dotglow:rgba(26,110,245,.25);--acc-glow:rgba(26,110,245,.25);
  --acc-t1:rgba(26,110,245,.094);--acc-t2:rgba(26,110,245,.024);--acc-tb:rgba(26,110,245,.082);}
.bc-tier-epic{--acc:#803ccb;--acc-bar:rgba(128,60,203,.56);--acc-bg:rgba(128,60,203,.07);
  --acc-dot2:rgba(128,60,203,.53);--acc-dotglow:rgba(128,60,203,.25);--acc-glow:var(--bc-purple-glow);
  --acc-t1:rgba(128,60,203,.094);--acc-t2:rgba(128,60,203,.024);--acc-tb:rgba(128,60,203,.082);}
.bc-tier-legendary{--acc:#f7ba1e;--acc-bar:rgba(247,186,30,.56);--acc-bg:rgba(247,186,30,.07);
  --acc-dot2:rgba(247,186,30,.53);--acc-dotglow:rgba(247,186,30,.25);--acc-glow:var(--bc-gold-glow);
  --acc-t1:rgba(247,186,30,.094);--acc-t2:rgba(247,186,30,.024);--acc-tb:rgba(247,186,30,.082);}
.bc-tier-mythic{--acc:#ef4444;--acc-bar:rgba(239,68,68,.56);--acc-bg:rgba(239,68,68,.07);
  --acc-dot2:rgba(239,68,68,.53);--acc-dotglow:rgba(239,68,68,.3);--acc-glow:rgba(239,68,68,.3);
  --acc-t1:rgba(239,68,68,.094);--acc-t2:rgba(239,68,68,.024);--acc-tb:rgba(239,68,68,.082);}

/* ---- buttons ---- */
.bc-btn{font-family:var(--font-head);font-weight:700;font-size:14px;letter-spacing:0.01em;border-radius:8px;
  padding:12px 22px;cursor:pointer;border:1px solid transparent;
  transition:background .12s,border-color .12s,opacity .12s,box-shadow .12s,filter .12s;}
.bc-btn:disabled{opacity:.45;cursor:not-allowed;}
/* primary gold CTA — Build my rig / Build for $X → / Next → */
.bc-btn-gold{background:linear-gradient(135deg,#f7ba1e,#d4a017);color:#0a0a0a;border:none;border-radius:8px;
  font-weight:900;text-transform:uppercase;letter-spacing:0.04em;box-shadow:0 4px 20px var(--bc-gold-glow);}
.bc-btn-gold:hover:not(:disabled){filter:brightness(1.07);box-shadow:0 6px 26px var(--bc-gold-glow);}
/* secondary — Skip to Builder */
.bc-btn-ghost{background:rgba(255,255,255,0.06);color:var(--bc-text-dim);border:none;}
.bc-btn-ghost:hover:not(:disabled){background:rgba(255,255,255,0.1);color:var(--bc-text);}
.bc-btn-mini{padding:6px 13px;font-size:12.5px;background:transparent;color:var(--bc-gold);border:1px solid var(--gold-line);}
.bc-btn-mini:hover:not(:disabled){background:var(--bc-gold-dim);}

/* ---- results layout ---- */
.bc-results{margin-top:8px;}
.bc-layout{display:grid;grid-template-columns:1fr 320px;gap:18px;align-items:start;}
@media (max-width:820px){.bc-layout{grid-template-columns:1fr;}}

/* ---- build preview (accent = build tier, set via .bc-tier-{tier} class in JS) ---- */
.bc-preview{background:linear-gradient(180deg,#0e1018 0%,#0a0b12 100%);border:1px solid var(--bc-border);
  border-radius:16px;padding:18px 16px;box-shadow:0 24px 60px rgba(0,0,0,0.6),0 0 30px var(--bc-purple-glow);}
.bc-preview-head{color:rgba(255,255,255,0.45);font-size:9px;font-weight:700;letter-spacing:1.5px;
  text-transform:uppercase;margin:0 2px 14px;}
.bc-parts{display:flex;flex-direction:column;gap:9px;}
.bc-part{display:flex;align-items:center;gap:13px;background:var(--bc-card);border:1px solid var(--bc-border);
  border-radius:var(--radius-sm);padding:11px 13px;}
.bc-part-badge{flex:0 0 auto;width:62px;text-align:center;font-family:var(--font-head);font-weight:700;font-size:11px;
  letter-spacing:0.04em;color:var(--acc);background:linear-gradient(135deg,var(--acc-t1),var(--acc-t2));
  border:1px solid var(--acc-tb);border-radius:4px;padding:5px 4px;}
.bc-thumb{width:62px;height:62px;object-fit:contain;background:#fff;border-radius:8px;flex:0 0 auto;}
.bc-thumb-ph{display:flex;align-items:center;justify-content:center;background:var(--surface-3);color:var(--faint);font-size:26px;border:1px solid var(--border);}
.bc-part-main{flex:1 1 auto;min-width:0;}
.bc-part-role{font-size:10.5px;letter-spacing:0.08em;text-transform:uppercase;color:var(--faint);font-weight:700;}
.bc-part-name{font-size:14px;font-weight:600;margin:1px 0 2px;overflow:hidden;text-overflow:ellipsis;}
.bc-part-spec{font-size:12.5px;color:var(--muted);}
.bc-part-right{display:flex;flex-direction:column;align-items:flex-end;gap:7px;flex:0 0 auto;}
.bc-part-price{font-weight:700;font-variant-numeric:tabular-nums;}

/* ---- summary ---- */
.bc-summary{position:sticky;top:16px;background:var(--surface);border:1px solid var(--gold-line);
  border-radius:var(--radius);padding:18px;box-shadow:0 8px 24px rgba(0,0,0,0.4);}
.bc-sum-tier{margin-bottom:12px;}
.bc-tier-pill{display:inline-block;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:0.05em;
  padding:5px 12px;border-radius:999px;background:var(--gold-soft);color:var(--gold);border:1px solid var(--gold-line);}
.bc-sum-line{display:flex;justify-content:space-between;font-size:13.5px;color:var(--muted);padding:6px 0;}
.bc-sum-line span:last-child{color:var(--text);font-variant-numeric:tabular-nums;}
.bc-sum-disc span:last-child{color:var(--green);}
.bc-sum-total{display:flex;justify-content:space-between;align-items:baseline;border-top:1px solid var(--border-strong);
  margin-top:8px;padding-top:12px;font-size:14px;color:var(--muted);}
.bc-sum-total b{font-size:23px;color:var(--text);font-variant-numeric:tabular-nums;}
.bc-checkout{width:100%;margin-top:16px;}
.bc-summary .bc-btn-ghost{width:100%;margin-top:9px;}
.bc-fineprint{color:var(--faint);font-size:11.5px;margin:12px 0 0;text-align:center;}

/* ---- FPS estimate table ---- */
.bc-fps{margin-top:18px;background:linear-gradient(180deg,#0e1018 0%,#0a0b12 100%);
  border:1px solid var(--bc-border);border-radius:20px;padding:18px 18px 8px;
  box-shadow:0 24px 60px rgba(0,0,0,0.6),0 0 30px var(--bc-purple-glow);}
.bc-fps-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:14px;}
.bc-fps-title{font-size:13px;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;color:var(--bc-text);}
.bc-fps-res{display:inline-flex;gap:3px;background:rgba(255,255,255,0.04);border:1px solid var(--bc-border);
  border-radius:8px;padding:3px;}
.bc-fps-resbtn{font:inherit;font-weight:700;font-size:12px;padding:6px 15px;border:none;border-radius:6px;
  background:transparent;color:var(--bc-text-dim);cursor:pointer;transition:background .12s,color .12s;}
.bc-fps-resbtn:hover{color:var(--bc-text);}
.bc-fps-res-on,.bc-fps-res-on:hover{background:linear-gradient(135deg,#803ccb,#0c4989);color:#fff;}
.bc-fps-table{overflow-x:auto;}
.bc-fps-row{display:grid;grid-template-columns:minmax(170px,2fr) 1fr 1fr 1fr 1fr;align-items:center;gap:8px;
  padding:11px 6px;border-bottom:1px solid var(--bc-border);min-width:520px;}
.bc-fps-row:last-child{border-bottom:none;}
.bc-fps-hrow{font-size:11px;text-transform:uppercase;letter-spacing:0.05em;color:var(--bc-text-dim);font-weight:700;padding:0 6px 8px;}
.bc-fps-hrow .bc-fps-col{text-align:center;}
.bc-fps-game{display:flex;align-items:center;gap:11px;min-width:0;}
.bc-fps-ico{font-size:20px;line-height:1;flex:0 0 auto;}
.bc-fps-meta{display:flex;flex-direction:column;min-width:0;}
.bc-fps-name{font-weight:700;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.bc-fps-cat{font-size:11.5px;color:var(--bc-text-dim);}
.bc-fps-col{text-align:center;}
.bc-fps-num{font-family:'Courier New',Courier,monospace;font-weight:700;font-size:18px;line-height:1.1;}
.bc-fps-rate{font-size:10px;color:var(--bc-text-dim);text-transform:uppercase;letter-spacing:0.04em;margin-top:2px;}
.bc-fps-note{color:var(--bc-text-dim);font-size:12px;text-align:center;margin:12px 0 6px;}

/* ---- compat banner ---- */
.bc-compat{border-radius:var(--radius);padding:13px 16px;margin-bottom:16px;font-size:13.5px;border:1px solid var(--border);}
.bc-compat-ok{background:var(--green-soft);border-color:rgba(63,185,80,0.4);color:var(--green);font-weight:600;}
.bc-compat-err{background:var(--red-soft);border-color:rgba(224,49,49,0.4);}
.bc-compat-warn{background:var(--gold-soft);border-color:var(--gold-line);}
.bc-compat-h{font-weight:700;color:var(--red);margin-bottom:5px;}
.bc-compat-i{color:#f5c0c0;margin:3px 0;}
.bc-compat-iw{color:var(--gold);}
/* Amber "Heads up" warnings section (informational; never blocks Build). bc-compat-wh sits
   on top of bc-compat-h, overriding its red to gold (used when shown alongside errors). */
.bc-compat-wh{color:var(--gold);margin-top:9px;}
.bc-compat-wi{color:var(--gold);}

/* ---- swap modal ---- */
.bc-modal{position:fixed;inset:0;background:rgba(0,0,0,0.72);display:flex;align-items:flex-end;justify-content:center;z-index:50;}
/* The author display:flex above out-ranks the UA [hidden] rule, so honor it explicitly
   — without this the swap modal renders OPEN on load and blocks the whole page. */
.bc-modal[hidden]{display:none;}
@media (min-width:680px){.bc-modal{align-items:center;}}
.bc-modal-box{background:var(--surface);border:1px solid var(--border-strong);border-radius:16px 16px 0 0;
  width:100%;max-width:760px;max-height:86vh;display:flex;flex-direction:column;}
@media (min-width:680px){.bc-modal-box{border-radius:16px;}}
.bc-modal-head{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--border);}
.bc-modal-head h2{font-size:17px;margin:0;}
.bc-modal-x{background:none;border:none;color:var(--muted);font-size:28px;line-height:1;cursor:pointer;padding:0 4px;}
.bc-modal-x:hover{color:var(--text);}
.bc-modal-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;padding:16px 20px;overflow:auto;}
.bc-modal-loading{grid-column:1/-1;color:var(--muted);text-align:center;padding:30px 0;}
.bc-pick{border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface-2);padding:10px;cursor:pointer;
  display:flex;flex-direction:column;gap:7px;transition:border-color .1s,box-shadow .1s;}
.bc-pick:hover{border-color:var(--gold-line);}
.bc-pick-cur{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold) inset;cursor:default;}
.bc-pick .bc-thumb{width:100%;height:104px;}
.bc-pick-name{font-size:12.5px;font-weight:600;line-height:1.3;max-height:49px;overflow:hidden;}
.bc-pick-meta{display:flex;justify-content:space-between;align-items:center;margin-top:auto;}
.bc-pick-price{font-weight:700;font-size:13px;font-variant-numeric:tabular-nums;}
.bc-pick-tag{font-size:11px;font-weight:700;color:var(--muted);}
.bc-pick-go{color:var(--gold);}

/* ---- toast + footer ---- */
.bc-toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:60;max-width:90%;
  background:var(--surface-3);color:var(--text);border:1px solid var(--border-strong);border-radius:10px;
  padding:12px 18px;font-size:14px;font-weight:600;box-shadow:0 10px 30px rgba(0,0,0,0.5);}
.bc-toast-err{border-color:rgba(224,49,49,0.5);color:#ffb4b4;}
.bc-toast-warn{border-color:var(--gold-line);color:var(--gold);}
.bc-foot{text-align:center;color:var(--faint);font-size:12px;margin-top:34px;}

/* ---- use-case picker (front door) — tile aesthetic ---- */
.bc-uc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;}
.bc-uc-card{background:var(--surface-2);border:1.5px solid var(--border-strong);border-radius:var(--radius-sm);
  padding:22px 20px;display:flex;flex-direction:column;gap:8px;min-height:150px;cursor:pointer;text-align:left;
  transition:border-color .12s,box-shadow .12s,transform .08s,background .12s;}
.bc-uc-card:hover{border-color:var(--gold);background:var(--gold-soft);
  box-shadow:0 0 22px var(--gold-glow);transform:translateY(-2px);}
.bc-uc-card:focus-visible{outline:none;border-color:var(--gold);box-shadow:0 0 0 2px var(--gold-soft);}
.bc-uc-name{font-family:var(--font-head);font-size:17px;font-weight:700;}
.bc-uc-desc{font-size:13.5px;color:var(--muted);line-height:1.45;}
.bc-uc-go{margin-top:auto;color:var(--gold);font-weight:700;font-size:13.5px;font-family:var(--font-head);}
.bc-uc-badge{margin-top:auto;display:inline-block;align-self:flex-start;font-size:11px;font-weight:700;
  text-transform:uppercase;letter-spacing:0.05em;color:var(--gold);background:var(--gold-soft);
  border:1px solid var(--gold-line);border-radius:999px;padding:3px 10px;}
.bc-uc-soon{cursor:not-allowed;opacity:0.5;}
.bc-uc-soon:hover{border-color:var(--border-strong);background:var(--surface-2);box-shadow:none;transform:none;}
.bc-uc-soon .bc-uc-name{color:var(--muted);}

/* back link (top-left of a wizard panel) */
.bc-back{position:absolute;top:18px;left:20px;background:none;border:none;color:var(--muted);
  font-family:var(--font-body);font-weight:600;font-size:14px;cursor:pointer;padding:4px 6px;}
.bc-back:hover{color:var(--gold);}

/* ════════════════════════════════════════════════════════════════════
   BUILD PHASE — legacy step wizard (rail → grid → sidebar → footer)
   Ported from BitCrateConfigurator.jsx inline styles.
   ════════════════════════════════════════════════════════════════════ */
.bc-results{margin-top:8px;max-width:1240px;margin-left:auto;margin-right:auto;}
.bc-results.bc-busy{opacity:.65;pointer-events:none;transition:opacity .12s;}

/* main build layout: content + 280px sidebar */
.bc-build{display:grid;grid-template-columns:1fr 280px;gap:20px;align-items:start;}
.bc-build-main{min-width:0;width:100%;}
.bc-build-side{position:sticky;top:16px;display:flex;flex-direction:column;gap:12px;}

/* Spec summary grid (legacy SPEC SUMMARY GRID) — non-sticky per-step selection preview. */
.bc-specgrid{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:16px;
  background:var(--bc-card);border-radius:12px;border:1px solid var(--bc-border);padding:14px 18px;}
.bc-specgrid[hidden]{display:none;}
.bc-sg-tile{flex:1 1 auto;min-width:115px;padding:7px 12px;border-radius:4px;cursor:pointer;
  transition:all .15s ease;display:flex;align-items:center;gap:9px;background:transparent;
  border-left:2px solid var(--acc);}
.bc-sg-tile.bc-sg-empty{border-left-color:var(--bc-border);} /* muted accent when nothing selected (legacy textMuted) */
.bc-sg-tile.bc-sg-gold{border-left-color:var(--bc-gold);}
.bc-sg-tile.bc-sg-on{border-left-color:var(--bc-gold);background:rgba(247,186,30,0.04);}
.bc-sg-thumb{width:28px;height:28px;border-radius:5px;flex-shrink:0;display:flex;align-items:center;
  justify-content:center;font-size:13px;overflow:hidden;
  background:linear-gradient(135deg,var(--acc-t1),var(--acc-t2));border:1px solid var(--acc-tb);}
.bc-sg-thumb img{width:100%;height:100%;object-fit:contain;padding:2px;}
.bc-sg-tile.bc-sg-empty .bc-sg-thumb{background:rgba(255,255,255,.04);border-color:var(--bc-border);}
.bc-sg-main{min-width:0;display:flex;flex-direction:column;}
.bc-sg-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:1px;
  color:var(--bc-text-muted);margin-bottom:2px;}
.bc-sg-tile.bc-sg-on .bc-sg-label{color:var(--bc-gold);}
.bc-sg-name{font-size:11.5px;font-weight:500;line-height:1.3;color:rgba(255,255,255,.6);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:150px;}
.bc-sg-tile.bc-sg-on .bc-sg-name{color:var(--bc-text);font-weight:700;}
.bc-sg-name.bc-sg-none{color:rgba(255,255,255,.2);font-style:italic;}

/* sticky step header */
.bc-step-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:14px;
  position:sticky;top:var(--bc-brandbar-h,61px);z-index:40;background:var(--bc-bg);
  padding:12px 0;border-bottom:1px solid var(--bc-border);
  position:sticky;top:0;z-index:40;background:var(--bc-bg);padding:12px 0;border-bottom:1px solid var(--bc-border);}
.bc-sh-left{display:flex;align-items:center;gap:12px;min-width:0;flex:1;overflow:hidden;}
.bc-sh-num{color:var(--bc-gold);font-size:28px;font-weight:900;font-family:'Courier New',monospace;opacity:.3;flex-shrink:0;}
.bc-sh-main{min-width:0;overflow:hidden;}
.bc-sh-title{color:var(--bc-text);font-size:22px;font-weight:900;letter-spacing:.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.2;}
.bc-sh-sel{display:flex;align-items:center;gap:6px;margin-top:3px;}
.bc-sh-ok{color:#22c55e;font-size:10px;}
.bc-sh-name{color:rgba(255,255,255,.55);font-size:12px;font-weight:500;max-width:500px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.bc-sh-price{color:var(--acc);font-size:11px;font-weight:700;font-family:'Courier New',monospace;}
.bc-sh-right{display:flex;flex-direction:column;align-items:flex-end;gap:6px;flex-shrink:0;}
.bc-sh-count{color:var(--bc-text-dim);font-size:13px;white-space:nowrap;}
.bc-sh-next{padding:8px 18px;font-size:12px;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;}

/* filter pills */
.bc-filters{display:flex;flex-direction:column;gap:6px;margin-bottom:6px;}
.bc-fil-row{display:flex;gap:5px;flex-wrap:wrap;padding:2px 0;}
.bc-pill{display:inline-flex;align-items:center;gap:5px;padding:6px 14px;border-radius:8px;flex-shrink:0;cursor:pointer;
  background:rgba(255,255,255,.02);border:1px solid var(--bc-border);color:var(--bc-text-dim);font-size:11px;font-weight:700;
  font-family:var(--font-body);transition:all .15s;}
.bc-pill:hover{color:var(--bc-text);}
.bc-pill-on{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.3);color:rgba(255,255,255,.85);}
.bc-pill.bc-tier-common.bc-pill-on,.bc-pill.bc-tier-uncommon.bc-pill-on,.bc-pill.bc-tier-rare.bc-pill-on,
.bc-pill.bc-tier-epic.bc-pill-on,.bc-pill.bc-tier-legendary.bc-pill-on,.bc-pill.bc-tier-mythic.bc-pill-on{
  background:var(--acc-bg);border-color:var(--acc);color:var(--acc);}
.bc-fil-gem{width:6px;height:6px;border-radius:50%;background:var(--acc);box-shadow:0 0 6px var(--acc-dotglow);}
.bc-fil-dot{width:8px;height:8px;border-radius:50%;border:1px solid rgba(255,255,255,.2);}
.bc-brand-intel.bc-pill-on{background:rgba(59,130,246,.15);border-color:rgba(59,130,246,.4);color:#3b82f6;}
.bc-brand-nvidia.bc-pill-on{background:rgba(118,185,0,.15);border-color:rgba(118,185,0,.4);color:#76b900;}
.bc-brand-amd.bc-pill-on{background:rgba(239,68,68,.15);border-color:rgba(239,68,68,.4);color:#ef4444;}

/* product grid */
.bc-grid2{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:16px;width:100%;min-width:0;}
.bc-grid-loading{grid-column:1/-1;text-align:center;color:var(--bc-text-dim);font-size:12px;padding:30px 0;}

/* ProductCard tile (accent = item tier via .bc-tier-{name} --acc vars) */
.bc-pc{position:relative;overflow:hidden;display:flex;flex-direction:column;border-radius:10px;cursor:pointer;
  background:var(--bc-card);border:1px solid var(--bc-border);min-width:0;box-sizing:border-box;
  transition:all .25s cubic-bezier(.4,0,.2,1);box-shadow:0 1px 4px rgba(0,0,0,.15);}
.bc-pc:hover{background:var(--bc-card-hover);border-color:var(--bc-border-light);transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.35);}
.bc-pc-sel{background:linear-gradient(168deg,var(--acc-bg) 0%,var(--bc-card) 60%);border:1.5px solid var(--acc);
  box-shadow:0 0 24px var(--acc-glow),0 4px 16px rgba(0,0,0,.3);transform:scale(1.05);z-index:2;}
.bc-pc-sel:hover{transform:scale(1.05);}
.bc-pc-oos{opacity:.4;cursor:default;}
/* CPU↔GPU tier floor: visible-but-blocked tile (un-clickable, reason shown) */
.bc-pc-blocked{opacity:.5;cursor:not-allowed;filter:grayscale(.55);}
.bc-pc-blocked:hover{transform:none;box-shadow:0 1px 4px rgba(0,0,0,.15);border-color:var(--bc-border);}
.bc-pc-block{color:#ef4444;font-size:13px;font-weight:900;line-height:1;}
.bc-pc-blockmsg{margin:4px 8px 0;font-size:10px;font-weight:700;color:#fca5a5;line-height:1.3;letter-spacing:.2px;}
/* Amber soft note on a SELECTABLE tile (e.g. fan over-capacity warning) — informational. */
.bc-pc-warnmsg{margin:4px 8px 0;font-size:10px;font-weight:700;color:var(--gold);line-height:1.3;letter-spacing:.2px;}
.bc-pc-bar{position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--acc-bar),transparent);border-radius:10px 10px 0 0;}
.bc-pc-top{display:flex;justify-content:space-between;align-items:center;padding:8px 12px 4px;}
.bc-pc-dot{width:20px;height:20px;border-radius:50%;background:linear-gradient(135deg,var(--acc),var(--acc-dot2));
  display:flex;align-items:center;justify-content:center;color:#fff;font-size:10px;font-weight:900;box-shadow:0 0 10px var(--acc-dotglow);}
.bc-pc-add{width:20px;height:20px;border-radius:50%;border:1.5px solid var(--bc-border);display:flex;align-items:center;justify-content:center;color:var(--bc-text-muted);font-size:13px;}
.bc-pc:hover .bc-pc-add{border-color:var(--acc);color:var(--acc);}
.bc-pc-sold{color:var(--bc-text-dim);font-size:8px;font-weight:800;padding:2px 6px;background:rgba(255,255,255,.05);border-radius:4px;letter-spacing:1px;}
.bc-pc-badge{font-size:9px;font-weight:900;letter-spacing:.5px;text-transform:uppercase;color:var(--acc);
  background:var(--acc-bg);border:1px solid var(--acc-tb);border-radius:4px;padding:2px 7px;}
.bc-pc-body{display:flex;align-items:center;gap:10px;padding:2px 8px 4px;min-width:0;overflow:hidden;}
.bc-pc-thumb{width:100px;height:100px;border-radius:8px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:32px;overflow:hidden;
  background:linear-gradient(135deg,var(--acc-t1),var(--acc-t2));border:1px solid var(--acc-tb);}
.bc-pc-thumb img{width:100%;height:100%;object-fit:cover;}
.bc-pc-name{font-size:13px;font-weight:600;color:var(--bc-text);line-height:1.25;min-width:0;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
.bc-pc-foot{margin-top:auto;padding:6px 12px 8px;border-top:1px solid var(--bc-border);background:rgba(255,255,255,.01);}
.bc-pc-selnote{color:#22c55e;font-size:12px;font-weight:700;}
.bc-pc-delta{font-size:13px;font-weight:700;}
.bc-pc-up{color:#22c55e;}
.bc-pc-down{color:#ef4444;}
.bc-pc-same{color:var(--bc-text-dim);}
.bc-pc-full{color:var(--bc-text-muted);font-size:10px;margin-left:6px;}

/* footer nav */
.bc-step-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;
  position:sticky;bottom:0;z-index:100;background:var(--bc-bg);
  border-top:1px solid var(--bc-border);padding:12px 0;margin-top:8px;}

/* sidebar "Your Build" */
.bc-bs-card{background:var(--bc-card);border:1px solid var(--bc-border);border-radius:12px;overflow:hidden;}
.bc-bs-head{padding:12px 16px 8px;border-bottom:1px solid var(--bc-border);background:linear-gradient(135deg,var(--acc-bg),transparent);}
.bc-bs-title{color:var(--bc-text);font-weight:800;font-size:14px;letter-spacing:1.5px;text-transform:uppercase;}
.bc-bs-list{padding:8px 14px;max-height:400px;overflow-y:auto;}
.bc-bi{display:flex;align-items:center;gap:10px;padding:7px 6px;border-bottom:1px solid var(--bc-border);}
.bc-bi-thumb{width:26px;height:26px;border-radius:5px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:13px;overflow:hidden;
  background:linear-gradient(135deg,var(--acc-t1),var(--acc-t2));border:1px solid var(--acc-tb);}
.bc-bi-thumb img{width:100%;height:100%;object-fit:contain;padding:2px;}
.bc-bi-main{flex:1;min-width:0;display:flex;flex-direction:column;}
.bc-bi-role{color:var(--bc-text-muted);font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;}
.bc-bi-name{color:rgba(255,255,255,.6);font-size:12px;font-weight:500;line-height:1.3;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.bc-bi-price{color:var(--acc);font-size:12px;font-weight:700;font-family:'Courier New',monospace;flex-shrink:0;}
.bc-bi-fee{color:var(--bc-text-muted);}
.bc-bs-total{display:flex;justify-content:space-between;align-items:baseline;padding:12px 16px;
  background:linear-gradient(135deg,var(--bc-gold-dim),transparent);border-top:1px solid var(--bc-border);}
.bc-bs-total span{color:var(--bc-text-dim);font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:1px;}
.bc-bs-total b{color:var(--bc-gold);font-weight:900;font-size:26px;font-family:'Courier New',monospace;text-shadow:0 0 20px var(--bc-gold-glow);}
.bc-bs-acts{display:flex;gap:8px;}
.bc-bs-mini{flex:1;padding:10px;background:rgba(255,255,255,.03);border:1px solid var(--bc-border);border-radius:8px;
  color:var(--bc-text-dim);font-size:12px;font-weight:700;cursor:pointer;font-family:var(--font-body);transition:all .15s;}
.bc-bs-mini:hover{border-color:rgba(128,60,203,.5);color:var(--bc-text);}
.bc-bs-line{width:100%;padding:8px;background:rgba(255,255,255,.03);border:1px solid var(--bc-border);border-radius:8px;
  color:rgba(255,255,255,.5);font-size:12px;font-weight:700;cursor:pointer;font-family:var(--font-body);transition:all .15s;}
.bc-bs-line:hover{border-color:rgba(128,60,203,.5);color:var(--bc-text);}
.bc-bs-dash{background:transparent;border-style:dashed;border-color:rgba(255,255,255,.2);color:rgba(255,255,255,.45);}
.bc-bs-dash:hover{border-color:rgba(247,186,30,.6);color:var(--bc-gold);}

/* mobile build bar + drawer */
.bc-mbar{display:none;}
.bc-mbar-open{flex:1;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 14px;
  background:rgba(255,255,255,.05);border:1px solid var(--bc-border);border-radius:8px;color:var(--bc-text);font:inherit;font-weight:700;cursor:pointer;}
.bc-mbar-open b{color:var(--bc-gold);font-family:'Courier New',monospace;}
.bc-mbar-build{flex-shrink:0;}
.bc-mdrawer-wrap{position:fixed;inset:0;z-index:99998;}
.bc-mdrawer-back{position:absolute;inset:0;background:rgba(0,0,0,.6);}
.bc-mdrawer{position:absolute;top:0;right:0;bottom:0;width:85vw;max-width:340px;overflow-y:auto;padding:16px;
  display:flex;flex-direction:column;gap:12px;background:linear-gradient(180deg,#0e1018,#0a0b12);border-left:1px solid var(--bc-border);box-shadow:-8px 0 40px rgba(0,0,0,.6);}

/* responsive: legacy isMobile/isTablet — collapse sidebar, show mobile bar */
@media (max-width:1024px){
  .bc-build{grid-template-columns:1fr;}
  .bc-build-side{display:none;}
  .bc-specgrid{display:none;} /* spec summary grid is desktop-only (legacy isMobile?none) */
  .bc-grid2{grid-template-columns:repeat(2,1fr);}
  /* mobile uses the bottom bar instead of the sticky desktop footer (legacy split) */
  .bc-step-foot{display:none;}
  .bc-sh-next{display:none;} /* header Next hidden on mobile; .bc-mbar drives nav (legacy parity) */
  .bc-mbar{display:flex;gap:10px;position:sticky;bottom:0;z-index:50;padding:10px 0 14px;background:linear-gradient(180deg,transparent,var(--bc-bg) 30%);}
}
@media (max-width:560px){
  .bc-grid2{grid-template-columns:repeat(2,1fr);gap:6px;}
  .bc-pc-thumb{width:56px;height:56px;font-size:20px;}
  .bc-sh-title{font-size:15px;white-space:normal;}
  .bc-sh-num{font-size:22px;}
}

/* ════════════════════════════════════════════════════════════════════
   PART A — ProductBadges chip row (read-only spec badges on tiles)
   ════════════════════════════════════════════════════════════════════ */
.bc-pc-badges{display:flex;flex-wrap:wrap;gap:4px;padding:0 12px 6px;}
.bc-bdg{display:inline-flex;align-items:center;gap:3px;font-size:9px;font-weight:700;letter-spacing:.3px;
  padding:2px 7px;border-radius:6px;white-space:nowrap;border:1px solid transparent;}
.bc-bdg-neutral{background:rgba(255,255,255,.06);color:rgba(255,255,255,.6);border-color:rgba(255,255,255,.15);}
.bc-bdg-gold  {background:rgba(247,186,30,.1);color:#f7ba1e;border-color:rgba(247,186,30,.3);}
.bc-bdg-green {background:rgba(34,197,94,.1);color:#22c55e;border-color:rgba(34,197,94,.3);}
.bc-bdg-blue  {background:rgba(59,130,246,.1);color:#3b82f6;border-color:rgba(59,130,246,.3);}
.bc-bdg-purple{background:rgba(168,85,247,.1);color:#a855f7;border-color:rgba(168,85,247,.3);}
.bc-bdg-rgb   {background:rgba(168,85,247,.1);color:#a855f7;border-color:rgba(168,85,247,.3);}
.bc-bdg-amber {background:rgba(251,191,36,.1);color:#fbbf24;border-color:rgba(251,191,36,.3);}
.bc-bdg-cyan  {background:rgba(34,211,238,.1);color:#22d3ee;border-color:rgba(34,211,238,.3);}
.bc-bdg-red   {background:rgba(239,68,68,.1);color:#ef4444;border-color:rgba(239,68,68,.3);}

/* ════════════════════════════════════════════════════════════════════
   PART B — Legacy sticky top header (build phase only; JSX 3951)
   ════════════════════════════════════════════════════════════════════ */
.bc-stickyhdr{position:sticky;top:0;z-index:999;background:rgba(10,11,16,0.95);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-bottom:1px solid var(--bc-border);}
.bc-stickyhdr[hidden]{display:none;}
.bc-shx-inner{max-width:1240px;margin:0 auto;height:60px;display:flex;align-items:center;justify-content:space-between;
  gap:12px;padding:0 24px;flex-wrap:wrap;}
.bc-shx-left{display:flex;align-items:center;gap:14px;}
.bc-shx-lock{display:flex;flex-direction:column;line-height:1.1;}
.bc-shx-org{font-size:9px;font-weight:700;color:var(--bc-text-dim);letter-spacing:3px;text-transform:uppercase;}
.bc-shx-word{font-size:20px;font-weight:900;letter-spacing:2px;color:#fff;}
.bc-shx-div{width:1px;height:28px;background:var(--bc-border);}
.bc-shx-tier{display:inline-flex;align-items:center;gap:4px;padding:4px 12px;border-radius:6px;
  font-size:11px;font-weight:800;letter-spacing:1px;text-transform:uppercase;
  color:var(--acc);background:var(--acc-bg);border:1px solid var(--acc);}
.bc-shx-dot{width:5px;height:5px;border-radius:50%;background:var(--acc);box-shadow:0 0 8px var(--acc);}
.bc-shx-right{display:flex;align-items:center;gap:16px;}
.bc-shx-power{display:flex;align-items:center;gap:6px;background:var(--bc-bg);border:1px solid var(--bc-border);
  border-radius:8px;padding:6px 14px;font-size:11px;font-weight:700;color:var(--acc);white-space:nowrap;}
.bc-shx-sep{color:var(--bc-text-muted);}
.bc-shx-w{color:var(--bc-text-dim);font-weight:600;}
.bc-shx-price{text-align:right;}
.bc-shx-amt{font-size:28px;font-weight:900;font-family:'Courier New',Courier,monospace;color:#fff;line-height:1;
  letter-spacing:-1px;text-shadow:0 0 30px var(--bc-gold-glow);}
.bc-shx-cur{font-size:11px;color:var(--bc-gold);vertical-align:top;margin-right:1px;}
.bc-shx-mo{font-size:10px;color:var(--bc-text-muted);margin-top:1px;}
.bc-shx-fin{color:var(--bc-blue);}
.bc-shx-cart{padding:12px 28px;}
@media (max-width:1024px){ .bc-shx-cart{display:none;} }
@media (max-width:768px){
  .bc-shx-org,.bc-shx-power,.bc-shx-mo,.bc-shx-div{display:none;}
  .bc-shx-inner{height:auto;padding:8px 12px;}
  .bc-shx-amt{font-size:20px;}
  .bc-shx-word{font-size:16px;}
}

/* ════════════════════════════════════════════════════════════════════
   ACCESSORIES STEP — subcategory tabs (multi-select peripheral step)
   ════════════════════════════════════════════════════════════════════ */
.bc-acctabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:4px;}
.bc-acctab{display:inline-flex;align-items:center;gap:6px;padding:7px 13px;border-radius:8px;cursor:pointer;
  background:var(--bc-card);border:1px solid var(--bc-border-light);color:var(--bc-text-dim);
  font:inherit;font-size:12px;font-weight:700;transition:all .12s;}
.bc-acctab:hover{color:var(--bc-text);border-color:var(--gold-line);}
.bc-acctab-on{background:var(--bc-gold-dim);border-color:var(--bc-gold);color:var(--bc-gold);}
.bc-acctab-ico{font-size:14px;line-height:1;}
.bc-acctab-n{display:inline-flex;align-items:center;justify-content:center;min-width:16px;height:16px;padding:0 4px;
  border-radius:999px;background:var(--bc-gold);color:#0a0a0a;font-size:10px;font-weight:900;}
.bc-sh-sub2{color:var(--bc-text-dim);font-size:12px;margin-top:3px;}

/* ---- Save / Share modal (shareable URL + email this build) ---- */
.bc-modal{position:fixed;inset:0;z-index:70;display:flex;align-items:center;justify-content:center;
  padding:20px;background:rgba(4,5,9,0.72);backdrop-filter:blur(3px);}
.bc-modal[hidden]{display:none;}
.bc-modal-card{position:relative;width:100%;max-width:440px;background:var(--surface);
  border:1px solid var(--bc-border-light);border-radius:14px;padding:24px 22px 22px;
  box-shadow:0 20px 60px rgba(0,0,0,0.6);}
.bc-modal-x{position:absolute;top:12px;right:14px;background:none;border:none;color:var(--bc-text-dim);
  font-size:24px;line-height:1;cursor:pointer;padding:2px 6px;}
.bc-modal-x:hover{color:var(--bc-text);}
.bc-modal-title{margin:0 0 16px;font-family:var(--font-head);font-weight:700;font-size:18px;color:var(--bc-text);}
.bc-modal-lbl{display:block;margin:14px 0 6px;font-size:12px;font-weight:600;letter-spacing:.04em;
  text-transform:uppercase;color:var(--bc-text-dim);}
.bc-modal-lbl:first-of-type{margin-top:0;}
.bc-modal-row{display:flex;gap:8px;align-items:stretch;}
.bc-modal-inp{flex:1;min-width:0;background:var(--bc-bg);border:1px solid var(--bc-border-light);
  border-radius:8px;color:var(--bc-text);font-size:13.5px;padding:10px 12px;font-family:inherit;}
.bc-modal-inp:focus{outline:none;border-color:var(--bc-gold);}
.bc-modal-row .bc-btn-gold{flex:0 0 auto;padding:10px 18px;}

/* ---------- build-count stepper (1-5) — Tier & Budget step ---------- */
.bc-count{display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  margin:18px 0 4px;padding:14px 16px;background:var(--bc-card);
  border:1px solid var(--bc-border);border-radius:12px;}
.bc-count-label{font-weight:800;font-size:14px;color:var(--bc-text);
  text-transform:uppercase;letter-spacing:0.03em;}
.bc-count-stepper{display:inline-flex;align-items:center;gap:2px;
  background:var(--bc-bg);border:1px solid var(--bc-border-light);border-radius:9px;padding:3px;}
.bc-count-btn{width:34px;height:34px;border:none;border-radius:7px;cursor:pointer;
  background:transparent;color:var(--bc-text);font-size:20px;font-weight:800;line-height:1;
  display:flex;align-items:center;justify-content:center;transition:background .12s,opacity .12s;}
.bc-count-btn:hover:not(:disabled){background:var(--bc-card-hover);}
.bc-count-btn:disabled{opacity:0.28;cursor:default;}
.bc-count-val{min-width:30px;text-align:center;font-size:17px;font-weight:900;color:var(--bc-gold);}
.bc-count-hint{color:var(--bc-text-dim);font-size:12.5px;flex:1 1 180px;}
.bc-count.bc-count-off{opacity:0.62;}

/* ---------- build chooser (N>1 summary cards) ---------- */
.bc-chooser-grid{display:grid;gap:16px;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));max-width:980px;margin:0 auto;}
.bc-choose-card{background:var(--bc-card);border:1px solid var(--bc-border-light);
  border-top:3px solid var(--acc,#9ca3af);border-radius:14px;padding:18px;
  display:flex;flex-direction:column;gap:12px;transition:border-color .14s,transform .14s,box-shadow .14s;}
.bc-choose-card:hover{transform:translateY(-3px);border-color:var(--acc,var(--bc-gold));
  box-shadow:0 10px 30px rgba(0,0,0,0.45);}
.bc-choose-top{display:flex;align-items:center;justify-content:space-between;gap:8px;}
.bc-choose-num{font-size:12px;font-weight:800;text-transform:uppercase;
  letter-spacing:0.05em;color:var(--bc-text-dim);}
.bc-choose-badge{font-size:11px;font-weight:900;text-transform:uppercase;letter-spacing:0.04em;
  padding:3px 9px;border-radius:999px;color:var(--acc,#9ca3af);
  background:var(--acc-bg,rgba(156,163,175,.07));border:1px solid var(--acc,#9ca3af);}
.bc-choose-price{font-size:28px;font-weight:900;color:var(--bc-text);line-height:1;}
.bc-choose-specs{margin:0;display:flex;flex-direction:column;gap:8px;}
.bc-choose-specs div{display:flex;flex-direction:column;gap:2px;}
.bc-choose-specs dt{font-size:10.5px;font-weight:800;text-transform:uppercase;
  letter-spacing:0.05em;color:var(--bc-text-muted);}
.bc-choose-specs dd{margin:0;font-size:13px;color:var(--bc-text);line-height:1.35;}
.bc-choose-pick{margin-top:auto;padding:11px 14px;font-size:13px;cursor:pointer;}