/* ============ TerraLayers — dark theme ============ */
:root{
  --bg:#0a1420; --bg2:#0e1b2c; --panel:#101f33; --panel2:#16283f;
  --line:#1f3a5c; --txt:#dbe7f3; --txt2:#8aa5c0; --acc:#4aa3ff; --acc2:#7cc4f0;
  --danger:#ff6b6b; --ok:#1dd1a1; --warn:#ffd166;
  --topbar-h:52px; --panel-w:285px;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg); color:var(--txt); overflow:hidden;
}
.hidden{display:none !important}

/* ---------- top bar ---------- */
#topbar{
  position:fixed; top:0; left:0; right:0; height:var(--topbar-h); z-index:1200;
  display:flex; align-items:center; gap:12px; padding:0 12px;
  background:linear-gradient(180deg,#0d1b2e,#0b1626); border-bottom:1px solid var(--line);
}
.brand{font-weight:700; font-size:17px; letter-spacing:.3px; white-space:nowrap; user-select:none}
.brand span{color:var(--acc)}
#searchBox{position:relative; flex:1; max-width:430px}
#searchInput{
  width:100%; padding:8px 12px; border-radius:8px; border:1px solid var(--line);
  background:var(--bg2); color:var(--txt); font-size:13px; outline:none;
}
#searchInput:focus{border-color:var(--acc)}
#searchResults{
  position:absolute; top:calc(100% + 6px); left:0; right:0; max-height:320px; overflow:auto;
  background:var(--panel); border:1px solid var(--line); border-radius:8px; box-shadow:0 10px 30px rgba(0,0,0,.5);
}
.sr-item{padding:8px 12px; cursor:pointer; font-size:13px; display:flex; gap:8px; align-items:baseline}
.sr-item:hover,.sr-item.sel{background:var(--panel2)}
.sr-item .tag{font-size:10px; color:var(--txt2); text-transform:uppercase; letter-spacing:.5px; margin-left:auto; white-space:nowrap}
.top-controls{display:flex; align-items:center; gap:8px; margin-left:auto}
.icon-btn{
  background:var(--panel2); border:1px solid var(--line); color:var(--txt); border-radius:8px;
  width:34px; height:34px; font-size:16px; cursor:pointer; line-height:1;
}
.icon-btn:hover:not(:disabled){border-color:var(--acc)}
.icon-btn:disabled{opacity:.35; cursor:default}
.seg{display:flex; border:1px solid var(--line); border-radius:8px; overflow:hidden}
.seg button{
  background:var(--panel2); border:none; color:var(--txt2); padding:8px 14px; font-size:13px; cursor:pointer;
}
.seg button.active{background:var(--acc); color:#08111d; font-weight:600}
.edit-btn{
  background:var(--panel2); border:1px solid var(--line); color:var(--txt);
  padding:8px 14px; border-radius:8px; font-size:13px; cursor:pointer; white-space:nowrap;
}
.edit-btn.active{background:var(--warn); border-color:var(--warn); color:#201600; font-weight:700}

/* ---------- layer panel ---------- */
#layerPanel{
  position:fixed; top:var(--topbar-h); left:0; bottom:0; width:var(--panel-w); z-index:1100;
  background:var(--panel); border-right:1px solid var(--line);
  display:flex; flex-direction:column; overflow:hidden; transition:transform .18s ease;
}
#layerPanel.collapsed{transform:translateX(calc(-1 * var(--panel-w)))}
.panel-head{display:flex; align-items:center; justify-content:space-between; padding:12px 14px 6px}
.panel-head h2{margin:0; font-size:14px; text-transform:uppercase; letter-spacing:1px; color:var(--txt2)}
#editBadge{font-size:10px; background:var(--warn); color:#201600; padding:2px 6px; border-radius:4px; font-weight:700}
#layerList{flex:1; overflow-y:auto; padding:4px 8px}
.layer-row{border-radius:8px; margin-bottom:2px}
.layer-main{display:flex; align-items:center; gap:8px; padding:6px 8px; cursor:pointer; border-radius:8px}
.layer-main:hover{background:var(--panel2)}
.layer-main .swatch{width:12px; height:12px; border-radius:3px; flex:0 0 auto; border:1px solid rgba(255,255,255,.25)}
.layer-main .swatch.pt{border-radius:50%}
.layer-main .lname{flex:1; font-size:13px; user-select:none; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.layer-main .lcount{font-size:10px; color:var(--txt2); background:var(--bg2); padding:1px 6px; border-radius:8px}
.layer-main input[type=checkbox]{accent-color:var(--acc); width:15px; height:15px; cursor:pointer}
.layer-tools{display:none; padding:2px 8px 10px 30px; gap:6px; align-items:center}
.layer-row.open .layer-tools{display:flex}
.layer-tools .btn{padding:3px 8px; font-size:11px}
.layer-tools input[type=range]{flex:1; accent-color:var(--acc); height:18px}
.layer-src{display:none; font-size:10px; color:var(--txt2); padding:0 8px 8px 30px; line-height:1.4}
.layer-row.open .layer-src{display:block}
.layer-edited .lname::after{content:" ●"; color:var(--warn); font-size:10px}
.panel-block{padding:10px 14px; border-top:1px solid var(--line); display:flex; flex-direction:column; gap:6px}
.panel-block h3{margin:0 0 2px; font-size:12px; text-transform:uppercase; letter-spacing:1px; color:var(--txt2)}
.switch-row{display:flex; align-items:center; gap:8px; font-size:13px; cursor:pointer}
.switch-row input{accent-color:var(--acc); width:15px; height:15px}
.panel-foot{padding:10px 14px; font-size:10px; color:var(--txt2); border-top:1px solid var(--line); line-height:1.5}
.btn{
  background:var(--panel2); border:1px solid var(--line); color:var(--txt); border-radius:7px;
  padding:7px 10px; font-size:12px; cursor:pointer; text-align:center;
}
.btn:hover{border-color:var(--acc)}
.btn.small{padding:6px 8px}
.btn.danger:hover{border-color:var(--danger); color:var(--danger)}
.btn.primary{background:var(--acc); border-color:var(--acc); color:#08111d; font-weight:600}
.file-btn{display:inline-block}

/* ---------- stage / map / globe ---------- */
#stage{position:fixed; top:var(--topbar-h); left:var(--panel-w); right:0; bottom:0; transition:left .18s ease}
#stage.wide{left:0}
#map,#globe{position:absolute; inset:0}
#map{background:radial-gradient(120% 120% at 50% 20%, #12304f 0%, #0a1c30 55%, #071221 100%)}
#globe{background:#020408}
body.edit-mode #map{cursor:crosshair}
.leaflet-container{font:inherit}
.leaflet-popup-content-wrapper,.leaflet-popup-tip{background:var(--panel); color:var(--txt); border:1px solid var(--line); box-shadow:0 8px 24px rgba(0,0,0,.5)}
.leaflet-popup-content{margin:10px 12px; font-size:12px; max-height:260px; overflow:auto}
.leaflet-popup-close-button{color:var(--txt2) !important}
.pop-title{font-weight:700; font-size:14px; margin-bottom:6px}
.pop-sub{color:var(--txt2); font-size:11px; margin-bottom:6px}
.prop-table{width:100%; border-collapse:collapse}
.prop-table td{padding:2px 4px; border-bottom:1px solid rgba(255,255,255,.06); vertical-align:top}
.prop-table td:first-child{color:var(--txt2); white-space:nowrap; padding-right:10px; max-width:110px; overflow:hidden; text-overflow:ellipsis}
.leaflet-tooltip{background:#0d1b2e; border:1px solid var(--line); color:var(--txt); box-shadow:none; font-size:11px; padding:2px 6px}
.leaflet-tooltip-top:before{border-top-color:var(--line)}
.country-label{
  background:none; border:none; box-shadow:none;
  color:rgba(230,240,255,.92); font-size:11px; font-weight:600;
  text-shadow:0 1px 3px rgba(0,0,0,.9), 0 0 2px rgba(0,0,0,.9);
  white-space:nowrap; pointer-events:none;
}
.leaflet-control-zoom a{background:var(--panel); color:var(--txt); border-color:var(--line)}
.leaflet-control-zoom a:hover{background:var(--panel2)}
.leaflet-bar{border:1px solid var(--line) !important; box-shadow:none !important}

/* ---------- editor bar ---------- */
#editorBar{
  position:absolute; top:12px; left:50%; transform:translateX(-50%); z-index:1000;
  background:rgba(13,27,46,.95); border:1px solid var(--line); border-radius:10px;
  padding:8px 10px; display:flex; flex-direction:column; gap:8px; max-width:min(720px, 92%);
  box-shadow:0 10px 30px rgba(0,0,0,.5); backdrop-filter:blur(4px);
}
.eb-row{display:flex; align-items:center; gap:6px; flex-wrap:wrap}
.eb-title{font-size:13px; font-weight:700; max-width:220px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.eb-hint{font-size:11px; color:var(--txt2)}
.eb-btn{
  background:var(--panel2); border:1px solid var(--line); color:var(--txt);
  padding:6px 10px; border-radius:7px; font-size:12px; cursor:pointer; white-space:nowrap;
}
.eb-btn:hover{border-color:var(--acc)}
.eb-btn.active{background:var(--acc); border-color:var(--acc); color:#08111d; font-weight:700}
.eb-btn.danger:hover{border-color:var(--danger); color:var(--danger)}
.eb-sep{width:1px; height:22px; background:var(--line); margin:0 2px}
.eb-select{background:var(--bg2); color:var(--txt); border:1px solid var(--line); border-radius:6px; padding:5px 6px; font-size:12px}
.eb-slider{display:flex; align-items:center; gap:8px; font-size:11px; color:var(--txt2)}
.eb-slider input[type=range]{accent-color:var(--acc); width:150px}
.eb-count{font-variant-numeric:tabular-nums}

/* editor handles */
.vtx-handle{
  width:12px !important; height:12px !important;
  background:#fff; border:2px solid var(--acc); border-radius:3px; cursor:grab;
  box-shadow:0 1px 4px rgba(0,0,0,.6);
}
.vtx-handle:active{cursor:grabbing}
.mid-handle{
  width:9px !important; height:9px !important;
  background:rgba(74,163,255,.55); border:1px solid rgba(255,255,255,.75); border-radius:50%; cursor:copy;
}
.tool-handle{
  width:26px !important; height:26px !important;
  background:var(--warn); border:2px solid #fff; border-radius:50%; cursor:grab;
  display:flex; align-items:center; justify-content:center; font-size:14px; color:#201600; font-weight:700;
  box-shadow:0 2px 8px rgba(0,0,0,.6); user-select:none;
}
.pivot-handle{
  width:10px !important; height:10px !important;
  background:var(--warn); border-radius:50%; border:1px solid #fff; pointer-events:none;
}

/* ---------- toast ---------- */
#toast{
  position:absolute; bottom:18px; left:50%; transform:translateX(-50%); z-index:1300;
  background:rgba(13,27,46,.95); border:1px solid var(--line); color:var(--txt);
  padding:8px 14px; border-radius:8px; font-size:12px; max-width:80%;
  box-shadow:0 8px 24px rgba(0,0,0,.5); pointer-events:none;
}

/* ---------- modal ---------- */
#modalWrap{
  position:fixed; inset:0; z-index:2000; background:rgba(3,8,15,.6);
  display:flex; align-items:center; justify-content:center; backdrop-filter:blur(2px);
}
#modal{
  background:var(--panel); border:1px solid var(--line); border-radius:12px;
  width:min(520px,92vw); max-height:82vh; overflow:auto; padding:18px;
  box-shadow:0 20px 60px rgba(0,0,0,.6);
}
#modal h3{margin:0 0 12px; font-size:16px}
#modal .mrow{display:flex; gap:8px; align-items:center; margin-bottom:8px}
#modal .mrow label{flex:0 0 130px; font-size:12px; color:var(--txt2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
#modal input[type=text],#modal input[type=number],#modal select{
  flex:1; background:var(--bg2); border:1px solid var(--line); color:var(--txt);
  border-radius:6px; padding:6px 8px; font-size:13px; outline:none; min-width:0;
}
#modal input:focus{border-color:var(--acc)}
.modal-actions{display:flex; gap:8px; justify-content:flex-end; margin-top:14px}

/* ---------- loading ---------- */
#loading{
  position:fixed; inset:0; z-index:3000; background:var(--bg);
  display:flex; flex-direction:column; gap:14px; align-items:center; justify-content:center;
  font-size:14px; color:var(--txt2);
}
.spinner{
  width:34px; height:34px; border:3px solid var(--line); border-top-color:var(--acc);
  border-radius:50%; animation:spin .9s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* globe tooltip */
.globe-tooltip{background:rgba(13,27,46,.92); border:1px solid var(--line); border-radius:8px; padding:8px 10px; font-size:12px; pointer-events:none}
.globe-tooltip b{font-size:13px}

@media (max-width:760px){
  :root{--panel-w:250px}
  .brand{display:none}
  #searchBox{max-width:none}
}

/* editor extras */
.grab-halo{
  width:34px; height:34px; border-radius:50%;
  background:rgba(74,163,255,.22); border:2px solid #fff; cursor:grab;
  box-shadow:0 2px 8px rgba(0,0,0,.5);
}
.grab-halo:active{cursor:grabbing}
.ghost-move{cursor:grab}
.row-gear{opacity:.55}
.layer-main:hover .row-gear{opacity:1}
.leaflet-marker-icon{background:none;border:none}