:root {
  color-scheme: dark;
  --paper: #e9e3d8;
  --muted: #8a8984;
  --ink: #080808;
  --line: #30302d;
  --cue: #dc4b3b;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; margin: 0; }
body { background: var(--ink); color: var(--paper); font-family: Inter, "PingFang SC", "Microsoft YaHei", sans-serif; }
button, input { font: inherit; }

.login-page {
  display: grid;
  min-height: 100svh;
  place-items: center;
  background:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px),
    #080808;
  background-size: 100% 72px, 72px 100%;
}

.login-shell {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(300px, 420px);
  grid-template-rows: auto 1fr auto;
  gap: 0 7vw;
  width: min(1100px, calc(100vw - 48px));
  min-height: min(680px, calc(100svh - 48px));
  padding: 30px 0 20px;
  border-block: 1px solid var(--line);
}

.login-brand { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; font-size: 12px; font-weight: 800; letter-spacing: .18em; }
.brand-index { display: grid; width: 31px; aspect-ratio: 1; place-items: center; background: var(--cue); color: white; font-size: 10px; letter-spacing: 0; }
.login-copy { align-self: center; }
.eyebrow { margin: 0 0 18px; color: var(--cue); font-size: 10px; font-weight: 800; letter-spacing: .2em; }
.login-copy h1 { margin: 0; font-family: "Songti SC", STSong, SimSun, serif; font-size: clamp(58px, 8vw, 116px); font-weight: 400; letter-spacing: -.06em; line-height: .95; }
.login-copy p:last-child { max-width: 32em; margin: 28px 0 0; color: var(--muted); font-size: 14px; line-height: 1.9; }
.login-form { align-self: center; padding: 34px 0; }
.login-form label { display: block; margin: 22px 0 8px; color: #aaa8a1; font-size: 11px; font-weight: 700; letter-spacing: .12em; }
.login-form input { width: 100%; border: 0; border-bottom: 1px solid #4a4944; border-radius: 0; outline: 0; background: transparent; color: var(--paper); padding: 12px 0; font-size: 18px; transition: border-color .16s; }
.login-form input:focus { border-color: var(--paper); }
.login-form button { display: flex; justify-content: space-between; width: 100%; margin-top: 38px; border: 0; background: var(--cue); color: white; padding: 17px 19px; font-size: 13px; font-weight: 800; letter-spacing: .08em; cursor: pointer; transition: background .16s, transform .16s; }
.login-form button:hover { background: #f05b49; }
.login-form button:active { transform: translateY(1px); }
.login-form button:focus-visible { outline: 2px solid var(--paper); outline-offset: 3px; }
.login-note, .login-error { min-height: 18px; margin: 12px 0 0; font-size: 11px; }
.login-note { color: #686761; }.login-error { color: #ff8b7b; }
.login-shell footer { grid-column: 1 / -1; display: flex; justify-content: space-between; color: #55544f; font-size: 9px; font-weight: 700; letter-spacing: .18em; }

@media (max-width: 720px) {
  .login-shell { grid-template-columns: 1fr; grid-template-rows: auto auto 1fr auto; width: calc(100vw - 32px); min-height: calc(100svh - 32px); padding-top: 20px; }
  .login-brand { grid-column: 1; }
  .login-copy { margin-top: 56px; }
  .login-copy h1 { font-size: clamp(52px, 16vw, 80px); }
  .login-copy p:last-child { margin-top: 18px; }
  .login-form { padding: 20px 0 34px; }
  .login-shell footer { grid-column: 1; }
}