:root {
  color-scheme: light;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", sans-serif;
  font-synthesis: none;
  color: #243449;
  background: #f3f5f8;
  --brand: #16243b;
  --accent: #3b65a3;
  --line: #dce3eb;
  --muted: #66758a;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; min-width: 280px; min-height: 100vh; font-size: 14px; line-height: 1.6; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
.login-shell {
  display: grid;
  grid-template-columns: minmax(340px, .95fr) minmax(400px, 1.05fr);
  width: min(1080px, calc(100% - 64px));
  min-height: 650px;
  margin: max(42px, calc((100vh - 650px) / 2)) auto 42px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 20px 70px #182a4410;
}
.login-identity { position: relative; isolation: isolate; display: flex; flex-direction: column; padding: 44px; overflow: hidden; background: var(--brand); color: #fff; }
.login-brand { display: inline-flex; align-items: center; gap: 12px; width: fit-content; font-size: 24px; font-weight: 650; letter-spacing: -.02em; }
.login-brand small { display: block; margin-top: 3px; font-size: 10px; font-weight: 500; letter-spacing: .15em; color: #b3c3da; }
.login-mark { display: grid; place-items: center; width: 46px; height: 46px; border: 1px solid #ffffff29; border-radius: 11px; background: #ffffff0b; color: #fff; font-size: 16px; font-weight: 750; letter-spacing: -.06em; }
.login-identity-copy { position: relative; z-index: 1; margin: 88px 0 115px; }
.login-section-label { display: inline-flex; align-items: center; gap: 9px; font-size: 12px; letter-spacing: .06em; color: #c5d3e6; }
.login-section-label::before { content: ""; width: 20px; height: 1px; background: #8aa8d2; }
.login-identity-copy h2 { margin: 18px 0; font-size: clamp(30px, 3.2vw, 40px); line-height: 1.5; font-weight: 550; letter-spacing: -.025em; }
.login-identity-copy p { margin: 0; color: #b3c3da; font-size: 14px; }
.login-identity-art { position: absolute; z-index: 0; right: -100px; bottom: 78px; width: 350px; height: 250px; transform: rotate(-24deg); pointer-events: none; }
.login-identity-art span { position: absolute; inset: 0; border: 1px solid #8daace26; border-radius: 24px; }
.login-identity-art span:nth-child(2) { inset: 32px; }
.login-identity-art span:nth-child(3) { inset: 64px; background: #6c8db70b; }
.login-identity-footer { position: relative; z-index: 1; display: flex; align-items: center; gap: 14px; margin: auto 0 0; color: #b3c3da; font-size: 11px; letter-spacing: .12em; }
.login-identity-footer span { padding-left: 14px; border-left: 1px solid #8daace46; letter-spacing: .03em; }
.login-content { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 56px 48px 40px; }
.login-card { width: 100%; max-width: 360px; }
.login-eyebrow { color: var(--accent); font-size: 11px; font-weight: 650; letter-spacing: .12em; }
.login-card h1 { margin: 12px 0 8px; color: var(--brand); font-size: 26px; line-height: 1.4; font-weight: 650; letter-spacing: -.035em; }
.login-intro p, .login-card > p { margin: 0 0 30px; color: var(--muted); font-size: 14px; line-height: 1.75; }
form { display: grid; gap: 20px; }
label { display: grid; gap: 8px; color: #46556a; font-size: 13px; font-weight: 550; }
input { display: block; width: 100%; min-width: 0; height: 46px; padding: 0 13px; border: 1px solid #cdd7e2; border-radius: 7px; background: #fff; color: #243449; outline: none; transition: border-color .15s, box-shadow .15s; }
input:hover:enabled { border-color: #a3b3c7; }
input:focus { border-color: #6888b8; box-shadow: 0 0 0 3px #3b65a315; }
input:disabled { background: #f3f5f8; color: var(--muted); }
.login-message { min-height: 20px; margin: -2px 0 -4px; color: var(--muted); font-size: 13px; line-height: 1.7; overflow-wrap: anywhere; }
.login-message[data-kind="error"], .login-message.is-error { color: #ad3f3f; }
.login-message[data-kind="wait"] { color: #946017; }
button { min-height: 44px; border: 1px solid var(--accent); border-radius: 7px; background: var(--accent); color: #fff; font-size: 14px; font-weight: 600; cursor: pointer; transition: background .15s, border-color .15s; }
button:hover:enabled { background: #2f548a; border-color: #2f548a; }
button:disabled { opacity: .55; cursor: default; }
button:focus-visible, a:focus-visible { outline: 3px solid #a0bce3; outline-offset: 3px; }
.register-toggle { display: block; width: 100%; min-height: 40px; margin: 20px 0 0; border: 1px solid var(--line); background: #fff; color: var(--accent); font-size: 13px; font-weight: 500; }
.register-toggle:hover:enabled { border-color: #a6b8d1; background: #f5f8fc; color: #2f548a; }
.login-footer { width: 100%; max-width: 360px; margin: 32px 0 0; padding-top: 18px; border-top: 1px solid #e9edf2; color: var(--muted); font-size: 12px; line-height: 1.8; }
@media (max-width: 900px) {
  .login-shell { width: min(960px, calc(100% - 40px)); grid-template-columns: minmax(280px, .85fr) minmax(340px, 1.15fr); }
  .login-identity { padding: 32px; }
  .login-content { padding: 40px 32px; }
}
@media (max-width: 700px) {
  .login-shell { display: block; width: min(460px, calc(100% - 32px)); min-height: 0; margin: 28px auto; border-radius: 14px; }
  .login-identity { padding: 26px 28px; }
  .login-brand { font-size: 22px; }
  .login-mark { width: 42px; height: 42px; }
  .login-identity-copy, .login-identity-art, .login-identity-footer { display: none; }
  .login-content { padding: 30px 28px 28px; }
  .login-card { max-width: none; }
  .login-card h1 { font-size: 24px; }
  input { font-size: 16px; }
  .login-footer { margin-top: 25px; }
}
@media (max-width: 360px) { .login-content, .login-identity { padding-left: 20px; padding-right: 20px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; } }