* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; font: 14px/1.4 system-ui, sans-serif; background: #222; color: #eee; }
body { display: flex; }
#map { flex: 1; background: #000; }
/* Chrome draws a focus box around a clicked SVG shape */
#map, .leaflet-interactive:focus { outline: none; }
.cursor-icon {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 3l14 8-6 1.5L9.5 19z' fill='%23333'/%3E%3C/svg%3E") center / 20px no-repeat;
}
#coords {
  position: absolute; bottom: 10px; left: 10px; z-index: 1000;
  background: rgba(0, 0, 0, .7); padding: 4px 8px; border-radius: 4px; font-family: monospace;
}
#panel { width: 340px; padding: 16px; overflow-y: auto; background: #2a2a2a; border-left: 1px solid #444; }
h1 { margin: 0 0 8px; font-size: 18px; }
.hint { color: #aaa; margin: 0 0 12px; }
.toggle { display: block; margin-bottom: 12px; }
#search {
  width: 100%; padding: 6px; margin-bottom: 4px; font: inherit;
  background: #1c1c1c; color: #eee; border: 1px solid #555; border-radius: 4px;
}
.list { list-style: none; padding: 0; margin: 0 0 12px; }
.list li { padding: 6px 8px; border-radius: 4px; cursor: pointer; display: flex; gap: 8px; align-items: center; }
.list li:hover { background: #333; }
.list li.active { background: #3d4a5c; }
.list .swatch { width: 12px; height: 12px; border-radius: 2px; flex: none; }
.list .text { display: flex; flex-direction: column; min-width: 0; }
.list small { color: #999; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.list small:empty { display: none; }
form label { display: block; margin-bottom: 10px; color: #bbb; }
form input, form select, textarea {
  display: block; width: 100%; margin-top: 4px; padding: 6px; font: inherit;
  background: #1c1c1c; color: #eee; border: 1px solid #555; border-radius: 4px;
}
input:invalid { border-color: #c44; }
.color-row { display: flex; gap: 6px; }
.color-row select { flex: 2; }
.color-row input { flex: 1; }
.geom { display: grid; gap: 6px; }
.geom.circle { grid-template-columns: repeat(3, 1fr); }
.geom.rect { grid-template-columns: repeat(2, 1fr); }
.geom-hint { display: block; margin-top: 4px; color: #999; }
.map-remove {
  position: absolute; transform: translate(-50%, calc(-100% - 8px)); white-space: nowrap;
  flex: none; padding: 4px 10px; background: #8a3a3a; box-shadow: 0 1px 4px rgba(0, 0, 0, .5);
}
.help { margin-bottom: 12px; color: #ccc; }
.help summary { cursor: pointer; font-weight: 600; margin-bottom: 6px; }
.help ol { padding-left: 18px; margin: 0 0 8px; }
.help li { margin-bottom: 6px; }
.help p { color: #aaa; margin: 0; }
kbd { border: 1px solid #666; border-bottom-width: 2px; border-radius: 3px; padding: 0 4px; font-size: 12px; }
code { background: #1c1c1c; padding: 0 4px; border-radius: 3px; }
.warning { background: #5a2a2a; border: 1px solid #a44; padding: 6px 8px; border-radius: 4px; margin-bottom: 10px; }
.warning ul { margin: 4px 0 0; padding-left: 18px; }
.edit-hint { background: #3d4a5c; padding: 6px 8px; border-radius: 4px; margin: 0 0 10px; }
textarea { font-family: monospace; font-size: 12px; resize: vertical; }
.buttons { display: flex; gap: 8px; margin-top: 10px; }
button { flex: 1; padding: 8px; font: inherit; border: 0; border-radius: 4px; background: #4a6fa5; color: #fff; cursor: pointer; }
button.danger { background: #8a3a3a; }
@media (max-width: 700px) {
  body { flex-direction: column; }
  #panel { width: auto; max-height: 45vh; border-left: 0; border-top: 1px solid #444; }
}