body { font-family: sans-serif; margin: 0; padding: 1rem; }
#map { height: 50vh; width: 100%; margin-bottom: 1rem; }
.species-picker button, .color-picker button { font-size: 1.2rem; padding: 0.75rem 1rem; margin: 0.25rem; }
.swatch { width: 3rem; height: 3rem; border-radius: 50%; border: 2px solid #333; }
.swatch.yellow { background: #f5d90a; }
.swatch.brown { background: #8b5a2b; }
.swatch.green { background: #2e8b57; }
.swatch.blue { background: #1e6091; }
.selected { outline: 3px solid #000; }
#compass { position: relative; width: 8rem; height: 8rem; border-radius: 50%; border: 2px solid #333; margin: 1rem auto; background: #f5f5f5; }
.compass-label { position: absolute; font-size: 0.85rem; font-weight: bold; color: #555; user-select: none; }
.compass-n { top: 0.35rem; left: 50%; transform: translateX(-50%); }
.compass-s { bottom: 0.35rem; left: 50%; transform: translateX(-50%); }
.compass-e { right: 0.5rem; top: 50%; transform: translateY(-50%); }
.compass-w { left: 0.5rem; top: 50%; transform: translateY(-50%); }
#compass-needle { position: absolute; top: 50%; left: 50%; width: 3px; height: 38%; background: #c0392b; border-radius: 2px; transform-origin: bottom center; transform: translate(-50%, -100%) rotate(0deg); display: none; pointer-events: none; }
#compass-needle.active { display: block; }
#compass-readout { text-align: center; font-size: 0.9rem; color: #444; margin-top: 0.25rem; }
#analysis-map { height: 50vh; width: 100%; margin-bottom: 1rem; }
#sightings-table { border-collapse: collapse; width: 100%; }
#sightings-table th, #sightings-table td { padding: 0.4rem 0.6rem; text-align: left; border-bottom: 1px solid #ddd; }
.delete-btn { color: #c0392b; border: 1px solid #c0392b; background: none; border-radius: 4px; padding: 0.25rem 0.6rem; cursor: pointer; }
.delete-btn:hover { background: #c0392b; color: #fff; }
.sighting-marker { position: relative; }
.sighting-marker-dot { width: 26px; height: 26px; border-radius: 50%; border: 2px solid #222; color: #fff; font-weight: bold; font-size: 0.85rem; display: flex; align-items: center; justify-content: center; text-shadow: 0 0 2px #000; }
.sighting-arrow { position: absolute; top: 13px; left: 13px; width: 2px; height: 16px; background: #222; transform-origin: bottom center; }