/* Тур по продукту: spotlight-тултипы. Токены — из app.css. */

.tour-veil{position:fixed;inset:0;z-index:150;background:transparent}
.tour-dim{
  position:fixed;z-index:149;pointer-events:none;border-radius:16px;
  box-shadow:0 0 0 2000px rgba(58,48,64,.6), 0 0 0 3px var(--violet-dp), 0 0 24px 2px rgba(182,165,232,.5);
  transition:top .3s cubic-bezier(.2,.8,.2,1), left .3s cubic-bezier(.2,.8,.2,1),
    width .3s cubic-bezier(.2,.8,.2,1), height .3s cubic-bezier(.2,.8,.2,1);
}
.tour-card{
  position:fixed;z-index:151;background:var(--paper);border:1.5px solid var(--line);
  border-radius:var(--r-lg);box-shadow:var(--shadow-lift);padding:16px 17px 14px;
  animation:tourin .22s cubic-bezier(.2,1.1,.4,1);
}
@keyframes tourin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.tour-counter{display:block;font-family:var(--mono);font-size:10.5px;color:var(--violet-dp);
  text-transform:uppercase;letter-spacing:.08em;margin-bottom:6px}
.tour-title{display:block;font-size:16px;font-weight:700;margin-bottom:5px}
.tour-text{font-size:14px;line-height:1.5;color:var(--ink-soft);margin-bottom:12px}
.tour-foot{display:flex;align-items:center;justify-content:space-between;gap:10px}
.tour-skip{font-size:12.5px;color:var(--ink-faint);padding:8px 4px}
.tour-skip:hover{color:var(--ink-soft)}
.tour-next{min-height:38px;padding:8px 18px;font-size:14px}

@media(max-width:420px){
  .tour-card{padding:14px 15px 12px}
}
@media(prefers-reduced-motion: reduce){
  .tour-dim{transition:none}
  .tour-card{animation:none}
}