html, body {
      font-family: 'Inter', sans-serif;
      background: #f7fafc;
      color: #21264a;
      scroll-behavior: smooth;
      overflow-x: hidden; /* Prevent horizontal scroll */
    }
    .sidebar {
      transition: left 0.3s cubic-bezier(.21,.6,.49,1.32);
      z-index: 40;
      will-change: left;
      height: 100vh;
      display: flex;
      flex-direction: column;
      overflow: hidden; /* Hide scrollbar in the sidebar itself */
    }
    /* NEW SIDEBAR STYLING - LIGHT & VIBRANT */
    .sidebar-bg {
      background: linear-gradient(180deg, #ffffff 0%, #f0f9ff 100%);
      box-shadow: 0 0 25px rgba(96, 165, 250, 0.15);
      border-right: 1px solid #dbeafe;
    }
    .sidebar-link {
      color: #4b5563;
      transition: all 0.2s ease;
      margin-bottom: 0.35rem;
      border-radius: 10px;
      position: relative;
      overflow: hidden;
    }
    .sidebar-link::before {
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      height: 100%;
      width: 0;
      background: linear-gradient(90deg, rgba(59, 130, 246, 0.1) 0%, rgba(59, 130, 246, 0) 100%);
      transition: width 0.3s ease;
    }
    .sidebar-link.active::before, .sidebar-link:hover::before {
      width: 100%;
    }
    .sidebar-link.active, .sidebar-link:hover {
      background-color: rgba(59, 130, 246, 0.07) !important;
      color: #3b82f6 !important;
      font-weight: 500;
      box-shadow: 0 2px 10px 0 rgba(59, 130, 246, 0.1);
      transform: translateX(3px);
    }
     /* Ensure icon color transition is smooth */
     .sidebar-link i {
       transition: color 0.2s ease, transform 0.2s ease;
     }
     .sidebar-link.active i, .sidebar-link:hover i {
        transform: translateX(2px);
     }

    .sidebar-category-heading {
      color: #6b7280;
      font-size: 0.75rem;
      letter-spacing: 0.05em;
      position: relative;
      margin-left: 0.75rem;
    }
    .sidebar-category-heading::after {
      content: '';
      position: absolute;
      bottom: -0.4rem;
      left: 0;
      width: 2rem;
      height: 2px;
      background: linear-gradient(90deg, #3b82f6 0%, rgba(59, 130, 246, 0.2) 100%);
      border-radius: 1px;
    }
    .sidebar-footer {
      background: linear-gradient(0deg, #f0f9ff 0%, rgba(240, 249, 255, 0) 100%);
      border-top: 1px solid rgba(219, 234, 254, 0.7);
      color: #6b7280;
      flex-shrink: 0;
    }
    .sidebar-logo {
      background: linear-gradient(135deg, #3b82f6 0%, #60a5fa 100%);
      color: white;
      padding: 0.5rem;
      border-radius: 10px;
      box-shadow: 0 4px 10px rgba(59, 130, 246, 0.25);
      flex-shrink: 0;
    }
    /* Sidebar icon colors - VIBRANT */
    .si-chat { color: #2563eb;} /* blue-700 */
    .si-text { color: #8b5cf6;} /* violet-500 */
    .si-image { color: #eab308;} /* yellow-500 */
    .si-video { color: #ef4444;} /* red-500 */
    .si-code { color: #10b981;} /* emerald-500 */
    .si-audio { color: #ec4899;} /* pink-500 */
    .si-prod { color: #f97316;} /* orange-600 */
    .si-search { color: #475569;} /* slate-600 */
    .si-learn { color: #3b82f6;} /* blue-600 */
    .si-biz { color: #ea580c;} /* orange-700 */
    .si-analytics { color: #6366f1;} /* indigo-600 */
    .si-fin { color: #22c55e;} /* green-500 */
    .si-deck { color: #52525b;} /* gray-600 */
    .si-resume { color: #475569;} /* slate-600 */
    .si-support { color: #2563eb;} /* blue-700 */
    /* New Sidebar icon colors */
    .si-tts { color: #f472b6;} /* pink-400 */
    .si-avatar { color: #a78bfa;} /* violet-400 */
    .si-3d { color: #4ade80;} /* green-400 */
    .si-illustrate { color: #facc15;} /* yellow-400 */
    .si-summarize { color: #38b2ac;} /* teal-500 */
    .si-transcribe { color: #c084fc;} /* purple-400 */
    .si-legal { color: #0891b2;} /* cyan-600 */
    .si-healthcare { color: #be123c;} /* rose-700 */
    .si-voiceclone { color: #d946ef;} /* fuchsia-500 */
    .si-detect { color: #065f46;} /* dark green */
    .si-sheet { color: #84cc16;} /* lime-600 */
    .si-translate { color: #06b6d4;} /* cyan-600 */
    .si-enhance { color: #0ea5e9;} /* sky-500 */
    .si-prompt { color: #facc15;} /* yellow-400 */
    .si-paraphrase { color: #34d399;} /* emerald-400 */
    .si-web { color: #f97316; } /* orange-600 - like prod */
    .si-social { color: #6366f1; } /* indigo-600 - like analytics */
    .si-cart { color: #22c55e; } /* green-500 - like fin */
    .si-seo { color: #475569; } /* slate-600 - like search */
    .si-users { color: #3b82f6; } /* blue-600 - like learn */
    .si-chart-line { color: #ef4444; } /* red-500 - like video */
    .si-house { color: #ea580c; } /* orange-700 - like biz */
    .si-imgedit {color: #f0ab3a;} /* amber-500 */
    .si-videdit {color: #7c3aed;} /* violet-700 */


    /* Hide scrollbar for PDF export */
    .no-scrollbar::-webkit-scrollbar {display:none;}
    .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

    /* Make nav scrollable, not the whole sidebar */
    .sidebar-nav-scroll {
      overflow-y: auto;
      flex-grow: 1;
      min-height: 0; /* Important for flex-grow elements with overflow */
      padding-bottom: 5rem; /* Explicit large padding */
    }

    /* Card Animation */
    .card-animate {
        transform: translateY(0);
        transition: transform 0.2s ease, box-shadow 0.2s ease;
        position: relative; /* Needed for absolute positioning of badge */
    }
    .card-animate:hover {
        transform: translateY(-3px);
    }

    /* Tool Icon Styling */
    .tool-icon {
      font-size: 1.2rem; /* Adjust size as needed */
      margin-right: 0.65rem; /* Space between icon and name */
      color: #3b82f6; /* Default blue color, adjust if specific colors are needed */
    }
    /* The color for the tool icon needs to be set based on category *or* tool data */
    /* For simplicity, we can apply the category color here or keep a default blue */
    /* Example: .si-chat.tool-icon { color: #2563eb; } - but this would require specific classes for each icon */
    /* Keeping a default blue is simpler unless specific tool icons have specific colors */
    .group:hover .tool-icon {
        color: #2563eb; /* Darker blue on hover */
    }

    /* Pricing Badge Styles */
    .pricing-badge {
      position: absolute;
      top: 0.5rem; /* Adjust as needed */
      right: 0.5rem; /* Adjust as needed */
      padding: 0.1rem 0.60rem; /* Adjust as needed */
      border-radius: 9999px; /* Full rounded */
      font-size: 0.75rem; /* text-xs */
      font-weight: 600; /* font-semibold */
      color: #ffffff;
      box-shadow: 0 1px 3px rgba(0,0,0,0.1);
      z-index: 10; /* Ensure it's above card content */
      text-transform: uppercase;
    }
    .badge-freemium { background-color: #34d399; } /* emerald-500 */
    .badge-paid { background-color: #ef4444; } /* red-500 */
    .badge-free { background-color: #60a5fa; } /* blue-400 */


    /* Filter Button Styles */
    .filter-button {
        display: inline-flex; /* Use flex for aligning text and maybe an icon later */
        align-items: center;
        padding: 0.4rem 1.2rem; /* Adjust padding */
        margin: 0 0.25rem; /* Space between buttons */
        border: 1px solid #dbeafe; /* blue-100 */
        border-radius: 9999px; /* full rounded */
        background-color: #ffffff;
        color: #4b5563; /* gray-600 */
        font-size: 0.875rem; /* text-sm */
        font-weight: 500; /* font-medium */
        cursor: pointer;
        transition: all 0.2s ease;
        user-select: none; /* Prevent text selection on rapid clicks */
    }
     .filter-button:first-child {
        margin-left: 0; /* Remove left margin for the first button */
     }
    .filter-button:hover {
        background-color: #eff6ff; /* blue-50 */
        border-color: #bfdbfe; /* blue-200 */
        color: #2563eb; /* blue-700 */
        box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    }
    .filter-button.active {
        background-color: #3b82f6; /* blue-600 */
        border-color: #3b82f6;
        color: #ffffff;
        box-shadow: 0 2px 5px rgba(59, 130, 246, 0.2);
    }
    .filter-button.active:hover {
         background-color: #2563eb; /* blue-700 */
         border-color: #2563eb;
    }
     /* Icon inside filter button */
     .filter-button i {
         margin-right: 0.5rem; /* Space between icon and text */
         font-size: 1rem; /* Adjust size */
     }


    /* Responsive Sidebar Display and Positioning */
    @media (max-width: 1023px) {
      .sidebar {
        left: -260px; /* Hidden by default on mobile */
      }
      .sidebar.open {
        left: 0; /* Slide in on open */
      }
      .sidebar-backdrop {
        display:block;
      }
      .main-content {
        /* On mobile, no left margin from sidebar */
         margin-left: 0;
      }
    }
    @media (min-width: 1024px) {
      .sidebar {
        left: 0 !important; /* Always visible on desktop */
      }
      .sidebar-backdrop {
        display:none !important; /* Hide backdrop on desktop */
      }
      .sidebar-toggle {
         display: none !important; /* Hide toggle button on desktop */
      }
      .main-content {
        /* Add left margin to main content equal to sidebar width */
        margin-left: 16rem; /* Matches w-64 */
      }
    }

    .sidebar-backdrop {
      position: fixed; left: 0; top: 0; right: 0; bottom: 0;
      background: rgba(30,41,59,0.12);
      z-index:39; display:none;
      transition: background 0.25s;
    }
    .sidebar-toggle {
      z-index: 45;
      background: linear-gradient(135deg, #3b82f6 0%, #60a5fa 100%);
      box-shadow: 0 4px 10px rgba(59, 130, 246, 0.25);
    }

    /* Hero Animated Icons */
    .icon-animate {
      animation: floaty 3.5s infinite ease-in-out;
      font-size: 2.35rem;
      margin: 0 0.75rem;
    }
    .icon-animate1 { animation-delay: 0s; color: #2563eb;}
    .icon-animate2 { animation-delay: .9s; color: #16a34a;}
    .icon-animate3 { animation-delay: 1.7s; color: #eab308;}
    .icon-animate4 { animation-delay: 2.3s; color: #ef4444;}
    @keyframes floaty {
      0%   { transform: translateY(0);}
      50%  { transform: translateY(-13px) scale(1.1);}
      100% { transform: translateY(0);}
    }
    /* PDF Optimization */
    @media print {
      .sidebar, .sidebar-backdrop, .sidebar-toggle, footer, #filter-section { display: none !important;} /* Hide filter section for print */
      .main-content {margin-left: 0 !important; padding-top: 0 !important; padding-left: 0 !important; padding-right: 0 !important;} /* Remove sidebar margin and all padding */
      header { position: static !important; border-bottom: none !important; box-shadow: none !important; min-height: auto !important; padding: 0 !important;} /* Make header static */
       header .max-w-5xl { padding: 0 !important;} /* Remove inner header padding */
      body { background: #fff !important; color: #000 !important; overflow: visible !important;} /* White background for print */
       h1, h2, h3, h4, h5, h6 { color: #000 !important; }
       .text-blue-700 { color: #000 !important; }
       .text-blue-800 { color: #000 !important; }
       .text-blue-600 { color: #000 !important; }
       .text-gray-700 { color: #333 !important; }
       .border-blue-100, .border-blue-200 { border-color: #ddd !important; }
       .bg-gradient-to-br, .bg-gradient-to-r, .bg-white, .bg-gray-50, .bg-blue-100, .to-blue-50, .badge-freemium, .badge-paid, .badge-free { /* Include badges */
         background: #fff !important; /* Force white background */
         color: #000 !important;
         box-shadow: none !important; /* Remove gradients/shadows */
         border: none !important; /* Remove borders on gradient elements */
       }
       .shadow, .shadow-sm, .shadow-md { box-shadow: none !important; border: 1px solid #ddd !important; } /* Add border for definition */
       .card-animate, .card-animate:hover { transform: none !important; box-shadow: none !important; border: 1px solid #ddd !important; position: static !important; padding-right: 1rem !important;} /* Remove card effects, add border, make static, adjust padding */
       .card-animate .pricing-badge { display: none !important;} /* Hide pricing badge in print */
       a { text-decoration: underline; color: #000 !important; } /* Underline links */
       .group-hover\:text-blue-700 { color: #000 !important; } /* Ensure link text is black */
       .group-hover\:underline { text-decoration: underline !important;}
       img { max-width: 80px !important; max-height: 80px !important; border: 1px solid #ddd !important;} /* Constrain image size and add border */
        .tool-icon { color: #000 !important;} /* Ensure icons are black */
       /* Ensure spacing is reasonable */
       section { margin-bottom: 20px !important; padding-bottom: 0 !important; padding-left: 0 !important; padding-right: 0 !important;}
       .mb-12 { margin-bottom: 1rem !important; }
       .mb-16 { margin-bottom: 1.5rem !important; }
       .gap-6 { gap: 1rem !important; }
       .px-0, .mx-auto { padding-left: 0 !important; padding-right: 0 !important; margin-left: 0 !important; margin-right: 0 !important;}
       .px-2 { padding-left: 0.5rem !important; padding-right: 0.5rem !important;} /* Keep some minimal padding for grids/lists */
       .container { max-width: none !important; width: 100% !important; padding: 0 15px !important; }
       .py-8 { padding-top: 1rem !important; padding-bottom: 1rem !important;}
       .my-8 { margin-top: 1rem !important; margin-bottom: 1rem !important;}
       .p-4 { padding: 1rem !important;}
       .p-5 { padding: 1rem !important;} /* Adjust card padding for print */
       .p-8 { padding: 1.5rem !important;}
       .rounded-2xl { border-radius: 0.5rem !important; }
       .w-full { width: 100% !important;}
       .grid-cols-1, .md\:grid-cols-2, .lg\:grid-cols-3 { grid-template-columns: 1fr !important; } /* Single column for print */
       /* Specific adjustments for search and hero */
        form.max-w-xl { padding: 0.5rem !important; border: 1px solid #ddd !important; }
        form.max-w-xl input { padding: 0.5rem !important; }
        .hero-section > div { padding: 1rem !important; margin-top: 1rem !important; margin-bottom: 1rem !important; border: 1px solid #ddd !important;}
        .hero-section .icon-animate { font-size: 1.5rem !important; margin: 0 0.5rem !important; animation: none !important;}
        .text-3xl, .text-4xl { font-size: 1.5rem !important; margin-bottom: 0.5rem !important;}
        .text-base, .text-lg { font-size: 1rem !important;}
        .hero-section .flex.gap-3 a { padding: 0.5rem 1rem !important; font-size: 1rem !important;}
        .sidebar-logo, .sidebar-category-heading { display: none !important;} /* Hide sidebar specifics in print */
        .card-animate img { margin-right: 0.5rem !important;}
        .card-animate span.text-lg { font-size: 1.1rem !important;}
        .card-animate p { font-size: 0.9rem !important; margin-bottom: 0.5rem !important;}
        .card-animate span.text-xs { font-size: 0.8rem !important; margin-top: 0.5rem !important;}
        /* Disable sticky for print */
        .sticky { position: static !important; top: auto !important; z-index: auto !important; background: none !important; border: none !important; box-shadow: none !important;}
        #search-section form { margin: 0 !important; padding: 0.5rem !important;} /* Remove my-4 margin for print */
        #categories { padding-top: 1rem !important;} /* Adjust top padding for print */
         #filter-section { margin-top: 0 !important; padding-bottom: 0 !important; }


    }
    /* Ensuring no horizontal scrollbar for PDF */
    .main-content, .container {overflow-x: hidden !important;}

    /* Added padding to main-content for all screen sizes */
    .main-content {
       padding-left: 1rem; /* px-4 */
       padding-right: 1rem; /* px-4 */
    }
     @media (min-width: 640px) { /* sm */
        .main-content {
           padding-left: 1.5rem; /* sm:px-6 */
           padding-right: 1.5rem; /* sm:px-6 */
        }
     }
     @media (min-width: 1024px) { /* lg */
        .main-content {
           padding-left: 2rem; /* lg:px-8 */
           padding-right: 2rem; /* lg:px-8 */
        }
     }

     /* Sticky Search Bar Styles */
     #search-section {
        transition: top 0.3s ease; /* Smooth transition if header height changes (less likely with fixed header) */
     }

     /* Added specific margin-top for the filter section */
     #filter-section {
         margin-top: 1rem; /* Add space below sticky search */
         padding-bottom: 1rem; /* Add space above categories */
         border-bottom: 1px solid #e2e8f0; /* subtle border */
         background-color: #f7fafc; /* Match body background */
         position: sticky; /* Make filter sticky */
         z-index: 10; /* Below search */
         top: 0; /* Will be calculated by JS */
     }