/* PC builder (uses the theme's --n-* tokens) */
.pcb { max-width: 1440px; margin: 0 auto; padding: 24px 24px 60px; }
.pcb-loading { padding: 80px 0; text-align: center; color: var(--n-muted); }
.pcb-layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 28px; align-items: start; }

.pcb-head h1 { font-family: "Heebo", var(--n-display); font-weight: 800; font-size: clamp(34px, 5vw, 58px); margin: 14px 0 6px; line-height: 1.05; }
.pcb-head p { color: var(--n-muted); margin: 0 0 22px; max-width: 60ch; }

.pcb-steps { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 8px; margin-bottom: 16px; scroll-margin-top: 160px; }
.pcb-step { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 6px; border-radius: 12px; border: 1px solid var(--n-line); background: var(--n-surface); color: var(--n-muted); font: inherit; font-size: 14px; cursor: pointer; transition: all .2s; }
.pcb-step small { font-size: 11px; opacity: .8; }
.pcb-step-n { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--n-line-2); font-family: var(--n-display); font-weight: 700; color: var(--n-text); }
.pcb-step:hover { border-color: rgba(0, 229, 255, .5); color: var(--n-text); }
.pcb-step.is-active { border-color: var(--n-cyan); color: var(--n-text); box-shadow: var(--n-glow); background: linear-gradient(180deg, rgba(0, 229, 255, .12), var(--n-surface)); }
.pcb-step.is-active .pcb-step-n { background: var(--n-cyan); color: #04121A; border-color: var(--n-cyan); }
.pcb-step.is-done .pcb-step-n { background: rgba(43, 255, 158, .15); color: var(--n-green); border-color: rgba(43, 255, 158, .5); }

.pcb-tools { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 14px; padding: 10px; border-radius: 12px; background: var(--n-surface); border: 1px solid var(--n-line); }
.pcb-search { flex: 1 1 240px; }
.pcb-search input { width: 100%; padding: 10px 14px; }
.pcb-tools select { padding: 10px 12px; }
.pcb-toggle { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--n-text); cursor: pointer; }
.pcb-toggle input { accent-color: var(--n-cyan); width: 18px; height: 18px; }

.pcb-list { display: grid; gap: 10px; }
.pcb-item { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 12px; border-radius: 14px; border: 1px solid var(--n-line); background: linear-gradient(180deg, var(--n-surface), var(--n-bg-2)); transition: border-color .2s, box-shadow .2s; }
.pcb-item:hover { border-color: rgba(0, 229, 255, .45); }
.pcb-item.is-chosen { border-color: var(--n-green); box-shadow: 0 0 0 1px rgba(43, 255, 158, .4), 0 0 22px rgba(43, 255, 158, .15); }
.pcb-item.is-conflict { opacity: .6; }
.pcb-item img { width: 96px; height: 96px; object-fit: contain; border-radius: 10px; background: radial-gradient(circle at 50% 40%, #1a2336, #0c111b 70%); }
.pcb-item-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pcb-brand { font-family: var(--n-display); font-size: 12px; font-weight: 600; letter-spacing: .12em; color: var(--n-cyan); direction: ltr; text-align: right; }
.pcb-name { color: var(--n-text) !important; font-weight: 600; line-height: 1.4; }
.pcb-name:hover { color: var(--n-cyan) !important; }
.pcb-spec { color: var(--n-muted); font-size: 13px; }
.pcb-why { color: var(--n-amber); font-size: 13px; font-weight: 600; }
.pcb-stock { color: var(--n-green); font-size: 12px; font-weight: 600; }
.pcb-item-buy { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; text-align: left; }
.pcb-item-buy strong { font-family: var(--n-display); font-size: 22px; }
.pcb-item-buy del { color: var(--n-muted); font-size: 13px; }
.pcb-item-buy small { color: var(--n-magenta); font-size: 12px; font-weight: 600; }
.pcb-pick { margin-top: 4px; padding: 9px 18px; border-radius: 10px; border: 1px solid rgba(0, 229, 255, .5); background: rgba(0, 229, 255, .1); color: var(--n-cyan); font: 700 14px var(--n-display); cursor: pointer; transition: all .2s; }
.pcb-pick:hover, .pcb-item.is-chosen .pcb-pick { background: var(--n-cyan); color: #04121A; box-shadow: 0 0 18px rgba(0, 229, 255, .5); }
.pcb-item.is-chosen .pcb-pick { background: var(--n-green); border-color: var(--n-green); box-shadow: 0 0 18px rgba(43, 255, 158, .45); }
.pcb-empty, .pcb-hidden-note { padding: 18px; border-radius: 12px; border: 1px dashed var(--n-line-2); color: var(--n-muted); text-align: center; }
.pcb-link { background: none; border: 0; padding: 0; color: var(--n-cyan); font: inherit; font-weight: 600; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.pcb-link:disabled { opacity: .4; cursor: default; }

.pcb-summary { position: sticky; top: 150px; }
.pcb-sum-inner { padding: 18px; border-radius: 18px; border: 1px solid rgba(0, 229, 255, .35); background: radial-gradient(400px 200px at 50% 0%, rgba(0, 229, 255, .10), transparent 70%), var(--n-surface); box-shadow: 0 20px 60px rgba(0, 0, 0, .45); }
.pcb-sum-inner h2 { font-family: var(--n-display); font-size: 22px; margin: 0 0 12px; }
.pcb-sum-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 2px; }
.pcb-sum-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--n-line); }
.pcb-sum-step { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; min-width: 0; background: none; border: 0; padding: 0; color: inherit; font: inherit; text-align: right; cursor: pointer; }
.pcb-sum-t { font-size: 12px; color: var(--n-muted); }
.pcb-sum-n { font-size: 14px; color: var(--n-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.pcb-sum-list li.has .pcb-sum-n { color: var(--n-text); font-weight: 600; }
.pcb-sum-p { font-family: var(--n-display); font-size: 15px; font-variant-numeric: tabular-nums; }
.pcb-remove { background: none; border: 0; color: var(--n-muted); cursor: pointer; font-size: 14px; padding: 4px; }
.pcb-remove:hover { color: var(--n-magenta); }
.pcb-checks { list-style: none; padding: 10px 12px; margin: 12px 0 0; border-radius: 12px; background: var(--n-bg-2); display: grid; gap: 4px; font-size: 13px; }
.pcb-checks .ok { color: var(--n-green); }
.pcb-checks .bad { color: var(--n-magenta); font-weight: 700; }
.pcb-checks .info { color: var(--n-amber); }
.pcb-total { display: flex; justify-content: space-between; align-items: baseline; margin-top: 14px; }
.pcb-total span { color: var(--n-muted); }
.pcb-total strong { font-family: var(--n-display); font-size: 34px; text-shadow: 0 0 22px rgba(0, 229, 255, .35); }
.pcb-save { color: var(--n-green); font-size: 13px; font-weight: 600; text-align: left; }
.pcb-missing { color: var(--n-muted); font-size: 13px; margin: 6px 0 0; }
.pcb-cart { width: 100%; margin-top: 12px; padding: 15px; border: 0; border-radius: 12px; background: linear-gradient(90deg, var(--n-cyan), #4DD8FF); color: #04121A; font: 700 17px var(--n-display); cursor: pointer; box-shadow: 0 0 24px rgba(0, 229, 255, .45); transition: all .2s; }
.pcb-cart:hover:not(:disabled) { box-shadow: 0 0 36px rgba(0, 229, 255, .75); transform: translateY(-1px); }
.pcb-cart:disabled { opacity: .45; cursor: default; box-shadow: none; }
.pcb-sum-actions { display: flex; justify-content: space-between; margin-top: 10px; font-size: 14px; }
.pcb-msg { min-height: 1.4em; margin: 8px 0 0; font-size: 13px; color: var(--n-cyan); }
.pcb-bar { display: none; }

@media (max-width: 1200px) {
	.pcb-steps { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
	.pcb-layout { grid-template-columns: 1fr; }
	.pcb-summary { position: static; }
	.pcb-bar { display: flex; align-items: center; gap: 12px; position: fixed; inset-inline: 0; bottom: 0; z-index: 60; padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px)); background: rgba(7, 9, 15, .94); backdrop-filter: blur(12px); border-top: 1px solid var(--n-line-2); }
	.pcb-bar span { color: var(--n-muted); font-size: 14px; }
	.pcb-bar strong { font-family: var(--n-display); font-size: 20px; margin-inline-end: auto; }
	.pcb-bar .pcb-cart { width: auto; margin: 0; padding: 10px 22px; font-size: 15px; }
	.pcb { padding-bottom: 90px; }
}
@media (max-width: 600px) {
	.pcb { padding: 16px 16px 90px; }
	.pcb-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.pcb-item { grid-template-columns: 72px minmax(0, 1fr); }
	.pcb-item img { width: 72px; height: 72px; }
	.pcb-item-buy { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: space-between; flex-wrap: wrap; }
}

/* 3D view */
.pcb-3d { position: relative; margin: 0 0 18px; border-radius: 18px; overflow: hidden; border: 1px solid rgba(0, 229, 255, .35); box-shadow: 0 0 40px rgba(0, 229, 255, .12), inset 0 0 60px rgba(124, 77, 255, .08); background: #06080d; }
.pcb-3d-canvas { width: 100%; height: clamp(320px, 46vw, 520px); }
.pcb-3d-canvas canvas { display: block; width: 100% !important; height: 100% !important; cursor: grab; touch-action: none; }
.pcb-3d-canvas canvas:active { cursor: grabbing; }
.pcb-3d-top { position: absolute; top: 14px; inset-inline: 16px; display: flex; justify-content: space-between; align-items: center; pointer-events: none; }
.pcb-3d-title { font-family: var(--n-display); font-weight: 700; font-size: 18px; text-shadow: 0 0 14px rgba(0, 229, 255, .6); }
.pcb-3d-count { font-size: 13px; color: var(--n-cyan); padding: 4px 10px; border-radius: 999px; border: 1px solid rgba(0, 229, 255, .4); background: rgba(6, 8, 13, .6); }
.pcb-3d-ui { position: absolute; bottom: 38px; inset-inline-start: 14px; display: flex; gap: 8px; flex-wrap: wrap; }
.pcb-3d-ui button { padding: 7px 12px; border-radius: 9px; border: 1px solid var(--n-line-2); background: rgba(6, 8, 13, .72); color: var(--n-text); font: 600 13px "Heebo", sans-serif; cursor: pointer; backdrop-filter: blur(6px); }
.pcb-3d-ui button:hover, .pcb-3d-ui button.is-on { border-color: var(--n-cyan); color: var(--n-cyan); box-shadow: 0 0 14px rgba(0, 229, 255, .35); }
.pcb-3d-hint { position: absolute; bottom: 10px; inset-inline: 0; margin: 0; text-align: center; font-size: 12px; color: var(--n-muted); pointer-events: none; }
.pcb-3d-fallback { display: grid; place-items: center; height: 100%; margin: 0; color: var(--n-muted); }