html,body{margin:0;height:100%;font-family:system-ui,sans-serif}
body{display:flex;flex-direction:column}
header{background:#0b2740;color:#fff;padding:10px 14px}h1{margin:0;font-size:1.05rem}
#map{flex:1}
#legend{position:absolute;bottom:18px;left:10px;z-index:1000;background:#fffe;padding:8px 10px;border-radius:8px;font-size:12px;box-shadow:0 1px 4px #0004}
#legend div{display:flex;align-items:center;gap:6px;margin:2px 0}
.sw{width:22px;height:11px;-webkit-mask:url(orca.svg) center/contain no-repeat;mask:url(orca.svg) center/contain no-repeat}
.newest{background:#14a33c}.recent{background:#111}.mid{background:#666;opacity:.8}.old{background:#8c8c8c;opacity:.6}
.orca-icon{width:44px;height:22px;-webkit-mask:url(orca.svg) center/contain no-repeat;mask:url(orca.svg) center/contain no-repeat;filter:drop-shadow(0 0 1px #fff) drop-shadow(0 0 1px #222)}
.leaflet-div-icon{background:none;border:none}
.pop h3{margin:0 0 4px;font-size:14px}.pop p{margin:3px 0}