.jn-teryt-map {
  --jn-map-ink: #101d3b;
  --jn-map-muted: #5b6984;
  --jn-map-line: #cbd6e8;
  --jn-map-soft: #f2f6fc;
  --jn-map-primary: #2854dc;
  --jn-map-primary-dark: #12368f;
  --jn-map-accent: #f5a524;
  color: var(--jn-map-ink);
  background: #fff;
  border: 1px solid var(--jn-map-line);
  border-radius: 20px;
  box-shadow: 0 22px 60px rgba(18, 40, 82, .14), 0 3px 12px rgba(18, 40, 82, .07);
  font-family: inherit;
  overflow: hidden;
}

.jn-teryt-map *, .jn-teryt-map *::before, .jn-teryt-map *::after { box-sizing: border-box; }
.jn-teryt-map__header { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; padding: 30px 32px 24px; background: linear-gradient(120deg, #fff 0%, #f7faff 100%); border-bottom: 1px solid var(--jn-map-line); }
.jn-teryt-map__header h2 { margin: 0 0 8px; color: var(--jn-map-ink); font-size: clamp(24px, 2.2vw, 34px); line-height: 1.15; }
.jn-teryt-map__header p { max-width: 760px; margin: 0; color: var(--jn-map-muted); font-size: 17px; line-height: 1.55; }
.jn-teryt-map__source { flex: 0 0 auto; padding: 8px 12px; color: #173d94; background: #e7efff; border: 1px solid #c8d7f7; border-radius: 999px; font-size: 13px; font-weight: 800; }
.jn-teryt-map__breadcrumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; min-height: 62px; padding: 10px 30px; background: #eaf1fb; border-bottom: 1px solid #c6d3e7; box-shadow: inset 0 -1px 0 rgba(255,255,255,.75); }
.jn-teryt-map__breadcrumbs-label { margin-right: 4px; color: #556985; font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.jn-teryt-map__crumb { appearance: none; padding: 7px 10px; color: var(--jn-map-primary-dark); background: transparent; border: 0; border-radius: 8px; font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; }
.jn-teryt-map__crumb:hover, .jn-teryt-map__crumb:focus-visible { color: #fff; background: var(--jn-map-primary); outline: 3px solid rgba(40,84,220,.18); }
.jn-teryt-map__crumb[aria-current="location"] { color: #fff; background: #173f9f; box-shadow: 0 4px 10px rgba(23,63,159,.16); cursor: default; }
.jn-teryt-map__crumb-separator { color: #9aa8c1; }
.jn-teryt-map__layout { display: grid; grid-template-columns: minmax(360px, .82fr) minmax(0, 1.58fr); min-height: 690px; }
.jn-teryt-map__canvas-wrap { position: relative; display: grid; place-items: center; min-width: 0; min-height: 650px; padding: 28px; background: radial-gradient(circle at 45% 44%, #f8fbff 0%, #edf3fb 62%, #e5edf8 100%); box-shadow: inset -14px 0 28px rgba(20,49,102,.035); }
.jn-teryt-map__canvas { display: block; width: 100%; height: 600px; overflow: visible; filter: drop-shadow(0 13px 17px rgba(13, 39, 90, .22)); }
.jn-teryt-map__region { fill: var(--jn-region-fill, #739cdf); stroke: #fff; stroke-width: 2; vector-effect: non-scaling-stroke; cursor: pointer; transition: fill .16s ease, filter .16s ease, opacity .16s ease, stroke .16s ease; }
.jn-teryt-map__region[data-tone="0"] { --jn-region-fill: #557fd0; }
.jn-teryt-map__region[data-tone="1"] { --jn-region-fill: #6c96df; }
.jn-teryt-map__region[data-tone="2"] { --jn-region-fill: #82a9e6; }
.jn-teryt-map__region[data-tone="3"] { --jn-region-fill: #416fc7; }
.jn-teryt-map__region[data-tone="4"] { --jn-region-fill: #739bdd; }
.jn-teryt-map__region[data-tone="5"] { --jn-region-fill: #91b3eb; }
.jn-teryt-map__region:hover, .jn-teryt-map__region:focus { fill: #1e4ebc; stroke: #ffd26a; stroke-width: 3; filter: brightness(1.08) drop-shadow(0 3px 5px rgba(13,39,90,.3)); outline: none; }
.jn-teryt-map__region.is-selected { fill: #0f2f7b; stroke: var(--jn-map-accent); stroke-width: 3.5; filter: drop-shadow(0 4px 6px rgba(13,39,90,.35)); }
.jn-teryt-map__region.has-metric { fill: color-mix(in srgb, #91b3eb calc(100% - var(--jn-map-strength, 0%)), #12368f var(--jn-map-strength, 0%)); }
.jn-teryt-map__region.has-metric.is-selected { fill: var(--jn-map-primary-dark); }
.jn-teryt-map__status { position: absolute; z-index: 2; top: 20px; left: 22px; padding: 9px 12px; color: #314461; background: rgba(255,255,255,.96); border: 1px solid #becbe0; border-radius: 10px; box-shadow: 0 5px 16px rgba(18,40,82,.1); font-size: 14px; font-weight: 700; }
.jn-teryt-map__status:empty { display: none; }
.jn-teryt-map__legend { position: absolute; right: 22px; bottom: 18px; display: flex; align-items: center; gap: 7px; padding: 8px 10px; color: var(--jn-map-muted); background: rgba(255,255,255,.92); border: 1px solid var(--jn-map-line); border-radius: 9px; font-size: 12px; }
.jn-teryt-map__legend[hidden] { display: none; }
.jn-teryt-map__legend i { width: 76px; height: 9px; background: linear-gradient(90deg, #dfe8f8, #3155dc); border-radius: 999px; }
.jn-teryt-map__legend b { margin-left: 4px; color: var(--jn-map-ink); font-weight: 700; }
.jn-teryt-map__panel { position: relative; z-index: 1; min-width: 0; padding: 26px; border-right: 1px solid #c5d1e4; background: linear-gradient(180deg, #fff 0%, #f7faff 100%); box-shadow: 8px 0 24px rgba(18,40,82,.065); }
.jn-teryt-map__levels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin: 0 0 20px; padding: 0; list-style: none; }
.jn-teryt-map__levels li { position: relative; display: grid; justify-items: center; gap: 6px; color: #7887a0; font-size: 11px; font-weight: 800; text-align: center; }
.jn-teryt-map__levels li:not(:last-child)::after { content: ""; position: absolute; z-index: -1; top: 14px; left: calc(50% + 14px); width: calc(100% - 28px); height: 2px; background: #d4deed; }
.jn-teryt-map__levels b { display: grid; place-items: center; width: 29px; height: 29px; color: #52647f; background: #eef2f8; border: 2px solid #cad5e6; border-radius: 50%; font-size: 12px; }
.jn-teryt-map__levels li.is-active { color: #15398e; }
.jn-teryt-map__levels li.is-active b { color: #fff; background: var(--jn-map-primary); border-color: var(--jn-map-primary); box-shadow: 0 0 0 5px rgba(40,84,220,.11); }
.jn-teryt-map__levels li.is-complete { color: #2450bd; }
.jn-teryt-map__levels li.is-complete b { color: #fff; background: #547bd4; border-color: #547bd4; }
.jn-teryt-map__levels li.is-complete:not(:last-child)::after { background: #7899df; }
.jn-teryt-map__selection { position: relative; padding: 20px 20px 20px 24px; background: linear-gradient(135deg, #e8f0ff, #f4f7ff); border: 1px solid #b9cdf5; border-radius: 14px; box-shadow: 0 8px 20px rgba(30,72,160,.09); overflow: hidden; }
.jn-teryt-map__selection::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 5px; background: var(--jn-map-primary); }
.jn-teryt-map__selection span, .jn-teryt-map__selection small { display: block; color: var(--jn-map-muted); font-size: 14px; }
.jn-teryt-map__selection strong { display: block; margin: 5px 0; color: var(--jn-map-ink); font-size: 23px; line-height: 1.25; }
.jn-teryt-map__drill { width: 100%; margin-top: 11px; padding: 12px 14px; color: #173f9f; background: #fff; border: 1px solid #91afea; border-radius: 10px; box-shadow: 0 5px 14px rgba(30,72,160,.08); font: inherit; font-size: 14px; font-weight: 800; cursor: pointer; }
.jn-teryt-map__drill[hidden] { display: none; }
.jn-teryt-map__drill:hover, .jn-teryt-map__drill:focus-visible { color: #fff; background: #173f9f; border-color: #173f9f; outline: 3px solid rgba(40,84,220,.14); }
.jn-teryt-map__list-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin: 25px 0 5px; }
.jn-teryt-map__list-heading h3 { margin: 2px 0 0; color: var(--jn-map-ink); font-size: 19px; line-height: 1.25; }
.jn-teryt-map__step-label { color: #3158b4; font-size: 11px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.jn-teryt-map__list-count { display: grid; place-items: center; min-width: 34px; height: 30px; padding: 0 9px; color: #15398e; background: #e8f0ff; border: 1px solid #c1d2f3; border-radius: 999px; font-size: 13px; font-weight: 900; }
.jn-teryt-map__hint { min-height: 38px; margin: 0 0 12px; color: #60708a; font-size: 13px; line-height: 1.45; }
.jn-teryt-map__list { display: grid; gap: 7px; max-height: 390px; padding: 2px 5px 2px 0; overflow: auto; scrollbar-color: #8ca3c8 #edf2f8; }
.jn-teryt-map__list-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; background: #f7f9fd; border: 1px solid #dde5f0; border-radius: 10px; overflow: hidden; transition: border-color .14s ease, box-shadow .14s ease, transform .14s ease; }
.jn-teryt-map__list-item:hover, .jn-teryt-map__list-item:focus-within { border-color: #91afea; box-shadow: 0 4px 12px rgba(28,65,137,.1); transform: translateX(2px); }
.jn-teryt-map__list-item.is-selected { background: linear-gradient(135deg, #315ed9, #173f9f); border-color: #15398e; box-shadow: 0 6px 14px rgba(23,63,159,.2); }
.jn-teryt-map__list-button { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; padding: 11px 10px 11px 12px; color: var(--jn-map-ink); background: transparent; border: 0; font: inherit; font-size: 15px; line-height: 1.25; text-align: left; cursor: pointer; }
.jn-teryt-map__list-button:focus-visible { outline: 3px solid rgba(40,84,220,.18); outline-offset: -3px; }
.jn-teryt-map__list-button span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.jn-teryt-map__list-button span:last-child { flex: 0 0 auto; padding: 3px 7px; color: #536788; background: #fff; border: 1px solid #d9e1ed; border-radius: 999px; font-size: 10px; font-weight: 800; white-space: nowrap; }
.jn-teryt-map__list-item.is-selected .jn-teryt-map__list-button { color: #fff; font-weight: 800; }
.jn-teryt-map__list-item.is-selected .jn-teryt-map__list-button span:last-child { color: #15398e; border-color: #fff; }
.jn-teryt-map__list-drill { display: flex; align-items: center; gap: 5px; padding: 0 10px; color: #173f9f; background: #e9f0ff; border: 0; border-left: 1px solid #cad8f1; font: inherit; font-size: 11px; font-weight: 900; cursor: pointer; }
.jn-teryt-map__list-drill b { font-size: 15px; }
.jn-teryt-map__list-drill:hover, .jn-teryt-map__list-drill:focus-visible { color: #fff; background: #0f327e; outline: none; }
.jn-teryt-map__list-item.is-selected .jn-teryt-map__list-drill { color: #fff; background: rgba(255,255,255,.14); border-left-color: rgba(255,255,255,.28); }
.jn-teryt-map__list-item.is-selected .jn-teryt-map__list-drill:hover { background: rgba(255,255,255,.24); }

@media (max-width: 900px) {
  .jn-teryt-map__layout { grid-template-columns: 1fr; }
  .jn-teryt-map__panel { border-right: 0; border-bottom: 1px solid var(--jn-map-line); box-shadow: 0 8px 22px rgba(18,40,82,.06); }
  .jn-teryt-map__canvas-wrap { min-height: 520px; }
  .jn-teryt-map__canvas { height: 480px; }
  .jn-teryt-map__list { max-height: 330px; }
}

@media (max-width: 560px) {
  .jn-teryt-map { border-radius: 14px; }
  .jn-teryt-map__header { display: block; padding: 22px 18px 18px; }
  .jn-teryt-map__source { display: inline-block; margin-top: 14px; }
  .jn-teryt-map__breadcrumbs { padding: 8px 14px; }
  .jn-teryt-map__breadcrumbs-label { width: 100%; margin: 0 0 1px; }
  .jn-teryt-map__canvas-wrap { min-height: 390px; padding: 12px; }
  .jn-teryt-map__canvas { height: 365px; }
  .jn-teryt-map__panel { padding: 20px 18px; }
  .jn-teryt-map__levels li { font-size: 10px; }
  .jn-teryt-map__list-button { font-size: 14px; }
  .jn-teryt-map__list-drill span { display: none; }
  .jn-teryt-map__list-drill { min-width: 42px; justify-content: center; padding: 0 9px; }
}