*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:#06111f;color:#e8f1fb;font-family:Inter,Segoe UI,Arial,sans-serif}button,input,select,textarea{font:inherit}.app{min-height:100vh;display:flex;background:radial-gradient(circle at 80% 0,#102d49 0,#06111f 35%,#040a12 100%)}.sidebar{width:235px;position:fixed;inset:0 auto 0 0;padding:18px 14px 14px;background:rgba(4,15,28,.96);border-right:1px solid #1c3955;z-index:50;overflow:hidden;display:flex;flex-direction:column;box-sizing:border-box}.logo-wrap{height:125px;display:flex;justify-content:center;align-items:center;overflow:hidden;border-radius:12px;margin-bottom:5px}.logo-wrap img{width:100%;height:100%;object-fit:cover;object-position:center}.brand{font-size:28px;font-weight:900;letter-spacing:2px;text-align:center;background:linear-gradient(90deg,#fff,#68c9ff);color:transparent;background-clip:text}.brand-sub{text-align:center;font-size:9px;letter-spacing:2px;color:#90a9c0;margin:3px 0 22px}.sidebar nav{display:flex;flex:1;min-height:0;flex-direction:column;gap:6px;overflow-y:auto;padding-right:2px;position:relative;z-index:60}.sidebar nav::-webkit-scrollbar{width:4px}.sidebar nav::-webkit-scrollbar-thumb{background:#244663;border-radius:5px}.nav-btn{border:1px solid transparent;background:transparent;color:#abc2d9;border-radius:10px;padding:12px 13px;text-align:left;cursor:pointer;font-weight:600}.nav-btn span{margin-left:7px}.nav-btn:hover,.nav-btn.active{background:linear-gradient(90deg,#0e3a63,#0c2741);color:#fff;border-color:#1b5785;box-shadow:inset 3px 0 #39a9ff}.side-bottom{position:static;flex:0 0 auto;margin:12px 4px 0;padding:10px 4px 2px;border-top:1px solid rgba(90,150,195,.18);z-index:70;pointer-events:none;text-align:center;color:#7f9bb4;font-size:11px;line-height:1.5;background:rgba(4,15,28,.98)}.side-bottom b{font-size:16px;color:#a9c9e4}.side-bottom small{display:block;margin-top:9px;font-style:italic}.content{margin-left:235px;width:calc(100% - 235px);padding:22px 25px 35px}.topbar{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:17px}.eyebrow{color:#3db8ff;font-size:11px;letter-spacing:4px;font-weight:800}.topbar h1{margin:3px 0 4px;font-size:31px;letter-spacing:.5px}.topbar p{margin:0;color:#8ea7bf;font-size:13px}.clock{display:flex;flex-direction:column;align-items:flex-end;gap:3px;color:#8ea7bf;font-size:11px}.clock b{font-size:18px;color:#dceaf7}.online{color:#3fe0a0;font-weight:800;margin-top:4px}.global-filter{display:grid;grid-template-columns:1.05fr 1.05fr 1.05fr .9fr auto;gap:10px;padding:13px;border:1px solid #1c3a57;border-radius:12px;background:rgba(7,22,37,.85);margin-bottom:16px}.global-filter label,label{display:block;color:#93abc1;font-size:11px}.global-filter select,.global-filter button{margin-top:5px}.global-filter select,.form-grid input,.form-grid select,.form-grid textarea{width:100%;border:1px solid #244663;background:#0b2035;color:#eaf3fb;border-radius:8px;padding:10px 11px;outline:none}.global-filter select:focus,.form-grid input:focus,.form-grid select:focus,.form-grid textarea:focus{border-color:#35a9f7;box-shadow:0 0 0 2px rgba(53,169,247,.12)}.page{display:none}.page.active{display:block}.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:14px}.card,.panel,.mini-panel{background:linear-gradient(145deg,rgba(11,30,50,.97),rgba(7,19,33,.97));border:1px solid #1c3b58;border-radius:13px;box-shadow:0 14px 38px rgba(0,0,0,.22)}.card{padding:16px;position:relative;overflow:hidden}.card:after{content:"";position:absolute;width:90px;height:90px;border-radius:50%;right:-38px;top:-38px;background:rgba(58,180,255,.08)}.card span{color:#9ab0c6;font-size:12px}.card strong{display:block;font-size:29px;margin:7px 0 3px}.card small{color:#6f89a1}.hero-grid{display:grid;grid-template-columns:minmax(0,2.25fr) minmax(280px,.75fr);gap:13px;margin-bottom:13px}.panel{padding:15px;margin-bottom:13px}.map-panel{margin-bottom:0}.panel-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:11px}.panel h2,.panel h3,.mini-panel h3{margin:0}.panel h2{font-size:16px}.panel h3,.mini-panel h3{font-size:14px}.panel-head p{margin:4px 0 0;color:#7791aa;font-size:11px}.legend{display:flex;gap:9px;flex-wrap:wrap;color:#9db4c9;font-size:10px}.dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:4px}.red{background:#ff4b4b}.blue{background:#35a9ff}.green{background:#32d49b}.amber{background:#ffbf24}.map{height:450px;border-radius:10px;overflow:hidden;background:#0a1928}.map.large{height:650px}.side-charts{display:flex;flex-direction:column;gap:13px}.mini-panel{padding:15px}.bars{height:160px;display:flex;align-items:flex-end;gap:9px;padding:15px 4px 4px}.bar-col{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;gap:4px}.bar{width:100%;max-width:28px;border-radius:4px 4px 0 0;background:linear-gradient(#36b8ff,#12527d);min-height:3px}.bar-col small{color:#6f89a1;font-size:8px;text-align:center}.bar-col b{font-size:9px;color:#dce8f4}.system-list{display:flex;flex-direction:column;gap:10px}.system-list div{display:flex;justify-content:space-between;border-bottom:1px solid #19334c;padding-bottom:8px;color:#89a1b7;font-size:11px}.system-list b{color:#42dfa5;font-size:10px}.four-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.link-btn{border:0;background:none;color:#3eb7ff;cursor:pointer;font-size:10px}.table-wrap{overflow:auto;max-height:340px}.data-table{width:100%;border-collapse:collapse;font-size:10px}.data-table th{color:#7290a9;font-weight:700;text-align:left;padding:8px;border-bottom:1px solid #1d3b56;white-space:nowrap}.data-table td{padding:8px;border-bottom:1px solid #132c43;color:#c6d7e6;white-space:nowrap}.empty{padding:35px 10px;text-align:center;color:#617c95;font-size:12px}.badge{padding:6px 9px;border-radius:20px;background:#0c3657;color:#59c1ff;border:1px solid #1b638e;font-size:9px;font-weight:800}.form-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:11px}.form-grid label{color:#90a8bf}.form-grid .full{grid-column:1/-1}.form-grid input,.form-grid select,.form-grid textarea{margin-top:5px}.form-grid textarea{resize:vertical}.group{padding:9px 11px;background:#0a1b2d;border:1px solid #19364f;border-radius:8px;color:#54bcff!important}.form-actions{display:flex;gap:9px;justify-content:flex-start}.primary,.secondary,.danger{border-radius:8px;padding:10px 14px;border:1px solid #285879;cursor:pointer;font-weight:800}.primary{background:linear-gradient(135deg,#1198ef,#0b67bb);color:#fff}.secondary{background:#12283e;color:#a9bfd3}.danger{background:#351c26;color:#ff9eac;border-color:#70303e}.export-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.qc-box{margin-top:16px;padding:14px;border:1px solid #246044;background:#09261e;color:#9fd8c1;border-radius:10px;line-height:1.7;font-size:12px}footer{padding:14px 3px;color:#5f7891;font-size:10px;display:flex;justify-content:space-between}footer b{color:#7894ad}@media(max-width:1200px){.cards,.four-grid{grid-template-columns:repeat(2,1fr)}.hero-grid{grid-template-columns:1fr}.form-grid{grid-template-columns:repeat(2,1fr)}.global-filter{grid-template-columns:repeat(2,1fr)}}@media(max-width:760px){.sidebar{width:75px}.brand,.brand-sub,.side-bottom,.nav-btn span{display:none}.logo-wrap{height:70px}.content{margin-left:75px;width:calc(100% - 75px);padding:14px}.topbar{flex-direction:column;gap:10px}.topbar h1{font-size:22px}.global-filter,.cards,.four-grid,.form-grid,.export-grid{grid-template-columns:1fr}.map{height:420px}}

/* Puskesmas filter hanya tampil pada halaman Kesehatan/Puskesmas */
.puskesmas-filter-hidden{display:none!important}

.puskesmas-filter-hidden{display:none!important}

.upload-box{border:1px dashed #2b668d;border-radius:14px;padding:35px 20px;text-align:center;background:linear-gradient(145deg,#0a1e31,#071625);transition:.2s}.upload-box.drag{border-color:#39b8ff;background:#0b2941;transform:scale(1.005)}.upload-icon{font-size:42px}.upload-box h3{margin:8px 0 4px;font-size:20px}.upload-box p{color:#7892aa;margin:0 0 15px}.upload-box small{display:block;color:#617d96;margin-top:12px}.qc-result{margin-top:14px}.hidden{display:none}.qc-pass,.qc-fail,.qc-loading{border-radius:10px;padding:15px}.qc-pass{border:1px solid #246044;background:#09261e;color:#b3e4ce}.qc-fail{border:1px solid #733344;background:#321722;color:#ffc0ca}.qc-loading{border:1px solid #2a5573;background:#0a2033;color:#9bc5e2}.qc-grid{display:grid;grid-template-columns:1fr 2fr;gap:7px 15px;margin:13px 0}.qc-grid span{color:#7591a8}.qc-grid b{color:#e2eef8}.qc-note{margin:8px 0 12px;color:#8eb4ce;font-size:13px;line-height:1.45}

.checks{display:flex;flex-wrap:wrap;gap:8px;margin-top:7px}.checks label{background:#0b2035;border:1px solid #244663;padding:8px 10px;border-radius:7px;color:#b5c9da;cursor:pointer}.checks input{width:auto!important;margin:0 5px 0 0}


/* V7 LOGIN / SESSION */
.login-screen{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:24px;background:radial-gradient(circle at 50% 0,#123b5c 0,#06111f 48%,#030810 100%)}
.login-card{width:min(430px,94vw);padding:28px;border:1px solid #245171;border-radius:18px;background:rgba(7,22,37,.97);box-shadow:0 25px 80px rgba(0,0,0,.55)}
.login-logo{display:block;width:130px;height:86px;object-fit:cover;border-radius:12px;margin:0 auto 14px}.login-eyebrow{text-align:center;color:#40b9ff;font-size:10px;letter-spacing:3px;font-weight:800}.login-card h2{text-align:center;font-size:36px;letter-spacing:3px;margin:5px 0}.login-card>p{text-align:center;color:#819ab1;font-size:12px;line-height:1.6;margin:0 0 20px}.login-card form{display:grid;gap:12px}.login-card input{width:100%;margin-top:5px;border:1px solid #244663;background:#0b2035;color:#eaf3fb;border-radius:8px;padding:12px;outline:none}.login-btn{width:100%;margin-top:4px}.login-error{padding:10px;border:1px solid #733344;background:#321722;color:#ffc0ca;border-radius:8px;font-size:11px}.login-note{display:block;text-align:center;color:#59758e;font-size:10px;margin-top:16px}.hidden{display:none!important}.locked{visibility:hidden}.session-user{color:#72b8df;font-size:10px;max-width:230px;text-align:right}.logout-btn{border:1px solid #31526b;background:#10263a;color:#9bb5ca;border-radius:7px;padding:5px 8px;font-size:9px;font-weight:800;cursor:pointer}.logout-btn:hover{border-color:#4a82a8;color:#fff}

/* V8 branding settings */
.logo-upload-row{display:flex;gap:18px;align-items:center;padding:14px;border:1px dashed rgba(100,180,255,.35);border-radius:12px;background:rgba(10,25,50,.35)}
.logo-preview-wrap{width:150px;height:100px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:#071326;border:1px solid rgba(120,190,255,.2);overflow:hidden}
.logo-preview-wrap img{max-width:130px;max-height:82px;object-fit:contain}
.logo-upload-controls{display:flex;flex-direction:column;gap:8px}
.logo-upload-controls input{max-width:360px}
.branding-preview{display:flex;align-items:center;gap:18px;padding:20px;border-radius:14px;background:rgba(7,19,38,.7);border:1px solid rgba(120,190,255,.2)}
.branding-preview img{width:78px;height:58px;object-fit:contain}
.branding-preview div{display:flex;flex-direction:column;gap:4px}
.branding-preview b{font-size:22px;letter-spacing:2px}
.branding-preview span{font-size:12px;opacity:.75;letter-spacing:1px}

/* V12 API migration banner */
.api-mode-banner{margin:0 0 12px;padding:10px 14px;border-radius:10px;font-size:11px;line-height:1.45;font-weight:600}
.api-mode-banner.ok{border:1px solid #246044;background:#09261e;color:#b3e4ce}
.api-mode-banner.warn{border:1px solid #7a6230;background:#2a2110;color:#f0d59a}
.api-mode-banner.err{border:1px solid #733344;background:#321722;color:#ffc0ca}
.wf{color:#72b8df;font-weight:700;margin-left:4px}

.btn-sm{padding:4px 8px;font-size:10px;border-radius:6px;margin-left:4px;font-weight:700}


/* Peta Interaktif — filter tampilan layer */
.map-filter-panel{margin:0 0 12px;padding:12px 14px;border:1px solid #1c3a57;border-radius:12px;background:rgba(7,22,37,.85)}
.map-filter-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:10px}
.map-filter-head b{font-size:13px;color:#dceaf7}
.map-filter-head small{color:#6f89a1;font-size:10px}
.map-filter-section{margin-top:8px}
.map-filter-label{display:block;color:#93abc1;font-size:11px;margin-bottom:4px;font-weight:700}
.map-filter-panel .checks{margin-top:4px}
.map-filter-empty{color:#617c95;font-size:11px;padding:6px 2px}

.coord-block{display:grid;grid-template-columns:1fr 1fr;gap:12px 16px;padding:12px 14px;border:1px solid #1e4a66;border-radius:12px;background:#071a28;margin:4px 0 8px}
.coord-block .coord-mode-wrap,.coord-block .coord-hint{grid-column:1/-1}
.coord-block .coord-wgs84,.coord-block .coord-utm{display:contents}
.coord-block .coord-wgs84.is-hidden,.coord-block .coord-utm.is-hidden{display:none}
.coord-block .coord-hint{color:#7a96ad;font-size:12px;line-height:1.4;margin:0}
.coord-block label{display:flex;flex-direction:column;gap:6px;font-size:13px;color:#9db6c9}
.coord-block input,.coord-block select{width:100%}

.map-filter-admin-empty{color:#8a6b3a;font-size:11px;padding:4px 2px}
.map-filter-admin label{color:#e8d5a3}
.qc-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px;align-items:center}
.qc-actions .primary.admin-save{
  background:linear-gradient(135deg,#d4a017,#b7791f);
  border-color:#e6c35c;
  color:#1a1205;
  box-shadow:0 0 0 2px rgba(230,195,92,.35),0 8px 24px rgba(180,120,20,.35);
  font-size:14px;
  padding:12px 18px;
}
.qc-actions .primary.admin-save:disabled{opacity:.65;cursor:wait}
.badge-admin{display:inline-block;margin-left:6px;padding:2px 7px;border-radius:999px;background:#3a2e12;color:#e6c35c;border:1px solid #8a6b3a;font-size:9px;font-weight:800;letter-spacing:.3px}
.admin-layer-hint{margin-top:10px;padding:10px 12px;border:1px dashed #8a6b3a;border-radius:10px;background:rgba(58,46,18,.35);color:#e8d5a3;font-size:12px;line-height:1.5}
/* Popup metadata SHP — kontras jelas di Leaflet */
.leaflet-popup.skynet-popup .leaflet-popup-content-wrapper,
.leaflet-popup.skynet-popup .leaflet-popup-tip{
  background:#0b1c2e;
  color:#e8f1fb;
  border:1px solid rgba(57,214,255,.28);
  box-shadow:0 12px 32px rgba(0,0,0,.45),0 0 0 1px rgba(57,214,255,.08);
}
.leaflet-popup.skynet-popup .leaflet-popup-content{margin:10px 12px;min-width:220px;max-width:340px}
.leaflet-popup.skynet-popup a.leaflet-popup-close-button{color:#8fb4cc;padding:6px 8px 0 0}
.leaflet-popup.skynet-popup a.leaflet-popup-close-button:hover{color:#fff}
.gis-popup{font-size:12px;line-height:1.35;color:#e8f1fb}
.gis-pop-hero{margin-bottom:10px;padding-bottom:8px;border-bottom:1px solid rgba(57,214,255,.18)}
.gis-pop-kicker{font-size:10px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:#39d6ff;margin-bottom:4px}
.gis-pop-name{font-size:15px;font-weight:800;color:#f5f8fc;letter-spacing:.2px}
.gis-pop-sub{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.gis-pop-sub span{
  font-size:10px;font-weight:700;color:#b7d4ea;
  background:rgba(57,214,255,.1);border:1px solid rgba(57,214,255,.22);
  border-radius:999px;padding:3px 8px
}
.gis-pop-sub span.gis-pop-layer{color:#e6c35c;border-color:rgba(230,195,92,.35);background:rgba(230,195,92,.08)}
.gis-pop-attrs{max-height:220px;overflow:auto;padding-right:2px}
.gis-pop-row{
  display:grid;grid-template-columns:minmax(88px,38%) 1fr;gap:8px;
  padding:6px 0;border-bottom:1px solid rgba(29,59,86,.85)
}
.gis-pop-row:last-child{border-bottom:0}
.gis-pop-k{color:#8aa3ba;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.3px}
.gis-pop-v{color:#eef5fb;font-size:12px;font-weight:600;word-break:break-word}
.gis-pop-more{margin-top:8px;color:#7aa0bb;font-size:10px;font-weight:700}
.gis-pop-empty{color:#9db4c9;font-size:12px;line-height:1.5;padding:4px 0}
.gis-pop-empty small{color:#7f9bb4}
.gis-popup-admin .gis-pop-kicker{color:#e6c35c}

.layer-actions{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.layer-actions .primary{padding:7px 10px;font-size:11px}


/* Administrasi — filter kecamatan/desa + label polygon */
.map-admin-boundary-filters{margin-top:10px;padding:10px 12px;border:1px solid #5a4a22;border-radius:10px;background:rgba(40,30,12,.35)}
.map-admin-filter-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.map-admin-boundary-filters label{display:flex;flex-direction:column;gap:5px;color:#e8d5a3;font-size:11px;font-weight:700}
.map-admin-boundary-filters select{width:100%;border:1px solid #8a6b3a;background:#1a1408;color:#f5f0e0;border-radius:8px;padding:6px 8px;outline:none;min-height:88px}
.map-admin-boundary-filters select:focus{border-color:#e6c35c;box-shadow:0 0 0 2px rgba(230,195,92,.18)}
.map-admin-filter-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:8px}
.map-admin-filter-hint{color:#a89060;font-size:10px;font-weight:500;line-height:1.4}
.map-admin-label-controls{margin-top:10px;display:flex;flex-direction:column;gap:8px}
.map-admin-label-toggle{flex-direction:row!important;align-items:center;gap:8px!important;font-weight:700;color:#e8d5a3}
.map-admin-label-toggle input{width:auto;margin:0}
.map-admin-field-detect{margin-top:8px;color:#a89060;font-size:10px;font-weight:500;line-height:1.45}
/* Nama desa di poligon: teks saja; centering di SPAN dalam agar tidak nabrak transform Leaflet */
.admin-desa-label.leaflet-marker-icon,
.admin-desa-label{
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  padding:0!important;
  margin:0!important;
  width:0!important;
  height:0!important;
  overflow:visible!important;
  pointer-events:none!important;
}
.admin-desa-label .admin-desa-label-text,
.admin-desa-label-text{
  position:absolute;
  left:0; top:0;
  display:inline-block;
  transform:translate(-50%,-50%);
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  padding:0!important;
  margin:0!important;
  color:#f5f0e0!important;
  font-size:11px!important;
  font-weight:800!important;
  letter-spacing:.2px;
  white-space:nowrap;
  pointer-events:none!important;
  text-shadow:
    0 0 3px rgba(0,0,0,.95),
    0 1px 2px rgba(0,0,0,.9),
    1px 1px 0 rgba(0,0,0,.75),
    -1px -1px 0 rgba(0,0,0,.55);
}
.leaflet-tooltip.admin-desa-label,
.leaflet-tooltip.admin-desa-label-tip{
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  padding:0!important;
  margin:0!important;
  color:#f5f0e0!important;
  font-size:11px!important;
  font-weight:800!important;
  pointer-events:none!important;
  text-shadow:
    0 0 3px rgba(0,0,0,.95),
    0 1px 2px rgba(0,0,0,.9),
    1px 1px 0 rgba(0,0,0,.75),
    -1px -1px 0 rgba(0,0,0,.55);
}
.admin-desa-label::before,
.leaflet-tooltip.admin-desa-label-tip::before{
  display:none!important;
}

@media(max-width:760px){
  .map-admin-filter-row{grid-template-columns:1fr}
}

/* Peta Interaktif — hub kontrol layer */
.map-basemap-switch{margin-top:4px}

/* Dashboard — OSM / Satelit toggle */
.dash-map-tools{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:10px}
.dash-basemap{
  display:inline-flex;gap:4px;padding:3px;border-radius:9px;position:relative;z-index:5;pointer-events:auto;
  border:1px solid rgba(57,214,255,.28);background:rgba(6,20,36,.75);
  box-shadow:inset 0 0 0 1px rgba(57,214,255,.06),0 0 12px rgba(30,120,200,.12)
}
.dash-basemap label{
  display:inline-flex;align-items:center;gap:5px;margin:0;cursor:pointer;
  padding:5px 10px;border-radius:7px;font-size:10px;font-weight:800;letter-spacing:.4px;
  color:#8fb4cc;text-transform:uppercase;user-select:none
}
.dash-basemap label:has(input:checked){
  color:#b8ecff;background:rgba(57,214,255,.16);
  box-shadow:0 0 10px rgba(57,214,255,.22);border:1px solid rgba(57,214,255,.35)
}
.dash-basemap input{accent-color:#39d6ff;margin:0}

.map-filter-hint{display:block;margin-top:6px;color:#6f89a1;font-size:10px;line-height:1.45}
.map-admin-opacity-row{margin-top:8px;padding:8px 10px;border:1px solid #5a4a22;border-radius:8px;background:rgba(40,30,12,.28)}
.map-opacity-label{display:flex;flex-direction:column;gap:6px;color:#e8d5a3;font-size:11px;font-weight:700}
.map-opacity-controls{display:flex;align-items:center;gap:10px}
.map-opacity-controls input[type="range"]{flex:1;accent-color:#e6c35c;cursor:pointer}
#mapAdminOpacityVal{min-width:36px;color:#f5f0e0;font-weight:800;font-size:11px}
.map-hub-toolbar{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.map-hub-toolbar .btn-sm{margin-left:0;padding:8px 12px;font-size:11px}
.map-hub-legend{margin-top:4px;gap:12px;align-items:center}
.map-hub-legend-note{color:#a89060;font-size:10px;font-weight:600;max-width:280px;line-height:1.35}

/* ===== Peta Interaktif — High-Tech Command Center (HUD) ===== */
#page-peta.active{display:flex;flex-direction:column;min-height:calc(100vh - 170px)}
.cc-root{
  display:flex;flex-direction:column;gap:10px;flex:1;min-height:0;
  --cc-cyan:#39d6ff; --cc-cyan-dim:rgba(57,214,255,.18); --cc-cyan-glow:rgba(57,214,255,.45);
  --cc-blue:#1a8cff; --cc-glass:rgba(4,14,28,.72); --cc-line:rgba(57,214,255,.28);
}
.cc-kpi-strip{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:8px}
.cc-kpi{
  padding:11px 13px 10px;border-radius:12px;
  border:1px solid var(--cc-line);
  background:
    linear-gradient(135deg,rgba(12,40,68,.9),rgba(4,14,28,.88)),
    radial-gradient(circle at 100% 0,rgba(57,214,255,.12),transparent 55%);
  box-shadow:0 0 0 1px rgba(57,214,255,.06),0 10px 28px rgba(0,0,0,.35),inset 0 1px 0 rgba(120,220,255,.12);
  position:relative;overflow:hidden
}
.cc-kpi:before{
  content:"";position:absolute;left:0;top:8px;bottom:8px;width:3px;border-radius:0 3px 3px 0;
  background:linear-gradient(180deg,var(--cc-cyan),var(--cc-blue));
  box-shadow:0 0 10px var(--cc-cyan-glow)
}
.cc-kpi:after{
  content:"";position:absolute;right:-20px;top:-24px;width:80px;height:80px;border-radius:50%;
  background:radial-gradient(circle,rgba(57,214,255,.16),transparent 70%);pointer-events:none
}
.cc-kpi span{
  display:block;color:#7eb8d8;font-size:10px;font-weight:800;letter-spacing:1.2px;
  text-transform:uppercase;padding-left:8px
}
.cc-kpi strong{
  display:block;font-size:24px;margin:5px 0 2px;padding-left:8px;
  color:#e8f7ff;font-variant-numeric:tabular-nums;
  text-shadow:0 0 18px rgba(57,214,255,.35)
}
.cc-kpi small{color:#5f8fad;font-size:10px;padding-left:8px}
.cc-kpi.fire strong{color:#ff8f9a;text-shadow:0 0 14px rgba(255,80,100,.35)}
.cc-kpi.fire:before{background:linear-gradient(180deg,#ff6b7a,#c62839)}
.cc-kpi.water strong{color:#6fd4ff;text-shadow:0 0 14px rgba(57,214,255,.45)}
.cc-kpi.disaster strong{color:#ffd56a;text-shadow:0 0 14px rgba(255,200,60,.3)}
.cc-kpi.disaster:before{background:linear-gradient(180deg,#ffd56a,#c9961a)}
.cc-kpi.health strong{color:#5ee0b0;text-shadow:0 0 14px rgba(50,220,160,.3)}
.cc-kpi.health:before{background:linear-gradient(180deg,#5ee0b0,#1a9a6a)}
.cc-kpi.admin strong{color:#e6c35c;text-shadow:0 0 14px rgba(230,195,92,.28)}
.cc-kpi.admin:before{background:linear-gradient(180deg,#e6c35c,#9a7420)}
.cc-kpi.hutan strong{color:#7dcea0;text-shadow:0 0 14px rgba(125,206,160,.28)}
.cc-kpi.hutan:before{background:linear-gradient(180deg,#66bb6a,#1b5e20)}
.cc-kpi.rtrw strong{color:#ce93d8;text-shadow:0 0 14px rgba(206,147,216,.28)}
.cc-kpi.rtrw:before{background:linear-gradient(180deg,#ba68c8,#6a1b9a)}
.qc-actions-official{display:flex;flex-wrap:wrap;gap:8px}

.cc-stage{
  position:relative;flex:1;min-height:540px;border-radius:14px;overflow:hidden;
  border:1px solid var(--cc-line);
  background:
    radial-gradient(ellipse at 50% 0,rgba(20,80,140,.25),transparent 55%),
    #040c18;
  box-shadow:
    0 0 0 1px rgba(57,214,255,.08),
    0 18px 48px rgba(0,0,0,.4),
    inset 0 0 60px rgba(10,40,70,.35)
}
.cc-stage:before{
  content:"";pointer-events:none;position:absolute;inset:0;z-index:400;
  background:
    linear-gradient(90deg,rgba(57,214,255,.07),transparent 18%,transparent 82%,rgba(57,214,255,.07)),
    linear-gradient(180deg,rgba(57,214,255,.05),transparent 12%,transparent 88%,rgba(57,214,255,.06));
  border-radius:14px
}
.cc-map,.map.cc-map{height:100%!important;min-height:540px;border-radius:0;background:#040c18}
.cc-map .leaflet-control-zoom{margin-top:12px;margin-left:12px;border:1px solid rgba(57,214,255,.35)!important;box-shadow:0 0 12px rgba(57,214,255,.2)}
.cc-map .leaflet-control-zoom a{
  background:rgba(6,18,32,.9)!important;color:#8fdfff!important;
  border-bottom-color:rgba(57,214,255,.25)!important;width:30px;height:30px;line-height:30px
}
.cc-map .leaflet-control-zoom a:hover{background:rgba(20,60,95,.95)!important;color:#fff!important}
.cc-map .skynet-kayong-zoom,
.map .skynet-kayong-zoom{
  margin-left:12px;margin-top:6px;
  border:1px solid rgba(57,214,255,.35)!important;
  box-shadow:0 0 12px rgba(57,214,255,.2);
  overflow:hidden;border-radius:4px
}
.cc-map .skynet-kayong-zoom a,
.map .skynet-kayong-zoom a{
  background:rgba(6,18,32,.92)!important;color:#8fdfff!important;
  width:30px;height:30px;line-height:30px;display:block;text-align:center;
  font-size:10px;font-weight:900;letter-spacing:.3px;text-decoration:none
}
.cc-map .skynet-kayong-zoom a:hover,
.map .skynet-kayong-zoom a:hover{background:rgba(20,60,95,.95)!important;color:#fff!important}


/* Floating glass HUD panel — kanan */
#page-peta .cc-panel.map-filter-panel{
  position:absolute;top:12px;right:12px;bottom:12px;z-index:850;
  width:min(328px,42vw);margin:0;padding:0;display:flex;flex-direction:column;
  border-radius:14px;
  border:1px solid rgba(57,214,255,.32);
  background:linear-gradient(160deg,rgba(8,24,42,.82),rgba(4,12,24,.78));
  backdrop-filter:blur(16px) saturate(1.35);
  -webkit-backdrop-filter:blur(16px) saturate(1.35);
  box-shadow:
    0 0 0 1px rgba(57,214,255,.08),
    0 20px 50px rgba(0,0,0,.5),
    inset 0 1px 0 rgba(140,230,255,.14),
    0 0 28px rgba(30,120,200,.12);
  overflow:hidden;transition:width .22s ease,opacity .2s ease
}
#page-peta .cc-panel.collapsed{width:48px}
#page-peta .cc-panel.collapsed .cc-panel-body,
#page-peta .cc-panel.collapsed .cc-panel-head small,
#page-peta .cc-panel.collapsed .cc-panel-head > div b{display:none}
#page-peta .cc-panel.collapsed .cc-panel-head{justify-content:center;padding:10px 6px}
.cc-panel-head{
  display:flex;justify-content:space-between;align-items:flex-start;gap:8px;
  padding:12px 12px 10px;
  border-bottom:1px solid rgba(57,214,255,.18);
  background:linear-gradient(180deg,rgba(57,214,255,.08),transparent);
  flex:0 0 auto
}
.cc-panel-head b{
  display:block;font-size:12px;color:#b8ecff;letter-spacing:1.4px;text-transform:uppercase;
  text-shadow:0 0 12px rgba(57,214,255,.35)
}
.cc-panel-head small{display:block;margin-top:3px;color:#6a9bb8;font-size:10px}
#ccPanelToggle{
  margin-left:0;min-width:32px;padding:6px 8px;
  border-color:rgba(57,214,255,.4)!important;color:#9fe7ff!important;
  background:rgba(12,40,68,.8)!important
}
#ccPanelToggle:hover{box-shadow:0 0 12px rgba(57,214,255,.35)}
.cc-panel-body{flex:1;min-height:0;overflow:auto;padding:8px 12px 14px;scrollbar-width:thin}
.cc-panel-body::-webkit-scrollbar{width:5px}
.cc-panel-body::-webkit-scrollbar-thumb{background:rgba(57,214,255,.35);border-radius:6px}

.cc-section{
  margin-top:8px;border:1px solid rgba(57,214,255,.16);border-radius:10px;
  background:rgba(6,20,36,.55);padding:0 10px 8px
}
.cc-section > summary.map-filter-label{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  cursor:pointer;list-style:none;padding:9px 0 6px;margin:0;user-select:none;
  color:#8fdfff;font-size:10px;font-weight:800;letter-spacing:.8px;text-transform:uppercase
}
.cc-section > summary::-webkit-details-marker{display:none}
.cc-section > summary::after{content:"▾";color:#39d6ff;font-size:11px;text-shadow:0 0 8px rgba(57,214,255,.5)}
.cc-section:not([open]) > summary::after{content:"▸"}
.cc-section .checks{display:flex;flex-direction:column;gap:5px;margin-top:2px}
.cc-section .checks label{
  font-size:12px;color:#c6d7e6;background:rgba(8,28,48,.75);
  border:1px solid rgba(57,214,255,.2);padding:7px 9px;border-radius:8px;
  width:100%;box-sizing:border-box
}
.cc-section .checks label:hover{border-color:rgba(57,214,255,.45);box-shadow:0 0 10px rgba(57,214,255,.15)}
.cc-section .checks input[type="checkbox"],
.cc-section .checks input[type="radio"]{accent-color:#39d6ff}
.cc-section .map-hub-legend{margin-top:8px;flex-direction:column;align-items:flex-start;gap:6px}
.cc-section .map-hub-legend-note{max-width:100%;color:#7aa8c4}
.cc-section .map-hub-toolbar{flex-direction:column;align-items:stretch}
.cc-section .map-hub-toolbar .btn-sm{
  width:100%;text-align:center;
  border-color:rgba(57,214,255,.35)!important;color:#b8ecff!important;
  background:rgba(10,36,60,.85)!important
}
.cc-section .map-hub-toolbar .btn-sm:hover{box-shadow:0 0 14px rgba(57,214,255,.25)}

.cc-chart-strip{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.cc-chart-card{
  padding:12px 14px;margin:0;border-radius:12px;
  border:1px solid rgba(57,214,255,.22);
  background:
    linear-gradient(145deg,rgba(8,28,48,.95),rgba(4,14,28,.92)),
    radial-gradient(circle at 0 0,rgba(57,214,255,.08),transparent 50%);
  box-shadow:0 0 0 1px rgba(57,214,255,.05),0 12px 28px rgba(0,0,0,.28),inset 0 1px 0 rgba(120,220,255,.1)
}
.cc-chart-card h3{
  margin:0 0 6px;font-size:11px;color:#8fdfff;letter-spacing:1px;text-transform:uppercase;font-weight:800
}
.cc-bars{height:120px;padding:8px 2px 2px}
.cc-bars .bar{
  max-width:26px;
  background:linear-gradient(180deg,#6fe8ff,#1280c8)!important;
  box-shadow:0 0 10px rgba(57,214,255,.35)
}
.cc-bars .bar-col b{color:#d8f4ff;font-size:10px}
.cc-bars .bar-col small{font-size:8px;max-width:100%;overflow:hidden;text-overflow:ellipsis;color:#6a9bb8}

@media(max-width:1200px){
  .cc-kpi-strip{grid-template-columns:repeat(4,minmax(0,1fr))}
  #page-peta .cc-panel.map-filter-panel{width:min(300px,48vw)}
}
@media(max-width:900px){
  .cc-chart-strip{grid-template-columns:1fr}
  .cc-kpi-strip{grid-template-columns:repeat(2,minmax(0,1fr))}
  #page-peta .cc-panel.map-filter-panel{
    position:relative;top:auto;right:auto;bottom:auto;width:100%;
    max-height:280px;margin:0
  }
  .cc-stage{display:flex;flex-direction:column;min-height:0}
  .cc-map,.map.cc-map{min-height:380px;height:380px!important;order:1}
  #page-peta .cc-panel.map-filter-panel{order:2;border-radius:0 0 14px 14px}
  .cc-stage:before{display:none}
}
@media(max-width:760px){
  .cc-kpi-strip{grid-template-columns:1fr 1fr}
  .cc-kpi strong{font-size:18px}
}


/* ---- V12 Satellite hotspots + Wind HUD ---- */
.sat-hotspot-panel{border-color:#3a6a2a;box-shadow:0 0 0 1px rgba(80,200,120,.12),0 14px 38px rgba(0,0,0,.22)}
.sat-badge{background:#14361f;color:#6dffb0;border-color:#2f7a4a}
.sat-hotspot-controls{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;margin-bottom:12px}
.period-pills{display:inline-flex;border:1px solid #1e4a66;border-radius:999px;overflow:hidden;background:#071a28}
.period-pill{border:0;background:transparent;color:#8fb4cc;padding:8px 16px;font-weight:800;font-size:12px;cursor:pointer}
.period-pill:hover{color:#fff;background:rgba(57,214,255,.08)}
.period-pill.active{background:linear-gradient(135deg,#1198ef,#0b67bb);color:#fff}
.sat-hotspot-actions{display:flex;gap:8px;flex-wrap:wrap}
.sat-kpi-row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:10px}
.sat-kpi{padding:10px 12px;border-radius:10px;border:1px solid #1c3a57;background:rgba(7,22,37,.85)}
.sat-kpi span{display:block;color:#7f9bb4;font-size:10px;font-weight:700;letter-spacing:.4px;text-transform:uppercase}
.sat-kpi strong{display:block;margin-top:4px;font-size:16px;color:#e8f1fb}
.sat-status{min-height:18px;font-size:11px;color:#8eb4ce;margin-bottom:8px}
.sat-status.err{color:#ff9eac}
.sat-status.ok{color:#6dffb0}
.sat-brin-note{margin:12px 0 0;color:#7a96ad;font-size:11px;line-height:1.5}
.sat-brin-note a{color:#3eb7ff}
.dot.sat-viirs{background:linear-gradient(135deg,#ff7a18,#ff2d2d);border-radius:2px;transform:rotate(45deg)}
.dot.wind-dot{background:#39d6ff;clip-path:polygon(50% 0,100% 100%,0 100%)}

.env-hud-row{display:grid;grid-template-columns:1fr;gap:12px;margin-bottom:13px}
.cc-env-hud{grid-template-columns:1.2fr 1fr}
.wind-hud,.sat-hud{margin-bottom:0;padding:12px 14px;border:1px solid #1e4a66;background:linear-gradient(145deg,rgba(8,28,48,.97),rgba(5,16,28,.97))}
.wind-hud-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin-bottom:8px}
.wind-hud-head b{font-size:13px;color:#dceaf7}
.wind-hud-head small{display:block;color:#6f89a1;font-size:10px;margin-top:2px}
.wind-hud-body{display:flex;flex-direction:column;gap:8px}
.wind-hud-body-compact{flex-direction:row;align-items:center}
.wind-compass{display:flex;gap:14px;align-items:center}
.wind-compass-dial{width:64px;height:64px;border-radius:50%;border:2px solid rgba(57,214,255,.35);background:radial-gradient(circle at 40% 35%,#123a58,#071726);display:flex;align-items:center;justify-content:center;box-shadow:inset 0 0 18px rgba(57,214,255,.15)}
.wind-arrow{font-size:26px;color:#39d6ff;transform-origin:50% 50%;transition:transform .45s ease;text-shadow:0 0 10px rgba(57,214,255,.55);line-height:1}
.wind-compass-meta{display:flex;flex-direction:column;gap:3px;min-width:0}
.wind-compass-meta strong{font-size:14px;color:#e8f1fb}
.wind-compass-meta span{font-size:18px;font-weight:800;color:#6dffb0}
.wind-compass-meta small{color:#7f9bb4;font-size:10px}
.wind-hud-note{font-size:10px;color:#7a96ad;line-height:1.45;padding-top:4px;border-top:1px solid rgba(30,74,102,.7)}
.sat-hud-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.sat-hud-kpis div{padding:8px;border-radius:8px;background:#0a1b2d;border:1px solid #19364f}
.sat-hud-kpis span{display:block;font-size:9px;color:#7f9bb4;text-transform:uppercase;font-weight:700}
.sat-hud-kpis strong{font-size:14px;color:#e8f1fb}
.map-sat-hours-label{display:block;margin-top:8px;color:#93abc1;font-size:11px}
.map-sat-hours-label select{margin-top:4px;width:100%;border:1px solid #244663;background:#0b2035;color:#eaf3fb;border-radius:8px;padding:8px 10px}

/* Leaflet sat fire animation (ukuran/warna = FRP + suhu) + wind arrow */
.sat-viirs-icon{background:transparent!important;border:0!important}
.sat-fire{
  --fire-size:18px;
  position:relative;width:var(--fire-size);height:var(--fire-size);
  pointer-events:none;transform:translateZ(0)
}
.sat-fire-glow{
  position:absolute;inset:18% 10% 0;border-radius:50%;
  background:radial-gradient(circle,rgba(255,180,40,.55),transparent 70%);
  animation:satFireGlow 1.1s ease-in-out infinite alternate;
  filter:blur(1px)
}
.sat-fire-core{
  position:absolute;left:50%;bottom:8%;width:28%;height:28%;
  transform:translateX(-50%);border-radius:50%;
  background:radial-gradient(circle,#fff8d0 0%,#ffe066 40%,#ff7a18 100%);
  box-shadow:0 0 6px rgba(255,220,120,.9);z-index:3
}
.sat-fire-flame{
  position:absolute;left:50%;bottom:12%;width:42%;height:78%;
  transform-origin:50% 100%;border-radius:50% 50% 20% 20%;
  background:linear-gradient(180deg,#ffe9a0 0%,#ffb347 28%,#ff5a1f 70%,#c01800 100%);
  animation:satFireFlicker 0.55s ease-in-out infinite alternate;z-index:2;opacity:.95
}
.sat-fire-flame.f1{transform:translateX(-50%) scaleX(1);animation-delay:0s}
.sat-fire-flame.f2{width:30%;height:62%;left:36%;background:linear-gradient(180deg,#fff3c4,#ff8a2a 55%,#e03400);animation-duration:.48s;animation-delay:.08s;opacity:.85;z-index:1}
.sat-fire-flame.f3{width:28%;height:58%;left:64%;background:linear-gradient(180deg,#ffe08a,#ff6a1a 60%,#b01000);animation-duration:.62s;animation-delay:.14s;opacity:.8;z-index:1}

.sat-fire-low .sat-fire-flame{filter:saturate(.85) brightness(1.05)}
.sat-fire-low .sat-fire-glow{opacity:.7}
.sat-fire-mid .sat-fire-flame{filter:saturate(1.05)}
.sat-fire-high .sat-fire-flame{
  background:linear-gradient(180deg,#fff6c8 0%,#ff9a2e 25%,#ff3b1a 65%,#8a0000 100%);
  animation-duration:.42s
}
.sat-fire-high .sat-fire-glow{background:radial-gradient(circle,rgba(255,90,20,.7),transparent 72%);animation-duration:.85s}
.sat-fire-extreme .sat-fire-flame{
  background:linear-gradient(180deg,#ffffff 0%,#ffe566 18%,#ff7a00 45%,#ff1e00 75%,#5a0000 100%);
  animation-duration:.36s;filter:saturate(1.25) brightness(1.1)
}
.sat-fire-extreme .sat-fire-core{width:34%;height:34%;box-shadow:0 0 10px #fff,0 0 16px rgba(255,200,80,.95)}
.sat-fire-extreme .sat-fire-glow{
  inset:5% -5% -10%;opacity:1;
  background:radial-gradient(circle,rgba(255,120,20,.85),rgba(255,40,0,.25),transparent 70%);
  animation-duration:.7s
}

.sat-fire-flame.f1{margin-left:0}
@keyframes satFireFlicker{
  from{transform:translateX(-50%) scaleY(0.92) rotate(-3deg);opacity:.88}
  to{transform:translateX(-50%) scaleY(1.14) rotate(4deg);opacity:1}
}
@keyframes satFireFlickerSide{
  from{transform:translateX(-50%) scaleY(0.9) rotate(-6deg);opacity:.75}
  to{transform:translateX(-50%) scaleY(1.1) rotate(5deg);opacity:.95}
}
.sat-fire-flame.f2,.sat-fire-flame.f3{animation-name:satFireFlickerSide}
@keyframes satFireGlow{
  from{opacity:.55;transform:scale(.92)}
  to{opacity:1;transform:scale(1.12)}
}

/* Legend hint chips (optional reuse) */
.sat-fire-legend{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:6px;font-size:10px;color:#9db4c9}
.sat-fire-legend i{display:inline-block;width:10px;height:12px;margin-right:4px;border-radius:40% 40% 20% 20%;vertical-align:middle;
  background:linear-gradient(180deg,#ffe08a,#ff5a1f)}
.sat-fire-legend .lg-low i{transform:scale(.75);filter:saturate(.8)}
.sat-fire-legend .lg-mid i{transform:scale(.95)}
.sat-fire-legend .lg-high i{transform:scale(1.15);background:linear-gradient(180deg,#fff6c8,#ff3b1a)}
.sat-fire-legend .lg-x i{transform:scale(1.35);background:linear-gradient(180deg,#fff,#ff7a00 40%,#ff1e00)}

.wind-arrow-icon{background:transparent!important;border:0!important}
.wind-arrow-primary{filter:drop-shadow(0 0 10px rgba(90,230,255,.95));animation:windPulse 2.8s ease-in-out infinite}
.wind-arrow-field{filter:drop-shadow(0 0 5px rgba(57,214,255,.55));opacity:.93}
@keyframes windPulse{0%,100%{filter:drop-shadow(0 0 8px rgba(90,230,255,.75))}50%{filter:drop-shadow(0 0 14px rgba(120,240,255,1))}}
.leaflet-windPane{z-index:650}
.wind-arrow-marker{width:44px;height:44px;display:flex;align-items:center;justify-content:center;pointer-events:auto;transform-origin:50% 50%;filter:drop-shadow(0 0 6px rgba(57,214,255,.75))}
.wind-arrow-marker span{display:block;font-size:22px;color:#39d6ff;text-shadow:0 0 6px #000,0 0 10px rgba(57,214,255,.8);transform-origin:50% 50%;line-height:1}

@media(max-width:1200px){
  .sat-kpi-row,.cc-env-hud{grid-template-columns:1fr}
}


/* Confidence badge on fire marker + pills */
.sat-conf-badge{
  --badge:12px;
  position:absolute;right:-2px;top:-2px;z-index:5;
  width:var(--badge);height:var(--badge);border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:calc(var(--badge) * 0.55);font-weight:900;line-height:1;
  color:#06111f;border:1.5px solid rgba(255,255,255,.85);
  box-shadow:0 0 6px rgba(0,0,0,.55);pointer-events:none
}
.sat-conf-badge-high{background:#42dfa5;color:#042218}
.sat-conf-badge-nominal{background:#ffbf24;color:#2a1c00}
.sat-conf-badge-low{background:#ff6b7a;color:#2a060c}
.sat-conf-badge-unknown{background:#7f9bb4;color:#06111f}
.sat-conf-pill{
  display:inline-flex;align-items:center;gap:4px;
  padding:2px 8px;border-radius:999px;font-size:10px;font-weight:800;
  border:1px solid transparent
}
.sat-conf-pill-high{background:rgba(66,223,165,.16);border-color:rgba(66,223,165,.45);color:#8dffd0}
.sat-conf-pill-nominal{background:rgba(255,191,36,.14);border-color:rgba(255,191,36,.4);color:#ffd56a}
.sat-conf-pill-low{background:rgba(255,107,122,.14);border-color:rgba(255,107,122,.4);color:#ff9eac}
.sat-conf-pill-unknown{background:rgba(127,155,180,.14);border-color:rgba(127,155,180,.35);color:#a9c0d4}
.sat-conf-low .sat-fire{opacity:.78;filter:grayscale(.15)}
.sat-conf-high .sat-fire-glow{opacity:1}

.wave-hud{border-color:#1a5a6e}
.wave-arrow{color:#4ad6c8!important;text-shadow:0 0 10px rgba(74,214,200,.55)}
.wave-compass-dial{box-shadow:inset 0 0 0 1px rgba(74,214,200,.25)}
.wave-dot{background:linear-gradient(135deg,#2ec4b6,#1a8f9e)}
.wave-arrow-icon{background:transparent!important;border:0!important}
.wave-arrow-marker{display:flex;align-items:center;justify-content:center;pointer-events:auto;filter:drop-shadow(0 0 6px rgba(46,196,182,.7))}
.wave-arrow-primary{filter:drop-shadow(0 0 10px rgba(90,230,210,.95));animation:wavePulse 2.8s ease-in-out infinite}
.wave-arrow-field{opacity:.92;filter:drop-shadow(0 0 5px rgba(46,196,182,.5))}
@keyframes wavePulse{0%,100%{filter:drop-shadow(0 0 8px rgba(74,214,200,.7))}50%{filter:drop-shadow(0 0 14px rgba(120,255,230,1))}}
.cc-env-hud{grid-template-columns:1fr 1fr 1fr}
@media(max-width:1100px){.cc-env-hud{grid-template-columns:1fr}}
.env-hud-row{grid-template-columns:1fr 1fr}

.cc-kpi.infra strong{color:#90caf9;text-shadow:0 0 14px rgba(144,202,249,.28)}
.cc-kpi.infra:before{background:linear-gradient(180deg,#64b5f6,#1565c0)}
.map-infra-group{margin:8px 0 10px;padding:8px 10px;border:1px solid #1e3f58;border-radius:10px;background:rgba(8,24,40,.55)}
.map-infra-group-title{font-size:11px;font-weight:800;letter-spacing:.4px;color:#7eb6d8;margin-bottom:6px}
.qc-role-pick{display:flex;flex-direction:column;gap:6px;color:#9ab0c6;font-size:11px;min-width:220px}
.qc-role-pick select{margin-top:0;border:1px solid #244663;background:#0b2035;color:#eaf3fb;border-radius:8px;padding:10px 11px}
.layer-promote-wrap select{max-width:180px;font-size:10px;padding:6px 8px;border-radius:7px;border:1px solid #285879;background:#12283e;color:#dceaf7}

.nav-group{display:flex;flex-direction:column;gap:4px;margin:2px 0}
.nav-group-toggle{border:1px solid #1b5785;background:linear-gradient(90deg,#0d2f4d,#0a2238);color:#d7ecff;border-radius:10px;padding:11px 12px;text-align:left;cursor:pointer;font-weight:800;display:flex;align-items:center;gap:6px;width:100%}
.nav-group-toggle span{flex:1;margin-left:4px}
.nav-group-caret{opacity:.75;font-style:normal;font-size:11px;transition:transform .2s ease}
.nav-group.open .nav-group-caret{transform:rotate(0deg)}
.nav-group:not(.open) .nav-group-caret{transform:rotate(-90deg)}
.nav-group-items{display:none;flex-direction:column;gap:3px;padding:2px 0 4px 8px;border-left:2px solid rgba(57,169,255,.35);margin:0 0 2px 10px}
.nav-group.open .nav-group-items{display:flex}
.nav-btn-sub{padding:9px 11px;font-size:13px;font-weight:600}
.nav-group.has-active .nav-group-toggle{border-color:#39a9ff;box-shadow:inset 3px 0 #39a9ff}
.nav-group.is-empty{display:none}
@media(max-width:760px){
  .nav-group-toggle span,.nav-group-caret{display:none}
  .nav-group-items{margin-left:0;padding-left:0;border-left:0}
}

.sector-body{margin-top:8px}
.sector-slots{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px}
.sector-card{border:1px solid #1e4a66;border-radius:12px;padding:14px;background:rgba(7,24,40,.9)}
.sector-card h3{margin:0 0 6px;font-size:14px}
.sector-card p{margin:0;color:#8ea7bf;font-size:12px;line-height:1.45}
.sector-card .sector-meta{margin-top:10px;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.sector-card .ok{color:#42dfa5;font-weight:800;font-size:11px}
.sector-card .wait{color:#ffbf24;font-weight:800;font-size:11px}
.sector-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}

.sidebar nav{scrollbar-gutter:stable}
.nav-group.is-empty{display:none}

.harga-kpi-row{margin-bottom:14px}


/* Fire draw — interaktif di layar peta */
.fire-draw-toolbar{
  position:absolute; z-index:1100; left:12px; top:12px;
  display:flex; flex-wrap:wrap; gap:6px; align-items:center;
  max-width:min(720px, calc(100% - 24px));
  padding:8px 10px; border-radius:12px;
  background:rgba(8,22,38,.94); border:1px solid #2a5f86;
  box-shadow:0 8px 24px rgba(0,0,0,.4);
  pointer-events:auto;
}
.fire-draw-banner{
  position:absolute; z-index:1101; left:50%; top:12px; transform:translateX(-50%);
  padding:8px 14px; border-radius:999px; font-size:12px; font-weight:700;
  background:#9a3412; color:#fff7ed; border:1px solid #fb923c;
  box-shadow:0 6px 18px rgba(0,0,0,.35); pointer-events:none; white-space:nowrap;
}
.fire-draw-btn{
  border:1px solid #2f6ea0; background:#123552; color:#e8f4ff;
  border-radius:9px; padding:8px 12px; font-weight:700; cursor:pointer; font-size:12px;
}
.fire-draw-btn:hover{ border-color:#39a9ff; }
.fire-draw-btn.is-active{ background:#9a3412; border-color:#fb923c; color:#fff7ed; }
.fire-draw-btn.fire-draw-accent{ background:#14532d; border-color:#22c55e; }
.fire-draw-btn.fire-draw-muted{ background:#3f1d1d; border-color:#b91c1c; }
.fire-draw-hint{ color:#9ec0dc; font-size:11px; padding:0 4px; }
.fire-form-tools{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-top:4px; }
.fire-poly-info{ display:block; width:100%; color:#8ea7bf; font-size:12px; }
.cc-stage, .cc-map-wrap, .map-shell{ position:relative; }
.fire-draw-crosshair, .fire-draw-crosshair .leaflet-container{ cursor:crosshair !important; }
.fire-leaflet-ctrl a{
  font-size:16px; line-height:26px; width:30px; height:30px; display:block; text-align:center;
  background:#0f2740; color:#fff; text-decoration:none;
}
.fire-leaflet-ctrl a.is-active{ background:#9a3412; }
.fire-draft-pin{
  width:36px; height:36px; display:flex; align-items:center; justify-content:center;
  font-size:22px; filter:drop-shadow(0 2px 4px rgba(0,0,0,.55));
  animation:firePulse 1.2s ease-in-out infinite;
}
@keyframes firePulse{ 0%,100%{ transform:scale(1);} 50%{ transform:scale(1.12);} }
.fire-pop{ min-width:210px; color:#0b1c2c; }
.fire-pop b{ display:block; margin-bottom:8px; font-size:14px; }
.fire-pop label{ display:block; font-size:11px; margin:6px 0; color:#334155; }
.fire-pop input, .fire-pop select{
  width:100%; margin-top:3px; padding:7px 8px; border:1px solid #94a3b8; border-radius:7px; box-sizing:border-box;
}
.fire-pop-coords{ font-size:10px; color:#64748b; margin:6px 0 8px; line-height:1.35; }
.fire-pop-actions{ display:flex; gap:6px; }
.fire-pop-save{
  flex:1; border:0; border-radius:8px; padding:8px; font-weight:800; cursor:pointer;
  background:#dc2626; color:#fff;
}
.fire-pop-cancel{
  border:1px solid #94a3b8; border-radius:8px; padding:8px 10px; cursor:pointer; background:#f1f5f9;
}
.fire-draw-toast{
  position:fixed; z-index:9999; left:50%; bottom:28px; transform:translateX(-50%) translateY(20px);
  opacity:0; pointer-events:none; transition:.25s ease;
  padding:10px 16px; border-radius:10px; font-weight:700; font-size:13px;
  background:#0f2740; color:#e8f4ff; border:1px solid #2a5f86;
  box-shadow:0 10px 30px rgba(0,0,0,.35);
}
.fire-draw-toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }
.fire-draw-toast.is-ok{ border-color:#22c55e; }
.fire-draw-toast.is-err{ border-color:#ef4444; background:#3f1d1d; }


.fire-draw-toolbar{
  position:absolute !important; z-index:1100 !important; left:12px !important; top:12px !important; bottom:auto !important;
  display:flex; flex-wrap:wrap; gap:6px; align-items:center;
  max-width:min(720px, calc(100% - 24px));
  padding:8px 10px; border-radius:12px;
  background:rgba(8,22,38,.94); border:1px solid #2a5f86;
  box-shadow:0 8px 24px rgba(0,0,0,.4); pointer-events:auto;
}
.fire-draw-banner{
  position:absolute; z-index:1101; left:50%; top:12px; transform:translateX(-50%);
  padding:8px 14px; border-radius:999px; font-size:12px; font-weight:700;
  background:#9a3412; color:#fff7ed; border:1px solid #fb923c;
  box-shadow:0 6px 18px rgba(0,0,0,.35); pointer-events:none; white-space:nowrap;
}
.fire-draw-btn.is-active{ background:#9a3412 !important; border-color:#fb923c !important; color:#fff7ed !important; }
.fire-leaflet-ctrl a{ font-size:16px; line-height:26px; width:30px; height:30px; display:block; text-align:center; background:#0f2740; color:#fff; text-decoration:none; }
.fire-leaflet-ctrl a.is-active{ background:#9a3412; }
.fire-draft-pin{ width:36px; height:36px; display:flex; align-items:center; justify-content:center; font-size:22px; filter:drop-shadow(0 2px 4px rgba(0,0,0,.55)); animation:firePulse 1.2s ease-in-out infinite; }
@keyframes firePulse{ 0%,100%{ transform:scale(1);} 50%{ transform:scale(1.12);} }
.fire-pop{ min-width:210px; color:#0b1c2c; }
.fire-pop b{ display:block; margin-bottom:8px; font-size:14px; }
.fire-pop label{ display:block; font-size:11px; margin:6px 0; color:#334155; }
.fire-pop input, .fire-pop select{ width:100%; margin-top:3px; padding:7px 8px; border:1px solid #94a3b8; border-radius:7px; box-sizing:border-box; }
.fire-pop-coords{ font-size:10px; color:#64748b; margin:6px 0 8px; line-height:1.35; }
.fire-pop-actions{ display:flex; gap:6px; }
.fire-pop-save{ flex:1; border:0; border-radius:8px; padding:8px; font-weight:800; cursor:pointer; background:#dc2626; color:#fff; }
.fire-pop-cancel{ border:1px solid #94a3b8; border-radius:8px; padding:8px 10px; cursor:pointer; background:#f1f5f9; }
.fire-draw-toast{ position:fixed; z-index:9999; left:50%; bottom:28px; transform:translateX(-50%) translateY(20px); opacity:0; pointer-events:none; transition:.25s ease; padding:10px 16px; border-radius:10px; font-weight:700; font-size:13px; background:#0f2740; color:#e8f4ff; border:1px solid #2a5f86; box-shadow:0 10px 30px rgba(0,0,0,.35); }
.fire-draw-toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }
.fire-draw-toast.is-ok{ border-color:#22c55e; }
.fire-draw-toast.is-err{ border-color:#ef4444; background:#3f1d1d; }
.fire-draw-crosshair, .fire-draw-crosshair.leaflet-container{ cursor:crosshair !important; }


.fire-draw-toolbar{ z-index:2500 !important; top:12px !important; bottom:auto !important; left:12px !important; pointer-events:auto !important; }
.fire-draw-banner{ z-index:2501 !important; }
.fire-leaflet-ctrl{ z-index:2500 !important; }
.fire-draft-pin{ font-size:22px; filter:drop-shadow(0 2px 4px rgba(0,0,0,.6)); }
.fire-pop{ min-width:210px; color:#0b1c2c; }
.fire-pop b{ display:block; margin-bottom:8px; }
.fire-pop label{ display:block; font-size:11px; margin:6px 0; }
.fire-pop input,.fire-pop select{ width:100%; margin-top:3px; padding:7px 8px; border:1px solid #94a3b8; border-radius:7px; box-sizing:border-box; }
.fire-pop-coords{ font-size:10px; color:#64748b; margin:6px 0 8px; }
.fire-pop-actions{ display:flex; gap:6px; }
.fire-pop-save{ flex:1; border:0; border-radius:8px; padding:8px; font-weight:800; cursor:pointer; background:#dc2626; color:#fff; }
.fire-pop-cancel{ border:1px solid #94a3b8; border-radius:8px; padding:8px 10px; cursor:pointer; background:#f1f5f9; }


.fire-save-panel{
  position:absolute; z-index:3000; right:14px; top:14px; width:min(300px, calc(100% - 28px));
  background:rgba(8,22,38,.96); border:1px solid #3b82f6; border-radius:14px;
  padding:12px 14px; box-shadow:0 12px 32px rgba(0,0,0,.45); color:#e8f4ff;
  pointer-events:auto;
}
.fire-save-panel[hidden]{ display:none !important; }
.fire-save-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
.fire-save-head b{ font-size:14px; }
.fire-save-x{ border:0; background:transparent; color:#9ec0dc; font-size:20px; cursor:pointer; line-height:1; }
.fire-save-panel label{ display:block; font-size:11px; color:#9ec0dc; margin:8px 0; }
.fire-save-panel input, .fire-save-panel select{
  width:100%; margin-top:4px; padding:8px 10px; border-radius:8px; box-sizing:border-box;
  border:1px solid #2f6ea0; background:#0b2035; color:#eaf3fb;
}
.fire-save-coords{ font-size:11px; color:#7dd3fc; margin:8px 0; line-height:1.4; }
.fire-save-actions{ display:flex; gap:8px; margin-top:10px; }
.fire-save-btn{
  flex:1; border:0; border-radius:9px; padding:10px; font-weight:800; cursor:pointer;
  background:linear-gradient(135deg,#ef4444,#b91c1c); color:#fff;
}
.fire-save-btn:disabled{ opacity:.6; cursor:wait; }
.fire-save-cancel{
  border:1px solid #4b5563; border-radius:9px; padding:10px 12px; cursor:pointer;
  background:#1f2937; color:#e5e7eb;
}
.fire-save-msg{ margin-top:8px; font-size:12px; min-height:1.2em; }
.fire-save-msg.ok{ color:#4ade80; }
.fire-save-msg.err{ color:#f87171; }


/* === fire-draw QC3: jangan nutup zoom Leaflet (kiri atas) === */
.fire-draw-toolbar{
  position:absolute !important;
  left:12px !important;
  right:auto !important;
  top:auto !important;
  bottom:12px !important;
  z-index:900 !important;
  display:flex !important;
  flex-wrap:wrap !important;
  gap:6px !important;
  align-items:center !important;
  width:auto !important;
  max-width:min(420px, calc(100% - 80px)) !important;
  padding:8px 10px !important;
  border-radius:12px !important;
  background:rgba(8,22,38,.94) !important;
  border:1px solid #2a5f86 !important;
  box-shadow:0 8px 24px rgba(0,0,0,.35) !important;
  pointer-events:auto !important;
}
.fire-draw-banner{
  top:auto !important;
  bottom:58px !important;
  left:12px !important;
  transform:none !important;
  z-index:901 !important;
  max-width:min(420px, calc(100% - 80px)) !important;
}
.fire-leaflet-ctrl{
  /* sembunyikan duplikat control di topleft — pakai toolbar HTML saja */
  display:none !important;
}
.fire-save-panel{
  z-index:920 !important;
  top:12px !important;
  right:12px !important;
  bottom:auto !important;
  max-height:calc(100% - 24px);
  overflow:auto;
}
/* pastikan zoom Leaflet tetap bisa diklik */
.cc-map .leaflet-control-zoom,
.cc-map .skynet-kayong-zoom{
  z-index:1000 !important;
  margin-top:12px !important;
  margin-left:12px !important;
}


/* === field-fire (hotspot lapangan) — visual only, reuse sat-fire === */
.field-fire-icon,.fire-draft-icon{
  background:transparent!important;border:0!important;
}
.field-fire.sat-fire{ pointer-events:none; transform:translateZ(0); }
.fire-draft-icon .field-fire{
  filter:drop-shadow(0 2px 5px rgba(0,0,0,.55));
}
.fire-draft-icon .sat-fire-glow{
  background:radial-gradient(circle,rgba(255,160,40,.65),transparent 70%);
}