/* ==========================================================
   SCABNET LOGIN — PREMIUM V4
   Standalone design.
   All selectors intentionally live below .sn4.
   ========================================================== */

.sn4,
.sn4 * {
    box-sizing: border-box;
}

.sn4 {
    --bg: #02050a;
    --panel: rgba(7, 13, 22, .82);
    --panel2: rgba(10, 18, 29, .94);
    --line: rgba(140, 220, 255, .12);
    --line2: rgba(140, 220, 255, .22);
    --cyan: #77e7ff;
    --cyan2: #2fc5e8;
    --text: #eef8ff;
    --muted: #718394;

    position: fixed;
    inset: 0;

    width: 100vw;
    height: 100vh;
    min-height: 720px;

    overflow: hidden;

    z-index: 50;

    color: var(--text);

    background:
        radial-gradient(
            ellipse at 32% 42%,
            rgba(11, 115, 145, .12),
            transparent 34%
        ),
        radial-gradient(
            ellipse at 78% 22%,
            rgba(25, 64, 112, .09),
            transparent 31%
        ),
        radial-gradient(
            ellipse at 50% 105%,
            rgba(13, 148, 136, .07),
            transparent 38%
        ),
        #02050a;

    font-family:
        Inter,
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
}


/* ==========================================================
   BACKGROUND
   ========================================================== */

.sn4-background {
    position: absolute;
    inset: 0;

    overflow: hidden;

    pointer-events: none;

    z-index: 0;
}


.sn4-particles {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    opacity: .62;
}


.sn4-aurora {
    position: absolute;

    border-radius: 50%;

    filter: blur(100px);

    opacity: .16;

    animation:
        sn4Aurora 13s ease-in-out infinite alternate;
}

.sn4-aurora-a {
    width: 650px;
    height: 650px;

    left: -170px;
    top: 16%;

    background:
        rgba(6, 182, 212, .25);
}

.sn4-aurora-b {
    width: 760px;
    height: 760px;

    right: -240px;
    top: -180px;

    background:
        rgba(59, 130, 246, .16);

    animation-delay: -4s;
}

.sn4-aurora-c {
    width: 650px;
    height: 500px;

    left: 38%;
    bottom: -330px;

    background:
        rgba(20, 184, 166, .13);

    animation-delay: -8s;
}

@keyframes sn4Aurora {

    to {
        transform:
            translate3d(
                55px,
                -35px,
                0
            )
            scale(1.14);
    }

}


/* ----------------------------------------------------------
   MOVING GRID
   ---------------------------------------------------------- */

.sn4-grid {
    position: absolute;

    width: 160%;
    height: 68%;

    left: -30%;
    bottom: -42%;

    transform:
        perspective(620px)
        rotateX(65deg);

    transform-origin:
        center top;

    opacity: .16;

    background-image:
        linear-gradient(
            rgba(119, 231, 255, .25) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(119, 231, 255, .20) 1px,
            transparent 1px
        );

    background-size:
        64px 64px;

    mask-image:
        linear-gradient(
            to bottom,
            transparent,
            #000 20%,
            #000 62%,
            transparent
        );

    animation:
        sn4GridMove 5s linear infinite;
}

@keyframes sn4GridMove {

    to {
        background-position:
            0 64px;
    }

}


/* ----------------------------------------------------------
   SCAN BEAM
   ---------------------------------------------------------- */

.sn4-scan-beam {
    position: absolute;

    width: 130%;
    height: 220px;

    left: -15%;
    top: -250px;

    opacity: .18;

    background:
        linear-gradient(
            to bottom,
            transparent,
            rgba(103, 232, 249, .06),
            rgba(103, 232, 249, .14),
            transparent
        );

    transform:
        rotate(-4deg);

    animation:
        sn4Scan 10s linear infinite;
}

@keyframes sn4Scan {

    to {
        transform:
            translateY(calc(100vh + 500px))
            rotate(-4deg);
    }

}


/* ----------------------------------------------------------
   VIGNETTE / NOISE
   ---------------------------------------------------------- */

.sn4-vignette {
    position: absolute;
    inset: 0;

    background:
        radial-gradient(
            ellipse at center,
            transparent 38%,
            rgba(0,0,0,.25) 72%,
            rgba(0,0,0,.62) 100%
        );
}

.sn4-noise {
    position: absolute;
    inset: 0;

    opacity: .15;

    background-image:
        repeating-linear-gradient(
            0deg,
            rgba(255,255,255,.012) 0,
            rgba(255,255,255,.012) 1px,
            transparent 1px,
            transparent 4px
        );

    mix-blend-mode: overlay;
}


/* ==========================================================
   HUD
   ========================================================== */

.sn4-hud {
    position: absolute;

    left: 38px;
    right: 38px;
    top: 30px;

    z-index: 10;

    display: flex;
    justify-content: space-between;
    align-items: center;

    color:
        rgba(148, 178, 194, .52);

    font-size: 9px;
    font-weight: 800;

    letter-spacing: .22em;

    pointer-events: none;
}

.sn4-hud-left,
.sn4-hud-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

.sn4-hud-left b {
    color:
        rgba(103, 232, 249, .72);
}

.sn4-hud-dot {
    width: 5px;
    height: 5px;

    border-radius: 50%;

    background: #67e8f9;

    box-shadow:
        0 0 12px #67e8f9;

    animation:
        sn4Blink 1.7s ease-in-out infinite;
}

.sn4-hud-right i {
    display: block;

    width: 42px;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(103,232,249,.35),
            transparent
        );
}

@keyframes sn4Blink {

    50% {
        opacity: .2;
    }

}


/* ==========================================================
   MAIN
   ========================================================== */

.sn4-main {
    position: relative;

    z-index: 5;

    width: min(1420px, calc(100vw - 90px));
    height: 100%;

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        minmax(520px, 1.2fr)
        minmax(390px, .8fr);

    align-items: center;

    gap: clamp(40px, 6vw, 110px);

    padding:
        65px 0 55px;
}


/* ==========================================================
   EARTH ZONE
   ========================================================== */

.sn4-earth-zone {
    position: relative;

    width:
        clamp(
            560px,
            43vw,
            780px
        );

    height:
        clamp(
            560px,
            43vw,
            780px
        );

    justify-self: center;

    flex-shrink: 0;

    isolation: isolate;
}


/* ----------------------------------------------------------
   EARTH GLOW
   ---------------------------------------------------------- */

.sn4-earth-glow {
    position: absolute;

    width: 72%;
    height: 72%;

    left: 14%;
    top: 14%;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(49, 197, 232, .16),
            rgba(9, 85, 110, .07) 42%,
            transparent 72%
        );

    filter: blur(28px);

    animation:
        sn4EarthGlow 5s ease-in-out infinite;
}

@keyframes sn4EarthGlow {

    50% {
        transform: scale(1.09);
        opacity: .58;
    }

}


/* ----------------------------------------------------------
   EARTH CANVAS
   ---------------------------------------------------------- */

.sn4-earth {
    position: absolute;

    inset: 0;

    display: block;

    width: 100%;
    height: 100%;

    z-index: 5;

    filter:
        drop-shadow(
            0 0 16px
            rgba(73, 214, 245, .18)
        )
        drop-shadow(
            0 0 65px
            rgba(14, 116, 144, .13)
        );
}


/* ----------------------------------------------------------
   ORBITS
   ---------------------------------------------------------- */

.sn4-orbit {
    position: absolute;

    left: 50%;
    top: 50%;

    border:
        1px solid
        rgba(119, 231, 255, .13);

    border-radius: 50%;

    pointer-events: none;
}

.sn4-orbit::before {
    content: "";

    position: absolute;

    inset: -1px;

    border-radius: inherit;

    border-top:
        1px solid
        rgba(119, 231, 255, .38);

    border-right:
        1px solid transparent;

    border-bottom:
        1px solid transparent;

    border-left:
        1px solid transparent;
}

.sn4-orbit i {
    position: absolute;

    width: 6px;
    height: 6px;

    left: 13%;
    top: 18%;

    border-radius: 50%;

    background:
        #a5f3fc;

    box-shadow:
        0 0 14px
        rgba(103, 232, 249, .9);
}

.sn4-orbit-a {
    width: 78%;
    height: 78%;

    transform:
        translate(-50%, -50%)
        rotateX(67deg)
        rotateZ(-12deg);

    animation:
        sn4OrbitA 13s linear infinite;
}

.sn4-orbit-b {
    width: 91%;
    height: 91%;

    opacity: .68;

    transform:
        translate(-50%, -50%)
        rotateX(73deg)
        rotateZ(31deg);

    animation:
        sn4OrbitB 19s linear infinite reverse;
}

.sn4-orbit-c {
    width: 103%;
    height: 103%;

    opacity: .34;

    transform:
        translate(-50%, -50%)
        rotateX(61deg)
        rotateZ(-47deg);

    animation:
        sn4OrbitC 27s linear infinite;
}

@keyframes sn4OrbitA {

    to {
        transform:
            translate(-50%, -50%)
            rotateX(67deg)
            rotateZ(348deg);
    }

}

@keyframes sn4OrbitB {

    to {
        transform:
            translate(-50%, -50%)
            rotateX(73deg)
            rotateZ(391deg);
    }

}

@keyframes sn4OrbitC {

    to {
        transform:
            translate(-50%, -50%)
            rotateX(61deg)
            rotateZ(313deg);
    }

}


/* ----------------------------------------------------------
   SCANNER RINGS
   ---------------------------------------------------------- */

.sn4-earth-ring {
    position: absolute;

    left: 50%;
    top: 50%;

    border-radius: 50%;

    border:
        1px solid
        rgba(103,232,249,.10);

    transform:
        translate(-50%, -50%);

    pointer-events: none;
}

.sn4-earth-ring-a {
    width: 63%;
    height: 63%;

    animation:
        sn4Ring 4s ease-out infinite;
}

.sn4-earth-ring-b {
    width: 63%;
    height: 63%;

    animation:
        sn4Ring 4s 2s ease-out infinite;
}

@keyframes sn4Ring {

    0% {
        opacity: 0;
        transform:
            translate(-50%, -50%)
            scale(.84);
    }

    20% {
        opacity: .55;
    }

    100% {
        opacity: 0;

        transform:
            translate(-50%, -50%)
            scale(1.28);
    }

}


/* ----------------------------------------------------------
   CROSSHAIR
   ---------------------------------------------------------- */

.sn4-earth-crosshair {
    position: absolute;

    width: 60%;
    height: 60%;

    left: 20%;
    top: 20%;

    border:
        1px solid
        rgba(119,231,255,.065);

    border-radius: 50%;

    z-index: 8;

    pointer-events: none;
}

.sn4-earth-crosshair span:first-child {
    position: absolute;

    width: 116%;
    height: 1px;

    left: -8%;
    top: 50%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(119,231,255,.11),
            transparent
        );
}

.sn4-earth-crosshair span:last-child {
    position: absolute;

    width: 1px;
    height: 116%;

    left: 50%;
    top: -8%;

    background:
        linear-gradient(
            transparent,
            rgba(119,231,255,.11),
            transparent
        );
}


/* ----------------------------------------------------------
   EARTH DATA
   ---------------------------------------------------------- */

.sn4-earth-data {
    position: absolute;

    z-index: 10;

    display: flex;
    flex-direction: column;
    gap: 5px;

    color:
        rgba(134, 169, 186, .56);

    font-size: 8px;

    letter-spacing: .17em;

    pointer-events: none;
}

.sn4-earth-data small {
    font-size: 7px;

    color:
        rgba(111, 140, 157, .48);
}

.sn4-earth-data strong {
    font-size: 9px;

    color:
        rgba(164, 221, 236, .64);
}

.sn4-earth-data-a {
    left: 3%;
    top: 32%;
}

.sn4-earth-data-b {
    right: 2%;
    bottom: 31%;

    text-align: right;
}

.sn4-earth-status {
    position: absolute;

    left: 50%;
    bottom: 7%;

    transform:
        translateX(-50%);

    z-index: 10;

    display: flex;
    align-items: center;
    gap: 10px;

    white-space: nowrap;

    color:
        rgba(171, 219, 231, .67);

    font-size: 8px;
    font-weight: 800;

    letter-spacing: .22em;
}

.sn4-earth-status span {
    width: 5px;
    height: 5px;

    border-radius: 50%;

    background:
        #67e8f9;

    box-shadow:
        0 0 12px
        rgba(103,232,249,.85);

    animation:
        sn4Blink 1.6s ease-in-out infinite;
}


/* ==========================================================
   AUTH ZONE
   ========================================================== */

.sn4-auth-zone {
    position: relative;

    width: min(100%, 470px);

    justify-self: center;
}


/* ==========================================================
   BRAND
   ========================================================== */

.sn4-brand {
    margin-bottom: 25px;

    text-align: left;
}

.sn4-brand-kicker {
    margin-bottom: 8px;

    color:
        rgba(103, 232, 249, .54);

    font-size: 8px;
    font-weight: 800;

    letter-spacing: .29em;
}

.sn4-brand h1 {
    margin: 0;

    color: #f4f9ff;

    font-size:
        clamp(
            40px,
            4vw,
            64px
        );

    font-weight: 750;

    line-height: .95;

    letter-spacing: .16em;

    text-shadow:
        0 0 35px
        rgba(103,232,249,.08);
}

.sn4-brand-line {
    display: flex;
    align-items: center;

    gap: 12px;

    margin-top: 17px;
}

.sn4-brand-line span {
    width: 54px;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            rgba(103,232,249,.02),
            rgba(103,232,249,.28)
        );
}

.sn4-brand-line span:last-child {
    transform: scaleX(-1);
}

.sn4-brand-line p {
    margin: 0;

    color:
        rgba(117, 143, 158, .62);

    font-size: 7px;
    font-weight: 800;

    letter-spacing: .24em;
}


/* ==========================================================
   MESSAGES
   ========================================================== */

.sn4-messages {
    margin-bottom: 14px;
}

.sn4-message {
    padding: 11px 14px;

    border:
        1px solid
        rgba(251, 113, 133, .22);

    background:
        rgba(127, 29, 29, .16);

    color:
        rgba(254, 205, 211, .92);

    font-size: 12px;
}


/* ==========================================================
   PANEL
   ========================================================== */

.sn4-panel {
    position: relative;

    overflow: hidden;

    padding: 20px;

    border:
        1px solid
        rgba(130, 183, 211, .16);

    border-radius: 16px;

    background:
        linear-gradient(
            145deg,
            rgba(13, 22, 34, .94),
            rgba(5, 10, 17, .91)
        );

    box-shadow:
        0 35px 100px
        rgba(0,0,0,.45),
        inset 0 1px 0
        rgba(255,255,255,.025);

    backdrop-filter:
        blur(20px);
}

.sn4-panel::before {
    content: "";

    position: absolute;

    left: 0;
    right: 0;
    top: 0;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(103,232,249,.40),
            transparent
        );

    opacity: .55;
}

.sn4-panel-glow {
    position: absolute;

    width: 220px;
    height: 220px;

    right: -100px;
    top: -130px;

    border-radius: 50%;

    background:
        rgba(37, 99, 235, .12);

    filter:
        blur(60px);

    pointer-events: none;
}


/* ----------------------------------------------------------
   PANEL HEADER
   ---------------------------------------------------------- */

.sn4-panel-top {
    position: relative;

    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom: 16px;

    color:
        rgba(115, 143, 159, .52);

    font-size: 7px;
    font-weight: 800;

    letter-spacing: .20em;
}

.sn4-panel-top div {
    display: flex;
    align-items: center;
    gap: 7px;
}

.sn4-panel-dot {
    display: inline-block;

    width: 4px;
    height: 4px;

    border-radius: 50%;

    background:
        #67e8f9;

    box-shadow:
        0 0 8px
        rgba(103,232,249,.8);
}


/* ==========================================================
   DISCORD
   ========================================================== */

.sn4-discord {
    position: relative;

    display: flex;
    align-items: center;

    width: 100%;

    padding: 14px 15px;

    border:
        1px solid
        rgba(129, 140, 248, .25);

    border-radius: 10px;

    color:
        rgba(239, 242, 255, .94);

    text-decoration: none;

    background:
        linear-gradient(
            110deg,
            rgba(88, 101, 242, .18),
            rgba(57, 69, 143, .09)
        );

    transition:
        border-color .2s ease,
        transform .2s ease,
        background .2s ease,
        box-shadow .2s ease;
}

.sn4-discord:hover {
    transform:
        translateY(-1px);

    border-color:
        rgba(129,140,248,.48);

    background:
        linear-gradient(
            110deg,
            rgba(88,101,242,.27),
            rgba(57,69,143,.13)
        );

    box-shadow:
        0 12px 35px
        rgba(0,0,0,.18);
}

.sn4-discord-icon {
    display: grid;
    place-items: center;

    width: 31px;
    height: 31px;

    margin-right: 13px;
}

.sn4-discord-icon svg {
    width: 25px;
    height: 25px;
}

.sn4-discord-copy {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.sn4-discord-copy small {
    color:
        rgba(164, 173, 203, .52);

    font-size: 6px;
    font-weight: 800;

    letter-spacing: .20em;
}

.sn4-discord-copy strong {
    font-size: 12px;
    font-weight: 650;
}

.sn4-arrow {
    margin-left: auto;

    color:
        rgba(207, 221, 230, .70);

    font-size: 19px;
}


/* ==========================================================
   DIVIDER
   ========================================================== */

.sn4-divider {
    display: grid;

    grid-template-columns:
        1fr auto 1fr;

    align-items: center;

    gap: 11px;

    margin: 18px 0;
}

.sn4-divider span {
    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(120, 150, 168, .15)
        );
}

.sn4-divider span:last-child {
    transform: scaleX(-1);
}

.sn4-divider b {
    color:
        rgba(102, 123, 136, .52);

    font-size: 6px;

    letter-spacing: .20em;
}


/* ==========================================================
   FORM
   ========================================================== */

.sn4-form {
    display: flex;
    flex-direction: column;

    gap: 15px;
}

.sn4-field {
    display: flex;
    flex-direction: column;

    gap: 7px;
}

.sn4-field > span {
    color:
        rgba(119, 146, 162, .62);

    font-size: 7px;
    font-weight: 800;

    letter-spacing: .18em;
}

.sn4-input {
    position: relative;

    display: flex;
    align-items: center;

    height: 48px;

    overflow: hidden;

    border:
        1px solid
        rgba(117, 151, 169, .15);

    border-radius: 9px;

    background:
        rgba(2, 7, 12, .67);

    transition:
        border-color .2s ease,
        box-shadow .2s ease,
        background .2s ease;
}

.sn4-input:focus-within {
    border-color:
        rgba(103, 232, 249, .38);

    background:
        rgba(3, 10, 16, .86);

    box-shadow:
        0 0 0 3px
        rgba(34,211,238,.035),
        0 0 28px
        rgba(34,211,238,.035);
}

.sn4-input-icon {
    display: grid;
    place-items: center;

    width: 42px;
    height: 100%;

    flex: 0 0 42px;

    color:
        rgba(103, 232, 249, .38);

    font-size: 11px;
}

.sn4-input input {
    width: 100%;
    height: 100%;

    min-width: 0;

    padding:
        0 13px 0 0;

    border: 0;
    outline: 0;

    color:
        rgba(234, 244, 250, .92);

    background:
        transparent;

    font: inherit;
    font-size: 11px;
}

.sn4-input input::placeholder {
    color:
        rgba(105, 125, 137, .42);
}


/* ==========================================================
   SUBMIT
   ========================================================== */

.sn4-submit {
    position: relative;

    display: flex;
    align-items: center;
    justify-content: space-between;

    width: 100%;

    min-height: 55px;

    margin-top: 3px;

    padding:
        10px 15px;

    overflow: hidden;

    border:
        1px solid
        rgba(199, 242, 255, .70);

    border-radius: 9px;

    cursor: pointer;

    color:
        #041017;

    background:
        linear-gradient(
            110deg,
            #e8f7fc,
            #cde9f1
        );

    transition:
        transform .2s ease,
        box-shadow .2s ease;
}

.sn4-submit::before {
    content: "";

    position: absolute;

    width: 80px;
    height: 180%;

    left: -120px;
    top: -40%;

    background:
        rgba(255,255,255,.55);

    transform:
        skewX(-24deg);

    filter:
        blur(8px);

    transition:
        left .55s ease;
}

.sn4-submit:hover {
    transform:
        translateY(-1px);

    box-shadow:
        0 13px 35px
        rgba(45, 183, 214, .11);
}

.sn4-submit:hover::before {
    left: 120%;
}

.sn4-submit > span {
    position: relative;

    display: flex;
    flex-direction: column;

    align-items: flex-start;

    gap: 1px;

    z-index: 2;
}

.sn4-submit small {
    opacity: .55;

    font-size: 6px;
    font-weight: 800;

    letter-spacing: .16em;
}

.sn4-submit strong {
    font-size: 11px;
    font-weight: 750;
}

.sn4-submit i {
    position: relative;

    z-index: 2;

    font-size: 20px;
    font-style: normal;
}


/* ==========================================================
   PANEL FOOTER
   ========================================================== */

.sn4-panel-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 10px;

    margin-top: 17px;
    padding-top: 14px;

    border-top:
        1px solid
        rgba(117, 151, 169, .08);

    color:
        rgba(99, 121, 134, .46);

    font-size: 6px;
    font-weight: 800;

    letter-spacing: .12em;
}

.sn4-panel-footer span {
    display: flex;
    align-items: center;
    gap: 6px;
}

.sn4-panel-footer i {
    width: 4px;
    height: 4px;

    border-radius: 50%;

    background:
        #5eead4;

    box-shadow:
        0 0 7px
        rgba(94,234,212,.65);
}


/* ==========================================================
   BOTTOM HUD
   ========================================================== */

.sn4-bottom-hud {
    position: absolute;

    left: 38px;
    right: 38px;
    bottom: 27px;

    z-index: 8;

    display: flex;
    justify-content: space-between;

    color:
        rgba(95, 119, 133, .40);

    font-size: 7px;
    font-weight: 800;

    letter-spacing: .17em;

    pointer-events: none;
}

.sn4-bottom-hud div {
    display: flex;
    align-items: center;
    gap: 8px;
}

.sn4-bottom-hud i {
    width: 4px;
    height: 4px;

    border-radius: 50%;

    background:
        #5eead4;

    box-shadow:
        0 0 8px
        rgba(94,234,212,.7);
}


/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media (max-width: 1050px) {

    .sn4 {
        min-height: 850px;
        overflow-y: auto;
    }

    .sn4-main {
        width:
            min(
                94vw,
                650px
            );

        height: auto;
        min-height: 100%;

        display: flex;
        flex-direction: column;

        gap: 0;

        padding:
            40px 0 80px;
    }

    .sn4-earth-zone {
        width:
            min(
                620px,
                92vw
            );

        height:
            min(
                620px,
                92vw
            );

        margin:
            -80px 0 -125px;
    }

    .sn4-auth-zone {
        width:
            min(
                92vw,
                470px
            );
    }

    .sn4-brand {
        text-align: center;
    }

    .sn4-brand-line {
        justify-content: center;
    }

}


@media (max-width: 600px) {

    .sn4 {
        min-height: 760px;
    }

    .sn4-hud,
    .sn4-bottom-hud {
        display: none;
    }

    .sn4-main {
        padding:
            15px 0 45px;
    }

    .sn4-earth-zone {
        width: 108vw;
        height: 108vw;

        min-width: 400px;
        min-height: 400px;

        margin:
            -65px 0 -100px;
    }

    .sn4-earth-data {
        display: none;
    }

    .sn4-earth-status {
        bottom: 10%;

        font-size: 6px;
    }

    .sn4-brand h1 {
        font-size: 38px;
    }

    .sn4-panel {
        padding: 16px;
        border-radius: 13px;
    }

}


/* ==========================================================
   REDUCED MOTION
   ========================================================== */

@media (prefers-reduced-motion: reduce) {

    .sn4-aurora,
    .sn4-grid,
    .sn4-scan-beam,
    .sn4-orbit,
    .sn4-earth-ring,
    .sn4-hud-dot,
    .sn4-earth-status span {
        animation: none !important;
    }

}


/* ==========================================================
   SCABNET PREMIUM V5
   ========================================================== */


/* ----------------------------------------------------------
   SCABNET LIGHT SWEEP
   ---------------------------------------------------------- */

.sn4-brand h1 {
    position: relative;
    width: max-content;
    overflow: hidden;
}

.sn4-brand h1::after {
    content: "";

    position: absolute;

    top: -30%;
    left: -35%;

    width: 24%;
    height: 160%;

    pointer-events: none;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(220, 250, 255, .42),
            transparent
        );

    transform: skewX(-24deg);

    filter: blur(3px);

    animation:
        sn5-logo-sweep
        7.5s ease-in-out infinite;
}

@keyframes sn5-logo-sweep {

    0%,
    66% {
        left: -35%;
        opacity: 0;
    }

    70% {
        opacity: 1;
    }

    86% {
        left: 115%;
        opacity: 1;
    }

    90%,
    100% {
        left: 115%;
        opacity: 0;
    }

}


/* ----------------------------------------------------------
   EARTH PREMIUM DEPTH
   ---------------------------------------------------------- */

.sn4-earth-zone {
    transform-style: preserve-3d;
    will-change: transform;

    transition:
        transform .15s ease-out;
}

.sn4-earth-zone::after {
    content: "";

    position: absolute;

    width: 59%;
    height: 59%;

    left: 20.5%;
    top: 20.5%;

    z-index: 8;

    border-radius: 50%;

    pointer-events: none;

    background:
        radial-gradient(
            circle at 34% 27%,
            rgba(220, 250, 255, .08),
            transparent 25%
        );

    mix-blend-mode: screen;
}


/* ----------------------------------------------------------
   EARTH PULSE
   ---------------------------------------------------------- */

.sn4-earth-glow {
    animation:
        sn5-earth-glow
        5s ease-in-out infinite !important;
}

@keyframes sn5-earth-glow {

    0%,
    100% {
        transform: scale(.96);
        opacity: .68;
    }

    50% {
        transform: scale(1.08);
        opacity: 1;
    }

}


/* ----------------------------------------------------------
   PREMIUM BACKGROUND DATA STREAMS
   ---------------------------------------------------------- */

.sn4-background::before,
.sn4-background::after {
    content: "";

    position: absolute;

    z-index: 4;

    width: 240px;
    height: 1px;

    pointer-events: none;

    opacity: 0;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(103, 232, 249, .15),
            rgba(190, 245, 255, .85),
            rgba(103, 232, 249, .15),
            transparent
        );

    filter:
        drop-shadow(
            0 0 8px
            rgba(103, 232, 249, .45)
        );
}

.sn4-background::before {
    left: -300px;
    top: 28%;

    animation:
        sn5-stream-a
        10s linear infinite;
}

.sn4-background::after {
    right: -300px;
    top: 72%;

    animation:
        sn5-stream-b
        13s 2.5s linear infinite;
}

@keyframes sn5-stream-a {

    0% {
        transform:
            translateX(0)
            rotate(-7deg);

        opacity: 0;
    }

    12% {
        opacity: .25;
    }

    80% {
        opacity: .18;
    }

    100% {
        transform:
            translateX(calc(100vw + 600px))
            rotate(-7deg);

        opacity: 0;
    }

}

@keyframes sn5-stream-b {

    0% {
        transform:
            translateX(0)
            rotate(7deg);

        opacity: 0;
    }

    12% {
        opacity: .20;
    }

    80% {
        opacity: .14;
    }

    100% {
        transform:
            translateX(calc(-100vw - 600px))
            rotate(7deg);

        opacity: 0;
    }

}


/* ----------------------------------------------------------
   PANEL PREMIUM GLASS
   ---------------------------------------------------------- */

.sn4-panel {
    transition:
        border-color .25s ease,
        box-shadow .25s ease,
        transform .25s ease;
}

.sn4-panel:hover {
    border-color:
        rgba(120, 220, 245, .26);

    box-shadow:
        0 38px 110px rgba(0, 0, 0, .52),
        0 0 55px rgba(30, 190, 220, .035),
        inset 0 1px 0 rgba(255, 255, 255, .04);
}


/* ----------------------------------------------------------
   INPUT FOCUS
   ---------------------------------------------------------- */

.sn4-input::after {
    content: "";

    position: absolute;

    left: 50%;
    bottom: 0;

    width: 0;
    height: 1px;

    opacity: 0;

    transform: translateX(-50%);

    background:
        linear-gradient(
            90deg,
            transparent,
            #67e8f9,
            transparent
        );

    box-shadow:
        0 0 9px
        rgba(103, 232, 249, .75);

    transition:
        width .3s ease,
        opacity .3s ease;
}

.sn4-input:focus-within::after {
    width: 100%;
    opacity: 1;
}

.sn4-input-icon {
    transition:
        color .2s ease,
        transform .2s ease,
        text-shadow .2s ease;
}

.sn4-input:focus-within .sn4-input-icon {
    color:
        rgba(103, 232, 249, .95);

    transform: scale(1.08);

    text-shadow:
        0 0 10px
        rgba(103, 232, 249, .6);
}


/* ----------------------------------------------------------
   LOGIN BUTTON PROCESSING
   ---------------------------------------------------------- */

.sn4-submit.sn5-processing {
    pointer-events: none;
}

.sn4-submit.sn5-processing i {
    animation:
        sn5-login-arrow
        .6s ease-in-out infinite alternate;
}

@keyframes sn5-login-arrow {

    to {
        transform: translateX(6px);
        opacity: .4;
    }

}


/* ----------------------------------------------------------
   DYNAMIC HUD BADGE
   ---------------------------------------------------------- */

.sn5-security-badge {
    position: fixed;

    right: 38px;
    top: 58px;

    z-index: 20;

    display: flex;
    align-items: center;

    gap: 9px;

    pointer-events: none;

    color:
        rgba(125, 166, 184, .48);

    font-size: 7px;
    font-weight: 800;

    letter-spacing: .18em;

    transition:
        opacity .18s ease,
        transform .18s ease;
}

.sn5-security-badge::before {
    content: "";

    width: 4px;
    height: 4px;

    border-radius: 50%;

    background: #67e8f9;

    box-shadow:
        0 0 8px
        rgba(103, 232, 249, .8);
}

.sn5-security-badge.sn5-changing {
    opacity: 0;

    transform: translateY(-4px);
}


/* ----------------------------------------------------------
   AUTH OVERLAY
   Wird komplett per JS erzeugt.
   Kein Jinja notwendig.
   ---------------------------------------------------------- */

.sn5-auth-overlay {
    position: fixed;

    inset: 0;

    z-index: 10000;

    display: grid;
    place-items: center;

    opacity: 0;
    visibility: hidden;

    pointer-events: none;

    background:
        radial-gradient(
            circle at center,
            rgba(5, 33, 45, .93),
            rgba(1, 5, 9, .98) 55%,
            #010308
        );

    backdrop-filter: blur(16px);

    transition:
        opacity .35s ease,
        visibility .35s ease;
}

.sn5-auth-overlay.sn5-visible {
    opacity: 1;
    visibility: visible;
}

.sn5-auth-core {
    position: relative;

    width:
        min(
            620px,
            72vw
        );

    aspect-ratio: 1;

    display: grid;
    place-items: center;
}

.sn5-auth-ring {
    position: absolute;

    border-radius: 50%;

    border:
        1px solid
        rgba(103, 232, 249, .12);
}

.sn5-auth-ring:nth-child(1) {
    inset: 0;

    border-top-color:
        rgba(103, 232, 249, .65);

    animation:
        sn5-auth-spin
        3s linear infinite;
}

.sn5-auth-ring:nth-child(2) {
    inset: 13%;

    border-right-color:
        rgba(103, 232, 249, .50);

    animation:
        sn5-auth-spin
        4.5s linear infinite reverse;
}

.sn5-auth-ring:nth-child(3) {
    inset: 27%;

    border-bottom-color:
        rgba(190, 245, 255, .42);

    animation:
        sn5-auth-spin
        2.5s linear infinite;
}

@keyframes sn5-auth-spin {

    to {
        transform: rotate(360deg);
    }

}

.sn5-auth-copy {
    position: relative;

    z-index: 3;

    display: flex;
    flex-direction: column;
    align-items: center;

    gap: 9px;

    text-align: center;
}

.sn5-auth-copy i {
    display: block;

    width: 7px;
    height: 7px;

    margin-bottom: 8px;

    border-radius: 50%;

    background: #67e8f9;

    box-shadow:
        0 0 18px
        rgba(103, 232, 249, .95);

    animation:
        sn5-auth-pulse
        .7s ease-in-out infinite alternate;
}

.sn5-auth-copy strong {
    color:
        rgba(232, 250, 255, .96);

    font-size:
        clamp(
            15px,
            1.4vw,
            21px
        );

    letter-spacing: .22em;
}

.sn5-auth-copy small {
    color:
        rgba(119, 153, 168, .60);

    font-size: 7px;
    font-weight: 800;

    letter-spacing: .20em;
}

@keyframes sn5-auth-pulse {

    to {
        transform: scale(.55);
        opacity: .3;
    }

}


/* ----------------------------------------------------------
   1440P / 4K
   ---------------------------------------------------------- */

@media (min-width: 1700px) {

    .sn4-main {
        width:
            min(
                1620px,
                calc(100vw - 130px)
            );

        grid-template-columns:
            minmax(720px, 1.25fr)
            minmax(470px, .75fr);

        gap: 130px;
    }

    .sn4-earth-zone {
        width:
            clamp(
                730px,
                42vw,
                900px
            );

        height:
            clamp(
                730px,
                42vw,
                900px
            );
    }

    .sn4-auth-zone {
        width: 500px;
    }

}

@media (min-width: 2300px) {

    .sn4-main {
        width: 1940px;

        grid-template-columns:
            1050px 550px;
    }

    .sn4-earth-zone {
        width: 1000px;
        height: 1000px;
    }

    .sn4-auth-zone {
        width: 550px;
    }

    .sn4-brand h1 {
        font-size: 74px;
    }

}


/* ----------------------------------------------------------
   MOBILE
   ---------------------------------------------------------- */

@media (max-width: 700px) {

    .sn5-security-badge {
        display: none;
    }

    .sn4-brand h1 {
        margin-left: auto;
        margin-right: auto;
    }

}


/* ----------------------------------------------------------
   ACCESSIBILITY
   ---------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

    .sn4-brand h1::after,
    .sn4-background::before,
    .sn4-background::after,
    .sn5-auth-ring,
    .sn5-auth-copy i {
        animation: none !important;
    }

}