/* ═══════════════════════════════════════════════════════════════════
   BMKG Sulbar — Radar & Satellite Monitoring Dashboard
   style.css
   ═══════════════════════════════════════════════════════════════════ */

/* ── RESET ──────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
button { font-family: inherit; cursor: pointer; }
input  { font-family: inherit; }

/* ── THEME TOKENS ───────────────────────────────────────────────── */
[data-theme="light"] {
  --bg:          #f0efec;
  --surface:     #ffffff;
  --surface2:    #f7f6f3;
  --surface3:    #eeecе8;
  --border:      #e2dfd9;
  --border2:     #cbc8c1;
  --text:        #1a1916;
  --text2:       #5c5a55;
  --text3:       #9e9b94;
  --accent:      #1d4ed8;
  --accent-soft: #eff3ff;
  --accent-dim:  #dbeafe;
  --green:       #15803d;
  --green-bg:    #f0fdf4;
  --amber:       #b45309;
  --amber-bg:    #fffbeb;
  --red:         #b91c1c;
  --red-bg:      #fef2f2;
  --shadow-sm:   0 1px 2px rgba(0,0,0,0.07);
  --shadow:      0 2px 8px rgba(0,0,0,0.09);
  --shadow-lg:   0 8px 24px rgba(0,0,0,0.12);
  --radius:      6px;
}

[data-theme="dark"] {
  --bg:          #0e0e0d;
  --surface:     #1a1916;
  --surface2:    #222120;
  --surface3:    #2a2926;
  --border:      #2d2b27;
  --border2:     #3a3835;
  --text:        #e6e3dc;
  --text2:       #8a8780;
  --text3:       #4e4b46;
  --accent:      #60a5fa;
  --accent-soft: #172033;
  --accent-dim:  #1e3a5f;
  --green:       #4ade80;
  --green-bg:    #0d2218;
  --amber:       #fbbf24;
  --amber-bg:    #1e1a0e;
  --red:         #f87171;
  --red-bg:      #200f0f;
  --shadow-sm:   0 1px 2px rgba(0,0,0,0.3);
  --shadow:      0 2px 8px rgba(0,0,0,0.4);
  --shadow-lg:   0 8px 24px rgba(0,0,0,0.5);
  --radius:      6px;
}

/* ── BASE ───────────────────────────────────────────────────────── */
html, body {
  height: 100%;
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  font-size: 13px;
  background: var(--bg);
  color: var(--text);
  overflow: hidden;
  transition: background 0.2s, color 0.2s;
}

/* ── ROOT LAYOUT ────────────────────────────────────────────────── */
#app {
  display: flex;
  flex-direction: column;
  /* 100dvh = dynamic viewport height — mengecualikan navigation bar
     di smartphone. Fallback ke 100vh untuk browser lama yang belum
     support dvh (Chrome <108, Safari <15.4, Firefox <109). */
  height: 100vh;
  height: 100dvh;
  width: 100vw;
}

/* ── HEADER ─────────────────────────────────────────────────────── */
#header {
  display: flex;
  align-items: center;
  height: 48px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: 0 14px;
  gap: 12px;
  flex-shrink: 0;
  z-index: 1000;
  position: relative;   /* anchor untuk .header-mid yang di-center absolut */
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 1;    /* boleh menyusut saat header sempit */
  min-width: 0;      /* izinkan flex children meluap dengan ellipsis */
  overflow: hidden;
}

#logo-wrap {
  width: 32px; height: 32px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface2);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}
#logo-upload { display: none; }
#logo-img    { width: 100%; height: 100%; object-fit: contain; display: none; }
#logo-svg    { width: 18px; height: 18px; color: var(--text3); }
/* Saat logo gambar (mis. bulat) tampil, hilangkan kotak/garis & latar di
   sekitarnya agar tidak muncul persegi membulat di belakang logo. Fallback
   SVG tetap memakai bingkai default #logo-wrap. */
#logo-wrap.logo-wrap--img {
  border: none;
  background: none;
  border-radius: 0;
  overflow: visible;
}

.brand-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }

#inst-name {
  font-size: 12.5px; font-weight: 600;
  color: var(--text);
  display: block; line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
#inst-sub {
  font-size: 10px; color: var(--text3);
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.sep { width: 1px; height: 24px; background: var(--border); flex-shrink: 0; }

.header-mid {
  position: absolute;
  left: 50%;
  top: 0; bottom: 0;
  transform: translateX(-50%);
  display: flex; align-items: center; justify-content: center;
  gap: 7px;
  white-space: nowrap;     /* satu baris; JS menyembunyikan bila ruang tak cukup */
  pointer-events: none;    /* teks tak menghalangi interaksi tombol di belakangnya */
}
.header-mid.is-hidden { display: none; }

.dot-live {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--green);
  animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse { 0%,100%{ opacity:1; transform:scale(1) } 50%{ opacity:.35; transform:scale(0.8) } }

.header-label {
  font-size: 11.5px;
  color: var(--text2);
  letter-spacing: 0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.header-right { display: flex; align-items: center; gap: 8px; margin-left: auto; }

/* ── DUAL CLOCK ─────────────────────────────────────────────────────────────── */
.clock-wrap {
  display: flex;
  flex-direction: column;
  gap: 1px;
  position: relative;
}
.clock-row {
  display: flex;
  align-items: center;
  gap: 4px;
  line-height: 1;
}
.clock-label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--text2);
  opacity: 0.65;
  flex-shrink: 0;
}
.clock-val {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--text2);
  min-width: 52px;
}
.clock-utc .clock-val   { color: var(--text2); }
.clock-local .clock-val { color: var(--accent, #38bdf8); font-weight: 600; }
.clock-local .clock-label { color: var(--accent, #38bdf8); opacity: 1; }

.clock-tz-btn {
  width: 16px; height: 16px;
  border: none;
  background: transparent;
  color: var(--text2);
  font-size: 11px;
  cursor: pointer;
  padding: 0;
  opacity: 0.5;
  transition: opacity 0.15s;
  line-height: 1;
  flex-shrink: 0;
}
.clock-tz-btn:hover { opacity: 1; }

/* ── TIMEZONE PICKER POPOVER ─────────────────────────────────────── */
.clock-tz-picker {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 9999;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(0,0,0,0.25);
  width: 220px;
  padding: 6px 0 4px;
}
.clock-tz-picker.hidden { display: none; }
.tz-picker-title {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--text2);
  text-transform: uppercase;
  padding: 2px 10px 6px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 4px;
}
.tz-picker-list { display: flex; flex-direction: column; }
.tz-opt-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border: none;
  background: transparent;
  cursor: pointer;
  text-align: left;
  transition: background 0.1s;
  width: 100%;
}
.tz-opt-btn:hover  { background: var(--surface2); }
.tz-opt-btn.active { background: color-mix(in srgb, var(--accent,#38bdf8) 15%, transparent); }
.tz-opt-label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  color: var(--text);
  width: 34px;
  flex-shrink: 0;
}
.tz-opt-name {
  font-size: 10px;
  color: var(--text2);
  flex: 1;
}
.tz-opt-off {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9px;
  color: var(--text2);
  opacity: 0.6;
  flex-shrink: 0;
}

#theme-toggle {
  width: 28px; height: 28px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface2);
  color: var(--text2);
  font-size: 13px;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.15s;
}
#theme-toggle:hover { background: var(--border); color: var(--text); }

/* ── BODY SPLIT ─────────────────────────────────────────────────── */
#body {
  display: flex;
  flex: 1;
  overflow: hidden;
  position: relative;
}

/* ── SIDEBAR ────────────────────────────────────────────────────── */
#sidebar {
  width: 256px;
  background: var(--surface);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
  flex-shrink: 0;
  transition: width 0.22s cubic-bezier(0.4,0,0.2,1);
}
#sidebar.collapsed { width: 0; }
#sidebar::-webkit-scrollbar { width: 4px; }
#sidebar::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 2px; }

/* Sidebar toggle tab */
#sidebar-toggle {
  position: absolute;
  left: 256px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 600;
  width: 16px; height: 34px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: none;
  border-radius: 0 5px 5px 0;
  color: var(--text3);
  font-size: 10px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: left 0.22s cubic-bezier(0.4,0,0.2,1), color 0.15s;
}
#sidebar-toggle:hover { color: var(--text); }

/* Sidebar section separator label */
.sidebar-section-label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text3);
  padding: 8px 14px 4px;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  border-top: 1px solid var(--border);
  display: block;
  user-select: none;
}

/* ── ACCORDION ──────────────────────────────────────────────────── */
.accordion {
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.accordion-head {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 10px 14px;
  background: var(--surface2);
  border: none;
  color: var(--text2);
  font-size: 11px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  user-select: none;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  transition: background 0.12s, color 0.12s;
  position: relative;
  border-left: 3px solid transparent;
}
.accordion-head:hover { background: var(--border); color: var(--text); }
.accordion-head.open  {
  color: var(--accent);
  background: var(--accent-soft);
  border-left-color: var(--accent);
}

.acc-icon  {
    font-size: 14px; flex-shrink: 0;
    width: 18px; display: inline-flex;
    align-items: center; justify-content: center;
    line-height: 1; text-align: center;
}
.acc-title { flex: 1; letter-spacing: 0.04em; }
.acc-badge {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9px;
  padding: 2px 6px;
  border-radius: 10px;
  background: var(--accent);
  color: #fff;
  font-weight: 700;
  flex-shrink: 0;
  min-width: 18px;
  text-align: center;
}
.acc-badge:empty { display: none; }

.accordion-arrow {
  font-size: 9px;
  color: var(--text3);
  flex-shrink: 0;
  transition: transform 0.22s;
}

.accordion-body {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  background: var(--surface);
}
.accordion-body.open {
  max-height: 700px;
  overflow-y: auto;
}
.accordion-body.open::-webkit-scrollbar { width: 4px; }
.accordion-body.open::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 2px; }

.accordion-body > * {
  padding: 10px 14px 14px;
}
/* Override for panels that manage their own inner padding */
.accordion-body > #radar-panel,
.accordion-body > #satellite-panel,
.accordion-body > #boundary-layers {
  padding: 0;
}

/* ── BASEMAP GRID ───────────────────────────────────────────────── */
.bmap-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
}
.bmap-btn {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 7px 4px;
  background: var(--surface2);
  color: var(--text2);
  font-size: 10px;
  text-align: center;
  line-height: 1.4;
  transition: all 0.12s;
}
.bmap-btn:hover { border-color: var(--border2); background: var(--bg); color: var(--text); }
.bmap-btn.active {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 500;
}
.bmap-icon { font-size: 14px; display: block; margin-bottom: 2px; }

/* ── BOUNDARY LAYERS ────────────────────────────────────────────── */
.blayer-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
}
.blayer-dot {
  width: 8px; height: 8px;
  border-radius: 2px;
  flex-shrink: 0;
}
.blayer-name {
  flex: 1;
  font-size: 11.5px;
  color: var(--text2);
}
.blayer-op {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 12px 6px 28px;
}
.blayer-op-label {
  font-size: 9.5px; color: var(--text3);
  width: 38px; flex-shrink: 0;
}
.op-val {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9.5px;
  color: var(--text3);
  width: 30px;
  text-align: right;
  flex-shrink: 0;
}

/* Toggle component */
.tog {
  width: 28px; height: 16px;
  border-radius: 8px;
  background: var(--border2);
  position: relative;
  cursor: pointer;
  transition: background 0.2s;
  flex-shrink: 0;
}
.tog::after {
  content: '';
  position: absolute;
  left: 2px; top: 2px;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  transition: left 0.2s;
}
.tog.on               { background: var(--accent); }
.tog.on::after        { left: 14px; }

/* Opacity range slider */
input[type=range].op-slider {
  flex: 1;
  height: 2px;
  -webkit-appearance: none;
  appearance: none;
  background: var(--border2);
  border-radius: 1px;
  outline: none;
  cursor: pointer;
}
input[type=range].op-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--accent);
  cursor: pointer;
}

/* ── LAYER PANEL (Radar / Satellite) ────────────────────────────── */
.lp-group-head {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px 4px;
}
.lp-group-head.lp-sep {
  margin-top: 4px;
  border-top: 1px solid var(--border);
  padding-top: 9px;
}

.lp-group-label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--text3);
  text-transform: uppercase;
}
.lp-count {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9px;
  color: var(--accent);
  background: var(--accent-soft);
  border-radius: 10px;
  padding: 0 6px;
  line-height: 16px;
  font-weight: 600;
}

.lp-list {
  padding: 3px 8px 6px;
}

/* Daftar produk NONAKTIF: tampilkan ~5–6 item, sisanya bisa di-scroll, agar
   sidebar tidak terlalu panjang secara vertikal. (Daftar LAYER AKTIF tidak
   dibatasi karena biasanya sedikit.) */
.lp-list.lp-inactive {
  max-height: 288px;
  overflow-y: auto;
  /* auto (bukan contain): saat daftar mentok, scroll DITERUSKAN ke sidebar
     sehingga user bisa lanjut menggulir ke bagian PRODUK SATELIT di bawahnya
     tanpa harus memindah kursor keluar dari daftar. */
  overscroll-behavior: auto;
  touch-action: pan-y;   /* usapan vertikal = scroll native (mobile) */
}
.lp-list.lp-inactive::-webkit-scrollbar { width: 6px; }
.lp-list.lp-inactive::-webkit-scrollbar-thumb {
  background: var(--border2, #ccc);
  border-radius: 3px;
}
.lp-list.lp-inactive::-webkit-scrollbar-track { background: transparent; }

.lp-item {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 8px;
  border-radius: var(--radius);
  cursor: default;
  transition: background 0.1s;
  user-select: none;
  position: relative;
  border: 1px solid transparent;
}
.lp-item:hover          { background: var(--surface2); border-color: var(--border); }

.lp-item.focused        {
  background: var(--accent-soft);
  border-color: var(--accent-dim);
}
.lp-item.focused .lp-name { color: var(--accent); font-weight: 500; }

/* Drag handle */
.lp-drag-handle {
  width: 16px;
  display: flex; align-items: center; justify-content: center;
  color: var(--text3);
  cursor: grab;
  flex-shrink: 0;
  opacity: 0;
  transition: opacity 0.15s;
}
.lp-item:hover .lp-drag-handle:not(.invisible) { opacity: 1; }
.lp-drag-handle.invisible { pointer-events: none; visibility: hidden; }
.lp-drag-handle:active { cursor: grabbing; }

/* Toggle button (custom styled) */
.lp-toggle-btn {
  width: 18px; height: 18px;
  border: 1.5px solid var(--border2);
  border-radius: 5px;
  background: var(--surface2);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: all 0.15s;
  padding: 0;
}
.lp-toggle-btn:hover           { border-color: var(--accent); background: var(--accent-soft); }
.lp-toggle-btn.active          { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.lp-toggle-dot {
  width: 7px; height: 7px;
  border-radius: 2px;
  background: var(--text3);
  transition: background 0.15s;
}
.lp-toggle-btn.active .lp-toggle-dot { background: #fff; }

/* Layer info */
.lp-info {
  flex: 1;
  min-width: 0;
  cursor: pointer;
}
.lp-name {
  display: block;
  font-size: 12px;
  color: var(--text);
  font-weight: 400;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.35;
}
.lp-meta {
  display: block;
  font-size: 10px;
  color: var(--text3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
  margin-top: 1px;
}

.lp-empty {
  font-size: 10.5px;
  color: var(--text3);
  text-align: center;
  padding: 10px 0;
  font-style: italic;
}

/* ── BADGES ─────────────────────────────────────────────────────── */
.badge {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 8.5px;
  font-weight: 500;
  padding: 1.5px 5px;
  border-radius: 3px;
  letter-spacing: 0.05em;
  flex-shrink: 0;
}
.badge-live { background: var(--green-bg); color: var(--green); }
.badge-proc { background: var(--amber-bg); color: var(--amber); }
.badge-off  { background: var(--surface2); color: var(--text3); }

/* ── DRAG & DROP ────────────────────────────────────────────────── */
.drag-ghost {
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-lg) !important;
  background: var(--surface) !important;
  border: 1px solid var(--accent-dim) !important;
}
.drag-origin {
  opacity: 0.35;
}

/* ── COLORBAR ───────────────────────────────────────────────────── */
/* .cbar-wrap { padding set by .accordion-body > * rule } */
.cbar {
  height: 10px;
  border-radius: 3px;
  width: 100%;
  border: 1px solid var(--border);
}
.cbar-lbl {
  display: flex;
  justify-content: space-between;
  margin-top: 5px;
}
.cbar-lbl span {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 8.5px;
  color: var(--text3);
}
.cbar-unit {
  font-size: 10px;
  color: var(--text2);
  margin-top: 5px;
  text-align: center;
  line-height: 1.4;
}

/* ── GEOJSON UPLOAD ─────────────────────────────────────────────── */
.upload-zone {
  display: block;
  border: 1px dashed var(--border2);
  border-radius: var(--radius);
  padding: 9px;
  text-align: center;
  cursor: pointer;
  font-size: 11px;
  color: var(--text3);
  transition: all 0.15s;
}
.upload-zone:hover   { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.upload-zone input   { display: none; }

.gjson-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 7px;
  border-radius: var(--radius);
  background: var(--surface2);
  border: 1px solid var(--border);
  margin-top: 4px;
  font-size: 11px;
  color: var(--text2);
}
.gjson-dot  { width: 7px; height: 7px; border-radius: 2px; flex-shrink: 0; }
.gjson-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gjson-btns { display: flex; gap: 2px; }
.gjson-btn {
  border: none; background: none;
  color: var(--text3); font-size: 11px;
  padding: 1px 4px;
  border-radius: 3px;
  line-height: 1;
  cursor: pointer;
  transition: all 0.12s;
}
.gjson-btn:hover     { background: var(--border); color: var(--text); }
.gjson-btn.rm:hover  { color: var(--red); }

/* ── MAP WRAP ───────────────────────────────────────────────────── */
#map-wrap { flex: 1; position: relative; overflow: hidden; }
#map { width: 100%; height: 100%; }

/* Leaflet overrides */
.leaflet-control-zoom a {
  background: var(--surface) !important;
  border-color: var(--border) !important;
  color: var(--text2) !important;
  font-size: 14px !important;
  line-height: 26px !important;
}
.leaflet-control-zoom a:hover { background: var(--surface2) !important; color: var(--text) !important; }

/* Sembunyikan zoom control di semua window saat split aktif — menghalangi view */
body.split-active .leaflet-control-zoom { display: none !important; }
.leaflet-control-attribution {
  background: rgba(255,255,255,0.65) !important;
  font-size: 9px !important;
  color: var(--text3) !important;
  backdrop-filter: blur(4px);
}
[data-theme="dark"] .leaflet-control-attribution { background: rgba(0,0,0,0.55) !important; }
.leaflet-control-scale-line {
  background: rgba(255,255,255,0.75);
  border-color: var(--border2);
  font-size: 9.5px;
}
[data-theme="dark"] .leaflet-control-scale-line { background: rgba(0,0,0,0.5); }

/* Popups */
.leaflet-popup-content-wrapper {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  box-shadow: var(--shadow-lg) !important;
  color: var(--text) !important;
}
.leaflet-popup-tip   { background: var(--surface) !important; }
.leaflet-popup-content {
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 12px;
  margin: 10px 13px;
}
.pop-title  { font-weight: 500; color: var(--text); margin-bottom: 6px; }
.pop-row    { display: flex; justify-content: space-between; gap: 12px; padding: 2px 0; font-size: 11px; color: var(--text3); }
.pop-val    { color: var(--text2); font-family: 'IBM Plex Mono', monospace; }
.status-ok  { color: var(--green) !important; }

/* Station marker dot */
.station-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--green);
  border: 2px solid white;
  box-shadow: 0 1px 4px rgba(0,0,0,0.3);
}

/* ── STATUS BAR ─────────────────────────────────────────────────── */
#statusbar {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 24px;
  background: var(--surface);
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 12px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9.5px;
  color: var(--text3);
  z-index: 400;
  pointer-events: none;
}
.sb-item   { display: flex; gap: 5px; align-items: center; }
.sb-key    { color: var(--text3); }
.sb-val    { color: var(--accent); }
.sb-spacer { flex: 1; }

/* ── TIMELINE ───────────────────────────────────────────────────── */
#timeline {
  height: 46px;
  background: var(--surface);
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  padding: 0 14px;
  gap: 10px;
  flex-shrink: 0;
}

.tl-label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9.5px;
  color: var(--text3);
  white-space: nowrap;
  flex-shrink: 0;
}

.tl-wrap { flex: 1; position: relative; padding-bottom: 14px; }

.tl-track {
  height: 4px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 2px;
  position: relative;
  cursor: pointer;
}
.tl-fill {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  border-radius: 2px;
  background: var(--accent);
  opacity: 0.4;
  pointer-events: none;
  /* Gunakan scaleX + CSS variable, bukan width — menghindari layout/reflow. */
  width: 100%;
  transform-origin: left center;
  transform: scaleX(var(--tl-progress, 0.6));
  will-change: transform;
}
.tl-thumb {
  position: absolute;
  top: 50%;
  left: var(--tl-thumb-x, 60%);
  /* left% mengacu pada lebar parent (track), translateX(-50%) center-kan thumb.
     Sama dengan teknik win-tl-thumb yang sudah benar. */
  transform: translate(-50%, -50%);
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid var(--surface);
  box-shadow: var(--shadow);
  pointer-events: none;
  will-change: left;
}

.tl-marks {
  position: absolute;
  left: 0; right: 0;
  top: 8px;
  display: flex;
  justify-content: space-between;
  pointer-events: none;
}
.tl-mark {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 8px;
  color: var(--text3);
}

.tl-btn {
  width: 26px; height: 26px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--surface2);
  color: var(--text2);
  display: flex; align-items: center; justify-content: center;
  font-size: 8px;
  transition: all 0.12s;
  flex-shrink: 0;
}
.tl-btn:hover { border-color: var(--accent); color: var(--accent); }
.tl-btn.active { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }

.tl-time {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10.5px;
  color: var(--accent);
  white-space: nowrap;
  flex-shrink: 0;
  min-width: 52px;
  display: flex;
  align-items: center;
  gap: 3px;
}
.tl-time--multi {
  align-items: center;
  gap: 4px;
}
.tl-time-rows {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.tl-time-row {
  display: flex;
  align-items: center;
  gap: 3px;
  line-height: 1.2;
}
.tl-time-icon {
  font-size: 11px;
  flex-shrink: 0;
  width: 16px;
  text-align: center;
}
.tl-time-radar {
  filter: brightness(0); /* hitam — sama dengan .swt-radar di split window */
}
[data-theme="dark"] .tl-time-radar {
  filter: none; /* emoji tetap terlihat di dark mode */
}
.tl-time-val {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--accent);
  white-space: nowrap;
}
.tl-time-utc {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9px;
  font-weight: 600;
  color: var(--text3);
  white-space: nowrap;
  align-self: center;
}

.tl-speed {
  font-size: 10px;
  background: var(--surface2);
  border: 1px solid var(--border);
  color: var(--text2);
  border-radius: var(--radius);
  padding: 3px 6px;
  cursor: pointer;
  outline: none;
  font-family: 'IBM Plex Mono', monospace;
  flex-shrink: 0;
}
.tl-speed:focus { border-color: var(--accent); }

/* ── TOAST ──────────────────────────────────────────────────────── */
#toast {
  position: fixed;
  bottom: 58px;
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
  border-radius: var(--radius);
  padding: 6px 14px;
  font-size: 11px;
  color: var(--text2);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s, transform 0.2s;
  white-space: nowrap;
  z-index: 9990;
}
#toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
/* ══════════════════════════════════════════════════════════════════
   ADDITIONS: Unified Layer Panel, Split Window, On-Map Colorbar
   ══════════════════════════════════════════════════════════════════ */

/* ── UNIFIED ACTIVE PANEL ─────────────────────────────────────────── */

/* Category icon inside layer name (tiny prefix) */
.lp-cat-icon {
    font-size: 10px;
    margin-right: 3px;
    opacity: 0.7;
}

/* Empty-state message for unified active panel */
.lp-empty-state {
    font-size: 11px;
    color: var(--text3);
    text-align: center;
    padding: 16px 14px;
    font-style: italic;
    background: var(--surface2);
    border-radius: var(--radius);
    margin: 8px;
    border: 1px dashed var(--border2);
}

/* Split-mode notice shown inside layer/product panels */
.lp-split-notice {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 10.5px;
    color: var(--text3);
    padding: 10px 14px;
    font-style: italic;
    background: var(--accent-soft);
    border-radius: 4px;
    margin: 6px;
    border: 1px solid var(--accent-dim);
}
.lp-split-notice-icon { font-size: 14px; flex-shrink: 0; }

/* Sidebar in split mode: mute the layer/product sections visually */
/* sidebar split-mode: radar/satelit sections remain interactive */

/* Order hint label */
.lp-order-hint {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 8px;
    color: var(--text3);
    margin-left: auto;
    letter-spacing: 0.03em;
    flex-shrink: 0;
}

/* Override padding for unified panel and category panels */
.accordion-body > #unified-active-panel,
.accordion-body > #radar-panel,
.accordion-body > #satellite-panel,
.accordion-body > #boundary-layers {
    padding: 0;
}

/* ── SPLIT WINDOW HEADER BUTTONS ─────────────────────────────────── */

.split-btns {
    display: flex;
    gap: 3px;
    align-items: center;
}

.split-header-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    border: 1px solid var(--border);
    background: var(--surface2);
    color: var(--text2);
    border-radius: var(--radius);
    padding: 3px 8px;
    font-size: 10.5px;
    font-family: 'IBM Plex Mono', monospace;
    transition: all 0.13s;
    cursor: pointer;
    height: 26px;
}
.split-header-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--accent-soft);
}

/* ── SPLIT OVERLAY ───────────────────────────────────────────────── */

.split-overlay {
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: var(--bg);
    display: flex;
    flex-direction: column;
}

/* Toolbar */
.split-toolbar {
    height: 42px;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    padding: 0 14px;
    gap: 12px;
    flex-shrink: 0;
    z-index: 10;
}

.split-title {
    font-size: 12px;
    font-weight: 500;
    color: var(--text2);
    flex: 1;
}

.split-toolbar-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}

.split-mode-btn { display: none; } /* replaced by split-quick-btn */

.split-close {
    border: 1px solid var(--border);
    background: var(--surface2);
    color: var(--text2);
    border-radius: var(--radius);
    padding: 4px 10px;
    font-size: 10.5px;
    cursor: pointer;
    transition: all 0.12s;
}
.split-close:hover { background: var(--red-bg); border-color: var(--red); color: var(--red); }

/* ── SPLIT GRID WRAPPER — auto layout via JS ─────────────────────── */

.split-grid-wrapper {
    flex: 1;
    overflow: hidden;
    min-height: 0;
}

/* Panel */
.split-panel {
    position: relative;
    overflow: hidden;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    background: var(--bg);
}

.split-panel::after {
    content: '';
    position: absolute;
    inset: 0;
    border: 1px solid var(--border);
    pointer-events: none;
    z-index: 1;
}

.split-panel-empty {
    background: repeating-linear-gradient(
        45deg,
        var(--surface) 0px,
        var(--surface) 10px,
        var(--bg) 10px,
        var(--bg) 20px
    );
    display: flex;
    align-items: center;
    justify-content: center;
}

.split-panel-empty-label {
    font-size: 20px;
    opacity: 0.2;
    color: var(--text2);
}

.split-map-container {
    flex: 1;
    min-height: 0;
    width: 100%;
}

/* Divider corner intersection */
.split-divider-corner {
    background: var(--surface);
    width: 4px;
    height: 4px;
}

/* ── TOOLBAR CENTER ───────────────────────────────────────────────── */

.split-toolbar-center {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    overflow: hidden;
}

.split-panel-info {
    font-size: 10.5px;
    font-family: 'IBM Plex Mono', monospace;
    color: var(--text3, var(--text2));
    opacity: 0.55;
    white-space: nowrap;
    flex-shrink: 0;
}

.split-quick-bar {
    display: flex;
    align-items: center;
    gap: 3px;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
}
.split-quick-bar::-webkit-scrollbar { display: none; }

.split-quick-btn {
    border: 1px solid var(--border);
    background: var(--surface2);
    color: var(--text2);
    border-radius: var(--radius);
    padding: 3px 7px;
    font-size: 10px;
    font-family: 'IBM Plex Mono', monospace;
    cursor: pointer;
    transition: all 0.12s;
    min-width: 30px;
    text-align: center;
    flex-shrink: 0;
}
.split-quick-btn:hover { border-color: var(--accent); color: var(--accent); }
.split-quick-btn.active {
    background: var(--accent-soft);
    border-color: var(--accent);
    color: var(--accent);
    font-weight: 600;
}

.split-settings-btn {
    border: 1px solid var(--border);
    background: var(--surface2);
    color: var(--text2);
    border-radius: var(--radius);
    padding: 4px 10px;
    font-size: 10.5px;
    font-family: 'IBM Plex Mono', monospace;
    cursor: pointer;
    transition: all 0.12s;
    white-space: nowrap;
}
.split-settings-btn:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }

/* Panel number badge */
.split-panel-num {
    font-size: 9.5px;
    font-family: 'IBM Plex Mono', monospace;
    color: var(--text3, var(--text2));
    opacity: 0.5;
    flex-shrink: 0;
    padding-right: 2px;
}

/* ── SETTINGS DIALOG ──────────────────────────────────────────────── */

.split-settings-dialog {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.45);
    backdrop-filter: blur(2px);
    z-index: 3000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.split-settings-box {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    width: 420px;
    max-width: 95vw;
    box-shadow: 0 8px 32px rgba(0,0,0,0.28);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.split-settings-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text);
}

.split-settings-close {
    background: none;
    border: none;
    color: var(--text2);
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    padding: 2px 6px;
    border-radius: 4px;
    transition: all 0.12s;
}
.split-settings-close:hover { background: var(--red-bg); color: var(--red); }

.split-settings-body {
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    overflow-y: auto;
    max-height: 60vh;
}

.split-settings-section {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.split-settings-label {
    font-size: 10.5px;
    font-weight: 600;
    color: var(--text2);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.split-settings-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.split-settings-input {
    width: 70px;
    padding: 5px 8px;
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
    font-size: 13px;
    font-family: 'IBM Plex Mono', monospace;
    text-align: center;
    outline: none;
}
.split-settings-input:focus { border-color: var(--accent); }

.split-settings-hint {
    font-size: 10px;
    color: var(--text2);
    opacity: 0.65;
    line-height: 1.4;
}

.split-settings-apply-btn {
    padding: 5px 12px;
    background: var(--accent-soft);
    border: 1px solid var(--accent);
    border-radius: var(--radius);
    color: var(--accent);
    font-size: 11px;
    font-family: 'IBM Plex Mono', monospace;
    cursor: pointer;
    transition: all 0.12s;
}
.split-settings-apply-btn:hover { background: var(--accent); color: #fff; }

/* Slider */
.split-settings-slider-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
}

.split-settings-slider {
    flex: 1;
    accent-color: var(--accent);
    cursor: pointer;
}

.split-settings-slider-val {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 13px;
    font-weight: 600;
    color: var(--accent);
    min-width: 24px;
    text-align: center;
}

/* Grid picker 4×4 */
.split-settings-grid-picker {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 5px;
}

.split-picker-cell {
    aspect-ratio: 1;
    border: 1px solid var(--border);
    background: var(--surface2);
    color: var(--text2);
    border-radius: 5px;
    font-size: 11px;
    font-family: 'IBM Plex Mono', monospace;
    cursor: pointer;
    transition: all 0.12s;
    display: flex;
    align-items: center;
    justify-content: center;
}
.split-picker-cell:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.split-picker-cell--active {
    background: var(--accent) !important;
    border-color: var(--accent) !important;
    color: #fff !important;
    font-weight: 700;
}
.split-picker-cell--disabled {
    opacity: 0.22;
    cursor: not-allowed;
    background: var(--surface);
}

/* Footer */
.split-settings-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    border-top: 1px solid var(--border);
    gap: 8px;
}

.split-settings-reset-btn {
    background: none;
    border: 1px solid var(--border);
    color: var(--text2);
    padding: 5px 10px;
    border-radius: var(--radius);
    font-size: 10.5px;
    cursor: pointer;
    transition: all 0.12s;
}
.split-settings-reset-btn:hover { border-color: var(--accent); color: var(--accent); }

.split-settings-done-btn {
    background: var(--accent);
    border: 1px solid var(--accent);
    color: #fff;
    padding: 5px 16px;
    border-radius: var(--radius);
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.12s;
}
.split-settings-done-btn:hover { opacity: 0.88; }

/* Config bar at bottom of each split panel */
.split-config {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    gap: 4px;
    padding: 5px 8px;
    background: rgba(var(--surface-rgb, 255,255,255), 0.88);
    backdrop-filter: blur(6px);
    border-top: 1px solid var(--border);
    z-index: 500;
    pointer-events: auto;
}

[data-theme="dark"] .split-config {
    background: rgba(26, 25, 22, 0.88);
}

.split-product-select,
.split-basemap-select {
    flex: 1;
    font-size: 10.5px;
    font-family: 'IBM Plex Sans', sans-serif;
    background: var(--surface2);
    border: 1px solid var(--border);
    color: var(--text2);
    border-radius: var(--radius);
    padding: 3px 6px;
    outline: none;
    cursor: pointer;
    max-width: 200px;
}
.split-product-select { flex: 2; }
.split-product-select:focus,
.split-basemap-select:focus { border-color: var(--accent); }

/* Drag dividers */
.split-divider-v {
    width: 4px;
    background: var(--border);
    cursor: col-resize;
    transition: background 0.15s;
    z-index: 5;
}
.split-divider-h {
    height: 4px;
    background: var(--border);
    cursor: row-resize;
    transition: background 0.15s;
    z-index: 5;
}
.split-divider-v:hover,
.split-divider-h:hover { background: var(--accent); }

/* ── ON-MAP COLORBAR CONTROL ──────────────────────────────────────── */

.map-cbar-control {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
}

/* Collapsed "show" button */
.map-cbar-show-btn {
    width: 32px;
    height: 32px;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text2);
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: var(--shadow);
    transition: all 0.13s;
}
.map-cbar-show-btn:hover { border-color: var(--accent); color: var(--accent); }

/* Shared colorbar card */
.map-cbar {
    position: relative;
    display: flex;
    flex-direction: column;
    /* Latar lebih solid (86%) drpd sebelumnya (66%) agar teks tetap jelas
       di atas peta apa pun warnanya; saturate diturunkan agar warna peta yang
       tembus di balik blur tidak "ramai" dan mengganggu keterbacaan teks. */
    background: var(--surface);
    background: color-mix(in srgb, var(--surface) 86%, transparent);
    border: 1px solid color-mix(in srgb, var(--border2) 85%, transparent);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    backdrop-filter: blur(11px) saturate(0.55);
    -webkit-backdrop-filter: blur(11px) saturate(0.55);
    padding: 7px 8px 6px;
    min-width: 150px;
    max-width: 560px;
    box-sizing: border-box;
    overflow: visible;
    /* --cbar-scale: faktor skala font/elemen, di-set via JS saat legend di-resize (default 1 = ukuran asli). */
}
/* Pegangan resize di pojok KIRI-ATAS (legend ditambat pojok kanan-bawah → tumbuh
   ke kiri-atas terasa alami). Tarik untuk mengubah lebar & tinggi legend. */
.map-cbar-resize {
    position: absolute;
    top: 0; left: 0;
    width: 14px; height: 14px;
    cursor: nwse-resize;
    z-index: 2;
    border-top: 2px solid var(--text3);
    border-left: 2px solid var(--text3);
    border-top-left-radius: var(--radius);
    opacity: 0.45;
    transition: opacity 0.12s, border-color 0.12s;
}
.map-cbar-resize:hover { opacity: 1; border-color: var(--accent); }

/* ── Horizontal layout ── */
/* .map-cbar--h {} */

.map-cbar-header {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 5px;
}

.map-cbar-name {
    flex: 1;
    font-size: clamp(9px, calc(10px * var(--cbar-scale, 1)), 16px);
    font-weight: 600;
    color: var(--text);
    text-shadow: 0 0 3px color-mix(in srgb, var(--surface) 75%, transparent);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.map-cbar-actions {
    display: flex;
    gap: 2px;
    flex-shrink: 0;
}

.map-cbar-btn {
    width: 20px;
    height: 20px;
    border: 1px solid var(--border);
    background: var(--surface2);
    border-radius: 3px;
    color: var(--text2);
    font-size: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.12s;
    line-height: 1;
}
.map-cbar-btn:hover { border-color: var(--accent); color: var(--accent); }

.map-cbar-bar {
    flex: 1 1 auto;
    min-height: 10px;
    border-radius: 3px;
    width: 100%;
    border: 1px solid var(--border);
}

.map-cbar-labels {
    display: flex;
    justify-content: space-between;
    margin-top: 4px;
}
.map-cbar-labels span {
    font-family: 'IBM Plex Mono', monospace;
    font-size: clamp(7.5px, calc(8px * var(--cbar-scale, 1)), 14px);
    color: var(--text);
    text-shadow: 0 0 3px color-mix(in srgb, var(--surface) 75%, transparent);
}

.map-cbar-unit {
    font-size: clamp(8px, calc(9px * var(--cbar-scale, 1)), 15px);
    color: var(--text2);
    text-shadow: 0 0 3px color-mix(in srgb, var(--surface) 75%, transparent);
    margin-top: 4px;
    text-align: center;
    line-height: 1.3;
}

/* ── Portrait (vertical) layout ── */
/* Rentang lebar disamakan dengan rentang resize JS (lihat MINW/MAXW di
   colorbar-overlay.js: _portrait ? 60..200). Sebelumnya max-width di sini
   hanya 88px, jauh lebih kecil dari batas JS (200px) — akibatnya handle
   resize "macet" di ~88px dan legend jadi tinggi-kurus tak proporsional
   saat ditarik. Disamakan agar fleksibel sama seperti landscape. */
.map-cbar--v {
    min-width: 60px;
    max-width: 200px;
    display: flex;
    flex-direction: column;
    /* PENTING: stretch (bukan center) — agar v-wrap/name/unit ikut melebar
       saat kartu di-resize lebih lebar, bukan cuma "mengambang" di tengah. */
    align-items: stretch;
    padding: 6px 6px 8px;
}

.map-cbar-actions--v {
    align-self: flex-end;
    margin-bottom: 3px;
}

.map-cbar-name--v {
    /* PENTING: reset flex bawaan dari .map-cbar-name (flex:1, dipakai di
       header layout horizontal). Tanpa ini, name--v ikut flex-grow:1 di
       dalam .map-cbar--v (kolom) dan rebutan sisa tinggi dengan v-wrap —
       itulah sebabnya bar vertikal cuma kebagian separuh tinggi & muncul
       celah kosong besar di atas bar saat kartu di-resize tinggi. */
    flex: 0 0 auto;
    font-size: clamp(8px, calc(9px * var(--cbar-scale, 1)), 14px);
    font-weight: 600;
    color: var(--text);
    text-shadow: 0 0 3px color-mix(in srgb, var(--surface) 75%, transparent);
    text-align: center;
    margin-bottom: 5px;
    writing-mode: horizontal-tb;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.map-cbar-v-wrap {
    display: flex;
    gap: 4px;
    align-items: stretch;
    flex: 1;
    width: 100%;
}

.map-cbar-labels--v {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-end;
    flex-shrink: 0;
    min-height: 120px;
}
.map-cbar-labels--v span {
    font-family: 'IBM Plex Mono', monospace;
    font-size: clamp(6.5px, calc(7.5px * var(--cbar-scale, 1)), 13px);
    color: var(--text);
    text-shadow: 0 0 3px color-mix(in srgb, var(--surface) 75%, transparent);
    line-height: 1;
}

.map-cbar-bar--v {
    /* Ketebalan bar proporsional terhadap lebar v-wrap (20%), dibatasi
       8-26px — sebelumnya flex:1 1 auto + max-width:38px membuat bar
       rakus mengambil semua sisa ruang lebar (apalagi kalau kolom label
       kosong/sempit), sehingga tampak terlalu gemuk dan tidak proporsional
       dibanding tingginya. Konsisten dengan win-legend-gradient--v di
       split window yang sudah pakai pola proporsional serupa. */
    flex: 0 0 auto;
    width: clamp(8px, 20%, 26px);
    min-width: 8px;
    max-width: 26px;
    min-height: 0;
    max-height: none;
    height: auto;
    align-self: stretch;
    border-radius: 3px;
    border: 1px solid var(--border);
}

.map-cbar-unit--v {
    font-size: clamp(5px, calc(5.5px * var(--cbar-scale, 1)), 11px);
    color: var(--text2);
    text-shadow: 0 0 3px color-mix(in srgb, var(--surface) 75%, transparent);
    font-family: 'IBM Plex Mono', monospace;
    margin-top: 5px;
    text-align: center;
    line-height: 1.3;
    writing-mode: horizontal-tb;
    word-break: break-word;
    max-width: 100%;
}

/* ── Layer picker button (active state) ── */
.map-cbar-btn--picker.active {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

/* ── Layer picker dropdown ── */
.map-cbar-picker {
    margin-top: 6px;
    border-top: 1px solid var(--border);
    padding-top: 5px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.map-cbar-picker-header {
    font-size: 8.5px;
    font-weight: 600;
    color: var(--text3);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 2px;
}

.map-cbar-picker-item {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 3px 4px;
    border-radius: 3px;
    cursor: pointer;
    transition: background 0.1s;
}
.map-cbar-picker-item:hover {
    background: var(--surface2);
}
.map-cbar-picker-item--active {
    background: color-mix(in srgb, var(--accent) 12%, transparent);
}

.map-cbar-picker-swatch {
    width: 36px;
    height: 7px;
    border-radius: 2px;
    border: 1px solid var(--border);
    flex-shrink: 0;
}

.map-cbar-picker-auto-icon {
    width: 36px;
    font-size: 11px;
    color: var(--text3);
    text-align: center;
    flex-shrink: 0;
}

.map-cbar-picker-label {
    flex: 1;
    font-size: 9px;
    color: var(--text2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 120px;
}

.map-cbar-picker-check {
    font-size: 9px;
    color: var(--accent);
    flex-shrink: 0;
}

/* Leaflet bottom-right padding — copyright + legend tepat di pojok kanan bawah peta.
   #timeline adalah flex-sibling (bukan overlay), jadi tak perlu padding besar. */
.leaflet-bottom.leaflet-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    padding-bottom: 6px;
    padding-right: 6px;
}

/* Dalam split mode: override padding untuk SEMUA window (primary & secondary),
   karena win-tl sudah ada sebagai flex-sibling — bukan di dalam canvas peta.
   Ini menyamakan posisi copyright Leaflet di semua window. */
body.split-active .split-win-body .leaflet-bottom.leaflet-right {
    padding-bottom: 4px;
    padding-right: 4px;
    gap: 2px;
}

/* Tutup subpixel gap antar tile — kritis untuk dark basemap */
.leaflet-tile {
    outline: 1px solid transparent;
}

/* PATCH: hapus will-change + translateZ permanent dari pane Leaflet.
   Di Chrome, ini menciptakan GPU layer terpisah untuk SETIAP pane di SETIAP window.
   4 window × 3 pane = 12 GPU layer permanen → compositing overhead besar.
   Leaflet sudah mengelola transform-nya sendiri untuk pan/zoom — kita tidak perlu override. */
.leaflet-tile-container {
    /* Biarkan Leaflet mengelola transform internalnya */
}

/* Cegah anti-aliasing tile di batas container split window */
.split-win .leaflet-container {
    image-rendering: auto;
    backface-visibility: hidden;
}

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

/* ═══════════════════════════════════════════════════════════════════
   INTEGRATED SPLIT WINDOW SYSTEM v3
   ═══════════════════════════════════════════════════════════════════ */

/* ── Map-wrap: window host area ──────────────────────────────────── */
#map-wrap { position: relative !important; overflow: hidden !important; flex: 1; }
#map      { position: absolute !important; inset: 0; width: 100% !important; height: 100% !important; }

/* ── Global timeline: hidden in split mode ───────────────────────── */
body.split-active #timeline { display: none !important; }

/* ── Per-window timeline: hidden on primary window in single-window mode ─── */
/* JS sets display:none on init and restores it on _enterSplitMode.           */
/* This CSS rule is a fallback / defence-in-depth.                            */
body:not(.split-active) .split-win--primary .win-tl { display: none !important; }

/* ── Split Toolbar ───────────────────────────────────────────────── */
.split-float-toolbar {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 40px;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    display: flex; align-items: center;
    padding: 0 10px; gap: 8px;
    z-index: 900; flex-shrink: 0;
    transition: transform 0.2s, opacity 0.2s;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.split-float-toolbar.hidden { transform: translateY(-100%); opacity: 0; pointer-events: none; }
.split-float-title { font-size: 12px; font-weight: 600; color: var(--accent); white-space: nowrap; flex-shrink: 0; }
.split-float-toolbar-mid { flex: 1; display: flex; align-items: center; gap: 6px; overflow: hidden; }
.split-float-toolbar-actions { display: flex; align-items: center; gap: 5px; flex-shrink: 0; }

.split-quick-bar  { display: flex; gap: 3px; }
.split-quick-btn  {
    padding: 3px 9px; font-size: 11px; border-radius: 4px;
    border: 1px solid var(--border); background: var(--surface2);
    color: var(--text2); cursor: pointer; transition: all 0.12s; min-width: 26px;
}
.split-quick-btn:hover  { background: var(--accent-dim); color: var(--accent); }
.split-quick-btn.active { background: var(--accent); color: #fff; border-color: var(--accent); }

.split-arrange-btn {
    padding: 4px 10px; font-size: 11px; border-radius: 4px;
    border: 1px solid var(--border); background: var(--surface2);
    color: var(--text2); white-space: nowrap; cursor: pointer; transition: all 0.12s;
}
.split-arrange-btn:hover { background: var(--accent-dim); color: var(--accent); }

.split-exit-btn {
    padding: 4px 10px; font-size: 11px; border-radius: 4px;
    border: 1px solid var(--border); background: var(--surface2);
    color: var(--red); cursor: pointer; white-space: nowrap; transition: all 0.12s;
}
.split-exit-btn:hover { background: var(--red-bg); }

/* ── Toolbar Batch Sync Buttons ──────────────────────────────────── */
.split-sync-step-btn,
.split-sync-map-btn {
    padding: 4px 10px; font-size: 11px; border-radius: 4px;
    border: 1px solid var(--border); background: var(--surface2);
    color: var(--text2); white-space: nowrap; cursor: pointer; transition: all 0.15s;
}
.split-sync-step-btn:hover { background: var(--accent-dim); color: var(--accent); border-color: var(--accent); }
.split-sync-map-btn:hover  { background: var(--accent-dim); color: var(--accent); border-color: var(--accent); }

.split-sync-step-btn--on {
    background: color-mix(in srgb, var(--accent) 18%, transparent) !important;
    border-color: var(--accent) !important;
    color: var(--accent) !important;
    box-shadow: 0 0 0 1px var(--accent);
}
.split-sync-map-btn--on {
    background: color-mix(in srgb, #22c55e 18%, transparent) !important;
    border-color: #22c55e !important;
    color: #22c55e !important;
    box-shadow: 0 0 0 1px #22c55e;
}

/* ── Split Window ────────────────────────────────────────────────── */
.split-win {
    position: absolute;
    min-width: 200px; min-height: 140px;
    display: flex; flex-direction: column;
    overflow: hidden;
    background: var(--surface);
    border-radius: 0; border: none; box-shadow: none;
    transition: box-shadow 0.15s, border-color 0.15s;
}
#map-wrap.split-mode .split-win {
    border-radius: 8px !important;
    border: 1px solid var(--border) !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.13) !important;
}
#map-wrap.split-mode .split-win--active {
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 2px rgba(59,130,246,0.22), 0 4px 18px rgba(0,0,0,0.18) !important;
}

/* ── Titlebar ────────────────────────────────────────────────────── */
.split-win-titlebar {
    display: none; /* hidden by default on primary */
    align-items: center; height: 34px;
    padding: 0 6px 0 10px;
    background: var(--surface2);
    border-bottom: 1px solid var(--border);
    gap: 5px; flex-shrink: 0;
    user-select: none; cursor: grab;
}
.split-win-titlebar.visible { display: flex; }
.split-win-titlebar:active  { cursor: grabbing; }
.split-win-icon  { font-size: 12px; flex-shrink: 0; }
.split-win-label {
    flex: 1; font-size: 11px; font-weight: 600; color: var(--text);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-family: 'IBM Plex Mono', monospace;
}
.split-win-title-actions { display: flex; gap: 2px; margin-left: 4px; }
.split-win-time {
    display: flex; align-items: center; gap: 3px;
    white-space: nowrap; margin-left: auto;
    flex-shrink: 0;
}
.swt-icon {
    font-size: 13px; line-height: 1; flex-shrink: 0; width: 18px; text-align: center;
}
.swt-icon.swt-radar {
    filter: brightness(0); /* hitam */
}
[data-theme="dark"] .swt-icon.swt-radar {
    filter: none; /* emoji tetap terlihat di dark mode */
}
.swt-time-val {
    font-size: 11px; font-weight: 600; color: var(--text);
    font-family: 'IBM Plex Mono', monospace;
    letter-spacing: 0.01em;
}
.swt-utc {
    font-size: 11px; font-weight: 600; color: var(--text);
    font-family: 'IBM Plex Mono', monospace;
}
.swt-sep {
    color: var(--text3); font-size: 10px; font-weight: 400;
    display: inline-flex; align-items: center; justify-content: center;
    width: 16px; text-align: center; flex-shrink: 0;
}
/* ── Preload indicator in split-win-time ─────────────────────────────────── */
.split-win-time.swt-preloading {
    gap: 4px;
    flex-wrap: nowrap;
    /* Pastikan indikator tidak terpotong di layar sempit */
    min-width: 0;
    overflow: hidden;
}
.swt-preload-bar {
    display: flex; align-items: center; gap: 2px;
    flex-shrink: 1;
    min-width: 0;
}
.swt-dot {
    width: 5px; height: 5px; border-radius: 50%;
    background: var(--text3);
    transition: background 0.2s, transform 0.2s;
    flex-shrink: 0;
}
.swt-dot--on {
    background: var(--accent);
    transform: scale(1.15);
}
/* Animasi pulse pada dot terakhir yang on saat loading */
.swt-preloading .swt-dot--on:last-of-type {
    animation: swt-dot-pulse 0.8s ease-in-out infinite;
}
@keyframes swt-dot-pulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.35; }
}
.swt-preload-pct {
    font-size: 10px; font-weight: 600;
    font-family: 'IBM Plex Mono', monospace;
    color: var(--accent);
    letter-spacing: 0.02em;
    min-width: 26px; text-align: right;
    flex-shrink: 0;
}
[data-theme="dark"] .swt-dot { background: var(--text3); }
[data-theme="dark"] .swt-dot--on { background: var(--accent); }

/* ── Responsive: layar < 640px (smartphone) ─────────────────────────────── */
@media (max-width: 639px) {
    /* Titlebar: boleh sedikit lebih tinggi jika konten perlu ruang lebih */
    .split-win-titlebar {
        height: auto;
        min-height: 34px;
        padding: 4px 6px 4px 10px;
        flex-wrap: nowrap;
    }

    /* split-win-time: ikuti ruang yang tersisa, tapi jangan overflow */
    .split-win-time {
        max-width: 50%;
        flex-shrink: 1;
        overflow: hidden;
    }

    /* Indikator preload: kurangi dot menjadi 6, ukuran sedikit lebih besar
       agar mudah dibaca di layar kecil */
    .swt-dot {
        width: 6px; height: 6px;
    }
    .swt-preload-pct {
        font-size: 11px;
        min-width: 28px;
    }

    /* Label produk: biarkan mengambil ruang yang tersisa */
    .split-win-label {
        min-width: 0;
        flex: 1;
    }
}

/* ── Responsive: layar < 380px (smartphone kecil / landscape phone) ──────── */
@media (max-width: 379px) {
    .split-win-time {
        max-width: 44%;
    }
    /* Kurangi dot lebih lanjut */
    .swt-dot {
        width: 5px; height: 5px;
    }
    .swt-preload-bar {
        gap: 1px;
    }
    .swt-preload-pct {
        font-size: 10px;
        min-width: 24px;
    }
}

/* ── Landscape smartphone: tinggi terbatas, prioritaskan compactness ─────── */
@media (max-height: 500px) and (orientation: landscape) {
    .split-win-titlebar {
        height: 30px;
        min-height: 30px;
        padding: 2px 6px 2px 8px;
    }
    .swt-dot {
        width: 4px; height: 4px;
    }
    .swt-preload-pct {
        font-size: 9px;
        min-width: 22px;
    }
}

.split-win-btn {
    width: 22px; height: 22px; border-radius: 4px;
    border: none; background: transparent; color: var(--text3);
    font-size: 10px; display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: background 0.12s, color 0.12s; flex-shrink: 0;
}
.split-win-btn:hover       { background: var(--border); color: var(--text); }
.split-win-btn.active      { background: var(--accent-dim); color: var(--accent); }
.split-win-close:hover     { background: var(--red-bg); color: var(--red); }
.split-win-legend.active   { background: var(--accent-dim); color: var(--accent); }
/* Spacer mendorong wt-sync-btn/wt-mapsync-btn ke ujung kanan win-tl-controls */
.wt-spacer { flex: 1; }

/* ── Window Body ─────────────────────────────────────────────────── */
.split-win-body      { flex: 1; position: relative; overflow: hidden; min-height: 0; }
.split-win-map       { position: absolute; inset: 0; width: 100%; height: 100%; }

/* ── Drop Overlay ────────────────────────────────────────────────── */
.split-win-drop-overlay {
    position: absolute; inset: 0;
    background: rgba(59,130,246,0.10);
    border: 2px dashed var(--accent); border-radius: 2px;
    display: flex; align-items: center; justify-content: center;
    opacity: 0; pointer-events: none; transition: opacity 0.15s; z-index: 80;
}
.split-win-drop-overlay.visible { opacity: 1; }
.split-win-drop-overlay.hover   { background: rgba(59,130,246,0.22); border-style: solid; opacity: 1; }
.split-drop-label {
    font-size: 12px; font-weight: 600; color: var(--accent);
    background: var(--surface); padding: 4px 12px;
    border-radius: 20px; pointer-events: none; box-shadow: var(--shadow);
}

/* ── Config Bar ──────────────────────────────────────────────────── */
/* ── Floating per-window layer panel (left-side mini sidebar) ────── */
/*
 * win-lp sits inside split-win-body (position:relative; overflow:hidden).
 * Collapsed: a slim 26px strip on the left edge showing a layer icon.
 * Expanded:  a drawer (190px) slides out to the right of the strip,
 *            containing: active layer list, product catalog, basemap picker.
 */
.win-lp {
    position: absolute;
    left: 0; top: 6px;
    bottom: 0;          /* stretch to bottom of win-body so drawer can fill height */
    z-index: 600;
    pointer-events: none;    /* children handle events */
    display: flex;
    align-items: flex-start; /* strip stays at top, drawer extends downward */
}

/* ── Collapsed strip (always visible) ─────────────────────────────── */
.win-lp-strip {
    width: 22px;
    height: auto;
    min-height: unset;
    pointer-events: all;
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: none;
    border-radius: 0 6px 6px 0;
    padding: 5px 3px;
    cursor: pointer;
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    box-shadow: 2px 2px 8px rgba(0,0,0,0.12);
    transition: background 0.12s, box-shadow 0.12s;
    flex-shrink: 0;
    align-self: flex-start; /* hanya setinggi konten, tidak stretch */
}
.win-lp-strip:hover { background: var(--surface2); box-shadow: 2px 2px 10px rgba(0,0,0,0.18); }
.win-lp-strip-icon { font-size: 13px; line-height: 1; }
.win-lp-badge {
    background: var(--accent); color: #fff;
    border-radius: 8px; padding: 0 3px; font-size: 9px; font-weight: 700;
    min-width: 13px; text-align: center; line-height: 13px; height: 13px;
}

/* ── Drawer (hidden when collapsed) ──────────────────────────────── */
.win-lp-drawer {
    width: 190px;
    max-height: calc(100% - 12px);
    height: auto;
    pointer-events: none;
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: none;
    border-radius: 0 7px 7px 0;
    box-shadow: 4px 4px 18px rgba(0,0,0,0.15);
    overflow: hidden;
    display: flex;
    flex-direction: column;

    opacity: 0;
    transform: translateX(-10px) scaleX(0.96);
    transform-origin: left center;

    transition:
        transform 180ms ease,
        opacity 150ms ease;

    /* will-change dihapus: drawer hanya transisi sesekali saat dibuka/tutup,
       bukan setiap frame animasi. Permanent will-change membuat GPU layer
       aktif terus-menerus tanpa manfaat nyata saat drawer sedang diam. */
    contain: layout paint style;
}

.win-lp:not(.win-lp--collapsed) .win-lp-drawer {
    opacity: 1;
    transform: translateX(0) scaleX(1);
    pointer-events: auto;
}

/* ── Drawer header ───────────────────────────────────────────────── */
.win-lp-drawer-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 5px 8px; background: var(--surface2);
    border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.win-lp-drawer-title { font-size: 10.5px; font-weight: 700; color: var(--accent); }
.win-lp-drawer-close {
    border: none; background: transparent; color: var(--text3);
    cursor: pointer; font-size: 14px; padding: 0 2px; line-height: 1;
    border-radius: 3px; transition: color 0.1s, background 0.1s;
}
.win-lp-drawer-close:hover { color: var(--text); background: var(--border); }

/* ── Scroll area ─────────────────────────────────────────────────── */
.win-lp-scroll {
    overflow-y: auto; flex: 1;
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
    /* Body drawer = SATU-SATUNYA area scroll di dalam drawer (katalog di
       dalamnya mengalir penuh, tidak scroll sendiri) → tidak ada konflik
       nested-scroll. contain agar guliran tidak bocor ke peta di belakang. */
    overscroll-behavior: contain;
    touch-action: pan-y;
}

/* ── Section headings ────────────────────────────────────────────── */
.win-lp-sec-head {
    font-size: 9px; font-weight: 700; color: var(--text3);
    padding: 5px 8px 3px; text-transform: uppercase; letter-spacing: 0.5px;
    background: var(--surface2); border-bottom: 1px solid var(--border);
    border-top: 1px solid var(--border); flex-shrink: 0;
    white-space: nowrap; overflow: hidden;
}

/* ── Active layer rows ───────────────────────────────────────────── */
.win-lp-list { padding: 3px 0; }
.win-lp-empty {
    font-size: 9.5px; color: var(--text3); text-align: center;
    padding: 7px 8px; font-style: italic;
}
.win-lp-row {
    display: flex; align-items: center; gap: 5px;
    padding: 3px 8px; transition: background 0.1s;
}
.win-lp-row:hover { background: var(--surface2); }
.win-lp-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.win-lp-name {
    flex: 1; font-size: 10.5px; color: var(--text);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.win-lp-remove {
    width: 15px; height: 15px; border: none; background: transparent;
    color: var(--text3); cursor: pointer; border-radius: 3px;
    font-size: 13px; line-height: 1; padding: 0; display: flex;
    align-items: center; justify-content: center; flex-shrink: 0;
    transition: color 0.1s, background 0.1s;
}
.win-lp-remove:hover { color: var(--red, #ef4444); background: rgba(239,68,68,0.1); }

/* ── Product catalog ─────────────────────────────────────────────── */
/* Batasi ~6 produk, sisanya bisa di-scroll (seperti daftar NONAKTIF di sidebar
   saat split tidak aktif) agar drawer per-window tidak terlalu panjang. */
.win-lp-catalog {
    padding: 3px 0;
    /* Tidak scroll sendiri — mengalir penuh di dalam .win-lp-scroll (satu scroll).
       Menghilangkan konflik scroll antara daftar Radar & Satelit di drawer. */
}
.win-lp-catalog::-webkit-scrollbar { width: 6px; }
.win-lp-catalog::-webkit-scrollbar-thumb { background: var(--border2, #ccc); border-radius: 3px; }
.win-lp-catalog::-webkit-scrollbar-track { background: transparent; }
.win-lp-cat-btn {
    display: flex; align-items: center; gap: 5px;
    width: 100%; padding: 3px 8px;
    border: none; background: transparent; cursor: pointer;
    text-align: left; transition: background 0.1s;
}
.win-lp-cat-btn:hover { background: var(--surface2); }
.win-lp-cat-btn--active { background: var(--accent-dim, rgba(59,130,246,0.08)); }
.win-lp-cat-btn--active:hover { background: var(--accent-dim, rgba(59,130,246,0.14)); }
.win-lp-cat-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.win-lp-cat-name {
    flex: 1; font-size: 10.5px; color: var(--text);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.win-lp-cat-action {
    font-size: 13px; font-weight: 700; color: var(--text3);
    flex-shrink: 0; width: 14px; text-align: center; line-height: 1;
}
.win-lp-cat-btn--active .win-lp-cat-action { color: var(--red, #ef4444); }

/* ── Basemap grid ────────────────────────────────────────────────── */
.win-lp-bmap-grid {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 4px; padding: 5px 7px 8px;
}
.win-lp-bmap-btn {
    padding: 4px 3px; font-size: 9.5px;
    border-radius: 4px; border: 1px solid var(--border);
    background: var(--surface2); color: var(--text2);
    cursor: pointer; text-align: center;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.win-lp-bmap-btn:hover { background: var(--surface); border-color: var(--accent); color: var(--text); }
.win-lp-bmap-btn.active { background: var(--accent-dim); border-color: var(--accent); color: var(--accent); font-weight: 600; }

/* ── Win-lp Boundary / GeoJSON Panel ─────────────────────────────── */
.win-lp-boundary { padding: 4px 0 6px; }

.win-lp-blayer-row {
    display: flex; align-items: center; gap: 5px;
    padding: 3px 8px 0;
}
.win-lp-blayer-row--disabled { opacity: 0.4; pointer-events: none; }

.win-lp-blayer-color {
    width: 20px; height: 20px; border-radius: 4px;
    border: 1px solid var(--border); padding: 0;
    background: none; cursor: pointer; flex-shrink: 0;
}
.win-lp-blayer-color::-webkit-color-swatch-wrapper { padding: 1px; }
.win-lp-blayer-color::-webkit-color-swatch { border-radius: 3px; border: none; }

.win-lp-blayer-name {
    flex: 1; font-size: 10px; color: var(--text2);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.win-lp-blayer-tog-wrap { margin-left: auto; flex-shrink: 0; }

.win-lp-blayer-sliders { padding: 2px 8px 4px 10px; }

.win-lp-blayer-slider-row {
    display: flex; align-items: center; gap: 4px; margin-top: 3px;
}
.win-lp-blayer-slider-lbl {
    font-size: 9px; color: var(--text3); width: 34px; flex-shrink: 0;
}
.win-lp-blayer-slider-row .win-lp-op-slider { flex: 1; }
.win-lp-blayer-val {
    font-size: 9px; color: var(--text3); width: 28px;
    text-align: right; flex-shrink: 0;
}

.tog--disabled { opacity: 0.4; pointer-events: none; }

/* ── Sidebar split-mode: product panels ──────────────────────────── */
/* Layer Aktif: disabled, read-only */
#sidebar.split-mode .accordion[data-id="active-layers"] .accordion-head {
    opacity: 0.9;
}
/* Radar/Satelit sections stay interactive but label changes */
.lp-split-hint {
    font-size: 9px; color: var(--accent); margin-left: auto;
    font-weight: 500; white-space: nowrap;
}

/* Window status in "Layer Aktif" when split active */
.lp-win-status {
    margin: 4px 0; border: 1px solid var(--border); border-radius: 5px; overflow: hidden;
}
.lp-win-status-head {
    background: var(--surface2); padding: 3px 8px;
    font-size: 10px; font-weight: 600; color: var(--text2);
    border-bottom: 1px solid var(--border);
}
.lp-win-status-empty { font-size: 10px; color: var(--text3); padding: 4px 8px; font-style: italic; }
.lp-win-status-row {
    display: flex; align-items: center; gap: 6px;
    padding: 3px 8px;
}
.lp-win-status-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.lp-win-status-name { flex: 1; font-size: 10.5px; color: var(--text2); }
.lp-win-status-badge { font-size: 8.5px !important; padding: 1px 4px !important; }

/* Product item in split mode: with window add buttons */
.lp-item--split { flex-wrap: wrap; gap: 4px; align-items: flex-start; padding: 5px 6px; }
.lp-item--split .lp-info--draggable { cursor: grab; flex: 1; min-width: 100px; }
.lp-item--split .lp-info--draggable:active { cursor: grabbing; }
.lp-win-btns { display: flex; flex-wrap: wrap; gap: 3px; width: 100%; margin-top: 2px; }
.lp-win-add-btn {
    font-size: 9.5px; padding: 2px 6px; border-radius: 3px;
    border: 1px solid var(--border2); background: var(--surface2);
    color: var(--text2); cursor: pointer; transition: all 0.12s;
    font-weight: 500;
}
.lp-win-add-btn:hover:not([disabled]) {
    background: var(--accent-dim, rgba(59,130,246,0.15));
    border-color: var(--accent); color: var(--accent);
}
.lp-win-add-btn--has {
    background: var(--accent-dim, rgba(59,130,246,0.12));
    border-color: var(--accent); color: var(--accent);
    cursor: pointer;
    font-weight: 600;
}
.lp-win-add-btn--has:hover {
    background: rgba(239,68,68,0.12);
    border-color: var(--red, #ef4444); color: var(--red, #ef4444);
}

/* ── Resize Handles ──────────────────────────────────────────────── */
.split-win-resize-br, .split-win-resize-r, .split-win-resize-b { display: none; }
.split-win-resize-br.active { display: block; position: absolute; bottom:0; right:0; width:16px; height:16px; cursor:nwse-resize; z-index:30; }
.split-win-resize-r.active  { display: block; position: absolute; top:34px; right:0; width:5px; bottom:0; cursor:ew-resize; z-index:25; }
.split-win-resize-b.active  { display: block; position: absolute; left:0; right:0; bottom:0; height:5px; cursor:ns-resize; z-index:25; }
.split-win-resize-br::after {
    content:''; position:absolute; bottom:3px; right:3px;
    width:8px; height:8px; border-right:2px solid var(--border2); border-bottom:2px solid var(--border2);
}
.split-win-resize-r:hover,
.split-win-resize-b:hover { background: rgba(59,130,246,0.12); }

/* ── Per-window Legend ───────────────────────────────────────────── */
/* Lives inside .split-win-body (position:relative, overflow:hidden),   */
/* absolutely positioned at bottom so it floats above the map.          */
/* ── Per-window Legend ───────────────────────────────────────────── */
/*
 * Layout:
 *   [box orient=h] → pojok kanan bawah, item tersusun baris, max-width dibatasi
 *   [box orient=v] → pojok kanan bawah, item tersusun kolom, tinggi fleksibel
 */
.split-win-legend-box {
    position: absolute;
    z-index: 650;
    pointer-events: none;
    display: none;
    gap: 4px;
    align-items: flex-end;
}

/* Orientasi HORIZONTAL — pojok kanan bawah (di atas copyright Leaflet),
   sama seperti posisi legend di mode 1 window (primary). Sebelumnya
   ditambat ke kiri (left:34px, menyisakan ruang utk strip win-lp) dan
   melebar ke kanan — beda dengan primary window yang selalu di pojok
   kanan bawah. Disamakan: left:auto + right anchor + justify-content
   flex-end, mengikuti pola yang sama dengan orient=v di bawah. */
.split-win-legend-box[data-orient="h"] {
    bottom: 26px;
    right: 8px;
    left: auto;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;       /* tengahkan actions & item secara vertikal */
    justify-content: flex-end;
}
.split-win-legend-box[data-orient="h"] .win-legend-item {
    flex: 0 1 auto;
    min-width: 90px;
    /* Disamakan dengan _WIN_LEGEND_RANGE.h.maxW (320px) di split-window.js —
       sebelumnya 200px sehingga resize landscape pun ikut terbatas. */
    max-width: 320px;
}

/* Orientasi VERTIKAL — di kanan bawah, satu produk, ramping */
.split-win-legend-box[data-orient="v"] {
    bottom: 26px;
    right: 8px;
    left: auto;
    flex-direction: column;
    align-items: flex-end;
    max-height: calc(100% - 60px);
    /* Disamakan dengan max-width .win-legend-item--v (150px) + sedikit ruang
       — sebelumnya 50px sehingga membatasi kartu legend padahal handle
       resize JS mengizinkan tumbuh hingga 150px. */
    max-width: 160px;
    overflow: visible;         /* allow picker menu to escape clipping */
}
.split-win-legend-box[data-orient="v"] .win-legend-item--v {
    flex: 0 0 auto;
}

/* Tombol rotate & picker orientasi */
/* ── Kontainer tombol aksi legend ──────────────────────────────────
 * orient=h (landscape): tombol kolom di kiri legend, di-tengahkan VERTIKAL
 * orient=v (portrait):  tombol baris di atas legend, di-tengahkan HORIZONTAL
 * ------------------------------------------------------------------ */
.win-legend-actions {
    display: flex;
    gap: 2px;
    pointer-events: all;
    flex-shrink: 0;
}

/* ── Landscape wrapper: legend-box flex-row, tombol di kiri ─────── */
/* box orient=h sudah flex-direction:row dari CSS di atas            */
.win-legend-actions--h {
    flex-direction: column;
    justify-content: center;   /* tengah vertikal sejajar item */
    align-self: stretch;       /* ambil tinggi item */
    margin-right: 2px;
}

/* ── Portrait outer wrapper: kolom, tombol di atas legend ──────── */
.win-legend-v-outer {
    display: flex;
    flex-direction: column;
    align-items: center;       /* tengah horizontal: tombol & item sama lebar */
    gap: 2px;
}
.win-legend-actions--v {
    flex-direction: row;
    justify-content: center;   /* tengah horizontal */
    width: 100%;               /* sama lebar dengan item di bawahnya */
}

.win-legend-rotate-btn,
.win-legend-picker-btn {
    pointer-events: all;
    width: 18px; height: 18px;
    border-radius: 3px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text2);
    font-size: 10px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.12s, color 0.12s;
    box-shadow: var(--shadow-sm);
    padding: 0;
    white-space: nowrap;
    overflow: hidden;
}
.win-legend-rotate-btn:hover,
.win-legend-picker-btn:hover { background: var(--surface2); color: var(--accent); }

/* ── Legend product picker dropdown ──────────────────────────────── */

.win-legend-picker-menu {
    pointer-events: all;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 6px;
    box-shadow: var(--shadow-lg);
    z-index: 700;
    overflow: hidden;
    min-width: 130px;
}
/* Landscape: muncul di atas tombol (relative to box) */
.split-win-legend-box .win-legend-picker-menu {
    position: absolute;
    bottom: calc(100% + 4px);
    right: 0;
}
/* Portrait: posisi diset via JS (appended ke win-body) */
.split-win-body > .win-legend-picker-menu {
    position: absolute;
}
.win-legend-picker-menu-item {
    display: flex; align-items: center; gap: 6px;
    padding: 6px 9px;
    font-size: 10px;
    color: var(--text2);
    cursor: pointer;
    transition: background 0.1s;
    white-space: nowrap;
}
.win-legend-picker-menu-item:hover { background: var(--surface2); color: var(--text); }
.win-legend-picker-menu-item.active {
    color: var(--accent);
    background: var(--accent-dim);
}
.win-legend-picker-menu-item .lpm-swatch {
    width: 18px; height: 8px;
    border-radius: 2px;
    border: 1px solid var(--border2);
    flex-shrink: 0;
}

/* Item legend — HORIZONTAL */
.win-legend-item {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 5px 7px;
    box-sizing: border-box;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    /* --cbar-scale: faktor skala font, di-set via JS saat legend ini di-resize. */
}

/* Item legend — VERTIKAL */
.win-legend-item--v {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 5px;
    padding: 3px 3px;
    box-shadow: var(--shadow-sm);
    display: inline-flex;
    flex-direction: row;       /* [unit-vertikal] [labels | bar] */
    align-items: stretch;
    gap: 1px;
    /* Ukuran dasar tetap ramping (~48px) — JS menimpa width/height inline
       saat user menarik handle resize, sehingga lebar bisa tumbuh lebih jauh.
       max-width disamakan dengan _WIN_LEGEND_RANGE.v.maxW (150px) di
       split-window.js — sebelumnya cuma 50px sehingga resize portrait
       "macet" dan kartu jadi tinggi-kurus tak proporsional dibanding landscape. */
    width: 48px;
    max-width: 150px;
    min-width: 0;
    box-sizing: border-box;
    overflow: hidden;
}
/* Pegangan resize — sama gaya dengan legend utama (.map-cbar-resize), pojok kiri-atas. */
.win-legend-resize {
    position: absolute;
    top: 0; left: 0;
    width: 12px; height: 12px;
    cursor: nwse-resize;
    z-index: 2;
    pointer-events: all;
    border-top: 2px solid var(--text3);
    border-left: 2px solid var(--text3);
    border-top-left-radius: 4px;
    opacity: 0.45;
    transition: opacity 0.12s, border-color 0.12s;
}
.win-legend-resize:hover { opacity: 1; border-color: var(--accent); }

/* Wrapper: labels di kiri bar, keduanya vertikal */
.win-legend-v-wrap {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 1px;
    flex: 1;
    min-width: 0;
    overflow: hidden;
}
.win-legend-gradient {
    flex: 1 1 auto;
    width: 100%;
    min-height: 8px;
    border-radius: 3px; margin-bottom: 3px;
    border: 1px solid var(--border2);
    min-width: 60px;
}
.win-legend-gradient--v {
    /* Konfigurasi disamakan PERSIS dengan .map-cbar-bar--v di primary
       window (struktur properti, bukan cuma lebar). Catatan penting:
       base class .win-legend-gradient punya "min-width: 60px" yang
       sebelumnya tidak di-reset di sini — akibatnya lebar bar vertikal
       selalu kepaksa 60px (min-width menang atas width), clamp() di
       bawah ini jadi tidak berefek sama sekali. Sekarang direset persis
       seperti pola reset min-width di map-cbar-bar--v. */
    flex: 0 0 auto;
    width: clamp(8px, 20%, 26px);
    min-width: 8px;
    max-width: 26px;
    min-height: 0;
    max-height: none;
    height: auto;
    align-self: stretch;
    border-radius: 3px;
    border: 1px solid var(--border2);
}
.win-legend-labels {
    display: flex; justify-content: space-between;
    font-family: 'IBM Plex Mono', monospace;
    font-size: clamp(6.5px, calc(7.5px * var(--cbar-scale, 1)), 13px);
    color: var(--text2);
    overflow: hidden;
    min-width: 60px;
}
.win-legend-labels span {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    max-width: 32px;
}
.win-legend-labels--v {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    font-family: 'IBM Plex Mono', monospace;
    font-size: clamp(5.5px, calc(6px * var(--cbar-scale, 1)), 11px);
    color: var(--text2);
    min-height: 60px;
    max-height: none;
    text-align: right;
    line-height: 1;
    flex: 1;
    min-width: 0;
    overflow: hidden;
}
.win-legend-labels--v span { white-space: nowrap; line-height: 1; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.win-legend-unit {
    font-size: clamp(7px, calc(8px * var(--cbar-scale, 1)), 14px);
    color: var(--text);
    margin-top: 2px;
    font-family: 'IBM Plex Mono', monospace;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    max-width: 180px;
}
.win-legend-unit--v {
    font-size: clamp(5px, calc(5.5px * var(--cbar-scale, 1)), 10px);
    color: var(--text);
    font-family: 'IBM Plex Mono', monospace;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-height: 100%;
    width: 7px;            /* lebar kolom unit ramping */
    flex-shrink: 0;
    align-self: center;
    margin: 0;
    text-align: center;
    line-height: 1;
}

/* Compact mode untuk window sangat kecil (<260px) */
.win-legend-item--tiny { padding: 3px 4px; }
.win-legend-item--tiny .win-legend-gradient   { height: 6px; margin-bottom: 2px; min-width: 44px; }
.win-legend-item--tiny .win-legend-gradient--v { width: 5px !important; min-width: 5px !important; max-width: 5px !important; flex: 0 0 5px !important; min-height: 60px; }
.win-legend-item--tiny .win-legend-labels     { font-size: 6px; min-width: 44px; }
.win-legend-item--tiny .win-legend-labels--v  { font-size: 5.5px; min-height: 60px; max-height: 100px; }
.win-legend-item--tiny .win-legend-unit       { font-size: 7px; }
.win-legend-item--tiny .win-legend-unit--v    { font-size: 5.5px; max-height: 80px; }

/* ── Per-window Timeline (YouTube-style) ─────────────────────────── */
/*
 * .win-tl is a flex child of .split-win, sitting after .split-win-body.
 * It has a fixed scrubber row always visible and a controls row that
 * expands on hover. Position is NOT absolute so it's not clipped.
 */
.win-tl {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    background: var(--surface2);
    border-top: 1px solid var(--border);
    position: relative;
    z-index: 5;
}

/* Always-visible scrubber row */
.win-tl-scrubber {
    padding: 6px 10px 4px;
}
.win-tl-track {
    height: 4px;
    background: var(--border);
    border-radius: 2px;
    position: relative;
    cursor: pointer;
    transition: height 0.15s;
}
.win-tl:hover .win-tl-track { height: 6px; }
.win-tl-fill {
    position: absolute; left:0; top:0; bottom:0;
    background: var(--accent); border-radius: 2px;
    pointer-events: none;
    /* PATCH: gunakan scaleX transform + CSS variable --tl-progress, bukan width.
       width memicu layout (reflow), transform tidak. */
    width: 100%;
    transform-origin: left center;
    transform: scaleX(var(--tl-progress, 0.6));
    will-change: transform;
}
.win-tl-thumb {
    position: absolute; top: 50%;
    /* FIX: gunakan left + CSS variable --tl-thumb-x, lalu translateX(-50%) agar
       thumb ter-center di posisi tsb.
       Sebelumnya: left:0 + translate(calc(--tl-thumb-x - 50%), -50%)
       Bug: di dalam translate(), % mengacu pada LEBAR ELEMEN SENDIRI (10px),
       bukan lebar parent/track — sehingga pada step=100% thumb hanya bergeser
       ~5px dari kiri, bukan ke ujung kanan.
       Sekarang: left di-set ke --tl-thumb-x (% mengacu pada parent = track),
       lalu translateX(-50%) menggeser center thumb ke titik itu. */
    left: var(--tl-thumb-x, 60%);
    transform: translateX(-50%) translateY(-50%);
    width: 10px; height: 10px; border-radius: 50%;
    background: var(--accent); border: 2px solid var(--surface);
    box-shadow: 0 1px 4px rgba(0,0,0,0.3);
    pointer-events: none;
    opacity: 0; transition: opacity 0.15s;
    will-change: transform;
}
.win-tl:hover .win-tl-thumb,
.win-tl--expanded .win-tl-thumb { opacity: 1; }

/* Controls — collapse to 0 height, expand on hover */
.win-tl-controls {
    display: flex; align-items: center; gap: 4px;
    padding: 0 8px;
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: max-height 0.2s ease, opacity 0.18s ease, padding 0.2s ease;
}
.win-tl:hover .win-tl-controls,
.win-tl--expanded .win-tl-controls {
    max-height: 34px;
    opacity: 1;
    padding: 4px 8px 5px;
}

.wt-btn {
    width: 22px; height: 22px; border-radius: 4px;
    border: 1px solid var(--border);
    background: var(--surface); color: var(--text2);
    font-size: 9px; display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: all 0.12s; flex-shrink: 0;
}
.wt-btn:hover  { background: var(--accent-dim); color: var(--accent); border-color: var(--accent); }
.wt-btn.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.wt-play-btn   { width: 24px; height: 24px; border-radius: 50%; font-size: 10px; }
.wt-time {
    font-family: 'IBM Plex Mono', monospace; font-size: 10px;
    color: var(--accent); white-space: nowrap; flex: 1; text-align: center;
    font-weight: 600;
}
body.split-active .wt-time { display: none; }
.wt-speed {
    font-size: 10px; background: var(--surface);
    border: 1px solid var(--border); color: var(--text2);
    border-radius: 3px; padding: 2px 4px; cursor: pointer;
    font-family: 'IBM Plex Mono', monospace; flex-shrink: 0;
}
.wt-sync-btn { font-size: 12px; }
.wt-sync-btn.wt-sync--on {
    background: rgba(34,197,94,0.15); border-color: #22c55e; color: #22c55e;
}
.wt-mapsync-btn { font-size: 11px; }
.wt-mapsync-btn.wt-mapsync--on {
    background: rgba(99,102,241,0.15); border-color: #6366f1; color: #6366f1;
}

/* ── Layer Ghost ─────────────────────────────────────────────────── */
.split-layer-ghost {
    position: fixed; padding: 5px 12px;
    background: var(--accent); color: #fff;
    font-size: 11px; font-weight: 600; border-radius: 20px;
    pointer-events: none; z-index: 9999;
    transform: translate(-50%, -50%); white-space: nowrap;
    box-shadow: 0 4px 14px rgba(0,0,0,0.25);
}

/* ── Arrange Panel ───────────────────────────────────────────────── */
.split-arrange-panel {
    position: absolute; top: 44px; right: 10px; width: 252px;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 8px; box-shadow: var(--shadow-lg); z-index: 950; overflow: hidden;
}
.split-arrange-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 9px 12px; font-size: 12px; font-weight: 600;
    border-bottom: 1px solid var(--border); background: var(--surface2);
}
.split-arrange-close { background:none; border:none; color:var(--text3); font-size:13px; cursor:pointer; padding:2px 6px; border-radius:4px; }
.split-arrange-close:hover { background: var(--border); color: var(--text); }
.split-arrange-body  { padding: 10px 12px; display: flex; flex-direction: column; gap: 7px; }
.split-arrange-hint  { font-size: 11px; color: var(--text3); }
.split-arrange-grid  { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.split-arrange-preset {
    padding: 7px 8px; font-size: 11px; border: 1px solid var(--border);
    border-radius: 5px; background: var(--surface2); color: var(--text2);
    cursor: pointer; text-align: left; transition: all 0.12s;
}
.split-arrange-preset:hover   { background: var(--accent-dim); color: var(--accent); border-color: var(--accent); }
.split-arrange-preset.current { background: var(--accent); color: #fff; border-color: var(--accent); }
.split-arrange-nums { display: flex; gap: 4px; flex-wrap: wrap; }
.split-arrange-num-btn {
    padding: 4px 9px; font-size: 11px;
    border: 1px solid var(--border); border-radius: 4px;
    background: var(--surface2); color: var(--text2); cursor: pointer; transition: all 0.12s;
}
.split-arrange-num-btn:hover { background: var(--accent); color: #fff; }

/* ── Layer panel split-action buttons ────────────────────────────── */
.lp-split-actions { display:flex; align-items:center; gap:2px; opacity:0; transition:opacity 0.15s; flex-shrink:0; margin-left:2px; }
.lp-item:hover .lp-split-actions { opacity: 1; }
.lp-split-btn {
    width:20px; height:20px; border-radius:4px;
    border: 1px solid var(--border); background: var(--surface2);
    color: var(--text2); font-size: 12px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: all 0.12s; line-height:1;
}
.lp-split-overlay:hover { background:var(--accent-dim); color:var(--accent); border-color:var(--accent); }
.lp-split-newwin:hover  { background:var(--green-bg); color:var(--green); border-color:var(--green); }
.lp-drag-to-win {
    width:20px; height:20px; display:flex; align-items:center; justify-content:center;
    font-size:14px; color:var(--text3); cursor:grab;
    border-radius:4px; border:1px solid transparent; transition:all 0.12s; user-select:none;
}
.lp-drag-to-win:hover  { background:var(--amber-bg); color:var(--amber); border-color:var(--amber); }
.lp-drag-to-win:active { cursor: grabbing; }

/* ── Split-active badge on layer item ────────────────────────────── */
.lp-from-split .lp-toggle-btn { opacity: 0.6; }
.lp-split-badge { font-size: 10px; margin-left: 4px; opacity: 0.7; }

/* ── Statusbar inside split window ──────────────────────────────── */
#statusbar {
    position: absolute; bottom: 0; left: 0; right: 0;
    z-index: 50; top: auto !important;
}

/* ── Header split buttons ────────────────────────────────────────── */
.split-btns { display: flex; gap: 4px; }
.split-header-btn {
    display: flex; align-items: center; gap: 4px;
    padding: 4px 10px; font-size: 11px; border-radius: 5px;
    border: 1px solid var(--border); background: var(--surface2);
    color: var(--text2); cursor: pointer; transition: all 0.15s;
}
.split-header-btn:hover       { background: var(--accent-dim); color: var(--accent); border-color: var(--accent); }
.split-header-btn.split-active{ background: var(--accent); color: #fff; border-color: var(--accent); }

/* ══════════════════════════════════════════════════════════════════════════════
   DATA INFO DROPDOWN
   ══════════════════════════════════════════════════════════════════════════════ */

.data-info-wrap {
    position: relative;
}

.data-info-btn.active {
    background: var(--accent-dim);
    color: var(--accent);
    border-color: var(--accent);
}

.data-info-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    width: 280px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.22);
    z-index: 9998;
    overflow: hidden;
    font-size: 11.5px;
    color: var(--text);
    animation: dimFadeIn 0.12s ease;
    max-height: calc(100vh - 80px);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
}
.data-info-menu::-webkit-scrollbar { width: 3px; }
.data-info-menu::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 2px; }

@keyframes dimFadeIn {
    from { opacity:0; transform: translateY(-4px); }
    to   { opacity:1; transform: translateY(0); }
}

.data-info-menu.hidden { display: none; }

.dim-section {
    padding: 10px 12px 9px;
}

.dim-section-title {
    display: flex; align-items: center; gap: 5px;
    font-size: 10px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.07em; color: var(--text3);
    margin-bottom: 8px;
    padding-bottom: 5px;
    border-bottom: 1px solid var(--border);
}

.dim-latest-rows {
    display: flex; flex-direction: column; gap: 4px;
}

.dim-latest-row {
    display: flex; align-items: center; gap: 7px;
    padding: 6px 9px; border-radius: 6px;
    background: var(--surface2);
    border: 1px solid transparent;
    min-height: 30px;
    transition: border-color 0.2s;
}

.dim-cat-icon {
    font-size: 13px; flex-shrink: 0; width: 18px; text-align: center;
}

.dim-cat-name {
    font-size: 11px; font-weight: 600; color: var(--text2);
    white-space: nowrap; flex: 0 0 52px;
}

.dim-cat-time {
    font-size: 10.5px; font-family: monospace;
    color: var(--accent); white-space: nowrap;
    margin-left: auto;
}

.dim-cat-time.dim-stale { color: var(--text3); }

/* Legacy classes — dipertahankan untuk cache section */
.dim-product-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: 3px 6px; border-radius: 4px;
    background: var(--surface2);
}

.dim-product-name {
    font-size: 11px; color: var(--text2);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    max-width: 120px;
}

.dim-product-time {
    font-size: 10.5px; font-family: monospace;
    color: var(--accent); white-space: nowrap;
}

.dim-product-time.dim-stale { color: var(--text3); }

.dim-loading {
    font-size: 10.5px; color: var(--text3); padding: 2px 6px;
}

.dim-no-data {
    font-size: 10.5px; color: var(--text3); font-style: italic; padding: 2px 6px;
}

.dim-divider {
    height: 1px; background: var(--border); margin: 0 12px;
}

/* Cache section */
.dim-cache-summary {
    font-size: 10.5px; color: var(--text2);
    padding: 2px 6px 6px;
    display: flex; gap: 12px;
}

.dim-cache-stat { color: var(--text3); }
.dim-cache-stat span { color: var(--text); font-weight: 600; }

.dim-cache-list {
    display: flex; flex-direction: column; gap: 2px;
    max-height: 140px; overflow-y: auto;
}

.dim-cache-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: 3px 6px; border-radius: 4px;
    background: var(--surface2);
    gap: 6px;
}

.dim-cache-prod {
    font-size: 10.5px; color: var(--text2);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    flex: 1;
}

.dim-cache-frames {
    font-size: 10.5px; font-family: monospace;
    color: var(--text3); white-space: nowrap;
}

.dim-cache-bar-wrap {
    width: 40px; height: 4px;
    background: var(--surface3, var(--border));
    border-radius: 2px; overflow: hidden;
}

.dim-cache-bar {
    height: 100%; border-radius: 2px;
    background: var(--accent);
    transition: width 0.3s;
}

.dim-cache-reload {
    flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
    width: 20px; height: 20px; padding: 0; border: none; border-radius: 4px;
    background: transparent; color: var(--text3); cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.dim-cache-reload:hover { background: var(--surface3, var(--border)); color: var(--accent); }
.dim-cache-reload:disabled { cursor: default; opacity: 0.6; }
.dim-cache-reload.spinning svg { animation: dim-cache-spin 0.8s linear infinite; }
@keyframes dim-cache-spin { to { transform: rotate(360deg); } }

.dim-cache-badge {
    font-size: 9.5px; padding: 1px 5px; border-radius: 3px;
    font-weight: 600;
}

.dim-cache-badge.active {
    background: rgba(99,180,99,0.18); color: #5cba5c;
}

.dim-cache-badge.inactive {
    background: var(--surface3, var(--border)); color: var(--text3);
}

.dim-empty { font-size: 10.5px; color: var(--text3); padding: 4px 6px; font-style: italic; }

.dim-cache-actions {
    display: flex; justify-content: flex-end;
    padding: 6px 6px 2px;
    gap: 6px;
}

.dim-action-btn {
    font-size: 10.5px; padding: 3px 10px; border-radius: 4px;
    border: 1px solid var(--border); background: var(--surface2);
    color: var(--text2); cursor: pointer; transition: all 0.12s;
}

.dim-action-btn:hover {
    background: var(--accent-dim); color: var(--accent); border-color: var(--accent);
}


/* ══════════════════════════════════════════════════════════════════════════════
   PROCESSING MONITOR — Ringkasan di menu Info + Modal detail
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── CSS custom props pemrosesan ─────────────────────────────────────── */
:root {
    --pm-green     : #22c55e;
    --pm-red       : #ef4444;
    --pm-amber     : #f59e0b;
    --pm-blue      : var(--accent);
    --pm-bar-bg    : var(--surface3, var(--border));
    --pm-card-bg   : var(--surface2);
    --pm-card-bdr  : var(--border);
    --pm-row-enter-dur : 0.22s;
    --pm-fade-dur  : 0.55s;
}

/* ── Section processing di dalam menu Info ───────────────────────────── */
.dim-section-processing .dim-section-title {
    position: relative;
}

.pm-active-badge {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 14px; height: 14px; padding: 0 3px;
    border-radius: 7px;
    background: var(--accent); color: #fff;
    font-size: 9px; font-weight: 700; line-height: 1;
    margin-left: auto;
    transition: opacity 0.2s, transform 0.2s;
}
.pm-active-badge.hidden { opacity: 0; pointer-events: none; transform: scale(0.7); }

/* ── Ringkasan scrollable ─────────────────────────────────────────────── */
.pm-summary {
    display: flex; flex-direction: column; gap: 3px;
    max-height: 160px;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
    padding-right: 2px;
}
.pm-summary::-webkit-scrollbar { width: 3px; }
.pm-summary::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 2px; }

.pm-empty {
    font-size: 10.5px; color: var(--text3);
    font-style: italic; padding: 4px 6px;
    transition: opacity 0.2s;
}

/* ── Label grup (Satelit / Radar) ────────────────────────────────────── */
.pm-group-label {
    display: flex; align-items: center; gap: 4px;
    font-size: 9.5px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.07em; color: var(--text3);
    padding: 3px 4px 2px;
    margin-top: 3px;
}
.pm-group-label:first-child { margin-top: 0; }
.pm-group-icon { font-size: 11px; }

.pm-group-sep {
    height: 1px; background: var(--border);
    margin: 4px 0;
}

/* ── Baris ringkasan proses ──────────────────────────────────────────── */
@keyframes pmRowEnter {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.pm-row {
    display: flex; align-items: flex-start; gap: 5px;
    padding: 5px 7px; border-radius: 6px;
    background: var(--pm-card-bg);
    transition: opacity var(--pm-fade-dur) ease, background 0.25s ease;
    animation: pmRowEnter var(--pm-row-enter-dur) ease-out;
}
.pm-row-running {
    background: var(--accent-soft);
}
.pm-row-done {
    background: rgba(34, 197, 94, 0.06);
}
.pm-row-error {
    background: rgba(239, 68, 68, 0.06);
}
.pm-row-waiting {
    background: rgba(148, 163, 184, 0.05);  /* abu-abu lembut — menunggu data FTP */
}
.pm-row-fade {
    opacity: 0;
    pointer-events: none;
    transform: translateY(2px);
    transition: opacity var(--pm-fade-dur) ease, transform var(--pm-fade-dur) ease;
}
.pm-row-enter {
    animation: pmRowEnter var(--pm-row-enter-dur) ease-out;
}

.pm-dot {
    font-size: 8px; flex-shrink: 0;
    margin-top: 3px; line-height: 1;
    transition: color 0.3s ease;
}
.pm-row-running .pm-dot {
    will-change: opacity;
    animation: pmPulse 1.4s ease-in-out infinite;
}
@keyframes pmPulse {
    0%,100% { opacity: 1; }
    50%      { opacity: 0.3; }
}

.pm-row-body   { flex: 1; min-width: 0; }
.pm-row-top    { display: flex; align-items: center; gap: 4px; margin-bottom: 3px; flex-wrap: wrap; }

.pm-row-key {
    font-size: 10px; font-weight: 600; color: var(--text2);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    flex: 1; min-width: 0;
    display: flex; align-items: center; gap: 3px;
    transition: color 0.25s;
}
/* Warna key berdasarkan status */
.pm-row-done    .pm-row-key { color: var(--pm-green); }
.pm-row-error   .pm-row-key { color: var(--pm-red); }
.pm-row-running .pm-row-key { color: var(--text2); }
.pm-row-waiting .pm-row-key { color: var(--text3); }

.pm-row-band {
    font-size: 8.5px; font-weight: 700;
    background: rgba(99, 165, 250, 0.12);
    color: var(--accent);
    border: 1px solid rgba(99, 165, 250, 0.2);
    border-radius: 3px; padding: 0 3px;
    white-space: nowrap; flex-shrink: 0;
    font-family: monospace;
    transition: background 0.25s, color 0.25s;
}
.pm-row-done  .pm-row-band  { background: rgba(34,197,94,0.1); color: var(--pm-green); border-color: rgba(34,197,94,0.2); }
.pm-row-error .pm-row-band  { background: rgba(239,68,68,0.1); color: var(--pm-red);   border-color: rgba(239,68,68,0.2); }

.pm-row-stage {
    font-size: 9.5px; color: var(--text3);
    white-space: nowrap; flex-shrink: 0;
    transition: color 0.25s;
}
.pm-row-done    .pm-row-stage { color: var(--pm-green); }
.pm-row-error   .pm-row-stage { color: var(--pm-red); }
.pm-row-waiting .pm-row-stage { color: var(--text3); }

.pm-row-elapsed {
    font-size: 9px; color: var(--text3);
    font-family: monospace; flex-shrink: 0;
    white-space: nowrap;
}

.pm-progress-wrap {
    height: 3px; border-radius: 2px;
    background: var(--pm-bar-bg);
    overflow: hidden;
}
.pm-progress-bar {
    height: 100%; border-radius: 2px;
    transition: width 0.5s cubic-bezier(0.4,0,0.2,1), background 0.3s ease;
    will-change: width;
}

/* ── Tombol Detail ───────────────────────────────────────────────────── */
.pm-actions {
    display: flex; justify-content: flex-end;
    padding: 5px 0 2px;
}
.pm-detail-btn {
    display: flex; align-items: center; gap: 4px;
    font-size: 10.5px;
}

/* ══════════════════════════════════════════════════════════════════════════
   MODAL DETAIL
   ══════════════════════════════════════════════════════════════════════════ */

.pm-modal-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.48);
    z-index: 19999;
    display: flex; align-items: center; justify-content: center;
    padding: 16px;
    animation: pmOverlayIn 0.18s ease;
}
.pm-modal-overlay.hidden { display: none; }

@keyframes pmOverlayIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.pm-modal-box {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.35);
    width: 100%;
    max-width: 560px;
    max-height: 80vh;
    display: flex; flex-direction: column;
    animation: pmBoxIn 0.2s cubic-bezier(0.34,1.4,0.64,1);
}

@keyframes pmBoxIn {
    from { opacity: 0; transform: scale(0.93) translateY(10px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}

.pm-modal-header {
    display: flex; align-items: center;
    padding: 12px 14px 10px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
    gap: 8px;
}

.pm-modal-title {
    display: flex; align-items: center; gap: 6px;
    font-size: 12px; font-weight: 700;
    color: var(--text); flex: 1;
}

.pm-modal-close {
    width: 22px; height: 22px;
    border: none; border-radius: 5px;
    background: transparent; color: var(--text3);
    cursor: pointer; font-size: 12px; line-height: 1;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.12s;
    flex-shrink: 0;
}
.pm-modal-close:hover {
    background: var(--surface2); color: var(--text);
}

/* ── Body scrollable ─────────────────────────────────────────────────── */
.pm-modal-body {
    flex: 1; overflow-y: auto; overflow-x: hidden;
    padding: 12px 14px;
    display: flex; flex-direction: column; gap: 14px;
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
}
.pm-modal-body::-webkit-scrollbar { width: 4px; }
.pm-modal-body::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 2px; }

.pm-modal-empty {
    display: flex; flex-direction: column; align-items: center;
    gap: 10px; padding: 32px 0;
    color: var(--text3); font-size: 11.5px;
}

/* ── Group header ────────────────────────────────────────────────────── */
.pm-modal-group { display: flex; flex-direction: column; gap: 8px; }

.pm-modal-group-header {
    display: flex; align-items: center; gap: 6px;
    font-size: 10px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.07em;
    color: var(--text3);
    padding-bottom: 4px;
    border-bottom: 1px solid var(--border);
}
.pm-modal-group-icon { font-size: 13px; }
.pm-modal-group-count {
    margin-left: auto;
    background: var(--surface2); border: 1px solid var(--border);
    border-radius: 8px; padding: 0 5px;
    font-size: 9px; font-weight: 700;
    color: var(--text2);
}

/* ── Kartu detail proses ─────────────────────────────────────────────── */
@keyframes pmCardEnter {
    from { opacity: 0; transform: translateY(-5px); }
    to   { opacity: 1; transform: translateY(0); }
}

.pm-card {
    border: 1px solid var(--pm-card-bdr);
    border-radius: 8px;
    background: var(--pm-card-bg);
    overflow: hidden;
    transition: opacity var(--pm-fade-dur) ease, border-color 0.3s ease, box-shadow 0.3s ease;
    animation: pmCardEnter 0.2s ease-out;
}
/* Border warna berdasarkan status */
.pm-card:has(.pm-badge-running) {
    border-color: rgba(96,165,250,0.25);
    box-shadow: 0 0 0 1px rgba(96,165,250,0.08) inset;
}
.pm-card:has(.pm-badge-done) {
    border-color: rgba(34,197,94,0.3);
    box-shadow: 0 0 0 1px rgba(34,197,94,0.06) inset;
}
.pm-card:has(.pm-badge-error) {
    border-color: rgba(239,68,68,0.3);
    box-shadow: 0 0 0 1px rgba(239,68,68,0.06) inset;
}
.pm-card:has(.pm-badge-waiting) {
    border-color: rgba(148,163,184,0.2);
    box-shadow: 0 0 0 1px rgba(148,163,184,0.04) inset;
}

.pm-card-fade  { opacity: 0; pointer-events: none; transform: translateY(3px); transition: opacity var(--pm-fade-dur) ease, transform var(--pm-fade-dur) ease; }
.pm-card-enter { animation: pmCardEnter 0.2s ease-out; }

.pm-card-header {
    padding: 10px 12px 7px;
    border-bottom: 1px solid var(--pm-card-bdr);
}

.pm-card-title {
    display: flex; align-items: center; gap: 6px;
    margin-bottom: 5px;
}
.pm-card-key {
    font-size: 11px; font-weight: 700; color: var(--text);
    word-break: break-all; flex: 1;
}

/* ── Status badge ────────────────────────────────────────────────────── */
.pm-badge {
    display: inline-flex; align-items: center;
    padding: 2px 7px; border-radius: 4px;
    font-size: 9px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.05em;
    flex-shrink: 0; white-space: nowrap;
    transition: background 0.3s, color 0.3s;
}
.pm-badge-running {
    will-change: opacity, transform;
    background: rgba(96,165,250,0.15); color: var(--accent);
    animation: pmBadgePulse 1.8s ease-in-out infinite;
}
.pm-badge-done {
    background: rgba(34,197,94,0.14); color: var(--pm-green);
}
.pm-badge-error {
    background: rgba(239,68,68,0.14); color: var(--pm-red);
}
.pm-badge-waiting {
    background: rgba(148,163,184,0.14); color: var(--text3);
    animation: pmBadgePulse 2.4s ease-in-out infinite;  /* lebih lambat dari running */
}
@keyframes pmBadgePulse {
    0%,100% { opacity: 1; }
    50%      { opacity: 0.5; }
}

.pm-card-meta {
    display: flex; align-items: center; gap: 6px;
    flex-wrap: wrap;
}
.pm-card-stage-cur {
    font-size: 10.5px; font-weight: 600; color: var(--text2);
    display: flex; align-items: center; gap: 4px;
    transition: color 0.25s;
}
.pm-card-step {
    font-size: 9.5px; color: var(--text3);
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 3px; padding: 0 4px;
}
.pm-card-elapsed {
    font-size: 10px; color: var(--text3);
    font-family: monospace; margin-left: auto;
    white-space: nowrap;
}

/* ── Progress bar kartu ──────────────────────────────────────────────── */
.pm-card-progress {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--pm-card-bdr);
}
.pm-card-bar-wrap {
    flex: 1; height: 6px; border-radius: 4px;
    background: var(--pm-bar-bg); overflow: hidden;
}
.pm-card-bar {
    height: 100%; border-radius: 4px;
    transition: width 0.6s cubic-bezier(0.4,0,0.2,1), background 0.3s ease;
    position: relative;
    will-change: width;
}
.pm-bar-animated {
    will-change: background-position;
    background-image: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255,255,255,0.22) 50%,
        transparent 100%
    );
    background-size: 200% 100%;
    animation: pmShimmer 1.8s linear infinite;
}
@keyframes pmShimmer {
    from { background-position: -200% 0; }
    to   { background-position:  200% 0; }
}
.pm-card-pct {
    font-size: 10px; font-weight: 700;
    font-family: monospace; color: var(--text2);
    white-space: nowrap; flex-shrink: 0; min-width: 30px;
    text-align: right;
    transition: color 0.3s;
}

/* ── Steps bar ───────────────────────────────────────────────────────── */
.pm-steps-bar {
    display: flex; align-items: flex-start;
    gap: 0; padding: 9px 12px 7px;
    overflow-x: auto;
    scrollbar-width: none;
    border-bottom: 1px solid var(--pm-card-bdr);
}
.pm-steps-bar::-webkit-scrollbar { display: none; }

.pm-step-item {
    display: flex; flex-direction: column; align-items: center;
    flex: 1; min-width: 30px; gap: 3px;
    position: relative;
    transition: opacity 0.25s;
}
/* Connector line antara dot */
.pm-step-item:not(:last-child)::after {
    content: '';
    position: absolute; top: 4px; left: 50%;
    width: 100%; height: 2px;
    background: var(--pm-bar-bg);
    z-index: 0;
    transition: background 0.35s ease;
}
.pm-step-item:not(:last-child).pm-step-done-connector::after {
    background: var(--pm-green);
}

.pm-step-dot {
    width: 9px; height: 9px; border-radius: 50%;
    background: var(--pm-bar-bg);
    border: 1.5px solid var(--border);
    z-index: 1; flex-shrink: 0;
    transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.pm-step-done  .pm-step-dot { background: var(--pm-green); border-color: var(--pm-green); }
.pm-step-active .pm-step-dot {
    will-change: opacity, transform;
    background: var(--accent); border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
    animation: pmStepPulse 1.3s ease-in-out infinite;
}
.pm-step-error .pm-step-dot { background: var(--pm-red); border-color: var(--pm-red); }
@keyframes pmStepPulse {
    0%,100% { box-shadow: 0 0 0 2px var(--accent-soft); }
    50%      { box-shadow: 0 0 0 5px var(--accent-soft); }
}

.pm-step-lbl {
    font-size: 10px; font-weight: 500;
    color: var(--text3);
    text-align: center; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis;
    max-width: 42px; line-height: 1.2;
    letter-spacing: 0.02em;
    transition: color 0.3s ease, font-weight 0.2s;
}
.pm-step-active .pm-step-lbl { color: var(--accent); font-weight: 600; letter-spacing: 0.03em; }
.pm-step-done   .pm-step-lbl { color: var(--pm-green); }
.pm-step-error  .pm-step-lbl { color: var(--pm-red); }

/* ── Detail rows ─────────────────────────────────────────────────────── */
.pm-card-details {
    display: grid; grid-template-columns: auto 1fr;
    gap: 2px 10px;
    padding: 8px 12px 7px;
    border-bottom: 1px solid var(--pm-card-bdr);
}
.pm-detail-row { display: contents; }
.pm-detail-label {
    font-size: 10px; color: var(--text3);
    white-space: nowrap; padding: 1.5px 0;
}
.pm-detail-value {
    font-size: 10px; color: var(--text2); font-family: monospace;
    word-break: break-all; padding: 1.5px 0;
}

/* ── Pesan saat ini ──────────────────────────────────────────────────── */
.pm-card-msg {
    font-size: 10px; color: var(--text3);
    padding: 6px 12px 7px;
    font-style: italic;
    border-bottom: 1px solid var(--pm-card-bdr);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    transition: opacity 0.3s;
}
.pm-card-msg:empty { display: none; }

/* ── History log ─────────────────────────────────────────────────────── */
.pm-card-hist-wrap {
    padding: 7px 12px 9px;
}
.pm-card-hist-title {
    font-size: 9.5px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--text3); margin-bottom: 5px;
}
.pm-card-hist {
    display: flex; flex-direction: column; gap: 1px;
}
.pm-hist-row {
    display: grid; grid-template-columns: 52px 74px 1fr;
    gap: 4px; align-items: baseline;
    padding: 2px 0;
    border-bottom: 1px solid var(--border);
    transition: opacity 0.2s;
}
.pm-hist-row:last-child { border-bottom: none; }
.pm-hist-time {
    font-size: 9px; color: var(--text3);
    font-family: monospace; white-space: nowrap;
}
.pm-hist-stage {
    font-size: 9.5px; font-weight: 600;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pm-hist-msg {
    font-size: 9.5px; color: var(--text3);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ══════════════════════════════════════════════════════════════════════════
   INFO MENU — Perapian tampilan keseluruhan
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Responsive ──────────────────────────────────────────────────────── */
@media (max-width: 639px) {
    .pm-modal-box { max-height: 90vh; border-radius: 8px; }
    .pm-hist-row  { grid-template-columns: 48px 64px 1fr; }
    .pm-card-details { font-size: 9.5px; }
}
@media (max-width: 479px) {
    .pm-modal-box  { max-width: 100%; margin: 0; border-radius: 8px 8px 0 0; align-self: flex-end; }
    .pm-modal-overlay { align-items: flex-end; padding: 0; }
    .pm-modal-body { max-height: 70vh; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   PRESET MANAGER
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── Tombol header ── */
.preset-header-btn {
    background: var(--surface2);
    color: var(--text2);
    border-color: var(--border);
    margin-left: 4px;
}
.preset-header-btn:hover {
    background: var(--accent-dim, rgba(99,102,241,0.12));
    color: var(--accent);
    border-color: var(--accent);
}

/* ── Panel ── */
.preset-panel {
    position: absolute;
    top: 50px;
    right: 14px;
    width: 380px;
    max-height: calc(100vh - 260px);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.25);
    display: flex;
    flex-direction: column;
    z-index: 9999;
    overflow: hidden;
    font-size: 12px;
}
.preset-panel.hidden { display: none !important; }

/* ── Header ── */
.preset-panel-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 14px 8px;
    border-bottom: 1px solid var(--border);
    background: var(--surface2);
    flex-shrink: 0;
}
.preset-panel-title {
    font-size: 13px; font-weight: 600; color: var(--text1);
}
.preset-panel-close {
    background: none; border: none; color: var(--text3);
    cursor: pointer; font-size: 14px; padding: 2px 5px;
    border-radius: 4px; line-height: 1;
}
.preset-panel-close:hover { background: var(--red-bg, rgba(239,68,68,0.12)); color: var(--red, #ef4444); }

/* ── Simpan area ── */
.preset-save-area {
    display: flex; flex-direction: column; gap: 6px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
    background: var(--surface2);
    flex-shrink: 0;
}
.preset-name-input,
.preset-desc-input {
    padding: 6px 10px; border: 1px solid var(--border);
    border-radius: 6px; background: var(--surface);
    color: var(--text1); font-size: 12px; outline: none;
    transition: border-color 0.15s;
}
.preset-name-input:focus, .preset-desc-input:focus {
    border-color: var(--accent);
}
.preset-save-btn {
    padding: 6px 12px; border-radius: 6px;
    background: var(--accent); color: #fff; border: none;
    font-size: 12px; font-weight: 600; cursor: pointer;
    transition: opacity 0.15s;
}
.preset-save-btn:hover { opacity: 0.88; }

/* ── List header ── */
.preset-list-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 6px 12px 4px;
    font-size: 11px; color: var(--text3);
    font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase;
    flex-shrink: 0;
}
.preset-count {
    background: var(--accent-dim, rgba(99,102,241,0.15));
    color: var(--accent); border-radius: 10px;
    padding: 1px 7px; font-size: 11px; font-weight: 700;
}

/* ── Lista ── */
.preset-list {
    flex: 1; overflow-y: auto; padding: 4px 8px 8px;
}
.preset-empty {
    color: var(--text3); text-align: center; padding: 20px 0;
    font-size: 12px;
}
.preset-item {
    display: flex; flex-direction: column; gap: 4px;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 8px; margin-bottom: 6px;
    background: var(--surface2);
    transition: border-color 0.12s, background 0.12s;
}
.preset-item:hover {
    border-color: var(--accent);
    background: var(--accent-dim, rgba(99,102,241,0.07));
}
.preset-item-main {
    display: flex; align-items: flex-start; gap: 8px;
}
.preset-item-icon {
    font-size: 16px; line-height: 1; flex-shrink: 0; margin-top: 1px;
}
.preset-item-info {
    display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0;
}
.preset-item-name {
    font-size: 12px; font-weight: 600; color: var(--text1);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    cursor: default; outline: none; border-radius: 3px;
    padding: 0 2px;
}
.preset-item-name[contenteditable="true"] {
    cursor: text;
    border: 1px solid var(--accent);
    background: var(--surface);
    white-space: normal; overflow: visible;
}
.preset-item-meta {
    font-size: 10px; color: var(--text3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.preset-item-desc {
    font-size: 11px; color: var(--text2); font-style: italic;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.preset-item-actions {
    display: flex; gap: 5px; justify-content: flex-end; flex-shrink: 0;
}
.preset-apply-btn,
.preset-rename-btn,
.preset-delete-btn {
    padding: 3px 9px; border-radius: 5px; border: 1px solid var(--border);
    font-size: 11px; cursor: pointer; background: var(--surface); color: var(--text2);
    transition: all 0.12s;
}
.preset-apply-btn  { background: var(--accent); color: #fff; border-color: var(--accent); font-weight: 600; }
.preset-apply-btn:hover  { opacity: 0.85; }
.preset-rename-btn:hover { background: var(--accent-dim); color: var(--accent); border-color: var(--accent); }
.preset-delete-btn:hover { background: var(--red-bg, rgba(239,68,68,0.12)); color: var(--red, #ef4444); border-color: var(--red, #ef4444); }

/* ── Footer ── */
.preset-panel-footer {
    display: flex; gap: 8px; padding: 8px 12px;
    border-top: 1px solid var(--border);
    background: var(--surface2);
    flex-shrink: 0;
}
.preset-export-btn,
.preset-import-btn {
    flex: 1; padding: 5px 10px; border-radius: 6px;
    border: 1px solid var(--border); background: var(--surface);
    color: var(--text2); font-size: 11px; cursor: pointer;
    text-align: center; transition: all 0.12s; display: flex;
    align-items: center; justify-content: center; gap: 4px;
}
.preset-export-btn:hover,
.preset-import-btn:hover {
    background: var(--accent-dim); color: var(--accent); border-color: var(--accent);
}

/* ── Responsive: panel lebih kecil di layar sempit ── */
@media (max-width: 480px) {
    /* Preset: inherits position:fixed dari 639px, hanya sesuaikan margin */
    .preset-panel { left: 8px; right: 8px; width: auto; }
}


/* ============================================================
 * PATCH v14 PERFORMANCE — Compositing yang lebih hemat
 * ============================================================ */

/* Split window: gunakan contain + backface saja, tanpa will-change permanen.
   will-change: transform permanen di semua split-win membuat Chrome membuat
   GPU layer terpisah untuk setiap window secara permanen, bahkan saat idle.
   Dengan contain saja, Chrome tetap bisa mengoptimalkan paint secara lokal
   tanpa overhead GPU layer yang tidak perlu. */
.split-win {
    contain: layout paint style;
    backface-visibility: hidden;
}

/* Saat sedang di-drag atau di-resize, hint browser untuk compositing.
   Class ini ditambah saat pointerdown dan dihapus saat pointerup —
   bukan permanen seperti --active (focus) yang tetap aktif saat window diam.
   CATATAN: left/top/width/height tidak compositable — will-change: transform
   lebih efektif untuk drag, tapi karena kita masih set left/top via style,
   kita cukup gunakan backface-visibility sebagai compositing hint ringan.
   will-change akan ditambahkan JS saat drag aktif. */
.split-win.is-dragging,
.split-win.is-resizing {
    will-change: transform;
}

/* Map body dalam split window — isolated paint */
.split-win-body {
    contain: strict;
}

/* CHROME FIX: isolation:isolate mengelompokkan overlay dalam satu stacking context
   tanpa memaksa GPU promotion individual — jumlah layer GPU turun drastis. */
.leaflet-overlay-pane,
.leaflet-tile-pane {
    isolation: isolate;
}

/* PATCH: Hapus will-change + translateZ permanent dari leaflet-image-layer.
   Sebelumnya: setiap imageOverlay mendapat GPU layer sendiri (4 win × 3 produk = 12 layer).
   Chrome harus upload texture baru ke tiap layer setiap frame animasi.
   Dengan menghapus ini, Chrome bisa composite overlay dalam satu layer bersama
   per pane, bukan 12 layer terpisah. */
.leaflet-image-layer {
    /* will-change dan translateZ dihapus — tidak diperlukan untuk overlay statis */
    backface-visibility: hidden;
}
/* CATATAN: decoding:async dan contain:size harus diaplikasikan via JavaScript,
   bukan CSS. Lihat preDecodeImagePromise() di animation-scheduler.js yang
   menggunakan img.decode() untuk decode barrier yang benar.
   Selector ini juga tidak tepat: Leaflet image overlay IS the img element
   (class leaflet-image-layer ada di img itu sendiri), bukan child-nya. */

/* Timeline control — contain agar perubahan tidak memicu reflow parent */
.win-tl {
    contain: layout paint style;
}

/* Layer panel drawer — contain saat animasi slide */
.win-lp-drawer {
    contain: layout paint style;
}

/* Toolbar split — contain agar hide/show tidak memicu layout seluruh halaman */
.split-float-toolbar {
    contain: layout paint style;
}

/* Sidebar — contain untuk isolasi dari map area */
#sidebar, .sidebar {
    contain: layout paint style;
}

/* ============================================================
 * PATCH v15 PERFORMANCE — Radar image rendering optimasi
 * ============================================================ */

/* PROMPT 12: image-rendering:pixelated untuk radar overlay.
   Radar menggunakan warna diskrit (color table dBZ / mm/hr) — anti-aliasing
   bilinear saat zoom membuat warna bercampur dan tidak akurat secara meteorologi.
   Pixelated (nearest-neighbor) lebih cepat di GPU dan lebih akurat secara data.
   Class ini ditambahkan via JS di radar-layer.js (overlay._image.style). */
.leaflet-image-layer.radar-img {
    image-rendering: pixelated;
    image-rendering: crisp-edges; /* Firefox */
}

/* PROMPT 12: Radar pane — isolation:isolate sudah ada di leaflet-overlay-pane.
   Tambahkan contain:strict pada split-win-body agar repaint radar tidak
   menyebar ke luar window. */

/* PROMPT 12: Pastikan radar pane tidak mendapat translateZ/will-change permanen.
   Sudah ditangani di blok PATCH v14 di atas (leaflet-image-layer rule).
   Tambahkan contain:size agar ukuran pane tidak memicu reflow parent. */
.leaflet-overlay-pane > div[class*="radar-"] {
    contain: size layout;
}

/* Prefers-reduced-motion: matikan semua transisi/animasi CSS */
@media (prefers-reduced-motion: reduce) {
    .split-win, .win-tl, .win-lp-drawer, .split-float-toolbar,
    .split-win-titlebar, .win-lp-strip {
        transition: none !important;
        animation: none !important;
    }
}

/* Pastikan basemap tiles tidak memicu subpixel antialiasing berlebihan */
.leaflet-tile {
    image-rendering: auto;
    /* Hindari filter yang mahal pada tile */
}

/* Cegah selection saat drag window */
.split-active * {
    user-select: none;
}
.split-active input,
.split-active textarea,
.split-active select {
    user-select: text;
}

/* ── Opacity slider untuk layer aktif di sidebar ───────────────────────────── */
.lp-opacity-row {
    display: flex;
    align-items: center;
    gap: 5px;
    width: 100%;
    padding: 2px 0 0 26px;
    margin-top: 2px;
}

.lp-item.is-active {
    flex-wrap: wrap;
}

.lp-opacity-icon {
    font-size: 10px;
    color: var(--text3);
    min-width: 14px;
    text-align: center;
    cursor: default;
    user-select: none;
}

.lp-op-slider {
    flex: 1;
    height: 3px;
    -webkit-appearance: none;
    appearance: none;
    background: var(--border);
    border-radius: 2px;
    outline: none;
    cursor: pointer;
    min-width: 60px;
}
.lp-op-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--accent);
    cursor: pointer;
    border: none;
    box-shadow: 0 1px 3px rgba(0,0,0,.4);
}
.lp-op-slider::-moz-range-thumb {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--accent);
    cursor: pointer;
    border: none;
}

.lp-op-val {
    font-size: 10px;
    color: var(--text3);
    min-width: 30px;
    text-align: right;
}

/* ── Color picker untuk boundary layer ─────────────────────────────────────── */
.blayer-color-pick {
    width: 22px;
    height: 22px;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 4px;
    cursor: pointer;
    background: none;
    flex-shrink: 0;
}
.blayer-color-pick::-webkit-color-swatch-wrapper { padding: 2px; }
.blayer-color-pick::-webkit-color-swatch { border-radius: 2px; border: none; }
.blayer-color-pick::-moz-color-swatch { border-radius: 2px; border: none; }

/* ── Opacity slider untuk win-lp-drawer (split window) ─────────────────────── */
.win-lp-row {
    flex-wrap: wrap;
}

.win-lp-opacity-row {
    display: flex;
    align-items: center;
    gap: 5px;
    width: 100%;
    padding: 3px 0 2px 20px;
}

.win-lp-opacity-icon {
    font-size: 10px;
    color: var(--text3);
    min-width: 14px;
    text-align: center;
    user-select: none;
}

.win-lp-op-slider {
    flex: 1;
    height: 3px;
    -webkit-appearance: none;
    appearance: none;
    background: var(--border);
    border-radius: 2px;
    outline: none;
    cursor: pointer;
}
.win-lp-op-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: var(--accent);
    cursor: pointer;
    border: none;
}
.win-lp-op-slider::-moz-range-thumb {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: var(--accent);
    cursor: pointer;
    border: none;
}

.win-lp-op-val {
    font-size: 10px;
    color: var(--text3);
    min-width: 28px;
    text-align: right;
}

/* dim-label: label kategori di info data terbaru (ganti dim-product-name) */
.dim-label {
    font-size: 11px; font-weight: 600; color: var(--text1);
    white-space: nowrap; min-width: 52px;
}


/* ════════════════════════════════════════════════════════════════════════════
   RESPONSIVE — Tablet & Mobile
   Semua override bersifat additive: tidak ada yang berubah di ≥ 1024px.
   ════════════════════════════════════════════════════════════════════════════

   Breakpoint:
     ≥ 1024px  → desktop (tidak ada override)
     768–1023px → tablet landscape
     640–767px  → tablet portrait / small tablet
     < 640px    → mobile
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── CSS variable untuk sidebar width agar sidebar-toggle ikut bergeser ── */
:root {
    --sidebar-w: 256px;
}

/* ────────────────────────────────────────────────────────────────────────────
   TABLET LANDSCAPE  768–1023px
   Sidebar lebih sempit, beberapa teks header disembunyikan
   ──────────────────────────────────────────────────────────────────────────── */
@media (max-width: 1023px) {
    :root { --sidebar-w: 216px; }

    #sidebar { width: var(--sidebar-w); }
    #sidebar.collapsed { width: 0; }

    #sidebar-toggle { left: var(--sidebar-w); }
    #sidebar.collapsed ~ #sidebar-toggle { left: 0; }

    /* Sempitkan lebar sidebar-toggle saat collapsed */
    #sidebar.collapsed ~ #sidebar-toggle { border-left: 1px solid var(--border); }

    /* Brand: sembunyikan sub-title untuk menghemat lebar */
    #inst-sub { font-size: 9px; }

    /* Preset & Info: sembunyikan label teks, hanya ikon */
    .preset-header-btn .preset-label,
    .data-info-btn .data-info-label { display: none; }

    /* Clock: kecilkan sedikit */
    .clock-val  { font-size: 10.5px; }
    .clock-label { font-size: 8.5px; }
}

/* ────────────────────────────────────────────────────────────────────────────
   TABLET PORTRAIT / SMALL TABLET  640–767px
   ──────────────────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
    :root { --sidebar-w: 240px; }

    /* Header lebih rapat */
    #header { height: 44px; padding: 0 10px; gap: 8px; }

    /* Brand: kecilkan font sebelum hilang */
    #inst-name { font-size: 11px; }
    #inst-sub  { font-size: 9px; }
    .sep        { display: none; }

    /* header-label: kecilkan dan biarkan ellipsis bekerja */
    .header-label { font-size: 10.5px; }

    /* Header-right: rapat */
    .header-right { gap: 5px; }

    /* Tombol-tombol header lebih kecil */
    .split-header-btn { padding: 3px 7px; font-size: 10px; }
    #theme-toggle     { width: 26px; height: 26px; font-size: 12px; }

    /* Sembunyikan teks "2×" / "4×" — hanya ikon */
    .split-header-btn span:not(svg) { display: none; }

    /* Clock: hanya tampilkan UTC row, sembunyikan local */
    .clock-local { display: none; }
    .clock-val   { font-size: 10.5px; min-width: 44px; }

    /* Sidebar: jadi drawer overlay di atas peta */
    #sidebar {
        position: fixed;
        top: 44px;
        left: 0;
        bottom: 0;
        z-index: 1100;
        width: var(--sidebar-w);
        transform: translateX(0);
        transition: transform 0.22s cubic-bezier(0.4,0,0.2,1);
        box-shadow: 4px 0 24px rgba(0,0,0,0.18);
    }
    #sidebar.collapsed {
        width: var(--sidebar-w);   /* tetap lebar, tapi geser ke kiri */
        transform: translateX(calc(-1 * var(--sidebar-w)));
    }

    /* Toggle: fixed, mengikuti tengah sidebar secara vertikal.
       top:50% + translateY(-50%) menempatkan toggle di tengah viewport,
       sesuai dengan sidebar yang span dari header hingga bawah layar.
       Tidak pakai top: fixed agar tidak terpaku di pojok atas sidebar. */
    #sidebar-toggle {
        position: fixed;
        left: var(--sidebar-w);
        top: 50%;
        transform: translateY(-50%);
        z-index: 1200;
        transition: left 0.22s cubic-bezier(0.4,0,0.2,1);
    }
    #sidebar.collapsed ~ #sidebar-toggle {
        left: 0;
    }

    /* Backdrop gelap saat sidebar terbuka (akan di-inject via JS class) */
    #body.sidebar-open::after {
        content: '';
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.35);
        z-index: 1050;
        backdrop-filter: blur(1px);
    }

    /* Map wrap: pakai penuh (sidebar floating) */
    #map-wrap { flex: 1; }

    /* Timeline: lebih ringkas */
    #timeline { height: 42px; padding: 0 8px; gap: 6px; }
    .tl-label { display: none; }
    .tl-speed { padding: 2px 4px; font-size: 9.5px; }
    .tl-btn   { width: 24px; height: 24px; font-size: 7.5px; }
    .tl-time  { font-size: 10px; min-width: 44px; }

    /* Status bar: lebih kecil */
    #statusbar { font-size: 8.5px; padding: 0 8px; gap: 10px; }

    /* Preset panel: lebih kecil */
    .preset-panel { width: calc(100vw - 20px); right: 10px; max-height: calc(100vh - 110px); max-height: calc(100dvh - 110px); }

    /* Data info menu */
    .data-info-menu { width: 260px; }
}

/* ────────────────────────────────────────────────────────────────────────────
   MOBILE  < 640px
   ──────────────────────────────────────────────────────────────────────────── */
@media (max-width: 639px) {
    :root { --sidebar-w: min(288px, 88vw); }

    /* Base font sedikit lebih besar untuk touch */
    html, body { font-size: 13px; }

    /* Header: height lebih kecil, layout seketat mungkin */
    #header { height: 42px; padding: 0 8px; gap: 6px; }

    /* Logo: sedikit lebih besar untuk tap target */
    #logo-wrap  { width: 30px; height: 30px; }
    #logo-svg   { width: 16px; height: 16px; }

    /* Brand text: kecilkan lebih lanjut, biarkan ellipsis bekerja */
    #inst-name { font-size: 10.5px; }
    #inst-sub  { font-size: 8.5px; }

    /* header-label: sembunyikan di mobile — ruang sudah sangat terbatas */
    .header-label { display: none; }

    /* Sembunyikan split buttons di mobile — kompleks untuk layar kecil */
    .split-btns { display: none; }

    /* Tombol header: minimal */
    .split-header-btn { padding: 3px 6px; font-size: 10px; height: 28px; }
    #theme-toggle     { width: 28px; height: 28px; }

    /* Clock: tampilkan hanya jam lokal */
    .clock-utc   { display: none; }
    .clock-local { display: flex; }
    .clock-local .clock-val { font-size: 11px; color: var(--text2); }
    .clock-tz-btn { display: none; } /* sembunyikan gear */

    /* Sidebar drawer: sedikit lebih lebar relatif layar */
    #sidebar {
        top: 42px;
        width: var(--sidebar-w);
    }
    #sidebar-toggle {
        top: 50%;
        transform: translateY(-50%);
        width: 20px; height: 38px;
    }

    /* Accordion head: touch-friendly */
    .accordion-head { padding: 12px 14px; }

    /* Layer items: touch-friendly height */
    .lp-item { padding: 8px 8px; }

    /* Timeline bar: lebih besar untuk touch */
    #timeline { height: 48px; padding: 0 8px; gap: 6px; }
    .tl-track { height: 5px; }
    .tl-btn   {
        width: 32px; height: 32px;
        border-radius: 50%;
        font-size: 9px;
    }
    .tl-time  { font-size: 10.5px; min-width: 48px; }
    .tl-speed { font-size: 10px; padding: 3px 5px; }

    /* Marks: sembunyikan agar tidak penuh */
    .tl-marks { display: none; }
    .tl-wrap  { padding-bottom: 0; }

    /* Status bar: hide non-essentials */
    .sb-item:has(#sb-layer),
    .sb-item:has(.sb-key:not(:is([data-key="lat"],[data-key="lon"]))) {
        display: none;
    }

    /* Toast: lebih rendah agar tidak terhalang keyboard */
    #toast { bottom: 64px; }

    /* Preset panel: beralih ke position:fixed agar dikunci ke viewport.
       Dengan position:absolute (dari #map-wrap), panel terpotong oleh
       #timeline + safe-area di smartphone. Fixed memastikan max-height
       dihitung dari viewport nyata, bukan dari parent yang sudah dikurangi
       header+timeline. Gunakan dvh untuk memperhitungkan navigation bar. */
    .preset-panel {
        position: fixed;
        top: calc(44px + 6px);   /* 44px = header mobile */
        right: 8px;
        left: 8px;
        width: auto;
        /* Fallback untuk browser lama (tidak support dvh) */
        max-height: calc(100vh  - 44px - 6px - 48px - 8px);
        /* dvh = dynamic viewport height: mengecualikan navigation bar smartphone.
           Browser yang support dvh akan override baris di atas. */
        max-height: calc(100dvh - 44px - 6px - 48px - max(8px, env(safe-area-inset-bottom)));
    }

    /* Data info menu: mobile — beralih ke position:fixed agar menu
       dikunci ke viewport, bukan ke .data-info-wrap.
       Dengan position:absolute + right:0 dan menu selebar hampir 100vw,
       sisi kiri menu akan terpotong di luar layar karena wrapper-nya
       sangat kecil (lebar tombol ~60px).
       Menggunakan fixed + top/right yang dihitung dari header memastikan
       menu selalu berada di dalam viewport. */
    .data-info-menu {
        position: fixed;
        top: calc(44px + 6px); /* 44px = tinggi header di mobile (override @max-1023px) */
        right: 12px;
        left: 12px;
        width: auto;
        transform: none;
    }

    /* Colorbar di map: lebih kecil — khusus layout HORIZONTAL saja.
       Sebelumnya selector ".map-cbar"/".map-cbar-bar" tanpa scope ikut
       kena ke variant vertikal (karena markup vertikal tetap memakai
       class dasar yang sama), memaksa height:8px tetap pada bar vertikal
       sehingga tidak ikut stretch mengisi tinggi kartu saat di-resize. */
    .map-cbar:not(.map-cbar--v) { min-width: 140px; padding: 5px 6px; }
    .map-cbar-bar:not(.map-cbar-bar--v) { height: 8px; }

    /* Split window: matikan fitur drag (tidak praktis di touch) */
    .split-win-titlebar { cursor: default; }
    .split-win-resize-br, .split-win-resize-r, .split-win-resize-b { display: none !important; }

    /* Per-window timeline controls: selalu expanded di mobile */
    .win-tl-controls {
        max-height: 34px !important;
        opacity: 1 !important;
        padding: 4px 8px 5px !important;
    }
    .win-tl-thumb { opacity: 1 !important; }

    /* Split toolbar: lebih ringkas */
    .split-float-toolbar { height: 36px; padding: 0 8px; gap: 5px; }
    .split-float-title   { font-size: 11px; }
    .split-quick-btn     { padding: 2px 6px; font-size: 10px; }
    .split-sync-step-btn,
    .split-sync-map-btn  { padding: 3px 7px; font-size: 10px; }
    .split-arrange-btn   { padding: 3px 7px; font-size: 10px; }
    .split-exit-btn      { padding: 3px 7px; font-size: 10px; }
}

/* ────────────────────────────────────────────────────────────────────────────
   MOBILE KECIL  < 380px  (e.g. iPhone SE, older Androids)
   ──────────────────────────────────────────────────────────────────────────── */
@media (max-width: 379px) {
    :root { --sidebar-w: 92vw; }

    #header { height: 40px; padding: 0 6px; gap: 4px; }

    /* Sembunyikan preset di header, aksesibel dari sidebar */
    #preset-manager-btn { display: none; }

    /* Clock: singkat saja */
    .clock-local .clock-val { font-size: 10.5px; min-width: 40px; }

    /* Timeline: compact */
    #timeline  { height: 44px; padding: 0 6px; gap: 4px; }
    .tl-btn    { width: 28px; height: 28px; }
    .tl-time   { font-size: 9.5px; min-width: 40px; }

    /* Data info: hampir full width, position:fixed sudah di-set di breakpoint 639px */
    .data-info-menu { left: 6px; right: 6px; width: auto; }
}

/* ────────────────────────────────────────────────────────────────────────────
   TOUCH INTERACTION — Semua ukuran
   Pastikan elemen interaktif punya tap target minimal 44px
   ──────────────────────────────────────────────────────────────────────────── */
@media (hover: none) and (pointer: coarse) {
    /* Tap targets: tombol yang terlalu kecil di desktop diperbesar */
    .lp-toggle-btn  { width: 24px; height: 24px; }
    .split-win-btn  { width: 28px; height: 28px; }
    .gjson-btn      { padding: 3px 7px; }
    .wt-btn         { width: 28px; height: 28px; }
    .wt-play-btn    { width: 30px; height: 30px; }

    /* Slider: track dan thumb lebih besar */
    input[type=range].op-slider {
        height: 4px;
    }
    input[type=range].op-slider::-webkit-slider-thumb {
        width: 16px; height: 16px;
    }
    .lp-op-slider {
        height: 4px;
    }
    .lp-op-slider::-webkit-slider-thumb {
        width: 18px; height: 18px;
    }

    /* Accordion head: lebih mudah di-tap */
    .accordion-head { padding: 13px 14px; }

    /* Disable hover effects yang tidak berguna di touch */
    .lp-drag-handle { display: none; }
    .lp-split-actions { display: none; }
}

/* ────────────────────────────────────────────────────────────────────────────
   ORIENTATION — Landscape pada mobile (height terbatas)
   ──────────────────────────────────────────────────────────────────────────── */
@media (max-height: 500px) and (orientation: landscape) {
    /* Header lebih tipis */
    #header { height: 38px; }

    /* Timeline tipis */
    #timeline { height: 38px; }
    .tl-marks { display: none; }
    .tl-wrap  { padding-bottom: 0; }

    /* Sidebar top menyesuaikan header yang lebih tipis di landscape */
    #sidebar { top: 38px; }
    /* Toggle tetap di tengah vertikal (top:50% dari block sebelumnya masih berlaku) */

    /* Sembunyikan status bar agar lebih banyak ruang peta */
    #statusbar { display: none; }
}

/* ────────────────────────────────────────────────────────────────────────────
   SAFE AREA INSETS — iPhone notch / Dynamic Island / home indicator
   ──────────────────────────────────────────────────────────────────────────── */
@supports (padding: max(0px)) {
    #header {
        padding-left:  max(14px, env(safe-area-inset-left));
        padding-right: max(14px, env(safe-area-inset-right));
    }

    /* #timeline — primary window, bawah layar.
       padding-bottom mendorong konten naik agar tidak tertutup
       navigation bar. height otomatis tumbuh karena flex-shrink:0. */
    #timeline {
        padding-left:   max(14px, env(safe-area-inset-left));
        padding-right:  max(14px, env(safe-area-inset-right));
        padding-bottom: max(6px, env(safe-area-inset-bottom));
    }

    /* .win-tl — per-window timeline di split mode.
       Win di bawah layar (terutama mode 2-window portrait / 4-window)
       butuh padding-bottom yang sama. */
    .win-tl {
        padding-bottom: env(safe-area-inset-bottom);
    }

    /* .win-tl-controls — kontrol animasi dalam win-tl juga perlu offset
       saat navigation bar aktif agar tombol play/step tidak terpotong. */
    .win-tl-controls {
        padding-bottom: max(0px, env(safe-area-inset-bottom));
    }

    #sidebar {
        padding-bottom: env(safe-area-inset-bottom);
    }

    @media (max-width: 767px) {
        #header {
            padding-left:  max(8px, env(safe-area-inset-left));
            padding-right: max(8px, env(safe-area-inset-right));
        }

        /* Di mobile portrait, hanya win di baris bawah yang kena nav bar.
           Karena kita tidak bisa tahu window mana yang paling bawah via CSS
           murni (posisi JS-driven), kita apply ke semua win-tl dan biarkan
           env() = 0 saat navigation bar tidak ada (landscape tanpa gesture). */
        .win-tl {
            padding-bottom: env(safe-area-inset-bottom);
        }
    }
}


/* ═══════════════════════════════════════════════════════════════════
   RAIN CHART SIDEBAR (rcs-*)
   ═══════════════════════════════════════════════════════════════════ */

/* ── Main Sidebar ── */
.rcs-sidebar {
    width: 270px;
    background: var(--surface);
    border-left: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    overflow: hidden;
    transition: width 0.22s cubic-bezier(0.4,0,0.2,1),
                transform 0.22s cubic-bezier(0.4,0,0.2,1);
    position: relative;
    z-index: 500;
}

.rcs-sidebar.rcs-closed {
    width: 0;
    border-left-width: 0;
}

.rcs-sidebar.rcs-open {
    width: 270px;
    border-left: 1px solid var(--border);
}

.rcs-sidebar.rcs-always-visible {
    width: 270px !important;
    border-left: 1px solid var(--border) !important;
}

/* ── Header ── */
.rcs-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 10px;
    height: 40px;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
    white-space: nowrap;
    overflow: hidden;
    gap: 6px;
}

.rcs-header-left {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    flex: 1;
}

.rcs-header-icon { font-size: 14px; flex-shrink: 0; }

.rcs-header-title {
    font-size: 12px;
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rcs-rain-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--red, #ef4444);
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    font-family: 'IBM Plex Mono', monospace;
    min-width: 16px;
    height: 16px;
    border-radius: 8px;
    padding: 0 4px;
    flex-shrink: 0;
    animation: rcs-pulse 1.5s infinite;
}

@keyframes rcs-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

.rcs-header-actions {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}

.rcs-sort-btn,
.rcs-settings-btn,
.rcs-audio-btn {
    width: 26px;
    height: 26px;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: var(--radius, 5px);
    color: var(--text3);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: color 0.15s, background 0.15s, border-color 0.15s;
    flex-shrink: 0;
}

.rcs-sort-btn:hover,
.rcs-settings-btn:hover,
.rcs-audio-btn:hover {
    color: var(--text);
    background: var(--surface2);
}

.rcs-sort-btn.rcs-sort-active {
    color: var(--accent);
    border-color: var(--accent);
    background: var(--accent-soft, var(--accent-dim));
}

.rcs-audio-btn.rcs-audio-active {
    color: var(--accent);
    border-color: var(--accent);
    background: var(--accent-dim);
}

/* ── Settings panel ── */
.rcs-settings-panel {
    background: var(--surface2);
    border-bottom: 1px solid var(--border);
    padding: 10px 12px;
    flex-shrink: 0;
}

.rcs-setting-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11.5px;
    color: var(--text);
    cursor: pointer;
    user-select: none;
}

.rcs-setting-row input[type="checkbox"] {
    accent-color: var(--accent);
    width: 13px;
    height: 13px;
    flex-shrink: 0;
}

.rcs-setting-note {
    font-size: 10px;
    color: var(--text3);
    margin-top: 6px;
    line-height: 1.5;
}

/* ── Scrollable list ── */
.rcs-list {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0;
}

.rcs-list::-webkit-scrollbar { width: 4px; }
.rcs-list::-webkit-scrollbar-thumb { background: var(--border2, var(--border)); border-radius: 2px; }

/* ── Station item — jarak antar grafik ── */
.rcs-item {
    border-bottom: 1px solid var(--border);
    padding: 7px 10px 8px;
    cursor: pointer;
    transition: background 0.15s;
}

.rcs-item:last-child { margin-bottom: 0; }

.rcs-item:hover {
    background: var(--surface2);
}

/* Highlight HANYA saat ada kenaikan hujan (delta > 0) */
.rcs-item.rcs-item-raining {
    background: var(--red-bg, rgba(239,68,68,0.08));
    border-left: 2px solid var(--red, #ef4444);
    padding-left: 8px;
}

[data-theme="dark"] .rcs-item.rcs-item-raining {
    background: rgba(248, 113, 113, 0.09);
}

/* Dark mode: pastikan border rcs-item tetap visible */
[data-theme="dark"] .rcs-item {
    border-bottom-color: var(--border);
}

/* Dark mode: modal events scroll area */
[data-theme="dark"] .rcs-modal-events-title {
    color: var(--text2, #c9c5bc);
    background: var(--surface2);
}

/* Dark mode: grafik border (garis-garis axis) dihandle via JS _updateChartsTheme */

/* Dark mode: rcs-events-table rows hover */
[data-theme="dark"] .rcs-events-table tbody tr:hover td {
    background: var(--surface2);
}

.rcs-item-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 5px;
    gap: 4px;
}

.rcs-item-title {
    display: flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
    flex: 1;
}

.rcs-type-badge {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.05em;
    padding: 1px 4px;
    border-radius: 3px;
    flex-shrink: 0;
    text-transform: uppercase;
}

/* Light mode badge colors */
.rcs-type-arg  { background: var(--accent-dim, rgba(99,102,241,0.12)); color: var(--accent, #6366f1); }
.rcs-type-aws  { background: var(--amber-bg, rgba(245,158,11,0.1)); color: var(--amber, #d97706); }
.rcs-type-aaws { background: var(--green-bg, rgba(16,185,129,0.1)); color: var(--green, #059669); }
.rcs-type-awsd { background: color-mix(in srgb, var(--amber-bg, rgba(245,158,11,0.1)) 60%, transparent); color: var(--amber, #d97706); }

/* Dark mode badge colors — better contrast */
[data-theme="dark"] .rcs-type-arg  { background: rgba(99,102,241,0.18); color: #a5b4fc; }
[data-theme="dark"] .rcs-type-aws  { background: rgba(245,158,11,0.18); color: #fbbf24; }
[data-theme="dark"] .rcs-type-aaws { background: rgba(16,185,129,0.18); color: #34d399; }
[data-theme="dark"] .rcs-type-awsd { background: rgba(245,158,11,0.12); color: #fbbf24; }

.rcs-name {
    font-size: 11px;
    font-weight: 500;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.rcs-item-meta {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
}

.rcs-accum {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px;
    color: var(--text3);
    white-space: nowrap;
}

.rcs-accum.rcs-accum-active {
    color: var(--red, #ef4444);
    font-weight: 600;
}

.rcs-signal-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--border2, #ccc);
    flex-shrink: 0;
    transition: background 0.3s;
}

.rcs-dot-ok        { background: var(--green, #059669); }
.rcs-dot-rain      { background: var(--red, #ef4444); animation: rcs-pulse 1s infinite; }
.rcs-dot-rain-flat { background: var(--amber, #d97706); }  /* hujan tapi tidak naik */

/* ── Mini chart — line chart, tinggi cukup untuk label waktu ── */
.rcs-chart-wrap {
    height: 100px;  /* area chart (86px) + ruang label X internal (14px dari layout.padding JS) */
    position: relative;
}

.rcs-chart-wrap canvas {
    width: 100% !important;
    height: 100% !important;
    display: block;
}

/* ── Toggle button ── */
.rcs-toggle {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 600;
    width: 16px;
    height: 34px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-right: none;
    border-radius: 5px 0 0 5px;
    color: var(--text3);
    font-size: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: color 0.15s, right 0.22s cubic-bezier(0.4,0,0.2,1);
}

.rcs-toggle:hover { color: var(--text); }

/* Kontrol toggle khusus mobile (disembunyikan di desktop) */
#rcs-open-tab, #rcs-collapse { display: none; }

/* Single-window (desktop): rcs-collapse tetap tersembunyi — hanya muncul di mobile. */

.rcs-toggle.rcs-toggle-active {
    color: var(--accent);
    right: 270px;
}

/* ═══════════════════════════════════════════════════════════════════
   MODAL — Responsif & selalu tampil tabel kejadian hujan
   ═══════════════════════════════════════════════════════════════════ */

.rcs-modal {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
    box-sizing: border-box;
}

.rcs-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.5);
}

.rcs-modal-box {
    position: relative;
    z-index: 1;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius, 6px);
    width: min(680px, 100%);
    max-height: min(90vh, 700px);
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-lg, 0 20px 60px rgba(0,0,0,0.3));
    overflow: hidden;
}

.rcs-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
    gap: 10px;
}

.rcs-modal-header-left {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.rcs-modal-header-left h3 {
    font-family: 'IBM Plex Sans', system-ui, sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--text);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rcs-modal-subtitle {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 9.5px;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text3);
}

.rcs-modal-header-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.rcs-modal-close {
    width: 28px; height: 28px;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: var(--radius, 5px);
    color: var(--text3);
    font-family: 'IBM Plex Sans', system-ui, sans-serif;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: color 0.15s, background 0.15s;
    line-height: 1;
}

.rcs-modal-close:hover { color: var(--text); background: var(--surface2); }

.rcs-modal-download {
    width: 28px; height: 28px;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: var(--radius, 5px);
    color: var(--text3);
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: color 0.15s, background 0.15s, border-color 0.15s;
}
.rcs-modal-download:hover { color: var(--accent, #2563eb); background: var(--surface2); border-color: var(--accent, #2563eb); }

/* ── Toolbar modal: akumulasi total + pemilih tanggal ──────────────────────
   Fitur baru: HANYA muncul pada tampilan normal (disembunyikan otomatis pada
   display-mode lewat aturan .display-mode di bawah, sama seperti
   #rcs-modal-download). */
.rcs-modal-toolbar {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 14px;
    border-bottom: 1px solid var(--border);
    background: var(--surface2);
    flex-shrink: 0;
    flex-wrap: wrap;
}

.rcs-modal-accum {
    display: flex;
    align-items: baseline;
    gap: 6px;
    font-family: 'IBM Plex Mono', monospace;
}

.rcs-modal-accum-label {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text3);
}

.rcs-modal-accum-value {
    font-size: 13px;
    font-weight: 700;
    color: var(--text2);
    transition: color 0.15s;
}

.rcs-modal-accum-value.rcs-modal-accum-active { color: var(--accent, #2563eb); }

.rcs-modal-date-picker {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Tombol trigger kalender kustom (menggantikan input[type=date] native) */
.rcs-modal-date-trigger {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px;
    color: var(--text);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius, 5px);
    padding: 4px 8px;
    height: 26px;
    box-sizing: border-box;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
    white-space: nowrap;
}
.rcs-modal-date-trigger:hover { border-color: var(--accent, #2563eb); }
.rcs-modal-date-trigger svg { flex-shrink: 0; opacity: 0.65; }

/* Popup kalender kustom */
.rcs-cal-popup {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 2000;
    background: var(--surface, #fff);
    border: 1px solid var(--border);
    border-radius: calc(var(--radius, 5px) + 3px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.15), 0 2px 6px rgba(0,0,0,0.08);
    padding: 12px;
    width: 240px;
    user-select: none;
}
[data-theme="dark"] .rcs-cal-popup {
    box-shadow: 0 8px 24px rgba(0,0,0,0.45), 0 2px 6px rgba(0,0,0,0.3);
}
.rcs-cal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}
.rcs-cal-nav {
    background: none;
    border: 1px solid var(--border);
    border-radius: var(--radius, 5px);
    color: var(--text2, var(--text));
    width: 26px; height: 26px;
    display: flex; align-items: center; justify-content: center;
    font-size: 16px; line-height: 1;
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
    padding: 0;
}
.rcs-cal-nav:hover:not(:disabled) { background: var(--surface2, var(--border)); color: var(--text); }
.rcs-cal-nav:disabled,
.rcs-cal-nav-disabled { opacity: 0.3; cursor: default; }
.rcs-cal-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    margin-bottom: 4px;
}
.rcs-cal-weekdays span {
    font-family: 'IBM Plex Sans', system-ui, sans-serif;
    font-size: 10px;
    font-weight: 600;
    color: var(--text3, #9e9b94);
    text-align: center;
    padding: 2px 0;
}
.rcs-cal-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}
.rcs-cal-day {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11.5px;
    color: var(--text);
    background: none;
    border: 1px solid transparent;
    border-radius: var(--radius, 5px);
    text-align: center;
    padding: 4px 0;
    cursor: pointer;
    transition: background 0.1s, color 0.1s, border-color 0.1s;
    line-height: 1.4;
}
.rcs-cal-day.rcs-cal-empty { cursor: default; }
.rcs-cal-day:not(.rcs-cal-empty):not(.rcs-cal-disabled):hover {
    background: var(--surface2, var(--border));
    border-color: var(--border);
}
.rcs-cal-day.rcs-cal-today {
    border-color: var(--accent, #2563eb);
    color: var(--accent, #2563eb);
    font-weight: 600;
}
.rcs-cal-day.rcs-cal-selected {
    background: var(--accent, #2563eb);
    color: #fff !important;
    border-color: var(--accent, #2563eb);
    font-weight: 600;
}
.rcs-cal-day.rcs-cal-disabled {
    color: var(--text3, #9e9b94);
    opacity: 0.35;
    cursor: default;
}

/* Month-label sebagai clickable button */
.rcs-cal-month-label {
    font-family: 'IBM Plex Sans', system-ui, sans-serif;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text);
    background: none;
    border: 1px solid transparent;
    border-radius: var(--radius, 5px);
    padding: 2px 6px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: background 0.12s, border-color 0.12s;
}
.rcs-cal-month-label:hover {
    background: var(--surface2, var(--border));
    border-color: var(--border);
}
.rcs-cal-month-label.rcs-cal-label-active {
    background: var(--surface2, var(--border));
    border-color: var(--accent, #2563eb);
    color: var(--accent, #2563eb);
}
.rcs-cal-caret {
    flex-shrink: 0;
    transition: transform 0.15s;
}
.rcs-cal-month-label.rcs-cal-label-active .rcs-cal-caret {
    transform: rotate(180deg);
}

/* Panel YM picker */
.rcs-cal-ym-panel {
    display: none;
    gap: 8px;
    min-height: 160px;
}
/* Kolom kiri: daftar tahun (scrollable) */
.rcs-cal-ym-years {
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow-y: auto;
    max-height: 168px;
    min-width: 64px;
    padding-right: 4px;
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
}
.rcs-cal-ym-years::-webkit-scrollbar { width: 4px; }
.rcs-cal-ym-years::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
/* Kolom kanan: grid 3×4 bulan */
.rcs-cal-ym-months {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3px;
    align-content: start;
    flex: 1;
}
/* Tombol tahun */
.rcs-cal-ym-year {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 12px;
    color: var(--text);
    background: none;
    border: 1px solid transparent;
    border-radius: var(--radius, 5px);
    padding: 4px 8px;
    cursor: pointer;
    text-align: left;
    transition: background 0.1s, border-color 0.1s, color 0.1s;
    white-space: nowrap;
}
.rcs-cal-ym-year:hover {
    background: var(--surface2, var(--border));
    border-color: var(--border);
}
.rcs-cal-ym-year.rcs-cal-ym-active {
    background: var(--accent, #2563eb);
    color: #fff;
    border-color: var(--accent, #2563eb);
    font-weight: 600;
}
/* Tombol bulan */
.rcs-cal-ym-month {
    font-family: 'IBM Plex Sans', system-ui, sans-serif;
    font-size: 11px;
    font-weight: 500;
    color: var(--text);
    background: none;
    border: 1px solid transparent;
    border-radius: var(--radius, 5px);
    padding: 5px 2px;
    cursor: pointer;
    text-align: center;
    transition: background 0.1s, border-color 0.1s, color 0.1s;
}
.rcs-cal-ym-month:hover:not(:disabled) {
    background: var(--surface2, var(--border));
    border-color: var(--border);
}
.rcs-cal-ym-month.rcs-cal-ym-active {
    background: var(--accent, #2563eb);
    color: #fff;
    border-color: var(--accent, #2563eb);
    font-weight: 600;
}
.rcs-cal-ym-month.rcs-cal-ym-disabled {
    color: var(--text3, #9e9b94);
    opacity: 0.35;
    cursor: default;
}

.rcs-modal-date-live {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: 'IBM Plex Sans', system-ui, sans-serif;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--text3);
    background: transparent;
    border: 1px solid var(--border);
    border-radius: var(--radius, 5px);
    padding: 4px 9px;
    height: 26px;
    box-sizing: border-box;
    cursor: pointer;
    transition: color 0.15s, background 0.15s, border-color 0.15s;
}
.rcs-modal-date-live:hover { color: var(--text); background: var(--surface3, var(--border)); }
.rcs-modal-date-live.rcs-date-live-active {
    color: #fff;
    background: var(--accent, #2563eb);
    border-color: var(--accent, #2563eb);
}
.rcs-modal-date-live-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.5;
    flex-shrink: 0;
}
.rcs-modal-date-live.rcs-date-live-active .rcs-modal-date-live-dot {
    opacity: 1;
    animation: rcs-pulse 1.4s ease-in-out infinite;
}

/* Sembunyikan toolbar tanggal/akumulasi pada display-mode (layar publik) —
   konsisten dengan aturan #rcs-modal-download di bawah. */
.display-mode .rcs-modal-toolbar { display: none !important; }

/* Chart area — proporsi baik di semua ukuran layar */
.rcs-modal-body {
    flex-shrink: 0;
    height: clamp(180px, 30vh, 280px);
    padding: 14px 16px 10px;
    position: relative;
}

.rcs-modal-body canvas {
    width: 100% !important;
    height: 100% !important;
    display: block;
}

/* Overlay loading saat data 24 jam/histori belum tampil — gaya konsisten
   dengan dashboard utama (spinner ring + label mono-uppercase). */
.rcs-modal-loading-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: color-mix(in srgb, var(--surface) 88%, transparent);
    z-index: 2;
}

.rcs-modal-spinner {
    display: inline-block;
    width: 22px; height: 22px;
    border: 2.5px solid var(--border2, var(--border));
    border-top-color: var(--accent, #2563eb);
    border-radius: 50%;
    animation: rcs-modal-spin 0.7s linear infinite;
}
@keyframes rcs-modal-spin { to { transform: rotate(360deg); } }

.rcs-modal-loading-text {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--text3);
}

/* Tabel kejadian hujan — SELALU TAMPIL, scroll vertikal */
.rcs-modal-events {
    border-top: 1px solid var(--border);
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.rcs-modal-events-title {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text3);
    padding: 7px 16px 6px;
    flex-shrink: 0;
    border-bottom: 1px solid var(--border);
    background: var(--surface2);
    text-align: center;
}

.rcs-modal-events-scroll {
    overflow-y: auto;
    flex: 1;
    min-height: 0;
    max-height: clamp(120px, 22vh, 220px);
}

.rcs-modal-events-scroll::-webkit-scrollbar { width: 5px; }
.rcs-modal-events-scroll::-webkit-scrollbar-thumb { background: var(--border2, var(--border)); border-radius: 3px; }

/* ── Tabel events ── */
.rcs-events-table {
    width: auto;
    min-width: 60%;
    max-width: 100%;
    border-collapse: collapse;
    font-size: 11px;
    font-family: 'IBM Plex Mono', monospace;
    margin: 0 auto; /* tabel di tengah horizontal */
}

.rcs-events-table thead {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--surface);
    /* dark mode: background sesuai tema */
}

[data-theme="dark"] .rcs-events-table thead {
    background: var(--surface);
}

[data-theme="dark"] .rcs-events-table th {
    color: var(--text2, #c9c5bc);
    border-bottom-color: var(--border);
}

[data-theme="dark"] .rcs-events-table td {
    color: var(--text, #e8e4dc);
    border-bottom-color: var(--border);
}

.rcs-events-table th {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 9px;
    font-weight: 700;
    text-align: center;
    padding: 5px 16px 4px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text3);
    border-bottom: 1px solid var(--border);
}

.rcs-events-table td {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px;
    color: var(--text2);
    padding: 5px 16px;
    border-bottom: 1px solid var(--border);
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
}

.rcs-events-table tr:last-child td { border-bottom: none; }

.rcs-events-table tbody tr:hover td {
    background: var(--surface2);
}

.rcs-events-empty {
    text-align: center;
    color: var(--text3) !important;
    font-style: italic;
    padding: 14px 16px !important;
}

/* Kategori warna — light & dark */
.rcs-cat-light     { color: var(--accent, #6366f1); }
.rcs-cat-moderate  { color: var(--amber, #d97706); font-weight: 500; }
.rcs-cat-heavy     { color: var(--red, #ef4444); font-weight: 600; }
.rcs-cat-very-heavy { color: var(--red, #ef4444); font-weight: 700; }
.rcs-cat-extreme   { color: var(--red, #ef4444); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }

[data-theme="dark"] .rcs-cat-light    { color: #a5b4fc; }
[data-theme="dark"] .rcs-cat-moderate { color: #fbbf24; }
[data-theme="dark"] .rcs-cat-heavy    { color: #f87171; }
[data-theme="dark"] .rcs-cat-very-heavy { color: #f87171; }
[data-theme="dark"] .rcs-cat-extreme  { color: #f87171; }

/* ═══════════════════════════════════════════════════════════════════
   TOAST NOTIFICATIONS
   ═══════════════════════════════════════════════════════════════════ */

.rcs-notif-container {
    position: fixed;
    bottom: 72px;
    right: 16px;
    z-index: 1800;
    display: flex;
    flex-direction: column-reverse;
    gap: 8px;
    pointer-events: none;
    max-width: 300px;
}

.rcs-notif {
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 3px solid var(--red, #ef4444);
    border-radius: var(--radius, 5px);
    box-shadow: var(--shadow-lg, 0 8px 30px rgba(0,0,0,0.2));
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 10px;
    pointer-events: all;
    cursor: pointer;
    animation: rcs-notif-in 0.25s ease-out;
    transition: transform 0.15s;
}

.rcs-notif:hover { transform: translateX(-3px); }

@keyframes rcs-notif-in {
    from { opacity: 0; transform: translateX(24px); }
    to   { opacity: 1; transform: translateX(0); }
}

.rcs-notif.rcs-notif-out {
    animation: rcs-notif-out 0.3s ease-in forwards;
}

@keyframes rcs-notif-out {
    to { opacity: 0; transform: translateX(24px); }
}

.rcs-notif-icon  { font-size: 18px; flex-shrink: 0; }
.rcs-notif-body  { flex: 1; min-width: 0; }

.rcs-notif-title {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rcs-notif-sub {
    font-size: 10px;
    font-family: 'IBM Plex Mono', monospace;
    color: var(--text2);
    margin-top: 1px;
}

.rcs-notif-close {
    background: transparent;
    border: none;
    color: var(--text3);
    font-size: 14px;
    line-height: 1;
    flex-shrink: 0;
    padding: 0 2px;
    cursor: pointer;
    transition: color 0.15s;
}
.rcs-notif-close:hover { color: var(--text); }

/* ═══════════════════════════════════════════════════════════════════
   RESPONSIVE TIERS
   ═══════════════════════════════════════════════════════════════════ */

/* ── Large desktop ≥ 1280px ── */
@media (min-width: 1280px) {
    .rcs-toggle.rcs-toggle-active { right: 270px; }
}

/* ── Desktop 1024–1279px ── */
@media (min-width: 1024px) and (max-width: 1279px) {
    .rcs-sidebar, .rcs-sidebar.rcs-open, .rcs-sidebar.rcs-always-visible {
        width: 250px;
    }
    .rcs-toggle.rcs-toggle-active { right: 250px; }
}

/* ── Tablet 768–1023px ── */
@media (min-width: 768px) and (max-width: 1023px) {
    .rcs-sidebar.rcs-open,
    .rcs-sidebar.rcs-always-visible { width: 230px !important; }
    .rcs-toggle.rcs-toggle-active   { right: 230px; }
    .rcs-modal-box { width: min(95vw, 600px); }
}

/* ── Mobile < 768px : sidebar sebagai bottom sheet ── */
@media (max-width: 767px) {
    .rcs-sidebar {
        width: 100% !important;
        height: 0;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        border-left: none;
        border-top: 1px solid var(--border);
        transition: height 0.22s cubic-bezier(0.4,0,0.2,1);
        z-index: 700;
    }

    .rcs-sidebar.rcs-open,
    .rcs-sidebar.rcs-always-visible {
        /* Tinggi pas: header (40) + 1 baris chart (~140) + padding list.
           Sebelumnya 55vh → banyak ruang kosong di bawah grafik. */
        height: 190px;
        width: 100% !important;
    }

    /* Dorong timeline (dan peta) NAIK di atas bar grafik saat bar terbuka,
       sehingga slider timeline berada DI ATAS bar grafik hujan. Kelas
       rcs-mobile-open di-set oleh toggleRainSidebar(). */
    #timeline { transition: margin-bottom 0.22s cubic-bezier(0.4,0,0.2,1); }
    body.rcs-mobile-open #timeline { margin-bottom: 190px; }

    .rcs-sidebar.rcs-closed {
        height: 0;
        width: 100% !important;
        border-top-width: 0;
    }

    .rcs-list {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        overflow-x: auto;
        overflow-y: hidden;
        padding: 4px 6px;
        gap: 8px;
        scroll-snap-type: x mandatory;
    }

    .rcs-item {
        flex-shrink: 0;
        width: 200px;
        border-right: 1px solid var(--border);
        border-bottom: none;
        scroll-snap-align: start;
        margin-bottom: 0;
    }

    .rcs-item.rcs-item-raining {
        border-left: 2px solid var(--red, #ef4444);
        border-top: none;
        padding-left: 8px;
    }

    .rcs-toggle {
        position: fixed;
        right: auto;
        bottom: 16px;
        left: 50%;
        top: auto;
        transform: translateX(-50%);
        width: 42px;
        height: 42px;
        border-radius: 50%;
        border: 1px solid var(--border);
        border-right: 1px solid var(--border);
    }

    .rcs-toggle.rcs-toggle-active {
        right: auto;
        bottom: calc(190px + 8px);
        left: 50%;
    }

    /* Mobile: ganti toggle tepi-kanan (desktop) dengan kontrol bawah khusus. */
    .rcs-toggle { display: none !important; }

    .rcs-header { position: relative; }

    /* Tombol TUTUP — di tengah (horizontal) header, hanya saat bar terbuka. */
    #rcs-collapse {
        position: absolute;
        left: 50%; top: 50%;
        transform: translate(-50%, -50%);
        width: 46px; height: 26px;
        display: none;
        align-items: center; justify-content: center;
        background: var(--surface2);
        border: 1px solid var(--border);
        border-radius: 7px;
        color: var(--text2);
        cursor: pointer;
        z-index: 3;
    }
    #rcs-collapse:active { background: var(--border); }
    body.rcs-mobile-open #rcs-collapse { display: flex; }

    /* Tab BUKA — pil di ATAS timeline, hanya saat bar tertutup. */
    #rcs-open-tab {
        position: fixed;
        left: 50%;
        bottom: 56px;            /* di atas timeline (≈48px) + jarak */
        transform: translateX(-50%);
        z-index: 600;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 7px 14px;
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: 999px;
        box-shadow: 0 2px 10px rgba(0,0,0,0.18);
        color: var(--text2);
        font-size: 11.5px;
        font-weight: 600;
        line-height: 1;
        cursor: pointer;
        white-space: nowrap;
    }
    #rcs-open-tab:active { background: var(--surface2); }
    #rcs-open-tab .rcs-open-tab-chev { color: var(--text3); }
    body.rcs-mobile-open #rcs-open-tab { display: none; }

    /* Modal mobile: full layar hampir penuh */
    .rcs-modal { padding: 0; align-items: flex-end; }
    .rcs-modal-box {
        width: 100%;
        max-height: 90vh;
        border-radius: var(--radius, 6px) var(--radius, 6px) 0 0;
    }
    .rcs-modal-body { height: clamp(160px, 28vw, 220px); }
    .rcs-modal-events-scroll { max-height: clamp(130px, 30vh, 200px); }

    /* Toolbar tanggal/akumulasi lebih ringkas di layar sempit */
    .rcs-modal-toolbar { padding: 6px 10px; gap: 8px; }
    .rcs-modal-date-trigger { font-size: 10.5px; padding: 3px 6px; }
    .rcs-modal-date-live { font-size: 10px; padding: 3px 8px; }

    .rcs-notif-container {
        bottom: 60px;
        right: 8px;
        max-width: 90vw;
    }
}

/* ── Small mobile < 400px ── */
@media (max-width: 399px) {
    .rcs-item { width: 180px; }
    .rcs-modal-body { height: 150px; }
    .rcs-modal-toolbar { justify-content: flex-start; }
    .rcs-modal-date-picker { width: 100%; justify-content: space-between; }
    .rcs-cal-popup { right: auto; left: 0; width: 220px; }
}

/* ── Portrait override via JS class ── */
.rcs-sidebar.rcs-portrait:not(.rcs-always-visible) {
    /* handled by media query above */
}

/* ── Single window mode ── */
#body:not(.split-active) .rcs-sidebar {
    /* JS menambahkan class rcs-always-visible */
}

/* ══════════════════════════════════════════════════════════════════════════
   BOUNDARY TOOLTIP (hover batas wilayah — tanpa highlight)
   ══════════════════════════════════════════════════════════════════════════ */
.boundary-tooltip.leaflet-tooltip {
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--border2);
    border-radius: 5px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.18);
    font-size: 11px;
    padding: 3px 7px;
    font-family: 'IBM Plex Sans', sans-serif;
}
.boundary-tooltip.leaflet-tooltip b { font-weight: 600; }
.boundary-tooltip.leaflet-tooltip-top:before { border-top-color: var(--border2); }

/* ══════════════════════════════════════════════════════════════════════════
   TOMBOL PENSIL VCUT
   ══════════════════════════════════════════════════════════════════════════ */
/* Sidebar (mode 1 window) — pada item radar aktif */
.lp-vcut-btn {
    flex-shrink: 0;
    width: 22px; height: 22px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: 5px;
    color: var(--text2);
    cursor: pointer;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
    margin-right: 2px;
}
.lp-vcut-btn:hover { background: var(--surface); color: var(--accent); border-color: var(--accent); }
.lp-vcut-btn--active { background: var(--accent); color: #fff; border-color: var(--accent); }

/* Split window — di bawah win-lp-strip */
.win-lp-vcut {
    position: absolute; left: 0; top: 48px;
    width: 22px;
    pointer-events: all;
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: none;
    border-radius: 0 6px 6px 0;
    padding: 5px 3px;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    color: var(--text2);
    box-shadow: 2px 2px 8px rgba(0,0,0,0.12);
    transition: background 0.12s, color 0.12s;
    z-index: 601;
}
.win-lp-vcut:hover { background: var(--surface2); color: var(--accent); }
.win-lp-vcut--active { background: var(--accent); color: #fff; }

/* Kursor crosshair saat mode gambar aktif */
.vcut-draw-cursor { cursor: crosshair !important; }
.vcut-draw-cursor .leaflet-interactive { cursor: crosshair !important; }
.vcut-pan-cursor, .vcut-pan-cursor .leaflet-interactive { cursor: grab !important; }
.vcut-pan-cursor:active, .vcut-pan-cursor:active .leaflet-interactive { cursor: grabbing !important; }

/* ══════════════════════════════════════════════════════════════════════════
   ENDPOINT MARKER (A / B)
   ══════════════════════════════════════════════════════════════════════════ */
.vcut-endpoint {
    width: 18px; height: 18px;
    border-radius: 50%;
    background: #ff3b30; color: #fff;
    border: 2px solid #fff;
    box-shadow: 0 1px 4px rgba(0,0,0,0.4);
    font: 700 11px/14px 'IBM Plex Mono', monospace;
    text-align: center;
    cursor: grab;
}
.vcut-endpoint--sel { background: #ffcc00; color: #1a1916; }

/* ══════════════════════════════════════════════════════════════════════════
   TOOLBAR DALAM WINDOW (manage gambar garis)
   ══════════════════════════════════════════════════════════════════════════ */
.vcut-toolbar {
    position: absolute;
    top: 8px; left: 50%; transform: translateX(-50%);
    z-index: 1200;
    display: flex; align-items: center; gap: 6px;
    background: var(--surface);
    border: 1px solid var(--border2);
    border-radius: 8px;
    padding: 5px 8px;
    box-shadow: 0 3px 12px rgba(0,0,0,0.22);
    font-size: 11px;
    max-width: 92%;
}
.vcut-tb-title { font-weight: 700; color: var(--accent); flex-shrink: 0; }
.vcut-tb-status {
    color: var(--text2);
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px;
    max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.vcut-tb-btn {
    border: 1px solid var(--border2);
    background: var(--surface2);
    color: var(--text);
    border-radius: 5px;
    padding: 3px 8px;
    font-size: 10.5px; font-weight: 600;
    cursor: pointer;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.vcut-tb-btn:hover:not(:disabled) { background: var(--accent); color: #fff; border-color: var(--accent); }
.vcut-tb-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.vcut-tb-btn--close { color: var(--text2); padding: 3px 7px; }
.vcut-tb-btn--close:hover { background: #ef4444; color: #fff; border-color: #ef4444; }

/* ══════════════════════════════════════════════════════════════════════════
   MODAL HASIL VCUT
   ══════════════════════════════════════════════════════════════════════════ */
.vcut-modal-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.55);
    backdrop-filter: blur(2px);
    z-index: 12000;
    display: flex; align-items: center; justify-content: center;
    padding: 20px;
}
.vcut-modal {
    background: var(--surface);
    border: 1px solid var(--border2);
    border-radius: 12px;
    box-shadow: 0 12px 48px rgba(0,0,0,0.4);
    width: min(900px, 96vw);
    max-height: 92vh;
    display: flex; flex-direction: column;
    overflow: hidden;
}
.vcut-modal-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
    background: var(--surface2);
}
.vcut-modal-title { font-weight: 700; font-size: 13px; color: var(--text); }
.vcut-modal-close {
    border: none; background: transparent; color: var(--text2);
    font-size: 16px; cursor: pointer; padding: 2px 6px; border-radius: 5px;
}
.vcut-modal-close:hover { background: #ef4444; color: #fff; }
.vcut-modal-body {
    display: flex; gap: 14px; padding: 14px;
    overflow: auto;
}
.vcut-modal-img-wrap {
    flex: 1 1 auto; min-width: 0;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    padding: 6px;
}
.vcut-modal-img { max-width: 100%; max-height: 64vh; object-fit: contain; }
.vcut-modal-meta {
    flex: 0 0 230px;
    display: flex; flex-direction: column; gap: 4px;
    font-size: 11px;
}
.vcut-meta-head { font-weight: 700; color: var(--accent); margin-bottom: 2px; }
.vcut-meta-row {
    display: flex; justify-content: space-between; gap: 8px;
    padding: 3px 0; border-bottom: 1px dashed var(--border);
}
.vcut-meta-row span:first-child { color: var(--text2); }
.vcut-meta-row span:last-child {
    color: var(--text); font-family: 'IBM Plex Mono', monospace;
    text-align: right; word-break: break-word;
}
.vcut-modal-dl {
    margin-top: 8px; text-align: center;
    background: var(--accent); color: #fff;
    border-radius: 6px; padding: 6px; text-decoration: none;
    font-weight: 600; font-size: 11px;
}
.vcut-modal-dl:hover { filter: brightness(1.08); }
@media (max-width: 640px) {
    .vcut-modal-body { flex-direction: column; }
    .vcut-modal-meta { flex-basis: auto; }
}

/* ── VCUT: indikator proses generate + guard kotak zoom ─────────────────────── */
.vcut-spinner {
    display: inline-block;
    width: 11px; height: 11px;
    border: 2px solid rgba(255,255,255,0.35);
    border-top-color: #fff;
    border-radius: 50%;
    vertical-align: -2px;
    animation: vcut-spin 0.7s linear infinite;
}
@keyframes vcut-spin { to { transform: rotate(360deg); } }
.vcut-toolbar--busy { box-shadow: 0 0 0 2px var(--accent), 0 3px 12px rgba(0,0,0,0.25); }
.vcut-tb-status--busy { color: var(--accent); font-weight: 700; }

/* Defensif: pastikan rubber-band box-zoom Leaflet tidak tampil saat mode gambar
   VCUT aktif (box-zoom juga sudah dinonaktifkan secara programatik). */
.vcut-draw-cursor .leaflet-zoom-box { display: none !important; }

/* ── Hilangkan focus ring/outline browser pada path SVG GeoJSON Leaflet ───────
   Saat fitur GeoJSON (boundary, upload, dll) diklik, browser menampilkan kotak
   outline fokus di sekeliling bounding-box path. Hilangkan outline tanpa
   mengganggu interaktivitas (click/hover/popup/tooltip tetap berfungsi). */
.leaflet-interactive:focus,
.leaflet-interactive:focus-visible {
    outline: none !important;
}
.leaflet-container svg path:focus,
.leaflet-container svg path:focus-visible,
.leaflet-container svg g:focus {
    outline: none !important;
}
.leaflet-container:focus,
.leaflet-pane:focus { outline: none !important; }

/* ── VCUT modal: notice kosong + tombol toggle sumber data ───────────────────── */
.vcut-modal-notice {
    margin-top: 8px;
    padding: 8px 10px;
    border-radius: 6px;
    background: rgba(255, 176, 0, 0.12);
    border: 1px solid rgba(255, 176, 0, 0.45);
    color: #8a5a00;
    font-size: 12px;
    line-height: 1.4;
}
.vcut-modal-toggle {
    display: block;
    width: 100%;
    margin: 4px 0 8px;
    padding: 8px 10px;
    border-radius: 6px;
    border: 1px solid var(--accent, #2f6fed);
    background: transparent;
    color: var(--accent, #2f6fed);
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s, color .15s;
}
.vcut-modal-toggle:hover:not(:disabled) { background: var(--accent, #2f6fed); color: #fff; }
.vcut-modal-toggle:disabled { opacity: .6; cursor: default; }

/* ═══════════════════════════════════════════════════════════════════════════
   MODE DISPLAY PUBLIK (Fase 4)
   Menyembunyikan seluruh chrome/kontrol operasional; hanya menampilkan peta +
   window (split) berisi produk yang ditetapkan admin. Kelas .display-mode
   dipasang pada <html>.
   ═══════════════════════════════════════════════════════════════════════════ */
/* Header TETAP tampil di display, hanya kontrol interaktif yang disembunyikan. */
.display-mode #sidebar,
.display-mode #sidebar-toggle,
.display-mode #statusbar,
.display-mode #timeline,
.display-mode #admin-ws-bar,
.display-mode #account-card {
    display: none !important;
}
.display-mode #header .split-btns,
.display-mode #header .data-info-wrap,
.display-mode #header #data-info-btn,
.display-mode #header #preset-manager-btn,
.display-mode #header #theme-toggle,
.display-mode #header #acct-wrap,
.display-mode #header #acct-btn { display: none !important; }

/* ── LAYAR STATUS DISPLAY (config kosong / user nonaktif) ────────────────────── */
#dwv-state-overlay { display: none; }
#dwv-state-overlay.dwv-state-empty,
#dwv-state-overlay.dwv-state-deactivated,
#dwv-state-overlay.dwv-state-unavailable {
    display: flex; align-items: center; justify-content: center;
    position: fixed; inset: 0;
    background: var(--bg);
}
#dwv-state-overlay.dwv-state-empty        { z-index: 900; }    /* header tetap di atas */
#dwv-state-overlay.dwv-state-deactivated  { z-index: 3000; }   /* menutupi header */
#dwv-state-overlay.dwv-state-unavailable  { z-index: 3000; }   /* menutupi header */
.dwv-state-inner { display: flex; flex-direction: column; align-items: center; gap: 22px; text-align: center; padding: 24px; }
.dwv-state-logo { object-fit: contain; display: block; }
#dwv-state-overlay.dwv-state-empty .dwv-state-logo       { width: 132px; height: 132px; opacity: .95; }
#dwv-state-overlay.dwv-state-deactivated .dwv-state-logo { width: min(40vmin, 340px); height: min(40vmin, 340px); }
#dwv-state-overlay.dwv-state-unavailable .dwv-state-logo { width: min(18vmin, 150px); height: min(18vmin, 150px); }
.dwv-state-text { font-weight: 700; color: var(--text2); }
#dwv-state-overlay.dwv-state-empty .dwv-state-text       { font-size: 30px; letter-spacing: 5px; }
#dwv-state-overlay.dwv-state-deactivated .dwv-state-text { font-size: 50px; letter-spacing: 9px; color: var(--text); }
#dwv-state-overlay.dwv-state-unavailable .dwv-state-text { font-size: 34px; letter-spacing: 7px; color: var(--text); }
.dwv-state-sub { display: none; }
#dwv-state-overlay.dwv-state-unavailable .dwv-state-sub {
    display: block; margin-top: -8px;
    font-size: 18px; font-weight: 500; letter-spacing: 3px;
    text-transform: uppercase; color: var(--text2); opacity: .85;
}
/* User nonaktif / URL dicabut → sembunyikan header sepenuhnya. */
.display-deactivated #header,
.display-unavailable #header { display: none !important; }

/* Grafik hujan tersembunyi kecuali diaktifkan admin (display-rain). */
.display-mode:not(.display-rain) #rcs-sidebar,
.display-mode:not(.display-rain) #rcs-toggle,
.display-mode:not(.display-rain) #rcs-open-tab { display: none !important; }
.display-mode.display-rain #rcs-toggle,
.display-mode.display-rain #rcs-open-tab,
.display-mode.display-rain #rcs-collapse,
.display-mode.display-rain #rcs-settings-btn { display: none !important; }

/* Layout display memakai flex ALAMI (#body row: map-wrap flex:1 + rcs sibling),
   sehingga window & bar grafik hujan TIDAK saling menutupi. Tanpa position:fixed. */
.display-mode.display-rain #rcs-sidebar { display: flex !important; }
/* Kiri */
.display-mode.display-rain.rcs-pos-left #rcs-sidebar { order: -1; border-left: none; border-right: 1px solid var(--border); }

/* ── Posisi Atas / Bawah: strip horizontal penuh ── */
/* #body berubah jadi kolom agar sidebar bisa jadi strip atas/bawah */
.display-mode.display-rain.rcs-pos-top #body,
.display-mode.display-rain.rcs-pos-bottom #body { flex-direction: column; }

/* Sidebar horizontal: lebar penuh, tinggi tetap, arah flex ROW (header kiri + list kanan) */
.display-mode.display-rain.rcs-pos-top #rcs-sidebar,
.display-mode.display-rain.rcs-pos-bottom #rcs-sidebar {
    width: 100% !important;
    height: 190px;
    border-left: none;
    flex-direction: row !important;   /* header vertikal di kiri, list scroll di kanan */
    overflow: hidden;
}
.display-mode.display-rain.rcs-pos-top #rcs-sidebar {
    order: -1;
    border-bottom: 1px solid var(--border);
}
.display-mode.display-rain.rcs-pos-bottom #rcs-sidebar {
    order: 1;
    border-top: 1px solid var(--border);
}

/* Header berubah jadi kolom vertikal di sisi kiri strip */
.display-mode.display-rain.rcs-pos-top .rcs-header,
.display-mode.display-rain.rcs-pos-bottom .rcs-header {
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 48px;
    min-width: 48px;
    height: 100%;
    padding: 8px 4px !important;
    border-bottom: none !important;
    border-right: 1px solid var(--border);
    gap: 8px !important;
    flex-shrink: 0;
}
/* Container header-left: flex column normal — icon → teks → badge dari atas ke bawah */
.display-mode.display-rain.rcs-pos-top .rcs-header-left,
.display-mode.display-rain.rcs-pos-bottom .rcs-header-left {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 6px !important;
    writing-mode: horizontal-tb !important;  /* reset: tidak mewarisi writing-mode */
    transform: none !important;
    min-width: 0;
    flex: 1;
    width: 100%;
}
/* Icon hujan: tampil normal, horizontal */
.display-mode.display-rain.rcs-pos-top .rcs-header-icon,
.display-mode.display-rain.rcs-pos-bottom .rcs-header-icon {
    writing-mode: horizontal-tb !important;
    transform: none !important;
    font-size: 16px;
    align-self: center;
    flex-shrink: 0;
}
/* Teks "Grafik Hujan": vertikal, terbaca bawah→atas */
.display-mode.display-rain.rcs-pos-top .rcs-header-title,
.display-mode.display-rain.rcs-pos-bottom .rcs-header-title {
    writing-mode: vertical-rl !important;
    transform: rotate(180deg) !important;
    font-size: 11px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-height: 80px;
    align-self: center;
}
/* Badge angka: horizontal, tampil normal di bawah teks */
.display-mode.display-rain.rcs-pos-top .rcs-header .rcs-rain-badge,
.display-mode.display-rain.rcs-pos-bottom .rcs-header .rcs-rain-badge {
    writing-mode: horizontal-tb !important;
    transform: none !important;
    align-self: center;
    margin-top: 2px;
    flex-shrink: 0;
}
/* Tombol audio tetap muncul tapi kecil */
.display-mode.display-rain.rcs-pos-top .rcs-header-actions,
.display-mode.display-rain.rcs-pos-bottom .rcs-header-actions {
    flex-direction: column !important;
    gap: 4px !important;
    flex-shrink: 0;
}

/* List grafik: horizontal scroll dari kiri ke kanan, mengisi sisa lebar */
.display-mode.display-rain.rcs-pos-top .rcs-list,
.display-mode.display-rain.rcs-pos-bottom .rcs-list {
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch;
    flex: 1;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding: 6px 8px;
    gap: 0;
    scroll-snap-type: none !important;   /* mulus untuk animasi ping-pong otomatis */
    scroll-behavior: auto;
    /* sembunyikan scrollbar (estetika display publik) */
    scrollbar-width: none;
}
.display-mode.display-rain.rcs-pos-top .rcs-list::-webkit-scrollbar,
.display-mode.display-rain.rcs-pos-bottom .rcs-list::-webkit-scrollbar { display: none; }

/* Item grafik: lebar tetap, tanpa border bawah, dengan border kanan sebagai pemisah */
.display-mode.display-rain.rcs-pos-top .rcs-item,
.display-mode.display-rain.rcs-pos-bottom .rcs-item {
    flex: 0 0 auto;
    width: 280px;
    min-width: 280px;
    height: 100%;
    border-bottom: none !important;
    border-right: 1px solid var(--border);
    margin-bottom: 0;
    scroll-snap-align: none;
    display: flex;
    flex-direction: column;
    padding: 6px 8px 4px;
    box-sizing: border-box;
}
/* Chart wrap mengisi sisa tinggi item secara proporsional */
.display-mode.display-rain.rcs-pos-top .rcs-chart-wrap,
.display-mode.display-rain.rcs-pos-bottom .rcs-chart-wrap {
    flex: 1;
    height: auto !important;
    min-height: 0;
}
/* Highlight hujan: garis atas/bawah, bukan kiri */
.display-mode.display-rain.rcs-pos-top .rcs-item.rcs-item-raining,
.display-mode.display-rain.rcs-pos-bottom .rcs-item.rcs-item-raining {
    border-top: 2px solid var(--red, #ef4444) !important;
    border-left: none;
    padding-left: 8px;
    padding-top: 4px;
}

/* Display: nonaktifkan unduh gambar pada modal grafik hujan. */
.display-mode #rcs-modal-download { display: none !important; }

/* Display: window bersih — sembunyikan panel layer (win-lp) & tombol VCUT.
   Karena pemicu VCUT (win-lp-vcut) disembunyikan, fitur VCUT efektif nonaktif. */
.display-mode .win-lp,
.display-mode .win-lp-vcut { display: none !important; }
.display-mode #map { width: 100% !important; height: 100% !important; }

/* Nonaktifkan interaksi pemilihan/scroll yang tak relevan di layar publik */
.display-mode { overflow: hidden !important; }

/* ── Kartu akun di sidebar (Fase 5): info user + aksi admin + logout ───────── */
#account-card {
    margin: 10px 12px 2px;
    padding: 10px 12px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
}
#account-card .acct-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 8px; margin-bottom: 9px;
}
#account-card .acct-user {
    font-size: 12.5px; font-weight: 600; color: var(--text);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#account-card .acct-role {
    flex: 0 0 auto; font-size: 9.5px; font-weight: 700; letter-spacing: .4px;
    text-transform: uppercase; padding: 2px 7px; border-radius: 10px;
    background: var(--accent-soft); color: var(--accent);
}
#account-card .acct-actions { display: flex; flex-direction: column; gap: 6px; }
#account-card .acct-btn {
    display: block; width: 100%; text-align: left; box-sizing: border-box;
    font: 500 12px/1.2 inherit; padding: 8px 10px;
    border: 1px solid var(--border); border-radius: var(--radius);
    background: var(--bg); color: var(--text); cursor: pointer; text-decoration: none;
    transition: background .15s, border-color .15s, color .15s;
}
#account-card .acct-btn:hover { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
#account-card .acct-logout { color: var(--red); }
#account-card .acct-logout:hover { background: var(--red-bg); border-color: var(--red); color: var(--red); }

/* ── Display mode (Fase 5): sembunyikan pemilih produk & toolbar split ─────── */
.display-mode .win-lp-drawer,
.display-mode .win-lp-catalog,
.display-mode #split-float-toolbar,
.display-mode .split-float-toolbar { display: none !important; }

/* ── Menu akun di header (Fase 5) ───────────────────────────────────────────── */
#acct-wrap { position: relative; display: inline-flex; align-items: center; }
#acct-btn { display: inline-flex; align-items: center; gap: 6px; max-width: 170px; }
#acct-btn .acct-nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 110px; }
.acct-menu {
    position: absolute; top: calc(100% + 8px); right: 0; z-index: 4000; min-width: 226px;
    background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
    box-shadow: var(--shadow-lg); padding: 7px; display: flex; flex-direction: column; gap: 3px;
}
.acct-menu[hidden] { display: none; }
.acct-menu .am-head {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding: 6px 8px 8px; border-bottom: 1px solid var(--border); margin-bottom: 4px;
}
.acct-menu .am-name { font-size: 12.5px; font-weight: 600; color: var(--text);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct-menu .am-role { flex: 0 0 auto; font-size: 9.5px; font-weight: 700; letter-spacing: .4px;
    text-transform: uppercase; padding: 2px 7px; border-radius: 10px; background: var(--accent-soft); color: var(--accent); }
.acct-menu .am-item {
    display: block; width: 100%; text-align: left; box-sizing: border-box; font: 500 12.5px/1.2 inherit;
    padding: 9px 10px; border: none; border-radius: 7px; background: transparent; color: var(--text);
    cursor: pointer; text-decoration: none; transition: background .14s, color .14s;
}
.acct-menu .am-item:hover { background: var(--accent-soft); color: var(--accent); }
.acct-menu .am-sep { height: 1px; background: var(--border); margin: 4px 2px; }
.acct-menu .am-logout { color: var(--red); }
.acct-menu .am-logout:hover { background: var(--red-bg); color: var(--red); }

/* ── Dialog Display Config (Fase 5) ─────────────────────────────────────────── */
#dcfg-modal { position: fixed; inset: 0; z-index: 9500; display: flex; align-items: center;
    justify-content: center; background: rgba(8,14,26,.5); backdrop-filter: blur(3px); padding: 20px; }
#dcfg-modal .dcfg-box { width: 100%; max-width: 520px; max-height: 88vh; display: flex; flex-direction: column;
    background: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow-lg); overflow: hidden; }
#dcfg-modal .dcfg-h { font-size: 15px; font-weight: 600; color: var(--text); padding: 16px 20px; border-bottom: 1px solid var(--border); }
#dcfg-modal .dcfg-body { padding: 16px 20px; overflow-y: auto; }
#dcfg-modal .dcfg-sec { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px;
    color: var(--accent); margin: 18px 0 8px; }
#dcfg-modal .dcfg-lab { display: block; font-size: 12px; color: var(--text); opacity: .8; margin: 8px 0 5px; }
#dcfg-modal .dcfg-hint { font-size: 11px; opacity: .6; margin: 4px 0 8px; line-height: 1.4; }
#dcfg-modal .dcfg-inp { width: 100%; box-sizing: border-box; font: 400 13.5px/1.2 inherit; padding: 9px 11px;
    border: 1px solid var(--border); border-radius: 8px; background: var(--bg); color: var(--text); }
#dcfg-modal .dcfg-inp:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
#dcfg-modal .dcfg-check { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text); margin: 8px 0; cursor: pointer; }
#dcfg-modal .dcfg-chips { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; margin: 4px 0 2px; }
#dcfg-modal .dcfg-chip { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--text); padding: 7px 9px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); cursor: pointer; }
#dcfg-modal .dcfg-chip.on { border-color: var(--accent); background: var(--accent-soft); }
#dcfg-modal .dcfg-bulk { display: flex; gap: 6px; margin: 2px 0 8px; }
#dcfg-modal .dcfg-mini { font: 600 11.5px/1 inherit; padding: 6px 12px; border-radius: 7px; border: 1px solid var(--accent); background: var(--accent); color: #fff; cursor: pointer; }
#dcfg-modal .dcfg-mini.ghost { background: transparent; color: var(--text); border-color: var(--border); }
#dcfg-modal .dcfg-linkrow { display: flex; justify-content: center; margin: 12px 0; }
#dcfg-modal .dcfg-link { font: 600 11.5px/1 inherit; padding: 7px 13px; border-radius: 999px; border: 1px solid var(--border); background: var(--bg); color: var(--muted); cursor: pointer; }
#dcfg-modal .dcfg-link.on { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
#dcfg-modal .dcfg-wins { display: flex; flex-direction: column; gap: 8px; }
#dcfg-modal .dcfg-win { border: 1px solid var(--border); border-radius: 9px; padding: 10px 12px; background: var(--bg); }
#dcfg-modal .dcfg-win-h { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
#dcfg-modal .dcfg-win-h b { font-size: 12.5px; color: var(--text); }
#dcfg-modal .dcfg-win-p { font-size: 11px; color: var(--text); opacity: .55; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 60%; }
#dcfg-modal .dcfg-flags { display: flex; flex-wrap: wrap; gap: 14px; }
#dcfg-modal .dcfg-flag { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text); cursor: pointer; }
#dcfg-modal .dcfg-result { margin-top:12px; padding:12px; border:1px solid var(--border); border-radius:9px; background:var(--accent-soft, var(--bg)); }
.dcfg-url { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:11.5px; word-break:break-all; background:var(--bg); border:1px solid var(--border); border-radius:7px; padding:8px 10px; margin:6px 0 10px; color:var(--text); }
.dcfg-foot { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 20px; border-top: 1px solid var(--border); }
#dcfg-modal .dcfg-btn { font: 600 12.5px/1 inherit; padding: 10px 18px; border-radius: 8px; cursor: pointer; border: 1px solid var(--border); }
#dcfg-modal .dcfg-btn.ghost { background: var(--bg); color: var(--text); }
#dcfg-modal .dcfg-btn.primary { background: var(--accent); color: #fff; border-color: var(--accent); }
#dcfg-modal .dcfg-btn:disabled { opacity: .6; cursor: progress; }

/* ══ Layer Peralatan Otomatis (station-layer.js) ══════════════════════════════ */
.seq-divicon { background: none !important; border: none !important; }
.seq-marker {
    position: relative; width: 22px; height: 22px;
    display: flex; align-items: center; justify-content: center;
    transform: scale(var(--seq-scale, 1)); transform-origin: center center;
}
.seq-svg { filter: drop-shadow(0 1px 2px rgba(0,0,0,.45)); transition: transform .12s ease; }
.seq-marker:hover .seq-svg { transform: scale(1.2); }

/* Simbol peringatan beranimasi (muncul saat alert.status=true).
   Ukuran fleksibel via --seq-alert-size (window size + zoom); transform marker
   (--seq-scale) tetap ikut mengalikan. Ditambat di ATAS marker, pulse dari bawah. */
.seq-alert {
    position: absolute; left: 50%; bottom: calc(100% - 1px); top: auto;
    width: var(--seq-alert-size, 18px); height: var(--seq-alert-size, 18px);
    transform: translateX(-50%); transform-origin: 50% 100%;
    pointer-events: none; filter: drop-shadow(0 2px 3px rgba(0,0,0,.5));
    animation: seqAlertPulse 1.05s ease-in-out infinite;
    z-index: 2;
}
@keyframes seqAlertPulse {
    0%, 100% { transform: translateX(-50%) scale(1);    opacity: 1;   }
    50%      { transform: translateX(-50%) scale(1.18); opacity: .85; }
}

/* Tooltip nama */
.seq-tip {
    background: var(--surface); color: var(--text);
    border: 1px solid var(--border); border-radius: 6px;
    font: 600 11px/1.2 'IBM Plex Sans', system-ui; padding: 3px 7px;
    box-shadow: var(--shadow);
}
.seq-tip::before { display: none; }

/* Popup data */
.seq-popup .leaflet-popup-content-wrapper {
    background: var(--surface); color: var(--text);
    border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow-lg);
}
.seq-popup .leaflet-popup-content { margin: 0; width: 248px !important; }
.seq-popup .leaflet-popup-tip { background: var(--surface); }
.seq-pop-head {
    display: flex; align-items: center; gap: 7px;
    padding: 8px 11px; border-bottom: 1px solid var(--border);
    border-radius: 10px 10px 0 0; font-size: 13px;
}
.seq-pop-type {
    font: 700 10px/1 'IBM Plex Mono', monospace; letter-spacing: .3px;
    padding: 3px 6px; border-radius: 5px; color: #fff; background: #475569;
}
.seq-pop-ARG  .seq-pop-type, .seq-pop-head.seq-pop-ARG  .seq-pop-type { background: #2563eb; }
.seq-pop-AWS  .seq-pop-type { background: #0891b2; }
.seq-pop-AWSD .seq-pop-type { background: #0d9488; }
.seq-pop-AAWS .seq-pop-type { background: #7c3aed; }
.seq-pop-body { padding: 8px 11px 10px; }
.seq-pop-row {
    display: flex; justify-content: space-between; gap: 12px;
    padding: 3px 0; font-size: 12px; border-bottom: 1px dashed var(--border);
}
.seq-pop-row:last-child { border-bottom: none; }
.seq-pop-row span { color: var(--text2, var(--text3)); }
.seq-pop-row b { color: var(--text); font-weight: 600; }
.seq-cat-chip {
    padding: 2px 9px; border-radius: 10px; font-weight: 800; font-size: 11.5px;
    letter-spacing: .2px; line-height: 1.5;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.18);
}
.seq-pop-sub { margin-top: 6px; font-size: 11px; color: var(--text3); font-style: italic; }
.seq-pop-empty { font-size: 12px; color: var(--text3); padding: 4px 0 8px; }
.seq-pop-alert {
    margin-top: 8px; padding: 5px 8px; border-radius: 6px; font-weight: 700; font-size: 12px;
    color: #fff; background: #ef4444; text-align: center;
    animation: seqAlertBlink 1.1s ease-in-out infinite;
}
@keyframes seqAlertBlink { 0%,100% { opacity: 1; } 50% { opacity: .55; } }

/* Entri toggle "Peralatan Otomatis" — selaras dgn item katalog (.win-lp-cat-*) */
.lp-eq-row {
    display: flex; align-items: center; gap: 6px;
    padding: 4px 8px; cursor: pointer; border-radius: 6px;
    box-sizing: border-box; width: 100%; min-width: 0;
    transition: background .12s;
}
.lp-eq-row:hover { background: var(--surface2, rgba(127,127,127,.08)); }
.lp-eq-shapes { display: inline-flex; gap: 2px; flex-shrink: 0; align-items: center; }
.lp-eq-shapes svg { display: block; width: 12px; height: 12px; }
.lp-eq-label {
    flex: 1 1 auto; min-width: 0;
    font-size: 10.5px; font-weight: 500; line-height: 1.2; color: var(--text);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lp-eq-sub {
    display: block; font-size: 9px; font-weight: 400; color: var(--text3);
    line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lp-eq-row .tog-wrap { flex-shrink: 0; }

/* Modal info peralatan (dipakai saat window terlalu kecil untuk popup) */
.seq-modal {
    position: fixed; inset: 0; z-index: 12000;
    display: flex; align-items: center; justify-content: center;
}
.seq-modal-backdrop {
    position: absolute; inset: 0; background: rgba(0,0,0,.45);
    -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
.seq-modal-box {
    position: relative; z-index: 1; width: min(340px, 92vw); max-height: 86vh;
    overflow: auto; background: var(--surface); border: 1px solid var(--border);
    border-radius: 12px; box-shadow: var(--shadow-lg);
    animation: seqModalIn .14s ease;
}
.seq-modal-box .seq-pop-head { border-radius: 12px 12px 0 0; padding-right: 38px; }
.seq-modal-close {
    position: absolute; top: 7px; right: 9px; z-index: 2;
    width: 24px; height: 24px; padding: 0; background: none; border: none;
    font-size: 20px; line-height: 1; color: var(--text3); cursor: pointer; border-radius: 6px;
}
.seq-modal-close:hover { color: var(--text); background: var(--surface2, rgba(127,127,127,.12)); }
@keyframes seqModalIn {
    from { opacity: 0; transform: translateY(8px) scale(.98); }
    to   { opacity: 1; transform: none; }
}

/* ── Badge "jam data" untuk mode EMBED (mirror #tl-time) ──────────────────── */
.embed-time-badge {
  position: fixed; top: 10px; left: 50%; transform: translateX(-50%);
  z-index: 1200; display: flex; align-items: center; gap: 6px;
  padding: 5px 12px; border-radius: 999px;
  background: rgba(11, 22, 34, .82); color: #fff;
  font: 600 13px/1 'IBM Plex Sans', system-ui, sans-serif; letter-spacing: .3px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .35); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  pointer-events: none; white-space: nowrap;
}
.embed-time-badge .tl-time-icon { font-size: 13px; }
.embed-time-badge .tl-time-val { color: #fff; font-weight: 700; }
.embed-time-badge .tl-time-utc { color: rgba(255,255,255,.72); font-size: 10px; font-weight: 500; margin-left: 2px; }
.embed-time-badge .tl-time-rows { display: flex; flex-direction: column; gap: 1px; }
.embed-time-badge .tl-time-row { display: flex; align-items: center; gap: 5px; }

/* ── Spinner generik utk aksi async yang MENGIRIM EMAIL (uji SMTP, terbitkan
   token aktivasi, reset password klien, registrasi portal, lupa password),
   supaya tombol tidak terlihat "diam" selama menunggu balasan server.
   Memakai currentColor agar cocok di tombol apa pun (primer/ghost/danger). ── */
.btn-loading-spin {
    display: inline-block;
    width: 12px; height: 12px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    opacity: .85;
    vertical-align: -1px;
    margin-right: 7px;
    animation: btn-loading-spin-rot .7s linear infinite;
}
@keyframes btn-loading-spin-rot { to { transform: rotate(360deg); } }
.btn.ico .btn-loading-spin { margin-right: 0; width: 13px; height: 13px; }

/* ── Kolom "Surat Akses" pada tabel klien (console admin) ─────────────────── */
.acc-letter-badge {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 10.5px; font-weight: 600; letter-spacing: .2px;
    padding: 3px 8px; border-radius: 999px;
    background: rgba(37,99,235,.12); color: var(--acc, #2563eb);
    white-space: nowrap;
}
.acc-letter-badge.none { background: transparent; color: var(--muted, #94a3b8); font-weight: 500; }

/* ── Blok unggah surat di layar aktivasi login.php (login pertama client) ── */
.acc-upload-box {
    margin: 14px 0 4px; padding: 12px 13px; border-radius: 10px;
    border: 1px dashed var(--inpbd, #dde4ee); background: var(--inp, #f7f9fc);
}
.acc-upload-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.acc-upload-row input[type="file"] { flex: 1 1 auto; min-width: 0; font-size: 12.5px; padding: 0; border: 0; background: transparent; }
.acc-upload-status { font-size: 11.5px; margin-top: 8px; }
.acc-upload-status.ok { color: #059669; }
.acc-upload-status.err { color: #dc2626; }