/*==================================================
                TOKENS
==================================================*/

:root{
    --bg-0:#05070f;
    --bg-1:#0a1226;
    --bg-2:#0f1d3d;

    --accent:#3b82f6;
    --accent-2:#22d3ee;
    --accent-soft:rgba(59,130,246,.35);

    --glass:rgba(255,255,255,.07);
    --glass-strong:rgba(255,255,255,.12);
    --glass-border:rgba(255,255,255,.16);

    --text:#eef3ff;
    --text-dim:rgba(226,235,255,.62);
    --danger:#ef4444;

    --font-display:"Sora",-apple-system,BlinkMacSystemFont,sans-serif;
    --font-body:"Inter","Segoe UI",Tahoma,Geneva,Verdana,sans-serif;
}

/*==================================================
                RESET
==================================================*/

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html,
body{
    width:100%;
    height:100%;
    overflow:hidden;
    font-family:var(--font-body);
}

/*==================================================
                BODY
==================================================*/

body{
    display:flex;
    justify-content:center;
    align-items:center;
    background:
        radial-gradient(circle at 20% 20%,var(--bg-2),transparent 55%),
        radial-gradient(circle at 80% 80%,var(--bg-2),transparent 55%),
        linear-gradient(135deg,var(--bg-0) 0%,var(--bg-1) 55%,var(--bg-0) 100%);
    position:relative;
}

/*==================================================
            AMBIENT MOUSE SPOTLIGHT
==================================================*/

.mouse-light{
    position:fixed;
    top:0;
    left:0;
    width:600px;
    height:600px;
    border-radius:50%;
    pointer-events:none;
    background:radial-gradient(circle,rgba(96,165,250,.16),transparent 70%);
    filter:blur(10px);
    transform:translate(-50%,-50%);
    z-index:1;
    transition:opacity .4s;
    opacity:0;
}

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

.background{
    position:absolute;
    inset:0;
    overflow:hidden;
    z-index:0;
}

/*==================================================
                AURORA MESH
==================================================*/

.aurora{
    position:absolute;
    border-radius:50%;
    filter:blur(90px);
    opacity:.4;
    mix-blend-mode:screen;
    animation:auroraDrift 22s ease-in-out infinite;
}

.aurora1{
    width:480px;
    height:480px;
    background:radial-gradient(circle,var(--accent),transparent 70%);
    left:-140px;
    top:-120px;
}

.aurora2{
    width:420px;
    height:420px;
    background:radial-gradient(circle,var(--accent-2),transparent 70%);
    right:-120px;
    top:20%;
    animation-delay:6s;
    animation-duration:26s;
}

.aurora3{
    width:380px;
    height:380px;
    background:radial-gradient(circle,#60a5fa,transparent 70%);
    bottom:-120px;
    left:32%;
    animation-delay:11s;
    animation-duration:20s;
}

@keyframes auroraDrift{
    0%{transform:translate(0,0) scale(1);}
    25%{transform:translate(50px,-30px) scale(1.1);}
    50%{transform:translate(-40px,45px) scale(.92);}
    75%{transform:translate(25px,-35px) scale(1.05);}
    100%{transform:translate(0,0) scale(1);}
}

/*==================================================
                GRAIN TEXTURE
==================================================*/

.grain{
    position:absolute;
    inset:-10%;
    opacity:.05;
    pointer-events:none;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/*==================================================
                LOGIN WRAPPER
==================================================*/

.login-wrapper{
    position:relative;
    z-index:5;
    width:100%;
    display:flex;
    justify-content:center;
    align-items:center;
    padding:40px;
}

/*==================================================
                LOGIN CARD
==================================================*/

.login-card{
    position:relative;
    isolation:isolate;
    width:460px;
    max-width:100%;
    padding:48px 44px 40px;
    border-radius:28px;
    background:var(--glass);
    backdrop-filter:blur(24px);
    -webkit-backdrop-filter:blur(24px);
    border:1px solid var(--glass-border);
    box-shadow:0 25px 70px rgba(0,0,0,.45);
    transition:transform .1s ease-out,box-shadow .35s;
    animation:cardAppear .9s cubic-bezier(.2,.9,.2,1);
    will-change:transform;
}

.login-card:hover{
    box-shadow:0 35px 80px rgba(37,99,235,.2);
}

@keyframes cardAppear{
    from{
        opacity:0;
        transform:translateY(50px) scale(.94);
    }
    to{
        opacity:1;
        transform:none;
    }
}

/*==========================================
        Rotating conic border
==========================================*/

.login-card::before{
    content:"";
    position:absolute;
    inset:-1px;
    border-radius:29px;
    padding:1px;
    background:conic-gradient(
        from var(--angle,0deg),
        var(--accent),
        var(--accent-2),
        transparent 35%,
        transparent 65%,
        var(--accent)
    );
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite:xor;
    mask-composite:exclude;
    z-index:-1;
    animation:rotateBorder 5s linear infinite;
    opacity:.55;
}

@property --angle{
    syntax:"<angle>";
    inherits:false;
    initial-value:0deg;
}

@keyframes rotateBorder{
    to{ --angle:360deg; }
}

/*==========================================
        Glass reflection sweep
==========================================*/

.login-card::after{
    content:"";
    position:absolute;
    width:180px;
    height:800px;
    top:-200px;
    left:-260px;
    background:linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.12),
        transparent
    );
    transform:rotate(20deg);
    animation:glassShine 8s infinite;
    pointer-events:none;
}

@keyframes glassShine{
    0%{ left:-260px; }
    45%{ left:640px; }
    100%{ left:640px; }
}

/*==================================================
            SECURITY SEAL (logo)
==================================================*/

.seal{
    position:relative;
    width:170px;
    height:170px;
    margin:0 auto 35px;
    display:flex;
    align-items:center;
    justify-content:center;
}

.seal-ring{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    animation:spinSeal 12s linear infinite;
    z-index:2;
}

.seal-ring circle{
    fill:none;
    stroke:url(#ringGradient);
    stroke-width:3;
    stroke-dasharray:14 10;
    stroke-linecap:round;
    opacity:.95;
    filter:drop-shadow(0 0 8px rgba(34,211,238,.9));
}

@keyframes spinSeal{
    to{ transform:rotate(360deg); }
}

.logo::before{
    content:"";
    position:absolute;
    inset:-14px;
    border-radius:50%;
    border:2px solid rgba(96,165,250,.5);
    box-shadow:
        0 0 18px rgba(59,130,246,.45),
        inset 0 0 18px rgba(34,211,238,.25);
    animation:ringPulse 2.5s ease-in-out infinite;
}

@keyframes ringPulse{

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

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

}

.seal::before{
    content:"";
    position:absolute;
    inset:-10px;
    border-radius:50%;
    border:2px dashed rgba(59,130,246,.45);
    animation:spinOuter 18s linear infinite;
}

.seal::after{
    content:"";
    position:absolute;
    inset:-22px;
    border-radius:50%;
    border:1px solid rgba(34,211,238,.18);
    box-shadow:
        0 0 18px rgba(34,211,238,.25);
}

@keyframes spinOuter{
    from{
        transform:rotate(0deg);
    }
    to{
        transform:rotate(-360deg);
    }
}

.logo{
    position:relative;
    width:120px;
    height:120px;
    object-fit:contain;
    border-radius:50%;
    background:white;
    padding:12px;

    filter:
        drop-shadow(0 0 20px rgba(59,130,246,.45))
        drop-shadow(0 0 45px rgba(34,211,238,.30));

    animation:logoFade 1.1s ease;
    z-index:5;
}

@keyframes logoFade{
    from{
        opacity:0;
        transform:translateY(-16px) scale(.9);
    }
    to{
        opacity:1;
        transform:none;
    }
}

/*==================================================
                TITLES
==================================================*/

.login-card h1{
    text-align:center;
    color:var(--text);
    font-family:var(--font-display);
    font-size:32px;
    font-weight:700;
    letter-spacing:-.01em;
    margin-bottom:10px;
}

.subtitle{
    text-align:center;
    color:var(--text-dim);
    line-height:1.6;
    font-size:14px;
    letter-spacing:.02em;
}

/*==================================================
        SIGNATURE ELEMENT: PULSE DIVIDER
==================================================*/

.pulse-divider{
    width:100%;
    height:34px;
    margin:22px 0 28px;
    opacity:.9;
}

.pulse-divider svg{
    width:100%;
    height:100%;
    overflow:visible;
}

.pulse-track{
    stroke:rgba(255,255,255,.12);
    stroke-width:1.5;
}

.pulse-line{
    fill:none;
    stroke:var(--accent-2);
    stroke-width:2;
    stroke-linecap:round;
    stroke-linejoin:round;
    filter:drop-shadow(0 0 6px rgba(34,211,238,.65));
    stroke-dasharray:420;
    stroke-dashoffset:420;
    animation:
        drawPulse 1.6s cubic-bezier(.4,0,.2,1) .6s forwards,
        pulseGlow 2.6s ease-in-out 2.4s infinite;
}

@keyframes drawPulse{
    to{ stroke-dashoffset:0; }
}

@keyframes pulseGlow{
    0%,100%{ opacity:.75; }
    50%{ opacity:1; }
}

/*==================================================
                ERROR BOX
==================================================*/

.error-box{
    display:flex;
    align-items:center;
    gap:12px;
    background:rgba(239,68,68,.12);
    color:#fca5a5;
    border-left:3px solid var(--danger);
    padding:13px 16px;
    border-radius:12px;
    margin-bottom:22px;
    font-size:14px;
    animation:shake .4s;
}

.error-box i{
    font-size:17px;
    color:var(--danger);
}

@keyframes shake{
    0%,100%{ transform:translateX(0); }
    25%{ transform:translateX(-6px); }
    50%{ transform:translateX(6px); }
    75%{ transform:translateX(-4px); }
}

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

.input-group{
    margin-bottom:20px;
}

.input-group label{
    display:block;
    color:var(--text-dim);
    font-size:12.5px;
    font-weight:600;
    letter-spacing:.04em;
    text-transform:uppercase;
    margin-bottom:8px;
}

.input-box{
    position:relative;
    display:flex;
    align-items:center;
    gap:12px;
    padding:0 16px;
    height:52px;
    border-radius:14px;
    background:#000;

    border:1px solid rgba(255,255,255,.18);
    transition:border-color .25s,background .25s,box-shadow .25s;
}

.input-box i{
    color:#bfbfbf;
    font-size:15px;
    transition:color .25s;
    width:16px;
    text-align:center;
}

.input-box input{
    flex:1;
    height:100%;
    background:transparent;
    border:none;
    outline:none;
    color:#fff;

    font-size:15px;
    font-family:var(--font-body);
}

.input-box input::placeholder{
    color:rgba(255,255,255,.45);
}

.input-box:focus-within{
    background:#000;
    border-color:var(--accent);
    box-shadow:0 0 0 4px rgba(59,130,246,.18);
}

.input-box:focus-within i:first-child{
    color:var(--accent-2);
}

.toggle-password{
    cursor:pointer;
    color:rgba(226,235,255,.45) !important;
}

.toggle-password:hover{
    color:var(--text-dim) !important;
}

/*==================================================
                OPTIONS ROW
==================================================*/

.options{
    display:flex;
    justify-content:flex-start;
    margin:4px 0 26px;
}

.remember{
    display:flex;
    align-items:center;
    gap:9px;
    color:var(--text-dim);
    font-size:13.5px;
    cursor:pointer;
    user-select:none;
}

.remember input{
    width:16px;
    height:16px;
    accent-color:var(--accent);
    cursor:pointer;
}

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

.login-btn{
    position:relative;
    width:100%;
    height:52px;
    border:none;
    border-radius:14px;
    background:linear-gradient(135deg,var(--accent),var(--accent-2));
    color:white;
    font-family:var(--font-display);
    font-weight:600;
    font-size:15.5px;
    letter-spacing:.02em;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    cursor:pointer;
    overflow:hidden;
    box-shadow:0 14px 34px rgba(37,99,235,.35);
    transition:transform .25s,box-shadow .25s;
}

.login-btn:hover{
    transform:translateY(-2px);
    box-shadow:0 20px 44px rgba(37,99,235,.45);
}

.login-btn:active{
    transform:translateY(0);
}

.login-btn::before{
    content:"";
    position:absolute;
    top:0;
    left:-60%;
    width:40%;
    height:100%;
    background:linear-gradient(
        120deg,
        transparent,
        rgba(255,255,255,.35),
        transparent
    );
    transform:skewX(-20deg);
    transition:left .6s ease;
}

.login-btn:hover::before{
    left:130%;
}

.btn-arrow{
    font-size:13px;
    transition:transform .25s;
}

.login-btn:hover .btn-arrow{
    transform:translateX(4px);
}

/*==========================================
        Loading state (JS-toggled)
==========================================*/

.loader{
    display:none;
    width:18px;
    height:18px;
    border-radius:50%;
    border:2.5px solid rgba(255,255,255,.4);
    border-top:2.5px solid white;
    animation:spin .7s linear infinite;
    flex-shrink:0;
}

.login-btn.is-loading .loader{
    display:inline-block;
}

.login-btn.is-loading .btn-arrow{
    display:none;
}

.login-btn.is-loading{
    cursor:default;
    opacity:.9;
}

@keyframes spin{
    to{ transform:rotate(360deg); }
}

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

.security{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:9px;
    margin-top:28px;
    color:var(--text-dim);
    font-size:12.5px;
    letter-spacing:.02em;
}

.security i{
    color:var(--accent-2);
    font-size:14px;
}

.status-dot{
    width:7px;
    height:7px;
    border-radius:50%;
    background:#4ade80;
    box-shadow:0 0 0 0 rgba(74,222,128,.6);
    animation:statusPulse 2.2s ease-out infinite;
}

@keyframes statusPulse{
    0%{ box-shadow:0 0 0 0 rgba(74,222,128,.55); }
    70%{ box-shadow:0 0 0 8px rgba(74,222,128,0); }
    100%{ box-shadow:0 0 0 0 rgba(74,222,128,0); }
}

.footer{
    text-align:center;
    margin-top:18px;
    color:rgba(226,235,255,.35);
    font-size:12px;
}

/*==================================================
                FLOATING PARTICLES
==================================================*/

.particles{
    position:absolute;
    inset:0;
    overflow:hidden;
    pointer-events:none;
}

.particle{
    position:absolute;
    width:3px;
    height:3px;
    border-radius:50%;
    background:rgba(255,255,255,.35);
    box-shadow:0 0 6px rgba(96,165,250,.6);
    animation:particleMove linear infinite;
}

.particle:nth-child(1){left:8%;animation-duration:18s;animation-delay:1s;}
.particle:nth-child(2){left:18%;animation-duration:22s;}
.particle:nth-child(3){left:27%;animation-duration:20s;}
.particle:nth-child(4){left:36%;animation-duration:17s;}
.particle:nth-child(5){left:44%;animation-duration:24s;}
.particle:nth-child(6){left:52%;animation-duration:16s;}
.particle:nth-child(7){left:60%;animation-duration:19s;}
.particle:nth-child(8){left:68%;animation-duration:23s;}
.particle:nth-child(9){left:76%;animation-duration:15s;}
.particle:nth-child(10){left:84%;animation-duration:21s;}
.particle:nth-child(11){left:92%;animation-duration:18s;}
.particle:nth-child(12){left:13%;animation-duration:25s;}
.particle:nth-child(13){left:23%;animation-duration:17s;}
.particle:nth-child(14){left:33%;animation-duration:22s;}
.particle:nth-child(15){left:43%;animation-duration:19s;}
.particle:nth-child(16){left:53%;animation-duration:24s;}
.particle:nth-child(17){left:63%;animation-duration:18s;}
.particle:nth-child(18){left:73%;animation-duration:20s;}
.particle:nth-child(19){left:83%;animation-duration:16s;}
.particle:nth-child(20){left:93%;animation-duration:23s;}

@keyframes particleMove{
    from{
        transform:translateY(110vh) scale(.3);
        opacity:0;
    }
    20%{ opacity:.7; }
    80%{ opacity:.3; }
    to{
        transform:translateY(-20vh) scale(1.2);
        opacity:0;
    }
}

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

@media(max-width:540px){
    html,body{ overflow-y:auto; }
    .login-wrapper{ padding:24px; }
    .login-card{
        padding:38px 26px 32px;
        border-radius:22px;
    }
    .login-card h1{ font-size:26px; }
}

/*==================================================
        ACCESSIBILITY: FOCUS + REDUCED MOTION
==================================================*/

.login-btn:focus-visible,
.toggle-password:focus-visible,
.input-box:has(input:focus-visible){
    outline:2px solid var(--accent-2);
    outline-offset:2px;
}

@media(prefers-reduced-motion:reduce){
    *{
        animation-duration:.001ms !important;
        animation-iteration-count:1 !important;
        transition-duration:.001ms !important;
    }
}