* { box-sizing: border-box }
html, body { margin: 0; padding: 0; font-family: Inter, -apple-system, sans-serif; background: #f1f5f9; color: #1e293b; -webkit-tap-highlight-color: transparent }
.auth-body { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 16px }
.login-page { width: 100%; max-width: 420px }
.login-card { background: #fff; border-radius: 16px; box-shadow: 0 4px 24px rgba(0,0,0,.08); padding: 32px 24px; display: flex; flex-direction: column; gap: 20px }
.brand { text-align: center; margin-bottom: 8px }
.brand-icon { font-size: 48px; margin-bottom: 8px }
.brand-title { font-size: 24px; font-weight: 700; color: #1a73e8; margin: 0 0 4px }
.brand-subtitle { font-size: 14px; color: #64748b; margin: 0 }
.form-group { display: flex; flex-direction: column; gap: 6px }
.form-label { font-size: 14px; font-weight: 600; color: #1e293b }
.form-hint { font-size: 12px; color: #94a3b8; margin: 4px 0 0 }
input[type=text], input[type=password], input[type=number], select, textarea {
  width: 100%; padding: 12px 14px; border: 1.5px solid #cbd5e1; border-radius: 10px;
  font-size: 16px; box-sizing: border-box; background: #f8fafc; transition: border-color .2s
}
input:focus, select:focus, textarea:focus { outline: none; border-color: #1a73e8; background: #fff }
.password-wrapper { position: relative }
.password-wrapper input { padding-right: 44px }
.btn-eye { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; font-size: 18px; padding: 4px }
.role-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px }
.role-chip {
  display: flex; align-items: center; justify-content: center;
  padding: 10px 8px; border: 2px solid #e2e8f0; border-radius: 10px;
  font-size: 13px; font-weight: 600; cursor: pointer; transition: all .15s;
  text-align: center; background: #fff; color: #64748b;
  min-height: 44px; -webkit-user-select: none; user-select: none
}
.role-chip:active { transform: scale(.96) }
.role-chip.selected { border-color: #1a73e8; background: #eef2ff; color: #1a73e8 }
.role-chip.full-width { grid-column: 1 / -1 }
.btn-primary { width: 100%; padding: 14px; background: #1a73e8; color: #fff; border: none; border-radius: 10px; font-size: 16px; font-weight: 700; cursor: pointer; transition: background .2s, opacity .2s }
.btn-primary:hover { background: #165bb7 }
.btn-primary:disabled { opacity: .5; cursor: not-allowed }
.btn-secondary { width: 100%; padding: 12px; background: #e2e8f0; color: #475569; border: none; border-radius: 10px; font-size: 16px; cursor: pointer }
.alert { padding: 12px 16px; border-radius: 10px; font-size: 14px; margin-bottom: 8px }
.alert-danger { background: #fee2e2; color: #991b1b; border-left: 4px solid #dc2626 }
.alert-success { background: #d1fae5; color: #065f46; border-left: 4px solid #0d9f6e }
.alert-warning { background: #fef3c7; color: #92400e; border-left: 4px solid #f59e0b }
.loading { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 16px; color: #64748b }
.spinner { width: 24px; height: 24px; border: 3px solid #e2e8f0; border-top-color: #1a73e8; border-radius: 50%; animation: spin .6s linear infinite }
@keyframes spin { to { transform: rotate(360deg) } }
.demo-hint { text-align: center; font-size: 12px; color: #94a3b8; line-height: 1.6; padding-top: 8px; border-top: 1px solid #e2e8f0 }
.demo-hint strong { color: #64748b }
.toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(100px); background: #1e293b; color: #fff; padding: 12px 24px; border-radius: 10px; font-size: 14px; opacity: 0; transition: all .3s; z-index: 1000; white-space: nowrap }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0) }
@media (min-width: 480px) { .login-card { padding: 40px 32px } }
@media (min-width: 768px) { .role-grid { grid-template-columns: 1fr 1fr 1fr } }