:root {
  color-scheme: dark;
}
body {
  margin: 0;
  font: 14px/1.45 system-ui, sans-serif;
  background: #101418;
  color: #d6dde4;
}
nav {
  display: flex;
  gap: 16px;
  align-items: center;
  padding: 10px 16px;
  border-bottom: 1px solid #232b33;
  background: #151b22;
}
nav strong { margin-right: 8px; }
nav a { color: #7fb3ff; text-decoration: none; }
main { padding: 16px; }
h1 { font-size: 20px; margin: 8px 0 12px; }
h2 { font-size: 16px; margin: 20px 0 8px; }
table { border-collapse: collapse; margin: 8px 0; }
th, td {
  border: 1px solid #26303a;
  padding: 5px 8px;
  text-align: left;
}
th { background: #182028; font-weight: 600; }
input {
  background: #0d1115;
  border: 1px solid #2c3641;
  color: #dbe3ea;
  padding: 4px 6px;
  border-radius: 4px;
  width: 110px;
}
input[type="checkbox"] { width: auto; }
td.inactive input { opacity: 0.55; }
.hint { color: #6f7d8a; font-size: 12px; margin-left: 6px; }
.muted { color: #6f7d8a; }
button {
  background: #1f2937;
  border: 1px solid #37424f;
  color: #d6dde4;
  padding: 6px 12px;
  border-radius: 5px;
  cursor: pointer;
}
button:hover { background: #273244; }
.good { color: #58d68d; font-weight: 600; }
.bad { color: #ff6b6b; font-weight: 600; }
.warn { color: #f2c14e; font-weight: 600; }
#flash { margin-left: auto; font-size: 13px; }
.flash-ok { color: #58d68d; }
.flash-bad { color: #ff6b6b; }
.settings-grid input { margin-right: 6px; }
table.history { width: 100%; }
.scan-head { background: #1b222b; }
code { background: #182028; padding: 1px 4px; border-radius: 3px; }

/* login page */
#step-id, #step-pin {
  display: flex;
  gap: 8px;
  align-items: center;
  margin: 12px 0;
}
#step-id label, #step-pin label { min-width: 90px; }
#msg { min-height: 20px; }