*{
    box-sizing:border-box;
}

html{
    min-height:100%;
}

body{
    margin:0;
    min-height:100vh;
    overflow-x:hidden;

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

    background:#050811;
    color:#f5f7fb;
}


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

.background{
    position:fixed;
    inset:0;
    z-index:0;

    overflow:hidden;

    pointer-events:none;

    background:
        radial-gradient(
            circle at 15% 12%,
            rgba(68,91,255,.12),
            transparent 30%
        ),
        radial-gradient(
            circle at 85% 76%,
            rgba(26,207,196,.07),
            transparent 32%
        ),
        #050811;
}


.grid{
    position:absolute;
    inset:-45%;

    background-image:
        linear-gradient(
            rgba(105,125,180,.10) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(105,125,180,.10) 1px,
            transparent 1px
        );

    background-size:
        62px 62px;

    transform:
        perspective(700px)
        rotateX(62deg)
        translateY(-8%);

    animation:
        gridMove 24s linear infinite;
}


@keyframes gridMove{

    from{
        background-position:
            0 0,
            0 0;
    }

    to{
        background-position:
            0 62px,
            62px 0;
    }

}


.orb{
    position:absolute;

    border-radius:50%;

    filter:blur(110px);

    animation:
        orbMove 15s ease-in-out infinite alternate;
}


.orb-one{
    width:500px;
    height:500px;

    top:-200px;
    left:-160px;

    background:
        rgba(68,91,255,.33);
}


.orb-two{
    width:450px;
    height:450px;

    right:-160px;
    top:24%;

    background:
        rgba(116,76,255,.20);

    animation-delay:-4s;
}


.orb-three{
    width:420px;
    height:420px;

    left:42%;
    bottom:-280px;

    background:
        rgba(21,206,189,.14);

    animation-delay:-8s;
}


@keyframes orbMove{

    from{
        transform:
            translate3d(0,0,0)
            scale(1);
    }

    to{
        transform:
            translate3d(65px,40px,0)
            scale(1.15);
    }

}


.beam{
    position:absolute;

    height:1px;

    opacity:.35;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(93,120,255,.7),
            rgba(42,215,202,.4),
            transparent
        );

    filter:
        drop-shadow(
            0 0 8px
            rgba(79,107,255,.8)
        );
}


.beam-one{
    width:70%;
    left:-50%;
    top:30%;

    transform:
        rotate(-12deg);

    animation:
        beamOne 10s linear infinite;
}


.beam-two{
    width:65%;
    right:-45%;
    bottom:28%;

    transform:
        rotate(10deg);

    animation:
        beamTwo 12s linear infinite;
}


@keyframes beamOne{

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

        opacity:0;
    }

    20%{
        opacity:.4;
    }

    80%{
        opacity:.4;
    }

    100%{
        transform:
            translateX(180%)
            rotate(-12deg);

        opacity:0;
    }

}


@keyframes beamTwo{

    0%{
        transform:
            translateX(20%)
            rotate(10deg);

        opacity:0;
    }

    20%{
        opacity:.35;
    }

    80%{
        opacity:.35;
    }

    100%{
        transform:
            translateX(-180%)
            rotate(10deg);

        opacity:0;
    }

}


.particle{
    position:absolute;

    width:5px;
    height:5px;

    border-radius:50%;

    background:#718bff;

    box-shadow:
        0 0 10px #6d86ff,
        0 0 28px rgba(109,134,255,.8);

    animation:
        particleFloat 11s ease-in-out infinite;
}


.p1{
    left:8%;
    top:22%;
}


.p2{
    left:34%;
    top:71%;

    animation-delay:-2s;
}


.p3{
    right:13%;
    top:33%;

    animation-delay:-4s;
}


.p4{
    right:28%;
    bottom:16%;

    animation-delay:-7s;
}


.p5{
    left:53%;
    top:18%;

    animation-delay:-9s;
}


@keyframes particleFloat{

    0%,
    100%{
        transform:
            translate(0,0);

        opacity:.25;
    }

    50%{
        transform:
            translate(20px,-40px);

        opacity:1;
    }

}


/* =========================================================
   PAGE
   ========================================================= */

.page{
    position:relative;
    z-index:2;

    width:
        min(
            1580px,
            calc(100% - 70px)
        );

    min-height:100vh;

    margin:0 auto;
}


/* =========================================================
   HEADER
   ========================================================= */

.header{
    height:94px;

    display:flex;

    align-items:center;

    justify-content:
        space-between;
}


.brand{
    display:flex;

    align-items:center;

    gap:13px;

    text-decoration:none;

    color:#fff;
}


.brand-logo{
    width:45px;
    height:45px;

    display:grid;

    place-items:center;

    border-radius:13px;

    font-size:19px;

    font-weight:900;

    background:
        linear-gradient(
            140deg,
            #536fff,
            #8758ff
        );

    box-shadow:
        0 14px 40px
        rgba(78,98,255,.28),
        inset
        0 1px
        rgba(255,255,255,.22);
}


.brand-text strong,
.brand-text span{
    display:block;
}


.brand-text strong{
    font-size:14px;

    letter-spacing:.10em;
}


.brand-text span{
    margin-top:4px;

    font-size:8px;

    font-weight:800;

    letter-spacing:.22em;

    color:#627087;
}


.system-status{
    display:flex;

    align-items:center;

    gap:8px;

    padding:
        9px 12px;

    border:
        1px solid
        rgba(41,210,171,.15);

    border-radius:999px;

    background:
        rgba(38,190,157,.045);

    color:#9ed6c7;

    font-size:10px;

    font-weight:700;
}


.online-dot{
    width:7px;
    height:7px;

    border-radius:50%;

    background:#2bd5aa;

    box-shadow:
        0 0 13px
        rgba(43,213,170,.9);

    animation:
        onlinePulse 2s infinite;
}


@keyframes onlinePulse{

    0%,
    100%{
        opacity:1;
    }

    50%{
        opacity:.4;
    }

}


/* =========================================================
   LAYOUT
   ========================================================= */

.login-layout{
    min-height:
        calc(100vh - 130px);

    display:grid;

    grid-template-columns:
        minmax(0,1.23fr)
        minmax(390px,.77fr);

    align-items:center;

    gap:27px;

    padding-bottom:36px;
}


/* =========================================================
   STREAMING VISUAL
   ========================================================= */

.visual{
    height:
        min(
            720px,
            calc(100vh - 150px)
        );

    min-height:580px;
}


.visual-card{
    position:relative;

    width:100%;
    height:100%;

    overflow:hidden;

    border-radius:28px;

    border:
        1px solid
        rgba(145,162,200,.12);

    background:#080d16;

    box-shadow:
        0 40px 110px
        rgba(0,0,0,.4);
}


.visual-card::after{
    content:"";

    position:absolute;

    inset:0;

    z-index:10;

    pointer-events:none;

    border-radius:inherit;

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


.visual-card img{
    width:100%;
    height:100%;

    object-fit:cover;

    object-position:center;

    filter:
        saturate(.85)
        contrast(1.08)
        brightness(.67);

    animation:
        imageMove 22s ease-in-out infinite alternate;
}


@keyframes imageMove{

    from{
        transform:
            scale(1.03)
            translate3d(0,0,0);
    }

    to{
        transform:
            scale(1.09)
            translate3d(-1%,-1%,0);
    }

}


.visual-dark{
    position:absolute;

    inset:0;

    z-index:2;

    background:
        linear-gradient(
            90deg,
            rgba(4,7,13,.08),
            transparent
        ),
        linear-gradient(
            0deg,
            rgba(4,7,13,.98) 0%,
            rgba(4,7,13,.68) 25%,
            rgba(4,7,13,.15) 68%,
            rgba(4,7,13,.04) 100%
        );
}


.visual-grid{
    position:absolute;

    inset:0;

    z-index:3;

    opacity:.22;

    background-image:
        linear-gradient(
            rgba(99,120,170,.15) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(99,120,170,.15) 1px,
            transparent 1px
        );

    background-size:
        52px 52px;

    mask-image:
        linear-gradient(
            to top,
            #000,
            transparent 70%
        );
}


.visual-scan{
    position:absolute;

    z-index:4;

    width:100%;
    height:160px;

    left:0;
    top:-160px;

    opacity:.08;

    background:
        linear-gradient(
            transparent,
            #728cff,
            transparent
        );

    animation:
        scanMove 9s linear infinite;
}


@keyframes scanMove{

    from{
        transform:
            translateY(-160px);
    }

    to{
        transform:
            translateY(900px);
    }

}


/* =========================================================
   FLOATING LIVE CARDS
   ========================================================= */

.live-badge,
.network-badge{
    position:absolute;

    z-index:8;

    top:25px;

    display:flex;

    align-items:center;

    gap:11px;

    padding:
        12px 15px;

    border-radius:14px;

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

    background:
        rgba(6,11,20,.72);

    backdrop-filter:
        blur(16px);

    box-shadow:
        0 17px 50px
        rgba(0,0,0,.28);

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


.live-badge{
    left:25px;
}


.network-badge{
    right:25px;

    animation-delay:-2.5s;
}


@keyframes cardFloat{

    0%,
    100%{
        transform:
            translateY(0);
    }

    50%{
        transform:
            translateY(-6px);
    }

}


.live-dot{
    width:9px;
    height:9px;

    border-radius:50%;

    background:#ff5366;

    box-shadow:
        0 0 15px
        rgba(255,75,96,.9);

    animation:
        livePulse 1.5s infinite;
}


@keyframes livePulse{

    0%,
    100%{
        transform:scale(1);
        opacity:1;
    }

    50%{
        transform:scale(.65);
        opacity:.45;
    }

}


.live-badge span,
.live-badge strong,
.network-badge span,
.network-badge strong{
    display:block;
}


.live-badge span,
.network-badge span{
    margin-bottom:3px;

    color:#6c7a91;

    font-size:7px;

    font-weight:700;

    letter-spacing:.14em;
}


.live-badge strong,
.network-badge strong{
    font-size:9px;

    letter-spacing:.06em;

    color:#edf1f7;
}


.signal-bars{
    height:30px;

    display:flex;

    align-items:flex-end;

    gap:3px;
}


.signal-bars i{
    width:3px;

    border-radius:4px;

    background:
        linear-gradient(
            to top,
            #26d2aa,
            #7087ff
        );

    animation:
        signalMove 1.1s ease-in-out infinite;
}


.signal-bars i:nth-child(1){
    height:30%;
}


.signal-bars i:nth-child(2){
    height:55%;

    animation-delay:-.2s;
}


.signal-bars i:nth-child(3){
    height:100%;

    animation-delay:-.4s;
}


.signal-bars i:nth-child(4){
    height:65%;

    animation-delay:-.6s;
}


.signal-bars i:nth-child(5){
    height:40%;

    animation-delay:-.8s;
}


@keyframes signalMove{

    0%,
    100%{
        transform:scaleY(.5);
    }

    50%{
        transform:scaleY(1);
    }

}


/* =========================================================
   VISUAL CONTENT
   ========================================================= */

.visual-content{
    position:absolute;

    z-index:7;

    left:42px;
    right:42px;
    bottom:40px;
}


.visual-label{
    display:flex;

    align-items:center;

    gap:9px;

    color:#a0aabd;

    font-size:9px;

    font-weight:800;

    letter-spacing:.19em;
}


.visual-label span{
    width:27px;
    height:1px;

    background:
        linear-gradient(
            90deg,
            #5877ff,
            #28d5c4
        );
}


.visual-content h1{
    margin:
        17px 0
        15px;

    max-width:720px;

    font-size:
        clamp(
            42px,
            4.4vw,
            70px
        );

    line-height:.96;

    letter-spacing:-.05em;

    font-weight:760;
}


.visual-content h1 span{
    color:#a7b1c3;
}


.visual-content > p{
    margin:0;

    max-width:630px;

    color:#8e9aae;

    line-height:1.7;

    font-size:13px;
}


.visual-stats{
    display:flex;

    gap:11px;

    margin-top:25px;
}


.visual-stats div{
    min-width:118px;

    padding:
        12px 14px;

    border-radius:11px;

    border:
        1px solid
        rgba(255,255,255,.07);

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

    backdrop-filter:
        blur(8px);
}


.visual-stats strong,
.visual-stats span{
    display:block;
}


.visual-stats strong{
    font-size:10px;
}


.visual-stats span{
    margin-top:4px;

    color:#77859a;

    font-size:8px;
}


/* =========================================================
   LOGIN ZONE
   ========================================================= */

.login-zone{
    display:grid;

    place-items:center;
}


.login-card{
    width:
        min(
            440px,
            100%
        );

    padding:37px;

    border-radius:24px;

    border:
        1px solid
        rgba(145,162,200,.13);

    background:
        linear-gradient(
            145deg,
            rgba(14,21,35,.84),
            rgba(7,12,22,.92)
        );

    backdrop-filter:
        blur(22px);

    box-shadow:
        0 32px 100px
        rgba(0,0,0,.36),
        inset
        0 1px
        rgba(255,255,255,.025);
}


.login-brand{
    display:flex;

    align-items:center;

    gap:11px;

    padding-bottom:26px;

    border-bottom:
        1px solid
        rgba(255,255,255,.055);
}


.mini-logo{
    width:42px;
    height:42px;

    display:grid;

    place-items:center;

    border-radius:12px;

    background:
        linear-gradient(
            140deg,
            #5673ff,
            #8759ff
        );

    font-weight:900;

    box-shadow:
        0 13px 32px
        rgba(78,99,255,.23);
}


.login-brand span,
.login-brand strong{
    display:block;
}


.login-brand span{
    color:#6b7890;

    font-size:8px;

    letter-spacing:.16em;
}


.login-brand strong{
    margin-top:3px;

    font-size:12px;

    letter-spacing:.07em;
}


.login-intro{
    padding-top:29px;
}


.eyebrow{
    color:#6b7a92;

    font-size:8px;

    font-weight:800;

    letter-spacing:.2em;
}


.login-intro h2{
    margin:
        8px 0
        6px;

    font-size:34px;

    letter-spacing:-.04em;
}


.login-intro p{
    margin:0;

    color:#7e8ba0;

    font-size:12px;

    line-height:1.6;
}


/* =========================================================
   ALERT
   ========================================================= */

.alert{
    margin-top:20px;

    padding:12px;

    display:flex;

    align-items:center;

    gap:11px;

    border-radius:11px;

    border:
        1px solid
        rgba(255,79,103,.16);

    background:
        rgba(255,79,103,.06);
}


.alert-icon{
    width:31px;
    height:31px;

    display:grid;

    place-items:center;

    flex-shrink:0;

    border-radius:8px;

    background:
        rgba(255,79,103,.1);

    color:#ff9daa;

    font-size:11px;

    font-weight:900;
}


.alert strong,
.alert span{
    display:block;
}


.alert strong{
    color:#ffc2ca;

    font-size:10px;
}


.alert span{
    margin-top:3px;

    color:#a97b83;

    font-size:9px;
}


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

.login-form{
    margin-top:27px;
}


.field{
    margin-bottom:17px;
}


.field label{
    display:block;

    margin-bottom:8px;

    color:#afb9ca;

    font-size:10px;

    font-weight:700;
}


.field-heading{
    display:flex;

    align-items:center;

    justify-content:
        space-between;
}


.field-heading span{
    margin-bottom:8px;

    color:#546176;

    font-size:8px;
}


.input-wrap{
    position:relative;
}


.input-icon{
    position:absolute;

    z-index:2;

    left:13px;
    top:50%;

    transform:
        translateY(-50%);

    width:27px;
    height:27px;

    display:grid;

    place-items:center;

    border-radius:8px;

    border:
        1px solid
        #202d44;

    background:#111a29;

    color:#7988a3;

    font-size:9px;

    font-weight:900;
}


.password-icon{
    font-size:16px;
}


.input-wrap input{
    width:100%;
    height:52px;

    padding:
        0 14px
        0 51px;

    border-radius:11px;

    border:
        1px solid
        #202c40;

    outline:none;

    background:
        rgba(4,9,17,.75);

    color:#edf1f8;

    font-size:11px;

    transition:.2s ease;
}


.input-wrap input::placeholder{
    color:#445168;
}


.input-wrap input:focus{
    border-color:
        rgba(96,121,255,.7);

    box-shadow:
        0 0 0 4px
        rgba(88,111,255,.08);
}


/* =========================================================
   BUTTON
   ========================================================= */

.login-button{
    position:relative;

    width:100%;
    height:53px;

    margin-top:4px;

    padding:
        0 9px
        0 18px;

    overflow:hidden;

    display:flex;

    align-items:center;

    justify-content:
        space-between;

    border:none;

    border-radius:11px;

    cursor:pointer;

    color:white;

    background:
        linear-gradient(
            105deg,
            #526dff,
            #775dff
        );

    box-shadow:
        0 16px 38px
        rgba(76,95,255,.22);

    font-size:11px;

    font-weight:800;

    transition:.2s ease;
}


.login-button::before{
    content:"";

    position:absolute;

    top:0;
    left:-130%;

    width:80%;
    height:100%;

    transform:
        skewX(-25deg);

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.18),
            transparent
        );

    transition:.65s ease;
}


.login-button:hover::before{
    left:150%;
}


.login-button:hover{
    transform:
        translateY(-2px);

    box-shadow:
        0 21px 46px
        rgba(76,95,255,.3);
}


.login-button span,
.login-arrow{
    position:relative;

    z-index:2;
}


.login-arrow{
    width:33px;
    height:33px;

    display:grid;

    place-items:center;

    border-radius:8px;

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

    font-size:16px;
}


/* =========================================================
   SECURITY
   ========================================================= */

.security{
    margin-top:21px;

    padding:12px;

    display:flex;

    align-items:center;

    gap:10px;

    border-radius:11px;

    border:
        1px solid
        rgba(40,205,166,.095);

    background:
        rgba(38,195,158,.035);
}


.security-icon{
    width:29px;
    height:29px;

    flex-shrink:0;

    display:grid;

    place-items:center;

    border-radius:8px;

    background:
        rgba(42,209,169,.09);

    color:#8de1cb;

    font-size:10px;

    font-weight:900;
}


.security strong,
.security span{
    display:block;
}


.security strong{
    color:#9ebdb4;

    font-size:9px;
}


.security span{
    margin-top:3px;

    color:#587069;

    font-size:8px;
}


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

.login-footer{
    margin-top:25px;

    padding-top:18px;

    display:flex;

    justify-content:
        space-between;

    border-top:
        1px solid
        rgba(255,255,255,.045);

    color:#465267;

    font-size:7px;

    letter-spacing:.05em;
}


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

@media(max-width:1150px){

    .page{
        width:
            calc(100% - 40px);
    }


    .login-layout{
        grid-template-columns:
            minmax(0,1fr)
            minmax(370px,.8fr);
    }


    .visual-content{
        left:30px;
        right:30px;
        bottom:31px;
    }

}


@media(max-width:900px){

    .page{
        width:
            calc(100% - 28px);
    }


    .header{
        height:78px;
    }


    .system-status{
        display:none;
    }


    .login-layout{
        display:block;

        min-height:auto;
    }


    .visual{
        height:330px;
        min-height:0;

        margin-bottom:18px;
    }


    .visual-card{
        border-radius:20px;
    }


    .visual-content{
        left:23px;
        right:23px;
        bottom:23px;
    }


    .visual-content h1{
        margin-top:12px;

        font-size:36px;
    }


    .visual-content > p{
        display:none;
    }


    .visual-stats{
        display:none;
    }


    .network-badge{
        display:none;
    }


    .login-zone{
        padding-bottom:35px;
    }


    .login-card{
        width:100%;
    }

}


@media(max-width:520px){

    .page{
        width:
            calc(100% - 18px);
    }


    .brand-text span{
        display:none;
    }


    .visual{
        height:270px;
    }


    .live-badge{
        top:14px;
        left:14px;
    }


    .visual-content{
        left:19px;
        right:19px;
        bottom:20px;
    }


    .visual-label{
        font-size:7px;
    }


    .visual-content h1{
        margin-bottom:0;

        font-size:29px;
    }


    .login-card{
        padding:
            26px 19px;

        border-radius:18px;
    }


    .login-intro h2{
        font-size:29px;
    }

}


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

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

    .grid,
    .orb,
    .beam,
    .particle,
    .visual-card img,
    .visual-scan,
    .live-badge,
    .network-badge,
    .live-dot,
    .signal-bars i,
    .online-dot{
        animation:none !important;
    }

}