.avatar-upload{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:10px;
    margin-bottom:26px;
}

.avatar-upload-frame{
    position:relative;
    width:96px;
    height:96px;
    border-radius:50%;
    background:#f1f5f9;
    border:2px dashed var(--border);
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    cursor:pointer;
    transition:var(--transition);
}

.avatar-upload-frame:hover{
    border-color:var(--primary);
}

.avatar-upload-frame.is-invalid{
    border-color:var(--danger);
}

.avatar-upload-frame img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.avatar-upload-placeholder{
    width:28px;
    height:28px;
    color:var(--text-light);
}

.avatar-upload-label{
    font-size:13px;
    font-weight:600;
    color:var(--primary);
    cursor:pointer;
}

.avatar-upload-label:hover{
    opacity:.8;
}

.avatar-upload-input{
    display:none;
}

.btn:hover{
    transform:translateY(-2px);
}

.auth{
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:20px;
    border:1px solid rgba(255,255,255,.7);
}

.auth-card-login{
    width:100%;
    max-width:430px;
    /* backdrop-filter:blur(10px); */
}

.auth-card-register {
    width:100%;
    max-width:650px;
    /* backdrop-filter:blur(10px); */
}

.auth-header{
    text-align:center;
    margin-bottom:30px;
}

.auth-header h1{
    font-weight: 900;
    margin-bottom:10px;
}

.auth-header p {
    font-size: 14px;
}

.auth-options{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:26px;
}

.auth-footer{
    margin-top:28px;
    text-align:center;
    font-size: 14px;
}

.auth-link{
    color:var(--primary);
    font-weight:600;
    transition: var(--transition);
    font-size: 14px;
}

.auth-link:hover {
    opacity: 0.8;
}

.back-btn{
    position:absolute;
    top:25px;
    left:25px;
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:12px 16px;
    background:white;
    border:1px solid var(--border);
    border-radius:999px;
    color:var(--text-light);
    box-shadow:var(--shadow-sm);
    font-weight:600;
    transition:var(--transition);
}

.back-btn:hover{
    color:var(--primary);
    border-color:#bfdbfe;
}

.auth-divider{
    position:relative;
    text-align:center;
    margin:28px 0;
}

.auth-divider::before{
    content:'';
    position:absolute;
    top:50%;
    left:0;
    width:100%;
    height:1px;
    background:var(--border);
}

.auth-divider span{
    position:relative;
    padding:0 14px;
    background:var(--surface);
    color:var(--text-light);
    font-size:13px;
}

.teacher-box{
    border:1px solid var(--border);
    border-radius:var(--radius-md);
    padding:20px;
    background:#f8fafc;
    text-align:left;
}

.teacher-content{
    margin-bottom:16px;
}

.teacher-content h3{
    font-size:18px;
    margin-bottom:6px;
}

.teacher-content p{
    font-size:14px;
}

.banner-upload{
    display:flex;
    flex-direction:column;
    gap:10px;
    margin-bottom:26px;
}

.banner-upload-frame{
    position:relative;
    width:100%;
    aspect-ratio:3/1;
    border-radius:var(--radius-md);
    background:#f1f5f9;
    border:2px dashed var(--border);
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    cursor:pointer;
    transition:var(--transition);
}

.banner-upload-frame:hover{
    border-color:var(--primary);
}

.banner-upload-frame.is-invalid{
    border-color:var(--danger);
}

.banner-upload-frame img{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
}

.banner-upload-placeholder{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:8px;
    color:var(--text-light);
}

.banner-upload-placeholder .icon{
    width:28px;
    height:28px;
}

.banner-upload-placeholder span{
    font-size:13px;
    font-weight:600;
}

.banner-upload-label{
    font-size:13px;
    font-weight:600;
    color:var(--primary);
    cursor:pointer;
    align-self:flex-start;
}

.banner-upload-label:hover{
    opacity:.8;
}

.banner-upload-input{
    display:none;
}

.document-upload{
    display:flex;
    flex-direction:column;
    gap:10px;
    margin-bottom:26px;
}

.document-upload-frame{
    position:relative;
    width:100%;
    min-height:90px;
    border-radius:var(--radius-md);
    background:#f1f5f9;
    border:2px dashed var(--border);
    display:flex;
    align-items:center;
    justify-content:center;
    padding:20px;
    cursor:pointer;
    transition:var(--transition);
}

.document-upload-frame:hover{
    border-color:var(--primary);
}

.document-upload-frame.is-invalid{
    border-color:var(--danger);
}

.document-upload-placeholder{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:8px;
    color:var(--text-light);
    text-align:center;
}

.document-upload-placeholder .icon{
    width:28px;
    height:28px;
}

.document-upload-placeholder span{
    font-size:13px;
    font-weight:600;
}

.document-upload-file{
    display:flex;
    align-items:center;
    gap:10px;
    color:var(--text);
    font-weight:600;
    font-size:13.5px;
}

.document-upload-file .icon{
    width:22px;
    height:22px;
    color:var(--primary);
    flex-shrink:0;
}

.document-upload-input{
    display:none;
}

@media(max-width:700px){

    .form-grid{
        grid-template-columns:1fr;
    }

    .auth-card{
        padding:28px 22px;
    }

}