@font-face {
    font-family: "Yekan";
    src: url("../fonts/woff2/YekanBakhFaNum-Bold.woff2") format("woff2"),
         url("../fonts/woff/YekanBakhFaNum-Bold.woff") format("woff");
    font-display: swap;
}

:root{
    --bg:#05071d;
    --card:rgba(255,255,255,.075);
    --border:rgba(255,255,255,.14);
    --text:#fff;
    --muted:#b8c0d4;
    --cyan:#22d3ee;
    --pink:#ec4899;
    --blue:#3083dc;
    --danger:#ff5c5c;
}

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

body{
    min-height:100vh;
    font-family:"Yekan",system-ui,sans-serif;
    color:var(--text);
    background:
        radial-gradient(circle at 15% 5%, rgba(236,72,153,.24), transparent 28%),
        radial-gradient(circle at 85% 18%, rgba(34,211,238,.18), transparent 30%),
        linear-gradient(#05071d,#08051b);
}

.auth-wrapper{
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:22px;
}

.auth-card{
    position:relative;
    overflow:hidden;
    width:100%;
    max-width:440px;
    padding:38px 34px;
    border-radius:30px;
    background:linear-gradient(145deg, rgba(255,255,255,.10), rgba(255,255,255,.035));
    border:1px solid var(--border);
    backdrop-filter:blur(20px);
    box-shadow:
        0 0 45px rgba(34,211,238,.10),
        0 0 80px rgba(236,72,153,.07);
    animation:fadeIn .45s ease;
}

.auth-card::before{
    content:"";
    position:absolute;
    inset:-1px;
    background:linear-gradient(135deg, rgba(34,211,238,.20), transparent 45%, rgba(236,72,153,.22));
    pointer-events:none;
}

.auth-card > *{
    position:relative;
    z-index:1;
}

.auth-card h1{
    text-align:center;
    margin-bottom:28px;
    font-size:28px;
    font-weight:900;
    background:linear-gradient(90deg,#fff,var(--cyan),var(--pink));
    -webkit-background-clip:text;
    color:transparent;
}

label{
    display:block;
    margin-top:14px;
    margin-bottom:7px;
    font-size:13px;
    font-weight:800;
    color:var(--muted);
}

input{
    width:100%;
    height:50px;
    padding:0 15px;
    border-radius:16px;
    border:1px solid rgba(255,255,255,.12);
    background:linear-gradient(145deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
    color:var(--text);
    font-family:inherit;
    font-size:14px;
    outline:none;
    transition:.25s ease;
}

input::placeholder{
    color:rgba(255,255,255,.42);
}

input:focus{
    border-color:rgba(34,211,238,.65);
    box-shadow:
        0 0 18px rgba(34,211,238,.18),
        0 0 26px rgba(236,72,153,.08);
    transform:translateY(-1px);
}

button{
    width:100%;
    height:50px;
    margin-top:22px;
    border:none;
    border-radius:18px;
    cursor:pointer;
    font-family:inherit;
    font-size:15px;
    font-weight:900;
    color:#fff;
    transition:.28s ease;
}

.btn-blue,
.btn-red{
    background:linear-gradient(90deg,var(--cyan),var(--pink));
    box-shadow:0 0 24px rgba(236,72,153,.24);
}

.btn-blue:hover,
.btn-red:hover{
    transform:translateY(-4px);
    box-shadow:
        0 0 34px rgba(34,211,238,.22),
        0 0 34px rgba(236,72,153,.18);
}

.auth-footer{
    text-align:center;
    margin-top:22px;
    font-size:14px;
    color:var(--muted);
}

.auth-footer a{
    color:var(--cyan);
    text-decoration:none;
    font-weight:900;
    transition:.25s;
}

.auth-footer a:hover{
    color:var(--pink);
}

.back-link{
    display:block;
    text-align:center;
    margin-top:14px;
    font-size:13px;
    color:var(--muted);
    text-decoration:none;
    transition:.25s;
}

.back-link:hover{
    color:var(--cyan);
}

.messages{
    margin-bottom:18px;
}

.msg{
    padding:12px 14px;
    border-radius:16px;
    font-size:14px;
    color:#fff;
    background:rgba(255,92,92,.13);
    border:1px solid rgba(255,92,92,.35);
    box-shadow:0 0 18px rgba(255,92,92,.10);
}

.divider{
    position:relative;
    text-align:center;
    margin:24px 0;
    color:var(--muted);
    font-size:13px;
}

.divider::before,
.divider::after{
    content:"";
    position:absolute;
    top:50%;
    width:38%;
    height:1px;
    background:linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent);
}

.divider::before{
    right:0;
}

.divider::after{
    left:0;
}

.hidden{
    display:none;
}

/* OTP */
.otp-container{
    display:flex;
    gap:10px;
    justify-content:center;
    margin:22px 0 10px;
    direction:ltr;
}

.otp{
    width:48px;
    height:54px;
    text-align:center;
    font-size:20px;
    font-weight:900;
    border-radius:16px;
    border:1px solid rgba(255,255,255,.14);
    background:rgba(255,255,255,.075);
    color:#fff;
    box-shadow:inset 0 0 18px rgba(34,211,238,.08);
}

.otp:focus{
    border-color:var(--cyan);
    box-shadow:0 0 18px rgba(34,211,238,.22);
}

/* Animation */
@keyframes fadeIn{
    from{
        opacity:0;
        transform:translateY(18px) scale(.98);
    }
    to{
        opacity:1;
        transform:translateY(0) scale(1);
    }
}

/* Mobile */
@media(max-width:520px){
    .auth-card{
        padding:28px 22px;
        border-radius:24px;
    }

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

    .otp{
        width:42px;
        height:50px;
    }
}