/* Login shares the registration canvas and keeps its form deliberately short. */
body.login-page[data-halloween-page="login"] .page{max-width:1120px}
body.login-page[data-halloween-page="login"] .auth-visual{padding:32px 34px 26px}
body.login-page[data-halloween-page="login"] .auth-panel{padding:40px;align-items:center}
body.login-page[data-halloween-page="login"] .form-box{max-width:370px}
body.login-page[data-halloween-page="login"] .registration-story{margin-top:30px}
body.login-page[data-halloween-page="login"] .registration-story h2{font-size:43px;line-height:1.12}
body.login-page[data-halloween-page="login"] .registration-art-stage{min-height:355px;margin-top:25px}
body.login-page[data-halloween-page="login"] .registration-guardians{width:370px;height:355px;left:-24px;bottom:2px}
body.login-page[data-halloween-page="login"] .registration-art-halo{width:300px;height:300px;left:calc(50% - 150px)}
body.login-page[data-halloween-page="login"] .registration-profile-preview{width:192px;padding:15px;right:8px;bottom:0}
body.login-page[data-halloween-page="login"] .registration-preview-head{font-size:5px}
body.login-page[data-halloween-page="login"] .registration-preview-status{font-size:6px}
body.login-page[data-halloween-page="login"] .registration-art-caption{font-size:10px;right:0}
.login-account-switch{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:33px;padding:5px 5px 5px 13px;border:1px solid #b69bb334;border-radius:11px;color:#6f4c7d;font-size:10px;font-weight:700;background:#dcc3d309}
.login-account-switch button{min-height:34px;padding:9px 12px;display:flex;align-items:center;gap:15px;border:1px solid #ba9db333;border-radius:8px;background:#fffbf3;color:#977b98;font:10px Arial,sans-serif;cursor:pointer}
.login-account-switch button:hover{color:#634472;border-color:#aa87b1}
body.login-page[data-halloween-page="login"] .registration-form-heading{margin-bottom:25px;padding-bottom:23px}
body.login-page[data-halloween-page="login"] .registration-form-heading h1{font-size:38px;margin-top:10px}
body.login-page[data-halloween-page="login"] .registration-form-heading p{font-size:12px}
body.login-page[data-halloween-page="login"] #loginForm{display:grid;gap:21px}
.login-password-label{display:flex;align-items:center;justify-content:space-between;gap:12px;line-height:1.5}
.login-password-label label{font-size:12px;font-weight:700;color:#66506d}
.login-password-label button{display:inline;padding:0;border:0;background:transparent;color:#9b789a;font:10px Arial,sans-serif;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
body.login-page[data-halloween-page="login"] #loginForm>.primary-btn{display:flex;align-items:center;justify-content:space-between;margin-top:4px;font-size:13px}
body.login-page[data-halloween-page="login"] #loginForm>.primary-btn span{color:#e8c9a3;font-size:20px;line-height:1}
body.login-page[data-halloween-page="login"] .social-auth{margin-top:28px}
.login-new-account{display:flex;align-items:center;justify-content:space-between;gap:12px;border-top:1px solid #b69bb329;margin-top:28px;padding:22px 0}
.login-new-account>span{font-size:10px;color:#aa8fa0}
.login-new-account a{display:flex;align-items:center;gap:12px;padding:0;border:0;background:transparent;font:700 10px Arial,sans-serif;color:#765382;cursor:pointer}
.login-new-account a:hover{color:#392641}
@media(min-width:801px) and (max-width:1000px){body.login-page[data-halloween-page="login"] .auth-visual{padding:30px 26px}body.login-page[data-halloween-page="login"] .registration-story h2{font-size:35px}body.login-page[data-halloween-page="login"] .registration-guardians{width:340px;height:355px;left:-20px}body.login-page[data-halloween-page="login"] .registration-profile-preview{width:175px;padding:12px}body.login-page[data-halloween-page="login"] .registration-preview-status{font-size:5px}body.login-page[data-halloween-page="login"] .auth-panel{padding:32px 27px}}
@media(max-width:800px){body.login-page[data-halloween-page="login"] .auth-visual{padding:22px 25px}body.login-page[data-halloween-page="login"] .auth-panel{padding:28px 28px 25px}.login-account-switch{margin-bottom:25px}body.login-page[data-halloween-page="login"] .registration-form-heading h1{font-size:34px}body.login-page[data-halloween-page="login"] .registration-form-heading{padding-bottom:19px;margin-bottom:22px}}
@media(max-width:360px){body.login-page[data-halloween-page="login"] .auth-visual{padding:19px 21px}body.login-page[data-halloween-page="login"] .auth-panel{padding:25px 21px}.login-account-switch{font-size:9px;gap:10px;padding-left:10px}.login-account-switch button{font-size:9px;padding:8px 10px}.login-new-account{gap:9px}.login-new-account a{font-size:9px}}

.login-new-account a{text-decoration:none}

@media(max-width:800px){body.login-page[data-halloween-page="login"] .auth-visual{order:0}body.login-page[data-halloween-page="login"] .auth-panel{order:1}}

body.login-page[data-halloween-page="login"] .auth-visual,body.login-page[data-halloween-page="login"] .auth-panel{grid-row:auto}
@media(max-width:800px){body.login-page[data-halloween-page="login"] .auth-visual{grid-row:1}body.login-page[data-halloween-page="login"] .auth-panel{grid-row:2}}

/* Keep account navigation and the welcome label easy to spot. */
.login-page .login-account-switch{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:24px;padding:5px;border:1px solid #b89bb857;border-radius:14px;background:#e8dce659;box-shadow:inset 0 1px 2px #68466c06}
.login-page .login-account-switch>span[aria-current="page"]{display:flex;align-items:center;justify-content:center;gap:8px;min-height:43px;padding:10px 12px;border:1px solid #674775;border-radius:10px;background:linear-gradient(120deg,#765187,#4d335b);color:#fff4e5;font-size:13px;font-weight:800;box-shadow:0 3px 10px #54345c21}
.login-page .login-account-switch>span[aria-current="page"]::before{content:'';width:5px;height:5px;border-radius:50%;background:#efca94}
.login-page .login-account-switch button{justify-content:center;gap:10px;min-height:43px;padding:10px 12px;border:1px solid #bca2b94a;border-radius:10px;background:#fffaf3;color:#63446e;font-family:inherit;font-size:12px;font-weight:750;box-shadow:0 2px 4px #67466c04}
.login-page .login-account-switch button:hover{background:#f5eaf6;border-color:#9973aa;color:#493054}
.login-page .login-account-switch button>span{color:#9872a4;font-size:15px}
body.login-page[data-halloween-page="login"] .registration-form-heading .registration-eyebrow{display:inline-flex;align-items:center;gap:7px;padding:5px 9px;border:1px solid #b799bd38;border-radius:7px;background:#a078b00b;color:#896396;font-size:10px;line-height:1.4;font-weight:800;letter-spacing:.08em}
body.login-page[data-halloween-page="login"] .registration-form-heading .registration-eyebrow::before{content:'✦';font-size:12px;color:#b28458}
@media(max-width:800px){.login-page .login-account-switch{margin-bottom:20px}body.login-page[data-halloween-page="login"] .registration-form-heading{margin-bottom:18px}}
@media(max-width:360px){.login-page .login-account-switch>span[aria-current="page"]{font-size:12px}.login-page .login-account-switch button{font-size:11px;gap:7px}}