/* Approved panorama login; scoped to the shared, unauthenticated screen. */
#loginScreen {
  position:relative;
  isolation:isolate;
  display:grid;
  grid-template-columns:minmax(0,1fr) clamp(360px,30vw,420px);
  gap:24px;
  align-items:center;
  /* Let the card sit farther right while retaining proportional desktop space. */
  padding:36px max(36px,calc(25vw - 324px)) 36px max(36px,calc(50vw - 684px));
  height:100vh;
  height:100dvh;
  min-height:0;
  overflow:auto;
  background:#7698af;
  color:#263d32;
  font:15px/1.6 "Microsoft YaHei","PingFang SC",sans-serif;
}
#loginScreen::before {
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  background:linear-gradient(90deg,#102c3c26,#102c3c08),url("/static/campus-login.jpg");
  background-size:cover;
  /* Keep the roof visible on wide, short desktop viewports. */
  background-position:50% 20%;
  transform:translateX(-9%) scale(1.3);
  pointer-events:none;
}
#loginScreen .login-copy{align-self:start;padding:6px 0;position:relative;color:#fff;text-shadow:0 2px 12px #12304a55}
#loginScreen .brand-mark{width:46px;height:46px;border-radius:14px;background:#26634f;color:#fff;font-size:24px;font-weight:700;box-shadow:none;text-shadow:none}
#loginScreen .login-copy h1{font-size:34px;line-height:1.3;letter-spacing:1px;margin:24px 0 8px;font-weight:650}
#loginScreen .login-subtitle{font-size:17px;letter-spacing:5px;margin:0}
#loginScreen .login-card {
  width:100%;
  min-width:0;
  justify-self:end;
  border-radius:22px;
  padding:32px 30px 24px;
  background:rgb(250 251 247 / 55%);
  backdrop-filter:blur(16px) saturate(110%);
  -webkit-backdrop-filter:blur(16px) saturate(110%);
  border:1px solid #ffffff66;
  box-shadow:0 16px 48px #102d3426;
}
#loginScreen .login-card h2{font-size:28px;line-height:1.6;letter-spacing:1px;margin:0 0 18px;font-weight:650}
#loginScreen .login-card label{display:block;margin:0 0 20px}
#loginScreen .login-card label span{font-size:14px;font-weight:400;color:inherit;margin-bottom:8px}
#loginScreen .login-card input{height:54px;padding:14px;border:1px solid #d9e1d4;border-radius:12px;background:#ffffffb8;color:inherit;font:inherit}
#loginScreen .login-card input:focus{outline:2px solid #286652;outline-offset:2px;box-shadow:none;background:#ffffffe6}
#loginScreen .primary-btn{height:52px;margin-top:26px;border-radius:12px;background:#286652;color:#fff;font-size:15px;font-weight:600}
#loginScreen .primary-btn:hover{background:#205642}
#loginScreen .login-help{font-size:12px;line-height:1.8;text-align:center;color:#516653;margin-top:18px}
#loginScreen .login-registration{display:block;position:static;margin-top:16px;text-align:center;font-size:11px;line-height:1.6;color:#516653}
#loginScreen .form-error{background:#fff0f0}
@supports not (backdrop-filter:blur(16px)) {
  #loginScreen .login-card{background:rgb(250 251 247 / 92%)}
}
@media(max-width:680px) {
  #loginScreen{grid-template-columns:1fr;gap:24px;padding:24px;align-content:start}
  #loginScreen .login-copy{padding:0}
  #loginScreen .login-copy h1{font-size:28px;margin-top:14px}
  #loginScreen .login-card{max-width:420px;justify-self:center;padding:26px 24px 24px}
}