body {
  font-family: 'Plus Jakarta Sans', sans-serif;
  transition: background-color .3s ease, color .3s ease;
}

/* ---------- Dark mode ---------- */
.dark .glass-card {
  background: rgba(15, 23, 42, .75);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, .08);
  color: #f8fafc;
}
.dark .glass-card-interactive:hover {
  background: rgba(30, 41, 59, .85);
  border-color: rgba(99, 102, 241, .5);
}
.dark .glass-input {
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .12);
  color: #fff;
}
.dark .modal-content {
  background: #0f172a;
  color: #f8fafc;
  border: 1px solid rgba(255, 255, 255, .15);
}

/* ---------- Light mode ---------- */
.light .glass-card {
  background: rgba(255, 255, 255, .85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(0, 0, 0, .08);
  box-shadow: 0 10px 30px -5px rgba(0, 0, 0, .05);
  color: #0f172a;
}
.light .glass-card-interactive:hover {
  background: rgba(241, 245, 249, .95);
  border-color: rgba(99, 102, 241, .5);
}
.light .glass-input {
  background: rgba(0, 0, 0, .04);
  border: 1px solid rgba(0, 0, 0, .12);
  color: #0f172a;
}
.light .modal-content {
  background: #fff;
  color: #0f172a;
  border: 1px solid rgba(0, 0, 0, .15);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 8px 10px -6px rgba(0, 0, 0, .1);
}

.glass-card-interactive {
  cursor: pointer;
  transition: all .2s cubic-bezier(.4, 0, .2, 1);
}
.glass-card-interactive:hover { transform: translateY(-2px); }

.glass-card-active {
  border-color: rgba(99, 102, 241, .8) !important;
  box-shadow: 0 0 20px rgba(99, 102, 241, .25);
}

.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

#radar-map {
  width: 100%;
  height: 400px;
  border-radius: 1.25rem;
  z-index: 10;
}

#detail-modal:not(.hidden) { display: flex; }

/* Indikator loading saat panel di-refresh dari server */
#app-panel.is-loading { opacity: .45; pointer-events: none; transition: opacity .15s ease; }

/* ---------- Medan angin ---------- */
.leaflet-windfield-layer {
  mix-blend-mode: screen;      /* partikel menyatu lembut dengan basemap gelap */
  will-change: transform;
}
.light .leaflet-windfield-layer {
  mix-blend-mode: multiply;    /* tetap terbaca di basemap terang */
  opacity: .9;
}

.wind-pin-wrapper { background: none; border: none; }

.wind-pin {
  width: 22px; height: 22px;
  border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(99, 102, 241, .25);
  border: 1.5px solid rgba(165, 180, 252, .9);
  box-shadow: 0 0 0 0 rgba(129, 140, 248, .55);
  animation: wind-pulse 2.4s ease-out infinite;
  margin: 0 auto;
}
.wind-pin-dot {
  width: 7px; height: 7px;
  border-radius: 999px;
  background: #e0e7ff;
}
.wind-pin-label {
  margin-top: 6px;
  padding: 2px 7px;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
  text-align: center;
  color: #fff;
  background: rgba(15, 23, 42, .88);
  border: 1px solid rgba(255, 255, 255, .12);
  transform: translateX(-25%);
}

@keyframes wind-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(129, 140, 248, .55); }
  70%  { box-shadow: 0 0 0 16px rgba(129, 140, 248, 0); }
  100% { box-shadow: 0 0 0 0 rgba(129, 140, 248, 0); }
}

.map-panel, .wind-legend {
  background: rgba(15, 23, 42, .82);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, .12);
  color: #f8fafc;
  min-width: 148px;
}
.light .map-panel, .wind-legend {
  background: rgba(255, 255, 255, .9);
  border-color: rgba(0, 0, 0, .1);
  color: #0f172a;
}
.wind-legend-bar {
  height: 7px;
  border-radius: 999px;
  background: linear-gradient(90deg,
    rgb(56,189,248) 0%,
    rgb(129,140,248) 35%,
    rgb(167,139,250) 65%,
    rgb(244,114,182) 85%,
    rgb(255,255,255) 100%);
}

/* Hormati preferensi pengguna yang sensitif terhadap animasi */
@media (prefers-reduced-motion: reduce) {
  .wind-pin { animation: none; }
  .leaflet-windfield-layer { opacity: .75; }
}

/* ---------- Playback radar ---------- */
.leaflet-precip-layer { will-change: transform; }

.precip-legend-bar {
  height: 7px;
  border-radius: 999px;
  background: linear-gradient(90deg,
    rgba(56,189,248,.35) 0%,
    rgb(45,212,191) 22%,
    rgb(163,230,53) 42%,
    rgb(250,204,21) 65%,
    rgb(249,115,22) 85%,
    rgb(225,29,72) 100%);
}

/* Tombol putar/jeda: ikon ditukar lewat atribut data-state */
#timeline-play .icon-pause { display: none; }
#timeline-play[data-state="playing"] .icon-play { display: none; }
#timeline-play[data-state="playing"] .icon-pause { display: inline-block; }

/* Slider waktu */
.timeline-slider {
  -webkit-appearance: none;
  appearance: none;
  height: 6px;
  border-radius: 999px;
  background: rgba(129, 140, 248, .22);
  outline: none;
  cursor: pointer;
}
.timeline-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px; height: 16px;
  border-radius: 999px;
  background: #6366f1;
  border: 2px solid #e0e7ff;
  box-shadow: 0 2px 6px rgba(0,0,0,.35);
  transition: transform .15s ease;
}
.timeline-slider::-webkit-slider-thumb:hover { transform: scale(1.15); }
.timeline-slider::-moz-range-thumb {
  width: 14px; height: 14px;
  border-radius: 999px;
  background: #6366f1;
  border: 2px solid #e0e7ff;
  cursor: pointer;
}
.timeline-slider::-moz-range-track {
  height: 6px;
  border-radius: 999px;
  background: rgba(129, 140, 248, .22);
}

#timeline-speed { cursor: pointer; }
#timeline-speed option { color: #0f172a; }

/* ---------- Satelit awan ---------- */

/* Ubin RainViewer coverage diberi sedikit kontras/saturasi agar formasi awan
   lebih terbaca, dan menyatu dengan basemap lewat blend mode per tema. */
.cloud-tiles {
  filter: contrast(1.15) saturate(1.2) brightness(1.08);
  mix-blend-mode: screen;
  transition: opacity .6s ease;
}
.light .cloud-tiles {
  filter: contrast(1.1) saturate(1.05) brightness(0.97);
  mix-blend-mode: multiply;
}

.cloud-legend-bar {
  height: 7px;
  border-radius: 999px;
  background: linear-gradient(90deg,
    rgba(148, 163, 184, .08) 0%,
    rgba(203, 213, 225, .35) 35%,
    rgba(226, 232, 240, .7) 65%,
    rgba(255, 255, 255, .95) 100%);
}
.light .cloud-legend-bar {
  background: linear-gradient(90deg,
    rgba(100, 116, 139, .10) 0%,
    rgba(100, 116, 139, .35) 35%,
    rgba(71, 85, 105, .6) 65%,
    rgba(30, 41, 59, .85) 100%);
}