:root { font-family: Inter, "Noto Sans SC", "Microsoft YaHei", system-ui, sans-serif; color: #302d40; background: #faf9f6; }
* { box-sizing: border-box; }
body { margin: 0; }
button, input { font: inherit; }
button { cursor: pointer; }
.login-layout { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(420px, .92fr); min-height: 100vh; }
.intro { position: relative; overflow: hidden; background: radial-gradient(circle at 78% 73%, #efe7ff 0, transparent 34%), radial-gradient(circle at 8% 10%, #fff0e6 0, transparent 36%), #f7f4fa; }
.intro::after { content: ""; position: absolute; inset: 0; opacity: .34; pointer-events: none; background-image: radial-gradient(#c8bbdd 1px, transparent 1px); background-size: 28px 28px; mask-image: linear-gradient(135deg, transparent 20%, #000 100%); }
.intro-inner { position: relative; z-index: 1; display: flex; flex-direction: column; width: min(100%, 780px); min-height: 100vh; padding: 34px clamp(34px, 6.1vw, 100px) 38px; }
.brand { display: flex; align-items: center; gap: 11px; font-size: 22px; font-weight: 800; letter-spacing: -.04em; }
.brand-mark { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 13px; background: #7765d8; color: #fff; font-size: 25px; box-shadow: 0 10px 22px #7765d833; }
.brand small { margin-left: 8px; padding-left: 17px; border-left: 1px solid #d9d2e1; color: #a39aac; font-size: 12px; font-weight: 500; letter-spacing: .02em; }
.intro-copy { margin-top: clamp(75px, 12vh, 150px); }
.eyebrow { color: #9b8acf; font-size: 10px; font-weight: 800; letter-spacing: .18em; }
.intro h1 { max-width: 720px; margin: 19px 0 18px; font-size: clamp(36px, 3.6vw, 55px); line-height: 1.3; letter-spacing: -.055em; }
.intro h1 em { color: #7865cb; font-style: normal; }
.intro-copy p { max-width: 450px; margin: 0; color: #81798b; font-size: 15px; line-height: 1.85; }
.illustration { position: relative; width: min(360px, 80%); height: 240px; margin: 18px auto 0; }
.ring { position: absolute; inset: 13px 56px; border: 1px solid #c9bce9; border-radius: 50%; }
.ring-two { inset: 42px 87px; border-color: #e2d8f1; }
.core { position: absolute; inset: 76px 135px; display: grid; place-items: center; border-radius: 50%; background: #eee8ff; color: #8b78d9; font-size: 62px; box-shadow: 0 13px 38px #8b79cf24; }
.idea { position: absolute; padding: 8px 15px; border: 1px solid #e8e1ef; border-radius: 20px; background: #fffdfbe8; color: #786d89; font-size: 12px; box-shadow: 0 8px 21px #55447415; }
.idea-one { top: 21px; left: 15px; }.idea-two { top: 59px; right: 8px; }.idea-three { bottom: 14px; left: 48px; }
.intro-foot { margin-top: auto; color: #a59baa; font-size: 12px; }
.login-side { display: grid; place-items: center; padding: 44px clamp(28px, 5vw, 72px); background: #fffdfa; }
.login-card { width: min(100%, 410px); }
.login-card h2 { margin: 13px 0 9px; font-size: clamp(32px, 3vw, 42px); letter-spacing: -.055em; }
.lead { margin: 0 0 39px; color: #8a8290; font-size: 15px; line-height: 1.75; }
.login-card label { display: block; margin-bottom: 10px; color: #5b5364; font-size: 13px; font-weight: 700; }
.text-input { width: 100%; height: 52px; margin-bottom: 20px; padding: 0 16px; border: 1px solid #ded8e5; border-radius: 12px; outline: 0; background: #fff; color: #302d40; font-size: 15px; }
.text-input:focus { border-color: #9a87de; box-shadow: 0 0 0 4px #8f7ddd1c; }
.text-input::placeholder { color: #b9b1be; }
.password-wrap { position: relative; }
.password-wrap input { width: 100%; height: 52px; padding: 0 66px 0 16px; border: 1px solid #ded8e5; border-radius: 12px; outline: 0; background: #fff; color: #302d40; font-size: 15px; transition: border-color .15s, box-shadow .15s; }
.password-wrap input:focus { border-color: #9a87de; box-shadow: 0 0 0 4px #8f7ddd1c; }
.password-wrap input::placeholder { color: #b9b1be; }
.password-wrap button { position: absolute; right: 8px; top: 8px; height: 36px; padding: 0 11px; border: 0; border-radius: 8px; background: transparent; color: #8777a8; font-size: 12px; }
.password-wrap button:hover { background: #f5f0ff; }
.login-error { margin: 12px 0 0; color: #ae5966; font-size: 13px; }
.login-button { width: 100%; height: 50px; margin-top: 22px; padding: 0 18px; display: flex; align-items: center; justify-content: space-between; border: 0; border-radius: 12px; background: #7765d8; color: #fff; font-size: 14px; font-weight: 750; box-shadow: 0 11px 24px #7765d837; transition: transform .15s, box-shadow .15s; }
.login-button:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 15px 29px #7765d849; }
.login-button:disabled { opacity: .68; cursor: wait; }
.login-button span { font-size: 19px; font-weight: 400; }
.privacy-note { display: flex; gap: 7px; margin-top: 22px; color: #a59cac; font-size: 12px; }
.privacy-note span { color: #a58cda; }
@media (max-width: 850px) { .login-layout { grid-template-columns: 1fr; }.intro-inner { min-height: 310px; padding: 24px 30px 30px; }.intro-copy { margin-top: 44px; }.intro h1 { font-size: clamp(31px, 5vw, 43px); }.intro-copy p { font-size: 13px; }.illustration, .intro-foot { display: none; }.login-side { min-height: calc(100vh - 310px); padding: 42px 30px 70px; align-items: start; }.login-card { width: min(100%, 470px); } }
@media (max-width: 480px) { .intro-inner { min-height: 280px; padding: 20px 24px 26px; }.brand small { display: none; }.intro-copy { margin-top: 47px; }.intro h1 { margin: 13px 0 11px; font-size: 33px; }.intro-copy p { line-height: 1.6; }.login-side { min-height: calc(100vh - 280px); padding: 34px 24px 65px; }.login-card h2 { font-size: 31px; }.lead { margin-bottom: 30px; } }