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

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    background-color: #fafafa;
    min-height: 100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:20px;
    color:#333;
}

.login-container {
    background:#fff;
    border-radius:8px;
    box-shadow:0 4px 20px rgba(82,33,125,0.08);
    width:100%;
    max-width:600px;
    padding:40px 40px 30px;
    border:1px solid #f0f0f0;
}

.header { text-align:center; margin-bottom:20px; }
.logo { width:260px; height:auto; margin:0 auto 10px; display:block; }

.app-title {
            font-size: 22px;
            font-weight: 600;
            color: #52217d;
            margin-bottom: 10px;
            text-align: center;
            line-height: 1.3;
            letter-spacing: -0.3px;
}

.form-section { margin-bottom:0; }
.section-title { font-size:16px; font-weight:500; color:#333; margin-bottom:24px; text-align:center; }
.form-group { margin-bottom:20px; }
.form-label { display:block; margin-bottom:8px; font-weight:500; color:#333; font-size:14px; }

.form-input {
    width:100%;
    padding:14px 18px;
    border:1.5px solid #e1e5e9;
    border-radius:6px;
    font-size:16px;
    transition:all .2s ease;
    background:#fff;
    color:#333;
}
.form-input:focus { outline:none; border-color:#52217d; box-shadow:0 0 0 3px rgba(82,33,125,.08); }
.form-input::placeholder { color:#999; }

.field-errors { color:#c53030; font-size:13px; margin-top:6px; }

.login-button {
    width:100%;
    padding:14px;
    background:#52217d;
    color:#fff;
    border:none;
    border-radius:6px;
    font-size:16px;
    font-weight:500;
    cursor:pointer;
    transition:all .2s ease;
    margin-bottom:20px;
}
.login-button:hover { 
    background:#441b6a; 
    transform:translateY(-1px); 
}

.login-button:active { 
    transform:translateY(0); 
}

.forgot-password {
    display:block;
    text-align:center;
    color:#52217d;
    text-decoration:none;
    font-size:14px;
    font-weight:500;
    transition:color .2s ease;
}
.forgot-password:hover { color:#cf2484; }

.error-message {
    background:#fff5f5;
    border:1px solid #fed7d7;
    color:#c53030;
    padding:14px;
    border-radius:6px;
    margin-bottom:20px;
    font-size:14px;
    text-align:center;
}

@media (max-width:480px){
    .login-container{ padding:10px 20px 25px; margin:0px; }
    .logo{ width:240px; }
    .form-input,.login-button{ padding:12px 16px; }

    .app-title {
                font-size: 18px;
                margin-bottom: 20px;
                padding: 0 10px;
            }

}


.login-button:disabled { opacity:.6; cursor:not-allowed; transform:none; }
.login-button.loading { position:relative; color:transparent; }
.login-button.loading::after {
    content:''; position:absolute; top:50%; left:50%;
    width:18px; height:18px; margin:-9px 0 0 -9px;
    border:2px solid transparent; border-top:2px solid #fff;
    border-radius:50%; animation:spin 1s linear infinite;
}
@keyframes spin { 
    0%{transform:rotate(0)} 
    100%{transform:rotate(360deg)} 
}

h1 {

}