.author-bio {
        background: var(--surface-color);
        border-radius: 24px;
        padding: 40px;
        margin: 50px auto 70px;
        max-width: 950px;
        box-shadow: 
            0 20px 60px rgba(var(--shadow-color-rgb), 0.1),
            0 8px 25px rgba(var(--shadow-color-rgb), 0.08),
            inset 0 1px 0 rgba(255, 255, 255, 0.1);
        border: 2px solid transparent;
        background-clip: padding-box;
        display: flex;
        align-items: center;
        gap: 35px;
        transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
        position: relative;
        overflow: hidden;
    }

    /* Subtle gradient background overlay */
    .author-bio::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(135deg, 
            rgba(102, 126, 234, 0.03) 0%, 
            rgba(118, 75, 162, 0.03) 100%);
        border-radius: 24px;
        z-index: 0;
    }

    /* Ensure content is above background */
    .author-bio > * {
        position: relative;
        z-index: 1;
    }

    /* Hover effect */
    .author-bio:hover {
        transform: translateY(-8px);
        box-shadow: 
            0 30px 80px rgba(var(--shadow-color-rgb), 0.15),
            0 12px 40px rgba(102, 126, 234, 0.2),
            inset 0 1px 0 rgba(255, 255, 255, 0.2);
        border-color: rgba(102, 126, 234, 0.2);
    }

    /* Photo frame with gradient ring */
    .author-photo-frame {
        position: relative;
        flex-shrink: 0;
        padding: 8px;
        background: linear-gradient(135deg, var(--primary), var(--secondary));
        border-radius: 50%;
        box-shadow: 0 8px 32px rgba(102, 126, 234, 0.3);
        transition: all 0.4s ease;
    }

    /* Animated gradient ring on hover */
    .author-photo-frame::before {
        content: '';
        position: absolute;
        top: -2px;
        left: -2px;
        right: -2px;
        bottom: -2px;
        background: linear-gradient(135deg, 
            rgba(102, 126, 234, 0.8) 0%, 
            rgba(118, 75, 162, 0.8) 50%, 
            rgba(240, 147, 251, 0.8) 100%);
        border-radius: 50%;
        z-index: -1;
        opacity: 0;
        transition: opacity 0.4s ease;
    }

    /* Photo itself */
    .author-photo {
        width: 120px;
        height: 120px;
        border-radius: 50%;
        object-fit: cover;
        border: 4px solid var(--surface-color);
        transition: all 0.4s ease;
        position: relative;
        z-index: 2;
    }

    /* Photo frame hover effects */
    .author-bio:hover .author-photo-frame {
        transform: scale(1.05) rotate(3deg);
        box-shadow: 0 15px 50px rgba(102, 126, 234, 0.4);
    }

    .author-bio:hover .author-photo-frame::before {
        opacity: 1;
    }

    .author-bio:hover .author-photo {
        transform: scale(1.02);
    }

    /* Green verified badge */
    .author-badge {
        position: absolute;
        bottom: 5px;
        right: 5px;
        width: 38px;
        height: 38px;
        background: linear-gradient(135deg, #10b981 0%, #059669 100%);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 4px solid var(--surface-color);
        box-shadow: 
            0 6px 20px rgba(16, 185, 129, 0.4),
            0 2px 8px rgba(16, 185, 129, 0.2);
        z-index: 3;
        transition: all 0.3s ease;
    }

    /* Badge glow effect */
    .author-badge::before {
        content: '';
        position: absolute;
        top: -2px;
        left: -2px;
        right: -2px;
        bottom: -2px;
        background: linear-gradient(135deg, #10b981, #059669);
        border-radius: 50%;
        z-index: -1;
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    .author-bio:hover .author-badge {
        transform: scale(1.1);
        box-shadow: 
            0 8px 25px rgba(16, 185, 129, 0.5),
            0 4px 12px rgba(16, 185, 129, 0.3);
    }

    .author-badge i {
        color: white;
        font-size: 16px;
        font-weight: 600;
    }

    /* Author details container */
    .author-details {
        flex: 1;
    }

    /* Author name with gradient text */
    .author-name {
        font-size: 1.5rem;
        font-weight: 800;
        color: var(--heading-color);
        margin-bottom: 8px;
        font-family: var(--heading-font);
        background: linear-gradient(135deg, var(--heading-color) 0%, var(--primary) 100%);
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    /* Title with gradient accent bar */
    .author-title {
        color: var(--primary);
        font-size: 1rem;
        font-weight: 600;
        margin-bottom: 15px;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .author-title::before {
        content: '';
        width: 4px;
        height: 20px;
        background: var(--gradient);
        border-radius: 2px;
    }

    /* Credential badges */
    .author-credentials {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        margin-bottom: 15px;
    }

    .credential-badge {
        background: var(--gradient-light);
        color: var(--primary-dark);
        padding: 4px 12px;
        border-radius: 20px;
        font-size: 0.8rem;
        font-weight: 600;
        border: 1px solid rgba(102, 126, 234, 0.2);
    }

    /* Meta information */
    .author-meta {
        display: flex;
        gap: 25px;
        flex-wrap: wrap;
        margin-bottom: 15px;
    }

    .meta-info {
        display: flex;
        align-items: center;
        gap: 8px;
        color: var(--default-color);
        font-size: 0.9rem;
        transition: color 0.3s ease;
    }

    .meta-info:hover {
        color: var(--primary);
    }

    .meta-info i {
        color: var(--primary);
        font-size: 1.1rem;
    }

    /* Social media links */
    .author-social {
        display: flex;
        gap: 12px;
        margin-top: 15px;
    }

    .social-link {
        width: 44px;
        height: 44px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.3s ease;
        font-size: 18px;
        text-decoration: none;
        border: none;
        position: relative;
        overflow: hidden;
    }

    /* Twitter/X - Light Blue */
    .social-link:nth-child(1) {
        background: #1DA1F2;
        color: white;
    }

    /* LinkedIn - Blue */
    .social-link:nth-child(2) {
        background: #0077B5;
        color: white;
    }

    /* Email - Red/Pink */
    .social-link:nth-child(3) {
        background: #EA4335;
        color: white;
    }

    /* YouTube - Dark Blue */
    .social-link:nth-child(4) {
        background: #4267B2;
        color: white;
    }

    .social-link:hover {
        transform: translateY(-3px) scale(1.1);
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
    }

    /* Hover effects for each platform */
    .social-link:nth-child(1):hover {
        background: #0d8bd9;
        box-shadow: 0 8px 25px rgba(29, 161, 242, 0.4);
    }

    .social-link:nth-child(2):hover {
        background: #005885;
        box-shadow: 0 8px 25px rgba(0, 119, 181, 0.4);
    }

    .social-link:nth-child(3):hover {
        background: #d33b2c;
        box-shadow: 0 8px 25px rgba(234, 67, 53, 0.4);
    }

    .social-link:nth-child(4):hover {
        background: #365899;
        box-shadow: 0 8px 25px rgba(66, 103, 178, 0.4);
    }

    /* ================================================
       DARK MODE STYLES
       ================================================ */
    
    html[data-theme="dark"] .author-bio {
        background: var(--surface-color);
        box-shadow: 0 12px 48px rgba(0, 0, 0, 0.3),
                    0 4px 16px rgba(0, 0, 0, 0.2);
        border-color: var(--border-color);
    }

    html[data-theme="dark"] .author-photo-frame {
        box-shadow: 0 8px 32px rgba(102, 126, 234, 0.4);
    }

    html[data-theme="dark"] .author-badge {
        border-color: var(--surface-color);
    }

    /* ================================================
       RESPONSIVE DESIGN
       ================================================ */
    
    /* Mobile devices (up to 575px) */
    @media (max-width: 575.98px) {
        .author-bio {
            flex-direction: column;
            text-align: center;
            padding: 25px 20px;
            gap: 20px;
            margin: 30px auto 40px;
        }
        
        .author-photo {
            width: 100px;
            height: 100px;
        }
        
        .author-meta {
            justify-content: center;
            gap: 15px;
            flex-direction: column;
            align-items: center;
        }
        
        .author-social {
            justify-content: center;
        }
        
        .author-credentials {
            justify-content: center;
        }

        .author-title::before {
            display: none;
        }
    }

    /* Small tablets (576px to 767px) */
    @media (min-width: 576px) and (max-width: 767.98px) {
        .author-bio {
            flex-direction: row;
            text-align: left;
            padding: 35px 25px;
        }
        
        .author-photo {
            width: 110px;
            height: 110px;
        }
    }

    /* Tablets (768px to 991px) */
    @media (min-width: 768px) and (max-width: 991.98px) {
        .author-bio {
            padding: 35px 30px;
        }
    }

    /* Large desktops (1200px+) */
    @media (min-width: 1200px) {
        .author-bio {
            padding: 45px 40px;
        }
    }

    /* ================================================
       NEW FACT-CHECKED BADGE STYLES
       ================================================ */

    .fact-checked-badge {
        position: absolute;
        bottom: 20px;
        right: 30px;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        background: var(--surface-color);
        border: 1px solid var(--border-color, #e0e0e0);
        padding: 6px 12px;
        border-radius: 12px;
        font-size: 0.75rem; /* 12px */
        color: var(--default-color);
        box-shadow: 0 4px 12px rgba(var(--shadow-color-rgb), 0.05);
        z-index: 2;
        transition: all 0.3s ease;
        opacity: 0.8; /* Make it slightly subtle */
    }

    .fact-checked-badge i {
        color: #059669; /* Use a success/verified color */
        font-size: 1rem; /* 16px */
        font-weight: 600;
    }

    .fact-checked-badge strong {
        color: var(--heading-color);
        font-weight: 600;
    }

    /* Hover effect for the badge */
    .author-bio:hover .fact-checked-badge {
        transform: translateY(-3px);
        box-shadow: 0 6px 16px rgba(var(--shadow-color-rgb), 0.08);
        border-color: var(--primary);
        opacity: 1;
    }

    /* Dark mode styles for the badge */
    html[data-theme="dark"] .fact-checked-badge {
        background: #2a2f4c; /* Slightly lighter than card */
        border-color: var(--border-color);
        opacity: 0.8;
    }

    html[data-theme="dark"] .fact-checked-badge i {
        color: #10b981;
    }

    /* --- RESPONSIVE ADJUSTMENT for badge --- */

    @media (max-width: 575.98px) {
        .fact-checked-badge {
            /* On mobile, make it relative and centered */
            position: relative;
            bottom: auto;
            right: auto;
            margin: 15px auto 0;
            width: fit-content;
            justify-content: center;
        }
    }