:root { color-scheme: light; }
.login-body { min-height: 100vh; margin: 0; display: grid; place-items: center; padding: 28px; background: radial-gradient(circle at 15% 20%, rgba(255,202,76,.35), transparent 28%), radial-gradient(circle at 85% 80%, rgba(47,209,154,.3), transparent 30%), linear-gradient(145deg, #edf5ff, #f7f2ff 52%, #fff9e9); color: #202342; font-family: 'Nunito', sans-serif; }
.login-shell { width: min(980px, 100%); }
.login-brand { text-align: center; max-width: 610px; margin: 0 auto 24px; }
.login-brand .brand-mark { display: inline-grid; margin-bottom: 12px; }
.login-brand h1 { margin: 0; font: 800 clamp(32px, 6vw, 54px)/1 'Baloo 2', cursive; color: #3f2bb6; }
.login-brand > p:last-child { margin: 10px 0 0; color: #686d85; }
.login-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.login-card { width: min(460px, 100%); margin: 0 auto; padding: 28px; border: 1px solid rgba(109,80,243,.12); border-radius: 24px; background: rgba(255,255,255,.92); box-shadow: 0 24px 70px rgba(57,44,125,.14); }
.login-card--child { border-color: rgba(47,209,154,.25); }
.login-card h2 { margin: 2px 0 8px; font: 800 28px/1.1 'Baloo 2', cursive; }
.login-card__intro { margin: 0 0 20px; color: #6f7389; }
.login-card label { display: grid; gap: 7px; margin: 15px 0; font-weight: 800; font-size: 13px; }
.login-card input { width: 100%; box-sizing: border-box; border: 1px solid #dfe1ed; border-radius: 13px; padding: 13px 14px; font: 700 15px 'Nunito', sans-serif; color: #262944; background: #fbfbfe; outline: none; }
.login-card input:focus { border-color: #7357f5; box-shadow: 0 0 0 3px rgba(109,80,243,.12); }
.login-card .primary-button { margin-top: 8px; }
.login-card > small { display: block; margin-top: 12px; text-align: center; color: #777b90; }
.login-error { max-width: 620px; margin: 0 auto 18px; padding: 13px 16px; border-radius: 13px; background: #fff0f1; color: #a82d3c; font-weight: 800; text-align: center; }
@media (max-width: 720px) { .login-grid { grid-template-columns: 1fr; } .login-body { padding: 18px; align-items: start; } .login-shell { padding-top: 20px; } }