:root{--login-yellow:#101114;--login-cream:#101114;--login-border:#101114;--login-muted:#101114;--login-black:#101114}
html,body{width:100%;height:100%;margin:0;overflow:hidden}
body{font-family:'Plus Jakarta Sans',Arial,sans-serif;background:#ffffff}
.login{width:100%;height:100dvh;min-height:0;display:grid;grid-template-columns:48.5% 51.5%;overflow:hidden}
.login-art{
    position:relative;
    background:#101114;
    color:#ffffff;
    padding:40px 52px 54px;
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    overflow:hidden;
    min-height:0
}
.art-orb{
    position:absolute;
    border-radius:50%;
    pointer-events:none
}
.art-orb-one{
    width:620px;
    height:620px;
    right:-250px;
    top:-150px;
    background:#101114
}
.art-orb-two{
    width:410px;
    height:410px;
    left:-250px;
    bottom:-280px;
    background:#101114
}
.brand{
    position:absolute;
    left:52px;
    top:34px;
    display:flex;
    align-items:center;
    gap:12px;
    font-size:18px;
    font-weight:800;
    z-index:2
}
.brand i{
    display:grid;
    place-items:center;
    width:38px;
    height:38px;
    border-radius:10px;
    background:#ffffff;
    color:#101114;
    font-style:normal
}
.art-copy{
    position:relative;
    z-index:2
}
.login-art h2{
    font-size:clamp(32px,3vw,40px);
    line-height:1.2;
    letter-spacing:-1.3px;
    max-width:650px;
    margin:0 0 22px;
    font-weight:800
}
.login-art ul{
    list-style:none;
    padding:0;
    margin:0;
    max-width:780px
}
.login-art li{
    position:relative;
    margin:0 0 18px;
    padding-left:32px;
    color:#ffffff;
    font-size:16px;
    line-height:1.4
}
.login-art li:before{
    content:'✓';
    position:absolute;
    left:0;
    top:0;
    font-weight:800;
    font-size:20px
}
.login-form{background:var(--login-yellow);display:grid;place-items:center;padding:16px 30px;min-height:0;overflow:hidden}
.login-card{
    width:min(100%,460px);
    max-height:calc(100dvh - 28px);
    overflow:hidden;
    background:var(--login-cream);
    border:1px solid #101114;
    border-radius:16px;
    padding:22px 28px 24px;
    box-shadow:0 2px 0 rgba(16,17,20,.08)
}
.login-card h1{
    font-size:27px;
    line-height:1.1;
    margin:0 0 5px;
    font-weight:800;
    letter-spacing:-1px;
    color:#101114
}
.lead{
    margin:0 0 18px;
    color:var(--login-muted);
    font-size:12px
}
.field{
    margin-bottom:12px
}
.field label,.captcha-block>label{
    display:block;
    margin-bottom:7px;
    font-size:12px;
    font-weight:800;
    color:#101114
}
.req:after{
    content:' *';
    color:#101114
}
.input{
    width:100%;
    height:44px;
    border:1px solid #101114;
    border-radius:11px;
    background:#101114;
    padding:0 12px;
    font:600 12px 'Plus Jakarta Sans',sans-serif;
    color:#101114;
    outline:none
}
.input:focus{
    border-color:#101114;
    box-shadow:0 0 0 3px rgba(16,17,20,.18);
    background:#ffffff
}
.input::placeholder{
    color:#101114;
    font-weight:500
}
.pw{
    position:relative
}
.pw .input{
    padding-right:50px
}
.eye{
    position:absolute;
    right:5px;
    top:3px;
    width:38px;
    height:38px;
    border:0;
    background:transparent;
    color:#101114;
    cursor:pointer;
    display:grid;
    place-items:center;
    padding:0
}
.eye-icon{
    width:15px;
    height:15px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round
}
.eye-closed{
    display:none
}
.eye.is-visible .eye-open{
    display:none
}
.eye.is-visible .eye-closed{
    display:block
}
.captcha-block{
    margin-top:1px;
    margin-bottom:10px
}
.captcha-row{
    display:flex;
    align-items:center;
    gap:7px
}
.captcha-image{
    width:150px;
    height:42px;
    display:block;
    border-radius:9px
}
.captcha-refresh{
    width:34px;
    height:34px;
    border:0;
    border-radius:8px;
    background:#101114;
    color:#101114;
    cursor:pointer;
    display:grid;
    place-items:center;
    padding:0
}
.captcha-refresh svg{
    width:15px;
    height:15px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round
}
.captcha-refresh:hover{
    background:#101114
}
.captcha-input-field{
    margin-bottom:10px
}
.captcha-input-field small{
    display:block;
    margin-top:7px;
    color:#101114;
    font-size:10px;
    line-height:1.35
}
.row{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin:2px 0 13px;
    font-size:11px;
    color:#101114
}
.remember{
    display:flex;
    align-items:center;
    gap:7px;
    cursor:pointer
}
.remember input{
    width:15px;
    height:15px;
    accent-color:#101114
}
.forgot{
    color:#101114
}
.login-btn{
    width:100%;
    height:46px;
    border:0;
    border-radius:10px;
    background:#101114;
    color:#ffffff;
    font:800 13px 'Plus Jakarta Sans',sans-serif;
    cursor:pointer
}
.login-btn:hover{
    background:#101114
}
.login-btn:disabled{
    opacity:.65;
    cursor:wait
}
.field-error{
    display:block;
    margin-top:5px;
    color:#101114;
    font-size:10px
}
@media(max-width:1000px){
    html,body{
        overflow:hidden
    }
    .login{
        grid-template-columns:1fr
    }
    .login-art{
        display:none
    }
    .login-form{
        height:100dvh;
        min-height:0;
        padding:12px
    }
    .login-card{
        width:min(100%,520px);
        max-height:calc(100dvh - 24px)
    }
}
@media(max-width:560px){
    .login-form{
        padding:8px
    }
    .login-card{
        max-height:calc(100dvh - 16px);
        padding:24px 20px;
        border-radius:16px
    }
    .login-card h1{
        font-size:28px
    }
    .lead{
        font-size:13px;
        margin-bottom:22px
    }
    .field{
        margin-bottom:13px
    }
    .field label,.captcha-block>label{
        font-size:13px;
        margin-bottom:6px
    }
    .input{
        height:47px
    }
    .captcha-image{
        width:160px;
        height:48px
    }
    .captcha-input-field small{
        font-size:10px
    }
    .row{
        font-size:12px;
        margin-bottom:15px
    }
    .login-btn{
        height:50px
    }
}
@media(max-height:700px){
    .login-card{
        padding-top:20px;
        padding-bottom:22px
    }
    .login-card h1{
        font-size:29px
    }
    .lead{
        margin-bottom:18px
    }
    .field{
        margin-bottom:11px
    }
    .captcha-block{
        margin-bottom:10px
    }
    .captcha-input-field{
        margin-bottom:10px
    }
    .captcha-input-field small{
        margin-top:5px
    }
    .row{
        margin-bottom:12px
    }
    .input{
        height:45px
    }
    .captcha-image{
        height:44px
    }
    .login-btn{
        height:48px
    }
}

.login-card .captcha-block>label{font-size:12px}.login-card .captcha-input-field label{font-size:12px}
@media(max-width:560px){
    .login-card{
        padding:20px 18px;
        border-radius:14px
    }
    .login-card h1{
        font-size:24px
    }
    .lead{
        font-size:11px;
        margin-bottom:16px
    }
    .field{
        margin-bottom:11px
    }
    .field label,.captcha-block>label{
        font-size:12px
    }
    .input{
        height:43px
    }
    .captcha-image{
        width:145px;
        height:40px
    }
    .captcha-input-field small{
        font-size:9px
    }
    .row{
        font-size:11px;
        margin-bottom:12px
    }
    .login-btn{
        height:45px;
        font-size:12px
    }
}
@media(max-height:700px){
    .login-card{
        padding:17px 24px 18px
    }
    .login-card h1{
        font-size:24px
    }
    .lead{
        font-size:11px;
        margin-bottom:13px
    }
    .field{
        margin-bottom:9px
    }
    .captcha-block{
        margin-bottom:8px
    }
    .captcha-input-field{
        margin-bottom:8px
    }
    .input{
        height:41px
    }
    .captcha-image{
        height:38px
    }
    .login-btn{
        height:43px
    }
}
.auth-page{
    min-height:100dvh;
    overflow:auto;
    background:#ffffff
}
.auth-simple{
    min-height:100dvh;
    display:grid;
    place-items:center;
    padding:20px
}
.auth-simple-card{
    width:min(100%,480px);
    background:#ffffff;
    border:1px solid #101114;
    border-radius:16px;
    padding:28px;
    box-shadow:0 14px 40px rgba(16,17,20,.08)
}
.auth-simple-card .brand{
    display:flex;
    align-items:center;
    gap:10px;
    font-weight:800;
    margin-bottom:24px
}
.auth-simple-card .brand i{
    display:grid;
    place-items:center;
    width:36px;
    height:36px;
    border-radius:9px;
    background:#101114;
    color:#101114;
    font-style:normal
}
.auth-simple-card h1{
    margin:0 0 7px;
    font-size:26px;
    color:#101114
}
.auth-simple-card>p{
    margin:0 0 20px;
    color:#101114;
    font-size:13px;
    line-height:1.5
}
.auth-alert{
    padding:11px 12px;
    border-radius:9px;
    font-size:12px;
    margin-bottom:16px
}
.auth-alert.success{
    background:#101114;
    color:#101114;
    border:1px solid #101114
}
.auth-alert.error{
    background:#ffffff;
    color:#101114;
    border:1px solid #101114
}
.auth-back{
    display:block;
    text-align:center;
    margin-top:16px;
    color:#101114;
    font-size:12px;
    text-decoration:none
}
.auth-back:hover{
    text-decoration:underline
}
.auth-login-link{
    display:flex;
    align-items:center;
    justify-content:center;
    text-decoration:none
}
@media(max-width:560px){.auth-simple{padding:10px}.auth-simple-card{padding:20px;border-radius:13px}.auth-simple-card h1{font-size:23px}}

.login-form,.login-card{background:#ffffff;color:#101114}
.login-card .input{background:#ffffff;color:#101114;border-color:#101114}
.login-card .input:focus{background:#ffffff;border-color:#101114;box-shadow:0 0 0 3px rgba(16,17,20,.12)}
.captcha-refresh{background:#101114;color:#ffffff}
.captcha-refresh:hover{background:#101114}

.login-art{background:linear-gradient(135deg,#101114 0%,#4f46e5 48%,#06b6d4 100%)}
.art-orb-one{background:rgba(255,255,255,.10)}
.art-orb-two{background:rgba(236,72,153,.22)}
.login-form{background:#e7e5ec;color:#000}
.login-card{background:#ffffff;color:#000;border-color:#e7e5ec;box-shadow:0 16px 42px rgba(16,17,20,.12)}
.login-card h1,.lead,.field label,.captcha-block>label,.row,.forgot,.field-error{color:#000}
.input{background:#fff;color:#000;border-color:#c9c6d1}
.input::placeholder{color:#666}
.input:focus{border-color:#6d28d9;box-shadow:0 0 0 3px rgba(109,40,217,.16)}
.eye{color:#7c3aed;background:#f3e8ff;border-radius:9px}
.captcha-refresh{background:linear-gradient(135deg,#2563eb,#7c3aed);color:#fff}
.captcha-refresh:hover{background:linear-gradient(135deg,#2563eb,#7c3aed);filter:brightness(1.08)}
.captcha-image{box-shadow:0 4px 14px rgba(16,17,20,.10)}
.remember input{accent-color:#7c3aed}
.login-btn{background:linear-gradient(135deg,#2563eb,#7c3aed,#ec4899);box-shadow:0 8px 18px rgba(99,102,241,.25)}
.login-btn:hover{background:linear-gradient(135deg,#2563eb,#7c3aed,#ec4899);filter:brightness(1.05)}
.login-error{background:#fee2e2;color:#991b1b;border:1px solid #fecaca;border-radius:9px;padding:10px 12px;margin-bottom:12px;font-size:11px}
.login-art { background:#000 !important; color:#fff !important; }
.login-form { background:#e7e5ec !important; color:#000 !important; }

.login-btn,
.login-btn:hover,
.login-btn:focus,
.login-btn:active {
  background:#000 !important;
  background-image:none !important;
  color:#fff !important;
  border-color:#000 !important;
  box-shadow:none !important;
  filter:none !important;
  transform:none !important;
}
.captcha-refresh,
.captcha-refresh:hover,
.captcha-refresh:focus,
.captcha-refresh:active {
  background:#000 !important;
  background-image:none !important;
  color:#fff !important;
  border-color:#000 !important;
  box-shadow:none !important;
  filter:none !important;
  transform:none !important;
}
.captcha-refresh svg, .captcha-refresh svg * {
  color:#fff !important;
  stroke:#fff !important;
}
.brand i img{
    width:38px;
    height:38px;
    border-radius:10px;
    object-fit:contain;
    background:#fff
}
.school-login-tagline{
    position:relative;
    z-index:2;
    max-width:650px;
    margin:-10px 0 22px;
    color:rgba(255,255,255,.82);
    font-size:14px;
    line-height:1.5
}
.login-art{
    background:var(--login-sidebar,#101114)
}
.login-form{
    background:var(--login-page,#f6f8fc)
}
.login-card{
    background:var(--login-card,#fff);
    border-color:var(--login-primary,#6366f1)
}
.login-card h1,.field label,.captcha-block>label,.row,.input::placeholder,.captcha-input-field small{
    color:var(--login-header-text,#111827)
}
.input{
    background:#fff;
    color:var(--login-header-text,#111827);
    border-color:#cbd5e1
}
.input:focus{
    border-color:var(--login-primary,#6366f1);
    box-shadow:0 0 0 3px color-mix(in srgb,var(--login-primary,#6366f1) 18%,transparent)
}
.login-btn,.captcha-refresh{
    background:var(--login-action,#000);
    color:var(--login-action-text,#fff)
}
.login-btn:hover,.captcha-refresh:hover{
    background:var(--login-action,#000)
}
.forgot{
    color:var(--login-primary,#6366f1)
}
.auth-simple .brand i img{
    width:38px;
    height:38px;
    border-radius:10px;
    object-fit:contain;
    background:#fff
}
.auth-simple{
    background:var(--login-page,#f6f8fc)!important
}
.auth-simple-card{
    background:var(--login-card,#fff)!important;
    border-color:var(--login-primary,#6366f1)!important
}
.auth-simple-card .brand i{
    background:var(--login-action,#000)!important;
    color:var(--login-action-text,#fff)!important
}
.auth-simple-card .login-btn{
    background:var(--login-action,#000)!important;
    color:var(--login-action-text,#fff)!important
}
.auth-simple-card a{
    color:var(--login-primary,#6366f1)
}

.school-login-contact{position:relative;z-index:2;margin:-10px 0 24px;color:rgba(255,255,255,.68);font-size:11px;line-height:1.5;max-width:680px}
.school-auth-contact{
    margin:4px 0 18px;
    font-size:10px;
    line-height:1.5;
    color:var(--login-header-text,#64748b);
    opacity:.8
}
.school-auth-contact span+span::before{
    content:' · ';
    margin:0 3px
}

.login-card{
    width:min(100%,410px);
    padding:20px 24px 22px
}
.pw{
    display:block;
    position:relative
}
.pw .input{
    box-sizing:border-box;
    padding-right:48px
}
.pw .eye{
    right:4px;
    top:50%;
    transform:translateY(-50%);
    height:34px;
    width:36px;
    border-radius:8px
}
.captcha-input-field small{
    font-size:9px
}
@media(prefers-reduced-motion:reduce){
    .login-card{
        animation:none
    }
}