*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body {
  min-height: 100svh;
  display: flex; align-items: center; justify-content: center;
  background: #F2EDE1;
  color: #2B2620;
  font-family: 'DM Sans', system-ui, sans-serif;
  padding: 24px;
}
.card {
  background: #FAF7EF;
  border: 1px solid #DDD5C7;
  border-radius: 22px;
  padding: 44px 32px 32px;
  width: 100%; max-width: 380px;
  box-shadow: 0 1px 2px rgba(26,21,18,.04), 0 18px 44px rgba(26,21,18,.08);
  text-align: center;
}
.logo { font-size: 2.8rem; margin-bottom: 10px; line-height: 1; }
h1 {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.75rem; font-weight: 500; letter-spacing: -.02em;
  color: #2B2620; margin-bottom: 6px;
}
h1 em {
  font-style: italic;
  color: #6E9057;
  font-weight: 500;
}
.tagline {
  font-family: ui-monospace, 'SF Mono', monospace;
  font-size: .68rem; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase;
  color: #A39B91; margin-bottom: 30px;
}
.err {
  background: #FAE4DC; color: #A64527;
  border-radius: 10px; padding: 10px 14px;
  font-size: .9rem; font-weight: 500;
  margin-bottom: 14px;
}
input[type="password"] {
  width: 100%; height: 52px;
  padding: 0 18px;
  border: 1.5px solid #DDD5C7;
  border-radius: 999px;
  background: #fff;
  font-size: 1rem; font-family: inherit;
  color: #2B2620;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
  margin-bottom: 12px;
}
input[type="password"]:focus {
  border-color: #6E9057;
  box-shadow: 0 0 0 4px #DDE8CD;
}
.user-select {
  display: flex; gap: 10px; margin-bottom: 12px;
}
.user-select input[type="radio"] {
  position: absolute; opacity: 0; pointer-events: none;
}
.user-select label {
  flex: 1; height: 52px;
  display: flex; align-items: center; justify-content: center;
  border: 1.5px solid #DDD5C7;
  border-radius: 999px;
  background: #fff;
  font-size: 1rem; font-weight: 500; font-family: inherit;
  color: #2B2620;
  cursor: pointer;
  transition: border-color .15s, background .15s, color .15s, box-shadow .15s;
}
.user-select input[type="radio"]:checked + label {
  border-color: #6E9057;
  background: #6E9057;
  color: #fff;
  box-shadow: 0 0 0 4px #DDE8CD;
}
.user-select input[type="radio"]:focus-visible + label {
  box-shadow: 0 0 0 4px #DDE8CD;
}
button[type="submit"] {
  width: 100%; height: 52px;
  background: #6E9057; color: #fff;
  border: none; border-radius: 999px;
  font-size: 1rem; font-weight: 600; font-family: inherit;
  letter-spacing: .01em;
  cursor: pointer; transition: background .15s, transform .1s;
}
button[type="submit"]:active { background: #516E3D; transform: scale(.98); }
html[data-theme="dark"] body {
  background: #181512;
  color: #F5EFE6;
}
html[data-theme="dark"] .card {
  background: #231F1A;
  border-color: #3A332A;
  box-shadow: 0 1px 2px rgba(0,0,0,.28), 0 18px 44px rgba(0,0,0,.34);
}
html[data-theme="dark"] h1 { color: #F5EFE6; }
html[data-theme="dark"] h1 em { color: #A8C48D; }
html[data-theme="dark"] .tagline { color: #93877A; }
html[data-theme="dark"] .err {
  background: #3A2019;
  color: #F0A289;
}
html[data-theme="dark"] input[type="password"],
html[data-theme="dark"] .user-select label {
  background: #181512;
  border-color: #3A332A;
  color: #F5EFE6;
}
html[data-theme="dark"] input[type="password"]:focus,
html[data-theme="dark"] .user-select input[type="radio"]:focus-visible + label {
  border-color: #A8C48D;
  box-shadow: 0 0 0 4px rgba(168,196,141,.18);
}
html[data-theme="dark"] .user-select input[type="radio"]:checked + label {
  border-color: #A8C48D;
  background: #6E9057;
  color: #10100E;
  box-shadow: 0 0 0 4px rgba(168,196,141,.18);
}