/* Symbioverse 0.9.4.0 — cinematic, live aurora background. */
:root {
  --sv-aurora-primary: 110,70,235;
  --sv-aurora-secondary: 75,145,245;
  --sv-aurora-highlight: 194,130,255;
}
.sv-aurora-scene {
  position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;
  background:radial-gradient(ellipse 110% 100% at 84% 46%,rgb(var(--sv-aurora-primary) / .38),transparent 69%),#070e19;
  contain:strict;
}
.sv-aurora-scene canvas {display:block;width:100%;height:100%;opacity:.92}
.sv-aurora-scene::after {
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,#080f1c27,transparent 27%,#050a1522 100%),
    radial-gradient(ellipse at center,transparent 35%,#040a1699 130%);
}
/* This layer is visible even if WebGL is unsupported. */
.sv-aurora-fallback{position:absolute;inset:-24%;opacity:1;filter:blur(26px);overflow:hidden}
.sv-aurora-fallback i{position:absolute;display:block;width:72%;height:70%;border-radius:40% 60% 70% 35%;
  background:radial-gradient(ellipse at center,rgb(var(--sv-aurora-primary) / .92),rgb(var(--sv-aurora-primary) / .32) 39%,transparent 71%);
  transform:rotate(-25deg);will-change:transform;animation:sv-aurora-float 19s ease-in-out infinite alternate}
.sv-aurora-fallback i:nth-child(1){top:3%;left:24%}
.sv-aurora-fallback i:nth-child(2){top:37%;left:50%;width:72%;height:48%;animation-delay:-8s;animation-duration:26s;
  background:radial-gradient(ellipse at center,rgb(var(--sv-aurora-secondary) / .84),rgb(var(--sv-aurora-secondary) / .28) 42%,transparent 72%)}
.sv-aurora-fallback i:nth-child(3){top:54%;left:-9%;width:64%;height:42%;animation-delay:-13s;animation-duration:23s;
  background:radial-gradient(ellipse at center,rgb(var(--sv-aurora-highlight) / .83),rgb(var(--sv-aurora-highlight) / .29) 36%,transparent 69%)}
@keyframes sv-aurora-float{from{transform:translate3d(-7%,7%,0) rotate(-15deg) scale(.94)}to{transform:translate3d(13%,-8%,0) rotate(22deg) scale(1.14)}}
.sv-aurora-scene.sv-aurora-webgl .sv-aurora-fallback{display:none}
/* Keep all app controls above the animation; never intercept taps or scrolling. */
#root{position:relative;z-index:1;min-height:100svh;background:transparent}
#toast{z-index:14000}
/* Registration, login and role-choice pages must not cover the scene with an opaque fill. */
.auth,.role-page{background:transparent!important}
.auth .auth-story{
  background:linear-gradient(145deg,#0b1b308a,#10172e73 75%)!important;
  -webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);
}
.auth .auth-story::after{opacity:.35}
.auth .auth-box{background:linear-gradient(155deg,#101e2bd6,#0d1827bd);border:1px solid #46607d64;
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-radius:23px}
.role-page .role-option{background:linear-gradient(145deg,#122b38db,#0c1927e8)!important;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.role-page .sv-teacher-code-card{background:#111e2de8}
/* Subtle legibility layer for the workspace, keeping cards and chat surfaces opaque. */
.workspace{background:linear-gradient(180deg,#08142032,#08131c15)}
@media(max-width:760px){
  .sv-aurora-scene canvas{opacity:.78}
  .auth .auth-story{-webkit-backdrop-filter:none;backdrop-filter:none}
  .auth .auth-box{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
}
@media(prefers-reduced-motion:reduce){.sv-aurora-fallback i{animation:none!important;will-change:auto}.sv-aurora-scene canvas{opacity:.7}}
@media print{.sv-aurora-scene{display:none!important}#root{background:#fff}}