* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
body { display: flex; flex-direction: column; height: 100vh; background: #111; color: #eee; }

header { display: flex; align-items: center; gap: .8rem; padding: .5rem 1rem; background: #1a1a1a; border-bottom: 1px solid #333; flex-wrap: wrap; }
header h1 { font-size: 1rem; margin: 0; font-weight: 600; }
header #count { color: #9ad; font-size: .85rem; }
header .spacer { flex: 1; }
header label { font-size: .8rem; color: #aaa; display: flex; align-items: center; gap: .3rem; }
header input[type="number"] { width: 5rem; background: #222; border: 1px solid #333; color: #eee; border-radius: 4px; padding: .15rem .35rem; font-size: .8rem; }
header input[type="number"]:focus { outline: 1px solid #9ad; border-color: #9ad; }
header select { background: #222; border: 1px solid #333; color: #eee; border-radius: 4px; padding: .15rem .35rem; font-size: .8rem; }
header select:focus { outline: 1px solid #9ad; border-color: #9ad; }
header button#basemap-toggle { background: #222; border: 1px solid #333; color: #eee; padding: .2rem .6rem; border-radius: 4px; font-size: .8rem; cursor: pointer; }
header button#basemap-toggle:hover { background: #2a2a2a; border-color: #555; }
header a { color: #9ad; font-size: .85rem; text-decoration: none; }

main { display: grid; grid-template-columns: 1fr 360px; flex: 1; min-height: 0; }
#map { width: 100%; height: 100%; }
#list { background: #161616; overflow-y: auto; border-left: 1px solid #2a2a2a; padding: .5rem; }

.card { padding: .6rem; border: 1px solid #2a2a2a; border-radius: 6px; margin-bottom: .5rem; cursor: pointer; background: #1a1a1a; }
.card:hover { background: #222; border-color: #3a3a3a; }
.card .title { font-weight: 600; font-size: .9rem; margin-bottom: .25rem; color: #fff; }
.card .meta  { font-size: .8rem; color: #9ad; }
.card .addr  { font-size: .75rem; color: #888; margin-top: .25rem; }
.card .pill  { display: inline-block; padding: 0 .35rem; border: 1px solid #333; border-radius: 3px; margin-right: .25rem; font-size: .7rem; color: #aaa; }

dialog#detail { width: min(1600px, 95vw); max-height: 95vh; overflow-y: auto;
  background: #1a1a1a; color: #eee; border: 1px solid #333; border-radius: 8px; padding: 1.5rem 2rem; }
dialog#detail::backdrop { background: rgba(0,0,0,.7); }
#detail h2 { margin: 0 0 .5rem 0; font-size: 1.3rem; padding-right: 9rem; }
#detail #d-meta, #detail #d-address { color: #9ad; font-size: .95rem; margin: 0 0 .5rem 0; }
#detail #d-description { white-space: pre-wrap; font-size: .95rem; color: #ccc; line-height: 1.45; }
#detail #d-phone { font-size: .95rem; color: #fff; margin-top: .75rem; }
#detail #d-source { display: inline-block; margin-top: .5rem; color: #9ad; }
#detail .detail-links { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: .5rem; }
#detail .detail-links a { color: #9ad; font-size: .95rem; text-decoration: none; padding: .25rem .6rem; background: #222; border: 1px solid #333; border-radius: 4px; }
#detail .detail-links a:hover { background: #2a2a2a; border-color: #9ad; }
#detail .detail-links a[hidden] { display: none; }
#close-detail { position: absolute; top: .75rem; right: 1rem; background: transparent; border: 0; color: #ccc; font-size: 1.5rem; cursor: pointer; }
.nav-controls { position: absolute; top: .75rem; right: 3rem; display: flex; gap: .35rem; }
.nav-controls button { background: #222; border: 1px solid #3a3a3a; color: #eee; padding: .25rem .65rem; border-radius: 4px; cursor: pointer; font-size: .9rem; }
.nav-controls button:disabled { opacity: .35; cursor: not-allowed; }
.nav-controls button:hover:not(:disabled) { background: #2c2c2c; border-color: #555; }
#d-position { font-size: .8rem; color: #888; align-self: center; padding: 0 .25rem; }
#d-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .35rem; margin: .75rem 0 1rem 0; }
#d-gallery img { width: 100%; height: 180px; object-fit: cover; border-radius: 4px; cursor: zoom-in; }
#d-gallery img:hover { outline: 2px solid #9ad; }
.lightbox { position: fixed; inset: 0; background: rgba(0,0,0,.92); display: flex; align-items: center; justify-content: center; z-index: 9999; cursor: zoom-out; }
.lightbox img { max-width: 95vw; max-height: 95vh; object-fit: contain; }
.duplicate-badge, .reposted-badge { display: inline-block; padding: 0 .4rem; border-radius: 3px; font-size: .75rem; margin-right: .35rem; }
.duplicate-badge { background: #5a3; color: #fff; }
.reposted-badge { background: #c63; color: #fff; }

#d-enrich { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .5rem; margin: .75rem 0; }
.enrich-card { background: #161616; border: 1px solid #2a2a2a; border-radius: 6px; padding: .5rem .75rem; }
.enrich-card h4 { margin: 0 0 .35rem 0; font-size: .85rem; color: #9ad; font-weight: 600; }
.enrich-card ul { margin: 0; padding: 0; list-style: none; font-size: .85rem; color: #ccc; }
.enrich-card li { padding: .1rem 0; }
.enrich-card .dim { color: #777; font-size: .75rem; }
.enrich-card.streetview img { width: 100%; height: 140px; object-fit: cover; border-radius: 4px; }