/* 登录页：全屏主视觉（东莞市嘉荣外国语学校）+ 磨砂表单卡。
   换图只改 --login-hero；窄屏 ≤768 用 --login-hero-sm。 */

:root{
  --ink-3:#98a2b3;
  --line-strong:rgba(255,255,255,.34);
  --brand:#7fb2ff;
  --neg:#ffb4ab;
  --neg-soft:rgba(120,20,14,.55);
  --radius:16px;
  --login-bg:#0c1421;
  /* 首屏大图（1920×947）。换图 / 换校区只改这两行 */
  --login-hero: url('/assets/login-hero.jpg');
  --login-hero-sm: url('/assets/login-hero-sm.jpg');
  --login-scrim: linear-gradient(180deg, rgba(12,20,33,.72) 0%, rgba(12,20,33,.55) 100%);
}
*,*::before,*::after{box-sizing:border-box;}
html,body{margin:0;min-height:100%;}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  color:#fff;
  background-color:var(--login-bg);
  font-size:14px;
  -webkit-font-smoothing:antialiased;
}
.login{
  min-height:100vh;
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(360px,.85fr);
  align-items:center;
  gap:clamp(16px,3vw,48px);
  padding:clamp(20px,4vw,56px);
  background-color:var(--login-bg);
  background-image:var(--login-scrim), var(--login-hero);
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}
.login-hero{min-width:0;padding:clamp(8px,2vw,24px);}
.hero-inner{min-width:0;max-width:640px;}
.hero-eyebrow{margin:0 0 12px;font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:rgba(255,255,255,.78);}
.hero-school{
  margin:0;
  font-size:clamp(26px,3.4vw,44px);
  line-height:1.22;
  font-weight:700;
  letter-spacing:.5px;
  text-shadow:0 2px 18px rgba(0,0,0,.45);
  overflow-wrap:anywhere;
}
.hero-app{
  margin:12px 0 0;
  font-size:clamp(16px,1.6vw,22px);
  font-weight:600;
  color:rgba(255,255,255,.96);
  text-shadow:0 1px 10px rgba(0,0,0,.4);
}
.hero-desc{
  margin:10px 0 0;
  font-size:clamp(12px,1.1vw,14px);
  color:rgba(255,255,255,.82);
  letter-spacing:.12em;
  overflow-wrap:anywhere;
}
/* 磨砂半透明表单卡：深色底 + 白色正文，保证与照片的对比度 */
.login-panel{display:flex;align-items:center;justify-content:center;min-width:0;}
.login-card{
  width:100%;
  max-width:372px;
  min-width:0;
  padding:28px 24px 20px;
  border-radius:var(--radius);
  border:1px solid rgba(255,255,255,.22);
  background:rgba(12,20,33,.55);
  -webkit-backdrop-filter:blur(14px) saturate(120%);
  backdrop-filter:blur(14px) saturate(120%);
  box-shadow:0 2px 6px rgba(0,0,0,.25), 0 32px 64px -40px rgba(0,0,0,.8);
}
.login-title{margin:0;font-size:20px;font-weight:700;color:#fff;}
.login-sub{margin:6px 0 18px;font-size:12px;color:rgba(255,255,255,.72);overflow-wrap:anywhere;}
.login-field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px;min-width:0;}
.login-field > span{font-size:12px;color:rgba(255,255,255,.78);}
.login-field input{
  width:100%;
  min-width:0;
  padding:10px 12px;
  border-radius:10px;
  border:1px solid var(--line-strong);
  background:rgba(255,255,255,.1);
  color:#fff;
  font-size:14px;
}
.login-field input::placeholder{color:rgba(255,255,255,.5);}
.login-field input:focus{
  border-color:var(--brand);
  outline:none;
  box-shadow:0 0 0 3px rgba(127,178,255,.28);
  background:rgba(255,255,255,.16);
}
.login-remember{display:flex;align-items:center;gap:8px;font-size:12px;color:rgba(255,255,255,.8);margin:2px 0 12px;}
.login-error{
  margin:0 0 12px;
  padding:8px 10px;
  border-radius:8px;
  border:1px solid var(--neg);
  background:var(--neg-soft);
  color:#ffdbd7;
  font-size:12px;
  overflow-wrap:anywhere;
}
.login-submit{
  width:100%;
  padding:11px 14px;
  border:none;
  border-radius:10px;
  background:#2563eb;
  color:#fff;
  font-size:14px;
  font-weight:600;
  cursor:pointer;
  transition:background .15s;
}
.login-submit:hover{background:#1d4ed8;}
.login-submit:disabled{opacity:.65;cursor:not-allowed;}
.login-foot{margin:14px 0 0;font-size:11px;color:rgba(255,255,255,.6);text-align:center;}
@media (max-width:768px){
  .login{
    background-image:var(--login-scrim), var(--login-hero-sm);
    grid-template-columns:minmax(0,1fr);
    grid-template-rows:auto auto;
    align-content:center;
    gap:18px;
    padding:22px 18px 28px;
  }
  .login-hero{padding:0;}
  .hero-eyebrow{font-size:11px;margin-bottom:8px;}
  .hero-desc{letter-spacing:.06em;}
  .login-panel{width:100%;}
  .login-card{max-width:420px;}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none !important;}
}