/* PC Builder — visual builder UI (extends the site theme, purple accent). */

.builder-hero {
    padding: 26px 0 8px;
    text-align: center;
}

.builder-hero h1 {
    font-size: clamp(22px, 3vw, 34px);
    font-weight: 800;
    background: var(--grad);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin: 0 0 8px;
}

.builder-hero p {
    color: var(--text-muted);
    max-width: 640px;
    margin: 0 auto;
}

.builder-wrap {
    display: grid;
    grid-template-columns: minmax(240px, 320px) 1fr;
    gap: 22px;
    align-items: start;
    padding: 18px 0 40px;
}

.builder-sidebar {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.builder-slot {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    backdrop-filter: var(--glass);
    padding: 14px 16px;
    transition: border-color .2s, box-shadow .2s;
}

.builder-slot.filled {
    border-color: rgba(168, 85, 247, .35);
}

.builder-slot.slot-required .slot-head .slot-badge {
    color: var(--danger);
}

.builder-slot .slot-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
}

.builder-slot .slot-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    font-size: 14px;
}

.builder-slot .slot-title i {
    color: var(--accent);
    width: 18px;
    text-align: center;
}

.builder-slot .slot-badge {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
    background: rgba(168, 85, 247, .08);
    border-radius: 999px;
    padding: 2px 8px;
    white-space: nowrap;
}

.slot-product {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    border-top: 1px dashed var(--border);
    padding-top: 8px;
    margin-top: 8px;
}

.slot-product:first-of-type {
    border-top: none;
    padding-top: 0;
    margin-top: 0;
}

.slot-product .slot-prod-info {
    min-width: 0;
}

.slot-product .slot-prod-title {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.5;
    color: var(--text);
    display: block;
}

.slot-product .slot-prod-price {
    font-size: 12px;
    color: var(--accent);
    font-weight: 700;
}

.slot-add {
    flex-shrink: 0;
}

.slot-remove-btn {
    background: none;
    border: none;
    color: var(--danger);
    cursor: pointer;
    font-size: 13px;
    padding: 4px;
    border-radius: 8px;
    transition: background .2s;
}

.slot-remove-btn:hover {
    background: rgba(239, 68, 68, .12);
}

.builder-add-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px dashed rgba(168, 85, 247, .5);
    color: var(--accent);
    background: rgba(168, 85, 247, .06);
    border-radius: 10px;
    padding: 7px 12px;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    transition: background .2s, border-color .2s;
    text-decoration: none;
    white-space: nowrap;
}

.builder-add-btn:hover {
    background: rgba(168, 85, 247, .14);
    border-color: var(--accent);
}

.builder-add-btn.full {
    opacity: .45;
    pointer-events: none;
}

.builder-main {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.builder-stage {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
    backdrop-filter: var(--glass);
    padding: 22px;
}

.builder-stage-empty {
    text-align: center;
    padding: 46px 20px;
    color: var(--text-muted);
}

.builder-stage-empty i {
    font-size: 42px;
    color: var(--accent);
    opacity: .5;
    margin-bottom: 12px;
    display: block;
}

.builder-spec-row {
    display: flex;
    align-items: baseline;
    gap: 10px;
    border-bottom: 1px dashed rgba(168, 85, 247, .14);
    padding: 7px 0;
    font-size: 13.5px;
}

.builder-spec-row:last-child {
    border-bottom: none;
}

.builder-spec-row .bs-label {
    color: var(--text-muted);
    min-width: 120px;
    font-weight: 600;
}

.builder-spec-row .bs-value {
    color: var(--text);
}

/* Summary */
.builder-summary {
    position: sticky;
    top: 88px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
    backdrop-filter: var(--glass);
    padding: 20px;
}

.builder-summary h3 {
    margin: 0 0 12px;
    font-size: 16px;
}

.summary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px dashed rgba(168, 85, 247, .14);
    font-size: 13.5px;
}

.summary-row .lbl {
    color: var(--text-muted);
}

.summary-row .val {
    font-weight: 700;
}

.summary-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0 6px;
    font-size: 16px;
}

.summary-total .val {
    color: var(--accent);
    font-size: 19px;
    font-weight: 800;
}

.power-bar {
    height: 8px;
    border-radius: 999px;
    background: rgba(168, 85, 247, .12);
    overflow: hidden;
    margin: 6px 0 4px;
}

.power-bar > span {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: var(--grad);
    transition: width .35s ease;
}

.power-bar.bar-ok > span { background: var(--success); }
.power-bar.bar-warn > span { background: var(--warning); }
.power-bar.bar-danger > span { background: var(--danger); }

.builder-issues {
    margin-top: 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.builder-issue {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    font-size: 12.5px;
    line-height: 1.7;
    padding: 8px 10px;
    border-radius: 10px;
}

.builder-issue.issue-error {
    background: rgba(239, 68, 68, .1);
    color: var(--danger);
    border: 1px solid rgba(239, 68, 68, .25);
}

.builder-issue.issue-warning {
    background: rgba(245, 158, 11, .1);
    color: var(--warning);
    border: 1px solid rgba(245, 158, 11, .3);
}

.builder-issue i {
    margin-top: 3px;
}

.builder-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 16px;
}

.builder-fps {
    margin-top: 14px;
    border-top: 1px dashed var(--border);
    padding-top: 12px;
}

.fps-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-top: 8px;
}

.fps-cell {
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 8px;
    text-align: center;
    background: rgba(168, 85, 247, .05);
}

.fps-cell .res {
    font-size: 11.5px;
    color: var(--text-muted);
    display: block;
}

.fps-cell .rate {
    font-size: 14px;
    font-weight: 800;
    color: var(--accent);
    direction: ltr;
    display: block;
    margin-top: 2px;
}

/* Upgrades */
.builder-upgrades {
    margin-top: 14px;
    border-top: 1px dashed var(--border);
    padding-top: 12px;
}

.upgrade-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px dashed rgba(168, 85, 247, .14);
    font-size: 13px;
}

.upgrade-item:last-child { border-bottom: none; }

.upgrade-item .u-name { font-weight: 600; }
.upgrade-item .u-delta { color: var(--danger); font-weight: 700; white-space: nowrap; }

/* Picker */
.picker-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    margin: 18px 0;
}

.picker-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: flex-end;
    margin-bottom: 18px;
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
}

.picker-filter {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 12px;
    color: var(--text-muted);
}

.picker-filter select,
.picker-filter input {
    min-width: 150px;
}

.builder-product-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    backdrop-filter: var(--glass);
    padding: 14px;
    transition: border-color .2s, box-shadow .2s, transform .2s;
}

.builder-product-card:hover {
    border-color: rgba(168, 85, 247, .4);
    box-shadow: var(--shadow-float);
    transform: translateY(-2px);
}

.builder-product-card .bpc-img {
    height: 110px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--surface-2);
    border-radius: 10px;
    overflow: hidden;
}

.builder-product-card .bpc-img img {
    max-height: 100%;
    max-width: 100%;
    object-fit: contain;
}

.builder-product-card .bpc-title {
    font-size: 13px;
    font-weight: 700;
    line-height: 1.6;
    min-height: 42px;
}

.builder-product-card .bpc-specs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.builder-product-card .bpc-price {
    font-size: 15px;
    font-weight: 800;
    color: var(--accent);
    margin-top: auto;
}

.compat-badge {
    font-size: 11px;
    font-weight: 700;
    border-radius: 999px;
    padding: 3px 10px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.compat-badge.ok { background: rgba(34, 197, 94, .12); color: var(--success); }
.compat-badge.bad { background: rgba(239, 68, 68, .12); color: var(--danger); }
.compat-badge.out { background: rgba(148, 163, 184, .14); color: var(--text-muted); }

.bpc-add {
    width: 100%;
}

.bpc-add:disabled {
    opacity: .45;
    pointer-events: none;
}

/* Shared / print */
.shared-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin: 20px 0;
}

.shared-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 18px;
}

.shared-table th,
.shared-table td {
    text-align: right;
    padding: 12px 14px;
    border-bottom: 1px solid var(--border);
    font-size: 13.5px;
    vertical-align: middle;
}

.shared-table th {
    color: var(--accent);
    font-weight: 700;
    background: rgba(168, 85, 247, .06);
    white-space: nowrap;
}

.my-build-card {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

@media (max-width: 980px) {
    .builder-wrap {
        grid-template-columns: 1fr;
    }
    .builder-summary {
        position: static;
    }
}

@media print {
    .header, .footer, .builder-hero, .actions, .no-print {
        display: none !important;
    }
    .builder-wrap { display: block; }
    .builder-stage, .builder-summary, .builder-slot {
        border-color: #999;
        box-shadow: none;
        background: #fff;
        color: #111;
    }
}

/* Visual preview */
.pc-preview-block {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
    backdrop-filter: var(--glass);
    padding: 16px;
}

.preview-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
    font-weight: 700;
    font-size: 14px;
}

.preview-head span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.preview-head span i {
    color: var(--accent);
}

.pc-preview {
    position: relative;
    width: 100%;
    aspect-ratio: 3 / 2;
    border-radius: var(--radius);
    border: 1px solid rgba(168, 85, 247, .3);
    background:
        linear-gradient(rgba(168, 85, 247, .04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(168, 85, 247, .04) 1px, transparent 1px),
        var(--surface-2, #0c0e16);
    background-size: 20px 20px;
    overflow: hidden;
}

.pc-preview.has-case {
    background: var(--surface-2, #0c0e16) center/contain no-repeat;
    border-color: rgba(168, 85, 247, .5);
}

.pc-preview.has-case .pc-part {
    background: rgba(8, 10, 18, .82);
    border-color: rgba(168, 85, 247, .5);
    box-shadow: 0 0 8px rgba(168, 85, 247, .15);
}

.pc-preview.has-case .pc-part:hover {
    box-shadow: 0 0 14px rgba(168, 85, 247, .3);
}

.pc-preview.has-case .pc-part.has-image,
.pc-preview.has-case .pc-part.has-image:hover {
    background: transparent;
    border: 0;
    box-shadow: none;
    overflow: visible;
    padding: 0;
    mix-blend-mode: screen;
}
.pc-preview.has-case .pc-part.has-image .pc-part-img {
    object-fit: contain;
}
.pc-preview.has-case .pc-part.has-image .pc-part-label { display: none; }

.pc-case-frame {
    position: absolute;
    inset: 4% 6%;
    border: 2px dashed rgba(168, 85, 247, .5);
    border-radius: 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    padding-top: 3%;
    color: rgba(216, 198, 247, .55);
    font-size: 12px;
    font-weight: 700;
    z-index: 0;
}

.pc-case-frame i {
    font-size: 30px;
}

.pc-part {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    border-radius: 6px;
    border: 1px solid rgba(168, 85, 247, .45);
    background: rgba(168, 85, 247, .16);
    color: #d8c6f7;
    font-size: 13px;
    text-align: center;
    transition: background .2s, box-shadow .2s;
    box-sizing: border-box;
    padding: 2px;
    overflow: hidden;
}

.pc-part-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pc-part .pc-part-label {
    position: relative;
    z-index: 2;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.3;
    background: rgba(12, 14, 22, .78);
    border-radius: 6px;
    padding: 1px 5px;
    margin-top: auto;
}

.pc-part:hover {
    background: rgba(168, 85, 247, .3);
    box-shadow: 0 0 0 2px rgba(168, 85, 247, .35);
}

.pc-part .pc-part-count {
    position: absolute;
    top: -7px;
    inset-inline-end: -7px;
    font-size: 9px;
    font-weight: 800;
    background: var(--accent);
    color: #fff;
    border-radius: 999px;
    padding: 1px 6px;
}

.pc-zone-case { border-color: rgba(245, 158, 11, .5); background: rgba(245, 158, 11, .08); color: #fde3b0; }
.pc-zone-motherboard { border-color: rgba(34, 197, 94, .5); background: rgba(34, 197, 94, .08); color: #c3f2d4; border-radius: 4px; }
.pc-zone-motherboard .pc-part-img { object-fit: contain; transform: rotate(0deg); }
.pc-zone-cpu { border-color: rgba(59, 130, 246, .55); background: rgba(59, 130, 246, .1); color: #cfe1ff; border-radius: 50%; }
.pc-zone-gpu { border-color: rgba(239, 68, 68, .55); background: rgba(239, 68, 68, .08); color: #ffd0d0; border-radius: 3px; }
.pc-zone-gpu .pc-part-img { object-fit: contain; }
.pc-zone-ram { border-color: rgba(217, 70, 239, .55); background: rgba(217, 70, 239, .08); color: #f3d0ff; border-radius: 3px; }
.pc-zone-storage { border-color: rgba(20, 184, 166, .55); background: rgba(20, 184, 166, .08); color: #c9f6f0; border-radius: 3px; }
.pc-zone-psu { border-color: rgba(148, 163, 184, .5); background: rgba(148, 163, 184, .08); color: #e2e8f0; border-radius: 4px; }
.pc-zone-psu .pc-part-img { object-fit: contain; }
.pc-zone-cooler { border-color: rgba(14, 165, 233, .5); background: rgba(14, 165, 233, .08); color: #d2efff; border-radius: 50%; }
.pc-zone-fan { border-color: rgba(56, 189, 248, .5); background: rgba(56, 189, 248, .08); color: #d2f3ff; border-radius: 50%; }

/* Scores */
.builder-scores {
    margin-top: 14px;
    border-top: 1px dashed var(--border);
    padding-top: 12px;
}

.builder-scores > strong {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.builder-scores > strong i {
    color: var(--accent);
}

.score-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 8px;
    margin-top: 8px;
}

.score-card {
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 10px 12px;
    text-align: center;
}

.score-card.score-excellent { border-color: rgba(34, 197, 94, .5); background: rgba(34, 197, 94, .08); }
.score-card.score-good { border-color: rgba(168, 85, 247, .5); background: rgba(168, 85, 247, .08); }
.score-card.score-weak { border-color: rgba(245, 158, 11, .5); background: rgba(245, 158, 11, .08); }

.score-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
}

.score-name {
    font-size: 11.5px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.score-tag {
    font-size: 9.5px;
    font-weight: 800;
    border-radius: 999px;
    padding: 1px 7px;
    background: rgba(148, 163, 184, .18);
    color: var(--text-muted);
}

.score-num {
    display: block;
    margin-top: 4px;
    font-size: 26px;
    font-weight: 800;
    direction: ltr;
}

.score-excellent .score-num { color: var(--success); }
.score-good .score-num { color: var(--accent); }
.score-weak .score-num { color: var(--warning); }

/* Recommendation groups */
.upgrade-group {
    margin-top: 8px;
    border: 1px solid rgba(168, 85, 247, .18);
    border-radius: 10px;
    padding: 8px 10px;
    background: rgba(168, 85, 247, .04);
}

.upgrade-group .u-name {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 700;
    font-size: 13px;
}

.upgrade-group .u-current {
    font-size: 11.5px;
    color: var(--text-muted);
    margin: 4px 0;
}

.upgrade-item .u-name {
    font-size: 12.5px;
}

.u-delta.delta-up { color: var(--danger); }
.u-delta.delta-down { color: var(--success); }

.efficiency-pill {
    font-size: 12.5px;
}

/* Picker layout */
.picker-layout {
    display: grid;
    grid-template-columns: minmax(220px, 280px) 1fr;
    gap: 20px;
    align-items: start;
    padding: 18px 0 40px;
}

.picker-filters {
    position: sticky;
    top: 88px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
    backdrop-filter: var(--glass);
    padding: 16px;
}

.picker-filters .filter-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.picker-filters .filter-reset {
    font-size: 12px;
    color: var(--accent);
    font-weight: 700;
}

.filter-block {
    margin-bottom: 14px;
}

.filter-title {
    display: block;
    font-size: 12.5px;
    font-weight: 700;
    margin-bottom: 6px;
    color: var(--text-muted);
}

.filter-range {
    display: flex;
    gap: 6px;
}

.check-row {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
}

.picker-results {
    min-width: 0;
}

.picker-current-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    padding: 10px 14px;
    font-size: 13.5px;
    margin-bottom: 12px;
}

.builder-live-box {
    border-radius: 10px;
    padding: 10px 12px;
    margin-bottom: 12px;
    font-size: 12.5px;
}

.builder-live-box.ok {
    background: rgba(34, 197, 94, .1);
    color: var(--success);
    border: 1px solid rgba(34, 197, 94, .3);
}

.builder-live-box.bad {
    background: rgba(239, 68, 68, .1);
    color: var(--danger);
    border: 1px solid rgba(239, 68, 68, .3);
}

.picker-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 14px;
}

.picker-card {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    backdrop-filter: var(--glass);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: border-color .2s, box-shadow .2s, transform .2s;
}

.picker-card:hover {
    border-color: rgba(168, 85, 247, .4);
    box-shadow: var(--shadow-float);
    transform: translateY(-2px);
}

.picker-card.card-incompatible {
    border-color: rgba(239, 68, 68, .4);
}

.picker-card .pc-img {
    height: 150px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--surface-2);
    overflow: hidden;
}

.picker-card .pc-img img {
    max-height: 100%;
    max-width: 100%;
    object-fit: contain;
}

.picker-card .pc-img i {
    font-size: 44px;
    color: var(--accent);
    opacity: .5;
}

.pc-type {
    position: absolute;
    top: 8px;
    inset-inline-start: 8px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 800;
    color: var(--accent);
    background: rgba(12, 14, 22, .78);
    border: 1px solid rgba(168, 85, 247, .45);
    border-radius: 999px;
    padding: 3px 10px;
    backdrop-filter: blur(4px);
    max-width: calc(100% - 62px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pc-type i {
    font-size: 10px;
}

body:not(.dark) .pc-type {
    background: rgba(255, 255, 255, .88);
    color: #6d28d9;
}

.pc-brand {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--text-muted);
    display: block;
}

.picker-card .pc-desc {
    margin: 0;
    font-size: 12px;
    line-height: 1.7;
    color: var(--text-muted);
    background: var(--surface, rgba(255,255,255,.03));
    border-inline-start: 3px solid var(--primary, #3b82f6);
    padding: 6px 8px;
    border-radius: 6px;
}


.picker-card .pc-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    flex: 1;
}

.picker-card .pc-title {
    font-size: 13px;
    font-weight: 700;
    line-height: 1.6;
    min-height: 42px;
    color: var(--text);
}

.picker-card .pc-specs {
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 12px;
    color: var(--text-muted);
}

.picker-card .pc-specs li {
    padding: 2px 0;
}

.picker-card .pc-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: auto;
}

.pc-price {
    font-size: 14px;
    font-weight: 800;
    color: var(--accent);
}

.pc-price small {
    font-size: 10.5px;
    color: var(--text-muted);
}

.pc-badge {
    font-size: 10.5px;
    font-weight: 800;
    border-radius: 999px;
    padding: 2px 8px;
    white-space: nowrap;
}

.badge-ok { background: rgba(34, 197, 94, .14); color: var(--success); }
.badge-bad { background: rgba(239, 68, 68, .14); color: var(--danger); }
.badge-oos { background: rgba(148, 163, 184, .16); color: var(--text-muted); }

.pc-issues {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 11px;
    color: var(--danger);
    background: rgba(239, 68, 68, .07);
    border-radius: 8px;
    padding: 6px 8px;
}

.btn-disabled {
    opacity: .5;
    cursor: not-allowed;
}

@media (max-width: 980px) {
    .picker-layout {
        grid-template-columns: 1fr;
    }
    .picker-filters {
        position: static;
    }
}

/* ---- Components admin (list / overview / pick / configure) ---- */

.status-warn {
    background: rgba(245, 158, 11, .15);
    color: var(--warning, #d97706);
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.admin-bulk-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 10px 0;
    font-size: 13px;
    color: var(--text-muted);
}

.admin-bulk-select {
    max-width: 260px;
}

.admin-table th input[type="checkbox"],
.admin-table td input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--primary, #10b981);
    cursor: pointer;
}

.comp-search-card {
    display: flex;
    gap: 14px;
    align-items: center;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 12px;
    margin-bottom: 10px;
}

.comp-search-thumb {
    width: 64px;
    height: 64px;
    border-radius: 10px;
    object-fit: cover;
    flex-shrink: 0;
    background: var(--bg, #f1f5f9);
}

.comp-search-info {
    flex: 1;
    min-width: 0;
}

.comp-search-info strong {
    display: block;
    margin-bottom: 2px;
}

.comp-search-meta {
    font-size: 12px;
    color: var(--text-muted);
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.comp-search-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-shrink: 0;
}

.pick-filter-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 10px;
}

/* ---- One-page builder: slot grid + sticky MY BUILD ---- */

.builder-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 360px);
    gap: 22px;
    align-items: start;
    padding: 18px 0 60px;
}

.builder-main-col {
    display: flex;
    flex-direction: column;
    gap: 22px;
    min-width: 0;
}

.builder-slots {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 14px;
}

.builder-slot-card {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    backdrop-filter: var(--glass);
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: border-color .2s, box-shadow .2s, transform .2s;
}

.builder-slot-card:hover {
    border-color: rgba(168, 85, 247, .35);
    box-shadow: var(--shadow-float);
    transform: translateY(-2px);
}

.builder-slot-card.filled {
    border-color: rgba(168, 85, 247, .45);
}

.builder-slot-card.slot-required {
    border-style: solid;
}

.bsc-head {
    display: flex;
    align-items: center;
    gap: 8px;
}

.bsc-head > i {
    color: var(--accent);
    font-size: 15px;
    width: 20px;
    text-align: center;
}

.bsc-title {
    font-weight: 700;
    font-size: 14px;
    flex: 1;
}

.bsc-badge {
    font-size: 10.5px;
    font-weight: 800;
    color: var(--danger);
    background: rgba(239, 68, 68, .1);
    border-radius: 999px;
    padding: 2px 8px;
    white-space: nowrap;
}

.bsc-step {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--grad);
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    flex-shrink: 0;
}

.bsc-position {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
    border-top: 1px dashed rgba(168, 85, 247, .15);
}

.bsc-position-label {
    font-size: 12px;
    color: var(--text-muted);
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.bsc-position-label i {
    font-size: 11px;
    color: var(--accent);
}

.bsc-position-select {
    flex: 1;
    font-size: 12px;
    padding: 4px 8px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
}

.bsc-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.bsc-item {
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px dashed rgba(168, 85, 247, .2);
    border-radius: 10px;
    padding: 8px;
    background: rgba(168, 85, 247, .05);
}

.bsc-thumb {
    width: 46px;
    height: 46px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--surface-2);
    border-radius: 8px;
    overflow: hidden;
    font-size: 16px;
    color: var(--accent);
}

.bsc-thumb img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.bsc-info {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.bsc-name {
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.5;
    color: var(--text);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.bsc-price {
    font-size: 12px;
    font-weight: 800;
    color: var(--accent);
}

.bsc-qty {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.bsc-qty-btn {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--surface-2);
    color: var(--text);
    font-size: 11px;
    cursor: pointer;
    transition: background .15s, border-color .15s;
}

.bsc-qty-btn:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

.bsc-qty-val {
    font-size: 13px;
    font-weight: 700;
    min-width: 18px;
    text-align: center;
    color: var(--text);
}

.bsc-capacity-info {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 12px;
    margin-top: 6px;
    padding: 6px 0;
    border-top: 1px solid rgba(168, 85, 247, .1);
}

.bsc-cap-item {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 4px;
}

.bsc-cap-item i {
    color: var(--accent);
    font-size: 10px;
}

.bsc-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 8px;
    border: 1px dashed var(--border);
    border-radius: 10px;
    color: var(--text-muted);
    font-size: 12.5px;
}

.bsc-empty i {
    color: var(--accent);
    opacity: .6;
}

.bsc-actions {
    display: flex;
    gap: 8px;
    margin-top: auto;
}

.bsc-actions .btn {
    flex: 1;
    white-space: nowrap;
}

/* MY BUILD sticky panel */
.mybuild-panel {
    position: sticky;
    top: 88px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
    backdrop-filter: var(--glass);
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: calc(100vh - 108px);
    overflow-y: auto;
}

.mybuild-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.mybuild-head h3 {
    margin: 0;
    font-size: 17px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.mybuild-head h3 i {
    color: var(--accent);
}

.mybuild-status {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: rgba(168, 85, 247, .05);
    font-size: 12.5px;
}

.status-pill {
    font-size: 11.5px;
    font-weight: 800;
    border-radius: 999px;
    padding: 3px 10px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
}

.status-good { background: rgba(34, 197, 94, .14); color: var(--success); }
.status-bad { background: rgba(239, 68, 68, .14); color: var(--danger); }
.status-warn-pill { background: rgba(245, 158, 11, .14); color: var(--warning); }

.status-count {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-muted);
    white-space: nowrap;
}

.mybuild-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.mybuild-row {
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 9px 10px;
}

.mybuild-row-icon {
    color: var(--accent);
    font-size: 15px;
    width: 22px;
    text-align: center;
    flex-shrink: 0;
}

.mybuild-info {
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.mybuild-type {
    font-size: 10.5px;
    color: var(--text-muted);
    font-weight: 700;
}

.mybuild-name {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--text);
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.mybuild-price {
    font-size: 11.5px;
    color: var(--accent);
    font-weight: 800;
}

.mybuild-ops {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}

.mybuild-op {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border);
    background: none;
    color: var(--accent);
    border-radius: 8px;
    cursor: pointer;
    font-size: 11px;
    transition: background .2s;
}

.mybuild-op:hover {
    background: rgba(168, 85, 247, .12);
}

.mybuild-op.danger {
    color: var(--danger);
}

.mybuild-op.danger:hover {
    background: rgba(239, 68, 68, .12);
}

.mybuild-empty {
    text-align: center;
    padding: 22px 12px;
    color: var(--text-muted);
    font-size: 13px;
}

.mybuild-empty i {
    font-size: 30px;
    color: var(--accent);
    opacity: .45;
    display: block;
    margin-bottom: 8px;
}

.mybuild-summary {
    border-top: 1px dashed var(--border);
    padding-top: 6px;
}

.mybuild-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0 6px;
    font-size: 16px;
}

.mybuild-total .val {
    color: var(--accent);
    font-size: 19px;
    font-weight: 800;
}

/* ---- Drawer picker modal ---- */

.builder-drawer {
    position: fixed;
    inset: 0;
    z-index: 1200;
}

.builder-drawer-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .6);
    backdrop-filter: blur(3px);
}

.builder-drawer-panel {
    position: absolute;
    top: 0;
    inset-inline-end: 0;
    height: 100%;
    width: min(760px, 100%);
    background: var(--surface);
    border-inline-start: 1px solid var(--border);
    box-shadow: -18px 0 40px rgba(0, 0, 0, .4);
    display: flex;
    flex-direction: column;
    animation: drawer-in .28s ease;
}

@keyframes drawer-in {
    from { transform: translateX(30px); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

.builder-drawer-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 20px 12px;
    border-bottom: 1px solid var(--border);
}

.builder-drawer-head h3 {
    margin: 0 0 4px;
    font-size: 18px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.builder-drawer-head h3 i {
    color: var(--accent);
}

.builder-drawer-head p {
    margin: 0;
    font-size: 12.5px;
    color: var(--text-muted);
}

.builder-drawer-filters {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px;
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
}

.drawer-search {
    position: relative;
    flex: 1;
    min-width: 180px;
    display: flex;
    align-items: center;
    background: rgba(127, 127, 127, .06);
    border: 1px solid var(--border);
    border-radius: 12px;
    transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

.drawer-search:focus-within {
    border-color: var(--accent);
    background: var(--surface);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, .14);
}

.drawer-search i {
    position: absolute;
    inset-inline-start: 13px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    font-size: 13px;
    pointer-events: none;
}

.drawer-search input {
    width: 100%;
    padding: 11px 12px;
    padding-inline-start: 36px;
    height: 44px;
    border: 0;
    background: transparent;
    color: var(--text);
    font-size: 14px;
}

.drawer-search input::placeholder {
    color: var(--text-muted);
    opacity: .85;
}

.drawer-search input:focus {
    outline: none;
    box-shadow: none;
}

#pickerBrand {
    width: 180px;
    flex-shrink: 0;
}

.filter-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--accent);
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    margin-inline-start: 3px;
}

/* Advanced filter popup (inside the drawer) */
.builder-filter-popup {
    border-bottom: 1px solid var(--border);
    background: var(--surface);
    padding: 14px 20px 16px;
    animation: drawer-in .2s ease;
}

.filter-popup-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}

.filter-popup-head strong {
    font-size: 14px;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 7px;
}

.filter-popup-head strong i {
    color: var(--accent);
}

.filter-popup-head .filter-reset {
    font-size: 12.5px;
    color: var(--accent);
    font-weight: 700;
    background: none;
    border: 0;
    cursor: pointer;
    padding: 2px;
}

.filter-popup-head .filter-reset:hover {
    text-decoration: underline;
}

.filter-popup-body {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 0 18px;
    max-height: 46vh;
    overflow-y: auto;
    padding-inline-end: 6px;
}

.filter-popup-body .filter-block {
    margin-bottom: 13px;
}

.filter-popup-body .form-control {
    font-size: 13px;
    height: 40px;
    width: 100%;
}

.filter-popup-body .filter-select-wrap {
    position: relative;
}

.filter-popup-body .filter-range {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.filter-popup-body .check-row {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    padding: 4px 0;
    cursor: pointer;
}

.filter-popup-body .check-row input {
    width: 16px;
    height: 16px;
    accent-color: var(--accent);
}

.filter-popup-foot {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}

.picker-empty-filters {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 24px 10px;
    color: var(--text-muted);
    font-size: 13px;
    text-align: center;
    grid-column: 1 / -1;
}

.picker-empty-filters i {
    font-size: 24px;
    opacity: .6;
}

.builder-drawer-results {
    flex: 1;
    overflow-y: auto;
    padding: 16px 20px 28px;
}

.picker-loading,
.picker-error {
    text-align: center;
    padding: 60px 20px;
    color: var(--text-muted);
    font-size: 22px;
}

.picker-error {
    color: var(--danger);
    font-size: 14px;
}

.drawer-count {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--text-muted);
    margin-bottom: 12px;
}

.pc-selected-mark {
    position: absolute;
    top: 10px;
    inset-inline-end: 10px;
    z-index: 2;
    width: 24px;
    height: 24px;
    border-radius: 999px;
    background: var(--success);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    box-shadow: 0 2px 8px rgba(34, 197, 94, .4);
}

.picker-card.card-oos {
    opacity: .6;
}

.picker-card {
    position: relative;
}

body.drawer-open {
    overflow: hidden;
}

@media (max-width: 1100px) {
    .builder-grid {
        grid-template-columns: 1fr;
    }
    .mybuild-panel {
        position: static;
        max-height: none;
    }
}

@media (max-width: 640px) {
    .builder-drawer-panel {
        width: 100%;
    }
    .builder-slots {
        grid-template-columns: 1fr;
    }
}

/* ---- Recommended (ready-made) builds ---- */

.builder-recommended {
    margin-top: 34px;
}

.builder-recommended-head h2 {
    font-size: 1.35rem;
    margin: 0 0 6px;
    color: var(--text);
}

.builder-recommended-head h2 i {
    color: var(--accent);
    margin-inline-end: 6px;
}

.builder-recommended-head p {
    color: var(--text-muted);
    font-size: 13px;
    margin: 0 0 16px;
}

.recommended-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 16px;
}

.recommended-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.recommended-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.recommended-card-top h3 {
    font-size: 1.05rem;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.recommended-card-top h3 a {
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.recommended-thumb {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    object-fit: cover;
    flex-shrink: 0;
    border: 1px solid var(--border);
    background: var(--surface-2);
}

.recommended-match {
    background: var(--grad);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 999px;
    white-space: nowrap;
    flex-shrink: 0;
}

.recommended-tags {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.recommended-specs {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.recommended-specs li {
    display: flex;
    gap: 10px;
    align-items: baseline;
    font-size: 13px;
}

.recommended-specs .rs-key {
    flex-shrink: 0;
    min-width: 74px;
    font-size: 11px;
    font-weight: 700;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: .03em;
}

.recommended-specs .rs-val {
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.recommended-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    border-top: 1px solid var(--border);
    padding-top: 12px;
}

.recommended-price {
    font-weight: 800;
    color: var(--text);
    font-size: 1.05rem;
}

.recommended-watts {
    color: var(--text-muted);
    font-size: 12.5px;
}

.recommended-watts i {
    color: var(--warning);
}

.recommended-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}

.recommended-actions .inline-form {
    margin: 0;
}

/* ---- Recommended build detail page ---- */

.builder-hero-title h1 {
    margin: 0 0 6px;
}

.builder-hero-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.recommended-description {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 16px 18px;
    margin: 18px 0;
    color: var(--text);
    font-size: 14px;
    line-height: 1.9;
}

.recommended-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px;
    margin: 18px 0;
}

.recommended-scores {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    padding: 4px 0 14px;
}

.recommended-actions-bottom {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin: 22px 0;
}

.pc-alert {
    background: rgba(220, 38, 38, .1);
    border: 1px solid rgba(220, 38, 38, .4);
    border-radius: var(--radius);
    padding: 12px 14px;
    color: var(--text);
    font-size: 13.5px;
    margin: 18px 0;
}

.pc-alert i {
    color: var(--danger);
    margin-inline-end: 6px;
}

.pc-alert ul {
    margin: 8px 0 0 18px;
    padding: 0;
}

/* ---- Recommended form (admin) ---- */

.rec-slot {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 12px 14px;
    background: var(--surface);
    margin-bottom: 12px;
}

.rec-slot label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 8px;
}

.rec-slot label i {
    color: var(--accent);
}

.rec-slot-search {
    position: relative;
    margin-bottom: 8px;
}

.rec-slot-search i {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    inset-inline-start: 12px;
    color: var(--text-muted);
    font-size: 13px;
    pointer-events: none;
}

.rec-slot-search .form-control {
    padding-inline-start: 34px;
}

.rec-slot-select {
    width: 100%;
}

.rec-slot .admin-chip {
    font-weight: 400;
    margin-inline-start: auto;
}

/* Light-mode tweaks for the case preview text */
body:not(.dark) .pc-case-frame {
    color: rgba(109, 40, 217, .6);
}

body:not(.dark) .recommended-match {
    color: #fff;
}

/* ---- Builder unavailable / coming-soon page ---- */

.builder-status-page {
    display: flex;
    justify-content: center;
    padding: 70px 16px 90px;
}

.builder-status-card {
    max-width: 520px;
    width: 100%;
    text-align: center;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
    backdrop-filter: var(--glass);
    padding: 40px 28px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.builder-status-icon {
    width: 74px;
    height: 74px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    color: var(--accent);
    background: rgba(168, 85, 247, .12);
    border: 1px solid rgba(168, 85, 247, .35);
    margin-bottom: 4px;
}

.builder-status-icon i {
    animation: builder-pulse 2.2s ease-in-out infinite;
}

@keyframes builder-pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.12); opacity: .8; }
}

.builder-status-card h1 {
    margin: 0;
    font-size: clamp(20px, 3vw, 26px);
    font-weight: 800;
}

.builder-status-card p {
    margin: 0 0 8px;
    color: var(--text-muted);
    font-size: 14px;
    line-height: 1.9;
}

.builder-status-card .btn {
    margin-top: 8px;
}

/* ── Builder Light-Mode Overrides ──────────────── */

body:not(.dark) .pc-zone-case { border-color: rgba(245, 158, 11, .55); background: rgba(245, 158, 11, .1); color: #92400e; }
body:not(.dark) .pc-zone-motherboard { border-color: rgba(34, 197, 94, .5); background: rgba(34, 197, 94, .1); color: #166534; }
body:not(.dark) .pc-zone-cpu { border-color: rgba(59, 130, 246, .5); background: rgba(59, 130, 246, .1); color: #1e40af; }
body:not(.dark) .pc-zone-gpu { border-color: rgba(239, 68, 68, .5); background: rgba(239, 68, 68, .08); color: #991b1b; }
body:not(.dark) .pc-zone-ram { border-color: rgba(217, 70, 239, .5); background: rgba(217, 70, 239, .08); color: #86198f; }
body:not(.dark) .pc-zone-storage { border-color: rgba(20, 184, 166, .5); background: rgba(20, 184, 166, .08); color: #115e59; }
body:not(.dark) .pc-zone-psu { border-color: rgba(148, 163, 184, .5); background: rgba(148, 163, 184, .08); color: #334155; }
body:not(.dark) .pc-zone-cooler { border-color: rgba(14, 165, 233, .5); background: rgba(14, 165, 233, .08); color: #075985; }
body:not(.dark) .pc-zone-fan { border-color: rgba(56, 189, 248, .5); background: rgba(56, 189, 248, .08); color: #0c4a6e; }

body:not(.dark) .pc-part .pc-part-label {
    color: var(--text);
}

body:not(.dark) .pc-part .pc-part-count {
    background: rgba(0, 0, 0, .06);
    color: var(--text);
}

body:not(.dark) .bsc-badge {
    background: rgba(239, 68, 68, .08);
    color: #dc2626;
}

body:not(.dark) .bsc-position {
    border-color: rgba(30, 17, 51, .08);
}

body:not(.dark) .bsc-position-label {
    color: rgba(30, 17, 51, .55);
}

body:not(.dark) .status-pill.status-bad {
    color: #dc2626;
    background: rgba(239, 68, 68, .08);
    border-color: rgba(239, 68, 68, .3);
}

body:not(.dark) .status-pill.status-warn-pill {
    color: #d97706;
    background: rgba(245, 158, 11, .08);
    border-color: rgba(245, 158, 11, .3);
}

body:not(.dark) .status-pill.status-good {
    color: #16a34a;
    background: rgba(34, 197, 94, .08);
    border-color: rgba(34, 197, 94, .3);
}

body:not(.dark) .pc-preview {
    background: rgba(255, 255, 255, .6);
    border-color: rgba(30, 17, 51, .08);
}

body:not(.dark) .preview-head {
    color: var(--text);
}

body:not(.dark) .builder-issue.issue-warning {
    background: rgba(245, 158, 11, .06);
    border-color: rgba(245, 158, 11, .2);
    color: var(--text);
}

body:not(.dark) .builder-issue.issue-error {
    background: rgba(239, 68, 68, .06);
    border-color: rgba(239, 68, 68, .2);
    color: var(--text);
}

body:not(.dark) .mybuild-panel {
    background: #fff;
    border-color: rgba(30, 17, 51, .1);
}

body:not(.dark) .builder-slot-card {
    background: #fff;
    border-color: rgba(30, 17, 51, .08);
}

body:not(.dark) .builder-slot-card.filled {
    border-color: rgba(124, 58, 237, .25);
}

body:not(.dark) .efficiency-pill {
    color: var(--text);
}

body:not(.dark) .category-subcats .admin-chip {
    background: rgba(124, 58, 237, .08);
    color: rgba(30, 17, 51, .7);
}

/* ── Responsive: component pick search cards on mobile ── */
@media (max-width: 480px) {
    .comp-search-card {
        flex-wrap: wrap;
    }
    .comp-search-actions {
        flex-wrap: wrap;
        width: 100%;
        justify-content: flex-start;
        gap: 6px;
    }
}

/* ---------------------------------------------------------------
   Overall system score + Persian category ratings + overkill
--------------------------------------------------------------- */
.system-score { display: flex; align-items: baseline; gap: 6px; margin-bottom: 8px; }
.score-big { font-size: 2rem; font-weight: 800; color: var(--accent, #4f46e5); line-height: 1; }
.score-out-of { font-size: 0.75rem; color: var(--text-muted, #64748b); }
.score-badge { font-size: 0.72rem; font-weight: 700; padding: 3px 8px; border-radius: 999px; background: var(--accent, #4f46e5); color: #fff; }
.builder-overkill { margin-top: 10px; padding-top: 8px; border-top: 1px dashed var(--border, #e2e8f0); }
.builder-overkill > strong { font-size: 0.82rem; display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.builder-overkill .builder-issue { margin-top: 4px; }

/* ---------------------------------------------------------------
   Theming fixes (items 8/9/10) — loaded last so they win
--------------------------------------------------------------- */

/* Item 8: select / option dark & light theming ------------------ */
select { color-scheme: dark; }
select option,
select optgroup {
    background: var(--surface-2);
    color: var(--text);
}
body:not(.dark) select { color-scheme: light; }
body:not(.dark) select option,
body:not(.dark) select optgroup {
    background: var(--surface-2);
    color: var(--text);
}

/* Item 9: site background image — no longer painted on body with a fixed
   attachment (that tiled/mosaicked on tall pages / mobile). The image now
   lives on the dedicated fixed `body.has-site-bg::before` layer defined in
   style.css, which already covers the viewport edge-to-edge; nothing more is
   needed here so themes stay consistent. */

/* Item 10: decorative circle overlay must not blur/clip site bg */
body.has-site-bg::before,
body:not(.dark).has-site-bg::before {
    border-radius: 0;
    filter: none;
}

/* ---------------------------------------------------------------
   Assembly + Windows (items 5/6)
--------------------------------------------------------------- */
.builder-assembly {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--border, #e2e8f0);
}
.builder-assembly > strong {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
}
.assembly-mode-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 8px;
}
.assembly-mode-row .check-label,
.os-yesno .check-label,
.os-list .check-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.84rem;
    cursor: pointer;
    color: var(--text);
}
.assembly-cost-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 8px;
    padding: 6px 10px;
    border-radius: 8px;
    background: var(--surface);
    border: 1px solid var(--border, #e2e8f0);
    font-size: 0.82rem;
}
.assembly-cost-line .lbl {
    color: var(--text-muted);
}
.assembly-cost-line .val {
    font-weight: 800;
    color: var(--accent);
}
.os-yesno {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 8px;
}
.os-yesno > small {
    color: var(--text-muted);
    font-size: 0.8rem;
}
.os-list {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed var(--border, #e2e8f0);
}
.os-list .os-option {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
    font-size: 0.82rem;
    cursor: pointer;
    color: var(--text);
}
.os-list input[type="radio"] {
    accent-color: var(--accent);
}


.pc-preview.has-case{aspect-ratio:auto;min-height:180px;background:var(--surface-2,#0c0e16)}
.pc-case-image{display:block;width:100%;height:auto;pointer-events:none;user-select:none}


/* ---------------------------------------------------------------
   Builder clarity pass: simple flow, demo preview, rule guide
--------------------------------------------------------------- */
.builder-flow{
    display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;
    margin:16px auto 0;max-width:920px;color:var(--text-muted,#64748b);font-size:.84rem
}
.builder-flow span{display:inline-flex;align-items:center;gap:7px}
.builder-flow b{
    width:24px;height:24px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
    background:var(--accent,#4f46e5);color:#fff;font-size:.75rem
}
.builder-flow>i{font-size:.65rem;opacity:.55}

.preview-head{gap:8px;flex-wrap:wrap}
.pc-preview:not(.has-case) .pc-part{z-index:4!important}

.rule-quick-guide,.rule-simple-formula{
    border:1px solid color-mix(in srgb,var(--accent,#4f46e5) 24%,var(--border,#e2e8f0));
    background:color-mix(in srgb,var(--accent,#4f46e5) 5%,var(--surface,#fff));
    border-radius:16px;padding:16px;margin-bottom:18px
}
.rule-guide-intro,.rule-simple-formula{display:flex;align-items:flex-start;gap:12px}
.rule-guide-intro>i,.rule-simple-formula>i{
    width:36px;height:36px;flex:0 0 36px;border-radius:10px;display:flex;align-items:center;justify-content:center;
    background:var(--accent,#4f46e5);color:#fff
}
.rule-guide-intro div,.rule-simple-formula div{display:flex;flex-direction:column;gap:4px}
.rule-guide-intro strong,.rule-simple-formula strong{font-size:.95rem}
.rule-guide-intro span,.rule-simple-formula span{color:var(--text-muted,#64748b);font-size:.82rem;line-height:1.9}
.rule-guide-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:14px}
.rule-guide-grid>div{
    border:1px solid var(--border,#e2e8f0);background:var(--surface,#fff);border-radius:12px;padding:11px;
    display:flex;flex-direction:column;gap:4px
}
.rule-guide-grid b{
    width:24px;height:24px;border-radius:7px;display:flex;align-items:center;justify-content:center;
    background:color-mix(in srgb,var(--accent,#4f46e5) 12%,transparent);color:var(--accent,#4f46e5);font-size:.75rem
}
.rule-guide-grid span{font-size:.78rem;font-weight:750}
.rule-guide-grid small{font-size:.69rem;color:var(--text-muted,#64748b);line-height:1.7}
.rule-guide-examples{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.rule-guide-examples span{
    padding:6px 9px;border-radius:999px;background:var(--surface,#fff);border:1px solid var(--border,#e2e8f0);
    color:var(--text-muted,#64748b);font-size:.72rem
}
.rule-simple-formula{margin-bottom:16px}

@media(max-width:900px){.rule-guide-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){
    .builder-flow{align-items:flex-start;flex-direction:column;gap:7px}
    .builder-flow>i{display:none}
    .rule-guide-grid{grid-template-columns:1fr}
    .pc-demo-switcher{order:3;width:100%;margin-inline-start:0}
}


/* ---------------------------------------------------------------
   Real selected-part preview (no stock/demo system photos)
--------------------------------------------------------------- */
.pc-selected-parts-preview{
    position:absolute;
    inset:0;
    display:flex;
    flex-direction:column;
    gap:14px;
    padding:18px;
    overflow:auto;
    background:
        radial-gradient(circle at 20% 20%, color-mix(in srgb,var(--accent,#7c3aed) 10%,transparent), transparent 34%),
        var(--surface-2,#f8fafc);
}
.pc-selected-parts-head{
    display:flex;
    align-items:center;
    gap:8px;
    flex-wrap:wrap;
    color:var(--text,#0f172a);
}
.pc-selected-parts-head>i{color:var(--accent,#7c3aed)}
.pc-selected-parts-head span{font-weight:800}
.pc-selected-parts-head small{
    color:var(--text-muted,#64748b);
    margin-inline-start:auto;
    font-size:.72rem;
}
.pc-selected-parts-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
    gap:12px;
    align-content:start;
}
.pc-selected-part-card{
    min-width:0;
    border:1px solid var(--border,#e2e8f0);
    border-radius:14px;
    background:var(--surface,#fff);
    overflow:hidden;
    box-shadow:0 8px 24px rgba(15,23,42,.06);
}
.pc-selected-part-image{
    height:118px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:var(--surface-2,#f8fafc);
    padding:10px;
}
.pc-selected-part-image img{
    width:100%;
    height:100%;
    object-fit:contain;
    display:block;
}
.pc-selected-part-image>i{
    font-size:34px;
    color:var(--accent,#7c3aed);
}
.pc-selected-part-meta{
    display:flex;
    flex-direction:column;
    gap:4px;
    padding:10px 11px 12px;
}
.pc-selected-part-meta strong{
    font-size:.72rem;
    color:var(--accent,#7c3aed);
}
.pc-selected-part-meta span{
    font-size:.76rem;
    line-height:1.65;
    color:var(--text,#0f172a);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.pc-empty-case{
    position:absolute;
    inset:8%;
    border:2px dashed color-mix(in srgb,var(--accent,#7c3aed) 35%,var(--border,#e2e8f0));
    border-radius:18px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:10px;
    color:var(--text-muted,#64748b);
    background:color-mix(in srgb,var(--surface,#fff) 86%,transparent);
}
.pc-empty-case i{
    font-size:56px;
    color:var(--accent,#7c3aed);
    opacity:.55;
}
.pc-empty-case span{
    font-size:.8rem;
    font-weight:700;
    max-width:80%;
    text-align:center;
}
@media(max-width:600px){
    .pc-selected-parts-preview{padding:12px}
    .pc-selected-parts-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
    .pc-selected-part-image{height:92px}
    .pc-selected-parts-head small{width:100%;margin-inline-start:0}
}


/* Builder compactness + image interaction fixes. */
.bsc-thumb-static,
.pc-img-static { cursor: default; }
.bsc-head { flex-wrap: wrap; min-width: 0; }
.bsc-title { min-width: 0; overflow-wrap: anywhere; }
.bsc-badge {
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.55;
}
.bsc-capacity-info { min-width: 0; }
.bsc-cap-item {
    min-width: 0;
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
}
@media (max-width: 560px) {
    .builder-slot-card { padding: 12px; }
    .bsc-head { gap: 6px; }
    .bsc-badge { font-size: 9.5px; }
}