:root {
  --font-display: "Space Grotesk", system-ui, sans-serif;
  --font-sans: "IBM Plex Sans", system-ui, -apple-system, sans-serif;
  --bg: #090b0e;
  --panel: #12161c;
  --panel-2: #161b22;
  --line: #222932;
  --line-2: #2d3540;
  --text: #e8ecf1;
  --muted: #8a93a0;
  --faint: #5b636f;
  --brand: #555347;
  --brand-2: #c0bba3;
  --alert: #ff9ca0;
  color-scheme: dark;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 16px;
  color: var(--text);
  font: 15px/1.45 var(--font-sans);
  background:
    radial-gradient(1000px 560px at 50% -20%, rgba(140, 134, 104, .14), transparent 60%),
    radial-gradient(800px 600px at 100% 100%, rgba(85, 83, 71, .12), transparent 55%),
    var(--bg);
  -webkit-font-smoothing: antialiased;
}
.card {
  width: 100%;
  max-width: 360px;
  background: linear-gradient(180deg, var(--panel), var(--bg));
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 28px 26px 30px;
  box-shadow: 0 30px 70px -30px rgb(0 0 0 / .8);
}
.brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-bottom: 26px;
  text-align: center;
}
.brand-plate {
  display: inline-flex;
  padding: 10px 16px;
  background: #f5f4ef;
  border: 1px solid #e3e1d6;
  border-radius: 12px;
  box-shadow: 0 4px 16px -6px rgb(0 0 0 / .6);
}
.brand-plate img { height: 42px; width: auto; display: block; }
.brand-sub {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .2em;
  color: var(--brand-2);
}
form { display: grid; gap: 14px; }
label { display: grid; gap: 6px; font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
input {
  font: 15px/1.4 var(--font-sans);
  color: var(--text);
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 11px 13px;
  transition: border-color .15s, box-shadow .15s;
}
input:focus {
  outline: none;
  border-color: var(--brand-2);
  box-shadow: 0 0 0 3px rgb(192 187 163 / .18);
}
button {
  font: 600 15px var(--font-sans);
  margin-top: 8px;
  padding: 12px;
  border: 1px solid #6b6956;
  border-radius: 9px;
  background: linear-gradient(180deg, #63614f, var(--brand));
  color: #f5f4ef;
  cursor: pointer;
  letter-spacing: .02em;
  transition: filter .15s, transform .1s;
}
button:hover { filter: brightness(1.12); }
button:active { transform: translateY(1px); }
.err {
  margin: 0;
  padding: 9px 11px;
  border-radius: 8px;
  background: rgb(229 72 77 / .12);
  border: 1px solid rgb(229 72 77 / .3);
  color: var(--alert);
  font-size: 13px;
}