:root{--primary:#6366f1;--accent:#a855f7;--glass:rgba(255,255,255,0.95)}body{margin:0;min-height:100vh;display:flex;align-items:center;justify-content:center;font-family:'Inter',-apple-system,sans-serif;background:radial-gradient(at 0% 0%,#c7d2fe 0,transparent 50%),radial-gradient(at 100% 100%,#fbcfe8 0,transparent 50%),#f3f4f6;padding:15px}.card{background:var(--glass);width:100%;max-width:380px;padding:25px;border-radius:24px;box-shadow:0 20px 40px rgba(0,0,0,0.1);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,0.7);text-align:center}.logo{width:60px;height:60px;border-radius:15px;margin-bottom:15px;object-fit:cover;box-shadow:0 4px 10px rgba(0,0,0,0.1)}h1{font-size:22px;color:#111827;margin:0;font-weight:800}p.sub{font-size:14px;color:#6b7280;margin:5px 0 25px}.input-group{margin-bottom:15px;text-align:left}label{display:block;font-size:11px;font-weight:700;color:#4b5563;margin-bottom:5px;text-transform:uppercase;letter-spacing:0.5px}input{width:100%;padding:12px 14px;box-sizing:border-box;border:1.5px solid #e5e7eb;border-radius:12px;font-size:14px;transition:all 0.3s;background:#fff}input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 4px rgba(99,102,241,0.15)}.pass-wrapper{position:relative}.toggle-pass{position:absolute;right:12px;top:50%;transform:translateY(-50%);cursor:pointer;color:#9ca3af}.btn-login{width:100%;padding:14px;border:none;border-radius:12px;background:linear-gradient(135deg,var(--primary),var(--accent));color:#fff;font-size:16px;font-weight:700;cursor:pointer;margin-top:10px;transition:all 0.3s;box-shadow:0 4px 15px rgba(99,102,241,0.3)}.btn-login:active{transform:scale(0.98)}.error{font-size:13px;color:#b91c1c;background:#fee2e2;padding:12px;border-radius:10px;margin-bottom:20px;border:1px solid #fecaca;display:flex;align-items:center;gap:8px}.footer{margin-top:25px;font-size:14px;color:#4b5563}.footer a{color:var(--primary);text-decoration:none;font-weight:700}#loader{display:none;margin:15px auto 0}.spinner{border:3px solid rgba(0,0,0,0.1);border-top:3px solid var(--primary);border-radius:50%;width:24px;height:24px;animation:spin .8s linear infinite}@keyframes spin{100%{transform:rotate(360deg)}}svg{width:18px;height:18px;fill:currentColor}