/* Basic reset */
* { box-sizing: border-box; margin: 0; padding: 0; }
html,body { height: 100%; }
body {
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  background: linear-gradient(180deg,#f5f7fa,#e9eef6);
  display: flex; align-items: center; justify-content: center;
}
.login-container { padding: 24px; width: 100%; max-width: 420px; }
.login-card {
  background: #fff; padding: 32px; border-radius: 10px;
  box-shadow: 0 10px 30px rgba(21,29,41,0.08);
  text-align: center;
}
#logo { width: 140px; height: auto; margin-bottom: 18px; }
h1 { font-size: 18px; color: #222; margin-bottom: 20px; font-weight: 600; }
.field { text-align: left; margin-bottom: 16px; }
label { display: block; font-size: 13px; margin-bottom: 6px; color: #555; }
input[type="text"], input[type="password"] {
  width: 100%; padding: 12px 14px; border: 1px solid #d7dbe6; border-radius: 8px;
  font-size: 14px; background: #fafbff;
}
.password-wrap { display: flex; }
.password-wrap input { flex: 1; border-top-right-radius: 0; border-bottom-right-radius: 0; }
#togglePassword {
  padding: 0 12px; border: 1px solid #d7dbe6; border-left: 0; background: #f7f8fb;
  border-radius: 0 8px 8px 0; cursor: pointer; font-size: 13px;
}
.actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; }
.btn { padding: 10px 16px; border-radius: 8px; border: none; cursor: pointer; font-weight: 600; }
.btn.primary { background: #f6b000; color: #1b1b1b; }
.remember input { margin-right: 8px; }
.help { margin-top: 16px; font-size: 13px; color: #666; }
@media (max-width: 480px) { .login-card { padding: 24px; } #logo{ width: 110px; } }