* { box-sizing: border-box; }
body {
  margin: 0 auto; padding: 16px; max-width: 1200px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: #1f2933; background: #fafafa; line-height: 1.5;
}
header h1 { margin: 0 0 4px; font-size: 1.5rem; }
header p { margin: 0 0 16px; color: #52606d; font-size: .95rem; }

#error-strip {
  background: #fde8e8; color: #9b1c1c; border: 1px solid #f8b4b4;
  border-radius: 6px; padding: 8px 12px; margin-bottom: 12px; font-size: .9rem;
}

.controls { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-bottom: 12px; }
.layer-tabs, .view-toggle, #layer-controls { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.controls button {
  border: 1px solid #cbd2d9; background: #fff; color: #323f4b;
  padding: 6px 12px; border-radius: 999px; font-size: .85rem; cursor: pointer;
}
.controls button[aria-selected="true"], .controls button.active {
  background: #1c7ed6; border-color: #1c7ed6; color: #fff;
}
#layer-controls select {
  padding: 5px 8px; border-radius: 6px; border: 1px solid #cbd2d9;
  font-size: .85rem; background: #fff;
}
#layer-controls .note { font-size: .8rem; color: #7b8794; }

.stage { display: flex; gap: 16px; align-items: flex-start; }
.map-wrap { flex: 1 1 auto; min-width: 0; }
#map { width: 100%; height: auto; display: block; }
#map path { stroke: #ffffff; stroke-width: .6; cursor: pointer; transition: opacity .1s; }
#map path.hover { stroke: #1f2933; stroke-width: 1.4; }

#legend { display: flex; flex-wrap: wrap; gap: 8px 14px; margin-top: 10px; font-size: .78rem; }
#legend .item { display: inline-flex; align-items: center; gap: 5px; }
#legend .swatch { width: 14px; height: 14px; border-radius: 3px; border: 1px solid rgba(0,0,0,.15); }

#panel {
  flex: 0 0 280px; background: #fff; border: 1px solid #e4e7eb; border-radius: 8px;
  padding: 14px; font-size: .9rem; min-height: 160px;
}
#panel h3 { margin: 0 0 8px; font-size: 1.05rem; }
#panel .hint { color: #7b8794; }
#panel .badge {
  display: inline-block; padding: 2px 10px; border-radius: 999px;
  font-weight: 600; font-size: .85rem; border: 1px solid rgba(0,0,0,.15);
}
#panel .src { color: #7b8794; font-size: .78rem; margin-bottom: 0; }
#panel .nodata { color: #7b8794; }
#panel .chart { margin-top: 10px; }
#panel .kv { margin: 4px 0; }
#panel .kv b { font-weight: 600; }
#panel .members {
  list-style: none; margin: 10px 0; padding: 8px 0 4px;
  border-top: 1px solid #e4e7eb; max-height: 260px; overflow-y: auto;
}
#panel .members li {
  display: flex; align-items: center; gap: 6px;
  padding: 2px 0; font-size: .84rem;
}
#panel .members .dot {
  width: 10px; height: 10px; border-radius: 3px; flex: none;
  border: 1px solid rgba(0,0,0,.15);
}
#panel .members .mval { margin-left: auto; color: #52606d; }
#panel .badge-sm { padding: 1px 8px; font-size: .76rem; font-weight: 600; }
#panel .members.windows { margin: 4px 0 8px; padding-top: 4px; max-height: none; }

footer { margin-top: 24px; border-top: 1px solid #e4e7eb; padding-top: 12px; font-size: .82rem; color: #52606d; }
footer h2 { font-size: .95rem; margin: 0 0 6px; color: #323f4b; }
footer ul { margin: 0 0 8px; padding-left: 18px; }
footer a { color: #1c7ed6; }
.disclaimer { font-style: italic; }

@media (max-width: 760px) {
  .stage { flex-direction: column; }
  #panel { flex: none; width: 100%; }
}