.highlight {
        box-shadow: 0 0 10px 3px #4da3ff;
        border-radius: 4px;
      }

      .tutorial-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.4);
        z-index: 9999;
      }

      .tutorial-popup {
        position: absolute;
        background: white;
        padding: 20px;
        border-radius: 8px;
        width: 280px;
        z-index: 99999;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
      }


          /* ---------- OVERLAY ---------- */
    .tutorial-overlay {
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.45);
      -webkit-backdrop-filter: blur(0px);
      backdrop-filter: blur(0px);
      z-index: 9999;
      animation: fadeIn 0.25s ease;
    }

    @keyframes fadeIn {
      from { opacity: 0 }
      to { opacity: 1 }
    }

    /* ---------- HIGHLIGHT ---------- */
    .highlight {
      position: relative;
      z-index: 99999;
      outline: 3px solid #4da3ff;
      border-radius: 6px;
      animation: pulse 1.6s infinite;
      background: #fff;
      padding: 3px;
    }

    @keyframes pulse {
      0% { box-shadow: 0 0 0 0 rgba(77,163,255,0.6); }
      70% { box-shadow: 0 0 0 10px rgba(77,163,255,0); }
      100% { box-shadow: 0 0 0 0 rgba(77,163,255,0); }
    }

    /* ---------- POPUP ---------- */
    .tutorial-popup {
      position: absolute;
      width: 400px;
      background: #fff;
      padding: 16px;
      border-radius: 10px;
      z-index: 99999;
      box-shadow: 0 12px 30px rgba(0,0,0,0.25);
      animation: slideUp 0.25s ease;
    }

    @keyframes slideUp {
      from { opacity: 0; transform: translateY(10px); }
      to { opacity: 1; transform: translateY(0); }
    }

    .popup-actions {
      display: flex;
      justify-content: space-between;
      margin-top: 12px;
    }

    .popup button {
      padding: 6px 12px;
      border: none;
      border-radius: 6px;
      cursor: pointer;
    }

    .btn-prev {
      background: #e0e0e0;
    }

    .btn-next {
      background: #4da3ff;
      color: #fff;
    }

    .btn-prev:disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }

    .modal{
      z-index: 99999;
    }

.popup-content {
  max-height: 280px;      
  overflow-y: auto;
}

.popup-actions {
  display: flex;
  justify-content: space-between;
  margin-top: 3px;
}

.popup-close {
  position: absolute;
  top: 8px;
  right: 10px;
  background: transparent;
  border: none;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  color: #777;
}

.popup-close:hover {
  color: #000;
}