*{margin:0;padding:0;box-sizing:border-box;}
:root{--primary:#2563eb;--primary-dark:#1d4ed8;--secondary:#6b7280;--gray-100:#f3f4f6;--gray-200:#e5e7eb;--gray-300:#d1d5db;--text:#111827;--radius:12px;--shadow-lg:0 10px 25px -5px rgba(0,0,0,0.1),0 10px 10px -5px rgba(0,0,0,0.04);}
body{font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;background:linear-gradient(135deg,#f8fafc 0%,#e2e8f0 100%);min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px;}
.login-wrapper{max-width:420px;width:100%;}
.login-card{background:white;border-radius:var(--radius);box-shadow:var(--shadow-lg);border:1px solid var(--gray-200);padding:40px 32px;text-align:center;}
.login-header{margin-bottom:32px;}
.login-header i{font-size:2.5rem;color:var(--primary);margin-bottom:16px;}
.login-header h2{font-size:1.875rem;font-weight:700;color:var(--text);margin-bottom:8px;}
.login-header p{font-size:1rem;color:var(--secondary);margin:0;}
.form-group{margin-bottom:24px;text-align:left;}
.form-group label{display:block;margin-bottom:8px;font-size:0.95rem;font-weight:500;color:#374151;}
.form-group input{width:100%;padding:14px 16px;border:1px solid var(--gray-300);border-radius:var(--radius);font-size:1rem;background:#fff;transition:all .2s;}
.form-group input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 4px rgba(37,99,235,0.1);}
.form-group input::placeholder{color:#9ca3af;}
.form-options{display:flex;justify-content:space-between;align-items:center;margin-bottom:32px;font-size:0.9rem;}
.remember-me{display:flex;align-items:center;gap:8px;color:#374151;cursor:pointer;}
.forgot-password{color:var(--primary);text-decoration:none;}
.forgot-password:hover{text-decoration:underline;}
.btn-login{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:14px;border:none;border-radius:var(--radius);background:var(--primary);color:white;font-size:1.05rem;font-weight:600;cursor:pointer;transition:all .2s;}
.btn-login:hover{background:var(--primary-dark);transform:translateY(-1px);}
.login-footer{margin-top:32px;font-size:0.875rem;color:var(--secondary);}
@media (max-width:480px){.login-card{padding:28px 20px;}}