.login-shell { min-height: 100vh; display: flex; flex-direction: column; background: var(--md-sys-color-surface); }
.login-top-nav { min-height: 76px; padding: 0 clamp(22px, 6vw, 92px); display: flex; align-items: center; justify-content: space-between; background: var(--md-sys-color-surface-container-lowest); border-bottom: 1px solid var(--md-sys-color-outline-variant); }
.login-brand { padding: 0; margin: 0; }
.login-brand .brand-logo { width: 44px; height: 44px; }
.about-link { display: inline-flex; align-items: center; gap: 5px; color: var(--md-sys-color-on-surface-variant); text-decoration: none; font-size: 12px; }
.about-link:hover { color: var(--md-sys-color-primary); }
.about-link .material-symbols-rounded { font-size: 16px; }
.login-layout { flex: 1; width: min(1080px, 100%); margin: 0 auto; padding: 65px 32px 70px; display: grid; grid-template-columns: 1fr minmax(360px, 430px); align-items: center; gap: clamp(48px, 9vw, 130px); }
.login-intro .school-chip { display: flex; width: fit-content; align-items: center; gap: 9px; padding: 8px 13px; border-radius: 100px; background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); font-size: 9px; font-weight: 600; letter-spacing: .8px; }
.login-intro .school-chip-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--md-sys-color-school-orange); }
.login-intro h1 { margin: 24px 0 16px; color: var(--md-sys-color-on-surface); font-size: clamp(36px, 4vw, 52px); font-weight: 600; line-height: 1.3; letter-spacing: -1.2px; }
.login-intro h1 span { color: var(--md-sys-color-primary); }
.login-intro > p { max-width: 465px; margin: 0; color: var(--md-sys-color-on-surface-variant); font-size: 13px; line-height: 1.9; }
.login-school-name { display: flex; align-items: center; gap: 12px; margin-top: 34px; }
.login-school-name img { width: 48px; height: 48px; object-fit: contain; border-radius: 50%; background: white; }
.login-school-name strong, .login-school-name span { display: block; }
.login-school-name strong { color: var(--md-sys-color-on-surface); font-size: 11px; font-weight: 600; }
.login-school-name span { margin-top: 3px; color: var(--md-sys-color-on-surface-variant); font-size: 9px; }
.login-card { padding: 34px 34px 26px; border: 1px solid var(--md-sys-color-outline-variant); border-radius: 24px; background: var(--md-sys-color-surface-container-lowest); box-shadow: 0 14px 36px rgb(44 39 30 / 8%); }
.login-card-icon { display: grid; place-items: center; width: 46px; height: 46px; margin-bottom: 21px; border-radius: 15px; background: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container); font-size: 22px; }
.login-card-kicker { color: var(--md-sys-color-primary); font-size: 9px; font-weight: 600; letter-spacing: 1.5px; }
.login-card h2 { margin: 7px 0 5px; color: var(--md-sys-color-on-surface); font-size: 24px; font-weight: 600; }
.login-card-description { margin: 0; color: var(--md-sys-color-on-surface-variant); font-size: 11px; }
.login-form { margin-top: 24px; }
.login-form label { display: block; margin: 15px 0 7px; color: var(--md-sys-color-on-surface); font-size: 11px; font-weight: 500; }
.login-input-wrap { min-height: 48px; display: flex; align-items: center; gap: 10px; padding: 0 13px; border: 1px solid var(--md-sys-color-outline); border-radius: 10px; background: var(--md-sys-color-surface-container-lowest); color: var(--md-sys-color-on-surface-variant); transition: border-color .15s, box-shadow .15s; }
.login-input-wrap:focus-within { border: 2px solid var(--md-sys-color-primary); padding-inline: 12px; box-shadow: 0 0 0 2px rgb(123 75 0 / 9%); }
.login-input-wrap .material-symbols-rounded { font-size: 19px; }
.login-input-wrap input { min-width: 0; width: 100%; height: 44px; padding: 0; border: 0; outline: 0; background: transparent; color: var(--md-sys-color-on-surface); font: 400 12px 'Sarabun', sans-serif; }
.login-input-wrap input::placeholder { color: var(--md-sys-color-outline); }
.login-submit { width: 100%; min-height: 46px; justify-content: center; margin-top: 24px; font-size: 12px; }
.login-submit .material-symbols-rounded { font-size: 18px; }
.login-help { display: flex; align-items: flex-start; gap: 7px; margin-top: 19px; color: var(--md-sys-color-on-surface-variant); font-size: 9px; line-height: 1.6; }
.login-help .material-symbols-rounded { flex: 0 0 auto; font-size: 16px; }
.login-message { margin-top: 16px; padding: 10px 12px; border-radius: 10px; background: #ffdad6; color: #410002; font-size: 10px; line-height: 1.6; }
.login-footer { min-height: 54px; display: flex; align-items: center; justify-content: space-between; padding: 0 clamp(22px, 6vw, 92px); border-top: 1px solid var(--md-sys-color-outline-variant); color: var(--md-sys-color-on-surface-variant); font-size: 14px; }
.login-footer-colors { display: flex; gap: 4px; }
.login-footer-colors i { width: 12px; height: 12px; border-radius: 50%; background: var(--md-sys-color-school-gray); }
.login-footer-colors i + i { background: var(--md-sys-color-school-orange); }
@media (max-width: 760px) {
  .login-top-nav { min-height: 66px; padding-inline: 18px; }
  .login-brand .brand-logo { width: 38px; height: 38px; }
  .login-layout { grid-template-columns: 1fr; gap: 30px; padding: 38px 20px 48px; }
  .login-intro h1 { margin: 18px 0 12px; font-size: 36px; }
  .login-intro > p { font-size: 11px; }
  .login-school-name { margin-top: 20px; }
  .login-card { width: min(100%, 460px); margin: 0 auto; padding: 28px 24px 22px; }
  .login-footer { padding-inline: 20px; font-size: 12px; }
}
@media (max-width: 380px) {
  .login-intro .school-chip { font-size: 7px; }
  .login-intro h1 { font-size: 32px; }
}