:root{
  --vb-bg: #f8fafc;
  --vb-card: #ffffff;
  --vb-border:#e5e7eb;
  --vb-text:#0f172a;
  --vb-muted:#64748b;
  --vb-emerald:#059669;
  --vb-emerald-2:#10b981;
  --r-xl: 1.25rem;
  --shadow: 0 12px 30px rgba(2,8,23,.08);
}

body { background: var(--vb-bg); color: var(--vb-text); font-family: 'Inter', sans-serif; }
.login-wrap{ min-height: calc(100vh - 120px); display: grid; place-items: center; padding: 2rem 1rem; }
.login-card{ width: 100%; max-width: 520px; background: var(--vb-card); border: 1px solid var(--vb-border); border-radius: var(--r-xl); box-shadow: var(--shadow); overflow: hidden; }
.login-head{ background: linear-gradient(135deg, rgba(5,150,105,.12) 0%, rgba(16,185,129,.06) 60%, rgba(255,255,255,1) 100%); border-bottom: 1px solid var(--vb-border); padding: 1.5rem 1.5rem 1.25rem; }
.login-head h1{ font-size: 1.5rem; font-weight: 800; margin: 0; display: flex; align-items: center; gap: .6rem; color: var(--vb-emerald); }
.login-head p{ margin: .35rem 0 0; color: var(--vb-muted); font-size: .925rem; }
.login-body{ padding: 1.5rem; }
.form-floating>.form-control,
.form-floating>.form-control-plaintext{
  padding: 1.1rem .85rem; height: auto; border-radius: .9rem;
  background: #f9fafb; border: 1px solid var(--vb-border); color: var(--vb-text);
}
.form-floating>label{ padding: .8rem .85rem; color: var(--vb-muted); }
.form-control:focus{ border-color: var(--vb-emerald-2); box-shadow: 0 0 0 .25rem rgba(16,185,129,.15); background: #fff; }
.helper-row{ display:flex; align-items:center; justify-content:space-between; gap: .75rem; margin-top: .35rem; }
.btn-emerald{ background: var(--vb-emerald); color: #fff; border: 0; padding: .85rem 1rem; border-radius: .9rem; font-weight: 700; box-shadow: 0 8px 22px rgba(5,150,105,.25); transition: transform .08s ease, filter .2s ease; }
.btn-emerald:hover{ filter: brightness(1.05); }
.btn-emerald:active{ transform: translateY(1px); }
.oauth-btn{ border-radius: .9rem; padding: .7rem 1rem; border: 1px solid var(--vb-border); background: #fff; color: var(--vb-text); font-weight: 600; }
.oauth-btn:hover{ background: #fbfbfb; }
.tiny{ font-size: .9rem; color: var(--vb-muted); }
.link-muted{ color: var(--vb-emerald); text-decoration: none; font-weight: 600; }
.link-muted:hover{ text-decoration: underline; }
.field-error{ color: #b91c1c; font-size: .85rem; margin-top: .35rem; }
.eye-btn{ position: absolute; right: .6rem; top: 50%; transform: translateY(-50%); border: 0; background: transparent; padding: .3rem; color: var(--vb-muted); }
.pos-rel{ position: relative; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  .btn-emerald,
  .oauth-btn {
    transition: none;
    box-shadow: none;
  }
}