@font-face{
    font-family:Vazirmatn;
    src:url('../../../../assets/fonts/Vazirmatn-Regular.woff2') format('woff2');
    font-style:normal;
    font-weight:400;
    font-display:swap;
}

@font-face{
    font-family:Vazirmatn;
    src:url('../../../../assets/fonts/Vazirmatn-Bold.woff2') format('woff2');
    font-style:normal;
    font-weight:700 900;
    font-display:swap;
}

:root{
    --blue:#0757b8;
    --blue-2:#2c78e7;
    --blue-deep:#073d82;
    --red:#d7262f;
    --gold:#f0b31a;
    --ink:#152238;
    --muted:#6c7b93;
    --line:#e0e8f5;
    --soft:#f5f8fd;
    --white:#fff;
    --focus:#ffbf30;
    --shadow:0 22px 55px rgba(6,38,91,.22);
}

*{
    box-sizing:border-box;
}

html{
    min-height:100%;
    background:#0a4598;
}

body{
    margin:0;
    min-height:100vh;
    color:var(--ink);
    font-family:Vazirmatn,Tahoma,Arial,sans-serif;
    background:
        radial-gradient(circle at 8% 8%,rgba(215,38,47,.28),transparent 23%),
        radial-gradient(circle at 95% 88%,rgba(240,179,26,.22),transparent 25%),
        linear-gradient(145deg,var(--blue-deep) 0%,var(--blue) 48%,#4b68de 100%);
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
}

button,
input{
    font:inherit;
}

button,
a{
    -webkit-tap-highlight-color:transparent;
}

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

button{
    cursor:pointer;
}

.svg-symbols{
    position:absolute;
    width:0;
    height:0;
    overflow:hidden;
}

.login-bg{
    position:fixed;
    inset:0;
    overflow:hidden;
    pointer-events:none;
}

.login-bg__shape{
    position:absolute;
    border-radius:50%;
    opacity:.18;
}

.login-bg__shape--one{
    width:210px;
    height:210px;
    top:-90px;
    right:-80px;
    background:#fff;
}

.login-bg__shape--two{
    width:180px;
    height:180px;
    bottom:-85px;
    left:-65px;
    background:var(--gold);
}

.login-bg__shape--three{
    width:90px;
    height:90px;
    top:42%;
    left:-40px;
    background:var(--red);
}

.login-shell{
    position:relative;
    z-index:1;
    width:min(100%,440px);
    min-height:100vh;
    margin:0 auto;
    padding:
        max(18px,env(safe-area-inset-top))
        16px
        max(22px,env(safe-area-inset-bottom));
}

.login-hero{
    padding:15px 15px 14px;
    color:#fff;
}

.login-hero__top{
    display:flex;
    align-items:center;
    gap:14px;
}

.login-logo{
    width:78px;
    height:78px;
    flex:0 0 78px;
    padding:6px;
    border:1px solid rgba(255,255,255,.22);
    border-radius:25px;
    background:rgba(255,255,255,.13);
    box-shadow:
        0 14px 30px rgba(3,24,63,.18),
        inset 0 1px rgba(255,255,255,.18);
}

.login-logo img{
    display:block;
    width:100%;
    height:100%;
    object-fit:contain;
}

.login-brand{
    min-width:0;
}

.login-brand__label{
    display:inline-flex;
    align-items:center;
    min-height:24px;
    padding:4px 9px;
    border-radius:999px;
    color:#fff4c7;
    background:rgba(240,179,26,.15);
    font-size:10px;
    font-weight:700;
}

.login-brand h1{
    margin:6px 0 2px;
    font-size:28px;
    font-weight:900;
    line-height:1.2;
}

.login-brand p{
    margin:0;
    color:rgba(255,255,255,.82);
    font-size:11px;
    line-height:1.8;
}

.login-features{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:7px;
    margin-top:14px;
}

.login-features span{
    min-width:0;
    min-height:39px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    padding:7px 5px;
    border:1px solid rgba(255,255,255,.16);
    border-radius:13px;
    background:rgba(255,255,255,.11);
    color:rgba(255,255,255,.94);
    font-size:9px;
    font-weight:700;
    white-space:nowrap;
}

.login-features svg{
    width:15px;
    height:15px;
    flex:0 0 15px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.login-main{
    display:grid;
    gap:12px;
}

.login-card{
    padding:20px;
    border:1px solid rgba(255,255,255,.72);
    border-radius:28px;
    background:rgba(255,255,255,.98);
    box-shadow:var(--shadow);
}

.login-head{
    display:flex;
    align-items:center;
    gap:12px;
    margin-bottom:18px;
}

.login-head__icon{
    width:54px;
    height:54px;
    flex:0 0 54px;
    display:grid;
    place-items:center;
    border-radius:18px;
    color:var(--blue);
    background:linear-gradient(145deg,#edf5ff,#f4f1ff);
}

.login-head__icon svg{
    width:28px;
    height:28px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.7;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.login-head__copy{
    min-width:0;
}

.login-kicker{
    color:var(--blue);
    font-size:10px;
    font-weight:800;
}

.login-head h2{
    margin:2px 0 3px;
    color:var(--ink);
    font-size:18px;
    font-weight:900;
    line-height:1.5;
}

.login-head p{
    margin:0;
    color:var(--muted);
    font-size:11px;
    line-height:1.7;
}

.login-error{
    display:flex;
    align-items:flex-start;
    gap:9px;
    margin-bottom:14px;
    padding:11px 12px;
    border:1px solid #ffd2d8;
    border-radius:15px;
    color:#ae2434;
    background:#fff2f4;
    font-size:11px;
    line-height:1.8;
}

.login-error svg{
    width:18px;
    height:18px;
    flex:0 0 18px;
    margin-top:2px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.9;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.login-form{
    display:grid;
}

.field-label{
    display:block;
    margin:0 2px 7px;
    color:#34435a;
    font-size:11px;
    font-weight:800;
}

.input-wrap{
    position:relative;
}

.input-wrap__icon{
    position:absolute;
    z-index:2;
    top:50%;
    right:16px;
    width:20px;
    height:20px;
    transform:translateY(-50%);
    color:#5577ad;
    fill:none;
    stroke:currentColor;
    stroke-width:1.7;
    stroke-linecap:round;
    stroke-linejoin:round;
    pointer-events:none;
}

.student-input{
    width:100%;
    height:58px;
    padding:9px 48px 9px 48px;
    border:1px solid #dbe5f3;
    border-radius:17px;
    outline:none;
    color:var(--ink);
    background:#f8fbff;
    font-size:17px;
    font-weight:800;
    text-align:center;
    transition:
        border-color .16s ease,
        box-shadow .16s ease,
        background .16s ease;
}

.student-input::placeholder{
    color:#9aa8bc;
    font-size:12px;
    font-weight:400;
}

.student-input:focus{
    border-color:var(--blue-2);
    background:#fff;
    box-shadow:0 0 0 4px rgba(44,120,231,.13);
}

.student-input[aria-invalid="true"]{
    border-color:#e45b68;
    box-shadow:0 0 0 4px rgba(215,38,47,.09);
}

.clear-input{
    position:absolute;
    z-index:3;
    top:50%;
    left:10px;
    width:37px;
    height:37px;
    padding:0;
    transform:translateY(-50%);
    display:grid;
    place-items:center;
    border:0;
    border-radius:12px;
    color:#7a899f;
    background:#eef3fa;
}

.clear-input[hidden]{
    display:none;
}

.clear-input svg{
    width:17px;
    height:17px;
    fill:none;
    stroke:currentColor;
    stroke-width:2;
    stroke-linecap:round;
}

.field-error{
    margin:7px 3px 0;
    color:#b42335;
    font-size:10px;
    font-weight:700;
}

.login-button{
    width:100%;
    min-height:54px;
    margin-top:14px;
    padding:0 16px;
    border:0;
    border-radius:17px;
    color:#fff;
    background:
        linear-gradient(135deg,var(--blue) 0%,var(--blue-2) 64%,#6b5de7 100%);
    box-shadow:0 13px 25px rgba(20,78,173,.24);
    font-size:13px;
    font-weight:900;
}

.login-button:hover{
    filter:brightness(1.03);
}

.login-button:disabled{
    cursor:wait;
    opacity:.75;
}

.login-button__normal,
.login-button__loading{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
}

.login-button__normal[hidden],
.login-button__loading[hidden]{
    display:none;
}

.login-button svg{
    width:19px;
    height:19px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.9;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.spinner{
    animation:spin .8s linear infinite;
}

.privacy-note{
    display:flex;
    align-items:flex-start;
    gap:9px;
    margin-top:15px;
    padding:11px 12px;
    border:1px solid #e1eaf7;
    border-radius:15px;
    color:#617089;
    background:#f4f8fd;
    font-size:10px;
    line-height:1.9;
}

.privacy-note svg{
    width:18px;
    height:18px;
    flex:0 0 18px;
    margin-top:2px;
    color:var(--blue);
    fill:none;
    stroke:currentColor;
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.login-assistance{
    display:flex;
    align-items:center;
    gap:11px;
    padding:13px 14px;
    border:1px solid rgba(255,255,255,.65);
    border-radius:20px;
    background:rgba(255,255,255,.94);
    box-shadow:0 12px 26px rgba(6,38,91,.13);
}

.login-assistance__icon{
    width:44px;
    height:44px;
    flex:0 0 44px;
    display:grid;
    place-items:center;
    border-radius:15px;
    color:#fff;
    background:linear-gradient(135deg,var(--red),#ef5d67);
}

.login-assistance__icon svg{
    width:21px;
    height:21px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.login-assistance strong{
    display:block;
    color:var(--ink);
    font-size:11px;
    font-weight:900;
}

.login-assistance p{
    margin:3px 0 0;
    color:var(--muted);
    font-size:9px;
    line-height:1.7;
}

.login-footer{
    margin-top:12px;
}

.credit-card{
    display:flex;
    align-items:center;
    gap:11px;
    padding:12px 13px;
    border:1px solid rgba(240,179,26,.58);
    border-radius:19px;
    color:#fff;
    background:rgba(7,30,73,.88);
    box-shadow:0 13px 28px rgba(3,24,63,.18);
}

.credit-mark{
    position:relative;
    width:43px;
    height:43px;
    flex:0 0 43px;
    display:grid;
    place-items:center;
    border-radius:14px;
    color:#fff2ba;
    background:rgba(255,255,255,.10);
}

.credit-mark__dot{
    position:absolute;
    top:6px;
    right:6px;
    width:7px;
    height:7px;
    border-radius:50%;
    background:var(--red);
}

.credit-mark svg{
    width:21px;
    height:21px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.credit-content{
    min-width:0;
    flex:1;
}

.credit-content>small{
    display:block;
    color:rgba(255,255,255,.70);
    font-size:8px;
}

.credit-content>strong{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:7px;
    margin-top:2px;
    font-size:12px;
    font-weight:900;
}

.credit-location{
    display:inline-flex;
    align-items:center;
    gap:4px;
    padding:3px 7px;
    border-radius:999px;
    color:#ffe8a3;
    background:rgba(240,179,26,.13);
    font-size:8px;
}

.credit-location svg{
    width:11px;
    height:11px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.8;
}

.credit-bottom{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    margin-top:5px;
}

.credit-link{
    display:inline-flex;
    align-items:center;
    gap:4px;
    color:#dbe8ff;
    font-size:8px;
    font-weight:700;
}

.credit-link svg{
    width:11px;
    height:11px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.credit-copyright{
    color:rgba(255,255,255,.55);
    font-size:8px;
}

:focus-visible{
    outline:3px solid var(--focus);
    outline-offset:3px;
}

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

@media(max-width:370px){
    .login-shell{
        padding-right:12px;
        padding-left:12px;
    }

    .login-logo{
        width:70px;
        height:70px;
        flex-basis:70px;
        border-radius:22px;
    }

    .login-brand h1{
        font-size:25px;
    }

    .login-card{
        padding:17px;
    }
}

@media(min-width:700px){
    .login-shell{
        display:grid;
        align-content:center;
        padding-top:30px;
        padding-bottom:30px;
    }
}

@media(prefers-reduced-motion:reduce){
    *,
    *::before,
    *::after{
        scroll-behavior:auto!important;
        animation-duration:.01ms!important;
        animation-iteration-count:1!important;
        transition-duration:.01ms!important;
    }
}