/* === Custom Guided Tour (no library) === */
      .tour-hidden {
        display: none !important;
      }

      .tour-overlay-quad {
        position: fixed;
        background: rgba(0, 0, 0, 0.6);
        inset: 0;
        z-index: 9998;
      }

      /* Each quad is individually sized via style attr; base class is reused */
      .tour-quad {
        position: fixed;
        background: rgba(0, 0, 0, 0.05);
        z-index: 9998;
      }

      .tour-spotlight {
        position: fixed;
        z-index: 9999;
        border-radius: 16px;
        box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.25);
        pointer-events: none; /* let clicks pass through unless disabled explicitly */
        transition: all 0.16s ease;
      }

      .tour-tooltip {
        --aw: 12px; /* triangle half-width */
        --ah: 10px; /* triangle height */
        position: fixed;
        z-index: 10000;
        background: rgba(255, 255, 255, 0.95);
        backdrop-filter: blur(8px);
        color: #111827;
        border-radius: 16px;
        border: 1px solid rgba(255, 255, 255, 0.5);
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
        padding: 16px 18px 14px;
        width: min(380px, calc(100vw - 24px));
        line-height: 1.5;
        transition: transform 0.16s ease, opacity 0.16s ease;
      }
      .tour-title {
        font-size: 16px;
        font-weight: 600;
        margin-bottom: 6px;
      }
      .tour-content {
        font-size: 13px;
        line-height: 1.45;
        margin-bottom: 10px;
        color: #374151;
      }

      .tour-actions {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
      }
      .tour-left,
      .tour-right {
        display: flex;
        align-items: center;
        gap: 8px;
      }

      .tour-btn {
        appearance: none;
        border: 0;
        border-radius: 4px;
        padding: 7px 16px;
         
        cursor: pointer;
        background: #f3f4f6;
        color: #111827;
      }
      .tour-btn:hover {
        background: #e5e7eb;
      }
      .tour-btn.primary {
        background: #7e3ff2;
        color: #fff;
        font-weight: 600;
        border-radius: 4px;
        padding: 7px 16px;
        box-shadow: 0 2px 6px rgba(126, 63, 242, 0.4);
      }
      .tour-btn.primary:hover {
        background: #6b35d4;
      }
      .tour-btn:disabled {
        opacity: 0.5;
        cursor: not-allowed;
      }

      .tour-indicator {
        font-size: 12px;
        color: #6b7280;
        margin-right: 6px;
      }

      /* Block clicks on target when disableInteraction true */
      .tour-blocker {
        position: fixed;
        z-index: 9999;
        background: rgba(0, 0, 0, 0);
      }

      /* bottom-placed tooltip (below target) -> arrow on top edge (pointing up) */
      .tour-tooltip[data-side="bottom"]::after {
        content: "";
        position: absolute;
        top: calc(-1 * var(--ah));
        left: var(--arrow-left, 32px);
        border-style: solid;
        border-width: 0 var(--aw) var(--ah) var(--aw);
        border-color: transparent transparent rgba(255, 255, 255, 0.95)
          transparent;
        width: 0;
        height: 0;
        pointer-events: none;
        filter: drop-shadow(0 -1px 2px rgba(0, 0, 0, 0.08));
      }
      /* top-placed tooltip (above target) -> arrow on bottom edge (pointing down) */
      .tour-tooltip[data-side="top"]::after {
        content: "";
        position: absolute;
        bottom: calc(-1 * var(--ah));
        left: var(--arrow-left, 32px);
        border-style: solid;
        border-width: var(--ah) var(--aw) 0 var(--aw);
        border-color: rgba(255, 255, 255, 0.95) transparent transparent
          transparent;
        width: 0;
        height: 0;
        pointer-events: none;
        filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.08));
      }
      /* left-placed tooltip (right of target) -> arrow on left edge (pointing right) */
      .tour-tooltip[data-side="left"]::after {
        content: "";
        position: absolute;
        left: calc(-1 * var(--ah));
        top: var(--arrow-top, 16px);
        border-style: solid;
        border-width: var(--aw) var(--ah) var(--aw) 0;
        border-color: transparent rgba(255, 255, 255, 0.95) transparent
          transparent;
        width: 0;
        height: 0;
        pointer-events: none;
        filter: drop-shadow(-1px 0 2px rgba(0, 0, 0, 0.08));
      }
      /* right-placed tooltip (left of target) -> arrow on right edge (pointing left) */
      .tour-tooltip[data-side="right"]::after {
        content: "";
        position: absolute;
        right: calc(-1 * var(--ah));
        top: var(--arrow-top, 16px);
        border-style: solid;
        border-width: var(--aw) 0 var(--aw) var(--ah);
        border-color: transparent transparent transparent
          rgba(255, 255, 255, 0.95);
        width: 0;
        height: 0;
        pointer-events: none;
        filter: drop-shadow(1px 0 2px rgba(0, 0, 0, 0.08));
      }