:root{
  --bg:#0f1b2d; --bar:#13233b; --panel:#fff; --txt:#1d2733; --muted:#6b7785;
  --accent:#2a9d8f; --line:#e2e6ea; --shadow:0 6px 24px rgba(0,0,0,.18);
  --topH:56px;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:var(--txt)}
#map{position:absolute;inset:var(--topH) 0 0 0}

/* Top bar */
#topbar{
  position:absolute;top:0;left:0;right:0;height:var(--topH);z-index:30;
  display:flex;align-items:center;gap:14px;padding:0 14px;
  background:linear-gradient(180deg,#16273f,#13233b);color:#eaf1f8;box-shadow:var(--shadow);
}
#topbar h1{font-size:16px;font-weight:600;margin:0;white-space:nowrap}
#topbar h1 span{font-weight:400;color:#7fd4c8;font-size:13px;margin-left:4px}
#topbar .spacer{flex:1}
.ctrl{display:flex;flex-direction:column;gap:2px;min-width:0}
.ctrl label{font-size:10px;text-transform:uppercase;letter-spacing:.04em;color:#9fb3c8}
.ctrl select,.ctrl input[type=text]{
  background:#0e1a2c;color:#eaf1f8;border:1px solid #2a3c57;border-radius:8px;
  padding:5px 8px;font-size:13px;outline:none;min-width:120px;
}
.ctrl.search input{min-width:220px}
.ctrl input[type=range]{width:110px}
.icon-btn{background:transparent;border:0;color:#eaf1f8;font-size:20px;cursor:pointer;padding:4px 6px;border-radius:8px}
.icon-btn:hover{background:rgba(255,255,255,.1)}

/* Side panel */
#panel{
  position:absolute;top:var(--topH);left:0;bottom:0;width:300px;z-index:25;
  background:var(--panel);box-shadow:var(--shadow);overflow-y:auto;padding:14px;
  transition:transform .25s ease;
}
.panel-section{padding:6px 0 14px;border-bottom:1px solid var(--line)}
.panel-section h2{font-size:13px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin:0 0 10px}
.panel-section.muted small{color:var(--muted);line-height:1.5}
#map{left:300px}

/* Layer rows — whole row is a click-to-toggle control */
.layer-row{margin-bottom:12px}
.layer-row .top{display:flex;align-items:center;gap:8px;cursor:pointer;user-select:none;
  padding:4px 6px;border-radius:7px;transition:background .15s}
.layer-row .top:hover{background:#f1f5f7}
.layer-row .top:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.layer-row .sw{width:14px;height:14px;border-radius:3px;border:1px solid rgba(0,0,0,.15);flex:none}
.layer-row .lname{font-size:13px;font-weight:500;flex:1}
/* toggle switch */
.layer-row .eye{width:30px;height:17px;border-radius:9px;background:var(--accent);position:relative;flex:none;transition:background .2s}
.layer-row .eye::after{content:"";position:absolute;top:2px;left:15px;width:13px;height:13px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.3);transition:left .2s}
.layer-row .op{width:100%;margin-top:6px}
.layer-row .zhint{font-size:10px;color:var(--muted)}
/* OFF state */
.layer-row.off .eye{background:#c5ccd3}
.layer-row.off .eye::after{left:2px}
.layer-row.off .sw{filter:grayscale(1);opacity:.5}
.layer-row.off .lname{opacity:.55;text-decoration:line-through;text-decoration-color:rgba(0,0,0,.25)}
.layer-row.off .op{opacity:.4}

/* Legend — each class is a click-to-toggle filter */
#legend .row{display:flex;align-items:center;gap:8px;margin-bottom:3px;font-size:12px;
  cursor:pointer;padding:3px 6px;border-radius:6px;transition:background .15s;user-select:none}
#legend .row:hover{background:#f1f5f7}
#legend .row:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
#legend .sw{width:14px;height:14px;border-radius:3px;border:1px solid rgba(0,0,0,.15);flex:none}
#legend .lbl{flex:1}
#legend .tick{color:var(--accent);font-weight:700}
#legend .row.off{opacity:.55}
#legend .row.off .lbl{text-decoration:line-through;text-decoration-color:rgba(0,0,0,.3)}
#legend .row.off .sw{filter:grayscale(1)}
#legend .row.off .tick{visibility:hidden}

/* Tools */
#tools{position:absolute;right:12px;bottom:34px;z-index:20;display:flex;flex-direction:column;gap:6px}
.tool-btn{width:38px;height:38px;border-radius:9px;border:0;background:#fff;box-shadow:var(--shadow);font-size:17px;cursor:pointer}
.tool-btn.active{background:var(--accent);color:#fff}

/* Coordinates */
#coords{position:absolute;left:312px;bottom:8px;z-index:20;background:rgba(15,27,45,.82);color:#dbe7f3;
  font:12px ui-monospace,monospace;padding:3px 8px;border-radius:6px}

/* Popups */
.maplibregl-popup-content{font-size:13px;border-radius:10px;padding:12px 14px;max-width:280px}
.popup-title{font-weight:600;margin-bottom:6px;color:var(--accent)}
.popup-row{display:flex;justify-content:space-between;gap:12px;padding:2px 0;border-top:1px solid #f0f0f0}
.popup-row b{color:var(--muted);font-weight:500}

#panelBackdrop{display:none}

/* Desktop: collapse the panel to give the map full width */
body.panel-collapsed #panel{transform:translateX(-100%)}
body.panel-collapsed #map{left:0}
body.panel-collapsed #coords{left:8px}

/* Mobile */
@media (max-width:820px){
  #topbar{gap:8px;flex-wrap:nowrap;overflow-x:auto}
  .ctrl.search{display:none}
  #panel{transform:translateX(-100%);width:280px}
  #panel.open{transform:translateX(0)}
  #map{left:0}
  #coords{left:8px}
  #panelBackdrop.show{display:block;position:absolute;inset:var(--topH) 0 0 0;background:rgba(0,0,0,.35);z-index:24}
}