* { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Courier New', Courier, monospace; }
body, html { height: 100%; width: 100%; background: #111; color: #eee; overflow: hidden; }

#app { display: flex; flex-direction: column; height: 100vh; }

header { background: #000; padding: 15px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #333; z-index: 10; }
.logo { font-size: 24px; font-weight: bold; letter-spacing: 2px; color: #fff; }
button { background: #333; color: #fff; border: 1px solid #555; padding: 8px 15px; cursor: pointer; border-radius: 3px; font-weight: bold; }
button:hover { background: #555; }

main { flex-grow: 1; position: relative; }

#map { position: absolute; top: 0; bottom: 0; left: 0; right: 0; background: #222; z-index: 1; cursor: crosshair; }

#map-overlay-text { position: absolute; top: 20px; left: 50%; transform: translateX(-50%); background: rgba(0, 100, 0, 0.9); color: white; padding: 10px 20px; border-radius: 5px; z-index: 5; font-weight: bold; pointer-events: none; }

/* Custom popup width to fit images */
.leaflet-popup-content { width: 220px !important; }
.leaflet-popup-content-wrapper { background: #000; color: #fff; border: 1px solid #444; border-radius: 0; }
.leaflet-popup-tip { background: #000; border: 1px solid #444; }

.modal { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.85); z-index: 1000; display: flex; justify-content: center; align-items: center; }
.hidden { display: none !important; }
.modal-content { background: #111; padding: 25px; border: 1px solid #444; width: 90%; max-width: 400px; display: flex; flex-direction: column; gap: 15px; max-height: 90vh; overflow-y: auto; }
input, textarea, select { background: #222; color: #0f0; border: 1px solid #444; padding: 10px; width: 100%; }
textarea { height: 80px; resize: none; }
form { display: flex; flex-direction: column; gap: 10px; }
.warning-text { font-size: 12px; color: #ff4444; margin-top: 5px; }