/* The previous login composition is isolated from the public editorial pages. */
.login-body { color: #071a38; background: #071a38; }
.login-body::before, .login-body::after { content: none; }
.login-body-school {
  background: linear-gradient(105deg, #071a3861, #071a3814 44%, #ffffffb8),
    url('../media/login-school-v35.webp') center / cover no-repeat fixed;
}
.login-body-professional {
  background: linear-gradient(105deg, #071a385c, #071a3838 48%, #071a3885),
    url('../media/login-professional-v35.webp') center / cover no-repeat fixed;
}
.login-body .site-header, .login-body .chapter-nav { display: none; }
.login-body #main-content { min-height: calc(100svh - 75px); display: grid; align-items: center; }
.simple-login-wrap { width: min(1120px, calc(100% - 48px)); margin: 24px auto; }
.simple-login-back { display: inline-flex; align-items: center; min-height: 44px; margin-bottom: 8px; padding: 0 12px; border-radius: 8px; background: #ffffffed; color: #14283e; font-size: 14px; font-weight: 650; }
.simple-login-back:hover { background: #fff; color: #855c21; }
.login-stage { display: grid; grid-template-columns: 1.05fr 1fr; min-height: 660px; overflow: hidden; border: 1px solid #ffffff70; border-radius: 30px; background: #fff; box-shadow: 0 28px 80px #071a3845; }
.login-story { position: relative; display: flex; min-width: 0; flex-direction: column; padding: 36px; color: #fff; }
.login-story-school { background: linear-gradient(180deg, #071a388a, #071a38e6), url('../media/login-school-panel-v39.webp') center / cover; }
.login-story-professional { background: linear-gradient(180deg, #071a3880, #071a38eb), url('../media/login-professional-panel-v39.webp') center / cover; }
.login-story-brand { display: flex; align-items: center; gap: 14px; color: #fff; }
.simple-login-mark { display: grid; width: 54px; height: 54px; place-items: center; flex: 0 0 auto; border: 1px solid #e8ba6470; border-radius: 14px; background: #fff; }
.simple-login-mark img { width: 46px; height: 43px; object-fit: contain; }
.login-story-brand > span:last-child { display: grid; gap: 2px; }
.login-story-brand strong { color: #fff; font-size: 22px; }
.login-story-brand small { color: #e3e8ef; font-size: 13px; }
.login-story-copy { margin: 36px 0 28px; }
.login-body .eyebrow { margin: 0 0 10px; color: #855c21; font-size: 12px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.login-story-copy .eyebrow { color: #f2cf85; }
.login-story-copy h2 { margin: 0; color: #fff; font-family: 'Bahnschrift SemiCondensed', 'Aptos Display', sans-serif; font-size: clamp(32px, 3.1vw, 46px); font-weight: 700; letter-spacing: -.035em; line-height: 1.08; }
.login-story-copy > p:last-child { margin: 16px 0 0; color: #e3e8ef; font-size: 16px; line-height: 1.6; }
.login-story-window { margin: auto 0 22px; overflow: hidden; border: 1px solid #ffffff70; border-radius: 18px; background: #fffffffa; box-shadow: 0 18px 36px #0003; transform: rotate(-1deg); }
.login-story-window-head { display: flex; align-items: center; gap: 5px; padding: 12px; background: #edf1f6; border-bottom: 1px solid #14283e12; }
.login-story-window-head > span { width: 6px; height: 6px; border-radius: 50%; background: #ccd5e1; }
.login-story-window-head > span:first-child { background: #b98b40; }
.login-story-window-head b { margin-left: auto; font-size: 11px; color: #53647a; }
.login-story-school-status { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 8px; margin: 12px; padding: 12px; border-radius: 10px; background: #faf2df; color: #071a38; }
.login-story-school-status span { grid-column: 1 / -1; color: #855c21; font-size: 11px; }
.login-story-school-status strong { font-size: 14px; }
.login-story-school-status em { align-self: center; font-size: 12px; font-style: normal; color: #855c21; }
.login-story-line { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; margin: 0 12px; padding: 10px 0; border-top: 1px solid #14283e12; color: #071a38; }
.login-story-line > i { display: grid; width: 25px; height: 25px; place-items: center; border: 1px solid #bcc8d6; border-radius: 50%; font-size: 12px; font-style: normal; }
.login-story-line.is-active > i { background: #173d6c; color: #fff; border-color: #173d6c; }
.login-story-line > span { display: grid; gap: 2px; }
.login-story-line b { font-size: 13px; }
.login-story-line small { color: #53647a; font-size: 11px; }
.login-story-line > strong { color: #173d6c; font-size: 15px; }
.login-story-professional-window { padding-bottom: 12px; transform: rotate(1deg); }
.login-role-card { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: center; margin: 12px 12px 0; padding: 14px; border: 1px solid #14283e15; border-radius: 12px; color: #071a38; background: #f7f8fb; }
.login-role-card > i { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 10px; background: #edf1f6; color: #173d6c; }
.login-role-card svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.login-role-card > span { display: grid; gap: 3px; }
.login-role-card b { font-size: 14px; }
.login-role-card small { color: #53647a; font-size: 12px; }
.login-story-foot { display: flex; align-items: center; gap: 10px; margin: 0; color: #e3e8ef; font-size: 12px; }
.login-story-foot > span { width: 7px; height: 7px; border-radius: 50%; background: #e8ba64; box-shadow: 0 0 0 4px #e8ba6426; }
.simple-login-card { min-width: 0; display: flex; flex-direction: column; justify-content: center; padding: clamp(28px, 3.5vw, 50px); background: #fff; }
.login-mobile-brand { display: none; }
.simple-login-head { margin-bottom: 26px; }
.simple-login-head h1 { margin: 0; color: #071a38; font-family: 'Bahnschrift SemiCondensed', 'Aptos Display', sans-serif; font-size: clamp(30px, 2.7vw, 40px); font-weight: 700; letter-spacing: -.03em; line-height: 1.12; }
.simple-login-head > p:last-child { margin: 12px 0 0; font-size: 16px; line-height: 1.6; color: #53647a; }
.login-stage .simple-login-form { display: grid; gap: 18px; }
.login-stage .simple-field { display: grid; gap: 8px; }
.login-stage .simple-field > label { color: #33465f; font-size: 14px; font-weight: 700; }
.login-stage .simple-field input { width: 100%; min-width: 0; min-height: 52px; margin: 0; padding: 13px 14px; border: 1px solid #b7c4d3; border-radius: 12px; background: #f8fafc; color: #071a38; font: inherit; font-size: 16px; }
.login-stage .simple-field input:focus { outline: 3px solid #b98b4033; outline-offset: 1px; border-color: #855c21; }
.login-stage .simple-password-field { display: flex; align-items: stretch; }
.login-stage .simple-password-field input { padding: 13px 14px !important; border-radius: 12px 0 0 12px; border-right: 0; }
.login-stage .simple-password-field button { position: static; flex: 0 0 auto; min-height: 52px; padding: 0 13px; border: 1px solid #b7c4d3; border-radius: 0 12px 12px 0; background: #edf1f6; color: #14283e; font-size: 13px; font-weight: 650; }
.login-stage .simple-login-button { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 52px; width: 100%; padding: 13px 20px; border: 0; border-radius: 12px; background: #071a38; color: #fff; font: inherit; font-size: 16px; font-weight: 700; cursor: pointer; }
.login-stage .simple-login-button:hover { background: #173d6c; }
.login-body-school .simple-login-button { background: #916120; }
.login-body-school .simple-login-button:hover { background: #785018; }
.simple-parent-access { display: grid; gap: 5px; margin-top: 24px; padding: 15px; border: 1px solid #b98b4060; border-radius: 12px; background: #faf2df; color: #664515; }
.simple-parent-access span { font-size: 12px; }
.simple-parent-access strong { font-size: 14px; line-height: 1.5; }
.simple-parent-access i { font-style: normal; }
.simple-login-help { margin: 16px 0 0; color: #53647a; font-size: 13px; line-height: 1.6; }
.simple-login-switch { display: grid; gap: 5px; margin-top: 18px; padding-top: 18px; border-top: 1px solid #14283e18; font-size: 13px; color: #53647a; }
.simple-login-switch a { color: #173d6c; font-weight: 650; text-decoration: underline; text-underline-offset: 3px; }
.login-stage .form-alert, .login-stage .field-error { color: #982e2e; }
.login-legal-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 28px; padding: 16px 24px; color: #33465f; background: #ffffffed; font-size: 12px; }
.login-legal-footer nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 20px; }
.login-legal-footer a { padding: 5px 0; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 1000px) {
  .login-stage { grid-template-columns: 1fr 1fr; }
  .login-story { padding: 28px; }
  .simple-login-card { padding: 28px; }
}
@media (max-width: 760px) {
  .login-body-school, .login-body-professional { background-attachment: scroll; }
  .simple-login-wrap { width: min(540px, calc(100% - 32px)); margin: 16px auto; }
  .login-stage { grid-template-columns: 1fr; min-height: 0; border-radius: 22px; }
  .login-story { display: none; }
  .simple-login-card { padding: 30px; }
  .login-mobile-brand { display: block; width: 200px; margin-bottom: 28px; }
  .login-mobile-brand img { width: 100%; height: auto; }
  .simple-login-head h1 { font-size: 32px; }
}
@media (max-width: 380px) {
  .simple-login-wrap { width: calc(100% - 20px); }
  .simple-login-card { padding: 24px 20px; }
  .simple-login-back { font-size: 13px; }
  .simple-login-head h1 { font-size: 28px; }
}