/* login.css - only used by index.html */
.login-page {
  min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px;
  background: linear-gradient(160deg, #eff6ff 0%, #f5f7fb 50%, #e0ecff 100%);
}
.login-card {
  width: 100%; max-width: 420px; background: #fff; border-radius: 20px; padding: 34px 30px;
  box-shadow: 0 10px 40px rgba(37, 99, 235, .12), 0 2px 6px rgba(15, 23, 42, .06);
}
.login-logo { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-bottom: 22px; }
.login-logo img { width: 64px; height: 64px; }
.login-logo h1 { font-size: 22px; }
.login-logo p { color: var(--muted); margin: 0; font-size: 14px; }

.role-toggle {
  display: grid; grid-template-columns: 1fr 1fr; background: var(--gray-bg);
  border-radius: 12px; padding: 4px; margin-bottom: 18px; gap: 4px;
}
.role-toggle label {
  text-align: center; padding: 9px 6px; border-radius: 9px; cursor: pointer;
  font-weight: 600; font-size: 14px; color: var(--muted); transition: all .15s;
}
.role-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.role-toggle input:checked + span { color: var(--blue); }
.role-toggle label:has(input:checked) { background: #fff; color: var(--blue); box-shadow: var(--shadow); }
.role-toggle label:has(input:focus-visible) { outline: 2px solid var(--blue); }

.pw-wrap { position: relative; }
.pw-wrap input { padding-right: 64px; }
.pw-wrap button {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  border: 0; background: transparent; color: var(--blue); font-weight: 600; cursor: pointer; font-size: 13px;
}
.login-foot { margin-top: 18px; text-align: center; font-size: 13px; color: var(--muted); }
.demo-box {
  margin-top: 16px; background: var(--blue-50); border-radius: 12px; padding: 12px 14px;
  font-size: 13px; color: #1e3a8a;
}
.demo-box code { background: #fff; padding: 1px 6px; border-radius: 6px; }