/* Sign-in / sign-up pages: split card with role picker */
.auth2-body{min-height:100vh;margin:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:28px 16px;background:#fff}
.auth2{width:100%;max-width:1040px;display:grid;grid-template-columns:minmax(0,420px) minmax(0,1fr);gap:12px;padding:12px;border-radius:22px;background:color-mix(in srgb,var(--brand) 15%,#fff);box-shadow:0 30px 60px -30px color-mix(in srgb,var(--brand) 45%,transparent)}
.auth2.wide{grid-template-columns:minmax(0,520px) minmax(0,1fr)}
.auth2-form{padding:26px 30px 24px;display:flex;flex-direction:column;min-width:0}
.auth2-logo{display:flex;align-items:center;gap:10px;color:#0f172a;font-size:18px;margin-bottom:14px}
.auth2-logo:hover{text-decoration:none}
.auth2-logo img{height:46px;max-width:160px;object-fit:contain}
.auth2-form .lead-sm{font-size:12.5px;color:#475569;margin:0 0 6px}
.auth2-form .welcome{font-weight:700;color:#0f172a;margin:0 0 14px}
.auth2-form .welcome b{color:var(--brand)}
.auth2-form h1{font-size:1.45rem;margin:0 0 4px}
.youre{text-align:center;color:var(--brand);font-size:1.4rem;font-weight:800;margin:4px 0 12px}
.role-pick{display:flex;justify-content:center;gap:10px;margin-bottom:18px;flex-wrap:wrap}
.role-pick label{cursor:pointer}
.role-pick input{position:absolute;opacity:0;pointer-events:none}
.role-pick span{width:70px;height:70px;border-radius:50%;border:1.5px solid color-mix(in srgb,#0f172a 40%,transparent);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:10.5px;font-weight:600;color:#1e293b;background:transparent;transition:.15s}
.role-pick span .ico{width:26px;height:26px;stroke-width:1.6}
.role-pick label:hover span{border-color:var(--brand);color:var(--brand)}
.role-pick input:checked+span{background:var(--brand);border-color:var(--brand);color:#fff;box-shadow:0 8px 18px -6px color-mix(in srgb,var(--brand) 70%,transparent)}
.role-pick input:focus-visible+span{outline:3px solid color-mix(in srgb,var(--brand) 40%,transparent);outline-offset:2px}
.uline{position:relative;margin-bottom:18px}
.uline>.ico{position:absolute;left:2px;top:50%;transform:translateY(-50%);color:#475569;width:19px;height:19px}
.uline input,.uline select{width:100%;border:0!important;border-bottom:1.5px solid #64748b!important;border-radius:0!important;background:transparent!important;padding:11px 34px 9px 32px!important;font-size:14.5px;box-shadow:none!important;min-height:0;color:#0f172a}
.uline input:focus,.uline select:focus{border-bottom-color:var(--brand)!important}
.uline input::placeholder{color:#64748b}
.uline small.help{display:block;margin:4px 0 0 32px;color:#64748b;font-size:11.5px}
.pw-toggle{position:absolute;right:0;top:50%;transform:translateY(-50%);border:0;background:none;cursor:pointer;color:#475569;padding:4px;display:grid}
.pw-toggle.on{color:var(--brand)}
.auth2-row{display:flex;justify-content:space-between;align-items:center;margin:4px 0 20px;font-size:13px;flex-wrap:wrap;gap:8px}
.switch{display:inline-flex;align-items:center;gap:9px;cursor:pointer;color:#1e293b}
.switch input{appearance:none;-webkit-appearance:none;width:34px;height:18px;border-radius:99px;background:#fff;border:1.5px solid color-mix(in srgb,var(--brand) 50%,#94a3b8);position:relative;cursor:pointer;transition:.2s;margin:0}
.switch input:before{content:"";position:absolute;width:10px;height:10px;border-radius:50%;top:2.5px;left:3px;background:var(--brand);transition:.2s}
.switch input:checked{background:var(--brand)}
.switch input:checked:before{left:18px;background:#fff}
.auth2-btn{width:100%;max-width:260px;margin:0 auto;display:flex;align-items:center;justify-content:center;gap:8px;padding:14px;border:0;border-radius:8px;background:var(--brand);color:#fff;font:700 15px var(--font);cursor:pointer;box-shadow:0 12px 24px -10px color-mix(in srgb,var(--brand) 80%,transparent);transition:.15s}
.auth2-btn:hover{filter:brightness(1.08);transform:translateY(-1px)}
.auth2-btn.full{max-width:none}
.auth2-links{text-align:center;margin-top:20px;font-size:13.5px;color:#1e293b}
.auth2-links a{color:#0f172a;font-weight:700}
.auth2-form .divider{margin:14px 0}
.auth2-form .fg label{color:#1e293b}
.auth2-form .alert{margin-bottom:12px}
.auth2-side{border-radius:16px;background:color-mix(in srgb,var(--brand) 30%,#0b0f2a);color:#fff;padding:22px 30px 0;display:flex;flex-direction:column;align-items:center;text-align:center;overflow:hidden;min-height:520px;position:relative}
.auth2-side:before{content:"";position:absolute;width:420px;height:420px;border-radius:50%;background:radial-gradient(closest-side,color-mix(in srgb,var(--brand) 45%,transparent),transparent);bottom:-140px;right:-80px;opacity:.7}
.auth2-top{align-self:flex-end;display:flex;align-items:center;gap:10px;font-size:12.5px;min-height:34px;position:relative;z-index:1}
.auth2-pill{display:inline-flex;align-items:center;gap:6px;background:var(--brand);color:#fff;padding:7px 14px;border-radius:7px;font-weight:600;font-size:13px}
.auth2-pill .ico{width:14px;height:14px}
.auth2-pill:hover{text-decoration:none;filter:brightness(1.1)}
.auth2-pill.ghost{background:rgba(255,255,255,.12)}
.auth2-side h2{font-size:1.85rem;margin:22px 0 10px;color:#fff;position:relative;z-index:1}
.auth2-side p{font-size:1.05rem;line-height:1.5;opacity:.92;max-width:470px;margin:0 auto;position:relative;z-index:1}
.auth2-art{flex:1;display:flex;align-items:flex-end;justify-content:center;width:100%;margin-top:22px;position:relative;z-index:1}
.auth2-art svg{width:100%;max-width:440px;display:block}
.auth2-art img{max-width:100%;max-height:360px;object-fit:contain;display:block;border-radius:12px 12px 0 0}
.auth2-foot{color:#64748b;font-size:12px;margin-top:16px;text-align:center}
.otp{letter-spacing:.5em;text-align:center;font-size:22px!important;font-weight:700}
@media(max-width:860px){
  .auth2,.auth2.wide{grid-template-columns:1fr;max-width:480px}
  .auth2-side{order:-1;min-height:0;padding:16px 18px 18px}
  .auth2-side h2{font-size:1.25rem;margin:8px 0 4px}.auth2-side p{font-size:.92rem}
  .auth2-art{display:none}
  .auth2-top{align-self:center}
  .auth2-form{padding:18px 16px 16px}
}
@media(max-width:380px){.role-pick span{width:62px;height:62px;font-size:9.5px}.role-pick{gap:6px}}
.uhelp{display:block;margin:0 0 16px 32px;color:#64748b;font-size:11.5px}
@media(max-width:430px){.role-pick{gap:6px;flex-wrap:nowrap}.role-pick span{width:64px;height:64px;font-size:9.5px}.role-pick span .ico{width:22px;height:22px}}
/* Photo on the right-hand panel */
.auth2-side.has-photo{background-color:#0b0f2a;background-size:cover;background-position:62% center;justify-content:flex-start}
.auth2-side.has-photo:before{width:auto;height:auto;inset:0;border-radius:0;bottom:0;right:0;opacity:1;background:linear-gradient(180deg,rgba(8,12,32,.86) 0%,rgba(8,12,32,.55) 34%,rgba(8,12,32,0) 62%)}
.auth2-side.has-photo:after{content:"";position:absolute;left:0;right:0;bottom:0;height:5px;background:var(--brand)}
.auth2-side.has-photo h2,.auth2-side.has-photo p{text-shadow:0 2px 12px rgba(0,0,0,.45)}
@media(max-width:860px){.auth2-side.has-photo{min-height:230px;background-position:62% 18%}.auth2-side.has-photo:before{background:linear-gradient(180deg,rgba(8,12,32,.85),rgba(8,12,32,.45))}}
/* Dark-blue welcome panel (eSkooly style) with photo at the bottom */
.auth2-side.navy{background:var(--panel,#1a1f5e);padding-bottom:0}
.auth2-side.navy:before{display:none}
.auth2-photo{margin-top:auto;width:calc(100% + 60px);margin-left:-30px;margin-right:-30px;position:relative;z-index:1;padding-top:22px}
.auth2-photo img{display:block;width:100%;height:340px;object-fit:cover;object-position:60% 30%;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 22%);mask-image:linear-gradient(180deg,transparent 0,#000 22%)}
.auth2-side.navy .auth2-pill.ghost{background:rgba(255,255,255,.14)}
@media(max-width:860px){.auth2-photo{display:none}.auth2-side.navy{padding-bottom:18px}}
/* Dark-blue outer card: form area on dark blue */
.auth2.dark{background:var(--panel,#1a1f5e);box-shadow:0 30px 70px -25px rgba(10,14,50,.55)}
.auth2.dark .auth2-side.navy{background:color-mix(in srgb,var(--panel,#1a1f5e) 78%,#000)}
.auth2.dark .auth2-form,.auth2.dark .auth2-logo,.auth2.dark .auth2-form .welcome,.auth2.dark .auth2-links,.auth2.dark .auth2-links a,.auth2.dark .switch,.auth2.dark .auth2-form h1,.auth2.dark .auth2-form .fg label{color:#fff}
.auth2.dark .auth2-form .lead-sm,.auth2.dark .uhelp,.auth2.dark .auth2-form .muted,.auth2.dark .auth2-form .help{color:rgba(255,255,255,.72)}
.auth2.dark .auth2-form .welcome b,.auth2.dark .youre{color:#8fb4ff}
.auth2.dark .role-pick span{border-color:rgba(255,255,255,.55);color:#fff}
.auth2.dark .role-pick label:hover span{border-color:#fff;color:#fff;background:rgba(255,255,255,.08)}
.auth2.dark .role-pick input:checked+span{background:var(--brand);border-color:#fff}
.auth2.dark .uline>.ico,.auth2.dark .pw-toggle{color:rgba(255,255,255,.8)}
.auth2.dark .uline input,.auth2.dark .uline select{color:#fff;border-bottom-color:rgba(255,255,255,.6)!important}
.auth2.dark .uline input::placeholder{color:rgba(255,255,255,.65)}
.auth2.dark .uline input:focus{border-bottom-color:#fff!important}
.auth2.dark .uline input:-webkit-autofill{-webkit-text-fill-color:#fff;transition:background-color 9999s}
.auth2.dark .pw-toggle.on{color:#fff}
.auth2.dark .switch input{background:transparent;border-color:rgba(255,255,255,.7)}
.auth2.dark .switch input:before{background:#fff}
.auth2.dark .switch input:checked{background:var(--brand);border-color:var(--brand)}
.auth2.dark .auth2-btn{box-shadow:0 12px 26px -10px rgba(0,0,0,.6)}
.auth2.dark .auth2-form .divider{color:rgba(255,255,255,.7)}
.auth2.dark .auth2-form .divider:before,.auth2.dark .auth2-form .divider:after{border-color:rgba(255,255,255,.25)}
.auth2.dark .auth2-form a{color:#bcd2ff}
.auth2.dark .auth2-links a{color:#fff}
.auth2.dark .auth2-form .btn-ghost{background:rgba(255,255,255,.1);color:#fff;border-color:rgba(255,255,255,.3)}
.auth2.dark .auth2-form .alert{color:#0f172a}
@media(max-width:860px){.auth2.dark .auth2-side.navy{background:color-mix(in srgb,var(--panel,#1a1f5e) 70%,#000)}}
.auth2.dark .auth2-form a.auth2-logo,.auth2.dark .auth2-logo strong{color:#fff}
/* v1.8 – app promo under the sign-in form */
.auth2-app{display:flex;align-items:center;gap:12px;margin-top:18px;padding:12px;border:1px solid #e5e9f2;border-radius:16px;background:linear-gradient(135deg,color-mix(in srgb,var(--brand) 6%,#fff),#fff)}
.auth2-app img{width:42px;height:42px;border-radius:11px;box-shadow:0 4px 12px rgba(15,23,42,.15);flex:none}
.auth2-app div{flex:1;min-width:0}
.auth2-app b{display:block;font-size:13.5px;color:#0f172a}
.auth2-app small{display:block;font-size:11.5px;color:#64748b}
.auth2-app .install-pill{font-size:12.5px;padding:4px 12px 4px 4px}
.auth2-app .install-pill .ip-ico{width:26px;height:26px}
.auth2-app .install-pill:after{display:none}
.auth2-app-more{font-size:12.5px;font-weight:600;white-space:nowrap}
.auth2-app .install-pill:not([hidden])+.auth2-app-more{display:none}
html.standalone .auth2-app{display:none}
.auth2-logo .brand-mark.mono{width:46px;height:46px;border-radius:13px;font-size:15px}
.auth2-logo img.school-logo{height:46px;width:auto;max-width:160px;object-fit:contain;background:#fff;border-radius:10px;padding:2px}