:root {
      --primary: #007bff;
      --secondary: #00d4ff;
      --dark-bg: #0d1117;
      --light-bg: #f5f7fb;
    }
    body { margin: 0; height: 100%; font-family: 'Segoe UI', Roboto, sans-serif; background: var(--light-bg); transition: background 0.3s; }
    body.dark { background: var(--dark-bg); color: #fff; }

    header {
      position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
      backdrop-filter: blur(10px);
      background: rgba(0,0,0,0.4); color: white;
      padding: 12px; text-align: center; box-shadow: 0 2px 8px rgba(0,0,0,0.3);
    }
    header h2 { font-size: 1.5rem; margin: 0; font-weight: 600; }
    .menu-buttons { margin-top: 6px; }
    .menu-buttons a {
      text-decoration: none; padding: 6px 16px; background: rgba(255,255,255,0.15);
      color: #fff; border-radius: 25px; font-weight: 500; margin: 0 6px;
      backdrop-filter: blur(10px); transition: all 0.3s ease;
    }
    .menu-buttons a:hover { background: rgba(255,255,255,0.3); }

    #map { height: 100vh; width: 100%; }

    /* Popup Besar + Status */
    .leaflet-popup-content-wrapper {
      background: rgba(255,255,255,0.95); border-radius: 14px; box-shadow: 0 6px 18px rgba(0,0,0,0.3);
      overflow: hidden; 
      max-width: 90vw;
      width: auto !important;
    }
    body.dark .leaflet-popup-content-wrapper { background: rgba(25,25,25,0.95); color: #fff; }
    .leaflet-popup-content { 
      margin: 10px; 
      text-align: center;
      width: auto !important;
    }
    .cctv-title { 
      font-weight: 600; 
      font-size: 1.1rem; 
      margin-bottom: 8px; 
      color: var(--primary); 
    }
    body.dark .cctv-title { color: var(--secondary); }

    /* Status indikator */
    .status {
      display: inline-block;
      padding: 3px 8px;
      border-radius: 12px;
      font-size: 0.8rem;
      font-weight: 600;
      margin-bottom: 8px;
      color: white;
    }
    .online { background: #28a745; }
    .offline { background: #dc3545; }

    /* Koordinat */
    .coordinates {
      font-size: 0.8rem;
      color: #666;
      margin-bottom: 8px;
    }
    body.dark .coordinates { color: #aaa; }

    /* Video besar */
    .cctv-video {
      width: 60vw;
      max-width: 500px;
      min-width: 250px;
      border-radius: 10px; 
      box-shadow: 0 2px 10px rgba(0,0,0,0.3);
    }

    /* Dark Mode Toggle */
    #modeToggle {
      position: absolute; top: 12px; right: 12px;
      background: rgba(255,255,255,0.2); border: none;
      color: #fff; border-radius: 50%; width: 40px; height: 40px;
      cursor: pointer; backdrop-filter: blur(10px);
      transition: background 0.3s;
    }
    #modeToggle:hover { background: rgba(255,255,255,0.4); }

    @media (max-width: 600px) {
      .cctv-video {
        width: 90vw;
        max-width: none;
      }
      .leaflet-popup-content-wrapper {
        max-width: 95vw;
      }
    }
    
    .map-actions {
  margin-top: 10px;
  display: flex;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}
.btn-map {
  background: var(--primary);
  color: white;
  border: none;
  border-radius: 20px;
  padding: 6px 12px;
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.25s;
}
.btn-map:hover {
  background: var(--secondary);
  color: #000;
}
body.dark .btn-map {
  background: var(--secondary);
  color: #000;
}
body.dark .btn-map:hover {
  background: #fff;
  color: #000;
}
/* Indikator global status */
/* === Global Status di Tengah Bawah === */
#globalStatus {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1500;
  background: rgba(255,255,255,0.9);
  color: #000;
  padding: 10px 20px;
  border-radius: 12px;
  font-weight: 600;
  font-size: 0.95rem;
  box-shadow: 0 2px 10px rgba(0,0,0,0.3);
  backdrop-filter: blur(6px);
  text-align: center;
  min-width: 180px;
}

body.dark #globalStatus {
  background: rgba(25,25,25,0.9);
  color: #fff;
}

/* Efek animasi kecil saat update */
#globalStatus.updated {
  animation: pulse 0.4s ease;
}
@keyframes pulse {
  from { transform: translateX(-50%) scale(1.05); opacity: 0.9; }
  to { transform: translateX(-50%) scale(1); opacity: 1; }
}

/* Responsif untuk mobile */
@media (max-width: 600px) {
  #globalStatus {
    font-size: 0.85rem;
    padding: 8px 14px;
    bottom: 12px;
  }
}
#floatingControls {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 1500;
}