@import url('https://fonts.gstatic.com' crossorigin);

* { margin: 0; padding: 0; box-sizing: border-box; }

/* ═══════════════════ Icon system ═════════════════════════════════════════
   Use:  <svg class="cex-icon"><use href="#i-trash"/></svg>
   Modifiers:
     .cex-icon--sm  → 14px (inline в тексте, мета)
     .cex-icon       → 18px (default, в кнопках)
     .cex-icon--lg  → 22px (тулбар, заголовки модалов)
     .cex-icon--ink → "след пера" — тонкий drop-shadow для крупных
   Цвет всегда наследуется через currentColor.
   ═══════════════════════════════════════════════════════════════════════ */
.cex-icon {
  display: inline-block;
  width: 18px;
  height: 18px;
  vertical-align: -3px;
  flex-shrink: 0;
  stroke-width: 1.75;
  color: inherit;
  transition: opacity .18s ease, color .18s ease, transform .18s ease;
}
.cex-icon--sm { width: 14px; height: 14px; vertical-align: -2px; stroke-width: 1.85; }
.cex-icon--lg { width: 22px; height: 22px; vertical-align: -4px; stroke-width: 1.7; }
.cex-icon--ink {
  filter: drop-shadow(0 .5px 0 rgba(60, 40, 20, .12));
}
/* Деликатный hover: чуть проявляем иконку, без анимаций штриха */
button:hover > .cex-icon,
a:hover > .cex-icon,
.cex-settings-tile:hover .cex-icon,
.cex-tile:hover .cex-icon {
  opacity: .88;
}
button:active > .cex-icon,
a:active > .cex-icon {
  transform: translateY(.5px);
}
@media (prefers-reduced-motion: reduce) {
  .cex-icon { transition: none; }
  button:active > .cex-icon, a:active > .cex-icon { transform: none; }
}


body {
  background: #F0EBE1;
  min-height: 100vh;
  font-family: 'Georgia', serif;
}

body.jm-active {
  overflow: hidden;
}

.map-outer {
  overflow: auto;
  display: block;
  flex: 1;
  min-height: 0;
  width: 100%;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x pan-y;
  position: relative;
  background: #F0EBE1;
  overscroll-behavior: contain;
}
.map-outer::-webkit-scrollbar { display: none; }

@media print {
  #cex-overlay, #jm-pdf-bar, #jm-header, #interviewer-modal { display: none !important; }

  /* All siblings of #jm-wrapper removed from flow (belt+suspenders with JS) */
  body > *:not(#jm-wrapper) { display: none !important; }

  @page { size: A4 portrait; margin: 0; }

  html {
    margin: 0 !important; padding: 0 !important;
    background: white !important;
    overflow: hidden !important;
    height: 297mm !important;
    max-height: 297mm !important;
  }

  body {
    margin: 0 !important; padding: 0 !important;
    background: white !important;
    overflow: hidden !important;
    /* Explicit A4 height constrains document to 1 page */
    height: 297mm !important;
    max-height: 297mm !important;
    width: 210mm !important;
    /* Positioned parent for absolute #jm-wrapper */
    position: relative !important;
  }

  /* position:absolute (NOT fixed) — fixed repeats on every page in Chrome/Android */
  #jm-wrapper {
    position: absolute !important;
    top: 0 !important; left: 0 !important;
    width: 210mm !important;
    height: 297mm !important;
    display: flex !important;
    flex-direction: column !important;
    background: white !important;
    padding: 5mm !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  #print-header     { order: 0; flex-shrink: 0; }
  .map-outer        { order: 1; flex: 1 1 auto; }
  #print-footer-bar { order: 2; flex-shrink: 0; }

  .map-outer {
    overflow: visible !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    width: 100% !important;
    /* Must be tall enough to contain the scaled map without clipping */
    min-height: 0 !important;
  }

  .map-container {
    /* transform:scale renders at full resolution then scales — preserves pixel-perfect circles */
    zoom: 1 !important;
    transform: scale(0.588) !important;
    transform-origin: top center !important;
    /* Collapse the excess layout space that transform:scale leaves behind:
       horizontal: (1286 × 0.412) / 2 ≈ 265px per side
       vertical:   1293 × 0.412 ≈ 533px at bottom                          */
    margin-left:   calc(1286px * (1 - 0.588) / -2) !important;
    margin-right:  calc(1286px * (1 - 0.588) / -2) !important;
    margin-bottom: calc(1293px * (1 - 0.588) * -1) !important;
    box-shadow: none !important;
    border: none !important;
    will-change: auto !important;
    position: relative !important;
    width: 1286px !important;
    height: 1293px !important;
  }

  .sticker   { box-shadow: none !important; filter: none !important; }
  .card      { box-shadow: none !important; filter: none !important; }
  .red-input { box-shadow: none !important; }
  .stiky-index {
    position: absolute !important;
    left: 9px !important; top: 19px !important;
    width: 18px !important; height: 18px !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    font-family: 'Roboto Flex', sans-serif !important;
    font-size: 6px !important; font-weight: 700 !important;
    color: rgba(80,40,30,0.7) !important;
    pointer-events: none !important;
    z-index: 4 !important; line-height: 1 !important;
  }
  .stiky {
    overflow: visible !important;
  }
  .stiky-circle {
    position: absolute !important;
    width: 18px !important; height: 18px !important;
    min-width: 18px !important; min-height: 18px !important;
    max-width: 18px !important; max-height: 18px !important;
    aspect-ratio: 1 / 1 !important;
    border-radius: 999px !important;
    background: #F1B59E !important;
    left: 9px !important; top: 19px !important;
    flex-shrink: 0 !important;
    box-sizing: content-box !important;
    padding: 0 !important; border: none !important;
    transform: none !important;
  }
  .sticker:hover { filter: none !important; }

  #print-header {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    padding: 0 0 6px 0;
    border-bottom: 1px solid #CEC4B8;
    margin-bottom: 8px;
    width: 100%;
  }
  #print-header-logo {
    font-family: 'Cormorant Garamond', serif;
    font-size: 18px; font-weight: 600;
    letter-spacing: 0.06em; color: #28231E;
  }
  #print-header-logo em { color: #8EA68C; font-style: normal; }
  #print-header-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 14px; font-weight: 600;
    letter-spacing: 0.06em; color: #5A5049;
    text-align: right;
  }
  #print-header-name { display: none; }

  #print-footer-bar {
    display: flex !important;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 6px 0 0 0;
    border-top: 1px solid #CEC4B8;
    margin-top: 8px;
    width: 100%;
    gap: 18px 18px;
  }
  #print-note-wrap {
    display: flex; align-items: baseline; gap: 6px;
    width: 100%; flex-basis: 100%;
    padding-top: 4px;
    border-top: 0.5px solid #EDE6DA;
  }
  #print-note-label {
    font-family: 'Roboto Flex', sans-serif;
    font-size: 9px; font-weight: 500;
    text-transform: uppercase; letter-spacing: 0.05em; color: #9A8E84;
    white-space: nowrap; flex-shrink: 0;
  }
  #print-note-value {
    font-family: 'Cormorant Garamond', serif;
    font-size: 13px; color: #28231E;
  }
  #print-period-wrap { display: flex; align-items: baseline; gap: 6px; flex-shrink: 0; }
  #print-period-label {
    font-family: 'Roboto Flex', sans-serif;
    font-size: 9px; font-weight: 500;
    text-transform: uppercase; letter-spacing: 0.05em; color: #9A8E84;
  }
  #print-period-value {
    font-family: 'Cormorant Garamond', serif;
    font-size: 13px; color: #28231E;
  }
  #print-duration {
    font-family: 'Roboto Flex', sans-serif;
    font-size: 9px; font-weight: 500;
    text-transform: uppercase; letter-spacing: 0.05em; color: #9A8E84;
    flex-shrink: 0;
  }
  #print-duration span {
    display: inline; font-family: 'Cormorant Garamond', serif;
    font-size: 13px; text-transform: none;
    letter-spacing: 0; color: #28231E; font-weight: 400;
  }
  #print-code-wrap { display: flex; align-items: baseline; gap: 5px; flex-shrink: 0; }
  #print-code-label {
    font-family: 'Roboto Flex', sans-serif;
    font-size: 9px; font-weight: 500;
    text-transform: uppercase; letter-spacing: 0.05em; color: #9A8E84;
  }
  #print-code-value {
    font-family: 'Cormorant Garamond', serif;
    font-size: 13px; color: #28231E;
  }
  #print-interviewer-wrap { display: flex; align-items: baseline; gap: 6px; flex-shrink: 0; }
  #print-interviewer-label {
    font-family: 'Roboto Flex', sans-serif;
    font-size: 9px; font-weight: 500;
    text-transform: uppercase; letter-spacing: 0.05em; color: #9A8E84;
  }
  #print-interviewer-value {
    font-family: 'Cormorant Garamond', serif;
    font-size: 13px; color: #28231E;
  }
  #print-date {
    font-family: 'Jost', sans-serif;
    font-size: 11px; color: #9A8E84;
    flex-shrink: 0;
  }

  * {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
}

/* Solo client — read-only map: cursor only; interactions blocked via JS _canEditMap() guards */
.map-container.map-readonly { cursor: default; }
.map-container.map-readonly .ph-span { cursor: default !important; }
.map-container.map-readonly .stiker-img,
.map-container.map-readonly .sticker { pointer-events: none !important; cursor: default !important; }

.map-container {
  position: relative;
  width: 1286px;
  height: 1293px;
  transform-origin: 0 0;
  background: white;
  border: none;
  box-shadow: 0 2px 20px rgba(0,0,0,0.10);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.map-container.stickers-hidden .sticker { background: transparent !important; }

/* ====== Title badge ====== */
.map-badge { z-index: 10;
  position: absolute;
  left: 40px; top: 4px;
  width: 111px; height: 30px;
  background: white;
  border: 1px solid rgba(0,0,0,0.2);
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  letter-spacing: 0.04em;
  color: #3a3535;
  font-weight: 600;
  z-index: 10;
}

/* ====== STICKER — 284×284 background square ====== */
.sticker {
  position: absolute;
  width: 284px;
  height: 284px;
  background: white;
  cursor: pointer;
  z-index: 1;
  /* Multi-layer drop shadow matching the SVG filter */
  box-shadow:
    0 2.5px 2px rgba(14,15,14,0.02),
    0 3px 5px rgba(14,15,14,0.04),
    0 8px 10px rgba(14,15,14,0.08);
  transition: background 0.2s ease;
}

.sticker:hover { filter: brightness(0.985); }

/* ====== Card ====== */
.card {
  position: absolute;
  width: 242px;
  height: 242px;
  border-radius: 20px;
  background: #F5EEE1;
  z-index: 2;
  box-shadow: -10.74px 2.15px 16.65px rgba(14,15,14,0.7);
  overflow: visible;
}
.card.row4 { background: #F5EEE0; }

/* ── Hover highlight from axis labels — sticker background tint ── */
.sticker.mkp-hl { background: rgba(142,166,140,0.35) !important; }

/* ====== Card header ====== */
.card-header {
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 91px;
  border-radius: 20px 20px 0 0;
}

.row1 .card-header { background: #C5C5B3; }
.row2 .card-header { background: #8EA68C; }
.row3 .card-header { background: #ADC9BB; }
.row4 .card-header { background: #88ADAC; }

/* ====== Stiky band (FFFFF5) — NOT clickable for color ====== */
.stiky {
  position: absolute;
  left: 0; right: 0; top: 91px;
  height: 54px;
  background: #FFFFF5;
  display: flex;
  align-items: center;
  overflow: visible;
}

/* circle number badge */
.stiky-circle {
  position: absolute;
  width: 18px; height: 18px;
  min-width: 18px; min-height: 18px;
  max-width: 18px; max-height: 18px;
  aspect-ratio: 1 / 1;
  border-radius: 999px;
  background: #F1B59E;
  left: 9px;
  top: 19px;
  pointer-events: none;
  z-index: 3;
  flex-shrink: 0;
  box-sizing: content-box;
  padding: 0;
  border: none;
}

.stiky-index {
  position: absolute;
  left: 9px; top: 19px;
  width: 18px; height: 18px;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Roboto Flex', sans-serif;
  font-size: 6px; font-weight: 700;
  color: rgba(80,40,30,0.7);
  pointer-events: none;
  z-index: 4;
  line-height: 1;
}

/* ====== Head silhouette image (clickable trigger) ====== */
.stiky-img {
  margin-left: auto;
  width: 51px; height: 54px;
  flex-shrink: 0;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.stiky-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0.8;
  pointer-events: none;
  display: block;
}

.stiky-img.active img { opacity: 0.4; }

/* ====== Separator & bottom zone ====== */

.content-zone {
  position: absolute;
  left: 0; right: 0; top: 145px; bottom: 0;
  border-radius: 0 0 20px 20px;
  overflow: hidden;
}


/* ====== Red square — input field over head image ====== */
.red-input {
  display: none;
  position: absolute;
  /* positioned relative to .card */
  width: 70px; height: 70px;
  right: -20px;          /* extends by border-radius (20px) past right edge of card */
  top: 83px;             /* just above stiky band (stiky starts at ~91px) */
  background: #FFAFA3;
  z-index: 20;
  border-radius: 3px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.18);
  animation: popIn 0.15s ease;
}
.red-input.visible {
  display: flex;
  align-items: center;
  justify-content: center;
}
@keyframes popIn {
  from { opacity:0; transform: scale(0.85); }
  to   { opacity:1; transform: scale(1); }
}

.red-textarea {
  width: 100%;
  height: auto;
  max-height: 100%;
  border: none; outline: none;
  background: transparent;
  padding: 2px 7px;
  font-family: 'Roboto Flex', sans-serif;
  font-size: 9px;
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: 0.005em;
  color: #3a3535;
  border-radius: 3px;
  text-align: center;
  box-sizing: border-box;
  cursor: text;
  word-break: break-word;
  overflow-wrap: break-word;
  white-space: pre-wrap;
  overflow: hidden;
}
.red-textarea:empty::before {
  content: attr(data-placeholder);
  color: rgba(80,50,40,0.45);
  font-size: 9px;
  pointer-events: none;
}


/* ═══ Phrase table overlay ═══════════════════════════════════════════════════
   z-index:4 — sits UNDER SVG text overlay (z-index:5, pointer-events:none).
   SVG text renders on top; click events pass through SVG to ph-span elements.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Outer table: matches card 242×242, dashed border ── */
.ph-table {
  position: absolute;
  top: 0; left: 0;
  width: 242px; height: 242px;
  z-index: 4;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  border: none;
  border-radius: 20px;
}

/* ── Zone rows: heights match card zone boundaries ── */
.ph-zone {
  position: relative;
  width: 100%;
  flex-shrink: 0;
  pointer-events: none;
  box-sizing: border-box;
}
.ph-zone.ph-crisis {
  height: 91px;
  border-radius: 20px 20px 0 0;
  border-bottom: none;
}
.ph-zone.ph-stiky {
  height: 54px;
  border-bottom: none;
}
.ph-row1 .ph-zone.ph-stiky {
  border-bottom: none;
}
.ph-zone.ph-resource {
  height: 97px;
  border-radius: 0 0 20px 20px;
}

/* ── Zone category tag (large font label, faint but legible) ── */
.ph-zone-tag {
  position: absolute;
  left: 19px;
  font-size: 6px;
  font-family: Georgia, serif;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: transparent;
  pointer-events: none;
  white-space: nowrap;
}
.ph-crisis  .ph-zone-tag { top: 3px; left: 19px; right: 19px; text-align: center; }
.ph-stiky   .ph-zone-tag { top: 4px; left: 30px; }
.ph-resource .ph-zone-tag { top: 3px; left: 19px; right: 19px; text-align: center; }



/* ── Inner divider between title sub-zone and phrase sub-zone ── */
/* crisis: at 38px (= ph-cell top); resource: at 36px (= ph-cell top) */
/* ── Inner divider — exact SVG y positions ──
   Header line:  y_rel=40px  (SVG line at card_top+40, all rows)
   Content line: y_rel=52px  (SVG line at card_top+197 = content_zone_top+52) ── */
.ph-inner-divider {
  position: absolute;
  left: 0; right: 0;
  height: 0;
  border-top: none;
  pointer-events: none;
}
.ph-crisis   .ph-inner-divider { top: 40px; }
.ph-resource .ph-inner-divider { top: 52px; }

/* ── Разделительные линии внутри карточек ── */
.card-divider { position:absolute; height:0; border-top:0.537px solid #3A3535; pointer-events:none; }

/* ── Phrase cell — width matches SVG text zone (x_rel 35-206 = 171px) ── */
.ph-cell {
  position: absolute;
  left: 19px; right: 19px;
  font-size: 9px;
  font-family: 'Roboto Flex', sans-serif;
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: 0.005em;
  word-wrap: normal;
  overflow-wrap: normal;
  word-break: keep-all;
  color: transparent;
  pointer-events: none;
  text-align: center;
}
/* Crisis phrases: start 3px below the 40px inner divider */
.ph-crisis   .ph-cell { top: 43px; bottom: 3px; text-align: center;
                         display: flex; flex-direction: column; justify-content: center; align-items: center; }
/* Helper: right-aligned, right boundary at image edge (56px from card right) */
.ph-stiky    .ph-cell { top: 0; bottom: 0; left: 30px; right: 56px;
                         display: flex; align-items: center; flex-wrap: wrap;
                         align-content: center; justify-content: flex-end;
                         text-align: right; }
/* Resource phrases: start 3px below the 52px inner divider */
.ph-resource .ph-cell { top: 55px; bottom: 3px; text-align: center;
                         display: flex; flex-direction: column; justify-content: center; align-items: center; }

/* Section title — transparent div aligned to SVG brownish title paths */
.ph-section-title {
  position: absolute;
  left: 19px; right: 19px;
  font-family: 'Wavefont', sans-serif;
  font-weight: 300;
  line-height: 1.2;
  letter-spacing: 0.01em;
  pointer-events: auto;
  cursor: pointer;
  text-align: center;
}
.ph-crisis   .ph-section-title { top: 0; bottom: 50px; color: #3F403E; font-size: 15px; font-weight: 700; display: flex; align-items: center; justify-content: center; line-height: 1.01; }
.ph-resource .ph-section-title { position: absolute; top: 0; height: 52px; left: 0; right: 0; width: 100%; color: #8B645C; font-size: 24px; font-weight: 400; font-style: normal; letter-spacing: 0.04em; text-align: center; line-height: 52px; white-space: nowrap; overflow: visible; display: block; }

/* ── Individual phrase span: hit target with click highlight ── */
.ph-span {
  display: inline;
  color: rgba(45,28,15,0.78);
  cursor: pointer;
  pointer-events: auto;
  user-select: none;
  border-radius: 2px;
  padding: 0 1px;
}

/* On-state: coloured highlighter stripe sits under transparent SVG text */
.ph-crisis   .ph-span.ph-on { background: rgba(255,210,160,0.68); color: rgba(50,30,20,0.75); }
.ph-stiky    .ph-span.ph-on { background: rgba(255,210,160,0.68); color: rgba(30,50,30,0.75); }
.ph-resource .ph-span.ph-on { background: rgba(255,210,160,0.68); color: rgba(20,30,60,0.75); }
/* Gray-state: light warm tint — visible on all card backgrounds */
.ph-crisis   .ph-span.ph-gray { background: rgba(60,45,30,0.12); color: rgba(50,30,20,0.50); }
.ph-stiky    .ph-span.ph-gray { background: rgba(60,45,30,0.12); color: rgba(30,50,30,0.50); }
.ph-resource .ph-span.ph-gray { background: rgba(60,45,30,0.12); color: rgba(20,30,60,0.50); }
/* Bang-check: was ✓ → red (priority over orange) */
.ph-crisis   .ph-span.ph-bang-check { background: rgba(255,175,163,0.80); color: rgba(80,20,10,0.85); }
.ph-stiky    .ph-span.ph-bang-check { background: rgba(255,175,163,0.80); color: rgba(80,20,10,0.85); }
.ph-resource .ph-span.ph-bang-check { background: rgba(255,175,163,0.80); color: rgba(80,20,10,0.85); }
/* Bang-none: not ✓ → pale cold blue */
.ph-crisis   .ph-span.ph-bang-none { background: rgba(140,170,210,0.53); color: rgba(20,30,60,0.70); }
.ph-stiky    .ph-span.ph-bang-none { background: rgba(140,170,210,0.53); color: rgba(20,30,60,0.70); }
.ph-resource .ph-span.ph-bang-none { background: rgba(140,170,210,0.53); color: rgba(20,30,60,0.70); }

/* Non-clickable comma separator */
.ph-comma {
  display: inline;
  color: rgba(45,28,15,0.78);
  pointer-events: none;
  user-select: none;
  font-size: 9px;
  font-family: 'Roboto Flex', sans-serif;
}


/* Hide SVG phrase text paths — JS ph-table provides visible text instead.
   Keep: #3F403E WITH mask  = crisis section titles (header zone)
   Keep: #88655C WITH mask  = resource section titles (content zone)  
   Keep: #8B645C WITH mask  = resource section titles (content zone, row4)
   Hide: all without mask   = phrase body text in all three zones        */



/* Right-align split lines in helper (stiky) zone */
.ph-zone.ph-stiky .ph-cell div { text-align: right !important; }



/* ═══ CoEхpera — fully responsive styles ════════════════════════════════════ */
:root {
  --bg:#F0EBE1; --bg2:#E6DFD3; --ink:#28231E; --ink2:#5A5049;
  --ink3:#9A8E84; --border:#CEC4B8;
  --row4:#C5C5B3; --row3:#8EA68C; --row2:#ADC9BB; --row1:#88ADAC;
  --salmon:#F1B59E; --sticky-bg:#FFFFF5; --card-bg:#F5EEE1; --brown-txt:#8B645C;
  --ac1:#8EA68C; --ac2:#88ADAC; --ac3:#C5C5B3;
  --cex-btn-h: 46.5px; /* единая высота всех кнопок (.cex-btn) и сторона квадратных (.cex-icon-btn) */
}

/* ── Base layout ── */
#cex-overlay {
  position: fixed; inset: 0; z-index: 9000;
  background: var(--bg);
  font-family: 'Jost', sans-serif; color: #28231E; font-size: 16px;
  display: flex; flex-direction: column;
  overflow: hidden;
}
#cex-overlay * { box-sizing: border-box; }
.cex-screen { display: none; flex: 1; min-height: 0; flex-direction: column; }
.cex-screen.active { display: flex; }
/* Intro buttons: always in a row */
.intro-btn-row { display:flex; flex-direction:row; flex-wrap:wrap; justify-content:center; align-items:center; gap:10px; width:auto; }
.intro-btn { white-space:nowrap; width:180px; }

/* ── Intro ── */
#scr-intro { justify-content: center; align-items: center; text-align: center; padding: 0; }
.intro-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(38px, 8vw, 55px);
  font-weight: 400; line-height: 1.1; margin-bottom: 14px;
}
.intro-sub {
  color: #5A5049; line-height: 1.75;
  max-width: 380px; margin: 0 auto 36px;
  font-size: clamp(14px, 3.5vw, 15px);
}

/* ── Header ── */
.cex-hdr {
  padding: 12px 22px;
  border-bottom: 1px solid #CEC4B8;
  display: flex; align-items: center; justify-content: space-between;
  background: var(--bg); position: sticky; top: 0; z-index: 20;
  flex-shrink: 0;
}
.cex-logo { font-family: 'Cormorant Garamond', serif; font-size: clamp(17px, 4vw, 23px); font-weight: 600; letter-spacing: .06em; }
.cex-logo em { color: #8EA68C; font-style: normal; }
.cex-hdr-title { position: absolute; right: 22px; left: auto; transform: none; font-family: 'Cormorant Garamond', serif; font-size: 15px; font-weight: 600; letter-spacing: .06em; color: #5A5049; white-space: nowrap; pointer-events: none; }
.cex-hdr-count { position: absolute; left: 50%; transform: translateX(-50%); font-family: 'Jost', sans-serif; font-size: 11px; color: #9A8E84; white-space: nowrap; pointer-events: none; }
@media (max-width: 460px) { .cex-hdr-count { display: none; } }

/* ── Round bar ── */
.rnd-bar {
  padding: 12px 22px;
  border-bottom: 1px solid #CEC4B8;
  flex-shrink: 0;
}
.rnd-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 10px; gap: 10px; }
.rnd-tag {
  display: inline-block;
  padding: 6px 13px;
  border-radius: 20px;
  font-family: 'Roboto Flex', sans-serif;
  font-size: clamp(10px, 2.8vw, 13px);
  font-weight: 400; letter-spacing: .01em; line-height: 1.55;
  white-space: normal; flex: 1; text-transform: uppercase;
}
.rnd-tag.r1 { background: #EBF4EB; color: #3E6E3E; }
.rnd-tag.r2 { background: #E5EFEF; color: #2E5A5A; }
.rnd-tag.r3 { background: #F0F0E8; color: #6A6A58; }
.rnd-ctr { font-size: 12px; color: #9A8E84; white-space: nowrap; padding-top: 6px; }
.prog { height: 2px; background: #CEC4B8; border-radius: 2px; }
.prog-fill { height: 100%; border-radius: 2px; transition: width .35s ease; }
.prog-fill.r1 { background: #8EA68C; }
.prog-fill.r2 { background: #88ADAC; }
.prog-fill.r3 { background: #A8A88A; }

/* ── Card area (scrollable) ── */
.cex-card-area {
  overflow: visible;
  display: flex; justify-content: center; align-items: flex-start;
  padding: 8px 8px 12px 8px;
  position: relative;
}

/* ── Selection card ── */
.sel-card {
  width: 100%; max-width: 480px;
  border-radius: 18px;
  overflow: hidden; background: #F5EEE1;
  box-shadow:
    0 2px 4px rgba(14,15,14,0.08),
    0 6px 16px rgba(14,15,14,0.12),
    0 16px 32px rgba(14,15,14,0.18);
}
.sel-card-topbar {
  padding: 10px 17px;
  background: #E6DFD3; border-bottom: 1px solid #CEC4B8;
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
}
.sel-card-id {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(13px, 3vw, 14px); font-weight: 600; letter-spacing: .14em; color: #5A5049; white-space: nowrap;
}
.sel-card-label {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(14px, 3.8vw, 15px); font-weight: 600; color: #28231E; text-align: right;
}
.sel-zone { padding: 14px 17px; background: var(--zone-color, #C5C5B3); }
.ph {
  display: block; width: 100%;
  padding: 10px 15px 10px 25px;
  border-radius: 10px; border: 1.5px solid transparent;
  background: rgba(255,255,255,.14); color: var(--zone-color-txt, #3A3535);
  font-family: 'Roboto Flex', sans-serif;
  font-size: clamp(14px, 3.8vw, 16px);
  text-align: left; cursor: pointer; transition: all .14s; line-height: 1.5; margin-bottom: 6px;
  -webkit-tap-highlight-color: transparent;
  position: relative;
}
/* ── Bang button (!) — left zone inside .ph ── */
.ph-bang-btn {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 25px;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; font-family: 'Roboto Flex', sans-serif;
  color: transparent;
  cursor: pointer;
  pointer-events: auto;
  transition: color 0.12s;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
/* Show only on self-hover (JS-controlled via .bang-hovered), never when phrase is ? */
.ph:not(.question) .ph-bang-btn.bang-hovered { color: rgba(45,28,15,0.45); }
/* Pinned: always visible (unless question) */
.ph:not(.question) .ph-bang-btn.pinned { color: rgba(45,28,15,0.55); }
.ph:last-child { margin-bottom: 0; }
/* Подсветка только для клавиатуры (:focus-visible) и для настоящего наводящего
   указателя (мышь/трекпад). :hover вынесен в @media (hover: hover), иначе на
   сенсоре он «залипает» на последней тронутой фразе и оставляет белый фон после
   снятия выделения пальцем. */
.ph:focus-visible { background: rgba(255,255,255,.38); border-color: rgba(255,255,255,.48); }
@media (hover: hover) {
  .ph:hover { background: rgba(255,255,255,.38); border-color: rgba(255,255,255,.48); }
}
.ph:focus { outline: none; }
.ph.on { background: rgba(255,255,255,.55); border-color: rgba(255,255,255,.80); }
.ph.on::after { content: ' ✓'; font-size: 12px; opacity: .65; }
.ph.question { background: rgba(255,255,255,.32); border-color: rgba(139,100,92,0.25); }
.ph.question::after { content: ' ?'; font-size: 12px; opacity: .65; }
/* Stage 1 & 2: question border much paler (stage 3 inherits zone-helper override below) */
.sel-zone:not(.zone-helper) .ph.question { border-color: rgba(139,100,92,0.08); }
/* Stage 3 sticky zone: cream bg needs visible brown border */
.zone-helper .ph { border-color: rgba(139,100,92,0.05); background: rgba(255,255,255,.55); }
.zone-helper .ph:focus-visible { border-color: rgba(139,100,92,0.10); background: rgba(255,255,255,.8); }
@media (hover: hover) {
  .zone-helper .ph:hover { border-color: rgba(139,100,92,0.10); background: rgba(255,255,255,.8); }
}
.zone-helper .ph.on { border-color: rgba(139,100,92,0.25); background: rgba(255,255,255,.9); }

/* ── CEX phrase highlights matching map colours ──────────────────────────────
   Peach  = ✓ (ph-on, no bang)
   Red    = ✓ + ! (ph-on + pinned bang)  — higher specificity, declared last
   Gray   = ? (question)
   Blue   = ! only (pinned bang, not on/question)
   ─────────────────────────────────────────────────────────────────────────── */
.ph.on::after { content: ''; }
.ph.question::after { content: ''; }
/* Вопрос → серый */
.ph.question {
  background: rgba(60,45,30,0.08) !important;
  border-color: rgba(60,45,30,0.12) !important;
}
/* Галочка → персик (чуть бледнее) */
.ph.on {
  background: rgba(255,210,160,0.30) !important;
  border-color: rgba(255,180,100,0.30) !important;
}
/* Галочка + ! → красный (override персика) */
.ph.on:has(.ph-bang-btn.pinned) {
  background: rgba(255,175,163,0.45) !important;
  border-color: rgba(255,140,120,0.42) !important;
}
/* ! без галочки → синий */
.ph:not(.on):not(.question):has(.ph-bang-btn.pinned) {
  background: rgba(140,170,210,0.28) !important;
  border-color: rgba(100,140,200,0.32) !important;
}
/* zone-helper (область 3) — те же цвета */
.zone-helper .ph.question {
  background: rgba(60,45,30,0.07) !important;
  border-color: rgba(60,45,30,0.10) !important;
}
.zone-helper .ph.on {
  background: rgba(255,210,160,0.30) !important;
  border-color: rgba(255,180,100,0.28) !important;
}
.zone-helper .ph.on:has(.ph-bang-btn.pinned) {
  background: rgba(255,175,163,0.42) !important;
  border-color: rgba(255,140,120,0.38) !important;
}
.zone-helper .ph:not(.on):not(.question):has(.ph-bang-btn.pinned) {
  background: rgba(140,170,210,0.26) !important;
  border-color: rgba(100,140,200,0.30) !important;
}
/* Practice phrase — no default/hover background; CEX colours for on/question states */
#practice-ph,
#practice-ph:hover,
#practice-ph:focus {
  background: transparent !important;
  border-color: transparent !important;
}
#practice-ph.on {
  background: rgba(255,210,160,0.30) !important;
  border-color: rgba(255,180,100,0.30) !important;
}
#practice-ph.on:has(.ph-bang-btn.pinned) {
  background: rgba(255,175,163,0.45) !important;
  border-color: rgba(255,140,120,0.42) !important;
}
#practice-ph.question {
  background: rgba(60,45,30,0.08) !important;
  border-color: rgba(60,45,30,0.12) !important;
}
#practice-ph:not(.on):not(.question):has(.ph-bang-btn.pinned) {
  background: rgba(140,170,210,0.28) !important;
  border-color: rgba(100,140,200,0.32) !important;
}
/* Non-psychologist solo — no pointer cursor on stiky silhouette and circle area */
.cex-client-solo .stiky-img,
.cex-client-solo .stiky { cursor: default !important; }
/* Non-psychologist solo — block all interactive clicks on the map */
.cex-client-solo .stiky-img,
.cex-client-solo .ph-zone .ph-span { pointer-events: none !important; }
/* Red textarea in readonly mode — display as plain text, no editing cues */
.map-readonly .red-textarea {
  cursor: default !important;
}
.map-readonly:not(.cex-passive-client) .red-textarea:empty::before {
  display: none;
}
.sel-sticky {
  background: #FFFFF5; padding: 10px 17px;
  border-top: 1px solid rgba(0,0,0,.06);
  display: flex; align-items: center; gap: 10px;
}
.sel-sticky-dot { width: 7px; height: 7px; border-radius: 50%; background: #8B645C; opacity: .4; flex-shrink: 0; }
.sel-sticky-text { font-size: clamp(12px, 2.8vw, 14px); color: #8B645C; opacity: .7; font-style: italic; }

/* ── Footer ── */
.rnd-foot {
  padding: 12px 22px;
  border-top: 1px solid #CEC4B8;
  display: flex; justify-content: space-between; align-items: center;
  background: var(--bg); flex-shrink: 0;
}

/* ── Buttons ── */
.cex-btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 11px 21px;
  border-radius: 9px; border: none;
  font-family: 'Jost', sans-serif;
  font-size: clamp(13px, 3.5vw, 15px);
  font-weight: 500; cursor: pointer; transition: all .15s; letter-spacing: .02em;
  min-height: var(--cex-btn-h); /* единая высота кнопок (accessible tap target) */
  -webkit-tap-highlight-color: transparent;
  box-sizing: border-box;
}
.cex-btn-ink { background: #5A5049; color: #F0EBE1; border: 1.5px solid transparent; }
.cex-btn-ink:hover, .cex-btn-ink:active, .cex-btn-ink.bg-hover { background: #28231E; }
.cex-btn-out { background: transparent; border: 1.5px solid #CEC4B8; color: #5A5049; }
.cex-btn-out:hover, .cex-btn-out:active, .cex-btn-out.bg-hover { border-color: #9A8E84; color: #28231E; }
.hamburger-active { background: #28231E !important; color: #F0EBE1 !important; border-color: #28231E !important; }
.btn-consult-process { border-color: #8EA68C !important; color: #8EA68C !important; background: transparent !important; }
.btn-consult-process:hover, .btn-consult-process:active { background: rgba(142,166,140,0.1) !important; }

/* ── Registration/Brief style ── */
.reg-body {
  display: flex;
  flex-direction: column;
  justify-content: safe center;
  align-items: center;
  padding: 44px 30px;
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  min-height: 0;
}

/* Centre short content vertically; 'safe center' falls back to start on overflow — top always reachable */
.reg-body > .reg-form { flex-shrink: 0; }

.reg-form {
  width: 100%;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.brief .reg-form {
  max-width: 520px;
}

.reg-label {
  font-family: 'Roboto Flex', sans-serif;
  font-size: clamp(10px, 2.8vw, 13px);
  font-weight: 500;
  color: #5A5049;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  display: block;
  margin-bottom: 6px;
}

.reg-input {
  padding: 11px 14px;
  border-radius: 9px;
  border: 1.5px solid #CEC4B8;
  background: white;
  color: #28231E;
  font-family: 'Jost', sans-serif;
  font-size: clamp(14px, 3.8vw, 16px);
  transition: border-color 0.15s;
}
.reg-input:-webkit-autofill,
.reg-input:-webkit-autofill:hover,
.reg-input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px white inset;
  -webkit-text-fill-color: #28231E;
  box-shadow: 0 0 0 1000px white inset;
}

.reg-input::placeholder {
  color: #9A8E84;
}

.reg-input:focus {
  outline: none;
  border-color: #8EA68C;
}

.reg-input.reg-input-invalid {
  border-color: #FFAFA3;
}

.reg-checkbox-wrap {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.reg-checkbox-wrap input[type="checkbox"] {
  width: 16px;
  height: 16px;
  min-width: 16px;
  min-height: 16px;
  margin-top: 3px;
  accent-color: #8EA68C;
  cursor: pointer;
}

.reg-checkbox-wrap label {
  font-family: 'Jost', sans-serif;
  font-size: clamp(15px, 3.5vw, 16px);
  color: #5A5049;
  line-height: 1.6;
  cursor: pointer;
  flex: 1;
}

.reg-note {
  font-family: 'Jost', sans-serif;
  font-size: clamp(12px, 2.8vw, 14px);
  color: #9A8E84;
  line-height: 1.65;
  margin-left: 26px;
  margin-top: 6px;
}

.reg-text {
  font-family: 'Jost', sans-serif;
  font-size: clamp(14px, 3.8vw, 16px);
  color: #5A5049;
  line-height: 1.75;
}

.reg-greeting {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(25px, 5vw, 30px);
  font-weight: 400;
  color: #28231E;
  margin-bottom: 20px;
}

.cex-question {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(19px, 4vw, 22px);
  font-weight: 400;
  font-style: italic;
  color: #3A302A;
  line-height: 1.55;
  letter-spacing: 0.01em;
  display: block;
}

.reg-period-wrap {
  display: flex;
  gap: 10px;
  align-items: center;
}

.reg-period-wrap input {
  width: 80px;
  text-align: center;
}

.reg-period-wrap select {
  flex: 1;
}

/* ── Кастомный bottom sheet вместо нативного select (без радиокнопок) ──── */
.cex-select-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.3);
  z-index: 10100;
  align-items: flex-end;
}
.cex-select-overlay.active { display: flex; }

.cex-select-sheet {
  width: 100%;
  background: #fff;
  border-radius: 14px 14px 0 0;
  max-height: 60vh;
  display: flex;
  flex-direction: column;
  transform: translateY(100%);
  transition: transform 0.22s ease;
  padding-bottom: env(safe-area-inset-bottom, 0);
}
.cex-select-sheet.open { transform: translateY(0); }

.cex-select-list {
  overflow-y: auto;
  flex: 1;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 6px 0;
}

.cex-select-opt {
  display: block;
  width: 100%;
  padding: 15px 24px;
  border: none;
  background: none;
  text-align: left;
  font-family: 'Jost', sans-serif;
  font-size: 16px;
  color: #28231E;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.cex-select-opt:active { background: rgba(206,196,184,0.25); }
.cex-select-opt--sel   { color: #8EA68C; font-weight: 500; }

.cex-select-cancel {
  display: block;
  width: 100%;
  padding: 15px 24px;
  border: none;
  border-top: 1px solid #EDE8E1;
  background: #fff;
  font-family: 'Jost', sans-serif;
  font-size: 15px;
  color: #9A8E84;
  cursor: pointer;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
}
.cex-select-cancel:active { background: rgba(206,196,184,0.15); }

#input-period-number {
  flex: none;
  width: 80px;
  text-align: center;
}

/* iOS игнорирует padding у <select> по умолчанию — убираем нативное оформление */
select.reg-input {
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%239A8E84' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 32px;
  cursor: pointer;
}

.cex-footer {
  flex-shrink: 0;
  padding: 12px 22px;
  border-top: 1px solid #CEC4B8;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #F0EBE1;
}
.cex-footer .reg-btn-group {
  width: 100%;
  margin-top: 0;
  justify-content: flex-end;
}
.cex-footer .reg-btn-group > .cex-btn-out:first-child {
  margin-right: auto;
}

/* Единый класс для всех квадратных icon-only кнопок — сторона = высоте кнопок */
.cex-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--cex-btn-h);
  height: var(--cex-btn-h);
  min-height: 0 !important;
  padding: 0 !important;
  box-sizing: border-box;
  flex-shrink: 0;
  line-height: 1;
}

/* Rounds nav pair: shrink proportionally (equal %) when screen is narrow */
.cex-footer .reg-btn-group > div { flex: 0 1 auto; min-width: 0; }
.cex-footer .reg-btn-group > div > .cex-btn { flex: 1 1 auto; min-width: 0; }

.reg-btn-group {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 10px;
}


/* Центрирование вопроса над прогресс-баром */
.rnd-top { 
  justify-content: center;
}
.rnd-tag {
  text-align: center;
  flex: 1;
}

.hdr-round-counter {
  font-size: clamp(10px, 2.5vw, 12px);
  color: #9A8E84;
}

.hdr-date {
  font-family: 'Jost', sans-serif;
  font-size: clamp(12px, 2.8vw, 14px);
  color: #9A8E84;
  white-space: nowrap;
}

/* ── Round screen centered layout ── */
#scr-round {
  flex-direction: column !important;
}

#scr-inst2, #scr-inst3, #scr-inst4 {
  position: fixed; inset: 0; z-index: 9100;
  background: var(--bg);
  font-family: 'Jost', sans-serif; color: #28231E; font-size: 16px;
  display: none; flex-direction: column;
  overflow: hidden;
}

/* Legend screens: vertically centred when content fits, scrollable from top on overflow */
#scr-legend .reg-body {
  justify-content: safe center;
}
#scr-legend .reg-form {
  gap: 16px;
}

.form-group-hidden {
  display: none;
}

.form-group-hidden.show {
  display: block;
}

.rnd-container {
  display: flex;
  flex-direction: column;
  justify-content: safe center;
  align-items: center;
  flex: 1;
  padding: 32px;
  gap: 16px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  min-height: 0;
}

.rnd-container > .rnd-content { flex-shrink: 0; }

.rnd-content {
  width: 100%;
  max-width: 480px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ── Small phones (≤380px) ── */
@media (max-width: 380px) {
  .rnd-top { flex-direction: column; gap: 6px; }
  .rnd-ctr { padding-top: 0; align-self: flex-end; }
  .rnd-foot { justify-content: space-between; }
  .inline-fields { flex-direction: column; }
}

/* Arrow buttons collapse to square icon on narrow screens */
@media (max-width: 480px) {
  /* Other left-arrow buttons outside session groups collapse (non-session context) */
  /* #btn-add excluded — collapse handled dynamically by _checkBackBtnOverflow() */
  .cex-btn:not(.jm-back-btn):has(.cex-arr-txt) .cex-arr-txt { display: none; }
  .cex-btn:not(.jm-back-btn):has(.cex-arr-txt) { padding: 6px 8px !important; aspect-ratio: 1; flex-shrink: 0; min-width: 0; width: auto !important; }
  /* Session back buttons (groups that also have Остановить): keep label — collapse deferred to 360px */
  .reg-btn-group:has(.cex-stop-btn) .cex-btn.cex-btn-out:has(.cex-arr-txt) .cex-arr-txt { display: inline; }
  .reg-btn-group:has(.cex-stop-btn) .cex-btn.cex-btn-out:has(.cex-arr-txt) { padding: 11px 21px !important; aspect-ratio: unset; flex-shrink: 1; width: auto !important; }
  /* Forward (ink) buttons: NEVER collapse */
  .reg-btn-group .cex-btn.cex-btn-ink:has(.cex-arr-txt) .cex-arr-txt { display: inline; }
  .reg-btn-group .cex-btn.cex-btn-ink:has(.cex-arr-txt) { padding: 11px 21px !important; aspect-ratio: unset; flex-shrink: 1; width: auto !important; }
  /* Solo exit button (only child in non-session footer): always keep label */
  .reg-btn-group .cex-btn.cex-btn-out:only-child:has(.cex-arr-txt) .cex-arr-txt { display: inline; }
  .reg-btn-group .cex-btn.cex-btn-out:only-child:has(.cex-arr-txt) { padding: 11px 21px !important; aspect-ratio: unset; flex-shrink: 1; width: auto !important; }
  /* Exit button + единственная кнопка справа: тоже держим подпись (места хватает).
     Срабатывает только когда сосед — отдельная .cex-btn (один правый элемент);
     если справа <div> с несколькими кнопками — правило не матчится, стрелка сворачивается. */
  .reg-btn-group > .cex-btn-out:first-child:nth-last-child(2):has(+ .cex-btn) .cex-arr-txt { display: inline; }
  .reg-btn-group > .cex-btn-out:first-child:nth-last-child(2):has(+ .cex-btn) { padding: 11px 21px !important; aspect-ratio: unset; flex-shrink: 1; width: auto !important; }
}
@media (max-width: 360px) {
  /* Step 2: session back buttons collapse to arrow-only */
  .reg-btn-group:has(.cex-stop-btn) .cex-btn.cex-btn-out:has(.cex-arr-txt) .cex-arr-txt { display: none; }
  .reg-btn-group:has(.cex-stop-btn) .cex-btn.cex-btn-out:has(.cex-arr-txt) { padding: 6px 8px !important; aspect-ratio: 1; flex-shrink: 0; min-width: 0; width: auto !important; }
}
/* #btn-add collapse state is toggled by JS via .back-btn-collapsed */
#btn-add.back-btn-collapsed #btn-add-label { display: none; }
#btn-add.back-btn-collapsed { padding: 6px 8px !important; aspect-ratio: 1; flex-shrink: 0; min-width: 0; width: auto !important; }
/* #btn-anon-save-account uses the same collapse behaviour */
#btn-anon-save-account.back-btn-collapsed .cex-arr-txt { display: none; }
#btn-anon-save-account.back-btn-collapsed { padding: 6px 8px !important; aspect-ratio: 1; flex-shrink: 0; min-width: 0; width: auto !important; }

/* Hide scrollbars on webkit for scrollable screen bodies */
.reg-body::-webkit-scrollbar { display: none; }
.rnd-container::-webkit-scrollbar { display: none; }

#intro-btns-client { row-gap: 8px; flex-direction: row !important; flex-wrap: wrap; justify-content: center; align-items: center; }
#intro-btns-client > button { margin: 0; width: 180px; }

/* Списки карт — фокус для клавиатурной прокрутки */
#history-list:focus, #shared-list:focus, #stats-list:focus,
#trash-list:focus, #admin-stat-list:focus, #admin-abandoned-list:focus {
  outline: none;
  box-shadow: inset 0 0 0 2px rgba(142,166,140,0.35);
  border-radius: 4px;
}

/* История карт — карточка */
.card-comments-col { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; padding-right: 32px; }
.history-card-top-row { display: flex; flex-direction: row; gap: 14px; align-items: flex-start; }
.card-toggle-link { font-family: 'Jost', sans-serif; font-size: 11px; color: #9A8E84; cursor: pointer; display: inline-block; padding: 2px 0; user-select: none; align-self: flex-start; }
.card-toggle-link:hover { color: #5A5049; }
.cex-selected { box-shadow: 0 0 0 2px #8EA68C; }

/* ═══════════════════════════════════════════════════════════════
   УНИВЕРСАЛЬНЫЙ ФУТЕР С ПОЛЕМ КОММЕНТАРИЯ
   Используется на: карте (#jm-pdf-bar), экране сравнений (#compare-comment-bar)
   и любом другом экране, где нужна та же визуальная схема.
   ═══════════════════════════════════════════════════════════════ */

.cex-comment-bar {
  flex-shrink: 0;
  padding: 0 16px 12px;
  border-top: 1px solid #CEC4B8;
  background: #F0EBE1;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}

/* Движок изменения размера / скрытия поля комментария */
.cex-comment-bar-handle,
#jm-pdf-bar-handle {
  cursor: ns-resize;
  padding: 8px 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  user-select: none;
  touch-action: none;
  margin: 0 -16px;
}
#jm-pdf-bar-handle { margin: 0 -22px; }
.cex-comment-bar-handle::after,
#jm-pdf-bar-handle::after {
  content: '';
  display: block;
  width: 32px;
  height: 3px;
  border-radius: 2px;
  background: #CEC4B8;
  transition: background 0.15s;
}
.cex-comment-bar-handle:hover::after,
#jm-pdf-bar-handle:hover::after { background: #A89E94; }
.cex-comment-bar-handle:active::after,
#jm-pdf-bar-handle:active::after { background: #8E7E74; }

/* Прокручиваемая зона с полями комментариев */
.cex-comment-bar-content,
#jm-comment-area {
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow-y: auto;
  min-height: 0;
  scrollbar-width: thin;
  scrollbar-color: #CEC4B8 transparent;
}
.cex-comment-bar-content::-webkit-scrollbar,
#jm-comment-area::-webkit-scrollbar { width: 4px; }
.cex-comment-bar-content::-webkit-scrollbar-thumb,
#jm-comment-area::-webkit-scrollbar-thumb { background: #CEC4B8; border-radius: 2px; }
.cex-comment-bar-content::-webkit-scrollbar-track,
#jm-comment-area::-webkit-scrollbar-track { background: transparent; }

/* Ряд кнопок внутри универсального футера */
.cex-comment-bar-actions {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  margin-top: 8px;
}
.cex-comment-bar-actions .reg-btn-group {
  width: 100%;
  margin-top: 0;
  justify-content: flex-end;
}
/* Первая outline-кнопка («Назад» / «К сравнениям» и т.п.) — прижимается к левому краю;
   остальные кнопки группируются справа. Совпадает с поведением .cex-footer. */
.cex-comment-bar-actions .reg-btn-group > .cex-btn-out:first-child {
  margin-right: auto;
}

/* Универсальное поле комментария.
   По умолчанию редактируется (белый фон, текстовый курсор).
   При [readonly] или модификаторе --readonly — бежевый фон и обычный курсор,
   сигнализирующий пользователю, что поле не редактируется.
   !important нужен, чтобы перебить inline-стили, исторически
   проставленные на textarea'ах в index.html. */
.cex-comment-input[readonly],
.cex-comment-input--readonly {
  background: #FAF5EB !important;
  cursor: default !important;
}

/* «Обсуждение» — стандартная outline-кнопка в ряду действий футера сравнения.
   В развёрнутом виде — только подпись, без иконки пузырька; стиль и цвет
   совпадают с «к сравнениям» и остальными .cex-btn-out (прозрачный фон
   на бежевом фоне футера, та же рамка #CEC4B8).
   Сворачивается до иконки в последнюю очередь, позже «к сравнениям»
   (тот теряет подпись на ≤480px — здесь breakpoint 380px); в свёрнутом
   состоянии становится квадратной (--cex-btn-h), как соседние .cex-icon-btn. */
#compare-open-chat-btn .cex-chat-icon { display: none; }
@media (max-width: 380px) {
  #compare-open-chat-btn .cex-chat-label { display: none; }
  #compare-open-chat-btn .cex-chat-icon  { display: inline-block; }
  #compare-open-chat-btn {
    width: var(--cex-btn-h) !important;
    height: var(--cex-btn-h);
    min-height: 0 !important;
    padding: 0 !important;
    flex-shrink: 0;
    min-width: 0;
    aspect-ratio: auto;
  }
  /* Бейдж счётчика в свёрнутом виде «всплывает» в правый верхний угол,
     чтобы не нарушать квадратную форму кнопки. */
  #compare-open-chat-count {
    position: absolute;
    top: -4px;
    right: -4px;
    z-index: 1;
  }
}

/* По умолчанию поле комментария — высота в одну строку текста.
   При перетаскивании регулятора высоты — растёт само поле, а не пустая
   бежевая область вокруг. !important нужен, чтобы перебить inline-стили
   height: 36px, исторически проставленные на textarea'ах. */
.cex-comment-bar .cex-comment-input,
.cex-comment-bar-content .cex-comment-input {
  height: auto !important;
  overflow-y: auto !important;
}
.cex-comment-bar-content {
  flex: 1 1 auto;
}
/* Любая «строка ввода» внутри бара комментариев растёт по вертикали вместе с
   баром — будь то wrapper-div с textarea+кнопкой или сама textarea как
   прямой потомок. Универсальные селекторы: класс-маркер для wrapper'а и
   textarea с .cex-comment-input как direct child. */
.cex-comment-bar-content > .cex-comment-bar-row,
.cex-comment-bar-content > textarea.cex-comment-input {
  flex: 1 1 auto;
  min-height: 36px;
}

/* Двойной клик по полоске регулятора высоты — скрывает мелкий доп.текст:
   disclaimer'ы под полями карты и подпись «Комментарий психолога» в баре
   сравнений. !important нужен, чтобы перебить inline display, который
   проставляют auth.js / history.js при показе полей. */
.cex-comment-bar.cex-comment-bar--aux-hidden #user-note-disclaimer,
.cex-comment-bar.cex-comment-bar--aux-hidden #viewer-comment-disclaimer,
.cex-comment-bar.cex-comment-bar--aux-hidden #compare-comment-label {
  display: none !important;
}

/* ═══════════════════════════════════════════════════════════════
   КОНСУЛЬТАЦИЯ ПО СОЗДАННОЙ КАРТЕ — уведомление, модал, кружок
   ═══════════════════════════════════════════════════════════════ */

/* ── Уведомление ──────────────────────────────────────────────── */
.map-consult-notif {
  position: fixed;
  bottom: 90px;
  left: 50%;
  transform: translateX(-50%) scale(0.72) translateY(12px);
  transform-origin: center bottom;
  z-index: 99992;
  display: flex;
  align-items: center;
  gap: 14px;
  background: #F7F2EA;
  border: 1.5px solid rgba(142, 166, 140, 0.55);
  border-radius: 16px;
  padding: 14px 18px 14px 16px;
  box-shadow:
    0 2px 6px  rgba(40,35,30,0.06),
    0 8px 28px rgba(40,35,30,0.13),
    0 0 0 4px  rgba(142,166,140,0.08);
  font-family: 'Jost', sans-serif;
  cursor: pointer;
  max-width: min(360px, 92vw);
  width: max-content;
  touch-action: none;
  user-select: none;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity   0.30s ease,
    transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.map-consult-notif--visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) scale(1) translateY(0);
  animation: mcNotifPulse 3.2s ease 0.6s 2;
}

@keyframes mcNotifPulse {
  0%, 100% { box-shadow: 0 2px 6px rgba(40,35,30,0.06), 0 8px 28px rgba(40,35,30,0.13), 0 0 0 4px rgba(142,166,140,0.08); }
  50%       { box-shadow: 0 2px 6px rgba(40,35,30,0.06), 0 8px 28px rgba(40,35,30,0.13), 0 0 0 8px rgba(142,166,140,0.15); }
}

.map-consult-notif-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  background: rgba(142, 166, 140, 0.12);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.map-consult-notif-body {
  flex: 1;
  min-width: 0;
}

.map-consult-notif-title {
  font-size: 13px;
  font-weight: 500;
  color: #28231E;
  line-height: 1.3;
}

.map-consult-notif-sub {
  font-size: 11px;
  color: #9A8E84;
  margin-top: 2px;
}

.map-consult-notif-close {
  flex-shrink: 0;
  background: none;
  border: none;
  font-size: 17px;
  color: #B8AFA7;
  cursor: pointer;
  padding: 4px;
  line-height: 1;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: color 0.15s, background 0.15s;
}
.map-consult-notif-close:hover {
  color: #4A4440;
  background: rgba(206,196,184,0.22);
}

/* ── Модал ────────────────────────────────────────────────────── */
.map-consult-box {
  width: min(400px, 92vw) !important;
  padding: 0 !important;
  overflow: hidden;
}

.map-consult-hero {
  background: linear-gradient(160deg, #EAE4D8 0%, #DDD5C6 100%);
  padding: 32px 28px 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.map-consult-hero::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(206,196,184,0.6), transparent);
}

.map-consult-hero--sm {
  padding: 22px 28px 20px;
}

.map-consult-hero-ornament {
  font-family: 'Cormorant Garamond', serif;
  font-size: 36px;
  color: #8EA68C;
  line-height: 1;
  letter-spacing: -1px;
  text-shadow: 0 2px 8px rgba(142,166,140,0.3);
}

.map-consult-hero--sm .map-consult-hero-ornament {
  font-size: 20px;
}

.map-consult-content {
  padding: 24px 26px 26px;
  text-align: center;
}

.map-consult-heading {
  font-family: 'Cormorant Garamond', serif;
  font-size: 34px;
  font-weight: 400;
  color: #28231E;
  margin: 0 0 14px;
  line-height: 1.25;
  letter-spacing: 0.01em;
}

.map-consult-divider {
  width: 32px;
  height: 1.5px;
  background: linear-gradient(to right, rgba(142,166,140,0.3), #8EA68C, rgba(142,166,140,0.3));
  border-radius: 1px;
  margin: 0 auto 16px;
}

.map-consult-text {
  font-family: 'Jost', sans-serif;
  font-size: 13.5px;
  color: #5A5049;
  line-height: 1.65;
  margin: 0 0 6px;
}

.map-consult-question {
  font-family: 'Jost', sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: #28231E;
  margin: 0 0 22px;
}

.map-consult-actions {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.map-consult-btn-primary {
  padding: 12px !important;
  border-radius: 10px !important;
  font-size: 14px !important;
  width: 100%;
}

.map-consult-btn-secondary {
  padding: 11px !important;
  border-radius: 10px !important;
  font-size: 14px !important;
  width: 100%;
}


.map-consult-btn-back {
  background: none;
  border: none;
  font-family: 'Jost', sans-serif;
  font-size: 12px;
  color: #9A8E84;
  cursor: pointer;
  padding: 0;
  margin-bottom: 14px;
  display: block;
  transition: color 0.15s;
}
.map-consult-btn-back:hover { color: #28231E; }

/* ── Плавающий кружок ─────────────────────────────────────────── */
.map-consult-bubble {
  display: none;
  position: fixed;
  bottom: 90px;
  right: 20px;
  z-index: 99991;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #8EA68C;
  box-shadow: 0 4px 18px rgba(40,35,30,0.22);
  cursor: pointer;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  touch-action: none;
  user-select: none;
  transition: transform 0.2s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.2s;
}
.map-consult-bubble:hover {
  transform: scale(1.08);
  box-shadow: 0 6px 24px rgba(40,35,30,0.28);
}

/* ── stagger-анимации внутри модала ──────────────────────────── */
.modal-opening .map-consult-box .map-consult-hero    { animation: cexFadeUp 0.32s ease 0.04s both; }
.modal-opening .map-consult-box .map-consult-content { animation: cexFadeUp 0.36s ease 0.14s both; }

/* ── Мобайл ───────────────────────────────────────────────────── */
@media (max-width: 480px) {
  .map-consult-notif { bottom: 76px; }
  .map-consult-hero  { padding: 26px 20px 22px; }
  .map-consult-content { padding: 20px 20px 22px; }
  .map-consult-heading { font-size: 29px; }
}

/* ── Плашки настроек ─────────────────────────────────────────── */
.cex-settings-tile {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #F5EEE1;
  border: 1.5px solid #CEC4B8;
  border-radius: 12px;
  padding: 16px;
  text-align: left;
  cursor: pointer;
  width: 100%;
  transition: border-color 0.15s, background 0.15s;
}
.cex-settings-tile:hover, .cex-settings-tile:active {
  background: #EDE5D6;
  border-color: #9A8E84;
}
.cex-settings-tile-title {
  font-family: 'Jost', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #28231E;
  line-height: 1.3;
}
.cex-settings-tile-text {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.cex-settings-tile-sub {
  font-family: 'Jost', sans-serif;
  font-size: 12px;
  color: #9A8E84;
  margin-top: 2px;
}
.cex-settings-tile-arrow {
  flex-shrink: 0;
  color: #9A8E84;
}

/* ── Compare mode ──────────────────────────────────────────────────── */
.cex-cmp-cb {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 8px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid #8EA68C;
  background: #fff;
  box-sizing: border-box;
  pointer-events: none;
  z-index: 3;
  display: none;
  transition: background 0.15s, border-color 0.15s;
}
.cex-cmp-mode .cex-cmp-cb { display: block; }
.cex-cmp-mode .history-card-wrap { cursor: pointer; }
.cex-cmp-mode .history-card-wrap.cex-cmp-selected .cex-cmp-cb {
  background: #8EA68C;
  border-color: #8EA68C;
}
.cex-cmp-mode .history-card-wrap.cex-cmp-selected {
  border-color: #8EA68C !important;
  box-shadow: 0 0 0 2px rgba(142,166,140,0.30);
}
.cex-cmp-mode .history-card-wrap.cex-cmp-legacy {
  opacity: 0.45;
  cursor: not-allowed;
}
.cex-cmp-exec-btn:not(:disabled) {
  color: #8EA68C;
  border-color: #8EA68C;
}
#btn-history-compare,
#btn-stats-compare,
#btn-shared-compare,
#btn-history-cmp-exec,
#btn-stats-cmp-exec,
#btn-shared-cmp-exec {
  margin-right: 0;
}

/* ── Compare result screen ─────────────────────────────────────────── */
.cex-cmp-preview-row {
  display: flex;
  gap: 12px;
  margin-bottom: 4px;
}
.cex-cmp-preview-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  min-width: 0;
}
/* Превью-изображение карты прижимается к низу колонки. В flex-row у
   .cex-cmp-preview-row высота колонок выравнивается по самой высокой;
   margin-top:auto засасывает разницу — оба превью встают на одну
   горизонталь, даже если у одной карты раскрыт «подробнее», нет кода
   или нет описания. */
.cex-cmp-preview-col > .cex-cmp-preview-img {
  margin-top: auto;
}
.cex-cmp-preview-date {
  font-family: 'Jost', sans-serif;
  font-size: 14px;
  color: #9A8E84;
  text-align: center;
  line-height: 1.3;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4px;
}
.cex-cmp-preview-shifr {
  font-family: 'Roboto Flex', sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: #5A5049;
  letter-spacing: 0.08em;
  background: #EDE6DA;
  border-radius: 4px;
  padding: 1px 6px;
}
.cex-info-shifr {
  font-family: 'Roboto Flex', sans-serif;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: #5A5049;
  background: #EDE6DA;
  border-radius: 4px;
  padding: 0 6px;
}
.cex-cmp-preview-img {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 10px;
  overflow: hidden;
  background: #EDE6DA;
}
.cex-cmp-preview-img svg { display: block; width: 100%; height: 100%; }
.cex-cmp-overlay-row {
  display: flex;
  gap: 12px;
  margin-bottom: 20px;
}
.cex-cmp-overlay-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  min-width: 0;
}
.cex-cmp-overlay-label {
  font-family: 'Roboto Flex', sans-serif;
  font-size: 10px;
  font-weight: 600;
  color: #5A5049;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1.3;
}
.cex-cmp-section-title {
  font-family: 'Jost', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #28231E;
  margin: 4px 0 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid #EDE6DA;
}
.cex-cmp-phrase-tact {
  margin-bottom: 14px;
}
.cex-cmp-phrase-tact-header {
  font-family: 'Roboto Flex', sans-serif;
  font-size: 10px;
  font-weight: 600;
  color: #5A5049;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 5px;
}
.cex-cmp-phrase-zone {
  display: flex;
  gap: 6px;
  align-items: flex-start;
  padding: 4px 6px;
  border-radius: 6px;
  margin-bottom: 2px;
}
.cex-cmp-phrase-zone.cex-cmp-olive {
  background: rgba(176,181,60,0.16);
}
.cex-cmp-zone-label {
  font-family: 'Roboto Flex', sans-serif;
  font-size: 9px;
  font-weight: 600;
  color: #9A8E84;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: normal;
  word-break: normal;
  overflow-wrap: normal;
  width: 57px;
  flex-shrink: 0;
  padding-top: 3px;
  line-height: 1.2;
}
.cex-cmp-phrase-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  align-items: flex-end;
}
.cex-cmp-phrase-col > .cex-cmp-phrase-item { text-align: right; }
.cex-cmp-phrase-zone > .cex-cmp-phrase-divider ~ .cex-cmp-phrase-col { align-items: flex-start; }
.cex-cmp-phrase-zone > .cex-cmp-phrase-divider ~ .cex-cmp-phrase-col > .cex-cmp-phrase-item { text-align: left; }
.cex-cmp-phrase-item {
  font-family: 'Jost', sans-serif;
  font-size: 13px;
  line-height: 1.4;
  border-radius: 3px;
  padding: 1px 4px;
  word-break: break-word;
}
.cex-cmp-phrase-item.ph-st-1  { background: rgba(255,210,160,0.68); color: rgba(50,30,20,0.80); }
.cex-cmp-phrase-item.ph-st-1b { background: rgba(255,175,163,0.80); color: rgba(80,20,10,0.85); }
.cex-cmp-phrase-item.ph-st-2  { background: rgba(60,45,30,0.12);    color: rgba(50,30,20,0.55); }
.cex-cmp-phrase-item.ph-st-0b { background: rgba(140,170,210,0.53); color: rgba(20,30,60,0.75); }
.cex-cmp-phrase-item.ph-st-none { color: rgba(80,72,64,0.45); }
.cex-cmp-phrase-header {
  margin-bottom: 6px;
  padding-bottom: 4px;
  border-bottom: 1px solid #EDE6DA;
}
.cex-cmp-phrase-shifr {
  font-family: 'Roboto Flex', sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.10em;
  color: #5A5049;
  background: #EDE6DA;
  border-radius: 4px;
  padding: 2px 8px;
}
.cex-cmp-phrase-divider {
  display: none;
}

/* Статистика однозначных выборов (оранжевые + красные) в начале сравнения */
.cex-cmp-stats {
  margin-bottom: 16px;
}
.cex-cmp-stat-num {
  font-family: 'Roboto Flex', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #5A5049;
  line-height: 1.3;
}
.cex-cmp-stats-total {
  border-top: 1px solid #EDE6DA;
  margin-top: 2px;
  padding-top: 6px;
}
.cex-cmp-stats-total .cex-cmp-zone-label,
.cex-cmp-stats-total .cex-cmp-stat-num {
  color: #28231E;
}

/* Wide-screen compare layout: two side-by-side areas inside #compare-content.
   Left area keeps the two card rows (previews + overlay); right area is the
   «Выделенные фразы» table. */
@media (min-width: 900px) {
  /* Flex-раскладка: левый блок карт занимает долю --cex-cmp-left (0.2…0.8 от
     ширины родителя), движочек-разделитель посередине шириной 6px, фразы
     справа дотягиваются до края. Положение движка запоминается в
     localStorage, поэтому браузер открывает сравнение в выбранной раскладке. */
  #compare-content {
    display: flex;
    flex-direction: row;
    column-gap: 0;
    align-items: flex-start;
  }
  #compare-content > .cex-cmp-cards {
    flex: 0 0 calc((100% - 6px) * var(--cex-cmp-left, 0.5) - 12px);
    margin-right: 12px;
    position: sticky;
    top: 0;
    align-self: flex-start;
  }
  #compare-content > .cex-cmp-resizer {
    flex: 0 0 6px;
    align-self: stretch;
    cursor: col-resize;
    position: sticky;
    top: 0;
    height: 100vh;
    background: transparent;
    z-index: 1;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
  }
  #compare-content > .cex-cmp-resizer::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 1px;
    background: #CEC4B8;
    transform: translateX(-50%);
    transition: background 0.15s, width 0.15s;
  }
  #compare-content > .cex-cmp-resizer:hover::before,
  #compare-content > .cex-cmp-resizer.cex-cmp-resizing::before {
    background: #8EA68C;
    width: 2px;
  }
  #compare-content > .cex-cmp-phrases {
    flex: 1 1 0;
    min-width: 0;
    margin-left: 12px;
  }
}
@media (max-width: 899px) {
  /* На узких экранах движок-разделитель не нужен — вёрстка возвращается к
     вертикальной (cards над phrases). Скрываем его, чтобы не оставлял пустой
     полоски между блоками. */
  #compare-content > .cex-cmp-resizer { display: none; }
}