:root{--bg1:#0b3a2a;--bg2:#116b47;--bg3:#17a157;--card-bg:rgba(255,255,255,0.92);--text:#1c1d20;--muted:#6b7280;--accent:#28a745;--accent2:#1f9a3d;--danger:#dc2626}
*,*::before,*::after{box-sizing:border-box}
.login-page{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--bg1),var(--bg2) 50%,var(--bg3));color:var(--text)}
.login-bg{position:fixed;inset:0;background-image:radial-gradient( rgba(255,255,255,0.08) 1px, transparent 1px );background-size:20px 20px}
.login-container{position:relative;z-index:1;width:100%;max-width:520px;padding:24px;display:flex;flex-direction:column;align-items:center;gap:18px}
.brand{display:flex;flex-direction:column;align-items:center;gap:8px;color:#fff;margin-top:8px}
.brand-logo{height:72px;width:auto;opacity:1;filter:drop-shadow(0 6px 16px rgba(0,0,0,0.35))}
.brand-text{font-size:18px;font-weight:600}
.login-card{width:100%;background:var(--card-bg);backdrop-filter:blur(10px);border-radius:16px;box-shadow:0 10px 30px rgba(0,0,0,0.15);padding:28px}
.login-header{font-size:18px;font-weight:600;margin-bottom:16px;color:var(--text);text-align:center}
.alert{background:#fee2e2;color:#7f1d1d;border:1px solid #fecaca;border-radius:8px;padding:12px;margin-bottom:12px;text-align:center}
.login-form{display:grid;gap:16px;width:100%}
.field{width:100%}
.field label{display:block;font-size:13px;color:var(--muted);margin-bottom:8px}
.field input{width:100%;max-width:100%;padding:12px 14px;border:1px solid #e5e7eb;border-radius:10px;font-size:15px;outline:none;transition:border .2s, box-shadow .2s;background:#fff}
.field input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(37,99,235,0.15)}
.submit:hover{filter:brightness(1.05)}
.password-wrapper .toggle:hover{background:#d1fae5;border-color:#a7f3d0}
.password-wrapper{display:flex;align-items:center;gap:8px}
.password-wrapper input{flex:1;padding-right:14px}
.password-wrapper .toggle{position:static;padding:10px;border:1px solid #e5e7eb;border-radius:10px;min-width:96px;display:flex;align-items:center;justify-content:center;background:#f3f4f6;color:#111827;font-size:13px}
.password-wrapper .toggle:hover{background:#eef2ff;border-color:#c7d2fe}
.submit{width:100%;padding:12px 14px;border:none;border-radius:10px;background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;font-weight:600;letter-spacing:.2px}
.submit:disabled{opacity:.6;cursor:not-allowed}
.footer-text{margin-top:12px;font-size:12px;color:var(--muted);text-align:center}
@media (max-width:480px){.brand-logo{height:60px}.password-wrapper .toggle{min-width:88px}.login-card{padding:20px}}