:root{
  --navy:#152A4E; --coral:#C81E4B; --gold:#A97A2C; --teal:#1F5C56;
  --ink:#1B1F27; --muted:#6B7280; --line:#E4E7EC; --bg:#F7F8FA;
  --panel-w: 340px;
}
*{ box-sizing:border-box; }
html,body{ margin:0; height:100%; font-family:Calibri,"Segoe UI",Arial,sans-serif; color:var(--ink); }

#map{ position:absolute; top:0; bottom:0; left:0; right:0; transition:right .25s ease; }
body.admin-open #map{ right:var(--panel-w); }

/* ---------- marker HTML cho spot nâng cao độ (không dựng cột 3D) ---------- */
.elevated-spot-marker{ display:flex; flex-direction:column; align-items:center; gap:.2rem; }
.elevated-spot-marker .esm-dot{
  width:16px; height:16px; border-radius:50%; background:var(--navy);
  border:2px solid #fff; box-shadow:0 2px 6px rgba(0,0,0,.35);
}
.elevated-spot-marker .esm-label{
  background:#fff; color:var(--navy); font-size:.72rem; font-weight:700;
  padding:.15rem .5rem; border-radius:5px; white-space:nowrap; box-shadow:0 1px 4px rgba(0,0,0,.25);
}
.elevated-spot-marker.pulse .esm-dot{ animation:esmPulse 1.6s ease-in-out infinite; }
@keyframes esmPulse{
  0%,100%{ box-shadow:0 2px 6px rgba(0,0,0,.35), 0 0 0 0 rgba(200,30,75,.55); }
  50%{ box-shadow:0 2px 6px rgba(0,0,0,.35), 0 0 0 8px rgba(200,30,75,0); }
}

/* ---------- thanh trên ---------- */
.topbar{
  position:absolute; top:0; left:0; right:0; z-index:6;
  background:rgba(21,42,78,.94); color:#fff; padding:.55rem 1rem;
  display:flex; align-items:center; gap:.8rem; flex-wrap:wrap;
}
.topbar b{ font-family:Cambria,Georgia,serif; font-size:1.02rem; }
.topbar .note{ font-size:.7rem; color:#CBD5E8; font-style:italic; flex:1; min-width:200px; }
.btn-admin{
  background:var(--coral); color:#fff; border:none; border-radius:7px;
  padding:.35rem .8rem; font-size:.82rem; font-weight:700; cursor:pointer; font-family:inherit;
}
body.admin-open .topbar{ right:var(--panel-w); }

.breadcrumb{
  position:absolute; top:3rem; left:1rem; z-index:5; background:#fff;
  border:1px solid var(--line); border-radius:8px; padding:.35rem .7rem;
  font-size:.8rem; box-shadow:0 1px 3px rgba(0,0,0,.15);
}
.breadcrumb button{ border:none; background:none; color:var(--coral); font-weight:700; cursor:pointer; font-size:.8rem; padding:0; font-family:inherit; }

.legend{
  position:absolute; bottom:1rem; left:1rem; z-index:5; background:#fff;
  border:1px solid var(--line); border-radius:8px; padding:.5rem .8rem;
  font-size:.74rem; box-shadow:0 1px 3px rgba(0,0,0,.15); display:flex; gap:.85rem; flex-wrap:wrap;
}
.legend span{ display:flex; align-items:center; gap:.3rem; }
.dot{ width:.6rem; height:.6rem; border-radius:50%; display:inline-block; }

.statusbar{
  position:absolute; bottom:1rem; left:50%; transform:translateX(-50%); z-index:8;
  background:var(--navy); color:#fff; padding:.45rem .9rem; border-radius:7px;
  font-size:.8rem; display:none; max-width:70%; box-shadow:0 3px 10px rgba(0,0,0,.25);
}
.statusbar.err{ background:#8F1436; }

/* ---------- popup ---------- */
.maplibregl-popup-content{ font-family:inherit; padding:.75rem .85rem; border-radius:10px; min-width:190px; }
.popup-title{ font-family:Cambria,Georgia,serif; font-weight:700; color:var(--navy); font-size:.92rem; margin-bottom:.15rem; }
.popup-meta{ font-size:.76rem; color:var(--muted); margin-bottom:.4rem; }
.popup-cta{ background:var(--coral); color:#fff; border:none; border-radius:6px; padding:.3rem .65rem; font-size:.76rem; font-weight:700; cursor:pointer; font-family:inherit; }
.popup-desc{ font-size:.76rem; color:var(--ink); margin-bottom:.5rem; line-height:1.4; }

/* ---------- panel admin ---------- */
.panel{
  position:absolute; top:0; right:calc(-1 * var(--panel-w)); bottom:0; width:var(--panel-w);
  background:#fff; border-left:1px solid var(--line); z-index:7;
  display:flex; flex-direction:column; transition:right .25s ease; box-shadow:-3px 0 12px rgba(0,0,0,.08);
}
.panel.open{ right:0; }

.tabs{ display:flex; border-bottom:1px solid var(--line); background:var(--bg); }
.tab{
  flex:1; padding:.6rem .3rem; font-size:.72rem; font-weight:700; text-align:center;
  cursor:pointer; color:var(--muted); border-bottom:2px solid transparent;
}
.tab.on{ color:var(--coral); border-bottom-color:var(--coral); background:#fff; }

.tabpane{ display:none; padding:.9rem 1rem; overflow-y:auto; flex:1; }
.tabpane.on{ display:block; }

.grp{ margin-bottom:1.1rem; }
.grp h4{
  margin:0 0 .5rem; font-family:Cambria,Georgia,serif; font-size:.88rem; color:var(--navy);
  padding-bottom:.3rem; border-bottom:1px solid var(--line);
}
.fld{ display:flex; align-items:center; gap:.5rem; margin-bottom:.45rem; font-size:.78rem; }
.fld label{ flex:1; color:var(--muted); }
.fld input[type=number], .fld input[type=text], .fld select{
  width:100px; padding:.28rem .4rem; border:1px solid var(--line); border-radius:5px;
  font-size:.78rem; font-family:inherit;
}
.fld input[type=color]{ width:38px; height:26px; padding:1px; border:1px solid var(--line); border-radius:5px; }
.fld input[type=range]{ flex:1; }
.fld.chk{ cursor:pointer; }
.fld.chk label{ flex:1; color:var(--ink); }
.fld textarea{
  width:100px; flex:1; padding:.28rem .4rem; border:1px solid var(--line); border-radius:5px;
  font-size:.78rem; font-family:inherit; resize:vertical;
}

.prj-group{ margin-bottom:.5rem; }
.prj-head{
  display:flex; align-items:center; gap:.4rem; font-size:.76rem; font-weight:700; color:var(--navy);
  background:var(--bg); border-radius:5px; padding:.3rem .5rem; margin-bottom:.3rem;
}
.prj-head small{ font-weight:400; color:var(--muted); }
.prj-blocks{ padding-left:.6rem; }

.btnrow{ display:flex; gap:.4rem; flex-wrap:wrap; margin-top:.5rem; }
button.b{
  background:var(--navy); color:#fff; border:none; border-radius:6px; padding:.4rem .7rem;
  font-size:.76rem; font-weight:700; cursor:pointer; font-family:inherit;
}
button.b.alt{ background:#fff; color:var(--navy); border:1px solid var(--line); }
button.b.warn{ background:var(--coral); }
button.b:hover{ opacity:.9; }

.hint{ font-size:.72rem; color:var(--coral); margin-top:.35rem; min-height:1em; line-height:1.35; }
.note-sm{ font-size:.71rem; color:var(--muted); line-height:1.45; margin-top:.4rem; }

.list{ margin-top:.5rem; }
.row{
  display:flex; align-items:center; gap:.45rem; padding:.4rem .5rem; border:1px solid var(--line);
  border-radius:6px; margin-bottom:.35rem; font-size:.76rem; background:#fff;
}
.row-main{ flex:1; min-width:0; }
.row-main b{ display:block; font-size:.78rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.row-main small{ color:var(--muted); font-size:.7rem; }
.sw{ width:.75rem; height:.75rem; border-radius:3px; flex:none; }
.mini{
  border:1px solid var(--line); background:#fff; border-radius:4px; cursor:pointer;
  font-size:.72rem; padding:.15rem .35rem; color:var(--navy); font-family:inherit;
}
.mini.danger{ color:var(--coral); }
.empty{ font-size:.75rem; color:var(--muted); font-style:italic; padding:.5rem 0; }

.form-box{ border:1px solid var(--coral); border-radius:7px; padding:.6rem; margin-top:.5rem; background:#FCF3F6; }

/* ---------- modal sửa (thay prompt()) ---------- */
.modal-overlay{
  position:absolute; inset:0; background:rgba(14,29,56,.45); z-index:20;
  display:flex; align-items:center; justify-content:center;
}
.modal-box{
  background:#fff; border-radius:10px; padding:1rem 1.1rem; width:280px; max-height:82vh;
  overflow-y:auto; box-shadow:0 10px 30px rgba(0,0,0,.28);
}
.modal-box h4{ margin:0 0 .6rem; font-family:Cambria,Georgia,serif; color:var(--navy); font-size:.95rem; }
.modal-box .fld label{ min-width:96px; }

/* ---------- thanh sửa hình (kéo điểm polygon) ---------- */
.shape-edit-bar{
  position:absolute; top:3rem; left:50%; transform:translateX(-50%); z-index:9;
  background:var(--teal); color:#fff; padding:.5rem .8rem; border-radius:8px;
  font-size:.76rem; display:flex; align-items:center; gap:.6rem; box-shadow:0 3px 10px rgba(0,0,0,.25);
  max-width:min(90vw, 560px);
}
.shape-edit-bar button{ padding:.28rem .6rem; font-size:.72rem; }
.nudge{ display:grid; grid-template-columns:repeat(3,1fr); gap:.25rem; width:110px; margin:.4rem 0; }
.nudge button{ border:1px solid var(--line); background:#fff; border-radius:4px; cursor:pointer; padding:.2rem; font-size:.75rem; }
.nudge .sp{ visibility:hidden; }