/* ==========================================================================
   auth.css — login, forgot-password and reset-password pages
   ========================================================================== */
.auth-page { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); background: var(--surface); }
.auth-visual {
  position: relative; color: #fff; padding: var(--space-6) 3.5rem; display: flex; flex-direction: column; justify-content: space-between;
  background: linear-gradient(160deg, rgba(20, 28, 88, 0.78), rgba(52, 87, 213, 0.55)), url("../assets/images/login-bg.jpg") center / cover no-repeat;
}
.auth-visual .brand { display: flex; align-items: center; gap: var(--space-3); font-weight: 800; font-size: 1.2rem; }
.auth-visual .brand img { width: 42px; height: 42px; border-radius: 11px; }
.auth-visual h1 { color: #fff; font-size: 2.3rem; line-height: 1.15; max-width: 520px; }
.auth-visual p { max-width: 460px; color: rgba(255, 255, 255, 0.85); font-size: 1.02rem; }
.auth-visual ul { list-style: none; padding: 0; margin: var(--space-5) 0 0; display: grid; gap: var(--space-3); }
.auth-visual li { display: flex; gap: var(--space-3); align-items: center; color: rgba(255, 255, 255, 0.92); }
.auth-visual li i { width: 32px; height: 32px; display: grid; place-items: center; background: rgba(255, 255, 255, 0.16); border-radius: 50%; }
.auth-panel { display: flex; align-items: center; justify-content: center; padding: var(--space-6) var(--space-5); }
.auth-card { width: 100%; max-width: 430px; }
.auth-card h2 { font-size: 1.6rem; }
.auth-card .lead { color: var(--muted); font-size: 0.95rem; }
.auth-card .form-control { padding: 0.7rem 0.9rem; }
.input-icon { position: relative; }
.input-icon > i.lead-ico { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.input-icon > .form-control { padding-left: 2.5rem; }
.input-icon > .toggle-pass { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); background: none; border: 0; color: var(--muted); width: 36px; height: 36px; border-radius: var(--radius-sm); }
.input-icon > .toggle-pass:hover { color: var(--text); background: var(--surface-2); }
.demo-accounts { margin-top: var(--space-5); border: 1px dashed var(--border); border-radius: var(--radius); padding: var(--space-4); background: var(--surface-2); }
.demo-accounts h3 { font-size: var(--fs-sm); margin-bottom: var(--space-3); }
/* Icon-only demo account picker — role and icon, no email/password shown on screen. */
.demo-account-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); }
.demo-account-icon { display: flex; flex-direction: column; align-items: center; gap: 8px; border: 1px solid var(--border); background: var(--surface); color: var(--text); padding: 0.9rem 0.5rem; border-radius: var(--radius); transition: border-color var(--transition), background var(--transition), color var(--transition); }
.demo-account-icon:hover, .demo-account-icon:focus-visible { border-color: var(--primary); background: var(--primary-soft); color: var(--tone-primary); }
.demo-account-icon .dai-icon { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--primary-soft); color: var(--primary); font-size: 1.2rem; flex: 0 0 auto; }
.demo-account-icon .dai-label { font-weight: 700; font-size: var(--fs-xs); text-align: center; line-height: 1.2; }
.auth-note { font-size: var(--fs-xs); color: var(--muted); margin-top: var(--space-4); }
.pw-rules { list-style: none; padding: 0; margin: var(--space-2) 0 0; font-size: var(--fs-xs); color: var(--muted); display: grid; gap: 2px; }
.pw-rules li.ok { color: var(--tone-success); }
.pw-rules li::before { content: "\2022"; margin-right: 6px; }
.pw-rules li.ok::before { content: "\2713"; }
@media (max-width: 991.98px) {
  .auth-page { grid-template-columns: 1fr; }
  .auth-visual { display: none; }
  .auth-panel { min-height: 100vh; align-items: flex-start; padding-top: 3rem; }
}