:root {
  --bg: #060B17;
  --surface: #0D1626;
  --surface-2: #121E38;
  --surface-3: #182844;
  --border: #1C2E50;
  --border-2: #26406E;
  --text: #DCE7F8;
  --text-sec: #6E8AB8;
  --text-muted: #3D5280;
  --gold: #2563EB;
  --gold-bg: rgba(37,99,235,0.08);
  --gold-border: rgba(37,99,235,0.22);
  --teal: #22D3EE;
  --teal-bg: rgba(34,211,238,0.07);
  --green: #34D399;
  --red: #F87171;
  --purple: #A78BFA;
  --purple-bg: rgba(167,139,250,0.08);
  --radius: 8px;
  --radius-lg: 12px;
  --shadow: 0 4px 24px rgba(0,0,0,0.35);
}
[data-theme="light"] {
  --bg: #EFF4FC;
  --surface: #FFFFFF;
  --surface-2: #F5F8FF;
  --surface-3: #EBF0FA;
  --border: #D0DBF0;
  --border-2: #B8C8E8;
  --text: #0D1A30;
  --text-sec: #4A5E8A;
  --text-muted: #8A9EC0;
  --gold: #1D4ED8;
  --gold-bg: rgba(29,78,216,0.07);
  --gold-border: rgba(29,78,216,0.22);
  --teal: #0891B2;
  --teal-bg: rgba(8,145,178,0.07);
  --green: #059669;
  --purple: #7C3AED;
  --purple-bg: rgba(124,58,237,0.07);
  --shadow: 0 4px 20px rgba(0,40,100,0.10);
}

*{margin:0;padding:0;box-sizing:border-box;}
html,body{height:100%;overflow:hidden;}
body{font-family:'DM Sans',sans-serif;background:var(--bg);color:var(--text);}

.app-shell{display:flex;flex-direction:column;height:100vh;}

/* ── TOP NAV ── */
.nav{
  height:54px;background:var(--surface);border-bottom:1px solid var(--border);
  padding:0 20px;display:flex;align-items:center;justify-content:space-between;
  flex-shrink:0;z-index:200;
}
.nav-brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit;}
.brand-emblem{width:30px;height:30px;display:flex;align-items:center;justify-content:center;}
.brand-name{font-size:15px;font-weight:700;letter-spacing:-0.3px;}
.brand-tagline{font-family:'IBM Plex Mono',monospace;font-size:9px;color:var(--text-muted);
  letter-spacing:0.6px;text-transform:uppercase;margin-top:1px;}
.nav-center{display:flex;align-items:center;gap:8px;font-family:'IBM Plex Mono',monospace;
  font-size:11px;color:var(--text-sec);}
.nav-center .sep{color:var(--border-2);}
.nav-center .page-label{color:var(--gold);}
.nav-right{display:flex;align-items:center;gap:8px;}
.nav-btn{
  height:30px;background:var(--surface-2);border:1px solid var(--border);
  border-radius:var(--radius);padding:0 12px;font-size:12px;font-weight:500;
  color:var(--text-sec);cursor:pointer;transition:all 0.18s;display:flex;
  align-items:center;gap:6px;text-decoration:none;
}
.nav-btn:hover{border-color:var(--border-2);color:var(--text);}
.nav-btn svg{width:12px;height:12px;fill:currentColor;}
.theme-toggle{
  width:30px;height:30px;background:var(--surface-2);border:1px solid var(--border);
  border-radius:var(--radius);cursor:pointer;display:flex;align-items:center;
  justify-content:center;font-size:13px;transition:all 0.18s;
}
.theme-toggle:hover{border-color:var(--border-2);}
[data-theme="dark"] .theme-toggle::after{content:'☀';}
[data-theme="light"] .theme-toggle::after{content:'🌙';}

/* ── MAIN ── */
.main-content{display:flex;flex:1;overflow:hidden;}

/* ── SIDEBAR ── */
.sidebar{
  width:320px;background:var(--surface);border-right:1px solid var(--border);
  display:flex;flex-direction:column;flex-shrink:0;overflow:hidden;
}
.sidebar-header{padding:16px;border-bottom:1px solid var(--border);flex-shrink:0;}
.sidebar-title{font-size:13px;font-weight:700;color:var(--text);letter-spacing:-0.2px;margin-bottom:2px;}
.sidebar-sub{font-size:11px;color:var(--text-muted);font-family:'IBM Plex Mono',monospace;letter-spacing:0.3px;}

.stat-chips{display:flex;gap:8px;margin-top:12px;}
.stat-chip{flex:1;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius);padding:8px 10px;}
.stat-chip-num{font-family:'IBM Plex Mono',monospace;font-size:15px;font-weight:600;color:var(--gold);}
.stat-chip-key{font-size:9.5px;color:var(--text-muted);text-transform:uppercase;letter-spacing:0.5px;margin-top:1px;}

.controls{padding:12px 16px;border-bottom:1px solid var(--border);flex-shrink:0;display:flex;flex-direction:column;gap:10px;}
.control-label{font-size:10px;color:var(--text-muted);text-transform:uppercase;letter-spacing:0.6px;font-family:'IBM Plex Mono',monospace;margin-bottom:4px;}
.select-wrap select,.search-box input{
  width:100%;background:var(--surface-2);border:1px solid var(--border);
  border-radius:var(--radius);padding:8px 10px;font-family:'DM Sans',sans-serif;
  font-size:12.5px;color:var(--text);outline:none;transition:border-color 0.18s;
}
.select-wrap select:focus,.search-box input:focus{border-color:var(--gold-border);}
.search-box input::placeholder{color:var(--text-muted);}

.legend-toolbar{display:flex;gap:6px;}
.mini-btn{
  flex:1;font-size:11px;font-weight:500;padding:6px 8px;border-radius:var(--radius);
  border:1px solid var(--border);background:var(--surface-2);color:var(--text-sec);
  cursor:pointer;transition:all 0.18s;
}
.mini-btn:hover{border-color:var(--border-2);color:var(--text);}

/* ── SIDEBAR TABS ── */
.sidebar-tabs{display:flex;gap:4px;padding:10px 16px;border-bottom:1px solid var(--border);flex-shrink:0;}
.sidebar-tab{
  flex:1;font-size:11.5px;font-weight:600;padding:7px 6px;border-radius:var(--radius);
  border:1px solid transparent;background:transparent;color:var(--text-muted);
  cursor:pointer;transition:all 0.18s;white-space:nowrap;
}
.sidebar-tab:hover{color:var(--text-sec);background:var(--surface-2);}
.sidebar-tab.active{background:var(--gold-bg);border-color:var(--gold-border);color:var(--gold);}

.tab-panel{display:none;flex-direction:column;flex:1;overflow:hidden;min-height:0;}
.tab-panel.active{display:flex;}

/* ── CARIAN LOT ── */
.lot-results-scroll{overflow-y:auto;flex:1;padding:6px 16px 16px;display:flex;flex-direction:column;gap:8px;}
.lot-results-scroll::-webkit-scrollbar{width:5px;}
.lot-results-scroll::-webkit-scrollbar-track{background:transparent;}
.lot-results-scroll::-webkit-scrollbar-thumb{background:var(--border-2);border-radius:3px;}
.lot-result-item{
  background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius);
  padding:10px 12px;cursor:pointer;transition:all 0.18s;
}
.lot-result-item:hover{border-color:var(--gold-border);background:var(--gold-bg);}
.lot-result-title{font-size:12.5px;font-weight:700;color:var(--text);margin-bottom:2px;}
.lot-result-meta{font-size:11px;color:var(--text-sec);line-height:1.4;}
.lot-result-tag{
  display:inline-block;font-family:'IBM Plex Mono',monospace;font-size:9.5px;
  color:var(--gold);background:var(--gold-bg);border-radius:4px;padding:1px 6px;margin-top:4px;
}
.btn-cari-lot{
  width:100%;background:var(--gold);color:#fff;border:none;border-radius:var(--radius);
  padding:9px 10px;font-size:12.5px;font-weight:600;cursor:pointer;transition:opacity 0.18s;
}
.btn-cari-lot:hover{opacity:0.88;}
.btn-cari-lot:disabled{opacity:0.5;cursor:not-allowed;}

/* ── LAPISAN PETA ── */
.basemap-options{display:flex;flex-direction:column;gap:6px;}
.basemap-card{
  display:flex;align-items:center;gap:9px;padding:9px 12px;border-radius:var(--radius);
  border:1px solid var(--border);background:var(--surface-2);cursor:pointer;transition:all 0.18s;
}
.basemap-card:hover{border-color:var(--border-2);}
.basemap-card.active{border-color:var(--gold-border);background:var(--gold-bg);}
.basemap-card-dot{width:9px;height:9px;border-radius:50%;border:2px solid var(--border-2);flex-shrink:0;}
.basemap-card.active .basemap-card-dot{border-color:var(--gold);background:var(--gold);}
.basemap-card-label{font-size:12.5px;font-weight:600;color:var(--text);}
.basemap-card-sub{font-size:10.5px;color:var(--text-muted);margin-top:1px;}

.opacity-control{display:flex;align-items:center;gap:10px;}
.opacity-control input[type="range"]{
  flex:1;-webkit-appearance:none;appearance:none;height:4px;border-radius:2px;
  background:var(--border-2);outline:none;
}
.opacity-control input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:16px;height:16px;border-radius:50%;
  background:var(--gold);cursor:pointer;border:2px solid var(--surface);box-shadow:0 1px 4px rgba(0,0,0,0.3);
}
.opacity-control input[type="range"]::-moz-range-thumb{
  width:16px;height:16px;border-radius:50%;background:var(--gold);cursor:pointer;
  border:2px solid var(--surface);box-shadow:0 1px 4px rgba(0,0,0,0.3);
}
.opacity-value{
  font-family:'IBM Plex Mono',monospace;font-size:11.5px;font-weight:600;color:var(--gold);
  min-width:36px;text-align:right;
}

/* ── LEGEND ── */
.legend-scroll{overflow-y:auto;flex:1;padding:6px 0 16px;}
.legend-scroll::-webkit-scrollbar{width:5px;}
.legend-scroll::-webkit-scrollbar-track{background:transparent;}
.legend-scroll::-webkit-scrollbar-thumb{background:var(--border-2);border-radius:3px;}

.lg-group{border-bottom:1px solid var(--border);}
.lg-head{
  display:flex;align-items:center;gap:9px;padding:10px 16px;cursor:pointer;
  transition:background 0.15s;user-select:none;
}
.lg-head:hover{background:var(--surface-2);}
.lg-swatch{width:12px;height:12px;border-radius:3px;flex-shrink:0;}
.lg-name{flex:1;font-size:12.5px;font-weight:600;color:var(--text);line-height:1.2;}
.lg-count{font-family:'IBM Plex Mono',monospace;font-size:10px;color:var(--text-muted);}
.lg-caret{width:14px;height:14px;flex-shrink:0;transition:transform 0.2s;fill:var(--text-muted);}
.lg-group.collapsed .lg-caret{transform:rotate(-90deg);}
.lg-group-toggle{
  width:30px;height:16px;border-radius:8px;background:var(--gold);position:relative;
  cursor:pointer;transition:background 0.2s;flex-shrink:0;
}
.lg-group-toggle.off{background:var(--border-2);}
.lg-group-toggle::after{content:'';position:absolute;top:2px;left:2px;width:12px;height:12px;
  background:#fff;border-radius:50%;transition:transform 0.2s;}
.lg-group-toggle:not(.off)::after{transform:translateX(14px);}

.lg-classes{display:flex;flex-direction:column;}
.lg-group.collapsed .lg-classes{display:none;}
.lg-class{
  display:flex;align-items:center;gap:9px;padding:6px 16px 6px 30px;cursor:pointer;
  transition:background 0.15s,opacity 0.15s;
}
.lg-class:hover{background:var(--surface-2);}
.lg-class.off{opacity:0.38;}
.lg-class-swatch{width:11px;height:11px;border-radius:3px;flex-shrink:0;border:1px solid rgba(0,0,0,0.12);}
.lg-class-name{flex:1;font-size:11.5px;color:var(--text-sec);line-height:1.25;}
.lg-class.off .lg-class-name{text-decoration:line-through;}
.lg-class-count{font-family:'IBM Plex Mono',monospace;font-size:9.5px;color:var(--text-muted);}

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

/* POPUP */
.maplibregl-popup-content{
  background:var(--surface)!important;border:1px solid var(--border)!important;
  border-radius:var(--radius-lg)!important;padding:0!important;box-shadow:var(--shadow)!important;
  font-family:'DM Sans',sans-serif!important;min-width:230px;
}
.maplibregl-popup-tip{display:none!important;}
.maplibregl-popup-close-button{color:var(--text-muted)!important;font-size:18px!important;top:8px!important;right:10px!important;}
.popup-inner{padding:16px;}
.popup-cat{display:flex;align-items:center;gap:8px;margin-bottom:8px;}
.popup-cat-dot{width:12px;height:12px;border-radius:3px;flex-shrink:0;}
.popup-label{font-family:'IBM Plex Mono',monospace;font-size:9px;letter-spacing:1px;text-transform:uppercase;color:var(--gold);}
.popup-title{font-size:16px;font-weight:700;color:var(--text);letter-spacing:-0.3px;margin-bottom:3px;line-height:1.2;}
.popup-trail{font-size:11.5px;color:var(--text-sec);margin-bottom:12px;}
.popup-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.popup-stat{background:var(--surface-2);border-radius:var(--radius);padding:8px 10px;}
.popup-stat-val{font-family:'IBM Plex Mono',monospace;font-size:13px;font-weight:600;color:var(--text);margin-bottom:2px;word-break:break-word;}
.popup-stat-key{font-size:10px;color:var(--text-muted);text-transform:uppercase;letter-spacing:0.5px;}

/* MAP TOOLBAR + MEASUREMENT PANEL */
.map-toolbar{
  position:absolute;top:14px;right:14px;
  display:flex;flex-direction:column;gap:6px;z-index:10;
}
.map-ctrl-btn{
  width:34px;height:34px;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius);display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:all 0.18s;color:var(--text-sec);
}
.map-ctrl-btn:hover{border-color:var(--border-2);background:var(--surface-2);}
.map-ctrl-btn svg{width:14px;height:14px;fill:var(--text-sec);}
.map-ctrl-btn.active{background:var(--gold-bg);border-color:var(--gold-border);color:var(--gold);}

.measure-panel{
  position:absolute;top:14px;right:58px;width:230px;
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius-lg);box-shadow:var(--shadow);padding:14px;z-index:10;
}
.measure-panel-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;}
.measure-panel-title{font-family:'DM Sans',sans-serif;font-size:13px;font-weight:700;color:var(--text);}
.measure-panel-close{background:none;border:none;font-size:17px;line-height:1;color:var(--text-muted);cursor:pointer;padding:0 2px;}
.measure-panel-close:hover{color:var(--text);}
.measure-panel-hint{font-size:11px;color:var(--text-sec);line-height:1.5;margin-bottom:10px;}
.measure-panel-result{
  font-family:'IBM Plex Mono',monospace;font-size:12.5px;font-weight:600;color:var(--gold);
  background:var(--surface-2);border-radius:var(--radius);padding:8px 10px;margin-bottom:10px;
  min-height:18px;line-height:1.4;
}
.measure-panel-buffer-input label{
  display:block;font-size:10px;color:var(--text-muted);text-transform:uppercase;
  letter-spacing:0.5px;margin-bottom:4px;font-family:'IBM Plex Mono',monospace;
}
.measure-panel-buffer-input input{
  width:100%;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius);
  padding:7px 10px;font-family:'DM Sans',sans-serif;font-size:12.5px;color:var(--text);outline:none;
  margin-bottom:10px;
}
.measure-panel-actions{display:flex;gap:6px;}
.measure-panel-actions .mini-btn{flex:1;}

/* COORD BAR */
.coord-bar{
  position:absolute;bottom:10px;left:50%;transform:translateX(-50%);
  background:var(--surface);border:1px solid var(--border);border-radius:8px;
  padding:7px 16px;display:flex;gap:18px;z-index:10;pointer-events:none;
}
.coord-item{font-family:'IBM Plex Mono',monospace;font-size:10px;color:var(--text-muted);letter-spacing:0.5px;}
.coord-item span{color:var(--gold);}

/* ZOOM HINT */
.zoom-hint{
  position:absolute;top:14px;left:50%;transform:translateX(-50%) translateY(-12px);
  background:var(--surface);border:1px solid var(--gold-border);color:var(--gold);
  border-radius:20px;padding:7px 16px;font-size:12px;font-weight:600;
  display:flex;align-items:center;gap:7px;z-index:10;box-shadow:var(--shadow);
  opacity:0;pointer-events:none;transition:opacity 0.25s,transform 0.25s;
}
.zoom-hint.show{opacity:1;transform:translateX(-50%) translateY(0);}

/* LOADING */
.map-loading{position:absolute;inset:0;background:var(--bg);display:flex;align-items:center;
  justify-content:center;flex-direction:column;gap:12px;z-index:20;transition:opacity 0.4s;}
.map-loading.hidden{opacity:0;pointer-events:none;}
.loader-ring{width:36px;height:36px;border:3px solid var(--border);border-top-color:var(--gold);
  border-radius:50%;animation:spin 0.8s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}
.loader-text{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--text-muted);letter-spacing:0.5px;}

.empty-note{padding:24px 16px;text-align:center;color:var(--text-muted);font-size:12px;line-height:1.6;}
.empty-note code{background:var(--surface-2);padding:2px 6px;border-radius:4px;color:var(--gold);font-size:11px;}

/* MAPLIBRE OVERRIDES */
.maplibregl-ctrl-group{background:var(--surface)!important;border:1px solid var(--border)!important;border-radius:var(--radius)!important;}
.maplibregl-ctrl-group button{background-color:transparent!important;border:none!important;}
.maplibregl-ctrl-attrib{background:var(--surface)!important;color:var(--text-muted)!important;font-size:9px!important;}
.maplibregl-ctrl-attrib a{color:var(--text-muted)!important;}