:root{--bg:#080c12;--bg2:#0b1118;--panel:#101822;--panel2:#0d141c;--line:#233246;--line2:#31435b;--text:#f5f7fa;--muted:#95a3b5;--soft:#c7d2de;--good:#63d398;--warn:#e7bc63;--bad:#eb7b83;--accent:#dce9f7;--accentText:#091018;--shadow:0 24px 70px rgba(0,0,0,.34)}
*{box-sizing:border-box}html{background:var(--bg)}body{margin:0;min-height:100vh;color:var(--text);font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;background:radial-gradient(900px 480px at 50% -180px,rgba(73,113,163,.16),transparent 70%),var(--bg)}button,input,select{font:inherit}.hidden{display:none!important}button{cursor:pointer}a{color:inherit}
.loginScreen{min-height:100vh;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(420px,.85fr)}.loginVisual{position:relative;overflow:hidden;padding:46px;display:flex;flex-direction:column;justify-content:space-between;border-right:1px solid rgba(255,255,255,.06);background:linear-gradient(180deg,rgba(11,17,24,.1),rgba(8,12,18,.9)),radial-gradient(700px 480px at 30% 20%,rgba(81,129,185,.16),transparent 70%),#0a0f16}.loginLogo{width:170px;border-radius:22px;box-shadow:0 20px 70px rgba(0,0,0,.35)}.loginCopy{max-width:760px}.eyebrow{font-size:9px;color:#89a7cb;letter-spacing:.16em;text-transform:uppercase;font-weight:900}.loginCopy h1{font-size:clamp(42px,5vw,72px);line-height:.96;letter-spacing:-.05em;margin:11px 0 18px}.loginCopy p,.hero p{max-width:760px;color:var(--muted);font-size:11px;line-height:1.7}.loginFoot{font-size:9px;color:#5f6e81}.loginPane{display:flex;align-items:center;justify-content:center;padding:34px;background:#090d13}.loginCard{width:min(420px,100%)}.loginCard h2{font-size:27px;letter-spacing:-.03em;margin:8px 0}.loginCard>p{color:var(--muted);font-size:11px;line-height:1.6;margin:0 0 24px}.loginCard label,.formGrid label,.pad>label{display:block;font-size:9px;color:#a9b5c4;font-weight:850;margin-bottom:12px}.loginCard input,.formGrid input,.pad input,.formGrid select,.pad select{width:100%;height:44px;border-radius:11px;border:1px solid var(--line);background:#0d141c;color:white;padding:0 12px;outline:none;margin-top:7px}.loginCard input:focus,.formGrid input:focus,.pad input:focus,.formGrid select:focus,.pad select:focus{border-color:#506986;box-shadow:0 0 0 3px rgba(115,150,192,.08)}.formError{font-size:9px;color:var(--bad);min-height:16px;margin-top:8px}
.appShell{display:grid;grid-template-columns:250px minmax(0,1fr);min-height:100vh}.sidebar{position:sticky;top:0;height:100vh;background:linear-gradient(180deg,#0e151e,#0a0f15);border-right:1px solid var(--line);padding:15px 12px;display:flex;flex-direction:column;z-index:50}.brandRow{display:flex;align-items:center;gap:10px;padding:4px 7px 16px;border-bottom:1px solid rgba(255,255,255,.06)}.brandLogoWrap{width:42px;height:42px;border-radius:12px;overflow:hidden;border:1px solid var(--line);background:#0b1118;flex:none}.brandLogoWrap.large{width:84px;height:84px;margin:auto}.brandLogoWrap img{width:100%;height:100%;object-fit:cover}.brandRow b,.viewerBrand b{font-size:14px}.brandRow small,.viewerBrand small{display:block;color:var(--muted);font-size:8px;letter-spacing:.11em;text-transform:uppercase;margin-top:3px}.sideNav{padding-top:13px;display:grid;gap:4px}.navLabel{font-size:8px;color:#596a7d;letter-spacing:.13em;text-transform:uppercase;padding:11px 9px 5px}.sideNav button{border:0;background:transparent;color:#a9b6c5;min-height:41px;border-radius:10px;padding:0 10px;display:flex;align-items:center;gap:10px;text-align:left;font-size:10px;font-weight:790}.sideNav button span{width:25px;height:25px;border:1px solid #2a3a4d;border-radius:8px;display:grid;place-items:center;font-size:9px;background:#101822;color:#c2cdda}.sideNav button:hover,.sideNav button.active{background:#17212e;color:#fff}.sideNav button.active span{background:#e0ebf6;color:#091018;border-color:transparent}.sideStatus{margin-top:auto;border:1px solid var(--line);background:#0a1118;border-radius:12px;padding:10px;font-size:9px}.sideStatus small{display:block;color:var(--muted);line-height:1.55;margin-top:5px}.statusDot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--good);margin-right:7px}
.mainPane{min-width:0}.topbar{position:sticky;top:0;z-index:40;height:66px;background:rgba(8,12,18,.86);backdrop-filter:blur(18px);border-bottom:1px solid rgba(255,255,255,.07);display:flex;align-items:center;gap:10px;padding:0 22px}.crumb{font-size:10px;color:var(--muted)}.crumb b{color:#fff}.topActions{margin-left:auto;display:flex;gap:7px;align-items:center}.pill,.iconBtn{border:1px solid var(--line);background:#0d141c;color:#dce5ef;border-radius:9px;height:34px}.pill{padding:0 10px;font-size:9px;font-weight:800}.userPill{display:flex;gap:7px;align-items:center}.userPill small{color:var(--muted);text-transform:uppercase}.iconBtn{width:34px;display:grid;place-items:center}.content{max-width:1540px;margin:auto;padding:24px 24px 80px}.view{display:none}.view.active{display:block}.hero{display:flex;justify-content:space-between;gap:18px;align-items:end;margin-bottom:18px}.hero h1{font-size:31px;margin:6px 0 0;letter-spacing:-.035em}.btn{height:38px;border:1px solid var(--line);border-radius:10px;background:#111923;color:#dce5ef;padding:0 12px;font-size:9px;font-weight:850}.btn:hover{border-color:#435a75}.btn.primary{background:var(--accent);color:var(--accentText);border-color:transparent}.btn.small{height:32px;padding:0 9px}.btn.wide{width:100%}.btn.danger{color:#ffc2c2;border-color:#553038;background:#211217}.panel{border:1px solid var(--line);background:linear-gradient(180deg,#111821,#0b1118);border-radius:15px;overflow:hidden}.panelHead{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:13px 14px;border-bottom:1px solid rgba(255,255,255,.06)}.panelTitle{font-size:11px;font-weight:900}.panelSub{font-size:8px;color:var(--muted);margin-top:3px}.panelTools{display:flex;gap:6px;flex-wrap:wrap}.panelTools select{height:32px;border:1px solid var(--line);background:#0b1118;color:#d7e0ea;border-radius:9px;padding:0 9px;font-size:9px}.twoCol{display:grid;grid-template-columns:1.42fr .58fr;gap:11px;margin-top:11px}.kpiGrid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:9px;margin-bottom:16px}.kpi{border:1px solid var(--line);border-radius:14px;background:linear-gradient(180deg,#111923,#0b1118);padding:12px}.kv{font-size:21px;font-weight:920;letter-spacing:-.03em}.kl{font-size:8px;color:var(--muted);text-transform:uppercase;letter-spacing:.1em;margin-top:5px}.ks{font-size:8px;color:#6f7f91;margin-top:5px}.cameraGrid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:9px;padding:11px}.camera{border:1px solid #253247;background:#0e151d;border-radius:13px;overflow:hidden}.cameraPreview{aspect-ratio:16/9;position:relative;background:radial-gradient(circle at 50% 35%,rgba(119,160,205,.08),transparent 55%),#080d13;display:grid;place-items:center;color:#5f7084;font-size:8px}.camBadge{position:absolute;left:7px;top:7px;z-index:3;border:1px solid rgba(255,255,255,.12);background:rgba(5,8,12,.82);border-radius:999px;padding:4px 6px;font-size:7px;font-weight:900}.camBadge.good{color:var(--good)}.camBadge.warn{color:var(--warn)}.expandBtn{position:absolute;right:7px;top:7px;z-index:3;width:29px;height:29px;border:1px solid rgba(255,255,255,.12);border-radius:8px;background:rgba(6,9,13,.84);color:#fff}.camBody{padding:10px}.camId{font-size:8px;color:#7d91a8;font-weight:900}.camName{font-size:10px;font-weight:900;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.camMeta{font-size:8px;color:var(--muted);line-height:1.5;margin-top:5px}.camFoot{display:flex;align-items:center;justify-content:space-between;margin-top:9px;padding-top:8px;border-top:1px solid rgba(255,255,255,.06)}.state{font-size:8px;font-weight:900}.goodText{color:var(--good)}.warnText{color:var(--warn)}.badText{color:var(--bad)}.linkBtn{border:0;background:transparent;color:#a7c6ea;font-size:8px;font-weight:900}.eventRow{display:grid;grid-template-columns:84px 1fr auto;gap:11px;align-items:center;padding:11px 13px;border-bottom:1px solid rgba(255,255,255,.06)}.eventRow:last-child{border:0}.eventThumb{width:84px;aspect-ratio:16/9;border:1px solid var(--line);border-radius:9px;background:#080d13;object-fit:cover}.eventTitle{font-size:10px;font-weight:900}.eventMeta{font-size:8px;color:var(--muted);margin-top:4px;line-height:1.5}.actions{display:flex;gap:5px;flex-wrap:wrap}.smallBtn{height:30px;border:1px solid var(--line);border-radius:8px;background:#101720;color:#dce5ef;padding:0 8px;font-size:8px;font-weight:850}.smallBtn.primary{background:#e4edf7;color:#081018;border-color:transparent}.healthRow{display:flex;align-items:center;gap:9px;padding:10px 12px;border-bottom:1px solid rgba(255,255,255,.06)}.healthRow:last-child{border:0}.healthIcon{width:30px;height:30px;border:1px solid var(--line);border-radius:9px;background:#111a24;display:grid;place-items:center;font-size:8px}.healthName{font-size:9px;font-weight:850}.healthSub{font-size:8px;color:var(--muted);margin-top:3px}.healthVal{margin-left:auto;font-size:8px;font-weight:900}.liveLayout{display:grid;grid-template-columns:2fr .8fr;gap:11px}.liveMain{min-width:0}.liveBar{height:52px;padding:0 12px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);font-size:9px}.liveBar small{display:block;color:var(--muted);margin-top:3px}.videoStage{position:relative;aspect-ratio:16/9;background:#070c12;display:grid;place-items:center}.videoStage video{width:100%;height:100%;background:#000}.videoPlaceholder{position:absolute;inset:0;display:grid;place-items:center;color:#617287;font-size:10px;pointer-events:none}.liveCameraList{display:grid;gap:0}.liveCameraItem{padding:10px 12px;border-bottom:1px solid rgba(255,255,255,.06);display:flex;align-items:center;gap:10px;cursor:pointer}.liveCameraItem:hover{background:#111b27}.liveCameraItem b{font-size:9px}.liveCameraItem small{display:block;color:var(--muted);font-size:8px;margin-top:3px}.liveState{margin-left:auto;font-size:8px;font-weight:900}.tableWrap{overflow:auto}table{width:100%;border-collapse:collapse;min-width:760px}th,td{padding:10px;border-bottom:1px solid rgba(255,255,255,.06);text-align:left;font-size:9px}th{color:#78889a;text-transform:uppercase;letter-spacing:.08em;font-size:8px}.tag{display:inline-block;border:1px solid var(--line);border-radius:999px;padding:4px 6px;font-size:7px}.tag.good{color:var(--good)}.tag.warn{color:var(--warn)}.tag.bad{color:var(--bad)}.emptyState{padding:34px;text-align:center;color:var(--muted);font-size:9px}.cardGrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.infoCard{border:1px solid var(--line);background:#0e151d;border-radius:14px;padding:14px}.infoCard b{font-size:11px}.infoCard p{font-size:9px;color:var(--muted);line-height:1.55;margin:5px 0 0}.infoValue{font-size:23px;font-weight:900;margin-top:12px}.pad{padding:13px}.formGrid{display:grid;grid-template-columns:1fr 1fr;gap:9px}.formGrid.compact{margin:10px 0}.formWide{grid-column:1/-1}.formMsg{font-size:8px;color:var(--muted);margin-top:8px}.checkGrid{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:7px}.checkItem{display:flex;align-items:center;gap:7px;border:1px solid var(--line);border-radius:9px;padding:8px;font-size:8px}.checkItem input{width:auto;height:auto;margin:0}.shareList{padding:10px}.shareCard{border:1px solid var(--line);background:#0d141c;border-radius:12px;padding:11px;margin-bottom:8px}.shareCard:last-child{margin-bottom:0}.shareTop{display:flex;justify-content:space-between;gap:10px}.shareTitle{font-size:9px;font-weight:900}.shareMeta{font-size:8px;color:var(--muted);margin-top:4px;line-height:1.55}.shareCreated{margin-top:10px;border:1px solid #3d5874;background:#0b151f;padding:10px;border-radius:10px;font-size:8px;word-break:break-all}.modalBackdrop{position:fixed;inset:0;z-index:100;background:rgba(2,5,9,.86);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;padding:18px}.modal{width:min(1180px,100%);max-height:calc(100vh - 36px);overflow:auto;border:1px solid #2b3c52;border-radius:17px;background:#0d141c;box-shadow:var(--shadow)}.modalHead{height:56px;padding:0 14px;display:flex;align-items:center;border-bottom:1px solid var(--line);gap:10px}.modalHead small{display:block;color:var(--muted);font-size:8px;margin-top:3px}.modalHead .iconBtn{margin-left:auto}.modalBody{padding:13px}.modalBody video{width:100%;max-height:75vh;background:#000;border-radius:12px}.toast{position:fixed;z-index:150;right:18px;bottom:18px;border:1px solid var(--line2);background:#111a24;color:#fff;border-radius:12px;padding:11px 13px;box-shadow:var(--shadow);font-size:9px}.mobileNav{display:none}
.viewerBody{background:#080c12}.viewerShell{max-width:1300px;margin:auto;padding:18px}.viewerHeader{display:flex;align-items:center;justify-content:space-between;gap:10px;border:1px solid var(--line);background:#0d141c;border-radius:15px;padding:10px 12px}.viewerBrand{display:flex;align-items:center;gap:10px}.viewerHeader>div:last-child{text-align:right}.viewerHeader small{display:block;color:var(--muted);font-size:8px;margin-top:3px}.viewerHero{padding:34px 4px 18px}.viewerHero h1{font-size:31px;margin:7px 0}.viewerHero p{font-size:10px;color:var(--muted)}.viewerShell .cameraGrid{padding:0;margin-bottom:12px}.viewerVideo{border-radius:0 0 14px 14px}.viewerShell .panel{margin-top:12px}.invalidShare{min-height:100vh;display:grid;place-content:center;text-align:center;padding:24px}.invalidShare h1{font-size:30px;margin:10px 0}.invalidShare p{font-size:10px;color:var(--muted)}
@media(max-width:1260px){.appShell{grid-template-columns:210px minmax(0,1fr)}.cameraGrid{grid-template-columns:repeat(3,minmax(0,1fr))}.kpiGrid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:920px){.loginScreen{grid-template-columns:1fr}.loginVisual{display:none}.loginPane{min-height:100vh;padding:24px}.appShell{grid-template-columns:1fr}.sidebar{display:none}.content{padding:18px 12px 88px}.cameraGrid{grid-template-columns:repeat(2,minmax(0,1fr))}.twoCol,.liveLayout{grid-template-columns:1fr}.hero{display:block}.hero .btn{margin-top:10px}.topbar{padding:0 12px}.topActions .pill:first-child{display:none}.mobileNav{display:grid;grid-template-columns:repeat(5,1fr);position:fixed;z-index:70;left:10px;right:10px;bottom:10px;border:1px solid var(--line);background:rgba(12,18,26,.95);backdrop-filter:blur(16px);border-radius:15px;padding:6px;box-shadow:var(--shadow)}.mobileNav button{border:0;background:transparent;color:#91a1b4;border-radius:10px;min-height:48px;font-size:12px;display:grid;place-items:center}.mobileNav button small{font-size:7px}.mobileNav button.active{background:#182331;color:#fff}.cardGrid{grid-template-columns:1fr 1fr}.userPill{display:none}}
@media(max-width:580px){.cameraGrid,.kpiGrid,.cardGrid{grid-template-columns:1fr}.eventRow{grid-template-columns:72px 1fr}.eventThumb{width:72px}.eventRow .actions{grid-column:2}.formGrid,.checkGrid{grid-template-columns:1fr}.hero h1,.viewerHero h1{font-size:27px}.panelHead{align-items:flex-start;flex-direction:column}.panelTools{width:100%}.panelTools select{flex:1;min-width:0}.content{padding-left:10px;padding-right:10px}.viewerHeader{align-items:flex-start}.viewerHeader>div:last-child{font-size:9px}}


/* FITRA CCTV CAMERA WALL V2 */

.cameraGrid{
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
  padding:14px;
}

.camera{
  min-width:0;
}

.cameraPreview{
  position:relative;
  overflow:hidden;
  aspect-ratio:16/9;
  background:#05090e;
}

.cameraPreviewVideo{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  background:#05090e;
}

.cameraPreviewFallback{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  padding:20px;
  text-align:center;
  color:#617287;
  font-size:9px;
  background:
    radial-gradient(
      circle at 50% 35%,
      rgba(119,160,205,.08),
      transparent 55%
    ),
    #080d13;
  z-index:1;
}

.camBadge,
.expandBtn{
  z-index:4;
}

.twoCol{
  grid-template-columns:1fr 1fr;
}

@media(max-width:1260px){
  .cameraGrid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media(max-width:920px){
  .cameraGrid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .twoCol{
    grid-template-columns:1fr;
  }
}

@media(max-width:580px){
  .cameraGrid{
    grid-template-columns:1fr;
  }
}


/* FITRA CCTV PTZ FINAL */

.ptzPanel{
    position:absolute;
    right:14px;
    bottom:14px;
    z-index:8;

    width:170px;

    padding:10px;

    border:1px solid rgba(255,255,255,.16);
    border-radius:14px;

    background:rgba(7,12,18,.82);
    backdrop-filter:blur(14px);

    box-shadow:
      0 18px 50px rgba(0,0,0,.38);
}

.ptzHead{
    display:flex;
    justify-content:space-between;
    align-items:center;

    gap:8px;

    margin-bottom:9px;
}

.ptzHead b{
    font-size:9px;
}

.ptzHead small{
    font-size:7px;
    color:var(--muted);
    text-align:right;
}

.ptzPad{
    display:grid;

    grid-template-columns:
      repeat(3,42px);

    grid-template-rows:
      repeat(3,38px);

    justify-content:center;

    gap:6px;
}

.ptzPad button{
    border:
      1px solid rgba(255,255,255,.15);

    border-radius:10px;

    background:#111a24;

    color:white;

    font-size:12px;

    cursor:pointer;
}

.ptzPad button:hover:not(:disabled){
    background:#1b2a3a;
    border-color:#506b88;
}

.ptzPad button:disabled{
    opacity:.3;
    cursor:not-allowed;
}

@media(max-width:580px){

    .ptzPanel{
        right:8px;
        bottom:8px;
        width:158px;
    }

    .ptzPad{
        grid-template-columns:
          repeat(3,38px);

        grid-template-rows:
          repeat(3,36px);
    }
}