:root {
  --bg: #070d1a;
  --panel: #0d1526;
  --panel2: #111827;
  --border: #1e293b;
  --border2: #334155;
  --text: #e5e7eb;
  --muted: #64748b;
  --green: #16a34a;
  --red: #dc2626;
  --blue: #2563eb;
}
* { box-sizing:border-box; margin:0; padding:0; }
body { background:var(--bg); color:var(--text); font-family:Inter,Segoe UI,Arial,sans-serif; height:100vh; overflow:hidden; display:flex; flex-direction:column; }

/* HEADER */
.header { background:var(--panel); border-bottom:1px solid var(--border); padding:8px 14px; display:flex; align-items:center; gap:10px; flex-wrap:wrap; flex-shrink:0; }
.logo { font-size:16px; font-weight:800; white-space:nowrap; }
.hbtns { display:flex; gap:6px; flex-wrap:wrap; align-items:center; }
.hbtn { background:var(--panel2); color:var(--text); border:1px solid var(--border2); border-radius:8px; padding:5px 11px; cursor:pointer; font-size:12px; font-weight:600; white-space:nowrap; }
.hbtn:hover { background:var(--border2); }
.hbtn.active { background:#1d4ed8; border-color:#3b82f6; color:#fff; }
.hbtn.green { background:#14532d; border-color:#22c55e; color:#fff; }
.hbtn.red { background:#7f1d1d; border-color:#ef4444; color:#fff; }
.zone-btn[data-zone="A"].active  { background:#991b1b; border-color:#ef4444; }
.zone-btn[data-zone="B"].active  { background:#1e40af; border-color:#3b82f6; }
.zone-btn[data-zone="Mid"].active{ background:#78350f; border-color:#f59e0b; }
.zone-btn[data-zone="T"].active  { background:#14532d; border-color:#22c55e; }
.zone-btn[data-zone="CT"].active { background:#581c87; border-color:#a855f7; }
.search { background:var(--panel2); border:1px solid var(--border2); border-radius:8px; padding:5px 10px; color:var(--text); font-size:12px; width:150px; }
.search::placeholder { color:var(--muted); }

/* BODY */
.body { display:grid; grid-template-columns:1fr 300px; flex:1; overflow:hidden; }

/* MAP */
.mapwrap { position:relative; overflow:hidden; background:#050a14; cursor:crosshair; }
.mapwrap img { position:absolute; top:0; left:0; width:100%; height:100%; object-fit:contain; object-position:center; pointer-events:none; user-select:none; }
.mapwrap svg { position:absolute; top:0; left:0; width:100%; height:100%; }

/* CALLOUT DOTS */
.dot-g circle { cursor:pointer; stroke:#000; stroke-width:1.5; }
.dot-g:hover circle { r:11; }
.dot-g text { fill:#fff; font-weight:800; paint-order:stroke; stroke:#000; stroke-width:4px; pointer-events:none; font-family:Inter,Arial,sans-serif; }
.dot-g line { stroke:rgba(255,255,255,.55); stroke-width:1.3; pointer-events:none; }
.dot-g[data-zone="A"]   circle { fill:#ef4444; }
.dot-g[data-zone="B"]   circle { fill:#3b82f6; }
.dot-g[data-zone="Mid"] circle { fill:#f59e0b; }
.dot-g[data-zone="T"]   circle { fill:#22c55e; }
.dot-g[data-zone="CT"]  circle { fill:#a855f7; }
.dot-g.dim  { opacity:.1; pointer-events:none; }
.dot-g.sel circle { stroke:#fff; stroke-width:3; r:12; }

/* PREVIEW DOT */
.preview-dot { fill:rgba(255,255,255,.4); stroke:#fff; stroke-width:2; pointer-events:none; }

/* TOOLTIP */
.tip { position:absolute; background:rgba(5,10,20,.95); border:1px solid var(--border2); border-radius:8px; padding:7px 11px; font-size:12px; pointer-events:none; z-index:20; min-width:130px; }
.tip b { color:#f1f5f9; display:block; font-size:14px; }
.tip .tru { color:var(--muted); }
.tip .tdesc { color:#94a3b8; margin-top:3px; font-size:11px; }

/* SIDEBAR */
.sidebar { background:var(--panel); border-left:1px solid var(--border); display:flex; flex-direction:column; gap:0; overflow:hidden; }
.card { padding:12px 13px; border-bottom:1px solid var(--border); }
.card-title { font-size:13px; font-weight:700; color:#94a3b8; margin-bottom:9px; }
.hint { color:var(--muted); font-size:12px; padding:8px 0; }
.field { margin-bottom:8px; }
.field label { display:block; font-size:11px; color:var(--muted); margin-bottom:3px; }
.inp { width:100%; background:#060c18; border:1px solid var(--border2); border-radius:7px; padding:6px 9px; color:var(--text); font-size:12px; font-family:inherit; resize:vertical; }
.inp:focus { outline:none; border-color:#3b82f6; }
.coords { font-size:11px; color:var(--muted); margin-bottom:8px; }
.row { display:flex; gap:7px; }
.btn { flex:1; padding:7px; border-radius:8px; border:1px solid var(--border2); background:var(--panel2); color:var(--text); cursor:pointer; font-size:12px; font-weight:600; }
.btn.green { background:#14532d; border-color:#22c55e; color:#fff; }
.btn.red   { background:#7f1d1d; border-color:#ef4444; color:#fff; }
.btn:hover { opacity:.85; }

/* LIST */
.list { flex:1; overflow-y:auto; padding:5px; }
.list-item { padding:7px 9px; border-radius:7px; cursor:pointer; border:1px solid transparent; display:flex; align-items:center; gap:7px; margin-bottom:2px; }
.list-item:hover { background:var(--panel2); }
.list-item.selected { background:#1e3a5f; border-color:#3b82f6; }
.list-item.dim { opacity:.3; }
.ztag { padding:1px 5px; border-radius:999px; font-size:9px; font-weight:700; background:var(--panel2); color:#94a3b8; border:1px solid var(--border2); }
.list-item b { color:#f1f5f9; font-size:12px; }
.list-item .lru { color:var(--muted); font-size:10px; }

/* MODAL */


@media(max-width:800px) { .body { grid-template-columns:1fr; } .sidebar { display:none; } }

/* MAP SELECTOR */
.map-selector { display:flex; gap:0; border-bottom:1px solid var(--border); flex-shrink:0; overflow-x:auto; background:var(--panel); }
.map-tab { padding:9px 16px; font-size:12px; font-weight:700; cursor:pointer; color:var(--muted); border-bottom:3px solid transparent; white-space:nowrap; background:none; border-top:none; border-left:none; border-right:none; }
.map-tab:hover { color:var(--text); background:rgba(255,255,255,.04); }
.map-tab.active { color:#60a5fa; border-bottom-color:#3b82f6; }
.map-tab .map-dot { display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:5px; }

/* MAP NOT LOADED overlay */
.no-map-overlay { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; z-index:5; background:rgba(5,10,20,.85); }
.no-map-overlay h2 { font-size:20px; color:#94a3b8; }
.no-map-overlay p  { font-size:13px; color:#475569; }
.upload-btn { display:inline-block; padding:10px 20px; background:#1d4ed8; border:1px solid #3b82f6; border-radius:10px; cursor:pointer; font-size:14px; font-weight:700; color:#fff; }
.upload-btn:hover { background:#1e40af; }

/* breadcrumb in header */
.map-name-badge { background:#1e3a5f; border:1px solid #3b82f6; border-radius:8px; padding:4px 10px; font-size:12px; font-weight:700; color:#60a5fa; }

/* ── LABEL CONTROLS in modal ─────────────────────────────── */
.label-controls {
  background: #060c18;
  border: 1px solid #1e293b;
  border-radius: 10px;
  padding: 12px;
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.lc-title {
  font-size: 12px;
  font-weight: 700;
  color: #60a5fa;
  margin-bottom: 2px;
}
.range-inp {
  width: 100%;
  margin-top: 5px;
  accent-color: #3b82f6;
  cursor: pointer;
}

/* Angle presets */
.angle-presets {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  margin-top: 7px;
}
.preset-btn {
  background: #1e293b;
  border: 1px solid #334155;
  border-radius: 7px;
  color: #e5e7eb;
  font-size: 11px;
  padding: 4px 8px;
  cursor: pointer;
  font-weight: 600;
}
.preset-btn:hover { background: #334155; }
.preset-btn.active { background: #1d4ed8; border-color: #3b82f6; color: #fff; }

/* Direction grid */
.dir-grid {
  display: grid;
  grid-template-columns: repeat(3, 36px);
  gap: 4px;
  margin-top: 6px;
  /* skip center cell */
}
.dir-btn {
  width: 36px; height: 36px;
  background: #1e293b;
  border: 1px solid #334155;
  border-radius: 7px;
  color: #e5e7eb;
  font-size: 16px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.dir-btn:hover { background: #334155; }
.dir-btn.active { background: #1d4ed8; border-color: #3b82f6; }



/* Vertical text SVG utility */
.callout-label-vertical { writing-mode: vertical-rl; }

.coord-edit-block {
  background:#060c18;
  border:1px solid #1e293b;
  border-radius:10px;
  padding:12px;
  margin-top:10px;
}

/* ── SIDE PANELS ────────────────────────────────────────── */
.side-panel {
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow: hidden;
}

.edit-header-card {
  background: #0f1e35;
  border-bottom: 2px solid #3b82f6;
  flex-shrink: 0;
}

.icon-btn {
  background: none;
  border: 1px solid #334155;
  border-radius: 6px;
  color: #94a3b8;
  font-size: 14px;
  width: 28px; height: 28px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.icon-btn:hover { background: #7f1d1d; border-color: #ef4444; color: #fff; }

/* Edit panel card scrollable */
#panelEdit .card:last-child {
  overflow-y: auto;
  flex: 1;
}

/* ── LIST ITEM with edit button ─────────────────────────── */
.list-item {
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.list-item-text {
  flex: 1;
  min-width: 0;
}
.edit-inline-btn {
  width: 100%;
  margin-top: 6px;
  padding: 6px 10px;
  background: #1e3a5f;
  border: 1px solid #3b82f6;
  border-radius: 7px;
  color: #60a5fa;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  text-align: center;
}
.edit-inline-btn:hover {
  background: #1d4ed8;
  color: #fff;
}
.list-item.selected {
  background: #0f2240;
  border-color: #3b82f6;
  border-radius: 8px;
  padding: 8px 9px;
}