:root{--space-xs: 8px;--space-sm: 14px;--space-md: 18px;--space-lg: 24px;--space-xl: 32px;--space-section: 64px;--shell-width: 1120px;--shell-height: 650px;--control-height: 50px;--font-sans: Inter, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;--color-brand: #3568f5;--color-brand-dark: #2859e5;--color-title: #18345f;--color-text: #253858;--color-muted: #7185a4;--color-subtle: #91a0b6;--color-border: #dce5f2;--color-surface: #ffffff;--color-input: #fbfdff;--radius-shell: 24px;--radius-control: 11px;--shadow-shell: 0 20px 60px rgb(49 85 139 / 9%);--shadow-button: 0 8px 18px rgb(53 104 245 / 22%);--focus-ring: 0 0 0 4px rgb(53 104 245 / 8%)}*{box-sizing:border-box}html,body,#app{min-height:100%}body{margin:0;font-family:var(--font-sans);color:var(--color-text)}button,input,select{font:inherit}button,a,select,input[type=checkbox]{-webkit-tap-highlight-color:transparent}.login-page{min-height:100vh;display:grid;place-items:center;padding:var(--space-lg);background:linear-gradient(135deg,#f6f9ff,#eef4ff 52%,#f8fbff)}.shell{width:min(var(--shell-width),100%);min-height:var(--shell-height);display:grid;grid-template-columns:1fr 1fr;overflow:hidden;background:var(--color-surface);border:1px solid #e0e8f5;border-radius:var(--radius-shell);box-shadow:var(--shadow-shell)}.brand-side{display:flex;flex-direction:column;justify-content:space-between;padding:var(--space-section) 58px;background:linear-gradient(155deg,#edf4ff,#f8fbff)}.brand{display:flex;align-items:center;gap:var(--space-sm)}.logo{width:48px;height:48px;display:grid;place-items:center;flex:0 0 auto;border-radius:14px;background:var(--color-brand);box-shadow:0 8px 18px #3568f542}.logo svg{width:28px;height:28px;fill:none;stroke:#fff;stroke-width:1.8}.brand-name{color:#18386e;font-size:20px;font-weight:700;letter-spacing:.02em}.brand-sub{margin-top:4px;color:#86a0c4;font-size:10px;letter-spacing:.13em}.hero{max-width:430px;margin:auto 0}.hero h1{margin:0 0 18px;color:var(--color-title);font-size:clamp(34px,4vw,42px);line-height:1.22;letter-spacing:-.04em}.hero h1 span{color:var(--color-brand)}.hero p{margin:0;color:var(--color-muted);font-size:16px;line-height:1.9}.dots{display:flex;gap:var(--space-xs);margin-top:34px}.dots i{display:block;width:28px;height:5px;border-radius:99px;background:#c9d8f5}.dots i:first-child{background:var(--color-brand)}.side-note{color:#8ca0bd;font-size:12px}.login-side{display:flex;align-items:center;padding:var(--space-section) 76px;background:var(--color-surface)}.card{width:100%;max-width:370px;margin:auto}.eyebrow{margin-bottom:10px;color:#6f84a4;font-size:13px}.card h2{margin:0 0 10px;color:#20395f;font-size:30px;line-height:1.25}.desc{margin:0 0 var(--space-xl);color:var(--color-subtle);font-size:14px}.field{margin-bottom:var(--space-md)}.field label{display:block;margin-bottom:var(--space-xs);color:#536a8c;font-size:13px;font-weight:600}.input-wrap{position:relative}.input-wrap svg{position:absolute;z-index:1;top:50%;left:15px;width:18px;height:18px;pointer-events:none;transform:translateY(-50%);fill:none;stroke:#9aabc3;stroke-width:1.8}.input-wrap input,.select{width:100%;height:var(--control-height);border:1px solid var(--color-border);border-radius:var(--radius-control);outline:none;background:var(--color-input);color:var(--color-text);padding:0 15px 0 44px;transition:border-color .2s ease,box-shadow .2s ease,background .2s ease}.select{-webkit-appearance:none;-moz-appearance:none;appearance:none;padding-left:15px}.input-wrap .select{padding-left:44px;cursor:pointer}.input-wrap input::placeholder,.select::placeholder{color:#a5b2c5}.input-wrap input:focus,.select:focus{border-color:#7da0fb;box-shadow:var(--focus-ring);background:var(--color-surface)}.row{display:flex;justify-content:space-between;align-items:center;margin:4px 0 24px;color:#7f91ab;font-size:12px}.remember{display:flex!important;align-items:center;gap:var(--space-xs);margin:0!important;color:#7f91ab!important;font-size:12px!important;font-weight:400!important;cursor:pointer}.remember input{width:15px;height:15px;margin:0;accent-color:var(--color-brand)}.link{border:0;padding:0;background:transparent;color:var(--color-brand);cursor:pointer;text-decoration:none}.link:hover,.link:focus-visible{color:var(--color-brand-dark);text-decoration:underline}.error-message{margin:-4px 0 14px;padding:10px 12px;border:1px solid #ffd7dc;border-radius:var(--radius-control);background:#fff7f8;color:#c34f5e;font-size:12px;line-height:1.5}.submit{width:100%;height:var(--control-height);border:0;border-radius:var(--radius-control);background:var(--color-brand);color:#fff;box-shadow:var(--shadow-button);cursor:pointer;font-size:15px;font-weight:600;transition:background .2s ease,box-shadow .2s ease,transform .2s ease}.submit:hover:not(:disabled){background:var(--color-brand-dark);box-shadow:0 10px 22px #3568f547;transform:translateY(-1px)}.submit:focus-visible{outline:none;box-shadow:var(--shadow-button),var(--focus-ring)}.submit:disabled{cursor:wait;opacity:.68}.divider{display:flex;align-items:center;gap:12px;margin:27px 0 20px;color:#a0aec1;font-size:12px}.divider:before,.divider:after{content:"";height:1px;flex:1;background:#e8eef7}.help{margin:0;color:#94a3b8;font-size:12px;line-height:1.7;text-align:center}.help-callout{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin:16px 0 0;padding:12px 14px;border:1px solid #dce7ff;border-radius:var(--radius-control);background:#f5f8ff;color:#6d82a3;font-size:12px;line-height:1.7}.help-callout p{margin:0}.role-options{display:grid;gap:12px;margin-bottom:22px}.role-option{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:58px;padding:12px 16px;border:1px solid var(--color-border);border-radius:var(--radius-control);background:var(--color-input);color:var(--color-title);cursor:pointer;text-align:left}.role-option:hover:not(:disabled),.role-option:focus-visible{border-color:var(--color-brand);box-shadow:var(--focus-ring);outline:none}.role-option:disabled{cursor:not-allowed;opacity:.58}.role-option small{color:var(--color-muted);white-space:nowrap}.back-link{margin-top:8px}@media(max-width:900px){.brand-side,.login-side{padding:52px 40px}}@media(max-width:760px){.login-page{padding:var(--space-sm)}.shell{min-height:auto;grid-template-columns:1fr}.brand-side{min-height:300px;padding:34px 30px 30px}.hero{margin:42px 0 12px}.hero h1{font-size:30px}.side-note{display:none}.login-side{padding:40px 30px 42px}}@media(max-width:420px){.login-page{display:block;padding:10px}.shell{border-radius:18px}.brand-side{min-height:270px;padding:28px 22px 24px}.brand-name{font-size:17px}.brand-sub{font-size:9px}.hero{margin-top:34px}.hero h1{font-size:27px}.hero p{font-size:14px}.login-side{padding:32px 22px 36px}.card h2{font-size:27px}}