:root{
  --bg:#0f172a; --panel:#1e293b; --panel2:#334155;
  --text:#f1f5f9; --muted:#94a3b8; --accent:#38bdf8; --accent2:#0ea5e9;
  --ok:#22c55e; --warn:#f59e0b; --line:#475569;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg);color:var(--text);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;font-size:18px;
  -webkit-tap-highlight-color:transparent;overscroll-behavior:none}

.screen{position:fixed;inset:0;display:none;flex-direction:column;
  padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom)}
.screen.active{display:flex}

.brand{padding:34px 22px 14px;font-size:30px;font-weight:800;letter-spacing:.5px}
.brand span{display:block;font-size:15px;font-weight:500;color:var(--accent);letter-spacing:2px;text-transform:uppercase}

.bar{display:flex;align-items:center;gap:8px;padding:16px 12px;border-bottom:1px solid var(--line)}
.bar h2{margin:0;font-size:20px}
.back{background:none;border:none;color:var(--accent);font-size:38px;line-height:1;
  width:48px;height:48px;cursor:pointer}

.body{flex:1;padding:22px;overflow:auto}
.foot{padding:18px 22px calc(20px + env(safe-area-inset-bottom))}

.field{display:block;margin-bottom:20px}
.field>span{display:block;font-size:15px;color:var(--muted);margin-bottom:8px}
select,input[type=text]{width:100%;padding:18px;border-radius:14px;border:1px solid var(--line);
  background:var(--panel);color:var(--text);font-size:20px;outline:none}
select:focus,input:focus{border-color:var(--accent)}

.btn{border:none;border-radius:16px;font-size:18px;font-weight:700;padding:16px 20px;
  cursor:pointer;background:var(--panel2);color:var(--text)}
.btn.primary{background:linear-gradient(180deg,var(--accent),var(--accent2));color:#001018}
.btn.big{width:100%;padding:22px;font-size:22px}
.btn:disabled{opacity:.5}

/* ---------- Vollbild-Erfassung ---------- */
.cap{position:absolute;inset:0}
.cap-view{position:absolute;inset:0;display:none;flex-direction:column}
.cap-view.active{display:flex}

.cap-bar{display:flex;align-items:center;gap:6px;padding:12px 10px;
  padding-top:calc(12px + env(safe-area-inset-top))}
.cap-back{background:none;border:none;color:var(--accent);font-size:40px;line-height:1;width:52px;height:52px;cursor:pointer}
.cap-title{flex:1;font-size:22px;font-weight:700}
.cap-clear{background:var(--panel2);border:none;color:var(--text);font-size:16px;font-weight:600;
  padding:12px 18px;border-radius:12px;cursor:pointer}

/* Schreibfelder (1 oder 2 gestapelt) */
.pad-fields{flex:1;display:flex;flex-direction:column;gap:10px;padding:4px 12px 12px}
.pad-field{display:flex;flex-direction:column;min-height:0}
.pad-label{font-size:15px;font-weight:700;color:var(--muted);padding:2px 4px 6px}
.pad-label small{font-weight:500;color:#8ea1b5;font-size:13px}
.pad-box{position:relative;flex:1;background:#fff;border-radius:16px;overflow:hidden;touch-action:none}
canvas.pad{width:100%;height:100%;display:block;touch-action:none}
.pad-clear{position:absolute;top:8px;right:10px;width:34px;height:34px;border-radius:50%;
  background:#e2e8f0;color:#334155;font-size:18px;display:flex;align-items:center;justify-content:center;cursor:pointer}

/* Live-Kamera */
.cam-wrap{position:relative;flex:1;background:#000;display:flex;align-items:center;justify-content:center;overflow:hidden}
.cam-video{width:100%;height:auto;display:block}
.cam-mask{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none}
.cam-guide{width:88%;aspect-ratio:4.7/1;border:3px solid #38bdf8;border-radius:10px;
  box-shadow:0 0 0 2000px rgba(0,0,0,.45)}
.cam-tip{position:absolute;top:calc(14px + env(safe-area-inset-top));left:0;right:0;text-align:center;
  color:#fff;font-size:16px;font-weight:600;text-shadow:0 1px 3px #000}

/* Freihand-Zeichenfeld */
.cap-view.schreiben{background:var(--bg)}
.cap-sclear{background:var(--panel2);border:none;color:var(--text);font-size:15px;font-weight:600;
  padding:10px 16px;border-radius:12px;cursor:pointer}
.pad-box{position:relative;flex:1;margin:8px 12px;background:#fff;border-radius:16px;overflow:hidden;touch-action:none}
canvas.pad{width:100%;height:100%;display:block;touch-action:none}
.pad-hint{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  color:#94a3b8;font-size:20px;font-weight:600;text-align:center;pointer-events:none;padding:20px}

/* Foto-Vorschau nach Aufnahme */
.cap-view.preview{background:var(--bg)}
.prev-wrap{flex:1;display:flex;align-items:center;justify-content:center;padding:16px;background:#0b1220}
.prev-img{max-width:100%;max-height:100%;border-radius:12px;background:#fff}

/* Admin-Button oben rechts (Startseite) */
.admin-link{position:absolute;top:calc(18px + env(safe-area-inset-top));right:18px;z-index:10;
  color:var(--accent);text-decoration:none;font-weight:700;font-size:15px;
  background:var(--panel);padding:10px 14px;border-radius:12px;border:1px solid var(--line)}

/* Warteschlange-Hinweis */
.pending{background:#3a2a06;color:#fde68a;border-radius:12px;padding:12px 14px;font-size:14px;font-weight:600;text-align:center}

/* Bestätigen: zwei Fotos */
.conf-photos{display:flex;gap:12px;margin:16px 0}
.conf-photos figure{flex:1;margin:0;text-align:center}
.conf-photos figcaption{font-size:13px;color:var(--muted);margin-bottom:6px}
.conf-photos img{width:100%;height:120px;object-fit:contain;background:#fff;border-radius:12px}

.done-upload{font-size:15px;font-weight:600;color:var(--accent)!important}

/* Schwebende Buttons */
.fab{position:fixed;bottom:calc(24px + env(safe-area-inset-bottom));border:none;cursor:pointer;
  font-weight:800;box-shadow:0 8px 24px rgba(0,0,0,.4);z-index:20}
.fab-recognize{right:20px;background:linear-gradient(180deg,var(--accent),var(--accent2));color:#001018;
  font-size:22px;padding:20px 30px;border-radius:40px}
.fab-photo{left:20px;background:#111827;color:#fff;font-size:17px;font-weight:700;padding:16px 20px;border-radius:40px}

/* Ergebnis-Ansicht */
.cap-result{background:var(--bg)}
.cap-result-inner{flex:1;display:flex;flex-direction:column;justify-content:center;padding:24px;gap:14px}
.cap-busy{color:var(--accent);font-size:16px;min-height:20px;text-align:center}
.cap-preview{max-width:100%;max-height:32vh;border-radius:12px;align-self:center;background:#fff}
.cap-value{font-size:40px !important;text-align:center;letter-spacing:4px;font-weight:800;text-transform:uppercase;
  padding:22px !important}
.cap-check{font-size:18px;font-weight:700;text-align:center;padding:12px 14px;border-radius:12px}
.cap-check.ok{color:#052e16;background:#bbf7d0}
.cap-check.warn{color:#3a2a06;background:#fde68a}
.cap-note{color:var(--muted);font-size:15px;text-align:center;margin:0}
.cap-actions{display:flex;gap:12px;padding:16px 22px calc(20px + env(safe-area-inset-bottom))}
.cap-actions .btn{flex:1}

/* ---------- Bestätigen / Fertig ---------- */
.summary{background:var(--panel);border-radius:18px;padding:6px 18px;margin-bottom:18px}
.sum-row{display:flex;justify-content:space-between;align-items:center;padding:18px 0;border-bottom:1px solid var(--line)}
.sum-row:last-child{border-bottom:none}
.sum-row span{color:var(--muted)}
.sum-row b{font-size:22px;letter-spacing:1px}
.hint{color:var(--muted);font-size:15px;text-align:center}

.done{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:26px;text-align:center}
.check{width:110px;height:110px;border-radius:50%;background:var(--ok);color:#00220c;
  font-size:64px;display:flex;align-items:center;justify-content:center;font-weight:800}
.done h2{margin:6px 0 0;font-size:26px}
.done p{color:var(--muted);margin:0;font-size:17px}
.done .btn{margin-top:22px;min-width:240px}

#toast{position:fixed;left:50%;bottom:calc(120px + env(safe-area-inset-bottom));transform:translateX(-50%);
  background:#111827;color:#fff;padding:14px 20px;border-radius:14px;font-size:16px;
  opacity:0;pointer-events:none;transition:opacity .2s;max-width:90vw;text-align:center;z-index:50}
#toast.show{opacity:1}