*{box-sizing:border-box}
body{margin:0;font:15px/1.4 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;background:#0f1a24;color:#e8eef3}
a{color:#8fd0ff}
.muted{color:#9fb1c0}
.top{padding:12px 18px 4px}
.top h1{margin:0;font-size:1.6rem}
.tag{margin:2px 0 0;color:#b9c8d4}
.layout{display:grid;gap:14px;padding:10px 18px 18px;grid-template-columns:minmax(0,1fr) 330px;grid-template-areas:"map right" "bottom bottom" "extras extras"}
.mapcol{grid-area:map;min-width:0}
.right{grid-area:right;display:flex;flex-direction:column;gap:10px}
.bottom{grid-area:bottom;display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
#map{height:min(62vh,600px);min-height:340px;border-radius:12px;border:1px solid #2a3c4c}
.tools{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:8px;align-items:flex-start}
.search{position:relative;flex:1 1 240px}
.search input{width:100%;padding:9px 11px;border-radius:8px;border:1px solid #3a5063;background:#16242f;color:#e8eef3;font-size:15px}
#results{position:absolute;z-index:1000;left:0;right:0;top:100%;margin:2px 0 0;padding:0;list-style:none;background:#16242f;border:1px solid #3a5063;border-radius:8px;max-height:260px;overflow:auto}
#results li{padding:8px 11px;cursor:pointer}
#results li:hover,#results li.act{background:#24384a}
button{padding:9px 12px;border-radius:8px;border:1px solid #3a5063;background:#1d3142;color:#e8eef3;font-size:14px;cursor:pointer}
button:hover{background:#264158}
button.on{background:#2b6cb0;border-color:#5aa0e6}
.spot{margin-top:8px;padding:9px 12px;background:#16242f;border:1px solid #2a3c4c;border-radius:10px}
.spot strong{font-size:1.05rem}
.hint{font-size:13px;margin:6px 2px 0}
.card{display:flex;gap:11px;align-items:flex-start;padding:11px 12px;border-radius:12px;background:#17293a;border:1px solid #2a3c4c;text-decoration:none;color:inherit;transition:transform .08s,border-color .1s}
.card:hover{border-color:#5aa0e6;transform:translateY(-1px)}
.card .ic{font-size:1.7rem;line-height:1}
.card h3{margin:0;font-size:1rem;color:#fff}
.card p{margin:2px 0 0;font-size:13px;color:#b9c8d4}
.card .go{display:inline-block;margin-top:5px;font-size:12px;color:#8fd0ff}
.card .tz{display:block;margin-top:3px;font-size:12px;color:#d6e6a8}
.card.soon{opacity:.6;cursor:default}
.card.soon .go{color:#e0b050}
.secthead{grid-column:1/-1;margin:4px 0 0;font-size:.85rem;text-transform:uppercase;letter-spacing:.06em;color:#9fb1c0}
.right .secthead{margin:0}
.foot{padding:0 18px 18px;font-size:12px}
.leaflet-container{background:#0b1218}
.popbtn{margin-top:4px;padding:6px 10px;font-size:13px;background:#2b6cb0;color:#fff;border:0}
.picking #map{cursor:crosshair;outline:3px solid #5aa0e6}
@media (max-width:860px){
  .layout{grid-template-columns:1fr;grid-template-areas:"map" "right" "bottom" "extras";padding:8px 10px 14px}
  .right{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
  .top{padding:10px 12px 0}.top h1{font-size:1.3rem}
  #map{height:48vh;min-height:280px}
  .foot{padding:0 12px 14px}
}
.spotrow{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;align-items:flex-start}
.spotbtns{display:flex;gap:6px}
.daterow{margin-top:8px;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.daterow input{padding:7px 9px;border-radius:8px;border:1px solid #3a5063;background:#0f1a24;color:#e8eef3;font-size:15px;color-scheme:dark}
.small{font-size:12px}
.card .dl{display:block;margin-top:3px;font-size:12px;color:#c7b7ff}
.lbl{padding:0 6px;border-radius:6px;color:#0f1a24}
.lbl-Positive{background:#4fd18b}.lbl-Good{background:#a7d35a}.lbl-Fair{background:#e7b84a}.lbl-Marginal{background:#d98b4a}.lbl-Poor{background:#e0675a}
.extras{grid-area:extras;display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.box{background:#16242f;border:1px solid #2a3c4c;border-radius:10px;padding:9px 12px}
.box summary{cursor:pointer;font-weight:600}
.box p{font-size:14px;color:#c9d6e0}
.favs{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:6px}
.favs li{display:flex;gap:4px}
.favgo{flex:1;text-align:left}
.mini{padding:6px 9px}
.pin{background:none;border:0}
.pindot{width:22px;height:22px;border-radius:50%;background:#2b8cff;border:3px solid #fff;box-shadow:0 0 0 2px #2b8cff80,0 2px 6px #0008}