:root{
  --bg:#0f141c; --card:#151b26; --card2:#1b2230; --line:#2b3548;
  --text:#e2e8f0; --muted:#94a3b8;
  --blue:#1d8cf8; --green:#10b981; --orange:#ff9900; --red:#ef4444;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  background:var(--bg); color:var(--text);
  font-family:"Segoe UI",system-ui,-apple-system,sans-serif;
  font-size:13px; display:flex; flex-direction:column;
}

/* header */
.hdr{
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 16px; background:var(--card); border-bottom:1px solid var(--line);
  flex:0 0 auto;
}
.brand{display:flex; align-items:center; gap:12px}
.logo{
  background:var(--blue); color:#fff; font-weight:800; letter-spacing:.5px;
  padding:8px 10px; border-radius:8px; font-size:14px;
}
.hdr h1{margin:0; font-size:15px; font-weight:700}
.hdr h1 em{color:var(--blue); font-style:normal}
.hdr p{margin:2px 0 0; font-size:11px; color:var(--muted)}
.pill{
  background:var(--card2); border:1px solid var(--line); color:var(--muted);
  padding:5px 12px; border-radius:99px; font-size:11px; font-weight:600;
}
.pill.ok{color:var(--green); border-color:var(--green)}
.pill.err{color:var(--red); border-color:var(--red)}
.pill.busy{color:var(--orange); border-color:var(--orange)}

/* tabs */
.tabs{
  display:flex; gap:4px; padding:8px 12px 0; background:var(--card);
  border-bottom:1px solid var(--line); overflow-x:auto; flex:0 0 auto;
}
.tab{
  background:transparent; color:var(--muted); border:0; border-bottom:2px solid transparent;
  padding:9px 14px; font-size:12px; font-weight:700; cursor:pointer; white-space:nowrap;
  font-family:inherit; border-radius:6px 6px 0 0;
}
.tab:hover{color:var(--text); background:var(--card2)}
.tab.active{color:#fff; background:var(--blue); border-bottom-color:var(--blue)}

main{flex:1 1 auto; min-height:0; position:relative}
.pane{display:none; height:100%; padding:12px}
.pane.active{display:block}

.cols{display:flex; gap:12px; height:100%; min-height:0}
.side{
  width:330px; flex:0 0 330px; overflow-y:auto; display:flex;
  flex-direction:column; gap:10px; padding-right:4px;
}
.mapWrap{flex:1 1 auto; display:flex; flex-direction:column; gap:8px; min-width:0; min-height:0}
.map{
  flex:1 1 auto; min-height:320px; border-radius:10px;
  border:1px solid var(--line); overflow:hidden; background:#0a0f16;
}
.stats{
  background:var(--card); border:1px solid var(--line); border-radius:8px;
  padding:8px 12px; font-size:11px; color:var(--muted); flex:0 0 auto;
  white-space:pre-wrap; font-family:Consolas,monospace;
}

/* cards */
.card{
  background:var(--card); border:1px solid var(--line); border-radius:10px;
  padding:12px;
}
.card h3{
  margin:0 0 10px; font-size:11px; font-weight:800; letter-spacing:.6px;
  text-transform:uppercase; color:var(--muted);
}
label{display:block; font-size:11px; color:var(--muted); margin:8px 0 4px; font-weight:600}
label:first-child{margin-top:0}
input[type=text],input[type=number],select,textarea{
  width:100%; background:var(--bg); color:var(--text); border:1px solid var(--line);
  border-radius:7px; padding:8px 10px; font-size:12px; font-family:inherit; outline:none;
}
input:focus,select:focus,textarea:focus{border-color:var(--blue)}
input[type=file]{
  width:100%; background:var(--card2); color:var(--muted); border:1px dashed var(--line);
  border-radius:7px; padding:10px; font-size:11px; cursor:pointer;
}
input[type=file]::file-selector-button{
  background:var(--blue); color:#fff; border:0; padding:6px 12px; border-radius:6px;
  font-weight:700; font-size:11px; margin-right:10px; cursor:pointer; font-family:inherit;
}
textarea{resize:vertical; font-family:Consolas,monospace; font-size:11px}
.radio{display:flex; align-items:center; gap:8px; margin:6px 0; font-size:12px; color:var(--text)}
.radio input{width:auto; margin:0}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:8px}
.muted{color:var(--muted); font-size:11px; margin:6px 0 0; line-height:1.4}
.small{font-size:10px; margin:8px 0 4px}

/* buttons */
.btn{
  display:block; width:100%; border:0; border-radius:8px; padding:11px 14px;
  font-size:12px; font-weight:800; cursor:pointer; font-family:inherit;
  transition:filter .15s, opacity .15s;
}
.btn:disabled{opacity:.42; cursor:not-allowed}
.btn:not(:disabled):hover{filter:brightness(1.12)}
.btn.primary{background:var(--blue); color:#fff}
.btn.green{background:var(--green); color:#fff}
.btn.danger{background:var(--red); color:#fff}
.btn.ghost{background:var(--card2); color:var(--text); border:1px solid var(--line)}
.btn.small{padding:8px 10px; font-size:11px}
.btn.tiny{padding:5px 9px; font-size:10px; width:auto; display:inline-block;
  background:var(--blue); color:#fff; border-radius:6px; font-weight:700}
.btn.tiny.ghost{background:var(--card2); color:var(--text); border:1px solid var(--line)}

/* log */
.log{
  background:var(--bg); border:1px solid var(--line); border-radius:7px;
  padding:9px; font-family:Consolas,monospace; font-size:10.5px; color:#38bdf8;
  max-height:180px; overflow:auto; white-space:pre-wrap; margin:0; line-height:1.5;
}

/* tree */
.tree{
  background:var(--bg); border:1px solid var(--line); border-radius:7px;
  padding:6px; max-height:210px; overflow:auto; font-size:11.5px;
}
.node{display:flex; align-items:center; gap:6px; padding:4px 6px; border-radius:5px; cursor:pointer}
.node:hover{background:var(--card2)}
.node.sel{background:rgba(29,140,248,.18)}
.node .chk{color:var(--green); font-weight:800; width:12px; flex:0 0 12px}
.node .nm{flex:1 1 auto; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.node .ct{color:var(--muted); font-size:10px; flex:0 0 auto}
.node.lvl1{padding-left:6px}
.node.lvl2{padding-left:20px}
.node.lvl3{padding-left:34px}
.node.lvl4{padding-left:48px}
.node.lvl5{padding-left:62px}
.treeCard{flex:1 1 auto; display:flex; flex-direction:column; min-height:0}
.treeHead{display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:8px}
.treeHead h3{margin:0}
.treeCard .tree{flex:1 1 auto; max-height:none}

/* leaflet tweaks */
.leaflet-container{background:#0a0f16; font-family:inherit}
.leaflet-control-attribution{background:rgba(15,20,28,.8)!important; color:#64748b!important; font-size:9px!important}
.leaflet-control-attribution a{color:#94a3b8!important}
.leaflet-bar a{background:#151b26!important; color:#e2e8f0!important; border-color:#2b3548!important}

/* mobile */
@media (max-width:820px){
  .cols{flex-direction:column; height:auto}
  .side{width:100%; flex:0 0 auto; max-height:none}
  .map{min-height:300px}
  .pane{height:auto; overflow-y:auto}
  main{overflow-y:auto}
  .hdr p{display:none}
}

/* ---- editor kabel & tabel add point ---- */
.editModes, .rowTabs{display:flex; gap:4px; margin-bottom:6px}
.editModeBtn, .rowTabs .addModeTab{
  flex:1 1 0; background:#232c3d; color:#64748b; border:0; border-radius:6px;
  padding:8px 4px; font-size:11px; font-weight:800; cursor:pointer; font-family:inherit;
}
.editModeBtn:hover, .rowTabs .addModeTab:hover{filter:brightness(1.25)}
.rowTabs .addModeTab.active{background:#1d8cf8; color:#fff}
.hint{font-size:10.5px; line-height:1.5; margin:8px 0 0; color:#94a3b8}
.btnRow{display:flex; gap:6px; margin-top:8px}
.btnRow .btn{margin:0}
.tableCard{flex:0 0 auto; max-height:44%; display:flex; flex-direction:column; min-height:0}
.tableWrap{flex:1 1 auto; overflow:auto; border:1px solid #2b3548; border-radius:7px}
table.grid{width:100%; border-collapse:collapse; font-size:11.5px}
table.grid th{
  background:#1b2230; color:#94a3b8; font-size:10px; text-transform:uppercase;
  letter-spacing:.5px; padding:8px 10px; text-align:left; position:sticky; top:0; z-index:1;
}
table.grid td{padding:6px 10px; border-top:1px solid #232c3d; color:#e2e8f0}
table.grid tr{cursor:pointer}
table.grid tr:hover td{background:#1b2230}
table.grid tr.sel td{background:rgba(29,140,248,.2)}
.rowTabs .addModeTab{font-size:10px; padding:8px 2px}