.route-login .auth-main{display:grid;place-items:center;min-height:100svh;padding:24px;background:var(--sp-page-bg);color:var(--sp-text-primary)}
.kx-login{display:grid;grid-template-columns:1fr 1fr;width:min(1120px,100%);min-height:min(720px,calc(100svh - 48px));border:1px solid var(--sp-border);border-radius:var(--sp-radius-24);background:var(--sp-surface-1);box-shadow:var(--sp-shadow-lg);font-family:var(--sp-font-family)}
.kx-login-story{display:flex;flex-direction:column;justify-content:space-between;gap:48px;padding:48px;border-radius:var(--sp-radius-24) 0 0 var(--sp-radius-24);background:linear-gradient(155deg,var(--sp-brand-800),var(--sp-brand-950));color:var(--sp-text-inverse)}
.kx-login-brand{display:flex;align-items:center;gap:12px}
.kx-login-symbol{display:grid;place-items:center;width:42px;height:42px;border:1px solid color-mix(in srgb,var(--sp-text-inverse) 25%,transparent);border-radius:var(--sp-radius-8);font-size:28px;font-weight:800;letter-spacing:-2px}
.kx-login-brand strong{font-size:24px;font-weight:800;letter-spacing:-.6px;line-height:1.2}
.kx-login-brand strong>span{display:block;margin-top:4px;font-size:11px;font-weight:500;letter-spacing:0;color:var(--sp-neutral-200)}
.kx-login-eyebrow{margin:0 0 22px;font-size:10px;font-weight:600;letter-spacing:.18em;color:var(--sp-neutral-200)}
.kx-login-intro h1{margin:0;font-size:clamp(38px,4.2vw,56px);font-weight:800;line-height:1.08;letter-spacing:-.045em;color:var(--sp-text-inverse)}
.kx-login-intro>p:not(.kx-login-eyebrow){margin:24px 0 0;font-size:16px;line-height:1.7;color:var(--sp-neutral-200)}
.kx-login-modules{display:flex;flex-wrap:wrap;gap:10px 18px;margin-top:34px}
.kx-login-modules>span{display:flex;align-items:center;gap:7px;font-size:11px;font-weight:600;color:var(--sp-neutral-200)}
.kx-login svg{flex-shrink:0;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7}
.kx-login-modules svg{width:16px;height:16px}
.kx-login-story-footer{margin:0;font-size:11px;line-height:1.5;color:var(--sp-neutral-200)}
.kx-login-panel{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:48px;padding:64px 48px 28px;min-width:0}
.kx-login-form-shell{width:min(360px,100%);margin-block:auto}
.kx-login-mobile-brand{display:none}
.kx-login-overline{font-size:10px;font-weight:600;letter-spacing:.16em;color:var(--sp-text-secondary)}
.kx-login-heading h2{margin:14px 0 12px;font-size:30px;font-weight:800;line-height:1.15;letter-spacing:-.035em;color:var(--sp-text-primary)}
.kx-login-heading p{margin:0;font-size:14px;line-height:1.6;color:var(--sp-text-muted)}
.kx-login-form{display:grid;gap:22px;margin-top:34px}
.kx-login-field{display:grid;gap:9px}
.kx-login-field label{font-size:12px;font-weight:600;color:var(--sp-text-secondary)}
.kx-login-input{display:flex;align-items:center;gap:10px;min-height:52px;padding:0 14px;border:1px solid var(--sp-border-strong);border-radius:var(--sp-radius-8);background:var(--sp-surface-1);transition:border-color var(--sp-duration-fast) var(--sp-easing),box-shadow var(--sp-duration-fast) var(--sp-easing)}
.kx-login-input>svg{width:18px;height:18px;color:var(--sp-text-muted)}
.kx-login-input:focus-within{border-color:var(--sp-brand-500);box-shadow:0 0 0 3px var(--sp-color-focus)}
.kx-login .kx-login-input input{width:100%;min-width:0;height:50px;padding:0;border:0;border-radius:0;background:transparent;color:var(--sp-text-primary);font:inherit;font-size:14px;box-shadow:none;outline:none}
.kx-login .kx-login-input input::placeholder{color:var(--sp-text-muted);opacity:1}
.kx-login-password{display:grid;place-items:center;flex:0 0 44px;min-height:44px;margin-right:-10px;padding:0;border:0;border-radius:var(--sp-radius-8);background:transparent;color:var(--sp-text-muted);cursor:pointer}
.kx-login-password:hover{color:var(--sp-color-primary);background:var(--sp-surface-3)}
.kx-login-password[aria-pressed="true"]{color:var(--sp-color-primary)}
.kx-login-submit{display:flex;align-items:center;justify-content:center;gap:12px;min-height:52px;width:100%;margin-top:4px;padding:14px 20px;border:1px solid;border-radius:var(--sp-radius-8);font:inherit;font-size:14px;font-weight:600;cursor:pointer}
.kx-login :is(button,a):focus-visible{outline:3px solid var(--sp-brand-400);outline-offset:4px}
.kx-login-note{display:flex;align-items:flex-start;gap:9px;margin:24px 0 0;font-size:11px;line-height:1.65;color:var(--sp-text-muted)}
.kx-login-note svg{width:16px;height:16px;margin-top:2px}
.kx-login-footer{margin:0;font-size:11px;line-height:1.5;text-align:center;color:var(--sp-text-muted)}
.kx-login-footer>span{margin-inline:6px}
.kx-login-credit{display:block;margin-top:8px;color:var(--sp-text-muted);font-size:10px;font-weight:400;letter-spacing:.03em}
.kx-login-credit strong{font-weight:600}
.kx-login-alert{display:flex;align-items:flex-start;gap:8px;margin-top:20px;padding:12px;border:1px solid;border-radius:var(--sp-radius-8);font-size:12px;line-height:1.55}
.kx-login-alert p{margin:0}
.kx-login-alert svg{width:16px;height:16px;margin-top:2px}
.kx-login-alert--error{color:var(--sp-text-primary);border-color:var(--sp-danger-600);background:var(--sp-danger-50)}
.kx-login-alert--success{color:var(--sp-text-primary);border-color:var(--sp-success-600);background:var(--sp-success-50)}
@media(max-width:900px){.kx-login-story{padding:36px}.kx-login-panel{padding:48px 32px 24px}.kx-login-intro h1{font-size:40px}}
@media(max-width:700px){.route-login .auth-main{padding:20px 16px}.kx-login{grid-template-columns:1fr;min-height:calc(100svh - 40px);box-shadow:var(--sp-shadow-sm);border-radius:var(--sp-radius-16)}.kx-login-story{display:none}.kx-login-panel{gap:36px;padding:32px 24px 24px}.kx-login-mobile-brand{display:block;margin-bottom:44px;font-size:28px;line-height:1.15;font-weight:800;letter-spacing:-.8px;color:var(--sp-text-primary)}.kx-login-mobile-brand>span{display:block;margin-top:5px;font-size:11px;font-weight:500;letter-spacing:0;color:var(--sp-text-muted)}.kx-login-heading h2{font-size:28px}.kx-login .kx-login-input input{font-size:16px}}
@media(max-width:360px){.route-login .auth-main{padding:12px}.kx-login-panel{padding-inline:20px}.kx-login-heading h2{font-size:26px}}
@media(prefers-reduced-motion:reduce){.kx-login *{transition:none!important;animation:none!important}}
