.usrg-container {
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
}
.usrg-svg {
  width: 100%;
  height: auto;
}
.usrg-state {
  fill: var(--map-state-fill, #d1d5db);
  stroke: var(--map-state-stroke, #6b7280);
  stroke-width: 0.75;
  transition: fill 0.15s ease, stroke 0.15s ease;
  outline: none;
}
.usrg-state.hovered {
  fill: var(--map-state-hover, #93c5fd);
  stroke: var(--map-state-hover-stroke, #3b82f6);
}
.usrg-state.selected {
  fill: var(--map-state-selected, var(--accent-blue, #2563eb));
  stroke: var(--map-state-selected-stroke, #1d4ed8);
}
.usrg-container.is-disabled .usrg-state,
.usrg-state.disabled {
  cursor: not-allowed;
  opacity: 0.6;
}
.usrg-placeholder {
  fill: repeating-linear-gradient(
    45deg,
    #f3f4f6,
    #f3f4f6 10px,
    #e5e7eb 10px,
    #e5e7eb 20px
  );
}
.usrg-label {
  font: 600 9px/1 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  fill: var(--map-label, #111827);
  pointer-events: none;
}

/* Validation colors from design tokens */
.usrg-svg[data-selected-status='correct'] .usrg-state.selected {
  fill: var(--success-bg, #22c55e);
  stroke: var(--success-border, #16a34a);
}
.usrg-svg[data-selected-status='incorrect'] .usrg-state.selected {
  fill: var(--danger-bg, #ef4444);
  stroke: var(--danger-border, #dc2626);
}

/* Dark mode tweaks (uses global [data-theme="dark"]) */
[data-theme='dark'] .usrg-state {
  fill: var(--map-state-fill-dark, #374151);
  stroke: var(--map-state-stroke-dark, #9ca3af);
}
[data-theme='dark'] .usrg-state.hovered {
  fill: var(--map-state-hover-dark, #1e3a8a);
  stroke: var(--map-state-hover-stroke-dark, #60a5fa);
}
[data-theme='dark'] .usrg-state.selected {
  fill: var(--map-state-selected-dark, #1d4ed8);
  stroke: var(--map-state-selected-stroke-dark, #93c5fd);
}
@media (prefers-color-scheme: dark) {
  .usrg-label {
    fill: var(--map-label-dark, #e5e7eb);
  }
}