/* ============================================================
   TUTORIAL — tour overlay, cutout, ring, tooltip
   ============================================================ */

#tour-overlay { display: none; position: fixed; inset: 0; z-index: 500; pointer-events: none; }
#tour-overlay.active { display: block; }

#tour-cutout {
  position: fixed; border-radius: 5px; pointer-events: none;
  transition: top .3s ease, left .3s ease, width .3s ease, height .3s ease;
  box-shadow: 0 0 0 9999px rgba(9,30,66,.72);
  z-index: 501;
}
#tour-ring {
  position: fixed; border-radius: 7px; pointer-events: none;
  border: 2px solid #4C9AFF;
  transition: top .3s ease, left .3s ease, width .3s ease, height .3s ease;
  z-index: 502;
  animation: tour-pulse 1.8s ease-in-out infinite;
}
@keyframes tour-pulse {
  0%,100% { opacity: 1; box-shadow: 0 0 0 0 rgba(76,154,255,.4); }
  50%      { opacity: .8; box-shadow: 0 0 0 6px rgba(76,154,255,0); }
}
#tour-tooltip {
  position: fixed; width: 280px;
  background: #fff; border: 1px solid #DFE1E6; border-radius: 6px;
  padding: 18px 20px 14px;
  pointer-events: all; z-index: 503;
  transition: top .3s ease, left .3s ease;
  box-shadow: 0 4px 16px rgba(9,30,66,.18);
}
.tt-step-label {
  font-size: 11px; font-weight: 600; color: #4C9AFF;
  letter-spacing: .06em; text-transform: uppercase; margin-bottom: 5px;
}
.tt-heading { font-size: 15px; font-weight: 600; color: #172B4D; margin-bottom: 8px; line-height: 1.35; }
.tt-body { font-size: 13px; color: #5E6C84; line-height: 1.6; margin-bottom: 14px; }
.tt-footer { display: flex; align-items: center; justify-content: space-between; }
.tt-dots { display: flex; gap: 6px; align-items: center; }
.tt-dot { width: 7px; height: 7px; border-radius: 50%; background: #DFE1E6; transition: background .2s, transform .2s; }
.tt-dot.on { background: #0052CC; transform: scale(1.2); }
.tt-nav { display: flex; gap: 8px; align-items: center; }
.tt-skip {
  font-family: 'Inter', sans-serif; font-size: 12px;
  background: none; border: none; cursor: pointer;
  color: #97A0AF; padding: 4px 6px; border-radius: 3px;
}
.tt-skip:hover { color: #5E6C84; background: #F4F5F7; }
.tt-next {
  font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 500;
  background: #0052CC; color: #fff; border: none;
  border-radius: 3px; padding: 6px 14px; cursor: pointer; transition: background .1s;
}
.tt-next:hover { background: #0065FF; }
.tt-next.finish { background: #006644; }
.tt-next.finish:hover { background: #00875A; }