:root {
  color-scheme: dark;
  --acid: #d8ff4f;
  --paper: #ece9e1;
  --muted: rgba(236,233,225,.42);
  --line: rgba(236,233,225,.13);
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { min-height: 100%; }
body {
  margin: 0; color: var(--paper); background:
    radial-gradient(circle at 20% 20%, rgba(216,255,79,.07), transparent 28%),
    linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px),
    #090b09;
  background-size: auto, 42px 42px, 42px 42px, auto;
  font-family: Arial, "Microsoft YaHei", sans-serif;
}
button, input { font: inherit; }
.auth-shell { display: grid; grid-template-columns: 1.15fr .85fr; min-height: 100vh; }
.auth-intro {
  display: flex; flex-direction: column; justify-content: space-between; padding: 42px 6vw;
  border-right: 1px solid var(--line);
}
.brand { color: var(--paper); text-decoration: none; font-size: 11px; letter-spacing: .14em; }
.brand i { display: inline-block; width: 7px; height: 7px; margin-right: 10px; border: 1px solid var(--acid); border-radius: 50%; }
.brand b { color: var(--acid); font-weight: 400; }
.auth-intro p { color: var(--acid); font-size: 8px; letter-spacing: .24em; }
.auth-intro h1 { margin: 20px 0; font: 400 clamp(46px, 6vw, 82px)/1.07 Georgia, "STSong", serif; letter-spacing: -.06em; }
.auth-intro h1 em { color: transparent; font-style: normal; -webkit-text-stroke: 1px rgba(236,233,225,.6); }
.auth-intro span { color: var(--muted); font-size: 10px; line-height: 1.8; }
.auth-intro small { color: rgba(236,233,225,.22); font-size: 7px; letter-spacing: .16em; }
.auth-panel { display: grid; place-content: center; padding: 34px; background: rgba(13,15,13,.82); }
.auth-tabs, #authForm, .auth-note { width: min(390px, 80vw); }
.auth-tabs { display: grid; grid-template-columns: 1fr 1fr; margin-bottom: 34px; border-bottom: 1px solid var(--line); }
.auth-tabs button { border: 0; padding: 13px; color: var(--muted); background: transparent; cursor: pointer; font-size: 9px; }
.auth-tabs button.active { color: var(--acid); border-bottom: 1px solid var(--acid); }
.auth-heading { margin-bottom: 30px; }
.auth-heading p { margin: 0 0 8px; color: var(--acid); font-size: 7px; letter-spacing: .2em; }
.auth-heading h2 { margin: 0; font: 400 30px/1.2 Georgia, "STSong", serif; }
#authForm label { display: block; margin-top: 20px; }
#authForm label span { display: block; margin-bottom: 8px; color: var(--muted); font-size: 8px; letter-spacing: .1em; }
#authForm input {
  width: 100%; border: 1px solid var(--line); outline: 0; padding: 13px 12px;
  color: var(--paper); background: rgba(255,255,255,.025);
}
#authForm input:focus { border-color: rgba(216,255,79,.55); }
.auth-error { min-height: 18px; margin: 14px 0 0; color: #ff7b68; font-size: 8px; }
.auth-submit {
  display: flex; justify-content: space-between; width: 100%; margin-top: 8px; padding: 14px 16px;
  border: 0; color: #090b09; background: var(--acid); cursor: pointer; font-size: 10px;
}
.auth-submit:disabled { opacity: .55; cursor: wait; }
.auth-note { margin: 20px 0 0; color: rgba(236,233,225,.27); font-size: 7px; line-height: 1.7; }
@media (max-width: 760px) {
  .auth-shell { grid-template-columns: 1fr; }
  .auth-intro { min-height: 38vh; padding: 28px; border-right: 0; border-bottom: 1px solid var(--line); }
  .auth-intro small { display: none; }
  .auth-panel { min-height: 62vh; padding: 32px 20px; }
}