:root {
  --ifix-accent: var(--accent, #3b82f6);
  --ifix-bg: var(--bg, #0a0f1a);
  --ifix-surface: var(--surface, #0f172a);
  --ifix-text: var(--text, #f1f5f9);
  --ifix-muted: var(--muted, #94a3b8);
  --ifix-success: var(--success, #22c55e);
  --ifix-warning: var(--warning, #f59e0b);
  --ifix-error: var(--error, #ef4444);
  --ifix-bg-opacity: .95;
  --ifix-bg-blur: 0px;
  --ifix-line-color: #6572ec;
}

html.ifix-public-theme {
  background: var(--ifix-bg) !important;
  color-scheme: dark;
}

html.ifix-public-theme body {
  background: var(--ifix-bg) !important;
}

html.ifix-public-theme body::before,
html.ifix-public-theme body::after {
  display: none !important;
}

.ifix-public-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  background: var(--ifix-bg);
  opacity: var(--ifix-bg-opacity);
  filter: blur(var(--ifix-bg-blur));
  transform: translateZ(0);
}

.ifix-public-bg canvas,
.ifix-public-bg__paint,
.ifix-public-bg__veil {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.ifix-public-bg canvas {
  display: block;
}

.ifix-public-bg__paint {
  opacity: .95;
}

.ifix-public-bg__veil {
  background:
    radial-gradient(circle at 28% 0%, color-mix(in srgb, var(--ifix-accent) 16%, transparent), transparent 26rem),
    radial-gradient(circle at 72% 16%, color-mix(in srgb, var(--ifix-success) 10%, transparent), transparent 32rem),
    linear-gradient(180deg, rgba(8, 13, 24, .58), rgba(8, 13, 24, .94));
}

.ifix-public-bg[data-type="aurora"] .ifix-public-bg__paint,
.ifix-public-bg[data-type="gradient-animation"] .ifix-public-bg__paint {
  background:
    radial-gradient(circle at 18% 18%, color-mix(in srgb, var(--ifix-accent) 42%, transparent), transparent 28rem),
    radial-gradient(circle at 82% 24%, color-mix(in srgb, var(--ifix-success) 32%, transparent), transparent 30rem),
    radial-gradient(circle at 48% 74%, color-mix(in srgb, var(--ifix-accent) 20%, transparent), transparent 34rem);
  animation: ifixAuroraDrift 16s ease-in-out infinite alternate;
}

.ifix-public-bg[data-type="grid"] .ifix-public-bg__paint {
  background-image:
    linear-gradient(color-mix(in srgb, var(--ifix-line-color) 20%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--ifix-line-color) 20%, transparent) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(circle at 50% 20%, black, transparent 78%);
}

.ifix-public-bg[data-type="dots"] .ifix-public-bg__paint,
.ifix-public-bg[data-type="sparkles"] .ifix-public-bg__paint {
  background-image: radial-gradient(circle, color-mix(in srgb, var(--ifix-line-color) 42%, transparent) 1px, transparent 1.6px);
  background-size: 28px 28px;
  mask-image: radial-gradient(circle at 50% 30%, black, transparent 72%);
}

.ifix-public-bg[data-type="boxes"] .ifix-public-bg__paint {
  background-image:
    linear-gradient(color-mix(in srgb, var(--ifix-line-color) 18%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--ifix-line-color) 18%, transparent) 1px, transparent 1px);
  background-size: 84px 84px;
  transform: perspective(700px) rotateX(58deg) translateY(-18%);
  transform-origin: top;
}

.ifix-public-bg[data-type="spotlight"] .ifix-public-bg__paint {
  background: radial-gradient(ellipse at 50% -10%, color-mix(in srgb, var(--ifix-accent) 45%, transparent), transparent 45%);
}

.ifix-public-bg[data-type="none"] {
  display: none;
}

html.ifix-public-theme .page,
html.ifix-public-theme main,
html.ifix-public-theme footer,
html.ifix-public-theme #root {
  position: relative;
  z-index: 1;
}

html.ifix-public-theme .topbar {
  z-index: 10;
}

html.ifix-public-theme body.ifix-public-theme-login,
html.ifix-public-theme body.ifix-public-theme-login #root {
  background: transparent !important;
}

html.ifix-public-theme body.ifix-public-theme-login #root > div:first-child {
  background: transparent !important;
}

html.ifix-public-theme body.ifix-public-theme-login .min-h-dvh,
html.ifix-public-theme body.ifix-public-theme-login .min-h-screen,
html.ifix-public-theme body.ifix-public-theme-login [class*="min-h-"] {
  background: transparent !important;
}

html.ifix-public-theme .topbar {
  background: color-mix(in srgb, var(--ifix-bg) 84%, transparent) !important;
}

@keyframes ifixAuroraDrift {
  0% { transform: translate3d(-2%, -1%, 0) scale(1); }
  100% { transform: translate3d(2%, 1.5%, 0) scale(1.08); }
}

@media (max-width: 700px) {
  .ifix-public-bg[data-reduced-mobile="true"] {
    opacity: calc(var(--ifix-bg-opacity) * .72);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ifix-public-bg__paint { animation: none !important; }
}