:root {
  color-scheme: light;
  font-family: ui-rounded, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  background: #17261c;
  color: #173124;
}

* { box-sizing: border-box; }

body {
  min-height: 100vh;
  margin: 0;
  background:
    linear-gradient(135deg, rgb(255 255 255 / 4%) 25%, transparent 25%) 0 0 / 28px 28px,
    linear-gradient(315deg, rgb(255 255 255 / 4%) 25%, transparent 25%) 0 0 / 28px 28px,
    #17261c;
}

.login-shell {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
}

.login-card {
  width: min(100%, 520px);
  padding: clamp(28px, 6vw, 52px);
  border: 4px solid #183626;
  outline: 3px solid #d8caa7;
  background: #fffdf5;
  box-shadow: 14px 14px 0 rgb(0 0 0 / 28%);
}

.login-emblem {
  width: 72px;
  height: 72px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4px;
  margin-bottom: 24px;
  padding: 8px;
  border: 4px solid #173124;
  background: #d8caa7;
}

.login-emblem span:nth-child(1) { background: #5b895f; }
.login-emblem span:nth-child(2) { background: #d6a74f; }
.login-emblem span:nth-child(3) { background: #83b97f; }
.login-emblem span:nth-child(4) { background: #7a4c31; }

.eyebrow {
  margin: 0 0 8px;
  color: #315a3b;
  font-weight: 800;
  letter-spacing: .08em;
}

h1 {
  margin: 0;
  font-size: clamp(2rem, 8vw, 3.5rem);
  line-height: 1.05;
}

.intro,
.privacy-note {
  color: #53675c;
  line-height: 1.7;
}

form {
  display: grid;
  gap: 12px;
  margin-top: 28px;
}

label { font-weight: 800; }

input,
button {
  width: 100%;
  min-height: 52px;
  border: 3px solid #173124;
  border-radius: 0;
  font: inherit;
}

input {
  padding: 10px 14px;
  background: #fff;
}

input:focus-visible,
button:focus-visible {
  outline: 4px solid #f3c652;
  outline-offset: 3px;
}

button {
  margin-top: 4px;
  padding: 10px 18px;
  background: #315a3b;
  color: #fff;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 5px 5px 0 #173124;
}

button:disabled { cursor: wait; opacity: .7; }

.status {
  min-height: 1.5em;
  margin: 4px 0 0;
  color: #a22d28;
  font-weight: 700;
}

.privacy-note {
  margin: 22px 0 0;
  font-size: .88rem;
}

@media (max-width: 520px) {
  .login-shell { padding: 16px; }
  .login-card { box-shadow: 8px 8px 0 rgb(0 0 0 / 28%); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; }
}