:root {
  color-scheme: dark;
  --bg: #14161a;
  --fg: #f2f4f7;
  --muted: #9aa3af;
  --green: #1f8a4c;
  --yellow: #b8860b;
  --red: #a02c2c;
  --line: #2a2e36;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: system-ui, -apple-system, sans-serif;
  overscroll-behavior: none;
}

#app { display: flex; flex-direction: column; height: 100dvh; }

.mode-button {
  min-height: 56px;
  width: 100%;
  border: none;
  border-bottom: 1px solid var(--line);
  background: #1c2027;
  color: var(--fg);
  font-size: 15px;
  font-weight: 600;
  text-align: left;
  padding: 0 14px;
}

.camera { position: relative; flex: 1; overflow: hidden; background: #000; }
.camera video { width: 100%; height: 100%; object-fit: cover; }

.frame {
  /* Lage (inset) wird von scan-view.js aus FRAME_INSET (camera.js) gesetzt -
     einzige Quelle, die sich auch der native Ausschnitt teilt. */
  position: absolute;
  border: 3px solid rgba(255, 255, 255, 0.7);
  border-radius: 8px;
  pointer-events: none;
}

/* Dauersuche hat einen Barcode im Ausschnitt gefunden - schlichte
   Farbaenderung, keine Animation. */
.frame.detected {
  border-color: var(--green);
}

.stacks {
  display: flex;
  gap: 8px;
  padding: 10px 12px;
  overflow-x: auto;
  border-top: 1px solid var(--line);
  min-height: 76px;
  align-items: center;
}

.stacks button {
  flex: none;
  min-height: 56px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #1c2027;
  color: var(--fg);
  font-size: 17px;
  font-weight: 600;
}

.last {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-top: 1px solid var(--line);
  min-height: 56px;
  font-size: 15px;
  color: var(--muted);
}

.last span { flex: 1; }

.action {
  min-height: 56px;
  border: none;
  border-radius: 10px;
  background: #2b6cb0;
  color: #fff;
  font-size: 18px;
  font-weight: 600;
  padding: 0 18px;
}

.action.secondary { background: #2a2e36; }

.capture { margin: 12px; }

.overlay {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: safe center;
  gap: 18px;
  padding: 24px;
  text-align: center;
  z-index: 10;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.overlay.green { background: var(--green); }
.overlay.yellow { background: var(--yellow); }
.overlay.red { background: var(--red); }

.overlay .stack-id { font-size: 68px; font-weight: 800; letter-spacing: 2px; }
.overlay .detail { font-size: 20px; line-height: 1.5; }
.overlay .pn { font-size: 15px; opacity: 0.85; word-break: break-all; }

.choices { display: grid; gap: 12px; width: 100%; max-width: 420px; }
.choices button { min-height: 64px; font-size: 20px; }

/* Auswahl der Scan-Funktion vor dem Scannen (mode-dialog.js): drei grosse,
   gleich gestaltete Flaechen statt schmaler Schaltflaechen. */
.mode-tile {
  min-height: 96px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px;
}

.mode-tile-label { font-size: 24px; font-weight: 700; }
.mode-tile-hint { font-size: 14px; opacity: 0.8; }

.mode-tile-current { outline: 3px solid var(--fg); outline-offset: -3px; }

.status { padding: 8px 12px; font-size: 14px; color: var(--muted); }
.status.warn { color: #f0b429; }