:root{font-family:Inter,"SF Pro Display","PingFang SC","Microsoft YaHei",sans-serif;color:#152033;background:#eef3fb;font-synthesis:none}
*{box-sizing:border-box}
body{margin:0;min-width:320px;min-height:100vh}
.login-shell{min-height:100vh;display:grid;grid-template-columns:minmax(520px,1.25fr) minmax(430px,.75fr)}
.story-visual{position:relative;overflow:hidden;min-height:720px;padding:clamp(48px,7vw,100px);color:#fff;background:linear-gradient(90deg,rgba(3,12,31,.94) 0%,rgba(4,17,43,.79) 46%,rgba(4,17,43,.28) 100%),linear-gradient(0deg,rgba(4,13,34,.46),rgba(4,13,34,.08)),url("/images/login-story-hero-v1.png") 58% center/cover no-repeat,#071637}
.story-visual>*{position:relative;z-index:1}
.story-visual:after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 82% 78%,rgba(73,139,255,.16),transparent 34%);pointer-events:none}
.eyebrow{margin:0 0 22px;color:#9ec4ff;font-size:11px;font-weight:800;letter-spacing:.17em}
.story-visual h1{max-width:720px;margin:clamp(100px,16vh,180px) 0 0;font-size:clamp(42px,4.2vw,68px);line-height:1.18;letter-spacing:-.04em}
.story-visual>p:not(.eyebrow):not(.privacy-note){max-width:650px;margin:28px 0 0;color:rgba(229,238,255,.83);font-size:16px;line-height:1.9}
.story-visual ul{display:grid;grid-template-columns:repeat(2,minmax(230px,1fr));gap:15px 30px;max-width:720px;margin:42px 0 0;padding:0;list-style:none;color:rgba(244,248,255,.92);font-size:13px}
.story-visual li:before{content:"";display:inline-block;width:6px;height:6px;margin-right:12px;border-radius:50%;background:#78adff;box-shadow:0 0 0 5px rgba(120,173,255,.12)}
.privacy-note{position:absolute;z-index:1;left:clamp(48px,7vw,100px);bottom:36px;margin:0;color:rgba(213,227,251,.68);font-size:11px}
.login-panel{display:flex;align-items:center;justify-content:center;min-height:720px;padding:52px clamp(36px,6vw,96px);background:rgba(255,255,255,.96)}
.login-card{width:min(100%,430px)}
.compact-brand{display:flex;align-items:center;gap:13px;margin-bottom:clamp(68px,11vh,120px);font-size:19px}
.compact-brand span{display:grid;place-items:center;width:45px;height:45px;border-radius:13px;color:#fff;background:linear-gradient(145deg,#5598ff,#1e66e8);box-shadow:0 12px 26px rgba(46,113,230,.24);font-weight:800}
.login-panel h2{margin:0;font-size:32px;letter-spacing:-.04em}
.login-panel h2+p{margin:13px 0 0;color:#7d899b;font-size:13px}
form{margin-top:38px}
label{display:block;margin:0 0 9px;color:#364153;font-size:12px;font-weight:650}
input{width:100%;height:51px;margin-bottom:22px;padding:0 16px;border:1px solid #dce3ee;border-radius:11px;outline:0;color:#1b2638;background:#fff;font:inherit;font-size:14px;transition:.18s}
input:focus{border-color:#3a7ff2;box-shadow:0 0 0 4px rgba(58,127,242,.1)}
input::placeholder{color:#acb5c4}
#login-error{min-height:18px;margin:-6px 0 13px;color:#d13a45;font-size:12px}
button{width:100%;height:51px;border:0;border-radius:11px;color:#fff;background:linear-gradient(90deg,#347ff6,#256ce8);box-shadow:0 13px 26px rgba(41,111,232,.22);cursor:pointer;font:650 14px/1 inherit}
button:disabled{cursor:wait;opacity:.68}
.login-card small{display:block;margin-top:21px;color:#9aa4b4;font-size:11px;line-height:1.65;text-align:center}
@media(max-width:980px){.login-shell{grid-template-columns:1fr}.story-visual{min-height:450px;padding:40px}.story-visual h1{margin-top:70px}.login-panel{min-height:620px}.compact-brand{margin-bottom:54px}}
@media(max-width:600px){.story-visual{min-height:410px;padding:28px 24px}.story-visual h1{margin-top:54px;font-size:36px}.story-visual ul{grid-template-columns:1fr;gap:10px}.story-visual li:nth-child(n+3){display:none}.privacy-note{display:none}.login-panel{min-height:580px;padding:38px 24px}}