/* Login page: large fields and buttons so it also works on a phone (个人版手机网页). */
/* Computers: brand artwork on the left half, the form on the right; phones: artwork on top. */
.login-body { min-height: 100vh; margin: 0; box-sizing: border-box; }
.login-layout { display: grid; grid-template-columns: 1fr 1fr; min-height: 100vh; }
.login-art { display: grid; place-content: center; justify-items: center; gap: 22px; padding: 40px; color: #fff; background:
    radial-gradient(circle at 50% 46%, rgba(202, 153, 78, .22), transparent 42%),
    linear-gradient(145deg, #132747 0%, #1b3157 55%, #10213e 100%); }
.login-art img { display: block; width: min(560px, 40vw); height: auto; filter: drop-shadow(0 24px 30px rgba(0,0,0,.38)); }
.login-slogan { margin: 0; font-family: SimSun, serif; font-size: clamp(22px, 2.2vw, 32px); letter-spacing: .08em; text-align: center; }
.login-layout > .login-card { align-self: center; justify-self: center; margin: 24px; }
@media (max-width: 860px) {
  .login-layout { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .login-art { gap: 10px; padding: 22px 16px 18px; }
  .login-art img { width: min(240px, 62vw); }
  .login-slogan { font-size: 19px; }
  .login-layout > .login-card { align-self: start; margin: -14px 12px 24px; width: auto; }
}
.login-card { width: min(100%, 420px); max-width: 420px; padding: 28px 24px; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow); color: var(--ink); box-sizing: border-box; }
.login-brand { display: flex; gap: 12px; align-items: center; margin-bottom: 18px; }
.login-brand strong { display: block; font-size: 18px; }
.login-brand small { color: var(--muted); }
.login-card h1 { margin: 0 0 14px; font-size: 22px; }
.login-form { display: grid; gap: 14px; }
.login-form[hidden] { display: none; }
.login-form label { display: grid; gap: 6px; font-size: 15px; }
.login-form input { min-height: 48px; padding: 0 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink); font-size: 17px; }
.login-form .button { min-height: 50px; font-size: 17px; }
.login-card .studio-alert { margin: 0 0 14px; }
.login-form a { color: var(--navy); }
/* Phone + code: the code field and its "获取验证码" button share one row. */
.code-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.code-row .button { min-height: 48px; padding: 0 14px; font-size: 16px; white-space: nowrap; }
.code-row .button:disabled { opacity: .6; cursor: default; }
.sms-test-hint { margin: 0; padding: 10px 12px; border: 1px dashed #c9994e; border-radius: 10px; background: #fff8ec; color: #6b4a12; font-size: 15px; line-height: 1.6; }
.sms-test-hint strong { font: 700 20px/1.4 ui-monospace, Consolas, monospace; letter-spacing: .12em; }
.login-support { margin: 18px 0 0; text-align: center; font-size: 15px; }
.link-button { justify-self: center; padding: 6px 4px; border: 0; background: none; color: var(--navy); font-size: 16px; text-decoration: underline; cursor: pointer; }
/* Computer screens: a roomier card; phones keep the full-width layout above. */
@media (min-width: 900px) {
  .login-card { max-width: 480px; padding: 40px 44px; }
  .login-card h1 { font-size: 26px; }
}
.agreement-docs { display: grid; gap: 10px; }
.agreement-docs details { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; background: var(--surface); }
.agreement-docs summary { cursor: pointer; font-weight: 600; }
.agreement-body { margin: 10px 0 0; max-height: 220px; overflow: auto; white-space: pre-wrap; font: inherit; font-size: 15px; line-height: 1.7; }
.login-form .agreement-consent { display: flex; align-items: flex-start; gap: 10px; }
.login-form .agreement-consent input { min-height: 0; width: 22px; height: 22px; margin-top: 2px; flex: none; }