.benchmark-shell { width: min(1240px, calc(100% - 48px)); margin: 0 auto; }
.benchmark-header { max-width: 1180px; margin: 0 auto; }
.benchmark-main { max-width: 1180px; margin: 0 auto; padding: 74px 0 110px; }
.builder-heading { display: flex; align-items: end; justify-content: space-between; gap: 50px; padding-bottom: 66px; }
.builder-heading h1 { max-width: 760px; font-size: clamp(48px, 6vw, 76px); }
.builder-heading > p { max-width: 360px; margin: 0 0 7px; color: var(--muted); font-size: 15px; line-height: 1.7; }

.builder-section { display: grid; grid-template-columns: 80px 1fr; padding: 58px 0 66px; border-top: 1px solid var(--line); }
.section-number { color: #58625a; font: 600 12px var(--font-display); letter-spacing: 1px; }
.section-content { min-width: 0; }
.section-title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin-bottom: 31px; }
.section-title-row > div > span { color: var(--accent); font-size: 10px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; }
.section-title-row h2 { margin-top: 8px; max-width: none; font-size: 27px; letter-spacing: -1px; text-align: left; }
.section-status { padding: 7px 11px; border: 1px solid var(--line); border-radius: 20px; color: #7b867d; font-size: 10px; }

.selector-grid { display: grid; gap: 16px; }
.hardware-grid { grid-template-columns: repeat(3, 1fr); }
.field { position: relative; min-width: 0; }
.field > label { display: flex; justify-content: space-between; margin: 0 2px 9px; color: #a6b0a8; font-size: 11px; font-weight: 600; }
.field > label span { color: #59635b; font-size: 9px; letter-spacing: 1px; }
.search-select { position: relative; }
.select-trigger { width: 100%; min-height: 78px; display: flex; align-items: center; gap: 13px; padding: 13px; border: 1px solid var(--line); border-radius: 9px; color: var(--text); background: rgba(18,25,20,.8); font: inherit; text-align: left; cursor: pointer; transition: border-color .2s, background .2s; }
.select-trigger:hover, .search-select.open .select-trigger { border-color: rgba(141,253,79,.38); background: #141d16; }
.select-trigger.selected { border-color: rgba(141,253,79,.26); }
.component-icon, .game-placeholder { width: 43px; height: 43px; flex: 0 0 43px; display: grid; place-items: center; border: 1px solid rgba(141,253,79,.18); border-radius: 7px; color: var(--accent); background: rgba(141,253,79,.055); font: 700 8px var(--font-display); letter-spacing: .5px; }
.gpu-icon { border-radius: 5px; }
.ram-icon { width: 43px; height: 25px; flex-basis: 43px; }
.ram-builder { min-height: 174px; padding: 13px; border: 1px solid var(--line); border-radius: 9px; background: rgba(18,25,20,.8); }
.ram-builder.complete { border-color: rgba(141,253,79,.26); }
.ram-builder-heading { min-height: 45px; display: flex; align-items: center; gap: 13px; }
.ram-builder-heading > span:last-child { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.ram-builder-heading small { color: #657067; font-size: 9px; font-weight: 600; letter-spacing: .6px; text-transform: uppercase; }
.ram-builder-heading strong { overflow: hidden; color: #9aa59d; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.ram-builder.complete .ram-builder-heading strong { color: var(--text); }
.ram-controls { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 11px; }
.ram-controls label { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.ram-controls label > span { color: #606a62; font-size: 8px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; }
.ram-controls select { width: 100%; height: 31px; padding: 0 7px; border: 1px solid var(--line); border-radius: 5px; outline: none; color: #b8c1ba; background: #0d130f; font: 9px var(--font-body); }
.ram-controls select:focus { border-color: rgba(141,253,79,.4); }
.ram-controls select:disabled { color: #4f5851; cursor: not-allowed; }
.trigger-copy { min-width: 0; display: flex; flex: 1; flex-direction: column; gap: 5px; }
.trigger-copy small { color: #657067; font-size: 9px; font-weight: 600; letter-spacing: .6px; text-transform: uppercase; }
.trigger-copy strong { overflow: hidden; color: #9aa59d; font-size: 12px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.selected .trigger-copy strong { color: var(--text); font-weight: 600; }
.chevron { margin-right: 3px; color: #68736a; font-size: 17px; transition: transform .2s; }
.search-select.open .chevron { transform: rotate(180deg); }
.select-popover { position: absolute; top: calc(100% + 7px); left: 0; z-index: 20; width: 100%; padding: 8px; border: 1px solid rgba(221,255,215,.14); border-radius: 9px; background: #111813; box-shadow: 0 20px 50px rgba(0,0,0,.5); }
.select-search { display: flex; align-items: center; gap: 8px; padding: 0 10px; border: 1px solid var(--line); border-radius: 6px; background: #0c110e; }
.select-search span { color: #687269; font-size: 18px; }
.select-search input { width: 100%; height: 39px; border: 0; outline: 0; color: var(--text); background: transparent; font: 12px var(--font-body); }
.select-search input::placeholder { color: #5f6961; }
.options { max-height: 235px; margin: 7px 0 0; padding: 0; overflow-y: auto; list-style: none; }
.options li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 10px; border-radius: 5px; color: #b7c0b9; font-size: 12px; cursor: pointer; }
.options li:hover, .options li.active { color: var(--text); background: rgba(141,253,79,.075); }
.options li small { color: #626d64; font-size: 9px; }
.options .no-results { color: #69736b; cursor: default; }
.options .no-results:hover { background: none; }

.game-picker-wrap { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(240px, .65fr); align-items: end; gap: 18px; }
.game-trigger { min-height: 85px; }
.game-placeholder { font-size: 17px; }
.library-note { min-height: 85px; display: flex; align-items: center; gap: 11px; padding: 14px 17px; border: 1px dashed rgba(225,255,222,.1); border-radius: 9px; }
.library-dot { width: 7px; height: 7px; flex: 0 0 7px; border-radius: 50%; background: #e9b84a; box-shadow: 0 0 13px rgba(233,184,74,.35); }
.library-note.connected .library-dot { background: var(--accent); box-shadow: 0 0 13px rgba(141,253,79,.4); }
.library-note.error .library-dot { background: #ef7b67; box-shadow: 0 0 13px rgba(239,123,103,.35); }
.library-note div { display: flex; flex-direction: column; gap: 3px; }
.library-note strong { color: #a7b0a9; font-size: 10px; }
.library-note p { margin: 0; color: #5f6961; font-size: 9px; line-height: 1.4; }

.settings-layout { display: grid; gap: 30px; }
fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
legend { margin-bottom: 11px; color: #a6b0a8; font-size: 11px; font-weight: 600; }
.segmented-control, .quality-options { display: grid; gap: 8px; }
.segmented-control { grid-template-columns: repeat(3, 1fr); }
.quality-options { grid-template-columns: repeat(6, 1fr); }
.upscaling-options { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.upscaling-options label > span { min-height: 63px; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 4px; border: 1px solid var(--line); border-radius: 7px; color: #89948b; background: rgba(18,25,20,.65); transition: border-color .2s, color .2s, background .2s; }
.upscaling-options strong { font-size: 12px; }
.upscaling-options small { color: #5d675f; font-size: 8px; }
.upscaling-options input:checked + span { border-color: rgba(141,253,79,.55); color: var(--text); background: rgba(141,253,79,.085); box-shadow: inset 0 0 0 1px rgba(141,253,79,.08); }
.upscaling-options input:disabled + span { opacity: .35; cursor: not-allowed; }
.setting-hint { margin: 9px 2px 0; color: #5f6961; font-size: 9px; }
.upscaling-quality-options { grid-template-columns: repeat(5, 1fr); }
fieldset label { cursor: pointer; }
fieldset input { position: absolute; opacity: 0; pointer-events: none; }
.segmented-control label > span, .quality-options label > span { min-height: 58px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: 7px; color: #89948b; background: rgba(18,25,20,.65); transition: border-color .2s, color .2s, background .2s; }
.segmented-control label > span { flex-direction: column; gap: 3px; }
.segmented-control strong { font-size: 13px; }
.segmented-control small { color: #5d675f; font-size: 8px; }
fieldset input:checked + span { border-color: rgba(141,253,79,.55); color: var(--text); background: rgba(141,253,79,.085); box-shadow: inset 0 0 0 1px rgba(141,253,79,.08); }
.quality-options span { padding: 8px; font-size: 10px; font-weight: 600; text-align: center; }
.ray-tracing-row { min-height: 80px; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 13px 15px; border: 1px solid var(--line); border-radius: 8px; background: rgba(18,25,20,.5); }
.ray-tracing-row > div:first-child { display: flex; align-items: center; gap: 12px; }
.rt-icon { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 6px; color: #6b756d; font: 700 10px var(--font-display); }
.ray-tracing-row > div:first-child > div { display: flex; flex-direction: column; gap: 4px; }
.ray-tracing-row strong { color: #a5afa7; font-size: 11px; }
.ray-tracing-row small { color: #5e6860; font-size: 9px; }
.rt-options { display: grid; grid-template-columns: repeat(4, 64px); gap: 6px; }
.rt-options:has(.path-tracing-option:not([hidden])) { grid-template-columns: repeat(5, minmax(58px, 1fr)); }
.rt-options span { min-height: 38px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 6px; color: #7c867e; font-size: 9px; font-weight: 600; }
.rt-fieldset:disabled { opacity: .55; }
.rt-fieldset:not(:disabled) .rt-icon { border-color: rgba(141,253,79,.3); color: var(--accent); }

.result-section { display: grid; grid-template-columns: 1fr 1.05fr; align-items: center; gap: 80px; margin-top: 8px; padding: 72px 72px; border: 1px solid rgba(141,253,79,.15); border-radius: 14px; background: radial-gradient(circle at 80% 30%, rgba(98,214,43,.1), transparent 42%), #101612; }
.result-copy h2 { margin: 0; font-size: 37px; text-align: left; }
.result-copy > p { max-width: 430px; margin: 17px 0 26px; color: var(--muted); font-size: 13px; line-height: 1.6; }
.result-button:disabled { color: #596159; background: #252c26; box-shadow: none; cursor: not-allowed; transform: none; }
.result-card { min-height: 270px; padding: 24px; border: 1px solid var(--line); border-radius: 11px; background: rgba(8,12,9,.66); }
.result-card.ready { border-color: rgba(141,253,79,.22); }
.result-card-header { display: flex; align-items: center; justify-content: space-between; color: #7d887f; font-size: 9px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; }
.data-badge { padding: 5px 8px; border-radius: 20px; color: #727d74; background: rgba(255,255,255,.04); }
.result-card.ready .data-badge { color: #e9b84a; background: rgba(233,184,74,.09); }
.fps-display { display: flex; align-items: end; gap: 14px; margin: 26px 0 22px; }
.fps-display > strong { color: #49514b; font: 600 72px/.8 var(--font-display); letter-spacing: -4px; }
.result-card.ready .fps-display > strong { color: var(--accent); }
.fps-display div { display: flex; flex-direction: column; gap: 4px; }
.fps-display span { color: #6a746c; font-size: 10px; font-weight: 700; letter-spacing: 1px; }
.fps-display small { color: #505951; font-size: 9px; }
.result-divider { height: 1px; background: var(--line); }
.result-summary { min-height: 70px; display: flex; align-items: center; gap: 11px; color: #606a62; }
.result-summary p { margin: 0; font-size: 10px; line-height: 1.5; }
.result-summary strong { color: #b6c0b8; }
.result-summary a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.empty-result-icon { width: 29px; height: 29px; display: grid; place-items: center; flex: 0 0 29px; border: 1px solid var(--line); border-radius: 50%; }
.benchmark-footer { max-width: 1180px; margin: 0 auto; }

@media (max-width: 900px) {
  .builder-heading { align-items: flex-start; flex-direction: column; gap: 20px; }
  .hardware-grid { grid-template-columns: 1fr; }
  .game-picker-wrap { grid-template-columns: 1fr; }
  .quality-options { grid-template-columns: repeat(3, 1fr); }
  .upscaling-quality-options { grid-template-columns: repeat(3, 1fr); }
  .result-section { grid-template-columns: 1fr; gap: 45px; padding: 54px; }
}

@media (max-width: 620px) {
  .benchmark-shell { width: min(100% - 30px, 1240px); }
  .benchmark-main { padding-top: 58px; }
  .builder-heading { padding-bottom: 48px; }
  .builder-heading h1 { font-size: clamp(42px, 13vw, 58px); }
  .builder-section { grid-template-columns: 1fr; gap: 14px; padding: 43px 0 50px; }
  .section-title-row { align-items: flex-start; flex-direction: column; }
  .section-status { align-self: flex-start; }
  .segmented-control { grid-template-columns: 1fr; }
  .quality-options { grid-template-columns: repeat(2, 1fr); }
  .upscaling-options { grid-template-columns: repeat(2, 1fr); }
  .upscaling-quality-options { grid-template-columns: repeat(2, 1fr); }
  .ray-tracing-row { align-items: flex-start; flex-direction: column; }
  .rt-options { width: 100%; grid-template-columns: repeat(4, 1fr); }
  .rt-options:has(.path-tracing-option:not([hidden])) { grid-template-columns: repeat(2, 1fr); }
  .result-section { padding: 38px 22px; }
  .result-copy h2 { font-size: 31px; }
  .fps-display > strong { font-size: 61px; }
  .benchmark-footer { grid-template-columns: 1fr auto; }
  .benchmark-footer p { display: none; }
}