/* Tour styles */
.tour-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.75);
    z-index: 9998;
    pointer-events: none;
}

.tour-highlight {
    position: relative;
    z-index: 9999;
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.5), 0 0 20px rgba(59, 130, 246, 0.3);
    border-radius: 8px;
    pointer-events: auto;
}

.tour-tooltip {
    position: fixed;
    z-index: 10000;
    background: #1e293b;
    border: 1px solid #3b82f6;
    border-radius: 12px;
    padding: 20px;
    max-width: 320px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
    animation: tooltipFadeIn 0.3s ease;
}

.tour-arrow {
    position: absolute;
    width: 12px;
    height: 12px;
    background: #1e293b;
    border-left: 1px solid #3b82f6;
    border-top: 1px solid #3b82f6;
    transform: rotate(45deg);
}

.tour-arrow.left { left: -7px; top: 24px; transform: rotate(-45deg); }
.tour-arrow.right { right: -7px; top: 24px; transform: rotate(135deg); }
.tour-arrow.top { top: -7px; left: 50%; margin-left: -6px; transform: rotate(45deg); }
.tour-arrow.bottom { bottom: -7px; left: 50%; margin-left: -6px; transform: rotate(-135deg); }