:root {
  --bg: #121212;
  --panel: #1c1c1c;
  --text: #eeeeee;
  --muted: #aaaaaa;
  --accent: #50aaff;
  --house: #50aaff;
  --player: #50ff50;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); font-family: Segoe UI, sans-serif; }
#map { position: absolute; inset: 0; background: #0b0b0b; }
#bar {
  position: absolute; z-index: 1000; left: 12px; top: 12px;
  background: var(--panel); padding: 10px 14px; border-radius: 6px;
  max-width: min(420px, calc(100vw - 24px));
  box-shadow: 0 2px 12px rgba(0,0,0,.45);
}
#bar h1 { margin: 0 0 4px; font-size: 16px; font-weight: 600; }
#bar .meta { font-size: 13px; color: var(--muted); }
#bar a { color: var(--accent); }
.leaflet-container { background: #0b0b0c; font: 13px Segoe UI, sans-serif; }