:root{
    --purple:#8f2cff;
    --purple2:#b847ff;
    --pink:#f127a7;
    --text:#f7f2fa;
    --muted:#8f8495;
}

*{
    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%);
}

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%);
}

a{
    color:inherit;
    text-decoration:none;
}

button,
input,
textarea,
select{
    font-family:inherit;
}

/* صفحه */

.auth-page{
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:35px 20px;
    position:relative;
}

.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;
}

/* کارت ورود */

.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;
}

.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);
}

.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;
}

/* لوگو */

.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:900;
}

.auth-fallback span{
    display:block;
    margin-top:4px;
    color:#b43fff;
    font-size:8px;
    font-weight:900;
    letter-spacing:2px;
}

/* عنوان */

.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:900;
}

.auth-sub{
    position:relative;
    z-index:2;
    margin:0 0 25px;
    text-align:center;
    color:#817687;
    font-size:11px;
    line-height:2;
}

/* خطا */

.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)
    );
}

/* فرم */

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-size:12px;
    transition:.25s;
}

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

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

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

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

/* دکمه ورود */

.auth-btn{
    width:100%;
    height:55px;
    margin-top:7px;
    border:0;
    border-radius:12px;
    cursor:pointer;

    color:#fff;
    font-size:13px;
    font-weight:900;

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

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

    transition:.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);
}

/* لینک‌ها */

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

    margin-top:18px;
    text-align:center;

    color:#fff;
    font-size:10px;
}

.auth-link a{
    color:#fff;
    font-weight:900;
    transition:.25s;
}

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

.auth-link:last-child{
    margin-top:28px;
    padding-top:22px;
    border-top:1px solid rgba(166,58,255,.13);
}

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

    position:absolute;
    top:-9px;
    left:50%;
    transform:translateX(-50%);

    padding:0 12px;
    color:#fff;
    background:#09060e;
    font-size:11px;
}

/* انتخاب متن */

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

/* موبایل */

@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;
    }
}