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:26px;height:16px;display:inline-block}.sw svg{width:100%;height:100%}
.newest{color:#14a33c}.recent{color:#111}.mid{color:#666;opacity:.8}.old{color:#8c8c8c;opacity:.6}
.orca-icon{width:46px;height:28px;filter:drop-shadow(0 1px 1.5px rgba(0,0,0,.45))}.orca-icon svg{width:100%;height:100%;display:block}
.leaflet-div-icon{background:none;border:none}
.pop h3{margin:0 0 4px;font-size:14px}.pop p{margin:3px 0}

#legend .credit{font-size:10px;color:#555;margin-top:4px}
.pimg{width:100%;max-height:200px;object-fit:cover;border-radius:6px;display:block;margin:6px 0 2px}.pop .credit{font-size:11px;color:#666;margin:0 0 4px}.idn{font-size:12px;background:#f2f6f9;padding:5px;border-radius:5px}