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

:root,[data-theme="dark"]{
  --bg:#080b10;--surface:#0f1520;--surface2:#161e2c;--border:#1e2a3a;
  --border-hi:#2a3a50;
  --glass-hi:rgba(15,21,32,.85);
  --accent-bg:rgba(74,144,217,.08);--accent-bdr:rgba(74,144,217,.3);
  --shadow-float:0 8px 32px rgba(0,0,0,.5);
  --red:#ef4444;--red-glow:rgba(239,68,68,.08);
  --t-fast:.15s ease;--t-med:.25s ease;
  --accent:#4A90D9;--accent2:#ff6b35;--accent3:#a78bfa;
  --accent-glow:rgba(74,144,217,.18);--accent2-glow:rgba(255,107,53,.14);--accent3-glow:rgba(167,139,250,.14);
  --text:#f1f5f9;--muted:#4a6080;--muted-hi:#6b8099;
  --green:#22c55e;--yellow:#eab308;--red:#ef4444;
  --green-glow:rgba(34,197,94,.14);--red-glow:rgba(239,68,68,.14);
  --shadow-txt:0 1px 6px rgba(0,0,0,.95),0 0 12px rgba(0,0,0,.8);
  --shadow-float:0 8px 32px rgba(0,0,0,.7),0 2px 8px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.04);
  --shadow-panel:0 -8px 40px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.04);
  --shadow-hex:drop-shadow(0 2px 4px rgba(0,0,0,.9)) drop-shadow(0 0 8px rgba(0,0,0,.7));
  --glass:rgba(8,11,16,.88);
  --glass-hi:rgba(15,21,32,.92);
  --gradient-surface:linear-gradient(145deg,#0f1520,#0c1219);
  --radius:8px;--radius-sm:5px;--radius-lg:12px;
  --mono:ui-monospace,'Cascadia Code','Fira Mono',monospace;--sans:system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --leaflet-bg:#080b10;
  --transition-fast:.12s cubic-bezier(.4,0,.2,1);
  --transition-med:.22s cubic-bezier(.4,0,.2,1);
  --transition-slow:.35s cubic-bezier(.4,0,.2,1);
}

[data-theme="bright"]{
  --bg:#f0f4f8;--surface:#ffffff;--surface2:#edf2f7;--border:#d1dbe8;
  --border-hi:#b8c8da;
  --glass-hi:rgba(255,255,255,.85);
  --accent-bg:rgba(19,81,180,.06);--accent-bdr:rgba(19,81,180,.25);
  --shadow-float:0 8px 32px rgba(0,0,0,.15);
  --red:#dc2626;--red-glow:rgba(220,38,38,.06);
  --t-fast:.15s ease;--t-med:.25s ease;
  --accent:#1351B4;--accent2:#ea580c;--accent3:#7c3aed;
  --accent-glow:rgba(19,81,180,.12);--accent2-glow:rgba(234,88,12,.1);--accent3-glow:rgba(124,58,237,.1);
  --text:#0f172a;--muted:#64748b;--muted-hi:#475569;
  --green:#16a34a;--yellow:#ca8a04;--red:#dc2626;
  --green-glow:rgba(22,163,74,.1);--red-glow:rgba(220,38,38,.1);
  --shadow-txt:0 1px 3px rgba(255,255,255,.9),0 0 6px rgba(255,255,255,.7);
  --shadow-float:0 4px 20px rgba(0,0,0,.12),0 1px 4px rgba(0,0,0,.08),0 0 0 1px rgba(0,0,0,.06);
  --shadow-panel:0 -4px 24px rgba(0,0,0,.1),0 0 0 1px rgba(0,0,0,.06);
  --shadow-hex:drop-shadow(0 1px 4px rgba(0,0,0,.45)) drop-shadow(0 0 8px rgba(0,0,0,.3));
  --glass:rgba(240,244,248,.92);
  --glass-hi:rgba(255,255,255,.95);
  --gradient-surface:linear-gradient(145deg,#ffffff,#f5f8fc);
  --radius:8px;--radius-sm:5px;--radius-lg:12px;
  --mono:ui-monospace,'Cascadia Code','Fira Mono',monospace;--sans:system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --leaflet-bg:#e8eef4;
  --transition-fast:.12s cubic-bezier(.4,0,.2,1);
  --transition-med:.22s cubic-bezier(.4,0,.2,1);
  --transition-slow:.35s cubic-bezier(.4,0,.2,1);
}

html,body{height:100%;background:var(--bg);color:var(--text);font-family:var(--sans);overflow:hidden;-webkit-tap-highlight-color:transparent;transition:background var(--transition-slow),color var(--transition-slow);}
.app{position:relative;width:100%;height:100vh;height:100dvh;overflow:hidden}
#map{position:absolute;inset:0;width:100%;height:100%;z-index:1}

.float-logo{position:absolute;top:12px;left:12px;z-index:600;display:flex;align-items:center;gap:8px;background:var(--glass-hi);backdrop-filter:blur(16px) saturate(180%);border:1px solid var(--border-hi);border-radius:var(--radius);padding:7px 12px;box-shadow:var(--shadow-float);transition:border-color var(--transition-fast),box-shadow var(--transition-fast);}
.float-logo:hover{border-color:rgba(0,229,255,.3);box-shadow:var(--shadow-float),0 0 0 1px rgba(0,229,255,.08);}
.logo-mark{font-family:var(--sans);font-size:13px;color:var(--accent);letter-spacing:2px;white-space:nowrap;font-weight:700;}
.logo-sep{width:1px;height:18px;background:var(--border-hi);flex-shrink:0}
.logo-sub{font-size:9px;color:var(--muted-hi);letter-spacing:.06em;white-space:nowrap;text-transform:uppercase;font-family:var(--sans);}
.logo-user{font-size:9px;color:var(--text);font-family:var(--sans);white-space:nowrap;max-width:80px;overflow:hidden;text-overflow:ellipsis;}
.logout-btn{font-size:14px;color:var(--muted);text-decoration:none;line-height:1;padding:2px 2px;border-radius:3px;transition:color var(--transition-fast);flex-shrink:0;}
.logout-btn:hover{color:var(--red);}

.float-controls{position:absolute;top:12px;z-index:600;display:flex;flex-direction:row;align-items:center;gap:6px;left:12px;flex-wrap:nowrap;}
.ctrl-pill{display:flex;align-items:center;gap:5px;background:var(--glass-hi);backdrop-filter:blur(16px) saturate(160%);border:1px solid var(--border-hi);border-radius:var(--radius);padding:5px 10px;box-shadow:var(--shadow-float);font-size:11px;color:var(--muted-hi);white-space:nowrap;transition:border-color var(--transition-fast);}
.ctrl-pill:hover{border-color:var(--accent);}
.ctrl-pill select{background:transparent;border:none;color:var(--text);font-size:11px;cursor:pointer;outline:none;font-family:var(--sans);}
.ctrl-pill select option{background:var(--surface);color:var(--text)}

.tog{position:relative;width:34px;height:20px;flex-shrink:0}
.tog input{opacity:0;width:0;height:0}
.tog-s{position:absolute;inset:0;background:var(--border);border-radius:10px;transition:background var(--transition-med),border var(--transition-med);cursor:pointer;border:1px solid transparent;}
.tog-s:before{content:'';position:absolute;width:14px;height:14px;left:3px;top:2px;background:var(--muted-hi);border-radius:50%;transition:transform var(--transition-med),background var(--transition-fast);}
input:checked+.tog-s{background:rgba(74,144,217,.2);border-color:var(--accent);box-shadow:0 0 10px var(--accent-glow);}
input:checked+.tog-s:before{transform:translateX(14px);background:var(--accent);}
[data-theme="bright"] input:checked+.tog-s{background:rgba(2,132,199,.15);border-color:var(--accent)}
[data-theme="bright"] input:checked+.tog-s:before{background:var(--accent)}

.float-selector{display:none}

/* ── Filter wilayah ── */
.filter-wrap{position:relative}
.filter-trigger{
  background:var(--glass-hi);backdrop-filter:blur(16px) saturate(160%);
  border:1px solid var(--border-hi);border-radius:var(--radius);
  padding:4px 10px;display:flex;align-items:center;gap:5px;
  cursor:pointer;font-size:11px;color:var(--text);transition:border var(--transition-fast),box-shadow var(--transition-fast);
  box-shadow:var(--shadow-float);min-width:110px;max-width:200px;height:32px;
}
.filter-trigger:hover,.filter-trigger.open{border-color:var(--accent);box-shadow:var(--shadow-float),0 0 10px var(--accent-glow);}
.filter-trigger.active{border-color:var(--accent2);color:var(--accent2);box-shadow:var(--shadow-float),0 0 10px var(--accent2-glow);}
.filter-label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.filter-caret{font-size:11px;color:var(--muted);transition:transform .2s;flex-shrink:0}
.filter-caret.open{transform:rotate(180deg)}
.filter-clear{font-size:12px;color:var(--muted);cursor:pointer;transition:color .12s;flex-shrink:0;display:none;line-height:1;padding:0 1px}
.filter-trigger.active .filter-clear{display:block}
.filter-clear:hover{color:var(--red)}
.filter-dropdown{
  position:fixed;
  background:var(--glass-hi);border:1px solid var(--border-hi);border-radius:var(--radius);
  z-index:1200;display:none;flex-direction:column;
  box-shadow:0 16px 48px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.04);max-height:min(320px, 60vh);overflow:hidden;backdrop-filter:blur(20px) saturate(160%);
}
.filter-dropdown.open{display:flex;animation:fadeInUp .15s ease forwards;}
.filter-search-wrap{padding:8px 10px;border-bottom:1px solid var(--border);flex-shrink:0}
.filter-search-input{
  width:100%;background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-sm);
  color:var(--text);font-size:12px;padding:6px 10px;outline:none;
  font-family:var(--sans);transition:border-color var(--transition-fast),box-shadow var(--transition-fast);
}
.filter-search-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow);}
.filter-search-input::placeholder{color:var(--muted)}
.filter-list{overflow-y:auto;overscroll-behavior:contain;flex:1}
.filter-item{
  display:flex;align-items:center;gap:8px;padding:8px 12px;
  cursor:pointer;font-size:12px;border-bottom:1px solid var(--border);transition:background var(--transition-fast);
}
.filter-item:last-child{border-bottom:none}
.filter-item:hover{background:var(--border);}
.filter-item.selected{background:var(--accent-glow);}
[data-theme="bright"] .filter-item.selected{background:rgba(2,132,199,.06)}
.filter-check{
  width:15px;height:15px;border:1.5px solid var(--border-hi);border-radius:3px;
  flex-shrink:0;display:flex;align-items:center;justify-content:center;transition:background var(--transition-fast),border-color var(--transition-fast);
}
.filter-item.selected .filter-check{background:var(--accent);border-color:var(--accent);box-shadow:0 0 8px var(--accent-glow);}
.filter-check-mark{color:#000;font-size:10px;font-weight:700;display:none}
[data-theme="dark"] .filter-check-mark{color:#000}
.filter-item.selected .filter-check-mark{display:block}
.filter-item-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.filter-item-count{font-family:var(--mono);font-size:10px;color:var(--muted);flex-shrink:0;background:var(--border);padding:1px 6px;border-radius:3px;}
.filter-no-result{padding:16px 12px;text-align:center;color:var(--muted);font-size:12px}

.ms-trigger{background:var(--glass-hi);backdrop-filter:blur(16px) saturate(160%);border:1px solid var(--border-hi);border-radius:var(--radius);padding:5px 10px;display:flex;align-items:center;gap:5px;cursor:pointer;font-size:11px;color:var(--text);transition:border var(--transition-fast),box-shadow var(--transition-fast);box-shadow:var(--shadow-float);min-width:120px;max-width:220px;}
.ms-trigger:hover,.ms-trigger.open{border-color:var(--accent);box-shadow:var(--shadow-float),0 0 10px var(--accent-glow);}
.chips-area{flex:1;display:flex;gap:4px;flex-wrap:nowrap;overflow:hidden;min-width:0}
.chip{font-size:10px;font-family:var(--mono);padding:2px 8px;border-radius:4px;border:1px solid;white-space:nowrap;flex-shrink:0;letter-spacing:.3px;}
.chip-caret{color:var(--muted);font-size:12px;transition:transform var(--transition-med);flex-shrink:0;margin-left:auto}
.chip-caret.open{transform:rotate(180deg)}
.ms-dropdown{margin-top:4px;background:var(--glass-hi);border:1px solid var(--border-hi);border-radius:var(--radius);z-index:1300;max-height:300px;display:none;box-shadow:0 16px 48px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.04);overflow:hidden;display:none;flex-direction:column;backdrop-filter:blur(20px) saturate(160%);}
.ms-dropdown.open{display:flex;animation:fadeInUp .15s ease forwards;}
.ms-search-wrap{padding:8px 10px;border-bottom:1px solid var(--border);flex-shrink:0}
.ms-search-input{width:100%;background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text);font-size:12px;padding:6px 10px;outline:none;font-family:var(--sans);transition:border-color var(--transition-fast),box-shadow var(--transition-fast);}
.ms-search-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow);}
.ms-search-input::placeholder{color:var(--muted)}
.ms-list-scroll{overflow-y:auto;overscroll-behavior:contain;max-height:250px}
.ms-no-result{padding:16px 12px;text-align:center;color:var(--muted);font-size:12px}
.ms-item{display:flex;align-items:center;gap:8px;padding:9px 12px;cursor:pointer;font-size:12px;border-bottom:1px solid var(--border);transition:background var(--transition-fast);}
.ms-item:last-child{border-bottom:none}
.ms-item:hover{background:var(--border);}
.ms-item.selected{background:var(--accent-glow);}
[data-theme="bright"] .ms-item.selected{background:rgba(2,132,199,.06)}
.ms-check{width:15px;height:15px;border:1.5px solid var(--border-hi);border-radius:3px;flex-shrink:0;display:flex;align-items:center;justify-content:center;transition:background var(--transition-fast),border-color var(--transition-fast),box-shadow var(--transition-fast);}
.ms-item.selected .ms-check{background:var(--accent);border-color:var(--accent);box-shadow:0 0 8px var(--accent-glow);}
.ms-check-mark{color:#000;font-size:10px;font-weight:700;display:none}
[data-theme="dark"] .ms-check-mark{color:#000}
.ms-item.selected .ms-check-mark{display:block}
.ms-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;box-shadow:0 0 5px currentColor;}
.ms-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;letter-spacing:.1px;}
.ms-count{font-family:var(--mono);font-size:10px;color:var(--muted);flex-shrink:0}
.ms-stats{display:flex;gap:4px;flex-shrink:0}
.ms-stat-chip{font-family:var(--mono);font-size:9px;color:var(--muted-hi);background:var(--border);border:1px solid var(--border-hi);border-radius:3px;padding:2px 6px;white-space:nowrap;letter-spacing:.3px;}

.leaflet-container{background:var(--leaflet-bg)!important;transition:background .25s}
.leaflet-control-zoom a{background:var(--surface)!important;color:var(--text)!important;border-color:var(--border)!important}
.leaflet-control-attribution{background:var(--glass)!important;color:var(--muted)!important;font-size:10px!important;backdrop-filter:blur(6px)!important}
.lf-tooltip{background:var(--glass-hi)!important;border:1px solid var(--border-hi)!important;border-radius:var(--radius)!important;color:var(--text)!important;font-family:var(--sans)!important;font-size:12px!important;padding:7px 12px!important;box-shadow:0 8px 24px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.04)!important;backdrop-filter:blur(16px)!important;}
.lf-tooltip b{color:var(--accent);text-shadow:0 0 12px var(--accent-glow);}
.leaflet-marker-icon svg{filter:var(--shadow-hex)}
.link-count-label{background:rgba(8,11,16,.88);border:1px solid rgba(74,144,217,.25);border-radius:4px;font-family:var(--mono);font-size:10px;font-weight:700;color:rgba(74,144,217,.9);padding:1px 6px;white-space:nowrap;pointer-events:none;transition:opacity var(--transition-fast);line-height:1.4;box-shadow:0 2px 8px rgba(0,0,0,.7),0 0 0 1px rgba(74,144,217,.1);}
[data-theme="bright"] .link-count-label{background:rgba(255,255,255,.92);border-color:rgba(19,81,180,.3);color:rgba(19,81,180,.9);box-shadow:0 2px 6px rgba(0,0,0,.15);}
.hex-skeleton{animation:hex-pulse 1.6s ease-in-out infinite}
@keyframes hex-pulse{0%,100%{opacity:.12}50%{opacity:.32}}
@keyframes spin{to{transform:rotate(360deg)}}
.spinner{width:24px;height:24px;border:2px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin .7s cubic-bezier(.4,0,.6,1) infinite;box-shadow:0 0 12px var(--accent-glow);}
.state-msg{display:flex;align-items:center;justify-content:center;height:100%;color:var(--muted-hi);font-size:13px;flex-direction:column;gap:12px;letter-spacing:.5px;font-family:var(--mono);}

.leaflet-top.leaflet-right{top:0;right:0}
.leaflet-top.leaflet-right .leaflet-control-zoom{margin-top:calc(var(--topbar-h,12px) + 8px)!important;margin-right:10px!important;}
.leaflet-control-zoom{border:none!important;box-shadow:var(--shadow-float)!important}
.leaflet-control-zoom a{width:36px!important;height:36px!important;line-height:36px!important;font-size:18px!important;border-radius:4px!important;background:var(--glass)!important;backdrop-filter:blur(10px)!important;color:var(--text)!important;border:1px solid var(--border)!important;cursor:pointer;transition:background .12s,border-color .15s;}
.leaflet-control-zoom a:hover{background:var(--surface2)!important;border-color:var(--accent)!important;box-shadow:0 0 10px var(--accent-glow)!important;}
.leaflet-control-zoom-in{border-radius:var(--radius-sm) var(--radius-sm) 0 0!important;border-bottom:none!important}
.leaflet-control-zoom-out{border-radius:0 0 var(--radius-sm) var(--radius-sm)!important}
.leaflet-bottom.leaflet-left{bottom:0;left:0}
.leaflet-bottom{padding-bottom:env(safe-area-inset-bottom,0)}

.map-controls{position:absolute;right:10px;z-index:599;display:flex;flex-direction:column;gap:8px;top:calc(var(--topbar-h,12px) + 94px);}
.map-ctrl-btn{width:36px;height:36px;border-radius:var(--radius-sm);background:var(--glass-hi);backdrop-filter:blur(16px) saturate(160%);border:1px solid var(--border-hi);color:var(--accent);font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background var(--transition-fast),border-color var(--transition-fast),box-shadow var(--transition-fast),transform var(--transition-fast);box-shadow:var(--shadow-float);}
.map-ctrl-btn:hover{background:var(--surface2);border-color:var(--accent);box-shadow:var(--shadow-float),0 0 12px var(--accent-glow);transform:translateY(-1px);}
.map-ctrl-btn:active{transform:translateY(0);}

/* ── Search Overlay ── */
#searchOverlay{position:absolute;inset:0;z-index:1100;background:rgba(0,0,0,.65);backdrop-filter:blur(8px);display:none;align-items:flex-start;justify-content:center;padding-top:60px;animation:fadeIn .15s ease;}
#searchOverlay.open{display:flex;}
#searchBox{background:var(--glass-hi);border:1px solid var(--border-hi);border-radius:var(--radius-lg);width:min(520px,90vw);box-shadow:0 16px 60px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.05);overflow:hidden;backdrop-filter:blur(24px) saturate(180%);}
#searchInputWrap{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--border);}
#searchInput{flex:1;background:none;border:none;outline:none;color:var(--text);font-size:15px;font-family:var(--sans);letter-spacing:0;}
#searchInput::placeholder{color:var(--muted);}
#searchCloseBtn{background:none;border:none;color:var(--muted);font-size:18px;cursor:pointer;padding:3px 7px;border-radius:var(--radius-sm);line-height:1;transition:color var(--transition-fast),background var(--transition-fast);}
#searchCloseBtn:hover{color:var(--text);background:var(--border);}
#searchResults{max-height:360px;overflow-y:auto;}
.search-result-item{display:flex;align-items:center;gap:10px;padding:10px 16px;cursor:pointer;border-bottom:1px solid var(--border);transition:background var(--transition-fast);}
.search-result-item:last-child{border-bottom:none;}
.search-result-item:hover,.search-result-item.active{background:var(--border);}
.search-result-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;box-shadow:0 0 6px currentColor;}
.search-result-name{font-size:13px;color:var(--text);font-weight:600;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:.1px;}
.search-result-meta{font-size:10px;color:var(--muted);white-space:nowrap;font-family:var(--mono);}
.search-result-freq{font-size:10px;font-family:var(--mono);color:var(--accent3);white-space:nowrap;background:var(--accent3-glow);padding:1px 6px;border-radius:3px;}
.search-empty{padding:28px;text-align:center;color:var(--muted);font-size:13px;}
#searchFloatBtn{position:absolute;bottom:24px;right:24px;z-index:700;width:44px;height:44px;border-radius:50%;background:var(--glass-hi);backdrop-filter:blur(16px) saturate(160%);border:1px solid var(--border-hi);box-shadow:var(--shadow-float),0 0 14px var(--accent-glow);color:var(--accent);font-size:20px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background var(--transition-fast),border-color var(--transition-fast),transform var(--transition-fast),box-shadow var(--transition-fast);}
#searchFloatBtn:hover{background:var(--surface2);border-color:var(--accent);transform:scale(1.1);box-shadow:var(--shadow-float),0 0 24px var(--accent-glow);}
#searchFloatBtn:active{transform:scale(.96);}
@media(max-width:700px){#searchFloatBtn{bottom:80px;right:14px;width:42px;height:42px;font-size:18px;}}

/* ── Topo Modal ── */
#topoModal{position:absolute;inset:0;z-index:1200;background:rgba(0,0,0,.7);backdrop-filter:blur(10px);display:none;align-items:center;justify-content:center;animation:fadeIn .15s ease;}
#topoModal.open{display:flex;}
#topoBox{background:var(--glass-hi);border:1px solid var(--border-hi);border-radius:var(--radius-lg);width:min(680px,95vw);box-shadow:0 20px 60px rgba(0,0,0,.8),0 0 0 1px rgba(255,255,255,.05);overflow:hidden;display:flex;flex-direction:column;backdrop-filter:blur(24px) saturate(180%);}
#topoHeader{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--border);flex-shrink:0;background:rgba(0,0,0,.15);}
[data-theme="bright"] #topoHeader{background:rgba(0,0,0,.03);}
#topoTitle{flex:1;font-size:13px;font-weight:700;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:.3px;}
#topoCloseBtn{background:none;border:none;color:var(--muted);font-size:18px;cursor:pointer;padding:3px 8px;border-radius:var(--radius-sm);transition:color var(--transition-fast),background var(--transition-fast);}
#topoCloseBtn:hover{color:var(--text);background:var(--border);}
#topoBody{padding:16px;flex:1;min-height:0;}
#topoCanvas{width:100%;border-radius:var(--radius);display:block;}
#topoMeta{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px;}
.topo-chip{background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius-sm);padding:4px 10px;font-size:10px;color:var(--muted);letter-spacing:.2px;}
.topo-chip b{color:var(--text);}
#topoLoading{text-align:center;padding:40px 20px;color:var(--muted);font-size:13px;}
#topoError{text-align:center;padding:32px 20px;color:#ef4444;font-size:13px;}

/* ── Offline banner ── */
#offlineBanner{position:absolute;top:0;left:0;right:0;z-index:2000;background:#ef4444;color:#fff;font-size:12px;font-weight:600;text-align:center;padding:7px 16px;letter-spacing:.4px;display:none;align-items:center;justify-content:center;gap:8px;box-shadow:0 2px 12px rgba(239,68,68,.4);}
#offlineBanner.show{display:flex;}
#offlineBanner.back{background:var(--green);box-shadow:0 2px 12px rgba(34,197,94,.4);}

/* ── Topo btn di panel ── */
.topo-panel-btn{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:6px;width:100%;padding:9px 12px;border:1px solid var(--border-hi);border-radius:var(--radius);background:var(--accent3-glow);color:var(--accent3);font-size:12px;font-weight:600;cursor:pointer;transition:background var(--transition-fast),border-color var(--transition-fast),box-shadow var(--transition-fast);letter-spacing:.3px;}
.topo-panel-btn:hover,.topo-panel-btn:active{background:rgba(167,139,250,.18);border-color:var(--accent3);box-shadow:0 0 16px var(--accent3-glow);}
.compass-btn{color:var(--text)}
.compass-btn:hover{border-color:var(--accent);color:var(--accent);}
.compass-btn.rotated{border-color:var(--accent);color:var(--accent);box-shadow:var(--shadow-float),0 0 12px var(--accent-glow);}
#compassNeedle{display:block;transition:transform .4s cubic-bezier(.4,0,.2,1);}

.loc-popup{position:absolute;right:56px;z-index:600;background:var(--glass-hi);backdrop-filter:blur(20px) saturate(180%);border:1px solid var(--border-hi);border-radius:var(--radius);padding:12px 14px;display:none;flex-direction:column;gap:9px;min-width:230px;top:calc(var(--topbar-h,12px) + 94px);max-height:50vh;overflow-y:auto;box-shadow:0 12px 40px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.04);overscroll-behavior:contain;}
.loc-popup.open{display:flex;animation:fadeInUp .15s ease forwards;}
.loc-popup label{font-size:10px;color:var(--muted-hi);display:flex;flex-direction:column;gap:4px;letter-spacing:.5px;text-transform:uppercase;}
.loc-popup input{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text);font-family:var(--mono);font-size:12px;padding:6px 9px;outline:none;transition:border-color var(--transition-fast),box-shadow var(--transition-fast);}
.loc-popup input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow);}
.loc-popup-btns{display:flex;gap:6px}
.loc-popup-btns button{flex:1;padding:7px;border-radius:var(--radius-sm);font-size:11px;cursor:pointer;border:1px solid var(--border-hi);background:var(--border);color:var(--text);transition:background var(--transition-fast),border-color var(--transition-fast);}
.loc-popup-btns button:hover{background:var(--surface2);border-color:var(--accent);}
.loc-popup-btns button.primary{background:var(--accent);color:#fff;border-color:var(--accent);font-weight:700;box-shadow:0 0 14px var(--accent-glow);}
.loc-popup-btns button.primary:hover{background:var(--accent);opacity:.9;box-shadow:0 0 20px var(--accent-glow);}
[data-theme="bright"] .loc-popup-btns button.primary:hover{background:#0369a1;}

.float-stats{position:absolute;bottom:calc(12px + env(safe-area-inset-bottom,0));left:50%;transform:translateX(-50%);z-index:600;display:flex;align-items:stretch;gap:0;background:var(--glass-hi);backdrop-filter:blur(16px) saturate(180%);border:1px solid var(--border-hi);border-radius:var(--radius);box-shadow:var(--shadow-float);min-width:220px;}
.stat-pill{display:flex;flex-direction:column;align-items:center;flex:1;padding:7px 14px;position:relative;}
.stat-pill+.stat-pill::before{content:'';position:absolute;left:0;top:20%;bottom:20%;width:1px;background:var(--border);}
.sp-val{font-family:var(--mono);font-size:15px;color:var(--accent);font-weight:700;}
.sp-lbl{font-size:8px;color:var(--muted-hi);letter-spacing:.8px;text-transform:uppercase;margin-top:3px}

.float-legend-btn{position:absolute;z-index:600;bottom:calc(60px + env(safe-area-inset-bottom,0));left:50%;transform:translateX(-50%);background:var(--glass-hi);backdrop-filter:blur(16px) saturate(160%);border:1px solid var(--border-hi);border-radius:var(--radius);padding:5px 14px;font-size:11px;color:var(--muted);cursor:pointer;display:flex;align-items:center;gap:6px;box-shadow:var(--shadow-float);white-space:nowrap;transition:color var(--transition-fast),border-color var(--transition-fast);}
.float-legend-btn:hover{color:var(--text);border-color:var(--accent)}
.float-legend-btn.active{color:var(--accent);border-color:var(--accent);text-shadow:0 0 12px var(--accent-glow);}
.legend-caret{font-size:10px;transition:transform var(--transition-med)}
.float-legend-btn.active .legend-caret{transform:rotate(180deg)}
.legend-panel{position:absolute;z-index:605;bottom:calc(90px + env(safe-area-inset-bottom,0));left:50%;transform:translateX(-50%);background:var(--glass-hi);backdrop-filter:blur(16px) saturate(160%);border:1px solid var(--border-hi);border-radius:var(--radius);max-height:0;overflow:hidden;transition:max-height var(--transition-slow);box-shadow:var(--shadow-float);min-width:140px;}
.legend-panel.open{max-height:200px;overflow-y:auto;overscroll-behavior:contain}
.legend-inner{padding:10px 14px;display:flex;flex-wrap:wrap;gap:6px 14px}
.leg-row{
  display:grid;
  grid-template-columns:8px 1fr 60px 36px;
  align-items:center;
  gap:8px;
  font-size:11px;
  color:var(--text);
  padding:5px 0;
}
.leg-row+.leg-row{border-top:1px solid var(--border)}
.leg-row .leg-name{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:11px;
  letter-spacing:.1px;
}
.leg-statbar{
  display:flex;height:4px;width:100%;border-radius:3px;
  overflow:hidden;background:var(--border);flex-shrink:0;
}
.leg-statbar-seg{height:100%;transition:width var(--transition-slow);}
.leg-statbar-seg.active{background:var(--green)}
.leg-statbar-seg.soon{background:var(--yellow)}
.leg-statbar-seg.expired{background:var(--red)}
.leg-stat-count{
  font-family:var(--mono);font-size:9px;color:var(--muted-hi);
  white-space:nowrap;text-align:right;letter-spacing:.3px;
}
.leg-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;box-shadow:0 0 6px currentColor;}

.detail-panel{position:absolute;bottom:0;left:0;right:0;background:var(--gradient-surface);border-top:1px solid var(--border-hi);box-shadow:var(--shadow-panel);max-height:60vh;height:auto;transform:translateY(100%);transition:transform var(--transition-slow);z-index:1000;display:flex;flex-direction:column;border-radius:var(--radius-lg) var(--radius-lg) 0 0;}
.detail-panel.open{transform:translateY(0)}
.panel-handle{padding:12px 16px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:10px;flex-shrink:0;background:transparent;position:relative;}
.panel-handle::before{content:'';position:absolute;top:8px;left:50%;transform:translateX(-50%);width:36px;height:3px;background:var(--border-hi);border-radius:2px;}
.panel-handle h3{font-family:var(--sans);font-size:13px;color:var(--accent);letter-spacing:.5px;font-weight:700;}
.panel-sub{font-size:11px;color:var(--muted-hi);flex:1;margin-left:4px}
.panel-breadcrumb{font-size:10px;color:var(--muted);font-family:var(--mono);display:flex;align-items:center;gap:6px;padding:5px 16px;border-bottom:1px solid var(--border);background:rgba(0,0,0,.15);flex-shrink:0}
[data-theme="bright"] .panel-breadcrumb{background:rgba(0,0,0,.03)}
.panel-breadcrumb span.active{color:var(--accent);}
.panel-close{background:none;border:none;color:var(--muted);cursor:pointer;font-size:16px;line-height:1;padding:4px 8px;margin-left:auto;transition:color var(--transition-fast),background var(--transition-fast);border-radius:var(--radius-sm);}
.panel-close:hover{color:var(--text);background:var(--border)}
.panel-body{flex:0 1 auto;overflow-y:auto;padding:14px 16px;max-height:calc(60vh - 80px);overscroll-behavior:contain}
@keyframes fadeInUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.panel-body.anim{animation:fadeInUp .22s cubic-bezier(.4,0,.2,1) forwards}
.panel-body::-webkit-scrollbar{width:3px}
.panel-body::-webkit-scrollbar-thumb{background:var(--border-hi);border-radius:2px}

.panel-tabs{display:flex;gap:0;border-bottom:1px solid var(--border);overflow-x:auto;flex-shrink:0;scrollbar-width:none;background:rgba(0,0,0,.1);}
[data-theme="bright"] .panel-tabs{background:rgba(0,0,0,.02)}
.panel-tabs::-webkit-scrollbar{display:none}
.panel-tab{padding:8px 12px;font-size:10px;font-family:var(--sans);letter-spacing:.04em;cursor:pointer;white-space:nowrap;border-bottom:2px solid transparent;color:var(--muted);transition:color var(--transition-fast),border-color var(--transition-fast),background var(--transition-fast);flex-shrink:0;display:flex;align-items:center;gap:6px;text-transform:uppercase;}
.panel-tab:hover{color:var(--text);background:var(--border)}
.panel-tab.active{color:var(--text);border-bottom-color:var(--tab-color,var(--accent));background:var(--accent-glow);}
.panel-tab-dot{width:6px;height:6px;border-radius:50%;background:var(--tab-color,var(--accent));flex-shrink:0;box-shadow:0 0 8px currentColor;animation:none;}
.panel-tab.active .panel-tab-dot{animation:dotPulse 2s ease-in-out infinite;}
@keyframes dotPulse{0%,100%{box-shadow:0 0 6px currentColor;}50%{box-shadow:0 0 14px currentColor;}}
.panel-tab-pane{display:none}
.panel-tab-pane.active{display:block}

.lawan-group{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;margin-bottom:8px;box-shadow:0 2px 8px rgba(0,0,0,.25);transition:border-color var(--transition-fast),box-shadow var(--transition-fast);}
.lawan-group:hover{border-color:var(--border-hi);}
.lawan-header{display:flex;align-items:center;gap:8px;padding:12px 14px;cursor:pointer;transition:background var(--transition-fast);user-select:none}
.lawan-header:hover{background:var(--surface2)}
.lawan-header-static{display:flex;align-items:center;gap:8px;padding:10px 12px}
.lawan-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0;box-shadow:0 0 0 3px rgba(255,255,255,.05),0 0 8px currentColor;}
[data-theme="bright"] .lawan-dot{box-shadow:0 0 0 3px rgba(0,0,0,.05),0 0 6px currentColor;}
.lawan-dot.ghost{opacity:.45;outline:1px dashed currentColor;background:transparent!important;box-shadow:none}
.lawan-name{font-size:13px;font-weight:600;flex:1;min-width:0;color:var(--text);letter-spacing:.1px;word-break:break-word}
.lawan-count{font-size:10px;color:var(--muted-hi);background:var(--border);padding:2px 9px;border-radius:20px;flex-shrink:0;font-family:var(--mono);letter-spacing:.3px;}
.lawan-chevron{color:var(--muted);font-size:11px;transition:transform var(--transition-med);flex-shrink:0}
.lawan-chevron.open{transform:rotate(180deg)}
.lawan-links{display:flex;flex-direction:column;gap:0;border-top:1px solid var(--border)}
.link-row{padding:12px 14px;border-bottom:1px solid var(--border);background:var(--surface);transition:background var(--transition-fast);}
.link-row:hover{background:var(--surface2);}
.link-row:last-child{border-bottom:none}
.link-id-row{display:flex;align-items:center;gap:6px;margin-bottom:8px;cursor:pointer;transition:opacity var(--transition-fast);border-radius:var(--radius-sm);padding:3px 4px;margin-left:-4px;}
.link-id-row:hover{opacity:.75;background:var(--border);}
.link-badge{font-family:var(--mono);font-size:10px;font-weight:700;padding:4px 10px;border-radius:var(--radius-sm);border:1px solid;letter-spacing:.8px;white-space:nowrap;}
.isr-pair-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:10px}
.isr-half{background:var(--surface2);border-radius:var(--radius);padding:10px 12px;border:1px solid var(--border);border-top:2px solid var(--accent3);position:relative;overflow:hidden;}
.isr-half::before{content:'';position:absolute;inset:0;background:linear-gradient(to bottom,var(--accent3-glow),transparent);pointer-events:none;}
.isr-half:last-child{border-top-color:var(--accent2);}
.isr-half:last-child::before{background:linear-gradient(to bottom,var(--accent2-glow),transparent);}
.isr-half-ghost{opacity:.45}
.isr-half-label{font-size:9px;color:var(--accent3);text-transform:uppercase;letter-spacing:1px;margin-bottom:6px;font-weight:700}
.isr-half:last-child .isr-half-label{color:var(--accent2)}
.isr-half-stn{font-size:12px;font-weight:600;color:var(--text);margin-bottom:5px;line-height:1.45;word-break:break-word}
.isr-half-simf{font-size:10px;font-family:var(--mono);color:var(--muted-hi);margin-bottom:3px;letter-spacing:.4px;word-break:break-all;line-height:1.5;}
.isr-half-freq{font-size:11px;color:var(--muted);margin-top:4px}
.pill-tx{color:var(--accent);font-size:9px;font-family:var(--mono);font-weight:700;background:var(--accent-glow);padding:1px 5px;border-radius:3px;margin-right:3px;}
.pill-rx{color:var(--accent2);font-size:9px;font-family:var(--mono);font-weight:700;background:var(--accent2-glow);padding:1px 5px;border-radius:3px;margin-right:3px;}
.link-info-bar{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;margin:8px 0}
.info-chip{background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius-sm);padding:7px 9px;display:flex;flex-direction:column;gap:3px;min-width:0;transition:border-color var(--transition-fast);}
.info-chip:hover{border-color:var(--border-hi);}
.info-chip-label{font-size:8px;color:var(--muted);text-transform:uppercase;letter-spacing:.8px;margin-bottom:2px}
.info-chip-val{font-size:12px;color:var(--text);font-family:var(--mono);font-weight:600;word-break:break-word}
.info-chip-val.good{color:#fff;background:var(--green);padding:2px 6px;border-radius:4px;display:inline-block;box-shadow:0 0 8px var(--green-glow);}.info-chip-val.warn{color:#000;background:var(--yellow);padding:2px 6px;border-radius:4px;display:inline-block;}.info-chip-val.danger{color:#fff;background:var(--red);padding:2px 6px;border-radius:4px;display:inline-block;box-shadow:0 0 8px var(--red-glow);}
.ant-specs{display:grid;grid-template-columns:1fr 1fr;gap:5px;margin-bottom:8px}
.ant-half{background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius-sm);padding:9px 12px}
.ant-half-label{font-size:8px;color:var(--muted-hi);text-transform:uppercase;letter-spacing:.8px;margin-bottom:6px;font-weight:700}
.ant-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:5px}
.ant-row:last-child{margin-bottom:0}
.ant-key{font-size:11px;color:var(--muted-hi);}.ant-val{font-size:12px;color:var(--text);font-family:var(--mono);font-weight:500;word-break:break-word}
.mw-extra-grid{display:grid;grid-template-columns:auto 1fr;gap:5px 14px;font-size:12px;margin-bottom:8px;padding:9px 12px;background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius-sm);}
.mw-extra-grid .k{color:var(--muted-hi);font-size:11px;}.mw-extra-grid .v{color:var(--text);font-family:var(--mono);font-weight:500;word-break:break-all;}
.mwlink-detail{display:none;padding:8px 0 2px}
.mwlink-detail.open{display:block;animation:fadeIn .18s ease forwards;}
.mw-chevron{color:var(--muted);font-size:12px;transition:transform var(--transition-med);flex-shrink:0}
.copy-btn{background:none;border:none;color:var(--muted);cursor:pointer;padding:2px 5px;border-radius:3px;font-size:10px;transition:color var(--transition-fast),background var(--transition-fast);vertical-align:middle;margin-left:3px}
.copy-btn:hover{color:var(--accent);background:var(--accent-glow)}
.copy-btn.copied{color:var(--green)}
.mw-chevron.open{transform:rotate(180deg)}
.goto-btn{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:10px;width:100%;padding:9px 12px;border:1px solid var(--border-hi);border-radius:var(--radius);background:var(--accent-glow);color:var(--accent);font-size:12px;font-weight:600;cursor:pointer;transition:background var(--transition-fast),border-color var(--transition-fast),box-shadow var(--transition-fast);letter-spacing:.3px;}
.goto-btn:hover{background:rgba(0,229,255,.15);border-color:var(--accent);box-shadow:0 0 16px var(--accent-glow);}
.chip-ok{color:#fff;border-color:var(--green);background:var(--green)}
.chip-exp{color:#fff;border-color:var(--red);background:var(--red)}
.chip-soon{color:#000;border-color:var(--yellow);background:var(--yellow)}

@media(min-width:769px){
  .float-logo{top:12px;left:12px}
  .float-stats{display:none!important}
  .float-legend-btn{display:none!important}
  .legend-panel{display:none!important}

  /* Legend desktop: panel kecil kiri bawah, selalu terlihat kalau ada klien aktif */
  .desktop-legend{
    display:none;position:absolute;left:12px;
    bottom:calc(12px + env(safe-area-inset-bottom,0));
    z-index:600;background:var(--glass-hi);backdrop-filter:blur(20px) saturate(180%);
    border:1px solid var(--border-hi);border-radius:var(--radius);
    box-shadow:var(--shadow-float);width:clamp(220px,22vw,300px);
    max-height:min(380px, calc(100dvh - 140px));
    display:none;flex-direction:column;
    overflow:hidden;
  }
  .desktop-legend.show{display:flex;animation:fadeInUp .2s cubic-bezier(.4,0,.2,1) forwards;}
  .desktop-legend-body{overflow-y:auto;flex:1;overscroll-behavior:contain;}
  .desktop-legend-body::-webkit-scrollbar{width:3px;}
  .desktop-legend-body::-webkit-scrollbar-thumb{background:var(--border-hi);border-radius:2px;}
  .desktop-legend-title{
    font-family:var(--sans);font-size:9px;color:var(--accent);
    letter-spacing:.06em;text-transform:uppercase;
    padding:10px 14px;border-bottom:1px solid var(--border);
    flex-shrink:0;display:flex;align-items:center;gap:6px;
    cursor:pointer;user-select:none;transition:background var(--transition-fast);
    text-shadow:0 0 16px var(--accent-glow);
  }
  .desktop-legend-title:hover{background:var(--border);}
  .desktop-legend-count{font-size:9px;font-family:var(--mono);background:var(--accent-glow);color:var(--accent);border:1px solid rgba(0,229,255,.2);border-radius:10px;padding:1px 7px;margin-left:auto;letter-spacing:.3px;}
  .desktop-legend-caret{font-size:9px;color:var(--muted);transition:transform var(--transition-med);flex-shrink:0;}
  .desktop-legend.collapsed .desktop-legend-caret{transform:rotate(-90deg);}
  .desktop-legend-title:hover{background:rgba(255,255,255,.04)}
  [data-theme="bright"] .desktop-legend-title:hover{background:rgba(0,0,0,.04)}
  .desktop-legend-title-text{flex:1}
  .desktop-legend-count{
    font-family:var(--mono);font-size:9px;color:var(--muted);
    background:var(--surface2);padding:1px 6px;border-radius:10px;flex-shrink:0;
  }
  .desktop-legend-caret{
    font-size:9px;color:var(--muted);transition:transform .22s ease;flex-shrink:0;
  }
  .desktop-legend.collapsed .desktop-legend-caret{transform:rotate(-90deg)}
  .desktop-legend.collapsed .desktop-legend-title{border-bottom-color:transparent}
  .desktop-legend-body{
    overflow-y:auto;overscroll-behavior:contain;
    max-height:400px;
    transition:max-height .25s cubic-bezier(.4,0,.2,1),padding .25s;
    padding:6px 14px;
  }
  .desktop-legend.collapsed .desktop-legend-body{
    max-height:0;padding-top:0;padding-bottom:0;overflow:hidden;
  }
  .desktop-legend-body::-webkit-scrollbar{width:4px}
  .desktop-legend-body::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}
  .desktop-legend .leg-row{grid-template-columns:8px 1fr 64px 38px}
  .detail-panel{position:absolute;top:0;right:0;bottom:0;left:auto;width:clamp(340px,35vw,510px);max-height:100dvh;transform:translateX(100%);transition:transform var(--transition-slow);border-top:none;border-left:1px solid var(--border-hi);border-radius:0;z-index:1000;box-shadow:-8px 0 40px rgba(0,0,0,.5);}
  .detail-panel.open{transform:translateX(0)}
  .panel-body{max-height:calc(100dvh - 140px);padding:12px 14px}
  .leaflet-top.leaflet-right .leaflet-control-zoom{margin-top:12px!important;margin-right:10px!important;}
  .map-controls{top:calc(12px + 74px + 12px);right:10px;}
  .loc-popup{right:56px;top:calc(12px + 74px + 12px);}
}

@media(max-width:768px){
  .float-logo{display:none}
  .float-controls{display:none}
  .float-selector{display:none}
  .float-stats{display:none}
  .float-legend-btn{display:none}
  .legend-panel{display:none}
  .map-controls{display:none}
  .loc-popup{display:none!important}
  .leaflet-top.leaflet-right .leaflet-control-zoom{display:none!important}

  /* FAB kiri atas: hamburger */
  .mob-fab-logo{position:absolute;top:12px;left:12px;z-index:600;width:40px;height:40px;border-radius:var(--radius);background:var(--glass-hi);backdrop-filter:blur(16px) saturate(160%);border:1px solid var(--border-hi);box-shadow:var(--shadow-float);display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--accent);transition:background var(--transition-fast),border-color var(--transition-fast),transform var(--transition-fast);-webkit-tap-highlight-color:transparent;touch-action:manipulation;}
  .mob-fab-logo:active{background:var(--surface2);border-color:var(--accent);transform:scale(.93);}

  /* FAB kanan atas */
  .mob-fab-zoom{position:absolute;top:12px;right:12px;z-index:600;display:flex;flex-direction:column;gap:4px;}
  .mob-fab-btn{width:40px;height:40px;border-radius:var(--radius);background:var(--glass-hi);backdrop-filter:blur(16px) saturate(160%);border:1px solid var(--border-hi);box-shadow:var(--shadow-float);display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:20px;color:var(--text);transition:background var(--transition-fast),border-color var(--transition-fast),transform var(--transition-fast);-webkit-tap-highlight-color:transparent;touch-action:manipulation;}
  .mob-fab-btn:active{background:var(--surface2);border-color:var(--accent);transform:scale(.93);}
  .mob-fab-btn.accent{color:var(--accent);font-size:16px;box-shadow:var(--shadow-float),0 0 12px var(--accent-glow);}

  /* Kompas mobile */
  .mob-fab-compass{width:40px;height:40px;border-radius:var(--radius);background:var(--glass-hi);backdrop-filter:blur(16px) saturate(160%);border:1px solid var(--border-hi);box-shadow:var(--shadow-float);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background var(--transition-fast),border-color var(--transition-fast),transform var(--transition-fast);-webkit-tap-highlight-color:transparent;touch-action:manipulation;}
  .mob-fab-compass:active{background:var(--surface2);border-color:var(--accent);transform:scale(.93);}
  .mob-fab-compass.rotated{border-color:var(--accent);box-shadow:var(--shadow-float),0 0 10px var(--accent-glow);}
  #mobCompassNeedle{display:block;transition:transform .3s ease}

  /* Bottom bar */
  .mob-bar{position:absolute;bottom:0;left:0;right:0;z-index:600;background:var(--glass-hi);backdrop-filter:blur(20px) saturate(180%);border-top:1px solid var(--border-hi);padding:8px 12px calc(8px + env(safe-area-inset-bottom));display:flex;align-items:center;gap:8px;box-shadow:0 -4px 28px rgba(0,0,0,.5);}
  .mob-sel-trigger{flex:1;min-width:0;display:flex;align-items:center;gap:6px;background:var(--border);border:1px solid var(--border-hi);border-radius:var(--radius);padding:8px 10px;cursor:pointer;transition:border-color var(--transition-fast),box-shadow var(--transition-fast);touch-action:manipulation;-webkit-tap-highlight-color:transparent;}
  .mob-sel-trigger.open,.mob-sel-trigger:active{border-color:var(--accent);box-shadow:0 0 10px var(--accent-glow);}
  .mob-sel-chips{flex:1;min-width:0;display:flex;gap:4px;overflow:hidden}
  .mob-sel-caret{color:var(--muted);font-size:12px;flex-shrink:0;transition:transform var(--transition-med);}
  .mob-sel-caret.open{transform:rotate(180deg)}
  .mob-stats{display:flex;gap:0;flex-shrink:0}
  .mob-stat{display:flex;flex-direction:column;align-items:center;padding:0 10px;position:relative;}
  .mob-stat+.mob-stat::before{content:'';position:absolute;left:0;top:15%;bottom:15%;width:1px;background:var(--border);}
  .mob-stat-val{font-family:var(--mono);font-size:11px;font-weight:700;color:var(--accent);line-height:1.2;}
  .mob-stat-lbl{font-size:7px;color:var(--muted-hi);letter-spacing:.6px;text-transform:uppercase}

  /* Sheet */
  .mob-sheet{position:absolute;left:0;right:0;bottom:0;z-index:700;background:var(--gradient-surface);border-radius:var(--radius-lg) var(--radius-lg) 0 0;border-top:1px solid var(--border-hi);transform:translateY(100%);transition:transform var(--transition-slow);max-height:70dvh;display:flex;flex-direction:column;box-shadow:0 -8px 40px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.04);}
  .mob-sheet.open{transform:translateY(0)}
  .mob-sheet-handle{padding:12px 16px 8px;flex-shrink:0;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border);}
  .mob-sheet-handle::before{content:'';display:block;width:36px;height:3px;border-radius:2px;background:var(--border-hi);position:absolute;top:7px;left:50%;transform:translateX(-50%);}
  .mob-sheet-title{font-family:var(--mono);font-size:10px;color:var(--muted-hi);letter-spacing:1.5px;text-transform:uppercase;}
  .mob-sheet-close{background:none;border:none;color:var(--muted);cursor:pointer;font-size:16px;padding:4px 8px;transition:color var(--transition-fast),background var(--transition-fast);border-radius:var(--radius-sm);}
  .mob-sheet-close:hover{color:var(--text);background:var(--border);}
  .mob-sheet-list{flex:1;overflow-y:auto;overscroll-behavior:contain}
  .mob-sheet-list::-webkit-scrollbar{display:none}
  .mob-sheet-list .ms-item{padding:14px 16px;min-height:56px;font-size:14px;border-bottom:1px solid var(--border)}
  .mob-sheet-list .ms-item:last-child{border-bottom:none}
  .mob-sheet-list .ms-check{width:18px;height:18px}
  .mob-sheet-list .ms-dot{width:10px;height:10px}
  .mob-sheet-list .ms-stat-chip{font-size:10px;padding:2px 6px}
  .mob-sheet-list .ms-name{font-size:14px}

  /* Drawer */
  .mob-drawer{position:absolute;top:0;left:0;bottom:0;z-index:800;width:260px;background:var(--gradient-surface);border-right:1px solid var(--border-hi);transform:translateX(-100%);transition:transform var(--transition-slow);display:flex;flex-direction:column;box-shadow:8px 0 32px rgba(0,0,0,.5);padding-top:env(safe-area-inset-top,0);}
  .mob-drawer.open{transform:translateX(0)}
  .mob-drawer-scrim{position:absolute;inset:0;z-index:790;background:rgba(0,0,0,.55);backdrop-filter:blur(2px);opacity:0;pointer-events:none;transition:opacity var(--transition-med);}
  .mob-drawer-scrim.open{opacity:1;pointer-events:auto}
  .mob-drawer-head{padding:16px;border-bottom:1px solid var(--border);flex-shrink:0;display:flex;align-items:center;gap:8px;background:rgba(0,0,0,.1);}
  [data-theme="bright"] .mob-drawer-head{background:rgba(0,0,0,.02);}
  .mob-drawer-logo{font-family:var(--sans);font-size:14px;color:var(--accent);letter-spacing:2px;font-weight:700;}
  .mob-drawer-sub{font-size:9px;color:var(--muted-hi);letter-spacing:.06em;line-height:1.4;text-transform:uppercase;font-family:var(--sans);}
  .mob-drawer-body{flex:1;overflow-y:auto;padding:12px 0;overscroll-behavior:contain}
  .mob-drawer-section{padding:0 16px 12px}
  .mob-drawer-label{font-size:8px;color:var(--muted-hi);letter-spacing:2px;text-transform:uppercase;margin-bottom:8px;padding:0 0 5px;border-bottom:1px solid var(--border);}
  .mob-drawer-row{display:flex;align-items:center;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--border);font-size:13px;color:var(--text);}
  .mob-drawer-row:last-child{border-bottom:none}
  .mob-drawer-select{background:var(--border);border:1px solid var(--border-hi);border-radius:var(--radius-sm);color:var(--text);font-size:12px;padding:5px 8px;outline:none;cursor:pointer;font-family:var(--sans);transition:border-color var(--transition-fast),box-shadow var(--transition-fast);}
  .mob-drawer-select:hover,.mob-drawer-select:focus{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-glow);}
  .mob-drawer-select option{background:var(--surface)}
  .mob-drawer-legend{padding:0 16px 12px}
  .mob-drawer-legend-header{
    display:flex;align-items:center;justify-content:space-between;
    cursor:pointer;user-select:none;
    font-size:9px;color:var(--muted);letter-spacing:1.5px;text-transform:uppercase;
    padding:0 0 4px;border-bottom:1px solid var(--border);margin-bottom:0;
    transition:color .15s;
  }
  .mob-drawer-legend-header:hover{color:var(--text);}
  .mob-drawer-legend-header:active{opacity:.7;}
  .mob-drawer-legend-caret{font-size:9px;transition:transform .22s ease}
  .mob-drawer-legend.collapsed .mob-drawer-legend-caret{transform:rotate(-90deg)}
  .mob-legend-items{
    max-height:400px;overflow:hidden;
    transition:max-height .25s cubic-bezier(.4,0,.2,1),margin .25s;
    margin-top:6px;
  }
  .mob-drawer-legend.collapsed .mob-legend-items{max-height:0;margin-top:0}

  /* Filter wilayah di drawer mobile */
  .mob-drawer-filter{padding:0 16px 12px}
  .mob-filter-search{
    width:100%;background:var(--bg);border:1px solid var(--border);
    border-radius:var(--radius-sm);color:var(--text);font-size:13px;padding:8px 10px;
    outline:none;font-family:var(--sans);transition:border-color var(--transition-fast),box-shadow var(--transition-fast);margin-top:6px;
  }
  .mob-filter-search:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow);}
  .mob-filter-search::placeholder{color:var(--muted)}
  .mob-filter-list{margin-top:4px;max-height:200px;overflow-y:auto;overscroll-behavior:contain}
  .mob-filter-list::-webkit-scrollbar{display:none}
  .mob-filter-item{
    display:flex;align-items:center;gap:10px;
    padding:12px 0;border-bottom:1px solid var(--border);
    cursor:pointer;font-size:13px;color:var(--text);transition:opacity var(--transition-fast);
    -webkit-tap-highlight-color:transparent;
  }
  .mob-filter-item:active{opacity:.7;}
  .mob-filter-item:last-child{border-bottom:none}
  .mob-filter-item.selected .filter-check{background:var(--accent);border-color:var(--accent)}
  .mob-filter-item.selected .filter-check-mark{display:block}
  .mob-filter-count{font-family:var(--mono);font-size:11px;color:var(--muted);margin-left:auto;flex-shrink:0}
  .mob-filter-active-label{
    font-size:11px;color:var(--accent2);margin-top:6px;display:none;
  }
  .mob-filter-active-label.show{display:flex;align-items:center;gap:6px}
  .mob-filter-clear-btn{
    font-size:11px;color:var(--muted);cursor:pointer;margin-left:auto;
    padding:3px 8px;border-radius:var(--radius-sm);border:1px solid var(--border-hi);
    background:var(--border);transition:color var(--transition-fast),border-color var(--transition-fast);
  }
  .mob-filter-clear-btn:active{color:var(--red);border-color:var(--red);}
  .mob-legend-items{display:flex;flex-direction:column;gap:6px;margin-top:6px}
  .mob-legend-row{
    display:grid;grid-template-columns:9px 1fr 60px 38px;
    align-items:center;gap:8px;font-size:12px;color:var(--text);padding:6px 0;
  }
  .mob-legend-row+.mob-legend-row{border-top:1px solid var(--border)}
  .mob-legend-row .leg-name{font-size:12px}
  .mob-legend-row .leg-statbar{height:6px}
  .mob-legend-row .leg-stat-count{font-size:10px}
  .mob-legend-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0;box-shadow:0 0 6px currentColor;}
  .mob-loc-section{padding:0 16px 12px}
  .mob-loc-input{display:flex;flex-direction:column;gap:6px;margin-top:6px}
  .mob-loc-input label{font-size:11px;color:var(--muted);display:flex;flex-direction:column;gap:3px}
  .mob-loc-input input{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text);font-family:var(--mono);font-size:13px;padding:8px 10px;outline:none;transition:border-color var(--transition-fast),box-shadow var(--transition-fast);}
  .mob-loc-input input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow);}
  .mob-loc-btns{display:flex;gap:6px;margin-top:6px}
  .mob-loc-btns button{flex:1;padding:10px 6px;border-radius:var(--radius-sm);font-size:12px;cursor:pointer;border:1px solid var(--border-hi);background:var(--border);color:var(--text);touch-action:manipulation;transition:background var(--transition-fast),border-color var(--transition-fast);}
  .mob-loc-btns button:active{background:var(--surface);border-color:var(--accent);}
  .mob-loc-btns button.primary{background:var(--accent);color:#fff;border-color:var(--accent);font-weight:700;box-shadow:0 0 16px var(--accent-glow);}
  .mob-loc-btns button.primary:active{background:var(--accent);opacity:.9;box-shadow:none;}

  /* Detail panel mobile */
  .detail-panel{position:absolute;bottom:0;left:0;right:0;top:auto;width:auto;max-height:82dvh;height:auto;transform:translateY(100%);border-radius:var(--radius-lg) var(--radius-lg) 0 0;border-top:1px solid var(--border-hi);border-left:none;z-index:900;padding-bottom:env(safe-area-inset-bottom);}
  .detail-panel.open{transform:translateY(0)}
  .panel-body{max-height:calc(82dvh - 110px - env(safe-area-inset-bottom));padding:10px 12px;overflow-y:auto;overscroll-behavior:contain;}
  .panel-body::-webkit-scrollbar{display:none}
  .panel-handle{padding:18px 12px 8px;position:relative}
  .panel-handle::before{content:'';display:block;width:36px;height:3px;border-radius:2px;background:var(--border-hi);position:absolute;top:8px;left:50%;transform:translateX(-50%);}
  .panel-handle h3{font-size:12px}
  .panel-sub{font-size:11px}
  .lawan-header{padding:14px 12px;min-height:52px}
  .lawan-name{font-size:14px}
  .link-row{padding:12px 10px}
  .link-id-row{min-height:48px;align-items:center}
  .link-badge{font-size:11px;padding:5px 10px}
  .link-info-bar{grid-template-columns:repeat(2,1fr);gap:6px}
  .info-chip{padding:8px 9px}
  .info-chip-val{font-size:13px}
  .info-chip-label{font-size:10px}
  .isr-pair-grid{grid-template-columns:1fr;gap:6px}
  .isr-half{padding:10px 11px}
  .isr-half-stn{font-size:13px}
  .goto-btn{padding:14px;font-size:13px;min-height:48px}
}

@media(max-width:768px) and (orientation:landscape){
  .mob-bar{padding:5px 12px calc(5px + env(safe-area-inset-bottom))}
  .mob-sheet{max-height:80dvh}
  .detail-panel{max-height:88dvh;border-radius:0}
  .panel-body{max-height:calc(88dvh - 100px - env(safe-area-inset-bottom))}
  .panel-handle::before{display:none}
  .panel-handle{padding:8px 12px}
  .isr-pair-grid{grid-template-columns:1fr 1fr}
}

@media(max-width:360px){
  .mob-drawer{width:230px}
  .link-info-bar{grid-template-columns:repeat(2,1fr)}
  .panel-body{padding:8px 10px}
}