:root { color-scheme: light dark; }
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: -apple-system, system-ui, "Segoe UI", Roboto, sans-serif;
  background: #f4f6f4;
  color: #1c2420;
}
.topbar {
  display: flex;
  gap: 12px;
  align-items: baseline;
  padding: 14px 20px;
  background: #1e4d3a;
  color: #fff;
}
.brand { font-weight: 700; }
.muted { opacity: 0.75; }
.topbar .muted { color: #dcebe3; }
.content { max-width: 760px; margin: 0 auto; padding: 20px 16px 48px; }
.card {
  background: #fff;
  border: 1px solid #dfe5e1;
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 16px;
}
h1 { font-size: 1.4rem; margin: 0 0 8px; }
h2 { font-size: 1.1rem; margin: 20px 0 8px; }
label { display: block; margin: 8px 0; font-weight: 600; }
input[type="email"], input[type="text"], input[type="search"], textarea, select {
  display: block;
  width: 100%;
  margin-top: 4px;
  padding: 10px;
  font-size: 1rem;
  border: 1px solid #b9c4bd;
  border-radius: 8px;
}
button {
  padding: 10px 16px;
  font-size: 1rem;
  border: 0;
  border-radius: 8px;
  background: #236c50;
  color: #fff;
  cursor: pointer;
}
button.secondary { background: #5b6f64; }
button:disabled { opacity: 0.45; cursor: default; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 8px 0; }
.form-message { min-height: 1.2em; }
.form-message.error { color: #a4262c; }
.steps { line-height: 1.6; }
.check { display: flex; gap: 8px; align-items: flex-start; font-weight: 400; }
.check input { margin-top: 4px; }
.facts { display: grid; grid-template-columns: 130px 1fr; gap: 4px 12px; }
.facts dt { opacity: 0.7; }
.facts dd { margin: 0; overflow-wrap: anywhere; }
code { font-size: 0.9em; }
#log {
  background: #101613;
  color: #c9e8d4;
  border-radius: 8px;
  padding: 12px;
  min-height: 180px;
  max-height: 420px;
  overflow: auto;
  white-space: pre-wrap;
}
.site-footer { text-align: center; padding: 16px; font-size: 0.85rem; }
.table-scroll { overflow: auto; border: 1px solid #dfe5e1; border-radius: 8px; }
table { border-collapse: collapse; width: 100%; font-size: 0.92rem; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid #edf0ed; }
@media (prefers-color-scheme: dark) {
  body { background: #121715; color: #dfe9e3; }
  .card { background: #1b221e; border-color: #2c3630; }
  input, textarea, select { background: #101613; color: #dfe9e3; border-color: #3a4640; }
}