* {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    body, html {
      height: 100%;
      width: 100%;
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      font-size: 14px;
      line-height: 1.5;
      overflow: hidden;
    }

    :root {
      --font-size-xs: 11px;
      --font-size-sm: 13px;
      --font-size-md: 14px;
      --font-size-lg: 15px;
      --font-size-xl: 16px;

      /* Light Theme (default) */
      --bg-primary: #ffffff;
      --bg-secondary: #f8fafc;
      --bg-tertiary: #f1f5f9;
      --bg-elevated: #ffffff;
      --bg-glass: rgba(255,255,255,.95);
      --bg-glass-light: rgba(255,255,255,.88);
      --bg-input: #ffffff;
      --bg-card: #ffffff;
      --bg-card-hover: #f0fdf4;
      /* Pita kepala kartu. Token ini tadinya dipakai .gt-card-head tapi
         tidak pernah didefinisikan, jadi propertinya jatuh ke transparan
         dan kartu GeoTools kehilangan warnanya -- dan
         .geotani-analysis-card.active serta .geooss-precheck-oss:hover
         ikut jadi tidak terlihat. */
      --bg-card-active: #f8fafc;

      --text-primary: #1e293b;
      --text-secondary: #475569;
      --text-tertiary: #64748b;
      --text-muted: #94a3b8;
      --text-inverse: #ffffff;

      --border-color: #e2e8f0;
      --border-secondary: #e8eef3;
      --border-focus: #0891b2;

      --accent: #0891b2;
      --accent-green: #16a34a;
      --accent-danger: #dc2626;

      --shadow-card: 0 1px 3px rgba(0,0,0,.08);
      --shadow-sheet: 0 8px 32px rgba(0,0,0,.18);

      --scrollbar-thumb: #c1c7d0;
    }

    [data-theme="dark"] {
      --bg-primary: #0f172a;
      --bg-secondary: #1e293b;
      --bg-tertiary: #334155;
      --bg-elevated: #1e293b;
      --bg-glass: rgba(15,23,42,.92);
      --bg-glass-light: rgba(15,23,42,.88);
      --bg-input: #1e293b;
      --bg-card: #1e293b;
      --bg-card-hover: #253347;
      --bg-card-active: #253347;

      --text-primary: #e2e8f0;
      --text-secondary: #cbd5e1;
      --text-tertiary: #94a3b8;
      --text-muted: #64748b;
      --text-inverse: #0f172a;

      --border-color: #334155;
      --border-secondary: #2d3a4d;
      --border-focus: #22d3ee;

      --accent: #22d3ee;
      --accent-green: #4ade80;
      --accent-danger: #f87171;

      --shadow-card: 0 1px 3px rgba(0,0,0,.3);
      --shadow-sheet: 0 8px 32px rgba(0,0,0,.5);

      --scrollbar-thumb: #475569;
    }

    #app-container {
      display: flex;
      height: 100vh;
      height: 100dvh;
      width: 100vw;
      position: relative;
    }

    .app-loading-overlay {position: fixed;inset: 0;z-index: 5000;display: flex; justify-content: center;align-items: center;background: radial-gradient(circle at 50% 35%,#197db4,#06365f 65%);transition: opacity .45s ease, visibility .45s ease;}
    .app-loading-overlay.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; }
    .app-loading-card { display: grid; justify-items: center; gap: 8px; color: #fff; text-align: center; }
    .app-loading-card strong { font-size: 25px; letter-spacing: .04em; }.app-loading-card strong span { color: #f4c329; }
    .app-loading-card small { color: rgba(255,255,255,.78); font-size: 11px; }
    .app-loading-mark { display: grid; grid-template-columns: repeat(2, 15px); grid-template-rows: repeat(2, 15px); gap: 4px; padding: 7px; border: 1px solid rgba(255,255,255,.5); border-radius: 13px; transform: rotate(-8deg); }
    .app-loading-mark i { border-radius: 4px; background: #fff; }.app-loading-mark i:nth-child(2) { background: #f4c329; }.app-loading-mark i:nth-child(3) { background: #68dce5; }.app-loading-mark i:nth-child(4) { background: #bce7ed; }
    .app-loading-bar { width: 142px; height: 4px; overflow: hidden; border-radius: 99px; background: rgba(255,255,255,.22); }.app-loading-bar i { display: block; width: 45%; height: 100%; border-radius: inherit; background: #f4c329; animation: app-loading-slide 1.1s infinite ease-in-out; } @keyframes app-loading-slide { from { transform: translateX(-110%); } to { transform: translateX(330%); } }

    /* PETA UTAMA */
    #map {
      flex: 1;
      height: 100%;
      width: 100%;
      z-index: 1;
      background: #000;
    }

    /* Kartu Animasi Track berada di bawah sidebar pada desktop. */
    .gpx-anim-map-overlay {
      position: absolute;
      left: 10px;
      bottom: 52px;
      z-index: 999;
      width: min(300px, calc(100% - 32px));
      pointer-events: none;
    }
    .gpx-anim-map-overlay .alat-card { pointer-events: auto; }
    @media (max-width: 600px) {
      /* Pada mobile, kartu dipindahkan ke bagian atas dan memenuhi lebar layar. */
      .gpx-anim-map-overlay {
        top: 10px;
        right: 10px;
        bottom: auto;
        left: 10px;
        z-index: 999;
        width: auto;
        max-width: none;
      }
      .gpx-anim-map-overlay .alat-card { margin-top: 0; }
    }

    /* Unified Search on Map */
    .unified-search {
      position: absolute; top: 14px; left: 50%; transform: translateX(-50%);
      z-index: 1000; width: min(420px, calc(100% - 32px));
    }
    .unified-search-inner {
      display: flex; align-items: center; gap: 8px;
      padding: 0 14px; height: 46px;
      background: var(--bg-glass-light);
      backdrop-filter: blur(20px) saturate(180%);
      -webkit-backdrop-filter: blur(20px) saturate(180%);
      border: 1px solid var(--border-color);
      border-radius: 24px;
      box-shadow: 0 2px 12px rgba(0,0,0,.08), 0 8px 32px rgba(0,0,0,.06), inset 0 1px 0 rgba(255,255,255,.5);
      transition: box-shadow .2s, border-color .2s;
    }
    .unified-search-inner:focus-within {
      box-shadow: 0 2px 16px rgba(0,0,0,.1), 0 12px 40px rgba(0,0,0,.08), inset 0 1px 0 rgba(255,255,255,.5);
      border-color: var(--accent);
      background: var(--bg-glass);
    }
    .unified-search-icon { color: var(--text-tertiary); flex-shrink: 0; opacity: .7; stroke: var(--text-tertiary); }

    /* ruangkita-mark inside search bar */
    .unified-search .ruangkita-mark {
      display: grid;
      grid-template-columns: repeat(2, 10px);
      grid-template-rows: repeat(2, 10px);
      gap: 2px;
      padding: 0;
      border: none;
      border-radius: 0;
      background: none;
      transform: none;
      opacity: 1;
    }
    .unified-search .ruangkita-mark i {
      border-radius: 2px;
    }
    .unified-search-input {
      flex: 1; border: 0; outline: none; background: transparent;
      font-size: 14px; color: var(--text-primary); font-family: 'Google Sans', 'Segoe UI', sans-serif;
      line-height: 1; letter-spacing: .01em;
    }
    .unified-search-input::placeholder { color: var(--text-muted); opacity: .6; }
    .unified-search-clear {
      display: none; align-items: center; justify-content: center;
      width: 28px; height: 28px; border: 0; border-radius: 50%;
      background: rgba(0,0,0,.06); color: #5f6368; font-size: 16px;
      cursor: pointer; transition: background .15s; flex-shrink: 0;
    }
    .unified-search-clear:hover { background: rgba(0,0,0,.12); }
    /* ── Layer Catalog Button ── */
    .reset-layers-search-btn {
      display: flex; align-items: center; justify-content: center;
      width: 28px; height: 28px; border: 0; border-radius: 50%; flex-shrink: 0;
      background: rgba(239,68,68,.1); color: #ef4444; cursor: pointer;
      transition: background .15s, transform .15s;
    }
    .reset-layers-search-btn:hover { background: rgba(239,68,68,.2); transform: scale(1.08); }
    .layer-catalog-btn {
      display: flex; align-items: center; justify-content: center;
      width: 28px; height: 28px; border: 0; border-radius: 50%; flex-shrink: 0;
      background: rgba(37,99,235,.1); color: #2563eb; cursor: pointer;
      transition: background .15s, transform .15s;
    }
    .layer-catalog-btn:hover { background: rgba(37,99,235,.2); transform: scale(1.08); }
    .layer-catalog-btn.active { background: #2563eb; color: #fff; }
    /* ── Layer Catalog Dropdown ── */
    .layer-catalog-dropdown {
      display: none; box-sizing: border-box; width: 100%;
      height: min(60vh, calc(100vh - 76px));
      height: min(60dvh, calc(100dvh - 76px));
      margin-top: 6px; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain;
      background: rgba(255,255,255,.92);
      backdrop-filter: blur(24px) saturate(180%);
      -webkit-backdrop-filter: blur(24px) saturate(180%);
      border: 1px solid rgba(255,255,255,.5);
      border-radius: 16px;
      box-shadow: 0 4px 16px rgba(0,0,0,.08), 0 12px 40px rgba(0,0,0,.06);
      padding: 0 0 8px;
      scrollbar-width: thin; scrollbar-color: #c1c1c1 transparent;
    }
    .layer-catalog-dropdown::-webkit-scrollbar { width: 5px; }
    .layer-catalog-dropdown::-webkit-scrollbar-track { background: transparent; }
    .layer-catalog-dropdown::-webkit-scrollbar-thumb { background: #c1c1c1; border-radius: 3px; }
    .layer-catalog-dropdown.open { display: block; }
    .lc-category { padding: 0 8px; }
    .lc-category + .lc-category { border-top: 1px solid rgba(0,0,0,.06); margin-top: 4px; padding-top: 4px; }
    .lc-cat-header {
      display: flex; align-items: center; gap: 6px;
      box-sizing: border-box; min-width: 0; padding: 6px 8px; border: 0; background: transparent; width: 100%;
      cursor: pointer; border-radius: 8px; transition: background .12s;
    }
    .lc-cat-header:hover { background: rgba(0,0,0,.04); }
    .lc-cat-arrow {
      width: 14px; height: 14px; flex-shrink: 0; color: #94a3b8;
      transition: transform .2s;
    }
    .lc-category.open .lc-cat-arrow { transform: rotate(90deg); }
    .lc-cat-title {
      font-size: 11px; font-weight: 700; color: #475569;
      text-transform: uppercase; letter-spacing: .04em; flex: 1; text-align: left;
    }
    .lc-cat-count {
      font-size: 10px; font-weight: 600; color: #94a3b8;
      background: #f1f5f9; border-radius: 10px; padding: 1px 6px;
    }
    .lc-items { display: none; padding: 2px 0 4px; }
    .lc-category.open .lc-items { display: block; }
    .lc-category-description {
      margin: 0 8px 6px 28px; color: #64748b; font-size: 10px;
      line-height: 1.45;
    }
    .lc-item {
      display: flex; align-items: center; gap: 8px;
      box-sizing: border-box; width: 100%; min-width: 0;
      padding: 5px 8px 5px 28px; border-radius: 6px; cursor: pointer;
      transition: background .12s;
    }
    .lc-item:hover { background: rgba(37,99,235,.06); }
    .lc-item input[type="checkbox"] {
      width: 14px; height: 14px; accent-color: #2563eb; cursor: pointer; flex-shrink: 0;
    }
    .lc-item label {
      flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere;
      font-size: 12px; color: #334155; cursor: pointer; line-height: 1.3;
    }
    /* Entri direktori yang sumbernya tidak dapat diakses: label berbayang
       dan checkbox nonaktif agar tidak bisa dicentang. */
    .lc-item-unavailable { cursor: default; }
    .lc-item-unavailable:hover { background: transparent; }
    .lc-item-unavailable input[type="checkbox"] {
      cursor: not-allowed; opacity: .45; accent-color: #94a3b8;
    }
    .lc-item-unavailable label { color: #94a3b8; cursor: not-allowed; }
    .lc-basemap-group {
      font-size: 10px; font-weight: 700; color: #94a3b8; text-transform: uppercase;
      letter-spacing: .05em; padding: 8px 8px 2px 28px;
    }
    .lc-item.lc-basemap-item {
      padding: 5px 8px 5px 28px; gap: 8px;
    }
    .lc-item.lc-basemap-item input[type="radio"] {
      width: 14px; height: 14px; accent-color: #2563eb; cursor: pointer; flex-shrink: 0;
    }
    .lc-item.lc-basemap-item.lc-basemap-active {
      background: rgba(37,99,235,.08); border-left: 2px solid #2563eb;
    }
    .lc-basemap-badge {
      margin-left: auto; font-size: 9px; font-weight: 700; color: #fff;
      background: #2563eb; border-radius: 8px; padding: 1px 6px; flex-shrink: 0;
    }
    /* ══ GRID KARTU BASEMAP ALA ARCGIS (2026-11-01) ══
       Kategori Basemap dirender jadi kartu thumbnail (grid) ala basemap
       gallery ArcGIS Pro, bukan baris radio. Thumbnail = tile asli dari
       layanan (basemapPreviewUrl); kalau gagal dimuat, .lc-bm-thumb-ph
       menampilkan pola grid peta sebagai gantinya. Radio tetap ada di
       dalam kartu (opsional, disembunyikan) supaya handler lama jalan. */
    .lc-bm-grid {
      /* GRID BASEMAP 3 KOLOM TETAP (2026-11-01) -- sebelumnya 4 kolom. */
      display: grid; grid-template-columns: repeat(3, 1fr);
      gap: 8px; padding: 4px 8px 10px;
    }
    .lc-item.lc-bm-card {
      position: relative; display: block; padding: 0;
      border: 1px solid var(--border-color); border-radius: 10px;
      overflow: hidden; background: #fff; transition: border-color .15s, box-shadow .15s, transform .15s;
    }
    .lc-item.lc-bm-card:hover { background: #fff; box-shadow: 0 4px 12px rgba(15,23,42,.12); transform: translateY(-1px); }
    .lc-item.lc-bm-card input[type="radio"] {
      position: absolute; width: 1px; height: 1px; margin: 0; padding: 0;
      opacity: 0; pointer-events: none;
    }
    .lc-bm-card label { display: block; flex: none; padding: 0; margin: 0; cursor: pointer; }
    .lc-bm-thumb {
      display: block; position: relative; width: 100%; aspect-ratio: 16 / 10;
      overflow: hidden;
      /* Placeholder "grid peta" -- tampil bila tak ada thumbnail atau
         tile gagal dimuat (onerror di buildLayerCatalog). */
      background:
        repeating-linear-gradient(0deg, #e2e8f0 0 1px, transparent 1px 18px),
        repeating-linear-gradient(90deg, #e2e8f0 0 1px, transparent 1px 18px),
        #f8fafc;
    }
    .lc-bm-thumb img {
      display: block; width: 100%; height: 100%; object-fit: cover;
      transition: transform .2s;
    }
    .lc-bm-card:hover .lc-bm-thumb img { transform: scale(1.05); }
    .lc-bm-name {
      display: block; padding: 6px 8px; font-size: 11px; font-weight: 600;
      color: #334155; line-height: 1.3;
    }
    .lc-item.lc-bm-card.lc-basemap-active { border-color: #2563eb; box-shadow: 0 0 0 2px rgba(37,99,235,.35); }
    .lc-bm-card .lc-basemap-badge {
      position: absolute; top: 6px; left: 6px; margin: 0;
      box-shadow: 0 1px 4px rgba(0,0,0,.25);
    }
    .lc-bm-card .lc-pin-btn {
      position: absolute; top: 4px; right: 4px; padding: 3px 5px;
      background: rgba(255,255,255,.85); border-radius: 6px;
      box-shadow: 0 1px 4px rgba(0,0,0,.18);
    }
    .lc-bm-card input[type="radio"]:focus-visible + label {
      outline: 2px solid #2563eb; outline-offset: -2px; border-radius: 8px;
    }
    .lc-subcat-header {
      font-size: 10px; font-weight: 700; color: #94a3b8; text-transform: uppercase;
      letter-spacing: .05em; padding: 8px 8px 2px 28px;
    }
    .lc-attr-btn {
      display: none; padding: 2px 4px; border: none; border-radius: 4px;
      background: transparent; color: #94a3b8; cursor: pointer; transition: color .15s, background .15s;
      flex-shrink: 0;
    }
    .lc-attr-btn:hover { color: #2563eb; background: rgba(37,99,235,.08); }
    .lc-attr-btn-show { display: inline-flex; }
    .lc-fit-btn { display: inline-grid; place-items: center; width: 20px; height: 20px; padding: 0; border: 0; border-radius: 4px; background: transparent; color: #94a3b8; cursor: pointer; font-size: 14px; line-height: 1; }
    .lc-fit-btn:hover { color: #0f766e; background: rgba(15,118,110,.09); }
    .lc-search {
      margin: 0 8px 6px; padding: 6px 10px 6px 28px;
      border: 1px solid #e2e8f0; border-radius: 8px; font-size: 12px;
      outline: none; width: calc(100% - 16px); box-sizing: border-box;
      background: #f8fafc; transition: border-color .15s;
    }
    .lc-search:focus { border-color: #2563eb; background: #fff; }
    /* Varian di bawah banner donasi. Margin atasnya nol supaya tidak ada
       celah aneh antara banner dan kotak, margin bawahnya lebih longgar
       supaya tidak menempel grup Layer Dipin di bawahnya. */
    .lc-search-top { margin: 0 8px 10px; }
    /* Grup "Layer Aktif" lama di katalog dihapus 2026-10-31 dan dipindah ke
       sheet #activeLayersSidebar; gaya di bawah untuk panel barunya. */
    .al-sidebar-count { margin-left: 2px; min-width: 18px; text-align: center; padding: 1px 6px; border-radius: 9px; background: #2563eb; color: #fff; font-size: 10px; font-weight: 700; line-height: 1.4; font-variant-numeric: tabular-nums; }
    .al-empty { margin: 4px 0 8px; padding: 10px 12px; border: 1px dashed var(--border-color); border-radius: 10px; color: var(--text-tertiary); font-size: 11px; line-height: 1.5; text-align: center; }
    /* Warna biru warisan grup "Layer Aktif" lama di katalog.
       padding-left 8px menggantikan warisan 28px dari .lc-item: indentasi
       28px itu ruang anak pohon di Katalog Layer. Panel Layer Aktif tidak
       punya pohon, jadi sisa 28px tampil sebagai kolom kosong di sebelah
       kiri tiap baris (permintaan 2026-11-02). Dipadankan dengan padding
       kanan 8px supaya barisnya simetris. */
    .al-item { background: rgba(37,99,235,.04); padding-left: 8px; }
    /* Nama layer dipangkas jadi satu baris: baris di panel ini membawa
       banyak tombol aksi (mata, tabel, hapus, export, ▲/▼), sehingga nama
       panjang membuat baris tingginya tidak seragam. Nama lengkap + jenis
       dan jumlah fitur tetap terbaca lewat tooltip (label.title di
       renderActiveLayersPanel). */
    .al-item label {
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    /* Baris yang disembunyikan lewat ikon mata (2026-11-01): label pudar
       supaya jelas layer masih terdaftar tapi tak tampil di peta. */
    .al-item-hidden label { opacity: .45; text-decoration: line-through; }
    /* Tombol mata: memakai tampilan .lc-attr-btn-show; warna merah saat
       layer sedang disembunyikan (mata tercoret). */
    .al-eye-btn { color: #94a3b8; }
    .al-eye-btn:hover { color: #2563eb; background: rgba(37,99,235,.08); }
    .al-item-hidden .al-eye-btn { color: #ef4444; }
    .al-item-hidden .al-eye-btn:hover { color: #ef4444; background: rgba(239,68,68,.1); }
    /* Tombol geser urutan ▲/▼ (2026-11-01): arah yang tidak mungkin
       (baris pertama/terakhir) dinonaktifkan supaya jelas batasnya. */
    .al-move-btn { color: #64748b; }
    .al-move-btn:hover { color: #2563eb; background: rgba(37,99,235,.08); }
    .al-move-btn:disabled { opacity: .3; cursor: default; }
    .al-move-btn:disabled:hover { color: #64748b; background: transparent; }
    /* Tombol Hapus & Export SHP khusus baris layer unggahan
       (merge "Layer Dimuat" GeoData ke panel Layer Aktif, 2026-11-01). */
    .al-hapus-btn { color: #64748b; }
    .al-hapus-btn:hover { color: #ef4444; background: rgba(239,68,68,.08); }
    .al-export-btn { color: #64748b; }
    .al-export-btn:hover { color: #2563eb; background: rgba(37,99,235,.08); }
    .al-export-btn:disabled { opacity: .4; cursor: default; }
    /* Badge jumlah layer aktif di tombol FAB -- pola sama dengan .ql-badge. */
    .al-fab-count { position: absolute; top: -3px; right: -4px; min-width: 15px; padding: 1px 4px; box-sizing: border-box; text-align: center; font-size: 8px; font-weight: 700; color: #fff; background: #2563eb; border-radius: 8px; line-height: 1.3; pointer-events: none; }
    .lc-clear-all { margin-right: 8px; padding: 3px 8px; border: 1px solid #ef4444; border-radius: 6px; background: #fff; color: #ef4444; font-size: 10px; font-weight: 600; cursor: pointer; white-space: nowrap; transition: background .15s, color .15s; }
    .lc-clear-all:hover { background: #ef4444; color: #fff; }
    /* ═══════════════════════════════════════════════════════════════════
       FITUR CEBOL SEMBUNYI SEMENTARA (2026-11-01)
       Grup "Layer Dipin" pada Katalog Layer disembunyikan atas permintaan.
       KODE TIDAK DIHAPUS -- hanya disembunyikan lewat CSS sehingga mudah
       dikembalikan. Untuk menampilkan lagi: hapus/bungkus baris .lc-pinned-group
       di bawah dengan komentar /* SEMBUNYIKAN-LAYER-DIPIN ... */ atau hapus
       properti display:none pada rule .lc-pinned-group.
       ═══════════════════════════════════════════════════════════════════ */
    .lc-pinned-group { display: none !important; }
    .lc-pinned-group { border-left: 3px solid #f59e0b; margin: 0 8px 8px; border-radius: 0 8px 8px 0; background: rgba(245,158,11,.04); }
    .lc-pinned-header { display: flex; align-items: center; justify-content: space-between; }
    .lc-pinned-header .lc-cat-header { flex: 1; }
    .lc-pinned-title { color: #d97706 !important; font-weight: 700; }
    .lc-item-pinned { background: rgba(245,158,11,.06); }
    .lc-item-pinned input[type="radio"] { width: 14px; height: 14px; accent-color: #2563eb; cursor: pointer; flex-shrink: 0; }
    .lc-item-pinned.lc-basemap-active { background: rgba(37,99,235,.08); border-left: 2px solid #2563eb; }
    .lc-pin-btn { display: inline-flex; padding: 2px 4px; border: none; border-radius: 4px; background: transparent; color: #94a3b8; cursor: pointer; transition: color .15s, background .15s; flex-shrink: 0; }
    /* Sembunyikan aksi pin di Katalog Layer; tombol pin pada Layer Aktif
       tetap tersedia untuk pengelolaan yang sudah ada. */
    #layerCatalogDropdown .lc-pin-btn { display: none !important; }
    .lc-pin-btn:hover { color: #d97706; background: rgba(245,158,11,.1); }
    .lc-item-actions { display: inline-flex; align-items: center; gap: 2px; margin-left: auto; flex-shrink: 0; }
    .lc-local-source-note { padding: 2px 10px 7px 30px; color: #64748b; font-size: 11px; line-height: 1.45; }
    .lc-copy-xyz-btn { display: block; margin: 0 10px 10px 30px; padding: 6px 10px; border: 1px solid #cbd5e1; border-radius: 6px; background: #f8fafc; color: #334155; font-size: 11px; font-weight: 600; cursor: pointer; }
    .lc-copy-xyz-btn:hover { border-color: #2563eb; background: #eff6ff; color: #1d4ed8; }
    .lc-pin-btn-active { color: #f59e0b; }
    .lc-pin-btn-active:hover { color: #d97706; background: rgba(245,158,11,.15); }
    .lc-unpin-all { margin-right: 8px; padding: 3px 8px; border: 1px solid #d97706; border-radius: 6px; background: #fff; color: #d97706; font-size: 10px; font-weight: 600; cursor: pointer; white-space: nowrap; transition: background .15s, color .15s; }
    .lc-unpin-all:hover { background: #d97706; color: #fff; }
    .unified-search-results {
      display: none; margin-top: 6px; max-height: 340px; overflow-y: auto;
      background: rgba(255,255,255,.92);
      backdrop-filter: blur(24px) saturate(180%);
      -webkit-backdrop-filter: blur(24px) saturate(180%);
      border: 1px solid rgba(255,255,255,.5);
      border-radius: 16px;
      box-shadow: 0 4px 16px rgba(0,0,0,.08), 0 12px 40px rgba(0,0,0,.06);
    }
    .geonusa-unified-toggle {
      display: flex; align-items: center; justify-content: center; flex: 0 0 28px;
      width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%;
      background: rgba(20,184,166,.11); color: #0f766e; cursor: pointer;
      transition: background .15s, transform .15s;
    }
    .geonusa-unified-toggle:hover, .geonusa-unified-toggle[aria-expanded="true"] { background: rgba(20,184,166,.24); transform: scale(1.08); }
    .geonusa-unified-panel {
      display: grid; gap: 9px; width: 100%; box-sizing: border-box; margin-top: 6px; padding: 14px;
      max-height: min(72vh, 520px); overflow: auto; background: rgba(255,255,255,.96);
      backdrop-filter: blur(24px) saturate(180%); -webkit-backdrop-filter: blur(24px) saturate(180%);
      border: 1px solid rgba(255,255,255,.7); border-radius: 16px;
      box-shadow: 0 8px 28px rgba(0,0,0,.16); scrollbar-width: thin;
    }
    .geonusa-unified-panel[hidden] { display: none; }
    .geonusa-unified-heading { display: grid; gap: 3px; margin-bottom: 2px; }
    .geonusa-unified-heading strong { font-size: 13px; color: #0f172a; }
    .geonusa-unified-heading span { min-height: 14px; color: #64748b; font-size: 11px; }
    .geonusa-unified-panel label { display: grid; gap: 4px; color: #475569; font-size: 11px; font-weight: 600; }
    .geonusa-unified-panel select {
      width: 100%; min-height: 38px; padding: 7px 10px; border: 1px solid #cbd5e1; border-radius: 9px;
      background: #fff; color: #0f172a; font: 12px 'Google Sans','Segoe UI',sans-serif;
    }
    .geonusa-unified-panel select:disabled { color: #94a3b8; background: #f8fafc; }
    .geonusa-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
    .geonusa-search-btn, .geonusa-reset-btn { min-height: 38px; border: 0; border-radius: 9px; font: 600 12px 'Google Sans','Segoe UI',sans-serif; cursor: pointer; }
    .geonusa-search-btn { background: #0f766e; color: #fff; }
    .geonusa-search-btn:hover:not(:disabled) { background: #115e59; }
    .geonusa-search-btn:disabled { background: #cbd5e1; color: #64748b; cursor: not-allowed; }
    .geonusa-reset-btn { border: 1px solid #cbd5e1; background: #fff; color: #475569; }
    .geonusa-reset-btn:hover { background: #f1f5f9; }
    .unified-ac-group { padding: 6px 0; }
    .unified-ac-group + .unified-ac-group { border-top: 1px solid rgba(0,0,0,.06); }
    .unified-ac-label {
      display: block; padding: 6px 16px 4px; font-size: 11px; font-weight: 600;
      color: #5f6368; letter-spacing: .04em; text-transform: uppercase;
    }
    .unified-ac-item {
      display: flex; align-items: center; gap: 10px; width: 100%;
      padding: 8px 16px; border: 0; background: transparent;
      cursor: pointer; text-align: left; transition: background .12s;
    }
    .unified-ac-item:hover { background: rgba(26,115,232,.06); }
    .unified-ac-icon { font-size: 16px; width: 24px; text-align: center; flex-shrink: 0; }
    .unified-ac-item strong { display: block; font-size: 13px; color: #202124; font-weight: 500; }
    .unified-ac-item small { display: block; font-size: 11px; color: #5f6368; margin-top: 1px; }
    .unified-ac-item .unified-ac-add-hint { color: #0879b8; font-weight: 600; }
    .unified-ac-empty { padding: 14px 16px; text-align: center; color: #5f6368; font-size: 12px; }

    /* Tombol lokasi saya (Leaflet Locate Control) */
    /* ── Map FAB Menu ── */
    .map-fab-wrap {
      position: relative;
      margin: 8px !important;
      z-index: 99999;
      overflow: visible;
    }
    .map-fab-btn {
      display: grid;
      place-items: center;
      width: 56px !important;
      height: 56px !important;
      border: 1px solid rgba(255,255,255,.86) !important;
      border-radius: 50% !important;
      background: linear-gradient(145deg, #0a73b8, #075890) !important;
      color: #fff !important;
      cursor: pointer;
      box-shadow: 0 6px 18px rgba(8,63,102,.3) !important;
      transition: transform .2s, box-shadow .2s;
      z-index: 1003;
      position: relative;
    }
    .map-fab-btn:hover {
      transform: scale(1.08);
      box-shadow: 0 8px 24px rgba(8,63,102,.4) !important;
    }
    .map-fab-btn svg { transition: transform .3s ease; }
    .map-fab-open .map-fab-btn svg { transform: rotate(45deg); }

    .map-fab-items {
      position: absolute;
      bottom: 64px;
      right: 4px;
      display: flex;
      flex-direction: column-reverse;
      align-items: center;
      gap: 10px;
      pointer-events: none;
      opacity: 0;
      transform: translateY(12px);
      transition: opacity .25s ease, transform .25s ease;
      z-index: 99999;
    }
    .map-fab-open .map-fab-items {
      pointer-events: auto;
      opacity: 1;
      transform: translateY(0);
    }
    .map-fab-item {
      width: 44px !important;
      height: 44px !important;
      border: 1px solid var(--border-color) !important;
      border-radius: 50% !important;
      background: var(--bg-card) !important;
      color: var(--accent) !important;
      cursor: pointer;
      box-shadow: 0 4px 12px rgba(8,63,102,.2) !important;
      transition: transform .2s, box-shadow .2s, background .2s, opacity .2s;
      display: grid;
      place-items: center;
      opacity: 0;
      transform: scale(0.5) translateY(10px);
      position: relative;
      overflow: visible;
    }
    .map-fab-open .map-fab-item {
      opacity: 1;
      transform: scale(1) translateY(0);
    }
    .map-fab-open .map-fab-item:nth-child(1) { transition-delay: .05s; }
    .map-fab-open .map-fab-item:nth-child(2) { transition-delay: .1s; }
    .map-fab-open .map-fab-item:nth-child(3) { transition-delay: .15s; }
    .map-fab-open .map-fab-item:nth-child(4) { transition-delay: .2s; }
    .map-fab-open .map-fab-item:nth-child(5) { transition-delay: .25s; }
    .map-fab-open .map-fab-item:nth-child(6) { transition-delay: .3s; }
    .map-fab-open .map-fab-item:nth-child(7) { transition-delay: .35s; }
    .map-fab-open .map-fab-item:nth-child(8) { transition-delay: .4s; }
    .map-fab-open .map-fab-item:nth-child(9) { transition-delay: .45s; }
    .map-fab-item:hover {
      background: var(--bg-card-hover) !important;
      box-shadow: inset 0 0 0 1px var(--accent) !important;
      transform: scale(1.1) !important;
    }
    .map-fab-item[title]::after {
      content: attr(title);
      position: absolute;
      right: calc(100% + 8px);
      top: 50%;
      transform: translateY(-50%);
      padding: 4px 8px;
      border-radius: 6px;
      background: var(--bg-primary);
      color: var(--text-primary);
      font-size: 10px;
      font-weight: 600;
      white-space: nowrap;
      opacity: 0;
      pointer-events: none;
      transition: opacity .15s;
      border: 1px solid var(--border-color);
      box-shadow: 0 2px 8px rgba(0,0,0,.15);
    }
    .map-fab-item:hover[title]::after { opacity: 1; }
    .map-fab-item .geoportal-print-btn,
    .map-fab-item .sat-export-btn,
    .map-fab-item .draw-fab-btn,
    .map-fab-item .leaflet-control-locate,
    .map-fab-item .leaflet-control-locate a {
      width: 100% !important;
      height: 100% !important;
      margin: 0 !important;
      border: none !important;
      border-radius: 50% !important;
      box-shadow: none !important;
    }

    .leaflet-control-locate { margin: 8px !important; border: 0 !important; border-radius: 50% !important; background: transparent !important; box-shadow: 0 6px 18px rgba(8, 63, 102, .2) !important; overflow: hidden; }
    .leaflet-control-locate a { display: grid !important; width: 38px !important; height: 38px !important; place-items: center; border: 1px solid var(--border-color) !important; border-radius: 50% !important; background: var(--bg-card) !important; color: var(--accent) !important; text-decoration: none; transition: transform .2s ease, box-shadow .2s ease, background .2s ease; position: relative; }
    .leaflet-control-locate a::before { content: none; }
    .leaflet-control-locate a .leaflet-control-locate-location-arrow,
    .leaflet-control-locate a .leaflet-control-locate-spinner { display: none !important; }
    .leaflet-control-locate a:hover { background: var(--bg-card-hover) !important; box-shadow: inset 0 0 0 1px var(--accent); transform: translateY(-2px); }
    .leaflet-control-locate.active a, .leaflet-control-locate.following a { border-color: var(--accent) !important; background: var(--accent) !important; color: var(--text-inverse) !important; }
    .leaflet-control-locate.active a::before, .leaflet-control-locate.following a::before { display: none !important; }
    .leaflet-control-locate.active a::after, .leaflet-control-locate.following a::after { display: none !important; }
    @keyframes locate-spin { to { transform: rotate(360deg); } }

    .geoportal-print-btn {
      display: grid;
      place-items: center;
      width: 38px !important;
      height: 38px !important;
      margin: 8px !important;
      margin-bottom: 0 !important;
      border: 1px solid var(--border-color) !important;
      border-radius: 50% !important;
      background: var(--bg-card) !important;
      color: var(--accent) !important;
      font-size: 18px;
      line-height: 1;
      cursor: pointer;
      box-shadow: 0 6px 18px rgba(8,63,102,.2) !important;
      transition: transform .2s, box-shadow .2s, background .2s;
      padding: 0;
    }
    .geoportal-print-btn::-moz-focus-inner { border: 0; }
    .geoportal-print-btn svg { width: 18px; height: 18px; display: block; }
    .geoportal-print-btn:disabled svg { animation: print-spin .8s linear infinite; transform-origin: center; }
    .geoportal-print-btn:hover {
      background: var(--bg-card-hover) !important;
      box-shadow: inset 0 0 0 1px var(--accent);
      transform: translateY(-2px);
    }
    .geoportal-print-btn:disabled {
      opacity: .6;
      cursor: progress;
      transform: none;
    }

    .print-status-overlay {
      position: fixed;
      inset: 0;
      z-index: 3000;
      display: none;
      align-items: center;
      justify-content: center;
      background: rgba(15, 23, 42, .48);
      backdrop-filter: blur(2px);
    }
    .print-status-box {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 12px;
      min-width: 220px;
      padding: 22px 26px;
      border-radius: 14px;
      background: var(--bg-primary);
      color: var(--text-primary);
      box-shadow: 0 20px 50px rgba(8, 63, 102, .3);
    }
    .print-spinner {
      width: 38px;
      height: 38px;
      border-radius: 50%;
      border: 4px solid rgba(8, 121, 191, .18);
      border-top-color: var(--accent);
      animation: print-spin .8s linear infinite;
    }
    .print-status-text {
      font-size: 13px;
      font-weight: 600;
      text-align: center;
      color: var(--text-primary);
    }
    .print-error-box {
      flex-direction: row;
      gap: 12px;
      border: 1px solid #fecaca;
      background: #fef2f2;
      color: #991b1b;
    }
    .print-error-box .print-status-text { color: #991b1b; }
    .print-error-icon {
      flex: 0 0 auto;
      width: 30px;
      height: 30px;
      border-radius: 50%;
      background: #dc2626;
      color: #fff;
      font-weight: 800;
      font-size: 18px;
      display: grid;
      place-items: center;
    }
    @keyframes print-spin {
      to { transform: rotate(360deg); }
    }

    /* Download DEMNAS */
    #demnasStatus.demnas-status--error {
      color: #991b1b;
      background: #fef2f2;
      border: 1px solid #fecaca;
    }

    #demnasDownloadBtn.is-loading {
      position: relative;
      color: transparent;
    }
    #demnasDownloadBtn.is-loading svg { opacity: 0; }
    #demnasDownloadBtn.is-loading::after {
      content: '';
      position: absolute;
      width: 15px;
      height: 15px;
      border: 2px solid rgba(255,255,255,.45);
      border-top-color: #fff;
      border-radius: 50%;
      animation: demnas-loading-spin .7s linear infinite;
    }
    .demnas-loading-layer {
      margin-top: 10px;
      padding: 10px;
      border: 1px solid #bcdff0;
      border-radius: 10px;
      background: linear-gradient(135deg, #f0fbff, #f8fbfd);
    }
    .demnas-loading-layer[hidden] { display: none; }
    .demnas-loading-head {
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .demnas-loading-head strong {
      display: block;
      color: #16466c;
      font-size: 11px;
    }
    .demnas-loading-head small {
      display: block;
      margin-top: 2px;
      color: #52728a;
      font-size: 9px;
    }
    .demnas-loading-spinner {
      width: 18px;
      height: 18px;
      flex: 0 0 18px;
      border: 2px solid #c9e9f5;
      border-top-color: #007fa8;
      border-radius: 50%;
      animation: demnas-loading-spin .7s linear infinite;
    }
    @keyframes demnas-loading-spin { to { transform: rotate(360deg); } }
    .demnas-loading-track {
      height: 6px;
      margin-top: 10px;
      overflow: hidden;
      border-radius: 999px;
      background: #dceff7;
    }
    .demnas-loading-track span {
      display: block;
      width: 0;
      height: 100%;
      border-radius: inherit;
      background: linear-gradient(90deg, #00a6d6, #007fa8);
      transition: width .25s ease;
    }
    .demnas-loading-meta {
      display: flex;
      justify-content: space-between;
      margin-top: 5px;
      color: #648096;
      font-size: 9px;
    }
    .demnas-loading-meta strong { color: #007fa8; }
    .demnas-recommendation-box {
      margin-top: 9px;
      padding: 9px 10px;
      border: 1px solid #cfe0f0;
      border-radius: 8px;
      background: #f2f8fd;
    }
    .demnas-recommendation-box[hidden] { display: none; }
    .demnas-recommendation-heading {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      color: #16466c;
      font-size: 10px;
    }
    .demnas-recommendation-heading span {
      color: #52728a;
      font-size: 9px;
    }
    .demnas-recommendation-status {
      min-height: 14px;
      margin: 4px 0 6px;
      color: #648096;
      font-size: 9px;
    }
    .demnas-recommendation-status.is-error { color: #b91c1c; }
    .demnas-clip-box {
      margin-top: 10px;
      padding: 10px;
      border: 1px solid #dbe7ee;
      border-radius: 8px;
      background: #f8fbfd;
    }
    .demnas-clip-heading {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      margin-bottom: 8px;
      color: #16466c;
      font-size: 11px;
    }
    .demnas-clip-heading span {
      padding: 2px 5px;
      border-radius: 4px;
      background: #e8f4fc;
      color: #0879bf;
      font-size: 8px;
      font-weight: 700;
      text-transform: uppercase;
    }
    .demnas-admin-search-wrap {
      display: grid;
      gap: 5px;
      margin-top: 7px;
    }
    .demnas-admin-search-wrap[hidden] { display: none; }
    .demnas-admin-search-count {
      min-height: 13px;
      color: #7895aa;
      font-size: 9px;
    }
    .demnas-admin-selected {
      margin-top: 7px;
      padding: 6px 8px;
      border: 1px solid #bbf7d0;
      border-radius: 5px;
      background: #f0fdf4;
      color: #166534;
      font-size: 10px;
      line-height: 1.4;
    }
    .demnas-admin-selected[hidden] { display: none; }
    .demnas-clip-actions {
      display: flex;
      gap: 6px;
      margin-top: 8px;
    }
    .demnas-clip-actions > button {
      flex: 1;
      min-width: 0;
      width: auto;
      margin-top: 0;
    }
    .demnas-clip-refresh-btn {
      width: 100%;
      margin-top: 8px;
      padding: 6px 10px;
      border: 1px solid #b9d9e9;
      border-radius: 6px;
      background: #fff;
      color: #0879bf;
      cursor: pointer;
      font-size: 10px;
      font-weight: 600;
    }
    .demnas-clip-refresh-btn:hover { background: #e8f4fc; }
    .demnas-clip-refresh-btn:disabled { opacity: .55; cursor: wait; }
    .demnas-clip-reset-btn {
      padding: 6px 10px;
      border: 1px solid #f0c7c2;
      border-radius: 6px;
      background: #fff;
      color: #b94a3e;
      cursor: pointer;
      font-size: 10px;
      font-weight: 600;
    }
    .demnas-clip-reset-btn:hover { background: #fff1ef; }
    .demnas-clip-reset-btn:disabled { opacity: .55; cursor: wait; }
    .demnas-preview-status {
      min-height: 15px;
      margin-top: 7px;
      color: #52728a;
      font-size: 9px;
      line-height: 1.4;
    }
    .demnas-preview-status.is-error { color: #b91c1c; }
    .demnas-elevation-legend {
      margin-top: 7px;
      padding: 6px 7px;
      border: 1px solid #dbe7ee;
      border-radius: 6px;
      background: #fff;
    }
    .demnas-elevation-legend[hidden] { display: none; }
    .demnas-elevation-legend strong {
      display: block;
      margin-bottom: 5px;
      color: #355c77;
      font-size: 9px;
    }
    .demnas-elevation-bar {
      height: 9px;
      border-radius: 5px;
      background: linear-gradient(90deg, #1e64c8 0%, #42b6c4 18%, #7ed26e 34%, #dcdc32 48%, #e8b432 62%, #d28232 76%, #af3530 100%);
    }
    .demnas-elevation-labels {
      display: flex;
      justify-content: space-between;
      margin-top: 3px;
      color: #7895aa;
      font-size: 8px;
    }

    #sp2kpStatus.sp2kp-status--error,
    #sp2kpHistoryStatus.sp2kp-status--error {
      color: #991b1b;
      background: #fef2f2;
      border: 1px solid #fecaca;
    }

    /* Satellite Export */
    .sat-export-btn {
      display: grid;
      place-items: center;
      width: 38px !important;
      height: 38px !important;
      margin: 8px !important;
      margin-bottom: 0 !important;
      border: 1px solid var(--border-color) !important;
      border-radius: 50% !important;
      background: var(--bg-card) !important;
      color: var(--accent) !important;
      font-size: 18px;
      line-height: 1;
      cursor: pointer;
      box-shadow: 0 6px 18px rgba(8,63,102,.2) !important;
      transition: transform .2s, box-shadow .2s;
      padding: 0;
    }
    .sat-export-btn::-moz-focus-inner { border: 0; }
    .sat-export-btn svg { width: 17px; height: 17px; display: block; }
    .sat-export-btn:hover {
      background: var(--bg-card-hover) !important;
      box-shadow: inset 0 0 0 1px var(--accent);
      transform: translateY(-2px);
    }
    .sat-export-btn.sat-export-active {
      opacity: .6;
      cursor: progress;
      transform: none !important;
      pointer-events: none;
    }
    .sat-export-btn.sat-export-active svg { animation: print-spin .8s linear infinite; transform-origin: center; }
    .sat-export-overlay {
      display: none;
      position: fixed;
      inset: 0;
      z-index: 10000;
      background: rgba(15,23,42,.65);
      align-items: center;
      justify-content: center;
      backdrop-filter: blur(4px);
    }
    .sat-export-box {
      background: #0f172a;
      border: 1px solid rgba(255,255,255,.1);
      border-radius: 14px;
      padding: 28px 36px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 14px;
      box-shadow: 0 16px 48px rgba(0,0,0,.4);
    }
    .sat-export-spinner {
      width: 32px;
      height: 32px;
      border: 3px solid rgba(255,255,255,.15);
      border-top-color: #38bdf8;
      border-radius: 50%;
      animation: print-spin .8s linear infinite;
    }
    .sat-export-text { color: #94a3b8; font-size: 13px; font-family: 'Segoe UI', system-ui, sans-serif; }

    /* basemap-btn removed — basemap now in layer catalog */
    /* ── Basemap Modal ── */
    .basemap-modal {
      position: fixed; inset: 0; z-index: 3000;
      display: none; align-items: center; justify-content: center;
      padding: 18px;
      background: rgba(3,19,34,.68);
      backdrop-filter: blur(6px);
    }
    .basemap-modal.open { display: flex; }
    .basemap-modal-dialog {
      display: flex; flex-direction: column;
      width: min(520px, 100%);
      max-height: min(80vh, 600px);
      overflow: hidden;
      border-radius: 16px;
      background: var(--bg-primary);
      box-shadow: 0 22px 64px rgba(0,0,0,.45);
      color: var(--text-primary);
    }
    .basemap-modal-head {
      flex: 0 0 auto;
      display: flex; align-items: center; justify-content: space-between;
      padding: 13px 16px; color: #fff;
      background: linear-gradient(135deg, #0b5cab, #0879bf 58%, #12a7c8);
    }
    .basemap-modal-title { font-size: 14px; font-weight: 700; }
    .basemap-modal-close {
      width: 32px; height: 32px; border: 0; border-radius: 50%;
      color: #fff; background: rgba(255,255,255,.16); cursor: pointer;
      font-size: 18px; transition: background .2s, transform .2s;
    }
    .basemap-modal-close:hover { background: rgba(255,255,255,.32); transform: rotate(90deg); }
    .basemap-modal-body {
      flex: 1; overflow-y: auto; padding: 14px;
      overscroll-behavior: contain;
      scrollbar-width: thin; scrollbar-color: #b7c7d6 transparent;
    }
    .basemap-modal-body::-webkit-scrollbar { width: 5px; }
    .basemap-modal-body::-webkit-scrollbar-track { background: transparent; }
    .basemap-modal-body::-webkit-scrollbar-thumb { background: #b7c7d6; border-radius: 3px; }
    .basemap-modal-section-title {
      font-size: 11px; font-weight: 700; color: #64748b;
      text-transform: uppercase; letter-spacing: .05em;
      margin: 0 0 8px; padding-left: 2px;
    }
    .basemap-modal-grid {
      display: grid; grid-template-columns: repeat(2, 1fr);
      gap: 8px; margin-bottom: 16px;
    }
    .basemap-modal-option {
      display: flex; align-items: center; gap: 10px;
      padding: 10px 12px; border: 1.5px solid var(--border-color);
      border-radius: 10px; background: var(--bg-secondary);
      cursor: pointer; transition: all .15s ease;
    }
    .basemap-modal-option:hover { border-color: var(--accent); background: var(--bg-card-hover); }
    .basemap-modal-option.active {
      border-color: var(--accent); background: var(--bg-card-hover);
      box-shadow: 0 0 0 2px rgba(8,145,178,.15);
    }
    .basemap-modal-option-icon {
      width: 32px; height: 32px; border-radius: 8px;
      display: grid; place-items: center; flex-shrink: 0;
      background: var(--bg-tertiary); color: var(--accent); font-size: 14px;
    }
    .basemap-modal-option.active .basemap-modal-option-icon {
      background: var(--accent); color: var(--text-inverse);
    }
    .basemap-modal-option-label {
      font-size: 12px; font-weight: 600; color: var(--text-primary); line-height: 1.3;
    }
    .geoportal-legend {
      background: var(--bg-glass);
      border: 1px solid var(--border-color);
      border-radius: 10px;
      box-shadow: 0 6px 20px rgba(15,23,42,.16);
      padding: 8px 10px;
      min-width: 200px;
      max-width: 240px;
      max-height: 260px;
      overflow-y: auto;
      font-family: inherit;
    }
    .geoportal-legend-title {
      font-size: 11px;
      font-weight: 700;
      color: var(--text-primary);
      text-transform: uppercase;
      letter-spacing: .04em;
      border-bottom: 1px solid var(--border-color);
      padding-bottom: 5px;
      margin-bottom: 6px;
    }
    .geoportal-legend-item {
      margin-bottom: 7px;
    }
    .geoportal-legend-item:last-child {
      margin-bottom: 0;
    }
    .geoportal-legend-row {
      display: flex;
      align-items: center;
      gap: 7px;
    }
    .geoportal-legend-label {
      font-size: 10.5px;
      line-height: 1.35;
      color: #475569;
      word-break: break-word;
    }
    .geoportal-legend-img {
      display: block;
      max-width: 100%;
      max-height: 110px;
      margin-top: 3px;
      image-rendering: auto;
    }
    .geoportal-legend-swatch {
      flex: none;
      width: 12px;
      height: 12px;
      border-radius: 3px;
      background: #64748b;
      display: inline-block;
    }
    .geoportal-legend-swatch.point {
      border-radius: 50%;
      background: #e74c3c;
    }
    .geoportal-server-badge {
      display: inline-block;
      margin-left: 7px;
      padding: 1px 8px;
      font-size: 10px;
      font-weight: 600;
      line-height: 1.5;
      color: #b91c1c;
      background: #fee2e2;
      border: 1px solid #fecaca;
      border-radius: 9px;
      vertical-align: middle;
      white-space: nowrap;
    }

    /* ── MODIS Time Slider ── */
    .modis-time-slider-wrap {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
      background: var(--bg-glass);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border: 1px solid var(--border-color);
      border-radius: 16px;
      padding: 6px 12px;
      box-shadow: 0 4px 20px rgba(0,0,0,0.12);
      transition: opacity 0.2s, transform 0.2s;
    }
    .leaflet-bottom.leaflet-center {
      left: 50%;
      top: 112px;
      bottom: auto;
      display: flex;
      width: auto;
      transform: translateX(-50%);
      transition: left .3s ease;
    }
    .leaflet-control-attribution { display: none !important; }
    .leaflet-control-scale { display: none !important; }

    /* ── Bottom sheet mobile: gestur geser tinggi ──
       Register --sheet-h supaya nilainya bisa diinterpolasi. Tanpa
       @property, custom property ini berubah secara diskret sehingga
       `transition: height` tidak akan menganimasikan lonjakan dari
       tinggi drag ke tinggi stop. Browser lama yang tidak mendukung
       @property tetap berfungsi, hanya lompatannya yang tidak halus. */
    @property --sheet-h {
      syntax: '<length>';
      inherits: false;
      initial-value: 50dvh;
    }

    /* Pita bawah tengah: zoom control & chip mode minimal ──
       ZOOM CONTROL
       Posisinya TIDAK diatur di CSS ini, tapi lewat style inline dari
       map-core.js (cari "Zoom Control di bawah tengah"): position fixed,
       bottom 30px, left 50%, translateX(-50%), z-index 999. Karena itu
       pitanya tidak kelihatan di berkas stylesheet manapun: tinggi tombol
       44px, jadi pita yang dipakainya adalah 30px sampai 74px dari bawah
       layar. Bottom dipindah dari 16px ke 30px agar pill zoom tidak
       menutupi label koordinat grid (graticule) di tepi bawah peta,
       yang memakai area 10px sampai ~26px dari bawah. Nonaktifkan zoom
       bawaan Leaflet (zoomControl: false) dan kontrol kustom ini yang
       menggantikannya.

       CHIP MODE MINIMAL
       Sembilan chip sheet/panel yang sedang minimal (hotspot, geopangan,
       AI, GeoTools, Atribut, Gambar & Ukur, GeoFarm, Legenda, dan chip
       buka-kembali GeoFarm) semuanya dipin ke bawah tengah. Semuanya
       memakai bottom 68px dengan z-index 100. Pita zoom kini 30–74px,
       jadi 6px bawah chip bisa tertimpa pill zoom; masih aman karena
       chip berada jauh di bawah z-index zoom (100 vs 999) dan tumpang
       tindihnya hanya di padding bawah chip.

       Dua aturan yang wajib dijaga kalau ada chip mode minimal baru:
         1. bottom >= 68px. Chip yang lebih rendah akan jatuh di bawah
            label grid koordinat dan tertutup tombol +/−.
         2. z-index < 999. Aturan dasar sheet memakai 1100, jadi mode
            minimal wajib menurunkannya sendiri, kalau tidak chip akan
            menutupi zoom dan tombolnya tidak bisa diklik.

       Mobile tidak perlu aturan tambahan: zoom control disembunyikan di
       bawah 768px, dan chip mode minimal memakai override
       calc(98px + env(safe-area-inset-bottom, 0px)) sendiri. */

    /* Zoom Control */
    .zoom-control-wrap {
      display: flex;
      flex-direction: row;
      margin: 0 !important;
      gap: 2px;
      /* Agar pill ikut mengalir halus saat sheet kanan terbuka maupun
         ditutup (kiri dihitung dari lebar sheet yang tersisa). (2026-10-31) */
      transition: left .3s ease;
      border-radius: 24px;
      overflow: hidden;
      box-shadow: 0 4px 14px rgba(8,63,102,.18);
      border: 1px solid rgba(255,255,255,.86);
    }
    .zoom-control-btn {
      display: grid;
      place-items: center;
      width: 44px !important;
      height: 44px !important;
      border: none !important;
      border-radius: 0 !important;
      background: var(--bg-card) !important;
      color: var(--accent) !important;
      font-size: 18px;
      line-height: 1;
      cursor: pointer;
      transition: background .15s, transform .15s;
    }
    .zoom-control-in { border-radius: 24px 0 0 24px !important; }
    .zoom-control-out { border-radius: 0 24px 24px 0 !important; }
      cursor: pointer;
      box-shadow: 0 6px 18px rgba(8,63,102,.2) !important;
      transition: transform .2s, box-shadow .2s, background .2s;
      padding: 0;
      margin: 0;
    }
    .zoom-control-btn::-moz-focus-inner { border: 0; }
    .zoom-control-btn svg { width: 20px; height: 20px; display: block; stroke: var(--accent); }
    .zoom-control-btn:hover {
      background: var(--bg-card-hover) !important;
      box-shadow: inset 0 0 0 1px var(--accent);
      transform: translateY(-2px);
    }
    .zoom-control-btn:active {
      transform: scale(0.95);
    }
    .leaflet-center .leaflet-control {
      float: none;
      clear: none;
      margin: 0;
    }
    .modis-ts-controls {
      display: flex;
      align-items: center;
      gap: 6px;
      width: 100%;
    }
    .modis-ts-title {
      font-size: 10px;
      font-weight: 700;
      color: var(--text-secondary);
      text-align: center;
      letter-spacing: 0.02em;
    }
    .modis-ts-btn {
      display: grid;
      place-items: center;
      width: 28px;
      height: 28px;
      border: none;
      border-radius: 50%;
      background: transparent;
      color: #334155;
      cursor: pointer;
      transition: background 0.15s, color 0.15s;
      flex-shrink: 0;
      padding: 0;
    }
    .modis-ts-btn:hover {
      background: #e2e8f0;
      color: #0f172a;
    }
    .modis-ts-btn:active {
      background: #cbd5e1;
    }
    .modis-ts-slider-wrap {
      flex: 1;
      min-width: 0;
    }
    .modis-ts-slider {
      width: 100%;
      height: 4px;
      -webkit-appearance: none;
      appearance: none;
      background: linear-gradient(90deg, #bae6fd 0%, #0ea5e9 100%);
      border-radius: 2px;
      outline: none;
      cursor: pointer;
    }
    .modis-ts-slider::-webkit-slider-thumb {
      -webkit-appearance: none;
      width: 16px;
      height: 16px;
      border-radius: 50%;
      background: #0ea5e9;
      border: 2px solid #fff;
      box-shadow: 0 1px 6px rgba(14,165,233,0.4);
      cursor: pointer;
      transition: transform 0.15s, box-shadow 0.15s;
    }
    .modis-ts-slider::-webkit-slider-thumb:hover {
      transform: scale(1.15);
      box-shadow: 0 2px 10px rgba(14,165,233,0.5);
    }
    .modis-ts-slider::-moz-range-thumb {
      width: 16px;
      height: 16px;
      border-radius: 50%;
      background: #0ea5e9;
      border: 2px solid #fff;
      box-shadow: 0 1px 6px rgba(14,165,233,0.4);
      cursor: pointer;
    }
    .modis-ts-info {
      display: flex;
      align-items: center;
      gap: 6px;
      justify-content: center;
    }
    .modis-ts-date {
      font-size: 11px;
      font-weight: 600;
      color: #334155;
      white-space: nowrap;
      text-align: center;
      letter-spacing: -0.01em;
    }
    .modis-ts-time {
      font-size: 10px;
      font-weight: 600;
      color: #64748b;
      white-space: nowrap;
      text-align: center;
      letter-spacing: -0.01em;
    }
    @media (max-width: 768px) {
      .modis-time-slider-wrap {
        width: min(280px, calc(100vw - 32px));
        padding: 4px 8px;
      }
      .modis-ts-btn { width: 24px; height: 24px; }
      .modis-ts-date { font-size: 10px; }
      .modis-ts-time { font-size: 9px; }
    }

    /* ── Sentinel-2 Time Slider ── */
    .sentinel2-time-slider-wrap {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
      background: var(--bg-glass);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border: 1px solid var(--border-color);
      border-radius: 16px;
      padding: 6px 12px;
      box-shadow: 0 4px 20px rgba(0,0,0,0.12);
      transition: opacity 0.2s, transform 0.2s;
    }
    .sentinel2-ts-title {
      font-size: 10px;
      font-weight: 700;
      color: var(--text-secondary);
      text-align: center;
      letter-spacing: 0.02em;
    }
    .sentinel2-ts-controls {
      display: flex;
      align-items: center;
      gap: 6px;
      width: 100%;
    }
    .sentinel2-ts-btn {
      display: grid;
      place-items: center;
      width: 28px;
      height: 28px;
      border: none;
      border-radius: 50%;
      background: transparent;
      color: #475569;
      cursor: pointer;
      transition: background 0.15s, color 0.15s;
      flex-shrink: 0;
      padding: 0;
    }
    .sentinel2-ts-btn:hover {
      background: #e2e8f0;
      color: #0f172a;
    }
    .sentinel2-ts-btn:active {
      background: #cbd5e1;
    }
    .sentinel2-ts-slider-wrap {
      flex: 1;
      min-width: 0;
    }
    .sentinel2-ts-slider {
      width: 100%;
      height: 4px;
      -webkit-appearance: none;
      appearance: none;
      background: linear-gradient(90deg, #bbf7d0 0%, #22c55e 100%);
      border-radius: 2px;
      outline: none;
      cursor: pointer;
    }
    .sentinel2-ts-slider::-webkit-slider-thumb {
      -webkit-appearance: none;
      width: 16px;
      height: 16px;
      border-radius: 50%;
      background: #22c55e;
      border: 2px solid #fff;
      box-shadow: 0 1px 6px rgba(34,197,94,0.4);
      cursor: pointer;
      transition: transform 0.15s, box-shadow 0.15s;
    }
    .sentinel2-ts-slider::-webkit-slider-thumb:hover {
      transform: scale(1.15);
      box-shadow: 0 2px 10px rgba(34,197,94,0.5);
    }
    .sentinel2-ts-slider::-moz-range-thumb {
      width: 16px;
      height: 16px;
      border-radius: 50%;
      background: #22c55e;
      border: 2px solid #fff;
      box-shadow: 0 1px 6px rgba(34,197,94,0.4);
      cursor: pointer;
    }
    .sentinel2-ts-info {
      display: flex;
      align-items: center;
      gap: 6px;
      justify-content: center;
    }
    .sentinel2-ts-date {
      font-size: 11px;
      font-weight: 600;
      color: #334155;
      white-space: nowrap;
      text-align: center;
      letter-spacing: -0.01em;
    }
    .sentinel2-ts-time {
      font-size: 10px;
      font-weight: 600;
      color: #64748b;
      white-space: nowrap;
      text-align: center;
      letter-spacing: -0.01em;
    }
    @media (max-width: 768px) {
      .sentinel2-time-slider-wrap {
        width: min(280px, calc(100vw - 32px));
        padding: 4px 8px;
      }
      .sentinel2-ts-btn { width: 24px; height: 24px; }
      .sentinel2-ts-date { font-size: 10px; }
      .sentinel2-ts-time { font-size: 9px; }
    }

    /* ── BMKG Himawari Time Slider ── */
    .bmkg-time-slider-wrap {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
      background: var(--bg-glass);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border: 1px solid var(--border-color);
      border-radius: 16px;
      padding: 6px 12px;
      box-shadow: 0 4px 20px rgba(0,0,0,0.12);
      transition: opacity 0.2s, transform 0.2s;
    }
    .bmkg-ts-controls {
      display: flex;
      align-items: center;
      gap: 6px;
      width: 100%;
    }
    .bmkg-ts-title {
      font-size: 10px;
      font-weight: 700;
      color: var(--text-secondary);
      text-align: center;
      letter-spacing: 0.02em;
    }
    .bmkg-ts-btn {
      display: grid;
      place-items: center;
      width: 28px;
      height: 28px;
      border: none;
      border-radius: 50%;
      background: transparent;
      color: #dc2626;
      cursor: pointer;
      transition: background 0.15s, color 0.15s;
      flex-shrink: 0;
      padding: 0;
    }
    .bmkg-ts-btn:hover {
      background: #fee2e2;
      color: #991b1b;
    }
    .bmkg-ts-btn:active {
      background: #fecaca;
    }
    .bmkg-ts-slider-wrap {
      flex: 1;
      min-width: 0;
    }
    .bmkg-ts-slider {
      width: 100%;
      height: 4px;
      -webkit-appearance: none;
      appearance: none;
      background: linear-gradient(90deg, #fecaca 0%, #dc2626 100%);
      border-radius: 2px;
      outline: none;
      cursor: pointer;
    }
    .bmkg-ts-slider::-webkit-slider-thumb {
      -webkit-appearance: none;
      width: 16px;
      height: 16px;
      border-radius: 50%;
      background: #dc2626;
      border: 2px solid #fff;
      box-shadow: 0 1px 6px rgba(220,38,38,0.4);
      cursor: pointer;
      transition: transform 0.15s, box-shadow 0.15s;
    }
    .bmkg-ts-slider::-webkit-slider-thumb:hover {
      transform: scale(1.15);
      box-shadow: 0 2px 10px rgba(220,38,38,0.5);
    }
    .bmkg-ts-slider::-moz-range-thumb {
      width: 16px;
      height: 16px;
      border-radius: 50%;
      background: #dc2626;
      border: 2px solid #fff;
      box-shadow: 0 1px 6px rgba(220,38,38,0.4);
      cursor: pointer;
    }
    .bmkg-ts-info {
      display: flex;
      align-items: center;
      gap: 6px;
      justify-content: center;
    }
    .bmkg-ts-date {
      font-size: 11px;
      font-weight: 600;
      color: #334155;
      white-space: nowrap;
      text-align: center;
      letter-spacing: -0.01em;
    }
    .bmkg-ts-time {
      font-size: 10px;
      font-weight: 600;
      color: #64748b;
      white-space: nowrap;
      text-align: center;
      letter-spacing: -0.01em;
    }
    @media (max-width: 768px) {
      .bmkg-time-slider-wrap {
        width: min(280px, calc(100vw - 32px));
        padding: 4px 8px;
      }
      .bmkg-ts-btn { width: 24px; height: 24px; }
      .bmkg-ts-date { font-size: 10px; }
      .bmkg-ts-time { font-size: 9px; }
    }

    /* ── Sentinel-1 RTC Time Slider ── */
    .s1rtc-time-slider-wrap {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
      background: var(--bg-glass);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border: 1px solid var(--border-color);
      border-radius: 16px;
      padding: 6px 12px;
      box-shadow: 0 4px 20px rgba(0,0,0,0.12);
      transition: opacity 0.2s, transform 0.2s;
    }
    .s1rtc-ts-controls {
      display: flex;
      align-items: center;
      gap: 6px;
      width: 100%;
    }
    .s1rtc-ts-title {
      font-size: 10px;
      font-weight: 700;
      color: var(--text-secondary);
      text-align: center;
      letter-spacing: 0.02em;
    }
    .s1rtc-ts-btn {
      display: grid;
      place-items: center;
      width: 28px;
      height: 28px;
      border: none;
      border-radius: 50%;
      background: transparent;
      color: #8b5cf6;
      cursor: pointer;
      transition: background 0.15s, color 0.15s;
      flex-shrink: 0;
      padding: 0;
    }
    .s1rtc-ts-btn:hover {
      background: #ede9fe;
      color: #6d28d9;
    }
    .s1rtc-ts-btn:active {
      background: #ddd6fe;
    }
    .s1rtc-ts-slider-wrap {
      flex: 1;
      min-width: 0;
    }
    .s1rtc-ts-slider {
      width: 100%;
      height: 4px;
      -webkit-appearance: none;
      appearance: none;
      background: linear-gradient(90deg, #ede9fe 0%, #8b5cf6 100%);
      border-radius: 2px;
      outline: none;
      cursor: pointer;
    }
    .s1rtc-ts-slider::-webkit-slider-thumb {
      -webkit-appearance: none;
      width: 16px;
      height: 16px;
      border-radius: 50%;
      background: #8b5cf6;
      border: 2px solid #fff;
      box-shadow: 0 1px 6px rgba(139,92,246,0.4);
      cursor: pointer;
      transition: transform 0.15s, box-shadow 0.15s;
    }
    .s1rtc-ts-slider::-webkit-slider-thumb:hover {
      transform: scale(1.15);
      box-shadow: 0 2px 10px rgba(139,92,246,0.5);
    }
    .s1rtc-ts-slider::-moz-range-thumb {
      width: 16px;
      height: 16px;
      border-radius: 50%;
      background: #8b5cf6;
      border: 2px solid #fff;
      box-shadow: 0 1px 6px rgba(139,92,246,0.4);
      cursor: pointer;
    }
    .s1rtc-ts-info {
      display: flex;
      align-items: center;
      gap: 6px;
      justify-content: center;
    }
    .s1rtc-ts-date {
      font-size: 11px;
      font-weight: 600;
      color: #334155;
      white-space: nowrap;
      text-align: center;
      letter-spacing: -0.01em;
    }
    .s1rtc-ts-time {
      font-size: 10px;
      font-weight: 600;
      color: #64748b;
      white-space: nowrap;
      text-align: center;
      letter-spacing: -0.01em;
    }
    @media (max-width: 768px) {
      .s1rtc-time-slider-wrap {
        width: min(280px, calc(100vw - 32px));
        padding: 4px 8px;
      }
      .s1rtc-ts-btn { width: 24px; height: 24px; }
      .s1rtc-ts-date { font-size: 10px; }
      .s1rtc-ts-time { font-size: 9px; }
    }

    .toggle-insight-btn {
      display: grid;
      place-items: center;
      width: 46px !important;
      height: 46px !important;
      margin: 12px !important;
      margin-bottom: 0 !important;
      border: 1px solid rgba(255,255,255,.86) !important;
      border-radius: 15px !important;
      background: linear-gradient(145deg, #ffffff, #e9f7fc) !important;
      color: #0879bf !important;
      font-size: 20px;
      font-weight: 700;
      cursor: pointer;
      box-shadow: 0 4px 12px rgba(8,63,102,.18);
      transition: transform .2s, box-shadow .2s, background .2s;
    }
    .toggle-insight-btn:hover {
      background: linear-gradient(145deg, #ffffff, #d5f3fb) !important;
      box-shadow: inset 0 0 0 1px rgba(8,121,191,.14);
      transform: translateY(-2px);
    }

    .choropleth-legend {
      background: rgba(255,255,255,0.95);
      border-radius: 8px;
      padding: 10px 12px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.15);
      border: 1px solid #e5e7eb;
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      min-width: 200px;
      max-width: 220px;
      margin-bottom: 10px;
    }

    .choropleth-legend-title {
      font-size: 11px;
      font-weight: 700;
      color: #1e293b;
      margin-bottom: 8px;
      line-height: 1.3;
    }

    .choropleth-legend-item {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 4px;
    }

    .choropleth-legend-color {
      width: 16px;
      height: 12px;
      border-radius: 2px;
      flex-shrink: 0;
      border: 1px solid rgba(0,0,0,0.1);
    }

    .choropleth-legend-label {
      font-size: 10px;
      color: #475569;
    }

    .choropleth-legend-unit {
      font-size: 9px;
      color: #94a3b8;
      margin-top: 6px;
      font-style: italic;
    }

    .choropleth-tooltip {
      background: rgba(255,255,255,0.96) !important;
      border: 1px solid #e5e7eb !important;
      border-radius: 8px !important;
      padding: 8px 10px !important;
      box-shadow: 0 4px 12px rgba(0,0,0,0.12) !important;
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    }

    .choropleth-tooltip::before {
      border-top-color: #e5e7eb !important;
    }

    /* ===== GeoPangan Tab ===== */
    #tab-geopangan.active {
      display: flex;
      flex-direction: column;
      flex: 1;
      min-height: 0;
      overflow-x: hidden;
      margin-right: -15px;
      padding-right: 15px;
    }

    /* Panel GeoPangan - dua kartu yang menggantikan nav sumber
    * (PIHPS / SP2KP). Nav itu isinya cuma berpindah antara dua sumber
    * data, bukan berpindah fitur, jadi <details> memberi hasil yang sama
    * tanpa tombol dan tanpa state .active.
    *
    * Aturan .geopangan-source-tab* DIHAPUS, bukan dialiaskan: kelas itu
    * eksklusif milik panel ini. Tapi .cctv-card, .cctv-card-header, dan
    * .cctv-card-body TIDAK ikut dihapus - GeoPulse memakainya 9 kali dan
    * masih membutuhkannya.
    *
    * overflow: hidden aman di sini: panel GeoPangan tidak punya satu pun
    * elemen ber-posisi absolute. Berbeda dari .geowatch-cctv yang memakai
    * visible karena sel Google Maps di dalamnya boleh keluar dari kotak. */
    .geoportal-card,
    .geopangan-card {
      padding: 0;
      overflow: hidden;
      border: 1px solid var(--border-color);
      border-radius: 10px;
      background: var(--bg-card);
    }
    .geoportal-card:not([open]) > .geoportal-card-body,
    .geopangan-card:not([open]) > .geopangan-card-body { display: none; }
    .geoportal-card-body,
    .geopangan-card-body { padding: 12px 13px; }
    /* Jarak 10px antar kartu, sama seperti .geonusa-card + .geonusa-card
    * dan .geofarm-ref. Kartu PERTAMA tidak diberi margin: jarak ke
    * arahnya datang dari margin-bottom paragraf pengantar panel. */
    .geoportal-card + .geoportal-card,
    .geopangan-card + .geopangan-card { margin-top: 10px; }
    .sp2kp-table-title {
      margin: 0;
      color: #24523a;
      font-size: 11px;
      font-weight: 700;
    }
    .sp2kp-table-subtitle {
      margin-top: 2px;
      color: #64748b;
      font-size: 9px;
    }
    .sp2kp-chart-title {
      color: #24523a;
      font-size: 11px;
      font-weight: 700;
      line-height: 1.35;
      overflow: visible;
      text-overflow: clip;
      white-space: normal;
      word-break: break-word;
    }
    .sp2kp-data-table,
    .sp2kp-history-table {
      width: 100%;
      margin-top: 8px;
      border-collapse: collapse;
      font-size: 10px;
    }
    .sp2kp-data-table th,
    .sp2kp-data-table td,
    .sp2kp-history-table th,
    .sp2kp-history-table td {
      padding: 7px 6px;
      border-bottom: 1px solid #e7efe9;
      vertical-align: middle;
      white-space: nowrap;
    }
    .sp2kp-data-table th,
    .sp2kp-history-table th {
      background: #eef7f0;
      color: #24523a;
      font-weight: 600;
    }
    .sp2kp-data-table th:nth-child(3),
    .sp2kp-data-table td:nth-child(3) {
      padding-left: 14px;
      padding-right: 14px;
      text-align: right;
    }
    .sp2kp-data-table th:last-child,
    .sp2kp-data-table td:last-child,
    .sp2kp-history-table th:last-child,
    .sp2kp-history-table td:last-child {
      padding-left: 16px;
      border-left: 1px solid #dbe7e1;
      text-align: right;
    }
    .sp2kp-data-table td:nth-child(2) { white-space: normal; }
    .sp2kp-data-table tbody tr:nth-child(even),
    .sp2kp-history-table tbody tr:nth-child(even) { background: #fbfefc; }

    .geopangan-field {
      margin-bottom: 10px;
    }
    .geopangan-field label {
      display: block;
      font-size: 11px;
      font-weight: 600;
      color: #336583;
      margin-bottom: 3px;
    }
    .geopangan-field select,
    .geopangan-field input[type="date"] {
      width: 100%;
      padding: 8px 10px;
      border: 1px solid #e1ebf2;
      border-radius: 8px;
      background: #fff;
      font-size: 12px;
      color: #234b6d;
      outline: none;
      transition: border-color .2s, box-shadow .2s;
    }
    .geopangan-field select:focus,
    .geopangan-field input[type="date"]:focus {
      border-color: #70b9dd;
      box-shadow: 0 0 0 3px rgba(112,185,221,.15);
    }

    .geopangan-btn {
      width: 100%;
      padding: 10px;
      background: #0b5cab;
      color: #fff;
      border: none;
      border-radius: 8px;
      font-size: 12px;
      font-weight: 600;
      cursor: pointer;
      transition: background .2s;
    }
    .geopangan-btn:hover { background: #094a8e; }
    .geopangan-btn:disabled { background: #9baab6; cursor: not-allowed; }
    .geopangan-reset-btn {
      background: #fff;
      color: #b91c1c;
      border: 1px solid #fecaca;
    }
    .geopangan-reset-btn:hover { background: #fef2f2; color: #991b1b; }
    .geotools-reset-layer-btn {
      display: block;
      box-sizing: border-box;
      min-height: 38px;
      margin: 4px 0 14px;
      padding: 9px 12px;
      line-height: 18px;
    }
    .geotools-weather-reset-btn { margin-bottom: 24px; }

    .geopangan-loading {
      display: flex; align-items: center; gap: 8px;
      padding: 16px; font-size: 12px; color: #668198;
    }
    .geopangan-spinner {
      width: 16px; height: 16px;
      border: 2px solid #e1ebf2; border-top-color: #0b5cab;
      border-radius: 50%;
      animation: geoportal-spin .8s linear infinite;
    }
    .gp-map-loading {
      position: fixed;
      inset: 0;
      z-index: 1200;
      display: none;
      align-items: center;
      justify-content: center;
      pointer-events: none;
    }
    .gp-map-loading.active { display: flex; }
    .gp-map-loading > div {
      display: flex;
      align-items: center;
      gap: 9px;
      padding: 12px 16px;
      border: 1px solid #dcebe6;
      border-radius: 10px;
      background: rgba(255,255,255,.96);
      box-shadow: 0 8px 28px rgba(15,23,42,.18);
      color: #336583;
      font-size: 12px;
      font-weight: 600;
    }

    .geopangan-info {
      display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
      padding: 10px 14px;
      background: #f8fbfe;
      border: 1px solid #e3ecf4;
      border-radius: 8px;
      margin: 10px 0;
      font-size: 11px; color: #336583; font-weight: 600;
    }
    .geopangan-info-sep { color: #cbd5e1; }

    /* ===== GeoPangan regional comparison ===== */
    .gp-comparison {
      margin: 10px 0;
      padding: 13px;
      border: 1px solid #cde9df;
      border-radius: 10px;
      background: linear-gradient(135deg, #f0fdf9, #f8fbfe);
    }
    .gp-comparison-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
    .gp-comparison-head h5 { margin: 0 0 3px; color: #16466c; font-size: 12px; }
    .gp-comparison-head p { margin: 0; color: #668198; font-size: 10px; line-height: 1.4; }
    .gp-comparison-head p b { color: #047857; }
    .gp-comparison-head > span { padding: 3px 6px; border-radius: 4px; color: #047857; background: #d1fae5; font-size: 8px; font-weight: 700; letter-spacing: .05em; white-space: nowrap; }
    .gp-compare-selects { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
    .gp-compare-selects select { width: 100%; min-width: 0; padding: 7px 8px; border: 1px solid #b9ddd0; border-radius: 6px; background: #fff; color: #24546f; font-size: 11px; outline: none; }
    .gp-compare-selects select:focus { border-color: #047857; box-shadow: 0 0 0 3px rgba(4,120,87,.12); }
    .gp-comparison-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; margin-top: 10px; }
    .gp-compare-card { position: relative; display: grid; grid-template-columns: 7px 1fr; column-gap: 6px; padding: 8px; border: 1px solid #e0ece8; border-radius: 7px; background: #fff; min-width: 0; }
    .gp-compare-dot { grid-row: span 3; width: 7px; height: 7px; margin-top: 3px; border-radius: 50%; }
    .gp-compare-card strong { overflow: hidden; color: #1e3a5f; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
    .gp-compare-card span:not(.gp-compare-dot) { display: block; color: #7890a3; font-size: 9px; }
    .gp-compare-card b { margin-top: 4px; color: #047857; font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }
    .gp-compare-change { margin-top: 3px; font-size: 9px; font-style: normal; font-weight: 600; white-space: nowrap; }
    .gp-compare-change.up { color: #15803d; }
    .gp-compare-change.down { color: #dc2626; }
    .gp-compare-change.stable { color: #64748b; }
    .gp-compare-empty { grid-column: 1 / -1; margin: 2px 0 0; color: #668198; font-size: 10px; }
    .gp-comparison-chart { position: relative; height: 180px; margin-top: 10px; padding-top: 8px; border-top: 1px solid #d7eee6; }
    .gp-commodity-comparison { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 11px; padding-top: 10px; border-top: 1px solid #d7eee6; }
    .gp-commodity-comparison strong { display: block; color: #16466c; font-size: 11px; }
    .gp-commodity-comparison small { display: block; margin-top: 2px; color: #668198; font-size: 9px; }
    .gp-commodity-comparison button { flex-shrink: 0; padding: 7px 9px; border: 0; border-radius: 6px; background: #047857; color: #fff; font-size: 10px; font-weight: 600; cursor: pointer; }
    .gp-commodity-comparison button:hover { background: #065f46; }
    .gp-commodity-comparison button:disabled { background: #9baab6; cursor: not-allowed; }
    .gp-commodity-status { min-height: 13px; margin: 6px 0 0; color: #668198; font-size: 9px; }
    .gp-commodity-loading, .gp-commodity-error { display: flex; align-items: center; gap: 6px; margin: 7px 0 0; color: #668198; font-size: 10px; }
    .gp-commodity-error { color: #b91c1c; }
    .gp-commodity-table-scroll { max-height: 260px; margin-top: 6px; overflow: auto; border: 1px solid #dcebe6; border-radius: 6px; background: #fff; }
    .gp-commodity-table { width: 100%; border-collapse: collapse; font-size: 10px; }
    .gp-commodity-table th { position: sticky; top: 0; padding: 7px; background: #e8f6f0; color: #075e49; font-size: 9px; text-align: right; white-space: nowrap; }
    .gp-commodity-table th:first-child { text-align: left; }
    .gp-commodity-table td { padding: 6px 7px; border-top: 1px solid #edf3f1; color: #335b72; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
    .gp-commodity-table td:first-child { color: #1e3a5f; font-weight: 600; text-align: left; }
    @media (max-width: 576px) {
      .gp-comparison { height: 50%; overflow-y: auto; }
      .gp-compare-selects, .gp-comparison-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; }
      .gp-compare-selects select { font-size: 9px; padding: 5px 4px; }
      .gp-comparison-chart { height: 200px; }
      .gp-commodity-comparison { align-items: flex-start; }
      .gp-commodity-comparison button { max-width: 126px; }
    }

    /* ===== GeoPangan Legend ===== */
    .gp-legend {
      background: rgba(255,255,255,.96);
      backdrop-filter: blur(10px);
      border-radius: 12px;
      box-shadow: 0 4px 20px rgba(0,0,0,.12), 0 1px 4px rgba(0,0,0,.06);
      border: 1px solid rgba(255,255,255,.6);
      overflow: hidden;
      min-width: 200px;
    }

    .gp-legend-header {
      padding: 10px 14px 8px;
      background: linear-gradient(135deg, #f0fdf9, #ecfdf5);
      border-bottom: 1px solid #d1fae5;
    }
    .gp-legend-badge {
      display: inline-block;
      padding: 2px 8px; border-radius: 4px;
      font-size: 9px; font-weight: 700; letter-spacing: .08em;
      color: #047857; background: #d1fae5;
      margin-bottom: 6px;
    }
    .gp-legend-info-row {
      display: flex; align-items: center; gap: 5px;
      font-size: 11px; font-weight: 600; color: #173b5d;
      line-height: 1.4;
    }
    .gp-legend-info-row svg { color: #047857; flex-shrink: 0; }

    .gp-legend-body { padding: 10px 14px 12px; }

    .gp-legend-bar {
      display: flex; height: 12px;
      border-radius: 4px; overflow: hidden;
      margin-bottom: 6px;
      box-shadow: inset 0 1px 2px rgba(0,0,0,.08);
    }
    .gp-legend-bar span { flex: 1; }

    .gp-legend-labels {
      display: flex; justify-content: space-between;
      font-size: 11px; font-weight: 600;
    }
    .gp-legend-label-min { color: #047857; }
    .gp-legend-label-max { color: #dc2626; }

    .gp-legend-unit {
      font-size: 9px; color: #94a3b8;
      text-align: center; margin-top: 4px;
      font-weight: 500;
    }

    /* ===== GeoPangan Table ===== */
    /* Base Style */
    .gp-table-wrap { 
      border: 1px solid #e3ecf4; 
      border-radius: 10px; 
      background: #fff; 
      overflow: hidden; 
      margin: 10px 0; 
      width: 100%;
      box-sizing: border-box;
    }
    .gp-table-title { 
      font-size: 12px; 
      font-weight: 700; 
      color: #16466c; 
      padding: 10px 12px; 
      background: #f0f7ff; 
      border-bottom: 1px solid #e3ecf4; 
    }
    .gp-table-title span { color: #047857; font-weight: 600; }
    /* Header Flex Container */
    .gp-table-header { 
      display: flex; 
      align-items: center; 
      justify-content: space-between; 
      gap: 8px; 
      padding: 8px 12px; 
      background: #f8fbfe; 
      border-bottom: 1px solid #e3ecf4; 
      box-sizing: border-box;
      width: 100%;
    }
    .gp-table-search { 
      box-sizing: border-box; 
      flex: 1; 
      width: 100%; 
      min-width: 0; /* Penting agar flex item tidak overflow pada parent */
      padding: 6px 10px; 
      border: 1px solid #d7e2eb; 
      border-radius: 6px; 
      font-size: 11px; 
      color: #336583; 
      outline: none; 
      transition: border-color .2s; 
    }
    .gp-table-search:focus { 
      border-color: #047857; 
    }
    .gp-table-actions { 
      display: flex; 
      align-items: center; 
      gap: 6px; 
      flex-shrink: 0; /* Mencegah tombol gepeng atau terdorong keluar */
    }

    /* --- RESPONSIVE MEDIA QUERY UNTUK MOBILE --- */
    @media (max-width: 576px) {
      .gp-table-header {
        flex-direction: column; /* Ubah ke susunan bertumpuk atas-bawah */
        align-items: stretch;   /* Input & tombol memenuhi lebar kontainer */
        gap: 8px;
      }

    .gp-table-search {
      width: 100%;
    }

    .gp-table-actions {
      justify-content: flex-end; /* Tombol CSV rata kanan di bawah input search */
    }}
    .gp-btn-csv { display: inline-flex; align-items: center; gap: 4px; padding: 6px 10px; border: 1px solid #d7e2eb; border-radius: 6px; background: #fff; color: #336583; font-size: 11px; font-weight: 600; cursor: pointer; white-space: nowrap; transition: background .15s, border-color .15s, color .15s; }
    .gp-btn-csv:hover { background: #ecfdf5; border-color: #047857; color: #047857; }
    .gp-btn-csv svg { flex-shrink: 0; }
    .gp-table-scroll { overflow-x: auto; }
    .gp-table { width: 100%; border-collapse: collapse; font-size: 11px; }
    .gp-table thead th { position: sticky; top: 0; background: #047857; color: #fff; padding: 8px 7px; font-weight: 600; font-size: 10px; text-transform: uppercase; letter-spacing: .3px; white-space: nowrap; cursor: pointer; user-select: none; }
    .gp-table thead th:first-child { border-radius: 0; }
    .gp-table thead th:last-child { border-radius: 0; }
    .gp-table thead th.gp-th-no { width: 30px; text-align: center; cursor: default; }
    .gp-table thead th.gp-th-trend { width: 40px; text-align: center; cursor: default; }
    .gp-table thead th .gp-sort-icon { font-size: 9px; }
    .gp-table tbody tr { transition: background .15s; }
    .gp-table tbody tr:nth-child(even) { background: #f8fbfe; }
    .gp-table tbody tr:hover { background: #ecfdf5; }
    .gp-table td { padding: 7px 8px; border-bottom: 1px solid #eef2f7; }
    .gp-td-no { text-align: center; color: #94a3b8; font-size: 10px; }
    .gp-td-name { font-weight: 600; color: #1e3a5f; white-space: nowrap; }
    .gp-td-price { color: #336583; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
    .gp-td-price-main { font-weight: 700; color: #047857; }
    .gp-td-trend { text-align: center; }
    .gp-trend-up svg { color: #16a34a; }
    .gp-trend-down svg { color: #dc2626; }
    .gp-trend-stable svg { color: #94a3b8; }
    .gp-td-empty { text-align: center; color: #94a3b8; padding: 20px 8px; }
    .gp-pagination { display: flex; align-items: center; justify-content: center; gap: 4px; padding: 8px 12px; border-top: 1px solid #eef2f7; }
    .gp-page-btn { min-width: 28px; height: 26px; padding: 0 6px; border: 1px solid #d7e2eb; border-radius: 6px; background: #fff; color: #336583; font-size: 11px; font-weight: 600; cursor: pointer; transition: background .15s, color .15s; }
    .gp-page-btn:hover { background: #ecfdf5; border-color: #047857; color: #047857; }
    .gp-page-btn.active { background: #047857; color: #fff; border-color: #047857; }
    .gp-page-dots { font-size: 11px; color: #94a3b8; padding: 0 2px; }

    /* ===== SPPG Sebaran Table ===== */
    .sppg-table-wrap { background: #fff; border-radius: 12px; box-shadow: 0 2px 12px rgba(109,40,217,.08); border: 1px solid #e9e5f5; margin-top: 12px; }
    .sppg-table-title { display: flex; align-items: center; gap: 8px; padding: 10px 14px; font-size: 13px; font-weight: 700; color: #1e3a5f; border-bottom: 1px solid #eef2f7; }
    .sppg-table-title span { color: #8b5cf6; font-weight: 600; }
    .sppg-table-title .sppg-badge { display: inline-flex; align-items: center; gap: 4px; background: #8b5cf6; color: #fff; font-size: 9px; font-weight: 700; padding: 2px 8px; border-radius: 10px; text-transform: uppercase; letter-spacing: .4px; }
    .sppg-table-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 14px; border-bottom: 1px solid #eef2f7; flex-wrap: wrap; }
    .sppg-table-actions { display: flex; align-items: center; gap: 6px; }
    .sppg-table-search { width: 180px; padding: 5px 10px; border: 1px solid #d7e2eb; border-radius: 8px; font-size: 11px; outline: none; transition: border-color .15s; }
    .sppg-table-search:focus { border-color: #8b5cf6; box-shadow: 0 0 0 2px rgba(139,92,246,.15); }
    .sppg-table-info { font-size: 10px; color: #8b5cf6; font-weight: 600; }
    .sppg-table-scroll { overflow-x: auto; }
    .sppg-table { width: 100%; border-collapse: collapse; font-size: 11px; }
    .sppg-table thead th { position: sticky; top: 0; background: #8b5cf6; color: #fff; padding: 8px 7px; font-weight: 600; font-size: 10px; text-transform: uppercase; letter-spacing: .3px; white-space: nowrap; cursor: pointer; user-select: none; }
    .sppg-table thead th:first-child { border-radius: 0; }
    .sppg-table thead th:last-child { border-radius: 0; }
    .sppg-table thead th.sppg-th-no { width: 30px; text-align: center; cursor: default; }
    .sppg-table thead th .gp-sort-icon { font-size: 9px; }
    .sppg-table tbody tr { transition: background .15s; }
    .sppg-table tbody tr:nth-child(even) { background: #faf8ff; }
    .sppg-table tbody tr:hover { background: #f3efff; }
    .sppg-table td { padding: 7px 8px; border-bottom: 1px solid #eef2f7; }
    .sppg-td-no { text-align: center; color: #94a3b8; font-size: 10px; }
    .sppg-td-name { font-weight: 600; color: #1e3a5f; white-space: nowrap; }
    .sppg-td-kode { color: #6d28d9; font-family: monospace; font-size: 10px; white-space: nowrap; }
    .sppg-td-prov { color: #8b5cf6; font-weight: 600; }
    .sppg-td-kab { color: #336583; white-space: nowrap; }
    .sppg-td-kec { color: #64748b; }
    .sppg-td-alamat { color: #475569; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .sppg-td-tgl { color: #059669; font-size: 10px; white-space: nowrap; }
    .sppg-td-empty { text-align: center; color: #94a3b8; padding: 20px 8px; }

    /* ===== SPPG District Choropleth ===== */
    .sppgd-tooltip { background: #1e293b; color: #fff; border: none; border-radius: 8px; padding: 6px 10px; font-size: 12px; box-shadow: 0 4px 12px rgba(0,0,0,.25); }
    .sppgd-tooltip::before { border-top-color: #1e293b; }

    .sppgd-leaflet-popup { max-width: 340px !important; }
    .sppgd-leaflet-popup .leaflet-popup-content-wrapper { border-radius: 14px; padding: 0; overflow: hidden; box-shadow: 0 8px 32px rgba(139,92,246,.2); border: none; max-height: 55vh; overflow-x: hidden; }
    .sppgd-leaflet-popup .leaflet-popup-content { width: auto !important; margin: 0; }

    .sppgd-popup { width: 320px; font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; color: #1e293b; background: #fff; display: flex; flex-direction: column; }
    .sppgd-popup-header { padding: 16px; background: linear-gradient(135deg, #7c3aed, #a855f7); color: #fff; }
    .sppgd-popup-badge { display: inline-block; padding: 3px 10px; border-radius: 10px; font-size: 11px; font-weight: 700; margin-bottom: 6px; }
    .sppgd-popup-title { font-size: 15px; font-weight: 700; line-height: 1.3; }
    .sppgd-popup-subtitle { font-size: 11px; opacity: .85; margin-top: 2px; }
    .sppgd-popup-body { padding: 0; max-height: 200px; overflow-y: auto; }
    .sppgd-popup-list { padding: 8px 16px; }
    .sppgd-popup-item { padding: 6px 0; border-bottom: 1px solid #f1f5f9; }
    .sppgd-popup-item:last-child { border-bottom: none; }
    .sppgd-popup-item-name { display: block; font-size: 12px; font-weight: 600; color: #1e3a5f; }
    .sppgd-popup-item-sub { display: block; font-size: 10px; color: #64748b; margin-top: 1px; }
    .sppgd-popup-more { text-align: center; font-size: 11px; color: #8b5cf6; padding: 8px; font-weight: 600; }
    .sppgd-popup-empty { text-align: center; color: #94a3b8; padding: 20px; font-size: 12px; }
    .sppgd-popup-footer { padding: 10px 16px 14px; border-top: 1px solid #f1f5f9; }
    .sppgd-popup-source { font-size: 9px; color: #94a3b8; text-align: center; }


    .sppgd-table-panel { position: absolute; bottom: 60px; left: 10px; right: 10px; z-index: 1000; max-height: 45vh; background: #fff; border-radius: 12px; box-shadow: 0 4px 24px rgba(0,0,0,.15); overflow: hidden; }
    .sppgd-table-wrap { display: flex; flex-direction: column; max-height: 45vh; }
    .sppgd-table-title { display: flex; align-items: center; gap: 8px; padding: 10px 14px; font-size: 13px; font-weight: 700; color: #1e3a5f; border-bottom: 1px solid #eef2f7; }
    .sppgd-table-title span { color: #8b5cf6; font-weight: 600; }
    .sppgd-badge { display: inline-flex; align-items: center; background: #8b5cf6; color: #fff; font-size: 9px; font-weight: 700; padding: 2px 8px; border-radius: 10px; text-transform: uppercase; letter-spacing: .4px; }
    .sppgd-table-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 14px; border-bottom: 1px solid #eef2f7; flex-wrap: wrap; }
    .sppgd-table-actions { display: flex; align-items: center; gap: 6px; }
    .sppgd-table-search { width: 180px; padding: 5px 10px; border: 1px solid #d7e2eb; border-radius: 8px; font-size: 11px; outline: none; transition: border-color .15s; }
    .sppgd-table-search:focus { border-color: #8b5cf6; box-shadow: 0 0 0 2px rgba(139,92,246,.15); }
    .sppgd-btn-csv { display: inline-flex; align-items: center; gap: 4px; padding: 5px 10px; background: #10b981; color: #fff; border: none; border-radius: 6px; font-size: 11px; font-weight: 600; cursor: pointer; }
    .sppgd-btn-csv:hover { background: #059669; }
    .sppgd-btn-close { padding: 4px 8px; background: #ef4444; color: #fff; border: none; border-radius: 6px; font-size: 14px; font-weight: 700; cursor: pointer; line-height: 1; }
    .sppgd-btn-close:hover { background: #dc2626; }
    .sppgd-table-scroll { overflow-x: auto; flex: 1; }
    .sppgd-table { width: 100%; border-collapse: collapse; font-size: 11px; }
    .sppgd-table thead th { position: sticky; top: 0; background: #8b5cf6; color: #fff; padding: 8px 7px; font-weight: 600; font-size: 10px; text-transform: uppercase; letter-spacing: .3px; white-space: nowrap; cursor: pointer; user-select: none; }
    .sppgd-th-no { width: 30px; text-align: center; cursor: default !important; }
    .sppgd-table tbody tr { transition: background .15s; cursor: pointer; }
    .sppgd-table tbody tr:nth-child(even) { background: #faf8ff; }
    .sppgd-table tbody tr:hover { background: #f3efff; }
    .sppgd-table td { padding: 7px 8px; border-bottom: 1px solid #eef2f7; }
    .sppgd-td-empty { text-align: center; color: #94a3b8; padding: 20px 8px; }
    .sppgd-pagination { display: flex; align-items: center; gap: 4px; padding: 8px 14px; border-top: 1px solid #eef2f7; flex-wrap: wrap; }
    .sppgd-pag-btn { padding: 4px 10px; background: #f1f5f9; border: 1px solid #d7e2eb; border-radius: 6px; font-size: 11px; cursor: pointer; transition: all .15s; }
    .sppgd-pag-btn:hover { background: #e2e8f0; }
    .sppgd-pag-btn:disabled { opacity: .4; cursor: default; }
    .sppgd-pag-active { background: #8b5cf6 !important; color: #fff !important; border-color: #8b5cf6 !important; }
    .sppgd-pag-info { font-size: 10px; color: #64748b; margin-left: auto; }
    .sppgd-marker-popup { font-size: 12px; }

    /* ===== GeoPangan Popup ===== */
    .gp-leaflet-popup { max-width: 320px !important; }
    .gp-leaflet-popup .leaflet-popup-content-wrapper {
      border-radius: 14px; padding: 0; overflow: hidden;
      box-shadow: 0 8px 32px rgba(16, 163, 127, .2); border: none;
      max-height: 60vh; overflow-x: hidden;
    }
    .gp-leaflet-popup .leaflet-popup-content { width: auto !important; margin: 0; }
    .gp-leaflet-popup .leaflet-popup-tip { box-shadow: 4px 4px 12px rgba(16, 163, 127, .15); }

    .gp-popup { width: 320px; font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; color: #1e293b; background: #fff; max-height: 40vh; overflow-x: hidden; overflow-y: auto; display: flex; flex-direction: column; }

    .gp-popup-head {
      position: relative; padding: 18px 16px 14px;
      color: #fff; overflow: hidden; flex-shrink: 0;
      background: linear-gradient(135deg, #047857 0%, #10a37f 50%, #34d399 100%);
    }
    .gp-popup-head::before {
      content: ''; position: absolute; top: -30px; right: -30px;
      width: 90px; height: 90px;
      background: rgba(255,255,255,.1); border-radius: 50%;
    }
    .gp-popup-head::after {
      content: ''; position: absolute; bottom: -20px; left: -15px;
      width: 60px; height: 60px;
      background: rgba(255,255,255,.06); border-radius: 50%;
    }

    .gp-popup-badge {
      display: inline-flex; align-items: center; gap: 5px;
      padding: 3px 9px; border-radius: 20px;
      font-size: 9px; font-weight: 700; letter-spacing: .06em;
      text-transform: uppercase; background: rgba(255,255,255,.2);
      color: #fff; margin-bottom: 8px; backdrop-filter: blur(4px);
    }
    .gp-popup-badge-dot { width: 6px; height: 6px; border-radius: 50%; background: #bbf7d0; }

    .gp-popup-head strong {
      display: block; font-size: 16px; font-weight: 700; line-height: 1.2;
      letter-spacing: -.01em; position: relative; z-index: 1;
      text-shadow: 0 1px 2px rgba(0,0,0,.1);
    }
    .gp-popup-head > span {
      display: block; margin-top: 3px; font-size: 11px; line-height: 1.4;
      color: rgba(255,255,255,.85); position: relative; z-index: 1;
    }

    .gp-popup-body { padding: 0; overflow-x: hidden; overflow-y: auto; flex: 1 1 auto; }

    .gp-popup-price {
      display: flex; align-items: center; gap: 10px;
      padding: 14px 16px; background: linear-gradient(180deg, #f0fdf9 0%, #fff 100%);
      border-bottom: 1px solid #d1fae5; flex-shrink: 0;
    }
    .gp-popup-price-icon {
      display: flex; align-items: center; justify-content: center;
      width: 36px; height: 36px; border-radius: 10px;
      background: linear-gradient(135deg, #047857, #10a37f);
      color: #fff; flex-shrink: 0;
    }
    .gp-popup-price-label { display: block; font-size: 10px; color: #668198; font-weight: 500; }
    .gp-popup-price-value { display: block; font-size: 18px; font-weight: 700; color: #047857; letter-spacing: -.02em; line-height: 1.3; }

    .gp-popup-meta { padding: 10px 16px 14px; display: grid; gap: 10px; flex-shrink: 0; }
    .gp-popup-meta-row { display: flex; align-items: center; gap: 10px; }
    .gp-popup-meta-icon {
      display: flex; align-items: center; justify-content: center;
      width: 28px; height: 28px; border-radius: 7px;
      background: #f0fdf9; color: #047857; flex-shrink: 0;
    }
    .gp-popup-meta-label { display: block; font-size: 10px; color: #668198; font-weight: 500; }
    .gp-popup-meta-value { display: block; font-size: 12px; font-weight: 600; color: #173b5d; line-height: 1.4; }

    .gp-popup-chart { border-top: 1px solid #d1fae5; padding: 10px 16px 8px; }
    .gp-popup-chart-head { display: flex; align-items: center; gap: 5px; margin-bottom: 6px; color: #047857; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .3px; }
    .gp-popup-chart-head svg { stroke: #10a37f; }
    .gp-popup-chart-wrap { position: relative; width: 100%; height: 140px; }

    .gp-popup-chart--inflasi { border-top: 1px solid #fef3c7; padding-bottom: 12px; }
    .gp-popup-chart--inflasi .gp-popup-chart-head { color: #92400e; }
    .gp-popup-chart--inflasi .gp-popup-chart-head svg { stroke: #f59e0b; }


    /* Map Insight Cards */
    .map-insight-cards {
      position: absolute;
      top: 70px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 999;
      display: none;
      gap: 8px;
      width: min(420px, calc(100% - 32px));
      pointer-events: auto;
    }
    .map-insight-card {
      flex: 1;
      min-width: 0;
      background: rgba(255,255,255,0.92);
      backdrop-filter: blur(20px) saturate(180%);
      -webkit-backdrop-filter: blur(20px) saturate(180%);
      border: 1px solid rgba(255,255,255,0.6);
      border-radius: 14px;
      box-shadow: 0 4px 20px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.06);
      overflow: hidden;
      transition: transform 0.2s, box-shadow 0.2s, background 0.2s;
    }
    .map-insight-card:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 32px rgba(0,0,0,0.16), 0 4px 12px rgba(0,0,0,0.08);
      background: rgba(255,255,255,0.98);
    }
    .insight-card-header {
      display: flex;
      align-items: center;
      gap: 4px;
      padding: 6px 10px 2px;
    }
    .insight-card-icon { font-size: 12px; }
    .insight-card-title {
      font-size: 10px;
      font-weight: 700;
      color: #0b4da2;
      letter-spacing: 0.04em;
      text-transform: uppercase;
    }
    .insight-card-body {
      padding: 0 10px 6px;
      font-size: 11px;
      color: #0b4da2;
      line-height: 1.4;
    }
    .insight-loading {
      font-size: 10px;
      color: #54708d;
      padding: 2px 0;
    }
    .insight-weather-main {
      display: flex;
      align-items: stretch;
      gap: 8px;
    }
    .insight-weather-left {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-width: 60px;
      padding-right: 8px;
      border-right: 1px solid #e2e8f0;
    }
    .insight-weather-temp {
      font-size: 22px;
      font-weight: 800;
      color: #0b4da2;
      line-height: 1;
    }
    .insight-weather-icon {
      width: 28px;
      height: 28px;
      margin-top: 2px;
    }
    .insight-weather-right {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 2px;
      min-width: 0;
    }
    .insight-weather-desc {
      font-size: 11px;
      color: #334155;
      font-weight: 600;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .insight-weather-detail {
      font-size: 10px;
      color: #54708d;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .insight-quake-main {
      display: flex;
      align-items: stretch;
      gap: 8px;
    }
    .insight-quake-left {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-width: 50px;
      padding-right: 8px;
      border-right: 1px solid #e2e8f0;
    }
    .insight-quake-mag {
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
      font-weight: 800;
      line-height: 1;
    }
    .insight-quake-label {
      font-size: 9px;
      color: #54708d;
      text-transform: uppercase;
      letter-spacing: 0.05em;
    }
    .insight-quake-right {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 2px;
      min-width: 0;
    }
    .insight-quake-place {
      font-size: 11px;
      color: #1e293b;
      font-weight: 600;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .insight-quake-meta {
      font-size: 10px;
      color: #54708d;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .insight-quake-none {
      font-size: 10px;
      color: #10b981;
      font-weight: 600;
    }

    /* ── Quick Layer Toolbar ── */
    .quick-layer-bar {
      position: absolute;
      top: 68px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 999;
      display: flex;
      gap: 4px;
      padding: 4px;
      width: min(420px, calc(100% - 32px));
      overflow-x: auto;
      overflow-y: hidden;
      scrollbar-width: thin;
      scrollbar-color: #9fb3c8 transparent;
    }
    .quick-layer-bar::-webkit-scrollbar { height: 6px; }
    .quick-layer-bar::-webkit-scrollbar-thumb { border-radius: 999px; background: #9fb3c8; }
    .minimize-all-btn {
      display: none;
      position: absolute;
      top: 108px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 999;
      align-items: center;
      gap: 4px;
      padding: 4px 10px;
      border: 1px solid var(--border-color);
      border-radius: 14px;
      background: var(--bg-card);
      color: var(--text-secondary);
      font-size: 9px;
      font-weight: 600;
      cursor: pointer;
      transition: all .15s;
      white-space: nowrap;
      box-shadow: 0 2px 8px rgba(0,0,0,.1);
    }
    .minimize-all-btn:hover { background: #e2e8f0; color: #1e293b; border-color: #94a3b8; }
    .minimize-all-btn svg { flex-shrink: 0; }
    .ql-btn {
      display: flex;
      align-items: center;
      gap: 5px;
      padding: 6px 10px;
      border: 1px solid var(--border-color);
      border-radius: 20px;
      background: var(--bg-card);
      color: var(--text-secondary);
      font-size: 10px;
      font-weight: 600;
      cursor: pointer;
      transition: all .15s;
      white-space: nowrap;
      flex-shrink: 0;
      font-family: 'Google Sans', 'Segoe UI', sans-serif;
      box-shadow: 0 1px 4px rgba(0,0,0,.06);
      position: relative;
    }
    .ql-btn svg { flex-shrink: 0; stroke: var(--text-secondary); }
    .ql-btn:hover { border-color: var(--accent); background: var(--bg-card-hover); }
    .ql-btn.active { color: #fff; border-color: transparent; }
    #qlHotspot.active      { background: #dc2626; }
    #qlTransjakarta.active { background: #2563eb; }
    #qlPm25.active        { background: #7c3aed; }
    #qlWind.active        { background: #0ea5e9; }
    #qlHujan.active       { background: #06b6d4; }
    #qlRadar.active       { background: #059669; }
    #qlProvinsi.active    { background: #0d9488; }
    #qlSstAnomali.active  { background: #0284c7; }

    .radar-timestamp {
      position: absolute;
      top: 108px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 999;
      display: flex;
      align-items: center;
      gap: 5px;
      padding: 3px 10px;
      background: rgba(5,150,105,0.9);
      color: #fff;
      border-radius: 12px;
      font-size: 10px;
      font-weight: 600;
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      box-shadow: 0 1px 4px rgba(0,0,0,0.18);
      white-space: nowrap;
    }
    #qlEcmwfFire.active { background: #f97316; }
    #qlViirsNoaa20.active { background: #dc2626; }
    #qlKonsesi.active   { background: #ea580c; }
    #qlPelabuhan.active { background: #0284c7; }
    #qlPerairan.active  { background: #0891b2; }
    #qlGambut.active    { background: #6d4c41; }
    #qlSawit.active     { background: #16a34a; }
    #qlGunungApi.active { background: #b91c1c; }

    /* quick layer badge */
    .ql-badge {
      position: absolute;
      top: -4px;
      right: -6px;
      padding: 1px 4px;
      font-size: 7px;
      font-weight: 700;
      color: #fff;
      background: #dc2626;
      border-radius: 6px;
      line-height: 1.2;
      letter-spacing: .02em;
    }
    .ql-btn { position: relative; }

    /* ── AI Trigger Button (Search Bar) ── */
    .ai-trigger-btn {
      display: flex; align-items: center; justify-content: center;
      width: 28px; height: 28px; border: 0; border-radius: 50%; flex-shrink: 0;
      background: rgba(168,85,247,.1); color: #a855f7; cursor: pointer;
      transition: background .15s, transform .15s;
    }
    .ai-trigger-btn:hover { background: rgba(168,85,247,.2); transform: scale(1.08); }
    .ai-trigger-btn.active { background: #a855f7; color: #fff; }

    /* ── AI Analysis Sheet ── */
    #ai-sheet {
      position: fixed;
      top: 120px; right: 12px; bottom: 12px;
      width: min(380px, calc(100vw - 106px));
      border-radius: 16px;
      z-index: 1100;
      background: var(--bg-primary);
      box-shadow: var(--shadow-sheet);
      transform: translateX(calc(100% + 24px));
      visibility: hidden;
      transition: transform .3s ease-in-out, visibility .3s;
      display: flex; flex-direction: column;
      overflow: hidden;
      color: var(--text-primary);
    }
    #ai-sheet.ais-sheet-open { transform: translateX(0); visibility: visible; }
    #ai-sheet .ais-sheet-handle { display: none; }
    #ai-sheet .ais-sheet-head {
      display: flex; align-items: center; justify-content: space-between;
      padding: 14px 16px 10px;
      border-bottom: 1px solid var(--border-color);
      flex-shrink: 0;
    }
    #ai-sheet .ais-sheet-title {
      display: flex; align-items: center; gap: 6px;
      color: var(--text-primary); font-size: 13px; font-weight: 700;
    }
    #ai-sheet .ais-sheet-title svg { color: #a855f7; }
    .ais-beta-badge {
      display: inline-block; padding: 1px 6px; margin-left: 4px;
      font-size: 9px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase;
      background: linear-gradient(135deg, #a855f7, #6366f1); color: #fff;
      border-radius: 4px; vertical-align: middle; line-height: 1.4;
    }
    #ai-sheet .ais-sheet-actions { display: flex; align-items: center; gap: 6px; }
    #ai-sheet .ais-sheet-minimize,
    #ai-sheet .ais-sheet-close {
      display: grid; width: 28px; height: 28px; place-items: center;
      border: 0; border-radius: 50%;
      background: var(--bg-tertiary); color: var(--text-tertiary);
      cursor: pointer; transition: background .15s;
    }
    #ai-sheet .ais-sheet-minimize:hover,
    #ai-sheet .ais-sheet-close:hover { background: var(--border-color); }
    #ai-sheet .ais-sheet-body {
      flex: 1 1 auto; min-height: 0; overflow: hidden;
      display: flex; flex-direction: column;
      padding: 12px 16px 16px;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: thin;
      scrollbar-color: var(--scrollbar-thumb) transparent;
    }

    /* Chat Messages */
    .ais-chat-messages {
      flex: 1 1 auto; min-height: 0; overflow-y: auto;
      padding: 12px 0;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: thin;
      scrollbar-color: var(--scrollbar-thumb) transparent;
      display: flex; flex-direction: column; gap: 10px;
    }
    .ais-msg { display: flex; gap: 8px; padding: 0 4px; }
    .ais-msg-user { flex-direction: row-reverse; }
    .ais-msg-avatar {
      width: 30px; height: 30px; border-radius: 9px;
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
    }
    .ais-msg-avatar svg { width: 17px; height: 17px; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
    .ais-msg-ai .ais-msg-avatar {
      background: linear-gradient(135deg, #a855f7, #6366f1);
      box-shadow: 0 2px 10px rgba(168,85,247,.3);
    }
    .ais-msg-user .ais-msg-avatar {
      background: linear-gradient(135deg, #6366f1, #3b82f6);
      box-shadow: 0 2px 10px rgba(99,102,241,.25);
    }
    .ais-msg-content {
      max-width: 80%; padding: 8px 12px;
      border-radius: 14px; font-size: 12px; line-height: 1.55;
      color: var(--text-primary);
    }
    .ais-msg-ai .ais-msg-content {
      background: var(--bg-card); border: 1px solid var(--border-color);
      border-top-left-radius: 4px;
    }
    .ais-msg-user .ais-msg-content {
      background: linear-gradient(135deg, #a855f7, #7c3aed);
      color: #fff;
      border-top-right-radius: 4px;
    }
    .ais-msg-content h2, .ais-msg-content h3, .ais-msg-content h4 { margin: 8px 0 4px; }
    .ais-msg-content h2 { font-size: 13px; }
    .ais-msg-content h3 { font-size: 12px; }
    .ais-msg-content strong { font-weight: 700; }
    .ais-list-item { padding: 1px 0 1px 6px; }

    /* Layer Recommendation Chips */
    .ais-layer-rec {
      display: inline-flex; align-items: center; gap: 5px;
      padding: 4px 10px; margin: 2px 0;
      border: 1px solid var(--border-color);
      border-radius: 8px; background: var(--bg-card);
      font-size: 11px; color: var(--text-secondary);
      cursor: pointer; transition: all .15s;
      font-family: inherit; line-height: 1.3;
    }
    .ais-layer-rec:hover { border-color: #a855f7; background: rgba(168,85,247,.06); color: #a855f7; }
    .ais-layer-rec::before {
      content: '';
      width: 12px; height: 12px; border-radius: 3px;
      border: 1.5px solid var(--text-tertiary);
      background: transparent; flex-shrink: 0;
      transition: all .15s;
    }
    .ais-layer-rec:hover::before { border-color: #a855f7; }
    .ais-layer-rec-active::before {
      background: #a855f7; border-color: #a855f7;
    }
    .ais-layer-rec-active { color: #a855f7; border-color: #a855f7; background: rgba(168,85,247,.08); }
    .ais-rec-grid {
      display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px;
    }
    .ais-empty-hint {
      font-size: 11px; color: var(--text-tertiary);
      margin-top: 4px; font-style: italic;
    }

    .ais-welcome-btns {
      display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px;
    }
    .ais-welcome-btn {
      display: inline-flex; align-items: center; gap: 4px;
      padding: 6px 12px; border-radius: 18px;
      border: 1px solid var(--border-color);
      background: var(--bg-card); color: var(--text-primary);
      font-size: 12px; font-weight: 500; cursor: pointer;
      transition: all .15s ease; white-space: nowrap;
    }
    .ais-welcome-btn:hover {
      background: var(--accent); color: #fff;
      border-color: var(--accent); transform: translateY(-1px);
      box-shadow: 0 2px 6px rgba(0,0,0,.15);
    }
    .ais-hint-modern {
      font-size: 11px; color: var(--text-tertiary);
      margin-top: 6px; padding: 6px 10px;
      background: linear-gradient(135deg, rgba(99,102,241,.06), rgba(168,85,247,.06));
      border-radius: 8px; text-align: center;
      border: 1px dashed var(--border-color);
    }

    /* Typing Indicator */
    .ais-typing { display: flex; align-items: center; gap: 10px; }
    .ais-typing-dots {
      display: flex; align-items: center; gap: 4px;
      padding: 10px 14px;
      background: var(--bg-card); border: 1px solid var(--border-color);
      border-radius: 14px; border-top-left-radius: 4px;
    }
    .ais-typing-dots span {
      width: 6px; height: 6px; border-radius: 50%;
      background: var(--text-tertiary);
      animation: ais-dot-bounce 1.4s infinite ease-in-out;
    }
    .ais-typing-dots span:nth-child(2) { animation-delay: .2s; }
    .ais-typing-dots span:nth-child(3) { animation-delay: .4s; }
    @keyframes ais-dot-bounce {
      0%, 80%, 100% { transform: translateY(0); opacity: .4; }
      40% { transform: translateY(-6px); opacity: 1; }
    }
    .ais-msg-typing-indicator {
      display: inline-flex; align-items: center; gap: 6px;
      padding: 10px 14px;
      background: var(--bg-card); border: 1px solid var(--border-color);
      border-radius: 14px; border-top-left-radius: 4px;
      font-size: 12px; color: var(--text-secondary);
    }
    .ais-msg-typing-indicator .ais-typing-dots {
      padding: 0; background: none; border: none; border-radius: 0;
    }

    .ais-msg-typing .ais-msg-content { overflow: hidden; }
    .ais-msg-typing .ais-msg-cursor {
      display: inline-block; width: 2px; height: 13px;
      background: #a855f7; margin-left: 1px; vertical-align: middle;
      animation: ais-cursor-blink .8s step-end infinite;
    }
    @keyframes ais-cursor-blink {
      0%, 100% { opacity: 1; }
      50% { opacity: 0; }
    }

    .ais-chat-status { text-align: center; font-size: 11px; color: var(--text-tertiary); padding: 8px; }

    /* Quick Actions */
    /* Chat Input */
    .ais-chat-input-area {
      display: flex; align-items: center; gap: 6px;
      padding: 8px 0; flex-shrink: 0;
    }
    .ais-chat-input {
      flex: 1; padding: 8px 14px;
      border: 1px solid var(--border-color); border-radius: 20px;
      background: var(--bg-card); color: var(--text-primary);
      font-size: 12px; font-family: inherit;
      outline: none; transition: border-color .15s;
    }
    .ais-chat-input:focus { border-color: #a855f7; }
    .ais-chat-input::placeholder { color: var(--text-muted); }
    .ais-chat-send {
      width: 34px; height: 34px; border-radius: 50%;
      border: 0; background: #a855f7; color: #fff;
      display: flex; align-items: center; justify-content: center;
      cursor: pointer; transition: background .15s; flex-shrink: 0;
    }
    .ais-chat-send:hover { background: #9333ea; }
    .ais-chat-footer { display: flex; justify-content: flex-end; padding: 0 0 4px; flex-shrink: 0; }
    .ais-clear-chat {
      font-size: 10px; color: var(--text-tertiary); background: none;
      border: 0; cursor: pointer; font-family: inherit;
    }
    .ais-clear-chat:hover { color: #dc2626; }

    /* Minimized state. Angka 68px & z-index: lihat catatan "Pita bawah
       tengah" di blok .zoom-control-wrap. */
    #ai-sheet.ais-sheet-minimized {
      top: auto; right: auto; bottom: 68px; left: 50%;
      width: min(220px, calc(100vw - 48px));
      height: 36px;
      border-radius: 18px;
      transform: translateX(-50%);
      visibility: visible;
      z-index: 100;
      border: 1px solid var(--border-color);
      background: var(--bg-glass-light);
      backdrop-filter: blur(16px) saturate(180%);
      -webkit-backdrop-filter: blur(16px) saturate(180%);
      box-shadow: 0 4px 16px rgba(0,0,0,.08);
    }
    #ai-sheet.ais-sheet-minimized .ais-sheet-handle,
    #ai-sheet.ais-sheet-minimized .ais-sheet-body { display: none; }
    #ai-sheet.ais-sheet-minimized .ais-sheet-head {
      min-height: 36px; box-sizing: border-box;
      /* 4px, bukan 6px: tombol 28px harus muat di chip 36px. */
      padding: 4px 14px; border-bottom: 0;
    }
    #ai-sheet.ais-sheet-minimized .ais-sheet-title {
      cursor: pointer; font-size: 11px;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }

    /* SIDEBAR KIRI */
    #sidebar-left {
      position: absolute;
      top: 0;
      left: 0;
      width: 360px;
      height: 100%;
      background: var(--bg-glass);
      border-right: 1px solid var(--border-color);
      display: flex;
      flex-direction: column;
      box-shadow: 10px 0 32px rgba(15, 51, 78, .12);
      z-index: 1000;
      transition: transform .3s ease-in-out, width .3s ease-in-out;
    }

    #sidebar-left.collapsed {
      transform: translateX(-100%);
    }
    #sidebar-left.sidebar-force-hidden { transform: translateX(-100%); }
    #sidebar-left.sidebar-force-hidden .toggle-sidebar-btn { display: none !important; }

    /* Tombol Toggle Sidebar Kiri */
    .toggle-sidebar-btn {
      display: none !important;
      position: absolute;
      bottom: 72vh;
      right: -30px;
      width: 30px;
      height: 64px;
      background: linear-gradient(180deg, #0a73b8, #075890);
      color: white;
      border: none;
      border-radius: 0 10px 10px 0;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      font-weight: bold;
      box-shadow: 4px 4px 12px rgba(15, 51, 78, .18);
      z-index: 1001;
    }

    .sidebar-header {
      padding: 16px 18px;
      color: #fff;
      background: radial-gradient(circle at 92% 0%, rgba(43,190,205,.55), transparent 36%), linear-gradient(135deg, #082f57, #0a6da9 70%, #09849c);
      border-bottom: 1px solid rgba(255,255,255,.16);
      display: flex;
      align-items: center;
      justify-content: space-between;
      overflow: hidden;
    }

    .ruangkita-brand {
      display: flex;
      align-items: center;
      gap: 10px;
      min-width: 0;
    }

    .ruangkita-mark {
      display: grid;
      grid-template-columns: repeat(2, 12px);
      grid-template-rows: repeat(2, 12px);
      gap: 3px;
      padding: 5px;
      border: 1px solid rgba(255,255,255,.55);
      border-radius: 10px;
      background: rgba(3, 48, 89, .25);
      transform: rotate(-8deg);
    }

    .ruangkita-mark i { border-radius: 3px; background: #fff; }
    .ruangkita-mark i:nth-child(2) { background: #f3bf28; }
    .ruangkita-mark i:nth-child(3) { background: #60d9e3; }
    .ruangkita-mark i:nth-child(4) { background: #bce6ed; }

    .ruangkita-name { display: grid; line-height: 1; letter-spacing: .04em; }
    .ruangkita-name strong { font-size: 19px; font-weight: 800; letter-spacing: .02em; }
    .ruangkita-name strong span { color: #f5c62d; }
    .ruangkita-name small { margin-top: 4px; color: rgba(255,255,255,.82); font-size: 8px; font-weight: 700; letter-spacing: .12em; }

    .tab-menu {
      display: flex;
      width: 100%;
      flex-wrap: wrap;
      background: var(--bg-secondary);
      border-bottom: 1px solid var(--border-color);
    }

    .tab-btn {
      flex: 0 0 auto;
      display: inline-flex;
      align-items: center;
      gap: 5px;
      min-width: max-content;
      padding: 10px 12px;
      border: none;
      background: transparent;
      font-size: 11px;
      white-space: nowrap;
      font-weight: 600;
      color: var(--text-tertiary);
      cursor: pointer;
      transition: all 0.2s ease;
    }
    .tab-btn svg { flex-shrink: 0; opacity: .75; transition: opacity .2s, transform .2s; stroke: var(--text-tertiary); }
    .tab-btn:hover svg, .tab-btn.active svg { opacity: 1; }
    .tab-btn:hover svg { transform: scale(1.08); }

    .tab-btn.active {
      color: var(--accent);
      background: var(--bg-primary);
    }

    .sidebar-content {
      padding: 16px;
      flex: 1;
      overflow-y: auto;
      font-size: 13px;
      display: flex;
      flex-direction: column;
      min-height: 0;
    }
    .sidebar-header { order: 0; flex-shrink: 0; }
    .app-banner { order: 1; flex-shrink: 0; }
    .sidebar-nav-toggle {
      order: 2;
      display: flex;
      align-items: center;
      width: calc(100% - 20px);
      gap: 8px;
      margin: 4px 10px;
      padding: 10px 12px;
      border: 1px solid var(--border-color);
      border-radius: 8px;
      background: var(--bg-secondary);
      color: var(--text-secondary);
      cursor: pointer;
      font-size: 12px;
      font-weight: 700;
      letter-spacing: .03em;
      text-align: left;
      flex-shrink: 0;
    }
    .sidebar-nav-toggle:hover { border-color: var(--accent); background: var(--bg-tertiary); color: var(--accent); }
    .sidebar-nav-toggle-icon { display: grid; place-items: center; }
    .sidebar-nav-toggle-icon svg, .sidebar-nav-chevron { width: 17px; height: 17px; }
    .sidebar-nav-chevron { margin-left: auto; transition: transform .2s ease; }
    #sidebar-left.menu-collapsed .sidebar-nav-chevron { transform: rotate(-90deg); }
    #sidebar-left.menu-collapsed .tab-menu { display: none; }

    /* Theme Toggle Button */
    .theme-toggle-btn {
      display: grid;
      place-items: center;
      width: 36px;
      height: 36px;
      border: 1px solid rgba(255,255,255,.3);
      border-radius: 50%;
      background: rgba(255,255,255,.15);
      color: #fff;
      cursor: pointer;
      transition: all .2s ease;
      flex-shrink: 0;
    }
    .theme-toggle-btn:hover {
      background: rgba(255,255,255,.25);
      transform: scale(1.05);
    }
    .theme-toggle-btn .theme-icon-moon { display: none; }
    [data-theme="dark"] .theme-toggle-btn .theme-icon-sun { display: none; }
    [data-theme="dark"] .theme-toggle-btn .theme-icon-moon { display: block; }

    .tab-menu { order: 3; }
    .sidebar-content { order: 4; }
    @media (max-width: 768px) {
      .sidebar-nav-toggle { min-height: 42px; font-size: 12px; }
      #sidebar-left .tab-menu {
        flex: 0 0 auto;
        flex-direction: column;
        gap: 3px;
        padding: 8px 10px;
        border-bottom: 0;
        border-right: 1px solid #e1ebf1;
      }
      #sidebar-left .tab-btn {
        width: 100%;
        min-width: 0;
        min-height: 42px;
        padding: 10px 12px;
        border: 1px solid transparent;
        border-radius: 9px;
        text-align: left;
      }
      #sidebar-left .tab-btn.active { border-color: #cae9eb; background: linear-gradient(90deg, #e6f8f7, #f7fcfc); box-shadow: inset 3px 0 #0b9ab0; }
    }

    /* Desktop navigation: a compact map-dashboard rail when collapsed. */
    @media (min-width: 769px) {
      #sidebar-left { width: 352px; }
      #sidebar-left.collapsed { transform: translateX(-100%); }
    #sidebar-left.sidebar-force-hidden { transform: translateX(-100%); }
    #sidebar-left.sidebar-force-hidden .toggle-sidebar-btn { display: none !important; }
      #sidebar-left.collapsed .sidebar-header { justify-content: center; padding: 14px 8px; }
      #sidebar-left.collapsed .ruangkita-brand { justify-content: center; }
      #sidebar-left.collapsed .ruangkita-name,
      #sidebar-left.collapsed .app-banner,
      #sidebar-left.collapsed .sidebar-nav-toggle,
      #sidebar-left.collapsed .sidebar-content { display: none; }

      #sidebar-left .tab-menu {
        flex: 0 0 auto;
        flex-direction: column;
        gap: 3px;
        padding: 10px;
        border-bottom: 0;
      }
      #sidebar-left .tab-btn {
        position: relative;
        width: 100%;
        min-width: 0;
        min-height: 42px;
        padding: 10px 12px;
        border: 1px solid transparent;
        border-radius: 9px;
        color: #47647a;
        font-size: 11px;
        letter-spacing: .01em;
        text-align: left;
      }
      #sidebar-left .tab-btn:hover { border-color: #d9e8ef; background: #eef8fa; color: #08729c; }
      #sidebar-left .tab-btn.active { border-color: #cae9eb; background: linear-gradient(90deg, #e6f8f7, #f7fcfc); color: #05768a; box-shadow: inset 3px 0 #0b9ab0; }
      #sidebar-left .tab-btn svg { width: 17px; height: 17px; }

      #sidebar-left.collapsed .tab-menu { align-items: center; padding: 10px 11px; }
      #sidebar-left.collapsed .tab-btn { width: 48px; height: 46px; min-height: 46px; justify-content: center; padding: 0; }
      #sidebar-left.collapsed .tab-btn span { display: none; }
      #sidebar-left.collapsed .tab-btn::after {
        position: absolute;
        left: calc(100% + 12px);
        top: 50%;
        z-index: 1200;
        padding: 6px 8px;
        border-radius: 6px;
        background: #123c59;
        box-shadow: 0 5px 16px rgba(15, 51, 78, .18);
        color: #fff;
        content: attr(data-label);
        font-size: 10px;
        font-weight: 700;
        letter-spacing: .04em;
        opacity: 0;
        pointer-events: none;
        transform: translate(-4px, -50%);
        transition: opacity .15s ease, transform .15s ease;
        white-space: nowrap;
      }
      #sidebar-left.collapsed .tab-btn:hover::after,
      #sidebar-left.collapsed .tab-btn:focus-visible::after { opacity: 1; transform: translate(0, -50%); }
      #sidebar-left.collapsed .toggle-sidebar-btn { right: -30px; }
    }

    /* App Download Banner */
    .app-banner {
      position: relative;
      margin: 10px 10px 8px;
      padding: 0;
      border-radius: 12px;
      background: linear-gradient(135deg, #0f766e 0%, #0d9488 40%, #14b8a6 100%);
      overflow: hidden;
      flex-shrink: 0;
    }
    .app-banner-glow {
      position: absolute;
      top: -20px; right: -20px;
      width: 80px; height: 80px;
      background: rgba(255,255,255,.1);
      border-radius: 50%;
      pointer-events: none;
    }
    .app-banner-close {
      position: absolute;
      top: 4px; right: 6px;
      width: 18px; height: 18px;
      border: 0;
      background: rgba(255,255,255,.15);
      color: #fff;
      font-size: 13px;
      line-height: 18px;
      text-align: center;
      border-radius: 50%;
      cursor: pointer;
      z-index: 2;
      transition: background .15s;
    }
    .app-banner-close:hover { background: rgba(255,255,255,.3); }
    .app-banner-content {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 10px 12px;
      position: relative;
      z-index: 1;
    }
    .app-banner-icon {
      flex-shrink: 0;
      width: 40px; height: 40px;
      border-radius: 10px;
      background: rgba(255,255,255,.15);
      display: flex;
      align-items: center;
      justify-content: center;
      backdrop-filter: blur(4px);
      border: 1px solid rgba(255,255,255,.2);
    }
    .app-banner-icon-inner { display: flex; align-items: center; justify-content: center; }
    .app-banner-text { flex: 1; min-width: 0; }
    .app-banner-title {
      font-size: 12px;
      font-weight: 700;
      color: #fff;
      line-height: 1.2;
    }
    .app-banner-desc {
      font-size: 9px;
      color: rgba(255,255,255,.75);
      line-height: 1.3;
      margin-top: 1px;
    }
    .app-banner-btn {
      flex-shrink: 0;
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 6px 12px;
      border: 0;
      border-radius: 8px;
      background: #fff;
      color: #0d9488;
      font-size: 10px;
      font-weight: 700;
      cursor: pointer;
      text-decoration: none;
      transition: all .15s;
      box-shadow: 0 2px 8px rgba(0,0,0,.15);
    }
    .app-banner-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,.2); background: #f0fdfa; }

    /* Donation card used in the layer catalog and application sheets. */
    .lc-donation-banner {
      position: static;
      display: grid;
      grid-template-columns: 34px minmax(0, 1fr) auto;
      align-items: center;
      gap: 9px;
      margin: 10px 8px 10px;
      padding: 11px;
      border: 1px solid #b7e4d1;
      border-radius: 13px;
      background: linear-gradient(125deg, #ecfdf5 0%, #f0fdfa 58%, #eff6ff 100%);
      box-shadow: 0 5px 16px rgba(15, 118, 110, .10);
    }
    .lc-donation-banner.sheet-donation-banner {
      position: static;
      top: auto;
      grid-template-columns: 38px minmax(0, 1fr) 58px;
      margin: 6px 0 12px;
      padding: 12px 13px;
      border-color: var(--border-color);
      border-radius: 10px;
      background: var(--bg-card);
      box-shadow: none;
    }
    .lc-donation-mark {
      display: grid;
      width: 34px;
      height: 34px;
      place-items: center;
      border-radius: 11px;
      background: #d1fae5;
      color: #047857;
    }
    .sheet-donation-banner .lc-donation-mark { width: 38px; height: 38px; }
    .lc-donation-mark svg { width: 18px; height: 18px; }
    .lc-donation-copy { display: grid; min-width: 0; gap: 2px; }
    .lc-donation-eyebrow { color: #047857; font-size: 8px; font-weight: 800; letter-spacing: .09em; }
    .lc-donation-text { color: #123b32; font-size: 11px; font-weight: 800; line-height: 1.3; }
    .lc-donation-note { color: #526b65; font-size: 9px; line-height: 1.35; }
    .lc-donation-btns { display: flex; align-items: center; gap: 5px; }
    .lc-donation-btn {
      display: inline-flex;
      min-height: 26px;
      align-items: center;
      justify-content: center;
      padding: 0 8px;
      border: 1px solid transparent;
      border-radius: 8px;
      font-size: 9px;
      font-weight: 800;
      text-decoration: none;
      white-space: nowrap;
      transition: transform .15s, box-shadow .15s, background .15s;
    }
    .lc-donation-btn:hover { transform: translateY(-1px); box-shadow: 0 3px 8px rgba(15, 23, 42, .13); }
    .lc-donation-saweria { background: #047857; color: #fff; }
    .lc-donation-saweria:hover { background: #065f46; }
    .lc-donation-paypal { border-color: #cbd5e1; background: #fff; color: #174ea6; }
    .lc-donation-paypal:hover { background: #eff6ff; }
    .lc-donation-banner:not(.sheet-donation-banner) .lc-donation-btns { grid-column: 3; flex-direction: column; align-items: stretch; justify-content: center; gap: 4px; }
    .lc-donation-banner:not(.sheet-donation-banner) .lc-donation-btn { flex: 0 0 auto; min-height: 26px; width: 58px; padding: 0 5px; }
    .sheet-donation-banner .lc-donation-btns { grid-column: 3; flex-direction: column; align-items: stretch; justify-content: center; gap: 4px; margin-top: 0; }
    .sheet-donation-banner .lc-donation-btn { flex: 0 0 auto; min-height: 26px; width: 58px; padding: 0 5px; }
    [data-theme="dark"] .lc-donation-banner { border-color: #24554b; background: linear-gradient(125deg, #102c27, #12312e 58%, #17283b); }
    [data-theme="dark"] .lc-donation-mark { background: #164e3e; color: #a7f3d0; }
    [data-theme="dark"] .lc-donation-eyebrow { color: #6ee7b7; }
    [data-theme="dark"] .lc-donation-text { color: #ecfdf5; }
    [data-theme="dark"] .lc-donation-note { color: #b5c9c2; }
    [data-theme="dark"] .lc-donation-paypal { border-color: #37516b; background: #17283b; color: #bfdbfe; }
    /* Slot AdSense di bawah kartu donasi, pada katalog layer dan semua
       sheet. Jaraknya diatur lewat pembungkus, bukan lewat <ins>, karena
       AdSense datang tanpa gaya margin sendiri. Saat slot belum terisi
       status unfilled akan menyembunyikan slot supaya tidak menyisakan
       ruang kosong ketika tidak ada iklan yang tersedia. */
    .lc-adsense { margin: 0 8px 6px; }
    .lc-adsense.sheet-adsense { width: 100%; min-width: 250px; box-sizing: border-box; margin: 0 0 6px; }
    .lc-adsense.at-search-adsense { margin: 0 0 10px; }
    .lc-adsense.geotools-inline-adsense { margin: 16px 0; }
    .lc-adsense.geodata-menu-adsense { margin: 16px 0; }
    .lc-adsense.active-layers-menu-adsense { margin: 16px 0; }
    /* Unit di sheet Draw & Ukur, Tabel Atribut, dan Legenda. Ketiganya
       ditambahkan sebagai anak terakhir badan sheet, sehingga margin bawaan
       .lc-adsense tidak berlaku dan padding disetel sendiri agar sejajar
       dengan padding badan sheet (12px 16px 16px). */
    .lc-adsense.tool-sheet-adsense { margin: 0; padding: 10px 16px 14px; }
    .lc-adsense.attr-table-ad-slot { min-width: 0; margin: 0 0 10px; flex: 0 0 auto; }
    .lc-adsense.tool-sheet-adsense--legenda { padding: 8px 16px 12px; }
    /* Mode tabel tanah mengubah .at-sheet-body menjadi kolom flex dengan
       overflow hidden, dan #at-sheet-content memakai flex: 1 1 auto. Unit
       harus dikunci agar tidak ikut terjepit bersama tabel. */
    #attr-table-sheet.at-soil-table-mode .lc-adsense.tool-sheet-adsense { flex: 0 0 auto; }
    /* Unit di bawah tombol "Export SHP" pada kartu Geospasial Indonesia.
       Tab GeoPortal. Tombolnya memakai margin-top:4px, jadi unit ini memakai
       jarak yang sama supaya tidak menggantung. Penampilannya mengikuti
       tombol: lihat addGeoPortalExportShpAd() di sheet-donation-ads.js. */
    .lc-adsense.satupeta-export-shp-adsense { margin: 4px 0 10px; }
    /* Format fluid menentukan tinggi slot mengikuti materi iklan. */
    .lc-adsense .adsbygoogle { display: block; width: 100%; }
    .lc-adsense .adsbygoogle[data-ad-status="unfilled"] { display: none !important; }
    [data-theme="dark"] .lc-adsense .adsbygoogle { background: transparent; }

    .tab-content { display: none; }
    .tab-content h4 {
      font-size: 15px;
      font-weight: 700;
      color: var(--text-primary);
      margin-bottom: 8px;
      line-height: 1.3;
    }
    .tab-content h5 {
      font-size: 13px;
      font-weight: 700;
      color: var(--text-secondary);
      margin-bottom: 6px;
      line-height: 1.3;
    }
    .tab-content p,
    .tab-content label,
    .tab-content small,
    .tab-content input,
    .tab-content select {
      font-size: 13px;
      line-height: 1.45;
      color: var(--text-primary);
    }
    .tab-content input,
    .tab-content select {
      background: var(--bg-input);
      border-color: var(--border-color);
      color: var(--text-primary);
    }
    .tab-content.active { display: block; }
    #tab-geoportal.active {
      display: flex;
      flex-direction: column;
      flex: 1;
      min-height: 0;
      overflow: hidden;
    }
    #tab-draw.active,
    #tab-geotools.active {
      display: flex;
      flex-direction: column;
      flex: 1;
      min-height: 0;
    }

    .geotani-analysis-cards { display: none !important; }
    .geotani-analysis-card { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px 8px; border: 1px solid var(--border-color); border-radius: 10px; background: var(--bg-card); cursor: pointer; transition: all .2s ease; text-align: center; }
    .geotani-analysis-card:hover { border-color: var(--accent-green); background: var(--bg-card-hover); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(22, 163, 74, .1); }
    .geotani-analysis-card.active { border-color: var(--accent-green); background: var(--bg-card-active); box-shadow: 0 2px 8px rgba(22, 163, 74, .2); }
    .geotani-card-icon { font-size: 20px; line-height: 1; }
    .geotani-card-title { font-size: 11px; font-weight: 700; color: var(--text-primary); }
    .geotani-analysis-card.active .geotani-card-title { color: var(--accent-green); }
    .geotani-card-desc { font-size: 9px; color: var(--text-muted); font-weight: 500; }
    .geotani-analysis-card:last-child:nth-child(odd) { grid-column: 1 / -1; }
    .geotani-analysis-panel { display: none !important; }
    .geotani-analysis-panel.active { display: block; }
    #geotani-satupeta-panel { display: block !important; }
    /* Dua kartu yang terlihat di panel ini (SLS lalu Geospasial Indonesia)
       memakai margin:0 dari .geotani-kta-card, jadi tanpa ini keduanya
       menempel berdempetan. */
    #geotani-satupeta-panel > .geotani-kta-card + .geotani-kta-card { margin-top: 10px; }
    #geotani-satupeta-panel .geotani-kta-card > div { min-width: 0; }
    #satupetaFeatureTable { min-width: 0; max-width: 100%; width: 100%; box-sizing: border-box; }
    #satupetaFeatureTable .at-table-wrap { width: 100%; max-width: 100%; min-width: 0; margin: 0; overflow-x: auto !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch; }
    #satupetaFeatureTable .at-table { width: max-content; min-width: 100%; }
    #satupetaFeatureTable .satupeta-feature-row { cursor: pointer; }
    #satupetaFeatureTable .satupeta-feature-row:hover { background: rgba(249, 115, 22, .08); }
    #satupetaFeatureTable .satupeta-feature-row.is-selected { background: rgba(249, 115, 22, .16); }
    #satupetaFeatureTable .satupeta-feature-row:focus-visible { outline: 2px solid #f97316; outline-offset: -2px; }
    .geotani-kta-card { margin: 0; padding: 13px; border: 1px solid var(--border-color); border-radius: 8px; background: var(--bg-card); }

    #geojogja-card { margin-top: 10px; }
    #geojogja-card > .geojogja-body { display: grid; gap: 9px; min-width: 0; }
    .geojogja-layer-label { color: var(--text-primary); font-size: 11px; font-weight: 700; }
    .geojogja-toolbar { display: flex; flex-wrap: wrap; gap: 7px; }
    .geojogja-toolbar .geotools-btn { width: 100%; height: 34px; min-height: 34px; padding: 0 10px; border-radius: 8px; font-size: 11px; }
    .geojogja-status { margin: 0; color: var(--text-secondary); font-size: 11px; }
    .geojogja-table-wrap { max-height: 300px; overflow: auto; border: 1px solid var(--border-color); border-radius: 6px; }
    .geojogja-table { width: 100%; border-collapse: collapse; font-size: 11px; text-align: left; }
    .geojogja-table th { position: sticky; top: 0; z-index: 1; padding: 8px 7px; background: var(--bg-secondary); color: var(--text-primary); }
    .geojogja-table td { padding: 7px; border-top: 1px solid var(--border-color); color: var(--text-secondary); }
    .geojogja-table tbody tr { cursor: pointer; }
    .geojogja-table tbody tr:hover, .geojogja-table tbody tr.is-active { background: rgba(34,197,94,.12); }
    .geojogja-table tbody tr:focus { outline: 2px solid #16a34a; outline-offset: -2px; }
    .geojogja-pagination { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
    .geojogja-pagination[hidden] { display: none !important; }
    .geojogja-pagination .geotools-btn { width: auto; min-width: 96px; height: 34px; min-height: 34px; padding: 0 10px; border-radius: 8px; font-size: 11px; flex: 0 0 auto; }
    .geojogja-pagination span { color: var(--text-secondary); font-size: 11px; text-align: center; }

    #geojakarta-card { margin-top: 10px; }
    #geojakarta-card > .geojakarta-body { display: grid; gap: 7px; min-width: 0; }
    .geojakarta-desc, .geojakarta-status { margin: 0; color: var(--text-secondary); font-size: 10.5px; line-height: 1.45; }
    .geojakarta-label { margin-top: 2px; color: var(--text-primary); font-size: 10.5px; font-weight: 700; }
    .geojakarta-actions { display: flex; justify-content: flex-end; margin-top: 2px; }
    .geojakarta-actions .geotools-btn { width: auto; height: 34px; min-height: 34px; padding: 0 10px; border-radius: 8px; font-size: 11px; }
    .geojakarta-status.is-error { color: #b91c1c; }
    .geojakarta-status.is-busy { color: #0369a1; }

    /* Dua kartu yang terlihat di panel GeoPortal (SLS dan Geospasial)
       disamakan bentuknya dengan GeoPortal Hub: satu kontainer kartu yang
       rapi, tanpa inner box tambahan, dan body yang dimulai tepat di bawah
       header. Dengan gaya lama, tiap kartu punya padding dalam dan border
       sendiri, sehingga bentuknya lebih "kubus" daripada kartu utama
       GeoPortal yang flat dan konsisten. */
    #geotoolsTabGeoportal > .geotani-kta-card {
      padding: 0;
      overflow: hidden;
      border: 1px solid var(--border-color);
      border-radius: 10px;
      background: var(--bg-card);
    }
    #geotoolsTabGeoportal > .geotani-kta-card > div {
      margin: 0;
      padding: 12px 13px;
      border: 0;
      border-radius: 0;
      background: transparent;
    }
    .geotani-kta-card h5 { display: flex; align-items: center; gap: 6px; margin: 0 0 5px; color: var(--text-primary); font-size: 13px; text-transform: none; letter-spacing: normal; }
    .geotani-kta-card h5::before { content: 'â—ˆ'; color: var(--accent-green); font-size: 15px; }
    .geotani-kta-card .geoportal-filter { padding: 6px 8px; border-radius: 5px; background: var(--bg-secondary); }
    .geotani-form-select, .geotani-form-input {
      width: 100%; padding: 7px 10px; font-size: 11px;
      border: 1px solid #d0dde8; border-radius: 4px;
      background: #fff; color: #385773; outline: none;
    }
    .geotani-form-input-search {
      width: 100%; padding: 7px 10px 7px 28px; font-size: 11px;
      border: 1px solid #d0dde8; border-radius: 4px;
      background: #fff; color: #385773; outline: none;
      box-sizing: border-box;
    }
    .satupeta-kab-item {
      display: flex; justify-content: space-between; align-items: center;
      padding: 6px 10px; font-size: 11px; cursor: pointer;
      border-bottom: 1px solid #f0f0f0; transition: background .1s;
    }
    .satupeta-kab-item:hover { background: #f0f7ff; }
    .satupeta-kab-name { font-weight: 600; color: #1e293b; font-size: 11px; }
    .satupeta-kab-prov { font-size: 10px; color: #64748b; margin-left: 8px; }
    .satupeta-kab-empty { font-size: 11px; color: #94a3b8; text-align: center; cursor: default; }
    .satupeta-kab-empty:hover { background: none; }
    .satupeta-loading { display: flex; align-items: center; gap: 6px; font-size: 11px; color: #475569; }
    .satupeta-spinner {
      width: 12px; height: 12px; border: 2px solid #d0dde8;
      border-top-color: #16a34a; border-radius: 50%;
      animation: satupeta-spin .6s linear infinite; flex-shrink: 0;
    }
    @keyframes satupeta-spin { to { transform: rotate(360deg); } }
    /* Tombol "Reset Polygon" di kartu GeoTani (LBS & LSD, SLS, Geospasial
       Indonesia). Semula ikon x mengambang (lingkaran 30px) di kanan blok info
       dan tombol "Hapus Layer" terpisah; sekarang satu kontrol yang sama di
       ketiga workflow. */
    .geotani-btn-reset {
      display: flex; align-items: center; justify-content: center; gap: 6px;
      width: 100%; margin-top: 4px; padding: 7px 14px;
      font-size: 11px; font-weight: 600;
      color: #64748b; background: #fff;
      border: 1px solid var(--border-color); border-radius: 4px;
      cursor: pointer; transition: all .15s;
    }
    .geotani-btn-reset:hover { background: var(--bg-card-hover); color: var(--text-primary); }
    .geotani-btn-reset:active { transform: scale(.99); }
    .geotani-btn-reset:focus-visible { outline: 2px solid var(--accent-green); outline-offset: 1px; }
    [data-theme="dark"] .geotani-btn-reset { color: var(--text-secondary); background: var(--bg-input); }
    /* State disabled. Tombol Hapus Layer Polygon di GeoNusa dimatikan saat
       tidak ada polygon di peta, supaya tidak ada tombol aktif yang
       diam-diam tidak melakukan apa pun. */
    .geotani-btn-reset:disabled,
    .geotani-btn-reset[disabled] {
      opacity: .45; cursor: not-allowed;
      background: transparent; color: var(--text-muted);
    }
    .geotani-btn-reset:disabled:hover,
    .geotani-btn-reset[disabled]:active { transform: none; }
    .geoid-indicator-reset { margin-top: 10px; }

    .geotani-form-label {
      font-size: 10px; color: #54708d; font-weight: 600;
      display: block; margin-bottom: 3px;
    }
    .geotools-desc {
      font-size: 13px; color: #668198; margin-bottom: 16px;
    }
    #btnRunNdvi:hover:not(:disabled) { background: #15803d; }
    #btnRunNdvi:disabled { cursor: wait; opacity: .7; background: #16a34a; }

    .ndvi-btn-spinner {
      width: 12px; height: 12px;
      border: 2px solid rgba(255,255,255,.3);
      border-top-color: #fff;
      border-radius: 50%;
      animation: ndvi-spin .6s linear infinite;
    }
    @keyframes ndvi-spin { to { transform: rotate(360deg); } }

    /* Modern Green NDVI Popup */
    .ndvi-leaflet-popup { max-width: 320px !important; }
    .ndvi-leaflet-popup .leaflet-popup-content-wrapper { border-radius: 14px; padding: 0; overflow: hidden; box-shadow: 0 6px 24px rgba(22, 163, 74, .2); border: none; }
    .ndvi-leaflet-popup .leaflet-popup-content { width: auto !important; margin: 0; }
    .ndvi-leaflet-popup .leaflet-popup-tip { box-shadow: 3px 3px 8px rgba(22, 163, 74, .12); }

    .ndvi-popup { width: 320px; font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; color: #1e293b; background: #fff; overflow: hidden; }

    .ndvi-popup-header {
      position: relative;
      padding: 14px 14px 12px;
      color: #fff;
      background: linear-gradient(135deg, #14532d 0%, #166534 50%, #22c55e 100%);
      overflow: hidden;
    }
    .ndvi-popup-header::before {
      content: '';
      position: absolute;
      top: -25px; right: -25px;
      width: 70px; height: 70px;
      background: rgba(255,255,255,.08);
      border-radius: 50%;
    }

    .ndvi-popup-badge {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      padding: 3px 8px;
      border-radius: 14px;
      font-size: 9px;
      font-weight: 700;
      letter-spacing: .05em;
      text-transform: uppercase;
      background: rgba(255,255,255,.18);
      color: #fff;
      margin-bottom: 6px;
      backdrop-filter: blur(4px);
    }
    .ndvi-popup-badge-dot {
      width: 6px; height: 6px;
      border-radius: 50%;
      background: #86efac;
    }

    .ndvi-popup-header strong {
      display: block;
      font-size: 14px;
      font-weight: 700;
      line-height: 1.2;
      position: relative;
      z-index: 1;
    }

    .ndvi-popup-body {
      padding: 12px 14px;
      background: #fff;
      max-height: 40vh;
      overflow-y: auto;
    }

    .ndvi-popup-summary {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
      margin-bottom: 10px;
    }
    .ndvi-popup-summary-item {
      display: flex;
      flex-direction: column;
      gap: 2px;
    }
    .ndvi-popup-summary-item span { font-size: 10px; color: #64748b; }
    .ndvi-popup-summary-item b { font-size: 12px; font-weight: 700; }

    .ndvi-popup-bar {
      margin-bottom: 10px;
    }
    .ndvi-popup-bar-fill {
      height: 6px;
      border-radius: 3px;
      background: linear-gradient(to right, #397ca8, #c6872a, #d7be37, #65a942, #2b843b, #125b2b);
    }
    .ndvi-popup-bar-scale {
      display: flex;
      justify-content: space-between;
      font-size: 8px;
      color: #9ca3af;
      margin-top: 2px;
    }

    .ndvi-popup-section {
      margin-top: 10px;
      padding-top: 8px;
      border-top: 1px solid #e5e7eb;
    }
    .ndvi-popup-section-title {
      font-size: 10px;
      font-weight: 700;
      color: #374151;
      margin-bottom: 6px;
      letter-spacing: .03em;
      text-transform: uppercase;
    }

    .ndvi-popup-insight-text {
      font-size: 10px;
      line-height: 1.5;
      color: #475569;
    }

    .ndvi-popup-dist-row {
      display: grid;
      grid-template-columns: 74px 1fr 30px;
      gap: 5px;
      align-items: center;
      margin-top: 4px;
      font-size: 9px;
    }
    .ndvi-popup-dist-label { color: #64748b; }
    .ndvi-popup-dist-bar { height: 5px; border-radius: 4px; background: #f1f5f9; overflow: hidden; }
    .ndvi-popup-dist-bar i { display: block; height: 100%; border-radius: 4px; }
    .ndvi-popup-dist-value { text-align: right; font-weight: 600; }

    .ndvi-popup-stat-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 4px 8px;
      font-size: 10px;
      color: #475569;
    }
    .ndvi-popup-stat-grid span { color: #64748b; }
    .ndvi-popup-stat-grid b { color: #166534; font-weight: 600; }

    .ndvi-popup-quality { font-size: 10px; font-weight: 600; }
    .ndvi-popup-quality-detail { font-size: 9px; color: #64748b; margin-top: 2px; }

    .ndvi-popup-footer {
      padding: 8px 14px;
      background: #f0fdf4;
      border-top: 1px solid #dcfce7;
      text-align: center;
    }
    .ndvi-popup-footer span { font-size: 9px; color: #64748b; }

    .ndvi-popup-footer-actions {
      display: flex;
      justify-content: center;
      gap: 8px;
      margin-top: 8px;
    }

    .ndvi-btn-print {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      padding: 6px 12px;
      border: none;
      border-radius: 8px;
      background: linear-gradient(135deg, #374151, #4b5563);
      color: #fff;
      font-size: 11px;
      font-weight: 600;
      cursor: pointer;
      transition: all .2s;
      box-shadow: 0 2px 6px rgba(0,0,0,.15);
    }
    .ndvi-btn-print:hover {
      background: linear-gradient(135deg, #1f2937, #374151);
      box-shadow: 0 3px 10px rgba(0,0,0,.25);
      transform: translateY(-1px);
    }
    .ndvi-btn-print:active {
      transform: translateY(0);
      box-shadow: 0 1px 4px rgba(0,0,0,.15);
    }
    .ndvi-btn-print:disabled {
      opacity: .6;
      cursor: not-allowed;
      transform: none;
    }

    /* NDVI Pixel Popup */
    .ndvi-popup-pixel { width: 260px; }
    .ndvi-popup-pixel .ndvi-popup-header { padding: 12px 12px 10px; }
    .ndvi-popup-pixel .ndvi-popup-header strong { font-size: 28px; font-weight: 800; line-height: 1.1; }
    .ndvi-popup-pixel .ndvi-popup-body { padding: 10px 12px; }
    .ndvi-popup-pixel .ndvi-popup-bar { margin-bottom: 8px; }
    .ndvi-popup-pixel .ndvi-popup-section { margin-top: 8px; padding-top: 6px; }
    .ndvi-popup-pixel .ndvi-popup-stat-grid { gap: 3px 6px; }
    .ndvi-popup-pixel .ndvi-popup-footer { padding: 6px 12px; }

    /* Land Cover Popup */
    .landcover-leaflet-popup { max-width: 320px !important; }
    .landcover-leaflet-popup .leaflet-popup-content-wrapper { border-radius: 14px; padding: 0; overflow: hidden; box-shadow: 0 6px 24px rgba(13, 148, 136, .2); border: none; }
    .landcover-leaflet-popup .leaflet-popup-content { width: auto !important; margin: 0; }
    .landcover-leaflet-popup .leaflet-popup-tip { box-shadow: 3px 3px 8px rgba(13, 148, 136, .12); }
    .landcover-popup { width: 320px; font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; color: #1e293b; background: #fff; overflow: hidden; }
    .landcover-popup-header {
      position: relative;
      padding: 14px 14px 12px;
      color: #fff;
      background: linear-gradient(135deg, #134e4a 0%, #0d9488 50%, #2dd4bf 100%);
      overflow: hidden;
    }
    .landcover-popup-header::before {
      content: '';
      position: absolute;
      top: -25px; right: -25px;
      width: 70px; height: 70px;
      background: rgba(255,255,255,.08);
      border-radius: 50%;
    }
    .landcover-popup-badge {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      padding: 3px 8px;
      border-radius: 14px;
      font-size: 9px;
      font-weight: 700;
      letter-spacing: .05em;
      text-transform: uppercase;
      background: rgba(255,255,255,.18);
      color: #fff;
      margin-bottom: 6px;
      backdrop-filter: blur(4px);
    }
    .landcover-popup-badge-dot { width: 6px; height: 6px; border-radius: 50%; background: #99f6e4; }
    .landcover-popup-header strong { display: block; font-size: 14px; font-weight: 700; line-height: 1.2; position: relative; z-index: 1; }
    .landcover-popup-body { padding: 12px 14px; background: #fff; max-height: 40vh; overflow-y: auto; }
    .landcover-popup-section-title { font-size: 10px; font-weight: 700; color: #374151; margin-bottom: 6px; letter-spacing: .03em; text-transform: uppercase; }
    .landcover-popup-footer {
      padding: 8px 14px;
      background: #f0fdfa;
      border-top: 1px solid #ccfbf1;
      text-align: center;
    }
    .landcover-popup-footer span { font-size: 9px; color: #64748b; }
    .landcover-popup-footer-actions { display: flex; justify-content: center; gap: 8px; margin-top: 8px; }
    .landcover-btn-print {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      padding: 6px 12px;
      border: none;
      border-radius: 8px;
      background: linear-gradient(135deg, #134e4a, #0f766e);
      color: #fff;
      font-size: 11px;
      font-weight: 600;
      cursor: pointer;
      transition: all .2s;
      box-shadow: 0 2px 6px rgba(0,0,0,.15);
    }
    .landcover-btn-print:hover { background: linear-gradient(135deg, #0f766e, #0d9488); box-shadow: 0 3px 10px rgba(0,0,0,.25); transform: translateY(-1px); }
    .landcover-btn-print:active { transform: translateY(0); box-shadow: 0 1px 4px rgba(0,0,0,.15); }
    .landcover-btn-print:disabled { opacity: .6; cursor: not-allowed; transform: none; }

    @media (max-width: 480px) {
      .landcover-leaflet-popup { max-width: min(320px, calc(100vw - 32px)) !important; }
      .landcover-leaflet-popup .leaflet-popup-content-wrapper { border-radius: 12px; }
      .landcover-popup { width: 100% !important; min-width: 280px; }
    }

    .kta-leaflet-popup .leaflet-popup-content { width: 320px !important; max-height: 40vh; margin: 12px 8px 12px 14px; padding-right: 6px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #a8bfaf #eff5f0; }
    .kta-leaflet-popup .leaflet-popup-content::-webkit-scrollbar { width: 6px; }
    .kta-leaflet-popup .leaflet-popup-content::-webkit-scrollbar-track { background: #eff5f0; border-radius: 6px; }
    .kta-leaflet-popup .leaflet-popup-content::-webkit-scrollbar-thumb { background: #a8bfaf; border-radius: 6px; }

    .kta-btn-print {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      padding: 6px 12px;
      border: none;
      border-radius: 8px;
      background: linear-gradient(135deg, #374151, #4b5563);
      color: #fff;
      font-size: 11px;
      font-weight: 600;
      cursor: pointer;
      transition: all .2s;
      box-shadow: 0 2px 6px rgba(0,0,0,.15);
    }
    .kta-btn-print:hover {
      background: linear-gradient(135deg, #1f2937, #374151);
      box-shadow: 0 3px 10px rgba(0,0,0,.25);
      transform: translateY(-1px);
    }
    .kta-btn-print:active {
      transform: translateY(0);
      box-shadow: 0 1px 4px rgba(0,0,0,.15);
    }
    .kta-btn-print:disabled {
      opacity: .6;
      cursor: not-allowed;
      transform: none;
    }

    .geotani-btn-print {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      padding: 6px 12px;
      border: none;
      border-radius: 8px;
      background: linear-gradient(135deg, #374151, #4b5563);
      color: #fff;
      font-size: 11px;
      font-weight: 600;
      cursor: pointer;
      transition: all .2s;
      box-shadow: 0 2px 6px rgba(0,0,0,.15);
    }
    .geotani-btn-print:hover {
      background: linear-gradient(135deg, #1f2937, #374151);
      box-shadow: 0 3px 10px rgba(0,0,0,.25);
      transform: translateY(-1px);
    }
    .geotani-btn-print:active {
      transform: translateY(0);
      box-shadow: 0 1px 4px rgba(0,0,0,.15);
    }
    .geotani-btn-print:disabled {
      opacity: .6;
      cursor: not-allowed;
      transform: none;
    }

    /* CVSS Vulnerability Gauge */
    .geotani-vuln-gauge { margin-bottom: 6px; }
    .geotani-vuln-gauge-track {
      height: 6px;
      background: #e5e7eb;
      border-radius: 9999px;
      overflow: hidden;
    }
    .geotani-vuln-gauge-fill {
      height: 100%;
      border-radius: 9999px;
      transition: width 0.4s ease;
    }

    .query-box {
      background: #f8f9fa;
      border: 1px solid #e0e0e0;
      border-radius: 6px;
      padding: 12px;
      margin-bottom: 15px;
    }

    .form-group { margin-bottom: 12px; }

    .kegiatan-filter-section {
      background: #f4f7fb;
      border: 1px solid #e7eef5;
      border-radius: 6px;
      padding: 10px 12px;
    }
    .kegiatan-filter-section label {
      display: block;
      font-size: 12px;
      font-weight: 600;
      color: #54708d;
      margin-bottom: 6px;
    }
    .kegiatan-filter-section select {
      width: 100%;
      padding: 7px 10px;
      font-size: 12px;
      border: 1px solid #c4d5e3;
      border-radius: 5px;
      background: #fff;
      color: #1e293b;
      outline: none;
    }
    .kegiatan-filter-section select:focus {
      border-color: #007bff;
      box-shadow: 0 0 0 2px rgba(0,123,255,0.1);
    }

    .query-box label {
      display: block;
      font-size: 13px;
      font-weight: 600;
      color: #333;
      margin-bottom: 8px;
    }

    .query-box select {
      width: 100%;
      padding: 8px;
      font-size: 13px;
      border: 1px solid #ccc;
      border-radius: 4px;
      background: white;
    }

    .btn-apply {
      width: 100%;
      background-color: #0078d4;
      color: white;
      border: none;
      padding: 10px;
      font-size: 13px;
      font-weight: 600;
      border-radius: 4px;
      cursor: pointer;
      transition: background 0.2s;
    }

    .btn-apply:hover { background-color: #005a9e; }

    .btn-wilayah-apply {
      width: 100%;
      background-color: #0078d4;
      color: white;
      border: none;
      padding: 10px;
      font-size: 13px;
      font-weight: 600;
      border-radius: 4px;
      cursor: pointer;
      transition: background 0.2s;
    }

    .btn-wilayah-apply:hover { background-color: #005a9e; }
    .btn-wilayah-apply:disabled { background-color: #9baab6; cursor: not-allowed; }

    /* Geoid Data Checkboxes */
    .geoid-data-toggles {
      display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
      padding: 8px 0; font-size: 11px;
    }
    .geoid-data-label { font-weight: 600; color: #385773; line-height: 1; }
    .geoid-check {
      display: inline-flex; align-items: center; gap: 5px; cursor: pointer;
      user-select: none; color: #385773; line-height: 1;
    }
    .geoid-check input { display: none; }
    .geoid-check-icon {
      flex-shrink: 0; color: #94a3b8; transition: color .15s;
      vertical-align: middle;
    }
    .geoid-check input:checked ~ .geoid-check-icon { color: #0879bf; }
    .geoid-check input:checked ~ .geoid-check-icon polyline { stroke-width: 3; }
    .geoid-check span { font-weight: 500; vertical-align: middle; }

    /* PANEL DETAIL ADMINISTRASI (DESKTOP: KANAN, MOBILE: MODAL) */
    #detail-panel {
      position: fixed;
      top: 0;
      right: 0;
      width: var(--desktop-sheet-width, 30vw);
      max-width: 50vw;
      height: 100vh;
      height: 100dvh;
      box-sizing: border-box;
      background: var(--bg-primary);
      border-left: 1px solid var(--border-color);
      box-shadow: var(--shadow-sheet);
      z-index: 1001;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      transition: transform .3s ease, visibility .3s;
      color: var(--text-primary);
    }
    .detail-sheet-handle { display: none; }

    /* Status Panel Detail Tersembunyi (Desktop) */
    #detail-panel.hidden {
      transform: translateX(100%);
      pointer-events: none;
    }

    #detail-panel.detail-panel-minimized {
      top: auto;
      right: auto;
      bottom: 68px;
      left: 50%;
      width: min(300px, calc(100vw - 24px));
      max-width: calc(100vw - 24px);
      height: 52px;
      border-radius: 14px;
      transform: translateX(-50%);
    }
    #detail-panel.detail-panel-minimized .detail-sheet-handle,
    #detail-panel.detail-panel-minimized .panel-body { display: none; }
    #detail-panel.detail-panel-minimized .panel-header { min-height: 50px; padding: 8px 12px; border-bottom: 0; }
    #detail-panel.detail-panel-minimized #clicked-coords { display: none; }

    /* Tombol detail panel disembunyikan; panel diakses via popup Dukcapil. */
    body .detail-panel-btn {
      display: none !important;
    }

    /* Tombol Panel Detail Administrasi */
    .detail-panel-btn {
      display: grid;
      place-items: center;
      width: 46px !important;
      height: 46px !important;
      margin: 12px !important;
      margin-bottom: 0 !important;
      border: 1px solid rgba(255,255,255,.86) !important;
      border-radius: 50% !important;
      background: linear-gradient(145deg, #ffffff, #e9f7fc) !important;
      color: #0879bf !important;
      cursor: pointer;
      box-shadow: 0 10px 28px rgba(8,63,102,.24) !important;
      transition: transform .2s, box-shadow .2s, background .2s;
    }
    .detail-panel-btn:hover {
      background: linear-gradient(145deg, #ffffff, #d5f3fb) !important;
      box-shadow: inset 0 0 0 1px rgba(8,121,191,.14);
      transform: translateY(-2px);
    }
    .detail-panel-btn.active {
      background: linear-gradient(145deg, #0879bf, #12a7c8) !important;
      color: #fff !important;
    }

    .panel-header {
      min-height: 52px;
      box-sizing: border-box;
      padding: 10px 16px;
      background: var(--bg-primary);
      color: var(--text-primary);
      border-bottom: 1px solid var(--border-color);
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .panel-header h3 {
      margin: 0;
      font-size: 13px;
      font-weight: 600;
    }

    /* Tombol Tutup/Sembunyikan Panel Detail */
    .close-panel-btn {
      display: grid;
      flex: 0 0 28px;
      width: 28px;
      height: 28px;
      place-items: center;
      background: var(--bg-tertiary);
      border: 0;
      color: var(--text-tertiary);
      font-size: 16px;
      cursor: pointer;
      padding: 0;
      border-radius: 50%;
      transition: background 0.2s;
    }

    .close-panel-btn:hover {
      background: var(--bg-card-hover);
    }

    .detail-panel-actions { display: flex; align-items: center; gap: 6px; }
    .detail-panel-resize-btn {
      display: grid;
      flex: 0 0 28px;
      width: 28px;
      height: 28px;
      place-items: center;
      border: 0;
      border-radius: 50%;
      background: var(--bg-tertiary);
      color: var(--text-tertiary);
      cursor: pointer;
    }
    .detail-panel-resize-btn:hover { background: var(--bg-card-hover); }
    .detail-panel-resize-btn:focus-visible,
    .close-panel-btn:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; }
    #detail-panel.detail-panel-minimized .detail-panel-resize-btn { background: var(--accent); color: var(--text-inverse); }

    .panel-body {
      padding: 12px;
      overflow-y: auto;
      flex: 1;
    }

    .population-chart-box {
      background: #fff;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      padding: 12px;
      margin-bottom: 12px;
    }

    .admin-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
      font-size: 12px;
      margin-bottom: 12px;
    }

    .admin-item label {
      display: block;
      color: #777;
      font-weight: 600;
      margin-bottom: 2px;
    }

    .admin-item span {
      color: #222;
      font-weight: 500;
    }

    .detail-subtab-content {
      padding: 0 15px;
    }

    /* Sub Tabs Detail Zonasi */
    .detail-tabs {
      display: flex;
      background: var(--bg-secondary);
      border: 1px solid var(--border-color);
      border-radius: 4px;
      margin-bottom: 12px;
      overflow: hidden;
    }

    .detail-tab-btn {
      flex: 1;
      padding: 8px 2px;
      border: none;
      background: transparent;
      font-size: 11px;
      font-weight: 600;
      color: var(--text-tertiary);
      cursor: pointer;
    }

    .detail-tab-btn.active {
      color: var(--accent);
      background: var(--bg-primary);
      border-bottom: 2px solid var(--accent);
    }

    .gempa-subtabs {
      display: flex;
      gap: 4px;
      margin-bottom: 14px;
      background: var(--bg-secondary);
      border: 1px solid var(--border-color);
      border-radius: 6px;
      padding: 3px;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: thin;
      scrollbar-color: var(--scrollbar-thumb) transparent;
    }
    .gempa-subtabs::-webkit-scrollbar { height: 4px; }
    .gempa-subtabs::-webkit-scrollbar-track { background: transparent; }
    .gempa-subtabs::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 2px; }
    .gempa-subtab-btn {
      flex: 0 0 auto;
      padding: 7px 10px;
      border: none;
      border-radius: 4px;
      background: transparent;
      font-size: 11px;
      font-weight: 600;
      color: #666;
      cursor: pointer;
      white-space: nowrap;
      transition: background .15s, color .15s;
    }
    .gempa-subtab-btn:hover { background: #e8ecf0; color: #334155; }
    .gempa-subtab-btn.active { background: #fff; color: #0891b2; box-shadow: 0 1px 3px rgba(0,0,0,.08); }
    .gempa-subtab-panel { display: none; }
    .gempa-subtab-panel.active { display: block; }
    .gempa-subtab-panel .cctv-layers { max-height: 35vh; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #cbd5e1 transparent; }
    .gempa-subtab-panel .cctv-layers::-webkit-scrollbar { width: 4px; }
    .gempa-subtab-panel .cctv-layers::-webkit-scrollbar-track { background: transparent; }
    .gempa-subtab-panel .cctv-layers::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 2px; }

    .geoid-subtabs {
      display: flex;
      gap: 0;
      margin-bottom: 14px;
      background: #fff;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      padding: 4px;
      box-shadow: 0 1px 3px rgba(0,0,0,.04);
    }
    .geoid-subtab-btn {
      flex: 1 1 0;
      min-width: 0;
      padding: 8px 4px;
      border: none;
      border-radius: 10px;
      background: transparent;
      font-size: 10px;
      font-weight: 600;
      color: #64748b;
      cursor: pointer;
      white-space: nowrap;
      text-align: center;
      transition: all .2s ease;
      display: inline-flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 4px;
      line-height: 1;
      position: relative;
    }
    .geoid-subtab-btn svg { 
      flex-shrink: 0; 
      width: 14px; 
      height: 14px; 
      opacity: .6; 
      transition: all .2s ease;
    }
    .geoid-subtab-btn:hover { 
      background: #f1f5f9; 
      color: #334155; 
    }
    .geoid-subtab-btn:hover svg { opacity: .8; }
    .geoid-subtab-btn.active { 
      background: linear-gradient(135deg, #0891b2 0%, #0e7490 100%); 
      color: #fff; 
      box-shadow: 0 2px 8px rgba(8,145,178,.3);
    }
    .geoid-subtab-btn.active svg {
      opacity: 1;
      stroke: #fff;
    }
    /* Jumlah tombol subtab GeoData adalah 7: SHP, GeoJSON, GPX, KMZ,
       ArcGIS REST, GeoServer, Timeline.
     
       Kolomnya dikunci 3 agar tombol tetap mudah disentuh pada sheet sempit.
     
       Sebelumnya `repeat(auto-fit, minmax(112px, 1fr))`. Di sheet GeoTools
       (380px, padding 12/16px → konten ~348px) auto-fit hanya menghasilkan
       2 kolom: (348 + 8) / (112 + 8) = 2,96 → turun ke 2. Akibatnya enam
       tombol menjadi 2x3 dan sheet-nya jauh lebih tinggi dari yang perlu -
       padahal separuh isinya adalah form ArcGIS REST yang harus tetap muat
       tanpa menggulir.
     
       min-height diturunkan dari 72px ke 60px dan padding diperkecil untuk
       menjaga tinggi navigasi tetap ringkas. */
    .geotools-upload-tabs {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 8px;
      padding: 0;
      border: 0;
      background: transparent;
      box-shadow: none;
    }
    .geotools-upload-tabs .geoid-subtab-btn {
      min-height: 60px;
      padding: 8px 4px;
      border: 1px solid #dbe7ee;
      border-radius: 10px;
      background: #fff;
      box-shadow: 0 1px 3px rgba(15, 67, 92, .06);
    }

    .geotools-upload-tabs .geoid-subtab-btn:hover {
      border-color: #70c7df;
      background: #f5fcfe;
      box-shadow: 0 3px 8px rgba(8, 145, 178, .12);
    }
    .geotools-upload-tabs .geoid-subtab-btn.active {
      border-color: #0891b2;
      background: linear-gradient(135deg, #0891b2 0%, #0e7490 100%);
      box-shadow: 0 3px 9px rgba(8, 145, 178, .25);
    }
    .geoid-subtab-panel { display: none; }
    .geoid-subtab-panel.active { display: block; }

    /* ── GeoTools Main Tabs (Muat Data | Geonusa) ── */
    .geotools-dropdown {
      width: 100%;
      padding: 10px 32px 10px 12px;
      border: 1px solid var(--border-color);
      border-radius: 8px;
      background: var(--bg-card);
      font-size: 12px;
      font-weight: 600;
      color: var(--text-primary);
      cursor: pointer;
      margin-bottom: 14px;
      box-shadow: 0 1px 3px rgba(0,0,0,.08);
      transition: border-color .15s, box-shadow .15s;
      appearance: none;
      -webkit-appearance: none;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 10px center;
    }
    .geotools-dropdown:hover {
      border-color: var(--accent);
      box-shadow: 0 2px 6px rgba(8,145,178,.15);
    }
    .geotools-dropdown:focus {
      outline: none;
      border-color: var(--accent);
      box-shadow: 0 0 0 3px rgba(8,145,178,.2);
    }
    #geotools-sheet .gs-sheet-title {
      flex: 0 0 auto;
      white-space: nowrap;
    }
    #geotools-sheet .gs-sheet-actions {
      display: flex; align-items: center; gap: 6px; margin-left: auto;
    }
    #geotools-sheet .geotools-dropdown {
      flex: 0 0 auto;
      width: 124px;
      min-width: 0;
      max-width: 124px;
      margin-bottom: 0;
      font-size: 10.5px;
      padding: 7px 24px 7px 9px;
      border: 0;
      border-radius: 999px;
      background-color: rgba(15, 23, 42, 0.04);
      box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.45);
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 9px center;
    }
    #geotools-sheet .geotools-dropdown:hover,
    #geotools-sheet .geotools-dropdown:focus {
      border: 0;
      box-shadow: inset 0 0 0 1px rgba(8, 145, 178, 0.8), 0 0 0 2px rgba(8, 145, 178, 0.12);
    }
    #geotools-sheet.gs-sheet-minimized .geotools-dropdown {
      display: none;
    }
    .geotools-main-tab-panel { display: none; overflow-x: hidden; }
    .geotools-main-tab-panel.active { display: block; }

    /* Panel GeoData (#geotoolsTabMuatData). Sengaja TIDAK memakai kelas
     * .geotools-main-tab-panel lagi: GeoData punya sheet sendiri dan tidak
     * lagi menjadi salah satu tab di .geotools-dropdown.
     *
     * Alasannya bukan sekadar supaya kelihatan. openGeotoolsMainTab()
     * melepas .active dari SEMUA .geotools-main-tab-panel, jadi selama
     * GeoData masih memakai kelas itu, memilih tab lain akan membuat GeoData
     * ikut kehilangan .active dan lenyap dari sheetnya sendiri.
     *
     * Tidak ada aturan display di sini, jadi elemen ini selalu tampil - itu
     * memang yang diinginkan: sheet GeoData tidak punya tab lain di dalamnya,
     * jadi tidak ada yang perlu disembunyikan.
     */
    .geodata-panel { overflow-x: hidden; }

    /* Host GeoData HANYA tempat parkir sementara.
     *
     * onOpen sheet GeoData (register 'geodata' di map-core.js) memindahkan
     * anak host ini ke dalam #geodataSheetBody, dan onClose mengembalikannya.
     * Jadi host tidak pernah boleh menampilkannya sendiri.
     *
     * Tanpa aturan ini, host-nya <div> telanjang tanpa kelas, dan seluruh
     * panel "GeoData Analysis" - judul, enam tab Alat, form ArcGIS REST -
     * ikut ter-render di tempatnya di dalam sidebar, tepat di bawah isi tab
     * GeoTools. Itu kebocoran yang nyata, bukan sekadar detail tampilan.
     *
     * display:none, bukan visibility:hidden, karena isinya harus benar-benar
     * tidak_flow dan tidak menambah tinggi apa pun. Memindahkan anak dengan
     * appendChild tetap bekerja pada elemen tersembunyi, jadi alur
     * buka/tutup sheet tidak terganggu. */
    #geodata-panel-host { display: none; }

    /* Panel GeoRaster (id geotoolsTabDemnas). Dulunya "Unduh DEMNAS"
       dibungkus .geotools-2col-side; September 2026 wrapper itu diganti
       kartu .georaster-card di bawah.

       Aturan .geotools-2col* dihapus, bukan dibiarkan jadi alias:
         - .geotools-2col (grid dua kolom) tidak pernah dipakai markup,
           tidak ada satu pun elemen dengan kelas itu di index.html.
         - .geotools-2col-side hanya ada di panel ini, dan sekarang sudah
           tidak dipakai.
         - .geotools-2col-side .geotools-steps / .geotools-step tidak
           pernah cocok: satu-satunya .geotools-steps ada di panel GeoData,
           bukan di dalam .geotools-2col-side.
       .geotools-2col-main masih dipakai di panel GeoData, jadi
       min-width:0 nya dipertahankan. */
    .geotools-2col-main { min-width: 0; }

    .info-card {
      background: var(--bg-secondary);
      border: 1px solid var(--border-color);
      border-radius: 6px;
      padding: 8px 10px;
      margin-bottom: 8px;
    }

    .info-card label {
      font-size: 10px;
      color: var(--text-tertiary);
      display: block;
      font-weight: 600;
    }

    .info-card p {
      font-size: 12px;
      font-weight: 600;
      color: #333;
    }

    /* Legenda */
    .legend-layer-title {
      font-weight: bold;
      font-size: 12px;
      margin-bottom: 6px;
      border-bottom: 2px solid #0078d4;
    }

    .legend-item {
      display: flex;
      align-items: center;
      margin-bottom: 4px;
      font-size: 12px;
    }

    .legend-item img {
      margin-right: 8px;
      width: 18px;
      height: 18px;
    }

    /* BACKDROP MODAL FOR MOBILE */
    #modal-backdrop {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      width: 100%;
      height: 100vh;
      height: 100dvh;
      background: rgba(0,0,0,0.4);
      z-index: 1050;
    }

    /* RESPONSIF MODE MOBILE (<= 768px) */
    @media (max-width: 768px) {
      .map-insight-cards {
        gap: 6px;
        width: calc(100% - 24px);
      }
      .map-insight-card { min-width: 0; }
      .insight-card-body { padding: 0 8px 5px; }
      .insight-weather-temp { font-size: 16px; }
      .insight-quake-mag { width: 28px; height: 28px; font-size: 12px; }
      .insight-quake-left { min-width: 44px; }
      .insight-quake-main { gap: 6px; }
      .insight-quake-meta { font-size: 9px; }

      .quick-layer-bar {
        width: calc(100% - 24px);
        padding: 3px;
        gap: 3px;
        scrollbar-width: none;
      }
      .quick-layer-bar::-webkit-scrollbar { display: none; }
      .petadasar-export-block,
      .petadasar-export-block.persil-tiff-export-block {
        /* Mobile: menempel di bawah quick layer bar (top menang dari aturan
           desktop 10430/10489 karena properti yang sama — bottom HARUS auto.
           Bila bottom ikut aktif (106px) blok melar 630px dan menutupi
           seluruh peta sehingga sentuhan tak sampai ke peta). */
        top: 108px;
        bottom: auto;
        max-width: calc(100% - 24px);
        flex-direction: column;
        z-index: 99998;
      }
      body.petadasar-tiff-tampil .petadasar-export-block.persil-tiff-export-block {
        top: auto;
        bottom: auto;
      }
      .petadasar-export-block .geotools-btn {
        height: 30px;
        font-size: 11px;
        padding: 0 12px;
      }
        body.geotools-sheet-open:not(.geotools-sheet-minimized) .petadasar-export-block,
        body.geodata-sheet-open:not(.geodata-sheet-minimized) .petadasar-export-block,

      body.geopangan-sheet-open:not(.geopangan-sheet-minimized) .petadasar-export-block,
      body.hotspot-sheet-open:not(.hotspot-sheet-minimized) .petadasar-export-block,
      body.dm-sidebar-open:not(.dm-sidebar-minimized) .petadasar-export-block,
      body.lg-sidebar-open:not(.lg-sidebar-minimized) .petadasar-export-block,
      body.pa-panel-open:not(.pa-panel-minimized) .petadasar-export-block,
      body.attr-table-sheet-open:not(.attr-table-sheet-minimized) .petadasar-export-block,
      body.ai-sheet-open:not(.ai-sheet-minimized) .petadasar-export-block {
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.25s ease;
      }
      .ql-btn {
        padding: 5px 8px;
        font-size: 9px;
      }
      .ql-btn svg { width: 14px; height: 14px; }
      .minimize-all-btn { display: none !important; }

      .geoid-leaflet-popup { 
        max-width: min(320px, calc(100vw - 32px)) !important;
        width: auto !important;
        min-width: 280px;
      }
      .geoid-leaflet-popup .leaflet-popup-content-wrapper {
        max-height: 70vh;
        border-radius: 14px;
      }
      .geoid-popup { width: 100% !important; min-width: 280px; }
      .geoid-popup-meta { padding: 12px 14px; }
      .geoid-popup-meta div { font-size: 12px; }
      .geoid-popup-insights { padding: 12px 14px; }
      .geoid-popup-cctv { padding: 12px 14px; }

      .bmkg-leaflet-popup {
        max-width: min(320px, calc(100vw - 32px)) !important;
        width: auto !important;
        min-width: 280px;
      }
      .bmkg-leaflet-popup .leaflet-popup-content-wrapper {
        max-height: 70vh;
        border-radius: 14px;
      }
      .bmkg-popup { max-width: 100%; }

      .quake-leaflet-popup { max-width: min(320px, calc(100vw - 32px)) !important; }
      .quake-leaflet-popup .leaflet-popup-content-wrapper { border-radius: 14px; }
      .quake-popup { width: 100% !important; min-width: 280px; }
      .quake-popup-mag-display { padding: 12px 14px; gap: 10px; }
      .quake-popup-mag-circle { width: 56px; height: 56px; }
      .quake-popup-mag-num { font-size: 20px; }
      .quake-popup-details { padding: 12px 14px; gap: 10px; }

      .agol-leaflet-popup { max-width: min(320px, calc(100vw - 32px)) !important; }
      .agol-leaflet-popup .leaflet-popup-content-wrapper { border-radius: 14px; }
      /* width:100% membuat popup ikut teks natural (bisa < 320px); width
         eksplisit menjaga popup tetap selebar template pada layar kecil. */
      .agol-popup { width: min(320px, calc(100vw - 32px)) !important; }

      .geoid-popup { width: 100% !important; max-width: 320px; }
      .geoid-popup-scroll { max-height: 100%; }
      .geoid-popup-scroll .geoid-popup-body { max-height: calc(70vh - 80px); overflow-y: auto; }
      .geoid-popup-meta span { font-size: 15px; }
      .geoid-popup-meta b { font-size: 15px; }

      .geotani-leaflet-popup { max-width: min(320px, calc(100vw - 32px)) !important; }
      .geotani-leaflet-popup .leaflet-popup-content-wrapper { border-radius: 14px; }
      .geotani-popup { width: 100% !important; min-width: 280px; }
      .geotani-popup-meta { padding: 12px 14px; }
      .geotani-popup-meta div { font-size: 12px; }
      .geotani-popup-insights { padding: 12px 14px; }

      .kta-leaflet-popup { max-width: min(320px, calc(100vw - 32px)) !important; }
      .kta-leaflet-popup .leaflet-popup-content-wrapper { border-radius: 14px; }
      .kta-popup { width: 100% !important; min-width: 280px; max-height: 40vh; }
      .kta-popup-body { padding: 12px 14px; max-height: 40vh; }

      .boundary-leaflet-popup { max-width: min(320px, calc(100vw - 32px)) !important; }
      .boundary-leaflet-popup .leaflet-popup-content-wrapper { border-radius: 12px; }
      .boundary-popup { width: 100% !important; min-width: 280px; }
      .boundary-popup-header { padding: 14px 14px 12px; }
      .boundary-popup-header strong { font-size: 14px; }
      .boundary-popup-body { padding: 10px 14px; }
      .boundary-popup-meta-item { padding: 5px 8px; }

      .irisan-leaflet-popup { max-width: min(320px, calc(100vw - 32px)) !important; }
      .irisan-leaflet-popup .leaflet-popup-content-wrapper { border-radius: 12px; }
      .irisan-popup { width: 100% !important; min-width: 280px; }
      .irisan-popup-header { padding: 12px 12px 10px; }
      .irisan-popup-header strong { font-size: 13px; }
      .irisan-popup-body { padding: 10px 12px; }
      .irisan-popup-detail { gap: 5px 8px; font-size: 10px; }
      .irisan-popup-meta-grid { gap: 3px 6px; font-size: 9px; }
      .crop-health-card-wrap { max-height: 50vh; }

      .ndvi-leaflet-popup { max-width: min(320px, calc(100vw - 32px)) !important; }
      .ndvi-leaflet-popup .leaflet-popup-content-wrapper { border-radius: 12px; }
      .ndvi-popup { width: 100% !important; min-width: 280px; }
      .ndvi-popup-header { padding: 12px 12px 10px; }
      .ndvi-popup-header strong { font-size: 13px; }
      .ndvi-popup-body { padding: 10px 12px; max-height: 40vh; }
      .ndvi-popup-summary { gap: 6px; }
      .ndvi-popup-stat-grid { gap: 3px 6px; font-size: 9px; }
      .ndvi-popup-dist-row { grid-template-columns: 60px 1fr 28px; }
      .ndvi-popup-pixel { width: 220px; }
      .ndvi-popup-pixel .ndvi-popup-header strong { font-size: 24px; }
      .ndvi-popup-footer-actions { flex-direction: column; gap: 6px; }
      .ndvi-btn-print { width: 100%; justify-content: center; }
      .geotani-btn-print { width: 100%; justify-content: center; }

      #sidebar-left {
        width: 310px;
        /* Tetap tampil di atas bottom sheet CCTV pada mode mobile. */
        z-index: 1200;
      }

      /* #cctv-search-sheet kini hanya pembungkus, bukan sheet visual.
         Bingkai, radius, padding, dan latar yang dulu ada di sini
         (padding:10px; border:1px solid; border-radius:8px) dihapus,
         karena kartu .geowatch-cctv di dalamnya sudah menyediakan
         semuanya. Kalau tidak, di layar sempit terlihat dua bingkai
         bersarang. */
      #cctv-search-sheet {
        position: static;
        bottom: auto;
        left: auto;
        right: auto;
        height: auto;
        width: 100%;
        z-index: auto;
        transform: none;
        transition: none;
        display: block;
        flex-direction: unset;
        overflow: visible;
        margin-top: 10px;
      }
      /* .cctv-sheet-handle, .sheet-open, dan "> .cctv-card" dihapus:
         kartu sekarang <details class="geowatch-cctv"> dengan kepala
         .gt-card-head, dan handle yang memanggil toggleCctvSheet() sudah
         tidak ada di markup. Selector "> .cctv-card" juga tidak berlaku
         lagi karena kartu bukan anak langsung #cctv-search-sheet dan
         sudah tidak memakai kelas .cctv-card. */
      #cctv-search-sheet #cctvStatus,
      #cctv-search-sheet #cctvResults {
        padding: 0 5px;
      }
      #cctv-search-sheet #cctvResults {
        flex: 1 1 auto;
        min-height: 0;
        max-height: none;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
      }
      #cctv-search-sheet #cctvResults .cctv-result-item {
        box-sizing: border-box;
        margin: 0;
      }

      /* ── Hotspot Bottom Sheet (Mobile: dari bawah, 50vh) ── */
      #hotspot-sheet {
        position: fixed;
        bottom: 0; left: 0; right: 0;
        height: var(--sheet-h, 50vh); height: var(--sheet-h, 50dvh);
        width: 100%;
        border-radius: 16px 16px 0 0;
        z-index: 1100;
        transform: translateY(100%);
        transition: transform 0.3s ease-in-out;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        background: #fff;
        box-shadow: 0 -4px 20px rgba(0,0,0,.15);
        visibility: hidden;
      }
      #hotspot-sheet.sheet-open { transform: translateY(0); visibility: visible; }

      #hotspot-sheet .hs-sheet-handle {
        position: sticky; top: 0; z-index: 2;
        display: flex; justify-content: center; align-items: center;
        padding: 10px 0 6px;
        cursor: grab;
        -webkit-user-select: none; user-select: none;
        background: #fff;
      }
      #hotspot-sheet .hs-sheet-handle::after {
        content: '';
        width: 36px; height: 4px;
        border-radius: 2px;
        background: #c4d5e3;
      }

      .hs-sheet-head {
        display: flex; align-items: center; justify-content: space-between;
        padding: 0 16px 10px;
        border-bottom: 1px solid #f1f5f9;
      }
      .hs-sheet-title {
        display: flex; align-items: center; gap: 6px;
        font-size: 13px; font-weight: 700; color: #1e293b;
      }
      .hs-sheet-close {
        width: 28px; height: 28px;
        display: flex; align-items: center; justify-content: center;
        border: 0; border-radius: 50%;
        background: #f1f5f9; color: #64748b;
        font-size: 16px; cursor: pointer;
        transition: background .15s;
      }
      .hs-sheet-close:hover { background: #e2e8f0; }

      .hs-sheet-body {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding: 12px 16px 20px;
      }

      #detail-panel {
        position: fixed;
        top: auto;
        bottom: -100%;
        left: 0;
        right: 0;
        width: 100%;
        max-width: none;
        height: var(--sheet-h, 50vh);
        height: var(--sheet-h, 50dvh);
        max-height: 90vh;
        max-height: 90dvh;
        border-radius: 16px 16px 0 0;
        z-index: 1100;
        border: 1px solid var(--border-color);
        border-bottom: 0;
        box-shadow: 0 -6px 24px rgba(15, 23, 42, .18);
        transition: bottom .3s ease-in-out;
        margin-bottom: 0;
      }

      #detail-panel .detail-sheet-handle {
        display: block;
        width: 36px;
        height: 4px;
        margin: 8px auto 6px;
        flex: 0 0 auto;
        border-radius: 999px;
        background: var(--border-color);
      }

      #detail-panel .panel-body {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
      }

      #detail-panel.hidden {
        transform: none;
        opacity: 1;
        pointer-events: none;
      }

      #detail-panel.active {
        display: flex !important;
        bottom: 0;
        pointer-events: auto;
      }

      #detail-panel.active.detail-panel-minimized {
        top: auto;
        right: auto;
        bottom: calc(98px + env(safe-area-inset-bottom, 0px));
        left: 50%;
        width: min(300px, calc(100vw - 24px));
        max-width: calc(100vw - 24px);
        height: 52px;
        max-height: 52px;
        border: 1px solid var(--border-color);
        border-radius: 14px;
        transform: translateX(-50%);
      }

      #modal-backdrop.active {
        display: block;
      }

      .detail-panel-btn {
        display: grid !important;
      }
      .alat-grid-2 { grid-template-columns: 1fr; }

      /* AI Sheet — Mobile. --sheet-h diisi sheet-drag.js saat digeser;
         kosong berarti aturan 50dvh yang berlaku. */
      #ai-sheet {
        position: fixed;
        top: auto; right: 0; bottom: 0; left: 0;
        width: 100%;
        height: var(--sheet-h, 50vh); height: var(--sheet-h, 50dvh);
        border-radius: 16px 16px 0 0;
        transform: translateY(100%);
        box-shadow: 0 -4px 20px rgba(0,0,0,.15);
      }
      #ai-sheet.ais-sheet-open { transform: translateY(0); }
      #ai-sheet .ais-sheet-handle {
        position: sticky; top: 0; z-index: 2;
        display: flex; justify-content: center; align-items: center;
        padding: 10px 0 6px; cursor: grab;
        -webkit-user-select: none; user-select: none;
        background: var(--bg-primary);
      }
      #ai-sheet .ais-sheet-handle::after {
        content: '';
        width: 36px; height: 4px;
        border-radius: 2px;
        background: #c4d5e3;
      }
      #ai-sheet .ais-sheet-head { padding: 0 16px 10px; }
      #ai-sheet.ais-sheet-minimized {
        top: 100px; right: auto; bottom: auto; left: 50%;
        width: min(260px, calc(100vw - 48px));
        height: 36px;
        border-radius: 14px;
        transform: translateX(-50%);
        visibility: visible;
        border: 1px solid rgba(255, 255, 255, .72);
        background: rgba(255, 255, 255, .92);
        box-shadow: 0 4px 14px rgba(15, 23, 42, .12);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        z-index: 100;
      }
      #ai-sheet.ais-sheet-minimized .ais-sheet-head {
        min-height: 36px; box-sizing: border-box; padding: 4px 12px; border-bottom: 0;
      }
    }

    /* Styling Komponen Cuaca & Autocomplete Search */
    .weather-card {
      background: #f8f9fa;
      border: 1px solid #e0e0e0;
      border-radius: 8px;
      padding: 12px;
      margin-bottom: 12px;
    }
    .weather-main {
      display: flex;
      align-items: center;
      gap: 12px;
      margin: 10px 0;
      margin-bottom: 60px;
    }
    .weather-temp {
      font-size: 24px;
      font-weight: bold;
    }
    .weather-item {
      display: flex;
      justify-content: space-between;
      font-size: 12px;
      padding: 4px 0;
      border-bottom: 1px dashed #eee;
    }
    .weather-forecast-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 6px 0;
      border-bottom: 1px solid #f0f0f0;
      font-size: 12px;
    }

    .wind-toggle-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 8px;
      margin-bottom: 12px;
    }
    .wind-toggle-label {
      display: flex;
      align-items: center;
      gap: 8px;
      cursor: pointer;
      user-select: none;
    }
    .wind-toggle-label input { display: none; }
    .wind-toggle-track {
      width: 36px; height: 20px;
      background: #ccc;
      border-radius: 10px;
      position: relative;
      transition: background .2s;
      flex-shrink: 0;
    }
    .wind-toggle-label input:checked + .wind-toggle-track {
      background: #1687d4;
    }
    .wind-toggle-thumb {
      position: absolute;
      top: 2px; left: 2px;
      width: 16px; height: 16px;
      background: #fff;
      border-radius: 50%;
      transition: transform .2s;
      box-shadow: 0 1px 3px rgba(0,0,0,.2);
    }
    .wind-toggle-label input:checked + .wind-toggle-track .wind-toggle-thumb {
      transform: translateX(16px);
    }
    .wind-toggle-text {
      font-size: 12px;
      font-weight: 600;
      color: #444;
    }
    .wind-controls {
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .wind-btn {
      background: #1687d4;
      color: #fff;
      border: none;
      border-radius: 4px;
      padding: 3px 8px;
      font-size: 11px;
      cursor: pointer;
      line-height: 1;
    }
    .wind-btn:hover { background: #0d6ebd; }
    .wind-ts {
      font-size: 10px;
      color: #666;
      font-family: monospace;
    }

    /* Styling Autocomplete Box */
    .search-weather-container {
      position: relative;
      margin-bottom: 12px;
    }
    .search-weather-input {
      width: 100%;
      min-height: 38px;
      padding: 9px 12px;
      font-size: 12px;
      line-height: 18px;
      border: 1px solid #ccc;
      border-radius: 6px;
      box-sizing: border-box;
      outline: none;
    }
    .search-weather-input:focus {
      border-color: #007bff;
      box-shadow: 0 0 0 2px rgba(0,123,255,0.1);
    }
    .autocomplete-results {
      position: absolute;
      top: 100%;
      left: 0;
      right: 0;
      background: #ffffff;
      border: 1px solid #ddd;
      border-radius: 0 0 6px 6px;
      max-height: 200px;
      overflow-y: auto;
      z-index: 1000;
      box-shadow: 0 4px 6px rgba(0,0,0,0.1);
      display: none;
    }
    .autocomplete-item {
      padding: 8px 12px;
      font-size: 11px;
      cursor: pointer;
      border-bottom: 1px solid #f5f5f5;
    }
    .autocomplete-item:hover {
      background-color: #f0f7ff;
    }
    .autocomplete-item strong {
      color: #007bff;
    }

    /* Custom Leaflet Weather Icon Marker Badge */
    .weather-marker-icon {
      position: relative;
      min-width: 54px;
      min-height: 54px;
      padding: 5px;
      border: 2px solid #fff;
      border-radius: 18px 18px 18px 4px;
      background: linear-gradient(145deg, #0475bd, #0a4f91);
      color: #fff;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 1px;
      box-shadow: 0 8px 18px rgba(3, 76, 136, .38);
      font-weight: bold;
      font-size: 10px;
      white-space: nowrap;
    }
    .weather-marker-icon::after {
      content: '';
      position: absolute;
      left: 7px;
      bottom: -8px;
      width: 13px;
      height: 13px;
      transform: rotate(45deg);
      border-right: 2px solid #fff;
      border-bottom: 2px solid #fff;
      background: #0a4f91;
    }
    .weather-marker-icon img {
      width: 26px;
      height: 26px;
      filter: drop-shadow(0 1px 1px rgba(0,0,0,.2));
    }
    .bmkg-leaflet-popup .leaflet-popup-content-wrapper { overflow: hidden; padding: 0; border-radius: 14px; box-shadow: 0 14px 40px rgba(11,54,87,.28); }
    .bmkg-leaflet-popup .leaflet-popup-content { width: auto !important; margin: 0; }
    .bmkg-leaflet-popup .leaflet-popup-tip { box-shadow: 0 14px 40px rgba(11,54,87,.28); }
    .bmkg-popup { width: 320px; max-height: min(68vh, 460px); max-height: min(68dvh, 460px); overflow-y: auto; font-family: 'Segoe UI', Arial, sans-serif; color: #153652; scrollbar-width: thin; scrollbar-color: #9ab7cc transparent; }
    .bmkg-popup::-webkit-scrollbar { width: 5px; }.bmkg-popup::-webkit-scrollbar-thumb { border-radius: 4px; background: #9ab7cc; }
    .bmkg-popup-head { padding: 12px 14px; color: #fff; background: linear-gradient(135deg, #0879bf, #0a4d8c); }
    .bmkg-popup-head strong { display: block; font-size: 14px; line-height: 1.25; }
    .bmkg-popup-head span { display: block; margin-top: 2px; font-size: 11px; opacity: .92; }
    .bmkg-popup-weather { display: flex; align-items: center; gap: 12px; padding: 14px; background: linear-gradient(180deg, #f3f9fd, #ffffff); }
    .bmkg-popup-weather img { width: 48px; height: 48px; object-fit: contain; }
    .bmkg-popup-weather > div { min-width: 0; }
    .bmkg-popup-temp { color: #075c9d; font-size: 26px; font-weight: 700; line-height: 1.1; }
    .bmkg-popup-weather span { display: block; margin-top: 2px; color: #5b7690; font-size: 12px; }

    .geoid-marker-wrap { background: transparent; border: 0; }
    .geoid-marker {
      display: grid; place-items: center; width: 46px; height: 46px; border: 3px solid #fff; border-radius: 50% 50% 50% 8px;
      background: linear-gradient(145deg, #2563eb, #1d4ed8); box-shadow: 0 8px 20px rgba(37, 99, 235, .4); transform: rotate(-45deg);
    }
    .geoid-marker svg { width: 25px; height: 25px; transform: rotate(45deg); fill: #fff; }
    .geoid-marker svg circle { fill: #93c5fd; }

    .geotani-marker-wrap { background: transparent; border: 0; }
    .geotani-marker {
      display: grid; place-items: center; width: 46px; height: 46px; border: 3px solid #fff; border-radius: 50% 50% 50% 8px;
      background: linear-gradient(145deg, #16a34a, #15803d); box-shadow: 0 8px 20px rgba(22, 163, 74, .4); transform: rotate(-45deg);
    }
    .geotani-marker svg { width: 25px; height: 25px; transform: rotate(45deg); fill: #fff; }
    .geotani-marker svg circle { fill: #86efac; }
    /* Modern Blue Geoid Popup */
    .geoid-leaflet-popup { max-width: 320px !important; }
    .geoid-leaflet-popup .leaflet-popup-content-wrapper { border-radius: 16px; padding: 0; overflow: hidden; box-shadow: 0 8px 32px rgba(30, 64, 175, .2); border: none; }
    .geoid-leaflet-popup .leaflet-popup-content { width: auto !important; margin: 0; }
    .geoid-leaflet-popup .leaflet-popup-tip { box-shadow: 4px 4px 12px rgba(30, 64, 175, .15); }

    .geoid-popup { width: 320px; font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; color: var(--text-primary); background: var(--bg-primary); overflow: hidden; }

    .geoid-popup-head {
      position: relative;
      padding: 20px 18px 16px;
      color: #fff;
      background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 50%, #3b82f6 100%);
      overflow: hidden;
    }
    .geoid-popup-head::before {
      content: '';
      position: absolute;
      top: -40px; right: -40px;
      width: 120px; height: 120px;
      background: rgba(255,255,255,.08);
      border-radius: 50%;
    }
    .geoid-popup-head::after {
      content: '';
      position: absolute;
      bottom: -30px; left: -20px;
      width: 80px; height: 80px;
      background: rgba(255,255,255,.05);
      border-radius: 50%;
    }

    .geoid-popup-badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 4px 10px;
      border-radius: 20px;
      font-size: 10px;
      font-weight: 700;
      letter-spacing: .06em;
      text-transform: uppercase;
      background: rgba(255,255,255,.2);
      color: #fff;
      margin-bottom: 10px;
      backdrop-filter: blur(4px);
    }
    .geoid-popup-badge-dot {
      width: 7px; height: 7px;
      border-radius: 50%;
      background: #93c5fd;
    }

    .geoid-popup-head strong {
      display: inline;
      font-size: 18px;
      font-weight: 700;
      line-height: 1.2;
      letter-spacing: -.01em;
      position: relative;
      z-index: 1;
      text-shadow: 0 1px 2px rgba(0,0,0,.1);
    }
    .geoid-popup-title-row {
      display: flex;
      align-items: center;
      gap: 6px;
      position: relative;
      z-index: 1;
    }
    .geoid-popup-head > span {
      display: block;
      margin-top: 4px;
      font-size: 12px;
      line-height: 1.4;
      color: rgba(255,255,255,.9);
      position: relative;
      z-index: 1;
    }
    .geoid-copy-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 24px;
      height: 24px;
      padding: 0;
      margin-left: 6px;
      border: 0;
      border-radius: 6px;
      background: rgba(255,255,255,.2);
      color: #fff;
      font-size: 14px;
      cursor: pointer;
      vertical-align: middle;
      transition: background .2s;
      position: relative;
      z-index: 1;
    }
    .geoid-copy-btn:hover { background: rgba(255,255,255,.35); }

    .geoid-popup-meta {
      padding: 8px 18px;
      display: grid;
      gap: 0;
      background: #f8fafc;
      border-bottom: 1px solid #dbeafe;
    }
    .geoid-popup-meta div {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      font-size: 13px;
      padding: 4px 0;
      border-bottom: 1px solid #eef3f8;
    }
    .geoid-popup-meta div:last-child { border-bottom: none; }
    .geoid-popup-meta span {
      color: #64748b;
      font-weight: 500;
    }
    .geoid-popup-meta b {
      color: #1e40af;
      font-size: 13px;
      font-weight: 700;
      text-align: right;
      word-break: break-word;
    }

    .geoid-popup-insights {
      padding: 14px 18px;
      display: grid;
      gap: 12px;
      background: #fff;
      border-bottom: 1px solid #e0e7ff;
    }
    .geoid-popup-insights > div + div {
      padding-top: 12px;
      border-top: 1px solid #e0e7ff;
    }
    .geoid-popup-insights div { display: grid; gap: 4px; }
    .geoid-popup-insights b { color: #1e40af; font-size: 13px; font-weight: 700; }
    .geoid-popup-insights span { color: #475569; font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; }

    .geoid-popup-cctv {
      padding: 14px 18px;
      background: #f8fafc;
      border-bottom: 1px solid #e0e7ff;
    }
    .geoid-popup-cctv div { display: grid; gap: 4px; }
    .geoid-popup-cctv b { color: #1e40af; font-size: 13px; font-weight: 700; }
    .geoid-popup-cctv span { color: #475569; font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; }
    .geoid-cctv-insight { position: relative; padding-right: 42px; }
    .geoid-cctv-button { position: absolute; top: 50%; right: 0; display: grid; place-items: center; width: 32px; height: 32px; padding: 0 0 0 2px; border: 0; border-radius: 50%; background: #2563eb; color: #fff; font-size: 13px; cursor: pointer; transform: translateY(-50%); box-shadow: 0 2px 8px rgba(37, 99, 235, .3); }
    .geoid-cctv-button:hover { background: #1d4ed8; }

    .geoid-popup-cctv-section {
      padding: 8px 10px;
      background: #f8fafc;
      border-bottom: 1px solid #dbeafe;
    }
    .geoid-popup-cctv-section > b { display: block; color: #1e40af; font-size: 13px; font-weight: 700; margin-bottom: 4px; }
    .geoid-popup-cctv-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 13px; padding: 4px 0; }
    .geoid-popup-cctv-row span { color: #64748b; font-weight: 500; }
    .geoid-popup-cctv-row b { color: #1e40af; font-size: 13px; font-weight: 700; text-align: right; word-break: break-word; }
    .geoid-popup-cctv-btn { display: flex; justify-content: center; padding-top: 4px; }
    .geoid-popup-cctv-btn button { width: 100%; padding: 8px; border: 1px solid #bfdbfe; border-radius: 8px; background: #f0f7ff; cursor: pointer; font-size: 12px; color: #0b4da2; font-weight: 600; transition: background .2s; }
    .geoid-popup-cctv-btn button:hover { background: #dbeafe; }
    .geoid-cctv-insight { position: relative; padding-right: 42px; }
    .geoid-cctv-button { position: absolute; top: 50%; right: 0; display: grid; place-items: center; width: 32px; height: 32px; padding: 0 0 0 2px; border: 0; border-radius: 50%; background: #2563eb; color: #fff; font-size: 13px; cursor: pointer; transform: translateY(-50%); box-shadow: 0 2px 8px rgba(37, 99, 235, .3); }
    .geoid-cctv-button:hover { background: #1d4ed8; }

    .geoid-popup-risiko-section {
      padding: 8px 10px;
      background: #f8fafc;
      border-bottom: 1px solid #dbeafe;
    }
    .geoid-popup-risiko-section > b { display: block; color: #1e40af; font-size: 13px; font-weight: 700; margin-bottom: 4px; }
    .geoid-popup-risiko-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 13px; padding: 4px 0; }
    .geoid-popup-risiko-row span { color: #64748b; font-weight: 500; }
    .geoid-popup-risiko-row b { color: #1e40af; font-size: 13px; font-weight: 700; text-align: left; word-break: break-word; }
    .geoid-popup-risiko-sep { border-top: 1px solid #e0e7ff; margin: 2px 0; }
    .geoid-popup-risiko-btn { display: flex; justify-content: center; padding-top: 4px; }
    .geoid-popup-risiko-btn button { width: 100%; padding: 8px; border: 1px solid #fecaca; border-radius: 8px; background: #fef2f2; cursor: pointer; font-size: 12px; color: #dc2626; font-weight: 600; transition: background .2s; }
    .geoid-popup-risiko-btn button:hover { background: #fee2e2; }
    .geoid-risiko-wrap { position: relative; padding-right: 42px; }
    .geoid-risiko-button { position: absolute; top: 0; right: 0; display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%; background: #dc2626; color: #fff; font-size: 13px; cursor: pointer; box-shadow: 0 2px 8px rgba(220, 38, 38, .3); }
    .geoid-risiko-button:hover { background: #b91c1c; }

    /* Scrollable Popup */
    .geoid-popup-scroll { max-height: 60vh; }
    .geoid-popup-scroll .geoid-popup-body { max-height: calc(60vh - 100px); overflow-y: auto; scrollbar-width: thin; scrollbar-color: #93c5fd transparent; }
    .geoid-popup-scroll .geoid-popup-body::-webkit-scrollbar { width: 4px; }
    .geoid-popup-scroll .geoid-popup-body::-webkit-scrollbar-track { background: transparent; }
    .geoid-popup-scroll .geoid-popup-body::-webkit-scrollbar-thumb { background: #93c5fd; border-radius: 10px; }

    /* Modern Green Geotani Popup */
    .geotani-leaflet-popup { max-width: 320px !important; }
    .geotani-leaflet-popup .leaflet-popup-content-wrapper { border-radius: 16px; padding: 0; overflow: hidden; box-shadow: 0 8px 32px rgba(22, 163, 74, .2); border: none; }
    .geotani-leaflet-popup .leaflet-popup-content { width: auto !important; margin: 0; }
    .geotani-leaflet-popup .leaflet-popup-tip { box-shadow: 4px 4px 12px rgba(22, 163, 74, .15); }

    .geotani-popup { width: 320px; max-height: 40vh; overflow-y: auto; font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; color: var(--text-primary); background: var(--bg-primary); overflow-x: hidden; }

    .geotani-popup-head {
      position: relative;
      padding: 20px 18px 16px;
      color: #fff;
      background: linear-gradient(135deg, #166534 0%, #16a34a 50%, #22c55e 100%);
      overflow: hidden;
    }
    .geotani-popup-head::before {
      content: '';
      position: absolute;
      top: -40px; right: -40px;
      width: 120px; height: 120px;
      background: rgba(255,255,255,.08);
      border-radius: 50%;
    }
    .geotani-popup-head::after {
      content: '';
      position: absolute;
      bottom: -30px; left: -20px;
      width: 80px; height: 80px;
      background: rgba(255,255,255,.05);
      border-radius: 50%;
    }

    .geotani-popup-badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 4px 10px;
      border-radius: 20px;
      font-size: 10px;
      font-weight: 700;
      letter-spacing: .06em;
      text-transform: uppercase;
      background: rgba(255,255,255,.2);
      color: #fff;
      margin-bottom: 10px;
      backdrop-filter: blur(4px);
    }
    .geotani-popup-badge-dot {
      width: 7px; height: 7px;
      border-radius: 50%;
      background: #86efac;
    }

    .geotani-popup-head strong {
      display: block;
      font-size: 18px;
      font-weight: 700;
      line-height: 1.2;
      letter-spacing: -.01em;
      position: relative;
      z-index: 1;
      text-shadow: 0 1px 2px rgba(0,0,0,.1);
    }
    .geotani-popup-head > span {
      display: block;
      margin-top: 4px;
      font-size: 12px;
      line-height: 1.4;
      color: rgba(255,255,255,.9);
      position: relative;
      z-index: 1;
    }

    .geotani-popup-meta {
      padding: 14px 18px;
      display: grid;
      gap: 0;
      background: linear-gradient(180deg, #f0fdf4 0%, #fff 100%);
      border-bottom: 1px solid #dcfce7;
    }
    .geotani-popup-meta div {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      font-size: 13px;
      padding: 8px 0;
      border-bottom: 1px solid #d1fae5;
    }
    .geotani-popup-meta div:last-child { border-bottom: none; }
    .geotani-popup-meta span {
      color: #64748b;
      font-weight: 500;
    }
    .geotani-popup-meta b {
      color: #166534;
      font-size: 13px;
      font-weight: 700;
      text-align: right;
      word-break: break-word;
    }

    .geotani-popup-insights {
      padding: 14px 18px;
      display: grid;
      gap: 12px;
      background: #fff;
      border-bottom: 1px solid #dcfce7;
    }
    .geotani-popup-insights > div + div {
      padding-top: 12px;
      border-top: 1px solid #dcfce7;
    }
    .geotani-popup-insights div { display: grid; gap: 4px; }
    .geotani-popup-insights b { color: #166534; font-size: 13px; font-weight: 700; }
    .geotani-popup-insights span { color: #475569; font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; }

    /* Modern Green KTA Popup */
    .kta-leaflet-popup { max-width: 320px !important; }
    .kta-leaflet-popup .leaflet-popup-content-wrapper { border-radius: 16px; padding: 0; overflow: hidden; box-shadow: 0 8px 32px rgba(22, 163, 74, .25); border: none; }
    .kta-leaflet-popup .leaflet-popup-content { width: auto !important; margin: 0; }
    .kta-leaflet-popup .leaflet-popup-tip { box-shadow: 4px 4px 12px rgba(22, 163, 74, .15); }

    .kta-popup { width: 320px; max-height: 40vh; font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; color: #1e293b; background: #fff; overflow: hidden; }

    .kta-popup-header {
      position: relative;
      padding: 20px 18px 16px;
      color: #fff;
      background: linear-gradient(135deg, #14532d 0%, #166534 40%, #16a34a 100%);
      overflow: hidden;
    }
    .kta-popup-header::before {
      content: '';
      position: absolute;
      top: -40px; right: -40px;
      width: 120px; height: 120px;
      background: rgba(255,255,255,.08);
      border-radius: 50%;
    }
    .kta-popup-header::after {
      content: '';
      position: absolute;
      bottom: -30px; left: -20px;
      width: 80px; height: 80px;
      background: rgba(255,255,255,.05);
      border-radius: 50%;
    }

    .kta-popup-badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 4px 10px;
      border-radius: 20px;
      font-size: 10px;
      font-weight: 700;
      letter-spacing: .06em;
      text-transform: uppercase;
      background: rgba(255,255,255,.2);
      color: #fff;
      margin-bottom: 10px;
      backdrop-filter: blur(4px);
    }
    .kta-popup-badge-dot {
      width: 7px; height: 7px;
      border-radius: 50%;
      background: #86efac;
      animation: kta-pulse 1.5s infinite;
    }
    @keyframes kta-pulse {
      0%, 100% { opacity: 1; transform: scale(1); }
      50% { opacity: .5; transform: scale(1.2); }
    }

    .kta-popup-header strong {
      display: block;
      font-size: 18px;
      font-weight: 700;
      line-height: 1.2;
      letter-spacing: -.01em;
      position: relative;
      z-index: 1;
      text-shadow: 0 1px 2px rgba(0,0,0,.1);
    }
    .kta-popup-header > span {
      display: block;
      margin-top: 4px;
      font-size: 12px;
      line-height: 1.4;
      color: rgba(255,255,255,.9);
      position: relative;
      z-index: 1;
    }

    .kta-popup-body {
      padding: 14px 18px;
      background: #fff;
      max-height: 40vh;
      overflow-y: auto;
    }
    .kta-popup-body b { color: #166534; }
    .kta-popup-body span { color: #475569; }

    .kta-marker-wrap { background: transparent; border: 0; }
    .kta-marker {
      width: 32px; height: 32px;
      border-radius: 50%;
      background: linear-gradient(145deg, #16a34a, #15803d);
      display: flex; align-items: center; justify-content: center;
      font-size: 16px;
      box-shadow: 0 4px 12px rgba(22, 163, 74, .4);
      border: 2px solid #fff;
    }

    /* Modern Gray Boundary Popup */
    .boundary-leaflet-popup { max-width: 320px !important; }
    .boundary-leaflet-popup .leaflet-popup-content-wrapper { border-radius: 14px; padding: 0; overflow: hidden; box-shadow: 0 6px 24px rgba(0, 0, 0, .15); border: none; }
    .boundary-leaflet-popup .leaflet-popup-content { width: auto !important; margin: 0; }
    .boundary-leaflet-popup .leaflet-popup-tip { box-shadow: 3px 3px 8px rgba(0, 0, 0, .1); }

    .boundary-popup { width: 320px; font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; color: #1e293b; background: #fff; overflow: hidden; }

    .boundary-popup-header {
      position: relative;
      padding: 16px 16px 14px;
      color: #fff;
      background: linear-gradient(135deg, #374151 0%, #4b5563 50%, #6b7280 100%);
      overflow: hidden;
    }
    .boundary-popup-header::before {
      content: '';
      position: absolute;
      top: -30px; right: -30px;
      width: 80px; height: 80px;
      background: rgba(255,255,255,.08);
      border-radius: 50%;
    }

    .boundary-popup-badge {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      padding: 3px 8px;
      border-radius: 16px;
      font-size: 9px;
      font-weight: 700;
      letter-spacing: .05em;
      text-transform: uppercase;
      background: rgba(255,255,255,.18);
      color: #fff;
      margin-bottom: 8px;
      backdrop-filter: blur(4px);
    }
    .boundary-popup-badge-dot {
      width: 6px; height: 6px;
      border-radius: 50%;
      background: #d1d5db;
    }

    .boundary-popup-header strong {
      display: block;
      font-size: 16px;
      font-weight: 700;
      line-height: 1.2;
      letter-spacing: -.01em;
      position: relative;
      z-index: 1;
      text-shadow: 0 1px 2px rgba(0,0,0,.1);
    }
    .boundary-popup-header > span {
      display: block;
      margin-top: 3px;
      font-size: 11px;
      line-height: 1.3;
      color: rgba(255,255,255,.85);
      position: relative;
      z-index: 1;
    }

    .boundary-popup-body {
      padding: 12px 16px;
      background: #f9fafb;
    }

    .boundary-popup-meta {
      display: grid;
      gap: 8px;
    }

    .boundary-popup-meta-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 6px 10px;
      background: #fff;
      border-radius: 8px;
      border: 1px solid #e5e7eb;
    }

    .boundary-popup-meta-label {
      font-size: 11px;
      color: #6b7280;
      font-weight: 500;
    }

    .boundary-popup-meta-value {
      font-size: 12px;
      font-weight: 700;
      color: #374151;
    }

    .boundary-btn-download {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 5px 10px;
      font-size: 10px;
      font-weight: 600;
      color: #2563eb;
      background: #eff6ff;
      border: 1px solid #bfdbfe;
      border-radius: 6px;
      cursor: pointer;
      transition: background .15s, border-color .15s;
    }
    .boundary-btn-download:hover {
      background: #dbeafe;
      border-color: #93c5fd;
    }

    /* Modern Green Irisan Popup */
    .irisan-leaflet-popup { max-width: 320px !important; }
    .irisan-leaflet-popup .leaflet-popup-content-wrapper { border-radius: 14px; padding: 0; overflow: hidden; box-shadow: 0 6px 24px rgba(22, 163, 74, .2); border: none; }
    .irisan-leaflet-popup .leaflet-popup-content { width: auto !important; margin: 0; }
    .irisan-leaflet-popup .leaflet-popup-tip { box-shadow: 3px 3px 8px rgba(22, 163, 74, .12); }

    .irisan-popup { width: 320px; font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; color: #1e293b; background: #fff; overflow: hidden; }

    .irisan-popup-header {
      position: relative;
      padding: 14px 14px 12px;
      color: #fff;
      background: linear-gradient(135deg, #14532d 0%, #166534 50%, #22c55e 100%);
      overflow: hidden;
    }
    .irisan-popup-header::before {
      content: '';
      position: absolute;
      top: -25px; right: -25px;
      width: 70px; height: 70px;
      background: rgba(255,255,255,.08);
      border-radius: 50%;
    }

    .irisan-popup-badge {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      padding: 3px 8px;
      border-radius: 14px;
      font-size: 9px;
      font-weight: 700;
      letter-spacing: .05em;
      text-transform: uppercase;
      background: rgba(255,255,255,.18);
      color: #fff;
      margin-bottom: 6px;
      backdrop-filter: blur(4px);
    }
    .irisan-popup-badge-dot {
      width: 6px; height: 6px;
      border-radius: 50%;
      background: #86efac;
    }

    .irisan-popup-header strong {
      display: block;
      font-size: 14px;
      font-weight: 700;
      line-height: 1.2;
      position: relative;
      z-index: 1;
    }

    .irisan-popup-body {
      padding: 12px 14px;
      background: #fff;
    }

    .irisan-popup-detail {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 6px 10px;
      font-size: 11px;
    }
    .irisan-popup-detail span { color: #64748b; }
    .irisan-popup-detail b { color: #166534; font-weight: 600; }

    .irisan-popup-progress {
      grid-column: 1 / -1;
      margin-top: 6px;
      padding-top: 6px;
      border-top: 1px dashed #d1fae5;
    }
    .irisan-popup-progress-label {
      font-size: 10px;
      color: #64748b;
      margin-bottom: 3px;
    }
    .irisan-popup-progress-bar {
      height: 6px;
      border-radius: 3px;
      background: linear-gradient(to right, #4caf50, #8bc34a, #ffc107, #ff5722, #b71c1c);
      position: relative;
    }
    .irisan-popup-progress-marker {
      position: absolute;
      top: -2px;
      width: 2px;
      height: 10px;
      background: #333;
      border-radius: 1px;
      transform: translateX(-1px);
    }
    .irisan-popup-progress-scale {
      display: flex;
      justify-content: space-between;
      font-size: 8px;
      color: #9ca3af;
      margin-top: 1px;
    }

    .irisan-popup-meta {
      grid-column: 1 / -1;
      margin-top: 8px;
      padding-top: 8px;
      border-top: 1px solid #e5e7eb;
    }
    .irisan-popup-meta-title {
      font-size: 10px;
      font-weight: 700;
      color: #374151;
      margin-bottom: 6px;
      letter-spacing: .03em;
    }
    .irisan-popup-meta-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 4px 8px;
      font-size: 10px;
    }
    .irisan-popup-meta-grid span { color: #64748b; line-height: 1.4; }
    .irisan-popup-meta-grid b { color: #166534; font-weight: 600; overflow-wrap: anywhere; line-height: 1.4; }

    .irisan-popup-footer {
      padding: 8px 14px;
      background: #f0fdf4;
      border-top: 1px solid #dcfce7;
      text-align: center;
    }
    .irisan-popup-footer span {
      font-size: 9px;
      color: #64748b;
    }



    /* Geoid Summary Cards */
    .geoid-summary-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 16px; }
    .geoid-summary-box {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 14px 8px 12px;
      border-radius: 12px;
      background: #fff;
      border: 1px solid #e8eef3;
      box-shadow: 0 2px 8px rgba(0,0,0,0.04);
      transition: transform .15s, box-shadow .15s;
      min-width: 0;
    }
    .geoid-summary-box:hover { transform: translateY(-2px); box-shadow: 0 4px 14px rgba(0,0,0,0.08); }
    .geoid-summary-count {
      font-size: 36px; font-weight: 800; line-height: 1; letter-spacing: -0.03em;
      font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    }
    .geoid-summary-label {
      font-size: 11px; font-weight: 600; color: #64748b; text-transform: uppercase;
      margin-top: 4px; letter-spacing: 0.03em;
    }
    .geoid-summary-prov .geoid-summary-count { color: #0879bf; }
    .geoid-summary-prov { background: linear-gradient(135deg, #f0f9ff, #e0f2fe); border-color: #bae6fd; }
    .geoid-summary-kab .geoid-summary-count { color: #7c3aed; }
    .geoid-summary-kab { background: linear-gradient(135deg, #faf5ff, #f3e8ff); border-color: #ddd6fe; }
    .geoid-summary-kec .geoid-summary-count { color: #d97706; }
    .geoid-summary-kec { background: linear-gradient(135deg, #fffbeb, #fef3c7); border-color: #fde68a; }
    .geoid-summary-desa .geoid-summary-count { color: #16a34a; }
    .geoid-summary-desa { background: linear-gradient(135deg, #f0fdf4, #dcfce7); border-color: #bbf7d0; }

    /* Geoid Search Autocomplete */
    .geoid-search-container { position: relative; margin-bottom: 14px; }
    .geoid-search-input {
      width: 100%;
      padding: 9px 12px;
      font-size: 12px;
      border: 1px solid #c4d5e3;
      border-radius: 6px;
      box-sizing: border-box;
      outline: none;
      background: #f7fafc;
    }
    .geoid-search-input:focus {
      border-color: #007bff;
      box-shadow: 0 0 0 2px rgba(0,123,255,0.1);
      background: #fff;
    }
    .geoid-autocomplete-results {
      position: absolute;
      top: 100%;
      left: 0;
      right: 0;
      background: #ffffff;
      border: 1px solid #c4d5e3;
      border-top: 0;
      border-radius: 0 0 8px 8px;
      max-height: 240px;
      overflow-y: auto;
      z-index: 1000;
      box-shadow: 0 6px 16px rgba(17,59,91,0.15);
      display: none;
    }
    .geoid-autocomplete-item {
      padding: 9px 12px;
      font-size: 11px;
      cursor: pointer;
      border-bottom: 1px solid #eef4f8;
      transition: background 0.15s;
    }
    .geoid-autocomplete-item:hover { background-color: #f0f7ff; }
    .geoid-autocomplete-item strong { color: #0b4da2; font-size: 12px; }
    .geoid-autocomplete-item small { color: #777; display: block; margin-top: 2px; }
    .geoid-autocomplete-item .geoid-ac-kode { color: #007bff; font-size: 10px; margin-left: 4px; }
    .geoid-ac-header {
      padding: 6px 12px 4px;
      font-size: 10px;
      font-weight: 700;
      letter-spacing: .06em;
      text-transform: uppercase;
      color: #7a8fa3;
      background: #f5f8fa;
      border-bottom: 1px solid #eef4f8;
      user-select: none;
    }
    .geoid-ac-geocode { border-left: 3px solid #1677d2; }
    .geoid-ac-geocode strong { color: #1677d2; }
    .geoid-ac-geocode-addr { color: #777; font-size: 10px; }
    .geoid-search-hint { font-size: 11px; color: #7a8fa3; margin-top: 4px; }

    /* GEOID Coordinate Search */

    /* Panel prakiraan 3 hari BMKG */
    .weather-panel {
      color: #fff;
    }
    .weather-hero {
      color: #fff;
      padding: 16px;
      border-radius: 14px;
      background: linear-gradient(135deg, #0b5cab, #1687d4 58%, #64c7f5);
      box-shadow: 0 10px 22px rgba(16, 102, 177, .22);
    }
    .weather-hero-location {
      margin: 0;
      font-size: 14px;
      font-weight: 700;
    }
    .weather-hero-region,
    .weather-source {
      margin: 10px 0 0;
      font-size: 6px;
      opacity: .88;
    }
    .weather-now {
      display: flex;
      align-items: center;
      gap: 10px;
      margin: 12px 0;
    }
    .weather-now img {
      width: 54px;
      height: 54px;
      object-fit: contain;
    }
    .weather-now-temp {
      font-size: 32px;
      font-weight: 700;
      line-height: 1;
    }
    .weather-now-desc {
      margin-top: 4px;
      font-size: 12px;
    }
    .weather-metrics {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 6px;
    }
    .weather-metric {
      padding: 7px 5px;
      border-radius: 8px;
      background: rgba(255,255,255,.16);
      text-align: center;
      font-size: 10px;
      color: #fff;
    }
    .weather-metric strong {
      display: block;
      margin-top: 2px;
      font-size: 11px;
      color: #fff;
    }
    .weather-insights {
      margin: 14px 0 0;
      padding: 12px 14px;
      background: linear-gradient(135deg, #f0f7ff 0%, #e8f5e9 100%);
      border: 1px solid #d0e8f5;
      border-radius: 12px;
    }
    .wi-badges {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
    }
    .wi-badge {
      display: inline-flex;
      align-items: center;
      gap: 3px;
      padding: 3px 8px;
      border-radius: 20px;
      font-size: 10px;
      font-weight: 600;
      white-space: nowrap;
    }
    .bmkg-popup .weather-insights {
      margin: 10px 0 0;
      padding: 8px 10px;
      background: linear-gradient(135deg, #f0f7ff 0%, #e8f5e9 100%);
      border: 1px solid #d0e8f5;
      border-radius: 0;
    }
    .bmkg-popup .wi-badges {
      gap: 4px;
    }
    .bmkg-popup .wi-badge {
      padding: 2px 6px;
      font-size: 9px;
    }
    .weather-days-title {
      margin: 16px 0 8px;
      padding: 9px 12px;
      border-radius: 10px;
      font-size: 14px;
      font-weight: 700;
      color: #fff;
      background: #0879bf;
    }
    .weather-days-grid {
      display: grid;
      gap: 9px;
    }
    .weather-day-card {
      overflow: hidden;
      border: 1px solid #e5edf5;
      border-radius: 12px;
      background: #fff;
      box-shadow: 0 4px 12px rgba(19, 59, 92, .07);
    }
    .weather-day-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 9px 11px;
      background: #f4f9fd;
      font-size: 11px;
      font-weight: 700;
      color: #16466c;
    }
    .weather-day-summary {
      color: #46718f;
      font-size: 10px;
      font-weight: 600;
    }
    .weather-slots {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      padding: 6px;
      gap: 4px;
    }
    .weather-slot {
      min-width: 0;
      padding: 5px 2px;
      border-radius: 7px;
      text-align: center;
      font-size: 9px;
      color: #16466c;
    }
    .weather-slot:hover { background: #edf7ff; }
    .weather-slot img { display: block; width: 25px; height: 25px; margin: 2px auto; object-fit: contain; }
    .weather-slot-temp { color: #145b93; font-weight: 700; }
    .weather-source { color: #567; text-align: center; font-size: 9px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

    /* Temperature Chart */
    .temp-chart-section {
      margin: 16px 0 8px;
      padding: 14px 12px 10px;
      border-radius: 14px;
      background: #fff;
      border: 1px solid #e5edf5;
      box-shadow: 0 4px 12px rgba(19, 59, 92, .06);
    }
    .temp-chart-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 8px;
    }
    .temp-chart-title {
      margin: 0;
      font-size: 13px;
      font-weight: 700;
      color: #173b5d;
    }
    .temp-chart-legend {
      display: flex;
      gap: 10px;
    }
    .temp-chart-legend-item {
      display: flex;
      align-items: center;
      gap: 4px;
      font-size: 11px;
      font-weight: 600;
      color: #54708d;
    }
    .temp-chart-legend-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
    }
    .temp-chart-container {
      width: 100%;
      overflow-x: auto;
      scrollbar-width: thin;
      scrollbar-color: #c4d5e3 transparent;
    }
    .temp-chart-container::-webkit-scrollbar { height: 4px; }
    .temp-chart-container::-webkit-scrollbar-track { background: transparent; }
    .temp-chart-container::-webkit-scrollbar-thumb { background: #c4d5e3; border-radius: 10px; }
    .temp-chart-svg {
      display: block;
      width: 100%;
      min-width: 500px;
      height: auto;
    }
    .temp-chart-ylabel {
      fill: #7a8fa3;
      font-size: 10px;
      font-family: "Segoe UI", Arial, sans-serif;
    }
    .temp-chart-xlabel {
      fill: #7a8fa3;
      font-size: 9px;
      font-family: "Segoe UI", Arial, sans-serif;
    }
    .temp-chart-xday {
      fill: #145b93;
      font-size: 9px;
      font-weight: 700;
      font-family: "Segoe UI", Arial, sans-serif;
    }
    .temp-chart-val {
      fill: #145b93;
      font-size: 9px;
      font-weight: 700;
      font-family: "Segoe UI", Arial, sans-serif;
    }
    .temp-chart-dot {
      transition: r .15s ease;
      cursor: pointer;
    }
    .temp-chart-dot:hover {
      r: 5.5;
      stroke-width: 2.5;
    }

    /* Panel Gempa BMKG */
    .quake-toolbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
    .quake-toolbar h4 { margin: 0; color: #173b5d; font-size: 14px; }
    .quake-refresh { border: 0; border-radius: 7px; padding: 6px 8px; color: #fff; background: #0879bf; cursor: pointer; font-size: 10px; }
    .quake-refresh-wrap { text-align: center; margin: 10px 0 4px; }
    .quake-latest { width: 100%; box-sizing: border-box; overflow: hidden; margin-bottom: 12px; padding: 16px; border-radius: 14px; color: #fff; background: linear-gradient(135deg, #a71d2a, #dc3545 58%, #f06e7a); box-shadow: 0 10px 22px rgba(220, 53, 69, .22); }
    .quake-latest-main { display: flex; gap: 10px; align-items: center; margin: 12px 0; }
    .quake-magnitude { flex: 0 0 54px; height: 54px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.4); border-radius: 50%; background: rgba(0,0,0,.12); font-size: 22px; font-weight: 700; color: #fff; }
    .quake-latest .quake-latest-title { margin: 0 0 4px; font-size: 15px; color: #fff; }
    .quake-latest-place { font-size: 10px; line-height: 1.35; opacity: .95; }
    .quake-latest-details { display: grid; grid-template-columns: repeat(2, 1fr); background: rgba(0,0,0,.13); }
    .quake-latest-details span { padding: 7px 5px; border-right: 1px solid rgba(255,255,255,.15); text-align: center; font-size: 9px; }
    .quake-latest-details b { display: block; margin-top: 2px; font-size: 10px; }
    .quake-latest-potensi { padding: 7px 10px; background: rgba(0,0,0,.13); text-align: center; font-size: 9px; border-top: 1px solid rgba(255,255,255,.15); }
    .quake-latest-potensi b { margin-left: 4px; font-size: 10px; }
    .quake-section { margin: 10px 0 0 5px; }
    .quake-section-title { display: flex; align-items: center; justify-content: space-between; margin: 0 0 7px; color: #244b6e; font-size: 11px; }
    .quake-count { padding: 2px 6px; border-radius: 99px; color: #0879bf; background: #e8f4fc; font-size: 9px; }
    .quake-list { display: grid; gap: 7px; max-height: 300px; overflow-y: auto; padding-right: 2px; }
    .quake-card { display: grid; grid-template-columns: 38px 1fr; gap: 8px; padding: 9px; border: 1px solid #e6eef5; border-radius: 10px; background: #fff; box-shadow: 0 3px 9px rgba(24, 73, 111, .05); cursor: pointer; transition: background 0.15s, border-color 0.15s; }
    .quake-card:hover { background: #f0f6ff; border-color: #b8d4e8; }
    .quake-card-mag { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 9px; color: #dc3545; background: #fdf0f1; font-size: 13px; font-weight: 700; }
    .quake-card-place { overflow: hidden; color: #183d5e; font-size: 10px; font-weight: 700; line-height: 1.35; }
    .quake-card-meta { margin-top: 3px; color: #668198; font-size: 9px; }
    .quake-card-feel { margin-top: 4px; color: #9a3c27; font-size: 9px; }
    .quake-attribution { margin: 3px 0 0; color: #71869a; font-size: 6px; text-align: right; margin-bottom: 0}
    .quake-message { padding: 12px; border-radius: 0px; color: #567; background: transparent; font-size: 11px; text-align: center; }

    /* Hotspot Summary Card */
    .hotspot-summary { overflow: hidden; margin-bottom: 12px; border-radius: 14px; color: #fff; background: linear-gradient(135deg, #b45309, #f59e0b 62%, #fbbf24); box-shadow: 0 9px 18px rgba(245, 158, 11, .25); }
    .hotspot-summary-main { display: flex; gap: 12px; align-items: center; padding: 13px; }
    .hotspot-summary-icon { flex: 0 0 54px; height: 54px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.4); border-radius: 50%; background: rgba(0,0,0,.12); font-size: 24px; }
    .hotspot-summary .hotspot-summary-title { margin: 0 0 4px; font-size: 15px; color: #fff; }
    .hotspot-summary-count { font-size: 10px; line-height: 1.35; opacity: .95; }
    .hotspot-summary-details { display: grid; grid-template-columns: repeat(3, 1fr); background: rgba(0,0,0,.13); }
    .hotspot-summary-details span { padding: 7px 5px; border-right: 1px solid rgba(255,255,255,.15); text-align: center; font-size: 9px; }
    .hotspot-summary-details b { display: block; margin-top: 2px; font-size: 10px; }
    .hotspot-summary-waktu { padding: 7px 5px; background: rgba(0,0,0,.13); text-align: center; font-size: 9px; border-top: 1px solid rgba(255,255,255,.15); }
    .hotspot-summary-waktu b { display: block; margin-top: 2px; font-size: 10px; }

    /* CO2 Chart */
    .co2-chart { margin-top: 16px; border: 1px solid #e5e7eb; border-radius: 10px; background: #fff; overflow: hidden; }
    .co2-chart-header { padding: 12px 14px 8px; }
    .co2-chart-title { font-size: 11px; font-weight: 700; color: #1e293b; margin: 0 0 2px; }
    .co2-chart-subtitle { font-size: 8px; color: #94a3b8; }
    .co2-chart-body { padding: 8px 14px 14px; }
    .co2-chart-bars { display: flex; align-items: flex-end; gap: 6px; height: 140px; }
    .co2-chart-bar-wrap { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; height: 100%; justify-content: flex-end; }
    .co2-chart-bar { width: 100%; border-radius: 4px 4px 0 0; background: linear-gradient(180deg, #f97316, #ea580c); transition: height .4s ease; position: relative; min-height: 2px; }
    .co2-chart-bar:hover { filter: brightness(1.1); }
    .co2-chart-bar-val { font-size: 7px; font-weight: 700; color: #334155; white-space: nowrap; text-align: center; }
    .co2-chart-bar-label { font-size: 7px; color: #94a3b8; text-align: center; }

    .luas-chart { margin-top: 12px; border: 1px solid #e5e7eb; border-radius: 10px; background: #fff; overflow: hidden; }
    .luas-chart-header { padding: 12px 14px 8px; }
    .luas-chart-title { font-size: 11px; font-weight: 700; color: #1e293b; margin: 0 0 2px; }
    .luas-chart-subtitle { font-size: 8px; color: #94a3b8; }
    .luas-chart-body { padding: 8px 14px 14px; overflow-x: auto; }
    .luas-chart-bars { display: flex; align-items: flex-end; gap: 6px; height: 140px; min-width: max-content; }
    .luas-chart-bar-wrap { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; height: 100%; justify-content: flex-end; }
    .luas-chart-bar { width: 100%; min-width: 18px; max-width: 32px; border-radius: 4px 4px 0 0; background: linear-gradient(180deg, #ef4444, #dc2626); transition: height .4s ease; position: relative; min-height: 2px; }
    .luas-chart-bar:hover { filter: brightness(1.1); }
    .luas-chart-bar-val { font-size: 7px; font-weight: 700; color: #334155; white-space: nowrap; text-align: center; }
    .luas-chart-bar-label { font-size: 7px; color: #94a3b8; text-align: center; }

    .hs-table-wrap { margin-top: 12px; border: 1px solid #e5e7eb; border-radius: 10px; background: #fff; overflow: hidden; }
    .hs-table-header { padding: 12px 14px 6px; display: flex; justify-content: space-between; align-items: center; }
    .hs-table-title { font-size: 11px; font-weight: 700; color: #1e293b; }
    .hs-table-total { font-size: 8px; color: #94a3b8; }
    .hs-cat-items { display: flex; gap: 12px; padding: 0 14px 8px; flex-wrap: wrap; }
    .hs-cat-item { font-size: 8px; color: #64748b; display: flex; align-items: center; gap: 3px; }
    .hs-cat-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
    .hs-table-controls { display: flex; gap: 6px; padding: 0 14px 8px; flex-wrap: wrap; }
    .hs-search-input { flex: 1; min-width: 120px; padding: 5px 8px; border: 1px solid #e5e7eb; border-radius: 6px; font-size: 8px; outline: none; }
    .hs-search-input:focus { border-color: #3b82f6; }
    .hs-select { padding: 5px 8px; border: 1px solid #e5e7eb; border-radius: 6px; font-size: 8px; background: #fff; outline: none; }
    .hs-select:focus { border-color: #3b82f6; }
    .hs-table-scroll { overflow-x: auto; }
    .hs-table { width: 100%; border-collapse: collapse; font-size: 8px; }
    .hs-table th { background: #f8fafc; color: #64748b; font-weight: 600; text-align: left; padding: 6px 10px; border-bottom: 1px solid #e5e7eb; white-space: nowrap; }
    .hs-table td { padding: 5px 10px; border-bottom: 1px solid #f1f5f9; color: #334155; }
    .hs-table tbody tr:hover { background: #f8fafc; }
    .hs-num { text-align: right; font-weight: 600; }
    .hs-conf-badge { display: inline-block; padding: 1px 6px; border-radius: 4px; font-size: 7px; font-weight: 600; }
    .hs-conf-high { background: #fef2f2; color: #dc2626; }
    .hs-conf-medium { background: #fffbeb; color: #d97706; }
    .hs-conf-low { background: #f0fdf4; color: #16a34a; }
    .hs-pagination { display: flex; justify-content: center; gap: 4px; padding: 8px 14px 12px; }
    .hs-page-btn { padding: 3px 8px; border: 1px solid #e5e7eb; border-radius: 4px; background: #fff; font-size: 8px; cursor: pointer; color: #334155; }
    .hs-page-btn:hover { background: #f1f5f9; }
    .hs-page-btn.active { background: #3b82f6; color: #fff; border-color: #3b82f6; }
    .hs-page-btn:disabled { opacity: 0.4; cursor: not-allowed; }
    .hs-page-dots { font-size: 8px; color: #94a3b8; padding: 0 2px; }

    .hs-bar-chart { margin-top: 12px; border: 1px solid #e5e7eb; border-radius: 10px; background: #fff; overflow: visible; }
    .hs-bar-header { padding: 12px 14px 8px; }
    .hs-bar-title { font-size: 11px; font-weight: 700; color: #1e293b; margin: 0 0 2px; }
    .hs-bar-subtitle { font-size: 8px; color: #94a3b8; }
    .hs-bar-body { padding: 8px 14px 14px; overflow-x: auto; }
    .hs-bar-bars { display: flex; align-items: flex-end; gap: 3px; height: 160px; padding-bottom: 0; padding-top: 24px; }
    .hs-bar-wrap { flex: 0 0 auto; width: 22px; display: flex; flex-direction: column; align-items: stretch; height: 100%; position: relative; cursor: pointer; z-index: 1; overflow: visible; }
    .hs-bar-bars { position: relative; z-index: 0; overflow: visible; }
    .hs-bar-tooltip { display: none; position: absolute; bottom: calc(100% + 2px); left: 50%; transform: translateX(-50%); background: #1e293b; color: #fff; padding: 4px 8px; border-radius: 4px; font-size: 8px; white-space: nowrap; z-index: 1000; pointer-events: none; }
    .hs-bar-tooltip::after { content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 4px solid transparent; border-top-color: #1e293b; }
    .hs-bar-wrap:hover .hs-bar-tooltip { display: block; }
    .hs-bar-val { font-size: 6px; font-weight: 700; color: #334155; white-space: nowrap; text-align: center; padding-bottom: 2px; margin-bottom: 4px; }
    .hs-bar-area { flex: 1; display: flex; align-items: flex-end; }
    .hs-bar { width: 100%; border-radius: 3px 3px 0 0; background: linear-gradient(180deg, #3b82f6, #2563eb); transition: height .4s ease; min-height: 2px; }
    .hs-bar:hover { filter: brightness(1.1); }
    .hs-bar-label { font-size: 6px; color: #64748b; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-top: 3px; }

    .wind-legend {
      background: rgba(255,255,255,0.95);
      border-radius: 8px;
      padding: 10px 12px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.15);
      border: 1px solid #e5e7eb;
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      min-width: 200px;
    }
    .wind-legend-title { font-size: 10px; font-weight: 700; color: #1e293b; margin-bottom: 6px; }
    .wind-legend-bar {
      height: 8px;
      border-radius: 4px;
      background: linear-gradient(90deg, #64b4ff 0%, #32dc78 33%, #ffdc32 66%, #ff5032 100%);
      margin-bottom: 3px;
    }
    .wind-legend-labels { display: flex; justify-content: space-between; font-size: 8px; color: #94a3b8; margin-bottom: 6px; }
    .wind-legend-items { display: flex; flex-direction: column; gap: 3px; }
    .wind-legend-item { display: flex; align-items: center; gap: 5px; font-size: 9px; color: #475569; }
    .wind-legend-dot { width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0; }
    .wind-legend-unit { font-size: 8px; color: #94a3b8; margin-top: 6px; font-style: italic; }

    /* ── Himawari Legend ── */
    .himawari-legend {
      background: rgba(255,255,255,0.96);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      border-radius: 8px;
      padding: 10px 12px;
      box-shadow: 0 2px 8px rgba(15,23,42,0.08);
      border: 1px solid rgba(148,163,184,0.28);
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      min-width: 200px;
      color: #0f172a;
    }
    .himawari-legend-title { font-size: 10px; font-weight: 700; color: #0f172a; margin-bottom: 6px; }
    .himawari-legend-bar {
      height: 10px;
      border-radius: 5px;
      background: linear-gradient(90deg, #1a1a2e 0%, #16213e 10%, #0f3460 20%, #1a936f 35%, #88d498 45%, #f6d743 58%, #f77f00 72%, #d62828 85%, #7b0051 100%);
      margin-bottom: 3px;
      border: 1px solid rgba(15,23,42,0.1);
    }
    .himawari-legend-labels { display: flex; justify-content: space-between; font-size: 7px; color: #64748b; margin-bottom: 6px; }
    .himawari-legend-items { display: flex; flex-direction: column; gap: 3px; }
    .himawari-legend-item { display: flex; align-items: center; gap: 5px; font-size: 9px; color: #334155; }
    .himawari-legend-dot { width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0; border: 1px solid rgba(15,23,42,0.12); }
    .himawari-legend-unit { font-size: 8px; color: #64748b; margin-top: 6px; font-style: italic; }

    /* Wind Popup */
    .wind-popup { width: 320px; font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; color: #1e293b; background: #fff; overflow: hidden; }
    .wind-popup-head { padding: 12px 14px; color: #fff; background: linear-gradient(135deg, #0ea5e9, #0369a1); }
    .wind-popup-head strong { display: block; font-size: 14px; line-height: 1.25; }
    .wind-popup-head span { display: block; margin-top: 2px; font-size: 11px; opacity: .92; }
    .wind-popup-badge { display: inline-flex; align-items: center; gap: 5px; font-size: 10px; font-weight: 600; background: rgba(255,255,255,.18); padding: 3px 8px; border-radius: 20px; margin-bottom: 6px; }
    .wind-popup-badge-dot { width: 6px; height: 6px; border-radius: 50%; background: #38bdf8; animation: pulse-dot 1.5s ease-in-out infinite; }
    .wind-popup-body { padding: 0; }
    .wind-popup-meta { padding: 10px 14px; border-bottom: 1px solid #f1f5f9; }
    .wind-popup-meta div { display: flex; justify-content: space-between; align-items: center; }
    .wind-popup-meta span { font-size: 12px; color: #64748b; }
    .wind-popup-meta b { font-size: 12px; color: #1e293b; font-weight: 600; }
    .wind-popup-card { display: flex; align-items: center; gap: 14px; padding: 14px; border-bottom: 1px solid #f1f5f9; }
    .wind-popup-compass { position: relative; width: 56px; height: 56px; flex-shrink: 0; }
    .wind-popup-compass-ring { width: 56px; height: 56px; border-radius: 50%; border: 2px solid #cbd5e1; display: grid; place-items: center; position: relative; background: #fff; }
    .wind-popup-compass-arrow { display: block; width: 3px; height: 22px; background: linear-gradient(to bottom, #0ea5e9 50%, #ef4444 50%); border-radius: 2px; transform-origin: bottom center; position: absolute; bottom: 50%; left: calc(50% - 1.5px); }
    .wind-popup-compass-label { position: absolute; bottom: -18px; left: 50%; transform: translateX(-50%); font-size: 9px; color: #64748b; white-space: nowrap; font-weight: 600; }
    .wind-popup-wind-info { display: flex; flex-direction: column; gap: 2px; }
    .wind-popup-speed { display: flex; align-items: baseline; gap: 4px; }
    .wind-popup-speed-val { font-size: 28px; font-weight: 800; line-height: 1; }
    .wind-popup-speed-unit { font-size: 12px; color: #64748b; font-weight: 500; }
    .wind-popup-cat { font-size: 12px; font-weight: 600; color: #334155; }
    .wind-popup-beaufort { font-size: 10px; color: #94a3b8; }
    .wind-popup-detail-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0; padding: 0; }
    .wind-popup-detail { display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; border-bottom: 1px solid #f1f5f9; }
    .wind-popup-detail span { font-size: 10px; color: #94a3b8; text-transform: uppercase; letter-spacing: .3px; }
    .wind-popup-detail b { font-size: 12px; color: #1e293b; font-weight: 600; }
    .wind-popup-fallback { padding: 14px; text-align: center; font-size: 12px; color: #64748b; line-height: 1.5; }
    .wind-popup-fallback small { font-size: 10px; color: #94a3b8; }
    @keyframes pulse-dot { 0%, 100% { opacity: 1; } 50% { opacity: .4; } }

    /* Maritime Legend */
    .maritime-legend { background: rgba(255,255,255,.95); border-radius: 8px; padding: 10px 12px; box-shadow: 0 2px 8px rgba(0,0,0,.15); border: 1px solid #e2e8f0; min-width: 200px; max-width: 200px; }
    .maritime-legend-title { font-size: 10px; font-weight: 700; color: #0e7490; margin-bottom: 6px; }
    .maritime-legend-row { display: flex; align-items: center; gap: 5px; font-size: 9px; color: #475569; padding: 2px 0; }
    .maritime-legend-swatch { width: 10px; height: 10px; border-radius: 2px; flex-shrink: 0; border: 1px solid rgba(0,0,0,.1); }
    .maritime-legend-source { font-size: 8px; color: #94a3b8; margin-top: 6px; font-style: italic; }

    /* Maritime Popup - cuaca grid */
    .wind-popup-cuaca { padding: 10px 14px; border-top: 1px solid #f1f5f9; }
    .wind-popup-cuaca-title { font-size: 10px; font-weight: 700; color: #0e7490; margin-bottom: 6px; text-transform: uppercase; letter-spacing: .3px; }
    .wind-popup-cuaca-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
    .wind-popup-cuaca-item { display: flex; flex-direction: column; gap: 1px; padding: 6px 8px; background: #f0fdfa; border-radius: 6px; border: 1px solid #ccfbf1; }
    .wind-popup-cuaca-item span { font-size: 9px; color: #64748b; }
    .wind-popup-cuaca-item b { font-size: 11px; color: #1e293b; font-weight: 600; }
    .wind-popup-footer { padding: 8px 14px; border-top: 1px solid #f1f5f9; }
    .wind-popup-footer span { font-size: 9px; color: #94a3b8; }

    /* Earthquake Marker */
    .quake-marker-wrap { background: transparent; border: 0; }
    .quake-marker {
      position: relative;
      width: var(--qm-size, 48px);
      height: var(--qm-size, 48px);
      display: grid;
      place-items: center;
    }
    .quake-marker-ring {
      position: absolute;
      inset: 0;
      border-radius: 50%;
      border: 2px solid var(--qm-color, #e74c3c);
      opacity: 0;
      animation: quake-pulse 2s ease-out infinite;
    }
    .quake-marker-ring--delay { animation-delay: .6s; }
    @keyframes quake-pulse {
      0% { transform: scale(.6); opacity: .7; }
      100% { transform: scale(1.8); opacity: 0; }
    }
    .quake-marker-core {
      position: relative;
      z-index: 1;
      width: 100%;
      height: 100%;
      border-radius: 50%;
      background: var(--qm-color, #e74c3c);
      box-shadow: 0 4px 14px color-mix(in srgb, var(--qm-color, #e74c3c) 50%, transparent);
      display: grid;
      place-items: center;
      border: 3px solid rgba(255,255,255,.85);
    }
    .quake-marker-mag {
      color: #fff;
      font-size: calc(var(--qm-size, 48px) * 0.28);
      font-weight: 800;
      line-height: 1;
      text-shadow: 0 1px 3px rgba(0,0,0,.25);
    }

    /* Earthquake Popup */
    .quake-leaflet-popup .leaflet-popup-content-wrapper { overflow: hidden; padding: 0; border-radius: 16px; box-shadow: 0 18px 45px rgba(16, 43, 80, .28); }
    .quake-leaflet-popup .leaflet-popup-content { width: auto !important; margin: 0; }
    /* Modern BMKG Earthquake Popup */
    .quake-leaflet-popup { max-width: 320px !important; }
    .quake-leaflet-popup .leaflet-popup-content-wrapper { border-radius: 16px; padding: 0; overflow: hidden; box-shadow: 0 8px 32px rgba(153, 27, 27, .2); border: none; }
    .agol-leaflet-popup { max-width: 320px !important; }
    .agol-leaflet-popup .leaflet-popup-content-wrapper { border-radius: 10px; padding: 0; overflow: hidden; box-shadow: 0 4px 20px rgba(0,0,0,.18); border: none; }
    .agol-leaflet-popup .leaflet-popup-content { width: auto !important; margin: 0; }
    .agol-leaflet-popup .leaflet-popup-tip { box-shadow: 0 4px 20px rgba(0,0,0,.18); }
    .quake-leaflet-popup .leaflet-popup-content { margin: 0; width: 100% !important; }
    .quake-leaflet-popup .leaflet-popup-tip-container { left: 50% !important; margin-left: -14px !important; }
    .quake-leaflet-popup .leaflet-popup-tip { box-shadow: 4px 4px 12px rgba(153, 27, 27, .2); }

    .quake-popup { width: 320px; font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; color: #1a2e44; background: #fff; overflow: hidden; max-height: 50vh; overflow-y: auto; }

    .quake-popup-header {
      position: relative;
      padding: 20px 18px 16px;
      color: #fff;
      background: linear-gradient(135deg, #991b1b 0%, #dc2626 50%, #ef4444 100%);
      overflow: hidden;
    }
    .quake-popup-header::before {
      content: '';
      position: absolute;
      top: -40px; right: -40px;
      width: 120px; height: 120px;
      background: rgba(255,255,255,.08);
      border-radius: 50%;
    }
    .quake-popup-header::after {
      content: '';
      position: absolute;
      bottom: -30px; left: -20px;
      width: 80px; height: 80px;
      background: rgba(255,255,255,.05);
      border-radius: 50%;
    }

    .quake-popup-status {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 4px 10px;
      border-radius: 20px;
      font-size: 10px;
      font-weight: 700;
      letter-spacing: .06em;
      text-transform: uppercase;
      background: rgba(255,255,255,.2);
      color: #fff;
      margin-bottom: 12px;
      backdrop-filter: blur(4px);
    }
    .quake-popup-status-dot {
      width: 7px; height: 7px;
      border-radius: 50%;
      background: #fca5a5;
      animation: quake-pulse 1.5s infinite;
    }
    @keyframes quake-pulse {
      0%, 100% { opacity: 1; transform: scale(1); }
      50% { opacity: .5; transform: scale(1.2); }
    }

    .quake-popup-title {
      font-size: 13px;
      font-weight: 600;
      opacity: .9;
      margin-bottom: 4px;
      position: relative;
      z-index: 1;
      text-shadow: 0 1px 2px rgba(0,0,0,.1);
    }
    .quake-popup-region {
      font-size: 15px;
      font-weight: 700;
      line-height: 1.3;
      position: relative;
      z-index: 1;
      text-shadow: 0 1px 2px rgba(0,0,0,.1);
    }

    .quake-popup-mag-display {
      display: flex;
      align-items: center;
      gap: 14px;
      padding: 14px 18px;
      background: linear-gradient(180deg, #fef2f2 0%, #fff 100%);
      border-bottom: 1px solid #fecaca;
    }
    .quake-popup-mag-circle {
      width: 64px; height: 64px;
      border-radius: 50%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      color: #fff;
      font-weight: 800;
      flex-shrink: 0;
      box-shadow: 0 4px 14px rgba(220, 38, 38, .35);
      position: relative;
    }
    .quake-popup-mag-circle::after {
      content: '';
      position: absolute;
      inset: -3px;
      border-radius: 50%;
      border: 2px solid rgba(255,255,255,.3);
    }
    .quake-popup-mag-num { font-size: 22px; line-height: 1; }
    .quake-popup-mag-label { font-size: 9px; font-weight: 600; opacity: .8; margin-top: 1px; }

    .quake-popup-mag-info { flex: 1; min-width: 0; }
    .quake-popup-potensi {
      font-size: 13px;
      font-weight: 700;
      color: #b91c1c;
      margin-bottom: 3px;
    }
    .quake-popup-time {
      font-size: 11px;
      color: #b91c1c;
      line-height: 1.4;
    }

    .quake-popup-details {
      padding: 14px 18px;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
    }
    .quake-popup-detail-item {
      display: flex;
      flex-direction: column;
      gap: 3px;
    }
    .quake-popup-detail-label {
      font-size: 10px;
      font-weight: 600;
      color: #dc2626;
      text-transform: uppercase;
      letter-spacing: .05em;
    }
    .quake-popup-detail-value {
      font-size: 13px;
      font-weight: 600;
      color: #7f1d1d;
      word-break: break-word;
    }

    .quake-popup-feeling {
      padding: 12px 18px 14px;
      background: #fef2f2;
      border-top: 1px solid #fecaca;
    }
    .quake-popup-feeling-title {
      font-size: 10px;
      font-weight: 700;
      color: #b91c1c;
      text-transform: uppercase;
      letter-spacing: .05em;
      margin-bottom: 6px;
    }
    .quake-popup-feeling-text {
      font-size: 12px;
      color: #991b1b;
      line-height: 1.5;
    }

    .quake-popup-footer {
      padding: 10px 18px;
      background: #fef2f2;
      border-top: 1px solid #fecaca;
      text-align: center;
    }
    .quake-popup-footer-text {
      font-size: 10px;
      color: #991b1b;
      font-weight: 600;
    }

    /* ── Modern ArcGIS Online-style popup ── */
    .agol-popup {
      width: 320px;
      max-width: 100%;
      font-family: 'Avenir Next', 'Segoe UI', system-ui, -apple-system, sans-serif;
      color: #323232;
      background: #fff;
      border-radius: 8px;
      overflow: hidden;
      max-height: 50vh;
      overflow-y: auto;
      overflow-x: hidden;
      box-shadow: 0 4px 20px rgba(0,0,0,.18);
      border: none;
    }
    .agol-popup-header {
      position: relative;
      padding: 14px 16px 12px;
      color: #fff;
      overflow: hidden;
    }
/* Tampon fallback: header popup tanpa background eksplisit akan
   menjadi putih di atas putih karena .agol-popup-header hanya
   mengatur color:#fff. Warna_MODULE ini dipakai modul yang punya
   warna sendiri (TransJakarta memakai warna koridor). */
    .agol-popup-header.agol-modul { background: linear-gradient(135deg, #1e293b, #334155); }
    .agol-popup-header::after {
      content: '';
      position: absolute;
      top: -30px; right: -30px;
      width: 80px; height: 80px;
      background: rgba(255,255,255,.1);
      border-radius: 50%;
    }
    .agol-popup-badge {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      padding: 3px 9px;
      border-radius: 4px;
      font-size: 9.5px;
      font-weight: 700;
      letter-spacing: .04em;
      text-transform: uppercase;
      background: rgba(255,255,255,.2);
      color: #fff;
      backdrop-filter: blur(4px);
      margin-bottom: 8px;
    }
    .agol-popup-badge-dot {
      width: 6px; height: 6px;
      border-radius: 50%;
      background: #fff;
      flex-shrink: 0;
    }
    .agol-popup-title {
      font-size: 14px;
      font-weight: 700;
      line-height: 1.3;
      position: relative;
      z-index: 1;
      text-shadow: 0 1px 3px rgba(0,0,0,.12);
      overflow-wrap: anywhere;
    }
/* Titik warna di dalam judul popup. .agol-popup-badge-dot dirancang
       untuk flex di dalam .agol-popup-badge; di dalam .agol-popup-title
       elemennya inline, jadi butuh display eksplisit sendiri. */
    .agol-popup-title .agol-popup-badge-dot {
      display: inline-block;
      margin-right: 7px;
      vertical-align: middle;
      width: 9px;
      height: 9px;
    }
    /* Tanpa ini .agol-popup-badge-dot mewarisi display dari div judul
       dan jadi blok penuh, sehingga menyingkirkan nama koridor. */
    .agol-popup-subtitle {
      font-size: 11px;
      font-weight: 500;
      opacity: .85;
      margin-top: 2px;
      position: relative;
      z-index: 1;
      overflow-wrap: anywhere;
    }
    .agol-popup-body {
      padding: 12px 16px;
    }
    .agol-popup-meta {
      font-size: 10px;
      color: #999;
      margin-bottom: 10px;
      padding-bottom: 8px;
      border-bottom: 1px solid #f0f0f0;
    }
    .agol-popup-fields {
      display: flex;
      flex-direction: column;
      gap: 0;
    }
    .agol-popup-field {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      padding: 7px 0;
      border-bottom: 1px solid #f5f5f5;
      gap: 12px;
    }
    .agol-popup-field:last-child {
      border-bottom: none;
    }
    .agol-popup-field-label {
      font-size: 10.5px;
      font-weight: 600;
      color: #6e6e6e;
      text-transform: uppercase;
      letter-spacing: .03em;
      flex-shrink: 0;
      min-width: 80px;
    }
    .agol-popup-field-value {
      font-size: 12px;
      font-weight: 600;
      color: #323232;
      text-align: right;
      word-break: break-word;
      overflow-wrap: anywhere;
      min-width: 0;
    }
    .agol-popup-remark {
      margin-top: 8px;
      padding: 8px 10px;
      background: #f8f9fa;
      border-radius: 6px;
      border-left: 3px solid #d1d5db;
    }
    .agol-popup-remark-title {
      font-size: 9px;
      font-weight: 700;
      color: #999;
      text-transform: uppercase;
      letter-spacing: .04em;
      margin-bottom: 3px;
    }
    .agol-popup-remark-text {
      font-size: 11px;
      color: #555;
      line-height: 1.45;
    }
    .agol-popup-footer {
      padding: 8px 16px;
      background: #fafafa;
      border-top: 1px solid #f0f0f0;
      text-align: center;
    }
    .agol-popup-footer span {
      font-size: 9.5px;
      color: #aaa;
      font-weight: 500;
    }
    /* Gempa NTT styles removed */
    /* geologi colors */
    .agol-geo-patahan  { background: linear-gradient(135deg, #7f1d1d, #991b1b); }
    .agol-geo-geostruktur { background: linear-gradient(135deg, #1e3a5f, #2563eb); }
    .agol-geo-geologi  { background: linear-gradient(135deg, #065f46, #059669); }
    .agol-geo-tanah    { background: linear-gradient(135deg, #78350f, #b7791f); }
    .agol-geo-likuifaksi { background: linear-gradient(135deg, #7c2d12, #ea580c); }
    .agol-geo-karst    { background: linear-gradient(135deg, #5b4636, #9e7462); }
    .agol-geo-gasvul   { background: linear-gradient(135deg, #581c87, #7c3aed); }
    .agol-geo-gertan   { background: linear-gradient(135deg, #7f1d1d, #b91c1c); }
    .agol-geo-volcano  { background: linear-gradient(135deg, #9a3412, #dc2626); }
    .agol-geo-krb      { background: linear-gradient(135deg, #831843, #be185d); }
    .agol-geo-kawasan  { background: linear-gradient(135deg, #14532d, #16a34a); }
    .agol-geo-kttht    { background: linear-gradient(135deg, #1e3a5f, #0369a1); }
    .agol-geo-satupeta { background: linear-gradient(135deg, #14532d, #22c55e); }
    .agol-geo-persil   { background: linear-gradient(135deg, #92400e, #d97706); }
    .bhumi-persil-list { display: grid; gap: 8px; padding: 8px; background: #eceef1; max-height: 55vh; overflow-y: auto; overflow-x: hidden; min-width: 0; width: 320px; max-width: 100%; }
    /* Daftar harus berukuran template 320px; tanpa width eksplisit, lebar
       popup dihitung dari teks natural kartu (bisa < 200px). Kartu mengisi
       lebar daftar agar tidak ada gulir horizontal saat popup di-clamp. */
    .bhumi-persil-list .agol-popup { width: 100% !important; max-width: none; min-width: 0; }
    .bhumi-persil-sheet {
      display: flex; position: fixed; top: 120px; right: 12px; bottom: 12px; left: auto;
      z-index: 1100; width: min(390px, calc(100vw - 106px)); height: auto;
      flex-direction: column; overflow: hidden; visibility: hidden; pointer-events: none;
      border-radius: 16px; background: var(--bg-primary); color: var(--text-primary);
      box-shadow: var(--shadow-sheet); transform: translateX(calc(100% + 24px));
      transition: transform .3s ease-in-out, visibility .3s;
    }
    .bhumi-persil-sheet.is-open { visibility: visible; pointer-events: auto; transform: translateX(0); }
    .bhumi-persil-sheet-head { display: flex; min-height: 52px; flex: 0 0 auto; align-items: center; justify-content: space-between; gap: 12px; box-sizing: border-box; padding: 10px 16px; border-bottom: 1px solid var(--border-color); background: var(--bg-primary); }
    .bhumi-persil-sheet-title { color: var(--text-primary); font-size: 13px; font-weight: 700; }
    .bhumi-persil-sheet-actions { display: flex; flex: 0 0 auto; align-items: center; gap: 6px; }
    .bhumi-persil-sheet-minimize, .bhumi-persil-sheet-close { display: grid; width: 28px; height: 28px; place-items: center; border: 0; border-radius: 50%; background: var(--bg-tertiary); color: var(--text-tertiary); cursor: pointer; }
    .bhumi-persil-sheet-close { font-size: 16px; }
    .bhumi-persil-sheet-minimize:hover, .bhumi-persil-sheet-close:hover { background: var(--bg-card-hover); color: var(--text-primary); }
    .bhumi-persil-sheet-minimize:focus-visible, .bhumi-persil-sheet-close:focus-visible { outline: 2px solid #64748b; outline-offset: 2px; }
    #bhumi-persil-sheet .bhumi-persil-sheet-head { display: flex !important; width: 100%; align-items: center; justify-content: space-between; gap: 12px; }
    #bhumi-persil-sheet .bhumi-persil-sheet-title { flex: 1 1 auto; min-width: 0; margin: 0; color: var(--text-primary); font-family: inherit; font-size: 13px; font-weight: 700; line-height: 1.3; }
    #bhumi-persil-sheet .bhumi-persil-sheet-actions { display: flex !important; flex: 0 0 auto; align-items: center; gap: 6px; }
    #bhumi-persil-sheet .bhumi-persil-sheet-minimize,
    #bhumi-persil-sheet .bhumi-persil-sheet-close { appearance: none; flex: 0 0 28px; width: 28px; height: 28px; margin: 0; padding: 0; border: 0; border-radius: 50%; background: var(--bg-tertiary); color: var(--text-tertiary); font: 16px/1 Arial, sans-serif; }
    .bhumi-persil-sheet-handle { display: none; }
    .bhumi-persil-sheet-content { flex: 1 1 auto; min-width: 0; width: 100%; box-sizing: border-box; min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 12px 12px 16px; -webkit-overflow-scrolling: touch; }
    .catalog-popup-sheet-content { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 12px; width: 100%; min-width: 0; box-sizing: border-box; }
    /* Slot iklan Detail Layer. AdSense menulis lebar dalam piksel secara
       inline (sering + !important) pada <ins>, host, dan iframe tepat saat
       unit dirender, sehingga lebar itu membeku. Sheet-nya sendiri masih bisa
       berubah lebar sesudahnya: handle resize desktop, minimize/restore,
       ganti orientasi, dan -- terutama -- mode dua sheet yang memaksa
       #catalog-popup-sheet menjadi clamp(240px, 26vw, 360px) begitu sheet
       kanan ikut terbuka. Akibatnya iklan jadi lebih sempit dari slot (tidak
       full) atau lebih lebar lalu terpotong overflow: hidden.

       Semua lapisan karena itu dipaksa selebar slot. Nilai inline !important
       tidak bisa dikalahkan CSS, jadi ditangani penjaga di map-core.js
       (jagaLebarIklan) yang menulis ulang lebar begitu slot berubah. */
    .catalog-popup-sheet-ad-slot { display: block; grid-column: 1 / -1; width: 100%; min-width: 0; max-width: 100%; box-sizing: border-box; overflow: visible; }
    .catalog-popup-sheet-ad-slot > ins.adsbygoogle { display: block !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; box-sizing: border-box !important; }
    .catalog-popup-sheet-ad-slot .adsbygoogle,
    .catalog-popup-sheet-ad-slot .adsbygoogle > div,
    .catalog-popup-sheet-ad-slot .adsbygoogle > div > div,
    .catalog-popup-sheet-ad-slot .adsbygoogle iframe {
      display: block; width: 100% !important; max-width: 100% !important;
      min-width: 0 !important; box-sizing: border-box !important; margin: 0;
    }
    .catalog-popup-sheet-ad-slot .adsbygoogle[data-ad-status="unfilled"] { display: none !important; }
    .catalog-popup-sheet-cards { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 12px; min-width: 0; }
    /* max-width harus !important. Setiap class popup (agol-, quake-, geoid-,
       geotani-, kta-, ndvi-, landcover-, irisan-, bmkg-, sppgd-, dst.)
       membawa max-width: 320/340px !important untuk popup Leaflet di peta.
       Karena class itu ikut disalin ke card, aturan tanpa !important selalu
       kalah dan card tidak pernah selebar sheet. */
    .catalog-popup-sheet-card { display: block; width: 100% !important; min-width: 0; max-width: none !important; box-sizing: border-box; overflow: visible; }
    .catalog-popup-sheet-card.boundary-leaflet-popup { width: 100% !important; min-width: 0 !important; max-width: none !important; }
    .catalog-popup-sheet-card .leaflet-popup-content-wrapper { width: 100% !important; max-width: none !important; box-sizing: border-box; padding: 0 !important; border: 1px solid var(--border-color); border-radius: 0 !important; background: var(--bg-primary); box-shadow: none; overflow: hidden; }
    .catalog-popup-sheet-card .leaflet-popup-content { width: 100% !important; max-width: 100% !important; max-height: none !important; box-sizing: border-box; margin: 0 !important; overflow: visible !important; }
    .catalog-popup-sheet-card.fsva-leaflet-popup .leaflet-popup-content-wrapper,
    .catalog-popup-sheet-card.fsva-leaflet-popup .leaflet-popup-content { min-width: 0 !important; max-height: none !important; overflow: visible !important; }
    .catalog-popup-sheet-card .agol-popup { width: 100% !important; min-width: 0; max-width: none; max-height: none; overflow: visible; border: 0; border-radius: 0 !important; box-shadow: none; }
    /* Akar popup lain (quake-popup, geoid-popup, wind-popup, kta-popup,
       ndvi-popup, isee-soil-popup, isric-wrb-popup, bmkg-popup, ...) juga
       memakai lebar/pembatas tetap 310-320px agar pas dengan popup Leaflet
       di peta. Di dalam card mereka harus mengisi lebar card, jadi semua
       elemen langsung anak .leaflet-popup-content dibuat selebar card. */
    .catalog-popup-sheet-card .leaflet-popup-content > * { width: 100% !important; max-width: none !important; box-sizing: border-box; }
    /* Popup PIHPS awalnya dirancang untuk popup Leaflet 320px dan memakai
       dua area gulir. Di template Detail Layer, lebar serta scrolling
       menjadi tanggung jawab sheet agar perilakunya sama dengan sumber lain. */
    #catalog-popup-sheet .catalog-popup-sheet-card.gp-leaflet-popup { max-width: none !important; }
    #catalog-popup-sheet .catalog-popup-sheet-card .gp-popup { width: 100%; min-width: 0; max-width: none; max-height: none; overflow: visible; }
    #catalog-popup-sheet .catalog-popup-sheet-card .gp-popup-body { overflow: visible; flex: 0 0 auto; }
    /* FIX GRAFIK TERPOTONG (2026-11-01): aturan dasar
       .gp-leaflet-popup .leaflet-popup-content-wrapper
       (max-height: 60vh; overflow: hidden) MASIH berlaku di dalam sheet
       sehingga isi -- termasuk tiga grafik Chart.js harga & inflasi --
       terpotong di tepi tanpa scrollbar. Di sheet, wrapper harus tumbuh
       penuh; pengguliran ditangani .bhumi-persil-sheet-content
       (overflow: auto). Pola sama dengan override sppgd di bawah.
       Untuk mengembalikan: hapus rule ini. */
    #catalog-popup-sheet .catalog-popup-sheet-card.gp-leaflet-popup .leaflet-popup-content-wrapper {
      max-height: none !important;
      overflow: visible !important;
    }
    .catalog-popup-sheet-card.bhumi-persil-detail-card .bhumi-persil-coordinates { margin: 0; border-right: 0; border-bottom: 0; border-left: 0; border-radius: 0; }
    .bhumi-persil-retry-wrap { display: flex; justify-content: flex-end; padding: 10px 12px; border-top: 1px solid var(--border-color); }
    .bhumi-persil-loading { display: grid; min-height: 72px; place-items: center; }
    .bhumi-persil-spinner { width: 24px; height: 24px; border: 3px solid var(--border-color); border-top-color: #b45309; border-radius: 50%; animation: bhumi-persil-spin .75s linear infinite; }
    @keyframes bhumi-persil-spin { to { transform: rotate(360deg); } }
    .bhumi-persil-retry { min-height: 34px; padding: 7px 12px; border: 1px solid var(--border-color); border-radius: 8px; background: var(--bg-secondary); color: var(--text-primary); font: inherit; font-size: 11px; font-weight: 600; cursor: pointer; }
    .catalog-popup-sheet-card .sppgd-popup { width: 100% !important; min-width: 0; max-width: none; max-height: none !important; overflow: visible; }
    .catalog-popup-sheet-card.sppgd-leaflet-popup .leaflet-popup-content-wrapper { max-height: none !important; overflow: visible !important; }
    .catalog-popup-sheet-card .sppgd-popup-body { max-height: none !important; overflow: visible !important; }
    /* Semua detail memakai satu area gulir, yaitu body sheet. Daftar SPPGD
       tetap dipaginasi, jadi tidak perlu scroll kedua di dalam kartu. */
    .catalog-popup-sheet-card .sppgd-popup-list { max-height: none; overflow: visible; }
    .catalog-popup-sheet-card .sppgd-popup-pagination { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 9px 10px; border-top: 1px solid var(--border-color); background: var(--bg-primary); }
    .catalog-popup-sheet-card .sppgd-popup-pagination span { color: var(--text-tertiary); font-size: 10px; text-align: center; }
    .catalog-popup-sheet-card .sppgd-popup-page-btn { min-height: 30px; padding: 5px 8px; border: 1px solid var(--border-color); border-radius: 0; background: var(--bg-secondary); color: var(--text-primary); font: inherit; font-size: 10px; font-weight: 600; cursor: pointer; }
    .catalog-popup-sheet-card .sppgd-popup-page-btn:disabled { opacity: .45; cursor: default; }
    .catalog-popup-sheet-card .boundary-popup { width: 100% !important; min-width: 0; max-width: none; box-sizing: border-box; color: var(--text-primary); background: var(--bg-primary); }
    .catalog-popup-sheet-card .boundary-popup-header { padding: 14px 15px 13px; background: linear-gradient(135deg, #713f12, #b45309); }
    .catalog-popup-sheet-card .boundary-popup-header strong { font-size: 15px; line-height: 1.35; }
    .catalog-popup-sheet-card .boundary-popup-header > span { font-size: 11px; }
    .catalog-popup-sheet-card .boundary-popup-body { padding: 0; background: var(--bg-primary); }
    .catalog-popup-sheet-card .boundary-popup-meta { display: block; padding: 0 14px; }
    .catalog-popup-sheet-card .boundary-popup-meta-item { display: grid; grid-template-columns: minmax(0, 40%) minmax(0, 1fr); align-items: start; gap: 10px; padding: 10px 4px; border: 0; border-bottom: 1px solid var(--border-color); border-radius: 0; background: transparent; }
    .catalog-popup-sheet-card .boundary-popup-meta-label { color: var(--text-tertiary); font-size: 10px; font-weight: 600; text-transform: uppercase; }
    .catalog-popup-sheet-card .boundary-popup-meta-value { min-width: 0; color: var(--text-primary); font-size: 12px; font-weight: 500; text-align: left; overflow-wrap: anywhere; }
    .catalog-popup-sheet-card .boundary-popup-body > div:nth-child(2) { padding: 10px 14px !important; border-top: 0 !important; border-bottom: 1px solid var(--border-color); background: var(--bg-secondary) !important; color: var(--text-tertiary) !important; font-size: 10px !important; }
    .catalog-popup-sheet-card .boundary-popup-body > div:nth-child(3) { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 12px 14px !important; border-top: 0 !important; background: var(--bg-primary) !important; }
    .catalog-popup-sheet-card .boundary-popup-body > div:nth-child(3) button { min-width: 0; min-height: 36px; padding: 7px 8px !important; border: 1px solid var(--border-color) !important; border-radius: 8px !important; background: var(--bg-secondary) !important; color: var(--text-primary) !important; font: inherit !important; font-size: 11px !important; font-weight: 600 !important; }
    .catalog-popup-sheet-card .agol-popup-header { padding: 14px 15px 13px; background: linear-gradient(135deg, #713f12, #b45309) !important; }
    .catalog-popup-sheet-card .agol-popup-title { font-size: 15px; line-height: 1.35; text-shadow: none; }
    .catalog-popup-sheet-card .agol-popup-subtitle { margin-top: 4px; font-size: 11px; line-height: 1.4; opacity: 1; }
    .agol-popup-header.is-collapsible { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 12px !important; cursor: pointer !important; user-select: none; transition: filter 0.15s ease; }
    .agol-popup-header.is-collapsible:hover { filter: brightness(1.08); }
    .agol-popup-header-main { flex: 1; min-width: 0; }
    .agol-popup-collapse-btn { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 6px; background: rgba(255, 255, 255, 0.16); border: 1px solid rgba(255, 255, 255, 0.25); color: #fff; flex-shrink: 0; transition: background 0.15s ease; }
    .agol-popup-collapse-btn svg { transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1); }
    .agol-popup-header.is-collapsible:hover .agol-popup-collapse-btn { background: rgba(255, 255, 255, 0.28); }
    .agol-popup.is-collapsed .agol-popup-collapse-btn svg { transform: rotate(-90deg); }
    .agol-popup.is-collapsed .agol-popup-header { border-radius: inherit; }
    .agol-popup.is-collapsed .agol-popup-body,
    .agol-popup.is-collapsed .agol-popup-footer { display: none !important; }
    .catalog-popup-sheet-card .fsva-popup { width: 100%; min-width: 0 !important; max-width: none; }
    .catalog-popup-sheet-card .fsva-popup-body { padding: 12px 14px; }
    .catalog-popup-sheet-card .fsva-feature-data-table td { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
    .catalog-popup-sheet-card .fsva-feature-data-table .fsva-popup-field-value { color: var(--text-primary); font-size: 12px; font-weight: 600; }
    .catalog-popup-sheet-card .fsva-popup-rank { background: var(--bg-secondary); border-color: var(--border-color); }
    .catalog-popup-sheet-card .fsva-popup-rank-value { color: var(--text-primary); }
    .catalog-popup-sheet-card .catalog-feature-data-table { table-layout: fixed; }
    .catalog-popup-sheet-card .catalog-feature-data-table th { width: 40%; background: var(--bg-secondary); color: var(--text-tertiary); font-size: 10px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; }
    .catalog-popup-sheet-card .catalog-feature-data-table td { background: var(--bg-primary); color: var(--text-primary); font-size: 12px; font-weight: 500; text-align: left; }
    .catalog-popup-sheet-card .catalog-feature-data-table tr:nth-child(even) th { background: var(--bg-primary); }
    .catalog-popup-sheet-card .catalog-feature-data-table tr:last-child th,
    .catalog-popup-sheet-card .catalog-feature-data-table tr:last-child td { border-bottom: 0; }
    .bhumi-persil-sheet-content > .agol-popup { width: 100% !important; max-width: none; min-width: 0; max-height: none; overflow: visible; border: 0; border-radius: 0; box-shadow: none; }
    .bhumi-persil-sheet-content .bhumi-persil-list { display: grid; gap: 12px; width: 100%; max-width: none; max-height: none; box-sizing: border-box; padding: 0; background: transparent; }
    .bhumi-persil-sheet-content .bhumi-persil-list > .agol-popup { width: 100% !important; max-width: none; min-width: 0; max-height: none; overflow: visible; border: 1px solid var(--border-color); border-radius: 12px; box-shadow: var(--shadow-card); }
    .bhumi-persil-sheet-content .agol-popup-header.agol-geo-persil { padding: 14px 15px 13px; background: linear-gradient(135deg, #713f12, #b45309); }
    .bhumi-persil-sheet-content .agol-geo-persil .agol-popup-badge { margin-bottom: 9px; padding: 4px 8px; border: 1px solid rgba(255,255,255,.2); border-radius: 999px; font-size: 9px; letter-spacing: .06em; }
    .bhumi-persil-sheet-content .agol-geo-persil .agol-popup-title { font-size: 15px; line-height: 1.35; text-shadow: none; }
    .bhumi-persil-sheet-content .agol-geo-persil .agol-popup-subtitle { margin-top: 4px; color: rgba(255,255,255,.82); font-size: 11px; line-height: 1.4; opacity: 1; }
    .bhumi-persil-sheet-content .agol-popup-footer { padding: 8px 12px; }
    .bhumi-persil-coordinates { display: grid; gap: 11px; margin: 12px; padding: 13px; border: 1px solid var(--border-color); border-radius: 12px; background: var(--bg-secondary); }
    .bhumi-persil-coord-value { display: grid; gap: 4px; }
    .bhumi-persil-coord-value span { color: var(--text-tertiary); font-size: 10px; }
    .bhumi-persil-coord-value strong { color: var(--text-primary); font: 600 13px/1.4 ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .01em; }
    .bhumi-persil-coord-actions { display: flex; flex-wrap: wrap; gap: 8px; }
    .bhumi-persil-coord-actions button, .bhumi-persil-coord-actions a { display: inline-flex; min-height: 34px; align-items: center; justify-content: center; box-sizing: border-box; padding: 7px 11px; border: 1px solid var(--border-color); border-radius: 8px; color: var(--text-primary); background: var(--bg-primary); font: inherit; font-size: 10px; font-weight: 600; line-height: 1.2; text-decoration: none; cursor: pointer; }
    .bhumi-persil-coord-actions .bhumi-persil-maps { border-color: #0e7490; color: #fff; background: #0e7490; }
    .bhumi-persil-data-table { width: 100%; border-collapse: separate; border-spacing: 0; color: var(--text-primary); font-size: 11px; }
    .bhumi-persil-data-table tr:nth-child(odd) { background: var(--bg-secondary); }
    .bhumi-persil-data-table th, .bhumi-persil-data-table td { padding: 10px 12px; border-bottom: 1px solid var(--border-color); text-align: left; vertical-align: top; overflow-wrap: anywhere; }
    .bhumi-persil-data-table th { width: 42%; color: var(--text-tertiary); font-weight: 500; }
    .bhumi-persil-data-table td { color: var(--text-primary); font-weight: 600; }
    .bhumi-persil-gistaru { min-width: 0; width: 100%; }
    /* RDTR details share the Persil sheet's single scroll area. Avoid a
       nested, height-limited card that traps scrolling inside the popup. */
    .bhumi-persil-gistaru .agol-popup { width: 100% !important; min-width: 0 !important; max-width: none !important; max-height: none !important; overflow: visible; border: 0; border-radius: 0; box-shadow: none; }
    .bhumi-persil-gistaru .bhumi-persil-data-table { table-layout: fixed; }
    .bhumi-persil-gistaru .bhumi-persil-data-table th { width: 34%; }
    .bhumi-persil-gistaru .bhumi-persil-data-table th,
    .bhumi-persil-gistaru .bhumi-persil-data-table td { padding: 8px 10px; font-size: 11px; line-height: 1.45; overflow-wrap: anywhere; word-break: normal; }
    .bhumi-persil-gistaru .bhumi-persil-data-table td,
    .bhumi-persil-gistaru-activities li { white-space: pre-wrap; }
    .bhumi-persil-gistaru-section + .bhumi-persil-gistaru-section { margin-top: 16px; }
    .bhumi-persil-gistaru-section h3 { margin: 0; padding: 9px 10px; border-bottom: 1px solid var(--border-color); background: var(--bg-secondary); color: var(--text-primary); font-size: 11px; font-weight: 700; letter-spacing: .025em; }
    .bhumi-persil-gistaru-section .bhumi-persil-data-table { table-layout: fixed; }
    .bhumi-persil-gistaru-section .bhumi-persil-data-table tr { display: grid; grid-template-columns: minmax(0, 1fr); }
    .bhumi-persil-gistaru-section .bhumi-persil-data-table th,
    .bhumi-persil-gistaru-section .bhumi-persil-data-table td { display: block; width: auto; padding: 7px 10px 3px; border-bottom: 0; }
    .bhumi-persil-gistaru-section .bhumi-persil-data-table th { color: var(--text-tertiary); font-size: 10px; font-weight: 600; text-transform: uppercase; }
    .bhumi-persil-gistaru-section .bhumi-persil-data-table td { padding: 2px 10px 9px; border-bottom: 1px solid var(--border-color); font-size: 12px; font-weight: 500; }
    .bhumi-persil-gistaru-rule-list { display: grid; gap: 6px; margin: 0; padding-left: 18px; }
    .bhumi-persil-gistaru-rule-list li { padding-left: 2px; white-space: pre-wrap; overflow-wrap: anywhere; }
    .bhumi-persil-gistaru-activity-groups { display: grid; gap: 8px; padding: 9px; }
    .bhumi-persil-gistaru-activity-group { overflow: hidden; border: 1px solid var(--border-color); border-radius: 9px; background: var(--bg-primary); }
    .bhumi-persil-gistaru-activity-group.is-status-1 { border-left: 3px solid #16a34a; }
    .bhumi-persil-gistaru-activity-group.is-status-2 { border-left: 3px solid #eab308; }
    .bhumi-persil-gistaru-activity-group.is-status-3 { border-left: 3px solid #f97316; }
    .bhumi-persil-gistaru-activity-group.is-status-4 { border-left: 3px solid #ef4444; }
    .bhumi-persil-gistaru-activity-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 10px; border-bottom: 1px solid var(--border-color); background: var(--bg-secondary); }
    .bhumi-persil-gistaru-activity-head strong { color: var(--text-primary); font-size: 11px; }
    .bhumi-persil-gistaru-activity-head span { flex: 0 0 auto; padding: 3px 7px; border-radius: 99px; background: var(--bg-tertiary); color: var(--text-secondary); font-size: 9px; font-weight: 600; }
    .bhumi-persil-gistaru-activity-group ul { display: grid; gap: 5px; margin: 0; padding: 9px 12px 9px 28px; color: var(--text-primary); font-size: 11px; line-height: 1.45; }
    .bhumi-persil-gistaru-empty { margin: 0; padding: 10px; color: var(--text-tertiary); font-size: 11px; }
    .bhumi-persil-gistaru-fallback-note { margin: 0; padding: 10px 12px; border-top: 1px solid var(--border-color); color: var(--text-tertiary); font-size: 10px; line-height: 1.45; }
    .bhumi-persil-gistaru-activity-rule { padding: 0 10px 9px; }
    .bhumi-persil-gistaru-activity-rule summary { color: var(--text-secondary); font-size: 10px; font-weight: 600; cursor: pointer; }
    .bhumi-persil-gistaru-activity-rule ul { padding-top: 7px; }
    .bhumi-persil-gistaru-activities { max-height: none; overflow: visible; padding: 10px 12px; border-top: 1px solid var(--border-color); background: var(--bg-primary); }
    .bhumi-persil-gistaru-activities > strong { display: block; margin-bottom: 7px; color: var(--text-tertiary); font-size: 10px; letter-spacing: .04em; text-transform: uppercase; }
    .bhumi-persil-gistaru-activities ul { display: grid; gap: 5px; margin: 0; padding-left: 17px; color: var(--text-primary); font-size: 11px; line-height: 1.45; }
    .bhumi-persil-sheet.is-minimized { top: auto; right: auto; bottom: 68px; left: 50%; width: min(300px, calc(100vw - 24px)); height: 52px; visibility: visible; border: 1px solid var(--border-color); border-radius: 14px; background: var(--bg-primary); box-shadow: var(--shadow-sheet); transform: translateX(-50%); z-index: 100; }
    .bhumi-persil-sheet.is-minimized .bhumi-persil-sheet-handle,
    .bhumi-persil-sheet.is-minimized .bhumi-persil-sheet-content { display: none; }
    .bhumi-persil-sheet.is-minimized .bhumi-persil-sheet-head { min-height: 50px; padding: 8px 12px; border-bottom: 0; cursor: pointer; }
    @media (min-width: 769px) {
      #catalog-popup-sheet { top: 0; right: 0; bottom: 0; width: var(--desktop-sheet-width, 30vw); max-width: 50vw; height: 100dvh; max-height: 100dvh; border-radius: 0; }
      #catalog-popup-sheet.is-minimized { top: auto; bottom: 68px; height: 52px; max-height: 52px; }
    }
    @media (max-width: 768px) {
      .bhumi-persil-sheet {
        top: auto; right: 0; bottom: 0; left: 0; width: 100%;
        height: var(--sheet-h, 50vh); height: var(--sheet-h, 50dvh);
        max-height: 90vh; max-height: 90dvh;
        box-sizing: border-box; border-radius: 18px 18px 0 0;
        padding-bottom: env(safe-area-inset-bottom); transform: translateY(24px);
      }
      /* Detail popup RDTR lives in the catalog sheet; keep its mobile frame
         edge-to-edge just like the Persil detail sheet. */
      #catalog-popup-sheet { right: 0; left: 0; width: 100%; max-width: none; box-sizing: border-box; }
      #catalog-popup-sheet .catalog-popup-sheet-content,
      #catalog-popup-sheet .catalog-popup-sheet-cards,
      #catalog-popup-sheet .bhumi-persil-gistaru,
      #catalog-popup-sheet .bhumi-persil-gistaru .agol-popup { width: 100% !important; min-width: 0 !important; max-width: none !important; box-sizing: border-box; }
      .bhumi-persil-sheet.is-open { transform: translateY(0); }
      .bhumi-persil-sheet-handle { display: block; flex: 0 0 18px; position: relative; background: var(--bg-primary); touch-action: none; }
      .bhumi-persil-sheet-handle::after { content: ''; position: absolute; top: 7px; left: 50%; width: 36px; height: 4px; border-radius: 99px; background: var(--border-color); transform: translateX(-50%); }
      .bhumi-persil-sheet.is-minimized { top: 100px; right: auto; bottom: auto; left: 50%; width: min(250px, calc(100vw - 48px)); height: 36px; max-height: 36px; padding-bottom: 0; border: 1px solid var(--border-color); border-radius: 14px; background: var(--bg-primary); box-shadow: var(--shadow-sheet); transform: translateX(-50%); z-index: 100; }
      .bhumi-persil-sheet.is-minimized .bhumi-persil-sheet-handle,
      .bhumi-persil-sheet.is-minimized .bhumi-persil-sheet-content { display: none; }
      .bhumi-persil-sheet.is-minimized .bhumi-persil-sheet-head { min-height: 36px; padding: 4px 12px; border-bottom: 0; cursor: pointer; }
    }
    .agol-geo-kawasan .agol-popup-badge { font-size: 10px; padding: 3px 10px; border-radius: 5px; letter-spacing: .02em; }
    .agol-geo-kawasan .agol-popup-title { font-size: 15px; }

    .cctv-message { padding: 12px; margin-bottom:15px; border-radius: 10px; color: #567; background: #f4f8fb; font-size: 11px; text-align: center; }
    /* CCTV */
    .cctv-filter { display: grid; gap: 8px; margin: 10px 0; }
    .cctv-filter input, .cctv-filter select { width: 100%; padding: 8px 9px; border: 1px solid #d7e2eb; border-radius: 8px; font: inherit; font-size: 11px; }
    .cctv-results { display: grid; gap: 7px; max-height: 380px; overflow-y: auto; padding-bottom: 2px; }
    .cctv-card { padding: 9px; border: 1px solid #e3edf5; border-radius: 10px; background: #fff; box-shadow: 0 3px 9px rgba(24,73,111,.05); cursor: pointer; }
    .cctv-card:hover { border-color: #1494ca; background: #f3fbff; }
    .cctv-card strong { display: block; overflow: hidden; color: #16466c; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
    .cctv-card small { display: block; margin-top: 4px; color: #668198; font-size: 9px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .cctv-card.cctv-result-item {
      position: relative;
      width: 100%;
      min-height: 62px;
      padding: 11px 38px 11px 13px;
      border: 1px solid #dfeaf2;
      border-radius: 12px;
      background: linear-gradient(135deg, #ffffff, #f4faff);
      box-shadow: 0 2px 8px rgba(24, 73, 111, .06);
      text-align: left;
      transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
    }
    .cctv-result-item::after {
      content: '›';
      position: absolute;
      top: 50%;
      right: 14px;
      color: #0879bf;
      font-size: 24px;
      font-weight: 300;
      line-height: 1;
      transform: translateY(-50%);
    }
    .cctv-result-item strong { color: #123f63; font-size: 12px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .cctv-result-item small { margin-top: 5px; color: #6b8295; font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .cctv-card.cctv-result-item:hover { border-color: #72c9eb; background: #effaff; box-shadow: 0 5px 14px rgba(8, 121, 191, .13); transform: translateY(-1px); }
    .cctv-autocomplete { position: relative; }
    .cctv-autocomplete-list { position: absolute; top: calc(100% + 2px); z-index: 1005; display: none; width: 100%; max-height: 180px; overflow-y: auto; border: 1px solid #cee1ef; border-radius: 8px; background: #fff; box-shadow: 0 7px 15px rgba(17,59,91,.13); }
    .cctv-autocomplete-list button { display: block; width: 100%; padding: 8px; border: 0; border-bottom: 1px solid #eef4f8; background: #fff; color: #244b6e; cursor: pointer; font-size: 10px; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .cctv-map-icon { display: grid; width: 40px; height: 40px; place-items: center; border: 2px solid #fff; border-radius: 50%; background: linear-gradient(145deg, #fff, #dceef8); box-shadow: 0 5px 12px rgba(0,72,135,.4); }
    .cctv-map-icon img { width: 25px; height: 25px; object-fit: contain; }
    .cctv-leaflet-popup .leaflet-popup-content-wrapper { overflow: hidden; padding: 0; border-radius: 12px; box-shadow: 0 12px 30px rgba(11,54,87,.25); }
    .cctv-leaflet-popup .leaflet-popup-content { width: auto !important; margin: 0; }
    .cctv-popup { min-width: 210px; overflow: hidden; color: #173d5f; font-family: 'Segoe UI', sans-serif; }
    .cctv-popup-label { display: inline-block; margin: 11px 12px 5px; padding: 3px 6px; border-radius: 99px; background: #e4f5fc; font-size: 9px; font-weight: 700; letter-spacing: .06em; }
    .cctv-popup strong { display: block; overflow: hidden; padding: 0 12px; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
    .cctv-popup span { display: block; overflow: hidden; padding: 4px 12px 10px; color: #6a8498; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
    .cctv-popup button { width: 100%; padding: 10px; border: 0; color: #fff; background: linear-gradient(90deg, #0879bf, #11a4cb); cursor: pointer; font-size: 11px; font-weight: 700; }

    /* CCTV Card */
    .cctv-card {
      border: 1px solid var(--border-color); border-radius: 10px; background: var(--bg-card);
      overflow: hidden;
      color: var(--text-primary);
    }
    /* .cctv-card tetap ada: cctv.js memakai ulang kelas ini untuk tiap
       tombol hasil pencarian (class="cctv-card cctv-result-item"). Yang
       dihapus hanya .cctv-sheet-handle, yang tidak lagi ada di markup. */
    #cctv-search-sheet { margin-top: 10px; }
    #geotoolsTabGeonusa #cctv-search-sheet { margin-top: 12px; }

    /* ── Hotspot Sidebar (Desktop: kanan) ── */
    #hotspot-sheet {
      display: flex;
      position: fixed;
      top: 120px;
      right: 12px;
      bottom: 12px;
      left: auto;
      width: min(380px, calc(100vw - 106px));
      height: auto;
      border-radius: 16px;
      z-index: 1100;
      transform: translateX(calc(100% + 24px));
      transition: transform 0.3s ease-in-out;
      flex-direction: column;
      overflow: hidden;
      background: var(--bg-primary);
      box-shadow: var(--shadow-sheet);
      visibility: hidden;
      color: var(--text-primary);
    }
    #hotspot-sheet.sheet-open { transform: translateX(0); visibility: visible; }

    .leaflet-control-locate { display: none !important; }

    /* Jauhkan kontrol Lokasi Saya, Reset, dan Print dari sidebar Hotspot saat terbuka. */
    body.hotspot-sheet-open:not(.hotspot-sheet-minimized) .leaflet-bottom.leaflet-right {
      right: calc(min(380px, calc(100vw - 106px)) + 28px);
    }
    #hotspot-sheet .hs-sheet-handle { display: none; }
    #hotspot-sheet .hs-sheet-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 14px 16px 10px;
      border-bottom: 1px solid var(--border-color);
    }
    #hotspot-sheet .hs-sheet-title {
      display: flex;
      align-items: center;
      gap: 6px;
      color: var(--text-primary);
      font-size: 13px;
      font-weight: 700;
    }
    #hotspot-sheet .hs-sheet-close {
      width: 28px;
      height: 28px;
      border: 0;
      border-radius: 50%;
      background: var(--bg-tertiary);
      color: var(--text-tertiary);
      cursor: pointer;
      font-size: 16px;
    }
    #hotspot-sheet .hs-sheet-actions {
      display: flex;
      align-items: center;
      gap: 6px;
    }
    #hotspot-sheet .hs-sheet-minimize {
      display: grid;
      width: 28px;
      height: 28px;
      place-items: center;
      border: 0;
      border-radius: 50%;
      background: var(--bg-tertiary);
      color: var(--text-tertiary);
      cursor: pointer;
    }
    #hotspot-sheet .hs-sheet-body {
      flex: 1 1 auto;
      min-height: 0;
      overflow-y: auto;
      padding: 12px 16px 20px;
      -webkit-overflow-scrolling: touch;
    }
    @media (min-width: 769px) {
      /* Angka 68px & z-index: lihat catatan "Pita bawah tengah" di blok
         .zoom-control-wrap. */
      #hotspot-sheet.sheet-minimized {
        top: auto;
        right: auto;
        bottom: 68px;
        left: 50%;
        width: min(330px, calc(100vw - 24px));
        height: 52px;
        transform: translateX(-50%);
        z-index: 100;
      }
      #hotspot-sheet.sheet-minimized .hs-sheet-body { display: none; }
    }

    @media (max-width: 768px) {
      #hotspot-sheet {
        top: auto;
        right: 0;
        bottom: 0;
        left: 0;
        width: 100%;
        height: var(--sheet-h, 50vh);
        height: var(--sheet-h, 50dvh);
        border-radius: 16px 16px 0 0;
        transform: translateY(100%);
        box-shadow: 0 -4px 20px rgba(0,0,0,.15);
      }
      #hotspot-sheet.sheet-open { transform: translateY(0); }
      #hotspot-sheet .hs-sheet-handle { display: flex; }
      #hotspot-sheet .hs-sheet-head { padding: 0 16px 10px; }
      #hotspot-sheet.sheet-minimized {
        /* Posisi tepat di bawah toolbar Quick Layer pada layar mobile. */
        top: 100px;
        right: auto;
        bottom: auto;
        left: 50%;
        width: min(260px, calc(100vw - 48px));
        height: 36px;
        border: 1px solid rgba(255, 255, 255, .72);
        border-radius: 14px;
        background: rgba(255, 255, 255, .92);
        box-shadow: 0 4px 14px rgba(15, 23, 42, .12);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        transform: translateX(-50%);
        z-index: 100;
      }
      #hotspot-sheet.sheet-minimized .hs-sheet-handle,
      #hotspot-sheet.sheet-minimized .hs-sheet-body { display: none; }
      #hotspot-sheet.sheet-minimized .hs-sheet-head {
        min-height: 36px;
        box-sizing: border-box;
        /* 4px, bukan 6px: tombol 28px harus muat di chip 36px. */
        padding: 4px 12px;
        border-bottom: 0;
      }
    }
    /* GeoPangan result sidebar (desktop: kanan, mobile: bottom sheet). */
    #geopangan-sheet {
      display: flex;
      position: fixed;
      top: 120px;
      right: 12px;
      bottom: 12px;
      left: auto;
      z-index: 1100;
      width: min(430px, calc(100vw - 106px));
      height: auto;
      flex-direction: column;
      overflow: hidden;
      visibility: hidden;
      border-radius: 16px;
      background: var(--bg-primary);
      box-shadow: var(--shadow-sheet);
      transform: translateX(calc(100% + 24px));
      transition: transform .3s ease-in-out, visibility .3s;
      color: var(--text-primary);
    }
    #geopangan-sheet.sheet-open { transform: translateX(0); visibility: visible; }
    body.geopangan-sheet-open:not(.geopangan-sheet-minimized) .leaflet-bottom.leaflet-right { right: calc(min(430px, calc(100vw - 106px)) + 28px); }
    #geopangan-sheet .gp-sheet-handle { display: none; }
    #geopangan-sheet .gp-sheet-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 10px; border-bottom: 1px solid var(--border-color); }
    #geopangan-sheet .gp-sheet-title, #geopangan-sheet .gp-sheet-actions { display: flex; align-items: center; }
    #geopangan-sheet .gp-sheet-title { gap: 6px; color: var(--text-primary); font-size: 13px; font-weight: 700; }
    #geopangan-sheet .gp-sheet-actions { gap: 6px; }
    #geopangan-sheet .gp-sheet-minimize, #geopangan-sheet .gp-sheet-close { display: grid; width: 28px; height: 28px; place-items: center; border: 0; border-radius: 50%; background: var(--bg-tertiary); color: var(--text-tertiary); cursor: pointer; }
    #geopangan-sheet .gp-sheet-close { font-size: 16px; }
    #geopangan-sheet .gp-sheet-body { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 0 12px 16px; -webkit-overflow-scrolling: touch; }
    @media (min-width: 769px) {
      /* Angka 68px & z-index: lihat catatan "Pita bawah tengah" di blok
         .zoom-control-wrap. */
      #geopangan-sheet.sheet-minimized { top: auto; right: auto; bottom: 68px; left: 50%; width: min(330px, calc(100vw - 24px)); height: 52px; transform: translateX(-50%); z-index: 100; }
      #geopangan-sheet.sheet-minimized .gp-sheet-body { display: none; }
    }

/* ── TransJakarta Sheet (Desktop: panel kanan) ──
       Struktur dan perilaku sengaja mengikuti #geopangan-sheet persis:
       panel sisi kanan di desktop, bottom sheet di mobile, chip saat
       diminimize. Sheet ini bukan pola baru, dan tidak boleh punya
       perilaku berbeda dari yang sudah dipakai. */
    :is(#transjakarta-sheet, #transjogja-sheet) {
      display: flex;
      position: fixed;
      top: 120px;
      right: 12px;
      bottom: 12px;
      left: auto;
      z-index: 1100;
      width: min(390px, calc(100vw - 106px));
      height: auto;
      flex-direction: column;
      overflow: hidden;
      visibility: hidden;
      border-radius: 16px;
      background: var(--bg-primary);
      box-shadow: var(--shadow-sheet);
      transform: translateX(calc(100% + 24px));
      transition: transform .3s ease-in-out, visibility .3s;
      color: var(--text-primary);
    }
    :is(#transjakarta-sheet, #transjogja-sheet).sheet-open { transform: translateX(0); visibility: visible; }
    body.transjakarta-sheet-open:not(.transjakarta-sheet-minimized) .leaflet-bottom.leaflet-right { right: calc(min(390px, calc(100vw - 106px)) + 28px); }
    body.transjogja-sheet-open:not(.transjogja-sheet-minimized) .leaflet-bottom.leaflet-right { right: calc(min(390px, calc(100vw - 106px)) + 28px); }
    :is(#transjakarta-sheet, #transjogja-sheet) .tj-sheet-handle { display: none; }
    :is(#transjakarta-sheet, #transjogja-sheet) .tj-sheet-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 10px; border-bottom: 1px solid var(--border-color); }
    :is(#transjakarta-sheet, #transjogja-sheet) .tj-sheet-title, :is(#transjakarta-sheet, #transjogja-sheet) .tj-sheet-actions { display: flex; align-items: center; }
    :is(#transjakarta-sheet, #transjogja-sheet) .tj-sheet-title { gap: 7px; color: var(--text-primary); font-size: 13px; font-weight: 700; }
    :is(#transjakarta-sheet, #transjogja-sheet) .tj-sheet-sub { display: block; font-size: 10px; font-weight: 500; color: var(--text-tertiary); }
    :is(#transjakarta-sheet, #transjogja-sheet).sheet-minimized .tj-sheet-sub { display: none; }
    :is(#transjakarta-sheet, #transjogja-sheet) .tj-sheet-actions { gap: 6px; }
    :is(#transjakarta-sheet, #transjogja-sheet) .tj-sheet-minimize, :is(#transjakarta-sheet, #transjogja-sheet) .tj-sheet-close { display: grid; width: 28px; height: 28px; place-items: center; border: 0; border-radius: 50%; background: var(--bg-tertiary); color: var(--text-tertiary); cursor: pointer; }
    :is(#transjakarta-sheet, #transjogja-sheet) .tj-sheet-close { font-size: 16px; }
    :is(#transjakarta-sheet, #transjogja-sheet) .tj-sheet-body { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 12px 12px 16px; -webkit-overflow-scrolling: touch; }
    @media (min-width: 769px) {
      :is(#transjakarta-sheet, #transjogja-sheet).sheet-minimized { top: auto; right: auto; bottom: 68px; left: 50%; width: min(300px, calc(100vw - 24px)); height: 52px; transform: translateX(-50%); z-index: 100; }
      :is(#transjakarta-sheet, #transjogja-sheet).sheet-minimized .tj-sheet-body { display: none; }
    }

/* Kontrol Jalur di sheet, dan kartu halte yang jadi tombol. */
    :is(#transjakarta-sheet, #transjogja-sheet) .tj-ctrl { display: flex; flex-direction: column; gap: 6px; padding: 12px 0 2px; }
    :is(#transjakarta-sheet, #transjogja-sheet) .tj-switch {
      display: flex;
      align-items: center;
      gap: 8px;
      width: 100%;
      padding: 9px 10px;
      border: 1px solid var(--border-color);
      border-radius: 12px;
      background: var(--bg-secondary);
      color: var(--text-primary);
      font: inherit;
      font-size: 12px;
      text-align: left;
      cursor: pointer;
      transition: background .12s ease, border-color .12s ease;
    }
    :is(#transjakarta-sheet, #transjogja-sheet) .tj-switch:hover { background: var(--bg-card-hover); }
    :is(#transjakarta-sheet, #transjogja-sheet) .tj-switch:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 1px; }
    :is(#transjakarta-sheet, #transjogja-sheet) .tj-switch.is-on { border-color: var(--accent); background: var(--bg-card-hover); }
    :is(#transjakarta-sheet, #transjogja-sheet) .tj-switch-dot {
      width: 26px;
      height: 15px;
      flex-shrink: 0;
      border-radius: 999px;
      background: var(--bg-tertiary);
      box-shadow: inset 0 0 0 1px var(--border-color);
      position: relative;
      transition: background .15s ease;
    }
    :is(#transjakarta-sheet, #transjogja-sheet) .tj-switch-dot::after {
      content: "";
      position: absolute;
      top: 2px;
      left: 2px;
      width: 11px;
      height: 11px;
      border-radius: 50%;
      background: var(--text-muted);
      transition: transform .15s ease, background .15s ease;
    }
    :is(#transjakarta-sheet, #transjogja-sheet) .tj-switch.is-on .tj-switch-dot { background: var(--accent); box-shadow: none; }
    :is(#transjakarta-sheet, #transjogja-sheet) .tj-switch.is-on .tj-switch-dot::after { transform: translateX(11px); background: #fff; }
    :is(#transjakarta-sheet, #transjogja-sheet) .tj-switch-label { flex: 1 1 auto; font-weight: 600; }
    :is(#transjakarta-sheet, #transjogja-sheet) .tj-switch-count { font-size: 10px; color: var(--text-tertiary); font-variant-numeric: tabular-nums; }

    /* Kartu halte. Statistiknya tetap angka, tapi element-nya button
       supaya bisa difokus dan punya aria-pressed. Bentuknya sengaja
       sama dengan tj-stat-item supaya tidak terlihat seperti kotak
       baru yang tidak Serializeran. */
    :is(#transjakarta-sheet, #transjogja-sheet) button.tj-stat-item {
      font: inherit;
      color: inherit;
      cursor: pointer;
      transition: background .12s ease, border-color .12s ease;
    }
    :is(#transjakarta-sheet, #transjogja-sheet) button.tj-stat-item:hover { background: var(--bg-card-hover); }
    :is(#transjakarta-sheet, #transjogja-sheet) button.tj-stat-item:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 1px; }
    :is(#transjakarta-sheet, #transjogja-sheet) button.tj-stat-item.is-on { border-color: var(--accent); background: var(--bg-card-hover); }
    :is(#transjakarta-sheet, #transjogja-sheet) button.tj-stat-item.is-on b { color: var(--accent); }
    /* Isi sheet: tiga angka ringkas, lalu tabel koridor. */
    :is(#transjakarta-sheet, #transjogja-sheet) .tj-stat { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 12px; padding: 0 0 8px; }
    :is(#transjakarta-sheet, #transjogja-sheet) .tj-stat-item { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 8px 4px; border: 1px solid var(--border-color); border-radius: 12px; background: var(--bg-secondary); }
    :is(#transjakarta-sheet, #transjogja-sheet) .tj-stat-item b { font-size: 17px; font-weight: 800; letter-spacing: -.02em; color: var(--text-primary); font-variant-numeric: tabular-nums; }
    :is(#transjakarta-sheet, #transjogja-sheet) .tj-stat-item span { font-size: 9px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-tertiary); }
    :is(#transjakarta-sheet, #transjogja-sheet) .tj-filter-box { display: flex; flex-direction: column; gap: 10px; padding: 0 0 8px; }
    :is(#transjakarta-sheet, #transjogja-sheet) .tj-filter-row { display: flex; flex-direction: column; gap: 6px; }
    :is(#transjakarta-sheet, #transjogja-sheet) .tj-filter-label { font-size: 9px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-tertiary); }
    :is(#transjakarta-sheet, #transjogja-sheet) .tj-filter-search {
      width: 100%;
      box-sizing: border-box;
      min-height: 36px;
      padding: 8px 10px;
      border: 1px solid var(--border-color);
      border-radius: 10px;
      background: var(--bg-secondary);
      color: var(--text-primary);
      font: inherit;
      font-size: 12px;
    }
    :is(#transjakarta-sheet, #transjogja-sheet) .tj-table-title { margin: 16px 0 5px; font-size: 11px; font-weight: 750; color: var(--text-secondary); }
    :is(#transjakarta-sheet, #transjogja-sheet) .tj-table-wrap { overflow: visible; }
    :is(#transjakarta-sheet, #transjogja-sheet) .tj-empty-row { padding: 16px 8px; text-align: center; color: var(--text-tertiary); font-size: 11px; }
    :is(#transjakarta-sheet, #transjogja-sheet) .tj-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 12px; }
    :is(#transjakarta-sheet, #transjogja-sheet) .tj-table thead th { position: sticky; top: 0; z-index: 2; padding: 6px 6px; text-align: left; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-tertiary); background: var(--bg-primary); border-bottom: 1px solid var(--border-color); }
    :is(#transjakarta-sheet, #transjogja-sheet) .tj-th-koridor { width: 78px; }
    :is(#transjakarta-sheet, #transjogja-sheet) .tj-th-km { text-align: right; white-space: nowrap; font-size: 10px; font-weight: 800; letter-spacing: .08em; }
    :is(#transjakarta-sheet, #transjogja-sheet) .tj-th-nama { font-size: 10px; font-weight: 800; letter-spacing: .08em; }
    :is(#transjakarta-sheet, #transjogja-sheet) .tj-row { cursor: pointer; transition: background .12s ease; }
    :is(#transjakarta-sheet, #transjogja-sheet) .tj-row:hover { background: var(--bg-card-hover); }
    :is(#transjakarta-sheet, #transjogja-sheet) .tj-row.is-selected { background: rgba(249, 115, 22, 0.08); box-shadow: inset 3px 0 0 #f97316; }
    :is(#transjakarta-sheet, #transjogja-sheet) .tj-row:focus-visible { outline: 2px solid var(--border-focus); outline-offset: -2px; }
    :is(#transjakarta-sheet, #transjogja-sheet) .tj-row td { padding: 7px 6px; border-bottom: 1px solid var(--border-secondary); vertical-align: middle; }
    :is(#transjakarta-sheet, #transjogja-sheet) .tj-td-koridor { width: 78px; }
    :is(#transjakarta-sheet, #transjogja-sheet) .tj-koridor-toggle { display: flex; align-items: flex-start; gap: 5px; cursor: pointer; }
    :is(#transjakarta-sheet, #transjogja-sheet) .tj-koridor-check { width: 13px; height: 13px; margin: 1px 0 0; accent-color: var(--accent); flex: 0 0 auto; }
    :is(#transjakarta-sheet, #transjogja-sheet) .tj-koridor-toggle > span { min-width: 0; }
    :is(#transjakarta-sheet, #transjogja-sheet) .tj-koridor-toggle b { display: block; font-size: 11px; font-weight: 750; color: var(--text-primary); }
    :is(#transjakarta-sheet, #transjogja-sheet) .tj-koridor-toggle small { display: block; margin-top: 2px; font-size: 8px; line-height: 1.25; color: var(--text-tertiary); }
    :is(#transjakarta-sheet, #transjogja-sheet) .tj-td-nama { min-width: 0; }
    :is(#transjakarta-sheet, #transjogja-sheet) .tj-td-nama b { display: block; font-size: 12px; font-weight: 750; color: var(--text-primary); }
    :is(#transjakarta-sheet, #transjogja-sheet) .tj-td-nama small { display: block; margin-top: 2px; font-size: 10px; line-height: 1.35; color: var(--text-tertiary); }
    :is(#transjakarta-sheet, #transjogja-sheet) .tj-td-km { text-align: right; white-space: nowrap; font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text-secondary); }
    :is(#transjakarta-sheet, #transjogja-sheet) .tj-sumber { margin-top: 10px; padding-top: 9px; border-top: 1px solid var(--border-color); font-size: 9.5px; line-height: 1.5; color: var(--text-tertiary); }
    :is(#transjakarta-sheet, #transjogja-sheet) .tj-kosong { display: flex; flex-direction: column; gap: 5px; padding: 26px 12px; text-align: center; }
    :is(#transjakarta-sheet, #transjogja-sheet) .tj-kosong b { font-size: 13px; color: var(--text-primary); }
    :is(#transjakarta-sheet, #transjogja-sheet) .tj-kosong span { font-size: 11px; line-height: 1.55; color: var(--text-tertiary); }
    #transjogja-sheet .tgj-route-list { display: grid; gap: 5px; margin-top: 8px; }
    #transjogja-sheet .tgj-route { display: flex; align-items: center; gap: 9px; width: 100%; padding: 9px 10px; border: 1px solid var(--border-color); border-radius: 10px; background: var(--bg-secondary); color: var(--text-primary); text-align: left; cursor: pointer; }
    #transjogja-sheet .tgj-route:hover, #transjogja-sheet .tgj-route.is-selected { border-color: #22d3ee; background: var(--bg-card-hover); }
    #transjogja-sheet .tgj-route-color { width: 4px; height: 28px; flex: 0 0 auto; border-radius: 99px; }
    #transjogja-sheet .tgj-route > span:nth-child(2) { min-width: 0; flex: 1; }
    #transjogja-sheet .tgj-route b, #transjogja-sheet .tgj-route small { display: block; }
    #transjogja-sheet .tgj-route b { font-size: 11px; }
    #transjogja-sheet .tgj-route small { margin-top: 2px; color: var(--text-tertiary); font-size: 9px; }
    #transjogja-sheet .tgj-route .tgj-route-summary { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-height: 1.45; white-space: normal; }
    #transjogja-sheet .tgj-route .tgj-route-summary strong { color: var(--text-secondary); font-weight: 750; }
    #transjogja-sheet .tgj-route-details { margin: 0 8px 7px 23px; padding: 11px; border: 1px solid var(--border-color); border-radius: 12px; background: var(--bg-secondary); color: var(--text-secondary); }
    #transjogja-sheet .tgj-gis-title { display: flex; align-items: center; gap: 9px; margin-bottom: 10px; }
    #transjogja-sheet .tgj-gis-pin { display: grid; width: 30px; height: 30px; place-items: center; border-radius: 9px; background: #cffafe; color: #0e7490; font-size: 18px; }
    #transjogja-sheet .tgj-gis-title b, #transjogja-sheet .tgj-gis-title small { display: block; }
    #transjogja-sheet .tgj-gis-title b { color: var(--text-primary); font-size: 11px; }
    #transjogja-sheet .tgj-gis-title small { margin-top: 2px; color: var(--text-tertiary); font-size: 9px; }
    #transjogja-sheet .tgj-gis-diagram { padding: 10px; border: 1px solid #dbeafe; border-radius: 10px; background: linear-gradient(145deg, #f8fbff, #eff6ff); }
    #transjogja-sheet .tgj-gis-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 9px; color: #334155; font-size: 9px; font-weight: 800; letter-spacing: .07em; }
    #transjogja-sheet .tgj-gis-heading small { color: #64748b; font-size: 8px; letter-spacing: .04em; }
    #transjogja-sheet .tgj-gis-direction + .tgj-gis-direction { margin-top: 12px; padding-top: 10px; border-top: 1px dashed #cbd5e1; }
    #transjogja-sheet .tgj-gis-direction-label { margin-bottom: 6px; color: #64748b; font-size: 9px; font-weight: 700; }
    #transjogja-sheet .tgj-gis-path { position: relative; display: flex; align-items: stretch; gap: 0; max-height: none; overflow-x: auto; overflow-y: hidden; padding: 8px 2px 10px; scroll-snap-type: x proximity; scrollbar-width: thin; scrollbar-color: #94a3b8 transparent; }
    #transjogja-sheet .tgj-gis-path::before { top: 20px; right: 20px; bottom: auto; left: 20px; width: calc(100% - 40px); border-top: 2px solid #bae6fd; border-left: 0; }
    #transjogja-sheet .tgj-gis-node { display: flex; flex: 0 0 148px; flex-direction: column; align-items: flex-start; gap: 8px; min-height: 112px; padding: 0 10px; scroll-snap-align: start; }
    #transjogja-sheet .tgj-gis-marker { width: 27px; height: 27px; flex-basis: 27px; box-shadow: 0 0 0 4px #f8fbff; }
    #transjogja-sheet .tgj-gis-node-label { width: 100%; padding: 0; }
    #transjogja-sheet .tgj-gis-node-label b { font-size: 10px; }
    #transjogja-sheet .tgj-gis-more { display: flex; flex: 0 0 120px; align-items: center; padding: 0 10px; }
    [data-theme="dark"] #transjogja-sheet .tgj-gis-path::before { border-top-color: #155e75; border-left-color: transparent; }
    [data-theme="dark"] #transjogja-sheet .tgj-gis-marker { box-shadow: 0 0 0 4px #172235; }
    #transjogja-sheet .tgj-gis-path::before { position: absolute; top: 13px; bottom: 15px; left: 12px; border-left: 2px solid #bae6fd; content: ""; }
    #transjogja-sheet .tgj-gis-node { position: relative; display: flex; align-items: center; gap: 9px; min-height: 34px; }
    #transjogja-sheet .tgj-gis-marker { z-index: 1; display: grid; width: 25px; height: 25px; flex: 0 0 25px; place-items: center; border: 2px solid #7dd3fc; border-radius: 50%; background: #fff; color: #0369a1; font-size: 8px; font-weight: 800; }
    #transjogja-sheet .tgj-gis-node.is-start .tgj-gis-marker { border-color: #34d399; background: #ecfdf5; color: #047857; }
    #transjogja-sheet .tgj-gis-node.is-end .tgj-gis-marker { border-color: #fb7185; background: #fff1f2; color: #be123c; }
    #transjogja-sheet .tgj-gis-node-label { min-width: 0; padding: 4px 0; }
    #transjogja-sheet .tgj-gis-node-label small, #transjogja-sheet .tgj-gis-node-label b { display: block; }
    #transjogja-sheet .tgj-gis-node-label small { color: #64748b; font-size: 7px; font-weight: 800; letter-spacing: .07em; }
    #transjogja-sheet .tgj-gis-node-label b { color: #1e293b; font-size: 10px; line-height: 1.35; overflow-wrap: anywhere; }
    #transjogja-sheet .tgj-gis-more { padding: 5px 0 5px 34px; color: #64748b; font-size: 9px; }
    #transjogja-sheet .tgj-route-empty { padding: 8px; border-radius: 8px; background: #fff7ed; color: #9a3412; font-size: 9px; }
    [data-theme="dark"] #transjogja-sheet .tgj-gis-pin { background: #164e63; color: #cffafe; }
    [data-theme="dark"] #transjogja-sheet .tgj-gis-diagram { border-color: #334155; background: linear-gradient(145deg, #172235, #111827); }
    [data-theme="dark"] #transjogja-sheet .tgj-gis-heading,
    [data-theme="dark"] #transjogja-sheet .tgj-gis-node-label b { color: #e2e8f0; }
    [data-theme="dark"] #transjogja-sheet .tgj-gis-heading small,
    [data-theme="dark"] #transjogja-sheet .tgj-gis-direction-label,
    [data-theme="dark"] #transjogja-sheet .tgj-gis-node-label small,
    [data-theme="dark"] #transjogja-sheet .tgj-gis-more { color: #94a3b8; }
    [data-theme="dark"] #transjogja-sheet .tgj-gis-direction + .tgj-gis-direction { border-top-color: #475569; }
    [data-theme="dark"] #transjogja-sheet .tgj-gis-path::before { border-left-color: #155e75; }
    /* Trans Jogja stop sequence: scrollable horizontal route strip. */
    #transjogja-sheet .tgj-gis-path { display: flex; align-items: stretch; gap: 0; max-height: none; overflow-x: auto; overflow-y: hidden; padding: 8px 2px 10px; scroll-snap-type: x proximity; scrollbar-width: thin; scrollbar-color: #94a3b8 transparent; }
    #transjogja-sheet .tgj-gis-path::before { top: 20px; right: 20px; bottom: auto; left: 20px; width: calc(100% - 40px); border-top: 2px solid #bae6fd; border-left: 0; }
    #transjogja-sheet .tgj-gis-node { display: flex; flex: 0 0 148px; flex-direction: column; align-items: flex-start; gap: 8px; min-height: 112px; padding: 0 10px; scroll-snap-align: start; }
    #transjogja-sheet .tgj-gis-marker { width: 27px; height: 27px; flex-basis: 27px; box-shadow: 0 0 0 4px #f8fbff; }
    #transjogja-sheet .tgj-gis-node-label { width: 100%; padding: 0; }
    #transjogja-sheet .tgj-gis-more { display: flex; flex: 0 0 120px; align-items: center; padding: 0 10px; }
    [data-theme="dark"] #transjogja-sheet .tgj-gis-path::before { border-top-color: #155e75; border-left-color: transparent; }
    [data-theme="dark"] #transjogja-sheet .tgj-gis-marker { box-shadow: 0 0 0 4px #172235; }

    [data-theme="dark"] #transjogja-sheet .tgj-gis-marker { border-color: #0e7490; background: #1e293b; color: #bae6fd; }
    [data-theme="dark"] #transjogja-sheet .tgj-gis-node.is-start .tgj-gis-marker { border-color: #059669; background: #064e3b; color: #a7f3d0; }
    [data-theme="dark"] #transjogja-sheet .tgj-gis-node.is-end .tgj-gis-marker { border-color: #e11d48; background: #881337; color: #fecdd3; }
    /* Trans Jogja stop sequence: vertical, scrollable route diagram. */
    #transjogja-sheet .tgj-gis-path { flex-direction: column; align-items: stretch; max-height: 320px; overflow-x: hidden; overflow-y: auto; padding: 8px 2px 10px; scroll-snap-type: y proximity; }
    #transjogja-sheet .tgj-gis-path::before { top: 13px; right: auto; bottom: 15px; left: 12px; width: auto; border-top: 0; border-left: 2px solid #bae6fd; }
    #transjogja-sheet .tgj-gis-node { flex: 0 0 auto; flex-direction: row; align-items: center; gap: 9px; min-height: 34px; padding: 0; scroll-snap-align: start; }
    #transjogja-sheet .tgj-gis-node-label { width: auto; flex: 1 1 auto; padding: 4px 0; }
    #transjogja-sheet .tgj-gis-more { flex: 0 0 auto; align-items: center; padding: 5px 0 5px 34px; }
    [data-theme="dark"] #transjogja-sheet .tgj-gis-path::before { border-top-color: transparent; border-left-color: #155e75; }
    #transjogja-sheet .tgj-route:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 1px; }
    [data-theme="dark"] :is(#transjakarta-sheet, #transjogja-sheet) { background: var(--bg-secondary); }
    [data-theme="dark"] :is(#transjakarta-sheet, #transjogja-sheet) .tj-sheet-head { border-bottom-color: var(--border-color); }
    /* ── GeoTools Bottom Sheet (Desktop) ── */
    #geotools-sheet {
      /* Dulu sheet ini mendeklarasikan lebar sendiri `--desktop-sheet-width:
         37vw`, sehingga tidak sama dengan sheet lain (legenda, GeoData,
         tabel atribut, dll. memakai nilai standar 30vw), dan peta ikut
         salah hitung karena #map membaca var dari body, bukan dari sheet.
         Dihapus pada 2026-10-31 agar lebar GeoTools ikut standar 30vw --
         samakan dengan sheet legenda. Kembalikan deklarasi
         `--desktop-sheet-width: 37vw;` di baris ini bila GeoTools perlu
         lebih lebar lagi. */
      position: fixed; top: 120px; right: 12px; bottom: 12px;
      width: min(380px, calc(100vw - 106px));
      border-radius: 16px; z-index: 1100;
      background: var(--bg-primary);
      box-shadow: var(--shadow-sheet);
      transform: translateX(calc(100% + 24px));
      visibility: hidden;
      transition: transform .3s ease-in-out, visibility .3s;
      display: flex; flex-direction: column; overflow: hidden;
      color: var(--text-primary);
    }
    #geotools-sheet.gs-sheet-open { transform: translateX(0); visibility: visible; }
    #geotools-sheet .gs-sheet-handle { display: none; }
    #geotools-sheet .gs-sheet-head {
      display: flex; align-items: center; justify-content: space-between;
      padding: 14px 16px 10px; border-bottom: 1px solid var(--border-color); flex-shrink: 0;
    }
    #geotools-sheet .gs-sheet-title {
      display: flex; align-items: center; gap: 6px;
      color: var(--text-primary); font-size: 13px; font-weight: 700;
      white-space: nowrap;
    }
    #geotools-sheet .gs-sheet-actions {
      display: flex; align-items: center; gap: 6px;
    }
    #geotools-sheet .geotools-dropdown {
      flex: 0 0 auto; width: 124px; min-width: 0; max-width: 124px;
      margin-bottom: 0; font-size: 10.5px; font-weight: 600; line-height: 1.2;
      padding: 7px 24px 7px 9px; color: var(--text-primary);
      border: 1px solid var(--border-color); border-radius: 8px;
      background: var(--bg-card); box-shadow: 0 1px 2px rgba(0,0,0,0.04);
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
      background-repeat: no-repeat; background-position: right 9px center;
    }
    #geotools-sheet .geotools-dropdown:hover,
    #geotools-sheet .geotools-dropdown:focus {
      border-color: var(--border-color);
      box-shadow: 0 0 0 2px rgba(8,145,178,.08);
    }
    #geotools-sheet .gs-sheet-close {
      display: grid; width: 28px; height: 28px; place-items: center;
      border: 0; border-radius: 50%; background: var(--bg-tertiary); color: var(--text-tertiary);
      cursor: pointer; font-size: 16px;
    }
    #geotools-sheet .gs-sheet-minimize {
      display: grid; width: 28px; height: 28px; place-items: center;
      border: 0; border-radius: 50%; background: var(--bg-tertiary); color: var(--text-tertiary);
      cursor: pointer; transition: background .15s;
    }
    #geotools-sheet .gs-sheet-minimize:hover { background: var(--border-color); }
    /* Angka 68px: lihat catatan "Pita bawah tengah" di blok
       .zoom-control-wrap. */
    #geotools-sheet.gs-sheet-minimized {
      top: auto; right: auto; bottom: 68px; left: 50%;
      width: min(220px, calc(100vw - 48px));
      height: 36px;
      border-radius: 18px;
      transform: translateX(-50%);
      visibility: visible;
      z-index: 100;
    }
    #geotools-sheet.gs-sheet-minimized .gs-sheet-handle,
    #geotools-sheet.gs-sheet-minimized .gs-sheet-body { display: none; }
      #geotools-sheet.gs-sheet-minimized .gs-sheet-head {
        min-height: 36px; box-sizing: border-box;
        /* 4px, bukan 6px: tombol 28px harus muat di chip 36px. */
        padding: 4px 14px; border-bottom: 0;
      }
    #geotools-sheet.gs-sheet-minimized .gs-sheet-title { cursor: pointer; font-size: 11px; }
    #geotools-sheet .gs-sheet-body {
      flex: 1 1 auto; min-height: 0; overflow-y: auto;
      padding: 12px 16px 16px; -webkit-overflow-scrolling: touch;
      scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) transparent;
    }
    #geotools-sheet .gs-sheet-body::-webkit-scrollbar { width: 5px; }
    #geotools-sheet .gs-sheet-body::-webkit-scrollbar-track { background: transparent; }
    #geotools-sheet .gs-sheet-body::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 3px; }

      /* ── GeoData Sheet (Desktop) ──
       *
       * GeoData punya sheet sendiri (register 'geodata' di map-core.js) dan
       * kelas sendiri. Aturan .gs-sheet-* di blok GeoTools TIDAK berlaku di
       * sini karena semuanya di-scope ke #geotools-sheet - makanya blok ini
       * ditulis ulang utuh, bukan Warisan.
       *
       * Mengikuti template sheet tabel (#attr-table-sheet), legenda
       * (.lg-sidebar), dan alat & ukur (.dm-sidebar): panel sisi kanan,
       * handle disembunyikan di desktop (cuma drag pill di mobile), chip
       * 36px saat diminimalkan, dan kontrol Leaflet kanan digeser agar tidak
       * tertutup panel. */
      #geodata-sheet {
        position: fixed; top: 120px; right: 12px; bottom: 12px;
        width: min(380px, calc(100vw - 106px));
        border-radius: 16px; z-index: 1100;
        background: var(--bg-primary);
        box-shadow: var(--shadow-sheet);
        transform: translateX(calc(100% + 24px));
        visibility: hidden;
        transition: transform .3s ease-in-out, visibility .3s;
        display: flex; flex-direction: column; overflow: hidden;
        color: var(--text-primary);
      }
      #geodata-sheet.geodata-sheet-open { transform: translateX(0); visibility: visible; }
      /* Sama seperti sheet GeoTools dan tabel: panelnya menutupi kontrol
         Leaflet kanan, jadi kontrolnya digeser ke kiri, bukan ditimpa. */
      body.geodata-sheet-open:not(.geodata-sheet-minimized) .leaflet-bottom.leaflet-right {
        right: calc(min(380px, calc(100vw - 106px)) + 28px);
      }
      #geodata-sheet .geodata-sheet-handle { display: none; }
      #geodata-sheet .geodata-sheet-head {
        display: flex; align-items: center; justify-content: space-between;
        padding: 14px 16px 10px; border-bottom: 1px solid var(--border-color); flex-shrink: 0;
      }
      #geodata-sheet .geodata-sheet-title {
        display: flex; align-items: center; gap: 6px;
        color: var(--text-primary); font-size: 13px; font-weight: 700;
      }
      #geodata-sheet .geodata-sheet-close {
        display: grid; width: 28px; height: 28px; place-items: center;
        border: 0; border-radius: 50%; background: var(--bg-tertiary); color: var(--text-tertiary);
        cursor: pointer; font-size: 16px;
      }
      #geodata-sheet .geodata-sheet-actions {
        display: flex; align-items: center; gap: 6px;
      }
      #geodata-sheet .geodata-sheet-minimize {
        display: grid; width: 28px; height: 28px; place-items: center;
        border: 0; border-radius: 50%; background: var(--bg-tertiary); color: var(--text-tertiary);
        cursor: pointer; transition: background .15s;
      }
      #geodata-sheet .geodata-sheet-minimize:hover { background: var(--border-color); }
      /* Angka 68px: lihat catatan "Pita bawah tengah" di blok
         .zoom-control-wrap. */
      #geodata-sheet.geodata-sheet-minimized {
        top: auto; right: auto; bottom: 68px; left: 50%;
        width: min(220px, calc(100vw - 48px));
        height: 36px;
        border-radius: 18px;
        transform: translateX(-50%);
        visibility: visible;
        z-index: 100;
      }
      #geodata-sheet.geodata-sheet-minimized .geodata-sheet-handle,
      #geodata-sheet.geodata-sheet-minimized .geodata-sheet-body { display: none; }
      #geodata-sheet.geodata-sheet-minimized .geodata-sheet-head {
        min-height: 36px; box-sizing: border-box;
        /* 4px, bukan 6px: tombol 28px harus muat di chip 36px. */
        padding: 4px 14px; border-bottom: 0;
      }
      #geodata-sheet.geodata-sheet-minimized .geodata-sheet-title { cursor: pointer; font-size: 11px; }
      #geodata-sheet .geodata-sheet-body {
        flex: 1 1 auto; min-height: 0; overflow-y: auto;
        padding: 12px 16px 16px; -webkit-overflow-scrolling: touch;
        scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) transparent;
      }
      #geodata-sheet .geodata-sheet-body::-webkit-scrollbar { width: 5px; }
      #geodata-sheet .geodata-sheet-body::-webkit-scrollbar-track { background: transparent; }
      #geodata-sheet .geodata-sheet-body::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 3px; }

      /* ── Draw & Measure Sidebar (Desktop) ── */

    .dm-sidebar {
      position: fixed; top: 120px; right: 12px; bottom: 12px;
      width: min(380px, calc(100vw - 106px));
      border-radius: 16px; z-index: 1100;
      background: var(--bg-primary);
      box-shadow: 0 8px 32px rgba(0,0,0,.18), 0 2px 8px rgba(0,0,0,.08);
      transform: translateX(calc(100% + 24px));
      visibility: hidden;
      transition: transform .3s ease-in-out, visibility .3s;
      display: flex; flex-direction: column; overflow: hidden;
      color: var(--text-primary);
    }
    .dm-sidebar.dm-sidebar-open { transform: translateX(0); visibility: visible; }
    .dm-sidebar-head {
      display: flex; align-items: center; justify-content: space-between;
      padding: 14px 16px 10px; border-bottom: 1px solid var(--border-color); flex-shrink: 0;
    }
    .dm-sidebar-title {
      display: flex; align-items: center; gap: 6px;
      color: var(--text-primary); font-size: 13px; font-weight: 700;
    }
    .dm-sidebar-actions { display: flex; align-items: center; gap: 6px; }
    #hotspot-sheet .hs-sheet-minimize svg,
    #geopangan-sheet .gp-sheet-minimize svg,
    :is(#transjakarta-sheet, #transjogja-sheet) .tj-sheet-minimize svg,
    #geotools-sheet .gs-sheet-minimize svg,
    #geodata-sheet .geodata-sheet-minimize svg,
    #attr-table-sheet .at-sheet-minimize svg,
    #ai-sheet .ais-sheet-minimize svg,
    .dm-sidebar-minimize svg,
    .lg-sidebar-minimize svg,
    .al-sidebar-minimize svg,
    .pa-minimize svg {
      display: block;
      width: 14px;
      height: 14px;
      stroke-width: 2.2;
      stroke-linecap: round;
      stroke-linejoin: round;
    }
    .dm-sidebar-close {
      display: grid; width: 28px; height: 28px; place-items: center;
      border: 0; border-radius: 50%; background: var(--bg-tertiary); color: var(--text-tertiary);
      cursor: pointer; font-size: 16px;
    }
    .dm-sidebar-minimize {
      display: grid; width: 28px; height: 28px; place-items: center;
      border: 0; border-radius: 50%; background: var(--bg-tertiary); color: var(--text-tertiary);
      cursor: pointer; transition: background .15s;
    }
    .dm-sidebar-minimize:hover { background: var(--border-color); }
    .dm-sidebar-body {
      flex: 1 1 auto; min-height: 0; overflow-y: auto;
      padding: 12px 16px 16px; -webkit-overflow-scrolling: touch;
      scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) transparent;
    }
    .dm-sidebar-body::-webkit-scrollbar { width: 5px; }
    .dm-sidebar-body::-webkit-scrollbar-track { background: transparent; }
    .dm-sidebar-body::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 3px; }
    .dm-sidebar-grid {
      display: grid; grid-template-columns: repeat(2, 1fr);
      gap: 8px;
    }
    .dm-sidebar-option {
      display: flex; align-items: center; gap: 10px;
      padding: 10px 12px; border: 1.5px solid var(--border-color);
      border-radius: 10px; background: var(--bg-secondary);
      cursor: pointer; transition: all .15s ease;
    }
    .dm-sidebar-option:hover { border-color: var(--accent); background: var(--bg-card-hover); }
    .dm-sidebar-option-icon {
      width: 32px; height: 32px; border-radius: 8px;
      display: grid; place-items: center; flex-shrink: 0;
      background: var(--bg-tertiary); color: var(--accent); font-size: 14px;
    }
    .dm-sidebar-option-label {
      font-size: 12px; font-weight: 600; color: var(--text-primary); line-height: 1.3;
    }
    .dm-sidebar-option.active { border-color: var(--accent); background: rgba(8,145,178,.12); }
    .dm-sidebar-option.active .dm-sidebar-option-icon { background: var(--accent); color: #fff; }
    .dm-sidebar-option.active .dm-sidebar-option-label { color: var(--accent); }

    /* Grid koordinat (graticule) */
    #cgToggleBtn { grid-column: 1 / -1; }
    .cg-label { position: absolute; pointer-events: none; }
    .cg-label span {
      display: inline-block; white-space: nowrap;
      font-size: 10px; line-height: 1.2; font-weight: 600;
      padding: 1px 4px; border-radius: 4px;
      background: rgba(255,255,255,.88); color: #0f172a;
      border: 1px solid rgba(15,23,42,.25);
      box-shadow: 0 1px 2px rgba(0,0,0,.15);
    }
    .cg-label-lat span { transform: translate(0, -50%); margin-left: 4px; }
    .cg-label-lon span { transform: translate(-50%, -100%); margin-bottom: 2px; }
    [data-theme="dark"] .cg-label span {
      background: rgba(15,23,42,.88); color: #e2e8f0; border-color: rgba(226,232,240,.35);
    }
    .dm-measure-result {
      margin-top: 12px; padding: 10px 12px; border-radius: 8px;
      background: var(--bg-secondary); font-size: 12px; color: var(--text-primary);
      min-height: 20px;
    }
    .measure-hud {
      position: absolute;
      top: 108px;
      left: 50%;
      bottom: auto;
      z-index: 100000;
      width: min(280px, calc(100vw - 32px));
      padding: 6px 12px;
      border: 1px solid rgba(163, 184, 201, .55);
      border-radius: 16px;
      background: rgba(255, 255, 255, .96);
      color: #16324f;
      box-shadow: 0 8px 20px rgba(15, 42, 67, .16), 0 2px 6px rgba(15, 42, 67, .1);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      opacity: 0;
      pointer-events: none;
      transform: translate(-50%, 6px);
      transition: opacity .22s ease, transform .22s ease;
    }
    .measure-hud[hidden] { display: none; }
    .measure-hud:not([hidden]) {
      opacity: 1;
      pointer-events: auto;
      transform: translate(-50%, 0);
    }
    .measure-hud-head {
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .measure-hud-icon {
      display: grid;
      width: 20px;
      height: 20px;
      flex: 0 0 20px;
      place-items: center;
      border-radius: 7px;
      background: #e5f6fb;
      color: #007fa8;
    }
    .measure-hud-heading { min-width: 0; flex: 1; }
    .measure-hud-heading strong {
      display: block;
      color: #16324f;
      font-size: 10px;
      font-weight: 700;
    }
    .measure-hud-heading small {
      display: block;
      margin-top: 2px;
      overflow: hidden;
      color: #5c788c;
      font-size: 9px;
      line-height: 1.25;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .measure-hud-close {
      display: grid;
      width: 20px;
      height: 20px;
      flex: 0 0 20px;
      place-items: center;
      border: 0;
      border-radius: 50%;
      background: transparent;
      color: #648096;
      cursor: pointer;
      font-size: 19px;
      line-height: 1;
    }
    .measure-hud-close:hover { background: #edf3f7; color: #16324f; }
    .measure-hud-reading {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: 10px;
      margin-top: 4px;
      padding: 4px 7px;
      border: 1px solid #dce8ef;
      border-radius: 7px;
      background: #f8fbfd;
    }
    .measure-hud-label {
      display: block;
      color: #6b8799;
      font-size: 9px;
      font-weight: 700;
      letter-spacing: .08em;
      text-transform: uppercase;
    }
    .measure-hud-reading strong {
      display: block;
      margin-top: 2px;
      color: #007fa8;
      font-size: 17px;
      font-weight: 700;
      letter-spacing: -.02em;
      line-height: 1;
    }
    .measure-hud-meta {
      color: #648096;
      font-size: 10px;
      white-space: nowrap;
    }
    .measure-hud-actions {
      display: flex;
      gap: 4px;
      margin-top: 4px;
    }
    .measure-hud-actions button {
      min-height: 22px;
      padding: 0 7px;
      border-radius: 5px;
      cursor: pointer;
      font-size: 9px;
      font-weight: 700;
    }
    .measure-hud-finish {
      border: 1px solid #007fa8;
      background: #007fa8;
      color: #fff;
    }
    .measure-hud-finish:hover { background: #006b8e; }
    .measure-hud-finish:disabled { opacity: .5; cursor: not-allowed; }
    .measure-hud-remeasure {
      border: 1px solid #7bc7df;
      background: #eaf8fc;
      color: #007fa8;
    }
    .measure-hud-remeasure:hover { background: #d9f2f9; }
    .measure-hud-remeasure:disabled { opacity: .45; cursor: not-allowed; }
    .measure-hud-reset {
      border: 1px solid #cbdbe5;
      background: #fff;
      color: #476b80;
    }
    .measure-hud-reset:hover { background: #eef5f8; }
    [data-theme="dark"] .measure-hud {
      border-color: rgba(152, 190, 210, .3);
      background: rgba(24, 42, 56, .96);
      color: #e5f1f7;
      box-shadow: 0 14px 34px rgba(0, 0, 0, .3);
    }
    [data-theme="dark"] .measure-hud-heading strong,
    [data-theme="dark"] .measure-hud-close:hover { color: #e5f1f7; }
    [data-theme="dark"] .measure-hud-heading small,
    [data-theme="dark"] .measure-hud-meta { color: #a6bfcc; }
    [data-theme="dark"] .measure-hud-icon { background: #123f52; color: #63d0e8; }
    [data-theme="dark"] .measure-hud-reading { border-color: #2c4a5c; background: #1b3546; }
    [data-theme="dark"] .measure-hud-remeasure { border-color: #3d8298; background: #1b4657; color: #8de1f2; }
    [data-theme="dark"] .measure-hud-remeasure:hover { background: #245a6d; }
    [data-theme="dark"] .measure-hud-reset { border-color: #3d5d6d; background: #203d4d; color: #d1e5ed; }
    [data-theme="dark"] .measure-hud-reset:hover { background: #2a4b5c; }
    @media (max-width: 768px) {
      .measure-hud {
        top: 104px;
        bottom: auto;
        width: min(280px, calc(100vw - 32px));
        padding: 4px 8px;
        border-radius: 16px;
      }
      .measure-hud-reading strong { font-size: 16px; }
    }
    /* Angka 68px: lihat catatan "Pita bawah tengah" di blok
       .zoom-control-wrap. */
    .dm-sidebar.dm-sidebar-minimized {
      top: auto; right: auto; bottom: 68px; left: 50%;
      width: min(220px, calc(100vw - 48px));
      height: 36px;
      border-radius: 18px;
      transform: translateX(-50%);
      visibility: visible;
      z-index: 100;
    }
    .dm-sidebar.dm-sidebar-minimized .dm-sidebar-body { display: none; }
    /* Padding 4px supaya tombol 28px + 4 + 4 pas di chip 36px. */
    .dm-sidebar.dm-sidebar-minimized .dm-sidebar-head {
      min-height: 36px; box-sizing: border-box;
      padding: 4px 14px; border-bottom: 0;
    }
    .dm-sidebar.dm-sidebar-minimized .dm-sidebar-title { cursor: pointer; font-size: 11px; }

    /* ── Legend Sidebar (Desktop) ── */
    .lg-sidebar {
      position: fixed; top: 120px; right: 12px; bottom: 12px;
      width: min(320px, calc(100vw - 106px));
      border-radius: 16px; z-index: 1100;
      background: var(--bg-primary);
      box-shadow: 0 8px 32px rgba(0,0,0,.18), 0 2px 8px rgba(0,0,0,.08);
      transform: translateX(calc(100% + 24px));
      visibility: hidden;
      transition: transform .3s ease-in-out, visibility .3s;
      display: flex; flex-direction: column; overflow: hidden;
      color: var(--text-primary);
    }
    .lg-sidebar.lg-sidebar-open { transform: translateX(0); visibility: visible; }
    /* GeoFarm analysis panel: right sheet on desktop, bottom sheet on mobile.
       .al-sidebar (panel Layer Aktif) sengaja dibagi blok ini persis seperti
       lembar Legenda/GeoFarm dulu -- satu panel kanan polos, perilaku
       ditentukan kelas min/open masing-masing. */
    .pa-panel,
    .al-sidebar {
      position: fixed; top: 120px; right: 12px; bottom: 12px;
      width: min(320px, calc(100vw - 106px));
      border-radius: 16px; z-index: 1100;
      background: var(--bg-primary);
      box-shadow: 0 8px 32px rgba(0,0,0,.18), 0 2px 8px rgba(0,0,0,.08);
      transform: translateX(calc(100% + 24px));
      visibility: hidden;
      transition: transform .3s ease-in-out, visibility .3s;
      display: flex; flex-direction: column; overflow: hidden;
      color: var(--text-primary);
    }
    .pa-panel.pa-open,
    .al-sidebar.al-sidebar-open { transform: translateX(0); visibility: visible; }

    /* ── Handle geser pada mode chip ──
       Handle cuma berguna saat sheet sedang mengembang. Di mode chip yang
       tingginya cuma 36px, handle .sheet-drag-handle memakan 17px
       (padding 8+5 dan batang 4px) -- hampir separuh tinggi chip. Kepala
       sheet juga punya min-height 36px, jadi 17 + 36 = 53px di dalam wadah
       36px: kepala terdorong ke bawah sampai judul dan tombolnya terpotong
       di tepi chip.

       Lima sheet yang punya handle sendiri sudah menyembunyikannya di mode
       minimal. Tiga sheet yang memakai .sheet-drag-handle bersama perlu
       aturan yang sama, jadi diletakkan di sini secara global supaya
       berlaku di desktop maupun mobile. Child combinator dipakai supaya
       hanya handle milik sheet itu yang ikut hilang. */
    .dm-sidebar-minimized > .sheet-drag-handle,
    .lg-sidebar-minimized > .sheet-drag-handle,
    .pa-panel.pa-min > .sheet-drag-handle,
    .al-sidebar.al-sidebar-minimized > .sheet-drag-handle { display: none; }

    /* Mode minimal: panel jadi chip 36px di bawah tengah. Butuh aturan ini
       sendiri karena .lg-sidebar-minimized tidak ikut terselector .pa-min. */
    /* Angka 68px: lihat catatan "Pita bawah tengah" di blok
       .zoom-control-wrap. */
    .pa-panel.pa-min,
    .al-sidebar.al-sidebar-minimized {
      top: auto; right: auto; bottom: 68px; left: 50%;
      width: min(220px, calc(100vw - 48px));
      height: 36px;
      border-radius: 18px;
      z-index: 100;
    }
    /* Padding vertikal 4px, bukan 6px: tombol di kepala 28px, jadi 4 + 28
       + 4 = 36px dan pas mengisi chip. Dengan 6px isinya cuma 24px sehingga
       tombol terpotong 2px di atas dan bawah. */
    .pa-panel.pa-min .pa-head,
    .al-sidebar.al-sidebar-minimized .al-sidebar-head {
      min-height: 36px; box-sizing: border-box;
      padding: 4px 14px; border-bottom: 0;
    }
    .pa-panel.pa-min .pa-list,
    .al-sidebar.al-sidebar-minimized .al-sidebar-body { display: none; }
    /* Kontrol export di kepala juga disembunyikan: panel minimal hanya 36px,
       dan tombolnya tidak ada artinya tanpa daftar polygon. */
    .pa-panel.pa-min .pa-export { display: none; }
    .pa-panel.pa-min .pa-title,
    .al-sidebar.al-sidebar-minimized .al-sidebar-title { cursor: pointer; font-size: 11px; }
    /* Di mode chip, badge jumlah dan tombol "Matikan Semua" tidak muat. */
    .al-sidebar.al-sidebar-minimized .al-sidebar-count,
    .al-sidebar.al-sidebar-minimized .al-clear-all { display: none; }
    .lg-sidebar-head, .pa-head, .al-sidebar-head {
      display: flex; align-items: center; justify-content: space-between;
      padding: 14px 16px 10px; border-bottom: 1px solid var(--border-color); flex-shrink: 0;
    }
    .lg-sidebar-title, .pa-title, .al-sidebar-title {
      display: flex; align-items: center; gap: 6px;
      color: var(--text-primary); font-size: 13px; font-weight: 700;
    }
    /* Judul panel GeoFarm: nama fitur + badge jumlah polygon. Gaya badge
       (.pa-count) sudah ada di bawah blok ini; yang ditambah hanya layout. */
    .pa-title { min-width: 0; gap: 7px; }
    .pa-title > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .pa-title .pa-count { flex: 0 0 auto; white-space: nowrap; font-variant-numeric: tabular-nums; }
    .lg-sidebar-actions, .al-sidebar-actions { display: flex; align-items: center; gap: 6px; }
    .lg-sidebar-close, .pa-close, .al-sidebar-close {
      display: grid; width: 28px; height: 28px; place-items: center;
      border: 0; border-radius: 50%; background: var(--bg-tertiary); color: var(--text-tertiary);
      cursor: pointer; font-size: 16px;
    }
    .lg-sidebar-minimize,
    .al-sidebar-minimize {
      display: grid; width: 28px; height: 28px; place-items: center;
      border: 0; border-radius: 50%; background: var(--bg-tertiary); color: var(--text-tertiary);
      cursor: pointer; transition: background .15s;
    }
    .lg-sidebar-minimize:hover,
    .al-sidebar-minimize:hover { background: var(--border-color); }
    .lg-sidebar-body, .pa-list, .al-sidebar-body {
      flex: 1 1 auto; min-height: 0; overflow-y: auto;
      padding: 12px 16px 16px; -webkit-overflow-scrolling: touch;
      scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) transparent;
    }
    /* Isi Layer Aktif memenuhi lebar panel; padding umum 16px menyisakan
       ruang kosong yang terasa lebar di sisi kiri daftar. */
    .al-sidebar-body { padding: 10px 8px 12px; }
    /* Scroll horizontal dimatikan khusus di daftar hasil analisis GeoFarm.
       .pa-list di rule di atas hanya menulis overflow-y, dan menurut
       spesifikasi CSS sumbu yang tidak disebut ikut berubah jadi auto --
       jadi konten yang lebih lebar dari panel (baris soil 6 kolom, teks
       panjang tanpa titik) memunculkan scrollbar mendatar. Dipisah dari
       .lg-sidebar-body supaya legend sidebar tidak ikut berubah. */
    .pa-list { overflow-x: hidden; }
    .lg-sidebar-body .unified-legend-section { margin-bottom: 8px; width: 100%; }
    .lg-sidebar-body .unified-legend-section .swatch-row,
    .lg-sidebar-body .unified-legend-section .ramp-row,
    .lg-sidebar-body .unified-legend-section .swatch-list,
    .lg-sidebar-body .legend-item { width: 100%; box-sizing: border-box; }
    /* Angka 68px disamakan dengan chip GeoFarm dan Draw & Ukur; lihat
       catatan "Pita bawah tengah" di blok .zoom-control-wrap. */
    .lg-sidebar.dm-sidebar-minimized,
    .lg-sidebar.lg-sidebar-minimized,
    .al-sidebar.al-sidebar-minimized {
      top: auto; right: auto; bottom: 68px; left: 50%;
      width: min(220px, calc(100vw - 48px));
      height: 36px;
      border-radius: 18px;
      transform: translateX(-50%);
      visibility: visible;
      z-index: 100;
    }
    .lg-sidebar.lg-sidebar-minimized .lg-sidebar-body,
    .al-sidebar.al-sidebar-minimized .al-sidebar-body { display: none; }
    /* Padding 4px supaya tombol 28px + 4 + 4 pas di chip 36px. */
    .lg-sidebar.lg-sidebar-minimized .lg-sidebar-head,
    .al-sidebar.al-sidebar-minimized .al-sidebar-head {
      min-height: 36px; box-sizing: border-box;
      padding: 4px 14px; border-bottom: 0;
    }
    .lg-sidebar.lg-sidebar-minimized .lg-sidebar-title,
    .al-sidebar.al-sidebar-minimized .al-sidebar-title { cursor: pointer; font-size: 11px; }
    [data-theme="dark"] .lg-sidebar,
    [data-theme="dark"] .al-sidebar { background: var(--bg-primary); color: var(--text-primary); }

    /* ── Attribute Table Sheet (Desktop: kanan) ── */
    #attr-table-sheet {
      display: flex; position: fixed; top: 120px; right: 12px; bottom: 12px; left: auto;
      width: min(420px, calc(100vw - 106px)); height: auto;
      border-radius: 16px; z-index: 1100;
      transform: translateX(calc(100% + 24px)); transition: transform 0.3s ease-in-out;
      flex-direction: column; overflow: hidden;
      background: var(--bg-primary); box-shadow: var(--shadow-sheet); visibility: hidden;
      color: var(--text-primary);
    }
    #attr-table-sheet.attr-table-sheet-open { transform: translateX(0); visibility: visible; }
    body.attr-table-sheet-open:not(.attr-table-sheet-minimized) .leaflet-bottom.leaflet-right { right: calc(min(420px, calc(100vw - 106px)) + 28px); }
    #attr-table-sheet .at-sheet-handle { display: none; }
    #attr-table-sheet .at-sheet-head {
      display: flex; align-items: center; justify-content: space-between;
      padding: 14px 16px 10px; border-bottom: 1px solid var(--border-color); flex-shrink: 0;
    }
    #attr-table-sheet .at-sheet-title {
      display: flex; align-items: center; gap: 6px;
      color: var(--text-primary); font-size: 13px; font-weight: 700; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    #attr-table-sheet .at-sheet-actions { display: flex; align-items: center; gap: 6px; }
    #attr-table-sheet .at-sheet-minimize, #attr-table-sheet .at-sheet-close {
      display: grid; width: 28px; height: 28px; place-items: center;
      border: 0; border-radius: 50%; background: var(--bg-tertiary); color: var(--text-tertiary);
      cursor: pointer; font-size: 16px; transition: background .15s;
    }
    #attr-table-sheet .at-sheet-minimize:hover, #attr-table-sheet .at-sheet-close:hover { background: var(--border-color); }
    #attr-table-sheet .at-sheet-back {
      display: grid; width: 28px; height: 28px; place-items: center;
      border: 0; border-radius: 50%; background: var(--bg-tertiary); color: var(--text-tertiary);
      cursor: pointer; font-size: 18px; line-height: 1; transition: background .15s;
    }
    #attr-table-sheet .at-sheet-back:hover { background: var(--border-color); }

    /* ── Attribute Table Picker ── */
    .at-picker-search {
      width: 100%; padding: 8px 12px; border: 1px solid var(--border-color); border-radius: 8px;
      font-size: 12px; background: var(--bg-secondary); color: var(--text-primary);
      box-sizing: border-box; outline: none; transition: border-color .15s;
    }
    .at-picker-search:focus { border-color: #2563eb; }
    /* Subjudul nama layer di dalam sheet atribut. Judul sheet sekarang seragam
       "Tabel" untuk semua layer, jadi nama layer dipindah ke sini -- kalau
       tidak, pengguna tidak tahu sedang melihat tabel layer yang mana. */
    .at-layer-subtitle {
      padding: 0 12px 7px;
      font-size: 10.5px;
      font-weight: 600;
      color: var(--text-primary);
      opacity: .82;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .at-layer-subtitle:empty { display: none; }
    .at-picker-toolbar { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }
    .at-picker-filters { display: flex; gap: 6px; flex-wrap: wrap; }
    .at-picker-select {
      flex: 1 1 0; min-width: 0; padding: 6px 8px; border: 1px solid var(--border-color); border-radius: 8px;
      font-size: 11px; background: var(--bg-secondary); color: var(--text-primary);
      outline: none; cursor: pointer; transition: border-color .15s;
    }
    .at-picker-select:focus { border-color: #2563eb; }
    .at-picker-list { list-style: none; margin: 0; padding: 0; }
    .at-picker-item {
      display: flex; align-items: center; justify-content: space-between; gap: 8px;
      padding: 9px 10px; border-bottom: 1px solid var(--border-color);
      cursor: pointer; transition: background .12s; font-size: 12px; color: var(--text-primary);
    }
    .at-picker-item:last-child { border-bottom: 0; }
    .at-picker-item:hover { background: rgba(37, 99, 235, .06); }
    .at-picker-item.is-active { background: rgba(37, 99, 235, .12); }
    .at-picker-label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .at-picker-cat {
      font-size: 9px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase;
      color: var(--text-tertiary); margin: 10px 0 4px;
    }
    .at-picker-badge {
      flex: 0 0 auto; padding: 2px 7px; border-radius: 999px;
      font-size: 9px; font-weight: 700; letter-spacing: .3px;
      background: var(--bg-tertiary); color: var(--text-tertiary);
    }
    .at-picker-badge.badge-wms { background: rgba(34, 197, 94, .14); color: #15803d; }
    .at-picker-badge.badge-arcgis { background: rgba(37, 99, 235, .14); color: #1d4ed8; }
    .at-picker-badge.badge-feature { background: rgba(168, 85, 247, .14); color: #7c3aed; }
    .at-picker-badge.badge-cluster { background: rgba(249, 115, 22, .14); color: #c2410c; }
    .at-picker-badge.badge-dss { background: rgba(236, 72, 153, .14); color: #be185d; }
    .at-picker-badge.badge-vektor { background: rgba(6, 182, 212, .14); color: #0e7490; }
    .at-picker-badge.badge-raster { background: rgba(100, 116, 139, .14); color: #475569; }
    .at-picker-empty { text-align: center; padding: 24px 16px; color: var(--text-tertiary); font-size: 12px; }
    #attr-table-sheet .at-sheet-body {
      flex: 1 1 auto; min-height: 0; overflow: auto;
      padding: 12px 16px 16px; -webkit-overflow-scrolling: touch;
      scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) transparent;
    }
    /* Tabel tanah memakai ruang sheet yang tersedia; area tabel menjadi
       scroller sendiri sehingga kontrol dan judul kolom tetap mudah dicapai. */
    #attr-table-sheet.at-soil-table-mode .at-sheet-body { display: flex; flex-direction: column; overflow: hidden; }
    #attr-table-sheet.at-soil-table-mode #at-sheet-content { display: flex; flex: 1 1 auto; flex-direction: column; min-height: 0; }
    #attr-table-sheet.at-soil-table-mode .at-layer-subtitle,
    #attr-table-sheet.at-soil-table-mode .at-controls,
    #attr-table-sheet.at-soil-table-mode .at-pagination { flex: 0 0 auto; }
    #attr-table-sheet.at-soil-table-mode .at-controls { position: static; top: auto; z-index: auto; padding: 4px 0 8px; background: var(--bg-primary); }
    #attr-table-sheet.at-soil-table-mode .at-table-wrap { flex: 1 1 auto; min-height: 0; max-height: none; overflow: auto; }
    #attr-table-sheet.at-soil-table-mode .at-table th { position: sticky; top: 0; z-index: 6; }
    .at-soil-taxonomy { flex: 0 0 auto; margin: 0 0 9px; border: 1px solid var(--border-color); border-radius: 9px; background: var(--bg-secondary); color: var(--text-primary); font-size: 11px; }
    .at-soil-taxonomy summary { padding: 9px 11px; cursor: pointer; font-weight: 700; color: var(--text-primary); }
    .at-soil-taxonomy[open] { max-height: min(34dvh, 300px); overflow: auto; }
    .at-soil-taxonomy-note, .at-soil-taxonomy-source { margin: 0 11px 8px; color: var(--text-secondary); line-height: 1.45; }
    .at-soil-taxonomy-source { font-size: 10px; }
    .at-soil-taxonomy a { color: #2563eb; }
    .at-soil-taxonomy-wrap { overflow: auto; margin: 0 8px 8px; }
    .at-soil-taxonomy table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 10px; }
    .at-soil-taxonomy th, .at-soil-taxonomy td { padding: 6px 7px; border: 1px solid var(--border-color); text-align: left; vertical-align: top; white-space: normal; }
    .at-soil-taxonomy th { background: var(--bg-primary); font-weight: 700; }
    #attr-table-sheet .at-sheet-body::-webkit-scrollbar { width: 5px; }
    #attr-table-sheet .at-sheet-body::-webkit-scrollbar-track { background: transparent; }
    #attr-table-sheet .at-sheet-body::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 3px; }
    /* Angka 68px: lihat catatan "Pita bawah tengah" di blok
       .zoom-control-wrap. */
    #attr-table-sheet.attr-table-sheet-minimized {
      top: auto; right: auto; bottom: 68px; left: 50%;
      width: min(220px, calc(100vw - 48px)); height: 36px;
      border-radius: 18px; transform: translateX(-50%); visibility: visible;
      z-index: 100;
    }
    #attr-table-sheet.attr-table-sheet-minimized .at-sheet-handle,
    #attr-table-sheet.attr-table-sheet-minimized .at-sheet-body { display: none; }
      #attr-table-sheet.attr-table-sheet-minimized .at-sheet-head {
        min-height: 36px; box-sizing: border-box;
        /* 4px, bukan 6px: tombol 28px harus muat di chip 36px. */
        padding: 4px 14px; border-bottom: 0;
      }
    #attr-table-sheet.attr-table-sheet-minimized .at-sheet-title { cursor: pointer; font-size: 11px; }

    /* ── Attr Table Inner Styles ── */
    .at-controls { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
    .at-controls-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
    .at-export-btn { flex: 0 0 auto; padding: 5px 9px; border: 1px solid var(--border-color); border-radius: 7px; background: var(--bg-secondary); color: var(--text-primary); font-size: 10px; font-weight: 700; cursor: pointer; }
    .at-export-btn:hover { border-color: #2563eb; color: #2563eb; }
    .at-search {
      width: 100%; padding: 8px 12px; border: 1px solid var(--border-color); border-radius: 8px;
      font-size: 12px; background: var(--bg-secondary); color: var(--text-primary);
      box-sizing: border-box; outline: none; transition: border-color .15s;
    }
    .at-search:focus { border-color: #2563eb; }
    .at-info { font-size: 11px; color: var(--text-tertiary); }
    .at-table-wrap {
      max-height: min(56dvh, 620px);
      overflow: auto;
      margin: 0 -4px;
      overscroll-behavior: contain;
      -webkit-overflow-scrolling: touch;
    }
    .at-table {
      width: 100%; border-collapse: collapse; font-size: 11px; white-space: nowrap;
    }
    .at-table th {
      position: sticky; top: 0; background: var(--bg-secondary);
      padding: 7px 8px; text-align: left; font-weight: 600; font-size: 10px;
      color: var(--text-tertiary); text-transform: uppercase; letter-spacing: .3px;
      border-bottom: 2px solid var(--border-color); z-index: 4;
    }
    .at-table th.at-sortable { cursor: pointer; user-select: none; }
    .at-table th.at-sortable:hover, .at-table th.at-sortable:focus-visible { color: #2563eb; outline: none; }
    .at-table td {
      padding: 6px 8px; border-bottom: 1px solid var(--border-color);
      max-width: 180px; overflow: hidden; text-overflow: ellipsis; color: var(--text-primary);
    }
    .at-table .at-th-no, .at-table .at-td-no { width: 36px; text-align: center; }
    .at-row { cursor: pointer; transition: background .12s; }
    .at-row:hover { background: rgba(37, 99, 235, .06); }
    .at-row-active { background: rgba(37, 99, 235, .12) !important; }
    .at-empty, .at-loading, .at-wms-hint {
      text-align: center; padding: 24px 16px; color: var(--text-tertiary); font-size: 12px;
    }
    .at-info-bar {
      padding: 6px 12px; margin: 0 0 6px; font-size: 11px; color: #92400e;
      background: #fef3c7; border: 1px solid #fcd34d; border-radius: 6px;
      text-align: center;
    }
    .at-wms-hint { display: flex; flex-direction: column; align-items: center; gap: 8px; }
    .at-wms-hint svg { color: #2563eb; }
    .at-pagination {
      display: flex; align-items: center; justify-content: center; gap: 12px;
      padding: 10px 0 4px; border-top: 1px solid var(--border-color); margin-top: 8px;
    }
    .at-page-btn {
      padding: 4px 12px; border: 1px solid var(--border-color); border-radius: 6px;
      background: var(--bg-secondary); color: var(--text-primary); font-size: 11px;
      cursor: pointer; transition: background .12s;
    }
    .at-page-btn:hover:not(:disabled) { background: rgba(37, 99, 235, .08); }
    .at-page-btn:disabled { opacity: .4; cursor: default; }
    .at-page-info { font-size: 11px; color: var(--text-tertiary); }

    @keyframes at-pulse {
      0% { opacity: 1; }
      50% { opacity: .3; }
      100% { opacity: 1; }
    }
    .at-highlight-pulse { animation: at-pulse 1s ease-in-out 3; }

    @media (max-width: 768px) {
      #geopangan-sheet {
        top: auto;
        display: flex;
        position: fixed;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 1100;
        width: 100%;
        height: var(--sheet-h, 50vh);
        height: var(--sheet-h, 50dvh);
        flex-direction: column;
        overflow: hidden;
        visibility: hidden;
        border-radius: 18px 18px 0 0;
        background: #fff;
        box-shadow: 0 -6px 24px rgba(15, 23, 42, .18);
        transform: translateY(100%);
        transition: transform .3s ease-in-out, visibility .3s;
      }
      #geopangan-sheet.sheet-open { transform: translateY(0); visibility: visible; }
      #geopangan-sheet .gp-sheet-handle {
        display: flex;
        width: 36px;
        height: 4px;
        margin: 8px auto 6px;
        flex-shrink: 0;
        border-radius: 999px;
        background: #cbd5e1;
      }
      #geopangan-sheet .gp-sheet-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 16px 10px;
        border-bottom: 1px solid #e8eef3;
      }
      #geopangan-sheet .gp-sheet-title,
      #geopangan-sheet .gp-sheet-actions {
        display: flex;
        align-items: center;
      }
      #geopangan-sheet .gp-sheet-title { gap: 6px; color: #1e293b; font-size: 13px; font-weight: 700; }
      #geopangan-sheet .gp-sheet-actions { gap: 6px; }
      #geopangan-sheet .gp-sheet-minimize,
      #geopangan-sheet .gp-sheet-close {
        display: grid;
        width: 28px;
        height: 28px;
        place-items: center;
        border: 0;
        border-radius: 50%;
        background: #f1f5f9;
        color: #64748b;
        cursor: pointer;
      }
      #geopangan-sheet .gp-sheet-close { font-size: 16px; }
      #geopangan-sheet .gp-sheet-body {
        flex: 1 1 auto;
        min-height: 0;
        overflow: auto;
        padding: 12px 12px 16px;
        -webkit-overflow-scrolling: touch;
      }
      #geopangan-sheet.sheet-minimized {
        top: 100px;
        right: auto;
        bottom: auto;
        left: 50%;
        width: min(260px, calc(100vw - 48px));
        height: 36px;
        visibility: visible;
        border: 1px solid rgba(255, 255, 255, .72);
        border-radius: 14px;
        background: rgba(255, 255, 255, .92);
        box-shadow: 0 4px 14px rgba(15, 23, 42, .12);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        transform: translateX(-50%);
        z-index: 100;
      }
      #geopangan-sheet.sheet-minimized .gp-sheet-handle,
      #geopangan-sheet.sheet-minimized .gp-sheet-body { display: none; }
        #geopangan-sheet.sheet-minimized .gp-sheet-head {
          min-height: 36px;
          box-sizing: border-box;
          /* 4px, bukan 10px: tombol tutup 28px harus muat di chip 36px.
             Dengan 10px isinya jadi 48px dan tombolnya terpotong. */
          padding: 4px 12px;
          border-bottom: 0;
        }


      /* ── Sembunyikan Zoom Control di Mobile ── */
      .zoom-control-wrap { display: none !important; }

      /* Gestur sheet: geser tinggi ala Google Maps. Didukung
         assets/js/sheet-drag.js. Kelas .sheet-draggable dipasang modul
         itu hanya pada sheet yang sedang terbuka, jadi aturan ini tidak
         mengganggu sheet yang belum dipakai. */
      .sheet-draggable {
        transition: transform .3s ease-in-out, visibility .3s,
                    height .22s cubic-bezier(.2, 0, 0, 1);
      }

/* ── TransJakarta (mobile: bottom sheet) ── */
      .tj-routing-panel {
        position: fixed;
        z-index: 1101;
        right: 0;
        bottom: max(16px, env(safe-area-inset-bottom));
        left: 0;
        width: min(760px, calc(100vw - 24px));
        height: 50vh;
        height: 50dvh;
        max-height: 50dvh;
        box-sizing: border-box;
        overflow-y: auto;
        margin: 0 auto;
        padding: 18px;
        border: 1px solid rgba(203, 213, 225, .9);
        border-radius: 16px;
        background: rgba(255, 255, 255, .97);
        box-shadow: 0 8px 28px rgba(15, 23, 42, .2);
        color: #0f172a;
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
      }
      .tj-routing-panel[hidden] { display: none; }
      .tj-routing-head { position: sticky; top: -18px; z-index: 5; display: flex; justify-content: space-between; align-items: flex-start; margin: -18px -18px 10px; padding: 14px 18px 10px; border-bottom: 1px solid rgba(203, 213, 225, .72); border-radius: 16px 16px 0 0; background: rgba(255, 255, 255, .98); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
      .tj-routing-eyebrow { color: #0e7490; font-size: 9px; font-weight: 800; letter-spacing: .1em; }
      .tj-routing-head h3 { margin: 2px 0 0; color: #0f172a; font-size: 16px; line-height: 1.2; }
      .tj-routing-close { width: 28px; height: 28px; border: 0; border-radius: 50%; background: #f1f5f9; color: #64748b; font-size: 20px; line-height: 1; cursor: pointer; }
      .tj-routing-minimize { display: grid; flex: 0 0 28px; width: 28px; height: 28px; margin-left: auto; place-items: center; border: 0; border-radius: 50%; background: #f1f5f9; color: #475569; cursor: pointer; }
      .tj-routing-panel.is-minimized { height: auto; max-height: none; overflow: hidden; padding: 12px 16px; }
      .tj-routing-panel.is-minimized .tj-routing-fields,
      .tj-routing-panel.is-minimized .tj-routing-note,
      .tj-routing-panel.is-minimized .tj-routing-result,
      .tj-routing-panel.is-minimized .tj-routing-actions { display: none; }
      .tj-routing-corridor { display: flex; align-items: center; gap: 9px; padding: 9px 10px; border: 1px solid #bae6fd; border-radius: 11px; background: #f0f9ff; }
      .tj-routing-corridor b, .tj-routing-corridor small { display: block; }
      .tj-routing-corridor b { color: #0f172a; font-size: 12px; }
      .tj-routing-corridor small { margin-top: 2px; color: #475569; font-size: 10px; }
      .tj-routing-dot { width: 10px; height: 10px; flex: 0 0 auto; border: 3px solid #0891b2; border-radius: 50%; background: white; }
      .tj-routing-fields { position: relative; display: grid; gap: 7px; margin: 10px 0; }
      .tj-routing-fields label { position: relative; display: block; padding-left: 22px; }
      .tj-routing-fields input { box-sizing: border-box; width: 100%; height: 38px; padding: 0 10px; border: 1px solid #cbd5e1; border-radius: 9px; outline: none; background: #fff; color: #0f172a; font: inherit; font-size: 12px; }
      .tj-routing-fields input:focus { border-color: #06b6d4; box-shadow: 0 0 0 3px rgba(6, 182, 212, .12); }
      .tj-stop-suggestions { position: absolute; top: calc(100% + 4px); right: 0; left: 22px; z-index: 20; max-height: 190px; overflow-y: auto; overscroll-behavior: contain; padding: 4px; border: 1px solid #cbd5e1; border-radius: 10px; background: #fff; box-shadow: 0 8px 22px rgba(15, 23, 42, .16); }
      .tj-stop-suggestions[hidden] { display: none; }
      .tj-stop-suggestion { display: block; width: 100%; min-height: 40px; padding: 9px 10px; border: 0; border-radius: 7px; background: transparent; color: #0f172a; font: inherit; font-size: 12px; text-align: left; cursor: pointer; touch-action: manipulation; }
      .tj-stop-suggestion:hover, .tj-stop-suggestion:focus-visible { outline: none; background: #ecfeff; color: #0e7490; }
      .tj-stop-no-suggestion { display: block; padding: 10px; color: #64748b; font-size: 11px; }
      .tj-routing-origin-dot, .tj-routing-dest-dot { position: absolute; top: 12px; left: 5px; width: 10px; height: 10px; border: 2px solid #0891b2; border-radius: 50%; background: white; }
      .tj-routing-dest-dot { border-color: #f97316; border-radius: 2px; }
      .tj-routing-connector { position: absolute; top: 27px; bottom: 27px; left: 10px; border-left: 1px dashed #94a3b8; }
      .tj-routing-note { display: grid; gap: 3px; padding: 8px 10px; border-radius: 9px; background: #f8fafc; }
      .tj-routing-note b { font-size: 10px; color: #334155; }
      .tj-routing-note span { font-size: 10px; line-height: 1.4; color: #475569; }
      .tj-routing-note small { margin-top: 2px; font-size: 9px; line-height: 1.35; color: #64748b; }
      .tj-routing-result { margin-top: 8px; padding: 8px 10px; border-left: 3px solid #06b6d4; border-radius: 6px; background: #ecfeff; color: #164e63; font-size: 10px; line-height: 1.4; }
      .tj-route-road-summary { display: grid; gap: 2px; }
      .tj-route-road-summary b { font-size: 11px; }
      .tj-route-road-summary span { color: #475569; font-size: 9px; }
      .tj-route-compare { margin-top: 10px; padding-top: 9px; border-top: 1px solid #cbd5e1; }
      .tj-route-compare > b { font-size: 11px; color: #0f172a; }
      .tj-route-compare > p { margin: 3px 0 7px; color: #64748b; font-size: 9px; line-height: 1.35; }
      .tj-route-compare-table { max-height: 180px; overflow: auto; }
      .tj-route-compare table { width: 100%; border-collapse: collapse; font-size: 10px; }
      .tj-route-compare th, .tj-route-compare td { padding: 6px 7px; border-bottom: 1px solid #e2e8f0; text-align: left; }
      .tj-route-compare th { position: sticky; top: 0; background: #f8fafc; color: #64748b; font-size: 9px; }
      .tj-route-compare td:last-child, .tj-route-compare th:last-child { text-align: right; white-space: nowrap; }
      .tj-route-compare tr.is-selected td { background: #cffafe; color: #0e7490; font-weight: 750; }
      .tj-route-compare td small { color: #0e7490; font-size: 8px; }
      .tj-route-compare > p:only-child { padding: 7px; border-radius: 7px; background: #fff7ed; }
      .tj-routing-actions { display: flex; gap: 8px; margin-top: 9px; }
      .tj-routing-actions button { min-height: 36px; border: 0; border-radius: 9px; cursor: pointer; font: inherit; font-size: 11px; font-weight: 750; }
      .tj-routing-actions [data-tj-routing-swap] { width: 40px; background: #f1f5f9; color: #475569; font-size: 18px; }
      .tj-routing-actions .tj-routing-submit { flex: 1; padding: 0 12px; background: #0891b2; color: white; }
      :is(#transjakarta-sheet, #transjogja-sheet).tj-routing-mode { transform: translateY(100%); visibility: hidden; pointer-events: none; }
      :is(#transjakarta-sheet, #transjogja-sheet).sheet-open.tj-routing-mode { transform: translateY(100%); visibility: hidden; pointer-events: none; }
      [data-theme="dark"] .tj-routing-panel { border-color: #334155; background: rgba(15, 23, 42, .97); color: #e2e8f0; }
      [data-theme="dark"] .tj-routing-head { border-bottom-color: rgba(71, 85, 105, .8); background: rgba(15, 23, 42, .98); }
      [data-theme="dark"] .tj-routing-head h3, [data-theme="dark"] .tj-routing-corridor b { color: #f1f5f9; }
      [data-theme="dark"] .tj-routing-minimize, [data-theme="dark"] .tj-routing-close { background: #1e293b; color: #cbd5e1; }
      [data-theme="dark"] .tj-routing-corridor { border-color: #164e63; background: #102b3a; }
      [data-theme="dark"] .tj-routing-corridor small, [data-theme="dark"] .tj-routing-note span { color: #cbd5e1; }
      [data-theme="dark"] .tj-routing-fields input { border-color: #475569; background: #1e293b; color: #f1f5f9; }
      [data-theme="dark"] .tj-stop-suggestions { border-color: #475569; background: #0f172a; }
      [data-theme="dark"] .tj-stop-suggestion { color: #e2e8f0; }
      [data-theme="dark"] .tj-stop-suggestion:hover, [data-theme="dark"] .tj-stop-suggestion:focus-visible { background: #164e63; color: #cffafe; }
      [data-theme="dark"] .tj-stop-no-suggestion { color: #94a3b8; }
      [data-theme="dark"] .tj-routing-note { background: #1e293b; }
      [data-theme="dark"] .tj-routing-note b { color: #e2e8f0; }
      [data-theme="dark"] .tj-routing-result { border-left-color: #22d3ee; background: #083344; color: #cffafe; }
      [data-theme="dark"] .tj-route-road-summary span { color: #cbd5e1; }
      [data-theme="dark"] .tj-route-compare { border-top-color: #475569; }
      [data-theme="dark"] .tj-route-compare > b { color: #f1f5f9; }
      [data-theme="dark"] .tj-route-compare th { background: #1e293b; color: #cbd5e1; }
      [data-theme="dark"] .tj-route-compare th, [data-theme="dark"] .tj-route-compare td { border-bottom-color: #334155; }
      [data-theme="dark"] .tj-route-compare tr.is-selected td { background: #164e63; color: #cffafe; }
      [data-theme="dark"] .tj-route-compare td small { color: #67e8f9; }
      :is(#transjakarta-sheet, #transjogja-sheet) {
        top: auto;
        display: flex;
        position: fixed;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 1100;
        width: 100%;
        height: var(--sheet-h, 50vh);
        height: var(--sheet-h, 50dvh);
        flex-direction: column;
        overflow: hidden;
        visibility: hidden;
        border-radius: 18px 18px 0 0;
        background: #fff;
        box-shadow: 0 -6px 24px rgba(15, 23, 42, .18);
        transform: translateY(100%);
        transition: transform .3s ease-in-out, visibility .3s;
      }
      :is(#transjakarta-sheet, #transjogja-sheet).sheet-open { transform: translateY(0); visibility: visible; }
      :is(#transjakarta-sheet, #transjogja-sheet) .tj-sheet-handle {
        display: flex;
        width: 36px;
        height: 4px;
        margin: 8px auto 6px;
        flex-shrink: 0;
        border-radius: 999px;
        background: #cbd5e1;
      }
      :is(#transjakarta-sheet, #transjogja-sheet) .tj-sheet-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 16px 10px;
        border-bottom: 1px solid #e8eef3;
      }
      :is(#transjakarta-sheet, #transjogja-sheet) .tj-sheet-title,
      :is(#transjakarta-sheet, #transjogja-sheet) .tj-sheet-actions {
        display: flex;
        align-items: center;
      }
      :is(#transjakarta-sheet, #transjogja-sheet) .tj-sheet-title { gap: 6px; color: #1e293b; font-size: 13px; font-weight: 700; }
      :is(#transjakarta-sheet, #transjogja-sheet) .tj-sheet-actions { gap: 6px; }
      :is(#transjakarta-sheet, #transjogja-sheet) .tj-sheet-minimize,
      :is(#transjakarta-sheet, #transjogja-sheet) .tj-sheet-close {
        display: grid;
        width: 28px;
        height: 28px;
        place-items: center;
        border: 0;
        border-radius: 50%;
        background: #f1f5f9;
        color: #64748b;
        cursor: pointer;
      }
      :is(#transjakarta-sheet, #transjogja-sheet) .tj-sheet-close { font-size: 16px; }
      :is(#transjakarta-sheet, #transjogja-sheet) .tj-sheet-minimize:hover,
      :is(#transjakarta-sheet, #transjogja-sheet) .tj-sheet-close:hover { background: #e2e8f0; color: #334155; }
      :is(#transjakarta-sheet, #transjogja-sheet) .tj-sheet-minimize:focus-visible,
      :is(#transjakarta-sheet, #transjogja-sheet) .tj-sheet-close:focus-visible { outline: 2px solid #0891b2; outline-offset: 2px; }
      :is(#transjakarta-sheet, #transjogja-sheet) .tj-sheet-body {
        flex: 1 1 auto;
        min-height: 0;
        overflow: auto;
        padding: 0 12px 16px;
        -webkit-overflow-scrolling: touch;
      }
      :is(#transjakarta-sheet, #transjogja-sheet).sheet-minimized {
        top: 100px;
        right: auto;
        bottom: auto;
        left: 50%;
        width: min(250px, calc(100vw - 48px));
        height: 36px;
        visibility: visible;
        border: 1px solid rgba(255, 255, 255, .72);
        border-radius: 14px;
        background: rgba(255, 255, 255, .92);
        box-shadow: 0 4px 14px rgba(15, 23, 42, .12);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        transform: translateX(-50%);
        z-index: 100;
      }
      :is(#transjakarta-sheet, #transjogja-sheet).sheet-minimized .tj-sheet-handle,
      :is(#transjakarta-sheet, #transjogja-sheet).sheet-minimized .tj-sheet-body { display: none; }
      :is(#transjakarta-sheet, #transjogja-sheet).sheet-minimized .tj-sheet-head {
        min-height: 36px;
        box-sizing: border-box;
        padding: 4px 12px;
        border-bottom: 0;
      }
      :is(#transjakarta-sheet, #transjogja-sheet) .tj-switch { background: #f8fafc; border-color: #e2e8f0; }
      :is(#transjakarta-sheet, #transjogja-sheet) .tj-switch.is-on { background: #ecfeff; border-color: #22d3ee; }
      :is(#transjakarta-sheet, #transjogja-sheet) .tj-switch-dot { background: #e2e8f0; box-shadow: inset 0 0 0 1px #cbd5e1; }
      :is(#transjakarta-sheet, #transjogja-sheet) .tj-switch.is-on .tj-switch-dot { background: #22d3ee; }
      :is(#transjakarta-sheet, #transjogja-sheet) button.tj-stat-item { background: #f8fafc; border-color: #e2e8f0; }
      :is(#transjakarta-sheet, #transjogja-sheet) button.tj-stat-item.is-on { background: #ecfeff; border-color: #22d3ee; }
      :is(#transjakarta-sheet, #transjogja-sheet) button.tj-stat-item.is-on b { color: #0e7490; }
      :is(#transjakarta-sheet, #transjogja-sheet) .tj-stat-item { background: #f8fafc; border-color: #e2e8f0; }
      :is(#transjakarta-sheet, #transjogja-sheet) .tj-stat-item b { color: #1e293b; }
      :is(#transjakarta-sheet, #transjogja-sheet) .tj-table thead th { background: #fff; border-bottom-color: #e8eef3; color: #94a3b8; }
      :is(#transjakarta-sheet, #transjogja-sheet) .tj-td-nama b { color: #1e293b; }
      :is(#transjakarta-sheet, #transjogja-sheet) .tj-sumber { border-top-color: #e8eef3; color: #94a3b8; }
      :is(#transjakarta-sheet, #transjogja-sheet) .tj-row td { border-bottom-color: #f1f5f9; }
      /* Selama jari bergerak transisi harus mati. Kalau tidak, height
         mengejar nilai baru di setiap frame dan sheet terasa lengket. */
      .sheet-draggable.is-dragging,
      .sheet-draggable.is-dragging * { transition: none !important; }
      /* touch-action: none itu WAJIB, bukan kosmetik. Tanpa itu browser
         memakai gestur builtin-nya untuk menggulir halaman, pointermove
         dihentikan browser, dan sheet-nya tidak bergerak sama sekali. */
      .sheet-drag-zone {
        touch-action: none;
        -webkit-user-select: none;
        user-select: none;
        cursor: grab;
      }
      .sheet-drag-zone:active { cursor: grabbing; }
      .sheet-drag-zone:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
      /* Handle seragam untuk sheet yang sebelumnya tidak punya handle
         sendiri (Gambar & Ukur, Legenda, GeoFarm). Lima sheet lain
         sudah punya visual sendiri dan tidak ikut aturan ini. */
      .sheet-drag-handle {
        flex: 0 0 auto;
        padding: 8px 0 5px;
        display: flex;
        justify-content: center;
      }
      .sheet-drag-handle::after {
        content: '';
        width: 36px;
        height: 4px;
        border-radius: 2px;
        background: #c4d5e3;
      }

      /* ── GeoTools Bottom Sheet (Mobile) ── */
      #geotools-sheet {
        top: auto; right: 0; bottom: 0; left: 0;
        width: 100%; height: var(--sheet-h, 50vh); height: var(--sheet-h, 50dvh);
        border-radius: 18px 18px 0 0;
        transform: translateY(100%);
      }
      #geotools-sheet.gs-sheet-open { transform: translateY(0); visibility: visible; }
      #geotools-sheet .gs-sheet-handle {
        display: flex; width: 36px; height: 4px;
        margin: 8px auto 6px; flex-shrink: 0;
        border-radius: 999px; background: #d1d5db;
      }
      #geotools-sheet .gs-sheet-head {
        padding: 4px 16px 10px;
      }
      #geotools-sheet .gs-sheet-body {
        padding: 8px 12px 20px;
      }
      #geotools-sheet.gs-sheet-minimized {
        top: auto; right: auto;         bottom: calc(98px + env(safe-area-inset-bottom, 0px)); left: 50%;
        width: min(260px, calc(100vw - 48px));
        height: 36px;
        border-radius: 14px;
        transform: translateX(-50%);
        border: 1px solid rgba(255, 255, 255, .72);
        background: rgba(255, 255, 255, .92);
        box-shadow: 0 4px 14px rgba(15, 23, 42, .12);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        z-index: 100;
      }
      #geotools-sheet.gs-sheet-minimized .gs-sheet-head { min-height: 36px; padding: 4px 12px; }

        /* ── GeoData Sheet (Mobile) ──
         * Bottom sheet 50vh, sama seperti sheet GeoTools dan sheet tabel.
         * Di mobile handle berupa drag pill, bukan display:none seperti di
         * desktop. */
        #geodata-sheet {
          top: auto; right: 0; bottom: 0; left: 0;
          width: 100%; height: var(--sheet-h, 50vh); height: var(--sheet-h, 50dvh);
          border-radius: 18px 18px 0 0;
          transform: translateY(100%);
        }
        #geodata-sheet.geodata-sheet-open { transform: translateY(0); visibility: visible; }
        #geodata-sheet .geodata-sheet-handle {
          display: flex; width: 36px; height: 4px;
          margin: 8px auto 6px; flex-shrink: 0;
          border-radius: 999px; background: #d1d5db;
        }
        #geodata-sheet .geodata-sheet-head { padding: 4px 16px 10px; }
        #geodata-sheet .geodata-sheet-body {
          padding: 8px 12px 20px;
          overscroll-behavior-y: contain;
          touch-action: pan-y;
        }
        #geodata-sheet.geodata-sheet-minimized {
          top: auto; right: auto;         bottom: calc(98px + env(safe-area-inset-bottom, 0px)); left: 50%;
          width: min(260px, calc(100vw - 48px));
          height: 36px;
          border-radius: 14px;
          transform: translateX(-50%);
          border: 1px solid rgba(255, 255, 255, .72);
          background: rgba(255, 255, 255, .92);
          box-shadow: 0 4px 14px rgba(15, 23, 42, .12);
          backdrop-filter: blur(12px);
          -webkit-backdrop-filter: blur(12px);
          z-index: 100;
        }
        #geodata-sheet.geodata-sheet-minimized .geodata-sheet-handle,
        #geodata-sheet.geodata-sheet-minimized .geodata-sheet-body { display: none; }
        #geodata-sheet.geodata-sheet-minimized .geodata-sheet-head {
          min-height: 36px; box-sizing: border-box; padding: 4px 12px; border-bottom: 0;
        }

        /* ── Draw & Measure Sidebar (Mobile) ── */

      .dm-sidebar {
        top: auto; right: 0; bottom: 0; left: 0;
        width: 100%; height: var(--sheet-h, 50vh); height: var(--sheet-h, 50dvh);
        border-radius: 18px 18px 0 0;
        transform: translateY(100%);
      }
      .dm-sidebar.dm-sidebar-open { transform: translateY(0); visibility: visible; }
      /* Samakan jarak handle resize dan judul dengan template bottom sheet
         GeoTools/GeoData: handle 8px + pill 4px + ruang 6px, lalu header 4px. */
      .dm-sidebar > .sheet-drag-handle,
      .lg-sidebar > .sheet-drag-handle,
      .al-sidebar > .sheet-drag-handle { padding: 8px 0 6px; }
      .dm-sidebar .dm-sidebar-head,
      .lg-sidebar .lg-sidebar-head,
      .al-sidebar .al-sidebar-head { padding: 4px 16px 10px; }
      .dm-sidebar.dm-sidebar-minimized {
        top: auto; right: auto;         bottom: calc(98px + env(safe-area-inset-bottom, 0px)); left: 50%;
        width: min(260px, calc(100vw - 48px)); height: 36px;
        border-radius: 14px; transform: translateX(-50%);
        border: 1px solid rgba(255, 255, 255, .72);
        background: rgba(255, 255, 255, .92);
        box-shadow: 0 4px 14px rgba(15, 23, 42, .12);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        z-index: 100;
      }

      /* ── Legend Sidebar (Mobile) ── */
      .lg-sidebar, .pa-panel, .al-sidebar {
        top: auto; right: 0; bottom: 0; left: 0;
        width: 100%; height: var(--sheet-h, 50vh); height: var(--sheet-h, 50dvh);
        border-radius: 18px 18px 0 0;
        transform: translateY(100%);
      }
      .lg-sidebar.lg-sidebar-open, .pa-panel.pa-open, .al-sidebar.al-sidebar-open { transform: translateY(0); visibility: visible; }
      .lg-sidebar.lg-sidebar-minimized,
      .al-sidebar.al-sidebar-minimized {
        top: auto; right: auto;         bottom: calc(98px + env(safe-area-inset-bottom, 0px)); left: 50%;
        width: min(260px, calc(100vw - 48px)); height: 36px;
        border-radius: 14px; transform: translateX(-50%);
        border: 1px solid rgba(255, 255, 255, .72);
        background: rgba(255, 255, 255, .92);
        box-shadow: 0 4px 14px rgba(15, 23, 42, .12);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        z-index: 100;
      }
      .lg-sidebar.lg-sidebar-minimized .lg-sidebar-body,
      .al-sidebar.al-sidebar-minimized .al-sidebar-body { display: none; }
      .lg-sidebar.lg-sidebar-minimized .lg-sidebar-head,
      .al-sidebar.al-sidebar-minimized .al-sidebar-head {
        min-height: 36px; padding: 4px 12px; border-bottom: 0;
      }
      .pa-panel.pa-min {
        top: auto; right: auto;         bottom: calc(98px + env(safe-area-inset-bottom, 0px)); left: 50%;
        width: min(260px, calc(100vw - 48px)); height: 36px;
        border-radius: 14px; transform: translateX(-50%);
        border: 1px solid rgba(255, 255, 255, .72);
        background: rgba(255, 255, 255, .92);
        box-shadow: 0 4px 14px rgba(15, 23, 42, .12);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        visibility: visible;
        z-index: 100;
      }


      /* ── Hide minimize buttons that don't apply on mobile ── */
      #geopangan-sheet .gp-sheet-minimize { display: none !important; }

      /* ── FAB → Bottom Navigation Bar (Mobile: Floating Glass) ──
         bottom digeser dari 12px ke 30px agar bar FAB tidak menutupi
         label koordinat grid (graticule) di tepi bawah peta (area
         ~10-26px dari bawah). Tumpukan di atas FAB ikut digeser dan
         memakai env(safe-area-inset-bottom) yang sama dengan FAB supaya
         jaraknya konstan di HP notch: chip minimized
         calc(98px + env) = 12px di atas tepi atas FAB, lalu leaflet-left
         & legenda calc(106px + env) = 8px di atas chip. */
      .map-fab-wrap {
        position: fixed !important;
        /* Sisakan ruang untuk iklan anchor yang menempel di bawah layar HP. */
        bottom: calc(48px + env(safe-area-inset-bottom, 0px)) !important;
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%) !important;
        margin: 0 !important;
        z-index: 99999;
        width: auto !important;
        max-width: calc(100vw - 32px);
        background: rgba(255,255,255,0.72) !important;
        backdrop-filter: saturate(180%) blur(20px) !important;
        -webkit-backdrop-filter: saturate(180%) blur(20px) !important;
        border: 1px solid rgba(255,255,255,0.6) !important;
        border-radius: 28px !important;
        box-shadow:
          0 4px 24px rgba(0,0,0,0.08),
          0 1px 3px rgba(0,0,0,0.04),
          inset 0 1px 0 rgba(255,255,255,0.8) !important;
        padding-bottom: env(safe-area-inset-bottom, 0) !important;
        transition: transform 0.35s cubic-bezier(0.32,0.72,0,1), opacity 0.3s ease !important;
      }
      [data-theme="dark"] .map-fab-wrap {
        background: rgba(30,30,30,0.72) !important;
        border-color: rgba(255,255,255,0.12) !important;
        box-shadow:
          0 4px 24px rgba(0,0,0,0.28),
          0 1px 3px rgba(0,0,0,0.12),
          inset 0 1px 0 rgba(255,255,255,0.06) !important;
      }
      .map-fab-btn { display: none !important; }
      .map-fab-items {
        position: static !important;
        flex-direction: row !important;
        justify-content: center;
        align-items: center;
        opacity: 1 !important;
        transform: none !important;
        pointer-events: auto !important;
        gap: 2px;
        padding: 6px 8px !important;
      }
      .map-fab-open .map-fab-items { transform: none !important; }
      .map-fab-item {
        width: auto !important;
        height: auto !important;
        border: none !important;
        border-radius: 16px !important;
        background: transparent !important;
        box-shadow: none !important;
        flex-direction: column;
        gap: 2px;
        padding: 6px 12px !important;
        opacity: 1 !important;
        transform: none !important;
        transition: background 0.2s ease, transform 0.2s ease !important;
        position: relative;
      }
      .map-fab-open .map-fab-item {
        opacity: 1 !important;
        transform: none !important;
        transition-delay: 0s !important;
      }
      .map-fab-item:active {
        transform: scale(0.92) !important;
      }
      .map-fab-item.map-fab-locate { display: none !important; }
      .map-fab-item:hover {
        background: rgba(0,0,0,0.04) !important;
        box-shadow: none !important;
        transform: none !important;
      }
      [data-theme="dark"] .map-fab-item:hover {
        background: rgba(255,255,255,0.08) !important;
      }
      .map-fab-item[title]::after {
        display: none !important;
      }
      .map-fab-item:hover[title]::after { display: none !important; }
      .map-fab-item .draw-fab-btn,
      .map-fab-item .geoportal-print-btn,
      .map-fab-item .leaflet-control-locate,
      .map-fab-item .leaflet-control-locate a,
      .map-fab-item .sat-export-btn {
        width: 30px !important;
        height: 30px !important;
        border-radius: 10px !important;
        font-size: 16px;
        background: transparent !important;
        box-shadow: none !important;
        border: none !important;
      }
      .map-fab-item svg {
        width: 22px !important;
        height: 22px !important;
        stroke-width: 1.8 !important;
      }

      /* Active indicator dot */
      .map-fab-item::before {
        content: '';
        position: absolute;
        bottom: 2px;
        left: 50%;
        transform: translateX(-50%) scaleX(0);
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background: var(--accent, #0a73b8);
        transition: transform 0.25s cubic-bezier(0.32,0.72,0,1);
      }
      .map-fab-item.fab-active::before {
        transform: translateX(-50%) scaleX(1);
      }

      /* ── Legend: push up for floating bottom nav ── */
      /* ── Tinggi & posisi peta di mobile ──
         Tanpa sheet yang mengembang, peta tetap 100% seperti biasa -- tidak
         ada perubahan sama sekali dari keadaan sebelumnya.

         Saat ada sheet yang mengembang (body.sheet-terbuka, dipasang
         sheet-drag.js), tinggi peta = tinggi layar dikurangi tinggi sheet,
         DITAMBAH kedalaman chrome atas (--map-chrome).

         Penambahan itu yang membuat polygon duduk di tengah PITA bebas --
         antara unified search dan tepi atas sheet -- bukan di tengah kotak
         peta. Sisa --map-chrome px di bawah kotak peta memang tertutup
         sheet, dan itu memang bipartisan: sheet-nya opaque, dan digeser
         ke bawah hanya untuk membuat titik tengah peta jatuh di pita bebas.

         Tinggi sheet masuk lewat --map-h, bukan --sheet-h: @property
         --sheet-h declares inherits: false, jadi #map sebagai saudara sheet
         tidak akan pernah membaca nilainya. sheet-drag.js mencerminkannya
         ke elemen peta setiap kali sheet berhenti bergerak. --map-chrome
         juga diukur dari DOM, jadi perubahan tinggi kotak search atau
         jumlah tombol quick layer ikut adjusting.

         position: relative itu WAJIB, bukan kosmetik. Leaflet.css tidak
         memberi position ke .leaflet-container, dan #map pun tidak
         memilikinya, jadi tanpa ini .leaflet-pane, .leaflet-top, dan
         .leaflet-bottom tetap beranchor ke #app-container (position:
         relative) yang 100dvh, sementara kotaknya sudah dipangkas -- tile
         dan kontrol akan bergeser jauh dari area yang terlihat. */
      #map {
        position: relative;
        height: 100%;
        align-self: center;
        transition: height .3s ease;
      }
      /* During a finger resize, keep the map edge aligned with the sheet
         instead of letting the normal open/close easing trail behind. */
      body.sheet-dragging #map { transition: none; }
      body.sheet-terbuka #map {
        height: calc(100dvh - var(--map-h, 50dvh) + var(--map-chrome, 0px));
        align-self: flex-start;
      }
      /* Kontrol Leaflet di kiri-bawah ikut terangkat sebesar --map-chrome,
         karena tepi bawah kotak peta kini berada sejauh itu di belakang
         sheet. Tanpa ini kontrolnya tertutup sheet. */
      body.sheet-terbuka .leaflet-bottom.leaflet-left {
        bottom: calc(106px + var(--map-chrome, 0px) + env(safe-area-inset-bottom, 0px)) !important;
      }

      .leaflet-bottom.leaflet-left { bottom: calc(106px + env(safe-area-inset-bottom, 0px)) !important; }

      /* ── Bottom nav: hide when sheet/sidebar open ── */
        body.geotools-sheet-open:not(.geotools-sheet-minimized) .map-fab-wrap,
        body.geodata-sheet-open:not(.geodata-sheet-minimized) .map-fab-wrap,

      body.geopangan-sheet-open:not(.geopangan-sheet-minimized) .map-fab-wrap,
      body.hotspot-sheet-open:not(.hotspot-sheet-minimized) .map-fab-wrap,
      body.dm-sidebar-open:not(.dm-sidebar-minimized) .map-fab-wrap,
      body.lg-sidebar-open:not(.lg-sidebar-minimized) .map-fab-wrap,
      body.al-sidebar-open:not(.al-sidebar-minimized) .map-fab-wrap,
      body.pa-panel-open:not(.pa-panel-minimized) .map-fab-wrap,
      body.attr-table-sheet-open:not(.attr-table-sheet-minimized) .map-fab-wrap,
      /* #ai-sheet tidak pernah memasang body class sebelumnya, jadi bar
         input chat-nya berada persis di atas navigasi bawah. */
      body.ai-sheet-open:not(.ai-sheet-minimized) .map-fab-wrap {
        display: none !important;
      }

      /* ── Attribute Table Sheet (Mobile: bottom 50vh) ── */
#attr-table-sheet {
        top: auto; right: 0; bottom: 0; left: 0;
        width: 100%;
        height: var(--sheet-h, 50vh); height: var(--sheet-h, 50dvh);
        border-radius: 16px 16px 0 0;
        transform: translateY(100%);
      }
      /* ── Penjaga tinggi terhadap skrip iklan pihak ketiga ──
         Unit AdSense di dalam sheet ini memakai data-ad-format="auto".
         Begitu slotnya dirender, show_ads_impl.js menulis
         `height: auto !important` ke leluhur fixed terdekat, yaitu sheet
         ini. Karena !important, deklarasi `height` di atas TIDAK pernah
         menang: sheet ikut setinggi isi tabel, dan di ponsel itu berarti
         sheet membuka layar penuh (semua layer, bukan cuma gempa --
         slotnya ikut dirender untuk setiap tabel yang punya iklan).

         Ukuran kotak karena itu dijaga dari dua sisi. min-height dan
         max-height memakai variabel --sheet-h YANG SAMA dengan height, jadi
         tinggi sheet jadi tetap -- tidak bisa dilebihi maupun dikecilkan
         oleh deklarasi height inline pihak ketiga. Nilai tetap mengikuti
         --sheet-h, termasuk saat pengguna menggeser tingginya. */
         #attr-table-sheet {
           min-height: var(--sheet-h, 50vh); min-height: var(--sheet-h, 50dvh);
           max-height: var(--sheet-h, 50vh); max-height: var(--sheet-h, 50dvh);
         }
     }
     /* Beri tabel Jenis Tanah ruang vertikal lebih besar saat pertama dibuka.
       Nilai inline dari sheet-drag.js tetap bisa mengatur tinggi saat digeser. */
     #attr-table-sheet.at-soil-table-mode { --sheet-h: min(76dvh, 760px); }
      #attr-table-sheet.attr-table-sheet-open { transform: translateY(0); }
      #attr-table-sheet .at-sheet-handle {
        display: flex; width: 36px; height: 4px;
        margin: 8px auto 6px; flex-shrink: 0;
        border-radius: 999px; background: #d1d5db; cursor: pointer;
      }
      #attr-table-sheet .at-sheet-head { padding: 4px 16px 10px; }
      #attr-table-sheet .at-sheet-body { padding: 8px 12px 20px; }
      /* Saat sheet diperkecil, gulir isi sheet agar area tabel tidak terjepit
         sampai tingginya nol oleh layout flex. Tabel tetap punya scroller sendiri. */
      #attr-table-sheet.at-soil-table-mode .at-sheet-body { display: block; overflow-y: auto; }
      #attr-table-sheet.at-soil-table-mode #at-sheet-content { display: block; min-height: 0; }
      #attr-table-sheet.at-soil-table-mode .at-table-wrap { min-height: 120px; max-height: min(56dvh, 620px); }
      #attr-table-sheet.attr-table-sheet-minimized {
        top: auto; right: auto;         bottom: calc(98px + env(safe-area-inset-bottom, 0px)); left: 50%;
        width: min(260px, calc(100vw - 48px)); height: 36px;
        border-radius: 14px; transform: translateX(-50%);
        border: 1px solid rgba(255, 255, 255, .72);
        background: rgba(255, 255, 255, .92);
        box-shadow: 0 4px 14px rgba(15, 23, 42, .12);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        z-index: 100;
      }
      #attr-table-sheet.attr-table-sheet-minimized .at-sheet-handle,
      #attr-table-sheet.attr-table-sheet-minimized .at-sheet-body { display: none; }
      #attr-table-sheet.attr-table-sheet-minimized .at-sheet-head {
        min-height: 36px; box-sizing: border-box; padding: 4px 12px; border-bottom: 0;
      }
    }

    /* .cctv-card-header dipakai bersama, dan SETELAH GeoPangan pindah ke
       template .gt-card-head yang tersisa adalah GeoPulse (9 pita).
       Gempa dan Cuaca Maritime memakai subtab GeoPulse itu, bukan panel
       terpisah. Kelas ini BUKAN milik GeoWatch maupun GeoPangan, jadi
       jangan ikut dihapus saat salah satu dari keduanya jadi kartu
       .gt-card-head. */
    .cctv-card-header {
      display: flex; align-items: center; gap: 6px;
      padding: 10px 14px; background: linear-gradient(110deg, #066aa8, #1198c7); border-bottom: 1px solid #066aa8;
      border-radius: 13px 13px 0 0;
      font-size: 12px; font-weight: 700; color: #fff;
    }
    .cctv-card-header svg { color: #fff; flex-shrink: 0; }

    /* CCTV — kartu pencarian, sekarang <details> yang mengikuti template
       kartu GeoTools: <summary class="gt-card-head"> + badan, dan badan
       disembunyikan saat terlipat.

       Dua hal yang TIDAK sama dengan kartu GeoFarm/GeoTani:

       1. overflow: visible, bukan hidden. Daftar .cctv-autocomplete-list
          diposisikan absolute di dalam .cctv-autocomplete dan harus bisa
          keluar dari kotak kartu seperti sebelumnya; overflow: hidden akan
          memotongnya sehingga daftar autocomplete tidak pernah terlihat.
          Karena kartu tidak memotong, sudut atas kepala dibulatkan sendiri
          pada .geowatch-cctv > .gt-card-head di bawah.

       2. z-index: 3 dipertahankan dari .cctv-search-card yang lama, supaya
          daftar autocomplete tetap berada di atas isi kartu lain di sheet.

       .cctv-search-body (grid + gaya isian) sengaja tetap dipakai pada
       pembungkus isian di dalam badan, sehingga tampilan input dan select
       tidak berubah sama sekali. */
    .geowatch-cctv {
      position: relative;
      z-index: 3;
      padding: 0;
      overflow: visible;
      border: 1px solid var(--border-color);
      border-radius: 10px;
      background: var(--bg-card);
    }
    .geowatch-cctv > .gt-card-head { border-radius: 9px 9px 0 0; }
    .geowatch-cctv:not([open]) > .geowatch-cctv-body { display: none; }
    .geowatch-cctv-body { padding: 12px 13px; }
    /* Jarak antara isian, pesan status, dan daftar hasil. */
    .geowatch-cctv-body > .cctv-message { margin-top: 10px; }
    .geowatch-cctv-body > .cctv-results { margin-top: 10px; }
    .cctv-search-body { display: grid; gap: 12px; }

    /* Panel GeoRaster — kartu "Unduh DEMNAS", mengikuti template kartu
     * GeoTools seperti GeoFarm, GeoTani, dan GeoWatch.
     *
     * overflow: hidden aman di sini, BERBEDA dari .geowatch-cctv yang
     * memakai visible. Panel GeoRaster tidak punya satu pun popup
     * ber-posisi absolute, dan satu-satunya elemen absolute di dalamnya
     * (#demnasDownloadBtn.is-loading::after) sudah terpotong oleh
     * .geotools-btn { overflow: hidden } sejak sebelumnya. Yang perlu
     * dipotong di sini adalah tepi pita kepala kartu. */
    .georaster-card {
      padding: 0;
      overflow: hidden;
      border: 1px solid var(--border-color);
      border-radius: 10px;
      background: var(--bg-card);
    }
    .georaster-card:not([open]) > .georaster-card-body { display: none; }
    .georaster-card-body { padding: 12px 13px; }
    /* Terjemahan panjang yang tadinya <p> di dalam wrapper lama. Dipindah
     * ke sini supaya tidak hilang, tapi tidak juga memenuhi kepala kartu. */
    .georaster-card-note {
      margin: 0 0 10px;
      padding-bottom: 8px;
      border-bottom: 1px dashed var(--border-color);
      font-size: 9.5px;
      line-height: 1.5;
      color: var(--text-muted);
    }
    /* Isi form memakai .geotani-form-input yang bordernya lebih tebal dan
     * sudutnya 6px; di dalam kartu yang padding-nya 12px, selisih ke
     * tepi kartu jadi sempit. Menambah tinggi sedikit lebih baik
     * daripada isian yang menempel. */
    .georaster-card-body .geotani-form-input { min-height: 34px; }
    .georaster-card-body .geotools-btn { margin-top: 12px; }

    /* Panel GeoNusa — dua kartu ("Statistik Indonesia" dan "Indikator
     * Penduduk") yang menggantikan nav subtab. Kelas .geoid-subtab-panel
     * SENGAJA tidak dipakai di sini: sidebar.js:184 mencarinya dengan
     * querySelectorAll di seluruh dokumen, jadi begitu pengguna menekan
     * salah satu tombol Alat di panel GeoData, kelas .active akan dilepas
     * dari kartu ini dan ".geoid-subtab-panel { display:none }"
     * menyembunyikannya permanen. Tanpa nav, kartu tidak bisa dibuka lagi.
     *
     * overflow: hidden aman: population-chart.js hanya menghasilkan satu
     * elemen ber-posisi absolute — ikon pembesar 12x12 px yang terpusat
     * di dalam wrapper position:relative-nya sendiri, dengan
     * pointer-events:none. <select> penanda indikator adalah select
     * bawaan browser, digambar di lapisan teratas sehingga tidak pernah
     * terpotong overflow leluhur. */
    .geonusa-card {
      padding: 0;
      overflow: hidden;
      border: 1px solid var(--border-color);
      border-radius: 10px;
      background: var(--bg-card);
    }
    .geonusa-card:not([open]) > .geonusa-card-body { display: none; }
    .geonusa-card-body { padding: 12px 13px; }
    /* Jarak 10px yang sama dengan .geofarm-kalk dan .geofarm-ref, supaya
       ritme antar kartu di panel GeoTools seragam. Kartu PERTAMA tidak
       diberi margin: jarak ke arahnya datang dari margin-bottom paragraf
       pengantar panel, persis seperti .geofarm-card. */
    .geonusa-card + .geonusa-card { margin-top: 10px; }

    .cctv-search-body input, .cctv-search-body select {
      width: 100%; height: 40px; padding: 7px 11px; margin-bottom: 0;
      border: 1px solid #d5e3ed; border-radius: 9px; font-size: 12px;
      background: #f8fbfd; color: #23445f; box-sizing: border-box;
      transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
    }
    .cctv-search-body input:focus, .cctv-search-body select:focus {
      outline: none; border-color: #1494ca; background: #fff; box-shadow: 0 0 0 3px rgba(20, 148, 202, .12);
    }

    /* CCTV Layer Toggle */
    .cctv-layers { margin: 12px 0; }

    /* Panel GeoPulse, section "Cuaca" - dua kartu ("Layer Cuaca Maritim"
     * dan "Kualitas Udara") yang mengikuti template kartu GeoTools seperti
     * GeoFarm, GeoTani, GeoWatch, GeoRaster, GeoNusa, dan GeoPangan.
     *
     * Yang BELUM ikut berubah: section Gempa, Kehutanan, Geologi, dan
     * Forecasting masih memakai pita .cctv-card-header. Tombol subtabnya
     * ada, tapi pembungkus .gempa-subtabs itu inline style="display:none;"
     * dan tidak ada JS yang membukanya, jadi di aplikasi yang terlihat
     * memang hanya section Cuaca ini.
     *
     * overflow: hidden aman di sini: isi kartu cuma daftar toggle
     * .cctv-layer-toggle, dan satu-satunya positioning di dalamnya adalah
     * .cctv-layer-check { position: relative } untuk centangnya - tidak
     * ada elemen absolute yang perlu keluar dari kotak. */
    .geopulse-card {
      padding: 0;
      overflow: hidden;
      border: 1px solid var(--border-color);
      border-radius: 10px;
      background: var(--bg-card);
    }
    .geopulse-card:not([open]) > .geopulse-card-body { display: none; }
    .geopulse-card-body { padding: 12px 13px; }
    /* Jarak 10px antar kartu, sama seperti .geonusa-card dan
     * .geopangan-card. Kartu PERTAMA tidak diberi margin: jaraknya datang
     * dari margin-bottom blok #weather-content di atasnya. */
    .geopulse-card + .geopulse-card { margin-top: 10px; }
    /* .cctv-layers sengaja dipertahankan di badan kartu: di dalam
     * .gempa-subtab-panel ia yang memberi max-height:35vh + overflow-y:auto,
     * supaya daftar 10 toggle kualitas udara tetap bisa digulir dan tidak
     * mendorong seluruh panel. Tapi margin 12px bawaannya harus dinolkan,
     * kalau tidak menumpuk dengan padding 12px badan kartu.
     * Aturan max-height-nya sendiri (yang di-scope ke .gempa-subtab-panel)
     * TIDAK boleh dihapus: wrapper .gempa-subtab-panel sengaja dipertahankan
     * di markup, justru supaya aturan itu terus berlaku. */
    .geopulse-card-body.cctv-layers { margin: 0; }

    /* #weather-content sekarang hanya pembungkus statis, dan isinya dipecah dua
     host yang diisi displayWeatherInfo():
       #weather-now-host   -> .weather-hero  (dalam kartu "Cuaca Sekarang")
       #weather-extra-host -> "Grafik Suhu" dan "Prakiraan Cuaca"
                               (.weather-source sudah jadi anak badan kartu
                               "Prakiraan Cuaca", bukan baris lepas)
     Ketiganya - kartu statis ini, kartu runtime di host kedua, dan kartu
     "Cuaca Maritim" setelah pembungkus - bukan saudara langsung, jadi
     ".geopulse-card + .geopulse-card" tidak lagi menyalakan jaraknya di
     salah satu batas. Jarak 10px ditulis eksplisit per batas. */
    #weather-content { margin-bottom: 10px; }
    #weather-extra-host { margin-top: 10px; }
    /* Dua kartu di dalam host kedua tetap bersaudara, jadi aturan asal tetap
     * berlaku untuk batas di antaranya - tidak perlu diulang. */
    /* Dua isi kartu berikut TIDAK dipipihkan ke gaya kartu template:
     *
     *  - .weather-hero memakai color:#fff di atas gradien biru. Kalau
     *    dipipihkan ke badan kartu yang berlatar var(--bg-card), teksnya
     *    jadi putih di atas putih. Jadi blok gradiennya tetap utuh di
     *    dalam badan kartu; yang dinolkan hanya margin bawaannya, karena
     *    jarak sudah disediakan padding badan kartu.
     *
     *  - .temp-chart-section punya background:#fff sendiri, jadi isinya
     *    (SVG digambar tangan oleh buildTemperatureChart, BUKAN Chart.js)
     *    tetap terbaca. Margin dan radius-nya yang dirapikan saja. */
    .geopulse-card-body .weather-hero { margin: 0; border-radius: 8px; }
    .geopulse-card-body .temp-chart-section { margin: 0; border-radius: 8px; }

    /* ── Kartu "Cuaca Sekarang": statis, dan jadi rumah dua kontrol ──
     *
     * Dua kontrol yang tadinya berdiri sendiri di level panel
     * (#weatherSearchInput + #autocompleteResults, lalu
     * #geopulseResetLayersBtn) dipindahkan ke paling bawah badan kartu ini,
     * supaya ikut terlipat bersama kartu dan tidak memakan tinggi sheet
     * GeoCuaca sejak panel dibuka. Lihat test-geopulse-cuaca.cjs.
     *
     * Dua masalah yang muncul karena pindah ke dalam kartu:
     *
     *  1. .autocomplete-results punya position:absolute + top:100% dan
     *     max-height 200px, jadi selama .geopulse-card memakai
     *     overflow:hidden (aturan di atas) daftar hasil pencarian akan
     *     TERPOTONG di tepi bawah kartu. Kartu ini karena itu dibuat
     *     overflow:visible.
     *  2. Kepala kartu tidak punya border-radius sendiri - rounded corner-nya
     *     selama ini datang dari overflow:hidden kartu. Kalau overflow
     *     dilepas, radius harus dipasang langsung di kepala. ONLY di kartu
     *     ini; kartu .geopulse-card lain tetap relies on overflow:hidden. */
    #weather-card-sekarang { overflow: visible; margin-top: 10px; }
    #weather-card-sekarang > .gt-card-head { border-radius: 10px 10px 0 0; }

    /* Jarak dua kontrol di dalam badan kartu. Nilai aslinya (margin-top 8px /
     * margin-bottom 4px pada .search-weather-container, dan margin-bottom 24px
     * pada .geotools-weather-reset-btn) berasal dari posisi lama di level
     * panel, di mana keduanya menghadap ke kartu berikutnya. Di dalam kartu
     * jaraknya hanya jarak antar kontrol dan ke padding badan kartu, jadi
     * margin bawahnya harus hilang. */
    #weather-card-sekarang .search-weather-container { margin: 12px 0 0; }
    #weather-card-sekarang .geotools-weather-reset-btn { margin: 8px 0 0; }

    /* Placeholder dan pesan galat di #weather-now-host. Awalnya keduanya
     * <p> dengan inline style, yang hilang bersama kartu runtime. Sekarang
     * kartu ini tidak pernah rebuilt, jadi stylenya dipindah ke sini supaya
     * tidak hilang dan tidak perlu inline style yang menimpa. */
    .weather-empty {
      margin: 0;
      font-size: 12px;
      line-height: 1.5;
      color: var(--text-muted);
    }
    .weather-error { color: #b91c1c; }

    .cctv-layer-toggle {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 10px 12px;
      border: 1px solid #e3edf5;
      border-radius: 10px;
      background: #fff;
      cursor: pointer;
      transition: border-color .2s, background .2s;
    }
    .cctv-layer-toggle:hover { border-color: #1494ca; background: #f3fbff; }
    .cctv-layer-toggle input { display: none; }
    .cctv-layer-check {
      flex-shrink: 0;
      width: 18px; height: 18px;
      border: 2px solid #c4d5e3; border-radius: 4px;
      background: #fff; position: relative;
      display: flex; align-items: center; justify-content: center;
      transition: border-color .2s, background .2s;
    }
    .cctv-layer-check svg { opacity: 0; transition: opacity .15s; }
    .cctv-layer-toggle input:checked + .cctv-layer-check {
      border-color: #e67e22; background: #e67e22;
    }
    .cctv-layer-toggle input:checked + .cctv-layer-check svg { opacity: 1; }
    .cctv-layer-info { display: flex; flex-direction: column; gap: 1px; }
    .cctv-layer-name { font-size: 11px; font-weight: 700; color: #16466c; }
    .cctv-layer-info small { font-size: 9px; color: #668198; }

    .hotspot-eye-btn {
      margin-left: auto;
      flex-shrink: 0;
      width: 28px;
      height: 28px;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 1px solid #d1d9e2;
      border-radius: 6px;
      background: #fff;
      color: #475569;
      cursor: pointer;
      transition: background .15s, color .15s, border-color .15s;
    }
    .hotspot-eye-btn:hover { background: #f1f5f9; color: #0f172a; border-color: #94a3b8; }
    .hotspot-eye-btn.markers-hidden { color: #cbd5e1; border-color: #e2e8f0; }
    .hotspot-eye-btn.markers-hidden svg { opacity: .4; }

    /* Toll Road Tooltip */
    .toll-road-tooltip {
      background: #1a3a52;
      color: #fff;
      border: 0;
      border-radius: 6px;
      padding: 5px 10px;
      font-size: 11px;
      font-weight: 600;
      box-shadow: 0 4px 10px rgba(0,0,0,.2);
    }
    .toll-road-tooltip::before { border-top-color: #1a3a52; }

/* GeoTani - SLS (Satuan Lingkungan Setempat) per desa */
.geotani-sls-badge {
  display: inline-block; margin-left: 5px; padding: 1px 5px;
  border: 1px solid var(--accent-green); border-radius: 3px;
  font-size: 8px; font-weight: 700; letter-spacing: .04em;
  color: var(--accent-green); vertical-align: middle;
}
.geotani-sls-desc {
  margin: 0 0 8px; font-size: 10.5px; line-height: 1.5; color: var(--text-muted);
}
.geotani-sls-desc b { color: var(--text-secondary); }
.geotani-sls-card .geotani-btn-print { width: 100%; justify-content: center; }
.geotani-sls-search { position: relative; margin-bottom: 8px; }
.geotani-sls-search .geotani-form-input-search { width: 100%; }
.geotani-sls-results {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 60;
  max-height: 200px; overflow-y: auto;
  border: 1px solid var(--border-color); border-top: 0; border-radius: 0 0 4px 4px;
  background: var(--bg-primary); box-shadow: 0 4px 12px rgba(0, 0, 0, .12);
}
.geotani-sls-results[hidden] { display: none; }
/* Hasil cari Land System ikut menambah tinggi kartu. Posisi dropdown absolute
   sebelumnya menimpa pilihan dan tombol di bawahnya saat daftar terbuka. */
#geotani-land-system-card .geotani-sls-search { min-width: 0; }
#geotani-land-system-card .geotani-sls-results:not([hidden]) {
  position: relative; top: auto; right: auto; left: auto; z-index: 1;
  max-height: 180px; margin-top: 4px; overflow-y: auto;
  border-top: 1px solid var(--border-color); border-radius: 6px;
}
#geotani-land-system-card .geotani-sls-search .geotani-form-input-search {
  display: block; min-width: 0; box-sizing: border-box;
}
.geotani-sls-result {
  padding: 7px 10px; font-size: 11px; color: var(--text-secondary);
  cursor: pointer; border-bottom: 1px solid var(--border-color);
}
.geotani-sls-result:last-child { border-bottom: 0; }
.geotani-sls-result:hover { background: var(--bg-card-hover); }
.geotani-sls-picked {
  margin-top: 4px; padding: 4px 8px; font-size: 10px;
  color: #166534; background: #f0fdf4; border-radius: 4px;
}
.geotani-sls-picked[hidden] { display: none; }
.geotani-sls-status {
  margin-top: 7px; font-size: 10.5px; line-height: 1.5; color: var(--text-muted);
}
    .geotani-sls-status:not(:empty) { color: #b45309; }
    /*        Status kuota habis. Berbeda dari .geotani-sls-warn yang memperingatkan
       data tidak lengkap, ini berarti server menolak: perlu kotak dengan
       warna sendiri supaya tidak tertukar dengan "sebagian data mungkin
       tidak tampil". Warna merah dipakai karena aksi berikutnya adalah
       menunggu sampai jam berikutnya, bukan memperbaiki sesuatu. */
    .geotani-sls-status.is-quota {
      margin-top: 7px; padding: 7px 9px;
      border: 1px solid #fca5a5; border-left: 3px solid #dc2626;
      border-radius: 5px;
      background: #fef2f2; color: #991b1b;
      font-size: 10.5px; line-height: 1.5;
    }
    [data-theme="dark"] .geotani-sls-status.is-quota {
      border-color: #7f1d1d; border-left-color: #ef4444;
      background: #2a0b0b; color: #fecaca;
    }
    .geotani-sls-summary {
  display: flex; flex-wrap: wrap; gap: 4px 10px;
  margin-top: 8px; font-size: 10.5px; color: var(--text-secondary);
}
.geotani-sls-summary b { color: var(--text-primary); }
.geotani-sls-warn {
  margin-top: 6px; padding: 5px 7px;
  border: 1px solid #fbbf24; border-radius: 4px;
  background: #fffbeb; color: #92400e; font-size: 10px; line-height: 1.45;
}
.geotani-sls-list {
  max-height: 190px; margin: 7px 0 0; padding: 0; overflow-y: auto;
  list-style: none; border: 1px solid var(--border-color); border-radius: 5px;
}
.geotani-sls-list li {
  display: flex; align-items: baseline; gap: 8px;
  padding: 5px 8px; font-size: 10.5px; cursor: pointer;
  border-top: 1px solid var(--border-color);
}
.geotani-sls-list li:first-child { border-top: 0; }
.geotani-sls-list li:hover { background: var(--bg-card-hover); }
.geotani-sls-name { flex: 1 1 auto; min-width: 0; color: var(--text-primary); }
.geotani-sls-luas { flex: 0 0 auto; color: var(--accent-green); font-weight: 600; }
/* Kredit BPS: pasal 13.2 Ketentuan Penggunaan mewajibkan kutipan yang memuat
   judul konten, tanggal akses, penulis, dan tautan ke konten asli. Teksnya
   sengaja kecil tapi tidak disembunyikan.

   Tautannya ditulis sebagai teks biasa, jadi dibutuhkan pemenggalan kata:
   URL-nya panjang (gistaru.atrbpn.go.id/arcgis/rest/services/LSD/LSD_DAL/
   MapServer sudah 60+ karakter) sementara panel GeoTools hanya sekitar
   300 px. Tanpa itu URL meluber keluar dari kartu. */
.geotani-sls-credit {
  margin-top: 7px; padding-top: 6px;
  border-top: 1px dashed var(--border-color);
  font-size: 9px; line-height: 1.5; color: var(--text-muted);
  overflow-wrap: anywhere; word-break: break-word;
}
[data-theme="dark"] .geotani-sls-warn {
  border-color: #a16207; background: #451a03; color: #fcd34d;
}
[data-theme="dark"] .geotani-sls-picked { color: #86efac; background: #052e16; }

/* ── Cek NIB Tanah (ATR/BPN GISTARU) ──
   Satu NIB bisa punya banyak bidang di kabupaten/kota berbeda, jadi hasilnya
   berupa daftar kartu, bukan satu baris ringkasan. */
.geotani-sls-status.is-error {
  margin-top: 7px; padding: 7px 9px;
  border: 1px solid #fca5a5; border-left: 3px solid #dc2626;
  border-radius: 5px; background: #fef2f2; color: #991b1b;
  font-size: 10.5px; line-height: 1.5;
}
[data-theme="dark"] .geotani-sls-status.is-error {
  border-color: #7f1d1d; border-left-color: #ef4444;
  background: #2a0b0b; color: #fecaca;
}
.nib-results:empty { display: none; }
.nib-actions {
  display: flex; gap: 8px; align-items: stretch;
}
.nib-actions .geotani-btn-print { flex: 1 1 0; }
/* Reset tidak boleh terlihat seperti aksi utama, jadi dibuat lebih redup.
   Border harus ditulis ulang karena .geotani-btn-print memakai border:none,
   sehingga border-color sendirian tidak akan terlihat. */
.nib-reset-btn {
  flex: 0 0 96px !important;
  background: transparent;
  border: 1px solid var(--border-color);
  color: var(--text-muted);
  box-shadow: none;
}
.nib-reset-btn:hover:not(:disabled) {
  background: var(--bg-card-hover);
  border-color: #fca5a5;
  color: #b91c1c;
}
[data-theme="dark"] .nib-reset-btn:hover:not(:disabled) {
  border-color: #7f1d1d; color: #fca5a5;
}
.nib-summary {
  margin-top: 8px; font-size: 10.5px; line-height: 1.5;
  color: var(--text-secondary);
}
.nib-summary b { color: var(--text-primary); }
.nib-result {
  margin-top: 6px; padding: 7px 9px;
  border: 1px solid var(--border-color); border-radius: 5px;
  background: var(--bg-card);
}
.nib-result[role="button"] { cursor: pointer; }
.nib-result[role="button"]:hover { background: var(--bg-card-hover); }
.nib-result[role="button"]:focus-visible {
  outline: 2px solid var(--accent-green); outline-offset: 1px;
}
.nib-result-head {
  font-size: 10px; font-weight: 700; letter-spacing: .03em;
  color: var(--text-muted); text-transform: uppercase;
  margin-bottom: 4px;
}
.nib-result-rows { margin: 0; }
.nib-result-row {
  display: flex; align-items: baseline; gap: 8px;
  padding: 1px 0; font-size: 10.5px; line-height: 1.55;
}
.nib-result-row dt {
  flex: 0 0 78px; margin: 0; color: var(--text-muted);
}
.nib-result-row dd {
  flex: 1 1 auto; min-width: 0; margin: 0;
  color: var(--text-primary);
  overflow-wrap: anywhere; word-break: break-word;
}
.nib-result-hint {
  margin-top: 4px; font-size: 9px; color: var(--text-muted); opacity: .8;
}
[data-theme="dark"] .nib-result { background: rgba(255,255,255,0.03); }

/* ── Legenda IGTPR (ATR/BPN) ── */
.igtpr-legend { padding: 8px; }
.igtpr-legend-title {
  margin-bottom: 5px; font-size: 11px; font-weight: 700; color: #0f172a;
  overflow-wrap: anywhere; word-break: break-word;
}
.igtpr-legend-img {
  max-width: 100%; background: #fff; border-radius: 4px;
}
.igtpr-legend-source {
  margin-top: 5px; font-size: 9px; line-height: 1.3; color: #64748b;
}
[data-theme="dark"] .igtpr-legend-img { background: #fff; }
.geotani-sls-popup-title {
  font-size: 12px; font-weight: 700; color: #166534;
  padding-bottom: 5px; margin-bottom: 5px; border-bottom: 1px solid #dcfce7;
}
.geotani-sls-popup-row {
  display: flex; justify-content: space-between; gap: 10px;
  font-size: 11px; line-height: 1.6; color: #475569;
}
/* GeoTani - KKPR / NIB (ATR/BPN GISTARU). Sengaja memakai .geotani-lbslsd
   untuk kepala dan badan kartunya, supaya dua workflow mandiri di bagian
   atas tab ini terlihat sama dan tidak perlu aturan yang terduplikasi.
   Yang ditambahkan hanya jarak antar kartu dan gaya untuk kondisi data
   yang tidak konsisten.

   Bingkai kartu KKPR (border, radius, latar) TIDAK ditulis di sini.
   Aturannya ada di blok .geotani-geooss/.geotani-kkpr yang menyatukan
   kedua kartu, supaya tidak ada dua tempat yang bisa tidak sinkron. */

/* Peringatan data: satu NIB dengan beberapa geometri, atau geometri
   berukuran tidak wajar. Warnanya sengaja tidak merahsolid -- merah
   dipakai untuk tombol hapus, sedangkan di sini yang_flagged adalah
   keterbatasan data ATR/BPN, bukan kesalahan pengguna. */
.geotani-kkpr-warn {
  margin: 8px 0; padding: 8px 10px;
  border: 1px solid rgba(180, 120, 0, .35);
  border-left: 3px solid #b26a00;
  border-radius: 5px; background: rgba(180, 120, 0, .07);
  font-size: 10.5px; line-height: 1.5; color: var(--text-primary);
}
.geotani-kkpr-grup {
  margin-top: 10px; border: 1px solid var(--border-color);
  border-radius: 6px; overflow: hidden;
}
.geotani-kkpr-grup.is-ganjil { border-color: rgba(220, 38, 38, .45); }
.geotani-kkpr-grup-head {
  padding: 6px 10px; background: var(--bg-card-hover);
  border-bottom: 1px solid var(--border-color);
  font-size: 10.5px; font-weight: 600; color: var(--text-primary);
}
.geotani-kkpr-grup.is-ganjil .geotani-kkpr-grup-head { color: #b91c1c; }

/* Tabel izin. Daftar ini sama sekali berbeda bentuk dari kartu LBS & LSD
   dan SLS, yang memakai daftar baris, bukan tabel -- jadi kelasnya milik
   sendiri dan tidak dipinjam dari sana. */
.geotani-kkpr-table-wrap { overflow-x: auto; }
.geotani-kkpr-table {
  width: 100%; border-collapse: collapse; font-size: 10.5px;
}
.geotani-kkpr-table th {
  padding: 5px 8px; text-align: left; font-size: 9px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em;
  color: var(--text-tertiary); background: var(--bg-card-hover);
  border-bottom: 1px solid var(--border-color); white-space: nowrap;
}
.geotani-kkpr-table td {
  padding: 5px 8px; border-bottom: 1px solid var(--border-secondary);
  color: var(--text-primary); white-space: nowrap;
}
.geotani-kkpr-table tr:last-child td { border-bottom: 0; }

/* Kolom KBLI dan nama usaha. Kode ditonjolkan, sedangkan "tidak ditemukan"
   sengaja dibuat redup miring: itu keadaan data yang sah, bukan kegagalan
   program, jadi tidak boleh terlihat seperti error. Nama usaha boleh
   membungkus karena judul KBLI bisa sangat panjang, sedangkan kolom lain
   tetap nowrap supaya tabel tetap rapat. */
.geotani-kkpr-kode {
  font-variant-numeric: tabular-nums; font-weight: 600; color: var(--accent);
}
.geotani-kkpr-kosong { color: var(--text-tertiary); font-style: italic; }
.geotani-kkpr-table td:nth-child(3) { white-space: normal; min-width: 180px; }

/* GeoTani - GeoOSS (Pre-OSS Spatial Checker).
   Nama kelas memakai prefix .geooss- supaya tidak bentrok dengan .geotani-kkpr-
   yang punya gaya serupa. Kartu meniru .geotani-lbslsd seperti kartu GeoTani
   yang lain; yang khas hanya isi: tabel zona, verdict, dan daftar kendala.

   BINGKAI KARTU
   -------------
   Dua kartu ini memakai .geotani-lbslsd-head dan .geotani-lbslsd-body, tapi
   TIDAK memakai kelas .geotani-lbslsd -- dan bingkai itulah yang memberi
   border, radius, warna latar, serta overflow. Akibatnya keduanya pernah
   tampil sebagai kepala berwarna yang menggantung di atas teks, tanpa
   kotak: terlihat seperti hasil modul yang ditempelkan, bukan kartu.

   Aturan di bawah memberikan bingkai itu secara langsung, bukan dengan
   menumpangkan kelas .geotani-lbslsd ke dalam .geotani-geooss/.geotani-kkpr,
   supaya nama kelas di markup tetap berarti apa adanya modul itu. */
.geotani-geooss,
.geotani-kkpr {
  margin-bottom: 14px; padding: 0; overflow: hidden;
  border: 1px solid var(--border-color); border-radius: 8px;
  background: var(--bg-card);
}

/* Penanda bawaan, chevron, hover, dan fokus kartu GeoOSS dan KKPR
   sekarang ditangani oleh .gt-card-head di blok "Kepala kartu GeoTools".
   Aturan lama di sini dihapus, bukan dibiarkan jadi alias, supaya tidak
   ada dua sumber untuk hal yang sama.

   Yang TETAP khas modul ini cuma satu: isi kartu pertama tidak boleh
   punya margin-top sendiri, karena badannya ber-padding. */
.geotani-geooss > .geotani-lbslsd-body > :first-child,
.geotani-kkpr > .geotani-lbslsd-body > :first-child { margin-top: 0; }


/* Verdict: satu blok besar yang langsung terbaca. Warna memakai variabel tema
   supaya ikut dark mode, bukan hex tetap. */
.geooss-verdict {
  margin-top: 8px; padding: 8px 10px; border-radius: 6px;
  font-size: 12px; border-left: 3px solid var(--accent);
  background: var(--bg-card-hover); color: var(--text-primary);
}
.geooss-verdict.is-ok  { border-left-color: #16a34a; }
.geooss-verdict.is-warn { border-left-color: #d97706; }
.geooss-verdict.is-bad { border-left-color: #dc2626; }

/* Peringatan data: "belum di-build", zone tanpa kode, dan lain-lain. Sengaja
   styled seperti catatan, bukan seperti error merah, karena ini keadaan data
   yang sah -- bukan kegagalan program. */
.geooss-warn {
  margin-top: 8px; padding: 7px 9px; border-radius: 5px; font-size: 11px;
  line-height: 1.45; color: var(--text-secondary);
  background: var(--bg-card-hover);
  border: 1px dashed var(--border-color);
}
.geooss-warn code {
  font-size: 10.5px; background: var(--bg-tertiary);
  padding: 1px 4px; border-radius: 3px; color: var(--text-primary);
}

/* Baris detail teknis: untuk pengelola situs, bukan pengguna akhir. Sengaja
   paling redup dan terkecil di dalam pesan supaya tidak mengambil alih
   perhatian dari penjelasan yang lebih penting. */
.geooss-detail {
  display: block; font-size: 10px; color: var(--text-muted);
  font-style: italic; word-break: break-all;
}

/* Pencarian kegiatan: input + daftar saran.
   .geotani-sls-results dipakai ulang supaya gaya dan posisi (absolute di
   bawah input, max-height 200px) sama persis dengan pencarian desa LBS & LSD
   dan pencarian kabupaten satupeta. Yang ditambahkan hanya state keyboard dan
   highlight kata yang cocok. */
.geooss-cari-saran {
  border-top: 0; border-radius: 0 0 4px 4px;
}
.geooss-cari-saran .geotani-sls-result {
  display: flex; gap: 6px; align-items: baseline; line-height: 1.35;
}
/* Dipakai untuk navigasi keyboard, bukan hanya hover, supaya pengguna tahu
   pilihan mana yang akan diambil saat menekan Enter. */
.geooss-cari-saran .geotani-sls-result.aktif {
  background: var(--bg-card-hover);
  box-shadow: inset 2px 0 0 var(--accent);
}
.geooss-cari-saran .geooss-cari-nama { flex: 1 1 auto; }
.geooss-cari-saran .geooss-cari-kode {
  flex: 0 0 auto; font-size: 9.5px; color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
/* Potongan yang cocok dengan yang diketik. Sengaja hanya ditebalkan, tanpa
   warna baru, supaya tidak memperkenalkan palet baru ke tema gelap. */
.geooss-cari-saran mark {
  background: rgba(250, 204, 21, .3); color: inherit;
  border-radius: 2px; padding: 0 1px; font-weight: 700;
}
.geooss-cari-saran .geotani-sls-result[data-kosong] {
  color: var(--text-muted); font-style: italic; cursor: default;
}
.geooss-cari-saran .geotani-sls-result[data-kosong]:hover { background: none; }
.geooss-cari-judul {
  padding: 5px 10px; font-size: 9.5px; color: var(--text-muted);
  background: var(--bg-card-hover); border-bottom: 1px solid var(--border-color);
  position: sticky; top: 0;
}
/* Input dinonaktifkan sebelum daftar kegiatan siap, supaya tidak ada
  godaan mengetik sebelum ada yang bisa dicocokkan. */
.geooss-cari-cari:disabled { opacity: .6; cursor: not-allowed; }
[data-theme="dark"] .geooss-cari-saran mark { background: rgba(250, 204, 21, .25); }

/* Output "Pre-check KKPR": ringkasan akhir yang dibaca orang awam.
   Letakkan di atas ringkasan verdict supaya jawaban "boleh atau tidak"
   muncul lebih dulu, dan daftar rincian ada di bawahnya. */
.geooss-precheck {
  margin-top: 12px; padding: 10px 11px; font-size: 11px;
  color: var(--text-secondary); background: var(--bg-card);
  border: 1px solid var(--border-color); border-radius: 6px;
}
.geooss-precheck-judul { margin-bottom: 8px; }
.geooss-precheck-judul b { display: block; font-size: 12.5px; color: var(--text-primary); }
.geooss-precheck-judul span {
  display: block; margin-top: 2px; font-size: 10.5px; line-height: 1.5;
  color: var(--text-muted);
}
.geooss-precheck-tabel { width: 100%; border-collapse: collapse; }
.geooss-precheck-tabel th, .geooss-precheck-tabel td {
  padding: 5px 0; text-align: left; vertical-align: top;
  border-top: 1px solid var(--border-color);
}
.geooss-precheck-tabel tr:first-child th,
.geooss-precheck-tabel tr:first-child td { border-top: 0; }
.geooss-precheck-tabel th {
  width: 116px; padding-right: 10px; font-size: 10px; font-weight: 600;
  color: var(--text-muted); text-transform: uppercase; letter-spacing: .02em;
}
/* Pada layar sempit label dan nilai tetap satu kolom, tapi lebarkan label
   supaya tidak memotong kata. */
.geooss-precheck-kecil {
  display: block; margin-top: 2px; font-size: 10px; line-height: 1.45;
  color: var(--text-muted);
}
.geooss-precheck-kode {
  font-variant-numeric: tabular-nums; font-size: 10.5px; line-height: 1.5;
  word-break: break-word;
}
.geooss-precheck-syarat {
  margin-top: 8px; padding: 7px 9px; font-size: 10.5px; line-height: 1.55;
  background: var(--bg-card-hover); border-radius: 4px;
}
.geooss-precheck-oss {
  display: block; margin-top: 9px; padding: 9px 11px;
  font-size: 12px; font-weight: 600; text-decoration: none;
  color: var(--accent); background: var(--bg-card-hover);
  border: 1px solid var(--accent); border-radius: 5px;
  transition: background .2s ease;
}
.geooss-precheck-oss:hover { background: var(--bg-card-active); }
.geooss-precheck-oss span {
  display: block; margin-top: 2px; font-size: 10px; font-weight: 400;
  color: var(--text-muted);
}
.geooss-precheck-simmerah {
  margin-top: 8px; padding-top: 8px; font-size: 9.5px; line-height: 1.55;
  color: var(--text-muted); border-top: 1px solid var(--border-color);
}
@media (max-width: 420px) {
  .geooss-precheck-tabel th { width: 96px; }
}

/* ============ KARTU SHEET GAMBAR & UKUR ============
   Sheet "Gambar & Ukur" (#drawSidebar) memuat enam kartu <details>: Cek
   Lokasi, Konverter Koordinat, Geoprocessing, Draw, Measure, dan Export.
   Semuanya memakai template kartu GeoTools yang sama dengan GeoFarm:
   cangkang .dm-card, kepala .gt-card-head, dan badan .dm-card-body.
   Angkanya disalin apa adanya dari .geofarm-card / .geofarm-card-body, dan
   karena keenamnya <details>, chevron .gt-card-head terpakai langsung
   tanpa tambahan apa pun.

   Kelas lama dihapus, bukan dibiarkan jadi alias. .dm-tool-group,
   .dm-tool-group-content, kerangka .dm-cek-lokasi, dan
   .dm-sidebar-section-title sudah tidak ada di markup, dan tidak ada satu
   pun rujukan JavaScript ke keempatnya: geoprocessing.js memakai
   .gp-tools-card, alat-cek-lokasi.js memakai #dmCekLokasi, keduanya tetap
   ada. Yang dipertahankan adalah kelas isi (.dm-cek-lokasi-input,
   .dm-sidebar-option, .geolokasi-*, .dm-koordinat-*), karena itu isi
   modul, bukan kerangka kartu.

   Chevron lama berupa teks '+' dan '−' yang ditulis lewat ::after pada
   summary; kalau dibiarkan, seleksinya lebih spesifik dari
   .gt-card-head::after dan menang, jadi kartu ini kehilangan chevron
   segitiga yang dipakai seluruh GeoTools. */
.dm-card {
  margin-top: 10px;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  background: var(--bg-card);
}
/* Kartu pertama tidak menambah jarak ke atas: jarak menuju kartu itu
   datang dari padding sheet. Pada runtime sheet-donation-ads.js
   menyisipkan banner donasi di atas kartu pertama sehingga tidak ada lagi
   yang cocok dengan :first-child, tapi margin atas banner memang 10px,
   jadi jaraknya tetap 10px lewat margin yang saling menimpa. */
.dm-card:first-child { margin-top: 0; }
.dm-card-body { padding: 12px 13px; }
.dm-cek-lokasi-desc {
  margin: 0 0 10px; font-size: 11px; line-height: 1.5;
  color: var(--text-secondary);
}
.dm-cek-lokasi-label {
  display: block; margin-bottom: 4px;
  font-size: 10px; font-weight: 600; color: var(--text-secondary);
}
/* Padding kiri 10px, bukan 28px seperti .geotani-form-input-search. Nilai 28px
   itu ruang untuk ikon search, dan input ini tidak punya ikon -- sisa ruang
   kosong itu bikin teks tampak tidak rata dengan label di atasnya. */
.dm-cek-lokasi-input {
  width: 100%; box-sizing: border-box;
  padding: 7px 10px; font-size: 12px; font-variant-numeric: tabular-nums;
  border: 1px solid var(--border-color); border-radius: 8px;
  background: var(--bg-secondary); color: var(--text-primary); outline: none;
}
.dm-cek-lokasi-input::placeholder { color: var(--text-muted); }
.dm-cek-lokasi-input:focus { border-color: var(--accent); }
.dm-cek-lokasi-btn {
  flex: 1 1 0; min-width: 0; height: 34px; padding: 0 10px;
  font-size: 11px; font-weight: 700; border: none; border-radius: 8px;
  cursor: pointer; transition: all .2s ease;
  color: #fff; background: var(--accent);
}
.dm-cek-lokasi-btn:hover { filter: brightness(1.08); }
.dm-cek-lokasi-btn:active { transform: translateY(1px); }
.dm-cek-lokasi-btn--orange { background: #ea580c; }
.dm-cek-lokasi-btn--green { background: #16a34a; }
.dm-cek-lokasi-status:not(:empty) {
  margin-top: 8px; padding: 6px 8px; font-size: 11px; line-height: 1.5;
  color: var(--text-secondary); background: var(--bg-card-hover);
  border-left: 3px solid var(--accent); border-radius: 4px;
}
[data-theme="dark"] .dm-cek-lokasi-btn { color: #06202a; }
/* Reset sengaja berdiri di barisnya sendiri. Empat tombol sejajar membuat
   "Lokasi Saya" terpotong di sheet desktop yang lebarnya dibatasi 380px,
   dan tiga tombol di atasnya tetap tidak berubah tampilannya. Warnanya
   netral supaya tidak terbaca sebagai aksi utama seperti tombol Cek. */
.geolokasi-tombol .dm-cek-lokasi-btn--reset {
  flex: 1 1 100%;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
}
[data-theme="dark"] .geolokasi-tombol .dm-cek-lokasi-btn--reset { color: var(--text-primary); }

.geolokasi-tombol { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.geolokasi-hasil { margin-top: 8px; }
.geolokasi-koordinat {
  padding: 6px 8px; font-size: 12px; font-variant-numeric: tabular-nums;
  background: var(--bg-card-hover); border-radius: 4px; word-break: break-all;
}
.geolokasi-tabel { width: 100%; margin-top: 6px; border-collapse: collapse; }
.geolokasi-tabel th, .geolokasi-tabel td {
  padding: 4px 0; text-align: left; vertical-align: top; font-size: 11px;
  border-top: 1px solid var(--border-color);
}
.geolokasi-tabel tr:first-child th, .geolokasi-tabel tr:first-child td { border-top: 0; }
.geolokasi-tabel th {
  width: 116px; padding-right: 8px; font-size: 10px; font-weight: 600;
  color: var(--text-muted);
}
/* Di dalam sidebar 380px, kolom label 116px menyisakan terlalu sedikit
   ruang untuk nilai -- "Jawa Timur" mulai turun ke baris berikutnya.
   Di-namespace ke #dmCekLokasi, jadi tabel lain yang memakai kelas yang
   sama tidak ikut berubah. */
#dmCekLokasi .geolokasi-tabel th { width: 92px; }
/* Nilai yang memang tidak ada di sumber data. Warnanya sengaja redup,
   bukan merah: ini keterbatasan sumber, bukan kesalahan. */
.geolokasi-takada { color: var(--text-muted); font-style: italic; }
.geolokasi-kecil { margin-top: 6px; font-size: 10px; line-height: 1.5; color: var(--text-muted); }
.geolokasi-kecil--wajar { color: var(--text-secondary); }
.geolokasi-galat {
  margin-top: 8px; padding: 7px 9px; font-size: 11px; line-height: 1.5;
  color: var(--text-secondary); background: var(--bg-card-hover);
  border-left: 3px solid var(--accent); border-radius: 4px;
}
@media (max-width: 420px) {
  .geolokasi-tabel th { width: 96px; }
}

/* Luas LBS/LSD dan LP2B di GeoOSS. Dipisah dari .geooss-khusus karena
   ini hasil pengukuran luas, bukan daftar syarat. */
.geooss-sawah {
  margin-top: 10px; padding: 8px 10px; font-size: 11px;
  color: var(--text-secondary); background: var(--bg-card-hover);
  border-left: 3px solid var(--accent); border-radius: 4px;
}
/* Data sawah tidak terbaca: bukan error, dan tidak perlu warna peringatan. */
.geooss-sawah--kosong { border-left-color: var(--text-muted); }
.geooss-sawah > b { display: block; margin-bottom: 4px; color: var(--text-primary); }
.geooss-sawah-tabel { width: 100%; border-collapse: collapse; }
.geooss-sawah-tabel td {
  padding: 3px 0; font-size: 11px; vertical-align: top;
  border-top: 1px solid var(--border-color);
}
.geooss-sawah-tabel tr:first-child td { border-top: 0; }
.geooss-sawah-tabel th {
  padding: 3px 8px 3px 0; text-align: left; font-size: 10px; font-weight: 600;
  color: var(--text-muted); white-space: nowrap;
}
.geooss-sawah-tabel td { font-variant-numeric: tabular-nums; }
/* Sumber, satuan, dan peringatan cakupan. */
.geooss-sawah-kecil {
  margin-top: 5px; font-size: 10px; line-height: 1.5; color: var(--text-muted);
}
/* Peringatan cakupan peta 1:50.000. Oranye, karena itu informasi yang
   perlu dibaca -- bukan sekadar catatan. */
.geooss-sawah-catatan {
  margin-top: 4px; padding: 4px 6px; font-size: 10px; line-height: 1.5;
  color: var(--text-secondary); background: var(--bg-card);
  border-left: 2px solid #d97706; border-radius: 3px;
}

/* Ketentuan khusus: daftar yang harus dipenuhi sebelum activities bisa
   dianggap bebas masalah. Dipisah dari .geooss-warn karena warn dipakai
   untuk kesalahan dan kelengkapan data, sedangkan ini daftar syarat. */
.geooss-khusus {
  margin-top: 10px; padding: 8px 10px; font-size: 11px;
  color: var(--text-secondary); background: var(--bg-card-hover);
  border-left: 3px solid #d97706; border-radius: 4px;
}
.geooss-khusus--ringan { border-left-color: var(--accent); }
/* Blok intensitas: sengaja tidak diberi warna peringatan. Yang di dalamnya
   bukan pelanggaran, melainkan informasi bahwa datanya tidak ada. */
.geooss-khusus--kosong { border-left-color: var(--text-muted); }
.geooss-khusus > b { display: block; margin-bottom: 3px; color: var(--text-primary); }
.geooss-khusus-ket {
  display: block; margin-bottom: 6px; font-size: 10.5px;
  line-height: 1.5; color: var(--text-muted);
}
.geooss-khusus-tabel { width: 100%; border-collapse: collapse; }
.geooss-khusus-tabel td {
  padding: 3px 6px 3px 0; font-size: 10.5px; vertical-align: top;
  border-top: 1px solid var(--border-color);
}
.geooss-khusus-tabel tr:first-child td { border-top: 0; }
.geooss-khusus-ha {
  width: 84px; text-align: right; font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.geooss-khusus-zona {
  width: 72px; text-align: right; font-size: 10px; color: var(--text-muted);
  white-space: nowrap;
}
[data-theme="dark"] .geooss-khusus { border-left-color: #f59e0b; }

.geooss-dasar {
  display: grid; gap: 2px; margin-top: 8px; padding: 7px 9px;
  font-size: 11px; color: var(--text-secondary);
  background: var(--bg-card-hover); border-radius: 5px;
}
.geooss-dasar b { color: var(--text-primary); }

.geooss-kode {
  font-variant-numeric: tabular-nums; font-weight: 600; color: var(--accent);
}

/* Tabel zona. Lebar, jadi dibungkus scroll horizontal. Kolom status diberi
   warna teks, bukan latar, supaya tabel tetap terbaca di dark mode. */
.geooss-zona-wrap { margin-top: 8px; overflow-x: auto; }
.geooss-zona { width: 100%; border-collapse: collapse; font-size: 10.5px; }
.geooss-zona th {
  padding: 5px 8px; text-align: left; font-size: 9px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em; white-space: nowrap;
  color: var(--text-tertiary); background: var(--bg-card-hover);
  border-bottom: 1px solid var(--border-color);
}
.geooss-zona td {
  padding: 5px 8px; border-bottom: 1px solid var(--border-secondary);
  color: var(--text-primary); white-space: nowrap; vertical-align: top;
}
.geooss-zona tr:last-child td { border-bottom: 0; }
.geooss-zona td:nth-child(1) { white-space: normal; min-width: 120px; }
.geooss-zona td:nth-child(6) { white-space: normal; min-width: 150px; }
.geooss-st-pasti  { color: #16a34a; font-weight: 600; }
.geooss-st-awalan { color: #d97706; font-weight: 600; }
.geooss-st-tidak  { color: #dc2626; font-weight: 600; }
.geooss-st-netral { color: var(--text-tertiary); }
.geooss-kosong { color: var(--text-tertiary); font-style: italic; }

.geooss-kendala {
  display: inline-block; margin: 0 3px 3px 0; padding: 1px 5px;
  font-size: 9.5px; border-radius: 3px; white-space: normal;
  background: var(--bg-tertiary); color: var(--text-secondary);
}

/* ── Kartu hasil GeoOSS ───────────────────────────────────────────────────
   Satu kartu per analisis, memakai <details>/<summary> supaya bisa dilipat
   tanpa satu baris JavaScript pun. Tampilannya meniru .geotani-lbslsd --
   kartu GeoTools lain -- supaya panel ini tidak terlihat seperti hasil
   modul yang ditempelkan. */
.geooss-kartu {
  margin: 0 0 10px; padding: 0; overflow: hidden;
  border: 1px solid var(--border-color); border-radius: 8px;
  background: var(--bg-card);
}
.geooss-kartu-kepala {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 13px;
  background: var(--bg-card-active);
  cursor: pointer; list-style: none;
  /* Panah dibuat sendiri, jadi penanda bawaan <summary> harus dimatikan
     supaya tidak ada dua tanda panah bertumpuk: satu dari ::marker dan
     satu dari elemen yang kita gambar sendiri. */
  -webkit-tap-highlight-color: transparent;
}
.geooss-kartu-kepala::-webkit-details-marker { display: none; }
.geooss-kartu-kepala::marker { content: ''; }
.geooss-kartu-kepala:hover { background: var(--bg-card-hover); }
.geooss-kartu-kepala:focus-visible {
  outline: 2px solid var(--accent); outline-offset: -2px;
}
.geooss-kartu-teks { display: block; flex: 1 1 auto; min-width: 0; }
.geooss-kartu-judul {
  display: block; font-size: 13px; font-weight: 700;
  color: var(--text-primary); line-height: 1.3;
}
.geooss-kartu-sub {
  display: block; margin-top: 1px; font-size: 9.5px; font-weight: 500;
  color: var(--text-muted); line-height: 1.35;
}
/* Panah chevron. Diputar 180 derajat saat kartu dibuka, jadi arahnya
   selalu menunjukkan aksi berikutnya, bukan sekadar keadaan. */
.geooss-kartu-panah {
  flex: 0 0 auto; width: 8px; height: 8px;
  border-right: 1.6px solid var(--text-muted);
  border-bottom: 1.6px solid var(--text-muted);
  transform: rotate(45deg);
  transition: transform .18s ease;
}
.geooss-kartu[open] > .geooss-kartu-kepala { border-bottom: 1px solid var(--border-color); }
.geooss-kartu[open] > .geooss-kartu-kepala .geooss-kartu-panah {
  transform: rotate(-135deg); margin-top: -4px;
}
.geooss-kartu-isi { padding: 12px 13px; }
/* Blok di dalam kartu sudah punya margin-top sendiri. Tanpa ini, isi
   pertama berjarak 8px dari tepi dalam PLUS padding 12px, jadi terlihat
   tidak rata dengan tepi kartu. */
.geooss-kartu-isi > :first-child { margin-top: 0; }
@media (max-width: 420px) {
  .geooss-kartu-judul { font-size: 12.5px; }
  .geooss-kartu-isi { padding: 10px 11px; }
}

.geotani-sls-popup-row b { color: #166534; }

/* GeoTani - LBS & LSD (BIG SatuPeta), workflow mandiri di bagian teratas.
   Grid .geotani-analysis-cards sedang display:none, jadi kartu ini memakai
   gaya sendiri dan tidak bergantung pada mekanisme tab analysis. */
.geotani-lbslsd {
  margin-bottom: 0; padding: 0; overflow: hidden;
  border: 1px solid var(--border-color); border-radius: 8px;
  background: var(--bg-card);
}
/* ── Kepala kartu GeoTools ───────────────────────────────────────────────
   SATU template untuk semua panel, diambil dari kartu LBS & LSD GeoTani:
   ikon 20px, judul 13px tebal, subjudul 9,5px redup, pita
   var(--bg-card-active).

   Kenapa satu kelas, bukan satu kelas per modul. Sebelumnya tiap modul
   punya kelas kepalanya sendiri dengan angka yang berbeda-beda dalam satu
   panel yang sama: ikon 20px (GeoTani), SVG 18px berwarna aksen
   (GeoFarm Analisis), dan 15px (Kalkulator). Warna pitanya juga berbeda:
   --bg-card-active di GeoTani/GeoOSS, --bg-secondary di GeoFarm. Efeknya
   kartu di panel yang sama terlihat berasal dari situs berbeda.

   Kelas-kelas lama (geotani-lbslsd-head, geotani-kta-summary,
   geofarm-card-head, geofarm-kalk-head) tidak lagi dipakai di markup dan
   aturannya dihapus, bukan dibiarkan jadi alias. Tidak ada satu pun
   referensi ke kelas itu dari JavaScript, dan alias yang tak terpakai
   hanya menambah tempat yang harus ikut dirawat saat temanya berubah. */
.gt-card-head {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 13px;
  background: var(--bg-card-active);
  border-bottom: 1px solid var(--border-color);
  cursor: pointer;
  list-style: none;
}
.gt-card-head::-webkit-details-marker { display: none; }
.gt-card-head::marker { content: ''; }
.gt-card-head:hover { background: var(--bg-card-hover); }
.gt-card-head:focus-visible {
  outline: 2px solid var(--accent); outline-offset: -2px;
}
.gt-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  font-size: 20px;
  line-height: 1;
}
.gt-card-head b {
  display: block; font-size: 13px; font-weight: 700;
  color: var(--text-primary);
}
.gt-card-head small {
  display: block; margin-top: 1px;
  font-size: 9.5px; font-weight: 500;
  color: var(--text-muted);
}
/* Chevron. Arahnya selalu menunjukkan aksi berikutnya: ke kanan saat
   terlipat, ke bawah saat terbuka. */
.gt-card-head::after {
  content: ''; flex: 0 0 auto; margin-left: auto;
  width: 8px; height: 8px;
  border-right: 1.6px solid var(--text-muted);
  border-bottom: 1.6px solid var(--text-muted);
  transform: rotate(45deg);
  transition: transform .18s ease;
}
/* Selector memakai details[open] > .gt-card-head, bukan .gt-card-head[open]:
   yang membawa atribut open adalah <details>, bukan <summary>. */
details[open] > .gt-card-head::after {
  transform: rotate(-135deg); margin-top: -4px;
}

.geotani-lbslsd-body { padding: 12px 13px; }
.geotani-lbslsd .geotani-btn-print { width: 100%; justify-content: center; }

/* Kartu GeoTani: isi disembunyikan eksplisit saat terlipat, mengikuti pola
   yang sudah dipakai .geofarm-guide di modul GeoFarm. Kepala dan chevron
   sudah ditangani oleh .gt-card-head di atas. */
.geotani-lbslsd:not([open]) > .geotani-lbslsd-body,
.geotani-kta-card:not([open]) > :not(.gt-card-head) { display: none; }

.geotani-lbslsd-summary {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 9px;
}
.geotani-lbslsd-summary > div {
  display: flex; flex-direction: column; gap: 2px;
  padding: 6px 8px; border-radius: 5px;
  background: var(--bg-input); border: 1px solid var(--border-color);
}
.geotani-lbslsd-summary span { font-size: 9px; color: var(--text-muted); }
.geotani-lbslsd-summary b { font-size: 12px; color: var(--accent-green); }
.geotani-lbslsd-layer { margin-top: 10px; }
.geotani-lbslsd-layer-head {
  display: flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 700; color: var(--text-primary);
}
.geotani-lbslsd-swatch {
  width: 10px; height: 10px; border-radius: 2px;
  border: 1px solid var(--border-color); flex: 0 0 auto;
}
.geotani-lbslsd-sub {
  margin-top: 3px; font-size: 10.5px; color: var(--text-secondary);
}
.geotani-lbslsd-note { color: var(--text-muted); font-size: 9.5px; }
.geotani-lbslsd-warn {
  margin-top: 7px; padding: 5px 7px;
  border: 1px solid #fbbf24; border-radius: 4px;
  background: #fffbeb; color: #92400e; font-size: 10px; line-height: 1.45;
}
.geotani-lbslsd-list {
  max-height: 190px; margin: 6px 0 0; padding: 0; overflow-y: auto;
  list-style: none; border: 1px solid var(--border-color); border-radius: 5px;
}
.geotani-lbslsd-list li {
  display: flex; align-items: baseline; gap: 8px;
  padding: 5px 8px; font-size: 10.5px; cursor: pointer;
  border-top: 1px solid var(--border-color);
}
.geotani-lbslsd-list li:first-child { border-top: 0; }
.geotani-lbslsd-list li:hover { background: var(--bg-card-hover); }
.geotani-lbslsd-list i { font-style: normal; font-size: 9px; color: var(--text-muted); }
/* GeoTani — KKPR: tab "Cari NIB" dan "Cari Nama Usaha".
   Dua panel, bukan dua kartu. Satu kartu dengan dua mode pencarian yang
   memakai tombol dan area hasil yang sama jauh lebih mudah dibandingkan
   daripada dua kartu terpisah -- dan perbandingan itu justru yang
   dibutuhkan di sini, karena kedua mode membaca layer berbeda.

   Bentuknya sudah mandiri: nav .geopangan-source-tab yang pernah jadi
   rujukan kelas ini sudah dihapus bersama panel GeoPangan, tapi nav
   GeoTani (KKPR/Trase) memang perlu tetap berdampingan dengan mode
   peta, jadi kelas .geotani-kkpr-tab tidak ikut dibubarkan. */
.geotani-kkpr-tab {
  display: flex; gap: 4px; margin: 8px 0 10px;
  border-bottom: 1px solid var(--border-color);
}
.geotani-kkpr-tab-btn {
  flex: 1 1 0; padding: 6px 8px; cursor: pointer;
  font-size: 11px; font-weight: 600; font-family: inherit;
  color: var(--text-muted); background: transparent;
  border: 1px solid transparent; border-bottom: none;
  border-radius: 5px 5px 0 0; margin-bottom: -1px;
}
.geotani-kkpr-tab-btn:hover { color: var(--text-primary); background: var(--bg-card-hover); }
.geotani-kkpr-tab-btn.is-active {
  color: var(--text-primary);
  background: var(--bg-card);
  border-color: var(--border-color);
  border-bottom: 1px solid var(--bg-card);
}
.geotani-kkpr-tab-btn:focus-visible {
  outline: 2px solid var(--accent); outline-offset: -2px;
}

/* Panel yang tidak aktif disembunyikan dua cara: hidden untuk browser
   dan display:none untuk CSS. Hanya hidden tidak cukup kalau ada aturan
   display lain yang lebih spesifik, dan hanya display:none tidak cukup
   untuk pembaca layar. */
.geotani-kkpr-panel[hidden] { display: none; }

/* Kredit BIG, ATR/BPN, dan KLHK: ketentuan masing-masing mewajibkan menyebut
   lembaga pemberi data dan tautan ke sumber aslinya.

   Tautannya teks biasa, bukan <a>, jadi butuh pemenggalan kata: URL KLHK
   (gis.bnpb.go.id/server/rest/services/thematic/PL_KLHK_2024/MapServer) dan
   URL GISTARU sama-sama panjang, sementara panel GeoTools hanya sekitar
   300 px. overflow-wrap mencegah URL meluber tanpa merusaknya sebagai teks
   yang masih bisa disalin utuh. */
.geotani-lbslsd-credit {
  margin-top: 8px; padding-top: 6px;
  border-top: 1px dashed var(--border-color);
  font-size: 9px; line-height: 1.5; color: var(--text-muted);
  overflow-wrap: anywhere; word-break: break-word;
}
[data-theme="dark"] .geotani-lbslsd-warn {
  border-color: #a16207; background: #451a03; color: #fcd34d;
}

/* Kartu "LSD 12 Provinsi" memakai kelas yang sama persis dengan kartu
   LBS & LSD di atas. Keduanya harus terlihat sama, dan menyalin aturan
   warna/jarak ke kelas baru hanya menghasilkan satu tempat yang harus
   ikut dirawat setiap tema berubah.

   Yang tetap perlu sendiri: tiga metrik ringkasan kartu ini tidak sama
   maknanya. Kartu LBS & LSD punya LBS, LSD, dan luas desa; kartu ini
   hanya punya satu angka sawah dilindungi, jadi tiga kolom akan terlihat
   seperti ada data yang hilang. Karena itu grid-nya tiga kolom tetap,
   tapi isinya hanya dua atau tiga nilai yang memang ada -- lihat
   listHtml() di geotani-lsd12prov.js. */

/* Rincian per kategori: hanya ada dua baris, jadi tidak perlu menggulir,
   dan barisnya bukan target klik sehingga tidak boleh terlihat seperti
   daftar yang bisa diklik. */
.geotani-lbslsd-list--ringkas { max-height: none; }
.geotani-lbslsd-list--ringkas li { cursor: default; }
.geotani-lbslsd-list--ringkas li:hover { background: transparent; }

/* ── Grafik & insight: Tutupan Lahan ──
   SVG-nya digambar sendiri oleh geotani-tutupan-lahan.js (pola yang sama
   dengan grafik tren GeoFarm), jadi yang didefinisikan di sini hanya
   warna dan ukuran. Tanpa max-height di blok manapun: tinggi grafik
   mengikuti jumlah batang, dan grafik yang dipotong diam-diam sama
   saja dengan menyembunyikan kelas. */

/* Isi lingkaran (donat). Dipakai lewat atribut fill per irisan, bukan
   lewat kelas, karena warnanya berbeda per kelas dan berasal dari warna
   yang sama dengan peta. */
.gt-grafik { display: block; width: 100%; height: auto; margin-top: 6px; overflow: visible; }
.gt-grafik-lingkar {
  fill: none; stroke: var(--border-color); stroke-width: 1;
}
/* Garis pemisah tipis antar iris supaya kelas kecil masih bisa dibedakan
   saat berdekatan. */
.gt-grafik-iris { stroke: var(--bg-card); stroke-width: 0.8; stroke-linejoin: round; }
.gt-grafik-donat {
  fill: var(--text-primary); font-size: 11px; font-weight: 700;
  paint-order: stroke; stroke: var(--bg-card); stroke-width: 2.5px;
}
.gt-grafik-ax { fill: var(--text-muted); font-size: 8px; }
.gt-grafik-kelas { fill: var(--text-secondary); font-size: 8.5px; }
.gt-grafik-nilai { font-size: 8.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.gt-grafik-grid { stroke: var(--border-color); stroke-width: 1; stroke-dasharray: 2 3; }

/* Warna batang mengikuti ARAH perubahan, bukan warna kelas.
   Warna kelas sudah dipakai di peta, di legenda, dan di tabel; kalau
   batang memakai warna yang sama, batang naik dan batang turun untuk satu
   kelas akan dibedakan oleh posisi saja -- dan posisi sulit dibaca saat
   batang pendek. Warna arah dipakai karena naik/turun adalah informasi
   yang dicari orang, sementara warna kelas sudah ada di tempat lain.

   Oranye dan biru, bukan hijau dan merah: hijau/merah dibaca sebagai
   bagus/buruk, padahal naik tutupan hutan dan naik tutupan permukiman
   bukan dua hal yang berlawanan. */
.gt-grafik-bar { opacity: .9; }
.gt-grafik-bar--naik { fill: #d97706; }
.gt-grafik-bar--turun { fill: #2563eb; }
.gt-grafik-bar--lainnya { fill: #94a3b8; opacity: .75; }
.gt-grafik-nilai.gt-grafik-bar--naik { fill: #b45309; }
.gt-grafik-nilai.gt-grafik-bar--turun { fill: #1d4ed8; }
.gt-grafik-nilai.gt-grafik-bar--lainnya { fill: var(--text-muted); }

/* Legenda satu baris per kelas, flowed. Bukan satu baris per kelas yang
   berurutan vertikal -- daftar 22 warna vertikal akan memaksa area
   menggulir, dan tidak ada yang bisa disimpulkan dari daftar itu selain
   "ada banyak kelas". */
.gt-legenda { display: flex; flex-wrap: wrap; gap: 3px 8px; margin-top: 6px; }
.gt-legenda-item {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 8.5px; color: var(--text-secondary); line-height: 1.4;
}
.gt-legenda-item i {
  width: 8px; height: 8px; border-radius: 2px; flex: 0 0 auto;
  border: 1px solid rgba(15, 23, 42, .18);
}

/* Insight: satu butir per temuan. `penting` dipakai untuk hal yang
   mengubah cara orang membaca seluruh angka di kartu ini -- kelas yang
   hilang, dan peta yang tidak sebanding -- bukan untuk yang terbesar saja. */
.gt-insight {
  margin-top: 9px; padding: 7px 8px;
  border: 1px solid var(--border-color); border-radius: 6px;
  background: var(--bg-primary);
}
.gt-insight-item {
  display: flex; align-items: flex-start; gap: 6px;
  font-size: 10px; line-height: 1.5; color: var(--text-secondary);
}
.gt-insight-item + .gt-insight-item {
  margin-top: 5px; padding-top: 5px;
  border-top: 1px dashed var(--border-color);
}
.gt-insight-item b { color: var(--text-primary); font-weight: 700; }
.gt-insight-ikon {
  flex: 0 0 auto; width: 14px; height: 14px; margin-top: 1px;
  display: grid; place-items: center;
  border-radius: 50%; font-size: 9px; font-weight: 700;
  background: var(--bg-card-hover); color: var(--text-muted);
}
.gt-insight-item--penting {
  color: var(--text-primary);
}
.gt-insight-item--penting .gt-insight-ikon {
  background: #fef3c7; color: #92400e;
}
[data-theme="dark"] .gt-grafik-iris { stroke: var(--bg-card); }
[data-theme="dark"] .gt-grafik-bar--naik { fill: #fbbf24; }
[data-theme="dark"] .gt-grafik-bar--turun { fill: #93c5fd; }
[data-theme="dark"] .gt-grafik-nilai.gt-grafik-bar--naik { fill: #fcd34d; }
[data-theme="dark"] .gt-grafik-nilai.gt-grafik-bar--turun { fill: #bfdbfe; }
[data-theme="dark"] .gt-insight-item--penting .gt-insight-ikon { background: #422006; color: #fde68a; }

/* Tabel perubahan 2020 -> 2024.

   Dibuat sebagai <table> sungguhan dengan <thead>, bukan daftar <ul>
   dengan label di kaki. Tiga kolom angka tanpa judul membuat "12,4 ha"
   di kolom kedua bisa berarti 2020 atau 2024, dan yang salah baca delta-nya
   salah arah -- jadi judul kolom harus melekat pada kolomnya.

   TIDAK memakai max-height atau overflow. Daftar kelas bisa 22 baris, dan
   daftar yang perlu digulir di dalam panel yang sudah punya daftar lain
   di atasnya hanya membuat panel terasa sempit tanpa menambah informasi;
   baris tabel ini pendek, jadi semuanya muat. Lebar kolom dikunci lewat
   .geotani-tutupan-ha dan .geotani-tutupan-delta supaya kelas dengan luas
   besar tidak mendorong kolom perubahan ke luar panel -- perubahan justru
   yang paling ingin dilihat, jadi itu yang harus terakhir hilang. */
.geotani-tutupan-tabel {
  width: 100%; margin-top: 6px;
  border-collapse: collapse; table-layout: fixed;
}
.geotani-tutupan-tabel th,
.geotani-tutupan-tabel td {
  padding: 4px 4px;
  border-bottom: 1px solid var(--border-color);
  font-size: 10px; vertical-align: baseline;
}
.geotani-tutupan-tabel thead th {
  padding-bottom: 5px;
  border-bottom: 1px solid var(--border-color);
  font-size: 8.5px; font-weight: 700; line-height: 1.3;
  color: var(--text-muted); text-align: left;
  text-transform: uppercase; letter-spacing: .04em;
}
.geotani-tutupan-tabel tbody th {
  font-weight: 400; text-align: left;
}
/* Sel kelas memuat swatch + nama dalam satu sel, jadi rata kiri dan
   boleh membungkus; kolom angka rata kanan dan tidak boleh membungkus. */
.geotani-tutupan-tabel tbody th > .geotani-lbslsd-swatch { margin-right: 5px; }
.geotani-tutupan-tabel .geotani-sls-name { display: inline; }
.geotani-tutupan-tabel tbody tr[data-tutupan-kelas] { cursor: pointer; }
.geotani-tutupan-tabel tbody tr[data-tutupan-kelas]:hover { background: var(--bg-card-hover); }
.geotani-tutupan-tabel tbody tr:last-child th,
.geotani-tutupan-tabel tbody tr:last-child td { border-bottom: none; }

.geotani-tutupan-ha {
  width: 62px; text-align: right; white-space: nowrap;
  color: var(--text-secondary); font-variant-numeric: tabular-nums;
}
.geotani-tutupan-delta {
  width: 68px; text-align: right; white-space: nowrap;
  font-weight: 700; font-variant-numeric: tabular-nums;
}
.geotani-tutupan-tabel thead .geotani-tutupan-ha,
.geotani-tutupan-tabel thead .geotani-tutupan-delta { text-align: right; }

/* Arah perubahan dibedakan warna, bukan hanya tanda plus dan minus. Tanda
   sudah ada di teks, jadi ini lapisan kedua untuk pembaca yang menangkap
   warna sebelum membaca. Hijau di kelas naik bisa disalahartikan sebagai
   hal bagus dan merah sebagai bahaya, padahal keduanya cuma arah --
   pertanian bisa naik atau turun tanpa itu berarti baik atau buruk. Jadi
   kedua warna dipilih netral dan sengaja tidak memakai hijau dan merah. */
.geotani-tutupan-delta--naik { color: #b45309; }
.geotani-tutupan-delta--turun { color: #1d4ed8; }
.geotani-tutupan-delta--nol { color: var(--text-muted); font-weight: 400; }

/* Catatan kelas hilang dari tahun terakhir diberi warna, bukan gaya miring:
   gaya miring dipakai juga untuk penanda "di luar daftar", jadi memakai
   bentuk yang sama membuat dua kondisi berbeda terlihat sama. */
.geotani-tutupan-tabel i { color: #b91c1c; font-style: normal; font-weight: 600; }
[data-theme="dark"] .geotani-tutupan-delta--naik { color: #fbbf24; }
[data-theme="dark"] .geotani-tutupan-delta--turun { color: #93c5fd; }
[data-theme="dark"] .geotani-tutupan-tabel i { color: #fca5a5; }

/* GeoTani Search */
.geotani-search-container { position: relative; }


    .geotani-search-input {
      width: 100%; padding: 9px 12px; border: 1px solid #bbf7d0; border-radius: 8px;
      font-size: 12px; background: #f0fdf4; outline: none; box-sizing: border-box;
      transition: border-color .2s;
    }
    .geotani-search-input:focus { border-color: #16a34a; background: #fff; box-shadow: 0 0 0 3px rgba(22,163,74,.12); }
    .geotani-autocomplete-list {
      position: absolute; top: calc(100% + 2px); left: 0; right: 0; z-index: 1005;
      display: none; max-height: 220px; overflow-y: auto; background: #fff;
      border: 1px solid #bbf7d0; border-radius: 8px; box-shadow: 0 7px 15px rgba(22,163,74,.13);
    }
    .geotani-ac-item {
      display: block; width: 100%; padding: 8px 10px; border: 0;
      border-bottom: 1px solid #dcfce7; background: #fff; color: #166534;
      cursor: pointer; font-size: 11px; text-align: left; line-height: 1.45;
    }
    .geotani-ac-item:last-child { border-bottom: 0; }
    .geotani-ac-item:hover { background: #f0fdf4; }
    .geotani-ac-item strong { font-size: 12px; color: #166534; display: block; margin-bottom: 2px; }
    .geotani-ac-item small { display: block; color: #16a34a; font-size: 9px; }

    /* Geotani Popup Insight */
    .geotani-section { margin-top: 10px; padding-top: 10px; border-top: 1px solid #dcfce7; }
    .geotani-section-title { font-size: 11px; font-weight: 700; color: #166534; margin-bottom: 8px; letter-spacing: .03em; }
    .geotani-insight-grid { display: flex; flex-direction: column; gap: 6px; }
    .geotani-card {
      display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto;
      gap: 0 8px; padding: 8px 10px; border-radius: 8px; border-left: 3px solid var(--card-accent, #16a34a);
      background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
      transition: transform .15s;
    }
    .geotani-card:hover { transform: translateX(2px); }
    .geotani-card-icon { grid-row: 1 / 3; font-size: 18px; display: flex; align-items: center; justify-content: center; width: 28px; }
    .geotani-card-info { display: flex; flex-direction: column; gap: 1px; }
    .geotani-card-label { font-size: 10px; font-weight: 700; color: #166534; }
    .geotani-card-luas { font-size: 13px; font-weight: 800; color: var(--card-accent, #16a34a); }
    .geotani-card-count { font-size: 9px; color: #668198; }
    .geotani-card-detail {
      grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px;
      padding-top: 4px; border-top: 1px dashed #bbf7d0;
    }
    .geotani-detail-item {
      font-size: 9px; color: #166534; background: #dcfce7; padding: 2px 6px;
      border-radius: 4px; white-space: nowrap;
    }
    .geotani-detail-item b { color: var(--card-accent, #16a34a); }
    .geotani-empty { text-align: center; padding: 12px 0; color: #668198; }
    .geotani-empty span { font-size: 20px; display: block; margin-bottom: 4px; }
    .geotani-empty small { font-size: 10px; }

    /* Alat Gambar & Ukur */
    /* Susun kartu Gambar dan Ukur & Kelola secara vertikal agar masing-masing
       memakai satu baris penuh pada panel GeoTools. */
    .alat-grid-2 { display: grid; grid-template-columns: 1fr; gap: 10px; }
    .alat-card {
      border: 1px solid #e8eef3; border-radius: 10px; background: #f8fbfe;
      overflow: hidden; transition: box-shadow .2s;
    }
    .alat-card:hover { box-shadow: 0 4px 12px rgba(8,63,102,.08); }
    .alat-card-header {
      display: flex; align-items: center; gap: 6px;
      padding: 8px 10px; background: #eef5fb; border-bottom: 1px solid #e0eaf3;
      font-size: 12px; font-weight: 600; color: #16466c;
    }
    .alat-card-header svg { color: #0879bf; flex-shrink: 0; }
    .alat-card-body {
      display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 8px;
    }
    .alat-btn-icon {
      display: flex; flex-direction: column; align-items: center; justify-content: center;
      gap: 4px; padding: 10px 4px; border: 1px solid #dce6ef; border-radius: 8px;
      background: #fff; color: #16466c; cursor: pointer; font-size: 10px;
      transition: all .15s;
    }
    .alat-btn-icon:hover { background: #e8f4fc; border-color: #0879bf; color: #0879bf; transform: translateY(-1px); }
    .alat-btn-icon svg { transition: color .15s; }
    .alat-btn-icon.alat-btn-danger { color: #c0392b; }
    .alat-btn-icon.alat-btn-danger:hover { background: #fdecea; border-color: #c0392b; }
    .alat-btn-icon.alat-btn-success { color: #16a085; }
    .alat-btn-icon.alat-btn-success:hover { background: #e8f8f5; border-color: #16a085; }
    .alat-measure-result {
      margin-top: 8px;
      padding: 9px 10px;
      border-radius: 8px;
      background: #eef7ff;
      color: #175a87;
      font-size: 11px;
      line-height: 1.5;
    }

    /* Geotools File Panels — Modern Style */
    #tab-geotools .geoid-subtab-panel.active {
      display: grid; grid-template-columns: 1fr; gap: 12px; padding-top: 4px;
    }
    .geotools-dropzone {
      display: flex; flex-direction: column; gap: 0;
      border: 2px dashed #cbd5e1; border-radius: 12px;
      background: #f8fafc; cursor: pointer;
      transition: all .2s ease; text-align: center;
      padding: 20px 14px 14px;
    }
    .geotools-dropzone:hover {
      border-color: #0891b2; background: #ecfeff;
    }
    .geotools-dropzone.dragover {
      border-color: #0891b2; background: #ecfeff;
      border-style: solid;
      box-shadow: 0 0 0 3px rgba(8,145,178,.12);
    }
    .geotools-dropzone-input { display: none; }
    .geotools-dropzone-content { display: flex; flex-direction: column; align-items: center; gap: 8px; }
    .geotools-dropzone-icon {
      width: 44px; height: 44px;
      display: flex; align-items: center; justify-content: center;
      border-radius: 12px;
      background: linear-gradient(135deg, #ecfeff 0%, #cffafe 100%);
      color: #0891b2;
      transition: transform .2s ease;
    }
    .geotools-dropzone:hover .geotools-dropzone-icon { transform: scale(1.05); }
    .geotools-dropzone-icon--green {
      background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
      color: #10b981;
    }
    .geotools-dropzone-icon--orange {
      background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%);
      color: #f97316;
    }
    .geotools-dropzone-text { font-size: 13px; font-weight: 600; color: #334155; }
    .geotools-dropzone-accept { font-size: 11px; color: #64748b; }
    .geotools-dropzone-filename {
      font-size: 11px; color: #94a3b8; margin-top: 10px;
      padding-top: 10px; border-top: 1px solid #e2e8f0;
      overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
      max-width: 100%;
    }
    .geotools-dropzone-filename.has-file { color: #0891b2; font-weight: 600; }
    .geotools-btn {
      width: 100%; height: 44px; padding: 0 16px; font-size: 13px; font-weight: 700;
      border-radius: 10px; display: flex; align-items: center; justify-content: center; gap: 8px;
      background: linear-gradient(135deg, #0891b2 0%, #0e7490 100%);
      color: #fff; border: none; cursor: pointer;
      box-shadow: 0 2px 8px rgba(8,145,178,.25);
      transition: all .2s ease;
      text-align: center;
      line-height: 1;
      white-space: nowrap;
      overflow: hidden;
      box-sizing: border-box;
      flex-direction: row;
    }
    .geotools-btn svg {
      order: -1;
      flex-shrink: 0;
    }
    .geotools-btn:hover { 
      box-shadow: 0 4px 16px rgba(8,145,178,.35); 
      transform: translateY(-1px); 
    }
    .geotools-btn:active {
      transform: translateY(0);
      box-shadow: 0 2px 8px rgba(8,145,178,.25);
    }
    .geotools-btn--green { 
      background: linear-gradient(135deg, #10b981 0%, #059669 100%);
      box-shadow: 0 2px 8px rgba(16,185,129,.25);
    }
    .geotools-btn--green:hover { 
      box-shadow: 0 4px 16px rgba(16,185,129,.35); 
    }
    .geotools-btn--orange { 
      background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
      box-shadow: 0 2px 8px rgba(249,115,22,.25);
    }
    .geotools-btn--orange:hover { 
      box-shadow: 0 4px 16px rgba(249,115,22,.35); 
    }
    .gp-tools-card .geotools-btn,
    .gp-action-btn {
      width: 100%; height: 38px; min-height: 38px; padding: 0 12px;
      border-radius: 6px; font-size: 11px; line-height: 1.2;
    }
    .gp-result-actions {
      display: flex; flex-direction: column; gap: 6px; margin-top: 8px;
    }
    .gp-layer-checklist {
      display: grid;
      gap: 2px;
      max-height: 180px;
      margin: 4px 0 10px;
      padding: 5px 7px;
      overflow: auto;
      border: 1px solid #cbd5e1;
      border-radius: 7px;
      background: var(--bg-card, #fff);
    }
    .gp-layer-checklist label {
      display: flex;
      align-items: flex-start;
      gap: 7px;
      padding: 4px 2px;
      color: var(--text-primary, #334155);
      font-size: 11px;
      line-height: 1.35;
      cursor: pointer;
    }
    .gp-layer-checklist input { flex: 0 0 auto; margin: 1px 0 0; }
    .gp-merge-source-option { display: flex; align-items: center; gap: 7px; margin: 8px 0; color: var(--text-secondary, #475569); font-size: 11px; }

    .arcgis-source-action-btn {
      min-height: 32px;
      height: 32px;
      padding: 0 10px;
      border-radius: 7px;
      font-size: 10px;
    }
    .arcgis-source-action-btn.is-loading {
      position: relative;
      color: transparent;
    }
    .arcgis-source-action-btn.is-loading::after {
      content: '';
      position: absolute;
      width: 13px;
      height: 13px;
      border: 2px solid rgba(255,255,255,.45);
      border-top-color: #fff;
      border-radius: 50%;
      animation: arcgis-source-spin .7s linear infinite;
    }
    #arcgisDiscoverBtn:disabled { cursor: wait; opacity: .78; }
    .arcgis-tree-loading {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      min-height: 42px;
      padding: 8px;
      color: var(--text-muted);
      font-size: 9px;
    }
    .arcgis-tree-loading--inline { justify-content: flex-start; min-height: 24px; padding: 4px 6px; }
    .arcgis-tree-spinner {
      width: 13px;
      height: 13px;
      flex: 0 0 13px;
      border: 2px solid var(--border-color);
      border-top-color: var(--accent);
      border-radius: 50%;
      animation: arcgis-source-spin .7s linear infinite;
    }
    @keyframes arcgis-source-spin { to { transform: rotate(360deg); } }

    /* ══ KARTU SHEET ALAT ═════════════════════════════════════════════
       Sheet Alat (panel GeoData) punya empat kartu: ArcGIS REST Source,
       Layer Dimuat, Tabel Atribut, dan Animasi Track. Semuanya tadinya
       memakai angka dan hex sendiri -- padding 12px di dalam kartu,
       pita kepala 8px 10px dengan latar #eef5fb, garis #e8eef3, judul
       #16466c 12px/600, badan #f8fbfe. Akibatnya kartu itu terlihat
       berasal dari panel lain, dan tidak satu pun punya aturan
       [data-theme="dark"]: di tema gelap kartunya tetap putih kebiruan.

       Sekarang keempatnya memakai template kartu GeoTools yang sama
       dengan GeoFarm: cangkang .alat-card, pita .alat-card-head, badan
       .alat-card-body, dan ikon .gt-card-icon yang sudah dipakai puluhan
       kartu di panel lain. Angkanya disalin dari .gt-card-head dan
       .geofarm-card-body apa adanya (padding 11px 13px, judul 13px/700,
       subjudul 9.5px, badan 12px 13px, jarak antar kartu 10px) dan
       warnanya diambil dari token yang sama, jadi kartu Alat dan GeoFarm
       tidak bisa lagi berbeda hanya karena satu angka keliru.

       Kelas modul yang lama (arcgis-source-card, alat-layer-card-wrap,
       arcgis-attribute-panel, alat-anim-card) dihapus, bukan dibiarkan
       jadi alias: tidak ada satu pun referensi dari JavaScript, dan alias
       yang tak terpakai hanya menambah tempat yang harus ikut dirawat
       setiap kali temanya berubah. Yang tetap adalah kelas isi
       (.arcgis-layer-tree, .alat-layer-list, .arcgis-attribute-table),
       karena itu isi modul, bukan kerangka kartu.

       Berbeda dengan .gt-card-head, pita di sini tidak punya chevron dan
       tidak bisa diklik: keempat kartu ini bukan <details>. Karena itu
       .gt-card-head tidak dipakai ulang -- chevron-nya akan jadi tanda
       yang tidak berguna -- dan nilai yang sama ditulis sekali di
       .alat-card-head. */
    .alat-card {
      margin-top: 10px;
      padding: 0;
      overflow: hidden;
      border: 1px solid var(--border-color);
      border-radius: 10px;
      background: var(--bg-card);
    }
    /* Kartu pertama dalam wadahnya tidak menambah jarak: jarak menuju
       kartu itu datang dari isi panel, sama seperti kartu pertama di
       tab GeoFarm. */
    .alat-card:first-child { margin-top: 0; }
    .alat-card-head {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 11px 13px;
      background: var(--bg-card-active);
      border-bottom: 1px solid var(--border-color);
    }
    /* Judul boleh menyusut supaya judul panjang di sidebar sempit tidak
       mendorong kontrol kanan (pita PUBLIC, dropdown layer) keluar.
       .gt-card-head::after sudah pakai margin-left:auto; di sini kontrol
       kanan itu elemen asli, jadi span judul yang lebih lebar yang
       merebut ruang sisa. Pita PUBLIC dikecualikan karena bukan judul:
       kalau ikut fleksibel, pita itu ikut melebar. */
    .alat-card-head > span:not(.gt-card-icon):not(.arcgis-source-badge) { flex: 1 1 auto; min-width: 0; }
    .alat-card-head b {
      display: block; font-size: 13px; font-weight: 700;
      color: var(--text-primary);
    }
    .alat-card-head small {
      display: block; margin-top: 1px;
      font-size: 9.5px; font-weight: 500;
      color: var(--text-muted);
    }
    .alat-card-body { display: block; padding: 12px 13px; }
    .arcgis-flow-step {
      display: flex;
      align-items: flex-start;
      gap: 9px;
      margin: 2px 0 10px;
    }
    .arcgis-flow-step--next {
      margin-top: 14px;
      padding-top: 12px;
      border-top: 1px solid var(--border-color);
    }
    .arcgis-flow-number {
      display: grid;
      flex: 0 0 22px;
      width: 22px;
      height: 22px;
      place-items: center;
      border-radius: 50%;
      background: rgba(8, 145, 178, .12);
      color: var(--accent);
      font-size: 10px;
      font-weight: 800;
    }
    .arcgis-flow-step b,
    .arcgis-flow-step small { display: block; }
    .arcgis-flow-step b { padding-top: 1px; color: var(--text-primary); font-size: 11px; }
    .arcgis-flow-step small { margin-top: 2px; color: var(--text-muted); font-size: 9px; line-height: 1.45; }
    #arcgisLayerTree:empty::after {
      display: block;
      padding: 12px 8px;
      border: 1px dashed var(--border-color);
      border-radius: 8px;
      color: var(--text-muted);
      font-size: 9px;
      line-height: 1.5;
      text-align: center;
      content: 'Folder dan layer akan muncul di sini setelah pencarian.';
    }
    /* Ikon: .gt-card-icon sudah memberi kotak 20px yang sama dengan kartu
       GeoFarm. Yang hilang di sini hanya warna -- template memakai emoji
       berwarna sendiri, jadi SVG satu warna paling dekat dengan itu lewat
       aksen tema, bukan biru hex yang tidak gelap. */
    .alat-card-head .gt-card-icon svg { width: 17px; height: 17px; color: var(--accent); }

    .arcgis-source-badge {
      flex: 0 0 auto;
      margin-left: auto;
      padding: 3px 6px;
      border-radius: 4px;
      background: #ecfdf5;
      color: #047857;
      font-size: 8px;
      font-weight: 700;
      letter-spacing: .04em;
    }
    .arcgis-source-toolbar {
      display: flex;
      align-items: center;
      gap: 8px;
      margin: 10px 0 6px;
      color: var(--text-secondary);
      font-size: 10px;
    }
    .arcgis-source-toolbar > span { flex: 1; }
    .geoserver-actions { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; margin-top: 8px; }
    .geoserver-actions .arcgis-source-action-btn { width: 100%; }
    #geoserverCancelBtn[hidden] { display: none; }
    #geoserverStatus { margin: 8px 0 0; line-height: 1.45; overflow-wrap: anywhere; }
    #geoserverStatus[hidden] { display: none; }
    .arcgis-layer-tree {
      max-height: 25vh;
      overflow: auto;
      padding: 6px;
      border: 1px solid var(--border-color);
      border-radius: 8px;
      background: var(--bg-primary);
      scrollbar-width: thin;
    }
    .arcgis-tree-group { margin: 0; }
    .arcgis-tree-group summary {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 6px 5px;
      border-radius: 5px;
      color: var(--text-primary);
      cursor: pointer;
      font-size: 10px;
      list-style: none;
    }
    .arcgis-tree-group summary::-webkit-details-marker { display: none; }
    .arcgis-tree-group summary::before { content: '\25B8'; color: var(--text-muted); font-size: 10px; }
    .arcgis-tree-group[open] > summary::before { content: '\25BE'; }
    .arcgis-tree-group summary:hover { background: var(--bg-card-hover); }
    .arcgis-tree-summary-title { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
    .arcgis-tree-meta { color: var(--text-muted); font-size: 8px; white-space: nowrap; }
    .arcgis-tree-children { margin-left: 10px; padding-left: 8px; border-left: 1px solid var(--border-color); }
    .arcgis-tree-leaf {
      display: grid;
      grid-template-columns: 16px minmax(0,1fr) auto;
      align-items: center;
      gap: 5px;
      padding: 5px 4px;
      border-radius: 4px;
      color: var(--text-secondary);
      font-size: 10px;
    }
    .arcgis-tree-leaf:hover { background: var(--bg-card-hover); }
    .arcgis-tree-leaf input { width: 13px; height: 13px; margin: 0; accent-color: var(--accent); }
    .arcgis-tree-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .arcgis-tree-type { color: var(--text-muted); font-size: 8px; }
    .arcgis-tree-leaf--disabled { color: var(--text-muted); cursor: default; }
    .arcgis-tree-empty { padding: 12px 4px; color: var(--text-muted); font-size: 10px; text-align: center; }
    .arcgis-popup { min-width: 240px; color: #1e293b; font-family: 'Segoe UI', system-ui, sans-serif; }
    .arcgis-popup-title { padding: 10px 12px 4px; color: #16466c; font-size: 12px; font-weight: 700; }
    .arcgis-popup-source { padding: 0 12px 8px; color: #7895aa; font-size: 9px; }
    .arcgis-popup-body { max-height: 300px; overflow: auto; padding: 0 12px 10px; }
    .arcgis-popup-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 4px 0; border-top: 1px solid #edf2f5; font-size: 10px; }
    .arcgis-popup-row span { color: #7895aa; }
    .arcgis-popup-row strong { max-width: 58%; color: #315b78; font-weight: 600; text-align: right; overflow-wrap: anywhere; }
    .arcgis-leaflet-popup .leaflet-popup-content { margin: 0; }

    /* Export GeoTIFF Petadasar — di bawah Quick Layer Bar */
    .petadasar-export-block {
      position: absolute;
      top: 108px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 999;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
      width: max-content;
      max-width: calc(100% - 32px);
      box-sizing: border-box;
    }
    .petadasar-export-block .geotools-btn {
      width: auto;
      min-width: 0;
      max-width: 100%;
      height: 34px;
      padding: 0 14px;
      font-size: 12px;
      border-radius: 999px;
      box-shadow: 0 2px 8px rgba(8,145,178,.28), 0 1px 3px rgba(0,0,0,.08);
      background: rgba(8, 145, 178, .95);
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
    }
    .petadasar-export-block .geotools-btn:disabled {
      opacity: .7;
      cursor: wait;
      transform: none;
      box-shadow: 0 2px 8px rgba(8,145,178,.25);
    }
    .petadasar-export-block .geotools-btn:hover {
      background: #0891b2;
      box-shadow: 0 4px 14px rgba(8,145,178,.35);
    }
    .petadasar-tiff-status {
      margin-bottom: 0;
      padding: 8px 10px;
      font-size: 11px;
      border-radius: 10px;
      box-shadow: 0 1px 4px rgba(0,0,0,.08);
    }
    .petadasar-tiff-hint {
      font-size: 11px;
      color: #475569;
      text-align: center;
      line-height: 1.4;
      text-shadow: 0 1px 2px rgba(255,255,255,.8);
    }
    .petadasar-tiff-status--error {
      color: #b91c1c;
      background: #fef2f2;
    }

    /* Export GeoTIFF Persil Nasional — menempel di bawah blok Petadasar
       (top 108px = baris quick layer). Hanya digeser turun ~44px bila blok
       Petadasar ikut tampil agar keduanya tidak tumpang tindih. */
    .petadasar-export-block.persil-tiff-export-block {
      top: 108px;
    }
    body.petadasar-tiff-tampil .petadasar-export-block.persil-tiff-export-block {
      top: 152px;
    }
    .petadasar-export-block.persil-tiff-export-block .geotools-btn {
      background: rgba(22, 163, 74, .95);
      box-shadow: 0 2px 8px rgba(22,163,74,.28), 0 1px 3px rgba(0,0,0,.08);
    }
    .petadasar-export-block.persil-tiff-export-block .geotools-btn:disabled {
      box-shadow: 0 2px 8px rgba(22,163,74,.25);
    }
    .petadasar-export-block.persil-tiff-export-block .geotools-btn:hover {
      background: #16a34a;
      box-shadow: 0 4px 14px rgba(22,163,74,.35);
    }

    /* Selama katalog layer terbuka, blok export disembunyikan: dropdown
       katalog menempel dari unified-search (z-index 1000) ke bawah, sedangkan
       blok export mobile z-index 99998 sehingga menutupi daftar layer.
       Pola yang sama dengan aturan body.*-sheet-open di bawah. */
    body.layer-catalog-open .petadasar-export-block {
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.25s ease;
    }

    /* Timeline Steps */
    .geotools-steps {
      padding: 12px 14px; border: 1px solid #e2e8f0; border-radius: 10px;
      background: #f8fafc;
    }
    .geotools-steps-title { font-size: 12px; font-weight: 700; color: #0f172a; margin-bottom: 10px; }
    .geotools-step {
      display: flex; align-items: flex-start; gap: 10px; padding: 6px 0;
      font-size: 12px; color: #475569; line-height: 1.5;
    }
    .geotools-step-num {
      flex-shrink: 0; width: 20px; height: 20px;
      display: flex; align-items: center; justify-content: center;
      border-radius: 50%; 
      background: linear-gradient(135deg, #ecfeff 0%, #cffafe 100%); 
      color: #0891b2;
      font-size: 11px; font-weight: 700;
      border: 1px solid #a5f3fc;
    }
    .alat-file-hint { color: #668198; font-size: 10px; line-height: 1.35; }

    /* Alat Analisis GeoJSON/SHP */
    .alat-file-input {
      width: 100%;
      padding: 8px;
      font-size: 11px;
      border: 1px solid #ccc;
      border-radius: 6px;
      background: #fff;
    }
    .alat-layer-info {
      margin: 8px 0;
      font-size: 11px;
      color: var(--text-secondary);
    }
    #alatStatus { margin-top: 10px; }
    #alatStatus:empty { display: none; }
    /* Layer Dimuat, Tabel Atribut, dan Animasi Track memakai cangkang
       .alat-card dan pita .alat-card-head di blok "KARTU SHEET ALAT".
       Yang tersisa di sini hanya isi modulnya. */
    #arcgisAttributePanel[hidden] { display: none; }
    .arcgis-attribute-select {
      flex: 0 1 auto;
      min-width: 0;
      max-width: 58%;
      margin-left: auto;
      padding: 5px 7px;
      border: 1px solid var(--border-color);
      border-radius: 6px;
      background: var(--bg-primary);
      color: var(--text-primary);
      font-size: 10px;
    }
    .arcgis-attribute-select:focus { outline: none; border-color: var(--accent); }
    .arcgis-attribute-status {
      padding: 0 0 6px;
      color: var(--text-secondary);
      font-size: 10px;
      line-height: 1.45;
      overflow-wrap: anywhere;
    }
    .arcgis-attribute-status:empty { display: none; }
    .arcgis-attribute-table { overflow: visible; }
    .arcgis-attribute-tools {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      gap: 8px;
      margin: 0 0 8px;
    }
    .arcgis-attribute-tools label { display: grid; gap: 3px; min-width: 0; color: var(--text-muted); font-size: 8px; }
    .arcgis-attribute-tools select,
    .arcgis-attribute-tools input {
      box-sizing: border-box;
      width: 100%;
      min-width: 0;
      height: 30px;
      padding: 5px 7px;
      border: 1px solid var(--border-color);
      border-radius: 6px;
      background: var(--bg-primary);
      color: var(--text-primary);
      font: inherit;
      font-size: 9px;
    }
    .arcgis-attribute-tools select:focus,
    .arcgis-attribute-tools input:focus { outline: none; border-color: var(--accent); }
    /* Tabelnya diberi kotak sendiri: badannya sudah berpadding kartu, dan
       tanpa garis batas tabel putih akan menyatu dengan kartu putih. */
    .arcgis-attribute-scroll {
      max-height: 260px;
      overflow: auto;
      border: 1px solid var(--border-color);
      border-radius: 8px;
      background: var(--bg-primary);
    }
    .arcgis-attribute-pagination {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 6px 8px;
      border-top: 1px solid var(--border-color);
      background: var(--bg-secondary);
      color: var(--text-secondary);
      font-size: 10px;
    }
    .arcgis-attribute-pagination button {
      display: grid;
      width: 24px;
      height: 24px;
      place-items: center;
      border: 1px solid var(--border-color);
      border-radius: 6px;
      background: var(--bg-primary);
      color: var(--accent);
      cursor: pointer;
      font-size: 16px;
      line-height: 1;
    }
    .arcgis-attribute-pagination button:hover:not(:disabled) { background: var(--bg-card-hover); }
    .arcgis-attribute-pagination button:disabled { opacity: .45; cursor: not-allowed; }
    .arcgis-attribute-table table {
      width: max-content;
      min-width: 100%;
      border-collapse: collapse;
      font-size: 9px;
    }
    .arcgis-attribute-table th,
    .arcgis-attribute-table td {
      max-width: 220px;
      padding: 6px 8px;
      border-bottom: 1px solid var(--border-color);
      border-right: 1px solid var(--border-secondary);
      white-space: nowrap;
      text-align: left;
    }
    .arcgis-attribute-table th {
      position: sticky;
      top: 0;
      z-index: 1;
      background: var(--bg-secondary);
      color: var(--text-secondary);
      font-weight: 600;
    }
    .arcgis-attribute-table td {
      max-width: 220px;
      overflow: hidden;
      color: var(--text-secondary);
      text-overflow: ellipsis;
    }
    .arcgis-attribute-table tbody tr[data-arcgis-feature-index] { cursor: pointer; }
    .arcgis-attribute-table tbody tr[data-arcgis-feature-index]:hover,
    .arcgis-attribute-table tbody tr[data-arcgis-feature-index]:focus { outline: none; background: var(--bg-card-hover); }
    .arcgis-attribute-empty,
    .arcgis-attribute-loading {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      min-height: 70px;
      padding: 12px;
      color: var(--text-muted);
      font-size: 10px;
      text-align: center;
    }
    .arcgis-attribute-spinner {
      width: 13px;
      height: 13px;
      border: 2px solid var(--border-color);
      border-top-color: var(--accent);
      border-radius: 50%;
      animation: arcgis-attribute-spin .7s linear infinite;
    }
    @keyframes arcgis-attribute-spin { to { transform: rotate(360deg); } }
    /* Daftar layer yang sudah dimuat. Badannya memakai .alat-card-body, jadi
       padding kartu (12px 13px) tidak lagi ditulis dua kali di sini. */
    .alat-layer-list {
      display: grid; grid-template-columns: minmax(0, 1fr); align-items: stretch;
      box-sizing: border-box; width: 100%; min-width: 0;
      gap: 6px; min-height: 64px; max-height: 220px; overflow-y: auto;
    }
    .alat-layer-list:empty::after {
      content: 'Belum ada layer dimuat.';
      display: grid; place-items: center; box-sizing: border-box; width: 100%; min-height: 64px;
      padding: 8px 10px; font-size: 11px; color: var(--text-muted); text-align: center;
    }
    .alat-layer-card {
      display: grid; grid-template-columns: minmax(0, 1fr); gap: 7px; align-items: start;
      grid-column: 1 / -1; justify-self: stretch;
      box-sizing: border-box; width: 100%; min-width: 0;
      padding: 10px; border: 1px solid var(--border-color); border-radius: 9px;
      background: var(--bg-primary); transition: box-shadow .15s;
    }
    .alat-layer-card:hover { box-shadow: var(--shadow-card); }
    .alat-layer-card strong {
      min-width: 0; color: var(--text-primary);
      font-size: 12px; line-height: 1.45; white-space: normal; overflow-wrap: anywhere;
    }
    .alat-layer-card small { min-width: 0; color: var(--text-secondary); font-size: 10px; line-height: 1.4; overflow-wrap: anywhere; }
    .alat-layer-card-btns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; width: 100%; }
    .alat-layer-card-btns button {
      display: inline-flex; align-items: center; justify-content: center; gap: 4px;
      min-width: 0; min-height: 30px; padding: 5px 7px; border: 1px solid var(--border-color); border-radius: 6px;
      background: var(--bg-primary); color: var(--text-secondary); cursor: pointer; font-size: 10px; transition: all .15s;
    }
    .alat-layer-card-btns button:hover { background: var(--bg-card-hover); border-color: var(--accent); color: var(--accent); }
    .alat-layer-card-btns .alat-export-btn { grid-column: 1 / -1; color: var(--accent); border-color: var(--border-color); }
    .alat-layer-card-btns .alat-export-btn:hover { border-color: var(--accent); }
    .alat-layer-card-btns button:disabled { opacity: .65; cursor: wait; }
    .alat-layer-card-btns .alat-remove-btn { color: var(--accent-danger); border-color: var(--border-color); }
    .alat-layer-card-btns .alat-remove-btn:hover { background: var(--bg-card-hover); border-color: var(--accent-danger); color: var(--accent-danger); }
    .alat-btn-clear {
      display: flex; align-items: center; justify-content: center; gap: 6px;
      width: 100%; margin-top: 10px; padding: 8px; background: var(--accent-danger);
      border: none; border-radius: 8px; color: var(--text-inverse); font-size: 11px;
      font-weight: 600; cursor: pointer; transition: filter .15s;
    }
    /* Hover pakai filter, bukan hex gelap: --accent-danger berubah nilainya
       antara tema, jadi warna hover yang ditulis manual akan salah di salah
       satu tema. --text-inverse ikut berubah juga, jadi teks tombol tetap
       terbaca di tema gelap. */
    .alat-btn-clear:hover { filter: brightness(.92); }
    /* GPX Track Animation. Kartunya berada di panel peta, bukan di sheet,
       tapi tetap memakai template yang sama supaya tidak terlihat
       seperti milik modul lain. */
    .alat-anim-select {
      display: block; width: 100%; min-width: 0; max-width: 100%; height: 36px; padding: 6px 10px; margin-bottom: 8px;
      border: 1px solid var(--border-color); border-radius: 8px; font-size: 11px;
      background: var(--bg-primary); color: var(--text-primary); box-sizing: border-box; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .alat-anim-select:focus { outline: none; border-color: var(--accent); }
    .gpx-anim-bar { display: flex; align-items: center; gap: 6px; }
    .alat-anim-btn {
      display: inline-flex; align-items: center; gap: 4px;
      padding: 6px 12px; border: 1px solid var(--border-color); border-radius: 8px;
      background: var(--bg-primary); color: var(--text-primary); font-size: 11px; font-weight: 600;
      cursor: pointer; transition: all .15s; white-space: nowrap;
    }
    .alat-anim-btn:hover { background: var(--bg-card-hover); border-color: var(--accent); color: var(--accent); }
    .alat-anim-btn-danger { color: var(--accent-danger); border-color: var(--border-color); }
    .alat-anim-btn-danger:hover { background: var(--bg-card-hover); border-color: var(--accent-danger); color: var(--accent-danger); }
    .alat-anim-speed {
      width: auto; min-width: 0; height: 32px; padding: 2px 4px;
      border: 1px solid var(--border-color); border-radius: 6px; font-size: 10px;
      background: var(--bg-primary); color: var(--text-primary);
    }
    .gpx-anim-progress-wrap { flex: 1; min-width: 0; overflow: hidden; }
    .gpx-anim-slider {
      width: 100%; height: 6px; -webkit-appearance: none; appearance: none;
      background: #d5e3f0; border-radius: 3px; outline: none; cursor: pointer;
    }
    .gpx-anim-slider::-webkit-slider-thumb {
      -webkit-appearance: none; width: 14px; height: 14px; border-radius: 50%;
      background: #0879bf; border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.25); cursor: pointer;
    }
    .gpx-anim-slider::-moz-range-thumb {
      width: 14px; height: 14px; border-radius: 50%;
      background: #0879bf; border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.25); cursor: pointer;
    }
    .gpx-anim-info { margin-top: 8px; font-size: 11px; color: var(--text-secondary); line-height: 1.5; }
    /* Marker animasi modern (dot berdenyut) */
    .gpx-anim-dot { background: transparent; border: 0; }
    .gpx-anim-dot-inner {
      display: block; width: 14px; height: 14px; border-radius: 50%;
      background: #2563eb; border: 2px solid #fff;
      box-shadow: 0 0 0 2px rgba(37,99,235,.35);
      animation: gpxAnimPulse 1.5s cubic-bezier(.4,0,.6,1) infinite;
    }
    @keyframes gpxAnimPulse {
      0%   { box-shadow: 0 0 0 0 rgba(37,99,235,.55); }
      70%  { box-shadow: 0 0 0 12px rgba(37,99,235,0); }
      100% { box-shadow: 0 0 0 0 rgba(37,99,235,0); }
    }
    /* Spinner export MP4 transparan */
    .gpx-export-spinner {
      display: none; position: absolute; inset: 0; z-index: 9999;
      background: rgba(15,23,42,.45);
      align-items: center; justify-content: center;
      backdrop-filter: blur(2px);
    }
    .gpx-export-spinner.active { display: flex; }
    .gpx-export-spinner-inner {
      display: flex; flex-direction: column; align-items: center; gap: 12px;
      background: rgba(255,255,255,.92); border-radius: 14px;
      padding: 28px 36px; box-shadow: 0 8px 32px rgba(0,0,0,.18);
    }
    .gpx-export-spinner-svg {
      width: 44px; height: 44px; color: #2563eb;
      animation: gpxExportSpin .8s linear infinite;
    }
    .gpx-export-spinner-text {
      font-size: 13px; font-weight: 600; color: #1e293b;
    }
    @keyframes gpxExportSpin {
      to { transform: rotate(360deg); }
    }
    /* Layer WMS point (marker cluster) — popup gaya CCTV */
    .gp-point-icon {
      background: transparent;
      border: 0;
    }
    .gp-point-leaflet-popup .leaflet-popup-content-wrapper,
    .alat-leaflet-popup .leaflet-popup-content-wrapper {
      overflow: hidden;
      padding: 0;
      margin: 0;
      border-radius: 12px;
      box-shadow: 0 12px 30px rgba(11, 54, 87, .25);
    }
    .gp-point-leaflet-popup .leaflet-popup-content,
    .alat-leaflet-popup .leaflet-popup-content {
      width: auto !important;
      margin: 0;
    }
    .gp-point-leaflet-popup .leaflet-popup-tip,
    .alat-leaflet-popup .leaflet-popup-tip {
      box-shadow: 0 12px 30px rgba(11, 54, 87, .25);
    }
    .gp-point-popup,
    .alat-popup {
      min-width: 250px;
      max-height: 200px;
      overflow-y: auto;
      color: #173d5f;
      font-family: 'Segoe UI', sans-serif;
      font-size: 11px;
    }
    .gp-point-popup.agol-popup {
      display: flex;
      flex-direction: column;
      width: 320px;
      max-width: min(320px, calc(100vw - 48px));
      max-height: min(360px, 55vh);
      overflow: hidden;
      border-radius: 12px;
      box-shadow: none;
    }
    .gp-point-popup .agol-popup-header {
      position: sticky;
      top: 0;
      z-index: 2;
      flex: 0 0 auto;
    }
    .gp-point-popup .agol-popup-body {
      min-height: 0;
      overflow-y: auto;
    }
    .gp-point-popup > strong,
    .alat-popup > strong {
      position: sticky;
      top: 0;
      z-index: 1;
      display: block;
      overflow: hidden;
      padding: 10px 14px;
      color: #fff;
      background: linear-gradient(90deg, #0879bf, #11a4cb);
      border-radius: 12px 12px 0 0;
      font-size: 13px;
      font-weight: 700;
      line-height: 1.2;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    /* Close button: mencuat di luar pojok kanan atas popup */
    .gp-point-leaflet-popup .leaflet-popup-close-button {
      position: absolute;
      top: -11px;
      right: -11px;
      width: 26px;
      height: 26px;
      padding: 0;
      display: grid;
      place-items: center;
      font: 700 16px/1 'Segoe UI', sans-serif;
      opacity: 1;
      z-index: 5;
      cursor: pointer;
    }
    .gp-point-popup-row,
    .alat-popup-row {
      display: flex;
      justify-content: space-between;
      gap: 12px;
      padding: 8px 12px;
      border-bottom: 1px solid #eef3f8;
    }
    .gp-point-popup-row:last-child,
    .alat-popup-row:last-child {
      border-bottom: 0;
    }
    .gp-point-popup-row b,
    .alat-popup-row b {
      color: #6a8498;
      font-weight: 600;
      white-space: nowrap;
    }
    .gp-point-popup-row span,
    .alat-popup-row span {
      color: #173d5f;
      text-align: right;
      overflow-wrap: anywhere;
    }

    /* Geoportal */
    .geoportal-category {
      margin-top: 13px;
      max-height: 200px;
      overflow: hidden;
      display: flex;
      flex-direction: column;
    }
    .geoportal-category:first-of-type { margin-top: 0; }
    .geoportal-category h5 { margin: 0 0 7px; color: #336583; font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
    .geoportal-filters {
      display: grid;
      gap: 7px;
      overflow-y: auto;
      padding-right: 4px;
      min-height: 0;
      scrollbar-width: thin;
      scrollbar-color: #b7c7d6 transparent;
    }
    .geoportal-filters::-webkit-scrollbar { width: 5px; }
    .geoportal-filters::-webkit-scrollbar-thumb { border-radius: 999px; background: #b7c7d6; }
    .geoportal-filter { display: flex; align-items: center; gap: 8px; padding: 9px; border: 1px solid #e1ebf2; border-radius: 9px; background: #fff; color: #234b6d; cursor: pointer; font-size: 11px; }
    .geoportal-filter input[type="checkbox"] {position:relative;top: 0;}
    .geoportal-filter:hover { border-color: #70b9dd; background: #f3faff; }
    .geoportal-filter input { accent-color: #0879bf; }
    .query-box label.geoportal-filter { display: flex; align-items: center; gap: 8px; }
    .geoportal-swatch { width: 10px; height: 10px; border-radius: 3px; }
    .geo-admin { background: #6a72c8; }.geo-education { background: #f0ad33; }.geo-health { background: #db5871; }.geo-transport { background: #36a978; }.geo-boundary { background: #648098; }
    .geoportal-source { margin: 11px 0 0; color: #73879a; font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: right; }
    
    /* Geoportal Header */
    .geoportal-sticky-header {
      background: #fff;
      padding: 0 0 8px;
      margin-left: -15px; margin-right: -15px;
      padding-left: 15px; padding-right: 15px;
      border-bottom: 1px solid #e8eef3;
      flex-shrink: 0;
    }
    .geoportal-search-container { position: relative; }
    .geoportal-search-input {
      width: 100%; padding: 10px 14px; border: 1px solid #e1ebf2; border-radius: 9px;
      background: #fff; font-size: 12px; color: #234b6d; outline: none;
      transition: border-color .2s, box-shadow .2s;
    }
    .geoportal-search-input:focus { border-color: #70b9dd; box-shadow: 0 0 0 3px rgba(112,185,221,.15); }
    .geoportal-search-input::placeholder { color: #9fb3c8; }
    .geoportal-autocomplete-list {
      display: none; position: absolute; top: 100%; left: 0; right: 0; z-index: 20;
      max-height: 240px; overflow-y: auto; margin-top: 4px;
      background: #fff; border: 1px solid #e1ebf2; border-radius: 9px;
      box-shadow: 0 4px 16px rgba(0,0,0,.1);
    }
    .geoportal-autocomplete-list.active { display: block; }
    .geoportal-autocomplete-item {
      display: flex; align-items: center; gap: 8px; padding: 9px 12px;
      cursor: pointer; font-size: 11px; color: #234b6d; border-bottom: 1px solid #f0f4f7;
      transition: background .15s;
    }
    .geoportal-autocomplete-item:last-child { border-bottom: none; }
    .geoportal-autocomplete-item:hover { background: #f3faff; }
    .geoportal-autocomplete-item.active { background: #e8f4fd; }
    .geoportal-autocomplete-label { flex: 1; }
    .geoportal-autocomplete-category { 
      font-size: 9px; color: #73879a; background: #f0f4f7; 
      padding: 2px 6px; border-radius: 4px; white-space: nowrap; 
    }
    .geoportal-search-input-wrapper { position: relative; }
    .geoportal-search-input-wrapper .search-icon {
      position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
      color: #9fb3c8; font-size: 14px; pointer-events: none;
    }
    .geoportal-search-input.with-icon { padding-left: 32px; }

    /* jsTree tweaks — minimal, keep default theme */
    #geoportalLayerList { flex: 1; overflow-y: auto; min-height: 0; }
    #geoportalLayerList .jstree-container-ul { padding: 0; margin: 0; }
    #geoportalLayerList .jstree-node { padding-left: 8px; }
    #geoportalLayerList .jstree-anchor { line-height: 1.5; font-size: 12px; }
    #geoportalLayerList .jstree-node[data-level="0"] > .jstree-anchor { font-weight: 700; font-size: 13px; }
    .layer-count-badge {
      display: inline-block; min-width: 18px; height: 16px; line-height: 16px;
      text-align: center; font-size: 9px; font-weight: 700;
      color: #fff; background: #5b7fa5; border-radius: 8px; margin-left: 6px; padding: 0 4px;
    }
    
    .geoportal-modal { position: fixed; inset: 0; z-index: 3000; display: none; align-items: center; justify-content: center; padding: 18px; background: rgba(3, 19, 34, .68); backdrop-filter: blur(6px); }
    .geoportal-modal.open { display: flex; }
    .geoportal-modal-dialog { display: flex; flex-direction: column; width: min(860px, 100%); max-height: min(86vh, 640px); max-height: min(86dvh, 640px); overflow: hidden; border: 1px solid rgba(255, 255, 255, .24); border-radius: 16px; background: #fff; box-shadow: 0 22px 64px rgba(0, 0, 0, .45); }
    .geoportal-modal-head { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 16px; color: #fff; background: linear-gradient(135deg, #0b5cab, #0879bf 58%, #12a7c8); }
    .geoportal-modal-title { display: flex; align-items: center; gap: 10px; min-width: 0; }
    .geoportal-modal-icon { display: grid; flex: 0 0 auto; width: 34px; height: 34px; place-items: center; border-radius: 10px; background: rgba(255, 255, 255, .16); font-size: 16px; }
    .geoportal-modal-caption { min-width: 0; }
    .geoportal-modal-caption strong { display: block; overflow: hidden; font-size: 14px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
    .geoportal-modal-caption small { display: block; margin-top: 2px; color: rgba(255, 255, 255, .82); font-size: 10px; }
    .geoportal-modal-close { flex: 0 0 auto; width: 32px; height: 32px; border: 0; border-radius: 50%; color: #fff; background: rgba(255, 255, 255, .16); cursor: pointer; font-size: 18px; line-height: 1; transition: background .2s ease, transform .2s ease; }
    .geoportal-modal-close:hover { background: rgba(255, 255, 255, .32); transform: rotate(90deg); }
    .geoportal-modal-body { flex: 1; min-height: 0; overflow-y: auto; padding: 14px; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #b7c7d6 transparent; }
    .geoportal-modal-body::-webkit-scrollbar { width: 6px; }
    .geoportal-modal-body::-webkit-scrollbar-thumb { border-radius: 999px; background: #b7c7d6; }
    @media (max-width: 768px) {
      .geoportal-modal { align-items: flex-end; padding: 0; }
      .geoportal-modal-dialog { width: 100%; max-width: none; max-height: 86vh; max-height: 86dvh; border-right: 0; border-bottom: 0; border-left: 0; border-radius: 16px 16px 0 0; }
    }
    .geoportal-properties { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; align-content: start; }
    .geoportal-properties h4 { grid-column: 1 / -1; margin: 3px 0 0; color: #0879bf; font-size: 14px; }
    .geoportal-properties .geoportal-feature-card { width: 100%; max-width: none; max-height: none; overflow: hidden; border: 1px solid var(--border-color); border-radius: 0; box-shadow: none; }
    .geoportal-feature-card .agol-popup-body { padding: 0; }

    /* Sawah Popup */
    .sawah-popup { font-family: 'Google Sans', 'Segoe UI', sans-serif; }
    .sawah-popup-header {
      background: linear-gradient(135deg, #2d7a2d, #4caf50);
      color: #fff; padding: 12px 14px; border-radius: 10px 10px 0 0;
    }
    .sawah-popup-header strong { font-size: 14px; font-weight: 600; }
    .sawah-popup-body { padding: 10px 14px; background: #fff; }
    .sawah-popup-row {
      display: flex; justify-content: space-between; align-items: center;
      padding: 6px 0; border-bottom: 1px solid #f0f4f7; font-size: 12px;
    }
    .sawah-popup-row:last-child { border-bottom: none; }
    .sawah-popup-row span { color: #4a6580; }
    .sawah-popup-row b { font-weight: 600; color: #1e293b; text-align: right; max-width: 60%; }
    .sawah-leaflet-popup .leaflet-popup-content-wrapper { border-radius: 12px; padding: 0; overflow: hidden; box-shadow: 0 4px 20px rgba(0,0,0,.15); }
    .sawah-leaflet-popup .leaflet-popup-content { margin: 0; width: 320px; }
    .geoportal-loading { grid-column: 1 / -1; display: grid; justify-items: center; gap: 12px; padding: 40px 14px; color: #668198; text-align: center; }
    .geoportal-loading p { font-size: 12px; font-weight: 600; color: #234b6d; }
    .geoportal-spinner { width: 34px; height: 34px; border: 3px solid #d7e6f2; border-top-color: #0879bf; border-radius: 50%; animation: geoportal-spin .8s linear infinite; }
    @keyframes geoportal-spin { to { transform: rotate(360deg); } }
    .btn-spinner { display: inline-block; width: 16px; height: 16px; border: 2px solid rgba(255,255,255,.4); border-top-color: #fff; border-radius: 50%; animation: geoportal-spin .7s linear infinite; vertical-align: middle; }
    .geoportal-card { min-width: 0; overflow: hidden; border: 1px solid #e3ecf4; border-radius: 12px; background: #fff; box-shadow: 0 4px 14px rgba(19, 59, 92, .06); }
    .geoportal-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 11px; background: linear-gradient(135deg, #f2f9ff, #e8f2fa); border-bottom: 1px solid #e3ecf4; }
    .geoportal-card-head strong { overflow: hidden; color: #0f5fa8; font-size: 11px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
    .geoportal-card-head span { flex: 0 0 auto; padding: 2px 7px; border-radius: 99px; color: #0879bf; background: #dceefb; font-size: 9px; font-weight: 600; }
    .geoportal-property-list { display: grid; gap: 0; padding: 4px 11px 8px; }
    .geoportal-prop { display: grid; grid-template-columns: minmax(130px, 30%) minmax(0, 1fr); gap: 10px; padding: 7px 0; border-bottom: 1px dashed #e9f0f6; align-items: baseline; }
    .geoportal-prop:last-child { border-bottom: 0; }
    .geoportal-prop label { color: #7a90a4; font-size: 9px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; }
    .geoportal-prop p { overflow-wrap: anywhere; word-break: break-word; color: #173b5d; font-size: 11px; font-weight: 600; line-height: 1.45; }
    .geoportal-no-prop { padding: 10px 2px; color: #7a90a4; font-size: 10px; }
    .geoportal-empty { grid-column: 1 / -1; display: grid; justify-items: center; gap: 6px; padding: 28px 14px; border: 1px dashed #cfdeea; border-radius: 12px; background: #f7fafc; color: #668198; text-align: center; }
    .geoportal-empty span { font-size: 26px; }
    .geoportal-empty p { color: #234b6d; font-size: 12px; font-weight: 600; }
    .geoportal-empty small { font-size: 10px; }
    .cctv-modal { position: fixed; inset: 0; z-index: 3000; display: none; align-items: center; justify-content: center; padding: 18px; background: rgba(3,19,34,.68); backdrop-filter: blur(6px); }
    .cctv-modal.open { display: flex; }
    .cctv-modal-dialog { width: min(860px, 100%); overflow: hidden; border: 1px solid rgba(255,255,255,.24); border-radius: 15px; background: rgba(11,33,51,.93); box-shadow: 0 20px 60px rgba(0,0,0,.45); }
    .cctv-modal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 14px; color: #fff; }
    .cctv-modal-head strong { overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
    .cctv-modal-close { width: 29px; height: 29px; border: 0; border-radius: 50%; color: #fff; background: rgba(255,255,255,.14); cursor: pointer; font-size: 18px; }
    .cctv-player { display: none; width: 100%; aspect-ratio: 16 / 9; border: 0; background: #000; }
    .cctv-player.active { display: block; }
    .cctv-image-player { object-fit: contain; }

    .leaflet-control-reset-zoom {
      background-color: var(--bg-card);
      border: 2px solid var(--border-color);
      border-radius: 4px;
      cursor: pointer;
      width: 30px;
      height: 30px;
      line-height: 26px;
      text-align: center;
      font-weight: bold;
      font-size: 14px;
      box-shadow: 0 1px 5px rgba(0,0,0,0.4);
      color: var(--text-primary);
    }
    
    .leaflet-control-reset-zoom:hover {
      background-color: var(--bg-card-hover);
    }

    /* Location Permission Modal */
    .location-modal-overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.5);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 10000;
      animation: fadeIn 0.3s ease;
    }
    .location-modal {
      background: var(--bg-glass);
      backdrop-filter: blur(20px) saturate(180%);
      -webkit-backdrop-filter: blur(20px) saturate(180%);
      border: 1px solid var(--border-color);
      border-radius: 24px;
      padding: 32px;
      max-width: 360px;
      width: calc(100% - 48px);
      text-align: center;
      box-shadow: 0 24px 80px rgba(0, 0, 0, 0.15), 0 8px 24px rgba(0, 0, 0, 0.1);
      animation: slideUp 0.4s cubic-bezier(0.16, 1, 0.3, 1);
      color: var(--text-primary);
    }
    .location-modal-icon {
      width: 80px;
      height: 80px;
      margin: 0 auto 20px;
      background: linear-gradient(135deg, var(--bg-tertiary) 0%, var(--bg-card-hover) 100%);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--accent);
      animation: pulse 2s infinite;
    }
    .location-modal-title {
      font-size: 20px;
      font-weight: 700;
      color: var(--text-primary);
      margin: 0 0 8px;
      font-family: 'Google Sans', 'Segoe UI', sans-serif;
    }
    .location-modal-desc {
      font-size: 14px;
      color: var(--text-tertiary);
      line-height: 1.5;
      margin: 0 0 24px;
    }
    .location-modal-actions {
      display: flex;
      gap: 12px;
      margin-bottom: 24px;
    }
    .location-modal-btn {
      flex: 1;
      padding: 12px 20px;
      border: none;
      border-radius: 12px;
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.2s ease;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
    }
    .location-modal-btn-primary {
      background: linear-gradient(135deg, #0284c7 0%, #0ea5e9 100%);
      color: white;
      box-shadow: 0 4px 12px rgba(2, 132, 199, 0.3);
    }
    .location-modal-btn-primary:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 20px rgba(2, 132, 199, 0.4);
    }
    .location-modal-btn-secondary {
      background: var(--bg-tertiary);
      color: var(--text-secondary);
    }
    .location-modal-btn-secondary:hover {
      background: var(--border-color);
    }
    .location-modal-features {
      display: flex;
      justify-content: center;
      gap: 16px;
      padding-top: 16px;
      border-top: 1px solid #e2e8f0;
    }
    .location-modal-feature {
      font-size: 11px;
      color: #64748b;
      display: flex;
      align-items: center;
      gap: 4px;
    }
    .location-modal-feature span {
      font-size: 14px;
    }
    @keyframes fadeIn {
      from { opacity: 0; }
      to { opacity: 1; }
    }
    @keyframes slideUp {
      from { opacity: 0; transform: translateY(20px) scale(0.95); }
      to { opacity: 1; transform: translateY(0) scale(1); }
    }
    @keyframes pulse {
      0%, 100% { transform: scale(1); }
      50% { transform: scale(1.05); }
    }

    .leaflet-control-scale {
      background: var(--bg-glass);
      border: none;
      box-shadow: 0 2px 8px rgba(0,0,0,0.18);
      border-radius:5px;
      padding: 3px 4px;
      left: 4px;
      bottom: 4px;
      font-family: "Avenir Next", "Segoe UI", sans-serif;
      font-size: 9px;
      color: var(--text-primary);
      line-height: 1.4;
      backdrop-filter: blur(4px);
      z-index: 999;
    }

    /* Floating Draw Toolbar — FAB Style */
    .leaflet-draw-toolbar-wrap {
      display: none !important;
    }
    .draw-fab-wrap {
      position: relative;
      margin: 0 !important;
      overflow: visible;
    }
    .draw-fab-btn {
      display: grid;
      place-items: center;
      width: 38px !important;
      height: 38px !important;
      margin: 0 !important;
      border: 1px solid var(--border-color) !important;
      border-radius: 50% !important;
      background: var(--bg-card) !important;
      color: var(--accent) !important;
      font-size: 18px;
      cursor: pointer;
      box-shadow: 0 6px 18px rgba(8,63,102,.2) !important;
      transition: transform .2s, box-shadow .2s, background .2s;
      position: relative;
      z-index: 1001;
      padding: 0;
    }
    .draw-fab-btn:hover {
      background: var(--bg-card-hover) !important;
      box-shadow: inset 0 0 0 1px var(--accent);
      transform: translateY(-2px);
    }
    .draw-fab-btn.active {
      background: var(--accent) !important;
      color: var(--text-inverse) !important;
      transform: scale(0.95);
    }
    /* Draw control + Actions (Clear All / Export) — satu kotak tunggal, gaya modern GIS 2026 */
    .leaflet-draw {
      background: #fff;
      border: 2px solid rgba(0, 0, 0, .2);
      border-radius: 4px;
      box-shadow: 0 1px 2px rgba(15, 23, 42, .12), 0 6px 16px rgba(15, 23, 42, .10);
    }
    .leaflet-draw .leaflet-draw-toolbar {
      margin-top: 0;
      border: 0;
      border-radius: 0;
      background: transparent;
      box-shadow: none;
    }
    .leaflet-draw .leaflet-draw-toolbar a {
      box-sizing: border-box;
      border: 0;
      border-bottom: 1px solid rgba(0, 0, 0, .12);
      border-radius: 0;
      background-color: #fff;
      transition: background-color .16s ease;
    }
    .leaflet-draw .leaflet-draw-toolbar a:first-child,
    .leaflet-draw .leaflet-draw-toolbar a:last-child { border-radius: 0; }
    .leaflet-draw .leaflet-draw-toolbar a:hover { background-color: #f4f4f4; }
    .leaflet-draw .leaflet-draw-toolbar a.leaflet-disabled,
    .leaflet-draw .leaflet-draw-toolbar a.leaflet-disabled:hover { background-color: #f4f4f4; }
    .leaflet-draw > .leaflet-draw-section:last-child .leaflet-draw-toolbar a:last-child {
      border-bottom: 0;
      border-radius: 0 0 2px 2px;
    }
    .draw-actions-wrap {
      display: flex;
      flex-direction: column;
      align-items: stretch;
      gap: 0;
      margin: 0;
      padding: 0;
      background: transparent;
      border: 0;
      border-radius: 0;
      box-shadow: none;
      position: relative;
      z-index: auto;
    }
    .leaflet-draw > .draw-actions-wrap .draw-actions-btn:first-child { border-radius: 2px 2px 0 0; }
    .draw-actions-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      box-sizing: border-box;
      width: 30px;
      height: 30px;
      padding: 0;
      margin: 0;
      border: 0;
      border-bottom: 1px solid rgba(0, 0, 0, .12);
      border-radius: 0;
      background: #fff;
      color: #1f2937;
      font-family: "Avenir Next", "Segoe UI", sans-serif;
      font-size: 11px;
      font-weight: 700;
      line-height: 1;
      letter-spacing: .01em;
      white-space: nowrap;
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
      transition: background-color .16s ease, color .16s ease;
    }
    .draw-actions-label { display: none; }
    .draw-actions-btn svg {
      width: 16px;
      height: 16px;
      flex: none;
      transition: transform .16s ease;
    }
    .draw-actions-btn:hover {
      background: #f4f4f4;
      color: var(--accent);
    }
    .draw-actions-btn:hover svg { transform: scale(1.08); }
    .draw-actions-btn:active { background: #e8eaed; }
    .draw-actions-btn:focus-visible {
      outline: 2px solid #0891b2;
      outline-offset: -2px;
    }
    .draw-actions-btn.geojson:hover { background: #dcfce7; color: #16a34a; }
    .draw-actions-btn.shp:hover { background: #e0f2fe; color: #0284c7; }
    [data-theme="dark"] .draw-actions-btn:focus-visible { outline-color: #22d3ee; }
    body.draw-chrome-hidden .draw-actions-wrap,
    body.draw-chrome-hidden .leaflet-draw { display: none; }

    /* Draw chrome (Export GeoJSON / Export SHP / Hapus Semua) disembunyikan
       di MOBILE selama sheet Gambar & Ukur mengembang.

       Kenapa perlu: syncDrawChrome() di alat-draw-measure.js sengaja
       melepas body.draw-chrome-hidden begitu sheet dibuka -- itu memang
       niatnya, agar chrome gambar ikut tampil bersama sheetnya. Masalahnya
       di mobile: sheet memakan ~50dvh, dan tepi bawah kotak peta berada
       --map-chrome di belakang sheet, sehingga kontrol kiri-bawah ikut
       terangkat sebesar `80px + var(--map-chrome)` (lihat aturan
       body.sheet-terbuka .leaflet-bottom.leaflet-left). Kalau peta hanya
       setinggi pita bebas, kotak ini terdorong ke atas sampai menabrak
       unified search yang menempel di top:14px.

       Di desktop TIDAK disembunyikan: peta masih utuh, dan kotaknya muat
       rapi di kiri-bawah tanpa menabrak apa pun. */

    @media (max-width: 768px) {
      body.dm-sidebar-open:not(.dm-sidebar-minimized):not(.geofarm-draw-active) .leaflet-draw,
      body.dm-sidebar-open:not(.dm-sidebar-minimized):not(.geofarm-draw-active) .draw-actions-wrap {
        display: none !important;
      }
    }
    .leaflet-control-scale-line {
      border-color: var(--text-secondary);
      border-width: 1px 0 0 0;
      border-style: solid;
      padding-top: 2px;
      margin-top: 2px;
      color: var(--text-secondary);
      font-size: 9px;
      font-weight: 500;
      text-align: center;
    }
    .leaflet-control-scale-line:not(:first-child) {
      border-top-width: 1px;
      border-bottom: none;
      margin-top: 1px;
      padding-top: 1px;
    }

    /* ── AirVisual Legend ── */
    .airvisual-legend.leaflet-bar {
      background: rgba(255,255,255,.96);
      border: 1px solid #e2e8f0;
      border-radius: 10px;
      box-shadow: 0 6px 20px rgba(15,23,42,.16);
      padding: 8px 10px;
      min-width: 200px;
      max-width: 240px;
      max-height: 260px;
      overflow-y: auto;
      font-family: inherit;
    }
    .airvisual-legend-title {
      font-size: 11px;
      font-weight: 700;
      color: var(--text-primary);
      text-transform: uppercase;
      letter-spacing: .04em;
      border-bottom: 1px solid var(--border-color);
      padding-bottom: 5px;
      margin-bottom: 6px;
    }
    .airvisual-legend-items {
      display: flex;
      flex-direction: column;
      gap: 3px;
    }
    .airvisual-legend-item {
      display: flex;
      align-items: center;
      gap: 7px;
    }
    .airvisual-legend-swatch {
      flex: none;
      width: 12px;
      height: 12px;
      border-radius: 3px;
      background: #64748b;
      display: inline-block;
      border: 1px solid rgba(0,0,0,0.1);
    }
    .airvisual-legend-label {
      font-size: 10.5px;
      line-height: 1.35;
      color: #475569;
      word-break: break-word;
    }

    /* ── OMI Legend ── */
    .omi-legend.leaflet-bar {
      background: rgba(255,255,255,.96);
      border: 1px solid #e2e8f0;
      border-radius: 10px;
      box-shadow: 0 6px 20px rgba(15,23,42,.16);
      padding: 8px 10px;
      min-width: 200px;
      max-width: 300px;
      font-family: inherit;
    }
    .omi-legend-title {
      font-size: 11px;
      font-weight: 700;
      color: var(--text-primary);
      text-transform: uppercase;
      letter-spacing: .04em;
      border-bottom: 1px solid var(--border-color);
      padding-bottom: 5px;
      margin-bottom: 6px;
    }
    .omi-legend-img {
      display: block;
      width: 100%;
      height: auto;
      border-radius: 4px;
    }

    /* ==================== WELCOME FEATURE MODAL ==================== */
    .welcome-modal {
      position: fixed; inset: 0; z-index: 4000;
      display: none; align-items: center; justify-content: center;
      padding: 18px;
      background: rgba(15, 23, 42, .25);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      animation: welcome-modal-fade-in .35s ease;
    }
    .welcome-modal.open { display: flex; }

    @keyframes welcome-modal-fade-in {
      from { opacity: 0; }
      to { opacity: 1; }
    }

    .welcome-modal-dialog {
      display: flex; flex-direction: column;
      width: min(680px, 100%);
      max-height: min(85vh, 700px);
      max-height: min(85dvh, 700px);
      overflow: hidden;
      border: 1px solid var(--border-color);
      border-radius: 20px;
      background: var(--bg-primary);
      box-shadow: 0 8px 40px rgba(0, 0, 0, .12), 0 1px 3px rgba(0, 0, 0, .06);
      animation: welcome-modal-slide-up .4s cubic-bezier(.22, 1, .36, 1);
      color: var(--text-primary);
    }

    @keyframes welcome-modal-slide-up {
      from { opacity: 0; transform: translateY(28px) scale(.97); }
      to { opacity: 1; transform: translateY(0) scale(1); }
    }

    /* -- Header -- */
    .welcome-modal-header {
      flex: 0 0 auto;
      display: flex; flex-direction: column; align-items: center;
      padding: 28px 24px 20px;
      background: linear-gradient(180deg, var(--bg-tertiary) 0%, var(--bg-secondary) 50%, var(--bg-primary) 100%);
      text-align: center;
      border-bottom: 1px solid var(--border-color);
    }
    .welcome-modal-mark {
      display: grid; grid-template-columns: repeat(2, 18px); grid-template-rows: repeat(2, 18px);
      gap: 4px; padding: 8px; border: 1.5px solid #0879bf; border-radius: 14px;
      transform: rotate(-8deg); margin-bottom: 12px;
    }
    .welcome-modal-mark i { border-radius: 5px; }
    .welcome-modal-mark i:nth-child(1) { background: #0879bf; }
    .welcome-modal-mark i:nth-child(2) { background: #f4c329; }
    .welcome-modal-mark i:nth-child(3) { background: #68dce5; }
    .welcome-modal-mark i:nth-child(4) { background: #bce7ed; }
    .welcome-modal-title {
      font-size: 18px; font-weight: 700; color: var(--text-primary); letter-spacing: .01em;
      margin-bottom: 4px;
    }
    .welcome-modal-title span { color: var(--accent); }
    .welcome-modal-subtitle {
      font-size: 12px; color: var(--text-tertiary); font-weight: 400;
    }

    /* -- Body -- */
    .welcome-modal-body {
      flex: 1; min-height: 0; overflow-y: auto;
      padding: 20px 22px 18px;
      overscroll-behavior: contain;
      scrollbar-width: thin;
      scrollbar-color: var(--scrollbar-thumb) transparent;
    }
    .welcome-modal-body::-webkit-scrollbar { width: 5px; }
    .welcome-modal-body::-webkit-scrollbar-thumb { border-radius: 999px; background: var(--scrollbar-thumb); }

    /* -- Features Grid -- */
    .welcome-features-label {
      font-size: 10px; font-weight: 700; color: var(--text-muted); letter-spacing: .06em;
      text-transform: uppercase; margin-bottom: 10px;
    }
    .welcome-features-grid {
      display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
      margin-bottom: 20px;
    }
    .welcome-feature-card {
      display: flex; align-items: flex-start; gap: 12px;
      padding: 14px;
      border: 1px solid var(--border-color);
      border-radius: 12px;
      background: var(--bg-card);
      transition: border-color .2s, box-shadow .2s, transform .2s;
      cursor: default;
    }
    .welcome-feature-card:hover {
      border-color: var(--accent);
      box-shadow: 0 4px 16px rgba(8, 121, 191, .08);
      transform: translateY(-1px);
    }
    .welcome-feature-icon {
      flex: 0 0 auto;
      display: grid; place-items: center;
      width: 42px; height: 42px;
      border-radius: 10px;
      font-size: 20px;
    }
    .welcome-feature-icon.icon-geoid { background: var(--bg-tertiary); }
    .welcome-feature-icon.icon-satellite { background: linear-gradient(135deg, var(--bg-tertiary), var(--bg-card-hover)); }
    .welcome-feature-icon.icon-geotani { background: var(--bg-tertiary); }
    .welcome-feature-icon.icon-geoportal { background: var(--bg-tertiary); }
    .welcome-feature-icon.icon-geowatch { background: var(--bg-tertiary); }
    .welcome-feature-icon.icon-geowx { background: var(--bg-tertiary); }
    .welcome-feature-icon.icon-geoquake { background: var(--bg-tertiary); }
    .welcome-feature-icon.icon-tools { background: var(--bg-tertiary); }
    .welcome-feature-info { min-width: 0; }
    .welcome-feature-name {
      font-size: 13px; font-weight: 700; color: var(--text-primary);
      margin-bottom: 2px;
    }
    .welcome-feature-desc {
      font-size: 11px; color: var(--text-tertiary); line-height: 1.4;
    }

    /* -- Highlighted feature (full-width) -- */
    .welcome-feature-card.highlighted {
      grid-column: 1 / -1;
      background: linear-gradient(135deg, var(--bg-tertiary), var(--bg-card-hover));
      border-color: var(--accent);
    }

    /* -- Tech Badges -- */
    .welcome-tech-label {
      font-size: 10px; font-weight: 700; color: var(--text-muted); letter-spacing: .06em;
      text-transform: uppercase; margin-bottom: 8px;
    }
    .welcome-tech-badges {
      display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 20px;
    }
    .welcome-tech-badge {
      display: inline-flex; align-items: center; gap: 4px;
      padding: 4px 10px;
      font-size: 10px; font-weight: 600; color: var(--text-secondary);
      background: var(--bg-tertiary);
      border: 1px solid var(--border-color);
      border-radius: 999px;
      white-space: nowrap;
    }
    .welcome-tech-badge i {
      display: inline-block; width: 6px; height: 6px;
      border-radius: 50%; background: var(--text-muted);
    }

    /* -- Footer -- */
    .welcome-modal-footer {
      flex: 0 0 auto;
      display: flex; align-items: center; justify-content: center; gap: 10px;
      padding: 16px 22px;
      border-top: 1px solid var(--border-color);
      background: var(--bg-secondary);
    }
    .welcome-btn {
      display: inline-flex; align-items: center; justify-content: center; gap: 8px;
      padding: 10px 22px;
      font-size: 13px; font-weight: 600;
      border: none; border-radius: 10px;
      cursor: pointer;
      transition: background .2s, box-shadow .2s, transform .15s;
      text-decoration: none;
      white-space: nowrap;
    }
    .welcome-btn:active { transform: scale(.97); }
    .welcome-btn-primary {
      background: linear-gradient(135deg, #0879bf, #0b5cab);
      color: #fff;
      box-shadow: 0 2px 8px rgba(8, 121, 191, .3);
    }
    .welcome-btn-primary:hover {
      background: linear-gradient(135deg, #0b5cab, #074a8f);
      box-shadow: 0 4px 14px rgba(8, 121, 191, .4);
    }
    .welcome-btn-secondary {
      background: var(--bg-card);
      color: var(--accent);
      border: 1.5px solid var(--border-color);
    }
    .welcome-btn-secondary:hover {
      background: var(--bg-card-hover);
      border-color: var(--accent);
    }
    .welcome-btn svg { flex-shrink: 0; }

    /* -- Mobile -- */
    @media (max-width: 600px) {
      .welcome-modal { padding: 10px; }
      .welcome-modal-dialog {
        max-height: min(92dvh, 700px);
        border-radius: 16px;
      }
      .welcome-modal-header { padding: 22px 16px 16px; }
      .welcome-modal-title { font-size: 16px; }
      .welcome-modal-body { padding: 14px 16px 12px; }
      .welcome-features-grid { grid-template-columns: 1fr; gap: 8px; }
      .welcome-modal-footer { flex-direction: column; gap: 8px; padding: 14px 16px; }
      .welcome-btn { width: 100%; }





      .panel-header {
        padding: 12px 15px;
        background: #0078d4;
        color: white;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-top-left-radius: 15px;
        border-top-right-radius: 15px;
      }
    }

/* ══ Pernyataan dan Penafian (disclaimer) ══
       Muncul setelah modal welcome. Berbeda dari welcome, modal ini tidak
       punya tombol tutup: satu-satunya jalan keluar adalah tombol terima,
       dan tombol itu terkunci sampai kotak persetujuan dicentang. Jadi
       tidak ada jalan menutup penafian tanpa menyatakan diterima.
       hidden dipakai (bukan display:none di CSS) supaya elemen benar-benar
       dikeluarkan dari accessibility tree sebelum sempat tampil. */
    .disclaimer-modal {
      position: fixed; inset: 0; z-index: 4100;
      display: none; align-items: center; justify-content: center;
      padding: 18px;
      background: rgba(15, 23, 42, .45);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
    }
    .disclaimer-modal[hidden] { display: none; }
    .disclaimer-modal.open { display: flex; animation: disclaimer-fade-in .3s ease; }
    @keyframes disclaimer-fade-in { from { opacity: 0; } to { opacity: 1; } }

    .disclaimer-modal-dialog {
      display: flex; flex-direction: column;
      width: min(640px, 100%);
      max-height: min(88vh, 760px);
      max-height: min(88dvh, 760px);
      overflow: hidden;
      border: 1px solid var(--border-color);
      border-radius: 18px;
      background: var(--bg-primary);
      box-shadow: 0 12px 48px rgba(0, 0, 0, .2);
      animation: disclaimer-slide-up .34s cubic-bezier(.22, 1, .36, 1);
      color: var(--text-primary);
    }
    @keyframes disclaimer-slide-up {
      from { transform: translateY(18px) scale(.98); opacity: 0; }
      to { transform: translateY(0) scale(1); opacity: 1; }
    }

    .disclaimer-modal-header {
      flex: 0 0 auto;
      display: flex; flex-direction: column; align-items: center;
      padding: 24px 24px 18px;
      background: linear-gradient(180deg, #fef3c7 0%, var(--bg-secondary) 70%, var(--bg-primary) 100%);
      text-align: center;
      border-bottom: 1px solid var(--border-color);
    }
    [data-theme="dark"] .disclaimer-modal-header {
      background: linear-gradient(180deg, #422006 0%, var(--bg-secondary) 70%, var(--bg-primary) 100%);
    }
    .disclaimer-modal-icon {
      display: grid; place-items: center;
      width: 48px; height: 48px; margin-bottom: 12px;
      border-radius: 50%;
      background: #fef3c7; color: #b45309;
    }
    [data-theme="dark"] .disclaimer-modal-icon { background: #78350f; color: #fcd34d; }
    .disclaimer-modal-title {
      margin: 0 0 6px;
      font-size: 19px; font-weight: 700; letter-spacing: -.01em;
    }
    .disclaimer-modal-subtitle {
      margin: 0; max-width: 46ch;
      font-size: 12.5px; line-height: 1.55; color: var(--text-secondary);
    }
    .disclaimer-brand { font-weight: 700; color: var(--accent); }

    .disclaimer-modal-body {
      flex: 1 1 auto; min-height: 0; overflow-y: auto;
      padding: 18px 22px;
      overscroll-behavior: contain;
      scrollbar-width: thin;
      scrollbar-color: var(--scrollbar-thumb) transparent;
    }
    .disclaimer-modal-body::-webkit-scrollbar { width: 6px; }
    .disclaimer-modal-body::-webkit-scrollbar-thumb { border-radius: 999px; background: var(--scrollbar-thumb); }

    .disclaimer-list { margin: 0; padding: 0; list-style: none; counter-reset: none; }
    .disclaimer-list > li {
      display: flex; gap: 11px;
      padding: 12px 0;
      border-bottom: 1px dashed var(--border-color);
      font-size: 12.5px; line-height: 1.62; color: var(--text-secondary);
    }
    .disclaimer-list > li:last-child { border-bottom: 0; }
    .disclaimer-list b { color: var(--text-primary); }
    .disclaimer-num {
      flex: 0 0 auto;
      display: grid; place-items: center;
      width: 21px; height: 21px; margin-top: 1px;
      border-radius: 50%;
      background: #b45309; color: #fff;
      font-size: 11px; font-weight: 700;
    }
    [data-theme="dark"] .disclaimer-num { background: #d97706; }
    .disclaimer-sub { margin: 7px 0 0; padding-left: 16px; }
    .disclaimer-sub li { margin-bottom: 3px; }

    .disclaimer-modal-footer {
      flex: 0 0 auto;
      display: flex; flex-direction: column; gap: 10px;
      padding: 14px 22px 16px;
      border-top: 1px solid var(--border-color);
      background: var(--bg-secondary);
    }
    /* Checkbox asli disembunyikan supaya yang tampil adalah kotak kustom,
       tapi input aslinya tetap ada: tetap bisa difokus dengan keyboard dan
       tetap dibaca screen reader. */
    .disclaimer-consent {
      display: flex; align-items: flex-start; gap: 10px;
      cursor: pointer; user-select: none;
    }
    .disclaimer-consent input {
      position: absolute; width: 1px; height: 1px;
      margin: -1px; padding: 0; border: 0;
      clip: rect(0 0 0 0); clip-path: inset(50%); overflow: hidden; white-space: nowrap;
    }
    .disclaimer-consent-box {
      flex: 0 0 auto;
      display: grid; place-items: center;
      width: 19px; height: 19px; margin-top: 1px;
      border: 1.5px solid var(--border-color); border-radius: 5px;
      background: var(--bg-card); color: transparent;
      transition: background .15s, border-color .15s, color .15s;
    }
    .disclaimer-consent input:checked + .disclaimer-consent-box {
      background: #b45309; border-color: #b45309; color: #fff;
    }
    .disclaimer-consent input:focus-visible + .disclaimer-consent-box {
      outline: 2px solid var(--accent); outline-offset: 2px;
    }
    .disclaimer-consent-text { font-size: 12px; line-height: 1.55; color: var(--text-secondary); }
    .disclaimer-consent-text b { color: var(--text-primary); }

    .disclaimer-btn {
      display: inline-flex; align-items: center; justify-content: center; gap: 8px;
      padding: 11px 20px;
      font-size: 13px; font-weight: 600; font-family: inherit;
      border: none; border-radius: 10px; cursor: pointer;
    }
    .disclaimer-btn-primary { background: linear-gradient(135deg, #b45309, #92400e); color: #fff; }
    .disclaimer-btn-primary:hover:not(:disabled) { background: linear-gradient(135deg, #92400e, #78350f); }
    /* Status terkunci harus terbaca, bukan sekadar terlihat abu-abu. */
    .disclaimer-btn-primary:disabled {
      background: var(--bg-card-hover);
      color: var(--text-muted);
      cursor: not-allowed;
      box-shadow: none;
    }
    .disclaimer-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
    /* Menyorot peta saat penafian terbuka. Penguncian gulirnya dilakukan di
       JS (overflow body + padding untuk scrollbar); aturan ini supaya tidak
       ada elemen lain yang ikut bergeser dan memberi kesan bisa diklik. */
    body.disclaimer-modal-active { cursor: default; }
    body.disclaimer-modal-active .disclaimer-modal { cursor: auto; }
    .disclaimer-note {
      margin: 0;
      font-size: 10.5px; line-height: 1.5;
      text-align: center; color: var(--text-muted);
    }

    @media (max-width: 600px) {
      .disclaimer-modal { padding: 10px; }
      .disclaimer-modal-dialog { max-height: min(94dvh, 760px); border-radius: 16px; }
      .disclaimer-modal-header { padding: 20px 16px 14px; }
      .disclaimer-modal-title { font-size: 17px; }
      .disclaimer-modal-body { padding: 14px 16px; }
      .disclaimer-modal-footer { padding: 12px 16px 14px; }
      .disclaimer-btn { width: 100%; }
    }
    @media (prefers-reduced-motion: reduce) {
      .disclaimer-modal.open,
      .disclaimer-modal-dialog { animation: none; }
    }


    .hotspot-legend {
      background: rgba(255,255,255,0.95);
      border-radius: 8px;
      padding: 10px 12px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.15);
      border: 1px solid #e5e7eb;
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      min-width: 200px;
    }

    @media (max-width: 768px) {
      .hotspot-legend-karhutla { display: none; }
    }

    .hotspot-legend-title {
      font-size: 11px;
      font-weight: 700;
      color: #1e293b;
      margin-bottom: 4px;
    }

    .hotspot-legend-total {
      font-size: 10px;
      color: #475569;
      margin-bottom: 8px;
    }

    .hotspot-legend-items {
      display: flex;
      flex-direction: column;
      gap: 4px;
    }

    .hotspot-legend-item {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 10px;
      color: #475569;
    }

    .hotspot-legend-dot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      flex-shrink: 0;
      border: 1px solid rgba(0,0,0,0.1);
    }

    .hotspot-legend-source {
      font-size: 8px;
      color: #94a3b8;
      margin-top: 8px;
      font-style: italic;
    }

    .hotspot-legend-gradient {
      margin-bottom: 8px;
    }

    .hotspot-legend-bar {
      height: 8px;
      border-radius: 4px;
      background: linear-gradient(90deg, #22c55e 0%, #84cc16 25%, #f59e0b 50%, #ef4444 75%, #dc2626 100%);
      margin-bottom: 3px;
    }

    .hotspot-legend-labels {
      display: flex;
      justify-content: space-between;
      font-size: 8px;
      color: #94a3b8;
    }

    .hotspot-popup .leaflet-popup-content-wrapper {
      border-radius: 10px;
      box-shadow: 0 4px 16px rgba(0,0,0,0.15);
    }

    .hotspot-popup .leaflet-popup-content {
      margin: 10px 12px;
    }

    /* ── ECMWF Fire Legend & Popup ── */
    .ecmwf-fire-legend {
      background: rgba(255,255,255,.95);
      border-radius: 8px;
      padding: 10px 12px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.15);
      border: 1px solid #e5e7eb;
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      min-width: 200px;
      max-width: 240px;
    }
    .ecmwf-fire-legend-title {
      font-size: 11px;
      font-weight: 700;
      color: #1e293b;
      margin-bottom: 6px;
    }
    .ecmwf-fire-legend-img {
      display: block;
      max-width: 100%;
      max-height: 120px;
      margin-bottom: 4px;
    }
    .ecmwf-fire-legend-source {
      font-size: 8px;
      color: #94a3b8;
      font-style: italic;
    }
    .ecmwf-fire-popup-wrap .leaflet-popup-content-wrapper {
      border-radius: 10px;
      box-shadow: 0 4px 16px rgba(0,0,0,0.15);
    }
    .ecmwf-fire-popup-wrap .leaflet-popup-content {
      margin: 10px 12px;
    }
    .ecmwf-fire-popup-title {
      font-size: 13px;
      font-weight: 700;
      color: #1e293b;
      margin-bottom: 6px;
    }
    .ecmwf-fire-popup-props {
      display: flex;
      flex-direction: column;
      gap: 3px;
    }
    .ecmwf-fire-popup-row {
      display: flex;
      justify-content: space-between;
      gap: 8px;
      font-size: 11px;
      line-height: 1.5;
    }
    .ecmwf-fire-popup-key {
      color: #64748b;
      text-transform: capitalize;
    }
    .ecmwf-fire-popup-val {
      color: #1e293b;
      font-weight: 600;
      text-align: right;
    }
    .ecmwf-fire-popup-note {
      margin-top: 6px;
      padding-top: 6px;
      border-top: 1px solid #e5e7eb;
      font-size: 10px;
      color: #94a3b8;
      font-style: italic;
    }

    /* ── FSVA 2025 Legend ── */
    .fsva-legend {
      background: rgba(255,255,255,.95);
      border-radius: 8px;
      padding: 10px 12px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.15);
      border: 1px solid #e5e7eb;
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      min-width: 160px;
      max-width: 240px;
    }
    .fsva-legend-title {
      font-size: 11px;
      font-weight: 700;
      color: #1e293b;
      margin-bottom: 6px;
    }
    .fsva-legend-img {
      display: block;
      max-width: 100%;
      max-height: 120px;
      margin-bottom: 4px;
    }
    .fsva-legend-source {
      font-size: 10px;
      color: #64748b;
      text-align: center;
      font-style: italic;
    }
    .unified-legend-section .fsva-legend {
      background: transparent;
      border: none;
      box-shadow: none;
      padding: 4px 0;
      min-width: auto;
      max-width: none;
    }
    .unified-legend-section .fsva-legend-title {
      font-size: 11px;
      color: #e2e8f0;
    }
    .unified-legend-section .fsva-legend-source {
      font-size: 9px;
      color: #64748b;
    }
    .unified-legend-section .fsva-legend-img {
      max-height: 200px;
    }

    /* ── FSVA 2025 Popup ── */
    .fsva-leaflet-popup .leaflet-popup-content-wrapper {
      border-radius: 12px;
      box-shadow: 0 6px 24px rgba(0,0,0,0.12);
      padding: 0;
      max-height: 37vh;
      overflow: hidden;
      border: none;
    }
    .fsva-leaflet-popup .leaflet-popup-content {
      margin: 0;
      min-width: 300px;
      max-width: 360px;
      max-height: 37vh;
      overflow-y: auto;
      width: auto !important;
    }
    .fsva-popup {
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    }
    .fsva-popup-header {
      background: linear-gradient(135deg, #059669, #10b981);
      padding: 12px 14px;
      color: white;
    }
    .fsva-popup-badge {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      background: rgba(255,255,255,0.2);
      border-radius: 4px;
      padding: 2px 8px;
      font-size: 10px;
      font-weight: 600;
      margin-bottom: 6px;
    }
    .fsva-popup-badge-dot {
      width: 6px;
      height: 6px;
      background: #fbbf24;
      border-radius: 50%;
    }
    .fsva-popup-title {
      font-size: 14px;
      font-weight: 700;
    }
    .fsva-popup-subtitle {
      font-size: 11px;
      opacity: 0.85;
    }
    .fsva-popup-body {
      padding: 10px 14px;
    }
    .fsva-popup-rank {
      background: #f0fdf4;
      border: 1px solid #bbf7d0;
      border-radius: 6px;
      padding: 8px 10px;
      margin-bottom: 10px;
      text-align: center;
    }
    .fsva-popup-rank-label {
      font-size: 10px;
      color: #64748b;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }
    .fsva-popup-rank-value {
      font-size: 18px;
      font-weight: 700;
      color: #059669;
    }
    .fsva-popup-section-title {
      font-size: 10px;
      font-weight: 600;
      color: #64748b;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      margin-bottom: 6px;
    }
    .fsva-popup-fields {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }
    .fsva-popup-field {
      border-bottom: 1px solid #f1f5f9;
      padding-bottom: 6px;
    }
    .fsva-popup-field:last-child {
      border-bottom: none;
    }
    .fsva-popup-field-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 2px;
    }
    .fsva-popup-field-label {
      font-size: 10px;
      color: #64748b;
    }
    .fsva-popup-field-rank {
      font-size: 8px;
      color: white;
      padding: 1px 5px;
      border-radius: 3px;
      font-weight: 600;
    }
    .fsva-popup-field-value {
      font-size: 12px;
      font-weight: 600;
      color: #1e293b;
    }
    .fsva-popup-footer {
      background: #f8fafc;
      padding: 8px 14px;
      border-top: 1px solid #e5e7eb;
      font-size: 10px;
      color: #64748b;
      font-style: italic;
      text-align: center;
    }

    /* ── DEM Topography Analysis ── */
    .topo-report-card {
      background: #fff;
      border-radius: 12px;
      border: 1px solid #e5e7eb;
      padding: 16px;
      margin-top: 12px;
    }
    .topo-header {
      font-size: 14px;
      font-weight: 700;
      color: #1e293b;
      margin-bottom: 12px;
    }
    .topo-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
    }
    .topo-stat {
      background: #f8fafc;
      border-radius: 8px;
      padding: 10px;
    }
    .topo-stat-label {
      font-size: 10px;
      color: #64748b;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }
    .topo-stat-value {
      font-size: 16px;
      font-weight: 700;
      color: #1e293b;
      margin-top: 2px;
    }
    .topo-bar {
      height: 6px;
      border-radius: 3px;
      background: #e5e7eb;
      margin-top: 4px;
      overflow: hidden;
    }
    .topo-bar-fill {
      height: 100%;
      border-radius: 3px;
      transition: width 0.3s;
    }

    @keyframes dem-spin { to { transform: rotate(360deg); } }
    .dem-spinner {
      width: 14px; height: 14px;
      border: 2px solid rgba(255,255,255,.3);
      border-top-color: #fff;
      border-radius: 50%;
      animation: dem-spin .6s linear infinite;
      display: inline-block;
      vertical-align: middle;
    }
    .dem-spinner.dark {
      border-color: rgba(124,58,237,.2);
      border-top-color: #7c3aed;
    }

    /* ── DEM Point Popup ── */
    .dem-leaflet-popup .leaflet-popup-content-wrapper {
      border-radius: 12px;
      padding: 0;
      overflow: hidden;
      box-shadow: 0 8px 32px rgba(0,0,0,.18);
      border: none;
    }
    .dem-leaflet-popup .leaflet-popup-content {
      margin: 0;
      min-width: 200px;
    }
    .dem-popup {
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    }
    .dem-popup-header {
      padding: 14px 16px 10px;
      color: #fff;
      position: relative;
    }
    .dem-popup-header::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 20px;
      background: linear-gradient(to bottom, transparent, rgba(0,0,0,.1));
    }
    .dem-popup-elev {
      font-size: 22px;
      font-weight: 800;
      line-height: 1.1;
      text-shadow: 0 1px 3px rgba(0,0,0,.25);
    }
    .dem-popup-unit {
      font-size: 11px;
      font-weight: 500;
      opacity: .85;
    }
    .dem-popup-coord {
      font-size: 9px;
      opacity: .7;
      margin-top: 3px;
      font-family: 'SF Mono', 'Fira Code', monospace;
    }
    .dem-popup-body {
      padding: 10px 14px 12px;
    }
    /* Detail topografi: satu kolom, tiap baris penuh lebar popup. */
    .dem-popup-detail {
      display: grid;
      grid-template-columns: 1fr;
      gap: 0;
    }
    .dem-popup-row {
      display: grid;
      grid-template-columns: 18px 1fr auto;
      align-items: center;
      gap: 6px;
      padding: 5px 0;
      border-bottom: 1px solid #f1f5f9;
    }
    .dem-popup-row:last-child {
      border-bottom: none;
    }
    .dem-popup-icon {
      font-size: 12px;
      width: 18px;
      text-align: center;
    }
    .dem-popup-label {
      font-size: 10px;
      color: #64748b;
    }
    .dem-popup-val {
      font-size: 11px;
      font-weight: 700;
      color: #1e293b;
      text-align: right;
      white-space: nowrap;
    }

    /* ── DEM Polygon Popup ── */
    .dem-poly-popup .leaflet-popup-content-wrapper {
      border-radius: 12px;
      padding: 0;
      overflow: hidden;
      box-shadow: 0 8px 32px rgba(0,0,0,.18);
      border: none;
    }
    .dem-poly-popup .leaflet-popup-content {
      margin: 0;
      min-width: 260px;
    }

    /* ── Crop Health Card ── */
    .crop-health-card-wrap {
      margin-top: 8px;
      max-height: 30vh;
      overflow-y: auto;
      overflow-x: hidden;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: thin;
      scrollbar-color: #cbd5e1 transparent;
    }
    .crop-health-card-wrap::-webkit-scrollbar { width: 4px; }
    .crop-health-card-wrap::-webkit-scrollbar-track { background: transparent; }
    .crop-health-card-wrap::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 2px; }
    .crop-health-card {
      background: #fff;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      overflow: hidden;
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    }
    .crop-health-loading {
      text-align: center;
      padding: 14px;
      color: #64748b;
      font-size: 11px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
    }
    .crop-health-header {
      background: linear-gradient(135deg, #16a34a, #15803d);
      padding: 10px 12px;
      color: #fff;
    }
    .crop-health-field-id {
      font-size: 13px;
      font-weight: 800;
      letter-spacing: 0.3px;
    }
    .crop-health-crop {
      font-size: 10px;
      opacity: 0.85;
      margin-top: 2px;
    }
    .crop-health-copy-btn {
      background: rgba(255,255,255,0.15);
      border: 1px solid rgba(255,255,255,0.3);
      border-radius: 6px;
      color: #fff;
      width: 28px;
      height: 28px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: background 0.2s, transform 0.15s;
      flex-shrink: 0;
    }
    .crop-health-copy-btn:hover {
      background: rgba(255,255,255,0.3);
    }
    .crop-health-copy-btn:active {
      transform: scale(0.9);
    }
    .crop-health-copy-btn.copied {
      background: #22c55e;
      border-color: #22c55e;
    }
    .crop-health-hero {
      padding: 16px 12px;
      text-align: center;
      border-bottom: 1px solid #f1f5f9;
    }
    .crop-health-hero-icon {
      font-size: 32px;
      line-height: 1;
    }
    .crop-health-hero-label {
      font-size: 16px;
      font-weight: 800;
      margin-top: 4px;
      letter-spacing: 0.3px;
    }
    .crop-health-hero-score {
      margin-top: 6px;
    }
    .crop-health-hero-num {
      font-size: 26px;
      font-weight: 800;
      color: #1e293b;
    }
    .crop-health-hero-of {
      font-size: 13px;
      font-weight: 600;
      color: #94a3b8;
    }
    .crop-health-hero-condition {
      font-size: 11px;
      margin-top: 2px;
      opacity: 0.85;
    }
    .crop-health-section {
      padding: 8px 12px;
      border-top: 1px solid #f1f5f9;
    }
    .crop-health-section-title {
      font-size: 9px;
      font-weight: 700;
      color: #64748b;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      margin-bottom: 6px;
    }
    .crop-health-status {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 4px 10px;
      border-radius: 20px;
      font-size: 11px;
      font-weight: 700;
    }
    .crop-health-indices {
      margin-top: 6px;
    }
    .crop-health-index-row {
      display: grid;
      grid-template-columns: 50px 1fr auto;
      align-items: center;
      padding: 3px 0;
      font-size: 11px;
    }
    .crop-health-idx-label {
      font-weight: 600;
      color: #475569;
    }
    .crop-health-idx-value {
      font-weight: 700;
      color: #1e293b;
      text-align: right;
      font-family: 'SF Mono', 'Fira Code', monospace;
    }
    .crop-health-idx-tag {
      font-size: 9px;
      font-weight: 600;
      min-width: 60px;
      text-align: right;
    }
    .crop-health-stress {
      text-align: center;
      padding: 4px 0;
    }
    .crop-health-stress-score {
      margin-bottom: 4px;
    }
    .crop-health-stress-num {
      font-size: 22px;
      font-weight: 800;
      color: #1e293b;
    }
    .crop-health-stress-of {
      font-size: 11px;
      color: #94a3b8;
    }
    .crop-health-stress-label {
      font-size: 10px;
      color: #64748b;
      margin-top: 6px;
      line-height: 1.4;
    }
    .crop-health-chart-section {
      border-top: 1px solid #e2e8f0;
    }
    .crop-health-chart-wrap {
      height: 130px;
      position: relative;
    }
    .crop-health-concerns {
      margin-top: 6px;
    }
    .crop-health-concern-row {
      display: flex;
      align-items: flex-start;
      gap: 6px;
      font-size: 10px;
      line-height: 1.4;
      padding: 3px 0;
    }
    .crop-health-meta {
      text-align: center;
      font-size: 9px;
      color: #94a3b8;
      padding: 6px 12px;
      border-top: 1px solid #f1f5f9;
    }

    /* ── Universal map-layer loading spinner overlay ── */
    .map-loading-overlay {
      position: absolute;
      inset: 0;
      z-index: 1200;
      display: none;
      align-items: center;
      justify-content: center;
      background: rgba(15, 23, 42, 0.35);
      pointer-events: none;
    }
    .map-loading-overlay.active { display: flex; }
    .map-loading-spinner {
      width: 46px;
      height: 46px;
      border-radius: 50%;
      border: 4px solid rgba(255, 255, 255, 0.25);
      border-top-color: #38bdf8;
      animation: map-spin 0.8s linear infinite;
    }
    @keyframes map-spin { to { transform: rotate(360deg); } }

    /* ── Unified Legend Container ── */
    .unified-legend-container {
      display: none !important;
      max-height: 40vh;
      overflow: hidden;
      flex-direction: column;
      scrollbar-width: thin;
      scrollbar-color: rgba(0,0,0,0.2) transparent;
      background: rgba(255, 255, 255, 0.94);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      border: 1px solid rgba(148, 163, 184, 0.24);
      border-radius: 14px;
      padding: 0;
      box-shadow: 0 8px 32px rgba(15, 23, 42, 0.12), inset 0 1px 0 rgba(255,255,255,0.9);
      min-width: 200px;
    }
    .unified-legend-container::-webkit-scrollbar { width: 4px; }
    .unified-legend-container::-webkit-scrollbar-track { background: transparent; }
    .unified-legend-container::-webkit-scrollbar-thumb { background: rgba(148,163,184,0.35); border-radius: 2px; }
    .legend-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 8px 12px;
      cursor: pointer;
      user-select: none;
      color: #0f172a;
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.02em;
      border-bottom: 1px solid rgba(148,163,184,0.18);
      flex-shrink: 0;
    }
    .legend-header .legend-toggle-icon {
      font-size: 13px;
      color: #475569;
      transition: transform 0.2s;
    }
    .legend-body {
      display: flex;
      flex-direction: column;
      gap: 4px;
      padding: 8px;
      overflow-y: auto;
      max-height: 35vh;
    }
    .legend-body::-webkit-scrollbar { width: 4px; }
    .legend-body::-webkit-scrollbar-track { background: transparent; }
    .legend-body::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.2); border-radius: 2px; }
    .unified-legend-container.legend-collapsed .legend-body { display: none; }
    .unified-legend-container.legend-collapsed .legend-header .legend-toggle-icon { transform: rotate(-90deg); }
    .unified-legend-section { flex-shrink: 0; width: 100%; }
    .unified-legend-section .legend-wrap { position: relative; width: 100%; }
    .unified-legend-section .wind-legend,
    .unified-legend-section .himawari-legend,
    .unified-legend-section .maritime-legend,
    .unified-legend-section .hotspot-legend,
    .unified-legend-section .ecmwf-fire-legend,
    .unified-legend-section .airvisual-legend,
    .unified-legend-section .omi-legend,
    .unified-legend-section .gp-legend,
    .unified-legend-section .choropleth-legend,
    .unified-legend-section .geoportal-legend,
    .unified-legend-section .atrbpn-legend,
    .unified-legend-section .geologi-bnpb-legend,
    .unified-legend-section .isric-soil-legend {
      width: 100%;
      background: rgba(255,255,255,0.96) !important;
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      border: 1px solid rgba(148,163,184,0.22) !important;
      border-radius: 10px !important;
      box-shadow: 0 2px 8px rgba(15,23,42,0.08), inset 0 1px 0 rgba(255,255,255,0.9) !important;
      color: #0f172a;
      box-sizing: border-box;
    }
    .unified-legend-section .hwsd-id-legend { width: 280px; max-width: min(280px, calc(100vw - 48px)); padding: 10px; }
    .unified-legend-section .hwsd-id-legend > strong { display: block; margin-bottom: 7px; color: #0f172a; font-size: 11px; }
    .unified-legend-section .hwsd-id-legend-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px 8px; }
    .unified-legend-section .hwsd-id-legend-row { display: flex; align-items: center; gap: 6px; min-width: 0; color: #334155; font-size: 10px; line-height: 1.25; }
    .unified-legend-section .hwsd-id-legend-row i { width: 11px; height: 11px; flex: 0 0 11px; border: 1px solid rgba(15,23,42,.18); border-radius: 3px; }
    .unified-legend-section .hwsd-id-legend-row span { overflow: hidden; text-overflow: ellipsis; }
    .unified-legend-section .hwsd-id-legend > small { display: block; margin-top: 7px; color: #64748b; font-size: 9px; }
    .unified-legend-section .hwsd-id-legend { width: 280px; max-width: min(280px, calc(100vw - 48px)); padding: 10px; }
    .unified-legend-section .hwsd-id-legend > strong { display: block; margin-bottom: 7px; color: #0f172a; font-size: 11px; }
    .unified-legend-section .hwsd-id-legend-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px 8px; }
    .unified-legend-section .hwsd-id-legend-row { display: flex; align-items: center; gap: 6px; min-width: 0; color: #334155; font-size: 10px; line-height: 1.25; }
    .unified-legend-section .hwsd-id-legend-row i { width: 11px; height: 11px; flex: 0 0 11px; border: 1px solid rgba(15,23,42,.18); border-radius: 3px; }
    .unified-legend-section .hwsd-id-legend-row span { overflow: hidden; text-overflow: ellipsis; }
    .unified-legend-section .hwsd-id-legend > small { display: block; margin-top: 7px; color: #64748b; font-size: 9px; }
    .unified-legend-section .wind-legend-title,
    .unified-legend-section .himawari-legend-title,
    .unified-legend-section .maritime-legend-title,
    .unified-legend-section .hotspot-legend-title,
    .unified-legend-section .ecmwf-fire-legend-title,
    .unified-legend-section .airvisual-legend-title,
    .unified-legend-section .omi-legend-title,
    .unified-legend-section .gp-legend-badge,
    .unified-legend-section .choropleth-legend-title,
    .unified-legend-section .geoportal-legend-title,
    .unified-legend-section .atrbpn-legend-title,
    .unified-legend-section .geologi-bnpb-legend-title,
    .unified-legend-section .isric-soil-legend-title {
      color: #0f172a !important;
    }
    .unified-legend-section .wind-legend-item,
    .unified-legend-section .himawari-legend-item,
    .unified-legend-section .hotspot-legend-item,
    .unified-legend-section .airvisual-legend-label,
    .unified-legend-section .maritime-legend-row,
    .unified-legend-section .choropleth-legend-label,
    .unified-legend-section .geoportal-legend-label,
    .unified-legend-section .atrbpn-legend-item,
    .unified-legend-section .geologi-bnpb-legend-item {
      color: #334155 !important;
    }
    .unified-legend-section .wind-legend-labels,
    .unified-legend-section .himawari-legend-labels,
    .unified-legend-section .wind-legend-unit,
    .unified-legend-section .himawari-legend-unit,
    .unified-legend-section .maritime-legend-source,
    .unified-legend-section .hotspot-legend-source,
    .unified-legend-section .ecmwf-fire-legend-source,
    .unified-legend-section .choropleth-legend-unit,
    .unified-legend-section .atrbpn-legend-source,
    .unified-legend-section .geologi-bnpb-legend-source,
    .unified-legend-section .isric-soil-legend-source {
      color: #64748b !important;
    }
    .unified-legend-section .wind-legend-bar,
    .unified-legend-section .himawari-legend-bar {
      border: 1px solid rgba(255,255,255,0.08);
    }
    .unified-legend-section .hotspot-legend-total {
      color: #94a3b8 !important;
    }
    .unified-legend-section .hotspot-legend-dot {
      border: 1px solid rgba(255,255,255,0.1);
    }
    .unified-legend-section .ecmwf-fire-legend-img {
      border-radius: 4px;
      background: rgba(255,255,255,0.05);
    }
    .unified-legend-section .airvisual-legend {
      border-radius: 10px !important;
    }
    .unified-legend-section .airvisual-legend-swatch {
      border: 1px solid rgba(255,255,255,0.1);
    }
    .unified-legend-section .geoportal-legend {
      border-radius: 10px !important;
    }
    .unified-legend-section .geoportal-legend-swatch {
      border: 1px solid rgba(255,255,255,0.1) !important;
    }

    /* ── ATRBPN Legend ── */
    .unified-legend-section .atrbpn-legend {
      background: rgba(255,255,255,0.96) !important;
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      border: 1px solid rgba(148,163,184,0.22) !important;
      border-radius: 10px !important;
      box-shadow: 0 2px 8px rgba(15,23,42,0.08), inset 0 1px 0 rgba(255,255,255,0.9) !important;
      color: #0f172a;
      padding: 10px 12px;
      min-width: 200px;
    }
    .unified-legend-section .isric-soil-legend {
      width: 280px;
      max-width: min(280px, calc(100vw - 48px));
      padding: 12px 14px 10px;
      background: #fff !important;
      border: 1px solid #d7dee8 !important;
      border-radius: 8px !important;
      box-shadow: 0 2px 7px rgba(31, 41, 55, .12) !important;
      box-sizing: border-box;
      text-align: left;
    }
    .unified-legend-section .isric-soil-legend-title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 8px;
      margin-bottom: 7px;
      color: #1f2937 !important;
      font-size: 13px;
      font-weight: 600;
      line-height: 1.35;
      cursor: pointer;
    }
    .unified-legend-section .isric-soil-legend-image {
      display: block;
      max-width: 100%;
      border-radius: 3px;
    }
    .unified-legend-section .isric-soil-legend-source {
      display: block;
      margin-top: 7px;
      padding-top: 6px;
      border-top: 1px solid #e5eaf0;
      color: #64748b !important;
      font-size: 9px;
      line-height: 1.3;
    }
    .unified-legend-section .isee-soil-legend {
      width: 280px; max-width: min(280px, calc(100vw - 48px)); box-sizing: border-box;
      padding: 11px 13px; border: 1px solid #d7dee8 !important; border-radius: 8px;
      background: #fff !important; color: #1f2937; box-shadow: 0 2px 7px rgba(31,41,55,.12) !important;
    }
    .isee-soil-legend > strong { display: block; margin-bottom: 7px; font-size: 13px; }
    .isee-soil-legend-items { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px 8px; }
    .isee-soil-legend-row { display: flex; align-items: center; gap: 6px; min-width: 0; min-height: 18px; font-size: 10px; line-height: 1.25; }
    .isee-soil-legend-row img { width: 14px; max-width: 14px; height: 14px; max-height: 14px; flex: 0 0 14px; object-fit: contain; }
    .isee-soil-legend-row span { min-width: 0; overflow-wrap: anywhere; }
    .isee-soil-legend-note, .isee-soil-legend-source { display: block; margin-top: 7px; color: #64748b; font-size: 9px; line-height: 1.35; }
    .isee-soil-legend-source { padding-top: 6px; border-top: 1px solid #e5eaf0; }
    .isee-soil-popup { width: 320px; max-width: calc(100vw - 48px); }
    .isee-soil-leaflet-popup .leaflet-popup-content-wrapper { padding: 0; background: transparent; box-shadow: none; border: 0; }
    .isee-soil-leaflet-popup .leaflet-popup-content { margin: 0; }
    .isee-soil-leaflet-popup .leaflet-popup-tip { background: transparent; box-shadow: none; }
    .isee-soil-popup-section + .isee-soil-popup-section { margin-top: 10px; padding-top: 9px; border-top: 1px solid #e5eaf0; }
    .isee-soil-popup-section > strong { display: block; margin-bottom: 3px; color: #334155; font-size: 11px; }
    .isee-soil-popup-empty { padding: 8px 0; color: #64748b; font-size: 11px; line-height: 1.45; }
    .isee-soil-popup-note { display: block; margin-top: 8px; color: #a16207; font-size: 10px; }
    .isric-wrb-popup { min-width: 220px; max-width: 310px; color: #1f2937; font: 12px/1.45 system-ui, sans-serif; }
    .isric-wrb-popup > strong { display: block; margin-bottom: 7px; color: #166534; font-size: 13px; }
    .isric-wrb-main-class { margin-bottom: 7px; font-weight: 700; }
    .isric-wrb-popup table { width: 100%; border-collapse: collapse; font-size: 11px; }
    .isric-wrb-popup th, .isric-wrb-popup td { padding: 4px 6px; border: 1px solid #e2e8f0; text-align: left; }
    .isric-wrb-popup th { background: #f1f5f9; }
    .isric-wrb-popup small { display: block; margin-top: 7px; color: #64748b; font-size: 10px; }
    .isric-wrb-coordinate-form { margin-top: 9px; padding-top: 8px; border-top: 1px solid #e5eaf0; }
    .isric-wrb-coordinate-form > label { display: block; margin-bottom: 5px; color: #334155; font-size: 10px; font-weight: 700; }
    .isric-wrb-coordinate-fields { display: grid; grid-template-columns: 1fr 1fr auto; gap: 4px; }
    .isric-wrb-coordinate-fields input { width: 100%; min-width: 0; box-sizing: border-box; padding: 5px 6px; border: 1px solid #cbd5e1; border-radius: 5px; font-size: 10px; }
    .isric-wrb-coordinate-fields button { padding: 5px 8px; border: 0; border-radius: 5px; background: #15803d; color: #fff; font-size: 10px; font-weight: 700; cursor: pointer; }
    .isric-wrb-coordinate-form > small { margin-top: 4px; }
    .geofarm-wrb-legend { margin: 10px 0 8px; padding: 9px 10px; border: 1px solid #d7dee8; border-radius: 8px; background: #fff; color: #1f2937; }
    .geofarm-wrb-legend strong { display: block; margin-bottom: 6px; font-size: 11px; }
    .geofarm-wrb-legend-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 10px; }
    .geofarm-wrb-legend-row { display: flex; min-width: 0; align-items: center; gap: 6px; font-size: 10px; line-height: 1.3; }
    .geofarm-wrb-legend-row i { flex: 0 0 12px; width: 12px; height: 12px; border: 1px solid rgb(15 23 42 / 16%); border-radius: 3px; }
    .geofarm-wrb-legend-row span { overflow-wrap: anywhere; }
    .geofarm-wrb-legend small { display: block; margin-top: 5px; color: #64748b; font-size: 9px; }
    .bouguer-popup { min-width: 220px; max-width: 330px; color: #1f2937; font: 12px/1.45 system-ui, sans-serif; }
    .bouguer-popup > strong { display: block; margin-bottom: 7px; color: #7c2d12; font-size: 13px; }
    .bouguer-popup table { width: 100%; border-collapse: collapse; font-size: 11px; }
    .bouguer-popup th, .bouguer-popup td { padding: 4px 6px; border: 1px solid #e2e8f0; text-align: left; overflow-wrap: anywhere; }
    .bouguer-popup th { background: #f8fafc; }
    .bouguer-popup small { display: block; margin-top: 7px; color: #64748b; font-size: 10px; }
    .bouguer-legend { min-width: 190px; padding: 2px; color: #334155; font-size: 11px; }
    .bouguer-legend strong { display: block; color: #7c2d12; font-size: 12px; }
    .bouguer-legend p { margin: 5px 0; }
    .bouguer-legend small { color: #64748b; font-size: 9px; }
    .bouguer-legend-row { display: flex; align-items: center; gap: 6px; min-height: 19px; }
    .bouguer-legend-row img { width: auto; max-width: 32px; height: auto; max-height: 18px; object-fit: contain; }
    .bouguer-legend-row span { line-height: 1.3; }
    .bmkg-rain-popup { min-width: 220px; max-width: 330px; color: #1f2937; font: 12px/1.45 system-ui, sans-serif; }
    .bmkg-rain-popup > strong { display: block; margin-bottom: 7px; color: #0369a1; font-size: 13px; }
    .bmkg-rain-popup h4 { margin: 8px 0 4px; font-size: 11px; color: #334155; }
    .bmkg-rain-popup table { width: 100%; border-collapse: collapse; font-size: 11px; }
    .bmkg-rain-popup th, .bmkg-rain-popup td { padding: 4px 6px; border: 1px solid #e2e8f0; text-align: left; overflow-wrap: anywhere; }
    .bmkg-rain-popup th { background: #f8fafc; }
    .bmkg-rain-popup small { display: block; margin-top: 7px; color: #64748b; font-size: 10px; }
    .bmkg-rain-legend { min-width: 190px; color: #334155; font-size: 11px; }
    .bmkg-rain-legend > strong { display: block; margin-bottom: 6px; color: #0369a1; font-size: 12px; }
    .bmkg-rain-legend-group { margin: 6px 0; }
    .bmkg-rain-legend-group > b { display: block; margin-bottom: 3px; font-size: 10px; }
    .bmkg-rain-legend-row { display: flex; align-items: center; gap: 6px; min-height: 19px; }
    .bmkg-rain-legend-row img { width: auto; max-width: 30px; height: auto; max-height: 18px; object-fit: contain; }
    .bmkg-rain-legend-row span { line-height: 1.3; }
    .bmkg-rain-legend small { display: block; margin-top: 4px; color: #64748b; font-size: 9px; }
    .unified-legend-section .atrbpn-legend-title {
      font-size: 11px;
      font-weight: 700;
      color: #0f172a !important;
      margin-bottom: 6px;
      line-height: 1.3;
    }
    .unified-legend-section .atrbpn-legend-items {
      display: flex;
      flex-direction: column;
      gap: 4px;
    }
    .unified-legend-section .atrbpn-legend-item {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 10px;
      color: #334155 !important;
    }
    .unified-legend-section .atrbpn-legend-dot {
      width: 12px;
      height: 12px;
      border-radius: 3px;
      flex-shrink: 0;
      border: 1px solid rgba(255,255,255,0.1);
    }
    .unified-legend-section .atrbpn-legend-source {
      font-size: 9px;
      color: #64748b !important;
      margin-top: 6px;
      line-height: 1.3;
    }

    /* ── Geologi BNPB Legend ── */
    .unified-legend-section .geologi-bnpb-legend {
      background: rgba(255,255,255,0.96) !important;
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      border: 1px solid rgba(148,163,184,0.22) !important;
      border-radius: 10px !important;
      box-shadow: 0 2px 8px rgba(15,23,42,0.08), inset 0 1px 0 rgba(255,255,255,0.9) !important;
      color: #0f172a;
      padding: 10px 12px;
      min-width: 160px;
    }
    .unified-legend-section .geologi-bnpb-legend-title {
      font-size: 11px;
      font-weight: 700;
      color: #0f172a !important;
      margin-bottom: 6px;
      line-height: 1.3;
    }
    .unified-legend-section .geologi-bnpb-legend-items {
      display: flex;
      flex-direction: column;
      gap: 3px;
      max-height: 200px;
      overflow-y: auto;
    }
    .unified-legend-section .geologi-bnpb-legend-items::-webkit-scrollbar { width: 3px; }
    .unified-legend-section .geologi-bnpb-legend-items::-webkit-scrollbar-track { background: transparent; }
    .unified-legend-section .geologi-bnpb-legend-items::-webkit-scrollbar-thumb { background: rgba(148,163,184,0.3); border-radius: 2px; }
    .unified-legend-section .geologi-bnpb-legend-item {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 10px;
      color: #334155 !important;
    }
    .unified-legend-section .geologi-bnpb-legend-swatch {
      width: 14px;
      height: 12px;
      border-radius: 2px;
      flex-shrink: 0;
      border: 1px solid rgba(0,0,0,0.1);
    }
    .unified-legend-section .geologi-bnpb-legend-label {
      white-space: nowrap;
    }
    .unified-legend-section .geologi-bnpb-legend-source {
      font-size: 9px;
      color: #64748b !important;
      margin-top: 6px;
      line-height: 1.3;
    }

    /* ── Unified Slider Container ── */
    .unified-slider-container {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
      max-height: 35vh;
      overflow-y: auto;
      overflow-x: hidden;
      background: rgba(255, 255, 255, 0.94);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      border: 1px solid rgba(148,163,184,0.24);
      border-radius: 16px;
      padding: 6px 12px;
      box-shadow: 0 8px 32px rgba(15,23,42,0.12), inset 0 1px 0 rgba(255,255,255,0.9);
      scrollbar-width: thin;
      scrollbar-color: rgba(148,163,184,0.35) transparent;
    }
    .unified-slider-container::-webkit-scrollbar { width: 4px; }
    .unified-slider-container::-webkit-scrollbar-track { background: transparent; }
    .unified-slider-container::-webkit-scrollbar-thumb { background: rgba(148,163,184,0.35); border-radius: 2px; }
    .unified-slider-section {
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 2px;
      padding: 4px 0;
      border-bottom: 1px solid rgba(148,163,184,0.18);
    }
    .unified-slider-section:last-child { border-bottom: none; }
    .unified-slider-header {
      font-size: 10px;
      font-weight: 700;
      color: #0f172a;
      text-align: center;
      white-space: nowrap;
    }
    .unified-slider-section .modis-time-slider-wrap,
    .unified-slider-section .bmkg-time-slider-wrap,
    .unified-slider-section .sentinel2-time-slider-wrap,
    .unified-slider-section .s1rtc-time-slider-wrap {
      background: transparent !important;
      border: none !important;
      box-shadow: none !important;
      padding: 2px 0;
      width: 100%;
    }
    .unified-slider-section .modis-ts-title,
    .unified-slider-section .bmkg-ts-title,
    .unified-slider-section .sentinel2-ts-title,
    .unified-slider-section .s1rtc-ts-title {
      color: #0f172a !important;
    }
    .unified-slider-section .modis-ts-date,
    .unified-slider-section .bmkg-ts-date,
    .unified-slider-section .sentinel2-ts-date,
    .unified-slider-section .s1rtc-ts-date {
      color: #1e293b !important;
    }
    .unified-slider-section .modis-ts-time,
    .unified-slider-section .bmkg-ts-time,
    .unified-slider-section .sentinel2-ts-time,
    .unified-slider-section .s1rtc-ts-time {
      color: #64748b !important;
    }
    .unified-slider-section .modis-ts-btn,
    .unified-slider-section .bmkg-ts-btn,
    .unified-slider-section .sentinel2-ts-btn,
    .unified-slider-section .s1rtc-ts-btn {
      background: rgba(148,163,184,0.12) !important;
      color: #334155 !important;
      border: 1px solid rgba(148,163,184,0.2) !important;
    }
    .unified-slider-section .modis-ts-btn:hover,
    .unified-slider-section .bmkg-ts-btn:hover,
    .unified-slider-section .sentinel2-ts-btn:hover,
    .unified-slider-section .s1rtc-ts-btn:hover {
      background: rgba(148,163,184,0.2) !important;
    }
    @media (max-width: 768px) {
      .unified-legend-container {
        max-height: 30vh;
        position: fixed !important;
        bottom: calc(106px + env(safe-area-inset-bottom, 0px)) !important;
        left: 50% !important;
        right: auto !important;
        top: auto !important;
        transform: translateX(-50%) !important;
        width: auto !important;
        max-width: calc(100vw - 32px);
        z-index: 9999;
      }
      .unified-legend-container.legend-collapsed {
        transform: translateX(-50%) !important;
        bottom: calc(106px + env(safe-area-inset-bottom, 0px)) !important;
      }
      .unified-slider-container { width: min(280px, calc(100vw - 32px)); padding: 4px 8px; }
    }

    /* Legend collapse toggle */
    .legend-wrap { position: relative; }

    /* ── Print Preview Overlay ── */
    .print-preview-overlay {
      position: fixed; inset: 0; z-index: 10000;
      background: rgba(15, 23, 42, 0.9);
      display: flex; flex-direction: column;
      align-items: center; justify-content: center;
      backdrop-filter: blur(6px);
    }
    .print-preview-spinner {
      width: 36px; height: 36px;
      border: 3px solid rgba(255,255,255,0.15);
      border-top-color: #38bdf8;
      border-radius: 50%;
      animation: map-spin 0.7s linear infinite;
      position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    }
    .print-preview-container {
      max-width: 92vw; max-height: 78vh;
      display: flex; align-items: center; justify-content: center;
    }
    .print-preview-container canvas {
      max-width: 92vw; max-height: 78vh;
      border-radius: 8px;
      box-shadow: 0 12px 48px rgba(0,0,0,0.5);
      object-fit: contain;
    }
    .print-preview-controls {
      position: fixed; top: 16px; left: 50%; transform: translateX(-50%);
      z-index: 10002; display: flex; align-items: center; gap: 14px;
      padding: 10px 14px; border: 1px solid rgba(255,255,255,.16); border-radius: 14px;
      background: rgba(15,23,42,.92); color: #e2e8f0; box-shadow: 0 10px 30px rgba(0,0,0,.28);
      font: 12px 'Segoe UI', system-ui, sans-serif;
    }
    .print-preview-title { display: grid; gap: 5px; min-width: 220px; font-weight: 700; }
    .print-preview-title input {
      width: 100%; box-sizing: border-box; padding: 8px 10px; border: 1px solid rgba(148,163,184,.35);
      border-radius: 8px; outline: none; color: #f8fafc; background: rgba(255,255,255,.08); font: inherit;
    }
    .print-preview-title input:focus { border-color: #38bdf8; box-shadow: 0 0 0 2px rgba(56,189,248,.18); }
    .print-preview-map-tools { display: grid; justify-items: center; gap: 3px; }
    .print-preview-legend-editor { position: relative; align-self: center; }
    .print-preview-legend-editor summary { padding: 8px 10px; border: 1px solid rgba(148,163,184,.3); border-radius: 8px; cursor: pointer; font-weight: 700; white-space: nowrap; }
    .print-preview-legend-list { position: absolute; top: calc(100% + 6px); right: 0; z-index: 2; width: min(340px, 80vw); max-height: 42vh; overflow: auto; padding: 6px; border: 1px solid rgba(148,163,184,.3); border-radius: 10px; background: #0f172a; box-shadow: 0 10px 28px rgba(0,0,0,.35); }
    .print-preview-legend-actions { position: absolute; top: calc(100% + 6px); right: 0; z-index: 3; display: flex; gap: 5px; padding: 8px 8px 0; }
    .print-preview-legend-actions button { padding: 4px 7px; border: 1px solid rgba(148,163,184,.3); border-radius: 6px; color: #e2e8f0; background: #1e293b; cursor: pointer; font: 10px 'Segoe UI', system-ui, sans-serif; }
    .print-preview-legend-list { padding-top: 36px; }
    .print-preview-legend-option { display: grid; grid-template-columns: 18px minmax(0,1fr) 20px 26px 26px; align-items: center; gap: 5px; padding: 4px; border-bottom: 1px solid rgba(148,163,184,.14); }
    .print-preview-legend-option:last-child { border-bottom: 0; }
    .print-preview-legend-option span { min-width: 0; overflow-wrap: anywhere; font-size: 11px; }
    .print-preview-legend-order { color: #94a3b8; text-align: center; font-size: 10px !important; }
    .print-preview-legend-option button { width: 25px; height: 24px; padding: 0; border: 1px solid rgba(148,163,184,.3); border-radius: 6px; color: #f8fafc; background: rgba(255,255,255,.08); cursor: pointer; }
    .print-preview-legend-option button:disabled { opacity: .35; cursor: not-allowed; }
    .print-preview-control-label { font-weight: 700; margin-bottom: 2px; }
    .print-preview-tool-row { display: flex; align-items: center; justify-content: center; gap: 5px; min-height: 29px; }
    .print-preview-tool-row button {
      width: 30px; height: 28px; padding: 0; border: 1px solid rgba(148,163,184,.3); border-radius: 7px;
      color: #f8fafc; background: rgba(255,255,255,.1); font: 700 14px 'Segoe UI', sans-serif; cursor: pointer;
    }
    .print-preview-tool-row button:hover:not(:disabled) { background: rgba(56,189,248,.28); border-color: #38bdf8; }
    .print-preview-tool-row button:disabled { opacity: .35; cursor: not-allowed; }
    .print-preview-zoom { min-width: 42px; text-align: center; font-variant-numeric: tabular-nums; }
    .print-preview-actions {
      position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
      display: flex; gap: 12px; z-index: 10002; pointer-events: auto;
    }
    .print-preview-confirm, .print-preview-cancel {
      padding: 10px 28px; border-radius: 10px;
      font-family: 'Segoe UI', system-ui, sans-serif;
      font-size: 14px; font-weight: 700;
      cursor: pointer; border: none; pointer-events: auto; position: relative; z-index: 1;
      transition: transform 0.15s, box-shadow 0.15s, background 0.15s;
    }
    .print-preview-confirm {
      background: linear-gradient(135deg, #0879bf, #12a7c8);
      color: #fff;
      box-shadow: 0 4px 16px rgba(8,121,191,0.35);
    }
    .print-preview-confirm:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(8,121,191,0.45); }
    .print-preview-cancel {
      background: rgba(255,255,255,0.1);
      color: #e2e8f0;
      border: 1px solid rgba(255,255,255,0.15);
    }
    .print-preview-cancel:hover { background: rgba(255,255,255,0.18); }

    /* Print Area Selection — auto rectangle overlay */
    .print-area-vignette {
      position: fixed; inset: 0; z-index: 10000;
      background: rgba(15, 23, 42, 0.55);
      pointer-events: none;
      animation: print-area-fadein .3s ease-out;
    }
    .print-area-frame {
      position: fixed;
      top: 50%; left: 50%;
      transform: translate(-50%, -50%);
      z-index: 10001;
      width: auto; height: 72vh;
      aspect-ratio: 205 / 194;
      border: 2.5px dashed rgba(255, 255, 255, 0.85);
      border-radius: 6px;
      box-shadow: inset 0 0 20px rgba(8, 121, 191, 0.08),
                  0 0 32px rgba(8, 121, 191, 0.25);
      pointer-events: none;
      animation: print-area-fadein .3s ease-out;
    }
    .print-area-frame::before {
      content: '';
      position: absolute; inset: -6px;
      border: 1px solid rgba(8, 183, 216, 0.35);
      border-radius: 10px;
      pointer-events: none;
    }
    .print-area-buttons {
      position: fixed;
      top: 24px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 10001;
      display: flex;
      align-items: center;
      gap: 10px;
      animation: print-area-fadein .3s ease-out;
    }
    .print-area-basemap-label { display: grid; gap: 4px; color: #e2e8f0; font: 700 10px 'Segoe UI', system-ui, sans-serif; text-shadow: 0 1px 3px rgba(0,0,0,.45); }
    .print-area-basemap-select { min-width: 175px; max-width: 240px; padding: 9px 30px 9px 10px; border: 1px solid rgba(255,255,255,.24); border-radius: 9px; outline: none; color: #f8fafc; background: #0f172a; font: 12px 'Segoe UI', system-ui, sans-serif; }
    .print-area-basemap-select option { color: #0f172a; background: #fff; }
    .print-area-btn {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 12px 28px;
      border: none;
      border-radius: 12px;
      background: linear-gradient(135deg, #0879bf, #12a7c8);
      color: #fff;
      font-family: 'Segoe UI', system-ui, sans-serif;
      font-size: 15px;
      font-weight: 700;
      cursor: pointer;
      box-shadow: 0 6px 24px rgba(8,121,191,0.4);
      transition: transform .2s, box-shadow .2s;
    }
    .print-area-btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 32px rgba(8,121,191,0.5);
    }
    .print-area-btn:active { transform: scale(0.96); }
    .print-area-btn svg { width: 18px; height: 18px; flex-shrink: 0; }
    .print-area-cancel {
      padding: 12px 24px;
      border: none;
      border-radius: 12px;
      background: rgba(255,255,255,0.12);
      color: #e2e8f0;
      font-family: 'Segoe UI', system-ui, sans-serif;
      font-size: 15px;
      font-weight: 700;
      cursor: pointer;
      border: 1px solid rgba(255,255,255,0.15);
      transition: background .2s, transform .2s;
    }
    .print-area-cancel:hover {
      background: rgba(239,68,68,0.15);
      color: #fca5a5;
      border-color: rgba(239,68,68,0.3);
    }
    .print-area-cancel:active { transform: scale(0.96); }

    .print-instruction {
      position: fixed;
      bottom: 80px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 10001;
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 12px 24px;
      border-radius: 12px;
      background: rgba(15, 23, 42, 0.92);
      color: #e2e8f0;
      font-family: 'Segoe UI', system-ui, sans-serif;
      font-size: 14px;
      font-weight: 600;
      white-space: nowrap;
      box-shadow: 0 6px 24px rgba(0,0,0,0.35);
      backdrop-filter: blur(8px);
      animation: print-area-fadein .3s ease-out;
    }
    .print-instruction-icon {
      font-size: 18px;
      line-height: 1;
    }

    @keyframes print-area-fadein {
      from { opacity: 0; transform: translateX(-50%) translateY(12px); }
      to { opacity: 1; transform: translateX(-50%) translateY(0); }
    }

    /* ── Responsive Print Overlay & Preview (Mobile ≤480px) ── */
    @media (max-width: 480px) {
      .print-area-frame {
        height: 48vh;
        max-width: 85vw;
      }
      .print-area-buttons {
        top: 12px;
        gap: 6px;
        flex-wrap: wrap;
        justify-content: center;
        max-width: 92vw;
      }
      .print-area-basemap-label { width: min(92vw, 280px); }
      .print-area-basemap-select { width: 100%; max-width: none; padding: 8px 10px; }
      .print-area-btn {
        padding: 9px 16px;
        font-size: 13px;
        border-radius: 10px;
        gap: 6px;
      }
      .print-area-btn svg { width: 16px; height: 16px; }
      .print-area-cancel {
        padding: 9px 14px;
        font-size: 13px;
        border-radius: 10px;
      }
      .print-instruction {
        bottom: 60px;
        padding: 10px 16px;
        font-size: 12px;
        white-space: normal;
        text-align: center;
        max-width: 88vw;
        gap: 8px;
      }
      .print-instruction-icon { font-size: 16px; }
      .print-preview-actions {
        bottom: 12px;
        gap: 8px;
      }
      .print-preview-confirm,
      .print-preview-cancel {
        padding: 8px 16px;
        font-size: 13px;
        border-radius: 8px;
      }
      .print-preview-container {
        max-width: 96vw;
        max-height: 70vh;
      }
      .print-preview-container canvas {
        max-width: 96vw;
        max-height: 70vh;
      }
      .print-preview-controls {
        top: 8px; width: calc(100vw - 24px); box-sizing: border-box; padding: 8px;
        gap: 8px; justify-content: space-between;
      }
      .print-preview-title { min-width: 0; flex: 1; }
      .print-preview-title input { padding: 7px; }
      .print-preview-legend-editor { flex: 0 0 auto; }
      .print-preview-legend-editor summary { padding: 7px; font-size: 10px; }
      .print-preview-legend-list { position: fixed; top: 64px; right: 12px; width: min(340px, calc(100vw - 24px)); max-height: 42vh; }
      .print-preview-control-label { font-size: 10px; }
      .print-preview-tool-row { gap: 3px; }
      .print-preview-tool-row button { width: 27px; height: 26px; }
    }
    .legend-toggle { cursor: pointer; user-select: none; display: flex; align-items: center; justify-content: space-between; gap: 6px; padding-right: 28px; }
    .legend-toggle-icon { transition: transform .2s; font-size: 13px; color: #334155; background: rgba(148,163,184,0.12); width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; flex-shrink: 0; line-height: 1; border: 1px solid rgba(148,163,184,0.22); position: absolute; top: 4px; right: 4px; }
    .legend-toggle-icon:hover { background: rgba(148,163,184,0.18); }
    .legend-wrap.legend-collapsed .wind-legend-bar,
    .legend-wrap.legend-collapsed .wind-legend-labels,
    .legend-wrap.legend-collapsed .wind-legend-items,
    .legend-wrap.legend-collapsed .wind-legend-unit,
    .legend-wrap.legend-collapsed .himawari-legend-bar,
    .legend-wrap.legend-collapsed .himawari-legend-labels,
    .legend-wrap.legend-collapsed .himawari-legend-items,
    .legend-wrap.legend-collapsed .himawari-legend-unit,
    .legend-wrap.legend-collapsed .maritime-legend-row,
    .legend-wrap.legend-collapsed .maritime-legend-source,
    .legend-wrap.legend-collapsed .hotspot-legend-dots,
    .legend-wrap.legend-collapsed .hotspot-legend-source,
    .legend-wrap.legend-collapsed .hotspot-legend-total,
    .legend-wrap.legend-collapsed .ecmwf-fire-legend-img,
    .legend-wrap.legend-collapsed .ecmwf-fire-legend-source,
    .legend-wrap.legend-collapsed .airvisual-legend-body,
    .legend-wrap.legend-collapsed .gp-legend-body,
    .legend-wrap.legend-collapsed .gp-legend-badge,
    .legend-wrap.legend-collapsed .choropleth-legend-bar,
    .legend-wrap.legend-collapsed .choropleth-legend-labels,
    .legend-wrap.legend-collapsed .choropleth-legend-unit,
    .legend-wrap.legend-collapsed .geoportal-legend-body,
    .legend-wrap.legend-collapsed .geologi-bnpb-legend-items,
    .legend-wrap.legend-collapsed .geologi-bnpb-legend-source { display: none !important; }
    .legend-wrap.legend-collapsed .legend-toggle-icon { transform: rotate(-90deg); }

    /* ── Map Toast Notification ── */
    .map-toast {
      position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
      z-index: 10002; padding: 10px 20px; border-radius: 10px;
      background: rgba(239, 68, 68, 0.95); color: #fff;
      font-family: 'Segoe UI', system-ui, sans-serif;
      font-size: 13px; font-weight: 600; text-align: center;
      backdrop-filter: blur(8px); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
      pointer-events: none; max-width: 90vw;
      animation: map-toast-in .3s ease-out, map-toast-out .3s ease-in 3.7s forwards;
    }
    .map-toast.toast-warn { background: rgba(234, 179, 8, 0.95); color: #1e293b; }
    .map-toast.toast-info { background: rgba(8, 121, 191, 0.95); }
    @keyframes map-toast-in { from { opacity: 0; transform: translateX(-50%) translateY(12px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } }
    @keyframes map-toast-out { from { opacity: 1; } to { opacity: 0; } }

    /* ── Dark Mode Global Overrides ── */
    [data-theme="dark"] select,
    [data-theme="dark"] input,
    [data-theme="dark"] textarea {
      background: var(--bg-input);
      border-color: var(--border-color);
      color: var(--text-primary);
    }
    [data-theme="dark"] select option {
      background: var(--bg-primary);
      color: var(--text-primary);
    }
    [data-theme="dark"] .leaflet-popup-content-wrapper {
      background: var(--bg-primary);
      color: var(--text-primary);
      box-shadow: 0 8px 32px rgba(0,0,0,.5);
    }
    [data-theme="dark"] .leaflet-popup-tip {
      background: var(--bg-primary);
    }
    [data-theme="dark"] .basemap-modal-dialog {
      background: var(--bg-primary);
      color: var(--text-primary);
    }
    [data-theme="dark"] .lc-basemap-group { color: #64748b; }
    [data-theme="dark"] .lc-subcat-header { color: #64748b; }
    [data-theme="dark"] .lc-item.lc-basemap-active { background: rgba(37,99,235,.15); border-left-color: #3b82f6; }
    [data-theme="dark"] .lc-basemap-badge { background: #3b82f6; }
    /* Kartu basemap (grid ala ArcGIS) di tema gelap. */
    [data-theme="dark"] .lc-item.lc-bm-card { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.12); }
    [data-theme="dark"] .lc-item.lc-bm-card:hover { background: rgba(255,255,255,.07); box-shadow: 0 4px 14px rgba(0,0,0,.45); }
    [data-theme="dark"] .lc-bm-name { color: #e2e8f0; }
    [data-theme="dark"] .lc-bm-thumb {
      background:
        repeating-linear-gradient(0deg, rgba(255,255,255,.1) 0 1px, transparent 1px 18px),
        repeating-linear-gradient(90deg, rgba(255,255,255,.1) 0 1px, transparent 1px 18px),
        #1e293b;
    }
    [data-theme="dark"] .lc-item.lc-bm-card.lc-basemap-active {
      background: rgba(37,99,235,.15); border-color: #3b82f6;
    }
    [data-theme="dark"] .lc-bm-card .lc-pin-btn { background: rgba(15,23,42,.85); }
    [data-theme="dark"] .lc-pinned-group { border-left-color: #f59e0b; background: rgba(245,158,11,.08); }
    [data-theme="dark"] .lc-pinned-title { color: #fbbf24 !important; }
    [data-theme="dark"] .lc-item-pinned { background: rgba(245,158,11,.1); }
    [data-theme="dark"] .lc-item-pinned.lc-basemap-active { background: rgba(37,99,235,.15); border-left-color: #3b82f6; }
    [data-theme="dark"] .lc-pin-btn { color: #94a3b8; }
    [data-theme="dark"] .lc-pin-btn:hover { color: #fbbf24; background: rgba(245,158,11,.12); }
    [data-theme="dark"] .lc-pin-btn-active { color: #fbbf24; }
    [data-theme="dark"] .lc-pin-btn-active:hover { color: #f59e0b; background: rgba(245,158,11,.18); }
    [data-theme="dark"] .lc-unpin-all { border-color: #d97706; color: #fbbf24; }
    [data-theme="dark"] .lc-unpin-all:hover { background: #d97706; color: #fff; }
    [data-theme="dark"] .dm-sidebar { background: var(--bg-primary); color: var(--text-primary); }
    [data-theme="dark"] .dm-sidebar-option { background: var(--bg-secondary); border-color: var(--border-color); }
    [data-theme="dark"] .dm-sidebar-option:hover { background: var(--bg-card-hover); }
    [data-theme="dark"] .dm-measure-result { background: var(--bg-secondary); color: var(--text-primary); }
    [data-theme="dark"] .modal-content {
      background: var(--bg-primary);
      color: var(--text-primary);
    }
    [data-theme="dark"] .app-banner {
      background: var(--bg-secondary);
      border-color: var(--border-color);
      color: var(--text-primary);
    }
    [data-theme="dark"] .weather-card {
      background: var(--bg-card);
      border-color: var(--border-color);
      color: var(--text-primary);
    }
    [data-theme="dark"] .choropleth-legend {

      background: var(--bg-primary);
      color: var(--text-primary);
      border-color: var(--border-color);
    }
    [data-theme="dark"] .choropleth-tooltip {
      background: var(--bg-primary);
      color: var(--text-primary);
    }
    [data-theme="dark"] .map-insight-card {
      background: var(--bg-glass);
      color: var(--text-primary);
      border-color: var(--border-color);
    }
    [data-theme="dark"] .location-modal {
      background: var(--bg-glass);
      color: var(--text-primary);
    }
    [data-theme="dark"] .welcome-modal-dialog {
      background: var(--bg-primary);
      color: var(--text-primary);
    }
    [data-theme="dark"] .topo-report-card {
      background: var(--bg-card);
      color: var(--text-primary);
      border-color: var(--border-color);
    }
    [data-theme="dark"] .crop-health-card {
      background: var(--bg-card);
      color: var(--text-primary);
      border-color: var(--border-color);
    }
    [data-theme="dark"] .boundary-popup {
      background: var(--bg-primary);
      color: var(--text-primary);
    }
    [data-theme="dark"] .irisan-popup {
      background: var(--bg-primary);
      color: var(--text-primary);
    }
    [data-theme="dark"] .kta-popup {
      background: var(--bg-primary);
      color: var(--text-primary);
    }
    [data-theme="dark"] .quake-popup {
      background: var(--bg-primary);
      color: var(--text-primary);
    }
    [data-theme="dark"] .wind-popup {
      background: var(--bg-primary);
      color: var(--text-primary);
    }
    [data-theme="dark"] .agol-popup {
      background: var(--bg-primary);
      color: var(--text-primary);
    }
    [data-theme="dark"] .sawah-popup-body {
      background: var(--bg-primary);
      color: var(--text-primary);
    }
    /* .cctv-search-card dihapus (kartu jadi .geowatch-cctv, yang warnanya
       sudah dari variabel tema). .cctv-search-body masih dipakai, jadi
       aturan gelapnya tetap. */
    [data-theme="dark"] .cctv-search-body input,
    [data-theme="dark"] .cctv-search-body select {
      background: var(--bg-input);
      border-color: var(--border-color);
      color: var(--text-primary);
    }
    [data-theme="dark"] .geotani-search-input {
      background: var(--bg-input);
      border-color: var(--border-color);
      color: var(--text-primary);
    }
    [data-theme="dark"] .geotani-autocomplete-list {
      background: var(--bg-primary);
      border-color: var(--border-color);
    }
    [data-theme="dark"] .geotani-ac-item {
      background: var(--bg-primary);
      color: var(--text-primary);
      border-color: var(--border-color);
    }
    [data-theme="dark"] .geotani-ac-item:hover {
      background: var(--bg-card-hover);
    }
    [data-theme="dark"] .query-box {
      background: var(--bg-secondary);
      border-color: var(--border-color);
    }
    [data-theme="dark"] .query-box select {
      background: var(--bg-input);
      border-color: var(--border-color);
      color: var(--text-primary);
    }
    [data-theme="dark"] .kegiatan-filter-section {
      background: var(--bg-secondary);
    }
    [data-theme="dark"] .kegiatan-filter-section select {
      background: var(--bg-input);
      border-color: var(--border-color);
      color: var(--text-primary);
    }
    [data-theme="dark"] .geoid-summary-box {
      background: var(--bg-card);
      border-color: var(--border-color);
    }
    [data-theme="dark"] .geoid-autocomplete-results {
      background: var(--bg-primary);
      border-color: var(--border-color);
    }
    [data-theme="dark"] .weather-day-card {
      background: var(--bg-card);
      border-color: var(--border-color);
    }
    [data-theme="dark"] .quake-card {
      background: var(--bg-card);
      border-color: var(--border-color);
    }
    [data-theme="dark"] .hs-table-wrap {
      background: var(--bg-card);
      border-color: var(--border-color);
    }
    [data-theme="dark"] .hs-select {
      background: var(--bg-input);
      border-color: var(--border-color);
      color: var(--text-primary);
    }
    [data-theme="dark"] .hs-page-btn {
      background: var(--bg-card);
      border-color: var(--border-color);
      color: var(--text-primary);
    }
    [data-theme="dark"] .hs-table td {
      color: var(--text-primary);
    }
    /* Kartu Sheet Alat tidak punya aturan [data-theme="dark"] lagi: sejak
       cangkang, pita, dan isinya memakai token (--bg-card, --border-color,
       --text-primary, --bg-card-active), kartu itu mengikuti tema dengan
       sendirinya. Aturan lama di sini -- .alat-card, .alat-card-header,
       .alat-layer-card-wrap, .alat-layer-card-header, .alat-anim-card,
       .alat-file-input -- dihapus, bukan dibiarkan jadi alias: kelas
       yang disebut sudah tidak ada di markup (kecuali .alat-card, yang
       sekarang punya aturan dasarnya sendiri), dan menyisakannya
       hanya menambah tempat yang harus ikut dirawat saat temanya
       berubah. */
    [data-theme="dark"] .geotools-dropzone-filename {
      color: var(--text-muted);
      border-color: var(--border-color);
    }
    [data-theme="dark"] .geotools-dropzone {
      background: var(--bg-secondary);
      border-color: var(--border-color);
    }
    [data-theme="dark"] .geotools-steps {
      background: var(--bg-secondary);
      border-color: var(--border-color);
    }
    [data-theme="dark"] .geoportal-filter {
      background: var(--bg-secondary);
      border-color: var(--border-color);
    }
    [data-theme="dark"] .geoportal-sticky-header {
      background: var(--bg-primary);
      border-color: var(--border-color);
    }
    [data-theme="dark"] .geoportal-card {
      background: var(--bg-card);
      border-color: var(--border-color);
    }
    [data-theme="dark"] .geoportal-modal-dialog {
      background: var(--bg-primary);
      color: var(--text-primary);
    }
    [data-theme="dark"] .cctv-autocomplete-list {
      background: var(--bg-primary);
      border-color: var(--border-color);
    }
    [data-theme="dark"] .cctv-layer-toggle {
      background: var(--bg-secondary);
      border-color: var(--border-color);
    }
    [data-theme="dark"] .hotspot-eye-btn {
      background: var(--bg-secondary);
      border-color: var(--border-color);
    }
    [data-theme="dark"] .gpx-anim-card {
      background: var(--bg-card);
      border-color: var(--border-color);
    }
    [data-theme="dark"] .print-status-box {
      background: var(--bg-card);
      border-color: var(--border-color);
    }
    [data-theme="dark"] .sat-export-box {
      background: var(--bg-card);
      border-color: var(--border-color);
    }
    [data-theme="dark"] .wind-legend {
      background: var(--bg-glass);
      border-color: var(--border-color);
    }
    [data-theme="dark"] .hotspot-legend {
      background: var(--bg-glass);
      border-color: var(--border-color);
    }
    [data-theme="dark"] .airvisual-legend {
      background: var(--bg-glass);
      border-color: var(--border-color);
    }
    [data-theme="dark"] .omi-legend {
      background: var(--bg-glass);
      border-color: var(--border-color);
    }
    [data-theme="dark"] .ecmwf-fire-legend {
      background: var(--bg-glass);
      border-color: var(--border-color);
    }
    [data-theme="dark"] .fsva-legend {
      background: var(--bg-glass);
      border-color: var(--border-color);
    }
    [data-theme="dark"] .geologi-bnpb-legend {
      background: var(--bg-glass);
      border-color: var(--border-color);
    }
    [data-theme="dark"] .fsva-popup-header {
      background: linear-gradient(135deg, #047857, #059669);
    }
    [data-theme="dark"] .fsva-popup-body {
      background: var(--bg-primary);
    }
    [data-theme="dark"] .fsva-popup-title {
      color: var(--text-primary);
    }
    [data-theme="dark"] .fsva-popup-subtitle {
      color: var(--text-secondary);
    }
    [data-theme="dark"] .fsva-popup-rank {
      background: rgba(16,185,129,0.1);
      border-color: rgba(16,185,129,0.3);
    }
    [data-theme="dark"] .fsva-popup-rank-value {
      color: #34d399;
    }
    [data-theme="dark"] .fsva-popup-field {
      border-color: var(--border-color);
    }
    [data-theme="dark"] .fsva-popup-field-label {
      color: var(--text-secondary);
    }
    [data-theme="dark"] .fsva-popup-field-value {
      color: var(--text-primary);
    }
    [data-theme="dark"] .fsva-popup-footer {
      background: var(--bg-secondary);
      border-color: var(--border-color);
    }
    [data-theme="dark"] .gp-popup {
      background: var(--bg-primary);
      color: var(--text-primary);
    }
    [data-theme="dark"] .gp-table-wrap {
      background: var(--bg-card);
      border-color: var(--border-color);
    }
    [data-theme="dark"] .gp-commodity-table-scroll {
      background: var(--bg-card);
      border-color: var(--border-color);
    }
    [data-theme="dark"] .gp-compare-card {
      background: var(--bg-card);
      border-color: var(--border-color);
    }
    [data-theme="dark"] .sppg-table tbody tr:nth-child(even) {
      background: var(--bg-secondary);
    }
    [data-theme="dark"] .sppg-table tbody tr:hover {
      background: var(--bg-tertiary);
    }
    [data-theme="dark"] .geopangan-info {
      background: var(--bg-secondary);
      border-color: var(--border-color);
    }
    [data-theme="dark"] .geopangan-field select,
    [data-theme="dark"] .geopangan-field input {
      background: var(--bg-input);
      border-color: var(--border-color);
      color: var(--text-primary);
    }
    [data-theme="dark"] .geotools-steps-title {
      color: var(--text-primary);
    }
    [data-theme="dark"] .geotools-step {
      color: var(--text-secondary);
    }
    [data-theme="dark"] .geotools-step-num {
      background: var(--bg-secondary);
      color: var(--accent);
      border-color: var(--accent);
    }
    [data-theme="dark"] .geotools-dropzone-accept {
      color: var(--text-muted);
    }
    [data-theme="dark"] .geotani-form-label {
      color: var(--text-muted) !important;
    }
    [data-theme="dark"] .geotools-desc {
      color: var(--text-secondary);
    }
    [data-theme="dark"] .population-chart-box {
      background: var(--bg-card);
      border-color: var(--border-color);
    }
    [data-theme="dark"] .geoid-subtabs {
      background: var(--bg-secondary);
      border-color: var(--border-color);
      box-shadow: none;
    }
    [data-theme="dark"] .geoid-subtab-btn {
      color: var(--text-secondary);
    }
    [data-theme="dark"] .geoid-subtab-btn:hover {
      background: var(--bg-card-hover);
      color: var(--text-primary);
    }
    [data-theme="dark"] .gempa-subtab-btn {
      color: var(--text-secondary);
    }
    [data-theme="dark"] .gempa-subtab-btn:hover {
      background: var(--bg-card-hover);
      color: var(--text-primary);
    }
    [data-theme="dark"] .gempa-subtab-btn.active {
      background: var(--bg-card);
      color: var(--accent);
    }
    [data-theme="dark"] .sppg-table-wrap {
      background: var(--bg-card);
      border-color: var(--border-color);
    }
    [data-theme="dark"] .sppg-table-title {
      color: var(--text-primary);
      border-color: var(--border-color);
    }
    [data-theme="dark"] .sppg-table-header {
      border-color: var(--border-color);
    }
    [data-theme="dark"] .sppg-table-search {
      border-color: var(--border-color);
      background: var(--bg-input);
      color: var(--text-primary);
    }
    [data-theme="dark"] .sppg-table td {
      border-color: var(--border-color);
    }
    [data-theme="dark"] .sppg-td-name { color: var(--text-primary); }
    [data-theme="dark"] .sppg-td-kode { color: var(--accent); }
    [data-theme="dark"] .sppg-td-kab { color: var(--text-secondary); }
    [data-theme="dark"] .sppg-td-kec { color: var(--text-muted); }
    [data-theme="dark"] .sppg-td-alamat { color: var(--text-secondary); }
    [data-theme="dark"] .cctv-card {
      background: var(--bg-card);
      border-color: var(--border-color);
    }
    [data-theme="dark"] .cctv-card:hover {
      background: var(--bg-card-hover);
    }
    [data-theme="dark"] .cctv-card strong {
      color: var(--text-primary);
    }
    [data-theme="dark"] .cctv-card small {
      color: var(--text-secondary);
    }
    [data-theme="dark"] .cctv-card.cctv-result-item {
      background: var(--bg-card);
      border-color: var(--border-color);
    }
    [data-theme="dark"] .cctv-card.cctv-result-item:hover {
      background: var(--bg-card-hover);
    }
    [data-theme="dark"] .cctv-result-item strong { color: var(--text-primary); }
    [data-theme="dark"] .cctv-result-item small { color: var(--text-secondary); }
    [data-theme="dark"] .cctv-message {
      background: var(--bg-secondary);
      color: var(--text-secondary);
    }
    [data-theme="dark"] .geotani-form-select,
    [data-theme="dark"] .geotani-form-input,
    [data-theme="dark"] .geotani-form-input-search {
      background: var(--bg-input);
      border-color: var(--border-color);
      color: var(--text-primary);
    }
    [data-theme="dark"] #lbsVillageResults,
    [data-theme="dark"] #overlayVillageResults,
    [data-theme="dark"] #ndviVillageResults,
    [data-theme="dark"] #landcoverVillageResults,
    [data-theme="dark"] #demVillageResults {
      background: var(--bg-primary);
      border-color: var(--border-color);
    }
    [data-theme="dark"] #lbsResultArea {
      background: var(--bg-card);
      border-color: var(--border-color);
      color: var(--text-primary);
    }
    [data-theme="dark"] #btnClearDem {
      background: var(--bg-card);
      border-color: var(--accent);
      color: var(--accent);
    }
    [data-theme="dark"] #btnClearDem:hover {
      background: var(--bg-card-hover);
    }
    [data-theme="dark"] .search-weather-input {
      background: var(--bg-input);
      border-color: var(--border-color);
      color: var(--text-primary);
    }
    [data-theme="dark"] .geoportal-search-input {
      background: var(--bg-input);
      border-color: var(--border-color);
      color: var(--text-primary);
    }
    [data-theme="dark"] .geoportal-search-input::placeholder {
      color: var(--text-muted);
    }
    [data-theme="dark"] .geoportal-autocomplete-list {
      background: var(--bg-primary);
      border-color: var(--border-color);
    }

    /* ── Zoom Earth Time Slider ── */
    .ze-time-slider-wrap {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
      background: rgba(15,23,42,0.88);
      backdrop-filter: blur(12px);
      border: 1px solid rgba(100,116,139,0.3);
      border-radius: 16px;
      padding: 6px 12px;
      box-shadow: 0 4px 20px rgba(0,0,0,0.25);
    }
    .ze-ts-controls { display: flex; align-items: center; gap: 6px; width: 100%; }
    .ze-ts-btn {
      display: grid; place-items: center; width: 28px; height: 28px;
      border: none; border-radius: 50%; background: transparent;
      color: #60a5fa; cursor: pointer; transition: background .15s;
    }
    .ze-ts-btn:hover { background: rgba(96,165,250,0.15); }
    .ze-ts-slider-wrap { flex: 1; min-width: 0; }
    .ze-ts-slider {
      width: 100%; height: 4px; -webkit-appearance: none;
      background: linear-gradient(90deg, #1e3a5f 0%, #60a5fa 100%);
      border-radius: 2px; outline: none; cursor: pointer;
    }
    .ze-ts-slider::-webkit-slider-thumb {
      width: 16px; height: 16px; border-radius: 50%;
      background: #60a5fa; border: 2px solid #fff;
      box-shadow: 0 1px 6px rgba(96,165,250,0.5);
    }
    .ze-ts-info { display: flex; align-items: center; gap: 6px; justify-content: center; }
    .ze-ts-date { font-size: 11px; font-weight: 600; color: #e2e8f0; }
    .ze-ts-time { font-size: 10px; font-weight: 600; color: #94a3b8; }
    .ze-ts-range {
      display: flex; align-items: center; gap: 2px;
      width: 100%; justify-content: center;
    }
    .ze-ts-range-btn {
      display: inline-flex; align-items: center; justify-content: center;
      height: 20px; padding: 0 6px;
      border: 1px solid rgba(96,165,250,0.3); border-radius: 10px;
      background: transparent; color: #60a5fa;
      font-size: 9px; font-weight: 600; cursor: pointer;
      transition: background .15s, color .15s, border-color .15s; line-height: 1;
    }
    .ze-ts-range-btn:hover { background: rgba(96,165,250,0.15); }
    .ze-ts-range-active {
      background: #60a5fa !important; color: #fff !important;
      border-color: #60a5fa !important;
    }
    @media (max-width: 768px) {
      .ze-time-slider-wrap { width: min(280px, calc(100vw - 32px)); padding: 4px 8px; }
      .ze-ts-btn { width: 24px; height: 24px; }
      .ze-ts-range-btn { height: 18px; padding: 0 4px; font-size: 8px; }
    }
    .unified-slider-section .ze-time-slider-wrap {
      background: transparent !important;
      border: none !important;
      box-shadow: none !important;
      padding: 2px 0;
      width: 100%;
    }
    .unified-slider-section .ze-ts-btn {
      background: rgba(148,163,184,0.12) !important;
      color: #334155 !important;
      border: 1px solid rgba(148,163,184,0.2) !important;
    }
    .unified-slider-section .ze-ts-range-btn {
      background: rgba(148,163,184,0.08) !important;
      color: #475569 !important;
      border-color: rgba(148,163,184,0.25) !important;
    }
    .unified-slider-section .ze-ts-range-btn:hover {
      background: rgba(148,163,184,0.15) !important;
    }
    .unified-slider-section .ze-ts-range-active {
      background: #475569 !important; color: #fff !important;
      border-color: #475569 !important;
    }

    /* SPPG District Dark Mode */
    [data-theme="dark"] .sppgd-table-panel { background: var(--bg-card); border-color: var(--border-color); }
    [data-theme="dark"] .sppgd-table-title { color: var(--text-primary); border-color: var(--border-color); }
    [data-theme="dark"] .sppgd-table-header { border-color: var(--border-color); }
    [data-theme="dark"] .sppgd-table-search { background: var(--bg-input); border-color: var(--border-color); color: var(--text-primary); }
    [data-theme="dark"] .sppgd-table tbody tr:nth-child(even) { background: var(--bg-secondary); }
    [data-theme="dark"] .sppgd-table tbody tr:hover { background: var(--bg-tertiary); }
    [data-theme="dark"] .sppgd-table td { border-color: var(--border-color); color: var(--text-primary); }
    [data-theme="dark"] .sppgd-pagination { border-color: var(--border-color); }
    [data-theme="dark"] .sppgd-pag-btn { background: var(--bg-secondary); border-color: var(--border-color); color: var(--text-primary); }
    [data-theme="dark"] .sppgd-popup { background: var(--bg-card); color: var(--text-primary); }
    [data-theme="dark"] .sppgd-popup-body { background: var(--bg-card); }
    [data-theme="dark"] .sppgd-popup-item { border-color: var(--border-color); }
    [data-theme="dark"] .sppgd-popup-item-name { color: var(--text-primary); }
    [data-theme="dark"] .sppgd-tooltip { background: var(--bg-card); color: var(--text-primary); }

/* ── GHRSST SST Anomaly Time Slider (BMKG pattern) ── */
.ghrsst-time-slider-wrap {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
      background: var(--bg-glass);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border: 1px solid var(--border-color);
      border-radius: 16px;
      padding: 6px 12px;
      box-shadow: 0 4px 20px rgba(0,0,0,0.12);
      transition: opacity 0.2s, transform 0.2s;
}
.ghrsst-ts-controls {
      display: flex;
      align-items: center;
      gap: 6px;
      width: 100%;
}
.ghrsst-ts-title {
      font-size: 10px;
      font-weight: 700;
      color: var(--text-secondary);
      text-align: center;
      letter-spacing: 0.02em;
}
.ghrsst-ts-btn {
      display: grid;
      place-items: center;
      width: 28px;
      height: 28px;
      border: none;
      border-radius: 50%;
      background: transparent;
      color: #0284c7;
      cursor: pointer;
      transition: background 0.15s, color 0.15s;
      flex-shrink: 0;
      padding: 0;
}
.ghrsst-ts-btn:hover {
      background: #e0f2fe;
      color: #075985;
}
.ghrsst-ts-btn:active {
      background: #bae6fd;
}
.ghrsst-ts-slider-wrap {
      flex: 1;
      min-width: 0;
}
.ghrsst-ts-slider {
      width: 100%;
      height: 4px;
      -webkit-appearance: none;
      appearance: none;
      background: linear-gradient(90deg, #e0f2fe 0%, #0284c7 100%);
      border-radius: 2px;
      outline: none;
      cursor: pointer;
}
.ghrsst-ts-slider::-webkit-slider-thumb {
      -webkit-appearance: none;
      width: 16px;
      height: 16px;
      border-radius: 50%;
      background: #0284c7;
      border: 2px solid #fff;
      box-shadow: 0 1px 6px rgba(2,132,199,0.4);
      cursor: pointer;
      transition: transform 0.15s, box-shadow 0.15s;
}
.ghrsst-ts-slider::-webkit-slider-thumb:hover {
      transform: scale(1.15);
      box-shadow: 0 2px 10px rgba(2,132,199,0.5);
}
.ghrsst-ts-slider::-moz-range-thumb {
      width: 16px;
      height: 16px;
      border-radius: 50%;
      background: #0284c7;
      border: 2px solid #fff;
      box-shadow: 0 1px 6px rgba(2,132,199,0.4);
      cursor: pointer;
}
.ghrsst-ts-info {
      display: flex;
      align-items: center;
      gap: 6px;
      justify-content: center;
}
.ghrsst-ts-date {
      font-size: 11px;
      font-weight: 600;
      color: #334155;
      white-space: nowrap;
      text-align: center;
      letter-spacing: -0.01em;
}
.ghrsst-ts-layer {
      font-size: 10px;
      font-weight: 600;
      color: #64748b;
      white-space: nowrap;
      text-align: center;
      letter-spacing: -0.01em;
}
@media (max-width: 768px) {
  .ghrsst-time-slider-wrap {
    width: min(280px, calc(100vw - 32px));
    padding: 4px 8px;
  }
  .ghrsst-ts-btn { width: 24px; height: 24px; }
  .ghrsst-ts-date { font-size: 10px; }
  .ghrsst-ts-layer { font-size: 9px; }
}


/* ── Analisis Polygon (polygon-analysis.js) ─────────────────
   Geometri panel (posisi, tinggi, radius, head, body) memakai aturan
   yang sama dengan .lg-sidebar lewat selector bersama di atas, agar
   keduanya tidak bisa melenceng. Yang di bawah hanya isi kartunya. */

.pa-count {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--text-secondary);
  background: var(--bg-card-hover);
  border-radius: 20px;
  padding: 2px 8px;
}

.pa-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.pa-list::-webkit-scrollbar { width: 5px; }
.pa-list::-webkit-scrollbar-track { background: transparent; }
.pa-list::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 3px; }

/* position: relative dipakai menu export di bawahnya agar dropdown punya
   acuan posisi. */
.pa-actions { position: relative; display: flex; align-items: center; gap: 6px; }
.pa-minimize {
  display: grid; width: 28px; height: 28px; place-items: center;
  border: 0; border-radius: 50%; background: var(--bg-tertiary); color: var(--text-tertiary);
  cursor: pointer; transition: background .15s;
}
.pa-minimize:hover { background: var(--border-color); }
.pa-close:hover { background: var(--border-color); }

/* ══ Kontrol export di kepala panel ══
   Muncul hanya setelah semua analisis selesai. Sengaja tanpa footer supaya
   tidak mengurangi ruang daftar polygon. */
.pa-export { position: relative; display: flex; }
.pa-export[hidden] { display: none; }
.pa-export-btn { position: relative; }
.pa-export.is-open .pa-export-btn { background: var(--border-color); }

.pa-menu {
  position: absolute;
  top: calc(100% + 5px); right: 0;
  z-index: 30;
  display: flex; flex-direction: column;
  width: 208px; padding: 4px;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  background: var(--bg-primary);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
}
.pa-menu[hidden] { display: none; }
.pa-menu-item {
  display: flex; align-items: flex-start; gap: 8px;
  width: 100%;
  padding: 8px 9px;
  border: 0; border-radius: 7px;
  background: transparent;
  color: var(--text-primary);
  font-family: inherit; font-size: 11.5px; font-weight: 600;
  text-align: left; cursor: pointer;
  transition: background .12s;
}
.pa-menu-item:hover, .pa-menu-item:focus-visible { background: var(--bg-tertiary); outline: none; }
.pa-menu-item[disabled] { opacity: .55; cursor: progress; }
.pa-menu-item[disabled]:hover { background: transparent; }
.pa-menu-item svg { flex: 0 0 auto; margin-top: 1px; color: var(--text-secondary); }
.pa-menu-label { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.pa-menu-label small {
  font-size: 9.5px; font-weight: 400;
  color: var(--text-secondary);
}
@keyframes pa-pulse { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }

/* Pesan hasil aksi (ekspor) di atas daftar polygon. */
.pa-notice {
  font-size: 11px; line-height: 1.45;
  padding: 7px 9px; margin-bottom: 8px;
  border: 1px solid var(--border-color);
  border-radius: 5px;
  background: var(--bg-tertiary);
  color: var(--text-primary);
}
.pa-notice.is-error {
    border-color: #b91c1c;
    background: #fef2f2;
    color: #7f1d1d;
}
[data-theme="dark"] .pa-notice.is-error {
    background: #450a0a; border-color: #991b1b; color: #fca5a5;
}


.pa-empty {
  font-size: 11.5px;
  color: var(--text-secondary);
  text-align: center;
  padding: 18px 10px;
}

.pa-card {
  border: 1px solid var(--border-color);
  border-radius: 11px;
  padding: 10px;
  background: var(--bg-card);
}
.pa-card-stale { border-color: #f59e0b; }

.pa-card-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}
.pa-card-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-primary);
}
.pa-card-index {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
}
.pa-card-tools { margin-left: auto; }
.pa-icon {
  border: none;
  background: transparent;
  color: var(--text-secondary);
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
  padding: 1px 5px;
  border-radius: 5px;
}
.pa-icon:hover { background: #fee2e2; color: #dc2626; }

.pa-area {
  font-size: 10.5px;
  color: var(--text-secondary);
  margin-bottom: 8px;
}

.pa-stale {
  font-size: 10.5px;
  line-height: 1.45;
  color: #92400e;
  background: #fef3c7;
  border: 1px solid #fcd34d;
  border-radius: 7px;
  padding: 6px 7px;
  margin-bottom: 8px;
}
.pa-link {
  border: none;
  background: transparent;
  color: #b45309;
  font-size: 10.5px;
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
  padding: 0;
}

/* Status langkah analisis GeoFarm (unduhan raster, pemuatan scene, dan
   seterusnya). Dipakai satu elemen saja, jadi gayanya tidak berisiko
   menabrak komponen lain.

   Teksnya dipusatkan dan diberi ruang di atas serta bawah supaya tidak
   menempel ke baris "Analisis" di atasnya maupun ke section pertama di
   bawahnya. Tadi margin bawahnya cuma 8px dan tidak ada margin atas sama
   sekali, jadi barisnya duduk rapat ke tombol. */
.pa-status {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 10.5px;
  color: var(--text-secondary);
  margin: 12px 0;
  padding: 8px 12px;
  text-align: center;
  }
.pa-spin {
  width: 11px;
  height: 11px;
  border: 2px solid var(--border-color);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: pa-spin .7s linear infinite;
  flex-shrink: 0;
}
@keyframes pa-spin { to { transform: rotate(360deg); } }

.pa-section { border-top: 1px solid var(--border-color); padding-top: 8px; margin-top: 8px; }
.pa-section:first-of-type { border-top: none; padding-top: 0; margin-top: 0; }
.pa-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-secondary);
  margin-bottom: 6px;
}
.pa-section-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.pa-section-tools { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }

.pa-collapse-btn,
.pa-eye-btn {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  background: var(--bg-card);
  color: var(--text-secondary);
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.pa-collapse-btn:hover,
.pa-eye-btn:hover {
  background: var(--bg-card-hover);
  color: var(--text-primary);
}
.pa-collapse-btn svg { transition: transform .2s ease; }
.pa-collapse-btn.is-collapsed svg { transform: rotate(-90deg); }
.pa-section.is-collapsed .pa-section-head { margin-bottom: 0; }
.pa-section.is-collapsed .pa-section-body { display: none; }

.pa-eye-btn.is-on { color: var(--accent); border-color: var(--accent); }
.pa-eye-btn.is-on:hover { color: var(--accent); }
.pa-eye-btn:focus-visible,
.pa-collapse-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.pa-cloud {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10.5px;
  color: var(--text-secondary);
  margin-bottom: 5px;
}
.pa-cloud-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.pa-cloud-label { color: var(--text-secondary); }
.pa-cloud-value { margin-left: auto; font-weight: 700; }
.pa-cloud-badge {
  border: 1px solid;
  border-radius: 20px;
  padding: 1px 7px;
  font-size: 9.5px;
  font-weight: 700;
}

.pa-block {
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 8px;
  margin-top: 7px;
  background: var(--bg-primary);
}
.pa-block-muted { font-size: 10.5px; color: var(--text-secondary); }
/* Judul tiap analisis di dalam section (mis. NDMI, NDRE, NDWI, LST).
   Dipisah dari .pa-card-head yang dipakai untuk kartu polygon. */
.pa-item-head {
  display: flex; align-items: baseline; gap: 6px;
  margin: -1px 0 6px; padding-bottom: 5px;
  border-bottom: 1px solid var(--border-color);
}
.pa-item-head > b { font-size: 11.5px; font-weight: 700; color: var(--text-primary); }
.pa-item-head > span { font-size: 9.5px; color: var(--text-secondary); min-width: 0; }

.pa-block-note {
  font-size: 9.5px;
  color: var(--text-secondary);
  text-align: center;
  margin-top: 6px;
}
.pa-block-error {
  font-size: 10.5px;
  line-height: 1.45;
  color: #b91c1c;
  background: #fef2f2;
  border-color: #fecaca;
}
.pa-meta { font-size: 9.5px; color: var(--text-secondary); margin-top: 6px; }

.pa-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 5px;
}
.pa-stat {
  text-align: center;
  background: var(--bg-card-hover);
  border-radius: 7px;
  padding: 5px 2px;
}
.pa-stat span { display: block; font-size: 9px; color: var(--text-secondary); margin-bottom: 1px; }
.pa-stat b { font-size: 11.5px; color: var(--text-primary); }

   .pa-btn-row { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
   .pa-btn-row .pa-btn { margin-top: 7px; }
   /* Baris "Analisis ulang" / "Reset analisis". Baris ini jadi tempat
      kembali setelah analisis selesai, jadi diberi jarak lebih longgar dari
      baris tombol di dalam section supaya tidak terlihat sebagai bagian dari
      section terakhir. Reset sengaja tidak diberi warna merah: ia menghapus
      hasil hitungan yang bisa diulang, bukan mencabut polygon seperti tombol
      × di kepala kartu. */
   .pa-btn-row-reanalyze { margin: 4px 0 2px; }
/* Baris tombol yang hanya berisi satu tombol (mis. "Hitung" indeks lanjutan)
   dibuat selebar panel supaya luas sentuhnya enak untuk jari. */
.pa-btn-row-single { grid-template-columns: 1fr; }
.pa-btn[disabled] { opacity: .6; cursor: progress; }

/* Subjudul pemisah kelompok di dalam satu section (mis. "Indeks lanjutan"
   di bawah indeks otomatis pada section Indeks Spektral). */
.pa-subhead {
    margin: 12px 0 2px; padding-top: 9px;
    border-top: 1px solid var(--border-color);
    font-size: 10px; font-weight: 700;
    letter-spacing: .04em; text-transform: uppercase;
    color: var(--text-secondary);
}
.pa-note { font-size: 10.5px; line-height: 1.45; color: var(--text-secondary); }

.pa-trend { padding: 8px 8px 6px; }
.pa-trend-head { display: flex; flex-direction: column; gap: 1px; margin-bottom: 4px; }
.pa-trend-title { font-size: 11px; font-weight: 700; color: var(--text-primary); }
.pa-trend-meta { font-size: 9px; color: var(--text-secondary); }
.pa-trend-svg { display: block; width: 100%; height: auto; overflow: visible; }
.pa-trend-grid { stroke: var(--border-color); stroke-width: 1; stroke-dasharray: 2 3; }
.pa-trend-zero { stroke: var(--text-secondary); stroke-width: 1; opacity: .45; }
.pa-trend-axis, .pa-trend-x { fill: var(--text-secondary); font-size: 8px; }
.pa-trend-line { fill: none; stroke: #16a34a; stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }
.pa-trend-area { stroke: none; }
.pa-trend-band { stroke: #16a34a; stroke-width: 1.4; opacity: .22; fill: none; stroke-linecap: round; }
.pa-trend-dot { fill: #16a34a; stroke: var(--bg-card); stroke-width: 1; }
.pa-trend-dot-cloudy { fill: #fff; stroke: #16a34a; stroke-width: 1.4; }
.pa-trend-dot:hover { fill: #0f172a; r: 3.4; }
.pa-trend-legend {
  display: flex; align-items: center; gap: 5px; flex-wrap: wrap;
  font-size: 9px; color: var(--text-secondary); margin-top: 3px;
}
.pa-trend-key { width: 14px; height: 2px; border-radius: 2px; background: #16a34a; }
.pa-trend-key-band { width: 14px; height: 6px; border-radius: 2px; background: rgba(22, 163, 74, .22); margin-left: 6px; }
.pa-trend-key-cloudy { width: 8px; height: 8px; border-radius: 50%; border: 1.4px solid #16a34a; background: #fff; margin-left: 6px; }
.pa-trend-note { font-size: 9px; color: var(--text-secondary); margin-top: 5px; line-height: 1.35; }
.pa-trend-sum { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; margin-top: 7px; }
.pa-trend-stat { text-align: center; background: var(--bg-card-hover); border-radius: 7px; padding: 5px 2px; }
.pa-trend-stat span { display: block; font-size: 9px; color: var(--text-secondary); margin-bottom: 1px; }
.pa-trend-stat b { font-size: 11.5px; color: var(--text-primary); }
.pa-trend-stat b.naik { color: #16a34a; }
.pa-trend-stat b.turun { color: #dc2626; }

.pa-soil-grid { display: flex; flex-direction: column; gap: 4px; }
.pa-soil-grid-detail { margin-top: 4px; }
.pa-soil-row {
  display: grid;
  grid-template-columns: 52px 1fr 1fr 1fr;
  gap: 4px;
  align-items: center;
  font-size: 10px;
  background: var(--bg-card-hover);
  border-radius: 6px;
  padding: 4px 6px;
}
.pa-soil-row-detail { grid-template-columns: 40px repeat(6, 1fr); font-size: 9px; }
.pa-sg-subsection { display: grid; gap: 7px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border-color); }
.pa-sg-subsection h4 { margin: 0; color: var(--text-primary); font-size: 11px; }
.pa-sg-caveat { padding: 8px; border: 1px solid rgba(217,119,6,.25); border-radius: 8px; background: rgba(245,158,11,.07); color: var(--text-secondary); font-size: 10px; line-height: 1.5; }
.pa-sg-caveat b { color: var(--text-primary); }
.pa-sg-caveat a { color: #2563eb; text-decoration: underline; }
.pa-sg-table-wrap { max-width: 100%; overflow-x: auto; border: 1px solid var(--border-color); border-radius: 8px; }
.pa-sg-table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 9.5px; }
.pa-sg-table th, .pa-sg-table td { padding: 6px 7px; border-bottom: 1px solid var(--border-color); text-align: right; white-space: nowrap; }
.pa-sg-table th:first-child, .pa-sg-table td:first-child { text-align: left; }
.pa-sg-table thead th { background: var(--bg-secondary); color: var(--text-secondary); font-size: 9px; }
.pa-sg-table tbody th { color: var(--text-primary); font-weight: 600; }
.pa-sg-table tbody td { color: var(--text-secondary); }
.pa-sg-table tbody tr:last-child th, .pa-sg-table tbody tr:last-child td { border-bottom: 0; }
.pa-soil-band { font-weight: 700; color: var(--text-primary); }
.pa-soil-stat { color: var(--text-secondary); }

/* Dua mode analisis: Otomatis (jalur lama) dan Mandiri (pilihan pengguna) */
/* Pemilih mode analisis.
   Mengikuti ArcGIS (Calcite): kartu opsi sejajar dengan ikon, keadaan aktif
   terisi penuh -- bukan sekadar garis bawah seperti segmented control biasa.
   Dipakai dua kartu (bukan tombol) karena mode menentukan sumber citra dan
   cara hitung, jadi bedanya harus terbaca sekilas, bukan setelah diklik. */
  .pa-mode {
    margin: 6px 0 8px;
    padding: 8px;
    background: var(--bg-card-hover);
    border: 1px solid var(--border-color);
    border-radius: 6px;
  }
.pa-mode-head {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 6px;
}
.pa-mode-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-primary);
}
.pa-mode-sub {
  font-size: 9px;
  color: var(--text-secondary);
}
.pa-mode-opts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
}
.pa-mode-opt {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font: inherit;
  text-align: left;
  padding: 6px 7px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 4px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.pa-mode-opt:hover { border-color: var(--accent); }
.pa-mode-opt:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.pa-mode-ico {
  flex: none;
  margin-top: 1px;
  /* Ikon dibuat kabur saat tidak aktif supaya kartu aktif yang menonjol. */
  opacity: 0.55;
}
.pa-mode-txt {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.pa-mode-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.2;
}
.pa-mode-desc {
  font-size: 8px;
  line-height: 1.35;
  color: var(--text-secondary);
}
.pa-mode-opt.is-on {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.pa-mode-opt.is-on .pa-mode-title { color: #fff; }
.pa-mode-opt.is-on .pa-mode-desc { color: rgba(255, 255, 255, 0.85); }
.pa-mode-opt.is-on .pa-mode-ico { opacity: 1; }
.pa-mode-note {
  margin: 6px 0 0;
  font-size: 9px;
  line-height: 1.45;
  color: var(--text-secondary);
}

.pa-manual { margin-top: 8px; }
.pa-manual-step { margin-bottom: 10px; }
.pa-subhead {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-primary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 4px;
}
.pa-inline {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 10px;
  color: var(--text-secondary);
}
.pa-num {
  width: 52px;
  font: inherit;
  font-size: 10px;
  color: var(--text-primary);
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 4px;
  padding: 2px 4px;
}
.pa-check {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  color: var(--text-secondary);
  margin: 6px 0 2px;
  cursor: pointer;
}
.pa-scene-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 190px;
  overflow-y: auto;
  /* Nama satelit di .pa-scene-sat memakai white-space: nowrap, jadi tanpa ini
     sumbu horizontal ikut auto dan daftar bisa digeser mendatar. */
  overflow-x: hidden;
  margin: 6px 0;
}
.pa-scene {
  display: grid;
  grid-template-columns: 74px 52px 1fr;
  gap: 6px;
  align-items: center;
  font: inherit;
  font-size: 10px;
  text-align: left;
  padding: 4px 6px;
  background: var(--bg-card-hover);
  border: 1px solid transparent;
  border-radius: 6px;
  color: var(--text-secondary);
  cursor: pointer;
}
.pa-scene:hover { border-color: var(--border-color); }
.pa-scene.is-active {
  border-color: var(--accent);
  background: var(--bg-card);
  color: var(--text-primary);
  font-weight: 600;
}
.pa-scene-date { font-variant-numeric: tabular-nums; }
.pa-scene-cloud { font-variant-numeric: tabular-nums; color: #2e7d32; }
.pa-scene-cloud.is-high { color: #c62828; font-weight: 700; }
.pa-scene-sat { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pa-scene-picked { font-size: 10px; }
.pa-manual-head { font-size: 10px; color: var(--text-secondary); margin-bottom: 3px; }
.pa-manual-result { font-size: 10px; }

.pa-idx-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
  gap: 3px;
  margin: 4px 0;
}
.pa-idx {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 4px 6px;
  background: var(--bg-card-hover);
  border: 1px solid transparent;
  border-radius: 6px;
  cursor: pointer;
}
.pa-idx.is-on { border-color: var(--accent); background: var(--bg-card); }
.pa-idx-name { font-size: 11px; font-weight: 600; color: var(--text-primary); }
.pa-idx-formula {
  font-size: 8px;
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pa-stat.is-primary b { color: var(--accent); }

/* Baris tanggal citra di bawah badge awan. Kelas .pa-cloud-caveat yang
   pernah berpasangan dengan .pa-cloud-date sudah dihapus bersamanya dengan
   teks "estimasi katalog" di polygon-analysis.js. */
.pa-cloud-date {
  flex: 1 0 100%;
  font-size: 8px;
  color: var(--text-secondary);
  line-height: 1.35;
}

/* Kebutuhan air tanaman (ETc) */
  /* Section air memakai template .pa-section yang sama persis dengan section
     lain (NDVI, Indeks Spektral, LST, Topografi): garis pemisah di atas,
     judul uppercase kecil, tanpa kotak dan tanpa garis aksen di kiri.
     Dulu section ini punya latar, border penuh, dan bar aksen di kiri, jadi
     terbaca sebagai kartu tersendiri yang tidak cocok dengan section di
     bawahnya. Kelas .pa-section-air tetap ada karena JS memakainya untuk
     state ciut dan untuk menaruh section ini sebelum NDVI.

     Catatan di dalam section ini juga memakai .pa-note apa adanya, tanpa
     override ukuran huruf atau margin, supaya sama persis dengan catatan di
     section lain. */

  /* Field tanaman: label di atas, select penuh di bawah. Label-inline lama
     membuat select terpotong karena nama tanaman panjang ("Kelapa Sawit").
     Ini pola komponen form ArcGIS. */
.pa-air-field { margin: 0 0 8px; }
.pa-air-label {
  display: block;
  margin: 0 0 3px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
/* Jarak atas 6px: label TANAMAN hanya menyisakan 3px ke bawah (lihat
   .pa-air-label), jadi select lama menempel terlalu dekat pada labelnya.
   Margin ditaruh di wrap, bukan di select, supaya caret ikut terdorong dan
   tetap menempel di tengah tinggi select. */
.pa-air-select-wrap { position: relative; display: block; margin-top: 6px; }
.pa-air-select {
  width: 100%;
  min-width: 0;
  font: inherit;
  font-size: 11.5px;
  color: var(--text-primary);
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 4px;
  padding: 6px 24px 6px 8px;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}
.pa-air-select:hover { border-color: var(--accent); }
.pa-air-select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(8, 145, 178, .22);
}
.pa-air-caret {
  position: absolute;
  right: 7px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--text-secondary);
}

/* Tombol Hitung: satu-satunya aksi utama di section ini, jadi solid accent
   dengan ikon -- bukan ghost seperti tombol section lain. Geometrinya
   (margin, padding, radius, ukuran huruf) disamakan dengan .pa-btn supaya
   tidak terlihat seperti komponen dari template yang berbeda. */
.pa-air-calc {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  margin-top: 7px;
  padding: 5px 8px;
  font: inherit;
  font-size: 10.5px;
  font-weight: 600;
  color: #fff;
  background: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 7px;
  cursor: pointer;
  transition: background .15s;
}
.pa-air-calc:hover:not([disabled]) {
  background: #0e7490;
  border-color: #0e7490;
}
.pa-air-calc:active:not([disabled]) { background: #155e75; }
.pa-air-calc:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.pa-air-calc[disabled] {
  background: var(--bg-card-hover);
  border-color: var(--border-color);
  color: var(--text-muted);
  cursor: progress;
}
.pa-air-calc-ico { flex-shrink: 0; }
.pa-air-calc-ico.is-spin { animation: pa-air-spin 0.9s linear infinite; }
@keyframes pa-air-spin { to { transform: rotate(360deg); } }
.pa-air-hero {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 6px 0 8px;
  border-bottom: 1px solid var(--border-color);
  margin-bottom: 6px;
}
.pa-air-hero-val {
  font-size: 20px;
  font-weight: 700;
  color: var(--accent);
  line-height: 1.1;
  white-space: nowrap;
}
.pa-air-hero-val sup { font-size: 11px; font-weight: 600; }
.pa-air-hero-lab {
  font-size: 9px;
  color: var(--text-secondary);
  line-height: 1.35;
}
.pa-air-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 10px;
  color: var(--text-secondary);
  background: var(--bg-card-hover);
  border-radius: 6px;
  padding: 4px 6px;
  margin-bottom: 3px;
}
.pa-air-row > span:last-child { color: var(--text-primary); font-weight: 600; }
.pa-air-month > span:first-child { width: 26px; flex: none; }
.pa-air-month > span:last-child { width: 40px; flex: none; text-align: right; }
.pa-air-bar-wrap {
  flex: 1;
  min-width: 0;
  height: 6px;
  background: var(--bg-card);
  border-radius: 3px;
  overflow: hidden;
}
.pa-air-bar {
  display: block;
  height: 100%;
  background: var(--accent);
  border-radius: 3px;
}
.pa-air-src {
  margin-top: 4px;
  font-size: 9px;
  color: var(--text-secondary);
  line-height: 1.4;
}
.pa-wi-range { display: block; width: 100%; accent-color: var(--accent); }
.pa-wi-hint { display: block; margin-top: 3px; color: var(--text-muted); font-size: 9px; line-height: 1.35; }
.pa-wi-card { margin: 8px 0; padding: 8px; border: 1px solid var(--border-color); border-radius: 9px; background: var(--bg-card); }
.pa-wi-title { margin-bottom: 7px; color: var(--text-primary); font-size: 11px; font-weight: 700; }
.pa-wi-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; margin-bottom: 7px; }
.pa-wi-metrics > div { min-width: 0; padding: 6px 5px; border-radius: 6px; background: var(--bg-card-hover); }
.pa-wi-metrics b, .pa-wi-metrics small { display: block; }
.pa-wi-metrics b { overflow: hidden; color: var(--text-primary); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.pa-wi-metrics small { margin-top: 2px; color: var(--text-secondary); font-size: 8px; line-height: 1.25; }
.pa-wi-legend { display: flex; flex-wrap: wrap; gap: 10px; margin: 5px 1px 8px; color: var(--text-secondary); font-size: 9px; }
.pa-wi-legend span { display: inline-flex; align-items: center; gap: 4px; }
.pa-wi-legend i { display: inline-block; width: 10px; height: 7px; border-radius: 2px; }
.pa-wi-etc { background: #2563eb; }
.pa-wi-rain { background: #14b8a6; }
.pa-wi-days { max-height: 300px; overflow: auto; }
.pa-wi-day { padding: 6px 0; border-top: 1px solid var(--border-color); }
.pa-wi-day-head, .pa-wi-day-values { display: flex; justify-content: space-between; gap: 6px; color: var(--text-secondary); font-size: 8px; }
.pa-wi-day-head span:first-child { color: var(--text-primary); font-weight: 600; }
.pa-wi-bars { display: flex; flex-direction: column; gap: 2px; width: 100%; margin: 4px 0; }
.pa-wi-bar { display: block; min-width: 1px; height: 4px; border-radius: 3px; }
.pa-wi-day-values { flex-wrap: wrap; }
.pa-wi-day-values b { color: var(--text-primary); }
.pa-soil-stat b { color: var(--text-primary); font-weight: 600; }

.pa-cbar { margin-top: 6px; margin-bottom: 10px; }
.pa-cbar-bar {
  height: 10px;
  border-radius: 3px;
  border: 1px solid var(--border-color);
}
.pa-cbar-ticks {
  position: relative;
  height: 13px;
  margin-top: 3px;
}
.pa-cbar-tick {
  position: absolute;
  transform: translateX(-50%);
  font-size: 8.5px;
  line-height: 1;
  color: var(--text-secondary);
  white-space: nowrap;
}
.pa-cbar-tick:first-child { transform: none; }
.pa-cbar-tick:last-child { transform: translateX(-100%); }
.pa-cbar-classes {
  display: flex;
  flex-wrap: wrap;
  gap: 3px 8px;
  margin-top: 4px;
}
.pa-cbar-class {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 8.5px;
  color: var(--text-secondary);
  white-space: nowrap;
}
.pa-cbar-class i {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  border: 1px solid rgba(15, 23, 42, .2);
  flex-shrink: 0;
}
.pa-soil-chart-title { font-size: 10px; font-weight: 700; color: var(--text-primary); margin-bottom: 4px; }
.pa-soil-legend {
  display: flex; align-items: center; gap: 5px; flex-wrap: wrap;
  font-size: 9px; color: var(--text-secondary); margin-top: 4px;
}
.pa-soil-key-bar { width: 10px; height: 10px; border-radius: 2px; background: #2563eb; }
.pa-soil-key-range { width: 10px; height: 6px; border-radius: 2px; background: #94a3b8; opacity: 0.5; margin-left: 6px; }
.pa-soil-key-minmax { width: 2px; height: 12px; background: #475569; margin-left: 6px; }

.pa-warn {
  font-size: 9.5px;
  color: #92400e;
  background: #fffbeb;
  border-radius: 6px;
  padding: 4px 6px;
  margin-top: 6px;
}

#geotoolsTabGeoFarm .geofarm-draw-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 12px 16px;
  margin-bottom: 12px;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  border: 1.5px solid #0891b2;
  border-radius: 10px;
  background: linear-gradient(135deg, #0891b2, #0e7490);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(8, 145, 178, .25);
  transition: background .2s, box-shadow .2s, transform .2s;
}
#geotoolsTabGeoFarm .geofarm-draw-btn:hover:not([disabled]) {
  background: linear-gradient(135deg, #0e7490, #155e75);
  box-shadow: 0 4px 12px rgba(8, 145, 178, .35);
  transform: translateY(-1px);
}
#geotoolsTabGeoFarm .geofarm-draw-btn[disabled] { cursor: progress; }

/* ── GeoFarm: impor polygon dari file ──
   Tombol unggah memakai warna amber supaya bedanya jelas dari tombol
   "Buat Polygon" yang biru, dan sama dengan garis poligon unggahan di peta. */
#geotoolsTabGeoFarm .geofarm-upload-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 12px 16px;
  margin-bottom: 10px;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  border: 1.5px solid #d97706;
  border-radius: 10px;
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(217, 119, 6, .25);
  transition: background .2s, box-shadow .2s, transform .2s;
}
#geotoolsTabGeoFarm .geofarm-upload-btn:hover {
  background: linear-gradient(135deg, #d97706, #b45309);
  box-shadow: 0 4px 12px rgba(217, 119, 6, .35);
  transform: translateY(-1px);
}
.geofarm-upload-input { display: none; }

/* ── GeoFarm: tombol pemanggil sheet analisis ──
   Sheet analisis tidak muncul otomatis begitu polygon dibuat, jadi tombol
   inilah satu-satunya jalan membukanya. Tombolnya hidup di dalam tab ini,
   bukan melayang di atas peta, supaya tidak menutupi peta dan tidak
   bertabrakan dengan baris chip sheet lain di sisi bawah.

   Warnanya hijau, berbeda dari dua tombol di atasnya: biru untuk "Buat
   Polygon", amber untuk "Unggah Polygon". Tiga warna itu menandai kelompok
   aksi yang berbeda, jadi urutannya terbaca sebagai langkah. */
.geofarm-open-analysis-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  width: 100%;
  padding: 12px 16px;
  margin-bottom: 10px;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  border: 1.5px solid #16a34a;
  border-radius: 10px;
  background: linear-gradient(135deg, #16a34a, #15803d);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(22, 163, 74, .25);
  transition: background .2s, box-shadow .2s, transform .2s;
}
.geofarm-open-analysis-btn:hover {
  background: linear-gradient(135deg, #15803d, #166534);
  box-shadow: 0 4px 12px rgba(22, 163, 74, .35);
  transform: translateY(-1px);
}
.geofarm-open-analysis-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.geofarm-open-analysis-btn[hidden] { display: none !important; }
.geofarm-open-analysis-label { white-space: nowrap; }
/* Kedua badge mengikuti gaya .pa-count yang sudah ada, tapi kontrasnya
   dibalik karena latar tombol sudah hijau. */
.geofarm-open-analysis-btn .geofarm-open-analysis-count,
.geofarm-open-analysis-btn .geofarm-open-analysis-pending {
  padding: 2px 8px;
  border-radius: 10px;
  background: rgba(255, 255, 255, .22);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}
.geofarm-open-analysis-pending[hidden] { display: none; }

/* Keterangan khusus berkas SHP. Dipakai <details> supaya tidak memakan
   ruang di GeoTools yang sudah sempit, tapi tetap tersedia saat dibutuhkan. */
  .geofarm-shp-note {
    /* Jarak atas 10px: tanpa ini blok ini menempel ke tombol "Buka Analisis"
       di atasnya dan terbaca sebagai bagian dari tombol itu, bukan blok
       tersendiri. Ritme 10px sama dengan .geofarm-guide di bawahnya; karena
       keduanya bersaudara, marginnya bertumpuk jadi tetap 10px -- bukan 20px. */
    margin: 10px 0;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-primary);
  }
.geofarm-shp-note-summary {
  padding: 8px 10px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  list-style: none;
}
.geofarm-shp-note-summary::-webkit-details-marker { display: none; }
.geofarm-shp-note-summary::before { content: '\25B8\00a0'; display: inline-block; transition: transform .15s; }
.geofarm-shp-note[open] > .geofarm-shp-note-summary::before { transform: rotate(90deg); }
.geofarm-shp-note-summary:hover { background: var(--bg-card-hover); }
.geofarm-shp-note-body {
  padding: 0 10px 10px;
  border-top: 1px solid var(--border-color);
}
.geofarm-shp-note-body p {
  margin: 8px 0 6px;
  font-size: 10.5px;
  line-height: 1.55;
  color: var(--text-secondary);
}
.geofarm-shp-note-body ul {
  margin: 6px 0;
  padding-left: 16px;
  font-size: 10.5px;
  line-height: 1.55;
  color: var(--text-secondary);
}
.geofarm-shp-note-body li { margin-bottom: 4px; }
.geofarm-shp-note-body b { color: var(--text-primary); }
.geofarm-shp-note-body code {
  padding: 1px 4px;
  border-radius: 4px;
  background: var(--bg-tertiary);
  font-size: 10px;
  color: var(--text-primary);
}
  /* Jarak atasnya sengaja 8px: blok status sekarang duduk tepat di bawah
     baris tombol Buat/Unggah dan tepat di atas tombol Buka Analisis. Tanpa
     jarak atas, pesan menempel pada baris tombol di atasnya dan terbaca
     sebagai bagian dari tombol itu, bukan sebagai hasil aksi. */
  .geofarm-upload-status {
    margin: 8px 0 6px;
    padding: 8px 10px;
    font-size: 11px;
    line-height: 1.45;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background: var(--bg-primary);
    color: var(--text-secondary);
  }
.geofarm-upload-status.is-busy { color: var(--text-primary); }
.geofarm-upload-status.is-warn {
  border-color: #f59e0b;
  background: #fffbeb;
  color: #92400e;
}
.geofarm-upload-status.is-error {
  border-color: #dc2626;
  background: #fef2f2;
  color: #b91c1c;
}
.geofarm-upload-status.is-ok {
  border-color: #16a34a;
  background: #f0fdf4;
  color: #166534;
}
[data-theme="dark"] .geofarm-upload-status.is-warn { background: #422006; border-color: #a16207; color: #fde68a; }
[data-theme="dark"] .geofarm-upload-status.is-error { background: #450a0a; border-color: #991b1b; color: #fca5a5; }
[data-theme="dark"] .geofarm-upload-status.is-ok { background: #052e16; border-color: #15803d; color: #bbf7d0; }

/* ── GeoFarm: Kalkulator Benih & Pupuk ──
   Satu kartu, dua tab (Benih / Pupuk), satu field luas bersama. Kepala
   kartu ini memakai .gt-card-head yang sama dengan kartu LBS & LSD, tapi
   input dan warnanya TIDAK memakai .geotani-form-input:
   kelas itu warnanya dikunci ke putih/teks gelap tanpa override dark,
   sedangkan kartu ini punya state is-warn/is-ok sendiri seperti
   .geofarm-upload-status di atas.

   Kelas .geofarm-benih-* yang tersisa (total, rows, luas-info, warn)
   sengaja dipertahankan namanya: yang dipakai geofarm-kalkulator.js untuk
   hasil hitungan Benih, yang warnanya sudah sama dengan kartu ini. */
/* ============ KARTU GEOFARM ANALISIS ============
   Dulu "Buat Polygon" dan "Unggah Polygon" berdiri sebagai tombol lepas di
   atas tab, sehingga sheet GeoTools terbaca sebagai daftar tombol tanpa
   konteks. Sekarang keduanya, tombol Buka Analisis, dan panduan dikelompokkan
   dalam satu kartu bernama. Kepala kartu ini memakai .gt-card-head yang
   sama dengan kartu LBS & LSD, jadi seluruh GeoTools punya satu template. */
/* GeoFarm Analisis.
   September 2026: kartu ini <details> yang mulai terlipat. Padding kartu
   pindah ke .geofarm-card-body, dan margin negatif di kepala dihapus --
   margin itu ada untuk menyedot tepi kepala ke atas kartu yang BER-PADDING.
   Sekarang kartu tanpa padding, jadi margin negatif justru akan mendorong
   kepala ke luar kotak. */
.geofarm-card {
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  background: var(--bg-card);
}
.geofarm-card:not([open]) > .geofarm-card-body { display: none; }
.geofarm-card-body { padding: 12px 13px; }
/* Kepala, ikon, judul, subjudul, dan chevron kartu ini semua ditangani
   oleh .gt-card-head / .gt-card-icon di blok "Kepala kartu GeoTools".
   Aturan lama .geofarm-card-head, .geofarm-card-icon, dan
   .geofarm-card-headtext * dihapus: nilainya berbeda dari template
   (ikon SVG 18px berwarna aksen, judul 600, pita --bg-secondary), dan
   itulah penyebab kartu ini terlihat berbeda dari kartu LBS & LSD
   meskipun satu panel. */

/* Chevron, hover, dan fokus untuk kartu GeoFarm ditangani oleh
   .gt-card-head. Aturan lama di sini dihapus agar tidak ada dua sumber
   untuk hal yang sama. */

/* Dua tombol aksi utama berjajar. Lebarnya dibagi sama supaya keduanya
   punya target sentuh yang sama besar, bukan ikut panjang teks. */
.geofarm-card-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
/* Override di dalam kartu. Tanpa ini, aturan lama di atas (align-items:
   center, justify-content: center, margin-bottom, dan label 13px) tetap
   berlaku karena selector-nya lebih spesifik (#id .class) -- hasilnya tombol
   tetap terpusat horizontal dan dua baris teksnya tidak rapi. */
#geotoolsTabGeoFarm .geofarm-card-actions > .geofarm-draw-btn,
#geotoolsTabGeoFarm .geofarm-card-actions > .geofarm-upload-btn {
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 1px;
  padding: 8px 9px;
  margin-bottom: 0;
  text-align: left;
}
.geofarm-btn-label { font-size: 11.5px; font-weight: 600; }
.geofarm-btn-sub {
  font-size: 8.5px;
  line-height: 1.3;
  color: rgba(255, 255, 255, .82);
  font-weight: 400;
}
.geofarm-card-actions > button svg { flex-shrink: 0; margin-bottom: 2px; }

/* Buka Analisis tetap melebar penuh: dia satu-satunya jalan ke sheet
   analisis, jadi tidak boleh terasa sebagai opsi ketiga yang setara. */
.geofarm-card .geofarm-open-analysis-btn {
  width: 100%;
  margin-top: 6px;
  justify-content: center;
}

/* ============ PANDUAN SINGKAT ============ */
.geofarm-guide {
  margin-top: 10px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background: var(--bg-secondary);
}
.geofarm-guide-summary {
  display: flex;
  align-items: center;
  padding: 7px 9px;
  cursor: pointer;
  list-style: none;
  font-size: 10.5px;
  color: var(--text-primary);
}
.geofarm-guide-summary::-webkit-details-marker { display: none; }
.geofarm-guide-summary::before {
  content: '\25B8\00a0';
  display: inline-block;
  transition: transform .15s;
  color: var(--text-muted);
}
.geofarm-guide[open] > .geofarm-guide-summary::before { transform: rotate(90deg); }
.geofarm-guide-summary:hover { background: var(--bg-card-hover); }
.geofarm-guide-summary-txt { display: flex; flex-direction: column; gap: 1px; }
.geofarm-guide-title { font-weight: 600; line-height: 1.25; }
.geofarm-guide-sub { font-size: 8.5px; line-height: 1.3; color: var(--text-muted); }
/* display:none saat tertutup. Tanpa ini isi panduan tetap terlihat walau
   details-nya belum dibuka -- <details> menyembunyikan lewat atribut, tapi
   elemen di dalamnya tetap punya tinggi sampai ada aturan eksplisit. Pola ini
   sama dengan .pa-section.is-collapsed .pa-section-body di atas. */
.geofarm-guide:not([open]) > .geofarm-guide-body { display: none; }
.geofarm-guide-body {
  padding: 2px 10px 10px 20px;
  font-size: 9.5px;
  line-height: 1.55;
  color: var(--text-secondary);
}
.geofarm-guide-steps { margin: 0; padding-left: 14px; }
.geofarm-guide-steps > li { margin-bottom: 8px; }
.geofarm-guide-steps > li::marker { color: var(--text-muted); font-weight: 700; }
.geofarm-guide-steps b { color: var(--text-primary); }
.geofarm-guide-steps p { margin: 2px 0 0; }
.geofarm-guide-steps ul { margin: 3px 0 0; padding-left: 13px; }
.geofarm-guide-steps ul li { margin-bottom: 3px; }
.geofarm-guide-steps ul b { color: var(--text-primary); }
/* Catatan pengingkar untuk hal yang sering disalahpahami. */
.gf-note {
  padding: 4px 6px;
  border-left: 2px solid var(--accent);
  border-radius: 0 4px 4px 0;
  background: var(--bg-card-hover);
  font-size: 9px;
  line-height: 1.5;
  color: var(--text-muted);
}
/* Glosarium: istilah lalu artinya, supaya pembaca non-pertanian tidak
   perlu mencari arti NDVI di tempat lain. */
.geofarm-guide-defs { margin: 3px 0 0; }
.geofarm-guide-defs dt {
  font-size: 9.5px;
  font-weight: 700;
  color: var(--text-primary);
  margin-top: 4px;
}
.geofarm-guide-defs dd { margin: 0 0 0 8px; }
.geofarm-guide-care {
  margin-top: 9px;
  padding: 7px 8px;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  background: var(--bg-card);
}
.geofarm-guide-care > b { color: var(--text-primary); font-size: 9.5px; }
.geofarm-guide-care p { margin: 2px 0 0; }
.geofarm-guide-care ul { margin: 3px 0 0; padding-left: 13px; }
.geofarm-guide-care li { margin-bottom: 3px; }
.geofarm-guide-foot {
  margin: 8px 0 0;
  padding-top: 6px;
  border-top: 1px solid var(--border-color);
  font-size: 8.5px;
  line-height: 1.5;
  color: var(--text-muted);
}

/* GeoFarm stack memakai satu ritme jarak yang sama: kartu pertama tidak
   punya margin atas, dan kartu berikutnya hanya diberi gap kecil agar blok
   terasa rapi dan konsisten setelah LBS/LSD dan GeoPangan dipindahkan ke
   dalam panel yang sama. */
#geotoolsTabGeoFarm > .geofarm-card,
#geotoolsTabGeoFarm > .geotani-lbslsd,
#geotoolsTabGeoFarm > .geopangan-card,
#geotoolsTabGeoFarm > .geofarm-kalk,
#geotoolsTabGeoFarm > .geofarm-ref-group,
#geotoolsTabGeoportal > .geoportal-card,
#geotoolsTabGeoOss > details {
  margin-top: 0;
}
#geotoolsTabGeoFarm > .geofarm-card + .geotani-lbslsd,
#geotoolsTabGeoFarm > .geofarm-card + .geopangan-card,
#geotoolsTabGeoFarm > .geotani-lbslsd + .geotani-lbslsd,
#geotoolsTabGeoFarm > .geotani-lbslsd + .geopangan-card,
#geotoolsTabGeoFarm > .geopangan-card + .geopangan-card,
#geotoolsTabGeoFarm > .geopangan-card + .geofarm-kalk,
#geotoolsTabGeoFarm > .geotani-lbslsd + .geofarm-kalk,
#geotoolsTabGeoFarm > details + details,
#geotoolsTabGeoFarm > .geofarm-ref-group + details,
#geotoolsTabGeoFarm > details + .geofarm-ref-group,
#geotoolsTabGeoFarm > .geofarm-kalk + .geofarm-ref-group,
#geotoolsTabGeoFarm > .geofarm-ref-group + .geofarm-ref-group,
#geotoolsTabGeoFarm > .geofarm-ref-group > .geofarm-ref + .geofarm-ref,
#geotoolsTabGeoportal > details + details,
#geotoolsTabGeoportal > .geoportal-card + .geoportal-card,
#geotoolsTabGeoOss > details + details {
  margin-top: 10px;
}

/* Keep the PDF crop guide centered over the visible map when a desktop sheet
   reduces the map width. The crop keeps the same 205:194 print-template ratio. */
@media (min-width: 769px) {
  body.sheet-terbuka .print-area-frame,
  body.sheet-terbuka .print-area-buttons,
  body.sheet-terbuka .print-instruction {
    left: calc((100vw - var(--desktop-sheet-width, 30vw)) / 2);
    transition: left .3s ease;
  }
}

.geofarm-kalk {
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  background: var(--bg-card);
}
.geofarm-kalk:not([open]) > .geofarm-kalk-body { display: none; }
.geofarm-kalk-body { padding: 12px 13px; }
/* Kepala dan ikon ditangani oleh .gt-card-head / .gt-card-icon. Ikonnya
   tadinya 15px, sekarang ikut 20px seperti kartu LBS & LSD. */
.geofarm-kalk-label {
  display: block;
  margin-bottom: 3px;
  font-size: 10px;
  font-weight: 600;
  color: var(--text-secondary);
}
/* Baris luas: input tumbuh, satuan dan tombol lebar tetap. flex-wrap
   supaya label turun ke baris sendiri, bukan menyempitkan baris. */
.geofarm-kalk-luas {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 6px;
}
.geofarm-kalk-luas .geofarm-kalk-label { flex: 0 0 100%; }
.geofarm-kalk-luas .geofarm-kalk-input { flex: 1 1 auto; min-width: 0; }
.geofarm-kalk-luas .geofarm-kalk-select { flex: 0 0 54px; }
.geofarm-kalk-input, .geofarm-kalk-select {
  width: 100%;
  padding: 7px 9px;
  font-size: 11px;
  font-family: inherit;
  color: var(--text-primary);
  background: var(--bg-input);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  outline: none;
  box-sizing: border-box;
}
.geofarm-kalk-input:focus-visible, .geofarm-kalk-select:focus-visible,
.geofarm-kalk-cell:focus-visible {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(8, 145, 178, .15);
}
.geofarm-kalk-ghost {
  flex: 0 0 auto;
  padding: 7px 10px;
  font-size: 10px;
  font-weight: 600;
  font-family: inherit;
  color: var(--accent);
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.geofarm-kalk-ghost:hover { background: var(--bg-card-hover); border-color: var(--accent); }
.geofarm-kalk-ghost:active { transform: scale(.99); }
.geofarm-kalk-ghost:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* Tab bar. Hanya garis bawah, bukan tombol penuh, supaya tetap ringan di
   sidebar sempit dan jelas terbaca sebagai sub-view dari field luas di atas. */
.geofarm-kalk-tabs {
  display: flex;
  gap: 2px;
  margin: 11px 0 0;
  border-bottom: 1px solid var(--border-color);
}
.geofarm-kalk-tab {
  flex: 0 0 auto;
  padding: 7px 12px;
  font-size: 11px;
  font-weight: 600;
  font-family: inherit;
  color: var(--text-muted);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  cursor: pointer;
  transition: color .15s, border-color .15s;
}
.geofarm-kalk-tab:hover { color: var(--text-primary); }
.geofarm-kalk-tab.active { color: var(--accent-green); border-bottom-color: var(--accent-green); }
.geofarm-kalk-tab:focus-visible { outline: 2px solid var(--accent-green); outline-offset: -2px; }
.geofarm-kalk-panel { padding-top: 10px; }
.geofarm-kalk-panel[hidden] { display: none; }

/* Grid 2 kolom. minmax(0,1fr), bukan 1fr, supaya kolom boleh lebih
   sempit dari isinya dan tidak mendorong grid melebar di sidebar sempit.
   Anak ke-5 (Cadangan) otomatis duduk sendiri di baris ketiga kolom
   pertama; tidak perlu justify-content karena kolomnya tetap 1fr. */
.geofarm-kalk-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 6px;
}
.geofarm-kalk-grid > div { min-width: 0; }
.geofarm-kalk-preset-row { margin-bottom: 8px; }
.geofarm-kalk-acuan {
  margin: 0 0 8px;
  font-size: 9.5px;
  line-height: 1.5;
  color: var(--text-muted);
}
.geofarm-kalk-acuan:empty { display: none; }

/* Tabel Pupuk. Dosis dan HET adalah input, kebutuhan dan biaya output,
   jadi kolom input diberi garis tipis dan kolom output tidak, supaya
   mata langsung tahu mana yang bisa diedit. */
.geofarm-kalk-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--border-color);
  border-radius: 6px;
}
.geofarm-kalk-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 10.5px;
}
.geofarm-kalk-table thead th {
  padding: 6px 5px;
  font-size: 9px;
  font-weight: 600;
  line-height: 1.25;
  text-align: right;
  color: var(--text-muted);
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border-color);
  white-space: nowrap;
}
.geofarm-kalk-table thead th:first-child { text-align: left; }
.geofarm-kalk-table tbody th,
.geofarm-kalk-table tbody td {
  padding: 4px 5px;
  border-bottom: 1px dashed var(--border-color);
  vertical-align: middle;
}
.geofarm-kalk-table tbody tr:last-child th,
.geofarm-kalk-table tbody tr:last-child td { border-bottom: none; }
.geofarm-kalk-nama { display: block; font-size: 10.5px; font-weight: 600; color: var(--text-primary); }
.geofarm-kalk-table tbody th small { display: block; font-size: 8.5px; font-weight: 400; color: var(--text-muted); }
.geofarm-kalk-cell {
  width: 100%;
  min-width: 52px;
  padding: 4px 5px;
  font-size: 10.5px;
  font-family: inherit;
  text-align: right;
  color: var(--text-primary);
  background: var(--bg-input);
  border: 1px solid var(--border-color);
  border-radius: 4px;
  outline: none;
  box-sizing: border-box;
}
.geofarm-kalk-cell-out { text-align: right; color: var(--text-secondary); white-space: nowrap; }
.geofarm-kalk-cell-out .is-kosong { color: var(--text-muted); font-size: 9.5px; }
.geofarm-kalk-total-wrap { margin-top: 9px; }
.geofarm-kalk-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 8px;
  padding: 9px 11px;
  border: 1px solid #bbf7d0;
  border-radius: 6px;
  background: #f0fdf4;
}
.geofarm-kalk-total > span { font-size: 10px; font-weight: 600; color: #166534; }
.geofarm-kalk-total > b { font-size: 16px; font-weight: 700; color: #15803d; white-space: nowrap; }
.geofarm-kalk-total > b small { font-size: 9px; font-weight: 600; }
.geofarm-kalk-total.is-money { border-color: #93c5fd; background: #eff6ff; }
.geofarm-kalk-total.is-money > span { color: #1e40af; }
.geofarm-kalk-total.is-money > b { color: #1d4ed8; }

.geofarm-kalk-status { margin-top: 8px; font-size: 10.5px; line-height: 1.5; color: var(--text-muted); }
.geofarm-kalk-status.is-warn { color: #92400e; }
.geofarm-kalk-status.is-ok { color: #166534; }
.geofarm-benih-output { margin-top: 8px; }
.geofarm-benih-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 11px;
  border: 1px solid #bbf7d0;
  border-radius: 6px;
  background: #f0fdf4;
}
.geofarm-benih-total > span { font-size: 10px; font-weight: 600; color: #166534; }
.geofarm-benih-total > b { font-size: 16px; font-weight: 700; color: #15803d; white-space: nowrap; }
.geofarm-benih-total > b small { font-size: 9px; font-weight: 600; }
.geofarm-benih-rows { margin: 8px 0 0; }
.geofarm-benih-rows > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding: 4px 0;
  border-bottom: 1px dashed var(--border-color);
}
.geofarm-benih-rows > div:last-child { border-bottom: none; }
.geofarm-benih-rows dt { font-size: 10px; color: var(--text-muted); }
.geofarm-benih-rows dd { margin: 0; font-size: 10.5px; font-weight: 600; color: var(--text-secondary); }
.geofarm-benih-luas-info {
  margin-top: 7px;
  font-size: 9.5px;
  line-height: 1.5;
  color: var(--text-muted);
}
.geofarm-benih-warn {
  margin-top: 7px;
  padding: 5px 7px;
  border: 1px solid #fbbf24;
  border-radius: 5px;
  background: #fffbeb;
  color: #92400e;
  font-size: 10px;
  line-height: 1.45;
}
.geofarm-kalk-hint {
  margin-top: 7px;
  padding: 6px 8px;
  border: 1px dashed var(--border-color);
  border-radius: 5px;
  font-size: 10px;
  line-height: 1.5;
  color: var(--text-muted);
}
.geofarm-kalk-note {
  margin: 9px 0 0;
  padding-top: 7px;
  border-top: 1px dashed var(--border-color);
  font-size: 9.5px;
  line-height: 1.5;
  color: var(--text-muted);
}
.geofarm-kalk-note b { color: var(--text-secondary); }
/* Kredit acuan: dosis/ha dan HET berasal dari peraturan resmi, jadi
   sumbernya wajib disebut supaya angkanya bisa ditelusuri. */
.geofarm-kalk-credit {
  margin: 6px 0 0;
  font-size: 9px;
  line-height: 1.5;
  color: var(--text-muted);
}
.geofarm-kalk-credit b { color: var(--text-secondary); }
.geofarm-kalk-credit a { color: var(--accent-green); }
[data-theme="dark"] .geofarm-kalk-status.is-warn { color: #fde68a; }
[data-theme="dark"] .geofarm-kalk-status.is-ok { color: #bbf7d0; }
[data-theme="dark"] .geofarm-kalk-tab.active { color: #4ade80; }
[data-theme="dark"] .geofarm-kalk-total,
[data-theme="dark"] .geofarm-benih-total { border-color: #15803d; background: #052e16; }
[data-theme="dark"] .geofarm-kalk-total > span { color: #bbf7d0; }
[data-theme="dark"] .geofarm-kalk-total > b,
[data-theme="dark"] .geofarm-benih-total > b { color: #4ade80; }
[data-theme="dark"] .geofarm-kalk-total > span,
[data-theme="dark"] .geofarm-benih-total > span { color: #bbf7d0; }
[data-theme="dark"] .geofarm-kalk-total.is-money { border-color: #1d4ed8; background: #172554; }
[data-theme="dark"] .geofarm-kalk-total.is-money > span { color: #bfdbfe; }
[data-theme="dark"] .geofarm-kalk-total.is-money > b { color: #93c5fd; }
[data-theme="dark"] .geofarm-benih-warn { border-color: #a16207; background: #451a03; color: #fcd34d; }
[data-theme="dark"] .geofarm-kalk-credit a { color: #4ade80; }

/* Kartu polygon hasil unggah yang belum dianalisis. */
.pa-card-source {
  flex: 0 0 auto;
  margin-left: 4px;
  padding: 1px 6px;
  font-size: 9px;
  font-weight: 600;
  line-height: 1.5;
  border-radius: 999px;
  background: #fef3c7;
  color: #92400e;
}
[data-theme="dark"] .pa-card-source { background: #422006; color: #fde68a; }
.pa-pending {
  margin-top: 7px;
  padding: 9px 10px;
  border: 1px dashed var(--border-color);
  border-radius: 8px;
  background: var(--bg-primary);
}
.pa-pending-text {
  font-size: 10.5px;
  line-height: 1.5;
  color: var(--text-secondary);
  margin-bottom: 7px;
}
.pa-pending .pa-btn-row {
  /* .pa-btn-row normally is a 2-column grid; here there is only one button. */
  grid-template-columns: 1fr;
}
.pa-pending .pa-btn-row .pa-btn { margin-top: 0; }
.pa-btn-primary {
  border: 1px solid #0891b2;
  background: linear-gradient(135deg, #0891b2, #0e7490);
  color: #fff;
}
.pa-btn-primary:hover:not([disabled]) {
  background: linear-gradient(135deg, #0e7490, #155e75);
}
#geotoolsTabGeoFarm .pa-list {
  max-height: 58vh;
  overflow-y: auto;
  /* Sama seperti .pa-list di panel: overflow-x harus ditulis eksplisit,
     kalau tidak sumbu horizontal ikut auto. */
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

/* Selama sesi menggambar GeoFarm, hanya kontrol gambar yang dimunculkan;
   tombol ekspor SHP/GeoJSON disembunyikan supaya tidak salah klik. */
body.geofarm-draw-active .leaflet-bottom.leaflet-left .leaflet-draw {
  display: block !important;
}
body.geofarm-draw-active .leaflet-bottom.leaflet-left .leaflet-draw > .draw-actions-wrap {
  display: flex !important;
}


.pa-dist { margin-top: 7px; }
.pa-dist-row { display: flex; align-items: center; gap: 6px; margin-bottom: 3px; }
.pa-dist-label { font-size: 9.5px; color: var(--text-secondary); width: 74px; flex-shrink: 0; }
.pa-dist-bar { flex: 1; height: 6px; background: var(--border-color); border-radius: 4px; overflow: hidden; }
.pa-dist-bar i { display: block; height: 100%; border-radius: 4px; }
.pa-dist-value { font-size: 9.5px; color: var(--text-secondary); width: 30px; text-align: right; }

.pa-btn {
  width: 100%;
  margin-top: 7px;
  padding: 5px 8px;
  font-size: 10.5px;
  font-weight: 600;
  font-family: inherit;
  border-radius: 7px;
  cursor: pointer;
  transition: background .15s;
}
.pa-btn-ghost {
  border: 1px solid var(--border-color);
  background: var(--bg-primary);
  color: var(--text-primary);
}
.pa-btn-ghost:hover { background: var(--bg-card-hover); }

@media (max-width: 768px) {
  .pa-stats { grid-template-columns: repeat(2, 1fr); }
}

[data-theme="dark"] .pa-stale { background: #422006; border-color: #a16207; color: #fde68a; }
[data-theme="dark"] .pa-link { color: #fcd34d; }
[data-theme="dark"] .pa-block-error { background: #450a0a; border-color: #991b1b; color: #fca5a5; }
[data-theme="dark"] .pa-warn { background: #422006; color: #fde68a; }
[data-theme="dark"] .pa-icon:hover { background: #450a0a; color: #fca5a5; }

.pa-details { margin-top: 8px; }
.pa-summary {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 4px 6px;
  border: 1px solid var(--border-color);
  border-radius: 7px;
  background: var(--bg-primary);
  list-style: none;
  user-select: none;
}
.pa-summary::-webkit-details-marker { display: none; }
.pa-summary::before { content: '\25B8\00a0'; display: inline-block; transition: transform .15s; }
.pa-details[open] > .pa-summary::before { transform: rotate(90deg); }
.pa-summary:hover { background: var(--bg-card-hover); }

.pa-meta-block { margin-top: 6px; }
.pa-meta-title {
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-secondary);
  margin-bottom: 6px;
}
.pa-meta-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 3px 0;
  border-bottom: 1px dotted var(--border-color);
}
.pa-meta-row:last-of-type { border-bottom: none; }
.pa-meta-key { font-size: 9.5px; color: var(--text-secondary); width: 104px; flex-shrink: 0; }
.pa-meta-val { font-size: 10.5px; color: var(--text-primary); text-align: right; flex: 1; word-break: break-word; }

.pa-meta-product {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 7px;
  padding-top: 6px;
  border-top: 1px solid var(--border-color);
}
.pa-meta-product .pa-meta-key { width: auto; flex-shrink: 0; }
.pa-meta-product code {
  flex: 1;
  font-size: 9px;
  line-height: 1.35;
  color: var(--text-secondary);
  background: var(--bg-card-hover);
  border-radius: 5px;
  padding: 4px 5px;
  word-break: break-all;
}
.pa-copy {
  border: 1px solid var(--border-color);
  background: var(--bg-primary);
  color: var(--text-secondary);
  font-family: inherit;
  font-size: 9.5px;
  font-weight: 600;
  border-radius: 5px;
  padding: 3px 6px;
  cursor: pointer;
  flex-shrink: 0;
}
.pa-copy:hover { background: var(--bg-card-hover); color: var(--text-primary); }

.pa-meta-note {
  font-size: 9px;
  line-height: 1.45;
  color: var(--text-secondary);
  margin-top: 7px;
  padding-top: 6px;
  border-top: 1px solid var(--border-color);
}
/* ══ REFERENSI PERTANIAN (geofarm-referensi.js) ═════════════════════════
   Empat kartu <details> di tab GeoFarm: Artikel, Kamus, Hama & Penyakit,
   Pestisida. Semuanya mulai terlipat dan isinya diambil dengan fetch()
   hanya saat kartu dibuka.

   Kepala (ikon, judul, subjudul, chevron) memakai .gt-card-head yang
   sudah dipakai kartu GeoFarm/Kalkulator/GeoTani di atas — bukan kelas
   kepala sendiri. Modul ini tidak menambah apa pun ke kepala, jadi tidak
   ada lencana ukuran file di sana: angka "264 KB" di kartu terlipat lebih
   banyak menambah rapat daripada membantu, dan jumlah entri tetap
   terbaca di baris status begitu kartu dibuka.
   ─────────────────────────────────────────────────────────────────────── */

/* Teks di dalam kepala boleh menyusut supaya judul panjang di sidebar
   sempit tidak mendorong chevron keluar. .gt-card-head::after sudah pakai
   margin-left:auto, jadi chevron tetap di kanan. */
.gt-card-head > span:not(.gt-card-icon) {
  flex: 1 1 auto;
  min-width: 0;
}

/* Jarak antar kartu di tab ini satu nilai: 10px.
   Sebelumnya tiap kartu punya angkanya sendiri — Kalkulator 14px, grup
   Referensi 20px, kartu Referensi 8px — sehingga enam kartu dalam satu
   panel terlihat seperti tiga modul berbeda yang ditempel beruntun.
   Sekarang .geofarm-kalk dan .geofarm-ref memakai angka yang sama, dan
   jarak sebelum grup Referensi diambil dari margin kartu sebelumnya,
   bukan dari margin pembungkus.

   .geofarm-card (kartu pertama) sengaja tetap tanpa margin-top: jarak
   menuju kartu itu datang dari margin-bottom paragraf pengantar panel,
   dan itu jarak "pembuka", bukan jarak antar kartu. */
#geotoolsTabGeoFarm > .geofarm-ref-group { margin-top: 0; }
#geotoolsTabGeoFarm > .geofarm-kalk + .geofarm-ref-group,
#geotoolsTabGeoFarm > .geofarm-ref-group + .geofarm-ref-group,
#geotoolsTabGeoFarm > .geofarm-ref-group > .geofarm-ref + .geofarm-ref {
  margin-top: 10px;
}
#geotoolsTabGeoFarm > .geofarm-ref-group > .gf-reader + .geofarm-ref {
  margin-top: 10px;
}

.geofarm-ref {
  margin-top: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  background: var(--bg-card);
}
.gfpr-filter-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
}
.gfpr-filter-grid label {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 5px;
  color: var(--text-secondary);
  font-size: 10px;
  font-weight: 700;
}
.gfpr-filter-grid label:first-child,
.gfpr-filter-grid label:nth-child(4),
.gfpr-filter-grid label:nth-child(5) { grid-column: 1 / -1; }
.gfpr-filter-grid select {
  width: 100%;
  min-height: 38px;
  padding: 8px 10px;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  background: var(--bg-secondary);
  color: var(--text-primary);
  font: inherit;
  font-size: 12px;
}
.gfpr-filter-grid select:disabled { opacity: .55; }
.gfpr-run {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  margin-top: 12px;
  padding: 9px 12px;
  border: 0;
  border-radius: 11px;
  background: linear-gradient(135deg, #15803d, #0f766e);
  color: #fff;
  font: inherit;
  font-size: 12px;
  font-weight: 750;
  cursor: pointer;
}
.gfpr-run:disabled { opacity: .5; cursor: not-allowed; }
.gfpr-reset { min-height: 38px; margin: 8px 0 0 6px; padding: 0 12px; border: 1px solid var(--border-color); border-radius: 9px; background: var(--bg-primary); color: var(--text-secondary); font: inherit; font-size: 11px; font-weight: 700; cursor: pointer; }
.gfpr-reset:hover:not(:disabled) { border-color: #ef4444; color: #b91c1c; }
.gfpr-reset:disabled { opacity: .5; cursor: not-allowed; }
.gfpr-result { margin-top: 12px; }
.gfpr-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  margin-bottom: 10px;
}
.gfpr-metric {
  padding: 9px 10px;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  background: var(--bg-secondary);
}
.gfpr-metric small { display: block; color: var(--text-tertiary); font-size: 9px; }
.gfpr-metric b { display: block; margin-top: 3px; color: var(--text-primary); font-size: 15px; }
.gfpr-table-wrap { overflow: auto; max-height: 250px; border: 1px solid var(--border-color); border-radius: 10px; }
.gfpr-table { width: 100%; border-collapse: collapse; font-size: 10px; }
.gfpr-table th, .gfpr-table td { padding: 8px; border-bottom: 1px solid var(--border-secondary); text-align: left; }
.gfpr-table th { position: sticky; top: 0; background: var(--bg-secondary); color: var(--text-tertiary); font-size: 9px; text-transform: uppercase; }
.gfpr-table td:last-child, .gfpr-table th:last-child { text-align: right; white-space: nowrap; }
.gfpr-table-wrap-primary { max-height: 320px; margin-bottom: 12px; border-color: #86efac; box-shadow: 0 5px 18px rgba(22, 101, 52, .12); }
.gfpr-table--primary { font-size: 12px; }
.gfpr-table--primary th { padding: 11px 10px; background: #f0fdf4; color: #166534; font-size: 10px; letter-spacing: .04em; }
.gfpr-table--primary td { padding: 12px 10px; }
.gfpr-table--primary tbody tr:nth-child(even) { background: rgba(34, 197, 94, .045); }
.gfpr-table--primary td:first-child b { color: var(--text-primary); font-size: 12px; }
.gfpr-table--primary td:last-child strong { color: #15803d; font-size: 15px; font-variant-numeric: tabular-nums; }
.gfpr-map-legend { margin-top: 9px; color: var(--text-secondary); font-size: 10px; }
.gfpr-legend-ramp { display: flex; height: 8px; margin: 6px 0 3px; overflow: hidden; border-radius: 99px; }
.gfpr-legend-ramp i { flex: 1; }
.gfpr-legend-labels { display: flex; justify-content: space-between; }
.gfpr-source { margin: 10px 0 0; color: var(--text-tertiary); font-size: 9px; line-height: 1.5; }
.gfpr-source a { color: var(--accent); }
.gf-dasimetri-desc { margin: 0 0 10px; color: var(--text-secondary); font-size: 10px; line-height: 1.55; }
.gf-dasimetri-controls { display: grid; grid-template-columns: auto minmax(140px, 1fr); align-items: center; gap: 6px; }
.gf-dasimetri-controls label { color: var(--text-secondary); font-size: 10px; font-weight: 700; }
.gf-dasimetri-controls select { min-width: 0; height: 34px; padding: 0 8px; border: 1px solid var(--border-color); border-radius: 8px; background: var(--bg-primary); color: var(--text-primary); font: inherit; font-size: 10px; }
.gf-dasimetri-controls button { min-height: 34px; padding: 0 10px; border: 1px solid #0f766e; border-radius: 8px; background: linear-gradient(120deg, #0f766e, #15803d); color: #fff; font: inherit; font-size: 9px; font-weight: 750; cursor: pointer; }
.gf-dasimetri-controls button:last-child { border-color: var(--border-color); background: var(--bg-secondary); color: var(--text-secondary); }
.gf-dasimetri-controls button:disabled { opacity: .5; cursor: not-allowed; }
.gf-dasimetri-summary { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 10px; }
.gf-dasimetri-summary[hidden] { display: none; }
.gf-dasimetri-summary > div { min-width: 0; padding: 8px; border: 1px solid var(--border-color); border-radius: 9px; background: var(--bg-secondary); }
.gf-dasimetri-summary small { display: block; color: var(--text-tertiary); font-size: 8px; }
.gf-dasimetri-summary b { display: block; margin-top: 3px; color: var(--text-primary); font-size: 11px; font-variant-numeric: tabular-nums; }
.gf-dasimetri-legend { margin-top: 9px; color: var(--text-secondary); font-size: 9px; }
.gf-dasimetri-ramp { height: 10px; margin: 7px 0 4px; overflow: hidden; border-radius: 99px; background: linear-gradient(90deg, #4b0082 0%, #2457ff 27%, #00b8d9 52%, #ff8a00 76%, #e6003d 100%); box-shadow: inset 0 0 0 1px rgba(15,23,42,.12); }
.gf-dasimetri-ramp i { display: none; }
.gf-dasimetri-labels { display: flex; justify-content: space-between; font-variant-numeric: tabular-nums; }
.gf-dasimetri-source { margin: 9px 0 0; color: var(--text-tertiary); font-size: 8px; line-height: 1.5; }
.gf-dasimetri-source a { color: var(--accent); }
#geofarmPetaDasimetri + #geotani-tutupan-card { margin-top: 10px; }
.gf-dasimetri-popup { min-width: 160px; font-size: 11px; line-height: 1.5; }
.gf-dasimetri-popup small { color: #64748b; font-size: 9px; }
.gf-dasimetri-analysis { margin-top: 12px; padding: 11px; border: 1px solid var(--border-color); border-radius: 12px; background: var(--bg-primary); }
.gf-dasimetri-analysis[hidden] { display: none; }
.gf-dasimetri-analysis h4 { margin: 0 0 9px; color: var(--text-primary); font-size: 12px; }
.gf-dasimetri-analysis h5 { margin: 11px 0 6px; color: var(--text-primary); font-size: 10px; }
.gf-dasimetri-chart-wrap { position: relative; height: 190px; }
.gf-dasimetri-table-wrap { max-width: 100%; overflow: auto; border: 1px solid var(--border-color); border-radius: 9px; }
.gf-dasimetri-table { width: 100%; border-collapse: separate; border-spacing: 0; color: var(--text-primary); font-size: 9px; white-space: nowrap; }
.gf-dasimetri-table th { position: sticky; top: 0; z-index: 1; padding: 7px; background: var(--bg-secondary); color: var(--text-secondary); text-align: left; }
.gf-dasimetri-table td { padding: 7px; border-top: 1px solid var(--border-color); font-variant-numeric: tabular-nums; }
.gf-dasimetri-table tbody tr:nth-child(even) { background: var(--bg-secondary); }
.gf-dasimetri-swatch { display: inline-block; width: 8px; height: 8px; margin-right: 5px; border-radius: 3px; vertical-align: middle; }
.gf-dasimetri-detail-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 10px; }
.gf-dasimetri-detail-head h5 { margin: 0; }
.gf-dasimetri-detail-head input { width: min(180px, 55%); height: 30px; padding: 0 8px; border: 1px solid var(--border-color); border-radius: 7px; background: var(--bg-primary); color: var(--text-primary); font: inherit; font-size: 9px; }
.gf-dasimetri-detail-wrap { max-height: 320px; margin-top: 6px; }
.gf-dasimetri-pagination { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 7px; color: var(--text-secondary); font-size: 8px; }
.gf-dasimetri-pagination > div { display: flex; gap: 5px; }
.gf-dasimetri-pagination button { min-height: 28px; padding: 0 8px; border: 1px solid var(--border-color); border-radius: 7px; background: var(--bg-secondary); color: var(--text-primary); font: inherit; font-size: 9px; cursor: pointer; }
.gf-dasimetri-pagination button:disabled { opacity: .45; cursor: default; }
.gf-dasimetri-method { margin: 8px 0 0; color: var(--text-tertiary); font-size: 8px; line-height: 1.5; }
@media (max-width: 480px) {
  .gf-dasimetri-controls { grid-template-columns: auto minmax(0, 1fr); }
  .gf-dasimetri-controls button { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
  .gfpr-filter-grid { grid-template-columns: 1fr; }
  .gfpr-filter-grid label:first-child,
  .gfpr-filter-grid label:nth-child(4),
  .gfpr-filter-grid label:nth-child(5) { grid-column: auto; }
}
.geofarm-ref:not([open]) > .geofarm-ref-body { display: none; }
.geofarm-ref-body { padding: 10px 12px 12px; }
.geofarm-ref-label {
  display: block;
  margin-bottom: 3px;
  font-size: 10px;
  font-weight: 600;
  color: var(--text-secondary);
}
.geofarm-ref-input, .geofarm-ref-select {
  width: 100%;
  padding: 7px 9px;
  font-size: 11px;
  font-family: inherit;
  color: var(--text-primary);
  background: var(--bg-input);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  outline: none;
  box-sizing: border-box;
}
.geofarm-ref-input:focus-visible, .geofarm-ref-select:focus-visible {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(8, 145, 178, .15);
}
.geofarm-ref-select { margin-top: 6px; }

.geofarm-ref-status {
  margin: 7px 0 0;
  font-size: 9.5px;
  line-height: 1.5;
  color: var(--text-muted);
}
.geofarm-ref-status.is-busy { color: var(--accent); }
.geofarm-ref-status.is-warn { color: #b45309; }
.geofarm-ref-status.is-error {
  color: #b91c1c;
  font-weight: 600;
}

/* Daftar digulir sendiri supaya 20 baris pertama tidak mendorong kartu
   lain di sheet GeoTools. 58vh sengaja sama dengan #geotoolsTabGeoFarm
   .pa-list di bawah supaya dua daftar di panel yang sama terasa sama tinggi.
   Konsekuensinya ada dua tingkat gulir (daftar ini di dalam gs-sheet-body
   yang juga bergulir); itu sudah berlaku di .pa-list dan tidak diubah di
   sini. overflow-x ditulis eksplisit seperti di sana, kalau tidak sumbu
   horizontal ikut auto dan muncul scrollbar kedua. */
.geofarm-ref-list {
  margin-top: 7px;
  max-height: 58vh;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

/* ── Kamus: isi pendek, selalu terlihat, tanpa <details> per baris ── */
.geofarm-ref-row {
  padding: 5px 0;
  border-bottom: 1px dotted var(--border-color);
}
.geofarm-ref-row:last-child { border-bottom: none; }
.geofarm-ref-row b {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-primary);
}
.geofarm-ref-row span {
  display: block;
  margin-top: 1px;
  font-size: 10px;
  line-height: 1.45;
  color: var(--text-secondary);
}

/* ── Artikel / Hama / Pestisida: <details> per entri, supaya isinya yang
      panjang baru ikut ke DOM saat barisnya dibuka ── */
.geofarm-ref-item { border-bottom: 1px dotted var(--border-color); }
.geofarm-ref-item:last-child { border-bottom: none; }
.geofarm-ref-item-sum {
  display: block;
  padding: 6px 4px 6px 0;
  font-size: 10.5px;
  line-height: 1.4;
  color: var(--text-primary);
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.geofarm-ref-item-sum::-webkit-details-marker { display: none; }
.geofarm-ref-item-sum::before {
  content: '\25B8\00a0';
  display: inline-block;
  color: var(--text-muted);
  transition: transform .15s;
}
.geofarm-ref-item[open] > .geofarm-ref-item-sum::before { transform: rotate(90deg); }
.geofarm-ref-item-sum:hover { color: var(--accent); }
.geofarm-ref-item-sum:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.geofarm-ref-item-sum b { font-weight: 700; }
.geofarm-ref-item-sum small {
  display: block;
  margin: 1px 0 0 14px;
  font-size: 9px;
  color: var(--text-muted);
}
.geofarm-ref-item-body {
  padding: 2px 0 9px 14px;
  font-size: 10px;
  line-height: 1.5;
  color: var(--text-secondary);
}
.geofarm-ref-badge {
  display: inline-block;
  margin-left: 5px;
  padding: 1px 5px;
  font-size: 8.5px;
  font-weight: 700;
  line-height: 1.5;
  border-radius: 999px;
  vertical-align: 1px;
}
.geofarm-ref-badge[data-kat="hama"] { background: #fee2e2; color: #991b1b; }
.geofarm-ref-badge[data-kat="penyakit"] { background: #dcfce7; color: #166534; }

.geofarm-ref-blok { margin: 0 0 6px; }
.geofarm-ref-sdg-tab { margin: 7px 0; border-top: 1px solid var(--border-color); padding-top: 6px; }
.geofarm-ref-sdg-tab > summary { cursor: pointer; font-weight: 700; color: var(--text-primary); }
.geofarm-ref-sdg-tab > div { padding: 7px 0 0 8px; }
.geofarm-ref-blok b {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text-muted);
}
.geofarm-ref-poster {
  display: block;
  width: 100%;
  max-height: 190px;
  margin: 0 0 8px;
  object-fit: cover;
  border-radius: 6px;
  background: var(--bg-primary);
}

/* ── Isi artikel & tabel detail hama ──
   Dua sumber punya gaya sendiri yang tidak konsisten satu sama lain dan
   tidak cocok dengan kartu: blog.js menulis <p>/<ul>/<ol>/<h4> dengan
   <br> hard, opete.js menulis <table border=0 width=90%>. Yang di style
   di sini hanya tag-tag itu, dan width=90% ditimpa supaya tabel mengisi
   kartu dan tidak menggantung di kiri. */
.geofarm-ref-konten p { margin: 0 0 7px; }
.geofarm-ref-konten p:last-child { margin-bottom: 0; }
.geofarm-ref-konten ul, .geofarm-ref-konten ol { margin: 0 0 7px; padding-left: 17px; }
.geofarm-ref-konten li { margin-bottom: 3px; }
.geofarm-ref-konten h4 {
  margin: 10px 0 5px;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--text-primary);
}
.geofarm-ref-konten strong, .geofarm-ref-konten b { color: var(--text-primary); }
.geofarm-ref-konten table {
  width: 100%;
  border-collapse: collapse;
  margin: 0;
}
.geofarm-ref-konten td {
  padding: 3px 4px 3px 0;
  vertical-align: top;
  border-bottom: 1px dotted var(--border-color);
}
.geofarm-ref-konten tr:last-child td { border-bottom: none; }
.geofarm-ref-konten td:nth-child(2) { width: 14px; color: var(--text-muted); }

.geofarm-ref-more {
  width: 100%;
  margin-top: 8px;
  padding: 6px 8px;
  font-size: 10px;
  font-weight: 600;
  font-family: inherit;
  color: var(--accent);
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.geofarm-ref-more:hover { background: var(--bg-card-hover); border-color: var(--accent); }
.geofarm-ref-more:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

[data-theme="dark"] .geofarm-ref-status.is-warn { color: #fde68a; }
[data-theme="dark"] .geofarm-ref-status.is-error { color: #fca5a5; }
[data-theme="dark"] .geofarm-ref-badge[data-kat="hama"] { background: #450a0a; color: #fecaca; }
[data-theme="dark"] .geofarm-ref-badge[data-kat="penyakit"] { background: #052e16; color: #bbf7d0; }
[data-theme="dark"] .geofarm-ref-poster { background: #0b1220; }

/* Login Google ditampilkan saat item sheet di menu FAB dipilih. */
.rk-auth-backdrop {
  position: fixed;
  inset: 0;
  z-index: 12000;
  display: grid;
  place-items: center;
  padding: 16px;
  overflow: hidden;
  background: rgba(7, 18, 34, .66);
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
}
.rk-auth-backdrop[hidden] { display: none !important; }
.rk-auth-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(260px, .84fr) minmax(370px, 1.16fr);
  width: min(820px, 100%);
  height: min(540px, calc(100dvh - 32px));
  max-height: calc(100dvh - 32px);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 32px 100px rgba(2, 12, 27, .42);
  color: #10243a;
  text-align: left;
}
.rk-auth-visual { position: relative; display: flex; flex-direction: column; justify-content: space-between; min-width: 0; overflow: hidden; padding: 30px 30px 24px; background: radial-gradient(ellipse at 75% 70%, rgba(20, 184, 166, .26), transparent 42%), linear-gradient(150deg, #0c2340 0%, #102e4f 55%, #0c4757 100%); color: #f4fbff; }
.rk-auth-visual::before, .rk-auth-visual::after { position: absolute; inset: 0; pointer-events: none; content: ''; }
.rk-auth-visual::before { opacity: .19; background-image: linear-gradient(rgba(183, 225, 241, .22) 1px, transparent 1px), linear-gradient(90deg, rgba(183, 225, 241, .22) 1px, transparent 1px); background-size: 34px 34px; mask-image: linear-gradient(145deg, #000, transparent 82%); }
.rk-auth-visual::after { inset: auto -80px 95px auto; width: 300px; height: 300px; border: 1px solid rgba(113, 226, 211, .2); border-radius: 48% 52% 63% 37%; transform: rotate(-28deg); box-shadow: 0 0 0 24px rgba(113, 226, 211, .035), 0 0 0 48px rgba(113, 226, 211, .025); }
.rk-auth-brand { position: relative; z-index: 1; display: flex; align-items: center; gap: 11px; }
.rk-auth-brand > span:last-child { display: grid; gap: 3px; }
.rk-auth-brand b { font-size: 13px; letter-spacing: .12em; }
.rk-auth-brand small { color: #9db8cd; font-size: 8px; font-weight: 700; letter-spacing: .16em; }
.rk-auth-mark {
  display: grid;
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  place-items: center;
  border: 1px solid rgba(169, 230, 231, .44);
  border-radius: 13px;
  background: linear-gradient(145deg, rgba(255, 255, 255, .2), rgba(110, 231, 219, .1));
  color: #d8fffa;
  font-size: 15px;
  font-weight: 800;
}
.rk-auth-visual-copy { position: relative; z-index: 1; margin: auto 0; padding: 30px 0 18px; }
.rk-auth-visual-copy > span, .rk-auth-heading > span { color: #14a99c; font-size: 9px; font-weight: 800; letter-spacing: .17em; }
.rk-auth-visual-copy > span { color: #74e3d4; }
.rk-auth-visual-copy h2 { margin: 14px 0 11px; font-size: clamp(23px, 2.5vw, 31px); line-height: 1.17; letter-spacing: -.04em; }
.rk-auth-visual-copy p { max-width: 260px; margin: 0; color: #b7cad9; font-size: 12px; line-height: 1.65; }
.rk-auth-map-art { position: absolute; z-index: 1; right: 20px; bottom: 78px; width: 155px; height: 100px; border: 1px solid rgba(137, 220, 214, .27); border-radius: 13px; background: rgba(4, 28, 48, .28); transform: rotate(-8deg); }
.rk-auth-map-art::before, .rk-auth-map-art::after { position: absolute; inset: 0; border-radius: inherit; content: ''; }
.rk-auth-map-art::before { background: linear-gradient(35deg, transparent 45%, rgba(104, 221, 205, .65) 46%, rgba(104, 221, 205, .65) 47%, transparent 48%), linear-gradient(140deg, transparent 39%, rgba(112, 183, 219, .62) 40%, rgba(112, 183, 219, .62) 41%, transparent 42%); }
.rk-auth-map-art::after { inset: 29px 55px; border: 1px solid rgba(142, 244, 205, .75); border-radius: 50%; box-shadow: 0 0 14px rgba(42, 232, 193, .5); }
.rk-auth-map-art i { position: absolute; z-index: 1; width: 5px; height: 5px; border: 1px solid #d1fff5; border-radius: 50%; background: #22c7ad; box-shadow: 0 0 0 4px rgba(34, 199, 173, .2); }
.rk-auth-map-art i:nth-child(1) { top: 20px; left: 34px; }.rk-auth-map-art i:nth-child(2) { top: 62px; left: 105px; }.rk-auth-map-art i:nth-child(3) { top: 43px; left: 73px; }
.rk-auth-map-art b { position: absolute; right: 8px; bottom: 7px; color: rgba(211, 235, 239, .68); font-size: 6px; letter-spacing: .08em; }
.rk-auth-map-art b:first-of-type { right: auto; left: 8px; }
.rk-auth-visual-foot { position: relative; z-index: 1; display: flex; align-items: center; gap: 8px; color: #9bb5c7; font-size: 8px; font-weight: 700; letter-spacing: .17em; }
.rk-auth-visual-foot i { width: 3px; height: 3px; border-radius: 50%; background: #5bd6c6; }
.rk-auth-panel { display: flex; min-width: 0; flex-direction: column; justify-content: center; padding: 37px clamp(28px, 5vw, 54px) 25px; }
.rk-auth-heading { margin-bottom: 15px; }
.rk-auth-heading h1 { margin: 7px 0 4px; color: #10243a; font-size: 25px; line-height: 1.2; letter-spacing: -.04em; }
.rk-auth-heading p { margin: 0; color: #718197; font-size: 11px; }
.rk-auth-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; margin: 0 0 13px; padding: 4px; border: 1px solid #e5edf3; border-radius: 11px; background: #f3f7fa; }
.rk-auth-tab { min-height: 34px; border: 0; border-radius: 8px; background: transparent; color: #718197; font: inherit; font-size: 11px; font-weight: 750; cursor: pointer; transition: .16s ease; }
.rk-auth-tab.is-active { background: #fff; color: #123a54; box-shadow: 0 2px 7px rgba(18, 50, 75, .1); }
.rk-auth-form { display: grid; gap: 8px; text-align: left; }
.rk-auth-form [hidden] { display: none !important; }
.rk-auth-form label { display: grid; gap: 5px; color: #52677d; font-size: 10px; font-weight: 700; }
.rk-auth-form input { width: 100%; min-height: 39px; box-sizing: border-box; padding: 0 11px; border: 1px solid #dce6ed; border-radius: 8px; outline: none; background: #fff; color: #10243a; font: inherit; font-size: 11px; transition: border-color .16s, box-shadow .16s; }
.rk-auth-form input::placeholder { color: #9aa9b8; }
.rk-auth-form input:focus { border-color: #168f9a; box-shadow: 0 0 0 3px rgba(22, 143, 154, .12); }
.rk-auth-link { justify-self: end; padding: 0; border: 0; background: transparent; color: #147e8b; font: inherit; font-size: 10px; font-weight: 700; cursor: pointer; }
.rk-auth-submit { min-height: 40px; border: 0; border-radius: 8px; background: linear-gradient(110deg, #126f8b, #138d83); color: #fff; font: inherit; font-size: 11px; font-weight: 800; letter-spacing: .02em; cursor: pointer; box-shadow: 0 5px 12px rgba(15, 119, 132, .18); transition: transform .16s, box-shadow .16s; }
.rk-auth-submit:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 8px 16px rgba(15, 119, 132, .24); }
.rk-auth-submit:disabled { opacity: .6; cursor: wait; }
.rk-auth-divider { display: flex; align-items: center; gap: 10px; margin: 11px 0 9px; color: #91a0af; font-size: 9px; }
.rk-auth-divider::before, .rk-auth-divider::after { content: ''; flex: 1; height: 1px; background: #e5edf3; }
.rk-auth-close {
  position: absolute;
  z-index: 3;
  top: 13px;
  right: 13px;
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border: 0;
  border-radius: 9px;
  background: #f0f4f7;
  color: #5d7083;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
.rk-auth-close:hover { background: #e3edf2; color: #163750; }
.rk-auth-google {
  display: flex;
  width: 100%;
  min-height: 39px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 12px;
  border: 1px solid #dce6ed;
  border-radius: 8px;
  background: #fff;
  color: #344c62;
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}
.rk-auth-google:hover { border-color: #bdcfdc; background: #f8fbfd; }
.rk-auth-google:disabled { opacity: .6; cursor: wait; }
.rk-auth-google > span { color: #4285f4; font-size: 17px; font-weight: 800; }
.rk-auth-status { min-height: 0; margin: 7px 0 0; color: #51677b; font-size: 10px !important; line-height: 1.4; }
.rk-auth-status:empty { display: none; }
.rk-auth-legal { margin: 8px 0 0; color: #93a1ae; font-size: 9px; line-height: 1.4; text-align: center; }
.map-fab-item.rk-auth-account img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}
.map-fab-item.rk-auth-account > span { font-size: 17px; font-weight: 800; }
@media (max-width: 768px) {
  .map-fab-item.rk-auth-account {
    display: grid !important;
    flex: 0 0 42px;
    width: 42px !important;
    height: 42px !important;
    min-width: 42px;
    min-height: 42px;
    padding: 5px !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 50% !important;
    background: var(--bg-card) !important;
    color: var(--accent) !important;
  }
  .map-fab-item.rk-auth-account img { width: 22px; height: 22px; }
}
/* FITUR CEBOL SEMBUNYI SEMENTARA (2026-11-01): avatar akun (foto/inisial
   pengguna Google) di menu FAB disembunyikan atas permintaan user.
   Hapus aturan ini untuk mengunculkan kembali -- tombol, renderAccountButton(),
   dan alur keluar akun di firebase-auth-gate.js tetap utuh. !important +
   ditaruh SETELAH blok @media 768px agar display:grid !important di mobile
   ikut terkalahkan. */
.map-fab-item.rk-auth-account { display: none !important; }
@media (max-width: 700px) {
  .rk-auth-card { display: block; width: min(430px, 100%); height: auto; min-height: 0; border-radius: 18px; }
  .rk-auth-visual { min-height: 82px; padding: 17px 20px; }
  .rk-auth-brand .rk-auth-mark { flex-basis: 37px; width: 37px; height: 37px; }
  .rk-auth-visual-copy, .rk-auth-map-art, .rk-auth-visual-foot { display: none; }
  .rk-auth-panel { padding: 23px 23px 18px; }
  .rk-auth-heading { margin-bottom: 12px; }
  .rk-auth-heading h1 { font-size: 22px; }
  .rk-auth-close { top: 14px; right: 14px; }
}
@media (max-height: 620px) {
  .rk-auth-card { height: calc(100dvh - 24px); }
  .rk-auth-visual { padding-top: 20px; padding-bottom: 18px; }
  .rk-auth-visual-copy { padding-top: 16px; padding-bottom: 8px; }
  .rk-auth-visual-copy h2 { margin: 8px 0; font-size: 24px; }
  .rk-auth-panel { padding-top: 26px; padding-bottom: 18px; }
  .rk-auth-heading { margin-bottom: 9px; }
  .rk-auth-tabs { margin-bottom: 9px; }
  .rk-auth-form { gap: 6px; }
  .rk-auth-form input { min-height: 35px; }
  .rk-auth-submit, .rk-auth-google { min-height: 36px; }
  .rk-auth-divider { margin: 7px 0; }
}
@media (max-width: 700px) and (max-height: 620px) {
  .rk-auth-card { height: auto; max-height: calc(100dvh - 20px); }
  .rk-auth-visual { min-height: 66px; padding: 12px 18px; }
  .rk-auth-panel { padding: 15px 20px 13px; }
  .rk-auth-heading h1 { margin-top: 4px; font-size: 20px; }
  .rk-auth-heading p { font-size: 10px; }
}

/* Saat panel kanan terbuka, gunakan hanya bidang peta yang tidak tertutup.
   Pusat Leaflet dan hasil polygon otomatis berada di tengah area tersebut. */
@media (min-width: 769px) {
  body.sheet-terbuka #map {
    flex: 0 0 calc(100vw - var(--desktop-sheet-width, 30vw));
    width: calc(100vw - var(--desktop-sheet-width, 30vw));
    max-width: calc(100vw - var(--desktop-sheet-width, 30vw));
    transition: flex-basis .3s ease, width .3s ease;
  }

  body.sheet-terbuka .unified-search,
  body.sheet-terbuka .quick-layer-bar,
  body.sheet-terbuka .petadasar-export-block {
    left: calc((100vw - var(--desktop-sheet-width, 30vw)) / 2);
    transition: left .3s ease;
  }

  /* Pill zoom (bawah tengah) juga ikut bergeser mengikuti bidang peta
     yang tersisa, bukan tetap di tengah viewport penuh -- dulu hanya sheet
     Katalog yang menggesernya (aturan khusus di bawah). map-core.js
     memasang left:50% sebagai inline style pada elemen ini, jadi perlu
     !important. Saat sheet diminimalkan jadi chip, body.sheet-terbuka
     dilepas dan zoom kembali ke tengah otomatis. (2026-10-31) */
  body.sheet-terbuka .zoom-control-wrap {
    left: calc((100vw - var(--desktop-sheet-width, 30vw)) / 2) !important;
    transition: left .3s ease;
  }

  /* Chip mode minimal ikut bergeser sejajar pill zoom saat ada sheet kanan
     terbuka (2026-11-01): keduanya satu "pita bawah tengah" (lihat catatan
     Pita bawah tengah di blok .zoom-control-wrap), dan tanpa aturan ini chip
     tetap di 50% viewport sehingga tidak sejajar dengan zoom yang sudah
     bergeser ke tengah bidang peta. Posisi left chip murni dari CSS (JS
     hanya mengatur bottom secara inline), jadi cukup menang spesifisitas,
     tanpa !important. Saat semua sheet ditutup/diminimalkan,
     body.sheet-terbuka dilepas dan keduanya sama-sama kembali ke tengah. */
  body.sheet-terbuka :is(
    #hotspot-sheet.sheet-minimized,
    #geopangan-sheet.sheet-minimized,
    :is(#transjakarta-sheet, #transjogja-sheet).sheet-minimized,
    #ai-sheet.ais-sheet-minimized,
    #geotools-sheet.gs-sheet-minimized,
    #geodata-sheet.geodata-sheet-minimized,
    #attr-table-sheet.attr-table-sheet-minimized,
    #detail-panel.detail-panel-minimized,
    #catalog-popup-sheet.is-minimized,
    .bhumi-persil-sheet.is-minimized,
    .dm-sidebar.dm-sidebar-minimized,
    .lg-sidebar.lg-sidebar-minimized,
    .lg-sidebar.dm-sidebar-minimized,
    .pa-panel.pa-min,
    .al-sidebar.al-sidebar-minimized
  ) {
    left: calc((100vw - var(--desktop-sheet-width, 30vw)) / 2);
    transition: left .3s ease;
  }

  body.catalog-popup-sheet-open:not(.catalog-popup-sheet-minimized) #map {
    flex: 0 0 calc(100vw - var(--desktop-sheet-width, 30vw)) !important;
    width: calc(100vw - var(--desktop-sheet-width, 30vw)) !important;
    max-width: calc(100vw - var(--desktop-sheet-width, 30vw)) !important;
  }
  body.catalog-popup-sheet-open:not(.catalog-popup-sheet-minimized) .unified-search,
  body.catalog-popup-sheet-open:not(.catalog-popup-sheet-minimized) .quick-layer-bar,
  body.catalog-popup-sheet-open:not(.catalog-popup-sheet-minimized) .petadasar-export-block {
    left: calc((100vw - var(--desktop-sheet-width, 30vw)) / 2) !important;
  }
  body.catalog-popup-sheet-open:not(.catalog-popup-sheet-minimized) .zoom-control-wrap {
    left: calc((100vw - var(--desktop-sheet-width, 30vw)) / 2) !important;
  }
}

/* Desktop: samakan lebar seluruh sheet dan panel peta. */
@media (min-width: 769px) {
  :is(
    #hotspot-sheet,
    #geopangan-sheet,
    #transjakarta-sheet,
    #transjogja-sheet,
    #geotools-sheet,
    #geodata-sheet,
    #attr-table-sheet,
    #ai-sheet,
    .dm-sidebar,
    .lg-sidebar,
    .al-sidebar,
    .pa-panel
  ):not(.sheet-minimized):not(.gs-sheet-minimized):not(.geodata-sheet-minimized):not(.attr-table-sheet-minimized):not(.ais-sheet-minimized):not(.dm-sidebar-minimized):not(.lg-sidebar-minimized):not(.al-sidebar-minimized):not(.pa-min) {
    box-sizing: border-box;
    top: 0;
    right: 0;
    bottom: 0;
    width: var(--desktop-sheet-width, 30vw);
    max-width: 50vw;
    height: 100dvh;
    max-height: 100dvh;
    border-radius: 0;
  }

  /* Keempat panel ini memakai bingkai desktop yang sama saat terbuka. */
  :is(
    #geotools-sheet:not(.gs-sheet-minimized),
    #legendSidebar:not(.lg-sidebar-minimized),
    #attr-table-sheet:not(.attr-table-sheet-minimized),
    #geodata-sheet:not(.geodata-sheet-minimized),
    #drawSidebar:not(.dm-sidebar-minimized)
  ) {
    top: 0;
    right: 0;
    bottom: 0;
    width: var(--desktop-sheet-width, 30vw);
    max-width: 50vw;
    height: 100dvh;
    max-height: 100dvh;
    border-radius: 0;
  }

  :is(#catalog-popup-sheet,#hotspot-sheet,#geopangan-sheet,#transjakarta-sheet,#transjogja-sheet,#geotools-sheet,#geodata-sheet,#attr-table-sheet,#ai-sheet,.dm-sidebar,.lg-sidebar,.al-sidebar,.pa-panel):not(.sheet-minimized):not(.gs-sheet-minimized):not(.geodata-sheet-minimized):not(.attr-table-sheet-minimized):not(.ais-sheet-minimized):not(.dm-sidebar-minimized):not(.lg-sidebar-minimized):not(.al-sidebar-minimized):not(.pa-min)::before {
    content: "";
    position: absolute;
    z-index: 20;
    top: 0;
    bottom: 0;
    left: 0;
    width: 8px;
    cursor: ew-resize;
    touch-action: none;
    background: linear-gradient(90deg, transparent 0 4px, color-mix(in srgb, var(--border-color) 65%, transparent) 4px 6px, transparent 6px);
  }

  /* Sheet Tabel, Legenda, dan Detail Layer didock di kiri; sisi resize-nya
     berada di tepi kanan yang berbatasan dengan peta. */
  :is(#catalog-popup-sheet, #attr-table-sheet, #legendSidebar):not(.is-minimized):not(.attr-table-sheet-minimized):not(.lg-sidebar-minimized)::before {
    right: 0;
    left: auto;
    background: linear-gradient(270deg, transparent 0 4px, color-mix(in srgb, var(--border-color) 65%, transparent) 4px 6px, transparent 6px);
  }
  :is(#catalog-popup-sheet, #attr-table-sheet, #legendSidebar) > .sheet-resize-handle {
    position: absolute;
    z-index: 1201;
    top: 0;
    right: 0;
    bottom: 0;
    width: 12px;
    cursor: ew-resize;
    touch-action: none;
    background: linear-gradient(270deg, transparent 0 5px, color-mix(in srgb, var(--border-color) 65%, transparent) 5px 7px, transparent 7px);
  }
  :is(#catalog-popup-sheet, #attr-table-sheet, #legendSidebar).is-minimized > .sheet-resize-handle,
  #attr-table-sheet.attr-table-sheet-minimized > .sheet-resize-handle,
  #legendSidebar.lg-sidebar-minimized > .sheet-resize-handle { display: none; }

  :is(#catalog-popup-sheet,#hotspot-sheet,#geopangan-sheet,#transjakarta-sheet,#transjogja-sheet,#geotools-sheet,#geodata-sheet,#attr-table-sheet,#ai-sheet,.dm-sidebar,.lg-sidebar,.al-sidebar,.pa-panel).desktop-sheet-resizing {
    transition: none !important;
    user-select: none;
  }

  /* Perencana rute dirender sebagai panel terpisah dari sheet daftar. */
  .tj-routing-panel {
    position: fixed;
    z-index: 1101;
    top: 0;
    right: 0;
    bottom: 0;
    left: auto;
    box-sizing: border-box;
    width: 30vw;
    max-width: 30vw;
    height: 100dvh;
    max-height: 100dvh;
    overflow-x: hidden;
    overflow-y: auto;
    margin: 0;
    padding: 18px;
    border: 1px solid rgba(203, 213, 225, .9);
    border-radius: 0;
    background: rgba(255, 255, 255, .97);
    box-shadow: 0 8px 28px rgba(15, 23, 42, .2);
    color: #0f172a;
  }

  .tj-routing-panel.is-minimized {
    top: 120px;
    bottom: auto;
    height: auto;
    max-height: none;
    padding: 12px 16px;
    border-radius: 16px;
  }

  .tj-routing-panel.is-minimized .tj-routing-fields,
  .tj-routing-panel.is-minimized .tj-routing-note,
  .tj-routing-panel.is-minimized .tj-routing-result,
  .tj-routing-panel.is-minimized .tj-routing-actions { display: none; }
  .tj-routing-panel.is-minimized .tj-routing-head {
    position: static;
    margin: -12px -16px 8px;
    padding: 10px 12px;
    border-radius: 16px 16px 0 0;
  }

  .tj-routing-head {
    position: sticky;
    top: -18px;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin: -18px -18px 10px;
    padding: 14px 18px 10px;
    border-bottom: 1px solid rgba(203, 213, 225, .72);
    border-radius: 16px 16px 0 0;
    background: rgba(255, 255, 255, .98);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
  }

  .tj-routing-head > div:first-child { min-width: 0; }
  .tj-routing-eyebrow { color: #0e7490; font-size: 9px; font-weight: 800; letter-spacing: .1em; }
  .tj-routing-head h3 { margin: 2px 0 0; color: #0f172a; font-size: 16px; line-height: 1.2; }
  .tj-routing-close { flex: 0 0 28px; width: 28px; height: 28px; border: 0; border-radius: 50%; background: #f1f5f9; color: #64748b; font-size: 20px; line-height: 1; cursor: pointer; }
  .tj-routing-minimize { display: grid; flex: 0 0 28px; width: 28px; height: 28px; margin-left: auto; place-items: center; border: 0; border-radius: 50%; background: #f1f5f9; color: #475569; cursor: pointer; }
  .tj-routing-minimize:hover { background: #e2e8f0; color: #334155; }
  .tj-routing-minimize:focus-visible { outline: 2px solid #0891b2; outline-offset: 2px; }
  .tj-routing-corridor { display: flex; align-items: center; gap: 9px; padding: 9px 10px; border: 1px solid #bae6fd; border-radius: 11px; background: #f0f9ff; }
  .tj-routing-corridor b, .tj-routing-corridor small { display: block; }
  .tj-routing-corridor b { color: #0f172a; font-size: 12px; }
  .tj-routing-corridor small { margin-top: 2px; color: #475569; font-size: 10px; }
  .tj-routing-dot { width: 10px; height: 10px; flex: 0 0 auto; border: 3px solid #0891b2; border-radius: 50%; background: white; }
  .tj-routing-fields { position: relative; display: grid; gap: 7px; margin: 10px 0; }
  .tj-routing-fields label { position: relative; display: block; padding-left: 22px; }
  .tj-routing-fields input { box-sizing: border-box; width: 100%; height: 38px; padding: 0 10px; border: 1px solid #cbd5e1; border-radius: 9px; outline: none; background: #fff; color: #0f172a; font: inherit; font-size: 12px; }
  .tj-routing-fields input:focus { border-color: #06b6d4; box-shadow: 0 0 0 3px rgba(6, 182, 212, .12); }
  .tj-stop-suggestions { position: absolute; top: calc(100% + 4px); right: 0; left: 22px; z-index: 20; max-height: 190px; overflow-y: auto; overscroll-behavior: contain; padding: 4px; border: 1px solid #cbd5e1; border-radius: 10px; background: #fff; box-shadow: 0 8px 22px rgba(15, 23, 42, .16); }
  .tj-stop-suggestions[hidden] { display: none; }
  .tj-stop-suggestion { display: block; width: 100%; min-height: 40px; padding: 9px 10px; border: 0; border-radius: 7px; background: transparent; color: #0f172a; font: inherit; font-size: 12px; text-align: left; cursor: pointer; touch-action: manipulation; }
  .tj-stop-suggestion:hover, .tj-stop-suggestion:focus-visible { outline: none; background: #ecfeff; color: #0e7490; }
  .tj-stop-no-suggestion { display: block; padding: 10px; color: #64748b; font-size: 11px; }
  .tj-routing-origin-dot, .tj-routing-dest-dot { position: absolute; top: 12px; left: 5px; width: 10px; height: 10px; border: 2px solid #0891b2; border-radius: 50%; background: white; }
  .tj-routing-dest-dot { border-color: #f97316; border-radius: 2px; }
  .tj-routing-connector { position: absolute; top: 27px; bottom: 27px; left: 10px; border-left: 1px dashed #94a3b8; }
  .tj-routing-note { display: grid; min-width: 0; gap: 3px; padding: 8px 10px; border-radius: 9px; background: #f8fafc; overflow-wrap: anywhere; }
  .tj-routing-note b { font-size: 10px; color: #334155; }
  .tj-routing-note span { font-size: 10px; line-height: 1.4; color: #475569; }
  .tj-routing-note small { margin-top: 2px; font-size: 9px; line-height: 1.35; color: #64748b; }
  .tj-routing-result { min-width: 0; margin-top: 8px; padding: 8px 10px; border-left: 3px solid #06b6d4; border-radius: 6px; background: #ecfeff; color: #164e63; font-size: 10px; line-height: 1.4; overflow-wrap: anywhere; }
  .tj-route-road-summary { display: grid; gap: 2px; }
  .tj-route-road-summary b { font-size: 11px; }
  .tj-route-road-summary span { color: #475569; font-size: 9px; }
  .tj-route-compare { margin-top: 10px; padding-top: 9px; border-top: 1px solid #cbd5e1; }
  .tj-route-compare > b { font-size: 11px; color: #0f172a; }
  .tj-route-compare > p { margin: 3px 0 7px; color: #64748b; font-size: 9px; line-height: 1.35; }
  .tj-route-compare-table { max-height: 180px; overflow: auto; }
  .tj-route-compare table { width: 100%; border-collapse: collapse; font-size: 10px; }
  .tj-route-compare th, .tj-route-compare td { padding: 6px 7px; border-bottom: 1px solid #e2e8f0; text-align: left; }
  .tj-route-compare th { position: sticky; top: 0; background: #f8fafc; color: #64748b; font-size: 9px; }
  .tj-route-compare td:last-child, .tj-route-compare th:last-child { text-align: right; white-space: nowrap; }
  .tj-route-compare tr.is-selected td { background: #cffafe; color: #0e7490; font-weight: 750; }
  .tj-route-compare td small { color: #0e7490; font-size: 8px; }
  .tj-route-compare > p:only-child { padding: 7px; border-radius: 7px; background: #fff7ed; }
  .tj-routing-actions { display: flex; gap: 8px; margin-top: 9px; }
  .tj-routing-actions button { min-width: 0; min-height: 36px; border: 0; border-radius: 9px; cursor: pointer; font: inherit; font-size: 11px; font-weight: 750; }
  .tj-routing-actions [data-tj-routing-swap] { flex: 0 0 40px; width: 40px; background: #f1f5f9; color: #475569; font-size: 18px; }
  .tj-routing-actions .tj-routing-submit { flex: 1 1 auto; padding: 0 12px; background: #0891b2; color: white; }

  body.hotspot-sheet-open:not(.hotspot-sheet-minimized) .leaflet-bottom.leaflet-right,
  body.geopangan-sheet-open:not(.geopangan-sheet-minimized) .leaflet-bottom.leaflet-right,
  body.geodata-sheet-open:not(.geodata-sheet-minimized) .leaflet-bottom.leaflet-right,
  body.attr-table-sheet-open:not(.attr-table-sheet-minimized) .leaflet-bottom.leaflet-right {
    right: 12px;
  }

  body.transjakarta-sheet-open:not(.transjakarta-sheet-minimized) .leaflet-bottom.leaflet-right,
  body.transjogja-sheet-open:not(.transjogja-sheet-minimized) .leaflet-bottom.leaflet-right {
    right: 12px;
  }

  [data-theme="dark"] .tj-routing-panel {
    border-color: #334155;
    background: rgba(15, 23, 42, .97);
    color: #e2e8f0;
  }
  [data-theme="dark"] .tj-routing-head { border-bottom-color: rgba(71, 85, 105, .8); background: rgba(15, 23, 42, .98); }
  [data-theme="dark"] .tj-routing-head h3,
  [data-theme="dark"] .tj-routing-corridor b { color: #f1f5f9; }
  [data-theme="dark"] .tj-routing-minimize,
  [data-theme="dark"] .tj-routing-close { background: #1e293b; color: #cbd5e1; }
  [data-theme="dark"] .tj-routing-corridor { border-color: #164e63; background: #102b3a; }
  [data-theme="dark"] .tj-routing-corridor small,
  [data-theme="dark"] .tj-routing-note span { color: #cbd5e1; }
  [data-theme="dark"] .tj-routing-fields input { border-color: #475569; background: #1e293b; color: #f1f5f9; }
  [data-theme="dark"] .tj-stop-suggestions { border-color: #475569; background: #0f172a; }
  [data-theme="dark"] .tj-stop-suggestion { color: #e2e8f0; }
  [data-theme="dark"] .tj-stop-suggestion:hover,
  [data-theme="dark"] .tj-stop-suggestion:focus-visible { background: #164e63; color: #cffafe; }
  [data-theme="dark"] .tj-stop-no-suggestion { color: #94a3b8; }
  [data-theme="dark"] .tj-routing-note { background: #1e293b; }
  [data-theme="dark"] .tj-routing-note b,
  [data-theme="dark"] .tj-route-compare > b { color: #e2e8f0; }
  [data-theme="dark"] .tj-routing-result { border-left-color: #22d3ee; background: #083344; color: #cffafe; }
  [data-theme="dark"] .tj-route-road-summary span { color: #cbd5e1; }
  [data-theme="dark"] .tj-route-compare { border-top-color: #475569; }
  [data-theme="dark"] .tj-route-compare th { background: #1e293b; color: #cbd5e1; }
  [data-theme="dark"] .tj-route-compare th,
  [data-theme="dark"] .tj-route-compare td { border-bottom-color: #334155; }
  [data-theme="dark"] .tj-route-compare tr.is-selected td { background: #164e63; color: #cffafe; }
  [data-theme="dark"] .tj-route-compare td small { color: #67e8f9; }
}

/* Konverter koordinat pada sheet Alat */
.dm-koordinat-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0 0 9px; }
.dm-koordinat-selects { grid-template-columns: 1fr; }
.dm-koordinat-fields label { display: grid; gap: 4px; color: var(--text-secondary, #64748b); font-size: 10px; font-weight: 650; }
.dm-koordinat-fields input { box-sizing: border-box; width: 100%; min-width: 0; padding: 8px; border: 1px solid var(--border-color, #cbd5e1); border-radius: 7px; background: var(--bg-input, #fff); color: var(--text-primary, #1e293b); font: inherit; font-size: 12px; }
.dm-koordinat-fields input:focus { outline: 2px solid rgba(8, 145, 178, .22); border-color: #0891b2; }
.dm-coord-results { display: grid; gap: 5px; margin-top: 9px; }
.dm-coord-result { display: grid; gap: 3px; padding: 7px 8px; border: 1px solid var(--border-color, #e2e8f0); border-radius: 7px; background: var(--bg-secondary, #f8fafc); }
.dm-coord-result span { color: var(--text-muted, #64748b); font-size: 9px; }
.dm-coord-result strong { color: var(--text-primary, #1e293b); font-size: 10px; overflow-wrap: anywhere; }
.dm-koordinat-actions { display: flex; gap: 7px; margin-top: 8px; }
.dm-koordinat-actions button { flex: 1; }
.dm-koordinat-actions button:disabled { opacity: .5; cursor: not-allowed; }
.dm-koordinat-fields select { box-sizing: border-box; width: 100%; min-width: 0; padding: 8px; border: 1px solid var(--border-color, #cbd5e1); border-radius: 7px; background: var(--bg-input, #fff); color: var(--text-primary, #1e293b); font: inherit; font-size: 10px; }
.dm-koordinat-fields select:focus { outline: 2px solid rgba(8, 145, 178, .22); border-color: #0891b2; }

/* Keep a clear gap between the DEMNAS downloader and GeoPortal Hub cards. */
#geotoolsTabGeoportal > .georaster-card + .geoportal-card {
  margin-top: 12px;
}



    #activeLayersSidebar .lc-pin-btn { display: none !important; }

    /* Sembunyikan kartu Analisis Jaringan & Perjalanan di GeoNusa GeoTools. */
    #networkRouteCard { display: none !important; }

@media (min-width: 769px) {
  /* FAB desktop tampil terus; aturan ini tetap berlaku walau klik peta menutup state JS. */
  .map-fab-wrap .map-fab-items { opacity: 1 !important; transform: none !important; pointer-events: auto !important; }
  .map-fab-wrap .map-fab-item { opacity: 1 !important; transform: none !important; }
  .map-fab-wrap .map-fab-btn { display: none !important; }
}


@media (max-width: 768px) {
  /* Saat satu tabel terbuka, header sheet dan kontrol tetap terlihat;
     isi tabel memakai area gulir vertikal dan horizontalnya sendiri. */
  #attr-table-sheet.at-table-scroll-mode { --sheet-h: min(72dvh, 680px); }
  #attr-table-sheet.at-table-scroll-mode .at-sheet-body { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
  #attr-table-sheet.at-table-scroll-mode #at-sheet-content { display: flex; flex: 1 1 auto; flex-direction: column; min-height: 0; overflow: hidden; }
  #attr-table-sheet.at-table-scroll-mode .at-layer-subtitle,
  #attr-table-sheet.at-table-scroll-mode .at-controls,
  #attr-table-sheet.at-table-scroll-mode .at-pagination { flex: 0 0 auto; }
  #attr-table-sheet.at-table-scroll-mode .at-table-wrap { flex: 1 1 0; min-height: 100px; max-height: none; overflow: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
  #attr-table-sheet.at-table-scroll-mode .at-table th { position: sticky; top: 0; z-index: 6; }
}


/* Dropdown wilayah SatuPeta harus dapat melampaui batas card yang terbuka. */
#geotoolsTabGeoportal > #geotani-geospasial-card[open] { position: relative; z-index: 20; overflow: visible; }


@media (min-width: 769px) {
  /* Posisi vertikal FAB di tengah peta; pergeseran horizontal oleh sheet tetap berlaku. */
  #map .leaflet-bottom.leaflet-right { top: 50%; bottom: auto; transform: translateY(-50%); }
}


@media (min-width: 769px) {
  /* Restore the Leaflet control rail after the previous vertical-centering rule. */
  #map .leaflet-bottom.leaflet-right { top: auto; bottom: 0; transform: none; }
  /* Center the always-open FAB menu on the same horizontal axis as zoom. */
  #map .map-fab-wrap { position: fixed !important; top: auto !important; right: auto !important; bottom: 30px !important; left: 50% !important; width: 0 !important; height: 0 !important; margin: 0 !important; overflow: visible !important; transform: translateX(-50%) !important; z-index: 1001 !important; }
  #map .map-fab-wrap .map-fab-items { left: 50% !important; right: auto !important; bottom: 64px !important; transform: translateX(-50%) !important; }
  body.sheet-terbuka #map .map-fab-wrap { left: calc((100vw - var(--desktop-sheet-width, 30vw)) / 2) !important; }
  body.sheet-terbuka .zoom-control-wrap { left: calc((100vw - var(--desktop-sheet-width, 30vw)) / 2) !important; }
}


@media (min-width: 769px) {
  #map .map-fab-wrap .map-fab-items { flex-direction: row !important; align-items: center !important; justify-content: center !important; gap: 8px !important; max-width: calc(100vw - 32px); }
}


@media (min-width: 769px) {
  /* FAB dan zoom menjadi satu pita horizontal di bawah tengah peta. */
  #map .map-fab-wrap .map-fab-items { bottom: 0 !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; gap: 4px !important; width: max-content; max-width: calc(100vw - 24px); overflow-x: auto; scrollbar-width: none; }
  #map .map-fab-wrap .map-fab-items::-webkit-scrollbar { display: none; }
  #map .map-fab-wrap .zoom-control-wrap { position: static !important; flex: 0 0 auto; margin: 0 0 0 4px !important; }
  body.sheet-terbuka #map .map-fab-wrap { left: calc((100vw - var(--desktop-sheet-width, 30vw)) / 2) !important; }
}


@media (min-width: 769px) {
  #map .map-fab-wrap .zoom-control-wrap { gap: 6px !important; overflow: visible; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
  #map .map-fab-wrap .zoom-control-btn { width: 44px !important; height: 44px !important; border: 1px solid var(--border-color) !important; border-radius: 50% !important; background: var(--bg-card) !important; color: var(--accent) !important; box-shadow: 0 4px 12px rgba(8,63,102,.2) !important; }
  #map .map-fab-wrap .zoom-control-btn:hover { background: var(--bg-card-hover) !important; box-shadow: inset 0 0 0 1px var(--accent) !important; transform: scale(1.08); }
}


@media (min-width: 769px) {
  /* Detail Layer, Tabel, dan Legenda dibuka dari sisi kiri pada desktop. */
  #catalog-popup-sheet, #attr-table-sheet, #legendSidebar { left: 0 !important; right: auto !important; }
  #catalog-popup-sheet:not(.is-open):not(.is-minimized) { transform: translateX(calc(-100% - 24px)) !important; }
  #catalog-popup-sheet.is-open { transform: translateX(0) !important; }
  #attr-table-sheet:not(.attr-table-sheet-open):not(.attr-table-sheet-minimized) { transform: translateX(calc(-100% - 24px)) !important; }
  #attr-table-sheet.attr-table-sheet-open { transform: translateX(0) !important; }
  #legendSidebar:not(.lg-sidebar-open):not(.lg-sidebar-minimized) { transform: translateX(calc(-100% - 24px)) !important; }
  #legendSidebar.lg-sidebar-open { transform: translateX(0) !important; }
  /* Dock kontrol mengikuti area peta yang tersisa di kanan sheet kiri. */
  body.catalog-popup-sheet-open:not(.catalog-popup-sheet-minimized) #map .map-fab-wrap,
  body.attr-table-sheet-open:not(.attr-table-sheet-minimized) #map .map-fab-wrap,
  body.lg-sidebar-open:not(.lg-sidebar-minimized) #map .map-fab-wrap { left: calc((100vw + var(--desktop-sheet-width, 30vw)) / 2) !important; }
  body.catalog-popup-sheet-open:not(.catalog-popup-sheet-minimized) .zoom-control-wrap,
  body.attr-table-sheet-open:not(.attr-table-sheet-minimized) .zoom-control-wrap,
  body.lg-sidebar-open:not(.lg-sidebar-minimized) .zoom-control-wrap { left: calc((100vw + var(--desktop-sheet-width, 30vw)) / 2) !important; }
}


@media (min-width: 769px) {
  #catalog-popup-sheet.is-minimized,
  #attr-table-sheet.attr-table-sheet-minimized,
  #legendSidebar.lg-sidebar-minimized { left: 50% !important; right: auto !important; }
}


@media (min-width: 769px) {
  /* Ukur bidang peta yang benar saat sheet membuka dari kiri dan/atau kanan. */
  body:is(.catalog-popup-sheet-open:not(.catalog-popup-sheet-minimized), .attr-table-sheet-open:not(.attr-table-sheet-minimized), .lg-sidebar-open:not(.lg-sidebar-minimized)) { --left-sheet-width: var(--desktop-sheet-width, 30vw); }
  body:is(.hotspot-sheet-open:not(.hotspot-sheet-minimized), .geopangan-sheet-open:not(.geopangan-sheet-minimized), .transjakarta-sheet-open:not(.transjakarta-sheet-minimized), .transjogja-sheet-open:not(.transjogja-sheet-minimized), .geotools-sheet-open:not(.geotools-sheet-minimized), .geodata-sheet-open:not(.geodata-sheet-minimized), .ai-sheet-open:not(.ai-sheet-minimized), .dm-sidebar-open:not(.dm-sidebar-minimized), .al-sidebar-open:not(.al-sidebar-minimized), .pa-panel-open:not(.pa-panel-minimized)) { --right-sheet-width: var(--desktop-sheet-width, 30vw); }
  body.sheet-terbuka #map { position: relative; left: var(--left-sheet-width, 0px) !important; flex: 0 0 calc(100vw - var(--left-sheet-width, 0px) - var(--right-sheet-width, 0px)) !important; width: calc(100vw - var(--left-sheet-width, 0px) - var(--right-sheet-width, 0px)) !important; max-width: calc(100vw - var(--left-sheet-width, 0px) - var(--right-sheet-width, 0px)) !important; transition: left .3s ease, flex-basis .3s ease, width .3s ease; }
  :is(body.catalog-popup-sheet-open:not(.catalog-popup-sheet-minimized), body.attr-table-sheet-open:not(.attr-table-sheet-minimized), body.lg-sidebar-open:not(.lg-sidebar-minimized)) #map { left: var(--left-sheet-width) !important; flex-basis: calc(100vw - var(--left-sheet-width) - var(--right-sheet-width, 0px)) !important; width: calc(100vw - var(--left-sheet-width) - var(--right-sheet-width, 0px)) !important; max-width: calc(100vw - var(--left-sheet-width) - var(--right-sheet-width, 0px)) !important; }
  body.sheet-terbuka .unified-search, body.sheet-terbuka .quick-layer-bar, body.sheet-terbuka .petadasar-export-block { left: calc((100vw + var(--left-sheet-width, 0px) - var(--right-sheet-width, 0px)) / 2) !important; max-width: calc(100vw - var(--left-sheet-width, 0px) - var(--right-sheet-width, 0px) - 24px); transition: left .3s ease; }
  :is(body.catalog-popup-sheet-open:not(.catalog-popup-sheet-minimized), body.attr-table-sheet-open:not(.attr-table-sheet-minimized), body.lg-sidebar-open:not(.lg-sidebar-minimized)) .unified-search,
  :is(body.catalog-popup-sheet-open:not(.catalog-popup-sheet-minimized), body.attr-table-sheet-open:not(.attr-table-sheet-minimized), body.lg-sidebar-open:not(.lg-sidebar-minimized)) .quick-layer-bar,
  :is(body.catalog-popup-sheet-open:not(.catalog-popup-sheet-minimized), body.attr-table-sheet-open:not(.attr-table-sheet-minimized), body.lg-sidebar-open:not(.lg-sidebar-minimized)) .petadasar-export-block,
  :is(body.catalog-popup-sheet-open:not(.catalog-popup-sheet-minimized), body.attr-table-sheet-open:not(.attr-table-sheet-minimized), body.lg-sidebar-open:not(.lg-sidebar-minimized)) #map .leaflet-bottom.leaflet-center { left: calc((100vw + var(--left-sheet-width) - var(--right-sheet-width, 0px)) / 2) !important; }
  body.sheet-terbuka #map .map-fab-wrap,
  body.sheet-terbuka #map .leaflet-bottom.leaflet-center { left: calc((100vw + var(--left-sheet-width, 0px) - var(--right-sheet-width, 0px)) / 2) !important; }
  :is(body.catalog-popup-sheet-open:not(.catalog-popup-sheet-minimized), body.attr-table-sheet-open:not(.attr-table-sheet-minimized), body.lg-sidebar-open:not(.lg-sidebar-minimized)) #map .map-fab-wrap,
  :is(body.catalog-popup-sheet-open:not(.catalog-popup-sheet-minimized), body.attr-table-sheet-open:not(.attr-table-sheet-minimized), body.lg-sidebar-open:not(.lg-sidebar-minimized)) #map .leaflet-bottom.leaflet-center { left: calc((100vw + var(--left-sheet-width) - var(--right-sheet-width, 0px)) / 2) !important; }
}


/* Keep the Leaflet viewport stretched across the full remaining map area when desktop sheets are open. */
@media (min-width: 769px) {
  body.sheet-terbuka #map.leaflet-container,
  body.sheet-terbuka #map > .leaflet-container {
    width: 100% !important;
    height: 100% !important;
  }
  body.sheet-terbuka #map {
    margin-left: var(--left-sheet-width, 0px) !important;
    left: 0 !important;
    flex-basis: calc(100vw - var(--left-sheet-width, 0px) - var(--right-sheet-width, 0px)) !important;
    width: calc(100vw - var(--left-sheet-width, 0px) - var(--right-sheet-width, 0px)) !important;
    max-width: calc(100vw - var(--left-sheet-width, 0px) - var(--right-sheet-width, 0px)) !important;
  }
  body.sheet-terbuka .unified-search,
  body.sheet-terbuka .quick-layer-bar,
  body.sheet-terbuka .petadasar-export-block,
  body.sheet-terbuka #map .map-fab-wrap,
  body.sheet-terbuka #map .leaflet-bottom.leaflet-center {
    left: calc((100vw + var(--left-sheet-width, 0px) - var(--right-sheet-width, 0px)) / 2) !important;
  }
}

/* Desktop with a sheet on each side: cap each sheet so the map keeps a useful width. */
@media (min-width: 769px) {
  body:is(.catalog-popup-sheet-open:not(.catalog-popup-sheet-minimized), .attr-table-sheet-open:not(.attr-table-sheet-minimized), .lg-sidebar-open:not(.lg-sidebar-minimized)):is(.hotspot-sheet-open:not(.hotspot-sheet-minimized), .geopangan-sheet-open:not(.geopangan-sheet-minimized), .transjakarta-sheet-open:not(.transjakarta-sheet-minimized), .transjogja-sheet-open:not(.transjogja-sheet-minimized), .geotools-sheet-open:not(.geotools-sheet-minimized), .geodata-sheet-open:not(.geodata-sheet-minimized), .ai-sheet-open:not(.ai-sheet-minimized), .dm-sidebar-open:not(.dm-sidebar-minimized), .al-sidebar-open:not(.al-sidebar-minimized), .pa-panel-open:not(.pa-panel-minimized)) {
    --dual-sheet-width: clamp(240px, 26vw, 360px);
    --left-sheet-width: var(--dual-sheet-width);
    --right-sheet-width: var(--dual-sheet-width);
  }
  body:is(.catalog-popup-sheet-open:not(.catalog-popup-sheet-minimized), .attr-table-sheet-open:not(.attr-table-sheet-minimized), .lg-sidebar-open:not(.lg-sidebar-minimized)):is(.hotspot-sheet-open:not(.hotspot-sheet-minimized), .geopangan-sheet-open:not(.geopangan-sheet-minimized), .transjakarta-sheet-open:not(.transjakarta-sheet-minimized), .transjogja-sheet-open:not(.transjogja-sheet-minimized), .geotools-sheet-open:not(.geotools-sheet-minimized), .geodata-sheet-open:not(.geodata-sheet-minimized), .ai-sheet-open:not(.ai-sheet-minimized), .dm-sidebar-open:not(.dm-sidebar-minimized), .al-sidebar-open:not(.al-sidebar-minimized), .pa-panel-open:not(.pa-panel-minimized)) :is(#catalog-popup-sheet.is-open, #attr-table-sheet.attr-table-sheet-open, #legendSidebar.lg-sidebar-open),
  body:is(.catalog-popup-sheet-open:not(.catalog-popup-sheet-minimized), .attr-table-sheet-open:not(.attr-table-sheet-minimized), .lg-sidebar-open:not(.lg-sidebar-minimized)):is(.hotspot-sheet-open:not(.hotspot-sheet-minimized), .geopangan-sheet-open:not(.geopangan-sheet-minimized), .transjakarta-sheet-open:not(.transjakarta-sheet-minimized), .transjogja-sheet-open:not(.transjogja-sheet-minimized), .geotools-sheet-open:not(.geotools-sheet-minimized), .geodata-sheet-open:not(.geodata-sheet-minimized), .ai-sheet-open:not(.ai-sheet-minimized), .dm-sidebar-open:not(.dm-sidebar-minimized), .al-sidebar-open:not(.al-sidebar-minimized), .pa-panel-open:not(.pa-panel-minimized)) :is(#hotspot-sheet, #geopangan-sheet, #transjakarta-sheet, #transjogja-sheet, #geotools-sheet, #geodata-sheet, #ai-sheet, .dm-sidebar, .al-sidebar, .pa-panel):not(.sheet-minimized):not(.gs-sheet-minimized):not(.geodata-sheet-minimized):not(.ais-sheet-minimized):not(.dm-sidebar-minimized):not(.al-sidebar-minimized):not(.pa-min) {
    width: var(--dual-sheet-width) !important;
    max-width: var(--dual-sheet-width) !important;
  }
  body.sheet-terbuka #map {
    box-sizing: border-box !important;
    min-width: 0 !important;
    flex-shrink: 0 !important;
    overflow: hidden;
  }
}

/* Desktop sheets overlay the map. Keeping Leaflet full-width prevents blank
   tiles when the available view becomes narrow between two open sheets. */
@media (min-width: 769px) {
  #app-container { position: relative; overflow: hidden; }
  #app-container > #map {
    position: absolute !important;
    inset: 0 auto 0 0 !important;
    flex: none !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: 100% !important;
    margin: 0 !important;
    left: 0 !important;
    overflow: hidden;
  }
  body.sheet-terbuka #app-container > #map {
    flex: none !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    left: 0 !important;
  }
  body.sheet-terbuka .unified-search,
  body.sheet-terbuka .quick-layer-bar,
  body.sheet-terbuka .petadasar-export-block,
  body.sheet-terbuka #map .map-fab-wrap,
  body.sheet-terbuka #map .leaflet-bottom.leaflet-center {
    left: calc((100vw + var(--left-sheet-width, 0px) - var(--right-sheet-width, 0px)) / 2) !important;
  }
  body.sheet-terbuka .unified-search,
  body.sheet-terbuka .quick-layer-bar,
  body.sheet-terbuka .petadasar-export-block {
    max-width: calc(100vw - var(--left-sheet-width, 0px) - var(--right-sheet-width, 0px) - 24px) !important;
  }
  body.sheet-terbuka #map .leaflet-bottom.leaflet-right {
    right: calc(var(--right-sheet-width, 0px) + 12px) !important;
  }
}

/* Desktop minimized chips: restore their compact transform after the open-sheet rules,
   and stack them just above the shared FAB/zoom dock. */
@media (min-width: 769px) {
  #catalog-popup-sheet.is-open.is-minimized,
  #attr-table-sheet.attr-table-sheet-minimized,
  #legendSidebar.lg-sidebar-minimized {
    position: fixed !important;
    top: auto !important;
    right: auto !important;
    bottom: 94px !important;
    left: calc((100vw + var(--left-sheet-width, 0px) - var(--right-sheet-width, 0px)) / 2) !important;
    width: min(300px, calc(100vw - 24px)) !important;
    max-width: min(300px, calc(100vw - 24px)) !important;
    height: 52px !important;
    max-height: 52px !important;
    transform: translateX(-50%) !important;
    z-index: 1200 !important;
  }
  #catalog-popup-sheet.is-open.is-minimized .bhumi-persil-sheet-head,
  #attr-table-sheet.attr-table-sheet-minimized .at-sheet-head,
  #legendSidebar.lg-sidebar-minimized .lg-sidebar-head { cursor: pointer; }
  #catalog-popup-sheet.is-open.is-minimized .bhumi-persil-sheet-handle,
  #catalog-popup-sheet.is-open.is-minimized .bhumi-persil-sheet-content,
  #attr-table-sheet.attr-table-sheet-minimized .at-sheet-handle,
  #attr-table-sheet.attr-table-sheet-minimized .at-sheet-body,
  #legendSidebar.lg-sidebar-minimized .lg-sidebar-handle,
  #legendSidebar.lg-sidebar-minimized .lg-sidebar-body { display: none !important; }
}

/* Match the three left-side desktop chips in frame, title alignment and actions. */
@media (min-width: 769px) {
  #catalog-popup-sheet.is-open.is-minimized,
  #attr-table-sheet.attr-table-sheet-minimized,
  #legendSidebar.lg-sidebar-minimized {
    box-sizing: border-box !important;
    width: min(300px, calc(100vw - 24px)) !important;
    min-width: min(300px, calc(100vw - 24px)) !important;
    height: 52px !important;
    min-height: 52px !important;
    max-height: 52px !important;
    padding: 0 !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 16px !important;
    box-shadow: var(--shadow-sheet) !important;
  }
  #catalog-popup-sheet.is-open.is-minimized .bhumi-persil-sheet-head,
  #attr-table-sheet.attr-table-sheet-minimized .at-sheet-head,
  #legendSidebar.lg-sidebar-minimized .lg-sidebar-head {
    display: flex !important;
    box-sizing: border-box !important;
    width: 100% !important;
    height: 50px !important;
    min-height: 50px !important;
    padding: 0 12px !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    border: 0 !important;
  }
  #catalog-popup-sheet.is-open.is-minimized .bhumi-persil-sheet-title,
  #attr-table-sheet.attr-table-sheet-minimized .at-sheet-title,
  #legendSidebar.lg-sidebar-minimized .lg-sidebar-title {
    display: flex !important;
    min-width: 0 !important;
    align-items: center !important;
    gap: 7px !important;
    overflow: hidden !important;
    font-size: 12px !important;
    font-weight: 650 !important;
    line-height: 1 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  #catalog-popup-sheet.is-open.is-minimized .bhumi-persil-sheet-actions,
  #attr-table-sheet.attr-table-sheet-minimized .at-sheet-actions,
  #legendSidebar.lg-sidebar-minimized .lg-sidebar-actions {
    display: flex !important;
    flex: 0 0 auto !important;
    align-items: center !important;
    gap: 6px !important;
  }
  #catalog-popup-sheet.is-open.is-minimized .bhumi-persil-sheet-actions button,
  #attr-table-sheet.attr-table-sheet-minimized .at-sheet-actions button,
  #legendSidebar.lg-sidebar-minimized .lg-sidebar-actions button {
    box-sizing: border-box !important;
    display: grid !important;
    width: 30px !important;
    min-width: 30px !important;
    height: 30px !important;
    min-height: 30px !important;
    padding: 0 !important;
    place-items: center !important;
    border-radius: 50% !important;
    line-height: 1 !important;
  }
}

/* One compact desktop chip style for minimized sheets on either side. */
@media (min-width: 769px) {
  :is(
    #hotspot-sheet.sheet-minimized,
    #geopangan-sheet.sheet-minimized,
    :is(#transjakarta-sheet, #transjogja-sheet).sheet-minimized,
    #ai-sheet.ais-sheet-minimized,
    #geotools-sheet.gs-sheet-minimized,
    #geodata-sheet.geodata-sheet-minimized,
    #catalog-popup-sheet.is-open.is-minimized,
    #attr-table-sheet.attr-table-sheet-minimized,
    #legendSidebar.lg-sidebar-minimized,
    #detail-panel.detail-panel-minimized,
    .bhumi-persil-sheet.is-minimized,
    .dm-sidebar.dm-sidebar-minimized,
    .al-sidebar.al-sidebar-minimized,
    .pa-panel.pa-min
  ) {
    position: fixed !important;
    top: auto !important;
    right: auto !important;
    bottom: 68px !important;
    left: calc((100vw + var(--left-sheet-width, 0px) - var(--right-sheet-width, 0px)) / 2) !important;
    box-sizing: border-box !important;
    width: min(220px, calc(100vw - 24px)) !important;
    min-width: min(220px, calc(100vw - 24px)) !important;
    max-width: min(220px, calc(100vw - 24px)) !important;
    height: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;
    padding: 0 !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 18px !important;
    background: var(--bg-primary) !important;
    box-shadow: var(--shadow-sheet) !important;
    transform: translateX(-50%) !important;
    visibility: visible !important;
    z-index: 1200 !important;
  }
  :is(
    #hotspot-sheet.sheet-minimized,
    #geopangan-sheet.sheet-minimized,
    :is(#transjakarta-sheet, #transjogja-sheet).sheet-minimized,
    #ai-sheet.ais-sheet-minimized,
    #geotools-sheet.gs-sheet-minimized,
    #geodata-sheet.geodata-sheet-minimized,
    #catalog-popup-sheet.is-open.is-minimized,
    #attr-table-sheet.attr-table-sheet-minimized,
    #legendSidebar.lg-sidebar-minimized,
    #detail-panel.detail-panel-minimized,
    .bhumi-persil-sheet.is-minimized,
    .dm-sidebar.dm-sidebar-minimized,
    .al-sidebar.al-sidebar-minimized,
    .pa-panel.pa-min
  ) > :is(.hs-sheet-head, .gp-sheet-head, .tj-sheet-head, .ais-sheet-head, .gs-sheet-head, .geodata-sheet-head, .bhumi-persil-sheet-head, .at-sheet-head, .lg-sidebar-head, .dm-sidebar-head, .al-sidebar-head, .pa-head, .detail-panel-head) {
    display: flex !important;
    box-sizing: border-box !important;
    width: 100% !important;
    height: 34px !important;
    min-height: 34px !important;
    padding: 0 8px !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 6px !important;
    border: 0 !important;
  }
  :is(
    #hotspot-sheet.sheet-minimized,
    #geopangan-sheet.sheet-minimized,
    :is(#transjakarta-sheet, #transjogja-sheet).sheet-minimized,
    #ai-sheet.ais-sheet-minimized,
    #geotools-sheet.gs-sheet-minimized,
    #geodata-sheet.geodata-sheet-minimized,
    #catalog-popup-sheet.is-open.is-minimized,
    #attr-table-sheet.attr-table-sheet-minimized,
    #legendSidebar.lg-sidebar-minimized,
    #detail-panel.detail-panel-minimized,
    .bhumi-persil-sheet.is-minimized,
    .dm-sidebar.dm-sidebar-minimized,
    .al-sidebar.al-sidebar-minimized,
    .pa-panel.pa-min
  ) :is(.hs-sheet-body, .gp-sheet-body, .tj-sheet-body, .ais-sheet-body, .gs-sheet-body, .geodata-sheet-body, .bhumi-persil-sheet-content, .at-sheet-body, .lg-sidebar-body, .dm-sidebar-body, .al-sidebar-body, .pa-body, .detail-panel-body) { display: none !important; }
}
@media (min-width: 769px) {
  :is(#hotspot-sheet.sheet-minimized, #geopangan-sheet.sheet-minimized, :is(#transjakarta-sheet, #transjogja-sheet).sheet-minimized, #ai-sheet.ais-sheet-minimized, #geotools-sheet.gs-sheet-minimized, #geodata-sheet.geodata-sheet-minimized, #catalog-popup-sheet.is-open.is-minimized, #attr-table-sheet.attr-table-sheet-minimized, #legendSidebar.lg-sidebar-minimized, #detail-panel.detail-panel-minimized, .bhumi-persil-sheet.is-minimized, .dm-sidebar.dm-sidebar-minimized, .al-sidebar.al-sidebar-minimized, .pa-panel.pa-min) > :is(.hs-sheet-head, .gp-sheet-head, .tj-sheet-head, .ais-sheet-head, .gs-sheet-head, .geodata-sheet-head, .bhumi-persil-sheet-head, .at-sheet-head, .lg-sidebar-head, .dm-sidebar-head, .al-sidebar-head, .pa-head, .detail-panel-head) :is(button, .hs-sheet-title, .gp-sheet-title, .tj-sheet-title, .ais-sheet-title, .gs-sheet-title, .geodata-sheet-title, .bhumi-persil-sheet-title, .at-sheet-title, .lg-sidebar-title, .dm-sidebar-title, .al-sidebar-title, .pa-title, .detail-panel-title) { font-size: 11px !important; }
  :is(#hotspot-sheet.sheet-minimized, #geopangan-sheet.sheet-minimized, :is(#transjakarta-sheet, #transjogja-sheet).sheet-minimized, #ai-sheet.ais-sheet-minimized, #geotools-sheet.gs-sheet-minimized, #geodata-sheet.geodata-sheet-minimized, #catalog-popup-sheet.is-open.is-minimized, #attr-table-sheet.attr-table-sheet-minimized, #legendSidebar.lg-sidebar-minimized, #detail-panel.detail-panel-minimized, .bhumi-persil-sheet.is-minimized, .dm-sidebar.dm-sidebar-minimized, .al-sidebar.al-sidebar-minimized, .pa-panel.pa-min) > :is(.hs-sheet-head, .gp-sheet-head, .tj-sheet-head, .ais-sheet-head, .gs-sheet-head, .geodata-sheet-head, .bhumi-persil-sheet-head, .at-sheet-head, .lg-sidebar-head, .dm-sidebar-head, .al-sidebar-head, .pa-head, .detail-panel-head) button {
    box-sizing: border-box !important;
    width: 26px !important;
    min-width: 26px !important;
    height: 26px !important;
    min-height: 26px !important;
    padding: 0 !important;
    place-items: center !important;
    border-radius: 50% !important;
  }
  #catalog-popup-sheet.is-open.is-minimized .bhumi-persil-sheet-title,
  #attr-table-sheet.attr-table-sheet-minimized .at-sheet-title,
  #legendSidebar.lg-sidebar-minimized .lg-sidebar-title { font-size: 11px !important; }
}

/* Desktop FAB labels sit above the horizontal dock instead of covering neighbor buttons. */
@media (min-width: 769px) {
  #map .map-fab-wrap .map-fab-items {
    overflow: visible !important;
  }
  #map .map-fab-wrap .map-fab-item[title]::after {
    top: auto !important;
    right: auto !important;
    bottom: calc(100% + 8px) !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    z-index: 1500 !important;
  }
}

/* Desktop notifications always enter from the upper-right corner. */
@media (min-width: 769px) {
  .map-toast {
    top: 24px !important;
    right: 24px !important;
    bottom: auto !important;
    left: auto !important;
    width: max-content;
    max-width: min(420px, calc(100vw - 48px)) !important;
    transform: none !important;
    text-align: left !important;
    animation: map-toast-in-desktop .3s ease-out, map-toast-out .3s ease-in 3.7s forwards !important;
  }
  @keyframes map-toast-in-desktop {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
  }
}

/* The SIGAP legend has an internal 260px scroll area; when moved into the
   Legend sheet, let the sheet body own the only vertical scrollbar. */
.lg-sidebar-body .sigap-layer-legend > div[style*="max-height"] {
  max-height: none !important;
  overflow: visible !important;
}

/* Give each legend a distinct card in the sidebar; the sidebar body remains
   the only vertical scroll container. */
#legendSidebarBody > .unified-legend-section {
  box-sizing: border-box;
  width: 100%;
  margin: 0 0 10px !important;
  padding: 10px;
  overflow: visible;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  background: var(--bg-primary);
  box-shadow: var(--shadow-card);
}

/* Readable labels for the long Planologi forest legend in the sidebar. */
#legendSidebarBody .kwshutan-planologi-legend {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  padding: 11px 12px;
}
#legendSidebarBody .kwshutan-planologi-legend .hotspot-legend-title {
  margin-bottom: 8px;
  font-size: 12px;
  line-height: 1.35;
}
#legendSidebarBody .kwshutan-planologi-legend .hotspot-legend-items { gap: 6px; }
#legendSidebarBody .kwshutan-planologi-legend .hotspot-legend-item {
  align-items: flex-start;
  gap: 8px;
  min-width: 0;
  font-size: 11px;
  line-height: 1.35;
}
#legendSidebarBody .kwshutan-planologi-legend .hotspot-legend-item > span:last-child {
  flex: 1 1 auto;
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
}
#legendSidebarBody .kwshutan-planologi-legend .hotspot-legend-dot {
  display: grid;
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  place-items: center;
  overflow: hidden;
  border-radius: 3px;
}
#legendSidebarBody .kwshutan-planologi-legend .hotspot-legend-dot img {
  width: 16px !important;
  height: 16px !important;
  object-fit: contain;
}

/* GeoPortal Hub: kategori modern dengan aksi tambah ke Sheet Layer Aktif. */
#geoportalLayerList { display:flex; flex-direction:column; gap:5px; padding:8px 2px 12px; }
#geoportalLayerList .jstree-container-ul { width:100%; }
#geoportalLayerList .jstree-checkbox { display:none !important; }
#geoportalLayerList .jstree-node { position:relative; min-height:34px; padding-left:18px; }
#geoportalLayerList .jstree-anchor { display:inline-flex; align-items:center; min-height:34px; max-width:calc(100% - 2px); padding:4px 7px; border-radius:8px; line-height:1.35; font-size:11px; color:#334155; vertical-align:middle; transition:background .16s,color .16s; }
#geoportalLayerList .jstree-anchor:hover { background:#eff6ff; color:#0f4c81; }
#geoportalLayerList .jstree-node[data-level="0"] > .jstree-anchor { min-height:40px; font-size:12px; font-weight:700; color:#172554; }
#geoportalLayerList .jstree-node[data-level="0"] > .jstree-anchor .layer-count-badge { margin-left:8px; color:#315a87; background:#e6f0fb; }
#geoportalLayerList .jstree-node[data-hub-key] > .jstree-anchor { width:calc(100% - 4px); gap:7px; padding-left:38px; padding-right:38px; }
#geoportalLayerList .jstree-node[data-hub-key] > .jstree-anchor .jstree-themeicon { display:none; }
#geoportalLayerList .geoportal-add-layer { position:absolute; z-index:2; top:4px; right:3px; display:grid; width:27px; height:27px; padding:0; place-items:center; border:1px solid #cbdcf0; border-radius:8px; color:#1266ad; background:#fff; cursor:pointer; transition:background .16s,border-color .16s,color .16s,transform .16s; }
#geoportalLayerList .geoportal-add-layer:hover:not(:disabled), #geoportalLayerList .geoportal-add-layer:focus-visible { transform:translateY(-1px); border-color:#60a5fa; color:#0756a4; background:#eff6ff; outline:none; }
#geoportalLayerList .geoportal-add-layer.is-added { color:#047857; border-color:#a7f3d0; background:#ecfdf5; cursor:default; }
#geoportalLayerList .geoportal-add-layer:disabled { opacity:1; }
#geoportalLayerList .geoportal-add-layer svg { width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
[data-theme="dark"] #geoportalLayerList .jstree-anchor { color:#dbeafe; }
[data-theme="dark"] #geoportalLayerList .jstree-node[data-level="0"] > .jstree-anchor { color:#f1f5f9; }
[data-theme="dark"] #geoportalLayerList .geoportal-add-layer { color:#93c5fd; border-color:#334155; background:#172033; }
[data-theme="dark"] #geoportalLayerList .geoportal-add-layer.is-added { color:#6ee7b7; border-color:#065f46; background:#052e2b; }

/* The GeoData sheet catalog uses the same add-to-active-layer affordance as Hub. */
#mapCatalogList .lc-item { position:relative; padding:10px 8px 10px 64px; }
#mapCatalogList .lc-item > input[type="checkbox"] { display:none !important; }
#mapCatalogList .lc-item > label { pointer-events:none; padding-right:0; }
#mapCatalogList .lc-item-actions .lc-pin-btn { display:none !important; }
#mapCatalogList .geoportal-add-layer {
  position:absolute; z-index:2; top:50%; left:28px; right:auto; display:grid;
  width:27px; height:27px; padding:0; place-items:center;
  border:1px solid #cbdcf0; border-radius:8px; color:#1266ad;
  background:#fff; cursor:pointer; transform:translateY(-50%);
}
#mapCatalogList .geoportal-add-layer:hover:not(:disabled),
#mapCatalogList .geoportal-add-layer:focus-visible { border-color:#60a5fa; color:#0756a4; background:#eff6ff; outline:none; }
#mapCatalogList .geoportal-add-layer.is-added { color:#047857; border-color:#a7f3d0; background:#ecfdf5; cursor:default; }
#mapCatalogList .geoportal-add-layer:disabled { opacity:1; }
#mapCatalogList .geoportal-add-layer svg { width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
[data-theme="dark"] #mapCatalogList .geoportal-add-layer { color:#93c5fd; border-color:#334155; background:#172033; }
[data-theme="dark"] #mapCatalogList .geoportal-add-layer.is-added { color:#6ee7b7; border-color:#065f46; background:#052e2b; }

/* GeoData: pisahkan Hub dari alat impor, lalu tampilkan katalog sebagai
   tree yang tenang dan mudah dipindai. */
#geodataSheetBody > .geodata-panel + .geodata-panel { margin-top:14px; }
#geodataGeoportalHubPanel > #geoportalHubCard { margin:0; }
#geoportalHubCard > .geoportal-card-body { padding:12px; }
#geodataMapCatalogPanel > #mapCatalogCard { margin:0; }
#mapCatalogCard > .geoportal-card-body { padding:12px; }
#mapCatalogSearchHost { margin-bottom:10px; }
#mapCatalogList {
  box-sizing:border-box;
  display:flex;
  flex-direction:column;
  gap:7px;
  max-height:min(58vh, 640px);
  min-height:180px;
  overflow-y:auto;
  overflow-x:hidden;
  padding:8px;
  border:1px solid #e2eaf3;
  border-radius:12px;
  background:#f8fafc;
  scrollbar-gutter:stable;
}
#mapCatalogList .lc-category { flex:0 0 auto; margin:0; }
#mapCatalogList .lc-cat-header { width:100%; }
#mapCatalogList .lc-items { max-height:none; }
[data-theme="dark"] #mapCatalogList { border-color:#334155; background:#111827; }
#geoportalHubCard .geoportal-sticky-header { margin-bottom:10px; }
#geoportalLayerList {
  box-sizing:border-box;
  max-height:min(48vh, 520px);
  min-height:180px;
  overflow-y:auto;
  overflow-x:hidden;
  padding:8px;
  border:1px solid #e2eaf3;
  border-radius:12px;
  background:#f8fafc;
  scrollbar-gutter:stable;
}
#geoportalHubCard,
#geoportalHubCard > .geoportal-card-body { box-sizing:border-box; min-width:0; max-width:100%; overflow-x:hidden; }
#geoportalLayerList .jstree-container-ul { box-sizing:border-box; width:100%; max-width:100%; padding:0 2px; }
#geoportalLayerList .jstree-node { box-sizing:border-box; max-width:100%; padding-left:18px; margin:2px 0; }
#geoportalLayerList .jstree-anchor { box-sizing:border-box; min-height:32px; max-width:100%; }
#geoportalLayerList .jstree-node[data-level="0"] { padding-left:0; margin:3px 0; }
#geoportalLayerList .jstree-node[data-level="0"] > .jstree-anchor {
  width:calc(100% - 26px);
  min-height:38px;
  padding:6px 9px;
  border:1px solid #e3ebf4;
  background:#fff;
}
#geoportalLayerList .jstree-node[data-level="0"] > .jstree-anchor:hover,
#geoportalLayerList .jstree-node[data-level="0"] > .jstree-anchor.jstree-hovered {
  border-color:#bfdbfe;
  background:#eff6ff;
}
#geoportalLayerList .jstree-node[data-level="1"]:not([data-hub-key]) > .jstree-anchor {
  color:#475569;
  font-weight:600;
}
#geoportalLayerList .jstree-node[data-hub-key] > .jstree-anchor {
  width:calc(100% - 28px);
  min-height:34px;
  padding-left:34px;
  padding-right:7px;
  overflow-wrap:anywhere;
  white-space:normal;
  line-height:1.4;
}
#geoportalLayerList .jstree-node > .jstree-children {
  margin-left:10px;
  padding-left:8px;
  border-left:1px solid #e2e8f0;
}
#geoportalLayerList .jstree-node[data-level="0"] > .jstree-children {
  margin:4px 0 8px 8px;
}
#geoportalLayerList .layer-count-badge {
  display:inline-flex;
  align-items:center;
  min-height:18px;
  margin-left:7px;
  padding:0 6px;
  border-radius:999px;
  color:#315a87;
  background:#e6f0fb;
  font-size:10px;
  font-weight:700;
}
[data-theme="dark"] #geoportalLayerList { border-color:#334155; background:#111827; }
[data-theme="dark"] #geoportalLayerList .jstree-node[data-level="0"] > .jstree-anchor { border-color:#334155; background:#1e293b; }
[data-theme="dark"] #geoportalLayerList .jstree-node > .jstree-children { border-left-color:#334155; }
[data-theme="dark"] #geoportalLayerList .layer-count-badge { color:#bfdbfe; background:#1e3a5f; }

/* Pindahkan navigasi format GeoData ke kiri judul sheet. Tampil sebagai
   deret ikon ringkas dengan tooltip agar tetap muat di desktop dan mobile. */
#geoportalLayerList .geoportal-add-layer { top:7px; left:25px; right:auto; }

/* Kategori Hub dibuka dengan klik pada barisnya, tanpa kontrol panah terpisah. */
#geoportalLayerList .jstree-node[data-level="0"] > .jstree-ocl { display:none !important; }
#geoportalLayerList .jstree-node[data-level="0"] > .jstree-anchor {
  width:100%;
  cursor:pointer;
}
#geoportalLayerList .jstree-node[data-level="0"] > .jstree-anchor:focus-visible {
  outline:2px solid #60a5fa;
  outline-offset:1px;
}
#geoportalLayerList { padding:5px; }
#geoportalLayerList .jstree-container-ul { padding:0; }
#geoportalLayerList .jstree-node { padding-left:0; }
#geoportalLayerList .jstree-node > .jstree-children { margin-left:3px; padding-left:5px; }
#geoportalLayerList .jstree-node[data-level="0"] > .jstree-children { margin-left:3px; }
#geoportalLayerList .jstree-ocl { display:none !important; }
#geoportalLayerList .geoportal-add-layer { left:4px; }
#geoportalLayerList .jstree-node[data-hub-key] > .jstree-anchor { padding-left:44px; }

/* Submenu impor GeoData menjadi kartu lipat yang seragam dengan Hub. */
#geotoolsTabMuatData > .geodata-tool-card + .geodata-tool-card { margin-top:10px; }
#geotoolsTabMuatData > .geodata-tool-card > summary { cursor:pointer; list-style:none; }
#geotoolsTabMuatData > .geodata-tool-card > summary::-webkit-details-marker { display:none; }
#geotoolsTabMuatData > .geodata-tool-card > summary::after {
  content:"";
  flex:0 0 8px;
  width:8px;
  height:8px;
  margin-left:auto;
  border-right:1.5px solid #94a3b8;
  border-bottom:1.5px solid #94a3b8;
  transform:rotate(45deg) translateY(-2px);
  transition:transform .16s ease;
}
#geotoolsTabMuatData > .geodata-tool-card[open] > summary::after {
  transform:rotate(225deg) translate(-2px,-1px);
}
#geotoolsTabMuatData > .geodata-tool-card > .geoportal-card-body { padding:12px; }
#geotoolsTabMuatData > .geodata-tool-card .geoid-subtab-panel { display:block !important; margin:0; }
#geotoolsTabMuatData > .geodata-tool-card[open] .geoid-subtab-panel { animation:geodata-card-in .16s ease-out; }
#geotoolsTabMuatData > .geodata-tool-card .alat-card { margin:0; }
#geotoolsTabMuatData .xy-table-import { display:grid; grid-template-columns:minmax(0,1fr); grid-auto-flow:row; gap:9px; }
#geotoolsTabMuatData .xy-table-import > .geotani-form-label { margin:0; }
#geotoolsTabMuatData .xy-table-import input[type="file"] { box-sizing:border-box; min-width:0; width:100%; height:36px; padding:4px 7px; font-size:11px; }
#geotoolsTabMuatData .xy-table-import input[type="file"]::file-selector-button { height:26px; margin-right:8px; padding:0 9px; border:1px solid #cbdcf0; border-radius:6px; color:#315a87; background:#f8fafc; font-family:inherit; font-size:10px; font-weight:600; cursor:pointer; }
#geotoolsTabMuatData .xy-table-help { margin-top:-4px; color:#64748b; font-size:10px; line-height:1.5; }
#geotoolsTabMuatData .xy-table-sample-link { justify-self:start; color:#1266ad; font-size:11px; font-weight:700; text-decoration:none; }
#geotoolsTabMuatData .xy-table-sample-link:hover { text-decoration:underline; }
#geotoolsTabMuatData .xy-table-fields { display:grid; grid-template-columns:minmax(0,1fr); gap:9px; }
#geotoolsTabMuatData .xy-table-fields label { display:grid; gap:5px; min-width:0; }
#geotoolsTabMuatData .xy-table-fields select,
#geotoolsTabMuatData #xyTableCrs { box-sizing:border-box; width:100%; min-width:0; height:36px; }
#geotoolsTabMuatData .geotools-btn,
#geotoolsTabMuatData .arcgis-source-action-btn { box-sizing:border-box; width:100%; min-height:36px; height:36px; padding:0 12px; border-radius:8px; font-size:11px; }
#geotoolsTabMuatData .xy-table-preview { padding:9px 10px; border:1px solid #dbe5f0; border-radius:9px; color:#475569; background:#f8fafc; font-size:11px; line-height:1.5; }
#geotoolsTabMuatData .xy-table-status { min-height:0; color:#047857; font-size:11px; line-height:1.45; }
#geotoolsTabMuatData .xy-table-status:empty { display:none; }
#geotoolsTabMuatData .xy-table-status.is-error { color:#b91c1c; }
[data-theme="dark"] #geotoolsTabMuatData .xy-table-help { color:#94a3b8; }
[data-theme="dark"] #geotoolsTabMuatData .xy-table-sample-link { color:#93c5fd; }
[data-theme="dark"] #geotoolsTabMuatData .xy-table-preview { color:#cbd5e1; border-color:#334155; background:#111827; }
@keyframes geodata-card-in {
  from { opacity:0; transform:translateY(-3px); }
  to { opacity:1; transform:translateY(0); }
}

/* Basemap gallery now lives in the first Draw & Measure tool card. */
#drawBasemapHost { padding:12px 13px !important; }
#drawBasemapHost .lc-category { margin:0; padding:0; }
#drawBasemapHost .lc-category + .lc-category { margin:0; padding:0; border:0; }
#drawBasemapHost .lc-cat-header { display:none; }
#drawBasemapHost .lc-items { display:block; padding:0; }
#drawBasemapHost .lc-basemap-group { padding:8px 8px 2px; }
#drawBasemapHost .lc-bm-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; padding:6px 8px 2px; }
#drawBasemapHost .lc-bm-name { min-height:30px; }
#drawBasemapHost .lc-pin-btn { display:none !important; }
[data-theme="dark"] #drawBasemapHost .lc-bm-card { background:var(--bg-card); }

/* Shared search field treatment for GeoPortal Hub and Katalog Peta. */
#geoportalHubCard .geoportal-sticky-header {
  margin-right:-12px;
  margin-left:-12px;
  padding:0 12px;
  border:0;
  background:transparent;
}
#geoportalHubCard .geoportal-search-input,
#mapCatalogSearchHost .lc-search {
  box-sizing:border-box;
  display:block;
  width:100%;
  height:38px;
  margin:0;
  padding:0 12px 0 36px;
  border:1px solid #e1ebf2;
  border-radius:9px;
  outline:none;
  background-color:#fff;
  color:#234b6d;
  font:inherit;
  font-size:12px;
  line-height:normal;
  transition:border-color .2s,box-shadow .2s;
}
#geoportalHubCard .geoportal-search-input:focus,
#mapCatalogSearchHost .lc-search:focus {
  border-color:#70b9dd;
  background-color:#fff;
  box-shadow:0 0 0 3px rgba(112,185,221,.15);
}
#geoportalHubCard .geoportal-search-input::placeholder,
#mapCatalogSearchHost .lc-search::placeholder { color:#9fb3c8; }
#geoportalHubCard .geoportal-search-input-wrapper .search-icon,
#mapCatalogSearchHost .geoportal-search-input-wrapper .search-icon {
  left:12px;
  display:flex;
  align-items:center;
  color:#9fb3c8;
}
[data-theme="dark"] #geoportalHubCard .geoportal-search-input,
[data-theme="dark"] #mapCatalogSearchHost .lc-search {
  border-color:var(--border-color);
  background-color:var(--bg-input);
  color:var(--text-primary);
}
[data-theme="dark"] #geoportalHubCard .geoportal-search-input::placeholder,
[data-theme="dark"] #mapCatalogSearchHost .lc-search::placeholder { color:var(--text-muted); }

/* Keep map controls centered in the visible map area beside the standalone
   TransJakarta route planner, which is not managed by SheetDrag. */
@media (min-width: 769px) {
  body.tj-routing-open { --right-sheet-width: var(--desktop-sheet-width, 30vw); }
  body.tj-routing-open .unified-search,
  body.tj-routing-open .quick-layer-bar,
  body.tj-routing-open .petadasar-export-block,
  body.tj-routing-open #map .map-fab-wrap,
  body.tj-routing-open #map .leaflet-bottom.leaflet-center {
    left: calc((100vw + var(--left-sheet-width, 0px) - var(--right-sheet-width, 30vw)) / 2) !important;
    transition: left .3s ease;
  }
  body.tj-routing-open .unified-search,
  body.tj-routing-open .quick-layer-bar,
  body.tj-routing-open .petadasar-export-block {
    max-width: calc(100vw - var(--left-sheet-width, 0px) - var(--right-sheet-width, 30vw) - 24px) !important;
  }
  body.tj-routing-open #map .leaflet-bottom.leaflet-right {
    right: calc(var(--right-sheet-width, 30vw) + 12px) !important;
  }
}
.rk-guide-fab { color:#087eaa !important; }
.rk-guide-overlay[hidden]{display:none}.rk-guide-overlay{position:fixed;inset:0;z-index:12010;background:transparent}.rk-guide-spotlight{display:none;position:fixed;z-index:1;border:2px solid #13b8d4;border-radius:14px;box-shadow:0 0 0 9999px #0b1c2b70,0 0 0 5px #13b8d433;pointer-events:none;transition:all .2s ease}.rk-guide-spotlight.is-visible{display:block}.rk-guide-card{position:fixed;z-index:2;left:50%;bottom:28px;transform:translateX(-50%);width:min(520px,calc(100vw - 28px));padding:20px 22px 16px;border:1px solid #d7e4f1;border-radius:18px;background:#fff;color:#18283d;box-shadow:0 16px 48px #06172e40}.rk-guide-top{display:flex;align-items:center;justify-content:space-between}.rk-guide-kicker{color:#0784a5;font-size:10px;font-weight:800;letter-spacing:.12em}.rk-guide-close{width:30px;height:30px;border:0;border-radius:50%;background:#eff4f9;color:#52647b;font-size:22px;cursor:pointer}.rk-guide-progress{height:4px;margin:10px 0 16px;border-radius:4px;background:#08a7bd;transition:width .2s}.rk-guide-card h2{margin:0 0 8px;font-size:19px}.rk-guide-copy{min-height:48px;margin:0;color:#53657d;font-size:14px;line-height:1.55}.rk-guide-actions{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:16px}.rk-guide-actions button{min-height:38px;padding:0 16px;border:1px solid #d7e2ee;border-radius:10px;background:#f7f9fc;color:#24364b;font-weight:650;cursor:pointer}.rk-guide-actions .rk-guide-next{border-color:#087eaa;background:#087eaa;color:#fff}.rk-guide-actions button:disabled{opacity:.42;cursor:default}.rk-guide-count{color:#72839a;font-size:12px;font-weight:600}
@media(max-width:767px){.rk-guide-card{bottom:calc(env(safe-area-inset-bottom,0px) + 14px);padding:16px;border-radius:16px}.rk-guide-card h2{font-size:17px}.rk-guide-copy{font-size:13px;min-height:54px}.rk-guide-spotlight{max-width:calc(100vw - 8px)}}
@media(max-width:767px){
  #map .map-fab-items .attr-table-fab{display:flex!important}
  #map .map-fab-items .rk-guide-fab{display:none!important}
}

/* Keep the attribute-table chip consistent with the other mobile sheet chips,
   and hide it while another sheet is expanded. */
@media (max-width: 768px) {
  body.sheet-terbuka :is(
    #hotspot-sheet.sheet-minimized,
    #geopangan-sheet.sheet-minimized,
    #transjakarta-sheet.sheet-minimized,
    #transjogja-sheet.sheet-minimized,
    #ai-sheet.ais-sheet-minimized,
    #geotools-sheet.gs-sheet-minimized,
    #geodata-sheet.geodata-sheet-minimized,
    #catalog-popup-sheet.is-open.is-minimized,
    #attr-table-sheet.attr-table-sheet-minimized,
    #legendSidebar.lg-sidebar-minimized,
    #detail-panel.detail-panel-minimized,
    .bhumi-persil-sheet.is-minimized,
    .dm-sidebar.dm-sidebar-minimized,
    .al-sidebar.al-sidebar-minimized,
    .pa-panel.pa-min
  ) {
    display: none !important;
  }

  #attr-table-sheet.attr-table-sheet-minimized {
    width: min(220px, calc(100vw - 48px)) !important;
    min-height: 36px !important;
    height: 36px !important;
    max-height: 36px !important;
    box-sizing: border-box !important;
    border-radius: 18px !important;
  }
  #attr-table-sheet.attr-table-sheet-minimized > .sheet-resize-handle,
  #attr-table-sheet.attr-table-sheet-minimized .at-sheet-handle,
  #attr-table-sheet.attr-table-sheet-minimized .at-sheet-body {
    display: none !important;
  }
  #attr-table-sheet.attr-table-sheet-minimized .at-sheet-head {
    min-height: 36px !important;
    box-sizing: border-box !important;
    padding: 4px 14px !important;
    border-bottom: 0 !important;
  }
  body.sheet-terbuka #attr-table-sheet.attr-table-sheet-minimized {
    display: none !important;
  }
}


/* Attribute table sheet docks on the right on desktop. */
@media (min-width: 769px) {
  #attr-table-sheet { left: auto !important; right: 0 !important; }
  #attr-table-sheet:not(.attr-table-sheet-open):not(.attr-table-sheet-minimized) { transform: translateX(calc(100% + 24px)) !important; }
  #attr-table-sheet.attr-table-sheet-open { transform: translateX(0) !important; }
  #attr-table-sheet.attr-table-sheet-minimized { left: auto !important; right: 50% !important; transform: translateX(50%) !important; }
  body.attr-table-sheet-open:not(.attr-table-sheet-minimized) {
    --left-sheet-width: 0px !important;
    --right-sheet-width: var(--desktop-sheet-width, 30vw) !important;
  }
  body.attr-table-sheet-open:not(.attr-table-sheet-minimized) #map {
    margin-left: 0 !important;
    left: 0 !important;
  }
  body.attr-table-sheet-open:not(.attr-table-sheet-minimized) #map .map-fab-wrap,
  body.attr-table-sheet-open:not(.attr-table-sheet-minimized) #map .leaflet-bottom.leaflet-center,
  body.attr-table-sheet-open:not(.attr-table-sheet-minimized) .zoom-control-wrap,
  body.attr-table-sheet-open:not(.attr-table-sheet-minimized) .unified-search,
  body.attr-table-sheet-open:not(.attr-table-sheet-minimized) .quick-layer-bar,
  body.attr-table-sheet-open:not(.attr-table-sheet-minimized) .petadasar-export-block {
    left: calc((100vw - var(--right-sheet-width)) / 2) !important;
  }
}