:root {
  --bg: #0a0e12;
  --panel: #141c26;
  --border: #2a3648;
  --text: #e8edf4;
  --muted: #8a9bb3;
  --accent: #3d8bfd;
  --ok: #3dd68c;
  --warn: #ffb020;
  --top-h: 2.5rem;
  --timeline-h: 5.25rem;
  --side-w: 18rem;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; }
body {
  font-family: system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  display: flex;
  flex-direction: column;
  height: 100dvh;
}

.top-bar {
  height: var(--top-h);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0 0.5rem;
  border-bottom: 1px solid var(--border);
}
.top-bar h1 { font-size: 0.85rem; margin: 0; }
.top-bar-title { display: flex; gap: 0.5rem; align-items: center; flex: 1; min-width: 0; }
.top-bar-title #meta-line { line-height: 1.2; }
.muted { color: var(--muted); font-size: 0.7rem; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reviewer-inline { font-size: 0.7rem; display: flex; gap: 0.25rem; align-items: center; }
.reviewer-inline input { width: 5rem; font-size: 0.7rem; padding: 0.15rem 0.3rem; }
.top-bar select, .top-bar-btn { font-size: 0.68rem; padding: 0.2rem 0.35rem; }
.top-bar-btn { background: #243044; border: 1px solid var(--border); color: var(--text); border-radius: 4px; cursor: pointer; }

.workspace {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 1fr var(--side-w);
  overflow: hidden;
}

.cam-grid-wrap {
  min-width: 0;
  min-height: 0;
  padding: 0.25rem;
  overflow: hidden;
}

.cam-grid {
  display: grid;
  gap: 0.25rem;
  height: 100%;
  width: 100%;
}
.cam-grid.grid8 { grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(2, 1fr); }
.cam-grid.grid2 { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, 1fr); }
.cam-grid.single { grid-template-columns: 1fr; grid-template-rows: 1fr; }
.cam-grid.dual { grid-template-columns: repeat(2, 1fr); grid-template-rows: 1fr; }

.cam-panel {
  background: #000;
  border: 1px solid var(--border);
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
.cam-panel.focus { border-color: var(--accent); }
.cam-panel.no-frame { opacity: 0.55; }
.cam-head {
  flex: 0 0 auto;
  font-size: 0.62rem;
  padding: 0.15rem 0.3rem;
  background: rgba(0,0,0,0.6);
  display: flex;
  justify-content: space-between;
  gap: 0.25rem;
}
.cam-head span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cam-img-wrap { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; }
.cam-img-wrap img { max-width: 100%; max-height: 100%; display: block; width: auto; height: auto; }
.cam-frame {
  position: relative;
  display: inline-block;
  max-width: 100%;
  max-height: 100%;
  line-height: 0;
}
.cam-frame img {
  position: relative;
  z-index: 1;
  vertical-align: top;
}
.pump-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2;
}
.pump-overlay polygon {
  stroke-linejoin: round;
}
.pump-overlay polygon.pump-base {
  fill: rgba(140, 150, 160, 0.06);
  stroke: rgba(160, 170, 180, 0.55);
  stroke-width: 0.01;
}
.pump-overlay polygon.pump-base.pump-dwell-empty {
  fill: rgba(140, 150, 160, 0.06);
  stroke: rgba(160, 170, 180, 0.55);
}
.pump-overlay polygon.pump-base.pump-selected {
  fill: rgba(61, 139, 253, 0.12);
  stroke: #3d8bfd;
  stroke-width: 0.013;
}
.pump-overlay polygon.pump-flash {
  animation: pump-flash-pulse 0.7s ease-in-out infinite;
  stroke-width: 0.016 !important;
}
.pump-overlay polygon.pump-flash.src-human {
  fill: rgba(61, 139, 253, 0.45);
  stroke: #3d8bfd;
}
.pump-overlay polygon.pump-flash.src-v2 {
  fill: rgba(255, 120, 0, 0.5);
  stroke: #ff8800;
}
.pump-overlay polygon.pump-v2-saved-probable {
  fill: rgba(120, 120, 140, 0.12);
  stroke: #8888aa;
  stroke-width: 0.011;
  stroke-dasharray: 0.02 0.015;
}
.pump-overlay polygon.pump-dwell30-probable {
  fill: rgba(61, 139, 253, 0.22);
  stroke: #3d8bfd;
  stroke-width: 0.014;
  animation: pump-live-pulse 1.4s ease-in-out infinite;
}
.pump-overlay polygon.pump-dwell30-occupied {
  fill: rgba(255, 176, 32, 0.16);
  stroke: #ffb020;
  stroke-width: 0.012;
}
.pump-overlay polygon.pump-dwell30-unknown {
  fill: rgba(180, 120, 255, 0.1);
  stroke: #a66bff;
  stroke-width: 0.011;
  stroke-dasharray: 0.018 0.012;
}
.pump-overlay polygon.pump-flash.src-dwell30 {
  fill: rgba(0, 220, 255, 0.45);
  stroke: #00e5ff;
}
.src-tag {
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin: 0.35rem 0 0.15rem;
}
.src-tag.src-dwell30 { color: #5ddcff; }

.obs-src-RECOVERED_BY_APPEARANCE { color: #7dff9a; }
.obs-src-DETECTED_BY_YOLO { color: #c8d4ff; }
.obs-src-PREDICTED_ONLY { color: #ffb86c; font-style: italic; }
.src-tag.src-v2 { color: #ffaa55; }
.pump-detail h3 { margin: 0 0 0.35rem; font-size: 1rem; }
.counter-note { font-size: 0.78rem; margin-top: 0.5rem; line-height: 1.35; }
.pump-overlay polygon.pump-v2-live-probable {
  fill: rgba(0, 200, 255, 0.18);
  stroke: #00cce6;
  stroke-width: 0.013;
  animation: pump-live-pulse 1.4s ease-in-out infinite;
}
.det-overlay {
  position: absolute;
  left: 0;
  top: 0;
  overflow: visible;
  pointer-events: none;
}
.det-overlay rect.det-box {
  fill: none;
  vector-effect: non-scaling-stroke;
  stroke-width: 1.5px;
}
.det-overlay rect.det-car {
  stroke: rgba(77, 163, 255, 0.92);
}
.det-overlay rect.det-truck {
  stroke: rgba(255, 176, 32, 0.95);
}
.det-overlay rect.det-moto {
  stroke: rgba(224, 102, 255, 0.95);
}
@keyframes pump-live-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.72; }
}
#pump-stats li.v2-live-prob { color: #5ddcff; }
@keyframes pump-flash-pulse {
  0%, 100% { opacity: 1; fill-opacity: 0.62; }
  50% { opacity: 1; fill-opacity: 0.28; }
}
.cam-img-wrap .placeholder { color: var(--muted); font-size: 0.65rem; text-align: center; padding: 0.5rem; }

.side-panel {
  border-left: 1px solid var(--border);
  background: var(--panel);
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  font-size: 0.72rem;
  padding: 0.35rem;
}
.panel-block { margin-bottom: 0.5rem; border-bottom: 1px solid var(--border); padding-bottom: 0.35rem; }
.panel-block h2 { font-size: 0.68rem; text-transform: uppercase; color: var(--muted); margin: 0 0 0.25rem; }
.counter-global { display: flex; flex-direction: column; gap: 0.45rem; min-width: 0; }
.counter-section { min-width: 0; }
.counter-section .src-tag { margin: 0 0 0.2rem; }
.counter-dl { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.2rem 0.65rem; margin: 0; }
.counter-note { font-size: 0.62rem; line-height: 1.35; margin: 0.35rem 0 0; }
.counter-dl dt { color: var(--muted); font-size: 0.68rem; line-height: 1.25; }
.counter-dl .v2-val { color: var(--warn); font-variant-numeric: tabular-nums; font-weight: 600; }
.counter-dl .d30-val { color: #5eb8ff; font-variant-numeric: tabular-nums; font-weight: 600; }
.counter-dl dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }

.annotate-grid { display: flex; flex-wrap: wrap; gap: 0.2rem; }
.annotate-grid button {
  font-size: 0.62rem;
  padding: 0.25rem 0.35rem;
  border: 1px solid var(--border);
  background: #243044;
  color: var(--text);
  border-radius: 3px;
  cursor: pointer;
}

.pump-stats { list-style: none; padding: 0; margin: 0; max-height: 8rem; overflow-y: auto; }
.pump-stats li {
  padding: 0.2rem 0.3rem;
  border: 1px solid var(--border);
  border-radius: 3px;
  margin-bottom: 0.15rem;
  cursor: pointer;
  font-size: 0.62rem;
}
.pump-stats li.active { border-color: var(--accent); }
.aside-action { width: 100%; font-size: 0.65rem; padding: 0.25rem; margin-top: 0.25rem; }

.timeline-bar {
  flex-shrink: 0;
  min-height: var(--timeline-h);
  border-top: 1px solid var(--border);
  padding: 0.25rem 0.5rem calc(0.25rem + env(safe-area-inset-bottom, 0));
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  background: var(--bg);
}
.transport {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.68rem;
  overflow-x: auto;
  overflow-y: hidden;
  flex-shrink: 0;
  scrollbar-width: thin;
}
.transport button, .transport select, .transport input { font-size: 0.65rem; padding: 0.2rem 0.35rem; }
.cursor-label { font-variant-numeric: tabular-nums; margin-left: auto; }
.timeline-track-wrap {
  position: relative;
  flex: 1 1 auto;
  min-height: 1.25rem;
  display: flex;
  align-items: center;
}
#timeline-slider { width: 100%; margin: 0; position: relative; z-index: 1; }
.gap-markers {
  position: absolute;
  left: 0;
  right: 0;
  height: 6px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}
.gap-markers .jpeg-data-span {
  position: absolute;
  top: 0;
  bottom: 0;
  background: rgba(61, 139, 253, 0.35);
  border-radius: 2px;
}
.hidden { display: none !important; }
.compare-only.hidden { display: none !important; }

input, select, button, textarea {
  background: #0f1419;
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 3px;
}

@media (max-width: 1100px) {
  :root { --side-w: 14rem; }
  .cam-grid.grid8 { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(4, 1fr); }
}

.catalog-view {
  height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.catalog-header {
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 1rem;
}
.catalog-header h1 { font-size: 1rem; margin: 0; }
.catalog-external { margin: 0; font-size: 0.85rem; }
.catalog-external a { color: var(--accent, #0d6efd); }
.catalog-toolbar { padding: 0.35rem 0.75rem; }
.catalog-list {
  flex: 1;
  overflow-y: auto;
  padding: 0.5rem 0.75rem;
}
.catalog-item {
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.5rem;
  margin-bottom: 0.35rem;
  cursor: pointer;
  font-size: 0.75rem;
}
.catalog-item.status-PARTIAL { border-color: var(--warn); }
.catalog-item.status-READY { border-color: #2a4a3a; }
.catalog-item.status-MISSING_FILES,
.catalog-item.status-INVALID_MANIFEST { opacity: 0.6; cursor: not-allowed; }
.catalog-item.selected { border-color: var(--accent); background: #1a2838; }
.catalog-detail {
  border-top: 1px solid var(--border);
  padding: 0.5rem 0.75rem 0.75rem;
  max-height: 40vh;
  overflow-y: auto;
}
.custom-period { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: end; margin: 0.5rem 0; }
.custom-period label { font-size: 0.72rem; }
.primary { background: var(--accent); color: #fff; border: none; padding: 0.35rem 0.65rem; border-radius: 4px; cursor: pointer; }
/* Revisão: ocupa o ecrã inteiro; workspace encolhe entre top-bar e timeline */
#review-view {
  display: flex;
  flex-direction: column;
  height: 100dvh;
  max-height: 100dvh;
  min-height: 0;
  overflow: hidden;
}
#review-view.hidden, .catalog-view.hidden { display: none !important; }