/* ══════════════════════════════════════════════════════════════════════════
   VICore — VIPhoto: zentrale Foto-/Anhang-Oberfläche
   ────────────────────────────────────────────────────────────────────────────
   Gehört zu public/vi-photo.js. Vier Bausteine, EINE Optik für die ganze App:

     1) .vip-field   Anhang-Feld (Button „Fotos hinzufügen" + Miniaturen)
     2) .vip-sheet   Auswahldialog (Foto aufnehmen · Galerie · Datei)
     3) .vip-cam     Vollbild-Kameraansicht mit echter Serienaufnahme
     4) .vip-up      Uploadstatus für mehrere Dateien (mit Wiederholung)

   REGELN
   • Nur Design-Tokens mit Fallback — die Datei wird AUCH vom externen Portal
     geladen (public/portal.html), das style.css/mobile.css NICHT einbindet.
   • Safe Areas kommen über --app-safe-* mit env()-Fallback, damit die
     Vollbildebenen auf iPhone (Notch/Home-Indicator) und Android sitzen.
   • Stapelhöhe: über Dialogen (6000), UNTER der Rückfrage-Ebene (12000),
     damit ein Bestätigen-Dialog immer sichtbar bleibt.
   ══════════════════════════════════════════════════════════════════════════ */

.vip-scope,
.vip-cam,
.vip-sheet,
.vip-up {
  --vip-green: var(--vi-green, #147352);
  --vip-green-deep: var(--vi-green-deep, #0F5C42);
  --vip-surface: var(--color-surface, #FFFFFF);
  --vip-surface-2: var(--bg-tertiary, #EFF2F1);
  --vip-text: var(--text-primary, #141A17);
  --vip-ink: var(--text-primary, #141A17);
  --vip-bg-soft: var(--bg-secondary, #F7F9F8);
  --vip-muted: var(--text-secondary, #3A4441);
  --vip-border: var(--vi-border, #D8DFDC);
  --vip-danger: var(--vi-danger, #B3261E);
  --vip-radius: var(--vi-r-md, 10px);
  --vip-radius-lg: var(--vi-r-xl, 18px);
  --vip-safe-top: var(--app-safe-top, env(safe-area-inset-top, 0px));
  --vip-safe-bottom: var(--app-safe-bottom, env(safe-area-inset-bottom, 0px));
  --vip-safe-left: var(--app-safe-left, env(safe-area-inset-left, 0px));
  --vip-safe-right: var(--app-safe-right, env(safe-area-inset-right, 0px));
  /* Stapelhöhe kommt aus der EINEN Leiter in public/vi-dialog.css. Der
     Fallback ist nur für das externe Portal nötig, das vi-dialog.css nicht
     lädt — die Werte müssen dort identisch bleiben. */
  --vip-z-cam: var(--vdlg-z-fullscreen, 11000);
  --vip-z-sheet: var(--vdlg-z-fullscreen-sheet, 11200);
  --vip-z-up: var(--vdlg-z-progress, 11500);
  font-family: var(--vi-font-ui, 'Inter', system-ui, -apple-system, sans-serif);
}

/* ══ 1 · ANHANG-FELD ══════════════════════════════════════════════════════ */
.vip-field { display: block; }
.vip-add {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  width: 100%; min-height: 52px; padding: 10px 16px;
  border: 1.5px solid var(--vip-green); border-radius: var(--vip-radius);
  background: var(--vip-green); color: var(--color-surface, #FFFFFF);
  font-family: inherit; font-size: 14.5px; font-weight: 650; line-height: 1.2;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
/* 52 px sind ein FINGERziel. Am Schreibtisch steht der Knopf neben Filtern, Tabs
   und Formularknöpfen und gehört auf dieselbe Höhenleiter (UX-Phase 9 §6).
   Der Rückfallwert hält die Regel im externen Portal, das die Tokendatei nicht lädt. */
@media (pointer: fine) {
  .vip-add { min-height: var(--control-h-lg, 40px); padding: 6px 16px; font-size: 13px; }
  .vip-add svg { width: 17px; height: 17px; }
}
.vip-add:active { background: var(--vip-green-deep); border-color: var(--vip-green-deep); }
.vip-add:disabled { opacity: .5; cursor: not-allowed; }
.vip-add svg { width: 20px; height: 20px; flex: 0 0 auto; }

/* Zonen-Variante (Feedback #3 §2.1): am Schreibtisch zieht man Dateien ins Fenster.
   Bewusst RUHIG — gestrichelte Fläche statt Primärknopf, denn hier passiert noch
   nichts, es ist eine Ablagemöglichkeit. Beim Überziehen wird sie eindeutig aktiv. */
.vip-field--zone 
/* Kompakte Variante (Feedback #4 §6, 07.09.2026) — EINE Zeile, EINE Liste.
   Der Anhangbereich der Meldungserfassung war der größte Block der Maske: eine
   84-px-Ablagefläche, dahinter ein Auswahlblatt, das „Datei auswählen" ein zweites
   Mal anbot, darunter ein Kachelraster aus 84-px-Quadraten. Hier steht die
   Ablagefläche als schmale Zeile, die beiden Wege stehen darin, und die Dateien
   darunter als lesbare Liste. Fachlich ist nichts entfallen — Drag & Drop, Auswahl
   und (wo unterstützt) Kamera sind alle drei erreichbar. */
.vip-field--compact .vip-strip {
  display: flex; align-items: center; gap: var(--space-3, 12px);
  min-height: var(--control-h-lg, 40px); padding: 6px 10px;
  border: 1px dashed var(--vip-border, #D8DFDC); border-radius: var(--vip-radius);
  background: var(--vip-bg-soft, #F7F9F8);
}
.vip-field--compact .vip-strip.is-drag {
  border-style: solid; border-color: var(--vip-green); background: #EAF4EF;
}
.vip-field--compact .vip-strip-tx {
  flex: 1 1 auto; min-width: 0;
  font-size: var(--text-sm, 13px); color: var(--vip-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.vip-field--compact .vip-strip-acts { display: flex; gap: 6px; flex: 0 0 auto; }

.vip-list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 4px; }
.vip-list:empty { display: none; }
.vip-li {
  display: flex; align-items: center; gap: 8px;
  min-height: var(--control-h-sm, 32px); padding: 4px 6px 4px 4px;
  border: 1px solid var(--vip-border, #D8DFDC); border-radius: var(--vip-radius);
  background: var(--vip-surface, #FFFFFF);
}
.vip-li-img { width: 28px; height: 28px; object-fit: cover; border-radius: 4px; flex: 0 0 auto; display: block; }
.vip-li-ic { width: 28px; text-align: center; flex: 0 0 auto; font-size: 15px; line-height: 28px; }
.vip-li-n {
  flex: 1 1 auto; min-width: 0; font-size: var(--text-sm, 13px); color: var(--vip-ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.vip-li-s { flex: 0 0 auto; font-size: var(--text-xs, 12px); color: var(--vip-muted); font-variant-numeric: tabular-nums; }
.vip-li-x {
  flex: 0 0 auto; width: 26px; height: 26px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: none; border-radius: 50%; background: transparent;
  color: var(--vip-muted); font-size: 13px; line-height: 1; cursor: pointer;
}
.vip-li-x:hover { background: var(--vip-surface-2); color: var(--vip-ink); }

/* Mit dem Daumen bedienbar bleiben (UX-Phase 8 §20): auf Touchgeräten wachsen
   Zeile und Löschziel auf dieselbe oberste Stufe der EINEN Höhenleiter. */
@media (pointer: coarse) {
  .vip-li { min-height: var(--control-h-lg, 40px); }
  .vip-li-x { width: var(--control-h-lg, 40px); height: var(--control-h-lg, 40px); }
}

.vip-thumbs { margin-top: 10px; }
.vip-zone {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  min-height: 84px; padding: 14px 16px; text-align: center;
  border: 1.5px dashed var(--vip-border, #D8DFDC); border-radius: var(--vip-radius);
  background: var(--vip-bg-soft, #F7F9F8); color: var(--vip-ink, #141A17);
  font-family: inherit; font-size: 13.5px; font-weight: 600; line-height: 1.25;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.vip-zone:hover { border-color: var(--vip-green); background: #F3F8F5; }
.vip-zone:focus-visible { outline: 2px solid var(--vip-green); outline-offset: 2px; }
.vip-zone.is-drag { border-style: solid; border-color: var(--vip-green); background: #EAF4EF; }
.vip-zone-ic { color: var(--vip-green); line-height: 0; }
.vip-zone-ic svg { width: 22px; height: 22px; }
.vip-zone-hint { font-size: 11.5px; font-weight: 500; color: var(--vip-muted); }

.vip-thumbs {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: 8px; margin-top: 10px;
}
.vip-thumbs:empty { display: none; }
.vip-thumb {
  position: relative; aspect-ratio: 1; border-radius: var(--vip-radius);
  overflow: hidden; background: var(--vip-surface-2);
  border: 1px solid var(--vip-border);
}
.vip-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vip-thumb-doc {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; width: 100%; height: 100%; padding: 6px; text-align: center;
  font-size: 10.5px; line-height: 1.25; color: var(--vip-muted); word-break: break-all;
}
.vip-thumb-doc span:first-child { font-size: 22px; }
.vip-thumb-x {
  position: absolute; top: 4px; right: 4px; width: 26px; height: 26px;
  display: flex; align-items: center; justify-content: center;
  border: none; border-radius: 50%; background: rgba(12, 26, 20, .62); color: var(--color-surface, #FFFFFF);
  font-size: 14px; line-height: 1; cursor: pointer; padding: 0;
}
.vip-count { font-size: 12.5px; color: var(--vip-muted); margin-top: 8px; font-weight: 600; }

/* ══ 2 · AUSWAHLDIALOG ════════════════════════════════════════════════════ */
.vip-sheet {
  position: fixed; inset: 0; z-index: var(--vip-z-sheet);
  display: flex; flex-direction: column; justify-content: flex-end;
  background: rgba(12, 26, 20, .42);
  animation: vipFade .16s ease-out;
}
@keyframes vipFade { from { opacity: 0 } to { opacity: 1 } }
.vip-sheet-panel {
  background: var(--vip-surface);
  border-radius: var(--vip-radius-lg) var(--vip-radius-lg) 0 0;
  box-shadow: 0 -10px 34px rgba(12, 26, 20, .28);
  padding: 18px 16px calc(16px + var(--vip-safe-bottom));
  padding-left: max(16px, var(--vip-safe-left));
  padding-right: max(16px, var(--vip-safe-right));
  max-height: 88dvh; overflow-y: auto;
  animation: vipSlide .2s cubic-bezier(.2, .7, .3, 1);
}
@keyframes vipSlide { from { transform: translateY(16px) } to { transform: translateY(0) } }
.vip-sheet-title {
  font-family: var(--vi-font-display, inherit);
  font-size: 17px; font-weight: 700; color: var(--vip-text); margin-bottom: 14px;
}
/* EINE Zeile je Weg — keine Erklärzeile. Sie lief auf schmalen Telefonen über
   den Rand und war für eine Auswahl aus zwei bis drei Wegen ohnehin zu viel. */
.vip-opt {
  display: flex; align-items: center; gap: 13px; width: 100%;
  min-height: 58px; padding: 10px 14px; margin-bottom: 10px;
  border: 1px solid var(--vip-border); border-radius: var(--vip-radius);
  background: var(--vip-surface); color: var(--vip-text);
  font-family: inherit; text-align: left; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.vip-opt:active { background: var(--vip-surface-2); }
.vip-opt-ic {
  /* Das Symbol bestimmt die Zeilenhöhe. Ohne Erklärzeile darf es kleiner sein —
     sonst steht eine einzelne Textzeile in einer 68 px hohen Kachel. */
  flex: 0 0 auto; width: 38px; height: 38px; border-radius: var(--vip-radius);
  display: flex; align-items: center; justify-content: center;
  background: var(--vi-green-soft, #EDF7F2); font-size: 21px;
}
.vip-opt-tx { flex: 1 1 auto; min-width: 0; font-size: 15.5px; font-weight: 650; overflow-wrap: anywhere; }
.vip-opt-go { flex: 0 0 auto; color: var(--vip-muted); font-size: 20px; }
.vip-sheet-cancel {
  display: block; width: 100%; min-height: 48px; margin-top: 4px;
  border: 1px solid var(--vip-border); border-radius: var(--vip-radius);
  background: var(--vip-surface); color: var(--vip-text);
  font-family: inherit; font-size: 15px; font-weight: 650; cursor: pointer;
}
.vip-sheet-cancel:active { background: var(--vip-surface-2); }

/* ══ 3 · KAMERA (Vollbild, echte Serienaufnahme) ══════════════════════════ */
html.vip-cam-open, body.vip-cam-open { overflow: hidden; }

.vip-cam {
  position: fixed; inset: 0; z-index: var(--vip-z-cam);
  display: flex; flex-direction: column;
  background: var(--color-black, #000000); color: var(--color-surface, #FFFFFF);
  -webkit-tap-highlight-color: transparent;
  animation: vipFade .14s ease-out;
  /* Dynamische Viewport-Höhe: Android-Chrome blendet die URL-Leiste ein/aus. */
  height: 100dvh; max-height: 100dvh;
}
.vip-cam * { box-sizing: border-box; }

.vip-cam-head {
  flex: 0 0 auto; display: flex; align-items: center; gap: 6px;
  min-height: calc(52px + var(--vip-safe-top));
  padding: 0 6px; padding-top: var(--vip-safe-top);
  padding-left: max(6px, var(--vip-safe-left)); padding-right: max(6px, var(--vip-safe-right));
  background: var(--color-black, #000000);
}
.vip-cam-title {
  flex: 1 1 auto; text-align: center; font-size: 15px; font-weight: 650;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.vip-icon {
  flex: 0 0 auto; min-width: 44px; height: 44px; padding: 0 10px;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border: none; background: none; color: var(--color-surface, #FFFFFF);
  font-family: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
  border-radius: var(--vip-radius);
}
.vip-icon:active { background: rgba(255, 255, 255, .14); }
.vip-icon[hidden] { display: none; }
.vip-icon.is-on { background: rgba(255, 214, 90, .22); color: #FFD65A; }
.vip-icon svg { width: 22px; height: 22px; }

.vip-cam-stage {
  flex: 1 1 auto; position: relative; min-height: 0;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; background: var(--color-black, #000000);
}
/* `contain` statt `cover`: die Vorschau zeigt EXAKT den Bildausschnitt, der
   gespeichert wird. Ein beschnittenes Livebild wäre für Dokumentationsfotos
   (Typenschild, Zählerstand) irreführend. */
.vip-cam-video { width: 100%; height: 100%; object-fit: contain; display: block; background: var(--color-black, #000000); }
.vip-cam-video[hidden] { display: none; }

.vip-flash {
  position: absolute; inset: 0; background: var(--color-surface, #FFFFFF); opacity: 0; pointer-events: none;
}
.vip-flash.is-on { animation: vipFlash .26s ease-out; }
@keyframes vipFlash { 0% { opacity: .85 } 100% { opacity: 0 } }

.vip-cam-msg {
  max-width: 420px; margin: 0 auto; padding: 26px 24px; text-align: center;
}
.vip-cam-msg-ic { font-size: 40px; line-height: 1; margin-bottom: 14px; }
.vip-cam-msg-t { font-size: 17px; font-weight: 700; margin-bottom: 8px; }
.vip-cam-msg-s { font-size: 14px; line-height: 1.6; color: rgba(255, 255, 255, .78); }
.vip-cam-msg-acts { display: flex; flex-direction: column; gap: 10px; margin-top: 20px; }
.vip-cam-msg-acts button {
  min-height: 48px; padding: 10px 16px; border-radius: var(--vip-radius);
  border: 1px solid rgba(255, 255, 255, .34); background: transparent; color: var(--color-surface, #FFFFFF);
  font-family: inherit; font-size: 15px; font-weight: 650; cursor: pointer;
}
.vip-cam-msg-acts button.is-primary {
  background: var(--vip-green); border-color: var(--vip-green);
}
.vip-cam-msg-acts button:active { opacity: .82; }

/* Miniaturstreifen der laufenden Serie */
.vip-cam-strip {
  flex: 0 0 auto; display: flex; gap: 8px; overflow-x: auto; overflow-y: hidden;
  padding: 9px 12px; background: #0B0B0B;
  padding-left: max(12px, var(--vip-safe-left)); padding-right: max(12px, var(--vip-safe-right));
  scrollbar-width: none;
}
.vip-cam-strip::-webkit-scrollbar { display: none; }
.vip-cam-strip[hidden] { display: none; }
.vip-strip-item {
  position: relative; flex: 0 0 auto; width: 58px; height: 58px; padding: 0;
  border: 1px solid #2C2C2C; border-radius: 9px; overflow: hidden;
  background: #1A1A1A; cursor: pointer;
}
.vip-strip-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Platzhalter, solange das JPEG noch kodiert wird — die Aufnahme belegt ihren
   Platz sofort, damit die Reihenfolge stimmt und kein Tippen verloren geht. */
.vip-strip-item.is-pending { display: flex; align-items: center; justify-content: center; cursor: default; }
.vip-strip-spin {
  width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .28); border-top-color: var(--color-surface, #FFFFFF);
  animation: vipSpin .8s linear infinite;
}
.vip-strip-no {
  position: absolute; left: 3px; bottom: 3px; min-width: 17px; height: 17px; padding: 0 4px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 9px; background: rgba(0, 0, 0, .62); color: var(--color-surface, #FFFFFF);
  font-size: 10.5px; font-weight: 700; line-height: 1;
}

.vip-cam-bar {
  flex: 0 0 auto; display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center; gap: 8px;
  padding: 12px 14px calc(12px + var(--vip-safe-bottom));
  padding-left: max(14px, var(--vip-safe-left)); padding-right: max(14px, var(--vip-safe-right));
  background: var(--color-black, #000000);
}
.vip-cam-side {
  min-height: 46px; padding: 8px 12px; border: none; background: none; color: var(--color-surface, #FFFFFF);
  font-family: inherit; font-size: 14.5px; font-weight: 650; cursor: pointer;
  border-radius: var(--vip-radius);
}
.vip-cam-side:active { background: rgba(255, 255, 255, .14); }
.vip-cam-side:disabled { opacity: .38; cursor: not-allowed; }
.vip-cam-side.left { justify-self: start; text-align: left; }
.vip-cam-side.right { justify-self: end; text-align: right; color: #7FE3B4; }
.vip-cam-side.right:disabled { color: rgba(255, 255, 255, .5); }

.vip-shutter {
  justify-self: center; width: 72px; height: 72px; padding: 0;
  border-radius: 50%; background: var(--color-surface, #FFFFFF); border: 4px solid rgba(255, 255, 255, .36);
  cursor: pointer; flex: 0 0 auto; transition: transform .09s ease;
}
.vip-shutter:active { transform: scale(.93); }
.vip-shutter:disabled { opacity: .5; cursor: progress; }
.vip-shutter[hidden] { display: none; }

/* Einzelbild-Betrachter innerhalb der Kamera */
.vip-view {
  position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column;
  background: rgba(0, 0, 0, .96);
}
.vip-view-head {
  flex: 0 0 auto; display: flex; align-items: center; gap: 6px;
  min-height: calc(52px + var(--vip-safe-top)); padding: 0 6px; padding-top: var(--vip-safe-top);
}
.vip-view-title { flex: 1 1 auto; text-align: center; font-size: 15px; font-weight: 650; }
.vip-view-stage { flex: 1 1 auto; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 8px; }
.vip-view-stage img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 6px; }
.vip-view-bar {
  flex: 0 0 auto; display: flex; gap: 10px; padding: 12px 14px calc(12px + var(--vip-safe-bottom));
}
.vip-view-bar button {
  flex: 1 1 0; min-height: 50px; border-radius: var(--vip-radius);
  border: 1px solid rgba(255, 255, 255, .34); background: transparent; color: var(--color-surface, #FFFFFF);
  font-family: inherit; font-size: 15px; font-weight: 650; cursor: pointer;
}
.vip-view-bar button.is-danger { border-color: rgba(255, 138, 128, .6); color: #FF8A80; }
.vip-view-bar button:active { opacity: .8; }

/* Rückfrage (eigenständig — vi-photo.js hat bewusst KEINE app.js-Abhängigkeit) */
.vip-confirm {
  position: absolute; inset: 0; z-index: 4;
  display: flex; align-items: center; justify-content: center; padding: 24px;
  background: rgba(0, 0, 0, .62);
}
.vip-confirm-card {
  width: 100%; max-width: 380px; background: var(--vip-surface); color: var(--vip-text);
  border-radius: var(--vip-radius-lg); padding: 22px 20px;
  box-shadow: 0 18px 48px rgba(0, 0, 0, .4);
}
.vip-confirm-t { font-size: 17px; font-weight: 700; margin-bottom: 8px; }
.vip-confirm-s { font-size: 14px; line-height: 1.55; color: var(--vip-muted); }
.vip-confirm-acts { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }
.vip-confirm-acts button {
  min-height: 48px; border-radius: var(--vip-radius); border: 1px solid var(--vip-border);
  background: var(--vip-surface); color: var(--vip-text);
  font-family: inherit; font-size: 15px; font-weight: 650; cursor: pointer;
}
.vip-confirm-acts button.is-primary { background: var(--vip-green); border-color: var(--vip-green); color: var(--color-surface, #FFFFFF); }
.vip-confirm-acts button.is-danger { border-color: var(--vip-danger); color: var(--vip-danger); }
.vip-confirm-acts button:active { opacity: .84; }

/* ══ 4 · UPLOADSTATUS (mehrere Dateien, mit Wiederholung) ═════════════════ */
.vip-up {
  position: fixed; z-index: var(--vip-z-up);
  left: max(12px, var(--vip-safe-left)); right: max(12px, var(--vip-safe-right));
  bottom: calc(14px + var(--vip-safe-bottom));
  margin: 0 auto; max-width: 460px;
  background: var(--vi-night, #0E2018); color: var(--color-surface, #FFFFFF);
  border-radius: var(--vip-radius); box-shadow: 0 10px 30px rgba(12, 26, 20, .34);
  padding: 12px 14px; font-size: 14px;
  animation: vipUpIn .18s cubic-bezier(.2, .7, .3, 1);
}
@keyframes vipUpIn { from { transform: translateY(12px); opacity: 0 } to { transform: translateY(0); opacity: 1 } }
.vip-up-row { display: flex; align-items: center; gap: 10px; }
.vip-up-tx { flex: 1 1 auto; min-width: 0; font-weight: 600; }
.vip-up-spin {
  flex: 0 0 auto; width: 17px; height: 17px; border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .3); border-top-color: var(--color-surface, #FFFFFF);
  animation: vipSpin .8s linear infinite;
}
@keyframes vipSpin { to { transform: rotate(360deg) } }
.vip-up-spin[hidden], .vip-up-retry[hidden] { display: none; }
.vip-up-x {
  flex: 0 0 auto; width: 30px; height: 30px; margin-right: -5px; padding: 0;
  border: 0; border-radius: 8px; background: transparent; color: rgba(255, 255, 255, .72);
  font-family: inherit; font-size: 15px; line-height: 1; cursor: pointer;
}
.vip-up-x:active { background: rgba(255, 255, 255, .14); }
.vip-up-sub { margin-top: 6px; font-size: 13px; line-height: 1.35; color: rgba(255, 255, 255, .78); }
.vip-up-sub[hidden] { display: none; }
.vip-up-retry {
  flex: 0 0 auto; min-height: 34px; padding: 6px 12px; border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, .4); background: transparent; color: var(--color-surface, #FFFFFF);
  font-family: inherit; font-size: 13.5px; font-weight: 650; cursor: pointer;
}
.vip-up-retry:active { background: rgba(255, 255, 255, .14); }
.vip-up-bar { height: 4px; border-radius: 3px; background: rgba(255, 255, 255, .2); margin-top: 10px; overflow: hidden; }
.vip-up-bar[hidden] { display: none; }
.vip-up-bar > i { display: block; height: 100%; width: 0; background: #7FE3B4; transition: width .18s ease; }
.vip-up.is-ok .vip-up-tx { color: #A9F0CB; }
.vip-up.is-warn .vip-up-tx { color: #FFD08A; }

/* ══ Desktop: kompaktere Kamera, weiterhin dieselbe Komponente ════════════ */
@media (min-width: 900px) and (pointer: fine) {
  .vip-cam-bar { padding-bottom: 18px; }
  .vip-shutter { width: 64px; height: 64px; }
  .vip-sheet-panel {
    max-width: 460px; margin: 0 auto 0;
    border-radius: var(--vip-radius-lg);
  }
  .vip-sheet { align-items: center; justify-content: center; padding: 24px; }
}

/* Querformat auf dem Telefon: Steuerung schmaler, Vorschau bleibt groß. */
@media (max-height: 480px) and (orientation: landscape) {
  .vip-cam-head { min-height: calc(42px + var(--vip-safe-top)); }
  .vip-shutter { width: 56px; height: 56px; border-width: 3px; }
  .vip-cam-bar { padding-top: 8px; padding-bottom: calc(8px + var(--vip-safe-bottom)); }
  .vip-strip-item { width: 46px; height: 46px; }
  .vip-cam-strip { padding: 6px 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .vip-cam, .vip-sheet, .vip-sheet-panel, .vip-up { animation: none; }
  .vip-flash.is-on { animation: none; }
}