@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap');

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: linear-gradient(135deg, #eef3ff 0%, #f7f8fb 40%, #ffffff 100%);
  color: #1f2732;
}

.page {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 32px 20px;
}

.login-card {
  width: 100%;
  max-width: 440px;
  background: #fff;
  border: 1px solid #e6eaf3;
  border-radius: 16px;
  box-shadow: 0 18px 40px rgba(31, 39, 50, 0.12);
  padding: 28px 26px 18px;
}

.brand { display:flex; align-items:center; gap:10px; color:#2f6de1; font-weight:700; }
.brand span { font-size:14px; letter-spacing:.3px; }

.login-card h1 { margin: 8px 0 6px; font-size: 24px; color:#253047 }
.subtitle { margin:0 0 12px; color:#596277; font-size:13px }

.alert {
  background: #ffe4e4;
  color: #a11010;
  border: 1px solid #ffc7c7;
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 13px;
}

.login-form { margin-top: 8px; }

.field { display:flex; align-items:center; margin: 10px 0; }
.field .icon {
  width: 44px; height: 44px; border-radius: 10px;
  background:#e9effd; color:#2f6de1; display:inline-flex; align-items:center; justify-content:center; border:1px solid #d7e0fb;
}
.input-wrap{ position:relative; flex:1; margin-left:8px }
.input-wrap input {
  height: 44px; width:100%; border: 1px solid #ccd3e2; border-radius: 10px; padding: 0 42px 0 12px; font-size: 14px; outline: none; background:#fff;
}
.input-wrap input:focus { border-color:#2f6de1; box-shadow: 0 0 0 3px rgba(47,109,225,.12); }

.toggle-pass{
  position:absolute; right:8px; top:50%; transform:translateY(-50%);
  width:34px; height:34px; border:none; border-radius:8px; background:#eef3ff; color:#2f6de1; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; border:1px solid #dee5f5;
}
.toggle-pass.on{ background:#2f6de1; color:#fff; border-color:#2f6de1 }

.extras { display:flex; align-items:center; justify-content:space-between; margin-top: 6px; font-size: 13px; }
.forgot { color:#5d76a9; text-decoration:none }
.forgot:hover { color:#2f6de1; text-decoration:underline }

.btn-login {
  margin-top: 12px; width: 100%; height: 44px; border: none; border-radius: 10px; background: #2f6de1; color:#fff; font-weight: 600; cursor: pointer; box-shadow: 0 12px 18px rgba(47,109,225,.25);
}
.btn-login:hover { filter: brightness(1.05) }

.footer { margin-top: 14px; text-align:center; color:#8a93a7; font-size:12px }

@media (max-width: 420px) {
  .login-card { padding: 22px 18px; }
}