.photo-picker-title { display: block; color: #345b65; font-size: 16px; font-weight: 700; margin-bottom: 12px; }
.photo-pick-button { display: inline-flex !important; align-items: center; cursor: pointer; color: var(--teal) !important; }
.gallery-file-input { position: absolute; width: 1px !important; height: 1px !important; padding: 0 !important; opacity: 0; overflow: hidden; }
.photo-pick-button:focus-within,.photo-pick-button:has(+input:focus-visible) { outline: 3px solid #a9d4df; outline-offset: 3px; }
.photo-count { color: #006873; font-size: 15px; font-weight: 700; margin: 14px 0 10px; }
.photo-previews { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 10px; }
.photo-preview { position: relative; min-width: 0; }
.photo-preview img { display: block; aspect-ratio: 1; object-fit: cover; width: 100%; border-radius: 10px; }
.photo-preview > span { position: absolute; left: 6px; bottom: 6px; padding: 3px 6px; border-radius: 5px; background: #062f38cc; color: white; font-size: 12px; }
.remove-photo { position: absolute; top: 4px; right: 4px; width: 32px; height: 32px; border: 1px solid #a8c6c5; border-radius: 50%; font-size: 22px; color: #08333c; background: white; cursor: pointer; }
.photo-error { color: #9c2929; font-size: 15px; line-height: 1.5; margin: 12px 0 0; }
.fauna-cover { border: 0; padding: 0; width: 100%; cursor: pointer; position: relative; }
.sighting-photo-badge { position: absolute; right: 10px; bottom: 10px; z-index: 1; font: 700 13px/1.5 Arial,sans-serif; background: #062f38dc; color: white; border-radius: 20px; padding: 4px 10px; }
.sighting-thumbnails { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 5px; padding: 8px; }
.sighting-thumbnails button { min-width: 0; height: 52px; border: 1px solid #c8dfdd; border-radius: 7px; background: #e3f2f1; cursor: pointer; padding: 0; overflow: hidden; }
.sighting-thumbnails .media-fallback { font-size: 20px; }
.sighting-thumbnails .media-fallback small { display: none; }
.sighting-gallery-image { display: block; width: 100%; height: min(50dvh,500px); object-fit: contain; background: #062f38; border-radius: 10px; }
.sighting-gallery-controls { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 16px; }
#sightingGalleryPosition { color: #345b65; font-size: 16px; white-space: nowrap; }
.sighting-location-hint { display:block; margin-top:7px; font-size:13px; line-height:1.4; color:#516e75; }
#sightingLocationSearch { margin-bottom:8px; }
#sightingOtherLocation[hidden] { display:none; }
.location-fauna-section { border-bottom:1px solid #d8e4e3; padding-bottom:22px; margin-bottom:22px; }
.location-fauna-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.location-fauna-heading h3 { margin:0 0 6px; font-size:20px; }
.location-fauna-heading p { margin:0; font-size:14px; color:#516e75; }
.location-fauna-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.location-fauna-grid .fauna-card { min-width:0; }
.location-fauna-grid .fauna-card h3 { font-size:18px; overflow-wrap:anywhere; }
.location-fauna-grid .fauna-card p { font-size:14px; line-height:1.5; }
.location-fauna-grid .fauna-photo { height:170px; }
.location-fauna-empty { grid-column:1/-1; padding:18px; border:1px dashed #bed6d7; border-radius:10px; color:#516e75; }
@media screen and (max-width:480px) { .location-fauna-grid { grid-template-columns:1fr; } .location-fauna-heading { align-items:flex-start; flex-direction:column; } }
@media screen and (max-width:680px) { .photo-previews { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; } .remove-photo { width: 44px; height: 44px; } .sighting-gallery-controls button { font-size: 14px; padding: 10px; } }