/* MemAI · обучающий тур (DC-031…045), только ПК. Оформление 2 (выбрано): без карточки, тонкая красная линия слева;
   на выборе варианта Pro — затемнение фото B. Перенесено из макета (fix.css 515–584, 654–680, 703–704) в том же порядке;
   классы mk-tour-* → tour-*, mk-demo-* → demo-*, .mk-zones → .pro-zones. */
/* ===== DC-031: обучающий тур · шаг «Кадрирование» (ПК, MemAI Pro). Карточка справа от кадра, ничего не блокирует ===== */
.tour-card,.tour-reopen,.tour-ring,.tour-cur{display:none}
@media (min-width:621px){
  .tour-card{display:grid;position:absolute;z-index:40;gap:9px;background:#18181f;border:1px solid rgba(255,255,255,.14);border-radius:14px;padding:18px 48px 14px 20px;box-shadow:0 18px 44px rgba(0,0,0,.6);color:rgba(255,255,255,.6);font-size:13.5px;line-height:1.5;cursor:default;max-height:calc(100% - 32px);overflow-y:auto;overflow-x:hidden}
  .tour-card[hidden],.tour-reopen[hidden]{display:none}
  .tour-k{font-size:12px;color:#e8536a;font-weight:500}
  .tour-card h3{margin:0;font-size:18px;font-weight:600;color:#fff;line-height:1.3}
  .tour-card p{margin:0}
  .tour-card .tour-warn{color:#e8536a}
  .tour-card .tour-key b{color:#fff;font-weight:var(--weight-bold)}   /* владелец 17.10: главное правило — качественный исходник */
  .tour-skip{justify-self:start;font:inherit;font-size:13px;color:rgba(255,255,255,.38);background:none;border:0;padding:4px 0 0;cursor:pointer}
  .tour-skip:hover{color:rgba(255,255,255,.7)}
  .tour-eye{position:absolute;top:12px;right:12px;width:30px;height:30px;border-radius:50%;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.04);color:rgba(255,255,255,.6);display:grid;place-items:center;padding:0;cursor:pointer}
  .tour-eye:hover{color:#fff;border-color:rgba(255,255,255,.3)}
  .tour-eye svg,.tour-reopen svg{width:16px;height:16px}
  .tour-reopen{display:flex;position:absolute;z-index:40;align-items:center;gap:7px;font:inherit;font-size:13px;color:rgba(255,255,255,.6);background:#18181f;border:1px solid rgba(255,255,255,.14);border-radius:50px;padding:6px 13px 6px 9px;cursor:pointer}
  .tour-eye:focus-visible,.tour-reopen:focus-visible,.tour-skip:focus-visible{outline:2px solid #e8536a;outline-offset:2px}
  .tour-ring{display:none;position:absolute;z-index:39;border-radius:10px;pointer-events:none;box-shadow:inset 0 0 0 2px rgba(255,255,255,.55);transition:all .35s ease}
  .tour-cur{position:absolute;z-index:41;width:30px;height:30px;pointer-events:none;transform:translate(-30%,-20%);filter:drop-shadow(0 2px 4px rgba(0,0,0,.8))}
}


/* ===== DC-032: обучающий тур · «Реставрация · выбор» (ПК, MemAI Pro). Показ — на левом варианте, карточка с текстом — поверх фото правого ===== */
@media (min-width:621px){
  .tour-host{position:relative}
  .tour-card.tour-rest{background:rgba(24,24,31,.97)}
  .tour-acts{list-style:none;margin:0;padding:0;display:grid;gap:6px}
  .tour-acts li{display:grid;grid-template-columns:30px 1fr;gap:10px;align-items:start;padding:7px 8px;border-radius:10px;border:1px solid transparent;transition:background .25s,border-color .25s}
  .tour-acts li.on{background:rgba(196,30,58,.12);border-color:rgba(232,83,106,.35)}
  .tour-ic{width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.06);display:grid;place-items:center}
  .tour-ic img,.tour-ic svg{width:18px;height:18px}
  .tour-acts li.on .tour-ic{background:rgba(232,83,106,.25)}
  .tour-cur img{width:100%;height:100%}
}


/* ===== DC-031/032 · оформление подсказки — вариант 2 (выбран): без карточки, тонкая красная линия слева; на 045 — затемнение фото B ===== */
@media (min-width:621px){
  .tour-card{background:none;border:0;border-left:2px solid #c41e3a;border-radius:0;box-shadow:none;padding:6px 44px 6px 20px}
  .tour-card.tour-rest{border-left:0;border-radius:4px;align-content:center;padding:24px 52px 24px 44px;
    background:linear-gradient(#c41e3a,#c41e3a) 26px 50% / 2px calc(100% - 72px) no-repeat, rgba(8,8,12,.86);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
  .tour-eye{top:4px;right:4px}
  .tour-rest .tour-eye{top:12px;right:12px}
}

@media (min-width:621px){
  .pro-zones .variant-card.demo-sel{border-color:rgba(196,30,58,.7)}
  .pro-zones .variant-card.demo-sel .variant-footer{background:rgba(196,30,58,.1);border-top-color:rgba(196,30,58,.25)}
  .pro-zones .variant-card.demo-sel .variant-name{color:#e8536a}
  #btnNextRetouch.demo-next,#btnNextBackground.demo-next,#btnFinish.demo-next{background:linear-gradient(180deg,#d8243f,#b0182f);color:#fff;opacity:1}
}
@media (min-width:621px){
  .tour-tap{position:absolute;z-index:41;width:0;height:0;pointer-events:none}
  .tour-tap i{position:absolute;left:-6px;top:-6px;width:12px;height:12px;border-radius:50%;border:2px solid rgba(255,255,255,.9);opacity:0;animation:tourTap .6s ease-out forwards}
  .tour-tap i+i{animation-delay:.12s}
  @keyframes tourTap{0%{transform:scale(.4);opacity:.95}100%{transform:scale(3.4);opacity:0}}
}

/* ===== DC-034: обучающий тур · ретушь — строки про правую панель (таймер, уведомления) + обводка на рельсе ===== */
.tour-sring{display:none}
@media (min-width:621px){
  .tour-sub{font-size:12px;color:rgba(255,255,255,.4);margin-top:4px}
  .tour-sring{position:fixed;z-index:171;border-radius:10px;pointer-events:none;box-shadow:inset 0 0 0 2px rgba(255,255,255,.55)}
}
@media (min-width:621px){
  .tour-card.tour-rest{align-content:safe center}
  .tour-card.tour-dense{gap:6px;font-size:13px;line-height:1.42;padding-top:18px;padding-bottom:16px}
  .tour-card.tour-dense h3{font-size:17px}
  .tour-card.tour-dense .tour-acts{gap:2px}
  .tour-card.tour-dense .tour-acts li{padding:5px 8px}
  .tour-card.tour-dense .tour-ic{width:26px;height:26px}
  .tour-card.tour-dense .tour-acts li{grid-template-columns:26px 1fr}
}
@media (min-width:621px){ .tour-card.tour-opt h3{font-size:17px} .tour-card.tour-opt{padding-right:44px} .tour-reopen.tour-opt{position:absolute} }

/* ===== DC-031 (дополнение): подсказка кадрирования ужимается по месту — 5 ступеней плотности, без прокрутки ===== */
@media (min-width:621px){
  .tour-card:not(.tour-rest):not(.tour-opt):not(.tour-fin){padding-right:8px}
  .tour-card:not(.tour-rest):not(.tour-opt):not(.tour-fin) h3{padding-right:34px}
  .tour-card[data-d="1"]{font-size:13px;gap:8px}
  .tour-card[data-d="2"]{font-size:12.5px;gap:7px;line-height:1.45}
  .tour-card[data-d="2"] h3{font-size:17px}
  .tour-card[data-d="3"]{font-size:12px;gap:6px;line-height:1.42}
  .tour-card[data-d="3"] h3{font-size:16px}
  .tour-card[data-d="4"]{font-size:11.5px;gap:5px;line-height:1.38}
  .tour-card[data-d="4"] h3{font-size:15px}
}

@media (min-width:621px){
  .tour-card[data-d="2"] .tour-acts li{padding-top:4px;padding-bottom:4px}
  .tour-card[data-d="3"] .tour-acts li,.tour-card[data-d="4"] .tour-acts li{padding-top:2px;padding-bottom:2px;grid-template-columns:24px 1fr;gap:8px}
  .tour-card.tour-fin[data-d="3"] .tour-acts li,.tour-card.tour-fin[data-d="4"] .tour-acts li{grid-template-columns:1fr}
  .tour-card[data-d="3"] .tour-ic,.tour-card[data-d="4"] .tour-ic{width:24px;height:24px}
  .tour-card[data-d="3"] .tour-acts,.tour-card[data-d="4"] .tour-acts{gap:1px}
  .tour-card.tour-rest[data-d="3"],.tour-card.tour-rest[data-d="4"]{padding-top:14px;padding-bottom:12px}
}
@media (min-width:621px){
  .tour-card.tour-rest[data-d="5"]{font-size:11.5px;gap:3px;line-height:1.3;padding-top:8px;padding-bottom:6px;background-size:2px calc(100% - 24px),auto}
  .tour-card.tour-rest[data-d="5"] h3{font-size:14px}
  .tour-card.tour-rest[data-d="5"] .tour-acts{gap:0}
  .tour-card.tour-rest[data-d="5"] .tour-acts li{padding:1px 8px;grid-template-columns:22px 1fr;gap:8px}
  .tour-card.tour-rest[data-d="5"] .tour-ic{width:22px;height:22px}
}

/* DC-045: guest crop (017) — the old callouts «Тяни для масштаба / вращения» are replaced by the tour hint */
@media (min-width:621px){ #hintScale, #hintRotate{display:none !important} }

/* ===== DC-040: обучающий тур · финал на «Результате»: подсказка под «Оценить результат», кнопки «Больше не показывать» / «Ок» ===== */
@media (min-width:621px){
  .tour-card.tour-fin{gap:4px;font-size:12.5px;line-height:1.42;padding:2px 4px 2px 14px;overflow-y:auto}
  .tour-card.tour-fin h3{font-size:16px}
  .tour-card.tour-fin .tour-acts{gap:2px} .tour-card.tour-fin .tour-acts li{grid-template-columns:1fr;padding:4px 8px}
  .tour-btns{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:4px}
  .tour-btns button{font:inherit;font-size:12.5px;border-radius:50px;padding:6px 12px;cursor:pointer;white-space:nowrap}
  .tour-off{color:#fff;background:#c41e3a;border:1px solid #c41e3a}
  .tour-ok{color:rgba(255,255,255,.7);background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.16);min-width:52px}
  .tour-btns button:focus-visible{outline:2px solid #e8536a;outline-offset:2px}
  .tour-again{margin:0 0 16px}
}

@media (min-width:621px){
  .tour-wave i{left:-17px;top:-17px;width:34px;height:34px;border-width:2px;animation:tourTap .85s ease-out forwards}
  .tour-wave i+i{animation-delay:.18s}
}

/* DC-042: на невысоких мониторах подсказка финала тоже плотнее */
@media (min-width:621px) and (max-height:860px){
  #screen-result .tour-card.tour-fin .tour-acts li{padding:3px 8px}
}
@media (min-width:621px) and (max-height:780px){
  #screen-result .tour-card.tour-fin{font-size:12px;gap:2px}
  #screen-result .tour-card.tour-fin h3{font-size:15px}
  #screen-result .tour-card.tour-fin .tour-acts li{padding:2px 8px}
}
@media (min-width:621px) and (max-height:700px){
  #screen-result .tour-card.tour-fin{line-height:1.35}
  #screen-result .tour-card.tour-fin .tour-acts li{padding:1px 8px}
}

/* ===== DC-044: обучающий тур MemAI FX — выбор из 4 вариантов (053): подсказка в пустой части большого окна слева от фото ===== */
@media (min-width:621px){
  .tour-card.tour-fx{z-index:6;cursor:default}
  .tour-card.tour-fx.tour-fx-veil{border-left:0;border-radius:13px 0 0 13px;align-content:safe center;padding:20px 44px 18px 40px;
    background:linear-gradient(#c41e3a,#c41e3a) 22px 50% / 2px calc(100% - 64px) no-repeat, rgba(8,8,12,.86);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
  /* FX 052/053: hint pressed to the variants, red line on its right edge (next to the variants), text on the left */
  .tour-card.tour-fx.tour-fx-veil.tour-fx-veil{padding:20px 46px 18px 30px;border-radius:0 13px 13px 0;
    background:linear-gradient(#c41e3a,#c41e3a) right 22px top 50% / 2px calc(100% - 112px) no-repeat, rgba(8,8,12,.86)}
  .tour-card.tour-fx.tour-fx-veil.tour-fx-veil h3{padding-right:12px}
  .tour-card.tour-fx.tour-fx-veil.tour-fx-veil[data-d="4"],.tour-card.tour-fx.tour-fx-veil.tour-fx-veil[data-d="5"]{padding-top:12px;padding-bottom:10px}
  .tour-card.tour-fx[data-d="5"]{font-size:11px;gap:3px;line-height:1.3}
  .tour-card.tour-fx[data-d="5"] h3{font-size:14px}
  .tour-card.tour-fx[data-d="5"] .tour-acts{gap:0}
  .tour-card.tour-fx[data-d="5"] .tour-acts li{padding:1px 8px;grid-template-columns:22px 1fr;gap:8px}
  .tour-card.tour-fx[data-d="5"] .tour-ic{width:22px;height:22px}
  .tour-reopen.tour-fxr{z-index:6}
  .tour-curfx{position:fixed;z-index:172}
  .tour-tapfx{position:fixed;z-index:173}
}
@media (min-width:621px){ .fx-big.tour-on .fx-big-tag{left:calc(var(--tour-w, 0px) + 14px)} }
/* DC-049 · шаги выбора (Pro: реставрация, ретушь; FX: выбор): подпись у глаза «Скройте подсказку, чтобы выбрать вариант …»; глаз моргает, пока подсказка открыта */
@media (min-width:621px){
  .tour-eyehint{position:absolute;top:var(--et,12px);right:var(--er,50px);min-height:30px;max-width:calc(100% - 100px);display:flex;align-items:center;justify-content:flex-end;text-align:right;font-size:var(--text-body);font-weight:var(--weight-bold);line-height:1.25;color:#fff;pointer-events:none;animation:tourEyeHint 3.2s ease-in-out infinite}
  /* решение владельца 16.10: подпись заметнее — 14 px, полужирная, белая; красная стрелка к глазу; вспышка в такт морганию глаза */
  .tour-eyehint::after{content:'→';flex:none;margin-left:8px;color:#e8536a;font-weight:700;animation:tourEyeArrow 3.2s ease-in-out infinite}
  @keyframes tourEyeHint{0%,80%,100%{text-shadow:none}88%{text-shadow:0 0 12px rgba(232,83,106,.9)}}
  @keyframes tourEyeArrow{0%,80%,100%{transform:none}88%{transform:translateX(5px)}}
  .tour-fx .tour-eyehint{--et:4px;--er:42px}
  .tour-card.tour-rest:has(.tour-eyehint){padding-top:52px !important}
  .tour-card.tour-fx:has(.tour-eyehint){padding-top:44px !important}
  .tour-card .tour-eye.tour-blink{border-color:rgba(232,83,106,.5);color:#fff}
  .tour-eye.tour-blink svg{transform-origin:50% 50%;animation:tourBlink 3.2s ease-in-out infinite}
  @keyframes tourBlink{0%,86%,100%{transform:scaleY(1)}90%{transform:scaleY(.1)}94%{transform:scaleY(1)}96%{transform:scaleY(.1)}98%{transform:scaleY(1)}}
  .tour-eye.tour-blink::after{content:'';position:absolute;inset:-4px;border-radius:50%;border:1px solid rgba(232,83,106,.55);animation:tourEyeRing 3.2s ease-out infinite;pointer-events:none}
  @keyframes tourEyeRing{0%,80%{opacity:0;transform:scale(.8)}88%{opacity:1}100%{opacity:0;transform:scale(1.35)}}
  .tour-card.tour-rest[data-d="4"]:has(.tour-eyehint),.tour-card.tour-rest[data-d="5"]:has(.tour-eyehint){padding-top:44px !important}
  .tour-card.tour-fx[data-d="5"]:has(.tour-eyehint){padding-top:40px !important}
  .tour-fx[data-d="5"] .tour-eyehint{--et:4px}
}
@media (prefers-reduced-motion: reduce){ .tour-eye.tour-blink svg, .tour-eye.tour-blink::after, .tour-eyehint, .tour-eyehint::after{animation:none} }
/* Pro · реставрация: шторка «До / После» в показе клика (решение владельца 16.10) — «нажатие» курсора подсказки ведёт линию по кадру фото A
   и открывает исходник, второе «нажатие» — обратно к варианту; только анимация подсказки, настоящий клик по фото — как был */
.tour-wipe,.tour-ba{display:none}
@media (min-width:621px){
  .tour-wipe{position:absolute;z-index:2;width:2px;margin-left:-1px;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.3),0 0 12px rgba(0,0,0,.6);pointer-events:none}
  .tour-ba{position:absolute;z-index:3;font-size:var(--text-body);font-weight:var(--weight-bold);line-height:1.2;color:#fff;background:rgba(0,0,0,.6);border-radius:6px;padding:4px 11px;pointer-events:none;white-space:nowrap}
}