/* scanner.css — ausgelagert (#72). */
    * { box-sizing: border-box; }
    html, body { margin: 0; min-height: 100%; font: var(--text-base); color: var(--text-body); background: var(--bg-app); }
    /* iOS-Fix (Survey-Pro): Eingaben/Buttons >=16px gegen Auto-Zoom; KEIN user-scalable=no. */
    input, button { font-size: 16px; }
    input, button { min-height: 44px; }
    header.top { background: var(--surface); border-bottom: 1px solid var(--border); box-shadow: var(--shadow-sm); padding-top: env(safe-area-inset-top); }
    header.top .in { max-width: 640px; margin: 0 auto; padding: 12px 16px; display: flex; align-items: center; gap: 12px; justify-content: space-between; }
    header.top img { height: 26px; }
    header.top .ttl { font: var(--fw-semibold) var(--fs-md)/1 var(--font-sans); color: var(--text-strong); }
    .wrap { max-width: 640px; margin: 0 auto; padding: 14px 16px 40px; }
    .cam { position: relative; background: #000; border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 4/3; }
    .cam video { width: 100%; height: 100%; object-fit: cover; display: block; }
    .cam .frame { position: absolute; inset: 16% 16% 16% 16%; border: 3px solid rgba(255,255,255,.85); border-radius: 14px; box-shadow: 0 0 0 100vmax rgba(0,0,0,.25); }
    .cam .hint { position: absolute; left: 0; right: 0; bottom: 8px; text-align: center; color: #fff; font: var(--text-small); text-shadow: 0 1px 3px rgba(0,0,0,.7); }
    .banner { border-radius: var(--radius-lg); padding: 16px; margin: 12px 0; text-align: center; color: #fff; min-height: 78px; display: flex; flex-direction: column; justify-content: center; }
    .banner.idle { background: var(--surface); color: var(--text-muted); border: 1px dashed var(--border); }
    .banner.ok { background: #1f8a4c; } .banner.warn { background: #E8821E; } .banner.bad { background: #C62828; } .banner.muted { background: #607d8b; }
    .banner h2 { margin: 0; font: var(--text-h3); }
    .banner .nm { margin: 4px 0 0; font: var(--fw-semibold) var(--fs-md)/1.2 var(--font-sans); }
    .banner .sub { margin: 3px 0 0; font: var(--text-small); opacity: .92; }
    .stats { display: flex; gap: 10px; margin: 12px 0; }
    .stat { flex: 1; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 12px; text-align: center; }
    .stat b { display: block; font: var(--fw-bold) 26px/1 var(--font-sans); color: var(--text-strong); }
    .stat span { font: var(--text-small); color: var(--text-muted); }
    .row { display: flex; gap: 8px; margin: 12px 0; }
    button { font: var(--fw-semibold) var(--fs-md)/1 var(--font-sans); padding: 12px 16px; border: none; border-radius: var(--radius-md); background: var(--action-primary); color: #fff; cursor: pointer; }
    button.ghost { background: var(--surface); color: var(--text-body); border: 1px solid var(--border-strong); }
    button:disabled { opacity: .5; cursor: default; }
    input[type=text] { flex: 1; font: var(--text-base); padding: 11px 13px; border: 1px solid var(--border-strong); border-radius: var(--radius-md); background: var(--surface); color: var(--text-strong); }
    .log { margin-top: 8px; }
    .log h3 { font: var(--text-small); color: var(--text-muted); margin: 0 0 6px; text-transform: uppercase; letter-spacing: .03em; }
    .log .item { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border: 1px solid var(--border); border-radius: var(--radius-md); margin-bottom: 6px; background: var(--surface); }
    .log .ic { width: 26px; height: 26px; border-radius: 50%; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 15px; flex: 0 0 auto; }
    .log .ic.ok { background: #1f8a4c; } .log .ic.warn { background: #E8821E; } .log .ic.bad { background: #C62828; } .log .ic.muted { background: #607d8b; }
    .log .tx { flex: 1; min-width: 0; } .log .tx b { font: var(--fw-semibold) var(--fs-sm)/1.2 var(--font-sans); color: var(--text-strong); }
    .log .tx span { display: block; font: var(--text-small); color: var(--text-muted); }
    .log .t { font: var(--text-small); color: var(--text-muted); flex: 0 0 auto; }
    .err { color: var(--critical); font: var(--text-small); margin: 8px 0; }

    /* #152: aus inline style= extrahiert (CSP: kein style-src 'unsafe-inline' noetig) */
    .hidden { display: none; }
    .no-underline { text-decoration: none; }
    .scan-brand { display: flex; align-items: center; gap: 10px; }