.map-camera-marker { width:38px; height:38px; display:flex; align-items:center; justify-content:center; position:relative; border-radius:50%; color:#fff; background:var(--camera-color); border:3px solid #fff; box-shadow:0 3px 10px rgba(15,23,42,.35); }
.map-camera-marker i { font-size:16px; }
.map-camera-marker b { position:absolute; right:-6px; top:-6px; font-size:9px; line-height:18px; width:20px; height:20px; text-align:center; border-radius:50%; background:#111827; border:2px solid #fff; }
.map-camera-popup { width:100%; padding:4px; }
.map-camera-popup-title { display:flex; align-items:center; gap:8px; padding-bottom:8px; border-bottom:1px solid #e2e8f0; color:#b42318; font-weight:700; font-size:15px; }
.map-camera-popup-meta { display:flex; justify-content:space-between; align-items:center; margin-top:9px; color:#475569; font-size:12px; }
.map-camera-state { color:#fff; padding:2px 7px; border-radius:10px; font-weight:700; }
.map-camera-state.online { background:#16834b; }.map-camera-state.offline { background:#c73939; }.map-camera-state.unknown { background:#64748b; }
.map-camera-watch { width:100%; margin-top:10px; border:0; border-radius:5px; padding:8px 12px; color:#fff; background:#1677ff; font-weight:700; }
.map-camera-watch:hover { background:#0f5ec7; }.map-camera-coordinate { margin-top:7px; color:#94a3b8; font-size:11px; text-align:right; }
#camera-viewer-body img,#camera-viewer-body video { max-width:100%; max-height:calc(100vh - 90px); width:auto; height:auto; }
#camera-viewer-body iframe { width:100%; height:100%; border:0; }