/* ВНИМАНИЕ: файл растёт слоями, поздние блоки перекрывают ранние.
   Актуальный дизайн панели и графа — блоки, начиная с «Отчёт карточками…» и до конца файла (см. docs/DESIGN.md).
   Ранние блоки — прежние поколения; как образец внешнего вида их не использовать. */

/* Выдача: граф рисует MapGraph (mapgraph.css), здесь — фон, сцена и плашка справа.
   Плашка по образцу andrewtrousdale.com в тёмной теме; цвета те же, что у графа:
   страница #121211, тушь #ecebe6, серый #84837e, карточки #1b1b1a. */
.results {
  --bg: #121211;
  --card: #1b1b1a;
  --ink: #ecebe6;
  --gray: #84837e;
  --font: 'Public Sans', 'Wix Madefor Text', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, Arial, sans-serif;

  color: var(--ink);
  font-family: var(--font);
}

/* Ровный тёмный фон, как страница образца: подложки подписей совпадают с ним */
.results::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--bg);
}

.g-stage {
  position: absolute;
  inset: 0;
  cursor: grab;
  touch-action: none;
  pointer-events: auto;
}

.g-stage.mg {
  background: transparent;
}

.g-stage.dragging {
  cursor: grabbing;
}

/* Пока идёт «поиск», цветок крутится быстрее */
.g-stage .scanning .flower {
  animation-duration: 1.4s;
}

/* ───── плашка ───── */

.g-page {
  position: absolute;
  top: calc(7vh + 46px + 20px);
  bottom: 2.5vw;
  left: min(75vw, calc(100vw - 205px));
  z-index: 3;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 400px;
  transform: translateX(-50%);
  pointer-events: none;
  font-size: 13px;
  line-height: 1.45em;
  letter-spacing: -0.01em;
  opacity: 0;
  transition: opacity 800ms cubic-bezier(0.16, 1, 0.3, 1);
}

.g-page.on {
  opacity: 1;
}

.g-page > * {
  pointer-events: auto;
}

.g-page h2,
.g-page h3,
.g-page p,
.g-page ul {
  margin: 0;
  padding: 0;
  font: inherit;
}

.g-page button {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-align: inherit;
  cursor: pointer;
}

.header-content {
  display: none;
  box-sizing: border-box;
  width: 100%;
  margin-bottom: 5px;
  padding: 14px 25px 12px !important;
  border-radius: 7px;
  background-color: var(--card) !important;
  user-select: none;
  transition: background-color 200ms;
}

.header-content.on {
  display: block;
}

.header-content:hover {
  background-color: #222220 !important;
}

.group {
  box-sizing: border-box;
  max-height: calc(100dvh - 7vh - 46px - 20px - 2.5vw - 50px);
  padding: 22px 25px 21px;
  overflow-y: auto;
  border-radius: 7px;
  background-color: var(--card);
  scrollbar-width: none;
  transition: height 800ms cubic-bezier(0.16, 1, 0.3, 1);
}

.group::-webkit-scrollbar {
  display: none;
}

.group.swap > * {
  animation: g-swap 500ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes g-swap {
  from { opacity: 0; }
  to { opacity: 1; }
}

.page-titles-type,
.tab-titles {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px dashed var(--ink);
  cursor: pointer;
  user-select: none;
}

.page-titles-type {
  position: relative;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  border-bottom: none !important;
  cursor: default;
}

.header-content .page-titles-type {
  cursor: pointer;
}

.page-tab:first-child .tab-titles {
  padding-top: 0;
}

.page-tab:not(.tab-open):last-child .tab-titles {
  padding-bottom: 0;
  border-bottom: none;
}

.tab-open .tab-titles {
  border-bottom: none;
}

.tab-icon {
  display: grid;
  place-items: center start;
  flex: none;
  width: 13px;
  height: 13px;
}

.gl {
  display: block;
  width: 9px;
  height: 9px;
  overflow: visible;
}

.gl .sh {
  fill: var(--ink);
  stroke: none;
}

.gl-index {
  width: 10px;
  height: 10px;
}

.gl-index .sh {
  fill: #ff5f1f;
}

.gl-initiative,
.gl-path {
  width: 10px;
}

.gl-links {
  font-size: 11px;
  line-height: 1;
}

.tab-title {
  font-size: 11px;
  line-height: 1.45em;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.tab-indicator {
  margin-left: auto;
}

.tab-indicator::after {
  content: '+';
  position: relative;
  display: inline-block;
  font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 15px;
  line-height: 15px;
}

.tab-open .tab-indicator::after {
  content: '–';
}

.index-indicator::after {
  content: '←' !important;
  font-size: 13px;
}

.close-page {
  position: absolute !important;
  top: -7px;
  right: -5px;
  width: 20px;
  height: 30px;
  line-height: 30px;
  text-align: center !important;
}

.close-page::after {
  content: '×';
  font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 15px;
  line-height: 15px;
}

.tab-content {
  display: none;
}

.tab-open .tab-content {
  display: flex;
  flex-direction: column;
  padding-top: 10px;
  padding-bottom: 20px;
  border-top: 1px dashed var(--ink);
}

.page-tab:last-child .tab-content {
  padding-bottom: 0;
}

.tab-content p {
  text-indent: 23px;
}

.tab-content p .more {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

.tab-content p .more:hover {
  text-decoration-style: dashed;
}

.page-main-title {
  margin-top: 5px;
  margin-left: 23px;
}

.page-main-title h3 {
  color: var(--gray);
}

.page-content-inner {
  padding: 20px 0 0;
}

.page-content-inner p {
  text-indent: 23px;
}

.page-main-title + .tabs,
.page-content-inner + .tabs {
  padding-top: 25px;
}

.tab-description {
  position: relative;
  margin: 5px 0 15px 23px;
  font-size: 11px;
  line-height: 1.45em;
  letter-spacing: 0;
}

.tab-description::before {
  content: 'i.';
  position: absolute;
  margin-left: -23px;
}

.list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  list-style: none;
}

.list li {
  display: flex;
  flex-direction: column;
}

li + li.year-group {
  margin-top: 10px;
}

li.year-group {
  margin-left: 23px;
  font-size: 11px;
  line-height: 1.45em;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.index-link {
  display: flex;
  flex-direction: row;
  width: 100%;
}

.item-id {
  position: relative;
  flex-shrink: 0;
  width: 23px;
  font-size: 11px;
  line-height: 1.45em;
}

.index-link.act:hover .item-id::after {
  content: '●';
  position: relative;
  top: -1px;
  left: 1.5px;
  font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 7px;
}

.item-title {
  width: 90%;
}

.item-title h2 {
  display: block;
}

.item-title h3 {
  display: block;
  margin-top: 2px !important;
  color: var(--gray);
  font-size: 11px !important;
  line-height: 1.45em !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase;
}

.tab-map {
  position: relative;
  height: 180px;
  margin: 0 0 15px 23px;
}

@media (max-width: 768px) {
  .g-page {
    top: auto;
    bottom: 2.5vw;
    left: 50%;
    width: 95vw;
    max-height: 46vh;
  }

  .group {
    max-height: 40vh;
    padding: 5vw;
  }

  .header-content {
    padding: 5vw !important;
  }
}

/* ───── Отчёт: таблицы «поле — значение» ───── */

.list.kvs {
  gap: 0;
  margin-left: 0;
}

.kv {
  display: grid !important;
  grid-template-columns: 116px 1fr;
  align-items: baseline;
  gap: 12px;
  padding: 7px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.kv:last-child {
  border-bottom: 0;
}

.kv-k {
  color: var(--gray);
  font-size: 11px;
  line-height: 1.45em;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.kv-v {
  position: relative;
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: 13px;
  line-height: 1.4em;
}

.kv-v.copy {
  cursor: copy;
}

.kv-v.copy:hover {
  text-decoration: underline dotted rgba(255, 255, 255, 0.45);
  text-underline-offset: 3px;
}

.kv-v.done::after {
  content: 'скопировано';
  position: absolute;
  right: 0;
  top: -1.3em;
  padding: 1px 6px;
  border-radius: 3px;
  background: #ecebe6;
  color: #111;
  font-size: 10px;
  letter-spacing: 0.04em;
}

/* Вкладки отчёта: чуть плотнее и ровнее */
.page-tab .tab-content {
  padding-bottom: 14px;
}

.tab-map {
  margin: 0 0 12px;
  height: 170px;
}

.tab-map .geo {
  border-radius: 6px;
}

/* Описание ветки над таблицей */
.page-content-inner {
  padding-top: 14px;
}

.page-content-inner p {
  text-indent: 0;
  color: #bdbcb6;
  font-size: 12.5px;
  line-height: 1.5em;
}

/* Шапка карточки узла остаётся на виду при прокрутке отчёта */
.group > .page-main-title {
  position: sticky;
  top: -22px;
  z-index: 2;
  margin: 0 -25px;
  padding: 27px 25px 10px 48px;
  background: var(--card);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.kv {
  padding: 5px 0;
}

/* ───── Сводная карточка, фильтр и поиск над графом ───── */

.g-head {
  position: absolute;
  left: 24px;
  z-index: 4;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}

.g-head > * {
  pointer-events: auto;
}

.g-card {
  padding: 14px 18px 12px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 7px;
  background: var(--card);
}

.gc-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 20px;
}

.gc-who {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  min-width: 0;
}

.g-head .gc-name {
  margin: 0;
  font-size: 17px;
  line-height: 1.25;
  font-weight: 500;
  letter-spacing: -0.01em;
}

.gc-nick,
.gc-role {
  color: var(--gray);
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.gc-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--gray);
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.gc-status::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  border: 1px solid var(--gray);
}

.gc-status.on {
  color: var(--ink);
}

.gc-status.on::before {
  background: #5fd38a;
  border-color: #5fd38a;
}

.gc-stats {
  display: flex;
  gap: 6px;
}

.gc-stat {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 3px 9px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  background: none;
  color: var(--ink);
  font: inherit;
  font-size: 11px;
  letter-spacing: 0.03em;
  cursor: pointer;
}

.gc-stat b {
  font-weight: 500;
  font-size: 12px;
}

.gc-stat span {
  color: var(--gray);
}

.gc-stat:hover {
  border-color: rgba(255, 255, 255, 0.4);
}

.gc-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px 18px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px dashed rgba(255, 255, 255, 0.22);
}

.gc-cell {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.gc-k {
  color: var(--gray);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.gc-v {
  position: relative;
  overflow: hidden;
  font-size: 12.5px;
  line-height: 1.35;
  white-space: nowrap;
  text-overflow: ellipsis;
  cursor: copy;
}

.gc-v:hover {
  text-decoration: underline dotted rgba(255, 255, 255, 0.45);
  text-underline-offset: 3px;
}

.gc-v.done::after {
  content: 'скопировано';
  position: absolute;
  right: 0;
  top: 0;
  padding: 0 6px;
  border-radius: 3px;
  background: #ecebe6;
  color: #111;
  font-size: 10px;
}

.g-bar {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
}

.g-search {
  position: relative;
  flex: 0 1 230px;
  min-width: 170px;
}

.g-search input {
  box-sizing: border-box;
  width: 100%;
  height: 30px;
  padding: 0 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  outline: 0;
  background: var(--card);
  color: var(--ink);
  font: inherit;
  font-size: 12px;
}

.g-search input::placeholder {
  color: #6c6b66;
}

.g-search input:focus {
  border-color: rgba(255, 255, 255, 0.3);
}

.g-results {
  position: absolute;
  top: 36px;
  left: 0;
  z-index: 6;
  display: flex;
  flex-direction: column;
  width: 320px;
  max-width: 80vw;
  padding: 4px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  background: #1f1f1e;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.5);
}

.g-results[hidden] {
  display: none;
}

.sr {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 6px 8px;
  border: 0;
  border-radius: 5px;
  background: none;
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.sr:hover,
.sr:focus-visible {
  background: rgba(255, 255, 255, 0.07);
}

.sr-t {
  font-size: 12.5px;
}

.sr-s,
.sr-empty {
  color: var(--gray);
  font-size: 10.5px;
  letter-spacing: 0.04em;
}

.sr-empty {
  padding: 8px;
}

.g-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.chip,
.tool {
  padding: 4px 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  background: none;
  color: var(--gray);
  font: inherit;
  font-size: 11px;
  letter-spacing: 0.03em;
  cursor: pointer;
  transition: color 120ms, border-color 120ms, background 120ms;
}

.chip:hover,
.tool:hover {
  color: var(--ink);
  border-color: rgba(255, 255, 255, 0.3);
}

.chip.on,
.tool.on {
  border-color: transparent;
  background: #ecebe6;
  color: #111;
}

.g-tools {
  display: flex;
  gap: 4px;
  margin-left: auto;
}

.g-legend {
  align-self: flex-start;
  display: flex;
  flex-direction: column;
  gap: 7px;
  max-width: 360px;
  padding: 12px 14px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 7px;
  background: rgba(27, 27, 26, 0.96);
  font-size: 11.5px;
  line-height: 1.35;
}

.g-legend[hidden] {
  display: none;
}

.lg-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.lg-ic {
  display: grid;
  place-items: center;
  flex: none;
  width: 26px;
}

.lg-ic .gl {
  width: 16px;
  height: 16px;
}

.lg-ic svg {
  overflow: visible;
}

.lg-hex {
  fill: none;
  stroke: var(--ink);
  stroke-width: 1px;
}

.lg-ic text {
  fill: var(--ink);
}

.lg-dash {
  stroke: var(--gray);
  stroke-width: 1px;
  stroke-dasharray: 3 3;
}

.lg-ic > svg:not(.gl) {
  width: 22px;
  height: 6px;
}

/* ───── Хлебные крошки в карточке узла ───── */

.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 6px;
  margin: 8px 0 0 23px;
  font-size: 11px;
  line-height: 1.5;
}

.crumb {
  padding: 0;
  border: 0;
  background: none;
  color: var(--gray);
  font: inherit;
  cursor: pointer;
}

button.crumb:hover {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.crumb.cur {
  color: var(--ink);
}

.crumb-sep {
  color: #5b5a56;
  font-style: normal;
}

@media (max-width: 768px) {
  .g-head {
    left: 12px;
  }

  .gc-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .g-tools {
    margin-left: 0;
  }
}

/* Компактнее: поиск и кнопки в одной строке, категории — одной прокручиваемой строкой */
.g-search {
  flex: 1 1 200px;
}

.g-tools {
  margin-left: 0;
}

.g-chips {
  flex-wrap: nowrap;
  overflow-x: auto;
  padding-bottom: 2px;
  scrollbar-width: none;
}

.g-chips::-webkit-scrollbar {
  display: none;
}

.chip {
  flex: none;
}

.g-card {
  padding: 11px 16px 10px;
}

.gc-grid {
  margin-top: 9px;
  padding-top: 8px;
  gap: 6px 16px;
}

.g-page {
  justify-content: flex-start;
}

/* На невысоких экранах в карточке одна строка полей — больше места графу */
@media (max-height: 820px) {
  .gc-cell:nth-child(n + 5) {
    display: none;
  }
}

/* ═════ Карточки в стиле «Connecting to cluster»: тёмная плашка, внутри — светлее врезка со строками «название — значение» ═════ */

.results {
  --card: #1d1d1e;
  --inset: #262627;
  --line: rgba(255, 255, 255, 0.07);
  --soft: #8d8d90;
  --ui: Inter, -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, 'Public Sans', 'Wix Madefor Text', sans-serif;
}

.results .g-page,
.results .g-head {
  font-family: var(--ui);
  letter-spacing: 0;
}

/* ───── Правая плашка ───── */

.results .g-page {
  width: 420px;
  gap: 8px;
  font-size: 14px;
  line-height: 1.4;
}

.results .header-content {
  padding: 13px 20px !important;
  border: 1px solid var(--line);
  border-radius: 20px;
  background-color: var(--card) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
}

.results .header-content:hover {
  background-color: #232324 !important;
}

.results .group {
  max-height: calc(100dvh - 7vh - 46px - 20px - 60px);
  padding: 20px 20px 16px;
  border: 1px solid var(--line);
  border-radius: 26px;
  background-color: var(--card);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
}

/* Верхняя строка карточки узла: тип узла мелко, имя крупно */
.results .page-titles-type {
  gap: 10px;
  padding: 0 !important;
}

.results .tab-title {
  font-family: var(--ui);
  font-size: 12px;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--soft);
}

.results .close-page {
  top: -4px;
  right: -4px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--inset);
}

.results .close-page:hover {
  background: #333335;
}

.results .group > .page-main-title {
  position: static;
  margin: 10px 0 0;
  padding: 0;
  background: none;
  border: 0;
}

.results .page-main-title h2 {
  color: #fff;
  font-size: 22px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.results .page-main-title h3 {
  margin-top: 4px;
  color: var(--soft);
  font-size: 13px;
  letter-spacing: 0;
  text-transform: none;
}

.results .crumbs {
  margin: 10px 0 0;
}

.results .crumb {
  color: var(--soft);
  font-size: 12px;
}

.results .page-content-inner {
  padding: 12px 0 0;
}

.results .page-content-inner p {
  color: #b9b9bc;
  font-size: 13.5px;
  line-height: 1.5;
}

.results .page-main-title + .tabs,
.results .page-content-inner + .tabs {
  padding-top: 14px;
}

/* Разделы: заголовок строкой, содержимое — врезка */
.results .page-tab .tab-titles {
  gap: 8px;
  padding: 12px 2px 8px;
  border: 0;
  cursor: pointer;
}

.results .page-tab:first-child .tab-titles {
  padding-top: 4px;
}

.results .page-tab:not(.tab-open):last-child .tab-titles {
  padding-bottom: 8px;
}

.results .tabs .tab-icon {
  display: none;
}

.results .tabs .tab-title {
  color: #f2f2f3;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.01em;
}

.results .tab-indicator::after {
  content: '';
  width: 7px;
  height: 7px;
  margin: 0 3px 3px 0;
  border: solid var(--soft);
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg);
  transition: transform 200ms;
}

.results .tab-open .tab-indicator::after {
  content: '';
  margin-bottom: -2px;
  transform: rotate(-135deg);
}

.results .index-indicator::after {
  content: '←' !important;
  width: auto;
  height: auto;
  border: 0;
  transform: none;
  color: var(--soft);
  font-size: 15px;
}

.results .tab-open .tab-content {
  display: block;
  margin: 0 0 6px;
  padding: 4px 16px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--inset);
}

.results .page-tab:last-child .tab-content {
  padding-bottom: 4px;
}

.results .tab-content p {
  padding: 10px 0;
  color: #c9c9cc;
  font-size: 13.5px;
  line-height: 1.5;
  text-indent: 0;
}

/* Строки врезки */
.results .list {
  gap: 0;
}

.results .kv {
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.4fr);
  gap: 14px;
  padding: 11px 0;
  border: 0;
}

.results .kv + .kv {
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.results .kv-k {
  color: var(--soft);
  font-size: 14px;
  letter-spacing: 0;
  text-transform: none;
}

.results .kv-v {
  font-size: 14px;
  text-align: right;
  color: #f2f2f3;
}

.results .kv-v.done::after {
  top: -1.5em;
}

/* Строки-переходы: название слева, пояснение справа */
.results .list li {
  flex-direction: column;
}

.results .index-link {
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 11px 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
}

.results .list li + li .index-link {
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.results .item-id {
  display: none;
}

.results .item-title {
  display: flex;
  flex: 1;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  width: auto;
}

.results .item-title h2 {
  font-size: 14px;
  color: #f2f2f3;
}

.results .item-title h3 {
  margin: 0 !important;
  color: var(--soft);
  font-size: 12.5px !important;
  letter-spacing: 0 !important;
  text-align: right;
  text-transform: none;
}

.results .index-link.act:hover h2 {
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.35);
  text-underline-offset: 3px;
}

.results li.year-group {
  margin: 0;
  padding: 10px 0 2px;
  color: var(--soft);
  font-size: 12px;
  letter-spacing: 0.02em;
  text-transform: none;
}

.results .tab-map {
  height: 170px;
  margin: 6px 0 4px;
}

.results .tab-map .geo {
  border-radius: 12px;
}

/* ───── Верхняя плашка ───── */

.results .g-card {
  padding: 18px 20px 16px;
  border: 1px solid var(--line);
  border-radius: 26px;
  background: var(--card);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
}

.results .gc-who {
  align-items: center;
  gap: 4px 12px;
}

/* Кольцо слева от имени, как индикатор в образце */
.results .gc-who::before {
  content: '';
  flex: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: conic-gradient(#b48cff 0 28%, rgba(255, 255, 255, 0.1) 28% 100%);
  -webkit-mask: radial-gradient(circle 8.5px, transparent 98%, #000 100%);
  mask: radial-gradient(circle 8.5px, transparent 98%, #000 100%);
}

.results .g-head .gc-name {
  color: #fff;
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.02em;
}

.results .gc-nick,
.results .gc-role,
.results .gc-status {
  color: var(--soft);
  font-size: 13px;
  letter-spacing: 0;
  text-transform: none;
}

.results .gc-status.on {
  color: #d8d8da;
}

.results .gc-stat {
  padding: 5px 12px;
  border: 1px solid var(--line);
  background: var(--inset);
  font-size: 13px;
}

.results .gc-stat:hover {
  border-color: rgba(255, 255, 255, 0.3);
}

.results .gc-stat span {
  color: var(--soft);
}

.results .gc-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 32px;
  margin-top: 14px;
  padding: 4px 16px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--inset);
}

.results .gc-cell {
  flex-direction: row;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
}

.results .gc-cell:nth-child(n + 3) {
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.results .gc-k {
  flex: none;
  color: var(--soft);
  font-size: 14px;
  letter-spacing: 0;
  text-transform: none;
}

.results .gc-v {
  min-width: 0;
  font-size: 14px;
  text-align: right;
  color: #f2f2f3;
}

/* ───── Панель поиска и фильтров ───── */

.results .g-search input {
  height: 36px;
  padding: 0 16px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--card);
  font-family: var(--ui);
  font-size: 13.5px;
}

.results .chip,
.results .tool {
  padding: 6px 13px;
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--soft);
  font-family: var(--ui);
  font-size: 13px;
  letter-spacing: 0;
}

.results .chip:hover,
.results .tool:hover {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.28);
}

.results .chip.on,
.results .tool.on {
  border-color: transparent;
  background: #f4f4f5;
  color: #111;
}

.results .g-legend,
.results .g-results {
  border-radius: 16px;
  font-family: var(--ui);
}

@media (max-height: 820px) {
  .results .gc-cell:nth-child(n + 5) {
    display: none;
  }
}

.results .g-bar {
  flex-wrap: nowrap;
}

.results .g-search {
  flex: 1 1 120px;
  min-width: 120px;
}

.results .g-tools {
  flex: none;
}

.results .tool {
  padding: 6px 11px;
  font-size: 12.5px;
  white-space: nowrap;
}

.results .g-bar {
  flex-wrap: wrap;
}

.results .g-search {
  flex: 1 1 170px;
  min-width: 170px;
}

.results .tool {
  padding: 5px 9px;
  font-size: 12px;
}

/* ───── Шапка отчёта: запрос слева, квадратный аватар справа, ниже кнопки ───── */

.results .rp-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.results .rp-txt {
  min-width: 0;
}

.results .rp-label {
  color: var(--soft);
  font-size: 12px;
  letter-spacing: 0.02em;
}

.results .rp-q {
  margin: 4px 0 0;
  overflow-wrap: anywhere;
  color: #fff;
  font-size: 24px;
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.results .rp-sub {
  margin: 6px 0 0;
  color: var(--soft);
  font-size: 13px;
  text-indent: 0;
}

.results .rp-av {
  flex: none;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
}

.results .rp-av svg {
  display: block;
  width: 100%;
  height: 100%;
}

.results .rp-actions {
  position: relative;
  display: flex;
  gap: 8px;
  margin: 16px 0 6px;
}

.results .rp-btn {
  padding: 9px 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--inset);
  color: #f2f2f3;
  font: inherit;
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
  transition: background 120ms, border-color 120ms;
}

.results .rp-btn:hover {
  border-color: rgba(255, 255, 255, 0.28);
}

.results .rp-btn.primary {
  border-color: transparent;
  background: #f4f4f5;
  color: #111;
}

.results .rp-btn.primary:hover {
  background: #fff;
}

.results .rp-menu {
  position: absolute;
  top: 44px;
  left: 0;
  z-index: 8;
  display: flex;
  flex-direction: column;
  min-width: 220px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #2a2a2b;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55);
}

.results .rp-menu[hidden] {
  display: none;
}

.results .rp-item {
  padding: 9px 12px;
  border: 0;
  border-radius: 10px;
  background: none;
  color: #f2f2f3;
  font: inherit;
  font-size: 13.5px;
  text-align: left;
  cursor: pointer;
}

.results .rp-item:hover {
  background: rgba(255, 255, 255, 0.08);
}

/* Аватар в шапке карточки персонажа */
.results .page-main-title.has-av {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 14px;
}

.results .page-main-title.has-av .rp-av {
  grid-column: 2;
  grid-row: 1 / span 2;
}

.results .page-main-title .rp-av {
  border-radius: 12px;
}

/* ───── Отчёт карточками (как виджет карты): профиль всегда виден, группы сворачиваются ───── */

.results .group.cards {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
}

.results .rc {
  --pill: #151517;
  --disc: #2a2a2e;

  position: relative;
  flex: none;
  padding: 8px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 30px;
  background: #1d1d20;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
}

/* Профиль: шапка с запросом и аватаром, кнопки, затем строки-плашки */
.results .rc-profile {
  padding: 18px 8px 8px;
}

.results .rc-profile > .rp-head,
.results .rc-profile > .rp-actions {
  margin-left: 12px;
  margin-right: 12px;
}

.results .rc-profile > .rp-actions {
  margin-bottom: 14px;
}

.results .rc-profile > .list {
  margin-top: 2px;
}

/* Строки: тёмные плашки, подпись слева приглушена, значение справа */
.results .rc .list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.results .rc .list li {
  flex-direction: row;
}

.results .rc .kv {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 22px;
  padding: 12px 18px;
  border: 0;
  border-radius: 20px;
  background: var(--pill);
}

.results .rc .kv + .kv {
  border-top: 0;
}

.results .rc .kv-k {
  flex: none;
  color: #8d8d92;
  font-size: 14.5px;
}

.results .rc .kv-v {
  min-width: 0;
  overflow-wrap: anywhere;
  color: #f5f5f6;
  font-size: 14.5px;
  text-align: right;
}

.results .rc .index-link {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 22px;
  padding: 12px 18px;
  border-radius: 20px;
  background: var(--pill);
}

.results .rc .index-link.act:hover {
  background: #1b1b1e;
}

.results .rc .item-id {
  display: none;
}

.results .rc .item-title {
  display: flex;
  flex: 1;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  min-width: 0;
}

.results .rc .item-title h2 {
  color: #f5f5f6;
  font-size: 14.5px;
  font-weight: 400;
}

.results .rc .item-title h3 {
  color: #8d8d92;
  font-size: 13px;
  font-weight: 400;
  text-align: right;
}

.results .rc .year-group {
  margin: 8px 6px 0;
  color: #8d8d92;
  font-size: 12px;
  letter-spacing: 0.04em;
}

/* Заголовок группы — плашка как нижняя строка виджета: круг со значком, название, число, шеврон */
.results .rc-head {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 56px;
  padding: 9px 10px 9px 9px;
  border-radius: 24px;
  background: var(--pill);
  box-sizing: border-box;
  transition: background 160ms;
}

.results .rc-head:hover {
  background: #1a1a1d;
}

.results .rc-ic {
  display: grid;
  place-items: center;
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--disc);
  color: #f5f5f6;
}

.results .rc-ic svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.results .rc-title {
  flex: 1;
  color: #fff;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.01em;
  text-align: left;
}

.results .rc-count {
  color: #8d8d92;
  font-size: 15px;
}

.results .rc-chev {
  display: grid;
  place-items: center;
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #202023;
}

.results .rc-chev::after {
  content: '';
  width: 7px;
  height: 7px;
  margin-top: -3px;
  border: solid #a2a2a8;
  border-width: 0 1.7px 1.7px 0;
  transform: rotate(45deg);
  transition: transform 380ms cubic-bezier(0.32, 0.72, 0, 1), margin 380ms cubic-bezier(0.32, 0.72, 0, 1);
}

.results .rc-group.open .rc-chev::after {
  margin-top: 3px;
  transform: rotate(-135deg);
}

/* Раскрытие: высота плавно «выезжает» (grid 0fr → 1fr), строки подтягиваются следом */
.results .rc-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 460ms cubic-bezier(0.32, 0.72, 0, 1);
}

.results .rc-group.open .rc-body {
  grid-template-rows: 1fr;
}

.results .rc-inner {
  min-height: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 260ms ease, transform 460ms cubic-bezier(0.32, 0.72, 0, 1);
}

.results .rc-group.open .rc-inner {
  padding-top: 6px;
  opacity: 1;
  transform: none;
}

/* Карта внутри группы: виджет с плашками времени и места */
.results .rc .tab-map {
  height: 168px;
  margin: 0 0 6px;
}

.results .rc .tab-map .geo {
  border-radius: 22px;
}

/* Мягкий срез карточек у краёв прокручиваемой области */
.results .group.cards {
  -webkit-mask-image: linear-gradient(transparent, #000 16px, #000 calc(100% - 16px), transparent);
  mask-image: linear-gradient(transparent, #000 16px, #000 calc(100% - 16px), transparent);
  padding: 8px 0;
}

/* ───── Дизайн-система шапки (nav.css): заливка #1c1c1c, внутренний контур #383838, текст #d9d9d9 / #fbfbfb, Manrope ───── */

.results .rc {
  --fill: #1c1c1c;
  --ring: #383838;
  --txt: #d9d9d9;
  --txt-hi: #fbfbfb;
  --mute: rgba(217, 217, 217, 0.52);

  border: 0;
  border-radius: 34px;
  background: var(--fill);
  box-shadow: none;
  font-family: Manrope, Inter, system-ui, sans-serif;
  letter-spacing: -0.015em;
}

/* Внутренние «таблетки» — контуром, как таблетки навигации */
.results .rc-head,
.results .rc .kv,
.results .rc .index-link {
  border: 1px solid var(--ring);
  background: transparent;
}

.results .rc-head:hover,
.results .rc .index-link.act:hover {
  background: rgba(255, 255, 255, 0.035);
}

.results .rc-head {
  min-height: 58px;
  border-radius: 999px;
}

.results .rc .kv,
.results .rc .index-link {
  border-radius: 24px;
}

.results .rc-ic,
.results .rc-chev {
  border: 1px solid var(--ring);
  background: transparent;
}

.results .rc-ic {
  color: #f4f4f4;
}

.results .rc-title {
  color: var(--txt-hi);
  font-weight: 500;
}

.results .rc-count {
  color: var(--mute);
}

.results .rc-chev::after {
  border-color: var(--txt);
}

.results .rc .kv-k,
.results .rc .item-title h3,
.results .rc .year-group,
.results .rp-label,
.results .rp-sub {
  color: var(--mute);
}

.results .rc .kv-v,
.results .rc .item-title h2,
.results .rp-q {
  color: var(--txt-hi);
}

.results .rc .kv-v {
  font-weight: 500;
}

.results .rc .kv-k,
.results .rc .kv-v,
.results .rc .item-title h2 {
  font-size: 14.5px;
}

/* Кнопки профиля: контур и светлая заливка из навигации */
.results .rc .rp-btn {
  border: 1px solid var(--ring);
  background: transparent;
  color: var(--txt-hi);
  font-family: inherit;
}

.results .rc .rp-btn:hover {
  background: rgba(255, 255, 255, 0.05);
}

.results .rc .rp-btn.primary {
  border-color: transparent;
  background: var(--txt-hi);
  color: #1c1c1c;
}

.results .rc .rp-menu {
  border: 1px solid var(--ring);
  background: var(--fill);
}

.results .rc .rp-item {
  color: var(--txt);
}

.results .rc .rp-av {
  border: 1px solid var(--ring);
  border-radius: 20px;
}

/* Карточки уходят под шапку сверху и за край экрана снизу: прокрутка на всю высоту, без среза и подложки */
.g-page.full {
  top: 0;
  bottom: 0;
  justify-content: flex-start;
}

.results .group.cards {
  max-height: 100dvh;
  padding: calc(7vh + 46px + 34px) 0 60px;
  -webkit-mask-image: none;
  mask-image: none;
}

/* ───── Минимализм: сгруппированные списки Telegram Mini App (sdkhub), цвета шапки ───── */

.results .group.cards {
  gap: 2px;
}

.results .rc {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}

/* Профиль: шапка без контейнера, кнопки на всю ширину, затем группа строк */
.results .rc-profile {
  padding: 0 0 10px;
}

.results .rc-profile > .rp-head,
.results .rc-profile > .rp-actions {
  margin-left: 4px;
  margin-right: 4px;
}

.results .rc-profile .rp-q {
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.025em;
}

.results .rc-profile .rp-av {
  border: 0;
  border-radius: 18px;
}

.results .rc-profile > .rp-actions {
  margin-top: 18px;
  margin-bottom: 18px;
}

.results .rc .rp-btn {
  flex: 1;
  min-height: 44px;
  padding: 0 16px;
  border: 0;
  border-radius: 14px;
  background: var(--fill);
  color: var(--txt-hi);
  font-size: 16px;
  font-weight: 500;
}

.results .rc .rp-btn:hover {
  background: #242424;
}

.results .rc .rp-btn.primary {
  background: var(--txt-hi);
  color: #1c1c1c;
}

.results .rc .rp-btn.primary:hover {
  background: #fff;
}

/* Группа строк: одна заливка, скругление, разделитель с отступом слева */
.results .rc .list {
  gap: 0;
  overflow: hidden;
  border-radius: 20px;
  background: var(--fill);
}

.results .rc .list li {
  position: relative;
}

.results .rc .list li + li::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  left: 16px;
  height: 0.5px;
  background: var(--ring);
}

.results .rc .kv,
.results .rc .index-link {
  min-height: 44px;
  padding: 11px 16px;
  border: 0;
  border-radius: 0;
  background: none;
  box-sizing: border-box;
}

.results .rc .kv-k,
.results .rc .kv-v,
.results .rc .item-title h2 {
  font-size: 16px;
  letter-spacing: -0.01em;
}

.results .rc .kv-k {
  color: var(--txt-hi);
  font-weight: 400;
}

.results .rc .kv-v {
  color: var(--mute);
  font-weight: 400;
}

.results .rc .item-title h2 {
  font-weight: 400;
}

.results .rc .item-title h3 {
  font-size: 15px;
}

/* Строки-переходы: шеврон справа, как у Cell */
.results .rc .index-link.act::after {
  content: '';
  flex: none;
  width: 7px;
  height: 7px;
  margin: 0 3px 0 10px;
  border: solid rgba(217, 217, 217, 0.3);
  border-width: 1.6px 1.6px 0 0;
  transform: rotate(45deg);
}

.results .rc .index-link.act:hover,
.results .rc .kv-v.copy:hover {
  background: none;
}

.results .rc .index-link.act:active {
  background: rgba(255, 255, 255, 0.05);
}

.results .rc .year-group {
  margin: 0;
  padding: 12px 16px 4px;
  color: var(--mute);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

/* Заголовок группы: подпись секции над списком, справа число и шеврон; сворачивается */
.results .rc-group {
  margin-top: 12px;
}

.results .rc-head {
  min-height: 34px;
  padding: 4px 16px 6px;
  border: 0;
  border-radius: 0;
  background: none;
}

.results .rc-head:hover {
  background: none;
}

.results .rc-ic {
  display: none;
}

.results .rc-title {
  color: var(--mute);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.results .rc-count {
  font-size: 14px;
}

.results .rc-chev {
  width: 14px;
  height: 14px;
  border: 0;
  background: none;
}

.results .rc-chev::after {
  border-color: rgba(217, 217, 217, 0.52);
}

.results .rc-group.open .rc-inner {
  padding-top: 0;
}

.results .rc .tab-map {
  height: 168px;
  margin: 0 0 8px;
}

.results .rc .tab-map .geo {
  border-radius: 20px;
}

/* ───── Масштаб правой панели: компактнее ───── */

.results .g-page {
  width: 392px;
  font-size: 13.5px;
}

.results .group.cards {
  padding-top: 92px;
  padding-bottom: 48px;
}

.results .rc .kv,
.results .rc .index-link {
  min-height: 38px;
  padding: 9px 14px;
}

.results .rc .kv-k,
.results .rc .kv-v,
.results .rc .item-title h2 {
  font-size: 14.5px;
}

.results .rc .item-title h3 {
  font-size: 13px;
}

.results .rc .list {
  border-radius: 16px;
}

.results .rc .list li + li::before {
  left: 14px;
}

.results .rc .year-group {
  padding: 10px 14px 3px;
  font-size: 12px;
}

.results .rc-group {
  margin-top: 8px;
}

.results .rc-head {
  min-height: 28px;
  padding: 3px 14px 5px;
}

.results .rc-title,
.results .rc-count {
  font-size: 12px;
}

.results .rc .tab-map {
  height: 140px;
}

.results .rc .tab-map .geo {
  border-radius: 16px;
}

.results .rc-profile .rp-q {
  font-size: 24px;
}

.results .rc-profile .rp-label {
  font-size: 12px;
}

.results .rc-profile .rp-sub {
  margin-top: 4px;
  font-size: 12.5px;
}

.results .rc-profile .rp-av {
  border-radius: 14px;
}

/* Кнопки профиля: компактные, с иконками, слева; не на всю ширину */
.results .rc-profile > .rp-actions {
  gap: 8px;
  margin: 14px 4px 14px;
}

.results .rc .rp-btn {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 0 14px 0 12px;
  border-radius: 12px;
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1;
}

.results .rc .rp-btn svg {
  flex: none;
  width: 15px;
  height: 15px;
  fill: currentColor;
}

.results .rc .rp-btn svg.st {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.results .rc .rp-menu {
  top: 42px;
  border-radius: 14px;
}

.results .rc .rp-item {
  padding: 8px 11px;
  font-size: 13.5px;
}

/* ───── Без капса; значки у заголовков групп ───── */

.results .tab-title,
.results li.year-group,
.results .item-title h3,
.results .kv-k,
.results .rc-title,
.results .rc .year-group {
  text-transform: none;
  letter-spacing: 0;
}

.results .rc-head {
  gap: 10px;
}

.results .rc-ic {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border: 0;
  background: none;
  color: var(--txt);
}

.results .rc-ic svg {
  width: 18px;
  height: 18px;
  stroke-width: 1.7;
}

.results .rc-title {
  color: var(--txt-hi);
  font-size: 14.5px;
  font-weight: 600;
}

.results .rc-count {
  font-size: 13px;
}

.results .rc-head {
  min-height: 34px;
}

/* ───── Выпадающие меню: морф из кнопки ───── */

.results .rp-wrap {
  position: relative;
  display: inline-flex;
}

.results .rp-pop {
  --spr: cubic-bezier(0.32, 0.72, 0, 1);

  position: absolute;
  top: 0;
  left: 0;
  z-index: 20;
  display: none;
  overflow: hidden;
  border: 0;
  background: #262626;
  box-shadow: 0 0 0 rgba(0, 0, 0, 0);
  transition: width 480ms var(--spr), height 480ms var(--spr), border-radius 480ms var(--spr),
    background-color 340ms ease, box-shadow 340ms ease;
}

.results .rp-pop.show {
  display: block;
}

.results .rp-pop.open {
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.55);
}

.results .rp-pop-in {
  position: absolute;
  top: 0;
  left: 0;
  width: 212px;
  padding: 6px;
  box-sizing: border-box;
}

.results .rp-pop .rp-item {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  height: 40px;
  padding: 0 12px;
  border: 0;
  border-radius: 12px;
  background: none;
  color: var(--txt-hi);
  font: inherit;
  font-size: 14.5px;
  text-align: left;
  opacity: 0;
  transform: translateY(-5px);
  transition: opacity 140ms ease, transform 240ms var(--spr), background 120ms;
}

.results .rp-pop.open .rp-item {
  opacity: 1;
  transform: none;
  transition: opacity 240ms ease calc(90ms + var(--i) * 40ms), transform 420ms var(--spr) calc(90ms + var(--i) * 40ms), background 120ms;
}

.results .rp-pop .rp-item:hover {
  background: rgba(255, 255, 255, 0.07);
}

.results .rp-pop .rp-item svg {
  flex: none;
  width: 16px;
  height: 16px;
  fill: none;
  stroke: var(--txt);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.results .rp-sep {
  display: block;
  height: 1px;
  margin: 5px 12px;
  background: rgba(255, 255, 255, 0.08);
}

@media (prefers-reduced-motion: reduce) {
  .results .rp-pop,
  .results .rp-pop .rp-item {
    transition: none;
  }
}

/* Меню рождается из кнопки и растёт вниз, сама кнопка не меняется */
.results .rp-pop {
  top: calc(100% + 6px);
  background: #262626;
  opacity: 0;
  transition: width 480ms var(--spr), height 480ms var(--spr), border-radius 480ms var(--spr),
    opacity 220ms ease, box-shadow 340ms ease;
}

.results .rp-pop.open {
  opacity: 1;
}

/* Шапка профиля: аватар слева, справа запрос, имя и статус */
.results .rc-profile > .rp-head {
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 16px;
}

.results .rc-profile .rp-av {
  width: 64px;
  height: 64px;
  border-radius: 18px;
}

.results .rc-profile .rp-txt {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}

.results .rc-profile .rp-label {
  color: var(--mute);
  font-size: 12px;
}

.results .rc-profile .rp-q {
  margin: 0;
  max-width: 100%;
  font-size: 22px;
  line-height: 1.15;
}

.results .rc-profile .rp-name {
  margin: 2px 0 0;
  color: var(--txt);
  font-size: 14px;
  text-indent: 0;
}

.results .rc-profile .rp-sub {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  color: var(--mute);
  font-size: 13px;
}

.results .rp-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(217, 217, 217, 0.35);
}

.results .rp-dot.on {
  background: #5fd68a;
}

.results .rp-tag {
  margin-top: 6px;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--fill);
  color: var(--mute);
  font-size: 12px;
}

/* Шапка профиля компактно: аватар и две строки */
.results .rc-profile > .rp-head {
  gap: 12px;
}

.results .rc-profile .rp-av {
  width: 48px;
  height: 48px;
  border-radius: 14px;
}

.results .rc-profile .rp-txt {
  gap: 1px;
}

.results .rc-profile .rp-q {
  font-size: 18px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.results .rc-profile .rp-name {
  margin: 0;
  color: var(--mute);
  font-size: 13px;
}

.results .rc-profile > .rp-actions {
  margin-top: 12px;
  margin-bottom: 12px;
}

/* Размытие графа под правой панелью: только за самой панелью, с мягким краем слева */
.g-page .g-blur {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -56px;
  right: -80px;
  z-index: 0;
  background: rgba(10, 10, 10, 0.18);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 56px);
  mask-image: linear-gradient(90deg, transparent 0, #000 56px);
  pointer-events: none;
}

.g-page > .group,
.g-page > .header-content {
  position: relative;
  z-index: 1;
}

/* Размытие за панелью — прогрессивное, как сверху (.pblur): 8 слоёв, радиус удваивается к панели, границы нет */
.g-page .g-blur {
  --f: 150px;

  left: -150px;
  right: -80px;
  background: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  -webkit-mask-image: none;
  mask-image: none;
}

.g-page .g-blur i {
  --m: linear-gradient(to right, transparent calc(var(--s) * var(--f) / 8), #000 calc((var(--s) + 1) * var(--f) / 8));

  position: absolute;
  inset: 0;
  -webkit-mask-image: var(--m);
  mask-image: var(--m);
  -webkit-backdrop-filter: blur(calc(var(--b) * 0.7));
  backdrop-filter: blur(calc(var(--b) * 0.7));
}

.g-blur i:nth-child(1) { --s: 0; --b: 0.1953125px; }
.g-blur i:nth-child(2) { --s: 1; --b: 0.390625px; }
.g-blur i:nth-child(3) { --s: 2; --b: 0.78125px; }
.g-blur i:nth-child(4) { --s: 3; --b: 1.5625px; }
.g-blur i:nth-child(5) { --s: 4; --b: 3.125px; }
.g-blur i:nth-child(6) { --s: 5; --b: 6.25px; }
.g-blur i:nth-child(7) { --s: 6; --b: 12.5px; }
.g-blur i:nth-child(8) { --s: 7; --b: 25px; }

/* Размытие справа: тянется до края экрана */
.g-page .g-blur {
  right: -100vw;
}

/* ───── Сканирование: минимально — имя, этап и число найденного под цветком ───── */

.g-stage .scanning .node-label {
  opacity: 0;
}

.g-scan {
  position: absolute;
  z-index: 3;
  width: 0;
  height: 0;
  pointer-events: none;
  font-family: Manrope, Inter, system-ui, sans-serif;
  letter-spacing: -0.01em;
  transition: opacity 400ms ease;
  animation: sc-in 500ms ease both;
}

.g-scan.done {
  opacity: 0;
}

@keyframes sc-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.sc-txt {
  position: absolute;
  top: 30px;
  left: -140px;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 280px;
  text-align: center;
}

.sc-name {
  color: #fbfbfb;
  font-size: 15px;
  font-weight: 500;
}

.sc-step {
  position: relative;
  width: 100%;
  height: 18px;
  margin-top: 4px;
  color: rgba(217, 217, 217, 0.5);
  font-size: 13px;
}

.sc-label {
  position: absolute;
  inset: 0;
  white-space: nowrap;
}

.sc-label.in {
  animation: sc-label-in 320ms ease both;
}

.sc-label.out {
  opacity: 0;
  transition: opacity 200ms ease;
}

@keyframes sc-label-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: none; }
}

.sc-found {
  margin-top: 6px;
  color: rgba(217, 217, 217, 0.5);
  font-size: 13px;
}

.sc-found b {
  color: #fbfbfb;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
  .g-scan {
    animation: none;
  }
}

/* Размытие графа только под самой панелью: от её левого края до правого */
.g-page .g-blur {
  --f: 28px;

  left: -28px;
  right: 0;
}

/* Появление графа после сканирования: быстрее и спокойнее, чем у образца */
.g-stage .node,
.g-stage .link {
  transition-duration: 450ms;
}

/* Мягкие границы размытия с обеих сторон: радиус плавно растёт от внешнего края к панели */
.g-page .g-blur {
  --f: 72px;

  left: -72px;
  right: -72px;
}

.g-page .g-blur i {
  --r: linear-gradient(to left, transparent calc(var(--s) * var(--f) / 8), #000 calc((var(--s) + 1) * var(--f) / 8));

  -webkit-mask-image: var(--m), var(--r);
  mask-image: var(--m), var(--r);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

/* Блок размытия повторяет карточки: сверху и снизу край мягко сходит на нет, по высоте задаётся из graph.js */
.g-page .g-blur i {
  --v: linear-gradient(to bottom, transparent, #000 40px, #000 calc(100% - 40px), transparent);

  -webkit-mask-image: var(--m), var(--r), var(--v);
  mask-image: var(--m), var(--r), var(--v);
  -webkit-mask-composite: source-in, source-in;
  mask-composite: intersect, intersect;
}

/* Кнопка «назад» в шапке чужого отчёта */
.results .rp-back {
  display: grid;
  flex: none;
  place-items: center;
  width: 32px;
  height: 32px;
  margin-right: -2px;
  border-radius: 50%;
  background: var(--fill);
  color: var(--txt-hi);
}

.results .rp-back:hover {
  background: #262626;
}

.results .rp-back svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Группа, на которую указал узел графа: короткая подсветка */
.results .rc-group.flash .rc-head {
  animation: rc-flash 1400ms ease-out;
}

.results .rc-group.flash .list {
  animation: rc-flash-list 1400ms ease-out;
}

@keyframes rc-flash {
  0% { background: rgba(255, 255, 255, 0.14); }
  100% { background: transparent; }
}

@keyframes rc-flash-list {
  0% { box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.32); }
  100% { box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0); }
}


/* ───── Размытие графа за правой панелью (вне панели): 6 слоёв, радиус растёт к карточкам, края мягкие ───── */

.g-blur {
  --f: 72px;

  position: absolute;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  transition: opacity 800ms cubic-bezier(0.16, 1, 0.3, 1);
}

.g-blur.on {
  opacity: 1;
}

.g-blur i {
  --m: linear-gradient(to right, transparent calc(var(--s) * var(--f) / 6), #000 calc((var(--s) + 1) * var(--f) / 6));
  --r: linear-gradient(to left, transparent calc(var(--s) * var(--f) / 6), #000 calc((var(--s) + 1) * var(--f) / 6));
  --v: linear-gradient(to bottom, transparent, #000 40px, #000 calc(100% - 40px), transparent);

  position: absolute;
  inset: 0;
  -webkit-mask-image: var(--m), var(--r), var(--v);
  mask-image: var(--m), var(--r), var(--v);
  -webkit-mask-composite: source-in, source-in;
  mask-composite: intersect, intersect;
  -webkit-backdrop-filter: blur(var(--b));
  backdrop-filter: blur(var(--b));
}

.g-blur i:nth-child(1) { --s: 0; --b: 0.55px; }
.g-blur i:nth-child(2) { --s: 1; --b: 1.1px; }
.g-blur i:nth-child(3) { --s: 2; --b: 2.2px; }
.g-blur i:nth-child(4) { --s: 3; --b: 4.4px; }
.g-blur i:nth-child(5) { --s: 4; --b: 8.8px; }
.g-blur i:nth-child(6) { --s: 5; --b: 17px; }

/* Выделение группы по клику на граф: мягкое свечение заливки и названия, без обводки */
.results .rc-group.flash .rc-head {
  animation: none;
}

.results .rc-group.flash .list {
  animation: rc-tint 1700ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.results .rc-group.flash .rc-title {
  animation: rc-title 1700ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

@keyframes rc-tint {
  0% { background: #2b2b2b; }
  100% { background: #1c1c1c; }
}

@keyframes rc-title {
  0% { color: #fff; text-shadow: 0 0 14px rgba(255, 255, 255, 0.35); }
  100% { color: var(--txt-hi); text-shadow: 0 0 0 rgba(255, 255, 255, 0); }
}

/* Размытие явнее: шире переход и сильнее радиус */
.g-blur {
  --f: 96px;
}

.g-blur i:nth-child(1) { --b: 0.8px; }
.g-blur i:nth-child(2) { --b: 1.6px; }
.g-blur i:nth-child(3) { --b: 3.2px; }
.g-blur i:nth-child(4) { --b: 6.4px; }
.g-blur i:nth-child(5) { --b: 13px; }
.g-blur i:nth-child(6) { --b: 26px; }

/* Выделенная группа: пока выбран узел графа, группа подсвечена цветом этого узла */
.results .rc-group .list {
  transition: background 320ms ease, box-shadow 320ms ease;
}

.results .rc-group.selected .list {
  background: #262626;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 55%, transparent), 0 0 26px color-mix(in srgb, var(--accent) 16%, transparent);
  animation: none;
}

.results .rc-group.selected .rc-title {
  color: #fff;
  animation: none;
}

.results .rc-group.selected .rc-title::before {
  content: '';
  display: inline-block;
  width: 7px;
  height: 7px;
  margin: 0 8px 1px 0;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 10px var(--accent);
  vertical-align: middle;
}

.results .rc-group.selected .rc-ic {
  color: var(--accent);
}

/* Выделенная группа — спокойно, без цветов: чуть светлее заливка и тонкий светлый контур */
.results .rc-group.selected .list {
  background: #242424;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}

.results .rc-group.selected .rc-title::before {
  content: none;
}

.results .rc-group.selected .rc-ic {
  color: #fff;
}

.results .rc .index-link.muted h2 {
  color: var(--mute);
}

/* Размытие: два слоя вместо шести, один плавный переход маски на слой — меньше нагрузки и без «искр» при наведении на граф */
.g-blur {
  --f: 96px;

  transform: translateZ(0);
}

.g-blur i {
  --m: linear-gradient(to right, transparent calc(var(--s) * var(--f)), #000 calc(var(--e) * var(--f)));
  --r: linear-gradient(to left, transparent calc(var(--s) * var(--f)), #000 calc(var(--e) * var(--f)));
}

.g-blur i:nth-child(1) { --s: 0; --e: 0.7; --b: 6px; }
.g-blur i:nth-child(2) { --s: 0.35; --e: 1; --b: 20px; }

/* Снизу небольшой отступ: панель не прокручивается дальше последней карточки, пустого места под ней нет */
.results .group.cards {
  padding-bottom: 40px;
}

/* Выделенная группа явнее */
.results .rc-group.selected .list {
  background: #2d2d2d;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2);
}

.results .rc-group.selected .rc-title {
  color: #fff;
}

/* Карта крупнее, чтобы по ней было удобно двигаться и видеть подпись */
.results .rc .tab-map {
  height: 210px;
}