* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: #0f0f1a; color: #e0e0e0; min-height: 100vh; }

header { background: #1a1a2e; padding: 1rem 2rem; border-bottom: 1px solid #2a2a4a; }
header h1 { font-size: 1.5rem; color: #00d4ff; }
.stats-bar { margin-top: 0.5rem; display: flex; gap: 1.5rem; flex-wrap: wrap; font-size: 0.85rem; color: #aaa; }

nav { display: flex; gap: 0.5rem; padding: 1rem 2rem; background: #16162a; border-bottom: 1px solid #2a2a4a; overflow-x: auto; }
nav button { background: #2a2a4a; border: 1px solid #3a3a5a; color: #ccc; padding: 0.5rem 1rem; border-radius: 6px; cursor: pointer; white-space: nowrap; font-size: 0.85rem; }
nav button:hover { background: #3a3a5a; }
nav button.active { background: #00d4ff; color: #000; border-color: #00d4ff; font-weight: 600; }

main { padding: 2rem; max-width: 1400px; margin: 0 auto; }
.placeholder { text-align: center; padding: 4rem; color: #666; font-size: 1.2rem; }

.section { margin-bottom: 2rem; }
.section h2 { font-size: 1.1rem; color: #00d4ff; margin-bottom: 1rem; padding-bottom: 0.5rem; border-bottom: 1px solid #2a2a4a; }

.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1rem; margin-bottom: 1rem; }
.card { background: #1a1a2e; border: 1px solid #2a2a4a; border-radius: 8px; padding: 1rem; }
.card .label { font-size: 0.75rem; color: #888; text-transform: uppercase; letter-spacing: 0.5px; }
.card .value { font-size: 1.5rem; font-weight: 700; color: #fff; margin-top: 0.25rem; }

#map { height: 400px; border-radius: 8px; border: 1px solid #2a2a4a; }

table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
th, td { padding: 0.5rem 0.75rem; text-align: left; border-bottom: 1px solid #2a2a4a; }
th { color: #888; font-weight: 600; text-transform: uppercase; font-size: 0.75rem; letter-spacing: 0.5px; }
tr:hover td { background: #1e1e36; }

.chart-container { background: #1a1a2e; border: 1px solid #2a2a4a; border-radius: 8px; padding: 1rem; max-width: 600px; }

.key-content { background: #0a0a14; border: 1px solid #3a3a5a; border-radius: 4px; padding: 0.5rem; font-family: monospace; font-size: 0.8rem; color: #0f0; word-break: break-all; max-height: 200px; overflow-y: auto; white-space: pre-wrap; }

@media (max-width: 768px) {
  nav { padding: 0.5rem 1rem; }
  main { padding: 1rem; }
  .card-grid { grid-template-columns: 1fr; }
}