@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@400;500;600;700&family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500;9..40,600&display=swap');

/* ── DARK THEME (default) ── */
:root, [data-theme="dark"] {
    --bg-base:      #040d1a;
    --bg-surface:   #071428;
    --bg-card:      #0a1c38;
    --bg-card-2:    #0d2248;
    --bg-hover:     #102d5e;
    --accent:       #2d8cff;
    --accent-dim:   rgba(45,140,255,0.16);
    --accent-glow:  rgba(45,140,255,0.26);
    --accent-2:     #00d4ff;
    --success:      #00e5a0;
    --danger:       #ff4757;
    --text-1:       #e8f0fe;
    --text-2:       #7a9cc5;
    --text-3:       #3d5a7a;
    --border:       rgba(45,140,255,0.13);
    --border-hi:    rgba(45,140,255,0.36);
    --shadow:       0 4px 24px rgba(0,0,0,0.45),0 1px 4px rgba(0,0,0,0.3);
    --shadow-glow:  0 0 22px var(--accent-glow);
    --sk-1:         #0a1c38;
    --sk-2:         #0d2248;
    --sk-foot:      #071428;
    --modal-bg:     rgba(2,7,15,0.94);
    --scan:         rgba(0,0,0,0.038);
    --cam-bg-a:     #040d1a;
    --cam-bg-b:     #071428;
    --cam-icon-bg:  rgba(45,140,255,0.1);
    --vignette:     rgba(4,13,26,0.55);
}

/* ── LIGHT THEME ── */
[data-theme="light"] {
    --bg-base:      #eef3fb;
    --bg-surface:   #ffffff;
    --bg-card:      #ffffff;
    --bg-card-2:    #f4f8ff;
    --bg-hover:     #e0eaff;
    --accent:       #1a6fe8;
    --accent-dim:   rgba(26,111,232,0.1);
    --accent-glow:  rgba(26,111,232,0.18);
    --accent-2:     #0091c2;
    --success:      #00a870;
    --danger:       #dc3545;
    --text-1:       #0d1e38;
    --text-2:       #4a6080;
    --text-3:       #9ab0c8;
    --border:       rgba(26,111,232,0.11);
    --border-hi:    rgba(26,111,232,0.32);
    --shadow:       0 2px 16px rgba(0,0,0,0.07),0 1px 4px rgba(0,0,0,0.04);
    --shadow-glow:  0 0 16px var(--accent-glow);
    --sk-1:         #e8f0fe;
    --sk-2:         #dce8fb;
    --sk-foot:      #f4f8ff;
    --modal-bg:     rgba(8,18,38,0.9);
    --scan:         rgba(0,0,0,0.012);
    --cam-bg-a:     #dce8fb;
    --cam-bg-b:     #e8f0fe;
    --cam-icon-bg:  rgba(26,111,232,0.1);
    --vignette:     rgba(20,40,80,0.28);
}

*,*::before,*::after{box-sizing:border-box}

.cctv-command-center {
    background: var(--bg-base);
    min-height: calc(100vh - 70px);
    font-family: 'DM Sans', sans-serif;
    color: var(--text-1);
    transition: background .3s, color .3s;
}
[data-theme="dark"] .cctv-command-center::before {
    content:'';
    position:fixed;inset:0;
    background:
        radial-gradient(ellipse 55% 35% at 15% 0%,rgba(45,140,255,.07) 0%,transparent 55%),
        radial-gradient(ellipse 40% 25% at 85% 100%,rgba(0,212,255,.04) 0%,transparent 50%);
    pointer-events:none;z-index:0;
}

/* ── CONTROL BAR ── */
.cctv-control-bar {
    display:flex;align-items:center;justify-content:space-between;
    padding:11px 18px;
    background:var(--bg-surface);
    border-bottom:1px solid var(--border);
    position:sticky;top:0;z-index:100;
    backdrop-filter:blur(16px);
    gap:10px;flex-wrap:wrap;
    transition:background .3s;
}
.cctv-control-left,.cctv-control-right{display:flex;align-items:center;gap:11px;flex-wrap:wrap;}
.cctv-brand{display:flex;align-items:center;gap:9px;}
.cctv-brand-icon{width:36px;height:36px;display:flex;align-items:center;justify-content:center;border-radius:8px;flex-shrink:0;filter:drop-shadow(0 0 8px var(--accent-glow));}
.cctv-brand-texts{display:flex;flex-direction:column;line-height:1.25;}
.cctv-brand-title{font-family:'Rajdhani',sans-serif;font-size:13px;font-weight:700;letter-spacing:1.8px;text-transform:uppercase;color:var(--text-1);}
.cctv-brand-sub{font-family:'Rajdhani',sans-serif;font-size:10px;font-weight:500;letter-spacing:1.5px;text-transform:uppercase;color:var(--accent);}
.cctv-divider-v{width:1px;height:26px;background:var(--border);flex-shrink:0;}
.cctv-live-badge{display:inline-flex;align-items:center;gap:5px;background:rgba(255,71,87,.12);border:1px solid rgba(255,71,87,.28);color:var(--danger);font-family:'Rajdhani',sans-serif;font-size:10px;font-weight:700;letter-spacing:2px;padding:3px 9px;border-radius:4px;}
.cctv-live-dot{width:6px;height:6px;border-radius:50%;background:var(--danger);animation:livePulse 1.4s ease-in-out infinite;flex-shrink:0;}
@keyframes livePulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.3;transform:scale(.6)}}
.cctv-clock{font-family:'Rajdhani',sans-serif;font-size:15px;font-weight:600;letter-spacing:2px;color:var(--accent-2);min-width:70px;}

/* Search */
.cctv-search-wrap{position:relative;display:flex;align-items:center;}
.cctv-search-icon{position:absolute;left:10px;color:var(--text-3);pointer-events:none;}
.cctv-search-input{background:var(--bg-card);border:1px solid var(--border);border-radius:6px;color:var(--text-1);font-family:'DM Sans',sans-serif;font-size:13px;padding:7px 30px 7px 32px;width:185px;outline:none;transition:all .2s;}
.cctv-search-input::placeholder{color:var(--text-3);}
.cctv-search-input:focus{border-color:var(--accent);background:var(--bg-card-2);box-shadow:0 0 0 3px var(--accent-glow);width:215px;}
.cctv-search-clear{position:absolute;right:8px;background:var(--text-3);border:none;border-radius:50%;width:16px;height:16px;display:flex;align-items:center;justify-content:center;color:var(--bg-base);cursor:pointer;transition:.15s;padding:0;}
.cctv-search-clear:hover{background:var(--danger);}

/* Grid toggle */
.cctv-grid-toggle{display:flex;gap:2px;background:var(--bg-card);border:1px solid var(--border);border-radius:6px;padding:3px;}
.grid-btn{width:28px;height:28px;display:flex;align-items:center;justify-content:center;background:transparent;border:none;border-radius:4px;color:var(--text-3);cursor:pointer;transition:.15s;}
.grid-btn:hover{color:var(--text-1);background:var(--bg-hover);}
.grid-btn.active{background:var(--accent);color:#fff;box-shadow:0 0 10px var(--accent-glow);}
.grid-btn svg{fill:currentColor;}

/* Theme button */
.cctv-theme-btn{width:33px;height:33px;display:flex;align-items:center;justify-content:center;background:var(--bg-card);border:1px solid var(--border);border-radius:6px;color:var(--text-2);cursor:pointer;transition:.2s;}
.cctv-theme-btn:hover{background:var(--accent-dim);border-color:var(--border-hi);color:var(--accent);}

/* ── TABS ── */
.cctv-tabs-wrap{background:var(--bg-surface);border-bottom:1px solid var(--border);overflow-x:auto;scrollbar-width:none;position:sticky;top:63px;z-index:99;transition:background .3s;}
.cctv-tabs-wrap::-webkit-scrollbar{display:none;}
.cctv-tabs{display:flex;padding:0 14px;white-space:nowrap;}
.cctv-tab{display:inline-flex;align-items:center;gap:6px;padding:11px 15px;background:transparent;border:none;border-bottom:2px solid transparent;color:var(--text-2);font-family:'DM Sans',sans-serif;font-size:13px;font-weight:500;cursor:pointer;transition:.2s;white-space:nowrap;flex-shrink:0;}
.cctv-tab:hover{color:var(--text-1);}
.cctv-tab.active{color:var(--accent);border-bottom-color:var(--accent);}
.cctv-tab svg{flex-shrink:0;opacity:.6;}
.cctv-tab.active svg{opacity:1;}
.cctv-tab-label{max-width:150px;overflow:hidden;text-overflow:ellipsis;}
.cctv-tab-count{background:var(--bg-card-2);color:var(--text-3);font-size:10px;font-weight:600;padding:1px 6px;border-radius:10px;border:1px solid var(--border);min-width:22px;text-align:center;}
.cctv-tab.active .cctv-tab-count{background:var(--accent);color:#fff;border-color:var(--accent);}

/* ── STATS ── */
.cctv-stats-bar{display:flex;align-items:center;gap:12px;padding:8px 18px;background:var(--bg-surface);border-bottom:1px solid var(--border);transition:background .3s;flex-wrap:wrap;}
.cctv-stat{display:flex;align-items:center;gap:5px;}
.cctv-stat-value{font-family:'Rajdhani',sans-serif;font-size:17px;font-weight:700;line-height:1;}
.stat-online{color:var(--success);}
.stat-offline{color:var(--danger);}
.stat-total{color:var(--accent-2);}
.cctv-stat-label{font-size:11px;color:var(--text-3);text-transform:uppercase;letter-spacing:.8px;}
.cctv-stat-divider{width:1px;height:18px;background:var(--border);}
.cctv-stat-spacer{flex:1;}
.cctv-search-status{display:flex;align-items:center;gap:5px;color:var(--accent);font-size:12px;}
.cctv-stat-loc{display:flex;align-items:center;gap:5px;color:var(--text-2);font-size:12px;font-weight:500;}
.cctv-stat-loc svg{color:var(--accent);flex-shrink:0;}

/* ── GRID ── */
.cctv-grid{display:grid;gap:13px;padding:15px;position:relative;z-index:1;}
.cctv-grid.cols-2{grid-template-columns:repeat(2,1fr);}
.cctv-grid.cols-3{grid-template-columns:repeat(3,1fr);}
.cctv-grid.cols-4{grid-template-columns:repeat(4,1fr);}

/* ── CAMERA CARD ── */
.cctv-card{background:var(--bg-card);border:1px solid var(--border);border-radius:12px;overflow:hidden;transition:transform .2s,border-color .2s,box-shadow .2s;box-shadow:var(--shadow);display:flex;flex-direction:column;animation:cardIn .32s ease both;}
.cctv-card:hover{border-color:var(--border-hi);box-shadow:var(--shadow),var(--shadow-glow);transform:translateY(-2px);}
.cctv-card.search-hidden{display:none!important;}
@keyframes cardIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}

/* Video wrap */
.cctv-card-video-wrap{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;cursor:pointer;}
/* Camera idle background */
.cctv-cam-bg{position:absolute;inset:0;z-index:4;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;background:linear-gradient(135deg,var(--cam-bg-a) 0%,var(--cam-bg-b) 100%);transition:opacity .45s ease;}
.cctv-cam-bg.gone{opacity:0;pointer-events:none;}
.cctv-cam-bg-icon{width:48px;height:48px;background:var(--cam-icon-bg);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--accent);animation:iconPulse 2.2s ease-in-out infinite;}
@keyframes iconPulse{0%,100%{transform:scale(1);opacity:.75}50%{transform:scale(1.07);opacity:1}}
.cctv-cam-bg-text{font-size:11px;color:var(--text-3);letter-spacing:.4px;}
/* Scanlines */
.cctv-card-video-wrap::after{content:'';position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent,transparent 2px,var(--scan) 2px,var(--scan) 4px);pointer-events:none;z-index:2;}
/* Bottom vignette */
.cctv-card-video-wrap::before{content:'';position:absolute;inset:0;background:linear-gradient(to bottom,transparent 55%,var(--vignette) 100%);z-index:3;pointer-events:none;}
.cctv-video{width:100%;height:100%;object-fit:cover;display:block;position:relative;z-index:1;}

/* Hover overlay */
.cctv-card-overlay{position:absolute;inset:0;z-index:5;display:flex;align-items:center;justify-content:center;opacity:0;transition:.2s;background:rgba(4,13,26,.2);}
[data-theme="light"] .cctv-card-overlay{background:rgba(10,30,60,.15);}
.cctv-card-video-wrap:hover .cctv-card-overlay{opacity:1;}
.cctv-fs-btn{background:rgba(45,140,255,.88);border:none;border-radius:50%;width:42px;height:42px;display:flex;align-items:center;justify-content:center;color:#fff;cursor:pointer;backdrop-filter:blur(8px);transition:.2s;box-shadow:0 4px 14px rgba(45,140,255,.4);}
.cctv-fs-btn:hover{transform:scale(1.1);}

/* Badges */
.cctv-card-badges{position:absolute;top:8px;left:8px;z-index:6;display:flex;gap:4px;}
.cctv-badge{font-family:'Rajdhani',sans-serif;font-size:9px;font-weight:700;letter-spacing:1.2px;padding:2px 7px;border-radius:4px;backdrop-filter:blur(8px);display:flex;align-items:center;gap:4px;}
.badge-live{background:rgba(255,71,87,.85);color:#fff;}
.badge-offline{background:rgba(40,50,70,.85);color:var(--text-3);}
.badge-idle{background:rgba(255,179,0,.8);color:#000;}
.cctv-card-num{position:absolute;top:8px;right:8px;z-index:6;font-family:'Rajdhani',sans-serif;font-size:9px;font-weight:600;letter-spacing:1px;color:rgba(255,255,255,.3);background:rgba(0,0,0,.28);padding:2px 6px;border-radius:4px;backdrop-filter:blur(4px);}

/* Card footer */
.cctv-card-footer{padding:9px 12px;display:flex;align-items:center;gap:8px;border-top:1px solid var(--border);background:var(--bg-card-2);}
.cctv-status-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;transition:.3s;}
.cctv-status-dot.online{background:var(--success);box-shadow:0 0 6px var(--success);animation:stPulse 2.5s ease-in-out infinite;}
.cctv-status-dot.offline{background:var(--danger);box-shadow:none;}
.cctv-status-dot.idle{background:#ffb300;box-shadow:none;}
@keyframes stPulse{0%,100%{opacity:1}50%{opacity:.4}}
.cctv-card-name{font-size:12px;font-weight:500;color:var(--text-1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;}

/* ── SKELETON ── */
.cctv-skeleton{background:var(--sk-foot);border:1px solid var(--border);border-radius:12px;overflow:hidden;animation:cardIn .3s ease both;}
.cctv-skeleton-video{width:100%;aspect-ratio:16/9;background:linear-gradient(90deg,var(--sk-1) 25%,var(--sk-2) 50%,var(--sk-1) 75%);background-size:200% 100%;animation:shimmer 1.5s infinite;}
.cctv-skeleton-footer{padding:9px 12px;background:var(--sk-foot);border-top:1px solid var(--border);display:flex;flex-direction:column;gap:5px;}
.cctv-skeleton-line{height:9px;border-radius:4px;background:linear-gradient(90deg,var(--sk-1) 25%,var(--sk-2) 50%,var(--sk-1) 75%);background-size:200% 100%;animation:shimmer 1.5s infinite;}
.cctv-skeleton-line.short{width:55%;}
@keyframes shimmer{to{background-position:-200% 0}}

/* ── EMPTY STATES ── */
.cctv-grid-empty{grid-column:1/-1;text-align:center;padding:58px 20px;color:var(--text-3);}
.cctv-grid-empty svg{opacity:.28;display:block;margin:0 auto 12px;}
.cctv-grid-empty p{font-size:14px;}
.cctv-search-empty{text-align:center;padding:46px 20px;color:var(--text-3);}
.cctv-search-empty svg{opacity:.28;display:block;margin:0 auto 14px;}
.cctv-search-empty p{font-size:14px;color:var(--text-2);margin-bottom:4px;}
.cctv-search-empty p strong{color:var(--accent);}
.cctv-search-empty span{font-size:12px;}

/* ── LOAD MORE ── */
.cctv-load-more-wrap{text-align:center;padding:10px 16px 26px;}
.cctv-load-more-btn{display:inline-flex;align-items:center;gap:7px;background:transparent;border:1px solid var(--border-hi);border-radius:8px;color:var(--accent);font-family:'DM Sans',sans-serif;font-size:13px;font-weight:500;padding:9px 22px;cursor:pointer;transition:.2s;}
.cctv-load-more-btn:hover{background:var(--accent-dim);box-shadow:var(--shadow-glow);transform:translateY(-1px);}
.cctv-load-more-btn:disabled{opacity:.5;cursor:wait;transform:none;}
.spin-icon{animation:spin .8s linear infinite;}
@keyframes spin{to{transform:rotate(360deg)}}

/* ── MODAL ── */
.cctv-modal{display:none;position:fixed;inset:0;z-index:9999;}
.cctv-modal.open{display:flex;align-items:center;justify-content:center;}
.cctv-modal-backdrop{position:absolute;inset:0;background:var(--modal-bg);backdrop-filter:blur(6px);}
.cctv-modal-container{position:relative;z-index:1;background:var(--bg-card);border:1px solid var(--border-hi);border-radius:14px;width:min(94vw,1100px);max-height:92vh;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.7),var(--shadow-glow);animation:modalIn .25s cubic-bezier(.34,1.56,.64,1);}
@keyframes modalIn{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}
.cctv-modal-header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--border);gap:10px;}
.cctv-modal-title{display:flex;align-items:center;gap:10px;font-family:'Rajdhani',sans-serif;font-size:15px;font-weight:600;letter-spacing:.5px;color:var(--text-1);overflow:hidden;}
.cctv-modal-actions{display:flex;align-items:center;gap:12px;flex-shrink:0;}
.cctv-modal-time{font-family:'Rajdhani',sans-serif;font-size:13px;color:var(--text-2);letter-spacing:.5px;}
.cctv-modal-close{background:var(--bg-card-2);border:1px solid var(--border);border-radius:6px;width:32px;height:32px;display:flex;align-items:center;justify-content:center;color:var(--text-2);cursor:pointer;transition:.15s;}
.cctv-modal-close:hover{background:rgba(255,71,87,.15);border-color:rgba(255,71,87,.3);color:var(--danger);}
.cctv-modal-video-wrap{position:relative;aspect-ratio:16/9;background:#000;overflow:hidden;}
.cctv-modal-video{width:100%;height:100%;object-fit:contain;display:block;}
.cctv-modal-overlay-info{position:absolute;bottom:0;left:0;right:0;padding:12px 16px;display:flex;align-items:center;justify-content:space-between;background:linear-gradient(to top,rgba(4,13,26,.8),transparent);pointer-events:none;}
.cctv-modal-rec{display:flex;align-items:center;gap:5px;font-family:'Rajdhani',sans-serif;font-size:11px;font-weight:700;letter-spacing:1.5px;color:var(--danger);}
.cctv-modal-ts{font-family:'Courier New',monospace;font-size:11px;color:rgba(255,255,255,.5);}

/* ── PREVIEW CANVAS ── */
.cctv-preview-canvas {
    position: absolute; inset: 0; z-index: 2;
    width: 100%; height: 100%;
    object-fit: cover; display: block;
    transition: opacity .5s ease;
}
/* Spinner inside cam-bg saat loading preview */
.cctv-cam-bg-spinner {
    width: 18px; height: 18px;
    border: 2px solid var(--border);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin .8s linear infinite;
}
.cctv-cam-bg.gone .cctv-cam-bg-spinner { display: none; }
/* iOS no-support panel inside modal */
.cctv-modal-no-support {
    display: none;
    position: absolute; inset: 0; z-index: 10;
    flex-direction: column; align-items: center; justify-content: center;
    gap: 14px;
    background: linear-gradient(135deg, #040d1a, #0d2248);
    color: var(--text-2); text-align: center; padding: 30px;
}
.cctv-modal-no-support svg { opacity: .4; }
.cctv-modal-no-support p { font-size: 14px; color: var(--text-2); max-width: 300px; line-height: 1.6; margin: 0; }
.cctv-modal-no-support span { font-size: 11px; color: var(--text-3); }
/* Modal canvas for iOS Broadway fallback */
#modalCanvas {
    display: none;
    width: 100%; height: 100%;
    object-fit: contain;
}

/* ── RESPONSIVE ── */
@media(max-width:1100px){.cctv-grid.cols-4{grid-template-columns:repeat(3,1fr);}}
@media(max-width:860px){
    .cctv-grid.cols-3,.cctv-grid.cols-4{grid-template-columns:repeat(2,1fr);}
    .cctv-search-input{width:145px;}
    .cctv-search-input:focus{width:170px;}
}
@media(max-width:600px){
    .cctv-control-bar{padding:10px 12px;}
    .cctv-clock{display:none;}
    .cctv-brand-sub{display:none;}
    .cctv-grid{gap:8px;padding:10px;}
    .cctv-grid.cols-2,.cctv-grid.cols-3,.cctv-grid.cols-4{grid-template-columns:repeat(2,1fr);}
    .cctv-search-input{width:115px;font-size:12px;}
    .cctv-stats-bar{gap:9px;padding:7px 12px;}
    .cctv-modal-container{width:98vw;}
}
@media(max-width:380px){
    .cctv-grid.cols-2,.cctv-grid.cols-3,.cctv-grid.cols-4{grid-template-columns:1fr;}
}