:root {
  color-scheme: light;
  font-family: Inter, "PingFang SC", "Microsoft YaHei", system-ui, -apple-system, sans-serif;
  color: #211b13;
  background: #f3f0e9;
}

* { box-sizing: border-box; }

body {
  min-height: 100vh;
  margin: 0;
  background:
    radial-gradient(circle at 72% 12%, rgba(180, 126, 34, .18), transparent 38%),
    linear-gradient(180deg, #17130d 0 220px, #f3f0e9 220px 100%);
}

.login-shell {
  display: grid;
  width: min(100% - 32px, 720px);
  min-height: 100vh;
  margin: 0 auto;
  place-items: center;
  padding: 40px 0;
}

.login-panel {
  width: 100%;
  border: 1px solid #ded5c7;
  border-radius: 18px;
  background: rgba(255, 253, 249, .98);
  padding: clamp(30px, 7vw, 58px);
  box-shadow: 0 20px 55px rgba(36, 28, 17, .13);
  text-align: center;
}

.login-kicker {
  margin: 0;
  color: #9b6d1c;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .14em;
}

h1 {
  margin: 10px 0 0;
  font-size: clamp(30px, 6vw, 44px);
  letter-spacing: -.04em;
}

.login-copy {
  margin: 14px 0 28px;
  color: #756d62;
  font-size: 14px;
}

button {
  min-height: 48px;
  border: 0;
  border-radius: 10px;
  background: #d99a00;
  color: #21180b;
  padding: 0 24px;
  cursor: pointer;
  font: inherit;
  font-weight: 900;
  box-shadow: 0 8px 22px rgba(182, 124, 0, .22);
}

button:hover { background: #e4a300; }
button:focus-visible { outline: 3px solid rgba(217, 154, 0, .32); outline-offset: 3px; }
button:disabled { cursor: wait; opacity: .68; }

.login-message {
  min-height: 22px;
  margin: 18px 0 0;
  color: #53695f;
  font-size: 13px;
}

.login-message.is-error { color: #9a3027; }

.login-note {
  margin: 2px 0 0;
  color: #91897d;
  font-size: 11px;
  line-height: 1.6;
}

@media (max-width: 520px) {
  body { background: linear-gradient(180deg, #17130d 0 170px, #f3f0e9 170px 100%); }
  .login-shell { width: min(100% - 24px, 720px); padding: 24px 0; }
  .login-panel { border-radius: 14px; padding: 32px 22px; }
  button { width: 100%; }
}