:root{
    --bg:#030307;
    --bg2:#07040d;
    --panel:#0b0714;
    --panel2:#10091b;

    --purple:#8f2cff;
    --purple2:#b847ff;
    --pink:#f127a7;
    --pink2:#ff42bd;

    --text:#f7f2fa;
    --muted:#8f8495;

    --danger:#ff3e55;
}

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

html,
body{
    width:100%;
    min-height:100%;
}

body{
    direction:rtl;
    min-height:100vh;
    overflow-x:hidden;

    color:var(--text);


    font-family:
        "Vazirmatn",
        Tahoma,
        Arial,
        sans-serif;



    background:
        radial-gradient(
            circle at 50% 20%,
            rgba(132,35,255,.13),
            transparent 32%
        ),
        radial-gradient(
            circle at 10% 70%,
            rgba(241,39,167,.06),
            transparent 27%
        ),
        linear-gradient(
            180deg,
            #030307 0%,
            #05030a 50%,
            #020205 100%
        );
}

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

body::before{
    content:"";
    position:fixed;
    inset:0;
    z-index:-3;
    pointer-events:none;

    background:
        radial-gradient(
            circle at 20% 30%,
            rgba(126,35,255,.12),
            transparent 25%
        ),
        radial-gradient(
            circle at 80% 65%,
            rgba(255,30,183,.07),
            transparent 28%
        );
}

body::after{
    content:"";
    position:fixed;
    inset:0;
    z-index:-2;
    pointer-events:none;

    opacity:.13;

    background-image:
        radial-gradient(
            rgba(197,88,255,.8) 1px,
            transparent 1px
        );

    background-size:70px 70px;

    mask-image:
        linear-gradient(
            to bottom,
            black,
            transparent 90%
        );
}

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

.auth-page{
    min-height:100vh;

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

    padding:35px 20px;

    position:relative;
}

/* neon floor glow */

.auth-page::before{
    content:"";

    position:fixed;

    left:50%;
    bottom:-220px;

    width:900px;
    height:400px;

    transform:translateX(-50%);

    border-radius:50%;

    background:
        radial-gradient(
            ellipse,
            rgba(151,35,255,.22),
            transparent 65%
        );

    filter:blur(35px);

    pointer-events:none;
}

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

.auth-card{
    width:min(470px,100%);

    position:relative;

    padding:42px 42px 35px;

    border-radius:24px;

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

    background:
        linear-gradient(
            145deg,
            rgba(15,9,25,.96),
            rgba(5,4,10,.98)
        );

    box-shadow:
        0 35px 100px rgba(0,0,0,.65),
        0 0 45px rgba(128,35,255,.09),
        inset 0 1px 0 rgba(255,255,255,.035);

    backdrop-filter:blur(22px);

    overflow:hidden;
}

/* top neon line */

.auth-card::before{
    content:"";

    position:absolute;

    top:0;
    left:15%;
    right:15%;

    height:2px;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--purple),
            var(--pink),
            var(--purple),
            transparent
        );

    box-shadow:
        0 0 18px var(--purple),
        0 0 35px rgba(226,44,190,.55);
}

/* card glow */

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

    position:absolute;

    width:280px;
    height:280px;

    top:-180px;
    left:50%;

    transform:translateX(-50%);

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(145,35,255,.18),
            transparent 68%
        );

    pointer-events:none;
}

/* =========================================================
   LOGO
========================================================= */

.auth-logo{
    position:relative;
    z-index:2;

    text-align:center;

    margin-bottom:25px;
}

.auth-logo a{
    display:inline-flex;
    align-items:center;
    justify-content:center;
}

.auth-logo img{
    display:block;

    width:auto;
    height:85px;
    max-width:230px;

    object-fit:contain;

    filter:
        drop-shadow(
            0 0 12px rgba(145,40,255,.42)
        )
        drop-shadow(
            0 0 30px rgba(186,44,255,.18)
        );
}

.auth-fallback{
    text-align:center;
}

.auth-fallback strong{
    display:block;

    color:#fff;

    font-size:28px;
    font-weight:1000;

    text-shadow:
        0 0 20px rgba(170,50,255,.4);
}

.auth-fallback span{
    display:block;

    margin-top:4px;

    color:#b43fff;

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

    letter-spacing:2px;
}

/* =========================================================
   TITLE
========================================================= */

.auth-card h1{
    position:relative;
    z-index:2;

    margin:0 0 8px;

    text-align:center;

    color:#fff;

    font-size:29px;
    line-height:1.4;

    font-weight:1000;

    text-shadow:
        0 0 25px rgba(163,51,255,.12);
}

.auth-sub{
    position:relative;
    z-index:2;

    margin:0 0 25px;

    text-align:center;

    color:#817687;

    font-size:11px;
    line-height:2;
}

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

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

    display:flex;
    align-items:center;

    min-height:52px;

    margin-bottom:20px;
    padding:0 15px;

    border-radius:11px;

    font-size:10px;
    line-height:1.8;
}

.alert-error{
    color:#ffb6bd;

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

    background:
        linear-gradient(
            90deg,
            rgba(255,39,64,.10),
            rgba(120,15,35,.13)
        );

    box-shadow:
        inset 0 0 20px rgba(255,35,60,.035),
        0 0 18px rgba(255,35,60,.04);
}

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

form{
    position:relative;
    z-index:2;
}

.field{
    margin-bottom:18px;
}

.field label{
    display:block;

    margin-bottom:8px;

    color:#d7cddd;

    font-size:10px;
    font-weight:800;
}

.field input{
    width:100%;
    height:53px;

    display:block;

    padding:0 16px;

    outline:none;

    border-radius:11px;

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

    background:
        linear-gradient(
            145deg,
            rgba(20,10,30,.82),
            rgba(7,5,12,.92)
        );

    color:#f7f1fa;

    font-family:inherit;
    font-size:12px;

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

.field input::placeholder{
    color:#5f5665;
}

.field input:hover{
    border-color:rgba(184,68,255,.52);
}

.field input:focus{
    border-color:var(--purple2);

    background:
        linear-gradient(
            145deg,
            rgba(25,11,39,.95),
            rgba(8,5,14,.98)
        );

    box-shadow:
        0 0 0 3px rgba(146,38,255,.08),
        0 0 25px rgba(143,37,255,.10);
}

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

.auth-btn{
    width:100%;
    height:55px;

    margin-top:7px;

    border:0;
    border-radius:12px;

    cursor:pointer;

    color:#fff;

    font-family:inherit;

    font-size:13px;
    font-weight:1000;

    background:
        linear-gradient(
            105deg,
            #7928ff 0%,
            #a82cff 45%,
            #ef29aa 100%
        );

    box-shadow:
        0 12px 35px rgba(145,39,255,.27),
        0 0 30px rgba(225,40,181,.10),
        inset 0 1px 0 rgba(255,255,255,.20);

    transition:
        transform .25s,
        box-shadow .25s,
        filter .25s;
}

.auth-btn:hover{
    transform:translateY(-3px);

    filter:brightness(1.08);

    box-shadow:
        0 17px 45px rgba(145,39,255,.38),
        0 0 35px rgba(225,40,181,.17);
}

.auth-btn:active{
    transform:translateY(-1px);
}

/* =========================================================
   LINKS
========================================================= */

.auth-link{
    position:relative;
    z-index:2;

    text-align:center;

    margin-top:18px;

    color:#756b7c;

    font-size:10px;
}

.auth-link a{
    color:#c85aff;

    font-weight:900;

    transition:.25s;

    text-shadow:
        0 0 12px rgba(188,69,255,.15);
}

.auth-link a:hover{
    color:#ff4cbd;

    text-shadow:
        0 0 15px rgba(255,55,188,.4);
}

.auth-link:last-child{
    position:relative;

    margin-top:28px;
    padding-top:22px;

    border-top:1px solid rgba(166,58,255,.13);
}

.auth-link:last-child::before{
    content:"✦";

    position:absolute;

    top:-8px;
    left:50%;

    transform:translateX(-50%);

    padding:0 12px;

    color:#c84fff;

    background:#09060e;

    font-size:13px;

    text-shadow:
        0 0 12px rgba(198,64,255,.7);
}

/* =========================================================
   SELECTION
========================================================= */

::selection{
    color:#fff;
    background:rgba(157,45,255,.45);
}

/* =========================================================
   MOBILE
========================================================= */

@media(max-width:600px){

    .auth-page{
        padding:20px 12px;
    }

    .auth-card{
        padding:35px 23px 28px;

        border-radius:20px;
    }

    .auth-logo{
        margin-bottom:20px;
    }

    .auth-logo img{
        height:72px;
        max-width:190px;
    }

    .auth-card h1{
        font-size:25px;
    }

    .auth-sub{
        font-size:10px;
        margin-bottom:22px;
    }

    .field input{
        height:51px;
    }

    .auth-btn{
        height:53px;
    }
}

@media(max-width:380px){

    .auth-card{
        padding:30px 18px 25px;
    }

    .auth-card h1{
        font-size:23px;
    }

    .auth-logo img{
        height:65px;
    }
}

.auth-link{
    color:#fff !important;
}

.auth-link a{
    color:#fff !important;
    font-weight:700;
}

.auth-link a:hover{
    color:#dcdcdc !important;
    text-shadow:0 0 12px rgba(255,255,255,.3);
}