.cctv-shell{height:100%;overflow:auto;padding:14px;box-sizing:border-box;color:#eaf8ff}.cctv-hero,.cctv-card,.cctv-panel,.cctv-camera{border:1px solid rgba(73,185,245,.22);background:linear-gradient(145deg,rgba(7,37,69,.82),rgba(4,20,42,.78));backdrop-filter:blur(18px);box-shadow:0 14px 38px rgba(0,0,0,.18)}.cctv-hero{border-radius:16px;padding:15px;display:grid;grid-template-columns:minmax(0,1.6fr) repeat(3,minmax(120px,.55fr));gap:10px;margin-bottom:12px}.cctv-hero-main small,.cctv-card small,.cctv-panel h3{display:block;color:#75badc;text-transform:uppercase;letter-spacing:1.3px;font-size:8px}.cctv-hero-main strong{display:block;font-size:20px;margin:4px 0}.cctv-hero-main p{margin:0;color:#8eabbc;font-size:9px;line-height:1.5}.cctv-card{border-radius:12px;padding:10px}.cctv-card strong{display:block;font-size:17px;margin:5px 0 2px}.cctv-card span{font-size:8px;color:#8aa8ba}.cctv-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:10px}.cctv-panel{border-radius:15px;padding:12px;min-width:0}.cctv-panel h3{margin:0 0 9px}.cctv-panel.span-12{grid-column:span 12}.cctv-panel.span-8{grid-column:span 8}.cctv-panel.span-7{grid-column:span 7}.cctv-panel.span-6{grid-column:span 6}.cctv-panel.span-5{grid-column:span 5}.cctv-panel.span-4{grid-column:span 4}.cctv-summary-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}.cctv-stat{padding:9px;border-radius:10px;background:rgba(6,45,77,.55);border:1px solid rgba(76,180,235,.13)}.cctv-stat b,.cctv-stat small{display:block}.cctv-stat b{font-size:15px}.cctv-stat small{font-size:7px;color:#7d9caf;margin-top:3px}.cctv-status{display:inline-flex;align-items:center;gap:5px;padding:4px 7px;border-radius:999px;font-size:7px;border:1px solid rgba(125,181,211,.22);text-transform:uppercase;letter-spacing:.6px}.cctv-status.ok{color:#a5f1c4;border-color:rgba(74,220,139,.28)}.cctv-status.warn{color:#ffe1a3;border-color:rgba(255,185,71,.28)}.cctv-status.bad{color:#ffacac;border-color:rgba(255,97,97,.3)}.cctv-table{width:100%;border-collapse:collapse;font-size:8px}.cctv-table th,.cctv-table td{padding:7px;border-bottom:1px solid rgba(102,173,214,.11);text-align:left;vertical-align:top}.cctv-table th{color:#72b6d9;font-size:7px;text-transform:uppercase;letter-spacing:.7px}.cctv-table td{color:#bfd4df}.cctv-empty{padding:18px;text-align:center;border:1px dashed rgba(85,171,221,.22);border-radius:12px;color:#7f9eaf;font-size:9px}.cctv-camera-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.cctv-camera{border-radius:12px;overflow:hidden}.cctv-camera-screen{aspect-ratio:16/9;background:radial-gradient(circle at 50% 45%,rgba(31,118,171,.18),rgba(2,12,27,.95));display:grid;place-items:center;color:#64879a;font-size:9px}.cctv-camera-meta{padding:8px}.cctv-camera-meta strong,.cctv-camera-meta small{display:block}.cctv-camera-meta small{font-size:7px;color:#7897aa;margin-top:3px}.cctv-marker-row{display:flex;gap:6px;flex-wrap:wrap}.cctv-marker-row button,.cctv-toolbar button{border:1px solid rgba(75,182,239,.24);background:rgba(7,57,94,.7);color:#eaf8ff;border-radius:9px;padding:7px 9px;font-size:8px;cursor:pointer}.cctv-marker-row button:hover,.cctv-toolbar button:hover{border-color:rgba(72,214,255,.48);background:rgba(10,82,130,.78)}.cctv-marker-row button[data-marker="SECURITY"]{border-color:rgba(255,98,98,.32);background:rgba(111,34,45,.58)}.cctv-toolbar{display:flex;gap:6px;align-items:center;flex-wrap:wrap}.cctv-toolbar .cctv-live{margin-left:auto}.cctv-note{font-size:8px;color:#819fb1;line-height:1.45}.cctv-error{padding:14px;border-radius:11px;background:rgba(94,31,39,.55);border:1px solid rgba(255,104,104,.25);color:#ffb9b9;font-size:9px}.cctv-badge{display:inline-block;padding:3px 6px;border-radius:999px;background:rgba(33,130,184,.18);font-size:7px;color:#8edcff}.cctv-muted{color:#7694a6}.cctv-scroll{max-height:290px;overflow:auto}@media(max-width:1050px){.cctv-hero{grid-template-columns:1fr 1fr}.cctv-panel.span-8,.cctv-panel.span-7,.cctv-panel.span-6,.cctv-panel.span-5,.cctv-panel.span-4{grid-column:span 12}.cctv-camera-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:650px){.cctv-hero{grid-template-columns:1fr}.cctv-summary-grid,.cctv-camera-grid{grid-template-columns:1fr}.cctv-shell{padding:9px}}
.cctv-click{cursor:pointer}.cctv-click:hover td{background:rgba(19,88,130,.25)}.cctv-detail{position:absolute;z-index:30;top:58px;right:14px;bottom:14px;width:min(590px,calc(100% - 28px));overflow:auto;border:1px solid rgba(82,198,255,.34);border-radius:16px;background:linear-gradient(155deg,rgba(5,29,55,.97),rgba(2,14,30,.98));box-shadow:0 24px 70px rgba(0,0,0,.48);padding:15px;box-sizing:border-box;backdrop-filter:blur(24px)}.cctv-detail-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;position:sticky;top:-15px;padding:15px 0 10px;background:rgba(4,24,47,.94);z-index:2}.cctv-detail-head strong{font-size:16px}.cctv-detail-head small{display:block;color:#7fa8bd;font-size:8px;margin-top:4px}.cctv-detail-section{margin-top:10px;border:1px solid rgba(76,171,224,.14);border-radius:12px;padding:10px;background:rgba(6,39,67,.48)}.cctv-detail-section h4{margin:0 0 8px;color:#7fd6fb;font-size:8px;text-transform:uppercase;letter-spacing:1px}.cctv-detail-row{display:grid;grid-template-columns:130px 1fr;gap:8px;padding:5px 0;border-bottom:1px solid rgba(88,165,208,.08);font-size:8px}.cctv-detail-row:last-child{border-bottom:0}.cctv-detail-row span:first-child{color:#7899ac}.cctv-detail-row span:last-child{color:#d6e8f1;overflow-wrap:anywhere}.cctv-detail-json{white-space:pre-wrap;overflow-wrap:anywhere;color:#a8c7d7;font:8px/1.55 ui-monospace,SFMono-Regular,Consolas,monospace}.cctv-reason{display:inline-block;margin:2px 3px 2px 0;padding:4px 6px;border-radius:7px;background:rgba(20,96,140,.35);color:#aadef5;font-size:7px}@media(max-width:650px){.cctv-detail{top:50px;right:6px;bottom:6px;width:calc(100% - 12px);padding:10px}.cctv-detail-row{grid-template-columns:100px 1fr}}
.cctv-keyframe{width:100%;max-height:320px;object-fit:contain;border-radius:10px;border:1px solid rgba(85,187,239,.2);background:#020b14;display:block;margin:8px 0}.cctv-keyframe-label{font-size:7px;color:#78a6bc;margin-top:4px}

.cctv-camera-screen.live{display:block;overflow:hidden;background:#020b13}.cctv-live-frame{display:block;width:100%;height:100%;border:0;background:#020b13}