/* A quiet teacher login paired with the illustrated learning world. */
.login-topbar { display:flex; align-items:center; gap:24px; padding:18px 32px; border-bottom:1px solid var(--border); background:#fff; }
.login-back { display:inline-flex; align-items:center; gap:6px; height:36px; padding:0 14px; border-radius:10px; border:1px solid var(--border); color:#6f809b; font-weight:600; font-size:12px; }
.login-back:hover { background:var(--primary-light); color:var(--primary); }.login-slogan { flex:1; text-align:center; color:#95a2b6; font-size:12px; }.login-help { font-size:12px; font-weight:600; }
.login-stage { padding:42px 40px 50px; background:#fafcfe; }.login-card { max-width:1100px; margin:0 auto; display:grid; grid-template-columns:1fr 1fr; background:#fff; border-radius:24px; overflow:hidden; border:1px solid #e7edf5; box-shadow:0 16px 50px #31578a0a; }
.login-art { position:relative; min-height:610px; overflow:hidden; background-size:cover; background-position:center; }
.login-art-original { background-image:url('/static/img/generated/scenes/login.webp'); background-color:#c6e6fa; }
.login-art-title { position:relative; z-index:1; padding:48px 35px; }.login-art-title small { display:block; font-size:9px; font-weight:650; color:#719bbd; letter-spacing:2px; margin-bottom:18px; }.login-art-title b { display:block; font-size:35px; font-weight:800; color:#2d5c88; letter-spacing:-1px; line-height:1.5; }.login-art-title p { margin-top:12px; font-size:13px; color:#6588a4; }
.login-art-foot { position:absolute; bottom:18px; left:15px; right:15px; text-align:center; font-size:10px; color:#fff; text-shadow:0 1px 4px #23496a90; }.login-art-foot i { color:#ffdf89; font-size:9px; margin-right:5px; }
.login-form { padding:46px 45px; }.login-tabs { display:flex; gap:26px; border-bottom:1px solid var(--border); margin-bottom:30px; }.login-tab { position:relative; padding:0 0 12px; font-size:14px; font-weight:650; color:#9aa9bd; }.login-tab.active { color:var(--primary); }.login-tab.active::after { content:""; position:absolute; left:0; right:0; bottom:-1px; height:3px; border-radius:3px; background:var(--primary); }
.login-form h2 { font-size:25px; font-weight:800; color:#354c6f; letter-spacing:-.7px; }.login-form .sub { color:#94a0b2; margin:8px 0 26px; font-size:12px; line-height:1.8; }.login-form .home-field label { font-size:12px; color:#60718b; font-weight:600; }.login-form .home-input { background:#fafcfe; height:47px; font-size:13px; padding:0 15px; }.login-row2 { display:grid; grid-template-columns:1fr 1fr; gap:14px; }.login-forgot { text-align:right; margin:-8px 0 15px; font-size:11px; }.login-forgot a { color:#8b9db7; }.login-submit { height:48px; font-size:14px; border-radius:11px; margin-top:5px; }.login-switch { text-align:center; margin-top:22px; color:#9aa7ba; font-size:11px; }.login-switch a { font-weight:600; margin-left:4px; }.login-err { color:#d15c66; font-size:12px; min-height:20px; margin:-5px 0 5px; }
@media(max-width:1100px) { .login-form { padding:35px 30px; }.login-art-title { padding:42px 30px; }.login-art-title b { font-size:31px; }.login-slogan { display:none; }.login-help { margin-left:auto; } }
@media(max-width:700px) { .login-topbar { padding:13px 16px; gap:12px; }.login-back { margin-left:auto; font-size:11px; padding:0 10px; }.login-help { display:none; }.login-stage { padding:18px 16px 28px; }.login-card { grid-template-columns:1fr; border-radius:20px; }.login-art { min-height:240px; background-position:center 60%; }.login-art-title { padding:25px 22px; max-width:75%; }.login-art-title b { font-size:25px; line-height:1.45; }.login-art-title small { font-size:7px; margin-bottom:10px; letter-spacing:1px; }.login-art-title p { font-size:10px; max-width:150px; }.login-art-foot { display:none; }.login-form { padding:28px 24px 32px; }.login-form h2 { font-size:23px; }.login-row2 { grid-template-columns:1fr; gap:0; }.login-form .home-input { font-size:16px; } }
.login-art-title small { color:#2f5e89; }.login-art-title p { color:#315e88; }