/* Shared dark glass theme. Layout and behavior remain in the page styles. */
:root {
  color-scheme: dark;
  --paper: #090d1e;
  --white: #182139;
  --ink: #eef3ff;
  --muted: #d2d6e0;
  --line: rgba(180, 199, 255, .15);
  --green: #7776f8;
  --lime: #8cd5ff;
  --orange: #ffc49b;
  --soft: rgba(125, 145, 255, .08);
  --accent: #a7dfff;
  --lilac: #c8bdff;
  --quiet: #bdc5d5;
  --glass: linear-gradient(135deg, rgba(177, 190, 255, .085), rgba(87, 112, 185, .025)), rgba(17, 24, 47, .76);
  --glass-edge: inset 0 1px 0 rgba(227, 235, 255, .10), 0 18px 48px rgba(2, 5, 20, .22);
  font-family: var(--font-ui);
  background: var(--paper);
}
body {
  min-height: 100vh;
  isolation: isolate;
  background: radial-gradient(ellipse at 50% 0, #121831 0, transparent 65%);
}
body>main, body>.footer { position: relative; z-index: 1; }
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 45vw 55vh at 10% 15%, rgba(111, 63, 229, .36), transparent 80%),
    radial-gradient(ellipse 45vw 60vh at 92% 35%, rgba(38, 121, 228, .32), transparent 80%),
    radial-gradient(ellipse 35vw 35vh at 50% 96%, rgba(109, 76, 198, .12), transparent 80%);
  filter: blur(35px);
}
::selection { background: #514e99; color: #fff; }
button, a, input, select, summary { transition: background-color .18s, border-color .18s, color .18s, box-shadow .18s; }
button:focus-visible, a:focus-visible, select:focus-visible, summary:focus-visible,
input:focus-visible, .file-label:focus-within, .import-label:focus-within,
.part-price label:focus-within, .budget-card input:focus-visible,
.benchmark-panel input:focus-visible { outline: 2px solid #99dfff; outline-offset: 4px; }
input, select { color-scheme: dark; accent-color: #9e9aff; }
select option { background: #151d35; color: var(--ink); }
button:disabled { cursor: not-allowed; }

/* Glass surfaces use an opaque-enough base to remain readable without blur. */
.header, .upload-card, .guide-card, .spec-panel, .score-panel, .recommendation,
.compatibility, .benchmark-panel, .parts-panel, .build-checks, .budget-card,
.builder-benchmark, .circuit-card, .floating-note {
  background: var(--glass);
  border: 1px solid var(--line);
  box-shadow: var(--glass-edge);
  backdrop-filter: blur(22px) saturate(140%);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
}
.upload-card, .guide-card, .spec-panel, .score-panel, .recommendation,
.compatibility, .benchmark-panel, .parts-panel, .build-checks, .budget-card,
.builder-benchmark { border-radius: 20px; }
.header {
  width: calc(100% - 48px);
  max-width: 1248px;
  margin-top: 20px;
  height: 78px;
  padding: 0 25px;
  border-radius: 22px;
  position: relative;
  z-index: 2;
  background: linear-gradient(110deg, rgba(145, 126, 238, .08), rgba(107, 180, 244, .04)), rgba(17, 23, 44, .7);
}
.brand { color: #f2f5ff; letter-spacing: -1.3px; }
.brand-dot { color: #9edaff; }
.brand img { border-radius: 10px; box-shadow: 0 0 20px #9382ff21; }
.header nav { gap: 24px; }
.header nav a, .header nav button { color: var(--muted); }
.header nav a:hover, .header nav button:hover { color: #fff; }
.header nav .nav-active {
  color: #e4e9ff;
  background: linear-gradient(120deg, #9a86ff22, #75c6ff17);
  border: 1px solid #b3b9ff2b;
  border-radius: 11px;
  padding: 10px 13px;
  box-shadow: inset 0 1px 0 #d8deff0f;
}
.local-badge { background: #88c3ff0b; border-color: #a2c8ff22; color: #bfd9f2; }
.local-badge>span, .live-dot { background: #92dcff; box-shadow: 0 0 9px #8cd5ff88; }
.hero { padding-top: 66px; padding-bottom: 70px; }
h1 { font-weight: 650; letter-spacing: -2.8px; }
h1 span, .builder-intro h1 span {
  color: #a8c5ff;
  background: linear-gradient(105deg, #bbadff 5%, #99baff 52%, #92dfff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
h2, h3 { color: var(--ink); }
.eyebrow { color: #bfbcf6; }
.tiny-cross, .hero-points i { color: var(--accent); }
.hero-points { color: #c3cce2; }
.hero-copy>p, .builder-intro>div>p { color: var(--muted); }
.section-marker, .art-footnote { color: var(--quiet); }
.hero-art::before {
  content: "";
  position: absolute;
  inset: 8% 0;
  z-index: 0;
  border-radius: 50%;
  background: radial-gradient(ellipse at 30% 25%, #8c5bff80, transparent 65%), radial-gradient(ellipse at 75% 70%, #3fbaf96b, transparent 65%);
  filter: blur(40px);
}
.hero-art>* { z-index: 1; }
.art-grid { background-image: radial-gradient(#c2baff 1px, transparent 1px); opacity: .3; }
.art-orbit { border-color: #a59cf436; box-shadow: 0 0 40px #867bff06; }
.orbit-two { border-color: #90d8ff40; }
.circuit-card {
  background: linear-gradient(135deg, #e0c8ff24, #6d9ac817 55%, #9ae3ff12), rgba(23, 29, 61, .63);
  border-color: #c4c8ff47;
  border-radius: 24px;
  box-shadow: inset 0 1px 1px #ffffff40, inset 0 -1px 1px #b9cfff19, 0 28px 60px #02061560;
}
.circuit-head { color: #d1d9ff; }
.mini-chip { color: #b8d9ff; }
.art-score>span { color: #f0f6ff; text-shadow: 0 0 35px #9dbdff40; }
.art-score small, .art-caption, .art-bars div { color: #b4c1dd; }
.art-caption strong { color: #eef2ff; }
.art-score circle { stroke: #b4caff21; }
.art-score .meter { stroke: #a4c7ff; filter: drop-shadow(0 0 5px #8baaff50); }
.art-bars i { background: linear-gradient(to right, #b0a3ff var(--size), #a9c8ff26 var(--size)); }
.floating-note { background: linear-gradient(120deg, #accbff15, #c7c1ff0c), #1b2544d9; border-color: #bed4ff30; border-radius: 14px; }
.note-icon, .upload-symbol, .step-square, .guide-icon, .spec-icon {
  color: #bfcdff; border-color: #b4c5ff29; background: linear-gradient(135deg, #9a87ff1c, #80caff12);
}
.floating-note small { color: var(--muted); }
.use-option, .secondary {
  color: #dce6ff; background: #b0baff09; border-color: #a3b6ff30; border-radius: 10px;
  box-shadow: inset 0 1px 0 #d0deff0c;
}
.use-option:hover, .secondary:hover { background: #a2a8ff1b; border-color: #b4c5ff60; }
.use-option.selected { color: #f0edff; background: linear-gradient(110deg, #8872ff2c, #678ee821); border-color: #aaa3ff91; box-shadow: inset 0 1px 0 #c7c5ff29, 0 0 18px #7f66f812; }
.dropzone { background: radial-gradient(ellipse at 50% 0, #8c82ff0d, transparent 80%), #0b122642; border-color: #a7bdff54; border-radius: 14px; }
.dropzone.dragging { background: #6a65d530; border-color: #a4dcff; box-shadow: inset 0 0 40px #8ebfff0a; }
.button { border-radius: 10px; }
.primary { color: #fff; background: linear-gradient(115deg, #7161e8, #4e75de); border-color: #c7c6ff42; box-shadow: inset 0 1px 0 #e5e4ff2c, 0 6px 22px #6b5de83b; }
.primary:hover { background: linear-gradient(115deg, #7968ee, #527de9); box-shadow: 0 6px 30px #7e70fb50; }
.dropzone>small, .upload-footer>span, .save-explanation { color: var(--quiet); }
.upload-footer svg { stroke: #a4c8ed; }
.text-button, .part-links>a, .part-links>button, .builder-benchmark a, .compatibility-item a { color: var(--accent); }
.guide-card { background: linear-gradient(145deg, #8b6fea18, #5fbeeb08 85%), rgba(20, 28, 51, .78); }
.guide-card>.eyebrow { color: #c7bdff; }
.guide-item p, .steps p, .faq-list p, .footer p, .builder-sources p { color: var(--muted); }
.guide-bottom { border-color: var(--line); color: #c1dbff; }
.how-section { background: linear-gradient(120deg, #a284ff06, #719fe70b); border-color: var(--line); }
.steps article+article, .how-note, .faq-list details, .footer { border-color: var(--line); }
.step-top>span:first-child, .keys b, .how-note, .footer>span, .footer>div { color: var(--quiet); }
.steps strong { color: #d6dff5; }
.keys kbd, .save-mini, .mini-file, code { background: #adbaff0a; color: #c9d7f4; border-color: #a7bfff2b; }
.save-mini i, .mini-file i, .faq-list summary::after { color: #bcaeff; }
.footer { margin-top: 15px; }
.skip { background: #34306e; }
.error, .builder-message.is-error, #benchmark-own-feedback.benchmark-input-error { background: #512c3b; color: #ffcfbc; border: 1px solid #ffc5ad30; }

/* Analysis and benchmark results. */
.result-controls { background: #9cabff0a; border: 1px solid var(--line); border-radius: 14px; }
.result-controls label { color: var(--muted); }
.result-controls select, .benchmark-panel select, .benchmark-panel input[type=text],
.part-price label, .budget-card input, .picker-filters input[type=search], .custom-part input {
  color: var(--ink); background: rgba(8, 14, 33, .76); border-color: #a9bdff38; border-radius: 8px;
}
.score-panel, .budget-card { background: radial-gradient(ellipse at 12% 0, #8d6fff25, transparent 70%), radial-gradient(ellipse at 95% 90%, #4498dc17, transparent 75%), rgba(20, 28, 56, .88); }
.score-panel { color: var(--ink); }
.score-panel>.eyebrow, .score-ring span, .budget-card>.eyebrow { color: #c7c3ff; }
.score-ring { background: conic-gradient(#aab8ff var(--angle,0deg), #738ac729 0); box-shadow: 0 0 32px #8888ff10; }
.score-ring>div { background: #19213e; }
.score-panel p, .system-details span, .analysis-note, .recommendation>p { color: var(--muted); }
.light-link { color: var(--accent); }
.tag { color: #bfc9e7; background: #a7bdff07; border-color: #adc1ff2c; border-radius: 6px; }
.spec-row, .checklist>div { border-color: var(--line); }
.spec-content small, .spec-content p, .spec-number small, .system-details small { color: var(--quiet); }
.spec-number { color: #b8c7ff; }
.component-bar, .benchmark-bar { background: #a2b6ff1a; }
.component-bar>span, .benchmark-bar span { background: linear-gradient(90deg, #a996fa, #91d9ff); }
.analysis-note { background: #8a9aff0a; border-left-color: #a79ced; border-radius: 0 10px 10px 0; }
.rec-top>span, .verify strong { color: #d4c4ff; }
.rec-top>b, .checklist>div>span { color: #aeb5d4; }
.verify { color: var(--muted); background: #a3b6ff09; border: 1px solid #afbdff0d; border-radius: 10px; }
.affiliate-disclosure, .compatibility>div>p, .checklist p { color: var(--muted); }
.checklist strong { color: #e1e8ff; }
.checklist em { color: #c4b8f5; border-color: #bdb2ff38; }
.benchmark-reference { background: linear-gradient(130deg, #9d87f318, #7dd9ff07); }
.benchmark-reference>.eyebrow { color: #c6bdff; }
.benchmark-metrics strong, #benchmark-comparison>strong { color: #c4d5ff; }
.benchmark-metrics span, .benchmark-reference p, .benchmark-compare p, .benchmark-personal p,
.benchmark-method p, .benchmark-panel .benchmark-small { color: var(--muted); }
.benchmark-panel a { color: var(--accent); }
#benchmark-own-feedback:not(:empty) { background: #9eb7ff13; }
.benchmark-table-wrap thead { background: #aebeff0d; }
.benchmark-footer { background: #9cbbff05; color: var(--quiet); }
.benchmark-confirm input, .filter-check input { accent-color: #a29dfc; }

/* Parts builder, including empty, selected, custom and conflict states. */
.builder-intro { padding-top: 55px; }
.intro-note { border-left-color: #a69bff40; }
.intro-note>span { color: #bcb4f1; }
.intro-note p, .builder-side-note { color: var(--muted); }
.builder-notice { border-color: #9ab8ff24; background: linear-gradient(110deg, #9d8df80d, #6eb8ed0b); border-radius: 13px; }
.builder-notice>span { color: #c0b5ff; }
.builder-notice p { color: #bdc9e3; }
.example-group>span { color: var(--quiet); }
.builder-message { color: #c5deff; }
.builder-message:not(:empty) { background: #759ef316; border: 1px solid #94b7ff20; border-radius: 9px; }
.builder-message.is-error { background: #512c3b; color: #ffcfbc; }
.parts-column-head { background: #a9beff07; color: var(--quiet); }
.part-row { border-color: var(--line); }
.part-row:hover { background: #a7bcff04; }
.part-category>span { color: #aeaffc; }
.part-category h3 { color: #b9c5e3; }
.part-choice>p, .builder-small { color: var(--quiet); }
.part-links>button:last-child { color: #bac1d7; }
.part-price label>span:not(.sr-only) { color: var(--quiet); }
.part-price input { color: var(--ink); }
.part-price input::placeholder, .budget-card input::placeholder { color: #99a9c9; opacity: 1; }
.empty-price { color: #8b99bc; }
.choose-part { color: #b9d8ff; background: #b2bbff07; border-color: #a6b8ff46; border-radius: 8px; }
.choose-part:hover { background: #8da4ff16; border-color: #b9c4ff85; }
.unverified-tag { color: #ffdbb0; background: #513b26; }
.budget-card { color: var(--ink); }
.budget-card label, .budget-total p, #budget-remaining, .budget-note { color: #bac8e5; }
.budget-total { border-color: #acb8ff2b; }
.budget-total>span { color: #b7bddf; }
.budget-total>strong { color: #edf2ff; text-shadow: 0 0 30px #a5b4ff24; }
#budget-remaining { background: #9ebaff12; color: #cdddff; border: 1px solid #a8baff16; border-radius: 8px; }
#budget-remaining.over-budget { color: #ffd5b7; background: #4b303b; border-color: #ffc8a52c; }
.builder-benchmark>.eyebrow, .build-checks .eyebrow { color: #c6baf7; }
.builder-benchmark p, .builder-benchmark strong small, .benchmark-date { color: var(--muted); }
.builder-benchmark strong { color: #bdd8ff; }
.compatibility-status { background: #8cafff0d; color: #c7ddff; border-color: var(--line); }
.compatibility-status.has-conflicts { background: #492d39; color: #ffd4ba; }
.compatibility-item { border-color: var(--line); }
.compatibility-item>span { background: #a5b6ff10; border-color: #b2c7ff26; color: #c2ceff; }
.compatibility-item.conflict>span { background: #553d36; border-color: #ffd1ac38; color: #ffd2aa; }
.compatibility-item small { color: #cfbbf6; }
.compatibility-item.conflict small { color: #ffd2aa; }
.compatibility-item p { color: var(--muted); }

/* Modal glass is denser than page glass to keep overlapping text legible. */
dialog, #part-dialog {
  color: var(--ink);
  background: linear-gradient(140deg, #9279ff12, #78bdf705), rgba(17, 24, 47, .96);
  border-color: #bdc9ff40;
  border-radius: 22px;
  box-shadow: inset 0 1px 0 #e3e6ff20, 0 30px 100px #00091bc9;
  backdrop-filter: blur(28px) saturate(140%);
  -webkit-backdrop-filter: blur(28px) saturate(140%);
}
dialog::backdrop { background: #040817b3; backdrop-filter: blur(9px); -webkit-backdrop-filter: blur(9px); }
.dialog-close { color: #d1d9ed; }
dialog p, dialog li, #picker-count { color: var(--muted); }
dialog a { color: var(--accent); }
.picker-part { background: linear-gradient(120deg, #b5bcff08, #92ccff03); border-color: #a6bbff29; border-radius: 13px; }
.picker-part:hover { border-color: #b9beff55; }
.picker-part a { color: var(--accent); }
.picker-part .picker-conflict, #custom-error { color: #ffd0ae; }
.picker-empty { background: #8ca7ff12; }
input[aria-invalid=true] { box-shadow: inset 0 0 0 2px #ffa77d!important; }

@media(max-width:1000px) {
  .header { gap: 20px; }
  .header nav { gap: 19px; }
  .header .local-badge { display: none; }
}
@media(max-width:740px) {
  .header { width: calc(100% - 28px); margin-top: 14px; height: 68px; padding: 0 15px; border-radius: 18px; gap: 12px; }
  .header nav { gap: 13px; font-size: 13px; }
  .header nav .nav-active { padding: 9px 10px; border-radius: 9px; }
  .header .brand { font-size: 24px; gap: 8px; }
  .header .brand img { width: 29px; height: 29px; }
  .hero { padding-top: 40px; padding-bottom: 40px; }
  .hero h1 { font-size: clamp(40px, 10vw, 49px); letter-spacing: -2px; }
  .hero-points { flex-wrap: wrap; gap: 10px 16px; }
  .hero-art { margin-top: 20px; }
  .builder-intro { padding-top: 36px; }
  .steps article+article { border-color: var(--line); }
  .upload-card, .guide-card, .spec-panel, .score-panel, .recommendation,
  .compatibility, .benchmark-panel, .parts-panel, .build-checks, .budget-card,
  .builder-benchmark { border-radius: 16px; }
  body::before { filter: blur(24px); background: radial-gradient(ellipse 90vw 60vh at 0 8%, #7550dd29, transparent 85%), radial-gradient(ellipse 90vw 70vh at 100% 65%, #3486d925, transparent 85%); }
}
@media(max-width:360px) {
  .header { gap: 8px; padding: 0 12px; }
  .header .brand { font-size: 21px; gap: 5px; }
  .header nav { font-size: 13px; gap: 9px; }
  .header nav .nav-active { padding: 8px; }
}
@media(prefers-reduced-motion:reduce) {
  *, *::before, *::after { transition: none!important; animation: none!important; scroll-behavior: auto!important; }
}
.effects-toggle { display: inline-flex; align-items: center; gap: 7px; border: 1px solid #b0beff32; border-radius: 30px; padding: 7px 10px; background: #9caeff09; color: #b7d5f4; font-size: 13px; white-space: nowrap; }
.effects-toggle::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: #a9cfff; box-shadow: 0 0 7px #a9cfff70; }
.effects-toggle[aria-pressed=false]::before { background: #8c97b4; box-shadow: none; }
html[data-glass=reduced] :is(.header,.upload-card,.guide-card,.spec-panel,.score-panel,.recommendation,.compatibility,.benchmark-panel,.parts-panel,.build-checks,.budget-card,.builder-benchmark,.circuit-card,.floating-note,dialog,#part-dialog) { background: #17213b; backdrop-filter: none; -webkit-backdrop-filter: none; }
html[data-glass=reduced] body::before, html[data-glass=reduced] .hero-art::before { display: none; }
html[data-glass=reduced] dialog::backdrop { backdrop-filter: none; -webkit-backdrop-filter: none; background: #040817e6; }
@media print {
  :root { color-scheme: light; --ink: #16213b; --muted: #3e4c65; --quiet: #46546d; --accent: #284b85; --line: #cbd3e1; }
  body { background: #fff!important; }
  body::before { display: none; }
  .score-panel, .spec-panel, .recommendation, .compatibility, .benchmark-panel,
  .benchmark-reference, .parts-panel, .build-checks, .budget-card, .builder-benchmark,
  .compatibility-status, .verify, .result-controls, .analysis-note { background: #f7f8fb!important; color: #16213b!important; box-shadow: none!important; backdrop-filter: none; -webkit-backdrop-filter: none; border-color: #cbd3e1!important; }
  main :is(h1,h2,h3,h4,p,span,small,strong,label,a,em,code,td,th) { color: #27334d!important; text-shadow: none!important; }
  .score-ring>div, .budget-card input, .part-price label { background: #fff!important; }
  main input { color: #16213b!important; background: #fff!important; }
}