/* IUPWATCH dashboard: the window of one view part of a large WIUP (bagian.js) */
#bgm{position:fixed;inset:0;z-index:75;background:#020810d9;display:flex;align-items:center;justify-content:center;padding:18px}
#bgm[hidden]{display:none}
body.bgm-buka{overflow:hidden}
.bgm-kartu{width:min(980px,100%);max-height:calc(100vh - 36px);display:flex;flex-direction:column;background:#0b1622;border:1px solid #1e4668;border-radius:16px;box-shadow:0 24px 80px #000c;overflow:hidden}
.bgm-kepala{display:flex;align-items:flex-start;gap:12px;padding:14px 16px;border-bottom:1px solid #16344d}
.bgm-kepala div{flex:1;min-width:0}.bgm-kepala b{display:block;color:#fff;font-size:15px}.bgm-kepala small{display:block;color:#8aa4b8;font-size:11.5px;margin-top:3px}
.bgm-kepala button,.bgm-kaki button{background:#0e2a40;border:1px solid #1e4668;color:#bfeaff;border-radius:9px;padding:7px 12px;font:800 12px system-ui;cursor:pointer}
.bgm-kaki button:disabled{opacity:.4;cursor:default}
.bgm-isi{overflow-y:auto;padding:14px 16px;-webkit-overflow-scrolling:touch}
.bgm-kaki{display:flex;gap:8px;justify-content:space-between;padding:10px 16px;border-top:1px solid #16344d}
.bgm-muat{display:flex;gap:10px;align-items:center;justify-content:center;padding:60px 0;color:#8aa4b8}
.bgm-muat i{width:16px;height:16px;border-radius:50%;border:2px solid #1e4668;border-top-color:#2fd6ff;animation:bgm-p .8s linear infinite}
@keyframes bgm-p{to{transform:rotate(360deg)}}
.bgm-cv{position:relative;margin:0 auto;border-radius:12px;overflow:hidden;border:1px solid #1e4668;background:#000;touch-action:none;cursor:zoom-in}
.bgm-cv.zoom{cursor:grab}
.bgm-lay{position:absolute;inset:0;transform-origin:0 0;will-change:transform}
.bgm-lay img{width:100%;height:100%;display:block;image-rendering:auto;user-select:none}
.bgm-kosong{display:grid;place-items:center;height:100%;color:#6f8ba1;font-size:12px}
.bgm-batas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:hidden}
.bgm-batas polygon{vector-effect:non-scaling-stroke;stroke-linejoin:round;stroke-width:calc(var(--w,1.8px) * var(--inv,1))}
.bgm-pin{position:absolute;transform:translate(-50%,-50%) scale(var(--inv,1));min-width:20px;height:20px;padding:0 5px;border-radius:10px;border:1.5px solid #fff;color:#fff;font:800 10.5px system-ui;cursor:pointer;z-index:3}
.bgm-pin.petak{background:#b3301a}.bgm-pin.petak.rk{background:#8a6a1c}
.bgm-pin.objek{background:#7a4a00;border-color:#ffc83c}.bgm-pin.objek.merah{background:#8a1a12;border-color:#ff8a80}
.bgm-tag{position:absolute;top:8px;z-index:4;background:#04121dcc;border:1px solid #2fd6ff55;color:#7fe3ff;font:700 10px ui-monospace,monospace;letter-spacing:1px;padding:3px 8px;border-radius:20px}
.bgm-tag.kiri{left:8px}.bgm-tag.kanan{right:8px}
.bgm-muatcitra{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);z-index:4;background:#04121dcc;color:#9fd8ef;font-size:11px;padding:4px 10px;border-radius:20px}
.bgm-stat{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:12px 0}
.bgm-stat div{background:#0a1a29;border:1px solid #16344d;border-radius:10px;padding:10px 12px}
.bgm-stat b{display:block;font:800 20px system-ui;color:#fff;font-variant-numeric:tabular-nums}.bgm-stat b.kn{color:#ffd466}.bgm-stat b.mr{color:#ff8a80}
.bgm-stat span{font-size:10.5px;color:#8aa4b8}
.bgm-h{font:800 11px system-ui;letter-spacing:1.4px;text-transform:uppercase;color:#ff9a6b;margin:14px 0 8px}
.bgm-daftar{display:grid;gap:6px}
.bgm-daftar button{display:flex;gap:10px;align-items:flex-start;text-align:left;background:#0a1a29;border:1px solid #16344d;border-radius:10px;padding:8px 10px;color:#d7e9f5;cursor:pointer}
.bgm-daftar i{flex:0 0 auto;min-width:22px;height:22px;border-radius:11px;background:#b3301a;color:#fff;font:800 11px system-ui;font-style:normal;display:grid;place-items:center}
.bgm-daftar i.rk{background:#8a6a1c}.bgm-daftar i.ob{background:#7a4a00}.bgm-daftar i.ob.merah{background:#8a1a12}
.bgm-daftar b{font-size:12.5px;color:#fff}.bgm-daftar em{font-style:normal;font-size:10.5px;font-weight:700;margin-left:6px;color:#8ff0bd}
.bgm-daftar em.kn{color:#ffd466}.bgm-daftar em.mr{color:#ff8a80}.bgm-daftar small{display:block;font-size:10.5px;color:#8aa4b8;margin-top:2px}
.bgm-cat{font-size:11.5px;color:#6f8ba1;margin-top:10px}
@media (hover:hover) and (pointer:fine){.bgm-daftar button:hover{border-color:#1e4668;background:#0e2233}}
@media (max-width:760px){
  #bgm{padding:0;align-items:stretch}
  .bgm-kartu{max-height:none;height:100%;border-radius:0;border:0}
  .bgm-stat{grid-template-columns:repeat(2,1fr)}
  .bgm-kaki{padding:10px 12px calc(10px + env(safe-area-inset-bottom))}
  .bgm-kaki button{flex:1;padding:9px 6px}
  #bgm{--bgm-tinggi:55vh}
}
@media (prefers-reduced-motion:reduce){.bgm-muat i{animation:none}}