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

:root {
    --primary:       #0284c7;
    --primary-hover: #0369a1;
    --bg:            #eef2f7;
    --surface:       #ffffff;
    --text:          #0f172a;
    --text-muted:    #64748b;
    --border:        #e2e8f0;
    --success:       #059669; --success-bg: #d1fae5;
    --danger:        #dc2626; --danger-bg:  #fee2e2;
    --radius:        8px;
}

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

body {
    font-family: 'DM Sans', system-ui, -apple-system, sans-serif;
    background: linear-gradient(135deg, #0f172a 0%, #1e3a5f 60%, #0284c7 100%);
    min-height: 100vh;
    display: flex; align-items: center; justify-content: center;
    color: var(--text);
    font-size: 14px;
    line-height: 1.5;
}

h1, h2, h3 { font-family: 'Sora', sans-serif; }

.login-card {
    background: #ffffff; border-radius: 16px;
    padding: 48px 44px; width: 400px; max-width: 90vw;
    box-shadow: 0 24px 64px rgba(0,0,0,0.35);
    animation: fadeUp 0.4s ease;
}
.login-logo {
    display: flex; align-items: center; gap: 10px;
    font-family: 'Sora', sans-serif; font-size: 22px; font-weight: 800;
    color: #0284c7; margin-bottom: 28px;
}
.login-logo-icon {
    width: 40px; height: 40px;
    background: linear-gradient(135deg, #0284c7, #38bdf8);
    border-radius: 12px; display: flex; align-items: center;
    justify-content: center; color: white; font-size: 18px; font-weight: 800;
    box-shadow: 0 4px 12px rgba(2,132,199,0.4);
}
.login-title { font-family: 'Sora', sans-serif; font-size: 20px; font-weight: 700; color: #0f172a; margin-bottom: 6px; }
.login-sub { font-size: 13px; color: #64748b; margin-bottom: 28px; }
.login-field { margin-bottom: 18px; }
.login-field label { display: block; font-size: 12px; font-weight: 600; color: #374151; margin-bottom: 6px; text-transform: uppercase; letter-spacing: .06em; }
.login-field input {
    width: 100%; padding: 10px 14px; border: 1.5px solid #e2e8f0;
    border-radius: 8px; font-size: 14px; font-family: inherit;
    outline: none; transition: border-color 0.15s, box-shadow 0.15s;
}
.login-field input:focus { border-color: #0284c7; box-shadow: 0 0 0 3px rgba(2,132,199,0.15); }
.login-btn {
    width: 100%; padding: 11px; background: linear-gradient(135deg,#0284c7,#0ea5e9);
    border: none; border-radius: 8px; color: white; font-size: 14px; font-weight: 700;
    font-family: inherit; cursor: pointer; transition: opacity 0.15s;
    margin-top: 4px; letter-spacing: .02em;
}
.login-btn:hover { opacity: 0.9; }
.login-btn:disabled { opacity: 0.6; cursor: default; }
.login-error { margin-top: 14px; padding: 10px 14px; background: #fee2e2; border-radius: 8px; color: #dc2626; font-size: 13px; display: none; }
.login-error.show { display: block; }
#login-view, #forgot-view, #reset-view, #totp-view { display: none; }
#login-view.active, #forgot-view.active, #reset-view.active, #totp-view.active { display: block; }
.login-link {
    display: block; text-align: center; margin-top: 14px;
    font-size: 13px; color: #0284c7; cursor: pointer;
    background: none; border: none; font-family: inherit;
    text-decoration: underline; padding: 0;
}
.login-link:hover { color: #0369a1; }
.login-success {
    margin-top: 14px; padding: 10px 14px; background: #d1fae5;
    border-radius: 8px; color: #059669; font-size: 13px; display: none;
}
.login-success.show { display: block; }
.login-senha-wrap { position: relative; }
.login-senha-wrap input { padding-right: 40px; width: 100%; }
.login-eye {
    position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
    background: none; border: none; cursor: pointer;
    color: #94a3b8; padding: 0; line-height: 1;
}
.login-eye:hover { color: #475569; }
.login-remember { display: flex; align-items: center; gap: 8px; margin-top: 2px; margin-bottom: 16px; }
.login-remember input[type=checkbox] { width: 15px; height: 15px; accent-color: #0284c7; cursor: pointer; }
.login-remember label { font-size: 13px; color: #64748b; cursor: pointer; user-select: none; }

@media (max-width: 480px) {
    body { align-items: flex-start; padding: 24px 0 40px; }
    .login-card { width: 100%; max-width: 100%; border-radius: 0; padding: 32px 24px; box-shadow: none; }
}