body.login { display: grid; grid-template-columns: minmax(380px, 1fr) minmax(420px, 1.1fr); min-height: 100vh; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 20px; letter-spacing: -.02em; }
.logo { width: 30px; height: 30px; border-radius: 9px; background: conic-gradient(from 210deg, #0f9d76, #34d399, #0f9d76); position: relative; }
.logo::after { content: ""; position: absolute; inset: 9px; border-radius: 50%; background: #0b1220; box-shadow: 0 0 0 3px #0b1220; }
.login-art { background: radial-gradient(120% 80% at 0% 0%, #12304a 0%, #0b1220 55%); color: #fff; padding: 40px 48px; display: flex; flex-direction: column; justify-content: space-between; position: relative; overflow: hidden; }
.login-art::before { content: ""; position: absolute; width: 520px; height: 520px; right: -180px; bottom: -180px; border-radius: 50%; border: 1px solid rgba(255,255,255,.06); box-shadow: 0 0 0 60px rgba(255,255,255,.02), 0 0 0 120px rgba(255,255,255,.015); }
.art-body h1 { font-size: 34px; line-height: 1.15; font-weight: 800; letter-spacing: -.03em; max-width: 460px; }
.art-body p { color: #94a3b8; font-size: 16px; max-width: 420px; margin: 16px 0 36px; }
.flow { display: flex; flex-direction: column; gap: 0; max-width: 300px; }
.flow-step { display: flex; align-items: center; gap: 12px; font-weight: 600; color: #e2e8f0; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); padding: 12px 14px; border-radius: 12px; }
.flow-line { width: 2px; height: 18px; background: linear-gradient(#34d399, transparent); margin-left: 21px; }
.dotc { width: 10px; height: 10px; border-radius: 50%; }
.dotc.s1 { background: #f79009; } .dotc.s2 { background: #2e90fa; } .dotc.s3 { background: #12b76a; box-shadow: 0 0 0 4px rgba(18,183,106,.25); }
.art-foot { color: #64748b; font-size: 13px; }
.login-main { display: grid; place-items: center; padding: 32px 20px; }
.login-card { width: 100%; max-width: 380px; display: grid; gap: 18px; }
.login-card h2 { font-size: 28px; letter-spacing: -.02em; }
.login-card p { margin: -10px 0 4px; }
.pwd { position: relative; }
.pwd input { padding-right: 90px; }
.pwd .btn { position: absolute; right: 4px; top: 5px; }
.mobile-only { display: none; }
.mobile-only .logo::after { background: var(--bg); box-shadow: 0 0 0 3px var(--bg); }
@media (max-width: 860px) {
  body.login { grid-template-columns: 1fr; }
  .login-art { display: none; }
  .mobile-only { display: flex; margin-bottom: 12px; }
}