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

body {
    font-family: system-ui, -apple-system, sans-serif;
    background: linear-gradient(135deg, #0f4c8a 0%, #0099b8 100%);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.card {
    background: #fff;
    border-radius: 20px;
    padding: 40px 36px;
    width: 100%;
    max-width: 420px;
    box-shadow: 0 20px 60px rgba(15, 60, 100, 0.25);
}

.logo { text-align: center; margin-bottom: 32px; }
.logo h1 { font-size: 32px; font-weight: 800; color: #0f4c8a; letter-spacing: -1px; }
.logo h1 em { color: #0099b8; font-style: normal; }
.logo p { font-size: 13px; color: #8fa7bf; margin-top: 4px; }

.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.field label { font-size: 12px; font-weight: 700; color: #5a7899; text-transform: uppercase; letter-spacing: 0.4px; }
.field input {
    background: #f0f4f8;
    border: 1.5px solid #dde5ee;
    border-radius: 10px;
    padding: 12px 14px;
    font-size: 16px;
    color: #1a2a3a;
    width: 100%;
    -webkit-appearance: none;
    appearance: none;
}
.field input:focus {
    outline: none;
    border-color: #0099b8;
    box-shadow: 0 0 0 3px rgba(0, 153, 184, 0.1);
    background: #fff;
}

.btn-login {
    width: 100%;
    background: linear-gradient(135deg, #0f4c8a, #0099b8);
    color: #fff;
    border: none;
    border-radius: 10px;
    padding: 14px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    margin-top: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    touch-action: manipulation;
    -webkit-appearance: none;
    appearance: none;
}
.btn-login:active { opacity: 0.85; }
.btn-login:disabled { opacity: 0.6; cursor: not-allowed; }

.spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
    flex-shrink: 0;
}
@keyframes spin { to { transform: rotate(360deg); } }

.error-box {
    background: #fdecea;
    border: 1px solid #f0c0bb;
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 13px;
    color: #c0392b;
    margin-top: 14px;
    display: none;
}

.divider {
    text-align: center;
    margin: 20px 0 16px;
    font-size: 11px;
    color: #8fa7bf;
    position: relative;
}
.divider::before, .divider::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 40%;
    height: 1px;
    background: #dde5ee;
}
.divider::before { left: 0; }
.divider::after { right: 0; }

.role-badges { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.role-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #f0f4f8;
    border: 1px solid #dde5ee;
    border-radius: 20px;
    padding: 4px 10px;
    font-size: 11px;
    color: #5a7899;
    font-weight: 600;
}

.register-links {
    text-align: center;
    font-size: 12px;
    color: #8fa7bf;
    margin-top: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex-wrap: wrap;
}
.register-links a { color: #0099b8; font-weight: 700; text-decoration: none; }

.footer-text { text-align: center; font-size: 11px; color: #8fa7bf; margin-top: 12px; }