:root { --ink: #172e43; --muted: #586b7b; --teal: #087e80; }
body { margin: 0; min-height: 100vh; background: #f2f5f7; color: var(--ink); font-family: "Segoe UI", Arial, sans-serif; }
a { color: #076e70; text-underline-offset: 4px; }
.login-shell { width: min(1180px, calc(100% - 64px)); margin: 0 auto; padding: 32px 0 24px; }
.login-header { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 32px; }
.school-brand { display: flex; gap: 12px; align-items: center; text-decoration: none; color: var(--ink); min-width: 0; }
.school-brand img { object-fit: contain; background: white; padding: 4px; border-radius: 12px; flex-shrink: 0; }
.school-brand strong { display: block; font-size: .9rem; overflow-wrap: anywhere; }
.school-brand small { display: block; color: var(--muted); font-size: .78rem; margin-top: 3px; }
.home-link { text-decoration: none; font-size: .84rem; font-weight: 600; flex-shrink: 0; }
.home-link span { margin-left: 8px; }
.login-layout { display: grid; grid-template-columns: 1fr 1fr; border-radius: 24px; overflow: hidden; background: white; box-shadow: 0 12px 45px #172e430a; min-height: 640px; }
.welcome-panel { background: var(--ink); color: white; padding: 56px 48px 36px; position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; gap: 36px; }
.welcome-panel::before, .welcome-panel::after { content: ""; position: absolute; width: 330px; height: 330px; border: 55px solid #244757; border-radius: 50%; pointer-events: none; }
.welcome-panel::before { right: -220px; top: -140px; }
.welcome-panel::after { right: -250px; bottom: -220px; width: 500px; height: 500px; border-color: #1d3b4c; }
.welcome-panel > * { position: relative; z-index: 1; }
.eyebrow { color: #a5e4df; text-transform: uppercase; letter-spacing: .17em; font-size: .7rem; font-weight: 700; margin-bottom: 24px; }
.welcome-copy h1 { font-size: clamp(2.2rem, 4vw, 3.3rem); font-weight: 650; letter-spacing: -.045em; line-height: 1.12; margin: 0 0 22px; }
.welcome-description { color: #d2e0e8; font-size: .95rem; line-height: 1.8; max-width: 355px; margin: 0; }
.journey { display: grid; gap: 24px; }
.journey > div { display: flex; align-items: center; gap: 16px; }
.journey-number { display: grid; place-items: center; height: 38px; width: 38px; border: 1px solid #54737d; border-radius: 11px; color: #a5e4df; font-size: .76rem; flex-shrink: 0; }
.journey p { margin: 0; }
.journey strong { display: block; font-size: .88rem; font-weight: 600; }
.journey small { color: #bdced8; display: block; margin-top: 3px; font-size: .79rem; }
.welcome-note { border-top: 1px solid #3b5365; padding-top: 22px; margin: 0; font-size: .76rem; line-height: 1.7; color: #bdced8; }
.signin-panel { display: grid; align-items: center; padding: 48px; min-width: 0; }
.signin-content { width: 100%; max-width: 390px; margin: auto; }
.portal-label { display: inline-flex; gap: 8px; align-items: center; background: #eaf5f1; color: #176858; padding: 7px 12px; border-radius: 30px; font-size: .72rem; font-weight: 600; margin-bottom: 24px; }
.portal-label > span { width: 6px; height: 6px; border-radius: 50%; background: #238572; }
.signin-content h2 { font-size: 2rem; font-weight: 700; letter-spacing: -.04em; margin-bottom: 10px; }
.signin-description { font-size: .9rem; color: var(--muted); margin-bottom: 32px; }
.field-group { margin-bottom: 24px; }
.field-group label { display: block; font-size: .85rem; font-weight: 600; margin-bottom: 9px; }
.field-group input { width: 100%; min-width: 0; min-height: 50px; border: 1px solid #cdd8e0; border-radius: 10px; padding: 12px 14px; font-size: .9rem; color: var(--ink); background: #fff; }
.field-group input::placeholder { color: #73818d; }
.field-group input:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px #087e801c; }
.field-hint { font-size: .76rem; color: var(--muted); margin: 9px 0 0; line-height: 1.6; }
.password-field { position: relative; }
.password-field input { padding-right: 72px; }
.password-toggle { position: absolute; right: 5px; top: 5px; min-width: 58px; min-height: 40px; border: 0; border-radius: 7px; background: transparent; color: #076e70; font-size: .78rem; font-weight: 600; }
.password-toggle:hover { background: #edf6f5; }
.signin-button { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: 50px; border: 1px solid var(--teal); background: var(--teal); border-radius: 10px; color: white; padding: 12px 18px; font-size: .9rem; font-weight: 600; }
.signin-button:hover { background: #06676a; }
.signin-button:disabled { opacity: .75; cursor: wait; }
.login-feedback { background: #fff2ef; border: 1px solid #efc9c3; border-radius: 10px; color: #99372a; padding: 12px 14px; margin-bottom: 20px; font-size: .84rem; line-height: 1.6; }
.registration-link { border-top: 1px solid #e4ebef; text-align: center; padding-top: 24px; margin-top: 30px; font-size: .84rem; }
.registration-link p { color: var(--muted); margin-bottom: 8px; }
.registration-link a { font-weight: 600; text-decoration: none; }
.registration-link a:hover, .home-link:hover { text-decoration: underline; }
.login-footer { text-align: center; color: var(--muted); font-size: .75rem; padding-top: 28px; }
a:focus-visible, button:focus-visible { outline: 3px solid #36a8aa; outline-offset: 4px; }
@media (min-width: 1400px) { .login-shell { padding-top: 54px; } }
@media (max-width: 991px) { .welcome-panel { padding: 40px 30px; } .signin-panel { padding: 40px 30px; } }
@media (max-width: 767px) {
  .login-shell { width: min(560px, calc(100% - 32px)); padding-top: 22px; }
  .login-header { gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }
  .school-brand strong { font-size: .8rem; }
  .home-link { font-size: .75rem; }
  .login-layout { grid-template-columns: 1fr; border-radius: 18px; min-height: 0; }
  .welcome-panel { padding: 28px; gap: 0; }
  .eyebrow { margin-bottom: 14px; }
  .welcome-copy h1 { font-size: 2rem; margin-bottom: 14px; }
  .welcome-description { font-size: .86rem; max-width: none; }
  .journey, .welcome-note { display: none; }
  .signin-panel { padding: 32px 24px; }
  .signin-content h2 { font-size: 1.75rem; }
}