/* Login only: green top band, white middle, green footer. */
.login-page {
  /* Colors */
  --color-primary: #006c3b;
  --color-primary-hover: #00552f;
  --color-primary-soft: #eaf5ef;
  --color-accent: #25875b;
  --color-success: #16805d;
  --color-success-soft: #eaf6ef;
  --color-warning: #a96508;
  --color-warning-soft: #fff4de;
  --color-danger: #c43d4b;
  --color-danger-soft: #fcedef;
  --color-background: #ffffff;
  --color-surface: #ffffff;
  --color-text: #243247;
  --color-text-secondary: #66758a;
  --color-border: #dce5df;
  /* Typography */
  --font-family: "PingFang SC", "Microsoft YaHei", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-title: 28px;
  --font-subtitle: 20px;
  --font-body: 15px;
  --font-caption: 13px;
  --line-height: 1.6;
  /* Radii */
  --radius-control: 10px;
  --radius-card: 16px;
  --radius-pill: 999px;
  /* Spacing */
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-24: 24px;
  --space-32: 32px;
  --space-48: 48px;
  --control-height: 48px;
  /* Shadows */
  --shadow-card: 0 4px 16px rgba(0, 75, 42, .06);
  --shadow-overlay: 0 16px 48px rgba(0, 75, 42, .12);

  font-family: var(--font-family);
  font-size: var(--font-body);
  line-height: var(--line-height);
  color: var(--color-text);
  background: #fff;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;
}
.login-page * { box-sizing: border-box; }
.login-page h1,.login-page h2,.login-page p { margin: 0; }
.login-page button,.login-page input { font-family: inherit; font-size: var(--font-body); line-height: var(--line-height); }
.login-page button { transition: background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease; }
.login-page button:focus-visible,.login-page input:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }
.login-page .login-band-top {
  height: clamp(160px, 23vh, 220px);
  flex: 0 0 auto;
  position: relative;
  overflow: hidden;
  background: radial-gradient(ellipse at 15% 0, #ffffff0b 0, transparent 60%), linear-gradient(115deg, #005d34 0%, #087a49 65%, #1b8956 100%);
}
.login-page .login-band-top::before { content: ""; position: absolute; width: 750px; height: 750px; right: 8%; top: -625px; border: 1px solid #ffffff21; border-radius: 50%; box-shadow: 0 0 0 54px #ffffff04, 0 0 0 55px #ffffff13, 0 0 0 108px #ffffff03, 0 0 0 109px #ffffff0d; }
.login-page .login-band-top::after { content: ""; position: absolute; width: 560px; height: 560px; left: -320px; top: -120px; border: 1px solid #ffffff14; border-radius: 50%; box-shadow: 0 0 0 48px #ffffff03, 0 0 0 49px #ffffff0c; }
.login-page .login-form-area { position: relative; z-index: 1; width: 100%; flex: 1; display: flex; align-items: flex-start; justify-content: center; padding: 0 24px 40px; background: #fff; }
.login-page .login-form-card { width: 100%; max-width: 500px; position: relative; margin-top: -82px; background: #fff; border: 1px solid #e1e9e4; border-radius: var(--radius-card); box-shadow: var(--shadow-overlay); padding: 28px 40px 32px; }
.login-page .login-card-brand { display: flex; flex-direction: column; align-items: center; text-align: center; }
.login-page .login-school-seal { width: 118px; height: 104px; flex: none; background: #fff; }
.login-page .login-school-seal img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center; transform: translate(1.5%, .5%); }
/* Original official wordmark; CSS isolates the Chinese name without redrawing its lettering. */
.login-page .login-school-name {
  display: block;
  width: 230px;
  height: 36px;
  flex: none;
  margin: 0;
  background-color: var(--color-primary);
  -webkit-mask-image: url('/images/school-official-wordmark.png');
  mask-image: url('/images/school-official-wordmark.png');
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 320px 62px;
  mask-size: 320px 62px;
  -webkit-mask-position: -78px -4px;
  mask-position: -78px -4px;
}
.login-page .login-form-card h1 { font-size: var(--font-title); font-weight: 700; line-height: var(--line-height); letter-spacing: -.5px; margin-top: 8px; text-wrap: balance; }
.login-page .login-error { display: flex; gap: 9px; align-items: flex-start; border: 1px solid #eec6cc; border-radius: var(--radius-control); background: var(--color-danger-soft); color: var(--color-danger); font-size: var(--font-caption); padding: var(--space-12); margin-top: var(--space-24); }
.login-page .login-error svg { width: 18px; height: 18px; margin-top: 1px; flex-shrink: 0; }
.login-page .login-field { margin-top: var(--space-24); }
.login-page .login-field label { display: block; font-size: var(--font-body); font-weight: 600; margin: 0 0 var(--space-8); color: var(--color-text); }
.login-page .login-field input { display: block; height: var(--control-height); min-height: var(--control-height); width: 100%; padding: 0 14px; border: 1px solid var(--color-border); border-radius: var(--radius-control); color: var(--color-text); background: #fff; box-shadow: none; outline: none; transition: border-color 160ms ease, box-shadow 160ms ease; }
.login-page .login-field input::placeholder { color: #93a095; }
.login-page .login-field input:hover { border-color: #a5b9ad; }
.login-page .login-field input:focus { border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(0, 108, 59, .12); }
.login-page .login-field input[aria-invalid="true"] { border-color: var(--color-danger); }
.login-page .login-field input[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px rgba(196, 61, 75, .1); }
.login-page .login-field input:disabled { background: #f6f8fa; cursor: wait; }
.login-page .login-password-wrap { position: relative; }
.login-page .login-password-wrap input { padding-right: 56px; }
.login-page .login-toggle-password { position: absolute; right: 1px; top: 1px; display: grid; place-items: center; width: 46px; height: 46px; min-height: 46px; padding: 0; background: transparent; border: 0; border-radius: 9px; color: #74877b; cursor: pointer; }
.login-page .login-toggle-password:hover { background: #eff5f1; color: var(--color-primary); }
.login-page .login-toggle-password svg { width: 20px; height: 20px; }
.login-page .login-options { display: flex; align-items: center; justify-content: space-between; gap: var(--space-12); min-height: var(--control-height); margin-top: var(--space-12); font-size: var(--font-caption); }
.login-page .login-remember { display: inline-flex; align-items: center; gap: var(--space-8); margin: 0; font-size: var(--font-caption); font-weight: 400; color: var(--color-text-secondary); cursor: pointer; }
.login-page .login-remember input { width: 17px; height: 17px; min-height: 17px; margin: 0; padding: 0; accent-color: var(--color-primary); }
.login-page .login-reset-note { color: var(--color-text-secondary); font-size: var(--font-caption); }
.login-page .login-submit { width: 100%; height: var(--control-height); min-height: var(--control-height); display: flex; align-items: center; justify-content: center; gap: var(--space-8); margin-top: var(--space-16); padding: 0 var(--space-24); border: 1px solid var(--color-primary); border-radius: var(--radius-control); color: #fff; background: var(--color-primary); font-size: var(--font-body); font-weight: 600; box-shadow: var(--shadow-card); }
.login-page .login-submit:hover { background: var(--color-primary-hover); border-color: var(--color-primary-hover); }
.login-page .login-submit:active { background: #004527; }
.login-page .login-submit:disabled { opacity: 1; background: #60806e; border-color: #60806e; cursor: wait; }
.login-page .login-submit svg { width: 18px; height: 18px; }
.login-page .login-spinner { width: 17px; height: 17px; border: 2px solid #ffffff50; border-top-color: #fff; border-radius: 50%; animation: login-spin .8s linear infinite; }
.login-page .login-help { border-top: 1px solid #e7eee9; margin-top: var(--space-24); padding-top: 20px; color: var(--color-text-secondary); font-size: var(--font-caption); line-height: var(--line-height); text-align: center; }
.login-page .login-band-bottom { position: relative; overflow: hidden; min-height: 60px; flex: 0 0 60px; display: flex; justify-content: center; align-items: center; padding: 16px 24px; background: linear-gradient(110deg, #00683d, #0d7a49); }
.login-page .login-band-bottom::after { content: ""; position: absolute; width: 500px; height: 500px; right: -80px; top: -330px; border: 1px solid #ffffff10; border-radius: 50%; }
.login-page .login-footer-text { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px 24px; font-size: var(--font-caption); color: #e0eee5; }
.login-page .login-footer-text strong { color: #fff; font-weight: 600; }
.login-page .auth-content { margin-top:24px; }
.login-page .auth-content>h2 { font-size:20px;line-height:1.6;text-align:center;margin:0 0 12px; }
.login-page .auth-content .notice:not(.warn):not(.error) { background:var(--color-primary-soft);color:#356348; }
.login-page .auth-content .notice { margin-bottom:16px; }
.login-page .auth-content .form-footer { margin-top:24px;display:block; }
.login-page .auth-content .login-submit { margin-top:0; }
.login-page .auth-content input { border-radius:10px;min-height:48px; }
.login-page .auth-content input:focus { border-color:var(--color-primary);outline-color:#006c3b22; }
.login-page .auth-content button.primary { background:var(--color-primary);border-color:var(--color-primary);min-height:48px; }
.login-page .auth-content button.primary:hover { background:var(--color-primary-hover); }
.login-page.auth-page .login-school-seal { width:96px;height:86px; }
.login-page.auth-page .login-field { margin-top:16px; }
.login-page.auth-page .login-error { margin-top:0; }
@keyframes login-spin { to { transform: rotate(360deg); } }
@media (max-width: 767.98px) {
  .login-page .login-band-top { height: 150px; }
  .login-page .login-form-area { padding: 0 16px 32px; }
  .login-page .login-form-card { margin-top: -68px; padding: 24px 20px 28px; }
  .login-page .login-school-seal { width: 108px; height: 96px; }
  .login-page .login-form-card h1 { font-size: var(--font-title); letter-spacing: -.7px; }
  .login-page .login-footer-text { column-gap: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .login-page button,.login-page input { transition: none; }
  .login-page .login-spinner { animation-duration: 1.8s; }
}