:root {
  --lux-layer: radial-gradient(1200px 680px at 50% -14%, rgba(63, 122, 108, 0.18), transparent 66%);
}

body[class*="lux-"] {
  background:
    var(--lux-layer),
    linear-gradient(148deg, var(--dna-emerald-graphite) 0%, var(--dna-emerald-graphite-deep) 52%, #10221e 100%);
  color: var(--dna-platinum-ivory);
}

body[class*="lux-"] .glass,
body[class*="lux-"] .card,
body[class*="lux-"] .panel {
  border: 1px solid rgba(223, 221, 206, 0.24);
  border-radius: 22px;
  background: linear-gradient(150deg, rgba(24, 47, 40, 0.82), rgba(16, 33, 28, 0.72));
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  box-shadow: var(--shadow-depth-1), var(--shadow-inner);
}

body[class*="lux-"] button,
body[class*="lux-"] .btn {
  transition: transform var(--transition-smooth), box-shadow var(--transition-smooth), border-color var(--transition-smooth), background var(--transition-smooth);
}

body[class*="lux-"] button:hover,
body[class*="lux-"] .btn:hover,
body[class*="lux-"] button:focus-visible,
body[class*="lux-"] .btn:focus-visible {
  transform: translateY(-2px);
}

@media (max-width: 900px) {
  body[class*="lux-"] .glass,
  body[class*="lux-"] .card,
  body[class*="lux-"] .panel {
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
  }
}