body.ambients-page {
  --bg: #090909;
  --bg-elevated: #111111;
  --bg-soft: #171717;
  --card: #141414;
  --card-border: #262626;
  --text: #f5f5f5;
  --text-secondary: #a1a1aa;
  --border: #292929;
  --accent: #5e2bff;
  --accent-rgb: 94, 43, 255;
  --accent-soft: rgba(var(--accent-rgb), 0.13);
  --accent-glow: rgba(var(--accent-rgb), 0.38);
  --shadow: 0 18px 55px rgba(0, 0, 0, 0.35);
}
body.ambients-page header {
  background: rgba(16, 16, 16, 0.86);
}
body.ambients-page .dropdown-content {
  background: rgba(24, 24, 24, 0.98);
}
body.ambients-page .btn-ghost {
  background: rgba(255, 255, 255, 0.02);
}
body.ambients-page .interior-stage {
  background:
    radial-gradient(circle at 50% 72%, var(--accent-soft), transparent 44%),
    linear-gradient(180deg, #151515 0%, #080808 100%);
}
body.ambients-page .windscreen {
  fill: #111821;
}
body.ambients-page .screen-line {
  stroke: #5d8cc7;
}
body.ambients-page .screen-dot {
  fill: #77b4ff;
}
body.ambients-page .colour-value {
  background: #202020;
}
body.ambients-page .swatch {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12);
}
body.ambients-page .custom-colour input {
  background: #202020;
}
body.ambients-page .mode-btn {
  background: #1b1b1b;
}
body.ambients-page .process-section {
  background: #101010;
}
body.ambients-page footer {
  background: #0f0f0f;
}
body.ambients-page footer,
body.ambients-page .process-section,
body.ambients-page .preview-panel,
body.ambients-page .controls-panel,
body.ambients-page .feature-card,
body.ambients-page .process-grid article,
body.ambients-page .faq-list details {
  box-shadow: none;
}
body.ambients-page .footwell-glow {
  opacity: 0.28;
}
/* ---------- MENU DARK-MODE OVERRIDES ---------- */
body.ambients-page .dropdown-expand {
  color: var(--text);
}
body.ambients-page .dropdown-expand:hover {
  color: #fff;
  background: var(--accent);
}
body.ambients-page .submenu a {
  color: var(--text-secondary);
}
body.ambients-page .submenu a:hover,
body.ambients-page .submenu a.active {
  color: #fff;
  background: rgba(var(--accent-rgb), 0.16);
}
body.ambients-page .dropdown-content > a {
  color: var(--text);
}
body.ambients-page .dropdown-content > a:hover,
body.ambients-page .dropdown-content > a.active {
  color: #fff;
  background: var(--accent);
}