body { 
  margin: 0; 
  padding: 0; 
  background-color: #f9f9f9; 
  font-family: sans-serif; 
}
.container { 
  max-width: 500px; 
  margin: 0 auto; 
  padding: 20px; 
  min-height: 100vh; 
  box-sizing: border-box; 
}
.card { 
  background: #fff; 
  padding: 20px; 
  border-radius: 8px; 
  box-shadow: 0 4px 6px rgba(0,0,0,0.1); 
  margin-bottom: 20px; 
}
.cameraMock { 
  width: 100%; 
  height: 250px; 
  background-color: #000; 
  color: #fff; 
  display: flex; 
  justify-content: center; 
  align-items: center; 
  border-radius: 6px; 
  margin-bottom: 15px; 
  overflow: hidden; 
}
.cameraVideo { 
  width: 100%; 
  height: 100%; 
  object-fit: contain; 
}
.scrollContainer { 
  display: flex; 
  gap: 10px; 
  overflow-x: auto; 
  padding-bottom: 10px; 
  margin-bottom: 10px; 
  scroll-snap-type: x mandatory; 
}
.scrollItem { 
  flex: 0 0 100%; 
  scroll-snap-align: center; 
  height: 250px; 
  background-color: #000; 
  border-radius: 6px; 
  overflow: hidden; 
  position: relative; 
}
.photoCounterBadge { 
  position: absolute; 
  top: 10px; 
  right: 10px; 
  background-color: rgba(0, 0, 0, 0.6); 
  color: #fff; 
  padding: 4px 8px; 
  border-radius: 12px; 
  font-size: 12px; 
}
.tabButtonGroup { 
  display: flex; 
  gap: 5px; 
  margin-bottom: 20px; 
}
.tabButton { 
  flex: 1; 
  padding: 10px 5px; 
  border: 1px solid #007bff; 
  background: #fff; 
  color: #007bff; 
  border-radius: 6px; 
  font-weight: bold; 
  cursor: pointer; 
  font-size: 14px; 
}
.tabButtonActive { 
  background: #007bff; 
  color: #fff; 
}
.activeInputBlock { 
  background: #f8f9fa; 
  border: 2px solid #007bff; 
  border-radius: 8px; 
  padding: 15px; 
  margin-bottom: 20px; 
}
.flexInputRow { 
  display: flex; 
  gap: 8px; 
  margin-top: 10px; 
}
.flexInputGroup { 
  flex: 1; 
  font-size: 12px; 
  font-weight: bold; 
  color: #495057; 
}
.flexInputGroup input { 
  width: 100%; 
  padding: 10px 4px; 
  margin-top: 4px; 
  border: 1px solid #ced4da; 
  border-radius: 4px; 
  font-size: 16px; 
  text-align: center; 
  box-sizing: border-box; 
}
.actionBtn { 
  width: 100%; 
  padding: 14px; 
  background-color: #007bff; 
  color: white; 
  border: none; 
  border-radius: 6px; 
  font-size: 16px; 
  font-weight: bold; 
  cursor: pointer; 
  margin-bottom: 10px; 
}
.cancelBtn { 
  width: 100%; 
  padding: 12px; 
  background-color: #6c757d; 
  color: white; 
  border: none; 
  border-radius: 6px; 
  font-size: 14px; 
  cursor: pointer; 
}
.filterBox { 
  background: #eee; 
  padding: 12px; 
  border-radius: 6px; 
  margin-bottom: 15px; 
}
.dateInput { 
  display: block; 
  width: 100%; 
  margin-top: 6px; 
  padding: 8px; 
  box-sizing: border-box; 
}
.btnGroup { 
  display: flex; 
  gap: 5px; 
  margin-top: 10px; 
}
.filterBtn { 
  flex: 1; 
  padding: 8px; 
  border: 1px solid #ccc; 
  background: #fff; 
  border-radius: 4px; 
  cursor: pointer; 
}
.btnAllActive { background: #6c757d; color: white; }
.btnWaitingActive { background: #ffc107; color: black; }
.btnCompletedActive { background: #28a745; color: white; }
.listItem { 
  background: white; 
  padding: 15px; 
  border-radius: 6px; 
  margin-bottom: 10px; 
  border-left: 5px solid #dc3545; 
  box-shadow: 0 2px 4px rgba(0,0,0,0.05); 
}
.listItemWaiting { border-left-color: #ffc107; background-color: #fffdf5; }
.listItemCompleted { border-left-color: #28a745; background-color: #f0fff4; }
.badge { 
  padding: 4px 8px; 
  border-radius: 4px; 
  font-size: 12px; 
  font-weight: bold; 
  float: right; 
}
.badgeUninspected { background: #fde8e8; color: #c81e1e; }
.badgeWaiting { background: #fff3cd; color: #856404; }
.badgeCompleted { background: #def7ec; color: #03543f; }
.inputField { 
  width: 100%; 
  padding: 12px; 
  margin-top: 8px; 
  margin-bottom: 15px; 
  border: 1px solid #ccc; 
  border-radius: 6px; 
  font-size: 18px; 
  box-sizing: border-box; 
}
.resultValueBox { 
  font-size: 13px; 
  color: #495057; 
  margin-top: 6px; 
  background: #f1f3f5; 
  padding: 6px 10px; 
  border-radius: 4px; 
}
.phaseResultLine { 
  margin-bottom: 4px; 
  padding-bottom: 4px; 
  border-bottom: 1px dashed #ced4da; 
}
.phaseResultLine:last-child { border-bottom: none; }
.syncStatusBanner { 
  background-color: #e3f2fd; 
  color: #0d47a1; 
  padding: 8px; 
  border-radius: 4px; 
  margin-bottom: 15px; 
  font-size: 13px; 
  font-weight: bold; 
  display: none; 
  text-align: center; 
}
.previewImg { 
  width: 100%; 
  height: 100%; 
  object-fit: contain; 
}