relion-map {
  --rm-ocean: #101f34;
  --rm-line: #344761;
  --rm-text: #f6f8fc;
  --rm-muted: #bac8d8;
  --rm-focus: #ff8554;
  --rm-highlight: #89b5f0;
  display: block;
  min-width: 0;
  color: var(--rm-text);
}

relion-map *,
relion-map *::before,
relion-map *::after {
  box-sizing: border-box;
}

.rm-panel {
  overflow: hidden;
  background: var(--rm-ocean);
  border: 1px solid var(--rm-line);
  border-radius: 16px;
}

.rm-toolbar,
.rm-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px 20px;
  padding: 15px clamp(14px, 2.2vw, 28px);
}

.rm-toolbar {
  border-bottom: 1px solid var(--rm-line);
}

.rm-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.rm-filters button,
.rm-country-control select {
  min-height: 42px;
  color: var(--rm-muted);
  font: inherit;
  font-size: 0.84rem;
  font-weight: 650;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  cursor: pointer;
}

.rm-filters button {
  padding: 5px 10px;
}

.rm-all-narrow { display: none; }

.rm-filters button:hover,
.rm-filters button[aria-pressed="true"] {
  color: var(--rm-text);
  border-color: #54759d;
  background-color: #263e5a;
}

.rm-filters button:focus-visible,
.rm-country-control select:focus-visible,
.rm-caption a:focus-visible {
  outline: 2px solid var(--rm-focus);
  outline-offset: 3px;
}

.rm-country-control {
  display: block;
  min-width: 175px;
}

.rm-country-control select {
  display: block;
  width: 100%;
  max-width: 245px;
  padding: 4px 8px;
  color-scheme: dark;
  border-color: var(--rm-line);
  background-color: #192c44;
}

.rm-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.rm-stage {
  position: relative;
  padding: 6px 0 1px;
  background: radial-gradient(ellipse at 54% 35%, #1b3653 0%, var(--rm-ocean) 67%);
}

.rm-stage svg {
  display: block;
  width: 100%;
  aspect-ratio: 25 / 11;
  height: auto;
  overflow: hidden;
  touch-action: manipulation;
}

.rm-grid {
  fill: none;
  stroke: #6d91b4;
  stroke-width: 0.65px;
  stroke-opacity: 0.32;
  pointer-events: none;
}

.rm-country {
  fill: #30435b;
  stroke: #101d31;
  stroke-width: 0.75px;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  cursor: pointer;
  transition: fill 150ms ease, opacity 150ms ease;
}

.rm-europe { fill: #6695ce; }
.rm-middle-east { fill: #5d82b3; }
.rm-central-asia { fill: #739ccb; }
.rm-asia { fill: #5c89ba; }
.rm-africa { fill: #527ca9; }
.rm-americas { fill: #5d8bb9; }
.rm-market-point { fill: #c2dbf6; stroke-width: 1.1px; }
.rm-country[data-country="CZE"] { fill: #a9cbf1; }
.rm-country.is-dimmed { opacity: 0.35; }

.rm-country.is-hovered,
.rm-country.is-selected {
  fill: #adcfff;
  stroke: #e3eeff;
  stroke-width: 1.35px;
  opacity: 1;
}

.rm-country.rm-other.is-hovered,
.rm-country.rm-other.is-selected {
  fill: #6b7b8a;
}

.rm-country.rm-excluded.is-hovered,
.rm-country.rm-excluded.is-selected {
  stroke: #a9b4c0;
}

.rm-hatch-base { fill: #3c444d; }
.rm-hatch-line { stroke: #69737e; stroke-width: 1.2; }

.rm-hub {
  cursor: pointer;
}

.rm-hub-target { fill: transparent; }
.rm-hub-center { fill: var(--rm-focus); }
.rm-hub-ring { fill: #f77c4c35; stroke: var(--rm-focus); stroke-width: 1.4; }
.rm-hub-leader { fill: none; stroke: var(--rm-focus); stroke-width: 1; }
.rm-hub text {
  fill: var(--rm-text);
  stroke: var(--rm-ocean);
  stroke-width: 2.8;
  stroke-linejoin: round;
  paint-order: stroke;
  font-size: 13px;
  font-weight: 750;
  letter-spacing: 0.02em;
}

.rm-stage svg:not([data-map-region="all"]) .rm-hub text { font-size: 10px; }

.rm-tip {
  position: absolute;
  z-index: 1;
  inset: 0 auto auto 0;
  padding: 7px 11px;
  color: #13243b;
  background: #eef5ff;
  border-radius: 4px;
  box-shadow: 0 5px 15px #06132666;
  font-size: 0.76rem;
  font-weight: 750;
  line-height: 1.4;
  pointer-events: none;
  white-space: nowrap;
}

.rm-summary {
  border-top: 1px solid var(--rm-line);
}

.rm-detail {
  display: grid;
  gap: 3px;
}

.rm-detail strong {
  font-size: 0.98rem;
  line-height: 1.3;
}

.rm-detail span,
.rm-legend,
.rm-caption {
  color: var(--rm-muted);
  font-size: 0.76rem;
  line-height: 1.5;
}

.rm-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 17px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.rm-legend li {
  display: flex;
  align-items: center;
  gap: 7px;
}

.rm-key {
  display: inline-block;
  width: 11px;
  height: 11px;
}

.rm-key-hub {
  background: var(--rm-focus);
  border-radius: 50%;
}

.rm-key-region { background: var(--rm-highlight); }

.rm-key-excluded {
  background: repeating-linear-gradient(48deg, #3c444d 0 3px, #69737e 3px 4px);
}

.rm-caption {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 3px 12px;
  margin-top: 9px;
}

.rm-caption a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (max-width: 620px) {
  .rm-panel { border-radius: 10px; }

  .rm-toolbar,
  .rm-summary {
    gap: 8px;
    padding: 9px 12px;
  }

  .rm-country-control,
  .rm-country-control select { width: 100%; max-width: none; }

  .rm-filters {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 2px;
    width: 100%;
  }

  .rm-filters button { padding-inline: 3px; font-size: 0.75rem; line-height: 1.2; }
  .rm-all-wide { display: none; }
  .rm-all-narrow { display: inline; }
  .rm-filters button,
  .rm-country-control select { min-height: 44px; }

  .rm-hub text { font-size: 21px; }
  .rm-hub-leader { stroke-width: 1.8; }
  .rm-hub-ring { stroke-width: 2; }
}

@media (prefers-reduced-motion: reduce) {
  .rm-country { transition: none; }
}

relion-map[data-map-state="waiting"],
relion-map[data-map-state="loading"] {
  min-height: clamp(240px, 43vw, 580px);
}