html,body,#map{height:100%;margin:0;padding:0}
body{font-family:system-ui, -apple-system, "Helvetica Neue", Arial;color:#222;background:#f7f4ed}
#map{height:100vh}
.auth-gate{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,0.6);z-index:9999}
.auth-gate.hidden{display:none}
.auth-box{background:#fff;padding:20px;border-radius:8px;min-width:280px}
.auth-box input{width:100%;margin-top:6px;padding:6px}

.leaflet-popup-content-wrapper{border-radius:8px;box-shadow:0 18px 45px rgba(34,31,25,0.22)}
.leaflet-popup-content{width:280px!important;margin:0}
.popup{overflow:hidden;border-radius:8px;background:#fffdf8}
.leaflet-popup-content img.marker-thumb{width:100%;aspect-ratio:1;object-fit:cover;display:block}
.popup-body{padding:14px 14px 12px}
.popup h3{margin:0 0 8px;font-size:1.08rem;line-height:1.25;color:#27231d}
.popup-category{display:inline-flex;max-width:100%;margin-bottom:8px;padding:3px 7px;border:1px solid #d8d0c2;border-radius:999px;color:#5e5649;background:#f3eee5;font-size:0.7rem;font-weight:700;letter-spacing:0.04em;text-transform:uppercase}
.popup-meta{display:grid;gap:5px;margin:0 0 10px;padding:0}
.popup-meta div{display:grid;grid-template-columns:68px minmax(0,1fr);gap:8px;align-items:baseline}
.popup-meta dt{color:#8a8173;font-size:0.68rem;font-weight:700;letter-spacing:0.04em;text-transform:uppercase}
.popup-meta dd{overflow:hidden;margin:0;color:#3f3930;font-size:0.78rem;text-overflow:ellipsis;white-space:nowrap}
.popup-tags{display:flex;flex-wrap:wrap;gap:5px;margin:0 0 10px}
.popup-tags span{max-width:100%;padding:3px 7px;border-radius:999px;color:#2f625e;background:#e7f0ed;font-size:0.72rem;line-height:1.25}
.popup .desc{margin:0;color:#504a40;font-size:0.92rem;line-height:1.55}

/* marker icon styling (image pins) */
.marker-img{width:48px;height:48px;border:2px solid #fff;border-radius:6px;box-shadow:0 8px 18px rgba(0,0,0,0.28);object-fit:cover;display:block}
.marker-default{width:24px;height:24px;border:3px solid #fff;border-radius:50%;background:#1f6f78;box-shadow:0 8px 18px rgba(0,0,0,0.28)}

.sound-player{margin:0 14px 14px;padding:12px;border:1px solid #e2dbcf;border-radius:8px;background:#f8f5ee}
.player-main{display:flex;align-items:center;gap:10px}
.player-play{width:42px;height:42px;flex:0 0 42px;border:0;border-radius:50%;background:#1f6f78;color:#fff;font-size:0.9rem;font-weight:700;line-height:1;cursor:pointer}
.player-play:hover{background:#185a62}
.player-play:disabled{cursor:not-allowed;background:#a9a197}
.player-play:focus-visible{outline:3px solid rgba(31,111,120,0.28);outline-offset:2px}
.player-track{min-width:0;flex:1}
.player-title{overflow:hidden;margin-bottom:6px;color:#2d2922;font-size:0.82rem;font-weight:700;text-overflow:ellipsis;white-space:nowrap}
.player-seek{width:100%;height:16px;margin:0;accent-color:#1f6f78}
.player-time{display:flex;justify-content:space-between;margin-top:2px;color:#756d61;font-size:0.72rem;font-variant-numeric:tabular-nums}
.meter-panel{display:grid;grid-template-columns:10px 1fr;gap:8px;margin-top:10px}
.rms-meter{position:relative;overflow:hidden;width:10px;height:72px;border-radius:999px;background:#e3ded3}
.rms-meter span{position:absolute;right:0;bottom:0;left:0;width:100%;height:0;background:linear-gradient(0deg,#2f8f83,#d7b44a,#be493d)}
.spectrum-canvas{display:block;width:100%;height:72px;border-radius:6px;background:#f4f1eb}
.sound-player.is-playing{border-color:#bdd2cf;background:#f3f8f6}
.sound-player.has-error{border-color:#d9b8ad;background:#fff7f4}

/* admin styles */
.container{max-width:900px;margin:24px auto;padding:12px}
.row{display:flex;gap:12px}
label{display:block;margin:8px 0}
input,textarea,button{font:inherit}
textarea{width:100%;height:120px}
.map-panel{margin:18px 0}
.map-panel h2{margin:0 0 8px;font-size:1rem}
#admin-map{height:320px;border:1px solid #ddd;border-radius:8px}
.page-nav{position:fixed;top:14px;right:14px;z-index:1000;margin-bottom:12px}
.container .page-nav{position:static}
.nav-link{display:inline-block;padding:8px 12px;background:#007acc;color:#fff;border-radius:6px;text-decoration:none}
.nav-link:hover{background:#005fa3}
.muted{color:#666;font-size:0.9rem}
#marker-list{list-style:none;padding:0}
#marker-list li{padding:8px;border-bottom:1px solid #eee}
.actions{margin-top:12px}