/* css/login.css */
.login-wrap {
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  background: linear-gradient(135deg, #eef2ff 0%, #f5f3ff 50%, #fdf4ff 100%);
}
.login-card {
  background: #fff;
  border-radius: 20px;
  padding: 40px 32px;
  width: 100%; max-width: 420px;
  box-shadow: var(--shadow-lg);
  text-align: center;
}
.login-logo {
  width: 72px; height: 72px;
  border-radius: 20px;
  background: linear-gradient(135deg, var(--primary), #8b5cf6);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 32px; font-weight: 700;
  margin: 0 auto 16px;
}
.login-card h1 { font-size: 22px; margin-bottom: 4px; }
.login-card .sub { color: var(--text-muted); margin-bottom: 28px; font-size: 14px; }

.login-form { text-align: left; }
.login-form .btn-primary {
  width: 100%; padding: 14px; font-size: 15px; margin-top: 8px;
}

#step-teacher { display: none; }
#step-teacher.show { display: block; }
#step-password.hidden { display: none; }

.teacher-list {
  display: flex; flex-direction: column; gap: 8px;
  max-height: 320px; overflow-y: auto;
  margin-bottom: 16px;
}
.teacher-option {
  padding: 12px 16px; border: 1px solid var(--border);
  border-radius: var(--radius-sm); text-align: left;
  font-weight: 500; transition: all .15s;
  background: var(--surface);
}
.teacher-option:hover {
  border-color: var(--primary);
  background: var(--primary-50);
  color: var(--primary);
}

.switch-link {
  margin-top: 18px; font-size: 13px; color: var(--text-muted);
}