.floating-lines-container {
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

/* Full-viewport background on login + panel */
.site-floating-lines {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  /* Bias glow toward the right so ribbons feel anchored on that side */
  -webkit-mask-image: radial-gradient(
    ellipse 82% 68% at 62% 48%,
    #000 12%,
    rgba(0, 0, 0, 0.88) 48%,
    transparent 82%
  );
  mask-image: radial-gradient(
    ellipse 82% 68% at 62% 48%,
    #000 12%,
    rgba(0, 0, 0, 0.88) 48%,
    transparent 82%
  );
}

.site-floating-lines-canvas,
.check-floating-lines-canvas {
  display: block;
  width: 100%;
  height: 100%;
  mix-blend-mode: plus-lighter;
  opacity: 0.88;
}

html[data-theme="alt"],
html[data-theme="alt"] body {
  /* Soft static glow so the page never looks "empty" if WebGL pauses/resets.
     Must win over alt-theme flat #050508. */
  background:
    radial-gradient(ellipse 78% 58% at 58% 46%, rgba(130, 140, 185, 0.28), transparent 72%),
    radial-gradient(ellipse 55% 45% at 82% 14%, rgba(120, 100, 180, 0.14), transparent 65%),
    #121214 !important;
}

html[data-theme="alt"] body.floating-lines-paused {
  /* Legacy class — do not blank the page if it lingers */
  background:
    radial-gradient(ellipse 78% 58% at 58% 46%, rgba(130, 140, 185, 0.28), transparent 72%),
    #121214 !important;
}

/* Permanent ambient layer under content — survives WebGL pause/loss/click */
html[data-theme="alt"] body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 78% 58% at 58% 46%, rgba(130, 140, 185, 0.3), transparent 72%),
    radial-gradient(ellipse 55% 45% at 82% 14%, rgba(120, 100, 180, 0.16), transparent 65%),
    #121214;
}

html[data-theme="alt"] body.floating-lines-active #authScreen,
html[data-theme="alt"] body.floating-lines-active #appRoot,
html[data-theme="alt"] body.floating-lines-active .app-layout,
html[data-theme="alt"] body.floating-lines-active .app-main,
html[data-theme="alt"] body.floating-lines-active .app-main-scroll {
  background: transparent !important;
}

/* If lines are paused/hidden but panes stay transparent, still show ambient body. */
html[data-theme="alt"] body.floating-lines-active.floating-lines-paused #authScreen,
html[data-theme="alt"] body.floating-lines-active.floating-lines-paused #appRoot,
html[data-theme="alt"] body.floating-lines-active.floating-lines-paused .app-layout,
html[data-theme="alt"] body.floating-lines-active.floating-lines-paused .app-main,
html[data-theme="alt"] body.floating-lines-active.floating-lines-paused .app-main-scroll {
  background: transparent !important;
}

html[data-theme="alt"] body.floating-lines-active .site-ferrofluid,
html[data-theme="alt"] body.floating-lines-active .site-ferrofluid-vignette {
  opacity: 0 !important;
  visibility: hidden !important;
}

html[data-theme="alt"] .site-floating-lines:not(.is-hidden) {
  display: block;
  opacity: 1;
}

html[data-theme="alt"] .site-floating-lines.is-hidden {
  /* Keep node in layout for remount; ambient body gradient covers the gap */
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

html[data-theme="alt"] #authScreen,
html[data-theme="alt"] #appRoot.page {
  position: relative;
  z-index: 1;
}

html[data-theme="alt"] .app-main {
  position: relative;
}

html[data-theme="alt"] .app-main-scroll,
html[data-theme="alt"] .app-topbar {
  position: relative;
  z-index: 1;
}

/* Keep sticky top-nav ABOVE scroll content (sibling paint order).
   Do NOT set position:relative / z-index:1 on #cardNavMount — that
   kills sticky and lets page content cover the open hamburger cards. */
html[data-theme="alt"] #cardNavMount.card-nav-mount {
  position: sticky;
  top: 0;
  z-index: 120;
}

/* Check idle — transparent card over lines */
html[data-theme="alt"] #tab-check > .check-card {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  padding: 0 !important;
  margin-bottom: 0 !important;
  position: relative;
  z-index: 1;
  overflow: visible !important;
  border-radius: 0 !important;
}

html[data-theme="alt"] #tab-check > .check-card::after {
  display: none !important;
  content: none !important;
}

html[data-theme="alt"] body.floating-lines-active .alt-pane {
  background: transparent !important;
}

/* Readable text over animated background */
html[data-theme="alt"] body.floating-lines-active .rb-page-title,
html[data-theme="alt"] body.floating-lines-active .rb-page-desc,
html[data-theme="alt"] body.floating-lines-active .rb-breadcrumb,
html[data-theme="alt"] body.floating-lines-active .check-hero-title,
html[data-theme="alt"] body.floating-lines-active .check-hero-lead,
html[data-theme="alt"] body.floating-lines-active .check-hero-sub,
html[data-theme="alt"] body.floating-lines-active .auth-card h1,
html[data-theme="alt"] body.floating-lines-active .auth-tagline {
  text-shadow: 0 1px 24px rgba(0, 0, 0, 0.75), 0 0 40px rgba(0, 0, 0, 0.35);
}

@media (prefers-reduced-motion: reduce) {
  html[data-theme="alt"] .site-floating-lines {
    display: none !important;
  }
}