:root{color-scheme:light;font-family:system-ui,-apple-system,"Segoe UI",sans-serif;color:#17223b;background:#f3f5fa}
*{box-sizing:border-box}body{margin:0;min-height:100svh;display:grid;place-items:center;padding:32px;background:radial-gradient(ellipse at 10% 10%,#e9e4ff,transparent 48%),#f3f5fa}
.login-shell{display:grid;grid-template-columns:1fr 1fr;width:100%;max-width:1040px;min-height:650px;border-radius:28px;overflow:hidden;background:#fff;box-shadow:0 24px 80px #16213b14;animation:arrive .45s ease-out}
.brand-panel{background:#020e1c;color:#fff;padding:42px;display:flex;flex-direction:column;justify-content:space-between;position:relative}
.brand-logo{display:block;width:280px;max-width:100%;height:94px;object-fit:cover}
.eyebrow{font-size:11px;font-weight:700;letter-spacing:2px;line-height:1.8}.brand-copy .eyebrow{color:#bba5ff}
h1{font-size:54px;line-height:1.12;letter-spacing:-2px;margin:18px 0 24px;font-weight:650}.brand-copy>p:last-child{color:#bac5d6;line-height:1.8;font-size:16px}
.brand-footer{display:flex;align-items:center;gap:10px;font-size:12px;color:#bac5d6;margin-top:30px}.brand-dot{width:7px;height:7px;border-radius:50%;background:#a98aff}
.form-panel{padding:76px 48px 32px;display:flex;flex-direction:column;justify-content:center}.form-panel>.eyebrow{color:#655092}h2{font-size:29px;letter-spacing:-.8px;margin:12px 0}.intro{color:#627087;font-size:14px;line-height:1.7;margin:0 0 34px}
label{display:block;font-size:13px;font-weight:600;margin:0 0 9px}input:not([type=hidden]){width:100%;min-width:0;min-height:50px;border:1px solid #cdd4e1;border-radius:10px;padding:12px 14px;font:inherit;background:#fafbfe;color:#17223b;margin-bottom:23px}input:focus-visible{outline:3px solid #d8ccff;border-color:#7652ce}
button{display:flex;justify-content:space-between;align-items:center;width:100%;min-height:52px;padding:14px 18px;border:0;border-radius:10px;background:#6940ce;color:#fff;font:inherit;font-size:14px;font-weight:650;cursor:pointer;transition:background .2s}button:hover{background:#5330a8}button:focus-visible{outline:3px solid #a58ade;outline-offset:3px}
.account-note{color:#627087;text-align:center;font-size:12px;margin:20px 0 35px}footer{font-size:11px;color:#627087;text-align:center}footer span{margin:0 10px}.errors{border:1px solid #e4a5a5;background:#fff1f1;color:#8b2020;border-radius:10px;padding:12px;margin-bottom:20px;font-size:13px}.errors p{margin:4px 0}
@keyframes arrive{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:700px){body{padding:16px}.login-shell{grid-template-columns:1fr;max-width:480px;min-height:0;border-radius:20px}.brand-panel{padding:24px 28px}.brand-logo{width:215px;height:72px}.brand-copy h1{font-size:34px;margin:12px 0}.brand-copy .eyebrow,.brand-copy>p:last-child,.brand-footer{display:none}.form-panel{padding:30px 28px}h2{font-size:26px}.intro{margin-bottom:25px}}
.login-spinner{display:none;width:18px;height:18px;border:2px solid #ffffff66;border-top-color:#fff;border-radius:50%;animation:spin .8s linear infinite}.loading .login-spinner{display:block}button:disabled{cursor:wait;opacity:.85}#login-progress{font-size:13px;color:#627087;min-height:20px}@keyframes spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.login-shell{animation:none}button{transition:none}.login-spinner{animation:none}}