:root {
  --zf-navy: #0d2847;
  --zf-blue: #0b5cab;
  --zf-cyan: #00a3d7;
  --zf-orange: #f28c00;
  --zf-bg: #eef3f7;
  --zf-border: #cbd6e2;
}

body {
  min-height: 100vh;
  background: var(--zf-bg);
  color: #17212b;
}

.zf-header {
  color: #fff;
  background: linear-gradient(135deg, var(--zf-navy), var(--zf-blue));
  box-shadow: 0 4px 18px rgba(13, 40, 71, .22);
}

.zf-title { font-weight: 800; letter-spacing: .04em; }
.zf-subtitle { opacity: .92; }

.zf-card {
  border: 1px solid var(--zf-border);
  border-radius: 1rem;
  box-shadow: 0 8px 26px rgba(13, 40, 71, .09);
}

.zf-step {
  display: flex;
  align-items: center;
  gap: .7rem;
  font-weight: 700;
}

.zf-step-number {
  display: inline-grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  color: #fff;
  background: var(--zf-blue);
}

.btn-zf {
  color: #fff;
  background: var(--zf-blue);
  border-color: var(--zf-blue);
  font-weight: 700;
}

.btn-zf:hover, .btn-zf:focus { color: #fff; background: #084b8d; border-color: #084b8d; }
.btn-zf-orange { color: #fff; background: var(--zf-orange); border-color: var(--zf-orange); font-weight: 700; }
.btn-zf-orange:hover, .btn-zf-orange:focus { color: #fff; background: #cf7700; border-color: #cf7700; }

.camera-stage {
  position: relative;
  overflow: hidden;
  min-height: 260px;
  border-radius: .9rem;
  background: #07111c;
}

.camera-stage video {
  display: block;
  width: 100%;
  min-height: 260px;
  max-height: 62vh;
  object-fit: contain;
}

.camera-counter {
  position: absolute;
  top: .8rem;
  left: .8rem;
  padding: .4rem .75rem;
  border-radius: 2rem;
  color: #fff;
  background: rgba(0, 0, 0, .68);
  font-weight: 800;
}

.photo-slot {
  overflow: hidden;
  border: 2px dashed var(--zf-border);
  border-radius: .8rem;
  background: #fff;
}

.photo-slot.complete { border-style: solid; border-color: #198754; }
.photo-slot img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: #e9ecef; }
.photo-placeholder { display: grid; place-items: center; aspect-ratio: 4 / 3; color: #6c757d; background: #e9ecef; }

.zf-overlay {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: grid;
  place-items: center;
  padding: 1rem;
  background: rgba(3, 12, 22, .86);
}

.zf-overlay-card {
  width: min(700px, 100%);
  max-height: 96vh;
  overflow: auto;
  border-radius: 1rem;
  background: #fff;
}

.review-image { width: 100%; max-height: 68vh; object-fit: contain; background: #07111c; }
.table thead th { white-space: nowrap; background: #e6edf4; }
.report-photo { width: 100%; border-radius: .8rem; background: #111; object-fit: contain; }

@media (max-width: 575.98px) {
  .zf-title { font-size: 1.1rem; }
  .zf-subtitle { font-size: .8rem; }
  .camera-stage, .camera-stage video { min-height: 220px; }
}

@media print {
  .no-print { display: none !important; }
  body { background: #fff; }
  .zf-card { box-shadow: none; }
}