/* =========================================================
SECTION 1 - SIDEBAR
========================================================= */

.sidebar{

padding:40px;

width:100%;
max-width:1500px;

margin:auto;

}

/* =========================================================
SECTION 2 - SELECTOR LAYOUT
========================================================= */

.selector-row{

display:grid;

grid-template-columns:1fr 1fr;

gap:24px;

width:100%;

align-items:start;

margin-bottom:24px;

}

.selector-card{

background:rgba(255,255,255,.04);

border:1px solid rgba(255,255,255,.08);

border-radius:28px;

padding:24px;

backdrop-filter:blur(18px);

width:100%;

}

.control-card{

width:100%;

background:rgba(255,255,255,.04);

border:1px solid rgba(255,255,255,.08);

border-radius:28px;

padding:24px;

backdrop-filter:blur(18px);

display:flex;

flex-direction:column;

gap:20px;

}

/* =========================================================
SECTION 3 - LABELS
========================================================= */

.label{

font-size:14px;

font-weight:bold;

margin-bottom:8px;

display:block;

color:#cbd5e1;

}

/* =========================================================
SECTION 4 - MANUFACTURER WHEEL
========================================================= */

.manufacturer-wheel{

height:520px;

overflow-y:auto;

display:flex;

flex-direction:column;

gap:10px;

padding-right:10px;

scrollbar-width:none;

mask-image:
linear-gradient(
to bottom,
transparent,
black 12%,
black 88%,
transparent
);

-webkit-mask-image:
linear-gradient(
to bottom,
transparent,
black 12%,
black 88%,
transparent
);

}

.manufacturer-wheel::-webkit-scrollbar{

display:none;

}

.manufacturer-btn{

padding:16px 22px;

border:none;

border-radius:18px;

background:#0f172a;

color:white;

font-weight:900;

font-size:18px;

cursor:pointer;

transition:.25s;

border:1px solid rgba(255,255,255,.08);

opacity:.45;

transform:scale(.92);

}

.manufacturer-btn:hover{

opacity:1;

transform:scale(1);

}

.manufacturer-btn.active{

background:
linear-gradient(
90deg,
var(--pink),
var(--cyan)
);

opacity:1;

transform:scale(1.08);

box-shadow:
0 0 24px
rgba(0,212,255,.35);

}

/* =========================================================
SECTION 5 - BUILD PILLS
========================================================= */

.build-pill-row{

display:flex;

flex-wrap:wrap;

gap:12px;

justify-content:center;

}

.build-pill{

padding:14px 22px;

border:none;

border-radius:999px;

background:#0f172a;

color:white;

font-weight:900;

cursor:pointer;

transition:.25s;

border:1px solid rgba(255,255,255,.08);

}

.build-pill.active{

background:
linear-gradient(
90deg,
var(--pink),
var(--cyan)
);

}

/* =========================================================
SECTION 6 - MEASUREMENT
========================================================= */

.metric-toggle{

display:flex;

gap:10px;

}

.metric-btn{

flex:1;

padding:14px;

border:none;

border-radius:16px;

background:#0f172a;

color:white;

font-weight:bold;

cursor:pointer;

}

.metric-btn.active{

background:
linear-gradient(
90deg,
var(--pink),
var(--cyan)
);

}

/* =========================================================
SECTION 7 - BUTTON
========================================================= */

.button{

width:100%;

padding:18px;

border:none;

border-radius:18px;

background:
linear-gradient(
90deg,
var(--pink),
var(--cyan)
);

color:white;

font-weight:900;

font-size:18px;

cursor:pointer;

}

.button.loading{

opacity:.5;

cursor:not-allowed;

pointer-events:none;

filter:grayscale(100%);

}