:root {
  color-scheme: dark;
  font-family: system-ui, sans-serif;
  background: #000;
  color: #00ff66;
}

* { box-sizing: border-box; }

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: #000;
}

body {
  display: flex;
  justify-content: center;
}

#app {
  width: min(100vw, 480px);
  height: min(100vh, 640px);
  padding: 14px;
  overflow-y: auto;
  font-size: 25px;
  line-height: 1.3;
  background: #000;
  scrollbar-color: #00aa44 #000;
}

h1, h2, p { margin: 0 0 14px; }
h1, h2 { font-size: 31px; }
.center { min-height: 100%; display: grid; place-content: center; text-align: center; }
.pair-code { font-size: 68px; letter-spacing: 8px; color: #66ff99; }
.hint, .body, .message { font-size: 24px; }
.status { font-size: 24px; border-bottom: 2px solid #008833; padding-bottom: 8px; margin-bottom: 10px; }
.dim { color: #00aa44; }
.error { color: #66ff99; border: 2px solid #00ff66; padding: 10px; }

.item {
  display: block;
  width: 100%;
  min-height: 52px;
  margin: 7px 0;
  padding: 8px 10px;
  border: 2px solid #007733;
  border-radius: 4px;
  color: #00dd55;
  background: #000;
  font: inherit;
  text-align: left;
}

.item:disabled { color: #006622; border-color: #003311; }
.item.focused, .item:focus { outline: none; color: #000; background: #00ff66; border-color: #66ff99; }
.body { max-height: 126px; overflow: hidden; border-left: 4px solid #00aa44; padding-left: 10px; }
.recognized { border: 2px solid #00aa44; padding: 8px; word-break: break-word; }
.diagnostics { margin: 0 0 14px; font: 20px/1.4 monospace; white-space: pre-wrap; word-break: break-word; }
.photos { display: flex; gap: 6px; overflow-x: auto; margin: 8px 0; }
.photo { flex: 0 0 76px; height: 76px; padding: 3px; }
.photo img { width: 100%; height: 100%; object-fit: cover; }
.spinner { color: #00aa44; animation: pulse 1s steps(2) infinite; }
@keyframes pulse { 50% { color: #66ff99; } }