:root{
  --bg: #090F0E;
  --panel: #0F1917;
  --panel-2: #141F1C;
  --line: #223530;
  --line-soft: #1A2825;
  --lime: #C8FF4D;
  --lime-dim: #8FB93A;
  --amber: #FF8452;
  --text: #EDF3EF;
  --muted: #6F8B82;
  --muted-2: #486057;
  --font-display: 'Space Grotesk', sans-serif;
  --font-body: 'IBM Plex Sans', sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;
}

*{box-sizing:border-box;}
html,body{margin:0;height:100%;background:var(--bg);color:var(--text);
  font-family:var(--font-body);overflow:hidden;
  -webkit-font-smoothing:antialiased;}

#map{position:absolute;inset:0;}
.leaflet-container{background:var(--bg);font-family:var(--font-body);}
.leaflet-control-zoom a{
  background:var(--panel) !important;color:var(--text) !important;
  border:1px solid var(--line) !important;
}
.leaflet-control-zoom a:hover{background:var(--panel-2) !important;}
.leaflet-control-attribution{
  background:rgba(9,15,14,.7) !important;color:var(--muted) !important;
  font-size:9px !important;
}
.leaflet-control-attribution a{color:var(--muted-2) !important;}

/* ---------- top bar ---------- */
#topbar{
  position:absolute;top:0;left:0;right:0;z-index:1000;height:60px;
  display:flex;align-items:center;gap:24px;padding:0 20px;
  background:linear-gradient(to bottom, rgba(9,15,14,.96), rgba(9,15,14,.85));
  border-bottom:1px solid var(--line-soft);
  backdrop-filter:blur(10px);
}
.brand{display:flex;align-items:center;gap:8px;color:var(--lime);
  flex-shrink:0;}
.brand span{font-family:var(--font-display);font-size:14px;font-weight:600;
  color:var(--text);letter-spacing:.02em;}

.stats{display:flex;gap:20px;flex-shrink:0;}
.stat{display:flex;align-items:baseline;gap:5px;}
.stat b{font-family:var(--font-mono);font-size:14px;font-weight:500;
  color:var(--lime);}
.stat i{font-style:normal;font-size:11px;color:var(--muted);}

.actions{display:flex;align-items:center;gap:10px;margin-left:auto;
  flex-shrink:0;}
#f-search{
  background:var(--panel);border:1px solid var(--line);color:var(--text);
  padding:8px 12px;border-radius:7px;font-size:12.5px;font-family:var(--font-body);
  width:200px;transition:border-color .15s, width .2s;
}
#f-search::placeholder{color:var(--muted);}
#f-search:focus{outline:none;border-color:var(--lime-dim);width:240px;}

#panel-toggle{
  display:flex;align-items:center;gap:7px;
  background:var(--panel);border:1px solid var(--line);color:var(--text);
  font-family:var(--font-body);font-size:12.5px;font-weight:500;
  padding:8px 14px;border-radius:7px;cursor:pointer;transition:border-color .15s;
}
#panel-toggle:hover{border-color:var(--lime-dim);}
#panel-toggle svg{flex-shrink:0;}

/* ---------- filter drawer ---------- */
#scrim{
  position:absolute;inset:0;z-index:1001;background:rgba(4,8,7,.5);
  opacity:0;pointer-events:none;transition:opacity .2s;
}
#scrim.open{opacity:1;pointer-events:auto;}

#panel{
  position:absolute;top:0;right:0;bottom:0;z-index:1002;width:300px;
  background:var(--panel);border-left:1px solid var(--line);
  padding:20px;overflow-y:auto;
  transform:translateX(100%);transition:transform .25s ease;
}
#panel.open{transform:translateX(0);}

.panel-head{display:flex;align-items:center;justify-content:space-between;
  margin-bottom:18px;padding-bottom:14px;border-bottom:1px solid var(--line-soft);}
.panel-head h2{font-family:var(--font-display);font-size:15px;margin:0;
  font-weight:600;}
#panel-close{background:none;border:none;color:var(--muted);font-size:14px;
  cursor:pointer;padding:4px;}
#panel-close:hover{color:var(--text);}

.panel-section{margin-bottom:20px;}
.panel-section h3{font-family:var(--font-display);font-size:10.5px;
  text-transform:uppercase;letter-spacing:.08em;color:var(--muted);
  margin:0 0 10px;font-weight:600;}
.panel-section label{display:flex;align-items:center;gap:9px;
  font-size:13px;margin-bottom:9px;cursor:pointer;color:var(--text);}
.panel-section label span{flex-shrink:0;}
.panel-section label i{font-style:normal;color:var(--muted);font-size:11px;
  margin-left:auto;font-family:var(--font-mono);}
.panel-section input[type=checkbox]{
  appearance:none;width:15px;height:15px;border:1.5px solid var(--muted-2);
  border-radius:4px;flex-shrink:0;position:relative;cursor:pointer;
  transition:border-color .15s, background .15s;
}
.panel-section input[type=checkbox]:checked{
  background:var(--lime);border-color:var(--lime);
}
.panel-section input[type=checkbox]:checked::after{
  content:'';position:absolute;left:4px;top:1px;width:4px;height:8px;
  border:solid var(--bg);border-width:0 2px 2px 0;transform:rotate(45deg);
}
.panel-section select{
  width:100%;background:var(--panel-2);border:1px solid var(--line);
  color:var(--text);padding:9px 10px;border-radius:6px;font-size:13px;
  font-family:var(--font-body);appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%236F8B82' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 10px center;
}
#f-reset{
  width:100%;background:transparent;border:1px solid var(--muted-2);
  color:var(--text);padding:10px;border-radius:7px;font-size:12.5px;
  font-family:var(--font-body);font-weight:500;cursor:pointer;
  transition:border-color .15s, color .15s;
}
#f-reset:hover{border-color:var(--amber);color:var(--amber);}

/* ---------- loading ---------- */
#loading{
  position:absolute;bottom:18px;left:18px;z-index:1000;
  background:var(--panel);border:1px solid var(--line);
  border-radius:8px;padding:9px 14px;font-family:var(--font-mono);
  font-size:11px;color:var(--muted);display:flex;align-items:center;gap:8px;
}
#loading.hidden{display:none;}
.pulse-dot{width:6px;height:6px;border-radius:50%;background:var(--lime);
  animation:pulse 1.1s infinite;}
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:.2;}}

/* ---------- popup ---------- */
.leaflet-popup-content-wrapper{
  background:var(--panel);color:var(--text);border-radius:9px;
  border:1px solid var(--line);box-shadow:0 8px 24px rgba(0,0,0,.4);
}
.leaflet-popup-tip{background:var(--panel);border:1px solid var(--line);}
.leaflet-popup-content{margin:12px 14px;}
.poi-title{font-family:var(--font-display);font-weight:600;
  font-size:13.5px;margin:0 0 7px;color:var(--lime);}
.poi-row{font-size:12px;color:var(--text);margin-bottom:4px;line-height:1.5;}
.poi-row span{color:var(--muted);}
.leaflet-popup-close-button{color:var(--muted) !important;}

/* ---------- mobile ---------- */
@media(max-width:760px){
  #topbar{height:auto;flex-wrap:wrap;padding:12px 14px;gap:10px;}
  .brand{order:1;}
  .actions{order:2;margin-left:auto;gap:8px;}
  #f-search{display:none;}
  #panel-toggle span{display:none;}
  #panel-toggle{padding:8px 10px;}
  .stats{order:3;width:100%;gap:16px;
    padding-top:10px;border-top:1px solid var(--line-soft);}
  #panel{width:100%;}
  #loading{left:14px;bottom:14px;font-size:10px;}
}