/**
 * AI Tools Directory V3 - High-Fidelity Design System
 * 
 * Ported from React/Tailwind implementation.
 * Contains: HSL color variables, design tokens, animations, and utility classes.
 * 
 * @package HyzenPro_AI_Tools
 * @since 2.0.0
 */

/* ==========================================================================
   FONTS
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700&family=Inter:wght@300;400;500;600;700&display=swap');

/* ==========================================================================
   FORCED BASE STYLES (Override theme defaults)
   ========================================================================== */
.aid-main-directory,
.aid-category-archive,
.aid-single-tool {
    font-family: 'Inter', 'Outfit', system-ui, sans-serif !important;
    font-size: 16px !important;
    line-height: 1.7 !important;
    color: hsl(var(--aid-foreground)) !important;
    background: hsl(var(--aid-background)) !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
}

.aid-main-directory *,
.aid-category-archive *,
.aid-single-tool * {
    box-sizing: border-box !important;
}

/* Force link reset */
.aid-main-directory a,
.aid-category-archive a,
.aid-single-tool a {
    text-decoration: none;
    color: inherit;
}

/* Force button reset */
.aid-main-directory button,
.aid-category-archive button,
.aid-single-tool button {
    font-family: inherit;
    cursor: pointer;
    border: none;
    background: none;
}

/* Force margin/padding on key elements */
.aid-main-directory h1,
.aid-main-directory h2,
.aid-main-directory h3,
.aid-main-directory h4,
.aid-category-archive h1,
.aid-category-archive h2,
.aid-category-archive h3,
.aid-category-archive h4,
.aid-single-tool h1,
.aid-single-tool h2,
.aid-single-tool h3,
.aid-single-tool h4 {
    font-family: var(--aid-font-display) !important;
    margin: 0 !important;
    padding: 0 !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    color: hsl(var(--aid-foreground)) !important;
}

.aid-main-directory p,
.aid-category-archive p,
.aid-single-tool p {
    margin: 0 0 1rem 0 !important;
}

.aid-main-directory ul,
.aid-main-directory ol,
.aid-category-archive ul,
.aid-category-archive ol,
.aid-single-tool ul,
.aid-single-tool ol {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* ==========================================================================
   CSS VARIABLES - LIGHT MODE (DEFAULT)
   ========================================================================== */
:root {
    /* Core Colors */
    --aid-background: 0 0% 100%;
    --aid-foreground: 0 0% 5%;
    --aid-card: 0 0% 100%;
    --aid-card-foreground: 0 0% 5%;
    --aid-popover: 0 0% 100%;
    --aid-popover-foreground: 0 0% 5%;
    --aid-primary: 0 0% 5%;
    --aid-primary-foreground: 0 0% 100%;
    --aid-secondary: 0 0% 96%;
    --aid-secondary-foreground: 0 0% 5%;
    --aid-muted: 0 0% 96%;
    --aid-muted-foreground: 0 0% 45%;
    --aid-accent: 0 0% 96%;
    --aid-accent-foreground: 0 0% 5%;
    --aid-destructive: 0 84% 60%;
    --aid-destructive-foreground: 0 0% 100%;
    --aid-border: 0 0% 90%;
    --aid-input: 0 0% 90%;
    --aid-ring: 0 0% 5%;
    --aid-radius: 0.75rem;

    /* Custom Tokens */
    --aid-tag: 0 0% 5%;
    --aid-tag-foreground: 0 0% 100%;
    --aid-surface-elevated: 0 0% 98%;

    /* Gradients */
    --aid-gradient-hero: linear-gradient(180deg, hsl(0 0% 100%) 0%, hsl(0 0% 97%) 100%);
    --aid-gradient-card: linear-gradient(135deg, hsl(0 0% 100%) 0%, hsl(0 0% 98%) 100%);
    --aid-gradient-shine: linear-gradient(120deg, transparent 30%, hsl(0 0% 100% / 0.8) 50%, transparent 70%);

    /* Shadows */
    --aid-shadow-soft: 0 4px 24px -4px hsl(0 0% 0% / 0.08);
    --aid-shadow-card: 0 2px 16px -2px hsl(0 0% 0% / 0.06);
    --aid-shadow-hover: 0 12px 40px -8px hsl(0 0% 0% / 0.15);
    --aid-shadow-glow: 0 0 60px -12px hsl(0 0% 0% / 0.2);

    /* Fonts */
    --aid-font-display: 'Playfair Display', Georgia, serif;
    --aid-font-body: 'Inter', system-ui, sans-serif;
}

/* ==========================================================================
   CSS VARIABLES - DARK MODE
   ========================================================================== */
.dark,
[data-theme="dark"] {
    --aid-background: 0 0% 4%;
    --aid-foreground: 0 0% 96%;
    --aid-card: 0 0% 8%;
    --aid-card-foreground: 0 0% 96%;
    --aid-popover: 0 0% 8%;
    --aid-popover-foreground: 0 0% 96%;
    --aid-primary: 0 0% 96%;
    --aid-primary-foreground: 0 0% 5%;
    --aid-secondary: 0 0% 12%;
    --aid-secondary-foreground: 0 0% 96%;
    --aid-muted: 0 0% 12%;
    --aid-muted-foreground: 0 0% 55%;
    --aid-accent: 0 0% 12%;
    --aid-accent-foreground: 0 0% 96%;
    --aid-destructive: 0 70% 45%;
    --aid-destructive-foreground: 0 0% 100%;
    --aid-border: 0 0% 16%;
    --aid-input: 0 0% 16%;
    --aid-ring: 0 0% 96%;
    --aid-tag: 0 0% 96%;
    --aid-tag-foreground: 0 0% 5%;
    --aid-surface-elevated: 0 0% 10%;

    /* Dark Gradients */
    --aid-gradient-hero: linear-gradient(180deg, hsl(0 0% 4%) 0%, hsl(0 0% 6%) 100%);
    --aid-gradient-card: linear-gradient(135deg, hsl(0 0% 8%) 0%, hsl(0 0% 10%) 100%);
    --aid-gradient-shine: linear-gradient(120deg, transparent 30%, hsl(0 0% 100% / 0.05) 50%, transparent 70%);

    /* Dark Shadows */
    --aid-shadow-soft: 0 4px 24px -4px hsl(0 0% 0% / 0.4);
    --aid-shadow-card: 0 2px 16px -2px hsl(0 0% 0% / 0.3);
    --aid-shadow-hover: 0 12px 40px -8px hsl(0 0% 0% / 0.5);
    --aid-shadow-glow: 0 0 80px -12px hsl(0 0% 100% / 0.1);
}

/* ==========================================================================
   CATEGORY-SPECIFIC GRADIENTS
   ========================================================================== */
.aid-gradient-coding {
    background: linear-gradient(135deg, #8b5cf6, #7c3aed);
}

.aid-gradient-automation {
    background: linear-gradient(135deg, #3b82f6, #06b6d4);
}

.aid-gradient-design {
    background: linear-gradient(135deg, #ec4899, #f43f5e);
}

.aid-gradient-image {
    background: linear-gradient(135deg, #f59e0b, #ea580c);
}

.aid-gradient-marketing {
    background: linear-gradient(135deg, #10b981, #14b8a6);
}

.aid-gradient-productivity {
    background: linear-gradient(135deg, #6366f1, #3b82f6);
}

.aid-gradient-video {
    background: linear-gradient(135deg, #ef4444, #ec4899);
}

.aid-gradient-writing {
    background: linear-gradient(135deg, #06b6d4, #3b82f6);
}

.aid-gradient-chatbots {
    background: linear-gradient(135deg, #8b5cf6, #d946ef);
}

.aid-gradient-voice {
    background: linear-gradient(135deg, #22c55e, #10b981);
}

/* ==========================================================================
   KEYFRAME ANIMATIONS
   ========================================================================== */

/* Float animation for icons/particles */
@keyframes aid-float {

    0%,
    100% {
        transform: translateY(0px) rotate(0deg);
    }

    50% {
        transform: translateY(-15px) rotate(1deg);
    }
}

@keyframes aid-float-delayed {

    0%,
    100% {
        transform: translateY(0px) rotate(0deg);
    }

    50% {
        transform: translateY(-10px) rotate(-1deg);
    }
}

/* Slide animations */
@keyframes aid-slide-up {
    from {
        opacity: 0;
        transform: translateY(40px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes aid-slide-down {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes aid-slide-left {
    from {
        opacity: 0;
        transform: translateX(-40px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes aid-slide-right {
    from {
        opacity: 0;
        transform: translateX(40px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Fade/Scale */
@keyframes aid-fade-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes aid-scale-in {
    from {
        opacity: 0;
        transform: scale(0.9);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Pulse */
@keyframes aid-pulse-soft {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.7;
    }
}

@keyframes aid-pulse-ring {
    0% {
        transform: scale(1);
        opacity: 0.6;
    }

    100% {
        transform: scale(1.8);
        opacity: 0;
    }
}

/* Marquee */
@keyframes aid-marquee {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

/* Shine effect for cards */
@keyframes aid-shine {
    0% {
        left: -100%;
    }

    50%,
    100% {
        left: 100%;
    }
}

/* Rotation */
@keyframes aid-rotate-slow {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* Bounce */
@keyframes aid-bounce-subtle {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-5px);
    }
}

/* Orbit (for hero icon animation) */
@keyframes aid-orbit {
    from {
        transform: rotate(0deg) translateX(120px) rotate(0deg);
    }

    to {
        transform: rotate(360deg) translateX(120px) rotate(-360deg);
    }
}

/* Morph (for central orb) */
@keyframes aid-morph {

    0%,
    100% {
        border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
    }

    25% {
        border-radius: 58% 42% 75% 25% / 76% 46% 54% 24%;
    }

    50% {
        border-radius: 50% 50% 33% 67% / 55% 27% 73% 45%;
    }

    75% {
        border-radius: 33% 67% 58% 42% / 63% 68% 32% 37%;
    }
}

/* Gradient shift */
@keyframes aid-gradient-shift {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

/* ==========================================================================
   ANIMATION UTILITY CLASSES
   ========================================================================== */
.aid-animate-float {
    animation: aid-float 6s ease-in-out infinite;
}

.aid-animate-float-delayed {
    animation: aid-float-delayed 7s ease-in-out infinite;
}

.aid-animate-slide-up {
    animation: aid-slide-up 0.6s ease-out forwards;
}

.aid-animate-slide-down {
    animation: aid-slide-down 0.5s ease-out forwards;
}

.aid-animate-slide-left {
    animation: aid-slide-left 0.6s ease-out forwards;
}

.aid-animate-slide-right {
    animation: aid-slide-right 0.6s ease-out forwards;
}

.aid-animate-fade-in {
    animation: aid-fade-in 0.8s ease-out forwards;
}

.aid-animate-scale-in {
    animation: aid-scale-in 0.5s ease-out forwards;
}

.aid-animate-pulse-soft {
    animation: aid-pulse-soft 2s ease-in-out infinite;
}

.aid-animate-pulse-ring {
    animation: aid-pulse-ring 2s ease-out infinite;
}

.aid-animate-marquee {
    animation: aid-marquee 30s linear infinite;
}

.aid-animate-rotate-slow {
    animation: aid-rotate-slow 20s linear infinite;
}

.aid-animate-bounce-subtle {
    animation: aid-bounce-subtle 2s ease-in-out infinite;
}

.aid-animate-orbit {
    animation: aid-orbit 10s linear infinite;
}

.aid-animate-morph {
    animation: aid-morph 8s ease-in-out infinite;
}

.aid-animate-gradient {
    animation: aid-gradient-shift 3s ease infinite;
    background-size: 200% 200%;
}

/* Stagger delays - Safely ensure visibility */
.aid-stagger-1 {
    animation-delay: 0.1s;
}

.aid-stagger-2 {
    animation-delay: 0.2s;
}

.aid-stagger-3 {
    animation-delay: 0.3s;
}

.aid-stagger-4 {
    animation-delay: 0.4s;
}

.aid-stagger-5 {
    animation-delay: 0.5s;
}

.aid-stagger-6 {
    animation-delay: 0.6s;
}

.aid-stagger-7 {
    animation-delay: 0.7s;
}

.aid-stagger-8 {
    animation-delay: 0.8s;
}

[class*="aid-stagger-"] {
    animation-fill-mode: both;
    /* Ensure visibility if animation fails to trigger */
    opacity: 1;
}

/* ==========================================================================
   CORE UTILITY CLASSES
   ========================================================================== */

/* Glass effect */
.aid-glass {
    background: hsl(var(--aid-background) / 0.8);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid hsl(var(--aid-border) / 0.5);
}

/* Tag/Badge */
.aid-tag {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 500;
    background: hsl(var(--aid-tag));
    color: hsl(var(--aid-tag-foreground));
    transition: transform 0.3s, box-shadow 0.3s;
}

.aid-tag:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px hsl(var(--aid-tag) / 0.3);
}

/* Pricing badges */
.aid-pricing-free {
    background: hsl(142 76% 36% / 0.1);
    color: hsl(142 76% 36%);
    border: 1px solid hsl(142 76% 36% / 0.2);
}

.aid-pricing-freemium {
    background: hsl(217 91% 60% / 0.1);
    color: hsl(217 91% 60%);
    border: 1px solid hsl(217 91% 60% / 0.2);
}

.aid-pricing-paid {
    background: hsl(38 92% 50% / 0.1);
    color: hsl(38 92% 50%);
    border: 1px solid hsl(38 92% 50% / 0.2);
}

.aid-pricing-trial {
    background: hsl(262 83% 58% / 0.1);
    color: hsl(262 83% 58%);
    border: 1px solid hsl(262 83% 58% / 0.2);
}

/* Shine effect for cards */
.aid-shine-effect {
    position: relative;
    overflow: visible !important;
}

.aid-shine-effect::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: var(--aid-gradient-shine);
    animation: aid-shine 3s infinite;
    pointer-events: none;
}

/* Hover lift effect */
.aid-hover-lift {
    transition: transform 0.3s, box-shadow 0.3s;
}

.aid-hover-lift:hover {
    transform: translateY(-6px);
    box-shadow: var(--aid-shadow-hover);
}

/* Card interactive */
.aid-card-interactive {
    transition: all 0.3s ease;
    border: 1px solid hsl(var(--aid-border));
}

.aid-card-interactive:hover {
    transform: translateY(-4px);
    box-shadow: var(--aid-shadow-hover);
    border-color: hsl(var(--aid-foreground) / 0.1);
}

/* Link underline animation */
.aid-link-underline {
    position: relative;
}

.aid-link-underline::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: currentColor;
    transition: width 0.3s;
}

.aid-link-underline:hover::after {
    width: 100%;
}

/* Scrollbar hide */
.aid-scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.aid-scrollbar-hide::-webkit-scrollbar {
    display: none;
}

/* ==========================================================================
   TYPOGRAPHY
   ========================================================================== */
.aid-font-display {
    font-family: var(--aid-font-display);
}

.aid-font-body {
    font-family: var(--aid-font-body);
}

/* ==========================================================================
   LAYOUT HELPERS
   ========================================================================== */
.aid-container {
    width: 100%;
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

/* Hero gradient background */
.aid-hero-gradient {
    background: var(--aid-gradient-hero);
}

/* Card gradient background */
.aid-card-gradient {
    background: var(--aid-gradient-card);
}

/* ==========================================================================
   FLOATING PARTICLES (Used in Hero and Tool Detail)
   ========================================================================== */
.aid-floating-particles {
    position: absolute;
    inset: 0;
    overflow: visible !important;
    pointer-events: none;
}

.aid-particle {
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: hsl(var(--aid-foreground) / 0.3);
    animation: aid-float 6s ease-in-out infinite;
}

.aid-particle:nth-child(1) {
    left: 20%;
    top: 25%;
    animation-delay: 0s;
    animation-duration: 4s;
}

.aid-particle:nth-child(2) {
    left: 35%;
    top: 55%;
    animation-delay: 0.5s;
    animation-duration: 5s;
}

.aid-particle:nth-child(3) {
    left: 50%;
    top: 30%;
    animation-delay: 1s;
    animation-duration: 6s;
}

.aid-particle:nth-child(4) {
    left: 65%;
    top: 60%;
    animation-delay: 1.5s;
    animation-duration: 4.5s;
}

.aid-particle:nth-child(5) {
    left: 80%;
    top: 35%;
    animation-delay: 2s;
    animation-duration: 5.5s;
}

.aid-particle:nth-child(6) {
    left: 25%;
    top: 70%;
    animation-delay: 2.5s;
    animation-duration: 7s;
}

/* ==========================================================================
   PULSE RING ANIMATION (Category Hero)
   ========================================================================== */
.aid-pulse-ring-container {
    position: relative;
}

.aid-pulse-ring {
    position: absolute;
    inset: 0;
    border-radius: 1.5rem;
    opacity: 0.4;
    animation: aid-pulse-ring 2s ease-out infinite;
}

.aid-pulse-ring:nth-child(2) {
    animation-delay: 0.5s;
    opacity: 0.3;
}

.aid-pulse-ring:nth-child(3) {
    animation-delay: 1s;
    opacity: 0.2;
}

/* ==========================================================================
   ADSENSE SLOTS
   ========================================================================== */
.aid-adsense-slot {
    width: 100%;
    background: hsl(var(--aid-muted) / 0.5);
    border: 2px dashed hsl(var(--aid-border));
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: hsl(var(--aid-muted-foreground));
    font-size: 0.875rem;
    font-weight: 500;
}

.aid-adsense-horizontal {
    min-height: 90px;
}

.aid-adsense-rectangle {
    min-height: 250px;
}

.aid-adsense-vertical {
    min-height: 600px;
}

/* ==========================================================================
   TOOL CARD V3 - GRID VIEW
   ========================================================================== */
.aid-tool-card-grid {
    position: relative;
    display: flex;
    flex-direction: column;
    background: hsl(var(--aid-card));
    border-radius: 1rem;
    overflow: visible !important;
    height: 100%;
}

.aid-tool-card-grid .aid-card-gradient-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, hsl(var(--aid-primary) / 0.05), transparent, hsl(var(--aid-accent) / 0.05));
    opacity: 0;
    transition: opacity 0.5s;
    pointer-events: none;
}

.aid-tool-card-grid:hover .aid-card-gradient-overlay {
    opacity: 1;
}

.aid-tool-card-grid .aid-card-shine {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.5s;
    overflow: hidden;
    pointer-events: none;
}

.aid-tool-card-grid:hover .aid-card-shine {
    opacity: 1;
}

.aid-tool-card-grid .aid-card-shine::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg, transparent, hsl(0 0% 100% / 0.1), transparent);
    transform: skewX(-12deg);
    animation: aid-shine 1.5s ease-in-out;
}

/* Card Header */
.aid-card-header {
    position: relative;
    padding: 1.5rem 1.5rem 1rem;
    text-align: center;
}

.aid-card-badges {
    position: absolute;
    top: 1rem;
    right: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    z-index: 2;
}

.aid-badge-trending {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.625rem;
    background: linear-gradient(135deg, #f97316, #ef4444);
    border-radius: 9999px;
    color: white;
    font-size: 0.6875rem;
    font-weight: 500;
}

.aid-badge-featured {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.625rem;
    background: hsl(var(--aid-primary) / 0.1);
    border: 1px solid hsl(var(--aid-primary) / 0.2);
    border-radius: 9999px;
    color: hsl(var(--aid-primary));
    font-size: 0.6875rem;
    font-weight: 500;
}

/* Icon Wrapper */
.aid-card-icon-wrapper {
    position: relative;
    width: 5rem;
    height: 5rem;
    margin: 0 auto 1rem;
}

.aid-card-icon-glow {
    position: absolute;
    inset: 0;
    border-radius: 1rem;
    background: linear-gradient(135deg, hsl(var(--aid-primary)), hsl(var(--aid-accent)));
    opacity: 0.2;
    filter: blur(20px);
    transition: transform 0.5s;
}

.aid-tool-card-grid:hover .aid-card-icon-glow {
    transform: scale(1.5);
}

.aid-card-icon-ring {
    position: absolute;
    inset: 0;
    border-radius: 1rem;
    border: 2px dashed hsl(var(--aid-primary) / 0.3);
    opacity: 0;
    transition: all 0.7s;
}

.aid-tool-card-grid:hover .aid-card-icon-ring {
    opacity: 1;
    transform: rotate(180deg) scale(1.25);
}

.aid-card-icon {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 1rem;
    background: linear-gradient(135deg, hsl(var(--aid-secondary)), hsl(var(--aid-muted)));
    border: 1px solid hsl(var(--aid-border));
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s, border-color 0.3s;
}

.aid-tool-card-grid:hover .aid-card-icon {
    transform: scale(1.1);
    border-color: hsl(var(--aid-primary) / 0.3);
}

.aid-card-icon img {
    width: 3rem;
    height: 3rem;
    object-fit: contain;
    transition: transform 0.3s;
}

.aid-tool-card-grid:hover .aid-card-icon img {
    transform: scale(1.1);
}

.aid-card-icon i {
    font-size: 2rem;
    color: hsl(var(--aid-muted-foreground));
}

/* Card Title */
.aid-card-title {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0 0 0.25rem;
    line-height: 1.3;
}

.aid-card-title a {
    color: hsl(var(--aid-foreground));
    text-decoration: none;
    transition: color 0.3s;
}

.aid-tool-card-grid:hover .aid-card-title a {
    color: hsl(var(--aid-primary));
}

/* Rating */
.aid-card-rating {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    margin-bottom: 0.75rem;
}

.aid-stars {
    display: flex;
    gap: 0.125rem;
}

.aid-stars i {
    font-size: 0.875rem;
    color: hsl(var(--aid-muted));
}

.aid-stars i.filled {
    color: #fbbf24;
}

.aid-rating-value {
    font-size: 0.875rem;
    font-weight: 500;
    color: hsl(var(--aid-foreground));
}

.aid-rating-votes {
    font-size: 0.75rem;
    color: hsl(var(--aid-muted-foreground));
}

/* Card Body */
.aid-card-body {
    padding: 0 1.5rem 1rem;
    flex-grow: 1;
}

.aid-card-body p {
    font-size: 0.875rem;
    color: hsl(var(--aid-muted-foreground));
    text-align: center;
    line-height: 1.5;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: visible !important;
}

/* Tags */
.aid-card-tags {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.375rem;
    padding: 0 1.5rem 1rem;
}

.aid-card-tag {
    padding: 0.25rem 0.625rem;
    font-size: 0.75rem;
    background: hsl(var(--aid-secondary));
    border-radius: 9999px;
    color: hsl(var(--aid-muted-foreground));
    border: 1px solid hsl(var(--aid-border));
}

/* Card Footer */
.aid-card-footer {
    padding: 0 1.5rem 1.5rem;
}

.aid-card-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.aid-pricing-badge {
    padding: 0.25rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 500;
    border-radius: 9999px;
    text-transform: capitalize;
}

.aid-view-count {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.875rem;
    color: hsl(var(--aid-muted-foreground));
}

/* Last Updated Badge */
.aid-updated-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.625rem;
    background: hsla(0, 0%, 100%, 0.05);
    border: 1px solid hsla(0, 0%, 100%, 0.1);
    border-radius: 20px;
    color: hsl(var(--aid-muted-foreground));
    font-size: 0.75rem;
    font-weight: 500;
}

.aid-updated-badge svg {
    opacity: 0.7;
}

.aid-updated-badge.aid-fresh {
    background: linear-gradient(135deg, hsla(142, 70%, 45%, 0.15), hsla(142, 70%, 35%, 0.1));
    border-color: hsla(142, 70%, 45%, 0.25);
    color: hsl(142 70% 50%);
}

.aid-updated-badge.aid-fresh svg {
    animation: aid-spin-slow 3s linear infinite;
    opacity: 1;
}

@keyframes aid-spin-slow {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* Expert Verified Badge */
.aid-expert-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.625rem;
    background: linear-gradient(135deg, hsla(45, 100%, 50%, 0.2), hsla(35, 100%, 45%, 0.1));
    border: 1px solid hsla(45, 100%, 50%, 0.3);
    border-radius: 20px;
    color: hsl(45 100% 55%);
    font-size: 0.75rem;
    font-weight: 600;
}

.aid-expert-badge svg {
    color: hsl(45 100% 50%);
}

/* Action Buttons */
.aid-card-actions {
    display: flex;
    gap: 0.5rem;
}

.aid-btn-like,
.aid-btn-bookmark {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.625rem;
    background: hsl(var(--aid-secondary));
    border: 1px solid hsl(var(--aid-border));
    border-radius: 0.75rem;
    color: hsl(var(--aid-foreground));
    cursor: pointer;
    transition: all 0.3s;
}

.aid-btn-like:hover {
    background: hsl(0 84% 60% / 0.1);
    border-color: hsl(0 84% 60% / 0.3);
    color: hsl(0 84% 60%);
}

.aid-btn-like.liked {
    background: hsl(0 84% 60% / 0.1);
    border-color: hsl(0 84% 60% / 0.3);
    color: hsl(0 84% 60%);
}

.aid-btn-like.liked i {
    font-weight: 900;
}

.aid-btn-bookmark:hover {
    background: hsl(var(--aid-primary) / 0.1);
    border-color: hsl(var(--aid-primary) / 0.3);
    color: hsl(var(--aid-primary));
}

.aid-btn-bookmark.bookmarked {
    background: hsl(var(--aid-primary) / 0.1);
    border-color: hsl(var(--aid-primary) / 0.3);
    color: hsl(var(--aid-primary));
}

.aid-btn-bookmark.bookmarked i {
    font-weight: 900;
}

.aid-btn-visit {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    background: hsl(var(--aid-primary));
    color: hsl(var(--aid-primary-foreground));
    border-radius: 0.75rem;
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.3s;
}

.aid-btn-visit:hover {
    opacity: 0.9;
}

.aid-like-count {
    font-size: 0.875rem;
    font-weight: 500;
}

/* ==========================================================================
   TOOL CARD V3 - LIST VIEW
   ========================================================================== */
.aid-tool-card-list {
    position: relative;
    background: hsl(var(--aid-card));
    border-radius: 1rem;
    overflow: visible !important;
}

.aid-tool-card-list .aid-card-gradient-overlay,
.aid-tool-card-list .aid-card-shine {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.aid-card-badges-list {
    position: absolute;
    top: 1rem;
    left: 1rem;
    display: flex;
    gap: 0.5rem;
    z-index: 2;
}

.aid-list-content {
    position: relative;
    padding: 1.5rem;
}

.aid-list-header {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1rem;
}

.aid-list-icon-wrapper {
    position: relative;
    flex-shrink: 0;
}

.aid-list-icon-glow {
    position: absolute;
    inset: 0;
    border-radius: 1rem;
    background: linear-gradient(135deg, hsl(var(--aid-primary)), hsl(var(--aid-accent)));
    opacity: 0.2;
    filter: blur(20px);
    transition: transform 0.5s;
}

.aid-tool-card-list:hover .aid-list-icon-glow {
    transform: scale(1.5);
}

.aid-list-icon {
    position: relative;
    width: 5rem;
    height: 5rem;
    border-radius: 1rem;
    background: linear-gradient(135deg, hsl(var(--aid-secondary)), hsl(var(--aid-muted)));
    border: 1px solid hsl(var(--aid-border));
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
}

.aid-tool-card-list:hover .aid-list-icon {
    border-color: hsl(var(--aid-primary) / 0.3);
    transform: scale(1.05);
}

.aid-list-icon img {
    width: 3rem;
    height: 3rem;
    object-fit: contain;
}

.aid-list-title-block {
    flex: 1;
    min-width: 0;
    padding-top: 0.5rem;
}

.aid-list-title {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0 0 0.25rem;
}

.aid-list-title a {
    color: hsl(var(--aid-foreground));
    text-decoration: none;
    transition: color 0.3s;
}

.aid-tool-card-list:hover .aid-list-title a {
    color: hsl(var(--aid-primary));
}

.aid-list-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
}

.aid-list-rating {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.aid-list-rating i {
    color: #fbbf24;
}

.aid-rating-reviews {
    font-size: 0.875rem;
    color: hsl(var(--aid-muted-foreground));
}

.aid-list-actions-top {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
}

.aid-list-description {
    font-size: 0.875rem;
    color: hsl(var(--aid-muted-foreground));
    line-height: 1.6;
    margin: 0 0 1rem;
}

.aid-list-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.aid-list-tag {
    padding: 0.25rem 0.625rem;
    font-size: 0.75rem;
    background: hsl(var(--aid-secondary));
    border-radius: 9999px;
    color: hsl(var(--aid-muted-foreground));
    cursor: pointer;
    transition: all 0.3s;
}

.aid-list-tag:hover {
    background: hsl(var(--aid-primary) / 0.1);
    color: hsl(var(--aid-primary));
}

/* Pros/Cons */
.aid-list-pros-cons {
    max-height: 0;
    overflow: visible !important;
    transition: max-height 0.3s ease;
}

.aid-list-pros-cons[data-expanded="true"] {
    max-height: 24rem;
}

.aid-pros-cons-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    padding: 1rem 0;
    border-top: 1px solid hsl(var(--aid-border));
}

.aid-pros-column h4,
.aid-cons-column h4 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    margin: 0 0 0.5rem;
}

.aid-pros-column h4 {
    color: hsl(142 76% 36%);
}

.aid-cons-column h4 {
    color: hsl(0 84% 60%);
}

.aid-pros-column ul,
.aid-cons-column ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.aid-pros-column li,
.aid-cons-column li {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-size: 0.75rem;
    color: hsl(var(--aid-muted-foreground));
    margin-bottom: 0.375rem;
}

.aid-bullet {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    margin-top: 0.375rem;
    flex-shrink: 0;
}

.aid-bullet-pro {
    background: hsl(142 76% 36%);
}

.aid-bullet-con {
    background: hsl(0 84% 60%);
}

/* Footer */
.aid-list-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 1rem;
    border-top: 1px solid hsl(var(--aid-border));
}

.aid-list-stats {
    display: flex;
    gap: 1rem;
}

.aid-stat-item {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.875rem;
    color: hsl(var(--aid-muted-foreground));
}

.aid-list-actions-bottom {
    display: flex;
    gap: 0.5rem;
}

.aid-btn-toggle-pros {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.375rem 0.75rem;
    background: hsl(var(--aid-secondary));
    border: none;
    border-radius: 0.5rem;
    font-size: 0.75rem;
    color: hsl(var(--aid-foreground));
    cursor: pointer;
    transition: background 0.3s;
}

.aid-btn-toggle-pros:hover {
    background: hsl(var(--aid-muted));
}

.aid-btn-visit-list {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: hsl(var(--aid-primary));
    color: hsl(var(--aid-primary-foreground));
    border-radius: 0.75rem;
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.3s;
}

.aid-btn-visit-list:hover {
    transform: scale(1.05);
}

/* ==========================================================================
   TOOLS CONTAINER (Grid/List toggle)
   ========================================================================== */
.aid-tools-container {
    display: grid;
    gap: 1.5rem;
}

.aid-tools-container.aid-grid-view {
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
}

.aid-tools-container.aid-list-view {
    grid-template-columns: 1fr;
}

.aid-tools-container.aid-list-view .aid-tool-card-grid {
    display: none;
}

.aid-tools-container.aid-grid-view .aid-tool-card-list {
    display: none;
}

/* ==========================================================================
   THEME TOGGLE BUTTON
   ========================================================================== */
.aid-theme-toggle {
    position: relative;
    width: 3.5rem;
    height: 2rem;
    border-radius: 9999px;
    background: hsl(var(--aid-secondary));
    border: 1px solid hsl(var(--aid-border));
    cursor: pointer;
    transition: all 0.3s;
}

.aid-theme-toggle:hover {
    box-shadow: var(--aid-shadow-soft);
}

.aid-toggle-knob {
    position: absolute;
    top: 0.25rem;
    left: 0.25rem;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background: hsl(var(--aid-primary));
    box-shadow: 0 2px 4px hsl(0 0% 0% / 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: left 0.3s;
}

.aid-toggle-knob i {
    font-size: 0.75rem;
    color: hsl(var(--aid-primary-foreground));
}

/* Responsive */
@media (max-width: 768px) {
    .aid-list-header {
        flex-wrap: wrap;
    }

    .aid-list-actions-top {
        width: 100%;
        justify-content: flex-end;
        margin-top: 0.5rem;
    }

    .aid-pros-cons-grid {
        grid-template-columns: 1fr;
    }

    .aid-list-footer {
        flex-direction: column;
        gap: 1rem;
        align-items: stretch;
    }

    .aid-list-stats {
        justify-content: center;
    }

    .aid-list-actions-bottom {
        justify-content: center;
    }
}

/* ==========================================================================
   CATEGORY ARCHIVE PAGE - HERO
   ========================================================================== */
.aid-category-archive {
    min-height: 100vh;
    background: hsl(var(--aid-background));
}

.aid-breadcrumb-bar {
    background: hsl(var(--aid-muted) / 0.5);
    border-bottom: 1px solid hsl(var(--aid-border));
    padding: 0.75rem 0;
}

.aid-breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
}

.aid-breadcrumb-link {
    color: hsl(var(--aid-muted-foreground));
    text-decoration: none;
    transition: color 0.3s;
}

.aid-breadcrumb-link:hover {
    color: hsl(var(--aid-foreground));
}

.aid-breadcrumb-sep {
    color: hsl(var(--aid-muted-foreground));
    font-size: 0.75rem;
}

.aid-breadcrumb-current {
    color: hsl(var(--aid-foreground));
    font-weight: 500;
}

/* Category Hero */
.aid-category-hero {
    position: relative;
    padding: 4rem 0;
    overflow: visible !important;
}

.aid-hero-bg-blob {
    position: absolute;
    width: 24rem;
    height: 24rem;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.1;
    pointer-events: none;
}

.aid-hero-bg-blob-1 {
    top: 5rem;
    right: 5rem;
}

.aid-hero-bg-blob-2 {
    bottom: 5rem;
    left: 5rem;
    width: 18rem;
    height: 18rem;
}

.aid-hero-content {
    position: relative;
    max-width: 48rem;
    margin: 0 auto;
    text-align: center;
}

.aid-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: hsl(var(--aid-muted-foreground));
    text-decoration: none;
    font-size: 0.875rem;
    margin-bottom: 1.5rem;
    transition: color 0.3s;
}

.aid-back-btn:hover {
    color: hsl(var(--aid-foreground));
}

/* Category Icon Animation */
.aid-category-icon-wrapper {
    position: relative;
    width: 8rem;
    height: 8rem;
    margin: 0 auto 1.5rem;
}

.aid-category-icon {
    position: absolute;
    inset: 1rem;
    border-radius: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 2.5rem;
    box-shadow: 0 24px 48px -12px rgba(0, 0, 0, 0.2);
    animation: aid-float 6s ease-in-out infinite;
    z-index: 2;
}

.aid-category-icon-wrapper .aid-pulse-ring {
    position: absolute;
    inset: 1rem;
    border-radius: 1.5rem;
    opacity: 0.4;
    z-index: 1;
}

.aid-hero-title {
    font-size: 2.5rem;
    font-weight: 700;
    margin: 0 0 1rem;
    color: hsl(var(--aid-foreground));
}

.aid-hero-description {
    font-size: 1.125rem;
    color: hsl(var(--aid-muted-foreground));
    max-width: 36rem;
    margin: 0 auto 1.5rem;
    line-height: 1.6;
    opacity: 0;
}

.aid-hero-stats {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1.5rem;
    margin-bottom: 2rem;
    opacity: 0;
}

.aid-stat {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: hsl(var(--aid-muted-foreground));
}

.aid-stat i {
    color: hsl(var(--aid-primary));
}

.aid-stat-highlight {
    color: hsl(142 76% 36%);
}

.aid-stat-highlight i {
    color: hsl(142 76% 36%);
}

/* Hero Search */
.aid-hero-search {
    position: relative;
    max-width: 32rem;
    margin: 0 auto;
    opacity: 0;
}

.aid-hero-search i {
    position: absolute;
    left: 1.25rem;
    top: 50%;
    transform: translateY(-50%);
    color: hsl(var(--aid-muted-foreground));
    transition: color 0.3s;
}

.aid-search-input {
    width: 100%;
    padding: 1rem 1rem 1rem 3rem;
    background: hsl(var(--aid-card));
    border: 1px solid hsl(var(--aid-border));
    border-radius: 1rem;
    font-size: 1rem;
    color: hsl(var(--aid-foreground));
    transition: all 0.3s;
    box-shadow: var(--aid-shadow-soft);
}

.aid-search-input:focus {
    outline: none;
    border-color: hsl(var(--aid-primary) / 0.5);
    box-shadow: 0 0 0 4px hsl(var(--aid-primary) / 0.1);
}

.aid-search-input:focus+i,
.aid-hero-search:focus-within i {
    color: hsl(var(--aid-primary));
}

.aid-search-input::placeholder {
    color: hsl(var(--aid-muted-foreground));
}

/* ==========================================================================
   FILTER BAR
   ========================================================================== */
.aid-filter-section {
    padding: 1.5rem 0;
    border-bottom: 1px solid hsl(var(--aid-border));
}

.aid-filter-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    padding: 1rem 1.5rem;
    border-radius: 1rem;
}

.aid-filter-left {
    font-size: 0.875rem;
    color: hsl(var(--aid-muted-foreground));
}

.aid-filter-left strong {
    color: hsl(var(--aid-foreground));
}

.aid-filter-right {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}

.aid-filter-group {
    display: flex;
    gap: 0.5rem;
}

.aid-filter-btn {
    padding: 0.5rem 1rem;
    background: hsl(var(--aid-secondary));
    border: 1px solid hsl(var(--aid-border));
    border-radius: 9999px;
    font-size: 0.875rem;
    font-weight: 500;
    color: hsl(var(--aid-foreground));
    cursor: pointer;
    transition: all 0.3s;
}

.aid-filter-btn:hover {
    border-color: hsl(var(--aid-primary) / 0.5);
}

.aid-filter-btn.active {
    background: hsl(var(--aid-primary));
    border-color: hsl(var(--aid-primary));
    color: hsl(var(--aid-primary-foreground));
}

.aid-filter-btn .aid-count {
    margin-left: 0.25rem;
    opacity: 0.7;
}

/* Premium Sort Dropdown (Inspired by Main Directory) */
.aid-sort-dropdown {
    position: relative;
    min-width: 180px;
}

.aid-sort-toggle {
    width: 100%;
    height: 2.75rem;
    padding: 0 1rem;
    background: hsl(var(--aid-secondary));
    border: 1px solid hsl(var(--aid-border));
    border-radius: 0.875rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 600;
    color: hsl(var(--aid-foreground));
    transition: all 0.2s ease;
}

.aid-sort-toggle:hover {
    border-color: hsl(var(--aid-primary) / 0.5);
    background: hsl(var(--aid-muted) / 0.5);
}

.aid-sort-toggle i {
    font-size: 0.75rem;
    color: hsl(var(--aid-muted-foreground));
    transition: transform 0.3s ease;
}

.aid-sort-toggle[aria-expanded="true"] i {
    transform: rotate(180deg);
}

.aid-sort-menu {
    position: absolute;
    top: calc(100% + 0.5rem);
    right: 0;
    width: 220px;
    background: hsl(var(--aid-card));
    border: 1px solid hsl(var(--aid-border));
    border-radius: 1rem;
    box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.2);
    padding: 0.5rem;
    list-style: none;
    z-index: 1000;
    display: none;
    flex-direction: column;
    gap: 0.25rem;
    margin: 0;
}

.aid-sort-menu.show {
    display: flex;
    animation: aid-dropdown-slide 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes aid-dropdown-slide {
    from {
        opacity: 0;
        transform: translateY(-10px) scale(0.95);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.aid-sort-option {
    padding: 0.625rem 0.875rem;
    border-radius: 0.75rem;
    font-size: 0.875rem;
    color: hsl(var(--aid-muted-foreground));
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.aid-sort-option:hover {
    background: hsl(var(--aid-primary) / 0.05);
    color: hsl(var(--aid-foreground));
}

.aid-sort-option.active {
    background: hsl(var(--aid-primary) / 0.1);
    color: hsl(var(--aid-primary));
    font-weight: 700;
}

.aid-sort-option.active::after {
    content: '\f00c';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: 0.75rem;
}

.aid-view-toggle {
    display: flex;
    background: hsl(var(--aid-card));
    border: 1px solid hsl(var(--aid-border));
    border-radius: 0.75rem;
    padding: 0.25rem;
}

.aid-view-toggle button {
    padding: 0.5rem;
    background: transparent;
    border: none;
    border-radius: 0.5rem;
    color: hsl(var(--aid-muted-foreground));
    cursor: pointer;
    transition: all 0.3s;
}

.aid-view-toggle button:hover {
    color: hsl(var(--aid-foreground));
}

.aid-view-toggle button.active {
    background: hsl(var(--aid-primary));
    color: hsl(var(--aid-primary-foreground));
}

/* ==========================================================================
   TOOLS SECTION
   ========================================================================== */
.aid-tools-section {
    padding: 2rem 0;
}

.aid-empty-state {
    text-align: center;
    padding: 5rem 2rem;
    background: hsl(var(--aid-card));
    border-radius: 1rem;
    border: 1px solid hsl(var(--aid-border));
}

.aid-empty-icon {
    width: 5rem;
    height: 5rem;
    margin: 0 auto 1rem;
    background: hsl(var(--aid-muted));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: hsl(var(--aid-muted-foreground));
}

.aid-empty-state h3 {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0 0 0.5rem;
}

.aid-empty-state p {
    color: hsl(var(--aid-muted-foreground));
    margin: 0;
}

/* ==========================================================================
   RELATED CATEGORIES
   ========================================================================== */
.aid-related-section {
    padding: 3rem 0;
    background: hsl(var(--aid-muted) / 0.5);
    border-top: 1px solid hsl(var(--aid-border));
}

.aid-section-title {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0 0 1.5rem;
    color: hsl(var(--aid-foreground));
}

.aid-related-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
}

.aid-related-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: hsl(var(--aid-card));
    border-radius: 0.75rem;
    text-decoration: none;
    color: hsl(var(--aid-foreground));
    opacity: 0;
}

.aid-related-icon {
    width: 3rem;
    height: 3rem;
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.25rem;
    flex-shrink: 0;
    transition: transform 0.3s;
}

.aid-related-card:hover .aid-related-icon {
    transform: scale(1.1);
}

.aid-related-info {
    flex: 1;
    min-width: 0;
}

.aid-related-info h3 {
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 0.25rem;
    transition: color 0.3s;
}

.aid-related-card:hover .aid-related-info h3 {
    color: hsl(var(--aid-primary));
}

.aid-related-info span {
    font-size: 0.875rem;
    color: hsl(var(--aid-muted-foreground));
}

.aid-related-arrow {
    color: hsl(var(--aid-muted-foreground));
    transition: transform 0.3s, color 0.3s;
}

.aid-related-card:hover .aid-related-arrow {
    transform: translateX(4px);
    color: hsl(var(--aid-primary));
}

/* ==========================================================================
   CTA SECTION
   ========================================================================== */
.aid-cta-section {
    padding: 3rem 0;
}

.aid-cta-card {
    position: relative;
    padding: 3rem;
    background: hsl(var(--aid-card));
    border-radius: 1.5rem;
    overflow: visible !important;
}

.aid-cta-bg {
    position: absolute;
    top: 0;
    right: 0;
    width: 24rem;
    height: 24rem;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.1;
    pointer-events: none;
}

.aid-cta-content {
    position: relative;
    max-width: 36rem;
}

.aid-cta-content h2 {
    font-size: 2rem;
    font-weight: 700;
    margin: 0 0 1rem;
    color: hsl(var(--aid-foreground));
}

.aid-cta-content p {
    font-size: 1.125rem;
    color: hsl(var(--aid-muted-foreground));
    line-height: 1.6;
    margin: 0 0 1.5rem;
}

.aid-cta-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.aid-btn-outline {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: transparent;
    border: 1px solid hsl(var(--aid-border));
    border-radius: 0.75rem;
    color: hsl(var(--aid-foreground));
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.3s;
}

.aid-btn-outline:hover {
    border-color: hsl(var(--aid-primary));
    color: hsl(var(--aid-primary));
}

/* ==========================================================================
   RESPONSIVE - CATEGORY ARCHIVE
   ========================================================================== */
@media (max-width: 768px) {
    .aid-category-hero {
        padding: 2rem 0;
    }

    .aid-hero-title {
        font-size: 1.75rem;
    }

    .aid-hero-description {
        font-size: 1rem;
    }

    .aid-category-icon-wrapper {
        width: 6rem;
        height: 6rem;
    }

    .aid-category-icon {
        font-size: 1.75rem;
    }

    .aid-filter-bar {
        flex-direction: column;
        align-items: stretch;
    }

    .aid-filter-right {
        flex-direction: column;
    }

    .aid-filter-group {
        flex-wrap: wrap;
    }

    .aid-cta-card {
        padding: 2rem 1.5rem;
    }

    .aid-cta-content h2 {
        font-size: 1.5rem;
    }
}

/* ==========================================================================
   SINGLE TOOL PAGE
   ========================================================================== */
.aid-single-tool {
    min-height: 100vh;
    background: hsl(var(--aid-background));
}

.aid-single-main {
    padding: 2rem 0 4rem;
}

.aid-single-grid {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 2rem;
    align-items: start;
    /* Force visibility for the entire grid */
    opacity: 1 !important;
    visibility: visible !important;
}

.aid-single-content {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    /* Ensure content is always visible */
    opacity: 1 !important;
    visibility: visible !important;
}

.aid-single-sidebar {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    position: sticky;
    top: 2rem;
}

/* Hero Card */
.aid-tool-hero-card {
    position: relative;
    background: hsl(var(--aid-card));
    border-radius: 1.5rem;
    padding: 2.5rem;
    /* overflow: visible !important to allow share dropdown overflow */
    overflow: visible;
}

.aid-hero-card-inner {
    position: relative;
    display: flex;
    gap: 2rem;
    align-items: flex-start;
    z-index: 2;
}

/* Tool Icon with Animations */
.aid-tool-icon-wrapper {
    position: relative;
    width: 7rem;
    height: 7rem;
    flex-shrink: 0;
}

.aid-icon-ring-dashed {
    position: absolute;
    inset: 0;
    border: 2px dashed hsl(var(--aid-border));
    border-radius: 1.25rem;
    opacity: 0.5;
}

.aid-icon-ring-pulse {
    position: absolute;
    inset: 0;
    border: 2px solid hsl(var(--aid-primary) / 0.2);
    border-radius: 1.25rem;
}

.aid-tool-icon {
    position: absolute;
    inset: 0.5rem;
    border-radius: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible !important;
}

.aid-tool-icon img {
    width: 4rem;
    height: 4rem;
    object-fit: contain;
}

.aid-tool-icon i {
    font-size: 2.5rem;
    color: white;
}

.aid-icon-glow {
    position: absolute;
    inset: 0;
    border-radius: 1rem;
    filter: blur(30px);
    opacity: 0.3;
    z-index: -1;
}

/* Tool Info */
.aid-tool-info {
    flex: 1;
}

.aid-tool-name {
    font-size: 2rem;
    font-weight: 700;
    margin: 0 0 0.75rem;
    color: hsl(var(--aid-foreground));
}

.aid-tool-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

.aid-btn-visit-hero {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem 1.75rem;
    background: linear-gradient(135deg, #7c3aed, #6d28d9) !important;
    color: #ffffff !important;
    border-radius: 12px;
    font-weight: 700;
    text-decoration: none !important;
    margin-bottom: 1.5rem;
    transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
    box-shadow: 0 4px 15px -4px rgba(124, 58, 237, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.aid-btn-visit-hero:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px -5px rgba(124, 58, 237, 0.6);
    filter: brightness(1.1);
    color: #ffffff !important;
}

.aid-tool-short-desc {
    font-size: 1rem;
    line-height: 1.6;
    color: hsl(var(--aid-muted-foreground));
    margin: 0;
}

/* Hero Action Buttons */
.aid-hero-actions {
    position: relative;
    display: flex;
    gap: 0.75rem;
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid hsl(var(--aid-border));
    z-index: 2;
}

.aid-hero-actions button {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    background: hsl(var(--aid-secondary));
    border: 1px solid hsl(var(--aid-border));
    border-radius: 0.75rem;
    color: hsl(var(--aid-foreground));
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.3s;
}

.aid-hero-actions button:hover {
    background: hsl(var(--aid-muted));
}

/* Content Sections */
.aid-content-section {
    background: hsl(var(--aid-card));
    border-radius: 1rem;
    padding: 2rem;
    border: 1px solid hsl(var(--aid-border));
}

/* Section Structure */
.aid-content-section {
    background: hsl(var(--aid-card));
    border: 1px solid hsl(var(--aid-border));
    border-radius: var(--aid-radius);
    padding: 1.75rem;
    margin-bottom: 1.5rem;
    box-shadow: var(--aid-shadow-card);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.aid-content-section:hover {
    box-shadow: var(--aid-shadow-soft);
}

.aid-section-title {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0 0 1.5rem;
    color: hsl(var(--aid-foreground));
    letter-spacing: -0.02em;
}

.aid-section-title i {
    font-size: 1.25rem;
}

.aid-section-body {
    font-size: 1.0625rem;
    line-height: 1.85;
    color: hsl(var(--aid-foreground) / 0.9);
    font-family: var(--aid-font-body);
}

.aid-section-body p {
    margin: 0 0 1.25rem;
}

.aid-section-body p:last-child {
    margin-bottom: 0;
}

.aid-section-body strong {
    font-weight: 600;
    color: hsl(var(--aid-foreground));
}

.aid-section-body ul,
.aid-section-body ol {
    margin: 0 0 1.25rem 1.5rem;
}

.aid-section-body li {
    margin-bottom: 0.5rem;
}

.aid-section-body blockquote {
    margin: 2rem 0;
    padding: 1.5rem 2rem;
    border-left: 4px solid hsl(var(--aid-primary));
    background: hsl(var(--aid-muted) / 0.5);
    border-radius: 0 8px 8px 0;
    font-style: italic;
    color: hsl(var(--aid-muted-foreground));
}

/* Feature List Enhanced */
.aid-feature-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.aid-feature-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 1rem;
    background: hsl(var(--aid-muted) / 0.3);
    border-radius: 12px;
    border: 1px solid transparent;
    transition: all 0.3s ease;
}

.aid-feature-item:hover {
    background: hsl(var(--aid-card));
    border-color: hsl(var(--aid-border));
    transform: translateX(6px);
    box-shadow: var(--aid-shadow-soft);
}

.aid-feature-icon {
    width: 2rem;
    height: 2rem;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 0.875rem;
    flex-shrink: 0;
    box-shadow: 0 4px 12px -2px currentColor;
}

.aid-feature-item span {
    font-size: 1rem;
    font-weight: 500;
    color: hsl(var(--aid-foreground));
}

/* Pros/Cons Grid Enhanced */
.aid-pros-cons-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin: 1.5rem 0;
}

.aid-pros-section,
.aid-cons-section {
    padding: 1.25rem;
    background: hsl(var(--aid-card));
    border: 1px solid hsl(var(--aid-border));
    border-radius: 16px;
    box-shadow: var(--aid-shadow-card);
    margin-bottom: 0;
    /* Ensure visibility if it inherits opacity: 0 from .aid-content-section unintentionally */
    opacity: 1 !important;
}

.aid-pros-section {
    border-top: 4px solid hsl(142 76% 36%);
}

.aid-cons-section {
    border-top: 4px solid hsl(0 84% 60%);
}

.aid-pros-list li,
.aid-cons-list li {
    padding: 0.5rem 0;
    border-bottom: 1px solid hsl(var(--aid-border) / 0.5);
}

.aid-pros-list li:last-child,
.aid-cons-list li:last-child {
    border-bottom: none;
}

/* Use Case List Enhanced */
.aid-use-case-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
    list-style: none;
    padding: 0;
}

.aid-use-case-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem;
    background: hsl(var(--aid-surface-elevated));
    border: 1px solid hsl(var(--aid-border));
    border-radius: 12px;
    transition: all 0.3s ease;
}

.aid-use-case-item:hover {
    background: hsl(var(--aid-card));
    transform: translateY(-4px);
    box-shadow: var(--aid-shadow-soft);
}

.aid-use-case-item i {
    color: hsl(38 92% 50%);
    font-size: 1.125rem;
}

/* Consolidated FAQ Styles */
.aid-faq-item {
    border: 1px solid hsl(var(--aid-border));
    border-radius: 12px;
    margin-bottom: 1rem;
    overflow: hidden;
    transition: all 0.3s ease;
}

.aid-faq-item:hover {
    border-color: hsl(var(--aid-primary) / 0.3);
    box-shadow: var(--aid-shadow-card);
}

.aid-faq-item.open {
    border-color: hsl(var(--aid-primary));
}

.aid-faq-trigger {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.5rem;
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: left;
}

.aid-faq-question {
    font-size: 1.125rem;
    font-weight: 600;
    color: hsl(var(--aid-foreground));
}

.aid-faq-icon {
    transition: transform 0.3s ease;
    color: hsl(var(--aid-muted-foreground));
}

.aid-faq-item.open .aid-faq-icon {
    transform: rotate(180deg);
    color: hsl(var(--aid-primary));
}

.aid-faq-content {
    max-height: 0;
    overflow: hidden;
    display: none;
    padding: 0 1.5rem;
    transition: max-height 0.4s ease;
    background: hsl(var(--aid-muted) / 0.2);
}

.aid-faq-item.open .aid-faq-content {
    display: block;
    max-height: 1000px;
    padding: 0 1.5rem 1.5rem;
}

.aid-pros-list li i {
    color: hsl(142 76% 36%);
    font-size: 0.875rem;
    margin-top: 0.125rem;
}

.aid-cons-list li i {
    color: hsl(0 84% 60%);
    font-size: 0.875rem;
    margin-top: 0.125rem;
}

/* Use Case List */
.aid-use-case-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.aid-use-case-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    background: hsl(var(--aid-secondary));
    border-radius: 9999px;
    font-size: 0.875rem;
    color: hsl(var(--aid-foreground));
    animation: aid-slide-up 0.5s ease-out both;
}

.aid-use-case-item i {
    color: hsl(38 92% 50%);
    font-size: 0.75rem;
}

/* FAQ Section Reset */
.aid-faq-section {
    padding: 2rem;
}

.aid-faq-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.aid-faq-content p {
    padding: 0 1.25rem 1rem;
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.6;
    color: hsl(var(--aid-muted-foreground));
}

/* Rating Card */
/* Rating Card (Styles moved to enhanced section below) */

.aid-rating-list {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.aid-rating-item {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* Rating Header Reset */
.aid-rating-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.aid-rating-bar {
    height: 0.5rem;
    background: hsl(var(--aid-secondary));
    border-radius: 9999px;
    overflow: hidden;
}

.aid-rating-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, hsl(var(--aid-primary)), hsl(var(--aid-accent)));
    border-radius: 9999px;
    transition: width 1s ease-out;
}

/* Sidebar Cards General */
.aid-card-interactive {
    background: hsl(var(--aid-card));
    border: 1px solid hsl(var(--aid-border));
    border-radius: 20px;
    padding: 1.5rem;
    margin-bottom: 2rem;
    box-shadow: var(--aid-shadow-card);
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
    position: relative;
    overflow: visible !important;
}

.aid-card-interactive:hover {
    transform: translateY(-6px);
    box-shadow: var(--aid-shadow-hover);
    border-color: hsl(var(--aid-primary) / 0.3);
}

/* Rating Card Enhanced */
.aid-rating-card {
    background: linear-gradient(135deg, hsl(var(--aid-card)), hsl(var(--aid-muted) / 0.3));
}

.aid-rating-title {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    color: hsl(var(--aid-foreground));
    letter-spacing: -0.01em;
}

.aid-rating-list {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.aid-rating-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}

.aid-rating-label {
    font-size: 0.9375rem;
    font-weight: 500;
    color: hsl(var(--aid-foreground) / 0.8);
}

.aid-rating-value {
    font-size: 0.9375rem;
    font-weight: 700;
    color: hsl(var(--aid-primary));
}

.aid-rating-bar {
    height: 8px;
    background: hsl(var(--aid-muted));
    border-radius: 9999px;
    overflow: hidden;
}

.aid-rating-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, hsl(var(--aid-primary)), hsl(var(--aid-primary) / 0.7));
    border-radius: 9999px;
    transition: width 1s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 0 12px hsl(var(--aid-primary) / 0.3);
}

/* Related Tools Enhanced */
.aid-related-tools-card h4 {
    margin-bottom: 1.25rem;
    font-weight: 700;
}

.aid-related-tools-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.aid-related-tool-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    background: hsl(var(--aid-muted) / 0.2);
    border-radius: 12px;
    border: 1px solid transparent;
    transition: all 0.3s ease;
    text-decoration: none !important;
}

.aid-related-tool-item:hover {
    background: hsl(var(--aid-card));
    border-color: hsl(var(--aid-border));
    transform: translateX(4px);
}

.aid-related-tool-icon {
    width: 2.5rem;
    height: 2.5rem;
    background: hsl(var(--aid-card));
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible !important;
    border: 1px solid hsl(var(--aid-border));
    flex-shrink: 0;
}

.aid-related-tool-icon img {
    width: 80%;
    height: 80%;
    object-fit: contain;
}

.aid-related-tool-icon i {
    font-size: 1.25rem;
    color: hsl(var(--aid-primary));
}

.aid-related-tool-name {
    flex: 1;
    font-size: 0.9375rem;
    font-weight: 600;
    color: hsl(var(--aid-foreground));
}

.aid-related-tool-arrow {
    font-size: 0.75rem;
    color: hsl(var(--aid-muted-foreground));
    opacity: 0.5;
    transition: all 0.3s ease;
}

.aid-related-tool-item:hover .aid-related-tool-arrow {
    opacity: 1;
    transform: translateX(2px);
    color: hsl(var(--aid-primary));
}

/* Ad Slot Sidebar Polish */
.aid-sidebar-ad {
    background: linear-gradient(135deg, hsl(38 92% 50% / 0.05), hsl(var(--aid-card)));
    border: 1px dashed hsl(38 92% 50% / 0.3);
}

.aid-sidebar-ad h4 {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: hsl(38 92% 50%);
    margin-bottom: 1rem;
}

.aid-sidebar-ad-content {
    font-size: 0.9375rem;
    line-height: 1.6;
    margin-bottom: 1.25rem;
    color: hsl(var(--aid-foreground) / 0.8);
}

/* Related Tools Card (Consolidated) */

.aid-related-tool-item:hover {
    background: hsl(var(--aid-muted));
}

.aid-related-tool-icon {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.5rem;
    background: hsl(var(--aid-card));
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible !important;
    flex-shrink: 0;
}

.aid-related-tool-icon img {
    width: 1.5rem;
    height: 1.5rem;
    object-fit: contain;
}

.aid-related-tool-icon i {
    font-size: 1rem;
    color: hsl(var(--aid-muted-foreground));
}

.aid-related-tool-name {
    flex: 1;
    font-size: 0.875rem;
    font-weight: 500;
    color: hsl(var(--aid-foreground));
}

.aid-related-tool-arrow {
    color: hsl(var(--aid-muted-foreground));
    font-size: 0.75rem;
    transition: transform 0.3s;
}

.aid-related-tool-item:hover .aid-related-tool-arrow {
    transform: translateX(4px);
    color: hsl(var(--aid-primary));
}

/* ==========================================================================
   RESPONSIVE - SINGLE TOOL
   ========================================================================== */
@media (max-width: 1024px) {
    .aid-single-grid {
        grid-template-columns: 1fr;
    }

    .aid-single-sidebar {
        position: static;
        flex-direction: row;
        flex-wrap: wrap;
    }

    .aid-single-sidebar>* {
        flex: 1 1 300px;
    }
}

@media (max-width: 768px) {
    .aid-hero-card-inner {
        flex-direction: column;
        text-align: center;
    }

    .aid-tool-icon-wrapper {
        margin: 0 auto;
    }

    .aid-tool-meta {
        justify-content: center;
    }

    .aid-btn-visit-hero {
        width: 100%;
        justify-content: center;
    }

    .aid-hero-actions {
        flex-wrap: wrap;
        justify-content: center;
    }

    .aid-pros-cons-grid {
        grid-template-columns: 1fr;
    }

    .aid-single-sidebar {
        flex-direction: column;
    }

    .aid-single-sidebar>* {
        flex: 1 1 auto;
    }
}

/* ==========================================================================
   SHARE DROPDOWN & ACTION BUTTONS ENHANCED
   ========================================================================== */

/* Share Wrapper (contains button + dropdown) */
.aid-share-wrapper {
    position: relative;
    display: inline-block;
}

/* Share Dropdown Menu */
.aid-share-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) scale(0.95);
    min-width: 160px;
    background: hsl(var(--aid-card));
    border: 1px solid hsl(var(--aid-border));
    border-radius: 12px;
    box-shadow: var(--aid-shadow-hover);
    padding: 0.5rem 0;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
    z-index: 100;
}

.aid-share-dropdown::before {
    content: '';
    position: absolute;
    top: -6px;
    left: 50%;
    transform: translateX(-50%);
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 6px solid hsl(var(--aid-border));
}

.aid-share-dropdown::after {
    content: '';
    position: absolute;
    top: -5px;
    left: 50%;
    transform: translateX(-50%);
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 5px solid hsl(var(--aid-card));
}

.aid-share-wrapper.aid-dropdown-open .aid-share-dropdown,
.aid-share-dropdown.aid-dropdown-open {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) scale(1);
}

/* Share Options */
.aid-share-option {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.625rem 1rem;
    font-size: 0.875rem;
    color: hsl(var(--aid-foreground));
    background: transparent;
    border: none;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
    text-decoration: none !important;
    text-align: left;
}

.aid-share-option:hover {
    background: hsl(var(--aid-muted));
}

.aid-share-option i {
    width: 18px;
    text-align: center;
    font-size: 1rem;
}

/* Platform-specific colors on hover */
.aid-share-option[data-platform="twitter"]:hover {
    color: #1DA1F2;
}

.aid-share-option[data-platform="facebook"]:hover {
    color: #1877F2;
}

.aid-share-option[data-platform="linkedin"]:hover {
    color: #0A66C2;
}

.aid-share-option[data-platform="whatsapp"]:hover {
    color: #25D366;
}

.aid-share-option[data-platform="email"]:hover {
    color: hsl(38 92% 50%);
}

.aid-share-option[data-platform="copy"]:hover {
    color: hsl(262 83% 58%);
}

/* ==========================================================================
   HELPFUL BUTTON STATES
   ========================================================================== */
.aid-btn-helpful {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: hsl(var(--aid-foreground));
    background: hsl(var(--aid-muted));
    border: 1px solid hsl(var(--aid-border));
    border-radius: 9999px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.aid-btn-helpful:hover:not(:disabled) {
    background: hsl(142 76% 36% / 0.1);
    border-color: hsl(142 76% 36% / 0.3);
    color: hsl(142 76% 36%);
    transform: translateY(-2px);
}

.aid-btn-helpful:active:not(:disabled) {
    transform: scale(0.95);
}

/* Voted State */
.aid-btn-helpful.aid-voted {
    background: hsl(142 76% 36% / 0.15);
    border-color: hsl(142 76% 36% / 0.4);
    color: hsl(142 76% 36%);
    cursor: default;
}

.aid-btn-helpful.aid-voted i {
    color: hsl(142 76% 36%);
}

.aid-btn-helpful:disabled {
    cursor: not-allowed;
    opacity: 0.8;
}

/* Helpful Count Badge */
.aid-helpful-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.5rem;
    padding: 0.125rem 0.375rem;
    font-size: 0.75rem;
    font-weight: 600;
    background: hsl(var(--aid-foreground) / 0.1);
    border-radius: 9999px;
}

.aid-btn-helpful.aid-voted .aid-helpful-count {
    background: hsl(142 76% 36% / 0.2);
}

/* Empty count hidden */
.aid-helpful-count:empty {
    display: none;
}

/* ==========================================================================
   SAVE/BOOKMARK BUTTON
   ========================================================================== */
.aid-btn-bookmark {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: hsl(var(--aid-foreground));
    background: hsl(var(--aid-muted));
    border: 1px solid hsl(var(--aid-border));
    border-radius: 9999px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.aid-btn-bookmark:hover {
    background: hsl(38 92% 50% / 0.1);
    border-color: hsl(38 92% 50% / 0.3);
    color: hsl(38 92% 50%);
    transform: translateY(-2px);
}

.aid-btn-bookmark.aid-saved {
    background: hsl(38 92% 50% / 0.15);
    border-color: hsl(38 92% 50% / 0.4);
    color: hsl(38 92% 50%);
}

.aid-btn-bookmark.aid-saved i {
    font-weight: 900;
}

/* ==========================================================================
   SHARE BUTTON
   ========================================================================== */
.aid-btn-share {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: hsl(var(--aid-foreground));
    background: hsl(var(--aid-muted));
    border: 1px solid hsl(var(--aid-border));
    border-radius: 9999px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.aid-btn-share:hover {
    background: hsl(217 91% 60% / 0.1);
    border-color: hsl(217 91% 60% / 0.3);
    color: hsl(217 91% 60%);
    transform: translateY(-2px);
}

/* ==========================================================================
   TOAST NOTIFICATIONS
   ========================================================================== */
.aid-toast-container {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    pointer-events: none;
}

.aid-toast {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    background: hsl(var(--aid-card));
    border: 1px solid hsl(var(--aid-border));
    border-radius: 12px;
    box-shadow: var(--aid-shadow-hover);
    font-size: 0.875rem;
    font-weight: 500;
    color: hsl(var(--aid-foreground));
    pointer-events: auto;
    animation: aid-slide-up 0.3s ease, aid-fade-out 0.3s ease 2.7s forwards;
}

.aid-toast-success {
    border-left: 4px solid hsl(142 76% 36%);
}

.aid-toast-success i {
    color: hsl(142 76% 36%);
}

.aid-toast-error {
    border-left: 4px solid hsl(0 84% 60%);
}

.aid-toast-error i {
    color: hsl(0 84% 60%);
}

.aid-toast-info {
    border-left: 4px solid hsl(217 91% 60%);
}

.aid-toast-info i {
    color: hsl(217 91% 60%);
}

@keyframes aid-fade-out {
    to {
        opacity: 0;
        transform: translateY(10px);
    }
}

/* ==========================================================================
   MOBILE RESPONSIVE - SHARE & ACTIONS
   ========================================================================== */
@media (max-width: 480px) {
    .aid-hero-actions {
        flex-direction: column;
        gap: 0.75rem;
    }

    .aid-hero-actions>*,
    .aid-share-wrapper {
        width: 100%;
    }

    .aid-btn-bookmark,
    .aid-btn-share,
    .aid-btn-helpful {
        width: 100%;
        justify-content: center;
    }

    .aid-share-dropdown {
        left: 0;
        right: 0;
        transform: scale(0.95);
        width: 100%;
    }

    .aid-share-wrapper.aid-dropdown-open .aid-share-dropdown {
        transform: scale(1);
    }

    .aid-toast-container {
        left: 16px;
        right: 16px;
        bottom: 16px;
    }

    .aid-toast {
        width: 100%;
    }
}

/* ==========================================================================
   RELATED BLOG POSTS CARD (Internal Linking - SEO)
   Premium Modern Design with Glassmorphism
   ========================================================================== */
.aid-related-posts-card {
    position: relative;
    background: linear-gradient(145deg,
            hsl(var(--aid-card)) 0%,
            hsl(var(--aid-muted) / 0.3) 100%);
    border: 1px solid hsl(var(--aid-border) / 0.5);
    border-radius: 1.25rem;
    padding: 0;
    margin-top: 1.5rem;
    overflow: hidden;
    box-shadow:
        0 4px 20px hsl(0 0% 0% / 0.04),
        0 1px 3px hsl(0 0% 0% / 0.02);
    transition: all 0.3s ease;
}

.aid-related-posts-card:hover {
    transform: translateY(-2px);
    box-shadow:
        0 8px 30px hsl(262 83% 58% / 0.08),
        0 2px 8px hsl(0 0% 0% / 0.04);
    border-color: hsl(262 83% 58% / 0.2);
}

/* Card Header with Gradient */
.aid-related-posts-card h4 {
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em;
    margin: 0 !important;
    padding: 1rem 1.25rem !important;
    display: flex;
    align-items: center;
    gap: 0.625rem;
    background: linear-gradient(135deg,
            hsl(262 83% 58% / 0.08) 0%,
            hsl(262 83% 58% / 0.03) 100%);
    border-bottom: 1px solid hsl(var(--aid-border) / 0.3);
    color: hsl(262 83% 45%) !important;
}

.aid-related-posts-card h4 i {
    font-size: 1rem;
    color: hsl(262 83% 58%);
    opacity: 0.9;
}

/* Posts List Container */
.aid-related-posts-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0.5rem;
}

/* Individual Post Item */
.aid-related-post-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.875rem 1rem;
    background: transparent;
    border-radius: 0.75rem;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    text-decoration: none !important;
    counter-increment: post-counter;
}

.aid-related-post-item::before {
    content: counter(post-counter);
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    width: 1.5rem;
    height: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: hsl(262 83% 58% / 0.1);
    color: hsl(262 83% 58%);
    font-size: 0.6875rem;
    font-weight: 700;
    border-radius: 50%;
    opacity: 0;
    transition: all 0.25s ease;
}

.aid-related-posts-list {
    counter-reset: post-counter;
}

.aid-related-post-item:hover {
    background: linear-gradient(135deg,
            hsl(262 83% 58% / 0.06) 0%,
            hsl(262 83% 58% / 0.02) 100%);
    padding-left: 2.75rem;
}

.aid-related-post-item:hover::before {
    opacity: 1;
}

/* Thumbnail with Modern Styling */
.aid-related-post-thumb {
    width: 56px;
    height: 56px;
    object-fit: cover;
    border-radius: 0.625rem;
    flex-shrink: 0;
    box-shadow: 0 2px 8px hsl(0 0% 0% / 0.08);
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

.aid-related-post-item:hover .aid-related-post-thumb {
    transform: scale(1.05);
    border-color: hsl(262 83% 58% / 0.3);
    box-shadow: 0 4px 12px hsl(262 83% 58% / 0.15);
}

/* Post Info Container */
.aid-related-post-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

/* Post Title */
.aid-related-post-title {
    font-size: 0.8125rem;
    font-weight: 600;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: hsl(var(--aid-foreground));
    line-height: 1.45;
    transition: color 0.2s ease;
}

.aid-related-post-item:hover .aid-related-post-title {
    color: hsl(262 83% 50%);
}

/* Arrow Indicator */
.aid-related-post-item::after {
    content: '→';
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%) translateX(-4px);
    font-size: 0.875rem;
    color: hsl(262 83% 58%);
    opacity: 0;
    transition: all 0.25s ease;
}

.aid-related-post-item:hover::after {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
}

/* View All Link (if added later) */
.aid-related-posts-card .view-all-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.875rem;
    margin: 0.5rem;
    border-radius: 0.625rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: hsl(262 83% 58%);
    background: hsl(262 83% 58% / 0.08);
    transition: all 0.2s ease;
}

.aid-related-posts-card .view-all-link:hover {
    background: hsl(262 83% 58%);
    color: #fff;
}

/* Dark Mode Support */
[data-theme="dark"] .aid-related-posts-card,
.dark .aid-related-posts-card {
    background: linear-gradient(145deg,
            hsl(var(--aid-card)) 0%,
            hsl(0 0% 12%) 100%);
    border-color: hsl(0 0% 20%);
}

[data-theme="dark"] .aid-related-posts-card h4,
.dark .aid-related-posts-card h4 {
    background: linear-gradient(135deg,
            hsl(262 83% 58% / 0.15) 0%,
            hsl(262 83% 58% / 0.05) 100%);
    color: hsl(262 83% 70%) !important;
}

[data-theme="dark"] .aid-related-post-title,
.dark .aid-related-post-title {
    color: hsl(0 0% 90%);
}

/* ==========================================================================
   RELATED AI TOOLS FOR BLOG POSTS
   ========================================================================== */
.hyzen-related-tools-box {
    background: linear-gradient(135deg, hsl(262 83% 58% / 0.05), hsl(262 83% 58% / 0.1));
    border: 1px solid hsl(262 83% 58% / 0.2);
    border-radius: 1rem;
    padding: 1.5rem;
    margin: 2rem 0;
}

.hyzen-related-tools-box h3 {
    font-size: 1.125rem;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.hyzen-related-tools-box h3 i {
    color: hsl(262 83% 58%);
}

.hyzen-related-tools-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.hyzen-related-tool-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: hsl(0 0% 100%);
    border: 1px solid hsl(0 0% 90%);
    border-radius: 2rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: hsl(0 0% 20%);
    transition: all 0.2s ease;
}

.hyzen-related-tool-link:hover {
    background: hsl(262 83% 58%);
    border-color: hsl(262 83% 58%);
    color: hsl(0 0% 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px hsl(262 83% 58% / 0.3);
}

.hyzen-related-tool-link i {
    font-size: 0.75rem;
    opacity: 0.7;
}

/* ==========================================================================
   RELATED TOOLS SECTION (Internal Linking)
   ========================================================================== */

.aid-related-section {
    padding: 4rem 0 5rem;
    margin-top: 3rem;
    background: hsl(var(--aid-muted) / 0.5);
    border-top: 1px solid hsl(var(--aid-border));
}

.aid-related-header {
    text-align: center;
    margin-bottom: 3rem;
}

.aid-related-title {
    font-size: 2rem !important;
    font-weight: 700 !important;
    color: hsl(var(--aid-foreground)) !important;
    margin-bottom: 0.75rem !important;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
}

.aid-related-icon {
    font-size: 1.5rem;
    animation: aid-bounce 2s ease-in-out infinite;
}

@keyframes aid-bounce {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-4px);
    }
}

.aid-related-desc {
    color: hsl(var(--aid-muted-foreground));
    font-size: 1rem;
    max-width: 500px;
    margin: 0 auto !important;
}

/* Related Tools Grid */
.aid-related-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
    margin-bottom: 2.5rem;
}

@media (max-width: 1024px) {
    .aid-related-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .aid-related-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .aid-related-grid {
        grid-template-columns: 1fr;
    }
}

/* Related Tool Card */
.aid-related-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem;
    background: hsl(var(--aid-card));
    border: 1px solid hsl(var(--aid-border));
    border-radius: 12px;
    text-decoration: none !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.aid-related-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, hsl(262 83% 58%), transparent);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.aid-related-card:hover {
    border-color: hsla(262, 83%, 58%, 0.4);
    transform: translateY(-4px);
    box-shadow: 0 12px 32px -8px hsla(262, 83%, 40%, 0.25);
}

.aid-related-card:hover::before {
    opacity: 1;
}

/* Card Icon */
.aid-related-card-icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 10px;
    background: hsl(var(--aid-muted));
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.aid-related-card-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
}

.aid-related-card-icon i {
    font-size: 1.25rem;
    color: hsl(262 83% 65%);
}

/* Card Content */
.aid-related-card-content {
    flex: 1;
    min-width: 0;
}

.aid-related-card-name {
    font-size: 0.9375rem !important;
    font-weight: 600 !important;
    color: hsl(var(--aid-foreground)) !important;
    margin-bottom: 0.25rem !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 0.3s ease;
}

.aid-related-card:hover .aid-related-card-name {
    color: hsl(262 83% 70%) !important;
}

.aid-related-card-desc {
    font-size: 0.8125rem !important;
    color: hsl(var(--aid-muted-foreground)) !important;
    line-height: 1.4 !important;
    margin: 0 !important;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Card Arrow */
.aid-related-card-arrow {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: hsl(var(--aid-muted));
    display: flex;
    align-items: center;
    justify-content: center;
    color: hsl(var(--aid-muted-foreground));
    transition: all 0.3s ease;
}

.aid-related-card:hover .aid-related-card-arrow {
    background: hsl(262 83% 58%);
    color: hsl(0 0% 100%);
    transform: translateX(4px);
}

/* Browse All CTA */
.aid-related-cta {
    text-align: center;
}

.aid-btn-browse-all {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.875rem 2rem;
    background: linear-gradient(135deg, hsl(262 83% 58%), hsl(280 70% 50%));
    color: hsl(0 0% 100%) !important;
    font-size: 0.9375rem;
    font-weight: 600;
    border-radius: 50px;
    text-decoration: none !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 16px hsla(262, 83%, 50%, 0.3);
}

.aid-btn-browse-all:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px hsla(262, 83%, 50%, 0.4);
}

.aid-btn-browse-all svg {
    transition: transform 0.3s ease;
}

.aid-btn-browse-all:hover svg {
    transform: translateX(4px);
}