* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; font-family: -apple-system, system-ui, Segoe UI, Roboto, sans-serif; background: #0b0e14; color: #e6e9ef; }
#map { position: absolute; inset: 0; }
#brand {
  position: absolute; top: 12px; left: 12px; z-index: 5;
  background: rgba(17,20,28,.85); backdrop-filter: blur(8px);
  padding: 8px 14px; border-radius: 12px; font-weight: 600; font-size: 15px;
  box-shadow: 0 4px 20px rgba(0,0,0,.4);
}
#brand #stats { font-weight: 400; opacity: .7; font-size: 13px; margin-left: 6px; }

#viewer {
  position: absolute; right: 12px; top: 12px; bottom: 12px; width: min(46vw, 560px); z-index: 10;
  background: #11141c; border-radius: 16px; overflow: hidden; display: flex; flex-direction: column;
  box-shadow: 0 12px 48px rgba(0,0,0,.6);
}
#viewer img { width: 100%; flex: 1; object-fit: contain; background: #000; min-height: 0; }
#v-meta { padding: 12px 16px; font-size: 13px; line-height: 1.6; border-top: 1px solid #232838; }
#v-meta b { color: #7db3ff; }
#v-close {
  position: absolute; top: 10px; right: 10px; z-index: 11; width: 34px; height: 34px; border: 0;
  border-radius: 50%; background: rgba(0,0,0,.6); color: #fff; font-size: 16px; cursor: pointer;
}
@media (max-width: 720px) { #viewer { width: auto; left: 12px; } }