/* Desktop authentication for student, teacher and administrator accounts. */
.auth-page { min-width:1024px; min-height:100vh; display:flex; flex-direction:column; color:#293c50; background:radial-gradient(ellipse at 15% 47%,#eaf0f7 0%,transparent 54%),#f6f8fb; }
.auth-header { width:min(1200px,calc(100% - 96px)); margin-inline:auto; display:flex; align-items:center; justify-content:space-between; min-height:92px; gap:30px; }
.auth-brand { display:flex; align-items:center; gap:23px; }
.auth-brand>img { width:133px; height:auto; }
.auth-brand-divider { height:32px; width:1px; background:#dce3eb; }
.auth-brand>span:last-child { color:#344a60; font-size:17px; font-weight:550; line-height:1.6; }
.auth-brand small { display:block; color:#8a99a9; font-size:12px; letter-spacing:1px; font-weight:400; }
.auth-home { display:flex; align-items:center; gap:9px; padding:9px 12px; color:#6d8093; font-size:14px; border-radius:8px; }
.auth-home:hover { color:#3f5d78; background:#eaf0f6; }
.auth-home .icon { width:16px; height:16px; transform:rotate(180deg); stroke-width:1.4; }
.auth-layout { width:min(1160px,calc(100% - 112px)); margin:0 auto; flex:1; display:grid; grid-template-columns:minmax(0,1fr) 480px; align-items:center; gap:100px; padding:27px 0 43px; }
.auth-story { padding:10px 0; }
.auth-eyebrow { display:flex; align-items:center; gap:12px; color:#a85f6c; font-size:12px; letter-spacing:1.9px; font-weight:500; }
.auth-eyebrow:before { content:""; width:27px; height:1px; background:#b96975; }
.auth-story h1 { font-size:42px; line-height:1.5; font-weight:550; letter-spacing:1.2px; margin:21px 0 18px; }
.auth-story h1>span { color:#b63a4c; }
.auth-story-description { max-width:460px; color:#74869a; font-size:16px; line-height:1.95; }
.auth-workflow { margin-top:31px; max-width:456px; border:1px solid #dfe7ef; border-radius:14px; padding:21px 23px 8px; background:linear-gradient(120deg,#ffffffdb,#ffffff90); box-shadow:0 8px 30px #314d6805; }
.auth-workflow-title { display:flex; justify-content:space-between; align-items:center; gap:12px; padding-bottom:16px; border-bottom:1px solid #e5ebf2; font-size:14px; font-weight:500; color:#50687f; }
.auth-workflow-title small { font-size:10px; font-weight:400; color:#95a5b5; letter-spacing:1.1px; white-space:nowrap; }
.auth-workflow-row { display:flex; align-items:center; gap:13px; padding:16px 0; }
.auth-step-icon { display:grid; place-items:center; width:36px; height:38px; flex-shrink:0; color:#7892ab; background:#f0f4f9; border:1px solid #e5ecf3; border-radius:9px; }
.auth-step-icon .icon { width:18px; height:18px; stroke-width:1.35; }
.auth-workflow-row strong { display:block; font-size:15px; font-weight:500; color:#536c83; }
.auth-workflow-row p { color:#8496a8; font-size:13px; margin-top:3px; line-height:1.7; }
.auth-step-number { margin-left:auto; font-size:12px; color:#a4b3c2; font-variant-numeric:tabular-nums; }
.auth-story-bottom { display:flex; align-items:center; gap:8px; margin-top:22px; font-size:13px; color:#8a9aac; }
.auth-story-bottom .icon { width:15px; height:15px; stroke-width:1.35; }
.auth-form-panel { background:#fff; border:1px solid #e0e6ee; border-radius:17px; box-shadow:0 16px 50px #263e5809,0 3px 10px #263e5803; padding:35px 38px 28px; }
.auth-section-label { color:#99a6b4; font-size:11px; letter-spacing:1.8px; }
.auth-form-heading h2 { color:#30475d; font-size:28px; line-height:1.5; font-weight:550; margin:9px 0 7px; }
.auth-form-heading>p { color:#7d8e9f; font-size:14px; line-height:1.85; }
.auth-form-heading { margin-bottom:24px; }
.auth-login-identities,.auth-register-identities { border:0; padding:0; margin:0 0 22px; min-width:0; }
.auth-login-identities legend,.auth-register-identities legend { font-size:14px; color:#63798f; margin-bottom:10px; padding:0; }
.auth-identity-tabs { display:grid; grid-template-columns:repeat(3,1fr); padding:4px; gap:4px; border:1px solid #e4e9f0; border-radius:10px; background:#f5f7fa; }
.auth-identity-tabs label { position:relative; cursor:pointer; }
.auth-identity-tabs input { position:absolute; opacity:0; width:1px; height:1px; }
.auth-identity-tabs label>span { display:block; text-align:center; padding:9px 7px; font-size:14px; color:#8b9bac; border-radius:7px; border:1px solid transparent; }
.auth-identity-tabs input:checked+span { background:#fff; color:#b04455; border-color:#e7dce0; box-shadow:0 2px 6px #354b6105; font-weight:500; }
.auth-identity-tabs input:focus-visible+span { outline:2px solid #789ab9; outline-offset:2px; }
.auth-field { min-width:0; margin-bottom:20px; }
.auth-field>label,.auth-field-heading>label { display:block; font-size:15px; color:#536a81; font-weight:500; margin-bottom:9px; }
.auth-field-heading { display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
.auth-field-heading>a { color:#8b9bac; font-size:13px; }
.auth-field-heading>a:hover { color:#a94a5b; }
.auth-page .input { min-height:47px; width:100%; padding:11px 13px; border-color:#dce4ed; border-radius:8px; color:#3b536c; font-size:16px; background:#fcfdff; }
.auth-page .input::placeholder { color:#a2aebb; font-size:14px; }
.auth-page .input:focus { background:#fff; border-color:#91a9c1; box-shadow:0 0 0 3px #7a9bb712; }
.auth-submit { width:100%; min-height:47px; margin-top:3px; border-radius:8px; padding-inline:20px; font-size:15px; font-weight:500; }
.auth-submit .icon { width:17px; height:17px; stroke-width:1.4; margin-left:4px; }
.auth-submit:disabled { cursor:not-allowed; }
.auth-form-bottom { display:flex; align-items:center; justify-content:center; gap:8px; font-size:14px; color:#899aaa; padding-top:22px; margin-top:22px; border-top:1px solid #e9edf3; }
.auth-form-bottom>a { display:flex; align-items:center; gap:7px; color:#9f5362; }
.auth-form-bottom>a:hover { color:#b02e43; }
.auth-form-bottom .icon { width:14px; height:14px; stroke-width:1.4; }
.auth-form-note { margin-top:12px; color:#96a4b2; font-size:12px; text-align:center; line-height:1.8; }
.auth-error { margin:5px 0 16px; padding:10px 12px; background:#fff1f3; border:1px solid #f0dfe3; border-radius:7px; color:#ae4c5e; font-size:13px; line-height:1.8; }
.auth-service-note { margin-bottom:21px; color:#907b60; background:#fbf7f0; border:1px solid #ece3d6; border-radius:8px; padding:12px 14px; font-size:13px; line-height:1.8; }
.auth-footer { width:min(1200px,calc(100% - 96px)); margin-inline:auto; min-height:56px; display:flex; align-items:center; justify-content:space-between; gap:30px; border-top:1px solid #e0e7ef; font-size:12px; color:#95a4b3; }
.auth-register .auth-layout,.auth-recovery .auth-layout { grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr); gap:66px; padding-block:23px 34px; }
.auth-register .auth-form-panel,.auth-recovery .auth-form-panel { padding:29px 32px 24px; }
.auth-register .auth-story h1,.auth-recovery .auth-story h1 { font-size:39px; }
.auth-register .auth-workflow,.auth-recovery .auth-workflow { padding-inline:19px; }
.auth-register .auth-workflow-title small,.auth-recovery .auth-workflow-title small { display:none; }
.auth-identity-cards { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.auth-identity-cards>label { position:relative; display:flex; align-items:center; gap:10px; padding:13px 12px; border:1px solid #e0e7ef; border-radius:9px; cursor:pointer; }
.auth-identity-cards input { position:absolute; opacity:0; width:1px; height:1px; }
.auth-identity-cards>label>.icon { width:20px; height:20px; color:#91a5b8; stroke-width:1.35; }
.auth-identity-cards strong { display:block; font-size:15px; font-weight:500; color:#667f96; }
.auth-identity-cards small { display:block; font-size:12px; color:#91a3b4; margin-top:3px; line-height:1.7; }
.auth-identity-cards label:has(input:checked) { background:#fbf5f6; border-color:#d9b1ba; }
.auth-identity-cards label:has(input:checked) strong { color:#a64d5f; }
.auth-identity-cards label:has(input:focus-visible) { outline:2px solid #7c9dbb; outline-offset:3px; }
.auth-form-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:0 18px; }
.auth-verification-row { display:flex; gap:8px; }
.auth-verification-row>.input { flex:1; min-width:0; }
.auth-verification-row>.btn { flex-shrink:0; min-height:47px; padding:9px 11px; font-size:13px; border-radius:8px; color:#6b8399; border-color:#dce4ed; background:#f5f8fb; }
.auth-code-note { grid-column:1/-1; margin:-10px 0 21px; font-size:12px; color:#95a4b3; }
.auth-register .auth-form-bottom,.auth-recovery .auth-form-bottom { padding-top:18px; margin-top:18px; }
@media(min-width:1600px) {
 .auth-layout { gap:130px; padding-block:45px 65px; }
 .auth-story h1 { font-size:46px; }
 .auth-form-panel { padding:41px 40px 33px; }
 .auth-register .auth-layout,.auth-recovery .auth-layout { gap:85px; }
}
@media(min-width:1024px) and (max-width:1160px) {
 .auth-layout { gap:50px; grid-template-columns:minmax(0,1fr) 450px; }
 .auth-story h1 { font-size:36px; }
 .auth-form-panel { padding-inline:31px; }
 .auth-register .auth-layout,.auth-recovery .auth-layout { gap:35px; grid-template-columns:minmax(0,.65fr) minmax(0,1.35fr); }
 .auth-register .auth-story h1,.auth-recovery .auth-story h1 { font-size:34px; }
 .auth-identity-cards { gap:9px; }
 .auth-identity-cards small { font-size:11px; }
 .auth-workflow-row p { font-size:12px; }
}
/* Keep the complete login form visible in a typical PC browser window. */
@media(min-width:1024px) and (max-height:850px) {
 .auth-header { min-height:76px; }
 .auth-layout { padding-block:12px 20px; }
 .auth-story h1 { font-size:38px; line-height:1.4; margin:16px 0 14px; }
 .auth-story-description { font-size:15px; line-height:1.85; }
 .auth-workflow { margin-top:24px; padding:16px 21px 5px; }
 .auth-workflow-title { padding-bottom:12px; }
 .auth-workflow-row { padding:11px 0; }
 .auth-workflow-row p { margin-top:2px; }
 .auth-story-bottom { margin-top:16px; }
 .auth-form-panel { padding:28px 32px 24px; }
 .auth-form-heading { margin-bottom:18px; }
 .auth-login .auth-section-label { display:none; }
 .auth-login .auth-form-heading h2 { font-size:27px; line-height:1.4; margin:0 0 5px; }
 .auth-login-identities { margin-bottom:17px; }
 .auth-login-identities legend { font-size:13px; margin-bottom:8px; }
 .auth-identity-tabs label>span { padding-block:7px; }
 .auth-field { margin-bottom:16px; }
 .auth-field>label,.auth-field-heading>label { font-size:14px; line-height:1.5; margin-bottom:8px; }
 .auth-page .input { height:46px; min-height:46px; padding:9px 12px; line-height:1.5; }
 .auth-submit { min-height:44px; padding-block:9px; line-height:1.5; }
 .auth-form-bottom { margin-top:17px; padding-top:17px; }
 .auth-form-note { margin-top:10px; }
 .auth-footer { min-height:44px; }
 .auth-register .auth-layout,.auth-recovery .auth-layout { align-items:start; padding-block:18px 25px; }
 .auth-register .auth-story,.auth-recovery .auth-story { padding-top:26px; }
}