/* Dark glow is a background mode; Vue content remains above this noninteractive layer. */
html[data-tech-background='on'],
html[data-tech-background='on'] body {
  background: #050b15;
  color-scheme: dark;
}

html[data-tech-background='on'] #app {
  position: relative;
  z-index: 1;
  background: transparent !important;
}

html[data-tech-background='on'] :is(.app-shell, .landing-page, .dashboard-page, .dashboard-page .n-layout-content, .auth-page) {
  background: transparent !important;
  background-image: none !important;
}

html[data-tech-background='on'] :is(.lp-nav, .lp-contact, .lp-footer, .dashboard-page .topbar, .dashboard-page .dashboard-tab) {
  background-color: rgba(6, 12, 23, 0.66) !important;
  backdrop-filter: blur(8px);
}

html[data-tech-background='on'] .auth-page::before {
  opacity: 0.08;
}

html[data-tech-background='on'] .auth-page::after {
  display: none;
}

html[data-tech-background='on'] :is(.theme-toggle, #theme) {
  display: none !important;
}

.cex-tech-background {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 85%, #0b1c25 0%, #060e1b 47%, #030813 100%);
  contain: strict;
}

.cex-tech-background > * {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.cex-tech-code { z-index: 1; }

.cex-tech-grid {
  z-index: 2;
  opacity: 0.28;
  background-image:
    linear-gradient(rgba(72, 145, 154, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(72, 145, 154, 0.055) 1px, transparent 1px),
    repeating-linear-gradient(0deg, transparent 0 3px, rgba(3, 8, 19, 0.075) 3px 4px);
  background-size: 52px 52px, 52px 52px, 100% 4px;
  mask-image: linear-gradient(to bottom, transparent, black 16%, black 82%, transparent);
}

.cex-tech-glow {
  z-index: 3;
  --tech-x: 58vw;
  --tech-y: 40vh;
  background:
    radial-gradient(circle 470px at var(--tech-x) var(--tech-y), rgba(37, 170, 177, 0.17), rgba(23, 104, 151, 0.075) 48%, transparent 76%),
    radial-gradient(circle 420px at 78% 82%, rgba(33, 80, 137, 0.065), transparent 76%);
}

@media (max-width: 767px) {
  .cex-tech-grid { opacity: 0.16; background-size: 64px 64px, 64px 64px, 100% 4px; }
  .cex-tech-glow {
    background: radial-gradient(circle 290px at var(--tech-x) var(--tech-y), rgba(37, 170, 177, 0.095), transparent 75%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .cex-tech-grid { opacity: 0.12; }
  .cex-tech-glow {
    background: radial-gradient(circle 360px at 58% 40%, rgba(37, 170, 177, 0.085), transparent 76%);
  }
  html[data-tech-background='on'] .auth-page::before { animation: none !important; }
}