/*!
 * CDO Global — обзорный тур поверх боевых конструкторов (ОП/РПД/ФОС).
 * Самодостаточный оверлей. НЕ трогает разметку/логику конструктора.
 * Все классы с префиксом cdot- во избежание конфликтов. ES5-совместимо.
 */
.cdot-backdrop {
  position: fixed; inset: 0; z-index: 9998;
  background: rgba(8, 9, 12, .62);
  -webkit-backdrop-filter: blur(1px); backdrop-filter: blur(1px);
}
.cdot-backdrop[hidden] { display: none; }

/* Подсветка вырезом: рамка вокруг реального элемента */
.cdot-hl {
  position: absolute; z-index: 9999; pointer-events: none;
  border: 2px solid var(--primary, #7EE015);
  border-radius: 12px;
  box-shadow: 0 0 0 4px rgba(126, 224, 21, .18),
              0 0 0 9999px rgba(8, 9, 12, .62);
  transition: top .25s ease, left .25s ease, width .25s ease, height .25s ease;
}
.cdot-hl[hidden] { display: none; }

/* Карточка тура */
.cdot-card {
  position: fixed; z-index: 10000; width: 360px; max-width: calc(100vw - 32px);
  background: var(--surface, #1B1C22); color: var(--text, #E7EAEE);
  border: 1px solid var(--border, #2E3038); border-radius: 14px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .5);
  padding: 18px 18px 14px; font-family: Manrope, system-ui, sans-serif;
  transition: top .25s ease, left .25s ease;
}
.cdot-card[hidden] { display: none; }
.cdot-badge {
  display: inline-block; font: 700 11px/1 Manrope, sans-serif;
  color: var(--primary-ink, #14210A); background: var(--primary, #7EE015);
  padding: 4px 9px; border-radius: 999px; margin-bottom: 10px; letter-spacing: .02em;
}
.cdot-title { font: 800 17px/1.25 Manrope, sans-serif; margin: 0 0 6px; color: var(--text, #E7EAEE); }
.cdot-text  { font: 500 13.5px/1.5 Manrope, sans-serif; margin: 0 0 12px; color: var(--muted, #9A9EA8); }
.cdot-progress { display: flex; gap: 5px; margin: 0 0 14px; }
.cdot-progress span { flex: 1; height: 4px; border-radius: 2px; background: var(--border, #2E3038); }
.cdot-progress span.on  { background: rgba(126, 224, 21, .45); }
.cdot-progress span.cur { background: var(--primary, #7EE015); box-shadow: 0 0 8px var(--primary, #7EE015); }

.cdot-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cdot-left { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.cdot-skip { background: transparent; border: none; color: var(--muted, #9A9EA8); font: 600 13px Manrope, sans-serif; cursor: pointer; padding: 4px 2px; text-align: left; }
.cdot-skip:hover { color: var(--text, #E7EAEE); }
.cdot-hint { font: 600 11.5px Manrope, sans-serif; color: var(--faint, #6B6F79); }
.cdot-nav { display: flex; gap: 8px; }
.cdot-back, .cdot-next {
  border-radius: 10px; padding: 9px 15px; font: 700 13px Manrope, sans-serif;
  cursor: pointer; border: 1px solid var(--border, #2E3038); transition: all .15s;
}
.cdot-back { background: transparent; color: var(--muted, #9A9EA8); }
.cdot-back:hover { color: var(--text, #E7EAEE); border-color: var(--muted, #9A9EA8); }
.cdot-next { background: var(--primary, #7EE015); color: var(--primary-ink, #14210A); border-color: var(--primary, #7EE015); }
.cdot-next:hover { background: var(--primary-hover, #8FF02A); border-color: var(--primary-hover, #8FF02A); }

.cdot-close {
  position: absolute; top: 10px; right: 12px; width: 26px; height: 26px;
  border: none; background: transparent; color: var(--faint, #6B6F79);
  font: 400 20px/1 Manrope, sans-serif; cursor: pointer; border-radius: 6px;
}
.cdot-close:hover { color: var(--text, #E7EAEE); background: var(--surface-alt, #202127); }

/* Кнопка запуска тура в топбаре («Обзор») */
.cdot-launch {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--surface-alt, #202127); color: var(--text, #E7EAEE);
  border: 1px solid var(--primary, #7EE015); border-radius: 10px;
  padding: 7px 13px; font: 700 12.5px/1 Manrope, sans-serif;
  cursor: pointer; text-decoration: none; white-space: nowrap; transition: all .15s;
}
.cdot-launch .cdot-ico { color: var(--primary, #7EE015); font-size: 12px; }
.cdot-launch:hover { background: rgba(126, 224, 21, .12); }
.cdot-launch.cdot-pulse { animation: cdotPulse 2s ease-in-out 3; }
@keyframes cdotPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(126, 224, 21, .0); }
  50% { box-shadow: 0 0 0 5px rgba(126, 224, 21, .22); }
}

body.cdot-open { overflow: hidden; }

@media (max-width: 560px) {
  .cdot-card { width: calc(100vw - 24px); left: 12px !important; right: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .cdot-hl, .cdot-card { transition: none; }
  .cdot-launch.cdot-pulse { animation: none; }
}