:root {
  color-scheme: dark;
  --bg: #0a0a0d;
  --panel: rgba(16, 16, 20, 0.88);
  --line: rgba(255,255,255,.1);
  --muted: #8e8e99;
  --text: #f0eee8;
  --accent: #e6b548;
  --accent-dim: rgba(230,181,72,.15);
  --radius: 16px;
}

* { box-sizing: border-box; margin: 0; }

body {
  min-height: 100vh;
  font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--bg);
  color: var(--text);
  overflow-x: hidden;
}

/* ── Layout ── */
.app-shell {
  display: grid;
  grid-template-columns: 1fr 380px;
  height: 100vh;
}

/* ── Viewer ── */
.viewer-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  background: linear-gradient(160deg, #0e0e12, #080809);
  overflow: hidden;
}

.viewer-header {
  position: absolute;
  top: 0; left: 0; right: 0;
  padding: 28px 32px;
  z-index: 10;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(10,10,13,.85) 0%, transparent 100%);
}

.eyebrow {
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: .2em;
  font-size: 11px;
  font-weight: 700;
  margin-bottom: 6px;
}

h1 {
  font-size: clamp(28px, 3.5vw, 48px);
  line-height: 1.05;
  letter-spacing: -.04em;
  font-weight: 800;
}

h1 .accent { color: var(--accent); }

.canvas-wrap {
  flex: 1;
  position: relative;
  /* min-height: 0 hebt die Default-Mindesthöhe "auto" von Flex-Items auf.
     Ohne das vergrößert Inhalt im normalen Fluss den Wrap über den
     zugewiesenen Platz hinaus – und weil renderer.setSize() die Höhe
     als Pixelwert aufs Canvas schreibt, schaukelt sich das bei jedem
     Laden weiter hoch. Die am unteren Rand verankerten Toggles rutschen
     dabei aus dem Bild. overflow begrenzt zusätzlich. */
  min-height: 0;
  overflow: hidden;
}

.canvas-wrap canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.viewer-hint {
  position: absolute;
  /* über der Toggle-Reihe: der "Maße"-Toggle ist ebenfalls unten
     zentriert und lag sonst mitten im Hinweistext */
  bottom: 60px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 999px;
  background: rgba(0,0,0,.5);
  border: 1px solid rgba(255,255,255,.1);
  color: var(--muted);
  font-size: 12px;
  pointer-events: none;
  transition: opacity .6s;
  white-space: nowrap;
}

.viewer-hint.hidden { opacity: 0; }

/* ── Controls Panel ── */
.controls-panel {
  display: flex;
  flex-direction: column;
  background: var(--panel);
  backdrop-filter: blur(24px);
  border-left: 1px solid var(--line);
  overflow: hidden;
}

.panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 22px;
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}

h2 { font-size: 20px; letter-spacing: -.02em; font-weight: 700; }

.ghost-button {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  background: rgba(255,255,255,.06);
  border: 1px solid var(--line);
  border-radius: 10px;
  cursor: pointer;
  transition: all .2s;
}

.ghost-button:hover {
  color: var(--text);
  background: rgba(255,255,255,.1);
  border-color: rgba(255,255,255,.2);
}

.controls-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 16px 22px 22px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.12) transparent;
}

/* ── Control Groups ── */
.control-group {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 14px;
  background: rgba(255,255,255,.025);
}

.control-group legend {
  color: var(--accent);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .14em;
  padding: 0 8px;
}

label {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  margin-top: 10px;
}

label:first-of-type { margin-top: 4px; }

select, textarea, button, input[type="text"] { font: inherit; }

select, textarea, input[type="text"] {
  width: 100%;
  color: var(--text);
  background: rgba(255,255,255,.07);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 12px;
  outline: none;
  font-size: 14px;
  transition: border-color .2s, box-shadow .2s;
  color-scheme: dark;
}

select option {
  background: #1e1e24;
  color: var(--text);
}

select:focus, textarea:focus, input[type="text"]:focus {
  border-color: rgba(230,181,72,.6);
  box-shadow: 0 0 0 3px var(--accent-dim);
}

/* ── Toggle Switches ── */
.switch-row {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0 0;
  margin-top: 10px;
  border-top: 1px solid rgba(255,255,255,.06);
}

.switch-row span { color: var(--muted); font-size: 13px; font-weight: 600; }

input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  width: 40px;
  height: 22px;
  border-radius: 999px;
  background: rgba(255,255,255,.12);
  position: relative;
  cursor: pointer;
  transition: background .2s;
  flex-shrink: 0;
}

input[type="checkbox"]::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  transition: transform .2s;
}

input[type="checkbox"]:checked {
  background: var(--accent);
}

input[type="checkbox"]:checked::after {
  transform: translateX(18px);
}

/* ── Summary ── */
.summary-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px;
  background: rgba(0,0,0,.25);
  margin-bottom: 14px;
}

h3 {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
  margin-bottom: 12px;
}

dl {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 6px 12px;
  font-size: 13px;
}

dt { color: var(--muted); }
dd { margin: 0; color: var(--text); font-weight: 650; }

/* ── Price Card ── */
.price-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px;
  background: rgba(0,0,0,.25);
  margin-bottom: 14px;
}

.price-row {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  padding: 4px 0;
  color: var(--muted);
}

.price-row span:last-child {
  color: var(--text);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.price-total {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
  color: var(--accent) !important;
  font-weight: 700;
  font-size: 15px;
}

.price-total span:last-child {
  color: var(--accent);
  font-size: 17px;
  font-weight: 800;
}

/* ── Actions ── */
.actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 12px;
}

button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 0;
  border-radius: 12px;
  padding: 11px 14px;
  color: #18150b;
  background: linear-gradient(135deg, #ffd66b, #dba03b);
  cursor: pointer;
  font-weight: 700;
  font-size: 13px;
  box-shadow: 0 6px 18px rgba(0,0,0,.3);
  transition: transform .15s, box-shadow .15s;
}

button:hover { transform: translateY(-1px); box-shadow: 0 8px 24px rgba(0,0,0,.4); }
button:active { transform: translateY(0); }

button.secondary {
  background: rgba(255,255,255,.08);
  color: var(--text);
  border: 1px solid var(--line);
  box-shadow: none;
}

button.secondary:hover { background: rgba(255,255,255,.12); }

textarea {
  min-height: 100px;
  resize: vertical;
  color: #ccc;
  line-height: 1.45;
  font-size: 12px;
}

/* ── Garden Toggle (bottom-left of viewer) ── */
.garden-toggle {
  position: absolute;
  bottom: 16px;
  left: 16px;
  z-index: 10;
  display: flex !important;
  align-items: center;
  gap: 8px;
  padding: 6px 14px 6px 6px;
  margin: 0;
  border-radius: 999px;
  background: rgba(0,0,0,.55);
  border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(8px);
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}

.garden-toggle span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}

.garden-toggle input[type="checkbox"] {
  width: 34px;
  height: 18px;
}

.garden-toggle input[type="checkbox"]::after {
  width: 12px;
  height: 12px;
}

.garden-toggle input[type="checkbox"]:checked::after {
  transform: translateX(16px);
}

.sound-toggle {
  bottom: 16px;
  left: auto;
  right: 70px;
}

.dimensions-toggle {
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
}

/* ── Daylight vertical slider ── */
.daylight-slider-wrap {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px 8px;
  border-radius: 999px;
  background: rgba(0,0,0,.55);
  border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(8px);
}

.daylight-labels {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  font-size: 13px;
  line-height: 1;
  pointer-events: none;
}

.daylight-labels span {
  opacity: 0.6;
}

.daylight-slider {
  -webkit-appearance: slider-vertical;
  appearance: slider-vertical;
  writing-mode: vertical-lr;
  direction: rtl;
  width: 28px;
  height: 140px;
  cursor: pointer;
  accent-color: var(--accent);
  background: transparent;
  outline: none;
}

.daylight-label-text {
  font-size: 10px;
  font-weight: 700;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: .08em;
  text-align: center;
  white-space: nowrap;
}

/* ── LED-Cube panel (left of viewer, mirrors the daylight slider) ── */
.led-panel {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: 7px;
  width: 132px;
  padding: 12px 13px 14px;
  border-radius: 16px;
  background: rgba(0,0,0,.55);
  border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(8px);
}

/* Ohne LED-Cube gibt es nichts einzustellen */
.led-panel.hidden { display: none; }

.led-panel-title {
  font-size: 10px;
  font-weight: 700;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: .08em;
  white-space: nowrap;
}

.led-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
}

.led-row output {
  font-variant-numeric: tabular-nums;
  color: var(--accent);
}

.led-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  border-radius: 999px;
  background: rgba(255,255,255,.18);
  outline: none;
  cursor: pointer;
  accent-color: var(--accent);
}

.led-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--accent);
  cursor: pointer;
}

.led-slider::-moz-range-thumb {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--accent);
  cursor: pointer;
}

/* Farbton-Regler zeigt das Spektrum, das er durchfährt */
.led-hue {
  background: linear-gradient(to right,
    hsl(0 100% 50%), hsl(60 100% 50%), hsl(120 100% 50%),
    hsl(180 100% 50%), hsl(240 100% 50%), hsl(300 100% 50%), hsl(360 100% 50%));
}

.led-slider:disabled { cursor: not-allowed; opacity: .35; }

.led-rgb-section {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-top: 3px;
  padding-top: 9px;
  border-top: 1px solid rgba(255,255,255,.12);
}

/* Nur bei RGB gibt es eine Farbe zu wählen */
.led-rgb-section.hidden { display: none; }

.led-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 0;
  cursor: pointer;
  user-select: none;
}

.led-toggle span {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
}

.led-toggle input[type="checkbox"] {
  width: 30px;
  height: 16px;
  flex: none;
}

.led-toggle input[type="checkbox"]::after {
  width: 10px;
  height: 10px;
}

.led-toggle input[type="checkbox"]:checked::after {
  transform: translateX(14px);
}

.led-swatch {
  width: 22px;
  height: 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.25);
  background: hsl(30 100% 60%);
}

/* ── Accessory Rows ── */
.accessory-row {
  display: grid !important;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  margin-top: 6px;
  border-top: 1px solid rgba(255,255,255,.06);
}

.accessory-row:first-of-type {
  border-top: none;
  margin-top: 4px;
}

.accessory-row span:first-child {
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
}

.accessory-price {
  color: var(--text);
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.accessory-row input[type="number"] {
  width: 52px;
  padding: 5px 4px 5px 10px;
  color: var(--text);
  background: rgba(255,255,255,.07);
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  outline: none;
  -moz-appearance: textfield;
}

.accessory-row input[type="number"]::-webkit-inner-spin-button,
.accessory-row input[type="number"]::-webkit-outer-spin-button {
  opacity: 1;
}

.accessory-row input[type="number"]:focus {
  border-color: rgba(230,181,72,.6);
  box-shadow: 0 0 0 3px var(--accent-dim);
}

/* ── Coming Soon ── */
.coming-soon {
  position: relative;
  opacity: 0.55;
  pointer-events: none;
}

.coming-soon-badge {
  display: inline-block;
  background: var(--accent);
  color: #18150b;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  padding: 3px 10px;
  border-radius: 999px;
  margin-bottom: 6px;
}

/* ── Responsive ── */
@media (max-width: 900px) {
  .app-shell {
    grid-template-columns: 1fr;
    height: auto;
  }
  .viewer-panel { height: 55vh; min-height: 400px; }
  .controls-panel { border-left: none; border-top: 1px solid var(--line); }

  /* Toggles als umbruchfähige Zeile statt drei einzeln positionierter
     Elemente. Nebeneinander brauchen sie rund 400 px und überlappen
     sich auf schmalen Displays sonst gegenseitig. */
  .viewer-toggles {
    position: absolute;
    left: 8px;
    right: 8px;
    bottom: 8px;
    z-index: 10;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;   /* sonst sitzen die Toggles je nach Emoji-Höhe versetzt */
    gap: 6px;
  }

  .viewer-toggles .garden-toggle {
    position: static;
    left: auto;
    right: auto;
    bottom: auto;
    transform: none;
    padding: 5px 11px 5px 5px;
  }

  .viewer-toggles .garden-toggle span { font-size: 11px; }
  .viewer-toggles .garden-toggle input[type="checkbox"] { width: 30px; height: 16px; }
  .viewer-toggles .garden-toggle input[type="checkbox"]::after { width: 10px; height: 10px; }
  .viewer-toggles .garden-toggle input[type="checkbox"]:checked::after { transform: translateX(14px); }

  /* Der Hinweis beschreibt Maus und Scrollrad und lag hier über der
     Toggle-Zeile. Auf dieser Breite ist beides eher unpassend. */
  .viewer-hint { display: none; }

  /* Bedienpanels kompakter, damit im Viewer Platz fürs Modell bleibt */
  .led-panel { width: 116px; padding: 10px 11px 11px; gap: 6px; }
  .daylight-slider { height: 104px; }
  .daylight-slider-wrap { padding: 10px 7px; }
}

@media (max-width: 500px) {
  .viewer-panel { height: 45vh; min-height: 320px; }
  .viewer-header { padding: 16px 18px; }
  .controls-scroll { padding: 14px 16px 16px; }
  .actions { grid-template-columns: 1fr; }

  /* Auf sehr schmalen Displays konkurrieren beide Panels mit dem
     Modell um die Breite – deshalb schmaler, aber mit Innenmaßen,
     bei denen "Farbwechsel" nicht abgeschnitten wird. */
  /* 118 px: "Farbwechsel" misst bei 10px genau 61 px, dazu Abstand und
     Schalter (5 + 26) – bei 112 px fehlten exakt zwei Pixel. */
  .led-panel { width: 118px; padding: 9px 10px 10px; }
  .led-panel-title { font-size: 9px; }
  .led-row { font-size: 10px; }
  .led-row output { white-space: nowrap; }
  .led-toggle { gap: 5px; }
  .led-toggle span { font-size: 10px; white-space: normal; line-height: 1.2; }
  .led-toggle input[type="checkbox"] { width: 26px; height: 14px; flex: none; }
  .led-toggle input[type="checkbox"]::after { width: 9px; height: 9px; }
  .led-toggle input[type="checkbox"]:checked::after { transform: translateX(12px); }

  .daylight-slider { height: 88px; }
  .daylight-labels { font-size: 11px; }
}

/* Hinweiszeile unter einer Steuergruppe (z. B. Materialhinweis
   der Hausnummer oder Meldung, dass keine Seite frei ist) */
.control-note {
  margin: 2px 0 0;
  font-size: 11px;
  line-height: 1.35;
  color: var(--muted);
  opacity: .85;
}