:root {
  color-scheme: dark;
  --bg: #111;
  --fg: #eee;
  --muted: #999;
  --accent: #4ade80;
  --line: #333;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 15px/1.4 system-ui, sans-serif;
  padding: env(safe-area-inset-top) 12px env(safe-area-inset-bottom);
}
header, .controls {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  align-items: center;
  padding: 10px 0;
}
h1 { font-size: 18px; margin: 0 auto 0 0; }
nav { display: flex; gap: 4px; }
button, select, input {
  font: inherit;
  color: inherit;
  background: #222;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 6px 10px;
}
button { cursor: pointer; }
button[aria-pressed="true"], #start { border-color: var(--accent); }
input[type="number"] { width: 6.5em; }
label { color: var(--muted); display: flex; gap: 6px; align-items: center; }
#view {
  display: block;
  width: 100%;
  max-height: 70vh;
  object-fit: contain;
  background: #000;
  border-radius: 6px;
}
#status { color: var(--muted); font-variant-numeric: tabular-nums; }
#found { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
#found li {
  background: #1d3b27;
  border: 1px solid var(--accent);
  border-radius: 6px;
  padding: 4px 10px;
  font-variant-numeric: tabular-nums;
}
#sheet { display: flex; flex-wrap: wrap; gap: 1cm; padding: 1cm 0; }
#sheet figure { margin: 0; text-align: center; color: #000; background: #fff; padding: 4mm; }
#sheet svg { display: block; }
#sheet figcaption { font-size: 10pt; margin-top: 2mm; }

@media print {
  body { background: #fff; padding: 0; }
  .no-print { display: none !important; }
  #sheet { padding: 0; }
  #sheet figure { break-inside: avoid; }
}

#found li.unknown { background: none; border: none; padding: 0; }
#found li.unknown button { border-color: #f59e0b; }
#found strong { margin-right: 6px; }
#devStatus { color: var(--muted); min-height: 1.4em; }
#deviceList { list-style: none; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
#deviceList li {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
}
#deviceList li div { display: flex; flex-direction: column; margin-right: auto; min-width: 0; }
#deviceList strong, #deviceList small { overflow-wrap: anywhere; }
#deviceList small { color: var(--muted); }
.thumb svg { display: block; width: 44px; height: 44px; }