*{margin:0;padding:0;box-sizing:border-box}body{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#f8f9fa;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;color:#2c2c2c;padding:1rem}header{display:flex;flex-direction:column;align-items:center;margin-bottom:1.5rem}.brand{display:flex;flex-direction:column;align-items:center;text-decoration:none}header h1{margin-top:.5rem;font-size:1.5rem;font-weight:600;color:#2f6fed}.login-box{background:#fff;border-radius:12px;box-shadow:0 2px 12px rgba(0,0,0,.08);padding:2rem;width:100%;max-width:320px}.login-box input[type=password],.login-box input[type=text]{width:100%;padding:.65rem .75rem;margin-bottom:.85rem;border:1px solid #d5d5d5;border-radius:6px;font-size:.95rem}.login-box input:focus{outline:0;border-color:#2f6fed;box-shadow:0 0 0 2px rgba(47,111,237,.15)}.login-box label{display:flex;align-items:center;gap:.4rem;font-size:.85rem;margin-bottom:1rem;color:#555}.login-box button{position:relative;width:100%;padding:.7rem;border:none;border-radius:6px;background:#2f6fed;color:#fff;font-size:.95rem;font-weight:600;cursor:pointer}.login-box button:hover{background:#255ac9}.login-box button:disabled{cursor:default;opacity:.8}.login-box button.loading{color:transparent;pointer-events:none}.login-box button.loading::after{content:"";position:absolute;width:16px;height:16px;top:50%;left:50%;margin:-8px 0 0 -8px;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:spin .6s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.error-msg{margin-top:.75rem;color:#d32f2f;font-size:.85rem;text-align:center}.success-msg{margin-top:.75rem;color:#2e7d32;font-size:.85rem;text-align:center}.forgot-intro{font-size:.85rem;color:#555;margin-bottom:1rem;text-align:center}.lost-password{display:block;margin-top:1rem;text-align:center;font-size:.85rem;color:#2f6fed;text-decoration:none}footer{margin-top:1.5rem;font-size:.75rem;color:#9a9a9a;text-align:center}@keyframes shake{10%,90%{transform:translateX(-1px)}20%,80%{transform:translateX(2px)}30%,50%,70%{transform:translateX(-4px)}40%,60%{transform:translateX(4px)}}.login-box.shake{animation:shake .4s}@media (max-width:400px){.login-box{max-width:100%;padding:1.5rem}}