.app-auth-bg {
        position: fixed;
        inset: 0;
        z-index: 0;
        pointer-events: none;
        overflow: hidden;
    }
    .app-auth-bg--hero-inline {
        position: absolute !important;
        inset: 0;
        z-index: 0;
    }
    .app-auth-bg__base {
        position: absolute;
        inset: 0;
        background: linear-gradient(165deg, #020617 0%, #0c1929 35%, #0f2847 55%, #111827 100%);
    }
    .app-auth-bg__mesh {
        position: absolute;
        inset: -40%;
        background:
            radial-gradient(ellipse 80% 50% at 20% 40%, rgba(255, 255, 255, 0.14), transparent 55%),
            radial-gradient(ellipse 70% 60% at 85% 20%, rgba(255, 255, 255, 0.1), transparent 50%),
            radial-gradient(ellipse 50% 40% at 60% 90%, rgba(255, 255, 255, 0.09), transparent 45%);
        animation: app-auth-mesh 18s ease-in-out infinite alternate;
    }
    @keyframes app-auth-mesh {
        0%   { transform: translate(0, 0) rotate(0deg) scale(1); }
        100% { transform: translate(-4%, 3%) rotate(4deg) scale(1.05); }
    }
    .app-auth-bg__grid {
        position: absolute;
        inset: 0;
        background-image:
            linear-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px),
            linear-gradient(90deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px);
        background-size: 48px 48px;
        mask-image: radial-gradient(ellipse 85% 75% at 50% 45%, black 15%, transparent 72%);
        animation: app-auth-grid 22s linear infinite;
    }
    @keyframes app-auth-grid {
        0%   { background-position: 0 0, 0 0; opacity: 0.9; }
        100% { background-position: 48px 48px, -48px 48px; opacity: 0.65; }
    }
    .app-auth-bg__glow {
        position: absolute;
        border-radius: 50%;
        filter: blur(80px);
        animation: app-auth-glow 12s ease-in-out infinite;
    }
    .app-auth-bg__glow--a {
        width: min(55vw, 420px);
        height: min(55vw, 420px);
        left: -8%;
        top: 15%;
        background: rgba(255, 255, 255, 0.16);
        animation-delay: 0s;
    }
    .app-auth-bg__glow--b {
        width: min(65vw, 520px);
        height: min(65vw, 520px);
        right: -12%;
        bottom: 5%;
        background: rgba(255, 255, 255, 0.11);
        animation-delay: -4s;
    }
    @keyframes app-auth-glow {
        0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.85; }
        50%      { transform: translate(6%, -4%) scale(1.12); opacity: 1; }
    }
    .app-auth-bg__nodes {
        position: absolute;
        inset: 0;
        background-image: radial-gradient(rgba(255, 255, 255, 0.42) 1.2px, transparent 1.2px);
        background-size: 32px 32px;
        opacity: 0.35;
        animation: app-auth-nodes 25s linear infinite;
    }
    @keyframes app-auth-nodes {
        0%   { background-position: 0 0; }
        100% { background-position: 32px 32px; }
    }
    .app-auth-bg__symbols {
        position: absolute;
        inset: 0;
        z-index: 2;
    }
    .app-auth-sym {
        position: absolute;
        left: var(--sx, 50%);
        top: var(--sy, 50%);
        color: rgba(255, 255, 255, 0.32);
        text-shadow: 0 0 24px rgba(255, 255, 255, 0.22);
        pointer-events: none;
        line-height: 1;
        font-weight: 300;
    }
    .app-auth-sym--mono {
        font-family: ui-monospace, "Cascadia Code", "Segoe UI Mono", Consolas, monospace;
        letter-spacing: 0.06em;
    }
    .app-auth-sym--lg {
        font-size: clamp(1.75rem, 4.5vw, 3.25rem);
    }
    .app-auth-sym--md {
        font-size: clamp(1.1rem, 2.8vw, 1.85rem);
    }
    .app-auth-sym--sm {
        font-size: clamp(0.75rem, 1.8vw, 1.15rem);
        opacity: 0.85;
    }
    .app-auth-sym svg {
        display: block;
        width: 1em;
        height: 1em;
    }
    .app-auth-sym--drift {
        animation: app-auth-sym-drift var(--dur, 24s) ease-in-out infinite;
        animation-delay: var(--delay, 0s);
    }
    @keyframes app-auth-sym-drift {
        0%, 100% { transform: translate(0, 0) rotate(var(--r0, 0deg)); opacity: 0.2; }
        25%      { transform: translate(var(--dx1, 12px), var(--dy1, -18px)) rotate(var(--r1, 4deg)); opacity: 0.38; }
        50%      { transform: translate(var(--dx2, -8px), var(--dy2, 10px)) rotate(var(--r2, -3deg)); opacity: 0.28; }
        75%      { transform: translate(var(--dx3, 6px), var(--dy3, 14px)) rotate(var(--r3, 2deg)); opacity: 0.34; }
    }
    .app-auth-sym--orbit {
        animation: app-auth-sym-orbit var(--dur, 32s) linear infinite;
        animation-delay: var(--delay, 0s);
        transform-origin: center center;
    }
    @keyframes app-auth-sym-orbit {
        from { transform: rotate(0deg) translateX(var(--orbit, 6px)) rotate(0deg); opacity: 0.22; }
        50%  { opacity: 0.4; }
        to   { transform: rotate(360deg) translateX(var(--orbit, 6px)) rotate(-360deg); opacity: 0.22; }
    }
    .app-auth-sym--spin-slow {
        animation: app-auth-sym-spin var(--dur, 48s) linear infinite;
        animation-delay: var(--delay, 0s);
    }
    @keyframes app-auth-sym-spin {
        from { transform: rotate(0deg); }
        to   { transform: rotate(360deg); }
    }
    .app-auth-sym--blink {
        animation: app-auth-sym-blink 3.5s ease-in-out infinite;
        animation-delay: var(--delay, 0s);
    }
    @keyframes app-auth-sym-blink {
        0%, 40%, 100% { opacity: 0.18; }
        20%, 60%      { opacity: 0.45; }
    }
    .app-auth-sym--scan-y {
        animation: app-auth-sym-scan-y 14s ease-in-out infinite;
        animation-delay: var(--delay, 0s);
    }
    @keyframes app-auth-sym-scan-y {
        0%, 100% { transform: translateY(-6%); opacity: 0.2; }
        50%      { transform: translateY(8%); opacity: 0.42; }
    }
    @media (prefers-reduced-motion: reduce) {
        .app-auth-bg__mesh,
        .app-auth-bg__grid,
        .app-auth-bg__glow,
        .app-auth-bg__nodes,
        .app-auth-sym--drift,
        .app-auth-sym--orbit,
        .app-auth-sym--spin-slow,
        .app-auth-sym--blink,
        .app-auth-sym--scan-y {
            animation: none !important;
        }
    }