/* ── Tour overlay presentation ─────────────────────────────── */
#tour-backdrop {
  position: fixed; inset: 0; z-index: 10500;
  background: transparent; pointer-events: all;
  display: none; cursor: default;
}
#tour-spotlight {
  position: fixed; z-index: 10501; pointer-events: none;
  border-radius: 10px;
  box-shadow: 0 0 0 9999px rgba(0,0,0,.72);
  outline: 2px solid var(--accent, #ff9500);
  outline-offset: 2px;
  transition: left .38s cubic-bezier(.4,0,.2,1),
              top .38s cubic-bezier(.4,0,.2,1),
              width .38s cubic-bezier(.4,0,.2,1),
              height .38s cubic-bezier(.4,0,.2,1),
              box-shadow .38s cubic-bezier(.4,0,.2,1);
  display: none;
}
#tour-spotlight::after {
  content:'';
  position:absolute;inset:-6px;
  border-radius:14px;
  border:1.5px solid rgba(255,149,0,.3);
  pointer-events:none;
  animation: tour-pulse 2s ease-in-out infinite;
}
@keyframes tour-pulse {
  0%,100%{opacity:.3;transform:scale(1);}
  50%{opacity:.7;transform:scale(1.012);}
}
#tour-card {
  position: fixed; z-index: 10502;
  width: 288px; max-width: calc(100vw - 32px);
  background: #1c1c1e;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 16px;
  padding: 18px 18px 14px;
  box-shadow: 0 24px 72px rgba(0,0,0,.78), 0 0 0 1px rgba(255,255,255,.07);
  opacity: 0; pointer-events: none;
  transition: left .38s cubic-bezier(.4,0,.2,1),
              top .38s cubic-bezier(.4,0,.2,1),
              opacity .22s ease;
  display: none;
}
#tour-card.tc-visible { opacity: 1; pointer-events: all; }
.tc-header { display:flex; align-items:center; gap:11px; margin-bottom:11px; }
.tc-icon-box {
  width:38px;height:38px;border-radius:9px;
  background:var(--accent,#ff9500);flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-size:19px;line-height:1;
}
.tc-meta { display:flex; flex-direction:column; gap:1px; min-width:0; }
.tc-step-lbl { font-size:9px;color:rgba(255,255,255,.35);letter-spacing:1px;text-transform:uppercase; }
.tc-title { font-size:13px;font-weight:700;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.tc-desc { font-size:11.5px;line-height:1.65;color:rgba(255,255,255,.68);margin:0 0 14px; }
.tc-dots { display:flex;gap:5px;justify-content:center;margin-bottom:13px; }
.tc-dot {
  width:6px;height:6px;border-radius:50%;
  background:rgba(255,255,255,.2);
  transition:background .2s,width .2s;flex-shrink:0;
}
.tc-dot.active { background:var(--accent,#ff9500);width:16px;border-radius:3px; }
.tc-actions { display:flex;align-items:center;justify-content:space-between; }
.tc-skip {
  font-size:11px;color:rgba(255,255,255,.35);background:none;border:none;
  cursor:pointer;padding:4px 0;transition:color .15s;flex-shrink:0;
}
.tc-skip:hover { color:rgba(255,255,255,.65); }
.tc-nav { display:flex;gap:6px; }
.tc-btn {
  font-size:12px;font-weight:600;padding:7px 14px;border-radius:8px;
  border:1.5px solid rgba(255,255,255,.12);cursor:pointer;
  background:rgba(255,255,255,.07);color:rgba(255,255,255,.8);
  transition:background .15s,border-color .15s,color .15s;
}
.tc-btn:hover { background:rgba(255,255,255,.13);color:#fff; }
.tc-btn.primary {
  background:var(--accent,#ff9500);border-color:transparent;color:#fff;
}
.tc-btn.primary:hover { filter:brightness(1.1); }
.tc-progress-bar {
  height:2px;background:rgba(255,255,255,.08);border-radius:1px;
  margin-bottom:13px;overflow:hidden;
}
.tc-progress-fill {
  height:100%;background:var(--accent,#ff9500);border-radius:1px;
  transition:width .38s cubic-bezier(.4,0,.2,1);
}