[hidden] { display: none !important; }
/* Channel names are already embedded in the camera image by the NVR. */
.camera { border: 0; border-radius: 0; background: #000; align-self: start; }
.camera .camera-info { display: none; }
.camera-loader { position:absolute; inset:0; z-index:2; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; background:#000; pointer-events:none; padding:12px; }
.camera-loader-stage { position:relative; width:clamp(80px,11vw,160px); aspect-ratio:1; flex-shrink:0; display:grid; place-items:center; }
.camera-loader-track { position:absolute; inset:10%; border:1.5px solid rgba(29,158,117,.15); border-radius:50%; }
.camera-loader-brand { color:#fff; font-family:'Helvetica Neue',Arial,sans-serif; font-size:clamp(11px,1.5vw,22px); font-weight:300; letter-spacing:clamp(2px,.35vw,5px); padding-left:3px; }
.camera-loader-orbit { position:absolute; inset:0; animation:zarcomOrbit 3s cubic-bezier(.45,0,.55,1) infinite; }
.camera-loader-ball { position:absolute; top:10%; left:50%; width:8%; aspect-ratio:1; transform:translate(-50%,-50%); background:#1d9e75; border-radius:50%; box-shadow:0 0 12px #1d9e75,0 0 24px #1d9e7580; }
.camera-loader-ball::after { content:''; position:absolute; inset:-4px; border:1.5px solid #1d9e75; border-radius:50%; opacity:0; animation:zarcomPulse 3s linear infinite; }
.camera-loader .waiting { position:static; color:#ffffff80; text-align:center; font-size:14px; line-height:1.4; }
.camera-loader[data-busy="false"] .camera-loader-orbit,.camera-loader[data-busy="false"] .camera-loader-ball::after { animation:none; }
.dense .camera-loader-stage { width:64px; }.dense .camera-loader-brand { font-size:10px;letter-spacing:1px; }.dense .camera-loader { gap:6px; }.dense .camera-loader .waiting { font-size:12px; }
@keyframes zarcomOrbit { 0%{transform:rotate(0deg)}66.67%,100%{transform:rotate(360deg)} }
@keyframes zarcomPulse { 0%,66%,100%{opacity:0;transform:scale(1)}70%{opacity:.8;transform:scale(1)}95%{opacity:0;transform:scale(2)} }
@media(prefers-reduced-motion:reduce){.camera-loader-orbit,.camera-loader-ball::after{animation:none}}
/* Intrinsic stream dimensions must not resize the grid cell on first frame. */
.media { width: 100%; min-width: 0; min-height: 0; aspect-ratio: 16 / 9; overflow: hidden; }
.media video, .media > img { position: absolute; inset: 0; width: 100%; height: 100%; min-width: 0; min-height: 0; object-fit: fill; display: block; background: #000; }
.camera-grid:is(:fullscreen, .fullscreen-fallback) video { object-fit: fill; min-height: 0; }
.wall-button { background: #10251c; color: #80f0b0; border: 1px solid #315342; border-radius: 10px; padding: 10px 14px; cursor: pointer; }
.toolbar { flex-wrap: wrap; gap: 12px; }
.media { cursor: pointer; }
.camera-grid:fullscreen,
.camera-grid.fullscreen-fallback {
  width: 100vw; height: 100dvh; max-width: none; margin: 0; padding: 0;
  gap: 0; background: #000; overflow: hidden;
  display: grid;
  grid-template-columns: repeat(var(--wall-columns), minmax(0, 1fr));
  grid-template-rows: repeat(var(--wall-rows), minmax(0, 1fr));
}
.camera-grid.fullscreen-fallback { position: fixed; inset: 0; z-index: 10000; }
.camera-grid:is(:fullscreen, .fullscreen-fallback) .camera {
  width: 100%; height: 100%; align-self: stretch;
  min-height: 0; border: 0; border-radius: 0; background: #000;
}
.camera-grid:is(:fullscreen, .fullscreen-fallback) .camera-info { display: none; }
.camera-grid:is(:fullscreen, .fullscreen-fallback) .media {
  height: 100%; min-height: 0; aspect-ratio: auto; background: #000;
}
.camera-grid:is(:fullscreen, .fullscreen-fallback) img { object-fit: fill; min-height: 0; }
.camera-grid.single-camera:is(:fullscreen, .fullscreen-fallback) {
  --wall-columns: 1 !important; --wall-rows: 1 !important;
}
.wall-exit { display:none; position:absolute; top:12px; right:12px; z-index:20; width:44px; height:44px; border:1px solid #ffffff55; border-radius:50%; background:#000a; color:#fff; font-size:30px; cursor:pointer; opacity:0; }
.camera-grid:is(:fullscreen, .fullscreen-fallback) .wall-exit { display:block; }
.wall-controls-visible .wall-exit,.wall-exit:focus-visible { opacity:1; }
.single-camera .camera:not(.expanded-camera) { display: none; }
.expanded-camera .media { cursor: pointer; }