:root {
  --ink: #17211d;
  --muted: #68736d;
  --paper: #f6f3eb;
  --card: #fffefa;
  --line: #dcded7;
  --green: #2e7555;
  --green-dark: #1f5f42;
  --lime: #dce8b2;
  --orange: #dc724c;
}

* { box-sizing: border-box; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: "Segoe UI", "Microsoft YaHei", sans-serif; -webkit-font-smoothing: antialiased; }
body::before { content: ""; position: fixed; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(46,117,85,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(46,117,85,.035) 1px, transparent 1px); background-size: 32px 32px; }
.login-shell { min-height: 100vh; display: grid; place-items: center; padding: 28px; }
.login-card { position: relative; width: min(460px, 100%); padding: 42px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); box-shadow: 12px 12px 0 var(--lime), 0 24px 70px rgba(40,54,46,.12); }
.brand { display: inline-flex; gap: 12px; align-items: center; color: inherit; text-decoration: none; font-weight: 700; }
.brand-mark { width: 27px; height: 31px; position: relative; display: flex; gap: 3px; align-items: flex-end; }
.brand-mark i { display: block; width: 7px; border-radius: 1px; background: var(--green); }
.brand-mark i:nth-child(1) { height: 20px; }.brand-mark i:nth-child(2) { height: 26px; }.brand-mark i:nth-child(3) { height: 14px; background: var(--orange); }
.eyebrow { margin: 42px 0 14px; color: var(--green); font-size: 11px; font-weight: 800; letter-spacing: .18em; }
h1 { margin: 0; font-family: Georgia, "Songti SC", serif; font-size: clamp(32px, 8vw, 42px); line-height: 1.2; font-weight: 500; letter-spacing: -.035em; }
.hint { margin: 14px 0 30px; color: var(--muted); line-height: 1.6; }
form { display: flex; flex-direction: column; }
label { margin-bottom: 9px; font-size: 13px; font-weight: 700; }
input { width: 100%; border: 1px solid var(--line); border-radius: 5px; background: #faf9f5; padding: 14px; color: var(--ink); font: inherit; outline: none; }
input:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(46,117,85,.12); }
button { margin-top: 14px; border: 0; border-radius: 5px; padding: 14px 16px; color: white; background: var(--green); display: flex; justify-content: space-between; font: inherit; font-weight: 700; cursor: pointer; }
button:hover:not(:disabled) { background: var(--green-dark); } button:disabled { opacity: .55; cursor: wait; }
.error { min-height: 20px; margin: 10px 0 0; color: #b14b36; font-size: 13px; }
.privacy { margin: 24px 0 0; padding-top: 20px; border-top: 1px solid var(--line); color: #8a948f; font-size: 12px; line-height: 1.5; }
@media (max-width: 520px) { .login-shell { padding: 20px; }.login-card { padding: 30px 24px; box-shadow: 7px 7px 0 var(--lime); }.eyebrow { margin-top: 34px; } }