/* --- Guided product tour (the Setup "Take a tour" button) --- */
/* A spotlight walks each tab, dimming everything but one key section, with a
   tooltip that explains it and back / pause / forward / exit controls. */

#tour-root { position: fixed; inset: 0; z-index: 9990; }

/* "How this tab works" button injected next to each tab's heading */
.tab-guide-btn {
  display: inline-flex; align-items: center; gap: 6px; vertical-align: middle;
  margin: 6px 0 0; padding: 6px 12px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--accent); background: rgba(91,163,245,.1); color: var(--accent);
  font-size: 12.5px; font-weight: 700; line-height: 1.2;
}
.tab-guide-btn:hover { background: rgba(91,163,245,.2) }

/* Transparent layer that swallows clicks on the app while the tour runs. */
.tour-backdrop { position: fixed; inset: 0; z-index: 9990; background: transparent; cursor: default; }

/* The "hole": a transparent box over the highlighted element with a huge box-shadow
   that darkens the rest of the screen. */
.tour-spotlight {
  position: fixed; z-index: 9991; border-radius: 12px; pointer-events: none;
  border: 2px solid var(--accent);
  box-shadow: 0 0 0 9999px rgba(8, 12, 20, .74), 0 0 0 4px rgba(91, 163, 245, .35);
  transition: top .28s ease, left .28s ease, width .28s ease, height .28s ease;
}

.tour-tooltip {
  position: fixed; z-index: 9992; width: 350px; max-width: calc(100vw - 24px);
  background: var(--panel); border: 1px solid var(--line); border-radius: 16px;
  box-shadow: 0 18px 55px rgba(0, 0, 0, .55); padding: 18px 18px 14px; color: var(--text);
  transition: top .28s ease, left .28s ease;
}

.tour-step-count { font-size: 12px; font-weight: 700; color: var(--accent); letter-spacing: .05em; text-transform: uppercase; }
.tour-title { font-size: 19px; font-weight: 800; margin: 5px 0 7px; letter-spacing: -.01em; }
.tour-text { font-size: 14.5px; line-height: 1.55; color: var(--muted); }

.tour-progress { height: 4px; background: var(--line); border-radius: 999px; margin: 15px 0 13px; overflow: hidden; }
.tour-progress-bar { height: 100%; width: 0; background: var(--accent); border-radius: 999px; transition: width .1s linear; }

.tour-controls { display: flex; align-items: center; gap: 8px; }
.tour-btn {
  min-width: 42px; height: 42px; padding: 0 12px; border-radius: 11px; border: 1px solid var(--line);
  background: var(--bg); color: var(--text); font-size: 15px; font-weight: 700; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.tour-btn:hover { background: var(--panel2); border-color: var(--accent); color: var(--accent); }
.tour-btn:disabled { opacity: .35; cursor: default; }
.tour-btn:disabled:hover { background: var(--bg); border-color: var(--line); color: var(--text); }
.tour-btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.tour-btn-primary:hover { background: var(--accent); color: #fff; filter: brightness(1.08) }

/* Play / pause: same look as the others, just round to set it apart as the center control. */
.tour-btn-play { min-width: 42px; width: 42px; border-radius: 50%; }
.tour-btn-exit { margin-left: auto; border-color: transparent; color: var(--muted) }
.tour-btn-exit:hover { background: rgba(224, 88, 88, .12); border-color: var(--red); color: var(--red) }

@media (max-width: 768px) {
  .tour-tooltip { width: calc(100vw - 24px); left: 12px !important; }
}