/* Tutorial Overlay Styles */
.lp-tour-overlay{ position: fixed; inset:0; background: rgba(0,0,0,0.45); z-index: 2000; display:none; }
.lp-tour-spotlight{ position: fixed; border-radius: 12px; box-shadow: 0 0 0 20000px rgba(0,0,0,0.45), 0 0 0 3px #ffd54f; z-index: 2002; pointer-events:none; display:none; }
.lp-tour-panel{ position: fixed; max-width: 320px; background: #fff; color:#111; border-radius:12px; box-shadow: 0 8px 24px rgba(0,0,0,0.25); z-index: 2003; padding: 12px 14px; display:none; animation: lpFadeIn .2s ease-in; }
.lp-tour-panel .lp-tour-header{ display:flex; justify-content: space-between; align-items:center; font-weight: 700; margin-bottom: 8px; }
.lp-tour-text{ font-size: 0.95rem; margin-bottom: 10px; }
.lp-tour-actions{ display:flex; gap:6px; }
.lp-tour-hand{ position: fixed; font-size: 28px; z-index: 2004; display:none; animation: lpBounce 1.2s infinite ease-in-out; }
.lp-tour-highlight{ position: relative !important; z-index: 2001 !important; box-shadow: 0 0 0 3px #ffd54f, 0 8px 18px rgba(0,0,0,0.2) !important; border-radius: 8px !important; }
@keyframes lpBounce{ 0%{ transform: translateY(0)} 50%{ transform: translateY(-6px)} 100%{ transform: translateY(0)} }
@keyframes lpFadeIn{ from{ opacity:0; transform: translateY(6px)} to{ opacity:1; transform: translateY(0)} }

/* Dark theme support */
.theme-dark .lp-tour-panel{ background: #1e1e1e; color: #e0e0e0; }
.theme-dark .lp-tour-spotlight{ box-shadow: 0 0 0 20000px rgba(0,0,0,0.6), 0 0 0 3px #ffb300; }

/* Mobile-first enhancements */
.lp-no-select, .lp-no-select * { user-select: none; -webkit-user-select: none; -ms-user-select: none; }
.lp-tour-overlay { -webkit-tap-highlight-color: transparent; touch-action: none; }
.lp-tour-spotlight, .lp-tour-hand { will-change: transform; }
.lp-tour-actions .btn { min-width: 44px; min-height: 44px; padding: 10px 14px; touch-action: manipulation; font-size: 0.95rem; }
.lp-tour-text { font-size: 1rem; line-height: 1.4; }

@media (max-width: 480px) {
  .lp-tour-panel {
    left: 12px !important;
    right: 12px !important;
    bottom: 12px !important;
    top: auto !important;
    max-width: none;
    width: calc(100% - 24px);
    border-radius: 16px;
    padding-bottom: calc(12px + env(safe-area-inset-bottom));
  }
  .lp-tour-actions { flex-direction: column; }
  .lp-tour-actions .btn { width: 100%; font-size: 1rem; }
  .lp-tour-hand { font-size: 24px; }
}

/* Prefer reduced motion for accessibility and performance */
@media (prefers-reduced-motion: reduce) {
  .lp-tour-hand { animation: none; }
  .lp-tour-panel { animation: none; }
}