body { font-family: 'Poppins', sans-serif; background:#f4f9f9; }
  .pill { border-radius: 999px; }
  .card-shadow { box-shadow: 0 10px 30px rgba(14,43,46,0.05); }
  .btn-dark { background:#00a6b4; color:#fff; }
  .btn-dark:hover { background:#008b97; }
  .btn-orange { background:#ff5a20; color:#fff; }
  .btn-orange:hover { background:#d44310; }
  .scrollbar-none::-webkit-scrollbar{ display:none; }
  .scrollbar-none{ -ms-overflow-style:none; scrollbar-width:none; }
  .fade-in { animation: fadeIn .5s ease both; }
  @keyframes fadeIn { from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:translateY(0)} }
  .toast { transition: all .3s ease; }

  /* Drawer & Modal Transitions */
  .drawer-backdrop {
    position: fixed;
    inset: 0;
    background-color: rgba(14, 43, 46, 0.45);
    backdrop-filter: blur(4px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    z-index: 40;
  }
  .drawer-backdrop.active {
    opacity: 1;
    pointer-events: auto;
  }

  .drawer-left {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    width: 20rem; /* w-80 */
    max-width: 85vw;
    background: white;
    transform: translateX(-100%);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 50;
    box-shadow: 10px 0 30px rgba(14, 43, 46, 0.08);
  }
  .drawer-left.active {
    transform: translateX(0);
  }

  .drawer-right {
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    max-width: 450px;
    background: white;
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 50;
    box-shadow: -10px 0 30px rgba(14, 43, 46, 0.08);
  }
  .drawer-right.active {
    transform: translateX(0);
  }

  .modal-container {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -40%) scale(0.95);
    background: white;
    opacity: 0;
    pointer-events: none;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 50;
    border-radius: 1.5rem;
    box-shadow: 0 20px 50px rgba(14, 43, 46, 0.15);
  }
  .modal-container.active {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
    pointer-events: auto;
  }

  /* File drag & drop highlighting */
  .drag-over {
    border-color: #00a6b4 !important;
    background-color: rgba(0, 166, 180, 0.05) !important;
  }

  /* Slider specific styles */
  .slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.8s ease-in-out;
    z-index: 1;
  }
  .slide.active {
    opacity: 1;
    z-index: 2;
  }
  /* Scroll Animation Classes */
  .reveal-section {
    opacity: 0;
    transform: translateY(35px);
    transition: opacity 0.9s cubic-bezier(0.25, 1, 0.5, 1), transform 0.9s cubic-bezier(0.25, 1, 0.5, 1);
    will-change: opacity, transform;
  }
  .reveal-section.revealed {
    opacity: 1;
    transform: translateY(0);
  }