@font-face {
  font-family: "DM Sans";
  src: url("assets/fonts/dm-sans-variable.ttf") format("truetype");
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
}

@font-face {
  font-family: "JetBrains Mono";
  src: url("assets/fonts/jetbrains-mono-variable.ttf") format("truetype");
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
}

:root {
  color-scheme: dark;
  --bg: #0d171c;
  --bg-2: #101d23;
  --panel: rgba(23, 36, 43, .94);
  --panel-solid: #17242b;
  --surface: #20313a;
  --surface-2: #243842;
  --line: #34464f;
  --line-bright: #3b505b;
  --text: #d7e2e7;
  --muted: #a5b5bc;
  --faint: #849aa4;
  --accent: #65c5e5;
  --accent-2: #53b8c8;
  --cyan: #39b9c4;
  --coral: #e98268;
  --warning: #f3aa48;
  --danger: #e98268;
  --success: #65c58e;
  --radius: 14px;
  --shadow: 0 18px 48px rgba(0, 0, 0, .25);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  overflow-x: hidden;
  color: var(--text);
  background:
    radial-gradient(circle at 74% 5%, rgba(101, 197, 229, .09), transparent 31rem),
    radial-gradient(circle at 8% 42%, rgba(243, 170, 72, .035), transparent 24rem),
    linear-gradient(rgba(103, 201, 232, .025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(103, 201, 232, .025) 1px, transparent 1px),
    var(--bg);
  background-size: auto, auto, 32px 32px, 32px 32px, auto;
  font: 400 1rem/1.5 "DM Sans", system-ui, sans-serif;
}

button, input, select, textarea { font: inherit; }
button { color: inherit; }
button:focus-visible, [tabindex]:focus-visible, a:focus-visible, summary:focus-visible {
  outline: 3px solid rgba(57, 185, 196, .82);
  outline-offset: 3px;
}
button:disabled { cursor: not-allowed; }
a { color: inherit; text-decoration: none; }

.lms-status {
  padding: 7px clamp(18px, 3vw, 48px);
  border-bottom: 1px solid rgba(57, 185, 196, .45);
  color: #f4feff;
  background: #006f96;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .02em;
  text-align: center;
}
.lms-status[hidden] { display: none; }

.topbar {
  position: sticky;
  z-index: 30;
  top: 0;
  display: grid;
  grid-template-columns: auto minmax(390px, 1fr);
  align-items: center;
  gap: 24px;
  min-height: 78px;
  padding: 12px clamp(18px, 3vw, 48px);
  border-top: 4px solid var(--cyan);
  border-bottom: 1px solid rgba(103,201,232,.3);
  background: rgba(16, 31, 39, .96);
  box-shadow: 0 8px 24px rgba(103,201,232,.12), 0 2px 0 rgba(231,242,246,.08);
  backdrop-filter: blur(18px);
}

.brand { display: inline-flex; align-items: center; gap: 14px; width: max-content; }
.brand-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 102px;
  height: 60px;
  padding: 5px 7px;
  border-radius: 10px;
  background: #fff;
}
.brand-logo img { display: block; width: 88px; height: auto; }
.brand-title { display: grid; padding-left: 14px; border-left: 1px solid var(--line); line-height: 1.08; }
.brand-title strong { color: #e7f2f6; font-size: 1.18rem; letter-spacing: -.02em; }
.brand-title small { margin-top: 5px; color: var(--muted); font-size: .66rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }

.mode-navigation { display: flex; align-items: center; justify-content: flex-end; gap: 5px; }
.mode-navigation a { padding: 9px 12px; border: 1px solid transparent; border-radius: 8px; color: var(--muted); font-size: .82rem; font-weight: 700; }
.mode-navigation a:hover, .mode-navigation a:focus-visible { color: var(--text); background: rgba(101,197,229,.08); }
.mode-navigation a.active { border-color: rgba(101,197,229,.32); color: #edf9fc; background: rgba(101,197,229,.12); }
.mode-navigation a[hidden] { display: none; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 9px 15px;
  border: 1px solid transparent;
  border-radius: 9px;
  background: transparent;
  font-size: .88rem;
  font-weight: 700;
  cursor: pointer;
  touch-action: manipulation;
  transition: transform .16s ease, border-color .16s ease, background .16s ease, color .16s ease;
}
.btn:hover:not(:disabled) { transform: translateY(-1px); }
.btn-primary { color: #0d171c; background: var(--accent); box-shadow: 0 8px 24px rgba(101,197,229,.16); }
.btn-primary:hover:not(:disabled) { background: var(--accent-2); }
.btn-primary:disabled { color: #6b7d78; background: #233c3a; }
.btn-outline { border-color: var(--line-bright); background: rgba(18,34,58,.45); }
.btn-outline:hover { border-color: var(--muted); background: var(--surface); }
.btn-ghost { color: var(--muted); }
.btn-ghost:hover { color: var(--text); background: rgba(255,255,255,.055); }
.btn.compact { min-height: 34px; padding: 6px 10px; font-size: .8rem; }

.workspace {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  grid-template-areas:
    "steps picker"
    "steps visual";
  align-items: start;
  gap: 18px;
  width: min(1460px, 100%);
  margin: 0 auto;
  padding: 18px clamp(18px, 3vw, 48px) 54px;
}

.difficulty-panel {
  display: grid;
  gap: 12px;
  padding: 16px 18px;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.difficulty-options { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; margin: 0; padding: 0; border: 0; }
.difficulty-options label {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 58px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--bg-2);
  cursor: pointer;
}
.difficulty-options label:has(input:checked) { border-color: var(--accent); background: #203b47; }
.difficulty-options input { width: 20px; height: 20px; accent-color: var(--accent); }
.difficulty-options span { display: grid; gap: 2px; }
.difficulty-options strong { font-size: .83rem; }
.difficulty-options small { color: var(--muted); font-size: .68rem; }
.expert-controls {
  padding-top: 13px;
  border-top: 1px solid var(--line);
}
.expert-controls[hidden] { display: none; }
.expert-controls > summary { cursor: pointer; }
.expert-controls-body {
  display: grid;
  grid-template-columns: repeat(3,minmax(150px,1fr)) minmax(230px,1.25fr);
  gap: 12px;
  padding-top: 13px;
}
.expert-controls label { display: grid; gap: 5px; color: var(--muted); font-size: .7rem; font-weight: 700; }
.expert-controls select {
  width: 100%;
  min-width: 0;
  min-height: 42px;
  padding: 8px 10px;
  border: 1px solid var(--line-bright);
  border-radius: 7px;
  color: var(--text);
  background: var(--bg-2);
}
.expert-controls .leak-test { display: flex; align-items: center; gap: 9px; padding-top: 18px; }
.expert-controls .leak-test input { flex: 0 0 20px; width: 20px; height: 20px; accent-color: var(--accent); }
.expert-controls .leak-test span { min-width: 0; }
.expert-controls-body > p { grid-column: 1 / -1; margin: 0; color: var(--warning); font-size: .72rem; line-height: 1.45; }

.step-panel, .selection-panel, .visual-panel, .diagnostics-panel, .build-panel {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel-solid);
  box-shadow: var(--shadow);
}
.step-panel { grid-area: steps; grid-row: 1 / span 2; position: sticky; top: 100px; overflow: hidden; }
.selection-stack { grid-area: picker; display: grid; align-content: start; gap: 18px; min-width: 0; }
.selection-panel { min-height: 620px; padding: 24px; }
.visual-stack { grid-area: visual; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(360px, .85fr); align-content: start; gap: 18px; min-width: 0; }
.visual-panel { padding: 20px; }
.diagnostics-panel { grid-area: diagnostics; padding: 16px 18px; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.build-panel { padding: 20px; }

.panel-heading, .selection-header, .visual-heading, .diagnostics-heading, .build-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}
.panel-heading { display: block; padding: 20px 18px 12px; }
.workflow-panel { width: auto; margin: 0; }
h1, h2, p { margin-top: 0; }
h1 { margin-bottom: 6px; font-size: clamp(1.45rem, 2.2vw, 2rem); line-height: 1.15; letter-spacing: -.035em; }
h2 { margin-bottom: 0; font-size: 1.08rem; letter-spacing: -.02em; }
.eyebrow {
  margin-bottom: 6px;
  color: var(--accent);
  font: 600 .68rem "JetBrains Mono", monospace;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.category-description { max-width: 650px; margin: 0; color: var(--muted); font-size: .92rem; }

.category-nav { display: grid; padding: 4px 8px 14px; }
.category-button {
  position: relative;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) 16px;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 7px 9px;
  border: 0;
  border-radius: 9px;
  color: var(--muted);
  background: transparent;
  text-align: left;
  cursor: pointer;
}
.category-button::before {
  position: absolute;
  left: -8px;
  width: 3px;
  height: 22px;
  border-radius: 4px;
  background: transparent;
  content: "";
}
.category-button:hover { color: var(--text); background: rgba(255,255,255,.035); }
.category-button.active { color: var(--text); background: #203b47; }
.category-button.active::before { background: var(--accent); }
.category-button .step-index {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--line);
  border-radius: 8px;
  font: 600 .71rem "JetBrains Mono", monospace;
}
.category-button.active .step-index { border-color: #4f8294; color: var(--accent); background: #243842; }
.category-button.complete .step-index { color: #0d171c; border-color: var(--accent); background: var(--accent); }
.category-button .category-label { overflow: hidden; font-size: .84rem; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.context-note {
  margin: 18px 0 -4px;
  padding: 10px 12px;
  border-left: 3px solid var(--cyan);
  border-radius: 4px 9px 9px 4px;
  color: #c4d5dc;
  background: #142a33;
  font-size: .84rem;
}
.component-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 11px;
  margin-top: 20px;
}
.component-option { display: grid; grid-template-rows: 1fr auto; min-width: 0; }
.product-sources {
  border: 1px solid var(--line);
  border-top: 0;
  border-radius: 0 0 10px 10px;
  background: var(--bg-2);
  color: var(--muted);
  font-size: .7rem;
  line-height: 1.4;
}
.product-sources small { color: var(--faint); font-size: .66rem; }
.source-links { display: flex; flex-wrap: wrap; gap: 5px 12px; }
.source-links a { color: var(--cyan); text-decoration: underline; text-underline-offset: 3px; }
.source-links a:hover, .source-links a:focus-visible { color: #fff; }
.component-card {
  width: 100%;
  position: relative;
  display: grid;
  grid-template-rows: auto auto 1fr;
  min-height: 132px;
  padding: 15px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 11px;
  color: var(--text);
  background: linear-gradient(150deg, #1d2d35, #17242b);
  text-align: left;
  cursor: pointer;
  transition: transform .16s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease;
}
.component-card:hover:not(.blocked) {
  transform: translateY(-2px);
  border-color: #4f8294;
  background: linear-gradient(150deg, #243842, #1d2d35);
}
.component-card.selected {
  border-color: var(--accent);
  background: linear-gradient(150deg, #203b47, #173b49);
  box-shadow: inset 0 0 0 1px rgba(101,197,229,.18), 0 8px 24px rgba(0,0,0,.2);
}
.component-card.blocked {
  border-color: rgba(255,107,122,.46);
  opacity: .84;
  cursor: help;
  filter: saturate(.65);
}
.component-card .card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.component-card .maker { color: var(--accent); font: 600 .65rem "JetBrains Mono", monospace; letter-spacing: .07em; text-transform: uppercase; }
.beginner-variant-badge {
  display: inline-block;
  margin-left: 7px;
  padding: 2px 5px;
  border: 1px solid var(--line-bright);
  border-radius: 4px;
  color: #c8d8ea;
  background: rgba(114,139,170,.1);
  font: 700 .58rem "JetBrains Mono", monospace;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.component-card h3 { margin: 4px 0 7px; font-size: .98rem; line-height: 1.25; letter-spacing: -.015em; }
.component-card .price { white-space: nowrap; color: #fff; font: 600 .82rem "JetBrains Mono", monospace; }
.component-card .specs { display: flex; flex-wrap: wrap; align-content: flex-start; gap: 5px; margin: 0; padding: 0; list-style: none; }
.component-card .specs li {
  padding: 3px 6px;
  border: 1px solid rgba(65,89,119,.8);
  border-radius: 5px;
  color: #a9bad0;
  background: rgba(5,14,25,.25);
  font: 500 .65rem "JetBrains Mono", monospace;
}
.component-card .recorded-mark { margin-left: 7px; color: var(--accent); font-size: .9em; }
.block-reason {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  margin-top: 2px;
  color: #ffc0c7;
  font-size: .72rem;
  line-height: 1.3;
}
.block-reason::before { flex: 0 0 auto; content: "×"; font-weight: 700; }
.block-reason > span:first-child { flex: 1; }
.block-action {
  flex: 0 0 auto;
  padding-bottom: 1px;
  border-bottom: 1px solid currentColor;
  color: #fff;
  font-weight: 700;
  white-space: nowrap;
}
.component-card.blocked:hover,
.component-card.blocked:focus-visible {
  border-color: #ff98a4;
  opacity: 1;
  filter: none;
}
.step-actions { display: flex; justify-content: space-between; gap: 10px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }
.step-actions [hidden] { display: none; }
.safety-fab { position: fixed; z-index: 70; right: 22px; bottom: 22px; display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid rgba(101,197,229,.55); border-radius: 50%; color: #0d171c; background: var(--accent); box-shadow: 0 12px 30px rgba(0,0,0,.35); font: 800 1.1rem "JetBrains Mono", monospace; cursor: pointer; }
.safety-fab:hover { background: var(--accent-2); transform: translateY(-1px); }

.visual-heading, .diagnostics-heading, .build-heading { align-items: center; margin-bottom: 14px; }
.health-badge {
  padding: 5px 8px;
  border: 1px solid var(--line);
  border-radius: 99px;
  color: var(--muted);
  background: var(--bg-2);
  font: 500 .66rem "JetBrains Mono", monospace;
}
.health-badge[hidden] { display: none; }
.health-badge.good { color: var(--success); border-color: rgba(101,230,196,.38); }
.health-badge.warning { color: var(--warning); border-color: rgba(255,200,87,.4); }
.health-badge.error { color: var(--danger); border-color: rgba(255,107,122,.42); }
.svg-frame {
  position: relative;
  min-height: 440px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 10px;
  background:
    linear-gradient(rgba(103,201,232,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(103,201,232,.045) 1px, transparent 1px),
    radial-gradient(circle at 50% 50%, #142a33, #101d23);
  background-size: 24px 24px, 24px 24px, auto;
}
.svg-host {
  display: grid;
  min-height: 440px;
  place-items: center;
  color: var(--muted);
}
.svg-host[hidden] { display: none; }
#pc-view { display: block; width: 100%; min-height: 440px; max-height: 590px; }
#pc-view .part { transition: opacity .25s ease, transform .25s ease, filter .25s ease; transform-box: fill-box; transform-origin: center; }
#pc-view .part:hover { filter: brightness(1.25); }
#pc-view .empty-part { opacity: .2; }
#pc-view .active-part { animation: place-part .35s ease both; }
@keyframes place-part { from { opacity: 0; transform: translateY(-8px) scale(.98); } to { opacity: 1; transform: none; } }
#pc-view text { font-family: "JetBrains Mono", monospace; pointer-events: none; }
.view-legend { display: flex; flex-wrap: wrap; gap: 7px 13px; margin-top: 12px; color: var(--faint); font-size: .7rem; }
.view-legend span { display: inline-flex; align-items: center; gap: 6px; }
.view-legend i { width: 8px; height: 8px; border-radius: 2px; }

.diagnostics-list { display: grid; gap: 8px; }
.diagnostic {
  display: grid;
  grid-template-columns: 26px minmax(0,1fr);
  gap: 9px;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--bg-2);
}
.diagnostic-icon {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 7px;
  font: 700 .72rem "JetBrains Mono", monospace;
}
.diagnostic.error .diagnostic-icon { color: var(--danger); background: rgba(255,107,122,.12); }
.diagnostic.warning .diagnostic-icon { color: var(--warning); background: rgba(255,200,87,.12); }
.diagnostic.success .diagnostic-icon { color: var(--success); background: rgba(101,230,196,.12); }
.diagnostic.info .diagnostic-icon { color: var(--cyan); background: rgba(86,200,255,.1); }
.diagnostic strong { display: block; margin-bottom: 1px; font-size: .8rem; }
.diagnostic p { margin: 0; color: var(--muted); font-size: .74rem; line-height: 1.35; }

.build-metrics { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.build-metrics > div { padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg-2); }
.build-metrics span { display: block; color: var(--faint); font-size: .65rem; letter-spacing: .07em; text-transform: uppercase; }
.build-metrics strong { display: block; margin-top: 3px; color: var(--text); font: 600 .78rem "JetBrains Mono", monospace; }

.research-current { margin-top:20px; padding:18px; border:1px solid var(--line); border-radius:11px; background:var(--bg-2); }
.research-current[hidden] { display:none; }
.research-current h2,.research-overview h3,#research-network h3 { margin:0 0 12px; font-size:1rem; }
.research-current p { color:var(--muted); }
.research-card { margin-top:10px; padding:14px; border:1px solid var(--line); border-radius:10px; background:#142229; }
.research-card > p { display:flex; flex-wrap:wrap; gap:12px; align-items:baseline; margin:0 0 8px; color:var(--text); }
.research-card a { color:var(--cyan); text-decoration:underline; }
.research-card > small { display:block; color:var(--muted); line-height:1.5; }
.research-fields { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin:14px 0 8px; }
.research-fields label { display:grid; gap:6px; color:var(--text); font-size:.78rem; font-weight:600; }
.research-fields input,.research-fields select { width:100%; min-height:42px; padding:8px 10px; border:1px solid var(--line-bright); border-radius:7px; color:var(--text); background:var(--bg-2); }
.research-fields input:disabled { opacity:.55; }
.research-commit { display:grid; gap:6px; margin-top:14px; }
.research-commit[hidden] { display:none; }
.research-commit .btn { width:100%; }
.research-commit small { color:var(--faint); line-height:1.45; }
#research-network { display:grid; gap:10px; margin-top:18px; }
.research-overview { margin-top:20px; padding-top:16px; border-top:1px solid var(--line); }
.research-overview p,.research-overview li { color:var(--muted); font-size:.78rem; }
.research-overview ul { padding-left:20px; }
@media(max-width:580px) { .research-fields { grid-template-columns:1fr; } }

.toast {
  position: fixed;
  z-index: 80;
  right: 22px;
  bottom: 78px;
  max-width: min(360px, calc(100vw - 44px));
  padding: 11px 15px;
  border: 1px solid rgba(101,230,196,.4);
  border-radius: 10px;
  color: var(--text);
  background: var(--panel-solid);
  box-shadow: 0 14px 38px rgba(0,0,0,.4);
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity .2s, transform .2s;
}
.toast.visible { opacity: 1; transform: none; }

@media (max-width: 1260px) {
  .workspace {
    grid-template-columns: 210px minmax(460px, 1fr);
    grid-template-areas:
      "steps picker"
      "steps visual";
  }
  .visual-stack { grid-template-columns: 1fr; }
  .visual-panel { min-width: 0; }
  .topbar { grid-template-columns: 1fr auto; }
  .mode-navigation { justify-content: flex-end; }
}

@media (max-width: 820px) {
  .topbar { position: static; grid-template-columns: 1fr; gap: 10px; }
  .mode-navigation { justify-content: flex-start; overflow-x: auto; }
  .mode-navigation a { flex: 0 0 auto; }
  .workspace {
    display: flex;
    flex-direction: column;
    padding: 14px 12px 40px;
  }
  .step-panel, .selection-stack, .selection-panel, .visual-stack, .visual-panel, .diagnostics-panel, .build-panel { width: 100%; }
  .step-panel { position: static; order: 0; }
  .selection-stack { order: 1; }
  .selection-panel { min-height: 0; padding: 18px 14px; }
  .visual-stack { order: 2; }
  .visual-panel { padding: 15px; }
  .diagnostics-panel { order: 3; }
  .panel-heading { display: none; }
  .category-nav {
    display: flex;
    gap: 5px;
    overflow-x: auto;
    padding: 8px;
    scrollbar-width: thin;
  }
  .category-button { flex: 0 0 auto; grid-template-columns: 27px auto; min-height: 42px; padding: 6px 9px; }
  .category-button::before { display: none; }
  .category-button .step-index { width: 25px; height: 25px; }
  .category-button .category-label { max-width: 115px; }
  .component-grid { grid-template-columns: 1fr; }
  .component-card { min-height: 132px; }
  .difficulty-options { grid-template-columns: 1fr; }
  .expert-controls-body { grid-template-columns: 1fr; }
  .expert-controls .leak-test { padding-top: 0; }
  .selection-header { display: block; }
  .svg-frame, #pc-view { min-height: 390px; }
}

@media (max-width: 480px) {
  .topbar { grid-template-columns: 1fr; }
  .brand { gap: 10px; }
  .brand-logo { width: 82px; height: 50px; padding: 4px 6px; }
  .brand-logo img { width: 70px; }
  .brand-title { padding-left: 10px; }
  .brand-title strong { font-size: 1rem; }
  .brand-title small { font-size: .58rem; }
  .mode-navigation a { padding-inline: 9px; font-size: .75rem; }
  .build-metrics { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
.skip-link {
  position: fixed;
  z-index: 200;
  top: 10px;
  left: 12px;
  padding: 10px 14px;
  border: 2px solid var(--accent);
  border-radius: 8px;
  color: #0d171c;
  background: var(--accent);
  font-weight: 700;
  transform: translateY(-160%);
  transition: transform .15s ease;
}
.skip-link:focus { transform: translateY(0); }

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

main, section, aside, [tabindex="-1"] { scroll-margin-top: 104px; }
button, a, summary { touch-action: manipulation; }
[aria-disabled="true"] { cursor: not-allowed; }

@media (prefers-contrast: more) {
  :root { --line: #607a98; --line-bright: #89a4c0; --muted: #c0d0e2; --faint: #aebfd2; }
  .component-card, .network-card, .scenario-card { border-width: 2px; }
}

@media (forced-colors: active) {
  * { forced-color-adjust: auto; }
  .brand-logo, .view-legend i, .mini-track i, .rating-track i { forced-color-adjust: none; }
  .selected, .active, .health-badge, .generation-badge { outline: 2px solid currentColor; }
}


.ai-disclosure {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  width: min(1480px, calc(100% - 32px));
  margin: 16px auto 0;
  padding: 13px 16px;
  border: 1px solid rgba(103, 201, 232, .3);
  border-radius: 11px;
  background: var(--panel-solid);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .16);
}
.ai-disclosure-mark {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid #4f8294;
  border-radius: 8px;
  color: #b9e8f5;
  background: #203b47;
  font: 700 .72rem "JetBrains Mono", monospace;
}
.ai-disclosure strong {
  display: block;
  margin: 1px 0 3px;
  color: #e7f2f6;
  font-size: .78rem;
}
.ai-disclosure p {
  max-width: 1220px;
  margin: 0;
  color: var(--faint);
  font-size: .72rem;
  line-height: 1.55;
}
.site-footer {
  display: block;
  width: 100%;
  margin: 22px 0 0;
  padding: 0;
  border: 0;
  border-top: 1px solid rgba(103, 201, 232, .3);
  border-radius: 0;
  background: #0b151a;
  box-shadow: 0 -10px 28px rgba(0, 0, 0, .18);
}
.site-footer-content {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  width: min(1480px, calc(100% - 32px));
  margin: 0 auto;
  padding: 20px 0 22px;
}
@media (max-width: 480px) {
  .ai-disclosure {
    width: calc(100% - 24px);
    margin-top: 12px;
    padding: 12px;
  }
  .site-footer { width: 100%; margin-top: 18px; padding: 0; }
  .site-footer-content { width: calc(100% - 24px); padding: 16px 0 18px; }
}
@media (forced-colors: active) {
  .ai-disclosure, .ai-disclosure-mark {
    border: 2px solid CanvasText;
    background: Canvas;
  }
}

/* Helle IBB-Arbeitsoberfläche des Konfigurators */
.configurator-page {
  color-scheme: light;
  --bg: #f4fafb;
  --bg-2: #fffaf3;
  --panel: #ffffff;
  --panel-solid: #ffffff;
  --surface: #f0f8fa;
  --surface-2: #dff3f6;
  --line: #d5e3e6;
  --line-bright: #b6cdd2;
  --text: #4f5b60;
  --muted: #6c787d;
  --faint: #829095;
  --accent: #0095bd;
  --accent-2: #007ea5;
  --cyan: #0095bd;
  --coral: #ef7b63;
  --warning: #b96b00;
  --danger: #c94343;
  --success: #217a52;
  --radius: 4px;
  --shadow: 0 1px 3px rgba(20, 32, 38, .08);
  overflow-x: hidden;
  color: var(--text);
  background: linear-gradient(120deg, #f2fbfd 0, #fbfdfc 58%, #fffaf3 100%);
}
.configurator-page button:focus-visible,
.configurator-page [tabindex]:focus-visible,
.configurator-page a:focus-visible,
.configurator-page summary:focus-visible {
  outline-color: rgba(0, 136, 183, .78);
}
.configurator-page .topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 82px;
  padding: 10px 28px;
  border: 0;
  border-top: 4px solid #3bb6bd;
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, .98);
  box-shadow: none;
  backdrop-filter: blur(12px);
}
.configurator-page .brand { gap: 14px; }
.configurator-page .brand-logo {
  width: 102px;
  height: 60px;
  padding: 5px 7px;
  border: 0;
  border-radius: 10px;
  background: #fff;
}
.configurator-page .brand-logo img { width: 88px; }
.configurator-page .brand-title { padding-left: 14px; border-color: var(--line); }
.configurator-page .brand-title strong { color: var(--text); font-size: 1.18rem; }
.configurator-page .brand-title small { margin-top: 5px; color: var(--muted); font-size: .66rem; }
.configurator-page .mode-navigation {
  justify-self: center;
  justify-content: center;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: #eef6f7;
}
.configurator-page .mode-navigation a {
  min-width: 110px;
  padding: 8px 14px;
  border-radius: 2px;
  color: #56656a;
  text-align: center;
}
.configurator-page .mode-navigation a:hover,
.configurator-page .mode-navigation a:focus-visible { color: var(--accent-2); background: #fff; }
.configurator-page .mode-navigation a.active {
  border-color: var(--accent);
  color: #fff;
  background: var(--accent);
  box-shadow: 0 1px 3px rgba(20, 32, 38, .08);
}
.configurator-page .difficulty-panel {
  position: relative;
  display: flex;
  align-items: center;
  justify-self: end;
  gap: 10px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}
.configurator-page .difficulty-label { color: #676b70; font-size: .78rem; }
.configurator-page .difficulty-options {
  display: inline-flex;
  gap: 0;
  overflow: hidden;
  border: 1px solid var(--line-bright);
  border-radius: 4px;
}
.configurator-page .difficulty-options label {
  position: relative;
  min-height: 38px;
  padding: 0;
  border: 0;
  border-right: 1px solid var(--line);
  border-radius: 0;
  background: #fff;
}
.configurator-page .difficulty-options label:last-child { border-right: 0; }
.configurator-page .difficulty-options input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}
.configurator-page .difficulty-options label > span { display: block; padding: 9px 14px; }
.configurator-page .difficulty-options strong { color: #4b4f53; font-size: .76rem; font-weight: 500; }
.configurator-page .difficulty-options small { display: none; }
.configurator-page .difficulty-options label:has(input:checked) { background: var(--accent); }
.configurator-page .difficulty-options label:has(input:checked) strong { color: #fff; font-weight: 700; }
.configurator-page .difficulty-options label:has(input:focus-visible) { outline: 3px solid rgba(0, 136, 183, .35); outline-offset: -3px; }
.configurator-page #example-button { min-height: 38px; border-color: var(--line-bright); color: #4b4f53; background: #fff; }
.configurator-page .expert-controls {
  width: min(760px, 100%);
  margin: 0 0 0 auto;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: #fff;
  box-shadow: 0 12px 35px rgba(30, 42, 48, .16);
}
.configurator-page .expert-controls > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  color: var(--text);
  list-style: none;
  font-size: .78rem;
}
.configurator-page .expert-controls > summary::-webkit-details-marker { display: none; }
.configurator-page .expert-controls > summary span { color: var(--faint); font-size: .7rem; font-weight: 500; }
.configurator-page .expert-controls > summary::after { content: "+"; flex: 0 0 auto; color: var(--accent-2); font-size: 1.1rem; font-weight: 800; }
.configurator-page .expert-controls[open] > summary::after { content: "−"; }
.configurator-page .expert-controls > summary:focus-visible { outline: 3px solid rgba(0, 136, 183, .35); outline-offset: 5px; }
.configurator-page .expert-controls select { color: var(--text); background: #fff; }

.configurator-page .workspace {
  display: grid;
  --steps-width: clamp(300px, 24vw, 360px);
  grid-template-columns: var(--steps-width) minmax(0, 1fr);
  grid-template-areas:
    "steps picker"
    "steps visual";
  gap: 0;
  width: 100%;
  max-width: none;
  min-height: calc(100vh - 72px);
  margin: 0;
  padding: 0;
}
.configurator-page .workspace:has(> .step-panel:not([open])) { --steps-width: 54px; }
.configurator-page .purpose-gate {
  grid-column: 1 / -1;
  width: min(1060px, calc(100% - 40px));
  margin: 54px auto;
  padding: clamp(28px, 5vw, 56px);
  border: 1px solid var(--line);
  border-top: 3px solid var(--accent);
  border-radius: 4px;
  background: #fff;
}
.configurator-page .purpose-gate[hidden] { display: none; }
.configurator-page .purpose-gate-heading { max-width: 800px; }
.configurator-page .purpose-gate-heading h1 { margin: 7px 0 14px; }
.configurator-page .purpose-gate-heading > p:last-child { margin: 0; color: var(--muted); font-size: 1rem; line-height: 1.6; }
.configurator-page .purpose-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 32px; }
.configurator-page .standard-purpose-gate { width: min(1320px, calc(100% - 40px)); }
.configurator-page .standard-purpose-options { grid-template-columns: repeat(auto-fit, minmax(245px, 1fr)); }
.configurator-page .standard-purpose-card { min-height: 360px; padding: 24px; }
.configurator-page .standard-purpose-card strong { font-size: 1.18rem; }
.configurator-page .standard-purpose-card small b { color: var(--text); }
.configurator-page .custom-purpose-card { border-style: dashed; }
.configurator-page .custom-purpose-form {
  margin-top: 28px;
  padding: clamp(22px, 3vw, 34px);
  border: 1px solid var(--line);
  border-top: 3px solid var(--accent-3);
  border-radius: 4px;
  background: #f8faf9;
}
.configurator-page .custom-purpose-form[hidden] { display: none; }
.configurator-page .custom-purpose-heading,
.configurator-page .custom-purpose-actions { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.configurator-page .custom-purpose-heading h2 { margin: 4px 0 0; font-size: 1.35rem; }
.configurator-page .custom-purpose-fields { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 24px; }
.configurator-page .custom-purpose-wide { grid-column: span 2; }
.configurator-page .custom-purpose-form label { display: grid; gap: 7px; color: var(--muted); font-size: .76rem; font-weight: 700; }
.configurator-page .custom-purpose-form input,
.configurator-page .custom-purpose-form select,
.configurator-page .custom-purpose-form textarea {
  width: 100%;
  min-width: 0;
  padding: 10px 11px;
  border: 1px solid var(--line-bright);
  border-radius: 3px;
  color: var(--text);
  background: #fff;
  font: inherit;
  font-weight: 500;
}
.configurator-page .custom-purpose-form textarea { resize: vertical; line-height: 1.5; }
.configurator-page .custom-purpose-weights { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 26px 0 0; padding: 20px; border: 1px solid var(--line); }
.configurator-page .custom-purpose-weights legend { padding: 0 8px; color: var(--text); font-size: .82rem; font-weight: 800; }
.configurator-page .expert-purpose-fields { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 24px 0 0; padding: 20px; border: 1px solid var(--line); }
.configurator-page .expert-purpose-fields[hidden] { display: none; }
.configurator-page .expert-purpose-fields legend { padding: 0 8px; color: var(--text); font-size: .82rem; font-weight: 800; }
.configurator-page .expert-purpose-fields .expert-purpose-checkbox { display: flex; align-items: center; gap: 8px; grid-column: 1 / -1; }
.configurator-page .expert-purpose-checkbox input { width: 18px; height: 18px; }
.configurator-page .expert-purpose-fields p { grid-column: 1 / -1; margin: 0; color: var(--faint); font-size: .75rem; }
.configurator-page .custom-purpose-actions { margin-top: 22px; }
.configurator-page .custom-purpose-actions p { margin: 0; color: var(--danger); font-size: .82rem; font-weight: 700; }
.configurator-page .custom-purpose-actions p[data-valid="true"] { color: var(--success); }
.configurator-page .purpose-card {
  display: grid;
  align-content: start;
  gap: 12px;
  min-height: 300px;
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: 4px;
  color: var(--text);
  background: #fff;
  text-align: left;
  cursor: pointer;
  transition: border-color .16s, box-shadow .16s, transform .16s;
}
.configurator-page .purpose-card:hover { transform: translateY(-2px); border-color: var(--accent); box-shadow: 0 8px 24px rgba(20, 32, 38, .1); }
.configurator-page .purpose-card-label { width: fit-content; padding: 4px 8px; color: var(--accent-2); border: 1px solid #bcd7e1; border-radius: 99px; background: #eef8fb; font: 700 .68rem "JetBrains Mono", monospace; }
.configurator-page .purpose-card strong { max-width: 410px; color: var(--text); font-size: 1.35rem; line-height: 1.22; }
.configurator-page .purpose-card > span:not(.purpose-card-label, .purpose-card-action) { color: var(--muted); line-height: 1.55; }
.configurator-page .purpose-card small { padding-top: 14px; border-top: 1px solid var(--line); color: var(--faint); font-size: .74rem; line-height: 1.55; }
.configurator-page .purpose-card-action { align-self: end; margin-top: auto; color: var(--accent-2); font-weight: 700; }
.configurator-page .purpose-note { margin: 20px 0 0; color: var(--faint); font-size: .76rem; }
.configurator-page[data-purpose-pending="true"] .step-panel,
.configurator-page[data-purpose-pending="true"] .selection-stack,
.configurator-page[data-purpose-pending="true"] .visual-stack { display: none; }
.configurator-page .step-panel,
.configurator-page .selection-panel,
.configurator-page .visual-panel {
  border-radius: 0;
  background: #fff;
  box-shadow: none;
}
.configurator-page .step-panel {
  grid-area: steps;
  grid-row: 1 / span 2;
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 82px;
  height: calc(100vh - 82px);
  overflow: hidden;
  border: 0;
  border-right: 1px solid var(--line);
  background: #f4f5f3;
}
.configurator-page .panel-heading { display: flex; align-items: center; height: 68px; padding: 18px 26px; cursor: pointer; list-style: none; }
.configurator-page .sidebar-content { display: flex; flex-direction: column; height: calc(100vh - 150px); height: calc(100dvh - 150px); min-height: 0; overflow: hidden; }
.configurator-page .panel-heading::-webkit-details-marker { display: none; }
.configurator-page .panel-heading::after { content: "−"; margin-left: auto; color: var(--accent-2); font-size: 1.2rem; font-weight: 700; }
.configurator-page .step-panel:not([open]) > .panel-heading::after { content: "+"; }
.configurator-page .step-panel:not([open]) { overflow: hidden; padding: 0; }
.configurator-page .step-panel:not([open]) > :not(summary) { display: none; }
.configurator-page .step-panel:not([open]) > .panel-heading { flex-direction: column-reverse; justify-content: flex-end; gap: 16px; height: 100%; margin: 0; padding: 18px 10px; border-bottom: 0; }
.configurator-page .step-panel:not([open]) .eyebrow { margin: 0; writing-mode: vertical-rl; white-space: nowrap; }
.configurator-page .step-panel:not([open]) > .panel-heading::after { margin: 0; }
.configurator-page .eyebrow { color: #656a6e; font: 500 .68rem "JetBrains Mono", monospace; letter-spacing: .04em; text-transform: none; }
.configurator-page .category-nav { flex: 1 1 auto; align-content: start; grid-auto-rows: max-content; gap: 6px; min-height: 0; overflow-y: auto; padding: 0 16px 16px; }
.configurator-page .category-button {
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 9px;
  min-height: 58px;
  padding: 10px 12px;
  border: 1px solid #c9dce0;
  border-radius: 3px;
  color: #4c626b;
  background: transparent;
}
.configurator-page .category-button::before { left: -1px; width: 2px; height: 100%; border-radius: 0; }
.configurator-page .category-button.complete { border-color: #84caa0; color: #20583b; background: #e2f3e8; }
.configurator-page .category-button.problem { border-color: #c94343; }
.configurator-page .category-button:hover { border-color: var(--accent); }
.configurator-page .category-button.complete:hover { background: #d3eddd; }
.configurator-page .category-button.problem:hover { background: #d3eddd; }
.configurator-page .category-button.active { box-shadow: inset 0 0 0 1px currentColor; }
.configurator-page .category-button.active::before { background: var(--accent); }
.configurator-page .category-button .step-index,
.configurator-page .category-button.active .step-index,
.configurator-page .category-button.complete .step-index {
  display: block;
  width: auto;
  height: auto;
  border: 0;
  color: inherit;
  background: transparent;
  font-size: .68rem;
}
.configurator-page .category-button.complete .step-index { color: inherit; }
.configurator-page .category-button .category-label { font-size: .82rem; font-weight: 500; }
.configurator-page .category-button.active .category-label { font-weight: 700; }
.configurator-page .category-text { display: grid; min-width: 0; text-align: left; }
.configurator-page .category-top { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; min-width: 0; }
.configurator-page .category-watts { flex: 0 0 auto; font: 700 .68rem "JetBrains Mono", monospace; }
.configurator-page .category-detail { display: flex; justify-content: space-between; gap: 6px; min-width: 0; margin-top: 4px; color: inherit; font-size: .7rem; font-weight: 500; }
.configurator-page .category-detail span:first-child { overflow: hidden; min-width: 0; text-overflow: ellipsis; white-space: nowrap; }
.configurator-page .category-detail span:last-child:not(:first-child) { flex: 0 0 auto; }

.configurator-page .selection-stack {
  grid-area: picker;
  gap: 18px;
  min-width: 0;
  padding: 38px clamp(30px, 4vw, 58px) 20px;
  background: #f8f8f6;
}
.configurator-page .selection-panel {
  min-height: 720px;
  padding: 0;
  border: 0;
  background: transparent;
}
.configurator-page .selection-header { align-items: flex-start; }
.configurator-page h1 { color: #191b1d; font-size: clamp(1.8rem, 2.4vw, 2.45rem); letter-spacing: -.04em; }
.configurator-page .category-description { max-width: 720px; color: #4f5458; font-size: 1rem; line-height: 1.55; }
.configurator-page .lesson-trigger {
  width: 30px;
  height: 30px;
  min-height: 30px;
  border-color: rgba(0, 136, 183, .45);
  color: var(--accent-2);
  background: #fff;
}
.configurator-page .context-note {
  margin: 20px 0 0;
  padding: 10px 13px;
  border-left-color: var(--accent);
  color: #4f5c61;
  background: #edf7fa;
}
.configurator-page .catalog-tools {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(170px, .45fr) auto;
  align-items: end;
  gap: 12px;
  margin-top: 20px;
  padding: 14px;
  border: 1px solid var(--line);
  background: #f5f7f6;
}
.configurator-page .catalog-tools[hidden] { display: none; }
.configurator-page .catalog-tools label { display: grid; gap: 6px; min-width: 0; color: #62676b; font-size: .72rem; font-weight: 700; }
.configurator-page .catalog-tools input,
.configurator-page .catalog-tools select {
  width: 100%;
  min-height: 42px;
  padding: 9px 11px;
  border: 1px solid #cfd5d3;
  border-radius: 2px;
  color: var(--text);
  background: #fff;
  font: inherit;
}
.configurator-page .catalog-status { min-width: 145px; margin: 0 0 11px; color: #6b7073; font-size: .74rem; text-align: right; }
.configurator-page .catalog-more { display: block; margin: 18px auto 0; }
.configurator-page .catalog-more[hidden] { display: none; }
.configurator-page .catalog-empty { grid-column: 1 / -1; margin: 0; padding: 28px; border: 1px dashed var(--line); color: #656b6e; text-align: center; }
.configurator-page .workflow-panel {
  margin-top: 14px;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: #fff;
}
.configurator-page .workflow-panel > summary {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 13px;
  color: #50555a;
  cursor: pointer;
  font-size: .76rem;
  list-style-position: inside;
}
.configurator-page .workflow-panel > summary span:last-child { color: #7d8286; }
.configurator-page .diagnostics-panel { padding: 14px; border-top: 1px solid var(--line); background: #fafbfa; }
.configurator-page .assignment-brief h3 { margin: 4px 0 8px; font-size: 1rem; }
.configurator-page .assignment-brief > p:not(.eyebrow, .assignment-note) { margin: 0; color: var(--muted); font-size: .82rem; line-height: 1.5; }
.configurator-page .assignment-targets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 14px 0; }
.configurator-page .assignment-targets > div { padding: 9px 10px; border: 1px solid var(--line); background: #fff; }
.configurator-page .assignment-targets dt { color: var(--faint); font-size: .65rem; text-transform: uppercase; }
.configurator-page .assignment-targets dd { margin: 3px 0 0; font-size: .78rem; font-weight: 700; }
.configurator-page .assignment-brief h4 { margin: 12px 0 7px; font-size: .76rem; }
.configurator-page .assignment-weights { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px 14px; margin: 0; padding: 0; list-style: none; }
.configurator-page .assignment-weights li { display: flex; justify-content: space-between; gap: 10px; padding-bottom: 4px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: .72rem; }
.configurator-page .assignment-weights strong { color: var(--text); }
.configurator-page .assignment-requirements { display: grid; gap: 5px; margin: 0; padding-left: 20px; color: var(--muted); font-size: .74rem; }
.configurator-page .assignment-note { margin: 12px 0 0; color: var(--faint); font-size: .72rem; line-height: 1.45; }
.configurator-page .diagnostic { border-color: var(--line); background: #fff; }
.configurator-page .diagnostic-icon { background: #edf7fa; }
.configurator-page .component-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); gap: 12px; margin-top: 20px; }
.configurator-page .component-option { grid-template-rows: 1fr auto; }
.configurator-page .component-card {
  min-height: 118px;
  padding: 14px 16px;
  border-color: var(--line);
  border-radius: 4px 4px 0 0;
  color: var(--text);
  background: #fff;
  box-shadow: 0 1px 2px rgba(20, 32, 38, .03);
}
.configurator-page .component-card:hover:not(.blocked) { transform: none; border-color: #9eb7c1; background: #fff; box-shadow: 0 3px 10px rgba(20, 32, 38, .08); }
.configurator-page .component-card.selected { border-color: var(--accent); background: #edf8fb; box-shadow: inset 0 0 0 1px var(--accent); }
.configurator-page .component-card.blocked { color: #6e5b5b; background: #fff6f6; }
.configurator-page .component-card.legacy-card { border-style: dashed; background: #fffaf2; }
.configurator-page .component-card.legacy-card.selected { border-style: solid; border-color: var(--accent); background: #edf8fb; }
.configurator-page .component-card .maker { color: #62676b; }
.configurator-page .component-card h3 { margin-top: 6px; color: var(--text); font-size: 1.08rem; }
.configurator-page .component-card .price { color: var(--text); }
.configurator-page .component-card .specs li { border-color: var(--line); color: #63686c; background: #f4f5f3; }
.configurator-page .component-card .recorded-mark { color: var(--accent-2); }
.configurator-page .product-sources {
  display: grid;
  gap: 5px;
  padding: 9px 16px;
  border-color: var(--line);
  border-radius: 0 0 4px 4px;
  color: #676c70;
  background: #fff;
}
.configurator-page .source-links a,
.configurator-page .research-card a { color: #006fba; }
.configurator-page .research-current {
  padding: 20px;
  border-color: var(--line);
  border-radius: 4px;
  background: #fff;
}
.configurator-page .selection-panel[data-component-phase="pick"] #research-current-section,
.configurator-page .selection-panel[data-component-phase="research"] #catalog-tools,
.configurator-page .selection-panel[data-component-phase="research"] #component-grid,
.configurator-page .selection-panel[data-component-phase="research"] #catalog-more,
.configurator-page .selection-panel[data-component-phase="research"] #screws-heading,
.configurator-page .selection-panel[data-component-phase="research"] #optional-network { display: none; }
.configurator-page .selection-panel[data-component-phase="research"] #research-current-section {
  margin-top: 24px;
  animation: component-research-enter .22s ease-out both;
}
@keyframes component-research-enter {
  from { opacity: .45; transform: translateX(32px); }
  to { opacity: 1; transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) {
  .configurator-page .selection-panel[data-component-phase="research"] #research-current-section { animation: none; }
}
.configurator-page .research-card { border-color: var(--line); background: #f8f9f8; }
.configurator-page .research-fields input,
.configurator-page .research-fields select { color: var(--text); background: #fff; }
.configurator-page .step-actions { margin-top: 28px; padding-top: 20px; }
.configurator-page .selection-panel[data-component-phase="research"] .step-actions { flex-wrap: wrap; }
.configurator-page .selection-panel[data-component-phase="research"] #component-commit-button { margin-left: auto; }
.configurator-page .step-actions .btn { min-width: 112px; border-radius: 3px; }
.configurator-page .step-actions .btn-primary { min-width: 170px; }

.configurator-page .btn { border-radius: 3px; }
.configurator-page .btn-primary { color: #fff; background: var(--accent); box-shadow: none; }
.configurator-page .btn-primary:hover:not(:disabled) { background: var(--accent-2); }
.configurator-page .btn-primary:disabled { color: #9b9f9f; background: #e6e8e6; }
.configurator-page .btn-outline { color: #454a4e; border-color: var(--line-bright); background: #fff; }
.configurator-page .btn-ghost { color: #676c70; }
.configurator-page .btn-ghost:hover { color: var(--text); background: var(--surface); }
.configurator-page .network-panel {
  padding: 0;
  border-color: var(--line);
  border-radius: 4px;
  background: #fff;
  box-shadow: none;
}
.configurator-page .network-panel[hidden],
.configurator-page .optional-section-heading[hidden] { display: none; }
.configurator-page .optional-section-heading { margin: 22px 0 14px; font-size: 1rem; }
.configurator-page .selection-panel .network-panel { margin-top: 24px; }
.configurator-page .network-none { margin-bottom: 18px; }
.configurator-page .network-none[aria-pressed="true"] { border-color: var(--accent); color: var(--accent-2); background: #edf8fb; }
.configurator-page .network-summary { padding: 16px 18px; }
.configurator-page .network-summary strong { color: var(--text); }
.configurator-page .network-total { color: var(--accent-2); border-color: rgba(0, 136, 183, .35); }
.configurator-page .network-body { margin: 0; padding: 18px; border-color: var(--line); }
.configurator-page .network-card { border-color: var(--line); background: #f8f9f8; }
.configurator-page .network-card.selected { border-color: var(--accent); background: #edf8fb; }
.configurator-page .network-group-title { color: var(--text); }
.configurator-page .network-info { color: var(--accent-2); background: #fff; }

.configurator-page .visual-stack { display: contents; }
.configurator-page .visual-panel {
  grid-area: visual;
  margin: 0 clamp(30px, 4vw, 58px) 40px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: #fff;
}
.configurator-page .visual-panel > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 16px 18px;
  color: #53585c;
  cursor: pointer;
  list-style: none;
}
.configurator-page .visual-panel > summary::-webkit-details-marker { display: none; }
.configurator-page .visual-panel > summary::after { margin-left: 8px; color: var(--accent); content: "+"; font-size: 1.2rem; }
.configurator-page .visual-panel[open] > summary::after { content: "−"; }
.configurator-page .visual-panel > summary > span:first-child { display: grid; }
.configurator-page .visual-panel > summary > span:last-child { margin-left: auto; color: #777c80; font-size: .74rem; }
.configurator-page .visual-panel > summary strong { color: var(--text); }
.configurator-page .visual-content { padding: 18px; border-top: 1px solid var(--line); }
.configurator-page .visual-heading { margin-bottom: 14px; }
.configurator-page .view-switch { border-color: var(--line); background: var(--surface); }
.configurator-page .view-button { color: #656a6e; }
.configurator-page .view-button.active { color: #fff; background: var(--accent); }
.configurator-page .svg-frame { border-color: #cbd2d2; background: #eef2f3; }

.configurator-page .build-panel {
  flex: 0 0 auto;
  margin: 0;
  padding: 22px 16px 26px;
  border: 0;
  border-top: 1px solid var(--line);
  background: transparent;
}
.configurator-page .build-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; padding-bottom: 0; border: 0; }
.configurator-page .build-heading h2 { margin: 0; font-size: .82rem; }
.configurator-page .build-heading > span { color: #6d7276; font: 500 .72rem "JetBrains Mono", monospace; }
.configurator-page .build-metrics { gap: 6px; margin-top: 0; padding-top: 0; border: 0; }
.configurator-page .build-metrics > div { min-width: 0; padding: 9px 8px; border: 0; border-radius: 2px; background: #e9eeec; }
.configurator-page .build-metrics span { font-size: .58rem; letter-spacing: 0; }
.configurator-page .build-metrics strong { overflow-wrap: anywhere; color: var(--text); font-size: .72rem; }
.configurator-page .research-overview { margin-top: 14px; border-color: var(--line); }
.configurator-page .research-overview > summary { padding: 2px 0; color: #3d4245; cursor: pointer; font-size: .82rem; font-weight: 700; }
.configurator-page .research-overview p,
.configurator-page .research-overview li { color: #6d7276; }
.configurator-page .build-actions { display: grid; gap: 8px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.configurator-page .build-actions > .btn { width: 100%; }
.configurator-page .build-actions > small { color: #777c80; font-size: .68rem; text-align: center; }
.configurator-page .build-actions > div { display: flex; justify-content: space-between; }
.configurator-page .build-actions > div .btn { padding-inline: 0; }

.configurator-page .safety-fab { color: #fff; border-color: #fff; background: var(--accent); box-shadow: 0 6px 18px rgba(0, 111, 150, .24); }
.configurator-page .lesson-dialog { color: var(--text); border-color: var(--line); border-radius: 5px; background: #fff; box-shadow: 0 24px 70px rgba(30, 42, 48, .24); }
.configurator-page .lesson-dialog::backdrop { background: rgba(29, 38, 43, .45); }
.configurator-page .dialog-close,
.configurator-page .compatibility-dialog-close { color: #62676b; border-color: var(--line); background: #fff; }
.configurator-page .lesson-lead { color: #33464d; background: #edf8fb; }
.configurator-page .lesson-product,
.configurator-page .lesson-section { color: #5d6266; border-color: var(--line); background: #f7f8f7; }
.configurator-page .lesson-section ul { color: #5d6266; }
.configurator-page .compatibility-intro { color: #4f5458; background: #fff7e8; }
.configurator-page .compatibility-issue { background: #fff7f7; }
.configurator-page .toast { border-color: rgba(0, 149, 189, .4); color: var(--text); background: #fff; box-shadow: 0 12px 32px rgba(30, 42, 48, .18); }
.configurator-page .site-footer { margin: 0; border-top-color: var(--line); background: var(--surface); box-shadow: none; }
.configurator-page .site-footer-content { width: min(1100px, calc(100% - 40px)); }
.configurator-page .ai-disclosure-mark { color: #fff; border-color: var(--accent); background: var(--accent); }
.configurator-page .ai-disclosure strong { color: #34383b; }
.configurator-page .ai-disclosure p { color: #6f7478; }

@media (max-width: 1260px) {
  .configurator-page .workspace { --steps-width: 300px; }
}

@media (max-width: 820px) {
  .configurator-page .topbar { position: static; padding: 12px; }
  .configurator-page .mode-navigation { justify-self: stretch; justify-content: stretch; overflow: visible; }
  .configurator-page .mode-navigation a { flex: 1 1 auto; min-width: 0; }
  .configurator-page .difficulty-panel { grid-column: auto; justify-self: stretch; flex-wrap: wrap; }
  .configurator-page .difficulty-options { flex: 1 1 auto; }
  .configurator-page .difficulty-options label { flex: 1 1 0; }
  .configurator-page .difficulty-options label > span { padding-inline: 8px; text-align: center; }
  .configurator-page .expert-controls { margin-inline: auto; }
  .configurator-page .expert-controls > summary span { display: none; }
  .configurator-page .workspace { display: flex; min-height: 0; }
  .configurator-page .purpose-gate { width: calc(100% - 24px); margin: 18px auto 36px; padding: 26px 22px; }
  .configurator-page .purpose-options { grid-template-columns: 1fr; }
  .configurator-page .custom-purpose-heading,
  .configurator-page .custom-purpose-actions { align-items: stretch; flex-direction: column; }
  .configurator-page .custom-purpose-fields,
  .configurator-page .custom-purpose-weights,
  .configurator-page .expert-purpose-fields { grid-template-columns: 1fr; }
  .configurator-page .custom-purpose-wide { grid-column: auto; }
  .configurator-page .step-panel { display: block; position: static; height: auto; overflow: visible; border: 0; border-bottom: 1px solid var(--line); }
  .configurator-page .sidebar-content { display: block; height: auto; overflow: visible; }
  .configurator-page .category-nav { overflow-x: auto; overflow-y: hidden; }
  .configurator-page .panel-heading { padding: 14px 18px; }
  .configurator-page .step-panel:not([open]) > .panel-heading { flex-direction: row; justify-content: space-between; height: auto; padding: 14px 18px; }
  .configurator-page .step-panel:not([open]) .eyebrow { writing-mode: horizontal-tb; }
  .configurator-page .step-panel:not([open]) > .panel-heading::after { margin-left: auto; }
  .configurator-page .selection-stack { padding: 26px 18px 16px; }
  .configurator-page .selection-panel { min-height: 0; }
  .configurator-page .component-grid { grid-template-columns: 1fr; }
  .configurator-page .catalog-tools { grid-template-columns: 1fr; align-items: stretch; }
  .configurator-page .catalog-status { margin: 0; text-align: left; }
  .configurator-page .assignment-targets,
  .configurator-page .assignment-weights { grid-template-columns: 1fr; }
  .configurator-page .visual-panel { width: auto; margin: 0 18px 24px; }
}

@media (max-width: 520px) {
  .configurator-page .brand-logo { width: 62px; }
  .configurator-page .brand-logo img { width: 52px; }
  .configurator-page .brand-title strong { font-size: .9rem; }
  .configurator-page .selection-header { display: block; }
  .configurator-page .workflow-panel > summary { display: grid; }
  .configurator-page .step-actions .btn-primary { min-width: 130px; }
}

.configurator-page .theme-toggle {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid var(--line-bright);
  border-radius: 4px;
  color: #3f4548;
  background: #fff;
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
}
.configurator-page .theme-toggle:hover { color: var(--accent-2); border-color: var(--accent); }

html[data-theme="dark"] .configurator-page {
  --bg: #0f171b;
  --bg-2: #141f24;
  --panel: #172329;
  --panel-solid: #172329;
  --surface: #1c2a30;
  --surface-2: #22343c;
  --line: #304047;
  --line-bright: #465a63;
  --text: #e3ecef;
  --muted: #a8b7bd;
  --faint: #84979f;
  --accent: #27a8cf;
  --accent-2: #65c5e5;
  --cyan: #42b8d8;
  --warning: #f0ad4e;
  --danger: #ed7a72;
  --success: #66c28e;
  color: var(--text);
  background: #0f171b;
}
html[data-theme="dark"] .configurator-page .topbar { border-color: var(--line); border-top-color: #3bb6bd; background: rgba(17, 27, 32, .98); }
html[data-theme="dark"] .configurator-page .brand-title { border-color: var(--line); }
html[data-theme="dark"] .configurator-page .brand-title strong { color: #edf4f6; }
html[data-theme="dark"] .configurator-page .brand-title small,
html[data-theme="dark"] .configurator-page .difficulty-label { color: #9babb2; }
html[data-theme="dark"] .configurator-page .mode-navigation { border-color: var(--line); background: #141f24; }
html[data-theme="dark"] .configurator-page .mode-navigation a { color: #aebcc1; }
html[data-theme="dark"] .configurator-page .mode-navigation a:hover,
html[data-theme="dark"] .configurator-page .mode-navigation a:focus-visible { color: #edf4f6; background: #1d2b31; }
html[data-theme="dark"] .configurator-page .mode-navigation a.active { border-color: #3b5059; color: #fff; background: #22343c; box-shadow: none; }
html[data-theme="dark"] .configurator-page .difficulty-options { border-color: var(--line-bright); }
html[data-theme="dark"] .configurator-page .difficulty-options label { border-color: var(--line); background: #172329; }
html[data-theme="dark"] .configurator-page .difficulty-options strong { color: #b9c7cc; }
html[data-theme="dark"] .configurator-page .difficulty-options label:has(input:checked) { background: #168db3; }
html[data-theme="dark"] .configurator-page #example-button,
html[data-theme="dark"] .configurator-page .theme-toggle { color: #c5d1d5; border-color: var(--line-bright); background: #172329; }
html[data-theme="dark"] .configurator-page .theme-toggle:hover { color: #fff; border-color: var(--accent); }
html[data-theme="dark"] .configurator-page .expert-controls { border-color: var(--line); color: var(--text); background: #172329; box-shadow: 0 14px 38px rgba(0, 0, 0, .42); }
html[data-theme="dark"] .configurator-page .expert-controls select { color: var(--text); border-color: var(--line-bright); background: #10191d; }
html[data-theme="dark"] .configurator-page .step-panel { border-color: var(--line); background: #121c21; }
html[data-theme="dark"] .configurator-page .category-button { border-color: #405a63; color: #bed2d8; background: transparent; }
html[data-theme="dark"] .configurator-page .category-button.complete { border-color: #43825f; color: #b6e6c8; background: #1d3a2c; }
html[data-theme="dark"] .configurator-page .category-button.problem { border-color: #ed7a72; }
html[data-theme="dark"] .configurator-page .category-button:hover { border-color: var(--accent); }
html[data-theme="dark"] .configurator-page .category-button.complete:hover { background: #254734; }
html[data-theme="dark"] .configurator-page .category-button.problem:hover { background: #254734; }
html[data-theme="dark"] .configurator-page .category-button.active { box-shadow: inset 0 0 0 1px currentColor; }
html[data-theme="dark"] .configurator-page .category-button .step-index,
html[data-theme="dark"] .configurator-page .category-button.active .step-index,
html[data-theme="dark"] .configurator-page .category-button.complete .step-index { color: inherit; }
html[data-theme="dark"] .configurator-page .selection-stack { background: #0f171b; }
html[data-theme="dark"] .configurator-page .purpose-gate,
html[data-theme="dark"] .configurator-page .purpose-card { color: var(--text); border-color: var(--line); background: #172329; }
html[data-theme="dark"] .configurator-page .purpose-card:hover { border-color: var(--accent); box-shadow: 0 10px 28px rgba(0, 0, 0, .28); }
html[data-theme="dark"] .configurator-page .purpose-card-label { color: #8bd7ef; border-color: #3f788c; background: #17313a; }
html[data-theme="dark"] .configurator-page .purpose-card strong { color: #edf4f6; }
html[data-theme="dark"] .configurator-page .purpose-card small { border-color: var(--line); }
html[data-theme="dark"] .configurator-page .custom-purpose-form { color: var(--text); border-color: var(--line); border-top-color: var(--accent-3); background: #111b20; }
html[data-theme="dark"] .configurator-page .custom-purpose-form input,
html[data-theme="dark"] .configurator-page .custom-purpose-form select,
html[data-theme="dark"] .configurator-page .custom-purpose-form textarea { color: var(--text); border-color: var(--line-bright); background: #172329; }
html[data-theme="dark"] .configurator-page .custom-purpose-weights,
html[data-theme="dark"] .configurator-page .expert-purpose-fields { border-color: var(--line); }
html[data-theme="dark"] .configurator-page h1,
html[data-theme="dark"] .configurator-page h2,
html[data-theme="dark"] .configurator-page .component-card h3 { color: #f0f5f6; }
html[data-theme="dark"] .configurator-page .category-description { color: #aab8bd; }
html[data-theme="dark"] .configurator-page .lesson-trigger { color: var(--accent-2); border-color: #3f788c; background: #172329; }
html[data-theme="dark"] .configurator-page .context-note { color: #bfd0d6; border-left-color: var(--accent); background: #142830; }
html[data-theme="dark"] .configurator-page .catalog-tools { border-color: var(--line); background: #111b20; }
html[data-theme="dark"] .configurator-page .catalog-tools label,
html[data-theme="dark"] .configurator-page .catalog-status,
html[data-theme="dark"] .configurator-page .catalog-empty { color: #a8b8be; }
html[data-theme="dark"] .configurator-page .catalog-tools input,
html[data-theme="dark"] .configurator-page .catalog-tools select { color: var(--text); border-color: var(--line); background: #172329; }
html[data-theme="dark"] .configurator-page .workflow-panel { border-color: var(--line); background: #172329; }
html[data-theme="dark"] .configurator-page .workflow-panel > summary { color: #bdc9cd; }
html[data-theme="dark"] .configurator-page .workflow-panel > summary span:last-child { color: #8fa1a8; }
html[data-theme="dark"] .configurator-page .diagnostics-panel { border-color: var(--line); background: #121c21; }
html[data-theme="dark"] .configurator-page .assignment-targets > div { border-color: var(--line); background: #172329; }
html[data-theme="dark"] .configurator-page .assignment-weights li { border-color: var(--line); }
html[data-theme="dark"] .configurator-page .diagnostic { border-color: var(--line); background: #172329; }
html[data-theme="dark"] .configurator-page .diagnostic-icon { background: #20333b; }
html[data-theme="dark"] .configurator-page .component-card { color: var(--text); border-color: var(--line); background: #172329; box-shadow: none; }
html[data-theme="dark"] .configurator-page .component-card:hover:not(.blocked) { border-color: #58717b; background: #1b2930; box-shadow: none; }
html[data-theme="dark"] .configurator-page .component-card.selected,
html[data-theme="dark"] .configurator-page .component-card.legacy-card.selected { border-color: var(--accent); background: #183642; }
html[data-theme="dark"] .configurator-page .component-card.blocked { color: #ddb8b4; background: #2b2021; }
html[data-theme="dark"] .configurator-page .component-card.legacy-card { background: #24272c; }
html[data-theme="dark"] .configurator-page .component-card .maker { color: #9fb0b6; }
html[data-theme="dark"] .configurator-page .component-card .price { color: #f0f5f6; }
html[data-theme="dark"] .configurator-page .component-card .specs li { color: #a9b8bd; border-color: var(--line); background: #111b20; }
html[data-theme="dark"] .configurator-page .product-sources { color: #97a9b0; border-color: var(--line); background: #121c21; }
html[data-theme="dark"] .configurator-page .source-links a,
html[data-theme="dark"] .configurator-page .research-card a { color: #70cae7; }
html[data-theme="dark"] .configurator-page .research-current,
html[data-theme="dark"] .configurator-page .research-card { border-color: var(--line); background: #172329; }
html[data-theme="dark"] .configurator-page .research-fields input,
html[data-theme="dark"] .configurator-page .research-fields select { color: var(--text); border-color: var(--line-bright); background: #10191d; }
html[data-theme="dark"] .configurator-page .btn-outline { color: #c4d0d4; border-color: var(--line-bright); background: #172329; }
html[data-theme="dark"] .configurator-page .btn-ghost { color: #a8b7bd; }
html[data-theme="dark"] .configurator-page .btn-ghost:hover { color: #fff; background: #223139; }
html[data-theme="dark"] .configurator-page .btn-primary:disabled { color: #697b82; background: #26363c; }
html[data-theme="dark"] .configurator-page .network-panel,
html[data-theme="dark"] .configurator-page .network-card { color: var(--text); border-color: var(--line); background: #172329; }
html[data-theme="dark"] .configurator-page .network-card.selected { border-color: var(--accent); background: #183642; }
html[data-theme="dark"] .configurator-page .network-none[aria-pressed="true"] { color: var(--accent); background: #183642; }
html[data-theme="dark"] .configurator-page .network-summary strong,
html[data-theme="dark"] .configurator-page .network-group-title { color: #edf4f6; }
html[data-theme="dark"] .configurator-page .network-info { color: var(--accent-2); border-color: var(--line-bright); background: #10191d; }
html[data-theme="dark"] .configurator-page .visual-panel { border-color: var(--line); background: #172329; }
html[data-theme="dark"] .configurator-page .visual-panel > summary { color: #b5c2c7; }
html[data-theme="dark"] .configurator-page .visual-panel > summary strong { color: #edf4f6; }
html[data-theme="dark"] .configurator-page .visual-panel > summary > span:last-child { color: #93a4aa; }
html[data-theme="dark"] .configurator-page .visual-content { border-color: var(--line); }
html[data-theme="dark"] .configurator-page .view-switch { border-color: var(--line); background: #10191d; }
html[data-theme="dark"] .configurator-page .view-button { color: #9caeb4; }
html[data-theme="dark"] .configurator-page .svg-frame { border-color: var(--line); background: #10191d; }
html[data-theme="dark"] .configurator-page .build-panel { border-color: var(--line); background: transparent; }
html[data-theme="dark"] .configurator-page .build-heading > span { color: #9dabb0; }
html[data-theme="dark"] .configurator-page .build-metrics,
html[data-theme="dark"] .configurator-page .research-overview,
html[data-theme="dark"] .configurator-page .build-actions { border-color: var(--line); }
html[data-theme="dark"] .configurator-page .build-metrics > div { background: #1a272d; }
html[data-theme="dark"] .configurator-page .build-metrics strong,
html[data-theme="dark"] .configurator-page .research-overview > summary { color: #edf4f6; }
html[data-theme="dark"] .configurator-page .research-overview p,
html[data-theme="dark"] .configurator-page .research-overview li,
html[data-theme="dark"] .configurator-page .build-actions > small { color: #92a3a9; }
html[data-theme="dark"] .configurator-page .lesson-dialog { color: var(--text); border-color: var(--line); background: #172329; box-shadow: 0 24px 70px rgba(0, 0, 0, .55); }
html[data-theme="dark"] .configurator-page .dialog-close,
html[data-theme="dark"] .configurator-page .compatibility-dialog-close { color: #b7c4c8; border-color: var(--line); background: #121c21; }
html[data-theme="dark"] .configurator-page .lesson-lead { color: #c9d9de; background: #17313a; }
html[data-theme="dark"] .configurator-page .lesson-product,
html[data-theme="dark"] .configurator-page .lesson-section { color: #b1c0c5; border-color: var(--line); background: #121c21; }
html[data-theme="dark"] .configurator-page .lesson-section ul { color: #b1c0c5; }
html[data-theme="dark"] .configurator-page .compatibility-intro { color: #d4c6a8; background: #2b271d; }
html[data-theme="dark"] .configurator-page .compatibility-issue { background: #2b2021; }
html[data-theme="dark"] .configurator-page .toast { color: #edf4f6; border-color: #3e7184; background: #172329; }
html[data-theme="dark"] .configurator-page .site-footer { border-color: var(--line); background: #10181c; }
html[data-theme="dark"] .configurator-page .ai-disclosure strong { color: #dce7ea; }
html[data-theme="dark"] .configurator-page .ai-disclosure p { color: #8fa0a6; }

@media (max-width: 520px) {
  .configurator-page .theme-toggle { margin-left: auto; }
}

@media (forced-colors: active) {
  .configurator-page .theme-toggle { border: 2px solid ButtonText; }
}

/* Kompakter Konfigurator-Header mit tastaturbedienbarem Vollbildmenü. */
.configurator-page[data-menu-open="true"] { overflow: hidden; }
.configurator-page .menu-trigger,
.configurator-page .menu-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 42px;
  padding: 8px 16px;
  border: 1px solid var(--line-bright);
  border-radius: 4px;
  color: var(--text);
  background: var(--panel);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.configurator-page .menu-trigger:hover,
.configurator-page .menu-close:hover { border-color: var(--accent); color: var(--accent-2); }
.configurator-page .menu-trigger-icon { display: grid; gap: 4px; width: 18px; }
.configurator-page .menu-trigger-icon i { display: block; height: 2px; background: currentColor; }
.configurator-page .fullscreen-menu:not([open]) { display: none; }
.configurator-page .fullscreen-menu[open] {
  position: fixed;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  border: 0;
  color: var(--text);
  background: var(--bg);
}
.configurator-page .fullscreen-menu-inner {
  width: min(880px, calc(100% - 40px));
  min-height: 100%;
  margin: 0 auto;
  padding: clamp(24px, 5vh, 56px) 0 48px;
}
.configurator-page .fullscreen-menu-heading {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 32px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line);
}
.configurator-page .fullscreen-menu-heading .eyebrow { margin: 0 0 8px; }
.configurator-page .fullscreen-menu-heading h2 { margin: 0; color: var(--text); font-size: clamp(1.7rem, 4vw, 2.5rem); }
.configurator-page .menu-close span { font-size: 1.4rem; line-height: 1; }
.configurator-page .fullscreen-menu .mode-navigation {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  width: 100%;
  margin-bottom: 36px;
  padding: 0;
  border: 0;
  background: transparent;
}
.configurator-page .fullscreen-menu .mode-navigation a {
  display: flex;
  align-items: center;
  min-height: 72px;
  padding: 18px;
  border: 1px solid var(--line-bright);
  color: var(--text);
  background: var(--panel);
  text-align: left;
}
.configurator-page .fullscreen-menu .mode-navigation a.active {
  border-color: var(--accent);
  color: #fff;
  background: var(--accent);
}
.configurator-page .fullscreen-menu .mode-navigation a[hidden] { display: none; }
.configurator-page .fullscreen-menu .difficulty-panel {
  display: grid;
  justify-self: stretch;
  gap: 14px;
  width: 100%;
}
.configurator-page .fullscreen-menu .difficulty-label { color: var(--text); font-size: 1rem; font-weight: 700; }
.configurator-page .fullscreen-menu .difficulty-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; overflow: visible; border: 0; }
.configurator-page .fullscreen-menu .difficulty-options label { border: 1px solid var(--line-bright); border-radius: 4px; }
.configurator-page .fullscreen-menu .difficulty-options label > span { min-height: 88px; padding: 18px; }
.configurator-page .fullscreen-menu .difficulty-options strong { color: var(--text); font-size: 1rem; font-weight: 700; }
.configurator-page .fullscreen-menu .difficulty-options small { display: block; margin-top: 6px; font-size: .76rem; }
.configurator-page .fullscreen-menu .difficulty-options label:has(input:checked) strong,
.configurator-page .fullscreen-menu .difficulty-options label:has(input:checked) small { color: #fff; }
.configurator-page .menu-theme-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 18px; padding: 16px 0; border-top: 1px solid var(--line); font-weight: 700; }
.configurator-page .menu-theme-row .theme-toggle { margin: 0; }
.configurator-page .step-tools { padding: 10px 26px 20px; }
.configurator-page .step-tools #example-button { display: block; width: 100%; text-align: center; }

html[data-theme="dark"] .configurator-page .menu-trigger,
html[data-theme="dark"] .configurator-page .menu-close,
html[data-theme="dark"] .configurator-page .fullscreen-menu .mode-navigation a,
html[data-theme="dark"] .configurator-page .fullscreen-menu .difficulty-options label { color: var(--text); border-color: var(--line-bright); background: var(--panel); }
html[data-theme="dark"] .configurator-page .fullscreen-menu .mode-navigation a.active,
html[data-theme="dark"] .configurator-page .fullscreen-menu .difficulty-options label:has(input:checked) { color: #fff; border-color: var(--accent); background: var(--accent); }
html[data-theme="dark"] .configurator-page .fullscreen-menu .difficulty-options label:has(input:checked) strong,
html[data-theme="dark"] .configurator-page .fullscreen-menu .difficulty-options label:has(input:checked) small { color: #fff; }

@media (max-width: 820px) {
  .configurator-page .topbar { position: sticky; padding: 10px 18px; }
  .configurator-page .fullscreen-menu .mode-navigation,
  .configurator-page .fullscreen-menu .difficulty-options { grid-template-columns: 1fr; }
  .configurator-page .fullscreen-menu .mode-navigation a { min-height: 54px; }
  .configurator-page .fullscreen-menu .difficulty-options label > span { min-height: 0; }
  .configurator-page .step-tools { padding: 10px 18px 20px; }
}
@media (max-width: 520px) {
  .configurator-page .menu-trigger { padding: 8px 12px; }
  .configurator-page .fullscreen-menu-inner { width: calc(100% - 32px); }
  .configurator-page .menu-close { padding: 8px 10px; }
}
@media (forced-colors: active) {
  .configurator-page .menu-trigger,
  .configurator-page .menu-close,
  .configurator-page .fullscreen-menu .mode-navigation a,
  .configurator-page .fullscreen-menu .difficulty-options label { border: 2px solid ButtonText; }
}