/* ============================================================
   Qualims — перво-заходные хинты (coach marks)
   Ненавязчивый тост внизу + мягкое кольцо на элементе.
   Мини-тур 2–3 шага, показывается ОДИН раз на страницу (localStorage).
   Движение — на transition только transform (opacity мгновенно),
   поэтому в замороженном превью тост виден, а не «застрял скрытым».
   ============================================================ */

.qc-root { position: fixed; inset: 0; z-index: 8000; pointer-events: none; font-family: var(--font-sans); }

/* мягкое кольцо на цели (без затемнения — ненавязчиво) */
.qc-ring {
  position: fixed; top: 0; left: 0; width: 0; height: 0; z-index: 8010;
  border-radius: 12px;
  border: 2px solid var(--accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 14%, transparent),
              0 12px 32px -10px color-mix(in srgb, var(--accent) 42%, transparent);
  opacity: 0; pointer-events: none;
  transition: top .45s cubic-bezier(.34,1.1,.4,1), left .45s cubic-bezier(.34,1.1,.4,1),
              width .45s cubic-bezier(.34,1.1,.4,1), height .45s cubic-bezier(.34,1.1,.4,1);
}
.qc-root.on .qc-ring.show { opacity: 1; }
.qc-ring::after {
  content: ""; position: absolute; inset: -2px; border-radius: 12px;
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 45%, transparent);
  animation: qcPulse 1.9s ease-out infinite;
}
@keyframes qcPulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 40%, transparent); } 70%,100% { box-shadow: 0 0 0 12px transparent; } }

/* тост внизу по центру */
.qc-toast {
  position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%) translateY(24px);
  z-index: 8030; width: 480px; max-width: calc(100vw - 28px);
  display: flex; align-items: center; gap: 14px;
  background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: var(--r-lg); box-shadow: var(--shadow-pop);
  padding: 14px 16px; pointer-events: auto;
  opacity: 0; transition: transform .4s cubic-bezier(.2,.7,.2,1);
}
.qc-root.on .qc-toast.show { opacity: 1; transform: translateX(-50%); }
.qc-badge {
  width: 40px; height: 40px; flex: 0 0 auto; border-radius: 11px;
  display: grid; place-items: center; font-size: 1.25rem;
  background: var(--accent-soft); color: var(--accent-strong);
}
.qc-mid { flex: 1; min-width: 0; }
.qc-step { font-size: var(--text-2xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.qc-title { font-size: 1.02rem; font-weight: 700; letter-spacing: -.01em; color: var(--ink); margin: 1px 0 2px; }
.qc-text { font-size: var(--text-sm); line-height: 1.45; color: var(--ink-2); }
.qc-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 7px; flex: 0 0 auto; }
.qc-dots { display: flex; gap: 5px; }
.qc-dots i { width: 6px; height: 6px; border-radius: 99px; background: var(--line-strong); }
.qc-dots i.on { background: var(--accent); }
.qc-btns { display: flex; align-items: center; gap: 6px; }
.qc-skip {
  font: inherit; font-size: var(--text-xs); font-weight: 600; color: var(--ink-3);
  background: none; border: none; border-radius: var(--r-sm); padding: 7px 10px; cursor: pointer;
  transition: color .15s;
}
.qc-skip:hover { color: var(--ink-2); }
.qc-next {
  font: inherit; font-size: var(--text-sm); font-weight: 600; white-space: nowrap;
  color: var(--on-accent); background: var(--accent); border: none;
  border-radius: var(--r-sm); padding: 8px 15px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  transition: background .15s, transform .15s;
}
.qc-next:hover { background: var(--accent-strong); transform: translateY(-1px); }

/* маленькая help-кнопка «Пройти тур заново» (заглушка пункта профиля) */
.qc-help {
  position: fixed; left: 18px; bottom: 66px; z-index: 8040; pointer-events: auto;
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-sans); font-size: var(--text-xs); font-weight: 600; color: var(--ink-2);
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-full);
  padding: 7px 13px; cursor: pointer; box-shadow: var(--shadow-sm);
  transition: color .15s, border-color .15s, transform .15s;
}
.qc-help:hover { color: var(--ink); border-color: var(--accent); transform: translateY(-1px); }
.qc-help i { color: var(--accent); font-size: .95rem; }

.qc-pop {
  position: fixed; left: 18px; bottom: 106px; z-index: 8041;
  width: 250px; background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: var(--r-md); box-shadow: var(--shadow-pop); padding: 6px;
  opacity: 0; transform: translateY(6px); pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}
.qc-pop.open { opacity: 1; transform: none; pointer-events: auto; }
.qc-pop .qc-pop-item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  font: inherit; font-size: var(--text-sm); font-weight: 500; color: var(--ink); text-align: left;
  background: none; border: none; border-radius: var(--r-sm); padding: 9px 10px; cursor: pointer;
  transition: background .12s;
}
.qc-pop .qc-pop-item:hover { background: var(--surface-2); }
.qc-pop .qc-pop-item i { color: var(--accent); font-size: 1rem; }
.qc-pop .qc-pop-note { font-size: var(--text-2xs); color: var(--ink-3); padding: 6px 10px 4px; line-height: 1.4; }

@media (prefers-reduced-motion: reduce) { .qc-ring::after { animation: none; } }
@media (max-width: 640px) {
  .qc-toast { flex-wrap: wrap; }
  .qc-actions { flex-direction: row; width: 100%; justify-content: space-between; }
}