/* CCTV Arjet - Custom styles beyond Tailwind CDN */
:root {
  --primary: #0ea5e9;
  --primary-dark: #0284c7;
  --accent: #06b6d4;
  --radius: 16px;
}
* { scrollbar-width: thin; scrollbar-color: #cbd5e1 transparent; }
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 999px; }
.dark ::-webkit-scrollbar-thumb { background: #334155; }

/* aspect video fallback */
.aspect-video { aspect-ratio: 16/9; }

/* pulse dot */
.dot-pulse { animation: pulse 1.8s infinite; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.5} }

/* glass nav */
.glass { backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }

/* grid 2x3 fixed rows */
.grid-2x3 { grid-template-rows: repeat(2, minmax(0, 1fr)); }

/* shimmer loading for video */
.shimmer { background: linear-gradient(90deg, #e2e8f0 25%, #f1f5f9 50%, #e2e8f0 75%); background-size: 200% 100%; animation: shimmer 1.5s infinite; }
.dark .shimmer { background: linear-gradient(90deg, #1e293b 25%, #334155 50%, #1e293b 75%); background-size: 200% 100%; }
@keyframes shimmer { 0%{background-position:-200% 0} 100%{background-position:200% 0} }

/* video card hover */
.cam-card { transition: transform .18s ease, box-shadow .18s ease; }
.cam-card:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(2,8,23,.12); }
.dark .cam-card:hover { box-shadow: 0 12px 32px rgba(0,0,0,.4); }