:root{--navy:#071a33;--navy2:#0d2b52;--teal:#10d9c4;--bg:#f4f7fb;--card:#fff;--line:#e3eaf2;--text:#18283d;--muted:#718096;--danger:#d64545;--success:#138b68;--warning:#b77a06}*{box-sizing:border-box}body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial;color:var(--text);background:var(--bg)}button,input,select,textarea{font:inherit}.login{min-height:100vh;display:grid;place-items:center;background:linear-gradient(145deg,var(--navy),#0b315d);padding:24px}.login-card{width:min(440px,100%);background:#fff;border-radius:24px;padding:32px;box-shadow:0 28px 80px #0005}.brand{font-weight:900;letter-spacing:.8px;font-size:24px;color:var(--navy)}.brand span{color:#08a995}.sub{color:var(--muted);margin:4px 0 26px}.field{display:grid;gap:7px;margin-bottom:14px}.field label{font-size:13px;font-weight:700;color:#43556c}.field input,.field select,.field textarea,.search{width:100%;border:1px solid #d6e0ea;border-radius:11px;padding:11px 12px;background:#fff;outline:none}.field input:focus,.field select:focus,.field textarea:focus,.search:focus{border-color:#12aa9a;box-shadow:0 0 0 3px #10d9c422}.btn{border:0;border-radius:10px;padding:10px 14px;font-weight:800;cursor:pointer}.btn-primary{background:var(--navy);color:#fff}.btn-teal{background:var(--teal);color:#052a28}.btn-light{background:#edf3f8;color:#27405e}.btn-danger{background:#fff0f0;color:var(--danger)}.btn:disabled{opacity:.5;cursor:not-allowed}.hint{margin-top:15px;font-size:12px;line-height:1.5;color:var(--muted)}.mode{display:inline-flex;padding:5px 9px;border-radius:99px;font-size:11px;font-weight:900;background:#e8fff9;color:#086d60;margin:0 0 18px}.shell{min-height:100vh;display:grid;grid-template-columns:245px 1fr}.sidebar{background:var(--navy);padding:24px 16px;color:#fff;position:sticky;top:0;height:100vh;display:flex;flex-direction:column}.sidebar .brand{color:#fff;padding:0 10px 20px}.nav{display:grid;gap:4px}.nav button{background:transparent;color:#c5d4e5;border:0;text-align:left;padding:11px 12px;border-radius:10px;cursor:pointer;font-weight:700}.nav button:hover,.nav button.active{background:#ffffff15;color:#fff}.side-bottom{margin-top:auto}.userbox{background:#ffffff0d;border:1px solid #ffffff12;border-radius:13px;padding:12px;line-height:1.55;font-size:12px}.main{padding:24px 28px 50px;min-width:0}.topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;gap:15px}.title h1{font-size:25px;margin:0}.title p{margin:5px 0 0;color:var(--muted);font-size:12px}.top-actions{display:flex;align-items:center;gap:8px}.role-pill{font-size:12px;background:#dffcf6;color:#08796b;padding:7px 10px;border-radius:99px;font-weight:900}.grid{display:grid;gap:16px}.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}.card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:18px;box-shadow:0 7px 22px #13305408}.metric .label{font-size:12px;color:var(--muted);font-weight:800}.metric .value{font-size:27px;font-weight:900;color:var(--navy);margin:8px 0}.metric .foot{font-size:11px;color:var(--muted)}.metric.accent{border-top:3px solid var(--teal)}.section-title,.toolbar{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px}.section-title h2{margin:0;font-size:17px}.toolbar .left{flex:1}.search{max-width:380px}.table-wrap{overflow:auto}.table{width:100%;border-collapse:collapse;font-size:13px}.table th,.table td{padding:12px 10px;border-bottom:1px solid #edf1f5;text-align:left;vertical-align:middle}.table th{font-size:11px;text-transform:uppercase;letter-spacing:.4px;color:#718096}.badge{display:inline-flex;padding:5px 8px;border-radius:99px;font-size:11px;font-weight:900}.b-green{background:#e6fff5;color:#0d7a5e}.b-blue{background:#eaf2ff;color:#275b9d}.b-yellow{background:#fff6dc;color:#9a6805}.b-red{background:#fff0f0;color:#bc3d3d}.muted{color:var(--muted)}.notice{padding:12px;border-radius:11px;background:#f1f7fb;border:1px solid #dce7f0;font-size:13px;line-height:1.5}.danger-note{background:#fff2f2;border-color:#f4cccc;color:#9e2d2d}.success-note{background:#eafff8;border-color:#beeede;color:#0b735e}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}.span2{grid-column:1/-1}.empty{padding:28px;text-align:center;color:var(--muted)}.calc-box{background:linear-gradient(145deg,var(--navy),var(--navy2));color:#fff;border-radius:16px;padding:20px}.calc-row{display:flex;justify-content:space-between;border-bottom:1px solid #ffffff1d;padding:10px 0}.calc-row:last-child{border:0}.kicker{font-size:11px;text-transform:uppercase;letter-spacing:.7px;font-weight:900;color:#75e9dc}.photo-preview{width:100%;max-height:210px;object-fit:cover;border-radius:12px;border:1px solid var(--line);display:none}.split{display:flex;gap:8px}.split>*{flex:1}.toast{position:fixed;right:20px;bottom:20px;background:#132a46;color:#fff;padding:12px 14px;border-radius:11px;box-shadow:0 12px 30px #0003;z-index:10;font-size:13px}.setup{border-left:4px solid var(--teal)}@media(max-width:1000px){.grid-4{grid-template-columns:1fr 1fr}.shell{grid-template-columns:78px 1fr}.sidebar{padding:18px 10px}.sidebar .brand{font-size:0}.sidebar .brand:after{content:'IN';font-size:20px}.nav button{font-size:0;text-align:center}.nav button span{font-size:20px}.userbox{display:none}}@media(max-width:720px){.shell{display:block}.sidebar{position:fixed;z-index:5;left:0;right:0;bottom:0;top:auto;height:auto;display:block;padding:8px;background:#071a33}.sidebar .brand,.side-bottom{display:none}.nav{display:flex;overflow:auto}.nav button{min-width:64px;padding:10px 7px}.main{padding:18px 14px 90px}.topbar{align-items:flex-start}.top-actions{flex-wrap:wrap;justify-content:flex-end}.grid-4,.grid-3,.grid-2,.form-grid{grid-template-columns:1fr}.span2{grid-column:auto}.title h1{font-size:21px}.card{padding:14px}.table{min-width:720px}}
/* =========================================
   STAR HEAVEN BRANDING
   ========================================= */

.brand{
  display:flex;
  align-items:center;
  letter-spacing:0;
  font-size:initial;
  font-weight:initial;
}

.brand-logo{
  display:block;
  max-width:100%;
  height:auto;
  object-fit:contain;
}

/* Login */
.brand-login{
  justify-content:center;
  margin-bottom:10px;
}

.brand-login .brand-logo{
  width:280px;
  max-width:100%;
}

/* Sidebar */
.sidebar .brand-sidebar{
  display:flex;
  justify-content:flex-start;
  align-items:center;
  padding:0 8px 22px;
}

.sidebar .brand-sidebar .brand-logo{
  width:185px;
  height:auto;
}

/* Hilangkan aturan brand teks lama */
.brand span{
  color:inherit;
}

/* Tablet */
@media(max-width:1000px){

  .sidebar .brand-sidebar{
    padding:0 0 18px;
    justify-content:center;
  }

  .sidebar .brand-sidebar .brand-logo{
    width:54px;
  }

  .sidebar .brand{
    font-size:initial;
  }

  .sidebar .brand:after{
    content:none !important;
    display:none !important;
  }
}

/* Mobile */
@media(max-width:720px){

  .sidebar .brand-sidebar{
    display:none;
  }

  .brand-login .brand-logo{
    width:240px;
  }
}


/* =========================================
   STAGE 5 - PETA SEBARAN CELENGAN
   ========================================= */
.jar-map{
  width:100%;
  height:480px;
  border-radius:14px;
  overflow:hidden;
  border:1px solid var(--line);
  background:#eef3f8;
}
.map-legend{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  align-items:center;
  margin:0 0 12px;
  font-size:12px;
  color:var(--muted);
}
.map-legend span{
  display:inline-flex;
  align-items:center;
  gap:6px;
}
.map-dot{
  width:10px;
  height:10px;
  border-radius:50%;
  display:inline-block;
}
.map-green{background:#1a9b72}
.map-yellow{background:#d4a017}
.map-red{background:#d64545}

@media(max-width:720px){
  .jar-map{height:380px}
}

/* Stage 5C - Lokasi Saya, jarak, navigasi */
.jar-map-actions{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 4px}
.map-location-note{font-size:12px;line-height:1.5;color:var(--muted);margin:8px 0 12px}
.map-blue{background:#2474db}
.map-distance{font-weight:800;color:#1161af;white-space:nowrap}
.map-distance-muted{color:var(--muted)}
.jar-map .leaflet-popup-content a{font-weight:800}
@media(max-width:720px){.jar-map-actions .btn{flex:1 1 145px;white-space:normal}}