/* Steam-inspired desktop library. Keep the configurator's own identity. */
:root{color-scheme:dark;--bg:#1b2838;--paper:#202d3d;--ink:#dce3eb;--muted:#a7b6c6;--line:#304255;--green:#67c1f5;--lime:#b8d86c;--soft:#263f50;--warn:#f2be70;--radius:3px}
body{background:radial-gradient(ellipse at 65% 0,#29455e 0,transparent 58%),#1b2838}
::selection{background:#67c1f5;color:#101b27}
.sidebar{background:linear-gradient(180deg,#171d25 78px,#1c2633 78px);border-color:#101923;padding-top:24px}
.brand{color:#f0f3f7;font-size:24px;letter-spacing:1px;gap:12px}
.brand-icon{background:transparent;color:#f0f3f7;border:2px solid #c6d4df;border-radius:50%;font-size:28px;width:38px;height:38px;font-weight:600}
.brand-dot{background:#67c1f5}
.workspace{margin-top:40px;font-size:10px;color:#97a9bc;letter-spacing:.8px}
.nav{border-radius:2px;margin-bottom:2px;color:#bdc9d6;padding-top:13px;padding-bottom:13px;transition:background .15s,color .15s}
.nav.active{color:#fff;background:linear-gradient(90deg,#315675,#294159)}
.nav:hover:not(.active){background:#2b3d50;color:#fff}
.nav.active svg{color:#67c1f5}
.count{background:#16212e;color:#b4c9dd;border-radius:2px}
.nav.active .count{background:#1a2e42}
.sidebar-note{border-color:#324252;color:#c2d0de}
.status-dot{background:#a4c85b}
.sidebar-note p{color:#a7b6c6;font-size:11px}
.sidebar-bottom{border-color:#324252;color:#dce3eb}
.avatar{border-radius:2px;background:linear-gradient(135deg,#4b839c,#284563);color:#bfe8ff;border:1px solid #6696af}
header{background:#171d25;border-color:#101923;height:78px;gap:18px}
.top-navigation{display:flex;align-items:center;gap:22px;min-width:0}
.top-tab{padding:7px 0;background:none;border:0;border-bottom:3px solid transparent;border-radius:0;text-transform:uppercase;letter-spacing:.5px;font-size:12px;font-weight:600;display:flex;align-items:center;color:#c5cbd3;white-space:nowrap}
.top-tab.active{color:#67c1f5;border-bottom-color:#67c1f5}
.top-tab:hover{color:white}
.top-tab svg,.top-tab .count{display:none}
header .breadcrumb{display:none}
.local-status{color:#a7b6c6;font-size:10px}
main{padding-top:34px}
h1{font-weight:500;letter-spacing:-.7px;color:#f2f5f8}
h2,h3{color:#e4ebf2}
.page-heading p{color:#a7b6c6}
.button{background:#2b4055;border-color:transparent;color:#dce3eb;border-radius:2px;box-shadow:none;transition:background .15s,color .15s}
.button:hover{background:#3e617e;color:#fff}
.button.primary{background:linear-gradient(100deg,#237bad,#195b84);border-color:transparent;color:#fff}
.button.primary:hover{background:linear-gradient(100deg,#286e99,#195b84)}
.button.ghost{color:#c0d5e5}
.button.ghost:hover{background:#30495e;color:#fff}
.build-panel{background:#192634;border-color:transparent;border-radius:3px}
.build-header{background:linear-gradient(110deg,#294a62,#1e3449);border-color:#38556e;padding-top:25px;padding-bottom:23px}
.name-input{color:#fff;font-weight:500;font-size:23px;letter-spacing:0}
.build-title>svg{color:#98b2c8}
.name-input:hover,.name-input:focus{border-color:#67c1f5}
.build-meta{color:#bac8d5;gap:12px}
.tag{background:#25424c;color:#b8d86c;border-radius:2px;padding:5px 8px}
.tag.warn{background:#493c2a;color:#f2be70}
.list-heading{background:#111d2a;color:#b0c4d7;letter-spacing:.7px;padding-top:12px;padding-bottom:12px}
.part-row{background:#202f40;border-color:#182432;transition:background .15s}
.part-row:nth-child(even){background:#223346}
.part-row:hover{background:#2c455c}
.part-icon{background:linear-gradient(135deg,#38526a,#23384d);border-radius:2px;color:#9fc2dc;width:48px;height:48px}
.part-info h3{font-weight:500;color:#edf2f6;font-size:13px}
.part-info small{color:#82b9de}
.part-info p{color:#b1bdc9;font-size:11px}
.part-price{background:#152333;padding:6px 8px;color:#d5e9f7;font-weight:500;border-radius:1px}
.icon-button{color:#9bb6cb;border-radius:2px}
.icon-button:hover{background:#3f657f;color:#fff}
.empty-part{border-color:#456680;color:#93c9ec;background:#21364b;border-radius:2px}
.empty-part:hover{background:#345975;color:white}
.build-bottom{background:#17222f;border-color:#304255;color:#a7b6c6}
.summary{background:linear-gradient(155deg,#1e3448,#131f2b);border-radius:3px;padding-top:22px}
.summary-top h3{text-transform:uppercase;font-size:12px;letter-spacing:1px;color:#cdd9e5;font-weight:500}
.summary-top span{color:#93b8d3}
.pc-visual{background:radial-gradient(ellipse at center,#29506b88,transparent 67%);margin-top:18px;margin-bottom:14px;height:198px}
.pc-visual svg{stroke:#73b5dd;filter:drop-shadow(0 5px 14px #080f1870)}
.pc-visual .component{fill:#233f55}
.pc-visual .on{fill:#437c9d}
.visual-label{color:#8cb2ce;letter-spacing:.7px}
.summary-price small{color:#bccbd8}
.total{color:#fff;font-weight:500;font-size:35px;letter-spacing:-.5px;margin-top:9px}
.price-note{color:#a7b6c6;line-height:1.6}
.budget-box{border-color:#30495e}
.budget-input{color:#d5e4f1;background:#102031;border-radius:2px;padding:5px}
.budget-line{color:#b7c9d8}
.meter{background:#0c1723;border-radius:1px;height:5px}
.meter>span{background:#8eb84b}
.budget-left{color:#b8d86c}
.summary .button.primary{background:linear-gradient(100deg,#527219,#3e5a12);color:#e8f4d5;padding:13px 12px}
.summary .button.primary:hover{background:linear-gradient(100deg,#56771b,#456414);color:white}
.compatibility{background:#172533;border-color:transparent;border-radius:3px}
.compatibility h3{color:#dce7ef;font-weight:500}
.compatibility h3 svg{color:#a4c85b}
.compatibility p,.compatibility li{color:#b0becd}
.power{border-color:#304255;color:#a7b6c6}
.power b{color:#d5e9f7}
.notice{color:#a7b6c6}
.notice svg{color:#67c1f5}
footer{color:#a7b6c6}
dialog{background:linear-gradient(160deg,#213b51,#172330 65%);border-color:#3b5369;box-shadow:-12px 0 70px #0008}
dialog::backdrop{background:#080f19b3}
.drawer-head small{color:#a9c3d7}
.drawer-head h2{color:#fff}
.search-wrap{background:#101e2c;border-color:#3d596f;border-radius:2px}
.search-wrap input{color:#e1ecf4}
.search-wrap:focus-within{border-color:#67c1f5}
input::placeholder{color:#a7b6c6}
select{background:#263e54;border-color:#405b72;border-radius:2px;color:#e1ecf4}
.check-label{color:#b4c7d6}
.product{background:#22364a;border-color:transparent;border-radius:2px}
.product h3{color:#e4f2fb;font-weight:500}
.product p{color:#afc2d2}
.product .tag{margin-bottom:13px}
.product-price{background:#142231;padding:7px 10px;color:#d8e8f3;font-weight:500}
.product-warning,.confirm-row{color:#f2be70}
.catalog-note{color:#a7b6c6}
.saved-grid{gap:16px}
.saved-card{background:linear-gradient(125deg,#29465f,#1d2e40);border-color:transparent;border-radius:3px;padding:24px}
.saved-card h2{font-weight:500;color:#edf4fa}
.saved-card p{color:#b3c4d3}
.saved-card .card-price{color:#d7e8f4;font-weight:500}
.view-details{background:#152334;border-radius:2px}
.view-details span{color:#a7b6c6}
.view-details b{font-weight:500;color:#e1ecf4}
.empty-state{background:#192a3b;border-color:transparent;border-radius:3px}
.empty-state svg{color:#67c1f5}
.empty-state h2{color:#edf4fa}
.toast{background:#254964;border:1px solid #47728f;border-radius:2px;color:#e5f5ff;box-shadow:0 8px 28px #0006}
::-webkit-scrollbar-thumb{background:#47596c;border-radius:2px}
::-webkit-scrollbar-track{background:#141e2a}
@media(max-width:1250px){.top-navigation{gap:14px}.top-tab{font-size:11px;letter-spacing:0}.local-status{display:none}header .button{margin-left:auto}}
@media(max-width:950px){.part-icon{width:34px}.part-price{display:inline-block;width:fit-content}.top-navigation{gap:12px}.top-tab{font-size:10px}}
@media(max-width:720px){.sidebar{padding:18px 18px 0;background:#171d25}.brand{font-size:22px}.brand-icon{width:32px;height:32px}.sidebar nav{gap:4px}.nav,.nav.active{border-radius:0;padding:13px 8px}.nav.active{background:#29445e;box-shadow:inset 0 -2px #67c1f5}.top-navigation{display:none}header{height:50px;background:#1c2b3c;padding:0 18px}header .breadcrumb{display:block}header .button{font-size:10px}.breadcrumb b{color:#dce3eb}.breadcrumb{color:#a7b6c6}.breadcrumb span{color:#839bb1}.page-heading{margin-bottom:20px}.heading-actions{gap:7px}.button{font-size:12px}.build-header{padding:20px 16px}.name-input{font-size:20px}.part-icon{width:40px;height:44px}.part-row{padding:15px 13px}.part-price{padding:5px;font-size:11px}.part-info h3{font-size:12px}.part-info p{font-size:11px}.part-actions{column-gap:8px}.icon-button{width:28px;height:28px}.part-actions .icon-button{width:23px}.summary{padding:22px}.summary-top h3{font-size:13px}.pc-visual{height:165px}.total{font-size:36px}.saved-card{padding:21px}.list-heading{letter-spacing:0}.sidebar-note{display:none}}

/* Product name chosen by the user. */
.brand{gap:10px;letter-spacing:0}.brand-icon{flex-shrink:0;font-size:23px}.brand-name{font-size:16px;line-height:1.15;font-weight:700;letter-spacing:0}.brand-name>span{display:block;color:#8ed0fa;font-size:12px;letter-spacing:2px;margin-top:3px}.brand-dot{flex-shrink:0;margin-left:0}

/* Keep one navigation surface and let the right column scroll in normal flow. */
header .breadcrumb{display:block;color:#a7b6c6}.breadcrumb b{color:#dce3eb}.breadcrumb span{color:#839bb1}.sidebar-bottom{margin-top:auto}.summary{position:static}