:root {
  --rabbit-blue: #145bd7;
  --rabbit-blue-dark: #1047aa;
  --rabbit-ink: #172b4d;
  --rabbit-muted: #61718a;
  --rabbit-border: #d9e3f1;
}

body {
  color: var(--rabbit-ink);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
}

.login-page {
  margin: 0;
  background: radial-gradient(ellipse at top left, #dceaff, transparent 65%), #f3f7fd;
}

.login-layout {
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 24px 16px;
}

.login-card {
  width: 100%;
  max-width: 440px;
  padding: 28px 22px;
  background: #fff;
  border: 1px solid var(--rabbit-border);
  border-radius: 24px;
  box-shadow: 0 20px 60px #173a7212;
}

.brand-logo { width: 160px; max-width: 100%; height: auto; }
.eyebrow { color: var(--rabbit-blue); font-size: .72rem; font-weight: 700; letter-spacing: .14em; }
h1 { font-size: 1.85rem; font-weight: 700; letter-spacing: -.04em; }
.text-secondary { color: var(--rabbit-muted) !important; }
.form-label { font-size: .9rem; font-weight: 600; }
.form-control { min-height: 50px; border-color: var(--rabbit-border); border-radius: 10px; padding: 12px 14px; }
.form-control:focus { border-color: var(--rabbit-blue); box-shadow: 0 0 0 .2rem #145bd71f; }
.password-field { position: relative; }
.password-field .form-control { padding-right: 82px; background-image: none; }
.password-toggle { position: absolute; top: 5px; right: 6px; min-height: 40px; padding: 6px 10px; border: 0; border-radius: 6px; background: transparent; color: var(--rabbit-blue); font-size: .85rem; font-weight: 600; }
.password-toggle:hover { background: #edf4ff; }
.password-toggle:focus-visible { outline: 2px solid var(--rabbit-blue); outline-offset: 1px; }
.invalid-feedback.is-visible { display: block; }
.btn-primary { --bs-btn-bg: var(--rabbit-blue); --bs-btn-border-color: var(--rabbit-blue); --bs-btn-hover-bg: var(--rabbit-blue-dark); --bs-btn-hover-border-color: var(--rabbit-blue-dark); --bs-btn-active-bg: var(--rabbit-blue-dark); min-height: 50px; border-radius: 10px; font-weight: 600; }
.demo-note { padding: 16px 18px; border: 1px solid #dce9fc; border-radius: 12px; background: #f1f6ff; color: #39567d; font-size: .85rem; line-height: 1.7; }
.demo-caption { color: var(--rabbit-muted); font-size: .75rem; }
.alert { font-size: .9rem; border-radius: 10px; }

@media (min-width: 576px) {
  .login-card { padding: 38px; }
}