/* Faultcode Detector – Handy, Hochformat, dunkel, ohne Scrollen */
:root {
    color-scheme: dark;
    --bg: #000;
    --s1: #0c0e11;
    --s2: #14171c;
    --line: #222730;
    --text: #eceff4;
    --muted: #8a93a3;
    --sync: #4cc9f0;
    --one: #5af0a0;
    --zero: #ffb454;
    --bad: #ff5d6c;
    --r: 16px;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font: 15px/1.35 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    -webkit-text-size-adjust: 100%;
}

body {
    min-height: 100dvh;
    display: flex;
    justify-content: center;
    padding: max(8px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right))
             max(10px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
}

/* Eine Spalte über die ganze Höhe: Graph nimmt den Restplatz */
.app {
    width: 100%; max-width: 520px; min-height: calc(100dvh - 18px);
    display: flex; flex-direction: column; gap: 9px;
}
.hidden { display: none !important; }

/* Kopf */
.top { display: flex; align-items: center; justify-content: space-between; padding: 0 2px; }
.top h1 { margin: 0; font-size: 1.05rem; font-weight: 650; letter-spacing: .02em; }
.pill {
    font-size: .75rem; padding: 4px 11px; border-radius: 999px; white-space: nowrap;
    background: var(--s2); color: var(--muted); border: 1px solid var(--line);
}
.pill[data-p="warmup"] { color: #ffd166; border-color: #5a4a1d; }
.pill[data-p="acquire"] { color: var(--sync); border-color: #1d4a5a; animation: blink 1.1s ease-in-out infinite; }
.pill[data-p="measure"] { color: var(--one); border-color: #1d5a3a; }

/* Kamerabild + Overlays */
.view {
    position: relative; overflow: hidden; border-radius: var(--r); flex: 0 0 auto;
    background: var(--s1); border: 1px solid var(--line); min-height: 140px;
}
.view video { display: block; width: 100%; max-height: 28dvh; object-fit: contain; background: #000; }
.hint {
    position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%); max-width: 94%;
    padding: 5px 12px; border-radius: 999px; font-size: .78rem; text-align: center;
    background: rgba(0, 0, 0, .68); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.hint:empty { display: none; }
.ledchip {
    position: absolute; left: 8px; top: 8px; display: flex; align-items: center; gap: 7px;
    padding: 5px 10px; border-radius: 999px; font-size: .75rem; font-weight: 700; letter-spacing: .05em;
    background: rgba(0, 0, 0, .62); color: var(--muted);
}
.ledchip i { width: 11px; height: 11px; border-radius: 50%; background: #2c313a; transition: background .08s, box-shadow .08s; }
.ledchip.on { color: var(--text); }
.ledchip.on i { background: var(--one); box-shadow: 0 0 10px var(--one); }
.syncbadge {
    position: absolute; right: 8px; top: 8px; padding: 5px 12px; border-radius: 999px;
    font-size: .75rem; font-weight: 800; letter-spacing: .14em;
    background: rgba(0, 0, 0, .62); color: var(--muted); border: 1px solid var(--line);
    transition: background .15s, color .15s, box-shadow .15s;
}
.syncbadge.on { background: var(--sync); color: #001018; border-color: var(--sync); box-shadow: 0 0 18px rgba(76, 201, 240, .65); }
.syncbadge.flash { animation: pop .5s ease-out; }
.mark {
    position: absolute; left: 0; top: 0; width: 28px; height: 28px; margin: -14px 0 0 -14px;
    border-radius: 50%; border: 2px solid var(--sync); box-shadow: 0 0 12px rgba(76, 201, 240, .7);
    pointer-events: none; display: none;
}
.mark.on { background: rgba(90, 240, 160, .35); border-color: var(--one); box-shadow: 0 0 16px var(--one); }

/* Karten */
.card { background: var(--s1); border: 1px solid var(--line); border-radius: var(--r); padding: 10px 12px; }
.label { font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }

/* Ergebnis: große Zahl links, Infos rechts, darunter 8 Felder */
.result { flex: 0 0 auto; }
.rtop { display: flex; align-items: center; gap: 14px; }
#code {
    flex: 0 0 auto; min-width: 1.1ch; font-size: clamp(3.4rem, 17vw, 4.8rem); line-height: 1;
    font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -.02em;
}
.rinfo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.meta { color: var(--muted); font: .85rem ui-monospace, Menlo, Consolas, monospace; }
.name { font-size: 1rem; line-height: 1.2; font-weight: 700; overflow-wrap: anywhere; }
.seqline {
    font-size: .76rem; color: var(--muted); min-height: 1.3em; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis;
}
.seqline.good { color: var(--one); }
.seqline.err { color: var(--bad); }
.result.ok { animation: okglow 1.1s ease-out; }
.result.bad { animation: shake .45s ease-out; border-color: var(--bad); }

.slots { display: grid; grid-template-columns: 1.6fr repeat(6, 1fr) 1.1fr; gap: 5px; margin-top: 8px; }
.slot {
    display: flex; flex-direction: column; align-items: center; gap: 0; padding: 4px 0;
    background: var(--s2); border: 1px solid var(--line); border-radius: 9px; color: var(--muted);
    transition: background .12s, border-color .12s, color .12s;
}
.slot small { font-size: .55rem; letter-spacing: .08em; }
.slot b { font-size: 1.1rem; line-height: 1.2; }
.slot.sync.on { background: var(--sync); border-color: var(--sync); color: #001018; }
.slot.one.on { background: rgba(90, 240, 160, .14); border-color: var(--one); color: var(--one); }
.slot.zero.on { background: rgba(255, 180, 84, .14); border-color: var(--zero); color: var(--zero); }
.slots.bad .slot.on { border-color: var(--bad); color: var(--bad); background: rgba(255, 93, 108, .12); }
.slots.bad .slot.sync.on { background: var(--bad); color: #1a0508; }
.slots.ok .slot.par.on { box-shadow: 0 0 0 2px rgba(90, 240, 160, .35); }

/* Graph-Karte nimmt den Restplatz */
.chart { flex: 1 1 0; min-height: 150px; display: flex; flex-direction: column; gap: 6px; }
.row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.legend { display: flex; gap: 10px; font-size: .66rem; color: var(--muted); }
.legend i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 4px; }
.gwrap { position: relative; flex: 1 1 auto; min-height: 76px; border-radius: 10px; overflow: hidden; background: #06080a; }
#graph { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.chips { list-style: none; margin: 0; padding: 0; height: 40px; flex: 0 0 auto; display: flex; gap: 5px; overflow-x: auto; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip {
    flex: 0 0 auto; min-width: 46px; padding: 3px 8px; border-radius: 9px; text-align: center;
    background: var(--s2); border: 1px solid var(--line); font-variant-numeric: tabular-nums;
}
.chip b { display: block; font-size: .78rem; line-height: 1.25; }
.chip span { font-size: .64rem; color: var(--muted); }
.chip.s { border-color: var(--sync); } .chip.s b { color: var(--sync); }
.chip.b1 { border-color: #1f6b49; } .chip.b1 b { color: var(--one); }
.chip.b0 { border-color: #7a5424; } .chip.b0 b { color: var(--zero); }
.chip.bad { border-color: #6b2631; } .chip.bad b { color: var(--bad); }

/* Statuszeile */
.mini { flex: 0 0 auto; font-size: .66rem; color: var(--muted); text-align: center; line-height: 1.3; }

/* Bedienleiste unten (im Fluss, kein Überdecken) */
.bar { flex: 0 0 auto; display: flex; gap: 9px; }
.btn {
    flex: 1; min-height: 52px; border-radius: 15px; border: 1px solid var(--line);
    background: var(--s2); color: var(--text); font: inherit; font-weight: 650; font-size: 1rem;
}
.btn:active { transform: scale(.98); }
.btn:disabled { opacity: .45; }
.btn.primary { background: var(--sync); border-color: var(--sync); color: #001018; }
.btn.danger { background: #2a1115; border-color: #5a1d27; color: #ff8c98; }
.btn.ghost { flex: 0 0 36%; font-size: .9rem; }

@keyframes blink { 50% { opacity: .45; } }
@keyframes pop { 0% { transform: scale(1); } 40% { transform: scale(1.25); } 100% { transform: scale(1); } }
@keyframes okglow { 0% { box-shadow: 0 0 0 0 rgba(90, 240, 160, .7); border-color: var(--one); } 100% { box-shadow: 0 0 0 20px rgba(90, 240, 160, 0); } }
@keyframes shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-7px); } 75% { transform: translateX(7px); } }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }