:root {
  --login-ink: #0a1d31;
  --login-muted: #6b7b8b;
  --login-blue: #1768e5;
  --login-blue-dark: #0e54bd;
  --login-line: #dce5ee;
  --login-navy: #071a2e;
  --login-danger: #c23b4b;
}

html[data-bs-theme="light"] body:has(.login-page) { margin: 0; color: var(--login-ink); background: #fff; font-family: "Inter", sans-serif; }
body:has(.login-page) .back-top { display: none; }
.login-page { display: grid; grid-template-columns: minmax(420px, .78fr) minmax(600px, 1.22fr); min-height: 100svh; background: #fff; }
.login-panel { display: flex; align-items: center; justify-content: center; min-width: 0; padding: 44px clamp(32px, 5vw, 82px); }
.login-panel__inner { width: 100%; max-width: 470px; }
.school-brand { display: flex; align-items: center; gap: 13px; margin-bottom: clamp(54px, 8vh, 92px); }
.school-brand__mark { display: grid; width: 52px; height: 52px; place-items: center; overflow: hidden; border: 1px solid #e1e8ef; border-radius: 14px; background: #fff; box-shadow: 0 8px 22px rgba(18,54,86,.09); }
.school-brand__mark img { display: block; width: 40px; height: 40px; object-fit: contain; }
.school-brand>div:last-child { display: flex; min-width: 0; flex-direction: column; }
.school-brand span { color: #8896a4; font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.school-brand strong { overflow: hidden; color: #182f44; font-family: "Instrument Sans", sans-serif; font-size: 15px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.login-heading { margin-bottom: 31px; }
.login-kicker { display: inline-flex; align-items: center; gap: 7px; margin-bottom: 18px; color: var(--login-blue); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.login-kicker i { font-size: 14px; }
.login-heading h1 { margin: 0 0 9px; color: var(--login-ink); font-family: "Instrument Sans", sans-serif; font-size: clamp(36px, 4vw, 46px); font-weight: 700; line-height: 1.05; letter-spacing: -.035em; }
.login-heading p { margin: 0; color: var(--login-muted); font-size: 14px; }
.login-messages { display: grid; gap: 9px; margin-bottom: 20px; }
.login-alert { display: grid; grid-template-columns: 18px 1fr 24px; gap: 9px; align-items: center; padding: 12px 13px; border: 1px solid #cfe0f7; border-radius: 11px; color: #245689; background: #eff6ff; font-size: 11px; line-height: 1.5; }
.login-alert--error { border-color: #f2cdd2; color: #982d3b; background: #fff2f3; }
.login-alert--success { border-color: #bfe5d7; color: #167054; background: #effaf6; }
.login-alert button { display: grid; width: 24px; height: 24px; place-items: center; border: 0; border-radius: 6px; color: inherit; background: transparent; }
.login-form { display: grid; gap: 21px; }
.login-field label { margin: 0; color: #283f54; font-size: 12px; font-weight: 700; }
.login-label-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 9px; }
.login-field:not(:has(.login-label-row))>label { display: block; margin-bottom: 9px; }
.login-label-row a { color: var(--login-blue); font-size: 11px; font-weight: 700; }
.login-label-row a:hover { color: var(--login-blue-dark); text-decoration: underline; }
.login-input { position: relative; display: flex; align-items: center; }
.login-input>i { position: absolute; left: 15px; z-index: 1; color: #8393a3; font-size: 16px; pointer-events: none; }
.login-input input { width: 100%; height: 53px; padding: 0 48px 0 43px; border: 1px solid var(--login-line); border-radius: 12px; outline: 0; color: var(--login-ink); background: #fbfcfe; font-size: 13px; transition: border-color .2s, box-shadow .2s, background .2s; }
.login-input input::placeholder { color: #a4afba; }
.login-input input:hover { border-color: #c3d0dc; background: #fff; }
.login-input input:focus { border-color: #6ea2ee; background: #fff; box-shadow: 0 0 0 4px rgba(23,104,229,.11); }
.login-field.has-error .login-input input { border-color: #df8290; }
.login-error { display: flex; gap: 5px; align-items: center; margin-top: 7px; color: var(--login-danger); font-size: 10px; }
.password-toggle { position: absolute; right: 8px; display: grid; width: 37px; height: 37px; place-items: center; border: 0; border-radius: 9px; color: #778999; background: transparent; font-size: 15px; }
.password-toggle:hover,.password-toggle:focus-visible { color: var(--login-blue); background: #edf4ff; outline: 0; }
.login-submit { position: relative; display: flex; width: 100%; height: 55px; align-items: center; justify-content: center; gap: 11px; margin-top: 3px; overflow: hidden; border: 0; border-radius: 12px; color: #fff; background: var(--login-blue); box-shadow: 0 12px 28px rgba(23,104,229,.24); font-size: 13px; font-weight: 700; transition: background .2s, transform .2s, box-shadow .2s; }
.login-submit:before { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg,transparent 25%,rgba(255,255,255,.15) 50%,transparent 75%); transform: translateX(-100%); transition: transform .55s; }
.login-submit:hover { background: var(--login-blue-dark); box-shadow: 0 16px 32px rgba(23,104,229,.3); transform: translateY(-1px); }
.login-submit:hover:before { transform: translateX(100%); }
.login-submit:focus-visible { outline: 3px solid rgba(23,104,229,.25); outline-offset: 3px; }
.login-submit:disabled { cursor: wait; opacity: .82; transform: none; }
.login-spinner { display: none; width: 17px; height: 17px; border: 2px solid rgba(255,255,255,.35); border-top-color: #fff; border-radius: 50%; animation: loginSpin .7s linear infinite; }
.login-submit.is-loading>i { display: none; }.login-submit.is-loading .login-spinner { display: block; }
@keyframes loginSpin { to { transform: rotate(360deg); } }
.login-help { margin-top: 27px; padding: 16px 17px; border: 1px solid #e4eaf0; border-radius: 12px; background: #f7f9fb; text-align: center; }
.login-help span { display: inline-flex; gap: 6px; align-items: center; color: #4a6175; font-size: 11px; font-weight: 700; }
.login-help p { margin: 3px 0 0; color: #8795a3; font-size: 10px; }
.login-help p a { color: var(--login-blue); font-weight: 700; }
.login-help p a:hover { text-decoration: underline; }
.login-footer { display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: clamp(34px, 6vh, 62px); color: #98a4af; font-size: 9px; }
.login-footer img { width: 62px; height: auto; filter: grayscale(.15); }

.login-showcase { position: relative; display: flex; min-width: 0; flex-direction: column; justify-content: center; overflow: hidden; padding: clamp(55px, 7vw, 100px); color: #fff; background: radial-gradient(circle at 80% 15%,rgba(49,132,239,.2),transparent 32%),linear-gradient(145deg,#071a2e,#092847 64%,#0c3156); }
.login-showcase__grid { position: absolute; inset: 0; opacity: .13; background-image: linear-gradient(rgba(131,182,232,.18) 1px,transparent 1px),linear-gradient(90deg,rgba(131,182,232,.18) 1px,transparent 1px); background-size: 54px 54px; mask-image: linear-gradient(to bottom,#000,transparent); }
.login-showcase__orb { position: absolute; border-radius: 50%; filter: blur(2px); pointer-events: none; }
.login-showcase__orb--one { top: -170px; right: -160px; width: 440px; aspect-ratio: 1; border: 1px solid rgba(92,167,244,.2); box-shadow: inset 0 0 80px rgba(54,137,224,.08); }
.login-showcase__orb--two { bottom: -220px; left: -120px; width: 480px; aspect-ratio: 1; background: rgba(23,104,229,.07); }
.showcase-copy { position: relative; z-index: 2; max-width: 690px; margin-bottom: 44px; }
.showcase-eyebrow { display: inline-flex; gap: 8px; align-items: center; margin-bottom: 16px; color: #7eb7f7; font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.showcase-copy h2 { max-width: 700px; margin: 0 0 16px; color: #fff; font-family: "Instrument Sans", sans-serif; font-size: clamp(34px, 3.5vw, 51px); font-weight: 700; line-height: 1.12; letter-spacing: -.04em; }
.showcase-copy p { max-width: 620px; margin: 0; color: #9db3c8; font-size: 14px; line-height: 1.7; }
.workspace-preview { position: relative; z-index: 2; width: min(750px,100%); border: 1px solid rgba(170,205,238,.18); border-radius: 17px; overflow: hidden; background: #f6f8fb; box-shadow: 0 40px 90px rgba(0,0,0,.3); transform: perspective(1300px) rotateY(-1.5deg) rotateX(1deg); }
.workspace-preview__topbar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 36px; padding: 0 14px; border-bottom: 1px solid #e2e8ee; color: #748495; background: #fff; }
.workspace-preview__topbar>div { display: flex; gap: 5px; }.workspace-preview__topbar>div span { width: 6px; height: 6px; border-radius: 50%; background: #d7dfe7; }.workspace-preview__topbar small { font-size: 7px; }.workspace-preview__topbar>i { justify-self: end; font-size: 9px; }
.workspace-preview__body { display: grid; grid-template-columns: 50px 1fr; min-height: 330px; }
.workspace-preview aside { display: flex; flex-direction: column; align-items: center; gap: 20px; padding: 15px 6px; color: #7891aa; background: #0b2743; }
.workspace-preview aside b { display: grid; width: 28px; aspect-ratio: 1; place-items: center; margin-bottom: 6px; border-radius: 8px; color: #fff; background: var(--login-blue); font-family: "Instrument Sans"; font-size: 11px; }
.workspace-preview aside i { font-size: 11px; }.workspace-preview aside i.is-active { display: grid; width: 26px; aspect-ratio: 1; place-items: center; border-radius: 7px; color: #fff; background: rgba(70,145,224,.25); }
.workspace-content { min-width: 0; padding: 19px; color: #20364a; }
.workspace-welcome { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; }.workspace-welcome>div { display: flex; flex-direction: column; }.workspace-welcome small { color: #8c99a6; font-size: 7px; }.workspace-welcome strong { font-size: 13px; }.workspace-welcome>span { display: grid; width: 28px; aspect-ratio: 1; place-items: center; border-radius: 50%; color: #fff; background: #da8d5e; font-size: 7px; font-weight: 700; }
.workspace-metrics { display: grid; grid-template-columns: repeat(3,1fr); gap: 9px; }.workspace-metrics article { display: flex; gap: 9px; align-items: center; padding: 11px; border: 1px solid #e3eaf0; border-radius: 10px; background: #fff; }.workspace-metrics article>i { display: grid; width: 31px; aspect-ratio: 1; place-items: center; flex: none; border-radius: 8px; color: #1768e5; background: #e9f2ff; font-size: 11px; }.workspace-metrics article:nth-child(2)>i { color: #168364; background: #e5f7f1; }.workspace-metrics article:nth-child(3)>i { color: #dc7134; background: #fff0e7; }.workspace-metrics article>div { position: relative; display: flex; min-width: 0; flex-direction: column; }.workspace-metrics small { color: #8b98a5; font-size: 6px; }.workspace-metrics strong { font-size: 13px; }.workspace-metrics em { color: #168364; font-size: 6px; font-style: normal; }
.workspace-bottom { display: grid; grid-template-columns: 1.4fr .8fr; gap: 9px; margin-top: 9px; }.workspace-chart,.workspace-activity { min-height: 171px; padding: 14px; border: 1px solid #e3eaf0; border-radius: 10px; background: #fff; }.workspace-chart>div:first-child { display: flex; justify-content: space-between; }.workspace-chart strong,.workspace-activity>strong { font-size: 8px; }.workspace-chart>div:first-child span { padding: 3px 5px; border-radius: 4px; color: #7b8996; background: #f2f5f7; font-size: 5px; }.workspace-bars { display: flex; gap: 15px; align-items: end; height: 100px; margin: 11px 7px 0; border-bottom: 1px solid #e6ebef; background: repeating-linear-gradient(to bottom,transparent 0,transparent 32px,#edf1f4 33px); }.workspace-bars span { flex: 1; border-radius: 4px 4px 0 0; background: linear-gradient(#5a9aed,#2872d7); }.workspace-days { display: flex; justify-content: space-around; margin-top: 5px; color: #9aa5af; font-size: 5px; }.workspace-activity>div { display: flex; gap: 7px; align-items: center; margin-top: 18px; }.workspace-activity>div>i { display: grid; width: 25px; aspect-ratio: 1; place-items: center; border-radius: 7px; color: #168364; background: #e6f6f1; font-size: 8px; }.workspace-activity>div:nth-child(3)>i { color: #1768e5; background: #e9f2ff; }.workspace-activity p { display: flex; flex-direction: column; margin: 0; font-size: 7px; font-weight: 700; }.workspace-activity small { color: #96a2ad; font-size: 5px; font-weight: 400; }
.showcase-trust { position: relative; z-index: 2; display: flex; gap: 11px; align-items: center; margin-top: 32px; }.showcase-trust>i { display: grid; width: 39px; aspect-ratio: 1; place-items: center; border: 1px solid rgba(121,180,238,.25); border-radius: 11px; color: #80baff; background: rgba(57,127,198,.13); }.showcase-trust>span { display: flex; flex-direction: column; }.showcase-trust strong { color: #dbe8f5; font-size: 10px; }.showcase-trust small { color: #7690a9; font-size: 8px; }

@media (max-width: 1050px) { .login-page { grid-template-columns: minmax(390px,.9fr) minmax(480px,1.1fr); }.login-panel { padding-inline: 42px; }.login-showcase { padding: 55px 45px; }.workspace-metrics article { padding: 9px; }.workspace-metrics article>i { display: none; } }
@media (max-width: 820px) { .login-page { display: block; min-height: 100svh; background: radial-gradient(circle at 90% 0,rgba(23,104,229,.09),transparent 34%),#f5f8fb; }.login-showcase { display: none; }.login-panel { min-height: 100svh; padding: 38px 24px; }.login-panel__inner { max-width: 490px; padding: 28px; border: 1px solid #e1e8ef; border-radius: 20px; background: #fff; box-shadow: 0 25px 60px rgba(16,49,80,.1); }.school-brand { margin-bottom: 52px; }.login-footer { margin-top: 40px; } }
@media (max-width: 520px) { .login-panel { align-items: flex-start; padding: 0; background: #fff; }.login-panel__inner { max-width: none; min-height: 100svh; padding: 28px 21px; border: 0; border-radius: 0; box-shadow: none; }.school-brand { margin-bottom: 58px; }.school-brand__mark { width: 46px; height: 46px; border-radius: 12px; }.school-brand__mark img { width: 35px; height: 35px; }.login-heading h1 { font-size: 38px; }.login-help { padding-inline: 12px; } }
@media (prefers-reduced-motion: reduce) { .login-submit,.login-submit:before { transition: none; }.login-submit:hover { transform: none; }.login-spinner { animation-duration: 1.4s; } }