:root {
  --paper: #f4f0e7;
  --soft: #faf8f3;
  --ink: #27241f;
  --muted: #756e64;
  --line: #d8d0c3;
  --red: #a4473e;
  --pine: #213b35;
  --serif: "Noto Serif CJK SC", "Source Han Serif SC", "Songti SC", SimSun, serif;
  --sans: Inter, "Noto Sans CJK SC", "Microsoft YaHei", sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; color: var(--ink); background: var(--paper); font-family: var(--sans); }
body::before { position: fixed; inset: 0; content: ""; pointer-events: none; opacity: .22; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.12'/%3E%3C/svg%3E"); }
button, input { font: inherit; }
a { color: inherit; text-decoration: none; }
button:focus-visible, input:focus-visible, a:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
.auth-shell { display: grid; grid-template-columns: minmax(280px, .7fr) minmax(470px, 1fr); min-height: 100vh; }
.auth-art { position: relative; display: flex; flex-direction: column; justify-content: space-between; min-height: 100vh; padding: 48px clamp(35px, 5vw, 76px); overflow: hidden; color: #f3ede3; background: var(--pine); }
.auth-art::before { position: absolute; right: -25%; bottom: -10%; width: 110%; height: 70%; content: ""; opacity: .46; border-radius: 50% 50% 0 0; background: linear-gradient(145deg, #82978b, #0c2922 65%); transform: rotate(-8deg); }
.auth-art::after { position: absolute; right: 15%; top: 17%; width: 84px; height: 84px; content: ""; border-radius: 50%; background: rgba(186,86,66,.78); box-shadow: 0 0 70px rgba(186,86,66,.25); }
.brand { position: relative; z-index: 2; display: flex; align-items: center; gap: 13px; width: max-content; }
.brand-mark { display: grid; place-items: center; width: 39px; height: 39px; color: #fff5e9; background: var(--red); font: 20px var(--serif); }
.brand b { font: 600 22px var(--serif); letter-spacing: .14em; }
.art-quote { position: relative; z-index: 2; margin: auto 0 12vh; }
.art-quote span { color: #dba99d; font-size: 11px; letter-spacing: .22em; }
.art-quote blockquote { margin: 25px 0; font: 500 clamp(30px, 3.2vw, 46px)/1.7 var(--serif); letter-spacing: .08em; }
.art-quote small { color: rgba(255,255,255,.52); font: 12px var(--serif); }
.auth-main { display: grid; place-items: center; min-height: 100vh; padding: 55px 30px; background: var(--soft); }
.auth-card { width: min(430px, 100%); }
.back-link { display: inline-flex; gap: 8px; margin-bottom: 52px; color: var(--muted); font-size: 12px; }
.back-link:hover { color: var(--red); }
.eyebrow { margin: 0 0 12px; color: var(--red); font-size: 12px; letter-spacing: .2em; }
h1 { margin: 0; font: 500 clamp(34px, 4vw, 48px)/1.35 var(--serif); letter-spacing: .08em; }
.intro { margin: 17px 0 35px; color: var(--muted); font: 14px/1.8 var(--serif); }
label { display: block; margin: 19px 0 8px; color: var(--muted); font-size: 12px; }
.field { position: relative; display: flex; align-items: center; height: 52px; border-bottom: 1px solid var(--line); }
.field:focus-within { border-color: var(--red); }
.field input { width: 100%; height: 100%; padding: 0; color: var(--ink); background: transparent; border: 0; outline: 0; }
.field input::placeholder { color: #aaa39a; }
.hint { margin: 8px 0 0; color: #999188; font-size: 10px; line-height: 1.6; }
.error { min-height: 19px; margin: 14px 0 0; color: var(--red); font-size: 12px; }
.success { padding: 15px; color: var(--pine); background: rgba(64,102,91,.09); font-size: 13px; line-height: 1.7; }
.submit { display: flex; justify-content: space-between; align-items: center; width: 100%; height: 56px; margin-top: 13px; padding: 0 22px; color: white; background: var(--pine); border: 0; cursor: pointer; }
.submit:hover { background: #172d27; }
.submit:disabled { opacity: .65; cursor: wait; }
.foot-note { margin: 24px 0 0; color: var(--muted); text-align: center; font-size: 12px; }
.foot-note a { color: var(--red); }
@media (max-width: 820px) { .auth-shell { display: block; } .auth-art { min-height: 260px; padding: 32px 25px; } .art-quote { margin: 55px 0 0; } .art-quote blockquote { margin: 15px 0; font-size: 28px; } .auth-main { min-height: calc(100vh - 260px); padding: 42px 24px 65px; } .back-link { margin-bottom: 34px; } }