html,body{height:100%;margin:0;font-family:system-ui,-apple-system,sans-serif;background:#111;color:#eee}
body{display:flex;overflow:hidden}
#viewer-panel{width:300px;box-sizing:border-box;background:#17172a;border-right:1px solid #333;z-index:1000;overflow:auto}
#viewer-panel header{padding:16px;background:#242044}
.title-row{display:flex;align-items:center;justify-content:space-between;gap:12px}
h1{font-size:20px;margin:0}h2{font-size:14px;color:#b8a9ff;margin:0 0 10px}
#adminLink{text-decoration:none;font-size:18px}
select{width:100%;margin-top:10px;padding:7px;border-radius:6px;background:#2c2c46;color:#fff;border:1px solid #555}
section{padding:14px;border-bottom:1px solid #2f2f46}
.toggle-row{display:flex;justify-content:space-between;align-items:center}
.toggle-row input{transform:scale(1.25)}
#clickedCoordinate{font:13px ui-monospace,monospace;line-height:1.6;color:#ddd}
.status-section{font-size:11px;color:#aaa}
#updatedAt{margin-top:5px}
#map{height:100vh;flex:1;background:#0d0d14}
.leaflet-popup-content{font:13px system-ui,-apple-system,sans-serif;line-height:1.45}
@media(max-width:720px){#viewer-panel{width:220px}h1{font-size:16px}}

h1 small{font-size:10px;color:#aaa;font-weight:500}


/* Pixel-perfect map rendering: disable browser interpolation when zooming. */
.leaflet-image-layer,
img.leaflet-image-layer {
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}