:root {
  --glass-bg: rgba(15,17,21,0.6);
  --glass-bd: rgba(255,255,255,0.12);
  --txt: #f5f7fb;
  --muted: #b7bdc7;
  --accent: #5bd0ff;
  --danger: #ff6961;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; background: #0f1115; color: var(--txt); font-family: system-ui, Segoe UI, Roboto, sans-serif; }
#map { height: 100vh; width: 100vw; }

/* Glass panels */
.glass { position: absolute; background: var(--glass-bg); border: 1px solid var(--glass-bd); backdrop-filter: blur(8px); border-radius: 12px; padding: 8px; }
#toolbox { left: 14px; top: 14px; display: flex; flex-direction: column; gap: 8px; z-index: 500; }
#hud { left: 14px; bottom: 14px; z-index: 500; line-height: 1.3; }
#editBar { top: 14px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; padding: 10px 12px; z-index: 600; }
#editBar.hidden { display: none; }
#editBar .spacer { flex: 1; }

.tool-btn { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid var(--glass-bd); border-radius: 10px; background: transparent; cursor: pointer; }
.tool-btn .iconify { font-size: 22px; color: var(--txt); opacity: 0.9; }
.tool-btn:hover { background: rgba(255,255,255,0.06); }
.tool-btn.active { outline: 2px solid var(--accent); }

/* Modal */
.modal { border: 1px solid var(--glass-bd); border-radius: 12px; padding: 0; background: #1a1f26; color: var(--txt); width: min(520px, 92vw); }
.modal::backdrop { background: rgba(0,0,0,0.6); backdrop-filter: blur(2px); }
.modal form { padding: 14px; }
.modal h3 { margin: 0 0 10px; }
.modal .row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px; }
.modal label { display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.modal input[type="text"], .modal input[type="color"], .modal input:not([type]) { padding: 8px 10px; border-radius: 8px; border: 1px solid #2a313b; background:#11161c; color: var(--txt); }
.modal .coords { margin: 8px 0 0; color: var(--muted); }
.modal menu { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }

.btn { padding: 8px 12px; border-radius: 8px; border: 1px solid var(--glass-bd); background: #222a33; color: var(--txt); cursor: pointer; }
.btn.primary { background: #22495a; border-color: #2c7a94; }
.btn.ghost { background: transparent; }
.btn.danger { background: #4a1e1e; border-color: #7a2c2c; color: #ffdede; }

/* Claims Look */
.leaflet-container { background:#0b0e13; }
.claim-shape { stroke-width: 2px; }
.claim-shape:hover { filter: drop-shadow(0 0 6px rgba(255,255,255,0.25)); }

/* Edit handles */
.handle { width: 10px; height: 10px; border: 2px solid white; background: #000; border-radius: 2px; }
.handle:hover { transform: scale(1.1); }

/* Small */
#hud { font-size: 13px; }
code { background: #0f141a; padding: 2px 6px; border-radius: 6px; border: 1px solid #212a33; }

.leaflet-tooltip.claim-tt { background:#0b1220ee; color:#eaf0ff; border:1px solid #2b3a57; padding:8px 10px; border-radius:10px; }
.claim-tt .tt-title { font-weight:700; margin-bottom:6px; }
.claim-tt .tt-title small { opacity:.7; font-weight:400; }
.claim-tt .tt-row { display:flex; gap:8px; align-items:center; font-size:12px; margin:2px 0; }
.claim-tt .tt-row span { opacity:.7; width:22px; display:inline-block; }
.claim-tt .tt-row b { font-weight:600; }
.claim-tt .tt-rect { margin-top:6px; opacity:.7; font-size:11px; }

.members-list { display:flex; flex-direction:column; gap:6px; margin:6px 0 10px; }
.member-row { display:grid; grid-template-columns:1fr 1fr auto; gap:6px; }
.member-row input { width:100%; }
.member-row .rm { padding:6px 10px; border-radius:6px; border:1px solid var(--danger); background:var(--danger); color:#fff; cursor:pointer; }
.claim-inactive { stroke-dasharray: 6 4; }