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

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    min-height: 100vh; 
    display: flex; 
    align-items: center; 
    justify-content: center;
    padding: 20px; 
    color: #2d2f36;
    background: radial-gradient(circle at 15% 20%, rgba(139, 92, 246, 0.25), transparent 40%),
                radial-gradient(circle at 85% 80%, rgba(99, 102, 241, 0.22), transparent 40%),
                linear-gradient(135deg, #f4f6fb, #eef1f8, #ffffff);
}

/* --- LOGIN BOX --- */
.login-box {
    position: relative; 
    background: linear-gradient(180deg, #ffffff, #fbfbff);
    border-radius: 24px; 
    padding: 42px; 
    width: 100%; 
    max-width: 400px;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.08), 0 8px 16px rgba(124, 131, 255, 0.12);
    border: 1px solid rgba(124, 131, 255, 0.2); 
    animation: slideUp 0.6s ease-out;
}

@keyframes slideUp { 
    from { opacity: 0; transform: translateY(30px); } 
    to { opacity: 1; transform: translateY(0); } 
}

h2 { 
    text-align: center; 
    font-size: 26px; 
    font-weight: 600; 
    margin-bottom: 36px; 
    color: #2f325a; 
}

h2 span { 
    background: linear-gradient(135deg, #7c83ff, #a78bfa); 
    -webkit-background-clip: text; 
    -webkit-text-fill-color: transparent; 
}

/* --- FORM GROUP --- */
.form-group { 
    margin-bottom: 25px; 
}

.form-group label { 
    display: block; 
    margin-bottom: 8px; 
    color: #555; 
    font-weight: 500; 
    font-size: 13px; 
    text-transform: uppercase; 
}

.form-group input:not(.otp-box) { 
    width: 100%; 
    padding: 14px 16px; 
    border-radius: 14px; 
    border: 1.8px solid #e4e7f2; 
    background: #f9faff; 
    font-size: 15px; 
    transition: 0.25s ease; 
}

.form-group input:focus { 
    background: #fff; 
    border-color: #7c83ff; 
    box-shadow: 0 0 0 5px rgba(124, 131, 255, 0.15); 
    outline: none; 
}

/* --- CAPTCHA STYLES --- */
.captcha-row { 
    display: flex; 
    align-items: center; 
    gap: 10px; 
    margin-top: 5px; 
}

.captcha-img { 
    height: 50px; 
    border: 1.8px solid #e4e7f2; 
    border-radius: 12px; 
    background: #fff; 
}

.captcha-otp { 
    display: flex; 
    gap: 5px; 
}

.otp-box { 
    width: 40px; 
    height: 50px; 
    text-align: center; 
    font-size: 18px; 
    font-weight: 600; 
    border-radius: 12px; 
    border: 1.8px solid #e4e7f2; 
    background: #f9faff; 
    transition: 0.25s; 
}

.otp-box:focus { 
    border-color: #7c83ff; 
    background: #fff; 
    box-shadow: 0 0 0 4px rgba(124, 131, 255, 0.1); 
    outline: none; 
}

.refresh-captcha { 
    background: none; 
    border: none; 
    cursor: pointer; 
    font-size: 20px; 
    color: #7c83ff; 
    transition: 0.3s; 
}

.refresh-captcha:hover { 
    transform: rotate(180deg); 
}

/* --- BUTTON & ERROR --- */
.btn-login { 
    width: 100%; 
    padding: 15px; 
    margin-top: 10px; 
    border-radius: 14px; 
    border: none; 
    font-size: 15px; 
    font-weight: 600; 
    cursor: pointer; 
    color: #fff; 
    background: linear-gradient(135deg, #7c83ff, #9f8cff); 
    box-shadow: 0 12px 24px rgba(124, 131, 255, 0.4); 
    transition: 0.25s ease; 
}

.btn-login:hover { 
    transform: translateY(-2px); 
    box-shadow: 0 18px 32px rgba(124, 131, 255, 0.5); 
}

.error { 
    background: linear-gradient(135deg, #ff6b6b, #ee5a24); 
    color: white; 
    padding: 12px 16px; 
    border-radius: 10px; 
    margin-bottom: 20px; 
    text-align: center; 
    font-size: 14px; 
    animation: shake 0.5s ease-in-out; 
}

@keyframes shake { 
    0%, 100% { transform: translateX(0); } 
    20%, 60% { transform: translateX(-5px); } 
    40%, 80% { transform: translateX(5px); } 
}