/* ═══════════════════════════════════════════════════════════════
   PATCH v20 — Palette Refined (Light "Outdoor" & Dark "Night Ops")
   ═══════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════
   KANURAGAN MAP — PALET EMERALD TWILIGHT (v21)
   Light: Emerald Daylight — Bersih, cerah, profesional
   Dark:  Obsidian Cockpit — Cockpit jet tempur, gelap elegan
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* BACKGROUND */
  --bg-app: #0a0f0d;
  --bg-card: rgba(19, 26, 23, 0.94);
  --bg-card-solid: #131a17;
  --bg-overlay: rgba(0, 0, 0, 0.75);

  /* BORDER */
  --border-ui: rgba(16, 185, 129, 0.18);
  --border-ui-strong: rgba(16, 185, 129, 0.45);

  /* TEKS */
  --text-main: #e8f0eb;
  --text-sub: #94a3b8;
  --text-muted: #64748b;

  /* AKSEN */
  --accent-primary: #10b981;
  --accent-primary-hover: #34d399;
  --accent-primary-soft: rgba(16, 185, 129, 0.12);
  --accent-amber: #fbbf24;
  --accent-amber-soft: rgba(251, 191, 36, 0.12);
  --accent-alert: #ef4444;
  --accent-alert-soft: rgba(239, 68, 68, 0.12);

  /* SHADOW & GLOW */
  --shadow-float: 0 8px 32px rgba(0, 0, 0, 0.7);
  --shadow-card: 0 2px 12px rgba(0, 0, 0, 0.5);
  --glow-primary: 0 0 20px rgba(16, 185, 129, 0.35);
  --glow-amber: 0 0 16px rgba(251, 191, 36, 0.35);

  /* GRADIENT */
  --gradient-premium: linear-gradient(135deg, #10b981, #fbbf24);
  --gradient-card: linear-gradient(145deg, rgba(19,26,23,0.98), rgba(10,15,13,0.96));
}

[data-theme="light"] {
  /* BACKGROUND */
  --bg-app: #eef2ee;
  --bg-card: rgba(255, 255, 255, 0.94);
  --bg-card-solid: #ffffff;
  --bg-overlay: rgba(15, 23, 42, 0.55);

  /* BORDER */
  --border-ui: rgba(6, 95, 70, 0.14);
  --border-ui-strong: rgba(6, 95, 70, 0.35);

  /* TEKS */
  --text-main: #0a1a12;
  --text-sub: #475569;
  --text-muted: #64748b;

  /* AKSEN */
  --accent-primary: #065f46;
  --accent-primary-hover: #047857;
  --accent-primary-soft: rgba(6, 95, 70, 0.08);
  --accent-amber: #b45309;
  --accent-amber-soft: rgba(180, 83, 9, 0.08);
  --accent-alert: #b91c1c;
  --accent-alert-soft: rgba(185, 28, 28, 0.08);

  /* SHADOW & GLOW */
  --shadow-float: 0 6px 24px rgba(6, 95, 70, 0.12);
  --shadow-card: 0 2px 8px rgba(6, 95, 70, 0.08);
  --glow-primary: 0 0 16px rgba(6, 95, 70, 0.2);
  --glow-amber: 0 0 12px rgba(180, 83, 9, 0.2);

  /* GRADIENT */
  --gradient-premium: linear-gradient(135deg, #065f46, #b45309);
  --gradient-card: linear-gradient(145deg, #ffffff, #f8fafc);
}

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; user-select: none; }
html, body { width: 100%; height: 100%; background: var(--bg-app); color: var(--text-main); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; overflow: hidden; font-size: 15px; }

#mapView { position: fixed !important; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 1 !important; }

/* 1. BILAH PENCARIAN ATAS */
.gm-top-dock { position: fixed !important; top: 12px; left: 12px; right: 12px !important; z-index: 1000 !important; }
.gm-logo-badge { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: var(--bg-card-solid); margin-right: 8px; color: var(--accent-primary); flex-shrink: 0; cursor: pointer; }
.gm-logo-badge svg { width: 18px; height: 18px; }
.gm-search-input { flex: 1; min-width: 0 !important; background: transparent; border: none; outline: none; font-family: inherit; font-size: 16.5px; font-weight: 700; color: var(--text-main); padding: 4px 0; }
.gm-search-input::placeholder { color: var(--text-sub); font-size: 15.5px; font-weight: 600; }
.gm-search-btn { background: transparent; border: none; color: var(--text-sub); cursor: pointer; padding: 4px; display: flex; align-items: center; justify-content: center; }
.gm-search-btn svg { width: 18px; height: 18px; fill: currentColor; }

.gm-suggestions { margin-top: 6px; background: var(--bg-card-solid); border: 1px solid var(--border-ui); border-radius: 14px; box-shadow: var(--shadow-float); max-height: 68vh; overflow-y: auto; display: none; }
.gm-sugg-item { padding: 11px 14px; border-bottom: 1px solid var(--border-ui); cursor: pointer; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.gm-sugg-item:last-child { border-bottom: none; }
.gm-sugg-item:hover, .gm-sugg-item:active { background: rgba(16, 185, 129, 0.08); }
.gm-sugg-title { font-size: 16.5px !important; font-weight: 800 !important; color: var(--text-main); width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.3; }
.gm-sugg-desc { font-size: 13.5px !important; font-weight: 600 !important; color: var(--text-sub); width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }

/* Kotak saran rute atas */
.route-sugg-item { padding: 12px 16px !important; border-bottom: 1px solid var(--border-ui); cursor: pointer; transition: background 0.15s ease; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.route-sugg-item:last-child { border-bottom: none; }
.route-sugg-item:hover, .route-sugg-item:active { background: rgba(16, 185, 129, 0.08); }

/* PATCH SEARCH-REDESIGN: Style seragam untuk title/desc di route suggestions */
.route-sugg-box .route-sugg-title {
  font-size: 15.5px !important;
  font-weight: 800 !important;
  color: var(--text-main) !important;
  line-height: 1.3 !important;
  display: block !important;
  width: 100% !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.route-sugg-box .route-sugg-desc {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--text-sub) !important;
  line-height: 1.4 !important;
  display: block !important;
  width: 100% !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  margin-top: 2px !important;
}

/* 2. KARTU LOKASI BAWAH (GOOGLE MAPS STYLE) */
.place-card { position: fixed !important; bottom: -150px; left: 12px; right: 12px; max-width: 440px; margin: 0 auto; background: var(--bg-card-solid); border: 1.5px solid var(--border-ui); border-radius: 18px; padding: 14px 16px; box-shadow: var(--shadow-float); z-index: 1200 !important; transition: bottom 0.25s cubic-bezier(0.16, 1, 0.3, 1); display: flex; flex-direction: column; gap: 14px; backdrop-filter: blur(12px); }
.place-card.active { bottom: 20px !important; }
.btn-place-close { position: absolute; top: 12px; right: 12px; background: rgba(0,0,0,0.05); border: none; width: 28px; height: 28px; border-radius: 50%; font-size: 14px; font-weight: 800; color: var(--text-sub); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.15s ease; }
[data-theme="dark"] .btn-place-close { background: rgba(255,255,255,0.1); }
.btn-place-close:active { background: rgba(239, 68, 68, 0.15); color: #ef4444; }
.place-card-info { padding-right: 32px; }
.place-card-title { font-size: 16.5px; font-weight: 800; color: var(--text-main); line-height: 1.3; }
.place-card-desc { font-size: 12.5px; color: var(--text-sub); margin-top: 4px; }
.place-card-actions { display: flex; gap: 8px; width: 100%; }
.btn-place-action { flex: 1; border: none; border-radius: 12px; padding: 10px 0; font-size: 13.5px; font-weight: 800; display: flex; align-items: center; justify-content: center; gap: 6px; cursor: pointer; transition: transform 0.15s ease; }
.btn-place-action:active { transform: scale(0.96); }
.btn-place-action svg { width: 16px; height: 16px; fill: currentColor; }
.btn-share { background: rgba(16, 185, 129, 0.12); color: var(--accent-primary); border: 1.5px solid var(--accent-primary); }
[data-theme="dark"] .btn-share { background: rgba(52, 211, 153, 0.15); border-color: #34d399; color: #34d399; }
.btn-route { background: var(--accent-primary); color: var(--text-main); box-shadow: 0 4px 14px rgba(16, 185, 129, 0.35); }


.route-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; font-weight: 700; font-size: 15px; color: var(--accent-primary); letter-spacing: 0.5px; }
.route-inputs { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.route-row { display: flex; align-items: center; gap: 8px; }
.route-input-wrap { flex: 1; display: flex; align-items: center; background: rgba(0,0,0,0.04); border: 1px solid var(--border-ui); border-radius: 10px; padding: 7px 10px; }
[data-theme="dark"] .route-input-wrap { background: rgba(255,255,255,0.05); }
.route-input-wrap svg { width: 16px; height: 16px; margin-right: 8px; flex-shrink: 0; }
.route-input { flex: 1; background: transparent; border: none; outline: none; font-size: 15px; color: var(--text-main); font-family: inherit; }
.btn-swap { background: var(--bg-card); border: 1px solid var(--border-ui); border-radius: 50%; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--text-main); flex-shrink: 0; }
.btn-swap svg { width: 16px; height: 16px; fill: currentColor; }
.route-actions { display: flex; gap: 8px; }
.btn-calc-route { flex: 1; background: var(--accent-primary); color: var(--text-main); border: none; border-radius: 10px; padding: 10px; font-weight: 700; font-size: 14px; cursor: pointer; box-shadow: 0 2px 8px rgba(16, 185, 129, 0.25); }
.btn-cancel-route { background: transparent; border: 1px solid var(--border-ui); color: var(--text-sub); border-radius: 10px; padding: 10px 14px; font-size: 14px; cursor: pointer; }
.route-info-badge {
  margin-top: 10px;
  padding: 14px 16px !important;
  background: #f8fafc !important;
  border: 1.5px solid #cbd5e1 !important;
  border-left: 6px solid #059669 !important;
  border-radius: 14px !important;
  font-size: 14px !important;
  display: none;
  line-height: 1.5;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
}
[data-theme="dark"] .route-info-badge {
  background: #0f172a !important;
  border: 1.5px solid #334155 !important;
  border-left: 6px solid #10b981 !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}

/* KELAS TIPOGRAFI RAMAH LANSIA (HERO TIME & DISTANCE) */
.route-hero-time {
  font-size: 24px !important;
  font-weight: 900 !important;
  color: #000000 !important; /* HITAM PEKAT TEGEL DI TEMA TERANG */
  line-height: 1.15;
  letter-spacing: -0.5px;
}
[data-theme="dark"] .route-hero-time {
  color: #ffffff !important;
}

.route-hero-sub {
  font-size: 16px !important;
  font-weight: 800 !important;
  color: #1e293b !important; /* HITAM SLATE DI TEMA TERANG */
  margin-top: 4px;
}
[data-theme="dark"] .route-hero-sub {
  color: #e2e8f0 !important;
}

.route-hero-via {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #475569 !important;
  margin-top: 4px;
  line-height: 1.4;
}
[data-theme="dark"] .route-hero-via {
  color: #94a3b8 !important;
}

/* PESAN STATUS MENGHITUNG RUTE */
.route-loading-text {
  font-size: 15.5px !important;
  font-weight: 900 !important;
  color: #000000 !important; /* HITAM PEKAT ANTI-SILAU */
  display: flex;
  align-items: center;
  gap: 8px;
}
[data-theme="dark"] .route-loading-text {
  color: #ffffff !important;
}

/* PILIHAN RUTE LAIN */
.route-alt-box {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1.5px dashed #cbd5e1;
}
[data-theme="dark"] .route-alt-box {
  border-top-color: #334155;
}

.route-alt-item {
  margin-top: 6px;
  padding: 9px 12px !important;
  background: rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14.5px !important;
  font-weight: 800 !important;
  color: #000000 !important;
  transition: all 0.15s ease;
}
[data-theme="dark"] .route-alt-item {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.12);
  color: #ffffff !important;
}

/* 4. BRANKAS UNDUH OFFLINE & KARTU WILAYAH */
.license-box { background: rgba(16, 185, 129, 0.08); border: 1px dashed var(--accent-primary); border-radius: 12px; padding: 12px; margin-bottom: 14px; }
.license-status { display: flex; justify-content: space-between; align-items: center; font-size: 12px; font-weight: 700; margin-bottom: 8px; }
.license-input-wrap { display: flex; gap: 6px; }
.license-input { flex: 1; background: var(--bg-card-solid); border: 1px solid var(--border-ui); border-radius: 8px; padding: 7px 10px; font-size: 12px; color: var(--text-main); outline: none; font-family: monospace; text-transform: uppercase; }
.btn-activate { background: var(--accent-primary); color: #fff; border: none; border-radius: 8px; padding: 7px 14px; font-size: 13px; font-weight: 700; cursor: pointer; }

.pack-item-card { background: rgba(0,0,0,0.03); border: 1px solid var(--border-ui); border-radius: 12px; padding: 12px 14px; margin-bottom: 10px; display: flex; flex-direction: column; gap: 8px; }
[data-theme="dark"] .pack-item-card { background: rgba(255,255,255,0.04); }
.pack-row { display: flex; justify-content: space-between; align-items: center; }
.pack-title { font-size: 15px; font-weight: 700; color: var(--text-main); }
.pack-sub { font-size: 11px; color: var(--text-sub); }
.pack-btn-group { display: flex; gap: 6px; }
.btn-pack-act { border: none; border-radius: 16px; padding: 6px 12px; font-size: 11px; font-weight: 700; cursor: pointer; }
.btn-download { background: var(--accent-amber); color: #fff; }
.btn-use { background: var(--accent-primary); color: #fff; }
.btn-use.active { background: #10b981 !important; color: #fff; }
.btn-del { background: transparent; border: 1px solid var(--border-ui); color: var(--accent-alert); }

/* PROGRESS BAR UNDUH */
.progress-bar-wrap { width: 100%; height: 6px; background: rgba(0,0,0,0.1); border-radius: 3px; overflow: hidden; display: none; }
[data-theme="dark"] .progress-bar-wrap { background: rgba(255,255,255,0.1); }
.progress-bar-fill { height: 100%; width: 0%; background: var(--accent-primary); transition: width 0.1s ease; }

/* WATERMARK KANURAGAN MAP BESAR & ANTI-TABRAKAN */
.gm-watermark-dock {
  position: fixed !important;
  bottom: 56px !important; /* Diturunkan agar rapi tepat di atas telemetri */
  left: 50% !important;
  transform: translateX(-50%) !important;
  z-index: 500 !important;
  pointer-events: none;
  display: flex !important;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.85);
  padding: 3px 10px;
  border-radius: 16px;
  backdrop-filter: blur(8px);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
  opacity: 0.95;
  transition: opacity 0.2s ease;
}
[data-theme="dark"] .gm-watermark-dock {
  background: rgba(18, 22, 18, 0.82) !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4) !important;
}
.gm-watermark-text {
  font-size: 14.5px !important;
  font-weight: 900 !important;
  color: #1e293b;
  letter-spacing: 0.5px;
}
[data-theme="dark"] .gm-watermark-text {
  color: #f1f5f1 !important;
}

@media (min-width: 768px) {
  .gm-watermark-dock {
    bottom: 24px !important;
    left: 24px !important;
    transform: none !important; /* Di desktop geser ke kiri bawah ala Google Maps klasik */
  }
}
[data-theme="dark"] .gm-watermark-text {
  color: rgba(241, 245, 241, 0.75) !important;
}

/* Sembunyikan watermark otomatis saat kartu tempat atau navigasi aktif agar bebas tabrakan */
.place-card.active ~ .gm-watermark-dock,
body.route-sheet-active .gm-watermark-dock,
body.in-navigation .gm-watermark-dock {
  opacity: 0 !important;
}

.gm-telemetry-dock {
  position: fixed !important;
  bottom: 10px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  z-index: 1000 !important;
  display: flex !important;
  flex-wrap: nowrap !important; /* Mencegah chip turun ke baris kedua */
  gap: 4px !important;
  max-width: 96vw !important;
  overflow-x: auto !important;
  scrollbar-width: none !important;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.gm-telemetry-dock::-webkit-scrollbar { display: none; }
/* BILAH TELEMETRI BAWAH: HITAM PEKAT DI TEMA TERANG */
.gm-chip {
  background: rgba(255, 255, 255, 0.94) !important;
  border: 1.5px solid rgba(15, 23, 42, 0.22) !important;
  border-radius: 16px !important;
  padding: 4px 10px !important;
  backdrop-filter: blur(12px) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12) !important;
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}
.chip-lbl {
  font-size: 10.5px !important;
  font-weight: 800 !important;
  color: #334155 !important;
}
.chip-val {
  font-size: 13.5px !important;
  font-weight: 900 !important;
  color: #000000 !important; /* HITAM PEKAT ANTI-PUDAR DI TEMA TERANG */
  letter-spacing: 0.3px !important;
}

/* DI TEMA GELAP: PUTIH PERAK / HIJAU KOKPIT TAKTIKAL */
[data-theme="dark"]
[data-theme="dark"] .chip-lbl {
  color: #94a3b8 !important;
}
[data-theme="dark"] .chip-val {
  color: #10b981 !important;
}
.place-card.active ~ .gm-telemetry-dock {
  position: fixed !important;
  bottom: 12px !important; /* Paling Bawah */
  left: 50% !important;
  transform: translateX(-50%) !important; /* Center Tengah Layar */
  z-index: 1000 !important;
  display: flex !important;
  gap: 6px;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

/* BILAH TELEMETRI BAWAH: HITAM PEKAT DI TEMA TERANG */

.chip-lbl {
  font-size: 10.5px !important;
  font-weight: 800 !important;
  color: #334155 !important;
}
.chip-val {
  font-size: 13.5px !important;
  font-weight: 900 !important;
  color: #000000 !important; /* HITAM PEKAT ANTI-PUDAR DI TEMA TERANG */
  letter-spacing: 0.3px !important;
}

/* DI TEMA GELAP: PUTIH PERAK / HIJAU KOKPIT TAKTIKAL */
[data-theme="dark"]
[data-theme="dark"] .chip-lbl {
  color: #94a3b8 !important;
}
[data-theme="dark"] .chip-val {
  color: #10b981 !important;
} /* Hijau Rimba Tua Anti-Silau */

/* TOMBOL FLOATING DOK KANAN */
.gm-fab-dock {
  position: fixed !important;
  right: 14px !important;
  bottom: 78px !important;
  z-index: 1000 !important;
  display: flex !important;
  flex-direction: column;
  gap: 12px !important;
}
.gm-fab { width: 44px; height: 44px; border-radius: 50%; background: var(--bg-card); border: 1px solid var(--border-ui); color: var(--text-main); display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: var(--shadow-float); backdrop-filter: blur(8px); transition: transform 0.15s ease; }
.gm-fab:active { transform: scale(0.92); }
.gm-fab svg { width: 24px; height: 24px; fill: currentColor; }
.gm-fab.fab-directions { background: var(--accent-primary); color: var(--text-main); border: none; box-shadow: 0 4px 14px rgba(16, 185, 129, 0.35); }
.gm-fab.fab-gps { color: var(--accent-primary); }

.gm-needle-pin { width: 26px; height: 38px; cursor: pointer; filter: drop-shadow(0 4px 6px rgba(0,0,0,0.35)); transform: translate(-50%, -100%); }

.gm-modal { position: fixed !important; bottom: -100%; left: 0; right: 0; max-width: 480px; margin: 0 auto; height: 75vh; background: var(--bg-card-solid); border-top: 3px solid var(--accent-primary); border-radius: 20px 20px 0 0; z-index: 2000 !important; padding: 16px; transition: bottom 0.3s cubic-bezier(0.16, 1, 0.3, 1); box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.35); display: flex; flex-direction: column;   visibility: hidden;
}
.gm-modal.open { bottom: 0 !important;   visibility: visible !important;
}
.modal-head { display: flex; justify-content: space-between; align-items: center; padding-bottom: 10px; border-bottom: 1px solid var(--border-ui); margin-bottom: 12px; }
.modal-head h3 { font-size: 15px; font-weight: 700; color: var(--accent-primary); }
.modal-close { background: transparent; border: none; font-size: 16px; color: var(--text-sub); cursor: pointer; }
.modal-content { flex: 1; overflow-y: auto; font-size: 12px; line-height: 1.6; }
.maplibregl-ctrl-group { display: none !important; }

/* TAB PILIHAN MODA TRANSPORTASI (MOBIL, MOTOR, JALAN KAKI) */
.route-mode-bar {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
  background: rgba(0, 0, 0, 0.08);
  border-radius: 14px;
  padding: 5px;
}
[data-theme="dark"] .route-mode-bar {
  background: rgba(255, 255, 255, 0.08);
}
[data-theme="dark"] .route-mode-bar {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
  background: rgba(0, 0, 0, 0.08);
  border-radius: 14px;
  padding: 5px;
}
[data-theme="dark"] .route-mode-bar {
  background: rgba(255, 255, 255, 0.08);
}
.btn-mode-tab {
  flex: 1;
  border: none;
  background: transparent;
  color: #334155;
  padding: 10px 6px;
  border-radius: 10px;
  font-size: 15px !important;
  font-weight: 800 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
}
[data-theme="dark"] .btn-mode-tab {
  color: var(--text-sub);
}
.btn-mode-tab.active {
  background: #ffffff !important;
  color: #000000 !important; /* HITAM PEKAT SAAT AKTIF DI TEMA TERANG */
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.18);
}
[data-theme="dark"] .btn-mode-tab.active {
  background: #1e293b !important;
  color: #ffffff !important;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.5);
}

/* DROPDOWN SARAN RUTE MELAYANG MANDIRI */
.route-sugg-box {
  /* PATCH FASE2A: position FIXED biar tidak kepotong parent */
  position: fixed !important;
  top: auto;
  /* PATCH FASE2B: Lebar sama dengan card input (12px dari tepi viewport) */
  left: 12px;
  right: 12px;
  max-width: 440px;
  margin: 0 auto;
  background: var(--bg-card-solid);
  border: 1px solid var(--border-ui);
  border-radius: 14px;
  box-shadow: var(--shadow-float);
  max-height: 60vh;
  overflow-y: auto;
  z-index: 10000 !important;
  display: none;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--accent-primary) transparent;
  padding: 4px 0;
  /* PATCH FASE2B: Pastikan list sama lebar dengan input card */
  box-sizing: border-box;
}

/* PATCH FASE2B: Di desktop, list juga full width seperti input */
@media (min-width: 768px) {
  .route-sugg-box {
    left: 20px;
    right: 20px;
    max-width: 420px;
    margin: 0;
  }
}

.route-sugg-box::-webkit-scrollbar {
  width: 6px;
}

.route-sugg-box::-webkit-scrollbar-thumb {
  background: var(--accent-primary);
  border-radius: 3px;
}

.route-sugg-box::-webkit-scrollbar-track {
  background: transparent;
}

/* PATCH FASE2A: Dynamic header via JS */
.route-sugg-header {
  display: block;
  padding: 10px 16px 8px 16px;
  font-size: 11.5px;
  font-weight: 900;
  color: var(--accent-primary);
  letter-spacing: 0.8px;
  text-transform: uppercase;
  border-bottom: 1.5px solid var(--border-ui);
  margin-bottom: 4px;
  background: var(--bg-card-solid);
  border-radius: 14px 14px 0 0;
  position: sticky;
  top: 0;
  z-index: 2;
}

[data-theme="dark"] .route-sugg-header {
  background: var(--bg-card-solid);
}

/* PIN TITIK AWAL (HIJAU GOOGLE) */
.gm-origin-pin {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #10b981;
  border: 3px solid #ffffff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.4);
  transform: translate(-50%, -50%);
}

/* KARTU PILIHAN LAYER SEPERTI OPENSTREETMAP */
.layer-option-card {
  background: var(--bg-card-solid);
  border: 2px solid var(--border-ui);
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 10px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.layer-option-card:hover, .layer-option-card:active {
  border-color: #ffffff !important;
}
.layer-option-card.active {
  border-color: #10b981;
  background: rgba(16, 185, 129, 0.08);
}
.layer-opt-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  margin-bottom: 4px;
  color: var(--text-main);
}
.layer-opt-desc {
  font-size: 11.5px;
  color: var(--text-sub);
  line-height: 1.4;
}
.layer-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 10px;
  background: var(--accent-primary);
  color: #fff;
}
.fab-layers {
  color: #10b981;
}

/* FILTER ADAPTIF GELAP UNTUK LAYER RASTER ONLINE */
[data-theme="dark"] body.raster-mode #mapView .maplibregl-canvas-container canvas {
  filter: invert(90%) hue-rotate(180deg) brightness(88%) contrast(115%);
}

/* TELEMETRI BAWAH ADEM & TERANG DI TEMA GELAP */
[data-theme="dark"]
.chip-lbl {
  font-size: 10.5px !important;
  font-weight: 800 !important;
  color: #334155 !important;
}
.chip-val {
  font-size: 13.5px !important;
  font-weight: 900 !important;
  color: #000000 !important; /* HITAM PEKAT ANTI-PUDAR DI TEMA TERANG */
  letter-spacing: 0.3px !important;
}

/* DI TEMA GELAP: PUTIH PERAK / HIJAU KOKPIT TAKTIKAL */
[data-theme="dark"]
[data-theme="dark"] .chip-lbl {
  color: #94a3b8 !important;
}
[data-theme="dark"] .chip-val {
  color: #10b981 !important;
}
[data-theme="dark"] .gm-watermark-text {
  color: rgba(255, 255, 255, 0.8) !important;
}

/* MODAL & PANEL PEREKAM JEJAK TAKTIKAL */
.track-stat-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-bottom: 14px;
}
.track-stat-card {
  background: rgba(0, 0, 0, 0.05);
  border: 1px solid var(--border-ui);
  border-radius: 12px;
  padding: 10px;
  text-align: center;
}
[data-theme="dark"] .track-stat-card {
  background: rgba(255, 255, 255, 0.05);
}
.track-stat-lbl {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-sub);
  margin-bottom: 3px;
}
.track-stat-val {
  font-size: 18px;
  font-weight: 800;
  color: #10b981;
  font-family: monospace;
}
.btn-track-action {
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: 12px;
  font-weight: 800;
  font-size: 13.5px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 8px;
  transition: all 0.2s ease;
}
.btn-track-start { background: #10b981; color: #fff; }
.btn-track-stop { background: #ef4444; color: #fff; }
.btn-track-back { background: #f59e0b; color: #fff; }
.btn-track-gpx { background: transparent; border: 1px solid var(--border-ui); color: var(--text-main); }

/* INDIKATOR TOMBOL FAB SAAT SEDANG MEREKAM */
.gm-fab.is-recording {
  border-color: #ef4444 !important;
  color: #ef4444 !important;
  animation: pulseRecording 1.5s infinite;
}
@keyframes pulseRecording {
  0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7); }
  70% { box-shadow: 0 0 0 10px rgba(239, 68, 68, 0); }
  100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
}

/* LEGENDA FAKTUAL WARNA PETA OFFLINE */
.legend-item-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}
.legend-swatch {
  width: 28px;
  height: 10px;
  border-radius: 4px;
  flex-shrink: 0;
}
.legend-swatch-rail {
  background: repeating-linear-gradient(90deg, #57534e, #57534e 4px, #ffffff 4px, #ffffff 8px);
  border: 1px solid #78716c;
}

/* PANEL PEREKAM JEJAK & BACKTRACK */
.track-stat-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-bottom: 14px;
}
.track-stat-card {
  background: rgba(0, 0, 0, 0.04);
  border: 1px solid var(--border-ui);
  border-radius: 12px;
  padding: 10px;
  text-align: center;
}
[data-theme="dark"] .track-stat-card {
  background: rgba(255, 255, 255, 0.05);
}
.track-stat-lbl {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-sub);
  margin-bottom: 3px;
}
.track-stat-val {
  font-size: 18px;
  font-weight: 800;
  color: #10b981;
  font-family: monospace;
}
.btn-track-action {
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: 12px;
  font-weight: 800;
  font-size: 13.5px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 8px;
  transition: all 0.2s ease;
}
.btn-track-start { background: #10b981; color: #fff; }
.btn-track-stop { background: #ef4444; color: #fff; }
.btn-track-back { background: #f59e0b; color: #fff; }
.btn-track-gpx { background: transparent; border: 1px solid var(--border-ui); color: var(--text-main); }

.gm-fab.is-recording {
  border-color: #ef4444 !important;
  color: #ef4444 !important;
  animation: pulseRecording 1.5s infinite;
}
@keyframes pulseRecording {
  0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7); }
  70% { box-shadow: 0 0 0 10px rgba(239, 68, 68, 0); }
  100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
}

/* TITIK POSISI PENGGUNA REAL-TIME (RADAR PULSE HIJAU) */
.gm-user-pulse-marker {
  width: 24px;
  height: 24px;
  position: relative;
  pointer-events: none;
  transition: transform 0.35s cubic-bezier(0.25, 1, 0.5, 1);
}

.live-rec-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ef4444;
  margin-right: 8px;
  flex-shrink: 0;
  animation: pulseRecording 1.2s infinite;
}
.live-track-info {
  flex: 1;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-main);
  font-family: monospace;
}
.live-track-actions {
  display: flex;
  gap: 5px;
}
.btn-live-act {
  background: rgba(0,0,0,0.06);
  border: 1px solid var(--border-ui);
  border-radius: 8px;
  padding: 4px 8px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  color: var(--text-main);
}
[data-theme="dark"] .btn-live-act {
  background: rgba(255,255,255,0.08);
}

/* POPUP TAKTIKAL ELEGAN (PENGGANTI ALERT BROWSER) */
/* POPUP DIALOG TAKTIKAL MODERN & ESTETIS */
.gm-popup-overlay {
  position: fixed !important;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.65) !important;
  backdrop-filter: blur(8px) !important;
  z-index: 100000 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 20px !important;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease !important;
}
.gm-popup-overlay.active {
  opacity: 1 !important;
  pointer-events: auto !important;
}
.gm-popup-card {
  width: 100% !important;
  max-width: 390px !important;
  background: var(--bg-card-solid) !important;
  border: 2px solid var(--accent-primary) !important;
  border-radius: 24px !important;
  padding: 22px 24px !important;
  box-shadow: 0 16px 45px rgba(0, 0, 0, 0.55) !important;
  transform: scale(0.92) translateY(10px);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
  display: flex !important;
  flex-direction: column !important;
}
.gm-popup-overlay.active .gm-popup-card {
  transform: scale(1) translateY(0) !important;
}
.gm-popup-head {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin-bottom: 12px !important;
  padding-bottom: 10px !important;
  border-bottom: 1px dashed var(--border-ui) !important;
}
.gm-popup-icon {
  font-size: 26px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 44px !important;
  height: 44px !important;
  border-radius: 14px !important;
  background: rgba(16, 185, 129, 0.12) !important;
  border: 1px solid var(--accent-primary) !important;
  flex-shrink: 0 !important;
}
.gm-popup-title {
  font-size: 16px !important;
  font-weight: 900 !important;
  color: var(--accent-primary) !important;
  letter-spacing: 0.3px !important;
  line-height: 1.2 !important;
}
.gm-popup-msg {
  font-size: 14px !important;
  color: var(--text-main) !important;
  line-height: 1.6 !important;
  margin-bottom: 20px !important;
  font-weight: 600 !important;
}
[data-theme="light"] .gm-popup-msg {
  color: #1e293b !important; /* Hitam Arang Jelas di Tema Terang */
}
.gm-popup-actions {
  display: flex !important;
  gap: 10px !important;
  justify-content: flex-end !important;
}
.btn-popup-ok {
  background: var(--accent-primary) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 30px !important;
  padding: 11px 24px !important;
  font-size: 13.5px !important;
  font-weight: 800 !important;
  letter-spacing: 0.3px !important;
  cursor: pointer !important;
  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.35) !important;
  transition: transform 0.15s ease !important;
}
.btn-popup-ok:active {
  transform: scale(0.95) !important;
}
.btn-popup-cancel {
  background: transparent !important;
  color: var(--text-sub) !important;
  border: 1.5px solid var(--border-ui) !important;
  border-radius: 30px !important;
  padding: 10px 18px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
}


/* KIPAS SOROT SUDUT PANDANG (HEADING CONE BEAM) PADA TITIK PENGGUNA */
.gm-user-pulse-marker .heading-beam {
  position: absolute;
  top: -18px;
  left: -18px;
  width: 60px;
  height: 60px;
  background: radial-gradient(circle at 50% 50%, rgba(16, 185, 129, 0.45) 0%, rgba(16, 185, 129, 0) 70%);
  clip-path: polygon(50% 50%, 20% 0%, 80% 0%);
  pointer-events: none;
  transform-origin: 50% 50%;
  transition: transform 0.12s linear;
}

/* CHIP ARAH INTERAKTIF */
.gm-chip-clickable {
  cursor: pointer;
  pointer-events: auto !important;
  transition: transform 0.15s ease, background 0.15s;
}
.gm-chip-clickable:active {
  transform: scale(0.94);
}

/* DIAL KOMPAS TAKTIKAL 360 DERAJAT */
.compass-dial-wrap {
  width: 190px;
  height: 190px;
  margin: 10px auto;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.compass-dial-rose {
  width: 180px;
  height: 180px;
  border-radius: 50%;
  border: 3px solid var(--accent-primary);
  background: radial-gradient(circle, rgba(16, 185, 129, 0.08) 0%, rgba(0,0,0,0.25) 75%);
  position: relative;
  box-shadow: 0 0 24px rgba(16, 185, 129, 0.25);
  transition: transform 0.08s linear;
}
[data-theme="dark"] .compass-dial-rose {
  border-color: #10b981;
  box-shadow: 0 0 24px rgba(52, 211, 153, 0.3);
}
.compass-cardinal {
  position: absolute;
  font-weight: 900;
  font-size: 14px;
}
.c-n { top: 6px; left: 50%; transform: translateX(-50%); color: #ef4444; }
.c-e { right: 8px; top: 50%; transform: translateY(-50%); color: var(--text-main); }
.c-s { bottom: 6px; left: 50%; transform: translateX(-50%); color: var(--text-sub); }
.c-w { left: 8px; top: 50%; transform: translateY(-50%); color: var(--text-main); }
.compass-needle-pivot {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 130px;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.needle-north {
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 65px solid #ef4444;
}
.needle-south {
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 65px solid #94a3b8;
}

/* JARUM KOMPAS UTARA AUTO-HIDE (GOOGLE MAPS STYLE) */
.gm-compass-north {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--bg-card);
  border: 1px solid var(--border-ui);
  box-shadow: var(--shadow-float);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  backdrop-filter: blur(8px);
  transition: transform 0.15s ease;
}

.gm-compass-north.visible {
  opacity: 1;
  pointer-events: auto;
  transform: scale(1);
}
.gm-compass-needle-svg {
  width: 36px;
  height: 36px;
  transition: transform 0.1s linear;
  transform-origin: center center;
}

/* INDIKATOR TOMBOL GPS SAAT AKTIF HEAD-UP MODE */
.gm-fab.fab-gps.nav-headup {
  background: #0284c7 !important;
  color: #ffffff !important;
  box-shadow: 0 0 12px rgba(16, 185, 129, 0.7) !important;
}

/* TITIK PENGGUNA DENGAN KIPAS SOROT SUDUT PANDANG */
.gm-user-pulse-marker {
  width: 24px;
  height: 24px;
  position: relative;
  pointer-events: none;
}
.gm-user-pulse-marker .user-dot {
  width: 14px;
  height: 14px;
  background: #10b981;
  border: 2.5px solid #ffffff;
  border-radius: 50%;
  position: absolute;
  top: 5px;
  left: 5px;
  box-shadow: 0 0 10px rgba(16, 185, 129, 0.9);
}
.gm-user-pulse-marker .pulse-ring {
  width: 32px;
  height: 32px;
  background: rgba(16, 185, 129, 0.4);
  border-radius: 50%;
  position: absolute;
  top: -4px;
  left: -4px;
  animation: userRadar 1.8s infinite ease-out;
}
@keyframes userRadar {
  0% { transform: scale(0.4); opacity: 1; }
  100% { transform: scale(1.6); opacity: 0; }
}
.gm-user-pulse-marker .heading-beam {
  position: absolute;
  top: -18px;
  left: -18px;
  width: 60px;
  height: 60px;
  background: radial-gradient(circle at 50% 50%, rgba(16, 185, 129, 0.45) 0%, rgba(16, 185, 129, 0) 70%);
  clip-path: polygon(50% 50%, 20% 0%, 80% 0%);
  pointer-events: none;
  transform-origin: 50% 50%;
  transition: transform 0.1s linear;
}

/* PIN AWAL KEBERANGKATAN */
.gm-track-start-pin {
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: auto;
  cursor: pointer;
}
.start-pin-badge {
  background: #10b981;
  color: var(--text-main);
  font-size: 9.5px;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 6px;
  letter-spacing: 0.5px;
  margin-bottom: -3px;
  border: 1px solid #ffffff;
}

/* BILAH LIVE TRACKING MELAYANG */
.gm-live-track-bar {
  position: fixed !important;
  top: 68px;
  left: 12px;
  right: 12px;
  max-width: 440px;
  margin: 0 auto;
  background: var(--bg-card-solid);
  border: 1.5px solid var(--border-ui);
  border-radius: 14px;
  padding: 8px 12px;
  box-shadow: var(--shadow-float);
  z-index: 1100 !important;
  display: none;
  align-items: center;
  justify-content: space-between;
  backdrop-filter: blur(10px);
}
.live-rec-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ef4444;
  margin-right: 8px;
  flex-shrink: 0;
  animation: pulseRecording 1.2s infinite;
}
.live-track-info {
  flex: 1;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-main);
  font-family: monospace;
}
.live-track-actions {
  display: flex;
  gap: 5px;
}
.btn-live-act {
  background: rgba(0,0,0,0.06);
  border: 1px solid var(--border-ui);
  border-radius: 8px;
  padding: 4px 8px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  color: var(--text-main);
}
[data-theme="dark"] .btn-live-act {
  background: rgba(255,255,255,0.08);
}

/* POPUP TAKTIKAL */
/* POPUP DIALOG TAKTIKAL MODERN & ESTETIS */
.gm-popup-overlay {
  position: fixed !important;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.65) !important;
  backdrop-filter: blur(8px) !important;
  z-index: 100000 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 20px !important;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease !important;
}
.gm-popup-overlay.active {
  opacity: 1 !important;
  pointer-events: auto !important;
}
.gm-popup-card {
  width: 100% !important;
  max-width: 390px !important;
  background: var(--bg-card-solid) !important;
  border: 2px solid var(--accent-primary) !important;
  border-radius: 24px !important;
  padding: 22px 24px !important;
  box-shadow: 0 16px 45px rgba(0, 0, 0, 0.55) !important;
  transform: scale(0.92) translateY(10px);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
  display: flex !important;
  flex-direction: column !important;
}
.gm-popup-overlay.active .gm-popup-card {
  transform: scale(1) translateY(0) !important;
}
.gm-popup-head {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin-bottom: 12px !important;
  padding-bottom: 10px !important;
  border-bottom: 1px dashed var(--border-ui) !important;
}
.gm-popup-icon {
  font-size: 26px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 44px !important;
  height: 44px !important;
  border-radius: 14px !important;
  background: rgba(16, 185, 129, 0.12) !important;
  border: 1px solid var(--accent-primary) !important;
  flex-shrink: 0 !important;
}
.gm-popup-title {
  font-size: 16px !important;
  font-weight: 900 !important;
  color: var(--accent-primary) !important;
  letter-spacing: 0.3px !important;
  line-height: 1.2 !important;
}
.gm-popup-msg {
  font-size: 14px !important;
  color: var(--text-main) !important;
  line-height: 1.6 !important;
  margin-bottom: 20px !important;
  font-weight: 600 !important;
}
[data-theme="light"] .gm-popup-msg {
  color: #1e293b !important; /* Hitam Arang Jelas di Tema Terang */
}
.gm-popup-actions {
  display: flex !important;
  gap: 10px !important;
  justify-content: flex-end !important;
}
.btn-popup-ok {
  background: var(--accent-primary) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 30px !important;
  padding: 11px 24px !important;
  font-size: 13.5px !important;
  font-weight: 800 !important;
  letter-spacing: 0.3px !important;
  cursor: pointer !important;
  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.35) !important;
  transition: transform 0.15s ease !important;
}
.btn-popup-ok:active {
  transform: scale(0.95) !important;
}
.btn-popup-cancel {
  background: transparent !important;
  color: var(--text-sub) !important;
  border: 1.5px solid var(--border-ui) !important;
  border-radius: 30px !important;
  padding: 10px 18px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
}

/* TOMBOL IMPOR GPX & WAYPOINT TAKTIKAL */
.btn-track-import {
  background: rgba(16, 185, 129, 0.12);
  border: 1.5px dashed var(--accent-primary);
  color: #ffffff !important;
}

/* ═══════════════════════════════════════════════════════════════
   PATCH v1.12.27: GMAP-STYLE WAYPOINT MARKER
   Label dinamis, pin ramping, auto-hide saat zoom out
   ═══════════════════════════════════════════════════════════════ */
.gm-waypoint-pin {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  transform: translate(-50%, -100%);
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease;
  will-change: transform;
}

/* Label GMap Style: tanpa kotak, text-shadow tebal */
.waypoint-badge {
  background: transparent !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  padding: 0 4px !important;
  border: none !important;
  text-shadow: 
    0 1px 2px rgba(0,0,0,0.9),
    0 0 3px rgba(0,0,0,0.8) !important;
  white-space: nowrap;
  margin-bottom: 2px;
  letter-spacing: 0.3px;
  transition: opacity 0.2s ease, transform 0.2s ease;
  pointer-events: none;
}

/* Sembunyikan label saat zoom out */
.gm-waypoint-pin.hide-label .waypoint-badge {
  opacity: 0;
  transform: translateY(5px);
  pointer-events: none;
}

/* KMAP-WPFIX v2.9: GMap Zoom Style (Perkecil Pin & Hilangkan Label) */
.gm-waypoint-pin.hide-label {
  display: none !important; /* Hilang total saat zoom out */
}
.gm-waypoint-pin:not(.hide-label) {
  display: flex !important;
  animation: pinDrop 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes pinDrop {
  0% { transform: translate(-50%, -100%) scale(0.5); opacity: 0; }
  100% { transform: translate(-50%, -100%) scale(1); opacity: 1; }
}

/* Pin Icon baru: Bayangan tipis seperti GMap */
.gm-waypoint-pin svg {
  filter: drop-shadow(0 2px 3px rgba(0,0,0,0.5));
  transition: transform 0.15s ease;
}

.gm-waypoint-pin:active svg {
  transform: scale(0.9);
}

/* KOTAK GRAFIK ELEVASI (PENDASARAN RUTE JALAN KAKI) */
.elev-profile-box {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1.5px dashed var(--border-ui);
  display: flex;
  flex-direction: column;
  position: relative;
}
.elev-profile-box canvas {
  width: 100%;
  height: 80px;
  border-bottom: 2px solid var(--accent-primary);
  margin-top: 6px;
}

/* ==========================================
   FAILSAFE ANTI-BOCOR UI (OFFLINE MODE)
   ========================================== */
body > .layer-option-card,
body > .legend-item-row,
body > .track-stat-card {
  display: none !important;
}
.gm-modal .layer-option-card,
.gm-modal .track-stat-card {
  display: block !important;
}
.gm-modal .legend-item-row {
  display: flex !important;
}

/* ============================================================
   HUD NAVIGASI 3D TURN-BY-TURN (HIJAU TAKTIKAL KANURAGAN - BEBAS BIRU)
   ============================================================ */
.btn-start-nav {
  width: 100%;
  margin-top: 10px;
  background: var(--accent-primary);
  color: #ffffff !important;
  border: none;
  border-radius: 12px;
  padding: 12px;
  font-size: 14.5px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.4);
  transition: transform 0.15s ease;
}
.btn-start-nav:active {
  transform: scale(0.96);
}

.gm-nav-top-banner {
  position: fixed !important;
  top: 12px;
  left: 12px;
  right: 12px;
  max-width: 440px;
  margin: 0 auto;
  background: #005d52 !important; /* Hijau Deep Pine Google Maps Asli */
  border: 1.5px solid #00796b !important;
  border-radius: 20px;
  padding: 14px 18px;
  box-shadow: 0 10px 28px rgba(0, 77, 64, 0.5);
  z-index: 2500 !important;
  display: none;
  align-items: center;
  gap: 14px;
}
[data-theme="dark"] .gm-nav-top-banner {
  position: fixed !important;
  top: 12px;
  left: 12px;
  right: 12px;
  max-width: 440px;
  margin: 0 auto;
  background: #005d52 !important; /* Hijau Deep Pine Google Maps Asli */
  border: 1.5px solid #00796b !important;
  border-radius: 20px;
  padding: 14px 18px;
  box-shadow: 0 10px 28px rgba(0, 77, 64, 0.5);
  z-index: 2500 !important;
  display: none;
  align-items: center;
  gap: 14px;
}
.gm-nav-top-banner.active {
  display: flex !important;
}

.nav-turn-icon-wrap {
  width: 58px !important;
  height: 58px !important;
  border-radius: 16px !important;
  background: rgba(255, 255, 255, 0.22) !important;
  border: 2px solid rgba(255, 255, 255, 0.5) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}
[data-theme="dark"] .nav-turn-icon-wrap {
  width: 58px !important;
  height: 58px !important;
  border-radius: 16px !important;
  background: rgba(255, 255, 255, 0.22) !important;
  border: 2px solid rgba(255, 255, 255, 0.5) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}
.nav-turn-arrow {
  font-size: 38px !important;
  font-weight: 900 !important;
  color: #ffffff !important;
  line-height: 1 !important;
}
[data-theme="dark"] .nav-turn-arrow {
  font-size: 38px !important;
  font-weight: 900 !important;
  color: #ffffff !important;
  line-height: 1 !important;
}

.nav-turn-info {
  flex: 1;
  overflow: hidden;
}
.nav-turn-dist {
  font-size: 32px !important;
  font-weight: 900 !important;
  color: #ffffff !important;
  line-height: 1.05 !important;
  font-family: monospace !important;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
  letter-spacing: 0.5px;
}
[data-theme="dark"] .nav-turn-dist {
  font-size: 32px !important;
  font-weight: 900 !important;
  color: #ffffff !important;
  line-height: 1.05 !important;
  font-family: monospace !important;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
  letter-spacing: 0.5px;
}
.nav-turn-street {
  font-size: 15.5px !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 3px;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}
.btn-nav-close-mini {
  background: transparent;
  border: none;
  color: var(--text-sub);
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  padding: 4px;
}

.gm-nav-bottom-bar {
  position: fixed !important;
  bottom: 20px;
  left: 12px;
  right: 12px;
  max-width: 440px;
  margin: 0 auto;
  background: var(--bg-card-solid);
  border: 1.5px solid var(--border-ui);
  border-radius: 18px;
  padding: 12px 18px;
  box-shadow: 0 6px 24px rgba(0,0,0,0.25);
  z-index: 2500 !important;
  display: none;
  align-items: center;
  justify-content: space-between;
  backdrop-filter: blur(12px);
}
.gm-nav-bottom-bar.active {
  display: flex !important;
}

.nav-bottom-stats {
  display: flex;
  align-items: center;
  gap: 10px;
}
.nav-stat-group {
  display: flex;
  flex-direction: column;
}
.nav-stat-val {
  font-size: 17px;
  font-weight: 900;
  color: var(--accent-primary);
  font-family: monospace;
  line-height: 1.1;
}
[data-theme="dark"] .nav-stat-val {
  color: #ffffff !important;
}
.nav-stat-lbl {
  font-size: 9px;
  font-weight: 700;
  color: var(--text-sub);
  letter-spacing: 0.5px;
}
.nav-stat-divider {
  color: var(--border-ui);
  font-weight: 900;
  font-size: 14px;
}

.btn-nav-stop {
  width: 44px;
  height: 44px;
  background: #ef4444;
  color: #ffffff !important;
  border: none;
  border-radius: 50%;
  font-size: 18px;
  font-weight: 900;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 4px 14px rgba(239, 68, 68, 0.4);
  transition: transform 0.15s ease, background 0.15s ease;
}
.btn-nav-stop:active {
  transform: scale(0.90);
  background: #dc2626;
}

/* Sembunyikan tombol menu kanan & telemetri saat navigasi aktif */
body.in-navigation .gm-fab-dock,
body.in-navigation .gm-telemetry-dock,
body.in-navigation .place-card {
  display: none !important;
}

/* Tombol Pusatkan Kembali Melayang (Google Maps Re-center) */
.btn-nav-recenter {
  position: fixed !important;
  bottom: 92px;
  right: 14px;
  width: 48px;
  height: 48px;
  background: var(--bg-card-solid);
  border: 1.5px solid var(--border-ui);
  color: var(--accent-primary);
  border-radius: 50%;
  display: none;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
  z-index: 2600 !important;
  cursor: pointer;
  transition: transform 0.15s ease;
}
[data-theme="dark"] .btn-nav-recenter {
  background: #1e293b;
  border-color: #334155;
  color: #34d399;
}
.btn-nav-recenter.visible {
  display: flex !important;
}
.btn-nav-recenter:active {
  transform: scale(0.92);
}
[data-theme="dark"] .btn-nav-recenter {
  background: #1e293b;
  border-color: #334155;
  color: #34d399;
}
.btn-nav-recenter.visible {
  display: flex !important;
}
.btn-nav-recenter:active {
  transform: scale(0.92);
}

/* Izinkan kompas tetap muncul saat navigasi */


/* GRID TIPE PETA & ALAT MODAL (GOOGLE MAPS STYLE) */
.map-types-grid, .map-type-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-bottom: 12px;
}
.fab-3d {
  background: var(--bg-card) !important;
  color: #059669 !important; /* Hijau Zamrud Tua Tajam */
  border: 2px solid var(--border-ui) !important;
}
[data-theme="dark"] .fab-3d {
  color: #10b981 !important; /* Hijau Neon Terang */
}
.fab-3d.active {
  background: #005d52 !important;
  color: #ffffff !important;
  border-color: #10b981 !important;
  box-shadow: 0 0 12px rgba(16, 185, 129, 0.5) !important;
}
.map-type-card {
  background: var(--bg-card);
  border: 2px solid var(--border-ui);
  border-radius: 14px;
  padding: 12px 6px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.map-type-card.active {
  border-color: var(--accent-primary) !important;
  background: rgba(16, 185, 129, 0.12) !important;
}
.map-type-icon {
  font-size: 24px;
}
.map-type-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-main);
}

.map-tools-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.map-tool-card {
  background: var(--bg-card);
  border: 1px solid var(--border-ui);
  border-radius: 14px;
  padding: 12px 6px;
  text-align: center;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.15s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.map-tool-card:active {
  transform: scale(0.94);
  background: rgba(16, 185, 129, 0.1);
}
.map-tool-icon {
  font-size: 22px;
}
.map-tool-label {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--text-main);
  line-height: 1.2;
}


/* ============================================================
   3A. KARTU INPUT RUTE ATAS RAMPING (PERSIS GOOGLE MAPS)
   ============================================================ */
.route-top-card {
  position: fixed !important;
  top: 12px;
  left: 12px;
  right: 12px;
  max-width: 440px;
  margin: 0 auto;
  background: var(--bg-card-solid);
  border: 1.5px solid var(--border-ui);
  border-radius: 18px;
  padding: 8px 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  z-index: 1700 !important;
  display: none;
  backdrop-filter: blur(12px);
}
.route-top-card.active {
  display: block !important;
}

.route-top-inputs {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.route-top-row {
  display: flex;
  align-items: center;
  gap: 8px;
  position: relative;
}
.route-dot-origin {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #10b981;
  flex-shrink: 0;
  margin-left: 4px;
}
.route-dot-dest {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ea4335;
  flex-shrink: 0;
  margin-left: 4px;
}
.route-top-divider {
  width: 2px;
  height: 8px;
  background: rgba(148, 163, 184, 0.4);
  margin-left: 8px;
}
.route-top-input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--text-main);
  font-family: inherit;
  padding: 5px 0;
}
.route-top-input::placeholder {
  color: var(--text-sub);
  font-size: 13px;
  font-weight: 500;
}
.btn-route-swap, .btn-route-close, .btn-route-calc {
  background: transparent;
  border: none;
  color: var(--text-sub);
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 50%;
  flex-shrink: 0;
}
.btn-route-swap svg, .btn-route-calc svg {
  width: 17px;
  height: 17px;
  fill: currentColor;
}
.btn-route-close {
  font-size: 16px;
  font-weight: 700;
}
.btn-route-calc {
  color: var(--accent-primary);
}

/* Kotak Saran Dropdown: Jatuh ke Bawah dari Kartu Atas (Bebas dari Keyboard) */
/* PATCH FASE2A: Blok kedua .route-sugg-box DIHAPUS (duplikat)
   Definisi yang dipakai sekarang = baris 504 (position: fixed) */


.peek-text {
  font-size: 14.5px;
  font-weight: 800;
  color: var(--accent-primary);
  font-family: monospace;
}
[data-theme="dark"] .peek-text {
  color: #34d399;
}
.btn-peek-start {
  background: var(--accent-primary);
  color: #ffffff !important;
  border: none;
  border-radius: 20px;
  padding: 7px 16px;
  font-size: 12.5px;
  font-weight: 800;
  cursor: pointer;
}
.route-sheet-content {
  flex: 1;
  overflow-y: auto;
  padding: 0 14px 16px;
}

/* ============================================================
   LEMBAR HASIL RUTE BAWAH (HANYA UKURAN SEDANG & MINIMIZE)
   ============================================================ */
.route-bottom-sheet {
  position: fixed !important;
  bottom: 0;
  left: 0;
  right: 0;
  max-width: 480px;
  margin: 0 auto;
  background: var(--bg-card-solid);
  border-top: 2px solid var(--accent-primary);
  border-radius: 22px 22px 0 0;
  box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.35);
  z-index: 1600 !important;
  display: none;
  flex-direction: column;
  transition: height 0.28s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
}
.route-bottom-sheet.active {
  display: flex !important;
}

/* 1. UKURAN SEDANG (COMPACT - PAS TANPA TERTUTUP / MELAR) */
.route-bottom-sheet.half {
  height: auto;
    max-height: 60vh;
  min-height: 220px;
}

/* 2. UKURAN MINIMALIS (PEEK BAR RAMPING 60px) */
.route-bottom-sheet.peek {
  height: 84px !important;
}

.route-sheet-header {
  padding: 6px 14px 4px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
}
.route-sheet-handle-bar {
  width: 38px;
  height: 4.5px;
  border-radius: 3px;
  background: rgba(148, 163, 184, 0.45);
  margin-bottom: 4px;
}

.route-peek-summary {
  display: none;
  width: 100%;
  justify-content: space-between;
  align-items: center;
  padding: 6px 6px 4px 6px !important;
}
.route-bottom-sheet.peek .route-peek-summary {
  display: flex !important;
  width: 100%;
  justify-content: space-between;
  align-items: center;
  padding: 4px 6px 4px 6px !important;
}
.route-bottom-sheet.peek .route-sheet-content {
  display: none !important;
}

.peek-text {
  font-size: 14px;
  font-weight: 800;
  color: var(--accent-primary);
  font-family: monospace;
}
[data-theme="dark"] .peek-text {
  color: #34d399;
}
.btn-peek-start {
  background: var(--accent-primary);
  color: #ffffff !important;
  border: none;
  border-radius: 20px;
  padding: 6px 15px;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.route-sheet-content {
  flex: 1;
  overflow-y: auto;
  padding: 0 14px 12px;
}

/* DOK TOMBOL KANAN MENYESUAIKAN TINGGI KARTU COMPACT */
body.route-sheet-active .gm-telemetry-dock,
body.route-sheet-active .gm-fab.fab-directions {
  display: none !important;
}
body.route-sheet-active .gm-fab-dock {
  position: fixed !important;
  right: 14px !important;
  bottom: 78px !important;
  z-index: 1000 !important;
  display: flex !important;
  flex-direction: column;
  gap: 12px !important;
}
body.route-sheet-peek .gm-fab-dock {
  position: fixed !important;
  right: 14px !important;
  bottom: 78px !important;
  z-index: 1000 !important;
  display: flex !important;
  flex-direction: column;
  gap: 12px !important;
}

.btn-nav-close-round {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(0,0,0,0.05);
  border: 1.5px solid var(--border-ui);
  color: var(--text-main);
  font-size: 16px;
  font-weight: 800;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
[data-theme="dark"] .btn-nav-close-round {
  background: rgba(255,255,255,0.08);
}
.btn-nav-close-round:active {
  transform: scale(0.92);
}

.nav-center-trip-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
}
.nav-big-duration {
  font-size: 24px;
  font-weight: 900;
  color: #ea580c; /* Oranye Taktikal Google Maps */
  line-height: 1.1;
  font-family: inherit;
  letter-spacing: -0.5px;
}
.nav-sub-trip-info {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-sub);
  margin-top: 2px;
}

.btn-nav-share-round {
  background: rgba(16, 185, 129, 0.12);
  border: 1.5px solid var(--accent-primary);
  color: var(--accent-primary);
  border-radius: 20px;
  padding: 8px 14px;
  font-size: 12.5px;
  font-weight: 800;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
  transition: transform 0.15s ease;
}
[data-theme="dark"] .btn-nav-share-round {
  background: rgba(52, 211, 153, 0.15);
  border-color: #34d399;
  color: #34d399;
}
.btn-nav-share-round:active {
  transform: scale(0.94);
}

/* ============================================================
   KONTROL IKON GPS DUAL-MODE RESMI:
   - Standby GPS: Bulatan Hijau + Pulse Radar + Kipas Sorot Kompas (Default)
   - Navigasi & Rekam Jejak: Otomatis Berganti ke Panah 3D Hijau Khidir Besar
   ============================================================ */
.user-nav-arrow-3d {
  width: 46px;
  height: 46px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -23px;
  margin-left: -23px;
  display: none;
  align-items: center;
  justify-content: center;
  /* __V8_CSS_ROT__: transisi rotate lebih responsif */
  transition: transform 0.15s linear;
  pointer-events: none;
}

/* HANYA MUNCUL KETIKA NAVIGASI AKTIF ATAU REKAM JEJAK AKTIF */
body.in-navigation .user-nav-arrow-3d,
body.in-tracking .user-nav-arrow-3d {
  display: flex !important;
}

body.in-navigation .gm-user-pulse-marker .user-dot,
body.in-navigation .gm-user-pulse-marker .pulse-ring,
body.in-navigation .gm-user-pulse-marker .heading-beam,
body.in-tracking .gm-user-pulse-marker .user-dot,
body.in-tracking .gm-user-pulse-marker .pulse-ring,
body.in-tracking .gm-user-pulse-marker .heading-beam {
  display: none !important;
}

/* Sembunyikan bulatan hijau titik awal saat navigasi aktif (Hanya sisakan Panah 3D) */
body.in-navigation .gm-origin-pin {
  display: none !important;
}

/* BALON MENIT MELAYANG DI JALUR RUTE (GOOGLE MAPS STYLE) */
.gm-route-pill-badge {
  padding: 5px 10px;
  border-radius: 18px;
  font-size: 12px;
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
  pointer-events: auto !important;
  white-space: nowrap;
  transition: transform 0.15s ease, background 0.15s ease;
  user-select: none;
}
.gm-route-pill-badge:hover, .gm-route-pill-badge:active {
  transform: scale(1.08);
}

/* 1. Lencana Jalur Utama (Warna Kontras Mengikuti Mode Kendaraan) */
.gm-route-pill-primary {
  background: #2563eb;
  color: #ffffff !important;
  border: 2px solid #ffffff;
}
.gm-route-pill-primary.motorcycle {
  background: #7c3aed;
}

/* 2. Lencana Jalur Alternatif (Putih Berbingkai Abu-Abu Ala Google Maps) */
.gm-route-pill-alt {
  background: #ffffff;
  color: #334155 !important;
  border: 1.5px solid #94a3b8;
}
[data-theme="dark"] .gm-route-pill-alt {
  background: #1e293b;
  color: #e2e8f0 !important;
  border-color: #475569;
}

/* TOMBOL LAYER KANAN ATAS */

.gm-top-fab-dock { display: none !important; }

/* TOMBOL AKSI KANAN BAWAH (GPS DI ATAS RUTE) */
.gm-fab-dock {
  position: fixed !important;
  right: 14px !important;
  bottom: 78px !important;
  z-index: 1000 !important;
  display: flex !important;
  flex-direction: column;
  gap: 12px !important;
}

/* Geser kompas ke bawah saat kartu rute aktif agar bebas tabrakan */


/* Geser tombol layer ke bawah saat kartu rute aktif agar tidak tertimpa */
body.route-preview-active .gm-top-fab-dock { display: none !important; }

/* ============================================================
   LIVE TRACKING & FAMILY VIEWER STYLES
   ============================================================ */
.gm-live-viewer-banner {
  position: absolute;
  top: 14px;
  left: 14px;
  right: 14px;
  background: var(--bg-card);
  border: 1.5px solid var(--border-ui);
  border-radius: 16px;
  padding: 12px 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.25);
  z-index: 1200;
  display: flex;
  flex-direction: column;
  gap: 6px;
  backdrop-filter: blur(10px);
}
.viewer-status-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.viewer-badge-live {
  background: #10b981;
  color: var(--text-main);
  font-size: 11px;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: 20px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.viewer-badge-offline {
  background: #f59e0b;
  color: #1e293b;
  font-size: 11px;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: 20px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  animation: pulseRecording 1.5s infinite;
}
.viewer-telemetry-row {
  display: flex;
  gap: 12px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-sub);
}
.viewer-telemetry-val {
  color: var(--text-main);
  font-weight: 800;
}

/* ============================================================
   RESPONSIF TATA LETAK DESKTOP / PC (GOOGLE MAPS DESKTOP STYLE)
   ============================================================ */
@media (min-width: 768px) {
  /* Bilah pencarian melayang rapi di kiri atas (tidak melar selebar layar) */
  .gm-top-dock { position: fixed !important; top: 12px !important; left: 50% !important; right: auto !important; transform: translateX(-50%) !important; z-index: 1000 !important; display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; gap: 12px !important; max-width: 1000px !important; width: 100% !important; }
  .route-top-card {
    max-width: 420px !important;
    left: 20px !important;
    top: 20px !important;
  }
  /* Kartu lokasi dan tabel rute melayang elegan di panel kiri */
  .place-card {
    max-width: 420px !important;
    left: 20px !important;
    right: auto !important;
    bottom: -150px !important;
    margin: 0 !important;
    border-radius: 18px !important;
  }
  .place-card.active {
    bottom: 24px !important;
  }
  .route-bottom-sheet {
    max-width: 440px !important;
    left: 20px !important;
    right: auto !important;
    margin: 0 !important;
    border-radius: 20px !important;
    bottom: 24px !important;
  }
  /* Posisi dok telemetri & tombol di layar lebar */
  /* Dok telemetri tetap di tengah bawah pada layar desktop */
  .gm-telemetry-dock {
    left: 50% !important;
    transform: translateX(-50%) !important;
    bottom: 16px !important;
  }
  .gm-fab-dock {
    right: 24px !important;
    bottom: 24px !important;
  }

.gm-top-fab-dock { display: none !important; }
}

/* ============================================================
   MODUL SOS TAKTIKAL: SAKELAR INDEPENDEN, KARTU SAR, STROBO
   ============================================================ */
.sos-radio-card {
  background: rgba(16, 185, 129, 0.08);
  border: 1.5px solid #10b981;
  border-radius: 14px;
  padding: 12px;
  text-align: center;
  margin-bottom: 12px;
}
.sos-card-lbl {
  font-size: 10px;
  font-weight: 800;
  color: var(--text-sub);
  letter-spacing: 0.5px;
}
.sos-mgrs-display {
  font-size: 22px;
  font-weight: 900;
  font-family: monospace;
  color: #10b981;
  letter-spacing: 1.5px;
  margin: 4px 0;
}
.sos-sub-coords {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-main);
  font-family: monospace;
}
.sos-bat-status {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--text-sub);
  margin-top: 6px;
  display: flex;
  justify-content: center;
  gap: 8px;
}

/* SAKELAR INDEPENDEN */
.sos-switch-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(0, 0, 0, 0.04);
  border: 1px solid var(--border-ui);
  border-radius: 12px;
  padding: 10px 14px;
  margin-bottom: 8px;
  cursor: pointer;
  user-select: none;
}
.sos-switch-title {
  font-size: 12.5px;
  font-weight: 800;
  color: var(--text-main);
}
.sos-switch-desc {
  font-size: 10px;
  color: var(--text-sub);
  margin-top: 2px;
}
.sos-checkbox {
  width: 22px;
  height: 22px;
  accent-color: #ef4444;
  cursor: pointer;
  flex-shrink: 0;
}

/* TOMBOL UTAMA SOS */
.btn-sos-main {
  width: 100%;
  padding: 14px;
  background: #dc2626;
  color: var(--text-main);
  border: none;
  border-radius: 14px;
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 0.5px;
  cursor: pointer;
  box-shadow: 0 4px 15px rgba(220, 38, 38, 0.4);
  transition: transform 0.15s, background 0.2s;
  margin-top: 6px;
}
.btn-sos-main:active {
  transform: scale(0.97);
}
.btn-sos-main.is-active {
  background: #1e293b !important;
  border: 2px solid #ef4444;
  color: #ef4444;
  animation: pulseRecording 1.2s infinite;
}

/* STROBO FULLSCREEN */
.sos-strobe-fullscreen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 99999;
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  user-select: none;
}
.sos-strobe-center-text {
  text-align: center;
  color: var(--text-main);
  text-shadow: 0 2px 10px rgba(0,0,0,0.8);
}
.sos-strobe-fullscreen.strobe-red {
  background: #dc2626 !important;
}
.sos-strobe-fullscreen.strobe-white {
  background: #ffffff !important;
}
.sos-strobe-fullscreen.strobe-black {
  background: #000000 !important;
}

/* ============================================================
   TOMBOL PEMBARUAN SISTEM (PWA / TWA MANUAL UPDATE)
   ============================================================ */
.btn-update-system {
  width: 100%;
  padding: 12px 16px;
  background: #ecfdf5;
  border: 2px solid #059669;
  color: #065f46;
  border-radius: 12px;
  font-size: 13.5px;
  font-weight: 900;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all 0.2s ease;
  user-select: none;
  box-shadow: 0 2px 6px rgba(5, 150, 105, 0.15);
}

/* Teks subversi pembaruan sistem agar terang dan jelas di light mode saat low brightness */
[data-theme="light"] #appVersionSubLayers, [data-theme="light"] #appVersionSub {
  color: #334155 !important;
  font-weight: 700;
}
.btn-update-system:active {
  transform: scale(0.97);
  background: #10b981;
  color: var(--text-main);
}
.btn-update-system:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
[data-theme="dark"] .btn-update-system {
  background: rgba(16, 185, 129, 0.18);
  border-color: #34d399;
  color: #34d399;
}


/* ============================================================
   KLINOMETER OPTIK SUUNTO TAKTIKAL (BEBAS WARNA BIRU & ANTI-SESAT)
   ============================================================ */

#clinoVideo {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#clinoCanvas {
  display: none;
}

/* PITA DRUM SKALA SUUNTO ASLI (VERTIKAL MELUNCUR) */
.clino-suunto-scale-wrap {
  position: absolute;
  top: 0; bottom: 0; left: 0; right: 0;
  pointer-events: none;
  display: flex;
  justify-content: center;
  overflow: hidden;
}
.suunto-tape-track {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transform: translateY(0px);
  transition: transform 0.12s linear;
}
.suunto-mark-row {
  height: 24px;
  width: 220px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: monospace;
  font-size: 11px;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.85);
  text-shadow: 0 1px 3px rgba(0,0,0,0.9);
}
.suunto-tick-l, .suunto-tick-r {
  width: 22px;
  height: 1.5px;
  background: #10b981;
  box-shadow: 0 0 4px #10b981;
}
.suunto-tick-zero {
  width: 32px;
  height: 2.5px;
  background: #fbbf24;
  box-shadow: 0 0 6px #fbbf24;
}
.horizon-zero {
  color: #fbbf24 !important;
  font-size: 13px !important;
}
.critical-hazard {
  color: #f59e0b !important;
}

/* GARIS RAMBUT BIDIK OPTIK TENGAH (HAIRLINE INDEX) */
.clino-hairline-index {
  position: absolute;
  top: 50%; left: 0; right: 0;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: space-between;
  pointer-events: none;
}
.hairline-bar-l, .hairline-bar-r {
  flex: 1;
  height: 2px;
  background: #10b981;
  box-shadow: 0 0 8px rgba(16, 185, 129, 0.9);
}
.hairline-cross-center {
  width: 44px;
  height: 44px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hairline-circle {
  width: 26px;
  height: 26px;
  border: 2px solid #10b981;
  border-radius: 50%;
  box-shadow: 0 0 8px #10b981;
}

/* STRIP DATA DI ATAS KAMERA */
.clino-hud-top-strip {
  position: absolute;
  top: 8px; left: 8px; right: 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  pointer-events: none;
}
.clino-hud-chip {
  background: rgba(15, 23, 42, 0.88);
  border: 1px solid #10b981;
  border-radius: 8px;
  padding: 4px 10px;
  font-family: monospace;
  font-size: 13px;
  font-weight: 900;
  color: #10b981;
  backdrop-filter: blur(4px);
}
.clino-hazard-chip {
  background: rgba(16, 185, 129, 0.9);
  color: var(--text-main);
  font-size: 10px;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 8px;
}

/* KONTROL & TOMBOL TAKTIKAL */
.clino-control-panel {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
}
.clino-mode-bar {
  display: flex;
  gap: 6px;
  margin-bottom: 8px;
}
.btn-clino-tab {
  flex: 1;
  padding: 8px 6px;
  background: rgba(0, 0, 0, 0.05);
  border: 1px solid var(--border-ui);
  border-radius: 10px;
  font-size: 11px;
  font-weight: 800;
  color: var(--text-sub);
  cursor: pointer;
}
.btn-clino-tab.active {
  background: #005d52;
  color: var(--text-main);
  border-color: #10b981;
}
.btn-twoshot {
  padding: 10px;
  background: rgba(16, 185, 129, 0.12);
  border: 1.5px solid #10b981;
  color: #10b981;
  border-radius: 10px;
  font-size: 11.5px;
  font-weight: 800;
  cursor: pointer;
}
.btn-twoshot.is-done {
  background: #10b981 !important;
  color: #ffffff !important;
}
.btn-clino-tare {
  padding: 12px 14px;
  background: rgba(245, 158, 11, 0.15);
  border: 1.5px solid #f59e0b;
  color: #f59e0b;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}
.btn-clino-lock {
  width: 100%;
  max-width: 320px;
  margin: 0 auto;
  padding: 13px 20px;
  background: #005d52;
  border: 1.5px solid #10b981;
  color: var(--text-main);
  border-radius: 14px;
  font-size: 13.5px;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 93, 82, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  user-select: none;
}
.btn-clino-lock:active, .btn-clino-tare:active, .btn-twoshot:active {
  transform: scale(0.97);
}

/* KARTU HASIL UKUR TAKTIKAL */
.clino-result-card {
  margin-top: 10px;
  padding: 12px;
  background: rgba(0, 0, 0, 0.03);
  border: 1px solid var(--border-ui);
  border-radius: 14px;
}
.clino-result-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.clino-res-box {
  background: var(--bg-card);
  padding: 8px;
  border-radius: 10px;
  border: 1px solid var(--border-ui);
  text-align: center;
}
.clino-res-lbl {
  font-size: 9px;
  font-weight: 800;
  color: var(--text-sub);
}
.clino-res-val {
  font-size: 18px;
  font-weight: 900;
  font-family: monospace;
  color: var(--text-main);
  margin-top: 2px;
}
.clino-res-hazard {
  margin-top: 8px;
  padding: 6px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 800;
  text-align: center;
  background: #10b981;
  color: var(--text-main);
}
.clino-telemetry-text {
  font-size: 10px;
  color: var(--text-sub);
  text-align: center;
  margin-top: 6px;
  font-family: monospace;
}
.btn-clino-act {
  padding: 10px;
  border: none;
  border-radius: 10px;
  font-size: 11.5px;
  font-weight: 800;
  cursor: pointer;
}
.btn-clino-save { background: #10b981; color: var(--text-main); }
.btn-clino-photo { background: #f59e0b; color: var(--text-main); }

/* ============================================================
   TOMBOL & LACI PANDUAN KLINOMETER TAKTIKAL (ANTI POP-UP)
   ============================================================ */
.btn-clino-info-toggle {
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid #10b981;
  color: #10b981;
  border-radius: 8px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.2s ease;
  user-select: none;
}
.btn-clino-info-toggle.active {
  background: #10b981;
  color: var(--text-main);
}

[data-theme="dark"]
.clino-info-card {
  padding-bottom: 8px;
  margin-bottom: 8px;
  border-bottom: 1px dashed var(--border-ui);
}
.clino-info-title {
  font-size: 11px;
  font-weight: 900;
  color: #10b981;
  margin-bottom: 3px;
}
.clino-info-card p {
  font-size: 11px;
  line-height: 1.55;
  color: var(--text-main);
  margin: 0;
}
.clino-zone-mini {
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.55;
  color: var(--text-sub);
}


/* Sembunyikan tombol lapisan floating saat modal terbuka agar tidak menutupi tombol close */
body:has(.gm-modal.open) #topFabDock,
body:has(.gm-modal.open) .gm-top-fab-dock { display: none !important; }

/* TOAST TAKTIKAL ADAPTIF TEMA TERANG & GELAP (ANTI-RADIASI BEBAS BIRU) */
/* TOAST TAKTIKAL MODERN & ELEGAN (FLOATING GLASS PILL) */
.tactical-toast {
  position: fixed !important;
  top: 70px !important;
  left: 50% !important;
  transform: translateX(-50%) translateY(-16px) scale(0.96);
  background: var(--bg-card) !important;
  color: #f8fafc !important;
  padding: 10px 14px !important;
  border-radius: 14px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0.2px !important;
  line-height: 1.4 !important;
  max-width: 320px !important;
  border: 1.5px solid rgba(16, 185, 129, 0.7) !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35), 0 0 10px rgba(16, 185, 129, 0.2) !important;
  backdrop-filter: blur(12px) !important;
  z-index: 999999 !important;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1), transform 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  display: flex !important;
  align-items: flex-start !important;
  gap: 8px !important;
  text-align: left !important;
}
.tactical-toast > span:first-child {
  flex-shrink: 0 !important;
  font-size: 16px !important;
  line-height: 1.2 !important;
}
.tactical-toast > span:last-child {
  flex: 1 !important;
  word-break: break-word !important;
  overflow-wrap: break-word !important;
}
[data-theme="light"] .tactical-toast {
  background: #ffffff !important;
  color: #0a0a0a !important;
  border: 1.5px solid #10b981 !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12), 0 0 10px rgba(16, 185, 129, 0.15) !important;
}

[data-theme="dark"] .tactical-toast {
  background: var(--bg-card) !important;
  color: #e8f5e9 !important;
  border: 1.5px solid #34d399 !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5), 0 0 10px rgba(52, 211, 153, 0.25) !important;
}
.tactical-toast.show {
  opacity: 1 !important;
  transform: translateX(-50%) translateY(0) scale(1) !important;
}


.clino-info-card {
  padding-bottom: 8px !important;
  margin-bottom: 8px !important;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.15) !important;
}
.clino-info-title {
  font-size: 11px !important;
  font-weight: 900 !important;
  color: #10b981 !important;
  margin-bottom: 3px !important;
}
.clino-info-card p {
  font-size: 11px !important;
  line-height: 1.55 !important;
  color: #e2e8f0 !important;
  margin: 0 !important;
}
.clino-zone-mini {
  font-size: 10.5px !important;
  font-weight: 700 !important;
  line-height: 1.55 !important;
  color: #cbd5e1 !important;
}

/* ============================================================
   GARIS CAKRAWALA DATAR 0° & RETIKEL BIDIK SEJAJAR 100%
   ============================================================ */
/* GARIS CAKRAWALA KUNING 0° DINAMIS */
.clino-artificial-horizon {
  position: absolute !important;
  top: 50% !important;
  left: 4% !important;
  right: 4% !important;
  transform: translateY(-50%);
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 16px !important;
  pointer-events: none !important;
  z-index: 2 !important;
  transition: transform 0.06s linear;
}
.horizon-line-l, .horizon-line-r {
  flex: 1 !important;
  height: 2.5px !important;
  background: #fbbf24 !important;
  box-shadow: 0 0 10px rgba(251, 191, 36, 0.9) !important;
}
.horizon-zero-tag {
  font-family: monospace !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  color: #fbbf24 !important;
  background: var(--bg-card) !important; backdrop-filter: blur(14px) !important;
  border: 1.5px solid #fbbf24 !important;
  border-radius: 6px !important;
  padding: 1px 8px !important;
  text-shadow: 0 0 8px rgba(251, 191, 36, 0.8) !important;
}

/* GARIS RAMBUT RETIKEL BIDIK HIJAU TENGAH */
.clino-hairline-index {
  position: absolute !important;
  top: 50% !important;
  left: 0 !important;
  right: 0 !important;
  transform: translateY(-50%) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  pointer-events: none !important;
  z-index: 3 !important;
}
.hairline-bar-l, .hairline-bar-r {
  flex: 1 !important;
  height: 1.5px !important;
  background: rgba(16, 185, 129, 0.85) !important;
  box-shadow: 0 0 8px rgba(16, 185, 129, 0.9) !important;
}
.hairline-cross-center {
  width: 48px !important;
  height: 48px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.hairline-circle {
  width: 28px !important;
  height: 28px !important;
  border: 2px solid #10b981 !important;
  border-radius: 50% !important;
  box-shadow: 0 0 10px #10b981, inset 0 0 6px rgba(16, 185, 129, 0.3) !important;
  background: transparent !important;
}

/* ============================================================
   KLINOMETER FULLSCREEN TAKTIKAL (ABSOLUTE ANCHORED KELAS DUNIA)
   ============================================================ */
#modalClinometer {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  background: #000000 !important;
  z-index: 5000 !important;
  overflow: hidden !important;
  display: none;
}
#modalClinometer.open {
  display: block !important;
}

#clinoVideo {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  z-index: 1 !important;
}
#clinoCanvas {
  display: none;
}

/* WADAH ATAS TERKUNCI DI ATAS (HEADER, PANDUAN, MODE, TELEMETRI) */
.clino-top-wrapper {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  padding: 12px 14px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  pointer-events: auto !important;
  z-index: 50 !important;
}

.clino-top-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(10, 13, 11, 0.82);
  border: 1px solid var(--border-ui);
  border-radius: 14px;
  padding: 8px 12px;
  backdrop-filter: blur(10px);
}
.clino-brand-badge {
  color: #10b981;
  font-size: 13px;
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 6px;
}
.btn-clino-info-toggle {
  background: rgba(16, 185, 129, 0.15);
  border: 1px solid #10b981;
  color: #10b981;
  border-radius: 8px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}
.btn-clino-info-toggle.active {
  background: #10b981;
  color: var(--text-main);
}
.btn-clino-close {
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid var(--border-ui);
  color: var(--text-main);
  width: 30px;
  height: 30px;
  border-radius: 50%;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.btn-clino-close:active {
  background: #dc2626;
}

/* SAKELAR MODE LERENG VS TINGGI */
.clino-mode-selector-bar {
  display: flex;
  gap: 6px;
  background: rgba(10, 13, 11, 0.82);
  border: 1px solid var(--border-ui);
  border-radius: 12px;
  padding: 4px;
  backdrop-filter: blur(8px);
}
.btn-clino-mode-tab {
  flex: 1;
  padding: 6px 8px;
  background: transparent;
  border: none;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 800;
  color: var(--text-sub);
  cursor: pointer;
}
.btn-clino-mode-tab.active {
  background: #005d52;
  color: var(--text-main);
  border: 1px solid #10b981;
}

/* INPUT DUA KOLOM */
.clino-dist-input-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background: var(--bg-card); backdrop-filter: blur(14px);
  border: 1px solid #10b981;
  border-radius: 12px;
  padding: 6px 12px;
  font-size: 11px;
  font-weight: 800;
  color: var(--text-main);
  backdrop-filter: blur(10px);
}
.clino-input-field-group {
  display: flex;
  align-items: center;
  gap: 4px;
}
.clino-dist-input {
  width: 58px;
  padding: 4px 6px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid #10b981;
  border-radius: 6px;
  color: #10b981;
  font-family: monospace;
  font-size: 13px;
  font-weight: 900;
  text-align: center;
}

/* TELEMETRI ATAS MENGAMBANG */
.clino-telemetry-floating {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.clino-chip-glass {
  background: rgba(10, 13, 11, 0.82);
  border: 1px solid #10b981;
  border-radius: 20px;
  padding: 5px 12px;
  font-family: monospace;
  font-size: 12.5px;
  font-weight: 900;
  backdrop-filter: blur(8px);
}
.clino-chip-lbl { font-size: 10px; color: var(--text-sub); font-weight: 700; }
.clino-chip-val { color: #10b981; }
.clino-hazard-glass {
  background: rgba(16, 185, 129, 0.9);
  color: var(--text-main);
  border-radius: 20px;
  padding: 5px 12px;
  font-size: 10.5px;
  font-weight: 800;
  backdrop-filter: blur(8px);
}

/* GARIS CAKRAWALA KUNING 0° TERKUNCI TEPAT DI TENGAH */
.clino-artificial-horizon {
  position: absolute !important;
  top: 50% !important;
  left: 4% !important;
  right: 4% !important;
  transform: translateY(-50%);
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 16px !important;
  pointer-events: none !important;
  z-index: 2 !important;
  transition: transform 0.06s linear;
}
.horizon-line-l, .horizon-line-r {
  flex: 1 !important;
  height: 2px !important;
  background: #fbbf24 !important;
  box-shadow: 0 0 10px rgba(251, 191, 36, 0.9) !important;
}
.horizon-zero-tag {
  font-family: monospace !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  color: #fbbf24 !important;
  background: var(--bg-card) !important; backdrop-filter: blur(14px) !important;
  border: 1px solid #fbbf24 !important;
  border-radius: 6px !important;
  padding: 1px 6px !important;
}

/* RETIKEL BIDIK TENGAH (TENGAH LAYAR) */
.clino-hairline-index {
  position: absolute !important;
  top: 50% !important;
  left: 0 !important;
  right: 0 !important;
  transform: translateY(-50%) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  pointer-events: none !important;
  z-index: 3 !important;
}
.hairline-bar-l, .hairline-bar-r {
  flex: 1 !important;
  height: 1.5px !important;
  background: rgba(16, 185, 129, 0.85) !important;
  box-shadow: 0 0 8px rgba(16, 185, 129, 0.9) !important;
}
.hairline-cross-center {
  width: 44px !important;
  height: 44px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.hairline-circle {
  width: 26px !important;
  height: 26px !important;
  border: 2px solid #10b981 !important;
  border-radius: 50% !important;
  box-shadow: 0 0 10px #10b981 !important;
  background: transparent !important;
}

/* WADAH KONTROL BAWAH TERKUNCI MUTLAK DI BAWAH (BOTTOM: 0) */
.clino-bottom-dock {
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  padding: 0 16px max(28px, env(safe-area-inset-bottom, 28px)) 16px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  pointer-events: auto !important;
  z-index: 60 !important;
}
.clino-btn-row {
  display: flex !important;
  gap: 8px !important;
  width: 100% !important;
  max-width: 380px !important;
  justify-content: center !important;
}
.btn-clino-tare {
  padding: 12px 14px !important;
  background: rgba(245, 158, 11, 0.15) !important;
  border: 1.5px solid #f59e0b !important;
  color: #f59e0b !important;
  border-radius: 12px !important;
  font-size: 11.5px !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  backdrop-filter: blur(8px) !important;
}
.btn-clino-lock {
  flex: 1 !important;
  padding: 12px 18px !important;
  background: #005d52 !important;
  border: 1.5px solid #10b981 !important;
  color: #ffffff !important;
  border-radius: 12px !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  cursor: pointer !important;
  box-shadow: 0 4px 14px rgba(0, 93, 82, 0.5) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
}
.btn-clino-lock:active, .btn-clino-tare:active { transform: scale(0.96); }

/* KARTU HASIL UKUR TAKTIKAL */
.clino-result-card {
  position: absolute !important;
  bottom: 0 !important;
  left: 12px !important;
  right: 12px !important;
  margin-bottom: max(24px, env(safe-area-inset-bottom, 24px)) !important;
  background: var(--bg-card) !important;
  border: 1.5px solid #10b981 !important;
  border-radius: 16px !important;
  padding: 12px !important;
  box-shadow: 0 10px 35px rgba(0, 0, 0, 0.8) !important;
  backdrop-filter: blur(14px) !important;
  z-index: 100 !important;
  pointer-events: auto !important;
}
.btn-clino-resume {
  background: transparent;
  border: none;
  color: #10b981;
  font-weight: 800;
  font-size: 11px;
  cursor: pointer;
}
.clino-result-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.clino-res-box {
  background: var(--accent-primary-soft);
  padding: 8px;
  border-radius: 10px;
  border: 1px solid var(--border-ui);
  text-align: center;
}
.clino-res-lbl { font-size: 9px; font-weight: 800; color: var(--text-sub); }
.clino-res-val { font-size: 18px; font-weight: 900; font-family: monospace; color: var(--text-main); }
.clino-res-hazard {
  margin-top: 6px;
  padding: 6px;
  border-radius: 8px;
  font-size: 10.5px;
  font-weight: 800;
  text-align: center;
  background: #10b981;
  color: var(--text-main);
}
.clino-res-advice {
  font-size: 10.5px;
  line-height: 1.4;
  color: var(--text-sub);
  margin: 6px 0;
  padding: 6px 8px;
  background: var(--accent-primary-soft);
  border-radius: 8px;
}
.clino-telemetry-text {
  font-size: 9.5px;
  color: var(--text-sub);
  text-align: center;
  margin-top: 4px;
  font-family: monospace;
}
.btn-clino-act {
  padding: 10px;
  border: none;
  border-radius: 10px;
  font-size: 11.5px;
  font-weight: 800;
  cursor: pointer;
}
.btn-clino-save { background: #10b981; color: var(--text-main); }
.btn-clino-photo { background: #f59e0b; color: var(--text-main); }

/* LACI PANDUAN */
.clino-info-drawer {
  background: var(--bg-card);
  border: 1.5px solid #10b981;
  border-radius: 14px;
  padding: 12px;
  margin-top: 6px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.7);
  z-index: 100;
  max-height: 60vh;
  overflow-y: auto;
  backdrop-filter: blur(14px);
}

/* ============================================================
   HUD PANDU BALIK TAKTIKAL (BACKTRACK GUIDANCE & OFF-ROUTE ALERT)
   ============================================================ */

/* ============================================================
   HUD PANDU BALIK TAKTIKAL (BACKTRACK GUIDANCE & OFF-ROUTE ALERT)
   ============================================================ */

/* ============================================================
   HUD PANDU BALIK TAKTIKAL (BACKTRACK GUIDANCE & OFF-ROUTE ALERT)
   ============================================================ */
.gm-backtrack-banner {
  position: fixed !important;
  top: 12px !important;
  left: 12px !important;
  right: 68px !important;
  max-width: 440px !important;
  background: var(--bg-card-solid) !important;
  border: 2px solid var(--accent-amber, #f59e0b) !important;
  border-radius: 16px !important;
  padding: 10px 14px !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35) !important;
  z-index: 2800 !important;
  display: none; /* MUTLAK MATI / HILANG SAAT HALAMAN DIBUKA / DI-REFRESH */
  align-items: center !important;
  gap: 12px !important;
  backdrop-filter: blur(14px) !important;
}

/* HANYA MUNCUL KETIKA BACKTRACK AKTIF */
body.backtrack-active .gm-backtrack-banner {
  display: flex !important;
}

.gm-backtrack-banner.off-track {
  border-color: #ef4444 !important;
  background: rgba(239, 68, 68, 0.12) !important;
  animation: pulseRecording 1s infinite;
}
.gm-backtrack-banner.arrived {
  border-color: #10b981 !important;
  background: rgba(16, 185, 129, 0.12) !important;
}
.bt-hud-icon-wrap {
  width: 44px !important;
  height: 44px !important;
  border-radius: 12px !important;
  background: rgba(245, 158, 11, 0.15) !important;
  border: 1.5px solid var(--accent-amber, #f59e0b) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 22px !important;
  font-weight: 900 !important;
  color: var(--accent-amber, #f59e0b) !important;
  flex-shrink: 0 !important;
}
.gm-backtrack-banner.arrived .bt-hud-icon-wrap {
  border-color: #10b981 !important;
  background: rgba(16, 185, 129, 0.2) !important;
  color: #10b981 !important;
}
.bt-hud-info {
  flex: 1 !important;
  overflow: hidden !important;
}
.bt-hud-dist {
  font-size: 18px !important;
  font-weight: 900 !important;
  color: var(--text-main) !important;
  font-family: monospace !important;
  letter-spacing: 0.5px !important;
  line-height: 1.15 !important;
}
.bt-hud-status {
  font-size: 11.5px !important;
  font-weight: 700 !important;
  color: var(--text-sub) !important;
  margin-top: 2px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* SEMBUNYIKAN SEARCH DOCK SAAT BACKTRACK */
body.backtrack-active #searchTopDock {
  display: none !important;
}

/* JEDA PEMISAH BEBAS TABRAKAN MUTLAK */
body.backtrack-active .gm-live-track-bar {
  top: 94px !important;
  transition: top 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
body.gpx-guide-active .gm-live-track-bar {
  top: 94px !important;
  transition: top 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* SAKELAR PERINGATAN MEDAN DI MODAL JEJAK */
.track-alert-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 12px;
}
.track-alert-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(0, 0, 0, 0.04);
  border: 1px solid var(--border-ui);
  border-radius: 10px;
  padding: 8px 10px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  user-select: none;
}
[data-theme="dark"] .track-alert-chip {
  background: rgba(255, 255, 255, 0.05);
}
.track-alert-chip input {
  accent-color: #10b981;
  width: 16px;
  height: 16px;
  cursor: pointer;
}


/* ============================================================
   STYLING DIAL KOMPAS MILITER 360° & NATO 6400 MILS (RESTORED)
   ============================================================ */
.mil-compass-outer {
  width: 190px !important;
  height: 190px !important;
  margin: 0 auto !important;
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.mil-compass-bezel {
  width: 180px !important;
  height: 180px !important;
  border-radius: 50% !important;
  border: 3px solid var(--accent-primary) !important;
  background: radial-gradient(circle, rgba(16, 185, 129, 0.08) 0%, rgba(0,0,0,0.3) 80%) !important;
  position: relative !important;
  transition: transform 0.08s linear !important;
  box-shadow: 0 0 20px rgba(16, 185, 129, 0.2) !important;
}
.mil-cardinal {
  position: absolute !important;
  font-weight: 900 !important;
  font-size: 13px !important;
  line-height: 1.1 !important;
  text-align: center !important;
}
.mil-cardinal small {
  font-size: 8px !important;
  color: var(--text-sub) !important;
  font-family: monospace !important;
}
.mc-n { top: 4px !important; left: 50% !important; transform: translateX(-50%) !important; color: #ef4444 !important; }
.mc-e { right: 6px !important; top: 50% !important; transform: translateY(-50%) !important; color: var(--text-main) !important; }
.mc-s { bottom: 4px !important; left: 50% !important; transform: translateX(-50%) !important; color: var(--text-sub) !important; }
.mc-w { left: 6px !important; top: 50% !important; transform: translateY(-50%) !important; color: var(--text-main) !important; }
.mil-cross-center {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  width: 14px !important;
  height: 14px !important;
  border-radius: 50% !important;
  border: 1.5px solid var(--accent-primary) !important;
  transform: translate(-50%, -50%) !important;
}
.mil-compass-needle-fixed {
  position: absolute !important;
  top: 8px !important;
  width: 0 !important;
  height: 0 !important;
  border-left: 6px solid transparent !important;
  border-right: 6px solid transparent !important;
  border-bottom: 20px solid #ef4444 !important;
  z-index: 2 !important;
  pointer-events: none !important;
}
.mil-lock-status-box {
  background: rgba(0, 0, 0, 0.04) !important;
  border: 1.5px solid #10b981 !important;
  border-radius: 10px !important;
  padding: 8px 10px !important;
  margin-top: 8px !important;
}
[data-theme="dark"] .mil-lock-status-box {
  background: rgba(255, 255, 255, 0.05) !important;
}
.compass-guide-drawer {
  margin-top: 14px !important;
  background: rgba(0, 0, 0, 0.04) !important;
  border: 1.5px solid var(--border-ui) !important;
  border-radius: 14px !important;
  padding: 12px !important;
  text-align: left !important;
}
[data-theme="dark"] .compass-guide-drawer {
  background: rgba(255, 255, 255, 0.04) !important;
}


/* ============================================================
   STYLING 2-TAB KOMPAS & JARUM BERPUTAR OTOMATIS (GPS COMPASS)
   ============================================================ */
.compass-tab-bar {
  display: flex !important;
  gap: 6px !important;
  padding: 6px 14px 10px !important;
  background: var(--bg-card-solid) !important;
  border-bottom: 1px solid var(--border-ui) !important;
}
.btn-compass-tab {
  flex: 1 !important;
  padding: 8px 6px !important;
  border: 1.5px solid var(--border-ui) !important;
  background: rgba(0, 0, 0, 0.04) !important;
  color: var(--text-sub) !important;
  border-radius: 10px !important;
  font-size: 11.5px !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}
[data-theme="dark"] .btn-compass-tab {
  background: rgba(255, 255, 255, 0.05) !important;
}
.btn-compass-tab.active {
  background: #005d52 !important;
  color: #ffffff !important;
  border-color: #10b981 !important;
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3) !important;
}

/* PIRINGAN TETAP & JARUM GPS BERPUTAR SENDIRI */
.gps-compass-outer {
  width: 190px !important;
  height: 190px !important;
  margin: 10px auto 0 !important;
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.gps-compass-fixed-bezel {
  width: 180px !important;
  height: 180px !important;
  border-radius: 50% !important;
  border: 3px solid #0284c7 !important;
  background: radial-gradient(circle, rgba(2, 132, 199, 0.08) 0%, rgba(0, 0, 0, 0.35) 80%) !important;
  position: relative !important;
  box-shadow: 0 0 20px rgba(2, 132, 199, 0.25) !important;
}
.gps-cardinal {
  position: absolute !important;
  font-weight: 900 !important;
  font-size: 13px !important;
  line-height: 1.1 !important;
  text-align: center !important;
}
.gps-cardinal small {
  font-size: 8.5px !important;
  color: var(--text-sub) !important;
  font-family: monospace !important;
}
.gc-n { top: 4px !important; left: 50% !important; transform: translateX(-50%) !important; color: #ef4444 !important; }
.gc-e { right: 6px !important; top: 50% !important; transform: translateY(-50%) !important; color: var(--text-main) !important; }
.gc-s { bottom: 4px !important; left: 50% !important; transform: translateX(-50%) !important; color: var(--text-sub) !important; }
.gc-w { left: 6px !important; top: 50% !important; transform: translateY(-50%) !important; color: var(--text-main) !important; }
.gps-center-ring {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  width: 14px !important;
  height: 14px !important;
  border-radius: 50% !important;
  border: 1.5px solid #0284c7 !important;
  transform: translate(-50%, -50%) !important;
}

/* JARUM YANG BERPUTAR SENDIRI 360 DERAJAT */
.gps-rotating-needle-wrap {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  pointer-events: none !important;
  transform: rotate(0deg);
  transition: transform 0.25s cubic-bezier(0.25, 1, 0.5, 1) !important;
}
.gps-needle-svg {
  width: 170px !important;
  height: 170px !important;
  filter: drop-shadow(0 3px 8px rgba(0, 0, 0, 0.5)) !important;
}
.gps-target-bearing-card {
  background: rgba(0, 0, 0, 0.04) !important;
  border: 1.5px solid #10b981 !important;
  border-radius: 12px !important;
  padding: 8px 12px !important;
  margin-top: 8px !important;
}
[data-theme="dark"] .gps-target-bearing-card {
  background: rgba(255, 255, 255, 0.05) !important;
}


/* ============================================================
   KONTRAS TINGGI PANDUAN KOMPAS (LIGHT & DARK THEME RESMI)
   ============================================================ */
.compass-guide-drawer {
  margin-top: 14px !important;
  border: 1.5px solid var(--border-ui) !important;
  border-radius: 14px !important;
  padding: 12px 14px !important;
  text-align: left !important;
}
[data-theme="light"] .compass-guide-drawer {
  background: #f8fafc !important;
  border-color: #cbd5e1 !important;
}
[data-theme="light"] .compass-guide-drawer .clino-info-title {
  color: #065f46 !important; /* Hijau Pine Tua Tajam */
  font-size: 11.5px !important;
  font-weight: 900 !important;
}
[data-theme="light"] .compass-guide-drawer p {
  color: #1e293b !important; /* Abu-abu Gelap Pekat (Sangat Jelas di Bawah Terik Matahari) */
  font-size: 11.5px !important;
  line-height: 1.6 !important;
}
[data-theme="dark"] .compass-guide-drawer {
  background: #0f172a !important; /* Dark Carbon */
  border-color: #334155 !important;
}
[data-theme="dark"] .compass-guide-drawer .clino-info-title {
  color: #34d399 !important; /* Hijau Zamrud Terang */
  font-size: 11.5px !important;
  font-weight: 900 !important;
}
[data-theme="dark"] .compass-guide-drawer p {
  color: #f1f5f9 !important; /* Putih Perak Terang */
  font-size: 11.5px !important;
  line-height: 1.6 !important;
}


/* ============================================================
   PANDUAN KOMPAS KONTRAS TINGGI RESMI (LIGHT & DARK THEME)
   ============================================================ */
.compass-guide-drawer {
  margin-top: 14px !important;
  border-radius: 14px !important;
  padding: 12px 14px !important;
  text-align: left !important;
}
/* TEMA TERANG: TEKS HITAM PEKAT, SANGAT JELAS DI BAWAH TERIK MATAHARI */
[data-theme="light"] .compass-guide-drawer {
  background: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08) !important;
}
[data-theme="light"] .compass-guide-drawer .clino-info-title {
  color: #065f46 !important; /* Hijau Pine Tua Tajam */
  font-size: 11.5px !important;
  font-weight: 900 !important;
  margin-bottom: 4px !important;
}
[data-theme="light"] .compass-guide-drawer p {
  color: #0f172a !important; /* Hitam Pekat Slate-900 (Anti-Pudar) */
  font-size: 11.5px !important;
  line-height: 1.6 !important;
  font-weight: 500 !important;
}

/* TEMA GELAP: TEKS PUTIH PERAK TERANG DI ATAS LATAR CARBON */
[data-theme="dark"] .compass-guide-drawer {
  background: #0f172a !important;
  border: 1.5px solid #334155 !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4) !important;
}
[data-theme="dark"] .compass-guide-drawer .clino-info-title {
  color: #34d399 !important; /* Hijau Zamrud Terang */
  font-size: 11.5px !important;
  font-weight: 900 !important;
  margin-bottom: 4px !important;
}
[data-theme="dark"] .compass-guide-drawer p {
  color: #f8fafc !important; /* Putih Perak Terang */
  font-size: 11.5px !important;
  line-height: 1.6 !important;
}


/* ============================================================
   STYLING PENGGARIS TAKTIS (TACTICAL RULER - RESTORED)
   ============================================================ */
.tactical-ruler-banner {
  position: fixed !important;
  top: 12px !important;
  left: 12px !important;
  right: 68px !important; /* Ruang lapang khusus tombol layer kanan atas */
  max-width: 420px !important;
  margin: 0 !important;
  background: var(--bg-card-solid) !important;
  border: 1.5px solid var(--accent-primary) !important;
  border-radius: 16px !important;
  padding: 10px 14px !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  color: var(--accent-primary) !important;
  display: none; /* MUTLAK MATI / HILANG SAAT HALAMAN DI-REFRESH */
  justify-content: space-between !important;
  align-items: center !important;
  z-index: 2900 !important;
  box-shadow: var(--shadow-float) !important;
  backdrop-filter: blur(12px) !important;
}
.tactical-ruler-banner.active {
  display: flex !important;
}
.tactical-ruler-card {
  position: fixed !important;
  bottom: 20px !important;
  left: 12px !important;
  right: 12px !important;
  max-width: 420px !important;
  margin: 0 auto !important;
  background: var(--bg-card-solid) !important;
  border: 1.5px solid var(--accent-primary) !important;
  border-radius: 18px !important;
  padding: 14px 16px !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
  z-index: 2900 !important;
  backdrop-filter: blur(12px) !important;
}
.ruler-card-head {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  color: var(--accent-primary) !important;
  margin-bottom: 10px !important;
  letter-spacing: 0.5px !important;
}
.ruler-card-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 8px !important;
  margin-bottom: 8px !important;
}
.ruler-stat-box {
  background: rgba(0, 0, 0, 0.04) !important;
  border: 1px solid var(--border-ui) !important;
  border-radius: 12px !important;
  padding: 8px 10px !important;
  text-align: center !important;
}
[data-theme="dark"] .ruler-stat-box {
  background: rgba(255, 255, 255, 0.04) !important;
}
.ruler-stat-lbl {
  font-size: 9.5px !important;
  font-weight: 800 !important;
  color: var(--text-sub) !important;
  margin-bottom: 2px !important;
}
.ruler-stat-val {
  font-size: 17px !important;
  font-weight: 900 !important;
  color: var(--text-main) !important;
  font-family: monospace !important;
}
.ruler-sub-info {
  display: flex !important;
  justify-content: space-between !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: var(--text-sub) !important;
  margin: 6px 0 !important;
  padding: 4px 6px !important;
  background: rgba(16, 185, 129, 0.06) !important;
  border-radius: 8px !important;
}
.ruler-mils-tag {
  font-size: 11px !important;
  font-weight: 800 !important;
  color: var(--accent-primary) !important;
  text-align: center !important;
  margin-bottom: 10px !important;
  font-family: inherit !important;
}
.ruler-card-actions {
  display: flex !important;
  gap: 8px !important;
}
.btn-ruler-act {
  flex: 1 !important;
  padding: 10px !important;
  border: none !important;
  border-radius: 10px !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  background: var(--accent-primary) !important;
  color: #fff !important;
  cursor: pointer !important;
}

/* ============================================================
   STYLING FORMULIR PEMESANAN LISENSI VIA WHATSAPP (ACCORDION)
   ============================================================ */
.wa-order-section {
  margin-top: 10px !important;
  padding-top: 8px !important;
  border-top: 1px dashed var(--border-ui) !important;
}
.btn-wa-order-toggle {
  width: 100% !important;
  padding: 10px 14px !important;
  background: #25D366 !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 10px !important;
  font-size: 12.5px !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  box-shadow: 0 3px 10px rgba(37, 211, 102, 0.3) !important;
}
.btn-wa-order-subtle {
  background: transparent !important;
  border: none !important;
  color: var(--accent-primary) !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  text-decoration: underline !important;
  cursor: pointer !important;
  display: block !important;
  text-align: center !important;
  width: 100% !important;
  padding: 4px 0 !important;
}
.wa-order-drawer {
  margin-top: 8px !important;
  background: rgba(0, 0, 0, 0.04) !important;
  border: 1px dashed var(--border-ui) !important;
  border-radius: 12px !important;
  padding: 12px !important;
}
[data-theme="dark"] .wa-order-drawer {
  background: rgba(255, 255, 255, 0.04) !important;
}
.wa-input-group {
  margin-bottom: 8px !important;
}
.wa-input-group label {
  display: block !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: var(--text-sub) !important;
  margin-bottom: 3px !important;
}
.wa-input-field {
  width: 100% !important;
  padding: 8px 10px !important;
  border-radius: 8px !important;
  border: 1px solid var(--border-ui) !important;
  background: var(--bg-card-solid) !important;
  color: var(--text-main) !important;
  font-size: 12px !important;
  outline: none !important;
  font-family: inherit !important;
}
.wa-input-field:focus {
  border-color: #25D366 !important;
}
.wa-order-note {
  font-size: 10.5px !important;
  color: var(--text-sub) !important;
  line-height: 1.4 !important;
  margin-bottom: 10px !important;
}
.btn-wa-submit {
  width: 100% !important;
  padding: 10px 14px !important;
  background: #25D366 !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 10px !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  cursor: pointer !important;
  box-shadow: 0 4px 12px rgba(37, 211, 102, 0.35) !important;
}

/* ============================================================
   HUD PANDUAN RUTE GPX & ALARM KELUAR JALUR (CROSS-TRACK ERROR)
   ============================================================ */
.gm-gpx-guide-banner {
  position: fixed !important;
  top: 10px !important;
  left: 10px !important;
  right: 68px !important;
  max-width: 420px !important;
  background: var(--bg-card-solid) !important;
  border: 1.5px solid #10b981 !important;
  border-radius: 18px !important;
  padding: 8px 12px !important;
  box-shadow: var(--shadow-float) !important;
  z-index: 2800 !important;
  display: none; /* MUTLAK MATI / HILANG SAAT HALAMAN DI-REFRESH */
  align-items: center !important;
  gap: 10px !important;
  backdrop-filter: blur(12px) !important;
}
body.gpx-guide-active .gm-gpx-guide-banner,
.gm-gpx-guide-banner.active {
  display: flex !important;
}
.gm-gpx-guide-banner.off-route {
  border-color: #ef4444 !important;
  background: rgba(239, 68, 68, 0.15) !important;
  animation: pulseRecording 1s infinite !important;
}
.gpx-hud-icon-wrap {
  width: 44px !important;
  height: 44px !important;
  border-radius: 12px !important;
  background: rgba(16, 185, 129, 0.15) !important;
  border: 1.5px solid #10b981 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 22px !important;
  font-weight: 900 !important;
  color: #10b981 !important;
  flex-shrink: 0 !important;
}
.gm-gpx-guide-banner.off-route .gpx-hud-icon-wrap {
  border-color: #ef4444 !important;
  background: rgba(239, 68, 68, 0.2) !important;
  color: #ef4444 !important;
}
.gpx-hud-info {
  flex: 1 !important;
  overflow: hidden !important;
}
.gpx-hud-dist {
  font-size: 16px !important;
  font-weight: 900 !important;
  color: var(--text-main) !important;
  font-family: monospace !important;
}
.gpx-hud-status {
  font-size: 11px !important;
  font-weight: 700 !important;
  color: var(--text-sub) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
body.gpx-guide-active #searchTopDock {
  display: none !important;
}
body.gpx-guide-active #topFabDock {
  top: 76px !important;
  transition: top 0.2s ease !important;
}

/* Sembunyikan tombol cancel bawaan browser Android/WebKit */
.gm-search-input::-webkit-search-cancel-button,
.gm-search-input::-webkit-search-decoration {
  -webkit-appearance: none;
  appearance: none;
  display: none;
}

/* Tombol Clear [✕] Elegan Gaya Google Maps */
.btn-search-clear {
  background: rgba(0, 0, 0, 0.08);
  border: none;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  margin: 0 4px 0 2px;
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text-sub);
  font-size: 13px;
  font-weight: 900;
  flex-shrink: 0 !important;
  transition: all 0.15s ease;
}
[data-theme="dark"] .btn-search-clear {
  background: rgba(255, 255, 255, 0.12);
  color: #e2e8f0;
}
.btn-search-clear:active {
  transform: scale(0.9);
  background: rgba(239, 68, 68, 0.2);
  color: #ef4444;
}
[data-theme="dark"] .btn-search-clear {
  background: rgba(0, 0, 0, 0.08);
  border: none;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  margin: 0 4px 0 2px;
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text-sub);
  font-size: 13px;
  font-weight: 900;
  flex-shrink: 0 !important;
  transition: all 0.15s ease;
}
[data-theme="dark"] .btn-search-clear {
  background: rgba(255, 255, 255, 0.12);
  color: #e2e8f0;
}
.btn-search-clear:active {
  transform: scale(0.9);
  background: rgba(239, 68, 68, 0.2);
  color: #ef4444;
}
.btn-search-clear:active {
  transform: scale(0.9);
  background: rgba(239, 68, 68, 0.2);
  color: #ef4444;
}
[data-theme="dark"] .btn-search-clear {
  background: rgba(0, 0, 0, 0.08);
  border: none;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  margin: 0 4px 0 2px;
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text-sub);
  font-size: 13px;
  font-weight: 900;
  flex-shrink: 0 !important;
  transition: all 0.15s ease;
}
[data-theme="dark"] .btn-search-clear {
  background: rgba(255, 255, 255, 0.12);
  color: #e2e8f0;
}
.btn-search-clear:active {
  transform: scale(0.9);
  background: rgba(239, 68, 68, 0.2);
  color: #ef4444;
}
[data-theme="dark"] .btn-search-clear {
  background: rgba(0, 0, 0, 0.08);
  border: none;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  margin: 0 4px 0 2px;
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text-sub);
  font-size: 13px;
  font-weight: 900;
  flex-shrink: 0 !important;
  transition: all 0.15s ease;
}
[data-theme="dark"] .btn-search-clear {
  background: rgba(255, 255, 255, 0.12);
  color: #e2e8f0;
}
.btn-search-clear:active {
  transform: scale(0.9);
  background: rgba(239, 68, 68, 0.2);
  color: #ef4444;
}
.btn-search-clear:active {
  transform: scale(0.9);
  background: rgba(239, 68, 68, 0.2);
  color: #ef4444;
}
.btn-search-clear:active {
  transform: scale(0.9);
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
}

/* Tombol Close [✕] Permanen di Atas Lembar Rute */
.btn-sheet-close-top {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--border-ui);
  background: rgba(0, 0, 0, 0.05);
  color: var(--text-sub);
  font-size: 14px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}
[data-theme="dark"] .btn-sheet-close-top {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-sub);
}
.btn-sheet-close-top:active {
  background: rgba(239, 68, 68, 0.2);
  color: #ef4444;
}

.route-sugg-title {
  font-size: 16.5px !important;
  font-weight: 800 !important;
  color: var(--text-main) !important;
  display: block !important;
  line-height: 1.3 !important;
}
.route-sugg-desc {
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: var(--text-sub) !important;
  display: block !important;
  margin-top: 2px !important;
}

/* ============================================================
   INSPEKTOR KONTUR ELEVASI TAKTIKAL (HIJAU KHIDIR DUAL-THEME)
   ============================================================ */
.elev-inspector-telemetry {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  background: rgba(16, 185, 129, 0.08);
  border: 1.5px solid #10b981;
  border-radius: 14px;
  padding: 8px 10px;
  text-align: center;
}
[data-theme="dark"] .elev-inspector-telemetry {
  background: rgba(0, 0, 0, 0.45);
  border-color: #10b981;
}
.elev-stat-chip {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.elev-chip-lbl {
  font-size: 9px;
  font-weight: 800;
  color: var(--text-sub);
  letter-spacing: 0.3px;
}
.elev-chip-val {
  font-size: 14px;
  font-weight: 900;
  color: var(--text-main);
  font-family: monospace;
}

/* WADAH PENGGULIRAN HORIZONTAL LEGA */
.elev-large-scroll-wrap {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  border: 1.5px solid var(--border-ui);
  border-radius: 14px;
  background: var(--bg-card);
  padding: 10px 0;
  cursor: grab;
  position: relative;
  scrollbar-width: thin;
  scrollbar-color: #10b981 transparent;
  touch-action: pan-x;
}
.elev-large-scroll-wrap::-webkit-scrollbar {
  height: 6px;
}
.elev-large-scroll-wrap::-webkit-scrollbar-thumb {
  background: #10b981;
  border-radius: 3px;
}

.elev-canvas-inner-box {
  position: relative;
  height: 180px;
  display: inline-block;
  min-width: 100%;
}

#elevLargeCanvas {
  display: block;
  height: 180px;
}

/* GARIS BIDIK VERTIKAL HIJAU KHIDIR */
.elev-scrubber-line {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: #10b981;
  box-shadow: 0 0 8px rgba(16, 185, 129, 0.8);
  pointer-events: none;
  display: none;
  transform: translateX(-50%);
}
.elev-scrubber-dot {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 12px;
  height: 12px;
  background: #10b981;
  border: 2px solid #ffffff;
  border-radius: 50%;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.5);
}

/* KOTAK MINI ELEVASI DI KARTU RUTE AGAR BISA DIKLIK */
.elev-profile-box {
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.15s ease;
  border-radius: 10px;
  padding: 4px;
}
.elev-profile-box:hover {
  background: rgba(16, 185, 129, 0.05);
}

/* ═══════════════════════════════════════════════════════════════════
   PATCH #12 — Brankas Kontras (Light Mode Saja)
   Dark mode TIDAK diubah
   ═══════════════════════════════════════════════════════════════════ */

/* 1. CARD PACK — Lebih tegas di light mode */
[data-theme="light"] .pack-item-card {
  background: #ffffff !important;
  border: 1.5px solid #94a3b8 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
}

/* 2. JUDUL PACK — Hitam pekat */
[data-theme="light"] .pack-title {
  color: #0f172a !important;
  font-weight: 800 !important;
  font-size: 15.5px !important;
}

/* 3. SUB PACK — Slate lebih pekat */
[data-theme="light"] .pack-sub {
  color: #334155 !important;
  font-weight: 600 !important;
  font-size: 11.5px !important;
}

/* 4. TOMBOL PACK */
[data-theme="light"] .btn-use.active {
  background: #047857 !important;
  color: #ffffff !important;
  font-weight: 800 !important;
  box-shadow: 0 2px 6px rgba(4, 120, 87, 0.3) !important;
}

[data-theme="light"] .btn-pack-act[disabled],
[data-theme="light"] .btn-pack-act:disabled {
  background: #1e40af !important;
  color: #ffffff !important;
  font-weight: 800 !important;
  opacity: 1 !important;
  border: none !important;
}

[data-theme="light"] .btn-del {
  background: #ffffff !important;
  border: 2px solid #dc2626 !important;
  color: #b91c1c !important;
  font-weight: 800 !important;
  padding: 5px 12px !important;
}

[data-theme="light"] .btn-download {
  background: #c2410c !important;
  color: #ffffff !important;
  font-weight: 800 !important;
}

/* 5. LICENSE BOX */
[data-theme="light"] .license-box {
  background: #ecfdf5 !important;
  border: 2px dashed #047857 !important;
}

[data-theme="light"] .license-input {
  border: 2px solid #047857 !important;
  background: #ffffff !important;
  color: #0f172a !important;
  font-weight: 700 !important;
}

[data-theme="light"] .btn-activate {
  background: #047857 !important;
  color: #ffffff !important;
  font-weight: 900 !important;
}

/* 6. WHATSAPP ORDER */
[data-theme="light"] .btn-wa-order-toggle,
[data-theme="light"] .btn-wa-submit {
  background: #15803d !important;
  color: #ffffff !important;
  font-weight: 900 !important;
}

[data-theme="light"] .wa-order-drawer {
  background: #f0fdf4 !important;
  border: 1.5px dashed #16a34a !important;
}

[data-theme="light"] .wa-input-field {
  background: #ffffff !important;
  border: 1.5px solid #16a34a !important;
  color: #0f172a !important;
  font-weight: 600 !important;
}

[data-theme="light"] .wa-input-field::placeholder {
  color: #64748b !important;
}

/* 7. MODAL HEADING */
[data-theme="light"] .modal-head h3 {
  color: #047857 !important;
  font-weight: 900 !important;
}

/* 8. PROGRESS BAR */
[data-theme="light"] .progress-bar-wrap {
  background: rgba(0, 0, 0, 0.08) !important;
}

[data-theme="light"] .progress-bar-fill {
  background: #047857 !important;
}

/* ═══════════════════════════════════════════════════════════════════ */

/* PATCH 13 - Live Share Banner */
.live-share-banner {
  position: fixed !important;
  top: 130px !important;
  left: 12px !important;
  right: 12px !important;
  z-index: 2600 !important;
  background: linear-gradient(135deg, #047857 0%, #065f46 100%) !important;
  color: #ffffff !important;
  border-radius: 14px !important;
  padding: 10px 14px !important;
  box-shadow: 0 6px 20px rgba(4, 120, 87, 0.4) !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}
.live-share-banner .lsb-dot {
  width: 10px !important; height: 10px !important;
  border-radius: 50% !important; background: #fbbf24 !important;
  flex-shrink: 0 !important;
}
.live-share-banner .lsb-info { flex: 1 !important; }
.live-share-banner .lsb-title { font-size: 12.5px !important; font-weight: 900 !important; }
.live-share-banner .lsb-sub { font-size: 10.5px !important; color: rgba(255,255,255,0.85) !important; }
.live-share-banner .lsb-actions { display: flex !important; gap: 6px !important; }
.live-share-banner .lsb-btn {
  height: 30px !important; border-radius: 15px !important;
  border: none !important; font-size: 11px !important; font-weight: 800 !important;
  cursor: pointer !important; padding: 0 12px !important; color: #ffffff !important;
}
.live-share-banner .lsb-share { background: rgba(255,255,255,0.25) !important; }
.live-share-banner .lsb-stop { background: #dc2626 !important; }

/* ═══════════════════════════════════════════════════════════════
   PATCH v22 — CHIP TELEMETRI THEME-AWARE (FIX DARK MODE PUTIH)
   Blok ini OVERRIDE semua blok .gm-chip sebelumnya
   ═══════════════════════════════════════════════════════════════ */

/* Light mode (default) */
.gm-chip {
  background: var(--bg-card) !important;
  border: 1.5px solid var(--border-ui) !important;
  border-radius: 16px !important;
  padding: 5px 11px !important;
  backdrop-filter: blur(12px) !important;
  box-shadow: var(--shadow-card) !important;
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  color: var(--text-main) !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}

.gm-chip .chip-lbl {
  font-size: 10.5px !important;
  font-weight: 800 !important;
  color: var(--text-sub) !important;
}

.gm-chip .chip-val {
  font-size: 13.5px !important;
  font-weight: 900 !important;
  color: var(--text-main) !important;
  letter-spacing: 0.3px !important;
}

/* Dark mode — PAKSA override dengan spesifisitas tinggi */
html[data-theme="dark"] .gm-chip,
[data-theme="dark"] .gm-chip,
[data-theme="dark"] body .gm-chip {
  background: var(--bg-card) !important;
  border-color: var(--border-ui) !important;
  color: var(--text-main) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5) !important;
}

html[data-theme="dark"] .gm-chip .chip-lbl,
[data-theme="dark"] .gm-chip .chip-lbl {
  color: var(--text-sub) !important;
}

html[data-theme="dark"] .gm-chip .chip-val,
[data-theme="dark"] .gm-chip .chip-val {
  color: var(--accent-primary) !important;
}

/* Hover state (desktop) */
@media (hover: hover) {
  .gm-chip.gm-chip-clickable:hover {
    transform: scale(1.05);
    box-shadow: var(--glow-primary) !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   PATCH v22 — WATERMARK THEME-AWARE
   ═══════════════════════════════════════════════════════════════ */

.gm-watermark-dock {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-ui) !important;
  backdrop-filter: blur(10px) !important;
  box-shadow: var(--shadow-card) !important;
}

.gm-watermark-text {
  color: var(--text-main) !important;
  font-weight: 800 !important;
}

html[data-theme="dark"] .gm-watermark-dock,
[data-theme="dark"] .gm-watermark-dock {
  background: var(--bg-card) !important;
  border-color: var(--border-ui) !important;
}

html[data-theme="dark"] .gm-watermark-text,
[data-theme="dark"] .gm-watermark-text {
  color: var(--text-main) !important;
}

/* ═══════════════════════════════════════════════════════════════
   PATCH v22 — TELEMETRI DOCK (pastikan no background liar)
   ═══════════════════════════════════════════════════════════════ */

.gm-telemetry-dock {
  background: transparent !important;
}

/* ═══════════════════════════════════════════════════════════════
   PATCH v22 — KLINOMETER FORCE THEME-AWARE
   Override paksa untuk panel yang masih hardcode
   ═══════════════════════════════════════════════════════════════ */

.clino-top-header,
.clino-mode-selector-bar,
.clino-dist-input-box,
.clino-chip-glass {
  background: var(--bg-card) !important;
  border-color: var(--border-ui) !important;
  backdrop-filter: blur(14px) !important;
  color: var(--text-main) !important;
}

.clino-brand-badge {
  color: var(--accent-primary) !important;
}

.btn-clino-mode-tab {
  color: var(--text-sub) !important;
}

.btn-clino-mode-tab.active {
  background: var(--accent-primary) !important;
  color: #ffffff !important;
  border-color: var(--accent-primary) !important;
}

.clino-chip-lbl {
  color: var(--text-sub) !important;
}

.clino-chip-val {
  color: var(--accent-primary) !important;
}

.clino-result-card {
  background: var(--bg-card-solid) !important;
  border-color: var(--accent-primary) !important;
}

.clino-res-box {
  background: var(--accent-primary-soft) !important;
  border-color: var(--border-ui) !important;
}

.clino-res-lbl {
  color: var(--text-sub) !important;
}

.clino-res-val {
  color: var(--text-main) !important;
}

.clino-res-advice {
  color: var(--text-sub) !important;
  background: var(--accent-primary-soft) !important;
}

.clino-telemetry-text {
  color: var(--text-sub) !important;
}

.clino-info-drawer {
  background: var(--bg-card-solid) !important;
  border-color: var(--accent-primary) !important;
}

.btn-clino-info-toggle {
  background: var(--accent-primary-soft) !important;
  border-color: var(--accent-primary) !important;
  color: var(--accent-primary) !important;
}

.btn-clino-info-toggle.active {
  background: var(--accent-primary) !important;
  color: #ffffff !important;
}

.btn-clino-close {
  background: var(--accent-primary-soft) !important;
  border-color: var(--border-ui) !important;
  color: var(--text-main) !important;
}

.btn-clino-tare {
  background: var(--accent-amber-soft) !important;
  border-color: var(--accent-amber) !important;
  color: var(--accent-amber) !important;
}

.btn-clino-lock {
  background: var(--accent-primary) !important;
  border-color: var(--accent-primary) !important;
  color: #ffffff !important;
}

.clino-hazard-glass {
  background: var(--accent-primary) !important;
  color: #ffffff !important;
}


/* ═══════════════════════════════════════════════════════════════
   PATCH v23 — FIX FAB RUTE LIGHT MODE + FONT SIZE GLOBAL
   Strategi: Override di akhir file (menang cascade)
   ═══════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────
   A. FAB RUTE LIGHT MODE — EMERALD TERANG
   Light mode: pakai emerald cerah yang kontras
   Dark mode: tetap seperti sekarang (sudah bagus)
   ───────────────────────────────────────────────────────────── */

/* Light mode default */
.gm-fab.fab-directions {
  background: var(--accent-primary-hover) !important;
  color: #ffffff !important;
  border: 2px solid #ffffff !important;
  box-shadow: 0 4px 14px rgba(6, 95, 70, 0.4),
              0 0 0 3px rgba(255, 255, 255, 0.4) !important;
}

.gm-fab.fab-directions:active {
  background: var(--accent-primary) !important;
  transform: scale(0.92);
}

/* Dark mode — tetap hijau neon glow seperti sekarang */
[data-theme="dark"] .gm-fab.fab-directions,
html[data-theme="dark"] .gm-fab.fab-directions {
  background: var(--accent-primary) !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.45),
              0 0 12px rgba(16, 185, 129, 0.3) !important;
}

/* Light mode — FAB lain lebih kontras */
[data-theme="light"] .gm-fab,
html[data-theme="light"] .gm-fab {
  background: #ffffff !important;
  border: 1.5px solid rgba(6, 95, 70, 0.18) !important;
  color: var(--text-main) !important;
  box-shadow: 0 4px 12px rgba(6, 95, 70, 0.12) !important;
}

[data-theme="light"] .gm-fab.fab-layers,
[data-theme="light"] .gm-fab.fab-gps,
html[data-theme="light"] .gm-fab.fab-layers,
html[data-theme="light"] .gm-fab.fab-gps {
  color: var(--accent-primary) !important;
}

[data-theme="light"] .gm-fab.fab-3d,
html[data-theme="light"] .gm-fab.fab-3d {
  color: var(--accent-primary) !important;
  border: 1.5px solid var(--accent-primary) !important;
}

/* ─────────────────────────────────────────────────────────────
   B. FONT SIZE GLOBAL — NAIK 10-15% UNTUK KETERBACAAN
   ───────────────────────────────────────────────────────────── */

/* Chip telemetri bawah */
.chip-lbl {
  font-size: 12px !important;
  letter-spacing: 0.2px !important;
}
.chip-val {
  font-size: 14.5px !important;
  letter-spacing: 0.4px !important;
}

/* Search bar */
.gm-search-input {
  font-size: 17px !important;
}
.gm-search-input::placeholder {
  font-size: 16px !important;
}

/* Suggestion list */
.gm-sugg-title {
  font-size: 17px !important;
}
.gm-sugg-desc {
  font-size: 14.5px !important;
}

/* Route inputs */
.route-top-input {
  font-size: 15.5px !important;
}
.route-top-input::placeholder {
  font-size: 14px !important;
}

/* Route suggestion */
.route-sugg-title {
  font-size: 17px !important;
}
.route-sugg-desc {
  font-size: 14.5px !important;
}

/* Peek text */
.peek-text {
  font-size: 15.5px !important;
}
.btn-peek-start {
  font-size: 13.5px !important;
}

/* Route hero */
.route-hero-time {
  font-size: 26px !important;
}
.route-hero-sub {
  font-size: 17px !important;
}
.route-hero-via {
  font-size: 15px !important;
}

/* Alt items */
.route-alt-item {
  font-size: 15.5px !important;
}

/* Mode tabs */
.btn-mode-tab {
  font-size: 16px !important;
}

/* Kartu pack (Brankas) */
.pack-title {
  font-size: 16px !important;
}
.pack-sub {
  font-size: 12.5px !important;
}

/* Map tool labels */
.map-tool-label {
  font-size: 12px !important;
}
.map-type-label {
  font-size: 12.5px !important;
}

/* Track stats */
.track-stat-lbl {
  font-size: 12px !important;
}
.track-stat-val {
  font-size: 19px !important;
}

/* Button track action */
.btn-track-action {
  font-size: 14.5px !important;
}

/* Legend item */
.legend-item-row {
  font-size: 13px !important;
}

/* Popup */
.gm-popup-title {
  font-size: 17px !important;
}
.gm-popup-msg {
  font-size: 15px !important;
}
.btn-popup-ok {
  font-size: 14.5px !important;
}
.btn-popup-cancel {
  font-size: 14px !important;
}

/* Toast */
.tactical-toast {
  font-size: 14px !important;
  padding: 12px 16px !important;
}

/* Klinometer */
.clino-chip-lbl {
  font-size: 11.5px !important;
}
.clino-chip-val {
  font-size: 14px !important;
}
.clino-res-lbl {
  font-size: 11px !important;
}
.clino-res-val {
  font-size: 22px !important;
}
.clino-res-advice {
  font-size: 12px !important;
}
.clino-telemetry-text {
  font-size: 11px !important;
}
.clino-brand-badge {
  font-size: 14px !important;
}
.btn-clino-mode-tab {
  font-size: 12.5px !important;
}
.btn-clino-lock {
  font-size: 14.5px !important;
}
.btn-clino-tare {
  font-size: 13px !important;
}
.clino-res-hazard {
  font-size: 12px !important;
}

/* Live tracking bar */
.live-track-info {
  font-size: 13px !important;
}
.btn-live-act {
  font-size: 12px !important;
}

/* Place card */
.place-card-title {
  font-size: 17.5px !important;
}
.place-card-desc {
  font-size: 13.5px !important;
}
.btn-place-action {
  font-size: 14.5px !important;
}

/* Route sheet close */
.btn-sheet-close-top {
  font-size: 15px !important;
}

/* Modal head */
.modal-head h3 {
  font-size: 16px !important;
}

/* Chips yang bisa diklik */
.gm-chip-clickable {
  cursor: pointer;
}

/* ─────────────────────────────────────────────────────────────
   C. GLOW PREMIUM UNTUK FAB AKTIF (BONUS dari v22 rencana)
   ───────────────────────────────────────────────────────────── */

.gm-fab.fab-3d.active {
  background: var(--accent-primary) !important;
  color: #ffffff !important;
  border-color: var(--accent-primary) !important;
  box-shadow: 0 0 16px rgba(16, 185, 129, 0.6),
              0 4px 14px rgba(16, 185, 129, 0.4) !important;
}

.gm-fab.fab-gps.nav-headup {
  background: var(--accent-primary) !important;
  color: #ffffff !important;
  box-shadow: 0 0 16px rgba(16, 185, 129, 0.6) !important;
}

/* ─────────────────────────────────────────────────────────────
   END PATCH v23
   ───────────────────────────────────────────────────────────── */

/* ═══════════════════════════════════════════════════════════════
   PATCH v24 — FIX TOMBOL TERA & RESET KLINOMETER
   - TERA 0° : Amber solid (beda dari RESET)
   - RESET   : Merah solid (fungsi danger)
   - Text    : Putih kontras di kedua tema
   ═══════════════════════════════════════════════════════════════ */

/* ══════════ LIGHT MODE ══════════ */

[data-theme="light"] .btn-clino-tare,
html[data-theme="light"] .btn-clino-tare,
body[data-theme="light"] .btn-clino-tare {
  background: #d97706 !important;      /* Amber SOLID */
  border: 2px solid #92400e !important;
  color: #ffffff !important;
  font-weight: 900 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
  box-shadow: 0 3px 10px rgba(217, 119, 6, 0.35) !important;
}

[data-theme="light"] .btn-clino-tare:active,
html[data-theme="light"] .btn-clino-tare:active {
  background: #92400e !important;
  transform: scale(0.96);
}

/* Tombol RESET — khusus yang punya style inline #ef4444 */
[data-theme="light"] .btn-clino-tare[style*="ef4444"],
[data-theme="light"] .btn-clino-tare[style*="EF4444"],
html[data-theme="light"] .btn-clino-tare[style*="ef4444"] {
  background: #dc2626 !important;      /* Merah SOLID */
  border: 2px solid #991b1b !important;
  color: #ffffff !important;
  box-shadow: 0 3px 10px rgba(220, 38, 38, 0.35) !important;
}

[data-theme="light"] .btn-clino-tare[style*="ef4444"]:active,
html[data-theme="light"] .btn-clino-tare[style*="ef4444"]:active {
  background: #991b1b !important;
  transform: scale(0.96);
}

/* ══════════ DARK MODE ══════════ */

[data-theme="dark"] .btn-clino-tare,
html[data-theme="dark"] .btn-clino-tare,
body[data-theme="dark"] .btn-clino-tare {
  background: #f59e0b !important;      /* Amber NEON */
  border: 2px solid #fbbf24 !important;
  color: #0a1a12 !important;           /* Teks hitam untuk kontras di amber terang */
  font-weight: 900 !important;
  box-shadow: 0 3px 14px rgba(245, 158, 11, 0.5),
              0 0 12px rgba(245, 158, 11, 0.3) !important;
}

[data-theme="dark"] .btn-clino-tare:active,
html[data-theme="dark"] .btn-clino-tare:active {
  background: #d97706 !important;
  transform: scale(0.96);
}

/* RESET di dark mode */
[data-theme="dark"] .btn-clino-tare[style*="ef4444"],
[data-theme="dark"] .btn-clino-tare[style*="EF4444"],
html[data-theme="dark"] .btn-clino-tare[style*="ef4444"] {
  background: #ef4444 !important;      /* Merah NEON */
  border: 2px solid #fca5a5 !important;
  color: #ffffff !important;
  box-shadow: 0 3px 14px rgba(239, 68, 68, 0.5),
              0 0 12px rgba(239, 68, 68, 0.35) !important;
}

[data-theme="dark"] .btn-clino-tare[style*="ef4444"]:active,
html[data-theme="dark"] .btn-clino-tare[style*="ef4444"]:active {
  background: #dc2626 !important;
  transform: scale(0.96);
}

/* ══════════ BIDIK SEKARANG (POLISH — sudah bagus, sedikit tweak) ══════════ */

[data-theme="light"] .btn-clino-lock,
html[data-theme="light"] .btn-clino-lock {
  background: #047857 !important;      /* Emerald SOLID lebih terang */
  border: 2px solid #065f46 !important;
  color: #ffffff !important;
  font-weight: 900 !important;
  box-shadow: 0 3px 10px rgba(4, 120, 87, 0.4) !important;
}

[data-theme="dark"] .btn-clino-lock,
html[data-theme="dark"] .btn-clino-lock {
  background: #10b981 !important;      /* Emerald NEON */
  border: 2px solid #34d399 !important;
  color: #0a1a12 !important;           /* Teks hitam untuk kontras */
  font-weight: 900 !important;
  box-shadow: 0 3px 14px rgba(16, 185, 129, 0.5),
              0 0 12px rgba(16, 185, 129, 0.3) !important;
}

/* ══════════ TOMBOL INFO PANDUAN (juga kita rapikan) ══════════ */

[data-theme="light"] .btn-clino-info-toggle {
  background: #065f46 !important;
  border: 2px solid #047857 !important;
  color: #ffffff !important;
  font-weight: 800 !important;
}

[data-theme="dark"] .btn-clino-info-toggle {
  background: #10b981 !important;
  border: 2px solid #34d399 !important;
  color: #0a1a12 !important;
  font-weight: 800 !important;
}

/* ══════════ KLINOMETER HEADER ══════════ */

[data-theme="light"] .clino-top-header,
html[data-theme="light"] .clino-top-header {
  background: rgba(255, 255, 255, 0.96) !important;
  border: 2px solid #065f46 !important;
  box-shadow: 0 4px 14px rgba(6, 95, 70, 0.15) !important;
}

[data-theme="light"] .clino-brand-badge,
html[data-theme="light"] .clino-brand-badge {
  color: #065f46 !important;
  font-weight: 900 !important;
}

[data-theme="light"] .clino-mode-selector-bar,
html[data-theme="light"] .clino-mode-selector-bar {
  background: rgba(255, 255, 255, 0.96) !important;
  border: 1.5px solid rgba(6, 95, 70, 0.25) !important;
}

[data-theme="light"] .btn-clino-mode-tab,
html[data-theme="light"] .btn-clino-mode-tab {
  color: #475569 !important;
  font-weight: 800 !important;
}

[data-theme="light"] .btn-clino-mode-tab.active,
html[data-theme="light"] .btn-clino-mode-tab.active {
  background: #065f46 !important;
  color: #ffffff !important;
  font-weight: 900 !important;
}

[data-theme="light"] .clino-chip-glass,
html[data-theme="light"] .clino-chip-glass {
  background: rgba(255, 255, 255, 0.96) !important;
  border: 2px solid #065f46 !important;
  box-shadow: 0 3px 10px rgba(6, 95, 70, 0.15) !important;
}

[data-theme="light"] .clino-chip-lbl {
  color: #475569 !important;
  font-weight: 800 !important;
}

[data-theme="light"] .clino-chip-val {
  color: #065f46 !important;
  font-weight: 900 !important;
}

/* ══════════ END PATCH v24 ══════════ */

/* ═══════════════════════════════════════════════════════════════
   PATCH v24 — FIX TOMBOL TERA & RESET KLINOMETER
   - TERA 0° : Amber solid (beda dari RESET)
   - RESET   : Merah solid (fungsi danger)
   - Text    : Putih kontras di kedua tema
   ═══════════════════════════════════════════════════════════════ */

/* ══════════ LIGHT MODE ══════════ */

[data-theme="light"] .btn-clino-tare,
html[data-theme="light"] .btn-clino-tare,
body[data-theme="light"] .btn-clino-tare {
  background: #d97706 !important;      /* Amber SOLID */
  border: 2px solid #92400e !important;
  color: #ffffff !important;
  font-weight: 900 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
  box-shadow: 0 3px 10px rgba(217, 119, 6, 0.35) !important;
}

[data-theme="light"] .btn-clino-tare:active,
html[data-theme="light"] .btn-clino-tare:active {
  background: #92400e !important;
  transform: scale(0.96);
}

/* Tombol RESET — khusus yang punya style inline #ef4444 */
[data-theme="light"] .btn-clino-tare[style*="ef4444"],
[data-theme="light"] .btn-clino-tare[style*="EF4444"],
html[data-theme="light"] .btn-clino-tare[style*="ef4444"] {
  background: #dc2626 !important;      /* Merah SOLID */
  border: 2px solid #991b1b !important;
  color: #ffffff !important;
  box-shadow: 0 3px 10px rgba(220, 38, 38, 0.35) !important;
}

[data-theme="light"] .btn-clino-tare[style*="ef4444"]:active,
html[data-theme="light"] .btn-clino-tare[style*="ef4444"]:active {
  background: #991b1b !important;
  transform: scale(0.96);
}

/* ══════════ DARK MODE ══════════ */

[data-theme="dark"] .btn-clino-tare,
html[data-theme="dark"] .btn-clino-tare,
body[data-theme="dark"] .btn-clino-tare {
  background: #f59e0b !important;      /* Amber NEON */
  border: 2px solid #fbbf24 !important;
  color: #0a1a12 !important;           /* Teks hitam untuk kontras di amber terang */
  font-weight: 900 !important;
  box-shadow: 0 3px 14px rgba(245, 158, 11, 0.5),
              0 0 12px rgba(245, 158, 11, 0.3) !important;
}

[data-theme="dark"] .btn-clino-tare:active,
html[data-theme="dark"] .btn-clino-tare:active {
  background: #d97706 !important;
  transform: scale(0.96);
}

/* RESET di dark mode */
[data-theme="dark"] .btn-clino-tare[style*="ef4444"],
[data-theme="dark"] .btn-clino-tare[style*="EF4444"],
html[data-theme="dark"] .btn-clino-tare[style*="ef4444"] {
  background: #ef4444 !important;      /* Merah NEON */
  border: 2px solid #fca5a5 !important;
  color: #ffffff !important;
  box-shadow: 0 3px 14px rgba(239, 68, 68, 0.5),
              0 0 12px rgba(239, 68, 68, 0.35) !important;
}

[data-theme="dark"] .btn-clino-tare[style*="ef4444"]:active,
html[data-theme="dark"] .btn-clino-tare[style*="ef4444"]:active {
  background: #dc2626 !important;
  transform: scale(0.96);
}

/* ══════════ BIDIK SEKARANG (POLISH — sudah bagus, sedikit tweak) ══════════ */

[data-theme="light"] .btn-clino-lock,
html[data-theme="light"] .btn-clino-lock {
  background: #047857 !important;      /* Emerald SOLID lebih terang */
  border: 2px solid #065f46 !important;
  color: #ffffff !important;
  font-weight: 900 !important;
  box-shadow: 0 3px 10px rgba(4, 120, 87, 0.4) !important;
}

[data-theme="dark"] .btn-clino-lock,
html[data-theme="dark"] .btn-clino-lock {
  background: #10b981 !important;      /* Emerald NEON */
  border: 2px solid #34d399 !important;
  color: #0a1a12 !important;           /* Teks hitam untuk kontras */
  font-weight: 900 !important;
  box-shadow: 0 3px 14px rgba(16, 185, 129, 0.5),
              0 0 12px rgba(16, 185, 129, 0.3) !important;
}

/* ══════════ TOMBOL INFO PANDUAN (juga kita rapikan) ══════════ */

[data-theme="light"] .btn-clino-info-toggle {
  background: #065f46 !important;
  border: 2px solid #047857 !important;
  color: #ffffff !important;
  font-weight: 800 !important;
}

[data-theme="dark"] .btn-clino-info-toggle {
  background: #10b981 !important;
  border: 2px solid #34d399 !important;
  color: #0a1a12 !important;
  font-weight: 800 !important;
}

/* ══════════ KLINOMETER HEADER ══════════ */

[data-theme="light"] .clino-top-header,
html[data-theme="light"] .clino-top-header {
  background: rgba(255, 255, 255, 0.96) !important;
  border: 2px solid #065f46 !important;
  box-shadow: 0 4px 14px rgba(6, 95, 70, 0.15) !important;
}

[data-theme="light"] .clino-brand-badge,
html[data-theme="light"] .clino-brand-badge {
  color: #065f46 !important;
  font-weight: 900 !important;
}

[data-theme="light"] .clino-mode-selector-bar,
html[data-theme="light"] .clino-mode-selector-bar {
  background: rgba(255, 255, 255, 0.96) !important;
  border: 1.5px solid rgba(6, 95, 70, 0.25) !important;
}

[data-theme="light"] .btn-clino-mode-tab,
html[data-theme="light"] .btn-clino-mode-tab {
  color: #475569 !important;
  font-weight: 800 !important;
}

[data-theme="light"] .btn-clino-mode-tab.active,
html[data-theme="light"] .btn-clino-mode-tab.active {
  background: #065f46 !important;
  color: #ffffff !important;
  font-weight: 900 !important;
}

[data-theme="light"] .clino-chip-glass,
html[data-theme="light"] .clino-chip-glass {
  background: rgba(255, 255, 255, 0.96) !important;
  border: 2px solid #065f46 !important;
  box-shadow: 0 3px 10px rgba(6, 95, 70, 0.15) !important;
}

[data-theme="light"] .clino-chip-lbl {
  color: #475569 !important;
  font-weight: 800 !important;
}

[data-theme="light"] .clino-chip-val {
  color: #065f46 !important;
  font-weight: 900 !important;
}

/* ══════════ END PATCH v24 ══════════ */

/* ═══════════════════════════════════════════════════════════════
   PATCH v25 — FINAL FIX
   A. FAB Rute: HIJAU EMERALD SOLID di light mode (seperti dark)
   B. Panduan Klinometer: TEKS JELAS, HITAM PEKAT di light mode
   ═══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════
   A. FAB RUTE — HIJAU EMERALD SOLID (SEMUA TEMA)
   ═══════════════════════════════════════════════════════════════ */

/* LIGHT MODE — Hijau emerald tegas + teks putih + border putih */
[data-theme="light"] .gm-fab.fab-directions,
html[data-theme="light"] .gm-fab.fab-directions,
body[data-theme="light"] .gm-fab.fab-directions {
  background: #065f46 !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: 0 4px 14px rgba(6, 95, 70, 0.45) !important;
}

[data-theme="light"] .gm-fab.fab-directions svg,
html[data-theme="light"] .gm-fab.fab-directions svg {
  fill: #ffffff !important;
  color: #ffffff !important;
  stroke: #ffffff !important;
}

[data-theme="light"] .gm-fab.fab-directions:active,
html[data-theme="light"] .gm-fab.fab-directions:active {
  background: #047857 !important;
  transform: scale(0.92);
}

/* DARK MODE — Emerald neon glow (seperti sekarang, sudah bagus) */
[data-theme="dark"] .gm-fab.fab-directions,
html[data-theme="dark"] .gm-fab.fab-directions,
body[data-theme="dark"] .gm-fab.fab-directions {
  background: #10b981 !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.5),
              0 0 16px rgba(16, 185, 129, 0.35) !important;
}

[data-theme="dark"] .gm-fab.fab-directions svg,
html[data-theme="dark"] .gm-fab.fab-directions svg {
  fill: #ffffff !important;
  color: #ffffff !important;
}

/* Fallback: kalau data-theme tidak aktif di light (default browser) */
.gm-fab.fab-directions {
  background: #065f46 !important;
  color: #ffffff !important;
}

.gm-fab.fab-directions svg {
  fill: #ffffff !important;
  color: #ffffff !important;
}

/* ═══════════════════════════════════════════════════════════════
   B. PANDUAN KLINOMETER — TEKS JELAS & TERBACA
   ═══════════════════════════════════════════════════════════════ */

/* === LIGHT MODE === */
[data-theme="light"] .clino-info-drawer,
html[data-theme="light"] .clino-info-drawer,
body[data-theme="light"] .clino-info-drawer {
  background: #ffffff !important;
  border: 2px solid #065f46 !important;
  box-shadow: 0 8px 24px rgba(6, 95, 70, 0.25) !important;
}

[data-theme="light"] .clino-info-card,
html[data-theme="light"] .clino-info-card {
  border-bottom: 1.5px dashed rgba(6, 95, 70, 0.25) !important;
  padding-bottom: 10px !important;
  margin-bottom: 10px !important;
}

[data-theme="light"] .clino-info-title,
html[data-theme="light"] .clino-info-title {
  color: #065f46 !important;
  font-size: 13.5px !important;
  font-weight: 900 !important;
  margin-bottom: 6px !important;
  text-shadow: none !important;
}

[data-theme="light"] .clino-info-card p,
html[data-theme="light"] .clino-info-card p {
  color: #0a1a12 !important;
  font-size: 13px !important;
  line-height: 1.65 !important;
  font-weight: 600 !important;
  margin: 0 !important;
  text-shadow: none !important;
  opacity: 1 !important;
}

/* Emphasis (bold/italic) dalam panduan */
[data-theme="light"] .clino-info-card p strong,
[data-theme="light"] .clino-info-card p b,
html[data-theme="light"] .clino-info-card p strong,
html[data-theme="light"] .clino-info-card p b {
  color: #064e3b !important;
  font-weight: 900 !important;
}

[data-theme="light"] .clino-info-card p em,
[data-theme="light"] .clino-info-card p i,
html[data-theme="light"] .clino-info-card p em,
html[data-theme="light"] .clino-info-card p i {
  color: #1e293b !important;
  font-style: italic !important;
  font-weight: 700 !important;
}

[data-theme="light"] .clino-zone-mini,
html[data-theme="light"] .clino-zone-mini {
  color: #1e293b !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}

/* === DARK MODE === */
[data-theme="dark"] .clino-info-drawer,
html[data-theme="dark"] .clino-info-drawer {
  background: var(--bg-card-solid) !important;
  border: 2px solid var(--accent-primary) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.7) !important;
}

[data-theme="dark"] .clino-info-card,
html[data-theme="dark"] .clino-info-card {
  border-bottom: 1.5px dashed rgba(16, 185, 129, 0.25) !important;
  padding-bottom: 10px !important;
  margin-bottom: 10px !important;
}

[data-theme="dark"] .clino-info-title,
html[data-theme="dark"] .clino-info-title {
  color: var(--accent-primary) !important;
  font-size: 13.5px !important;
  font-weight: 900 !important;
  margin-bottom: 6px !important;
}

[data-theme="dark"] .clino-info-card p,
html[data-theme="dark"] .clino-info-card p {
  color: #e8f0eb !important;
  font-size: 13px !important;
  line-height: 1.65 !important;
  font-weight: 600 !important;
  margin: 0 !important;
  opacity: 1 !important;
}

[data-theme="dark"] .clino-info-card p strong,
[data-theme="dark"] .clino-info-card p b,
html[data-theme="dark"] .clino-info-card p strong,
html[data-theme="dark"] .clino-info-card p b {
  color: var(--accent-primary-hover) !important;
  font-weight: 900 !important;
}

[data-theme="dark"] .clino-info-card p em,
[data-theme="dark"] .clino-info-card p i,
html[data-theme="dark"] .clino-info-card p em,
html[data-theme="dark"] .clino-info-card p i {
  color: #cbd5e1 !important;
  font-style: italic !important;
  font-weight: 700 !important;
}

[data-theme="dark"] .clino-zone-mini,
html[data-theme="dark"] .clino-zone-mini {
  color: #cbd5e1 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}


/* ═══════════════════════════════════════════════════════════════
   PATCH v26 — FIX SVG IKON + WATERMARK PUTIH DARK MODE
   ═══════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────
   A. WATERMARK "KANURAGAN MAP" — PUTIH TERANG DI DARK MODE
   ───────────────────────────────────────────────────────────── */

/* DARK MODE: Putih murni terang */
[data-theme="dark"] .gm-watermark-text,
html[data-theme="dark"] .gm-watermark-text,
body[data-theme="dark"] .gm-watermark-text {
  color: #FFFFFF !important;
  font-weight: 900 !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6),
               0 0 8px rgba(16, 185, 129, 0.4) !important;
  letter-spacing: 0.5px !important;
}

[data-theme="dark"] .gm-watermark-dock,
html[data-theme="dark"] .gm-watermark-dock {
  background: rgba(19, 26, 23, 0.92) !important;
  border: 1px solid rgba(16, 185, 129, 0.4) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5),
              0 0 12px rgba(16, 185, 129, 0.2) !important;
}

/* Icon petir di watermark dark mode — biarkan hijau emerald */
[data-theme="dark"] .gm-watermark-dock svg,
html[data-theme="dark"] .gm-watermark-dock svg {
  filter: drop-shadow(0 0 4px rgba(16, 185, 129, 0.6));
}

/* LIGHT MODE: Hitam pekat (jangan diubah) */
[data-theme="light"] .gm-watermark-text,
html[data-theme="light"] .gm-watermark-text {
  color: #0a1a12 !important;
  font-weight: 900 !important;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.5) !important;
}

/* ─────────────────────────────────────────────────────────────
   B. FAB RUTE — SVG IKON PUTIH TAJAM (LIGHT & DARK)
   ───────────────────────────────────────────────────────────── */

.gm-fab.fab-directions svg,
.gm-fab.fab-directions svg path,
.gm-fab.fab-directions svg * {
  fill: #FFFFFF !important;
  color: #FFFFFF !important;
  stroke: none !important;
}

/* Light mode */
[data-theme="light"] .gm-fab.fab-directions,
html[data-theme="light"] .gm-fab.fab-directions,
body[data-theme="light"] .gm-fab.fab-directions {
  background: #065f46 !important;
  color: #FFFFFF !important;
  border: 3px solid #FFFFFF !important;
  outline: 1.5px solid rgba(6, 95, 70, 0.25) !important;
  outline-offset: 1px !important;
  box-shadow: 0 4px 14px rgba(6, 95, 70, 0.45),
              0 0 0 3px rgba(6, 95, 70, 0.15) !important;
}

[data-theme="light"] .gm-fab.fab-directions svg,
[data-theme="light"] .gm-fab.fab-directions svg *,
html[data-theme="light"] .gm-fab.fab-directions svg,
html[data-theme="light"] .gm-fab.fab-directions svg * {
  fill: #FFFFFF !important;
  color: #FFFFFF !important;
  stroke: none !important;
}

/* Dark mode */
[data-theme="dark"] .gm-fab.fab-directions,
html[data-theme="dark"] .gm-fab.fab-directions,
body[data-theme="dark"] .gm-fab.fab-directions {
  background: #10b981 !important;
  color: #FFFFFF !important;
  border: none !important;
  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.5),
              0 0 16px rgba(16, 185, 129, 0.35) !important;
}

[data-theme="dark"] .gm-fab.fab-directions svg,
[data-theme="dark"] .gm-fab.fab-directions svg *,
html[data-theme="dark"] .gm-fab.fab-directions svg,
html[data-theme="dark"] .gm-fab.fab-directions svg * {
  fill: #FFFFFF !important;
  color: #FFFFFF !important;
}

/* ─────────────────────────────────────────────────────────────
   C. SEMUA TOMBOL HIJAU — SVG PUTIH (AUDIT MENYELURUH)
   ───────────────────────────────────────────────────────────── */

.btn-start-nav svg, .btn-start-nav svg *,
.btn-track-start svg, .btn-track-start svg *,
.btn-track-back svg, .btn-track-back svg *,
.btn-sos-main svg, .btn-sos-main svg *,
.btn-clino-lock svg, .btn-clino-lock svg *,
.btn-clino-save svg, .btn-clino-save svg *,
.btn-clino-photo svg, .btn-clino-photo svg *,
.btn-wa-submit svg, .btn-wa-submit svg *,
.btn-activate svg, .btn-activate svg *,
.btn-popup-ok svg, .btn-popup-ok svg *,
.live-share-banner .lsb-stop svg, .live-share-banner .lsb-stop svg *,
.live-share-banner .lsb-share svg, .live-share-banner .lsb-share svg * {
  fill: #FFFFFF !important;
  color: #FFFFFF !important;
}

/* FAB layanan lain — konsisten warna emerald di light, putih di dark */
[data-theme="light"] .gm-fab.fab-layers svg,
[data-theme="light"] .gm-fab.fab-gps svg,
[data-theme="light"] .gm-fab.fab-3d svg,
html[data-theme="light"] .gm-fab.fab-layers svg,
html[data-theme="light"] .gm-fab.fab-gps svg,
html[data-theme="light"] .gm-fab.fab-3d svg {
  fill: #065f46 !important;
  color: #065f46 !important;
}


/* ═══════════════════════════════════════════════════════════════
   PATCH v29 — SMOOTH THEME TRANSITION
   Transisi warna 200ms untuk semua icon UI saat ganti tema
   Prinsip: perubahan warna halus seperti dimmer lampu
   ═══════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────
   GLOBAL: TRANSISI WARNA UNTUK SEMUA ELEMEN UI
   ───────────────────────────────────────────────────────────── */

/* Root html & body */
html, body {
  transition: background-color 0.2s ease-out, color 0.2s ease-out !important;
}

/* FAB — semua tombol floating */
.gm-fab {
  transition: transform 0.15s ease-out,
              background-color 0.2s ease-out,
              color 0.2s ease-out,
              border-color 0.2s ease-out,
              box-shadow 0.2s ease-out !important;
}

.gm-fab svg,
.gm-fab svg path,
.gm-fab svg * {
  transition: fill 0.2s ease-out, stroke 0.2s ease-out, color 0.2s ease-out !important;
}

/* Chip telemetri */
.gm-chip {
  transition: background-color 0.2s ease-out,
              border-color 0.2s ease-out,
              box-shadow 0.2s ease-out !important;
}

.gm-chip .chip-lbl,
.gm-chip .chip-val {
  transition: color 0.2s ease-out !important;
}

/* Watermark */
.gm-watermark-dock {
  transition: background-color 0.2s ease-out,
              border-color 0.2s ease-out,
              box-shadow 0.2s ease-out !important;
}

.gm-watermark-text {
  transition: color 0.2s ease-out !important;
}

.gm-watermark-dock svg {
  transition: filter 0.2s ease-out, fill 0.2s ease-out !important;
}

/* Search bar */

.gm-search-input,
.gm-search-input::placeholder {
  transition: color 0.2s ease-out !important;
}

/* Place card */
.place-card {
  transition: bottom 0.25s cubic-bezier(0.16, 1, 0.3, 1),
              background-color 0.2s ease-out,
              border-color 0.2s ease-out,
              box-shadow 0.2s ease-out !important;
}

.place-card-title,
.place-card-desc {
  transition: color 0.2s ease-out !important;
}

/* Route cards */
.route-top-card,
.route-bottom-sheet {
  transition: bottom 0.25s cubic-bezier(0.16, 1, 0.3, 1),
              background-color 0.2s ease-out,
              border-color 0.2s ease-out,
              box-shadow 0.2s ease-out !important;
}

.route-top-input,
.route-hero-time,
.route-hero-sub,
.route-hero-via,
.peek-text {
  transition: color 0.2s ease-out, background-color 0.2s ease-out !important;
}

.route-top-input {
  transition: color 0.2s ease-out !important;
}

/* Modal */
.gm-modal {
  transition: bottom 0.25s cubic-bezier(0.16, 1, 0.3, 1),
              background-color 0.2s ease-out,
              border-color 0.2s ease-out !important;
}

.modal-head h3,
.modal-content,
.legend-item-row {
  transition: color 0.2s ease-out, background-color 0.2s ease-out !important;
}

/* Track stat cards */
.track-stat-card {
  transition: background-color 0.2s ease-out,
              border-color 0.2s ease-out !important;
}

.track-stat-lbl,
.track-stat-val {
  transition: color 0.2s ease-out !important;
}

/* Pack items */
.pack-item-card {
  transition: background-color 0.2s ease-out,
              border-color 0.2s ease-out,
              box-shadow 0.2s ease-out !important;
}

.pack-title,
.pack-sub {
  transition: color 0.2s ease-out !important;
}

/* License box */
.license-box,
.license-input,
.btn-activate {
  transition: background-color 0.2s ease-out,
              border-color 0.2s ease-out,
              color 0.2s ease-out !important;
}

/* WhatsApp order */
.wa-order-drawer,
.wa-input-field,
.btn-wa-order-toggle,
.btn-wa-submit {
  transition: background-color 0.2s ease-out,
              border-color 0.2s ease-out,
              color 0.2s ease-out !important;
}

/* Map tools grid */
.map-type-card,
.map-tool-card {
  transition: background-color 0.2s ease-out,
              border-color 0.2s ease-out,
              transform 0.15s ease-out !important;
}

.map-type-icon,
.map-type-label,
.map-tool-icon,
.map-tool-label {
  transition: color 0.2s ease-out !important;
}

/* Klinometer — semua panel */
.clino-top-header,
.clino-mode-selector-bar,
.clino-dist-input-box,
.clino-chip-glass,
.clino-hazard-glass,
.clino-result-card,
.clino-info-drawer,
.clino-info-card {
  transition: background-color 0.2s ease-out,
              border-color 0.2s ease-out,
              color 0.2s ease-out !important;
}

.clino-brand-badge,
.clino-chip-lbl,
.clino-chip-val,
.clino-res-lbl,
.clino-res-val,
.clino-res-advice,
.clino-telemetry-text,
.clino-info-title {
  transition: color 0.2s ease-out !important;
}

.btn-clino-tare,
.btn-clino-lock,
.btn-clino-mode-tab,
.btn-clino-info-toggle,
.btn-clino-close,
.btn-clino-resume {
  transition: background-color 0.2s ease-out,
              border-color 0.2s ease-out,
              color 0.2s ease-out,
              transform 0.15s ease-out !important;
}

/* Kompas */
.mil-compass-bezel,
.gps-compass-fixed-bezel,
.compass-guide-drawer,
.mil-lock-status-box,
.gps-target-bearing-card {
  transition: background-color 0.2s ease-out,
              border-color 0.2s ease-out !important;
}

.mil-cardinal,
.gps-cardinal {
  transition: color 0.2s ease-out !important;
}

/* Toast & popup */
.tactical-toast {
  transition: opacity 0.25s ease-out,
              transform 0.25s ease-out,
              background-color 0.2s ease-out,
              color 0.2s ease-out,
              border-color 0.2s ease-out !important;
}

.gm-popup-card {
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1),
              background-color 0.2s ease-out,
              border-color 0.2s ease-out !important;
}

.gm-popup-title,
.gm-popup-msg {
  transition: color 0.2s ease-out !important;
}

/* Live share banner */
.live-share-banner {
  transition: background-color 0.2s ease-out,
              border-color 0.2s ease-out !important;
}

.live-share-banner .lsb-title,
.live-share-banner .lsb-sub {
  transition: color 0.2s ease-out !important;
}

/* Backtrack & GPX HUD */
.gm-backtrack-banner,
.gm-gpx-guide-banner {
  transition: background-color 0.2s ease-out,
              border-color 0.2s ease-out,
              box-shadow 0.2s ease-out !important;
}

/* Navigasi top & bottom bar */
.gm-nav-top-banner,
.gm-nav-bottom-bar {
  transition: background-color 0.2s ease-out,
              border-color 0.2s ease-out,
              box-shadow 0.2s ease-out !important;
}

/* Waypoint pin */
/* ═══════════════════════════════════════════════════════════════
   KMAP-WAYPOINT-HALO v2 — Halo tebal (anti terik, low-brightness, mata rabun)
   Strategi:
     - 9 lapis text-shadow (8 arah + 1 blur) untuk kontras maksimal
     - -webkit-text-stroke 0.7px sebagai outline tambahan
     - Light mode: outline PUTIH murni (peta cerah, terik matahari)
     - Dark mode : outline HITAM murni (layar redup / low-brightness)
   ═══════════════════════════════════════════════════════════════ */
.waypoint-badge {
  font-size: 13px !important;
  font-weight: 900 !important;
  letter-spacing: 0.4px !important;
  line-height: 1.35 !important;
  padding: 1px 4px !important;
  white-space: nowrap !important;
  -webkit-text-stroke: 0.7px #ffffff !important;
  paint-order: stroke fill !important;
  text-shadow:
    -1.8px -1.8px 0 #ffffff,
     0    -1.8px 0 #ffffff,
     1.8px -1.8px 0 #ffffff,
     1.8px  0     0 #ffffff,
     1.8px  1.8px 0 #ffffff,
     0     1.8px  0 #ffffff,
    -1.8px  1.8px 0 #ffffff,
    -1.8px  0     0 #ffffff,
     0 0 4px rgba(255, 255, 255, 1),
     0 2px 6px rgba(0, 0, 0, 0.65) !important;
  transition: opacity 0.2s ease, transform 0.2s ease !important;
  pointer-events: none;
}

/* Dark mode: outline HITAM MURNI (low-brightness readable) */
html[data-theme="dark"] .waypoint-badge,
body[data-theme="dark"] .waypoint-badge,
[data-theme="dark"] .waypoint-badge {
  -webkit-text-stroke: 0.7px #000000 !important;
  text-shadow:
    -1.5px -1.5px 0 #000000,
     0    -1.5px 0 #000000,
     1.5px -1.5px 0 #000000,
     1.5px  0     0 #000000,
     1.5px  1.5px 0 #000000,
     0     1.5px  0 #000000,
    -1.5px  1.5px 0 #000000,
    -1.5px  0     0 #000000,
     0 0 4px rgba(0, 0, 0, 1),
     0 2px 5px rgba(255, 255, 255, 0.25) !important;
}

@media (max-width: 359px) {
  .waypoint-badge {
    font-size: 12px !important;
  }
}
/* ═══════════════════════════════════════════════════════════════
   END KMAP-WAYPOINT-HALO v2
   ═══════════════════════════════════════════════════════════════ */

/* Penggaris taktis */
.tactical-ruler-banner,
.tactical-ruler-card {
  transition: background-color 0.2s ease-out,
              border-color 0.2s ease-out,
              color 0.2s ease-out !important;
}

/* ─────────────────────────────────────────────────────────────
   ANTI-FLICKER GPU ACCELERATION
   ───────────────────────────────────────────────────────────── */

.gm-fab,
.gm-chip,
.gm-watermark-dock,
.gm-search-pill,
.place-card,
.route-top-card,
.route-bottom-sheet,
.gm-modal {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}


/* ═══════════════════════════════════════════════════════════════
   PATCH v30 — FIX TOMBOL RUTE & SEMUA TOMBOL HIJAU
   Paksa semua SVG dalam tombol ber-background hijau jadi PUTIH
   ═══════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────
   A. TOMBOL "RUTE" — PLACE CARD (prioritas utama)
   Light mode: hijau emerald solid + ikon PUTIH TAJAM
   Dark mode : hijau neon + ikon PUTIH TAJAM
   ───────────────────────────────────────────────────────────── */

/* Base — pastikan svg putih */
.btn-place-action.btn-route svg,
.btn-place-action.btn-route svg path,
.btn-place-action.btn-route svg * {
  fill: #FFFFFF !important;
  color: #FFFFFF !important;
  stroke: #FFFFFF !important;
  stroke-width: 0 !important;
}

/* LIGHT MODE */
[data-theme="light"] .btn-place-action.btn-route,
html[data-theme="light"] .btn-place-action.btn-route,
body[data-theme="light"] .btn-place-action.btn-route {
  background: #065f46 !important;
  color: #FFFFFF !important;
  border: 2px solid #ffffff !important;
  box-shadow: 0 4px 14px rgba(6, 95, 70, 0.35) !important;
}

[data-theme="light"] .btn-place-action.btn-route svg,
[data-theme="light"] .btn-place-action.btn-route svg *,
html[data-theme="light"] .btn-place-action.btn-route svg,
html[data-theme="light"] .btn-place-action.btn-route svg * {
  fill: #FFFFFF !important;
  color: #FFFFFF !important;
  stroke: none !important;
}

/* DARK MODE */
[data-theme="dark"] .btn-place-action.btn-route,
html[data-theme="dark"] .btn-place-action.btn-route,
body[data-theme="dark"] .btn-place-action.btn-route {
  background: #10b981 !important;
  color: #FFFFFF !important;
  border: none !important;
  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.45),
              0 0 12px rgba(16, 185, 129, 0.3) !important;
}

[data-theme="dark"] .btn-place-action.btn-route svg,
[data-theme="dark"] .btn-place-action.btn-route svg *,
html[data-theme="dark"] .btn-place-action.btn-route svg,
html[data-theme="dark"] .btn-place-action.btn-route svg * {
  fill: #FFFFFF !important;
  color: #FFFFFF !important;
}

/* ─────────────────────────────────────────────────────────────
   B. TOMBOL "BAGIKAN" — PLACE CARD (polish)
   Light mode: putih + border emerald, ikon emerald
   Dark mode : transparan emerald soft, ikon emerald cerah
   ───────────────────────────────────────────────────────────── */

/* LIGHT MODE */
[data-theme="light"] .btn-place-action.btn-share,
html[data-theme="light"] .btn-place-action.btn-share {
  background: #ffffff !important;
  color: #065f46 !important;
  border: 2px solid #065f46 !important;
}

[data-theme="light"] .btn-place-action.btn-share svg,
[data-theme="light"] .btn-place-action.btn-share svg *,
html[data-theme="light"] .btn-place-action.btn-share svg,
html[data-theme="light"] .btn-place-action.btn-share svg * {
  fill: #065f46 !important;
  color: #065f46 !important;
}

/* DARK MODE */
[data-theme="dark"] .btn-place-action.btn-share,
html[data-theme="dark"] .btn-place-action.btn-share {
  background: rgba(16, 185, 129, 0.15) !important;
  color: #34d399 !important;
  border: 2px solid #34d399 !important;
}

[data-theme="dark"] .btn-place-action.btn-share svg,
[data-theme="dark"] .btn-place-action.btn-share svg *,
html[data-theme="dark"] .btn-place-action.btn-share svg,
html[data-theme="dark"] .btn-place-action.btn-share svg * {
  fill: #34d399 !important;
  color: #34d399 !important;
}

/* ─────────────────────────────────────────────────────────────
   C. SEMUA TOMBOL BACK-BUTTON YANG SUDAH ADA (AUDIT LENGKAP)
   ───────────────────────────────────────────────────────────── */

/* Tombol "Mulai Navigasi" */
.btn-start-nav,
.btn-start-nav svg,
.btn-start-nav svg * {
  color: #FFFFFF !important;
}
.btn-start-nav svg,
.btn-start-nav svg * {
  fill: #FFFFFF !important;
}

/* Tombol "Mulai Rekam Jejak" */
.btn-track-start,
.btn-track-start svg,
.btn-track-start svg * {
  color: #FFFFFF !important;
}
.btn-track-start svg,
.btn-track-start svg * {
  fill: #FFFFFF !important;
}

/* Tombol "Pandu Kembali" */
.btn-track-back,
.btn-track-back svg,
.btn-track-back svg * {
  color: #FFFFFF !important;
}
.btn-track-back svg,
.btn-track-back svg * {
  fill: #FFFFFF !important;
}

/* Tombol "Pancarkan SOS" */
.btn-sos-main,
.btn-sos-main svg,
.btn-sos-main svg * {
  color: #FFFFFF !important;
}
.btn-sos-main svg,
.btn-sos-main svg * {
  fill: #FFFFFF !important;
}

/* Tombol "BIDIK SEKARANG" klinometer */
.btn-clino-lock,
.btn-clino-lock svg,
.btn-clino-lock svg * {
  color: #FFFFFF !important;
}
.btn-clino-lock svg,
.btn-clino-lock svg * {
  fill: #FFFFFF !important;
}

/* Tombol "Simpan" klinometer */
.btn-clino-save,
.btn-clino-save svg,
.btn-clino-save svg * {
  color: #FFFFFF !important;
}
.btn-clino-save svg,
.btn-clino-save svg * {
  fill: #FFFFFF !important;
}

/* Tombol "Simpan Foto" klinometer */
.btn-clino-photo,
.btn-clino-photo svg,
.btn-clino-photo svg * {
  color: #FFFFFF !important;
}
.btn-clino-photo svg,
.btn-clino-photo svg * {
  fill: #FFFFFF !important;
}

/* Tombol WhatsApp Submit */
.btn-wa-submit,
.btn-wa-submit svg,
.btn-wa-submit svg * {
  color: #FFFFFF !important;
}
.btn-wa-submit svg,
.btn-wa-submit svg * {
  fill: #FFFFFF !important;
}

/* Tombol "AKTIFKAN" lisensi */
.btn-activate,
.btn-activate svg,
.btn-activate svg * {
  color: #FFFFFF !important;
}
.btn-activate svg,
.btn-activate svg * {
  fill: #FFFFFF !important;
}

/* Popup "MENGERTI" */
.btn-popup-ok,
.btn-popup-ok svg,
.btn-popup-ok svg * {
  color: #FFFFFF !important;
}
.btn-popup-ok svg,
.btn-popup-ok svg * {
  fill: #FFFFFF !important;
}

/* Live Share "Stop" (merah) */
.live-share-banner .lsb-stop,
.live-share-banner .lsb-stop svg,
.live-share-banner .lsb-stop svg * {
  color: #FFFFFF !important;
}
.live-share-banner .lsb-stop svg,
.live-share-banner .lsb-stop svg * {
  fill: #FFFFFF !important;
}

/* Live Share "Share" */
.live-share-banner .lsb-share,
.live-share-banner .lsb-share svg,
.live-share-banner .lsb-share svg * {
  color: #FFFFFF !important;
}
.live-share-banner .lsb-share svg,
.live-share-banner .lsb-share svg * {
  fill: #FFFFFF !important;
}

/* FAB Rute (sudah di-fix sebelumnya, pastikan tidak regress) */
.gm-fab.fab-directions svg,
.gm-fab.fab-directions svg * {
  fill: #FFFFFF !important;
  color: #FFFFFF !important;
  stroke: none !important;
}

/* Tombol Navigasi Bawah "Share" */
.btn-nav-share-round svg,
.btn-nav-share-round svg * {
  fill: currentColor !important;
}

/* Tombol Peek Start */
.btn-peek-start {
  color: #FFFFFF !important;
}

/* ─────────────────────────────────────────────────────────────
   D. AUDIT KHUSUS — TOMBOL DENGAN BACKGROUND HIJAU EMERALD
   Semua tombol dengan bg hijau WAJIB punya svg putih
   ───────────────────────────────────────────────────────────── */

.btn-track-action.btn-track-start,
.btn-track-action.btn-track-back,
.btn-place-action.btn-route,
.btn-start-nav,
.btn-sos-main,
.btn-clino-lock,
.btn-clino-save,
.btn-clino-photo,
.btn-wa-submit,
.btn-activate,
.btn-popup-ok,
.btn-peek-start {
  /* Pastikan color currentColor → putih */
  color: #FFFFFF !important;
}

.btn-track-action.btn-track-start svg,
.btn-track-action.btn-track-start svg *,
.btn-track-action.btn-track-back svg,
.btn-track-action.btn-track-back svg *,
.btn-place-action.btn-route svg,
.btn-place-action.btn-route svg *,
.btn-start-nav svg,
.btn-start-nav svg *,
.btn-sos-main svg,
.btn-sos-main svg *,
.btn-clino-lock svg,
.btn-clino-lock svg *,
.btn-clino-save svg,
.btn-clino-save svg *,
.btn-clino-photo svg,
.btn-clino-photo svg *,
.btn-wa-submit svg,
.btn-wa-submit svg *,
.btn-activate svg,
.btn-activate svg *,
.btn-popup-ok svg,
.btn-popup-ok svg * {
  fill: #FFFFFF !important;
  color: #FFFFFF !important;
}


/* ═══════════════════════════════════════════════════════════════
   PATCH v31 — FONT READABILITY BOOST FINAL
   Target: HP 360px (Redmi 9C) + safety net HP kecil
   Prinsip: font naik 15-25%, line-height 1.7, letter-spacing tipis
   ═══════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────
   A. MODAL HEAD & CONTENT — FONDASI
   ───────────────────────────────────────────────────────────── */

.modal-head h3 {
  font-size: 17px !important;
  font-weight: 800 !important;
  letter-spacing: 0.2px !important;
  line-height: 1.4 !important;
}

.modal-close {
  font-size: 20px !important;
  min-width: 32px !important;
  min-height: 32px !important;
}

.modal-content {
  font-size: 14.5px !important;
  line-height: 1.7 !important;
  letter-spacing: 0.15px !important;
}

/* ─────────────────────────────────────────────────────────────
   B. HEADER SECTION DALAM MODAL
   (label "JENIS PETA UTAMA:", "INSTRUMEN & SURVIVAL OS:")
   ───────────────────────────────────────────────────────────── */

.modal-content > div[style*="font-weight:800"],
.modal-content > div[style*="font-weight: 800"],
.modal-content > div[style*="font-size:11px"] {
  font-size: 13px !important;
  letter-spacing: 0.3px !important;
}

/* ─────────────────────────────────────────────────────────────
   C. MAP TYPES GRID — JENIS PETA (2 kolom)
   Target: 14px di HP 360px (aman, margin 40px+)
   ───────────────────────────────────────────────────────────── */

.map-type-label {
  font-size: 14px !important;
  font-weight: 800 !important;
  letter-spacing: 0.15px !important;
  line-height: 1.3 !important;
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
}

.map-type-icon {
  font-size: 28px !important;
}

.map-type-card {
  padding: 14px 8px !important;
  min-height: 90px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
}

/* ─────────────────────────────────────────────────────────────
   D. MAP TOOLS GRID — INSTRUMEN (3 kolom)
   Target: 13.5px di HP 360px (aman, margin 25px+)
   ───────────────────────────────────────────────────────────── */

.map-tool-label {
  font-size: 13.5px !important;
  font-weight: 800 !important;
  letter-spacing: 0.15px !important;
  line-height: 1.25 !important;
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
  hyphens: auto !important;
}

.map-tool-icon {
  font-size: 26px !important;
}

.map-tool-card {
  padding: 14px 6px !important;
  min-height: 95px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
}

/* ─────────────────────────────────────────────────────────────
   E. LEGENDA (MODAL LEGENDA)
   ───────────────────────────────────────────────────────────── */

.legend-item-row {
  font-size: 14.5px !important;
  line-height: 1.7 !important;
  letter-spacing: 0.1px !important;
  margin-bottom: 12px !important;
}

.legend-item-row strong {
  font-weight: 800 !important;
  color: var(--text-main) !important;
}

.legend-swatch {
  min-width: 32px !important;
  height: 12px !important;
}

/* Teks paragraf di legenda */
.gm-modal .modal-content p {
  font-size: 14.5px !important;
  line-height: 1.7 !important;
  letter-spacing: 0.1px !important;
}

.gm-modal .modal-content li,
.gm-modal .modal-content ul {
  font-size: 14.5px !important;
  line-height: 1.7 !important;
}

/* ─────────────────────────────────────────────────────────────
   F. TRACK STAT (MODAL REKAM JEJAK)
   ───────────────────────────────────────────────────────────── */

.track-stat-lbl {
  font-size: 13px !important;
  font-weight: 800 !important;
  letter-spacing: 0.3px !important;
  line-height: 1.4 !important;
}

.track-stat-val {
  font-size: 21px !important;
  font-weight: 900 !important;
  letter-spacing: 0.5px !important;
  line-height: 1.2 !important;
}

.track-stat-card {
  padding: 12px 8px !important;
}

/* ─────────────────────────────────────────────────────────────
   G. BRANKAS PETA — PACK ITEMS
   ───────────────────────────────────────────────────────────── */

.pack-title {
  font-size: 16.5px !important;
  font-weight: 800 !important;
  letter-spacing: 0.15px !important;
  line-height: 1.35 !important;
}

.pack-sub {
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0.15px !important;
  line-height: 1.5 !important;
  margin-top: 4px !important;
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
}

.btn-pack-act {
  font-size: 12.5px !important;
  font-weight: 800 !important;
  letter-spacing: 0.2px !important;
  padding: 8px 14px !important;
  min-height: 32px !important;
}

.pack-item-card {
  padding: 14px 16px !important;
  margin-bottom: 12px !important;
}

/* ─────────────────────────────────────────────────────────────
   H. LICENSE BOX
   ───────────────────────────────────────────────────────────── */

.license-box {
  padding: 16px !important;
  margin-bottom: 18px !important;
}

.license-status {
  font-size: 14.5px !important;
  font-weight: 800 !important;
  letter-spacing: 0.2px !important;
  margin-bottom: 12px !important;
}

.license-input {
  font-size: 14.5px !important;
  font-weight: 700 !important;
  padding: 11px 14px !important;
  letter-spacing: 0.3px !important;
  min-height: 42px !important;
}

.btn-activate {
  font-size: 14.5px !important;
  font-weight: 800 !important;
  padding: 11px 18px !important;
  letter-spacing: 0.2px !important;
  min-height: 42px !important;
}

/* ─────────────────────────────────────────────────────────────
   I. WHATSAPP ORDER FORM
   ───────────────────────────────────────────────────────────── */

.btn-wa-order-toggle {
  font-size: 14.5px !important;
  font-weight: 800 !important;
  padding: 13px 16px !important;
  letter-spacing: 0.2px !important;
  min-height: 46px !important;
}

.btn-wa-order-subtle {
  font-size: 13.5px !important;
  font-weight: 700 !important;
}

.wa-order-drawer {
  padding: 16px !important;
}

.wa-input-group {
  margin-bottom: 12px !important;
}

.wa-input-group label {
  font-size: 13.5px !important;
  font-weight: 800 !important;
  letter-spacing: 0.15px !important;
  margin-bottom: 6px !important;
}

.wa-input-field {
  font-size: 14.5px !important;
  font-weight: 600 !important;
  padding: 12px 14px !important;
  letter-spacing: 0.1px !important;
  min-height: 44px !important;
}

.wa-input-field::placeholder {
  font-size: 13.5px !important;
}

.wa-order-note {
  font-size: 12.5px !important;
  line-height: 1.6 !important;
  letter-spacing: 0.1px !important;
}

.btn-wa-submit {
  font-size: 14.5px !important;
  font-weight: 900 !important;
  padding: 13px 16px !important;
  letter-spacing: 0.3px !important;
  min-height: 46px !important;
}

/* ─────────────────────────────────────────────────────────────
   J. KLINOMETER — PANDUAN LACI
   ───────────────────────────────────────────────────────────── */

.clino-info-drawer {
  padding: 16px !important;
}

.clino-info-card {
  padding-bottom: 14px !important;
  margin-bottom: 14px !important;
}

.clino-info-title {
  font-size: 14.5px !important;
  font-weight: 900 !important;
  letter-spacing: 0.2px !important;
  line-height: 1.4 !important;
  margin-bottom: 8px !important;
}

.clino-info-card p {
  font-size: 14px !important;
  line-height: 1.7 !important;
  letter-spacing: 0.1px !important;
  font-weight: 600 !important;
}

.clino-zone-mini {
  font-size: 13.5px !important;
  font-weight: 700 !important;
  line-height: 1.7 !important;
  letter-spacing: 0.1px !important;
}

/* Klinometer chips & buttons */
.clino-brand-badge {
  font-size: 15px !important;
  font-weight: 800 !important;
  letter-spacing: 0.2px !important;
}

.btn-clino-info-toggle {
  font-size: 13px !important;
  font-weight: 800 !important;
  padding: 8px 14px !important;
  letter-spacing: 0.15px !important;
  min-height: 36px !important;
}

.clino-chip-lbl {
  font-size: 12.5px !important;
  font-weight: 800 !important;
  letter-spacing: 0.2px !important;
}

.clino-chip-val {
  font-size: 15.5px !important;
  font-weight: 900 !important;
  letter-spacing: 0.3px !important;
}

.clino-res-lbl {
  font-size: 12.5px !important;
  font-weight: 800 !important;
  letter-spacing: 0.2px !important;
}

.clino-res-val {
  font-size: 24px !important;
  font-weight: 900 !important;
  letter-spacing: 0.5px !important;
}

.clino-res-advice {
  font-size: 13.5px !important;
  line-height: 1.65 !important;
  letter-spacing: 0.1px !important;
}

.clino-telemetry-text {
  font-size: 12.5px !important;
  letter-spacing: 0.15px !important;
}

.btn-clino-mode-tab {
  font-size: 13.5px !important;
  font-weight: 800 !important;
  letter-spacing: 0.15px !important;
  padding: 11px 8px !important;
  min-height: 42px !important;
}

.btn-clino-lock {
  font-size: 15px !important;
  font-weight: 900 !important;
  letter-spacing: 0.3px !important;
  min-height: 46px !important;
}

.btn-clino-tare {
  font-size: 13.5px !important;
  font-weight: 800 !important;
  letter-spacing: 0.2px !important;
  min-height: 42px !important;
}

/* ─────────────────────────────────────────────────────────────
   K. KOMPAS — PANDUAN
   ───────────────────────────────────────────────────────────── */

.compass-guide-drawer {
  padding: 16px !important;
}

.compass-guide-drawer .clino-info-title {
  font-size: 14.5px !important;
  font-weight: 900 !important;
  letter-spacing: 0.2px !important;
  margin-bottom: 8px !important;
}

.compass-guide-drawer p {
  font-size: 14px !important;
  line-height: 1.7 !important;
  letter-spacing: 0.1px !important;
  font-weight: 600 !important;
}

/* ─────────────────────────────────────────────────────────────
   L. TOMBOL AKSI (REKAM JEJAK, GPX, DLL)
   ───────────────────────────────────────────────────────────── */

.btn-track-action {
  font-size: 14.5px !important;
  font-weight: 800 !important;
  letter-spacing: 0.2px !important;
  padding: 14px !important;
  min-height: 46px !important;
}

.btn-track-gpx {
  font-size: 13.5px !important;
}

/* ─────────────────────────────────────────────────────────────
   M. SOS MODAL
   ───────────────────────────────────────────────────────────── */

.sos-card-lbl {
  font-size: 12.5px !important;
  font-weight: 800 !important;
  letter-spacing: 0.3px !important;
}

.sos-mgrs-display {
  font-size: 24px !important;
  font-weight: 900 !important;
  letter-spacing: 2px !important;
}

.sos-sub-coords {
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.2px !important;
}

.sos-bat-status {
  font-size: 12.5px !important;
  font-weight: 700 !important;
}

.sos-switch-title {
  font-size: 14.5px !important;
  font-weight: 800 !important;
  letter-spacing: 0.15px !important;
}

.sos-switch-desc {
  font-size: 12.5px !important;
  line-height: 1.55 !important;
  letter-spacing: 0.1px !important;
  word-break: break-word !important;
}

.btn-sos-main {
  font-size: 16px !important;
  font-weight: 900 !important;
  padding: 16px !important;
  letter-spacing: 0.4px !important;
  min-height: 52px !important;
}

.sos-checkbox {
  width: 24px !important;
  height: 24px !important;
}

/* ─────────────────────────────────────────────────────────────
   N. TRACK ALERT CHIP (SAKELAR PERINGATAN)
   ───────────────────────────────────────────────────────────── */

.track-alert-chip {
  font-size: 13px !important;
  font-weight: 800 !important;
  padding: 11px 12px !important;
  letter-spacing: 0.15px !important;
  min-height: 42px !important;
  word-break: break-word !important;
}

.track-alert-chip input[type="checkbox"] {
  width: 18px !important;
  height: 18px !important;
}

/* ─────────────────────────────────────────────────────────────
   O. UI LAINNYA YANG MASIH KECIL
   ───────────────────────────────────────────────────────────── */

/* Popup taktikal */
.gm-popup-title {
  font-size: 17px !important;
  font-weight: 900 !important;
}

.gm-popup-msg {
  font-size: 14.5px !important;
  line-height: 1.7 !important;
}

.btn-popup-ok,
.btn-popup-cancel {
  font-size: 14.5px !important;
  font-weight: 800 !important;
  min-height: 44px !important;
  padding: 11px 24px !important;
}

/* Toast notifikasi */
.tactical-toast {
  font-size: 14px !important;
  line-height: 1.5 !important;
  padding: 12px 16px !important;
}

/* Place card */
.place-card-title {
  font-size: 17.5px !important;
  font-weight: 800 !important;
}

.place-card-desc {
  font-size: 14px !important;
  line-height: 1.5 !important;
}

.btn-place-action {
  font-size: 14.5px !important;
  font-weight: 800 !important;
  min-height: 46px !important;
}

/* Route inputs */
.route-top-input {
  font-size: 15.5px !important;
  min-height: 42px !important;
}

.route-top-input::placeholder {
  font-size: 14px !important;
}

/* Route sheet */
.peek-text {
  font-size: 15.5px !important;
}

.btn-peek-start {
  font-size: 13.5px !important;
  min-height: 36px !important;
}

.route-hero-time {
  font-size: 26px !important;
}

.route-hero-sub {
  font-size: 17px !important;
}

.route-hero-via {
  font-size: 15px !important;
  line-height: 1.5 !important;
}

.route-alt-item {
  font-size: 15.5px !important;
  min-height: 42px !important;
}

.btn-mode-tab {
  font-size: 15.5px !important;
  min-height: 42px !important;
}

/* ═══════════════════════════════════════════════════════════════
   P. SAFETY NET — HP KECIL (< 360px)
   HP user lain yang lebih kecil dari Redmi 9C
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 359px) {
  .map-tool-label {
    font-size: 12.5px !important;
  }
  .map-type-label {
    font-size: 13px !important;
  }
  .map-type-icon {
    font-size: 26px !important;
  }
  .map-tool-icon {
    font-size: 24px !important;
  }
  .track-stat-val {
    font-size: 19px !important;
  }
  .sos-mgrs-display {
    font-size: 22px !important;
  }
  .pack-title {
    font-size: 15.5px !important;
  }
  .clino-res-val {
    font-size: 22px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   Q. SAFETY NET — HP SANGAT KECIL (< 320px, jarang)
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 319px) {
  .map-tool-label {
    font-size: 11.5px !important;
  }
  .map-type-label {
    font-size: 12px !important;
  }
  .modal-content {
    font-size: 13.5px !important;
  }
}


/* ═══════════════════════════════════════════════════════════════
   PATCH v32 — VISUAL POLISH: LEGENDA + SOS + KOMPAS
   ═══════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────
   A. LEGENDA SECTION HEADER — BLOCKQUOTE STYLE
   Section header "🧭 PANDUAN NAVIGASI:", "🎨 KODE WARNA..."
   sekarang pakai border kiri hijau tebal + background soft
   ───────────────────────────────────────────────────────────── */

/* Deteksi section header di modal-content (yang punya emoji + CAPS + titik dua) */
.gm-modal .modal-content > div[style*="font-weight:800"],
.gm-modal .modal-content > div[style*="font-weight: 800"] {
  background: var(--accent-primary-soft) !important;
  border-left: 5px solid var(--accent-primary) !important;
  color: var(--accent-primary) !important;
  font-weight: 900 !important;
  font-size: 14.5px !important;
  letter-spacing: 0.3px !important;
  padding: 10px 14px !important;
  margin: 14px 0 10px 0 !important;
  border-radius: 0 10px 10px 0 !important;
  line-height: 1.4 !important;
  box-shadow: 0 2px 6px rgba(6, 95, 70, 0.08) !important;
}

/* Dark mode — lebih kontras */
[data-theme="dark"] .gm-modal .modal-content > div[style*="font-weight:800"],
[data-theme="dark"] .gm-modal .modal-content > div[style*="font-weight: 800"] {
  background: rgba(16, 185, 129, 0.12) !important;
  border-left: 5px solid var(--accent-primary) !important;
  color: var(--accent-primary-hover) !important;
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.15) !important;
}

/* Fallback untuk browser yang tidak support attribute selector (langka) */
.legend-section-title {
  background: var(--accent-primary-soft) !important;
  border-left: 5px solid var(--accent-primary) !important;
  color: var(--accent-primary) !important;
  font-weight: 900 !important;
  padding: 10px 14px !important;
  margin: 14px 0 10px 0 !important;
  border-radius: 0 10px 10px 0 !important;
}

/* ─────────────────────────────────────────────────────────────
   B. SOS — BLOK MGRS HIJAU SOLID + TEKS PUTIH
   Style seperti tab aktif kompas, + glow emerald, teks besar
   ───────────────────────────────────────────────────────────── */

/* Kartu utama MGRS */
.sos-radio-card {
  background: var(--accent-primary) !important;
  border: 2.5px solid #ffffff !important;
  border-radius: 16px !important;
  padding: 16px 18px !important;
  margin-bottom: 16px !important;
  box-shadow: 0 6px 20px rgba(6, 95, 70, 0.4),
              0 0 20px rgba(16, 185, 129, 0.25) !important;
  text-align: center !important;
  position: relative !important;
  overflow: hidden !important;
}

/* Efek glow pulse subtle */
.sos-radio-card::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  background: radial-gradient(circle at center, rgba(255,255,255,0.15) 0%, transparent 70%) !important;
  pointer-events: none !important;
}

/* Dark mode — hijau neon dengan glow lebih kuat */
[data-theme="dark"] .sos-radio-card {
  background: #10b981 !important;
  border: 2.5px solid #34d399 !important;
  box-shadow: 0 6px 24px rgba(16, 185, 129, 0.5),
              0 0 30px rgba(16, 185, 129, 0.35) !important;
}

/* Label kecil di atas MGRS */
.sos-card-lbl {
  color: rgba(255, 255, 255, 0.9) !important;
  font-size: 12.5px !important;
  font-weight: 800 !important;
  letter-spacing: 0.5px !important;
  margin-bottom: 8px !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) !important;
}

[data-theme="dark"] .sos-card-lbl {
  color: rgba(10, 26, 18, 0.85) !important;
  text-shadow: none !important;
}

/* MGRS Display — TEKS PUTIH BESAR MONOSPACE */
.sos-mgrs-display {
  color: #ffffff !important;
  font-size: 30px !important;
  font-weight: 900 !important;
  font-family: 'JetBrains Mono', 'SF Mono', 'Consolas', monospace !important;
  letter-spacing: 3px !important;
  line-height: 1.15 !important;
  margin: 6px 0 10px 0 !important;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.35) !important;
}

[data-theme="dark"] .sos-mgrs-display {
  color: #0a1a12 !important;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.2) !important;
}

/* Sub koordinat — teks putih soft */
.sos-sub-coords {
  color: rgba(255, 255, 255, 0.92) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  font-family: 'JetBrains Mono', 'SF Mono', monospace !important;
  letter-spacing: 0.5px !important;
  margin-bottom: 10px !important;
  line-height: 1.5 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) !important;
}

[data-theme="dark"] .sos-sub-coords {
  color: rgba(10, 26, 18, 0.85) !important;
  text-shadow: none !important;
}

/* Baterai status */
.sos-bat-status {
  color: rgba(255, 255, 255, 0.95) !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  display: flex !important;
  justify-content: center !important;
  gap: 10px !important;
  padding-top: 8px !important;
  border-top: 1px dashed rgba(255, 255, 255, 0.3) !important;
  margin-top: 8px !important;
  letter-spacing: 0.2px !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) !important;
}

[data-theme="dark"] .sos-bat-status {
  color: rgba(10, 26, 18, 0.9) !important;
  border-top: 1px dashed rgba(10, 26, 18, 0.3) !important;
  text-shadow: none !important;
}

.sos-bat-status strong {
  color: #ffffff !important;
  font-weight: 900 !important;
}

[data-theme="dark"] .sos-bat-status strong {
  color: #0a1a12 !important;
}

/* ─────────────────────────────────────────────────────────────
   C. SOS SWITCH ROWS — LEBIH JELAS & TEGAS
   ───────────────────────────────────────────────────────────── */

.sos-switch-row {
  background: var(--bg-card) !important;
  border: 2px solid var(--border-ui) !important;
  border-radius: 14px !important;
  padding: 14px 16px !important;
  margin-bottom: 10px !important;
  transition: all 0.2s ease-out !important;
}

.sos-switch-row:hover {
  border-color: var(--accent-primary) !important;
  background: var(--accent-primary-soft) !important;
}

/* Checkbox — lebih besar & jelas */
.sos-checkbox {
  width: 26px !important;
  height: 26px !important;
  accent-color: var(--accent-primary) !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
}

.sos-switch-title {
  font-size: 15px !important;
  font-weight: 800 !important;
  color: var(--text-main) !important;
  letter-spacing: 0.15px !important;
  line-height: 1.4 !important;
}

.sos-switch-desc {
  font-size: 13px !important;
  line-height: 1.6 !important;
  color: var(--text-sub) !important;
  margin-top: 4px !important;
  letter-spacing: 0.1px !important;
}

/* ─────────────────────────────────────────────────────────────
   D. KOMPAS TAB NON-AKTIF — SOFT EMERALD
   ───────────────────────────────────────────────────────────── */

.btn-compass-tab {
  background: var(--accent-primary-soft) !important;
  border: 1.5px solid rgba(6, 95, 70, 0.25) !important;
  color: var(--accent-primary) !important;
  font-weight: 800 !important;
  transition: all 0.2s ease-out !important;
}

.btn-compass-tab:hover {
  background: rgba(6, 95, 70, 0.15) !important;
  border-color: var(--accent-primary) !important;
}

[data-theme="dark"] .btn-compass-tab {
  background: rgba(16, 185, 129, 0.12) !important;
  border-color: rgba(16, 185, 129, 0.35) !important;
  color: var(--accent-primary-hover) !important;
}

[data-theme="dark"] .btn-compass-tab:hover {
  background: rgba(16, 185, 129, 0.22) !important;
}

/* Tab AKTIF — hijau solid + teks putih (seperti sebelumnya) */
.btn-compass-tab.active {
  background: var(--accent-primary) !important;
  color: #ffffff !important;
  border-color: var(--accent-primary) !important;
  box-shadow: 0 3px 10px rgba(6, 95, 70, 0.35) !important;
}

[data-theme="dark"] .btn-compass-tab.active {
  background: #10b981 !important;
  color: #ffffff !important;
  border-color: #34d399 !important;
  box-shadow: 0 3px 14px rgba(16, 185, 129, 0.45),
              0 0 12px rgba(16, 185, 129, 0.3) !important;
}

/* ─────────────────────────────────────────────────────────────
   E. WARNING TEXT — SENSOR TIDAK MERESPON
   ───────────────────────────────────────────────────────────── */

.compass-tab-bar + .modal-content + div,
.gm-modal#modalCompass > .modal-content > div[style*="color:#f59e0b"],
.gm-modal#modalCompass .modal-content > div[style*="color:#f59e0b"],
.gm-modal#modalCompass .modal-content > div[style*="color: #f59e0b"] {
  color: #dc2626 !important;
  background: rgba(220, 38, 38, 0.08) !important;
  border-left: 4px solid #dc2626 !important;
  padding: 10px 14px !important;
  border-radius: 0 10px 10px 0 !important;
  font-weight: 800 !important;
  font-size: 13px !important;
  letter-spacing: 0.2px !important;
  margin-top: 10px !important;
  text-align: left !important;
}

[data-theme="dark"] .gm-modal#modalCompass .modal-content > div[style*="color:#f59e0b"],
[data-theme="dark"] .gm-modal#modalCompass .modal-content > div[style*="color: #f59e0b"] {
  color: #fca5a5 !important;
  background: rgba(220, 38, 38, 0.12) !important;
  border-left: 4px solid #ef4444 !important;
}

/* ─────────────────────────────────────────────────────────────
   F. BUTTON SOS MAIN — LEBIH BESAR & JELAS
   ───────────────────────────────────────────────────────────── */

.btn-sos-main {
  font-size: 16px !important;
  font-weight: 900 !important;
  padding: 16px 20px !important;
  letter-spacing: 0.4px !important;
  min-height: 54px !important;
  border-radius: 14px !important;
  box-shadow: 0 4px 16px rgba(220, 38, 38, 0.4) !important;
}

.btn-sos-main:active {
  transform: scale(0.97) !important;
}

/* ─────────────────────────────────────────────────────────────
   G. AUDIT LAIN — SATUKAN GAYA BLOCKQUOTE SECTION HEADER
   ───────────────────────────────────────────────────────────── */

/* Semua section header dalam modal dapat gaya konsisten */
.gm-modal .modal-content > div[style*="margin:14px 0 8px"],
.gm-modal .modal-content > div[style*="margin: 14px 0 8px"],
.gm-modal .modal-content > div[style*="margin-bottom:8px"] {
  background: var(--accent-primary-soft) !important;
  border-left: 5px solid var(--accent-primary) !important;
  color: var(--accent-primary) !important;
  padding: 10px 14px !important;
  margin: 14px 0 10px 0 !important;
  border-radius: 0 10px 10px 0 !important;
  font-weight: 900 !important;
  font-size: 14px !important;
  letter-spacing: 0.3px !important;
  line-height: 1.4 !important;
  box-shadow: 0 2px 6px rgba(6, 95, 70, 0.08) !important;
}

[data-theme="dark"] .gm-modal .modal-content > div[style*="margin:14px 0 8px"],
[data-theme="dark"] .gm-modal .modal-content > div[style*="margin: 14px 0 8px"],
[data-theme="dark"] .gm-modal .modal-content > div[style*="margin-bottom:8px"] {
  background: rgba(16, 185, 129, 0.12) !important;
  border-left: 5px solid var(--accent-primary) !important;
  color: var(--accent-primary-hover) !important;
}


/* ═══════════════════════════════════════════════════════════════
   PATCH v33 — FERRY BOTTOM SHEET
   ═══════════════════════════════════════════════════════════════ */

.ferry-bottom-sheet {
  position: fixed !important;
  bottom: 0;
  left: 0;
  right: 0;
  max-width: 480px;
  margin: 0 auto;
  background: var(--bg-card-solid);
  border-top: 3px solid var(--accent-primary);
  border-radius: 22px 22px 0 0;
  box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.35);
  z-index: 1700 !important;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  animation: ferrySheetIn 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes ferrySheetIn {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

.ferry-sheet-header {
  padding: 8px 14px 4px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
  position: relative;
}

.ferry-sheet-handle {
  width: 38px;
  height: 4.5px;
  border-radius: 3px;
  background: rgba(148, 163, 184, 0.45);
  margin: 0 auto;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.ferry-sheet-close {
  background: rgba(0,0,0,0.05);
  border: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-size: 16px;
  font-weight: 800;
  color: var(--text-sub);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  z-index: 1;
}
[data-theme="dark"] .ferry-sheet-close {
  background: rgba(255,255,255,0.1);
}

.ferry-sheet-content {
  flex: 1;
  overflow-y: auto;
  padding: 8px 18px 20px;
}

/* Hero */
.ferry-hero {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: var(--accent-primary-soft);
  border-left: 5px solid var(--accent-primary);
  border-radius: 12px;
  margin-bottom: 14px;
}

.ferry-hero-icon {
  font-size: 32px;
  flex-shrink: 0;
}

.ferry-hero-text {
  flex: 1;
  min-width: 0;
}

.ferry-hero-title {
  font-size: 13px;
  font-weight: 900;
  color: var(--accent-primary);
  letter-spacing: 0.3px;
  margin-bottom: 4px;
}

.ferry-hero-sub {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-main);
  line-height: 1.4;
  word-break: break-word;
}

/* Info Card — Pelabuhan Terakhir */
.ferry-info-card {
  background: var(--bg-card);
  border: 2px solid var(--accent-primary);
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 16px;
}

.ferry-info-title {
  font-size: 11px;
  font-weight: 800;
  color: var(--text-sub);
  letter-spacing: 0.5px;
  margin-bottom: 6px;
}

.ferry-info-port {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ferry-info-port strong {
  font-size: 17px;
  font-weight: 900;
  color: var(--accent-primary);
  line-height: 1.3;
}

.ferry-info-city {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-main);
  opacity: 0.85;
}

/* Chain Title */
.ferry-chain-title {
  font-size: 13px;
  font-weight: 900;
  color: var(--accent-primary);
  letter-spacing: 0.3px;
  margin-bottom: 10px;
  padding-left: 4px;
}

/* Chain — Daftar Leg */
.ferry-chain {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 16px;
}

.ferry-leg {
  display: flex;
  gap: 12px;
  background: var(--bg-card);
  border: 1.5px solid var(--border-ui);
  border-radius: 12px;
  padding: 12px 14px;
}

.ferry-leg-number {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--accent-primary);
  color: #ffffff;
  font-weight: 900;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ferry-leg-info {
  flex: 1;
  min-width: 0;
}

.ferry-leg-route {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: 14.5px;
  color: var(--text-main);
  margin-bottom: 4px;
  line-height: 1.35;
}

.ferry-leg-route strong {
  font-weight: 900;
}

.ferry-arrow {
  color: var(--accent-primary);
  font-weight: 900;
  margin: 0 2px;
}

.ferry-leg-detail {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-sub);
  margin-bottom: 6px;
}

.ferry-leg-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--accent-primary);
}

.ferry-leg-meta span {
  background: var(--accent-primary-soft);
  padding: 3px 8px;
  border-radius: 8px;
}

/* Total Card */
.ferry-total-card {
  background: var(--accent-primary);
  border: 2px solid #ffffff;
  border-radius: 12px;
  padding: 12px 16px;
  margin-bottom: 14px;
  text-align: center;
  box-shadow: 0 4px 12px rgba(6, 95, 70, 0.25);
}

[data-theme="dark"] .ferry-total-card {
  background: #10b981;
  border-color: #34d399;
  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.4);
}

.ferry-total-lbl {
  font-size: 11px;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.9);
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}

[data-theme="dark"] .ferry-total-lbl {
  color: rgba(10, 26, 18, 0.85);
}

.ferry-total-val {
  font-size: 17px;
  font-weight: 900;
  color: #ffffff;
  letter-spacing: 0.3px;
}

[data-theme="dark"] .ferry-total-val {
  color: #0a1a12;
}

/* Action Button */
.ferry-action-btn {
  width: 100%;
  padding: 15px 20px;
  background: var(--accent-primary);
  color: #ffffff;
  border: none;
  border-radius: 14px;
  font-size: 15px;
  font-weight: 900;
  letter-spacing: 0.3px;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(6, 95, 70, 0.35);
  transition: transform 0.15s ease, box-shadow 0.2s ease;
  margin-bottom: 12px;
  min-height: 50px;
}

.ferry-action-btn:active {
  transform: scale(0.97);
}

[data-theme="dark"] .ferry-action-btn {
  background: #10b981;
  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.45);
}

/* Note */
.ferry-note {
  font-size: 12px;
  line-height: 1.55;
  color: var(--text-sub);
  padding: 10px 12px;
  background: var(--accent-primary-soft);
  border-left: 3px solid var(--accent-primary);
  border-radius: 0 8px 8px 0;
  font-weight: 600;
}


/* ═══════════════════════════════════════════════════════════════
   PATCH v34 — TOAST WIDTH FIX + FERRY LINE STYLES
   ═══════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────
   A. TOAST WIDTH — AUTO-SIZE (min 380px, max 92vw)
   ───────────────────────────────────────────────────────────── */

.tactical-toast {
  max-width: min(480px, 92vw) !important;
  width: auto !important;
  min-width: 0 !important;
  padding: 12px 18px !important;
  font-size: 13.5px !important;
  line-height: 1.45 !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

.tactical-toast > span:first-child {
  font-size: 18px !important;
  flex-shrink: 0 !important;
}

.tactical-toast > span:last-child {
  flex: 1 !important;
  word-break: break-word !important;
  overflow-wrap: break-word !important;
  hyphens: auto !important;
}

/* Mode tablet & desktop */
@media (min-width: 480px) {
  .tactical-toast {
    max-width: 420px !important;
    font-size: 14px !important;
  }
}

/* ─────────────────────────────────────────────────────────────
   B. FERRY LINE — GARIS PUTUS-PUTUS EMERALD DI PETA
   ───────────────────────────────────────────────────────────── */

/* Line utama ferry — dashed emerald tebal */
.ferry-line-layer {
  opacity: 0.92;
}

/* Marker ikon kapal di tengah garis ferry */
.ferry-ship-marker {
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: auto;
  cursor: pointer;
  filter: drop-shadow(0 3px 8px rgba(6, 95, 70, 0.45));
  animation: ferryBoatBob 3s ease-in-out infinite;
}

@keyframes ferryBoatBob {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-4px); }
}

.ferry-ship-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #ffffff;
  border: 2.5px solid var(--accent-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  box-shadow: 0 3px 10px rgba(6, 95, 70, 0.35),
              0 0 0 3px rgba(6, 95, 70, 0.1);
}

[data-theme="dark"] .ferry-ship-icon {
  background: #131a17;
  border-color: #34d399;
  box-shadow: 0 3px 12px rgba(16, 185, 129, 0.5),
              0 0 0 3px rgba(16, 185, 129, 0.15);
}

.ferry-ship-label {
  background: var(--accent-primary);
  color: #ffffff;
  font-size: 10px;
  font-weight: 900;
  padding: 3px 8px;
  border-radius: 10px;
  margin-top: 2px;
  letter-spacing: 0.3px;
  white-space: nowrap;
  border: 1.5px solid #ffffff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}

[data-theme="dark"] .ferry-ship-label {
  background: #10b981;
  border-color: #34d399;
  color: #0a1a12;
}

/* ─────────────────────────────────────────────────────────────
   C. FERRY SHEET MINIMIZED MODE (Peek)
   ───────────────────────────────────────────────────────────── */

.ferry-bottom-sheet.minimized {
  transform: translateY(calc(100% - 90px)) !important;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.ferry-bottom-sheet.minimized .ferry-sheet-content {
  visibility: hidden !important;
}

.ferry-mini-header {
  display: none;
  padding: 12px 18px;
  background: var(--accent-primary);
  color: #ffffff;
  border-radius: 22px 22px 0 0;
  cursor: pointer;
  align-items: center;
  gap: 10px;
  justify-content: space-between;
  min-height: 66px;
}

[data-theme="dark"] .ferry-mini-header {
  background: #10b981;
  color: #0a1a12;
}

.ferry-bottom-sheet.minimized .ferry-mini-header {
  display: flex !important;
}

.ferry-mini-icon {
  font-size: 24px;
}

.ferry-mini-info {
  flex: 1;
  min-width: 0;
}

.ferry-mini-title {
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.3px;
  opacity: 0.9;
}

.ferry-mini-route {
  font-size: 13px;
  font-weight: 800;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ferry-mini-toggle {
  background: rgba(255, 255, 255, 0.2);
  border: 1.5px solid rgba(255, 255, 255, 0.4);
  color: inherit;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  font-size: 16px;
  font-weight: 900;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

[data-theme="dark"] .ferry-mini-toggle {
  background: rgba(10, 26, 18, 0.15);
  border-color: rgba(10, 26, 18, 0.3);
}


/* ═══════════════════════════════════════════════════════════════
   PATCH v37 — FIX NAV BUTTONS + POSISI
   ═══════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────
   A. NAV RECENTER — HANYA MUNCUL SAAT CLASS .visible
   ───────────────────────────────────────────────────────────── */

.btn-nav-recenter {
  display: none !important;
  visibility: hidden !important;
  /* Pastikan posisi tetap benar */
  position: fixed !important;
  bottom: 92px !important;
  right: 14px !important;
  top: auto !important;
  left: auto !important;
  z-index: 2600 !important;
}

.btn-nav-recenter.visible {
  display: flex !important;
  visibility: visible !important;
}

/* ─────────────────────────────────────────────────────────────
   B. NAV CLOSE ROUND — HANYA MUNCUL SAAT NAV BOTTOM BAR AKTIF
   ───────────────────────────────────────────────────────────── */

.btn-nav-close-round {
  display: none !important;
  visibility: hidden !important;
}

.gm-nav-bottom-bar.active .btn-nav-close-round,
body.in-navigation .gm-nav-bottom-bar.active .btn-nav-close-round {
  display: flex !important;
  visibility: visible !important;
}

/* ─────────────────────────────────────────────────────────────
   C. NAV CLOSE MINI — HANYA MUNCUL SAAT PARENTNYA AKTIF
   ───────────────────────────────────────────────────────────── */

.btn-nav-close-mini {
  display: none !important;
  visibility: hidden !important;
}

/* Tampilkan hanya saat parent ber-class .active atau dalam banner aktif */
.gm-nav-top-banner.active .btn-nav-close-mini,
.gm-backtrack-banner .btn-nav-close-mini,
body.backtrack-active .gm-backtrack-banner .btn-nav-close-mini,
.gm-gpx-guide-banner .btn-nav-close-mini,
body.gpx-guide-active .gm-gpx-guide-banner .btn-nav-close-mini,
.tactical-ruler-banner.active .btn-nav-close-mini,
.tactical-ruler-card .btn-nav-close-mini {
  display: flex !important;
  visibility: visible !important;
}

/* ─────────────────────────────────────────────────────────────
   D. NAV TOP BANNER — FORCE HIDE DEFAULT
   ───────────────────────────────────────────────────────────── */

.gm-nav-top-banner {
  display: none !important;
  visibility: hidden !important;
}

.gm-nav-top-banner.active {
  display: flex !important;
  visibility: visible !important;
}

/* ─────────────────────────────────────────────────────────────
   E. NAV BOTTOM BAR — FORCE HIDE DEFAULT
   ───────────────────────────────────────────────────────────── */

.gm-nav-bottom-bar {
  display: none !important;
  visibility: hidden !important;
}

.gm-nav-bottom-bar.active {
  display: flex !important;
  visibility: visible !important;
}

/* ─────────────────────────────────────────────────────────────
   F. Z-INDEX GUARANTEE — NAV BANNERS HARUS DI ATAS TOMBOL
   Saat navigasi aktif:
   - nav top banner   : z-index 3000
   - nav bottom bar   : z-index 3000
   - btn nav-recenter : z-index 2600 (di bawah banner)
   ═══════════════════════════════════════════════════════════ */

.gm-nav-top-banner.active {
  z-index: 3000 !important;
}

.gm-nav-bottom-bar.active {
  z-index: 3000 !important;
}

.btn-nav-recenter {
  z-index: 2600 !important;
}

/* Pastikan tombol recenter tidak menutupi bottom bar */
body.in-navigation .btn-nav-recenter {
  bottom: 100px !important;
  right: 16px !important;
}

/* Pastikan bottom bar tidak tertutup tombol */
body.in-navigation .gm-nav-bottom-bar {
  z-index: 3100 !important;
}


/* ═══════════════════════════════════════════════════════════════
   PATCH v38 — REPOSISI vConsole & SALIN LOG (NO AUTO-HIDE)
   ═══════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────
   A. SALIN LOG — Icon Kecil, Kiri Atas Bawah Search Bar
   ───────────────────────────────────────────────────────────── */

#btnCopyDebugKanuragan {
  /* Pastikan posisi fixed & tidak berubah */
  position: fixed !important;
  top: 72px !important;
  left: 12px !important;
  right: auto !important;
  bottom: auto !important;
  width: auto !important;
  height: auto !important;
  /* Tampilan konsisten */
  background: rgba(16, 185, 129, 0.88) !important;
  color: #ffffff !important;
  padding: 6px 12px !important;
  border-radius: 50px !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  border: 1.5px solid rgba(255, 255, 255, 0.5) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25),
              0 0 0 3px rgba(16, 185, 129, 0.1) !important;
  cursor: pointer !important;
  transition: transform 0.15s ease, background 0.2s ease !important;
  backdrop-filter: blur(8px) !important;
  z-index: 1000 !important;
  /* Biar rapi */
  line-height: 1 !important;
  letter-spacing: 0.3px !important;
}

#btnCopyDebugKanuragan:active {
  transform: scale(0.92) !important;
  background: #059669 !important;
}

#btnCopyDebugKanuragan:hover {
  background: rgba(16, 185, 129, 1) !important;
}

/* Di HP kecil, pastikan tidak terlalu lebar */
@media (max-width: 359px) {
  #btnCopyDebugKanuragan {
    top: 68px !important;
    left: 8px !important;
    font-size: 10px !important;
    padding: 5px 10px !important;
  }
}

/* Di desktop, kecilkan */
@media (min-width: 768px) {
  #btnCopyDebugKanuragan {
    top: 80px !important;
    left: 24px !important;
    font-size: 11px !important;
    padding: 6px 12px !important;
  }
}

/* ─────────────────────────────────────────────────────────────
   B. vCONSOLE — KIRI BAWAH (Backup CSS, karena inline di head)
   ───────────────────────────────────────────────────────────── */

#__vconsole .vc-switch {
  /* Posisi default: kiri bawah */
  right: auto !important;
  left: 12px !important;
  bottom: 130px !important;
  top: auto !important;
}

/* Saat mode navigasi aktif — geser ke atas */
body.in-navigation #__vconsole .vc-switch {
  bottom: 180px !important;
}

/* Saat backtrack aktif — geser ke atas */
body.backtrack-active #__vconsole .vc-switch {
  bottom: 180px !important;
}

/* Saat place card aktif — geser ke atas */
body:has(.place-card.active) #__vconsole .vc-switch {
  bottom: 200px !important;
}

/* Saat route sheet aktif */
body.route-sheet-active #__vconsole .vc-switch {
  bottom: 260px !important;
}

/* ─────────────────────────────────────────────────────────────
   C. CEGAH TABRAKAN DENGAN FAB DOCK (KANAN BAWAH)
   vConsole & Salin Log di kiri, FAB di kanan → tidak tabrakan
   ───────────────────────────────────────────────────────────── */

/* Pastikan vConsole switch tidak menutupi FAB di kanan */
#__vconsole .vc-switch {
  max-width: 60px !important;
}


/* ═══════════════════════════════════════════════════════════════
   PATCH v39 — TOAST WIDTH FIX (SPESIFISITAS MAKSIMAL)
   Target: toast auto-width, tidak wrap berlebihan
   ═══════════════════════════════════════════════════════════════ */

/* Gunakan DOUBLE CLASS untuk specificity > override sebelumnya */
body .tactical-toast.tactical-toast.tactical-toast.tactical-toast {
  /* Position */
  position: fixed !important;
  top: 70px !important;
  left: 50% !important;
  transform: translateX(-50%) translateY(-16px) scale(0.96) !important;

  /* WIDTH — Auto-size dengan min/max */
  min-width: 320px !important;
  max-width: min(480px, 92vw) !important;
  width: auto !important;

  /* Padding lega */
  padding: 14px 20px !important;

  /* Font readable */
  font-size: 14px !important;
  line-height: 1.5 !important;
  font-weight: 700 !important;
  letter-spacing: 0.1px !important;

  /* Layout flex */
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;

  /* Rounded & shadow */
  border-radius: 16px !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35),
              0 0 20px rgba(16, 185, 129, 0.15) !important;

  /* Text */
  text-align: left !important;
  word-break: break-word !important;
  overflow-wrap: break-word !important;

  /* Z-index */
  z-index: 999999 !important;

  /* Smooth animation */
  transition: opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Icon span (emoji) */
body .tactical-toast.tactical-toast.tactical-toast.tactical-toast > span:first-child {
  font-size: 20px !important;
  line-height: 1 !important;
  flex-shrink: 0 !important;
}

/* Message span */
body .tactical-toast.tactical-toast.tactical-toast.tactical-toast > span:last-child {
  flex: 1 !important;
  min-width: 0 !important;
  word-break: break-word !important;
  overflow-wrap: break-word !important;
  hyphens: auto !important;
}

/* LIGHT MODE */
html[data-theme="light"] body .tactical-toast.tactical-toast.tactical-toast.tactical-toast {
  background: #ffffff !important;
  color: #0a1a12 !important;
  border: 2px solid #065f46 !important;
}

/* DARK MODE */
html[data-theme="dark"] body .tactical-toast.tactical-toast.tactical-toast.tactical-toast {
  background: rgba(19, 26, 23, 0.98) !important;
  color: #e8f0eb !important;
  border: 2px solid #10b981 !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.7),
              0 0 24px rgba(16, 185, 129, 0.3) !important;
}

/* SHOW STATE */
body .tactical-toast.tactical-toast.tactical-toast.tactical-toast.show {
  opacity: 1 !important;
  transform: translateX(-50%) translateY(0) scale(1) !important;
}

/* HP KECIL (< 360px) */
@media (max-width: 359px) {
  body .tactical-toast.tactical-toast.tactical-toast.tactical-toast {
    min-width: 280px !important;
    max-width: 95vw !important;
    font-size: 13.5px !important;
    padding: 12px 16px !important;
    gap: 10px !important;
  }
  body .tactical-toast.tactical-toast.tactical-toast.tactical-toast > span:first-child {
    font-size: 18px !important;
  }
}

/* DESKTOP */
@media (min-width: 768px) {
  body .tactical-toast.tactical-toast.tactical-toast.tactical-toast {
    max-width: 420px !important;
    min-width: 280px !important;
    font-size: 15px !important;
  }
}


/* ═══════════════════════════════════════════════════════════════
   PATCH v41 — TOMBOL SALIN LOG (KANAN ATAS, JELAS)
   ═══════════════════════════════════════════════════════════════ */

#btnCopyDebugKanuragan {
  position: fixed !important;
  top: 12px !important;
  right: 12px !important;
  z-index: 9999999 !important;
  padding: 10px 18px !important;
  background: #10b981 !important;
  color: #ffffff !important;
  border: 2px solid #ffffff !important;
  border-radius: 50px !important;
  font-weight: 900 !important;
  font-size: 13px !important;
  cursor: pointer !important;
  box-shadow: 0 4px 16px rgba(16, 185, 129, 0.5),
              0 0 0 4px rgba(16, 185, 129, 0.15) !important;
  transition: all 0.2s ease !important;
  letter-spacing: 0.3px !important;
}

#btnCopyDebugKanuragan:active {
  transform: scale(0.95) !important;
  background: #059669 !important;
}

#btnCopyDebugKanuragan:hover {
  background: #059669 !important;
  transform: translateY(-2px) !important;
}

/* Di HP kecil */
@media (max-width: 359px) {
  #btnCopyDebugKanuragan {
    padding: 8px 14px !important;
    font-size: 11.5px !important;
  }
}

/* Di desktop */
@media (min-width: 768px) {
  #btnCopyDebugKanuragan {
    top: 24px !important;
    right: 24px !important;
    padding: 12px 20px !important;
    font-size: 14px !important;
  }
}


/* ═══════════════════════════════════════════════════════════════
   PATCH v42 — SALIN LOG: POSISI KIRI BAWAH, DI ATAS VCONSOLE
   ═══════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────
   A. TOMBOL SALIN LOG — KIRI BAWAH, KECIL, DI ATAS VCONSOLE
   ───────────────────────────────────────────────────────────── */

#btnCopyDebugKanuragan {
  position: fixed !important;
  bottom: 180px !important;    /* Di atas vConsole (yang di bottom 120px) */
  left: 12px !important;
  right: auto !important;
  top: auto !important;
  z-index: 99999 !important;
  padding: 8px 14px !important;
  background: #10b981 !important;
  color: #ffffff !important;
  border: 2px solid #ffffff !important;
  border-radius: 50px !important;
  font-weight: 900 !important;
  font-size: 11.5px !important;
  cursor: pointer !important;
  box-shadow: 0 3px 10px rgba(16, 185, 129, 0.5),
              0 0 0 3px rgba(16, 185, 129, 0.15) !important;
  transition: all 0.2s ease !important;
  letter-spacing: 0.2px !important;
  line-height: 1 !important;
}

#btnCopyDebugKanuragan:active {
  transform: scale(0.93) !important;
  background: #059669 !important;
}

/* ─────────────────────────────────────────────────────────────
   B. VCONSOLE SWITCH — KIRI BAWAH (tetap seperti sekarang)
   ───────────────────────────────────────────────────────────── */

#__vconsole .vc-switch {
  right: auto !important;
  left: 12px !important;
  top: auto !important;
  bottom: 120px !important;
  z-index: 99998 !important;
}

/* ─────────────────────────────────────────────────────────────
   C. RESPONSIF — HP KECIL & BESAR
   ───────────────────────────────────────────────────────────── */

@media (max-width: 359px) {
  #btnCopyDebugKanuragan {
    bottom: 170px !important;
    left: 8px !important;
    padding: 7px 12px !important;
    font-size: 10.5px !important;
  }
  #__vconsole .vc-switch {
    bottom: 115px !important;
    left: 8px !important;
  }
}

@media (min-width: 768px) {
  #btnCopyDebugKanuragan {
    bottom: 200px !important;
    left: 24px !important;
    padding: 10px 16px !important;
    font-size: 12px !important;
  }
  #__vconsole .vc-switch {
    bottom: 140px !important;
    left: 24px !important;
  }
}

/* ─────────────────────────────────────────────────────────────
   D. SAAT ADA RUTE / NAVIGASI — NAIKKAN SEDIKIT
   ───────────────────────────────────────────────────────────── */

body.in-navigation #btnCopyDebugKanuragan,
body.route-sheet-active #btnCopyDebugKanuragan {
  bottom: 240px !important;
}

body.in-navigation #__vconsole .vc-switch,
body.route-sheet-active #__vconsole .vc-switch {
  bottom: 180px !important;
}


/* ═══════════════════════════════════════════════════════════════
   PATCH v47 — CSS GUARD: SEMBUNYIKAN MARKER DI (0,0)
   Sebagai jaring aman kalau JS reposition gagal
   ═══════════════════════════════════════════════════════════════ */

/* Sembunyikan marker ferry yang nyangkut di top-left container */
.maplibregl-marker[style*="transform: translate(0px, 0px)"][class*="ferry"],
.maplibregl-marker[style*="translate(0, 0)"][class*="ferry"] {
  display: none !important;
  visibility: hidden !important;
}

/* Fallback: sembunyikan marker ferry yang berada di dalam maplibregl-marker container (0,0) */
.maplibregl-marker > .ferry-ship-marker {
  /* Default OK, hanya sembunyikan jika parent di top-left */
}

/* Debug: outline marker ferry yang visible */
.ferry-ship-marker {
  /* Pastikan terlihat & tidak terpotong */
  overflow: visible !important;
  z-index: 5 !important;
}


/* ═══════════════════════════════════════════════════════════════
   PATCH v48 — HTML OVERLAY MARKER FERRY
   Posisi di-set via JS, styling di CSS
   ═══════════════════════════════════════════════════════════════ */

#ferryShipOverlay {
  position: absolute !important;
  left: 0;
  top: 0;
  transform: translate(-50%, -50%) !important;
  z-index: 100 !important;
  pointer-events: auto !important;
  cursor: pointer !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  transition: none !important;
  animation: ferryBoatBob 3s ease-in-out infinite;
}

@keyframes ferryBoatBob {
  0%, 100% { transform: translate(-50%, -50%) translateY(0px); }
  50% { transform: translate(-50%, -50%) translateY(-4px); }
}

#ferryShipOverlay .ferry-ship-icon {
  width: 64px !important;
  height: 64px !important;
  border-radius: 50% !important;
  background: #ffffff !important;
  border: 4px solid var(--accent-primary) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 36px !important;
  box-shadow: 0 6px 20px rgba(6, 95, 70, 0.55),
              0 0 0 5px rgba(6, 95, 70, 0.15),
              0 0 20px rgba(16, 185, 129, 0.4) !important;
  animation: ferryPulse 2s infinite ease-in-out !important;
}

@keyframes ferryPulse {
  0%, 100% { box-shadow: 0 6px 20px rgba(6, 95, 70, 0.55), 0 0 0 5px rgba(6, 95, 70, 0.15), 0 0 20px rgba(16, 185, 129, 0.4); }
  50% { box-shadow: 0 6px 20px rgba(6, 95, 70, 0.55), 0 0 0 5px rgba(6, 95, 70, 0.15), 0 0 30px rgba(16, 185, 129, 0.7); }
}

[data-theme="dark"] #ferryShipOverlay .ferry-ship-icon {
  background: #131a17 !important;
  border-color: #34d399 !important;
  box-shadow: 0 4px 16px rgba(16, 185, 129, 0.6),
              0 0 0 4px rgba(16, 185, 129, 0.18) !important;
}

#ferryShipOverlay .ferry-ship-label {
  background: var(--accent-primary) !important;
  color: #ffffff !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  padding: 5px 12px !important;
  border-radius: 12px !important;
  margin-top: 6px !important;
  letter-spacing: 0.6px !important;
  white-space: nowrap !important;
  border: 2px solid #ffffff !important;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.35) !important;
}

[data-theme="dark"] #ferryShipOverlay .ferry-ship-label {
  background: #10b981 !important;
  border-color: #34d399 !important;
  color: #0a1a12 !important;
}


/* ═══════════════════════════════════════════════════════════════
   PATCH v49 — POLISH VCONSOLE
   ═══════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────
   A. TOMBOL SALIN LOG — KANAN ATAS BERSIH
   ───────────────────────────────────────────────────────────── */

html body #btnCopyDebugKanuragan,
body #btnCopyDebugKanuragan {
  position: fixed !important;
  top: 12px !important;
  right: 12px !important;
  bottom: auto !important;
  left: auto !important;
  z-index: 99998 !important;

  /* Tampilan rapi */
  padding: 7px 12px !important;
  background: rgba(16, 185, 129, 0.92) !important;
  color: #ffffff !important;
  border: 1.5px solid rgba(255, 255, 255, 0.6) !important;
  border-radius: 20px !important;
  font-weight: 800 !important;
  font-size: 11px !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  cursor: pointer !important;

  /* Shadow lembut */
  box-shadow: 0 2px 8px rgba(6, 95, 70, 0.3) !important;

  /* Layout */
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  white-space: nowrap !important;

  /* Lebar minimal */
  min-width: 90px !important;
  max-width: 130px !important;
  height: auto !important;
  line-height: 1 !important;

  /* Animasi */
  transition: transform 0.15s ease, background 0.2s ease !important;
  backdrop-filter: blur(8px) !important;
}

html body #btnCopyDebugKanuragan:hover,
body #btnCopyDebugKanuragan:hover {
  background: #059669 !important;
  transform: translateY(-1px);
}

html body #btnCopyDebugKanuragan:active,
body #btnCopyDebugKanuragan:active {
  transform: scale(0.95);
}

/* ─────────────────────────────────────────────────────────────
   B. TOMBOL VCONSOLE (SWITCH) — LEBIH RAPI
   ───────────────────────────────────────────────────────────── */

#__vconsole .vc-switch {
  position: fixed !important;
  bottom: 20px !important;
  left: 12px !important;
  top: auto !important;
  right: auto !important;
  z-index: 99999 !important;

  /* Tampilan rapi */
  padding: 8px 14px !important;
  background: #10b981 !important;
  color: #ffffff !important;
  border: 2px solid #ffffff !important;
  border-radius: 20px !important;
  font-weight: 800 !important;
  font-size: 12px !important;
  letter-spacing: 0.3px !important;

  box-shadow: 0 3px 10px rgba(16, 185, 129, 0.5) !important;

  /* Ukuran tetap */
  width: auto !important;
  min-width: 80px !important;
  max-width: 100px !important;
  height: 36px !important;
  line-height: 1 !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  transition: transform 0.15s ease, background 0.2s ease !important;
}

#__vconsole .vc-switch:active {
  transform: scale(0.93) !important;
  background: #059669 !important;
}

/* ─────────────────────────────────────────────────────────────
   C. PANEL VCONSOLE — RAPI
   ───────────────────────────────────────────────────────────── */

#__vconsole .vc-panel {
  /* Panel dibuka dari kiri */
  left: 0 !important;
  right: auto !important;
}

/* ─────────────────────────────────────────────────────────────
   D. TOMBOL "HIDE" DI DALAM VCONSOLE — TAMBAH VIA JS
   ───────────────────────────────────────────────────────────── */

/* Styling tombol hide yang kita tambahkan via JS */
#vconsoleHideBtn {
  position: fixed !important;
  bottom: 20px !important;
  right: 20px !important;
  z-index: 9999999 !important;
  padding: 10px 16px !important;
  background: #ef4444 !important;
  color: #ffffff !important;
  border: 2px solid #ffffff !important;
  border-radius: 20px !important;
  font-weight: 900 !important;
  font-size: 13px !important;
  cursor: pointer !important;
  box-shadow: 0 3px 10px rgba(239, 68, 68, 0.5) !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  transition: transform 0.15s ease !important;
  letter-spacing: 0.3px !important;
}

#vconsoleHideBtn:active {
  transform: scale(0.93) !important;
}

/* ─────────────────────────────────────────────────────────────
   E. RESPONSIF
   ───────────────────────────────────────────────────────────── */

@media (max-width: 359px) {
  html body #btnCopyDebugKanuragan,
  body #btnCopyDebugKanuragan {
    padding: 6px 10px !important;
    font-size: 10px !important;
    min-width: 80px !important;
  }
  #__vconsole .vc-switch {
    padding: 7px 12px !important;
    font-size: 11px !important;
    height: 32px !important;
  }
}

@media (min-width: 768px) {
  html body #btnCopyDebugKanuragan,
  body #btnCopyDebugKanuragan {
    top: 20px !important;
    right: 20px !important;
    padding: 9px 16px !important;
    font-size: 12px !important;
  }
  #__vconsole .vc-switch {
    bottom: 24px !important;
    left: 24px !important;
  }
}


/* ═══════════════════════════════════════════════════════════════
   PATCH v51 — SALIN LOG (ATAS VCONSOLE) + STYLING
   ═══════════════════════════════════════════════════════════════ */

#btnCopyDebugKanuragan {
  position: fixed !important;
  bottom: 70px !important;
  left: 12px !important;
  right: auto !important;
  top: auto !important;
  z-index: 99999 !important;

  padding: 8px 14px !important;
  background: #10b981 !important;
  color: #ffffff !important;
  border: 2px solid #ffffff !important;
  border-radius: 20px !important;
  font-weight: 800 !important;
  font-size: 12px !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  cursor: pointer !important;
  box-shadow: 0 3px 10px rgba(16, 185, 129, 0.5) !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  white-space: nowrap !important;
  width: auto !important;
  height: auto !important;
  line-height: 1 !important;

  transition: transform 0.15s ease, background 0.2s ease !important;
}

#btnCopyDebugKanuragan:active {
  transform: scale(0.95) !important;
  background: #059669 !important;
}

#__vconsole .vc-switch {
  position: fixed !important;
  bottom: 20px !important;
  left: 12px !important;
  top: auto !important;
  right: auto !important;
  z-index: 99999 !important;
  padding: 8px 14px !important;
  background: #10b981 !important;
  color: #ffffff !important;
  border: 2px solid #ffffff !important;
  border-radius: 20px !important;
  font-weight: 800 !important;
  font-size: 12px !important;
  box-shadow: 0 3px 10px rgba(16, 185, 129, 0.5) !important;
  height: 36px !important;
  line-height: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Tombol Hide di toolbar vConsole */
/* KMAP-PATCH-M2: #vconsoleHideBtnInline dihapus */
@media (max-width: 359px) {
  #btnCopyDebugKanuragan {
    bottom: 62px !important;
    left: 8px !important;
    padding: 7px 12px !important;
    font-size: 11px !important;
  }
  #__vconsole .vc-switch {
    bottom: 16px !important;
    left: 8px !important;
    height: 34px !important;
  }
}


/* ═══════════════════════════════════════════════════════════════
   PATCH v52 — FIX POSISI SALIN LOG + HIDE VCONSOLE
   ═══════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────
   A. SALIN LOG — KIRI BAWAH, DI ATAS VCONSOLE
   Gunakan specificity tinggi untuk mengalahkan CSS lama
   ───────────────────────────────────────────────────────────── */

html body #btnCopyDebugKanuragan,
body #btnCopyDebugKanuragan,
#btnCopyDebugKanuragan,
button#btnCopyDebugKanuragan {
  position: fixed !important;
  bottom: 70px !important;
  left: 12px !important;
  right: auto !important;
  top: auto !important;
  z-index: 99999 !important;

  padding: 8px 14px !important;
  background: #10b981 !important;
  color: #ffffff !important;
  border: 2px solid #ffffff !important;
  border-radius: 20px !important;
  font-weight: 800 !important;
  font-size: 12px !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  cursor: pointer !important;
  box-shadow: 0 3px 10px rgba(16, 185, 129, 0.5) !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  white-space: nowrap !important;

  width: auto !important;
  height: auto !important;
  min-width: auto !important;
  max-width: none !important;
  line-height: 1 !important;

  transition: transform 0.15s ease, background 0.2s ease !important;
}

html body #btnCopyDebugKanuragan:active,
body #btnCopyDebugKanuragan:active {
  transform: scale(0.95) !important;
  background: #059669 !important;
}

/* ─────────────────────────────────────────────────────────────
   B. VCONSOLE SWITCH — KIRI BAWAH (TETAP)
   ───────────────────────────────────────────────────────────── */

#__vconsole .vc-switch {
  position: fixed !important;
  bottom: 20px !important;
  left: 12px !important;
  top: auto !important;
  right: auto !important;
  z-index: 99999 !important;
  padding: 8px 14px !important;
  background: #10b981 !important;
  color: #ffffff !important;
  border: 2px solid #ffffff !important;
  border-radius: 20px !important;
  font-weight: 800 !important;
  font-size: 12px !important;
  box-shadow: 0 3px 10px rgba(16, 185, 129, 0.5) !important;
  height: 36px !important;
  line-height: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* ─────────────────────────────────────────────────────────────
   C. TOMBOL HIDE DI DALAM PANEL — RAPIKAN
   ───────────────────────────────────────────────────────────── */

/* KMAP-PATCH-M2: #vconsoleHideBtnInline dihapus */
/* Paksa tombol inline agar sejajar dengan OK */
#__vconsole .vc-cmd-btn,
/* KMAP-PATCH-M2: #vconsoleHideBtnInline dihapus */
/* ─────────────────────────────────────────────────────────────
   D. RESPONSIF
   ───────────────────────────────────────────────────────────── */

@media (max-width: 359px) {
  html body #btnCopyDebugKanuragan,
  body #btnCopyDebugKanuragan {
    bottom: 62px !important;
    left: 8px !important;
    padding: 7px 12px !important;
    font-size: 11px !important;
  }
  #__vconsole .vc-switch {
    bottom: 16px !important;
    left: 8px !important;
    height: 34px !important;
  }
}

@media (min-width: 768px) {
  html body #btnCopyDebugKanuragan,
  body #btnCopyDebugKanuragan {
    bottom: 80px !important;
    left: 24px !important;
    padding: 10px 16px !important;
    font-size: 13px !important;
  }
  #__vconsole .vc-switch {
    bottom: 24px !important;
    left: 24px !important;
  }
}


/* ═══════════════════════════════════════════════════════════════
   PATCH v53 — TUKAR POSISI: SALIN LOG ATAS, VCONSOLE BAWAH
   ═══════════════════════════════════════════════════════════════ */

/* SALIN LOG — di ATAS (bottom: 70px) */
html body #btnCopyDebugKanuragan,
body #btnCopyDebugKanuragan,
#btnCopyDebugKanuragan {
  bottom: 70px !important;
  left: 12px !important;
  right: auto !important;
  top: auto !important;
}

/* VCONSOLE SWITCH — di BAWAH (bottom: 20px) */
#__vconsole .vc-switch {
  bottom: 20px !important;
  left: 12px !important;
  top: auto !important;
  right: auto !important;
}


/* ═══════════════════════════════════════════════════════════════
   PATCH v57 — LOADING OVERLAY UNTUK VECTOR PETA
   ═══════════════════════════════════════════════════════════════ */

#mapLoadingOverlay {
  position: fixed !important;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: var(--bg-app);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  z-index: 5000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease-out;
}

#mapLoadingOverlay.active {
  opacity: 1;
  pointer-events: auto;
}

.map-loading-spinner {
  width: 48px;
  height: 48px;
  border: 4px solid var(--border-ui);
  border-top-color: var(--accent-primary);
  border-radius: 50%;
  animation: mapLoadingSpin 0.8s linear infinite;
}

@keyframes mapLoadingSpin {
  to { transform: rotate(360deg); }
}

.map-loading-text {
  font-size: 14px;
  font-weight: 800;
  color: var(--text-main);
  letter-spacing: 0.3px;
}


/* ═══════════════════════════════════════════════════════════════
   PATCH v59 — LOADING OVERLAY OPTIMASI
   ═══════════════════════════════════════════════════════════════ */

#mapLoadingOverlay {
  position: fixed !important;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: var(--bg-app);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease-out;
}

#mapLoadingOverlay.active {
  opacity: 1;
  pointer-events: auto;
}

.map-loading-spinner {
  width: 44px;
  height: 44px;
  border: 4px solid var(--border-ui);
  border-top-color: var(--accent-primary);
  border-radius: 50%;
  animation: mapLoadingSpin 0.8s linear infinite;
  will-change: transform;
}

@keyframes mapLoadingSpin {
  to { transform: rotate(360deg); }
}

.map-loading-text {
  font-size: 14px;
  font-weight: 800;
  color: var(--text-main);
  letter-spacing: 0.3px;
}


/* ═══════════════════════════════════════════════════════════════
   PATCH v62 — OVERLAY Z-INDEX MAKSIMAL
   ═══════════════════════════════════════════════════════════════ */

#mapLoadingOverlay {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  background: var(--bg-app) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 16px !important;
  z-index: 2147483646 !important;
  /* PATCH v62: tanpa transisi masuk */
  transition: none !important;
}

#mapLoadingOverlay[style*="opacity: 0"] {
  transition: opacity 0.2s ease-out !important;
}

.map-loading-spinner {
  width: 48px;
  height: 48px;
  border: 4px solid var(--border-ui);
  border-top-color: var(--accent-primary);
  border-radius: 50%;
  animation: mapLoadingSpin 0.8s linear infinite;
  will-change: transform;
}

@keyframes mapLoadingSpin {
  to { transform: rotate(360deg); }
}

.map-loading-text {
  font-size: 14px;
  font-weight: 800;
  color: var(--text-main);
  letter-spacing: 0.3px;
}


/* ═══════════════════════════════════════════════════════════════
   PATCH FINAL v80 — CLEANUP TOTAL & DESIGN SYSTEM UNIFIED
   Prinsip: 1 komponen = 1 definisi. Kontras tinggi. Rapi.
   ═══════════════════════════════════════════════════════════════ */

:root {
  --bg-app: #eef2ee;
  --bg-card: #ffffff;
  --bg-card-solid: #ffffff;
  --border-ui: #cbd5e1;
  --text-main: #0a1a12;
  --text-sub: #334155;
  --accent-primary: #065f46;
  --accent-primary-hover: #047857;
  --accent-primary-soft: rgba(6, 95, 70, 0.08);
  --accent-amber: #b45309;
  --accent-whatsapp: #25D366;
  --shadow-card: 0 2px 8px rgba(6, 95, 70, 0.08);
  --gradient-license: linear-gradient(145deg, #064e3b, #047857);
}

[data-theme="dark"] {
  --bg-app: #0a0f0d;
  --bg-card: #131a17;
  --bg-card-solid: #131a17;
  --border-ui: #334155;
  --text-main: #e8f0eb;
  --text-sub: #94a3b8;
  --accent-primary: #10b981;
  --accent-primary-hover: #34d399;
  --accent-primary-soft: rgba(16, 185, 129, 0.12);
  --accent-amber: #fbbf24;
  --accent-whatsapp: #25D366;
  --shadow-card: 0 2px 12px rgba(0, 0, 0, 0.5);
  --gradient-license: linear-gradient(145deg, #065f46, #10b981);
}

/* ─── LICENSE BOX ─── */
.license-box {
  background: var(--gradient-license) !important;
  border: 2px solid var(--accent-primary) !important;
  border-radius: 16px !important;
  padding: 20px !important;
  margin-bottom: 20px !important;
  box-shadow: 0 8px 24px rgba(6, 78, 59, 0.35) !important;
  color: #ffffff !important;
}

[data-theme="dark"] .license-box {
  border-color: var(--accent-primary-hover) !important;
}

.license-box .license-status {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  padding-bottom: 14px !important;
  margin-bottom: 16px !important;
  border-bottom: 1.5px dashed rgba(255, 255, 255, 0.3) !important;
}

.license-box .license-status > span:first-child,
.license-box .license-status #licStatusBadge {
  color: #ffffff !important;
  font-weight: 900 !important;
}

.license-box .license-input {
  background: #ffffff !important;
  border: 2px solid #ffffff !important;
  color: #0f172a !important;
  font-weight: 800 !important;
  font-size: 14.5px !important;
  padding: 12px 16px !important;
  border-radius: 10px !important;
  font-family: monospace !important;
  text-transform: uppercase !important;
  width: 100% !important;
  outline: none !important;
}

.license-box .license-input::placeholder {
  color: #94a3b8 !important;
  font-weight: 600 !important;
}

.license-box .btn-activate {
  background: #ffffff !important;
  color: #065f46 !important;
  border: 2px solid #ffffff !important;
  font-weight: 900 !important;
  font-size: 14.5px !important;
  padding: 12px 18px !important;
  border-radius: 10px !important;
  cursor: pointer !important;
}

.license-box .btn-activate:active {
  transform: scale(0.96) !important;
}

/* ─── WA ORDER ─── */
.wa-order-section {
  margin-top: 14px !important;
  padding-top: 10px !important;
  border-top: 1.5px dashed rgba(255, 255, 255, 0.3) !important;
}

.license-box .btn-wa-order-toggle,
.license-box .btn-wa-order-subtle {
  background: #ffffff !important;
  border: 2px solid var(--accent-whatsapp) !important;
  color: #065f46 !important;
  font-size: 13.5px !important;
  font-weight: 900 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: 100% !important;
  padding: 14px 18px !important;
  border-radius: 12px !important;
  cursor: pointer !important;
  margin-top: 12px !important;
  box-shadow: 0 3px 10px rgba(37, 211, 102, 0.25) !important;
  text-shadow: none !important;
  text-decoration: none !important;
}

.license-box .wa-order-drawer {
  background: rgba(0, 0, 0, 0.18) !important;
  border: 1.5px dashed rgba(255, 255, 255, 0.35) !important;
  border-radius: 14px !important;
  padding: 18px !important;
  margin-top: 16px !important;
}

.license-box .wa-order-drawer .wa-input-group {
  margin-bottom: 14px !important;
}

.license-box .wa-order-drawer .wa-input-group label {
  display: block !important;
  font-size: 13.5px !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  margin-bottom: 8px !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6) !important;
  background: transparent !important;
  padding: 0 !important;
  border: none !important;
}

.license-box .wa-order-drawer .wa-input-field {
  background: #ffffff !important;
  border: 2px solid var(--accent-primary) !important;
  color: #0f172a !important;
  font-size: 14.5px !important;
  font-weight: 700 !important;
  padding: 12px 14px !important;
  border-radius: 10px !important;
  width: 100% !important;
  outline: none !important;
}

.license-box .wa-order-drawer .wa-input-field::placeholder {
  color: #94a3b8 !important;
  font-weight: 600 !important;
  font-size: 13.5px !important;
}

.license-box .wa-order-drawer .wa-order-note,
.license-box .wa-order-note,
.wa-order-note {
  color: #fef3c7 !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  line-height: 1.6 !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6) !important;
  background: transparent !important;
  padding: 12px 0 !important;
  border: none !important;
  margin: 14px 0 8px 0 !important;
}

.license-box .wa-order-note::before,
.wa-order-note::before {
  content: none !important;
  display: none !important;
}

.license-box .btn-wa-submit {
  background: var(--accent-whatsapp) !important;
  color: #ffffff !important;
  border: 2.5px solid #ffffff !important;
  border-radius: 12px !important;
  padding: 14px 18px !important;
  font-size: 14.5px !important;
  font-weight: 900 !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: 100% !important;
  box-shadow: 0 4px 14px rgba(37, 211, 102, 0.4) !important;
  margin-top: 14px !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
}

/* ─── PACK CARD ─── */
.pack-item-card {
  background: var(--bg-card) !important;
  border: 1.5px solid var(--border-ui) !important;
  border-radius: 12px !important;
  padding: 14px 16px !important;
  margin-bottom: 12px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  box-shadow: var(--shadow-card) !important;
}

[data-theme="light"] .pack-item-card {
  background: #ffffff !important;
  border-color: #94a3b8 !important;
}

.pack-title {
  font-size: 16px !important;
  font-weight: 800 !important;
  color: var(--text-main) !important;
}

[data-theme="light"] .pack-title {
  color: #0f172a !important;
}

.pack-sub {
  font-size: 12.5px !important;
  font-weight: 600 !important;
  color: var(--text-sub) !important;
  margin-top: 4px !important;
}

[data-theme="light"] .pack-sub {
  color: #334155 !important;
}

.pack-btn-group {
  display: flex !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
  justify-content: flex-end !important;
  align-items: center !important;
}

.btn-pack-act {
  padding: 8px 16px !important;
  min-height: 34px !important;
  border-radius: 16px !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: none !important;
  cursor: pointer !important;
  white-space: nowrap !important;
}

.btn-pack-act.btn-use.active {
  background: #047857 !important;
  color: #ffffff !important;
}

[data-theme="dark"] .btn-pack-act.btn-use.active {
  background: #10b981 !important;
  color: #0a1a12 !important;
}

.btn-pack-act.btn-mutakhir {
  background: #64748b !important;
  color: #ffffff !important;
}

.btn-pack-act.btn-download {
  background: #c2410c !important;
  color: #ffffff !important;
  border: 2px solid #ffffff !important;
}

[data-theme="dark"] .btn-pack-act.btn-download {
  background: #ea580c !important;
}

.btn-pack-act.btn-update {
  background: #d97706 !important;
  color: #ffffff !important;
}

[data-theme="dark"] .btn-pack-act.btn-update {
  background: #f59e0b !important;
  color: #0a1a12 !important;
}

.btn-pack-act.btn-del {
  background: #ffffff !important;
  border: 2px solid #dc2626 !important;
  color: #b91c1c !important;
}

[data-theme="dark"] .btn-pack-act.btn-del {
  background: #1e293b !important;
  border-color: #ef4444 !important;
  color: #fca5a5 !important;
}

/* ─── SEARCH BAR ─── */


.gm-search-input {
  color: var(--text-main) !important;
  font-size: 16.5px !important;
  font-weight: 700 !important;
}

.gm-search-input::placeholder {
  color: var(--text-sub) !important;
  font-size: 15.5px !important;
  font-weight: 600 !important;
}

/* ─── MODAL ─── */
.modal-head h3 {
  color: var(--accent-primary) !important;
  font-size: 16px !important;
  font-weight: 800 !important;
}

.modal-content {
  color: var(--text-main) !important;
  font-size: 14.5px !important;
  line-height: 1.7 !important;
}

/* ─── CHIP TELEMETRY ─── */
.gm-chip {
  background: var(--bg-card) !important;
  border: 1.5px solid var(--border-ui) !important;
  border-radius: 16px !important;
  padding: 5px 11px !important;
}

.gm-chip .chip-lbl {
  color: var(--text-sub) !important;
  font-size: 11.5px !important;
  font-weight: 800 !important;
}

.gm-chip .chip-val {
  color: var(--text-main) !important;
  font-size: 14px !important;
  font-weight: 900 !important;
}

[data-theme="dark"] .gm-chip .chip-val {
  color: var(--accent-primary) !important;
}

/* ─── WATERMARK ─── */
.gm-watermark-text {
  color: var(--text-main) !important;
  font-weight: 900 !important;
}

[data-theme="dark"] .gm-watermark-text {
  color: #ffffff !important;
}

/* ─── FAB ROUTE ─── */
.gm-fab.fab-directions {
  background: var(--accent-primary) !important;
  color: #ffffff !important;
  border: 2.5px solid #ffffff !important;
}

[data-theme="dark"] .gm-fab.fab-directions {
  border: none !important;
}

.gm-fab.fab-directions svg,
.gm-fab.fab-directions svg * {
  fill: #ffffff !important;
}

/* ─── PLACE CARD ROUTE ─── */
.btn-place-action.btn-route {
  background: var(--accent-primary) !important;
  color: #ffffff !important;
  border: 2px solid #ffffff !important;
}

[data-theme="dark"] .btn-place-action.btn-route {
  border: none !important;
}

.btn-place-action.btn-route svg,
.btn-place-action.btn-route svg * {
  fill: #ffffff !important;
}


/* ═══════════════════════════════════════════════════════════════
   PATCH v81 — FIX LIGHT MODE BRANKAS + TOMBOL MUTAKHIR HIJAU
   Fix: 1) Kartu license pakai SOLID BACKGROUND (bukan gradient)
        2) Label putih terbaca di semua tema
        3) Tombol MUTAKHIR ganti biru → hijau teal
   ═══════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────
   A. KARTU LICENSE — BACKGROUND SOLID HIJAU ARMY
   Gunakan SOLID COLOR (bukan gradient) supaya PASTI render
   di semua browser HP. Gradient sering gagal di WebView Android.
   ───────────────────────────────────────────────────────────── */

/* LIGHT MODE — Hijau Army Terang */
html[data-theme="light"] .license-box,
[data-theme="light"] .license-box,
body[data-theme="light"] .license-box {
  background: #065f46 !important;   /* Solid hijau army — PASTI render */
  background-color: #065f46 !important;
  background-image: none !important; /* Buang gradient yang bikin masalah */
  border: 2px solid #10b981 !important;
  border-radius: 16px !important;
  padding: 20px !important;
  margin-bottom: 20px !important;
  box-shadow: 0 8px 24px rgba(6, 78, 59, 0.35) !important;
  color: #ffffff !important;
}

/* DARK MODE — Hijau Army Lebih Gelap */
html[data-theme="dark"] .license-box,
[data-theme="dark"] .license-box,
body[data-theme="dark"] .license-box {
  background: #064e3b !important;
  background-color: #064e3b !important;
  background-image: none !important;
  border: 2px solid #10b981 !important;
  border-radius: 16px !important;
  padding: 20px !important;
  margin-bottom: 20px !important;
  box-shadow: 0 8px 28px rgba(16, 185, 129, 0.4) !important;
  color: #ffffff !important;
}

/* Fallback tanpa data-theme (kalau JS belum load) */
.license-box {
  background: #065f46 !important;
  background-color: #065f46 !important;
  background-image: none !important;
  color: #ffffff !important;
}

/* ─────────────────────────────────────────────────────────────
   B. LABEL & TEKS DI DALAM KARTU LICENSE — PUTIH PASTI TERBACA
   ───────────────────────────────────────────────────────────── */

.license-box .license-status,
.license-box .license-status > span,
.license-box .license-status #licStatusBadge {
  color: #ffffff !important;
  font-weight: 900 !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5) !important;
}

.license-box .license-status {
  border-bottom: 1.5px dashed rgba(255, 255, 255, 0.4) !important;
  padding-bottom: 14px !important;
  margin-bottom: 16px !important;
}

/* ─────────────────────────────────────────────────────────────
   C. DRAWER PEMESANAN — LEBIH GELAP DARI BACKGROUND UTAMA
   Supaya form terlihat "tenggelam" rapi di dalam kartu hijau
   ───────────────────────────────────────────────────────────── */

.license-box .wa-order-drawer {
  background: rgba(0, 0, 0, 0.35) !important;   /* Lebih gelap */
  border: 1.5px dashed rgba(255, 255, 255, 0.5) !important;
  border-radius: 14px !important;
  padding: 18px !important;
  margin-top: 16px !important;
}

/* Label input di dalam drawer — PUTIH PEKAT */
.license-box .wa-order-drawer .wa-input-group label,
.license-box .wa-input-group label,
.wa-order-drawer .wa-input-group label {
  display: block !important;
  font-size: 13.5px !important;
  font-weight: 900 !important;
  color: #ffffff !important;
  margin-bottom: 8px !important;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8) !important;
  background: transparent !important;
  padding: 0 !important;
  border: none !important;
  letter-spacing: 0.3px !important;
}

/* Input field putih solid */
.license-box .wa-order-drawer .wa-input-field {
  background: #ffffff !important;
  border: 2px solid #10b981 !important;
  color: #0f172a !important;
  font-size: 14.5px !important;
  font-weight: 700 !important;
  padding: 12px 14px !important;
  border-radius: 10px !important;
  width: 100% !important;
  outline: none !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15) !important;
}

.license-box .wa-order-drawer .wa-input-field:focus {
  border-color: #fbbf24 !important;
  box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.35) !important;
}

.license-box .wa-order-drawer .wa-input-field::placeholder {
  color: #94a3b8 !important;
  font-weight: 600 !important;
  font-size: 13.5px !important;
}

/* Teks gembok — kuning terang */
.license-box .wa-order-note,
.license-box .wa-order-drawer .wa-order-note,
.wa-order-note {
  color: #fef3c7 !important;
  font-size: 12.5px !important;
  font-weight: 800 !important;
  line-height: 1.6 !important;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8) !important;
  background: transparent !important;
  padding: 12px 0 !important;
  border: none !important;
  margin: 14px 0 8px 0 !important;
}

.license-box .wa-order-note::before,
.wa-order-note::before {
  content: none !important;
  display: none !important;
}

/* Tombol submit WA */
.license-box .btn-wa-submit {
  background: #25D366 !important;
  color: #ffffff !important;
  border: 2.5px solid #ffffff !important;
  border-radius: 12px !important;
  padding: 14px 18px !important;
  font-size: 14.5px !important;
  font-weight: 900 !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: 100% !important;
  box-shadow: 0 4px 14px rgba(37, 211, 102, 0.4) !important;
  margin-top: 14px !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
}

/* Tombol toggle WA */
.license-box .btn-wa-order-toggle,
.license-box .btn-wa-order-subtle {
  background: #ffffff !important;
  border: 2px solid #25D366 !important;
  color: #065f46 !important;
  font-size: 13.5px !important;
  font-weight: 900 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: 100% !important;
  padding: 14px 18px !important;
  border-radius: 12px !important;
  cursor: pointer !important;
  margin-top: 12px !important;
  box-shadow: 0 3px 10px rgba(37, 211, 102, 0.25) !important;
  text-shadow: none !important;
  text-decoration: none !important;
}

/* ─────────────────────────────────────────────────────────────
   D. TOMBOL "MUTAKHIR" — GANTI BIRU → HIJAU TEAL
   Konsisten dengan tombol vConsole
   ───────────────────────────────────────────────────────────── */

.btn-pack-act.btn-mutakhir {
  background: #10b981 !important;   /* Hijau teal */
  color: #ffffff !important;
  border: 2px solid #ffffff !important;
  cursor: default !important;
  opacity: 1 !important;
  font-weight: 800 !important;
}

[data-theme="dark"] .btn-pack-act.btn-mutakhir {
  background: #10b981 !important;
  color: #ffffff !important;
  border: 2px solid #34d399 !important;
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.4) !important;
}

/* ─────────────────────────────────────────────────────────────
   E. TOMBOL PACK LAIN — POLISH KONSISTEN
   ───────────────────────────────────────────────────────────── */

/* AKTIF — hijau emerald tua */
.btn-pack-act.btn-use.active {
  background: #047857 !important;
  color: #ffffff !important;
  border: 2px solid #ffffff !important;
}

[data-theme="dark"] .btn-pack-act.btn-use.active {
  background: #059669 !important;
  color: #ffffff !important;
  border: 2px solid #10b981 !important;
}

/* UNDUH — oranye terang */
.btn-pack-act.btn-download {
  background: #ea580c !important;
  color: #ffffff !important;
  border: 2px solid #ffffff !important;
}

[data-theme="dark"] .btn-pack-act.btn-download {
  background: #ea580c !important;
  border-color: #fb923c !important;
}

/* HAPUS — putih + border merah */
.btn-pack-act.btn-del {
  background: #ffffff !important;
  border: 2px solid #dc2626 !important;
  color: #b91c1c !important;
}

[data-theme="dark"] .btn-pack-act.btn-del {
  background: #1e293b !important;
  border-color: #ef4444 !important;
  color: #fca5a5 !important;
}

/* ─────────────────────────────────────────────────────────────
   F. KARTU PACK — LIGHT MODE LEBIH TEGAS
   ───────────────────────────────────────────────────────────── */

[data-theme="light"] .pack-item-card {
  background: #ffffff !important;
  border: 1.5px solid #94a3b8 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
}

[data-theme="light"] .pack-title {
  color: #0f172a !important;
  font-weight: 800 !important;
}

[data-theme="light"] .pack-sub {
  color: #334155 !important;
  font-weight: 600 !important;
}


/* ═══════════════════════════════════════════════════════════════
   PATCH v83 — KALAHKAN RULE BIRU [disabled] DI MUTAKHIR
   Rule lama: [data-theme="light"] .btn-pack-act[disabled]
             { background: #1e40af } ← BIRU (baris 4182)
   Kita kalahkan dengan selector LEBIH SPESIFIK + !important kuat.
   ═══════════════════════════════════════════════════════════════ */

/* ─── Target: MUTAKHIR yang [disabled] di light mode ─── */

html[data-theme="light"] .btn-pack-act.btn-mutakhir[disabled],
html[data-theme="light"] .btn-pack-act.btn-mutakhir:disabled,
body[data-theme="light"] .btn-pack-act.btn-mutakhir[disabled],
[data-theme="light"] .btn-pack-act.btn-mutakhir[disabled],
[data-theme="light"] .btn-pack-act.btn-mutakhir:disabled,
.btn-pack-act.btn-mutakhir[disabled],
.btn-pack-act.btn-mutakhir:disabled {
  background: #10b981 !important;
  background-color: #10b981 !important;
  background-image: none !important;
  color: #ffffff !important;
  border: 2px solid #ffffff !important;
  font-weight: 800 !important;
  opacity: 1 !important;
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.35) !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) !important;
  cursor: default !important;
}

/* ─── Dark mode MUTAKHIR disabled ─── */

html[data-theme="dark"] .btn-pack-act.btn-mutakhir[disabled],
html[data-theme="dark"] .btn-pack-act.btn-mutakhir:disabled,
body[data-theme="dark"] .btn-pack-act.btn-mutakhir[disabled],
[data-theme="dark"] .btn-pack-act.btn-mutakhir[disabled] {
  background: #10b981 !important;
  background-color: #10b981 !important;
  background-image: none !important;
  color: #ffffff !important;
  border: 2px solid #34d399 !important;
  box-shadow: 0 2px 10px rgba(16, 185, 129, 0.5),
              0 0 12px rgba(16, 185, 129, 0.25) !important;
  cursor: default !important;
}

/* ─── Kalahkan juga rule disabled umum untuk AKTIF ─── */

html[data-theme="light"] .btn-pack-act.btn-use.active[disabled],
html[data-theme="light"] .btn-pack-act.btn-use.active:disabled,
body[data-theme="light"] .btn-pack-act.btn-use.active[disabled] {
  background: #047857 !important;
  background-color: #047857 !important;
  color: #ffffff !important;
  border: 2px solid #ffffff !important;
  font-weight: 800 !important;
}

/* ─── Kalahkan juga rule disabled umum untuk HAPUS ─── */

html[data-theme="light"] .btn-pack-act.btn-del[disabled],
body[data-theme="light"] .btn-pack-act.btn-del[disabled] {
  background: #ffffff !important;
  background-color: #ffffff !important;
  color: #b91c1c !important;
  border: 2px solid #dc2626 !important;
}

/* ─── Kalahkan juga rule disabled umum untuk tombol TERKUNCI ─── */

html[data-theme="light"] .btn-pack-act[disabled][style*="opacity"],
html[data-theme="light"] .btn-pack-act[disabled]:not(.btn-mutakhir):not(.btn-use):not(.btn-del) {
  background: #94a3b8 !important;
  background-color: #94a3b8 !important;
  color: #ffffff !important;
  border: none !important;
}


/* ═══════════════════════════════════════════════════════════════
   PATCH v84 — CHIP TELEMETRI NEMPEL DASAR (FIX STRIP PUTIH)
   Masalah: Chip nggantung di bottom: 10px → area 10px di bawahnya
            memperlihatkan body background #eef2ee (putih tulang).
   Fix    : Chip nempel bottom: 0 + safe area inset untuk nav bar HP.
            Tidak ada lagi celah yang memperlihatkan body background.
   ═══════════════════════════════════════════════════════════════ */

/* ─── Dock container: nempel dasar + safe area ─── */

.gm-telemetry-dock {
  position: fixed !important;
  bottom: 0 !important;                                  /* Nempel dasar viewport */
  left: 50% !important;
  transform: translateX(-50%) !important;
  z-index: 1000 !important;
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 4px !important;
  max-width: 96vw !important;
  overflow-x: auto !important;
  scrollbar-width: none !important;
  pointer-events: none;
  transition: opacity 0.2s ease;

  /* Safe area: kasih jarak dari nav bar HP */
  padding-bottom: max(10px, env(safe-area-inset-bottom, 10px)) !important;
  padding-bottom: max(10px, constant(safe-area-inset-bottom, 10px)) !important;  /* iOS lama */
  padding-left: 8px !important;
  padding-right: 8px !important;
}

/* ─── Desktop: posisi tetap di tengah bawah ─── */

@media (min-width: 768px) {
  .gm-telemetry-dock {
    bottom: 0 !important;
    padding-bottom: 20px !important;
  }
}

/* ─── HP kecil: sedikit lebih rapat ─── */

@media (max-width: 359px) {
  .gm-telemetry-dock {
    padding-bottom: max(8px, env(safe-area-inset-bottom, 8px)) !important;
    gap: 3px !important;
  }
}

/* ─── Cegah body background muncul sebagai strip ─── */

/* Body tetap punya background --bg-app, tapi karena chip nempel
   dasar dan map juga nge-cover full, tidak ada celah lagi. */

/* Fallback: kalau ada gap kecil, warnai body jadi warna map */
html[data-theme="light"] body {
  background-color: #f8fafc !important;   /* Samakan dengan map ground */
}

html[data-theme="dark"] body {
  background-color: #0a0f0d !important;   /* Tetap gelap di dark mode */
}


/* ═══════════════════════════════════════════════════════════════
   PATCH v86 — PLACE CARD DESKTOP RAPI (BAGIKAN + RUTE)
   Masalah: Tombol gepeng di desktop karena tidak ada rule spesifik
   Fix: Padding, gap, border-radius, dan icon-size dirapikan
   ═══════════════════════════════════════════════════════════════ */

/* ─── A. TOMBOL PLACE CARD — GLOBAL (SEMUA VIEWPORT) ─── */

.btn-place-action {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 12px 18px !important;
  border-radius: 12px !important;
  font-size: 14.5px !important;
  font-weight: 800 !important;
  letter-spacing: 0.2px !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease !important;
  min-height: 46px !important;
  line-height: 1 !important;
}

/* Ikon SVG di dalam tombol */
.btn-place-action svg {
  width: 18px !important;
  height: 18px !important;
  flex-shrink: 0 !important;
  display: block !important;
}

.btn-place-action:active {
  transform: scale(0.96) !important;
}

/* ─── B. CONTAINER ACTIONS — FLEX 1:1 SIMETRIS ─── */

.place-card-actions {
  display: flex !important;
  gap: 10px !important;
  width: 100% !important;
  align-items: stretch !important;
}

.place-card-actions .btn-place-action {
  flex: 1 1 0 !important;
  min-width: 0 !important;
}

/* ─── C. TOMBOL BAGIKAN — HIJAU SOFT OUTLINE ─── */

.btn-place-action.btn-share {
  background: rgba(16, 185, 129, 0.10) !important;
  color: #065f46 !important;
  border: 2px solid #10b981 !important;
  box-shadow: 0 2px 6px rgba(16, 185, 129, 0.15) !important;
}

.btn-place-action.btn-share svg,
.btn-place-action.btn-share svg * {
  fill: #065f46 !important;
  color: #065f46 !important;
}

[data-theme="dark"] .btn-place-action.btn-share {
  background: rgba(52, 211, 153, 0.15) !important;
  color: #34d399 !important;
  border: 2px solid #34d399 !important;
}

[data-theme="dark"] .btn-place-action.btn-share svg,
[data-theme="dark"] .btn-place-action.btn-share svg * {
  fill: #34d399 !important;
  color: #34d399 !important;
}

/* ─── D. TOMBOL RUTE — HIJAU SOLID PUTIH ─── */

.btn-place-action.btn-route {
  background: #065f46 !important;
  color: #ffffff !important;
  border: 2px solid #ffffff !important;
  box-shadow: 0 4px 12px rgba(6, 95, 70, 0.35) !important;
}

.btn-place-action.btn-route svg,
.btn-place-action.btn-route svg * {
  fill: #ffffff !important;
  color: #ffffff !important;
}

[data-theme="dark"] .btn-place-action.btn-route {
  background: #10b981 !important;
  color: #ffffff !important;
  border: 2px solid #34d399 !important;
  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.45) !important;
}

/* ─── E. DESKTOP MEDIA QUERY — LEBIH LEGA ─── */

@media (min-width: 768px) {
  .place-card {
    max-width: 420px !important;
    padding: 16px 18px !important;
  }

  .place-card-actions {
    gap: 12px !important;
    margin-top: 4px !important;
  }

  .place-card-actions .btn-place-action {
    padding: 13px 20px !important;
    font-size: 15px !important;
    min-height: 48px !important;
    border-radius: 12px !important;
  }

  .place-card-actions .btn-place-action svg {
    width: 20px !important;
    height: 20px !important;
  }

  .place-card-title {
    font-size: 18px !important;
  }

  .place-card-desc {
    font-size: 14px !important;
    margin-top: 6px !important;
  }
}

/* ─── F. HP KECIL — SEDIKIT DIPERKECIL TAPI TETAP RAPI ─── */

@media (max-width: 359px) {
  .place-card-actions {
    gap: 8px !important;
  }

  .place-card-actions .btn-place-action {
    padding: 11px 14px !important;
    font-size: 13.5px !important;
    min-height: 44px !important;
  }

  .place-card-actions .btn-place-action svg {
    width: 16px !important;
    height: 16px !important;
  }
}


/* ═══════════════════════════════════════════════════════════════
   PATCH v89 — CSS TEXT SIZE TOGGLE
   ═══════════════════════════════════════════════════════════════ */

.text-size-btn {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 3px !important;
  padding: 12px 8px !important;
  border-radius: 12px !important;
  border: 2px solid var(--border-ui) !important;
  background: var(--bg-card) !important;
  color: var(--text-main) !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  font-family: inherit !important;
  min-height: 72px !important;
}

.text-size-btn:active {
  transform: scale(0.95) !important;
}

.text-size-btn.active {
  background: var(--accent-primary) !important;
  color: #ffffff !important;
  border-color: var(--accent-primary) !important;
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.35) !important;
}

[data-theme="light"] .text-size-btn.active {
  background: #065f46 !important;
  color: #ffffff !important;
  border-color: #065f46 !important;
}

[data-theme="dark"] .text-size-btn.active {
  background: #10b981 !important;
  color: #0a1a12 !important;
  border-color: #34d399 !important;
}

.text-size-btn span {
  line-height: 1.2 !important;
  font-weight: 800 !important;
}


/* ═══════════════════════════════════════════════════════════════
   PATCH v92 — FIX TOMBOL 3D/2D TEKST HILANG (LIGHT & DARK)
   Masalah: Rule lama (patch v23) set color: var(--accent-primary)
            hijau di light mode → teks tenggelam di background hijau
   Fix    : Override dengan spesifisitas tinggi → paksa PUTIH
   ═══════════════════════════════════════════════════════════════ */

/* ─── Light mode: tombol 3D AKTIF → teks PUTIH ─── */
html[data-theme="light"] .gm-fab.fab-3d.active,
html[data-theme="light"] .gm-fab.fab-3d.active span,
html[data-theme="light"] .gm-fab.fab-3d.active #label3D,
html[data-theme="light"] #btnToggle3D.active span,
html[data-theme="light"] #btnToggle3D.active #label3D,
body[data-theme="light"] .gm-fab.fab-3d.active,
body[data-theme="light"] .gm-fab.fab-3d.active span {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25) !important;
  font-weight: 900 !important;
}

/* ─── Dark mode: tombol 3D AKTIF → teks PUTIH ─── */
html[data-theme="dark"] .gm-fab.fab-3d.active,
html[data-theme="dark"] .gm-fab.fab-3d.active span,
html[data-theme="dark"] .gm-fab.fab-3d.active #label3D,
html[data-theme="dark"] #btnToggle3D.active span,
body[data-theme="dark"] .gm-fab.fab-3d.active,
body[data-theme="dark"] .gm-fab.fab-3d.active span {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6) !important;
  font-weight: 900 !important;
}

/* ─── Light mode: tombol 3D NON-AKTIF → teks HIJAU ARMY ─── */
html[data-theme="light"] .gm-fab.fab-3d:not(.active),
html[data-theme="light"] .gm-fab.fab-3d:not(.active) span,
html[data-theme="light"] .gm-fab.fab-3d:not(.active) #label3D,
body[data-theme="light"] .gm-fab.fab-3d:not(.active),
body[data-theme="light"] .gm-fab.fab-3d:not(.active) span {
  color: #065f46 !important;
  -webkit-text-fill-color: #065f46 !important;
  font-weight: 900 !important;
}

/* ─── Dark mode: tombol 3D NON-AKTIF → teks HIJAU EMERALD ─── */
html[data-theme="dark"] .gm-fab.fab-3d:not(.active),
html[data-theme="dark"] .gm-fab.fab-3d:not(.active) span,
html[data-theme="dark"] .gm-fab.fab-3d:not(.active) #label3D,
body[data-theme="dark"] .gm-fab.fab-3d:not(.active),
body[data-theme="dark"] .gm-fab.fab-3d:not(.active) span {
  color: #10b981 !important;
  -webkit-text-fill-color: #10b981 !important;
  font-weight: 900 !important;
}

/* ─── Anti-race: pastikan label3D selalu inherit dari parent ─── */
#btnToggle3D #label3D {
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
  line-height: 1 !important;
}


/* ═══════════════════════════════════════════════════════════════
   PATCH v93 — CHIP TELEMETRI COMPACT (TIDAK KEPOTONG DI HP KECIL)
   Masalah: Setelah v88 (text +40%), total chip > viewport HP kecil
   Fix: Perkecil padding + gap + font, add ellipsis + wrap fallback
   ═══════════════════════════════════════════════════════════════ */

/* ─── A. Chip: Perkecil padding & font ─── */

.gm-telemetry-dock .gm-chip,
[data-theme="light"] .gm-telemetry-dock .gm-chip,
[data-theme="dark"] .gm-telemetry-dock .gm-chip,
html[data-theme="light"] .gm-chip,
html[data-theme="dark"] .gm-chip {
  padding: 4px 9px !important;
  gap: 4px !important;
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* ─── B. Chip label & value: perkecil font ─── */

.gm-telemetry-dock .gm-chip .chip-lbl {
  font-size: 10px !important;
  letter-spacing: 0.1px !important;
  line-height: 1 !important;
  flex-shrink: 0 !important;
}

.gm-telemetry-dock .gm-chip .chip-val {
  font-size: 12.5px !important;
  letter-spacing: 0.2px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  min-width: 0 !important;
  flex-shrink: 1 !important;
}

/* ─── C. Dock container: gap lebih rapat ─── */

.gm-telemetry-dock {
  gap: 3px !important;
  padding-left: 6px !important;
  padding-right: 6px !important;
  max-width: 100vw !important;
  width: 100vw !important;
  left: 0 !important;
  right: 0 !important;
  transform: none !important;
  justify-content: center !important;
  box-sizing: border-box !important;
}

/* ─── D. HP sangat kecil (<360px): wrap ke baris kedua ─── */

@media (max-width: 359px) {
  .gm-telemetry-dock {
    flex-wrap: wrap !important;
    justify-content: center !important;
    row-gap: 3px !important;
    padding-left: 4px !important;
    padding-right: 4px !important;
  }

  .gm-telemetry-dock .gm-chip {
    padding: 3px 8px !important;
  }

  .gm-telemetry-dock .gm-chip .chip-lbl {
    font-size: 9.5px !important;
  }

  .gm-telemetry-dock .gm-chip .chip-val {
    font-size: 11.5px !important;
  }
}

/* ─── E. HP sangat kecil (<320px): font lebih kecil lagi ─── */

@media (max-width: 319px) {
  .gm-telemetry-dock .gm-chip {
    padding: 3px 6px !important;
  }

  .gm-telemetry-dock .gm-chip .chip-lbl {
    font-size: 9px !important;
  }

  .gm-telemetry-dock .gm-chip .chip-val {
    font-size: 11px !important;
  }
}

/* ─── F. Scrollbar hidden ─── */

.gm-telemetry-dock::-webkit-scrollbar {
  display: none !important;
}


/* ═══════════════════════════════════════════════════════════════
   PATCH v1.4.82 — KARTU PANDU BULAN TAKTIS
   ═══════════════════════════════════════════════════════════════ */

.moon-card {
  background: var(--bg-card);
  border: 2px solid var(--accent-primary);
  border-radius: 16px;
  padding: 18px;
  margin-top: 8px;
}

.moon-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-bottom: 14px;
  margin-bottom: 14px;
  border-bottom: 1.5px dashed var(--border-ui);
}

.moon-icon {
  font-size: 52px;
  line-height: 1;
  filter: drop-shadow(0 0 12px rgba(16, 185, 129, 0.4));
}

.moon-title-block {
  flex: 1;
  min-width: 0;
}

.moon-phase-name {
  font-size: 17px;
  font-weight: 900;
  color: var(--text-main);
  line-height: 1.3;
  letter-spacing: 0.2px;
}

.moon-illum {
  font-size: 13px;
  font-weight: 700;
  color: var(--accent-primary);
  margin-top: 4px;
}

.moon-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 14px;
}

.moon-stat {
  background: var(--accent-primary-soft);
  border: 1px solid var(--border-ui);
  border-radius: 12px;
  padding: 10px 12px;
  text-align: center;
}

.moon-stat-lbl {
  font-size: 10.5px;
  font-weight: 800;
  color: var(--text-sub);
  letter-spacing: 0.3px;
  margin-bottom: 4px;
}

.moon-stat-val {
  font-size: 18px;
  font-weight: 900;
  color: var(--text-main);
  font-family: monospace;
  letter-spacing: 0.5px;
}

.moon-note {
  font-size: 12px;
  line-height: 1.6;
  color: var(--text-sub);
  background: var(--accent-primary-soft);
  border-left: 3px solid var(--accent-primary);
  border-radius: 0 8px 8px 0;
  padding: 10px 12px;
  margin-bottom: 10px;
}

.moon-updated {
  font-size: 10.5px;
  text-align: center;
  color: var(--text-muted);
  font-family: monospace;
}

[data-theme="dark"] .moon-icon {
  filter: drop-shadow(0 0 14px rgba(52, 211, 153, 0.5));
}


/* ═══════════════════════════════════════════════════════════════
   PATCH v1.4.83 — PERBESAR TEKS PANDU BULAN (MATA RABUN / TERIK)
   Override spesifisitas tinggi untuk mengalahkan rule lama
   ═══════════════════════════════════════════════════════════════ */

/* Nama fase bulan — utama, harus paling jelas */
.gm-modal#modalMoon .moon-phase-name,
html body .gm-modal#modalMoon .moon-phase-name {
  font-size: 20px !important;
  line-height: 1.35 !important;
  font-weight: 900 !important;
  letter-spacing: 0.2px !important;
}

/* Iluminasi persen */
.gm-modal#modalMoon .moon-illum,
html body .gm-modal#modalMoon .moon-illum {
  font-size: 15px !important;
  font-weight: 800 !important;
  margin-top: 6px !important;
}

/* Ikon bulan besar */
.gm-modal#modalMoon .moon-icon,
html body .gm-modal#modalMoon .moon-icon {
  font-size: 56px !important;
  line-height: 1 !important;
}

/* Label statistik (ZODIAK BULAN, AZIMUT, TERBIT, TERBENAM) */
.gm-modal#modalMoon .moon-stat-lbl,
html body .gm-modal#modalMoon .moon-stat-lbl {
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: 0.3px !important;
  margin-bottom: 6px !important;
}

/* Nilai statistik — data utama, harus besar & jelas */
.gm-modal#modalMoon .moon-stat-val,
html body .gm-modal#modalMoon .moon-stat-val {
  font-size: 22px !important;
  font-weight: 900 !important;
  letter-spacing: 0.5px !important;
  line-height: 1.2 !important;
}

/* Catatan (note) — teks panduan */
.gm-modal#modalMoon .moon-note,
html body .gm-modal#modalMoon .moon-note {
  font-size: 13.5px !important;
  line-height: 1.65 !important;
  font-weight: 600 !important;
  padding: 12px 14px !important;
}

/* Timestamp update */
.gm-modal#modalMoon .moon-updated,
html body .gm-modal#modalMoon .moon-updated {
  font-size: 11.5px !important;
  font-weight: 700 !important;
}

/* HP kecil — sedikit lebih kecil tapi tetap terbaca */
@media (max-width: 359px) {
  .gm-modal#modalMoon .moon-phase-name,
  html body .gm-modal#modalMoon .moon-phase-name {
    font-size: 18px !important;
  }
  .gm-modal#modalMoon .moon-stat-val,
  html body .gm-modal#modalMoon .moon-stat-val {
    font-size: 20px !important;
  }
  .gm-modal#modalMoon .moon-icon,
  html body .gm-modal#modalMoon .moon-icon {
    font-size: 48px !important;
  }
}


/* ═══════════════════════════════════════════════════════════════
   PATCH v1.4.86 — FINAL OVERRIDE: POSISI TOMBOL vConsole & Salin Log
   Diletakkan paling akhir agar menang cascade atas semua rule lama.
   Posisi: Salin Log kanan-atas, vConsole kanan-bawah (jauh dari
   area command console yang ada di tengah-bawah panel vConsole).
   ═══════════════════════════════════════════════════════════════ */

/* ───── TOMBOL SALIN LOG — KANAN ATAS, DI BAWAH SEARCH BAR ───── */
html body #btnCopyDebugKanuragan,
body #btnCopyDebugKanuragan,
#btnCopyDebugKanuragan {
  position: fixed !important;
  top: 72px !important;
  right: 12px !important;
  bottom: auto !important;
  left: auto !important;
  z-index: 2147483645 !important;
  padding: 8px 14px !important;
  background: #10b981 !important;
  color: #ffffff !important;
  border: 2px solid #ffffff !important;
  border-radius: 20px !important;
  font-weight: 800 !important;
  font-size: 12px !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  cursor: pointer !important;
  box-shadow: 0 3px 10px rgba(16, 185, 129, 0.5) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  white-space: nowrap !important;
  min-width: 0 !important;
  max-width: none !important;
  width: auto !important;
  height: auto !important;
  line-height: 1 !important;
  transition: transform 0.15s ease, background 0.2s ease !important;
  backdrop-filter: blur(8px) !important;
}

html body #btnCopyDebugKanuragan:hover,
body #btnCopyDebugKanuragan:hover {
  background: #059669 !important;
  transform: translateY(-1px);
}

html body #btnCopyDebugKanuragan:active,
body #btnCopyDebugKanuragan:active {
  transform: scale(0.95);
  background: #047857 !important;
}

/* ───── TOMBOL VCONSOLE SWITCH — KANAN BAWAH, DI ATAS TELEMETRI ───── */
#__vconsole .vc-switch {
  position: fixed !important;
  top: 118px !important;
  right: 12px !important;
  bottom: auto !important;
  left: auto !important;
  z-index: 2147483644 !important;
  padding: 8px 14px !important;
  background: #10b981 !important;
  color: #ffffff !important;
  border: 2px solid #ffffff !important;
  border-radius: 20px !important;
  font-weight: 800 !important;
  font-size: 12px !important;
  box-shadow: 0 3px 10px rgba(16, 185, 129, 0.5) !important;
  height: 36px !important;
  line-height: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

#__vconsole .vc-switch:active {
  transform: scale(0.93) !important;
  background: #059669 !important;
}

/* ───── RESPONSIF HP KECIL (< 360px) ───── */
@media (max-width: 359px) {
  html body #btnCopyDebugKanuragan,
  body #btnCopyDebugKanuragan {
    top: 66px !important;
    right: 8px !important;
    padding: 7px 12px !important;
    font-size: 11px !important;
  }
  #__vconsole .vc-switch {
    bottom: 120px !important;
    right: 8px !important;
    height: 34px !important;
    padding: 7px 12px !important;
    font-size: 11px !important;
  }
}

/* ───── SAAT NAVIGASI AKTIF — NAIKKAN vConsole BIAR TIDAK TABRAKAN ───── */
body.in-navigation #__vconsole .vc-switch,
body.route-sheet-active #__vconsole .vc-switch {
  bottom: 200px !important;
}

/* ───── SAAT PLACE CARD AKTIF — GESER SEDIKIT ───── */
body:has(.place-card.active) #__vconsole .vc-switch {
  bottom: 190px !important;
}


/* ═══════════════════════════════════════════════════════════════
   PATCH v1.4.87 — PANDU BULAN 2 TAB + DATE PICKER + STAT BARU
   ═══════════════════════════════════════════════════════════════ */

/* ─── TAB BAR (konsisten dengan .compass-tab-bar) ─── */
.moon-tab-bar {
  display: flex !important;
  gap: 8px !important;
  padding: 8px 14px 12px !important;
  background: var(--bg-card-solid) !important;
  border-bottom: 1px solid var(--border-ui) !important;
  flex-shrink: 0 !important;
}

.moon-tab {
  flex: 1 !important;
  padding: 10px 8px !important;
  border: 1.5px solid var(--border-ui) !important;
  background: var(--accent-primary-soft) !important;
  color: var(--accent-primary) !important;
  border-radius: 10px !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  font-family: inherit !important;
}

.moon-tab:hover {
  background: rgba(6, 95, 70, 0.15) !important;
  border-color: var(--accent-primary) !important;
}

[data-theme="dark"] .moon-tab {
  background: rgba(16, 185, 129, 0.12) !important;
  border-color: rgba(16, 185, 129, 0.35) !important;
  color: var(--accent-primary-hover) !important;
}

[data-theme="dark"] .moon-tab:hover {
  background: rgba(16, 185, 129, 0.22) !important;
}

.moon-tab.active {
  background: var(--accent-primary) !important;
  color: #ffffff !important;
  border-color: var(--accent-primary) !important;
  box-shadow: 0 3px 10px rgba(6, 95, 70, 0.35) !important;
}

[data-theme="dark"] .moon-tab.active {
  background: #10b981 !important;
  color: #ffffff !important;
  border-color: #34d399 !important;
  box-shadow: 0 3px 14px rgba(16, 185, 129, 0.45),
              0 0 12px rgba(16, 185, 129, 0.3) !important;
}

/* ─── DATE PICKER WRAP ─── */
.moon-date-picker-wrap {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  background: var(--bg-card) !important;
  border: 2px solid var(--accent-primary) !important;
  border-radius: 14px !important;
  padding: 12px 14px !important;
  margin-bottom: 14px !important;
}

.moon-date-picker-wrap label {
  font-size: 13px !important;
  font-weight: 800 !important;
  color: var(--text-main) !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}

#moonPlanDate {
  flex: 1 !important;
  min-width: 0 !important;
  padding: 10px 12px !important;
  border: 1.5px solid var(--border-ui) !important;
  border-radius: 10px !important;
  background: var(--bg-card-solid) !important;
  color: var(--text-main) !important;
  font-family: inherit !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  outline: none !important;
  cursor: pointer !important;
}

#moonPlanDate:focus {
  border-color: var(--accent-primary) !important;
  box-shadow: 0 0 0 3px var(--accent-primary-soft) !important;
}

.moon-reset-btn {
  padding: 10px 14px !important;
  border: 1.5px solid var(--accent-primary) !important;
  background: var(--accent-primary-soft) !important;
  color: var(--accent-primary) !important;
  border-radius: 10px !important;
  font-family: inherit !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  transition: all 0.15s ease !important;
}

.moon-reset-btn:hover {
  background: var(--accent-primary) !important;
  color: #ffffff !important;
}

.moon-reset-btn:active {
  transform: scale(0.95) !important;
}

/* ─── COUNTDOWN BAR ─── */
.moon-countdown {
  text-align: center !important;
  font-size: 15px !important;
  font-weight: 900 !important;
  color: var(--accent-primary) !important;
  background: var(--accent-primary-soft) !important;
  border: 1.5px dashed var(--accent-primary) !important;
  border-radius: 12px !important;
  padding: 10px 14px !important;
  margin-bottom: 12px !important;
  letter-spacing: 0.3px !important;
  font-family: monospace !important;
}

[data-theme="dark"] .moon-countdown {
  color: var(--accent-primary-hover) !important;
  border-color: var(--accent-primary-hover) !important;
}

/* ─── RESPONSIF HP KECIL ─── */
@media (max-width: 359px) {
  .moon-tab {
    font-size: 12px !important;
    padding: 8px 6px !important;
  }
  .moon-date-picker-wrap {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
  }
  .moon-date-picker-wrap label {
    text-align: center !important;
  }
  .moon-countdown {
    font-size: 13.5px !important;
  }
}


/* ═══════════════════════════════════════════════════════════════
   PATCH v1.5.42 — FIX TOMBOL SALIN LOG (Anti-Stretch Saat Navigasi)
   Masalah: rule bottom:240px di line 8003-8005 bikin tombol stretch
            dari top:72px ke bottom:240px saat body.route-sheet-active
   Fix: paksa bottom:auto + width/height auto dengan specificity max
   ═══════════════════════════════════════════════════════════════ */

html body.route-sheet-active #btnCopyDebugKanuragan,
html body.in-navigation #btnCopyDebugKanuragan,
html body #btnCopyDebugKanuragan,
body #btnCopyDebugKanuragan,
#btnCopyDebugKanuragan {
  position: fixed !important;
  top: 72px !important;
  right: 12px !important;
  bottom: auto !important;
  left: auto !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  min-height: 0 !important;
  max-height: none !important;
  padding: 8px 14px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #10b981 !important;
  color: #ffffff !important;
  border: 2px solid #ffffff !important;
  border-radius: 20px !important;
  font-weight: 800 !important;
  font-size: 12px !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  cursor: pointer !important;
  box-shadow: 0 3px 10px rgba(16, 185, 129, 0.5) !important;
  z-index: 2147483645 !important;
  white-space: nowrap !important;
  line-height: 1 !important;
  letter-spacing: 0.2px !important;
  text-align: center !important;
  visibility: visible !important;
  opacity: 1 !important;
  transform: none !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  float: none !important;
  overflow: visible !important;
  vertical-align: middle !important;
}

html body.route-sheet-active #btnCopyDebugKanuragan:hover,
html body.in-navigation #btnCopyDebugKanuragan:hover,
html body #btnCopyDebugKanuragan:hover,
body #btnCopyDebugKanuragan:hover {
  background: #059669 !important;
  transform: translateY(-1px) !important;
}

html body.route-sheet-active #btnCopyDebugKanuragan:active,
html body.in-navigation #btnCopyDebugKanuragan:active,
html body #btnCopyDebugKanuragan:active,
body #btnCopyDebugKanuragan:active {
  transform: scale(0.95) !important;
  background: #047857 !important;
}


/* ═══════════════════════════════════════════════════════════════
   PATCH v1.5.52 — WATERMARK FINAL (GMaps Style + Outline Text)
   Light: text hitam pekat + outline putih
   Dark:  text putih + outline hitam
   ═══════════════════════════════════════════════════════════════ */

/* ═════ BASE (berlaku semua tema) ═════ */
.gm-watermark-dock {
  position: fixed !important;
  bottom: 56px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  z-index: 500 !important;
  pointer-events: none !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: none !important;
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-radius: 0 !important;
  outline: none !important;
  padding: 4px 8px !important;
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  opacity: 0.9 !important;
  transition: opacity 0.3s ease-out !important;
}

.gm-watermark-dock.hidden {
  opacity: 0 !important;
}

.gm-watermark-dock svg {
  width: 15px !important;
  height: 15px !important;
  flex-shrink: 0 !important;
}

.gm-watermark-text {
  font-size: 17px !important;
  font-weight: 900 !important;
  letter-spacing: 0.4px !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  white-space: nowrap !important;
}

.gm-watermark-text .wm-brand {
  font-weight: 800 !important;
}

.gm-watermark-text .wm-suffix {
  font-weight: 900 !important;
  margin-left: 3px !important;
}

/* ═════ LIGHT MODE ═════ */
/* Semua hitam pekat + outline putih */
html:not([data-theme="dark"]) .gm-watermark-dock svg circle,
html[data-theme="light"] .gm-watermark-dock svg circle {
  stroke: #1f2937 !important;
  fill: none !important;
}

html:not([data-theme="dark"]) .gm-watermark-dock svg polygon,
html[data-theme="light"] .gm-watermark-dock svg polygon {
  fill: #1f2937 !important;
  stroke: #1f2937 !important;
}

html:not([data-theme="dark"]) .gm-watermark-text .wm-brand,
html[data-theme="light"] .gm-watermark-text .wm-brand {
  color: #1f2937 !important;
}

html:not([data-theme="dark"]) .gm-watermark-text .wm-suffix,
html[data-theme="light"] .gm-watermark-text .wm-suffix {
  color: #1f2937 !important;
}

/* Outline PUTIH untuk text (light mode) */
html:not([data-theme="dark"]) .gm-watermark-text,
html[data-theme="light"] .gm-watermark-text {
  text-shadow:
    -1px -1px 0 #ffffff,
    1px -1px 0 #ffffff,
    -1px 1px 0 #ffffff,
    1px 1px 0 #ffffff,
    0 0 3px rgba(255, 255, 255, 1),
    0 1px 4px rgba(0, 0, 0, 0.4) !important;
}

/* Petir halo putih (light) */
html:not([data-theme="dark"]) .gm-watermark-dock svg,
html[data-theme="light"] .gm-watermark-dock svg {
  filter:
    drop-shadow(0 0 1px #ffffff)
    drop-shadow(0 0 2px #ffffff)
    drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3)) !important;
}

/* ═════ DARK MODE ═════ */
/* Semua putih + outline hitam */
html[data-theme="dark"] .gm-watermark-dock svg circle,
body[data-theme="dark"] .gm-watermark-dock svg circle {
  stroke: #ffffff !important;
  fill: none !important;
}

html[data-theme="dark"] .gm-watermark-dock svg polygon,
body[data-theme="dark"] .gm-watermark-dock svg polygon {
  fill: #ffffff !important;
  stroke: #ffffff !important;
}

html[data-theme="dark"] .gm-watermark-text .wm-brand,
body[data-theme="dark"] .gm-watermark-text .wm-brand {
  color: #ffffff !important;
}

html[data-theme="dark"] .gm-watermark-text .wm-suffix,
body[data-theme="dark"] .gm-watermark-text .wm-suffix {
  color: #ffffff !important;
}

/* Outline HITAM untuk text (dark mode) */
html[data-theme="dark"] .gm-watermark-text,
body[data-theme="dark"] .gm-watermark-text {
  text-shadow:
    -1px -1px 0 #000000,
    1px -1px 0 #000000,
    -1px 1px 0 #000000,
    1px 1px 0 #000000,
    0 0 3px rgba(0, 0, 0, 1),
    0 1px 4px rgba(255, 255, 255, 0.2) !important;
}

/* Petir halo hitam (dark) */
html[data-theme="dark"] .gm-watermark-dock svg,
body[data-theme="dark"] .gm-watermark-dock svg {
  filter:
    drop-shadow(0 0 1px #000000)
    drop-shadow(0 0 2px #000000)
    drop-shadow(0 1px 2px rgba(255, 255, 255, 0.3)) !important;
}

/* ═════ RESPONSIF ═════ */
@media (max-width: 359px) {
  .gm-watermark-text {
    font-size: 15px !important;
  }
  .gm-watermark-dock svg {
    width: 13px !important;
    height: 13px !important;
  }
}


/* ═══════════════════════════════════════════════════════════════
   PATCH V7: 2-STATE (MIN + FULL) — Compact Minimize
   ═══════════════════════════════════════════════════════════════ */

/* ─── BASE ─── */
body #navAltOverlay .nav-alt-sheet,
#navAltOverlay .nav-alt-sheet {
  transition: max-height 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important;
  will-change: max-height !important;
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
  overflow: hidden !important;
}

/* PATCH V8: Mode dragging — nonaktifkan transisi untuk instant follow jari */
body #navAltOverlay .nav-alt-sheet.nav-alt-dragging,
#navAltOverlay .nav-alt-sheet.nav-alt-dragging {
  transition: none !important;
}

/* ═══════════════════════════════════════════════════════════════
   PATCH V9: MINIMIZED ULTRA COMPACT + HORIZONTAL SWIPE
   ═══════════════════════════════════════════════════════════════ */

/* ─── STATE: MINIMIZED (26vh) ─── */
body #navAltOverlay .nav-alt-sheet.nav-alt-minimized,
#navAltOverlay .nav-alt-sheet.nav-alt-minimized {
  max-height: 26vh !important;
}

/* Sembunyikan kontur + dots saat minimized */
body #navAltOverlay .nav-alt-sheet.nav-alt-minimized .nav-alt-dots,
#navAltOverlay .nav-alt-sheet.nav-alt-minimized .nav-alt-dots {
  display: none !important;
}

/* Hide GO button di minimize — cuma info ringkas */
body #navAltOverlay .nav-alt-sheet.nav-alt-minimized .nav-alt-go-btn,
#navAltOverlay .nav-alt-sheet.nav-alt-minimized .nav-alt-go-btn {
  display: none !important;
}

/* Hide via (nama jalan) — terlalu panjang untuk minimize */
body #navAltOverlay .nav-alt-sheet.nav-alt-minimized .nav-alt-card-via,
#navAltOverlay .nav-alt-sheet.nav-alt-minimized .nav-alt-card-via {
  display: none !important;
}

/* Hide kontur mini */
body #navAltOverlay .nav-alt-sheet.nav-alt-minimized .nav-alt-card-elev,
#navAltOverlay .nav-alt-sheet.nav-alt-minimized .nav-alt-card-elev {
  display: none !important;
}

/* ─── Cards scroll — HORIZONTAL SWIPE AKTIF ─── */
body #navAltOverlay .nav-alt-sheet.nav-alt-minimized .nav-alt-cards-scroll,
#navAltOverlay .nav-alt-sheet.nav-alt-minimized .nav-alt-cards-scroll {
  padding: 4px 12px 8px 12px !important;
  max-height: 60px !important;
  display: flex !important;
  flex-direction: row !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scroll-snap-type: x mandatory !important;
  -webkit-overflow-scrolling: touch !important;
  gap: 8px !important;
  scrollbar-width: none !important;
}

body #navAltOverlay .nav-alt-sheet.nav-alt-minimized .nav-alt-cards-scroll::-webkit-scrollbar,
#navAltOverlay .nav-alt-sheet.nav-alt-minimized .nav-alt-cards-scroll::-webkit-scrollbar {
  display: none !important;
}

/* ─── Card saat minimized — COMPACT 1 baris ─── */
body #navAltOverlay .nav-alt-sheet.nav-alt-minimized .nav-alt-card,
#navAltOverlay .nav-alt-sheet.nav-alt-minimized .nav-alt-card {
  padding: 6px 10px !important;
  gap: 2px !important;
  min-width: calc(100% - 24px) !important;
  max-width: calc(100% - 24px) !important;
  flex-shrink: 0 !important;
  scroll-snap-align: center !important;
  border-radius: 10px !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  flex-wrap: wrap !important;
}

/* Card head lebih compact */
body #navAltOverlay .nav-alt-sheet.nav-alt-minimized .nav-alt-card-head,
#navAltOverlay .nav-alt-sheet.nav-alt-minimized .nav-alt-card-head {
  display: flex !important;
  gap: 6px !important;
  align-items: center !important;
  flex: 1 !important;
  min-width: 0 !important;
}

body #navAltOverlay .nav-alt-sheet.nav-alt-minimized .nav-alt-num,
#navAltOverlay .nav-alt-sheet.nav-alt-minimized .nav-alt-num {
  width: 22px !important;
  height: 22px !important;
  font-size: 11px !important;
  flex-shrink: 0 !important;
}

body #navAltOverlay .nav-alt-sheet.nav-alt-minimized .nav-alt-card-time,
#navAltOverlay .nav-alt-sheet.nav-alt-minimized .nav-alt-card-time {
  font-size: 14px !important;
  font-weight: 900 !important;
  white-space: nowrap !important;
}

body #navAltOverlay .nav-alt-sheet.nav-alt-minimized .nav-alt-best-badge,
#navAltOverlay .nav-alt-sheet.nav-alt-minimized .nav-alt-best-badge {
  font-size: 8px !important;
  padding: 2px 6px !important;
  flex-shrink: 0 !important;
}

body #navAltOverlay .nav-alt-sheet.nav-alt-minimized .nav-alt-card-dist,
#navAltOverlay .nav-alt-sheet.nav-alt-minimized .nav-alt-card-dist {
  font-size: 11px !important;
  font-weight: 800 !important;
  color: var(--accent-primary) !important;
  white-space: nowrap !important;
  margin-left: auto !important;
  padding-left: 8px !important;
}

/* ─── Header row compact saat minimized ─── */
body #navAltOverlay .nav-alt-sheet.nav-alt-minimized .nav-alt-header-row,
#navAltOverlay .nav-alt-sheet.nav-alt-minimized .nav-alt-header-row {
  padding: 4px 10px 4px 10px !important;
  gap: 4px !important;
  margin-bottom: 0 !important;
}

/* Tabs row lebih tipis di minimized */
body #navAltOverlay .nav-alt-sheet.nav-alt-minimized .nav-alt-tabs-row > button,
#navAltOverlay .nav-alt-sheet.nav-alt-minimized .nav-alt-tabs-row > button {
  min-height: 30px !important;
  padding: 6px 8px !important;
  font-size: 11px !important;
}

body #navAltOverlay .nav-alt-sheet.nav-alt-minimized .nav-alt-tabs-row .nav-alt-avoid-tolls,
#navAltOverlay .nav-alt-sheet.nav-alt-minimized .nav-alt-tabs-row .nav-alt-avoid-tolls {
  min-height: 30px !important;
  padding: 6px 8px !important;
  font-size: 11px !important;
}

/* Drag handle lebih rapat saat minimized */
body #navAltOverlay .nav-alt-sheet.nav-alt-minimized .nav-alt-drag-handle-wrap,
#navAltOverlay .nav-alt-sheet.nav-alt-minimized .nav-alt-drag-handle-wrap {
  padding: 4px 0 2px 0 !important;
  min-height: 12px !important;
}

body #navAltOverlay .nav-alt-sheet.nav-alt-minimized .nav-alt-drag-handle,
#navAltOverlay .nav-alt-sheet.nav-alt-minimized .nav-alt-drag-handle {
  height: 4px !important;
  width: 44px !important;
}

/* Mode tabs gap lebih rapat saat minimized */
body #navAltOverlay .nav-alt-sheet.nav-alt-minimized .nav-alt-mode-tabs-v7,
#navAltOverlay .nav-alt-sheet.nav-alt-minimized .nav-alt-mode-tabs-v7 {
  gap: 4px !important;
}

/* ─── STATE: FULL (92% layar) ─── */
body #navAltOverlay .nav-alt-sheet.nav-alt-full,
#navAltOverlay .nav-alt-sheet.nav-alt-full {
  max-height: 92vh !important;
}

body #navAltOverlay .nav-alt-sheet.nav-alt-full .nav-alt-dots,
#navAltOverlay .nav-alt-sheet.nav-alt-full .nav-alt-dots {
  display: flex !important;
}

body #navAltOverlay .nav-alt-sheet.nav-alt-full .nav-alt-card-elev,
#navAltOverlay .nav-alt-sheet.nav-alt-full .nav-alt-card-elev {
  display: block !important;
}

/* ═══════════════════════════════════════════════════════════════
   PATCH V7: LAYOUT 2 BARIS — Mobil+Via Tol / Motor+Jalan
   ═══════════════════════════════════════════════════════════════ */

.nav-alt-mode-tabs-v7 {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  flex: 1 !important;
}

.nav-alt-tabs-row {
  display: flex !important;
  gap: 6px !important;
  width: 100% !important;
  align-items: stretch !important;
}

.nav-alt-tabs-row > button {
  flex: 1 !important;
  min-width: 0 !important;
  min-height: 36px !important;
  padding: 8px 10px !important;
  font-size: 12.5px !important;
  font-weight: 800 !important;
  border-radius: 10px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Via Tol toggle — style khusus biar konsisten */
.nav-alt-tabs-row .nav-alt-avoid-tolls {
  margin: 0 !important;
  min-height: 36px !important;
  padding: 8px 10px !important;
  font-size: 12.5px !important;
  border-radius: 10px !important;
  flex: 1 !important;
}

/* Header row spacing */
body #navAltOverlay .nav-alt-header-row,
#navAltOverlay .nav-alt-header-row {
  align-items: flex-start !important;
  padding: 8px 12px !important;
  gap: 6px !important;
}

/* Close button tetap di atas-kanan */
body #navAltOverlay .nav-alt-header-row > button:last-child,
#navAltOverlay .nav-alt-header-row > button:last-child {
  align-self: flex-start !important;
  margin-top: 2px !important;
}

/* HP kecil */
@media (max-width: 359px) {
  .nav-alt-tabs-row > button {
    font-size: 11px !important;
    padding: 7px 6px !important;
    min-height: 32px !important;
  }
  .nav-alt-tabs-row .nav-alt-avoid-tolls {
    font-size: 11px !important;
    padding: 7px 6px !important;
    min-height: 32px !important;
  }
}

/* ─── DRAG HANDLE (bar visual di atas sheet) ─── */
.nav-alt-drag-handle-wrap {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  padding: 8px 0 4px 0 !important;
  cursor: grab !important;
  touch-action: none !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  flex-shrink: 0 !important;
}

.nav-alt-drag-handle-wrap:active {
  cursor: grabbing !important;
}

.nav-alt-drag-handle {
  width: 42px !important;
  height: 5px !important;
  border-radius: 3px !important;
  background: rgba(148, 163, 184, 0.55) !important;
  transition: background 0.15s ease, transform 0.15s ease !important;
}

.nav-alt-drag-handle-wrap:active .nav-alt-drag-handle {
  background: var(--accent-primary, #10b981) !important;
  transform: scaleX(1.15) !important;
}

[data-theme="dark"] .nav-alt-drag-handle {
  background: rgba(148, 163, 184, 0.5) !important;
}

[data-theme="dark"] .nav-alt-drag-handle-wrap:active .nav-alt-drag-handle {
  background: #34d399 !important;
}

/* ─── HP KECIL ─── */
@media (max-width: 359px) {
  body #navAltOverlay .nav-alt-sheet.nav-alt-minimized,
  #navAltOverlay .nav-alt-sheet.nav-alt-minimized {
    max-height: 28vh !important;
  }
  body #navAltOverlay .nav-alt-sheet.nav-alt-full,
  #navAltOverlay .nav-alt-sheet.nav-alt-full {
    max-height: 94vh !important;
  }
}

/* ─── DRAG HANDLE — SANGAT BESAR & RESPONSIF (GMaps Style) ─── */
/* Handle bar visual */
.nav-alt-drag-handle-wrap {
  padding: 14px 0 10px 0 !important;
  min-height: 32px !important;
  cursor: grab !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100% !important;
  box-sizing: border-box !important;
  /* PENTING: biar browser tidak intercept gesture */
  touch-action: none !important;
  -webkit-touch-callout: none !important;
  -webkit-user-select: none !important;
  user-select: none !important;
}

.nav-alt-drag-handle {
  width: 60px !important;
  height: 6px !important;
  border-radius: 3px !important;
  background: rgba(148, 163, 184, 0.7) !important;
  pointer-events: none !important;
  transition: background 0.15s ease, transform 0.15s ease !important;
}

.nav-alt-drag-handle-wrap:active .nav-alt-drag-handle,
.nav-alt-drag-handle-wrap.is-dragging .nav-alt-drag-handle {
  background: var(--accent-primary, #10b981) !important;
  transform: scaleX(1.3) !important;
}

[data-theme="dark"] .nav-alt-drag-handle {
  background: rgba(148, 163, 184, 0.6) !important;
}

/* ─── HEADER ROW DRAGGABLE — Full Header sebagai area sentuh ─── */
/* GMaps style: drag dari mana saja di header, bukan cuma handle */
.nav-alt-header-row {
  touch-action: none !important;
  -webkit-user-select: none !important;
  user-select: none !important;
  cursor: grab !important;
}

.nav-alt-header-row:active {
  cursor: grabbing !important;
}

/* Tapi tombol di dalam header TETAP bisa diklik */
.nav-alt-header-row button,
.nav-alt-header-row .nav-alt-mode-tab {
  touch-action: manipulation !important;
  cursor: pointer !important;
}


/* ═══════════════════════════════════════════════════════════════
   PATCH v1.5.53 — NUCLEAR OPTION: HAPUS SEMUA BACKGROUND & BORDER
   Force override untuk SEMUA kemungkinan selector
   ═══════════════════════════════════════════════════════════════ */

/* Forcer SEMUA elemen jadi transparent — pakai banyak selector */
html .gm-watermark-dock,
html body .gm-watermark-dock,
html body[data-theme] .gm-watermark-dock,
html[data-theme] body .gm-watermark-dock,
html[data-theme="dark"] .gm-watermark-dock,
html[data-theme="light"] .gm-watermark-dock,
body[data-theme="dark"] .gm-watermark-dock,
body[data-theme="light"] .gm-watermark-dock,
[data-theme="dark"] .gm-watermark-dock,
[data-theme="light"] .gm-watermark-dock,
[data-theme] .gm-watermark-dock,
.gm-watermark-dock {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  background: none !important;
  border: 0 !important;
  border-width: 0 !important;
  border-style: none !important;
  border-color: transparent !important;
  outline: 0 !important;
  outline-width: 0 !important;
  outline-style: none !important;
  outline-color: transparent !important;
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  -moz-box-shadow: none !important;
  text-shadow: none !important;
  filter: none !important;
  -webkit-filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-radius: 0 !important;
  -webkit-border-radius: 0 !important;
  -moz-border-radius: 0 !important;
  padding: 4px 8px !important;
  margin: 0 !important;
}

/* Forcer SEMUA pseudo-element */
html .gm-watermark-dock::before,
html .gm-watermark-dock::after,
html body .gm-watermark-dock::before,
html body .gm-watermark-dock::after,
html[data-theme="dark"] .gm-watermark-dock::before,
html[data-theme="dark"] .gm-watermark-dock::after,
.gm-watermark-dock::before,
.gm-watermark-dock::after {
  display: none !important;
  content: none !important;
  background: none !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Khusus dark mode — force transparent dengan !important */
html[data-theme="dark"] .gm-watermark-dock,
html[data-theme="dark"] body .gm-watermark-dock,
body[data-theme="dark"] .gm-watermark-dock,
html body[data-theme="dark"] .gm-watermark-dock {
  background: none !important;
  background-color: transparent !important;
  background-image: none !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}


/* ═══════════════════════════════════════════════════════════════
   PATCH v1.5.54 — UI SUARA NAVIGASI TTS
   ═══════════════════════════════════════════════════════════════ */

.tts-switch-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(0, 0, 0, 0.04);
  border: 1px solid var(--border-ui);
  border-radius: 12px;
  padding: 10px 14px;
  margin-bottom: 10px;
  cursor: pointer;
  user-select: none;
}

[data-theme="dark"] .tts-switch-row {
  background: rgba(255, 255, 255, 0.05);
}

.tts-switch-info { flex: 1; min-width: 0; }

.tts-switch-title {
  font-size: 13px;
  font-weight: 800;
  color: var(--text-main);
}

.tts-switch-desc {
  font-size: 11px;
  color: var(--text-sub);
  margin-top: 2px;
  line-height: 1.4;
}

.tts-checkbox {
  width: 24px;
  height: 24px;
  accent-color: var(--accent-primary);
  cursor: pointer;
  flex-shrink: 0;
}

.tts-slider-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-main);
}

.tts-slider-row input[type="range"] {
  flex: 1;
  accent-color: var(--accent-primary);
  cursor: pointer;
}

.tts-select {
  flex: 1;
  padding: 6px 10px;
  border: 1px solid var(--border-ui);
  border-radius: 8px;
  background: var(--bg-card-solid);
  color: var(--text-main);
  font-size: 12px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
}

.btn-tts-action {
  width: 100%;
  padding: 12px 16px;
  border-radius: 12px;
  border: none;
  font-size: 13.5px;
  font-weight: 800;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 8px;
  transition: transform 0.15s ease;
  min-height: 46px;
}

.btn-tts-action:active { transform: scale(0.97); }

.btn-tts-test {
  background: rgba(16, 185, 129, 0.15);
  border: 1.5px solid var(--accent-primary);
  color: var(--accent-primary);
}

[data-theme="dark"] .btn-tts-test {
  background: rgba(52, 211, 153, 0.15);
  border-color: #34d399;
  color: #34d399;
}


/* ═══════════════════════════════════════════════════════════════
   PATCH v1.8.0 — ROUTE SIMULATOR (Virtual Drive)
   ═══════════════════════════════════════════════════════════════ */

.gm-route-simulator {
  position: fixed !important;
  bottom: 92px !important;
  left: 12px !important;
  right: 12px !important;
  max-width: 440px !important;
  margin: 0 auto !important;
  background: var(--bg-card-solid) !important;
  border: 2px solid var(--accent-primary) !important;
  border-radius: 16px !important;
  padding: 12px 14px !important;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45) !important;

  z-index: 3200 !important;
  backdrop-filter: blur(14px) !important;

  display: none !important;
  flex-direction: column !important;
  gap: 10px !important;
  animation: simSlideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;

  pointer-events: auto !important;
  visibility: visible !important;
}


.gm-route-simulator[style*="display: flex"],
.gm-route-simulator[style*="display:flex"],
.gm-route-simulator.sim-open {
  display: flex !important;
}

/* Pastikan anak-anak panel bisa diklik */
.gm-route-simulator * {
  pointer-events: auto !important;
}

@keyframes simSlideUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.sim-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding-bottom: 8px !important;
  border-bottom: 1.5px dashed var(--border-ui) !important;
}

.sim-title {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  color: var(--accent-primary) !important;
  letter-spacing: 0.5px !important;
}

.sim-btn-close {
  background: rgba(0,0,0,0.06) !important;
  border: none !important;
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  color: var(--text-sub) !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
[data-theme="dark"] .sim-btn-close {
  background: rgba(255,255,255,0.1) !important;
}
.sim-btn-close:active {
  background: rgba(239, 68, 68, 0.15) !important;
  color: #ef4444 !important;
}

.sim-info-row {
  display: grid !important;
  grid-template-columns: 1fr 1fr 1fr !important;
  gap: 6px !important;
}

.sim-info-block {
  background: var(--accent-primary-soft) !important;
  border-radius: 8px !important;
  padding: 6px 8px !important;
  text-align: center !important;
}

.sim-info-lbl {
  font-size: 8.5px !important;
  font-weight: 800 !important;
  color: var(--text-sub) !important;
  letter-spacing: 0.3px !important;
}

.sim-info-val {
  font-size: 12.5px !important;
  font-weight: 900 !important;
  color: var(--accent-primary) !important;
  font-family: monospace !important;
  margin-top: 2px !important;
}

.sim-slider-wrap {
  padding: 4px 0 !important;
}

.sim-slider {
  width: 100% !important;
  height: 36px !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  background: transparent !important;
  cursor: grab !important;

  touch-action: pan-x !important;
  pointer-events: auto !important;
  z-index: 1 !important;
  position: relative !important;
}

.sim-slider:active {
  cursor: grabbing !important;
}

.sim-slider::-webkit-slider-track {
  height: 8px !important;
  border-radius: 4px !important;
  background: linear-gradient(90deg,
    var(--accent-primary) 0%,
    var(--accent-primary) var(--sim-progress, 0%),
    rgba(148, 163, 184, 0.3) var(--sim-progress, 0%),
    rgba(148, 163, 184, 0.3) 100%) !important;
}

.sim-slider::-moz-range-track {
  height: 8px !important;
  border-radius: 4px !important;
  background: rgba(148, 163, 184, 0.3) !important;
}

.sim-slider::-webkit-slider-thumb {
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  background: #ffffff !important;
  border: 3px solid var(--accent-primary) !important;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.35), 0 0 0 3px rgba(16, 185, 129, 0.2) !important;
  cursor: grab !important;
  margin-top: -10px !important;
}

.sim-slider::-moz-range-thumb {
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  background: #ffffff !important;
  border: 3px solid var(--accent-primary) !important;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.35) !important;
  cursor: grab !important;
}

.sim-slider-marks {
  display: flex !important;
  justify-content: space-between !important;
  padding: 0 6px !important;
  margin-top: -4px !important;
  font-size: 9px !important;
  font-weight: 800 !important;
  color: var(--text-sub) !important;
  letter-spacing: 0.5px !important;
}

.sim-actions-row {
  display: flex !important;
  gap: 6px !important;
}

.sim-btn {
  flex: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  padding: 10px 8px !important;
  border-radius: 10px !important;
  border: none !important;
  font-size: 11.5px !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  transition: transform 0.15s ease !important;
  min-height: 40px !important;

  pointer-events: auto !important;
  position: relative !important;
  z-index: 2 !important;
  user-select: none !important;
  -webkit-tap-highlight-color: transparent !important;
}

.sim-btn:active {
  transform: scale(0.96) !important;
}

.sim-btn-play {
  background: var(--accent-primary) !important;
  color: #ffffff !important;
  box-shadow: 0 3px 10px rgba(6, 95, 70, 0.3) !important;
}

.sim-btn-play.active {
  background: #dc2626 !important;
  box-shadow: 0 3px 10px rgba(220, 38, 38, 0.4) !important;
}

[data-theme="dark"] .sim-btn-play {
  background: #10b981 !important;
}

[data-theme="dark"] .sim-btn-play.active {
  background: #ef4444 !important;
}

.sim-btn-speed {
  flex: 0 0 78px !important;
  background: var(--accent-amber-soft, rgba(251, 191, 36, 0.12)) !important;
  color: var(--accent-amber, #b45309) !important;
  border: 1.5px solid var(--accent-amber, #b45309) !important;
}

[data-theme="dark"] .sim-btn-speed {
  background: rgba(251, 191, 36, 0.15) !important;
  color: #fbbf24 !important;
  border-color: #fbbf24 !important;
}

.sim-btn-reset {
  flex: 0 0 80px !important;
  background: rgba(148, 163, 184, 0.15) !important;
  color: var(--text-sub) !important;
  border: 1.5px solid var(--border-ui) !important;
}

.sim-current-step {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  background: var(--accent-primary-soft) !important;
  border-left: 4px solid var(--accent-primary) !important;
  border-radius: 8px !important;
  padding: 8px 12px !important;
  margin-top: 2px !important;
}

.sim-step-icon {
  font-size: 22px !important;
  font-weight: 900 !important;
  color: var(--accent-primary) !important;
  min-width: 28px !important;
  text-align: center !important;
}

.sim-step-detail {
  flex: 1 !important;
  min-width: 0 !important;
}

.sim-step-name {
  font-size: 12.5px !important;
  font-weight: 800 !important;
  color: var(--text-main) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.sim-step-dist {
  font-size: 11px !important;
  font-weight: 700 !important;
  color: var(--accent-primary) !important;
  margin-top: 2px !important;
  font-family: monospace !important;
}

/* HP KECIL */
@media (max-width: 359px) {
  .gm-route-simulator {
    padding: 10px 10px !important;
    bottom: 88px !important;
  }
  .sim-info-val {
    font-size: 11px !important;
  }
  .sim-btn {
    font-size: 10.5px !important;
    padding: 8px 6px !important;
  }
  .sim-btn-speed, .sim-btn-reset {
    flex: 0 0 68px !important;
  }
}

/* Sembunyikan FAB dock saat simulator aktif */
body.simulator-active .gm-fab-dock {
  opacity: 0.3 !important;
  pointer-events: none !important;
}


/* Tombol SIM di navBottomBar */
.btn-nav-sim-round {
  background: rgba(16, 185, 129, 0.12) !important;
  border: 1.5px solid var(--accent-primary) !important;
  color: var(--accent-primary) !important;
  border-radius: 20px !important;
  padding: 8px 12px !important;
  font-size: 11.5px !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  flex-shrink: 0 !important;
  transition: transform 0.15s ease !important;
  margin-left: 6px !important;
}
.btn-nav-sim-round:active {
  transform: scale(0.94) !important;
}
[data-theme="dark"] .btn-nav-sim-round {
  background: rgba(52, 211, 153, 0.15) !important;
  border-color: #34d399 !important;
  color: #34d399 !important;
}


/* ═══════════════════════════════════════════════════════════════
   PATCH v1.8.1 — Minimize Panel SIM
   ═══════════════════════════════════════════════════════════════ */

/* Tombol Minimize ▼ */
.sim-btn-min {
  background: rgba(16, 185, 129, 0.15) !important;
  border: 1.5px solid var(--accent-primary) !important;
  color: var(--accent-primary) !important;
  width: 30px !important;
  height: 30px !important;
  border-radius: 50% !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
  flex-shrink: 0 !important;
}
[data-theme="dark"] .sim-btn-min {
  background: rgba(52, 211, 153, 0.15) !important;
  border-color: #34d399 !important;
  color: #34d399 !important;
}
.sim-btn-min:active {
  transform: scale(0.9) !important;
}

/* ═══════════════════════════════════════════════════════════════
   MINI INFO — hanya muncul saat minimized
   ═══════════════════════════════════════════════════════════════ */
.sim-mini-info {
  display: none !important;
  gap: 6px !important;
  align-items: center !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  color: var(--accent-primary) !important;
  font-family: monospace !important;
  margin-left: auto !important;
  margin-right: 6px !important;
  letter-spacing: 0.3px !important;
}

/* ═══════════════════════════════════════════════════════════════
   MODE MINIMIZED — Panel mengecil ke kanan bawah
   Peta + rute + panah 3D TERLIHAT PENUH
   ═══════════════════════════════════════════════════════════════ */
.gm-route-simulator.sim-minimized {
  bottom: 100px !important;
  padding: 8px 12px !important;
  max-width: 320px !important;
  left: auto !important;
  right: 12px !important;
  border-radius: 30px !important;
  /* Glow emerald biar tetap terlihat saat mini */
  box-shadow: 0 6px 20px rgba(16, 185, 129, 0.35),
              0 0 0 1.5px rgba(16, 185, 129, 0.4) !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
  animation: none !important;
}

/* Sembunyikan detail saat minimized */
.gm-route-simulator.sim-minimized .sim-info-row,
.gm-route-simulator.sim-minimized .sim-slider-wrap,
.gm-route-simulator.sim-minimized .sim-actions-row,
.gm-route-simulator.sim-minimized .sim-current-step {
  display: none !important;
}

/* Header lebih rapat saat minimized */
.gm-route-simulator.sim-minimized .sim-header {
  padding-bottom: 0 !important;
  border-bottom: none !important;
  margin-bottom: 0 !important;
  gap: 6px !important;
}

/* Title lebih ringkas */
.gm-route-simulator.sim-minimized .sim-title span:last-child {
  display: none !important;
}
.gm-route-simulator.sim-minimized .sim-title::after {
  content: 'SIM' !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  letter-spacing: 0.5px !important;
}
.gm-route-simulator.sim-minimized .sim-title {
  gap: 4px !important;
  font-size: 11px !important;
}

/* Tampilkan mini-info saat minimized */
.gm-route-simulator.sim-minimized .sim-mini-info {
  display: flex !important;
}

/* Tombol minimize jadi ▲ saat minimized */
.gm-route-simulator.sim-minimized .sim-btn-min {
  transform: rotate(180deg) !important;
}

/* HP kecil */
@media (max-width: 359px) {
  .gm-route-simulator.sim-minimized {
    max-width: 270px !important;
    padding: 6px 10px !important;
    bottom: 96px !important;
  }
  .sim-mini-info {
    font-size: 10px !important;
  }
}


/* ═══════════════════════════════════════════════════════════════
   PATCH v1.8.9i — Tombol PAUSE/PLAY di SIM Minimized
   ═══════════════════════════════════════════════════════════════ */

/* Default: hidden (hanya tampil saat minimized) */
.sim-btn-play-min {
  display: none !important;
  background: rgba(245, 158, 11, 0.15) !important;
  border: 1.5px solid #f59e0b !important;
  color: #f59e0b !important;
  width: 30px !important;
  height: 30px !important;
  border-radius: 50% !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  cursor: pointer !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  transition: transform 0.15s ease, background 0.2s ease !important;
  flex-shrink: 0 !important;
}

/* Tampilkan HANYA saat minimized */
.gm-route-simulator.sim-minimized .sim-btn-play-min {
  display: flex !important;
}

.sim-btn-play-min:active {
  transform: scale(0.9) !important;
  background: #f59e0b !important;
  color: #ffffff !important;
}

/* Warna saat playing (tombol = PAUSE) — hijau */
.sim-btn-play-min.is-playing {
  background: rgba(16, 185, 129, 0.15) !important;
  border-color: var(--accent-primary) !important;
  color: var(--accent-primary) !important;
}

[data-theme="dark"] .sim-btn-play-min {
  background: rgba(251, 191, 36, 0.15) !important;
  border-color: #fbbf24 !important;
  color: #fbbf24 !important;
}

[data-theme="dark"] .sim-btn-play-min.is-playing {
  background: rgba(52, 211, 153, 0.15) !important;
  border-color: #34d399 !important;
  color: #34d399 !important;
}


/* ═══════════════════════════════════════════════════════════════
   PATCH RADAR-ONLY v1 — HIDE ARROW PUTIH, TAMPILKAN BULAT HIJAU MULUS
   Target: navigasi & tracking pakai bulat hijau radar (HTML DOM)
   Alasan: arrow putih via WebGL mismatch 1 frame dgn marker HTML
   ═══════════════════════════════════════════════════════════════ */

/* 1. HIDE TOTAL arrow putih+segitiga khidir (HTML DOM SVG) */
.user-nav-arrow-3d,
#userNavArrow3d,
body.in-navigation .user-nav-arrow-3d,
body.in-tracking .user-nav-arrow-3d,
body.in-navigation #userNavArrow3d,
body.in-tracking #userNavArrow3d {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  pointer-events: none !important;
}

/* 2. TAMPILKAN bulat hijau radar saat navigasi & tracking */
body.in-navigation .gm-user-pulse-marker .user-dot,
body.in-navigation .gm-user-pulse-marker .pulse-ring,
body.in-navigation .gm-user-pulse-marker .heading-beam,
body.in-tracking .gm-user-pulse-marker .user-dot,
body.in-tracking .gm-user-pulse-marker .pulse-ring,
body.in-tracking .gm-user-pulse-marker .heading-beam {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* 3. Pastikan wrapper marker selalu terlihat */
.gm-user-pulse-marker {
  display: block !important;
  visibility: visible !important;
}

/* 4. Stabilkan marker — anti maju-mundur */
.gm-user-pulse-marker {
  will-change: transform;
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* 5. Transisi halus marker mengikuti kamera */
.gm-user-pulse-marker .user-dot {
  will-change: transform;
  transform: translateZ(0);
}

/* 6. Sembunyikan START pin & origin pin saat navigasi (anti tumpuk) */
body.in-navigation .gm-origin-pin,
body.in-navigation .gm-track-start-pin {
  display: none !important;
}


/* ═══════════════════════════════════════════════════════════════
   PATCH BIG RADAR v1 — Bulat hijau besar, jelas di siang terik
   Target: 22px inti + 52px ring + 90px beam. Kontras maksimal
   ═══════════════════════════════════════════════════════════════ */

/* 1. Wrapper marker */
.gm-user-pulse-marker {
  width: 38px !important;
  height: 38px !important;
}

/* 2. Inti bulat hijau — 22px, border putih tebal, glow ganda */
.gm-user-pulse-marker .user-dot {
  width: 22px !important;
  height: 22px !important;
  top: 8px !important;
  left: 8px !important;
  background: #10b981 !important;
  border: 3.5px solid #ffffff !important;
  border-radius: 50% !important;
  box-shadow:
    0 0 0 1.5px rgba(0, 0, 0, 0.35),
    0 0 14px rgba(16, 185, 129, 1),
    0 0 28px rgba(16, 185, 129, 0.55),
    inset 0 0 6px rgba(255, 255, 255, 0.5) !important;
  z-index: 3 !important;
}

/* 3. Radar pulse ring — 52px, denyut jelas */
.gm-user-pulse-marker .pulse-ring {
  width: 52px !important;
  height: 52px !important;
  top: -7px !important;
  left: -7px !important;
  background: rgba(16, 185, 129, 0.5) !important;
  border: 2px solid rgba(255, 255, 255, 0.35) !important;
  border-radius: 50% !important;
  animation: userRadarBig 1.8s infinite ease-out !important;
}

@keyframes userRadarBig {
  0%   { transform: scale(0.35); opacity: 1; }
  100% { transform: scale(1.7);  opacity: 0; }
}

/* 4. Kipas sorot arah (heading beam) — 90px */
.gm-user-pulse-marker .heading-beam {
  width: 90px !important;
  height: 90px !important;
  top: -26px !important;
  left: -26px !important;
  background: radial-gradient(circle at 50% 50%,
              rgba(16, 185, 129, 0.55) 0%,
              rgba(16, 185, 129, 0.15) 45%,
              rgba(16, 185, 129, 0) 75%) !important;
  clip-path: polygon(50% 50%, 18% 0%, 82% 0%) !important;
}

/* 5. HP kecil (<360px) — sedikit lebih kecil, tetap jelas */
@media (max-width: 359px) {
  .gm-user-pulse-marker { width: 34px !important; height: 34px !important; }
  .gm-user-pulse-marker .user-dot { width: 19px !important; height: 19px !important; top: 7.5px !important; left: 7.5px !important; border-width: 3px !important; }
  .gm-user-pulse-marker .pulse-ring { width: 46px !important; height: 46px !important; top: -6px !important; left: -6px !important; }
  .gm-user-pulse-marker .heading-beam { width: 80px !important; height: 80px !important; top: -23px !important; left: -23px !important; }
}

/* 6. Tema gelap — glow lebih terang */
[data-theme="dark"] .gm-user-pulse-marker .user-dot,
html[data-theme="dark"] .gm-user-pulse-marker .user-dot {
  box-shadow:
    0 0 0 1.5px rgba(0, 0, 0, 0.6),
    0 0 16px rgba(16, 185, 129, 1),
    0 0 32px rgba(16, 185, 129, 0.7),
    inset 0 0 6px rgba(255, 255, 255, 0.6) !important;
}


/* ═══════════════════════════════════════════════════════════════
   RADAR-FIX-62: Waze card CSS (horizontal scroll-snap)
   ═══════════════════════════════════════════════════════════════ */

.nav-alt-cards-scroll {
  display: flex !important;
  gap: 12px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scroll-snap-type: x mandatory !important;
  -webkit-overflow-scrolling: touch !important;
  padding: 8px 16px 16px !important;
  scrollbar-width: none !important;
}
.nav-alt-cards-scroll::-webkit-scrollbar {
  display: none !important;
}
.nav-alt-card {
  min-width: calc(100% - 32px) !important;
  max-width: calc(100% - 32px) !important;
  scroll-snap-align: center !important;
  background: var(--bg-card) !important;
  border: 2px solid var(--border-ui) !important;
  border-radius: 18px !important;
  padding: 16px 18px !important;
  box-sizing: border-box !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  flex-shrink: 0 !important;
}
.nav-alt-card.active {
  border-color: var(--accent-primary) !important;
  background: rgba(16, 185, 129, 0.06) !important;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15), 0 6px 20px rgba(16, 185, 129, 0.2) !important;
}
[data-theme="dark"] .nav-alt-card {
  background: var(--bg-card-solid) !important;
}
.nav-alt-card-head {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}
.nav-alt-num {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  background: linear-gradient(145deg, #10b981, #059669) !important;
  color: #ffffff !important;
  font-size: 15px !important;
  font-weight: 900 !important;
  flex-shrink: 0 !important;
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.4) !important;
}
.nav-alt-card-time {
  font-size: 24px !important;
  font-weight: 900 !important;
  color: var(--text-main) !important;
  letter-spacing: -0.5px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}
.nav-alt-best-badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: linear-gradient(145deg, #3b82f6, #2563eb) !important;
  color: #ffffff !important;
  font-size: 10px !important;
  font-weight: 900 !important;
  padding: 4px 10px !important;
  border-radius: 12px !important;
  letter-spacing: 0.5px !important;
  white-space: nowrap !important;
  margin-left: auto !important;
  box-shadow: 0 2px 6px rgba(59, 130, 246, 0.4) !important;
  border: 1.5px solid #ffffff !important;
}
.nav-alt-card-dist {
  font-size: 15px !important;
  font-weight: 800 !important;
  color: var(--accent-primary) !important;
  margin-top: -4px !important;
}
[data-theme="dark"] .nav-alt-card-dist {
  color: #34d399 !important;
}
.nav-alt-card-via {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--text-sub) !important;
  line-height: 1.5 !important;
  min-height: 38px !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
  max-height: 40px !important;
}

/* PATCH V8: Card via saat minimized — 1 baris only */
body #navAltOverlay .nav-alt-sheet.nav-alt-minimized .nav-alt-card-via,
#navAltOverlay .nav-alt-sheet.nav-alt-minimized .nav-alt-card-via {
  -webkit-line-clamp: 1 !important;
  min-height: 16px !important;
  max-height: 18px !important;
  font-size: 11px !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  display: block !important;
  overflow: hidden !important;
}
.nav-alt-go-btn {
  margin-top: 4px !important;
  width: 100% !important;
  padding: 12px 18px !important;
  background: linear-gradient(145deg, #10b981, #047857) !important;
  color: #ffffff !important;
  border: 2px solid #ffffff !important;
  border-radius: 14px !important;
  font-size: 15px !important;
  font-weight: 900 !important;
  letter-spacing: 1px !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.4) !important;
  transition: transform 0.15s ease !important;
}
.nav-alt-go-btn:active {
  transform: scale(0.96) !important;
}
.nav-alt-card.active .nav-alt-go-btn {
  background: linear-gradient(145deg, #059669, #047857) !important;
}
.nav-alt-dots {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  padding: 4px 0 10px 0 !important;
}
.nav-alt-dot {
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  background: rgba(148, 163, 184, 0.45) !important;
  transition: all 0.2s ease !important;
}
.nav-alt-dot.active {
  width: 22px !important;
  border-radius: 5px !important;
  background: var(--accent-primary) !important;
  box-shadow: 0 0 8px rgba(16, 185, 129, 0.5) !important;
}
@media (max-width: 359px) {
  .nav-alt-card {
    min-width: calc(100% - 24px) !important;
    max-width: calc(100% - 24px) !important;
    padding: 14px 14px !important;
  }
  .nav-alt-card-time { font-size: 21px !important; }
  .nav-alt-num { width: 28px !important; height: 28px !important; font-size: 13px !important; }
  .nav-alt-go-btn { font-size: 14px !important; padding: 11px 14px !important; }
}

/* ═══════════════════════════════════════════════════════════════
   END RADAR-FIX-62
   ═══════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════
   RADAR-FIX-66: Panel SIM Simple & Rapi
   - Header compact
   - Info ringkas 1 baris
   - Tombol aksi 4 kolom sejajar
   - HAPUS blok step detail (duplikat HUD)
   ═══════════════════════════════════════════════════════════════ */

/* Panel container */
.gm-route-simulator {
  padding: 12px 14px !important;
  gap: 10px !important;
  border-radius: 18px !important;
}

/* Header compact */
.sim-header {
  padding-bottom: 8px !important;
  margin-bottom: 2px !important;
  border-bottom: 1.5px dashed var(--border-ui) !important;
}

.sim-title {
  font-size: 14px !important;
  font-weight: 900 !important;
  gap: 6px !important;
}

.sim-title span:last-child {
  font-size: 14px !important;
  font-weight: 900 !important;
  letter-spacing: 0.3px !important;
}

/* Tombol minimize + close header — kecil */
.sim-btn-min, .sim-btn-close {
  width: 30px !important;
  height: 30px !important;
  font-size: 13px !important;
}

/* ═══════════════════════════════════════════════════════════════
   INFO ROW — Ringkas 1 Baris (bukan kotak-kotak besar)
   ═══════════════════════════════════════════════════════════════ */

.sim-info-row {
  display: flex !important;
  justify-content: space-between !important;
  gap: 6px !important;
  margin-bottom: 6px !important;
}

.sim-info-block {
  flex: 1 !important;
  background: transparent !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 6px 8px !important;
  text-align: center !important;
  min-height: auto !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  gap: 1px !important;
}

.sim-info-lbl {
  font-size: 9.5px !important;
  font-weight: 800 !important;
  color: var(--text-sub) !important;
  letter-spacing: 0.5px !important;
  margin-bottom: 0 !important;
  text-transform: uppercase !important;
  line-height: 1.1 !important;
}

.sim-info-val {
  font-size: 13px !important;
  font-weight: 900 !important;
  color: var(--accent-primary) !important;
  font-family: monospace !important;
  line-height: 1.15 !important;
  letter-spacing: 0.2px !important;
}

/* Slider section — rapat */
.sim-slider-wrap {
  padding: 0 !important;
  margin: 0 !important;
}

.sim-slider {
  height: 28px !important;
}

.sim-slider-marks {
  font-size: 9.5px !important;
  font-weight: 900 !important;
  color: var(--text-sub) !important;
  letter-spacing: 0.8px !important;
  padding: 0 4px !important;
  margin-top: -2px !important;
}

/* ═══════════════════════════════════════════════════════════════
   TOMBOL AKSI — 4 Kolom Compact (rapi sejajar)
   ═══════════════════════════════════════════════════════════════ */

.sim-actions-row {
  display: grid !important;
  grid-template-columns: 1.4fr 0.9fr 1.1fr 0.9fr !important;
  grid-template-areas: none !important;
  gap: 6px !important;
  margin-bottom: 2px !important;
}

.sim-btn-play {
  grid-column: auto !important;
  grid-area: auto !important;
  min-height: 42px !important;
  font-size: 12.5px !important;
  padding: 8px 6px !important;
}

.sim-btn-speed {
  grid-column: auto !important;
  grid-area: auto !important;
  min-height: 42px !important;
  font-size: 12.5px !important;
  padding: 8px 6px !important;
}

.sim-btn-alt {
  grid-column: auto !important;
  grid-area: auto !important;
  min-height: 42px !important;
  font-size: 11px !important;
  padding: 8px 4px !important;
}

.sim-btn-reset {
  grid-column: auto !important;
  grid-area: auto !important;
  min-height: 42px !important;
  font-size: 11px !important;
  padding: 8px 4px !important;
  white-space: nowrap !important;
}

/* ═══════════════════════════════════════════════════════════════
   HAPUS BLOK STEP DETAIL (duplikat HUD di atas)
   ═══════════════════════════════════════════════════════════════ */

.sim-current-step {
  display: none !important;
}

/* ═══════════════════════════════════════════════════════════════
   HP KECIL
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 359px) {
  .gm-route-simulator {
    padding: 10px 10px !important;
    gap: 8px !important;
  }
  .sim-title {
    font-size: 13px !important;
  }
  .sim-info-lbl {
    font-size: 9px !important;
  }
  .sim-info-val {
    font-size: 11.5px !important;
  }
  .sim-actions-row {
    grid-template-columns: 1.4fr 0.9fr 1.1fr 0.9fr !important;
    gap: 4px !important;
  }
  .sim-btn-play, .sim-btn-speed, .sim-btn-alt, .sim-btn-reset {
    font-size: 11px !important;
    min-height: 40px !important;
    padding: 6px 4px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   END RADAR-FIX-66
   ═══════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════
   RADAR-FIX-67 (FASE 1): Waze card — rapikan padding & gap
   Fokus: compact, ringkas, tidak ada ruang kosong
   ═══════════════════════════════════════════════════════════════ */

/* Container scroll — gap & padding rapat */
.nav-alt-cards-scroll {
  gap: 8px !important;
  padding: 4px 12px 10px !important;
}

/* Kartu — padding & gap compact */
.nav-alt-card {
  padding: 12px 14px !important;
  gap: 5px !important;
  border-radius: 14px !important;
}

/* Header kartu — gap kecil */
.nav-alt-card-head {
  gap: 8px !important;
}

/* Nomor bulat — kecil */
.nav-alt-num {
  width: 26px !important;
  height: 26px !important;
  font-size: 13px !important;
  box-shadow: 0 1px 4px rgba(16, 185, 129, 0.35) !important;
}

/* Waktu — sedang */
.nav-alt-card-time {
  font-size: 19px !important;
  letter-spacing: -0.3px !important;
}

/* Badge TERBAIK — kecil */
.nav-alt-best-badge {
  font-size: 9px !important;
  padding: 3px 8px !important;
  border-radius: 9px !important;
  letter-spacing: 0.4px !important;
  box-shadow: 0 1px 4px rgba(59, 130, 246, 0.35) !important;
}

/* Jarak (3.1 km) */
.nav-alt-card-dist {
  font-size: 13px !important;
  margin-top: -3px !important;
}

/* Via (nama jalan) */
.nav-alt-card-via {
  font-size: 12px !important;
  line-height: 1.4 !important;
  min-height: 32px !important;
  -webkit-line-clamp: 2 !important;
}

/* Tombol GO — lebih ringkas */
.nav-alt-go-btn {
  padding: 9px 14px !important;
  font-size: 13.5px !important;
  border-radius: 11px !important;
  min-height: 38px !important;
  margin-top: 2px !important;
  letter-spacing: 0.6px !important;
}

/* Tombol Share + SIM — ringkas */
.nav-alt-card-actions {
  gap: 6px !important;
  margin-top: 4px !important;
}

.nav-alt-share-btn,
.nav-alt-sim-btn {
  padding: 7px 10px !important;
  font-size: 11.5px !important;
  border-radius: 9px !important;
  min-height: 34px !important;
  gap: 4px !important;
}

/* Dots — kecil */
.nav-alt-dots {
  gap: 5px !important;
  padding: 2px 0 6px 0 !important;
}

.nav-alt-dot {
  width: 6px !important;
  height: 6px !important;
}

.nav-alt-dot.active {
  width: 18px !important;
  border-radius: 4px !important;
}

/* Tombol close header — kecil */
.nav-alt-sheet > button:first-of-type {
  width: 30px !important;
  height: 30px !important;
  font-size: 14px !important;
  top: 10px !important;
  right: 12px !important;
}

/* Sheet — padding & max-height lebih ramping */
.nav-alt-sheet {
  padding: 10px 0 14px !important;
  max-height: 58vh !important;
  border-radius: 18px 18px 0 0 !important;
}

/* ═══════════════════════════════════════════════════════════════
   Fase 1 selesai. Test dulu sebelum lanjut Fase 2.
   ═══════════════════════════════════════════════════════════════ */

/* HP kecil — tetap compact */
@media (max-width: 359px) {
  .nav-alt-card {
    padding: 10px 12px !important;
    gap: 4px !important;
  }
  .nav-alt-num {
    width: 24px !important;
    height: 24px !important;
    font-size: 12px !important;
  }
  .nav-alt-card-time {
    font-size: 17px !important;
  }
  .nav-alt-card-dist {
    font-size: 12px !important;
  }
  .nav-alt-card-via {
    font-size: 11px !important;
    min-height: 30px !important;
  }
  .nav-alt-go-btn {
    padding: 8px 12px !important;
    font-size: 12.5px !important;
    min-height: 36px !important;
  }
  .nav-alt-share-btn,
  .nav-alt-sim-btn {
    padding: 6px 8px !important;
    font-size: 10.5px !important;
    min-height: 32px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   END RADAR-FIX-67 (FASE 1)
   ═══════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════
   RADAR-FIX-71 (Fase 2): Tab mode Mobil/Motor/Jalan di Waze card
   ═══════════════════════════════════════════════════════════════ */

.nav-alt-mode-tabs {
  display: flex !important;
  gap: 6px !important;
  padding: 10px 14px 10px !important;
  background: var(--bg-card-solid) !important;
  border-bottom: 1px solid var(--border-ui) !important;
  flex-shrink: 0 !important;
  margin-bottom: 4px !important;
}

.nav-alt-mode-tab {
  flex: 1 !important;
  padding: 9px 6px !important;
  border-radius: 10px !important;
  border: 1.5px solid var(--border-ui) !important;
  background: rgba(0, 0, 0, 0.04) !important;
  color: var(--text-sub) !important;
  font-size: 12.5px !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  font-family: inherit !important;
  letter-spacing: 0.2px !important;
  white-space: nowrap !important;
  text-align: center !important;
  min-height: 38px !important;
}

.nav-alt-mode-tab:active {
  transform: scale(0.96) !important;
}

.nav-alt-mode-tab.active {
  background: var(--accent-primary) !important;
  color: #ffffff !important;
  border-color: var(--accent-primary) !important;
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.35) !important;
}

[data-theme="dark"] .nav-alt-mode-tab {
  background: rgba(255, 255, 255, 0.05) !important;
}

[data-theme="dark"] .nav-alt-mode-tab.active {
  background: #10b981 !important;
  color: #ffffff !important;
  border-color: #34d399 !important;
  box-shadow: 0 2px 10px rgba(16, 185, 129, 0.45) !important;
}

/* HP kecil */
@media (max-width: 359px) {
  .nav-alt-mode-tabs {
    padding: 8px 10px !important;
    gap: 4px !important;
  }
  .nav-alt-mode-tab {
    font-size: 11px !important;
    padding: 7px 4px !important;
    min-height: 34px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   END RADAR-FIX-71
   ═══════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════
   RADAR-FIX-72: Kontur mini di Waze card
   ═══════════════════════════════════════════════════════════════ */

.nav-alt-card-elev {
  margin-top: 6px !important;
  margin-bottom: 6px !important;
  padding: 6px 8px !important;
  background: rgba(16, 185, 129, 0.05) !important;
  border: 1px solid rgba(16, 185, 129, 0.2) !important;
  border-radius: 10px !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}

.nav-alt-card-elev:active {
  transform: scale(0.99) !important;
  background: rgba(16, 185, 129, 0.1) !important;
}

.elev-summary-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 6px !important;
  margin-bottom: 4px !important;
  font-size: 10.5px !important;
  font-weight: 800 !important;
  color: var(--text-sub) !important;
  font-family: monospace !important;
  letter-spacing: 0.2px !important;
}

.elev-stat {
  white-space: nowrap !important;
  font-size: 10.5px !important;
  font-weight: 800 !important;
}

.elev-gain {
  color: var(--accent-primary) !important;
}

[data-theme="dark"] .elev-gain {
  color: #34d399 !important;
}

.elev-detail-link {
  color: var(--accent-primary) !important;
  font-weight: 900 !important;
  font-size: 10px !important;
  text-decoration: underline !important;
}

[data-theme="dark"] .elev-detail-link {
  color: #34d399 !important;
}

.elev-mini-canvas {
  display: block !important;
  width: 100% !important;
  height: 40px !important;
  border-radius: 6px !important;
}

/* HP kecil */
@media (max-width: 359px) {
  .elev-summary-row {
    font-size: 9.5px !important;
  }
  .elev-stat {
    font-size: 9.5px !important;
  }
  .elev-mini-canvas {
    height: 34px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   END RADAR-FIX-72
   ═══════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════
   RADAR-FIX-73: Modal kontur harus di atas semua panel
   ═══════════════════════════════════════════════════════════════ */

.gm-modal#modalElevationDetail {
  z-index: 10000 !important;
}

.gm-modal#modalElevationDetail.open {
  z-index: 10000 !important;
}

/* Modal umum — naikkan biar selalu di atas overlay lain */
.gm-modal.open {
  z-index: 9999 !important;
}

/* ═══════════════════════════════════════════════════════════════
   END RADAR-FIX-73
   ═══════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════
   P1-NAVBAR: FIX NAV BOTTOM BAR — GRID 3 KOLOM FINAL
   Menggantikan semua definisi flex lama yang konflik.
   ═══════════════════════════════════════════════════════════════ */

html body .gm-nav-bottom-bar,
body .gm-nav-bottom-bar,
.gm-nav-bottom-bar {
  position: fixed !important;
  bottom: 20px !important;
  left: 12px !important;
  right: 12px !important;
  max-width: 440px !important;
  margin: 0 auto !important;

  /* GRID 3 KOLOM: Kiri (auto) | Tengah (flex) | Kanan (auto) */
  display: none;
  grid-template-columns: auto 1fr auto !important;
  align-items: center !important;
  column-gap: 10px !important;

  padding: 10px 14px !important;
  background: var(--bg-card-solid) !important;
  border: 1.5px solid var(--border-ui) !important;
  border-radius: 18px !important;
  box-shadow: 0 6px 24px rgba(0,0,0,0.25) !important;
  z-index: 3100 !important;
  backdrop-filter: blur(12px) !important;

  /* Cegah anak overflow */
  overflow: hidden !important;
}

/* Saat active — grid + animasi slide */
html body .gm-nav-bottom-bar.active,
body .gm-nav-bottom-bar.active,
.gm-nav-bottom-bar.active {
  display: grid !important;
}

/* KOLOM 1: Tombol X close — flex-shrink 0 */
html body .gm-nav-bottom-bar .btn-nav-close-round,
body .gm-nav-bottom-bar .btn-nav-close-round {
  flex-shrink: 0 !important;
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  min-height: 42px !important;
  border-radius: 50% !important;
  background: rgba(0,0,0,0.05) !important;
  border: 1.5px solid var(--border-ui) !important;
  color: var(--text-main) !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
}

[data-theme="dark"] body .gm-nav-bottom-bar .btn-nav-close-round {
  background: rgba(255,255,255,0.08) !important;
}

/* KOLOM 2: Info durasi — flex kolom center */
html body .gm-nav-bottom-bar .nav-center-trip-info,
body .gm-nav-bottom-bar .nav-center-trip-info {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 0 !important;
  overflow: hidden !important;
}

html body .gm-nav-bottom-bar .nav-big-duration,
body .gm-nav-bottom-bar .nav-big-duration {
  font-size: 20px !important;
  font-weight: 900 !important;
  color: #ea580c !important;
  line-height: 1.1 !important;
  letter-spacing: -0.3px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 100% !important;
}

html body .gm-nav-bottom-bar .nav-sub-trip-info,
body .gm-nav-bottom-bar .nav-sub-trip-info {
  font-size: 12px !important;
  font-weight: 700 !important;
  color: var(--text-sub) !important;
  margin-top: 2px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 100% !important;
}

/* KOLOM 3: Grup tombol kanan — flex horizontal */
html body .gm-nav-bottom-bar .nav-right-actions,
body .gm-nav-bottom-bar .nav-right-actions {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 6px !important;
  flex-shrink: 0 !important;
}

/* Semua tombol di dalam nav-right-actions: ukuran konsisten */
html body .gm-nav-bottom-bar .nav-right-actions > button,
body .gm-nav-bottom-bar .nav-right-actions > button {
  flex-shrink: 0 !important;
  height: 40px !important;
  min-height: 40px !important;
  padding: 0 10px !important;
  border-radius: 20px !important;
  font-size: 11.5px !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  white-space: nowrap !important;
  border-width: 1.5px !important;
  border-style: solid !important;
  transition: transform 0.15s ease !important;
}

html body .gm-nav-bottom-bar .nav-right-actions > button:active,
body .gm-nav-bottom-bar .nav-right-actions > button:active {
  transform: scale(0.94) !important;
}

/* Tombol Share */
html body .gm-nav-bottom-bar .btn-nav-share-round,
body .gm-nav-bottom-bar .btn-nav-share-round {
  background: rgba(16, 185, 129, 0.12) !important;
  border-color: var(--accent-primary) !important;
  color: var(--accent-primary) !important;
}

[data-theme="dark"] body .gm-nav-bottom-bar .btn-nav-share-round {
  background: rgba(52, 211, 153, 0.15) !important;
  border-color: #34d399 !important;
  color: #34d399 !important;
}

html body .gm-nav-bottom-bar .btn-nav-share-round svg,
body .gm-nav-bottom-bar .btn-nav-share-round svg {
  width: 16px !important;
  height: 16px !important;
  flex-shrink: 0 !important;
  fill: currentColor !important;
}

/* Tombol Rute Lain (btnNavAlt) — di-inject JS, perlu style */
html body .gm-nav-bottom-bar .btn-nav-alt-round,
body .gm-nav-bottom-bar .btn-nav-alt-round {
  background: rgba(59, 130, 246, 0.12) !important;
  border-color: #3b82f6 !important;
  color: #2563eb !important;
  position: relative !important;
}

[data-theme="dark"] body .gm-nav-bottom-bar .btn-nav-alt-round {
  background: rgba(96, 165, 250, 0.15) !important;
  border-color: #60a5fa !important;
  color: #93c5fd !important;
}

/* Badge jumlah alternatif di atas tombol Rute Lain */
html body .gm-nav-bottom-bar .btn-nav-alt-round .alt-badge,
body .gm-nav-bottom-bar .btn-nav-alt-round .alt-badge {
  position: absolute !important;
  top: -4px !important;
  right: -4px !important;
  background: #ef4444 !important;
  color: #ffffff !important;
  font-size: 9px !important;
  font-weight: 900 !important;
  min-width: 16px !important;
  height: 16px !important;
  border-radius: 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 4px !important;
  border: 1.5px solid #ffffff !important;
  line-height: 1 !important;
}

/* Tombol SIM (btnOpenSimulator) */
html body .gm-nav-bottom-bar .btn-nav-sim-round,
body .gm-nav-bottom-bar .btn-nav-sim-round {
  background: rgba(16, 185, 129, 0.12) !important;
  border-color: var(--accent-primary) !important;
  color: var(--accent-primary) !important;
}

[data-theme="dark"] body .gm-nav-bottom-bar .btn-nav-sim-round {
  background: rgba(52, 211, 153, 0.15) !important;
  border-color: #34d399 !important;
  color: #34d399 !important;
}

/* RESPONSIF: HP kecil (<360px) — sembunyikan teks tombol, biar icon saja */
@media (max-width: 359px) {
  html body .gm-nav-bottom-bar {
    padding: 8px 10px !important;
    column-gap: 6px !important;
  }
  html body .gm-nav-bottom-bar .nav-big-duration {
    font-size: 17px !important;
  }
  html body .gm-nav-bottom-bar .nav-sub-trip-info {
    font-size: 10.5px !important;
  }
  html body .gm-nav-bottom-bar .btn-nav-close-round {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
  }
  html body .gm-nav-bottom-bar .nav-right-actions > button {
    height: 36px !important;
    min-height: 36px !important;
    padding: 0 8px !important;
    font-size: 10.5px !important;
  }
  /* Sembunyikan label "Share" */
  html body .gm-nav-bottom-bar .btn-nav-share-round > span,
  body .gm-nav-bottom-bar .btn-nav-share-round > span {
    display: none !important;
  }
  /* Sembunyikan label "SIM" */
  html body .gm-nav-bottom-bar .btn-nav-sim-round > span:not(:first-child),
  body .gm-nav-bottom-bar .btn-nav-sim-round > span:not(:first-child) {
    display: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   FIX-3IN1: Modal kontur DI ATAS Waze card
   Masalah: Modal kontur z-index 10000 < Waze card z-index 10001
   → modal kontur muncul di belakang Waze card
   Fix: Naikkan z-index modal kontur ke 10002
   ═══════════════════════════════════════════════════════════════ */

html body .gm-modal#modalElevationDetail,
html body .gm-modal#modalElevationDetail.open,
body .gm-modal#modalElevationDetail,
.gm-modal#modalElevationDetail,
.gm-modal#modalElevationDetail.open {
  z-index: 10002 !important;
}

/* ═══════════════════════════════════════════════════════════════
   FIX-3IN1: Tombol X Waze card di pojok kanan atas — RAPI
   Masalah: closeBtn posisi tidak pas di dalam nav-alt-sheet
   Fix: Override dengan posisi yang lebih rapi
   ═══════════════════════════════════════════════════════════════ */

body #navAltOverlay .nav-alt-sheet > button:first-of-type,
#navAltOverlay .nav-alt-sheet > button:first-of-type {
  position: absolute !important;
  top: 10px !important;
  right: 12px !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  background: rgba(0, 0, 0, 0.08) !important;
  border: 1.5px solid var(--border-ui, #cbd5e1) !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  color: var(--text-sub, #64748b) !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 20 !important;
  padding: 0 !important;
  line-height: 1 !important;
  transition: transform 0.15s ease, background 0.15s ease !important;
}

body #navAltOverlay .nav-alt-sheet > button:first-of-type:active,
#navAltOverlay .nav-alt-sheet > button:first-of-type:active {
  transform: scale(0.92) !important;
  background: rgba(239, 68, 68, 0.15) !important;
  color: #ef4444 !important;
}

[data-theme="dark"] body #navAltOverlay .nav-alt-sheet > button:first-of-type,
[data-theme="dark"] #navAltOverlay .nav-alt-sheet > button:first-of-type {
  background: rgba(255, 255, 255, 0.1) !important;
  color: #cbd5e1 !important;
}

/* ═══════════════════════════════════════════════════════════════
   FIX6: Compact Waze Card — kurangi tinggi + ruang kosong
   Target:
   - Header row: lebih pendek
   - Card: padding lebih kecil
   - Kontur: lebih ramping
   - Sheet: max-height lebih kecil
   ═══════════════════════════════════════════════════════════════ */

/* 1. Sheet — max-height lebih kecil */
body #navAltOverlay .nav-alt-sheet,
#navAltOverlay .nav-alt-sheet {
  max-height: 48vh !important;  /* dari 62vh */
  padding: 0 0 10px !important;  /* dari 14px 0 18px */
}

/* 2. Header row — padding vertikal lebih kecil */
body #navAltOverlay .nav-alt-header-row,
#navAltOverlay .nav-alt-header-row {
  padding: 6px 12px 6px !important;  /* dari 10px 14px 10px */
  gap: 6px !important;
  border-bottom: 1px solid var(--border-ui) !important;
}

/* 3. Mode tabs — lebih pendek */
body #navAltOverlay .nav-alt-mode-tab,
#navAltOverlay .nav-alt-mode-tab {
  padding: 6px 6px !important;  /* dari 9px 6px */
  min-height: 32px !important;  /* dari 38px */
  font-size: 11.5px !important;  /* dari 12.5px */
  border-radius: 8px !important;
}

/* 4. Tombol X — lebih kecil */
body #navAltOverlay .nav-alt-header-row > button:last-child,
#navAltOverlay .nav-alt-header-row > button:last-child {
  width: 28px !important;
  height: 28px !important;
  font-size: 13px !important;
}

/* 5. Dots — lebih rapat */
body #navAltOverlay .nav-alt-dots,
#navAltOverlay .nav-alt-dots {
  padding: 2px 0 6px 0 !important;  /* dari 4px 0 10px */
  gap: 5px !important;
}

body #navAltOverlay .nav-alt-dot,
#navAltOverlay .nav-alt-dot {
  width: 5px !important;
  height: 5px !important;
}

body #navAltOverlay .nav-alt-dot.active,
#navAltOverlay .nav-alt-dot.active {
  width: 14px !important;
}

/* 6. Cards scroll — padding lebih kecil */
body #navAltOverlay .nav-alt-cards-scroll,
#navAltOverlay .nav-alt-cards-scroll {
  padding: 2px 10px 8px !important;  /* dari 4px 12px 10px */
  gap: 6px !important;
}

/* 7. Card — padding lebih kecil */
body #navAltOverlay .nav-alt-card,
#navAltOverlay .nav-alt-card {
  padding: 10px 12px !important;  /* dari 12px 14px */
  gap: 4px !important;
  border-radius: 12px !important;
}

/* 8. Card head — height lebih kecil */
body #navAltOverlay .nav-alt-card-head,
#navAltOverlay .nav-alt-card-head {
  gap: 6px !important;
  margin-bottom: 0 !important;
}

body #navAltOverlay .nav-alt-num,
#navAltOverlay .nav-alt-num {
  width: 24px !important;
  height: 24px !important;
  font-size: 12px !important;
}

body #navAltOverlay .nav-alt-card-time,
#navAltOverlay .nav-alt-card-time {
  font-size: 17px !important;  /* dari 19px */
}

body #navAltOverlay .nav-alt-best-badge,
#navAltOverlay .nav-alt-best-badge {
  font-size: 8.5px !important;
  padding: 2px 6px !important;
}

body #navAltOverlay .nav-alt-card-dist,
#navAltOverlay .nav-alt-card-dist {
  font-size: 12px !important;  /* dari 13px */
  margin-top: -2px !important;
}

body #navAltOverlay .nav-alt-card-via,
#navAltOverlay .nav-alt-card-via {
  font-size: 11px !important;
  line-height: 1.35 !important;
  min-height: 26px !important;
}

/* 9. Kontur box — padding minimal */
body #navAltOverlay .nav-alt-card-elev,
#navAltOverlay .nav-alt-card-elev {
  margin-top: 3px !important;
  margin-bottom: 3px !important;
  padding: 3px 6px !important;
  border-radius: 8px !important;
}

/* 10. Summary row kontur — kecil */
body #navAltOverlay .nav-alt-card-elev .elev-summary-row,
#navAltOverlay .nav-alt-card-elev .elev-summary-row {
  font-size: 9px !important;
  margin-bottom: 1px !important;
  gap: 3px !important;
}

body #navAltOverlay .nav-alt-card-elev .elev-stat,
#navAltOverlay .nav-alt-card-elev .elev-stat {
  font-size: 9px !important;
}

body #navAltOverlay .nav-alt-card-elev .elev-detail-link,
#navAltOverlay .nav-alt-card-elev .elev-detail-link {
  font-size: 9px !important;
}

/* 11. Canvas kontur — 28px (dari 35px) */
body #navAltOverlay .nav-alt-card-elev .elev-mini-canvas,
#navAltOverlay .nav-alt-card-elev .elev-mini-canvas {
  height: 26px !important;
  max-height: 26px !important;
  min-height: 26px !important;
  margin-top: 1px !important;
}

/* 12. GO button — tetap proporsional */
body #navAltOverlay .nav-alt-go-btn,
#navAltOverlay .nav-alt-go-btn {
  padding: 8px 12px !important;
  font-size: 12.5px !important;
  min-height: 34px !important;
  margin-top: 2px !important;
}


/* ═══════════════════════════════════════════════════════════════
   PATCH TOLL-1C: Toggle "Hindari Tol" untuk mode Mobil
   HANYA muncul di Waze card saat mode Mobil
   ═══════════════════════════════════════════════════════════════ */

.nav-alt-avoid-tolls {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 6px 12px !important;
  border-radius: 8px !important;
  border: 1.5px solid var(--border-ui) !important;
  background: rgba(0, 0, 0, 0.04) !important;
  color: var(--text-sub) !important;
  font-size: 11.5px !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  margin-left: 4px !important;
  transition: all 0.15s ease !important;
  font-family: inherit !important;
  min-height: 32px !important;
}

.nav-alt-avoid-tolls:hover {
  background: rgba(16, 185, 129, 0.08) !important;
  border-color: var(--accent-primary) !important;
}

.nav-alt-avoid-tolls:active {
  transform: scale(0.96) !important;
}

.nav-alt-avoid-tolls.active {
  background: var(--accent-primary) !important;
  color: #ffffff !important;
  border-color: var(--accent-primary) !important;
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.35) !important;
}

[data-theme="dark"] .nav-alt-avoid-tolls {
  background: rgba(255, 255, 255, 0.05) !important;
}

[data-theme="dark"] .nav-alt-avoid-tolls.active {
  background: #10b981 !important;
  color: #0a1a12 !important;
  border-color: #34d399 !important;
  box-shadow: 0 2px 10px rgba(16, 185, 129, 0.5) !important;
}

/* Responsif HP kecil */
@media (max-width: 359px) {
  .nav-alt-avoid-tolls {
    font-size: 10.5px !important;
    padding: 5px 9px !important;
    min-height: 30px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   PATCH FASE2B: Tombol "Posisi Saya" di Input Route (GMaps style)
   ═══════════════════════════════════════════════════════════════ */

.btn-posisi-saya {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid var(--accent-primary);
  background: var(--bg-card);
  color: var(--accent-primary);
  cursor: pointer;
  flex-shrink: 0;
  padding: 0;
  transition: all 0.15s ease;
  margin-right: 4px;
}

.btn-posisi-saya:hover {
  background: var(--accent-primary-soft);
  transform: scale(1.05);
}

.btn-posisi-saya:active {
  transform: scale(0.92);
  background: var(--accent-primary);
  color: #ffffff;
}

.btn-posisi-saya svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

[data-theme="dark"] .btn-posisi-saya {
  background: var(--bg-card);
  border-color: var(--accent-primary-hover);
  color: var(--accent-primary-hover);
}

[data-theme="dark"] .btn-posisi-saya:hover {
  background: rgba(52, 211, 153, 0.15);
}

@media (max-width: 359px) {
  .btn-posisi-saya {
    width: 28px;
    height: 28px;
    margin-right: 2px;
  }
  .btn-posisi-saya svg {
    width: 16px;
    height: 16px;
  }
}


/* ═══════════════════════════════════════════════════════════════
   PATCH FASE2C: Style Riwayat Pencarian Rute
   ═══════════════════════════════════════════════════════════════ */

.route-sugg-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 10px 16px 8px 16px !important;
  font-size: 11.5px !important;
  font-weight: 900 !important;
  color: var(--accent-primary) !important;
  letter-spacing: 0.8px !important;
  text-transform: uppercase !important;
  border-bottom: 1.5px solid var(--border-ui) !important;
  margin-bottom: 4px !important;
  background: var(--bg-card-solid) !important;
  border-radius: 14px 14px 0 0 !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 2 !important;
}

[data-theme="dark"] .route-sugg-header {
  background: var(--bg-card-solid) !important;
}

.btn-clear-history {
  background: rgba(239, 68, 68, 0.12) !important;
  border: 1.5px solid #ef4444 !important;
  color: #ef4444 !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  padding: 4px 10px !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  font-family: inherit !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  transition: all 0.15s ease !important;
}

.btn-clear-history:hover {
  background: #ef4444 !important;
  color: #ffffff !important;
}

.btn-clear-history:active {
  transform: scale(0.94) !important;
}

[data-theme="dark"] .btn-clear-history {
  background: rgba(239, 68, 68, 0.15) !important;
  border-color: #ef4444 !important;
  color: #fca5a5 !important;
}

.route-sugg-history-item {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 12px 16px !important;
}

.route-sugg-history-item .history-icon {
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  background: var(--accent-primary-soft) !important;
  border: 1.5px solid var(--accent-primary) !important;
  color: var(--accent-primary) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 15px !important;
  flex-shrink: 0 !important;
}

[data-theme="dark"] .route-sugg-history-item .history-icon {
  background: rgba(16, 185, 129, 0.15) !important;
  border-color: #34d399 !important;
  color: #34d399 !important;
}

.route-sugg-history-item .history-info {
  flex: 1 !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
}

.route-sugg-history-item .route-sugg-title {
  font-size: 15px !important;
  font-weight: 800 !important;
  color: var(--text-main) !important;
  line-height: 1.3 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.route-sugg-history-item .route-sugg-desc {
  font-size: 12.5px !important;
  font-weight: 600 !important;
  color: var(--text-sub) !important;
  line-height: 1.4 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

@media (max-width: 359px) {
  .route-sugg-history-item {
    padding: 10px 14px !important;
    gap: 10px !important;
  }
  .route-sugg-history-item .history-icon {
    width: 28px !important;
    height: 28px !important;
    font-size: 13px !important;
  }
  .btn-clear-history {
    font-size: 9px !important;
    padding: 3px 8px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   PATCH FASE2C-KOTA: Scrollbar Hijau + Style Riwayat Search Kota
   ═══════════════════════════════════════════════════════════════ */

/* 1. Scrollbar hijau untuk search kota (sama dengan search rute) */
.gm-suggestions {
  scrollbar-width: thin !important;
  scrollbar-color: var(--accent-primary) transparent !important;
  -webkit-overflow-scrolling: touch !important;
}

.gm-suggestions::-webkit-scrollbar {
  width: 6px !important;
}

.gm-suggestions::-webkit-scrollbar-track {
  background: transparent !important;
}

.gm-suggestions::-webkit-scrollbar-thumb {
  background: var(--accent-primary) !important;
  border-radius: 3px !important;
}

.gm-suggestions::-webkit-scrollbar-thumb:hover {
  background: var(--accent-primary-hover, #34d399) !important;
}

/* 2. Header riwayat di search kota */
.gm-search-history-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 10px 14px 8px 14px !important;
  font-size: 11.5px !important;
  font-weight: 900 !important;
  color: var(--accent-primary) !important;
  letter-spacing: 0.8px !important;
  text-transform: uppercase !important;
  border-bottom: 1.5px solid var(--border-ui) !important;
  margin-bottom: 4px !important;
  background: var(--bg-card-solid) !important;
  border-radius: 14px 14px 0 0 !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 2 !important;
}

[data-theme="dark"] .gm-search-history-header {
  background: var(--bg-card-solid) !important;
}

/* 3. Item riwayat kota — flex layout dengan icon */
.gm-history-item {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 12px 14px !important;
}

.gm-history-item .history-icon {
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  background: var(--accent-primary-soft) !important;
  border: 1.5px solid var(--accent-primary) !important;
  color: var(--accent-primary) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 15px !important;
  flex-shrink: 0 !important;
}

[data-theme="dark"] .gm-history-item .history-icon {
  background: rgba(16, 185, 129, 0.15) !important;
  border-color: #34d399 !important;
  color: #34d399 !important;
}

.gm-history-item .history-info {
  flex: 1 !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
}

.gm-history-item .gm-sugg-title {
  font-size: 15px !important;
  font-weight: 800 !important;
  color: var(--text-main) !important;
  line-height: 1.3 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.gm-history-item .gm-sugg-desc {
  font-size: 12.5px !important;
  font-weight: 600 !important;
  color: var(--text-sub) !important;
  line-height: 1.4 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* 4. HP kecil */
@media (max-width: 359px) {
  .gm-history-item {
    padding: 10px 12px !important;
    gap: 10px !important;
  }
  .gm-history-item .history-icon {
    width: 28px !important;
    height: 28px !important;
    font-size: 13px !important;
  }
}



/* [FERRY-CLEANUP] Blok PATCH FERRY-FINALBLOCK dihapus (dead code, kalah oleh THEME-FINAL). */

/* [FERRY-CLEANUP] Blok PATCH FERRY-FINALBIG dihapus (dead code, kalah oleh THEME-FINAL). */

/* [FERRY-CLEANUP] Blok PATCH FERRY-GMAPS dihapus (dead code, kalah oleh THEME-FINAL). */

/* [FERRY-CLEANUP] Blok PATCH FERRY-SPLIT dihapus (dead code, kalah oleh THEME-FINAL). */

/* [FERRY-CLEANUP] Blok PATCH FERRY-CALIB dihapus (dead code, kalah oleh THEME-FINAL). */

/* ═══════════════════════════════════════════════════════════════
   PATCH FERRY-THEME-FINAL — Icon 60px + Tema Light/Dark Elegan
   ═══════════════════════════════════════════════════════════════ */

/* ─── Container ─── */
#ferryShipOverlay {
  position: fixed !important;
  z-index: 900 !important;  /* PATCH FERRYSCOPE v1: di bawah search bar (1000) */
  pointer-events: auto !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  isolation: isolate !important;
}

/* ─── ICON 60px — Proporsional ─── */
#ferryShipOverlay .ferry-ship-icon {
  width: 60px !important;
  height: 60px !important;
  min-width: 60px !important;
  min-height: 60px !important;
  max-width: 60px !important;
  max-height: 60px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 34px !important;
  line-height: 1 !important;
  box-sizing: border-box !important;
  flex-shrink: 0 !important;
  position: relative !important;
  z-index: 3 !important;
  /* Default: dark theme (fallback) */
  background: #1a2332 !important;
  border: 4px solid #22d3ee !important;
  box-shadow:
    0 6px 16px rgba(6, 182, 212, 0.6),
    0 0 0 3px rgba(255, 255, 255, 0.5),
    0 0 0 6px rgba(34, 211, 238, 0.35),
    0 0 25px rgba(34, 211, 238, 0.9) !important;
  animation: ferryPulseTheme 2s infinite ease-in-out !important;
}

@keyframes ferryPulseTheme {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.06);
  }
}

/* ─── LIGHT MODE — Putih elegan + border biru ─── */
html[data-theme="light"] #ferryShipOverlay .ferry-ship-icon,
body[data-theme="light"] #ferryShipOverlay .ferry-ship-icon,
[data-theme="light"] #ferryShipOverlay .ferry-ship-icon {
  background: #ffffff !important;
  border: 4px solid #1a73e8 !important;
  box-shadow:
    0 6px 16px rgba(26, 115, 232, 0.5),
    0 0 0 3px rgba(255, 255, 255, 0.95),
    0 0 0 6px rgba(26, 115, 232, 0.3),
    0 0 25px rgba(26, 115, 232, 0.85) !important;
}

/* ─── DARK MODE — Dark elegan + border cyan ─── */
html[data-theme="dark"] #ferryShipOverlay .ferry-ship-icon,
body[data-theme="dark"] #ferryShipOverlay .ferry-ship-icon,
[data-theme="dark"] #ferryShipOverlay .ferry-ship-icon {
  background: #1a2332 !important;
  border: 4px solid #22d3ee !important;
  box-shadow:
    0 6px 18px rgba(6, 182, 212, 0.7),
    0 0 0 3px rgba(255, 255, 255, 0.5),
    0 0 0 6px rgba(34, 211, 238, 0.4),
    0 0 30px rgba(34, 211, 238, 1) !important;
}

/* ─── Wrapper Label ─── */
#ferryShipOverlay .ferry-ship-label-wrap {
  margin-top: 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  pointer-events: auto !important;
}

/* ─── Label — Dark by default ─── */
#ferryShipOverlay .ferry-ship-label {
  font-size: 14px !important;
  font-weight: 900 !important;
  padding: 5px 12px !important;
  border-radius: 12px !important;
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  white-space: nowrap !important;
  letter-spacing: 0.4px !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  position: relative !important;
  z-index: 2 !important;
  /* Dark theme default */
  background: #0f172a !important;
  color: #22d3ee !important;
  border: 2.5px solid #22d3ee !important;
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.6),
    0 0 0 2px rgba(34, 211, 238, 0.2),
    0 0 20px rgba(34, 211, 238, 0.5) !important;
}

/* ─── LIGHT MODE — label putih + teks biru ─── */
html[data-theme="light"] #ferryShipOverlay .ferry-ship-label,
body[data-theme="light"] #ferryShipOverlay .ferry-ship-label,
[data-theme="light"] #ferryShipOverlay .ferry-ship-label {
  background: #ffffff !important;
  color: #1a73e8 !important;
  border: 2.5px solid #1a73e8 !important;
  box-shadow:
    0 4px 12px rgba(26, 115, 232, 0.35),
    0 0 0 2px rgba(26, 115, 232, 0.15),
    0 0 15px rgba(26, 115, 232, 0.4) !important;
}

/* ─── DARK MODE — label dark + teks cyan ─── */
html[data-theme="dark"] #ferryShipOverlay .ferry-ship-label,
body[data-theme="dark"] #ferryShipOverlay .ferry-ship-label,
[data-theme="dark"] #ferryShipOverlay .ferry-ship-label {
  background: #0f172a !important;
  color: #22d3ee !important;
  border: 2.5px solid #22d3ee !important;
  box-shadow:
    0 4px 14px rgba(0, 0, 0, 0.7),
    0 0 0 2px rgba(34, 211, 238, 0.25),
    0 0 22px rgba(34, 211, 238, 0.6) !important;
}

/* Hapus pseudo-element lama */
#ferryShipOverlay .ferry-ship-label::before {
  content: none !important;
  display: none !important;
}

/* ─── Desktop — sedikit lebih besar ─── */
@media (min-width: 768px) {
  #ferryShipOverlay .ferry-ship-icon {
    width: 70px !important;
    height: 70px !important;
    min-width: 70px !important;
    min-height: 70px !important;
    max-width: 70px !important;
    max-height: 70px !important;
    font-size: 40px !important;
    border-width: 5px !important;
  }
  #ferryShipOverlay .ferry-ship-label {
    font-size: 16px !important;
    padding: 6px 14px !important;
  }
}

/* ─── HP kecil ─── */
@media (max-width: 359px) {
  #ferryShipOverlay .ferry-ship-icon {
    width: 55px !important;
    height: 55px !important;
    min-width: 55px !important;
    min-height: 55px !important;
    max-width: 55px !important;
    max-height: 55px !important;
    font-size: 30px !important;
    border-width: 4px !important;
  }
  #ferryShipOverlay .ferry-ship-label {
    font-size: 13px !important;
    padding: 4px 10px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   END FERRY-THEME-FINAL
   ═══════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════
   KMAP-PATCH-E: Ganti Warna Biru -> Hijau Khidir
   Target: Tombol close, tombol Rute Lain, badge TERBAIK, caret input
   Support light & dark theme
   ═══════════════════════════════════════════════════════════════ */

/* --- E1: Tombol Close "X" di Input Route --- */
html body .route-top-card .btn-route-close,
html body #routeTopCard .btn-route-close {
  color: var(--accent-primary) !important;
  background: transparent !important;
  border: none !important;
  font-weight: 900 !important;
  font-size: 18px !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}
html body .route-top-card .btn-route-close:active,
html body #routeTopCard .btn-route-close:active {
  color: #ffffff !important;
  background: var(--accent-primary) !important;
  border-radius: 50% !important;
}
[data-theme="dark"] html body .route-top-card .btn-route-close,
[data-theme="dark"] html body #routeTopCard .btn-route-close {
  color: var(--accent-primary-hover) !important;
}
[data-theme="dark"] html body .route-top-card .btn-route-close:active,
[data-theme="dark"] html body #routeTopCard .btn-route-close:active {
  background: var(--accent-primary-hover) !important;
  color: #0a1a12 !important;
}

/* --- E2: Tombol Close "X" di Route Sheet --- */
html body .btn-sheet-close-top {
  color: var(--accent-primary) !important;
  border-color: var(--accent-primary) !important;
}
html body .btn-sheet-close-top:active {
  color: #ffffff !important;
  background: var(--accent-primary) !important;
}
[data-theme="dark"] html body .btn-sheet-close-top {
  color: var(--accent-primary-hover) !important;
  border-color: var(--accent-primary-hover) !important;
}

/* --- E3: Caret (kursor ketik) di Input Route --- */
html body .route-top-card .route-top-input,
html body #routeTopCard .route-top-input,
html body #routeOrigin,
html body #routeDestination {
  caret-color: var(--accent-primary) !important;
}
[data-theme="dark"] html body .route-top-card .route-top-input,
[data-theme="dark"] html body #routeOrigin,
[data-theme="dark"] html body #routeDestination {
  caret-color: var(--accent-primary-hover) !important;
}

/* --- E4: Selection (blok teks) di Input Route --- */
html body .route-top-card .route-top-input::selection,
html body #routeOrigin::selection,
html body #routeDestination::selection {
  background: var(--accent-primary) !important;
  color: #ffffff !important;
}
[data-theme="dark"] html body .route-top-card .route-top-input::selection,
[data-theme="dark"] html body #routeOrigin::selection,
[data-theme="dark"] html body #routeDestination::selection {
  background: var(--accent-primary-hover) !important;
  color: #0a1a12 !important;
}

/* --- E5: Tombol "Rute Lain" di Nav Bottom Bar --- */
html body .gm-nav-bottom-bar .btn-nav-alt-round,
body .gm-nav-bottom-bar .btn-nav-alt-round {
  background: var(--accent-primary-soft) !important;
  border-color: var(--accent-primary) !important;
  color: var(--accent-primary) !important;
}
html body .gm-nav-bottom-bar .btn-nav-alt-round svg,
body .gm-nav-bottom-bar .btn-nav-alt-round svg {
  fill: var(--accent-primary) !important;
}
[data-theme="dark"] html body .gm-nav-bottom-bar .btn-nav-alt-round,
[data-theme="dark"] body .gm-nav-bottom-bar .btn-nav-alt-round {
  background: rgba(52, 211, 153, 0.15) !important;
  border-color: var(--accent-primary-hover) !important;
  color: var(--accent-primary-hover) !important;
}
[data-theme="dark"] html body .gm-nav-bottom-bar .btn-nav-alt-round svg,
[data-theme="dark"] body .gm-nav-bottom-bar .btn-nav-alt-round svg {
  fill: var(--accent-primary-hover) !important;
}

/* --- E6: Badge "TERBAIK" di Waze Card --- */
body #navAltOverlay .nav-alt-best-badge,
#navAltOverlay .nav-alt-best-badge {
  background: linear-gradient(145deg, #10b981, #047857) !important;
  color: #ffffff !important;
  border: 1.5px solid #ffffff !important;
  box-shadow: 0 2px 6px rgba(16, 185, 129, 0.4) !important;
}
[data-theme="dark"] body #navAltOverlay .nav-alt-best-badge,
[data-theme="dark"] #navAltOverlay .nav-alt-best-badge {
  background: linear-gradient(145deg, #34d399, #059669) !important;
  color: #0a1a12 !important;
  border-color: #34d399 !important;
  box-shadow: 0 2px 8px rgba(52, 211, 153, 0.5) !important;
}

/* --- E7: Tombol SWAP (tukar arah) --- */
html body .route-top-card .btn-route-swap,
html body #routeTopCard .btn-route-swap {
  color: var(--accent-primary) !important;
}
html body .route-top-card .btn-route-swap svg,
html body #routeTopCard .btn-route-swap svg {
  fill: var(--accent-primary) !important;
}
[data-theme="dark"] html body .route-top-card .btn-route-swap,
[data-theme="dark"] html body #routeTopCard .btn-route-swap {
  color: var(--accent-primary-hover) !important;
}
[data-theme="dark"] html body .route-top-card .btn-route-swap svg,
[data-theme="dark"] html body #routeTopCard .btn-route-swap svg {
  fill: var(--accent-primary-hover) !important;
}

/* --- E8: Tombol CALC (kaca pembesar) di Input Route --- */
html body .route-top-card .btn-route-calc,
html body #routeTopCard .btn-route-calc {
  color: var(--accent-primary) !important;
}
html body .route-top-card .btn-route-calc svg,
html body #routeTopCard .btn-route-calc svg {
  fill: var(--accent-primary) !important;
}
[data-theme="dark"] html body .route-top-card .btn-route-calc,
[data-theme="dark"] html body #routeTopCard .btn-route-calc {
  color: var(--accent-primary-hover) !important;
}
[data-theme="dark"] html body .route-top-card .btn-route-calc svg,
[data-theme="dark"] html body #routeTopCard .btn-route-calc svg {
  fill: var(--accent-primary-hover) !important;
}

/* ═══════════════════════════════════════════════════════════════
   END KMAP-PATCH-E
   ═══════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════
   KMAP-PATCH-F2: Dropdown Riwayat Compact (5 item, scroll)
   Lebar = sama dengan kartu input (12px kiri-kanan)
   ═══════════════════════════════════════════════════════════════ */

/* Lebar & Posisi Presisi Mobile */
html body .route-sugg-box,
html body #suggOrigin,
html body #suggDestination,
html body .gm-suggestions,
html body #searchSuggestions {
  position: fixed !important;
  left: 12px !important;
  right: 12px !important;
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  transform: none !important;
}

/* Desktop */
@media (min-width: 768px) {
  html body .route-sugg-box,
  html body #suggOrigin,
  html body #suggDestination,
  html body .gm-suggestions,
  html body #searchSuggestions {
    left: 20px !important;
    right: 20px !important;
    max-width: 420px !important;
    margin: 0 auto !important;
  }
}

/* Tinggi 5 item */
html body .route-sugg-box,
html body .gm-suggestions {
  max-height: 360px !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
}

@media (max-width: 359px) {
  html body .route-sugg-box,
  html body .gm-suggestions {
    max-height: 320px !important;
  }
}

/* Item Compact */
html body .route-sugg-item,
html body .gm-sugg-item,
html body .route-sugg-history-item,
html body .gm-history-item {
  padding: 10px 14px !important;
}

html body .route-sugg-history-item .history-icon,
html body .gm-history-item .history-icon {
  width: 30px !important;
  height: 30px !important;
  font-size: 14px !important;
}

html body .route-sugg-history-item .route-sugg-title,
html body .gm-history-item .gm-sugg-title {
  font-size: 15px !important;
  line-height: 1.25 !important;
}

html body .route-sugg-history-item .route-sugg-desc,
html body .gm-history-item .gm-sugg-desc {
  font-size: 12.5px !important;
  line-height: 1.3 !important;
  margin-top: 1px !important;
}

/* Header Compact */
html body .route-sugg-header,
html body .gm-search-history-header {
  padding: 8px 14px 6px 14px !important;
  font-size: 11px !important;
  margin-bottom: 2px !important;
}

html body .btn-clear-history {
  font-size: 9.5px !important;
  padding: 3px 9px !important;
  min-height: 26px !important;
}

/* Scrollbar Hijau */
html body .route-sugg-box::-webkit-scrollbar,
html body .gm-suggestions::-webkit-scrollbar {
  width: 5px !important;
}
html body .route-sugg-box::-webkit-scrollbar-thumb,
html body .gm-suggestions::-webkit-scrollbar-thumb {
  background: var(--accent-primary) !important;
  border-radius: 3px !important;
}

/* Padding container */
html body .route-sugg-box {
  padding: 4px 0 8px 0 !important;
}
html body .gm-suggestions {
  padding: 4px 0 !important;
}

/* ═══════════════════════════════════════════════════════════════
   END KMAP-PATCH-F2
   ═══════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════
   KMAP-PATCH-H: Hapus backdrop-filter di #routeTopCard
   Root cause: backdrop-filter: blur(12px) bikin containing block baru
              untuk descendant position: fixed (dropdown riwayat)
   Akibat: Dropdown riwayat relatif ke #routeTopCard (309px),
           bukan viewport (360px) → geser + sempit 27px
   Solusi: Hapus backdrop-filter, ganti background solid
   ═══════════════════════════════════════════════════════════════ */

/* --- H1: #routeTopCard tanpa backdrop-filter (biar dropdown fixed viewport) --- */
html body #routeTopCard,
html body .route-top-card {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background: var(--bg-card-solid) !important;
}

[data-theme="dark"] html body #routeTopCard,
[data-theme="dark"] html body .route-top-card {
  background: var(--bg-card-solid) !important;
}

/* --- H2: Pastikan Dropdown Sekarang Fixed ke Viewport --- */
@media (max-width: 767px) {
  html body #routeTopCard .route-sugg-box,
  html body #routeTopCard #suggOrigin,
  html body #routeTopCard #suggDestination,
  html body .route-top-card .route-sugg-box,
  html body .route-top-card #suggOrigin,
  html body .route-top-card #suggDestination {
    position: fixed !important;
    left: 12px !important;
    right: 12px !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    transform: none !important;
  }
}

/* --- H3: Desktop Konsisten --- */
@media (min-width: 768px) {
  html body #routeTopCard .route-sugg-box,
  html body .route-top-card .route-sugg-box {
    left: 20px !important;
    right: auto !important;
    width: 420px !important;
    max-width: 420px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   END KMAP-PATCH-H
   ═══════════════════════════════════════════════════════════════ */

/* ═══ PATCH v1.12.28-CSS-WPCAT: Waypoint Form Category Buttons ═══ */
.wp-cat-btn {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 8px 4px; border-radius: 8px; border: 2px solid var(--border-ui);
  background: var(--bg-card); color: var(--text-main); font-size: 18px;
  cursor: pointer; transition: all 0.15s ease; min-height: 60px; line-height: 1;
}
.wp-cat-btn span {
  font-size: 9px; font-weight: 800; margin-top: 4px; line-height: 1.1;
  text-align: center; word-break: break-word; display: block;
}
.wp-cat-btn:active { transform: scale(0.92); }
.wp-cat-btn.active-cat {
  background: rgba(16, 185, 129, 0.15); border-color: #10b981;
  box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.3);
}
[data-theme="dark"] .wp-cat-btn { background: #1e293b; border-color: #334155; color: #e8f0eb; }
[data-theme="dark"] .wp-cat-btn.active-cat { background: rgba(16, 185, 129, 0.2); border-color: #34d399; }


/* ═══ PATCH v1.12.29-PUBWPF3-CSS: Marker Waypoint Publik ═══ */
.gm-public-wp-pin {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  transform: translate(-50%, -100%);
}
.pub-wp-label {
  background: transparent !important;
  color: #ffffff !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  padding: 0 4px !important;
  border: none !important;
  white-space: nowrap;
  margin-bottom: 2px;
  letter-spacing: 0.3px;
  pointer-events: none;
  text-shadow:
    -1px -1px 0 #1e40af,
     1px -1px 0 #1e40af,
    -1px  1px 0 #1e40af,
     1px  1px 0 #1e40af,
     0 0 4px rgba(30,64,175,0.9) !important;
}


/* KMAP-WP-UIFIX v10.0-CSS */
/* KMAP-WPFIX v3.1: GMaps Style Bottom Sheet (100% Full Screen) */
#modalWaypointDetail {
  height: 92vh !important;
  max-height: 92vh !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
}
#modalWaypointDetail .modal-content {
  padding: 0 !important;
  flex: 1 !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 40px !important;
  /* GMaps style drag handle */
  position: relative;
}
#modalWaypointDetail .modal-content::before {
  content: '';
  display: block;
  width: 40px;
  height: 5px;
  background: var(--border-ui);
  border-radius: 3px;
  margin: 8px auto;
}
#modalWaypointDetail .modal-content::-webkit-scrollbar {
  width: 6px;
}
#modalWaypointDetail .modal-content::-webkit-scrollbar-thumb {
  background: var(--accent-primary);
  border-radius: 3px;
}
#wpDetailGallery > div {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
#wpDetailGallery > div:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.35);
}
#wpDetailGallery > div:active {
  transform: scale(0.98);
}
#wpDetailActions button {
  min-height: 48px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.2px;
}
[data-theme="dark"] #wpDetailHero {
  background: linear-gradient(135deg, #064e3b, #059669);
}
[data-theme="dark"] #wpDetailCategoryBadge {
  border: 1px solid rgba(255,255,255,0.2);
}


/* GMAP-WARNA-CSS-FALLBACK v1: Jangan paksa warna di CSS */
.waypoint-badge {
  /* Warna dari inline JS (__getCategoryColor). Jangan override dengan !important */
}

/* KMAP-MOTTO-CSS: Popup Motto Survival */
.kmap-motto-overlay {
  position: fixed; top: 80px; left: 50%;
  transform: translateX(-50%) translateY(-20px);
  z-index: 1500; width: 100%; max-width: 420px; padding: 0 16px;
  opacity: 0; transition: opacity 0.4s ease, transform 0.4s ease;
  pointer-events: none;
}
.kmap-motto-overlay.active {
  opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto;
}
.kmap-motto-card {
  background: var(--bg-card-solid); border: 2px solid var(--accent-primary);
  border-radius: 20px; padding: 22px 20px; text-align: center;
  box-shadow: 0 12px 40px rgba(0,0,0,0.35), 0 0 20px rgba(16, 185, 129, 0.2);
  backdrop-filter: blur(14px); position: relative; overflow: hidden;
}
.kmap-motto-card::before {
  content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%;
  background: radial-gradient(circle at center, rgba(16, 185, 129, 0.08) 0%, transparent 60%);
  pointer-events: none;
}
.kmap-motto-icon { font-size: 42px; margin-bottom: 10px; filter: drop-shadow(0 4px 8px rgba(16,185,129,0.4)); }
.kmap-motto-title { font-size: 20px; font-weight: 900; color: var(--text-main); line-height: 1.3; margin-bottom: 10px; }
[data-theme="dark"] .kmap-motto-title { color: #ffffff; text-shadow: 0 2px 10px rgba(16,185,129,0.4); }
.kmap-motto-sub { font-size: 12.5px; color: var(--text-sub); line-height: 1.6; margin-bottom: 18px; }
.kmap-motto-btn {
  width: 100%; padding: 13px 20px; background: var(--accent-primary); color: #ffffff;
  border: none; border-radius: 12px; font-size: 13.5px; font-weight: 900;
  cursor: pointer; transition: transform 0.15s, background 0.2s;
  box-shadow: 0 4px 14px rgba(16,185,129,0.35); margin-bottom: 8px;
}
.kmap-motto-btn:active { transform: scale(0.97); }
.kmap-motto-wa-btn {
  width: 100%; padding: 13px 20px; background: rgba(37,211,102,0.15); color: #25D366;
  border: 1.5px solid #25D366; border-radius: 12px; font-size: 13.5px; font-weight: 900;
  text-decoration: none; display: block; transition: all 0.2s;
}
.kmap-motto-wa-btn:hover { background: #25D366; color: #fff; }












/* ═══════════════════════════════════════════════════════════════
   ═══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════
   PATCH FINAL UI v2.0 — SEARCH & FILTER RESPONSIVE FIX
   ═══════════════════════════════════════════════════════════════ */

.gm-top-dock {
  position: fixed !important;
  top: 12px;
  left: 12px;
  right: 12px;
  z-index: 1000 !important;
}

.gm-search-pill {
  display: flex !important;
  flex-direction: column !important;
  background: var(--bg-card-solid) !important;
  border: 1.5px solid var(--border-ui) !important;
  border-radius: 24px !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1) !important;
  padding: 6px !important;
  gap: 6px !important;
  transition: all 0.2s ease !important;
}

.gm-search-row {
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  gap: 4px !important;
}

.gm-logo-badge,
.gm-search-btn,
.btn-search-clear {
  flex-shrink: 0 !important;
  width: 42px !important;
  height: 42px !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
  border: none !important;
  cursor: pointer !important;
}

.gm-logo-badge { background: transparent !important; color: var(--accent-primary) !important; }
.gm-search-btn { background: transparent !important; color: var(--text-sub) !important; }
.btn-search-clear { background: rgba(0, 0, 0, 0.08) !important; color: var(--text-sub) !important; font-size: 14px !important; font-weight: 900 !important; }
[data-theme="dark"] .btn-search-clear { background: rgba(255, 255, 255, 0.15) !important; color: #fff !important; }

.gm-logo-badge svg, .gm-search-btn svg { width: 20px !important; height: 20px !important; }
.gm-search-btn svg { fill: currentColor !important; }

.gm-search-input {
  flex: 1 !important;
  min-width: 0 !important;
  background: transparent !important;
  border: none !important;
  outline: none !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  color: var(--text-main) !important;
  padding: 0 8px !important;
  height: 42px !important;
}
.gm-search-input::placeholder { color: var(--text-sub) !important; font-weight: 600 !important; }

#wpFilterBar {
  display: flex !important;
  width: 100% !important;
  border-top: 1px solid var(--border-ui) !important;
  padding-top: 6px !important;
  margin-top: 0 !important;
}

.wp-filter-chips {
  display: flex !important;
  gap: 8px !important;
  overflow-x: auto !important;
  scrollbar-width: none !important;
  padding: 0 4px !important;
  align-items: center !important;
  height: 36px !important;
}
.wp-filter-chips::-webkit-scrollbar { display: none !important; }

.wp-chip {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(0, 0, 0, 0.05) !important;
  border: 1.5px solid transparent !important;
  color: var(--text-sub) !important;
  padding: 0 16px !important;
  border-radius: 20px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
  height: 32px !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}
[data-theme="dark"] .wp-chip { background: rgba(255, 255, 255, 0.08) !important; }

.wp-chip.active {
  background: var(--accent-primary) !important;
  color: #fff !important;
  border-color: var(--accent-primary) !important;
  box-shadow: 0 2px 6px rgba(16, 185, 129, 0.3) !important;
}
[data-theme="dark"] .wp-chip.active { background: #10b981 !important; color: #0a1a12 !important; border-color: #34d399 !important; }

/* END PATCH FINAL UI v2.0 */

/* ═══════════════════════════════════════════════════════════════

/* ═══════════════════════════════════════════════════════════════
   PATCH DESKTOP v2.2 — SEARCH & FILTER SEJAJAR (FINAL)
   Struktur HTML: .gm-top-dock > (.gm-search-pill) + (#wpFilterBar)
   Mobile: search pill utuh, filter tersembunyi (display:none dari inline)
   Desktop: search pill kiri + filter pill kanan, SEJAJAR horizontal
   ═══════════════════════════════════════════════════════════════ */
@media (min-width: 768px) {
  /* Wadah utama: dua kotak putih berjejer */
  .gm-top-dock {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    gap: 12px !important;
    max-width: 1000px !important;
    margin: 0 auto !important;
  }

  /* Search pill (kiri): tetap 1 kotak putih, lebar fixed */
  .gm-search-pill {
    flex: 0 0 auto !important;
    width: 500px !important;
    max-width: 500px !important;
    height: 54px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: center !important;
    padding: 6px 8px 6px 16px !important;
    gap: 0 !important;
  }

  /* Filter pill (kanan): kotak putih sendiri, tinggi SAMA */
  #wpFilterBar {
    flex: 0 0 auto !important;
    display: flex !important;
    height: 54px !important;
    padding: 0 12px !important;
    align-items: center !important;
    background: var(--bg-card-solid) !important;
    border: 1.5px solid var(--border-ui) !important;
    border-top: 1.5px solid var(--border-ui) !important;
    border-radius: 24px !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1) !important;
    margin: 0 !important;
  }

  .wp-filter-chips {
    height: 100% !important;
    align-items: center !important;
    padding: 0 !important;
  }
}
/* END PATCH DESKTOP v2.2 */

/* ═══════════════════════════════════════════════════════════════
   PATCH DESKTOP v2.4 — OVERRIDE FINAL CENTER
   Menimpa baris 14091 (PATCH v2.0 global) yang masih pakai
   left: 12px; right: 12px. Rule ini berlaku di Desktop saja.
   ═══════════════════════════════════════════════════════════════ */
@media (min-width: 768px) {
  .gm-top-dock {
    position: fixed !important;
    top: 12px !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    z-index: 1000 !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    max-width: 1000px !important;
    width: 100% !important;
    margin: 0 !important;
  }
}
/* END PATCH DESKTOP v2.4 */

/* ═══════════════════════════════════════════════════════════════
   PATCH FINAL CENTER — PAKSA CENTER DI DESKTOP
   Selector html body .gm-top-dock → spesifisitas lebih tinggi
   dari semua definisi sebelumnya (baris 89, 2221, 14091, 14211, 14263).
   ═══════════════════════════════════════════════════════════════ */
@media (min-width: 768px) {
  html body .gm-top-dock,
  html body #searchTopDock.gm-top-dock {
    position: fixed !important;
    top: 12px !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    width: 100% !important;
    max-width: 1000px !important;
    margin: 0 !important;
    padding: 0 12px !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    box-sizing: border-box !important;
  }
}
/* END PATCH FINAL CENTER */

/* ═══════════════════════════════════════════════════════════════
   PATCH FIX-CENTER v1 — FINAL FINAL FINAL
   Bug fix:
   1. width:100% + translateX(-50%) bikin elemen 200% lebar → keluar layar
   2. .gm-search-pill fixed 500px + filter bisa > 1000px → overflow kiri
   Solusi:
   1. width: auto (bukan 100%) → elemen selebar konten
   2. .gm-search-pill flex: 0 1 auto → menyesuaikan
   3. Kalau total > 1000px, wrap ke baris kedua (jangan overflow)
   ═══════════════════════════════════════════════════════════════ */
@media (min-width: 768px) {
  html body .gm-top-dock,
  html body #searchTopDock.gm-top-dock {
    position: fixed !important;
    top: 12px !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    width: auto !important;              /* ← KUNCI: auto, bukan 100% */
    max-width: min(96vw, 1000px) !important;
    margin: 0 !important;
    padding: 0 12px !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    box-sizing: border-box !important;
    flex-wrap: wrap !important;           /* ← Kalau kepanjangan, wrap */
  }

  html body .gm-top-dock .gm-search-pill {
    flex: 0 1 auto !important;            /* ← Fleksibel, bukan fixed 500 */
    width: auto !important;
    min-width: 320px !important;
    max-width: 550px !important;
    height: 54px !important;
  }
}
/* END PATCH FIX-CENTER v1 */

/* ═══════════════════════════════════════════════════════════════
   PATCH SEJAJAR FINAL — Search & Filter SEJAJAR HORIZONTAL
   Fix: flex-wrap: nowrap → filter TIDAK turun ke bawah
   Filter: tanpa border, tanpa background (transparan)
   ═══════════════════════════════════════════════════════════════ */
@media (min-width: 768px) {
  html body .gm-top-dock,
  html body #searchTopDock.gm-top-dock {
    position: fixed !important;
    top: 12px !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    width: max-content !important;
    max-width: 96vw !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    flex-wrap: nowrap !important;        /* ← KUNCI: JANGAN wrap */
    box-sizing: border-box !important;
  }

  /* Search pill (kiri): putih + border, ukuran natural */
  html body .gm-top-dock .gm-search-pill {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 360px !important;
    max-width: 500px !important;
    height: 54px !important;
    background: var(--bg-card-solid) !important;
    border: 1.5px solid var(--border-ui) !important;
    border-radius: 27px !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1) !important;
    padding: 6px 8px 6px 16px !important;
  }

  /* Filter pill (kanan): TANPA BORDER, TANPA SHADOW, TRANSPARAN */
  html body .gm-top-dock #wpFilterBar,
  html body #searchTopDock #wpFilterBar {
    flex: 0 0 auto !important;
    display: flex !important;
    width: auto !important;
    height: 54px !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    align-items: center !important;
  }

  html body .gm-top-dock #wpFilterBar .wp-filter-chips {
    height: 100% !important;
    align-items: center !important;
    padding: 0 !important;
    gap: 6px !important;
    background: transparent !important;
  }
}
/* END PATCH SEJAJAR FINAL */

/* ═══════════════════════════════════════════════════════════════
   PATCH FIXFINAL v1 — HANYA 2 TARGET: Search Kota & Search Rute
   ═══════════════════════════════════════════════════════════════ */
@media (min-width: 768px) {
  /* --- 1. SEARCH KOTA: Border lebih tipis, tombol close di dalam --- */
  html body .gm-top-dock .gm-search-pill {
    border: 1px solid var(--border-ui) !important;
    padding: 4px 6px 4px 14px !important;
    height: 48px !important; /* sedikit lebih ramping */
  }
  
  html body .gm-top-dock .gm-search-pill .gm-search-row {
    gap: 2px !important;
  }

  /* Tombol close search kota: kecil, inline */
  html body .gm-top-dock .gm-search-pill .btn-search-clear {
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    min-height: 24px !important;
    padding: 0 !important;
    margin: 0 2px 0 0 !important;
    border-radius: 50% !important;
    background: rgba(0, 0, 0, 0.08) !important;
    font-size: 11px !important;
    line-height: 1 !important;
  }
  [data-theme="dark"] html body .gm-top-dock .gm-search-pill .btn-search-clear {
    background: rgba(255, 255, 255, 0.15) !important;
  }

  /* Tombol search (kaca pembesar) sedikit lebih kecil */
  html body .gm-top-dock .gm-search-pill .gm-search-btn {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    min-height: 34px !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  html body .gm-top-dock .gm-search-pill .gm-search-btn svg {
    width: 18px !important;
    height: 18px !important;
  }

  /* --- 2. SEARCH RUTE: Tombol close di dalam input, list center --- */
  
  /* Tombol close rute: kecil, inline */
  html body .route-top-card .btn-route-close {
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    min-height: 24px !important;
    padding: 0 !important;
    margin: 0 4px !important;
    border-radius: 50% !important;
    background: rgba(0, 0, 0, 0.06) !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    color: var(--text-sub) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  [data-theme="dark"] html body .route-top-card .btn-route-close {
    background: rgba(255, 255, 255, 0.12) !important;
    color: #e2e8f0 !important;
  }
  html body .route-top-card .btn-route-close:active {
    background: rgba(239, 68, 68, 0.2) !important;
    color: #ef4444 !important;
  }

  /* List suggestion rute: center di bawah input, full width card */
  html body .route-top-card .route-sugg-box {
    position: fixed !important;
    left: 20px !important;
    right: 20px !important;
    width: auto !important;
    max-width: 420px !important;
    margin: 0 auto !important;
    transform: none !important;
    z-index: 10000 !important;
  }

  /* Pastikan input tidak tertutup tombol close */
  html body .route-top-card .route-top-input {
    padding-right: 4px !important;
  }
}

/* --- Mobile (HP) search rute: tombol close kecil & list full width --- */
@media (max-width: 767px) {
  html body .route-top-card .btn-route-close {
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    min-height: 24px !important;
    padding: 0 !important;
    margin: 0 2px !important;
    border-radius: 50% !important;
    background: rgba(0, 0, 0, 0.06) !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    color: var(--text-sub) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  [data-theme="dark"] html body .route-top-card .btn-route-close {
    background: rgba(255, 255, 255, 0.12) !important;
    color: #e2e8f0 !important;
  }

  html body .route-top-card .route-sugg-box {
    position: fixed !important;
    left: 12px !important;
    right: 12px !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    transform: none !important;
    z-index: 10000 !important;
  }
}
/* END PATCH FIXFINAL v1 */

/* ═══════════════════════════════════════════════════════════════
   PATCH DROPDOWN-CENTER v1 — Dat alist HARUS SEJAJAR DGN INPUT
   Target Desktop saja (≥768px):
   - .gm-suggestions (search kota) → center di viewport
   - .route-sugg-box (search rute) → center di viewport
   Mobile TIDAK disentuh (left/right: 12px sudah benar)
   ═══════════════════════════════════════════════════════════════ */
@media (min-width: 768px) {
  /* ─── Search KOTA: dropdown .gm-suggestions center ─── */
  html body #searchSuggestions.gm-suggestions,
  html body .gm-top-dock .gm-suggestions {
    position: fixed !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    width: 460px !important;
    max-width: min(92vw, 500px) !important;
    min-width: 320px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    z-index: 10000 !important;
  }

  /* ─── Search RUTE: dropdown .route-sugg-box center ─── */
  html body #routeTopCard .route-sugg-box,
  html body .route-top-card .route-sugg-box,
  html body #suggOrigin,
  html body #suggDestination {
    position: fixed !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    width: 400px !important;
    max-width: min(92vw, 420px) !important;
    min-width: 300px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    z-index: 10000 !important;
  }
}
/* END PATCH DROPDOWN-CENTER v1 */

/* ═══════════════════════════════════════════════════════════════
   PATCH DROPDOWN-CENTER v2 — ABSOLUTE RELATIF KE .gm-top-dock
   Strategi baru: DROP `position: fixed` (yang bisa terpengaruh
   parent transform/filter), pakai `position: absolute` relatif ke
   `.gm-top-dock` (yang sudah fixed+center). Hasil: dropdown otomatis
   center mengikuti parent, tidak bisa melenceng kiri.
   ═══════════════════════════════════════════════════════════════ */
@media (min-width: 768px) {
  /* Pastikan .gm-top-dock adalah containing block untuk dropdown */
  html body .gm-top-dock {
    position: fixed !important;   /* sudah dari patch sebelumnya */
  }

  /* ─── Search KOTA: dropdown relative ke .gm-top-dock, center ─── */
  html body .gm-top-dock .gm-suggestions,
  html body .gm-top-dock #searchSuggestions,
  html body #searchTopDock .gm-suggestions,
  html body #searchTopDock #searchSuggestions {
    position: absolute !important;
    top: calc(100% + 6px) !important;   /* tepat di bawah search pill */
    left: 0 !important;
    right: auto !important;
    transform: none !important;
    width: 500px !important;
    max-width: min(92vw, 500px) !important;
    min-width: 320px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    z-index: 10000 !important;
  }

  /* ─── Search RUTE: dropdown relative ke .gm-top-dock, center ─── */
  html body .gm-top-dock .route-sugg-box,
  html body #routeTopCard .route-sugg-box,
  html body .route-top-card .route-sugg-box,
  html body #suggOrigin,
  html body #suggDestination {
    position: absolute !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    width: 400px !important;
    max-width: min(92vw, 420px) !important;
    min-width: 300px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    z-index: 10000 !important;
  }

  /* Route sugg-box top position (di bawah input masing-masing) */
  html body #routeTopCard .route-top-row {
    position: relative !important;
  }
  html body #routeTopCard .route-sugg-box,
  html body .route-top-card .route-sugg-box,
  html body #suggOrigin,
  html body #suggDestination {
    top: calc(100% + 4px) !important;
  }
}
/* END PATCH DROPDOWN-CENTER v2 */

/* ═══════════════════════════════════════════════════════════════
   PATCH MOBILE-CLOSE v1 — Kecilkan tombol close search pill di HP
   Masalah: baris 14120 (PATCH FINAL UI v2.0) memaksa 42px di semua viewport
   Solusi: override via @media (max-width: 767px) → 24px
   Desktop TIDAK disentuh (sudah kecil via PATCH FIXFINAL v1, baris 14432)
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  html body .gm-top-dock .gm-search-pill .btn-search-clear,
  html body #searchTopDock .gm-search-pill .btn-search-clear {
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    min-height: 24px !important;
    max-width: 24px !important;
    max-height: 24px !important;
    padding: 0 !important;
    margin: 0 2px 0 0 !important;
    border-radius: 50% !important;
    background: rgba(0, 0, 0, 0.08) !important;
    color: var(--text-sub) !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
  }
  [data-theme="dark"] html body .gm-top-dock .gm-search-pill .btn-search-clear,
  [data-theme="dark"] html body #searchTopDock .gm-search-pill .btn-search-clear {
    background: rgba(255, 255, 255, 0.15) !important;
  }
}
/* END PATCH MOBILE-CLOSE v1 */

/* ═══════════════════════════════════════════════════════════════
   PATCH MOBILE-SLIM v1 — Ram pingkan search bar di HP
   Masalah: icon buttons 42px + padding 6px = total 54px (gemuk)
   Solusi: icon buttons 32px + padding 4px = total 40px (ramping)
   Desktop TIDAK disentuh (masih pakai height 54px dari PATCH SEJAJAR)
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  /* Pill: rapatkan padding */
  html body .gm-top-dock .gm-search-pill {
    padding: 4px 4px 4px 10px !important;
    gap: 2px !important;
    border-radius: 22px !important;
  }

  /* Semua icon button: 32px (dari 42px) */
  html body .gm-top-dock .gm-search-pill .gm-logo-badge,
  html body .gm-top-dock .gm-search-pill .gm-search-btn {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
  }

  /* Icon SVG di dalamnya: sedikit lebih kecil */
  html body .gm-top-dock .gm-search-pill .gm-logo-badge svg {
    width: 16px !important;
    height: 16px !important;
  }
  html body .gm-top-dock .gm-search-pill .gm-search-btn svg {
    width: 18px !important;
    height: 18px !important;
  }

  /* Input: padding & font sedikit lebih kecil */
  html body .gm-top-dock .gm-search-pill .gm-search-input {
    font-size: 15.5px !important;
    padding: 0 4px !important;
    height: 32px !important;
  }

  /* Tombol close: 24px (tetap kecil dari patch sebelumnya) */
  html body .gm-top-dock .gm-search-pill .btn-search-clear {
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    min-height: 24px !important;
  }
}
/* END PATCH MOBILE-SLIM v1 */