/* Mechanicus sign-in — on top of drivesmart.css tokens. */
.login-wrap { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 32px 16px; }
.login-card { width: 100%; max-width: 400px; padding: 28px; }
.demo-card { width: 100%; max-width: 400px; padding: 18px 20px; }

.login-brand { display: flex; align-items: center; gap: 13px; margin-bottom: 22px; }
.login-brand .logo { width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; font-weight: 800; font-size: 21px; color: #06121f; background: linear-gradient(135deg, var(--primary, #9ecaff), var(--success, #2ee08f)); }
.login-brand h1 { margin: 0; font-size: 19px; }
.login-brand p { margin: 2px 0 0; }

.login-step { display: flex; flex-direction: column; gap: 12px; }
.w-full { width: 100%; }
.login-hint { color: var(--on-surface-variant, #bfc7d4); font-size: 12px; margin: 2px 0 0; }
.login-greet { font-size: 14px; color: var(--on-surface-variant, #bfc7d4); margin-bottom: 4px; }
.login-code { text-align: center; letter-spacing: 8px; font-size: 22px; font-variant-numeric: tabular-nums; }

.login-msg { margin-top: 16px; font-size: 13px; }
.login-msg.alert--info { background: rgba(158,202,255,.12); border: 1px solid rgba(158,202,255,.3); color: var(--primary, #9ecaff); padding: 10px 14px; border-radius: 10px; }
.login-msg.alert--danger { background: rgba(255,123,134,.12); border: 1px solid rgba(255,123,134,.3); color: var(--danger, #ff7b86); padding: 10px 14px; border-radius: 10px; }
.login-msg.alert--warning { background: rgba(245,184,78,.12); border: 1px solid rgba(245,184,78,.3); color: var(--warning, #f5b84e); padding: 10px 14px; border-radius: 10px; }

.login-secure { display: flex; align-items: center; gap: 8px; margin-top: 20px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.08); color: var(--on-surface-variant, #bfc7d4); font-size: 11px; }
.login-secure .material-symbols-outlined { font-size: 18px; color: var(--success, #2ee08f); }

.demo-head { font-size: 12px; color: var(--on-surface-variant, #bfc7d4); margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
.demo-code { margin: 12px 0 8px; font-size: 12px; color: var(--on-surface-variant, #bfc7d4); }
.demo-code b { font-variant-numeric: tabular-nums; letter-spacing: 3px; color: var(--primary, #9ecaff); font-size: 15px; }
.demo-users { list-style: none; margin: 8px 0 0; padding: 0; }
.demo-users li { padding: 9px 10px; border-radius: 9px; border: 1px solid rgba(255,255,255,.06); margin-bottom: 6px; cursor: pointer; font-size: 12px; transition: border-color .15s, background .15s; }
.demo-users li:hover { border-color: var(--primary, #9ecaff); background: rgba(158,202,255,.06); }
.demo-email { display: block; color: var(--outline, #89919d); font-size: 11px; margin-top: 2px; font-family: var(--f-mono, monospace); }
.material-symbols-outlined { font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20; line-height: 1; vertical-align: middle; }
.hidden { display: none !important; }