:root { color-scheme: light dark; font: 16px/1.55 "Inter", system-ui, sans-serif; }
body { margin: 0; background: #f3f6f8; color: #172b3a; }
main { max-width: 530px; margin: auto; padding: 24px 16px 48px; }
header, nav, .row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
header { margin-bottom: 16px; }
h1 { font-size: 23px; margin: 0; }
h2 { font-size: 18px; margin: 0 0 8px; }
h3 { font-size: 16px; margin: 12px 0 4px; }
p { margin: 4px 0 8px; }
small { color: #466377; }
section, form#edit { padding: 16px; background: #fff; border: 1px solid #dbe6ec; border-radius: 15px; }
form#edit { margin-top: 14px; }
nav { justify-content: flex-start; margin-bottom: 12px; }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; border: 0; background: #14628e; color: #fff; padding: 8px 13px; border-radius: 9px; }
button:disabled { opacity: .55; cursor: wait; }
button.quiet, button[aria-pressed="false"] { background: #e9f1f6; color: #14547b; }
a { color: #126390; }
form label { display: block; margin-bottom: 12px; }
input:not([type="checkbox"]), textarea, select { display: block; box-sizing: border-box; width: 100%; padding: 8px; border-radius: 8px; border: 1px solid #a8b9c4; margin-top: 4px; }
fieldset { border: 1px solid #dbe6ec; margin: 0 0 12px; }
fieldset label { margin-bottom: 5px; }
article + article { border-top: 1px solid #dbe6ec; margin-top: 14px; padding-top: 14px; }
.report-item + .report-item { margin-top: 14px; }
.group-actions { display: flex; gap: 8px; margin: 6px 0 14px; flex-wrap: wrap; }
#notice:empty, [hidden] { display: none !important; }
#notice { color: #984b03; margin-bottom: 12px; }
#qr { display: block; margin: 12px 0; background: #fff; }
#disconnect { margin-top: 20px; display: block; }
#pair input { margin-bottom: 8px; }
@media (prefers-color-scheme: dark) {
  body { background: #132330; color: #ecf5fb; }
  section, form#edit { background: #1d3445; border-color: #355063; }
  a, small { color: #99d6ff; }
  #notice { color: #ffc38c; }
}