:root {
  --bg: #1a1814;
  --paper: #f6f1e7;
  --ink: #1c1914;
  --muted: #c9bfb0;
  --copper: #b85c38;
  --bad: #f3d2cc;
  --serif: "Iowan Old Style", Palatino, Georgia, serif;
  --sans: "Avenir Next", "Segoe UI", ui-sans-serif, system-ui, sans-serif;
  color-scheme: dark;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-items: center;
  background:
    radial-gradient(900px 420px at 50% -10%, rgba(184, 92, 56, .22), transparent 55%),
    var(--bg);
  color: var(--paper);
  font-family: var(--sans);
}

.login {
  width: min(22rem, calc(100vw - 2rem));
  padding: 1.4rem 1.3rem 1.3rem;
  border: 1px solid rgba(246, 241, 231, .1);
  border-radius: 16px;
  background: rgba(255, 255, 255, .03);
}

h1 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.7rem;
  margin: 0;
}

.sub { margin: .2rem 0 1rem; color: var(--muted); }

label {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  font-size: .78rem;
  color: var(--muted);
}

input {
  font: inherit;
  color: var(--paper);
  background: #242019;
  border: 1px solid rgba(246, 241, 231, .16);
  border-radius: 8px;
  padding: .55rem .65rem;
}

button {
  margin-top: .9rem;
  width: 100%;
  font: inherit;
  border: 0;
  border-radius: 999px;
  padding: .55rem .8rem;
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
}

.error {
  margin: 0 0 .8rem;
  padding: .7rem .8rem;
  border-radius: 10px;
  background: #3a2220;
  color: var(--bad);
}

:focus-visible { outline: 2px solid var(--copper); outline-offset: 2px; }