/* PCBuilder — studio visual system. Loaded after the legacy layout. */
.search-suggestions { display:none!important; }
:root {
  --bg:#f7f5f1; --panel:#efece6; --panel-2:#ebe8e0;
  --border:#eae7e1; --border-soft:#eae8e1;
  --text:#0d121c; --muted:#374a71; --muted-2:#3a3f4a;
  --copper:#866213; --good:#208e61;
}
body { background:#f7f5f1; background-image:radial-gradient(ellipse at 12% 10%,#caae7240,transparent 40%),radial-gradient(ellipse at 92% 35%,#6690cc30,transparent 42%); background-size:auto; }
body::after { background:linear-gradient(110deg,transparent 40%,#0d121c02 40.1%,transparent 40.3%); }
.app-shell { width:100%; max-width:none; padding:0 clamp(18px,2.1vw,40px) 32px; }
button,input,select { font-family:'Manrope',sans-serif; }
button,a,input,select { -webkit-tap-highlight-color:transparent; }
section, #buildTitle { scroll-margin-top:24px; }
.topbar { display:flex; align-items:center; justify-content:space-between; gap:24px; padding:25px 0; margin:0; border-bottom:1px solid #0d121c0d; }
.topbar { border-width:0 0 1px; border-radius:0; background:transparent; box-shadow:none; }
.mobile-compare-head { padding:0; border:0; background:none; box-shadow:none; border-radius:0; }
.brand { flex:none; gap:12px; }
.brand-mark { width:66px; height:66px; position:relative; isolation:isolate; border:0!important; border-radius:0; background:transparent!important; box-shadow:none!important; display:grid; place-items:center; }
.brand-mark::before { content:""; position:absolute; z-index:-1; inset:16%; border-radius:50%; background:conic-gradient(from 210deg,#be8a1b,#11accd,#450da5,#be8a1b); filter:blur(10px); opacity:.34; animation:logo-rgb-glow 7s linear infinite; }
.brand-mark img { width:64px; height:64px; object-fit:contain; filter:contrast(1.14) saturate(1.35) drop-shadow(0 0 3px #b4831a); animation:logo-rgb-shift 8s ease-in-out infinite; }
@keyframes logo-rgb-glow { 0%,100% { transform:rotate(0deg) scale(.92); opacity:.28; } 50% { transform:rotate(180deg) scale(1.1); opacity:.52; } }
@keyframes logo-rgb-shift { 0%,28% { filter:contrast(1.14) saturate(1.35) hue-rotate(0deg) drop-shadow(0 0 3px #b4831a); } 42%,60% { filter:contrast(1.14) saturate(1.55) hue-rotate(105deg) drop-shadow(0 0 3px #11aece); } 74%,88% { filter:contrast(1.14) saturate(1.55) hue-rotate(215deg) drop-shadow(0 0 3px #420c97); } 100% { filter:contrast(1.14) saturate(1.35) hue-rotate(360deg) drop-shadow(0 0 3px #b4831a); } }
.brand-name { font-size:1.22rem; letter-spacing:-.05em; }
.brand-name span { color:#866213; }
.brand-sub { margin-top:6px; font:500 .55rem/1.4 'Manrope',sans-serif; letter-spacing:.11em; color:#425a8a; }
.brand-sub-accent { color:#2a3958; }
.studio-nav { display:flex; align-items:center; gap:30px; }
.studio-nav a { color:#2e3e5f; font-size:.78rem; font-weight:600; text-decoration:none; transition:color .18s; }
.studio-nav a:hover { color:#0d121c; }
.studio-nav .nav-guides { color:#866213; }
.studio-nav .nav-guides:hover { color:#866213; }
.studio-nav .nav-build { display:flex; align-items:center; gap:22px; padding:10px 16px; border:1px solid #0d121c17; border-radius:10px; background:#0d121c04; color:#6f592a; }
.nav-build span { color:#866213; }
.topbar .catalog-toggle.status-pill { display:flex!important; }
.studio-intro { display:flex; align-items:flex-end; justify-content:space-between; gap:35px; padding:27px 0 24px; }
.studio-intro .intro-copy { max-width:800px; min-width:0; }
.studio-eyebrow,.section-eyebrow { font:600 .62rem/1.5 'Manrope',sans-serif; letter-spacing:.17em; color:#3a4e77; }
.studio-eyebrow { display:flex; align-items:center; gap:9px; margin-bottom:11px; }
.studio-eyebrow > span { width:6px; height:6px; border-radius:50%; background:#866213; box-shadow:0 0 12px #86621370; }
.studio-intro h1 { font:600 clamp(1.8rem,2.7vw,2.45rem)/1.12 'Sora',sans-serif; letter-spacing:-.055em; color:#0d121c; }
.studio-intro h1 span { background:linear-gradient(105deg,#866213,#866213 70%,#6f592a); background-clip:text; -webkit-background-clip:text; color:transparent; }
.studio-description { margin-top:11px; max-width:490px; color:#384c73; font-size:.8rem; line-height:1.5; }
.intro-guide { flex:none; display:flex; gap:14px; align-items:center; padding-bottom:4px; }
.intro-guide span { display:flex; flex-direction:column; gap:10px; font-size:.68rem; color:#2d3d5d; }
.intro-guide b { width:27px; height:27px; display:grid; place-items:center; border:1px solid #0d121c14; border-radius:50%; color:#6f592a; font:500 .6rem 'IBM Plex Mono',monospace; background:#0d121c03; }
.intro-guide i { width:28px; height:1px; background:#0d121c16; margin-bottom:23px; }
.workspace { grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:24px; }
.visual-panel,.selection-panel,.compare-panel,.build-panel { border:1px solid #0d121c10; background:linear-gradient(145deg,#ebe8e1db,#f1efe9f5); box-shadow:0 20px 50px #0000000d,inset 0 1px #0d121c04; border-radius:22px; }
.workspace > .visual-panel { min-height:0; padding:22px; height:auto; overflow:visible; }
.visual-panel::before { width:65%; height:65%; opacity:.14; background:#a77d21; filter:blur(75px); }
.panel-kicker { position:relative; z-index:9; padding-bottom:17px; border-color:#0d121c08; font:.6rem 'IBM Plex Mono',monospace; letter-spacing:.1em; }
.panel-kicker-actions strong { font:500 .58rem 'Manrope',sans-serif; color:#405785; letter-spacing:.07em; }
.clear-build-button { width:36px; height:36px; border-color:#0d121c15; background:#0d121c03; color:#384c75; }
.wheel-wrap { width:min(100%,500px); margin:14px auto 8px; }
.wheel-wrap::before { inset:12%; border-color:#8662131f; box-shadow:0 0 80px #8b651411; background:radial-gradient(circle,#8b651408,transparent 68%); }
.tower-plate img { filter:drop-shadow(0 18px 20px #00000036) drop-shadow(0 0 26px #a77a1815); }
.node { background:radial-gradient(ellipse at 50% 15%,#e9e7e2,#efece5 75%); border-color:#b6bcc94d; box-shadow:0 8px 24px #00000015,inset 0 1px #0d121c0a; }
.node .node-label { font:500 .61rem/1.2 'Manrope',sans-serif; color:#283652; }
.node.active { border-color:#866213; background:radial-gradient(circle at 50% 20%,#caae72,#ebe9e2 80%); box-shadow:0 0 0 5px #8662130a,0 0 24px #8b651416; }
.node.active .node-label { color:#0d121c; }
.wheel-lines line { stroke:#e9e7e2; opacity:.65; }
.wheel-lines line.active { stroke:#866213; opacity:1; }
.wheel-lines line.has-build-part { stroke:var(--good); opacity:1; }
.selection-panel { height:auto; min-height:0; padding:24px; }
.category-heading { padding:0; margin:0 0 12px; background:none; flex-wrap:wrap; gap:12px; }
.category-heading-copy { gap:8px; }
.category-heading h2 { font-size:1.06rem; letter-spacing:-.035em; }
.category-tag { font-size:.6rem; padding:7px; border-color:#86621333; color:#866213; background:#8662130b; }
.category-help { width:20px; height:20px; border-color:#0d121c21; color:#364970; background:transparent; }
.category-heading-actions { margin-left:auto; }
.favorites-toggle,#clearBtn { min-height:34px; font-size:.65rem; border-color:#0d121c12; background:#0d121c03; }
.selection-panel > .selection-meta { margin:0 0 18px; color:#3a3f4b; font-family:'Manrope',sans-serif; font-size:.68rem; }
.filter-toggle { background:#0d121c03; color:#304163; border-color:#0d121c13; font-size:.72rem; }
.filter-toggle:hover { border-color:#8662134d; }
.part-search { border-color:#0d121c12; border-radius:10px; background:#f6f4f0; font-size:.76rem; }
.part-search:focus { border-color:#86621388; box-shadow:0 0 0 3px #8662130d; }
.search-button,.save-build-button { background:linear-gradient(120deg,#846115,#83621c); color:#ede9de; border:1px solid #8662136b; box-shadow:0 4px 16px #86621312; }
.search-button:hover,.save-build-button:hover { background:#866213; color:#ece8df; }
.result-label { font:500 .62rem/1.4 'Manrope',sans-serif; color:#3e5481; margin-bottom:10px; }
#cardsGrid { gap:9px; max-height:530px; padding:1px 4px 4px 1px; scrollbar-width:thin; }
#cardsGrid .part-card { min-height:105px; padding:13px 14px!important; border-radius:12px; border-color:#0d121c0e; background:linear-gradient(125deg,#ebe8e0,#edeae2); box-shadow:inset 2px 0 color-mix(in srgb,var(--category-accent) 50%,transparent); }
#cardsGrid .part-card:hover { border-color:color-mix(in srgb,var(--category-accent) 40%,transparent); background:linear-gradient(125deg,#ebe8e0,#ebe8e0); transform:translateY(-1px); box-shadow:inset 2px 0 var(--category-accent),0 7px 18px #0000000b; }
#cardsGrid .part-card.selected { border-color:color-mix(in srgb,var(--category-accent) 50%,transparent); background:linear-gradient(125deg,var(--category-glow),#ebe8e0); box-shadow:inset 2px 0 var(--category-accent); }
.part-card .flex-1 { grid-template-columns:minmax(0,1fr) auto; grid-template-areas:'name price' 'spec spec' 'actions actions'; gap:5px 10px; }
.part-card .part-name { font:600 .77rem/1.5 'Manrope',sans-serif; letter-spacing:0; }
.part-card .part-spec { font-size:.61rem; margin:0!important; color:#3e5481!important; }
#cardsGrid .part-price { justify-self:end; font-size:.79rem; padding:4px 6px; background:#f6f4f06b; border-color:#0d121c0a; color:#0d121c!important; border-radius:6px; white-space:nowrap; }
.part-card .part-card-actions { margin:3px 0 0; gap:7px; justify-content:flex-end; }
.part-card .chk { width:17px; height:17px; margin-top:4px; background:#f3f0ea; border-color:#0d121c26; border-radius:5px; }
#cardsGrid .part-card.selected .chk { background:var(--category-accent); border-color:var(--category-accent); }
.build-part-btn,.compare-build-btn { color:#202c44; border-color:#0d121c18; background:#0d121c03; font-size:.63rem; border-radius:7px; }
.build-part-btn:hover,.compare-build-btn:hover { color:#0d121c; border-color:#0d121c3d; background:#0d121c09; }
.build-part-btn.active,.compare-build-btn.active { color:#1a6e48; border-color:#208e6135; background:#208e610b; }
.affiliate-link,.amazon-link { border-color:#85662235; background:#eae7e1; color:#866213; box-shadow:none; border-radius:7px; }
.affiliate-link:hover,.amazon-link:hover { background:#ece8df; border-color:#86621377; }
.favorite-part-btn { color:#3a4e77; border-color:#0d121c13; background:transparent; }
.favorite-part-btn.active { color:#866213; border-color:#86621340; background:#8662130d; box-shadow:none; }
.part-card.disabled { opacity:.6; }
.section-eyebrow { margin:0 0 8px!important; color:#425988!important; font-size:.58rem!important; }
.compare-panel,.build-panel { padding:28px; margin-top:8px; }
.compare-heading { margin-bottom:23px; }
.compare-heading h2,.build-heading h2 { font-size:1.25rem; letter-spacing:-.045em; }
.compare-shell { border-color:#0d121c0c; border-radius:14px; box-shadow:none; }
table.compare thead th,table.compare thead th.label-col { background:#ebe8e0; padding:20px 16px; }
table.compare th.label-col,table.compare td.label-col { background:#ede9e1; font-family:'Manrope',sans-serif; color:#2f4062; }
table.compare td { border-bottom-color:#0d121c06; }
.compare-product-name { font:600 .78rem/1.5 'Manrope',sans-serif; }
.compare-product-head { min-height:72px; }
.compare-shell .compare-build-btn { margin-top:12px; margin-bottom:7px; }
.badge { font:600 .58rem/1.3 'Manrope',sans-serif; letter-spacing:0; padding:4px 7px; }
.compare-shell .badge { display:table; margin-top:7px; }
.comparison-insight { background:#86621306; border-color:#86621318; font-size:.73rem; }
.comparison-insight strong { color:#866213; }
.empty-state { padding:32px 22px; border:1px dashed #0d121c16; background:radial-gradient(ellipse at 50% 0%,#8662130a,transparent 70%),#f2f0e9; border-radius:15px; }
.empty-state::before { content:none; }
.empty-art { display:flex; justify-content:center; align-items:center; gap:8px; margin-bottom:17px; color:#3c527d; }
.empty-art svg { width:44px; height:54px; padding:9px; border:1px solid #6f592a2b; border-radius:8px; background:linear-gradient(145deg,#eae7e1,#eae8e1); }
.empty-art svg:first-child { transform:rotate(-9deg) translateY(3px); }
.empty-art svg:last-child { transform:rotate(9deg) translateY(3px); }
.empty-state h3 { font:500 .91rem/1.4 'Sora',sans-serif; color:#131a27; margin-bottom:8px; }
.empty-state p { font-size:.74rem; line-height:1.6; max-width:380px; margin:auto; }
.build-total { color:#7f5f1a!important; font-size:1.03rem; letter-spacing:-.04em; }
.build-summary .build-compatibility[data-tooltip]::after { left:auto; right:0; }
.build-compatibility[data-tooltip]::after { visibility:hidden; }
.build-compatibility[data-tooltip]:hover::after,.build-compatibility[data-tooltip]:focus-visible::after { visibility:visible; }
.build-heading p { color:#3d5380; font-size:.76rem; }
.build-metric { background:#ece8df; border-color:#0d121c0c; box-shadow:none; }
.build-metric-icon { background:#0d121c05; color:#2a3958; border-color:#0d121c08; }
.build-slot { background:#eeebe3; border-color:#0d121c0e; border-radius:11px; }
.build-slot.empty { border-style:dashed; background:#f0ede680; opacity:.8; }
.build-slot-label { color:#2a3958; letter-spacing:.08em; }
.saved-build-card { background:#eeebe3; border-color:#0d121c0d; }
.site-footer { margin-top:38px; padding-top:24px; border-color:#0d121c0d; gap:30px; }
.footer-copy strong { color:#283754; }
.affiliate-disclosure { max-width:550px; color:#3a3f4b; font-size:.67rem; line-height:1.7; }
.footer-button { border-color:transparent; background:transparent; box-shadow:none; color:#364a71; font-size:.67rem; padding:8px; }
.cookie-notice { border-color:#0d121c15; background:#ece8dff5; backdrop-filter:blur(18px); border-radius:15px; box-shadow:0 18px 60px #00000030; }
.cookie-accept { background:#826017; color:#ede9de; border-color:#86621380; }
.wheel-incompatibility.visible { animation:warning-glow 2.5s ease-in-out infinite; }
@keyframes warning-glow { 50% { box-shadow:0 0 0 12px #ac7e1914,0 0 48px #ba881b55; } }
@media(max-width:1100px) { .studio-intro { gap:20px; } .intro-guide { display:none; } .category-heading-actions { margin-left:0; } }
@media(max-width:980px) { .workspace { grid-template-columns:1fr; } .workspace > .visual-panel { min-height:0; } .selection-panel { height:auto; min-height:0; } #cardsGrid { max-height:none; } }
@media(min-width:981px) {
  .workspace > .visual-panel,.selection-panel { height:640px; min-height:640px; }
  .selection-panel #cardsGrid { overflow-y:auto; }
  .selection-panel #cardsGrid .part-card { min-height:76px; padding:9px 11px!important; }
  .selection-panel #cardsGrid .part-card .flex-1 { gap:2px 9px; }
  .selection-panel #cardsGrid .part-card .part-name { font-size:.71rem; line-height:1.3; }
  .selection-panel #cardsGrid .part-card .part-spec { font-size:.57rem; }
  .selection-panel #cardsGrid .part-card .part-card-actions { margin-top:1px; gap:5px; }
  .selection-panel #cardsGrid .part-card .build-part-btn,.selection-panel #cardsGrid .part-card .affiliate-link,.selection-panel #cardsGrid .part-card .amazon-link,.selection-panel #cardsGrid .part-card .favorite-part-btn { min-height:26px; }
  .selection-panel #cardsGrid .part-card .build-part-btn { padding-inline:8px; font-size:.58rem; }
  .selection-panel #cardsGrid .part-card .affiliate-link { padding:4px 7px; }
  .selection-panel #cardsGrid .part-card .favorite-part-btn { width:26px; height:26px; }
}
/* Keep all card actions visible on desktop: the Amazon button must not be
   clipped when the card's price occupies the right column. */
@media(min-width:701px) {
  .part-card .flex-1 { grid-template-areas:"name price" "spec price" "actions actions"; }
  .part-card .part-card-actions { grid-column:1 / -1; grid-row:3; justify-self:stretch; width:100%; max-width:none; justify-content:flex-end; overflow:visible; }
  .part-card .part-card-actions .affiliate-link,
  .part-card .part-card-actions .amazon-link,
  .part-card .part-card-actions .affiliate-pending { display:inline-flex !important; visibility:visible !important; opacity:1 !important; }
}
@media(max-width:700px) {
  .app-shell { padding:0 14px 25px; }
  .topbar { display:flex; padding:17px 0; margin:0; gap:10px; flex-wrap:nowrap; }
  .brand { flex:initial; gap:9px; min-width:0; } .brand-mark { width:48px; height:48px; } .brand-mark img { width:46px; height:46px; }
  .brand-name { font-size:1.05rem; } .brand-sub { font-size:.43rem; letter-spacing:.04em; margin-top:5px; }
  .studio-nav { gap:7px; } .studio-nav .nav-guides { display:flex; padding:9px 8px; font-size:.63rem; } .studio-nav .nav-build { padding:9px 10px; gap:9px; font-size:.65rem; }
  .studio-intro { padding:27px 0 24px; } .studio-eyebrow { font-size:.5rem; letter-spacing:.13em; margin-bottom:12px; }
  .studio-intro h1 { font-size:clamp(1.55rem,6.3vw,2.15rem); letter-spacing:-.055em; line-height:1.2; }
  .studio-description { font-size:.74rem; margin-top:12px; max-width:310px; }
  .workspace { padding:0; display:block; }
  .workspace > .visual-panel { min-height:0!important; padding:17px 16px 13px; height:auto!important; overflow:visible; }
  .visual-panel,.selection-panel,.compare-panel,.build-panel { border-radius:18px; margin-bottom:18px; }
  .panel-kicker { font-size:.52rem; padding-bottom:12px; } .panel-kicker-title { gap:9px; }
  .wheel-wrap { width:min(100%,340px); min-height:0; margin:12px auto 0; }
  .node .node-label { font-size:.48rem; } .clear-build-button { width:36px; height:36px; }
  .selection-panel,.compare-panel,.build-panel { padding:18px 15px; }
  .category-heading { margin:0 0 12px; padding:0; gap:11px; }
  .category-heading-copy { flex-basis:100%; } .category-heading h2 { font-size:1.04rem; }
  .category-heading-actions { width:100%; justify-content:space-between; }
  .favorites-toggle,#clearBtn { min-height:38px; font-size:.7rem; }
  .part-search { font-size:16px; } .search-button { font-size:.7rem; padding-inline:11px; }
  #cardsGrid { overflow:visible; padding:0; gap:10px; }
  #cardsGrid .part-card { padding:12px!important; }
  .part-card .flex-1 { grid-template-columns:minmax(0,1fr); grid-template-areas:'name' 'spec' 'price' 'actions'; gap:6px; }
  .part-card .part-name { font-size:.82rem; -webkit-line-clamp:3; }
  .part-card .part-spec { font-size:.64rem; }
  #cardsGrid .part-price { justify-self:start; font-size:.88rem; padding:5px 8px; }
  .part-card .part-card-actions { justify-content:flex-start; gap:8px; margin-top:4px; }
  .part-card-actions .build-part-btn,.part-card-actions .affiliate-link,.part-card-actions .amazon-link,.favorite-part-btn { min-height:40px; }
  .favorite-part-btn { width:40px; height:40px; } .part-card-actions .build-part-btn { padding-inline:13px; font-size:.7rem; }
  .affiliate-link,.amazon-link { padding-inline:12px; } .amazon-badge svg { width:46px; height:21px; }
  .compare-heading .scroll-hint { display:none; }
  .compare-heading h2,.build-heading h2 { font-size:1.13rem; } .compare-heading { margin-bottom:17px; }
  .mobile-compare-card { border-color:#0d121c12; background:linear-gradient(135deg,#ebe8e0,#eeebe4); padding:16px; }
  .mobile-compare-card.mobile-winner { border-color:#86621345; box-shadow:inset 2px 0 #866213; }
  .mobile-compare-actions > button,.mobile-compare-actions > a { min-height:40px; }
  .mobile-spec { grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:10px; padding-block:12px; }
  .mobile-spec dd { overflow-wrap:anywhere; line-height:1.5; } .mobile-spec .value-tag { display:table; margin:4px 0 0 auto; }
  .build-heading { flex-direction:column; align-items:stretch; } .build-summary { flex-direction:row; align-items:center; margin:13px 0 0; }
  .build-metric { padding:11px; gap:9px; } .build-metric-label { font-size:.6rem; } .build-metric-value { font-size:.8rem; }
  .site-footer { margin-top:25px; padding-top:20px; } .footer-nav { margin-top:14px; gap:6px; }
  .build-compatibility[data-tooltip]::after { width:min(280px,76vw); }
  .build-summary .build-compatibility[data-tooltip]::after { left:auto; right:0; }
  .action-toast { right:16px; bottom:16px; }
}
@media(prefers-reduced-motion:reduce) { .wheel-incompatibility.visible { animation:none; } }