.login-page {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  background: radial-gradient(circle at 15% 18%, #e5edff 0, transparent 28%), radial-gradient(circle at 83% 85%, #f7eaff 0, transparent 26%), #f8f9fe;
}

.login-card {
  width: min(920px, 100%);
  min-height: 540px;
  background: #fff;
  border: 1px solid #e5eaf4;
  border-radius: 22px;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  box-shadow: 0 20px 55px #51628b1c;
}

.login-intro {
  padding: 56px 12%;
  color: #fff;
  background: linear-gradient(145deg, #657eef, #8f76df);
  position: relative;
  overflow: hidden;
}

.login-intro::before,.login-intro::after { content: ""; position: absolute; border-radius: 50%; background: #ffffff1c; }
.login-intro::before { width: 290px; height: 290px; right: -105px; bottom: -120px; }
.login-intro::after { width: 180px; height: 180px; left: -95px; top: -62px; }
.login-intro .brand { color: #fff; padding: 0; position: relative; z-index: 1; }
.login-intro .brand-mark { background: #fff; color: #6577df; }
.login-intro h1 { font-size: 31px; line-height: 1.4; margin: 78px 0 12px; position: relative; z-index: 1; }
.login-intro p { margin: 0; color: #e9ecff; line-height: 1.8; font-size: 14px; position: relative; z-index: 1; }

.login-form { padding: 50px 12%; }
.login-form h2 { margin: 0 0 7px; font-size: 23px; }
.login-form > p { color: #8490a5; font-size: 13px; margin: 0 0 26px; }
.auth-mode-switch,
.role-switch { display: flex; gap: 7px; padding: 4px; background: #f3f5fb; border-radius: 9px; margin-bottom: 14px; }
.auth-mode-switch button,
.role-switch button { flex: 1; border: 0; background: transparent; border-radius: 6px; padding: 8px; color: #77849a; cursor: pointer; font-size: 13px; font-weight: 700; }
.auth-mode-switch button.active,
.role-switch button.active { color: #5874ed; background: #fff; box-shadow: 0 1px 5px #6f7d9b1f; }
.login-form label { margin-top: 15px; }
.login-form input { height: 42px; }
.parent-only { display: none; }
.login-page.parent-login .parent-only { display: block; }
.register-only { display: none; }
.login-page.register-mode .register-only { display: block; }
.login-page.register-mode .login-only { display: none; }
.login-page.register-mode .parent-only { display: block; }
.parent-task-action { display: none; }
body.parent-mode .parent-task-action { display: inline-flex; }
.login-error { color: #e06b75; min-height: 18px; font-size: 12px; margin: 11px 0 0; }
.login-submit { width: 100%; margin-top: 12px; padding: 12px; font-size: 14px; }
.demo-account { font-size: 12px; color: #8c97aa; line-height: 1.8; margin: 18px 0 0; padding: 10px; background: #f7f8fc; border-radius: 7px; }

body.parent-mode .student-only,
body.parent-mode .check,
body.parent-mode .timer-action,
body.parent-mode .delete-task { display: none !important; }
body.parent-mode .view-heading h2::after { content: "（家长查看）"; color: #8592a8; font-size: 13px; font-weight: 400; margin-left: 7px; }
body.parent-mode .topbar h1 { font-size: 0; }
body.parent-mode .topbar h1::after { content: "家长您好"; font-size: 26px; }

@media (max-width: 700px) {
  .login-card { grid-template-columns: 1fr; }
  .login-intro { padding: 32px; min-height: 205px; }
  .login-intro h1 { margin-top: 36px; font-size: 24px; }
  .login-form { padding: 30px; }
}