/* =========================================================================
   HilfBuddy Configurator — Solar-system style
   Layered on top of styles.css. Self-contained — does not override base.
   ========================================================================= */

/* Collapsed (default): Modules panel LEFT, animation window RIGHT. */
.cfg-shell {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 20px;
  align-items: start;
  padding: 24px 20px 80px;
  max-width: 1280px;
  margin: 0 auto;
}
/* the features cards + quote section always span the full shell width */
.cfg-shell > #cfg-features,
.cfg-shell > .cfg-quote-section { grid-column: 1 / -1; }

/* Expanded: animation full-width on top, Modules panel docked BELOW it. */
.cfg-shell.is-expanded {
  grid-template-columns: 1fr;
}
.cfg-shell.is-expanded .cfg-palette-panel { order: 2; }
.cfg-shell.is-expanded #cfg-canvas { order: -1; }
/* palette becomes a horizontal, scrollable strip when docked below */
.cfg-shell.is-expanded .cfg-palette-list {
  flex-direction: row;
  overflow-x: auto;
  padding-bottom: 8px;
}
.cfg-shell.is-expanded .cfg-palette-list .cfg-mod-card { flex: 0 0 220px; }

/* Left modules panel */
.cfg-palette-panel {
  position: sticky;
  top: 84px;
  align-self: start;
  background: rgba(16,16,16,0.55);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 14px 14px 16px;
  max-height: calc(100vh - 104px);
  overflow: auto;
}
html[data-theme="light"] .cfg-palette-panel {
  background: rgba(255,250,240,0.75);
}
.cfg-shell.is-expanded .cfg-palette-panel {
  position: static;
  max-height: none;
  overflow: visible;
}

@media (max-width: 900px) {
  .cfg-shell { grid-template-columns: 1fr; }
  .cfg-palette-panel { position: static; max-height: none; }
  .cfg-palette-list { flex-direction: row; overflow-x: auto; padding-bottom: 8px; }
}

.cfg-h2 { font-family: "Manrope", "Sora", sans-serif; font-size: 18px; margin: 0 0 4px; color: var(--text); letter-spacing: 0.01em; }
.cfg-hint { font-size: 12px; color: rgba(255,255,255,0.55); margin: 0 0 14px; }

/* ---------- Palette ---------------------------------------------------- */
.cfg-palette { position: sticky; top: 84px; }
@media (max-width: 900px) { .cfg-palette { position: static; } }

.cfg-palette-list { display: flex; flex-direction: column; gap: 10px; }
@media (max-width: 900px) {
  .cfg-palette-list { flex-direction: row; overflow-x: auto; padding-bottom: 8px; scroll-snap-type: x mandatory; }
}

.cfg-mod-card {
  background: rgba(16,16,16,0.72);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 10px 12px;
  cursor: grab;
  user-select: none;
  position: relative;
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
}
.cfg-mod-card::before {
  content: "";
  position: absolute; top: 12px; left: 12px;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--planet-color, var(--gold));
  box-shadow: 0 0 12px var(--planet-color, var(--gold));
}
.cfg-mod-card .cfg-mod-head { padding-left: 18px; }
.cfg-mod-card:hover { border-color: var(--gold); }
.cfg-mod-card:active { cursor: grabbing; transform: scale(0.97); }
.cfg-mod-card.is-dragging { opacity: 0.4; }
.cfg-mod-card.is-added { opacity: 0.45; cursor: not-allowed; }
@media (max-width: 900px) {
  .cfg-mod-card { flex: 0 0 200px; scroll-snap-align: start; }
}
.cfg-mod-head { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; }
.cfg-mod-name { font-weight: 700; font-size: 14px; color: var(--text); }
.cfg-mod-price { font-family: "Space Grotesk", monospace; font-size: 11px; color: var(--gold); white-space: nowrap; }
.cfg-mod-tag  { font-size: 11px; color: rgba(255,255,255,0.55); margin-top: 4px; padding-left: 18px; }

/* Keep the configurator's page-level dark background as warm as the rest of
   the site. The animated particle canvas uses randomly positioned nebulae,
   so without this stable wash the page can render almost black by chance. */
html[data-theme="dark"] body:has(.cfg-shell) {
  background:
    radial-gradient(ellipse 64% 46% at 64% 30%, rgba(212,175,55,0.13), rgba(184,115,51,0.07) 46%, transparent 78%),
    radial-gradient(ellipse 48% 42% at 24% 76%, rgba(184,115,51,0.08), transparent 74%),
    #1a1a1a;
  background-attachment: fixed;
}

/* ---------- Solar-system canvas --------------------------------------- */
.cfg-canvas-wrap {
  /* Keep the solar-system canvas distinct without letting one near-black
     rectangle make the whole configurator feel darker than the site. */
  background: #20242c;
  border: 1px solid var(--line);
  border-radius: 18px;
  position: relative;
  overflow: hidden;
  /* 16:9 window that fills its column (right side when collapsed, full width
     when expanded). Compact by default so the page scrolls past it easily. */
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  min-height: 0;
  isolation: isolate;
  cursor: grab;
  --tilt-x: 60deg;    /* tilt down from camera; 0 = top-down, 75 = nearly edge-on */
  --tilt-z: 0deg;     /* rotate galaxy around vertical axis */
  --zoom: 1;
  --orbit-squash: 0.5;
  --deep-space-scale: 1;
  --star-field-scale: 1;
  --deep-space-opacity: 0.72;
}

html[data-theme="light"] .cfg-canvas-wrap {
  background: #20242c;
  --deep-space-opacity: 0.72;
}
.cfg-canvas-wrap.is-dragging-view { cursor: grabbing; }
.cfg-canvas-wrap.is-over { border-color: var(--gold); box-shadow: 0 0 40px rgba(212,175,55,0.25) inset; }

/* deep nebula clouds (parallax behind everything) */
.cfg-nebula {
  position: absolute; inset: -10%;
  background:
    radial-gradient(ellipse 20% 14% at 82% 34%,
      rgba(5,8,15,0.22) 0%,
      rgba(6,9,18,0.40) 22%,
      rgba(63,148,163,0.36) 31%,
      rgba(134,176,164,0.24) 41%,
      rgba(180,92,68,0.20) 52%,
      rgba(91,44,58,0.10) 64%,
      transparent 75%),
    radial-gradient(ellipse 9% 6% at 82% 34%,
      rgba(3,5,10,0.58) 0%,
      rgba(8,12,20,0.34) 58%,
      transparent 72%),
    linear-gradient(118deg,
      transparent 0%,
      transparent 28%,
      rgba(72,88,118,0.17) 36%,
      rgba(178,142,98,0.30) 45%,
      rgba(230,205,165,0.26) 50%,
      rgba(94,103,138,0.18) 57%,
      transparent 68%,
      transparent 100%),
    radial-gradient(55% 24% at 52% 46%, rgba(228,202,160,0.23), transparent 68%),
    radial-gradient(35% 22% at 22% 28%, rgba(74,116,150,0.16), transparent 72%),
    radial-gradient(42% 26% at 82% 66%, rgba(126,92,132,0.14), transparent 74%),
    radial-gradient(60% 44% at 50% 50%, rgba(18,23,42,0), rgba(0,0,0,0.46) 78%);
  filter: blur(11px) saturate(108%);
  opacity: clamp(0.28, var(--deep-space-opacity), 0.72);
  animation: cfg-nebula-drift 90s ease-in-out infinite alternate;
  transform-origin: 50% 50%;
  pointer-events: none;
}

html[data-theme="light"] .cfg-nebula {
  opacity: clamp(0.28, var(--deep-space-opacity), 0.72);
}
.cfg-nebula::before,
.cfg-nebula::after {
  content: "";
  position: absolute;
  inset: -8%;
  pointer-events: none;
}
.cfg-nebula::before {
  background:
    radial-gradient(1px 1px at 8% 25%, rgba(255,244,210,0.75), transparent 60%),
    radial-gradient(1px 1px at 17% 42%, rgba(255,255,255,0.55), transparent 60%),
    radial-gradient(1px 1px at 29% 35%, rgba(255,236,190,0.75), transparent 60%),
    radial-gradient(1px 1px at 39% 52%, rgba(255,255,255,0.55), transparent 60%),
    radial-gradient(2px 2px at 48% 44%, rgba(255,230,170,0.70), transparent 65%),
    radial-gradient(1px 1px at 61% 55%, rgba(255,255,255,0.50), transparent 60%),
    radial-gradient(1px 1px at 73% 47%, rgba(255,239,198,0.75), transparent 60%),
    radial-gradient(1px 1px at 88% 62%, rgba(255,255,255,0.50), transparent 60%);
  opacity: 0.92;
  transform: rotate(-11deg) scale(1.18);
}
.cfg-nebula::after {
  background:
    linear-gradient(118deg,
      transparent 0%,
      transparent 38%,
      rgba(2,4,10,0.22) 44%,
      rgba(2,4,10,0.30) 48%,
      rgba(2,4,10,0.18) 52%,
      transparent 62%,
      transparent 100%);
  filter: blur(10px);
  opacity: 0.7;
}
@keyframes cfg-nebula-drift {
  from { transform: translate(0,0) scale(var(--deep-space-scale)); }
  to   { transform: translate(-3%, 2%) scale(calc(var(--deep-space-scale) * 1.06)); }
}

/* twinkle starfield */
.cfg-stars {
  position: absolute; inset: 0;
  background-image:
    radial-gradient(1px 1px at 7% 18%, rgba(255,255,255,0.85), transparent 50%),
    radial-gradient(1px 1px at 20% 30%, #fff, transparent 50%),
    radial-gradient(1px 1px at 70% 40%, #fff, transparent 50%),
    radial-gradient(1px 1px at 40% 70%, #fff, transparent 50%),
    radial-gradient(1px 1px at 85% 75%, #fff, transparent 50%),
    radial-gradient(2px 2px at 55% 20%, #fff, transparent 50%),
    radial-gradient(1px 1px at 15% 85%, #fff, transparent 50%),
    radial-gradient(1px 1px at 90% 15%, #fff, transparent 50%),
    radial-gradient(1px 1px at 5% 55%, #fff, transparent 50%),
    radial-gradient(2px 2px at 60% 60%, #fff, transparent 50%),
    radial-gradient(1px 1px at 33% 12%, #fff, transparent 50%),
    radial-gradient(1px 1px at 78% 88%, #fff, transparent 50%),
    radial-gradient(2px 2px at 12% 12%, #fff, transparent 50%),
    radial-gradient(1px 1px at 95% 51%, rgba(255,244,210,0.75), transparent 50%);
  opacity: 0.72;
  animation: cfg-twinkle 9s ease-in-out infinite alternate;
  transform: scale(var(--star-field-scale));
  transform-origin: 50% 50%;
  pointer-events: none;
}
@keyframes cfg-twinkle { from { opacity: 0.56; } to { opacity: 0.78; } }

/* comets — diagonal streaks crossing the canvas */
.cfg-comets { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.cfg-comet {
  position: absolute;
  width: 2px; height: 2px;
  border-radius: 50%;
  background: #fff;
  box-shadow:
    0 0 6px 1px #fff,
    -1px 0 4px rgba(255,255,255,0.6);
  opacity: 0;
}
.cfg-comet::after {
  content: "";
  position: absolute;
  right: 100%;
  top: 50%;
  width: 140px; height: 1px;
  background: linear-gradient(to left, rgba(255,255,255,0.85), rgba(255,255,255,0));
  transform: translateY(-50%);
  filter: blur(0.5px);
}
.cfg-comet--1 { top: 15%; left: -10%; animation: cfg-comet-fly 11s linear infinite; animation-delay: 0s; }
.cfg-comet--2 { top: 60%; left: -10%; animation: cfg-comet-fly 14s linear infinite; animation-delay: 4s; }
.cfg-comet--3 { top: 35%; left: -10%; animation: cfg-comet-fly  9s linear infinite; animation-delay: 8s; }
.cfg-comet--4 { top: 80%; left: -10%; animation: cfg-comet-fly 17s linear infinite; animation-delay: 12s; }
@keyframes cfg-comet-fly {
  0%   { transform: translate(0, 0)            rotate(18deg); opacity: 0; }
  6%   { opacity: 1; }
  90%  { opacity: 1; }
  100% { transform: translate(140vw, 60vh)     rotate(18deg); opacity: 0; }
}

/* The 3D stage that holds the sun + orbits.
   Apply perspective + tilt so the galaxy is seen from an angle.            */
.cfg-stage {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  perspective: 1800px;
  perspective-origin: 50% 35%;
  pointer-events: none;
}
.cfg-three-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: auto;
  z-index: 3;
}
.cfg-three-core-label {
  position: absolute;
  left: 50%;
  top: calc(50% + 74px);
  transform: translateX(-50%);
  z-index: 4;
  font-family: "Manrope", sans-serif;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  white-space: nowrap;
  text-shadow: 0 0 14px rgba(212,175,55,0.7);
  pointer-events: none;
}
.cfg-system {
  position: relative;
  width: 0; height: 0;
  transform-style: flat;
  pointer-events: none;
}

/* Sun (Core) — lives at the centre of the 3D stage */
.cfg-sun {
  width: 110px; height: 110px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #FFF6C8, #FFD166 35%, #D4AF37 70%, #B87333 100%);
  box-shadow:
    0 0 40px rgba(255, 215, 100, 0.7),
    0 0 100px rgba(212, 175, 55, 0.55),
    0 0 200px rgba(184, 115, 51, 0.3);
  position: absolute;
  left: 0; top: 0;
  animation: cfg-sun-pulse 4s ease-in-out infinite alternate;
  z-index: 5;
  transform: translate(-50%, -50%) scale(var(--zoom));
  transform-origin: center;
}
@keyframes cfg-sun-pulse {
  from { box-shadow: 0 0 30px rgba(255,215,100,0.55), 0 0 80px rgba(212,175,55,0.4),  0 0 160px rgba(184,115,51,0.2); }
  to   { box-shadow: 0 0 40px rgba(255,215,100,0.8), 0 0 110px rgba(212,175,55,0.55), 0 0 200px rgba(184,115,51,0.35); }
}
.cfg-sun-label {
  position: absolute; top: 100%; left: 50%; transform: translate(-50%, 10px);
  font-family: "Manrope", sans-serif;
  font-weight: 800; font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--gold); white-space: nowrap;
  text-shadow: 0 0 14px rgba(212,175,55,0.7);
}

/* Orbit rings — circles in the X/Y plane of the system. Tilt comes from parent. */
.cfg-orbit {
  position: absolute;
  left: 0; top: 0;
  border: 1px dashed rgba(255,255,255,0.10);
  border-radius: 50%;
  pointer-events: none;
  z-index: 1;
  transform:
    translate(-50%, -50%)
    rotateZ(var(--tilt-z))
    scale(var(--zoom))
    scaleY(var(--orbit-squash));
  transform-origin: center;
}
.cfg-orbit.is-active { border-color: rgba(212,175,55,0.3); }

/* Track rotates in the orbital plane around the sun */
.cfg-planet-track {
  position: absolute;
  left: 0; top: 0;
  width: 0; height: 0;
  transform-origin: 0 0;
  animation: cfg-orbit-spin linear infinite;
  z-index: 3;
  transform-style: preserve-3d;
}
@keyframes cfg-orbit-spin { to { transform: rotate(360deg); } }
.cfg-planet-track.is-paused { animation-play-state: paused; }

/* =========================================================================
   Planet body — base sphere shading
   Each planet sets its own .cfg-planet-body[data-type="..."] surface gradient.
   The base layer here gives every planet the bright specular highlight
   (top-left) and the dark terminator (bottom-right) that read as 3D.
   ========================================================================= */
.cfg-planet {
  position: absolute;
  left: 0;
  top: 0;
  aspect-ratio: 1 / 1;
  min-width: 22px;
  min-height: 22px;
  border-radius: 50%;
  overflow: visible;
  cursor: pointer;
  display: block;
  transform: translate(-50%, -50%);
  transform-style: preserve-3d;
  will-change: transform;
}

.cfg-planet-body {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  border-radius: 50%;
  overflow: hidden;
  font-family: "Manrope", sans-serif;
  font-weight: 800; font-size: 10px;
  color: rgba(255,255,255,0.95);
  letter-spacing: 0.06em;
  text-shadow: 0 1px 3px rgba(0,0,0,0.9);
  background-color: var(--planet-color, #777);
  background-repeat: no-repeat;
  background-size: 215% 100%;
  background-position: center;
  box-shadow:
    0 0 12px rgba(255,255,255,0.08),
    0 0 60px var(--planet-glow, transparent),
    inset 0 0 14px rgba(0,0,0,0.18);
  transform-style: preserve-3d;
  backface-visibility: hidden;
  will-change: transform;
  animation: cfg-real-planet-spin 90s linear infinite;
}
.cfg-planet-track.is-paused .cfg-planet-body { animation-play-state: paused; }
@keyframes cfg-real-planet-spin {
  from { background-position: 0% 50%; }
  to { background-position: 100% 50%; }
}
.cfg-planet-body::before,
.cfg-planet-body::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
}
.cfg-planet-body::before {
  background:
    radial-gradient(circle at 30% 25%, rgba(255,255,255,0.58), rgba(255,255,255,0.16) 12%, transparent 30%),
    radial-gradient(circle at 76% 76%, rgba(0,0,0,0.82), rgba(0,0,0,0.46) 34%, transparent 58%),
    radial-gradient(circle at 50% 50%, transparent 58%, rgba(0,0,0,0.46) 100%);
  mix-blend-mode: normal;
}
.cfg-planet-body::after {
  box-shadow:
    inset -12px -15px 24px rgba(0,0,0,0.56),
    inset 8px 8px 13px rgba(255,255,255,0.10);
}
.cfg-planet:hover .cfg-planet-body { outline: 2px solid var(--gold); outline-offset: 4px; }

/* ---------- EARTH ----------------------------------------------------- */
.cfg-planet-body[data-type="earth"] {
  background:
    radial-gradient(ellipse 26% 8% at 58% 29%, rgba(241,246,248,0.62), transparent 70%),
    radial-gradient(ellipse 32% 9% at 28% 58%, rgba(235,241,240,0.44), transparent 70%),
    radial-gradient(ellipse 18% 7% at 72% 73%, rgba(240,246,245,0.38), transparent 70%),
    radial-gradient(ellipse 22% 17% at 57% 39%, #5e7445 0%, #334827 61%, transparent 72%),
    radial-gradient(ellipse 20% 26% at 31% 61%, #6c7a43 0%, #354d2d 60%, transparent 72%),
    radial-gradient(ellipse 14% 12% at 51% 80%, #8a8156 0%, #52633a 62%, transparent 72%),
    radial-gradient(circle at 28% 24%, rgba(255,255,255,0.52), rgba(255,255,255,0.14) 10%, transparent 31%),
    radial-gradient(circle at 73% 73%, rgba(0,0,0,0.78), transparent 45%),
    radial-gradient(circle at 35% 33%, #315f83 0%, #173d62 54%, #061524 100%);
  --planet-glow: rgba(83,129,166,0.26);
}

/* ---------- MARS ------------------------------------------------------ */
.cfg-planet-body[data-type="mars"] {
  background:
    radial-gradient(ellipse 28% 8% at 49% 8%, rgba(231,225,207,0.72), transparent 72%),
    radial-gradient(ellipse 24% 7% at 53% 93%, rgba(222,215,196,0.52), transparent 72%),
    radial-gradient(circle 15% at 37% 55%, rgba(74,42,31,0.58), transparent 64%),
    radial-gradient(circle 12% at 64% 45%, rgba(92,50,35,0.48), transparent 64%),
    radial-gradient(circle 8% at 50% 70%, rgba(58,33,25,0.42), transparent 64%),
    radial-gradient(ellipse 80% 22% at 50% 37%, rgba(214,123,75,0.24), transparent 72%),
    radial-gradient(circle at 28% 24%, rgba(255,214,179,0.40), transparent 30%),
    radial-gradient(circle at 73% 73%, rgba(0,0,0,0.78), transparent 45%),
    radial-gradient(circle at 34% 32%, #bd6f43 0%, #9a4328 56%, #2b1009 100%);
  --planet-glow: rgba(170,83,45,0.25);
}

/* ---------- VENUS — thick yellow swirling cloud cover ----------------- */
.cfg-planet-body[data-type="venus"] {
  background:
    radial-gradient(ellipse 120% 17% at 48% 26%, rgba(232,205,144,0.34), transparent 70%),
    radial-gradient(ellipse 115% 14% at 51% 42%, rgba(165,123,67,0.28), transparent 70%),
    radial-gradient(ellipse 120% 16% at 50% 62%, rgba(231,198,126,0.25), transparent 70%),
    radial-gradient(ellipse 90% 42% at 40% 45%, rgba(255,231,168,0.16), transparent 72%),
    radial-gradient(circle at 28% 24%, rgba(255,234,184,0.42), transparent 30%),
    radial-gradient(circle at 74% 74%, rgba(0,0,0,0.80), transparent 45%),
    radial-gradient(circle at 34% 32%, #d6b36b 0%, #9b7040 56%, #34200e 100%);
  --planet-glow: rgba(176,132,70,0.28);
}

/* ---------- MERCURY — cratered grey ----------------------------------- */
.cfg-planet-body[data-type="mercury"] {
  background:
    radial-gradient(circle 10% at 35% 40%, rgba(45,42,38,0.58), transparent 66%),
    radial-gradient(circle 7% at 60% 55%, rgba(48,45,40,0.52), transparent 66%),
    radial-gradient(circle 6% at 45% 70%, rgba(45,42,38,0.48), transparent 66%),
    radial-gradient(circle 4% at 70% 30%, rgba(48,45,40,0.42), transparent 66%),
    radial-gradient(circle 3% at 26% 63%, rgba(38,36,33,0.38), transparent 66%),
    radial-gradient(circle at 28% 24%, rgba(235,229,215,0.34), transparent 28%),
    radial-gradient(circle at 74% 74%, rgba(0,0,0,0.80), transparent 45%),
    radial-gradient(circle at 34% 32%, #a9a093 0%, #625b52 56%, #191512 100%);
  --planet-glow: rgba(142,133,122,0.18);
}

/* ---------- NEPTUNE — deep blue with a storm spot --------------------- */
.cfg-planet-body[data-type="neptune"] {
  background:
    radial-gradient(ellipse 18% 10% at 58% 58%, rgba(9,22,52,0.62), transparent 72%),
    radial-gradient(ellipse 70% 5% at 50% 36%, rgba(179,199,224,0.20), transparent 72%),
    radial-gradient(ellipse 62% 5% at 48% 68%, rgba(154,180,218,0.16), transparent 72%),
    radial-gradient(circle at 28% 24%, rgba(211,225,244,0.38), transparent 30%),
    radial-gradient(circle at 74% 74%, rgba(0,0,0,0.82), transparent 46%),
    radial-gradient(circle at 34% 32%, #466ca8 0%, #243f78 52%, #071326 100%);
  --planet-glow: rgba(65,96,150,0.28);
}

/* ---------- JUPITER — gas giant with banded clouds + great red spot --- */
.cfg-planet-body[data-type="jupiter"] {
  background:
    radial-gradient(ellipse 120% 13% at 50% 13%, rgba(236,218,190,0.72), transparent 74%),
    radial-gradient(ellipse 120% 11% at 50% 27%, rgba(151,96,67,0.58), transparent 74%),
    radial-gradient(ellipse 120% 12% at 50% 42%, rgba(217,186,150,0.64), transparent 74%),
    radial-gradient(ellipse 120% 12% at 50% 56%, rgba(122,78,55,0.58), transparent 74%),
    radial-gradient(ellipse 120% 13% at 50% 72%, rgba(201,166,126,0.60), transparent 74%),
    radial-gradient(ellipse 120% 13% at 50% 88%, rgba(100,66,51,0.42), transparent 74%),
    radial-gradient(circle at 28% 24%, rgba(255,238,212,0.36), transparent 30%),
    radial-gradient(circle at 74% 74%, rgba(0,0,0,0.78), transparent 45%),
    radial-gradient(circle at 35% 32%, #c7a77f 0%, #84593e 68%, #21120b 112%);
  --planet-glow: rgba(164,111,70,0.28);
  position: relative;
}
.cfg-planet-body[data-type="jupiter"]::after {
  box-shadow:
    inset -12px -15px 24px rgba(0,0,0,0.56),
    inset 8px 8px 13px rgba(255,255,255,0.10);
}

/* ---------- SATURN — gas giant with prominent rings ------------------- */
.cfg-planet-body[data-type="saturn"] {
  background:
    radial-gradient(ellipse 120% 12% at 50% 18%, rgba(224,204,165,0.70), transparent 74%),
    radial-gradient(ellipse 120% 10% at 50% 35%, rgba(164,132,91,0.48), transparent 74%),
    radial-gradient(ellipse 120% 11% at 50% 52%, rgba(218,194,147,0.58), transparent 74%),
    radial-gradient(ellipse 120% 10% at 50% 70%, rgba(145,113,77,0.48), transparent 74%),
    radial-gradient(circle at 28% 24%, rgba(255,241,206,0.34), transparent 30%),
    radial-gradient(circle at 74% 74%, rgba(0,0,0,0.78), transparent 45%),
    radial-gradient(circle at 35% 32%, #d0b98c 0%, #9f8051 60%, #2a1d10 108%);
  --planet-glow: rgba(165,130,82,0.28);
  overflow: visible;
}
.cfg-planet[data-type="saturn"]::before,
.cfg-planet[data-type="saturn"]::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  border-radius: 50%;
  pointer-events: none;
  transform-origin: 50% 50%;
}
/* Outer ring — flat ellipse tilted ~75deg */
.cfg-planet[data-type="saturn"]::before {
  width: 250%; height: 78%;
  margin: -39% 0 0 -125%;
  background:
    radial-gradient(ellipse closest-side,
      transparent 47%,
      rgba(222,205,166,0.40) 50%,
      rgba(128,105,76,0.46) 53%,
      rgba(224,205,162,0.38) 57%,
      rgba(112,94,74,0.34) 61%,
      transparent 65%);
  filter: blur(0.2px);
  transform: rotate(-7deg);
  z-index: -1;
}
/* Inner ring detail (in front of planet's lower half via clip) */
.cfg-planet[data-type="saturn"]::after {
  width: 250%; height: 78%;
  margin: -39% 0 0 -125%;
  background:
    radial-gradient(ellipse closest-side,
      transparent 47%,
      rgba(245,228,184,0.08) 50%,
      rgba(168,138,95,0.60) 53%,
      rgba(239,218,170,0.46) 57%,
      rgba(126,104,78,0.38) 61%,
      transparent 65%);
  transform: rotate(-7deg);
  clip-path: polygon(0 50%, 100% 50%, 100% 76%, 0 76%);
  z-index: 2;
}

/* ---------- URANUS — pale cyan, slight tilt -------------------------- */
.cfg-planet-body[data-type="uranus"] {
  background:
    radial-gradient(ellipse 100% 24% at 50% 48%, rgba(219,241,235,0.18), transparent 72%),
    radial-gradient(circle at 28% 24%, rgba(238,252,248,0.36), transparent 30%),
    radial-gradient(circle at 74% 74%, rgba(0,0,0,0.78), transparent 45%),
    radial-gradient(circle at 34% 32%, #a6d5cc 0%, #5fa59d 56%, #163736 108%);
  --planet-glow: rgba(95,159,153,0.24);
}

/* ---------- LAVA — fiery world (email/marketing) --------------------- */
.cfg-planet-body[data-type="lava"] {
  background:
    radial-gradient(circle 11% at 31% 42%, rgba(232,136,65,0.64), transparent 63%),
    radial-gradient(circle 8% at 65% 55%, rgba(196,86,44,0.54), transparent 63%),
    radial-gradient(circle 6% at 50% 75%, rgba(214,110,57,0.48), transparent 63%),
    radial-gradient(circle at 28% 24%, rgba(235,184,136,0.34), transparent 30%),
    radial-gradient(circle at 74% 74%, rgba(0,0,0,0.82), transparent 45%),
    radial-gradient(circle at 34% 32%, #8d4b31 0%, #4f2119 55%, #140605 108%);
  --planet-glow: rgba(148,72,45,0.28);
}

/* ---------- ICE — frozen white world (inventory) --------------------- */
.cfg-planet-body[data-type="ice"] {
  background:
    linear-gradient(40deg, transparent 30%, rgba(86,109,128,0.18) 31%, transparent 32%),
    linear-gradient(115deg, transparent 40%, rgba(86,109,128,0.14) 41%, transparent 42%),
    radial-gradient(ellipse 60% 16% at 44% 58%, rgba(190,210,218,0.24), transparent 72%),
    radial-gradient(circle at 28% 24%, rgba(247,250,250,0.42), transparent 30%),
    radial-gradient(circle at 74% 74%, rgba(0,0,0,0.78), transparent 45%),
    radial-gradient(circle at 34% 32%, #d8e3e5 0%, #8fa5ad 56%, #26343a 108%);
  --planet-glow: rgba(144,166,174,0.24);
}

/* Empty-state hint inside canvas */
.cfg-canvas-hint {
  position: absolute; top: 45%; left: 50%; transform: translate(-50%, -50%);
  font-size: 13px; color: rgba(255,255,255,0.55);
  text-align: center; z-index: 4;
  background: rgba(0,0,0,0.4); padding: 10px 18px; border-radius: 999px;
  border: 1px dashed var(--line);
  pointer-events: none;
}

/* Floating toolbar — ONE horizontal bar at the top of the canvas
   Contains: pause · zoom · pitch slider · yaw slider · presets · reset      */
.cfg-toolbar {
  position: absolute; top: 12px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 10px; align-items: center;
  background: rgba(0,0,0,0.78);
  border: 1px solid rgba(212,175,55,0.4);
  border-radius: 12px;
  padding: 8px 14px;
  backdrop-filter: blur(10px);
  z-index: 9;
  font-size: 12px;
  box-shadow: 0 6px 24px rgba(0,0,0,0.5);
  max-width: calc(100% - 28px);
  flex-wrap: wrap;
  justify-content: center;
}
.cfg-tb-group { display: flex; align-items: center; gap: 6px; }
.cfg-tb-group .cfg-tb-cap {
  color: rgba(255,255,255,0.55);
  font-family: "Space Grotesk", monospace;
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-right: 4px;
}
.cfg-toolbar button {
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--line);
  color: var(--text);
  cursor: pointer;
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  min-width: 32px;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}
.cfg-toolbar button:hover { color: var(--gold); border-color: var(--gold); background: rgba(212,175,55,0.15); }
.cfg-toolbar button:active { transform: scale(0.95); }
.cfg-toolbar .cfg-tb-divider { width: 1px; height: 22px; background: rgba(212,175,55,0.25); }
.cfg-toolbar .cfg-tb-label {
  color: var(--gold); padding: 0 6px; pointer-events: none;
  font-family: "Space Grotesk", monospace; min-width: 44px; text-align: center;
  font-weight: 700;
}
.cfg-toolbar input[type="range"] {
  width: 110px;
  accent-color: var(--gold);
  cursor: pointer;
  height: 4px;
}

/* Drag hint — small, bottom-centre */
.cfg-drag-hint {
  position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%);
  font-size: 11px; color: rgba(212,175,55,0.75);
  pointer-events: none;
  font-family: "Space Grotesk", monospace;
  background: rgba(0,0,0,0.55);
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid rgba(212,175,55,0.2);
  letter-spacing: 0.04em;
}

/* ---------- Features panel (always visible, below sun-system) ---------- */
.cfg-features-panel {
  margin-top: 18px;
  display: flex; flex-direction: column; gap: 12px;
}
.cfg-features-empty {
  color: rgba(255,255,255,0.5); font-size: 13px; padding: 12px;
  text-align: center;
}
.cfg-feat-card {
  background: rgba(16,16,16,0.72);
  border: 1px solid var(--line);
  border-left: 4px solid var(--planet-color, var(--gold));
  border-radius: 12px;
  padding: 12px 14px;
}
.cfg-feat-head {
  display: flex; justify-content: space-between; align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.cfg-feat-title {
  display: flex; align-items: center; gap: 8px;
  font-family: "Manrope", sans-serif; font-weight: 700; font-size: 14px;
}
.cfg-feat-title .dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--planet-color, var(--gold));
  box-shadow: 0 0 10px var(--planet-color, var(--gold));
}
.cfg-feat-actions { display: flex; gap: 6px; }
.cfg-btn-icon {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--text);
  width: 28px; height: 28px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
}
.cfg-btn-icon:hover { border-color: var(--gold); color: var(--gold); }
.cfg-feat-chips {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.cfg-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 12px;
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
  user-select: none;
}
.cfg-chip:hover { border-color: var(--gold); }
.cfg-chip.is-on { background: rgba(212,175,55,0.15); border-color: var(--gold); color: var(--gold); }
.cfg-chip.is-locked { cursor: not-allowed; opacity: 0.95; border-color: var(--gold); background: rgba(212,175,55,0.22); color: var(--gold); }
.cfg-chip.is-locked:hover { border-color: var(--gold); }
.cfg-chip .delta { font-family: "Space Grotesk", monospace; font-size: 10px; opacity: 0.8; }

.cfg-lock-badge {
  display: inline-block;
  font-family: "Space Grotesk", monospace;
  font-size: 10px; font-weight: 700; letter-spacing: 0.08em;
  color: var(--gold); background: rgba(212,175,55,0.12);
  border: 1px solid var(--gold); border-radius: 4px;
  padding: 2px 6px; margin-left: 8px;
  vertical-align: middle;
}
.cfg-feat-prices {
  margin-top: 8px;
  font-family: "Space Grotesk", monospace; font-size: 11px;
  color: rgba(255,255,255,0.7);
}

/* ---------- Summary --------------------------------------------------- */
.cfg-summary {
  position: sticky; top: 84px;
  background: rgba(16,16,16,0.82);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px 14px 16px;
  backdrop-filter: blur(10px);
  font-size: 12px;
}
.cfg-summary .cfg-h2 { font-size: 14px; }
.cfg-summary .cfg-hint { font-size: 10px; margin-bottom: 10px; }
.cfg-summary h3 { font-size: 11px !important; margin: 10px 0 4px !important; }
.cfg-summary .cfg-row { padding: 4px 0; font-size: 11px; }
.cfg-summary .cfg-row strong { font-size: 12px; }
.cfg-summary .cfg-row--total strong { font-size: 16px; text-shadow: 0 0 12px rgba(212,175,55,0.4); }
.cfg-summary .cfg-quote-form h3 { font-size: 13px !important; margin: 10px 0 6px !important; }
.cfg-summary .cfg-quote-form label { font-size: 10px; margin-bottom: 6px; }
.cfg-summary .cfg-quote-form input,
.cfg-summary .cfg-quote-form textarea { font-size: 12px; padding: 6px 8px; }
.cfg-summary .cfg-submit { font-size: 12px; padding: 9px 10px; }
@media (max-width: 900px) { .cfg-summary { position: static; } }

.cfg-summary-rows {
  display: flex; flex-direction: column; gap: 8px;
  margin-bottom: 16px;
}
.cfg-row {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 6px 0;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
}
.cfg-row:last-child { border-bottom: none; }
.cfg-row span { color: rgba(255,255,255,0.7); }
.cfg-row strong { font-family: "Space Grotesk", monospace; font-size: 14px; color: var(--text); }
.cfg-row--total strong {
  font-size: 22px;
  color: var(--gold);
  text-shadow: 0 0 18px rgba(212,175,55,0.4);
}
.cfg-row--total span { font-weight: 700; color: var(--text); }

.cfg-quote-form h3 { font-family: "Manrope", sans-serif; font-size: 15px; margin: 0 0 10px; }
.cfg-quote-form label {
  display: flex; flex-direction: column; gap: 4px;
  margin-bottom: 10px;
  font-size: 11px;
  color: rgba(255,255,255,0.7);
}
.cfg-quote-form input,
.cfg-quote-form textarea {
  background: rgba(0,0,0,0.4);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 10px;
  color: var(--text);
  font-family: inherit;
  font-size: 13px;
  transition: border-color 160ms ease;
}
.cfg-quote-form input:focus,
.cfg-quote-form textarea:focus { outline: none; border-color: var(--gold); }
.cfg-submit {
  width: 100%;
  background: linear-gradient(135deg, var(--gold), var(--copper));
  color: #1a1a1a;
  border: none;
  border-radius: 10px;
  padding: 12px 14px;
  font-weight: 700;
  cursor: pointer;
  font-size: 14px;
  transition: filter 160ms ease;
}
.cfg-submit:hover { filter: brightness(1.1); }
.cfg-submit:disabled { opacity: 0.6; cursor: not-allowed; }
.cfg-form-msg { margin: 10px 0 0; font-size: 12px; min-height: 1.2em; }
.cfg-form-msg.is-ok { color: #6ee7a7; }
.cfg-form-msg.is-err { color: #f87171; }

/* =====================================================================
   Pass B — overlay layout: everything floats inside the big animation
   window; full quote form lives in a hidden section revealed by Save.
   ===================================================================== */
.cfg-shell { display: block; max-width: 1880px; margin: 0 auto; padding: 14px 14px 64px; }

/* Bigger animation window, more left/right space */
.cfg-canvas-wrap { min-height: 88vh; }

/* Shared translucent overlay chrome */
.cfg-overlay {
  position: absolute; z-index: 6;
  background: rgba(10,12,18,0.42);
  border: 1px solid var(--line); border-radius: 16px;
  backdrop-filter: blur(8px) saturate(120%);
  -webkit-backdrop-filter: blur(8px) saturate(120%);
}

/* Palette dock — left edge, 50%-transparent cards inside */
.cfg-overlay--palette {
  top: 18px; left: 18px; width: 250px;
  max-height: calc(100% - 130px);
  overflow-y: auto; padding: 14px;
}
.cfg-overlay--palette .cfg-h2 { font-size: 16px; }
.cfg-overlay--palette .cfg-hint { margin-bottom: 10px; }
.cfg-overlay--palette .cfg-mod-card { background: rgba(16,16,16,0.5); }

/* View controls — top-right, vertical stack */
.cfg-toolbar {
  position: absolute; top: 18px; right: 18px; left: auto; transform: none;
  flex-direction: column; align-items: stretch; gap: 10px; width: 236px;
  background: rgba(8,10,16,0.5); border: 1px solid var(--line); border-radius: 16px;
  padding: 12px; backdrop-filter: blur(8px) saturate(120%); z-index: 7;
}
.cfg-toolbar .cfg-tb-group { display: flex; align-items: center; gap: 8px; justify-content: space-between; }
.cfg-toolbar .cfg-tb-group--btns { justify-content: flex-start; gap: 6px; }
.cfg-toolbar .cfg-tb-cap { min-width: 56px; text-align: left; }
.cfg-toolbar input[type="range"] { flex: 1; min-width: 0; }
.cfg-toolbar .cfg-tb-divider { display: none; }
.cfg-toolbar .cfg-tb-label { min-width: 42px; text-align: right; }

/* Features dock — right edge, below the toolbar; hidden until a planet is picked */
.cfg-overlay--features {
  position: absolute; top: 250px; right: 18px; left: auto; bottom: auto;
  width: 236px; max-height: calc(100% - 340px); overflow-y: auto; padding: 14px;
  margin: 0;
}
.cfg-overlay--features:empty { display: none; }
.cfg-overlay--features .cfg-mod-card,
.cfg-overlay--features .cfg-feature-card { background: rgba(16,16,16,0.5); }

/* Mini money bar — bottom centre: only the live charge + how it grows */
.cfg-moneybar {
  position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%);
  z-index: 8; display: flex; align-items: center; gap: 16px;
  background: rgba(8,10,16,0.66); border: 1px solid var(--gold); border-radius: 999px;
  padding: 10px 14px 10px 20px; backdrop-filter: blur(10px);
  box-shadow: 0 8px 30px rgba(0,0,0,0.42);
}
.cfg-moneybar .mb-block { display: flex; flex-direction: column; line-height: 1.15; }
.cfg-moneybar .mb-cap { font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: rgba(255,255,255,0.55); }
.cfg-moneybar .mb-count { font-family: "Space Grotesk", monospace; font-size: 18px; color: var(--text); }
.cfg-moneybar .mb-amount {
  font-family: "Space Grotesk", monospace; font-size: 22px; color: var(--gold);
  text-shadow: 0 0 14px rgba(212,175,55,0.45); transition: transform 0.25s ease, color 0.25s ease;
}
.cfg-moneybar .mb-amount.mb-bump { transform: scale(1.18); color: #ffe9a8; }
.cfg-moneybar .mb-sep { width: 1px; height: 30px; background: rgba(212,175,55,0.3); }
.cfg-moneybar .mb-save {
  margin-left: 6px; border: none; cursor: pointer; border-radius: 999px;
  background: linear-gradient(120deg, var(--gold), var(--copper)); color: #1a1206;
  font-family: "Manrope", sans-serif; font-weight: 800; font-size: 13px; padding: 10px 16px; white-space: nowrap;
}
.cfg-moneybar .mb-save:hover { filter: brightness(1.08); }

/* Drag hint sits just above the money bar so they don't collide */
.cfg-canvas-wrap .cfg-drag-hint { bottom: 74px; }

/* Hidden quote section — revealed by Save, page scrolls to it */
.cfg-quote-section { display: none; max-width: 900px; margin: 30px auto 0; }
.cfg-quote-section.is-open { display: block; animation: cfg-fade-in 0.4s ease; }
@keyframes cfg-fade-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.cfg-quote-grid { display: grid; grid-template-columns: 290px 1fr; gap: 22px; align-items: start; }
.cfg-quote-section .cfg-summary { position: static; top: auto; }
@media (max-width: 760px) { .cfg-quote-grid { grid-template-columns: 1fr; } }

/* Mobile: shrink the floating panels so they still fit the window */
@media (max-width: 920px) {
  .cfg-canvas-wrap { min-height: 78vh; }
  .cfg-overlay--palette { width: 180px; padding: 10px; max-height: calc(100% - 90px); }
  .cfg-toolbar { width: 190px; padding: 10px; }
  .cfg-overlay--features { display: none; }   /* clicking a planet still scrolls to features via picker; panel hidden to save room */
  .cfg-moneybar { gap: 10px; padding: 8px 10px 8px 14px; }
  .cfg-moneybar .mb-amount { font-size: 18px; }
  .cfg-moneybar .mb-save { font-size: 12px; padding: 8px 12px; }
}

/* =====================================================================
   Pass B.2 — full-bleed window, more transparent panels, slow comets
   ===================================================================== */
/* #1 Occupy the full width (break out of the centered main column) */
.cfg-shell {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  max-width: none;
  padding: 0 0 56px;
}
.cfg-canvas-wrap {
  border-radius: 0;
  border-left: none;
  border-right: none;
  min-height: 90vh;
}

/* #2 More transparent panels + reliable hover-scroll for the module list */
.cfg-overlay { background: rgba(10,12,18,0.26); }
.cfg-overlay--palette .cfg-mod-card,
.cfg-overlay--features .cfg-mod-card,
.cfg-overlay--features .cfg-feature-card { background: rgba(16,16,16,0.34); }
.cfg-overlay--palette {
  max-height: calc(100% - 120px);
  overflow-y: auto;
  overscroll-behavior: contain;     /* scroll stays in the list, never bubbles to zoom */
}
.cfg-overlay--features {
  max-height: calc(100% - 300px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
/* slim, subtle scrollbars inside the panels */
.cfg-overlay--palette::-webkit-scrollbar,
.cfg-overlay--features::-webkit-scrollbar { width: 8px; }
.cfg-overlay--palette::-webkit-scrollbar-thumb,
.cfg-overlay--features::-webkit-scrollbar-thumb { background: rgba(212,175,55,0.35); border-radius: 8px; }

/* #4 Shooting stars (comets) — much slower drift */
.cfg-comet--1 { animation-duration: 42s !important; }
.cfg-comet--2 { animation-duration: 52s !important; }
.cfg-comet--3 { animation-duration: 36s !important; }
.cfg-comet--4 { animation-duration: 60s !important; }

/* =====================================================================
   Pass B.3 — readability, slower comets, Tara, Saturn-cleanup, mobile
   ===================================================================== */

/* #3 Shooting stars as slow as the planets */
.cfg-comet--1 { animation-duration: 130s !important; }
.cfg-comet--2 { animation-duration: 165s !important; }
.cfg-comet--3 { animation-duration: 110s !important; }
.cfg-comet--4 { animation-duration: 185s !important; }

/* #6 hide the old CSS core label too (renderer no longer adds it, belt+braces) */
.cfg-three-core-label { display: none !important; }

/* #7 + #8 Panels: see-through but READABLE. No horizontal scrollbar. */
.cfg-overlay { background: rgba(8,10,16,0.5); overflow-x: hidden; }
.cfg-overlay--palette,
.cfg-overlay--features { box-sizing: border-box; }
.cfg-overlay--palette .cfg-mod-card,
.cfg-overlay--features .cfg-feat-card {
  background: rgba(18,20,28,0.62) !important;
  width: 100%; box-sizing: border-box;
}
.cfg-palette-list { width: 100%; overflow-x: hidden; }
.cfg-palette-list .cfg-mod-card { width: 100%; box-sizing: border-box; }

/* Brighter, legible text on the cards */
.cfg-mod-name { color: #f4ecd8 !important; }
.cfg-mod-tag  { color: rgba(244,236,216,0.72) !important; }
.cfg-mod-price { color: var(--gold) !important; }
.cfg-feat-title { color: #f4ecd8; }
.cfg-feat-prices { color: rgba(244,236,216,0.8) !important; }
.cfg-chip { color: #f0e6d0; }
.cfg-chip .delta { opacity: 0.95; color: #ffe9a8; }

/* #8 Selected/added modules stay clearly visible (was opacity 0.45 → invisible) */
.cfg-mod-card.is-added { opacity: 0.7; }
.cfg-mod-card.is-added::after {
  content: "✓"; position: absolute; top: 10px; right: 12px;
  color: #6ee7a7; font-weight: 800; font-size: 13px;
}

/* #8 (screenshot 2) Detail summary — solid panel so labels read in any theme */
.cfg-quote-section .cfg-summary {
  background: rgba(14,16,22,0.94);
  border: 1px solid var(--line); border-radius: 16px; padding: 18px;
}
.cfg-quote-section .cfg-summary h3 { color: #f4ecd8 !important; }
.cfg-quote-section .cfg-row span { color: rgba(244,236,216,0.82); }
.cfg-quote-section .cfg-row strong { color: #f4ecd8; }
.cfg-quote-section .cfg-hint { color: rgba(244,236,216,0.6); }
.cfg-quote-section .cfg-quote-form {
  background: rgba(14,16,22,0.94);
  border: 1px solid var(--line); border-radius: 16px; padding: 18px;
}
.cfg-quote-section .cfg-quote-form input,
.cfg-quote-section .cfg-quote-form textarea {
  background: rgba(255,255,255,0.06); color: #f4ecd8;
}

/* Tara stays bottom-right and on top on the configurator page too (draggable). */
body:has(.cfg-shell) .tara-widget {
  right: 1rem; left: auto; bottom: 1rem; z-index: 95;
}

/* #9 Mobile — stack everything, panels become normal flow blocks */
@media (max-width: 860px) {
  .cfg-shell { width: 100%; margin-left: 0; }
  .cfg-canvas-wrap { min-height: 60vh; border-radius: 14px; margin: 0 10px; width: auto; }
  .cfg-overlay--palette {
    position: static; width: auto; max-height: 220px; margin: 10px;
    background: rgba(8,10,16,0.62);
  }
  .cfg-toolbar {
    position: static; width: auto; flex-direction: row; flex-wrap: wrap;
    margin: 0 10px 10px; background: rgba(8,10,16,0.62);
  }
  .cfg-toolbar .cfg-tb-group { flex: 1 1 46%; }
  .cfg-overlay--features {
    position: static; width: auto; max-height: 260px; margin: 0 10px 10px;
    background: rgba(8,10,16,0.62);
  }
  .cfg-moneybar {
    position: static; transform: none; left: auto; bottom: auto;
    margin: 0 10px; width: auto; justify-content: space-between; flex-wrap: wrap; gap: 10px;
  }
  .cfg-moneybar .mb-save { flex: 1 1 100%; text-align: center; }
  .cfg-canvas-wrap .cfg-drag-hint { display: none; }
  .cfg-quote-grid { grid-template-columns: 1fr; }
  body:has(.cfg-shell) .tara-widget { right: 0.6rem; left: auto; bottom: 0.6rem; }
}

/* =====================================================================
   FEATURES panel docked BELOW the animation window (full-width).
   Cards flow left→right; on overflow they wrap to a second row.
   ===================================================================== */
.cfg-features-below {
  margin: 14px 0 0 0;
  padding: 0;
  /* No container box in EITHER theme — the cards are the only surfaces, so
     there is no empty dark/light panel to the right of them. */
  background: transparent;
  border: none;
  border-radius: 0;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-start;   /* size each card to its own content */
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.cfg-features-below:empty { display: none; }
.cfg-features-below .cfg-feat-card {
  flex: 0 1 320px;
  min-width: 260px;
  margin: 0;
  background: rgba(16,16,16,0.65);
}
.cfg-features-below .cfg-features-empty {
  flex: 1; text-align: center; padding: 18px;
}
@media (max-width: 760px) {
  .cfg-features-below .cfg-feat-card { flex-basis: 100%; }
}

/* ============================================================
   LIGHT THEME — the module cards below the animation must not
   render as dark "black windows" on the cream page. Give them
   the same warm light card treatment as the rest of the site.
   (Dark theme keeps the original space-dark cards.)
   ============================================================ */
html[data-theme="light"] .cfg-features-below {
  background: transparent;
  border-color: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  padding: 0;
}
html[data-theme="light"] .cfg-features-below .cfg-feat-card,
html[data-theme="light"] .cfg-feat-card {
  background: #fffaf0;
  border-color: rgba(184, 115, 51, 0.28);
  box-shadow: 0 6px 18px -10px rgba(122, 74, 22, 0.25);
}
html[data-theme="light"] .cfg-feat-title,
html[data-theme="light"] .cfg-feat-title > span {
  color: #1b1b1b;
}
/* the tagline / blurb span is inline-styled white in the markup */
html[data-theme="light"] .cfg-feat-title span[style] {
  color: #6a5333 !important;
}
html[data-theme="light"] .cfg-feat-prices {
  color: rgba(40, 28, 12, 0.75);
}
html[data-theme="light"] .cfg-features-empty {
  color: rgba(40, 28, 12, 0.6);
}
html[data-theme="light"] .cfg-chip {
  background: rgba(255, 255, 255, 0.6);
  color: #3a2a12;
}
html[data-theme="light"] .cfg-chip.is-on,
html[data-theme="light"] .cfg-chip.is-locked {
  background: rgba(212, 175, 55, 0.2);
  color: #7a4a16;
}
html[data-theme="light"] .cfg-btn-icon {
  color: #3a2a12;
}

/* Light theme — strengthen faint price + chip-delta text on cream cards */
html[data-theme="light"] .cfg-features-below .cfg-feat-prices,
html[data-theme="light"] .cfg-feat-prices {
  color: #6a4a1c;
  opacity: 1;
}
html[data-theme="light"] .cfg-features-below .cfg-chip .delta,
html[data-theme="light"] .cfg-chip .delta {
  color: #6a4a1c;
  opacity: 0.95;
}
html[data-theme="light"] .cfg-features-below .cfg-chip.is-on .delta,
html[data-theme="light"] .cfg-features-below .cfg-chip.is-locked .delta {
  color: #7a4a16;
}

/* Beat the global `.cfg-feat-prices { ... !important }` cream rule in light mode */
html[data-theme="light"] .cfg-feat-prices,
html[data-theme="light"] .cfg-features-below .cfg-feat-prices {
  color: #6a4a1c !important;
  opacity: 1 !important;
}

/* ---------- Maximize / restore the animation ------------------------- */
.cfg-maximize-btn {
  position: absolute; top: 14px; left: 14px; z-index: 7;
  width: 38px; height: 38px; border-radius: 10px;
  background: rgba(16,16,16,0.62); border: 1px solid var(--line);
  color: var(--gold); font-size: 17px; line-height: 1; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  backdrop-filter: blur(6px) saturate(120%);
  -webkit-backdrop-filter: blur(6px) saturate(120%);
  transition: background 160ms ease, border-color 160ms ease, transform 120ms ease;
}
.cfg-maximize-btn:hover { border-color: var(--gold); background: rgba(212,175,55,0.16); }
.cfg-maximize-btn:active { transform: scale(0.94); }
html[data-theme="light"] .cfg-maximize-btn {
  background: rgba(255,250,240,0.78); border-color: rgba(184,115,51,0.4); color: #7a4a16;
}

.cfg-canvas-wrap.is-maximized {
  position: fixed; inset: 0; z-index: 300;
  width: 100vw; height: 100vh;
  max-width: none;
  aspect-ratio: auto;          /* fill the screen when maximized */
  margin: 0;
  border-radius: 0; border: none;
}
body.cfg-maximized-lock { overflow: hidden; }
/* keep the maximize button visible in the top-left while maximized */
.cfg-canvas-wrap.is-maximized .cfg-maximize-btn { top: 18px; left: 18px; }

/* The module palette must stay usable inside the shorter canvas */
.cfg-overlay--palette { max-height: calc(100% - 28px); overflow: auto; }

/* Reposition maximize button to the free bottom-right corner (top-left collides
   with the Modules palette). */
.cfg-maximize-btn { top: auto; left: auto; bottom: 14px; right: 14px; }
.cfg-canvas-wrap.is-maximized .cfg-maximize-btn { top: auto; left: auto; bottom: 20px; right: 20px; }

/* ============================================================
   Uniform feature cards (CRM / Booking / Reporting …).
   Same structure, fonts, spacing and aligned rows regardless
   of how much text each module has. Works in both themes.
   ============================================================ */
.cfg-features-below .cfg-feat-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-self: flex-start;        /* each card sizes to its own content */
}
.cfg-feat-head { margin-bottom: 0; align-items: center; }
.cfg-feat-title { flex-wrap: wrap; row-gap: 4px; }
.cfg-feat-name { font-family: "Manrope", sans-serif; font-weight: 700; font-size: 14px; }
.cfg-feat-desc {
  margin: 0;
  font-size: 12px;
  line-height: 1.45;
  color: rgba(255,255,255,0.62);
}
html[data-theme="light"] .cfg-feat-desc { color: #6a5333; }
.cfg-feat-chips { margin-top: 0; }
.cfg-feat-prices {
  margin-top: 2px;              /* flows right after the chips (no forced bottom) */
  padding-top: 8px;
}
/* keep the star/INCLUDED badge from stretching the header row */
.cfg-feat-head .cfg-lock-badge { margin-left: 6px; align-self: center; }

/* Professional type system for configurator text (Poppins + Open Sans) */
.cfg-shell, .cfg-shell input, .cfg-shell select, .cfg-shell button,
.cfg-feat-desc, .cfg-mod-tag, .cfg-hint { font-family: "Open Sans", "Segoe UI", system-ui, sans-serif; }
.cfg-h2, .cfg-feat-name, .cfg-mod-name, .mb-amount, .cfg-feat-title,
.cfg-drag-hint, .mb-cap, .cfg-tb-cap { font-family: "Poppins", "Segoe UI", system-ui, sans-serif; }

/* =====================================================================
   Pass C — Modules panel LEFT, animation window RIGHT (collapsed).
   Expand button → animation full-width on top, Modules docked BELOW.
   Authoritative: appended last so it overrides the earlier Pass-B
   full-bleed / overlay layout.
   ===================================================================== */
.cfg-shell {
  display: grid !important;
  grid-template-columns: 260px minmax(0, 1fr) !important;
  gap: 20px !important;
  width: 100% !important;
  max-width: 1280px !important;
  margin: 0 auto !important;
  margin-left: auto !important;
  padding: 24px 20px 80px !important;
  align-items: start !important;
}
.cfg-shell.is-expanded { grid-template-columns: 1fr !important; }
.cfg-shell > #cfg-features,
.cfg-shell > .cfg-quote-section { grid-column: 1 / -1; }

/* Left modules panel — a scrollable panel that matches the animation height.
   NOT sticky, so it can never overlap the feature cards below it. */
.cfg-palette-panel {
  position: static !important;
  align-self: start;
  background: rgba(16,16,16,0.55);
  border: 1px solid var(--line); border-radius: 16px;
  padding: 14px;
  max-height: 56.25vw;               /* ~matches the 16:9 canvas height */
  overflow-y: auto; overflow-x: hidden;
}
/* cap the panel height to the same clamp the canvas uses */
@media (min-width: 901px) {
  .cfg-palette-panel { max-height: min(56.25vw, 560px); }
}
.cfg-palette-panel::-webkit-scrollbar { width: 8px; }
.cfg-palette-panel::-webkit-scrollbar-thumb { background: rgba(212,175,55,0.35); border-radius: 8px; }
html[data-theme="light"] .cfg-palette-panel { background: rgba(255,250,240,0.80); }
.cfg-palette-panel .cfg-palette-list { width: 100%; display: flex; flex-direction: column; gap: 10px; }
.cfg-palette-panel .cfg-mod-card { width: 100%; box-sizing: border-box; }

/* Collapsed animation window: 16:9 frame in the right column, size-capped. */
#cfg-canvas.cfg-canvas-wrap {
  min-height: 0 !important;
  width: 100% !important;
  aspect-ratio: 16 / 9 !important;
  height: auto !important;
  max-height: 560px !important;
  border-radius: 18px !important;
  border: 1px solid var(--line) !important;
  margin: 0 !important;
}

/* Expanded: a simple CENTRED FLEX COLUMN (not grid — the grid reflow kept
   pushing everything off-centre). Animation on top (capped height), modules
   below, everything centred and contained so it never fills the whole screen. */
.cfg-shell { overflow-x: hidden; }
.cfg-shell.is-expanded {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  grid-template-columns: none !important;
  max-width: 1120px !important;
  margin: 0 auto !important;
  gap: 18px !important;
}
.cfg-shell.is-expanded > #cfg-canvas.cfg-canvas-wrap {
  order: -1 !important;
  aspect-ratio: auto !important;
  width: 100% !important;
  max-width: 1040px !important;
  margin: 0 !important;
  height: clamp(300px, 44vh, 460px) !important;
  max-height: 460px !important;
}
.cfg-shell.is-expanded > .cfg-palette-panel {
  order: 0; width: 100%; max-width: 1040px; max-height: none; overflow: visible;
}
.cfg-shell.is-expanded > #cfg-features,
.cfg-shell.is-expanded > .cfg-quote-section { order: 1; width: 100%; }
.cfg-shell.is-expanded .cfg-palette-panel .cfg-palette-list {
  flex-direction: row; overflow-x: auto; padding-bottom: 8px;
}
.cfg-shell.is-expanded .cfg-palette-panel .cfg-mod-card { flex: 0 0 220px; width: 220px; }

@media (max-width: 900px) {
  .cfg-shell { grid-template-columns: 1fr !important; }
  .cfg-palette-panel { max-height: none; }
  .cfg-palette-panel .cfg-palette-list { flex-direction: row; overflow-x: auto; }
  .cfg-palette-panel .cfg-mod-card { flex: 0 0 200px; width: 200px; }
  /* mobile: animation is a modest 16:9 that never dominates the screen */
  #cfg-canvas.cfg-canvas-wrap { max-height: 46vh !important; }
  .cfg-shell.is-expanded #cfg-canvas.cfg-canvas-wrap { height: 46vh !important; }
}