*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#0d1117;--bg2:#161b22;--bg3:#1c2128;--bd:#30363d;
  --tx:#e6edf3;--mu:#8b949e;--ac:#58a6ff;--gn:#3fb950;--rd:#f85149;--yw:#d29922
}
html,body{height:100%;background:var(--bg);color:var(--tx);font-family:'Segoe UI',system-ui,sans-serif}
body{display:flex;flex-direction:column}

#hdr{
  background:var(--bg2);border-bottom:1px solid var(--bd);padding:8px 14px;
  display:flex;align-items:center;gap:10px;flex-shrink:0;min-height:44px
}
#hdr h1{font-size:13px;font-weight:700;color:var(--ac);white-space:nowrap}
.badge{background:#1f6feb;color:#fff;font-size:9px;padding:2px 6px;border-radius:20px;font-weight:600}
#meta{font-size:11px;color:var(--mu);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#perf{font-size:10px;color:var(--mu);white-space:nowrap}

#main{display:flex;flex:1;overflow:hidden}
#map{flex:1}
#map .maplibregl-canvas-container{cursor:crosshair!important}
#sb{
  width:234px;background:var(--bg2);border-left:1px solid var(--bd);
  display:flex;flex-direction:column;gap:8px;padding:8px;overflow-y:auto;flex-shrink:0
}

.pnl{background:var(--bg3);border:1px solid var(--bd);border-radius:7px;padding:9px}
.pt{font-size:9px;text-transform:uppercase;letter-spacing:.8px;color:var(--mu);margin-bottom:7px;font-weight:700}

#status{font-size:11px;display:flex;align-items:center;gap:6px}
.dot{width:8px;height:8px;border-radius:50%;background:var(--yw);flex-shrink:0;transition:background .3s}
.dot.ok{background:var(--gn)}.dot.err{background:var(--rd)}

#drop{
  border:2px dashed var(--bd);border-radius:7px;padding:12px 8px;text-align:center;
  cursor:pointer;transition:border-color .2s,background .2s;font-size:11px;color:var(--mu);line-height:1.7
}
#drop:hover,#drop.over{border-color:var(--ac);background:rgba(88,166,255,.07);color:var(--tx)}
#drop input{display:none}

.lbl{font-size:10px;color:var(--mu);display:block;margin-bottom:3px}
select{
  width:100%;background:var(--bg);border:1px solid var(--bd);color:var(--tx);
  border-radius:5px;padding:4px 22px 4px 7px;font-size:11px;cursor:pointer;
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%238b949e'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 7px center
}
select:focus{outline:none;border-color:var(--ac)}

.sr{margin-top:7px}
.sr label{font-size:10px;color:var(--mu);display:flex;justify-content:space-between;margin-bottom:2px}
.sr label span{color:var(--ac)}
input[type=range]{width:100%;accent-color:var(--ac)}

#cbar{width:100%;height:16px;border-radius:3px;display:block}
#cticks{position:relative;font-size:8px;color:var(--mu);margin-top:2px;height:11px}
#cbox{font-size:11px;line-height:1.9;min-height:40px}

.sr2{display:flex;justify-content:space-between;font-size:10px;color:var(--mu);padding:1px 0}
.sr2 b{color:var(--tx);font-weight:400}

.mbtns{display:flex;gap:4px;margin-top:2px}
.mb{
  background:var(--bg);border:1px solid var(--bd);color:var(--mu);border-radius:5px;
  padding:3px 7px;font-size:10px;cursor:pointer;flex:1;transition:all .15s
}
.mb:hover{border-color:var(--ac);color:var(--tx)}
.mb.on{border-color:var(--ac);color:var(--ac);background:rgba(88,166,255,.1)}

.chk-row{display:flex;align-items:center;gap:7px;font-size:10px;color:var(--mu);cursor:pointer;user-select:none}
.chk-row input[type=checkbox]{accent-color:var(--ac);cursor:pointer;width:13px;height:13px;flex-shrink:0}
.chk-row:hover span{color:var(--tx)}

.elvbtns{display:flex;flex-wrap:wrap;gap:3px}
.elvhint{font-size:9px;color:var(--mu);margin-top:3px;opacity:.55;letter-spacing:.3px}
.elvbtn{
  background:var(--bg);border:1px solid var(--bd);color:var(--mu);border-radius:5px;
  padding:4px 8px;font-size:11px;font-weight:600;cursor:pointer;transition:all .15s;white-space:nowrap
}
.elvbtn:hover{border-color:var(--ac);color:var(--tx)}
.elvbtn.on{border-color:var(--ac);color:var(--ac);background:rgba(88,166,255,.12)}
.elvbtn-max{border-color:var(--yw);color:var(--yw);font-weight:700}
.elvbtn-max:hover{border-color:var(--yw);color:#f0c040}
.elvbtn-max.on{border-color:var(--yw);color:var(--yw);background:rgba(210,153,34,.14)}
.elvbtn-cappi{border-color:var(--gn);color:var(--gn);font-weight:700}
.elvbtn-cappi:hover{border-color:var(--gn);color:#5de8a0}
.elvbtn-cappi.on{border-color:var(--gn);color:var(--gn);background:rgba(63,185,80,.14)}

#file-list{display:flex;flex-direction:column;gap:3px}
.fitem{
  display:flex;justify-content:space-between;align-items:center;
  background:var(--bg);border:1px solid var(--bd);border-radius:5px;
  padding:4px 7px;font-size:10px;cursor:pointer;transition:border-color .15s;gap:6px
}
.fitem:hover{border-color:var(--ac)}
.fitem.active{border-color:var(--ac);color:var(--ac)}
.fitem.fnew{border-color:var(--gn)}
.fitem.fnew .ft{color:var(--gn)}
.fitem .fn{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fitem .ft{color:var(--mu);white-space:nowrap;flex-shrink:0}

.maplibregl-ctrl-attrib{font-size:9px!important}