/* ============ Auth pages ============ */
.auth-page {
  min-height: 100vh; display: grid; place-items: center; padding: 24px;
  background:
    linear-gradient(135deg, rgba(13,148,136,.88), rgba(8,145,178,.82)),
    url('https://images.pexels.com/photos/127873/pexels-photo-127873.jpeg?auto=compress&cs=tinysrgb&w=1400') center/cover no-repeat fixed;
}
.auth-card {
  background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  width: 100%; max-width: 440px; padding: 32px 28px; max-height: 96vh; overflow-y: auto;
}
.auth-logo { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 6px; }
.auth-logo .brand-mark { width: 38px; height: 38px; font-size: 26px; }
.auth-logo .brand-name { color: var(--neutral-900); font-size: 24px; }
.auth-title { text-align: center; font-size: 22px; font-weight: 800; color: var(--neutral-900); margin-bottom: 4px; }
.auth-sub { text-align: center; color: var(--neutral-500); font-size: 14px; margin-bottom: 22px; }

.auth-tabs { display: flex; gap: 4px; background: var(--neutral-100); border-radius: 10px; padding: 4px; margin-bottom: 18px; }
.auth-tab { flex: 1; padding: 10px; border: none; background: transparent; border-radius: 8px; font-weight: 600; color: var(--neutral-600); font-size: 14px; }
.auth-tab.active { background: #fff; color: var(--primary-dark); box-shadow: var(--shadow-sm); }

.auth-foot { text-align: center; margin-top: 18px; font-size: 14px; color: var(--neutral-600); }
.auth-foot a { font-weight: 600; }
.auth-error { background: var(--error-light); color: var(--error); padding: 10px 14px; border-radius: 10px; font-size: 13px; margin-bottom: 14px; display: none; }
.auth-error.show { display: block; }
.auth-success { background: var(--success-light); color: var(--success); padding: 10px 14px; border-radius: 10px; font-size: 13px; margin-bottom: 14px; display: none; }
.auth-success.show { display: block; }
.role-select { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 14px; }
.role-card { border: 1.5px solid var(--neutral-300); border-radius: 10px; padding: 14px; text-align: center; cursor: pointer; transition: all .15s; background: #fff; }
.role-card:hover { border-color: var(--primary); }
.role-card.active { border-color: var(--primary); background: var(--primary-50); }
.role-card-ic { font-size: 26px; margin-bottom: 4px; }
.role-card-title { font-weight: 700; font-size: 14px; color: var(--neutral-800); }
.role-card-sub { font-size: 11px; color: var(--neutral-500); }
.divider { display: flex; align-items: center; gap: 10px; margin: 16px 0; color: var(--neutral-400); font-size: 12px; }
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--neutral-200); }