:root {
  --paper: #f2efe7;
  --sheet: #fbfaf6;
  --ink: #15221d;
  --muted: #59645e;
  --line: #b8b7ae;
  --green: #0b6b5d;
  --green-deep: #074c42;
  --ochre: #b77b2b;
  --serif: "Noto Serif SC", "Source Han Serif SC", "Songti SC", STSong, serif;
  --sans: "Noto Sans SC", "Source Han Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  --mono: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { min-height: 100%; background: var(--paper); }
body { min-height: 100dvh; margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); }
button, input, summary { font: inherit; }
:focus-visible { outline: 3px solid rgba(183, 123, 43, .72); outline-offset: 3px; }

.login-shell {
  width: min(100%, 1120px);
  min-height: 100dvh;
  margin-inline: auto;
  display: grid;
  align-items: center;
  gap: clamp(34px, 7vw, 96px);
  padding: max(32px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) max(32px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left));
}

.eyebrow { margin: 0 0 12px; color: var(--green); font: 700 11px/1.4 var(--mono); letter-spacing: .14em; }
.login-intro h1 { margin: 0; font: 700 clamp(40px, 7vw, 78px)/1.04 var(--serif); letter-spacing: -.04em; }
.login-intro > p:not(.eyebrow) { max-width: 45ch; margin: 26px 0 0; color: var(--muted); line-height: 1.8; }
.privacy-note { display: grid; gap: 6px; margin-top: 38px; border-top: 4px solid var(--green); padding-top: 16px; }
.privacy-note span { color: var(--muted); font-size: 13px; line-height: 1.7; }

.login-panel { min-width: 0; background: var(--sheet); border: 1px solid var(--ink); padding: clamp(24px, 5vw, 46px); box-shadow: 10px 10px 0 rgba(21, 34, 29, .08); }
.login-panel h2 { margin: 0; font: 700 clamp(28px, 4vw, 40px)/1.15 var(--serif); }
.login-panel > label { display: block; margin-top: 26px; }
form { display: grid; gap: 9px; margin-top: 18px; }
label { margin-top: 8px; font-size: 13px; font-weight: 750; }
input { width: 100%; min-height: 50px; border: 1px solid var(--line); border-radius: 0; background: white; color: var(--ink); padding: 11px 13px; font-size: 16px; }
button { min-height: 52px; margin-top: 16px; border: 1px solid var(--green); border-radius: 2px; background: var(--green); color: white; padding: 12px 18px; font-weight: 750; cursor: pointer; }
button:hover { background: var(--green-deep); }
button:disabled { cursor: wait; opacity: .55; }
.signin-actions { display: grid; margin-top: 12px; }
.primary-action { width: 100%; }
.secondary-action { width: 100%; background: transparent; color: var(--green); }
.secondary-action:hover { color: white; }
.method-hint { margin: 10px 0 0; color: var(--muted); font-size: 12px; line-height: 1.65; }
.recovery-panel { margin-top: 22px; border-top: 1px solid var(--line); padding-top: 17px; }
.recovery-panel summary { min-height: 42px; display: flex; align-items: center; color: var(--green); font-size: 13px; font-weight: 750; cursor: pointer; list-style: none; }
.recovery-panel summary::-webkit-details-marker { display: none; }
.recovery-panel summary::after { margin-left: auto; content: "+"; font: 600 20px/1 var(--mono); }
.recovery-panel[open] summary::after { content: "−"; }
.enrollment { margin-top: 26px; border-top: 5px solid var(--green); padding-top: 20px; }
.enrollment h3 { margin: 0; font: 700 25px/1.25 var(--serif); }
.enrollment > p:not(.eyebrow) { margin: 12px 0 0; color: var(--muted); font-size: 13px; line-height: 1.7; }
.text-action { width: 100%; min-height: 44px; margin-top: 6px; border-color: transparent; background: transparent; color: var(--green); }
.text-action:hover { background: rgba(11, 107, 93, .08); color: var(--green-deep); }
.status { min-height: 22px; margin: 18px 0 0; color: #9b3540; font-size: 13px; line-height: 1.6; }
.fine-print { margin: 22px 0 0; color: var(--muted); font-size: 11px; line-height: 1.7; }

@media (min-width: 700px) {
  .login-shell { grid-template-columns: minmax(0, 7fr) minmax(330px, 5fr); }
}

@media (max-width: 699px) {
  .login-shell { align-content: start; padding-top: max(24px, env(safe-area-inset-top)); }
  .login-intro h1 { font-size: clamp(38px, 11vw, 58px); }
  .privacy-note { margin-top: 26px; }
  .login-panel { box-shadow: none; }
}