:root {
  color-scheme: light;
  font-family: system-ui, "PingFang SC", "Microsoft YaHei", sans-serif;
  color: #18241d;
  background: #f4f2ec;
  --muted: #536058;
  --line: #d9ddd5;
  --green: #294a38;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-inline: clamp(18px, 5vw, 72px);
}
.topbar {
  width: min(100%, 1000px);
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border-bottom: 1px solid #dcded5;
}
.site-name, .back-link { display: inline-flex; align-items: center; gap: 10px; }
.site-name strong { font-size: 19px; letter-spacing: -.045em; }
.site-name span {
  padding-left: 10px;
  border-left: 1px solid #cdd4cb;
  color: var(--muted);
  font-size: 13px;
}
.back-link {
  gap: 6px;
  min-height: 44px;
  color: var(--green);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
}
.back-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.back-link svg, #verify svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.login-layout {
  width: min(100%, 1000px);
  margin-block: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  padding-block: clamp(30px, 7vh, 84px);
}
.studio-panel, .form-panel { min-width: 0; padding: clamp(28px, 4.7vw, 60px); }
.studio-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 22px;
  overflow: hidden;
  color: #f3f5ed;
  background: #20382c;
  border-radius: 22px 0 0 22px;
}
.studio-copy, .studio-caption, .case-illustration { position: relative; }
.studio-panel::before {
  content: "";
  position: absolute;
  inset: 42% 0 0;
  background-image: radial-gradient(#c4d8be38 1px, transparent 1px);
  background-size: 14px 14px;
  mask-image: linear-gradient(transparent, black 75%);
}
.eyebrow, .studio-caption {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #c3d4bd;
  font-size: 11px;
  font-weight: 650;
  letter-spacing: .12em;
}
.eyebrow span { width: 7px; height: 7px; background: #b7d3a8; border-radius: 50%; }
.studio-copy h2 { margin: 18px 0 13px; font-size: clamp(32px, 4.3vw, 54px); letter-spacing: -.06em; line-height: 1.14; }
.studio-copy p:last-child { color: #d2dfce; font-size: 14px; }
.case-illustration { width: 100%; height: auto; }
.studio-caption { margin: 0; }
.studio-caption span { width: 22px; height: 1px; background: #8aa394; }
.form-panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  border: 1px solid #e0e1d8;
  border-left: 0;
  border-radius: 0 22px 22px 0;
  background: #fff;
}
h1 { margin: 0; font-size: clamp(28px, 3vw, 38px); line-height: 1.2; letter-spacing: -.04em; }
.intro { margin: 10px 0 30px; color: var(--muted); font-size: 14px; line-height: 1.65; }
.field + .field { margin-top: 18px; }
label { display: block; margin-bottom: 8px; font-size: 14px; font-weight: 650; }
input, button { min-height: 48px; font: inherit; border-radius: 9px; }
input {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--line);
  background: #fff;
  color: inherit;
  padding: 0 12px;
  font-size: 16px;
}
input::placeholder { color: #69776d; font-size: 14px; }
.phone, .code { display: flex; align-items: stretch; }
.phone { border: 1px solid var(--line); border-radius: 9px; }
.phone:focus-within { outline: 2px solid #537b61; outline-offset: 2px; }
.phone input { border: 0; outline: none; }
.phone span {
  align-self: center;
  flex: none;
  padding: 0 11px;
  border-right: 1px solid var(--line);
  color: var(--muted);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}
.code { gap: 8px; }
.code input { font-variant-numeric: tabular-nums; }
button { cursor: pointer; padding: 0 13px; font-weight: 650; white-space: nowrap; }
button:disabled { cursor: default; }
#sendCode {
  flex: 0 0 112px;
  border: 1px solid #cbd9cc;
  background: #eef3ec;
  color: var(--green);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
#sendCode:hover:not(:disabled) { background: #e0ecdf; }
#sendCode:disabled { border-color: #dce3dc; color: #53645a; background: #f1f4ef; }
#verify {
  width: 100%;
  min-height: 50px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-inline: 16px;
  border: 0;
  background: var(--green);
  color: #fff;
}
#verify:hover:not(:disabled) { background: #1c3a2a; }
#verify:disabled { color: #405347; background: #dce5dc; }
:where(a, button, .code input):focus-visible { outline: 2px solid #537b61; outline-offset: 2px; }
#message { min-height: 1.5em; margin: 9px 0 18px; color: var(--muted); font-size: 13px; line-height: 1.5; }
#message[data-error] { color: #a12824; }
#message[data-success] { color: #2b633e; }
#code[aria-invalid="true"] { border-color: #a12824; }

.password-login {
  color: #161616;
  background: #fafafa;
  --muted: #595959;
  --line: #dedede;
  --green: #181818;
}
.password-login :is(.topbar, .site-name span, .form-panel) { border-color: var(--line); }
.password-login .studio-panel { background: #242424; }
.password-login .studio-panel::before { background-image: radial-gradient(#ffffff26 1px, transparent 1px); }
.password-login .studio-copy h2 { margin-top: 0; }
.password-login .studio-copy p { color: #dedede; line-height: 1.7; }
.password-login .case-illustration { margin-block: 24px 8px; filter: grayscale(1); }
.password-login #verify { justify-content: center; }
.password-login #verify:hover:not(:disabled) { background: #333; }
.password-login #verify:disabled { background: #e4e4e4; color: #484848; }
.password-login :is(input, button, a):focus-visible { outline: 2px solid #333; outline-offset: 2px; }
.password-login .account-mode { width: 100%; margin-top: 4px; border: 0; background: transparent; color: var(--muted); font-size: 13px; }
.password-login .account-mode:hover { text-decoration: underline; }

@media (max-width: 720px) {
  .topbar { min-height: 62px; }
  .login-layout { max-width: 460px; grid-template-columns: 1fr; padding-block: 32px; }
  .studio-panel { display: none; }
  .form-panel { padding: clamp(20px, 5.5vw, 36px); border: 1px solid #e0e1d8; border-radius: 16px; }
}
@media (max-width: 355px) {
  .site-name { gap: 6px; }
  .site-name span { padding-left: 6px; font-size: 12px; }
  #sendCode { flex-basis: 100px; padding-inline: 8px; }
  .code input { padding-inline: 8px; }
  input::placeholder { font-size: 12px; }
}