:root {
    color-scheme: dark;
    --pink: #ff2f92;
    --violet: #8b3dff;
    --panel: rgba(8, 11, 22, 0.9);
    --muted: #a6a9b7;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Inter, Arial, Helvetica, sans-serif;
}

body {
    min-height: 100vh;
    background: #050711;
    color: white;
    display: flex;
    overflow-x: hidden;
    overflow-y: auto;
    isolation: isolate;
}

body.pickerOpen { overflow: hidden; }

body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(circle at 62% 46%, rgba(5, 7, 17, 0.18) 0 12%, rgba(5, 7, 17, 0.63) 38%, transparent 68%),
        linear-gradient(90deg, rgba(3, 5, 12, 0.78) 0, rgba(3, 5, 12, 0.16) 42%, rgba(3, 5, 12, 0.28) 100%),
        linear-gradient(0deg, rgba(3, 5, 12, 0.74), transparent 45%);
}

.backgroundLayers {
    position: fixed;
    inset: 0;
    z-index: -2;
    overflow: hidden;
    background: #050711;
}

.backgroundLayer {
    position: absolute;
    inset: -2%;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    opacity: 0;
    transform: scale(1.02);
    transition: opacity 1.2s ease-in-out, transform 10s linear;
    will-change: opacity, transform;
}

.backgroundLayer0 { background-image: url("../images/benchmark-bg-0.png"); }
.backgroundLayer25 { background-image: url("../images/benchmark-bg-25.png"); }
.backgroundLayer68 { background-image: url("../images/benchmark-bg-68.png"); }
.backgroundLayer100 { background-image: url("../images/benchmark-bg-100.png"); }

body[data-scene="0"] .backgroundLayer0,
body[data-scene="25"] .backgroundLayer25,
body[data-scene="68"] .backgroundLayer68,
body[data-scene="100"] .backgroundLayer100 {
    opacity: 1;
    transform: scale(1);
}

.sidebar {
    width: 290px;
    flex: 0 0 290px;
    background: linear-gradient(180deg, rgba(9, 12, 24, 0.96), rgba(8, 10, 20, 0.86));
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    padding: 30px;
    backdrop-filter: blur(18px);
    box-shadow: 12px 0 45px rgba(0, 0, 0, 0.35);
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-x: hidden;
    overflow-y: auto;
    z-index: 2;
}

.logo {
    font-size: 28px;
    margin-bottom: 40px;
    font-weight: 800;
    letter-spacing: -0.8px;
}

.logo span { color: var(--pink); }

.componentList {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.component {
    background: rgba(20, 25, 42, 0.82);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    min-height: 58px;
    padding: 10px 12px;
    cursor: pointer;
    font-size: 15px;
    text-align: left;
    transition: 0.25s ease;
    display: flex;
    align-items: center;
    gap: 9px;
}

.componentImage {
    position: relative;
    width: 48px;
    height: 42px;
    flex: 0 0 48px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    background-color: #000;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.85);
}

.componentImage::after {
    content: "AI generated";
    position: absolute;
    right: 2px;
    bottom: 2px;
    padding: 2px 3px;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.78);
    color: #ff8bc2;
    font-size: 4.5px;
    font-weight: 900;
    letter-spacing: 0.15px;
    line-height: 1;
    text-transform: uppercase;
    white-space: nowrap;
}

.componentImage img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}

.componentImageCpu { background-image: url("../images/compare-cpu.png"); }
.componentImageGpu { background-image: url("../images/compare-gpu.png"); }
.componentImageRam { background-image: url("../images/compare-ram.png"); }
.componentImageMotherboard { background-image: url("../images/compare-motherboard.png"); }
.componentImageNvme { background-image: url("../images/compare-nvme.png"); }
.componentImagePsu { background-image: url("../images/compare-psu.png"); }
.componentImageCooler { background-image: url("../images/compare-cooler.png"); }
.componentImageCase { background-image: url("../images/compare-case.png"); }
.componentImageFullbuild { background-image: url("../images/compare-fullbuild.png"); }

.component > span:last-child {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.component strong { font-size: 15px; font-weight: 650; }

.component small {
    max-height: 0;
    overflow: hidden;
    color: #ffb5d8;
    font-size: 11px;
    white-space: nowrap;
    text-overflow: ellipsis;
    opacity: 0;
    transition: 0.25s ease;
}

.component:not(.selected) small {
    max-height: 18px;
    color: #777c8d;
    opacity: 1;
}

.componentCheck {
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: transparent;
    font-size: 13px;
    transition: 0.25s ease;
}

.component:hover,
.component.selected {
    background: linear-gradient(90deg, rgba(255, 47, 146, 0.26), rgba(139, 61, 255, 0.14));
    border-color: rgba(255, 47, 146, 0.72);
    transform: translateX(5px);
    box-shadow: 0 0 22px rgba(255, 47, 146, 0.24);
}

.component.selected small { max-height: 18px; opacity: 1; }

.component.selected .componentCheck {
    color: white;
    background: var(--pink);
    border-color: var(--pink);
    box-shadow: 0 0 15px rgba(255, 47, 146, 0.75);
}

.fullBuildComponent {
    position: relative;
    margin-top: 23px;
    border-color: rgba(139, 61, 255, 0.42);
    background: linear-gradient(110deg, rgba(139, 61, 255, 0.2), rgba(255, 47, 146, 0.12));
}

.fullBuildComponent::before {
    content: "COMPLETE SYSTEMS";
    position: absolute;
    left: 0;
    top: -21px;
    color: #777c8d;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 1.1px;
}

.main {
    min-width: 0;
    min-height: 100vh;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.topBar {
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.09);
    background: rgba(4, 6, 14, 0.58);
    backdrop-filter: blur(14px);
    position: relative;
}

.menu {
    display: flex;
    gap: 24px;
}

.menu button {
    background: none;
    color: #e8e9ef;
    border: none;
    cursor: pointer;
    font-size: 16px;
    transition: 0.25s ease;
}

.menu button.active,
.menu button:hover { color: var(--pink); }
.homeMenuButton span { margin-right: 5px; color: var(--pink); font-size: 17px; line-height: 0; }

.currencyMenuButton {
    padding: 8px 13px;
    border: 1px solid rgba(255, 47, 146, 0.42) !important;
    border-radius: 9px;
    background: rgba(255, 47, 146, 0.12) !important;
    color: var(--pink) !important;
    font-weight: 800;
}

.cartButton {
    position: absolute;
    right: 28px;
    top: 50%;
    width: 50px;
    height: 42px;
    transform: translateY(-50%);
    border: 1px solid rgba(255, 47, 146, 0.4);
    border-radius: 11px;
    background: rgba(255, 47, 146, 0.12);
    color: white;
    cursor: pointer;
    font-size: 18px;
}

.cartButton b {
    position: absolute;
    top: -7px;
    right: -7px;
    min-width: 21px;
    height: 21px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--pink);
    display: grid;
    place-items: center;
    font-size: 10px;
}

.center {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 18px 24px;
    position: relative;
}

.workspaceView {
    width: 100%;
    min-height: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.workspaceView[hidden] { display: none; }

body[data-workspace="home"]::before {
    background:
        radial-gradient(circle at 63% 44%, rgba(255, 47, 146, 0.08), transparent 34%),
        linear-gradient(90deg, rgba(3, 5, 12, 0.82) 0, rgba(3, 5, 12, 0.23) 44%, rgba(3, 5, 12, 0.44) 100%),
        linear-gradient(0deg, rgba(3, 5, 12, 0.78), transparent 55%);
}

.homeView {
    width: min(1120px, 100%);
    padding: 28px 12px 38px;
}

.homeContent {
    width: 100%;
    text-align: center;
}

.homeEyebrow {
    color: #ff7fbd;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 2.2px;
}

.homeContent > h2 {
    margin-top: 8px;
    font-size: clamp(44px, 6vw, 76px);
    line-height: 0.98;
    letter-spacing: -3px;
    text-shadow: 0 8px 35px rgba(0, 0, 0, 0.7), 0 0 35px rgba(255, 47, 146, 0.24);
}

.homeLead {
    margin-top: 14px;
    color: #d3d5df;
    font-size: 16px;
    line-height: 1.5;
}

.homeActions {
    margin-top: 22px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 9px;
}

.homeActions button {
    min-height: 44px;
    padding: 0 19px;
    border-radius: 10px;
    color: white;
    cursor: pointer;
    font-size: 12px;
    font-weight: 850;
}

.homePrimary {
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: linear-gradient(105deg, #e90069, var(--pink), #8b3dff);
    box-shadow: 0 10px 28px rgba(255, 47, 146, 0.22);
}

.homeSecondary {
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: rgba(5, 8, 18, 0.76);
    backdrop-filter: blur(12px);
}

.homeActions button:hover { transform: translateY(-2px); border-color: var(--pink); }

.homeFeatureGrid {
    width: 100%;
    margin-top: 28px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.homeFeatureGrid article {
    min-height: 126px;
    padding: 16px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 13px;
    background: linear-gradient(145deg, rgba(13, 17, 31, 0.88), rgba(5, 8, 17, 0.7));
    backdrop-filter: blur(14px);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    text-align: left;
    transition: 0.22s ease;
}

.homeFeatureGrid article:hover {
    border-color: rgba(255, 47, 146, 0.5);
    background: linear-gradient(145deg, rgba(255, 47, 146, 0.16), rgba(10, 12, 26, 0.82));
    transform: translateY(-3px);
}

.homeFeatureGrid article > span { color: var(--pink); font-size: 9px; font-weight: 900; letter-spacing: 1px; }
.homeFeatureGrid article > strong { font-size: 15px; }
.homeFeatureGrid article > p { color: #a9adbb; font-size: 11px; line-height: 1.45; }

.builderView {
    width: min(1040px, 100%);
    padding: 26px 10px;
}

.builderHero {
    max-width: 720px;
    text-align: center;
}

.builderHero > span {
    color: var(--pink);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.6px;
}

.builderHero h2 {
    margin-top: 7px;
    font-size: 36px;
    letter-spacing: -1px;
}

.builderHero p {
    margin-top: 8px;
    color: #a8abba;
    font-size: 14px;
    line-height: 1.5;
}

.builderBuildSwitch {
    margin-top: 22px;
    padding: 5px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 11px;
    background: rgba(5, 8, 17, 0.75);
    display: flex;
    gap: 5px;
}

.builderBuildSwitch button {
    min-width: 92px;
    padding: 9px 14px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #a8abba;
    cursor: pointer;
    font-weight: 800;
}

.builderBuildSwitch button.active {
    background: linear-gradient(110deg, rgba(255, 47, 146, 0.92), rgba(139, 61, 255, 0.72));
    color: white;
}

.builderSummary {
    width: 100%;
    margin-top: 18px;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.builderTotals {
    grid-column: 1 / -1;
    padding: 14px 18px;
    border: 1px solid rgba(255, 47, 146, 0.23);
    border-radius: 12px;
    background: linear-gradient(110deg, rgba(255, 47, 146, 0.11), rgba(139, 61, 255, 0.08));
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.builderTotals span { display: flex; flex-direction: column; gap: 4px; }
.builderTotals small { color: #7f8494; font-size: 9px; font-weight: 800; }
.builderTotals strong { font-size: 15px; }

.builderPart {
    min-width: 0;
    min-height: 104px;
    padding: 14px;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 12px;
    background: rgba(18, 22, 38, 0.88);
    color: white;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 7px;
    text-align: left;
    transition: 0.2s ease;
}

.builderPart:hover,
.builderPart.selected {
    border-color: rgba(255, 47, 146, 0.52);
    background: rgba(255, 47, 146, 0.12);
}

.builderPart small { color: var(--pink); font-size: 9px; font-weight: 800; text-transform: uppercase; }
.builderPart strong { font-size: 13px; line-height: 1.3; }
.builderPart span { margin-top: auto; color: #858999; font-size: 10px; }

.builderActions {
    width: 100%;
    margin-top: 16px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.builderActions button {
    min-height: 46px;
    border-radius: 10px;
    color: white;
    cursor: pointer;
    font-weight: 800;
}

.builderSave { border: 1px solid rgba(255, 255, 255, 0.14); background: rgba(255, 255, 255, 0.05); }
.builderBenchmark { border: 1px solid rgba(255, 47, 146, 0.35); background: linear-gradient(110deg, #e90069, var(--pink)); }

body[data-workspace="compare"] .backgroundLayers { opacity: 0.16; }
body[data-workspace="compare"]::before { background: rgba(1, 2, 6, 0.88); }

.compareView {
    width: 100%;
    justify-content: flex-start;
    padding: 26px 18px 42px;
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(2, 3, 8, 0.97), rgba(5, 7, 14, 0.94));
}

.compareHero { max-width: 760px; text-align: center; }
.compareHero > span { color: var(--pink); font-size: 10px; font-weight: 800; letter-spacing: 1.5px; }
.compareHero h2 { margin-top: 7px; font-size: 34px; }
.compareHero p { margin-top: 8px; color: #969aaa; font-size: 13px; line-height: 1.5; }

.compareCategories {
    width: min(1100px, 100%);
    margin-top: 20px;
    display: grid;
    grid-template-columns: repeat(9, minmax(0, 1fr));
    gap: 7px;
}

.compareCategories button {
    min-height: 45px;
    padding: 8px;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 9px;
    background: rgba(17, 20, 33, 0.9);
    color: #a8abba;
    cursor: pointer;
    font-size: 10px;
    font-weight: 800;
}

.compareCategories button:hover,
.compareCategories button.active {
    border-color: rgba(255, 47, 146, 0.65);
    background: rgba(255, 47, 146, 0.18);
    color: white;
}

.compareFilters {
    width: min(1050px, 100%);
    margin-top: 14px;
    padding: 10px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 11px;
    background: rgba(7, 9, 16, 0.9);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}

.compareFilters label {
    min-width: 140px;
    flex: 1 1 140px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.compareFilters label > span {
    color: #777c8d;
    font-size: 8px;
    font-weight: 900;
    letter-spacing: 0.7px;
    text-transform: uppercase;
}

.compareFilters select {
    width: 100%;
    height: 34px;
    padding: 0 9px;
    border: 1px solid rgba(255, 255, 255, 0.11);
    border-radius: 8px;
    outline: none;
    background: #05060b;
    color: #d9dae2;
    font-size: 10px;
}

.compareFilters select:focus { border-color: var(--pink); }

.compareSelectors {
    width: min(1050px, 100%);
    margin-top: 17px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 54px minmax(0, 1fr);
    align-items: stretch;
    gap: 10px;
}

.compareSelectCard {
    position: relative;
    min-width: 0;
    padding: 18px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    background: rgba(12, 15, 26, 0.96);
    display: flex;
    flex-direction: column;
}

.compareSelectCard.compareA { border-top: 2px solid #8b3dff; }
.compareSelectCard.compareB { border-top: 2px solid var(--pink); }

.compareLetter {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 30px;
    height: 30px;
    border-radius: 9px;
    background: rgba(255, 47, 146, 0.16);
    display: grid;
    place-items: center;
    color: var(--pink);
    font-weight: 900;
}

.compareSelectCard > label { color: #858999; font-size: 9px; font-weight: 800; text-transform: uppercase; }
.compareSearchBox {
    width: calc(100% - 42px);
    height: 43px;
    margin-top: 7px;
    padding: 0 11px;
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 9px;
    background: #080a12;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: border-color 0.16s ease, box-shadow 0.16s ease;
}

.compareSearchBox:focus-within {
    border-color: var(--pink);
    box-shadow: 0 0 0 3px rgba(255, 47, 146, 0.09);
}

.compareSearchBox > span {
    color: var(--pink);
    font-size: 13px;
    line-height: 1;
}

.compareSearchBox input {
    width: 100%;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: white;
    font: inherit;
    font-size: 11px;
}

.compareSearchBox input::placeholder { color: #666b7b; }
.compareSelectCard > .compareProductLabel { margin-top: 11px; }
.compareSelectCard > select {
    width: calc(100% - 42px);
    height: 43px;
    margin-top: 7px;
    padding: 0 10px;
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 9px;
    outline: none;
    background: #080a12;
    color: white;
    font-size: 12px;
}

.compareSelectCard > select:focus { border-color: var(--pink); }
.compareVersus { display: grid; place-items: center; color: var(--pink); font-size: 16px; font-weight: 900; }

.compareProductPreview {
    min-height: 165px;
    margin-top: 13px;
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.compareProductVisual {
    position: relative;
    width: 100%;
    height: 92px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.055);
    background-color: #000;
    background-repeat: no-repeat;
    background-position: center;
    box-shadow: inset 0 0 28px rgba(0, 0, 0, 0.9);
}

.compareProductVisualGenerated em {
    position: absolute;
    right: 7px;
    bottom: 6px;
    padding: 3px 6px;
    border: 1px solid rgba(255, 47, 146, 0.5);
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.78);
    color: #ff8bc2;
    font-size: 7px;
    font-style: normal;
    font-weight: 900;
    letter-spacing: 0.7px;
    line-height: 1;
    text-transform: uppercase;
}

.compareProductVisualCpu {
    background-image: url("../images/compare-cpu.png");
    background-size: contain;
}

.compareProductVisualGpu {
    background-image: url("../images/compare-gpu.png");
    background-size: contain;
    filter: hue-rotate(var(--gpu-hue, 0deg));
}

.compareProductVisualRam {
    background-image: url("../images/compare-ram.png");
    background-size: contain;
}

.compareProductVisualMotherboard {
    background-image: url("../images/compare-motherboard.png");
    background-size: contain;
}

.compareProductVisualNvme {
    background-image: url("../images/compare-nvme.png");
    background-size: contain;
}

.compareProductVisualPsu {
    background-image: url("../images/compare-psu.png");
    background-size: contain;
}

.compareProductVisualCooler {
    background-image: url("../images/compare-cooler.png");
    background-size: contain;
}

.compareProductVisualCase {
    background-image: url("../images/compare-case.png");
    background-size: contain;
}

.compareProductVisualFullbuild {
    background-image: url("../images/compare-fullbuild.png");
    background-size: contain;
}

.compareProductVisualEmpty { background: #000; }

.compareSelectCard select:disabled,
.compareCartButton:disabled,
.compareNowButton:disabled { opacity: 0.48; cursor: not-allowed; }

.compareProductPreview > small { color: var(--pink); font-size: 9px; font-weight: 800; }
.compareProductPreview > strong { font-size: 14px; line-height: 1.3; }
.compareProductPreview > span { color: #858999; font-size: 10px; line-height: 1.4; }
.comparePreviewBadges { margin-top: auto; display: flex; flex-wrap: wrap; gap: 5px; }
.comparePreviewBadges b { padding: 5px 7px; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 999px; color: #c8cad4; font-size: 9px; }

.compareCartButton {
    min-height: 39px;
    margin-top: 12px;
    border: 1px solid rgba(255, 47, 146, 0.34);
    border-radius: 9px;
    background: rgba(255, 47, 146, 0.11);
    color: white;
    cursor: pointer;
    font-weight: 800;
}

.compareNowButton {
    width: min(1050px, 100%);
    min-height: 47px;
    margin-top: 11px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 10px;
    background: linear-gradient(100deg, #e90069, var(--pink), #8b3dff);
    color: white;
    cursor: pointer;
    font-weight: 900;
}

.quickCompareResult {
    width: min(1050px, 100%);
    margin-top: 15px;
    padding: 18px;
    border: 1px solid rgba(255, 47, 146, 0.22);
    border-radius: 14px;
    background: rgba(9, 12, 21, 0.96);
}

.quickCompareResult > header { text-align: center; }
.quickCompareResult > header > span { color: var(--pink); font-size: 9px; font-weight: 800; letter-spacing: 1.3px; }
.quickCompareResult h3 { margin-top: 5px; font-size: 22px; }
.quickCompareResult header p { margin-top: 6px; color: #a3a6b3; font-size: 12px; }

.compareWinnerGrid { margin-top: 15px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.compareWinnerCard { padding: 13px; border: 1px solid rgba(255, 255, 255, 0.09); border-radius: 10px; background: rgba(17, 21, 35, 0.78); display: flex; flex-direction: column; gap: 5px; }
.compareWinnerCard small { color: #7f8494; font-size: 8px; font-weight: 800; }
.compareWinnerCard strong { color: var(--pink); font-size: 18px; }
.compareWinnerCard span { color: #a8abba; font-size: 10px; line-height: 1.35; }

.compareMetrics { margin-top: 12px; display: flex; flex-direction: column; gap: 7px; }
.compareMetricRow { padding: 10px; border: 1px solid rgba(255, 255, 255, 0.07); border-radius: 9px; display: grid; grid-template-columns: 145px 1fr 1fr; align-items: center; gap: 10px; }
.compareMetricRow > strong { color: #8d91a0; font-size: 10px; }
.metricSide { min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.metricSide b { font-size: 11px; }
.metricSide i { position: relative; height: 4px; border-radius: 99px; overflow: hidden; background: rgba(255, 255, 255, 0.08); }
.metricSide i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--metric-width); border-radius: inherit; background: #5b6171; }
.metricSide.winner b { color: #ffadd3; }
.metricSide.winner i::after { background: linear-gradient(90deg, var(--pink), #8b3dff); }

.sphere {
    --progress: 0deg;
    width: 240px;
    height: 240px;
    border-radius: 50%;
    padding: 10px;
    position: relative;
    background: conic-gradient(var(--pink) var(--progress), rgba(255, 255, 255, 0.14) 0);
    box-shadow: 0 0 20px rgba(255, 47, 146, 0.24), inset 0 0 12px rgba(255, 255, 255, 0.12);
    transition: box-shadow 0.35s ease;
}

.sphere::before {
    content: "";
    position: absolute;
    inset: -9px;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: inherit;
    box-shadow: inset 0 0 0 5px rgba(7, 9, 18, 0.56);
}

.sphere.running {
    box-shadow: 0 0 55px rgba(255, 47, 146, 0.68), 0 0 95px rgba(139, 61, 255, 0.28);
}

.sphere.complete {
    box-shadow: 0 0 62px rgba(255, 47, 146, 0.78), 0 0 110px rgba(139, 61, 255, 0.38);
}

.sphere.better {
    box-shadow: 0 0 62px rgba(45, 255, 170, 0.7), 0 0 110px rgba(28, 185, 255, 0.3);
}

.sphere.worse {
    box-shadow: 0 0 62px rgba(255, 61, 96, 0.72), 0 0 110px rgba(255, 47, 146, 0.28);
}

.sphereInner {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 40%, rgba(26, 10, 34, 0.96), rgba(5, 7, 17, 0.98) 68%);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border: 1px solid rgba(255, 255, 255, 0.13);
    position: relative;
    z-index: 1;
}

#percent {
    font-size: 64px;
    line-height: 1;
    letter-spacing: -3px;
    text-shadow: 0 0 28px rgba(255, 255, 255, 0.22);
}

.sphereInner span {
    margin-top: 12px;
    color: var(--muted);
    font-size: 11px;
    letter-spacing: 1.6px;
    text-transform: uppercase;
}

.resultDirection {
    margin-top: 10px;
    padding: 4px 9px;
    border: 1px solid currentColor;
    border-radius: 5px;
    color: #58ffc0;
    font-size: 11px;
    letter-spacing: 1.2px;
}

.sphere.worse .resultDirection { color: #ff5b78; }
.sphere.same .resultDirection { color: #ffd56a; }

.benchmarkStatus {
    margin-top: 16px;
    text-align: center;
    text-shadow: 0 2px 15px #000;
}

.benchmarkStatus h3 {
    color: var(--pink);
    font-size: 22px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.benchmarkStatus p {
    margin-top: 8px;
    color: #d8d9e1;
    font-size: 15px;
}

.progress {
    width: 100%;
    margin-top: 0;
    display: flex;
    gap: 8px;
}

.buildsComparison {
    width: calc(100% - 20px);
    max-width: 980px;
    min-width: 0;
    margin-top: 16px;
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.buildRow {
    min-width: 0;
    display: grid;
    grid-template-columns: 88px minmax(0, 1fr);
    align-items: center;
    gap: 9px;
    opacity: 0.68;
    transition: opacity 0.25s ease;
}

.buildIdentity {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

.buildIdentity > span {
    color: #9da1b0;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.35px;
    text-align: center;
    text-transform: uppercase;
}

.buildRow.active .buildIdentity > span { color: #ff8fc2; }

.buildRow.active { opacity: 1; }

.buildTrack { min-width: 0; }

.buildSelector {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    background: rgba(7, 10, 20, 0.82);
    color: #a8abb7;
    font-size: 16px;
    font-weight: 800;
    cursor: pointer;
    transition: 0.25s ease;
}

.buildRow.active .buildSelector {
    color: white;
    border-color: var(--pink);
    background: var(--pink);
    box-shadow: 0 0 18px rgba(255, 47, 146, 0.58);
}

.componentStrip {
    width: 100%;
    min-width: 0;
    margin-top: 5px;
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 7px;
}

.stripItem {
    min-width: 0;
    min-height: 51px;
    padding: 5px 3px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 9px;
    background: rgba(7, 10, 20, 0.76);
    backdrop-filter: blur(10px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    text-align: center;
    color: #7f8392;
    transition: 0.3s ease;
}

.stripItem strong {
    max-width: 100%;
    font-size: 10px;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.stripItem small {
    max-width: 100%;
    color: #6e7280;
    font-size: 9px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.stripCheck {
    width: 17px;
    height: 17px;
    border: 1px solid #555967;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: transparent;
    font-size: 12px;
}

.stripItem.selected {
    color: white;
    border-color: rgba(255, 47, 146, 0.72);
    background: linear-gradient(180deg, rgba(255, 47, 146, 0.19), rgba(9, 11, 22, 0.88));
    box-shadow: 0 0 18px rgba(255, 47, 146, 0.18);
}

.stripItem.selected small { color: #ffb5d8; }

.stripItem.selected .stripCheck {
    color: white;
    background: var(--pink);
    border-color: var(--pink);
    box-shadow: 0 0 13px rgba(255, 47, 146, 0.7);
}

.step {
    flex: 1;
    height: 7px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.17);
    overflow: hidden;
    transition: 0.3s ease;
}

.step.active {
    background: linear-gradient(90deg, var(--pink), #ff6db5);
    box-shadow: 0 0 14px rgba(255, 47, 146, 0.72);
}

.benchmarkButton {
    margin: 0 0 14px;
    min-width: 245px;
    background: linear-gradient(110deg, #e90069, var(--pink));
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 10px;
    padding: 17px 36px;
    font-size: 17px;
    font-weight: 700;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    transition: 0.25s ease;
    box-shadow: 0 10px 32px rgba(233, 0, 105, 0.28);
}

.benchmarkButton:hover:not(:disabled) {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 0 30px rgba(255, 47, 146, 0.7);
}

.benchmarkButton:disabled {
    cursor: wait;
    opacity: 0.82;
}

.comparisonResult {
    width: calc(100% - 20px);
    max-width: 980px;
    margin-top: 12px;
    padding: 13px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    background: rgba(5, 8, 18, 0.84);
    backdrop-filter: blur(12px);
}

.comparisonResult[hidden] { display: none; }

.comparisonResult header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.comparisonResult header strong { color: var(--pink); font-size: 14px; }
.comparisonResult header span { color: #8e93a3; font-size: 11px; }

.comparisonDetails {
    margin-top: 10px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
}

.resultItem {
    padding: 9px 10px;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.035);
    display: grid;
    grid-template-columns: 74px minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
}

.resultItem strong { color: #ff8fc2; font-size: 10px; text-transform: uppercase; }
.resultItem span { min-width: 0; color: #c8cad4; font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.resultItem b { font-size: 12px; }
.resultItem.better b { color: #58ffc0; }
.resultItem.worse b { color: #ff5b78; }
.resultItem.same b { color: #ffd56a; }

.resultItem small {
    grid-column: 2 / 4;
    color: #858a9a;
    font-size: 9px;
    line-height: 1.35;
}

.benchmarkConfirmBackdrop {
    position: fixed;
    inset: 0;
    z-index: 220;
    padding: 20px;
    background: rgba(1, 2, 8, 0.86);
    backdrop-filter: blur(12px);
    display: grid;
    place-items: center;
}

.benchmarkConfirmBackdrop[hidden] { display: none; }

.benchmarkConfirm {
    width: min(560px, 94vw);
    padding: 28px;
    border: 1px solid rgba(255, 47, 146, 0.42);
    border-radius: 17px;
    background: linear-gradient(155deg, #141827, #060810);
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.62), 0 0 34px rgba(255, 47, 146, 0.14);
}

.confirmEyebrow { color: var(--pink); font-size: 11px; font-weight: 900; letter-spacing: 1.4px; }
.benchmarkConfirm h2 { margin-top: 7px; font-size: 24px; }
.benchmarkConfirm p { margin-top: 9px; color: #aeb1bd; font-size: 14px; line-height: 1.5; }

.confirmComponents {
    margin-top: 17px;
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.confirmComponents span {
    padding: 6px 9px;
    border: 1px solid rgba(255, 47, 146, 0.35);
    border-radius: 999px;
    background: rgba(255, 47, 146, 0.1);
    color: #ffc0dd;
    font-size: 11px;
    text-transform: uppercase;
}

.confirmActions {
    margin-top: 22px;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.confirmActions button {
    padding: 11px 15px;
    border-radius: 9px;
    color: white;
    cursor: pointer;
    font-weight: 700;
}

.confirmCancel { border: 1px solid rgba(255, 255, 255, 0.14); background: transparent; }
.confirmRun { border: 1px solid rgba(255, 255, 255, 0.18); background: linear-gradient(110deg, #e90069, var(--pink)); }

.pickerBackdrop {
    position: fixed;
    inset: 0;
    z-index: 100;
    padding: 18px;
    display: flex;
    justify-content: flex-end;
    background: rgba(2, 4, 11, 0.68);
    backdrop-filter: blur(9px);
}

.pickerBackdrop[hidden] { display: none; }

.componentPicker {
    width: min(780px, calc(100vw - 330px));
    min-width: 560px;
    height: 100%;
    padding: 24px;
    border: 1px solid rgba(255, 47, 146, 0.38);
    border-radius: 18px;
    background: linear-gradient(165deg, rgba(17, 20, 35, 0.98), rgba(5, 7, 16, 0.99));
    box-shadow: -22px 0 70px rgba(0, 0, 0, 0.48), 0 0 35px rgba(255, 47, 146, 0.12);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.pickerHeader {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
}

.pickerEyebrow {
    color: var(--pink);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.3px;
    text-transform: uppercase;
}

.pickerHeader h2 {
    margin-top: 5px;
    font-size: 27px;
}

.fullBuildTarget {
    margin-top: 18px;
    padding: 11px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 11px;
    background: rgba(4, 7, 15, 0.64);
    display: flex;
    align-items: center;
    gap: 8px;
}

.fullBuildTarget[hidden] { display: none; }

.fullBuildTarget > span {
    margin-right: auto;
    color: #a8abba;
    font-size: 12px;
    font-weight: 700;
}

.fullBuildTarget button {
    padding: 8px 12px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.05);
    color: white;
    cursor: pointer;
    font-weight: 800;
}

.fullBuildTarget button.active {
    border-color: var(--pink);
    background: rgba(255, 47, 146, 0.2);
    box-shadow: 0 0 16px rgba(255, 47, 146, 0.16);
}

.pickerFilters {
    margin-top: 14px;
    padding: 12px;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 11px;
    background: rgba(5, 8, 17, 0.72);
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 9px;
}

.pickerFilters[hidden] { display: none; }

.pickerFilters label {
    min-width: 120px;
    flex: 1 1 130px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.pickerFilters label > span {
    color: #8f93a2;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.6px;
    text-transform: uppercase;
}

.pickerFilters select {
    width: 100%;
    height: 36px;
    padding: 0 9px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    outline: none;
    background: #090c18;
    color: white;
    cursor: pointer;
    font-size: 11px;
}

.pickerFilters select:focus { border-color: var(--pink); }

.pickerClose {
    width: 38px;
    height: 38px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.05);
    color: white;
    font-size: 26px;
    cursor: pointer;
}

.pickerSearchWrap {
    margin-top: 20px;
    display: block;
}

.pickerSearchWrap span {
    display: block;
    margin-bottom: 7px;
    color: #a8abba;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
}

.pickerSearchWrap input {
    width: 100%;
    height: 46px;
    padding: 0 16px;
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 11px;
    outline: none;
    background: rgba(6, 8, 18, 0.9);
    color: white;
    font-size: 15px;
    transition: 0.2s ease;
}

.pickerSearchWrap input:focus {
    border-color: var(--pink);
    box-shadow: 0 0 0 3px rgba(255, 47, 146, 0.13);
}

.pickerGrid {
    min-height: 0;
    margin-top: 16px;
    padding-right: 5px;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-color: rgba(255, 47, 146, 0.55) rgba(255, 255, 255, 0.05);
    scrollbar-width: thin;
}

.pickerOption {
    min-width: 0;
    min-height: 70px;
    padding: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    background: rgba(19, 23, 39, 0.86);
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 12px;
    text-align: left;
    transition: 0.22s ease;
}

.pickerOption:hover,
.pickerOption.selected {
    border-color: var(--pink);
    background: linear-gradient(110deg, rgba(255, 47, 146, 0.22), rgba(139, 61, 255, 0.12));
    transform: translateY(-2px);
    box-shadow: 0 0 20px rgba(255, 47, 146, 0.15);
}

.pickerOption.selected::after {
    content: "\2713";
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    border-radius: 50%;
    background: var(--pink);
    display: grid;
    place-items: center;
    font-weight: 800;
}

.pickerOption.imageOption.selected::after { display: none; }

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

.pickerOptionCopy small {
    color: #7e8393;
    font-size: 10px;
    text-transform: uppercase;
}

.pickerOptionCopy strong {
    font-size: 14px;
    line-height: 1.3;
}

.pickerOptionMeta {
    margin-top: 3px;
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.pickerOptionMeta > span {
    padding: 4px 7px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 999px;
    background: rgba(4, 7, 15, 0.68);
    color: #c8cad4;
    font-size: 10px;
    line-height: 1;
    text-transform: none;
}

.pickerOptionMeta > span:first-child {
    border-color: rgba(255, 47, 146, 0.32);
    color: #ffadd3;
}

.pickerGrid.withImages .pickerOption {
    min-height: 142px;
    align-items: center;
    flex-direction: row;
    cursor: default;
}

.pickerGrid.fullBuildGrid {
    gap: 18px;
    padding-right: 8px;
}

.fullBuildFolder {
    overflow: hidden;
    border: 1px solid rgba(139, 61, 255, 0.38);
    border-radius: 14px;
    background: rgba(10, 13, 25, 0.92);
}

.fullBuildFolder[open] {
    min-height: 390px;
}

.fullBuildFolder > summary {
    min-height: 74px;
    padding: 15px 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    list-style: none;
    background: linear-gradient(110deg, rgba(139, 61, 255, 0.18), rgba(255, 47, 146, 0.1));
}

.fullBuildFolder > summary::-webkit-details-marker { display: none; }

.fullBuildFolder > summary::before {
    content: "+";
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 8px;
    display: grid;
    place-items: center;
    color: var(--pink);
    font-size: 20px;
    font-weight: 700;
}

.fullBuildFolder[open] > summary::before { content: "−"; }

.fullBuildFolder > summary > span {
    min-width: 0;
    margin-right: auto;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.fullBuildFolder > summary strong { font-size: 15px; }
.fullBuildFolder > summary small { color: #9296a6; font-size: 11px; }
.fullBuildFolder > summary > b { color: #ffadd3; font-size: 12px; white-space: nowrap; }

.fullBuildFolderList {
    height: min(48vh, 460px);
    min-height: 285px;
    padding: 19px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    flex-direction: column;
    gap: 19px;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-color: rgba(255, 47, 146, 0.55) rgba(255, 255, 255, 0.05);
    scrollbar-width: thin;
}

.fullBuildOption {
    min-height: 142px;
    height: auto;
    flex: 0 0 auto;
    padding: 12px;
    align-items: center;
    flex-direction: row;
    gap: 12px;
    background: rgba(19, 23, 39, 0.96);
    overflow: hidden;
}

.fullBuildOption.imageOption {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr) 54px;
    align-items: center;
}

.fullBuildOption.imageOption > .optionVisual,
.fullBuildOption.imageOption > .fullBuildLoad,
.fullBuildOption.imageOption > .fullBuildCartButton {
    min-width: 0;
}

/* Compatibility for a picker that was already open before the new card renderer loaded. */
.fullBuildOption:not(.imageOption) {
    min-height: 258px;
    align-items: stretch;
    flex-direction: column;
    overflow: visible;
}

.fullBuildOption:not(.imageOption) .fullBuildLoad {
    width: 100%;
    min-height: 186px;
    flex: 0 0 auto;
    padding: 0;
    align-items: stretch;
    flex-direction: column;
    gap: 12px;
}

.fullBuildOption:not(.imageOption) > .cartAddButton {
    width: 154px;
    min-width: 154px;
    flex: 0 0 44px;
    align-self: flex-end;
    font-size: 13px;
}

.fullBuildOption:hover,
.fullBuildOption.selected {
    transform: none;
    background: rgba(25, 29, 48, 0.98);
}

.fullBuildOptionHeader {
    flex: 0 0 auto;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
}

.fullBuildMetrics {
    flex: 0 0 auto;
    display: flex;
    align-items: flex-end;
    flex-direction: column;
    gap: 5px;
    color: #9da1b0;
    font-size: 11px;
}

.fullBuildMetrics b { color: #ffadd3; font-size: 14px; }

.fullBuildParts {
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px 14px;
}

.fullBuildParts > span {
    min-width: 0;
    display: grid;
    grid-template-columns: 88px minmax(0, 1fr);
    gap: 7px;
    color: #c8cad4;
    font-size: 12px;
    line-height: 1.35;
}

.fullBuildParts b { color: #7e8393; }
.fullBuildParts span span {
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
    overflow-wrap: anywhere;
}

.fullBuildAction {
    flex: 0 0 auto;
    padding-top: 9px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--pink);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
}

.componentThumbnail {
    width: 100%;
    height: 190px;
    border-radius: 8px;
    background-color: #08090d;
    object-fit: contain;
    object-position: center;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.09);
}

.catalogIconThumbnail {
    width: 168px;
    height: 112px;
    flex: 0 0 168px;
    display: grid;
    place-items: center;
    color: rgba(255, 255, 255, 0.92);
    font-size: 18px;
    font-weight: 900;
    letter-spacing: 1.5px;
}

.generatedCatalogThumbnail {
    position: relative;
    width: 168px;
    height: 112px;
    flex: 0 0 168px;
    overflow: hidden;
    background: #000;
}

.generatedCatalogThumbnail img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}

.generatedProductImage {
    filter: hue-rotate(var(--product-hue, 0deg)) brightness(var(--product-brightness, 1));
    transform: translate(var(--product-x, 0), var(--product-y, 0)) scale(var(--product-scale, 1)) rotate(var(--product-rotation, 0deg));
    transform-origin: center;
}

.generatedCatalogThumbnail em {
    position: absolute;
    right: 6px;
    bottom: 5px;
    padding: 3px 5px;
    border: 1px solid rgba(255, 47, 146, 0.48);
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.8);
    color: #ff8bc2;
    font-size: 7px;
    font-style: normal;
    font-weight: 900;
    letter-spacing: 0.55px;
    line-height: 1;
    text-transform: uppercase;
}

.catalogIcon-cpu { background: radial-gradient(circle, #ff2f92 0 3%, transparent 4%), repeating-linear-gradient(90deg, transparent 0 12px, rgba(255,255,255,.09) 13px 14px), linear-gradient(135deg, #341129, #090b14 68%); }
.catalogIcon-gpu { background: radial-gradient(circle at 30% 50%, #090b14 0 20%, #ff2f92 21% 23%, transparent 24%), radial-gradient(circle at 70% 50%, #090b14 0 20%, #8b3dff 21% 23%, transparent 24%), linear-gradient(135deg, #171c2c, #070911); }
.catalogIcon-ram { background: repeating-linear-gradient(90deg, #ff2f92 0 6px, transparent 7px 17px), linear-gradient(180deg, #2b1630, #080a12); }
.catalogIcon-motherboard { background: linear-gradient(90deg, transparent 48%, rgba(255,47,146,.38) 49% 51%, transparent 52%), linear-gradient(0deg, transparent 48%, rgba(139,61,255,.36) 49% 51%, transparent 52%), radial-gradient(circle, #ff2f92 0 4%, transparent 5%), #0d1420; }
.catalogIcon-nvme { background: linear-gradient(90deg, #e8a8c8 0 3%, #282e42 3% 88%, #d5b35d 88% 100%); }
.catalogIcon-psu { background: radial-gradient(circle, #090b14 0 28%, #ff2f92 29% 31%, #191f30 32% 45%, transparent 46%), linear-gradient(135deg, #202638, #070911); }
.catalogIcon-cooler { background: radial-gradient(circle, #090b14 0 9%, #ff2f92 10% 12%, transparent 13%), repeating-conic-gradient(from 0deg, #283047 0 18deg, #0a0d17 19deg 38deg); }
.catalogIcon-case { background: linear-gradient(90deg, rgba(255,255,255,.08) 0 68%, rgba(255,47,146,.2) 69% 72%, transparent 73%), linear-gradient(135deg, #252a3b, #080a12); }
.catalogIcon-fullbuild { background: radial-gradient(circle at 70% 36%, #ff2f92 0 2%, transparent 3%), linear-gradient(90deg, #161b2b 0 72%, #8b3dff 73% 76%, #090b13 77%); }

.spriteThumbnail {
    display: block;
    width: 168px;
    flex: 0 0 168px;
    height: auto;
    aspect-ratio: 6 / 5;
    background-repeat: no-repeat;
    background-size: 500% 400%;
}

.optionVisual {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 10px;
}

.zoomButton {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    background: rgba(5, 7, 16, 0.82);
    color: white;
    cursor: zoom-in;
    display: grid;
    place-items: center;
    transition: 0.2s ease;
}

.zoomButton:hover {
    border-color: var(--pink);
    background: rgba(255, 47, 146, 0.18);
    box-shadow: 0 0 17px rgba(255, 47, 146, 0.2);
}

.zoomGlass {
    position: relative;
    width: 18px;
    height: 18px;
    border: 2px solid currentColor;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 14px;
    line-height: 1;
}

.zoomGlass::after {
    content: "";
    position: absolute;
    right: -7px;
    bottom: -5px;
    width: 8px;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    transform: rotate(45deg);
}

.pickerChoice {
    min-width: 0;
    min-height: 106px;
    flex: 1;
    padding: 12px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 12px;
    text-align: left;
}

.pickerChoice:hover { background: rgba(255, 255, 255, 0.04); }

.pickerOption:not(.imageOption) .pickerChoice {
    min-height: 54px;
    padding: 0;
}

.pickerOptionActions {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 7px;
}

.cartAddButton {
    min-width: 48px;
    height: 39px;
    padding: 0 10px;
    border: 1px solid rgba(255, 47, 146, 0.42);
    border-radius: 9px;
    background: rgba(255, 47, 146, 0.13);
    color: white;
    cursor: pointer;
    font-size: 16px;
    font-weight: 800;
    transition: 0.2s ease;
}

.cartAddButton:hover {
    border-color: var(--pink);
    background: rgba(255, 47, 146, 0.28);
    box-shadow: 0 0 18px rgba(255, 47, 146, 0.18);
}

.retailerAvailability {
    color: #8fdac0 !important;
    border-color: rgba(79, 234, 178, 0.2) !important;
}

.fullBuildLoad {
    width: auto;
    min-width: 0;
    min-height: 106px;
    flex: 1 1 auto;
    padding: 12px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: inherit;
    cursor: pointer;
    display: flex;
    align-items: center;
    text-align: left;
}

.fullBuildOption > .cartAddButton {
    width: 54px;
    min-width: 54px;
    flex: 0 0 54px;
    align-self: center;
}

.fullBuildCartButton {
    height: 44px;
    padding: 0 8px;
    font-size: 16px;
}

.fullBuildPartSummary {
    max-width: 100%;
    overflow: hidden;
    color: #858a9a;
    font-size: 10px;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.imageOption.selected .pickerChoice::after {
    content: "\2713";
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    border-radius: 50%;
    background: var(--pink);
    display: grid;
    place-items: center;
    font-weight: 800;
}

.imagePreviewBackdrop {
    position: fixed;
    inset: 0;
    z-index: 200;
    padding: 24px;
    background: rgba(1, 2, 8, 0.88);
    backdrop-filter: blur(13px);
    display: grid;
    place-items: center;
}

.imagePreviewBackdrop[hidden] { display: none; }

.imagePreview {
    position: relative;
    width: min(920px, 94vw);
    max-height: 94vh;
    padding: 26px;
    border: 1px solid rgba(255, 47, 146, 0.46);
    border-radius: 18px;
    background: linear-gradient(160deg, #111522, #050710);
    box-shadow: 0 24px 90px rgba(0, 0, 0, 0.65), 0 0 38px rgba(255, 47, 146, 0.16);
}

.imagePreviewClose {
    position: absolute;
    z-index: 2;
    top: 14px;
    right: 14px;
    width: 44px;
    height: 44px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    background: rgba(3, 5, 12, 0.84);
    color: white;
    cursor: pointer;
    font-size: 30px;
    line-height: 1;
}

.imagePreviewClose:hover { border-color: var(--pink); color: var(--pink); }

.imagePreviewVisual {
    width: 100%;
    max-height: calc(94vh - 110px);
    aspect-ratio: 6 / 5;
    border-radius: 12px;
    overflow: hidden;
    background-color: #08090d;
}

.imagePreviewVisual.spritePreview {
    background-repeat: no-repeat;
    background-size: 500% 400%;
}

.imagePreviewVisual img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.imagePreview h3 {
    margin-top: 14px;
    text-align: center;
    font-size: 19px;
}

.pickerEmpty {
    margin: auto;
    color: #9da1b0;
    text-align: center;
}

.pickerFooter {
    margin-top: 15px;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.09);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    color: #747989;
    font-size: 12px;
}

.pickerClear {
    padding: 9px 14px;
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 8px;
    background: transparent;
    color: #c9cbd3;
    cursor: pointer;
}

.panelBackdrop {
    position: fixed;
    inset: 0;
    z-index: 300;
    padding: 18px;
    display: flex;
    justify-content: flex-end;
    background: rgba(2, 4, 11, 0.72);
    backdrop-filter: blur(10px);
}

.panelBackdrop[hidden] { display: none; }

.sidePanel {
    width: min(520px, 100%);
    height: 100%;
    padding: 24px;
    border: 1px solid rgba(255, 47, 146, 0.38);
    border-radius: 18px;
    background: linear-gradient(165deg, rgba(17, 20, 35, 0.99), rgba(5, 7, 16, 0.99));
    box-shadow: -22px 0 70px rgba(0, 0, 0, 0.55);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.widePanel { width: min(780px, 100%); }

.currencyBackdrop {
    align-items: center;
    justify-content: center;
}

.currencyPanel {
    width: min(520px, 100%);
    padding: 26px;
    border: 1px solid rgba(255, 47, 146, 0.4);
    border-radius: 18px;
    background: linear-gradient(165deg, rgba(17, 20, 35, 0.99), rgba(5, 7, 16, 0.99));
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.58), 0 0 35px rgba(255, 47, 146, 0.12);
}

.currencyAmountLabel,
.currencySelectors label {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.currencyAmountLabel { margin-top: 20px; }

.currencyAmountLabel > span,
.currencySelectors label > span {
    color: #9296a6;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.7px;
    text-transform: uppercase;
}

.currencyAmountLabel input,
.currencySelectors select {
    width: 100%;
    height: 46px;
    padding: 0 13px;
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 10px;
    outline: none;
    background: #080b16;
    color: white;
    font-size: 14px;
}

.currencyAmountLabel input:focus,
.currencySelectors select:focus { border-color: var(--pink); }

.currencySelectors {
    margin-top: 13px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 44px minmax(0, 1fr);
    align-items: end;
    gap: 9px;
}

.currencySwap {
    width: 44px;
    height: 46px;
    border: 1px solid rgba(255, 47, 146, 0.4);
    border-radius: 10px;
    background: rgba(255, 47, 146, 0.13);
    color: white;
    cursor: pointer;
    font-size: 22px;
}

.currencyResult {
    margin-top: 18px;
    padding: 18px;
    border: 1px solid rgba(255, 47, 146, 0.28);
    border-radius: 12px;
    background: linear-gradient(110deg, rgba(255, 47, 146, 0.14), rgba(139, 61, 255, 0.1));
    color: white;
    font-size: 22px;
    font-weight: 800;
    line-height: 1.3;
}

.currencyStatus {
    margin-top: 10px;
    color: #9296a6;
    font-size: 11px;
    line-height: 1.45;
}

.sidePanelHeader {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
}

.sidePanelHeader span {
    color: var(--pink);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.4px;
}

.sidePanelHeader h2 { margin-top: 4px; font-size: 28px; }

.panelClose {
    width: 38px;
    height: 38px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.05);
    color: white;
    cursor: pointer;
    font-size: 25px;
}

.panelIntro {
    margin-top: 12px;
    color: #979baa;
    font-size: 12px;
    line-height: 1.5;
}

.panelList {
    min-height: 0;
    margin-top: 16px;
    padding-right: 5px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow-y: auto;
}

.panelEmpty {
    margin: auto;
    padding: 30px;
    color: #858999;
    text-align: center;
}

.cartItem,
.savedBuildCard {
    padding: 14px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    background: rgba(18, 22, 38, 0.82);
}

.cartItemHeader,
.savedBuildHeader {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.cartItemHeader small,
.savedBuildHeader small { color: #7f8494; text-transform: uppercase; }
.cartItemHeader strong,
.savedBuildHeader strong { display: block; margin-top: 4px; font-size: 14px; }

.removeButton {
    border: 0;
    background: transparent;
    color: #ff829f;
    cursor: pointer;
    font-size: 18px;
}

.retailerOffers {
    margin-top: 11px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
}

.retailerOffers a {
    padding: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: #d7d9e2;
    text-decoration: none;
    font-size: 10px;
    text-align: center;
}

.retailerOffers a:hover { border-color: var(--pink); color: #ffadd3; }
.retailerOffers a.unavailable { opacity: 0.62; }
.retailerOffers b { display: block; margin-top: 3px; }

.cartSummary {
    margin-top: 13px;
    padding: 13px;
    border: 1px solid rgba(255, 47, 146, 0.2);
    border-radius: 10px;
    background: rgba(255, 47, 146, 0.08);
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: 12px;
}

.panelSecondary {
    margin-top: 10px;
    padding: 10px 14px;
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 9px;
    background: transparent;
    color: #c9cbd3;
    cursor: pointer;
}

.savedParts {
    margin-top: 10px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5px 10px;
    color: #a8abba;
    font-size: 10px;
}

.savedParts b { color: #7e8393; }

.savedBuildActions {
    margin-top: 12px;
    display: flex;
    gap: 7px;
}

.savedBuildActions button {
    padding: 8px 11px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.05);
    color: white;
    cursor: pointer;
    font-size: 11px;
}

.savedBuildActions button:hover { border-color: var(--pink); }

.toast {
    position: fixed;
    z-index: 500;
    right: 28px;
    bottom: 28px;
    max-width: 340px;
    padding: 13px 17px;
    border: 1px solid rgba(255, 47, 146, 0.45);
    border-radius: 10px;
    background: rgba(13, 16, 29, 0.96);
    box-shadow: 0 15px 45px rgba(0, 0, 0, 0.45);
    color: white;
    font-size: 13px;
}

.toast[hidden] { display: none; }

@media (max-width: 900px) {
    .pickerBackdrop { padding: 10px; }
    .componentPicker { width: 100%; min-width: 0; }
    .homeFeatureGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
    .compareSearchBox,
    .compareSelectCard > select { width: 100%; }

    .homeContent > h2 { letter-spacing: -1.5px; }
    .homeFeatureGrid { grid-template-columns: 1fr; }
    .homeActions { flex-direction: column; }
    .homeActions button { width: 100%; }
    .pickerGrid { grid-template-columns: 1fr; }
    .pickerGrid.withImages .pickerOption { align-items: stretch; }
    .spriteThumbnail { width: 112px; flex-basis: 112px; }
    .zoomButton { width: 38px; height: 38px; flex-basis: 38px; }
    .pickerChoice { min-height: 92px; padding: 8px; }
    .imagePreviewBackdrop { padding: 10px; }
    .imagePreview { padding: 14px; }
    .buildRow { grid-template-columns: 65px minmax(0, 1fr); }
    .comparisonDetails { grid-template-columns: 1fr; }
    .comparisonResult header { align-items: flex-start; flex-direction: column; }
    .fullBuildOptionHeader { flex-direction: column; gap: 8px; }
    .fullBuildMetrics { align-items: flex-start; }
    .fullBuildParts { grid-template-columns: 1fr; }
    .fullBuildFolderList { height: min(50vh, 440px); min-height: 260px; padding: 12px; gap: 14px; }
    .fullBuildFolder > summary { padding: 13px; }
    .fullBuildOption { min-height: 196px; padding: 10px; flex-wrap: wrap; }
    .fullBuildOption.imageOption { grid-template-columns: 160px minmax(0, 1fr); }
    .fullBuildOption.imageOption > .fullBuildCartButton { grid-column: 1 / -1; }
    .fullBuildOption .generatedCatalogThumbnail { width: 112px; height: 94px; flex-basis: 112px; }
    .fullBuildLoad { min-height: 94px; padding: 8px; }
    .fullBuildOption > .cartAddButton { width: 100%; flex: 1 0 100%; }
    .fullBuildOption:not(.imageOption) { min-height: 390px; }
    .retailerOffers { grid-template-columns: 1fr; }
    .savedParts { grid-template-columns: 1fr; }
    .builderSummary { grid-template-columns: 1fr; }
    .builderTotals { grid-template-columns: 1fr; }
    .builderActions { grid-template-columns: 1fr; }
}

@media (max-height: 760px) {
    .sidebar { padding-top: 16px; padding-bottom: 16px; }
    .logo { margin-bottom: 17px; }
    .componentList { gap: 6px; }
    .component { min-height: 46px; padding-top: 7px; padding-bottom: 7px; }
    .fullBuildComponent { margin-top: 20px; }
    .center { padding-top: 10px; padding-bottom: 10px; }
    .sphere { width: 160px; height: 160px; }
    #percent { font-size: 43px; }
    .sphereInner span { margin-top: 7px; font-size: 9px; }
    .benchmarkStatus { margin-top: 10px; }
    .benchmarkStatus h3 { font-size: 18px; }
    .benchmarkStatus p { margin-top: 4px; font-size: 13px; }
    .buildsComparison { margin-top: 10px; gap: 6px; }
    .benchmarkButton { margin-bottom: 10px; padding-top: 10px; padding-bottom: 10px; }
    .stripItem { min-height: 43px; }
    .stripCheck { width: 14px; height: 14px; font-size: 9px; }
}

@media (max-width: 850px) {
    body { overflow-x: hidden; overflow-y: auto; }
    .sidebar { width: 220px; flex-basis: 220px; padding: 22px 16px; }
    .logo { font-size: 22px; }
    .menu { gap: 16px; }
    .menu button { font-size: 14px; }
    .componentStrip { grid-template-columns: repeat(4, minmax(90px, 1fr)); }
    .builderSummary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .compareCategories { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
    .builderSummary { grid-template-columns: 1fr; }
    .compareSelectors { grid-template-columns: 1fr; }
    .compareVersus { min-height: 34px; }
    .compareWinnerGrid { grid-template-columns: 1fr; }
    .compareMetricRow { grid-template-columns: 1fr; }
}

/* Mobile application shell */
.srOnly{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.mobileHeader,.mobileBottomNav,.mobileComponentChooser,.mobileMoreBackdrop{display:none}
.mobileMoreBackdrop[hidden]{display:none}

@media (max-width:620px){
:root{--mobile-nav-height:68px}
html{background:#050711}
body{width:100%;min-width:0;min-height:100dvh;display:block;overflow-x:hidden;padding-bottom:calc(var(--mobile-nav-height) + env(safe-area-inset-bottom))}
body.pickerOpen,body.mobileMenuOpen,body.dialogOpen{overflow:hidden}
body::before{background:radial-gradient(circle at 50% 22%,rgba(255,47,146,.09),transparent 38%),linear-gradient(180deg,rgba(3,5,12,.55),rgba(3,5,12,.88))}
.backgroundLayer{inset:0;background-position:60% center}
.sidebar,.topBar{display:none}
.main{width:100%;min-width:0;min-height:calc(100dvh - var(--mobile-nav-height))}
.mobileHeader{position:sticky;z-index:60;top:0;width:100%;min-height:60px;padding:8px 12px;display:flex;align-items:center;justify-content:space-between;gap:12px;border-bottom:1px solid rgba(255,255,255,.09);background:rgba(5,7,16,.92);backdrop-filter:blur(16px)}
.mobileLogo{color:#fff;text-decoration:none;font-size:17px;font-weight:900;letter-spacing:-.45px}.mobileLogo span{color:var(--pink)}
.mobileHeaderActions{display:flex;gap:8px}.mobileHeaderButton{position:relative;width:44px;height:44px;border:1px solid rgba(255,255,255,.12);border-radius:11px;background:rgba(255,255,255,.05);color:#fff;font-size:19px}.mobileCartButton{border-color:rgba(255,47,146,.38)}
.mobileCartButton b{position:absolute;top:-5px;right:-5px;min-width:20px;height:20px;padding:0 5px;border-radius:99px;background:var(--pink);display:grid;place-items:center;font-size:10px}
.center{width:100%;min-width:0;padding:12px;align-items:stretch;justify-content:flex-start}.workspaceView{width:100%;min-width:0;flex:none;justify-content:flex-start}
.homeView{padding:22px 0 28px}.homeEyebrow{font-size:10px}.homeContent>h2{margin-top:8px;font-size:clamp(38px,14vw,58px);letter-spacing:-2px}.homeLead{max-width:32ch;margin:12px auto 0;font-size:15px}.homeActions{margin-top:22px;gap:10px}.homeActions button{min-height:48px}.homeFeatureGrid{margin-top:28px;gap:10px}.homeFeatureGrid article{min-height:0;padding:16px}.homeFeatureGrid article>strong{font-size:16px}.homeFeatureGrid article>p{font-size:12px}
.mobileBottomNav{position:fixed;z-index:150;left:0;right:0;bottom:0;min-height:calc(var(--mobile-nav-height) + env(safe-area-inset-bottom));padding:6px 8px calc(6px + env(safe-area-inset-bottom));display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:3px;border-top:1px solid rgba(255,255,255,.1);background:rgba(5,7,15,.96);backdrop-filter:blur(18px)}
.mobileBottomNav button{min-width:0;min-height:52px;border:0;border-radius:11px;background:transparent;color:#858a9a;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px}.mobileBottomNav button>span{font-size:19px;line-height:1}.mobileBottomNav button>small{font-size:10px;font-weight:800}.mobileBottomNav button.active{background:rgba(255,47,146,.13);color:#ff8fc2}
.mobileMoreBackdrop{position:fixed;z-index:400;inset:0;padding:12px;display:flex;align-items:flex-end;background:rgba(1,2,8,.78);backdrop-filter:blur(10px)}.mobileMorePanel{width:100%;padding:18px 16px calc(18px + env(safe-area-inset-bottom));border:1px solid rgba(255,47,146,.35);border-radius:20px;background:linear-gradient(165deg,#121522,#060811);box-shadow:0 -20px 60px rgba(0,0,0,.5)}
.mobileMorePanel>header{display:flex;align-items:flex-start;justify-content:space-between}.mobileMorePanel>header span{color:var(--pink);font-size:10px;font-weight:900;letter-spacing:1.2px}.mobileMorePanel>header h2{margin-top:3px;font-size:26px}#mobileMoreClose{width:44px;height:44px;border:1px solid rgba(255,255,255,.13);border-radius:11px;background:rgba(255,255,255,.05);color:#fff;font-size:26px}.mobileMoreActions{margin-top:16px;display:grid;gap:9px}.mobileMoreActions button{min-height:64px;padding:10px 12px;border:1px solid rgba(255,255,255,.1);border-radius:12px;background:rgba(255,255,255,.04);color:#fff;display:grid;grid-template-columns:38px 1fr;grid-template-rows:auto auto;column-gap:10px;text-align:left}.mobileMoreActions button>span{grid-row:1/3;align-self:center;color:var(--pink);font-size:22px;text-align:center}.mobileMoreActions button>b{font-size:14px}.mobileMoreActions button>small{color:#8f93a2;font-size:12px}
.builderView{padding:18px 0 24px}.builderHero h2{font-size:clamp(30px,10vw,38px)}.builderHero p{max-width:36ch;font-size:13px}.builderBuildSwitch{position:sticky;z-index:15;top:68px;width:100%;margin-top:18px;background:rgba(5,8,17,.94);backdrop-filter:blur(12px)}.builderBuildSwitch button{min-width:0;min-height:44px;flex:1}
.mobileComponentChooser{width:100%;margin-top:12px;display:block;border:1px solid rgba(255,47,146,.3);border-radius:12px;background:rgba(255,47,146,.09);overflow:hidden}.mobileComponentChooser>summary{min-height:48px;padding:0 14px;display:flex;align-items:center;justify-content:space-between;color:#ffadd3;cursor:pointer;font-size:13px;font-weight:900;list-style:none}.mobileComponentChooser>summary::-webkit-details-marker{display:none}.mobileComponentChooser>summary::after{content:"+";font-size:20px}.mobileComponentChooser[open]>summary::after{content:"−"}.mobileComponentGrid{padding:0 10px 10px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}.mobileComponentGrid button{min-width:0;min-height:44px;padding:8px;border:1px solid rgba(255,255,255,.1);border-radius:9px;background:rgba(7,10,20,.8);color:#d9dae2;font-size:11px;font-weight:800}.mobileComponentGrid button:last-child{grid-column:1/-1;border-color:rgba(255,47,146,.32)}
.builderSummary{margin-top:12px;gap:8px}.builderTotals{padding:13px;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.builderTotals span:first-child{grid-column:1/-1}.builderTotals small{font-size:10px}.builderPart{min-height:88px;padding:13px;gap:5px}.builderPart small{font-size:10px}.builderPart strong{font-size:14px;overflow-wrap:anywhere}.builderPart span{font-size:12px;line-height:1.4}.builderActions{margin-top:12px;gap:8px}.builderActions button{min-height:48px}
.benchmarkView{padding:16px 0 28px;justify-content:flex-start}.benchmarkStatus{order:1;margin-top:0}.benchmarkStatus h3{font-size:19px}.benchmarkStatus p{margin-top:5px;font-size:13px;line-height:1.45}.sphere{order:2;width:clamp(150px,48vw,200px);height:clamp(150px,48vw,200px);margin-top:16px}#percent{font-size:clamp(42px,14vw,56px)}.sphereInner span{max-width:16ch;margin-top:8px;font-size:9px;text-align:center}.benchmarkButton{order:3;width:100%;min-width:0;min-height:48px;margin:16px 0 0;padding:12px 18px;font-size:14px}.benchmarkComponentChooser{order:4}.buildsComparison{order:5;width:100%;margin-top:12px;gap:10px}.buildRow{width:100%;padding:10px;grid-template-columns:48px minmax(0,1fr);align-items:start;gap:8px;border:1px solid rgba(255,255,255,.09);border-radius:12px;background:rgba(7,10,20,.78)}.buildIdentity{padding-top:2px}.buildSelector{width:44px;height:44px}.componentStrip{margin-top:7px;padding-bottom:5px;display:flex;gap:7px;overflow-x:auto;scroll-snap-type:x proximity;overscroll-behavior-inline:contain;scrollbar-width:thin}.stripItem{flex:0 0 116px;min-height:68px;padding:7px 5px;scroll-snap-align:start}.stripItem strong,.stripItem small{font-size:10px}.comparisonResult{order:6;width:100%;margin-top:12px}.resultItem{grid-template-columns:70px minmax(0,1fr) auto;align-items:start}.resultItem span{white-space:normal;overflow-wrap:anywhere}
.compareView{padding:18px 0 30px;border-radius:12px;background:rgba(3,4,9,.88)}.compareHero{padding:0 12px}.compareHero h2{font-size:clamp(29px,10vw,36px)}.compareHero p{font-size:12px}.compareCategories{width:100%;margin-top:16px;padding:0 12px 5px;display:flex;gap:7px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}.compareCategories::-webkit-scrollbar{display:none}.compareCategories button{flex:0 0 auto;min-height:44px;padding:8px 14px;scroll-snap-align:start;font-size:11px}.compareFilters{width:calc(100% - 24px);padding:10px}.compareFilters label{min-width:100%;flex-basis:100%}.compareFilters label>span{font-size:10px}.compareFilters select{height:44px;font-size:16px}.compareSelectors{width:calc(100% - 24px);gap:8px}.compareSelectCard{padding:14px}.compareSelectCard>label{font-size:10px}.compareSearchBox,.compareSelectCard>select{width:100%;height:46px}.compareSearchBox{padding-right:46px}.compareSearchBox input,.compareSelectCard>select{font-size:16px}.compareProductPreview{min-height:0}.compareProductPreview>small,.comparePreviewBadges b{font-size:10px}.compareProductPreview>strong{font-size:15px;overflow-wrap:anywhere}.compareProductPreview>span{font-size:12px}.compareCartButton{min-height:46px}.compareVersus{min-height:40px}.compareNowButton{width:calc(100% - 24px);min-height:48px}.quickCompareResult{width:calc(100% - 24px);padding:14px}.quickCompareResult h3{font-size:20px}.compareWinnerCard small{font-size:10px}.compareWinnerCard span{font-size:12px}.compareMetricRow{padding:12px;gap:9px}.compareMetricRow>strong{font-size:11px}.metricSide b{font-size:12px;overflow-wrap:anywhere}
.pickerBackdrop{padding:0;align-items:stretch}.componentPicker{width:100%;min-width:0;height:100dvh;padding:0;border:0;border-radius:0}.pickerHeader{position:relative;z-index:3;padding:14px 14px 10px;background:rgba(13,16,29,.98)}.pickerEyebrow{font-size:10px}.pickerHeader h2{font-size:22px}.pickerClose{width:44px;height:44px;flex:0 0 44px}.fullBuildTarget{margin:0;padding:10px 14px;border-width:1px 0;border-radius:0;flex-wrap:wrap}.fullBuildTarget>span{flex:1 0 100%}.fullBuildTarget button{min-height:44px;flex:1}.pickerFilters{margin:0;padding:10px 14px;border-width:0 0 1px;border-radius:0;flex-wrap:nowrap;overflow-x:auto}.pickerFilters label{min-width:150px;flex:0 0 150px}.pickerFilters label>span{font-size:10px}.pickerFilters select{height:44px;font-size:16px}.pickerSearchWrap{margin:0;padding:10px 14px;background:rgba(8,11,22,.98)}.pickerSearchWrap span{margin-bottom:5px;font-size:10px}.pickerSearchWrap input{height:46px;font-size:16px}.pickerGrid{margin-top:0;padding:10px 10px 12px}.pickerOption{min-height:76px;padding:10px}.pickerOptionCopy strong{font-size:13px;overflow-wrap:anywhere}.pickerOptionCopy small,.pickerOptionMeta>span{font-size:10px}.pickerFooter{padding:10px 14px calc(10px + env(safe-area-inset-bottom));background:#090c18}.pickerClear{min-height:44px}.pickerFooter span{display:none}.pickerGrid.fullBuildGrid{padding:10px}.fullBuildFolderList{min-height:0;height:auto}.fullBuildOption.imageOption{grid-template-columns:minmax(0,1fr)}.fullBuildOption.imageOption>.fullBuildCartButton{grid-column:1}.fullBuildOption:not(.imageOption){min-height:0}.fullBuildOption .generatedCatalogThumbnail{width:100%;height:150px}.fullBuildLoad{min-height:84px}
.panelBackdrop,.currencyBackdrop{padding:0;align-items:flex-end}.sidePanel,.widePanel,.currencyPanel{width:100%;max-width:none;height:min(92dvh,840px);padding:16px 14px calc(16px + env(safe-area-inset-bottom));border-width:1px 0 0;border-radius:20px 20px 0 0}.currencyPanel{height:auto;max-height:92dvh;overflow-y:auto}.sidePanelHeader{position:sticky;z-index:2;top:0;background:inherit}.sidePanelHeader h2{font-size:24px}.panelClose{width:44px;height:44px}.panelIntro{font-size:12px}.retailerOffers{grid-template-columns:1fr}.retailerOffers a{min-height:44px;font-size:12px}.removeButton{min-width:44px;min-height:44px}.cartSummary{font-size:12px}.panelSecondary{min-height:44px}.savedParts{grid-template-columns:1fr;font-size:11px}.savedBuildActions{flex-direction:column}.savedBuildActions button{min-height:44px}.currencyAmountLabel input,.currencySelectors select{font-size:16px}.currencySelectors{grid-template-columns:1fr}.currencySwap{justify-self:center;transform:rotate(90deg)}.currencyResult{font-size:19px}.currencyStatus{font-size:12px}
.benchmarkConfirmBackdrop{padding:0;align-items:end}.benchmarkConfirm{width:100%;padding:20px 16px calc(20px + env(safe-area-inset-bottom));border-width:1px 0 0;border-radius:20px 20px 0 0}.benchmarkConfirm h2{font-size:22px}.benchmarkConfirm p{font-size:13px}.confirmActions{grid-template-columns:1fr}.confirmActions button{min-height:48px}.imagePreviewBackdrop{padding:0}.imagePreview{width:100%;max-height:100dvh;padding:14px;border-radius:0}.imagePreviewClose{width:44px;height:44px}.toast{left:12px;right:12px;bottom:calc(var(--mobile-nav-height) + env(safe-area-inset-bottom) + 10px);max-width:none;font-size:13px;text-align:center}
button,summary,a{-webkit-tap-highlight-color:transparent}button:focus-visible,summary:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid #ff8fc2;outline-offset:2px}
}
@media (max-width:380px){.mobileLogo{max-width:150px;font-size:15px}.center{padding:10px}.builderTotals{grid-template-columns:1fr}.builderTotals span:first-child{grid-column:auto}.mobileComponentGrid{grid-template-columns:1fr}.mobileComponentGrid button:last-child{grid-column:auto}.buildRow{grid-template-columns:44px minmax(0,1fr);padding:8px}.stripItem{flex-basis:106px}.resultItem{grid-template-columns:1fr}.resultItem small{grid-column:1}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}