/* First-visit help tour (js/tour.js) */
.mb-tour { position: fixed; inset: 0; z-index: 100000; }
/* The spotlight: a transparent box whose huge shadow dims the rest of the page. */
.mb-tour-spot {
  position: fixed; border-radius: 14px; pointer-events: none;
  box-shadow: 0 0 0 9999px rgba(20, 18, 40, .72), 0 0 0 3px #fff, 0 0 18px 4px rgba(255, 255, 255, .5);
  transition: left .25s, top .25s, width .25s, height .25s;
}
html[data-reduce-motion] .mb-tour-spot { transition: none; }
/* Blocks clicks on the page behind the tour. */
.mb-tour::before { content: ''; position: fixed; inset: 0; }
.mb-tour-card {
  position: fixed; width: min(320px, calc(100vw - 24px)); box-sizing: border-box;
  background: var(--surface, #fff); color: var(--btn-text, #2c2c2a);
  border-radius: 16px; padding: 18px 18px 14px; box-shadow: 0 12px 40px rgba(0, 0, 0, .35);
}
.mb-tour-count { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--purple, #534AB7); }
.mb-tour-title { margin: 4px 0 6px; font-size: 20px; line-height: 1.2; }
.mb-tour-text { margin: 0 0 12px; font-size: 15px; line-height: 1.45; }
.mb-tour-dots { display: flex; gap: 6px; margin-bottom: 12px; }
.mb-tour-dots span { width: 8px; height: 8px; border-radius: 50%; background: var(--btn-border, #d4d2ca); }
.mb-tour-dots span.on { background: var(--purple, #534AB7); }
.mb-tour-actions { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.mb-tour-skip { background: none; border: 0; padding: 8px 4px; font: inherit; font-size: 14px; color: var(--text-muted, #666); cursor: pointer; text-decoration: underline; }
.mb-tour-next {
  background: var(--purple, #534AB7); color: #fff; border: 0; border-radius: 10px;
  padding: 10px 22px; font: inherit; font-size: 15px; font-weight: 700; cursor: pointer;
}
.mb-tour-next:hover { background: var(--purple-dark, #4540a0); }
.mb-tour-next:focus-visible, .mb-tour-skip:focus-visible { outline: 3px solid var(--purple, #534AB7); outline-offset: 2px; }